fix(web-components): updating inner border of focused toggle button

updating inner border of focused toggle button
mi6 · Feb 21, 2025 · 5551953 · 5551953
1 parent 1c8bdd9
commit 5551953
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/packages/web-components/src/components/ic-toggle-button/ic-toggle-button.css b/packages/web-components/src/components/ic-toggle-button/ic-toggle-button.css
@@ -154,7 +154,8 @@
 }
 
 :host(.ic-toggle-button-checked) ::part(button):focus {
-  box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-architectural-white),
+  box-shadow: inset 0 0 0 var(--ic-space-xxxs)
+      var(--ic-toggle-button-selected-border-focus),
     var(--ic-border-focus);
 }
 

diff --git a/packages/web-components/src/global/color-mode.css b/packages/web-components/src/global/color-mode.css
@@ -1237,6 +1237,9 @@ ic-theme,
   );
   --ic-toggle-button-selected-text-disabled: var(--ic-color-brand-text);
   --ic-toggle-button-selected-icon-disabled: var(--ic-color-icon-brand);
+  --ic-toggle-button-selected-border-focus: var(
+    --ic-color-border-neutral-white
+  );
   --ic-toggle-button-unselected-border-monochrome: var(
     --ic-color-border-neutral-black
   );
@@ -2630,6 +2633,9 @@ ic-theme,
       --ic-color-text-tertiary-light
     );
     --ic-toggle-button-selected-icon-disabled: var(--ic-color-icon-disabled);
+    --ic-toggle-button-selected-border-focus: var(
+      --ic-color-border-neutral-black
+    );
     --ic-toggle-button-unselected-border-monochrome: var(
       --ic-color-border-neutral-white
     );
@@ -3956,6 +3962,9 @@ ic-theme,
     --ic-color-text-tertiary-light
   );
   --ic-toggle-button-selected-icon-disabled: var(--ic-color-icon-disabled);
+  --ic-toggle-button-selected-border-focus: var(
+    --ic-color-border-neutral-black
+  );
   --ic-toggle-button-unselected-border-monochrome: var(
     --ic-color-border-neutral-white
   );