@ptsecurity/mosaic 13.0.0 → 13.2.0

package/_theming.scss

@@ -1,4 +1,6 @@
 // Import all the theming
+@use '../../../node_modules/@angular/cdk/overlay/index' as overlay;
+
 @keyframes mc-progress {
     from {
         background-position: 0 0;
@@ -97,63 +99,71 @@
 
 // Do not edit directly
 
-$light-color-scheme-primary-default: #338FCC;
-$light-color-scheme-second-default: #B3B3B3;
-$light-color-scheme-error-default: #E76E5C;
-$light-color-scheme-info-default: #AAD1EC;
-$light-color-scheme-success-default: #B4DEA4;
-$light-color-scheme-warning-default: #F0D49B;
-$light-color-scheme-foreground-text: #4D4D4D;
-$light-color-scheme-foreground-text-less-contrast: #999999;
-$light-color-scheme-foreground-text-disabled: #B3B3B3;
-$light-color-scheme-foreground-divider: #E6E6E6;
-$light-color-scheme-foreground-border: #B3B3B3;
-$light-color-scheme-foreground-icon: #999999;
+$light-color-scheme-primary-default: #0374eb;
+$light-color-scheme-second-default: #6d7a86;
+$light-color-scheme-error-default: #db3c55;
+$light-color-scheme-info-default: #0374eb;
+$light-color-scheme-success-default: #028b49;
+$light-color-scheme-warning-default: #a26e0c;
+$light-color-scheme-foreground-text: #19252f;
+$light-color-scheme-foreground-text-less-contrast: #6d7a86;
+$light-color-scheme-foreground-text-disabled: #8c99a5;
+$light-color-scheme-foreground-text-error: #db3c55;
+$light-color-scheme-foreground-text-success: #016b37;
+$light-color-scheme-foreground-divider: #d7dee4;
+$light-color-scheme-foreground-border: #bdc7d1;
+$light-color-scheme-foreground-icon: #8c99a5;
 $light-color-scheme-background-background: white;
-$light-color-scheme-background-background-disabled: #F0F0F0;
+$light-color-scheme-background-background-disabled: #f2f5f9;
 $light-color-scheme-background-overlay-hover: rgba(black, 0.05);
 $light-color-scheme-background-overlay-active: rgba(black, 0.1);
 $light-color-scheme-background-overlay-disabled: rgba(white, 0.3);
-$light-color-scheme-states-focused-color: #338FCC;
-$light-color-scheme-states-selected-color: #D8EAF7;
+$light-color-scheme-states-focused-color: #0374eb;
+$light-color-scheme-states-focused-color-error: #db3c55;
+$light-color-scheme-states-selected-color: #e7f1ff;
 $light-color-scheme-states-pressed-shadow: inset 0 1px 2px 0 rgba(black, 0.2);
 $light-color-scheme-states-disabled-opacity: 0.3;
-$dark-color-scheme-primary-default: #57A4D7;
-$dark-color-scheme-second-default: #999999;
-$dark-color-scheme-error-default: #E76E5C;
-$dark-color-scheme-info-default: #57A4D7;
-$dark-color-scheme-success-default: #6FBA53;
-$dark-color-scheme-warning-default: #DFA739;
-$dark-color-scheme-foreground-text: #F0F0F0;
-$dark-color-scheme-foreground-text-less-contrast: #999999;
-$dark-color-scheme-foreground-text-disabled: #999999;
-$dark-color-scheme-foreground-divider: #666666;
-$dark-color-scheme-foreground-border: #808080;
-$dark-color-scheme-foreground-icon: #999999;
-$dark-color-scheme-background-background: #333333;
-$dark-color-scheme-background-background-disabled: #666666;
+$dark-color-scheme-primary-default: #0059b8;
+$dark-color-scheme-second-default: #515e69;
+$dark-color-scheme-error-default: #b9023a;
+$dark-color-scheme-info-default: #0c6579;
+$dark-color-scheme-success-default: #016b37;
+$dark-color-scheme-warning-default: #7e5406;
+$dark-color-scheme-foreground-text: #f2f5f9;
+$dark-color-scheme-foreground-text-less-contrast: #8c99a5;
+$dark-color-scheme-foreground-text-disabled: #6d7a86;
+$dark-color-scheme-foreground-text-error: #ea5868;
+$dark-color-scheme-foreground-text-success: #319d5c;
+$dark-color-scheme-foreground-divider: #333f4a;
+$dark-color-scheme-foreground-border: #515e69;
+$dark-color-scheme-foreground-icon: #8c99a5;
+$dark-color-scheme-background-background: #19252f;
+$dark-color-scheme-background-background-disabled: #333f4a;
 $dark-color-scheme-background-overlay-hover: rgba(black, 0.05);
 $dark-color-scheme-background-overlay-active: rgba(black, 0.1);
-$dark-color-scheme-background-overlay-disabled: rgba(white, 0.2);
-$dark-color-scheme-states-focused-color: #57A4D7;
-$dark-color-scheme-states-selected-color: #114E77;
+$dark-color-scheme-background-overlay-disabled: rgba(black, 0.2);
+$dark-color-scheme-states-focused-color: #4187ff;
+$dark-color-scheme-states-focused-color-error: #b9023a;
+$dark-color-scheme-states-selected-color: #014b9d;
 $dark-color-scheme-states-pressed-shadow: inset 1px 2px 2px 0 rgba(black, 0.2);
 $dark-color-scheme-states-disabled-opacity: 0.3;
-$font-family-base: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$font-family-accent: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$font-family-base: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
 $font-family-monospace: 'Roboto Mono', 'Consolas', 'Menlo', 'Monaco', monospace;
-$palette-blue-40: #F5FAFD;
-$palette-blue-60: #EBF4FB;
-$palette-blue-100: #D8EAF7;
-$palette-blue-200: #AAD1EC;
-$palette-blue-300: #7FBAE1;
-$palette-blue-400: #57A4D7;
-$palette-blue-500: #338FCC;
-$palette-blue-560: #277BB3;
-$palette-blue-600: #206EA2;
-$palette-blue-700: #114E77;
-$palette-blue-800: #07314D;
-$palette-blue-a100: rgba(0, 153, 255, 0.15);
-$palette-blue-a200: rgba(0, 153, 255, 0.3);
+$palette-blue-40: #eff6ff;
+$palette-blue-60: #e7f1ff;
+$palette-blue-100: #c8dfff;
+$palette-blue-200: #a2c7fe;
+$palette-blue-300: #5697ff;
+$palette-blue-400: #4187ff;
+$palette-blue-500: #0374eb;
+$palette-blue-560: #0059b8;
+$palette-blue-600: #014b9d;
+$palette-blue-700: #023c7f;
+$palette-blue-800: #193060;
+$palette-blue-900: #00224f;
+$palette-blue-a100: rgba(3, 116, 235, 0.15);
+$palette-blue-a200: rgba(3, 116, 235, 0.3);
 $palette-blue-contrast-40: #4D4D4D;
 $palette-blue-contrast-60: #4D4D4D;
 $palette-blue-contrast-100: #4D4D4D;
@@ -167,18 +177,19 @@ $palette-blue-contrast-700: white;
 $palette-blue-contrast-800: white;
 $palette-blue-contrast-a100: #4D4D4D;
 $palette-blue-contrast-a200: white;
-$palette-green-40: #F6FBF4;
-$palette-green-60: #EDF8E9;
-$palette-green-100: #DCF1D4;
-$palette-green-200: #B4DEA4;
-$palette-green-300: #8FCC79;
-$palette-green-400: #6FBA53;
-$palette-green-500: #52A832;
-$palette-green-560: #449327;
-$palette-green-600: #3B8520;
-$palette-green-700: #276211;
-$palette-green-800: #163F07;
-$palette-green-a100: rgba(68, 255, 0, 0.15);
+$palette-green-40: #ecf9ef;
+$palette-green-60: #d2f7db;
+$palette-green-100: #b6ebc3;
+$palette-green-200: #8ed5a1;
+$palette-green-300: #4ba96c;
+$palette-green-400: #319d5c;
+$palette-green-500: #028b49;
+$palette-green-560: #016b37;
+$palette-green-600: #015a2d;
+$palette-green-700: #004823;
+$palette-green-800: #103920;
+$palette-green-900: #002a12;
+$palette-green-a100: rgba(2, 139, 73, 0.15);
 $palette-green-contrast-40: #4D4D4D;
 $palette-green-contrast-60: #4D4D4D;
 $palette-green-contrast-100: #4D4D4D;
@@ -191,18 +202,19 @@ $palette-green-contrast-600: white;
 $palette-green-contrast-700: white;
 $palette-green-contrast-800: white;
 $palette-green-contrast-a100: #4D4D4D;
-$palette-red-40: #FEF7F6;
-$palette-red-60: #FCEFEC;
-$palette-red-100: #FADEDA;
-$palette-red-200: #F4B7AE;
-$palette-red-300: #ED9284;
-$palette-red-400: #E76E5C;
-$palette-red-500: #E04D36;
-$palette-red-560: #C43E29;
-$palette-red-600: #B23522;
-$palette-red-700: #832112;
-$palette-red-800: #541208;
-$palette-red-a100: rgba(224, 79, 56, 0.15);
+$palette-red-40: #fff3f3;
+$palette-red-60: #ffeaea;
+$palette-red-100: #fbd6d6;
+$palette-red-200: #fcb2b4;
+$palette-red-300: #ee6f79;
+$palette-red-400: #ea5868;
+$palette-red-500: #db3c55;
+$palette-red-560: #b9023a;
+$palette-red-600: #9e0130;
+$palette-red-700: #800025;
+$palette-red-800: #621420;
+$palette-red-900: #500013;
+$palette-red-a100: rgba(219, 60, 85, 0.15);
 $palette-red-contrast-40: #4D4D4D;
 $palette-red-contrast-60: #4D4D4D;
 $palette-red-contrast-100: #4D4D4D;
@@ -215,23 +227,24 @@ $palette-red-contrast-600: white;
 $palette-red-contrast-700: white;
 $palette-red-contrast-800: white;
 $palette-red-contrast-a100: #4D4D4D;
-$palette-grey-40: #F5F5F5;
-$palette-grey-60: #F0F0F0;
-$palette-grey-100: #E6E6E6;
-$palette-grey-200: #CCCCCC;
-$palette-grey-300: #B3B3B3;
-$palette-grey-400: #999999;
-$palette-grey-500: #808080;
-$palette-grey-560: #707070;
-$palette-grey-600: #666666;
-$palette-grey-700: #4D4D4D;
-$palette-grey-800: #333333;
-$palette-grey-a40: rgba(0, 0, 0, 0.04);
-$palette-grey-a60: rgba(0, 0, 0, 0.06);
-$palette-grey-a100: rgba(0, 0, 0, 0.1);
-$palette-grey-a200: rgba(0, 0, 0, 0.2);
-$palette-grey-a300: rgba(0, 0, 0, 0.3);
-$palette-grey-a500: rgba(0, 0, 0, 0.5);
+$palette-grey-40: #f2f5f9;
+$palette-grey-60: #ebeef2;
+$palette-grey-100: #d7dee4;
+$palette-grey-200: #bdc7d1;
+$palette-grey-300: #8c99a5;
+$palette-grey-400: #7f8c98;
+$palette-grey-500: #6d7a86;
+$palette-grey-560: #515e69;
+$palette-grey-600: #434f5a;
+$palette-grey-700: #333f4a;
+$palette-grey-800: #27333e;
+$palette-grey-900: #19252f;
+$palette-grey-a40: rgba(25, 37, 47, 0.04);
+$palette-grey-a60: rgba(25, 37, 47, 0.06);
+$palette-grey-a100: rgba(25, 37, 47, 0.1);
+$palette-grey-a200: rgba(25, 37, 47, 0.2);
+$palette-grey-a300: rgba(25, 37, 47, 0.3);
+$palette-grey-a500: rgba(25, 37, 47, 0.5);
 $palette-grey-contrast-40: #4D4D4D;
 $palette-grey-contrast-60: #4D4D4D;
 $palette-grey-contrast-100: #4D4D4D;
@@ -243,18 +256,19 @@ $palette-grey-contrast-560: white;
 $palette-grey-contrast-600: white;
 $palette-grey-contrast-700: white;
 $palette-grey-contrast-800: white;
-$palette-yellow-40: #FDFAF3;
-$palette-yellow-60: #FCF5E8;
-$palette-yellow-100: #F8EBD1;
-$palette-yellow-200: #F0D49B;
-$palette-yellow-300: #E7BD68;
-$palette-yellow-400: #DFA739;
-$palette-yellow-500: #D6930D;
-$palette-yellow-560: #BB800A;
-$palette-yellow-600: #AA7408;
-$palette-yellow-700: #7D5504;
-$palette-yellow-800: #503602;
-$palette-yellow-a100: rgba(255, 170, 0, 0.15);
+$palette-yellow-40: #fff4dd;
+$palette-yellow-60: #ffecce;
+$palette-yellow-100: #fcdda6;
+$palette-yellow-200: #f5c23c;
+$palette-yellow-300: #e19f12;
+$palette-yellow-400: #c78816;
+$palette-yellow-500: #a26e0c;
+$palette-yellow-560: #7e5406;
+$palette-yellow-600: #6b4804;
+$palette-yellow-700: #543803;
+$palette-yellow-800: #3e3015;
+$palette-yellow-900: #312001;
+$palette-yellow-a100: rgba(255, 159, 18, 0.15);
 $palette-yellow-contrast-40: #4D4D4D;
 $palette-yellow-contrast-60: #4D4D4D;
 $palette-yellow-contrast-100: #4D4D4D;
@@ -267,36 +281,86 @@ $palette-yellow-contrast-600: white;
 $palette-yellow-contrast-700: white;
 $palette-yellow-contrast-800: white;
 $palette-yellow-contrast-a100: #4D4D4D;
-$alert-light-color-scheme-error-background: #FCEFEC;
-$alert-light-color-scheme-error-border: #E76E5C;
-$alert-light-color-scheme-error-icon: #E76E5C;
-$alert-light-color-scheme-warning-background: #FCF5E8;
-$alert-light-color-scheme-warning-border: #F0D49B;
-$alert-light-color-scheme-warning-icon: #DFA739;
-$alert-light-color-scheme-success-background: #EDF8E9;
-$alert-light-color-scheme-success-border: #B4DEA4;
-$alert-light-color-scheme-success-icon: #6FBA53;
-$alert-light-color-scheme-info-background: #EBF4FB;
-$alert-light-color-scheme-info-border: #AAD1EC;
-$alert-light-color-scheme-info-icon: #57A4D7;
-$alert-light-color-scheme-default-background: #F0F0F0;
-$alert-light-color-scheme-default-border: #B3B3B3;
-$alert-light-color-scheme-default-icon: #CCCCCC;
-$alert-dark-color-scheme-error-background: #832112;
-$alert-dark-color-scheme-error-border: #832112;
-$alert-dark-color-scheme-error-icon: #E76E5C;
-$alert-dark-color-scheme-warning-background: #7D5504;
-$alert-dark-color-scheme-warning-border: #7D5504;
-$alert-dark-color-scheme-warning-icon: #DFA739;
-$alert-dark-color-scheme-success-background: #276211;
-$alert-dark-color-scheme-success-border: #276211;
-$alert-dark-color-scheme-success-icon: #6FBA53;
-$alert-dark-color-scheme-info-background: #114E77;
-$alert-dark-color-scheme-info-border: #114E77;
-$alert-dark-color-scheme-info-icon: #57A4D7;
-$alert-dark-color-scheme-default-background: #4D4D4D;
-$alert-dark-color-scheme-default-border: #4D4D4D;
-$alert-dark-color-scheme-default-icon: #999999;
+$palette-teal-40: #ebf8fd;
+$palette-teal-60: #d9f3fd;
+$palette-teal-100: #afe6f9;
+$palette-teal-200: #6ed3f2;
+$palette-teal-300: #18a5c5;
+$palette-teal-400: #2099b7;
+$palette-teal-500: #218ca8;
+$palette-teal-560: #0c6579;
+$palette-teal-600: #0c5567;
+$palette-teal-700: #084453;
+$palette-teal-800: #143641;
+$palette-teal-900: #022731;
+$palette-teal-contrast-40: #4D4D4D;
+$palette-teal-contrast-60: #4D4D4D;
+$palette-teal-contrast-100: #4D4D4D;
+$palette-teal-contrast-200: #4D4D4D;
+$palette-teal-contrast-300: #4D4D4D;
+$palette-teal-contrast-400: white;
+$palette-teal-contrast-500: white;
+$palette-teal-contrast-560: white;
+$palette-teal-contrast-600: white;
+$palette-teal-contrast-700: white;
+$palette-teal-contrast-800: white;
+$palette-teal-contrast-a100: #4D4D4D;
+$palette-teal-contrast-a200: white;
+$palette-purple-40: #fff3fb;
+$palette-purple-60: #ffe9f8;
+$palette-purple-100: #f2d4e8;
+$palette-purple-200: #e4bbd7;
+$palette-purple-300: #c692b5;
+$palette-purple-400: #bb78a7;
+$palette-purple-500: #a65d92;
+$palette-purple-560: #864775;
+$palette-purple-600: #753865;
+$palette-purple-700: #612853;
+$palette-purple-800: #48273f;
+$palette-purple-900: #36172e;
+$palette-purple-contrast-40: #4D4D4D;
+$palette-purple-contrast-60: #4D4D4D;
+$palette-purple-contrast-100: #4D4D4D;
+$palette-purple-contrast-200: #4D4D4D;
+$palette-purple-contrast-300: #4D4D4D;
+$palette-purple-contrast-400: white;
+$palette-purple-contrast-500: white;
+$palette-purple-contrast-560: white;
+$palette-purple-contrast-600: white;
+$palette-purple-contrast-700: white;
+$palette-purple-contrast-800: white;
+$palette-purple-contrast-a100: #4D4D4D;
+$palette-purple-contrast-a200: white;
+$alert-light-color-scheme-error-background: #fff3f3;
+$alert-light-color-scheme-error-border: #fbd6d6;
+$alert-light-color-scheme-error-icon: #ee6f79;
+$alert-light-color-scheme-warning-background: #fff4dd;
+$alert-light-color-scheme-warning-border: #fcdda6;
+$alert-light-color-scheme-warning-icon: #e19f12;
+$alert-light-color-scheme-success-background: #ecf9ef;
+$alert-light-color-scheme-success-border: #b6ebc3;
+$alert-light-color-scheme-success-icon: #4ba96c;
+$alert-light-color-scheme-info-background: #ebf8fd;
+$alert-light-color-scheme-info-border: #afe6f9;
+$alert-light-color-scheme-info-icon: #18a5c5;
+$alert-light-color-scheme-default-background: #f2f5f9;
+$alert-light-color-scheme-default-border: #d7dee4;
+$alert-light-color-scheme-default-icon: #8c99a5;
+$alert-dark-color-scheme-error-background: #500013;
+$alert-dark-color-scheme-error-border: #800025;
+$alert-dark-color-scheme-error-icon: #ee6f79;
+$alert-dark-color-scheme-warning-background: #3e3015;
+$alert-dark-color-scheme-warning-border: #543803;
+$alert-dark-color-scheme-warning-icon: #e19f12;
+$alert-dark-color-scheme-success-background: #103920;
+$alert-dark-color-scheme-success-border: #004823;
+$alert-dark-color-scheme-success-icon: #4ba96c;
+$alert-dark-color-scheme-info-background: #143641;
+$alert-dark-color-scheme-info-border: #084453;
+$alert-dark-color-scheme-info-icon: #18a5c5;
+$alert-dark-color-scheme-default-background: #27333e;
+$alert-dark-color-scheme-default-border: #333f4a;
+$alert-dark-color-scheme-default-icon: #8c99a5;
 $alert-size-border-width: 1px;
 $alert-size-border-radius: 4px;
 $alert-size-horizontal-padding: 16px;
@@ -311,158 +375,152 @@ $alert-font-small-body: caption;
 $autocomplete-size-panel-padding: 4px 0;
 $autocomplete-size-panel-max-height: 256px;
 $autocomplete-size-panel-border-radius: 3px;
-$badge-size-default-min-width: 10px;
-$badge-size-default-padding: 0 8px;
-$badge-size-default-border-width: 1px;
-$badge-size-default-border-radius: 4px;
-$badge-size-default-height: 24px;
-$badge-size-default-font-default: caption;
-$badge-size-default-font-caps: caption-caps;
-$badge-size-default-font-mono: caption-mono;
-$badge-size-mini-height: 16px;
-$badge-size-mini-min-width: 10px;
-$badge-size-mini-border-width: 1px;
-$badge-size-mini-border-radius: 2px;
-$badge-size-mini-padding: 0 4px;
-$badge-size-mini-font-default: extra-small-text;
-$badge-size-mini-font-caps: extra-small-text-caps;
-$badge-size-mini-font-mono: extra-small-text-mono;
-$badge-font-default-default: caption;
-$badge-font-default-caps: caption-caps;
-$badge-font-default-mono: caption-mono;
-$badge-font-mini-default: extra-small-text;
-$badge-font-mini-caps: extra-small-text-caps;
-$badge-font-mini-mono: extra-small-text-mono;
-$badge-light-color-scheme-solid-primary-background: #338FCC;
+$badge-light-color-scheme-solid-primary-background: #4187ff;
+$badge-light-color-scheme-solid-primary-border: #4187ff;
 $badge-light-color-scheme-solid-primary-color: white;
-$badge-light-color-scheme-solid-primary-border: #338FCC;
-$badge-light-color-scheme-solid-info-border: #338FCC;
-$badge-light-color-scheme-solid-info-background: #338FCC;
+$badge-light-color-scheme-solid-info-background: #2099b7;
+$badge-light-color-scheme-solid-info-border: #2099b7;
 $badge-light-color-scheme-solid-info-color: white;
-$badge-light-color-scheme-solid-success-border: #52A832;
-$badge-light-color-scheme-solid-success-background: #52A832;
+$badge-light-color-scheme-solid-success-background: #319d5c;
+$badge-light-color-scheme-solid-success-border: #319d5c;
 $badge-light-color-scheme-solid-success-color: white;
-$badge-light-color-scheme-solid-warning-border: #D6930D;
-$badge-light-color-scheme-solid-warning-background: #D6930D;
+$badge-light-color-scheme-solid-warning-background: #c78816;
+$badge-light-color-scheme-solid-warning-border: #c78816;
 $badge-light-color-scheme-solid-warning-color: white;
-$badge-light-color-scheme-solid-error-border: #E04D36;
-$badge-light-color-scheme-solid-error-background: #E04D36;
+$badge-light-color-scheme-solid-error-background: #ea5868;
+$badge-light-color-scheme-solid-error-border: #ea5868;
 $badge-light-color-scheme-solid-error-color: white;
-$badge-light-color-scheme-solid-transparent-border: #CCCCCC;
-$badge-light-color-scheme-solid-transparent-color: #4D4D4D;
 $badge-light-color-scheme-solid-transparent-background: transparent;
-$badge-light-color-scheme-solid-light-border: #E6E6E6;
-$badge-light-color-scheme-solid-light-background: #E6E6E6;
-$badge-light-color-scheme-solid-light-color: #4D4D4D;
-$badge-light-color-scheme-solid-second-border: #666666;
-$badge-light-color-scheme-solid-second-background: #666666;
+$badge-light-color-scheme-solid-transparent-border: #bdc7d1;
+$badge-light-color-scheme-solid-transparent-color: #19252f;
+$badge-light-color-scheme-solid-light-background: #d7dee4;
+$badge-light-color-scheme-solid-light-border: #d7dee4;
+$badge-light-color-scheme-solid-light-color: #19252f;
+$badge-light-color-scheme-solid-second-background: #7f8c98;
+$badge-light-color-scheme-solid-second-border: #7f8c98;
 $badge-light-color-scheme-solid-second-color: white;
-$badge-light-color-scheme-pastel-primary-background: #F5FAFD;
-$badge-light-color-scheme-pastel-primary-border: #AAD1EC;
-$badge-light-color-scheme-pastel-primary-color: #338FCC;
-$badge-light-color-scheme-pastel-info-background: #F5FAFD;
-$badge-light-color-scheme-pastel-info-border: #AAD1EC;
-$badge-light-color-scheme-pastel-info-color: #338FCC;
-$badge-light-color-scheme-pastel-success-background: #F6FBF4;
-$badge-light-color-scheme-pastel-success-border: #B4DEA4;
-$badge-light-color-scheme-pastel-success-color: #449327;
-$badge-light-color-scheme-pastel-warning-background: #FDFAF3;
-$badge-light-color-scheme-pastel-warning-border: #F0D49B;
-$badge-light-color-scheme-pastel-warning-color: #BB800A;
-$badge-light-color-scheme-pastel-error-background: #FEF7F6;
-$badge-light-color-scheme-pastel-error-border: #F4B7AE;
-$badge-light-color-scheme-pastel-error-color: #E04D36;
-$badge-dark-color-scheme-pastel-primary-background: rgba(0, 153, 255, 0.15);
-$badge-dark-color-scheme-pastel-primary-color: #D8EAF7;
-$badge-dark-color-scheme-pastel-primary-border: #114E77;
-$badge-dark-color-scheme-pastel-info-background: #D8EAF7;
-$badge-dark-color-scheme-pastel-info-color: #D8EAF7;
-$badge-dark-color-scheme-pastel-info-border: rgba(0, 153, 255, 0.15);
-$badge-dark-color-scheme-pastel-success-border: #276211;
-$badge-dark-color-scheme-pastel-success-background: rgba(68, 255, 0, 0.15);
-$badge-dark-color-scheme-pastel-success-color: #DCF1D4;
-$badge-dark-color-scheme-pastel-warning-border: #7D5504;
-$badge-dark-color-scheme-pastel-warning-background: rgba(255, 170, 0, 0.15);
-$badge-dark-color-scheme-pastel-warning-color: #F8EBD1;
-$badge-dark-color-scheme-pastel-error-border: #832112;
-$badge-dark-color-scheme-pastel-error-background: rgba(224, 79, 56, 0.15);
-$badge-dark-color-scheme-pastel-error-color: #FADEDA;
-$badge-dark-color-scheme-solid-primary-background: #114E77;
+$badge-light-color-scheme-pastel-primary-background: #eff6ff;
+$badge-light-color-scheme-pastel-primary-border: #a2c7fe;
+$badge-light-color-scheme-pastel-primary-color: #4187ff;
+$badge-light-color-scheme-pastel-info-background: #ebf8fd;
+$badge-light-color-scheme-pastel-info-border: #a2c7fe;
+$badge-light-color-scheme-pastel-info-color: #2099b7;
+$badge-light-color-scheme-pastel-success-background: #ecf9ef;
+$badge-light-color-scheme-pastel-success-border: #8ed5a1;
+$badge-light-color-scheme-pastel-success-color: #028b49;
+$badge-light-color-scheme-pastel-warning-background: #fff4dd;
+$badge-light-color-scheme-pastel-warning-border: #f5c23c;
+$badge-light-color-scheme-pastel-warning-color: #a26e0c;
+$badge-light-color-scheme-pastel-error-background: #fff3f3;
+$badge-light-color-scheme-pastel-error-border: #fcb2b4;
+$badge-light-color-scheme-pastel-error-color: #db3c55;
+$badge-dark-color-scheme-pastel-primary-background: #193060;
+$badge-dark-color-scheme-pastel-primary-border: #014b9d;
+$badge-dark-color-scheme-pastel-primary-color: #a2c7fe;
+$badge-dark-color-scheme-pastel-info-background: #143641;
+$badge-dark-color-scheme-pastel-info-border: #0c5567;
+$badge-dark-color-scheme-pastel-info-color: #6ed3f2;
+$badge-dark-color-scheme-pastel-success-background: #103920;
+$badge-dark-color-scheme-pastel-success-border: #015a2d;
+$badge-dark-color-scheme-pastel-success-color: #8ed5a1;
+$badge-dark-color-scheme-pastel-warning-background: #3e3015;
+$badge-dark-color-scheme-pastel-warning-border: #6b4804;
+$badge-dark-color-scheme-pastel-warning-color: #f5c23c;
+$badge-dark-color-scheme-pastel-error-background: #621420;
+$badge-dark-color-scheme-pastel-error-border: #9e0130;
+$badge-dark-color-scheme-pastel-error-color: #fcb2b4;
+$badge-dark-color-scheme-solid-primary-background: #0059b8;
+$badge-dark-color-scheme-solid-primary-border: #0059b8;
 $badge-dark-color-scheme-solid-primary-color: white;
-$badge-dark-color-scheme-solid-primary-border: #114E77;
-$badge-dark-color-scheme-solid-info-border: #07314D;
-$badge-dark-color-scheme-solid-info-background: #07314D;
+$badge-dark-color-scheme-solid-info-background: #0c6579;
+$badge-dark-color-scheme-solid-info-border: #0c6579;
 $badge-dark-color-scheme-solid-info-color: white;
-$badge-dark-color-scheme-solid-success-border: #276211;
-$badge-dark-color-scheme-solid-success-background: #276211;
+$badge-dark-color-scheme-solid-success-background: #016b37;
+$badge-dark-color-scheme-solid-success-border: #016b37;
 $badge-dark-color-scheme-solid-success-color: white;
-$badge-dark-color-scheme-solid-warning-border: #7D5504;
-$badge-dark-color-scheme-solid-warning-background: #7D5504;
+$badge-dark-color-scheme-solid-warning-background: #7e5406;
+$badge-dark-color-scheme-solid-warning-border: #7e5406;
 $badge-dark-color-scheme-solid-warning-color: white;
-$badge-dark-color-scheme-solid-error-border: #832112;
-$badge-dark-color-scheme-solid-error-background: #832112;
+$badge-dark-color-scheme-solid-error-background: #b9023a;
+$badge-dark-color-scheme-solid-error-border: #b9023a;
 $badge-dark-color-scheme-solid-error-color: white;
-$badge-dark-color-scheme-solid-transparent-border: #808080;
-$badge-dark-color-scheme-solid-transparent-color: #F5F5F5;
 $badge-dark-color-scheme-solid-transparent-background: transparent;
-$badge-dark-color-scheme-solid-light-border: #999999;
-$badge-dark-color-scheme-solid-light-background: #999999;
+$badge-dark-color-scheme-solid-transparent-border: #515e69;
+$badge-dark-color-scheme-solid-transparent-color: white;
+$badge-dark-color-scheme-solid-light-background: #7f8c98;
+$badge-dark-color-scheme-solid-light-border: #7f8c98;
 $badge-dark-color-scheme-solid-light-color: white;
-$badge-dark-color-scheme-solid-second-border: #4D4D4D;
-$badge-dark-color-scheme-solid-second-background: #4D4D4D;
+$badge-dark-color-scheme-solid-second-background: #515e69;
+$badge-dark-color-scheme-solid-second-border: #515e69;
 $badge-dark-color-scheme-solid-second-color: white;
+$badge-size-default-height: 24px;
+$badge-size-default-min-width: 10px;
+$badge-size-default-padding: 0 8px;
+$badge-size-default-border-width: 1px;
+$badge-size-default-border-radius: 4px;
+$badge-size-mini-height: 16px;
+$badge-size-mini-min-width: 10px;
+$badge-size-mini-border-width: 1px;
+$badge-size-mini-border-radius: 2px;
+$badge-size-mini-padding: 0 4px;
+$badge-font-default-default: caption;
+$badge-font-default-caps: caption-caps;
+$badge-font-default-mono: caption-mono;
+$badge-font-mini-default: extra-small-text;
+$badge-font-mini-caps: extra-small-text-caps;
+$badge-font-mini-mono: extra-small-text-mono;
 $button-toggle-size-border-size: 1px;
 $button-toggle-size-border-radius: 3px;
 $button-light-color-scheme-active-shadow: inset 0 1px 2px 0 rgba(black, 0.2);
 $button-light-color-scheme-primary-color: white;
-$button-light-color-scheme-primary-border: #277BB3;
-$button-light-color-scheme-primary-background: #338FCC;
+$button-light-color-scheme-primary-border: #0374eb;
+$button-light-color-scheme-primary-background: #0374eb;
 $button-light-color-scheme-primary-icon: white;
-$button-light-color-scheme-primary-states-active-border: darken(#277BB3, 5);
-$button-light-color-scheme-primary-states-active-background: darken(#338FCC, 5);
-$button-light-color-scheme-primary-transparent-color: #338FCC;
-$button-light-color-scheme-primary-transparent-icon: #338FCC;
-$button-light-color-scheme-primary-transparent-states-hover-color: #206EA2;
-$button-light-color-scheme-primary-transparent-states-hover-icon: #206EA2;
-$button-light-color-scheme-primary-transparent-states-active-color: #114E77;
-$button-light-color-scheme-primary-transparent-states-active-icon: #114E77;
-$button-light-color-scheme-second-border: #B3B3B3;
-$button-light-color-scheme-second-background: #F0F0F0;
-$button-light-color-scheme-second-color: #4D4D4D;
-$button-light-color-scheme-second-icon: #999999;
-$button-light-color-scheme-second-states-active-border: darken(#B3B3B3, 5);
-$button-light-color-scheme-second-states-active-background: darken(#F0F0F0, 5);
-$button-light-color-scheme-error-border: #B3B3B3;
-$button-light-color-scheme-error-background: #F0F0F0;
-$button-light-color-scheme-error-color: #E76E5C;
-$button-light-color-scheme-error-icon: #E76E5C;
-$button-light-color-scheme-error-states-active-border: darken(#B3B3B3, 5);
-$button-light-color-scheme-error-states-active-background: darken(#F0F0F0, 5);
+$button-light-color-scheme-primary-states-active-border: #0059b8;
+$button-light-color-scheme-primary-states-active-background: #0059b8;
+$button-light-color-scheme-primary-transparent-color: #0374eb;
+$button-light-color-scheme-primary-transparent-icon: #0374eb;
+$button-light-color-scheme-primary-transparent-states-hover-color: #0059b8;
+$button-light-color-scheme-primary-transparent-states-hover-icon: #0059b8;
+$button-light-color-scheme-primary-transparent-states-active-color: #014b9d;
+$button-light-color-scheme-primary-transparent-states-active-icon: #014b9d;
+$button-light-color-scheme-second-border: #d7dee4;
+$button-light-color-scheme-second-background: #d7dee4;
+$button-light-color-scheme-second-color: #19252f;
+$button-light-color-scheme-second-icon: #8c99a5;
+$button-light-color-scheme-second-states-active-border: #bdc7d1;
+$button-light-color-scheme-second-states-active-background: #bdc7d1;
+$button-light-color-scheme-error-border: #d7dee4;
+$button-light-color-scheme-error-background: #d7dee4;
+$button-light-color-scheme-error-color: #ea5868;
+$button-light-color-scheme-error-icon: #ea5868;
+$button-light-color-scheme-error-states-active-border: #bdc7d1;
+$button-light-color-scheme-error-states-active-background: #bdc7d1;
 $button-dark-color-scheme-active-shadow: inset 1px 2px 2px 0 rgba(black, 0.2);
 $button-dark-color-scheme-primary-color: white;
-$button-dark-color-scheme-primary-border: #277BB3;
-$button-dark-color-scheme-primary-background: #338FCC;
+$button-dark-color-scheme-primary-border: #0059b8;
+$button-dark-color-scheme-primary-background: #0059b8;
 $button-dark-color-scheme-primary-icon: white;
-$button-dark-color-scheme-primary-states-active-border: darken(#277BB3, 5);
-$button-dark-color-scheme-primary-states-active-background: darken(#57A4D7, 5);
-$button-dark-color-scheme-primary-transparent-color: #338FCC;
-$button-dark-color-scheme-primary-transparent-icon: #338FCC;
-$button-dark-color-scheme-primary-transparent-states-hover-color: #206EA2;
-$button-dark-color-scheme-primary-transparent-states-hover-icon: #206EA2;
-$button-dark-color-scheme-primary-transparent-states-active-color: #114E77;
-$button-dark-color-scheme-primary-transparent-states-active-icon: #114E77;
-$button-dark-color-scheme-second-border: #808080;
-$button-dark-color-scheme-second-background: #666666;
-$button-dark-color-scheme-second-color: #F0F0F0;
-$button-dark-color-scheme-second-icon: #999999;
-$button-dark-color-scheme-second-states-active-border: darken(#808080, 5);
-$button-dark-color-scheme-second-states-active-background: darken(#666666, 5);
-$button-dark-color-scheme-error-border: #808080;
-$button-dark-color-scheme-error-background: #666666;
-$button-dark-color-scheme-error-color: #E76E5C;
-$button-dark-color-scheme-error-icon: #E76E5C;
-$button-dark-color-scheme-error-states-active-border: darken(#808080, 5);
-$button-dark-color-scheme-error-states-active-background: darken(#666666, 5);
+$button-dark-color-scheme-primary-states-active-border: darken(#014b9d, 5);
+$button-dark-color-scheme-primary-states-active-background: darken(#014b9d, 5);
+$button-dark-color-scheme-primary-transparent-color: #0374eb;
+$button-dark-color-scheme-primary-transparent-icon: #0374eb;
+$button-dark-color-scheme-primary-transparent-states-hover-color: #014b9d;
+$button-dark-color-scheme-primary-transparent-states-hover-icon: #014b9d;
+$button-dark-color-scheme-primary-transparent-states-active-color: #023c7f;
+$button-dark-color-scheme-primary-transparent-states-active-icon: #023c7f;
+$button-dark-color-scheme-second-border: #515e69;
+$button-dark-color-scheme-second-background: #515e69;
+$button-dark-color-scheme-second-color: #f2f5f9;
+$button-dark-color-scheme-second-icon: #8c99a5;
+$button-dark-color-scheme-second-states-active-border: #333f4a;
+$button-dark-color-scheme-second-states-active-background: #333f4a;
+$button-dark-color-scheme-error-border: #515e69;
+$button-dark-color-scheme-error-background: #515e69;
+$button-dark-color-scheme-error-color: #ea5868;
+$button-dark-color-scheme-error-icon: #ea5868;
+$button-dark-color-scheme-error-states-active-border: #333f4a;
+$button-dark-color-scheme-error-states-active-background: #333f4a;
 $button-size-border-width: 1px;
 $button-size-border-radius: 3px;
 $button-size-vertical-padding: 6px;
@@ -473,41 +531,41 @@ $button-font-primary-transparent: body;
 $icon-button-size-vertical-padding: 6px;
 $icon-button-size-horizontal-padding: 8px;
 $icon-button-size-icon-horizontal-padding: 16px;
-$card-light-color-scheme-error-vertical-line: #E76E5C;
-$card-light-color-scheme-error-background: #FCEFEC;
-$card-light-color-scheme-error-shadow: #E6E6E6;
-$card-light-color-scheme-warning-vertical-line: #F0D49B;
-$card-light-color-scheme-warning-background: #FCF5E8;
-$card-light-color-scheme-warning-shadow: #E6E6E6;
-$card-light-color-scheme-success-vertical-line: #B4DEA4;
-$card-light-color-scheme-success-background: #EDF8E9;
-$card-light-color-scheme-success-shadow: #E6E6E6;
-$card-light-color-scheme-info-vertical-line: #AAD1EC;
-$card-light-color-scheme-info-background: #EBF4FB;
-$card-light-color-scheme-info-shadow: #E6E6E6;
-$card-dark-color-scheme-error-vertical-line: #E76E5C;
-$card-dark-color-scheme-error-background: #832112;
-$card-dark-color-scheme-error-shadow: #4D4D4D;
-$card-dark-color-scheme-warning-vertical-line: #DFA739;
-$card-dark-color-scheme-warning-background: #7D5504;
-$card-dark-color-scheme-warning-shadow: #4D4D4D;
-$card-dark-color-scheme-success-vertical-line: #6FBA53;
-$card-dark-color-scheme-success-background: #276211;
-$card-dark-color-scheme-success-shadow: #4D4D4D;
-$card-dark-color-scheme-info-vertical-line: #57A4D7;
-$card-dark-color-scheme-info-background: #114E77;
-$card-dark-color-scheme-info-shadow: #4D4D4D;
+$card-light-color-scheme-error-vertical-line: #fbd6d6;
+$card-light-color-scheme-error-background: #fff3f3;
+$card-light-color-scheme-error-shadow: #fbd6d6;
+$card-light-color-scheme-warning-vertical-line: #fcdda6;
+$card-light-color-scheme-warning-background: #fff4dd;
+$card-light-color-scheme-warning-shadow: #fcdda6;
+$card-light-color-scheme-success-vertical-line: #b6ebc3;
+$card-light-color-scheme-success-background: #ecf9ef;
+$card-light-color-scheme-success-shadow: #b6ebc3;
+$card-light-color-scheme-info-vertical-line: #afe6f9;
+$card-light-color-scheme-info-background: #ebf8fd;
+$card-light-color-scheme-info-shadow: #afe6f9;
+$card-dark-color-scheme-error-vertical-line: #800025;
+$card-dark-color-scheme-error-background: #500013;
+$card-dark-color-scheme-error-shadow: #800025;
+$card-dark-color-scheme-warning-vertical-line: #543803;
+$card-dark-color-scheme-warning-background: #3e3015;
+$card-dark-color-scheme-warning-shadow: #543803;
+$card-dark-color-scheme-success-vertical-line: #004823;
+$card-dark-color-scheme-success-background: #103920;
+$card-dark-color-scheme-success-shadow: #004823;
+$card-dark-color-scheme-info-vertical-line: #084453;
+$card-dark-color-scheme-info-background: #143641;
+$card-dark-color-scheme-info-shadow: #084453;
 $card-size-vertical-line: 4px;
-$checkbox-light-color-scheme-border: #B3B3B3;
-$checkbox-light-color-scheme-states-checked-border: #206EA2;
-$checkbox-light-color-scheme-states-checked-background: #338FCC;
-$checkbox-light-color-scheme-states-focused-border: #206EA2;
-$checkbox-light-color-scheme-states-focused-shadow: inset 0 0 0 1px white, 0 0 0 1px #206EA2;
-$checkbox-dark-color-scheme-border: #999999;
-$checkbox-dark-color-scheme-states-checked-border: #57A4D7;
-$checkbox-dark-color-scheme-states-checked-background: #206EA2;
-$checkbox-dark-color-scheme-states-focused-border: #57A4D7;
-$checkbox-dark-color-scheme-states-focused-shadow: inset 0 0 0 1px #333333, 0 0 0 1px #57A4D7;
+$checkbox-light-color-scheme-border: #bdc7d1;
+$checkbox-light-color-scheme-states-checked-border: #0374eb;
+$checkbox-light-color-scheme-states-checked-background: #0374eb;
+$checkbox-light-color-scheme-states-focused-border: #0374eb;
+$checkbox-light-color-scheme-states-focused-shadow: 0 0 0 1px #0374eb;
+$checkbox-dark-color-scheme-border: #515e69;
+$checkbox-dark-color-scheme-states-checked-border: #0059b8;
+$checkbox-dark-color-scheme-states-checked-background: #0059b8;
+$checkbox-dark-color-scheme-states-focused-border: #4187ff;
+$checkbox-dark-color-scheme-states-focused-shadow: 0 0 0 1px #4187ff;
 $checkbox-size-width: 16px;
 $checkbox-size-label-margin: 8px;
 $checkbox-size-border-width: 1px;
@@ -515,10 +573,10 @@ $checkbox-size-toggle-box-shadow: inset 0 0 1px 0 rgba(0, 0, 0, 0.2);
 $checkbox-font-default: body;
 $datepicker-toggle-size-width: 30px;
 $datepicker-toggle-size-height: 30px;
-$datepicker-body-light-color-scheme-states-selected-color: #338FCC;
-$datepicker-body-light-color-scheme-states-selected-background: #D8EAF7;
-$datepicker-body-dark-color-scheme-states-selected-color: #338FCC;
-$datepicker-body-dark-color-scheme-states-selected-background: #114E77;
+$datepicker-body-light-color-scheme-states-selected-color: #0374eb;
+$datepicker-body-light-color-scheme-states-selected-background: #e7f1ff;
+$datepicker-body-dark-color-scheme-states-selected-color: #4187ff;
+$datepicker-body-dark-color-scheme-states-selected-background: #014b9d;
 $datepicker-body-size-label-paddings: 8px 28px 12px 12px;
 $datepicker-body-size-cell-min-size: 32px;
 $datepicker-body-size-cell-margin: 5%;
@@ -539,6 +597,22 @@ $datepicker-calendar-font-header: caption;
 $datepicker-input-size-width: 130px;
 $divider-size-width: 1px;
 $divider-size-inset-margin: 80px;
+$description-list-light-color-scheme-dt: #6d7a86;
+$description-list-light-color-scheme-dd: #19252f;
+$description-list-dark-color-scheme-dt: #8c99a5;
+$description-list-dark-color-scheme-dd: #f2f5f9;
+$description-list-size-grid-template-columns: repeat(4, 1fr);
+$description-list-size-dt-grid-column: 1;
+$description-list-size-dd-grid-column: 2 / span 3;
+$description-list-size-horizontal-column-gap: 16px;
+$description-list-size-horizontal-row-gap: 12px;
+$description-list-size-vertical-column-gap: 0;
+$description-list-size-vertical-row-gap: 2px;
+$description-list-size-vertical-dd-margin-bottom: 16px;
+$description-list-font-horizontal-dt: body;
+$description-list-font-horizontal-dd: body;
+$description-list-font-vertical-dt: caption;
+$description-list-font-vertical-dd: body;
 $dropdown-item-size-padding: 5px 15px;
 $dropdown-item-size-icon-padding: 0 8px 2px 0;
 $dropdown-item-font-default: body;
@@ -554,15 +628,15 @@ $dropdown-panel-size-max-width: 640px;
 $dropdown-panel-size-padding: 4px 0;
 $dropdown-panel-size-border-width: 1px;
 $dropdown-panel-size-border-radius: 3px;
-$form-field-light-color-scheme-border: #B3B3B3;
+$form-field-light-color-scheme-border: #bdc7d1;
 $form-field-light-color-scheme-background: white;
-$form-field-light-color-scheme-states-hover-border: #999999;
-$form-field-light-color-scheme-states-invalid-border: #E76E5C;
+$form-field-light-color-scheme-states-hover-border: #bdc7d1;
+$form-field-light-color-scheme-states-invalid-border: #db3c55;
 $form-field-light-color-scheme-states-invalid-background: transparent;
-$form-field-dark-color-scheme-border: #999999;
-$form-field-dark-color-scheme-background: #333333;
-$form-field-dark-color-scheme-states-hover-border: #CCCCCC;
-$form-field-dark-color-scheme-states-invalid-border: #E76E5C;
+$form-field-dark-color-scheme-border: #515e69;
+$form-field-dark-color-scheme-background: transparent;
+$form-field-dark-color-scheme-states-hover-border: #515e69;
+$form-field-dark-color-scheme-states-invalid-border: #b9023a;
 $form-field-dark-color-scheme-states-invalid-background: transparent;
 $form-field-size-border-width: 1px;
 $form-field-size-border-radius: 3px;
@@ -570,10 +644,25 @@ $form-field-size-button-width: 32px;
 $form-field-font-default: body;
 $form-field-hint-size-margin-top: 4px;
 $form-field-hint-font-default: caption;
-$forms-light-color-scheme-label: #999999;
-$forms-light-color-scheme-legend: #4D4D4D;
-$forms-dark-color-scheme-label: #999999;
-$forms-dark-color-scheme-legend: #F0F0F0;
+$form-field-password-hint-light-color-scheme-text-color: #19252f;
+$form-field-password-hint-light-color-scheme-icon-color: #19252f;
+$form-field-password-hint-light-color-scheme-states-invalid-icon-color: #db3c55;
+$form-field-password-hint-light-color-scheme-states-invalid-text-color: #19252f;
+$form-field-password-hint-light-color-scheme-states-valid-text-color: #016b37;
+$form-field-password-hint-light-color-scheme-states-valid-icon-color: #016b37;
+$form-field-password-hint-dark-color-scheme-text-color: #f2f5f9;
+$form-field-password-hint-dark-color-scheme-icon-color: #f2f5f9;
+$form-field-password-hint-dark-color-scheme-states-invalid-icon-color: #ea5868;
+$form-field-password-hint-dark-color-scheme-states-invalid-text-color: #f2f5f9;
+$form-field-password-hint-dark-color-scheme-states-valid-text-color: #319d5c;
+$form-field-password-hint-dark-color-scheme-states-valid-icon-color: #319d5c;
+$form-field-password-hint-size-margin-top: 8px;
+$form-field-password-hint-size-icon-margin: 4px;
+$form-field-password-hint-font-default: caption;
+$forms-light-color-scheme-label: #6d7a86;
+$forms-light-color-scheme-legend: #19252f;
+$forms-dark-color-scheme-label: #8c99a5;
+$forms-dark-color-scheme-legend: #f2f5f9;
 $forms-size-horizontal-row-margin-bottom: 20px;
 $forms-size-horizontal-label-padding-top: 6px;
 $forms-size-horizontal-label-padding-bottom: 0;
@@ -593,22 +682,22 @@ $input-size-width: 100%;
 $input-size-min-height: 30px;
 $input-font-default: body;
 $input-font-monospace: body-mono;
-$link-light-color-scheme-text: #338FCC;
-$link-light-color-scheme-border-bottom: rgba(#338FCC, 0.32);
-$link-light-color-scheme-state-visited-text: #6A2795;
-$link-light-color-scheme-state-visited-border-bottom: rgba(106, 39, 149, 0.32);
-$link-light-color-scheme-state-hover-text: #206EA2;
-$link-light-color-scheme-state-hover-border-bottom: rgba(#206EA2, 0.32);
-$link-light-color-scheme-state-active: #114E77;
-$link-light-color-scheme-state-focused-outline: #338FCC;
-$link-dark-color-scheme-text: #57A4D7;
-$link-dark-color-scheme-border-bottom: rgba(#57A4D7, 0.32);
-$link-dark-color-scheme-state-visited-text: #a23ee2;
-$link-dark-color-scheme-state-visited-border-bottom: rgba(162, 62, 226, 0.32);
-$link-dark-color-scheme-state-hover-text: #7FBAE1;
-$link-dark-color-scheme-state-hover-border-bottom: rgba(#7FBAE1, 0.32);
-$link-dark-color-scheme-state-active: #7FBAE1;
-$link-dark-color-scheme-state-focused-outline: #57A4D7;
+$link-light-color-scheme-text: #0374eb;
+$link-light-color-scheme-border-bottom: rgba(#0374eb, 0.32);
+$link-light-color-scheme-state-visited-text: #864775;
+$link-light-color-scheme-state-visited-border-bottom: rgba(#864775, 0.32);
+$link-light-color-scheme-state-hover-text: #0059b8;
+$link-light-color-scheme-state-hover-border-bottom: rgba(#0059b8, 0.32);
+$link-light-color-scheme-state-active: #014b9d;
+$link-light-color-scheme-state-focused-outline: #0374eb;
+$link-dark-color-scheme-text: #4187ff;
+$link-dark-color-scheme-border-bottom: rgba(#4187ff, 0.32);
+$link-dark-color-scheme-state-visited-text: #bb78a7;
+$link-dark-color-scheme-state-visited-border-bottom: rgba(#bb78a7, 0.32);
+$link-dark-color-scheme-state-hover-text: #0374eb;
+$link-dark-color-scheme-state-hover-border-bottom: rgba(#0374eb, 0.32);
+$link-dark-color-scheme-state-active: #0059b8;
+$link-dark-color-scheme-state-focused-outline: #4187ff;
 $link-size-icon-margin: 4px;
 $link-size-state-focused-outline-offset: 2px;
 $link-size-state-focused-outline-width: 2px;
@@ -620,11 +709,11 @@ $list-size-icon-padding: 4px;
 $list-size-item-height: 32px;
 $list-size-icon-width: 24px;
 $list-font-item: body;
-$modal-light-color-scheme-shadow: (0 0 0 1px #B3B3B3, 0 6px 12px 0 rgba(0, 0, 0, 0.5));
-$modal-light-color-scheme-body-top-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
-$modal-light-color-scheme-body-bottom-shadow: 0 -2px 4px 0 rgba(0, 0, 0, 0.16);
-$modal-light-color-scheme-background-mask: rgba(0, 0, 0, 0.5);
-$modal-dark-color-scheme-shadow: (0 0 0 1px #333333, 0 6px 12px 0 rgba(0, 0, 0, 0.5));
+$modal-light-color-scheme-shadow: (0 0 0 1px #d7dee4, 0 6px 12px 0 rgba(39, 51, 62, 0.5));
+$modal-light-color-scheme-body-top-shadow: 0 2px 4px 0 rgba(39, 51, 62, 0.16);
+$modal-light-color-scheme-body-bottom-shadow: 0 -2px 4px 0 rgba(39, 51, 62, 0.16);
+$modal-light-color-scheme-background-mask: rgba(39, 51, 62, 0.5);
+$modal-dark-color-scheme-shadow: (0 0 0 1px #19252f, 0 6px 12px 0 rgba(0, 0, 0, 0.5));
 $modal-dark-color-scheme-body-top-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
 $modal-dark-color-scheme-body-bottom-shadow: 0 -2px 4px 0 rgba(0, 0, 0, 0.16);
 $modal-dark-color-scheme-background-mask: rgba(0, 0, 0, 0.5);
@@ -635,35 +724,41 @@ $modal-size-top: 48px;
 $modal-size-close-width: 56px;
 $modal-size-border-radius: 4px;
 $modal-size-border-width: 1px;
+$modal-header-light-color-scheme-border: #d7dee4;
+$modal-header-dark-color-scheme-border: #333f4a;
 $modal-header-size-border-radius: 4px 4px 0 0;
 $modal-header-size-padding: 14px 16px;
 $modal-header-font-default: title;
 $modal-body-size-max-height: calc(100vh - 260px);
 $modal-body-size-padding: 16px 24px 24px;
 $modal-body-font-default: body;
+$modal-footer-light-color-scheme-border: #f2f5f9;
+$modal-footer-dark-color-scheme-border: #333f4a;
 $modal-footer-size-border-radius: 0 0 4px 4px;
 $modal-footer-size-padding: 16px 16px;
 $modal-confirm-size-padding: 24px;
-$navbar-light-color-scheme-background: #114E77;
-$navbar-light-color-scheme-divider-background: rgba(255, 255, 255, 0.3);
-$navbar-dark-color-scheme-background: #114E77;
-$navbar-dark-color-scheme-divider-background: rgba(255, 255, 255, 0.3);
+$navbar-light-color-scheme-background: #19252f;
+$navbar-light-color-scheme-divider-background: #515e69;
+$navbar-dark-color-scheme-background: #333f4a;
+$navbar-dark-color-scheme-divider-background: #515e69;
 $navbar-size-icon-margin: 6px;
 $navbar-font-title: body;
 $vertical-navbar-size-states-expanded-width: 240px;
 $vertical-navbar-size-states-collapsed-width: 56px;
 $vertical-navbar-size-icon-margin: 16px;
-$navbar-item-light-color-scheme-text: #D8EAF7;
-$navbar-item-light-color-scheme-icon: #D8EAF7;
+$navbar-item-light-color-scheme-text: #f2f5f9;
+$navbar-item-light-color-scheme-icon: #bdc7d1;
 $navbar-item-light-color-scheme-states-active: rgba(0, 0, 0, 0.1);
+$navbar-item-light-color-scheme-states-selected: #333f4a;
 $navbar-item-light-color-scheme-states-hover: rgba(255, 255, 255, 0.1);
-$navbar-item-light-color-scheme-states-progress: #07314D;
+$navbar-item-light-color-scheme-states-progress: #333f4a;
 $navbar-item-light-color-scheme-states-disabled-opacity: 0.3;
-$navbar-item-dark-color-scheme-text: #D8EAF7;
-$navbar-item-dark-color-scheme-icon: #D8EAF7;
+$navbar-item-dark-color-scheme-text: #f2f5f9;
+$navbar-item-dark-color-scheme-icon: #bdc7d1;
 $navbar-item-dark-color-scheme-states-active: rgba(0, 0, 0, 0.1);
+$navbar-item-dark-color-scheme-states-selected: #434f5a;
 $navbar-item-dark-color-scheme-states-hover: rgba(255, 255, 255, 0.1);
-$navbar-item-dark-color-scheme-states-progress: #07314D;
+$navbar-item-dark-color-scheme-states-progress: #333f4a;
 $navbar-item-dark-color-scheme-states-disabled-opacity: 0.3;
 $navbar-item-size-padding: 16px;
 $navbar-item-size-height: 48px;
@@ -678,13 +773,13 @@ $option-size-height: 32px;
 $option-size-border-width: 2px;
 $option-font-default: body;
 $popover-light-color-scheme-background: white;
-$popover-light-color-scheme-text: #4D4D4D;
-$popover-light-color-scheme-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2);
-$popover-light-color-scheme-border: #B3B3B3;
-$popover-dark-color-scheme-background: #4D4D4D;
-$popover-dark-color-scheme-text: #F0F0F0;
-$popover-dark-color-scheme-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2);
-$popover-dark-color-scheme-border: #4D4D4D;
+$popover-light-color-scheme-text: #19252f;
+$popover-light-color-scheme-shadow: 0 3px 8px 0 rgba(39, 51, 62, 0.2);
+$popover-light-color-scheme-border: #d7dee4;
+$popover-dark-color-scheme-background: #333f4a;
+$popover-dark-color-scheme-text: #f2f5f9;
+$popover-dark-color-scheme-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2);
+$popover-dark-color-scheme-border: #333f4a;
 $popover-size-max-height: 480px;
 $popover-size-padding: 16px;
 $popover-size-border-radius: 3px;
@@ -694,51 +789,51 @@ $popover-size-small-width: 200px;
 $popover-size-normal-width: 400px;
 $popover-size-large-width: 640px;
 $popover-font-default: body;
-$popover-header-light-color-scheme-border: #E6E6E6;
-$popover-header-light-color-scheme-text: #4D4D4D;
+$popover-header-light-color-scheme-border: #d7dee4;
+$popover-header-light-color-scheme-text: #19252f;
 $popover-header-light-color-scheme-background: white;
-$popover-header-dark-color-scheme-border: transparent;
-$popover-header-dark-color-scheme-text: #F0F0F0;
-$popover-header-dark-color-scheme-background: #4D4D4D;
+$popover-header-dark-color-scheme-border: #434f5a;
+$popover-header-dark-color-scheme-text: #f2f5f9;
+$popover-header-dark-color-scheme-background: #333f4a;
 $popover-header-size-height: 10px 16px;
 $popover-header-size-padding: 10px 16px;
 $popover-header-font-default: subheading;
-$popover-footer-light-color-scheme-border: #F0F0F0;
-$popover-footer-light-color-scheme-background: #F0F0F0;
-$popover-footer-dark-color-scheme-border: transparent;
-$popover-footer-dark-color-scheme-background: transparent;
+$popover-footer-light-color-scheme-border: #f2f5f9;
+$popover-footer-light-color-scheme-background: #f2f5f9;
+$popover-footer-dark-color-scheme-border: #434f5a;
+$popover-footer-dark-color-scheme-background: #333f4a;
 $popover-footer-size-margin-top: 8px;
 $popover-footer-size-padding: 12px 16px;
 $popover-footer-size-height: 56px;
 $popover-footer-font-default: body;
-$popup-light-color-scheme-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2);
-$popup-light-color-scheme-border: #B3B3B3;
-$popup-light-color-scheme-divider: #CCCCCC;
+$popup-light-color-scheme-shadow: 0 3px 8px 0 rgba(39, 51, 62, 0.2);
+$popup-light-color-scheme-border: #d7dee4;
+$popup-light-color-scheme-divider: #d7dee4;
 $popup-light-color-scheme-background: white;
-$popup-light-color-scheme-footer-background: #F0F0F0;
-$popup-dark-color-scheme-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2);
-$popup-dark-color-scheme-border: #999999;
-$popup-dark-color-scheme-divider: #666666;
-$popup-dark-color-scheme-background: #4D4D4D;
+$popup-light-color-scheme-footer-background: #f2f5f9;
+$popup-dark-color-scheme-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2);
+$popup-dark-color-scheme-border: #333f4a;
+$popup-dark-color-scheme-divider: #434f5a;
+$popup-dark-color-scheme-background: #333f4a;
 $popup-dark-color-scheme-footer-background: transparent;
-$progress-bar-light-color-scheme-background: #F0F0F0;
-$progress-bar-dark-color-scheme-background: #666666;
+$progress-bar-light-color-scheme-background: rgba(25, 37, 47, 0.06);
+$progress-bar-dark-color-scheme-background: rgba(white,0.06);
 $progress-bar-size-height: 4px;
 $progress-spinner-size-size: 16px;
-$radio-light-color-scheme-outer-circle-border: #B3B3B3;
+$radio-light-color-scheme-outer-circle-border: #bdc7d1;
 $radio-light-color-scheme-inner-circle-border: transparent;
-$radio-light-color-scheme-states-checked-outer-circle-border: #338FCC;
-$radio-light-color-scheme-states-checked-inner-circle-border: #338FCC;
-$radio-light-color-scheme-states-focused-outer-circle-border: #338FCC;
-$radio-light-color-scheme-states-focused-outer-circle-shadow: 0 0 0 2px #B3B3B3;
+$radio-light-color-scheme-states-checked-outer-circle-border: #0374eb;
+$radio-light-color-scheme-states-checked-inner-circle-border: #0374eb;
+$radio-light-color-scheme-states-focused-outer-circle-border: #0374eb;
+$radio-light-color-scheme-states-focused-outer-circle-shadow: 0 0 0 2px #0374eb;
 $radio-light-color-scheme-states-focused-inner-circle-shadow: 0 0 0 1px white;
-$radio-dark-color-scheme-outer-circle-border: #999999;
+$radio-dark-color-scheme-outer-circle-border: #515e69;
 $radio-dark-color-scheme-inner-circle-border: transparent;
-$radio-dark-color-scheme-states-checked-outer-circle-border: #57A4D7;
-$radio-dark-color-scheme-states-checked-inner-circle-border: #206EA2;
-$radio-dark-color-scheme-states-focused-outer-circle-border: #57A4D7;
-$radio-dark-color-scheme-states-focused-outer-circle-shadow: 0 0 0 2px #57A4D7;
-$radio-dark-color-scheme-states-focused-inner-circle-shadow: 0 0 0 1px #333333;
+$radio-dark-color-scheme-states-checked-outer-circle-border: #0059b8;
+$radio-dark-color-scheme-states-checked-inner-circle-border: #0059b8;
+$radio-dark-color-scheme-states-focused-outer-circle-border: #4187ff;
+$radio-dark-color-scheme-states-focused-outer-circle-shadow: 0 0 0 2px #4187ff;
+$radio-dark-color-scheme-states-focused-inner-circle-shadow: 0 0 0 1px #19252f;
 $radio-size-size: 14px;
 $radio-size-label-margin: 8px;
 $radio-font-default: body;
@@ -753,8 +848,8 @@ $select-panel-size-vertical-padding: 4px;
 $select-panel-size-border-width: 1px;
 $select-panel-size-border-radius: 3px;
 $select-panel-font-default: body;
-$sidepanel-light-color-scheme-border: #B3B3B3;
-$sidepanel-dark-color-scheme-border: #333333;
+$sidepanel-light-color-scheme-border: #bdc7d1;
+$sidepanel-dark-color-scheme-border: #19252f;
 $sidepanel-font-default: body;
 $sidepanel-header-size-padding: 14px 16px;
 $sidepanel-header-size-close-padding: 0 0 0 8px;
@@ -766,12 +861,28 @@ $table-size-row-padding-vertical: 8px;
 $table-size-row-padding-horizontal: 16px;
 $table-font-header: caption;
 $table-font-body: body;
-$tabs-light-color-scheme-border: #B3B3B3;
-$tabs-light-color-scheme-state-active: #338FCC;
-$tabs-light-color-scheme-state-disabled-overlay: rgba(white, 0.5);
-$tabs-dark-color-scheme-border: #B3B3B3;
-$tabs-dark-color-scheme-state-active: #57A4D7;
-$tabs-dark-color-scheme-state-disabled-overlay: rgba(white, 0.5);
+$tabs-light-color-scheme-border: #d7dee4;
+$tabs-light-color-scheme-state-normal-icon: #8c99a5;
+$tabs-light-color-scheme-state-normal-text: #19252f;
+$tabs-light-color-scheme-state-hover-icon: #19252f;
+$tabs-light-color-scheme-state-hover-text: #19252f;
+$tabs-light-color-scheme-state-active-marker-color: #0374eb;
+$tabs-light-color-scheme-state-empty-icon: #8c99a5;
+$tabs-light-color-scheme-state-empty-text: #8c99a5;
+$tabs-light-color-scheme-state-disabled-icon: #8c99a5;
+$tabs-light-color-scheme-state-disabled-text: #8c99a5;
+$tabs-light-color-scheme-state-disabled-marker-opacity: 0.3;
+$tabs-dark-color-scheme-border: #333f4a;
+$tabs-dark-color-scheme-state-normal-icon: #8c99a5;
+$tabs-dark-color-scheme-state-normal-text: #f2f5f9;
+$tabs-dark-color-scheme-state-hover-icon: #f2f5f9;
+$tabs-dark-color-scheme-state-hover-text: #f2f5f9;
+$tabs-dark-color-scheme-state-active-marker-color: #0059b8;
+$tabs-dark-color-scheme-state-empty-icon: #6d7a86;
+$tabs-dark-color-scheme-state-empty-text: #6d7a86;
+$tabs-dark-color-scheme-state-disabled-icon: #6d7a86;
+$tabs-dark-color-scheme-state-disabled-text: #6d7a86;
+$tabs-dark-color-scheme-state-disabled-marker-opacity: 0.3;
 $tabs-size-height: 40px;
 $tabs-size-highlight-height: 4px;
 $tabs-size-padding-horizontal: 16px;
@@ -779,48 +890,62 @@ $tabs-size-border-width: 1px;
 $tabs-size-border-radius: 3px;
 $tabs-size-label-icon-margin: 8px;
 $tabs-font-default: body;
-$tags-light-color-scheme-primary-background: #D8EAF7;
-$tags-light-color-scheme-primary-border: #D8EAF7;
-$tags-light-color-scheme-primary-icon: mix(#57A4D7, rgba(black, 0.05));
-$tags-light-color-scheme-primary-states-hover-icon: #206EA2;
-$tags-light-color-scheme-primary-states-focused: #338FCC;
-$tags-light-color-scheme-primary-states-disabled-text: mix(#338FCC, transparent, 50%);
-$tags-light-color-scheme-primary-states-disabled-background: mix(#338FCC, transparent, 10%);
-$tags-light-color-scheme-second-background: #E6E6E6;
-$tags-light-color-scheme-second-border: #E6E6E6;
-$tags-light-color-scheme-second-icon: mix(#999999, rgba(black, 0.05));
-$tags-light-color-scheme-second-states-hover-icon: #999999;
-$tags-light-color-scheme-second-states-focused: #338FCC;
-$tags-light-color-scheme-second-states-disabled-text: mix(#B3B3B3, transparent, 50%);
-$tags-light-color-scheme-second-states-disabled-background: mix(#B3B3B3, transparent, 10%);
-$tags-light-color-scheme-error-background: #FADEDA;
-$tags-light-color-scheme-error-border: #FADEDA;
-$tags-light-color-scheme-error-icon: mix(#E76E5C, rgba(black, 0.05));
-$tags-light-color-scheme-error-states-hover-icon: #E04D36;
-$tags-light-color-scheme-error-states-focused: #E76E5C;
-$tags-light-color-scheme-error-states-disabled-text: mix(#E76E5C, transparent, 50%);
-$tags-light-color-scheme-error-states-disabled-background: mix(#E76E5C, transparent, 10%);
-$tags-dark-color-scheme-primary-background: #114E77;
-$tags-dark-color-scheme-primary-border: #114E77;
-$tags-dark-color-scheme-primary-icon: mix(#57A4D7, rgba(black, 0.05));
-$tags-dark-color-scheme-primary-states-hover-icon: #338FCC;
-$tags-dark-color-scheme-primary-states-focused: #57A4D7;
-$tags-dark-color-scheme-primary-states-disabled-text: mix(#57A4D7, transparent, 50%);
-$tags-dark-color-scheme-primary-states-disabled-background: mix(#57A4D7, transparent, 10%);
-$tags-dark-color-scheme-second-background: #4D4D4D;
-$tags-dark-color-scheme-second-border: #4D4D4D;
-$tags-dark-color-scheme-second-icon: mix(#999999, rgba(black, 0.05));
-$tags-dark-color-scheme-second-states-hover-icon: #E6E6E6;
-$tags-dark-color-scheme-second-states-focused: #57A4D7;
-$tags-dark-color-scheme-second-states-disabled-text: mix(#999999, transparent, 50%);
-$tags-dark-color-scheme-second-states-disabled-background: mix(#999999, transparent, 10%);
-$tags-dark-color-scheme-error-background: #832112;
-$tags-dark-color-scheme-error-border: #832112;
-$tags-dark-color-scheme-error-icon: mix(#E76E5C, rgba(black, 0.05));
-$tags-dark-color-scheme-error-states-hover-icon: #F4B7AE;
-$tags-dark-color-scheme-error-states-focused: #E76E5C;
-$tags-dark-color-scheme-error-states-disabled-text: mix(#E76E5C, transparent, 50%);
-$tags-dark-color-scheme-error-states-disabled-background: mix(#E76E5C, transparent, 10%);
+$vertical-tabs-light-color-scheme-state-normal-background: transparent;
+$vertical-tabs-light-color-scheme-state-selected-background: #e7f1ff;
+$vertical-tabs-light-color-scheme-state-hover-background: rgba(black, 0.05);
+$vertical-tabs-light-color-scheme-state-hover-selected-background: adjust-color(#e7f1ff, $saturation:-22%, $lightness:-5%);
+$vertical-tabs-dark-color-scheme-state-normal-background: transparent;
+$vertical-tabs-dark-color-scheme-state-selected-background: #014b9d;
+$vertical-tabs-dark-color-scheme-state-hover-background: rgba(black, 0.05);
+$vertical-tabs-dark-color-scheme-state-hover-selected-background: adjust-color(#014b9d, $lightness:-1%);
+$tags-light-color-scheme-primary-background: #e7f1ff;
+$tags-light-color-scheme-primary-border: #e7f1ff;
+$tags-light-color-scheme-primary-text: #0374eb;
+$tags-light-color-scheme-primary-icon: mix(#5697ff, rgba(black, 0.05));
+$tags-light-color-scheme-primary-states-hover-icon: #0059b8;
+$tags-light-color-scheme-primary-states-focused: #0374eb;
+$tags-light-color-scheme-primary-states-disabled-text: mix(#0374eb, transparent, 50%);
+$tags-light-color-scheme-primary-states-disabled-background: mix(#0374eb, transparent, 10%);
+$tags-light-color-scheme-second-background: #d7dee4;
+$tags-light-color-scheme-second-border: #d7dee4;
+$tags-light-color-scheme-second-text: #19252f;
+$tags-light-color-scheme-second-icon: mix(#8c99a5, rgba(black, 0.05));
+$tags-light-color-scheme-second-states-hover-icon: #515e69;
+$tags-light-color-scheme-second-states-focused: #0374eb;
+$tags-light-color-scheme-second-states-disabled-text: mix(#8c99a5, transparent, 50%);
+$tags-light-color-scheme-second-states-disabled-background: mix(#8c99a5, transparent, 10%);
+$tags-light-color-scheme-error-background: #ffeaea;
+$tags-light-color-scheme-error-border: #ffeaea;
+$tags-light-color-scheme-error-text: #db3c55;
+$tags-light-color-scheme-error-icon: mix(#ee6f79, rgba(black, 0.05));
+$tags-light-color-scheme-error-states-hover-icon: #db3c55;
+$tags-light-color-scheme-error-states-focused: #db3c55;
+$tags-light-color-scheme-error-states-disabled-text: mix(#ea5868, transparent, 50%);
+$tags-light-color-scheme-error-states-disabled-background: mix(#ea5868, transparent, 10%);
+$tags-dark-color-scheme-primary-background: #023c7f;
+$tags-dark-color-scheme-primary-border: #023c7f;
+$tags-dark-color-scheme-primary-text: #a2c7fe;
+$tags-dark-color-scheme-primary-icon: mix(#a2c7fe, rgba(black, 0.05));
+$tags-dark-color-scheme-primary-states-hover-icon: #0374eb;
+$tags-dark-color-scheme-primary-states-focused: #4187ff;
+$tags-dark-color-scheme-primary-states-disabled-text: mix(#5697ff, transparent, 50%);
+$tags-dark-color-scheme-primary-states-disabled-background: mix(#5697ff, transparent, 10%);
+$tags-dark-color-scheme-second-background: #333f4a;
+$tags-dark-color-scheme-second-border: #333f4a;
+$tags-dark-color-scheme-second-text: #bdc7d1;
+$tags-dark-color-scheme-second-icon: mix(#8c99a5, rgba(black, 0.05));
+$tags-dark-color-scheme-second-states-hover-icon: #d7dee4;
+$tags-dark-color-scheme-second-states-focused: #4187ff;
+$tags-dark-color-scheme-second-states-disabled-text: mix(#7f8c98, transparent, 50%);
+$tags-dark-color-scheme-second-states-disabled-background: mix(#7f8c98, transparent, 10%);
+$tags-dark-color-scheme-error-background: #800025;
+$tags-dark-color-scheme-error-border: #800025;
+$tags-dark-color-scheme-error-text: #fcb2b4;
+$tags-dark-color-scheme-error-icon: mix(#ee6f79, rgba(black, 0.05));
+$tags-dark-color-scheme-error-states-hover-icon: #ee6f79;
+$tags-dark-color-scheme-error-states-focused: #b9023a;
+$tags-dark-color-scheme-error-states-disabled-text: mix(#ea5868, transparent, 50%);
+$tags-dark-color-scheme-error-states-disabled-background: mix(#ea5868, transparent, 10%);
 $tags-size-margin: 2px;
 $tags-size-height: 24px;
 $tags-size-border-width: 1px;
@@ -840,16 +965,24 @@ $textarea-size-padding: 5px 16px;
 $textarea-font-default: body;
 $textarea-font-mono: body-mono;
 $timepicker-size-padding-right: 16px;
-$toggle-light-color-scheme-border: #B3B3B3;
-$toggle-light-color-scheme-background: linear-gradient(to bottom, #E6E6E6, #F0F0F0);
-$toggle-light-color-scheme-circle-border: #B3B3B3;
-$toggle-light-color-scheme-circle-background: linear-gradient(to bottom, white, #E6E6E6);
-$toggle-light-color-scheme-states-focused-shadow: inset 0 0 0 1px white, 0 0 0 2px #338FCC;
-$toggle-dark-color-scheme-border: #808080;
-$toggle-dark-color-scheme-background: #333333;
-$toggle-dark-color-scheme-circle-border: #808080;
-$toggle-dark-color-scheme-circle-background: white;
-$toggle-dark-color-scheme-states-focused-shadow: inset 0 0 0 1px #333333, 0 0 0 2px #57A4D7;
+$toggle-light-color-scheme-border: #bdc7d1;
+$toggle-light-color-scheme-background: white;
+$toggle-light-color-scheme-circle-border: #bdc7d1;
+$toggle-light-color-scheme-circle-background: #d7dee4;
+$toggle-light-color-scheme-states-focused-shadow: inset 0 0 0 1px white, 0 0 0 2px #0374eb;
+$toggle-light-color-scheme-primary-checked-border-color: #0374eb;
+$toggle-light-color-scheme-primary-checked-background: #0374eb;
+$toggle-light-color-scheme-error-checked-border-color: #db3c55;
+$toggle-light-color-scheme-error-checked-background: #db3c55;
+$toggle-dark-color-scheme-border: #515e69;
+$toggle-dark-color-scheme-background: #19252f;
+$toggle-dark-color-scheme-circle-border: #515e69;
+$toggle-dark-color-scheme-circle-background: #6d7a86;
+$toggle-dark-color-scheme-states-focused-shadow: inset 0 0 0 1px #19252f, 0 0 0 2px #4187ff;
+$toggle-dark-color-scheme-primary-checked-border-color: #0059b8;
+$toggle-dark-color-scheme-primary-checked-background: #0059b8;
+$toggle-dark-color-scheme-error-checked-border-color: #b9023a;
+$toggle-dark-color-scheme-error-checked-background: #b9023a;
 $toggle-size-height: 16px;
 $toggle-size-width: 28px;
 $toggle-size-border-radius: 9px;
@@ -859,20 +992,20 @@ $toggle-small-size-height: 14px;
 $toggle-small-size-width: 24px;
 $toggle-small-size-border-radius: 8px;
 $toggle-small-font-default: caption;
-$tooltip-light-color-scheme-background: #4D4D4D;
-$tooltip-light-color-scheme-text: white;
+$tooltip-light-color-scheme-background: #333f4a;
+$tooltip-light-color-scheme-text: #f2f5f9;
 $tooltip-light-color-scheme-border: transparent;
-$tooltip-light-color-scheme-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
-$tooltip-light-color-scheme-warning-background: #FCF5E8;
-$tooltip-light-color-scheme-warning-text: #4D4D4D;
-$tooltip-light-color-scheme-warning-border: #F0D49B;
-$tooltip-dark-color-scheme-background: #F5F5F5;
-$tooltip-dark-color-scheme-text: #4D4D4D;
+$tooltip-light-color-scheme-shadow: 0 2px 4px 0 rgba(39, 51, 62, 0.2);
+$tooltip-light-color-scheme-warning-background: #fff4dd;
+$tooltip-light-color-scheme-warning-text: #19252f;
+$tooltip-light-color-scheme-warning-border: #fcdda6;
+$tooltip-dark-color-scheme-background: white;
+$tooltip-dark-color-scheme-text: #19252f;
 $tooltip-dark-color-scheme-border: transparent;
-$tooltip-dark-color-scheme-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
-$tooltip-dark-color-scheme-warning-background: #FCF5E8;
-$tooltip-dark-color-scheme-warning-text: #4D4D4D;
-$tooltip-dark-color-scheme-warning-border: #F0D49B;
+$tooltip-dark-color-scheme-shadow: 0 2px 4px 0 rgba(39, 51, 62, 0.2);
+$tooltip-dark-color-scheme-warning-background: #7e5406;
+$tooltip-dark-color-scheme-warning-text: #f2f5f9;
+$tooltip-dark-color-scheme-warning-border: #7e5406;
 $tooltip-size-max-width: 300px;
 $tooltip-size-border-width: 1px;
 $tooltip-size-border-radius: 3px;
@@ -881,25 +1014,25 @@ $tooltip-size-arrow-size: 12px;
 $tooltip-size-trigger-margin: 9px;
 $tooltip-font-default: caption;
 $extended-tooltip-light-color-scheme-background: white;
-$extended-tooltip-light-color-scheme-text: #4D4D4D;
-$extended-tooltip-light-color-scheme-border: #B3B3B3;
-$extended-tooltip-light-color-scheme-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
-$extended-tooltip-dark-color-scheme-background: #4D4D4D;
-$extended-tooltip-dark-color-scheme-text: #F0F0F0;
-$extended-tooltip-dark-color-scheme-border: #999999;
-$extended-tooltip-dark-color-scheme-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
+$extended-tooltip-light-color-scheme-text: #19252f;
+$extended-tooltip-light-color-scheme-border: #d7dee4;
+$extended-tooltip-light-color-scheme-shadow: 0 2px 4px 0 rgba(39, 51, 62, 0.2);
+$extended-tooltip-dark-color-scheme-background: #333f4a;
+$extended-tooltip-dark-color-scheme-text: #f2f5f9;
+$extended-tooltip-dark-color-scheme-border: #333f4a;
+$extended-tooltip-dark-color-scheme-shadow: 0 2px 4px 0 rgba(39, 51, 62, 0.2);
 $extended-tooltip-size-border-radius: 3px;
 $extended-tooltip-size-arrow-size: 12px;
 $extended-tooltip-size-trigger-margin: 9px;
 $extended-tooltip-size-padding: 8px 16px;
 $extended-tooltip-size-max-height: 480px;
 $extended-tooltip-font-default: caption;
-$extended-tooltip-header-light-color-scheme-border: #E6E6E6;
-$extended-tooltip-header-light-color-scheme-text: #4D4D4D;
+$extended-tooltip-header-light-color-scheme-border: #d7dee4;
+$extended-tooltip-header-light-color-scheme-text: #19252f;
 $extended-tooltip-header-light-color-scheme-background: white;
-$extended-tooltip-header-dark-color-scheme-border: #F0F0F0;
-$extended-tooltip-header-dark-color-scheme-text: #F0F0F0;
-$extended-tooltip-header-dark-color-scheme-background: #4D4D4D;
+$extended-tooltip-header-dark-color-scheme-border: #434f5a;
+$extended-tooltip-header-dark-color-scheme-text: #f2f5f9;
+$extended-tooltip-header-dark-color-scheme-background: #333f4a;
 $extended-tooltip-header-size-height: 40px;
 $extended-tooltip-header-size-padding: 10px 16px;
 $extended-tooltip-header-font-default: subheading;
@@ -908,19 +1041,20 @@ $tree-size-padding-left: 8px;
 $tree-size-padding-right: 16px;
 $tree-font-node: body;
 $light-color-scheme-primary-palette: (
-40: #F5FAFD,
-60: #EBF4FB,
-100: #D8EAF7,
-200: #AAD1EC,
-300: #7FBAE1,
-400: #57A4D7,
-500: #338FCC,
-560: #277BB3,
-600: #206EA2,
-700: #114E77,
-800: #07314D,
-A100: rgba(0, 153, 255, 0.15),
-A200: rgba(0, 153, 255, 0.3),
+40: #eff6ff,
+60: #e7f1ff,
+100: #c8dfff,
+200: #a2c7fe,
+300: #5697ff,
+400: #4187ff,
+500: #0374eb,
+560: #0059b8,
+600: #014b9d,
+700: #023c7f,
+800: #193060,
+900: #00224f,
+A100: rgba(3, 116, 235, 0.15),
+A200: rgba(3, 116, 235, 0.3),
 contrast: (
 40: #4D4D4D,
 60: #4D4D4D,
@@ -940,23 +1074,24 @@ A200: white,
 );
 
 $light-color-scheme-second-palette: (
-40: #F5F5F5,
-60: #F0F0F0,
-100: #E6E6E6,
-200: #CCCCCC,
-300: #B3B3B3,
-400: #999999,
-500: #808080,
-560: #707070,
-600: #666666,
-700: #4D4D4D,
-800: #333333,
-A40: rgba(0, 0, 0, 0.04),
-A60: rgba(0, 0, 0, 0.06),
-A100: rgba(0, 0, 0, 0.1),
-A200: rgba(0, 0, 0, 0.2),
-A300: rgba(0, 0, 0, 0.3),
-A500: rgba(0, 0, 0, 0.5),
+40: #f2f5f9,
+60: #ebeef2,
+100: #d7dee4,
+200: #bdc7d1,
+300: #8c99a5,
+400: #7f8c98,
+500: #6d7a86,
+560: #515e69,
+600: #434f5a,
+700: #333f4a,
+800: #27333e,
+900: #19252f,
+A40: rgba(25, 37, 47, 0.04),
+A60: rgba(25, 37, 47, 0.06),
+A100: rgba(25, 37, 47, 0.1),
+A200: rgba(25, 37, 47, 0.2),
+A300: rgba(25, 37, 47, 0.3),
+A500: rgba(25, 37, 47, 0.5),
 contrast: (
 40: #4D4D4D,
 60: #4D4D4D,
@@ -974,18 +1109,19 @@ contrast: (
 );
 
 $light-color-scheme-error-palette: (
-40: #FEF7F6,
-60: #FCEFEC,
-100: #FADEDA,
-200: #F4B7AE,
-300: #ED9284,
-400: #E76E5C,
-500: #E04D36,
-560: #C43E29,
-600: #B23522,
-700: #832112,
-800: #541208,
-A100: rgba(224, 79, 56, 0.15),
+40: #fff3f3,
+60: #ffeaea,
+100: #fbd6d6,
+200: #fcb2b4,
+300: #ee6f79,
+400: #ea5868,
+500: #db3c55,
+560: #b9023a,
+600: #9e0130,
+700: #800025,
+800: #621420,
+900: #500013,
+A100: rgba(219, 60, 85, 0.15),
 contrast: (
 40: #4D4D4D,
 60: #4D4D4D,
@@ -1004,19 +1140,18 @@ A100: #4D4D4D,
 );
 
 $light-color-scheme-info-palette: (
-40: #F5FAFD,
-60: #EBF4FB,
-100: #D8EAF7,
-200: #AAD1EC,
-300: #7FBAE1,
-400: #57A4D7,
-500: #338FCC,
-560: #277BB3,
-600: #206EA2,
-700: #114E77,
-800: #07314D,
-A100: rgba(0, 153, 255, 0.15),
-A200: rgba(0, 153, 255, 0.3),
+40: #ebf8fd,
+60: #d9f3fd,
+100: #afe6f9,
+200: #6ed3f2,
+300: #18a5c5,
+400: #2099b7,
+500: #218ca8,
+560: #0c6579,
+600: #0c5567,
+700: #084453,
+800: #143641,
+900: #022731,
 contrast: (
 40: #4D4D4D,
 60: #4D4D4D,
@@ -1036,18 +1171,19 @@ A200: white,
 );
 
 $light-color-scheme-success-palette: (
-40: #F6FBF4,
-60: #EDF8E9,
-100: #DCF1D4,
-200: #B4DEA4,
-300: #8FCC79,
-400: #6FBA53,
-500: #52A832,
-560: #449327,
-600: #3B8520,
-700: #276211,
-800: #163F07,
-A100: rgba(68, 255, 0, 0.15),
+40: #ecf9ef,
+60: #d2f7db,
+100: #b6ebc3,
+200: #8ed5a1,
+300: #4ba96c,
+400: #319d5c,
+500: #028b49,
+560: #016b37,
+600: #015a2d,
+700: #004823,
+800: #103920,
+900: #002a12,
+A100: rgba(2, 139, 73, 0.15),
 contrast: (
 40: #4D4D4D,
 60: #4D4D4D,
@@ -1066,18 +1202,19 @@ A100: #4D4D4D,
 );
 
 $light-color-scheme-warning-palette: (
-40: #FDFAF3,
-60: #FCF5E8,
-100: #F8EBD1,
-200: #F0D49B,
-300: #E7BD68,
-400: #DFA739,
-500: #D6930D,
-560: #BB800A,
-600: #AA7408,
-700: #7D5504,
-800: #503602,
-A100: rgba(255, 170, 0, 0.15),
+40: #fff4dd,
+60: #ffecce,
+100: #fcdda6,
+200: #f5c23c,
+300: #e19f12,
+400: #c78816,
+500: #a26e0c,
+560: #7e5406,
+600: #6b4804,
+700: #543803,
+800: #3e3015,
+900: #312001,
+A100: rgba(255, 159, 18, 0.15),
 contrast: (
 40: #4D4D4D,
 60: #4D4D4D,
@@ -1096,19 +1233,20 @@ A100: #4D4D4D,
 );
 
 $dark-color-scheme-primary-palette: (
-40: #F5FAFD,
-60: #EBF4FB,
-100: #D8EAF7,
-200: #AAD1EC,
-300: #7FBAE1,
-400: #57A4D7,
-500: #338FCC,
-560: #277BB3,
-600: #206EA2,
-700: #114E77,
-800: #07314D,
-A100: rgba(0, 153, 255, 0.15),
-A200: rgba(0, 153, 255, 0.3),
+40: #eff6ff,
+60: #e7f1ff,
+100: #c8dfff,
+200: #a2c7fe,
+300: #5697ff,
+400: #4187ff,
+500: #0374eb,
+560: #0059b8,
+600: #014b9d,
+700: #023c7f,
+800: #193060,
+900: #00224f,
+A100: rgba(3, 116, 235, 0.15),
+A200: rgba(3, 116, 235, 0.3),
 contrast: (
 40: #4D4D4D,
 60: #4D4D4D,
@@ -1128,23 +1266,24 @@ A200: white,
 );
 
 $dark-color-scheme-second-palette: (
-40: #F5F5F5,
-60: #F0F0F0,
-100: #E6E6E6,
-200: #CCCCCC,
-300: #B3B3B3,
-400: #999999,
-500: #808080,
-560: #707070,
-600: #666666,
-700: #4D4D4D,
-800: #333333,
-A40: rgba(0, 0, 0, 0.04),
-A60: rgba(0, 0, 0, 0.06),
-A100: rgba(0, 0, 0, 0.1),
-A200: rgba(0, 0, 0, 0.2),
-A300: rgba(0, 0, 0, 0.3),
-A500: rgba(0, 0, 0, 0.5),
+40: #f2f5f9,
+60: #ebeef2,
+100: #d7dee4,
+200: #bdc7d1,
+300: #8c99a5,
+400: #7f8c98,
+500: #6d7a86,
+560: #515e69,
+600: #434f5a,
+700: #333f4a,
+800: #27333e,
+900: #19252f,
+A40: rgba(25, 37, 47, 0.04),
+A60: rgba(25, 37, 47, 0.06),
+A100: rgba(25, 37, 47, 0.1),
+A200: rgba(25, 37, 47, 0.2),
+A300: rgba(25, 37, 47, 0.3),
+A500: rgba(25, 37, 47, 0.5),
 contrast: (
 40: #4D4D4D,
 60: #4D4D4D,
@@ -1162,18 +1301,19 @@ contrast: (
 );
 
 $dark-color-scheme-error-palette: (
-40: #FEF7F6,
-60: #FCEFEC,
-100: #FADEDA,
-200: #F4B7AE,
-300: #ED9284,
-400: #E76E5C,
-500: #E04D36,
-560: #C43E29,
-600: #B23522,
-700: #832112,
-800: #541208,
-A100: rgba(224, 79, 56, 0.15),
+40: #fff3f3,
+60: #ffeaea,
+100: #fbd6d6,
+200: #fcb2b4,
+300: #ee6f79,
+400: #ea5868,
+500: #db3c55,
+560: #b9023a,
+600: #9e0130,
+700: #800025,
+800: #621420,
+900: #500013,
+A100: rgba(219, 60, 85, 0.15),
 contrast: (
 40: #4D4D4D,
 60: #4D4D4D,
@@ -1192,19 +1332,18 @@ A100: #4D4D4D,
 );
 
 $dark-color-scheme-info-palette: (
-40: #F5FAFD,
-60: #EBF4FB,
-100: #D8EAF7,
-200: #AAD1EC,
-300: #7FBAE1,
-400: #57A4D7,
-500: #338FCC,
-560: #277BB3,
-600: #206EA2,
-700: #114E77,
-800: #07314D,
-A100: rgba(0, 153, 255, 0.15),
-A200: rgba(0, 153, 255, 0.3),
+40: #ebf8fd,
+60: #d9f3fd,
+100: #afe6f9,
+200: #6ed3f2,
+300: #18a5c5,
+400: #2099b7,
+500: #218ca8,
+560: #0c6579,
+600: #0c5567,
+700: #084453,
+800: #143641,
+900: #022731,
 contrast: (
 40: #4D4D4D,
 60: #4D4D4D,
@@ -1224,18 +1363,19 @@ A200: white,
 );
 
 $dark-color-scheme-success-palette: (
-40: #F6FBF4,
-60: #EDF8E9,
-100: #DCF1D4,
-200: #B4DEA4,
-300: #8FCC79,
-400: #6FBA53,
-500: #52A832,
-560: #449327,
-600: #3B8520,
-700: #276211,
-800: #163F07,
-A100: rgba(68, 255, 0, 0.15),
+40: #ecf9ef,
+60: #d2f7db,
+100: #b6ebc3,
+200: #8ed5a1,
+300: #4ba96c,
+400: #319d5c,
+500: #028b49,
+560: #016b37,
+600: #015a2d,
+700: #004823,
+800: #103920,
+900: #002a12,
+A100: rgba(2, 139, 73, 0.15),
 contrast: (
 40: #4D4D4D,
 60: #4D4D4D,
@@ -1254,18 +1394,19 @@ A100: #4D4D4D,
 );
 
 $dark-color-scheme-warning-palette: (
-40: #FDFAF3,
-60: #FCF5E8,
-100: #F8EBD1,
-200: #F0D49B,
-300: #E7BD68,
-400: #DFA739,
-500: #D6930D,
-560: #BB800A,
-600: #AA7408,
-700: #7D5504,
-800: #503602,
-A100: rgba(255, 170, 0, 0.15),
+40: #fff4dd,
+60: #ffecce,
+100: #fcdda6,
+200: #f5c23c,
+300: #e19f12,
+400: #c78816,
+500: #a26e0c,
+560: #7e5406,
+600: #6b4804,
+700: #543803,
+800: #3e3015,
+900: #312001,
+A100: rgba(255, 159, 18, 0.15),
 contrast: (
 40: #4D4D4D,
 60: #4D4D4D,
@@ -1284,19 +1425,20 @@ A100: #4D4D4D,
 );
 
 $color-blue-palette: (
-40: #F5FAFD,
-60: #EBF4FB,
-100: #D8EAF7,
-200: #AAD1EC,
-300: #7FBAE1,
-400: #57A4D7,
-500: #338FCC,
-560: #277BB3,
-600: #206EA2,
-700: #114E77,
-800: #07314D,
-A100: rgba(0, 153, 255, 0.15),
-A200: rgba(0, 153, 255, 0.3),
+40: #eff6ff,
+60: #e7f1ff,
+100: #c8dfff,
+200: #a2c7fe,
+300: #5697ff,
+400: #4187ff,
+500: #0374eb,
+560: #0059b8,
+600: #014b9d,
+700: #023c7f,
+800: #193060,
+900: #00224f,
+A100: rgba(3, 116, 235, 0.15),
+A200: rgba(3, 116, 235, 0.3),
 contrast: (
 40: #4D4D4D,
 60: #4D4D4D,
@@ -1316,18 +1458,19 @@ A200: white,
 );
 
 $color-green-palette: (
-40: #F6FBF4,
-60: #EDF8E9,
-100: #DCF1D4,
-200: #B4DEA4,
-300: #8FCC79,
-400: #6FBA53,
-500: #52A832,
-560: #449327,
-600: #3B8520,
-700: #276211,
-800: #163F07,
-A100: rgba(68, 255, 0, 0.15),
+40: #ecf9ef,
+60: #d2f7db,
+100: #b6ebc3,
+200: #8ed5a1,
+300: #4ba96c,
+400: #319d5c,
+500: #028b49,
+560: #016b37,
+600: #015a2d,
+700: #004823,
+800: #103920,
+900: #002a12,
+A100: rgba(2, 139, 73, 0.15),
 contrast: (
 40: #4D4D4D,
 60: #4D4D4D,
@@ -1346,18 +1489,19 @@ A100: #4D4D4D,
 );
 
 $color-red-palette: (
-40: #FEF7F6,
-60: #FCEFEC,
-100: #FADEDA,
-200: #F4B7AE,
-300: #ED9284,
-400: #E76E5C,
-500: #E04D36,
-560: #C43E29,
-600: #B23522,
-700: #832112,
-800: #541208,
-A100: rgba(224, 79, 56, 0.15),
+40: #fff3f3,
+60: #ffeaea,
+100: #fbd6d6,
+200: #fcb2b4,
+300: #ee6f79,
+400: #ea5868,
+500: #db3c55,
+560: #b9023a,
+600: #9e0130,
+700: #800025,
+800: #621420,
+900: #500013,
+A100: rgba(219, 60, 85, 0.15),
 contrast: (
 40: #4D4D4D,
 60: #4D4D4D,
@@ -1376,23 +1520,24 @@ A100: #4D4D4D,
 );
 
 $color-grey-palette: (
-40: #F5F5F5,
-60: #F0F0F0,
-100: #E6E6E6,
-200: #CCCCCC,
-300: #B3B3B3,
-400: #999999,
-500: #808080,
-560: #707070,
-600: #666666,
-700: #4D4D4D,
-800: #333333,
-A40: rgba(0, 0, 0, 0.04),
-A60: rgba(0, 0, 0, 0.06),
-A100: rgba(0, 0, 0, 0.1),
-A200: rgba(0, 0, 0, 0.2),
-A300: rgba(0, 0, 0, 0.3),
-A500: rgba(0, 0, 0, 0.5),
+40: #f2f5f9,
+60: #ebeef2,
+100: #d7dee4,
+200: #bdc7d1,
+300: #8c99a5,
+400: #7f8c98,
+500: #6d7a86,
+560: #515e69,
+600: #434f5a,
+700: #333f4a,
+800: #27333e,
+900: #19252f,
+A40: rgba(25, 37, 47, 0.04),
+A60: rgba(25, 37, 47, 0.06),
+A100: rgba(25, 37, 47, 0.1),
+A200: rgba(25, 37, 47, 0.2),
+A300: rgba(25, 37, 47, 0.3),
+A500: rgba(25, 37, 47, 0.5),
 contrast: (
 40: #4D4D4D,
 60: #4D4D4D,
@@ -1410,18 +1555,19 @@ contrast: (
 );
 
 $color-yellow-palette: (
-40: #FDFAF3,
-60: #FCF5E8,
-100: #F8EBD1,
-200: #F0D49B,
-300: #E7BD68,
-400: #DFA739,
-500: #D6930D,
-560: #BB800A,
-600: #AA7408,
-700: #7D5504,
-800: #503602,
-A100: rgba(255, 170, 0, 0.15),
+40: #fff4dd,
+60: #ffecce,
+100: #fcdda6,
+200: #f5c23c,
+300: #e19f12,
+400: #c78816,
+500: #a26e0c,
+560: #7e5406,
+600: #6b4804,
+700: #543803,
+800: #3e3015,
+900: #312001,
+A100: rgba(255, 159, 18, 0.15),
 contrast: (
 40: #4D4D4D,
 60: #4D4D4D,
@@ -1439,59 +1585,121 @@ A100: #4D4D4D,
 )
 );
 
+$color-teal-palette: (
+40: #ebf8fd,
+60: #d9f3fd,
+100: #afe6f9,
+200: #6ed3f2,
+300: #18a5c5,
+400: #2099b7,
+500: #218ca8,
+560: #0c6579,
+600: #0c5567,
+700: #084453,
+800: #143641,
+900: #022731,
+contrast: (
+40: #4D4D4D,
+60: #4D4D4D,
+100: #4D4D4D,
+200: #4D4D4D,
+300: #4D4D4D,
+400: white,
+500: white,
+560: white,
+600: white,
+700: white,
+800: white,
+A100: #4D4D4D,
+A200: white,
+
+)
+);
+
+$color-purple-palette: (
+40: #fff3fb,
+60: #ffe9f8,
+100: #f2d4e8,
+200: #e4bbd7,
+300: #c692b5,
+400: #bb78a7,
+500: #a65d92,
+560: #864775,
+600: #753865,
+700: #612853,
+800: #48273f,
+900: #36172e,
+contrast: (
+40: #4D4D4D,
+60: #4D4D4D,
+100: #4D4D4D,
+200: #4D4D4D,
+300: #4D4D4D,
+400: white,
+500: white,
+560: white,
+600: white,
+700: white,
+800: white,
+A100: #4D4D4D,
+A200: white,
+
+)
+);
+
 $typography-display-1-font-size: 56px;
 $typography-display-1-line-height: 76px;
-$typography-display-1-letter-spacing: -0.4px;
+$typography-display-1-letter-spacing: normal;
 $typography-display-1-font-weight: normal;
-$typography-display-1-font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$typography-display-1-font-family: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
 $typography-display-1-text-transform: null;
 $typography-display-2-font-size: 45px;
 $typography-display-2-line-height: 56px;
 $typography-display-2-letter-spacing: normal;
 $typography-display-2-font-weight: normal;
-$typography-display-2-font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$typography-display-2-font-family: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
 $typography-display-2-text-transform: null;
 $typography-display-3-font-size: 34px;
 $typography-display-3-line-height: 44px;
-$typography-display-3-letter-spacing: 0.25px;
+$typography-display-3-letter-spacing: normal;
 $typography-display-3-font-weight: normal;
-$typography-display-3-font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$typography-display-3-font-family: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
 $typography-display-3-text-transform: null;
 $typography-headline-font-size: 24px;
 $typography-headline-line-height: 32px;
 $typography-headline-letter-spacing: normal;
 $typography-headline-font-weight: normal;
-$typography-headline-font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$typography-headline-font-family: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
 $typography-headline-text-transform: null;
 $typography-title-font-size: 20px;
 $typography-title-line-height: 28px;
-$typography-title-letter-spacing: 0.15px;
-$typography-title-font-weight: 500;
-$typography-title-font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$typography-title-letter-spacing: normal;
+$typography-title-font-weight: 600;
+$typography-title-font-family: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
 $typography-title-text-transform: null;
 $typography-subheading-font-size: 15px;
 $typography-subheading-line-height: 20px;
-$typography-subheading-letter-spacing: 0.15px;
-$typography-subheading-font-weight: 700;
-$typography-subheading-font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$typography-subheading-letter-spacing: -0.009em;
+$typography-subheading-font-weight: 600;
+$typography-subheading-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
 $typography-subheading-text-transform: null;
 $typography-body-font-size: 15px;
 $typography-body-line-height: 20px;
-$typography-body-letter-spacing: 0.15px;
+$typography-body-letter-spacing: -0.009em;
 $typography-body-font-weight: normal;
-$typography-body-font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$typography-body-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
 $typography-body-text-transform: null;
 $typography-body-strong-font-size: 15px;
 $typography-body-strong-line-height: 20px;
-$typography-body-strong-letter-spacing: 0.15px;
+$typography-body-strong-letter-spacing: -0.009em;
 $typography-body-strong-font-weight: 500;
-$typography-body-strong-font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$typography-body-strong-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
 $typography-body-strong-text-transform: null;
 $typography-body-caps-font-size: 15px;
 $typography-body-caps-line-height: 20px;
 $typography-body-caps-letter-spacing: 1.7px;
 $typography-body-caps-font-weight: normal;
-$typography-body-caps-font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$typography-body-caps-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
 $typography-body-caps-text-transform: uppercase;
 $typography-body-mono-font-size: 15px;
 $typography-body-mono-line-height: 20px;
@@ -1501,15 +1709,15 @@ $typography-body-mono-font-family: 'Roboto Mono', 'Consolas', 'Menlo', 'Monaco',
 $typography-body-mono-text-transform: null;
 $typography-caption-font-size: 13px;
 $typography-caption-line-height: 16px;
-$typography-caption-letter-spacing: 0.25px;
+$typography-caption-letter-spacing: -0.0025em;
 $typography-caption-font-weight: normal;
-$typography-caption-font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$typography-caption-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
 $typography-caption-text-transform: null;
 $typography-caption-caps-font-size: 13px;
 $typography-caption-caps-line-height: 16px;
 $typography-caption-caps-letter-spacing: 1.5px;
 $typography-caption-caps-font-weight: normal;
-$typography-caption-caps-font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$typography-caption-caps-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
 $typography-caption-caps-text-transform: uppercase;
 $typography-caption-mono-font-size: 13px;
 $typography-caption-mono-line-height: 16px;
@@ -1519,21 +1727,21 @@ $typography-caption-mono-font-family: 'Roboto Mono', 'Consolas', 'Menlo', 'Monac
 $typography-caption-mono-text-transform: null;
 $typography-small-text-font-size: 13px;
 $typography-small-text-line-height: 16px;
-$typography-small-text-letter-spacing: 0.25px;
+$typography-small-text-letter-spacing: -0.0025em;
 $typography-small-text-font-weight: normal;
-$typography-small-text-font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$typography-small-text-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
 $typography-small-text-text-transform: null;
 $typography-extra-small-text-font-size: 11px;
 $typography-extra-small-text-line-height: 16px;
-$typography-extra-small-text-letter-spacing: 0.22px;
+$typography-extra-small-text-letter-spacing: 0.005em;
 $typography-extra-small-text-font-weight: normal;
-$typography-extra-small-text-font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$typography-extra-small-text-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
 $typography-extra-small-text-text-transform: null;
 $typography-extra-small-text-caps-font-size: 11px;
 $typography-extra-small-text-caps-line-height: 16px;
 $typography-extra-small-text-caps-letter-spacing: 1px;
 $typography-extra-small-text-caps-font-weight: normal;
-$typography-extra-small-text-caps-font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$typography-extra-small-text-caps-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
 $typography-extra-small-text-caps-text-transform: uppercase;
 $typography-extra-small-text-mono-font-size: 11px;
 $typography-extra-small-text-mono-line-height: 16px;
@@ -2221,149 +2429,6 @@ $swift-linear: all $swift-linear-duration $swift-linear-timing-function !default
     }
 }
 
-// We want overlays to always appear over user content, so set a baseline
-// very high z-index for the overlay container, which is where we create the new
-// stacking context for all overlays.
-$overlay-container-z-index: 1000 !default;
-$overlay-z-index: 1000 !default;
-$overlay-backdrop-z-index: 1000 !default;
-
-// Background color for all of the backdrops
-$overlay-backdrop-color: rgba(0, 0, 0, 0.32) !default;
-
-// Default backdrop animation is based on the Material Design swift-ease-out.
-$backdrop-animation-duration: 400ms !default;
-$backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
-
-/// Emits structural styles required for cdk/overlay to function.
-@mixin overlay() {
-  .cdk-overlay-container, .cdk-global-overlay-wrapper {
-    // Disable events from being captured on the overlay container.
-    pointer-events: none;
-
-    // The container should be the size of the viewport.
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 100%;
-  }
-
-  // The overlay-container is an invisible element which contains all individual overlays.
-  .cdk-overlay-container {
-    position: fixed;
-    z-index: $overlay-container-z-index;
-
-    &:empty {
-      // Hide the element when it doesn't have any child nodes. This doesn't
-      // include overlays that have been detached, rather than disposed.
-      display: none;
-    }
-  }
-
-  // We use an extra wrapper element in order to use make the overlay itself a flex item.
-  // This makes centering the overlay easy without running into the subpixel rendering
-  // problems tied to using `transform` and without interfering with the other position
-  // strategies.
-  .cdk-global-overlay-wrapper {
-    display: flex;
-    position: absolute;
-    z-index: $overlay-z-index;
-  }
-
-  // A single overlay pane.
-  .cdk-overlay-pane {
-    // Note: it's important for this one to start off `absolute`,
-    // in order for us to be able to measure it correctly.
-    position: absolute;
-    pointer-events: auto;
-    box-sizing: border-box;
-    z-index: $overlay-z-index;
-
-    // For connected-position overlays, we set `display: flex` in
-    // order to force `max-width` and `max-height` to take effect.
-    display: flex;
-    max-width: 100%;
-    max-height: 100%;
-  }
-
-  .cdk-overlay-backdrop {
-    // TODO(jelbourn): reuse sidenav fullscreen mixin.
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-
-    z-index: $overlay-backdrop-z-index;
-    pointer-events: auto;
-    -webkit-tap-highlight-color: transparent;
-    transition: opacity $backdrop-animation-duration $backdrop-animation-timing-function;
-    opacity: 0;
-
-    &.cdk-overlay-backdrop-showing {
-      opacity: 1;
-
-      // Note that we can't import and use the `high-contrast` mixin from `_a11y.scss`, because
-      // this file will be copied to the top-level `cdk` package when putting together the files
-      // for npm. Any relative import paths we use here will become invalid once the file is copied.
-      .cdk-high-contrast-active & {
-        // In high contrast mode the rgba background will become solid
-        // so we need to fall back to making it opaque using `opacity`.
-        opacity: 0.6;
-      }
-    }
-  }
-
-  .cdk-overlay-dark-backdrop {
-    background: $overlay-backdrop-color;
-  }
-
-  .cdk-overlay-transparent-backdrop {
-    // Note: as of Firefox 57, having the backdrop be `background: none` will prevent it from
-    // capturing the user's mouse scroll events. Since we also can't use something like
-    // `rgba(0, 0, 0, 0)`, we work around the inconsistency by not setting the background at
-    // all and using `opacity` to make the element transparent.
-    &, &.cdk-overlay-backdrop-showing {
-      opacity: 0;
-    }
-  }
-
-  // Overlay parent element used with the connected position strategy. Used to constrain the
-  // overlay element's size to fit within the viewport.
-  .cdk-overlay-connected-position-bounding-box {
-    position: absolute;
-    z-index: $overlay-z-index;
-
-    // We use `display: flex` on this element exclusively for centering connected overlays.
-    // When *not* centering, a top/left/bottom/right will be set which overrides the normal
-    // flex layout.
-    display: flex;
-
-    // We use the `column` direction here to avoid some flexbox issues in Edge
-    // when using the "grow after open" options.
-    flex-direction: column;
-
-    // Add some dimensions so the element has an `innerText` which some people depend on in tests.
-    min-width: 1px;
-    min-height: 1px;
-  }
-
-  // Used when disabling global scrolling.
-  .cdk-global-scrollblock {
-    position: fixed;
-
-    // Necessary for the content not to lose its width. Note that we're using 100%, instead of
-    // 100vw, because 100vw includes the width plus the scrollbar, whereas 100% is the width
-    // that the element had before we made it `fixed`.
-    width: 100%;
-
-    // Note: this will always add a scrollbar to whatever element it is on, which can
-    // potentially result in double scrollbars. It shouldn't be an issue, because we won't
-    // block scrolling on a page that doesn't have a scrollbar in the first place.
-    overflow-y: scroll;
-  }
-}
-
 
 
 
@@ -2558,6 +2623,11 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
         state-selected-background: $datepicker-body-light-color-scheme-states-selected-background
     );
 
+    $dl: (
+        dt: $description-list-light-color-scheme-dt,
+        dd: $description-list-light-color-scheme-dd
+    );
+
     $form-field: (
         border: $form-field-light-color-scheme-border,
         background: $form-field-light-color-scheme-background,
@@ -2567,6 +2637,17 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
         state-invalid-background: $form-field-light-color-scheme-states-invalid-background
     );
 
+    $form-field-password-hint: (
+        text-color: $form-field-password-hint-light-color-scheme-text-color,
+        icon-color: $form-field-password-hint-light-color-scheme-text-color,
+
+        state-invalid-text-color: $form-field-password-hint-light-color-scheme-states-invalid-text-color,
+        state-invalid-icon-color: $form-field-password-hint-light-color-scheme-states-invalid-icon-color,
+
+        state-valid-text-color: $form-field-password-hint-light-color-scheme-states-valid-text-color,
+        state-valid-icon-color: $form-field-password-hint-light-color-scheme-states-valid-icon-color
+    );
+
     $forms: (
         label: $forms-light-color-scheme-label,
         legend: $forms-light-color-scheme-legend,
@@ -2590,8 +2671,10 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
     $modal: (
         background-mask: $modal-light-color-scheme-background-mask,
         shadow: $modal-light-color-scheme-shadow,
+        header-border: $modal-header-light-color-scheme-border,
         body-top-shadow: $modal-light-color-scheme-body-top-shadow,
-        body-bottom-shadow: $modal-light-color-scheme-body-bottom-shadow
+        body-bottom-shadow: $modal-light-color-scheme-body-bottom-shadow,
+        footer-border: $modal-footer-light-color-scheme-border
     );
 
     $navbar: (
@@ -2605,6 +2688,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
         icon-color: $navbar-item-light-color-scheme-icon,
 
         state-active: $navbar-item-light-color-scheme-states-active,
+        state-selected: $navbar-item-light-color-scheme-states-selected,
         state-hover: $navbar-item-light-color-scheme-states-hover,
         state-progress: $navbar-item-light-color-scheme-states-progress,
         state-disabled-opacity: $navbar-item-light-color-scheme-states-disabled-opacity,
@@ -2650,35 +2734,57 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
 
     $tabs: (
         border: $tabs-light-color-scheme-border,
-        state-active: $tabs-light-color-scheme-state-active,
-        state-disabled-overlay: $tabs-light-color-scheme-state-disabled-overlay
+        state-normal-icon: $tabs-light-color-scheme-state-normal-icon,
+        state-normal-text: $tabs-light-color-scheme-state-normal-text,
+
+        state-hover-icon: $tabs-light-color-scheme-state-hover-icon,
+        state-hover-text: $tabs-light-color-scheme-state-hover-text,
+
+        state-active-marker: $tabs-light-color-scheme-state-active-marker-color,
+
+        state-empty-icon: $tabs-light-color-scheme-state-empty-icon,
+        state-empty-text: $tabs-light-color-scheme-state-empty-text,
+
+        state-disabled-icon: $tabs-light-color-scheme-state-disabled-icon,
+        state-disabled-text: $tabs-light-color-scheme-state-disabled-text,
+        state-disabled-marker-opacity: $tabs-light-color-scheme-state-disabled-marker-opacity
+    );
+
+    $vertical-tabs: (
+        state-normal-background: $vertical-tabs-light-color-scheme-state-normal-background,
+        state-selected-background: $vertical-tabs-light-color-scheme-state-selected-background,
+        state-hover-background: $vertical-tabs-light-color-scheme-state-hover-background,
+        state-hover-selected-background: $vertical-tabs-light-color-scheme-state-hover-selected-background
     );
 
     $tags: (
         primary: (
             border: $tags-light-color-scheme-primary-border,
+            text: $tags-light-color-scheme-primary-text,
             background: $tags-light-color-scheme-primary-background,
             background_disabled: $tags-light-color-scheme-primary-states-disabled-background,
             icon: $tags-light-color-scheme-primary-icon,
-            icon_hover: $tags-light-color-scheme-primary-states-hover-icon,
+            icon_hovered: $tags-light-color-scheme-primary-states-hover-icon,
             focused: $tags-light-color-scheme-primary-states-focused,
             disabled: $tags-light-color-scheme-primary-states-disabled-text
         ),
         second: (
             border: $tags-light-color-scheme-second-border,
+            text: $tags-light-color-scheme-second-text,
             background: $tags-light-color-scheme-second-background,
             background_disabled: $tags-light-color-scheme-second-states-disabled-background,
             icon: $tags-light-color-scheme-second-icon,
-            icon_hover: $tags-light-color-scheme-second-states-hover-icon,
+            icon_hovered: $tags-light-color-scheme-second-states-hover-icon,
             focused: $tags-light-color-scheme-second-states-focused,
             disabled: $tags-light-color-scheme-second-states-disabled-text
         ),
         error: (
             border: $tags-light-color-scheme-error-border,
+            text: $tags-light-color-scheme-error-text,
             background: $tags-light-color-scheme-error-background,
             background_disabled: $tags-light-color-scheme-error-states-disabled-background,
             icon: $tags-light-color-scheme-error-icon,
-            icon_hover: $tags-light-color-scheme-error-states-hover-icon,
+            icon_hovered: $tags-light-color-scheme-error-states-hover-icon,
             focused: $tags-light-color-scheme-error-states-focused,
             disabled: $tags-light-color-scheme-error-states-disabled-text
         )
@@ -2691,7 +2797,16 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
         circle_border: $toggle-light-color-scheme-circle-border,
         circle_background: $toggle-light-color-scheme-circle-background,
 
-        focused: $toggle-light-color-scheme-states-focused-shadow
+        focused: $toggle-light-color-scheme-states-focused-shadow,
+
+        primary: (
+            checked_border: $toggle-light-color-scheme-primary-checked-border-color,
+            checked_background: $toggle-light-color-scheme-primary-checked-background,
+        ),
+        error: (
+            checked_border: $toggle-light-color-scheme-error-checked-border-color,
+            checked_background: $toggle-light-color-scheme-error-checked-background,
+        )
     );
 
     $tooltip: (
@@ -2723,7 +2838,9 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
         card: $card,
         checkbox: $checkbox,
         datepicker: $datepicker,
+        dl: $dl,
         form-field: $form-field,
+        form-field-password-hint: $form-field-password-hint,
         forms: $forms,
         link: $link,
         modal: $modal,
@@ -2734,6 +2851,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
         radio: $radio,
         sidepanel: $sidepanel,
         tabs: $tabs,
+        vertical-tabs: $vertical-tabs,
         tags: $tags,
         toggle: $toggle,
         tooltip: $tooltip
@@ -2929,6 +3047,11 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
         state-selected-background: $datepicker-body-dark-color-scheme-states-selected-background
     );
 
+    $dl: (
+        dt: $description-list-dark-color-scheme-dt,
+        dd: $description-list-dark-color-scheme-dd
+    );
+
     $form-field: (
         border: $form-field-dark-color-scheme-border,
         background: $form-field-dark-color-scheme-background,
@@ -2938,6 +3061,17 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
         state-invalid-background: $form-field-dark-color-scheme-states-invalid-background
     );
 
+    $form-field-password-hint: (
+        text-color: $form-field-password-hint-dark-color-scheme-text-color,
+        icon-color: $form-field-password-hint-dark-color-scheme-text-color,
+
+        state-invalid-text-color: $form-field-password-hint-dark-color-scheme-states-invalid-text-color,
+        state-invalid-icon-color: $form-field-password-hint-dark-color-scheme-states-invalid-icon-color,
+
+        state-valid-text-color: $form-field-password-hint-dark-color-scheme-states-valid-text-color,
+        state-valid-icon-color: $form-field-password-hint-dark-color-scheme-states-valid-icon-color
+    );
+
     $forms: (
         label: $forms-dark-color-scheme-label,
         legend: $forms-dark-color-scheme-legend,
@@ -2961,8 +3095,10 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
     $modal: (
         background-mask: $modal-dark-color-scheme-background-mask,
         shadow: $modal-dark-color-scheme-shadow,
+        header-border: $modal-header-dark-color-scheme-border,
         body-top-shadow: $modal-dark-color-scheme-body-top-shadow,
-        body-bottom-shadow: $modal-dark-color-scheme-body-bottom-shadow
+        body-bottom-shadow: $modal-dark-color-scheme-body-bottom-shadow,
+        footer-border: $modal-footer-dark-color-scheme-border
     );
 
     $navbar: (
@@ -2976,6 +3112,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
         icon-color: $navbar-item-dark-color-scheme-icon,
 
         state-active: $navbar-item-dark-color-scheme-states-active,
+        state-selected: $navbar-item-dark-color-scheme-states-selected,
         state-hover: $navbar-item-dark-color-scheme-states-hover,
         state-progress: $navbar-item-dark-color-scheme-states-progress,
         state-disabled-opacity: $navbar-item-dark-color-scheme-states-disabled-opacity,
@@ -3021,13 +3158,33 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
 
     $tabs: (
         border: $tabs-dark-color-scheme-border,
-        state-active: $tabs-dark-color-scheme-state-active,
-        state-disabled-overlay: $tabs-dark-color-scheme-state-disabled-overlay
+        state-normal-icon: $tabs-dark-color-scheme-state-normal-icon,
+        state-normal-text: $tabs-dark-color-scheme-state-normal-text,
+
+        state-hover-icon: $tabs-dark-color-scheme-state-hover-icon,
+        state-hover-text: $tabs-dark-color-scheme-state-hover-text,
+
+        state-active-marker: $tabs-dark-color-scheme-state-active-marker-color,
+
+        state-empty-icon: $tabs-dark-color-scheme-state-empty-icon,
+        state-empty-text: $tabs-dark-color-scheme-state-empty-text,
+
+        state-disabled-icon: $tabs-dark-color-scheme-state-disabled-icon,
+        state-disabled-text: $tabs-dark-color-scheme-state-disabled-text,
+        state-disabled-marker-opacity: $tabs-dark-color-scheme-state-disabled-marker-opacity
+    );
+
+    $vertical-tabs: (
+        state-normal-background: $vertical-tabs-dark-color-scheme-state-normal-background,
+        state-selected-background: $vertical-tabs-dark-color-scheme-state-selected-background,
+        state-hover-background: $vertical-tabs-dark-color-scheme-state-hover-background,
+        state-hover-selected-background: $vertical-tabs-dark-color-scheme-state-hover-selected-background
     );
 
     $tags: (
         primary: (
             border: $tags-dark-color-scheme-primary-border,
+            text: $tags-dark-color-scheme-primary-text,
             background: $tags-dark-color-scheme-primary-background,
             background_disabled: $tags-dark-color-scheme-primary-states-disabled-background,
             icon: $tags-dark-color-scheme-primary-icon,
@@ -3037,6 +3194,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
         ),
         second: (
             border: $tags-dark-color-scheme-second-border,
+            text: $tags-dark-color-scheme-second-text,
             background: $tags-dark-color-scheme-second-background,
             background_disabled: $tags-dark-color-scheme-second-states-disabled-background,
             icon: $tags-dark-color-scheme-second-icon,
@@ -3046,6 +3204,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
         ),
         error: (
             border: $tags-dark-color-scheme-error-border,
+            text: $tags-dark-color-scheme-error-text,
             background: $tags-dark-color-scheme-error-background,
             background_disabled: $tags-dark-color-scheme-error-states-disabled-background,
             icon: $tags-dark-color-scheme-error-icon,
@@ -3062,7 +3221,16 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
         circle_border: $toggle-dark-color-scheme-circle-border,
         circle_background: $toggle-dark-color-scheme-circle-background,
 
-        focused: $toggle-dark-color-scheme-states-focused-shadow
+        focused: $toggle-dark-color-scheme-states-focused-shadow,
+
+        primary: (
+            checked_border: $toggle-dark-color-scheme-primary-checked-border-color,
+            checked_background: $toggle-dark-color-scheme-primary-checked-background,
+        ),
+        error: (
+            checked_border: $toggle-dark-color-scheme-error-checked-border-color,
+            checked_background: $toggle-dark-color-scheme-error-checked-background,
+        )
     );
 
     $tooltip: (
@@ -3094,7 +3262,9 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
         card: $card,
         checkbox: $checkbox,
         datepicker: $datepicker,
+        dl: $dl,
         form-field: $form-field,
+        form-field-password-hint: $form-field-password-hint,
         forms: $forms,
         link: $link,
         modal: $modal,
@@ -3105,6 +3275,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
         radio: $radio,
         sidepanel: $sidepanel,
         tabs: $tabs,
+        vertical-tabs: $vertical-tabs,
         tags: $tags,
         toggle: $toggle,
         tooltip: $tooltip
@@ -3272,12 +3443,11 @@ $dark-warning: mc-palette($dark-color-scheme-warning-palette, $dark-color-scheme
     $checkbox: map-get(map-get($theme, components), checkbox);
 
     .mc-pseudo-checkbox {
-        border-color: mc-color($second);
-        background-color: map-get($background, background);
+        border-color: map-get($checkbox, border);
 
         & .mc-checkbox-checkmark,
         & .mc-checkbox-mixedmark {
-            color: white;
+            color: map-get($background, background);
         }
 
         &.mc-checked,
@@ -3730,6 +3900,10 @@ $fonts: (
             @include mc-badge-color(map-get($badge, success_solid));
         }
 
+        &.mc-badge_info {
+            @include mc-badge-color(map-get($badge, info_solid));
+        }
+
         &.mc-badge_warning {
             @include mc-badge-color(map-get($badge, warning_solid));
         }
@@ -3836,7 +4010,7 @@ $fonts: (
         }
 
         &.mc-active {
-            border-color: mc-color($primary);
+            border-color: map-get(map-get($theme, states), focused-color);
         }
 
         &.mc-selected {
@@ -4063,7 +4237,7 @@ $fonts: (
 
         & .mc-checkbox-checkmark,
         & .mc-checkbox-mixedmark {
-            color: white;
+            color: map-get($background, background);
         }
     }
 
@@ -4225,6 +4399,46 @@ $mc-datepicker-today-fade-amount: 0.2;
 
 
 
+@mixin mc-dl-theme($theme) {
+    $dl: map-get(map-get($theme, components), dl);
+
+    .mc-dt {
+        color: map-get($dl, dt);
+    }
+
+    .mc-dd {
+        color: map-get($dl, dd);
+    }
+}
+
+@mixin mc-dl-typography($config) {
+    .mc-dl {
+        & .mc-dt {
+            @include mc-typography-level-to-styles($config, $description-list-font-horizontal-dt);
+        }
+
+        & .mc-dd {
+            @include mc-typography-level-to-styles($config, $description-list-font-horizontal-dd);
+        }
+    }
+
+    .mc-dl.mc-dl_vertical {
+        & .mc-dt {
+            @include mc-typography-level-to-styles($config, $description-list-font-vertical-dt);
+        }
+
+        & .mc-dd {
+            @include mc-typography-level-to-styles($config, $description-list-font-vertical-dd);
+        }
+    }
+
+}
+
+
+
+
+
+
 @mixin mc-dropdown-theme($theme) {
     $foreground: map-get($theme, foreground);
     $background: map-get($theme, background);
@@ -4344,12 +4558,12 @@ $mc-datepicker-today-fade-amount: 0.2;
                     }
                 }
 
-                & .mc-form-field__hint {
+                & .mc-hint {
                     color: mc-color($error);
                 }
             }
 
-            &.mc-focused {
+            &.cdk-focused {
                 &:not(.ng-invalid) .mc-form-field__container {
                     border-color: map-get(map-get($theme, states), focused-color);
                     box-shadow: 0 0 0 1px map-get(map-get($theme, states), focused-color);
@@ -4379,6 +4593,32 @@ $mc-datepicker-today-fade-amount: 0.2;
             /* stylelint-enable no-descending-specificity */
         }
     }
+
+    .mc-password-hint {
+        $password-hint: map-get(map-get($theme, components), form-field-password-hint);
+
+        color: map-get($password-hint, text-color);
+
+        & .mc-password-hint__icon {
+            color: map-get($password-hint, icon-color);
+        }
+
+        &.mc-password-hint_valid {
+            color: map-get($password-hint, state-valid-text-color);
+
+            & .mc-password-hint__icon {
+                color: map-get($password-hint, state-valid-icon-color);
+            }
+        }
+
+        &.mc-password-hint_invalid {
+            color: map-get($password-hint, state-invalid-text-color);
+
+            & .mc-password-hint__icon {
+                color: map-get($password-hint, state-invalid-icon-color);
+            }
+        }
+    }
 }
 
 @mixin mc-form-field-typography($config) {
@@ -4401,6 +4641,7 @@ $mc-datepicker-today-fade-amount: 0.2;
 
 @mixin mc-input-theme($theme) {
     $foreground: map-get($theme, foreground);
+    $background: map-get($theme, background);
 
     .mc-input {
         color: map-get($foreground, text);
@@ -4417,6 +4658,25 @@ $mc-datepicker-today-fade-amount: 0.2;
             color: map-get($foreground, text-disabled);
         }
     }
+
+    .mc-password-toggle {
+        color: map-get($foreground, icon);
+
+        &:hover {
+            color: map-get($foreground, text);
+        }
+
+        &[disabled] {
+            cursor: default;
+
+            color: map-get($foreground, text-disabled);
+        }
+
+        &.cdk-keyboard-focused {
+            border-color: map-get(map-get($theme, states), focused-color);
+            box-shadow: 0 0 0 1px map-get(map-get($theme, states), focused-color);
+        }
+    }
 }
 
 @mixin mc-input-typography($config) {
@@ -4650,8 +4910,6 @@ $mc-datepicker-today-fade-amount: 0.2;
     $modal: map-get(map-get($theme, components), modal);
     $popup: map-get(map-get($theme, components), popup);
 
-    $border-color: if(map-get($theme, is-dark), map-get($popup, divider), transparent);
-
     .mc-modal {
         .mc-modal-content {
             // У модалки должен быть фон background. Чтобы поповеры и дропдауны было видно поверх модалки
@@ -4667,7 +4925,7 @@ $mc-datepicker-today-fade-amount: 0.2;
         .mc-modal-header {
             border-bottom-width: var(--mc-modal-size-border-width, $modal-size-border-width);
             border-bottom-style: solid;
-            border-bottom-color: map-get($popup, divider);
+            border-bottom-color: map-get($modal, header-border);
         }
 
         .mc-modal-header.mc-modal-body_top-overflow {
@@ -4679,7 +4937,9 @@ $mc-datepicker-today-fade-amount: 0.2;
         }
 
         .mc-modal-footer {
-            border-top: var(--mc-modal-size-border-width, $modal-size-border-width) solid $border-color;
+            border-top-width: var(--mc-modal-size-border-width, $modal-size-border-width);
+            border-top-style: solid;
+            border-top-color: map-get($modal, footer-border);
 
             background-color: map-get($popup, footer-background);
         }
@@ -4705,7 +4965,9 @@ $mc-datepicker-today-fade-amount: 0.2;
 
     .mc-confirm {
         .mc-confirm-btns {
-            border-top: var(--mc-modal-size-border-width, $modal-size-border-width) solid $border-color;
+            border-top-width: var(--mc-modal-size-border-width, $modal-size-border-width);
+            border-top-style: solid;
+            border-top-color: map-get($modal, footer-border);
 
             background-color: map-get($popup, footer-background);
         }
@@ -4766,7 +5028,7 @@ $mc-datepicker-today-fade-amount: 0.2;
         }
 
         &.mc-active {
-            background-color: mc-color($primary, 600);
+            background: map-get($navbar-item, state-selected);
         }
 
         &:hover:not(.mc-navbar-item_button) {
@@ -4801,7 +5063,7 @@ $mc-datepicker-today-fade-amount: 0.2;
         &.cdk-keyboard-focused .mc-navbar-item__overlay {
             box-shadow:
                 inset 0 0 0 2px map-get(map-get($theme, states), focused-color),
-                inset 0 0 0 3px white;
+                inset 0 0 0 3px map-get($background, background);
         }
         /* stylelint-enable no-descending-specificity */
     }
@@ -4984,7 +5246,6 @@ button {
         &.mc-selected {
             & .mc-radio-button__outer-circle {
                 border-color: map-get($radio, outer-circle_checked-state_border);
-                background: white;
             }
 
             & .mc-radio-button__inner-circle {
@@ -5158,6 +5419,7 @@ button {
     $states: map-get($theme, states);
 
     $tabs: map-get(map-get($theme, components), tabs);
+    $vertical-tabs: map-get(map-get($theme, components), vertical-tabs);
 
     .mc-tab-group_vertical .mc-tab-header__content {
         border-right-color: map-get($foreground, divider);
@@ -5207,13 +5469,21 @@ button {
             border-bottom-color: transparent;
         }
 
-        &.mc-tab-label_empty .mc-tab-overlay{
-            background: map-get($tabs, state-disabled-overlay);
+        &.mc-tab-label_empty {
+            color: map-get($tabs, state-empty-text);
+
+            & .mc-icon {
+                color: map-get($tabs, state-empty-icon);
+            }
         }
 
         &:hover {
-            & .mc-tab-overlay {
-                background: map-get($background, overlay-hover);
+            background: map-get($background, overlay-hover);
+
+            color: map-get($tabs, state-hover-text);
+
+            & .mc-icon {
+                color: map-get($tabs, state-hover-icon);
             }
         }
 
@@ -5222,166 +5492,140 @@ button {
                 color: map-get($tabs, border);
                 bottom-color: transparent;
             }
-
-            & .mc-tab-overlay {
-                background: transparent;
-            }
         }
 
         &[disabled] {
             cursor: default;
 
-            & .mc-tab-overlay {
-                background: map-get($tabs, state-disabled-overlay);
+            color: map-get($tabs, state-disabled-text);
+
+            & .mc-icon {
+                color: map-get($tabs, state-disabled-icon);
             }
         }
     }
 
+    .mc-tab-link,
     .mc-tab-label_horizontal {
-        color: map-get($foreground, text);
-
-        border-bottom-color: map-get($tabs, border);
+        color: map-get($tabs, state-normal-text);
 
-        & .mc-tab-overlay {
-            background: transparent;
+        & .mc-icon {
+            color: map-get($tabs, state-normal-icon);
         }
 
+        border-bottom-color: map-get($tabs, border);
+
         &.cdk-keyboard-focused:after {
             border-color: map-get(map-get($theme, states), focused-color);
             border-bottom-color: transparent;
         }
 
-        &.mc-tab-label_empty .mc-tab-overlay{
-            background: map-get($tabs, state-disabled-overlay);
-        }
-
-        &:hover {
-            &:before {
-                background-color: map-get($tabs, border);
-            }
-
-            & .mc-tab-overlay {
-                background: map-get($background, overlay-hover);
-            }
+        &.mc-tab-label_empty {
+            color: map-get($tabs, state-empty-text);
 
             & .mc-icon {
-                color: map-get($foreground, text);
+                color: map-get($tabs, state-empty-icon);
             }
         }
 
         &.mc-active {
             border-bottom-color: transparent;
 
+            color: map-get($tabs, state-normal-text);
+
+            & .mc-icon {
+                color: map-get($tabs, state-normal-icon);
+            }
+
             &:before {
-                background-color: map-get($tabs, state-active);
+                background-color: map-get($tabs, state-active-marker);
             }
+        }
 
-            & .mc-tab-overlay {
-                background: transparent;
+        &:hover {
+            background: map-get($background, overlay-hover);
+
+            color: map-get($tabs, state-hover-text);
+
+            & .mc-icon {
+                color: map-get($tabs, state-hover-icon);
             }
         }
 
         &[disabled] {
             cursor: default;
 
-            & .mc-tab-overlay {
-                background: map-get($tabs, state-disabled-overlay);
+            color: map-get($tabs, state-disabled-text);
+
+            &:before {
+                opacity: map-get($tabs, state-disabled-marker-opacity);
+            }
+
+            & .mc-icon {
+                color: map-get($tabs, state-disabled-icon);
             }
         }
     }
 
     .mc-tab-label_vertical {
-        color: map-get($foreground, text);
+        background: map-get($vertical-tabs, state-normal-background);
+        color: map-get($tabs, state-normal-text);
 
-        & .mc-tab-overlay {
-            background: transparent;
+        & .mc-icon {
+            color: map-get($tabs, state-normal-icon);
         }
 
         &.cdk-keyboard-focused:after {
             border-color: map-get(map-get($theme, states), focused-color);
         }
 
-        &.mc-tab-label_empty .mc-tab-overlay{
-            background: map-get($tabs, state-disabled-overlay);
+        &.mc-tab-label_empty {
+            color: map-get($tabs, state-empty-text);
+
+            & .mc-icon {
+                color: map-get($tabs, state-empty-icon);
+            }
         }
 
         &:hover {
-            &:before {
-                background-color: map-get($tabs, border);
-            }
+            background: map-get($vertical-tabs, state-hover-background);
 
-            & .mc-tab-overlay {
-                background: map-get($background, overlay-hover);
-            }
+            color: map-get($tabs, state-hover-text);
 
             & .mc-icon {
-                color: map-get($foreground, text);
+                color: map-get($tabs, state-hover-icon);
             }
         }
 
         &.mc-active {
-            border-bottom-color: transparent;
+            color: map-get($tabs, state-normal-text);
             background: map-get($states, selected-color);
 
-            &:before {
-                background-color: map-get($tabs, state-active);
+            & .mc-icon {
+                color: map-get($tabs, state-normal-icon);
             }
 
-            & .mc-tab-overlay {
-                background: transparent;
+            &:before {
+                background-color: map-get($tabs, state-active-marker);
             }
 
             &:hover {
-                & .mc-tab-overlay {
-                    background: map-get($background, overlay-hover);
-                }
+                background: map-get($vertical-tabs, state-hover-selected-background);
 
                 & .mc-icon {
-                    color: map-get($foreground, text);
+                    color: map-get($tabs, state-hover-icon);
                 }
             }
         }
 
         &[disabled] {
             cursor: default;
-            background: transparent;
-
-            & .mc-tab-overlay {
-                background: map-get($tabs, state-disabled-overlay);
-            }
-        }
-    }
+            background: map-get($vertical-tabs, state-normal-background);
 
-    .mc-tab-link {
-        &.mc-tab-label_empty .mc-tab-overlay{
-            background: map-get($tabs, state-disabled-overlay);
-        }
-
-        &:hover {
-            &:before {
-                background-color: map-get($tabs, border);
-            }
+            color: map-get($tabs, state-disabled-text);
 
             & .mc-icon {
-                color: map-get($foreground, text);
-            }
-        }
-
-        &.mc-active {
-            border-bottom-color: transparent;
-
-            &:before {
-                background-color: map-get($tabs, state-active);
-            }
-
-            & .mc-tab-overlay {
-                background: transparent;
-            }
-        }
-
-        &[disabled] {
-            & .mc-tab-overlay {
-                background: map-get($tabs, state-disabled-overlay);
+                color: map-get($tabs, state-disabled-icon);
             }
         }
     }
@@ -5404,6 +5648,10 @@ button {
     background: map-get($params, background);
     border-color: map-get($params, border);
 
+    & .mc-tag__text {
+        color: map-get($params, text);
+    }
+
     &.mc-active,
     &.mc-focused {
         border-color: map-get($params, focused);
@@ -5414,7 +5662,6 @@ button {
         color: map-get($params, icon);
 
         &:hover {
-            cursor: pointer;
             color: map-get($params, icon_hovered);
         }
     }
@@ -5423,15 +5670,14 @@ button {
         border-color: map-get($params, background_disabled);
         background: map-get($params, background_disabled);
 
-        color: map-get($params, disabled);
+        & .mc-icon,
+        & .mc-tag__text {
+            color: map-get($params, disabled);
+        }
 
         & .mc-tag-overlay {
             background: transparent;
         }
-
-        & .mc-icon {
-            color: inherit;
-        }
     }
 }
 
@@ -5447,8 +5693,6 @@ button {
     $tags: map-get(map-get($theme, components), tags);
 
     .mc-tag {
-        color: map-get($foreground, text);
-
         &.mc-primary {
             @include mc-tag-color(map-get($tags, primary));
         }
@@ -5468,15 +5712,6 @@ button {
             }
         }
 
-        .mc-icon {
-            color: mc-color($foreground, icon);
-
-            &:hover {
-                cursor: pointer;
-                color: inherit;
-            }
-        }
-
         &.mc-disabled {
             color: map-get($foreground, text-disabled);
 
@@ -5487,11 +5722,6 @@ button {
             & .mc-tag-overlay {
                 background: mc-color($background, overlay-disabled);
             }
-
-            & .mc-icon {
-                color: mc-color($foreground, icon);
-                cursor: default;
-            }
         }
     }
 
@@ -5608,15 +5838,15 @@ button {
         &.mc-active {
             &.mc-primary {
                 .mc-toggle-bar {
-                    border-color: mc-color($primary);
-                    background: mc-color($primary);
+                    border-color: map-get(map-get($toggle, primary), checked_border);
+                    background: map-get(map-get($toggle, primary), checked_background);
                 }
             }
 
             &.mc-error {
                 .mc-toggle-bar {
-                    border-color: mc-color($error);
-                    background: mc-color($error);
+                    border-color: map-get(map-get($toggle, error), checked_border);
+                    background: map-get(map-get($toggle, error), checked_background);
                 }
             }
         }
@@ -5805,7 +6035,6 @@ button {
         $border-color: map-get($tooltip_extended, border-color);
 
         & .mc-tooltip__inner {
-            box-shadow: map-get($tooltip, shadow);
             border: 1px solid $border-color;
 
             color: map-get($tooltip_extended, color);
@@ -5838,7 +6067,6 @@ button {
         $border-color: map-get($tooltip_warning, border-color);
 
         & .mc-tooltip__inner {
-            box-shadow: map-get($tooltip, shadow);
             border: 1px solid $border-color;
 
             color: $color;
@@ -6051,6 +6279,7 @@ button {
     @include mc-checkbox-typography($config);
     @include mc-datepicker-typography($config);
     @include mc-dropdown-typography($config);
+    @include mc-dl-typography($config);
     @include mc-form-field-typography($config);
     @include mc-forms-typography($config);
     @include mc-input-typography($config);
@@ -6080,7 +6309,7 @@ button {
 @mixin mc-core($typography-config: null) {
     @include mosaic-typography($typography-config);
     @include cdk-a11y();
-    @include cdk-overlay();
+    @include overlay.overlay();
 }
 
 // Mixin that renders all of the core styles that depend on the theme.
@@ -6178,14 +6407,14 @@ button {
 
 
 @mixin mc-divider-theme($theme) {
-    $foreground: map-get($theme, foreground);
+    $popup: map-get(map-get($theme, components), popup);
 
     .mc-divider_horizontal {
-        border-top-color: map-get($foreground, divider);
+        border-top-color: map-get($popup, divider);
     }
 
     .mc-divider_vertical {
-        border-right-color: map-get($foreground, divider);
+        border-right-color: map-get($popup, divider);
     }
 }
 
@@ -6384,12 +6613,12 @@ button {
             & > td {
                 padding: {
                     top: var(--mc-table-size-row-padding-vertical, $table-size-row-padding-vertical);
-                    right: (var(--mc-table-size-row-padding-horizontal, $table-size-row-padding-horizontal) / 2);
+                    right: calc((var(--mc-table-size-row-padding-horizontal, $table-size-row-padding-horizontal) / 2));
                     bottom: (
-                        var(--mc-table-size-row-padding-vertical, $table-size-row-padding-vertical) -
-                        var(--mc-table-size-border-width, $table-size-border-width)
+                        calc(var(--mc-table-size-row-padding-vertical, $table-size-row-padding-vertical) -
+                        var(--mc-table-size-border-width, $table-size-border-width))
                     );
-                    left: (var(--mc-table-size-row-padding-horizontal, $table-size-row-padding-horizontal) / 2)
+                    left: calc((var(--mc-table-size-row-padding-horizontal, $table-size-row-padding-horizontal) / 2))
                 };
 
                 vertical-align: baseline;
@@ -6414,8 +6643,8 @@ button {
             padding: {
                 top: var(--mc-table-size-row-padding-vertical, $table-size-row-padding-vertical);
                 bottom: (
-                    var(--mc-table-size-row-padding-vertical, $table-size-row-padding-vertical) -
-                    var(--mc-table-size-border-width, $table-size-border-width)
+                    calc(var(--mc-table-size-row-padding-vertical, $table-size-row-padding-vertical) -
+                    var(--mc-table-size-border-width, $table-size-border-width))
                 );
             }
 
@@ -6429,6 +6658,7 @@ button {
             border-bottom: var(--mc-table-size-border-width, $table-size-border-width) solid transparent;
         }
     }
+
     /* stylelint-enable no-descending-specificity */
 }
 
@@ -6522,6 +6752,7 @@ button {
     @include mc-card-theme($theme);
     @include mc-checkbox-theme($theme);
     @include mc-datepicker-theme($theme);
+    @include mc-dl-theme($theme);
     @include mc-divider-theme($theme);
     @include mc-dropdown-theme($theme);
     @include mc-form-field-theme($theme);