remove focus ring color tokens

shoelace-style · Aug 10, 2021 · 94f4d65 · 94f4d65
1 parent 5aab7c3
commit 94f4d65
Show file tree

Hide file tree

Showing 20 changed files with 38 additions and 48 deletions.
diff --git a/docs/assets/plugins/code-block/code-block.css b/docs/assets/plugins/code-block/code-block.css
@@ -54,7 +54,7 @@
 .code-block__resizer:focus {
   outline: none;
   box-shadow: 0 0 0 1px rgb(var(--sl-color-primary-400)),
-    0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-focus-ring-color-primary) / var(--sl-focus-ring-alpha));
+    0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
   background-color: rgb(var(--sl-color-primary-50));
   color: rgb(var(--sl-color-primary-600));
   z-index: 2;
@@ -141,7 +141,7 @@
   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-focus-ring-color-primary) / var(--sl-focus-ring-alpha));
+    0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
   z-index: 2;
 }
 
@@ -208,7 +208,7 @@
 }
 
 .markdown-section .docsify-copy-code-button:focus {
-  box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-focus-ring-color-neutral) / var(--sl-focus-ring-alpha));
+  box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-neutral-500) / var(--sl-focus-ring-alpha));
 }
 
 .markdown-section .docsify-copy-code-button:active {

diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css
@@ -80,7 +80,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-focus-ring-color-primary) / var(--sl-focus-ring-alpha));
+  box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
   border-color: rgb(var(--sl-input-border-color-focus));
   color: rgb(var(--sl-input-color-focus));
   outline: none;
@@ -152,7 +152,7 @@ strong {
 
 .sidebar-toggle:focus {
   outline: none;
-  box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-focus-ring-color-primary) / var(--sl-focus-ring-alpha));
+  box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
 }
 
 .sidebar-toggle span:last-child {
@@ -614,7 +614,7 @@ html .repo-button:hover {
 html .repo-button:focus {
   outline: none;
   border-color: rgb(var(--sl-color-primary-500));
-  box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-focus-ring-color-primary) / var(--sl-focus-ring-alpha));
+  box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
 }
 
 html .repo-button:not(:last-of-type) {

diff --git a/docs/components/form.md b/docs/components/form.md
@@ -187,7 +187,7 @@ The `invalid` attribute reflects the form control's validity, so you can style i
   } 
 
   .custom-input[invalid] {
-    --focus-ring: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-focus-ring-color-danger) / var(--sl-focus-ring-alpha));
+    --focus-ring: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-danger-500) / var(--sl-focus-ring-alpha));
   }
 </style>
 ```

diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
@@ -34,6 +34,7 @@ This change applies to all design tokens that implement a color. Refer to the [c
 - 🚨 BREAKING: removed `info` variant from `sl-alert`, `sl-badge`, `sl-button`, and `sl-tag` (use `neutral` instead)
 - 🚨 BREAKING: removed `--sl-color-info-*` design token (use `--sl-color-neutral-*` instead)
 - 🚨 BREAKING: renamed `dist/themes/base.css` to `dist/themes/light.css`
+- 🚨 BREAKING: removed `--sl-focus-ring-color-primary` tokens (use color tokens and `--sl-focus-ring-width|alpha` instead)
 - Added new color primitives to the base set of design tokens
 - Added `--sl-color-*-950` swatches to all color palettes
 - Added a console error that appears when menu items have duplicate values in `sl-select`

diff --git a/src/components/button/button.styles.ts b/src/components/button/button.styles.ts
@@ -84,7 +84,7 @@ export default css`
     background-color: rgb(var(--sl-color-primary-50));
     border-color: rgb(var(--sl-color-primary-300));
     color: rgb(var(--sl-color-primary-600));
