igniteui-theming 6.3.0 → 6.4.0-beta.2

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',