igniteui-theming 6.3.0 → 6.4.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "6.3.0",
+  "version": "6.4.0-beta.2",
   "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/_checkbox.scss

@@ -15,15 +15,64 @@ $dark-material-checkbox: $material-checkbox;
 
 /// Generates a dark fluent checkbox schema.
 /// @type {Map}
-/// @prop {Map} fill-color-hover [color: ('primary', 200)] - The checked border and fill colors on hover.
+/// @prop {Map} tick-color-hover [color: ('gray', 400)] - The checked mark color on hover when the control in unchecked.
+/// @prop {Map} focus-outline-color [color: ('gray', 400)] - The focus outlined color.
+/// @prop {Map} fill-color [color: ('primary', 300)] - The checked border and fill colors.
+/// @prop {Map} fill-color-hover [color: ('primary', 100)] - The checked border and fill colors on hover.
+/// @prop {Map} disabled-color [color: ('gray', 100)] - The disabled border and fill colors.
+/// @prop {Map} disabled-color-label [color: ('gray', 300)] - The disabled color of the label.
+/// @prop {Map} error-color [color: ('error', 100)] - The border and fill colors in invalid state.
+/// @prop {Map} error-color-hover [color: ('error', 50)] - The border and fill colors in invalid state on hover.
 /// @requires $fluent-checkbox
 $dark-fluent-checkbox: extend(
     $fluent-checkbox,
     (
+        tick-color-hover: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+        focus-outline-color: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+        fill-color: (
+            color: (
+                'primary',
+                300,
+            ),
+        ),
         fill-color-hover: (
             color: (
                 'primary',
-                200,
+                100,
+            ),
+        ),
+        disabled-color: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+        disabled-color-label: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+        error-color: (
+            color: (
+                'error',
+                100,
+            ),
+        ),
+        error-color-hover: (
+            color: (
+                'error',
+                50,
             ),
         ),
     )
@@ -31,15 +80,52 @@ $dark-fluent-checkbox: extend(
 
 /// Generates a dark bootstrap checkbox schema.
 /// @type {Map}
-/// @prop {Map} tick-color [color: ('gray', 900)] - The checked mark color.
+/// @prop {Map} focus-outline-color [color: ('primary', 900, 0.5)] - The focus outlined color.
+/// @prop {Map} focus-outline-color-error [color: ('error', 900, 0.5)] - The focus outlined color for focused invalid state.
+/// @prop {Map} disabled-color [color: ('gray', 100)] - The disabled border color.
+/// @prop {Map} disabled-color-label [color: ('gray', 300)] - The disabled color of the label.
+/// @prop {Map} error-color [color: ('error', 300)] - The border and fill colors in invalid state.
+/// @prop {Map} error-color-hover [color: ('error', 400)] - The border and fill colors in invalid state on hover.
 /// @requires $bootstrap-checkbox
 $dark-bootstrap-checkbox: extend(
     $bootstrap-checkbox,
     (
-        tick-color: (
+        focus-outline-color: (
             color: (
-                'gray',
+                'primary',
                 900,
+                0.5,
+            ),
+        ),
+        focus-outline-color-error: (
+            color: (
+                'error',
+                900,
+                0.5,
+            ),
+        ),
+        disabled-color: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+        disabled-color-label: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+        error-color: (
+            color: (
+                'error',
+                300,
+            ),
+        ),
+        error-color-hover: (
+            color: (
+                'error',
+                400,
             ),
         ),
     )

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

@@ -7,54 +7,52 @@
 /// @access public
 ////
 
-/// Generates a base dark navdrawer schema.
-/// @type {Map}
-/// @prop {Map} item-hover-background [color: ('gray', 100, .5)] - The item's hover background color.
-$dark-base-navdrawer: (
-    item-hover-background: (
-        color: (
-            'gray',
-            100,
-            0.5,
-        ),
-    ),
-);
-
 /// Generates a dark material navdrawer schema.
 /// @type {Map}
 /// @requires $material-navdrawer
-/// @requires $dark-base-navdrawer
-$dark-material-navdrawer: extend($material-navdrawer, $dark-base-navdrawer);
+$dark-material-navdrawer: extend($material-navdrawer);
 
 /// Generates a dark fluent navdrawer schema.
 /// @type {Map}
+/// @prop {Map} item-hover-icon-color [color: ('primary', 100)] - The item's hover icon color.
+/// @prop {Map} item-icon-color [color: ('primary', 200)] - The item's icon color.
+/// @prop {Map} item-hover-background [color: ('gray', 200, .12)] - The item's hover background color.
 /// @prop {Map} item-active-text-color [color: ('primary', 200)] - The item's active text color.
 /// @prop {Map} item-active-icon-color [color: ('primary', 100)] - The item's icon active color.
-/// @prop {Map} item-active-background [color: ('primary', 400, .12)] - The item's active background color.
+/// @prop {Map} item-active-background [color: ('primary', 300, .12)] - The item's active background color.
 /// @requires $fluent-navdrawer
-/// @requires $dark-base-navdrawer
 $dark-fluent-navdrawer: extend(
     $fluent-navdrawer,
-    $dark-base-navdrawer,
     (
-        item-active-text-color: (
+        item-hover-icon-color: (
+            color: (
+                'primary',
+                100,
+            ),
+        ),
+        item-icon-color: (
             color: (
                 'primary',
                 200,
             ),
         ),
-
+        item-hover-background: (
+            color: (
+                'gray',
+                200,
+                0.12,
+            ),
+        ),
         item-active-icon-color: (
             color: (
                 'primary',
-                100,
+                50,
             ),
         ),
-
         item-active-background: (
             color: (
-                'primary',
-                400,
+                'gray',
+                300,
                 0.12,
             ),
         ),
@@ -65,10 +63,8 @@ $dark-fluent-navdrawer: extend(
 /// @type {Map}
 /// @prop {Map} item-hover-background [color: ('gray', 100)] - The item's hover background color.
 /// @requires $bootstrap-navdrawer
-/// @requires $dark-base-navdrawer
 $dark-bootstrap-navdrawer: extend(
     $bootstrap-navdrawer,
-    $dark-base-navdrawer,
     (
         item-hover-background: (
             color: (

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

@@ -8,25 +8,6 @@
 /// @access public
 ////
 
-/// Generates a base dark radio schema.
-/// @type {Map}
-/// @prop {Map} fill-color-hover [color: ('gray', 900)] - The checked border and dot colors on hover.
-/// @prop {Map} fill-hover-border-color [color: ('gray', 900)] - The text color used for the label text.
-$base-dark-radio: (
-    fill-color-hover: (
-        color: (
-            'gray',
-            900,
-        ),
-    ),
-    fill-hover-border-color: (
-        color: (
-            'gray',
-            900,
-        ),
-    ),
-);
-
 /// Generates a dark material radio schema.
 /// @type {Map}
 /// @requires $material-radio
@@ -38,7 +19,9 @@ $dark-material-radio: $material-radio;
 /// @prop {Map} fill-color [color: ('primary', 300)] - The checked border and dot colors.
 /// @prop {Map} fill-hover-border-color [color: ('primary', 100)] - The text color used for the label text.
 /// @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} focus-outline-color [color: ('gray', 400)] - The focus outlined color.
+/// @prop {Map} error-color [color: ('error', 100)] - The label, border and dot color in invalid state.
+/// @prop {Map} error-color-hover [color: ('error', 50)] - 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.
@@ -70,10 +53,22 @@ $dark-fluent-radio: extend(
                 100,
             ),
         ),
+        focus-outline-color: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+        error-color: (
+            color: (
+                'error',
+                100,
+            ),
+        ),
         error-color-hover: (
             color: (
                 'error',
-                200,
+                50,
             ),
         ),
         disabled-color: (
@@ -100,8 +95,55 @@ $dark-fluent-radio: extend(
 /// Generates a dark bootstrap radio schema.
 /// @type {Map}
 /// @requires $bootstrap-radio
-/// @requires $base-dark-radio
-$dark-bootstrap-radio: extend($bootstrap-radio, $base-dark-radio);
+/// @prop {Map} focus-outline-color [color: ('primary', 900, 0.5)] - The focus outline color.
+/// @prop {Map} focus-outline-color-error [color: ('error', 900, 0.5)] - The focus outline color when radio is invalid.
+/// @prop {Map} error-color [color: ('error', 300)] - The label, border and dot color in invalid state.
+/// @prop {Map} error-color-hover [color: ('error', 400)] - The focus outlined color in invalid state.
+/// @prop {Map} disabled-color [color: ('gray', 100)] - The disabled border color.
+/// @prop {Map} disabled-label-color [color: ('gray', 300)] - The disabled label color.
+$dark-bootstrap-radio: extend(
+    $bootstrap-radio,
+    (
+        focus-outline-color: (
+            color: (
+                'primary',
+                900,
+                0.5,
+            ),
+        ),
+        focus-outline-color-error: (
+            color: (
+                'error',
+                900,
+                0.5,
+            ),
+        ),
+        error-color: (
+            color: (
+                'error',
+                300,
+            ),
+        ),
+        error-color-hover: (
+            color: (
+                'error',
+                400,
+            ),
+        ),
+        disabled-color: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+        disabled-label-color: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+    )
+);
 
 /// Generates a dark indigo radio schema.
 /// @type {Map}
@@ -116,7 +158,6 @@ $dark-bootstrap-radio: extend($bootstrap-radio, $base-dark-radio);
 /// @prop {Map} error-color-hover [color: ('error', 300)] - 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.
 /// @requires $indigo-radio
-/// @requires $base-dark-radio
 $dark-indigo-radio: extend(
     $indigo-radio,
     (

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

@@ -9,52 +9,60 @@
 ////
 
 /* stylelint-disable max-line-length */
-
-/// Generates a base dark switch schema.
-/// @type {Map}
-/// @prop {Color} thumb-disabled-color [color: ('gray', 200)] - The color of the thumb when the switch is disabled.
-$base-dark-switch: (
-    thumb-disabled-color: (
-        color: (
-            'gray',
-            200,
-        ),
-    ),
-);
-
 /// Generates a dark material switch schema.
 /// @type {Map}
+/// @prop {Map} thumb-off-color [color: ('gray', 100)] - The color of the thumb when the switch is off.
+/// @prop {Map} thumb-disabled-color [color: ('gray', 200)] - The color of the thumb when the switch is disabled.
 /// @requires $material-switch
-/// @requires $base-dark-switch
-$dark-material-switch: extend($material-switch, $base-dark-switch);
+$dark-material-switch: extend(
+    $material-switch,
+    (
+        thumb-off-color: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+        thumb-disabled-color: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+    )
+);
 
 /// Generates a dark fluent switch schema.
 /// @type {Map}
-/// @prop {Map} border-color [color: ('gray', 500)] - The border color of the switch.
+/// @prop {Map} focus-outline-color [color: ('gray', 400)] - The focus outlined color.
+/// @prop {Map} border-color [color: ('gray', 400)] - The border color of the switch.
 /// @prop {Map} border-on-color [color: ('primary', 300)] - The border color of the on-switch.
-/// @prop {Map} border-on-hover-color [color: ('primary', 100)] - The border color of the on-switch.
-/// @prop {Map} border-disabled-color [color: ('gray', 200)] - The border color of the disabled switch.
+/// @prop {Map} border-on-hover-color [color('primary',100)] - The border color of the on-switch.
 /// @prop {Map} track-on-color [color: ('primary', 300)] - The color of the track when the switch is on.
-/// @prop {Map} track-on-disabled-color [color: ('gray', 200)] - The color of the track when the switch is on and disabled.
 /// @prop {Map} track-on-hover-color [color: ('primary', 100)] - 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} track-off-color [color: ('gray', 50)] - The color of the track when the switch is off.
+/// @prop {Map} thumb-off-color [color: ('gray', 400)] - The color of the thumb when the switch is off.
+/// @prop {Map} label-disabled-color [color: ('gray', 300)] - The color of the switch label when the switch is disabled
+/// @prop {Map} border-disabled-color [color: ('gray', 100)] - The border color of the disabled switch.
+/// @prop {Map} track-disabled-color [color: ('gray', 50)] - The color of the track when the switch is disabled.
+/// @prop {Map} track-on-disabled-color [color: ('gray', 100)] - The color of the track when the switch is on and disabled.
+/// @prop {Map} thumb-disabled-color [color: ('gray', 100)] - The color of the thumb when the switch is disabled.
+/// @prop {Map} thumb-on-disabled-color [color: ('gray', 50)] - The color of the thumb when the switch is on and disabled.
 /// @prop {Map} error-color [color: ('gray', 500)] - The border and thumb color in invalid state.
 /// @requires $fluent-switch
-/// @requires $base-dark-switch
 $dark-fluent-switch: extend(
     $fluent-switch,
-    $base-dark-switch,
     (
-        border-color: (
+        focus-outline-color: (
             color: (
                 'gray',
-                500,
+                400,
             ),
         ),
-        thumb-off-color: (
+        border-color: (
             color: (
                 'gray',
-                500,
+                400,
             ),
         ),
         border-on-color: (
@@ -75,22 +83,58 @@ $dark-fluent-switch: extend(
                 300,
             ),
         ),
+        track-off-color: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
         track-on-hover-color: (
             color: (
                 'primary',
                 100,
             ),
         ),
+        thumb-off-color: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+        label-disabled-color: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
         border-disabled-color: (
             color: (
                 'gray',
-                200,
+                100,
+            ),
+        ),
+        track-disabled-color: (
+            color: (
+                'gray',
+                50,
             ),
         ),
         track-on-disabled-color: (
             color: (
                 'gray',
-                200,
+                100,
+            ),
+        ),
+        thumb-disabled-color: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+        thumb-on-disabled-color: (
+            color: (
+                'gray',
+                50,
             ),
         ),
         error-color: (
@@ -105,30 +149,40 @@ $dark-fluent-switch: extend(
 /// Generates a dark bootstrap switch schema.
 /// @type {Map}
 /// @prop {Map} thumb-on-color [color: ('gray', 900)] - The color of the thumb when the switch is on.
-/// @prop {Map} thumb-on-disabled-color [color: ('gray', 900)] - The color of the thumb when the switch is on and disabled.
-/// @prop {Map} thumb-on-error-color [color: ('gray', 900)] - The color of the thumb when the switch is on and invalid.
+/// @prop {Map} label-disabled-color [color: ('gray', 300)] - The color of the switch label when the switch is disabled
+/// @prop {Map} border-disabled-color [color: ('gray', 100)] - The border color of the disabled switch.
+/// @prop {Map} track-disabled-color [color: 'surface'] - The color of the track when the switch is on and disabled.
+/// @prop {Map} thumb-disabled-color [color: ('gray', 100)] - The color of the thumb when the switch is on and disabled.
 /// @requires $bootstrap-switch
-/// @requires $base-dark-switch
 $dark-bootstrap-switch: extend(
     $bootstrap-switch,
-    $base-dark-switch,
     (
-        thumb-on-color: (
+        focus-outline-color: (
             color: (
-                'gray',
+                'primary',
                 900,
+                0.5,
             ),
         ),
-        thumb-on-disabled-color: (
+        label-disabled-color: (
             color: (
                 'gray',
-                900,
+                300,
             ),
         ),
-        thumb-on-error-color: (
+        border-disabled-color: (
             color: (
                 'gray',
-                900,
+                100,
+            ),
+        ),
+        track-disabled-color: (
+            color: 'surface',
+        ),
+        thumb-disabled-color: (
+            color: (
+                'gray',
+                100,
             ),
         ),
     )

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

@@ -7,11 +7,5 @@
 /// @type Map
 /// @prop {Map} elevation [16] - The elevation level, between 0-24, to be used for the drawer.
 $default-elevation-navdrawer: (
-    elevation: 16,
-);
-
-/// @type Map
-/// @prop {Map} elevation [0] - The elevation level, between 0-24, to be used for the drawer.
-$indigo-elevation-navdrawer: (
     elevation: 0,
 );

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

@@ -5,11 +5,11 @@
 ////
 
 /// @type Map
-/// @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} resting-elevation [1] - The elevation level, between 0-24, to be used for the resting state.
+/// @prop {Number} hover-elevation [1] - 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.
 $default-elevation-switch: (
-    resting-elevation: 2,
-    hover-elevation: 3,
+    resting-elevation: 1,
+    hover-elevation: 1,
     disabled-elevation: 1,
 );