2013342 - Rename design tokens to improve consistency

Status: RESOLVED FIXED

(Toolkit :: Themes, task, P3)

Description

[Dustin Whisman [:dwhisman]]

Some of our design tokens are named inconsistently, requiring custom logic and workarounds to categorize them correctly. For example, --heading-font-size could be renamed to --font-size-heading to more easily group it with the other font size tokens. Similarly, the --icon-size-* tokens could be renamed to --size-icon-* to follow the same convention as other size tokens.

There are other token categories that are nested, like { "attention": { "dot": { ... } } } that make more sense to treat as one conceptual category, like { "attention-dot": { ... } }. The same goes for box-shadow tokens. This affects the Figma output, which would group box-shadow tokens under a top-level box category, rather than a more meaningful box-shadow category.

Any tokens that are renamed will need to be updated where they're used, and we'll need to check that the Figma output is still usable.

Comment 1

[Dustin Whisman [:dwhisman]]

Attachment: Bug 2013342 - Rename design tokens for consistency r=jules

Comment 2

[Dustin Whisman [:dwhisman]]

Attachment: WIP: Bug 2013342 - Rename --icon-size tokens to --size-icon r=jules

Comment 3

[Dustin Whisman [:dwhisman]]

Attachment: Bug 2013342 - Rename heading font tokens to be consistent with base font tokens r=reusable-components-reviewers-rotation

Comment 4

[Dustin Whisman [:dwhisman]]

After discussion, we decided to leave --icon-size tokens as-is, but we may want to take card tokens, like border-color-card and box-shadow-card and group them together as card tokens. Later on, we may take other card tokens from moz-card and tokenize them as well.

Comment 5

[Dustin Whisman [:dwhisman]]

Attachment: Bug 2013342 - Categorize card, popup, and tab tokens as component tokens r=reusable-components-reviewers-rotation

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/996275da9f88
https://hg.mozilla.org/integration/autoland/rev/4f7e8bbbf065
Rename heading font tokens to be consistent with base font tokens r=mtigley,desktop-theme-reviewers,credential-management-reviewers,devtools-reviewers,fxview-reviewers,tabbrowser-reviewers,places-reviewers,omc-reviewers,home-newtab-reviewers,urlbar-reviewers,ai-frontend-reviewers,profiles-reviewers,ip-protection-reviewers,akulyk,kpatenio,nsharpley,chutten,nchevobbe,sclements,mossop,jules,mlucks,emcminn,maxx

Comment 7

[Serban Stanca [:SerbanS]]

https://hg.mozilla.org/mozilla-central/rev/4f7e8bbbf065

Comment 8

[Takanori MATSUURA]

Reopened for unpublished changesets.

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/39d81e0c49e4
https://hg.mozilla.org/integration/autoland/rev/ee58fea018f9
Categorize card, popup, and tab tokens as component tokens r=mtigley,extension-reviewers,desktop-theme-reviewers,credential-management-reviewers,tabbrowser-reviewers,omc-reviewers,home-newtab-reviewers,ai-frontend-reviewers,profiles-reviewers,ip-protection-reviewers,janerik,jules,mossop,nsharpley,kpatenio,robwu,emcminn,jlewis,maxx

Comment 10

[Cristian Tuns]

https://hg.mozilla.org/mozilla-central/rev/ee58fea018f9

Comment 11

[Dustin Whisman [:dwhisman]]

Attachment: Bug 2013342 - Fix broken card box shadows r=mstriemer

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/f89e4f4a2d27
https://hg.mozilla.org/integration/autoland/rev/3b4be7612f08
Fix broken card box shadows r=mstriemer,desktop-theme-reviewers

Comment 13

[Silaghi Andreea]

https://hg.mozilla.org/mozilla-central/rev/3b4be7612f08

Comment 14

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/1fb7fc7e7728
https://hg.mozilla.org/integration/autoland/rev/95f56eca350c
Rename design tokens for consistency r=jules,desktop-theme-reviewers,credential-management-reviewers,fxview-reviewers,tabbrowser-reviewers,omc-reviewers,jsudiaman,mtigley,sclements,emcminn

Comment 15

[Cristian Tuns]

https://hg.mozilla.org/mozilla-central/rev/95f56eca350c