Skip to content

Commit 073e353

Browse files
philwarehamphilwareham
committed
Finish move to CSS custom variables
1 parent f4f9043 commit 073e353

File tree

15 files changed

+222
-215
lines changed

15 files changed

+222
-215
lines changed

‎src/assets/sass/designpatterns.scss‎

Lines changed: 30 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -38,34 +38,35 @@ main {
3838
*/
3939

4040
$colors: (
41-
"text": var(--clr-text),
42-
"text-visual-de-emphasis": var(--clr-text-demoted),
43-
"grad-from": var(--clr-grad-from),
44-
"grad-to": var(--clr-grad-to),
45-
"border": var(--clr-brdr),
46-
"border-light": var(--clr-brdr-light),
47-
"border-extra-light": var(--clr-brdr-extra-light),
48-
"border-dark": var(--clr-brdr-dark),
49-
"border-extra-dark": var(--clr-brdr-extra-dark),
50-
"link": var(--clr-a),
51-
"link-hover": var(--clr-a-hover),
52-
"link-focus": var(--clr-a-focus),
53-
"nav-hover": var(--clr-nav-hover),
54-
"nav-hover-selected": var(--clr-nav-hover-selected),
55-
"nav-active": var(--clr-nav-active),
56-
"background": var(--clr-bkgd),
57-
"background-box": var(--clr-bkgd-box),
58-
"highlight-box": var(--clr-highlight-box),
59-
"strong-highlight-box": var(--clr-strong-highlight-box),
60-
"highlight": var(--clr-highlight),
61-
"success-text": var(--clr-success-text),
62-
"success-background": var(--clr-success-bkgd),
63-
"warning-text": var(--clr-warning-text),
64-
"warning-background": var(--clr-warning-bkgd),
65-
"error-text": var(--clr-error-text),
66-
"error-background": var(--clr-error-bkgd),
67-
"info-text": var(--clr-info-text),
68-
"info-background": var(--clr-info-bkgd)
41+
"text-promoted": var(--clr-text-promoted),
42+
"text": var(--clr-text),
43+
"text-demoted": var(--clr-text-demoted),
44+
"grad-from": var(--clr-grad-from),
45+
"grad-to": var(--clr-grad-to),
46+
"brdr-x-light": var(--clr-brdr-x-light),
47+
"brdr-light": var(--clr-brdr-light),
48+
"brdr": var(--clr-brdr),
49+
"brdr-dark": var(--clr-brdr-dark),
50+
"brdr-x-dark": var(--clr-brdr-x-dark),
51+
"a": var(--clr-a),
52+
"a-interact": var(--clr-a-interact),
53+
"a-focus": var(--clr-a-focus),
54+
"nav-hover": var(--clr-nav-hover),
55+
"nav-hover-selected": var(--clr-nav-hover-selected),
56+
"nav-active": var(--clr-nav-active),
57+
"bkgd": var(--clr-bkgd),
58+
"bkgd-box": var(--clr-bkgd-box),
59+
"hilite-box": var(--clr-hilite-box),
60+
"strong-hilite-box": var(--clr-strong-hilite-box),
61+
"hilite": var(--clr-hilite),
62+
"success-text": var(--clr-success-text),
63+
"success-bkgd": var(--clr-success-bkgd),
64+
"warning-text": var(--clr-warning-text),
65+
"warning-bkgd": var(--clr-warning-bkgd),
66+
"error-text": var(--clr-error-text),
67+
"error-bkgd": var(--clr-error-bkgd),
68+
"info-text": var(--clr-info-text),
69+
"info-bkgd": var(--clr-info-bkgd)
6970
);
7071

7172
.design-patterns--color {
@@ -197,6 +198,6 @@ $colors: (
197198

198199
@media (prefers-color-scheme: dark) and (min-width: setup.$breakpoint-3) {
199200
.docs-menu {
200-
border-right-color: var(--clr-brdr-extra-dark);
201+
border-right-color: var(--clr-brdr-x-dark);
201202
}
202203
}

‎src/assets/sass/modules/_alerts.scss‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444
*/
4545

4646
.highlighted {
47-
background: var(--clr-highlight-box);
47+
background: var(--clr-hilite-box);
4848
}
4949

5050
/**
@@ -65,22 +65,22 @@
6565
word-wrap: break-word; /* 1 */
6666

6767
&.success {
68-
border-color: var(--clr-success-border);
68+
border-color: var(--clr-success-brdr);
6969
background: var(--clr-success-bkgd);
7070
}
7171

7272
&.warning {
73-
border-color: var(--clr-warning-border);
73+
border-color: var(--clr-warning-brdr);
7474
background: var(--clr-warning-bkgd);
7575
}
7676

7777
&.error {
78-
border-color: var(--clr-error-border);
78+
border-color: var(--clr-error-brdr);
7979
background: var(--clr-error-bkgd);
8080
}
8181

8282
&.information {
83-
border-color: var(--clr-info-border);
83+
border-color: var(--clr-info-brdr);
8484
background: var(--clr-info-bkgd);
8585
}
8686
}

‎src/assets/sass/modules/_blog.scss‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -66,9 +66,9 @@
6666

6767
a:hover,
6868
a:active {
69-
border-color: var(--clr-btn-primary-border-interact);
70-
background-color: var(--clr-highlight-enforced);
71-
color: var(--clr-text-button);
69+
border-color: var(--clr-btn-primary-brdr-interact);
70+
background-color: var(--clr-hilite-enforced);
71+
color: var(--clr-text-btn);
7272
text-decoration: none;
7373
}
7474

@@ -79,7 +79,7 @@
7979
a:focus {
8080
border-color: var(--clr-a-focus);
8181
outline: 2px solid transparent; // Allows for repainting in high contrast modes.
82-
background-color: var(--clr-highlight-enforced);
82+
background-color: var(--clr-hilite-enforced);
8383
}
8484

8585
// Put a bit more margin on 2nd category link, if it exists (for better touch accessibility).
@@ -101,13 +101,13 @@
101101

102102
a:hover,
103103
a:active {
104-
border-color: var(--clr-btn-primary-border-interact);
105-
background-color: var(--clr-highlight-enforced);
104+
border-color: var(--clr-btn-primary-brdr-interact);
105+
background-color: var(--clr-hilite-enforced);
106106
}
107107

108108
a:focus {
109109
border-color: var(--clr-a-focus);
110-
background-color: var(--clr-highlight-enforced);
110+
background-color: var(--clr-hilite-enforced);
111111
}
112112
}
113113
}

