From 0b6acda4fc1fc11f18fa8be64963f7a84be07ef7 Mon Sep 17 00:00:00 2001
From: Juan Andrade <juan@khanacademy.org@khanacademy.org>
Date: Thu, 30 Jan 2025 16:38:31 -0500
Subject: [PATCH] [semantic-icon-button] Fix bg default color

---
 .../src/components/icon-button-core.tsx       | 11 ++++
 .../src/themes/default.ts                     | 53 +++++++++++--------
 2 files changed, 42 insertions(+), 22 deletions(-)

diff --git a/packages/wonder-blocks-icon-button/src/components/icon-button-core.tsx b/packages/wonder-blocks-icon-button/src/components/icon-button-core.tsx
index e24634e68..81f191c85 100644
--- a/packages/wonder-blocks-icon-button/src/components/icon-button-core.tsx
+++ b/packages/wonder-blocks-icon-button/src/components/icon-button-core.tsx
@@ -199,6 +199,12 @@ type ActionType =
     | "destructiveLight"
     | "disabledLight";
 
+/**
+ * Returns the action type based on the button color and disabled state.
+ *
+ * This is useful to determine which token variant to use for the button, which
+ * is based on the theme structure.
+ */
 function getActionType(buttonColor: ButtonColor, disabled: boolean) {
     const actionType =
         buttonColor === "destructive" ? "destructive" : "progressive";
@@ -230,6 +236,7 @@ function getStylesByKind(
 
         return {
             default: {
+                borderColor: themeVariant.default.border,
                 background: themeVariant.default.background,
                 color: themeVariant.default.foreground,
             },
@@ -247,6 +254,7 @@ function getStylesByKind(
                 outlineColor: themeVariant.hover.border,
             },
             ":active": {
+                borderColor: themeVariant.press.border,
                 background: themeVariant.press.background,
                 color: themeVariant.press.foreground,
                 outlineColor: themeVariant.press.border,
@@ -263,10 +271,12 @@ function getStylesByKind(
     if (kind === "secondary" || kind === "tertiary") {
         return {
             default: {
+                borderColor: themeVariant.default.border,
                 background: themeVariant.default.background,
                 color: themeVariant.default.foreground,
             },
             ":hover": {
+                borderColor: themeVariant.hover.border,
                 background: themeVariant.hover.background,
                 color: themeVariant.hover.foreground,
                 outlineWidth: theme.border.width.active,
@@ -275,6 +285,7 @@ function getStylesByKind(
                 outlineColor: themeVariant.hover.border,
             },
             ":active": {
+                borderColor: themeVariant.press.border,
                 background: themeVariant.press.background,
                 color: themeVariant.press.foreground,
                 outlineColor: themeVariant.press.border,
diff --git a/packages/wonder-blocks-icon-button/src/themes/default.ts b/packages/wonder-blocks-icon-button/src/themes/default.ts
index ac0bd0402..422b5acec 100644
--- a/packages/wonder-blocks-icon-button/src/themes/default.ts
+++ b/packages/wonder-blocks-icon-button/src/themes/default.ts
@@ -1,6 +1,4 @@
-import * as tokens from "@khanacademy/wonder-blocks-tokens";
-
-const {semanticColor} = tokens;
+import {border, color, semanticColor} from "@khanacademy/wonder-blocks-tokens";
 
 const disabledStates = {
     border: semanticColor.action.disabled.default,
@@ -8,10 +6,11 @@ const disabledStates = {
     foreground: semanticColor.action.disabled.default,
 };
 
+// TODO(WB-1852): Remove light variants.
 const disabledLightStates = {
-    border: tokens.color.white50,
+    border: color.white50,
     background: "transparent",
-    foreground: tokens.color.white50,
+    foreground: color.white50,
 };
 
 /**
@@ -24,6 +23,11 @@ const baseColorStates = {
     ...semanticColor.action.outlined,
     progressive: {
         ...semanticColor.action.outlined.progressive,
+        default: {
+            ...semanticColor.action.outlined.progressive.default,
+            border: "transparent",
+            background: "transparent",
+        },
         press: {
             border: semanticColor.action.outlined.progressive.press.border,
             background: "transparent",
@@ -33,6 +37,11 @@ const baseColorStates = {
     },
     destructive: {
         ...semanticColor.action.outlined.destructive,
+        default: {
+            ...semanticColor.action.outlined.destructive.default,
+            border: "transparent",
+            background: "transparent",
+        },
         press: {
             border: semanticColor.action.outlined.destructive.press.border,
             background: "transparent",
@@ -61,37 +70,37 @@ const theme = {
             // TODO(WB-1852): Remove light variants.
             progressiveLight: {
                 default: {
-                    border: tokens.color.white,
+                    border: color.white,
                     background: "transparent",
-                    foreground: tokens.color.white,
+                    foreground: color.white,
                 },
                 hover: {
-                    border: tokens.color.white,
+                    border: color.white,
                     background: "transparent",
-                    foreground: tokens.color.white,
+                    foreground: color.white,
                 },
                 press: {
-                    border: tokens.color.fadedBlue,
+                    border: color.fadedBlue,
                     background: "transparent",
-                    foreground: tokens.color.fadedBlue,
+                    foreground: color.fadedBlue,
                 },
             },
             // TODO(WB-1852): Remove light variants.
             destructiveLight: {
                 default: {
-                    border: tokens.color.white,
+                    border: color.white,
                     background: "transparent",
-                    foreground: tokens.color.white,
+                    foreground: color.white,
                 },
                 hover: {
-                    border: tokens.color.white,
+                    border: color.white,
                     background: "transparent",
-                    foreground: tokens.color.white,
+                    foreground: color.white,
                 },
                 press: {
-                    border: tokens.color.fadedRed,
+                    border: color.fadedRed,
                     background: "transparent",
-                    foreground: tokens.color.fadedRed,
+                    foreground: color.fadedRed,
                 },
             },
         },
@@ -136,13 +145,13 @@ const theme = {
 
     border: {
         width: {
-            default: tokens.border.width.thin,
-            active: tokens.border.width.none,
-            hovered: tokens.border.width.thin,
-            hoveredInverse: tokens.border.width.thin,
+            default: border.width.thin,
+            active: border.width.none,
+            hovered: border.width.thin,
+            hoveredInverse: border.width.thin,
         },
         radius: {
-            default: tokens.border.radius.medium_4,
+            default: border.radius.medium_4,
         },
     },
 };