From d6f4159cc2fdf5e225552e1a933aebeeff65eb2a Mon Sep 17 00:00:00 2001
From: Juan Andrade <juan@khanacademy.org@khanacademy.org>
Date: Tue, 28 Jan 2025 21:44:14 -0500
Subject: [PATCH 1/3] [semantic-p3] docs(changeset): Replace `color` with
 `semanticColor` tokens

---
 .changeset/gorgeous-adults-lay.md             |  7 +++
 .../components/accordion-section-header.tsx   | 55 ++++++-------------
 .../src/components/accordion-section.tsx      | 38 +++++++------
 .../src/components/banner.tsx                 | 16 +++---
 .../src/components/birthday-picker.tsx        | 12 +++-
 5 files changed, 60 insertions(+), 68 deletions(-)
 create mode 100644 .changeset/gorgeous-adults-lay.md

diff --git a/.changeset/gorgeous-adults-lay.md b/.changeset/gorgeous-adults-lay.md
new file mode 100644
index 0000000000..aa61f00516
--- /dev/null
+++ b/.changeset/gorgeous-adults-lay.md
@@ -0,0 +1,7 @@
+---
+"@khanacademy/wonder-blocks-birthday-picker": patch
+"@khanacademy/wonder-blocks-accordion": patch
+"@khanacademy/wonder-blocks-banner": patch
+---
+
+Replace `color` with `semanticColor` tokens
diff --git a/packages/wonder-blocks-accordion/src/components/accordion-section-header.tsx b/packages/wonder-blocks-accordion/src/components/accordion-section-header.tsx
index 4c07ab9dcf..bed43b6e85 100644
--- a/packages/wonder-blocks-accordion/src/components/accordion-section-header.tsx
+++ b/packages/wonder-blocks-accordion/src/components/accordion-section-header.tsx
@@ -6,7 +6,7 @@ import Clickable from "@khanacademy/wonder-blocks-clickable";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
 import {HeadingSmall} from "@khanacademy/wonder-blocks-typography";
-import * as tokens from "@khanacademy/wonder-blocks-tokens";
+import {spacing, semanticColor} from "@khanacademy/wonder-blocks-tokens";
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
 
 import type {AccordionCornerKindType} from "./accordion";