-    box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-focus-ring-color-primary) / 25%);
+    box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
   }
 
   .button.button--default:active:not(.button--disabled) {
@@ -110,7 +110,7 @@ export default css`
     background-color: rgb(var(--sl-color-primary-400));
     border-color: rgb(var(--sl-color-primary-400));
     color: rgb(var(--sl-color-neutral-1000));
-    box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-focus-ring-color-primary) / 25%);
+    box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
   }
 
   .button.button--primary:active:not(.button--disabled) {
@@ -136,7 +136,7 @@ export default css`
     background-color: rgb(var(--sl-color-success-400));
     border-color: rgb(var(--sl-color-success-400));
     color: rgb(var(--sl-color-neutral-1000));
-    box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-focus-ring-color-success) / 25%);
+    box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-success-500) / var(--sl-focus-ring-alpha));
   }
 
   .button.button--success:active:not(.button--disabled) {
@@ -162,7 +162,7 @@ export default css`
     background-color: rgb(var(--sl-color-neutral-400));
     border-color: rgb(var(--sl-color-neutral-400));
     color: rgb(var(--sl-color-neutral-1000));
-    box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-focus-ring-color-neutral) / 25%);
+    box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-neutral-500) / var(--sl-focus-ring-alpha));
   }
 
   .button.button--neutral:active:not(.button--disabled) {
@@ -187,7 +187,7 @@ export default css`
     background-color: rgb(var(--sl-color-warning-400));
     border-color: rgb(var(--sl-color-warning-400));
     color: rgb(var(--sl-color-neutral-1000));
-    box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-focus-ring-color-warning) / 25%);
+    box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-warning-500) / var(--sl-focus-ring-alpha));
   }
 
   .button.button--warning:active:not(.button--disabled) {
@@ -213,7 +213,7 @@ export default css`
     background-color: rgb(var(--sl-color-danger-400));
     border-color: rgb(var(--sl-color-danger-400));
     color: rgb(var(--sl-color-neutral-1000));
-    box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-focus-ring-color-danger) / 25%);
+    box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-danger-500) / var(--sl-focus-ring-alpha));
   }
 
   .button.button--danger:active:not(.button--disabled) {
@@ -242,7 +242,7 @@ export default css`
     background-color: transparent;
     border-color: transparent;
     color: rgb(var(--sl-color-primary-400));
-    box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-focus-ring-color-primary) / 25%);
+    box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
   }
 
   .button--text:active:not(.button--disabled) {

diff --git a/src/components/checkbox/checkbox.styles.ts b/src/components/checkbox/checkbox.styles.ts
@@ -64,7 +64,7 @@ export default css`
   .checkbox.checkbox--focused:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control {
     border-color: rgb(var(--sl-input-border-color-focus));
     background-color: rgb(var(--sl-input-background-color-focus));
-    box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-focus-ring-color-primary) / var(--sl-focus-ring-alpha));
+    box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
   }
 
   /* Checked/indeterminate */
@@ -86,7 +86,7 @@ export default css`
   .checkbox.checkbox--indeterminate:not(.checkbox--disabled).checkbox--focused .checkbox__control {
     border-color: rgb(var(--sl-color-primary-400));
     background-color: rgb(var(--sl-color-primary-400));
-    box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-focus-ring-color-primary) / var(--sl-focus-ring-alpha));
+    box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
   }
 
   /* Disabled */

diff --git a/src/components/color-picker/color-picker.styles.ts b/src/components/color-picker/color-picker.styles.ts
@@ -60,7 +60,7 @@ export default css`
   .color-picker__grid-handle:focus {
     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-focus-ring-color-primary) / var(--sl-focus-ring-alpha));
+      0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
   }
 
   .color-picker__controls {
@@ -98,7 +98,7 @@ export default css`
   .color-picker__slider-handle:focus {
     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-focus-ring-color-primary) / var(--sl-focus-ring-alpha));
