Merge c92a5b6 into aa776bd

Author: jandrade

.changeset/clean-ravens-happen.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-tokens": minor
+---
+
+Export `border` and `sizing` as CSS variables. Map JS tokens to css var counterparts

__docs__/wonder-blocks-tabs/navigation-tabs.stories.tsx

@@ -299,7 +299,7 @@ export const HeaderWithNavigationTabsExample: StoryComponentType = {
             navigationTabsRoot: {
                 // set margin to negative value of header vertical spacing so
                 // that selected indicator lines up with header border
-                margin: `-${headerVerticalSpacing} 0`,
+                margin: `calc(${headerVerticalSpacing} * -1) 0`,
             },
         });
         const [currentTab, setCurrentTab] = React.useState(0);

__docs__/wonder-blocks-tokens/tokens-border.mdx

@@ -4,7 +4,7 @@ import TokenTable from "../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";
+import {border, color, sizing} from "@khanacademy/wonder-blocks-tokens";
 
 <Meta title="Packages / Tokens / Border" />
 
@@ -17,6 +17,10 @@ export const baseColumns = (kind) => [
             </code>
         ),
     },
+    {
+        label: "CSS Variable",
+        cell: (row) => <code>{row.css}</code>,
+    },
     {
         label: "Value",
         cell: "value",
@@ -28,7 +32,7 @@ export const baseColumns = (kind) => [
 The `border` tokens are used to define the border properties of an element. The
 border tokens are broken down into two categories: `radius` and `width`.
 
-<View style={{marginBottom: tokens.spacing.medium_16}}>
+<View style={{marginBottom: sizing.size_160}}>
     <Banner
         kind="info"
         text="We don't define border colors here, and instead we recommend you to rely on the `color` token primitives to build on top of that."
@@ -42,8 +46,8 @@ border tokens are broken down into two categories: `radius` and `width`.
 import {border} from "@khanacademy/wonder-blocks-tokens";
 const styles = {
     borderedContainer: {
-        borderRadius: border.radius.small,
-        borderWidth: border.width.small,
+        borderRadius: border.radius.radius_040,
+        borderWidth: border.width.thin,
     },
 };
 ```
@@ -60,18 +64,18 @@ const styles = {
             cell: (row) => (
                 <View
                     style={{
-                        backgroundColor: tokens.color.purple,
+                        backgroundColor: color.purple,
                         borderRadius: row.value,
-                        width: tokens.sizing.size_480,
-                        height: tokens.sizing.size_480,
+                        width: sizing.size_480,
+                        height: sizing.size_480,
                     }}
                 >
                     &nbsp;
                 </View>
             ),
         },
     ]}
-    tokens={tokens.border.radius}
+    tokens={border.radius}
 />
 
 ### Width
@@ -84,16 +88,16 @@ const styles = {
             cell: (row) => (
                 <View
                     style={{
-                        borderColor: tokens.color.purple,
+                        borderColor: color.purple,
                         borderWidth: row.value,
-                        width: tokens.sizing.size_480,
-                        height: tokens.sizing.size_480,
+                        width: sizing.size_480,
+                        height: sizing.size_480,
                     }}
                 >
                     &nbsp;
                 </View>
             ),
         },
     ]}
-    tokens={tokens.border.width}
+    tokens={border.width}
 />

__docs__/wonder-blocks-tokens/tokens-sizing.mdx

@@ -41,6 +41,10 @@ const styles = {padding: sizing.size_160};
             label: "Token",
             cell: (row) => <code>sizing.{row.label}</code>,
         },
+        {
+            label: "CSS Variable",
+            cell: (row) => <code>{row.css}</code>,
+        },
         {
             label: "Base unit multiplier",
             cell: (row) => row.value.replace("rem", "x"),

packages/wonder-blocks-dropdown/src/components/select-opener.tsx

@@ -279,7 +279,7 @@ const _generateStyles = (placeholder: boolean, error: boolean) => {
     // TODO(WB-1868): Address outlineOffset to include hover and focus states
     const sharedOutlineStyling = {
         // Outline sits inside the border (inset)
-        outlineOffset: `-${border.width.medium}`,
+        outlineOffset: `calc(${border.width.medium} * -1)`,
         outlineStyle: "solid",
         outlineWidth: border.width.medium,
     };

packages/wonder-blocks-tabs/src/components/navigation-tab-item.tsx

@@ -111,10 +111,10 @@ const styles = StyleSheet.create({
         listStyle: "none",
         display: "inline-flex",
         [":has(a:hover)" as any]: {
-            boxShadow: `inset 0 -${sizing.size_020} 0 0 ${semanticColor.action.secondary.progressive.hover.foreground}`,
+            boxShadow: `inset 0 calc(${sizing.size_020}*-1) 0 0 ${semanticColor.action.secondary.progressive.hover.foreground}`,
         },
         [":has(a:active)" as any]: {
-            boxShadow: `inset 0 -${sizing.size_060} 0 0 ${semanticColor.action.secondary.progressive.press.foreground}`,
+            boxShadow: `inset 0 calc(${sizing.size_060}*-1) 0 0 ${semanticColor.action.secondary.progressive.press.foreground}`,
         },
         paddingBlockStart: sizing.size_080,
         paddingBlockEnd: sizing.size_180,

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

@@ -5,7 +5,7 @@ import ancesdir from "ancesdir";
 import {THEME_DATA_ATTRIBUTE} from "@khanacademy/wonder-blocks-theming";
 import {generateTokens} from "../internal/generate-tokens";
 
-const THEMES_DIR = "../theme/color";
+const THEMES_DIR = "../theme";
 
 /**
  * Process all themes in the theme directory.
@@ -14,22 +14,37 @@ const THEMES_DIR = "../theme/color";
  * 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 (
+        fs
+            .readdirSync(path.resolve(__dirname, THEMES_DIR), {
+                // Needed to determine whether the file is a directory or a
+                // file.
+                withFileTypes: true,
+            })
+            // Only include files that contain tokens
+            .filter((file) => {
+                return file.isFile() && file.name.endsWith(".ts");
+            })
+            .map((file) => {
+                // Remove the file extension
+                const filename = file.name.split(".")[0];
 
-        return {name: filename, tokens: generateTokens(themeObject)};
-    });
+                // 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) => {
+        .map((theme, index) => {
             const cssVariables = Object.entries(theme.tokens)
                 .map(([key, value]) => `${key}: ${value};`)
                 .join("");

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

@@ -1,18 +1,19 @@
 // primitive tokens
-import {border} from "./tokens/border";
 import {color} from "./tokens/color";
 import {font} from "./tokens/font";
-import {sizing} from "./tokens/sizing";
 import {spacing} from "./tokens/spacing";
 
 // media queries
 import {breakpoint} from "./tokens/media-queries";
-// semantic tokens
-import {semanticColor} from "./tokens/semantic-color";
 
 // utils
 import {mix, fade} from "./util/utils";
 
+// theme
+import theme from "./tokens/theme";
+
+const {border, semanticColor, sizing} = theme;
+
 export {
     /**
      * Primitive tokens for the Wonder Blocks design system.

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

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

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

@@ -1,4 +1,4 @@
-import {CSS_VAR_COLOR_PREFIX} from "../util/constants";
+import {CSS_VAR_PREFIX} from "../util/constants";
 import {RecursivePartial} from "../util/types";
 
 /**
@@ -11,7 +11,7 @@ export function generateTokens<T>(root: T): Record<string, string> {
     const tokens = {} as Record<string, string>;
     function generateCssVariables(
         obj: T | RecursivePartial<T>,
-        prefix = CSS_VAR_COLOR_PREFIX,
+        prefix = CSS_VAR_PREFIX,
     ) {
         for (const key in obj as RecursivePartial<T>) {
             if (typeof obj[key] === "object") {

packages/wonder-blocks-tokens/src/theme/default.ts

@@ -0,0 +1,18 @@
+import {sizing} from "./primitive/sizing";
+import {semanticColor} from "./semantic/semantic-color";
+import {border} from "./primitive/border";
+
+/**
+ * NOTE: All the tokens included in this `theme` file will be automatically
+ * mapped to CSS vars and included in
+ * @khanacademy/wonder-blocks-tokens/styles.css.
+ *
+ * The css vars transformation is done in the `generate-css-variables.ts`
+ * script. Used by `pnpm run dev` in the `@khanacademy/wonder-blocks-tokens`
+ * package.
+ */
+export default {
+    border,
+    semanticColor,
+    sizing,
+};

packages/wonder-blocks-tokens/src/tokens/border.ts renamed to packages/wonder-blocks-tokens/src/theme/primitive/border.ts

@@ -1,4 +1,4 @@
-import {sizing, remToPx} from "./sizing";
+import {remToPx, sizing} from "./sizing";
 
 export const border = {
     /**

packages/wonder-blocks-tokens/src/tokens/sizing.ts renamed to packages/wonder-blocks-tokens/src/theme/primitive/sizing.ts

@@ -7,7 +7,7 @@ const border = {
     inverse: color.white,
 };
 
-export default {
+export const semanticColor = {
     /**
      * For buttons, links, and controls to communicate the presence and meaning
      * of interaction.

packages/wonder-blocks-tokens/src/theme/color/default.ts renamed to packages/wonder-blocks-tokens/src/theme/semantic/semantic-color.ts

@@ -0,0 +1,5 @@
+import {CSS_VAR_PREFIX} from "../util/constants";
+import {mapValuesToCssVars} from "../internal/map-values-to-css-vars";
+import themeDefault from "../theme/default";
+
+export default mapValuesToCssVars(themeDefault, CSS_VAR_PREFIX);

packages/wonder-blocks-tokens/src/tokens/semantic-color.ts

@@ -1,10 +1,12 @@
 /**
- * The prefix for all CSS variables that are semantic colors.
+ * The prefix for all CSS variables that are converted from the original tokens.
  *
  * NOTE: The prefix uses the following structure:
- * --wb-<namespace>-<token_category>-
+ * --wb-<namespace>-<token_category>-*
  *
- * - namespace: The design token namespace (`s` for semantic tokens).
- * - token_category: The category of the design token (e.g. `color`, `size`).
+ * - namespace: The design token namespace (`semanticColor`).
+ * - token_category: The category of the design token (e.g. `border`, `sizing`).
+ *
+ * @see https://khanacademy.atlassian.net/wiki/spaces/WB/pages/3967287319/Component+tokens+structure
  */
-export const CSS_VAR_COLOR_PREFIX = "--wb-s-color-";
+export const CSS_VAR_PREFIX = "--wb-";