Replace hardcoded SCSS color values with CSS custom properties by abyrne-moz · Pull Request #14085 · mozilla/addons-frontend

abyrne-moz · 2026-03-20T11:35:34Z

Moves towards fixing mozilla/addons#2193

Introduces CSS custom properties in _theme.scss for key color values (backgrounds, text, links, borders, inputs) and updates 29 component SCSS files to reference them via var(). All values resolve to the existing light mode colors — no visual change. This lays the groundwork for runtime theme switching (e.g. dark mode) in a follow-up PR.

Introduces CSS custom properties in _theme.scss for key color values (backgrounds, text, links, borders, inputs) and updates 29 component SCSS files to reference them via var(). All values resolve to the existing light mode colors — no visual change. This lays the groundwork for runtime theme switching (e.g. dark mode) in a follow-up PR. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

codecov · 2026-03-20T11:46:44Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 98.15%. Comparing base (91cd279) to head (0c117a2).
⚠️ Report is 1 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master   #14085   +/-   ##
=======================================
  Coverage   98.15%   98.15%           
=======================================
  Files         265      265           
  Lines       10680    10680           
  Branches     3280     3280           
=======================================
  Hits        10483    10483           
  Misses        184      184           
  Partials       13       13

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

diox

I don't think this goes far enough - this is the problem I encountered when looking at dark mode in the past.

The following very crude grep finds 183 more potentially problematic lines where we're using SCSS variables or plain hardcoded values:

egrep 'color:|background:|background-color:' src -r --include="*.scss" --exclude=vars.scss | fgrep -v 'var(' | egrep -v 'transparent|none|inherit|initial'

There are a few false positives (and maybe some missing as well!), but we should use the CSS variables in almost all of these cases.

@for

Adds 14 new CSS custom properties and converts ~95 more hardcoded color references across 43 files. The remaining ~84 hardcoded values are false positives: SCSS mixin parameters (Button, Notice), @for loop variables (CategoryIcon, Categories), literal color swatches (SearchFilters), brand-specific colors (VPNPromoBanner), SVG references (Icon, Rating), and gradients (RatingManager, AddonReviewCard). New variables: --amo-text-on-dark, --amo-text-dark, --amo-text-muted, --amo-text-muted-light, --amo-text-date, --amo-bg-neutral, --amo-focus-border, --amo-action-hover, --amo-accent-color, --amo-rating-bar-bg, --amo-rating-bar-fill, --amo-loading-bg. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

The photon-colors package doesn't export $yellow-40 — it only has $yellow-50. Replace with the hardcoded hex value #ffbd4f. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Missed in the initial pass: border shorthand, border-top/bottom/left/right, and outline properties with hardcoded SCSS color variables. Converts 11 instances across 9 files. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

diox

All values resolve to the existing light mode colors — no visual change.

That is a lie. I found a lot of subtle differences, which I have commented on. We need to double-check them all, they might all be changes we want to make for consistency, but they are changes nonetheless.

diox · 2026-03-23T11:43:06Z