+      0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
   }
 
   .color-picker__hue {
@@ -155,7 +155,7 @@ export default css`
   }
 
   .color-picker__preview:focus {
-    box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-focus-ring-color-primary) / var(--sl-focus-ring-alpha));
+    box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
     outline: none;
   }
 
@@ -249,7 +249,7 @@ export default css`
 
   .color-picker__swatch:focus {
     outline: none;
-    box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-focus-ring-color-primary) / var(--sl-focus-ring-alpha));
+    box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
   }
 
   .color-picker__transparent-bg {
@@ -330,7 +330,7 @@ export default css`
   }
 
   .color-dropdown__trigger:focus:not(.color-dropdown__trigger--disabled) {
-    box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-focus-ring-color-primary) / var(--sl-focus-ring-alpha));
+    box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
     outline: none;
   }
 

diff --git a/src/components/details/details.styles.ts b/src/components/details/details.styles.ts
@@ -32,7 +32,7 @@ export default css`
   }
 
   .focus-visible .details__header:focus {
-    box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-focus-ring-color-primary) / var(--sl-focus-ring-alpha));
+    box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
   }
 
   .details--disabled .details__header {

diff --git a/src/components/icon-button/icon-button.styles.ts b/src/components/icon-button/icon-button.styles.ts
@@ -42,6 +42,6 @@ export default css`
   }
 
   .focus-visible.icon-button:focus {
-    box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-focus-ring-color-primary) / var(--sl-focus-ring-alpha));
+    box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
   }
 `;
diff --git a/src/components/image-comparer/image-comparer.styles.ts b/src/components/image-comparer/image-comparer.styles.ts
@@ -72,6 +72,6 @@ export default css`
   .image-comparer__handle:focus {
     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-focus-ring-color-primary) / var(--sl-focus-ring-alpha));
+      0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
   }
 `;
diff --git a/src/components/input/input.styles.ts b/src/components/input/input.styles.ts
@@ -7,7 +7,7 @@ export default css`
   ${formControlStyles}
 
   :host {
-    --focus-ring: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-focus-ring-color-primary) / var(--sl-focus-ring-alpha));
+    --focus-ring: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
     display: block;
   }
 

diff --git a/src/components/radio/radio.styles.ts b/src/components/radio/radio.styles.ts
@@ -64,7 +64,7 @@ export default css`
   .radio.radio--focused:not(.radio--checked):not(.radio--disabled) .radio__control {
     border-color: rgb(var(--sl-input-border-color-focus));
     background-color: rgb(var(--sl-input-background-color-focus));
-    box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-focus-ring-color-primary) / var(--sl-focus-ring-alpha));
+    box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
   }
 
   /* Checked */
@@ -84,7 +84,7 @@ export default css`
   .radio.radio--checked:not(.radio--disabled).radio--focused .radio__control {
     border-color: rgb(var(--sl-color-primary-400));
     background-color: rgb(var(--sl-color-primary-400));
-    box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-focus-ring-color-primary) / var(--sl-focus-ring-alpha));
+    box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
   }
 
   /* Disabled */

diff --git a/src/components/range/range.styles.ts b/src/components/range/range.styles.ts
@@ -59,7 +59,7 @@ export default css`
   .range__control:not(:disabled):focus::-webkit-slider-thumb {
     background-color: rgb(var(--sl-color-primary-400));
     border-color: rgb(var(--sl-color-primary-400));
-    box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-focus-ring-color-primary) / var(--sl-focus-ring-alpha));
+    box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
   }
 
   .range__control:not(:disabled)::-webkit-slider-thumb:active {
@@ -101,7 +101,7 @@ export default css`
   .range__control:not(:disabled):focus::-moz-range-thumb {
     background-color: rgb(var(--sl-color-primary-400));
     border-color: rgb(var(--sl-color-primary-400));
-    box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-focus-ring-color-primary) / var(--sl-focus-ring-alpha));
+    box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
   }
 
   .range__control:not(:disabled)::-moz-range-thumb:active {

diff --git a/src/components/rating/rating.styles.ts b/src/components/rating/rating.styles.ts
@@ -25,7 +25,7 @@ export default css`
   }
 
   .rating.focus-visible:focus {
-    box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-focus-ring-color-primary) / var(--sl-focus-ring-alpha));
+    box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
   }
 
   .rating__symbols {

diff --git a/src/components/select/select.styles.ts b/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-focus-ring-color-primary) / var(--sl-focus-ring-alpha));
+    --focus-ring: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
 
     display: block;
   }

