[semantic-icon-button] Fix bg default color

Khan · Jan 30, 2025 · 0b6acda · 0b6acda
1 parent 0c29ccd
commit 0b6acda
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 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
@@ -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
@@ -1,17 +1,16 @@
-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,
     background: "transparent",
     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,
         },
     },
 };