Skip to content

Commit 9356418

Browse files
philwarehamphilwareham
committed
Save a few bytes
1 parent 74c9248 commit 9356418

22 files changed

+372
-372
lines changed

‎src/assets/sass/designpatterns.scss‎

Lines changed: 36 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
========================================================================== */
66

77
body {
8-
background-color: var(--color-bkgd);
9-
color: var(--color-text);
8+
background-color: var(--clr-bkgd);
9+
color: var(--clr-text);
1010
}
1111

1212
main {
@@ -26,7 +26,7 @@ main {
2626
*/
2727

2828
.information code {
29-
color: var(--color-text);
29+
color: var(--clr-text);
3030
}
3131

3232

@@ -38,45 +38,45 @@ main {
3838
*/
3939

4040
$colors: (
41-
"text": var(--color-text),
42-
"text-visual-de-emphasis": var(--color-text-secondary),
43-
"grad-from": var(--color-grad-from),
44-
"grad-to": var(--color-grad-to),
45-
"border": var(--color-brdr),
46-
"border-light": var(--color-brdr-light),
47-
"border-extra-light": var(--color-brdr-extra-light),
48-
"border-dark": var(--color-brdr-dark),
49-
"border-extra-dark": var(--color-brdr-extra-dark),
50-
"link": var(--color-link),
51-
"link-hover": var(--color-link-hover),
52-
"link-focus": var(--color-link-focus),
53-
"nav-hover": var(--color-nav-hover),
54-
"nav-hover-selected": var(--color-nav-hover-selected),
55-
"nav-active": var(--color-nav-active),
56-
"background": var(--color-bkgd),
57-
"background-box": var(--color-bkgd-box),
58-
"highlight-box": var(--color-highlight-box),
59-
"strong-highlight-box": var(--color-strong-highlight-box),
60-
"highlight": var(--color-highlight),
61-
"success-text": var(--color-success-text),
62-
"success-background": var(--color-success-bkgd),
63-
"warning-text": var(--color-warning-text),
64-
"warning-background": var(--color-warning-bkgd),
65-
"error-text": var(--color-error-text),
66-
"error-background": var(--color-error-bkgd),
67-
"info-text": var(--color-info-text),
68-
"info-background": var(--color-info-bkgd)
41+
"text": var(--clr-text),
42+
"text-visual-de-emphasis": var(--clr-text-secondary),
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)
6969
);
7070

7171
.design-patterns--color {
7272
display: block;
7373
height: 2.375em; // 38px / 16px
7474
margin: 1em 0;
75-
border: 1px solid var(--color-brdr);
75+
border: 1px solid var(--clr-brdr);
7676
}
7777

7878
@each $name, $color in $colors {
79-
.design-patterns--color-#{$name} {
79+
.design-patterns--clr-#{$name} {
8080
background: $color;
8181
}
8282
}
@@ -179,8 +179,8 @@ $colors: (
179179
padding: 0.5em 2%;
180180
overflow-x: hidden;
181181
overflow-y: auto;
182-
border-right: 1px solid var(--color-brdr);
183-
background-color: var(--color-bkgd-box);
182+
border-right: 1px solid var(--clr-brdr);
183+
background-color: var(--clr-bkgd-box);
184184
box-shadow: inset -0.25em 0 0.25em -0.25em rgba(0, 0, 0, 0.2);
185185
}
186186

@@ -197,6 +197,6 @@ $colors: (
197197

198198
@media (prefers-color-scheme: dark) and (min-width: setup.$breakpoint-3) {
199199
.docs-menu {
200-
border-right-color: var(--color-brdr-extra-dark);
200+
border-right-color: var(--clr-brdr-extra-dark);
201201
}
202202
}

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

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -15,19 +15,19 @@
1515
*/
1616

1717
.success {
18-
color: var(--color-success-text);
18+
color: var(--clr-success-text);
1919
}
2020

2121
.warning {
22-
color: var(--color-warning-text);
22+
color: var(--clr-warning-text);
2323
}
2424

2525
.error {
26-
color: var(--color-error-text);
26+
color: var(--clr-error-text);
2727
}
2828

2929
.information {
30-
color: var(--color-info-text);
30+
color: var(--clr-info-text);
3131
}
3232

3333
/**
@@ -44,7 +44,7 @@
4444
*/
4545

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

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

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

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

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

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

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

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -58,17 +58,17 @@
5858
display: inline-block;
5959
margin-top: 0.5em;
6060
padding: 0.1666667em 0.6666667em; // 2px / 12px + 8px / 12px
61-
border: 1px solid var(--color-text);
61+
border: 1px solid var(--clr-text);
6262
border-radius: 1em;
63-
background: var(--color-text);
64-
color: var(--color-text-white-enforced);
63+
background: var(--clr-text);
64+
color: var(--clr-text-white-enforced);
6565
}
6666

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

@@ -77,9 +77,9 @@
7777
}
7878

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

