From 9bd8a1a295cf7eab443bbb42c8a4bae62ac72ab5 Mon Sep 17 00:00:00 2001 From: Robb Niznik Date: Mon, 13 Jan 2025 16:46:23 -0500 Subject: [PATCH 1/9] chore: move to tokens dir --- packages/tokens/build.ts | 8 ++++---- packages/tokens/{src => tokens}/asset.json | 0 packages/tokens/{src => tokens}/border.json | 0 packages/tokens/{src => tokens}/color-aliases.json | 0 packages/tokens/{src => tokens}/color-primitives.json | 0 packages/tokens/{src => tokens}/duration.json | 0 packages/tokens/{src => tokens}/font.json | 0 packages/tokens/{src => tokens}/line-height.json | 0 packages/tokens/{src => tokens}/size.json | 0 packages/tokens/{src => tokens}/spacing.json | 0 packages/tokens/{src => tokens}/typography.json | 0 packages/tokens/{src => tokens}/viewport.json | 0 packages/tokens/{src => tokens}/z-index.json | 0 13 files changed, 4 insertions(+), 4 deletions(-) rename packages/tokens/{src => tokens}/asset.json (100%) rename packages/tokens/{src => tokens}/border.json (100%) rename packages/tokens/{src => tokens}/color-aliases.json (100%) rename packages/tokens/{src => tokens}/color-primitives.json (100%) rename packages/tokens/{src => tokens}/duration.json (100%) rename packages/tokens/{src => tokens}/font.json (100%) rename packages/tokens/{src => tokens}/line-height.json (100%) rename packages/tokens/{src => tokens}/size.json (100%) rename packages/tokens/{src => tokens}/spacing.json (100%) rename packages/tokens/{src => tokens}/typography.json (100%) rename packages/tokens/{src => tokens}/viewport.json (100%) rename packages/tokens/{src => tokens}/z-index.json (100%) diff --git a/packages/tokens/build.ts b/packages/tokens/build.ts index 706f3d885..8e9eb1714 100644 --- a/packages/tokens/build.ts +++ b/packages/tokens/build.ts @@ -5,7 +5,7 @@ import StyleDictionary from 'style-dictionary'; import { createPropertyFormatter, fileHeader, minifyDictionary } from 'style-dictionary/utils'; const sd = new StyleDictionary({ - source: ['src/*.json'], + source: ['tokens/*.json'], platforms: { css: { prefix: 'lp', @@ -20,17 +20,17 @@ const sd = new StyleDictionary({ { destination: 'index.css', format: 'css/variables', - filter: (token) => token.filePath !== 'src/color-aliases.json', + filter: (token) => token.filePath !== 'tokens/color-aliases.json', }, { destination: 'themes.css', format: 'custom/css', - filter: (token) => token.filePath === 'src/color-aliases.json', + filter: (token) => token.filePath === 'tokens/color-aliases.json', }, { 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', 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/src/color-aliases.json b/packages/tokens/tokens/color-aliases.json similarity index 100% rename from packages/tokens/src/color-aliases.json rename to packages/tokens/tokens/color-aliases.json 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 100% rename from packages/tokens/src/font.json rename to packages/tokens/tokens/font.json 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/src/size.json b/packages/tokens/tokens/size.json similarity index 100% rename from packages/tokens/src/size.json rename to packages/tokens/tokens/size.json 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 100% rename from packages/tokens/src/viewport.json rename to packages/tokens/tokens/viewport.json 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 From 734a636b1ca23e2d4ce8003f4d91deff7fa8ca3b Mon Sep 17 00:00:00 2001 From: Robb Niznik Date: Tue, 14 Jan 2025 13:21:38 -0500 Subject: [PATCH 2/9] refactor: break out themes --- packages/tokens/build.ts | 79 +++--- .../tokens/tokens/color-aliases.dark.json | 242 ++++++++++++++++++ ...liases.json => color-aliases.default.json} | 177 +++++-------- 3 files changed, 346 insertions(+), 152 deletions(-) create mode 100644 packages/tokens/tokens/color-aliases.dark.json rename packages/tokens/tokens/{color-aliases.json => color-aliases.default.json} (51%) diff --git a/packages/tokens/build.ts b/packages/tokens/build.ts index 8e9eb1714..c393f413d 100644 --- a/packages/tokens/build.ts +++ b/packages/tokens/build.ts @@ -1,8 +1,44 @@ -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 { fileHeader, minifyDictionary } from 'style-dictionary/utils'; + +const themes = ['dark', 'default'].map( + (theme) => + ({ + source: ['tokens/color-primitives.json', `tokens/*.${theme}.json`], + platforms: { + css: { + prefix: 'lp', + transformGroup: 'css', + transforms: ['color/rgb'], + options: { + outputReferences: true, + usesDtcg: true, + }, + files: [ + { + destination: `${theme}.css`, + format: 'css/variables', + options: { + selector: theme === 'default' ? ':root, [data-theme]' : `[data-theme='${theme}']`, + }, + filter: (token) => token.filePath.includes(theme), + }, + ], + }, + }, + }) satisfies Config, +); + +const runSD = async (cfg: Config) => { + const sd = new StyleDictionary(cfg); + const [file] = await sd.formatPlatform('css'); + return [file.destination, file.output]; +}; + +const outputs = Object.fromEntries(await Promise.all(themes.map(runSD))); const sd = new StyleDictionary({ source: ['tokens/*.json'], @@ -20,12 +56,11 @@ const sd = new StyleDictionary({ { destination: 'index.css', format: 'css/variables', - filter: (token) => token.filePath !== 'tokens/color-aliases.json', + filter: (token) => !token.filePath.includes('aliases'), }, { destination: 'themes.css', - format: 'custom/css', - filter: (token) => token.filePath === 'tokens/color-aliases.json', + format: 'css/themes', }, { destination: 'media-queries.css', @@ -95,36 +130,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 = outputs['default.css']; + const dark = outputs['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/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/tokens/color-aliases.json b/packages/tokens/tokens/color-aliases.default.json similarity index 51% rename from packages/tokens/tokens/color-aliases.json rename to packages/tokens/tokens/color-aliases.default.json index 4b9cf9a7d..465e032e1 100644 --- a/packages/tokens/tokens/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}" } } } From 4d852ebc3ef28a51114c10320920e723e5c5217c Mon Sep 17 00:00:00 2001 From: Robb Niznik Date: Wed, 15 Jan 2025 11:31:23 -0500 Subject: [PATCH 3/9] refactor: unitless sizes --- packages/tokens/build.ts | 3 +- packages/tokens/tokens/size.json | 100 +++++++++++++-------------- packages/tokens/tokens/viewport.json | 4 +- 3 files changed, 54 insertions(+), 53 deletions(-) diff --git a/packages/tokens/build.ts b/packages/tokens/build.ts index c393f413d..36127fcb5 100644 --- a/packages/tokens/build.ts +++ b/packages/tokens/build.ts @@ -45,8 +45,9 @@ const sd = new StyleDictionary({ platforms: { css: { prefix: 'lp', + basePxFontSize: 16, transformGroup: 'css', - transforms: ['name/kebab', 'time/seconds', 'size/rem', 'color/rgb', 'attribute/font'], + transforms: ['name/kebab', 'time/seconds', 'size/pxToRem', 'color/rgb', 'attribute/font'], buildPath: 'dist/', options: { outputReferences: true, diff --git a/packages/tokens/tokens/size.json b/packages/tokens/tokens/size.json index ab2fa25c7..ce7747252 100644 --- a/packages/tokens/tokens/size.json +++ b/packages/tokens/tokens/size.json @@ -2,154 +2,154 @@ "size": { "$type": "dimension", "0": { - "$value": "0rem" + "$value": 0 }, "1": { - "$value": "0.0625rem" + "$value": 1 }, "2": { - "$value": "0.125rem" + "$value": 2 }, "3": { - "$value": "0.1875rem" + "$value": 3 }, "4": { - "$value": "0.25rem" + "$value": 4 }, "6": { - "$value": "0.375rem" + "$value": 6 }, "8": { - "$value": "0.5rem" + "$value": 8 }, "10": { - "$value": "0.625rem" + "$value": 10 }, "11": { - "$value": "0.6875rem" + "$value": 11 }, "12": { - "$value": "0.75rem" + "$value": 12 }, "13": { - "$value": "0.8125rem" + "$value": 13 }, "14": { - "$value": "0.875rem" + "$value": 14 }, "15": { - "$value": "0.9375rem" + "$value": 15 }, "16": { - "$value": "1rem" + "$value": 16 }, "18": { - "$value": "1.125rem" + "$value": 18 }, "20": { - "$value": "1.25rem" + "$value": 20 }, "24": { - "$value": "1.5rem" + "$value": 24 }, "28": { - "$value": "1.75rem" + "$value": 28 }, "32": { - "$value": "2rem" + "$value": 32 }, "36": { - "$value": "2.25rem" + "$value": 36 }, "40": { - "$value": "2.5rem" + "$value": 40 }, "44": { - "$value": "2.75rem" + "$value": 44 }, "48": { - "$value": "3rem" + "$value": 48 }, "56": { - "$value": "3.5rem" + "$value": 56 }, "64": { - "$value": "4rem" + "$value": 64 }, "72": { - "$value": "4.5rem" + "$value": 72 }, "80": { - "$value": "5rem" + "$value": 80 }, "96": { - "$value": "6rem" + "$value": 96 }, "112": { - "$value": "7rem" + "$value": 112 }, "128": { - "$value": "8rem" + "$value": 128 }, "144": { - "$value": "9rem" + "$value": 144 }, "160": { - "$value": "10rem" + "$value": 160 }, "176": { - "$value": "11rem" + "$value": 176 }, "192": { - "$value": "12rem" + "$value": 192 }, "208": { - "$value": "13rem" + "$value": 208 }, "224": { - "$value": "14rem" + "$value": 224 }, "240": { - "$value": "15rem" + "$value": 240 }, "256": { - "$value": "16rem" + "$value": 256 }, "320": { - "$value": "20rem" + "$value": 320 }, "400": { - "$value": "25rem" + "$value": 400 }, "480": { - "$value": "30rem" + "$value": 480 }, "560": { - "$value": "35rem" + "$value": 560 }, "640": { - "$value": "40rem" + "$value": 640 }, "720": { - "$value": "45rem" + "$value": 720 }, "800": { - "$value": "50rem" + "$value": 800 }, "960": { - "$value": "60rem" + "$value": 960 }, "1120": { - "$value": "70rem" + "$value": 1120 }, "1200": { - "$value": "75rem" + "$value": 1200 }, "1280": { - "$value": "80rem" + "$value": 1280 }, "1440": { - "$value": "90rem" + "$value": 1440 } } } diff --git a/packages/tokens/tokens/viewport.json b/packages/tokens/tokens/viewport.json index 96afa65c2..995c07bdf 100644 --- a/packages/tokens/tokens/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}" From 422aa3fea01e30b23602262d51b575ed22ee6866 Mon Sep 17 00:00:00 2001 From: Robb Niznik Date: Wed, 15 Jan 2025 13:25:08 -0500 Subject: [PATCH 4/9] fix: transforms --- packages/tokens/build.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/tokens/build.ts b/packages/tokens/build.ts index 36127fcb5..9e8716a5b 100644 --- a/packages/tokens/build.ts +++ b/packages/tokens/build.ts @@ -47,7 +47,7 @@ const sd = new StyleDictionary({ prefix: 'lp', basePxFontSize: 16, transformGroup: 'css', - transforms: ['name/kebab', 'time/seconds', 'size/pxToRem', 'color/rgb', 'attribute/font'], + transforms: ['name/kebab', 'size/pxToRem', 'color/rgb', 'attribute/font'], buildPath: 'dist/', options: { outputReferences: true, @@ -77,7 +77,9 @@ const sd = new StyleDictionary({ actions: ['copy_assets'], }, js: { + basePxFontSize: 16, transformGroup: 'js', + transforms: ['size/pxToRem', 'color/rgb'], buildPath: 'dist/', options: { outputReferences: true, @@ -113,9 +115,10 @@ const sd = new StyleDictionary({ ], }, vscode: { + basePxFontSize: 16, buildPath: 'dist/', transformGroup: 'css', - transforms: ['name/kebab', 'color/rgb'], + transforms: ['name/kebab', 'size/pxToRem', 'color/rgb'], options: { outputReferences: true, usesDtcg: true, From 2210a38061b9c33936b2b9d8d4ecc6b15b292798 Mon Sep 17 00:00:00 2001 From: Robb Niznik Date: Thu, 16 Jan 2025 16:54:40 -0500 Subject: [PATCH 5/9] chore: use enums --- packages/tokens/build.ts | 28 +++++++++++++++++----------- 1 file changed, 17 insertions(+), 11 deletions(-) diff --git a/packages/tokens/build.ts b/packages/tokens/build.ts index 9e8716a5b..6dda07ff8 100644 --- a/packages/tokens/build.ts +++ b/packages/tokens/build.ts @@ -2,6 +2,7 @@ import type { Config, TransformedToken } from 'style-dictionary/types'; import JsonToTS from 'json-to-ts'; import StyleDictionary from 'style-dictionary'; +import { formats, transformGroups, transforms } from 'style-dictionary/enums'; import { fileHeader, minifyDictionary } from 'style-dictionary/utils'; const themes = ['dark', 'default'].map( @@ -11,8 +12,8 @@ const themes = ['dark', 'default'].map( platforms: { css: { prefix: 'lp', - transformGroup: 'css', - transforms: ['color/rgb'], + transformGroup: transformGroups.css, + transforms: [transforms.colorRgb], options: { outputReferences: true, usesDtcg: true, @@ -20,7 +21,7 @@ const themes = ['dark', 'default'].map( files: [ { destination: `${theme}.css`, - format: 'css/variables', + format: formats.cssVariables, options: { selector: theme === 'default' ? ':root, [data-theme]' : `[data-theme='${theme}']`, }, @@ -46,8 +47,13 @@ const sd = new StyleDictionary({ css: { prefix: 'lp', basePxFontSize: 16, - transformGroup: 'css', - transforms: ['name/kebab', 'size/pxToRem', 'color/rgb', 'attribute/font'], + transformGroup: transformGroups.css, + transforms: [ + transforms.nameKebab, + transforms.sizePxToRem, + transforms.colorRgb, + 'attribute/font', + ], buildPath: 'dist/', options: { outputReferences: true, @@ -56,7 +62,7 @@ const sd = new StyleDictionary({ files: [ { destination: 'index.css', - format: 'css/variables', + format: formats.cssVariables, filter: (token) => !token.filePath.includes('aliases'), }, { @@ -78,8 +84,8 @@ const sd = new StyleDictionary({ }, js: { basePxFontSize: 16, - transformGroup: 'js', - transforms: ['size/pxToRem', 'color/rgb'], + transformGroup: transformGroups.js, + transforms: [transforms.sizePxToRem, transforms.colorRgb], buildPath: 'dist/', options: { outputReferences: true, @@ -102,7 +108,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, @@ -117,8 +123,8 @@ const sd = new StyleDictionary({ vscode: { basePxFontSize: 16, buildPath: 'dist/', - transformGroup: 'css', - transforms: ['name/kebab', 'size/pxToRem', 'color/rgb'], + transformGroup: transformGroups.css, + transforms: [transforms.nameKebab, transforms.sizePxToRem, transforms.colorRgb], options: { outputReferences: true, usesDtcg: true, From 4f6860a9f3b4639985d66bd2096efad3f52d9865 Mon Sep 17 00:00:00 2001 From: Robb Niznik Date: Fri, 17 Jan 2025 13:25:53 -0500 Subject: [PATCH 6/9] feat: add tests --- .../__snapshots__/tokens.spec.ts.snap | 174 ++++++++++++++++++ packages/tokens/__tests__/tokens.spec.ts | 57 ++++++ packages/tokens/package.json | 4 +- packages/tokens/{ => src}/build.ts | 36 +--- packages/tokens/src/themes.ts | 31 ++++ 5 files changed, 270 insertions(+), 32 deletions(-) create mode 100644 packages/tokens/__tests__/__snapshots__/tokens.spec.ts.snap create mode 100644 packages/tokens/__tests__/tokens.spec.ts rename packages/tokens/{ => src}/build.ts (87%) create mode 100644 packages/tokens/src/themes.ts 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..c75b4201b 100644 --- a/packages/tokens/package.json +++ b/packages/tokens/package.json @@ -38,10 +38,10 @@ "./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", diff --git a/packages/tokens/build.ts b/packages/tokens/src/build.ts similarity index 87% rename from packages/tokens/build.ts rename to packages/tokens/src/build.ts index 6dda07ff8..be15c5e36 100644 --- a/packages/tokens/build.ts +++ b/packages/tokens/src/build.ts @@ -5,33 +5,9 @@ import StyleDictionary from 'style-dictionary'; import { formats, transformGroups, transforms } from 'style-dictionary/enums'; import { fileHeader, minifyDictionary } from 'style-dictionary/utils'; -const themes = ['dark', 'default'].map( - (theme) => - ({ - 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), - }, - ], - }, - }, - }) satisfies Config, -); +import { css, themes } from './themes'; + +const configs = themes.map(css); const runSD = async (cfg: Config) => { const sd = new StyleDictionary(cfg); @@ -39,7 +15,7 @@ const runSD = async (cfg: Config) => { return [file.destination, file.output]; }; -const outputs = Object.fromEntries(await Promise.all(themes.map(runSD))); +const aliasTokens = Object.fromEntries(await Promise.all(configs.map(runSD))); const sd = new StyleDictionary({ source: ['tokens/*.json'], @@ -142,8 +118,8 @@ const sd = new StyleDictionary({ sd.registerFormat({ name: 'css/themes', format: async () => { - const light = outputs['default.css']; - const dark = outputs['dark.css']; + const light = aliasTokens['default.css']; + const dark = aliasTokens['dark.css']; return `${light}\n${dark}`; }, 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), + }, + ], + }, + }, +}); From 2c159bf81361a9c1c446de51aaf10383fe6be425 Mon Sep 17 00:00:00 2001 From: Robb Niznik Date: Fri, 17 Jan 2025 13:37:43 -0500 Subject: [PATCH 7/9] fix: use number for size --- packages/tokens/tokens/font.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/tokens/tokens/font.json b/packages/tokens/tokens/font.json index 335722ca4..599190f93 100644 --- a/packages/tokens/tokens/font.json +++ b/packages/tokens/tokens/font.json @@ -35,7 +35,7 @@ "$value": "{size.44}" }, "800": { - "$value": "3.75rem" + "$value": 60 } }, "fontWeight": { From d3e3e974b6c6cfe9612cc0ed210121d58f0775d0 Mon Sep 17 00:00:00 2001 From: Robb Niznik Date: Fri, 17 Jan 2025 13:41:46 -0500 Subject: [PATCH 8/9] fix: update turbo externals --- .github/workflows/chromatic.yml | 2 +- CONTRIBUTING.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) 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/**" ``` --- From f091c2634ed16affd80c8ee482b20ea54cd0d07b Mon Sep 17 00:00:00 2001 From: Robb Niznik Date: Fri, 17 Jan 2025 14:00:22 -0500 Subject: [PATCH 9/9] chore: remove prettier --- packages/tokens/package.json | 1 - pnpm-lock.yaml | 15 ++++++--------- 2 files changed, 6 insertions(+), 10 deletions(-) diff --git a/packages/tokens/package.json b/packages/tokens/package.json index c75b4201b..2b631dffb 100644 --- a/packages/tokens/package.json +++ b/packages/tokens/package.json @@ -45,7 +45,6 @@ }, "devDependencies": { "json-to-ts": "^2.1.0", - "prettier": "^3.4.1", "style-dictionary": "^4.3.0", "tsx": "^4.19.0" } 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