From 45ddea20f6bb2dcab0aa0b6be229ca776220e4eb Mon Sep 17 00:00:00 2001 From: Ethan Gardner Date: Tue, 21 Jul 2026 14:25:52 -0400 Subject: [PATCH 1/2] restructure tokens into system, theme, and status convention to match the semantics of the docs --- build/css/{ => system}/breakpoints.css | 0 build/css/{colors.css => system/color.css} | 0 build/css/{ => system}/spacing.css | 0 build/scss/{ => system}/_breakpoints.scss | 0 .../scss/{_colors.scss => system/_color.scss} | 0 build/scss/{ => system}/_spacing.scss | 0 config/style-dictionary.config.js | 17 +- internals/token-helpers/index.test.ts | 44 ++ internals/token-helpers/index.ts | 14 +- package-lock.json | 505 ++++++++++++++++++ src/core/colors.css | 2 +- tokens/index.js | 16 +- .../{ => system}/breakpoints/breakpoints.json | 0 .../color}/black-transparent.json | 0 .../{colors => system/color}/blue-cool.json | 0 .../{colors => system/color}/blue-warm.json | 0 tokens/{colors => system/color}/blue.json | 0 tokens/{colors => system/color}/cyan.json | 0 tokens/{colors => system/color}/global.json | 0 tokens/{colors => system/color}/gold.json | 0 .../{colors => system/color}/gray-cool.json | 0 .../{colors => system/color}/gray-warm.json | 0 tokens/{colors => system/color}/gray.json | 0 .../{colors => system/color}/green-cool.json | 0 .../{colors => system/color}/green-warm.json | 0 tokens/{colors => system/color}/green.json | 0 .../{colors => system/color}/indigo-cool.json | 0 .../{colors => system/color}/indigo-warm.json | 0 tokens/{colors => system/color}/indigo.json | 0 tokens/{colors => system/color}/magenta.json | 0 .../{colors => system/color}/mint-cool.json | 0 tokens/{colors => system/color}/mint.json | 0 .../{colors => system/color}/orange-warm.json | 0 tokens/{colors => system/color}/orange.json | 0 tokens/{colors => system/color}/red-cool.json | 0 tokens/{colors => system/color}/red-warm.json | 0 tokens/{colors => system/color}/red.json | 0 .../{colors => system/color}/violet-warm.json | 0 tokens/{colors => system/color}/violet.json | 0 .../color}/white-transparent.json | 0 tokens/{colors => system/color}/yellow.json | 0 tokens/{ => system}/spacing/spacing.json | 0 42 files changed, 592 insertions(+), 6 deletions(-) rename build/css/{ => system}/breakpoints.css (100%) rename build/css/{colors.css => system/color.css} (100%) rename build/css/{ => system}/spacing.css (100%) rename build/scss/{ => system}/_breakpoints.scss (100%) rename build/scss/{_colors.scss => system/_color.scss} (100%) rename build/scss/{ => system}/_spacing.scss (100%) rename tokens/{ => system}/breakpoints/breakpoints.json (100%) rename tokens/{colors => system/color}/black-transparent.json (100%) rename tokens/{colors => system/color}/blue-cool.json (100%) rename tokens/{colors => system/color}/blue-warm.json (100%) rename tokens/{colors => system/color}/blue.json (100%) rename tokens/{colors => system/color}/cyan.json (100%) rename tokens/{colors => system/color}/global.json (100%) rename tokens/{colors => system/color}/gold.json (100%) rename tokens/{colors => system/color}/gray-cool.json (100%) rename tokens/{colors => system/color}/gray-warm.json (100%) rename tokens/{colors => system/color}/gray.json (100%) rename tokens/{colors => system/color}/green-cool.json (100%) rename tokens/{colors => system/color}/green-warm.json (100%) rename tokens/{colors => system/color}/green.json (100%) rename tokens/{colors => system/color}/indigo-cool.json (100%) rename tokens/{colors => system/color}/indigo-warm.json (100%) rename tokens/{colors => system/color}/indigo.json (100%) rename tokens/{colors => system/color}/magenta.json (100%) rename tokens/{colors => system/color}/mint-cool.json (100%) rename tokens/{colors => system/color}/mint.json (100%) rename tokens/{colors => system/color}/orange-warm.json (100%) rename tokens/{colors => system/color}/orange.json (100%) rename tokens/{colors => system/color}/red-cool.json (100%) rename tokens/{colors => system/color}/red-warm.json (100%) rename tokens/{colors => system/color}/red.json (100%) rename tokens/{colors => system/color}/violet-warm.json (100%) rename tokens/{colors => system/color}/violet.json (100%) rename tokens/{colors => system/color}/white-transparent.json (100%) rename tokens/{colors => system/color}/yellow.json (100%) rename tokens/{ => system}/spacing/spacing.json (100%) diff --git a/build/css/breakpoints.css b/build/css/system/breakpoints.css similarity index 100% rename from build/css/breakpoints.css rename to build/css/system/breakpoints.css diff --git a/build/css/colors.css b/build/css/system/color.css similarity index 100% rename from build/css/colors.css rename to build/css/system/color.css diff --git a/build/css/spacing.css b/build/css/system/spacing.css similarity index 100% rename from build/css/spacing.css rename to build/css/system/spacing.css diff --git a/build/scss/_breakpoints.scss b/build/scss/system/_breakpoints.scss similarity index 100% rename from build/scss/_breakpoints.scss rename to build/scss/system/_breakpoints.scss diff --git a/build/scss/_colors.scss b/build/scss/system/_color.scss similarity index 100% rename from build/scss/_colors.scss rename to build/scss/system/_color.scss diff --git a/build/scss/_spacing.scss b/build/scss/system/_spacing.scss similarity index 100% rename from build/scss/_spacing.scss rename to build/scss/system/_spacing.scss diff --git a/config/style-dictionary.config.js b/config/style-dictionary.config.js index b4550737..cef18c8c 100644 --- a/config/style-dictionary.config.js +++ b/config/style-dictionary.config.js @@ -17,15 +17,26 @@ StyleDictionary.registerTransform({ transform: getTokenValueWithUnit, }); +/** + * Builds a Style Dictionary platform config for the given output format. + * Output files are keyed per-tier-per-category: + * + * css → build/css//.css + * scss → build/scss//_.scss + */ function makePlatform(format) { return { transforms: ["name/uswds-theme", "value/uswds-units"], prefix: "usa", buildPath: `build/${format}/`, - files: tokenGroups.map((group) => ({ - destination: format === "scss" ? `_${group}.scss` : `${group}.css`, + files: tokenGroups.map(({ tier, category }) => ({ + destination: + format === "scss" + ? `${tier}/_${category}.scss` + : `${tier}/${category}.css`, format: `${format}/variables`, - filter: (token) => token.filePath?.includes(`tokens/${group}/`), + filter: (token) => + token.filePath?.includes(`tokens/${tier}/${category}/`), })), }; } diff --git a/internals/token-helpers/index.test.ts b/internals/token-helpers/index.test.ts index b1eb8ca8..fad07b82 100644 --- a/internals/token-helpers/index.test.ts +++ b/internals/token-helpers/index.test.ts @@ -87,6 +87,50 @@ describe("generateTokenName", () => { ); expect(result).toBe("usa-font-base-size"); }); + + it("should strip the 'system' tier segment from path (ADR-0010)", () => { + const result = generateTokenName( + createToken({ + filePath: "tokens/system/color/blue.json", + path: ["system", "color", "blue", "5"], + }), + options, + ); + expect(result).toBe("usa-color-blue-5"); + }); + + it("should strip the 'system' tier segment for breakpoints (ADR-0010)", () => { + const result = generateTokenName( + createToken({ + filePath: "tokens/system/breakpoints/breakpoints.json", + path: ["system", "breakpoint", "desktop-lg"], + }), + options, + ); + expect(result).toBe("usa-breakpoint-desktop-lg"); + }); + + it("should strip the 'theme' tier segment from path (ADR-0010)", () => { + const result = generateTokenName( + createToken({ + filePath: "tokens/theme/color/primary.json", + path: ["theme", "color", "primary"], + }), + options, + ); + expect(result).toBe("usa-color-primary"); + }); + + it("should strip the 'state' tier segment from path (ADR-0010)", () => { + const result = generateTokenName( + createToken({ + filePath: "tokens/state/color/error.json", + path: ["state", "color", "error"], + }), + options, + ); + expect(result).toBe("usa-color-error"); + }); }); describe("getTokenValueWithUnit", () => { diff --git a/internals/token-helpers/index.ts b/internals/token-helpers/index.ts index c42bc816..cae33bd3 100644 --- a/internals/token-helpers/index.ts +++ b/internals/token-helpers/index.ts @@ -1,10 +1,22 @@ import type { TransformedToken, PlatformConfig } from "style-dictionary/types"; +/** + * Tier path segments. + * generateTokenName strips these from `token.path` before joining so that the + * tier is organizational (directory / `$extensions.uswds.tier`) but does NOT + * appear in the emitted CSS custom property or Sass variable name. + * + * Example: ["system","color","blue","5"] → "usa-color-blue-5" (tier stripped) + * ["color","blue","5"] → "usa-color-blue-5" (no-op — unchanged) + */ +const TIERS = new Set(["system", "theme", "state"]); + export const generateTokenName = ( token: TransformedToken, options: PlatformConfig, ) => { - return `${options.prefix}-${token.path.join("-")}`; + const segments = token.path.filter((s) => !TIERS.has(s)); + return `${options.prefix}-${segments.join("-")}`; }; export const getTokenValueWithUnit = (token: TransformedToken) => { diff --git a/package-lock.json b/package-lock.json index ff5b9cf8..9d773711 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16575,6 +16575,511 @@ "dev": true, "license": "0BSD" }, + "node_modules/tsx": { + "version": "4.23.1", + "resolved": "https://registry.npmjs.org/tsx/-/tsx-4.23.1.tgz", + "integrity": "sha512-GQHnkIfxyx1wYCOS/wonik5MVRZU9hi1TEZmzGZSCJB1y9YgoZ8H6itNE/u4suE+yLmOzuE4E5S4TZ/ZX2wcWQ==", + "dev": true, + "optional": true, + "peer": true, + "dependencies": { + "esbuild": "~0.28.0" + }, + "bin": { + "tsx": "dist/cli.mjs" + }, + "engines": { + "node": ">=18.0.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.3" + } + }, + "node_modules/tsx/node_modules/@esbuild/aix-ppc64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.28.1.tgz", + "integrity": "sha512-Svl7tq8k/08+p6CXPpRjQ1fKX+1odH/BQbb48fV6fj3CWHhsoIOoY87w1oHXm0qEpkIK3ZfVgp0hed3XBXzXMQ==", + "cpu": [ + "ppc64" + ], + "dev": true, + "optional": true, + "os": [ + "aix" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/tsx/node_modules/@esbuild/android-arm": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.28.1.tgz", + "integrity": "sha512-0k2F129Xdio1TdJfzJ8sy1Q47vUD2NnwdhiAf7drUN1EBTfPf4hsFCtmMgu/6m8JSzsBrlmVjudMBQqOfG8usQ==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/tsx/node_modules/@esbuild/android-arm64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.28.1.tgz", + "integrity": "sha512-34EGEbCIAgosYz6goLcopX6Mo7NyGv9tfwEM2/7Ce2VcVRk568iSvniGWcUXIy7wEDR1wzolcxcriFVrWYcwBg==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/tsx/node_modules/@esbuild/android-x64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.28.1.tgz", + "integrity": "sha512-dbwY7ltSMDWsRatcRpCnES4F+im88OCUgGZjy52shC7GqHRE/cYlxNbB4Z4UpJswpcc4Qxd2oE/ufM0p61IKng==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/tsx/node_modules/@esbuild/darwin-arm64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.28.1.tgz", + "integrity": "sha512-TZbWkQY7kvTAXbXUT7uVACR5cMHsDiSz9z7ZKAX/RTq/WJEk3QyRr0wZpNhBDX+/0CtdqUIJlOiodQcta6tY3Q==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/tsx/node_modules/@esbuild/darwin-x64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.28.1.tgz", + "integrity": "sha512-zfdzgK9ACBNZLI/CyHTOx81SyNbM6YXn7rxSgX97VjyiPl9W1i4Ka4fgKECEoFCKGpvBj5qArWIGgQjOwkgskQ==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/tsx/node_modules/@esbuild/freebsd-arm64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.28.1.tgz", + "integrity": "sha512-wG2EA8ENdEI0qhkSZMjfqrdY+ziCYCPMmtZjjIwOmXFjmyzEHn+UUxk5of+SYsjtfs3VpnlC7QLzSI5hY/rOAw==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "freebsd" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/tsx/node_modules/@esbuild/freebsd-x64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.28.1.tgz", + "integrity": "sha512-i7dZ9vQgnvSCzi/rYCXNgtF/U+eKZNJBzu3eTQbRgHnM7tNSizLOkRFAl3qzVc/Op/u5YkHHa4pf/3DOYHthLQ==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "freebsd" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/tsx/node_modules/@esbuild/linux-arm": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.28.1.tgz", + "integrity": "sha512-qVXBOHQS+d5Y722GwJzJUtOLlX7km3CraOaGormF1pDtPd2C/l1SHRPgjLunLGe51Sh5YYWKMFDyV4SxgMQYTQ==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/tsx/node_modules/@esbuild/linux-arm64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.28.1.tgz", + "integrity": "sha512-yHs+0uc8+nvEAfAfxrWQKK5peSNzBc4PegcMO0EJ2hT71uA7vB8Ihg2e77R2P7SG5uYjPbHlLLmve4LLLRCf0g==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/tsx/node_modules/@esbuild/linux-ia32": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.28.1.tgz", + "integrity": "sha512-d1z4ZuP0ajrfz/FhGT4vv278rX8KnPPJx8i5+AtK7TYbx9Le9F1hyzurZpkEyjkGa9dUGhQow4C1NmeGvqxN2w==", + "cpu": [ + "ia32" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/tsx/node_modules/@esbuild/linux-loong64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.28.1.tgz", + "integrity": "sha512-M5sRjUVZrkm1OAPR3dlOYzNmN+loZKGVi1VUQGrwuqLcbR6qeAz+famMhjASeH3YVKvZz+zT1jlh/keC3Rj/lg==", + "cpu": [ + "loong64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/tsx/node_modules/@esbuild/linux-mips64el": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.28.1.tgz", + "integrity": "sha512-mRObBZeHh2OxcBFPWE/FjylkRgZdYuiTR3vaTozquCGOH14iP9oN4x4Ge81CoIDYQrXmIxpFumJBu5MtZpnQJQ==", + "cpu": [ + "mips64el" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/tsx/node_modules/@esbuild/linux-ppc64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.28.1.tgz", + "integrity": "sha512-slScBsMAb3GFDcdrCgLwZtPYRoH2H/youv10QiZyRjmsP48fznoveWytSgCI/R0ZcUgpc0ZhIUEx6LHts8yrfQ==", + "cpu": [ + "ppc64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/tsx/node_modules/@esbuild/linux-riscv64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.28.1.tgz", + "integrity": "sha512-kw0owk1o0GFETUJyW0jc0G4Yzs0BHZn0JDZ8JRT088vjJYX777BAs1fDGxAC+q831qOs2DTC96mNsG2opdfyyQ==", + "cpu": [ + "riscv64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/tsx/node_modules/@esbuild/linux-s390x": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.28.1.tgz", + "integrity": "sha512-/lAIjX8aYFRByhh6L5rYtPEDRqa9de/4V/juOXcta5frjvzXO4/sqEtyytse0g3zZFuWu5cDN0MkLz2qRDD2Ag==", + "cpu": [ + "s390x" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/tsx/node_modules/@esbuild/linux-x64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.28.1.tgz", + "integrity": "sha512-u/anNYF2mmVOEDwLtnQ1wOr3EZ9sTNGLWrsYGYwHWzGA3Si84IOkHXlbWTD1NB+9/1lcnweYKO54uhxZydNzfA==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/tsx/node_modules/@esbuild/netbsd-arm64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.28.1.tgz", + "integrity": "sha512-oks0DYbLwWMmaakTsCb+zL4E+aHRVLom9IJZOAthMQEPiQmydXHkziYEsGYRx0uNV/IjEKGAV941JzH02pflqw==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "netbsd" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/tsx/node_modules/@esbuild/netbsd-x64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.28.1.tgz", + "integrity": "sha512-aeL6lAnN89Hz43Mlh1G8ARasbuoYvSITDEx0tHh5b7jJnHcssqgjy9Yx430GDpmCa6OyrKoS0aNRjKundRizGg==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "netbsd" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/tsx/node_modules/@esbuild/openbsd-arm64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.28.1.tgz", + "integrity": "sha512-MEFJe5C3R8pwXdZ5Y21oo6m7ePiS0d9pWucn99O/wvyJZChoIQKrQDxKrGeW8F5+T0okTHesAmDeiHDTIq0V/Q==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "openbsd" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/tsx/node_modules/@esbuild/openbsd-x64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.28.1.tgz", + "integrity": "sha512-i/ZLIOafE0Z8cI/XANJAixoJL/uRAoS2xOA3rb0xN+KK0K177cMAsQYkzHtBrtMXAKuAc7HGgcWiZ/sRC1Nxgw==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "openbsd" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/tsx/node_modules/@esbuild/openharmony-arm64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.28.1.tgz", + "integrity": "sha512-ge+Z7EXFNt2BO1oAMsVpiQ8EwndV9i1xXerAeTIK7AtPs3bKFXQM7nlRxDSIUIMeueR1CNXxqztLzdNeReKBJg==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "openharmony" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/tsx/node_modules/@esbuild/sunos-x64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.28.1.tgz", + "integrity": "sha512-BEjgtECkL3vY+SaSQ6nzVfiALUeFxpawyp8Jmf5PtYhf1Ug40N1h/hxlhts+f1FvSvarEigdxS3BlSMI2PJLcQ==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "sunos" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/tsx/node_modules/@esbuild/win32-arm64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.28.1.tgz", + "integrity": "sha512-lCv9eK/H6ZJWbE7bh2nw54CZ9M2nupBxJcTsdk/QQnWkdSjKGuxmmH8/GWrlT1eMmZfn4dGcCjRte397WqfQXA==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/tsx/node_modules/@esbuild/win32-ia32": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.28.1.tgz", + "integrity": "sha512-zvb/mB2bSCoJOpoCBgYKKpX6YM6mJBlBUVUtVj41DlZJVEB6/0CKlRYxP5wWl1C1ILiCoAU5wZZ4q1P3qeS6Eg==", + "cpu": [ + "ia32" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/tsx/node_modules/@esbuild/win32-x64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.28.1.tgz", + "integrity": "sha512-bm4Mowrv+GXMlpWX++EcXw/iLyd1o3+bJkC2DkWXYVvgZCqD/bSj9ctZeAMC3cIxgjRVR2Dufaiu4YPxr5gW1A==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "peer": true, + "engines": { + "node": ">=18" + } + }, + "node_modules/tsx/node_modules/esbuild": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.28.1.tgz", + "integrity": "sha512-HrJrvZv5ayxBzPfwphOoNzkzOIIlifzk0KJrGK2c8R4+LKpMtpYLQeUdjnwjWv/LZlkH2laZk+4w78pi99D4Vw==", + "dev": true, + "hasInstallScript": true, + "optional": true, + "peer": true, + "bin": { + "esbuild": "bin/esbuild" + }, + "engines": { + "node": ">=18" + }, + "optionalDependencies": { + "@esbuild/aix-ppc64": "0.28.1", + "@esbuild/android-arm": "0.28.1", + "@esbuild/android-arm64": "0.28.1", + "@esbuild/android-x64": "0.28.1", + "@esbuild/darwin-arm64": "0.28.1", + "@esbuild/darwin-x64": "0.28.1", + "@esbuild/freebsd-arm64": "0.28.1", + "@esbuild/freebsd-x64": "0.28.1", + "@esbuild/linux-arm": "0.28.1", + "@esbuild/linux-arm64": "0.28.1", + "@esbuild/linux-ia32": "0.28.1", + "@esbuild/linux-loong64": "0.28.1", + "@esbuild/linux-mips64el": "0.28.1", + "@esbuild/linux-ppc64": "0.28.1", + "@esbuild/linux-riscv64": "0.28.1", + "@esbuild/linux-s390x": "0.28.1", + "@esbuild/linux-x64": "0.28.1", + "@esbuild/netbsd-arm64": "0.28.1", + "@esbuild/netbsd-x64": "0.28.1", + "@esbuild/openbsd-arm64": "0.28.1", + "@esbuild/openbsd-x64": "0.28.1", + "@esbuild/openharmony-arm64": "0.28.1", + "@esbuild/sunos-x64": "0.28.1", + "@esbuild/win32-arm64": "0.28.1", + "@esbuild/win32-ia32": "0.28.1", + "@esbuild/win32-x64": "0.28.1" + } + }, "node_modules/type-check": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", diff --git a/src/core/colors.css b/src/core/colors.css index 1d2d84c8..1a95656a 100644 --- a/src/core/colors.css +++ b/src/core/colors.css @@ -1,4 +1,4 @@ -@import url("/build/css/colors.css"); +@import url("/build/css/system/color.css"); :root { --usa-color-base-lightest: var(--usa-color-gray-5); diff --git a/tokens/index.js b/tokens/index.js index f0f6e531..32567033 100644 --- a/tokens/index.js +++ b/tokens/index.js @@ -1,8 +1,22 @@ import { readdirSync } from "node:fs"; +import { join } from "node:path"; const dirs = (p) => readdirSync(p, { withFileTypes: true }) .filter((d) => d.isDirectory()) .map((d) => d.name); -export default dirs(import.meta.dirname); +/** + * Returns a flat array of { tier, category } group objects for each + * tier/category combination found under tokens/system, tokens/theme, + * and tokens/state. Used by the Style Dictionary config to generate + * per-tier-per-category output files and filters. + */ +const tokenGroups = dirs(import.meta.dirname) + .filter((tier) => tier !== "index.js") + .flatMap((tier) => { + const tierPath = join(import.meta.dirname, tier); + return dirs(tierPath).map((category) => ({ tier, category })); + }); + +export default tokenGroups; diff --git a/tokens/breakpoints/breakpoints.json b/tokens/system/breakpoints/breakpoints.json similarity index 100% rename from tokens/breakpoints/breakpoints.json rename to tokens/system/breakpoints/breakpoints.json diff --git a/tokens/colors/black-transparent.json b/tokens/system/color/black-transparent.json similarity index 100% rename from tokens/colors/black-transparent.json rename to tokens/system/color/black-transparent.json diff --git a/tokens/colors/blue-cool.json b/tokens/system/color/blue-cool.json similarity index 100% rename from tokens/colors/blue-cool.json rename to tokens/system/color/blue-cool.json diff --git a/tokens/colors/blue-warm.json b/tokens/system/color/blue-warm.json similarity index 100% rename from tokens/colors/blue-warm.json rename to tokens/system/color/blue-warm.json diff --git a/tokens/colors/blue.json b/tokens/system/color/blue.json similarity index 100% rename from tokens/colors/blue.json rename to tokens/system/color/blue.json diff --git a/tokens/colors/cyan.json b/tokens/system/color/cyan.json similarity index 100% rename from tokens/colors/cyan.json rename to tokens/system/color/cyan.json diff --git a/tokens/colors/global.json b/tokens/system/color/global.json similarity index 100% rename from tokens/colors/global.json rename to tokens/system/color/global.json diff --git a/tokens/colors/gold.json b/tokens/system/color/gold.json similarity index 100% rename from tokens/colors/gold.json rename to tokens/system/color/gold.json diff --git a/tokens/colors/gray-cool.json b/tokens/system/color/gray-cool.json similarity index 100% rename from tokens/colors/gray-cool.json rename to tokens/system/color/gray-cool.json diff --git a/tokens/colors/gray-warm.json b/tokens/system/color/gray-warm.json similarity index 100% rename from tokens/colors/gray-warm.json rename to tokens/system/color/gray-warm.json diff --git a/tokens/colors/gray.json b/tokens/system/color/gray.json similarity index 100% rename from tokens/colors/gray.json rename to tokens/system/color/gray.json diff --git a/tokens/colors/green-cool.json b/tokens/system/color/green-cool.json similarity index 100% rename from tokens/colors/green-cool.json rename to tokens/system/color/green-cool.json diff --git a/tokens/colors/green-warm.json b/tokens/system/color/green-warm.json similarity index 100% rename from tokens/colors/green-warm.json rename to tokens/system/color/green-warm.json diff --git a/tokens/colors/green.json b/tokens/system/color/green.json similarity index 100% rename from tokens/colors/green.json rename to tokens/system/color/green.json diff --git a/tokens/colors/indigo-cool.json b/tokens/system/color/indigo-cool.json similarity index 100% rename from tokens/colors/indigo-cool.json rename to tokens/system/color/indigo-cool.json diff --git a/tokens/colors/indigo-warm.json b/tokens/system/color/indigo-warm.json similarity index 100% rename from tokens/colors/indigo-warm.json rename to tokens/system/color/indigo-warm.json diff --git a/tokens/colors/indigo.json b/tokens/system/color/indigo.json similarity index 100% rename from tokens/colors/indigo.json rename to tokens/system/color/indigo.json diff --git a/tokens/colors/magenta.json b/tokens/system/color/magenta.json similarity index 100% rename from tokens/colors/magenta.json rename to tokens/system/color/magenta.json diff --git a/tokens/colors/mint-cool.json b/tokens/system/color/mint-cool.json similarity index 100% rename from tokens/colors/mint-cool.json rename to tokens/system/color/mint-cool.json diff --git a/tokens/colors/mint.json b/tokens/system/color/mint.json similarity index 100% rename from tokens/colors/mint.json rename to tokens/system/color/mint.json diff --git a/tokens/colors/orange-warm.json b/tokens/system/color/orange-warm.json similarity index 100% rename from tokens/colors/orange-warm.json rename to tokens/system/color/orange-warm.json diff --git a/tokens/colors/orange.json b/tokens/system/color/orange.json similarity index 100% rename from tokens/colors/orange.json rename to tokens/system/color/orange.json diff --git a/tokens/colors/red-cool.json b/tokens/system/color/red-cool.json similarity index 100% rename from tokens/colors/red-cool.json rename to tokens/system/color/red-cool.json diff --git a/tokens/colors/red-warm.json b/tokens/system/color/red-warm.json similarity index 100% rename from tokens/colors/red-warm.json rename to tokens/system/color/red-warm.json diff --git a/tokens/colors/red.json b/tokens/system/color/red.json similarity index 100% rename from tokens/colors/red.json rename to tokens/system/color/red.json diff --git a/tokens/colors/violet-warm.json b/tokens/system/color/violet-warm.json similarity index 100% rename from tokens/colors/violet-warm.json rename to tokens/system/color/violet-warm.json diff --git a/tokens/colors/violet.json b/tokens/system/color/violet.json similarity index 100% rename from tokens/colors/violet.json rename to tokens/system/color/violet.json diff --git a/tokens/colors/white-transparent.json b/tokens/system/color/white-transparent.json similarity index 100% rename from tokens/colors/white-transparent.json rename to tokens/system/color/white-transparent.json diff --git a/tokens/colors/yellow.json b/tokens/system/color/yellow.json similarity index 100% rename from tokens/colors/yellow.json rename to tokens/system/color/yellow.json diff --git a/tokens/spacing/spacing.json b/tokens/system/spacing/spacing.json similarity index 100% rename from tokens/spacing/spacing.json rename to tokens/system/spacing/spacing.json From 7edbf3f481adc1c4cccc1274a5093ab2639dfcea Mon Sep 17 00:00:00 2001 From: Ethan Gardner Date: Tue, 21 Jul 2026 18:07:36 -0400 Subject: [PATCH 2/2] fix formatting in readme --- README.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 04b25cb7..5754d25b 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@ > [!CAUTION] -> This repository hosts development work for the HTML Web Component version of the U.S. Web Design System, called USWDS Elements (some call it USWDS 4.0). This code may not all be suitable for production use. Work on USWDS Elements is currently taking a gradual, community-driven iterative approach to development. Everything in this repository is in a different state of development, with USWDS Banner always intended to be closest to stable due to its [inclusion in the Federal Website Standards](https://standards.digital.gov/standards/banner/), which are required by the [21st Century Integrated Digital Experience Act](https://digital.gov/resources/delivering-digital-first-public-experience#what-is-21st-century-idea) (21st Century IDEA), and reinforced by [OMB Memo M-23-22]([https://bidenwhitehouse.archives.gov/omb/management/ofcio/delivering-a-digital-first-public-experience/](https://bidenwhitehouse.archives.gov/omb/management/ofcio/delivering-a-digital-first-public-experience/#III)). The documentation of each item will include its current status — for components, check the ```docs.mdx``` in ```/src/components/[usa-component-name]```. +> This repository hosts development work for the HTML Web Component version of the U.S. Web Design System, called USWDS Elements (some call it USWDS 4.0). This code may not all be suitable for production use. Work on USWDS Elements is currently taking a gradual, community-driven iterative approach to development. Everything in this repository is in a different state of development, with USWDS Banner always intended to be closest to stable due to its [inclusion in the Federal Website Standards](https://standards.digital.gov/standards/banner/), which are required by the [21st Century Integrated Digital Experience Act](https://digital.gov/resources/delivering-digital-first-public-experience#what-is-21st-century-idea) (21st Century IDEA), and reinforced by [OMB Memo M-23-22](<[https://bidenwhitehouse.archives.gov/omb/management/ofcio/delivering-a-digital-first-public-experience/](https://bidenwhitehouse.archives.gov/omb/management/ofcio/delivering-a-digital-first-public-experience/#III)>). The documentation of each item will include its current status — for components, check the `docs.mdx` in `/src/components/[usa-component-name]`. # USWDS Elements @@ -7,7 +7,7 @@ The [United States Web Design System](https://designsystem.digital.gov) is a too This repository contains the code for the Web Component-based version of the design system, which is currently in pre-release status. We maintain other repositories for the [current version of the design system](https://github.com/uswds/uswds), which we call USWDS Core, as well as [its documentation and website](https://github.com/uswds/uswds-site). For USWDS Core and its documentation, visit [https://designsystem.digital.gov](https://designsystem.digital.gov). -We're working on incrementally building new [Web Component](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)-based implementations of USWDS Core components. Once each new USWDS Elements Web Component progresses into production-ready mode, you'll be able to use them alongside existing USWDS code. You can try out the first published example of a USWDS Web Component variant now: the [USWDS Banner Web Component variant](https://designsystem.digital.gov/components/banner/#banner-web-component-2). +We're working on incrementally building new [Web Component](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)-based implementations of USWDS Core components. Once each new USWDS Elements Web Component progresses into production-ready mode, you'll be able to use them alongside existing USWDS code. You can try out the first published example of a USWDS Web Component variant now: the [USWDS Banner Web Component variant](https://designsystem.digital.gov/components/banner/#banner-web-component-2). Contributions are now welcome, though the USWDS Elements review process prioritizes [USWDS Open Source Community member](https://github.com/uswds/uswds/blob/develop/COMMUNITY.md#communitymd) and [USWDS partnership](https://github.com/uswds/uswds/blob/develop/COMMUNITY.md#uswds-current--former-partners) contributions. @@ -197,8 +197,8 @@ If you have questions about changing the pre-release tag or the release automati ## Component versions -| Component | Status | -| ------------ | ---------------------------------------------------------------------------- | -| `usa-banner` | Beta (Banner only, not entire package) | -| `usa-link` | Pre-alpha (proof-of-concept: not intended as direction, or even for release) | +| Component | Status | +| ------------ | ------------------------------------------------------------------------------- | +| `usa-banner` | Beta (Banner only, not entire package) | +| `usa-link` | Pre-alpha (proof-of-concept: not intended as direction, or even for release) | | `usa-alert` | Pre-alpha (proof-of-concept for architecture validation; not completely tested) |