2070294 - Newtab section context menu buttons are wrong colour

Status: RESOLVED FIXED

(Firefox :: New Tab Page, defect, P2)

Description

[Scott [:thecount] Downe]

Regression: https://phabricator.services.mozilla.com/D320176

To test

1. Set newtab background to light if you have a dark theme, or dark if you have a light theme.
2. Check the stories or widgets sections context menu buttons.

Expected: Should match your wallpaper.
Actual: It matches the theme, and thus hard to see.

Comment 1

[BugBot [:suhaib / :marco]]

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

:dwhisman, since you are the author of the regressor, bug 2051263, could you take a look?

For more information, please visit BugBot documentation.

Comment 2

[Hackbot]

This looks like a design-token regression from D320176 rather than anything in the newtab markup.

The section and widget "…" buttons are moz-button type="ghost" (browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/SectionContextMenu/SectionContextMenu.jsx via buttonType="ghost" at CardSections.jsx, and browser/extensions/newtab/content-src/components/Widgets/Widgets.jsx). moz-button paints a ghost button's foreground with color: var(--button-text-color-ghost) (toolkit/content/widgets/moz-button/moz-button.css). Newtab makes those buttons wallpaper-aware by flipping color-scheme, not by setting color — wallpaper-contrast-fix in browser/extensions/newtab/content-src/styles/_mixins.scss, applied to .section-context-menu in browser/extensions/newtab/content-src/styles/nova/_CardSections.scss and to .widgets-header-context-menu in browser/extensions/newtab/content-src/components/Widgets/_Widgets.scss. That only works if the colour is computed locally from light-dark().

Before 5d7f7744b2f0, button.nova.tokens.json set button.text.color.ghost.@base to {button.text.color.@base}, which compiled to --button-text-color-ghost: var(--button-text-color) (i.e. light-dark(var(--color-violet-90), var(--color-gray-0))). That group was deleted, and the replacement nova entry in toolkit/themes/shared/design-system/src/tokens/components/button.tokens.json only carries brand.forcedColors: ButtonText, so outside forced-colors the token now falls back to the shared default inherit. The property is consequently absent from the :root.nova-tokens block in browser/extensions/newtab/content-src/styles/nova/_tokens.scss — only the -hover/-active/-disabled aliases pointing at it survive. An inherited colour ignores the local color-scheme flip, so the button follows the browser theme instead of the wallpaper.

Proposed fix: restore the nova default for button.text.color.ghost.@base in button.tokens.json — keep default: "inherit" for proton/brand, add a nova default: "{button.text.color.@base}" next to the existing brand.forcedColors, and list the token in FIGMA_IGNORES/NOVA_STRUCTURAL_OVERRIDES in toolkit/themes/shared/design-system/src/figma-import.mjs so the importer doesn't flatten it again. mach buildtokens should then put --button-text-color-ghost: var(--button-text-color) back into the nova layer of dist/tokens-shared.css and into nova/_tokens.scss; the hover/active/disabled aliases resolve again with no further change.

Worth checking in the same pass: the same hunks also dropped --card-border-color and --border-color-transparent from newtab's nova token set, and both are still consumed by _mixins.scss (they now silently fall back to the non-nova values).

I found no existing test covering the rendered colour of these buttons, so a fix should probably add one. This is reasoning from the code — I have not built or run it.

---

Suggested severity: S3
The control stays functional and correctly placed; it is just low-contrast against a wallpaper whose brightness opposes the theme, and the user can change wallpaper or theme to avoid it.

---

If you'd like to provide feedback on this comment, please use the 👍 or 👎 reaction.
If you want to categorize your feedback you can add one of the following tags: ai-triage-wrong-file, ai-triage-wrong-cause, ai-triage-hallucination, ai-triage-out-of-scope, ai-triage-wrong-fix, ai-triage-shallow-fix.

Comment 3

[Dustin Whisman [:dwhisman]]

Attachment: Bug 2070294 - Fix newtab context menu button colors r=#home-newtab-reviewers

Comment 4

[Dustin Whisman [:dwhisman]]

The button text color change was probably an oversight, but the card border color and transparent border should be fine to leave as-is, since the non-nova values match what we want for them.

Comment 5

[BugBot [:suhaib / :marco]]

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

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/3b9b8ba74d62
https://hg.mozilla.org/integration/autoland/rev/ff2174320c83
Fix newtab context menu button colors r=desktop-theme-reviewers,tgiles,thecount

Comment 7

[Norisz Fay [:noriszfay]]

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

Comment 8

[BugBot [:suhaib / :marco]]

The patch landed in nightly and beta is affected.
:dwhisman, 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-firefox157 to wontfix.

For more information, please visit BugBot documentation.