Skip to content

Commit b853162

Browse files
stephaniehobsonstephaniehobson
committed
Refactor color to use CSS custom properties (#982)
Refactor color system to use CSS custom properties. This is the second PR in a refactor of how we use CSS variables (#982), following the typography refactor (#1107). Some kind of basic fallback support for older browsers will be added back in a later PR once we can get a clear picture of how broken things are. I know this looks big but for the most part it's just a straight find/replace on variable names or moving @includes to the end of declarations. Modernization: Default to CSS vars for colors, backgrounds, and borders Removed @supports declarations if they only had color declarations Color mixins now use CSS vars Reorganization: Added --theme- prefix to variables expected to morph Added --token- prefix to unchanging variables Created root/_color.scss for color token definitions Created root/_theme.scss for theme color mappings Created root/_spacing.scss for spacing tokens Moved theme definitions to includes/themes/ Bug fixes: Moved @include statements to end of declarations
1 parent 865863d commit b853162

52 files changed

Lines changed: 659 additions & 577 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎CHANGELOG.md‎

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,18 @@ Introducing theme variables! CSS variables beginning with `--theme-` will adjust
2828

2929
## Color
3030

31-
* To come in follow up PR.
31+
* Modernization:
32+
* Default to CSS vars for all color values
33+
* Removed `@supports` declarations if they only had color declarations
34+
* Components now use `var(--theme-*)` variables directly
35+
* Reorganization:
36+
* Added `--theme-` prefix to color variables expected to morph between light/dark modes
37+
* Added `--token-` prefix to unchanging color values (e.g., `--token-color-marketing-gray-20`)
38+
* Renamed `$title-text-color` → `--theme-heading-text-color` (to match typography naming)
39+
* Added new form color variables (`--theme-form-*`, `--theme-field-*`)
40+
* Added status color variables (`--theme-color-success-*`, `--theme-color-error-*`, `--theme-color-warning-*`, `--theme-color-info-*`)
41+
* Added RGB component variables for alpha channel usage (`--token-color-white-rgb`, `--token-color-black-rgb`)
42+
* Removed Sass color variables from `_themes-sass.scss` (use CSS variables instead)
3243

3344
## Migration Tips
3445

@@ -65,6 +76,18 @@ See the [Migration Guide](https://protocol.mozilla.org/docs/usage/migration) for
6576
* `type-scale()` function and associated lookup tables
6677
* `text-body-cta` mixin (use `text-body-md` instead)
6778
* You can remove `@supports (--css: variables)` blocks that only contain font declarations, as CSS custom properties are now required.
79+
* Rename CSS color variables to use `--theme-` prefix:
80+
* `--(background-color|body-text-color|link-color|heading-text-color)(-*)` → `--theme-$1$2`
81+
* Removed Sass color variables (use CSS variables instead):
82+
* `$(background-color|body-text-color|link-color)(-*)` → `var(--theme-$1$2)`
83+
* `$title-text-color(-inverse)?` → `var(--theme-heading-text-color$1)` (note: renamed to `heading`)
84+
* Removed form Sass variables (use CSS variables instead):
85+
* `forms.$form-red` → `var(--theme-form-red)`
86+
* `forms.$form-text` → `var(--theme-form-text-color)`
87+
* `forms.$form-inactive` → `var(--theme-form-text-color-inactive)`
88+
* `forms.$(field-border-color|field-border|field-focus-ring)(-*)` → `var(--theme-$1$2)`
89+
* `forms.$button-border-color-focus` → `var(--theme-button-border-color-focus)`
90+
* You can remove `@supports (--css: variables)` blocks that only contain color declarations, as CSS custom properties are now required.
6891

6992
# 22.0.0
7093

‎assets/sass/protocol/base/elements/_common.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ code {
1919
}
2020

2121
hr {
22-
border: 0 solid $color-marketing-gray-20;
22+
border: 0 solid var(--token-color-marketing-gray-20);
2323
border-top-width: 4px;
2424
margin: $layout-md 0;
2525

‎assets/sass/protocol/base/elements/_document.scss‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,15 @@
66

77
html {
88
font-size: 100%;
9-
background: $color-white;
9+
background: var(--theme-background-color);
1010
}
1111

1212
body {
13-
background: $background-color;
14-
color: $body-text-color;
13+
background: var(--theme-background-color);
14+
color: var(--theme-body-text-color);
1515
-moz-osx-font-smoothing: grayscale;
1616
-webkit-font-smoothing: antialiased;
1717
@include text-body-md;
18-
19-
@supports (--css: variable) {
20-
background: var(--background-color);
21-
color: var(--body-text-color);
22-
}
2318
}
2419

2520
// A few places use a class to hide elements. We should try to avoid that.

‎assets/sass/protocol/base/elements/_forms.scss‎

Lines changed: 44 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -134,45 +134,45 @@ input[type='url'] {
134134
@include forms.form-input;
135135

136136
&::placeholder {
137-
color: forms.$form-inactive;
137+
color: var(--theme-form-text-color-inactive);
138138
}
139139

140140
&:hover {
141-
border-color: forms.$field-border-color-hover;
141+
border-color: var(--theme-field-border-color-hover);
142142
}
143143

144144
&:focus {
145145
outline: none;
146-
border-color: forms.$field-border-color-focus;
147-
box-shadow: forms.$field-focus-ring;
146+
border-color: var(--theme-field-border-color-focus);
147+
box-shadow: var(--theme-field-focus-ring);
148148

149149
.mzp-t-dark & {
150-
box-shadow: forms.$field-focus-ring-dark;
150+
box-shadow: var(--theme-field-focus-ring-dark);
151151
}
152152
}
153153

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

158158
&:hover {
159-
border-color: forms.$field-border-color-error-hover;
159+
border-color: var(--theme-field-border-color-error-hover);
160160
}
161161

162162
&:focus {
163-
border-color: forms.$form-red;
164-
box-shadow: forms.$field-focus-ring-error;
163+
border-color: var(--theme-form-red);
164+
box-shadow: var(--theme-field-focus-ring-error);
165165
}
166166
}
167167

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

174174
&:focus {
175-
border-color: forms.$field-border-color-disabled-focus;
175+
border-color: var(--theme-field-border-color-disabled-focus);
176176
}
177177
}
178178
}
@@ -247,44 +247,44 @@ input[type='search'] {
247247

248248
input[type='color'],
249249
input[type='file'] {
250-
background: $color-white;
250+
background: var(--theme-background-color);
251251
border-radius: forms.$field-border-radius;
252-
border: forms.$field-border;
252+
border: var(--theme-field-border);
253253
line-height: var(--theme-button-line-height);
254254
margin: 0 0 forms.$field-v-spacing;
255255

256256
&:hover {
257-
border-color: forms.$field-border-color-hover;
257+
border-color: var(--theme-field-border-color-hover);
258258
}
259259

260260
&:focus {
261-
border-color: forms.$field-border-color-focus;
262-
box-shadow: forms.$field-focus-ring;
261+
border-color: var(--theme-field-border-color-focus);
262+
box-shadow: var(--theme-field-focus-ring);
263263
outline: none;
264264
}
265265

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

270270
&:hover {
271-
border-color: forms.$field-border-color-error-hover;
271+
border-color: var(--theme-field-border-color-error-hover);
272272
}
273273

274274
&:focus {
275-
border-color: forms.$form-red;
276-
box-shadow: forms.$field-focus-ring-error;
275+
border-color: var(--theme-form-red);
276+
box-shadow: var(--theme-field-focus-ring-error);
277277
}
278278
}
279279

280280
&:disabled,
281281
&[aria-disabled='true'] {
282-
background: forms.$field-border-color-disabled;
283-
border-color: forms.$field-border-color-disabled;
284-
color: forms.$form-inactive;
282+
background: var(--theme-field-border-color-disabled);
283+
border-color: var(--theme-field-border-color-disabled);
284+
color: var(--theme-form-text-color-inactive);
285285

286286
&:focus {
287-
border-color: forms.$field-border-color-disabled-focus;
287+
border-color: var(--theme-field-border-color-disabled-focus);
288288
}
289289
}
290290
}
@@ -319,7 +319,7 @@ select {
319319
&,
320320
&:hover,
321321
&:focus {
322-
background: $color-white;
322+
background: var(--theme-background-color);
323323
padding: forms.$field-padding;
324324
}
325325
}
@@ -329,48 +329,48 @@ select {
329329
}
330330

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

336336
&:focus {
337-
border-color: forms.$field-border-color-focus;
337+
border-color: var(--theme-field-border-color-focus);
338338
background-image: $url-image-caret-down-link, forms.$select-bg;
339-
box-shadow: forms.$field-focus-ring;
340-
color: #222;
339+
box-shadow: var(--theme-field-focus-ring);
340+
color: var(--theme-body-text-color);
341341
outline: none;
342342

343343
.mzp-t-dark & {
344-
box-shadow: forms.$field-focus-ring-dark;
344+
box-shadow: var(--theme-field-focus-ring-dark);
345345
}
346346
}
347347

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

352352
&:hover {
353-
border-color: forms.$field-border-color-error-hover;
353+
border-color: var(--theme-field-border-color-error-hover);
354354
}
355355

356356
&:focus {
357-
border-color: forms.$form-red;
358-
box-shadow: forms.$field-focus-ring-error;
357+
border-color: var(--theme-form-red);
358+
box-shadow: var(--theme-field-focus-ring-error);
359359
}
360360
}
361361

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

368368
&:hover {
369-
border-color: forms.$field-border-color-disabled;
369+
border-color: var(--theme-field-border-color-disabled);
370370
}
371371

372372
&:focus {
373-
border-color: forms.$field-border-color-disabled-focus;
373+
border-color: var(--theme-field-border-color-disabled-focus);
374374
}
375375
}
376376