8585
// Put a bit more margin on 2nd category link, if it exists (for better touch accessibility).
@@ -95,19 +95,19 @@
9595
a,
9696
.article-author,
9797
.compatibility {
98-
border-color: var(--color-bkgd-form);
99-
background: var(--color-bkgd-form);
98+
border-color: var(--clr-bkgd-form);
99+
background: var(--clr-bkgd-form);
100100
}
101101

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

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

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
.breadcrumbs {
1818
margin: 0 -1.3333333em;
1919
padding: 0.5em 1.3333333em; // 6px / 12px + 16px / 12px
20-
background-color: var(--color-bkgd-box);
20+
background-color: var(--clr-bkgd-box);
2121
list-style: none;
2222
font-size: setup.$small-font-size;
2323

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

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -34,18 +34,18 @@ button,
3434
[type="reset"],
3535
[type="submit"],
3636
.button {
37-
@include setup.gradient-linear(var(--color-btn-grad-from), var(--color-btn-grad-to));
37+
@include setup.gradient-linear(var(--clr-btn-grad-from), var(--clr-btn-grad-to));
3838

3939
display: inline-block;
4040
position: relative;
4141
width: auto;
4242
height: auto;
4343
padding: 0.25em 1em; // 4px / 16px
44-
border: 1px solid var(--color-btn-border);
44+
border: 1px solid var(--clr-btn-border);
4545
border-radius: 1em;
4646
background-clip: padding-box;
47-
box-shadow: 0 2px 0 var(--color-btn-shadow);
48-
color: var(--color-text-button);
47+
box-shadow: 0 2px 0 var(--clr-btn-shadow);
48+
color: var(--clr-text-button);
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(--color-btn-border-interact);
58-
color: var(--color-text-button-interact);
57+
border-color: var(--clr-btn-border-interact);
58+
color: var(--clr-text-button-interact);
5959
text-decoration: none;
6060
}
6161

@@ -72,7 +72,7 @@ button,
7272
}
7373

7474
&:focus {
75-
border-color: var(--color-link-focus);
75+
border-color: var(--clr-a-focus);
7676
outline: 2px solid transparent; // Allows for repainting in high contrast modes.
7777
}
7878
}
@@ -86,23 +86,23 @@ button,
8686
*/
8787

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

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

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

100100
&:active {
101101
box-shadow: none;
102102
}
103103

104104
&:focus {
105-
border-color: var(--color-link-focus);
105+
border-color: var(--clr-a-focus);
106106
}
107107
}
108108

@@ -143,7 +143,7 @@ button,
143143
display: inline-block;
144144
margin: -0.5em 0 -0.5em 0.25em;
145145
padding: 0.5em 0 0.5em 0.5em;
146-
border-left: 1px solid var(--color-btn-primary-shadow);
146+
border-left: 1px solid var(--clr-btn-primary-shadow);
147147
font-weight: normal;
148148
}
149149

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

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
flex: 1 0 0%;
3030
flex-direction: column;
3131
margin: 0.5em 0 1.5em;
32-
border: 1px solid var(--color-brdr-light);
32+
border: 1px solid var(--clr-brdr-light);
3333
word-wrap: break-word;
3434

3535
.alert-pill {
@@ -65,14 +65,14 @@
6565
.card-header,
6666
.card-footer {
6767
padding: 0.33rem 1rem;
68-
background: var(--color-bkgd-box);
68+
background: var(--clr-bkgd-box);
6969
}
7070

7171
.card-header {
72-
border-bottom: 1px solid var(--color-brdr-light);
72+
border-bottom: 1px solid var(--clr-brdr-light);
7373
}
7474

7575
.card-footer {
76-
border-top: 1px solid var(--color-brdr-light);
76+
border-top: 1px solid var(--clr-brdr-light);
7777
}
7878

0 commit comments

Comments
 (0)