@@ -125,7 +125,7 @@ const AccordionSectionHeader = React.forwardRef(function AccordionSectionHeader(
                         {collapsible && (
                             <PhosphorIcon
                                 icon={caretDown}
-                                color={tokens.color.offBlack64}
+                                color={semanticColor.icon.primary}
                                 size="small"
                                 style={[
                                     animated && styles.iconWithAnimation,
@@ -150,7 +150,7 @@ const AccordionSectionHeader = React.forwardRef(function AccordionSectionHeader(
 // If we set the inner radius to the same value, there ends up being
 // a 1px gap between the border and the outline. To fix this, we
 // subtract 1 from the border radius.
-const INNER_BORDER_RADIUS = tokens.spacing.small_12 - 1;
+const INNER_BORDER_RADIUS = spacing.small_12 - 1;
 const ANIMATION_LENGTH = "300ms";
 
 const styles = StyleSheet.create({
@@ -176,27 +176,15 @@ const styles = StyleSheet.create({
         zIndex: 1,
 
         ":active": {
-            outline: `2px solid ${tokens.color.activeBlue}`,
+            outline: `2px solid ${semanticColor.action.outlined.progressive.press.border}`,
         },
 
         ":hover": {
-            outline: `2px solid ${tokens.color.blue}`,
-        },
-
-        // Provide basic, default focus styles on older browsers (e.g.
-        // Safari 14)
-        ":focus": {
-            boxShadow: `0 0 0 2px ${tokens.color.blue}`,
-        },
-
-        // Remove default focus styles for mouse users ONLY if
-        // :focus-visible is supported on this platform.
-        ":focus:not(:focus-visible)": {
-            boxShadow: "none",
+            outline: `2px solid ${semanticColor.border.focus}`,
         },
 
         ":focus-visible": {
-            outline: `2px solid ${tokens.color.blue}`,
+            outline: `2px solid ${semanticColor.border.focus}`,
         },
     },
     headerWrapperWithAnimation: {
@@ -222,16 +210,16 @@ const styles = StyleSheet.create({
         textAlign: "start",
     },
     headerString: {
-        paddingTop: tokens.spacing.medium_16,
-        paddingBottom: tokens.spacing.medium_16,
+        paddingTop: spacing.medium_16,
+        paddingBottom: spacing.medium_16,
     },
     headerStringCaretEnd: {
-        paddingInlineEnd: tokens.spacing.small_12,
-        paddingInlineStart: tokens.spacing.medium_16,
+        paddingInlineEnd: spacing.small_12,
+        paddingInlineStart: spacing.medium_16,
     },
     headerStringCaretStart: {
-        paddingInlineEnd: tokens.spacing.medium_16,
-        paddingInlineStart: tokens.spacing.small_12,
+        paddingInlineEnd: spacing.medium_16,
+        paddingInlineStart: spacing.small_12,
     },
     iconWithAnimation: {
         transition: `transform ${ANIMATION_LENGTH}`,
@@ -241,29 +229,18 @@ const styles = StyleSheet.create({
         transform: "rotate(180deg)",
     },
     iconStart: {
-        marginInlineStart: tokens.spacing.medium_16,
+        marginInlineStart: spacing.medium_16,
     },
     iconEnd: {
-        marginInlineEnd: tokens.spacing.medium_16,
+        marginInlineEnd: spacing.medium_16,
     },
     disabled: {
         pointerEvents: "none",
         color: "inherit",
 
-        // Provide basic, default focus styles on older browsers (e.g.
-        // Safari 14)
-        ":focus": {
-            boxShadow: `0 0 0 2px ${tokens.color.offBlack32}`,
-        },
-
-        // Remove default focus styles for mouse users ONLY if
-        // :focus-visible is supported on this platform.
-        ":focus:not(:focus-visible)": {
-            boxShadow: "none",
-        },
-
         ":focus-visible": {
-            outline: `2px solid ${tokens.color.offBlack32}`,
+            // TODO(WB-1856): Verify if we can use the global focus color
+            outline: `2px solid ${semanticColor.action.disabled.default}`,
         },
     },
 });
diff --git a/packages/wonder-blocks-accordion/src/components/accordion-section.tsx b/packages/wonder-blocks-accordion/src/components/accordion-section.tsx
index c9bc906a85..141ad885a5 100644
--- a/packages/wonder-blocks-accordion/src/components/accordion-section.tsx
+++ b/packages/wonder-blocks-accordion/src/components/accordion-section.tsx
@@ -3,7 +3,7 @@ import {StyleSheet} from "aphrodite";
 import type {StyleDeclaration} from "aphrodite";
 
 import {View} from "@khanacademy/wonder-blocks-core";
-import * as tokens from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {Body} from "@khanacademy/wonder-blocks-typography";
 import type {AriaProps, StyleType} from "@khanacademy/wonder-blocks-core";
 
@@ -311,7 +311,7 @@ const styles = StyleSheet.create({
         // vertically stacked.
         position: "static",
         boxSizing: "border-box",
-        backgroundColor: tokens.color.white,
+        backgroundColor: semanticColor.surface.primary,
     },
     wrapperWithAnimation: {
         transition: "grid-template-rows 300ms",
@@ -334,7 +334,7 @@ const styles = StyleSheet.create({
         visibility: "visible",
     },
     stringContent: {
-        padding: tokens.spacing.medium_16,
+        padding: spacing.medium_16,
     },
 });
 
@@ -355,38 +355,40 @@ const _generateStyles = (
     let firstSectionStyle: StyleType = Object.freeze({});
     let lastSectionStyle: StyleType = Object.freeze({});
 
+    const borderStyle = `1px solid ${semanticColor.border.primary}`;
+
     if (cornerKind === "square") {
         wrapperStyle = {
-            border: `1px solid ${tokens.color.offBlack16}`,
+            border: borderStyle,
             borderBottom: "none",
             borderRadius: 0,
         };
 
         if (isLastSection) {
             lastSectionStyle = {
-                borderBottom: `1px solid ${tokens.color.offBlack16}`,
+                borderBottom: borderStyle,
             };
         }
     }
 
     if (cornerKind === "rounded") {
         wrapperStyle = {
-            border: `1px solid ${tokens.color.offBlack16}`,
+            border: borderStyle,
             borderBottom: "none",
         };
 
         if (isFirstSection) {
             firstSectionStyle = {
-                borderStartStartRadius: tokens.spacing.small_12,
-                borderStartEndRadius: tokens.spacing.small_12,
+                borderStartStartRadius: spacing.small_12,
+                borderStartEndRadius: spacing.small_12,
             };
         }
 
         if (isLastSection) {
             lastSectionStyle = {
-                borderBottom: `1px solid ${tokens.color.offBlack16}`,
-                borderEndStartRadius: tokens.spacing.small_12,
-                borderEndEndRadius: tokens.spacing.small_12,
+                borderBottom: borderStyle,
+                borderEndStartRadius: spacing.small_12,
+                borderEndEndRadius: spacing.small_12,
             };
 
             contentWrapperStyle = {
@@ -395,17 +397,17 @@ const _generateStyles = (
                 // overflow out the corners. This issue can't be solved by
                 // putting `overflow: "hidden"` on the overall container
                 // because that cuts off the header's focus outline.
-                borderEndEndRadius: tokens.spacing.small_12,
-                borderEndStartRadius: tokens.spacing.small_12,
+                borderEndEndRadius: spacing.small_12,
+                borderEndStartRadius: spacing.small_12,
             };
         }
     }
 
     if (cornerKind === "rounded-per-section") {
         wrapperStyle = {
-            border: `1px solid ${tokens.color.offBlack16}`,
-            borderRadius: tokens.spacing.small_12,
-            marginBottom: tokens.spacing.medium_16,
+            border: borderStyle,
+            borderRadius: spacing.small_12,
+            marginBottom: spacing.medium_16,
         };
 
         contentWrapperStyle = {
@@ -413,8 +415,8 @@ const _generateStyles = (
             // so that the content doesn't overflow out the corners. We
             // can't put `overflow: "hidden"` on the overall container
             // because it cuts off the header's focus outline.
-            borderEndEndRadius: tokens.spacing.small_12,
-            borderEndStartRadius: tokens.spacing.small_12,
+            borderEndEndRadius: spacing.small_12,
+            borderEndStartRadius: spacing.small_12,
         };
     }
 
diff --git a/packages/wonder-blocks-banner/src/components/banner.tsx b/packages/wonder-blocks-banner/src/components/banner.tsx
index 7d9a4dfb67..1a171884d2 100644
--- a/packages/wonder-blocks-banner/src/components/banner.tsx
+++ b/packages/wonder-blocks-banner/src/components/banner.tsx
@@ -8,7 +8,7 @@ import {View} from "@khanacademy/wonder-blocks-core";
 import {PhosphorIcon, PhosphorIconAsset} from "@khanacademy/wonder-blocks-icon";
 import IconButton from "@khanacademy/wonder-blocks-icon-button";
 import Link from "@khanacademy/wonder-blocks-link";
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {font, semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {LabelSmall} from "@khanacademy/wonder-blocks-typography";
 
 import infoIcon from "@phosphor-icons/core/regular/info.svg";
@@ -131,26 +131,26 @@ const getValuesForKind = (kind: BannerKind): BannerValues => {
     switch (kind) {
         case "success":
             return {
-                color: color.green,
+                color: semanticColor.status.success.foreground,
                 icon: successIcon,
                 role: "status",
             };
         case "warning":
             return {
-                color: color.gold,
+                color: semanticColor.status.warning.foreground,
                 icon: warningIcon,
                 role: "alert",
                 ariaLive: "polite",
             };
         case "critical":
             return {
-                color: color.red,
+                color: semanticColor.status.critical.foreground,
                 icon: criticalIcon,
                 role: "alert",
             };
         default:
             return {
-                color: color.blue,
+                color: semanticColor.status.notice.foreground,
                 icon: infoIcon,
                 role: "status",
             };
@@ -313,7 +313,7 @@ const styles = StyleSheet.create({
         // the base color needs to be hard-coded as white for the
         // intended pastel background color to show up correctly
         // on dark backgrounds.
-        backgroundColor: color.white,
+        backgroundColor: semanticColor.surface.primary,
     },
     containerInner: {
         flexDirection: "row",
@@ -328,7 +328,7 @@ const styles = StyleSheet.create({
         marginInlineStart: spacing.xxxxSmall_2,
         marginInlineEnd: spacing.xSmall_8,
         alignSelf: "flex-start",
-        color: color.offBlack64,
+        color: semanticColor.icon.primary,
     },
     labelAndButtonsContainer: {
         flex: 1,
@@ -359,7 +359,7 @@ const styles = StyleSheet.create({
         justifyContent: "center",
     },
     link: {
-        fontSize: 14,
+        fontSize: font.size.small,
     },
     dismiss: {
         flexShrink: 1,
diff --git a/packages/wonder-blocks-birthday-picker/src/components/birthday-picker.tsx b/packages/wonder-blocks-birthday-picker/src/components/birthday-picker.tsx
index a53f6f8d0e..aeab09e0fa 100644
--- a/packages/wonder-blocks-birthday-picker/src/components/birthday-picker.tsx
+++ b/packages/wonder-blocks-birthday-picker/src/components/birthday-picker.tsx
@@ -3,7 +3,7 @@ import * as React from "react";
 import {StyleSheet} from "aphrodite";
 import {StyleType, View} from "@khanacademy/wonder-blocks-core";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {Body} from "@khanacademy/wonder-blocks-typography";
 import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
 import {SingleSelect, OptionItem} from "@khanacademy/wonder-blocks-dropdown";
@@ -284,11 +284,17 @@ export default class BirthdayPicker extends React.Component<Props, State> {
                     <PhosphorIcon
                         size="small"
                         icon={infoIcon}
-                        color={color.red}
+                        color={semanticColor.icon.destructive}
                         aria-hidden="true"
                     />
                     <Strut size={spacing.xxxSmall_4} />
-                    <Body style={{color: color.red}}>{error}</Body>
+                    <Body
+                        style={{
+                            color: semanticColor.status.critical.foreground,
+                        }}
+                    >
+                        {error}
+                    </Body>
                 </View>
             </>
         );

From 14cc8c8bfde3fe4bfb1f70aa78eb00abad5c6861 Mon Sep 17 00:00:00 2001
From: Juan Andrade <juan@khanacademy.org@khanacademy.org>
Date: Wed, 29 Jan 2025 11:27:00 -0500
Subject: [PATCH 2/3] [semantic-p3] Fix Accordion story

---
 __docs__/wonder-blocks-accordion/accordion.stories.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/__docs__/wonder-blocks-accordion/accordion.stories.tsx b/__docs__/wonder-blocks-accordion/accordion.stories.tsx
index d208ed7257..9357ecd9be 100644
--- a/__docs__/wonder-blocks-accordion/accordion.stories.tsx
+++ b/__docs__/wonder-blocks-accordion/accordion.stories.tsx
@@ -611,6 +611,10 @@ export const BackgroundColorExample: StoryComponentType = {
     render: () => {
         const accordionSectionStyle = {
             backgroundColor: tokens.color.fadedBlue,
+            // NOTE: This border color uses the opacity token to match the
+            // background color. By default, the border color is
+            // `fadedOffBlack16`, which is the HEX value of `offBlack16`.
+            borderColor: tokens.color.offBlack16,
         };
 
         const sections = [

From 79e48c00222fdbf3d44dddae2b201f5c91bb8e5b Mon Sep 17 00:00:00 2001
From: Juan Andrade <juan@khanacademy.org@khanacademy.org>
Date: Fri, 31 Jan 2025 16:55:15 -0500
Subject: [PATCH 3/3] [semantic-p3] Add TODO comment

---
 packages/wonder-blocks-banner/src/components/banner.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/wonder-blocks-banner/src/components/banner.tsx b/packages/wonder-blocks-banner/src/components/banner.tsx
index 1a171884d2..b74dc60996 100644
--- a/packages/wonder-blocks-banner/src/components/banner.tsx
+++ b/packages/wonder-blocks-banner/src/components/banner.tsx
@@ -313,6 +313,8 @@ const styles = StyleSheet.create({
         // the base color needs to be hard-coded as white for the
         // intended pastel background color to show up correctly
         // on dark backgrounds.
+        // TODO(WB-1865): Verify if we can change this to use semanticColor
+        // status tokens.
         backgroundColor: semanticColor.surface.primary,
     },
     containerInner: {