2012532 - Restructure design tokens to allow for easier component token addition/maintenance

Status: RESOLVED FIXED

(Toolkit :: Themes, task)

Description

[Dustin Whisman [:dwhisman]]

Currently, we have a singular design-tokens.json file that contains generic, system-wide token as well as more component specific tokens for things like buttons, badges, icons, etc. With some restructuring, we could break the design tokens into separate files that follow a naming convention (button.tokens.json for example) that would allow us to automatically prefix token names while following the same structure within files to group tokens into categories like background-color, text-color, size , and so on. Doing this should let us simplify our tokens-config.mjs script so we don't need to make modifications to token group arrays or regexes whenever a new component is tokenized.

The output from running mach buildtokens should remain the same after this refactor.

Comment 1

[Dustin Whisman [:dwhisman]]

Attachment: Bug 2012532 - Restructure design tokens into component JSON files r=jules

Comment 2

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/f2b147134347
https://hg.mozilla.org/integration/autoland/rev/339305476cbe
Restructure design tokens into component JSON files r=desktop-theme-reviewers,hjones

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/d06f3afb053c
https://hg.mozilla.org/integration/autoland/rev/dbef2c06c0c2
Revert "Bug 2012532 - Restructure design tokens into component JSON files r=desktop-theme-reviewers,hjones" for causing design token failures

Comment 4

[Sandor Molnar[:smolnar]]

Backed out for causing design token failures

Backout link: https://hg.mozilla.org/integration/autoland/rev/dbef2c06c0c28d8f8f46b23f6060140bf8046e05

Push with failures

Failure log

Error: ENOENT: no such file or directory, open 'tests/build/css/dist/tokens-brand.css'
[task 2026-02-23T18:55:13.701+00:00]     at readFileSync (node:fs:442:20)
[task 2026-02-23T18:55:13.701+00:00]     at Object.buildCSS (/builds/worker/checkouts/gecko/toolkit/themes/shared/design-system/tests/try-runner.js:89:22)
[task 2026-02-23T18:55:13.701+00:00]     at runTests (/builds/worker/checkouts/gecko/toolkit/themes/shared/design-system/tests/try-runner.js:117:44)
[task 2026-02-23T18:55:13.701+00:00]     at Object.<anonymous> (/builds/worker/checkouts/gecko/toolkit/themes/shared/design-system/tests/try-runner.js:128:3)
[task 2026-02-23T18:55:13.701+00:00]     at Module._compile (node:internal/modules/cjs/loader:1730:14)
[task 2026-02-23T18:55:13.701+00:00]     at Object..js (node:internal/modules/cjs/loader:1895:10)
[task 2026-02-23T18:55:13.701+00:00]     at Module.load (node:internal/modules/cjs/loader:1465:32)
[task 2026-02-23T18:55:13.701+00:00]     at Function._load (node:internal/modules/cjs/loader:1282:12)
[task 2026-02-23T18:55:13.701+00:00]     at TracingChannel.traceSync (node:diagnostics_channel:322:14)
[task 2026-02-23T18:55:13.701+00:00]     at wrapModuleLoad (node:internal/modules/cjs/loader:235:24) {
[task 2026-02-23T18:55:13.701+00:00]   errno: -2,
[task 2026-02-23T18:55:13.701+00:00]   code: 'ENOENT',
[task 2026-02-23T18:55:13.701+00:00]   syscall: 'open',
[task 2026-02-23T18:55:13.701+00:00]   path: 'tests/build/css/dist/tokens-brand.css'
[task 2026-02-23T18:55:13.701+00:00] }
[task 2026-02-23T18:55:13.701+00:00] 
[task 2026-02-23T18:55:13.701+00:00] Node.js v22.16.0
[taskcluster 2026-02-23T18:55:17.082Z]                        Exit Code: 1
[taskcluster 2026-02-23T18:55:17.082Z]                        User Time: 22.5ms
[taskcluster 2026-02-23T18:55:17.082Z]                      Kernel Time: 21.093ms
[taskcluster 2026-02-23T18:55:17.082Z]                        Wall Time: 3m18.624887912s
[taskcluster 2026-02-23T18:55:17.082Z]  Average Available System Memory: 28.96 GiB
[taskcluster 2026-02-23T18:55:17.082Z]       Average System Memory Used: 2.38 GiB
[taskcluster 2026-02-23T18:55:17.082Z]          Peak System Memory Used: 5.01 GiB
[taskcluster 2026-02-23T18:55:17.082Z]              Total System Memory: 31.34 GiB
[taskcluster 2026-02-23T18:55:17.082Z]                           Result: FAILED
[taskcluster 2026-02-23T18:55:17.092Z] === Task Finished ===
[taskcluster 2026-02-23T18:55:17.092Z] Task Duration: 3m18.634569321s
[taskcluster 2026-02-23T18:55:17.434Z] [mounts] Preserving cache: Moving "/home/task_177187265322235/cache0" to "/home/generic-worker/caches/Fh3dUgPUR22yrEGN2KE3hQ"
[taskcluster 2026-02-23T18:55:17.434Z] [mounts] Preserving cache: Moving "/home/task_177187265322235/cache1" to "/home/generic-worker/caches/agzZmu5-TdGLPU8Qs3aJZA"
[taskcluster:error] exit status 1

Comment 5

[Dustin Whisman [:dwhisman]]

The test config needed to be updated to use the same source path as the build config.

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/ff461ea72236
https://hg.mozilla.org/integration/autoland/rev/41a7c6cbea77
Restructure design tokens into component JSON files r=desktop-theme-reviewers,hjones

Comment 7

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/41a7c6cbea77