igniteui-theming 6.3.0-beta.4 → 6.4.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "6.3.0-beta.4",
+  "version": "6.4.0-beta.1",
   "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,
             ),
         ),
     )
@@ -50,8 +136,6 @@ $dark-bootstrap-checkbox: extend(
 /// @prop {Map} label-color [color: ('gray', 900, .8)]- The text color used for the label text.
 /// @prop {Map} label-color-hover [color: ('gray', 900)]- The text color used for the label text on hover.
 /// @prop {Map} focus-outline-color [color: ('gray', 900, .2)] - The focus outlined color.
-/// @prop {Map} fill-color [color: ('primary', 400)] - The checked border and fill colors.
-/// @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.
@@ -82,18 +166,6 @@ $dark-indigo-checkbox: extend(
                 0.2,
             ),
         ),
-        fill-color: (
-            color: (
-                'primary',
-                400,
-            ),
-        ),
-        fill-color-hover: (
-            color: (
-                'primary',
-                300,
-            ),
-        ),
         empty-color: (
             contrast-color: (
                 'gray',

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}
@@ -109,9 +151,6 @@ $dark-bootstrap-radio: extend($bootstrap-radio, $base-dark-radio);
 /// @prop {Map} label-color-hover [contrast-color: ('primary', 500)] - The text color used for the label text on hover.
 /// @prop {Map} hover-color [contrast-color: ('primary', 500, 0.8)] - The text color used for the label text.
 /// @prop {Map} focus-outline-color [contrast-color: ('primary', 500, 0.2)] - The focus outlined color.
-/// @prop {Map} fill-color [color: ('primary', 400)] - The checked border and dot colors.
-/// @prop {Map} fill-hover-border-color [color: ('primary', 300)] - The text color used for the label text.
-/// @prop {Map} fill-color-hover [color: ('primary', 300)] - The checked border and dot colors on hover.
 /// @prop {Map} empty-color [contrast-color: ('primary', 500, 0.6)] - The unchecked border color.
 /// @prop {Map} disabled-color [contrast-color: ('primary', 500, 0.2)] - The disabled border and dot colors.
 /// @prop {Map} disabled-label-color [contrast-color: ('primary', 500, 0.2)] - The disabled label color.
@@ -119,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,
     (
@@ -150,24 +188,6 @@ $dark-indigo-radio: extend(
                 0.2,
             ),
         ),
-        fill-color: (
-            color: (
-                'primary',
-                400,
-            ),
-        ),
-        fill-hover-border-color: (
-            color: (
-                'primary',
-                300,
-            ),
-        ),
-        fill-color-hover: (
-            color: (
-                'primary',
-                300,
-            ),
-        ),
         error-color: (
             color: (
                 'error',

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,
             ),
         ),
     )
@@ -144,11 +198,9 @@ $dark-bootstrap-switch: extend(
 /// @prop {Map} thumb-on-color [contrast-color: ('gray', 50)] - The color of the thumb when the switch is on.
 /// @prop {Map} thumb-disabled-color [contrast-color: ('gray', 50, .2)] - The color of the thumb when the switch is disabled.
 /// @prop {Map} thumb-on-disabled-color [contrast-color: ('gray', 50, .2)] - The color of the thumb when the switch is on and disabled.
-/// @prop {Map} track-on-hover-color [color: ('primary', 300)] - The color of the track when the switch is on and hovered.
 /// @prop {Map} border-color [contrast-color: ('gray', 50, .6)] - The border color of the switch.
 /// @prop {Map} border-hover-color [contrast-color: ('gray', 50, .8)] - The border color of the switch on hover.
 /// @prop {Map} border-disabled-color [contrast-color: ('gray', 50, .2)] - The border color of the disabled switch.
-/// @prop {Map} border-on-hover-color [color: ('primary', 300)] - The border color of the  on-switch.
 /// @prop {Map} error-color [contrast-color: ('gray', 50, .6)] - The border and thumb color in invalid state.
 /// @prop {Map} focus-outline-color [contrast-color: ('gray', 50, .2)] - The focus outlined color.
 /// @requires $indigo-switch
@@ -209,12 +261,6 @@ $dark-indigo-switch: extend(
                 0.2,
             ),
         ),
