From ca81a507b659a68a8b1488e486883795680c1996 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Fri, 27 May 2022 10:13:51 -0400
Subject: [PATCH] rework focus rings

---
 docs/assets/plugins/code-block/code-block.css |  5 +-
 docs/assets/styles/docs.css                   |  4 +-
 docs/resources/changelog.md                   |  4 +
 .../breadcrumb-item/breadcrumb-item.styles.ts |  8 +-
 src/components/button/button.styles.ts        | 78 ++-----------------
 src/components/checkbox/checkbox.styles.ts    | 10 +--
 .../color-picker/color-picker.styles.ts       | 28 +++----
 src/components/details/details.styles.ts      |  3 +-
 .../icon-button/icon-button.styles.ts         |  3 +-
 .../image-comparer/image-comparer.styles.ts   |  4 +-
 src/components/input/input.styles.ts          |  6 +-
 src/components/radio/radio.styles.ts          | 10 +--
 src/components/range/range.styles.ts          | 10 +--
 src/components/rating/rating.styles.ts        |  3 +-
 src/components/select/select.styles.ts        |  8 +-
 src/components/switch/switch.styles.ts        |  6 +-
 src/components/tab/tab.styles.ts              |  3 +-
 src/components/textarea/textarea.styles.ts    |  6 +-
 src/themes/dark.css                           |  9 ++-
 src/themes/light.css                          |  9 ++-
 20 files changed, 82 insertions(+), 135 deletions(-)

diff --git a/docs/assets/plugins/code-block/code-block.css b/docs/assets/plugins/code-block/code-block.css
index ce93ac5d4..7040c901b 100644
--- a/docs/assets/plugins/code-block/code-block.css
+++ b/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 {
diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css
index c56e07731..f2e6ef049 100644
--- a/docs/assets/styles/docs.css
+++ b/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 {
diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index 111e998c7..4016ad825 100644
--- a/docs/resources/changelog.md
+++ b/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
diff --git a/src/components/breadcrumb-item/breadcrumb-item.styles.ts b/src/components/breadcrumb-item/breadcrumb-item.styles.ts
index 077cb2915..d942c44ff 100644
--- a/src/components/breadcrumb-item/breadcrumb-item.styles.ts
+++ b/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,
diff --git a/src/components/button/button.styles.ts b/src/components/button/button.styles.ts
index 181fa2b82..f596f9455 100644
--- a/src/components/button/button.styles.ts
+++ b/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) {
diff --git a/src/components/checkbox/checkbox.styles.ts b/src/components/checkbox/checkbox.styles.ts
index e84d07b03..319a04619 100644
--- a/src/components/checkbox/checkbox.styles.ts
+++ b/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 */
diff --git a/src/components/color-picker/color-picker.styles.ts b/src/components/color-picker/color-picker.styles.ts
index 279446e69..e3b9c6d99 100644
--- a/src/components/color-picker/color-picker.styles.ts
+++ b/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 {
diff --git a/src/components/details/details.styles.ts b/src/components/details/details.styles.ts
index e42646ef9..668373b66 100644
--- a/src/components/details/details.styles.ts
+++ b/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 {
diff --git a/src/components/icon-button/icon-button.styles.ts b/src/components/icon-button/icon-button.styles.ts
index 9500feb69..94384c68c 100644
--- a/src/components/icon-button/icon-button.styles.ts
+++ b/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);
   }
 `;
diff --git a/src/components/image-comparer/image-comparer.styles.ts b/src/components/image-comparer/image-comparer.styles.ts
index b3fd29f81..2b903031f 100644
--- a/src/components/image-comparer/image-comparer.styles.ts
+++ b/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);
   }
 `;
diff --git a/src/components/input/input.styles.ts b/src/components/input/input.styles.ts
index 4729f33bd..a101e06f3 100644
--- a/src/components/input/input.styles.ts
+++ b/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 {
diff --git a/src/components/radio/radio.styles.ts b/src/components/radio/radio.styles.ts
index cc5bf5f13..fc20eabe4 100644
--- a/src/components/radio/radio.styles.ts
+++ b/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 */
diff --git a/src/components/range/range.styles.ts b/src/components/range/range.styles.ts
index 218440ca3..a1d35495d 100644
--- a/src/components/range/range.styles.ts
+++ b/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 {
diff --git a/src/components/rating/rating.styles.ts b/src/components/rating/rating.styles.ts
index 7f6e22eb5..f79b1c499 100644
--- a/src/components/rating/rating.styles.ts
+++ b/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 {
diff --git a/src/components/select/select.styles.ts b/src/components/select/select.styles.ts
index cffa0932c..c69fe4a21 100644
--- a/src/components/select/select.styles.ts
+++ b/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 {
diff --git a/src/components/switch/switch.styles.ts b/src/components/switch/switch.styles.ts
index e7a8d78f8..d9768af4b 100644
--- a/src/components/switch/switch.styles.ts
+++ b/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 */
diff --git a/src/components/tab/tab.styles.ts b/src/components/tab/tab.styles.ts
index 46fec21e6..0e06a107d 100644
--- a/src/components/tab/tab.styles.ts
+++ b/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) {
diff --git a/src/components/textarea/textarea.styles.ts b/src/components/textarea/textarea.styles.ts
index b25c7ad9d..d4ed14b58 100644
--- a/src/components/textarea/textarea.styles.ts
+++ b/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 {
diff --git a/src/themes/dark.css b/src/themes/dark.css
index a45f4b08d..bc0c1a1d0 100644
--- a/src/themes/dark.css
+++ b/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);
diff --git a/src/themes/light.css b/src/themes/light.css
index 874670ffd..98c8210ac 100644
--- a/src/themes/light.css
+++ b/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);