WB-1641.2: Move tokens.ts to wb-tokens package

.changeset/blue-vans-thank.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-theming": major
+---
+
+Move tokens export to wb-tokens

.changeset/perfect-meals-invent.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-tokens": minor
+---
+
+Move tokens from wb-theming to wb-tokens and split token categories into separate objects/files

.changeset/slimy-socks-hide.md

@@ -0,0 +1,11 @@
+---
+"@khanacademy/wonder-blocks-icon-button": patch
+"@khanacademy/wonder-blocks-accordion": patch
+"@khanacademy/wonder-blocks-dropdown": patch
+"@khanacademy/wonder-blocks-button": patch
+"@khanacademy/wonder-blocks-switch": patch
+"@khanacademy/wonder-blocks-modal": patch
+"@khanacademy/wonder-blocks-pill": patch
+---
+
+Replace theming.tokens with wb-tokens and update callsites to use the new export

.storybook/preview.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
 import wonderBlocksTheme from "./wonder-blocks-theme";
 import {configure} from "@storybook/testing-library";
 
-import {tokens} from "@khanacademy/wonder-blocks-theming";
+import {color} from "@khanacademy/wonder-blocks-tokens";
 import Link from "@khanacademy/wonder-blocks-link";
 import {ThemeSwitcherContext} from "@khanacademy/wonder-blocks-theming";
 import {RenderStateRoot} from "../packages/wonder-blocks-core/src";
@@ -55,15 +55,15 @@
         values: [
             {
                 name: "light",
-                value: tokens.color.white,
+                value: color.white,
             },
             {
                 name: "darkBlue",
-                value: tokens.color.darkBlue,
+                value: color.darkBlue,
             },
             {
                 name: "khanmigo",
-                value: tokens.color.eggplant,
+                value: color.eggplant,
             },
         ],
     },

__docs__/components/gallery/component-tile.tsx

@@ -5,7 +5,7 @@ import externalLinkIcon from "@phosphor-icons/core/bold/arrow-square-out-bold.sv
 import Clickable from "@khanacademy/wonder-blocks-clickable";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
-import {tokens} from "@khanacademy/wonder-blocks-theming";
+import * as tokens from "@khanacademy/wonder-blocks-tokens";
 import {Body, HeadingMedium} from "@khanacademy/wonder-blocks-typography";
 
 type Props = {

__docs__/components/gallery/sections/button-section.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import {StyleSheet} from "aphrodite";
 
 import Button from "@khanacademy/wonder-blocks-button";
-import {tokens} from "@khanacademy/wonder-blocks-theming";
+import {spacing} from "@khanacademy/wonder-blocks-tokens";
 import {HeadingLarge} from "@khanacademy/wonder-blocks-typography";
 
 import ComponentTile from "../component-tile";
@@ -43,6 +43,6 @@ export default function BannerSection() {
 
 const localStyles = StyleSheet.create({
     button: {
-        marginBottom: tokens.spacing.small_12,
+        marginBottom: spacing.small_12,
     },
 });

__docs__/components/gallery/sections/cell-section.tsx

@@ -4,7 +4,7 @@ import {StyleSheet} from "aphrodite";
 import {CompactCell, DetailCell} from "@khanacademy/wonder-blocks-cell";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
-import {tokens} from "@khanacademy/wonder-blocks-theming";
+import * as tokens from "@khanacademy/wonder-blocks-tokens";
 import {HeadingLarge} from "@khanacademy/wonder-blocks-typography";
 import {IconMappings} from "../../../wonder-blocks-icon/phosphor-icon.argtypes";
 

__docs__/components/gallery/sections/icon-section.tsx

@@ -5,7 +5,7 @@ import magnifyingGlass from "@phosphor-icons/core/regular/magnifying-glass.svg";
 import magnifyingGlassBold from "@phosphor-icons/core/bold/magnifying-glass-bold.svg";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
-import {tokens} from "@khanacademy/wonder-blocks-theming";
+import {spacing} from "@khanacademy/wonder-blocks-tokens";
 import {HeadingLarge} from "@khanacademy/wonder-blocks-typography";
 
 import ComponentTile from "../component-tile";
@@ -59,6 +59,6 @@ const localStyles = StyleSheet.create({
         alignItems: "end",
     },
     icon: {
-        marginRight: tokens.spacing.medium_16,
+        marginRight: spacing.medium_16,
     },
 });

__docs__/components/gallery/sections/pill-section.tsx

@@ -3,7 +3,7 @@ import {StyleSheet} from "aphrodite";
 
 import {View} from "@khanacademy/wonder-blocks-core";
 import Pill from "@khanacademy/wonder-blocks-pill";
-import {tokens} from "@khanacademy/wonder-blocks-theming";
+import {spacing} from "@khanacademy/wonder-blocks-tokens";
 import {HeadingLarge} from "@khanacademy/wonder-blocks-typography";
 
 import ComponentTile from "../component-tile";
@@ -66,7 +66,7 @@ const localStyles = StyleSheet.create({
         display: "grid",
         gridTemplateColumns: "repeat(2, 1fr)",
         gridTemplateRows: "repeat(2, 1fr)",
-        columnGap: tokens.spacing.large_24,
+        columnGap: spacing.large_24,
         width: "fit-content",
     },
 });

