diff --git a/example/_color.overrides.deprecated.scss b/example/_color.overrides.deprecated.scss
new file mode 100644
index 0000000..d25b949
--- /dev/null
+++ b/example/_color.overrides.deprecated.scss
@@ -0,0 +1,14 @@
+// @todo remove
+/// @deprecated example
+// Modify a color in existing theme
+$theme-dark: (
+    color-fill-tile-symbol: #ff4136
+);
+
+// Extend $themes with custom christmas theme
+$themes: (
+    christmas: (
+        color-fill-tile-symbol: #ff4136,
+        color-stroke-tile-symbol: #36FF53
+    )    
+);
\ No newline at end of file
diff --git a/example/_color.overrides.scss b/example/_color.overrides.scss
index 1188b81..af66867 100644
--- a/example/_color.overrides.scss
+++ b/example/_color.overrides.scss
@@ -1,12 +1,10 @@
 // Modify a color in existing theme
-$theme-dark: (
-    color-fill-tile-symbol: #ff4136
-);
+:root[theme='dark'] {
+    --color-fill-tile-symbol: #FF4136;
+}
 
-// Extend $themes with custom christmas theme
-$themes: (
-    christmas: (
-        color-fill-tile-symbol: #ff4136,
-        color-stroke-tile-symbol: #36FF53
-    )    
-);
\ No newline at end of file
+// Add a new theme by specifying all colors with the theme value
+:root[theme='christmas'] {
+    --color-fill-tile-symbol: #FF4136,
+    --color-stroke-tile-symbol: #36FF53
+}
\ No newline at end of file
diff --git a/example/app.deprecated.scss b/example/app.deprecated.scss
new file mode 100644
index 0000000..9747560
--- /dev/null
+++ b/example/app.deprecated.scss
@@ -0,0 +1,27 @@
+// @todo remove
+/// @deprecated example
+// import color overrides 
+// Note: overrides must be imported before the default colors
+@import "color.overrides.deprecated";
+
+// import default colors
+@import "../src/colors.deprecated";
+
+// import mixins
+@import "../src/mixins";
+
+$icon-size: 76px;
+
+.symbol {
+    width: $icon-size;
+    height: $icon-size;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    @include themify {
+        fill: themed('color-fill-tile-symbol');
+        stroke: themed('color-stroke-tile-symbol');
+    }    
+}
\ No newline at end of file
diff --git a/example/app.scss b/example/app.scss
index 9de15bc..071dbc7 100644
--- a/example/app.scss
+++ b/example/app.scss
@@ -1,12 +1,9 @@
-// import color overrides 
-// Note: overrides must be imported before the default colors
-@import "color.overrides";
-
 // import default colors
 @import "../src/colors";
 
-// import mixins
-@import "../src/mixins";
+// import color overrides 
+// Note: overrides must be imported after the default colors
+@import "color.overrides";
 
 $icon-size: 76px;
 
@@ -17,9 +14,6 @@ $icon-size: 76px;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-
-    @include themify {
-        fill: themed('color-fill-tile-symbol');
-        stroke: themed('color-stroke-tile-symbol');
-    }    
+    fill: var(--color-fill-tile-symbol);
+    stroke: var(--color-stroke-tile-symbol);
 }
\ No newline at end of file
diff --git a/package.json b/package.json
index 0aaccaa..11383f0 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@microsoft/azure-iot-ux-fluent-css",
   "description": "Azure IoT common styles library for CSS, Colors and Themes",
