igniteui-theming 5.0.0-beta.6 → 5.0.0-beta.7

package/json/colors/presets/palettes.json

@@ -1 +1 @@
-{"dark-bootstrap-palette":{"primary":"#0d6efd","secondary":"#6c757d","gray":"#adb5bd","surface":"#212529","info":"#0dcaf0","success":"#198754","warn":"#ffc107","error":"#dc3545"},"dark-green-palette":{"primary":"#09f","secondary":"#72da67","surface":"#222","info":"#1377d5","success":"#4eb862","warn":"#fbb13c","error":"#ff134a"},"dark-purple-palette":{"primary":"#00b4d6","secondary":"#514590","surface":"#333","info":"#1377d5","success":"#4eb862","warn":"#fbb13c","error":"#ff134a"},"dark-fluent-palette":{"primary":"#0078d4","secondary":"#2b88d8","surface":"#222","info":"#1377d5","success":"#107c10","warn":"#797673","error":"#a80000"},"dark-fluent-word-palette":{"primary":"#2b579a","secondary":"#2b579a","surface":"#222","info":"#1377d5","success":"#107c10","warn":"#797673","error":"#a80000"},"dark-fluent-excel-palette":{"primary":"#217346","secondary":"#217346","surface":"#222","info":"#1377d5","success":"#107c10","warn":"#797673","error":"#a80000"},"dark-indigo-palette":{"100":"to-hsl(#ffb0b7)","200":"to-hsl(#fc7f8a)","300":"to-hsl(#ec5461)","400":"to-hsl(#dd3544)","500":"to-hsl(#cf1a2b)","600":"to-hsl(#c31223)","700":"to-hsl(#b90415)","800":"to-hsl(#ae0111)","900":"to-hsl(#9f000f)","primary":"( 50: to-hsl(#c5cdff)","50-contrast":"black","100-contrast":"black","200-contrast":"black","300-contrast":"black","400-contrast":"black","500-contrast":"white","600-contrast":"white","700-contrast":"white","800-contrast":"white","900-contrast":"white","A100":"to-hsl(#c31223)","A100-contrast":"white","A200":"to-hsl(#b90415)","A200-contrast":"white","A400":"to-hsl(#ae0111)","A400-contrast":"white","A700":"to-hsl(#9f000f)","A700-contrast":"white","secondary":"( 50: to-hsl(#c5cdff)","gray":"( 50: to-hsl(#24252c)","info":"( 50: to-hsl(#f1c3ff)","success":"( 50: to-hsl(#edf3e7)","warn":"( 50: to-hsl(#fed7b7)","error":"( 50: to-hsl(#ffebf0)","surface":"( 500: to-hsl(#1e1e1e)","_meta":"( variant: 'indigo', )"},"dark-material-palette":{"primary":"#09f","secondary":"#e41c77","surface":"#222","info":"#1377d5","success":"#4eb862","warn":"#faa419","error":"#ff134a"},"light-bootstrap-palette":{"primary":"#0d6efd","secondary":"#6c757d","gray":"#adb5bd","surface":"#f8f9fa","info":"#0dcaf0","success":"#198754","warn":"#ffc107","error":"#dc3545"},"light-green-palette":{"primary":"#09f","secondary":"#72da67","surface":"#fff","info":"#1377d5","success":"#4eb862","warn":"#fbb13c","error":"#ff134a"},"light-purple-palette":{"primary":"#00b4d6","secondary":"#514590","surface":"#fff","info":"#1377d5","success":"#4eb862","warn":"#fbb13c","error":"#ff134a"},"light-fluent-palette":{"primary":"#0078d4","secondary":"#2b88d8","surface":"#fff","info":"#1377d5","success":"#107c10","warn":"#797673","error":"#a80000"},"light-fluent-word-palette":{"primary":"#2b579a","secondary":"#2b579a","surface":"#fff","info":"#1377d5","success":"#107c10","warn":"#797673","error":"#a80000"},"light-fluent-excel-palette":{"primary":"#217346","secondary":"#217346","surface":"#fff","info":"#1377d5","success":"#107c10","warn":"#797673","error":"#a80000"},"light-indigo-palette":{"100":"to-hsl(#ffb0b7)","200":"to-hsl(#fc7f8a)","300":"to-hsl(#ec5461)","400":"to-hsl(#dd3544)","500":"to-hsl(#cf1a2b)","600":"to-hsl(#c31223)","700":"to-hsl(#b90415)","800":"to-hsl(#ae0111)","900":"to-hsl(#9f000f)","primary":"( 50: to-hsl(#c5cdff)","50-contrast":"black","100-contrast":"black","200-contrast":"black","300-contrast":"black","400-contrast":"black","500-contrast":"black","600-contrast":"white","700-contrast":"white","800-contrast":"white","900-contrast":"white","A100":"to-hsl(#c31223)","A100-contrast":"white","A200":"to-hsl(#b90415)","A200-contrast":"white","A400":"to-hsl(#ae0111)","A400-contrast":"white","A700":"to-hsl(#9f000f)","A700-contrast":"white","secondary":"( 50: to-hsl(#c5cdff)","gray":"( 50: to-hsl(#fcfcfd)","info":"( 50: to-hsl(#f1c3ff)","success":"( 50: to-hsl(#edf3e7)","warn":"( 50: to-hsl(#fed7b7)","error":"( 50: to-hsl(#ffebf0)","surface":"( 500: to-hsl(#f8f8fa)","_meta":"( variant: 'indigo', )"},"light-material-palette":{"primary":"#09f","secondary":"#e41c77","surface":"white","info":"#1377d5","success":"#4eb862","warn":"#faa419","error":"#ff134a"}}
+{"dark-bootstrap-palette":{"primary":"#0d6efd","secondary":"#6c757d","gray":"#adb5bd","surface":"#212529","info":"#0dcaf0","success":"#198754","warn":"#ffc107","error":"#dc3545"},"dark-green-palette":{"primary":"#09f","secondary":"#72da67","surface":"#222","info":"#1377d5","success":"#4eb862","warn":"#fbb13c","error":"#ff134a"},"dark-purple-palette":{"primary":"#00b4d6","secondary":"#514590","surface":"#333","info":"#1377d5","success":"#4eb862","warn":"#fbb13c","error":"#ff134a"},"dark-fluent-palette":{"primary":"#0078d4","secondary":"#2b88d8","surface":"#222","info":"#1377d5","success":"#107c10","warn":"#797673","error":"#a80000"},"dark-fluent-word-palette":{"primary":"#2b579a","secondary":"#2b579a","surface":"#222","info":"#1377d5","success":"#107c10","warn":"#797673","error":"#a80000"},"dark-fluent-excel-palette":{"primary":"#217346","secondary":"#217346","surface":"#222","info":"#1377d5","success":"#107c10","warn":"#797673","error":"#a80000"},"dark-indigo-palette":{"100":"to-hsl(#ffb0b7)","200":"to-hsl(#fc7f8a)","300":"to-hsl(#ec5461)","400":"to-hsl(#dd3544)","500":"to-hsl(#cf1a2b)","600":"to-hsl(#c31223)","700":"to-hsl(#b90415)","800":"to-hsl(#ae0111)","900":"to-hsl(#9f000f)","primary":"( 50: to-hsl(#c5cdff)","50-contrast":"black","100-contrast":"black","200-contrast":"black","300-contrast":"black","400-contrast":"black","500-contrast":"white","600-contrast":"white","700-contrast":"white","800-contrast":"white","900-contrast":"white","A100":"to-hsl(#c31223)","A100-contrast":"white","A200":"to-hsl(#b90415)","A200-contrast":"white","A400":"to-hsl(#ae0111)","A400-contrast":"white","A700":"to-hsl(#9f000f)","A700-contrast":"white","secondary":"( 50: to-hsl(#c5cdff)","gray":"( 50: to-hsl(#24252c)","info":"( 50: to-hsl(#f1c3ff)","success":"( 50: to-hsl(#edf3e7)","warn":"( 50: to-hsl(#fed7b7)","error":"( 50: to-hsl(#ffebf0)","surface":"( 500: to-hsl(#1e1f24)","_meta":"( variant: 'indigo', )"},"dark-material-palette":{"primary":"#09f","secondary":"#e41c77","surface":"#222","info":"#1377d5","success":"#4eb862","warn":"#faa419","error":"#ff134a"},"light-bootstrap-palette":{"primary":"#0d6efd","secondary":"#6c757d","gray":"#adb5bd","surface":"#f8f9fa","info":"#0dcaf0","success":"#198754","warn":"#ffc107","error":"#dc3545"},"light-green-palette":{"primary":"#09f","secondary":"#72da67","surface":"#fff","info":"#1377d5","success":"#4eb862","warn":"#fbb13c","error":"#ff134a"},"light-purple-palette":{"primary":"#00b4d6","secondary":"#514590","surface":"#fff","info":"#1377d5","success":"#4eb862","warn":"#fbb13c","error":"#ff134a"},"light-fluent-palette":{"primary":"#0078d4","secondary":"#2b88d8","surface":"#fff","info":"#1377d5","success":"#107c10","warn":"#797673","error":"#a80000"},"light-fluent-word-palette":{"primary":"#2b579a","secondary":"#2b579a","surface":"#fff","info":"#1377d5","success":"#107c10","warn":"#797673","error":"#a80000"},"light-fluent-excel-palette":{"primary":"#217346","secondary":"#217346","surface":"#fff","info":"#1377d5","success":"#107c10","warn":"#797673","error":"#a80000"},"light-indigo-palette":{"100":"to-hsl(#ffb0b7)","200":"to-hsl(#fc7f8a)","300":"to-hsl(#ec5461)","400":"to-hsl(#dd3544)","500":"to-hsl(#cf1a2b)","600":"to-hsl(#c31223)","700":"to-hsl(#b90415)","800":"to-hsl(#ae0111)","900":"to-hsl(#9f000f)","primary":"( 50: to-hsl(#c5cdff)","50-contrast":"black","100-contrast":"black","200-contrast":"black","300-contrast":"black","400-contrast":"black","500-contrast":"black","600-contrast":"white","700-contrast":"white","800-contrast":"white","900-contrast":"white","A100":"to-hsl(#c31223)","A100-contrast":"white","A200":"to-hsl(#b90415)","A200-contrast":"white","A400":"to-hsl(#ae0111)","A400-contrast":"white","A700":"to-hsl(#9f000f)","A700-contrast":"white","secondary":"( 50: to-hsl(#c5cdff)","gray":"( 50: to-hsl(#fcfcfd)","info":"( 50: to-hsl(#f1c3ff)","success":"( 50: to-hsl(#edf3e7)","warn":"( 50: to-hsl(#fed7b7)","error":"( 50: to-hsl(#ffebf0)","surface":"( 500: to-hsl(#f8f8fa)","_meta":"( variant: 'indigo', )"},"light-material-palette":{"primary":"#09f","secondary":"#e41c77","surface":"white","info":"#1377d5","success":"#4eb862","warn":"#faa419","error":"#ff134a"}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "5.0.0-beta.6",
+  "version": "5.0.0-beta.7",
   "description": "A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.",
   "main": "index.js",
   "scripts": {

package/sass/color/presets/dark/_indigo.scss

@@ -19,7 +19,7 @@
 /// @prop {Color} success [#689f38] - The 500 variant of the success color.
 /// @prop {Color} warn [#f56b1d] - The 500 variant of the warn color.
 /// @prop {Color} error [#cf1a2b] - The 500 variant of the error color.
-/// @prop {Color} surface [#1e1e1e] - The surface color.
+/// @prop {Color} surface [#1e1f24] - The surface color.
 $palette: (
     primary: (
         50: to-hsl(#c5cdff),
@@ -224,7 +224,7 @@ $palette: (
         'A700-contrast': white,
     ),
     surface: (
-        500: to-hsl(#1e1e1e),
+        500: to-hsl(#1e1f24),
         '500-contrast': white,
     ),
     _meta: (

package/sass/themes/schemas/components/dark/_avatar.scss

@@ -20,7 +20,8 @@ $dark-fluent-avatar: $fluent-avatar;
 /// Generates a dark bootstrap avatar schema.
 /// @type {Map}
 /// @prop {Map} background [color: ('gray', 200)]- The background color of the avatar.
-/// @prop {Map} color [contrast-color: ('gray', 200)] - The text/icon color of the avatar.
+/// @prop {Map} color [contrast-color: ('gray', 200)] - The text color of the avatar.
+/// @prop {Map} icon-color [contrast-color: ('gray', 200)] - The icon color of the avatar.
 /// @requires $bootstrap-avatar
 $dark-bootstrap-avatar: extend(
     $bootstrap-avatar,
@@ -37,12 +38,19 @@ $dark-bootstrap-avatar: extend(
                 200,
             ),
         ),
+        icon-color: (
+            contrast-color: (
+                'gray',
+                200,
+            ),
+        ),
     )
 );
 
 /// Generates a dark indigo avatar schema.
 /// @type {Map}
-/// @prop {Map} color [contrast-color: ('gray', 300)] - The text/icon color of the avatar.
+/// @prop {Map} color [contrast-color: ('gray', 300)] - The text color of the avatar.
+/// @prop {Map} icon-color [contrast-color: ('gray', 300)] - The icon color of the avatar.
 /// @requires $indigo-avatar
 $dark-indigo-avatar: extend(
     $indigo-avatar,
@@ -53,5 +61,11 @@ $dark-indigo-avatar: extend(
                 300,
             ),
         ),
+        icon-color: (
+            contrast-color: (
+                'gray',
+                300,
+            ),
+        ),
     )
 );

package/sass/themes/schemas/components/dark/_carousel.scss

@@ -13,6 +13,7 @@
 /// @prop {Color} indicator-border-color [color: ('gray', 600)] - The idle indicator border color.
 /// @prop {Color} indicator-active-dot-color [color: ('gray', 600)] - The active indicator dot color.
 /// @prop {Color} indicator-active-border-color [color: ('gray', 600)] - The active indicator border color.
+/// @prop {Map} indicator-active-hover-dot-color [color: ('gray', 600)] - The active indicator dot color on hover.
 /// @type {Map}
 $base-dark-carousel: extend(
     $light-carousel,
@@ -51,6 +52,13 @@ $base-dark-carousel: extend(
                 600,
             ),
         ),
+
+        indicator-active-hover-dot-color: (
+            color: (
+                'gray',
+                600,
+            ),
+        ),
     )
 );
 
@@ -74,53 +82,97 @@ $dark-bootstrap-carousel: extend($bootstrap-carousel, $base-dark-carousel);
 
 /// Generates a dark indigo carousel schema based on a mix of $indigo-carousel and $base-dark-carousel
 /// @type {Map}
-/// @prop {Map} button-background [color: ('gray', 400)] - The previous/next buttons idle background color.
-/// @prop {Map} button-hover-background [color: ('gray', 200)] - The previous/next buttons hover background color.
-/// @prop {Map} button-arrow-color [color: ('gray', 800)] - The previous/next buttons idle arrow color.
-/// @prop {Map} button-hover-arrow-color [color: ('gray', 900)] - The previous/next buttons hover arrow color.
-/// @prop {Map} indicator-dot-color [color: ('gray', 600, .6)] - The idle indicator dot color.
-/// @prop {Map} indicator-active-dot-color [color: ('gray', 900)] - The active indicator dot color.
+/// @prop {Map} button-hover-background [color: ('gray', 100)] - The previous/next buttons hover background color.
+/// @prop {Map} button-arrow-color [contrast-color: ('gray', 50, .8)] - The previous/next buttons idle arrow color.
+/// @prop {Map} button-hover-arrow-color [color: ('gray', 50)] - The previous/next buttons hover arrow color.
+/// @prop {Map} button-border-color [color: ('gray', 200)] - The previous/next buttons idle border color.
+/// @prop {Map} button-hover-border-color [color: ('gray', 300)] - The previous/next buttons hover border color.
+/// @prop {Map} button-disabled-border-color [color: ('gray', 100)] - The previous/next buttons disabled border color.
+/// @prop {Map} button-disabled-arrow-color [contrast-color: ('gray' 50, .2)] - The previous/next buttons disabled color.
+/// @prop {Map} indicator-dot-color [color: ('gray', 400)] - The idle indicator dot color.
+/// @prop {Map} indicator-hover-dot-color [color: ('gray', 500)] - The hover indicator dot color.
+/// @prop {Map} indicator-active-dot-color [color: ('primary', 400)] - The active indicator dot color.
+/// @prop {Map} indicator-active-hover-dot-color [color: ('primary', 300)] - The active indicator dot color on hover.
 /// @requires $indigo-carousel
 $dark-indigo-carousel: extend(
     $indigo-carousel,
     (
-        button-background: (
+        button-hover-background: (
             color: (
-                'gray' 400,
+                'gray',
+                100,
             ),
         ),
 
-        button-hover-background: (
+        button-arrow-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.8,
+            ),
+        ),
+
+        button-hover-arrow-color: (
+            contrast-color: (
+                'gray',
+                50,
+            ),
+        ),
+
+        button-disabled-arrow-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.2,
+            ),
+        ),
+
+        button-border-color: (
             color: (
-                'gray' 200,
+                'gray',
+                200,
             ),
         ),
 
-        button-arrow-color: (
+        button-hover-border-color: (
             color: (
                 'gray',
-                800,
+                300,
             ),
         ),
 
-        button-hover-arrow-color: (
+        button-disabled-border-color: (
             color: (
                 'gray',
-                900,
+                100,
             ),
         ),
 
         indicator-dot-color: (
             color: (
                 'gray',
-                600,
-                0.6,
+                400,
+            ),
+        ),
+
+        indicator-hover-dot-color: (
+            color: (
+                'gray',
+                500,
             ),
         ),
 
         indicator-active-dot-color: (
             color: (
-                'gray' 900,
+                'primary',
+                400,
+            ),
+        ),
+
+        indicator-active-hover-dot-color: (
+            color: (
+                'primary',
+                300,
             ),
         ),
     )

package/sass/themes/schemas/components/dark/_checkbox.scss

@@ -54,6 +54,8 @@ $dark-bootstrap-checkbox: extend(
 /// @prop {Map} fill-color-hover [color: ('primary', 300)] - The checked border and fill colors on hover.
 /// @prop {Map} empty-color [color: ('gray', 900, .6)] - The unchecked border color.
 /// @prop {Map} empty-color-hover [color: ('gray', 900, .8)] - The unchecked border color on hover.
+/// @prop {Map} error-color [color: ('error', 400)] - The border and fill colors in invalid state.
+/// @prop {Map} error-color-hover [color: ('error', 300)] - The border and fill colors in invalid state on hover.
 /// @prop {Map} disabled-color [color: ('gray', 900, .2)] - The disabled border and fill colors.
 /// @prop {Map} disabled-color-label [color: ('gray', 900, .2)] - The disabled label color.
 /// @requires $indigo-checkbox
@@ -106,6 +108,18 @@ $dark-indigo-checkbox: extend(
                 0.8,
             ),
         ),
+        error-color: (
+            color: (
+                'error',
+                400,
+            ),
+        ),
+        error-color-hover: (
+            color: (
+                'error',
+                300,
+            ),
+        ),
         disabled-color: (
             contrast-color: (
                 'gray',

package/sass/themes/schemas/components/dark/_dialog.scss

@@ -1,5 +1,6 @@
 @use '../../../../utils/map' as *;
 @use '../light/dialog' as *;
+@use '../elevation/dialog' as *;
 
 ////
 /// @package theming
@@ -51,10 +52,12 @@ $dark-bootstrap-dialog: extend(
 /// Generates a dark indigo dialog schema.
 /// @type {Map}
 /// @prop {Map} background [color: ('gray', 50)] - The dialog background color.
+/// @prop {Number} elevation [23] - The elevation level, between 0-24, to be used for the dialog.
 /// @requires $indigo-dialog
-/// @requires $base-dark-dialog
+/// @requires $dark-indigo-elevation-dialog
 $dark-indigo-dialog: extend(
     $indigo-dialog,
+    $dark-indigo-elevation-dialog,
     (
         background: (
             color: (

package/sass/themes/schemas/components/dark/_icon-button.scss

@@ -256,19 +256,22 @@ $dark-bootstrap-icon-button: (
 );
 
 /// Generates a dark base indigo icon button schema.
-/// @prop {Map} foreground [contrast-color: ('primary', 500)] - The idle text color of the indigo icon button.
+/// @prop {Map} foreground [contrast-color: ('primary', 500, .8)] - The idle text color of the indigo icon button.
 /// @prop {Map} hover-background [contrast-color: ('primary', 500, 0.10)] - The hover background color of the indigo icon button.
 /// @prop {Map} hover-foreground [contrast-color: ('primary', 500)] - The hover text color of the indigo icon button.
 /// @prop {Map} focus-foreground [contrast-color: ('primary', 500)] - The focus text color of the indigo icon button.
 /// @prop {Map} focus-hover-background [contrast-color: ('primary', 500, 0.10)] - The background color on focus hovered state of the icon button.
 /// @prop {Map} focus-hover-foreground [contrast-color: ('primary', 500)] - The foreground color on focus hovered state of the icon button.
+/// @prop {Map} focus-border-color [contrast-color: ('primary', 500, .2)] - The focus border color of the indigo icon button.
 /// @prop {Map} active-foreground [contrast-color: ('primary', 500)] - The active text color of the indigo icon button.
+/// @prop {Map} disabled-foreground [contrast-color: ('gray', 50, .2)] - The disabled foreground color of the indigo icon button.
 /// @type {Map}
 $indigo-base-icon-button-dark: (
     foreground: (
         contrast-color: (
             'primary',
             500,
+            0.8,
         ),
     ),
     hover-foreground: (
@@ -289,6 +292,13 @@ $indigo-base-icon-button-dark: (
             500,
         ),
     ),
+    focus-border-color: (
+        contrast-color: (
+            'primary',
+            500,
+            0.2,
+        ),
+    ),
     active-foreground: (
         contrast-color: (
             'primary',
@@ -309,26 +319,23 @@ $indigo-base-icon-button-dark: (
             0.1,
         ),
     ),
+    disabled-foreground: (
+        contrast-color: (
+            'gray',
+            50,
+            0.2,
+        ),
+    ),
 );
 
 /// Generates a dark indigo flat icon button schema.
-/// @prop {Map} foreground [contrast-color: ('primary', 500)] - The idle text color of the indigo icon button.
 /// @prop {Map} focus-foreground [contrast-color: ('primary', 500)] - The focus text color of the indigo icon button.
-/// @prop {Map} focus-border-color [contrast-color: ('primary', 500, 0.20)] - The focus border color of the indigo icon button.
 /// @type {Map}
 /// @requires {Map} $indigo-flat-icon-button
 $indigo-flat-icon-button-dark: extend(
     $indigo-flat-icon-button,
     $indigo-base-icon-button-dark,
     (
-        foreground: (
-            contrast-color: (
-                'primary',
-                500,
-                0.8,
-            ),
-        ),
-
         focus-foreground: (
             contrast-color: (
                 'primary',
@@ -336,13 +343,6 @@ $indigo-flat-icon-button-dark: extend(
                 0.8,
             ),
         ),
-        focus-border-color: (
-            contrast-color: (
-                'primary',
-                500,
-                0.2,
-            ),
-        ),
     )
 );
 
@@ -376,6 +376,7 @@ $indigo-outlined-icon-button-dark: extend(
 /// @type {Map}
 /// @prop {Map} hover-background [color: ('primary', 400)] - The hover background color of the indigo icon button.
 /// @prop {Map} focus-hover-background [color: ('primary', 400)] - The background color on focus hovered state of the icon button.
+/// @prop {Map} focus-border-color [contrast-color: ('primary', 400, .5)] - The focus border color of the indigo icon button.
 /// @requires {Map} $indigo-contained-icon-button
 $indigo-contained-icon-button-dark: extend(
     $indigo-contained-icon-button,
@@ -393,6 +394,13 @@ $indigo-contained-icon-button-dark: extend(
                 400,
             ),
         ),
+        focus-border-color: (
+            color: (
+                'primary',
+                400,
+                0.5,
+            ),
+        ),
     )
 );
 

package/sass/themes/schemas/components/dark/_input-group.scss

@@ -105,7 +105,7 @@ $dark-bootstrap-input-group: $bootstrap-input-group;
 /// @prop {Map} input-suffix-color--focused [contrast-color: ('gray', 50, .6)] - The input suffix color in the focused state.
 /// @prop {Map} idle-bottom-line-color [contrast-color: ('gray', 50, .4)] - The bottom line and border colors in the idle state.
 /// @prop {Map} hover-bottom-line-color [contrast-color: ('gray', 50, .8)] - The bottom line and border colors in the hover state.
-/// @prop {Map} disabled-bottom-line-color [contrast-color: ('gray', 50, .2)] - The bottom line and border colors in the disabled state.
+/// @prop {Map} disabled-bottom-line-color [contrast-color: ('gray', 50, .15)] - The bottom line and border colors in the disabled state.
 /// @prop {Map} helper-text-color [contrast-color: ('gray', 50, .8)] - The helper text color.
 /// @prop {Map} idle-text-color [contrast-color: ('gray', 50, .8)] - The input text color in the idle state.
 /// @prop {Map} filled-text-color [contrast-color: ('gray', 50, .8)] - The input text color in the filled state.
@@ -113,6 +113,7 @@ $dark-bootstrap-input-group: $bootstrap-input-group;
 /// @prop {Map} disabled-text-color [contrast-color: ('gray', 50, .2)] - The input text color in the disabled state.
 /// @prop {Map} box-background-hover [contrast-color: ('gray', 50, .1)] - The background color of an input group of type box on hover.
 /// @prop {Map} idle-secondary-color [contrast-color: ('gray', 50, .6)] - The label color in the idle state.
+/// @prop {Map} focused-text-color [contrast-color: ('gray', 50)] - The input text color in the focused state.
 /// @prop {Map} focused-secondary-color [contrast-color: ('gray', 50, .6)] - The label color in the focused state.
 /// @prop {Map} placeholder-color [contrast-color: ('gray', 50, .6)] - The placeholder color of an input group.
 /// @prop {Map} hover-placeholder-color [contrast-color: ('gray', 50, .8)] - The placeholder color of an input group on hover.
@@ -181,7 +182,7 @@ $dark-indigo-input-group: extend(
             contrast-color: (
                 'gray',
                 50,
-                0.2,
+                0.15,
             ),
         ),
         helper-text-color: (
@@ -232,6 +233,12 @@ $dark-indigo-input-group: extend(
                 0.6,
             ),
         ),
+        focused-text-color: (
+            contrast-color: (
+                'gray',
+                50,
+            ),
+        ),
         focused-secondary-color: (
             contrast-color: (
                 'gray',

package/sass/themes/schemas/components/dark/_radio.scss

@@ -40,6 +40,7 @@ $dark-material-radio: $material-radio;
 /// @prop {Map} fill-color-hover [color: ('primary', 100)] - The checked border and dot colors on hover.
 /// @prop {Map} error-color-hover [color: ('error', 200)] - The border and dot color in invalid state on hover.
 /// @prop {Map} disabled-color [color: ('gray', 100)] - The disabled border and dot colors.
+/// @prop {Map} disabled-fill-color [color: ('gray', 100)] - The disabled checked border and dot colors.
 /// @prop {Map} disabled-label-color [color: ('gray', 300)] - The disabled label color.
 /// @requires $fluent-radio
 $dark-fluent-radio: extend(
@@ -81,6 +82,12 @@ $dark-fluent-radio: extend(
                 100,
             ),
         ),
+        disabled-fill-color: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
         disabled-label-color: (
             color: (
                 'gray',

package/sass/themes/schemas/components/elevation/_dialog.scss

@@ -15,3 +15,9 @@ $default-elevation-dialog: (
 $bootstrap-elevation-dialog: (
     elevation: 0,
 );
+
+/// @type Map
+/// @prop {Number} elevation [23] - The elevation level, between 0-24, to be used for the dialog.
+$dark-indigo-elevation-dialog: (
+    elevation: 23,
+);

package/sass/themes/schemas/components/light/_avatar.scss

@@ -10,7 +10,8 @@
 /// Generates a light avatar schema.
 /// @type {Map}
 /// @prop {Map} background [color: ('gray', 400, .54)]- The background color of the avatar.
-/// @prop {Map} color [color: ('gray', 800, .96)] - The text/icon color of the avatar.
+/// @prop {Map} color [color: ('gray', 800, .96)] - The text color of the avatar.
+/// @prop {Map} icon-color [color: ('gray', 800, .96)] - The icon color of the avatar.
 /// @prop {Number} border-radius [rem(8px)] - The border radius for rounded avatar.
 /// @prop {List} size [(rem(40px), rem(64px), rem(88px))] - The size used for the avatar width and height.
 /// @prop {Number} default-size [1] - The default size used for the avatar component.
@@ -29,6 +30,13 @@ $light-avatar: (
             0.96,
         ),
     ),
+    icon-color: (
+        color: (
+            'gray',
+            800,
+            0.96,
+        ),
+    ),
     border-radius: rem(8px),
     size: (
         sizable: (
@@ -53,7 +61,8 @@ $fluent-avatar: $light-avatar;
 /// Generates a bootstrap avatar schema.
 /// @type {Map}
 /// @prop {Map} background [color: ('gray', 400)]- The background color of the avatar.
-/// @prop {Map} color [contrast-color: ('gray', 400)] - The text/icon color of the avatar.
+/// @prop {Map} color [contrast-color: ('gray', 400)] - The text color of the avatar.
+/// @prop {Map} icon-color [contrast-color: ('gray', 400)] - The icon color of the avatar.
 /// @prop {Number} border-radius [rem(4px)] - The border radius for rounded avatar.
 /// @requires {Map} $light-avatar
 $bootstrap-avatar: extend(
@@ -71,6 +80,12 @@ $bootstrap-avatar: extend(
                 400,
             ),
         ),
+        icon-color: (
+            contrast-color: (
+                'gray',
+                400,
+            ),
+        ),
         border-radius: rem(4px),
     )
 );
@@ -78,7 +93,8 @@ $bootstrap-avatar: extend(
 /// Generates an indigo avatar schema.
 /// @type {Map}
 /// @prop {Map} background [color: ('gray', 300)]- The background color of the avatar.
-/// @prop {Map} color [color: ('gray', 700)] - The text/icon color of the avatar.
+/// @prop {Map} color [color: ('gray', 700)] - The text color of the avatar.
+/// @prop {Map} icon-color [color: ('gray', 600)] - The icon color of the avatar.
 /// @prop {Number} border-radius [rem(4px)] - The border radius for rounded avatar.
 /// @prop {List} size [(rem(20px), rem(28px), rem(36px))] - The size used for the avatar width and height.
 /// @prop {Number} default-size [1] - The default size used for the avatar component.
@@ -98,6 +114,12 @@ $indigo-avatar: extend(
                 700,
             ),
         ),
+        icon-color: (
+            color: (
+                'gray',
+                600,
+            ),
+        ),
         border-radius: rem(4px),
         size: (
             sizable: (

package/sass/themes/schemas/components/light/_carousel.scss

@@ -17,10 +17,15 @@
 /// @prop {Map} button-arrow-color [color: ('gray', 700)] - The previous/next buttons idle arrow color.
 /// @prop {Map} button-hover-arrow-color [color: ('gray', 900)] - The previous/next buttons hover arrow color.
 /// @prop {Map} button-disabled-arrow-color [color: ('gray' 400)] - The previous/next buttons disabled color.
+/// @prop {Color} button-border-color [transparent] - The previous/next buttons idle border color.
+/// @prop {Color} button-hover-border-color [transparent] - The previous/next buttons hover border color.
+/// @prop {Color} button-disabled-border-color [transparent] - The previous/next buttons disabled border color.
 /// @prop {Color} indicator-dot-color [transparent] - The idle indicator dot color.
+/// @prop {Color} indicator-hover-dot-color [transparent] - The hover indicator dot color.
 /// @prop {Map} indicator-border-color [color: ('gray', 50)] - The idle indicator border color.
 /// @prop {Map} indicator-active-dot-color [color: ('gray', 50)] - The active indicator dot color.
 /// @prop {Map} indicator-active-border-color [color: ('gray', 50)] - The active indicator border color.
+/// @prop {Map} indicator-active-hover-dot-color [color: ('gray', 50)] - The active indicator dot color on hover.
 /// @prop {Number} button-elevation [1] - The elevation level, between 0-24, to be used for the carousel buttons.
 /// @prop {List} border-radius [(rem(0), rem(0), rem(36px))] - The border radius used for carousel.
 /// @requires {Map} $default-elevation-carousel
@@ -71,10 +76,14 @@ $light-carousel: extend(
 
         button-disabled-arrow-color: (
             color: (
-                'gray' 400,
+                'gray',
+                400,
             ),
         ),
 
+        button-border-color: transparent,
+        button-hover-border-color: transparent,
+        button-disabled-border-color: transparent,
         indicator-dot-color: transparent,
 
         indicator-border-color: (
@@ -98,6 +107,13 @@ $light-carousel: extend(
             ),
         ),
 
+        indicator-active-hover-dot-color: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
+
         border-radius: (
             border-radius: (
                 rem(0),
@@ -144,14 +160,17 @@ $bootstrap-carousel: extend(
 
 /// Generates an indigo carousel schema.
 /// @type {Map}
-/// @prop {Map} button-background [color: ('surface', 500, .4)] - The previous/next buttons idle background color.
-/// @prop {Map} button-hover-background [color: ('surface', 500, .65)] - The previous/next buttons hover background color.
-/// @prop {Color} button-disabled-background [transparent] - The previous/next buttons disabled background color.
-/// @prop {Map} button-arrow-color [color: ('gray', 100)] - The previous/next buttons idle arrow color.
+/// @prop {Map} button-arrow-color [color: ('gray', 600)] - The previous/next buttons idle arrow color.
+/// @prop {Map} button-hover-background [color: ('gray', 200)] - The previous/next buttons hover background color.
 /// @prop {Map} button-hover-arrow-color [color: ('gray', 700)] - The previous/next buttons hover arrow color.
-/// @prop {Map} button-disabled-arrow-color [color: ('gray' 400)] - The previous/next buttons disabled color.
-/// @prop {Map} indicator-dot-color [color: ('surface', 500, .6)] - The idle indicator dot color.
-/// @prop {Map} indicator-active-dot-color [color: 'surface'] - The active indicator dot color.
+/// @prop {Map} button-border-color [color: ('gray', 400)] - The previous/next buttons idle border color.
+/// @prop {Map} button-hover-border-color [color: ('gray', 500)] - The previous/next buttons hover border color.
+/// @prop {Map} button-disabled-border-color [color: ('gray', 300)] - The previous/next buttons disabled border color.
+/// @prop {Map} button-disabled-background [color: ('gray', 50)] - The previous/next buttons disabled background color.
+/// @prop {Map} indicator-dot-color [color: ('gray', 500)] - The idle indicator dot color.
+/// @prop {Map} indicator-hover-dot-color [color: ('gray', 600)] - The hover indicator dot color.
+/// @prop {Map} indicator-active-dot-color [color: ('primary', 500)] - The active indicator dot color.
+/// @prop {Map} indicator-active-hover-dot-color [color: ('primary', 400)] - The active indicator dot color on hover.
 /// @prop {Number} button-elevation [0] - The elevation level, between 0-24, to be used for the carousel buttons.
 /// @requires {Map} $light-carousel
 /// @requires {Map} $indigo-elevation-carousel
@@ -159,26 +178,17 @@ $indigo-carousel: extend(
     $light-carousel,
     $indigo-elevation-carousel,
     (
-        button-background: (
-            color: (
-                'surface',
-                500,
-                0.4,
-            ),
-        ),
-
         button-arrow-color: (
             color: (
                 'gray',
-                100,
+                600,
             ),
         ),
 
         button-hover-background: (
             color: (
-                'surface',
-                500,
-                0.65,
+                'gray',
+                200,
             ),
         ),
 
@@ -189,24 +199,60 @@ $indigo-carousel: extend(
             ),
         ),
 
-        button-disabled-background: transparent,
+        button-border-color: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
 
-        button-disabled-arrow-color: (
+        button-hover-border-color: (
             color: (
-                'gray' 400,
+                'gray',
+                500,
+            ),
+        ),
+
+        button-disabled-border-color: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+
+        button-disabled-background: (
+            color: (
+                'gray',
+                50,
             ),
         ),
 
         indicator-dot-color: (
             color: (
-                'surface',
+                'gray',
                 500,
-                0.6,
+            ),
+        ),
+
+        indicator-hover-dot-color: (
+            color: (
+                'gray',
+                600,
             ),
         ),
 
         indicator-active-dot-color: (
-            color: 'surface',
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+
+        indicator-active-hover-dot-color: (
+            color: (
+                'primary',
+                400,
+            ),
         ),
     )
 );

package/sass/themes/schemas/components/light/_checkbox.scss

@@ -16,6 +16,9 @@
 /// @prop {Map} label-color [color: ('gray', 900)]- The text color used for the label text.
 /// @prop {Map} empty-color [color: ('gray', 500)] - The unchecked border color.
 /// @prop {Map} fill-color [color: ('primary', 500)] - The checked border and fill colors.
+/// @prop {Color} focus-outline-color [transparent] - The focus outlined color.
+/// @prop {Color} focus-outline-color-focused [transparent] - The focus outlined color for focused state.
+/// @prop {Color} focus-outline-color-error [transparent] - The focus outlined color for focused invalid state.
 /// @prop {Map} disabled-color [color: ('gray', 400)] - The disabled border and fill colors.
 /// @prop {Map} disabled-indeterminate-color [color: ('secondary', 100)] - The disabled border and fill colors in indeterminate state.
 /// @prop {Map} disabled-color-label [color: ('gray', 500)] - The disabled color of the label.
@@ -54,7 +57,9 @@ $light-checkbox: (
             500,
         ),
     ),
-
+    focus-outline-color: transparent,
+    focus-outline-color-focused: transparent,
+    focus-outline-color-error: transparent,
     disabled-color: (
         color: (
             'gray',
@@ -268,6 +273,7 @@ $bootstrap-checkbox: extend(
 /// @prop {Map} disabled-color-label [color: ('gray', 900, .2)] - The disabled label color.
 /// @prop {Map} focus-outline-color [color: ('gray', 900, .15)] - The focus outlined color.
 /// @prop {Map} focus-outline-color-focused [color: ('primary', 400, .5)] - The focus outlined color for focused state.
+/// @prop {Map} focus-outline-color-error [color: ('error', 400, 0.5)] - The focus outlined color for focused invalid state.
 /// @prop {Map} error-color-hover [color: ('error', 400)] - The focus outlined color in invalid state.
 /// @prop {List} border-radius [(rem(3px), rem(0), rem(10px))] - The border radius used for checkbox.
 /// @prop {List} border-radius-ripple [(rem(3px), rem(0), rem(24px))] - The border radius used for checkbox ripple.
@@ -301,6 +307,13 @@ $indigo-checkbox: extend(
                 0.5,
             ),
         ),
+        focus-outline-color-error: (
+            color: (
+                'error',
+                400,
+                0.5,
+            ),
+        ),
         tick-color: (
             contrast-color: (
                 'primary',

package/sass/themes/schemas/components/light/_icon-button.scss

@@ -904,17 +904,18 @@ $indigo-outlined-icon-button: extend(
 /// Generates an indigo contained icon button schema.
 /// @type {Map}
 /// @prop {Map} background [color: ('primary', 500)] - The background color of the indigo contained icon button.
-/// @prop {Map} foreground [contrast-color: ('primary', 500)] - The idle text color of the indigo contained icon button.
+/// @prop {Map} foreground [contrast-color: ('primary', 500, .8)] - The idle text color of the indigo contained icon button.
 /// @prop {Map} hover-background [color: ('primary', 400)] - The hover background color of the indigo contained icon button.
 /// @prop {Map} hover-foreground [contrast-color: ('primary', 500)] - The hover text color of the indigo contained icon button.
 /// @prop {Map} focus-background [color: ('primary', 500)] - The focus background color of the indigo contained icon button.
 /// @prop {Map} focus-foreground [contrast-color: ('primary', 500)] - The focus background color of the indigo contained icon button.
+/// @prop {Map} focus-border-color [color: ('primary', 400, .5)] - The focus border color of the indigo icon button.
 /// @prop {Map} focus-hover-background [color: ('primary', 400)] - The background color on focus hovered state of the icon button.
 /// @prop {Map} focus-hover-foreground [color: ('primary', 500)] - The foreground color on focus hovered state of the icon button.
 /// @prop {Map} active-background [color: ('primary', 400)] - The active background color of the indigo contained icon button.
 /// @prop {Map} active-foreground [contrast-color: ('primary', 500)] - The active background color of the indigo contained icon button.
-/// @prop {Map} disabled-background [color: ('primary', 400, 0.5)] - The disabled background color of the indigo contained icon button.
-/// @prop {Map} disabled-foreground [contrast-color: ('primary', 500, 0.4)] - The disabled foreground color of the indigo icon button.
+/// @prop {Map} disabled-background [color: ('primary', 400, .5)] - The disabled background color of the indigo contained icon button.
+/// @prop {Map} disabled-foreground [contrast-color: ('primary', 500, .3)] - The disabled foreground color of the indigo icon button.
 /// @requires {Map} $indigo-base-icon-button
 $indigo-contained-icon-button: extend(
     $indigo-base-icon-button,
@@ -930,6 +931,7 @@ $indigo-contained-icon-button: extend(
             contrast-color: (
                 'primary',
                 500,
+                0.8,
             ),
         ),
         hover-background: (
@@ -956,6 +958,13 @@ $indigo-contained-icon-button: extend(
                 500,
             ),
         ),
+        focus-border-color: (
+            color: (
+                'primary',
+                400,
+                0.5,
+            ),
+        ),
         focus-hover-background: (
             color: (
                 'primary',
@@ -991,7 +1000,7 @@ $indigo-contained-icon-button: extend(
             contrast-color: (
                 'primary',
                 500,
-                0.4,
+                0.3,
             ),
         ),
     )

package/sass/themes/schemas/components/light/_radio.scss

@@ -15,6 +15,7 @@
 /// @prop {Map} empty-color [color: ('gray', 500)] - The unchecked border color.
 /// @prop {Map} fill-color [color: ('primary', 500)] - The checked border and dot colors.
 /// @prop {Map} disabled-color [color: ('gray', 400)] - The disabled border and dot colors.
+/// @prop {Map} disabled-fill-color [color: ('gray', 400)] - The disabled checked border and dot colors.
 /// @prop {Map} disabled-label-color [color: ('gray', 400)] - The disabled label color.
 /// @prop {Map} error-color [color: ('error', 500)] - The label, border and dot color in invalid state.
 /// @prop {Color} focus-outline-color-filled [transparent] - The focus outline color when radio is filled.
@@ -51,6 +52,12 @@ $light-radio: (
             400,
         ),
     ),
+    disabled-fill-color: (
+        color: (
+            'gray',
+            400,
+        ),
+    ),
     disabled-label-color: (
         color: (
             'gray',
@@ -70,9 +77,9 @@ $light-radio: (
 /// Generates a material radio schema.
 /// @type {Map}
 /// @prop {Color} focus-outline-color [transparent] - The focus outlined color.
-/// @prop {Map} fill-hover-border-color [color: ('secondary', 500)] - The text color used for the label text.
+/// @prop {Map} fill-hover-border-color [color: ('secondary', 500)] - The checked dot border color on hover.
 /// @prop {Map} empty-color [color: ('gray', 600)] - The unchecked border color.
-/// @prop {Map} fill-color [color: ('secondary', 500)] - The checked border and dot colors on hover.
+/// @prop {Map} fill-color [color: ('secondary', 500)] - The checked border and dot colors.
 /// @prop {Map} fill-color-hover [color: ('secondary', 500)] - The checked border and dot colors on hover.
 /// @prop {Map} error-color-hover [color: ('error', 500)] - The border and dot color in invalid state on hover.
 /// @requires {Map} $light-radio
@@ -180,6 +187,7 @@ $fluent-radio: extend(
 /// @type {Map}
 /// @prop {Map} fill-hover-border-color [color: ('gray', 50)] - The checked dot border color on hover.
 /// @prop {Map} disabled-color [color: ('primary', 200)] - The disabled border and dot colors.
+/// @prop {Map} disabled-fill-color [color: ('primary', 200)] - The disabled checked border and dot colors.
 /// @prop {Map} fill-color-hover [color: ('gray', 50)] - The checked border and dot colors on hover.
 /// @prop {Map} focus-outline-color [color: ('primary', 200)] - The focus outlined color.
 /// @prop {Map} error-color-hover [color: ('error', 100)] - The focus outlined color in invalid state.
@@ -205,6 +213,12 @@ $bootstrap-radio: extend(
                 200,
             ),
         ),
+        disabled-fill-color: (
+            color: (
+                'primary',
+                200,
+            ),
+        ),
         fill-color-hover: (
             color: (
                 'gray',
@@ -223,12 +237,13 @@ $bootstrap-radio: extend(
 /// Generates an indigo radio schema.
 /// @type {Map}
 /// @prop {Map} label-color [color: ('gray', 800)] - The text color used for the label text.
-/// @prop {Map} hover-color [color: ('gray', 600)] - The text color used for the label text.
+/// @prop {Map} hover-color [color: ('gray', 600)] - The hover text color used for the label text.
 /// @prop {Map} focus-outline-color [color: ('gray', 900, .15)] - The focus outlined color.
 /// @prop {Map} focus-outline-color-filled [color: ('primary', 400, 0.5)] - The focus outline color when radio is filled.
-/// @prop {Map} fill-hover-border-color [color: ('primary', 400)] - The text color used for the label text.
+/// @prop {Map} fill-hover-border-color [color: ('primary', 400)] - The checked dot border color on hover.
 /// @prop {Map} fill-color-hover [color: ('primary', 400)] - The checked border and dot colors on hover.
 /// @prop {Map} disabled-color [color: ('gray', 900, .15)] - The disabled border and dot colors.
+/// @prop {Map} disabled-fill-color [color: ('primary', 400, .5)] - The disabled checked border and dot colors.
 /// @prop {Map} disabled-label-color [color: ('gray', 900, .20)] - The disabled label color.
 /// @prop {Map} error-color-hover [color: ('error', 400)] - The focus outlined color in invalid state.
 /// @prop {Map} focus-outline-color-error [color: ('error', 400, 0.5)] - The focus outline color when radio is filled and invalid.
@@ -294,6 +309,13 @@ $indigo-radio: extend(
                 0.15,
             ),
         ),
+        disabled-fill-color: (
+            color: (
+                'primary',
+                400,
+                0.5,
+            ),
+        ),
         disabled-label-color: (
             color: (
                 'gray',