src/amo/components/AddonReviewCard/styles.scss

    &:hover,
    &:active {
-      color: $blue-50;
+      color: var(--amo-link-color);


Note: here and in other places where $blue-50 is replaced by var(--amo-link-color), this is a slight departure from the previous style, since --amo-link-color is $link-color, which is $blue-60.

It's not necessarily a bad thing (fewer colors to worry about is probably a good thing), but worth double-checking in case that has undesirable effects with regards to contrast etc.

diox · 2026-03-23T11:44:40Z

src/amo/components/SearchResult/styles.scss

  background-color: transparentize($blue-50, 0.95);
  border-radius: $border-radius-default;
-  color: $type-black;
+  color: var(--amo-text-heading);


Another potential change since --amo-text-heading is not equivalent to $type-black

diox · 2026-03-23T11:46:53Z

src/amo/components/AddonReviewManager/styles.scss

      &:link,
      &:visited {
-        color: $black;
+        color: var(--amo-input-text);


Not the right choice - It's not a text input/form widget

diox · 2026-03-23T11:48:00Z

src/amo/components/UserCollection/styles.scss

  @include font-bold;

-  color: $black;
+  color: var(--amo-input-text);


Not the right choice - It's not a text input/form widget

diox · 2026-03-23T11:48:21Z

src/amo/components/AddonSummaryCard/styles.scss

      a,
      a:link {
-        color: $black;
+        color: var(--amo-input-text);


Not the right choice - It's not a text input/form widget

diox · 2026-03-23T12:17:29Z

src/amo/css/inc/_theme.scss

+  --amo-block-hover: #{$block-hover-white-color};
+  --amo-bg-grey: #{$background-grey};
+  --amo-hover-bg: #{$grey-10};
+  --amo-select-bg: #{$grey-30};


Weird name considering it's not just used for <select> elements (used in pagination, language tools page rows...)

diox · 2026-03-23T12:19:28Z

src/amo/components/DropdownMenuItem/styles.scss


 .DropdownMenuItem-section {
-  color: $grey-50;
+  color: var(--amo-text-secondary);


Subtle change

diox · 2026-03-23T12:19:40Z

src/amo/components/SearchFilters/styles.scss


 .SearchFilters-label {
-  color: $grey-50;
+  color: var(--amo-text-secondary);


Subtle change

diox · 2026-03-23T12:20:01Z

src/amo/components/SearchResult/styles.scss

  justify-content: center;
  text-align: center;
-  text-shadow: 0 0 2px $white;
+  text-shadow: none;


I don't think this text-shadow was accidental. Need to double-check.

diox · 2026-03-23T12:22:51Z

src/amo/components/SearchResult/styles.scss

  align-items: center;
-  background: #ccc;
-  color: $black;
+  background: var(--amo-placeholder-bg);


We might want to merge --amo-placeholder-bg with --amo-loading-bg, not sure it's worth having 2 different ones.

diox · 2026-03-23T12:32:00Z

Some examples of the changes I noticed (ignore the border being cut in my screenshots).

Badges

Note: this also affect search results. We might prefer the darker more uniform color in the detail page, but the same color was also used in the search results where the grey might be more desirable.

before

after

Filter results header in search

before

Screenshot 2026-03-23 at 13-32-31 Search results – Add-ons for Firefox (en-US)

after

Screenshot 2026-03-23 at 13-32-40 Search results – Add-ons for Firefox (en-US)

diox

The subtle changes are fine, but we need to fix the following if we want to use this as the foundation for implementing Dark Mode correctly:

--amo-input-text being used for non-inputs
--amo-select-bg being used for more than just <select>/form elements

abyrne-moz and others added 2 commits March 20, 2026 11:32

Fix Prettier formatting in Select styles

cc53f21

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

abyrne-moz closed this Mar 20, 2026

abyrne-moz reopened this Mar 20, 2026

diox requested changes Mar 20, 2026

View reviewed changes

abyrne-moz and others added 2 commits March 20, 2026 12:03

Fix undefined $yellow-40 variable in production build

caf6fd1

The photon-colors package doesn't export $yellow-40 — it only has $yellow-50. Replace with the hardcoded hex value #ffbd4f. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

abyrne-moz requested a review from diox March 20, 2026 14:13

diox reviewed Mar 23, 2026

View reviewed changes

diox requested changes Mar 23, 2026

View reviewed changes

Conversation

abyrne-moz commented Mar 20, 2026

Uh oh!

codecov bot commented Mar 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

diox left a comment

Choose a reason for hiding this comment

Uh oh!

diox left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

diox commented Mar 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Badges

before

after

Filter results header in search

before

after

Uh oh!

diox left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

codecov bot commented Mar 20, 2026 •

edited

Loading

diox commented Mar 23, 2026 •

edited

Loading