[WB-1896] Add ThunderBlocks theme

.changeset/gold-peaches-guess.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-form": patch
+---
+
+TextField: Fix outline-width on focus

.changeset/heavy-islands-tan.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-pill": patch
+---
+
+Use color-mix() for active background colors

.changeset/nice-dancers-fail.md

@@ -0,0 +1,6 @@
+---
+"@khanacademy/wonder-blocks-theming": minor
+"@khanacademy/wonder-blocks-tokens": minor
+---
+
+Add thunderblocks theming support

.changeset/silver-pumas-marry.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-tokens": major
+---
+
+Replaces `semanticColor` values with references to css variables. Creates a build step to convert semanticColor tokens to css variables that can be consumed via CSS imports.

.changeset/tidy-humans-fail.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-theming": minor
+---
+
+Add ThemeSwitcher component to change themes using CSS variables

.storybook/preview.tsx

@@ -1,11 +1,22 @@
 import * as React from "react";
+import {Preview} from "@storybook/react";
+import {DocsContainer} from "@storybook/blocks";
+
 import wonderBlocksTheme from "./wonder-blocks-theme";
 import {Decorator} from "@storybook/react";
 import {semanticColor} from "@khanacademy/wonder-blocks-tokens";
 import Link from "@khanacademy/wonder-blocks-link";
-import {ThemeSwitcherContext} from "@khanacademy/wonder-blocks-theming";
+import {
+    ThemeSwitcherContext,
+    ThemeSwitcher,
+} from "@khanacademy/wonder-blocks-theming";
 import {RenderStateRoot} from "../packages/wonder-blocks-core/src";
-import {Preview} from "@storybook/react";
+
+// Import the Wonder Blocks CSS variables
+// NOTE: External consumers should import the CSS variables from the
+// wonder-blocks-tokens package directly.
+// e.g. import "@khanacademy/wonder-blocks-tokens/styles.css";
+import "../node_modules/@khanacademy/wonder-blocks-tokens/dist/css/index.css";
 
 /**
  * WB Official breakpoints
@@ -77,6 +88,16 @@ const parameters = {
         },
     },
     docs: {
+        // Customize the DocsContainer to use the WB theme in MDX pages.
+        container: (props) => {
+            const theme = props.context.store.userGlobals.globals.theme;
+
+            return (
+                <ThemeSwitcher theme={theme}>
+                    <DocsContainer {...props}>{props.children}</DocsContainer>
+                </ThemeSwitcher>
+            );
+        },
         toc: {
             // Useful for MDX pages like "Using color".
             headingSelector: "h2, h3",
@@ -103,14 +124,18 @@ const withThemeSwitcher: Decorator = (
         return (
             <RenderStateRoot>
                 <ThemeSwitcherContext.Provider value={theme}>
-                    <Story />
+                    <ThemeSwitcher theme={theme}>
+                        <Story />
+                    </ThemeSwitcher>
                 </ThemeSwitcherContext.Provider>
             </RenderStateRoot>
         );
     }
     return (
         <ThemeSwitcherContext.Provider value={theme}>
-            <Story />
+            <ThemeSwitcher theme={theme}>
+                <Story />
+            </ThemeSwitcher>
         </ThemeSwitcherContext.Provider>
     );
 };
@@ -135,9 +160,14 @@ const preview: Preview = {
                     },
                     {
                         value: "khanmigo",
-                        icon: "circle",
+                        icon: "comment",
                         title: "Khanmigo",
                     },
+                    {
+                        value: "thunderblocks",
+                        icon: "lightning",
+                        title: "Thunder Blocks (Classroom)",
+                    },
                 ],
                 // Change title based on selected value
                 dynamicTitle: true,

package.json

@@ -9,7 +9,8 @@
   },
   "scripts": {
     "alex": "alex packages/",
-    "build": "rollup -c ./build-settings/rollup.config.mjs",
+    "dev": "pnpm -r dev",
+    "build": "rollup -c ./build-settings/rollup.config.mjs && pnpm -r build",
     "build:types": "pnpm tsc --build tsconfig-build.json && ./build-settings/check-type-definitions.ts",
     "build:storybook": "storybook build --stats-json",
     "clean": "rm -rf packages/wonder-blocks-*/dist && rm -rf packages/wonder-blocks-*/node_modules && rm -f packages/*/*.tsbuildinfo && rm -f utils/tsconfig.tsbuildinfo",
@@ -26,7 +27,7 @@
     "publish:check": "pnpm run lint:pkg-json && ./utils/publish/pre-publish-check-ci.ts",
     "publish:ci": "pnpm run publish:check && git diff --stat --exit-code HEAD && pnpm build && pnpm build:types && pnpm changeset publish",
     "start": "pnpm start:storybook",
-    "start:storybook": "storybook dev -p 6061",
+    "start:storybook": "pnpm dev & storybook dev -p 6061",
     "test:common": "pnpm run build && pnpm run lint && pnpm run typecheck && pnpm run alex",
     "test:coverage": "pnpm run test:common && pnpm run jest --coverage",
     "test:storybook": "vitest --project=storybook",
@@ -52,12 +53,16 @@
     "@khanacademy/eslint-config": "^5.2.0",
     "@khanacademy/eslint-plugin": "^3.1.1",
     "@khanacademy/wonder-stuff-testing": "^3.0.5",
+    "@khanacademy/wonder-blocks-link": "workspace:*",
+    "@khanacademy/wonder-blocks-tokens": "workspace:*",
+    "@khanacademy/wonder-blocks-theming": "workspace:*",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-node-resolve": "^16.0.0",
     "@storybook/addon-a11y": "^8.5.2",
     "@storybook/addon-actions": "^8.5.2",
     "@storybook/addon-docs": "^8.5.2",
     "@storybook/addon-essentials": "^8.5.2",
+    "@storybook/blocks": "^8.5.2",
     "@storybook/builder-vite": "^8.5.2",
     "@storybook/experimental-addon-test": "^8.5.2",
     "@storybook/preview-api": "^8.5.2",

packages/wonder-blocks-pill/src/components/pill.tsx

@@ -3,7 +3,6 @@ import {StyleSheet} from "aphrodite";
 import type {StyleDeclaration} from "aphrodite";
 
 import Clickable from "@khanacademy/wonder-blocks-clickable";
-import {mix} from "@khanacademy/wonder-blocks-tokens";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {
     Body,
@@ -243,10 +242,12 @@ const _generateColorStyles = (clickable: boolean, kind: PillKind) => {
     }
 
     const pressColor =
-        kind === "transparent"
-            ? semanticColor.status.neutral.background
-            : // NOTE(WB-1880): This will be simplified once we split this into Badge and Pill.
-              mix(tokens.color.offBlack32, backgroundColor);
+        kind === "transparent" || kind === "neutral"
+            ? tokens.color.offBlack16
+            : kind === "accent"
+              ? tokens.color.activeBlue
+              : // NOTE(WB-1880): This will be simplified once we split this into Badge and Pill.
+                `color-mix(in srgb, ${tokens.color.offBlack32}, ${backgroundColor})`;
 
     const textColor =
         kind === "accent"

packages/wonder-blocks-theming/src/components/theme-switcher.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+
+import {SupportedThemes} from "../types";
+
+type Props = {
+    /**
+     * The theme to use.
+     */
+    theme: SupportedThemes;
+    /**
+     * The children where the theme will be applied.
+     */
+    children: React.ReactNode;
+};
+
+/**
+ * ThemeSwitcher is a component that allows users to switch between themes.
+ */
+export function ThemeSwitcher({theme, children}: Props) {
+    // If no theme is provided, return the children as is
+    if (!theme) {
+        return children;
+    }
+
+    // Attach the CSS variables to a local scope so that they only work within
+    // this component
+    return <div className={`wb-theme-${theme}`}>{children}</div>;
+}

