From 2865b546fa48f03cf082a88d3af5cf5617103948 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Fri, 27 Aug 2021 08:21:18 -0400 Subject: [PATCH] add --sl-focus-ring and update styles --- docs/assets/plugins/code-block/code-block.css | 5 ++-- docs/assets/styles/docs.css | 4 +-- docs/resources/changelog.md | 2 ++ .../color-picker/color-picker.styles.ts | 27 +++++++++---------- src/components/details/details.styles.ts | 2 +- .../icon-button/icon-button.styles.ts | 2 +- .../image-comparer/image-comparer.styles.ts | 6 ++--- src/components/range/range.styles.ts | 11 ++++---- src/components/rating/rating.styles.ts | 2 +- src/components/select/select.styles.ts | 2 +- src/components/tab/tab.styles.ts | 2 +- src/themes/light.styles.ts | 4 ++- 12 files changed, 36 insertions(+), 33 deletions(-) diff --git a/docs/assets/plugins/code-block/code-block.css b/docs/assets/plugins/code-block/code-block.css index dcba244be..18b77da7b 100644 --- a/docs/assets/plugins/code-block/code-block.css +++ b/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 { diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css index 41bf6900e..173d03ffe 100644 --- a/docs/assets/styles/docs.css +++ b/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 { diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md index 9f87c5285..093e719a4 100644 --- a/docs/resources/changelog.md +++ b/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 diff --git a/src/components/color-picker/color-picker.styles.ts b/src/components/color-picker/color-picker.styles.ts index a4d9c13b2..02d7719b7 100644 --- a/src/components/color-picker/color-picker.styles.ts +++ b/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)); } diff --git a/src/components/details/details.styles.ts b/src/components/details/details.styles.ts index 2c9975aa9..30e3b7edf 100644 --- a/src/components/details/details.styles.ts +++ b/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 { diff --git a/src/components/icon-button/icon-button.styles.ts b/src/components/icon-button/icon-button.styles.ts index 07b03278b..ff6a1dc41 100644 --- a/src/components/icon-button/icon-button.styles.ts +++ b/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); } `; diff --git a/src/components/image-comparer/image-comparer.styles.ts b/src/components/image-comparer/image-comparer.styles.ts index 3892f405d..fe8e33def 100644 --- a/src/components/image-comparer/image-comparer.styles.ts +++ b/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); } `; diff --git a/src/components/range/range.styles.ts b/src/components/range/range.styles.ts index 72a2b85ca..f1d6de32c 100644 --- a/src/components/range/range.styles.ts +++ b/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; } diff --git a/src/components/rating/rating.styles.ts b/src/components/rating/rating.styles.ts index 80e308e79..1b5332150 100644 --- a/src/components/rating/rating.styles.ts +++ b/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 { diff --git a/src/components/select/select.styles.ts b/src/components/select/select.styles.ts index bb3325dd0..b62b95543 100644 --- 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-color-primary-500) / var(--sl-focus-ring-alpha)); + --focus-ring: var(--sl-focus-ring); display: block; } diff --git a/src/components/tab/tab.styles.ts b/src/components/tab/tab.styles.ts index c7874aa14..efa7ddbb7 100644 --- a/src/components/tab/tab.styles.ts +++ b/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) { diff --git a/src/themes/light.styles.ts b/src/themes/light.styles.ts index add604174..a97e44fa7 100644 --- a/src/themes/light.styles.ts +++ b/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);