add --sl-focus-ring and update styles

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

@@ -126,8 +126,7 @@
   border-color: rgb(var(--sl-color-primary-400));
   border-right-color: transparent;
   background-color: rgb(var(--sl-color-primary-50));
-  box-shadow: 0 0 0 1px rgb(var(--sl-color-primary-400)),
-    0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
+  box-shadow: 0 0 0 1px rgb(var(--sl-color-primary-400)), var(--sl-focus-ring);
   z-index: 2;
 }
 
@@ -194,7 +193,7 @@
 }
 
 .markdown-section .docsify-copy-code-button:focus {
-  box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-neutral-500) / var(--sl-focus-ring-alpha));
+  box-shadow: 0 0 0 3px rgb(var(--sl-color-neutral-500) / 50%);
 }
 
 .markdown-section .docsify-copy-code-button:active {

docs/assets/styles/docs.css

@@ -84,7 +84,7 @@ strong {
 
 .sidebar .search input[type='search']:focus {
   background-color: rgb(var(--sl-input-background-color-focus));
-  box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
+  box-shadow: var(--sl-focus-ring);
   border-color: rgb(var(--sl-input-border-color-focus));
   color: rgb(var(--sl-input-color-focus));
   outline: none;
@@ -164,7 +164,7 @@ strong {
 
 .sidebar-toggle:focus {
   outline: none;
-  box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
+  box-shadow: var(--sl-focus-ring);
 }
 
 .sidebar-toggle span:last-child {

docs/resources/changelog.md

@@ -11,6 +11,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - 🚨 BREAKING: fixed a bug where `--sl-color-neutral-0` and `--sl-color-neutral-1000` were inverted (swap them to update)
 - Added `--swatch-size` custom property to `sl-color-picker`
 - Added `date` to `sl-input` as a supported `type`
+- Added the `--sl-focus-ring` design token for a more convenient way to apply focus ring styles
 - Adjusted elevation tokens to use neutral in light mode and black in dark mode
 - Adjusted `--sl-overlay-background-color` in dark theme to be black instead of gray
 - Fixed a bug in `sl-color-picker` where the opacity slider wasn't showing the current color
@@ -18,6 +19,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Improved size of `sl-color-picker`
 - Improved icon contrast in `sl-input`
 - Improved contrast of `sl-switch`
+- Improved `:focus-visible` behavior in many components
 - Removed elevation from `sl-color-picker` when rendered inline
 - Removed custom `:focus-visible` logic in favor of a directive that outputs `:focus-visible` or `:focus` depending on browser support
 - Updated to Lit 2.0.0-rc.3

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

@@ -1,5 +1,6 @@
 import { css } from 'lit';
 import componentStyles from '../../styles/component.styles';
+import { focusVisibleSelector } from '../../internal/focus-visible';
 
 export default css`
   ${componentStyles}
@@ -57,10 +58,9 @@ export default css`
     margin-left: calc(var(--grid-handle-size) / -2);
   }
 
-  .color-picker__grid-handle:focus {
+  .color-picker__grid-handle${focusVisibleSelector} {
     outline: none;
-    box-shadow: 0 0 0 1px rgb(var(--sl-color-primary-500)),
-      0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
+    box-shadow: 0 0 0 1px rgb(var(--sl-color-primary-500)), var(--sl-focus-ring);
   }
 
   .color-picker__controls {
@@ -95,10 +95,9 @@ export default css`
     margin-left: calc(var(--slider-handle-size) / -2);
   }
 
-  .color-picker__slider-handle:focus {
+  .color-picker__slider-handle${focusVisibleSelector} {
     outline: none;
-    box-shadow: 0 0 0 1px rgb(var(--sl-color-primary-500)),
-      0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
+    box-shadow: 0 0 0 1px rgb(var(--sl-color-primary-500)), var(--sl-focus-ring);
   }
 
   .color-picker__hue {
@@ -152,8 +151,8 @@ export default css`
     background-color: var(--preview-color);
   }
 
-  .color-picker__preview:focus {
-    box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
+  .color-picker__preview${focusVisibleSelector} {
+    box-shadow: var(--sl-focus-ring);
     outline: none;
   }
 
@@ -245,9 +244,9 @@ export default css`
     cursor: pointer;
   }
 
-  .color-picker__swatch:focus {
+  .color-picker__swatch${focusVisibleSelector} {
     outline: none;
-    box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
+    box-shadow: var(--sl-focus-ring);
   }
 
   .color-picker__transparent-bg {
@@ -323,16 +322,16 @@ export default css`
     transition: inherit;
   }
 
-  .color-dropdown__trigger:focus {
+  .color-dropdown__trigger${focusVisibleSelector} {
     outline: none;
   }
 
-  .color-dropdown__trigger:focus:not(.color-dropdown__trigger--disabled) {
-    box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
+  .color-dropdown__trigger${focusVisibleSelector}:not(.color-dropdown__trigger--disabled) {
+    box-shadow: var(--sl-focus-ring);
     outline: none;
   }
 
-  .color-dropdown__trigger:focus:not(.color-dropdown__trigger--disabled):before {
+  .color-dropdown__trigger${focusVisibleSelector}:not(.color-dropdown__trigger--disabled):before {
     box-shadow: inset 0 0 0 1px rgb(var(--sl-color-primary-500));
   }
 

src/components/details/details.styles.ts

@@ -33,7 +33,7 @@ export default css`
   }
 
   .details__header${focusVisibleSelector} {
-    box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
+    box-shadow: var(--sl-focus-ring);
   }
 
   .details--disabled .details__header {

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

@@ -43,6 +43,6 @@ export default css`
   }
 
   .icon-button${focusVisibleSelector} {
-    box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
+    box-shadow: var(--sl-focus-ring);
   }
 `;

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

@@ -1,5 +1,6 @@
 import { css } from 'lit';
 import componentStyles from '../../styles/component.styles';
+import { focusVisibleSelector } from '../../internal/focus-visible';
 
 export default css`
   ${componentStyles}
@@ -69,9 +70,8 @@ export default css`
     z-index: 10;
   }
 
-  .image-comparer__handle:focus {
+  .image-comparer__handle${focusVisibleSelector} {
     outline: none;
-    box-shadow: 0 0 0 1px rgb(var(--sl-color-primary-500)),
-      0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
+    box-shadow: var(--sl-focus-ring);
   }
 `;

src/components/range/range.styles.ts

@@ -1,6 +1,7 @@
 import { css } from 'lit';
 import componentStyles from '../../styles/component.styles';
 import formControlStyles from '../../styles/form-control.styles';
+import { focusVisibleSelector } from '../../internal/focus-visible';
 
 export default css`
   ${componentStyles}
@@ -56,10 +57,10 @@ export default css`
     border-color: rgb(var(--sl-color-primary-500));
   }
 
-  .range__control:not(:disabled):focus::-webkit-slider-thumb {
+  .range__control:not(:disabled)${focusVisibleSelector}::-webkit-slider-thumb {
     background-color: rgb(var(--sl-color-primary-500));
     border-color: rgb(var(--sl-color-primary-500));
-    box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
+    box-shadow: var(--sl-focus-ring);
   }
 
   .range__control:not(:disabled)::-webkit-slider-thumb:active {
@@ -98,10 +99,10 @@ export default css`
     border-color: rgb(var(--sl-color-primary-500));
   }
 
-  .range__control:not(:disabled):focus::-moz-range-thumb {
+  .range__control:not(:disabled)${focusVisibleSelector}::-moz-range-thumb {
     background-color: rgb(var(--sl-color-primary-500));
     border-color: rgb(var(--sl-color-primary-500));
-    box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
+    box-shadow: var(--sl-focus-ring);
   }
 
   .range__control:not(:disabled)::-moz-range-thumb:active {
@@ -111,7 +112,7 @@ export default css`
   }
 
   /* States */
-  .range__control:focus {
+  .range__control${focusVisibleSelector} {
     outline: none;
   }
 

src/components/rating/rating.styles.ts

@@ -26,7 +26,7 @@ export default css`
   }
 
   .rating${focusVisibleSelector} {
-    box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
+    box-shadow: var(--sl-focus-ring);
   }
 
   .rating__symbols {

src/components/select/select.styles.ts

@@ -7,7 +7,7 @@ export default css`
   ${formControlStyles}
 
   :host {
-    --focus-ring: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
+    --focus-ring: var(--sl-focus-ring);
 
     display: block;
   }

src/components/tab/tab.styles.ts

@@ -34,7 +34,7 @@ export default css`
 
   .tab${focusVisibleSelector}:not(.tab--disabled) {
     color: rgb(var(--sl-color-primary-600));
-    box-shadow: inset 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
+    box-shadow: inset var(--sl-focus-ring);
   }
 
   .tab.tab--active:not(.tab--disabled) {

src/themes/light.styles.ts

@@ -456,8 +456,10 @@ export default css`
      */
 
     /* Focus ring */
+    --sl-focus-ring-color: var(--sl-color-primary-500);
     --sl-focus-ring-width: 3px;
-    --sl-focus-ring-alpha: 33%;
+    --sl-focus-ring-alpha: 40%;
+    --sl-focus-ring: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-focus-ring-color) / var(--sl-focus-ring-alpha));
 
     /* Buttons */
     --sl-button-font-size-small: var(--sl-font-size-x-small);