WB-1889: Rework action.disabled tokens (#2485)

jandrade · web-flow · commit 051f0f841c88 · 2025-03-04T18:43:15.000-05:00
## Summary: - Modified the `semanticColor` structure to include `disabled` tokens on every `action` variant (`primary` and `secondary`). - Updated the codebase to to make use of the new `disabled` tokens. Issue: WB-1889 ## Test plan: Verify that the disabled state of the components is consistent with the design system. Author: jandrade Reviewers: beaesguerra, jandrade Required Reviewers: Approved By: beaesguerra Checks: ✅ 12 checks were successful, ⏭️ 2 checks have been skipped Pull Request URL: #2485
diff --git a/.changeset/rare-balloons-beam.md b/.changeset/rare-balloons-beam.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-tokens": major
+---
+
+Remove `action.disabled` object in favor of `action.primary.disabled` and `action.secondary.disabled`
diff --git a/.changeset/small-dryers-judge.md b/.changeset/small-dryers-judge.md
@@ -0,0 +1,12 @@
+---
+"@khanacademy/wonder-blocks-search-field": patch
+"@khanacademy/wonder-blocks-icon-button": patch
+"@khanacademy/wonder-blocks-clickable": patch
+"@khanacademy/wonder-blocks-dropdown": patch
+"@khanacademy/wonder-blocks-button": patch
+"@khanacademy/wonder-blocks-switch": patch
+"@khanacademy/wonder-blocks-tokens": patch
+"@khanacademy/wonder-blocks-form": patch
+---
+
+Rework action.disabled tokens to include properties per kind (border, background, foreground).
diff --git a/__docs__/foundations-color.mdx b/__docs__/foundations-color.mdx
@@ -107,6 +107,15 @@ Communicates strong emphasis and primary actions.
     />
 </View>
 
+#### Disabled
+
+<ColorGroup
+    colors={semanticColor.action.primary.disabled}
+    group="action.primary.disabled"
+    variant="compact"
+    style={styles.gridCompact}
+/>
+
 #### Secondary
 
 Communicates secondary actions and less emphasis.
@@ -132,8 +141,8 @@ Communicates secondary actions and less emphasis.
 #### Disabled
 
 <ColorGroup
-    colors={semanticColor.action.disabled}
-    group="action.disabled"
+    colors={semanticColor.action.secondary.disabled}
+    group="action.secondary.disabled"
     variant="compact"
     style={styles.gridCompact}
 />
diff --git a/packages/wonder-blocks-button/src/themes/default.ts b/packages/wonder-blocks-button/src/themes/default.ts
@@ -26,8 +26,10 @@ const theme = {
                 ...semanticColor.action.primary.progressive,
                 focus: focusOutline,
                 disabled: {
-                    background: semanticColor.action.disabled.default,
-                    foreground: semanticColor.action.disabled.secondary,
+                    background:
+                        semanticColor.action.primary.disabled.background,
+                    foreground:
+                        semanticColor.action.primary.disabled.foreground,
                 },
             },
 
@@ -60,8 +62,10 @@ const theme = {
                 ...semanticColor.action.primary.destructive,
                 focus: focusOutline,
                 disabled: {
-                    background: semanticColor.action.disabled.default,
-                    foreground: semanticColor.action.disabled.secondary,
+                    background:
+                        semanticColor.action.primary.disabled.background,
+                    foreground:
+                        semanticColor.action.primary.disabled.foreground,
                 },
             },
             // kind=primary / color=destructive / light=true
@@ -112,11 +116,11 @@ const theme = {
                     icon: "transparent",
                 },
                 disabled: {
-                    border: semanticColor.action.disabled.default,
-                    background:
-                        semanticColor.action.secondary.progressive.press
-                            .background,
-                    foreground: semanticColor.text.disabled,
+                    // NOTE: This is a special case for the secondary button
+                    // TODO(WB-1895): Revisit disabled styles.
+                    border: semanticColor.action.primary.disabled.border,
+                    foreground:
+                        semanticColor.action.secondary.disabled.foreground,
                 },
             },
             // kind=secondary / color=default / light=true
