Skip to content

Refactor color to use CSS custom properties (#982) #1109

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
stephaniehobson wants to merge 1 commit into
base: main
Choose a base branch
from
+589 −551
Open

Refactor color to use CSS custom properties (#982) #1109

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 21 additions & 1 deletion CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,15 @@ Introducing theme variables! CSS variables beginning with `--theme-` will adjust

## Color

* To come in follow up PR.
* Modernization:
* Default to CSS vars for all color values
* Removed `@supports` declarations if they only had color declarations
* Reorganization:
* Added `--theme-` prefix to color variables expected to morph between light/dark modes
* Renamed `-title-` to `-heading-` in (to match typography naming)
* Added new form color variables (`--theme-form-*`, `--theme-field-*`)
* Added status color variables (`--theme-color-success-*`, `--theme-color-error-*`, `--theme-color-warning-*`, `--theme-color-info-*`)
* Removed Sass color variables from `_themes-sass.scss` (use CSS variables instead)

## Migration Tips

Expand Down Expand Up @@ -91,6 +99,18 @@ See the [Migration Guide](https://protocol.mozilla.org/docs/usage/migration) for
- `multi-column*`
- `transform`, `transform-origin`, `transform-style`
- `transition`, `transition-property`, `transition-duration`, `transition-delay`
* Rename CSS color variables to use `--theme-` prefix:
* `--(background-color|body-text-color|link-color|heading-text-color)(-*)` → `--theme-$1$2`
* Removed Sass color variables (use CSS variables instead):
* `$(background-color|body-text-color|link-color)(-*)` → `var(--theme-$1$2)`
* `$title-text-color(-inverse)?` → `var(--theme-heading-text-color$1)` (note: renamed to `heading`)
* Removed form Sass variables (use CSS variables instead):
* `forms.$form-red` → `var(--theme-form-red)`
* `forms.$form-text` → `var(--theme-form-text-color)`
* `forms.$form-inactive` → `var(--theme-form-text-color-inactive)`
* `forms.$(field-border-color|field-border|field-focus-ring)(-*)` → `var(--theme-$1$2)`
* `forms.$button-border-color-focus` → `var(--theme-button-border-color-focus)`
* You can remove `@supports (--css: variables)` blocks that only contain color declarations, as CSS custom properties are now required.

# 22.0.0

Expand Down
11 changes: 3 additions & 8 deletions assets/sass/protocol/base/elements/_document.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,15 @@

html {
font-size: 100%;
background: $color-white;
background: var(--theme-background-color);
}

body {
background: $background-color;
color: $body-text-color;
background: var(--theme-background-color);
color: var(--theme-body-text-color);
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
@include text-body-md;

@supports (--css: variable) {
background: var(--background-color);
color: var(--body-text-color);
}
}

// A few places use a class to hide elements. We should try to avoid that.
Expand Down
91 changes: 46 additions & 45 deletions assets/sass/protocol/base/elements/_forms.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
// file, You can obtain one at http://mozilla.org/MPL/2.0/.

@use '../../includes/lib' as *;
@use '../../includes/tokens' as tokens;
@use '../../includes/forms';

// * -------------------------------------------------------------------------- */
Expand Down Expand Up @@ -47,7 +48,7 @@ textarea {

/* stylelint-disable-next-line no-duplicate-selectors */
& {
// needs to come after @includes to over-ride value
// needs to come after @include text-body-md to over-ride value
line-height: var(--theme-button-line-height);
}
}
Expand Down Expand Up @@ -134,45 +135,45 @@ input[type='url'] {
@include forms.form-input;

&::placeholder {
color: forms.$form-inactive;
color: var(--theme-form-text-color-inactive);
}

&:hover {
border-color: forms.$field-border-color-hover;
border-color: var(--theme-field-border-color-hover);
}

&:focus {
outline: none;
border-color: forms.$field-border-color-focus;
box-shadow: forms.$field-focus-ring;
border-color: var(--theme-field-border-color-focus);
box-shadow: var(--theme-field-focus-ring);

.mzp-t-dark & {
box-shadow: forms.$field-focus-ring-dark;
box-shadow: var(--theme-field-focus-ring-dark);
}
}

.mzp-is-error & {
border-color: forms.$field-border-color-error;
border-color: var(--theme-field-border-color-error);
box-shadow: none;

&:hover {
border-color: forms.$field-border-color-error-hover;
border-color: var(--theme-field-border-color-error-hover);
}

&:focus {
border-color: forms.$form-red;
box-shadow: forms.$field-focus-ring-error;
border-color: var(--theme-form-red);
box-shadow: var(--theme-field-focus-ring-error);
}
}

&:disabled,
&[aria-disabled='true'] {
background: $color-marketing-gray-10;
border-color: forms.$field-border-color-disabled;
color: forms.$form-inactive;
background: var(--theme-background-color-secondary);
border-color: var(--theme-field-border-color-disabled);
color: var(--theme-form-text-color-inactive);

&:focus {
border-color: forms.$field-border-color-disabled-focus;
border-color: var(--theme-field-border-color-disabled-focus);
}
}
}
Expand Down Expand Up @@ -247,44 +248,44 @@ input[type='search'] {

input[type='color'],
input[type='file'] {
background: $color-white;
background: var(--theme-background-color);
border-radius: forms.$field-border-radius;
border: forms.$field-border;
border: var(--theme-field-border);
line-height: var(--theme-button-line-height);
margin: 0 0 forms.$field-v-spacing;

&:hover {
border-color: forms.$field-border-color-hover;
border-color: var(--theme-field-border-color-hover);
}

&:focus {
border-color: forms.$field-border-color-focus;
box-shadow: forms.$field-focus-ring;
border-color: var(--theme-field-border-color-focus);
box-shadow: var(--theme-field-focus-ring);
outline: none;
}

.mzp-is-error & {
border-color: forms.$field-border-color-error;
border-color: var(--theme-field-border-color-error);
box-shadow: none;

&:hover {
border-color: forms.$field-border-color-error-hover;
border-color: var(--theme-field-border-color-error-hover);
}

&:focus {
border-color: forms.$form-red;
box-shadow: forms.$field-focus-ring-error;
border-color: var(--theme-form-red);
box-shadow: var(--theme-field-focus-ring-error);
}
}

&:disabled,
&[aria-disabled='true'] {
background: forms.$field-border-color-disabled;
border-color: forms.$field-border-color-disabled;
color: forms.$form-inactive;
background: var(--theme-field-border-color-disabled);
border-color: var(--theme-field-border-color-disabled);
color: var(--theme-form-text-color-inactive);

&:focus {
border-color: forms.$field-border-color-disabled-focus;
border-color: var(--theme-field-border-color-disabled-focus);
}
}
}
Expand Down Expand Up @@ -319,7 +320,7 @@ select {
&,
&:hover,
&:focus {
background: $color-white;
background: var(--theme-background-color);
padding: forms.$field-padding;
}
}
Expand All @@ -329,48 +330,48 @@ select {
}

&:hover {
border-color: forms.$field-border-color-hover;
border-color: var(--theme-field-border-color-hover);
background-image: $url-image-caret-down-link-hover, forms.$select-bg;
}

&:focus {
border-color: forms.$field-border-color-focus;
border-color: var(--theme-field-border-color-focus);
background-image: $url-image-caret-down-link, forms.$select-bg;
box-shadow: forms.$field-focus-ring;
color: #222;
box-shadow: var(--theme-field-focus-ring);
color: var(--theme-body-text-color);
Copy link

Copilot AI Jan 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The hardcoded color value #222 was replaced with var(--theme-body-text-color), but #222 is a dark gray, not pure black. Verify that --theme-body-text-color provides the intended visual result in this context.

Suggested change
color: var(--theme-body-text-color);
color: #222;

Copilot uses AI. Check for mistakes.
Copy link
Contributor Author

@stephaniehobson stephaniehobson Jan 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure why this difference existed before or even why we are explicitly declaring it here. I'm going to leave the declaration incase it solved a problem.

However, I believe the text in the select box should match the text colour of the other form components and this does.

outline: none;

.mzp-t-dark & {
box-shadow: forms.$field-focus-ring-dark;
box-shadow: var(--theme-field-focus-ring-dark);
}
}

.mzp-is-error & {
border-color: forms.$field-border-color-error;
border-color: var(--theme-field-border-color-error);
box-shadow: none;

&:hover {
border-color: forms.$field-border-color-error-hover;
border-color: var(--theme-field-border-color-error-hover);
}

&:focus {
border-color: forms.$form-red;
box-shadow: forms.$field-focus-ring-error;
border-color: var(--theme-form-red);
box-shadow: var(--theme-field-focus-ring-error);
}
}

&:disabled,
&[aria-disabled='true'] {
background-image: $url-image-caret-down-form, forms.$select-bg-disabled;
border-color: forms.$field-border-color-disabled;
color: forms.$form-inactive;
border-color: var(--theme-field-border-color-disabled);
color: var(--theme-form-text-color-inactive);

&:hover {
border-color: forms.$field-border-color-disabled;
border-color: var(--theme-field-border-color-disabled);
}

&:focus {
border-color: forms.$field-border-color-disabled-focus;
border-color: var(--theme-field-border-color-disabled-focus);
}
}

Expand All @@ -386,7 +387,7 @@ select {
@include forms.form-info;

.mzp-is-error & {
color: forms.$form-red;
color: var(--theme-form-red);
}
}

Expand All @@ -395,9 +396,9 @@ select {

.mzp-c-form-errors {
@include white-links;
background-color: forms.$form-red;
background-color: var(--theme-form-red);
border-radius: forms.$field-border-radius;
color: $color-white;
color: var(--theme-body-text-color-inverse);
padding: $spacing-sm;
margin-bottom: $spacing-xl;

Expand All @@ -418,6 +419,6 @@ select {
input[type='checkbox'],
input[type='radio'] {
border-radius: forms.$field-border-radius;
box-shadow: forms.$field-focus-ring-error;
box-shadow: var(--theme-field-focus-ring-error);
}
}
19 changes: 3 additions & 16 deletions assets/sass/protocol/base/elements/_links.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,36 +11,23 @@
// 4. Focus

a {
color: $link-color;
color: var(--theme-link-color);
text-decoration: underline;

// where is used to decrease specificity to avoid conflicts with button styles
&:where(:visited) {
color: $link-color-visited;
color: var(--theme-link-color-visited);
}

&:hover,
&:active {
color: $link-color-hover;
color: var(--theme-link-color-hover);
text-decoration: none;
}

&:active {
background-color: rgb(0, 0, 0, 0.05);
}

@supports (--css: variables) {
color: var(--link-color);

&:where(:visited) {
color: var(--link-color-visited);
}

&:hover,
&:active {
color: var(--link-color-hover);
}
}
}

.mzp-t-dark {
Expand Down
12 changes: 2 additions & 10 deletions assets/sass/protocol/base/elements/_quotes.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,14 @@ blockquote {
@include text-heading-sm;
border-color: $color-marketing-gray-20;
border-style: solid;
color: $title-text-color;
color: var(--theme-heading-text-color);
font-weight: bold;
margin: $spacing-lg auto;
padding: $spacing-sm $spacing-lg;

cite {
@include text-heading-xs;
color: $body-text-color-secondary;
color: var(--theme-body-text-color-secondary);

&::before {
content: '— ';
Expand All @@ -26,12 +26,4 @@ blockquote {
& > :last-child {
margin-bottom: 0;
}

@supports (--css: variables) {
color: var(--heading-text-color);

cite {
color: var(--body-text-color-secondary);
}
}
}
12 changes: 2 additions & 10 deletions assets/sass/protocol/base/elements/_titles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,23 +12,15 @@ h3,
h4,
h5,
h6 {
color: $title-text-color;
color: var(--theme-heading-text-color);
font-family: var(--theme-heading-font-family);
font-variant-ligatures: var(--theme-heading-font-ligatures);
letter-spacing: var(--theme-heading-letter-spacing);
text-wrap: balance;
margin: 0 0 0.5em;

.mzp-t-dark & {
color: $title-text-color-inverse;
}

@supports (--css: variables) {
color: var(--heading-text-color);

.mzp-t-dark & {
color: var(--heading-text-color-inverse);
}
color: var(--theme-heading-text-color-inverse);
}
}

Expand Down
Loading