refactor: update focus ring styles across multiple components (#2481)

Diaan · web-flow · commit 0c4f19beb6f6 · 2025-09-02T14:38:34.000+02:00
* refactor: update focus ring styles across multiple components

* feat: add focus-visible outline for inverted button variant

* revert token update

* feat: enhance inverted focus ring visibility on dark backgrounds

* feat: update focus ring styles across multiple components

* added changeset
diff --git a/.changeset/angry-roses-battle.md b/.changeset/angry-roses-battle.md
@@ -0,0 +1,5 @@
+---
+'@sl-design-system/button': patch
+---
+
+Added style for an inverted focus ring so it's better visible on a dark background
diff --git a/.changeset/eight-memes-stare.md b/.changeset/eight-memes-stare.md
@@ -0,0 +1,22 @@
+---
+'@sl-design-system/message-dialog': patch
+'@sl-design-system/toggle-button': patch
+'@sl-design-system/breadcrumbs': patch
+'@sl-design-system/radio-group': patch
+'@sl-design-system/date-field': patch
+'@sl-design-system/text-field': patch
+'@sl-design-system/text-area': patch
+'@sl-design-system/calendar': patch
+'@sl-design-system/checkbox': patch
+'@sl-design-system/button': patch
+'@sl-design-system/dialog': patch
+'@sl-design-system/editor': patch
+'@sl-design-system/select': patch
+'@sl-design-system/switch': patch
+'@sl-design-system/grid': patch
+'@sl-design-system/tabs': patch
+'@sl-design-system/tree': patch
+'@sl-design-system/tag': patch
+---
+
+Changed token used for the width of the focusring
diff --git a/packages/components/breadcrumbs/src/breadcrumbs.scss b/packages/components/breadcrumbs/src/breadcrumbs.scss
@@ -82,7 +82,7 @@ a {
 
   &:focus-visible {
     border-radius: var(--sl-size-borderRadius-default);
-    outline: var(--sl-size-outlineWidth-default) solid var(--sl-color-border-focused);
+    outline: var(--sl-size-borderWidth-focusRing) solid var(--sl-color-border-focused);
     outline-offset: var(--sl-size-offset-focused);
   }
 
diff --git a/packages/components/button/src/button.scss b/packages/components/button/src/button.scss
@@ -14,7 +14,7 @@
   font-weight: var(--sl-text-new-typeset-fontWeight-semiBold);
   gap: var(--sl-size-075);
   justify-content: center;
-  outline: transparent solid var(--sl-size-outlineWidth-default);
+  outline: transparent solid var(--sl-size-borderWidth-focusRing);
   outline-offset: var(--sl-size-outlineOffset-default);
   padding: calc(var(--sl-size-100) - var(--sl-size-borderWidth-action))
     calc(var(--sl-size-200) - var(--sl-size-borderWidth-action));
@@ -220,6 +220,10 @@
   outline-color: var(--sl-color-border-focused);
 }
 
+:host([variant='inverted']:focus-visible) {
+  outline-color: var(--sl-color-border-inverted);
+}
+
 @media (prefers-reduced-motion: no-preference) {
   :host(:where(:active, :focus-visible, :hover)) {
     transition-duration: var(--sl-animation-button-duration);
diff --git a/packages/components/calendar/src/month-view.scss b/packages/components/calendar/src/month-view.scss
@@ -18,7 +18,7 @@ button {
   color: var(--sl-color-foreground-plain);
   cursor: pointer;
   font: inherit;
-  outline: transparent solid var(--sl-size-outlineWidth-default);
+  outline: transparent solid var(--sl-size-borderWidth-focusRing);
   outline-offset: var(--sl-size-outlineOffset-default);
   padding: 0;
 
diff --git a/packages/components/checkbox/src/checkbox.scss b/packages/components/checkbox/src/checkbox.scss
@@ -152,7 +152,7 @@
   display: inline-flex;
   flex-shrink: 0;
   justify-content: center;
-  outline: transparent solid var(--sl-size-outlineWidth-default);
+  outline: transparent solid var(--sl-size-borderWidth-focusRing);
   outline-offset: var(--sl-size-outlineOffset-default);
 }
 
diff --git a/packages/components/dialog/src/dialog.scss b/packages/components/dialog/src/dialog.scss
@@ -28,7 +28,7 @@ dialog {
   }
 
   &:focus-visible {
-    outline: var(--sl-color-border-focused) solid var(--sl-size-outlineWidth-default);
+    outline: var(--sl-color-border-focused) solid var(--sl-size-borderWidth-focusRing);
     outline-offset: var(--sl-size-outlineOffset-default);
   }
 
diff --git a/packages/components/editor/src/editor.scss b/packages/components/editor/src/editor.scss
@@ -11,7 +11,7 @@
   color: var(--sl-color-foreground-plain);
   cursor: text;
   display: block;
-  outline: transparent solid var(--sl-size-outlineWidth-default);
+  outline: transparent solid var(--sl-size-borderWidth-focusRing);
   outline-offset: var(--sl-size-outlineOffset-default);
 }
 
diff --git a/packages/components/grid/src/grid.scss b/packages/components/grid/src/grid.scss
@@ -336,7 +336,7 @@ td {
   display: inline-flex;
   flex-shrink: 0;
   overflow: clip;
-  overflow-clip-margin: border-box calc(var(--sl-size-outlineOffset-default) + var(--sl-size-outlineWidth-default));
+  overflow-clip-margin: border-box calc(var(--sl-size-outlineOffset-default) + var(--sl-size-borderWidth-focusRing));
 }
 
 th {
@@ -472,7 +472,7 @@ a[class^='skip-link'] {
 
   &:focus {
     opacity: 1;
-    outline: var(--sl-color-border-focused) solid var(--sl-size-outlineWidth-default);
+    outline: var(--sl-color-border-focused) solid var(--sl-size-borderWidth-focusRing);
     outline-offset: var(--sl-size-outlineOffset-default);
     pointer-events: auto;
     z-index: 2; // the positioning of the skip link is relative to the table, so we need to ensure it is above the table
diff --git a/packages/components/message-dialog/src/message-dialog.scss b/packages/components/message-dialog/src/message-dialog.scss
@@ -33,7 +33,7 @@ dialog {
   }
 
   &:focus-visible {
-    outline: var(--sl-color-border-focused) solid var(--sl-size-outlineWidth-default);
+    outline: var(--sl-color-border-focused) solid var(--sl-size-borderWidth-focusRing);
     outline-offset: var(--sl-size-outlineOffset-default);
   }
 
diff --git a/packages/components/radio-group/src/radio.scss b/packages/components/radio-group/src/radio.scss
@@ -113,7 +113,7 @@
   display: inline-flex;
   flex-shrink: 0;
   justify-content: center;
-  outline: transparent solid var(--sl-size-outlineWidth-default);
+  outline: transparent solid var(--sl-size-borderWidth-focusRing);
   outline-offset: var(--sl-size-outlineOffset-default);
 }
 
diff --git a/packages/components/select/src/select-button.scss b/packages/components/select/src/select-button.scss
@@ -13,7 +13,7 @@
   flex: 1;
   max-inline-size: 100%;
   min-inline-size: 0;
-  outline: transparent solid var(--sl-size-outlineWidth-default);
+  outline: transparent solid var(--sl-size-borderWidth-focusRing);
   outline-offset: var(--sl-size-outlineOffset-default);
   padding-inline-end: calc(var(--sl-size-150) - var(--sl-size-borderWidth-default));
 
diff --git a/packages/components/switch/src/switch.scss b/packages/components/switch/src/switch.scss
@@ -95,7 +95,7 @@
   box-sizing: border-box;
   display: grid;
   inline-size: var(--_track-size);
-  outline: transparent solid var(--sl-size-outlineWidth-default);
+  outline: transparent solid var(--sl-size-borderWidth-focusRing);
   outline-offset: var(--sl-size-outlineOffset-default);
   padding: calc(var(--sl-size-025) - var(--sl-size-borderWidth-default));
 
diff --git a/packages/components/tabs/src/tab.scss b/packages/components/tabs/src/tab.scss
@@ -10,8 +10,8 @@
   flex-shrink: 0;
   justify-content: center;
   min-inline-size: fit-content;
-  outline: transparent solid var(--sl-size-outlineWidth-default);
-  outline-offset: calc(var(--sl-size-outlineWidth-default) * -1);
+  outline: transparent solid var(--sl-size-borderWidth-focusRing);
+  outline-offset: calc(var(--sl-size-borderWidth-focusRing) * -1);
   position: relative;
   scroll-snap-align: start;
 
diff --git a/packages/components/tag/src/tag.scss b/packages/components/tag/src/tag.scss
@@ -10,7 +10,7 @@
   color: var(--sl-color-foreground-neutral-bold);
   display: inline-flex;
   max-inline-size: 100%;
-  outline: transparent solid var(--sl-size-outlineWidth-default);
+  outline: transparent solid var(--sl-size-borderWidth-focusRing);
   outline-offset: var(--sl-size-outlineOffset-default);
   overflow: hidden;
   vertical-align: middle;
diff --git a/packages/components/text-area/src/text-area.scss b/packages/components/text-area/src/text-area.scss
@@ -12,7 +12,7 @@
   cursor: text;
   display: flex;
   gap: var(--sl-size-100);
-  outline: transparent solid var(--sl-size-outlineWidth-default);
+  outline: transparent solid var(--sl-size-borderWidth-focusRing);
   outline-offset: var(--sl-size-outlineOffset-default);
   position: relative;
 }
diff --git a/packages/components/text-field/src/field-button.scss b/packages/components/text-field/src/field-button.scss
@@ -44,7 +44,7 @@
 ::slotted(sl-icon) {
   background: color-mix(in srgb, var(--_bg-color), var(--_bg-mix-color) calc(100% * var(--_bg-opacity)));
   border-radius: var(--sl-size-borderRadius-child);
-  outline: transparent solid var(--sl-size-outlineWidth-default);
+  outline: transparent solid var(--sl-size-borderWidth-focusRing);
   padding: calc((var(--sl-size-300) - max(1cap, var(--sl-icon-size))) / 2);
 
   @media (prefers-reduced-motion: no-preference) {
diff --git a/packages/components/text-field/src/text-field.scss b/packages/components/text-field/src/text-field.scss
@@ -12,7 +12,7 @@
   cursor: text;
   display: flex;
   gap: var(--sl-size-100);
-  outline: transparent solid var(--sl-size-outlineWidth-default);
+  outline: transparent solid var(--sl-size-borderWidth-focusRing);
   outline-offset: var(--sl-size-outlineOffset-default);
   padding-inline-start: calc(var(--sl-size-150) - var(--sl-size-borderWidth-default));
   vertical-align: middle;
diff --git a/packages/components/toggle-button/src/toggle-button.scss b/packages/components/toggle-button/src/toggle-button.scss
@@ -18,7 +18,7 @@
   color: var(--sl-color-foreground-neutral-bold);
   cursor: pointer;
   display: inline-flex;
-  outline: transparent solid var(--sl-size-outlineWidth-default);
+  outline: transparent solid var(--sl-size-borderWidth-focusRing);
   outline-offset: var(--sl-size-outlineOffset-default);
   vertical-align: middle;
 }
diff --git a/packages/components/tree/src/tree-node.scss b/packages/components/tree/src/tree-node.scss
@@ -11,7 +11,7 @@
   display: flex;
   inline-size: 100%;
   margin-block: var(--sl-size-025);
-  outline: transparent solid var(--sl-size-outlineWidth-default);
+  outline: transparent solid var(--sl-size-borderWidth-focusRing);
   outline-offset: var(--sl-size-outlineOffset-default);
   padding-inline-start: var(--sl-size-050);
   scroll-margin-block: var(--sl-size-100);

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@sl-design-system/button': patch
 +---
++
 +Added style for an inverted focus ring so it's better visible on a dark background
Original file line number	Diff line number	Diff line change
`@@ -82,7 +82,7 @@ a {`
`82`	`82`
`83`	`83`	`&:focus-visible {`
`84`	`84`	`border-radius: var(--sl-size-borderRadius-default);`
`85`		`- outline: var(--sl-size-outlineWidth-default) solid var(--sl-color-border-focused);`
	`85`	`+ outline: var(--sl-size-borderWidth-focusRing) solid var(--sl-color-border-focused);`
`86`	`86`	`outline-offset: var(--sl-size-offset-focused);`
`87`	`87`	`}`
`88`	`88`
Original file line number	Diff line number	Diff line change
`@@ -152,7 +152,7 @@`
`152`	`152`	`display: inline-flex;`
`153`	`153`	`flex-shrink: 0;`
`154`	`154`	`justify-content: center;`
`155`		`- outline: transparent solid var(--sl-size-outlineWidth-default);`
	`155`	`+ outline: transparent solid var(--sl-size-borderWidth-focusRing);`
`156`	`156`	`outline-offset: var(--sl-size-outlineOffset-default);`
`157`	`157`	`}`
`158`	`158`
Original file line number	Diff line number	Diff line change
`@@ -28,7 +28,7 @@ dialog {`
`28`	`28`	`}`
`29`	`29`
`30`	`30`	`&:focus-visible {`
`31`		`- outline: var(--sl-color-border-focused) solid var(--sl-size-outlineWidth-default);`
	`31`	`+ outline: var(--sl-color-border-focused) solid var(--sl-size-borderWidth-focusRing);`
`32`	`32`	`outline-offset: var(--sl-size-outlineOffset-default);`
`33`	`33`	`}`
`34`	`34`
Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@`
`11`	`11`	`color: var(--sl-color-foreground-plain);`
`12`	`12`	`cursor: text;`
`13`	`13`	`display: block;`
`14`		`- outline: transparent solid var(--sl-size-outlineWidth-default);`
	`14`	`+ outline: transparent solid var(--sl-size-borderWidth-focusRing);`
`15`	`15`	`outline-offset: var(--sl-size-outlineOffset-default);`
`16`	`16`	`}`
`17`	`17`
Original file line number	Diff line number	Diff line change
`@@ -33,7 +33,7 @@ dialog {`
`33`	`33`	`}`
`34`	`34`
`35`	`35`	`&:focus-visible {`
`36`		`- outline: var(--sl-color-border-focused) solid var(--sl-size-outlineWidth-default);`
	`36`	`+ outline: var(--sl-color-border-focused) solid var(--sl-size-borderWidth-focusRing);`
`37`	`37`	`outline-offset: var(--sl-size-outlineOffset-default);`
`38`	`38`	`}`
`39`	`39`