[WB-1814.8] Refactor Popover, Tooltip, Toolbar to use semantic colors (#2470)

## Summary:

Next step is to refactor the `Popover`, `Tooltip` and `Toolbar` packages to use
semantic colors.

### Implementation plan:

1. #2439
2. #2440
3. #2441
4. #2446
5. #2449
6. #2464
7. #2468
8. Popover, Tooltip, Toolbar (current PR)
9. Dropdown
10. Clickable, Pill


Issue: WB-1814

## Test plan:

Verify that the Modal Chromatic snapshots are mostly unchanged.

Author: jandrade

Reviewers: beaesguerra

Required Reviewers:

Approved By: beaesguerra

Checks: ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 20.x), ✅ Test / Test (ubuntu-latest, 20.x, 2/2), ✅ Test / Test (ubuntu-latest, 20.x, 1/2), ✅ Lint / Lint (ubuntu-latest, 20.x), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Chromatic - Build and test on regular PRs / chromatic (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ⏭️  Chromatic - Skip on Release PR (changesets), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ✅ gerald, ⏭️  dependabot

Pull Request URL: #2470

Author: jandrade

.changeset/curly-countries-protect.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-popover": patch
+---
+
+Migrate to semanticColor tokens

.changeset/eighty-grapes-mate.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-toolbar": patch
+---
+
+Migrate to semanticColor tokens

.changeset/mean-badgers-sit.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-tooltip": patch
+---
+
+Migrate to semanticColor tokens

__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 {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,
@@ -132,7 +132,7 @@ const CustomPopoverContent = (
                     <>
                         <PhosphorIcon
                             icon={IconMappings.pencilSimple}
-                            color={color.gold}
+                            color={semanticColor.status.warning.foreground}
                             size="large"
                         />
                         <LabelLarge>Option 1</LabelLarge>
@@ -144,7 +144,7 @@ const CustomPopoverContent = (
                     <>
                         <PhosphorIcon
                             icon={IconMappings.pencilSimple}
-                            color={color.green}
+                            color={semanticColor.status.success.foreground}
                             size="large"
                         />
                         <LabelLarge>Option 2</LabelLarge>
@@ -156,7 +156,7 @@ const CustomPopoverContent = (
                     <>
                         <PhosphorIcon
                             icon={IconMappings.pencilSimple}
-                            color={color.blue}
+                            color={semanticColor.status.notice.foreground}
                             size="large"
                         />
                         <LabelLarge>Option 3</LabelLarge>

__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",

__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.`}
@@ -337,25 +337,6 @@ WithStyle.parameters = {
     },
 };
 
-WithStyle.play = async ({canvasElement}) => {
-    const canvas = within(canvasElement.ownerDocument.body);
-
-    // Get HTML elements
-    const tooltipContent = await canvas.findByTestId("test-tooltip-content");
-    const innerTooltipView =
-        // eslint-disable-next-line testing-library/no-node-access
-        (await canvas.findByRole("tooltip")).firstChild;
-
-    // Assert
-    await expect(innerTooltipView).toHaveStyle(
-        "background-color: rgb(11, 33, 73)",
-    );
-    await expect(tooltipContent).toHaveStyle({
-        padding: "32px",
-        color: "#fff",
-    });
-};
-
 /**
  * Tooltip by default (and for performance reasons) only updates its position
  * under the following conditions:
@@ -474,7 +455,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 +487,12 @@ export const InTopCorner = {
                     icon={info}
                     size="small"
                     aria-hidden
-                    style={{":hover": {backgroundColor: color.red}}}
+                    style={{
+                        ":hover": {
+                            backgroundColor:
+                                semanticColor.status.critical.foreground,
+                        },
+                    }}
                 />
             </Tooltip>
         </View>

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,
     },
 
     /**

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,

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",
     },

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;
         }