Skip to content

Commit 8cc84e9

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 998f18e commit 8cc84e9

Some content is hidden

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

51 files changed

+589
-551
lines changed

‎CHANGELOG.md‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,15 @@ Introducing theme variables! CSS variables beginning with `--theme-` will adjust
3636

3737
## Color
3838

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

4149
## Migration Tips
4250

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

95115
# 22.0.0
96116

‎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: 46 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
44

55
@use '../../includes/lib' as *;
6+
@use '../../includes/tokens' as tokens;
67
@use '../../includes/forms';
78

89
// * -------------------------------------------------------------------------- */
@@ -47,7 +48,7 @@ textarea {
4748

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

136137
&::placeholder {
137-
color: forms.$form-inactive;
138+
color: var(--theme-form-text-color-inactive);
138139
}
139140

140141
&:hover {
141-
border-color: forms.$field-border-color-hover;
142+
border-color: var(--theme-field-border-color-hover);
142143
}
143144

144145
&:focus {
145146
outline: none;
146-
border-color: forms.$field-border-color-focus;
147-
box-shadow: forms.$field-focus-ring;
147+
border-color: var(--theme-field-border-color-focus);
148+
box-shadow: var(--theme-field-focus-ring);
148149

149150
.mzp-t-dark & {
150-
box-shadow: forms.$field-focus-ring-dark;
151+
box-shadow: var(--theme-field-focus-ring-dark);
151152
}
152153
}
153154

154155
.mzp-is-error & {
155-
border-color: forms.$field-border-color-error;
156+
border-color: var(--theme-field-border-color-error);
156157
box-shadow: none;
157158

158159
&:hover {
159-
border-color: forms.$field-border-color-error-hover;
160+
border-color: var(--theme-field-border-color-error-hover);
160161
}
161162

162163
&:focus {
163-
border-color: forms.$form-red;
164-
box-shadow: forms.$field-focus-ring-error;
164+
border-color: var(--theme-form-red);
165+
box-shadow: var(--theme-field-focus-ring-error);
165166
}
166167
}
167168

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

174175
&:focus {
175-
border-color: forms.$field-border-color-disabled-focus;
176+
border-color: var(--theme-field-border-color-disabled-focus);
176177
}
177178
}
178179
}
@@ -247,44 +248,44 @@ input[type='search'] {
247248

248249
input[type='color'],
249250
input[type='file'] {
250-
background: $color-white;
251+
background: var(--theme-background-color);
251252
border-radius: forms.$field-border-radius;
252-
border: forms.$field-border;
253+
border: var(--theme-field-border);
253254
line-height: var(--theme-button-line-height);
254255
margin: 0 0 forms.$field-v-spacing;
255256

256257
&:hover {
257-
border-color: forms.$field-border-color-hover;
258+
border-color: var(--theme-field-border-color-hover);
258259
}
259260

260261
&:focus {
261-
border-color: forms.$field-border-color-focus;
262-
box-shadow: forms.$field-focus-ring;
262+
border-color: var(--theme-field-border-color-focus);
263+
box-shadow: var(--theme-field-focus-ring);
263264
outline: none;
264265
}
265266

266267
.mzp-is-error & {
267-
border-color: forms.$field-border-color-error;
268+
border-color: var(--theme-field-border-color-error);
268269
box-shadow: none;
269270

270271
&:hover {
271-
border-color: forms.$field-border-color-error-hover;
272+
border-color: var(--theme-field-border-color-error-hover);
272273
}
273274

274275
&:focus {
275-
border-color: forms.$form-red;
276-
box-shadow: forms.$field-focus-ring-error;
276+
border-color: var(--theme-form-red);
277+
box-shadow: var(--theme-field-focus-ring-error);
277278
}
278279
}
279280

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

286287
&:focus {
287-
border-color: forms.$field-border-color-disabled-focus;
288+
border-color: var(--theme-field-border-color-disabled-focus);
288289
}
289290
}
290291
}
@@ -319,7 +320,7 @@ select {
319320
&,
320321
&:hover,
321322
&:focus {
322-
background: $color-white;
323+
background: var(--theme-background-color);
323324
padding: forms.$field-padding;
324325
}
325326
}
@@ -329,48 +330,48 @@ select {
329330
}
330331

331332
&:hover {
332-
border-color: forms.$field-border-color-hover;
333+
border-color: var(--theme-field-border-color-hover);
333334
background-image: $url-image-caret-down-link-hover, forms.$select-bg;
334335
}
335336

336337
&:focus {
337-
border-color: forms.$field-border-color-focus;
338+
border-color: var(--theme-field-border-color-focus);
338339
background-image: $url-image-caret-down-link, forms.$select-bg;
339-
box-shadow: forms.$field-focus-ring;
340-
color: #222;
340+
box-shadow: var(--theme-field-focus-ring);
341+
color: var(--theme-body-text-color);
341342
outline: none;
342343

343344
.mzp-t-dark & {
344-
box-shadow: forms.$field-focus-ring-dark;
345+
box-shadow: var(--theme-field-focus-ring-dark);
345346
}
346347
}
347348

348349
.mzp-is-error & {
349-
border-color: forms.$field-border-color-error;
350+
border-color: var(--theme-field-border-color-error);
350351
box-shadow: none;
351352

352353
&:hover {
353-
border-color: forms.$field-border-color-error-hover;
354+
border-color: var(--theme-field-border-color-error-hover);
354355
}
355356

356357
&:focus {
357-
border-color: forms.$form-red;
358-
box-shadow: forms.$field-focus-ring-error;
358+
border-color: var(--theme-form-red);
359+
box-shadow: var(--theme-field-focus-ring-error);
359360
}
360361
}
361362

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

368369
&:hover {
369-
border-color: forms.$field-border-color-disabled;
370+
border-color: var(--theme-field-border-color-disabled);
370371
}
371372

372373
&:focus {
373-
border-color: forms.$field-border-color-disabled-focus;
374+
border-color: var(--theme-field-border-color-disabled-focus);
374375
}
375376
}
376377

@@ -386,7 +387,7 @@ select {
386387
@include forms.form-info;
387388

388389
.mzp-is-error & {
389-
color: forms.$form-red;
390+
color: var(--theme-form-red);
390391
}
391392
}
392393

@@ -395,9 +396,9 @@ select {
395396

396397
.mzp-c-form-errors {
397398
@include white-links;
398-
background-color: forms.$form-red;
399+
background-color: var(--theme-form-red);
399400
border-radius: forms.$field-border-radius;
400-
color: $color-white;
401+
color: var(--theme-body-text-color-inverse);
401402
padding: $spacing-sm;
402403
margin-bottom: $spacing-xl;
403404

@@ -418,6 +419,6 @@ select {
418419
input[type='checkbox'],
419420
input[type='radio'] {
420421
border-radius: forms.$field-border-radius;
421-
box-shadow: forms.$field-focus-ring-error;
422+
box-shadow: var(--theme-field-focus-ring-error);
422423
}
423424
}

‎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: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,14 @@ blockquote {
99
@include text-heading-sm;
1010
border-color: $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)