[WB-1814.9] Refactor Clickable and Pill to use semantic colors (#2472)

## Summary:

- Migrate Clickable and Pill to use semantic colors
- Add `All Variants` story to Pill

### Implementation plan:

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

Issue: WB-1814

## Test plan:

Navigate to the `Clickable` and `Pill` stories in Storybook and verify that the
colors are correct.

Author: jandrade

Reviewers: jandrade, 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), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ⏭️  Chromatic - Skip on Release PR (changesets), ✅ gerald, ⏭️  dependabot

Pull Request URL: #2472

Author: jandrade

.changeset/friendly-weeks-drum.md

@@ -0,0 +1,7 @@
+---
+"@khanacademy/wonder-blocks-pill": patch
+---
+
+- Migrate to `semanticColor`.
+- Update background from 16% to 8%.
+- Update focus outline to always be `blue` (using global focus color).

.changeset/shaggy-windows-rescue.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-clickable": patch
+---
+
+Migrate Clickable to `semanticColor`

__docs__/wonder-blocks-clickable/accessibility.stories.tsx

@@ -4,51 +4,51 @@ import {StyleSheet} from "aphrodite";
 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} from "@khanacademy/wonder-blocks-typography";
 
 import {IconMappings} from "../wonder-blocks-icon/phosphor-icon.argtypes";
 