-        track-on-hover-color: (
-            color: (
-                'primary',
-                300,
-            ),
-        ),
         border-color: (
             contrast-color: (
                 'gray',
@@ -236,12 +282,6 @@ $dark-indigo-switch: extend(
                 0.2,
             ),
         ),
-        border-on-hover-color: (
-            color: (
-                'primary',
-                300,
-            ),
-        ),
         error-color: (
             contrast-color: (
                 'gray',

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,
 );

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

@@ -12,18 +12,16 @@
 /// Generates a light checkbox schema.
 /// @type {Map}
 /// @prop {Map} tick-color [color: ('gray', 50)] - The checked mark color.
-/// @prop {Map} tick-color-hover [color: ('gray', 50)] - The checked mark color on hover.
 /// @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} label-color-hover [color: ('gray', 900)]- The text color used for the label text on hover.
+/// @prop {Color} empty-fill-color [transparent] - The unchecked fill 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.
 /// @prop {Map} error-color [color: ('error', 500)] - The border and fill colors in invalid state.
-/// @prop {Map} error-color-hover [color: ('error', 500)] - The border and fill colors in invalid state on hover.
 /// @prop {List} border-radius [(rem(2px), rem(0), rem(10px))] - The border radius used for checkbox.
 /// @prop {List} border-radius-ripple [(rem(24px), rem(0), rem(24px))] - The border radius used for checkbox ripple.
 $light-checkbox: (
@@ -33,31 +31,25 @@ $light-checkbox: (
             50,
         ),
     ),
-    tick-color-hover: (
-        color: (
-            'gray',
-            50,
-        ),
-    ),
     label-color: (
         color: (
             'gray',
             900,
         ),
     ),
-    empty-color: (
+    label-color-hover: (
         color: (
             'gray',
-            500,
+            900,
         ),
     ),
+    empty-fill-color: transparent,
     fill-color: (
         color: (
             'primary',
             500,
         ),
     ),
-    focus-outline-color: transparent,
     focus-outline-color-focused: transparent,
     focus-outline-color-error: transparent,
     disabled-color: (
@@ -84,12 +76,6 @@ $light-checkbox: (
             500,
         ),
     ),
-    error-color-hover: (
-        color: (
-            'error',
-            500,
-        ),
-    ),
     border-radius: (
         border-radius: (
             rem(2px),
@@ -109,8 +95,12 @@ $light-checkbox: (
 /// Generates a material checkbox schema.
 /// @type {Map}
 /// @prop {Map} empty-color [color: ('gray', 600)] - The unchecked border color.
+/// @prop {Map} empty-color-hover [color: ('gray', 600)] - The unchecked border color on hover.
+/// @prop {Map} tick-color-hover [color: ('gray', 50)] - The checked mark color on hover.
 /// @prop {Map} fill-color [color: ('secondary', 500)] - The checked border and fill colors.
 /// @prop {Map} fill-color-hover [color: ('secondary', 500)] - The checked border and fill colors on hover.
+/// @prop {Color} focus-outline-color [transparent] - The focus outlined color.
+/// @prop {Map} error-color-hover [color: ('error', 500)] - The border and fill colors in invalid state on hover.
 /// @requires {Map} $light-checkbox
 $material-checkbox: extend(
     $light-checkbox,
@@ -122,6 +112,20 @@ $material-checkbox: extend(
             ),
         ),
 
+        empty-color-hover: (
+            color: (
+                'gray',
+                600,
+            ),
+        ),
+
+        tick-color-hover: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
+
         fill-color: (
             color: (
                 'secondary',
@@ -135,6 +139,15 @@ $material-checkbox: extend(
                 500,
             ),
         ),
+
+        focus-outline-color: transparent,
+
+        error-color-hover: (
+            color: (
+                'error',
+                500,
+            ),
+        ),
     )
 );
 
@@ -142,10 +155,10 @@ $material-checkbox: extend(
 /// @type {Map}
 /// @prop {Map} tick-color-hover [color: ('gray', 700)] - The checked mark color on hover when the control in unchecked.
 /// @prop {Map} empty-color [color: ('gray', 900)] - The unchecked border color.
-/// @prop {Map} fill-color-hover [color: ('primary', 900)] - The checked border and fill colors on hover.
-/// @prop {Map} focus-outline-color [color: ('gray', 800)] - The focus outlined color.
-/// @prop {Map} error-color-hover [color: ('error', 900)] - The border and fill colors in invalid state on hover.
-/// @prop {List} border-radius [(rem(2px), rem(0), rem(10px))] - The border radius used for checkbox.
+/// @prop {Map} empty-color-hover [color: ('gray', 900)] - The unchecked border color on hover.
+/// @prop {Map} fill-color-hover [color: ('primary', 800)] - The checked border and fill colors on hover.
+/// @prop {Map} focus-outline-color [color: ('gray', 700)] - The focus outlined color.
+/// @prop {Map} error-color-hover [color: ('error', 700)] - The border and fill colors in invalid state on hover.
 /// @prop {List} border-radius-ripple [(rem(2px), rem(0), rem(24px))] - The border radius used for checkbox ripple.
 /// @requires {Map} $light-checkbox
 $fluent-checkbox: extend(
@@ -160,7 +173,7 @@ $fluent-checkbox: extend(
         focus-outline-color: (
             color: (
                 'gray',
-                800,
+                700,
             ),
         ),
         empty-color: (
@@ -169,23 +182,22 @@ $fluent-checkbox: extend(
                 900,
             ),
         ),
+        empty-color-hover: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
         fill-color-hover: (
             color: (
                 'primary',
-                900,
+                800,
             ),
         ),
         error-color-hover: (
             color: (
                 'error',
-                900,
-            ),
-        ),
-        border-radius: (
-            border-radius: (
-                rem(2px),
-                rem(0),
-                rem(10px),
+                700,
             ),
         ),
         border-radius-ripple: (
@@ -200,45 +212,89 @@ $fluent-checkbox: extend(
 
 /// Generates a bootstrap checkbox schema.
 /// @type {Map}
-/// @prop {Map} fill-color-hover [color: ('primary', 500)] - The checked border and fill colors on hover.
-/// @prop {Map} disabled-color [color: ('primary', 200)] - The disabled border and fill colors.
-/// @prop {Map} disabled-color-label [color: ('gray', 400)] - The disabled color of the label.
-/// @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.
+/// @prop {Map} tick-color [contrast-color: ('primary', 900)] - The checked mark color.
+/// @prop {Map} tick-color-hover [contrast-color: ('primary', 900)] - The checked mark color on hover.
+/// @prop {Map} empty-color [color: ('gray', 400)] - The unchecked border color.
+/// @prop {Map} empty-color-hover [color: ('gray', 500)] - The unchecked border color on hover.
+/// @prop {Map} empty-fill-color [contrast-color: ('gray', 900)] - The unchecked fill color.
+/// @prop {Map} fill-color-hover [color: ('primary', 600)] - The checked border and fill colors on hover.
+/// @prop {Map} disabled-color [color: ('gray', 300)] - The disabled border color.
+/// @prop {Map} disabled-indeterminate-color [color: ('primary', 200)] - The disabled border and fill colors.
+/// @prop {Map} focus-outline-color [color: ('primary', 200, 0.5)] - The focus outlined color.
+/// @prop {Map} focus-outline-color-error [color: ('error', 200, 0.5)] - The focus outlined color for focused invalid state.
+/// @prop {Map} error-color-hover [color: ('error', 600)] - The focus outlined color in invalid state.
 /// @prop {List} border-radius [(rem(4px), rem(0), rem(10px))] - The border radius used for checkbox.
 /// @prop {List} border-radius-ripple [(rem(4px), rem(0), rem(24px))] - The border radius used for checkbox ripple.
 /// @requires {Map} $light-checkbox
 $bootstrap-checkbox: extend(
     $light-checkbox,
     (
+        tick-color: (
+            contrast-color: (
+                'primary',
+                900,
+            ),
+        ),
+        tick-color-hover: (
+            contrast-color: (
+                'primary',
+                900,
+            ),
+        ),
+        empty-color: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+        empty-color-hover: (
+            color: (
+                'gray',
+                500,
+            ),
+        ),
+        empty-fill-color: (
+            contrast-color: (
+                'gray',
+                900,
+            ),
+        ),
         focus-outline-color: (
             color: (
                 'primary',
                 200,
+                0.5,
+            ),
+        ),
+        focus-outline-color-error: (
+            color: (
+                'error',
+                200,
+                0.5,
             ),
         ),
         fill-color-hover: (
             color: (
                 'primary',
-                500,
+                600,
             ),
         ),
         disabled-color: (
             color: (
-                'primary',
-                200,
+                'gray',
+                300,
             ),
         ),
-        disabled-color-label: (
+        disabled-indeterminate-color: (
             color: (
-                'gray',
-                400,
+                'primary',
+                200,
             ),
         ),
         error-color-hover: (
             color: (
                 'error',
-                100,
+                600,
             ),
         ),
         border-radius: (
@@ -263,8 +319,6 @@ $bootstrap-checkbox: extend(
 /// @prop {Color} tick-color [contrast-color: ('primary', 500)] - The checked mark color.
 /// @prop {Color} tick-color-hover [contrast-color: ('primary', 500)] - The checked mark color on hover.
 /// @prop {Map} label-color [color: ('gray', 800)]- The text color used for the label text.
-/// @prop {Map} label-color-hover [color: ('gray', 900)]- The text color used for the label text on hover.
-/// @prop {Map} fill-color [color: ('primary', 500)] - The checked border and fill colors.
 /// @prop {Map} fill-color-hover [color: ('primary', 400)] - The checked border and fill colors on hover.
 /// @prop {Map} empty-color [color: ('gray', 500)] - The unchecked border color.
 /// @prop {Map} empty-color-hover [color: ('gray', 600)] - The unchecked border color on hover.
@@ -287,12 +341,6 @@ $indigo-checkbox: extend(
                 800,
             ),
         ),
-        label-color-hover: (
-            color: (
-                'gray',
-                900,
-            ),
-        ),
         focus-outline-color: (
             color: (
                 'gray',

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

@@ -9,18 +9,19 @@
 
 /// Generates a base light radio schema.
 /// @type {Map}
+/// @prop {Color} empty-fill-color [transparent] - The fill of the empty radio.
 /// @prop {Color} hover-color [transparent] - The text color used for the label text.
 /// @prop {Map} label-color [color: ('gray', 900)] - The text color used for the label text.
 /// @prop {Map} label-color-hover [color: ('gray', 900)] - The text color used for the label text on hover.
-/// @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-color [color: ('gray', 400)] - The disabled border color.
 /// @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} disabled-label-color [color: ('gray', 500)] - 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.
 /// @prop {Color} focus-outline-color-error [transparent] - The focus outline color when radio is filled and invalid.
 $light-radio: (
+    empty-fill-color: transparent,
     hover-color: transparent,
     label-color: (
         color: (
@@ -34,12 +35,6 @@ $light-radio: (
             900,
         ),
     ),
-    empty-color: (
-        color: (
-            'gray',
-            500,
-        ),
-    ),
     fill-color: (
         color: (
             'primary',
@@ -61,7 +56,7 @@ $light-radio: (
     disabled-label-color: (
         color: (
             'gray',
-            400,
+            500,
         ),
     ),
     error-color: (
@@ -133,7 +128,6 @@ $material-radio: extend(
 /// @prop {Map} fill-color-hover [color: ('primary', 800)] - The checked border and dot colors on hover.
 /// @prop {Map} focus-outline-color [color: ('gray', 700)] - The focus outlined color.
 /// @prop {Map} error-color-hover [color: ('error', 700)] - The border and dot color in invalid state on hover.
-/// @prop {Map} disabled-label-color [color: ('gray', 500)] - The disabled label color.
 /// @requires {Map} $light-radio
 $fluent-radio: extend(
     $light-radio,
@@ -174,43 +168,53 @@ $fluent-radio: extend(
                 700,
             ),
         ),
-        disabled-label-color: (
-            color: (
-                'gray',
-                500,
-            ),
-        ),
     )
 );
 
 /// Generates a bootstrap radio schema.
 /// @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} empty-color [color: ('gray', 400)] - The unchecked border color.
+/// @prop {Map} empty-fill-color [contrast-color: ('gray', 900)] - The fill of the empty radio.
+/// @prop {Map} hover-color [color: ('gray', 500)] - The border color on hover.
+/// @prop {Map} fill-hover-border-color [contrast-color: ('primary', 900)] - The checked dot border color on hover.
+/// @prop {Map} disabled-color [color: ('gray', 300)] - The disabled border color.
 /// @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.
+/// @prop {Map} fill-color-hover [color: ('primary', 600)] - The checked border and dot colors on hover.
+/// @prop {Map} focus-outline-color [color: ('primary', 200, 0.5)] - The focus outline color.
+/// @prop {Map} focus-outline-color-error [color: ('error', 200, 0.5)] - The focus outline color when radio is invalid.
+/// @prop {Map} error-color-hover [color: ('error', 600)] - The focus outlined color in invalid state.
 /// @requires {Map} $light-radio
 $bootstrap-radio: extend(
     $light-radio,
     (
-        focus-outline-color: (
+        empty-color: (
             color: (
-                'primary',
-                200,
+                'gray',
+                400,
             ),
         ),
-        fill-hover-border-color: (
+        empty-fill-color: (
+            contrast-color: (
+                'gray',
+                900,
+            ),
+        ),
+        hover-color: (
             color: (
                 'gray',
-                50,
+                500,
+            ),
+        ),
+        fill-hover-border-color: (
+            contrast-color: (
+                'primary',
+                900,
             ),
         ),
         disabled-color: (
             color: (
-                'primary',
-                200,
+                'gray',
+                300,
             ),
         ),
         disabled-fill-color: (
@@ -221,14 +225,28 @@ $bootstrap-radio: extend(
         ),
         fill-color-hover: (
             color: (
-                'gray',
-                50,
+                'primary',
+                600,
+            ),
+        ),
+        focus-outline-color: (
+            color: (
+                'primary',
+                200,
+                0.5,
+            ),
+        ),
+        focus-outline-color-error: (
+            color: (
+                'error',
+                200,
+                0.5,
             ),
         ),
         error-color-hover: (
             color: (
                 'error',
-                100,
+                600,
             ),
         ),
     )
@@ -236,21 +254,28 @@ $bootstrap-radio: extend(
 
 /// Generates an indigo radio schema.
 /// @type {Map}
+/// @prop {Map} empty-color [color: ('gray', 500)] - The unchecked border color.
 /// @prop {Map} label-color [color: ('gray', 800)] - 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 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-color [color: ('gray', 900, .15)] - The disabled border color.
 /// @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} disabled-label-color [color: ('gray', 900, .2)] - 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.
 /// @requires {Map} $light-radio
 $indigo-radio: extend(
     $light-radio,
     (
+        empty-color: (
+            color: (
+                'gray',
+                500,
+            ),
+        ),
         label-color: (
             color: (
                 'gray',

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

@@ -20,19 +20,14 @@
 /// @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-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} 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.
 /// @prop {Map} thumb-on-error-color [color: ('gray', 50)] - The color of the thumb when the switch is on and invalid.
-/// @requires {Map} $default-elevation-switch
+/// @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.
 $light-switch: extend(
-    $default-elevation-switch,
     (
         border-on-color: (
             color: (
@@ -124,6 +119,8 @@ $light-switch: extend(
 /// @prop {Color} focus-outline-color [transparent] - The focus outlined color.
 /// @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} focus-fill-color [transparent] - The focus fill color.
+/// @prop {Color} focus-fill-hover-color [transparent] - The focus fill color 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-disabled-color [transparent] - The border color of the disabled switch.
@@ -138,13 +135,20 @@ $light-switch: extend(
 /// @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.
 /// @prop {List} border-radius-track [(rem(7px), rem(0), rem(7px))] - The border radius used for switch track.
+/// @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.
 /// @requires {Map} $light-switch
+/// @requires {Map} $default-elevation-switch
 $material-switch: extend(
     $light-switch,
+    $default-elevation-switch,
     (
         focus-outline-color: transparent,
         border-color: transparent,
         border-hover-color: transparent,
+        focus-fill-color: transparent,
+        focus-fill-hover-color: transparent,
         border-on-color: transparent,
         border-on-hover-color: transparent,
         border-disabled-color: transparent,
@@ -221,12 +225,16 @@ $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-hover-color [color: ('gray', 900)] - The border color of the switch on hover.
+/// @prop {Map} focus-fill-color [color: ('gray', 700)] - The focus fill color.
+/// @prop {Map} focus-fill-hover-color [color: ('gray', 900)] - The focus fill color 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-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-disabled-color [contrast-color: ('primary', 800)] - The color of the track when the switch is disabled.
 /// @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.
+/// @prop {Map} track-off-color [contrast-color: ('gray', 900)] - The color of the track when the switch is off.
 /// @prop {Map} thumb-disabled-color [color: ('gray', 400)] - The color of the thumb when the switch is disabled.
 /// @prop {Map} thumb-on-disabled-color [color: ('gray', 100)] - The color of the thumb when the switch is on and disabled.
 /// @prop {Map} focus-outline-color [color: ('gray', 700)] - The focus outlined color.
@@ -258,6 +266,24 @@ $fluent-switch: extend(
         border-hover-color: (
             color: (
                 'gray',
+                900,
+            ),
+        ),
+        focus-fill-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+        focus-fill-hover-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+        track-disabled-color: (
+            contrast-color: (
+                'primary',
                 800,
             ),
         ),
@@ -273,6 +299,12 @@ $fluent-switch: extend(
                 800,
             ),
         ),
+        track-off-color: (
+            contrast-color: (
+                'gray',
+                900,
+            ),
+        ),
         track-on-disabled-color: (
             color: (
                 'gray',
@@ -321,15 +353,19 @@ $fluent-switch: extend(
 
 /// Generates a bootstrap switch schema.
 /// @type {Map}
-/// @prop {Map} focus-outline-color [color: ('primary', 100)] - The focus outlined color.
+/// @prop {Map} track-on-hover-color [color: ('primary', 600)] - The color of the track when the switch is on and hovered.
+/// @prop {Map} focus-outline-color [color: ('primary', 200, 0.5)] - The focus outlined color.
 /// @prop {Map} focus-fill-color [color: ('primary', 200)] - The focus fill color.
-/// @prop {Map} border-color [color('gray', 400)] - The border color of the switch.
-/// @prop {Map} border-hover-color [color: ('gray', 400)] - The border color of the switch on hover.
+/// @prop {Map} focus-fill-hover-color [color: ('primary', 300)] - The focus fill color on hover.
+/// @prop {Map} border-color [color: ('gray', 400)] - The border color of the switch.
+/// @prop {Map} border-hover-color [color: ('gray', 500)] - The border color of the switch on hover.
+/// @prop {Map} border-on-hover-color [color: ('primary', 600)] - The border color of the on-switch.
 /// @prop {Map} border-disabled-color [color: ('gray', 300)] - The border color of the disabled switch.
+/// @prop {Map} thumb-on-color [contrast-color: ('primary', 800)] - The color of the thumb when the switch is on.
 /// @prop {Map} thumb-off-color [color: ('gray', 400)] - 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} track-on-disabled-color [color: ('primary', 200)] - The color of the track when the switch is on and disabled.
-/// @prop {Map} thumb-on-disabled-color [color: ('gray', 50)] - The color of the thumb when the switch is on and disabled.
+/// @prop {Map} thumb-on-disabled-color [contrast-color: ('primary', 800)] - The color of the thumb when the switch is on and disabled.
 /// @prop {Map} error-color [color: ('gray', 400)] - The border and thumb color in invalid state.
 /// @prop {Map} error-color-hover [color: ('primary', 200)] - The border and thumb color in invalid state on hover.
 /// @prop {List} border-radius-track [(rem(32px), rem(0), rem(32px))] - The border radius used for switch track.
@@ -338,10 +374,17 @@ $fluent-switch: extend(
 $bootstrap-switch: extend(
     $fluent-switch,
     (
+        track-on-hover-color: (
+            color: (
+                'primary',
+                600,
+            ),
+        ),
         focus-outline-color: (
             color: (
                 'primary',
-                100,
+                200,
+                0.5,
             ),
         ),
         focus-fill-color: (
@@ -350,6 +393,12 @@ $bootstrap-switch: extend(
                 200,
             ),
         ),
+        focus-fill-hover-color: (
+            color: (
+                'primary',
+                300,
+            ),
+        ),
         border-color: (
             color: (
                 'gray',
@@ -359,7 +408,13 @@ $bootstrap-switch: extend(
         border-hover-color: (
             color: (
                 'gray',
-                400,
+                500,
+            ),
+        ),
+        border-on-hover-color: (
+            color: (
+                'primary',
+                600,
             ),
         ),
         border-disabled-color: (
@@ -368,6 +423,12 @@ $bootstrap-switch: extend(
                 300,
             ),
         ),
+        thumb-on-color: (
+            contrast-color: (
+                'primary',
+                800,
+            ),
+        ),
         thumb-off-color: (
             color: (
                 'gray',
@@ -381,9 +442,9 @@ $bootstrap-switch: extend(
             ),
         ),
         thumb-on-disabled-color: (
-            color: (
-                'gray',
-                50,
+            contrast-color: (
+                'primary',
+                800,
             ),
         ),
         track-on-disabled-color: (
@@ -517,6 +578,18 @@ $indigo-switch: extend(
                 600,
             ),
         ),
+        focus-fill-color: (
+            color: (
+                'gray',
+                500,
+            ),
+        ),
+        focus-fill-hover-color: (
+            color: (
+                'gray',
+                500,
+            ),
+        ),
         border-disabled-color: (
             color: (
                 'gray',