2045752 - Browser theme light/dark token colors are applied to in-content pages

Status: RESOLVED FIXED

(Toolkit :: Themes, defect, P3)

Description

[Mark Striemer [:mstriemer]]

In bug 2030722 more design tokens were moved from browser-colors.css to the design tokens. However the browser-colors.css file was only being loaded in the chrome, and the design tokens are loaded chrome/in-content. This means the browser theme can apply in content which is tweaking our dark mode button colours to be too dark

1. Ensure browser.theme.native-theme=false
2. Use dark mode through any method
   • OS dark mode with System theme
   • Dark theme
   • Appearance > Website appearance > Dark

Expected results: buttons are lighter than the background (currentColor 7%)
Actual results: buttons are darker than the background (rgba(0, 0, 0, 0.33))

Comment 1

[BugBot [:suhaib / :marco]]

Set release status flags based on info from the regressing bug 2030722

:jooliver, since you are the author of the regressor, bug 2030722, could you take a look?

For more information, please visit BugBot documentation.

Comment 2

[Mark Striemer [:mstriemer]]

Attachment: Bug 2045752 - Part 1: Ensure brand overrides browser-theme design tokens r?#recomp-reviewers!

Comment 3

[Mark Striemer [:mstriemer]]

Attachment: Bug 2045752 - Part 2: Build design tokens r?#recomp-reviewers!

Comment 4

[Mark Striemer [:mstriemer]]

Attachment: Bug 2045752 - Part 2: Refactor color tokens with nativeTheme r?#recomp-reviewers

This adds some nativeTheme values for Nova since those were looking a
little wonky with the other Figma changes.

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/a8a84e6b4b19
https://hg.mozilla.org/integration/autoland/rev/7ce92fa7d30e
Part 1: Ensure brand overrides browser-theme design tokens r=desktop-theme-reviewers,tgiles,maxx
https://github.com/mozilla-firefox/firefox/commit/7bd4deced0c9
https://hg.mozilla.org/integration/autoland/rev/eb862bfd00ff
Part 2: Refactor color tokens with nativeTheme r=desktop-theme-reviewers,tgiles

Comment 6

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/7ce92fa7d30e
https://hg.mozilla.org/mozilla-central/rev/eb862bfd00ff

Comment 7

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/7ce92fa7d30e
https://hg.mozilla.org/mozilla-central/rev/eb862bfd00ff

Comment 8

[BugBot [:suhaib / :marco]]

The patch landed in nightly and beta is affected.
:mstriemer, is this bug important enough to require an uplift?

• If yes, please nominate the patch for beta approval.
  • See https://wiki.mozilla.org/Release_Management/Requesting_an_Uplift for documentation on how to request an uplift.
• If no, please set status-firefox153 to wontfix.

For more information, please visit BugBot documentation.

Comment 9

[Mark Striemer [:mstriemer]]

Attachment: Bug 2045752 - Part 1: Ensure brand overrides browser-theme design tokens

Original Revision: https://phabricator.services.mozilla.com/D305457

Comment 10

[Mark Striemer [:mstriemer]]

Attachment: Bug 2045752 - Part 2: Refactor color tokens with nativeTheme

This adds some nativeTheme values for Nova since those were looking a
little wonky with the other Figma changes.

Original Revision: https://phabricator.services.mozilla.com/D306336

Comment 11

[Phabricator Automation]

firefox-beta Uplift Approval Request

• User impact if declined/Reason for urgency: Dark theme for about: pages has incorrect button colours on Window/macOS
• Code covered by automated testing?: no
• Fix verified in Nightly?: yes
• Needs manual QE testing?: no
• Steps to reproduce for manual QE testing:
• Risk associated with taking this patch: low
• Explanation of risk level: Reverts the CSS design tokens for about: pages to their old values
• String changes made/needed?: No
• Is Android affected?: no

Comment 12

[Pascal Chevrel (relman team) -> :pascalc]

This patch seems to have caused multiple regressions, do we want to uplift as it is now? I wouldn't want to fix a regression in 153 and add all to this release all the regressions listed here.

Comment 13

[Mark Striemer [:mstriemer]]

Those are all Nova regressions. This should be fine for 153 non-Nova

Comment 14

[Pulsebot]

https://github.com/mozilla-firefox/firefox/commit/c84dae22061e
https://hg.mozilla.org/releases/mozilla-beta/rev/c56049fd5f0c
https://github.com/mozilla-firefox/firefox/commit/0630765c79b3
https://hg.mozilla.org/releases/mozilla-beta/rev/d8545ebefa48