-  "version": "6.0.0",
+  "version": "7.0.0-alpha.1",
   "license": "MIT",
   "engines": {
     "node": "^8.0.0"
diff --git a/src/_color.palette.deprecated.scss b/src/_color.palette.deprecated.scss
new file mode 100644
index 0000000..89efbb9
--- /dev/null
+++ b/src/_color.palette.deprecated.scss
@@ -0,0 +1,149 @@
+/**
+ * Color Palette
+ */
+
+
+// Principal Colors
+
+$color-black: #000000;
+$color-grey-1500: #0D0E0F; //90
+$color-grey-1400: #1A1D1E; //14
+$color-grey-1300: #292D30; //80
+$color-grey-1200: #212121; //12
+$color-grey-1100: #252728; //11
+$color-grey-1000: #2D2F33; //01
+$color-grey-900: #31373E; //70
+$color-grey-800: #3F3F3F;
+$color-grey-700: #434343; //60
+$color-grey-600: #666666; //text-20
+$color-grey-550: #515151; //55
+$color-grey-500: #A6A6A6; //text-30
+$color-grey-400: #AEAEAE; //4
+$color-grey-300: #C8C8C8; //40
+$color-grey-200: #DADADA; //30
+$color-grey-100: #F2F2F2; //1
+$color-white: #FFFFFF;
+
+
+// Chart & Measurement Colors
+
+$color-green-100: #01b8aa;
+$color-green-200: #6be8dc;
+$color-green-300: #59cec3;
+$color-green-400: #08bca6;
+$color-green-500: #0aa58e;
+$color-green-600: #12937d;
+$color-green-700: #99E3DD;
+$color-green-800: #67D4CC;
+$color-green-900: #34C6BB;
+$color-green-1000: #018A80;
+$color-green-1100: #015C55;
+
+$color-lightgrey-100: #ffffff;
+$color-lightgrey-200: #f2f2f2;
+$color-lightgrey-300: #e6e6e6;
+$color-lightgrey-400: #cccccc;
+$color-lightgrey-500: #b3b3b3;
+$color-lightgrey-600: #999999;
+$color-lightgrey-700: #374649;
+$color-lightgrey-800: #AFB5B6;
+$color-lightgrey-900: #879092;
+$color-lightgrey-1000: #5F6B6D;
+$color-lightgrey-1100: #293537;
+$color-lightgrey-1200: #1C2325;
+
+$color-red-100: #fd625e;
+$color-red-200: #ff7878;
+$color-red-300: #fc5454;
+$color-red-400: #fc3232; //4
+$color-red-500: #e81818; //5
+$color-red-600: #b21f1f;
+$color-red-700: #FEC0BF;
+$color-red-800: #FEA19E;
+$color-red-900: #FD817E;
+$color-red-1000: #BE4A47;
+$color-red-1100: #7F312F;
+
+$color-yellow-100: #f2c80f;
+$color-yellow-200: #fcdf65;
+$color-yellow-300: #ffd629;
+$color-yellow-400: #ffce00;
+$color-yellow-500: #e5bd13;
+$color-yellow-600: #c9a611;
+$color-yellow-700: #FAE99F;
+$color-yellow-800: #F7DE6F;
+$color-yellow-900: #F5D33F;
+$color-yellow-1000: #B6960B;
+$color-yellow-1100: #796408;
+
+$color-lightblue-100: #8ad4eb;
+$color-lightblue-200: #caf8ff;
+$color-lightblue-300: #b0f8ff;
+$color-lightblue-400: #73f8ff;
+$color-lightblue-500: #27e2dd;
+$color-lightblue-600: #1bb2a7;
+$color-lightblue-700: #D0EEF7;
+$color-lightblue-800: #B9E5F3;
+$color-lightblue-900: #A1DDEF;
+$color-lightblue-1000: #689FB0;
+$color-lightblue-1100: #456A76;
+
+$color-orange-100: #fe9666;
+$color-orange-200: #ffcdbb;
+$color-orange-300: #f7a389;
+$color-orange-400: #f9724e;
+$color-orange-500: #DC5F31;
+$color-orange-600: #db220f;
+$color-orange-700: #FFD5C2;
+$color-orange-800: #FEC0A3;
+$color-orange-900: #FEAB85;
+$color-orange-1000: #BF714D;
+$color-orange-1100: #7F4B33;
+
+$color-purple-100: #a66999;
+$color-purple-200: #efa5e1;
+$color-purple-300: #ea78d9;
+$color-purple-400: #e247db;
+$color-purple-500: #d313d3;
+$color-purple-600: #921e9b;
+$color-purple-700: #DFC5D9;
+$color-purple-800: #CAA5C2;
+$color-purple-900: #B887AD;
+$color-purple-1000: #7D4F73;
+$color-purple-1100: #53354D;
+
+
+// Alert Colors
+
+$color-warning-100: #FFD629; //warn-1
+$color-warning-200: #F2C80F;
+$color-warning-300: #D58E00;
+$color-error-local-100: #FF2828; //status-60
+$color-error-local-200: #A50606; //status-30
+$color-error-global-100: #D02E00; //err-1
+$color-information-100: #DCDCDC;  //info-1
+$color-information-200: #879092; //status-10
+$color-success-100: #3BB44A;
+$color-success-200: #89FF98;
+$color-success-300: #007D0F;
+
+
+// Input Control Colors
+
+$color-blue-100: #136BFB; //10
+$color-blue-200: #0065D9;
+$color-blue-300: #0053B3; //30
+$color-blue-400: #00418C;
+$color-blue-500: #60AAFF; //50
+$color-blue-600: #2F7FDB;
+$color-blue-700: #A1AAB6;
+$color-blue-800: #DEECF9;
+
+
+// Semi-transparent Colors
+
+$color-black-transparent-primary: rgba($color-black, 0.8);
+$color-black-transparent-half: rgba($color-black, 0.5);
+$color-black-transparent-third: rgba($color-black,0.33);
+$color-black-transparent-tenth: rgba($color-black,0.1);
+$color-transparent: transparent;
\ No newline at end of file
diff --git a/src/_color.palette.scss b/src/_color.palette.scss
index 53a83f2..cb232b9 100644
--- a/src/_color.palette.scss
+++ b/src/_color.palette.scss
@@ -2,148 +2,67 @@
  * Color Palette
  */
 
+ :root {
+    // Main Palette Colors
+    --color-white: #FFFFFF;
+    --color-grey-10: #FAF9F8;
+    --color-grey-20: #F3F2F1;
+    --color-grey-30: #DADADA;
+    --color-grey-40: #C8C8C8;
+    --color-grey-50: #3C3C41;
+    --color-grey-60: #434343; 
+    --color-grey-70: #31373E;
+    --color-grey-80: #292D30;
+    --color-grey-90: #0D0E0F;
+    --color-black: #000000;
 
-// Principal Colors
+    // Accent colors
+    --color-blue-10: #136BFB;
+    --color-blue-20: #0065D9;
+    --color-blue-30: #0053B3;
+    --color-blue-40: #00418C;
+    --color-blue-50: #60AAFF;
+    --color-blue-60: #2F7FDB;
+    --color-blue-70: #8DAACB;
 
-$color-black: #000000;
-$color-grey-1500: #0D0E0F;
-$color-grey-1400: #1A1D1E;
-$color-grey-1300: #292D30;
-$color-grey-1200: #212121;
-$color-grey-1100: #252728;
-$color-grey-1000: #2D2F33;
-$color-grey-900: #31373E;
-$color-grey-800: #3F3F3F;
-$color-grey-700: #434343;
-$color-grey-600: #666666;
-$color-grey-550: #515151;
-$color-grey-500: #A6A6A6;
-$color-grey-400: #AEAEAE;
-$color-grey-300: #C8C8C8;
-$color-grey-200: #DADADA;
-$color-grey-100: #F2F2F2;
-$color-white: #FFFFFF;
+    // Status/Alerts
+    --color-status-10: #879092;
+    --color-status-20: #D58E00;
+    --color-status-30: #A50606;
+    --color-status-40: #3BB44A;
+    --color-status-50: #F2C80F;
+    --color-status-60: #FF2828;
+    --color-status-70: #89FF98;
 
+    // Text
+    --color-text-10: #323130;
+    --color-text-20: #666666;
+    --color-text-30: #A6A6A6;
 
-// Chart & Measurement Colors
+    // Semi-transparent Colors
+    --color-black-transparent-primary: rgba(var(--color-black), 0.8);
+    --color-black-transparent-half: rgba(var(--color-black), 0.5);
+    --color-black-transparent-third: rgba(var(--color-black), 0.3);
+    --color-black-transparent-tenth: rgba(var(--color-black), 0.1);
+    --color-white-transparent-primary: rgba(var(--color-black), 0.8);
+    --color-white-transparent-half: rgba(var(--color-white), 0.5);
+    --color-white-transparent-third: rgba(var(--color-white), 0.3);
+    --color-white-transparent-tenth: rgba(var(--color-white), 0.1);
+    --color-transparent: transparent;
 
-$color-green-100: #01b8aa;
-$color-green-200: #6be8dc;
-$color-green-300: #59cec3;
-$color-green-400: #08bca6;
-$color-green-500: #0aa58e;
-$color-green-600: #12937d;
-$color-green-700: #99E3DD;
-$color-green-800: #67D4CC;
-$color-green-900: #34C6BB;
-$color-green-1000: #018A80;
-$color-green-1100: #015C55;
+    // [Deprecated] Legacy colors
+    --color-grey-1: #F2F2F2;
+    --color-grey-4: #AEAEAE;
+    --color-grey-01: #2D2F33;
+    --color-grey-11: #252728;
+    --color-grey-12: #212121;
+    --color-grey-14: #1A1D1E;
+    --color-grey-55: #515151;
 
-$color-lightgrey-100: #ffffff;
-$color-lightgrey-200: #f2f2f2;
-$color-lightgrey-300: #e6e6e6;
-$color-lightgrey-400: #cccccc;
-$color-lightgrey-500: #b3b3b3;
-$color-lightgrey-600: #999999;
-$color-lightgrey-700: #374649;
-$color-lightgrey-800: #AFB5B6;
-$color-lightgrey-900: #879092;
-$color-lightgrey-1000: #5F6B6D;
-$color-lightgrey-1100: #293537;
-$color-lightgrey-1200: #1C2325;
+    --color-red-4: #FC3232;
+    --color-red-5: #E81818;
 
-$color-red-100: #fd625e;
-$color-red-200: #ff7878;
-$color-red-300: #fc5454;
-$color-red-400: #fc3232;
-$color-red-500: #e81818;
-$color-red-600: #b21f1f;
-$color-red-700: #FEC0BF;
-$color-red-800: #FEA19E;
-$color-red-900: #FD817E;
-$color-red-1000: #BE4A47;
-$color-red-1100: #7F312F;
-
-$color-yellow-100: #f2c80f;
-$color-yellow-200: #fcdf65;
-$color-yellow-300: #ffd629;
-$color-yellow-400: #ffce00;
-$color-yellow-500: #e5bd13;
-$color-yellow-600: #c9a611;
-$color-yellow-700: #FAE99F;
-$color-yellow-800: #F7DE6F;
-$color-yellow-900: #F5D33F;
-$color-yellow-1000: #B6960B;
-$color-yellow-1100: #796408;
-
-$color-lightblue-100: #8ad4eb;
-$color-lightblue-200: #caf8ff;
-$color-lightblue-300: #b0f8ff;
-$color-lightblue-400: #73f8ff;
-$color-lightblue-500: #27e2dd;
-$color-lightblue-600: #1bb2a7;
-$color-lightblue-700: #D0EEF7;
-$color-lightblue-800: #B9E5F3;
-$color-lightblue-900: #A1DDEF;
-$color-lightblue-1000: #689FB0;
-$color-lightblue-1100: #456A76;
-
-$color-orange-100: #fe9666;
-$color-orange-200: #ffcdbb;
-$color-orange-300: #f7a389;
-$color-orange-400: #f9724e;
-$color-orange-500: #DC5F31;
-$color-orange-600: #db220f;
-$color-orange-700: #FFD5C2;
-$color-orange-800: #FEC0A3;
-$color-orange-900: #FEAB85;
-$color-orange-1000: #BF714D;
-$color-orange-1100: #7F4B33;
-
-$color-purple-100: #a66999;
-$color-purple-200: #efa5e1;
-$color-purple-300: #ea78d9;
-$color-purple-400: #e247db;
-$color-purple-500: #d313d3;
-$color-purple-600: #921e9b;
-$color-purple-700: #DFC5D9;
-$color-purple-800: #CAA5C2;
-$color-purple-900: #B887AD;
-$color-purple-1000: #7D4F73;
-$color-purple-1100: #53354D;
-
-
-// Alert Colors
-
-$color-warning-100: #FFD629;
-$color-warning-200: #F2C80F;
-$color-warning-300: #D58E00;
-$color-error-local-100: #FF2828;
-$color-error-local-200: #A50606;
-$color-error-global-100: #D02E00;
-$color-information-100: #DCDCDC;
-$color-information-200: #879092;
-$color-success-100: #3BB44A;
-$color-success-200: #89FF98;
-$color-success-300: #007D0F;
-
-
-// Input Control Colors
-
-$color-blue-100: #136BFB;
-$color-blue-200: #0065D9;
-$color-blue-300: #0053B3;
-$color-blue-400: #00418C;
-$color-blue-500: #60AAFF;
-$color-blue-600: #2F7FDB;
-$color-blue-700: #A1AAB6;
-$color-blue-800: #DEECF9;
-
-
-// Semi-transparent Colors
-
-$color-black-transparent-primary: rgba($color-black, 0.8);
-$color-black-transparent-half: rgba($color-black, 0.5);
-$color-black-transparent-third: rgba($color-black,0.33);
-$color-black-transparent-tenth: rgba($color-black,0.1);
-$color-transparent: transparent;
\ No newline at end of file
+    --color-err-1: #D02E00;
+    --color-info-1: #DCDCDC;
+    --color-warn-1: #FFD629;
+ }
\ No newline at end of file
diff --git a/src/_colors.deprecated.scss b/src/_colors.deprecated.scss
new file mode 100644
index 0000000..6052238
--- /dev/null
+++ b/src/_colors.deprecated.scss
@@ -0,0 +1,16 @@
+/** 
+ * Common Azure IoT Colors
+ */
+
+@import "./dark/color.deprecated";
+@import "./light/color.deprecated";
+
+// Declare map with !default to allow colors in the map
+// to be overwritten by the consumer app
+$themes: () !default;
+
+// Add theme specific colors to the theme map
+$themes: map-merge((
+    dark: $theme-dark,
+    light: $theme-light
+), $themes);
\ No newline at end of file
diff --git a/src/_colors.scss b/src/_colors.scss
index 72e474f..ce1da01 100644
--- a/src/_colors.scss
+++ b/src/_colors.scss
@@ -2,15 +2,8 @@
  * Common Azure IoT Colors
  */
 
+@import "color.palette";
 @import "./dark/color.defaults";
+@import "./dark/color.fluent";
 @import "./light/color.defaults";
-
-// Declare map with !default to allow colors in the map
-// to be overwritten by the consumer app
-$themes: () !default;
-
-// Add theme specific colors to the theme map
-$themes: map-merge((
-    dark: $theme-dark,
-    light: $theme-light
-), $themes);
\ No newline at end of file
+@import "./light/color.fluent";
\ No newline at end of file
diff --git a/src/_constants.scss b/src/_constants.scss
index e5b46fa..4b3ceae 100644
--- a/src/_constants.scss
+++ b/src/_constants.scss
@@ -15,7 +15,6 @@ $gutter-bigger: 40px;
 
 $grid-size: 4px;
 
-
 // Z Index
 
 $z-index-large-step: 1000;
@@ -34,8 +33,7 @@ $z-index-flyouts-dropdown: $z-index-flyout-layer + 6 * $z-index-medium-step;
 $z-index-flyouts-inline-btn: $z-index-flyout-layer + 7 * $z-index-medium-step;
 $z-index-tutorial-tips: $z-index-flyout-layer + 8 * $z-index-medium-step;
 
-
-// Icons
+// [Deprecated - moved to typography] Icons @todo remove 
 
 $icon-font-family: "icons";
 $icon-size-base: 16px;
@@ -77,3 +75,8 @@ $screen-sm: 480px;
 $screen-md: 640px;
 $screen-lg: 1024px;
 $screen-xl: 1366px;
+
+/// Interaction constants
+
+$interaction-timing: 200ms;
+$clickable-scale: 0.9;
\ No newline at end of file
diff --git a/src/_mixins.scss b/src/_mixins.scss
index c88fca1..a13b37f 100644
--- a/src/_mixins.scss
+++ b/src/_mixins.scss
@@ -8,14 +8,17 @@
 /// @type String
 $default-prefix: 'theme' !default;
 
-/// Interaction constants
-///
+// @todo remove
+/// Interaction constants 
+/// @deprecated Moved to constants
 $interaction-timing: 200ms;
 $clickable-scale: 0.9;
 
+// @todo remove
 /// Creates theme variations
 ///
 /// @param {Map} $themes - Theme map to loop through. Optional.
+/// @deprecated Not needed by using css custom properties
 @mixin themify($themes: $themes) {
     // for each theme, get its name and color variable map:
     @each $theme, $colors in $themes {
@@ -32,12 +35,14 @@ $clickable-scale: 0.9;
     }
 }
 
+// @todo remove
 /// Gets a value from the color map.
 ///
 /// @param {String} $key - Name of the color variable
 /// @param {Map} $theme-map - Theme map to use. Optional.
 ///
 /// @returns {String} The color for the given key
+/// @deprecated Not needed by using css custom properties
 @function themed($key, $theme-map: $theme-map) {
     $value: map-get($theme-map, $key);
 
@@ -48,6 +53,7 @@ $clickable-scale: 0.9;
     @return $value;
 }
 
+// @todo remove
 /// Clickable button animation
 ///
 /// @param {Number} $scale - Clickable scale
diff --git a/src/_normalize.deprecated.scss b/src/_normalize.deprecated.scss
new file mode 100644
index 0000000..93c10bf
--- /dev/null
+++ b/src/_normalize.deprecated.scss
@@ -0,0 +1,150 @@
+/**
+ * Normalize
+ */
+
+@import "normalize.vendor";
+@import "constants";
+@import "typography.deprecated";
+@import "mixins";
+
+:global {
+  body {
+    margin: 0;
+    padding: 0;
+    font-family: $font-family-default;
+    font-size: $font-size-default;
+    line-height: $line-height-base;
+  }
+
+  * {
+    @include box-sizing(border-box);
+  }
+
+  *:before,
+  *:after {
+    @include box-sizing(border-box);
+  }
+
+  // Reset fonts for relevant elements
+  input,
+  button,
+  select,
+  textarea {
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+  }
+
+  // override bootstrap's vertical margins for headings since we override
+  // heading sizes in overrides.scss
+  h1, .h1,
+  h2, .h2,
+  h3, .h3 {
+    margin-top: $gutter-small / 2;
+    margin-bottom: $gutter-small / 2;
+  }
+
+  // Headings
+  // -------------------------
+
+  h1, h2, h3, h4, h5, h6,
+  .h1, .h2, .h3, .h4, .h5, .h6 {
+    font-family: $font-family-default;
+    font-weight: $headings-font-weight;
+    line-height: $headings-line-height;
+
+    small,
+    .small {
+      font-weight: normal;
+      line-height: 1;
+    }
+  }
+
+  h1, .h1,
+  h2, .h2,
+  h3, .h3 {
+    margin-top: ($gutter-small / 2);
+    margin-bottom: ($gutter-small / 2);
+
+    small,
+    .small {
+      font-size: 65%;
+    }
+  }
+
+  h4, .h4,
+  h5, .h5,
+  h6, .h6 {
+    margin-top: ($gutter-small / 2);
+    margin-bottom: ($gutter-small / 2);
+
+    small,
+    .small {
+      font-size: 75%;
+    }
+  }
+
+  h1, .h1 { font-size: $font-size-h1; }
+  h2, .h2 { font-size: $font-size-h2; }
+  h3, .h3 { font-size: $font-size-h3; }
+  h4, .h4 { font-size: $font-size-h4; }
+
+
+  // Body text
+  // -------------------------
+
+  p {
+    margin: 0 0 ($line-height-computed / 2);
+  }
+
+  label {
+    font-weight: normal;
+  }
+
+  a {
+    text-decoration: none;
+  }
+
+  // Unordered and Ordered lists
+  ul,
+  ol {
+    margin-top: 0;
+    margin-bottom: ($line-height-computed / 2);
+
+    ul,
+    ol {
+        margin-bottom: 0;
+    }
+  }
+
+  // Description Lists
+  dl {
+    margin-top: 0; // Remove browser default
+    margin-bottom: $line-height-computed;
+  }
+
+  dt,
+  dd {
+    line-height: $line-height-base;
+  }
+
+  dt {
+    font-weight: bold;
+  }
+
+  dd {
+    margin-left: 0; // Undo browser default
+  }
+
+  // define some common css classes that everyone needs to use. These
+  // need to be declared as global so they're not mangled:
+  .inline-text-overflow {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .hidden {
+    display: none !important;
+  }
+}
diff --git a/src/_normalize.scss b/src/_normalize.scss
index 37fe97a..6d88a78 100644
--- a/src/_normalize.scss
+++ b/src/_normalize.scss
@@ -3,17 +3,18 @@
  */
 
 @import "normalize.vendor";
-@import "constants";
+@import "colors";
 @import "typography";
+@import "constants";
 @import "mixins";
 
 :global {
   body {
     margin: 0;
     padding: 0;
-    font-family: $font-family-default;
-    font-size: $font-size-default;
-    line-height: $line-height-base;
+    font-family: var(--font-family-default);
+    font-size: var(--font-size-default);
+    line-height: var(--line-height-base);
   }
 
   * {
@@ -49,9 +50,9 @@
 
   h1, h2, h3, h4, h5, h6,
   .h1, .h2, .h3, .h4, .h5, .h6 {
-    font-family: $font-family-default;
-    font-weight: $headings-font-weight;
-    line-height: $headings-line-height;
+    font-family: var(--font-family-default);
+    font-weight: var(--headings-font-weight);
+    line-height: var(--headings-line-height);
 
     small,
     .small {
@@ -84,17 +85,17 @@
     }
   }
 
-  h1, .h1 { font-size: $font-size-h1; }
-  h2, .h2 { font-size: $font-size-h2; }
-  h3, .h3 { font-size: $font-size-h3; }
-  h4, .h4 { font-size: $font-size-h4; }
+  h1, .h1 { font-size: var(--font-size-h1) }
+  h2, .h2 { font-size: var(--font-size-h2) }
+  h3, .h3 { font-size: var(font-size-h3) }
+  h4, .h4 { font-size: var(font-size-h4) }
 
 
   // Body text
   // -------------------------
 
   p {
-    margin: 0 0 ($line-height-computed / 2);
+    margin: 0 0 calc(var(--line-height-computed) / 2);
   }
 
   label {
@@ -109,7 +110,7 @@
   ul,
   ol {
     margin-top: 0;
-    margin-bottom: ($line-height-computed / 2);
+    margin-bottom: calc(var(--line-height-computed) / 2);
 
     ul,
     ol {
@@ -120,12 +121,12 @@
   // Description Lists
   dl {
     margin-top: 0; // Remove browser default
-    margin-bottom: $line-height-computed;
+    margin-bottom: var(--line-height-computed);
   }
 
   dt,
   dd {
-    line-height: $line-height-base;
+    line-height: var(--line-height-base);
   }
 
   dt {
diff --git a/src/_typography.deprecated.scss b/src/_typography.deprecated.scss
new file mode 100644
index 0000000..a569151
--- /dev/null
+++ b/src/_typography.deprecated.scss
@@ -0,0 +1,25 @@
+/**
+ * Typography constants
+ */
+
+$font-size-h1: 36px; 
+$font-size-h2: 24px; 
+$font-size-h3: 18px;
+$font-size-h4: 18px; 
+$font-size-h5: 16px; 
+$font-size-default: 14px;
+$font-size-small: 12px;
+$font-size-xsmall: 10px;
+
+$font-family-default: "Segoe UI Regular", "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif;
+$font-family-light: "Segoe UI Semilight", "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif;
+$font-family-din-regular: join('DIN-Regular', $font-family-default);
+
+$headings-font-weight: normal;
+$headings-line-height: 1.5;
+
+// Unit-less line-height for use in components like buttons. Taken from bootstrap.
+$line-height-base: 1.428571429 !default;     // ~20/14
+
+// Computed line-height (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
+$line-height-computed: floor(($font-size-default * $line-height-base)) !default;    // ~20px
\ No newline at end of file
diff --git a/src/_typography.scss b/src/_typography.scss
index 0b788b3..bad7d41 100644
--- a/src/_typography.scss
+++ b/src/_typography.scss
@@ -2,24 +2,36 @@
  * Typography constants
  */
 
-$font-size-h1: 36px; 
-$font-size-h2: 24px; 
-$font-size-h3: 18px;
-$font-size-h4: 18px; 
-$font-size-h5: 16px; 
-$font-size-default: 14px;
-$font-size-small: 12px;
-$font-size-xsmall: 10px;
+:root {
+    --font-size-h1: 36px; 
+    --font-size-h2: 24px; 
+    --font-size-h3: 18px;
+    --font-size-h4: 18px; 
+    --font-size-h5: 16px; 
+    --font-size-default: 14px;
+    --font-size-small: 12px;
+    --font-size-xsmall: 10px;
 
-$font-family-default: "Segoe UI Regular", "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif;
-$font-family-light: "Segoe UI Semilight", "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif;
-$font-family-din-regular: join('DIN-Regular', $font-family-default);
+    --font-family-default: Segoe UI Regular, Segoe UI, Segoe WP, Tahoma, Arial, sans-serif;
+    --font-family-light: Segoe UI Semilight, Segoe UI, Segoe WP, Tahoma, Arial, sans-serif;
+    --font-family-din-regular: DIN-Regular, var(--font-family-default);
+    
+    // Icons
+    --icon-font-family: "icons";
+    --icon-size-base: 16px;
+    --icon-size-xsmall: var(--icon-size-base);
+    --icon-size-small: calc(1 * var(--icon-size-base));
+    --icon-size-medium: calc(2 * var(--icon-size-base));
+    --icon-size-large: calc(3 * var(--icon-size-base));
+    --icon-size-xlarge: calc(4 * var(--icon-size-base));
+    --icon-size-xxlarge: calc(5 * var(--icon-size-base));
 
-$headings-font-weight: normal;
-$headings-line-height: 1.5;
+    --headings-font-weight: normal;
+    --headings-line-height: 1.5;
 
-// Unit-less line-height for use in components like buttons. Taken from bootstrap.
-$line-height-base: 1.428571429 !default;     // ~20/14
+    // Unit-less line-height for use in components like buttons. Taken from bootstrap.
+    --line-height-base: 1.428571429;     // ~20/14
 
-// Computed line-height (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
-$line-height-computed: floor(($font-size-default * $line-height-base)) !default;    // ~20px
\ No newline at end of file
+    // Computed line-height (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
+    --line-height-computed: 20px;
+}
diff --git a/src/dark/_color.defaults.scss b/src/dark/_color.defaults.scss
index 678be72..5a3842d 100644
--- a/src/dark/_color.defaults.scss
+++ b/src/dark/_color.defaults.scss
@@ -2,296 +2,207 @@
  * Default Dark Theme Colors
  */
 
-@import "../color.palette";
-
-
-// Theme Map
-
-$theme-dark: () !default;
-$theme-dark: map-merge((
-
-    // Layouts
-    color-bg-navbar: $color-grey-900,
-    color-bg-navbar-hover: $color-grey-550,
-    color-bg-navbar-selected: $color-grey-1100,
-    color-bg-navbar-hover-selected: $color-black,
-    color-bg-header: $color-grey-1400,
-    color-bg-header-hover: $color-grey-700,
-    color-bg-masthead: $color-grey-1300,
-    color-bg-masthead-hover: $color-grey-700,
-    color-border-masthead-item: $color-grey-600,
-    color-border-navbar-separator: $color-grey-300,
-    color-border-masthead-focus: $color-white,
-    color-border-navbar-focus: $color-white,
+:root[theme='dark'] {
+    // Shell
+    --color-bg-navbar: var(--color-grey-70);
+    --color-bg-navbar-hover: var(--color-grey-55);
+    --color-bg-navbar-selected: var(--color-grey-11);
+    --color-bg-navbar-selected-hover: var(--color-black);
+    --color-bg-header: var(--color-grey-14);
+    --color-bg-header-hover: var(--color-grey-60);
+    --color-bg-masthead: var(--color-grey-80);
+    --color-bg-masthead-hover: var(--color-grey-60);
+    --color-outline-masthead: var(--color-white);
+    --color-border-masthead-focus: var(--color-white);
+    --color-border-navbar-focus: var(--color-white);
 
     // Surfaces
-    color-bg-panel-primary: $color-grey-1400,
-    color-bg-panel-secondary: $color-grey-1400,
-    color-bg-content: $color-grey-1400,
-    color-bg-panel-contextual: $color-grey-1500,
-    color-border-panel-contextual-separator: $color-grey-300,
-    shadow-panel-contextual: -5px 0 15.0px 0 rgba(0, 0, 0, .85),
-    color-bg-action-bar: $color-grey-1400,
-    color-bg-title-bar: $color-grey-1500,
-    color-border-panel: $color-grey-700,
-    color-border-grid: $color-grey-700,
+    --color-bg-panel: var(--color-grey-14);
+    --color-bg-container: var(--color-grey-14);
+    --color-bg-container-panel: var(--color-grey-90);
+    --color-border-container-panel: var(--color-grey-40);
+    --shadow-container-panel: -5px 0 15.0px 0 rgba(0, 0, 0, .85);
+    --color-bg-cmdbar: var(--color-grey-14);
+    --color-bg-titlebar: var(--color-grey-90);
+    --color-border-panel: var(--color-grey-60);
+    --color-border-grid: var(--color-grey-60);
 
     // Controls
-    color-bg-blastshield: $color-black-transparent-primary,
-    color-bg-balloon: $color-grey-1500,
-    color-bg-form: $color-grey-1500,
-    color-bg-table: $color-grey-1500,
-    color-bg-searchbar: $color-grey-1500,
-    color-bg-searchbar-rest: $color-grey-400,
-    color-bg-searchbar-focus: $color-white,
-    color-bg-guidance: $color-blue-400,
-    color-bg-thumbnail: $color-grey-600,
-    color-text-thumbnail: $color-grey-100,
+    --color-bg-blastshield: var(--color-black-transparent-primary);
+    --color-bg-balloon: var(--color-grey-90);
+    --color-bg-form: var(--color-grey-90);
+    --color-bg-table: var(--color-grey-90);
+    --color-bg-searchbar-active: var(--color-grey-90);
+    --color-bg-searchbar-rest: var(--color-grey-4);
+    --color-bg-searchbar-focus: var(--color-white);
 
     // Interactions
-    color-bg-item-hover: $color-grey-700,
-    color-bg-item-selected: $color-grey-1000,
+    --color-bg-hover: var(--color-grey-60);
+    --color-bg-selected: var(--color-grey-01);
 
     // All Tiles
-    color-border-tile: $color-grey-700,
-    color-border-tile-hover: $color-blue-100,
+    --color-border-tile: var(--color-grey-60); // 0.5px border
+    --color-border-tile-hover: var(--color-blue-10);
 
     // Gallery Tiles
-    color-bg-gallery-tile: $color-grey-1500,
-    color-bg-gallery-tile-banner: $color-black,
-    color-bg-gallery-tile-default: $color-grey-1200,
-    color-bg-gallery-tile-blue: $color-blue-400,
-    color-bg-gallery-tile-red: $color-red-600,
-    color-bg-gallery-tile-yellow: $color-yellow-1000,
+    --color-bg-gallery-tile-top: var(--color-grey-90);
+    --color-bg-gallery-tile-bottom: var(--color-blue-10); // Duplicated?
 
     // Dashboard Tiles
-    color-bg-dashboard-tile: $color-grey-1500,
-    color-fill-tile-symbol: $color-white,
-    color-stroke-tile-symbol: $color-white,
+    --color-bg-dashboard: var(--color-grey-90);
+    --color-tile-symbol: var(--color-white);
+    --color-stroke-tile-symbol: var(--color-white);
 
     // Input Fields
-    color-bg-input-rest: $color-grey-1400,
-    color-bg-input-hover: $color-grey-1400,
-    color-bg-input-selected: $color-grey-1400,
-    color-bg-input-disabled: $color-grey-1100,
+    --color-bg-input-rest: var(--color-grey-14);
+    --color-bg-input-hover: var(--color-grey-14);
+    --color-bg-input-selected: var(--color-grey-14);
+    --color-bg-input-disabled: var(--color-grey-11);
 
-    color-border-input-rest: $color-grey-800,
-    color-border-input-hover: $color-grey-600,
-    color-border-input-selected: $color-blue-100,
-    color-border-input-error: $color-error-local-100,
+    --color-border-input-hover: var(--color-text-20);
+    --color-border-input-selected: var(--color-blue-10);
+    --color-border-input-error: var(--color-status-30);
 
-    color-text-clear: $color-white,
-    color-text-placeholder: $color-grey-400,
+    --color-text-regular: var(--color-white);
+    --color-text-placeholder: var(--color-grey-4);
 
     // Dropdowns
-    color-dropdown-rest: $color-grey-1500,
-    color-dropdown-hover: $color-grey-1500,
-    color-dropdown-focus: $color-grey-1400,
-    color-dropdown-pressed: $color-grey-700,
-    color-dropdown-disabled: $color-grey-1500,
-    color-border-dropdown-rest: $color-blue-100,
-    color-border-dropdown-focus: $color-grey-100,
-    color-dropdown-disabled-text: $color-grey-500,
+    --color-dropdown-rest: var(--color-grey-90);
+    --color-dropdown-hover: var(--color-grey-90);
+    --color-dropdown-focus: var(--color-grey-14);
+    --color-dropdown-pressed: var(--color-grey-60);
+    --color-dropdown-disabled: var(--color-grey-90);
+    --color-border-dropdown-rest: var(--color-blue-10);
+    --color-border-dropdown-focus: var(--color-grey-1);
+    --color-text-dropdown-disabled: var(--color-text-30);
 
     // Radio button
-    color-bg-radio-btn-rest: $color-grey-1400,
-    color-bg-radio-btn-hover: $color-grey-1400,
-    color-bg-radio-btn-selected: $color-grey-1400,
-    color-bg-radio-btn-focused: $color-grey-1400,
-    color-bg-radio-btn-disabled: $color-grey-1400,
-    color-border-radio-btn-rest: $color-white,
-    color-border-radio-btn-hover: $color-white,
-    color-border-radio-btn-selected: $color-blue-500,
-    color-border-radio-btn-focused: $color-white,
-    color-border-radio-btn-disabled: $color-grey-500,
-    color-center-radio-btn-hover: $color-grey-400,
-    color-center-radio-btn-selected: $color-white,
-    color-center-radio-btn-disabled: $color-grey-500,
+    --color-bg-radio-rest: var(--color-grey-14);
+    --color-bg-radio-hover: var(--color-grey-14);
+    --color-bg-radio-selected: var(--color-grey-14);
+    --color-bg-radio-focused: var(--color-grey-14);
+    --color-bg-radio-disabled: var(--color-grey-14);
+    --color-border-radio-rest: var(--color-white);
+    --color-border-radio-hover: var(--color-white);
+    --color-border-radio-selected: var(--color-blue-50);
+    --color-border-radio-focused: var(--color-white);
+    --color-border-radio-disabled: var(--color-text-30);
+    --color-center-radio-hover: var(--color-grey-4); //On hover center will reduce to 2px circle
+    --color-center-radio-selected: var(--color-white); //On selected center will return to normal size
+    --color-center-radio-disabled: var(--color-text-30);
 
     // Toggle
-    color-bg-toggle-btn-rest-on: $color-blue-500,
-    color-bg-toggle-btn-rest-off: $color-white,
-    color-bg-toggle-btn-hover-on: $color-blue-300,
-    color-bg-toggle-btn-hover-off: $color-white,
-    color-bg-toggle-btn-focus-on: $color-blue-500,
-    color-bg-toggle-btn-focus-off: $color-white,
-    color-bg-toggle-btn-disabled-on: $color-grey-300,
-    color-bg-toggle-btn-disabled-off: $color-grey-100,
-    color-border-toggle-btn-rest-on: $color-blue-500,
-    color-border-toggle-btn-rest-off: $color-grey-600,
-    color-border-toggle-btn-hover-on: $color-blue-300,
-    color-border-toggle-btn-hover-off: $color-grey-600,
-    color-border-toggle-btn-focus-on: $color-white,
-    color-border-toggle-btn-focus-off: $color-grey-600,
-    color-border-toggle-btn-disabled-on: $color-grey-300,
-    color-border-toggle-btn-disabled-off: $color-grey-500,
-    color-circle-toggle-btn-rest-on: $color-white,
-    color-circle-toggle-btn-rest-off: $color-grey-1200,
-    color-circle-toggle-btn-hover-on: $color-white,
-    color-circle-toggle-btn-hover-off: $color-blue-300,
-    color-circle-toggle-btn-focus-on: $color-white,
-    color-circle-toggle-btn-focus-off: $color-grey-1200,
-    color-circle-toggle-btn-disabled-on: $color-grey-500,
-    color-circle-toggle-btn-disabled-off: $color-grey-500,
+    --color-bg-toggle-on-rest: var(--color-blue-50);
+    --color-bg-toggle-off-rest: var(--color-white);
+    --color-bg-toggle-on-hover: var(--color-blue-30);
+    --color-bg-toggle-off-hover: var(--color-white);
+    --color-bg-toggle-on-focus: var(--color-blue-50);
+    --color-bg-toggle-off-focus: var(--color-white);
+    --color-bg-toggle-on-disabled: var(--color-grey-40);
+    --color-bg-toggle-off-disabled: var(--color-grey-1);
+    --color-border-toggle-on-rest: var(--color-blue-50);
+    --color-border-toggle-off-rest: var(--color-text-20);
+    --color-border-toggle-on-hover: var(--color-blue-30);
+    --color-border-toggle-off-hover: var(--color-text-20);
+    --color-border-toggle-on-focus: var(--color-white);
+    --color-border-toggle-off-focus: var(--color-text-20);
+    --color-border-toggle-on-disabled: var(--color-grey-40);
+    --color-border-toggle-off-disabled: var(--color-text-30);
+    --color-circle-toggle-on-rest: var(--color-white);
+    --color-circle-toggle-off-rest: var(--color-grey-12);
+    --color-circle-toggle-on-hover: var(--color-white); //Size circle reduce to half
+    --color-circle-toggle-off-hover: var(--color-blue-30);
+    --color-circle-toggle-on-focus: var(--color-white);
+    --color-circle-toggle-off-focus: var(--color-grey-12);
+    --color-circle-toggle-on-disabled: var(--color-text-30);
+    --color-circle-toggle-off-disabled: var(--color-text-30);
 
     // Checkbox
-    color-bg-checkbox-focused: $color-grey-1400,
-    color-bg-checkbox-selected-hover: $color-blue-300,
-    color-bg-checkbox-pressed-selected: $color-blue-100,
-    color-bg-checkbox-disabled: $color-grey-1100,
-    color-border-checkbox-hover: $color-grey-600,
-    color-border-checkbox-focused: $color-grey-600,
-    color-border-checkbox-selected-hover: $color-blue-300,
-    color-border-checkbox-pressed-selected: $color-blue-100,
-    color-border-checkbox-disabled-selected: $color-grey-1100,
-    color-border-checkbox-disabled: $color-grey-1000,
-
-    // Calendar
-    color-bg-calendar-btn-current: $color-blue-100,
-    color-bg-calendar-btn-hover: $color-grey-700,
-    color-bg-calendar-btn-focus: $color-transparent,
-    color-border-calendar-btn-focus: $color-grey-600,
+    --color-bg-checkbox-focused: var(--color-color-grey-14);
+    --color-bg-checkbox-selected-hover: var(--color-blue-30);
+    --color-bg-checkbox-pressed: var(--color-blue-10);
+    --color-bg-checkbox-disabled: var(--color-grey-11);
+    --color-border-checkbox-hover: var(--color-text-20);
+    --color-border-checkbox-focused: var(--color-text-20);
+    --color-border-checkbox-selected-hover: var(--color-blue-30);
+    --color-border-checkbox-pressed-selected: var(--color-blue-10);
+    --color-border-checkbox-disabled-selected: var(--color-grey-11);
+    --color-border-checkbox-disabled: var(--color-grey-01);
 
     // General Borders
-    color-border-rest: $color-grey-700,
-    color-border-hover: $color-blue-100,
-    color-border-focus: $color-white,
-    color-border-selected: $color-blue-100,
-    color-border-disabled: $color-grey-500,
-    color-border-error: $color-error-local-100,
-    color-border-controls: $color-blue-100,
+    --color-border-rest: var(--color-grey-40);
+    --color-border-hover: var(--color-blue-10);
+    --color-border-focus: var(--color-black);
+    --color-border-selected: var(--color-blue-10);
+    --color-border-disabled: var(--color-text-30);
+    --color-border-error: var(--color-status-30);
+    --color-border-controls: var(--color-blue-10);
+    --color-outline: var(--color-white);
 
     // General Texts
-    color-text-rest: $color-white,
-    color-text-chevron: $color-grey-300,
-    color-text-error: $color-error-local-100,
-    color-text-required: $color-error-local-100,
-    color-text-visited: $color-blue-600,
-    color-text-nodata:	$color-grey-600,
-    color-text-disabled: $color-grey-500,
-    color-text-white: $color-white,
-    color-text-black: $color-black,
+    --color-text-rest: var(--color-white);
+    --color-text-chevron: var(--color-grey-40);
+    --color-text-error: var(--color-status-60);
+    --color-text-required: var(--color-status-60);
+    --color-text-nodata: var(--color-text-20);
+    --color-text-disabled: var(--color-text-30);
+    --color-text-masthead: var(--color-white);
+    --color-text-navbar: var(--color-white);
 
     // Buttons
-    color-bg-btn-standard-rest: $color-grey-200,
-    color-bg-btn-standard-hover: $color-grey-300,
-    color-bg-btn-standard-focus: $color-grey-300,
-    color-bg-btn-standard-pressed-selected: $color-grey-400,
-    color-bg-btn-standard-disabled: $color-grey-1000,
+    --color-bg-btn-standard-rest: var(--color-grey-30);
+    --color-bg-btn-standard-hover: var(--color-grey-40);
+    --color-bg-btn-standard-focus: var(--color-grey-40);
+    --color-bg-btn-standard-selected: var(--color-grey-4);
+    --color-bg-btn-standard-disabled: var(--color-grey-01);
 
-    color-bg-btn-primary-rest: $color-blue-100,
-    color-bg-btn-primary-hover: $color-blue-200,
-    color-bg-btn-primary-focus: $color-blue-200,
-    color-bg-btn-primary-pressed-selected: $color-blue-300,
-    color-bg-btn-primary-disabled: $color-grey-1000,
-    color-outline-btn-primary-focus: $color-white,
+    --color-bg-btn-primary-rest: var(--color-blue-10);
+    --color-bg-btn-primary-hover: var(--color-blue-20);
+    --color-bg-btn-primary-focus: var(--color-blue-20);
+    --color-bg-btn-primary-selected: var(--color-blue-30);
+    --color-bg-btn-primary-disabled: var(--color-grey-01);
+    --color-outline-btn-primary-focus: var(--color-white);
 
-    color-bg-btn-danger-rest: $color-red-400,
-    color-bg-btn-danger-hover: $color-red-500,
-    color-bg-btn-danger-focus: $color-red-500,
-    color-bg-btn-danger-pressed-selected: $color-red-600,
-    color-bg-btn-danger-disabled: $color-grey-1000,
-    color-outline-btn-danger-focus: $color-white,
-
-    // Layout Buttons
-    color-bg-btn-layout-rest: $color-grey-1500,
-    color-bg-btn-layout-hover: $color-grey-700,
-    color-bg-btn-layout-focus: $color-grey-1400,
-    color-bg-btn-layout-pressed-selected: $color-grey-1000,
-    color-bg-btn-layout-disabled: $color-grey-1100,
-    color-bg-btn-layout-header-pressed-selected: $color-grey-1200,
-    color-bg-btn-layout-sidenavbar-pressed-selected: $color-grey-1200,
-    color-border-btn-layout-rest: $color-blue-100,
-    color-border-btn-layout-hover: $color-grey-700,
-    color-border-btn-layout-focus: $color-white,
-    color-border-btn-layout-pressed-selected: $color-grey-1000,
-    color-border-btn-layout-disabled: $color-grey-1100,
-    color-border-btn-layout-header-pressed-selected: $color-grey-1200,
-    color-border-btn-layout-sidenavbar-pressed-selected: $color-grey-1200,
+    --color-bg-btn-negative-rest: var(--color-red-4);
+    --color-bg-btn-negative-hover: var(--color-red-5);
+    --color-bg-btn-negative-focus: var(--color-red-5);
+    --color-bg-btn-negative-disabled: var(--color-grey-01);
+    --color-outline-btn-negative-focus: var(--color-white);
 
     // Hyperlinks
-    color-text-hyperlink-rest: $color-blue-500,
-    color-text-hyperlink-hover: $color-blue-600,
-    color-text-hyperlink-focus: $color-blue-600,
-    color-text-hyperlink-disabled: $color-grey-500,
-    color-border-hyperlink-focus: $color-grey-600,
+    --color-hyperlink-rest: var(--color-blue-50);
+    --color-hyperlink-hover: var(--color-blue-60);
+    --color-hyperlink-focus: var(--color-blue-60);
+    --color-hyperlink-disabled: var(--color-text-30);
 
     // Loading
-    color-bg-loader-panel: $color-grey-1000,
-    color-bg-loader-spinner: $color-white,
-    color-border-loader-global-segment: $color-blue-100,
-    color-border-loader-global-track: $color-grey-300,
+    --color-bg-loader-panel: var(--color-grey-01);
+    --color-bg-loader-spinner: var(--color-white);
+    --color-border-loader-global-segment: var(--color-blue-10);
+    --color-border-loader-global-track: var(--color-grey-40);
 
     // Upload
-    color-bg-upload: $color-grey-1300,
-    color-border-upload: $color-grey-700,
+    --color-bg-upload: var(--color-grey-80);
+    --color-border-upload: var(--color-grey-60);
 
     // Tabs
-    color-text-pivot-tab-device-rest: $color-grey-400,
-    color-text-pivot-tab-device-hover:	$color-white,
-    color-text-pivot-tab-device-focus: $color-white,
-    color-text-pivot-tab-device-press:	$color-grey-100,
-    color-text-pivot-tab-device-selected: $color-white,
-    color-border-pivot-tab: $color-blue-100,
+    --color-pivot-rest: var(--color-grey-4);
+    --color-pivot-hover: var(--color-white);
+    --color-pivot-focus: var(--color-white);
+    --color-pivot-press: var(--color-grey-1);
+    --color-pivot-selected: var(--color-white);
+    --color-border-pivot: var(--color-blue-10);
 
     // Charts
-    color-chart-X-Y-lines:	$color-grey-400,
-    color-chart-gap-stroke: $color-grey-500,
+    --color-chart-xy-lines: var(--color-grey-4);
+    --color-chart-gap-stroke: var(--color-text-30);
 
     // Alerts
-    color-bg-alert-error: $color-error-global-100,
-    color-bg-alert-info: $color-information-200,
-    color-bg-alert-warning: $color-warning-100,
-    color-bg-alert-error-close-hover: $color-red-1100,
-    color-bg-alert-info-close-hover: $color-grey-700,
-    color-bg-alert-warning-close-hover: $color-yellow-600,
+    --color-bg-alert-error: var(--color-err-1);
+    --color-bg-alert-info: var(--color-status-10);
+    --color-bg-alert-warning: var(--color-warn-1);
 
     // Color picker
-    color-picker-border-inner: $color-white,
-    color-picker-border-outer: $color-error-global-100,
-
-    // Data color
-    data-color-1: $color-green-100,
-    data-color-2: $color-green-200,
-    data-color-3: $color-green-300,
-    data-color-4: $color-green-400,
-    data-color-5: $color-green-500,
-    data-color-6: $color-green-600,
-    data-color-7: $color-lightgrey-100,
-    data-color-8: $color-lightgrey-200,
-    data-color-9: $color-lightgrey-300,
-    data-color-10: $color-lightgrey-400,
-    data-color-11: $color-lightgrey-500,
-    data-color-12: $color-lightgrey-600,
-    data-color-13: $color-red-100,
-    data-color-14: $color-red-200,
-    data-color-15: $color-red-300,
-    data-color-16: $color-red-400,
-    data-color-17: $color-red-500,
-    data-color-18: $color-red-600,
-    data-color-19: $color-yellow-100,
-    data-color-20: $color-yellow-200,
-    data-color-21: $color-yellow-300,
-    data-color-22: $color-yellow-400,
-    data-color-23: $color-yellow-500,
-    data-color-24: $color-yellow-600,
-    data-color-25: $color-lightblue-100,
-    data-color-26: $color-lightblue-200,
-    data-color-27: $color-lightblue-300,
-    data-color-28: $color-lightblue-400,
-    data-color-29: $color-lightblue-500,
-    data-color-30: $color-lightblue-600,
-    data-color-31: $color-orange-100,
-    data-color-32: $color-orange-200,
-    data-color-33: $color-orange-300,
-    data-color-34: $color-orange-400,
-    data-color-35: $color-orange-500,
-    data-color-36: $color-orange-600,
-    data-color-37: $color-purple-100,
-    data-color-38: $color-purple-200,
-    data-color-39: $color-purple-300,
-    data-color-40: $color-purple-400,
-    data-color-41: $color-purple-500,
-    data-color-42: $color-purple-600,
-
-), $theme-dark);
\ No newline at end of file
+    --color-border-colorpicker-in: var(--color-white);
+    --color-border-colorpicker-out: var(--color-err-1);
+}
\ No newline at end of file
diff --git a/src/dark/_color.deprecated.scss b/src/dark/_color.deprecated.scss
new file mode 100644
index 0000000..6bf69f3
--- /dev/null
+++ b/src/dark/_color.deprecated.scss
@@ -0,0 +1,297 @@
+/**
+ * Default Dark Theme Colors
+ */
+
+@import "../color.palette.deprecated";
+
+
+// Theme Map
+
+$theme-dark: () !default;
+$theme-dark: map-merge((
+
+    // Layouts
+    color-bg-navbar: $color-grey-900,
+    color-bg-navbar-hover: $color-grey-550,
+    color-bg-navbar-selected: $color-grey-1100,
+    color-bg-navbar-hover-selected: $color-black, //rename
+    color-bg-header: $color-grey-1400,
+    color-bg-header-hover: $color-grey-700,
+    color-bg-masthead: $color-grey-1300,
+    color-bg-masthead-hover: $color-grey-700,
+    color-border-masthead-item: $color-grey-600, //deprecated
+    color-border-navbar-separator: $color-grey-300, //deprecated
+    color-border-masthead-focus: $color-white,
+    color-border-navbar-focus: $color-white,
+
+    // Surfaces
+    color-bg-panel-primary: $color-grey-1400, //rename
+    color-bg-panel-secondary: $color-grey-1400, //deprecated
+    color-bg-content: $color-grey-1400, //rename
+    color-bg-panel-contextual: $color-grey-1500, //rename
+    color-border-panel-contextual-separator: $color-grey-300, //rename
+    shadow-panel-contextual: -5px 0 15.0px 0 rgba(0, 0, 0, .85), //rename
+    color-bg-action-bar: $color-grey-1400, //rename
+    color-bg-title-bar: $color-grey-1500, //rename
+    color-border-panel: $color-grey-700,
+    color-border-grid: $color-grey-700,
+
+    // Controls
+    color-bg-blastshield: $color-black-transparent-primary,
+    color-bg-balloon: $color-grey-1500,
+    color-bg-form: $color-grey-1500,
+    color-bg-table: $color-grey-1500,
+    color-bg-searchbar: $color-grey-1500, //rename
+    color-bg-searchbar-rest: $color-grey-400,
+    color-bg-searchbar-focus: $color-white,
+    color-bg-guidance: $color-blue-400, //deprecated
+    color-bg-thumbnail: $color-grey-600, //deprecated
+    color-text-thumbnail: $color-grey-100, //deprecated
+
+    // Interactions
+    color-bg-item-hover: $color-grey-700,
+    color-bg-item-selected: $color-grey-1000,
+
+    // All Tiles
+    color-border-tile: $color-grey-700,
+    color-border-tile-hover: $color-blue-100,
+
+    // Gallery Tiles
+    color-bg-gallery-tile: $color-grey-1500, //rename
+    color-bg-gallery-tile-banner: $color-black, //deprecated
+    color-bg-gallery-tile-default: $color-grey-1200, //deprecated
+    color-bg-gallery-tile-blue: $color-blue-400, //deprecated
+    color-bg-gallery-tile-red: $color-red-600, //deprecated
+    color-bg-gallery-tile-yellow: $color-yellow-1000, //deprecated
+
+    // Dashboard Tiles
+    color-bg-dashboard-tile: $color-grey-1500, //rename
+    color-fill-tile-symbol: $color-white, //rename
+    color-stroke-tile-symbol: $color-white, //rename
+
+    // Input Fields
+    color-bg-input-rest: $color-grey-1400,
+    color-bg-input-hover: $color-grey-1400,
+    color-bg-input-selected: $color-grey-1400,
+    color-bg-input-disabled: $color-grey-1100,
+
+    color-border-input-rest: $color-grey-800, //deprecated
+    color-border-input-hover: $color-grey-600,
+    color-border-input-selected: $color-blue-100,
+    color-border-input-error: $color-error-local-100,
+
+    color-text-clear: $color-white, //rename
+    color-text-placeholder: $color-grey-400,
+
+    // Dropdowns
+    color-dropdown-rest: $color-grey-1500,
+    color-dropdown-hover: $color-grey-1500,
+    color-dropdown-focus: $color-grey-1400,
+    color-dropdown-pressed: $color-grey-700,
+    color-dropdown-disabled: $color-grey-1500,
+    color-border-dropdown-rest: $color-blue-100,
+    color-border-dropdown-focus: $color-grey-100,
+    color-dropdown-disabled-text: $color-grey-500,
+
+    // Radio button
+    color-bg-radio-btn-rest: $color-grey-1400, //rename
+    color-bg-radio-btn-hover: $color-grey-1400, //rename
+    color-bg-radio-btn-selected: $color-grey-1400, //rename
+    color-bg-radio-btn-focused: $color-grey-1400, //rename
+    color-bg-radio-btn-disabled: $color-grey-1400, //rename
+    color-border-radio-btn-rest: $color-white, //rename
+    color-border-radio-btn-hover: $color-white, //rename
+    color-border-radio-btn-selected: $color-blue-500, //rename
+    color-border-radio-btn-focused: $color-white, //rename
+    color-border-radio-btn-disabled: $color-grey-500, //rename
+    color-center-radio-btn-hover: $color-grey-400, //rename
+    color-center-radio-btn-selected: $color-white, //rename
+    color-center-radio-btn-disabled: $color-grey-500, //rename
+
+    // Toggle
+    color-bg-toggle-btn-rest-on: $color-blue-500, //rename
+    color-bg-toggle-btn-rest-off: $color-white, //rename
+    color-bg-toggle-btn-hover-on: $color-blue-300, //rename
+    color-bg-toggle-btn-hover-off: $color-white, //rename
+    color-bg-toggle-btn-focus-on: $color-blue-500, //rename
+    color-bg-toggle-btn-focus-off: $color-white, //rename
+    color-bg-toggle-btn-disabled-on: $color-grey-300, //rename
+    color-bg-toggle-btn-disabled-off: $color-grey-100, //rename
+    color-border-toggle-btn-rest-on: $color-blue-500, //rename
+    color-border-toggle-btn-rest-off: $color-grey-600, //rename
+    color-border-toggle-btn-hover-on: $color-blue-300, //rename
+    color-border-toggle-btn-hover-off: $color-grey-600, //rename
+    color-border-toggle-btn-focus-on: $color-white, //rename
+    color-border-toggle-btn-focus-off: $color-grey-600, //rename
+    color-border-toggle-btn-disabled-on: $color-grey-300, //rename
+    color-border-toggle-btn-disabled-off: $color-grey-500, //rename
+    color-circle-toggle-btn-rest-on: $color-white, //rename
+    color-circle-toggle-btn-rest-off: $color-grey-1200, //rename
+    color-circle-toggle-btn-hover-on: $color-white, //rename
+    color-circle-toggle-btn-hover-off: $color-blue-300, //rename
+    color-circle-toggle-btn-focus-on: $color-white, //rename
+    color-circle-toggle-btn-focus-off: $color-grey-1200, //rename
+    color-circle-toggle-btn-disabled-on: $color-grey-500, //rename
+    color-circle-toggle-btn-disabled-off: $color-grey-500, //rename
+
+    // Checkbox
+    color-bg-checkbox-focused: $color-grey-1400,
+    color-bg-checkbox-selected-hover: $color-blue-300,
+    color-bg-checkbox-pressed-selected: $color-blue-100,
+    color-bg-checkbox-disabled: $color-grey-1100,
+    color-border-checkbox-hover: $color-grey-600,
+    color-border-checkbox-focused: $color-grey-600,
+    color-border-checkbox-selected-hover: $color-blue-300,
+    color-border-checkbox-pressed-selected: $color-blue-100,
+    color-border-checkbox-disabled-selected: $color-grey-1100,
+    color-border-checkbox-disabled: $color-grey-1000,
+
+    // Calendar
+    color-bg-calendar-btn-current: $color-blue-100, //deprecated
+    color-bg-calendar-btn-hover: $color-grey-700, //deprecated
+    color-bg-calendar-btn-focus: $color-transparent, //deprecated
+    color-border-calendar-btn-focus: $color-grey-600, //deprecated
+
+    // General Borders
+    color-border-rest: $color-grey-700,
+    color-border-hover: $color-blue-100,
+    color-border-focus: $color-white,
+    color-border-selected: $color-blue-100,
+    color-border-disabled: $color-grey-500,
+    color-border-error: $color-error-local-100,
+    color-border-controls: $color-blue-100,
+
+    // General Texts
+    color-text-rest: $color-white,
+    color-text-chevron: $color-grey-300,
+    color-text-error: $color-error-local-100,
+    color-text-required: $color-error-local-100,
+    color-text-visited: $color-blue-600, //deprecated
+    color-text-nodata:	$color-grey-600,
+    color-text-disabled: $color-grey-500,
+    color-text-white: $color-white, //deprecated
+    color-text-black: $color-black, //deprecated
+
+    // Buttons
+    color-bg-btn-standard-rest: $color-grey-200,
+    color-bg-btn-standard-hover: $color-grey-300,
+    color-bg-btn-standard-focus: $color-grey-300,
+    color-bg-btn-standard-pressed-selected: $color-grey-400,
+    color-bg-btn-standard-disabled: $color-grey-1000,
+
+    color-bg-btn-primary-rest: $color-blue-100,
+    color-bg-btn-primary-hover: $color-blue-200,
+    color-bg-btn-primary-focus: $color-blue-200,
+    color-bg-btn-primary-pressed-selected: $color-blue-300,
+    color-bg-btn-primary-disabled: $color-grey-1000,
+    color-outline-btn-primary-focus: $color-white,
+
+    color-bg-btn-danger-rest: $color-red-400, //rename
+    color-bg-btn-danger-hover: $color-red-500, //rename
+    color-bg-btn-danger-focus: $color-red-500, //rename
+    color-bg-btn-danger-pressed-selected: $color-red-600, //deprecated
+    color-bg-btn-danger-disabled: $color-grey-1000, //rename
+    color-outline-btn-danger-focus: $color-white, //rename
+
+    // Layout Buttons
+    color-bg-btn-layout-rest: $color-grey-1500, //deprecated
+    color-bg-btn-layout-hover: $color-grey-700, //deprecated
+    color-bg-btn-layout-focus: $color-grey-1400, //deprecated
+    color-bg-btn-layout-pressed-selected: $color-grey-1000, //deprecated
+    color-bg-btn-layout-disabled: $color-grey-1100, //deprecated
+    color-bg-btn-layout-header-pressed-selected: $color-grey-1200, //deprecated
+    color-bg-btn-layout-sidenavbar-pressed-selected: $color-grey-1200, //deprecated
+    color-border-btn-layout-rest: $color-blue-100, //deprecated
+    color-border-btn-layout-hover: $color-grey-700, //deprecated
+    color-border-btn-layout-focus: $color-white, //deprecated
+    color-border-btn-layout-pressed-selected: $color-grey-1000, //deprecated
+    color-border-btn-layout-disabled: $color-grey-1100, //deprecated
+    color-border-btn-layout-header-pressed-selected: $color-grey-1200, //deprecated
+    color-border-btn-layout-sidenavbar-pressed-selected: $color-grey-1200, //deprecated
+
+    // Hyperlinks
+    color-text-hyperlink-rest: $color-blue-500,
+    color-text-hyperlink-hover: $color-blue-600,
+    color-text-hyperlink-focus: $color-blue-600,
+    color-text-hyperlink-disabled: $color-grey-500,
+    color-border-hyperlink-focus: $color-grey-600, //deprecated
+
+    // Loading
+    color-bg-loader-panel: $color-grey-1000,
+    color-bg-loader-spinner: $color-white,
+    color-border-loader-global-segment: $color-blue-100,
+    color-border-loader-global-track: $color-grey-300,
+
+    // Upload
+    color-bg-upload: $color-grey-1300,
+    color-border-upload: $color-grey-700,
+
+    // Tabs
+    color-text-pivot-tab-device-rest: $color-grey-400, //rename
+    color-text-pivot-tab-device-hover:	$color-white, //rename
+    color-text-pivot-tab-device-focus: $color-white, //rename
+    color-text-pivot-tab-device-press:	$color-grey-100, //rename
+    color-text-pivot-tab-device-selected: $color-white, //rename
+    color-border-pivot-tab: $color-blue-100, //rename
+
+    // Charts
+    color-chart-X-Y-lines:	$color-grey-400, //rename
+    color-chart-gap-stroke: $color-grey-500,
+
+    // Alerts
+    color-bg-alert-error: $color-error-global-100,
+    color-bg-alert-info: $color-information-200,
+    color-bg-alert-warning: $color-warning-100,
+    color-bg-alert-error-close-hover: $color-red-1100, //deprecated
+    color-bg-alert-info-close-hover: $color-grey-700, //deprecated
+    color-bg-alert-warning-close-hover: $color-yellow-600, //deprecated
+
+    // Color picker
+    color-picker-border-inner: $color-white, //rename
+    color-picker-border-outer: $color-error-global-100, //rename
+
+    // Data color
+    data-color-1: $color-green-100,
+    data-color-2: $color-green-200,
+    data-color-3: $color-green-300,
+    data-color-4: $color-green-400,
+    data-color-5: $color-green-500,
+    data-color-6: $color-green-600,
+    data-color-7: $color-lightgrey-100,
+    data-color-8: $color-lightgrey-200,
+    data-color-9: $color-lightgrey-300,
+    data-color-10: $color-lightgrey-400,
+    data-color-11: $color-lightgrey-500,
+    data-color-12: $color-lightgrey-600,
+    data-color-13: $color-red-100,
+    data-color-14: $color-red-200,
+    data-color-15: $color-red-300,
+    data-color-16: $color-red-400,
+    data-color-17: $color-red-500,
+    data-color-18: $color-red-600,
+    data-color-19: $color-yellow-100,
+    data-color-20: $color-yellow-200,
+    data-color-21: $color-yellow-300,
+    data-color-22: $color-yellow-400,
+    data-color-23: $color-yellow-500,
+    data-color-24: $color-yellow-600,
+    data-color-25: $color-lightblue-100,
+    data-color-26: $color-lightblue-200,
+    data-color-27: $color-lightblue-300,
+    data-color-28: $color-lightblue-400,
+    data-color-29: $color-lightblue-500,
+    data-color-30: $color-lightblue-600,
+    data-color-31: $color-orange-100,
+    data-color-32: $color-orange-200,
+    data-color-33: $color-orange-300,
+    data-color-34: $color-orange-400,
+    data-color-35: $color-orange-500,
+    data-color-36: $color-orange-600,
+    data-color-37: $color-purple-100,
+    data-color-38: $color-purple-200,
+    data-color-39: $color-purple-300,
+    data-color-40: $color-purple-400,
+    data-color-41: $color-purple-500,
+    data-color-42: $color-purple-600,
+
+), $theme-dark);
\ No newline at end of file
diff --git a/src/dark/_color.fluent.scss b/src/dark/_color.fluent.scss
new file mode 100644
index 0000000..4380dfd
--- /dev/null
+++ b/src/dark/_color.fluent.scss
@@ -0,0 +1,208 @@
+/**
+ * Default Dark Theme Colors
+ */
+
+:root[theme='fluent-dark'] {
+    // Shell
+    --color-bg-navbar: var(--color-grey-90);
+    --color-bg-navbar-hover: var(--color-grey-30);
+    --color-bg-navbar-selected: var(--color-white);
+    --color-bg-navbar-selected-hover: var(--color-grey-30);
+    --color-bg-header: var(--color-white);
+    --color-bg-header-hover: var(--color-grey-20);
+    --color-bg-masthead: var(--color-grey-60);
+    --color-bg-masthead-hover: var(--color-text-20);
+    --color-outline-masthead: var(--color-white);
+    --color-border-masthead-focus: var(--color-white);
+    --color-border-navbar-focus: var(--color-black);
+
+    // Surfaces
+    --color-bg-panel: var(--color-grey-10);
+    --color-bg-container: var(--color-black);
+    --color-bg-container-panel: var(--color-wblack);
+    --color-border-container-panel: var(--color-grey-40);
+    --shadow-container-panel: 0 25.6px 57.6px 0 rgba(0, 0, 0, .12);
+    --color-bg-cmdbar: var(--color-white);
+    --color-bg-titlebar: var(--color-grey-40);
+    --color-border-panel: var(--color-grey-40);
+    --color-border-grid: var(--color-grey-40);
+
+    // Controls
+    --color-bg-blastshield: var(--color-black); //primary opacity
+    --color-bg-balloon: var(--color-white);
+    --color-bg-form: var(--color-white);
+    --color-bg-table: var(--color-white);
+    --color-bg-searchbar-active: var(--color-white);
+    --color-bg-searchbar-rest: var(--color-white); //at 30% opacity
+    --color-bg-searchbar-focus: var(--color-white);
+
+    // Interactions
+    --color-bg-hover: var(--color-grey-20);
+    --color-bg-selected: var(--color-grey-30);
+
+    // All Tiles
+    --color-border-tile: var(--color-grey-30); // 0.5px border
+    --color-border-tile-hover: var(--color-blue-10);
+
+    // Gallery Tiles
+    --color-bg-gallery-tile-top: var(--color-white);
+    --color-bg-gallery-tile-bottom: var(--color-blue-10);
+
+    // Dashboard Tiles
+    --color-bg-dashboard: var(--color-grey-10);
+    --color-tile-symbol: var(--color-text-10);
+    --color-stroke-tile-symbol: var(--color-text-10);
+
+    // Input Fields
+    --color-bg-input-rest: var(--color-white);
+    --color-bg-input-hover: var(--color-white);
+    --color-bg-input-selected: var(--color-white);
+    --color-bg-input-disabled: var(--color-grey-30);
+
+    --color-border-input-hover: var(--color-text-20);
+    --color-border-input-selected: var(--color-blue-10);
+    --color-border-input-error: var(--color-status-30);
+
+    --color-text-regular: var(--color-text-10);
+    --color-text-placeholder: var(--color-text-20);
+
+    // Dropdowns
+    --color-dropdown-rest: var(--color-white);
+    --color-dropdown-hover: var(--color-grey-30);
+    --color-dropdown-focus: var(--color-grey-30);
+    --color-dropdown-pressed: var(--color-grey-40);
+    --color-dropdown-disabled: var(--color-grey-30);
+    --color-border-dropdown-rest: var(--color-blue-10);
+    --color-border-dropdown-focus: var(--color-text-20);
+    --color-text-dropdown-disabled: var(--color-text-30);
+
+    // Radio button
+    --color-bg-radio-rest: var(--color-white);
+    --color-bg-radio-hover: var(--color-white);
+    --color-bg-radio-selected: var(--color-white);
+    --color-bg-radio-focused: var(--color-white);
+    --color-bg-radio-disabled: var(--color-white);
+    --color-border-radio-rest: var(--color-text-10);
+    --color-border-radio-hover: var(--color-text-10);
+    --color-border-radio-selected: var(--color-blue-10);
+    --color-border-radio-focused: var(--color-text-10);
+    --color-border-radio-disabled: var(--color-text-30);
+    --color-center-radio-hover: var(--color-blue-10); //On hover center will reduce to 2px circle
+    --color-center-radio-selected: var(--color-blue-20); //On selected center will return to normal size
+    --color-center-radio-disabled: var(--color-text-30);
+
+    // Toggle
+    --color-bg-toggle-on-rest: var(--color-blue-10);
+    --color-bg-toggle-off-rest: var(--color-white);
+    --color-bg-toggle-on-hover: var(--color-blue-30);
+    --color-bg-toggle-off-hover: var(--color-white);
+    --color-bg-toggle-on-focus: var(--color-blue-10);
+    --color-bg-toggle-off-focus: var(--color-white);
+    --color-bg-toggle-on-disabled: var(--color-text-30);
+    --color-bg-toggle-off-disabled: var(--color-grey-30);
+    --color-border-toggle-on-rest: var(--color-white);
+    --color-border-toggle-off-rest: var(--color-text-20);
+    --color-border-toggle-on-hover: var(--color-text-20);
+    --color-border-toggle-off-hover: var(--color-text-20);
+    --color-border-toggle-on-focus: var(--color-white);
+    --color-border-toggle-off-focus: var(--color-text-20);
+    --color-border-toggle-on-disabled: var(--color-text-30);
+    --color-border-toggle-off-disabled: var(--color-text-20);
+    --color-circle-toggle-on-rest: var(--color-white);
+    --color-circle-toggle-off-rest: var(--color-black);
+    --color-circle-toggle-on-hover: var(--color-white); //Size circle reduce to have
+    --color-circle-toggle-off-hover: var(--color-blue-30);
+    --color-circle-toggle-on-focus: var(--color-white);
+    --color-circle-toggle-off-focus: var(--color-black);
+    --color-circle-toggle-on-disabled: var(--color-text-20);
+    --color-circle-toggle-off-disabled: var(--color-text-20);
+
+    // Checkbox
+    --color-bg-checkbox-focused: var(--color-color-white);
+    --color-bg-checkbox-selected-hover: var(--color-blue-30);
+    --color-bg-checkbox-pressed: var(--color-blue-10);
+    --color-bg-checkbox-disabled: var(--color-grey-20);
+    --color-border-checkbox-hover: var(--color-text-10);
+    --color-border-checkbox-focused: var(--color-text-10);
+    --color-border-checkbox-selected-hover: var(--color-blue-30);
+    --color-border-checkbox-pressed-selected: var(--color-blue-10);
+    --color-border-checkbox-disabled-selected: var(--color-text-30);
+    --color-border-checkbox-disabled: var(--color-text-30);
+
+    // General Borders
+    --color-border-rest: var(--color-grey-40);
+    --color-border-hover: var(--color-blue-10);
+    --color-border-focus: var(--color-black);
+    --color-border-selected: var(--color-blue-10);
+    --color-border-disabled: var(--color-text-30);
+    --color-border-error: var(--color-status-30);
+    --color-border-controls: var(--color-blue-10);
+    --color-outline: var(--color-blue-10);
+
+    // General Texts
+    --color-text-rest: var(--color-text-10);
+    --color-text-chevron: var(--color-text-20);
+    --color-text-error: var(--color-status-30);
+    --color-text-required: var(--color-text-20);
+    --color-text-nodata: var(--color-text-20);
+    --color-text-disabled: var(--color-text-30);
+    --color-text-masthead: var(--color-white);
+    --color-text-navbar: var(--color-text-rest);
+
+    // Buttons
+    --color-bg-btn-standard-rest: var(--color-grey-20);
+    --color-bg-btn-standard-hover: var(--color-grey-30);
+    --color-bg-btn-standard-focus: var(--color-grey-20);
+    --color-bg-btn-standard-selected: var(--color-grey-40);
+    --color-bg-btn-standard-disabled: var(--color-text-30);
+
+    --color-bg-btn-primary-rest: var(--color-blue-10);
+    --color-bg-btn-primary-hover: var(--color-blue-20);
+    --color-bg-btn-primary-focus: var(--color-blue-10);
+    --color-bg-btn-primary-selected: var(--color-blue-30);
+    --color-bg-btn-primary-disabled: var(--color-text-20);
+    --color-outline-btn-primary-focus: var(--color-white);
+
+    --color-bg-btn-negative-rest: var(--color-status-30);
+    --color-bg-btn-negative-hover: var(--color-status-30);
+    --color-bg-btn-negative-focus: var(--color-status-30);
+    --color-bg-btn-negative-disabled: var(--color-text-30);
+    --color-outline-btn-negative-focus: var(--color-white);
+
+    // Hyperlinks
+    --color-hyperlink-rest: var(--color-blue-20);
+    --color-hyperlink-hover: var(--color-blue-30);
+    --color-hyperlink-focus: var(--color-blue-20);
+    --color-hyperlink-disabled: var(--color-text-30);
+
+    // Loading
+    --color-bg-loader-panel: var(--color-grey-20);
+    --color-bg-loader-spinner: var(--color-blue-10);
+    --color-border-loader-global-segment: var(--color-blue-10);
+    --color-border-loader-global-track: var(--color-grey-40);
+
+    // Upload
+    --color-bg-upload: var(--color-grey-20);
+    --color-border-upload: var(--color-grey-30);
+
+    // Tabs
+    --color-pivot-rest: var(--color-text-20);
+    --color-pivot-hover: var(--color-text-10);
+    --color-pivot-focus: var(--color-text-10);
+    --color-pivot-press: var(--color-black);
+    --color-pivot-selected: var(--color-text-10);
+    --color-border-pivot: var(--color-blue-10);
+
+    // Charts
+    --color-chart-xy-lines: var(--color-grey-40);
+    --color-chart-gap-stroke: var(--color-text-30);
+
+    // Alerts
+    --color-bg-alert-error: var(--color-status-30);
+    --color-bg-alert-info: var(--color-status-10);
+    --color-bg-alert-warning: var(--color-status-20);
+
+    // Color picker
+    --color-border-colorpicker-in: var(--color-white);
+    --color-border-colorpicker-out: var(--color-text-20);
+}
\ No newline at end of file
diff --git a/src/light/_color.defaults.scss b/src/light/_color.defaults.scss
index d061cfd..e8ab9a1 100644
--- a/src/light/_color.defaults.scss
+++ b/src/light/_color.defaults.scss
@@ -2,297 +2,209 @@
  * Default Light Theme Colors
  */
 
-@import "../color.palette";
-
-
-// Theme map
-
-$theme-light: () !default;
-$theme-light: map-merge((
-
-    // Layouts
-    color-bg-navbar: $color-grey-900,
-    color-bg-navbar-hover: $color-grey-550,
-    color-bg-navbar-selected: $color-grey-1100,
-    color-bg-navbar-hover-selected: $color-black,
-    color-bg-header: $color-grey-100,
-    color-bg-header-hover: $color-grey-600,
-    color-bg-masthead: $color-grey-1300,
-    color-bg-masthead-hover: $color-grey-600,
-    color-border-masthead-item: $color-grey-500,
-    color-border-navbar-separator: $color-grey-300,
-    color-border-masthead-focus: $color-white,
-    color-border-navbar-focus: $color-white,
+ // light theme is the default, therefore store everything in root 
+ // without any attribute
+:root {
+    // Shell
+    --color-bg-navbar: var(--color-grey-70);
+    --color-bg-navbar-hover: var(--color-grey-55);
+    --color-bg-navbar-selected: var(--color-grey-11);
+    --color-bg-navbar-selected-hover: var(--color-black);
+    --color-bg-header: var(--color-grey-1);
+    --color-bg-header-hover: var(--color-text-20);
+    --color-bg-masthead: var(--color-grey-80);
+    --color-bg-masthead-hover: var(--color-text-20);
+    --color-outline-masthead: var(--color-white);
+    --color-border-masthead-focus: var(--color-white);
+    --color-border-navbar-focus: var(--color-white);
 
     // Surfaces
-    color-bg-panel-primary: $color-grey-100,
-    color-bg-panel-secondary: $color-grey-100,
-    color-bg-content: $color-grey-100,
-    color-bg-panel-contextual: $color-white,
-    color-border-panel-contextual-separator: $color-grey-300,
-    shadow-panel-contextual: 0 25.6px 57.6px 0 rgba(0, 0, 0, .12),
-    color-bg-action-bar: $color-grey-100,
-    color-bg-title-bar: $color-grey-300,
-    color-border-panel: $color-grey-300,
-    color-border-grid: $color-grey-300,
+    --color-bg-panel: var(--color-grey-1);
+    --color-bg-container: var(--color-grey-1);
+    --color-bg-container-panel: var(--color-white);
+    --color-border-container-panel: var(--color-grey-40);
+    --shadow-container-panel: 0 25.6px 57.6px 0 rgba(0, 0, 0, .12);
+    --color-bg-cmdbar: var(--color-grey-1);
+    --color-bg-titlebar: var(--color-grey-40);
+    --color-border-panel: var(--color-grey-40);
+    --color-border-grid: var(--color-grey-40);
 
     // Controls
-    color-bg-blastshield: $color-black-transparent-primary,
-    color-bg-balloon: $color-white,
-    color-bg-form: $color-white,
-    color-bg-table: $color-white,
-    color-bg-searchbar: $color-white,
-    color-bg-searchbar-rest: $color-grey-400,
-    color-bg-searchbar-focus: $color-white,
-    color-bg-guidance: $color-blue-300,
-    color-bg-thumbnail: $color-grey-600,
-    color-text-thumbnail: $color-grey-100,
+    --color-bg-blastshield: var(--color-black-transparent-primary);
+    --color-bg-balloon: var(--color-white);
+    --color-bg-form: var(--color-white);
+    --color-bg-table: var(--color-white);
+    --color-bg-searchbar-active: var(--color-white);
+    --color-bg-searchbar-rest: var(--color-grey-4);
+    --color-bg-searchbar-focus: var(--color-white);
 
     // Interactions
-    color-bg-item-hover: $color-grey-200,
-    color-bg-item-selected: $color-grey-300,
+    --color-bg-hover: var(--color-grey-30);
+    --color-bg-selected: var(--color-grey-40);
 
     // All Tiles
-    color-border-tile: $color-grey-300,
-    color-border-tile-hover: $color-blue-100,
+    --color-border-tile: var(--color-grey-40); // 0.5px border
+    --color-border-tile-hover: var(--color-blue-10);
 
     // Gallery Tiles
-    color-bg-gallery-tile: $color-white,
-    color-bg-gallery-tile-banner: $color-black,
-    color-bg-gallery-tile-default: $color-grey-200,
-    color-bg-gallery-tile-blue: $color-blue-100,
-    color-bg-gallery-tile-red: $color-red-500,
-    color-bg-gallery-tile-yellow: $color-yellow-500,
+    --color-bg-gallery-tile-top: var(--color-white);
+    --color-bg-gallery-tile-bottom: var(--color-blue-10); // Duplicated?
 
     // Dashboard Tiles
-    color-bg-dashboard-tile: $color-grey-100,
-    color-fill-tile-symbol: $color-grey-1200,
-    color-stroke-tile-symbol: $color-grey-1200,
+    --color-bg-dashboard: var(--color-grey-1);
+    --color-tile-symbol: var(--color-text-10);
+    --color-stroke-tile-symbol: var(--color-grey-12);
 
     // Input Fields
-    color-bg-input-rest: $color-white,
-    color-bg-input-hover: $color-white,
-    color-bg-input-selected: $color-white,
-    color-bg-input-disabled: $color-grey-200,
+    --color-bg-input-rest: var(--color-white);
+    --color-bg-input-hover: var(--color-white);
+    --color-bg-input-selected: var(--color-white);
+    --color-bg-input-disabled: var(--color-grey-30);
 
-    color-border-input-rest: $color-grey-300,
-    color-border-input-hover: $color-grey-600,
-    color-border-input-selected: $color-blue-100,
-    color-border-input-error: $color-error-local-200,
+    --color-border-input-hover: var(--color-text-20);
+    --color-border-input-selected: var(--color-blue-10);
+    --color-border-input-error: var(--color-status-30);
 
-    color-text-clear: $color-black,
-    color-text-placeholder: $color-grey-400,
+    --color-text-regular: var(--color-black);
+    --color-text-placeholder: var(--color-grey-4);
 
     // Dropdowns
-    color-dropdown-rest: $color-white,
-    color-dropdown-hover: $color-grey-100,
-    color-dropdown-focus: $color-grey-100,
-    color-dropdown-pressed: $color-grey-200,
-    color-dropdown-disabled: $color-white,
-    color-border-dropdown-rest: $color-blue-100,
-    color-border-dropdown-focus: $color-grey-600,
-    color-dropdown-disabled-text: $color-grey-400,
+    --color-dropdown-rest: var(--color-white);
+    --color-dropdown-hover: var(--color-grey-1);
+    --color-dropdown-focus: var(--color-grey-1);
+    --color-dropdown-pressed: var(--color-grey-30);
+    --color-dropdown-disabled: var(--color-white);
+    --color-border-dropdown-rest: var(--color-blue-10);
+    --color-border-dropdown-focus: var(--color-text-20);
+    --color-text-dropdown-disabled: var(--color-grey-4);
 
     // Radio button
-    color-bg-radio-btn-rest: $color-white,
-    color-bg-radio-btn-hover: $color-white,
-    color-bg-radio-btn-selected: $color-white,
-    color-bg-radio-btn-focused: $color-white,
-    color-bg-radio-btn-disabled: $color-white,
-    color-border-radio-btn-rest: $color-grey-1200,
-    color-border-radio-btn-hover: $color-grey-1200,
-    color-border-radio-btn-selected: $color-blue-100,
-    color-border-radio-btn-focused: $color-grey-1200,
-    color-border-radio-btn-disabled: $color-grey-300,
-    color-center-radio-btn-hover: $color-grey-400,
-    color-center-radio-btn-selected: $color-grey-1200,
-    color-center-radio-btn-disabled: $color-grey-300,
+    --color-bg-radio-rest: var(--color-white);
+    --color-bg-radio-hover: var(--color-white);
+    --color-bg-radio-selected: var(--color-white);
+    --color-bg-radio-focused: var(--color-white);
+    --color-bg-radio-disabled: var(--color-white);
+    --color-border-radio-rest: var(--color-grey-12);
+    --color-border-radio-hover: var(--color-grey-12);
+    --color-border-radio-selected: var(--color-blue-10);
+    --color-border-radio-focused: var(--color-grey-12);
+    --color-border-radio-disabled: var(--color-text-40);
+    --color-center-radio-hover: var(--color-grey-4); //On hover center will reduce to 2px circle
+    --color-center-radio-selected: var(--color-grey-12); //On selected center will return to normal size
+    --color-center-radio-disabled: var(--color-grey-40);
 
     // Toggle
-    color-bg-toggle-btn-rest-on: $color-blue-500,
-    color-bg-toggle-btn-rest-off: $color-white,
-    color-bg-toggle-btn-hover-on: $color-blue-300,
-    color-bg-toggle-btn-hover-off: $color-white,
-    color-bg-toggle-btn-focus-on: $color-blue-500,
-    color-bg-toggle-btn-focus-off: $color-white,
-    color-bg-toggle-btn-disabled-on: $color-grey-300,
-    color-bg-toggle-btn-disabled-off: $color-grey-100,
-    color-border-toggle-btn-rest-on: $color-white,
-    color-border-toggle-btn-rest-off: $color-grey-600,
-    color-border-toggle-btn-hover-on: $color-white,
-    color-border-toggle-btn-hover-off: $color-grey-600,
-    color-border-toggle-btn-focus-on: $color-white,
-    color-border-toggle-btn-focus-off: $color-grey-600,
-    color-border-toggle-btn-disabled-on: $color-grey-300,
-    color-border-toggle-btn-disabled-off: $color-grey-500,
-    color-circle-toggle-btn-rest-on: $color-white,
-    color-circle-toggle-btn-rest-off: $color-grey-1200,
-    color-circle-toggle-btn-hover-on: $color-white,
-    color-circle-toggle-btn-hover-off: $color-blue-300,
-    color-circle-toggle-btn-focus-on: $color-white,
-    color-circle-toggle-btn-focus-off: $color-grey-1200,
-    color-circle-toggle-btn-disabled-on: $color-grey-500,
-    color-circle-toggle-btn-disabled-off: $color-grey-500,
+    --color-bg-toggle-on-rest: var(--color-blue-50);
+    --color-bg-toggle-off-rest: var(--color-white);
+    --color-bg-toggle-on-hover: var(--color-blue-30);
+    --color-bg-toggle-off-hover: var(--color-white);
+    --color-bg-toggle-on-focus: var(--color-blue-50);
+    --color-bg-toggle-off-focus: var(--color-white);
+    --color-bg-toggle-on-disabled: var(--color-grey-40);
+    --color-bg-toggle-off-disabled: var(--color-grey-1);
+    --color-border-toggle-on-rest: var(--color-white);
+    --color-border-toggle-off-rest: var(--color-text-20);
+    --color-border-toggle-on-hover: var(--color-white);
+    --color-border-toggle-off-hover: var(--color-text-20);
+    --color-border-toggle-on-focus: var(--color-white);
+    --color-border-toggle-off-focus: var(--color-text-20);
+    --color-border-toggle-on-disabled: var(--color-grey-40);
+    --color-border-toggle-off-disabled: var(--color-text-30);
+    --color-circle-toggle-on-rest: var(--color-white);
+    --color-circle-toggle-off-rest: var(--color-grey-12);
+    --color-circle-toggle-on-hover: var(--color-white); //Size circle reduce to half
+    --color-circle-toggle-off-hover: var(--color-blue-30);
+    --color-circle-toggle-on-focus: var(--color-white);
+    --color-circle-toggle-off-focus: var(--color-grey-12);
+    --color-circle-toggle-on-disabled: var(--color-text-30);
+    --color-circle-toggle-off-disabled: var(--color-text-30);
 
     // Checkbox
-    color-bg-checkbox-focused: $color-white,
-    color-bg-checkbox-selected-hover: $color-blue-300,
-    color-bg-checkbox-pressed-selected: $color-blue-100,
-    color-bg-checkbox-disabled: $color-white,
-    color-border-checkbox-hover: $color-grey-1200,
-    color-border-checkbox-focused: $color-grey-1200,
-    color-border-checkbox-selected-hover: $color-blue-300,
-    color-border-checkbox-pressed-selected: $color-blue-100,
-    color-border-checkbox-disabled-selected: $color-grey-300,
-    color-border-checkbox-disabled: $color-grey-300,
-
-    // Calendar
-    color-bg-calendar-btn-current: $color-blue-100,
-    color-bg-calendar-btn-hover: $color-grey-200,
-    color-bg-calendar-btn-focus: $color-transparent,
-    color-border-calendar-btn-focus: $color-grey-600,
+    --color-bg-checkbox-focused: var(--color-color-white);
+    --color-bg-checkbox-selected-hover: var(--color-blue-30);
+    --color-bg-checkbox-pressed: var(--color-blue-10);
+    --color-bg-checkbox-disabled: var(--color-white);
+    --color-border-checkbox-hover: var(--color-grey-12);
+    --color-border-checkbox-focused: var(--color-grey-12);
+    --color-border-checkbox-selected-hover: var(--color-blue-30);
+    --color-border-checkbox-pressed-selected: var(--color-blue-10);
+    --color-border-checkbox-disabled-selected: var(--color-grey-40);
+    --color-border-checkbox-disabled: var(--color-grey-40);
 
     // General Borders
-    color-border-rest: $color-grey-300,
-    color-border-hover: $color-blue-100,
-    color-border-focus: $color-black,
-    color-border-selected: $color-blue-100,
-    color-border-disabled: $color-grey-500,
-    color-border-error: $color-error-local-200,
-    color-border-controls: $color-blue-100,
+    --color-border-rest: var(--color-grey-40);
+    --color-border-hover: var(--color-blue-10);
+    --color-border-focus: var(--color-black);
+    --color-border-selected: var(--color-blue-10);
+    --color-border-disabled: var(--color-text-30);
+    --color-border-error: var(--color-status-30);
+    --color-border-controls: var(--color-blue-10);
+    --color-outline: var(--color-black);
 
     // General Texts
-    color-text-rest: $color-black,
-    color-text-chevron: $color-grey-600,
-    color-text-error: $color-error-local-200,
-    color-text-required: $color-error-local-200,
-    color-text-visited: $color-blue-400,
-    color-text-nodata:	$color-grey-400,
-    color-text-disabled: $color-grey-500,
-    color-text-white: $color-white,
-    color-text-black: $color-black,
+    --color-text-rest: var(--color-black);
+    --color-text-chevron: var(--color-text-20);
+    --color-text-error: var(--color-status-30);
+    --color-text-required: var(--color-status-30);
+    --color-text-nodata: var(--color-grey-4);
+    --color-text-disabled: var(--color-text-30);
+    --color-text-masthead: var(--color-white);
+    --color-text-navbar: var(--color-white);
 
     // Buttons
-    color-bg-btn-standard-rest: $color-grey-200,
-    color-bg-btn-standard-hover: $color-grey-300,
-    color-bg-btn-standard-focus: $color-grey-300,
-    color-bg-btn-standard-pressed-selected: $color-grey-400,
-    color-bg-btn-standard-disabled: $color-grey-200,
+    --color-bg-btn-standard-rest: var(--color-grey-30);
+    --color-bg-btn-standard-hover: var(--color-grey-40);
+    --color-bg-btn-standard-focus: var(--color-grey-40);
+    --color-bg-btn-standard-selected: var(--color-grey-4);
+    --color-bg-btn-standard-disabled: var(--color-text-30);
 
-    color-bg-btn-primary-rest: $color-blue-100,
-    color-bg-btn-primary-hover: $color-blue-200,
-    color-bg-btn-primary-focus: $color-blue-200,
-    color-bg-btn-primary-pressed-selected: $color-blue-300,
-    color-bg-btn-primary-disabled: $color-grey-200,
-    color-outline-btn-primary-focus: $color-white,
+    --color-bg-btn-primary-rest: var(--color-blue-10);
+    --color-bg-btn-primary-hover: var(--color-blue-20);
+    --color-bg-btn-primary-focus: var(--color-blue-20);
+    --color-bg-btn-primary-selected: var(--color-blue-30);
+    --color-bg-btn-primary-disabled: var(--color-grey-30);
+    --color-outline-btn-primary-focus: var(--color-white);
 
-    color-bg-btn-danger-rest: $color-red-400,
-    color-bg-btn-danger-hover: $color-red-500,
-    color-bg-btn-danger-focus: $color-red-500,
-    color-bg-btn-danger-pressed-selected: $color-red-600,
-    color-bg-btn-danger-disabled: $color-grey-200,
-    color-outline-btn-danger-focus: $color-white,
-
-    // Layout Buttons
-    color-bg-btn-layout-rest: $color-white,
-    color-bg-btn-layout-hover: $color-grey-600,
-    color-bg-btn-layout-focus: $color-grey-100,
-    color-bg-btn-layout-pressed-selected: $color-grey-300,
-    color-bg-btn-layout-disabled: $color-grey-200,
-    color-bg-btn-layout-header-pressed-selected: $color-grey-1200,
-    color-bg-btn-layout-sidenavbar-pressed-selected: $color-grey-1200,
-    color-border-btn-layout-rest: $color-blue-100,
-    color-border-btn-layout-hover: $color-grey-600,
-    color-border-btn-layout-focus: $color-grey-600,
-
-    color-border-btn-layout-pressed-selected: $color-grey-300,
-    color-border-btn-layout-disabled: $color-grey-200,
-    color-border-btn-layout-header-pressed-selected: $color-grey-1200,
-    color-border-btn-layout-sidenavbar-pressed-selected: $color-grey-1200,
+    --color-bg-btn-negative-rest: var(--color-red-4);
+    --color-bg-btn-negative-hover: var(--color-red-5);
+    --color-bg-btn-negative-focus: var(--color-red-5);
+    --color-bg-btn-negative-disabled: var(--color-grey-30);
+    --color-outline-btn-negative-focus: var(--color-white);
 
     // Hyperlinks
-    color-text-hyperlink-rest: $color-blue-200,
-    color-text-hyperlink-hover: $color-blue-400,
-    color-text-hyperlink-focus: $color-blue-200,
-    color-text-hyperlink-disabled: $color-grey-500,
-    color-border-hyperlink-focus: $color-grey-600,
+    --color-hyperlink-rest: var(--color-blue-20);
+    --color-hyperlink-hover: var(--color-blue-40);
+    --color-hyperlink-focus: var(--color-blue-20);
+    --color-hyperlink-disabled: var(--color-text-30);
 
     // Loading
-    color-bg-loader-panel: $color-grey-200,
-    color-bg-loader-spinner: $color-grey-700,
-    color-border-loader-global-segment: $color-blue-100,
-    color-border-loader-global-track: $color-grey-300,
+    --color-bg-loader-panel: var(--color-grey-30);
+    --color-bg-loader-spinner: var(--color-grey-60);
+    --color-border-loader-global-segment: var(--color-blue-10);
+    --color-border-loader-global-track: var(--color-grey-40);
 
     // Upload
-    color-bg-upload: $color-grey-400,
-    color-border-upload: $color-grey-300,
+    --color-bg-upload: var(--color-grey-4);
+    --color-border-upload: var(--color-grey-40);
 
     // Tabs
-    color-text-pivot-tab-device-rest: $color-grey-1200,
-    color-text-pivot-tab-device-hover:	$color-grey-1200,
-    color-text-pivot-tab-device-focus: $color-grey-1200,
-    color-text-pivot-tab-device-press:	$color-black,
-    color-text-pivot-tab-device-selected: $color-grey-1200,
-    color-border-pivot-tab: $color-blue-100,
+    --color-pivot-rest: var(--color-grey-12);
+    --color-pivot-hover: var(--color-grey-12);
+    --color-pivot-focus: var(--color-grey-12);
+    --color-pivot-press: var(--color-black);
+    --color-pivot-selected: var(--color-grey-12);
+    --color-border-pivot: var(--color-blue-10);
 
     // Charts
-    color-chart-X-Y-lines:	$color-grey-400,
-    color-chart-gap-stroke: $color-grey-500,
+    --color-chart-xy-lines: var(--color-grey-4);
+    --color-chart-gap-stroke: var(--color-text-30);
 
     // Alerts
-    color-bg-alert-error: $color-error-global-100,
-    color-bg-alert-info: $color-information-100,
-    color-bg-alert-warning: $color-warning-100,
-    color-bg-alert-error-close-hover: $color-red-1100,
-    color-bg-alert-info-close-hover: $color-grey-500,
-    color-bg-alert-warning-close-hover: $color-yellow-600,
+    --color-bg-alert-error: var(--color-err-1);
+    --color-bg-alert-info: var(--color-info-1);
+    --color-bg-alert-warning: var(--color-warn-1);
 
     // Color picker
-    color-picker-border-inner: $color-white,
-    color-picker-border-outer: $color-error-global-100,
-
-    // Data colors
-    data-color-1: $color-green-100,
-    data-color-2: $color-green-700,
-    data-color-3: $color-green-800,
-    data-color-4: $color-green-900,
-    data-color-5: $color-green-1000,
-    data-color-6: $color-green-1100,
-    data-color-7: $color-lightgrey-700,
-    data-color-8: $color-lightgrey-800,
-    data-color-9: $color-lightgrey-900,
-    data-color-10: $color-lightgrey-1000,
-    data-color-11: $color-lightgrey-1100,
-    data-color-12: $color-lightgrey-1200,
-    data-color-13: $color-red-100,
-    data-color-14: $color-red-700,
-    data-color-15: $color-red-800,
-    data-color-16: $color-red-900,
-    data-color-17: $color-red-1000,
-    data-color-18: $color-red-1100,
-    data-color-19: $color-yellow-100,
-    data-color-20: $color-yellow-700,
-    data-color-21: $color-yellow-800,
-    data-color-22: $color-yellow-900,
-    data-color-23: $color-yellow-1000,
-    data-color-24: $color-yellow-1100,
-    data-color-25: $color-lightblue-100,
-    data-color-26: $color-lightblue-700,
-    data-color-27: $color-lightblue-800,
-    data-color-28: $color-lightblue-900,
-    data-color-29: $color-lightblue-1000,
-    data-color-30: $color-lightblue-1100,
-    data-color-31: $color-orange-100,
-    data-color-32: $color-orange-700,
-    data-color-33: $color-orange-800,
-    data-color-34: $color-orange-900,
-    data-color-35: $color-orange-1000,
-    data-color-36: $color-orange-1100,
-    data-color-37: $color-purple-100,
-    data-color-38: $color-purple-700,
-    data-color-39: $color-purple-800,
-    data-color-40: $color-purple-900,
-    data-color-41: $color-purple-1000,
-    data-color-42: $color-purple-1100,
-
-), $theme-light);
\ No newline at end of file
+    --color-border-colorpicker-in: var(--color-white);
+    --color-border-colorpicker-out: var(--color-err-1);
+}
\ No newline at end of file
diff --git a/src/light/_color.deprecated.scss b/src/light/_color.deprecated.scss
new file mode 100644
index 0000000..e24871d
--- /dev/null
+++ b/src/light/_color.deprecated.scss
@@ -0,0 +1,298 @@
+/**
+ * Default Light Theme Colors
+ */
+
+@import "../color.palette.deprecated";
+
+
+// Theme map
+
+$theme-light: () !default;
+$theme-light: map-merge((
+
+    // Layouts
+    color-bg-navbar: $color-grey-900,
+    color-bg-navbar-hover: $color-grey-550,
+    color-bg-navbar-selected: $color-grey-1100,
+    color-bg-navbar-hover-selected: $color-black, //rename
+    color-bg-header: $color-grey-100,
+    color-bg-header-hover: $color-grey-600,
+    color-bg-masthead: $color-grey-1300,
+    color-bg-masthead-hover: $color-grey-600,
+    color-border-masthead-item: $color-grey-500, //deprecated
+    color-border-navbar-separator: $color-grey-300, //deprecated
+    color-border-masthead-focus: $color-white,
+    color-border-navbar-focus: $color-white,
+
+    // Surfaces
+    color-bg-panel-primary: $color-grey-100, //rename
+    color-bg-panel-secondary: $color-grey-100, //deprecated
+    color-bg-content: $color-grey-100, //rename
+    color-bg-panel-contextual: $color-white, //rename
+    color-border-panel-contextual-separator: $color-grey-300, //rename
+    shadow-panel-contextual: 0 25.6px 57.6px 0 rgba(0, 0, 0, .12), //rename
+    color-bg-action-bar: $color-grey-100, //rename
+    color-bg-title-bar: $color-grey-300, //rename
+    color-border-panel: $color-grey-300,
+    color-border-grid: $color-grey-300,
+
+    // Controls
+    color-bg-blastshield: $color-black-transparent-primary,
+    color-bg-balloon: $color-white,
+    color-bg-form: $color-white,
+    color-bg-table: $color-white,
+    color-bg-searchbar: $color-white, //rename
+    color-bg-searchbar-rest: $color-grey-400,
+    color-bg-searchbar-focus: $color-white,
+    color-bg-guidance: $color-blue-300, //deprecated
+    color-bg-thumbnail: $color-grey-600, //deprecated
+    color-text-thumbnail: $color-grey-100, //deprecated
+
+    // Interactions
+    color-bg-item-hover: $color-grey-200,
+    color-bg-item-selected: $color-grey-300,
+
+    // All Tiles
+    color-border-tile: $color-grey-300,
+    color-border-tile-hover: $color-blue-100,
+
+    // Gallery Tiles
+    color-bg-gallery-tile: $color-white, //rename
+    color-bg-gallery-tile-banner: $color-black, //deprecated
+    color-bg-gallery-tile-default: $color-grey-200, //deprecated
+    color-bg-gallery-tile-blue: $color-blue-100, //deprecated
+    color-bg-gallery-tile-red: $color-red-500, //deprecated
+    color-bg-gallery-tile-yellow: $color-yellow-500, //deprecated
+
+    // Dashboard Tiles
+    color-bg-dashboard-tile: $color-grey-100, //rename
+    color-fill-tile-symbol: $color-grey-1200, //rename
+    color-stroke-tile-symbol: $color-grey-1200, //rename
+
+    // Input Fields
+    color-bg-input-rest: $color-white,
+    color-bg-input-hover: $color-white,
+    color-bg-input-selected: $color-white,
+    color-bg-input-disabled: $color-grey-200,
+
+    color-border-input-rest: $color-grey-300, //deprecated
+    color-border-input-hover: $color-grey-600,
+    color-border-input-selected: $color-blue-100,
+    color-border-input-error: $color-error-local-200,
+
+    color-text-clear: $color-black, //rename
+    color-text-placeholder: $color-grey-400,
+
+    // Dropdowns
+    color-dropdown-rest: $color-white,
+    color-dropdown-hover: $color-grey-100,
+    color-dropdown-focus: $color-grey-100,
+    color-dropdown-pressed: $color-grey-200,
+    color-dropdown-disabled: $color-white,
+    color-border-dropdown-rest: $color-blue-100,
+    color-border-dropdown-focus: $color-grey-600,
+    color-dropdown-disabled-text: $color-grey-400,
+
+    // Radio button
+    color-bg-radio-btn-rest: $color-white, //rename
+    color-bg-radio-btn-hover: $color-white, //rename
+    color-bg-radio-btn-selected: $color-white, //rename
+    color-bg-radio-btn-focused: $color-white, //rename
+    color-bg-radio-btn-disabled: $color-white, //rename
+    color-border-radio-btn-rest: $color-grey-1200, //rename
+    color-border-radio-btn-hover: $color-grey-1200, //rename
+    color-border-radio-btn-selected: $color-blue-100, //rename
+    color-border-radio-btn-focused: $color-grey-1200, //rename
+    color-border-radio-btn-disabled: $color-grey-300, //rename
+    color-center-radio-btn-hover: $color-grey-400, //rename
+    color-center-radio-btn-selected: $color-grey-1200, //rename
+    color-center-radio-btn-disabled: $color-grey-300, //rename
+
+    // Toggle
+    color-bg-toggle-btn-rest-on: $color-blue-500, //rename
+    color-bg-toggle-btn-rest-off: $color-white, //rename
+    color-bg-toggle-btn-hover-on: $color-blue-300, //rename
+    color-bg-toggle-btn-hover-off: $color-white, //rename
+    color-bg-toggle-btn-focus-on: $color-blue-500, //rename
+    color-bg-toggle-btn-focus-off: $color-white, //rename
+    color-bg-toggle-btn-disabled-on: $color-grey-300, //rename
+    color-bg-toggle-btn-disabled-off: $color-grey-100, //rename
+    color-border-toggle-btn-rest-on: $color-white, //rename
+    color-border-toggle-btn-rest-off: $color-grey-600, //rename
+    color-border-toggle-btn-hover-on: $color-white, //rename
+    color-border-toggle-btn-hover-off: $color-grey-600, //rename
+    color-border-toggle-btn-focus-on: $color-white, //rename
+    color-border-toggle-btn-focus-off: $color-grey-600, //rename
+    color-border-toggle-btn-disabled-on: $color-grey-300, //rename
+    color-border-toggle-btn-disabled-off: $color-grey-500, //rename
+    color-circle-toggle-btn-rest-on: $color-white, //rename
+    color-circle-toggle-btn-rest-off: $color-grey-1200, //rename
+    color-circle-toggle-btn-hover-on: $color-white, //rename
+    color-circle-toggle-btn-hover-off: $color-blue-300, //rename
+    color-circle-toggle-btn-focus-on: $color-white, //rename
+    color-circle-toggle-btn-focus-off: $color-grey-1200, //rename
+    color-circle-toggle-btn-disabled-on: $color-grey-500, //rename
+    color-circle-toggle-btn-disabled-off: $color-grey-500, //rename
+
+    // Checkbox
+    color-bg-checkbox-focused: $color-white,
+    color-bg-checkbox-selected-hover: $color-blue-300,
+    color-bg-checkbox-pressed-selected: $color-blue-100,
+    color-bg-checkbox-disabled: $color-white,
+    color-border-checkbox-hover: $color-grey-1200,
+    color-border-checkbox-focused: $color-grey-1200,
+    color-border-checkbox-selected-hover: $color-blue-300,
+    color-border-checkbox-pressed-selected: $color-blue-100,
+    color-border-checkbox-disabled-selected: $color-grey-300,
+    color-border-checkbox-disabled: $color-grey-300,
+
+    // Calendar
+    color-bg-calendar-btn-current: $color-blue-100, //deprecated
+    color-bg-calendar-btn-hover: $color-grey-200, //deprecated
+    color-bg-calendar-btn-focus: $color-transparent, //deprecated
+    color-border-calendar-btn-focus: $color-grey-600, //deprecated
+
+    // General Borders
+    color-border-rest: $color-grey-300,
+    color-border-hover: $color-blue-100,
+    color-border-focus: $color-black,
+    color-border-selected: $color-blue-100,
+    color-border-disabled: $color-grey-500,
+    color-border-error: $color-error-local-200,
+    color-border-controls: $color-blue-100,
+
+    // General Texts
+    color-text-rest: $color-black,
+    color-text-chevron: $color-grey-600,
+    color-text-error: $color-error-local-200,
+    color-text-required: $color-error-local-200,
+    color-text-visited: $color-blue-400, //deprecated
+    color-text-nodata:	$color-grey-400,
+    color-text-disabled: $color-grey-500,
+    color-text-white: $color-white, //deprecated
+    color-text-black: $color-black, //deprecated
+
+    // Buttons
+    color-bg-btn-standard-rest: $color-grey-200,
+    color-bg-btn-standard-hover: $color-grey-300,
+    color-bg-btn-standard-focus: $color-grey-300,
+    color-bg-btn-standard-pressed-selected: $color-grey-400,
+    color-bg-btn-standard-disabled: $color-grey-200,
+
+    color-bg-btn-primary-rest: $color-blue-100,
+    color-bg-btn-primary-hover: $color-blue-200,
+    color-bg-btn-primary-focus: $color-blue-200,
+    color-bg-btn-primary-pressed-selected: $color-blue-300,
+    color-bg-btn-primary-disabled: $color-grey-200,
+    color-outline-btn-primary-focus: $color-white,
+
+    color-bg-btn-danger-rest: $color-red-400, //rename
+    color-bg-btn-danger-hover: $color-red-500, //rename
+    color-bg-btn-danger-focus: $color-red-500, //rename
+    color-bg-btn-danger-pressed-selected: $color-red-600, //deprecated
+    color-bg-btn-danger-disabled: $color-grey-200, //rename
+    color-outline-btn-danger-focus: $color-white, //rename
+
+    // Layout Buttons
+    color-bg-btn-layout-rest: $color-white, //deprecated
+    color-bg-btn-layout-hover: $color-grey-600, //deprecated
+    color-bg-btn-layout-focus: $color-grey-100, //deprecated
+    color-bg-btn-layout-pressed-selected: $color-grey-300, //deprecated
+    color-bg-btn-layout-disabled: $color-grey-200, //deprecated
+    color-bg-btn-layout-header-pressed-selected: $color-grey-1200, //deprecated
+    color-bg-btn-layout-sidenavbar-pressed-selected: $color-grey-1200, //deprecated
+    color-border-btn-layout-rest: $color-blue-100, //deprecated
+    color-border-btn-layout-hover: $color-grey-600, //deprecated
+    color-border-btn-layout-focus: $color-grey-600, //deprecated
+
+    color-border-btn-layout-pressed-selected: $color-grey-300, //deprecated
+    color-border-btn-layout-disabled: $color-grey-200, //deprecated
+    color-border-btn-layout-header-pressed-selected: $color-grey-1200, //deprecated
+    color-border-btn-layout-sidenavbar-pressed-selected: $color-grey-1200, //deprecated
+
+    // Hyperlinks
+    color-text-hyperlink-rest: $color-blue-200,
+    color-text-hyperlink-hover: $color-blue-400,
+    color-text-hyperlink-focus: $color-blue-200,
+    color-text-hyperlink-disabled: $color-grey-500,
+    color-border-hyperlink-focus: $color-grey-600, //deprecated
+
+    // Loading
+    color-bg-loader-panel: $color-grey-200,
+    color-bg-loader-spinner: $color-grey-700,
+    color-border-loader-global-segment: $color-blue-100,
+    color-border-loader-global-track: $color-grey-300,
+
+    // Upload
+    color-bg-upload: $color-grey-400,
+    color-border-upload: $color-grey-300,
+
+    // Tabs
+    color-text-pivot-tab-device-rest: $color-grey-1200, //rename
+    color-text-pivot-tab-device-hover:	$color-grey-1200, //rename
+    color-text-pivot-tab-device-focus: $color-grey-1200, //rename
+    color-text-pivot-tab-device-press:	$color-black, //rename
+    color-text-pivot-tab-device-selected: $color-grey-1200, //rename
+    color-border-pivot-tab: $color-blue-100, //rename
+
+    // Charts
+    color-chart-X-Y-lines:	$color-grey-400, //rename
+    color-chart-gap-stroke: $color-grey-500,
+
+    // Alerts
+    color-bg-alert-error: $color-error-global-100,
+    color-bg-alert-info: $color-information-100,
+    color-bg-alert-warning: $color-warning-100,
+    color-bg-alert-error-close-hover: $color-red-1100, //deprecated
+    color-bg-alert-info-close-hover: $color-grey-500, //deprecated
+    color-bg-alert-warning-close-hover: $color-yellow-600, //deprecated
+
+    // Color picker
+    color-picker-border-inner: $color-white, //rename
+    color-picker-border-outer: $color-error-global-100, //rename
+
+    // Data colors
+    data-color-1: $color-green-100,
+    data-color-2: $color-green-700,
+    data-color-3: $color-green-800,
+    data-color-4: $color-green-900,
+    data-color-5: $color-green-1000,
+    data-color-6: $color-green-1100,
+    data-color-7: $color-lightgrey-700,
+    data-color-8: $color-lightgrey-800,
+    data-color-9: $color-lightgrey-900,
+    data-color-10: $color-lightgrey-1000,
+    data-color-11: $color-lightgrey-1100,
+    data-color-12: $color-lightgrey-1200,
+    data-color-13: $color-red-100,
+    data-color-14: $color-red-700,
+    data-color-15: $color-red-800,
+    data-color-16: $color-red-900,
+    data-color-17: $color-red-1000,
+    data-color-18: $color-red-1100,
+    data-color-19: $color-yellow-100,
+    data-color-20: $color-yellow-700,
+    data-color-21: $color-yellow-800,
+    data-color-22: $color-yellow-900,
+    data-color-23: $color-yellow-1000,
+    data-color-24: $color-yellow-1100,
+    data-color-25: $color-lightblue-100,
+    data-color-26: $color-lightblue-700,
+    data-color-27: $color-lightblue-800,
+    data-color-28: $color-lightblue-900,
+    data-color-29: $color-lightblue-1000,
+    data-color-30: $color-lightblue-1100,
+    data-color-31: $color-orange-100,
+    data-color-32: $color-orange-700,
+    data-color-33: $color-orange-800,
+    data-color-34: $color-orange-900,
+    data-color-35: $color-orange-1000,
+    data-color-36: $color-orange-1100,
+    data-color-37: $color-purple-100,
+    data-color-38: $color-purple-700,
+    data-color-39: $color-purple-800,
+    data-color-40: $color-purple-900,
+    data-color-41: $color-purple-1000,
+    data-color-42: $color-purple-1100,
+
+), $theme-light);
\ No newline at end of file
diff --git a/src/light/_color.fluent.scss b/src/light/_color.fluent.scss
new file mode 100644
index 0000000..f1e0803
--- /dev/null
+++ b/src/light/_color.fluent.scss
@@ -0,0 +1,208 @@
+/**
+ * Default Light Theme Colors
+ */
+
+:root[theme='fluent-light'] {
+    // Shell
+    --color-bg-navbar: var(--color-grey-20);
+    --color-bg-navbar-hover: var(--color-grey-30);
+    --color-bg-navbar-selected: var(--color-white);
+    --color-bg-navbar-selected-hover: var(--color-grey-30);
+    --color-bg-header: var(--color-white);
+    --color-bg-header-hover: var(--color-grey-20);
+    --color-bg-masthead: var(--color-grey-50);
+    --color-bg-masthead-hover: var(--color-text-20);
+    --color-outline-masthead: var(--color-white);
+    --color-border-masthead-focus: var(--color-white);
+    --color-border-navbar-focus: var(--color-black);
+
+    // Surfaces
+    --color-bg-panel: var(--color-grey-10);
+    --color-bg-container: var(--color-white);
+    --color-bg-container-panel: var(--color-white);
+    --color-border-container-panel: var(--color-grey-40);
+    --shadow-container-panel: 0 25.6px 57.6px 0 rgba(0, 0, 0, .12);
+    --color-bg-cmdbar: var(--color-white);
+    --color-bg-titlebar: var(--color-grey-40);
+    --color-border-panel: var(--color-grey-40);
+    --color-border-grid: var(--color-grey-40);
+
+    // Controls
+    --color-bg-blastshield: var(--color-black-transparent-primary);
+    --color-bg-balloon: var(--color-white);
+    --color-bg-form: var(--color-white);
+    --color-bg-table: var(--color-white);
+    --color-bg-searchbar-active: var(--color-white);
+    --color-bg-searchbar-rest: var(--color-white-transparent-third);
+    --color-bg-searchbar-focus: var(--color-white);
+
+    // Interactions
+    --color-bg-hover: var(--color-grey-20);
+    --color-bg-selected: var(--color-grey-30);
+
+    // All Tiles
+    --color-border-tile: var(--color-grey-30); // 0.5px border
+    --color-border-tile-hover: var(--color-blue-10);
+
+    // Gallery Tiles
+    --color-bg-gallery-tile-top: var(--color-white);
+    --color-bg-gallery-tile-bottom: var(--color-blue-10);
+
+    // Dashboard Tiles
+    --color-bg-dashboard: var(--color-grey-10);
+    --color-tile-symbol: var(--color-text-10);
+    --color-stroke-tile-symbol: var(--color-text-10);
+
+    // Input Fields
+    --color-bg-input-rest: var(--color-white);
+    --color-bg-input-hover: var(--color-white);
+    --color-bg-input-selected: var(--color-white);
+    --color-bg-input-disabled: var(--color-grey-30);
+
+    --color-border-input-hover: var(--color-text-20);
+    --color-border-input-selected: var(--color-blue-10);
+    --color-border-input-error: var(--color-status-30);
+
+    --color-text-regular: var(--color-text-10);
+    --color-text-placeholder: var(--color-text-20);
+
+    // Dropdowns
+    --color-dropdown-rest: var(--color-white);
+    --color-dropdown-hover: var(--color-grey-30);
+    --color-dropdown-focus: var(--color-grey-30);
+    --color-dropdown-pressed: var(--color-grey-40);
+    --color-dropdown-disabled: var(--color-grey-30);
+    --color-border-dropdown-rest: var(--color-blue-10);
+    --color-border-dropdown-focus: var(--color-text-20);
+    --color-text-dropdown-disabled: var(--color-text-30);
+
+    // Radio button
+    --color-bg-radio-rest: var(--color-white);
+    --color-bg-radio-hover: var(--color-white);
+    --color-bg-radio-selected: var(--color-white);
+    --color-bg-radio-focused: var(--color-white);
+    --color-bg-radio-disabled: var(--color-white);
+    --color-border-radio-rest: var(--color-text-10);
+    --color-border-radio-hover: var(--color-text-10);
+    --color-border-radio-selected: var(--color-blue-10);
+    --color-border-radio-focused: var(--color-text-10);
+    --color-border-radio-disabled: var(--color-text-30);
+    --color-center-radio-hover: var(--color-blue-10); //On hover center will reduce to 2px circle
+    --color-center-radio-selected: var(--color-blue-20); //On selected center will return to normal size
+    --color-center-radio-disabled: var(--color-text-30);
+
+    // Toggle
+    --color-bg-toggle-on-rest: var(--color-blue-10);
+    --color-bg-toggle-off-rest: var(--color-white);
+    --color-bg-toggle-on-hover: var(--color-blue-30);
+    --color-bg-toggle-off-hover: var(--color-white);
+    --color-bg-toggle-on-focus: var(--color-blue-10);
+    --color-bg-toggle-off-focus: var(--color-white);
+    --color-bg-toggle-on-disabled: var(--color-text-30);
+    --color-bg-toggle-off-disabled: var(--color-grey-30);
+    --color-border-toggle-on-rest: var(--color-white);
+    --color-border-toggle-off-rest: var(--color-text-20);
+    --color-border-toggle-on-hover: var(--color-text-20);
+    --color-border-toggle-off-hover: var(--color-text-20);
+    --color-border-toggle-on-focus: var(--color-white);
+    --color-border-toggle-off-focus: var(--color-text-20);
+    --color-border-toggle-on-disabled: var(--color-text-30);
+    --color-border-toggle-off-disabled: var(--color-text-20);
+    --color-circle-toggle-on-rest: var(--color-white);
+    --color-circle-toggle-off-rest: var(--color-black);
+    --color-circle-toggle-on-hover: var(--color-white); //Size circle reduce to have
+    --color-circle-toggle-off-hover: var(--color-blue-30);
+    --color-circle-toggle-on-focus: var(--color-white);
+    --color-circle-toggle-off-focus: var(--color-black);
+    --color-circle-toggle-on-disabled: var(--color-text-20);
+    --color-circle-toggle-off-disabled: var(--color-text-20);
+
+    // Checkbox
+    --color-bg-checkbox-focused: var(--color-color-white);
+    --color-bg-checkbox-selected-hover: var(--color-blue-30);
+    --color-bg-checkbox-pressed: var(--color-blue-10);
+    --color-bg-checkbox-disabled: var(--color-grey-20);
+    --color-border-checkbox-hover: var(--color-text-10);
+    --color-border-checkbox-focused: var(--color-text-10);
+    --color-border-checkbox-selected-hover: var(--color-blue-30);
+    --color-border-checkbox-pressed-selected: var(--color-blue-10);
+    --color-border-checkbox-disabled-selected: var(--color-text-30);
+    --color-border-checkbox-disabled: var(--color-text-30);
+
+    // General Borders
+    --color-border-rest: var(--color-grey-40);
+    --color-border-hover: var(--color-blue-10); //duplicate?
+    --color-border-focus: var(--color-black);
+    --color-border-selected: var(--color-blue-10);
+    --color-border-disabled: var(--color-text-30);
+    --color-border-error: var(--color-status-30);
+    --color-border-controls: var(--color-blue-10);
+    --color-outline: var(--color-blue-10);
+
+    // General Texts
+    --color-text-rest: var(--color-text-10);
+    --color-text-chevron: var(--color-text-20);
+    --color-text-error: var(--color-status-30);
+    --color-text-required: var(--color-text-20);
+    --color-text-nodata: var(--color-text-20);
+    --color-text-disabled: var(--color-text-30);
+    --color-text-masthead: var(--color-white);
+    --color-text-navbar: var(--color-text-rest);
+
+    // Buttons
+    --color-bg-btn-standard-rest: var(--color-grey-20);
+    --color-bg-btn-standard-hover: var(--color-grey-30);
+    --color-bg-btn-standard-focus: var(--color-grey-20);
+    --color-bg-btn-standard-selected: var(--color-grey-40);
+    --color-bg-btn-standard-disabled: var(--color-text-30);
+
+    --color-bg-btn-primary-rest: var(--color-blue-10);
+    --color-bg-btn-primary-hover: var(--color-blue-20);
+    --color-bg-btn-primary-focus: var(--color-blue-10);
+    --color-bg-btn-primary-selected: var(--color-blue-30);
+    --color-bg-btn-primary-disabled: var(--color-text-20);
+    --color-outline-btn-primary-focus: var(--color-white);
+
+    --color-bg-btn-negative-rest: var(--color-status-30);
+    --color-bg-btn-negative-hover: var(--color-status-30);
+    --color-bg-btn-negative-focus: var(--color-status-30);
+    --color-bg-btn-negative-disabled: var(--color-text-30);
+    --color-outline-btn-negative-focus: var(--color-white);
+
+    // Hyperlinks
+    --color-hyperlink-rest: var(--color-blue-20);
+    --color-hyperlink-hover: var(--color-blue-30);
+    --color-hyperlink-focus: var(--color-blue-20);
+    --color-hyperlink-disabled: var(--color-text-30);
+
+    // Loading
+    --color-bg-loader-panel: var(--color-grey-20);
+    --color-bg-loader-spinner: var(--color-blue-10);
+    --color-border-loader-global-segment: var(--color-blue-10);
+    --color-border-loader-global-track: var(--color-grey-40);
+
+    // Upload
+    --color-bg-upload: var(--color-grey-20);
+    --color-border-upload: var(--color-grey-30);
+
+    // Tabs
+    --color-pivot-rest: var(--color-text-20);
+    --color-pivot-hover: var(--color-text-10);
+    --color-pivot-focus: var(--color-text-10);
+    --color-pivot-press: var(--color-black);
+    --color-pivot-selected: var(--color-text-10);
+    --color-border-pivot: var(--color-blue-10);
+
+    // Charts
+    --color-chart-xy-lines: var(--color-grey-40);
+    --color-chart-gap-stroke: var(--color-text-30);
+
+    // Alerts
+    --color-bg-alert-error: var(--color-status-30);
+    --color-bg-alert-info: var(--color-status-10);
+    --color-bg-alert-warning: var(--color-status-20);
+
+    // Color picker
+    --color-border-colorpicker-in: var(--color-white);
+    --color-border-colorpicker-out: var(--color-text-20);
+}
\ No newline at end of file