From 149c6658380bd65d01bd8fc558ee9095336c5293 Mon Sep 17 00:00:00 2001 From: Adam Kudrna Date: Thu, 19 Jan 2023 22:30:21 +0100 Subject: [PATCH] Make it possible to keep the original box shadow of the component on focus --- src/docs/foundation/accessibility.mdx | 10 +++++++--- src/lib/styles/theme/_accessibility.scss | 5 ++++- src/lib/theme.scss | 4 +++- 3 files changed, 14 insertions(+), 5 deletions(-) diff --git a/src/docs/foundation/accessibility.mdx b/src/docs/foundation/accessibility.mdx index 8397c532..d7aec8f3 100644 --- a/src/docs/foundation/accessibility.mdx +++ b/src/docs/foundation/accessibility.mdx @@ -25,7 +25,7 @@ close button, [CheckboxField](/components/checkbox-field), or `--rui-tap-target-size` custom property (see [Theming](/customize/theming/overview) to learn how). -📖 [Read more about touch targets at Norman Nielsen Group.](https://www.nngroup.com/articles/touch-target-size/) +📖 [Read more about touch targets at Norman Nielsen Group.][nn-group] ### Form Fields and Reserved Space @@ -59,6 +59,10 @@ custom properties: - `--rui-focus-outline`, - `--rui-focus-outline-offset`, -- `--rui-focus-box-shadow`. +- `--rui-focus-box-shadow` (set to `initial` to keep the original box shadow + if there is one). -📖 [Read more about keyboard accessibility at MDN.](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Keyboard) +📖 [Read more about keyboard accessibility at MDN.][mdn-keyboard] + +[nn-group]: https://www.nngroup.com/articles/touch-target-size/ +[mdn-keyboard]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Keyboard diff --git a/src/lib/styles/theme/_accessibility.scss b/src/lib/styles/theme/_accessibility.scss index ae6c54eb..5007bb6d 100644 --- a/src/lib/styles/theme/_accessibility.scss +++ b/src/lib/styles/theme/_accessibility.scss @@ -1,4 +1,7 @@ +// 1. Make it possible to keep the original box shadow of the component: if `--rui-focus-box-shadow` is set to +// `initial`, `revert` or `unset`, `--rui-local-box-shadow` is used. + $tap-target-size: var(--rui-tap-target-size); $focus-outline: var(--rui-focus-outline); $focus-outline-offset: var(--rui-focus-outline-offset); -$focus-box-shadow: var(--rui-focus-box-shadow); +$focus-box-shadow: var(--rui-focus-box-shadow, var(--rui-local-box-shadow, initial)); // 1. diff --git a/src/lib/theme.scss b/src/lib/theme.scss index 48f16e7d..181caa7c 100644 --- a/src/lib/theme.scss +++ b/src/lib/theme.scss @@ -138,6 +138,8 @@ // // Shared Settings // =============== + // + // 1. Use `initial`, `revert` or `unset` to keep the original box shadow of the component. // Borders --rui-border-width: 1px; @@ -151,7 +153,7 @@ --rui-tap-target-size: 10mm; --rui-focus-outline: 0.2em solid var(--rui-color-active-focus); --rui-focus-outline-offset: 1px; - --rui-focus-box-shadow: none; + --rui-focus-box-shadow: initial; // 1. // Bottom spacings --rui-spacing-bottom-default: var(--rui-spacing-5);