Move some values to theme tokens

Khan · Dec 20, 2024 · 3aee270 · 3aee270
1 parent 598be12
commit 3aee270
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/packages/wonder-blocks-button/src/components/button-core.tsx b/packages/wonder-blocks-button/src/components/button-core.tsx
@@ -370,9 +370,9 @@ export const _generateStyles = (
     if (kind === "primary") {
         const focusStyling = {
             outlineColor: light ? theme.color.bg.primary.default : color,
-            outlineOffset: 2,
+            outlineOffset: theme.border.offset.primary,
             outlineStyle: "solid",
-            outlineWidth: 2,
+            outlineWidth: theme.border.width.focused,
         };
 
         const activePressedStyling = {

diff --git a/packages/wonder-blocks-button/src/themes/default.ts b/packages/wonder-blocks-button/src/themes/default.ts
@@ -103,11 +103,14 @@ const theme = {
         width: {
             // secondary (resting)
             secondary: tokens.border.width.hairline,
-            // secondary (resting, focus, active), tertiary (focus)
+            // primary (focus), secondary (focus, active), tertiary (focus)
             focused: tokens.border.width.thin,
             // secondary (disabled)
             disabled: tokens.border.width.thin,
         },
+        offset: {
+            primary: tokens.spacing.xxxxSmall_2,
+        },
         radius: {
             // default
             default: tokens.border.radius.medium_4,