Skip to content

Commit a4821c8

Browse files
philwarehamphilwareham
committed
Convert to use CSS custom variables
See #336
1 parent 35de56f commit a4821c8

35 files changed

+613
-1185
lines changed

‎.stylelintrc.yml‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,13 +42,22 @@ rules:
4242
- true
4343
-
4444
ignoreAtRules:
45+
- at-root
4546
- each
4647
- else
48+
- debug
49+
- error
50+
- extend
51+
- for
52+
- forward
4753
- function
4854
- if
4955
- include
5056
- mixin
5157
- return
58+
- use
59+
- warn
60+
- while
5261

5362
# Disallow vendor prefixes for at-rules.
5463
at-rule-no-vendor-prefix: true
@@ -129,7 +138,7 @@ rules:
129138
#custom-media-pattern:
130139

131140
# Require or disallow an empty line before custom properties (Autofixable).
132-
custom-property-empty-line-before: always
141+
custom-property-empty-line-before: never
133142

134143
# Specify a pattern for custom properties.
135144
#custom-property-pattern:
@@ -264,7 +273,7 @@ rules:
264273
function-whitespace-after: always
265274

266275
# Specify number or angle notation for degree hues.
267-
hue-degree-notation: angle
276+
hue-degree-notation: number
268277

269278
# Specify indentation.
270279
indentation: 4

‎src/assets/sass/designpatterns.scss‎

Lines changed: 41 additions & 129 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,12 @@
1-
// import global variables
2-
@import "setup/settings";
3-
4-
// import any additional mixins
5-
@import "setup/helpers";
6-
7-
// import colourscheme
8-
@import "setup/colours";
9-
10-
1+
@use "setup";
112

123
/* ==========================================================================
134
ONLY for use in design patterns - classes NOT USED in actual site builds.
145
========================================================================== */
156

167
body {
17-
background-color: $color-background;
18-
color: $color-text;
19-
}
20-
21-
@include dark-mode {
22-
body {
23-
background-color: $dark-color-background;
24-
color: $dark-color-text;
25-
}
8+
background-color: var(--color-background);
9+
color: var(--color-text);
2610
}
2711

