fix(switch): indigo theme invalid state (#381)

IgniteUI · Feb 12, 2025 · a484c78 · a484c78
1 parent 1fe8143
commit a484c78
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 3 deletions.
diff --git a/sass/themes/schemas/components/dark/_switch.scss b/sass/themes/schemas/components/dark/_switch.scss
@@ -148,7 +148,7 @@ $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} focus-outline-color [color: ('primary', 900, 0.5)] - The focus outlined color.
 /// @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.
@@ -202,6 +202,8 @@ $dark-bootstrap-switch: extend(
 /// @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} error-color [contrast-color: ('gray', 50, .6)] - The border and thumb color in invalid state.
+/// @prop {Map} error-color-hover [contrast-color: ('gray', 50, .2)] - The border and thumb color in invalid state on hover.
+/// @prop {Map} thumb-on-error-color [contrast-color: ('gray', 50)] - The color of the thumb when the switch is on and invalid.
 /// @prop {Map} focus-outline-color [contrast-color: ('gray', 50, .2)] - The focus outlined color.
 /// @requires $indigo-switch
 $dark-indigo-switch: extend(
@@ -289,6 +291,19 @@ $dark-indigo-switch: extend(
                 0.6,
             ),
         ),
+        error-color-hover: (
+            contrast-color: (
+                'gray',
+                50,
+                0.2,
+            ),
+        ),
+        thumb-on-error-color: (
+            contrast-color: (
+                'gray',
+                50,
+            ),
+        ),
         focus-outline-color: (
             contrast-color: (
                 'gray',

diff --git a/sass/themes/schemas/components/light/_switch.scss b/sass/themes/schemas/components/light/_switch.scss
@@ -368,6 +368,7 @@ $fluent-switch: extend(
 /// @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 {Map} thumb-on-error-color [contrast-color: ('primary', 800)] - The color of the thumb when the switch is on and invalid.
 /// @prop {List} border-radius-track [(rem(32px), rem(0), rem(32px))] - The border radius used for switch track.
 /// @prop {List} border-radius-thumb [(rem(32px), rem(0), rem(32px))] - The border radius used for switch thumb.
 /// @requires {Map} $fluent-switch
@@ -465,6 +466,12 @@ $bootstrap-switch: extend(
                 200,
             ),
         ),
+        thumb-on-error-color: (
+            contrast-color: (
+                'primary',
+                800,
+            ),
+        ),
         border-radius-track: (
             border-radius: (
                 rem(32px),
@@ -498,8 +505,9 @@ $bootstrap-switch: extend(
 /// @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} 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 {Map} error-color-hover [color: ('gray', 900, .15)] - 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 {Map} thumb-on-error-color [contrast-color: ('gray', 900)] - The color of the thumb when the switch is on and invalid.
 /// @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.
@@ -618,10 +626,17 @@ $indigo-switch: extend(
         error-color-hover: (
             color: (
                 'gray',
-                300,
+                900,
+                0.15,
             ),
         ),
         track-error-color: transparent,
+        thumb-on-error-color: (
+            contrast-color: (
+                'gray',
+                900,
+            ),
+        ),
         thumb-disabled-color: (
             color: (
                 'gray',