Make it possible to keep the original box shadow of the component on focus

Author: adamkudrna

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

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.

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);