diff --git a/src/components/switch/switch.styles.ts b/src/components/switch/switch.styles.ts
@@ -75,7 +75,7 @@ export default css`
   .switch.switch--focused:not(.switch--checked):not(.switch--disabled) .switch__control .switch__thumb {
     background-color: rgb(var(--sl-color-neutral-1000));
     border-color: rgb(var(--sl-color-primary-500));
-    box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-focus-ring-color-primary) / var(--sl-focus-ring-alpha));
+    box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
   }
 
   /* Checked */
@@ -108,7 +108,7 @@ export default css`
   .switch.switch--checked:not(.switch--disabled).switch--focused .switch__control .switch__thumb {
     background-color: rgb(var(--sl-color-neutral-1000));
     border-color: rgb(var(--sl-color-primary-500));
-    box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-focus-ring-color-primary) / var(--sl-focus-ring-alpha));
+    box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
   }
 
   /* Disabled */

diff --git a/src/components/tab/tab.styles.ts b/src/components/tab/tab.styles.ts
@@ -5,8 +5,7 @@ export default css`
   ${componentStyles}
 
   :host {
-    --focus-ring: inset 0 0 0 var(--sl-focus-ring-width)
-      rgb(var(--sl-focus-ring-color-primary) / var(--sl-focus-ring-alpha));
+    --focus-ring: inset 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
 
     display: inline-block;
   }

diff --git a/src/components/textarea/textarea.styles.ts b/src/components/textarea/textarea.styles.ts
@@ -37,7 +37,7 @@ export default css`
   .textarea.textarea--focused:not(.textarea--disabled) {
     background-color: rgb(var(--sl-input-background-color-focus));
     border-color: rgb(var(--sl-input-border-color-focus));
-    box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-focus-ring-color-primary) / var(--sl-focus-ring-alpha));
+    box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
     color: rgb(var(--sl-input-color-focus));
   }
 

diff --git a/src/themes/dark.styles.ts b/src/themes/dark.styles.ts
@@ -455,13 +455,8 @@ export default css`
      */
 
     /* Focus ring */
-    --sl-focus-ring-color-primary: var(--sl-color-primary-500);
-    --sl-focus-ring-color-success: var(--sl-color-success-500);
-    --sl-focus-ring-color-neutral: var(--sl-color-neutral-500);
-    --sl-focus-ring-color-warning: var(--sl-color-warning-500);
-    --sl-focus-ring-color-danger: var(--sl-color-danger-500);
     --sl-focus-ring-width: 3px;
-    --sl-focus-ring-alpha: 25%;
+    --sl-focus-ring-alpha: 33%;
 
     /* Buttons */
     --sl-button-font-size-small: var(--sl-font-size-x-small);

diff --git a/src/themes/light.styles.ts b/src/themes/light.styles.ts
@@ -456,13 +456,8 @@ export default css`
      */
 
     /* Focus ring */
-    --sl-focus-ring-color-primary: var(--sl-color-primary-500);
-    --sl-focus-ring-color-success: var(--sl-color-success-500);
-    --sl-focus-ring-color-neutral: var(--sl-color-neutral-500);
-    --sl-focus-ring-color-warning: var(--sl-color-warning-500);
-    --sl-focus-ring-color-danger: var(--sl-color-danger-500);
     --sl-focus-ring-width: 3px;
-    --sl-focus-ring-alpha: 25%;
+    --sl-focus-ring-alpha: 33%;
 
     /* Buttons */
     --sl-button-font-size-small: var(--sl-font-size-x-small);