1979109 - Generate data from design-tokens.json that can be used for custom Stylelint rules

Status: RESOLVED FIXED

(Developer Infrastructure :: Lint and Formatting, task)

Description

[Hanna Jones [:hjones]]

design-tokens.json is our source of truth for everything design tokens related. We use Style Dictionary to transform it into various CSS files, and we also use it to generate tokens-storybook.mjs, which provides the data for our design tokens table.

Ideally we can use design-tokens.json as the source of truth for our custom Stylelint rules too, so that the variables the rules are checking for will get updated automatically when we rename/add/remove tokens. This could take the form of either adding a new Style Dictionary format, or possibly just refactoring and renaming tokens-storybook.mjs to something more generic that can work for multiple purposes. I have a POC commit demonstrating this latter approach here.

Here's the tentative list of rules I think we'll want/be able to add, which should inform the data structure (I'm open to suggestions and feedback on this):

• background-color
• border-color (likely includes some outline values)
• border-radius
• border-width (less sure about this/lower priority)
• font-size
• font-weight
• opacity
• size
• space
• text-color
• icon-color (might be hard to determine if it's actually getting applied to an icon or not)
• icon-size (might be hard to determine if it's actually getting applied to an icon or not)
• box-shadow

Comment 1

[Jon Oliver]

Attachment: Bug 1979109 - rename storybook tokens for reuse r=#reusable-components-reviewers

Renames tokens-storybook.mjs to tokens-table.mjs and updates usage.
This work is a prerequisite for upcoming work to create custom style lint rules.

Comment 2

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/202c3bd61b51
https://hg.mozilla.org/integration/autoland/rev/0a10fa42cabe
rename storybook tokens for reuse r=reusable-components-reviewers,desktop-theme-reviewers,hjones

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/b08f892ea369
https://hg.mozilla.org/integration/autoland/rev/e017d715b346
Revert "Bug 1979109 - rename storybook tokens for reuse r=reusable-components-reviewers,desktop-theme-reviewers,hjones" for causing node design failures

Comment 4

[Narcis Beleuzu [:NarcisB]]

Backed out for causing node design failures

Backout link: https://hg-edge.mozilla.org/integration/autoland/rev/e017d715b3469da7d9af5baee947dda4afa878b5
Log link: https://treeherder.mozilla.org/logviewer?job_id=521943147&repo=autoland&lineNumber=417

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/f6f8dc0c8874
https://hg.mozilla.org/integration/autoland/rev/97a0c641abc8
rename storybook tokens for reuse r=reusable-components-reviewers,desktop-theme-reviewers,hjones

Comment 6

[[e-mail]]

https://hg.mozilla.org/mozilla-central/rev/97a0c641abc8

Comment 7

[Mark Banner (:standard8)]

Looks like this re-landed.