__docs__/components/gallery/styles.ts

@@ -1,6 +1,6 @@
 import {StyleSheet} from "aphrodite";
 
-import {tokens} from "@khanacademy/wonder-blocks-theming";
+import {spacing} from "@khanacademy/wonder-blocks-tokens";
 
 export const styles = StyleSheet.create({
     section: {
@@ -9,8 +9,8 @@ export const styles = StyleSheet.create({
         flexWrap: "wrap",
     },
     sectionLabel: {
-        marginTop: tokens.spacing.xLarge_32,
-        marginBottom: tokens.spacing.large_24,
+        marginTop: spacing.xLarge_32,
+        marginBottom: spacing.large_24,
     },
     centerContent: {
         width: "fit-content",

__docs__/wonder-blocks-accordion/accordion-section.stories.tsx

@@ -9,7 +9,7 @@ import {DetailCell} from "@khanacademy/wonder-blocks-cell";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
-import {tokens} from "@khanacademy/wonder-blocks-theming";
+import * as tokens from "@khanacademy/wonder-blocks-tokens";
 import {HeadingSmall, LabelLarge} from "@khanacademy/wonder-blocks-typography";
 
 import ComponentInfo from "../../.storybook/components/component-info";

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

@@ -9,7 +9,7 @@ import {
 import Button from "@khanacademy/wonder-blocks-button";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
-import {tokens} from "@khanacademy/wonder-blocks-theming";
+import * as tokens from "@khanacademy/wonder-blocks-tokens";
 import {LabelLarge} from "@khanacademy/wonder-blocks-typography";
 import {
     MultiSelect,

__docs__/wonder-blocks-icon-button/icon-button-variants.stories.tsx

@@ -6,7 +6,8 @@ import type {Meta, StoryObj} from "@storybook/react";
 import paperPlaneIcon from "@phosphor-icons/core/fill/paper-plane-tilt-fill.svg";
 import {View} from "@khanacademy/wonder-blocks-core";
 import Spacing from "@khanacademy/wonder-blocks-spacing";
-import {ThemeSwitcherContext, tokens} from "@khanacademy/wonder-blocks-theming";
+import {ThemeSwitcherContext} from "@khanacademy/wonder-blocks-theming";
+import * as tokens from "@khanacademy/wonder-blocks-tokens";
 import {HeadingLarge, LabelMedium} from "@khanacademy/wonder-blocks-typography";
 import IconButton from "@khanacademy/wonder-blocks-icon-button";
 

__docs__/wonder-blocks-icon-button/icon-button.stories.tsx

@@ -17,7 +17,7 @@ import {View} from "@khanacademy/wonder-blocks-core";
 import {LabelMedium} from "@khanacademy/wonder-blocks-typography";
 import Spacing from "@khanacademy/wonder-blocks-spacing";
 import IconButton from "@khanacademy/wonder-blocks-icon-button";
-import {tokens} from "@khanacademy/wonder-blocks-theming";
+import {color} from "@khanacademy/wonder-blocks-tokens";
 
 import ComponentInfo from "../../.storybook/components/component-info";
 import packageConfig from "../../packages/wonder-blocks-icon-button/package.json";
@@ -346,7 +346,7 @@ export const WithRouter: StoryComponentType = {
 
 const styles = StyleSheet.create({
     dark: {
-        backgroundColor: tokens.color.darkBlue,
+        backgroundColor: color.darkBlue,
         padding: Spacing.medium_16,
     },
     arrowsWrapper: {

__docs__/wonder-blocks-icon/phosphor-icon.argtypes.ts

@@ -48,7 +48,7 @@ import playCircle from "@phosphor-icons/core/regular/play-circle.svg";
 import playCircleBold from "@phosphor-icons/core/bold/play-circle-bold.svg";
 import gear from "@phosphor-icons/core/regular/gear.svg";
 
-import {tokens} from "@khanacademy/wonder-blocks-theming";
+import {color} from "@khanacademy/wonder-blocks-tokens";
 
 /**
  * Some pre-defined icon examples to use in our stories.
@@ -127,8 +127,8 @@ export default {
     color: {
         description:
             "The color of the icon. Will default to `currentColor`, which means that it will take on the CSS `color` value from the parent element.",
-        options: Object.keys(tokens.color),
-        mapping: tokens.color,
+        options: Object.keys(color),
+        mapping: color,
         control: {
             type: "select",
         },

__docs__/wonder-blocks-icon/phosphor-icon.stories.tsx

@@ -16,7 +16,7 @@ import {
     LabelMedium,
 } from "@khanacademy/wonder-blocks-typography";
 import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
-import {tokens} from "@khanacademy/wonder-blocks-theming";
+import * as tokens from "@khanacademy/wonder-blocks-tokens";
 
 import ComponentInfo from "../../.storybook/components/component-info";
 import packageConfig from "../../packages/wonder-blocks-icon/package.json";

__docs__/wonder-blocks-modal/modal-dialog.stories.tsx

@@ -8,7 +8,8 @@ import {View} from "@khanacademy/wonder-blocks-core";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
 import Spacing from "@khanacademy/wonder-blocks-spacing";
 import {Body, Title} from "@khanacademy/wonder-blocks-typography";
-import {ThemeSwitcherContext, tokens} from "@khanacademy/wonder-blocks-theming";
+import {ThemeSwitcherContext} from "@khanacademy/wonder-blocks-theming";
+import {spacing} from "@khanacademy/wonder-blocks-tokens";
 
 import {
     ModalLauncher,
@@ -279,7 +280,7 @@ export const WithDarkPanel: StoryComponentType = {
                                 />
                                 <View
                                     style={{
-                                        marginTop: tokens.spacing.medium_16,
+                                        marginTop: spacing.medium_16,
                                     }}
                                 >
                                     <Title id="modal-title-0">

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

@@ -7,7 +7,7 @@ import {View} from "@khanacademy/wonder-blocks-core";
 import Link from "@khanacademy/wonder-blocks-link";
 import Pill from "@khanacademy/wonder-blocks-pill";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
-import {tokens} from "@khanacademy/wonder-blocks-theming";
+import * as tokens from "@khanacademy/wonder-blocks-tokens";
 import {
     Body,
     BodySerif,

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

@@ -8,7 +8,8 @@ import magnifyingGlassIcon from "@phosphor-icons/core/bold/magnifying-glass-bold
 import Switch from "@khanacademy/wonder-blocks-switch";
 import {PropsFor, View} from "@khanacademy/wonder-blocks-core";
 import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
-import {ThemeSwitcherContext, tokens} from "@khanacademy/wonder-blocks-theming";
+import {ThemeSwitcherContext} from "@khanacademy/wonder-blocks-theming";
+import * as tokens from "@khanacademy/wonder-blocks-tokens";
 import {LabelMedium} from "@khanacademy/wonder-blocks-typography";
 
 import packageConfig from "../../packages/wonder-blocks-switch/package.json";

__docs__/wonder-blocks-theming/adding-a-theme.mdx

@@ -21,7 +21,7 @@ component folder (under `themes`).
 
 ```ts
 // e.g. wonder-blocks-button/src/themes/default.js
-import {tokens} from "@khanacademy/wonder-blocks-theming";
+import * as tokens from "@khanacademy/wonder-blocks-tokens";
 
 export default {
     color: {

__docs__/wonder-blocks-theming/merge-theme.mdx

@@ -1,7 +1,8 @@
 import {Meta, Canvas} from "@storybook/blocks";
 
 import Banner from "@khanacademy/wonder-blocks-banner";
-import {tokens, mergeTheme} from "@khanacademy/wonder-blocks-theming";
+import {mergeTheme} from "@khanacademy/wonder-blocks-theming";
+import * as tokens from "@khanacademy/wonder-blocks-tokens";
 
 import {ButtonWithCustomTheme} from "./theme-examples";
 

__docs__/wonder-blocks-theming/theme-examples.tsx

@@ -6,7 +6,6 @@ import {View} from "@khanacademy/wonder-blocks-core";
 import {
     createThemeContext,
     mergeTheme,
-    tokens,
     useScopedTheme,
     useStyles,
     ThemedStylesFn,
@@ -15,6 +14,7 @@ import {
     WithThemeProps,
     SupportedThemes,
 } from "@khanacademy/wonder-blocks-theming";
+import * as tokens from "@khanacademy/wonder-blocks-tokens";
 
 const defaultTheme = {
     color: {

__docs__/wonder-blocks-theming/use-scoped-theme.mdx

@@ -1,6 +1,7 @@
 import {Meta, Canvas} from "@storybook/blocks";
 
-import {tokens, useScopedTheme} from "@khanacademy/wonder-blocks-theming";
+import {useScopedTheme} from "@khanacademy/wonder-blocks-theming";
+import * as tokens from "@khanacademy/wonder-blocks-tokens";
 
 import {ViewWithTheme} from "./theme-examples";
 
@@ -31,9 +32,9 @@ The `useScopedTheme` hook returns a `ScopedTheme` object with the following prop
 ```tsx
 import {
     createThemeContext,
-    tokens,
     useScopedTheme,
 } from "@khanacademy/wonder-blocks-theming";
+import * as tokens from "@khanacademy/wonder-blocks-tokens";
 
 // 👉 1. Define the theme.
 const defaultTheme = {

__docs__/wonder-blocks-theming/use-styles.mdx

@@ -1,10 +1,10 @@
 import {Meta, Canvas} from "@storybook/blocks";
 
 import {
-    tokens,
     useScopedTheme,
     useStyles,
 } from "@khanacademy/wonder-blocks-theming";
+import * as tokens from "@khanacademy/wonder-blocks-tokens";
 
 import {UseStylesExample} from "./theme-examples";
 
@@ -30,8 +30,8 @@ import {
   createThemeContext
   useScopedTheme,
   useStyles,
-  tokens,
 } from "@khanacademy/wonder-blocks-theming";
+import * as tokens from "@khanacademy/wonder-blocks-tokens";
 
 // 👉 1. Define the theme.
 const defaultTheme = {

__docs__/wonder-blocks-theming/with-scoped-theme.mdx

@@ -1,6 +1,7 @@
 import {Meta, Canvas} from "@storybook/blocks";
 
-import {tokens, useScopedTheme} from "@khanacademy/wonder-blocks-theming";
+import {useScopedTheme} from "@khanacademy/wonder-blocks-theming";
+import * as tokens from "@khanacademy/wonder-blocks-tokens";
 
 import {WithScopedThemeExample} from "./theme-examples";
 
@@ -26,7 +27,8 @@ function withScopedTheme<T>(
 
 ```tsx
 import {StyleSheet} from "aphrodite";
-import {withScopedTheme, ThemedStylesFn, tokens} from "@khanacademy/wonder-blocks-theming";
+import {withScopedTheme, ThemedStylesFn} from "@khanacademy/wonder-blocks-theming";
+import * as tokens from "@khanacademy/wonder-blocks-tokens";
 
 // 👉 1. Define the theme.
 const defaultTheme = {

__docs__/wonder-blocks-tokens/__overview__.mdx

@@ -0,0 +1,26 @@
+import {Meta, Source} from "@storybook/blocks";
+
+import TokenTable from "../../.storybook/components/token-table";
+
+import Banner from "@khanacademy/wonder-blocks-banner";
+import {View} from "@khanacademy/wonder-blocks-core";
+import * as tokens from "@khanacademy/wonder-blocks-tokens";
+
+<Meta title="Tokens" />
+
+# Wonder Blocks Tokens
+
+Wonder Blocks uses a set of tokens to define the look and feel of our
+components. These tokens are defined in the `@khanacademy/wonder-blocks-tokens`
+package.
+
+Design tokens are a set of key-value pairs that define the visual and behavioral
+design attributes of our components. They are the primitives that define the
+building blocks of our design system.
+
+These represent the design decisions at Khan Academy, such as:
+
+-  <a href="../?path=/docs/tokens-border--docs">Border</a>
+-  <a href="../?path=/docs/tokens-color--docs">Color</a>
+-  <a href="../?path=/docs/tokens-spacing--docs">Spacing</a>
+-  <a href="../?path=/docs/tokens-typography--docs">Typography</a>