1635140 - [Dark Theme] The links from the "Our Sponsors and your privacy" modal have the wrong color (and insufficient contrast to be readable)

Status: VERIFIED FIXED

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

Description

[Ciprian Muresan [:cmuresan], Formerly of Ecosystem QA - please needinfo @mcoman for things regarding the team]

Attachment: image.png

[Affected versions]:

• Firefox Nightly 77.0a1, BuildID 20200503214759
• Firefox Beta 76.0, BuildID 20200429185419
• Firefox Release 75.0, BuildID 20200403170909

[Affected Platforms]:

• All Windows
• All Mac
• All Linux

[Prerequisites]:

• Have the following prefs set to the following values:
  • browser.search.region set to US
  • browser.newtabpage.activity-stream.discoverystream.spocs-endpoint set to https://spocs.getpocket.com/spocs?country=US&region=US-CA

[Steps to reproduce]:

1. Open the browser with the profile from prerequisites and open a new tab.
2. Click the "Open Menu" button on one of the Sponsored cards.
3. Select the "Our Sponsors and your privacy" option.
4. Inspect the link element and observe the color.

[Expected results]:

• The color of the icon and text is #45A1FF.

[Actual results]:

• The color of the icon and text is #0060DF.

[Notes]:

• The two links look like they're in a constant clicked state, at least in dark theme.
• Attached a screenshot of the issue.

Comment 1

[Daniel Holbert [:dholbert]]

Just ran into this myself.

Note: It looks like elsewhere on the new-tab page, we use a lighter color for links, specified by the CSS variable --newtab-link-primary-color, whose value is dark-mode-dependent (I think). But in this particular dialog, we hardcode a link color in a way that overrides that:

.ds-privacy-modal .modal-link {
  display: flex;
  align-items: center;
  margin: 0 0 8px;
  border: 0;
  padding: 0;
  color: #0060DF;

Looks like this color styling traces back to bug 1602140 -- hence, adding a dependency on that bug. Specifically, this changeset:
https://hg.mozilla.org/mozilla-central/rev/649281b190046f7d0daf1c70f9e7786935c75cfc

Comment 2

[Maxx Crawford [:maxx]]

Attachment: Privacy Modal (Dark mode)

Since we adopted Acorn design tokens, this support has been solved.

Comment 3

[Carmen Fat [:cfat] - Ecosystem QA]

I can confirm that the icons and links from the "Our Sponsors and your privacy" panel are visible when Dark Theme is enabled.

• Also, the colors of the icons and links from the panel are set according to the Acorn Design System:
  -> #0061e0 - for Light Theme
  -> #00ddff - for Dark Theme

Environment:

• Firefox Nightly 135.0a1 (Build ID: 20241229214936) and Release 133.0.3 (Build ID: 20241229214936)
• Windows 10 x64. Ubuntu 20.04 x64. macOS 12.6.1