refactor: update focus ring styles across multiple components

.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

.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

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);
   }
 

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);

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;
 

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);
 }
 

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);
   }
 

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);
 }
 

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

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);
   }
 

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);
 }
 

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));
 

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));
 

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;
 

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;

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;
 }

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) {

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;

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;
 }

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);