♿ Add an outline to keyboard-focused buttons

src/palettes/paper.less

@@ -15,4 +15,4 @@
 @hex-link-hover: #006b6b;
 @hex-link-active: #004141;
 
-@hex-outline: #ffffff;
+@hex-btn-text: #ffffff;

src/palettes/royalblue.less

@@ -15,4 +15,4 @@
 @hex-link-hover: #00ffff;
 @hex-link-active: #a0ffff;
 
-@hex-outline: #000000;
+@hex-btn-text: #000000;

src/rules/skeleton.less

@@ -146,7 +146,7 @@
 
         background-color: @bA;
         border: none;
-        color: @hex-outline;
+        color: @hex-btn-text;
         padding: 6px 16px;
         border-radius: 4px;
         font-family: inherit;
@@ -154,16 +154,20 @@
 
         cursor: pointer;
 
-        &:hover  {
+        &:hover {
             background-color: @bC;
         }
 
+        &:focus-visible {
+            outline: 3px solid @hex-link-hover !important;
+        }
+
         &:active {
             background-color: @bF;
         }
 
         &@{status-disabled} {
-            &:hover  {
+            &:hover {
                 background-color: @bA;
             }
 

src/targets/paper.module.css

@@ -251,6 +251,9 @@
 .bluelib .button:hover {
   background-color: rgba(calc(var(--bluelib-color-r) - 20), calc(var(--bluelib-color-g) - 20), calc(var(--bluelib-color-b) - 20), 1);
 }
+.bluelib .button:focus-visible {
+  outline: 3px solid #006b6b !important;
+}
 .bluelib .button:active {
   background-color: rgba(calc(var(--bluelib-color-r) - 50), calc(var(--bluelib-color-g) - 50), calc(var(--bluelib-color-b) - 50), 1);
 }

src/targets/paper.root.css

@@ -901,6 +901,14 @@ body button:hover,
 body input[type="submit"]:hover {
   background-color: rgba(calc(var(--bluelib-color-r) - 20), calc(var(--bluelib-color-g) - 20), calc(var(--bluelib-color-b) - 20), 1);
 }
+.base-skeleton .button:focus-visible,
+body .button:focus-visible,
+.base-skeleton button:focus-visible,
+body button:focus-visible,
+.base-skeleton input[type="submit"]:focus-visible,
+body input[type="submit"]:focus-visible {
+  outline: 3px solid #006b6b !important;
+}
 .base-skeleton .button:active,
 body .button:active,
 .base-skeleton button:active,

src/targets/royalblue.module.css

@@ -251,6 +251,9 @@
 .bluelib .button:hover {
   background-color: rgba(calc(var(--bluelib-color-r) + 20), calc(var(--bluelib-color-g) + 20), calc(var(--bluelib-color-b) + 20), 1);
 }
+.bluelib .button:focus-visible {
+  outline: 3px solid #00ffff !important;
+}
 .bluelib .button:active {
   background-color: rgba(calc(var(--bluelib-color-r) + 50), calc(var(--bluelib-color-g) + 50), calc(var(--bluelib-color-b) + 50), 1);
 }

src/targets/royalblue.root.css

@@ -901,6 +901,14 @@ body button:hover,
 body input[type="submit"]:hover {
   background-color: rgba(calc(var(--bluelib-color-r) + 20), calc(var(--bluelib-color-g) + 20), calc(var(--bluelib-color-b) + 20), 1);
 }
+.base-skeleton .button:focus-visible,
+body .button:focus-visible,
+.base-skeleton button:focus-visible,
+body button:focus-visible,
+.base-skeleton input[type="submit"]:focus-visible,
+body input[type="submit"]:focus-visible {
+  outline: 3px solid #00ffff !important;
+}
 .base-skeleton .button:active,
 body .button:active,
 .base-skeleton button:active,