From 3aee270739dc1c971c0e8f70a43abcfaebca24c0 Mon Sep 17 00:00:00 2001
From: Juan Andrade <juan@khanacademy.org>
Date: Fri, 20 Dec 2024 15:41:52 -0500
Subject: [PATCH] Move some values to theme tokens

---
 packages/wonder-blocks-button/src/components/button-core.tsx | 4 ++--
 packages/wonder-blocks-button/src/themes/default.ts          | 5 ++++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/wonder-blocks-button/src/components/button-core.tsx b/packages/wonder-blocks-button/src/components/button-core.tsx
index 1c1d13d4a..594ca2413 100644
--- 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
index 214aa0bbc..95a79a41c 100644
--- 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,