igniteui-theming 5.0.0-beta.3 → 5.0.0-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "5.0.0-beta.3",
+  "version": "5.0.0-beta.5",
   "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/themes/schemas/components/dark/_banner.scss

@@ -19,9 +19,9 @@ $dark-fluent-banner: $fluent-banner;
 
 /// Generates a dark bootstrap banner schema.
 /// @type {Map}
-/// @prop {Map} banner-background [color: ('surface')] - The background color used banner background.
-/// @prop {Map} banner-message-color [color: ('gray', 600)] - The color used for banner label.
-/// @prop {Map} banner-illustration-color [color: ('gray', 600)] - The color used banner illustration.
+/// @prop {Map} banner-background [color: ('surface')] - The color used for the banner background.
+/// @prop {Map} banner-message-color [color: ('gray', 600)] - The color used for the banner label.
+/// @prop {Map} banner-illustration-color [color: ('gray', 600)] - The color used for the banner illustration.
 /// @requires $bootstrap-banner
 $dark-bootstrap-banner: extend(
     $bootstrap-banner,
@@ -50,5 +50,24 @@ $dark-bootstrap-banner: extend(
 
 /// Generates a dark indigo banner schema.
 /// @type {Map}
+/// @prop {Map} banner-background [color: ('gray', 50)] - The color used for the banner background.
+/// @prop {Map} banner-border-color [color: ('gray', 100)] - The color used for the banner border.
 /// @requires $indigo-banner
-$dark-indigo-banner: $indigo-banner;
+$dark-indigo-banner: extend(
+    $indigo-banner,
+    (
+        banner-background: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
+
+        banner-border-color: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+    )
+);

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

@@ -11,7 +11,8 @@
 
 /// @type {Map}
 /// @prop {Map} disabled-background [color: ('gray', 100)] - The disabled background color of the button.
-/// @prop {Color} disabled-foreground [color: ('gray', 500)] - The disabled foreground color of the button.
+/// @prop {Map} disabled-foreground [color: ('gray', 500)] - The disabled foreground color of the button.
+/// @prop {Map} disabled-icon-color [color: ('gray', 500)] - The disabled icon color of the button.
 $material-base-button-dark: (
     disabled-background: (
         color: (
@@ -25,6 +26,12 @@ $material-base-button-dark: (
             500,
         ),
     ),
+    disabled-icon-color: (
+        color: (
+            'gray',
+            500,
+        ),
+    ),
 );
 
 /// @type {Map}
@@ -84,6 +91,7 @@ $dark-material-button: (
 /// @prop {Map} focus-hover-background [color: ('gray', 50)] - The background color on focus hovered state of the button.
 /// @prop {Map} disabled-background [color: ('gray', 50)] - The disabled background color of the button.
 /// @prop {Map} disabled-foreground [color: ('gray', 200)] - The disabled foreground color of the button.
+/// @prop {Map} disabled-icon-color [color: ('gray', 200)] - The disabled icon color of the button.
 $fluent-base-button-dark: (
     focus-visible-border-color: (
         color: (
@@ -115,6 +123,12 @@ $fluent-base-button-dark: (
             200,
         ),
     ),
+    disabled-icon-color: (
+        color: (
+            'gray',
+            200,
+        ),
+    ),
 );
 
 /// @type {Map}
@@ -184,6 +198,8 @@ $fluent-outlined-button-dark: extend(
 /// @type {Map}
 /// @prop {Map} background [color: ('primary', 300)] - The background color of an contained button.
 /// @prop {Map} foreground [contrast-color: ('primary', 300)] - The idle text color of a contained button.
+/// @prop {Map} icon-color [contrast-color: ('primary', 300)] - The idle icon color of the button.
+/// @prop {Map} icon-color-hover [contrast-color: ('primary', 300)] - The hover icon color of the button.
 /// @prop {Map} focus-visible-border-color [contrast-color: ('primary', 300)] - The focus-visible border color of a contained button.
 /// @prop {Map} hover-background [color: ('primary', 200)] - The hover background of a contained button.
 /// @prop {Map} hover-foreground [contrast-color: ('primary', 500)] - The hover text color of a contained button.
@@ -213,6 +229,18 @@ $fluent-contained-button-dark: extend(
                 300,
             ),
         ),
+        icon-color: (
+            contrast-color: (
+                'primary',
+                300,
+            ),
+        ),
+        icon-color-hover: (
+            contrast-color: (
+                'primary',
+                300,
+            ),
+        ),
         hover-background: (
             color: (
                 'primary',
@@ -285,6 +313,8 @@ $fluent-contained-button-dark: extend(
 /// @type {Map}
 /// @prop {Map} background [color: ('primary', 300)] - The background color of an contained button.
 /// @prop {Map} foreground [contrast-color: ('primary', 300)] - The idle text color of a contained button.
+/// @prop {Map} icon-color [contrast-color: ('primary', 300)] - The idle icon color of the button.
+/// @prop {Map} icon-color-hover [contrast-color: ('primary', 300)] - The hover icon color of the button.
 /// @prop {Map} focus-visible-border-color [contrast-color: ('primary', 300)] - The focus-visible border color of a contained button.
 /// @prop {Map} active-border-color [color: ('primary', 200)] - The active border color of a contained button.
 /// @prop {Map} hover-background [color: ('primary', 200)] - The hover background of a contained button.
@@ -315,6 +345,18 @@ $fluent-fab-button-dark: extend(
                 300,
             ),
         ),
+        icon-color: (
+            contrast-color: (
+                'primary',
+                300,
+            ),
+        ),
+        icon-color-hover: (
+            contrast-color: (
+                'primary',
+                300,
+            ),
+        ),
         hover-background: (
             color: (
                 'primary',

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

@@ -11,7 +11,13 @@ $default-elevation-snackbar: (
 );
 
 /// @type Map
-/// @prop {Number} elevation [10] - The elevation level, between 0-24, to be used in the snackbar.
+/// @prop {Number} elevation [10] - The elevation level, between 0-24, to be used in the bootstrap snackbar.
 $bootstrap-elevation-snackbar: (
     elevation: 10,
 );
+
+/// @type Map
+/// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used in the indigo snackbar.
+$indigo-elevation-snackbar: (
+    elevation: 0,
+);

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

@@ -9,10 +9,10 @@
 
 /// Generates a light banner schema.
 /// @type {Map}
-/// @prop {Map} banner-background [color: 'surface']- The background color used banner background.
-/// @prop {Map} banner-message-color [contrast-color: 'surface']- The color used for banner label.
-/// @prop {Map} banner-border-color [color: ('gray', 400)] - The border color used banner border.
-/// @prop {Map} banner-illustration-color [contrast-color: 'surface'] - The color used banner illustration.
+/// @prop {Map} banner-background [color: 'surface'] - The color used for the banner background.
+/// @prop {Map} banner-message-color [contrast-color: 'surface'] - The color used for the banner label.
+/// @prop {Map} banner-border-color [color: ('gray', 400)] - The color used for the banner border.
+/// @prop {Map} banner-illustration-color [contrast-color: 'surface'] - The color used for the banner illustration.
 $light-banner: (
     banner-background: (
         color: 'surface',
@@ -46,9 +46,9 @@ $fluent-banner: $light-banner;
 
 /// Generates a bootstrap banner schema.
 /// @type {Map}
-/// @prop {Map} banner-background [contrast-color: ('gray', 900)] - The background color used banner background.
-/// @prop {Map} banner-message-color [color: ('gray', 800)] - The color used for banner label.
-/// @prop {Map} banner-illustration-color [color: ('gray', 800)] - The color used banner illustration.
+/// @prop {Map} banner-background [contrast-color: ('gray', 900)] - The color used for the banner background.
+/// @prop {Map} banner-message-color [color: ('gray', 800)] - The color used for the banner label.
+/// @prop {Map} banner-illustration-color [color: ('gray', 800)] - The color used for the banner illustration.
 /// @requires {Map} $light-banner
 $bootstrap-banner: extend(
     $light-banner,
@@ -78,24 +78,36 @@ $bootstrap-banner: extend(
 
 /// Generates an indigo banner schema.
 /// @type {Map}
-/// @prop {Map} banner-message-color [color: ('gray', 900)]- The color used for banner label.
-/// @prop {Map} banner-illustration-color [color: ('gray', 600)] - The color used banner illustration.
-/// @requires {Map} $light-banner
-$indigo-banner: extend(
-    $light-banner,
-    (
-        banner-message-color: (
-            color: (
-                'gray',
-                900,
-            ),
+/// @prop {Map} banner-background [color: ('gray', 200)] - The color used for the banner background.
+/// @prop {Map} banner-message-color [color: ('gray', 700)] - The color used for the banner label.
+/// @prop {Map} banner-border-color [color: ('gray', 300)] - The color used for the banner border.
+/// @prop {Map} banner-illustration-color [color: ('gray', 600)] - The color used for the banner illustration.
+$indigo-banner: (
+    banner-background: (
+        color: (
+            'gray',
+            200,
         ),
+    ),
 
-        banner-illustration-color: (
-            color: (
-                'gray',
-                600,
-            ),
+    banner-border-color: (
+        color: (
+            'gray',
+            300,
         ),
-    )
+    ),
+
+    banner-message-color: (
+        color: (
+            'gray',
+            700,
+        ),
+    ),
+
+    banner-illustration-color: (
+        color: (
+            'gray',
+            600,
+        ),
+    ),
 );

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

@@ -20,6 +20,7 @@
 /// @prop {Color} disabled-border-color [transparent] - The disabled border color of the button.
 /// @prop {Map} disabled-background [color: ('gray', 300)] - The disabled background color of the button.
 /// @prop {Map} disabled-foreground [color: ('gray', 500)] - The disabled foreground color of the button.
+/// @prop {Map} disabled-icon-color [color: ('gray', 500)] - The disabled icon color of the button.
 /// @prop {List} size [(rem(24px), rem(30px), rem(36px))] - The size used for the button.
 /// @prop {Number} default-size [1] - The default size used for the button component.
 $light-base-button: (
@@ -42,6 +43,12 @@ $light-base-button: (
             500,
         ),
     ),
+    disabled-icon-color: (
+        color: (
+            'gray',
+            500,
+        ),
+    ),
     size: (
         sizable: (
             rem(24px),
@@ -173,6 +180,8 @@ $material-base-button: $light-base-button;
 
 /// @type {Map}
 /// @prop {Map} foreground [color: ('secondary', 500)] - The idle text color of a flat button.
+/// @prop {Map} icon-color [color: ('secondary', 500)] - The idle icon color of the button.
+/// @prop {Map} icon-color-hover [color: ('secondary', 500)] - The hover icon color of the button.
 /// @prop {Map} hover-background [color: ('secondary', 500, .08)] - The hover background color of a flat button.
 /// @prop {Map} hover-foreground [color: ('secondary', 500)] - The hover text color of a flat button.
 /// @prop {Map} focus-background [color: ('secondary', 400, .16)] - The focus background color of a flat button.
@@ -196,6 +205,18 @@ $material-flat-button: extend(
                 500,
             ),
         ),
+        icon-color: (
+            color: (
+                'secondary',
+                500,
+            ),
+        ),
+        icon-color-hover: (
+            color: (
+                'secondary',
+                500,
+            ),
+        ),
         hover-background: (
             color: (
                 'secondary',
@@ -307,6 +328,8 @@ $material-outlined-button: extend(
 
 /// @type {Map}
 /// @prop {Map} foreground [contrast-color: ('secondary', 500)] - The idle text color of a contained button.
+/// @prop {Map} icon-color [color: ('secondary', 500)] - The idle icon color of the button.
+/// @prop {Map} icon-color-hover [color: ('secondary', 500)] - The hover icon color of the button.
 /// @prop {Map} hover-background [color: ('secondary', 400)] - The hover background color of a flat button.
 /// @prop {Map} hover-foreground [contrast-color: ('secondary', 400)] - The hover text color of a contained button.
 /// @prop {Map} focus-background [color: ('secondary', 300)] - The focus background color of a flat button.
@@ -329,6 +352,18 @@ $material-contained-button: extend(
                 500,
             ),
         ),
+        icon-color: (
+            contrast-color: (
+                'secondary',
+                500,
+            ),
+        ),
+        icon-color-hover: (
+            contrast-color: (
+                'secondary',
+                400,
+            ),
+        ),
         hover-background: (
             color: (
                 'secondary',
@@ -436,6 +471,8 @@ $material-button: (
 /// @requires {Map} $light-base-button
 /// @requires {Map} $flat-elevation-button
 /// @prop {Map} foreground [color: ('gray', 900)] - The idle text color of the button.
+/// @prop {Map} icon-color [color: ('gray', 900)] - The idle icon color of the button.
+/// @prop {Map} icon-color-hover [color: ('gray', 900)] - The hover icon color of the button.
 /// @prop {Map} focus-visible-border-color [color: ('gray', 700)] - The focus-visible border color of the button.
 /// @prop {Map} hover-foreground [color: ('gray', 900)] - The hover text color of the button.
 /// @prop {Color} focus-background [transparent] - The focus text color of the button.
@@ -444,7 +481,6 @@ $material-button: (
 /// @prop {Map} focus-hover-foreground [color: ('gray', 900)] - The focus-hover text color of the button.
 /// @prop {Color} focus-visible-background [transparent] - The focus-visible text color of the button.
 /// @prop {Map} disabled-background [color: ('gray', 100)] - The disabled background color of the button.
-/// @prop {Map} disabled-foreground [color: ('gray', 500)] - The disabled foreground color of the button.
 /// @prop {List} border-radius [(rem(2px), rem(0), rem(20px))] - The border radius used for outlined button.
 /// @prop {List} size [(rem(24px), rem(32px), rem(38px))] - The size used for the button.
 /// @prop {Number} default-size [2] - The default size used for the button component.
@@ -458,6 +494,18 @@ $fluent-base-button: extend(
                 900,
             ),
         ),
+        icon-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+        icon-color-hover: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
         focus-visible-border-color: (
             color: (
                 'gray',
@@ -502,12 +550,6 @@ $fluent-base-button: extend(
                 100,
             ),
         ),
-        disabled-foreground: (
-            color: (
-                'gray',
-                500,
-            ),
-        ),
         border-radius: (
             border-radius: (
                 rem(2px),
@@ -634,6 +676,8 @@ $fluent-outlined-button: extend(
 /// @prop {Map} focus-visible-border-color [contrast-color: ('primary', 900)] - The focus-visible border color of a contained button.
 /// @prop {Map} background [color: ('primary', 500)] - The background color of an contained button.
 /// @prop {Map} foreground [contrast-color: ('primary', 900)] - The idle text color of a contained button.
+/// @prop {Map} icon-color [contrast-color: ('primary', 900)] - The idle icon color of the button.
+/// @prop {Map} icon-color-hover [contrast-color: ('primary', 900)] - The hover icon color of the button.
 /// @prop {Map} hover-background [color: ('primary', 600)] - The hover background of a contained button.
 /// @prop {Map} hover-foreground [contrast-color: ('primary', 900)] - The hover text color of a contained button.
 /// @prop {Map} focus-background [color: ('primary', 500)] - The focus background color of a contained button.
@@ -673,6 +717,18 @@ $fluent-contained-button: extend(
                 900,
             ),
         ),
+        icon-color: (
+            contrast-color: (
+                'primary',
+                900,
+            ),
+        ),
+        icon-color-hover: (
+            contrast-color: (
+                'primary',
+                900,
+            ),
+        ),
         hover-background: (
             color: (
                 'primary',
@@ -789,6 +845,7 @@ $fluent-button: (
 /// @type {Map}
 /// @prop {Map} disabled-background [color: ('primary', 50)] - The disabled background color of the button.
 /// @prop {Map} disabled-foreground [color: ('primary', 200)] - The disabled foreground color of the button.
+/// @prop {Map} disabled-icon-color [color: ('primary', 200)] - The disabled icon color of the button.
 /// @prop {Map} shadow-color [color: ('primary', 200, .5)] - The shadow color of an outlined button.
 /// @prop {List} size [(rem(31px), rem(38px), rem(48px))] - The size used for the button.
 /// @prop {Number} default-size [2] - The default size used for the button component.
@@ -798,16 +855,22 @@ $bootstrap-base-button: extend(
     $light-base-button,
     $flat-elevation-button,
     (
+        disabled-background: (
+            color: (
+                'primary',
+                50,
+            ),
+        ),
         disabled-foreground: (
             color: (
                 'primary',
                 200,
             ),
         ),
-        disabled-background: (
+        disabled-icon-color: (
             color: (
                 'primary',
-                50,
+                200,
             ),
         ),
         shadow-color: (
@@ -830,6 +893,8 @@ $bootstrap-base-button: extend(
 
 /// @type {Map}
 /// @prop {Map} foreground [color: ('primary', 500)] - The idle text color of a flat button.
+/// @prop {Map} icon-color [color: ('primary', 500)] - The idle icon color of the button.
+/// @prop {Map} icon-color-hover [color: ('primary', 800)] - The hover icon color of the button.
 /// @prop {Color} hover-background [transparent] - The hover background color of a flat button.
 /// @prop {Map} hover-foreground [color: ('primary', 800)] - The hover text color of a flat button.
 /// @prop {Color} focus-background [transparent] - The focus background color of a flat button.
@@ -853,6 +918,18 @@ $bootstrap-flat-button: extend(
                 500,
             ),
         ),
+        icon-color: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+        icon-color-hover: (
+            color: (
+                'primary',
+                800,
+            ),
+        ),
         hover-background: transparent,
         hover-foreground: (
             color: (
@@ -894,6 +971,8 @@ $bootstrap-flat-button: extend(
 
 /// @type {Map}
 /// @prop {Map} foreground [color: ('primary', 500)] - The idle text color of an outlined button.
+/// @prop {Map} icon-color [color: ('primary', 500)] - The idle icon color of the button.
+/// @prop {Map} icon-color-hover [contrast-color: ('primary', 600)] - The hover icon color of the button.
 /// @prop {Map} hover-background [color: ('primary', 500)] - The hover background color of an outlined button.
 /// @prop {Map} hover-foreground [contrast-color: ('primary', 600)] - The hover text color of an outlined button.
 /// @prop {Color} focus-background [transparent] - The focus background color of an outlined button.
@@ -923,6 +1002,18 @@ $bootstrap-outlined-button: extend(
                 500,
             ),
         ),
+        icon-color: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+        icon-color-hover: (
+            contrast-color: (
+                'primary',
+                600,
+            ),
+        ),
         hover-background: (
             color: (
                 'primary',
@@ -1016,6 +1107,8 @@ $bootstrap-outlined-button: extend(
 /// @type {Map}
 /// @prop {Map} background [color: ('primary', 500)] - The background color of a contained button.
 /// @prop {Map} foreground [contrast-color: ('primary', 600)] - The idle text color of a contained button.
+/// @prop {Map} icon-color [contrast-color: ('primary', 600)] - The idle icon color of the button.
+/// @prop {Map} icon-color-hover [contrast-color: ('primary', 600)] - The hover icon color of the button.
 /// @prop {Map} hover-background [color: ('primary', 600)] - The hover background color of an contained button.
 /// @prop {Color} hover-foreground [contrast-color: ('primary', 600)] - The hover text color of an contained button.
 /// @prop {Map} focus-background [color: ('primary', 500)] - The focus background color of an contained button.
@@ -1044,6 +1137,18 @@ $bootstrap-contained-button: extend(
                 600,
             ),
         ),
+        icon-color: (
+            contrast-color: (
+                'primary',
+                600,
+            ),
+        ),
+        icon-color-hover: (
+            contrast-color: (
+                'primary',
+                600,
+            ),
+        ),
         hover-background: (
             color: (
                 'primary',

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

@@ -108,31 +108,32 @@ $bootstrap-snackbar: extend(
 
 /// Generates an indigo snackbar schema.
 /// @type {Map}
-/// @prop {Map} background [color: ('gray', 700, .9)] - The background color used in the snackbar.
-/// @prop {Map} text-color [contrast-color: ('gray', 700)] - The text color used in the snackbar.
-/// @prop {Map} button-color [contrast-color: ('gray', 700)] - The button color used in the snackbar.
+/// @prop {Map} background [color: ('gray', 200)] - The background color used in the snackbar.
+/// @prop {Map} text-color [color: ('gray', 700)] - The text color used in the snackbar.
+/// @prop {Map} button-color [color: ('gray', 700)] - The button color used in the snackbar.
 /// @prop {List} border-radius [(rem(6px), rem(0), rem(24px))] - The border radius used for snackbar.
 /// @requires $light-snackbar
+/// @requires {Map} $indigo-elevation-snackbar
 $indigo-snackbar: extend(
     $light-snackbar,
+    $indigo-elevation-snackbar,
     (
         background: (
             color: (
                 'gray',
-                700,
-                0.9,
+                200,
             ),
         ),
 
         text-color: (
-            contrast-color: (
+            color: (
                 'gray',
                 700,
             ),
         ),
 
         button-color: (
-            contrast-color: (
+            color: (
                 'gray',
                 700,
             ),