@react-ui-org/react-ui 0.50.0 → 0.50.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-ui-org/react-ui",
   "description": "React UI is a themeable UI library for React apps.",
-  "version": "0.50.0",
+  "version": "0.50.2",
   "keywords": [
     "react",
     "ui",

package/src/lib/components/Button/_tools.scss

@@ -105,10 +105,6 @@
         opacity: theme.$disabled-opacity;
         cursor: theme.$disabled-cursor;
     }
-
-    &:-moz-focusring {
-        outline: 0;
-    }
 }
 
 @mixin button-size($size) {
@@ -127,8 +123,7 @@
         @include _get-themeable-properties($priority, $color, disabled);
     }
 
-    &:not(:disabled):hover,
-    &:not(:disabled):focus {
+    &:not(:disabled):hover {
         @include _get-themeable-properties($priority, $color, hover);
     }
 

package/src/lib/components/ScrollView/ScrollView.scss

@@ -186,6 +186,7 @@ $_arrow-outer-spacing: spacing.of(4);
 .isRootHorizontal .content {
     display: inline-flex; // 4.
     min-width: 100%;
+    vertical-align: top;
 }
 
 .isRootHorizontal .scrollingShadows::before,

package/src/lib/foundation.scss

@@ -9,6 +9,7 @@
 
 @use "styles/generic/box-sizing";
 @use "normalize.css/normalize.css";
+@use "styles/generic/focus";
 @use "styles/generic/forms";
 @use "styles/generic/reset";
 @use "styles/generic/shared";

package/src/lib/styles/generic/_focus.scss

@@ -0,0 +1,11 @@
+@use "../tools/accessibility";
+
+// Remove focus outline as we implement custom appearance of focus state. Increase specificity where necessary to
+// override normalize.css.
+:where(button, input, select, textarea):focus {
+    outline: none;
+}
+
+:is(a, button, input, select, textarea, [type="button"], [type="submit"]) {
+    @include accessibility.focus-ring();
+}

package/src/lib/styles/generic/_forms.scss

@@ -1,15 +1,3 @@
-@use "../tools/accessibility";
-
-// Remove focus outline as we implement custom appearance of focus state. Increase specificity where necessary to
-// override normalize.css.
-:where(button, input, select, textarea):focus {
-    outline: none;
-}
-
-:is(a, button, input, select, textarea, [type="button"], [type="submit"]) {
-    @include accessibility.focus-ring();
-}
-
 // Reset Chrome and Firefox behaviour which sets a `min-width: min-content;` on fieldsets.
 fieldset {
     min-width: 0;

package/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.

package/src/lib/styles/tools/_reset.scss

@@ -19,7 +19,6 @@
     &:hover,
     &:focus {
         text-decoration: none;
-        outline: none;
     }
 }
 

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