‎src/assets/sass/modules/_buttons.scss‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -41,11 +41,11 @@ button,
4141
width: auto;
4242
height: auto;
4343
padding: 0.25em 1em; // 4px / 16px
44-
border: 1px solid var(--clr-btn-border);
44+
border: 1px solid var(--clr-btn-brdr);
4545
border-radius: 1em;
4646
background-clip: padding-box;
4747
box-shadow: 0 2px 0 var(--clr-btn-shadow);
48-
color: var(--clr-text-button);
48+
color: var(--clr-text-btn);
4949
font-weight: normal;
5050
text-align: center;
5151
appearance: none; /* 1 */
@@ -54,8 +54,8 @@ button,
5454

5555
&:hover,
5656
&:active {
57-
border-color: var(--clr-btn-border-interact);
58-
color: var(--clr-text-button-interact);
57+
border-color: var(--clr-btn-brdr-interact);
58+
color: var(--clr-text-btn-interact);
5959
text-decoration: none;
6060
}
6161

@@ -88,13 +88,13 @@ button,
8888
.button-primary {
8989
@include setup.gradient-linear(var(--clr-btn-primary-grad-from), var(--clr-btn-primary-grad-to));
9090

91-
border-color: var(--clr-btn-primary-border);
91+
border-color: var(--clr-btn-primary-brdr);
9292
box-shadow: 0 2px 0 var(--clr-btn-primary-shadow);
9393
font-weight: bolder;
9494

9595
&:hover,
9696
&:active {
97-
border-color: var(--clr-btn-primary-border-interact);
97+
border-color: var(--clr-btn-primary-brdr-interact);
9898
}
9999

100100
&:active {
@@ -169,5 +169,5 @@ button[disabled],
169169
[type="submit"][disabled],
170170
.button.disabled {
171171
top: 0 !important;
172-
background: var(--clr-btn-background-disabled) !important;
172+
background: var(--clr-btn-bkgd-disabled) !important;
173173
}

‎src/assets/sass/modules/_comments.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@
5959
*/
6060

6161
.comments.article-author {
62-
background: var(--clr-highlight-box);
62+
background: var(--clr-hilite-box);
6363

6464
blockquote {
6565
background: var(--clr-bkgd);
@@ -97,7 +97,7 @@
9797
margin-bottom: 2px;
9898
padding: 1em;
9999
border-radius: setup.$border-radius;
100-
background-color: var(--clr-highlight-box);
100+
background-color: var(--clr-hilite-box);
101101
}
102102

103103
/**

‎src/assets/sass/modules/_forms.scss‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ textarea {
111111
appearance: none; /* 1 */
112112

113113
&:hover {
114-
border-color: var(--clr-brdr-extra-dark);
114+
border-color: var(--clr-brdr-x-dark);
115115
}
116116

117117
&:focus {
@@ -137,10 +137,10 @@ textarea {
137137
[type="week"],
138138
select,
139139
textarea {
140-
border-color: var(--clr-brdr-extra-dark);
140+
border-color: var(--clr-brdr-x-dark);
141141

142142
&:hover {
143-
border-color: var(--clr-brdr-extra-light);
143+
border-color: var(--clr-brdr-x-light);
144144
}
145145

146146
&:focus {
@@ -162,7 +162,7 @@ textarea {
162162
width: 16px;
163163
height: 16px;
164164
padding: 0; /* 1 */
165-
border: 1px solid var(--clr-brdr-extra-dark);
165+
border: 1px solid var(--clr-brdr-x-dark);
166166
background: var(--clr-bkgd-form);
167167
appearance: none;
168168

@@ -197,7 +197,7 @@ textarea {
197197
[type="checkbox"],
198198
[type="radio"] {
199199
&:hover {
200-
border-color: var(--clr-brdr-extra-light);
200+
border-color: var(--clr-brdr-x-light);
201201
}
202202
}
203203
}
@@ -229,7 +229,7 @@ textarea {
229229

230230
&:hover,
231231
&:active {
232-
background-color: var( --clr-text-promoted);
232+
background-color: var(--clr-text-promoted);
233233
}
234234

235235
&:focus {
@@ -264,7 +264,7 @@ textarea {
264264
[type="radio"]:checked {
265265
&:hover,
266266
&:active {
267-
border-color: var( --clr-text-promoted);
267+
border-color: var(--clr-text-promoted);
268268
}
269269

270270
&:focus {

‎src/assets/sass/modules/_layout.scss‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ iframe {
3838

3939
noscript {
4040
padding: 0.25em 1em;
41-
background-color: var(--clr-highlight-enforced);
41+
background-color: var(--clr-hilite-enforced);
4242
color: var(--clr-text-black-enforced);
4343
font-size: setup.$small-font-size;
4444
text-align: center;
@@ -92,7 +92,7 @@ noscript {
9292

9393
@include setup.dark-mode {
9494
.wrapper {
95-
border-bottom-color: var(--clr-brdr-extra-dark);
95+
border-bottom-color: var(--clr-brdr-x-dark);
9696
}
9797
}
9898

@@ -556,7 +556,7 @@ main .layout-4col-3span {
556556

557557
@include setup.dark-mode {
558558
.showcases img {
559-
border-color: var(--clr-brdr-extra-dark);
559+
border-color: var(--clr-brdr-x-dark);
560560
box-shadow: 0 0.2em 0.5em hsla(0, 0%, 0%, 0.5);
561561
}
562562

@@ -622,20 +622,20 @@ main .layout-4col-3span {
622622
.count-bubble {
623623
position: relative;
624624
padding: 0.375em; // 6px / 16px
625-
border: 1px solid var(--clr-btn-border);
625+
border: 1px solid var(--clr-btn-brdr);
626626
border-radius: 0.25em; // 4px / 16px
627627
background: var(--clr-bkgd);
628628
color: var(--clr-text);
629629
font-weight: bolder;
630630

631631
&:hover {
632-
border-color: var(--clr-btn-border-interact);
632+
border-color: var(--clr-btn-brdr-interact);
633633
filter: brightness(1.05);
634634
color: var(--clr-text);
635635
text-decoration: none;
636636

637637
&::before {
638-
border-color: transparent var(--clr-btn-border-interact);
638+
border-color: transparent var(--clr-btn-brdr-interact);
639639
}
640640
}
641641

@@ -674,5 +674,5 @@ main .layout-4col-3span {
674674
margin-top: -8px;
675675
border-width: 8px 8px 8px 0;
676676
border-style: solid;
677-
border-color: transparent var(--clr-btn-border);
677+
border-color: transparent var(--clr-btn-brdr);
678678
}

‎src/assets/sass/modules/_links.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,12 +43,12 @@ h4,
4343
h5,
4444
h6 {
4545
a {
46-
color: var( --clr-text-promoted);
46+
color: var(--clr-text-promoted);
4747

4848
&:hover,
4949
&:active {
50-
color: var( --clr-text-promoted);
51-
text-decoration-color: rgba(var( --clr-text-promoted), 0.5); /* 1 */
50+
color: var(--clr-text-promoted);
51+
text-decoration-color: rgba(var(--clr-text-promoted), 0.5); /* 1 */
5252
}
5353
}
5454
}

‎src/assets/sass/modules/_lists.scss‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ td {
4747
*/
4848

4949
li::marker {
50-
color: var( --clr-text-promoted);
50+
color: var(--clr-text-promoted);
5151
}
5252

5353
/**
@@ -64,11 +64,11 @@ dt {
6464
margin-bottom: 1em;
6565
padding-top: 1em;
6666
border-top: 1px solid var(--clr-brdr-light);
67-
color: var( --clr-text-promoted);
67+
color: var(--clr-text-promoted);
6868
font-weight: bolder;
6969

7070
code {
71-
border-color: var(--clr-info-border);
71+
border-color: var(--clr-info-brdr);
7272
background-color: var(--clr-info-bkgd);
7373
}
7474
}
@@ -136,7 +136,7 @@ dd {
136136
bottom: 0.75em;
137137
left: 0.5em;
138138
height: 100%;
139-
border-left: 1px solid var(--clr-brdr-extra-dark);
139+
border-left: 1px solid var(--clr-brdr-x-dark);
140140
}
141141
}
142142

@@ -150,8 +150,8 @@ dd {
150150
left: -1.25em;
151151
width: 0.75em;
152152
height: 0.75em;
153-
border-bottom: 1px solid var(--clr-brdr-extra-dark);
154-
border-left: 1px solid var(--clr-brdr-extra-dark);
153+
border-bottom: 1px solid var(--clr-brdr-x-dark);
154+
border-left: 1px solid var(--clr-brdr-x-dark);
155155
}
156156
}
157157

0 commit comments

Comments
 (0)