rework focus rings

docs/assets/plugins/code-block/code-block.css

@@ -142,7 +142,7 @@
   border-color: var(--sl-color-primary-400);
   border-right-color: transparent;
   background-color: var(--sl-color-primary-50);
-  box-shadow: 0 0 0 1px var(--sl-color-primary-400), var(--sl-focus-ring);
+  outline: var(--sl-focus-ring);
   z-index: 2;
 }
 
@@ -210,7 +210,8 @@
 }
 
 .markdown-section .docsify-copy-code-button:focus-visible {
-  box-shadow: var(--sl-focus-ring);
+  outline: var(--sl-focus-ring);
+  outline-offset: var(--sl-focus-ring-offset);
 }
 
 .markdown-section .docsify-copy-code-button:active {

docs/assets/styles/docs.css

@@ -74,8 +74,8 @@ strong {
 }
 
 .sidebar-toggle:focus {
-  outline: none;
-  box-shadow: var(--sl-focus-ring);
+  outline: var(--sl-focus-ring);
+  outline-offset: var(--sl-focus-ring-offset);
 }
 
 .sidebar-toggle span:last-child {

docs/resources/changelog.md

@@ -8,6 +8,10 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 
 ## Next
 
+- 🚨 BREAKING: reworked focus rings to use outlines instead of box shadows
+  - Removed the `--sl-focus-ring-alpha` design token
+  - Refactored `--sl-focus-ring` to be an `outline` property instead of a `box-shadow` property
+  - Added `--sl-focus-ring-color`, `--sl-focus-ring-style`, and `--sl-focus-ring-offset`
 - Added `sl-label-change` event to `<sl-menu-item>`
 - Added `blur()`, `click()`, and `focus()` methods as well as `sl-blur` and `sl-focus` events to `<sl-icon-button>` [#730](https://github.com/shoelace-style/shoelace/issues/730)
 - Added Tabler Icons example to icons page

src/components/breadcrumb-item/breadcrumb-item.styles.ts

@@ -49,9 +49,13 @@ export default css`
     color: var(--sl-color-primary-600);
   }
 
-  .breadcrumb-item__label${focusVisibleSelector} {
+  .breadcrumb-item__label:focus {
     outline: none;
-    box-shadow: var(--sl-focus-ring);
+  }
+
+  .breadcrumb-item__label${focusVisibleSelector} {
+    outline: var(--sl-focus-ring);
+    outline-offset: var(--sl-focus-ring-offset);
   }
 
   .breadcrumb-item__prefix,

src/components/button/button.styles.ts

@@ -39,6 +39,11 @@ export default css`
     outline: none;
   }
 
+  .button${focusVisibleSelector} {
+    outline: var(--sl-focus-ring);
+    outline-offset: var(--sl-focus-ring-offset);
+  }
+
   .button--disabled {
     opacity: 0.5;
     cursor: not-allowed;
@@ -78,13 +83,6 @@ export default css`
     color: var(--sl-color-primary-700);
   }
 
-  .button--standard.button--default${focusVisibleSelector}:not(.button--disabled) {
-    background-color: var(--sl-color-primary-50);
-    border-color: var(--sl-color-primary-400);
-    color: var(--sl-color-primary-700);
-    box-shadow: var(--sl-focus-ring);
-  }
-
   .button--standard.button--default:active:not(.button--disabled) {
     background-color: var(--sl-color-primary-100);
     border-color: var(--sl-color-primary-400);
@@ -104,13 +102,6 @@ export default css`
     color: var(--sl-color-neutral-0);
   }
 
-  .button--standard.button--primary${focusVisibleSelector}:not(.button--disabled) {
-    background-color: var(--sl-color-primary-500);
-    border-color: var(--sl-color-primary-500);
-    color: var(--sl-color-neutral-0);
-    box-shadow: var(--sl-focus-ring);
-  }
-
   .button--standard.button--primary:active:not(.button--disabled) {
     background-color: var(--sl-color-primary-600);
     border-color: var(--sl-color-primary-600);
@@ -130,13 +121,6 @@ export default css`
     color: var(--sl-color-neutral-0);
   }
 
-  .button--standard.button--success${focusVisibleSelector}:not(.button--disabled) {
-    background-color: var(--sl-color-success-600);
-    border-color: var(--sl-color-success-600);
-    color: var(--sl-color-neutral-0);
-    box-shadow: var(--sl-focus-ring);
-  }
-
   .button--standard.button--success:active:not(.button--disabled) {
     background-color: var(--sl-color-success-600);
     border-color: var(--sl-color-success-600);
@@ -156,13 +140,6 @@ export default css`
     color: var(--sl-color-neutral-0);
   }
 
-  .button--standard.button--neutral${focusVisibleSelector}:not(.button--disabled) {
-    background-color: var(--sl-color-neutral-500);
-    border-color: var(--sl-color-neutral-500);
-    color: var(--sl-color-neutral-0);
-    box-shadow: var(--sl-focus-ring);
-  }
-
   .button--standard.button--neutral:active:not(.button--disabled) {
     background-color: var(--sl-color-neutral-600);
     border-color: var(--sl-color-neutral-600);
@@ -181,13 +158,6 @@ export default css`
     color: var(--sl-color-neutral-0);
   }
 
-  .button--standard.button--warning${focusVisibleSelector}:not(.button--disabled) {
-    background-color: var(--sl-color-warning-500);
-    border-color: var(--sl-color-warning-500);
-    color: var(--sl-color-neutral-0);
-    box-shadow: var(--sl-focus-ring);
-  }
-
   .button--standard.button--warning:active:not(.button--disabled) {
     background-color: var(--sl-color-warning-600);
     border-color: var(--sl-color-warning-600);
@@ -207,13 +177,6 @@ export default css`
     color: var(--sl-color-neutral-0);
   }
 
-  .button--standard.button--danger${focusVisibleSelector}:not(.button--disabled) {
-    background-color: var(--sl-color-danger-500);
-    border-color: var(--sl-color-danger-500);
-    color: var(--sl-color-neutral-0);
-    box-shadow: var(--sl-focus-ring);
-  }
-
   .button--standard.button--danger:active:not(.button--disabled) {
     background-color: var(--sl-color-danger-600);
     border-color: var(--sl-color-danger-600);
@@ -242,11 +205,6 @@ export default css`
     color: var(--sl-color-neutral-0);
   }
 
-  .button--outline.button--default${focusVisibleSelector}:not(.button--disabled) {
-    border-color: var(--sl-color-primary-500);
-    box-shadow: var(--sl-focus-ring);
-  }
-
   .button--outline.button--default:active:not(.button--disabled) {
     border-color: var(--sl-color-primary-700);
     background-color: var(--sl-color-primary-700);
@@ -265,11 +223,6 @@ export default css`
     color: var(--sl-color-neutral-0);
   }
 
-  .button--outline.button--primary${focusVisibleSelector}:not(.button--disabled) {
-    border-color: var(--sl-color-primary-500);
-    box-shadow: var(--sl-focus-ring);
-  }
-
   .button--outline.button--primary:active:not(.button--disabled) {
     border-color: var(--sl-color-primary-700);
     background-color: var(--sl-color-primary-700);
@@ -288,11 +241,6 @@ export default css`
     color: var(--sl-color-neutral-0);
   }
 
-  .button--outline.button--success${focusVisibleSelector}:not(.button--disabled) {
-    border-color: var(--sl-color-success-500);
-    box-shadow: var(--sl-focus-ring);
-  }
-
   .button--outline.button--success:active:not(.button--disabled) {
     border-color: var(--sl-color-success-700);
     background-color: var(--sl-color-success-700);
@@ -311,11 +259,6 @@ export default css`
     color: var(--sl-color-neutral-0);
   }
 
-  .button--outline.button--neutral${focusVisibleSelector}:not(.button--disabled) {
-    border-color: var(--sl-color-neutral-500);
-    box-shadow: var(--sl-focus-ring);
-  }
-
   .button--outline.button--neutral:active:not(.button--disabled) {
     border-color: var(--sl-color-neutral-700);
     background-color: var(--sl-color-neutral-700);
@@ -334,11 +277,6 @@ export default css`
     color: var(--sl-color-neutral-0);
   }
 
-  .button--outline.button--warning${focusVisibleSelector}:not(.button--disabled) {
-    border-color: var(--sl-color-warning-500);
-    box-shadow: var(--sl-focus-ring);
-  }
-
   .button--outline.button--warning:active:not(.button--disabled) {
     border-color: var(--sl-color-warning-700);
     background-color: var(--sl-color-warning-700);
@@ -357,11 +295,6 @@ export default css`
     color: var(--sl-color-neutral-0);
   }
 
-  .button--outline.button--danger${focusVisibleSelector}:not(.button--disabled) {
-    border-color: var(--sl-color-danger-500);
-    box-shadow: var(--sl-focus-ring);
-  }
-
   .button--outline.button--danger:active:not(.button--disabled) {
     border-color: var(--sl-color-danger-700);
     background-color: var(--sl-color-danger-700);
@@ -388,7 +321,6 @@ export default css`
     background-color: transparent;
     border-color: transparent;
     color: var(--sl-color-primary-500);
-    box-shadow: var(--sl-focus-ring);
   }
 
   .button--text:active:not(.button--disabled) {

src/components/checkbox/checkbox.styles.ts

@@ -65,9 +65,8 @@ export default css`
   .checkbox:not(.checkbox--checked):not(.checkbox--disabled)
     .checkbox__input${focusVisibleSelector}
     ~ .checkbox__control {
-    border-color: var(--sl-input-border-color-focus);
-    background-color: var(--sl-input-background-color-focus);
-    box-shadow: var(--sl-focus-ring);
+    outline: var(--sl-focus-ring);
+    outline-offset: var(--sl-focus-ring-offset);
   }
 
   /* Checked/indeterminate */
@@ -89,9 +88,8 @@ export default css`
   .checkbox.checkbox--indeterminate:not(.checkbox--disabled)
     .checkbox__input${focusVisibleSelector}
     ~ .checkbox__control {
-    border-color: var(--sl-color-primary-500);
-    background-color: var(--sl-color-primary-500);
-    box-shadow: var(--sl-focus-ring);
+    outline: var(--sl-focus-ring);
+    outline-offset: var(--sl-focus-ring-offset);
   }
 
   /* Disabled */

src/components/color-picker/color-picker.styles.ts

@@ -32,8 +32,8 @@ export default css`
   }
 
   .color-picker--inline${focusVisibleSelector} {
-    outline: none;
-    box-shadow: 0 0 0 1px var(--sl-color-primary-500), var(--sl-focus-ring);
+    outline: var(--sl-focus-ring);
+    outline-offset: var(--sl-focus-ring-offset);
   }
 
   .color-picker__grid {
@@ -64,8 +64,7 @@ export default css`
   }
 
   .color-picker__grid-handle${focusVisibleSelector} {
-    outline: none;
-    box-shadow: 0 0 0 1px var(--sl-color-primary-500), var(--sl-focus-ring);
+    outline: var(--sl-focus-ring);
   }
 
   .color-picker__controls {
@@ -101,8 +100,7 @@ export default css`
   }
 
   .color-picker__slider-handle${focusVisibleSelector} {
-    outline: none;
-    box-shadow: 0 0 0 1px var(--sl-color-primary-500), var(--sl-focus-ring);
+    outline: var(--sl-focus-ring);
   }
 
   .color-picker__hue {
@@ -157,8 +155,8 @@ export default css`
   }
 
   .color-picker__preview${focusVisibleSelector} {
-    box-shadow: var(--sl-focus-ring);
-    outline: none;
+    outline: var(--sl-focus-ring);
+    outline-offset: var(--sl-focus-ring-offset);
   }
 
   .color-picker__preview-color {
@@ -234,8 +232,8 @@ export default css`
   }
 
   .color-picker__swatch${focusVisibleSelector} {
-    outline: none;
-    box-shadow: var(--sl-focus-ring);
+    outline: var(--sl-focus-ring);
+    outline-offset: var(--sl-focus-ring-offset);
   }
 
   .color-picker__transparent-bg {
@@ -280,7 +278,6 @@ export default css`
     background-color: transparent;
     border: none;
     cursor: pointer;
-    transition: var(--sl-transition-fast) box-shadow;
   }
 
   .color-dropdown__trigger.color-dropdown__trigger--small {
@@ -311,7 +308,6 @@ export default css`
     border-radius: inherit;
     background-color: currentColor;
     box-shadow: inset 0 0 0 2px var(--sl-input-border-color), inset 0 0 0 4px var(--sl-color-neutral-0);
-    transition: inherit;
   }
 
   .color-dropdown__trigger${focusVisibleSelector} {
@@ -319,12 +315,8 @@ export default css`
   }
 
   .color-dropdown__trigger${focusVisibleSelector}:not(.color-dropdown__trigger--disabled) {
-    box-shadow: var(--sl-focus-ring);
-    outline: none;
-  }
-
-  .color-dropdown__trigger${focusVisibleSelector}:not(.color-dropdown__trigger--disabled):before {
-    box-shadow: inset 0 0 0 1px var(--sl-color-primary-500);
+    outline: var(--sl-focus-ring);
+    outline-offset: var(--sl-focus-ring-offset);
   }
 
   .color-dropdown__trigger.color-dropdown__trigger--disabled {

src/components/details/details.styles.ts

@@ -34,7 +34,8 @@ export default css`
   }
 
   .details__header${focusVisibleSelector} {
-    box-shadow: var(--sl-focus-ring);
+    outline: var(--sl-focus-ring);
+    outline-offset: calc(1px + var(--sl-focus-ring-offset));
   }
 
   .details--disabled .details__header {

src/components/icon-button/icon-button.styles.ts

@@ -43,6 +43,7 @@ export default css`
   }
 
   .icon-button${focusVisibleSelector} {
-    box-shadow: var(--sl-focus-ring);
+    outline: var(--sl-focus-ring);
+    outline-offset: var(--sl-focus-ring-offset);
   }
 `;

src/components/image-comparer/image-comparer.styles.ts

@@ -71,7 +71,7 @@ export default css`
   }
 
   .image-comparer__handle${focusVisibleSelector} {
-    outline: none;
-    box-shadow: var(--sl-focus-ring);
+    outline: var(--sl-focus-ring);
+    outline-offset: var(--sl-focus-ring-offset);
   }
 `;

src/components/input/input.styles.ts

@@ -41,7 +41,8 @@ export default css`
   .input--standard.input--focused:not(.input--disabled) {
     background-color: var(--sl-input-background-color-focus);
     border-color: var(--sl-input-border-color-focus);
-    box-shadow: var(--sl-focus-ring);
+    outline: var(--sl-focus-ring-style) var(--sl-focus-ring-width) var(--sl-input-focus-ring-color);
+    outline-offset: var(--sl-input-focus-ring-offset);
   }
 
   .input--standard.input--focused:not(.input--disabled) .input__control {
@@ -76,7 +77,8 @@ export default css`
 
   .input--filled.input--focused:not(.input--disabled) {
     background-color: var(--sl-input-filled-background-color-focus);
-    box-shadow: var(--sl-focus-ring);
+    outline: var(--sl-focus-ring);
+    outline-offset: var(--sl-focus-ring-offset);
   }
 
   .input--filled.input--disabled {

src/components/radio/radio.styles.ts

@@ -63,9 +63,8 @@ export default css`
 
   /* Focus */
   .radio:not(.radio--checked):not(.radio--disabled) .radio__input${focusVisibleSelector} ~ .radio__control {
-    border-color: var(--sl-input-border-color-focus);
-    background-color: var(--sl-input-background-color-focus);
-    box-shadow: var(--sl-focus-ring);
+    outline: var(--sl-focus-ring);
+    outline-offset: var(--sl-focus-ring-offset);
   }
 
   /* Checked */
@@ -83,9 +82,8 @@ export default css`
 
   /* Checked + focus */
   .radio.radio--checked:not(.radio--disabled) .radio__input${focusVisibleSelector} ~ .radio__control {
-    border-color: var(--sl-color-primary-500);
-    background-color: var(--sl-color-primary-500);
-    box-shadow: var(--sl-focus-ring);
+    outline: var(--sl-focus-ring);
+    outline-offset: var(--sl-focus-ring-offset);
   }
 
   /* Disabled */

src/components/range/range.styles.ts

@@ -59,9 +59,8 @@ export default css`
   }
 
   .range__control:enabled${focusVisibleSelector}::-webkit-slider-thumb {
-    background-color: var(--sl-color-primary-500);
-    border-color: var(--sl-color-primary-500);
-    box-shadow: var(--sl-focus-ring);
+    outline: var(--sl-focus-ring);
+    outline-offset: var(--sl-focus-ring-offset);
   }
 
   .range__control:enabled::-webkit-slider-thumb:active {
@@ -107,9 +106,8 @@ export default css`
   }
 
   .range__control:enabled${focusVisibleSelector}::-moz-range-thumb {
-    background-color: var(--sl-color-primary-500);
-    border-color: var(--sl-color-primary-500);
-    box-shadow: var(--sl-focus-ring);
+    outline: var(--sl-focus-ring);
+    outline-offset: var(--sl-focus-ring-offset);
   }
 
   .range__control:enabled::-moz-range-thumb:active {

src/components/rating/rating.styles.ts

@@ -26,7 +26,8 @@ export default css`
   }
 
   .rating${focusVisibleSelector} {
-    box-shadow: var(--sl-focus-ring);
+    outline: var(--sl-focus-ring);
+    outline-offset: var(--sl-focus-ring-offset);
   }
 
   .rating__symbols {

src/components/select/select.styles.ts

@@ -50,8 +50,8 @@ export default css`
   .select--standard.select--focused:not(.select--disabled) .select__control {
     background-color: var(--sl-input-background-color-focus);
     border-color: var(--sl-input-border-color-focus);
-    box-shadow: var(--sl-focus-ring);
-    outline: none;
+    outline: var(--sl-focus-ring-style) var(--sl-focus-ring-width) var(--sl-input-focus-ring-color);
+    outline-offset: var(--sl-input-focus-ring-offset);
     color: var(--sl-input-color-focus);
   }
 
@@ -76,9 +76,9 @@ export default css`
   }
 
   .select--filled.select--focused:not(.select--disabled) .select__control {
-    outline: none;
     background-color: var(--sl-input-filled-background-color-focus);
-    box-shadow: var(--sl-focus-ring);
+    outline: var(--sl-focus-ring);
+    outline-offset: var(--sl-focus-ring-offset);
   }
 
   .select--filled.select--disabled .select__control {

src/components/switch/switch.styles.ts

@@ -80,7 +80,8 @@ export default css`
     .switch__thumb {
     background-color: var(--sl-color-neutral-0);
     border-color: var(--sl-color-primary-600);
-    box-shadow: var(--sl-focus-ring);
+    outline: var(--sl-focus-ring);
+    outline-offset: var(--sl-focus-ring-offset);
   }
 
   /* Checked */
@@ -118,7 +119,8 @@ export default css`
     .switch__thumb {
     background-color: var(--sl-color-neutral-0);
     border-color: var(--sl-color-primary-600);
-    box-shadow: var(--sl-focus-ring);
+    outline: var(--sl-focus-ring);
+    outline-offset: var(--sl-focus-ring-offset);
   }
 
   /* Disabled */

src/components/tab/tab.styles.ts

@@ -34,7 +34,8 @@ export default css`
 
   .tab${focusVisibleSelector}:not(.tab--disabled) {
     color: var(--sl-color-primary-600);
-    box-shadow: inset var(--sl-focus-ring);
+    outline: var(--sl-focus-ring);
+    outline-offset: calc(-1 * var(--sl-focus-ring-width) - var(--sl-focus-ring-offset));
   }
 
   .tab.tab--active:not(.tab--disabled) {

src/components/textarea/textarea.styles.ts

@@ -42,8 +42,9 @@ export default css`
   .textarea--standard.textarea--focused:not(.textarea--disabled) {
     background-color: var(--sl-input-background-color-focus);
     border-color: var(--sl-input-border-color-focus);
-    box-shadow: var(--sl-focus-ring);
     color: var(--sl-input-color-focus);
+    outline: var(--sl-focus-ring-style) var(--sl-focus-ring-width) var(--sl-input-focus-ring-color);
+    outline-offset: var(--sl-input-focus-ring-offset);
   }
 
   .textarea--standard.textarea--focused:not(.textarea--disabled) .textarea__control {
@@ -78,7 +79,8 @@ export default css`
 
   .textarea--filled.textarea--focused:not(.textarea--disabled) {
     background-color: var(--sl-input-filled-background-color-focus);
-    box-shadow: var(--sl-focus-ring);
+    outline: var(--sl-focus-ring);
+    outline-offset: var(--sl-focus-ring-offset);
   }
 
   .textarea--filled.textarea--disabled {

src/themes/dark.css

@@ -405,9 +405,11 @@
    */
 
   /* Focus ring */
-  --sl-focus-ring-alpha: 45%;
+  --sl-focus-ring-color: var(--sl-color-primary-700);
+  --sl-focus-ring-style: solid;
   --sl-focus-ring-width: 3px;
-  --sl-focus-ring: 0 0 0 var(--sl-focus-ring-width) hsl(198.6 88.7% 48.4% / var(--sl-focus-ring-alpha));
+  --sl-focus-ring: var(--sl-focus-ring-style) var(--sl-focus-ring-width) var(--sl-focus-ring-color);
+  --sl-focus-ring-offset: 1px;
 
   /* Buttons */
   --sl-button-font-size-small: var(--sl-font-size-x-small);
@@ -462,6 +464,9 @@
   --sl-input-filled-color-focus: var(--sl-color-neutral-700);
   --sl-input-filled-color-disabled: var(--sl-color-neutral-800);
 
+  --sl-input-focus-ring-color: hsl(198.6 88.7% 48.4% / 40%);
+  --sl-input-focus-ring-offset: 0;
+
   /* Labels */
   --sl-input-label-font-size-small: var(--sl-font-size-small);
   --sl-input-label-font-size-medium: var(--sl-font-size-medium);

src/themes/light.css

@@ -405,9 +405,11 @@
    */
 
   /* Focus rings */
-  --sl-focus-ring-alpha: 40%;
+  --sl-focus-ring-color: var(--sl-color-primary-600);
+  --sl-focus-ring-style: solid;
   --sl-focus-ring-width: 3px;
-  --sl-focus-ring: 0 0 0 var(--sl-focus-ring-width) hsl(198.6 88.7% 48.4% / var(--sl-focus-ring-alpha));
+  --sl-focus-ring: var(--sl-focus-ring-style) var(--sl-focus-ring-width) var(--sl-focus-ring-color);
+  --sl-focus-ring-offset: 1px;
 
   /* Buttons */
   --sl-button-font-size-small: var(--sl-font-size-x-small);
@@ -462,6 +464,9 @@
   --sl-input-filled-color-focus: var(--sl-color-neutral-700);
   --sl-input-filled-color-disabled: var(--sl-color-neutral-800);
 
+  --sl-input-focus-ring-color: hsl(198.6 88.7% 48.4% / 40%);
+  --sl-input-focus-ring-offset: 0;
+
   /* Labels */
   --sl-input-label-font-size-small: var(--sl-font-size-small);
   --sl-input-label-font-size-medium: var(--sl-font-size-medium);