@oneblink/apps-react 5.5.1-beta.1 → 5.5.1-beta.3

package/dist/styles.css

@@ -5046,11 +5046,11 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   color: hsl(0, 0%, 21%);
 }
 .button:focus, .button.is-focused {
-  border-color: hsl(229, 53%, 53%);
-  color: hsl(0, 0%, 21%);
+  border-color: inherit;
+  color: inherit;
 }
 .button:focus:not(:active), .button.is-focused:not(:active) {
-  box-shadow: 0 0 0 0.125em rgba(72, 95, 199, 0.25);
+  box-shadow: 0 0 rgba(72, 95, 199, 0.25);
 }
 .button:active, .button.is-active {
   border-color: hsl(0, 0%, 29%);
@@ -5100,7 +5100,7 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   color: hsl(0, 0%, 4%);
 }
 .button.is-white:focus:not(:active), .button.is-white.is-focused:not(:active) {
-  box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.25);
+  box-shadow: 0 0 rgba(255, 255, 255, 0.25);
 }
 .button.is-white:active, .button.is-white.is-active {
   background-color: #f2f2f2;
@@ -5183,7 +5183,7 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   color: hsl(0, 0%, 100%);
 }
 .button.is-black:focus:not(:active), .button.is-black.is-focused:not(:active) {
-  box-shadow: 0 0 0 0.125em rgba(10, 10, 10, 0.25);
+  box-shadow: 0 0 rgba(10, 10, 10, 0.25);
 }
 .button.is-black:active, .button.is-black.is-active {
   background-color: black;
@@ -5266,7 +5266,7 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   color: rgba(0, 0, 0, 0.7);
 }
 .button.is-light:focus:not(:active), .button.is-light.is-focused:not(:active) {
-  box-shadow: 0 0 0 0.125em rgba(245, 245, 245, 0.25);
+  box-shadow: 0 0 rgba(245, 245, 245, 0.25);
 }
 .button.is-light:active, .button.is-light.is-active {
   background-color: #e8e8e8;
@@ -5349,7 +5349,7 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   color: #fff;
 }
 .button.is-dark:focus:not(:active), .button.is-dark.is-focused:not(:active) {
-  box-shadow: 0 0 0 0.125em rgba(54, 54, 54, 0.25);
+  box-shadow: 0 0 rgba(54, 54, 54, 0.25);
 }
 .button.is-dark:active, .button.is-dark.is-active {
   background-color: #292929;
@@ -5432,7 +5432,7 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   color: #fff;
 }
 .button.is-primary:focus:not(:active), .button.is-primary.is-focused:not(:active) {
-  box-shadow: 0 0 0 0.125em rgba(64, 126, 140, 0.25);
+  box-shadow: 0 0 rgba(64, 126, 140, 0.25);
 }
 .button.is-primary:active, .button.is-primary.is-active {
   background-color: #386e7b;
@@ -5529,7 +5529,7 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   color: #fff;
 }
 .button.is-link:focus:not(:active), .button.is-link.is-focused:not(:active) {
-  box-shadow: 0 0 0 0.125em rgba(72, 95, 199, 0.25);
+  box-shadow: 0 0 rgba(72, 95, 199, 0.25);
 }
 .button.is-link:active, .button.is-link.is-active {
   background-color: #3a51bb;
@@ -5626,7 +5626,7 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   color: #fff;
 }
 .button.is-info:focus:not(:active), .button.is-info.is-focused:not(:active) {
-  box-shadow: 0 0 0 0.125em rgba(45, 122, 185, 0.25);
+  box-shadow: 0 0 rgba(45, 122, 185, 0.25);
 }
 .button.is-info:active, .button.is-info.is-active {
   background-color: #286ca4;
@@ -5723,7 +5723,7 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   color: #fff;
 }
 .button.is-success:focus:not(:active), .button.is-success.is-focused:not(:active) {
-  box-shadow: 0 0 0 0.125em rgba(58, 131, 60, 0.25);
+  box-shadow: 0 0 rgba(58, 131, 60, 0.25);
 }
 .button.is-success:active, .button.is-success.is-active {
   background-color: #327134;
@@ -5820,7 +5820,7 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   color: #fff;
 }
 .button.is-warning:focus:not(:active), .button.is-warning.is-focused:not(:active) {
-  box-shadow: 0 0 0 0.125em rgba(184, 80, 0, 0.25);
+  box-shadow: 0 0 rgba(184, 80, 0, 0.25);
 }
 .button.is-warning:active, .button.is-warning.is-active {
   background-color: #9f4500;
@@ -5917,7 +5917,7 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   color: #fff;
 }
 .button.is-danger:focus:not(:active), .button.is-danger.is-focused:not(:active) {
-  box-shadow: 0 0 0 0.125em rgba(232, 17, 60, 0.25);
+  box-shadow: 0 0 rgba(232, 17, 60, 0.25);
 }
 .button.is-danger:active, .button.is-danger.is-active {
   background-color: #d00f36;
@@ -9562,6 +9562,11 @@ textarea:disabled {
   margin-right: 0;
 }
 
+.button:focus-visible {
+  outline-offset: 0.25rem;
+  outline: hsl(229, 53%, 53%) auto 3px;
+}
+
 .flatpickr-calendar {
   background: transparent;
   opacity: 0;

package/dist/styles.scss

@@ -11,6 +11,10 @@ $danger: #E8113C;
 //bulma grey is #7A7A7A which is slightly too light
 $grey: #757575;
 
+$button-focus-color: inherit;
+$button-focus-border-color: inherit;
+$button-focus-box-shadow-size: 0 0;
+
 // Elevations for Box Shadows
 $elevation-1: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14),
   0 2px 1px -1px rgba(0, 0, 0, 0.12);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@oneblink/apps-react",
   "description": "Helper functions for OneBlink apps in ReactJS.",
-  "version": "5.5.1-beta.1",
+  "version": "5.5.1-beta.3",
   "author": "OneBlink <developers@oneblink.io> (https://oneblink.io)",
   "bugs": {
     "url": "https://github.com/oneblink/apps-react/issues"