2812
main {
@@ -42,13 +26,7 @@ main {
4226
*/
4327

4428
.information code {
45-
color: $color-text;
46-
}
47-
48-
@include dark-mode {
49-
.information code {
50-
color: $dark-color-text;
51-
}
29+
color: var(--color-text);
5230
}
5331

5432

@@ -60,111 +38,46 @@ main {
6038
*/
6139

6240
$colors: (
63-
"text": $color-text,
64-
"text-visual-de-emphasis": $color-text-visual-de-emphasis,
65-
"gradient-from": $color-gradient-from,
66-
"gradient-to": $color-gradient-to,
67-
"border-extra-dark": $color-border-extra-dark,
68-
"border-dark": $color-border-dark,
69-
"border": $color-border,
70-
"border-light": $color-border-light,
71-
"border-extra-light": $color-border-extra-light,
72-
"link": $color-link,
73-
"link-hover": $color-link-hover,
74-
"link-focus": $color-link-focus,
75-
"link-selecting": $color-selecting,
76-
"link-selected": $color-selected,
77-
"background": $color-background,
78-
"background-box": $color-background-box,
79-
"highlight-box": $color-highlight-box,
80-
"strong-highlight-box": $color-strong-highlight-box,
81-
"highlight": $color-highlight,
82-
"success-text": $color-success-text,
83-
"success-background": $color-success-background,
84-
"warning-text": $color-warning-text,
85-
"warning-background": $color-warning-background,
86-
"error-text": $color-error-text,
87-
"error-background": $color-error-background,
88-
"info-text": $color-info-text,
89-
"info-background": $color-info-background
90-
);
91-
92-
$dark-colors: (
93-
"text": $dark-color-text,
94-
"text-visual-de-emphasis": $dark-color-text-visual-de-emphasis,
95-
"gradient-from": $dark-color-gradient-from,
96-
"gradient-to": $dark-color-gradient-to,
97-
"border-extra-dark": $dark-color-border-extra-dark,
98-
"border-dark": $dark-color-border-dark,
99-
"border": $dark-color-border,
100-
"border-light": $dark-color-border-light,
101-
"border-extra-light": $dark-color-border-extra-light,
102-
"link": $dark-color-link,
103-
"link-hover": $dark-color-link-hover,
104-
"link-focus": $dark-color-link-focus,
105-
"link-selecting": $dark-color-selecting,
106-
"link-selected": $dark-color-selected,
107-
"background": $dark-color-background,
108-
"background-box": $dark-color-background-box,
109-
"highlight": $dark-color-highlight,
110-
"strong-highlight-box": $dark-color-strong-highlight-box,
111-
"highlight-box": $dark-color-highlight-box,
112-
"success-text": $dark-color-success-text,
113-
"success-background": $dark-color-success-background,
114-
"warning-text": $dark-color-warning-text,
115-
"warning-background": $dark-color-warning-background,
116-
"error-text": $dark-color-error-text,
117-
"error-background": $dark-color-error-background,
118-
"info-text": $dark-color-info-text,
119-
"info-background": $dark-color-info-background
41+
"text": var(--color-text),
42+
"text-visual-de-emphasis": var(--color-text-visual-de-emphasis),
43+
"grad-from": var(--color-grad-from),
44+
"grad-to": var(--color-grad-to),
45+
"border": var(--color-border),
46+
"border-light": var(--color-border-light),
47+
"border-extra-light": var(--color-border-extra-light),
48+
"border-dark": var(--color-border-dark),
49+
"border-extra-dark": var(--color-border-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-background),
57+
"background-box": var(--color-background-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-background),
63+
"warning-text": var(--color-warning-text),
64+
"warning-background": var(--color-warning-background),
65+
"error-text": var(--color-error-text),
66+
"error-background": var(--color-error-background),
67+
"info-text": var(--color-info-text),
68+
"info-background": var(--color-info-background)
12069
);
12170

12271
.design-patterns--color {
12372
display: block;
124-
position: relative;
12573
height: 2.375em; // 38px / 16px
12674
margin: 1em 0;
127-
border: 1px solid $color-border;
128-
129-
&::after {
130-
position: absolute;
131-
top: 0.5em;
132-
padding: 1px 0.2142857em; // 3px / 14px
133-
background-color: rgba(255, 255, 255, 0.66);
134-
font-family: $font-code;
135-
font-size: $code-font-size;
136-
}
137-
}
138-
139-
@include dark-mode {
140-
.design-patterns--color {
141-
border-color: $dark-color-border;
142-
143-
&::after {
144-
background-color: rgba(0, 0, 0, 0.66);
145-
}
146-
}
75+
border: 1px solid var(--color-border);
14776
}
14877

14978
@each $name, $color in $colors {
15079
.design-patterns--color-#{$name} {
15180
background: $color;
152-
153-
&::after {
154-
content: "#{$color}";
155-
}
156-
}
157-
}
158-
159-
@include dark-mode {
160-
@each $name, $color in $dark-colors {
161-
.design-patterns--color-#{$name} {
162-
background: $color;
163-
164-
&::after {
165-
content: "#{$color}";
166-
}
167-
}
16881
}
16982
}
17083

@@ -218,7 +131,7 @@ $dark-colors: (
218131
display: none;
219132
}
220133

221-
@media (min-width: $breakpoint-1) {
134+
@media (min-width: setup.$breakpoint-1) {
222135
.design-patterns--breakpoint-0 {
223136
display: none;
224137
}
@@ -228,7 +141,7 @@ $dark-colors: (
228141
}
229142
}
230143

231-
@media (min-width: $breakpoint-2) {
144+
@media (min-width: setup.$breakpoint-2) {
232145
.design-patterns--breakpoint-1 {
233146
display: none;
234147
}
@@ -238,7 +151,7 @@ $dark-colors: (
238151
}
239152
}
240153

241-
@media (min-width: $breakpoint-3) {
154+
@media (min-width: setup.$breakpoint-3) {
242155
.design-patterns--breakpoint-2 {
243156
display: none;
244157
}
@@ -266,8 +179,8 @@ $dark-colors: (
266179
padding: 0.5em 2%;
267180
overflow-x: hidden;
268181
overflow-y: auto;
269-
border-right: 1px solid $color-border;
270-
background-color: $color-background-box;
182+
border-right: 1px solid var(--color-border);
183+
background-color: var(--color-background-box);
271184
box-shadow: inset -0.25em 0 0.25em -0.25em rgba(0, 0, 0, 0.2);
272185
}
273186

@@ -277,14 +190,13 @@ $dark-colors: (
277190
}
278191

279192
.docs-content-container {
280-
max-width: $container-max-width;
193+
max-width: setup.$container-max-width;
281194
margin: 0 auto;
282195
}
283196
}
284197

285-
@media (prefers-color-scheme: dark) and (min-width: $breakpoint-3) {
198+
@media (prefers-color-scheme: dark) and (min-width: setup.$breakpoint-3) {
286199
.docs-menu {
287-
border-right-color: $dark-color-border-extra-dark;
288-
background-color: $dark-color-background-box;
200+
border-right-color: var(--color-border-extra-dark);
289201
}
290202
}

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use "../setup";
2+
13
@media screen and (prefers-reduced-motion: reduce), (update: slow) {
24
body {
35
scroll-behavior: auto;

0 commit comments

Comments
 (0)