+const actionCategory = semanticColor.action.outlined.progressive;
+
 const styles = StyleSheet.create({
-    resting: {
-        boxShadow: `inset 0px 0px 1px 1px ${color.purple}`,
+    rest: {
+        border: `1px solid ${actionCategory.default.border}`,
         padding: spacing.xSmall_8,
     },
-    hovered: {
+    hover: {
         textDecoration: "underline",
-        backgroundColor: color.blue,
-        color: color.white,
+        borderColor: actionCategory.hover.border,
+        backgroundColor: actionCategory.hover.background,
+        color: actionCategory.hover.foreground,
     },
-    pressed: {
-        color: color.darkBlue,
+    press: {
+        background: actionCategory.press.background,
+        borderColor: actionCategory.press.border,
+        color: actionCategory.press.foreground,
     },
-    focused: {
-        outline: `solid 4px ${color.purple}`,
+    focus: {
+        outline: `solid 1px ${semanticColor.border.focus}`,
+        outlineOffset: spacing.xxxxSmall_2,
     },
     panel: {
         padding: spacing.medium_16,
-        boxShadow: `inset 0px 0px 0 1px ${color.offBlack8}`,
+        // TODO(WB-1878): Use elevation token.
+        boxShadow: `0 ${spacing.xSmall_8}px ${spacing.xSmall_8}px 0 ${color.offBlack8}`,
     },
 });
 
 export default {
     title: "Packages / Clickable / Clickable / Accessibility",
     component: Clickable,
-
-    // Disables chromatic testing for these stories.
     parameters: {
-        previewTabs: {
-            canvas: {
-                hidden: true,
-            },
-        },
-
-        viewMode: "docs",
-
+        // Disables chromatic testing for these stories.
         chromatic: {
             disableSnapshot: true,
         },
     },
+    // Include these stories in the Docs tab, but hide them from the sidebar.
+    tags: ["autodocs", "!dev"],
 };
 
 export const Labeling = {
@@ -58,9 +58,7 @@ export const Labeling = {
                 onClick={() => {}}
                 aria-label="More information about this subject"
             >
-                {({hovered, focused, pressed}) => (
-                    <PhosphorIcon icon={IconMappings.info} />
-                )}
+                {() => <PhosphorIcon icon={IconMappings.info} />}
             </Clickable>
         </View>
     ),
@@ -73,9 +71,7 @@ export const DisabledState = {
             onClick={(e) => console.log("Hello, world!")}
             disabled={true}
         >
-            {({hovered, focused, pressed}) =>
-                "This is a disabled clickable element"
-            }
+            {() => "This is a disabled clickable element"}
         </Clickable>
     ),
 
@@ -89,10 +85,10 @@ export const KeyboardNavigation = {
                 {({hovered, focused, pressed}) => (
                     <View
                         style={[
-                            styles.resting,
-                            hovered && styles.hovered,
-                            focused && styles.focused,
-                            pressed && styles.pressed,
+                            styles.rest,
+                            hovered && styles.hover,
+                            focused && styles.focus,
+                            pressed && styles.press,
                         ]}
                     >
                         <Body>Open School Info</Body>

__docs__/wonder-blocks-clickable/clickable-behavior.stories.tsx

@@ -3,7 +3,7 @@ import {StyleSheet} from "aphrodite";
 import type {Meta, StoryObj} from "@storybook/react";
 
 import {View, addStyle} from "@khanacademy/wonder-blocks-core";
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 
 import {getClickableBehavior} from "@khanacademy/wonder-blocks-clickable";
 import packageConfig from "../../packages/wonder-blocks-clickable/package.json";
@@ -52,9 +52,9 @@ export const Default: StoryComponentType = (args: any) => {
                     <View
                         style={[
                             styles.clickable,
-                            hovered && styles.hovered,
-                            focused && styles.focused,
-                            pressed && styles.pressed,
+                            hovered && styles.hover,
+                            focused && styles.focus,
+                            pressed && styles.press,
                         ]}
                         {...childrenProps}
                     >
@@ -92,9 +92,9 @@ export const WrappingButton: StoryComponentType = (args: any) => {
                         style={[
                             styles.clickable,
                             styles.newButton,
-                            hovered && styles.hovered,
-                            focused && styles.focused,
-                            pressed && styles.pressed,
+                            hovered && styles.hover,
+                            focused && styles.focus,
+                            pressed && styles.press,
                         ]}
                         {...childrenProps}
                     >
@@ -125,9 +125,9 @@ export const WithTabIndex: StoryComponentType = () => {
                     <View
                         style={[
                             styles.clickable,
-                            hovered && styles.hovered,
-                            focused && styles.focused,
-                            pressed && styles.pressed,
+                            hovered && styles.hover,
+                            focused && styles.focus,
+                            pressed && styles.press,
                         ]}
                         {...childrenProps}
                     >
@@ -156,6 +156,8 @@ WithTabIndex.parameters = {
     },
 };
 
+const actionCategory = semanticColor.action.outlined.progressive;
+
 const styles = StyleSheet.create({
     clickable: {
         cursor: "pointer",
@@ -164,18 +166,19 @@ const styles = StyleSheet.create({
     },
     newButton: {
         border: "none",
-        backgroundColor: color.white,
+        backgroundColor: actionCategory.default.background,
         width: "100%",
     },
-    hovered: {
+    hover: {
         textDecoration: "underline",
-        backgroundColor: color.blue,
-        color: color.white,
+        backgroundColor: actionCategory.hover.background,
+        color: actionCategory.hover.foreground,
     },
-    pressed: {
-        backgroundColor: color.darkBlue,
+    press: {
+        backgroundColor: actionCategory.press.background,
     },
-    focused: {
-        outline: `solid 4px ${color.purple}`,
+    focus: {
+        outline: `solid 1px ${semanticColor.border.focus}`,
+        outlineOffset: spacing.xxxxSmall_2,
     },
 });

__docs__/wonder-blocks-clickable/clickable.stories.tsx

@@ -4,7 +4,7 @@ import {MemoryRouter, Route, Switch} from "react-router-dom";
 import type {Meta, StoryObj} from "@storybook/react";
 
 import {View} from "@khanacademy/wonder-blocks-core";
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {Body, LabelLarge} from "@khanacademy/wonder-blocks-typography";
 
 import Clickable from "@khanacademy/wonder-blocks-clickable";
@@ -305,28 +305,30 @@ Ref.parameters = {
     },
 };
 
+const progressive = semanticColor.action.outlined.progressive;
+
 const styles = StyleSheet.create({
     clickable: {
         borderWidth: 1,
         padding: spacing.medium_16,
     },
     hovered: {
         textDecoration: "underline",
-        backgroundColor: color.teal,
+        backgroundColor: progressive.hover.background,
     },
     pressed: {
-        color: color.blue,
+        color: progressive.press.foreground,
     },
     focused: {
-        outline: `solid 4px ${color.purple}`,
+        outline: `solid 4px ${semanticColor.border.focus}`,
     },
     centerText: {
         gap: spacing.medium_16,
         textAlign: "center",
     },
     dark: {
-        backgroundColor: color.darkBlue,
-        color: color.white,
+        backgroundColor: semanticColor.surface.inverse,
+        color: semanticColor.text.inverse,
         padding: spacing.xSmall_8,
     },
     row: {
@@ -337,13 +339,13 @@ const styles = StyleSheet.create({
         marginRight: spacing.large_24,
     },
     navigation: {
-        border: `1px dashed ${color.purple}`,
+        border: `1px dashed ${semanticColor.border.primary}`,
         marginTop: spacing.large_24,
         padding: spacing.large_24,
     },
     disabled: {
-        color: color.white,
-        backgroundColor: color.offBlack64,
+        color: semanticColor.text.inverse,
+        backgroundColor: semanticColor.surface.overlay,
     },
     button: {
         maxWidth: 150,

__docs__/wonder-blocks-pill/pill-variants.stories.tsx

@@ -0,0 +1,95 @@
+import type {Meta, StoryObj} from "@storybook/react";
+import * as React from "react";
+
+import {StyleSheet} from "aphrodite";
+
+import {View} from "@khanacademy/wonder-blocks-core";
+import Pill from "@khanacademy/wonder-blocks-pill";
+import {spacing} from "@khanacademy/wonder-blocks-tokens";
+import {AllVariants} from "../components/all-variants";
+import {PillKind} from "../../packages/wonder-blocks-pill/src/components/pill";
+
+const rows = [
+    {name: "Static", props: {}},
+    {name: "Clickable", props: {onClick: () => {}}},
+];
+
+const columns = [
+    {
+        name: "Small",
+        props: {size: "small"},
+    },
+    {
+        name: "Medium",
+        props: {size: "medium"},
+    },
+    {
+        name: "Large",
+        props: {size: "large"},
+    },
+];
+
+type Story = StoryObj<typeof Pill>;
+
+const kinds: Array<PillKind> = [
+    "transparent",
+    "neutral",
+    "accent",
+    "info",
+    "success",
+    "warning",
+    "critical",
+];
+
+/**
+ * The following stories are used to generate the pseudo states for the Switch
+ * component. This is only used for visual testing in Chromatic.
+ */
+const meta = {
+    title: "Packages / Pill / Pill - All Variants",
+    component: Pill,
+    render: (args) => (
+        <AllVariants rows={rows} columns={columns}>
+            {(props) => (
+                <View style={styles.container}>
+                    {kinds.map((kind) => (
+                        <Pill {...args} {...props} kind={kind}>
+                            {kind}, {props.size}
+                        </Pill>
+                    ))}
+                </View>
+            )}
+        </AllVariants>
+    ),
+    args: {
+        children: "This is some text!",
+    },
+    tags: ["!autodocs"],
+} satisfies Meta<typeof Pill>;
+
+export default meta;
+
+export const Default: Story = {};
+
+export const Hover: Story = {
+    parameters: {pseudo: {hover: true}},
+};
+
+export const Focus: Story = {
+    parameters: {pseudo: {focusVisible: true}},
+};
+
+export const HoverFocus: Story = {
+    name: "Hover + Focus",
+    parameters: {pseudo: {hover: true, focusVisible: true}},
+};
+
+export const Active: Story = {
+    parameters: {pseudo: {hover: true, active: true}},
+};
+
+const styles = StyleSheet.create({
+    container: {
+        gap: spacing.medium_16,
+    },
+});