feat(focus): create t1 outline and t3 focus tokens (#1675)

* feat(focus): create t1 outline and t3 focus tokens * refactor(focus): reference css custom property
chanzuckerberg · Jul 6, 2023 · 6ab9857 · 6ab9857
1 parent 906533d
commit 6ab9857
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 8 deletions.
diff --git a/.storybook/data/tokens.json b/.storybook/data/tokens.json
@@ -82,6 +82,9 @@
   "eds-l-max-width": "71.25rem",
   "eds-l-sidebar-width": "13.5rem",
   "eds-l-linelength-width": "36rem",
+  "eds-outline-width-sm": "1px",
+  "eds-outline-width-md": "2px",
+  "eds-outline-width-lg": "4px",
   "eds-box-shadow-sm": "0px 0px 1px rgba(0, 0, 0, 0.25), 0px 2px 1px rgba(0, 0, 0, 0.05)",
   "eds-box-shadow-md": "0px 0px 2px rgba(0, 0, 0, 0.2), 0px 2px 8px rgba(0, 0, 0, 0.08)",
   "eds-box-shadow-lg": "0px 4px 12px rgba(0, 0, 0, 0.16)",
@@ -526,6 +529,8 @@
   "eds-theme-typography-tab-sm-active": "var(--eds-typography-preset-009)",
   "eds-theme-typography-tag": "var(--eds-typography-preset-009)",
   "eds-theme-box-button-border-radius": "4px",
+  "eds-theme-box-focus-ring-outline-width": "var(--eds-outline-width-sm)",
+  "eds-theme-box-focus-ring-outline-offset": "var(--eds-outline-width-md)",
   "eds-theme-form-border-width": "1px",
   "eds-theme-form-border-radius": "4px",
   "eds-theme-size-slider-track-height": "0.5rem",

diff --git a/src/components/CheckboxInput/CheckboxInput.module.css b/src/components/CheckboxInput/CheckboxInput.module.css
@@ -50,7 +50,6 @@
 
 .checkbox__input:focus-visible {
   @mixin focus;
-  outline-offset: 1px;
 }
 
 @supports not selector(:focus-visible) {

diff --git a/src/design-tokens/mixins.css b/src/design-tokens/mixins.css
@@ -65,24 +65,21 @@
 }
 
 @define-mixin focus {
-  outline: var(--eds-border-width-sm) solid var(--eds-theme-color-focus-ring);
-  outline-offset: 2px;
+  outline: var(--eds-theme-box-focus-ring-outline-width) solid
+    var(--eds-theme-color-focus-ring);
+  outline-offset: var(--eds-theme-box-focus-ring-outline-offset);
 }
 
 @define-mixin focusInside {
   @mixin focus;
-  outline-offset: -2px;
+  outline-offset: calc(-1 * var(--eds-theme-box-focus-ring-outline-offset));
 }
 
 @define-mixin focusInverted {
   @mixin focus;
   outline-color: var(--eds-theme-color-focus-ring-inverted);
 }
 
-@define-mixin focusTransparent {
-  outline: 2px solid transparent;
-}
-
 @define-mixin inputStyles {
   font: var(--eds-theme-typography-form-input);
   font-family: inherit;

diff --git a/src/design-tokens/tier-1-definitions/outline.json b/src/design-tokens/tier-1-definitions/outline.json
@@ -0,0 +1,17 @@
+{
+  "eds": {
+    "outline": {
+      "width": {
+        "sm": {
+          "value": "1px"
+        },
+        "md": {
+          "value": "2px"
+        },
+        "lg": {
+          "value": "4px"
+        }
+      }
+    }
+  }
+}
diff --git a/src/design-tokens/tier-3-component/focus-ring.json b/src/design-tokens/tier-3-component/focus-ring.json
@@ -10,6 +10,18 @@
             "value": "{eds.color.neutral.white}"
           }
         }
+      },
+      "box": {
+        "focus-ring": {
+          "outline": {
+            "width": {
+              "value": "var(--eds-outline-width-sm)"
+            },
+            "offset": {
+              "value": "var(--eds-outline-width-md)"
+            }
+          }
+        }
       }
     }
   }

diff --git a/src/tokens-dist/css/variables.css b/src/tokens-dist/css/variables.css
@@ -82,6 +82,9 @@
   --eds-l-max-width: 71.25rem;
   --eds-l-sidebar-width: 13.5rem;
   --eds-l-linelength-width: 36rem;
+  --eds-outline-width-sm: 1px;
+  --eds-outline-width-md: 2px;
+  --eds-outline-width-lg: 4px;
   --eds-box-shadow-sm: 0px 0px 1px rgba(0, 0, 0, 0.25), 0px 2px 1px rgba(0, 0, 0, 0.05);
   --eds-box-shadow-md: 0px 0px 2px rgba(0, 0, 0, 0.2), 0px 2px 8px rgba(0, 0, 0, 0.08);
   --eds-box-shadow-lg: 0px 4px 12px rgba(0, 0, 0, 0.16);
@@ -526,6 +529,8 @@
   --eds-theme-typography-tab-sm-active: var(--eds-typography-preset-009);
   --eds-theme-typography-tag: var(--eds-typography-preset-009);
   --eds-theme-box-button-border-radius: 4px;
+  --eds-theme-box-focus-ring-outline-width: var(--eds-outline-width-sm);
+  --eds-theme-box-focus-ring-outline-offset: var(--eds-outline-width-md);
   --eds-theme-form-border-width: 1px;
   --eds-theme-form-border-radius: 4px;
   --eds-theme-size-slider-track-height: 0.5rem;

diff --git a/src/tokens-dist/json/variables-nested.json b/src/tokens-dist/json/variables-nested.json
@@ -119,6 +119,13 @@
       "sidebar-width": "13.5rem",
       "linelength-width": "36rem"
     },
+    "outline": {
+      "width": {
+        "sm": "1px",
+        "md": "2px",
+        "lg": "4px"
+      }
+    },
     "box-shadow": {
       "sm": "0px 0px 1px rgba(0, 0, 0, 0.25), 0px 2px 1px rgba(0, 0, 0, 0.05)",
       "md": "0px 0px 2px rgba(0, 0, 0, 0.2), 0px 2px 8px rgba(0, 0, 0, 0.08)",
@@ -1002,6 +1009,12 @@
           "border": {
             "radius": "4px"
           }
+        },
+        "focus-ring": {
+          "outline": {
+            "width": "var(--eds-outline-width-sm)",
+            "offset": "var(--eds-outline-width-md)"
+          }
         }
       },
       "form": {