igniteui-theming 6.2.0-beta.2 → 6.2.0

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

@@ -11,6 +11,7 @@
 
 /// Generates a base material icon button schema.
 /// @type {Map}
+/// @prop {Color} shadow-color [transparent] - The shadow color of the material icon button.
 /// @prop {Color} background [transparent] - The background color of the material icon button.
 /// @prop {Map} foreground [color: ('gray', 900)] - The idle text color of the material icon button.
 /// @prop {Color} hover-background [transparent] - The hover background color of the material icon button.
@@ -30,6 +31,7 @@
 /// @prop {List} size [(rem(24px), rem(30px), rem(36px))] - The size used for the material icon button.
 /// @prop {Number} default-size [2] - The default size used for the icon button.
 $material-base-icon-button: (
+    shadow-color: transparent,
     background: transparent,
     foreground: (
         color: (
@@ -220,6 +222,7 @@ $material-icon-button: (
 
 /// Generates a fluent base icon button schema.
 /// @type {Map}
+/// @prop {Color} shadow-color [transparent] - The shadow color of the fluent icon button.
 /// @prop {Color} background [transparent] - The background color of the fluent icon button.
 /// @prop {Map} foreground [color: ('primary', 500)] - The idle text color of the fluent icon button.
 /// @prop {Map} hover-background [color: ('gray', 200)] - The hover background color of the fluent icon button.
@@ -239,6 +242,7 @@ $material-icon-button: (
 /// @prop {List} size [(rem(24px), rem(32px), rem(38px))] - The size used for the fluent icon button.
 /// @prop {Number} default-size [2] - The default size used for the icon button.
 $fluent-base-icon-button: (
+    shadow-color: transparent,
     background: transparent,
     foreground: (
         color: (
@@ -513,6 +517,7 @@ $fluent-icon-button: (
 
 /// Generates a base bootstrap icon button schema.
 /// @type {Map}
+/// @prop {Map} shadow-color [color: ('primary', 600, .5)] - The shadow color of the bootstrap icon button.
 /// @prop {Color} background [transparent] - The background color of the bootstrap icon button.
 /// @prop {Map} foreground [color: ('primary', 500)] - The idle text color of the bootstrap icon button.
 /// @prop {Map} hover-background [color: ('primary', 600)] - The hover background color of the bootstrap icon button.
@@ -524,7 +529,7 @@ $fluent-icon-button: (
 /// @prop {Map} active-background [color: ('primary', 600)] - The active background color of the bootstrap icon button.
 /// @prop {Map} active-foreground [contrast-color: ('primary', 600)] - The active text color of the bootstrap icon button.
 /// @prop {Color} border-color [transparent] - The border color of the bootstrap icon button.
-/// @prop {Map} focus-border-color [color:('primary', 200, 0.5)] - The focus border color of the bootstrap icon button.
+/// @prop {Map} focus-border-color [transparent] - The focus border color of the bootstrap icon button.
 /// @prop {Color} disabled-background [transparent] - The disabled background color of the bootstrap icon button.
 /// @prop {Map} disabled-foreground [color: ('primary', 200)] - The disabled foreground color of the bootstrap icon button.
 /// @prop {Color} disabled-border-color [transparent] - The disabled border color of the bootstrap icon button.
@@ -532,6 +537,13 @@ $fluent-icon-button: (
 /// @prop {List} size [(rem(31px), rem(38px), rem(48px))] - The size used for the bootstrap icon button.
 /// @prop {Number} default-size [2] - The default size used for the icon button
 $bootstrap-base-icon-button: (
+    shadow-color: (
+        color: (
+            'primary',
+            600,
+            0.5,
+        ),
+    ),
     background: transparent,
     foreground: (
         color: (
@@ -583,13 +595,7 @@ $bootstrap-base-icon-button: (
         ),
     ),
     border-color: transparent,
-    focus-border-color: (
-        color: (
-            'primary',
-            200,
-            0.5,
-        ),
-    ),
+    focus-border-color: transparent,
     disabled-background: transparent,
     disabled-foreground: (
         color: (
@@ -670,7 +676,6 @@ $bootstrap-flat-icon-button: extend(
 /// @prop {Map} background [color: ('primary', 500)] - The background color of the bootstrap contained icon button.
 /// @prop {Map} foreground [contrast-color: ('primary', 600)] - The idle text color of the bootstrap contained icon button.
 /// @prop {Map} focus-background [color: ('primary', 500)] - The focus background color of the bootstrap flat icon button.
-/// @prop {Map} focus-border-color [color: ('primary', 200, .5)] - The focus border color of the bootstrap contained icon button.
 /// @prop {Map} disabled-background [color: ('primary', 50)] - The disabled background color of the bootstrap contained icon button.
 /// @prop {Map} disabled-foreground [color: ('primary', 200)] - The disabled foreground color of the bootstrap contained icon button.
 /// @requires {Map} $bootstrap-base-icon-button
@@ -717,7 +722,7 @@ $bootstrap-contained-icon-button: extend(
 /// @prop {Map} focus-background [color: ('primary', 600)] - The focus background color of the bootstrap outlined icon button.
 /// @prop {Map} hover-foreground [contrast-color: ('primary', 600)] - The hover text color of the bootstrap outlined icon button.
 /// @prop {Map} focus-foreground [contrast-color: ('primary', 500)] - The focus text color of the bootstrap outlined icon button.
-/// @prop {Map} focus-border-color [color: ('primary', 200, .5)] - The focus border color of the bootstrap outlined icon button.
+/// @prop {Map} focus-border-color [color: ('primary', 500)] - The focus border color of the bootstrap outlined icon button.
 /// @prop {Map} disabled-border-color [color: ('primary', 100)] - The disabled border color of the bootstrap outlined icon button.
 /// @requires {Map} $bootstrap-base-icon-button
 $bootstrap-outlined-icon-button: extend(
@@ -742,6 +747,12 @@ $bootstrap-outlined-icon-button: extend(
                 500,
             ),
         ),
+        focus-border-color: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
         disabled-border-color: (
             color: (
                 'primary',
@@ -766,6 +777,7 @@ $bootstrap-icon-button: (
 
 /// Generates a base indigo icon button schema.
 /// @type {Map}
+/// @prop {Map} shadow-color [color: ('gray', 900, .15)] - The shadow color of the indigo icon button.
 /// @prop {Color} background [transparent] - The background color of the indigo icon button.
 /// @prop {Map} foreground [color: ('gray', 600)] - The idle text color of the indigo icon button.
 /// @prop {Map} hover-background [color: ('gray', 900, 0.5)] - The hover background color of the indigo icon button.
@@ -785,6 +797,13 @@ $bootstrap-icon-button: (
 /// @prop {List} size [(rem(24px), rem(28px), rem(32px))] - The size used for the indigo icon button.
 /// @prop {Number} default-size [2] - The default size used for the icon button.
 $indigo-base-icon-button: (
+    shadow-color: (
+        color: (
+            'gray',
+            900,
+            0.15,
+        ),
+    ),
     background: transparent,
     foreground: (
         color: (
@@ -903,6 +922,7 @@ $indigo-outlined-icon-button: extend(
 
 /// Generates an indigo contained icon button schema.
 /// @type {Map}
+/// @prop {Map} shadow-color [color: ('primary', 400, 0.5)] - The shadow color of the indigo contained icon button.
 /// @prop {Map} background [color: ('primary', 500)] - The background 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.
@@ -921,6 +941,13 @@ $indigo-contained-icon-button: extend(
     $indigo-base-icon-button,
     (
         selector: '[igxIconButton="contained"], .igx-icon-button--contained',
+        shadow-color: (
+            color: (
+                'primary',
+                400,
+                0.5,
+            ),
+        ),
         background: (
             color: (
                 'primary',

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

@@ -135,4 +135,5 @@ $bootstrap-navbar: extend(
 /// @type {Map}
 /// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the navbar.
 /// @requires {Map} $light-navbar
-$indigo-navbar: $light-navbar;
+/// @requires {Map} $indigo-elevation-navbar
+$indigo-navbar: extend($light-navbar, $indigo-elevation-navbar);

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

@@ -150,101 +150,100 @@ $bootstrap-navdrawer: extend(
 
 /// Generates an indigo navdrawer schema.
 /// @type {Map}
-/// @prop {Map} item-header-text-color [color: ('gray', 600)] - The header's idle text color.
-/// @prop {Map} item-text-color [color: ('gray', 800)] - The item's idle text color.
-/// @prop {Map} item-icon-color [color: ('gray', 600)] - The item's icon color.
-/// @prop {Map} item-active-text-color [color: ('primary', 500)] - The item's active text color.
-/// @prop {Map} item-active-background [color: ('primary', 300, .3)] - The item's active background color.
-/// @prop {Map} item-active-icon-color [color: ('primary', 500)] - The item's icon active color.
-/// @prop {Map} item-hover-background [color: ('gray', 900, 0.05)] - The item's hover background color.
-/// @prop {Map} item-hover-text-color [color: ('gray', 900)] - The item's hover text color.
-/// @prop {Map} item-hover-icon-color [color: ('gray', 700)] - The item's hover icon color.
+/// @prop {Map} background [color: ('gray', 700)] - The navigation drawer background color.
+/// @prop {Map} item-header-text-color [contrast-color: ('gray', 700)] - The header's idle text color.
+/// @prop {Map} item-text-color [contrast-color: ('gray', 700, .8)] - The item's idle text color.
+/// @prop {Map} item-icon-color [contrast-color: ('gray', 700, .8)] - The item's icon color.
+/// @prop {Map} item-active-text-color [contrast-color: ('gray', 700)] - The item's active text color.
+/// @prop {Map} item-active-background [contrast-color: ('gray', 700, .1)] - The item's active background color.
+/// @prop {Map} item-active-icon-color [contrast-color: ('gray', 700)] - The item's icon active color.
+/// @prop {Color} item-hover-background [transparent] - The item's hover background color.
+/// @prop {Map} item-hover-text-color [contrast-color: ('gray', 700)] - The item's hover text color.
+/// @prop {Map} item-hover-icon-color [contrast-color: ('gray', 700)] - The item's hover icon color.
 /// @prop {Map} elevation [0] - The elevation level, between 0-24, to be used for the drawer.
-/// @prop {Map} border-color [color: ('gray', 300)] - The navigation drawer right border color.
-/// @prop {List} item-border-radius [(rem(4px), rem(0), rem(4px))] - The border radius used for the navdrawer items.
+/// @prop {Color} border-color [transparent] - The navigation drawer right border color.
+/// @prop {List} item-border-radius [(rem(24px), rem(0), rem(24px))] - The border radius used for the navdrawer items.
 /// @requires {Map} $light-navdrawer
 /// @requires {Map} $indigo-elevation-navdrawer
 $indigo-navdrawer: extend(
     $light-navdrawer,
     $indigo-elevation-navdrawer,
     (
-        border-color: (
+        border-color: transparent,
+
+        background: (
             color: (
                 'gray',
-                300,
+                700,
             ),
         ),
 
         item-header-text-color: (
             color: (
                 'gray',
-                600,
+                50,
             ),
         ),
 
         item-text-color: (
             color: (
                 'gray',
-                800,
+                300,
+                0.8,
             ),
         ),
 
         item-icon-color: (
             color: (
                 'gray',
-                600,
+                300,
+                0.8,
             ),
         ),
 
         item-active-background: (
             color: (
-                'primary',
-                300,
-                0.3,
+                'gray',
+                600,
+                0.8,
             ),
         ),
 
         item-active-text-color: (
             color: (
-                'primary',
-                500,
+                'gray',
+                50,
             ),
         ),
 
         item-active-icon-color: (
-            color: (
-                'primary',
-                500,
-            ),
-        ),
-
-        item-hover-background: (
             color: (
                 'gray',
-                900,
-                0.05,
+                50,
             ),
         ),
 
+        item-hover-background: transparent,
+
         item-hover-text-color: (
             color: (
                 'gray',
-                900,
+                100,
             ),
         ),
 
         item-hover-icon-color: (
             color: (
                 'gray',
-                700,
+                100,
             ),
         ),
 
         item-border-radius: (
             border-radius: (
-                rem(4px),
+                rem(24px),
                 rem(0),
-                rem(4px),
+                rem(24px),
             ),
         ),
     )

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

@@ -17,15 +17,14 @@
 /// @prop {Color} track-off-color [transparent] - The color of the track when the switch is off.
 /// @prop {Map} thumb-on-disabled-color [color: ('secondary', 100)] - The color of the thumb when the switch is on and disabled.
 /// @prop {Color} track-disabled-color [transparent] - The color of the track when the switch is disabled.
-/// @prop {Map} label-color [color: ('gray', 900)] - The color of the switch label.
-/// @prop {Map} label-hover-color [color: ('gray', 900)] - The color of the switch label on hover.
+/// @prop {Map} label-color [color: ('gray', 900)] - The color of the switch label
 /// @prop {Map} label-disabled-color [color: ('gray', 500)] - The color of the switch label when the switch is disabled
 /// @prop {Number} resting-elevation [2] - The elevation level, between 0-24, to be used for the resting state.
 /// @prop {Number} hover-elevation [3] - The elevation level, between 0-24, to be used for the hover state.
 /// @prop {Number} disabled-elevation [1] - The elevation level, between 0-24, to be used for the disabled state.
 /// @prop {List} border-radius-thumb [(rem(10px), rem(0), rem(10px))] - The border radius used for switch thumb.
 /// @prop {List} border-radius-ripple [(rem(24px), rem(0), rem(24px))] - The border radius used for switch ripple.
-/// @prop {Map} border-on-color [color: ('primary', 500)] - The border color of the on-switch.
+/// @prop {Map} border-on-color [color('primary', 500)] - The border color of the on-switch.
 /// @prop {Map} label-invalid-color [color: ('gray', 900)] - The color of the switch label in invalid state.
 /// @prop {Map} track-on-disabled-color [color: ('secondary', 50)] - The color of the track when the switch is on and disabled.
 /// @prop {Map} track-error-color [color: ('gray', 500)] - The color of the track in invalid state when the switch is off.
@@ -66,12 +65,6 @@ $light-switch: extend(
                 900,
             ),
         ),
-        label-hover-color: (
-            color: (
-                'gray',
-                900,
-            ),
-        ),
         label-disabled-color: (
             color: (
                 'gray',
@@ -125,7 +118,7 @@ $light-switch: extend(
 /// @prop {Color} border-color [transparent] - The border color of the switch.
 /// @prop {Color} border-hover-color [transparent] - The border color of the switch on hover.
 /// @prop {Color} border-on-color [transparent] - The border color of the on-switch.
-/// @prop {Color} border-on-hover-color [transparent] - The hover border color when the switch is on.
+/// @prop {Color} border-on-hover-color [transparent] - The border color of the  on-switch.
 /// @prop {Color} border-disabled-color [transparent] - The border color of the disabled switch.
 /// @prop {Map} thumb-on-color [color: ('secondary', 500)] - The color of the thumb when the switch is on.
 /// @prop {Map} thumb-off-color [color: ('gray', 50)] - The color of the thumb when the switch is off.
@@ -133,7 +126,6 @@ $light-switch: extend(
 /// @prop {Map} thumb-on-error-color [color: ('secondary', 500)] - The color of the thumb when the switch is on and invalid.
 /// @prop {Map} track-off-color [color: ('gray', 500)] - The color of the track when the switch is off.
 /// @prop {Map} track-on-color [color: ('secondary', 200)] - The color of the track when the switch is on.
-/// @prop {Map} track-on-hover-color [color: ('secondary', 200)] - The color of the track when the switch is on and hovered.
 /// @prop {Map} track-disabled-color [color: ('gray', 300)] - The color of the track when the switch is disabled.
 /// @prop {Map} error-color [color: ('gray', 50)] - The color of the thumb in invalid state.
 /// @prop {Map} error-color-hover [color: ('gray', 500)] - The border color in invalid state on hover.
@@ -184,12 +176,6 @@ $material-switch: extend(
                 200,
             ),
         ),
-        track-on-hover-color: (
-            color: (
-                'secondary',
-                200,
-            ),
-        ),
         track-disabled-color: (
             color: (
                 'gray',
@@ -220,10 +206,10 @@ $material-switch: extend(
 
 /// Generates a fluent switch schema.
 /// @type {Map}
-/// @prop {Map} border-color [color: ('gray', 700)] - The border color of the switch.
-/// @prop {Map} border-hover-color [color: ('gray', 800)] - The border color of the switch on hover.
-/// @prop {Map} border-disabled-color [color: ('gray', 400)] - The border color of the disabled switch.
-/// @prop {Map} border-on-hover-color [color: ('primary', 800)] - The hover border color when the switch is on.
+/// @prop {Map} border-color [color('gray', 700)] - The border color of the switch.
+/// @prop {Map} border-hover-color [color('gray', 800)] - The border color of the switch on hover.
+/// @prop {Map} border-disabled-color [color('gray', 400)] - The border color of the disabled switch.
+/// @prop {Map} border-on-hover-color [color('primary', 800)] - The border color of the on-switch.
 /// @prop {Map} thumb-off-color [color: ('gray', 700)] - The color of the thumb when the switch is off.
 /// @prop {Map} track-on-hover-color [color: ('primary', 800)] - The color of the track when the switch is on and hovered.
 /// @prop {Map} track-on-disabled-color [color: ('gray', 400)] - The color of the track when the switch is on and disabled.
@@ -416,86 +402,33 @@ $bootstrap-switch: extend(
 
 /// Generates an indigo switch schema.
 /// @type {Map}
-/// @prop {Map} label-color [color: ('gray', 800)] - The color of the switch label.
-/// @prop {Map} label-invalid-color [color: ('gray', 800)] - The color of the switch label in invalid state.
-/// @prop {Map} label-disabled-color [color: ('gray', 900, .2)] - The color of the switch label when the switch is disabled
-/// @prop {Map} thumb-on-color [contrast-color: ('gray', 900)] - The color of the thumb when the switch is on.
-/// @prop {Map} track-on-hover-color [color: ('primary', 400)] - The color of the track when the switch is on and hovered.
-/// @prop {Map} thumb-off-color [color: ('gray', 500)] - The color of the thumb when the switch is off.
-/// @prop {Map} thumb-disabled-color [color: ('gray', 900, .15)] - The color of the thumb when the switch is disabled.
-/// @prop {Map} thumb-on-disabled-color [contrast-color: ('gray', 900, .4)] - The color of the thumb when the switch is on and disabled.
-/// @prop {Map} track-on-disabled-color [color: ('primary', 400, .5)] - The color of the track when the switch is on and disabled.
-/// @prop {Map} border-color [color: ('gray', 500)] - The border color of the switch.
+/// @prop {Map} thumb-off-color [color: ('gray', 600)] - The color of the thumb when the switch is off.
+/// @prop {Map} thumb-disabled-color [color: ('gray', 300)] - The color of the thumb when the switch is disabled.
+/// @prop {Map} border-color [color: ('gray', 600)] - The border color of the switch.
 /// @prop {Map} border-hover-color [color: ('gray', 600)] - The border color of the switch on hover.
-/// @prop {Map} border-disabled-color [color: ('gray', 900, .15)] - The border color of the disabled switch.
-/// @prop {Map} border-on-hover-color [color: ('primary', 400)] - The hover border color when the switch is on.
+/// @prop {Map} border-disabled-color [color: ('gray', 300)] - The border color of the disabled switch.
+/// @prop {Map} border-on-hover-color [color: ('primary', 500)] - The border color of the  on-switch.
+/// @prop {Map} label-disabled-color [color: ('gray', 300)] - The color of the switch label when the switch is disabled
 /// @prop {Map} error-color [color: ('gray', 500)] - The border and thumb color in invalid state.
 /// @prop {Map} error-color-hover [color: ('gray', 300)] - The border and thumb color in invalid state on hover.
 /// @prop {Color} track-error-color [transparent] - The color of the track in invalid state when the switch is off.
 /// @prop {List} border-radius-track [(rem(8px), rem(0), rem(8px))] - The border radius used for switch track.
-/// @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 [color: ('gray', 300)] - The focus outlined color.
+/// @prop {Map} focus-outline-color-focused [color: ('primary', 200)] - The focus outlined color for focused state.
 /// @requires $light-switch
 $indigo-switch: extend(
     $light-switch,
     (
-        label-color: (
-            color: (
-                'gray',
-                800,
-            ),
-        ),
-        label-invalid-color: (
-            color: (
-                'gray',
-                800,
-            ),
-        ),
-        label-disabled-color: (
-            color: (
-                'gray',
-                900,
-                0.2,
-            ),
-        ),
-        thumb-on-color: (
-            contrast-color: (
-                'gray',
-                900,
-            ),
-        ),
-        thumb-on-disabled-color: (
-            contrast-color: (
-                'gray',
-                900,
-                0.4,
-            ),
-        ),
-        track-on-hover-color: (
-            color: (
-                'primary',
-                400,
-            ),
-        ),
-        track-on-disabled-color: (
-            color: (
-                'primary',
-                400,
-                0.5,
-            ),
-        ),
         focus-outline-color: (
             color: (
                 'gray',
-                900,
-                0.15,
+                300,
             ),
         ),
         focus-outline-color-focused: (
             color: (
                 'primary',
-                400,
-                0.5,
+                200,
             ),
         ),
         border-color: (
@@ -507,26 +440,25 @@ $indigo-switch: extend(
         border-hover-color: (
             color: (
                 'gray',
-                600,
+                500,
             ),
         ),
         border-disabled-color: (
             color: (
                 'gray',
-                900,
-                0.15,
+                300,
             ),
         ),
         border-on-hover-color: (
             color: (
                 'primary',
-                400,
+                500,
             ),
         ),
         thumb-off-color: (
             color: (
                 'gray',
-                500,
+                600,
             ),
         ),
         error-color: (
@@ -545,8 +477,13 @@ $indigo-switch: extend(
         thumb-disabled-color: (
             color: (
                 'gray',
-                900,
-                0.15,
+                300,
+            ),
+        ),
+        label-disabled-color: (
+            color: (
+                'gray',
+                300,
             ),
         ),
         border-radius-track: (