From a484c7870fb17790344d1bfd5afda2b9987cd63a Mon Sep 17 00:00:00 2001
From: Silvia Ivanova <59446295+SisIvanova@users.noreply.github.com>
Date: Wed, 12 Feb 2025 09:17:38 +0200
Subject: [PATCH] fix(switch): indigo theme invalid state (#381)

---
 .../schemas/components/dark/_switch.scss      | 17 ++++++++++++++++-
 .../schemas/components/light/_switch.scss     | 19 +++++++++++++++++--
 2 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/sass/themes/schemas/components/dark/_switch.scss b/sass/themes/schemas/components/dark/_switch.scss
index 1ae3551e..924a3900 100644
--- 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
index 0e8b6f56..037887e9 100644
--- 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',