@@ -386,7 +386,7 @@ select {
386386
@include forms.form-info;
387387

388388
.mzp-is-error & {
389-
color: forms.$form-red;
389+
color: var(--theme-form-red);
390390
}
391391
}
392392

@@ -395,9 +395,9 @@ select {
395395

396396
.mzp-c-form-errors {
397397
@include white-links;
398-
background-color: forms.$form-red;
398+
background-color: var(--theme-form-red);
399399
border-radius: forms.$field-border-radius;
400-
color: $color-white;
400+
color: var(--theme-body-text-color-inverse);
401401
padding: $spacing-sm;
402402
margin-bottom: $spacing-xl;
403403

@@ -418,6 +418,6 @@ select {
418418
input[type='checkbox'],
419419
input[type='radio'] {
420420
border-radius: forms.$field-border-radius;
421-
box-shadow: forms.$field-focus-ring-error;
421+
box-shadow: var(--theme-field-focus-ring-error);
422422
}
423423
}

‎assets/sass/protocol/base/elements/_links.scss‎

Lines changed: 3 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -11,36 +11,23 @@
1111
// 4. Focus
1212

1313
a {
14-
color: $link-color;
14+
color: var(--theme-link-color);
1515
text-decoration: underline;
1616

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

2222
&:hover,
2323
&:active {
24-
color: $link-color-hover;
24+
color: var(--theme-link-color-hover);
2525
text-decoration: none;
2626
}
2727

2828
&:active {
2929
background-color: rgb(0, 0, 0, 0.05);
3030
}
31-
32-
@supports (--css: variables) {
33-
color: var(--link-color);
34-
35-
&:where(:visited) {
36-
color: var(--link-color-visited);
37-
}
38-
39-
&:hover,
40-
&:active {
41-
color: var(--link-color-hover);
42-
}
43-
}
4431
}
4532

4633
.mzp-t-dark {

‎assets/sass/protocol/base/elements/_quotes.scss‎

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,16 @@
77
blockquote {
88
@include bidi(((border-width, 0 0 0 5px, 0 5px 0 0),));
99
@include text-heading-sm;
10-
border-color: $color-marketing-gray-20;
10+
border-color: var(--token-color-marketing-gray-20);
1111
border-style: solid;
12-
color: $title-text-color;
12+
color: var(--theme-heading-text-color);
1313
font-weight: bold;
1414
margin: $spacing-lg auto;
1515
padding: $spacing-sm $spacing-lg;
1616

1717
cite {
1818
@include text-heading-xs;
19-
color: $body-text-color-secondary;
19+
color: var(--theme-body-text-color-secondary);
2020

2121
&::before {
2222
content: '— ';
@@ -26,12 +26,4 @@ blockquote {
2626
& > :last-child {
2727
margin-bottom: 0;
2828
}
29-
30-
@supports (--css: variables) {
31-
color: var(--heading-text-color);
32-
33-
cite {
34-
color: var(--body-text-color-secondary);
35-
}
36-
}
3729
}

‎assets/sass/protocol/base/elements/_titles.scss‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -12,23 +12,15 @@ h3,
1212
h4,
1313
h5,
1414
h6 {
15-
color: $title-text-color;
15+
color: var(--theme-heading-text-color);
1616
font-family: var(--theme-heading-font-family);
1717
font-variant-ligatures: var(--theme-heading-font-ligatures);
1818
letter-spacing: var(--theme-heading-letter-spacing);
1919
text-wrap: balance;
2020
margin: 0 0 0.5em;
2121

2222
.mzp-t-dark & {
23-
color: $title-text-color-inverse;
24-
}
25-
26-
@supports (--css: variables) {
27-
color: var(--heading-text-color);
28-
29-
.mzp-t-dark & {
30-
color: var(--heading-text-color-inverse);
31-
}
23+
color: var(--theme-heading-text-color-inverse);
3224
}
3325
}
3426

0 commit comments

Comments
 (0)