WB-2050(part1): Tokens update - Add knockout tokens and replace foreground.inverse.* and border.inverse.* usage (#2758)

beaesguerra · web-flow · commit aa6ad9292682 · 2025-08-20T14:40:05.000-06:00
## Summary: - Introducing `border.knockout.default` and `foreground.knockout.default` tokens. This will replace `border.inverse.*` and `foreground.inverse.*` tokens to align with the recent design token changes (the inverse tokens will be removed in a future update once existing usage of these tokens have moved to the new token structure) - Updating existing usage of `border.inverse.*` and `foreground.inverse.*` tokens in WB Token Mapping: | Before | After | | --- | --- | | `foreground.inverse.strong` | `foreground.knockout.default` | | `border.inverse.strong` | `border.knockout.default` | For `foreground.inverse.subtle/default` and `border.inverse.subtle/default` the mapping will either map to a `neutral` or `disabled` value depending on the use case Issue: WB-2050 Design: [Core Tokens](https://www.figma.com/design/e9qdyiDUBZ3rDabP9S7ulO/%E2%9A%A1%EF%B8%8F-Handshake?node-id=3040-15158&m=dev) ## Test plan: - Confirm the `foreground.knockout.default` and `border.knockout.default` tokens exist (`?path=/docs/foundations-using-color--docs`) - Confirm the `foreground.inverse.*` and `border.inverse.*` tokens have not been removed - Most things should look the same. For any components that have any changes, confirm they are intentional (I noted the expected changes in Chromatic) ## Implementation plan 1. Add knockout tokens (#2758) 2. Add background base and overlay tokens 3. Update usage (in WB and other repos) - Replace foreground and border inverse tokens usage in other repos - Replace surface tokens with background base tokens - Use background.base.default token for white instead of background.neutral.subtle 4. Update background.neutral.subtle to light gray 5. Remove surface and inverse tokens Author: beaesguerra Reviewers: beaesguerra, marcysutton Required Reviewers: Approved By: marcysutton Checks: ✅ 49 checks were successful, ⏭️ 11 checks have been skipped, ⏹️ 5 checks were cancelled Pull Request URL: #2758
diff --git a/.changeset/few-carrots-cough.md b/.changeset/few-carrots-cough.md
@@ -0,0 +1,6 @@
+---
+"@khanacademy/wonder-blocks-tokens": patch
+"@khanacademy/wonder-blocks-cell": patch
+---
+
+Add themed component tokens for Cell for it's disabled state
diff --git a/.changeset/hungry-bananas-grow.md b/.changeset/hungry-bananas-grow.md
@@ -0,0 +1,12 @@
+---
+"@khanacademy/wonder-blocks-clickable": patch
+"@khanacademy/wonder-blocks-toolbar": patch
+"@khanacademy/wonder-blocks-styles": patch
+"@khanacademy/wonder-blocks-switch": patch
+"@khanacademy/wonder-blocks-cell": patch
+"@khanacademy/wonder-blocks-form": patch
+"@khanacademy/wonder-blocks-link": patch
+"@khanacademy/wonder-blocks-pill": patch
+---
+
+Move away from using `foreground.inverse` and `border.inverse` tokens in favour of the new knockout tokens
diff --git a/.changeset/silent-bikes-cheer.md b/.changeset/silent-bikes-cheer.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-tokens": minor
+---
+
+Adds `foreground.knockout.default` and `border.knockout.default` semantic core colors. Tokens that were previously using `foreground.inverse.*` and `border.inverse.*` have been updated to use the knockout token or other core tokens
diff --git a/__docs__/wonder-blocks-badge/badge-testing-snapshots.stories.tsx b/__docs__/wonder-blocks-badge/badge-testing-snapshots.stories.tsx
@@ -359,14 +359,14 @@ export const AllBadgesScenarios: StoryComponentType = {
                                         backgroundColor:
                                             semanticColor.surface.inverse,
                                         borderColor:
-                                            semanticColor.core.border.inverse
-                                                .strong,
+                                            semanticColor.core.border.knockout
+                                                .default,
                                         color: semanticColor.core.foreground
-                                            .inverse.strong,
+                                            .knockout.default,
                                     },
                                     icon: {
                                         color: semanticColor.core.foreground
-                                            .inverse.strong,
+                                            .knockout.default,
                                     },
                                     label: {
                                         fontWeight: font.weight.medium,
diff --git a/__docs__/wonder-blocks-badge/badge.stories.tsx b/__docs__/wonder-blocks-badge/badge.stories.tsx
@@ -198,10 +198,12 @@ export const CustomStyles: StoryComponentType = {
                 styles={{
                     root: {
                         backgroundColor: semanticColor.surface.inverse,
-                        borderColor: semanticColor.core.border.inverse.strong,
-                        color: semanticColor.core.foreground.inverse.strong,
+                        borderColor: semanticColor.core.border.knockout.default,
+                        color: semanticColor.core.foreground.knockout.default,
+                    },
+                    icon: {
+                        color: semanticColor.core.foreground.knockout.default,
                     },
-                    icon: {color: semanticColor.core.foreground.inverse.strong},
                     label: {
                         fontWeight: font.weight.medium,
                     },
diff --git a/__docs__/wonder-blocks-banner/banner.stories.tsx b/__docs__/wonder-blocks-banner/banner.stories.tsx
@@ -132,7 +132,7 @@ export const Kinds: StoryComponentType = {
  */
 export const Layouts: StoryComponentType = () => {
     const borderStyle = {
-        border: `${border.width.medium} solid ${semanticColor.core.border.inverse.strong}`,
+        border: `${border.width.medium} solid ${semanticColor.core.border.knockout.default}`,
     } as const;
     const floatingContainerStyle = {padding: sizing.size_080} as const;
 
diff --git a/__docs__/wonder-blocks-cell/compact-cell.stories.tsx b/__docs__/wonder-blocks-cell/compact-cell.stories.tsx
@@ -234,12 +234,12 @@ export const CompactCellWithCustomStyles: StoryComponentType = {
             rightAccessory={
                 <PhosphorIcon
                     icon={IconMappings.calendar}
-                    color={semanticColor.core.foreground.inverse.strong}
+                    color={semanticColor.core.foreground.knockout.default}
                 />
             }
             style={{
                 background: semanticColor.surface.inverse,
-                color: semanticColor.core.foreground.inverse.strong,
+                color: semanticColor.core.foreground.knockout.default,
             }}
             onClick={() => {}}
         />
diff --git a/__docs__/wonder-blocks-clickable/clickable.stories.tsx b/__docs__/wonder-blocks-clickable/clickable.stories.tsx
@@ -337,7 +337,7 @@ const styles = StyleSheet.create({
     },
     dark: {
         backgroundColor: semanticColor.surface.inverse,
-        color: semanticColor.core.foreground.inverse.strong,
+        color: semanticColor.core.foreground.knockout.default,
         padding: spacing.xSmall_8,
     },
     row: {
@@ -353,7 +353,7 @@ const styles = StyleSheet.create({
         padding: spacing.large_24,
     },
     disabled: {
-        color: semanticColor.core.foreground.inverse.strong,
+        color: semanticColor.core.foreground.knockout.default,
         backgroundColor: semanticColor.surface.overlay,
     },
     button: {
diff --git a/__docs__/wonder-blocks-link/link.stories.tsx b/__docs__/wonder-blocks-link/link.stories.tsx
@@ -248,7 +248,7 @@ export const StartAndEndIcons: StoryComponentType = {
                 </Link>
                 <Body
                     style={{
-                        color: semanticColor.core.foreground.inverse.strong,
+                        color: semanticColor.core.foreground.knockout.default,
                     }}
                 >
                     This is an inline{" "}
@@ -325,7 +325,7 @@ export const InlineLight: StoryComponentType = {
     render: () => (
         <Body
             style={{
-                color: semanticColor.core.foreground.inverse.strong,
+                color: semanticColor.core.foreground.knockout.default,
                 width: 530,
             }}
         >
diff --git a/__docs__/wonder-blocks-pill/pill.stories.tsx b/__docs__/wonder-blocks-pill/pill.stories.tsx
@@ -235,7 +235,7 @@ WithTypography.parameters = {
 export const WithStyle: StoryComponentType = () => {
     const customStyle = {
         backgroundColor: tokens.semanticColor.surface.inverse,
-        color: tokens.semanticColor.core.foreground.inverse.strong,
+        color: tokens.semanticColor.core.foreground.knockout.default,
         paddingLeft: tokens.spacing.xxLarge_48,
         paddingRight: tokens.spacing.xxLarge_48,
 
diff --git a/__docs__/wonder-blocks-popover/popover-content-core.stories.tsx b/__docs__/wonder-blocks-popover/popover-content-core.stories.tsx
@@ -60,7 +60,7 @@ const styles = StyleSheet.create({
     action: {
         backgroundColor: "transparent",
         border: "none",
-        color: semanticColor.core.foreground.inverse.strong,
+        color: semanticColor.core.foreground.knockout.default,
         cursor: "pointer",
         margin: spacing.small_12,
         padding: spacing.xxSmall_6,
diff --git a/__docs__/wonder-blocks-styles/focus-styles.stories.tsx b/__docs__/wonder-blocks-styles/focus-styles.stories.tsx
@@ -86,8 +86,8 @@ export const Focus: Story = {
                         style={[
                             focusStyles.focus,
                             {
-                                color: semanticColor.core.foreground.inverse
-                                    .strong,
+                                color: semanticColor.core.foreground.knockout
+                                    .default,
                             },
                         ]}
                     />
@@ -129,8 +129,8 @@ export const Scenarios: Story = {
                             style={[
                                 focusStyles.focus,
                                 {
-                                    color: semanticColor.core.foreground.inverse
-                                        .strong,
+                                    color: semanticColor.core.foreground
+                                        .knockout.default,
                                 },
                             ]}
                         />
diff --git a/__docs__/wonder-blocks-tooltip/tooltip.stories.tsx b/__docs__/wonder-blocks-tooltip/tooltip.stories.tsx
@@ -314,7 +314,7 @@ export const WithStyle: StoryComponentType = () => {
         <View style={[styles.centered, styles.row]}>
             <Tooltip
                 contentStyle={{
-                    color: semanticColor.core.foreground.inverse.strong,
+                    color: semanticColor.core.foreground.knockout.default,
                     padding: spacing.xLarge_32,
                 }}
                 content={`This is a styled tooltip.`}
diff --git a/packages/wonder-blocks-cell/src/components/internal/cell-core.tsx b/packages/wonder-blocks-cell/src/components/internal/cell-core.tsx
@@ -342,7 +342,7 @@ const styles = StyleSheet.create({
     disabled: {
         background: semanticColor.surface.primary,
         borderRadius: theme.root.border.radius.default,
-        color: semanticColor.core.foreground.inverse.subtle,
+        color: theme.root.color.disabled.foreground,
         ":hover": {
             background: semanticColor.surface.primary,
             cursor: "not-allowed",
diff --git a/packages/wonder-blocks-cell/src/theme/default.ts b/packages/wonder-blocks-cell/src/theme/default.ts
@@ -28,6 +28,9 @@ export default {
                 foreground: semanticColor.core.foreground.instructive.default,
                 border: semanticColor.core.border.instructive.default,
             },
+            disabled: {
+                foreground: semanticColor.core.foreground.disabled.default,
+            },
         },
         layout: {
             gap: {
@@ -77,7 +80,7 @@ export default {
         sizing: {
             height: sizing.size_020,
         },
-        shadow: `inset 0px -1px 0px ${semanticColor.core.border.inverse.default}`,
+        shadow: `inset 0px -1px 0px ${semanticColor.core.border.neutral.subtle}`,
     },
     title: {
         font: {
diff --git a/packages/wonder-blocks-cell/src/theme/thunderblocks.ts b/packages/wonder-blocks-cell/src/theme/thunderblocks.ts
@@ -26,6 +26,9 @@ export default mergeTheme(defaultTheme, {
                 foreground: semanticColor.core.foreground.neutral.strong,
                 border: semanticColor.core.transparent,
             },
+            disabled: {
+                foreground: semanticColor.core.foreground.disabled.subtle,
+            },
         },
         layout: {
             gap: {
diff --git a/packages/wonder-blocks-clickable/src/components/clickable.tsx b/packages/wonder-blocks-clickable/src/components/clickable.tsx
@@ -411,7 +411,7 @@ const styles = StyleSheet.create({
     },
     // TODO(WB-1852): Remove light variant.
     focusedLight: {
-        outline: `solid ${border.width.medium} ${semanticColor.core.border.inverse.strong}`,
+        outline: `solid ${border.width.medium} ${semanticColor.core.border.knockout.default}`,
     },
     disabled: {
         color: semanticColor.action.secondary.disabled.foreground,
diff --git a/packages/wonder-blocks-form/src/util/styles.ts b/packages/wonder-blocks-form/src/util/styles.ts
@@ -89,7 +89,7 @@ export const baseStyles = {
     },
     icon: {
         default: {
-            foreground: semanticColor.core.foreground.inverse.strong,
+            foreground: semanticColor.core.foreground.knockout.default,
         },
         disabled: {
             foreground: semanticColor.core.foreground.neutral.subtle,
@@ -176,7 +176,7 @@ export const colorStates: StyleMap = {
             default: {
                 rest: {
                     border: semanticColor.input.checked.background,
-                    background: semanticColor.core.border.inverse.strong,
+                    background: semanticColor.core.border.knockout.default, // TODO(WB-2050): use white background
                 },
                 hover: baseStyles.choice.checked,
                 press: {
@@ -197,15 +197,15 @@ export const colorStates: StyleMap = {
             disabled: {
                 rest: {
                     border: semanticColor.core.border.disabled.default,
-                    background: semanticColor.core.border.inverse.strong,
+                    background: semanticColor.core.border.knockout.default, // TODO(WB-2050): use white background
                 },
                 hover: {
                     border: semanticColor.core.border.disabled.strong,
-                    background: semanticColor.core.border.inverse.strong,
+                    background: semanticColor.core.border.knockout.default, // TODO(WB-2050): use white background
                 },
                 press: {
                     border: semanticColor.core.border.disabled.strong,
-                    background: semanticColor.core.border.inverse.strong,
+                    background: semanticColor.core.border.knockout.default, // TODO(WB-2050): use white background
                 },
             },
         },
diff --git a/packages/wonder-blocks-link/src/components/link-core.tsx b/packages/wonder-blocks-link/src/components/link-core.tsx
@@ -193,13 +193,10 @@ const states = {
         // TODO(WB-1852): Remove light variant.
         inverse: {
             rest: {
-                foreground: semanticColor.core.foreground.inverse.strong,
+                foreground: semanticColor.core.foreground.knockout.default,
             },
             hover: {
-                foreground: semanticColor.core.foreground.inverse.strong,
-            },
-            focus: {
-                border: semanticColor.core.border.inverse.strong,
+                foreground: semanticColor.core.foreground.knockout.default,
             },
             press: {
                 foreground: color.fadedBlue,
diff --git a/packages/wonder-blocks-pill/src/components/pill.tsx b/packages/wonder-blocks-pill/src/components/pill.tsx
@@ -233,7 +233,7 @@ const _generateColorStyles = (clickable: boolean, kind: PillKind) => {
     switch (kind) {
         case "accent":
             backgroundColor = semanticColor.core.background.instructive.default;
-            textColor = semanticColor.core.foreground.inverse.strong;
+            textColor = semanticColor.core.foreground.knockout.default;
             break;
         case "info":
             backgroundColor = semanticColor.feedback.info.subtle.background;
diff --git a/packages/wonder-blocks-styles/src/styles/action-styles.ts b/packages/wonder-blocks-styles/src/styles/action-styles.ts
@@ -1,7 +1,7 @@
 import {border, semanticColor} from "@khanacademy/wonder-blocks-tokens";
 import {focus} from "./focus-styles";
 
-const pressColor = `color-mix(in srgb, ${semanticColor.core.border.neutral.default} 55%, ${semanticColor.core.border.inverse.strong})`;
+const pressColor = `color-mix(in srgb, ${semanticColor.core.border.neutral.default} 55%, ${semanticColor.core.border.knockout.default})`;
 
 /**
  * The inverse styles for an interactive control.
@@ -15,16 +15,16 @@ export const inverse = {
     // button, as there might be some cases where the interactive element
     // already includes a border.
     ":not([aria-disabled=true])": {
-        borderColor: semanticColor.core.border.inverse.strong,
-        color: semanticColor.core.foreground.inverse.strong,
+        borderColor: semanticColor.core.border.knockout.default,
+        color: semanticColor.core.foreground.knockout.default,
     },
 
     ":hover:not([aria-disabled=true])": {
-        color: semanticColor.core.foreground.inverse.strong,
+        color: semanticColor.core.foreground.knockout.default,
         // Overriding borderColor only to preserve the visual integrity of the
         // button, as there might be some cases where the interactive element
         // already includes a border.
-        borderColor: semanticColor.core.border.inverse.strong,
+        borderColor: semanticColor.core.border.knockout.default,
     },
 
     // Use the global focus styles to ensure that the focus state is consistent
diff --git a/packages/wonder-blocks-switch/src/components/switch.tsx b/packages/wonder-blocks-switch/src/components/switch.tsx
@@ -61,8 +61,8 @@ const baseStyles = {
                 activeOn: semanticColor.core.background.instructive.strong,
             },
             slider: {
-                on: semanticColor.core.foreground.inverse.strong,
-                off: semanticColor.core.foreground.inverse.strong,
+                on: semanticColor.core.foreground.knockout.default,
+                off: semanticColor.core.foreground.knockout.default,
             },
             icon: {
                 on: semanticColor.core.foreground.instructive.subtle,
diff --git a/packages/wonder-blocks-tokens/src/theme/semantic/semantic-color-thunderblocks.ts b/packages/wonder-blocks-tokens/src/theme/semantic/semantic-color-thunderblocks.ts
diff --git a/packages/wonder-blocks-tokens/src/theme/semantic/semantic-color.ts b/packages/wonder-blocks-tokens/src/theme/semantic/semantic-color.ts
diff --git a/packages/wonder-blocks-toolbar/src/components/toolbar.tsx b/packages/wonder-blocks-toolbar/src/components/toolbar.tsx

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@khanacademy/wonder-blocks-tokens": minor
 +---
++
 +Adds `foreground.knockout.default` and `border.knockout.default` semantic core colors. Tokens that were previously using `foreground.inverse.*` and `border.inverse.*` have been updated to use the knockout token or other core tokens