diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml index c7187bb08..25617b7a4 100644 --- a/.github/workflows/chromatic.yml +++ b/.github/workflows/chromatic.yml @@ -49,7 +49,7 @@ jobs: buildScriptName: 'storybook:build' exitOnceUploaded: true onlyChanged: true - externals: packages/(icons/src/img|tokens/src)/** + externals: packages/(icons/src/img|tokens/tokens)/** a11y: name: a11y diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index a37234bd5..621c5deb1 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -129,7 +129,7 @@ There are just a few things to keep in mind: Note: if you are creating a pull request from a fork, CI checks will only run when it is `ready for review`. To run Chromatic, you will need to make a build locally in the terminal using the project token found in Chromatic: ```sh -$ pnpm chromatic --project-token PROJECT_TOKEN --branch-name FORKED_BRANCH --build-script-name storybook:build --exit-once-uploaded --only-changed --externals "packages/icons/src/img/**" --externals "packages/tokens/src/**" +$ pnpm chromatic --project-token PROJECT_TOKEN --branch-name FORKED_BRANCH --build-script-name storybook:build --exit-once-uploaded --only-changed --externals "packages/icons/src/img/**" --externals "packages/tokens/tokens/**" ``` --- diff --git a/packages/tokens/__tests__/__snapshots__/tokens.spec.ts.snap b/packages/tokens/__tests__/__snapshots__/tokens.spec.ts.snap new file mode 100644 index 000000000..a6636a18e --- /dev/null +++ b/packages/tokens/__tests__/__snapshots__/tokens.spec.ts.snap @@ -0,0 +1,174 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`Tokens > builds dark alias tokens 1`] = ` +"/** + * Do not edit directly, this file was auto-generated. + */ + +[data-theme='dark'] { + --lp-color-bg-interactive-link: rgba(71, 97, 255, 0.2); + --lp-color-bg-feedback-error: var(--lp-color-red-900); + --lp-color-bg-feedback-info: var(--lp-color-blue-900); + --lp-color-bg-feedback-success: var(--lp-color-green-900); + --lp-color-bg-interactive-primary-base: var(--lp-color-blue-600); + --lp-color-bg-interactive-primary-active: var(--lp-color-blue-600); + --lp-color-bg-interactive-primary-focus: var(--lp-color-blue-500); + --lp-color-bg-interactive-primary-hover: var(--lp-color-blue-500); + --lp-color-bg-interactive-secondary-focus: var(--lp-color-gray-800); + --lp-color-bg-interactive-secondary-hover: var(--lp-color-gray-800); + --lp-color-bg-interactive-tertiary-focus: var(--lp-color-gray-800); + --lp-color-bg-interactive-tertiary-hover: var(--lp-color-gray-800); + --lp-color-bg-interactive-destructive-base: var(--lp-color-red-600); + --lp-color-bg-interactive-destructive-active: var(--lp-color-red-600); + --lp-color-bg-interactive-destructive-focus: var(--lp-color-red-500); + --lp-color-bg-interactive-destructive-hover: var(--lp-color-red-500); + --lp-color-bg-interactive-disabled: var(--lp-color-gray-800); + --lp-color-bg-interactive-selected: var(--lp-color-blue-950); + --lp-color-bg-ui-primary: var(--lp-color-gray-950); + --lp-color-bg-ui-secondary: var(--lp-color-gray-900); + --lp-color-bg-ui-tertiary: var(--lp-color-gray-800); + --lp-color-bg-product-beta: var(--lp-color-purple-900); + --lp-color-bg-product-federal: var(--lp-color-brand-yellow-dark); + --lp-color-border-feedback-error: var(--lp-color-red-400); + --lp-color-border-feedback-info: var(--lp-color-blue-400); + --lp-color-border-feedback-success: var(--lp-color-green-400); + --lp-color-border-field-active: var(--lp-color-blue-400); + --lp-color-border-field-focus: var(--lp-color-blue-400); + --lp-color-border-interactive-focus: var(--lp-color-blue-400); + --lp-color-border-interactive-selected: var(--lp-color-blue-400); + --lp-color-border-ui-primary: var(--lp-color-gray-700); + --lp-color-border-ui-secondary: var(--lp-color-gray-800); + --lp-color-fill-ui-primary: var(--lp-color-gray-200); + --lp-color-fill-field-base: var(--lp-color-gray-400); + --lp-color-shadow-interactive-focus: var(--lp-color-blue-400); + --lp-color-shadow-interactive-primary: var(--lp-color-gray-950); + --lp-color-shadow-ui-primary: var(--lp-color-black-200); + --lp-color-shadow-ui-secondary: var(--lp-color-black-100); + --lp-color-text-feedback-error: var(--lp-color-red-400); + --lp-color-text-feedback-success: var(--lp-color-green-400); + --lp-color-text-feedback-info: var(--lp-color-blue-400); + --lp-color-text-interactive-base: var(--lp-color-blue-400); + --lp-color-text-interactive-active: var(--lp-color-purple-400); + --lp-color-text-interactive-secondary: var(--lp-color-gray-400); + --lp-color-text-interactive-disabled: var(--lp-color-gray-600); + --lp-color-text-ui-primary-base: var(--lp-color-gray-0); + --lp-color-text-ui-primary-inverted: var(--lp-color-gray-950); + --lp-color-text-ui-secondary: var(--lp-color-gray-400); + --lp-color-text-field-placeholder: var(--lp-color-gray-400); + --lp-color-text-product-beta: var(--lp-color-purple-400); + --lp-color-text-code-function: var(--lp-color-brand-purple-base); + --lp-color-text-code-tag: var(--lp-color-brand-orange-base); + --lp-color-text-code-string: var(--lp-color-brand-cyan-light); + --lp-color-text-code-base: var(--lp-color-gray-200); + --lp-color-text-code-keyword: var(--lp-color-brand-pink-light); + --lp-color-text-code-title: var(--lp-color-brand-orange-light); + --lp-color-text-code-number: var(--lp-color-brand-blue-light); + --lp-color-bg-overlay-secondary: var(--lp-color-bg-ui-secondary); + --lp-color-bg-field-base: var(--lp-color-bg-ui-secondary); +} +" +`; + +exports[`Tokens > builds default alias tokens 1`] = ` +"/** + * Do not edit directly, this file was auto-generated. + */ + +:root, [data-theme] { + --lp-color-bg-interactive-tertiary-base: rgba(0, 0, 0, 0); + --lp-color-bg-interactive-tertiary-active: rgba(0, 0, 0, 0); + --lp-color-border-interactive-primary-base: rgba(0, 0, 0, 0); + --lp-color-border-interactive-primary-active: rgba(0, 0, 0, 0); + --lp-color-border-interactive-primary-focus: rgba(0, 0, 0, 0); + --lp-color-border-interactive-primary-hover: rgba(0, 0, 0, 0); + --lp-color-border-interactive-disabled: rgba(0, 0, 0, 0); + --lp-color-bg-feedback-primary: var(--lp-color-gray-800); + --lp-color-bg-feedback-error: var(--lp-color-red-50); + --lp-color-bg-feedback-info: var(--lp-color-blue-50); + --lp-color-bg-feedback-success: var(--lp-color-green-50); + --lp-color-bg-interactive-primary-base: var(--lp-color-blue-500); + --lp-color-bg-interactive-primary-active: var(--lp-color-blue-500); + --lp-color-bg-interactive-primary-focus: var(--lp-color-blue-600); + --lp-color-bg-interactive-primary-hover: var(--lp-color-blue-600); + --lp-color-bg-interactive-secondary-focus: var(--lp-color-gray-50); + --lp-color-bg-interactive-secondary-hover: var(--lp-color-gray-50); + --lp-color-bg-interactive-tertiary-focus: var(--lp-color-gray-50); + --lp-color-bg-interactive-tertiary-hover: var(--lp-color-gray-50); + --lp-color-bg-interactive-destructive-base: var(--lp-color-red-500); + --lp-color-bg-interactive-destructive-active: var(--lp-color-red-500); + --lp-color-bg-interactive-destructive-focus: var(--lp-color-red-600); + --lp-color-bg-interactive-destructive-hover: var(--lp-color-red-600); + --lp-color-bg-interactive-disabled: var(--lp-color-gray-100); + --lp-color-bg-interactive-link: var(--lp-color-blue-50); + --lp-color-bg-interactive-selected: var(--lp-color-blue-0); + --lp-color-bg-ui-primary: var(--lp-color-white-950); + --lp-color-bg-ui-secondary: var(--lp-color-gray-0); + --lp-color-bg-ui-tertiary: var(--lp-color-gray-50); + --lp-color-bg-product-beta: var(--lp-color-purple-100); + --lp-color-bg-product-federal: var(--lp-color-brand-yellow-base); + --lp-color-border-feedback-error: var(--lp-color-red-500); + --lp-color-border-feedback-info: var(--lp-color-blue-500); + --lp-color-border-feedback-success: var(--lp-color-green-500); + --lp-color-border-field-active: var(--lp-color-blue-500); + --lp-color-border-field-focus: var(--lp-color-blue-500); + --lp-color-border-interactive-focus: var(--lp-color-blue-500); + --lp-color-border-interactive-selected: var(--lp-color-blue-500); + --lp-color-border-ui-primary: var(--lp-color-gray-100); + --lp-color-border-ui-secondary: var(--lp-color-gray-50); + --lp-color-fill-feedback-error: var(--lp-color-red-500); + --lp-color-fill-feedback-info: var(--lp-color-blue-500); + --lp-color-fill-feedback-success: var(--lp-color-green-500); + --lp-color-fill-interactive-primary: var(--lp-color-white-950); + --lp-color-fill-interactive-destructive: var(--lp-color-red-500); + --lp-color-fill-ui-primary: var(--lp-color-gray-700); + --lp-color-fill-ui-secondary: var(--lp-color-gray-500); + --lp-color-fill-field-base: var(--lp-color-gray-600); + --lp-color-shadow-interactive-focus: var(--lp-color-blue-600); + --lp-color-shadow-interactive-primary: var(--lp-color-white-950); + --lp-color-shadow-ui-primary: var(--lp-color-black-50); + --lp-color-shadow-ui-secondary: var(--lp-color-black-0); + --lp-color-text-feedback-error: var(--lp-color-red-600); + --lp-color-text-feedback-success: var(--lp-color-green-600); + --lp-color-text-feedback-info: var(--lp-color-blue-600); + --lp-color-text-interactive-base: var(--lp-color-blue-600); + --lp-color-text-interactive-active: var(--lp-color-purple-700); + --lp-color-text-interactive-primary-base: var(--lp-color-white-950); + --lp-color-text-interactive-primary-active: var(--lp-color-white-950); + --lp-color-text-interactive-primary-focus: var(--lp-color-white-950); + --lp-color-text-interactive-primary-hover: var(--lp-color-white-950); + --lp-color-text-interactive-secondary: var(--lp-color-gray-600); + --lp-color-text-interactive-disabled: var(--lp-color-gray-500); + --lp-color-text-ui-primary-base: var(--lp-color-gray-900); + --lp-color-text-ui-primary-inverted: var(--lp-color-white-950); + --lp-color-text-ui-secondary: var(--lp-color-gray-600); + --lp-color-text-field-disabled: var(--lp-color-gray-500); + --lp-color-text-field-placeholder: var(--lp-color-gray-500); + --lp-color-text-product-beta: var(--lp-color-purple-600); + --lp-color-text-product-federal: var(--lp-color-gray-950); + --lp-color-text-code-function: var(--lp-color-brand-purple-dark); + --lp-color-text-code-tag: var(--lp-color-brand-orange-dark); + --lp-color-text-code-string: var(--lp-color-brand-cyan-dark); + --lp-color-text-code-comment: var(--lp-color-gray-400); + --lp-color-text-code-base: var(--lp-color-gray-600); + --lp-color-text-code-keyword: var(--lp-color-brand-pink-base); + --lp-color-text-code-title: var(--lp-color-brand-orange-base); + --lp-color-text-code-number: var(--lp-color-brand-blue-dark); + --lp-color-bg-interactive-secondary-base: var(--lp-color-bg-ui-primary); + --lp-color-bg-interactive-secondary-active: var(--lp-color-bg-ui-primary); + --lp-color-bg-overlay-primary: var(--lp-color-bg-ui-primary); + --lp-color-bg-overlay-secondary: var(--lp-color-bg-ui-primary); + --lp-color-bg-field-base: var(--lp-color-bg-ui-primary); + --lp-color-bg-field-disabled: var(--lp-color-bg-ui-tertiary); + --lp-color-border-field-base: var(--lp-color-border-ui-primary); + --lp-color-border-field-error: var(--lp-color-border-feedback-error); + --lp-color-border-field-disabled: var(--lp-color-border-ui-secondary); + --lp-color-border-interactive-secondary-base: var(--lp-color-border-ui-primary); + --lp-color-border-interactive-secondary-active: var(--lp-color-border-ui-primary); + --lp-color-border-interactive-secondary-focus: var(--lp-color-border-ui-primary); + --lp-color-border-interactive-secondary-hover: var(--lp-color-border-ui-primary); + --lp-color-border-interactive-destructive: var(--lp-color-border-feedback-error); + --lp-color-text-feedback-base: var(--lp-color-text-ui-primary-base); + --lp-color-text-interactive-destructive: var(--lp-color-text-feedback-error); +} +" +`; diff --git a/packages/tokens/__tests__/tokens.spec.ts b/packages/tokens/__tests__/tokens.spec.ts new file mode 100644 index 000000000..1bd526ac6 --- /dev/null +++ b/packages/tokens/__tests__/tokens.spec.ts @@ -0,0 +1,57 @@ +import type { DesignTokens } from 'style-dictionary/types'; + +import path from 'path'; +import StyleDictionary from 'style-dictionary'; +import { describe, expect, it } from 'vitest'; + +import { css } from '../src/themes'; +import aliasDark from '../tokens/color-aliases.dark.json' with { type: 'json' }; +import aliasDefault from '../tokens/color-aliases.default.json' with { type: 'json' }; + +const sameKeys = (tokens1: DesignTokens, tokens2: DesignTokens) => { + for (const key in tokens1) { + if (!(key in tokens2)) { + return false; + } + + if (typeof tokens1[key] === 'object' && typeof tokens2[key] === 'object') { + if (!sameKeys(tokens1[key], tokens2[key])) { + return false; + } + } + } + + return true; +}; + +describe('Tokens', () => { + it('uses default theme as base for dark theme', () => { + expect(sameKeys(aliasDark, aliasDefault)).toBeTruthy(); + }); + + it('builds default alias tokens', async () => { + const config = css('default'); + config.source = [ + path.resolve(__dirname, '../tokens/color-primitives.json'), + path.resolve(__dirname, '../tokens/color-aliases.default.json'), + ]; + + const sd = new StyleDictionary(config); + const [file] = await sd.formatPlatform('css'); + + expect(file.output).toMatchSnapshot(); + }); + + it('builds dark alias tokens', async () => { + const config = css('dark'); + config.source = [ + path.resolve(__dirname, '../tokens/color-primitives.json'), + path.resolve(__dirname, '../tokens/color-aliases.dark.json'), + ]; + + const sd = new StyleDictionary(config); + const [file] = await sd.formatPlatform('css'); + + expect(file.output).toMatchSnapshot(); + }); +}); diff --git a/packages/tokens/package.json b/packages/tokens/package.json index fe9d92a99..2b631dffb 100644 --- a/packages/tokens/package.json +++ b/packages/tokens/package.json @@ -38,14 +38,13 @@ "./dist/tokens.json": "./dist/tokens.json" }, "scripts": { - "build": "tsx build.ts && tsc --noEmit", + "build": "tsx src/build.ts && tsc --noEmit", "clean": "rm -rf dist", "lint": "exit 0", - "test": "exit 0" + "test": "vitest run" }, "devDependencies": { "json-to-ts": "^2.1.0", - "prettier": "^3.4.1", "style-dictionary": "^4.3.0", "tsx": "^4.19.0" } diff --git a/packages/tokens/build.ts b/packages/tokens/src/build.ts similarity index 72% rename from packages/tokens/build.ts rename to packages/tokens/src/build.ts index 706f3d885..be15c5e36 100644 --- a/packages/tokens/build.ts +++ b/packages/tokens/src/build.ts @@ -1,16 +1,35 @@ -import type { TransformedToken } from 'style-dictionary/types'; +import type { Config, TransformedToken } from 'style-dictionary/types'; import JsonToTS from 'json-to-ts'; import StyleDictionary from 'style-dictionary'; -import { createPropertyFormatter, fileHeader, minifyDictionary } from 'style-dictionary/utils'; +import { formats, transformGroups, transforms } from 'style-dictionary/enums'; +import { fileHeader, minifyDictionary } from 'style-dictionary/utils'; + +import { css, themes } from './themes'; + +const configs = themes.map(css); + +const runSD = async (cfg: Config) => { + const sd = new StyleDictionary(cfg); + const [file] = await sd.formatPlatform('css'); + return [file.destination, file.output]; +}; + +const aliasTokens = Object.fromEntries(await Promise.all(configs.map(runSD))); const sd = new StyleDictionary({ - source: ['src/*.json'], + source: ['tokens/*.json'], platforms: { css: { prefix: 'lp', - transformGroup: 'css', - transforms: ['name/kebab', 'time/seconds', 'size/rem', 'color/rgb', 'attribute/font'], + basePxFontSize: 16, + transformGroup: transformGroups.css, + transforms: [ + transforms.nameKebab, + transforms.sizePxToRem, + transforms.colorRgb, + 'attribute/font', + ], buildPath: 'dist/', options: { outputReferences: true, @@ -19,18 +38,17 @@ const sd = new StyleDictionary({ files: [ { destination: 'index.css', - format: 'css/variables', - filter: (token) => token.filePath !== 'src/color-aliases.json', + format: formats.cssVariables, + filter: (token) => !token.filePath.includes('aliases'), }, { destination: 'themes.css', - format: 'custom/css', - filter: (token) => token.filePath === 'src/color-aliases.json', + format: 'css/themes', }, { destination: 'media-queries.css', format: 'custom/media-query', - filter: (token) => token.filePath === 'src/viewport.json', + filter: (token) => token.filePath === 'tokens/viewport.json', }, { destination: 'fonts.css', @@ -41,7 +59,9 @@ const sd = new StyleDictionary({ actions: ['copy_assets'], }, js: { - transformGroup: 'js', + basePxFontSize: 16, + transformGroup: transformGroups.js, + transforms: [transforms.sizePxToRem, transforms.colorRgb], buildPath: 'dist/', options: { outputReferences: true, @@ -64,7 +84,7 @@ const sd = new StyleDictionary({ }, json: { buildPath: 'dist/', - transforms: ['name/kebab', 'custom/value/name'], + transforms: [transforms.nameKebab, 'custom/value/name'], options: { outputReferences: true, usesDtcg: true, @@ -77,9 +97,10 @@ const sd = new StyleDictionary({ ], }, vscode: { + basePxFontSize: 16, buildPath: 'dist/', - transformGroup: 'css', - transforms: ['name/kebab', 'color/rgb'], + transformGroup: transformGroups.css, + transforms: [transforms.nameKebab, transforms.sizePxToRem, transforms.colorRgb], options: { outputReferences: true, usesDtcg: true, @@ -95,36 +116,12 @@ const sd = new StyleDictionary({ }); sd.registerFormat({ - name: 'custom/css', - format: async ({ dictionary, file, options }) => { - const { outputReferences, outputReferenceFallbacks, usesDtcg } = options; - const header = await fileHeader({ file }); + name: 'css/themes', + format: async () => { + const light = aliasTokens['default.css']; + const dark = aliasTokens['dark.css']; - const formatProperty = createPropertyFormatter({ - outputReferences, - outputReferenceFallbacks, - dictionary, - format: 'css', - usesDtcg, - }); - - const dark = dictionary.allTokens - .filter((token) => !!token.dark) - .map((token) => { - const { dark } = token; - return Object.assign({}, token, { - $value: dark, - original: { ...token.original, $value: token.original.dark }, - }); - }); - - const defaultTokens = `${header}:root, [data-theme] {\n${dictionary.allTokens - .filter((token) => !!token.$value) - .map(formatProperty) - .join('\n')}\n}\n`; - const darkTokens = `[data-theme='dark'] {\n${dark.map(formatProperty).join('\n')}\n}\n`; - - return `${defaultTokens}\n${darkTokens}`; + return `${light}\n${dark}`; }, }); diff --git a/packages/tokens/src/size.json b/packages/tokens/src/size.json deleted file mode 100644 index ab2fa25c7..000000000 --- a/packages/tokens/src/size.json +++ /dev/null @@ -1,155 +0,0 @@ -{ - "size": { - "$type": "dimension", - "0": { - "$value": "0rem" - }, - "1": { - "$value": "0.0625rem" - }, - "2": { - "$value": "0.125rem" - }, - "3": { - "$value": "0.1875rem" - }, - "4": { - "$value": "0.25rem" - }, - "6": { - "$value": "0.375rem" - }, - "8": { - "$value": "0.5rem" - }, - "10": { - "$value": "0.625rem" - }, - "11": { - "$value": "0.6875rem" - }, - "12": { - "$value": "0.75rem" - }, - "13": { - "$value": "0.8125rem" - }, - "14": { - "$value": "0.875rem" - }, - "15": { - "$value": "0.9375rem" - }, - "16": { - "$value": "1rem" - }, - "18": { - "$value": "1.125rem" - }, - "20": { - "$value": "1.25rem" - }, - "24": { - "$value": "1.5rem" - }, - "28": { - "$value": "1.75rem" - }, - "32": { - "$value": "2rem" - }, - "36": { - "$value": "2.25rem" - }, - "40": { - "$value": "2.5rem" - }, - "44": { - "$value": "2.75rem" - }, - "48": { - "$value": "3rem" - }, - "56": { - "$value": "3.5rem" - }, - "64": { - "$value": "4rem" - }, - "72": { - "$value": "4.5rem" - }, - "80": { - "$value": "5rem" - }, - "96": { - "$value": "6rem" - }, - "112": { - "$value": "7rem" - }, - "128": { - "$value": "8rem" - }, - "144": { - "$value": "9rem" - }, - "160": { - "$value": "10rem" - }, - "176": { - "$value": "11rem" - }, - "192": { - "$value": "12rem" - }, - "208": { - "$value": "13rem" - }, - "224": { - "$value": "14rem" - }, - "240": { - "$value": "15rem" - }, - "256": { - "$value": "16rem" - }, - "320": { - "$value": "20rem" - }, - "400": { - "$value": "25rem" - }, - "480": { - "$value": "30rem" - }, - "560": { - "$value": "35rem" - }, - "640": { - "$value": "40rem" - }, - "720": { - "$value": "45rem" - }, - "800": { - "$value": "50rem" - }, - "960": { - "$value": "60rem" - }, - "1120": { - "$value": "70rem" - }, - "1200": { - "$value": "75rem" - }, - "1280": { - "$value": "80rem" - }, - "1440": { - "$value": "90rem" - } - } -} diff --git a/packages/tokens/src/themes.ts b/packages/tokens/src/themes.ts new file mode 100644 index 000000000..ec32d0585 --- /dev/null +++ b/packages/tokens/src/themes.ts @@ -0,0 +1,31 @@ +import type { Config } from 'style-dictionary/types'; + +import { formats, transformGroups, transforms } from 'style-dictionary/enums'; + +export const themes = ['default', 'dark'] as const; +export type Theme = (typeof themes)[number]; + +export const css = (theme: Theme): Config => ({ + source: ['tokens/color-primitives.json', `tokens/*.${theme}.json`], + platforms: { + css: { + prefix: 'lp', + transformGroup: transformGroups.css, + transforms: [transforms.colorRgb], + options: { + outputReferences: true, + usesDtcg: true, + }, + files: [ + { + destination: `${theme}.css`, + format: formats.cssVariables, + options: { + selector: theme === 'default' ? ':root, [data-theme]' : `[data-theme='${theme}']`, + }, + filter: (token) => token.filePath.includes(theme), + }, + ], + }, + }, +}); diff --git a/packages/tokens/src/asset.json b/packages/tokens/tokens/asset.json similarity index 100% rename from packages/tokens/src/asset.json rename to packages/tokens/tokens/asset.json diff --git a/packages/tokens/src/border.json b/packages/tokens/tokens/border.json similarity index 100% rename from packages/tokens/src/border.json rename to packages/tokens/tokens/border.json diff --git a/packages/tokens/tokens/color-aliases.dark.json b/packages/tokens/tokens/color-aliases.dark.json new file mode 100644 index 000000000..3f731575a --- /dev/null +++ b/packages/tokens/tokens/color-aliases.dark.json @@ -0,0 +1,242 @@ +{ + "color": { + "$type": "color", + "bg": { + "feedback": { + "error": { + "$value": "{color.red.900}" + }, + "info": { + "$value": "{color.blue.900}" + }, + "success": { + "$value": "{color.green.900}" + } + }, + "interactive": { + "primary": { + "base": { + "$value": "{color.blue.600}" + }, + "active": { + "$value": "{color.blue.600}" + }, + "focus": { + "$value": "{color.blue.500}" + }, + "hover": { + "$value": "{color.blue.500}" + } + }, + "secondary": { + "focus": { + "$value": "{color.gray.800}" + }, + "hover": { + "$value": "{color.gray.800}" + } + }, + "tertiary": { + "focus": { + "$value": "{color.gray.800}" + }, + "hover": { + "$value": "{color.gray.800}" + } + }, + "destructive": { + "base": { + "$value": "{color.red.600}" + }, + "active": { + "$value": "{color.red.600}" + }, + "focus": { + "$value": "{color.red.500}" + }, + "hover": { + "$value": "{color.red.500}" + } + }, + "disabled": { + "$value": "{color.gray.800}" + }, + "link": { + "$value": "#4761FF33" + }, + "selected": { + "$value": "{color.blue.950}" + } + }, + "ui": { + "primary": { + "$value": "{color.gray.950}" + }, + "secondary": { + "$value": "{color.gray.900}" + }, + "tertiary": { + "$value": "{color.gray.800}" + } + }, + "overlay": { + "secondary": { + "$value": "{color.bg.ui.secondary}" + } + }, + "field": { + "base": { + "$value": "{color.bg.ui.secondary}" + } + }, + "product": { + "beta": { + "$value": "{color.purple.900}" + }, + "federal": { + "$value": "{color.brand.yellow.dark}" + } + } + }, + "border": { + "feedback": { + "error": { + "$value": "{color.red.400}" + }, + "info": { + "$value": "{color.blue.400}" + }, + "success": { + "$value": "{color.green.400}" + } + }, + "field": { + "active": { + "$value": "{color.blue.400}" + }, + "focus": { + "$value": "{color.blue.400}" + } + }, + "interactive": { + "focus": { + "$value": "{color.blue.400}" + }, + "selected": { + "$value": "{color.blue.400}" + } + }, + "ui": { + "primary": { + "$value": "{color.gray.700}" + }, + "secondary": { + "$value": "{color.gray.800}" + } + } + }, + "fill": { + "ui": { + "primary": { + "$value": "{color.gray.200}" + } + }, + "field": { + "base": { + "$value": "{color.gray.400}" + } + } + }, + "shadow": { + "interactive": { + "focus": { + "$value": "{color.blue.400}" + }, + "primary": { + "$value": "{color.gray.950}" + } + }, + "ui": { + "primary": { + "$value": "{color.black.200}" + }, + "secondary": { + "$value": "{color.black.100}" + } + } + }, + "text": { + "feedback": { + "error": { + "$value": "{color.red.400}" + }, + "success": { + "$value": "{color.green.400}" + }, + "info": { + "$value": "{color.blue.400}" + } + }, + "interactive": { + "base": { + "$value": "{color.blue.400}" + }, + "active": { + "$value": "{color.purple.400}" + }, + "secondary": { + "$value": "{color.gray.400}" + }, + "disabled": { + "$value": "{color.gray.600}" + } + }, + "ui": { + "primary": { + "base": { + "$value": "{color.gray.0}" + }, + "inverted": { + "$value": "{color.gray.950}" + } + }, + "secondary": { + "$value": "{color.gray.400}" + } + }, + "field": { + "placeholder": { + "$value": "{color.gray.400}" + } + }, + "product": { + "beta": { + "$value": "{color.purple.400}" + } + }, + "code": { + "function": { + "$value": "{color.brand.purple.base}" + }, + "tag": { + "$value": "{color.brand.orange.base}" + }, + "string": { + "$value": "{color.brand.cyan.light}" + }, + "base": { + "$value": "{color.gray.200}" + }, + "keyword": { + "$value": "{color.brand.pink.light}" + }, + "title": { + "$value": "{color.brand.orange.light}" + }, + "number": { + "$value": "{color.brand.blue.light}" + } + } + } + } +} diff --git a/packages/tokens/src/color-aliases.json b/packages/tokens/tokens/color-aliases.default.json similarity index 51% rename from packages/tokens/src/color-aliases.json rename to packages/tokens/tokens/color-aliases.default.json index 4b9cf9a7d..465e032e1 100644 --- a/packages/tokens/src/color-aliases.json +++ b/packages/tokens/tokens/color-aliases.default.json @@ -7,35 +7,28 @@ "$value": "{color.gray.800}" }, "error": { - "$value": "{color.red.50}", - "dark": "{color.red.900}" + "$value": "{color.red.50}" }, "info": { - "$value": "{color.blue.50}", - "dark": "{color.blue.900}" + "$value": "{color.blue.50}" }, "success": { - "$value": "{color.green.50}", - "dark": "{color.green.900}" + "$value": "{color.green.50}" } }, "interactive": { "primary": { "base": { - "$value": "{color.blue.500}", - "dark": "{color.blue.600}" + "$value": "{color.blue.500}" }, "active": { - "$value": "{color.blue.500}", - "dark": "{color.blue.600}" + "$value": "{color.blue.500}" }, "focus": { - "$value": "{color.blue.600}", - "dark": "{color.blue.500}" + "$value": "{color.blue.600}" }, "hover": { - "$value": "{color.blue.600}", - "dark": "{color.blue.500}" + "$value": "{color.blue.600}" } }, "secondary": { @@ -46,12 +39,10 @@ "$value": "{color.bg.ui.primary}" }, "focus": { - "$value": "{color.gray.50}", - "dark": "{color.gray.800}" + "$value": "{color.gray.50}" }, "hover": { - "$value": "{color.gray.50}", - "dark": "{color.gray.800}" + "$value": "{color.gray.50}" } }, "tertiary": { @@ -62,57 +53,45 @@ "$value": "transparent" }, "focus": { - "$value": "{color.gray.50}", - "dark": "{color.gray.800}" + "$value": "{color.gray.50}" }, "hover": { - "$value": "{color.gray.50}", - "dark": "{color.gray.800}" + "$value": "{color.gray.50}" } }, "destructive": { "base": { - "$value": "{color.red.500}", - "dark": "{color.red.600}" + "$value": "{color.red.500}" }, "active": { - "$value": "{color.red.500}", - "dark": "{color.red.600}" + "$value": "{color.red.500}" }, "focus": { - "$value": "{color.red.600}", - "dark": "{color.red.500}" + "$value": "{color.red.600}" }, "hover": { - "$value": "{color.red.600}", - "dark": "{color.red.500}" + "$value": "{color.red.600}" } }, "disabled": { - "$value": "{color.gray.100}", - "dark": "{color.gray.800}" + "$value": "{color.gray.100}" }, "link": { - "$value": "{color.blue.50}", - "dark": "#4761FF33" + "$value": "{color.blue.50}" }, "selected": { - "$value": "{color.blue.0}", - "dark": "{color.blue.950}" + "$value": "{color.blue.0}" } }, "ui": { "primary": { - "$value": "{color.white.950}", - "dark": "{color.gray.950}" + "$value": "{color.white.950}" }, "secondary": { - "$value": "{color.gray.0}", - "dark": "{color.gray.900}" + "$value": "{color.gray.0}" }, "tertiary": { - "$value": "{color.gray.50}", - "dark": "{color.gray.800}" + "$value": "{color.gray.50}" } }, "overlay": { @@ -120,14 +99,12 @@ "$value": "{color.bg.ui.primary}" }, "secondary": { - "$value": "{color.bg.ui.primary}", - "dark": "{color.bg.ui.secondary}" + "$value": "{color.bg.ui.primary}" } }, "field": { "base": { - "$value": "{color.bg.ui.primary}", - "dark": "{color.bg.ui.secondary}" + "$value": "{color.bg.ui.primary}" }, "disabled": { "$value": "{color.bg.ui.tertiary}" @@ -135,28 +112,23 @@ }, "product": { "beta": { - "$value": "{color.purple.100}", - "dark": "{color.purple.900}" + "$value": "{color.purple.100}" }, "federal": { - "$value": "{color.brand.yellow.base}", - "dark": "{color.brand.yellow.dark}" + "$value": "{color.brand.yellow.base}" } } }, "border": { "feedback": { "error": { - "$value": "{color.red.500}", - "dark": "{color.red.400}" + "$value": "{color.red.500}" }, "info": { - "$value": "{color.blue.500}", - "dark": "{color.blue.400}" + "$value": "{color.blue.500}" }, "success": { - "$value": "{color.green.500}", - "dark": "{color.green.400}" + "$value": "{color.green.500}" } }, "field": { @@ -164,12 +136,10 @@ "$value": "{color.border.ui.primary}" }, "active": { - "$value": "{color.blue.500}", - "dark": "{color.blue.400}" + "$value": "{color.blue.500}" }, "focus": { - "$value": "{color.blue.500}", - "dark": "{color.blue.400}" + "$value": "{color.blue.500}" }, "error": { "$value": "{color.border.feedback.error}" @@ -180,8 +150,7 @@ }, "interactive": { "focus": { - "$value": "{color.blue.500}", - "dark": "{color.blue.400}" + "$value": "{color.blue.500}" }, "primary": { "base": { @@ -218,18 +187,15 @@ "$value": "transparent" }, "selected": { - "$value": "{color.blue.500}", - "dark": "{color.blue.400}" + "$value": "{color.blue.500}" } }, "ui": { "primary": { - "$value": "{color.gray.100}", - "dark": "{color.gray.700}" + "$value": "{color.gray.100}" }, "secondary": { - "$value": "{color.gray.50}", - "dark": "{color.gray.800}" + "$value": "{color.gray.50}" } } }, @@ -255,8 +221,7 @@ }, "ui": { "primary": { - "$value": "{color.gray.700}", - "dark": "{color.gray.200}" + "$value": "{color.gray.700}" }, "secondary": { "$value": "{color.gray.500}" @@ -264,30 +229,25 @@ }, "field": { "base": { - "$value": "{color.gray.600}", - "dark": "{color.gray.400}" + "$value": "{color.gray.600}" } } }, "shadow": { "interactive": { "focus": { - "$value": "{color.blue.600}", - "dark": "{color.blue.400}" + "$value": "{color.blue.600}" }, "primary": { - "$value": "{color.white.950}", - "dark": "{color.gray.950}" + "$value": "{color.white.950}" } }, "ui": { "primary": { - "$value": "{color.black.50}", - "dark": "{color.black.200}" + "$value": "{color.black.50}" }, "secondary": { - "$value": "{color.black.0}", - "dark": "{color.black.100}" + "$value": "{color.black.0}" } } }, @@ -297,26 +257,21 @@ "$value": "{color.text.ui.primary.base}" }, "error": { - "$value": "{color.red.600}", - "dark": "{color.red.400}" + "$value": "{color.red.600}" }, "success": { - "$value": "{color.green.600}", - "dark": "{color.green.400}" + "$value": "{color.green.600}" }, "info": { - "$value": "{color.blue.600}", - "dark": "{color.blue.400}" + "$value": "{color.blue.600}" } }, "interactive": { "base": { - "$value": "{color.blue.600}", - "dark": "{color.blue.400}" + "$value": "{color.blue.600}" }, "active": { - "$value": "{color.purple.700}", - "dark": "{color.purple.400}" + "$value": "{color.purple.700}" }, "primary": { "base": { @@ -333,31 +288,26 @@ } }, "secondary": { - "$value": "{color.gray.600}", - "dark": "{color.gray.400}" + "$value": "{color.gray.600}" }, "destructive": { "$value": "{color.text.feedback.error}" }, "disabled": { - "$value": "{color.gray.500}", - "dark": "{color.gray.600}" + "$value": "{color.gray.500}" } }, "ui": { "primary": { "base": { - "$value": "{color.gray.900}", - "dark": "{color.gray.0}" + "$value": "{color.gray.900}" }, "inverted": { - "$value": "{color.white.950}", - "dark": "{color.gray.950}" + "$value": "{color.white.950}" } }, "secondary": { - "$value": "{color.gray.600}", - "dark": "{color.gray.400}" + "$value": "{color.gray.600}" } }, "field": { @@ -365,14 +315,12 @@ "$value": "{color.gray.500}" }, "placeholder": { - "$value": "{color.gray.500}", - "dark": "{color.gray.400}" + "$value": "{color.gray.500}" } }, "product": { "beta": { - "$value": "{color.purple.600}", - "dark": "{color.purple.400}" + "$value": "{color.purple.600}" }, "federal": { "$value": "{color.gray.950}" @@ -380,35 +328,28 @@ }, "code": { "function": { - "$value": "{color.brand.purple.dark}", - "dark": "{color.brand.purple.base}" + "$value": "{color.brand.purple.dark}" }, "tag": { - "$value": "{color.brand.orange.dark}", - "dark": "{color.brand.orange.base}" + "$value": "{color.brand.orange.dark}" }, "string": { - "$value": "{color.brand.cyan.dark}", - "dark": "{color.brand.cyan.light}" + "$value": "{color.brand.cyan.dark}" }, "comment": { "$value": "{color.gray.400}" }, "base": { - "$value": "{color.gray.600}", - "dark": "{color.gray.200}" + "$value": "{color.gray.600}" }, "keyword": { - "$value": "{color.brand.pink.base}", - "dark": "{color.brand.pink.light}" + "$value": "{color.brand.pink.base}" }, "title": { - "$value": "{color.brand.orange.base}", - "dark": "{color.brand.orange.light}" + "$value": "{color.brand.orange.base}" }, "number": { - "$value": "{color.brand.blue.dark}", - "dark": "{color.brand.blue.light}" + "$value": "{color.brand.blue.dark}" } } } diff --git a/packages/tokens/src/color-primitives.json b/packages/tokens/tokens/color-primitives.json similarity index 100% rename from packages/tokens/src/color-primitives.json rename to packages/tokens/tokens/color-primitives.json diff --git a/packages/tokens/src/duration.json b/packages/tokens/tokens/duration.json similarity index 100% rename from packages/tokens/src/duration.json rename to packages/tokens/tokens/duration.json diff --git a/packages/tokens/src/font.json b/packages/tokens/tokens/font.json similarity index 97% rename from packages/tokens/src/font.json rename to packages/tokens/tokens/font.json index 335722ca4..599190f93 100644 --- a/packages/tokens/src/font.json +++ b/packages/tokens/tokens/font.json @@ -35,7 +35,7 @@ "$value": "{size.44}" }, "800": { - "$value": "3.75rem" + "$value": 60 } }, "fontWeight": { diff --git a/packages/tokens/src/line-height.json b/packages/tokens/tokens/line-height.json similarity index 100% rename from packages/tokens/src/line-height.json rename to packages/tokens/tokens/line-height.json diff --git a/packages/tokens/tokens/size.json b/packages/tokens/tokens/size.json new file mode 100644 index 000000000..ce7747252 --- /dev/null +++ b/packages/tokens/tokens/size.json @@ -0,0 +1,155 @@ +{ + "size": { + "$type": "dimension", + "0": { + "$value": 0 + }, + "1": { + "$value": 1 + }, + "2": { + "$value": 2 + }, + "3": { + "$value": 3 + }, + "4": { + "$value": 4 + }, + "6": { + "$value": 6 + }, + "8": { + "$value": 8 + }, + "10": { + "$value": 10 + }, + "11": { + "$value": 11 + }, + "12": { + "$value": 12 + }, + "13": { + "$value": 13 + }, + "14": { + "$value": 14 + }, + "15": { + "$value": 15 + }, + "16": { + "$value": 16 + }, + "18": { + "$value": 18 + }, + "20": { + "$value": 20 + }, + "24": { + "$value": 24 + }, + "28": { + "$value": 28 + }, + "32": { + "$value": 32 + }, + "36": { + "$value": 36 + }, + "40": { + "$value": 40 + }, + "44": { + "$value": 44 + }, + "48": { + "$value": 48 + }, + "56": { + "$value": 56 + }, + "64": { + "$value": 64 + }, + "72": { + "$value": 72 + }, + "80": { + "$value": 80 + }, + "96": { + "$value": 96 + }, + "112": { + "$value": 112 + }, + "128": { + "$value": 128 + }, + "144": { + "$value": 144 + }, + "160": { + "$value": 160 + }, + "176": { + "$value": 176 + }, + "192": { + "$value": 192 + }, + "208": { + "$value": 208 + }, + "224": { + "$value": 224 + }, + "240": { + "$value": 240 + }, + "256": { + "$value": 256 + }, + "320": { + "$value": 320 + }, + "400": { + "$value": 400 + }, + "480": { + "$value": 480 + }, + "560": { + "$value": 560 + }, + "640": { + "$value": 640 + }, + "720": { + "$value": 720 + }, + "800": { + "$value": 800 + }, + "960": { + "$value": 960 + }, + "1120": { + "$value": 1120 + }, + "1200": { + "$value": 1200 + }, + "1280": { + "$value": 1280 + }, + "1440": { + "$value": 1440 + } + } +} diff --git a/packages/tokens/src/spacing.json b/packages/tokens/tokens/spacing.json similarity index 100% rename from packages/tokens/src/spacing.json rename to packages/tokens/tokens/spacing.json diff --git a/packages/tokens/src/typography.json b/packages/tokens/tokens/typography.json similarity index 100% rename from packages/tokens/src/typography.json rename to packages/tokens/tokens/typography.json diff --git a/packages/tokens/src/viewport.json b/packages/tokens/tokens/viewport.json similarity index 80% rename from packages/tokens/src/viewport.json rename to packages/tokens/tokens/viewport.json index 96afa65c2..995c07bdf 100644 --- a/packages/tokens/src/viewport.json +++ b/packages/tokens/tokens/viewport.json @@ -5,10 +5,10 @@ "$value": "{size.0}" }, "tablet": { - "$value": "740px" + "$value": 740 }, "desktop": { - "$value": "992px" + "$value": 992 }, "wide": { "$value": "{size.1200}" diff --git a/packages/tokens/src/z-index.json b/packages/tokens/tokens/z-index.json similarity index 100% rename from packages/tokens/src/z-index.json rename to packages/tokens/tokens/z-index.json diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 089d3dc72..0c3f24dba 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -38,7 +38,7 @@ importers: version: 1.49.0 '@storybook/addon-a11y': specifier: ^8.5.0 - version: 8.5.0(storybook@8.5.0(prettier@3.4.1))(vitest@3.0.0) + version: 8.5.0(storybook@8.5.0(prettier@3.4.1))(vitest@3.0.0(@types/node@22.10.1)(@vitest/ui@3.0.0)(jiti@1.21.6)(jsdom@26.0.0)(less@4.2.0)(lightningcss@1.29.1)(sass@1.80.5)(stylus@0.62.0)(tsx@4.19.2)(yaml@2.6.1)) '@storybook/addon-designs': specifier: ^8.0.3 version: 8.0.4(@storybook/blocks@8.5.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(storybook@8.5.0(prettier@3.4.1)))(@storybook/components@8.5.0(storybook@8.5.0(prettier@3.4.1)))(@storybook/theming@8.5.0(storybook@8.5.0(prettier@3.4.1)))(react-dom@19.0.0(react@19.0.0))(react@19.0.0) @@ -107,7 +107,7 @@ importers: version: 3.7.2(@swc/helpers@0.5.13)(vite@6.0.2(@types/node@22.10.1)(jiti@1.21.6)(less@4.2.0)(lightningcss@1.29.1)(sass@1.80.5)(stylus@0.62.0)(tsx@4.19.2)(yaml@2.6.1)) '@vitest/coverage-v8': specifier: ^3.0.0 - version: 3.0.0(vitest@3.0.0) + version: 3.0.0(vitest@3.0.0(@types/node@22.10.1)(@vitest/ui@3.0.0)(jiti@1.21.6)(jsdom@26.0.0)(less@4.2.0)(lightningcss@1.29.1)(sass@1.80.5)(stylus@0.62.0)(tsx@4.19.2)(yaml@2.6.1)) '@vitest/ui': specifier: ^3.0.0 version: 3.0.0(vitest@3.0.0) @@ -1226,9 +1226,6 @@ importers: json-to-ts: specifier: ^2.1.0 version: 2.1.0 - prettier: - specifier: ^3.4.1 - version: 3.4.1 style-dictionary: specifier: ^4.3.0 version: 4.3.0 @@ -8515,13 +8512,13 @@ snapshots: '@sinclair/typebox@0.27.8': {} - '@storybook/addon-a11y@8.5.0(storybook@8.5.0(prettier@3.4.1))(vitest@3.0.0)': + '@storybook/addon-a11y@8.5.0(storybook@8.5.0(prettier@3.4.1))(vitest@3.0.0(@types/node@22.10.1)(@vitest/ui@3.0.0)(jiti@1.21.6)(jsdom@26.0.0)(less@4.2.0)(lightningcss@1.29.1)(sass@1.80.5)(stylus@0.62.0)(tsx@4.19.2)(yaml@2.6.1))': dependencies: '@storybook/addon-highlight': 8.5.0(storybook@8.5.0(prettier@3.4.1)) '@storybook/test': 8.5.0(storybook@8.5.0(prettier@3.4.1)) axe-core: 4.10.2 storybook: 8.5.0(prettier@3.4.1) - vitest-axe: 0.1.0(vitest@3.0.0) + vitest-axe: 0.1.0(vitest@3.0.0(@types/node@22.10.1)(@vitest/ui@3.0.0)(jiti@1.21.6)(jsdom@26.0.0)(less@4.2.0)(lightningcss@1.29.1)(sass@1.80.5)(stylus@0.62.0)(tsx@4.19.2)(yaml@2.6.1)) transitivePeerDependencies: - vitest @@ -9095,7 +9092,7 @@ snapshots: transitivePeerDependencies: - '@swc/helpers' - '@vitest/coverage-v8@3.0.0(vitest@3.0.0)': + '@vitest/coverage-v8@3.0.0(vitest@3.0.0(@types/node@22.10.1)(@vitest/ui@3.0.0)(jiti@1.21.6)(jsdom@26.0.0)(less@4.2.0)(lightningcss@1.29.1)(sass@1.80.5)(stylus@0.62.0)(tsx@4.19.2)(yaml@2.6.1))': dependencies: '@ampproject/remapping': 2.3.0 '@bcoe/v8-coverage': 1.0.2 @@ -12382,7 +12379,7 @@ snapshots: tsx: 4.19.2 yaml: 2.6.1 - vitest-axe@0.1.0(vitest@3.0.0): + vitest-axe@0.1.0(vitest@3.0.0(@types/node@22.10.1)(@vitest/ui@3.0.0)(jiti@1.21.6)(jsdom@26.0.0)(less@4.2.0)(lightningcss@1.29.1)(sass@1.80.5)(stylus@0.62.0)(tsx@4.19.2)(yaml@2.6.1)): dependencies: aria-query: 5.3.2 axe-core: 4.10.2