Khan · jandrade · Feb 11, 2025 · Feb 11, 2025 · Feb 11, 2025 · Feb 11, 2025
diff --git a/.changeset/curly-countries-protect.md b/.changeset/curly-countries-protect.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-popover": patch
+---
+
+Migrate to semanticColor tokens
diff --git a/.changeset/eighty-grapes-mate.md b/.changeset/eighty-grapes-mate.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-toolbar": patch
+---
+
+Migrate to semanticColor tokens
diff --git a/.changeset/mean-badgers-sit.md b/.changeset/mean-badgers-sit.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-tooltip": patch
+---
+
+Migrate to semanticColor tokens
diff --git a/__docs__/wonder-blocks-popover/popover-content-core.stories.tsx b/__docs__/wonder-blocks-popover/popover-content-core.stories.tsx
@@ -5,7 +5,7 @@ import type {Meta, StoryObj} from "@storybook/react";
 import Clickable from "@khanacademy/wonder-blocks-clickable";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {color, semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {
     Body,
     HeadingSmall,
@@ -67,7 +67,7 @@ const styles = StyleSheet.create({
     action: {
         backgroundColor: "transparent",
         border: "none",
-        color: color.white,
+        color: semanticColor.text.inverse,
         cursor: "pointer",
         margin: spacing.small_12,
         padding: spacing.xxSmall_6,

diff --git a/__docs__/wonder-blocks-popover/popover.stories.tsx b/__docs__/wonder-blocks-popover/popover.stories.tsx
@@ -5,7 +5,7 @@ import type {Meta, StoryObj} from "@storybook/react";
 import Button from "@khanacademy/wonder-blocks-button";
 import {PropsFor, 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 {HeadingMedium, LabelLarge} from "@khanacademy/wonder-blocks-typography";
 import type {Placement} from "@khanacademy/wonder-blocks-tooltip";
 
@@ -81,7 +81,7 @@ const styles = StyleSheet.create({
         justifyContent: "space-between",
     },
     playground: {
-        border: `1px dashed ${color.purple}`,
+        border: `1px dashed ${semanticColor.border.primary}`,
         marginTop: spacing.large_24,
         padding: spacing.large_24,
         flexDirection: "row",

diff --git a/__docs__/wonder-blocks-tooltip/tooltip.stories.tsx b/__docs__/wonder-blocks-tooltip/tooltip.stories.tsx
@@ -12,7 +12,7 @@ import {PropsFor, View} from "@khanacademy/wonder-blocks-core";
 import {TextField} from "@khanacademy/wonder-blocks-form";
 import IconButton from "@khanacademy/wonder-blocks-icon-button";
 import {OnePaneDialog, ModalLauncher} from "@khanacademy/wonder-blocks-modal";
-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";
 
@@ -313,7 +313,7 @@ export const WithStyle: StoryComponentType = () => {
         <View style={[styles.centered, styles.row]}>
             <Tooltip
                 contentStyle={{
-                    color: color.white,
+                    color: semanticColor.text.inverse,
                     padding: spacing.xLarge_32,
                 }}
                 content={`This is a styled tooltip.`}
@@ -474,7 +474,7 @@ const styles = StyleSheet.create({
         height: "200vh",
     },
     block: {
-        border: `solid 1px ${color.purple}`,
+        border: `solid 1px ${semanticColor.mastery.primary}`,
         width: spacing.xLarge_32,
         height: spacing.xLarge_32,
         alignItems: "center",
@@ -506,7 +506,12 @@ export const InTopCorner = {
                     icon={info}
                     size="small"
                     aria-hidden
-                    style={{":hover": {backgroundColor: color.red}}}
+                    style={{
+                        ":hover": {
+                            backgroundColor:
+                                semanticColor.status.critical.foreground,
+                        },
+                    }}
                 />
             </Tooltip>
         </View>

diff --git a/packages/wonder-blocks-popover/src/components/popover-content-core.tsx b/packages/wonder-blocks-popover/src/components/popover-content-core.tsx
@@ -3,7 +3,7 @@ import {StyleSheet} from "aphrodite";
 
 import type {AriaProps, StyleType} from "@khanacademy/wonder-blocks-core";
 import {View} from "@khanacademy/wonder-blocks-core";
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {color, semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 
 import CloseButton from "./close-button";
 
@@ -107,8 +107,9 @@ export default class PopoverContentCore extends React.Component<Props> {
 const styles = StyleSheet.create({
     content: {
         borderRadius: spacing.xxxSmall_4,
-        border: `solid 1px ${color.offBlack16}`,
-        backgroundColor: color.white,
+        border: `solid 1px ${semanticColor.border.primary}`,
+        backgroundColor: semanticColor.surface.primary,
+        // TODO(WB-1878): Use `elevation` token.
         boxShadow: `0 ${spacing.xSmall_8}px ${spacing.xSmall_8}px 0 ${color.offBlack8}`,
         margin: 0,
         maxWidth: spacing.medium_16 * 18, // 288px
@@ -120,13 +121,13 @@ const styles = StyleSheet.create({
      * Theming
      */
     blue: {
-        backgroundColor: color.blue,
-        color: color.white,
+        backgroundColor: semanticColor.surface.emphasis,
+        color: semanticColor.text.inverse,
     },
 
     darkBlue: {
-        backgroundColor: color.darkBlue,
-        color: color.white,
+        backgroundColor: semanticColor.surface.inverse,
+        color: semanticColor.text.inverse,
     },
 
     /**

diff --git a/packages/wonder-blocks-toolbar/src/components/toolbar.tsx b/packages/wonder-blocks-toolbar/src/components/toolbar.tsx
@@ -5,7 +5,7 @@ import * as React from "react";
 import {StyleSheet} from "aphrodite";
 
 import {View} from "@khanacademy/wonder-blocks-core";
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {color, semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {
     HeadingSmall,
     LabelLarge,
@@ -120,13 +120,13 @@ export default function Toolbar({
 
 const sharedStyles = StyleSheet.create({
     container: {
-        border: `1px solid ${color.offBlack16}`,
+        background: semanticColor.surface.primary,
+        border: `1px solid ${semanticColor.border.primary}`,
         flex: 1,
         display: "grid",
         alignItems: "center",
         minHeight: 66,
-        paddingLeft: spacing.medium_16,
-        paddingRight: spacing.medium_16,
+        paddingInline: spacing.medium_16,
         width: "100%",
     },
     containerWithTextTitle: {
@@ -142,10 +142,11 @@ const sharedStyles = StyleSheet.create({
     small: {
         minHeight: 50,
     },
+    // TODO(WB-1852): Remove light variant.
     dark: {
-        backgroundColor: color.darkBlue,
+        background: semanticColor.surface.inverse,
         boxShadow: `0 1px 0 0 ${color.white64}`,
-        color: "white",
+        color: semanticColor.text.inverse,
     },
     leftColumn: {
         alignItems: "center",
@@ -159,7 +160,7 @@ const sharedStyles = StyleSheet.create({
         flexGrow: 1,
     },
     subtitle: {
-        color: color.offBlack64,
+        color: semanticColor.text.secondary,
     },
     titles: {
         padding: spacing.small_12,

diff --git a/packages/wonder-blocks-tooltip/src/components/tooltip-bubble.tsx b/packages/wonder-blocks-tooltip/src/components/tooltip-bubble.tsx
@@ -1,7 +1,7 @@
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
 import {View} from "@khanacademy/wonder-blocks-core";
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {color, semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 
 import TooltipContent from "./tooltip-content";
 import TooltipTail from "./tooltip-tail";
@@ -124,8 +124,9 @@ const styles = StyleSheet.create({
     content: {
         maxWidth: 472,
         borderRadius: spacing.xxxSmall_4,
-        border: `solid 1px ${color.offBlack16}`,
-        backgroundColor: color.white,
+        border: `solid 1px ${semanticColor.border.primary}`,
+        backgroundColor: semanticColor.surface.primary,
+        // TODO(WB-1878): Use `elevation` token.
         boxShadow: `0 ${spacing.xSmall_8}px ${spacing.xSmall_8}px 0 ${color.offBlack8}`,
         justifyContent: "center",
     },

diff --git a/packages/wonder-blocks-tooltip/src/components/tooltip-tail.tsx b/packages/wonder-blocks-tooltip/src/components/tooltip-tail.tsx
@@ -182,6 +182,7 @@ export default class TooltipTail extends React.Component<Props> {
      */
     _maybeRenderDropshadow(points: [string, string, string]): React.ReactNode {
         const position = this._getFilterPositioning();
+
         if (!position) {
             return null;
         }