@@ -165,11 +169,11 @@ const theme = {
                     icon: "transparent",
                 },
                 disabled: {
-                    border: semanticColor.action.disabled.default,
-                    background:
-                        semanticColor.action.secondary.destructive.press
-                            .background,
-                    foreground: semanticColor.text.disabled,
+                    // NOTE: This is a special case for the secondary button
+                    // TODO(WB-1895): Revisit disabled styles.
+                    border: semanticColor.action.primary.disabled.border,
+                    foreground:
+                        semanticColor.action.secondary.disabled.foreground,
                 },
             },
             // kind=secondary / color=destructive / light=true
@@ -231,7 +235,8 @@ const theme = {
                             .foreground,
                 },
                 disabled: {
-                    foreground: semanticColor.text.disabled,
+                    foreground:
+                        semanticColor.action.secondary.disabled.foreground,
                 },
             },
             // kind=tertiary / color=default / light=true
@@ -276,7 +281,8 @@ const theme = {
                             .foreground,
                 },
                 disabled: {
-                    foreground: semanticColor.text.disabled,
+                    foreground:
+                        semanticColor.action.secondary.disabled.foreground,
                 },
             },
             // kind=tertiary / color=destructive / light=true
diff --git a/packages/wonder-blocks-clickable/src/components/clickable.tsx b/packages/wonder-blocks-clickable/src/components/clickable.tsx
@@ -418,7 +418,7 @@ const styles = StyleSheet.create({
         outline: `solid ${border.width.thin}px ${semanticColor.border.inverse}`,
     },
     disabled: {
-        color: semanticColor.text.disabled,
+        color: semanticColor.action.secondary.disabled.foreground,
         cursor: "not-allowed",
         ":focus": {
             outline: "none",
diff --git a/packages/wonder-blocks-dropdown/src/components/action-menu-opener-core.tsx b/packages/wonder-blocks-dropdown/src/components/action-menu-opener-core.tsx
@@ -113,8 +113,7 @@ const theme = {
                         .foreground,
             },
             disabled: {
-                // TODO(WB-1889): Use the new disabled color tokens.
-                foreground: semanticColor.action.disabled.default,
+                foreground: semanticColor.action.secondary.disabled.foreground,
             },
             press: {
                 foreground:
diff --git a/packages/wonder-blocks-dropdown/src/components/checkbox.tsx b/packages/wonder-blocks-dropdown/src/components/checkbox.tsx
@@ -70,9 +70,8 @@ const theme = {
                 border: semanticColor.border.strong,
             },
             disabled: {
-                // TODO(WB-1889): Use the new disabled color tokens.
-                border: semanticColor.border.primary,
-                background: semanticColor.action.disabled.secondary,
+                border: semanticColor.action.secondary.disabled.border,
+                background: semanticColor.action.secondary.disabled.background,
             },
         },
     },
diff --git a/packages/wonder-blocks-dropdown/src/components/combobox.tsx b/packages/wonder-blocks-dropdown/src/components/combobox.tsx
@@ -700,10 +700,9 @@ const theme = {
                 background: semanticColor.surface.primary,
             },
             disabled: {
-                // TODO(WB-1889): Use the new disabled color tokens.
-                border: semanticColor.border.primary,
-                background: semanticColor.action.disabled.secondary,
-                foreground: semanticColor.text.secondary,
+                border: semanticColor.action.secondary.disabled.border,
+                background: semanticColor.action.secondary.disabled.background,
+                foreground: semanticColor.action.secondary.disabled.foreground,
             },
             error: {
                 border: semanticColor.status.critical.foreground,
diff --git a/packages/wonder-blocks-dropdown/src/components/listbox.tsx b/packages/wonder-blocks-dropdown/src/components/listbox.tsx
@@ -213,7 +213,7 @@ const theme = {
     listbox: {
         color: {
             disabled: {
-                foreground: semanticColor.text.disabled,
+                foreground: semanticColor.action.secondary.disabled.foreground,
             },
         },
     },
diff --git a/packages/wonder-blocks-dropdown/src/components/option-item.tsx b/packages/wonder-blocks-dropdown/src/components/option-item.tsx
@@ -329,7 +329,7 @@ const theme = {
             },
             disabled: {
                 background: "transparent",
-                foreground: semanticColor.text.disabled,
+                foreground: semanticColor.action.secondary.disabled.foreground,
             },
         },
     },
diff --git a/packages/wonder-blocks-dropdown/src/components/select-opener.tsx b/packages/wonder-blocks-dropdown/src/components/select-opener.tsx
@@ -255,8 +255,10 @@ const _generateStyles = (placeholder: boolean, error: boolean) => {
             foreground: semanticColor.text.primary,
         },
         disabled: {
-            border: semanticColor.border.primary,
-            background: semanticColor.action.disabled.secondary,
+            border: semanticColor.action.secondary.disabled.border,
+            background: semanticColor.action.secondary.disabled.background,
+            // NOTE: This color is specific for form fields.
+            // TODO(WB-1895): Revisit disabled styles.
             foreground: semanticColor.text.secondary,
         },
         // Form validation error state
diff --git a/packages/wonder-blocks-form/src/components/checkbox-core.tsx b/packages/wonder-blocks-form/src/components/checkbox-core.tsx
@@ -123,8 +123,8 @@ const CheckboxCore = React.forwardRef(function CheckboxCore(
 });
 
 const disabledState = {
-    border: semanticColor.border.primary,
-    background: semanticColor.action.disabled.secondary,
+    border: semanticColor.action.secondary.disabled.border,
+    background: semanticColor.action.secondary.disabled.background,
 };
 
 const sharedStyles = StyleSheet.create({
diff --git a/packages/wonder-blocks-form/src/components/choice-internal.tsx b/packages/wonder-blocks-form/src/components/choice-internal.tsx
@@ -169,7 +169,7 @@ const styles = StyleSheet.create({
         marginTop: -2,
     },
     disabledLabel: {
-        color: semanticColor.text.disabled,
+        color: semanticColor.action.secondary.disabled.foreground,
     },
     description: {
         // 16 for icon + 8 for spacing strut
diff --git a/packages/wonder-blocks-form/src/components/radio-core.tsx b/packages/wonder-blocks-form/src/components/radio-core.tsx
@@ -53,8 +53,8 @@ const StyledInput = addStyle("input");
 });
 
 const disabledState = {
-    border: semanticColor.border.primary,
-    background: semanticColor.action.disabled.secondary,
+    border: semanticColor.action.secondary.disabled.border,
+    background: semanticColor.action.secondary.disabled.background,
 };
 
 const size = 16; // circle with a different color. Here, we add that center circle. // If the checkbox is disabled and selected, it has a border but also an inner
@@ -65,7 +65,7 @@ const disabledChecked = {
     height: size / 2,
     width: size / 2,
     borderRadius: "50%",
-    backgroundColor: semanticColor.action.disabled.default,
+    backgroundColor: semanticColor.action.primary.disabled.background,
 } as const;
 
 const sharedStyles = StyleSheet.create({
diff --git a/packages/wonder-blocks-form/src/components/text-area.tsx b/packages/wonder-blocks-form/src/components/text-area.tsx
@@ -324,8 +324,10 @@ const states = {
         foreground: semanticColor.text.primary,
     },
     disabled: {
-        border: semanticColor.border.primary,
-        background: semanticColor.action.disabled.secondary,
+        border: semanticColor.action.secondary.disabled.border,
+        background: semanticColor.action.secondary.disabled.background,
+        // NOTE: This color is specific for form fields.
+        // TODO(WB-1895): Revisit disabled styles.
         foreground: semanticColor.text.secondary,
     },
     // Form validation error state
diff --git a/packages/wonder-blocks-form/src/components/text-field.tsx b/packages/wonder-blocks-form/src/components/text-field.tsx
@@ -271,8 +271,10 @@ const states = {
         foreground: semanticColor.text.primary,
     },
     disabled: {
-        border: semanticColor.border.primary,
-        background: semanticColor.action.disabled.secondary,
+        border: semanticColor.action.secondary.disabled.border,
+        background: semanticColor.action.secondary.disabled.background,
+        // NOTE: This color is specific for form fields.
+        // TODO(WB-1895): Revisit disabled styles.
         foreground: semanticColor.text.secondary,
     },
     // Form validation error state
diff --git a/packages/wonder-blocks-icon-button/src/themes/default.ts b/packages/wonder-blocks-icon-button/src/themes/default.ts
@@ -1,9 +1,10 @@
 import {border, color, semanticColor} from "@khanacademy/wonder-blocks-tokens";
 
 const disabledStates = {
-    border: semanticColor.action.disabled.default,
+    // NOTE: This is a special case for the button
+    border: semanticColor.action.primary.disabled.border,
     background: "transparent",
-    foreground: semanticColor.action.disabled.default,
+    foreground: semanticColor.action.secondary.disabled.foreground,
 };
 
 // TODO(WB-1852): Remove light variants.
diff --git a/packages/wonder-blocks-search-field/src/components/search-field.tsx b/packages/wonder-blocks-search-field/src/components/search-field.tsx
@@ -202,7 +202,7 @@ const SearchField: React.ForwardRefExoticComponent<
                         size="small"
                         color={
                             disabled
-                                ? semanticColor.action.disabled.default
+                                ? semanticColor.icon.disabled
                                 : semanticColor.icon.primary
                         }
                         style={styles.searchIcon}
diff --git a/packages/wonder-blocks-switch/src/themes/default.ts b/packages/wonder-blocks-switch/src/themes/default.ts
@@ -13,7 +13,7 @@ const theme = {
         bg: {
             switch: {
                 off: action.default.border,
-                disabledOff: semanticColor.action.disabled.default,
+                disabledOff: semanticColor.action.primary.disabled.background,
                 // NOTE: Adding this as a primitive token b/c we don't have a
                 // semantic token for this background color
                 activeOff: color.fadedOffBlack64,
@@ -29,7 +29,7 @@ const theme = {
                 on: action.default.foreground,
                 disabledOn: action.press.background,
                 off: action.default.border,
-                disabledOff: semanticColor.action.disabled.default,
+                disabledOff: semanticColor.icon.disabled,
             },
         },
         outline: {
diff --git a/packages/wonder-blocks-tokens/src/tokens/semantic-color.ts b/packages/wonder-blocks-tokens/src/tokens/semantic-color.ts
@@ -48,6 +48,12 @@ export const semanticColor = {
                     foreground: color.white,
                 },
             },
+
+            disabled: {
+                border: color.fadedOffBlack32,
+                background: color.fadedOffBlack32,
+                foreground: color.offWhite,
+            },
         },
 
         secondary: {
@@ -85,10 +91,12 @@ export const semanticColor = {
                     foreground: color.activeRed,
                 },
             },
-        },
-        disabled: {
-            default: color.fadedOffBlack32,
-            secondary: color.offWhite,
+
+            disabled: {
+                border: border.primary,
+                background: color.offWhite,
+                foreground: color.fadedOffBlack32,
+            },
         },
     },
     /**

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@khanacademy/wonder-blocks-tokens": major
 +---
++
 +Remove `action.disabled` object in favor of `action.primary.disabled` and `action.secondary.disabled`