1798404 - make toolkit our source of truth for CSS token values/variables

Status: RESOLVED FIXED

(Toolkit :: UI Widgets, enhancement)

Description

[Hanna Jones [:hjones]]

Currently our reusable widgets in toolkit rely on variable values defined in in-content/common-shared.css

This has led to issues when these widgets are used in chrome contexts. It also means that the lit based components we're currently building have an implicit dependency on that CSS file having been loaded somewhere in the contexts in which they are being used.

As a solution to the issues we've encountered we want to create a CSS tokens/variables file in toolkit that can be shared between in-content and chrome. This will be our source of truth for component variable values going forward (specifically for things like colors, spacing, etc). The names used should match the variable names used by design to facilitate better communication and smoother dev/design handoffs.

Comment 1

[Jules Simplicio [:jules]]

Attachment: Bug 1798404 - adding design tokens to Storybook project r?hjones,morgan,mstriemer

Comment 2

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/c4ff2e295694
adding design tokens to Storybook project r=mstriemer,hjones,desktop-theme-reviewers,dao,morgan

Comment 3

[Serban Stanca [:SerbanS]]

Backed out for causing dt failures in browser_styleeditor_fission_switch_target.js.

• Backout link
• Push with failures
• Failure Log
• Failure line: TEST-UNEXPECTED-FAIL | devtools/client/styleeditor/test/browser_styleeditor_fission_switch_target.js | Test timed out -

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/1cdfa0b182b1
adding design tokens to Storybook project r=mstriemer,hjones,desktop-theme-reviewers,dao,morgan

Comment 5

[Cristina Horotan [:chorotan]]

https://hg.mozilla.org/mozilla-central/rev/1cdfa0b182b1

Comment 7

[Pascal Chevrel:pascalc]

Dao, should we back out this bug from release and build a RC2 given that you marked several of the regressions filed by Alice as S2? Thanks

Comment 8

[Dão Gottwald [:dao]]

(In reply to Pascal Chevrel:pascalc from comment #7)

Dao, should we back out this bug from release and build a RC2 given that you marked several of the regressions filed by Alice as S2? Thanks

Do you know if this can be backed out without conflicts from 114? If so that's probably the best way forward there.

Comment 9

[Pascal Chevrel:pascalc]

(In reply to Dão Gottwald [::dao] from comment #8)

(In reply to Pascal Chevrel:pascalc from comment #7)

Dao, should we back out this bug from release and build a RC2 given that you marked several of the regressions filed by Alice as S2? Thanks

Do you know if this can be backed out without conflicts from 114? If so that's probably the best way forward there.

It backs out cleanly.

Comment 10

[Dão Gottwald [:dao]]

(In reply to Pascal Chevrel:pascalc from comment #9)

(In reply to Dão Gottwald [::dao] from comment #8)

(In reply to Pascal Chevrel:pascalc from comment #7)

Dao, should we back out this bug from release and build a RC2 given that you marked several of the regressions filed by Alice as S2? Thanks

Do you know if this can be backed out without conflicts from 114? If so that's probably the best way forward there.

It backs out cleanly.

Okay, let's do that then. Thanks!

Comment 11

[Mark Striemer [:mstriemer]]

The issue is that --button-primary-bgcolor is unset which is used for setting the focus color

Changing

    --system-color-accent: var(--button-primary-bgcolor);

to

    --system-color-accent: var(--button-primary-bgcolor, AccentColor);

Fixes all regressors for me

Comment 12

[Mark Striemer [:mstriemer]]

Attachment: Bug 1798404 - followup: fix focusring in non-browser themes dialogs r?dao,jules

Comment 13

[Mark Striemer [:mstriemer]]

Attached a patch if that is preferrable

Comment 14

[Pascal Chevrel:pascalc]

Backed out changeset 1cdfa0b182b1 (Bug 1798404) for causing regressions (Bug 1835581, Bug 1835583, Bug 1835588, Bug 1835590)
https://hg.mozilla.org/releases/mozilla-release/rev/080093fea70c

Comment 15

[Mark Striemer [:mstriemer]]

Should this be 114 fixed 115 affected? This is still on central right? Just backed out of 114?

Comment 16

[Pascal Chevrel:pascalc]

This is still on central, the backout is only on 114

Comment 17

[Phabricator Automation]

Comment on attachment 9336561 [details]
Bug 1798404 - followup: fix focusring in non-browser themes dialogs r?dao,jules

Revision D179453 was moved to bug 1835581. Setting attachment 9336561 [details] to obsolete.