From 6e0558c35f2da6428ff416c57ec101480c2d58cc Mon Sep 17 00:00:00 2001 From: Juan Andrade Date: Thu, 16 May 2024 10:17:02 -0400 Subject: [PATCH] Include tokens.css as part of the wb-tokens exports --- .storybook/main.ts | 4 +- .storybook/preview.tsx | 2 + .../src/components/text-field.tsx | 4 +- .../{src => css}/tokens.css | 0 packages/wonder-blocks-tokens/package.json | 7 ++ static/sb-styles/preview.css | 2 - static/sb-styles/tokens.css | 91 ------------------- 7 files changed, 14 insertions(+), 96 deletions(-) rename packages/wonder-blocks-tokens/{src => css}/tokens.css (100%) delete mode 100644 static/sb-styles/tokens.css diff --git a/.storybook/main.ts b/.storybook/main.ts index 276a879c3..07a78859e 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -26,9 +26,11 @@ const config: StorybookConfig = { const mergedConfig = mergeConfig(config, { resolve: { // Allow us to detect changes from local wonder-blocks packages. + // NOTE: Only applies to ts(x) files to avoid conflicts with + // the tokens.css import. alias: [ { - find: /^@khanacademy\/wonder-blocks(-.*)$/, + find: /^@khanacademy\/wonder-blocks(-.*).(ts|tsx)$/, replacement: resolve( __dirname, "../packages/wonder-blocks$1/src", diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 07a9d9646..4d76d0692 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -7,6 +7,8 @@ import {ThemeSwitcherContext} from "@khanacademy/wonder-blocks-theming"; import {RenderStateRoot} from "../packages/wonder-blocks-core/src"; import {Preview} from "@storybook/react"; +import "@khanacademy/wonder-blocks-tokens/css/tokens.css"; + /** * WB Official breakpoints * @see https://khanacademy.atlassian.net/wiki/spaces/WB/pages/2099970518/Layout+Breakpoints diff --git a/packages/wonder-blocks-form/src/components/text-field.tsx b/packages/wonder-blocks-form/src/components/text-field.tsx index a1909367c..fdd2b5abb 100644 --- a/packages/wonder-blocks-form/src/components/text-field.tsx +++ b/packages/wonder-blocks-form/src/components/text-field.tsx @@ -4,10 +4,10 @@ import * as React from "react"; // import {mix, color, spacing} from "@khanacademy/wonder-blocks-tokens"; // import {addStyle} from "@khanacademy/wonder-blocks-core"; // import {styles as typographyStyles} from "@khanacademy/wonder-blocks-typography"; -import styles from "./text-field.module.css"; - import type {AriaProps, StyleType} from "@khanacademy/wonder-blocks-core"; +import styles from "./text-field.module.css"; + export type TextFieldType = "text" | "password" | "email" | "number" | "tel"; type WithForwardRef = { diff --git a/packages/wonder-blocks-tokens/src/tokens.css b/packages/wonder-blocks-tokens/css/tokens.css similarity index 100% rename from packages/wonder-blocks-tokens/src/tokens.css rename to packages/wonder-blocks-tokens/css/tokens.css diff --git a/packages/wonder-blocks-tokens/package.json b/packages/wonder-blocks-tokens/package.json index c588ff0fb..2999355f5 100644 --- a/packages/wonder-blocks-tokens/package.json +++ b/packages/wonder-blocks-tokens/package.json @@ -2,6 +2,13 @@ "name": "@khanacademy/wonder-blocks-tokens", "version": "1.3.0", "description": "Core primitive design tokens for Web Wonder Blocks", + "exports": { + ".": { + "import": "./dist/es/index.js", + "require": "./dist/index.js" + }, + "./css/*": "./css/*" + }, "main": "dist/index.js", "module": "dist/es/index.js", "types": "dist/index.d.ts", diff --git a/static/sb-styles/preview.css b/static/sb-styles/preview.css index f590a76f2..08d6f200d 100644 --- a/static/sb-styles/preview.css +++ b/static/sb-styles/preview.css @@ -1,5 +1,3 @@ -@import "tokens.css"; - /** * Overrides for the Storybook preview iframe. */ diff --git a/static/sb-styles/tokens.css b/static/sb-styles/tokens.css deleted file mode 100644 index 7e4f39962..000000000 --- a/static/sb-styles/tokens.css +++ /dev/null @@ -1,91 +0,0 @@ -:root { - /* border */ - --wb-border-radius-xSmall_2: 2px; - --wb-border-radius-small_3: 3px; - --wb-border-radius-medium_4: 4px; - --wb-border-radius-large_6: 6px; - --wb-border-radius-xLarge_12: 12px; - --wb-border-radius-full: 50%; - --wb-border-width-none: 0; - --wb-border-width-hairline: 1px; - --wb-border-width-thin: 2px; - --wb-border-width-thick: 4px; - - /* color */ - --wb-color-blue: #1865f2; - --wb-color-purple: #9059ff; - --wb-color-green: #00a60e; - --wb-color-gold: #ffb100; - --wb-color-red: #d92916; - --wb-color-offBlack: #21242c; - --wb-color-offBlack64: rgba(33, 36, 44, 0.64); - --wb-color-offBlack50: rgba(33, 36, 44, 0.50); - --wb-color-offBlack32: rgba(33, 36, 44, 0.32); - --wb-color-offBlack16: rgba(33, 36, 44, 0.16); - --wb-color-offBlack8: rgba(33, 36, 44, 0.08); - --wb-color-offWhite: #f7f8fa; - --wb-color-white: #ffffff; - --wb-color-white64: rgba(255, 255, 255, 0.64); - --wb-color-white50: rgba(255, 255, 255, 0.50); - --wb-color-darkBlue: #0b2149; - --wb-color-teal: #14bf96; - --wb-color-lightBlue: #37c5fd; - --wb-color-pink: #fa50ae; - --wb-color-white32: rgba(255, 255, 255, 0.32); - --wb-color-activeBlue: #1b50b3; - --wb-color-fadedBlue: #b5cefb; - --wb-color-fadedBlue24: #c8dafc; - --wb-color-fadedBlue16: #dae6fd; - --wb-color-fadedBlue8: #edf3fe; - --wb-color-activeRed: #9e271d; - --wb-color-fadedRed: #f3bbb4; - --wb-color-fadedRed24: #f6ccc7; - --wb-color-fadedRed16: #f9ddda; - --wb-color-fadedRed8: #fceeec; - --wb-color-fadedGreen24: #c2eac5; - --wb-color-fadedGreen16: #d6f1d8; - --wb-color-fadedGold24: #ffecc2; - --wb-color-fadedGold16: #fff3d6; - --wb-color-fadedPurple24: #e4d7ff; - --wb-color-fadedPurple16: #ede4ff; - --wb-color-eggplant: #5f1e5c; - --wb-color-fadedOffBlack64: #717378; - --wb-color-fadedOffBlack50: #909296; - --wb-color-fadedOffBlack32: #b8b9bb; - --wb-color-fadedOffBlack16: #dbdcdd; - --wb-color-fadedOffBlack8: #ededee; - - /* spacing */ - --wb-spacing-xxxxSmall_2: 2px; - --wb-spacing-xxxSmall_4: 4px; - --wb-spacing-xxSmall_6: 6px; - --wb-spacing-xSmall_8: 8px; - --wb-spacing-small_12: 12px; - --wb-spacing-medium_16: 16px; - --wb-spacing-large_24: 24px; - --wb-spacing-xLarge_32: 32px; - --wb-spacing-xxLarge_48: 48px; - --wb-spacing-xxxLarge_64: 64px; - - /* font */ - --wb-font-family-sans: Lato, "Noto Sans", sans-serif; - --wb-font-family-serif: "Noto Serif", serif; - --wb-font-family-mono: Inconsolata, monospace; - --wb-font-size-xxxLarge: 36px; - --wb-font-size-xxLarge: 28px; - --wb-font-size-xLarge: 24px; - --wb-font-size-large: 20px; - --wb-font-size-medium: 16px; - --wb-font-size-small: 14px; - --wb-font-size-xSmall: 12px; - --wb-font-lineHeight-xxxLarge: 40px; - --wb-font-lineHeight-xxLarge: 32px; - --wb-font-lineHeight-xLarge: 28px; - --wb-font-lineHeight-large: 24px; - --wb-font-lineHeight-medium: 20px; - --wb-font-lineHeight-small: 18px; - --wb-font-lineHeight-xSmall: 16px; - --wb-font-weight-light: 300; - --wb-font-weight-regular: 400; - --wb-font-weight-bold: 700; -} \ No newline at end of file