WB-1732: Add semantic colors as tokens (#2291)

## Summary:

Added a new `semanticColor` export in `wonder-blocks-tokens` that includes all
the semantic colors as tokens. This will allow us to use these colors in our
components and themes.

Added documentation for the new tokens in the foundations section of the
Wonder Blocks documentation, and also a new section in the tokens section of
the `wonder-blocks-tokens` documentation.

Issue: https://khanacademy.atlassian.net/browse/WB-1732

## Test plan:

Navigate to the following pages and verify that the docs are informative and
correct:

- /?path=/docs/foundations-using-color--docs
- /?path=/docs/wonder-blocks-tokens-tokens-semantic-color--docs

<img width="901" alt="Screenshot 2024-08-15 at 5 25 51 PM" src="https://github.com/user-attachments/assets/1f53a786-ae4a-433a-8d03-93ed6fa28e3c">

<img width="741" alt="Screenshot 2024-08-15 at 5 25 59 PM" src="https://github.com/user-attachments/assets/d0d3fb9c-f79c-4078-a1d1-d90c970d7536">

Author: jandrade

Reviewers: jandrade, beaesguerra

Required Reviewers:

Approved By: beaesguerra, beaesguerra

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

Pull Request URL: #2291

.changeset/green-emus-fold.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-tokens": major
+---
+
+Add semanticColor tokens, remove deprecated Brand color primitives

.storybook/preview.tsx

@@ -77,7 +77,13 @@ const parameters = {
         },
     },
     docs: {
-        toc: true,
+        toc: {
+            // Useful for MDX pages like "Using color".
+            headingSelector: "h2, h3",
+            // Prevents including generic headings like "Stories" and "Usage".
+            ignoreSelector:
+                ".docs-story h2, .docs-story h3, .sbdocs #stories, .sbdocs #usage, .sbdocs-subtitle",
+        },
         theme: wonderBlocksTheme,
         components: {
             // Override the default link component to use the WB Link component.

__docs__/components/color.tsx

@@ -0,0 +1,140 @@
+import * as React from "react";
+import {StyleSheet} from "aphrodite";
+
+import {StyleType, View} from "@khanacademy/wonder-blocks-core";
+import {
+    Caption,
+    Footnote,
+    LabelLarge,
+    LabelSmall,
+} from "@khanacademy/wonder-blocks-typography";
+import {
+    border,
+    color,
+    font,
+    semanticColor,
+    spacing,
+} from "@khanacademy/wonder-blocks-tokens";
+import {getTokenName} from "./tokens-util";
+
+type Props = {
+    /**
+     * A dictionary of colors to display.
+     */
+    colors: Record<string, string>;
+    /**
+     * The type of color group to display.
+     */
+    variant: "primitive" | "semantic";
+    /**
+     * The group name to use as a prefix for the color names.
+     */
+    group: string;
+    /**
+     * Custom styles for the component.
+     */
+    style?: StyleType;
+};
+
+export function ColorGroup({
+    colors,
+    group,
+    style,
+    variant = "semantic",
+}: Props) {
+    return (
+        <View style={[styles.group, style]}>
+            {Object.entries(colors).map(([name, value]) => (
+                <Color
+                    key={name}
+                    name={group + "." + name}
+                    value={value}
+                    variant={variant}
+                />
+            ))}
+        </View>
+    );
+}
+
+type ColorProps = {
+    name: string;
+    value: string;
+    variant: "primitive" | "semantic";
+};
+
+function Color({name, value, variant}: ColorProps) {
+    const TypographyComponent =
+        variant === "semantic" ? LabelLarge : LabelSmall;
+
+    return (
+        <View style={styles.item}>
+            <View
+                style={[
+                    styles.thumbnail,
+                    styles[variant + "Thumbnail"],
+                    styles.pattern,
+                ]}
+            >
+                <View
+                    style={{
+                        backgroundColor: value,
+                        boxShadow: `inset 0 0 1px 0 ${semanticColor.border.primary}`,
+                        // Expand to fill the parent container
+                        alignSelf: "stretch",
+                        flex: 1,
+                    }}
+                />
+            </View>
+            <View>
+                <TypographyComponent style={{fontWeight: font.weight.bold}}>
+                    {name}
+                </TypographyComponent>
+                {variant === "semantic" ? (
+                    <>
+                        <Caption>
+                            Primitive: <em>{getTokenName(color, value)}</em>
+                        </Caption>
+                        <LabelSmall>
+                            Value:{" "}
+                            <Footnote style={styles.code}>{value}</Footnote>
+                        </LabelSmall>
+                    </>
+                ) : (
+                    <Footnote style={styles.code}>{value}</Footnote>
+                )}
+            </View>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    group: {
+        flexDirection: "row",
+        flexWrap: "wrap",
+        marginBlock: spacing.large_24,
+    },
+    item: {
+        marginBlockEnd: spacing.medium_16,
+    },
+    pattern: {
+        backgroundImage: `radial-gradient(${color.blue} 0.5px, ${color.offWhite} 0.5px)`,
+        backgroundSize: `${spacing.small_12}px ${spacing.small_12}px`,
+    },
+    thumbnail: {
+        width: 200,
+        height: 160,
+    },
+    primitiveThumbnail: {
+        width: 160,
+        height: spacing.xxxLarge_64,
+    },
+    code: {
+        alignSelf: "flex-start",
+        color: semanticColor.text.primary,
+        display: "inline-flex",
+        backgroundColor: semanticColor.surface.secondary,
+        border: `1px solid ${color.offBlack16}`,
+        padding: spacing.xxxxSmall_2,
+        borderRadius: border.radius.medium_4,
+    },
+});