Use focus design token on radios, checkboxes, selects

bitcrowd · Aug 19, 2024 · 42e3988 · 42e3988
1 parent 0b33bd1
commit 42e3988
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 0 deletions.
diff --git a/scss/bitstyles/base/input-checkbox/_index.scss b/scss/bitstyles/base/input-checkbox/_index.scss
@@ -1,6 +1,7 @@
 @forward 'settings';
 @use './settings';
 @use '../../tools/design-token';
+@use '../../design-tokens/focus';
 
 [type='checkbox'] {
   display: inline-block;
@@ -31,6 +32,11 @@
       color: settings.$color-hover;
     }
 
+    &:focus-visible {
+      outline: focus.$outline-color solid focus.$outline-width;
+      outline-offset: focus.$outline-offset;
+    }
+
     &::after {
       content: '';
       display: block;
@@ -43,8 +49,12 @@
           var(design-token.get('transition', 'default', 'easing')),
         transform
           calc(var(design-token.get('transition', 'default', 'duration')) / 2)
+          var(design-token.get('transition', 'default', 'duration'))
+          var(design-token.get('transition', 'default', 'easing')),
+        outline-offset
           var(design-token.get('transition', 'default', 'duration'))
           var(design-token.get('transition', 'default', 'easing'));
+      outline-offset: 0;
       opacity: 0;
       background-image: settings.$background-image-checked;
       background-repeat: no-repeat;

diff --git a/scss/bitstyles/base/input-radio/_index.scss b/scss/bitstyles/base/input-radio/_index.scss
@@ -1,6 +1,7 @@
 @forward 'settings';
 @use './settings';
 @use '../../tools/design-token';
+@use '../../design-tokens/focus';
 
 [type='radio'] {
   display: inline-block;
@@ -47,6 +48,11 @@
       color: settings.$color-hover;
     }
 
+    &:focus-visible {
+      outline: focus.$outline-color solid focus.$outline-width;
+      outline-offset: focus.$outline-offset;
+    }
+
     &:checked {
       border-color: settings.$border-color-checked;
       background-color: settings.$background-color-checked;

diff --git a/scss/bitstyles/base/input-text/_index.scss b/scss/bitstyles/base/input-text/_index.scss
@@ -1,6 +1,7 @@
 @forward 'settings';
 @use './settings';
 @use '../../tools/design-token';
+@use '../../design-tokens/focus';
 
 /* stylelint-disable selector-max-type */
 textarea,
@@ -10,6 +11,8 @@ input {
     background-color var(design-token.get('transition', 'default', 'duration'))
       var(design-token.get('transition', 'default', 'easing')),
     border var(design-token.get('transition', 'default', 'duration'))
+      var(design-token.get('transition', 'default', 'easing')),
+    outline-offset var(design-token.get('transition', 'default', 'duration'))
       var(design-token.get('transition', 'default', 'easing'));
   resize: vertical;
 

diff --git a/scss/bitstyles/base/select/_index.scss b/scss/bitstyles/base/select/_index.scss
@@ -1,6 +1,7 @@
 @forward 'settings';
 @use 'settings';
 @use '../../tools/design-token';
+@use '../../design-tokens/focus';
 
 @supports (-webkit-appearance: none) or (-moz-appearance: none) or
   (appearance: none) {
@@ -17,9 +18,12 @@
         var(design-token.get('transition', 'default', 'duration'))
         var(design-token.get('transition', 'default', 'easing')),
       border var(design-token.get('transition', 'default', 'duration'))
+        var(design-token.get('transition', 'default', 'easing')),
+      outline-offset var(design-token.get('transition', 'default', 'duration'))
         var(design-token.get('transition', 'default', 'easing'));
     border: settings.$border-width solid settings.$border-color;
     border-radius: settings.$border-radius;
+    outline-offset: 0;
     background-color: settings.$background-color;
     background-image: settings.$background-image;
     background-repeat: no-repeat;
@@ -51,6 +55,11 @@
       color: settings.$color-active;
     }
 
+    &:focus-visible {
+      outline: focus.$outline-color solid focus.$outline-width;
+      outline-offset: focus.$outline-offset;
+    }
+
     &:invalid {
       border-color: settings.$border-color-invalid;
       background-color: settings.$background-color-invalid;