packages/wonder-blocks-theming/src/index.ts

@@ -10,3 +10,4 @@ export {
 export {type ThemedStylesFn, type SupportedThemes, type Themes} from "./types";
 export {default as useStyles} from "./hooks/use-styles";
 export {ThemeSwitcherContext} from "./utils/theme-switcher-context";
+export {ThemeSwitcher} from "./components/theme-switcher";

packages/wonder-blocks-theming/src/types.ts

@@ -2,5 +2,5 @@ import {StyleDeclaration} from "aphrodite";
 
 export type ThemedStylesFn<T extends object> = (theme: T) => StyleDeclaration;
 
-export type SupportedThemes = "default" | "khanmigo" | "dark";
+export type SupportedThemes = "default" | "khanmigo" | "dark" | "thunderblocks";
 export type Themes<T extends object> = Partial<Record<SupportedThemes, T>>;

packages/wonder-blocks-theming/src/utils/__tests__/merge-theme.test.ts

@@ -1,4 +1,3 @@
-import * as tokens from "@khanacademy/wonder-blocks-tokens";
 import {mergeTheme} from "../merge-theme";
 
 describe("mergeTheme", () => {
@@ -69,7 +68,16 @@ describe("mergeTheme", () => {
 
     it("should override the global tokens", () => {
         // Arrange
-        const themeDefault = tokens;
+        const themeDefault = {
+            color: {
+                blue: "#0000f0",
+                green: "#00ff00",
+            },
+            spacing: {
+                medium: 8,
+                large: 16,
+            },
+        };
 
         // Only override the blue color
         const themeOverride = {

packages/wonder-blocks-theming/tsconfig-build.json

@@ -7,6 +7,5 @@
     },
     "references": [
         {"path": "../wonder-blocks-core/tsconfig-build.json"},
-        {"path": "../wonder-blocks-tokens/tsconfig-build.json"},
     ]
 }

packages/wonder-blocks-tokens/package.json

@@ -2,10 +2,19 @@
   "name": "@khanacademy/wonder-blocks-tokens",
   "version": "5.1.0",
   "description": "Core primitive design tokens for Web Wonder Blocks",
+  "exports": {
+    ".": {
+      "import": "./dist/es/index.js",
+      "require": "./dist/index.js"
+    },
+    "./styles.css": "./dist/css/index.css"
+  },
   "main": "dist/index.js",
   "module": "dist/es/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
+    "build": "node -r @swc-node/register ./src/build/generate-css-variables.ts",
+    "dev": "node --watch -r @swc-node/register ./src/build/generate-css-variables.ts",
     "test": "echo \"Error: no test specified\" && exit 1",
     "prepublishOnly": "../../utils/publish/package-pre-publish-check.sh"
   },
@@ -14,7 +23,9 @@
   "publishConfig": {
     "access": "public"
   },
-  "dependencies": {},
+  "dependencies": {
+    "@khanacademy/wonder-blocks-theming": "workspace:*"
+  },
   "devDependencies": {
     "@khanacademy/wb-dev-build-settings": "workspace:*"
   }

packages/wonder-blocks-tokens/src/build/generate-css-variables.ts

@@ -0,0 +1,70 @@
+#!/usr/bin/env -S node -r @swc-node/register
+import fs from "fs";
+import path from "path";
+import ancesdir from "ancesdir";
+import {generateTokens} from "../internal/generate-tokens";
+
+const THEMES_DIR = "../theme/color";
+
+/**
+ * Process all themes in the theme directory.
+ *
+ * This step will read all the theme files in the theme directory and generate
+ * the CSS variables for each theme.
+ */
+function processThemeCollection() {
+    return fs.readdirSync(path.resolve(__dirname, THEMES_DIR)).map((file) => {
+        // Remove the file extension
+        const filename = file.split(".")[0];
+        // eslint-disable-next-line @typescript-eslint/no-require-imports
+        const {default: themeObject} = require(`${THEMES_DIR}/${filename}`);
+
+        return {name: filename, tokens: generateTokens(themeObject)};
+    });
+}
+
+/**
+ * Generate the CSS selectors containing CSS variables for each theme.
+ */
+function generateCssVariablesDefinitions() {
+    return processThemeCollection()
+        .map((theme) => {
+            const cssVariables = Object.entries(theme.tokens)
+                .map(([key, value]) => `${key}: ${value};`)
+                .join("");
+
+            // Use the root selector for the default theme
+            const selector =
+                theme.name === "default" ? ":root" : `.wb-theme-${theme.name}`;
+
+            return `${selector} {${cssVariables}}`;
+        })
+        .join("\n");
+}
+
+/**
+ * Create the CSS file containing the CSS variables for each theme.
+ */
+function createCssFile() {
+    // Get the root package folder; use the CHANGELOG.md file as our root
+    // anchor.
+    const packageDir = ancesdir(__dirname, "CHANGELOG.md");
+
+    const dir = path.resolve(packageDir, "./dist/css");
+
+    if (!fs.existsSync(dir)) {
+        fs.mkdirSync(dir);
+    }
+
+    // Generate the output inside dist/css/index.css
+    fs.writeFileSync(
+        path.resolve(packageDir, `${dir}/index.css`),
+        generateCssVariablesDefinitions(),
+        {flag: "w+"},
+    );
+}
+
+createCssFile();
+
+// eslint-disable-next-line no-console
+console.log("CSS variables generated successfully!!");

packages/wonder-blocks-tokens/src/internal/__test__/generate-tokens.test.ts

@@ -0,0 +1,36 @@
+import {generateTokens} from "../generate-tokens";
+
+describe("generateTokens", () => {
+    it("should generate tokens", () => {
+        // Arrange
+        const obj = {
+            primary: "red",
+            secondary: "blue",
+        };
+
+        // Act
+        const cssVars = generateTokens(obj);
+
+        // Assert
+        expect(cssVars).toStrictEqual({
+            "--wb-s-color-primary": "red",
+            "--wb-s-color-secondary": "blue",
+        });
+    });
+
+    it("should not generate tokens in empty objects", () => {
+        // Arrange
+        const obj = {
+            primary: {},
+            secondary: "blue",
+        };
+
+        // Act
+        const cssVars = generateTokens(obj);
+
+        // Assert
+        expect(cssVars).toStrictEqual({
+            "--wb-s-color-secondary": "blue",
+        });
+    });
+});