@kenlo/kdls-design-system 2.6.0 → 2.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ColorScheme/ColorScheme.test.d.ts +1 -0
- package/dist/components/Header/Header.d.ts +5 -0
- package/dist/components/Select/Select.d.ts +3 -1
- package/dist/components/Table/Table.d.ts +11 -0
- package/dist/components/Table/TableColumnPicker.d.ts +34 -0
- package/dist/components/Table/TableColumnPicker.test.d.ts +1 -0
- package/dist/components/Table/index.d.ts +1 -0
- package/dist/index.cjs +3 -3
- package/dist/index.css +1 -1
- package/dist/index.js +2821 -2654
- package/foundations/tokens.css +1246 -158
- package/kdls-manifest.json +804 -14
- package/package.json +5 -1
- package/scripts/kdls-guard.mjs +174 -0
package/foundations/tokens.css
CHANGED
|
@@ -1,6 +1,14 @@
|
|
|
1
1
|
/* Source for foundations/tokens.css — run `npm run gen:tokens` after editing.
|
|
2
2
|
No usage-rule comments here — token usage rules live in
|
|
3
3
|
.claude/tokens-reference.md. General component rules: .claude/component-rules.md. */
|
|
4
|
+
/* Relative luminance + contrast ratio per WCAG 2.1 (§ relative luminance,
|
|
5
|
+
§ contrast minimum). `on-color()` returns whichever of white/black scores
|
|
6
|
+
higher against the given background — the auto-contrast primitive behind
|
|
7
|
+
every `--color-on-*-*` token below. */
|
|
8
|
+
/* Worst-case-safe pick across one or more backgrounds (a gradient passes all
|
|
9
|
+
of its stops, so the winner is the one that survives the hardest stop). */
|
|
10
|
+
/* Populated by the `color-family` mixin so late-declared derivations (Lya,
|
|
11
|
+
which is a gradient over Sea/Dusk/Tertiary) can read the raw values back. */
|
|
4
12
|
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap");
|
|
5
13
|
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@400;500;600;700&family=Nunito:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600;700&display=swap");
|
|
6
14
|
/* -------------------------------SEMANTIC ALIASES------------------------------- */
|
|
@@ -16,168 +24,37 @@
|
|
|
16
24
|
}
|
|
17
25
|
|
|
18
26
|
/* ------------------------------------------------------------------------------ */
|
|
19
|
-
/*
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
--color-
|
|
26
|
-
--color-
|
|
27
|
-
--color-
|
|
28
|
-
--color-
|
|
29
|
-
--color-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
--color-
|
|
35
|
-
--color-primary-20: var(--color-secondary-20);
|
|
36
|
-
--color-primary-30: var(--color-secondary-30);
|
|
37
|
-
--color-primary-40: var(--color-secondary-40);
|
|
38
|
-
--color-primary-50: var(--color-secondary-50);
|
|
39
|
-
--color-primary-60: var(--color-secondary-60);
|
|
40
|
-
--color-primary-70: var(--color-secondary-70);
|
|
41
|
-
--color-primary-80: var(--color-secondary-80);
|
|
42
|
-
--color-primary-90: var(--color-secondary-90);
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
[data-color-scheme="tertiary"] {
|
|
46
|
-
--color-primary-10: var(--color-tertiary-10);
|
|
47
|
-
--color-primary-20: var(--color-tertiary-20);
|
|
48
|
-
--color-primary-30: var(--color-tertiary-30);
|
|
49
|
-
--color-primary-40: var(--color-tertiary-40);
|
|
50
|
-
--color-primary-50: var(--color-tertiary-50);
|
|
51
|
-
--color-primary-60: var(--color-tertiary-60);
|
|
52
|
-
--color-primary-70: var(--color-tertiary-70);
|
|
53
|
-
--color-primary-80: var(--color-tertiary-80);
|
|
54
|
-
--color-primary-90: var(--color-tertiary-90);
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
[data-color-scheme="lya"] {
|
|
58
|
-
--color-primary-10: var(--color-lya-10);
|
|
59
|
-
--color-primary-20: var(--color-lya-20);
|
|
60
|
-
--color-primary-30: var(--color-lya-30);
|
|
61
|
-
--color-primary-40: var(--color-lya-40);
|
|
62
|
-
--color-primary-50: var(--color-lya-50);
|
|
63
|
-
--color-primary-60: var(--color-lya-60);
|
|
64
|
-
--color-primary-70: var(--color-lya-70);
|
|
65
|
-
--color-primary-80: var(--color-lya-80);
|
|
66
|
-
--color-primary-90: var(--color-lya-90);
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
[data-color-scheme="leaf"] {
|
|
70
|
-
--color-primary-10: var(--color-leaf-10);
|
|
71
|
-
--color-primary-20: var(--color-leaf-20);
|
|
72
|
-
--color-primary-30: var(--color-leaf-30);
|
|
73
|
-
--color-primary-40: var(--color-leaf-40);
|
|
74
|
-
--color-primary-50: var(--color-leaf-50);
|
|
75
|
-
--color-primary-60: var(--color-leaf-60);
|
|
76
|
-
--color-primary-70: var(--color-leaf-70);
|
|
77
|
-
--color-primary-80: var(--color-leaf-80);
|
|
78
|
-
--color-primary-90: var(--color-leaf-90);
|
|
79
|
-
--color-on-primary: var(--color-black);
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
[data-color-scheme="sand"] {
|
|
83
|
-
--color-primary-10: var(--color-sand-10);
|
|
84
|
-
--color-primary-20: var(--color-sand-20);
|
|
85
|
-
--color-primary-30: var(--color-sand-30);
|
|
86
|
-
--color-primary-40: var(--color-sand-40);
|
|
87
|
-
--color-primary-50: var(--color-sand-50);
|
|
88
|
-
--color-primary-60: var(--color-sand-60);
|
|
89
|
-
--color-primary-70: var(--color-sand-70);
|
|
90
|
-
--color-primary-80: var(--color-sand-80);
|
|
91
|
-
--color-primary-90: var(--color-sand-90);
|
|
92
|
-
--color-on-primary: var(--color-black);
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
[data-color-scheme="wood"] {
|
|
96
|
-
--color-primary-10: var(--color-wood-10);
|
|
97
|
-
--color-primary-20: var(--color-wood-20);
|
|
98
|
-
--color-primary-30: var(--color-wood-30);
|
|
99
|
-
--color-primary-40: var(--color-wood-40);
|
|
100
|
-
--color-primary-50: var(--color-wood-50);
|
|
101
|
-
--color-primary-60: var(--color-wood-60);
|
|
102
|
-
--color-primary-70: var(--color-wood-70);
|
|
103
|
-
--color-primary-80: var(--color-wood-80);
|
|
104
|
-
--color-primary-90: var(--color-wood-90);
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
[data-color-scheme="clay"] {
|
|
108
|
-
--color-primary-10: var(--color-clay-10);
|
|
109
|
-
--color-primary-20: var(--color-clay-20);
|
|
110
|
-
--color-primary-30: var(--color-clay-30);
|
|
111
|
-
--color-primary-40: var(--color-clay-40);
|
|
112
|
-
--color-primary-50: var(--color-clay-50);
|
|
113
|
-
--color-primary-60: var(--color-clay-60);
|
|
114
|
-
--color-primary-70: var(--color-clay-70);
|
|
115
|
-
--color-primary-80: var(--color-clay-80);
|
|
116
|
-
--color-primary-90: var(--color-clay-90);
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
[data-color-scheme="flower"] {
|
|
120
|
-
--color-primary-10: var(--color-flower-10);
|
|
121
|
-
--color-primary-20: var(--color-flower-20);
|
|
122
|
-
--color-primary-30: var(--color-flower-30);
|
|
123
|
-
--color-primary-40: var(--color-flower-40);
|
|
124
|
-
--color-primary-50: var(--color-flower-50);
|
|
125
|
-
--color-primary-60: var(--color-flower-60);
|
|
126
|
-
--color-primary-70: var(--color-flower-70);
|
|
127
|
-
--color-primary-80: var(--color-flower-80);
|
|
128
|
-
--color-primary-90: var(--color-flower-90);
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
[data-color-scheme="dusk"] {
|
|
132
|
-
--color-primary-10: var(--color-dusk-10);
|
|
133
|
-
--color-primary-20: var(--color-dusk-20);
|
|
134
|
-
--color-primary-30: var(--color-dusk-30);
|
|
135
|
-
--color-primary-40: var(--color-dusk-40);
|
|
136
|
-
--color-primary-50: var(--color-dusk-50);
|
|
137
|
-
--color-primary-60: var(--color-dusk-60);
|
|
138
|
-
--color-primary-70: var(--color-dusk-70);
|
|
139
|
-
--color-primary-80: var(--color-dusk-80);
|
|
140
|
-
--color-primary-90: var(--color-dusk-90);
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
[data-color-scheme="sky"] {
|
|
144
|
-
--color-primary-10: var(--color-sky-10);
|
|
145
|
-
--color-primary-20: var(--color-sky-20);
|
|
146
|
-
--color-primary-30: var(--color-sky-30);
|
|
147
|
-
--color-primary-40: var(--color-sky-40);
|
|
148
|
-
--color-primary-50: var(--color-sky-50);
|
|
149
|
-
--color-primary-60: var(--color-sky-60);
|
|
150
|
-
--color-primary-70: var(--color-sky-70);
|
|
151
|
-
--color-primary-80: var(--color-sky-80);
|
|
152
|
-
--color-primary-90: var(--color-sky-90);
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
[data-color-scheme="sea"] {
|
|
156
|
-
--color-primary-10: var(--color-sea-10);
|
|
157
|
-
--color-primary-20: var(--color-sea-20);
|
|
158
|
-
--color-primary-30: var(--color-sea-30);
|
|
159
|
-
--color-primary-40: var(--color-sea-40);
|
|
160
|
-
--color-primary-50: var(--color-sea-50);
|
|
161
|
-
--color-primary-60: var(--color-sea-60);
|
|
162
|
-
--color-primary-70: var(--color-sea-70);
|
|
163
|
-
--color-primary-80: var(--color-sea-80);
|
|
164
|
-
--color-primary-90: var(--color-sea-90);
|
|
27
|
+
/* -----------------------------------NEUTRAL------------------------------------ */
|
|
28
|
+
/* Auto-contrast pair: `--color-on-{name}-{step}` is the label/icon color for
|
|
29
|
+
anything painted on `--color-{name}-{step}`. It follows the same mirror
|
|
30
|
+
math as the background it answers to — in dark the background resolves to
|
|
31
|
+
the complementary step, so the on-color is computed from that same step. */
|
|
32
|
+
:root {
|
|
33
|
+
--color-on-neutral-00: var(--color-black);
|
|
34
|
+
--color-on-neutral-10: var(--color-black);
|
|
35
|
+
--color-on-neutral-20: var(--color-black);
|
|
36
|
+
--color-on-neutral-30: var(--color-black);
|
|
37
|
+
--color-on-neutral-40: var(--color-black);
|
|
38
|
+
--color-on-neutral-50: var(--color-black);
|
|
39
|
+
--color-on-neutral-60: var(--color-white);
|
|
40
|
+
--color-on-neutral-70: var(--color-white);
|
|
41
|
+
--color-on-neutral-80: var(--color-white);
|
|
42
|
+
--color-on-neutral-90: var(--color-white);
|
|
165
43
|
}
|
|
166
44
|
|
|
167
|
-
[data-
|
|
168
|
-
--color-
|
|
169
|
-
--color-
|
|
170
|
-
--color-
|
|
171
|
-
--color-
|
|
172
|
-
--color-
|
|
173
|
-
--color-
|
|
174
|
-
--color-
|
|
175
|
-
--color-
|
|
176
|
-
--color-
|
|
45
|
+
[data-theme="dark"] {
|
|
46
|
+
--color-on-neutral-00: var(--color-white);
|
|
47
|
+
--color-on-neutral-10: var(--color-white);
|
|
48
|
+
--color-on-neutral-20: var(--color-white);
|
|
49
|
+
--color-on-neutral-30: var(--color-white);
|
|
50
|
+
--color-on-neutral-40: var(--color-black);
|
|
51
|
+
--color-on-neutral-50: var(--color-black);
|
|
52
|
+
--color-on-neutral-60: var(--color-black);
|
|
53
|
+
--color-on-neutral-70: var(--color-black);
|
|
54
|
+
--color-on-neutral-80: var(--color-black);
|
|
55
|
+
--color-on-neutral-90: var(--color-black);
|
|
177
56
|
}
|
|
178
57
|
|
|
179
|
-
/* ------------------------------------------------------------------------------ */
|
|
180
|
-
/* -----------------------------------NEUTRAL------------------------------------ */
|
|
181
58
|
:root {
|
|
182
59
|
--color-neutral-00-90: #ffffff;
|
|
183
60
|
--color-neutral-10-80: #f2f2f2;
|
|
@@ -239,6 +116,34 @@
|
|
|
239
116
|
|
|
240
117
|
/* ------------------------------------------------------------------------------ */
|
|
241
118
|
/* -----------------------------------PRIMARY------------------------------------ */
|
|
119
|
+
/* Auto-contrast pair: `--color-on-{name}-{step}` is the label/icon color for
|
|
120
|
+
anything painted on `--color-{name}-{step}`. It follows the same mirror
|
|
121
|
+
math as the background it answers to — in dark the background resolves to
|
|
122
|
+
the complementary step, so the on-color is computed from that same step. */
|
|
123
|
+
:root {
|
|
124
|
+
--color-on-primary-10: var(--color-black);
|
|
125
|
+
--color-on-primary-20: var(--color-black);
|
|
126
|
+
--color-on-primary-30: var(--color-black);
|
|
127
|
+
--color-on-primary-40: var(--color-black);
|
|
128
|
+
--color-on-primary-50: var(--color-black);
|
|
129
|
+
--color-on-primary-60: var(--color-white);
|
|
130
|
+
--color-on-primary-70: var(--color-white);
|
|
131
|
+
--color-on-primary-80: var(--color-white);
|
|
132
|
+
--color-on-primary-90: var(--color-white);
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
[data-theme="dark"] {
|
|
136
|
+
--color-on-primary-10: var(--color-white);
|
|
137
|
+
--color-on-primary-20: var(--color-white);
|
|
138
|
+
--color-on-primary-30: var(--color-white);
|
|
139
|
+
--color-on-primary-40: var(--color-white);
|
|
140
|
+
--color-on-primary-50: var(--color-black);
|
|
141
|
+
--color-on-primary-60: var(--color-black);
|
|
142
|
+
--color-on-primary-70: var(--color-black);
|
|
143
|
+
--color-on-primary-80: var(--color-black);
|
|
144
|
+
--color-on-primary-90: var(--color-black);
|
|
145
|
+
}
|
|
146
|
+
|
|
242
147
|
:root {
|
|
243
148
|
--color-primary-10-90: #d1e7fa;
|
|
244
149
|
--color-primary-20-80: #a3cff5;
|
|
@@ -294,6 +199,34 @@
|
|
|
294
199
|
}
|
|
295
200
|
|
|
296
201
|
/* ------------------------------------------------------------------------------ */
|
|
202
|
+
/* Kenlo Blue is Primary made immune to `data-color-scheme` — it still mirrors
|
|
203
|
+
across the theme boundary like any other family, so its on-color is derived
|
|
204
|
+
per theme from the same step the background resolves to. It cannot simply
|
|
205
|
+
alias `--color-on-primary-*`: that one IS remapped by the active scheme. */
|
|
206
|
+
:root {
|
|
207
|
+
--color-on-kenlo-blue-10: var(--color-black);
|
|
208
|
+
--color-on-kenlo-blue-20: var(--color-black);
|
|
209
|
+
--color-on-kenlo-blue-30: var(--color-black);
|
|
210
|
+
--color-on-kenlo-blue-40: var(--color-black);
|
|
211
|
+
--color-on-kenlo-blue-50: var(--color-black);
|
|
212
|
+
--color-on-kenlo-blue-60: var(--color-white);
|
|
213
|
+
--color-on-kenlo-blue-70: var(--color-white);
|
|
214
|
+
--color-on-kenlo-blue-80: var(--color-white);
|
|
215
|
+
--color-on-kenlo-blue-90: var(--color-white);
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
[data-theme="dark"] {
|
|
219
|
+
--color-on-kenlo-blue-10: var(--color-white);
|
|
220
|
+
--color-on-kenlo-blue-20: var(--color-white);
|
|
221
|
+
--color-on-kenlo-blue-30: var(--color-white);
|
|
222
|
+
--color-on-kenlo-blue-40: var(--color-white);
|
|
223
|
+
--color-on-kenlo-blue-50: var(--color-black);
|
|
224
|
+
--color-on-kenlo-blue-60: var(--color-black);
|
|
225
|
+
--color-on-kenlo-blue-70: var(--color-black);
|
|
226
|
+
--color-on-kenlo-blue-80: var(--color-black);
|
|
227
|
+
--color-on-kenlo-blue-90: var(--color-black);
|
|
228
|
+
}
|
|
229
|
+
|
|
297
230
|
:root {
|
|
298
231
|
--color-kenlo-blue-10: var(--color-primary-10-90);
|
|
299
232
|
--color-kenlo-blue-20: var(--color-primary-20-80);
|
|
@@ -307,6 +240,34 @@
|
|
|
307
240
|
}
|
|
308
241
|
|
|
309
242
|
/* ----------------------------------SECONDARY----------------------------------- */
|
|
243
|
+
/* Auto-contrast pair: `--color-on-{name}-{step}` is the label/icon color for
|
|
244
|
+
anything painted on `--color-{name}-{step}`. It follows the same mirror
|
|
245
|
+
math as the background it answers to — in dark the background resolves to
|
|
246
|
+
the complementary step, so the on-color is computed from that same step. */
|
|
247
|
+
:root {
|
|
248
|
+
--color-on-secondary-10: var(--color-black);
|
|
249
|
+
--color-on-secondary-20: var(--color-black);
|
|
250
|
+
--color-on-secondary-30: var(--color-black);
|
|
251
|
+
--color-on-secondary-40: var(--color-black);
|
|
252
|
+
--color-on-secondary-50: var(--color-black);
|
|
253
|
+
--color-on-secondary-60: var(--color-white);
|
|
254
|
+
--color-on-secondary-70: var(--color-white);
|
|
255
|
+
--color-on-secondary-80: var(--color-white);
|
|
256
|
+
--color-on-secondary-90: var(--color-white);
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
[data-theme="dark"] {
|
|
260
|
+
--color-on-secondary-10: var(--color-white);
|
|
261
|
+
--color-on-secondary-20: var(--color-white);
|
|
262
|
+
--color-on-secondary-30: var(--color-white);
|
|
263
|
+
--color-on-secondary-40: var(--color-white);
|
|
264
|
+
--color-on-secondary-50: var(--color-black);
|
|
265
|
+
--color-on-secondary-60: var(--color-black);
|
|
266
|
+
--color-on-secondary-70: var(--color-black);
|
|
267
|
+
--color-on-secondary-80: var(--color-black);
|
|
268
|
+
--color-on-secondary-90: var(--color-black);
|
|
269
|
+
}
|
|
270
|
+
|
|
310
271
|
:root {
|
|
311
272
|
--color-secondary-10-90: #fccfde;
|
|
312
273
|
--color-secondary-20-80: #fa9ebd;
|
|
@@ -363,6 +324,34 @@
|
|
|
363
324
|
|
|
364
325
|
/* ------------------------------------------------------------------------------ */
|
|
365
326
|
/* -----------------------------------TERTIARY----------------------------------- */
|
|
327
|
+
/* Auto-contrast pair: `--color-on-{name}-{step}` is the label/icon color for
|
|
328
|
+
anything painted on `--color-{name}-{step}`. It follows the same mirror
|
|
329
|
+
math as the background it answers to — in dark the background resolves to
|
|
330
|
+
the complementary step, so the on-color is computed from that same step. */
|
|
331
|
+
:root {
|
|
332
|
+
--color-on-tertiary-10: var(--color-black);
|
|
333
|
+
--color-on-tertiary-20: var(--color-black);
|
|
334
|
+
--color-on-tertiary-30: var(--color-black);
|
|
335
|
+
--color-on-tertiary-40: var(--color-black);
|
|
336
|
+
--color-on-tertiary-50: var(--color-white);
|
|
337
|
+
--color-on-tertiary-60: var(--color-white);
|
|
338
|
+
--color-on-tertiary-70: var(--color-white);
|
|
339
|
+
--color-on-tertiary-80: var(--color-white);
|
|
340
|
+
--color-on-tertiary-90: var(--color-white);
|
|
341
|
+
}
|
|
342
|
+
|
|
343
|
+
[data-theme="dark"] {
|
|
344
|
+
--color-on-tertiary-10: var(--color-white);
|
|
345
|
+
--color-on-tertiary-20: var(--color-white);
|
|
346
|
+
--color-on-tertiary-30: var(--color-white);
|
|
347
|
+
--color-on-tertiary-40: var(--color-white);
|
|
348
|
+
--color-on-tertiary-50: var(--color-white);
|
|
349
|
+
--color-on-tertiary-60: var(--color-black);
|
|
350
|
+
--color-on-tertiary-70: var(--color-black);
|
|
351
|
+
--color-on-tertiary-80: var(--color-black);
|
|
352
|
+
--color-on-tertiary-90: var(--color-black);
|
|
353
|
+
}
|
|
354
|
+
|
|
366
355
|
:root {
|
|
367
356
|
--color-tertiary-10-90: #ebdbf0;
|
|
368
357
|
--color-tertiary-20-80: #d6b8e0;
|
|
@@ -476,8 +465,42 @@
|
|
|
476
465
|
);
|
|
477
466
|
}
|
|
478
467
|
|
|
468
|
+
/* ------------------------------------------------------------------------------ */
|
|
469
|
+
/* ---------------------------------LYA ON-COLOR--------------------------------- */
|
|
470
|
+
/* Lya has no solid background of its own, so its on-color is the one that still
|
|
471
|
+
passes against the HARDEST of the three gradient stops, not against an average.
|
|
472
|
+
Emitted here rather than in the block above because it reads Sea, Dusk and
|
|
473
|
+
Tertiary back out of `$family-values` — all three are declared further down. */
|
|
479
474
|
/* ------------------------------------------------------------------------------ */
|
|
480
475
|
/* ------------------------------FEEDBACK - SUCCESS------------------------------ */
|
|
476
|
+
/* Auto-contrast pair: `--color-on-{name}-{step}` is the label/icon color for
|
|
477
|
+
anything painted on `--color-{name}-{step}`. It follows the same mirror
|
|
478
|
+
math as the background it answers to — in dark the background resolves to
|
|
479
|
+
the complementary step, so the on-color is computed from that same step. */
|
|
480
|
+
:root {
|
|
481
|
+
--color-on-success-10: var(--color-black);
|
|
482
|
+
--color-on-success-20: var(--color-black);
|
|
483
|
+
--color-on-success-30: var(--color-black);
|
|
484
|
+
--color-on-success-40: var(--color-black);
|
|
485
|
+
--color-on-success-50: var(--color-black);
|
|
486
|
+
--color-on-success-60: var(--color-black);
|
|
487
|
+
--color-on-success-70: var(--color-white);
|
|
488
|
+
--color-on-success-80: var(--color-white);
|
|
489
|
+
--color-on-success-90: var(--color-white);
|
|
490
|
+
}
|
|
491
|
+
|
|
492
|
+
[data-theme="dark"] {
|
|
493
|
+
--color-on-success-10: var(--color-white);
|
|
494
|
+
--color-on-success-20: var(--color-white);
|
|
495
|
+
--color-on-success-30: var(--color-white);
|
|
496
|
+
--color-on-success-40: var(--color-black);
|
|
497
|
+
--color-on-success-50: var(--color-black);
|
|
498
|
+
--color-on-success-60: var(--color-black);
|
|
499
|
+
--color-on-success-70: var(--color-black);
|
|
500
|
+
--color-on-success-80: var(--color-black);
|
|
501
|
+
--color-on-success-90: var(--color-black);
|
|
502
|
+
}
|
|
503
|
+
|
|
481
504
|
:root {
|
|
482
505
|
--color-success-10-90: #d1fad8;
|
|
483
506
|
--color-success-20-80: #a3f5b1;
|
|
@@ -534,6 +557,34 @@
|
|
|
534
557
|
|
|
535
558
|
/* ------------------------------------------------------------------------------ */
|
|
536
559
|
/* -------------------------------FEEDBACK - ALERT------------------------------- */
|
|
560
|
+
/* Auto-contrast pair: `--color-on-{name}-{step}` is the label/icon color for
|
|
561
|
+
anything painted on `--color-{name}-{step}`. It follows the same mirror
|
|
562
|
+
math as the background it answers to — in dark the background resolves to
|
|
563
|
+
the complementary step, so the on-color is computed from that same step. */
|
|
564
|
+
:root {
|
|
565
|
+
--color-on-alert-10: var(--color-black);
|
|
566
|
+
--color-on-alert-20: var(--color-black);
|
|
567
|
+
--color-on-alert-30: var(--color-black);
|
|
568
|
+
--color-on-alert-40: var(--color-black);
|
|
569
|
+
--color-on-alert-50: var(--color-black);
|
|
570
|
+
--color-on-alert-60: var(--color-black);
|
|
571
|
+
--color-on-alert-70: var(--color-white);
|
|
572
|
+
--color-on-alert-80: var(--color-white);
|
|
573
|
+
--color-on-alert-90: var(--color-white);
|
|
574
|
+
}
|
|
575
|
+
|
|
576
|
+
[data-theme="dark"] {
|
|
577
|
+
--color-on-alert-10: var(--color-white);
|
|
578
|
+
--color-on-alert-20: var(--color-white);
|
|
579
|
+
--color-on-alert-30: var(--color-white);
|
|
580
|
+
--color-on-alert-40: var(--color-black);
|
|
581
|
+
--color-on-alert-50: var(--color-black);
|
|
582
|
+
--color-on-alert-60: var(--color-black);
|
|
583
|
+
--color-on-alert-70: var(--color-black);
|
|
584
|
+
--color-on-alert-80: var(--color-black);
|
|
585
|
+
--color-on-alert-90: var(--color-black);
|
|
586
|
+
}
|
|
587
|
+
|
|
537
588
|
:root {
|
|
538
589
|
--color-alert-10-90: #faecd1;
|
|
539
590
|
--color-alert-20-80: #f5daa3;
|
|
@@ -590,6 +641,34 @@
|
|
|
590
641
|
|
|
591
642
|
/* ------------------------------------------------------------------------------ */
|
|
592
643
|
/* -------------------------------FEEDBACK - ERROR------------------------------- */
|
|
644
|
+
/* Auto-contrast pair: `--color-on-{name}-{step}` is the label/icon color for
|
|
645
|
+
anything painted on `--color-{name}-{step}`. It follows the same mirror
|
|
646
|
+
math as the background it answers to — in dark the background resolves to
|
|
647
|
+
the complementary step, so the on-color is computed from that same step. */
|
|
648
|
+
:root {
|
|
649
|
+
--color-on-error-10: var(--color-black);
|
|
650
|
+
--color-on-error-20: var(--color-black);
|
|
651
|
+
--color-on-error-30: var(--color-black);
|
|
652
|
+
--color-on-error-40: var(--color-black);
|
|
653
|
+
--color-on-error-50: var(--color-black);
|
|
654
|
+
--color-on-error-60: var(--color-white);
|
|
655
|
+
--color-on-error-70: var(--color-white);
|
|
656
|
+
--color-on-error-80: var(--color-white);
|
|
657
|
+
--color-on-error-90: var(--color-white);
|
|
658
|
+
}
|
|
659
|
+
|
|
660
|
+
[data-theme="dark"] {
|
|
661
|
+
--color-on-error-10: var(--color-white);
|
|
662
|
+
--color-on-error-20: var(--color-white);
|
|
663
|
+
--color-on-error-30: var(--color-white);
|
|
664
|
+
--color-on-error-40: var(--color-white);
|
|
665
|
+
--color-on-error-50: var(--color-black);
|
|
666
|
+
--color-on-error-60: var(--color-black);
|
|
667
|
+
--color-on-error-70: var(--color-black);
|
|
668
|
+
--color-on-error-80: var(--color-black);
|
|
669
|
+
--color-on-error-90: var(--color-black);
|
|
670
|
+
}
|
|
671
|
+
|
|
593
672
|
:root {
|
|
594
673
|
--color-error-10-90: #fad5d1;
|
|
595
674
|
--color-error-20-80: #f5aaa3;
|
|
@@ -646,6 +725,34 @@
|
|
|
646
725
|
|
|
647
726
|
/* ------------------------------------------------------------------------------ */
|
|
648
727
|
/* --------------------------------SUPPORT - LEAF-------------------------------- */
|
|
728
|
+
/* Auto-contrast pair: `--color-on-{name}-{step}` is the label/icon color for
|
|
729
|
+
anything painted on `--color-{name}-{step}`. It follows the same mirror
|
|
730
|
+
math as the background it answers to — in dark the background resolves to
|
|
731
|
+
the complementary step, so the on-color is computed from that same step. */
|
|
732
|
+
:root {
|
|
733
|
+
--color-on-leaf-10: var(--color-black);
|
|
734
|
+
--color-on-leaf-20: var(--color-black);
|
|
735
|
+
--color-on-leaf-30: var(--color-black);
|
|
736
|
+
--color-on-leaf-40: var(--color-black);
|
|
737
|
+
--color-on-leaf-50: var(--color-black);
|
|
738
|
+
--color-on-leaf-60: var(--color-black);
|
|
739
|
+
--color-on-leaf-70: var(--color-white);
|
|
740
|
+
--color-on-leaf-80: var(--color-white);
|
|
741
|
+
--color-on-leaf-90: var(--color-white);
|
|
742
|
+
}
|
|
743
|
+
|
|
744
|
+
[data-theme="dark"] {
|
|
745
|
+
--color-on-leaf-10: var(--color-white);
|
|
746
|
+
--color-on-leaf-20: var(--color-white);
|
|
747
|
+
--color-on-leaf-30: var(--color-white);
|
|
748
|
+
--color-on-leaf-40: var(--color-black);
|
|
749
|
+
--color-on-leaf-50: var(--color-black);
|
|
750
|
+
--color-on-leaf-60: var(--color-black);
|
|
751
|
+
--color-on-leaf-70: var(--color-black);
|
|
752
|
+
--color-on-leaf-80: var(--color-black);
|
|
753
|
+
--color-on-leaf-90: var(--color-black);
|
|
754
|
+
}
|
|
755
|
+
|
|
649
756
|
:root {
|
|
650
757
|
--color-leaf-10-90: #ecf2d9;
|
|
651
758
|
--color-leaf-20-80: #d9e5b3;
|
|
@@ -702,6 +809,34 @@
|
|
|
702
809
|
|
|
703
810
|
/* ------------------------------------------------------------------------------ */
|
|
704
811
|
/* --------------------------------SUPPORT - SAND-------------------------------- */
|
|
812
|
+
/* Auto-contrast pair: `--color-on-{name}-{step}` is the label/icon color for
|
|
813
|
+
anything painted on `--color-{name}-{step}`. It follows the same mirror
|
|
814
|
+
math as the background it answers to — in dark the background resolves to
|
|
815
|
+
the complementary step, so the on-color is computed from that same step. */
|
|
816
|
+
:root {
|
|
817
|
+
--color-on-sand-10: var(--color-black);
|
|
818
|
+
--color-on-sand-20: var(--color-black);
|
|
819
|
+
--color-on-sand-30: var(--color-black);
|
|
820
|
+
--color-on-sand-40: var(--color-black);
|
|
821
|
+
--color-on-sand-50: var(--color-black);
|
|
822
|
+
--color-on-sand-60: var(--color-black);
|
|
823
|
+
--color-on-sand-70: var(--color-white);
|
|
824
|
+
--color-on-sand-80: var(--color-white);
|
|
825
|
+
--color-on-sand-90: var(--color-white);
|
|
826
|
+
}
|
|
827
|
+
|
|
828
|
+
[data-theme="dark"] {
|
|
829
|
+
--color-on-sand-10: var(--color-white);
|
|
830
|
+
--color-on-sand-20: var(--color-white);
|
|
831
|
+
--color-on-sand-30: var(--color-white);
|
|
832
|
+
--color-on-sand-40: var(--color-black);
|
|
833
|
+
--color-on-sand-50: var(--color-black);
|
|
834
|
+
--color-on-sand-60: var(--color-black);
|
|
835
|
+
--color-on-sand-70: var(--color-black);
|
|
836
|
+
--color-on-sand-80: var(--color-black);
|
|
837
|
+
--color-on-sand-90: var(--color-black);
|
|
838
|
+
}
|
|
839
|
+
|
|
705
840
|
:root {
|
|
706
841
|
--color-sand-10-90: #f2eed9;
|
|
707
842
|
--color-sand-20-80: #e5ddb3;
|
|
@@ -758,6 +893,34 @@
|
|
|
758
893
|
|
|
759
894
|
/* ------------------------------------------------------------------------------ */
|
|
760
895
|
/* --------------------------------SUPPORT - WOOD-------------------------------- */
|
|
896
|
+
/* Auto-contrast pair: `--color-on-{name}-{step}` is the label/icon color for
|
|
897
|
+
anything painted on `--color-{name}-{step}`. It follows the same mirror
|
|
898
|
+
math as the background it answers to — in dark the background resolves to
|
|
899
|
+
the complementary step, so the on-color is computed from that same step. */
|
|
900
|
+
:root {
|
|
901
|
+
--color-on-wood-10: var(--color-black);
|
|
902
|
+
--color-on-wood-20: var(--color-black);
|
|
903
|
+
--color-on-wood-30: var(--color-black);
|
|
904
|
+
--color-on-wood-40: var(--color-black);
|
|
905
|
+
--color-on-wood-50: var(--color-black);
|
|
906
|
+
--color-on-wood-60: var(--color-white);
|
|
907
|
+
--color-on-wood-70: var(--color-white);
|
|
908
|
+
--color-on-wood-80: var(--color-white);
|
|
909
|
+
--color-on-wood-90: var(--color-white);
|
|
910
|
+
}
|
|
911
|
+
|
|
912
|
+
[data-theme="dark"] {
|
|
913
|
+
--color-on-wood-10: var(--color-white);
|
|
914
|
+
--color-on-wood-20: var(--color-white);
|
|
915
|
+
--color-on-wood-30: var(--color-white);
|
|
916
|
+
--color-on-wood-40: var(--color-white);
|
|
917
|
+
--color-on-wood-50: var(--color-black);
|
|
918
|
+
--color-on-wood-60: var(--color-black);
|
|
919
|
+
--color-on-wood-70: var(--color-black);
|
|
920
|
+
--color-on-wood-80: var(--color-black);
|
|
921
|
+
--color-on-wood-90: var(--color-black);
|
|
922
|
+
}
|
|
923
|
+
|
|
761
924
|
:root {
|
|
762
925
|
--color-wood-10-90: #f2e1d9;
|
|
763
926
|
--color-wood-20-80: #e5c3b3;
|
|
@@ -814,6 +977,34 @@
|
|
|
814
977
|
|
|
815
978
|
/* ------------------------------------------------------------------------------ */
|
|
816
979
|
/* --------------------------------SUPPORT - CLAY-------------------------------- */
|
|
980
|
+
/* Auto-contrast pair: `--color-on-{name}-{step}` is the label/icon color for
|
|
981
|
+
anything painted on `--color-{name}-{step}`. It follows the same mirror
|
|
982
|
+
math as the background it answers to — in dark the background resolves to
|
|
983
|
+
the complementary step, so the on-color is computed from that same step. */
|
|
984
|
+
:root {
|
|
985
|
+
--color-on-clay-10: var(--color-black);
|
|
986
|
+
--color-on-clay-20: var(--color-black);
|
|
987
|
+
--color-on-clay-30: var(--color-black);
|
|
988
|
+
--color-on-clay-40: var(--color-black);
|
|
989
|
+
--color-on-clay-50: var(--color-white);
|
|
990
|
+
--color-on-clay-60: var(--color-white);
|
|
991
|
+
--color-on-clay-70: var(--color-white);
|
|
992
|
+
--color-on-clay-80: var(--color-white);
|
|
993
|
+
--color-on-clay-90: var(--color-white);
|
|
994
|
+
}
|
|
995
|
+
|
|
996
|
+
[data-theme="dark"] {
|
|
997
|
+
--color-on-clay-10: var(--color-white);
|
|
998
|
+
--color-on-clay-20: var(--color-white);
|
|
999
|
+
--color-on-clay-30: var(--color-white);
|
|
1000
|
+
--color-on-clay-40: var(--color-white);
|
|
1001
|
+
--color-on-clay-50: var(--color-white);
|
|
1002
|
+
--color-on-clay-60: var(--color-black);
|
|
1003
|
+
--color-on-clay-70: var(--color-black);
|
|
1004
|
+
--color-on-clay-80: var(--color-black);
|
|
1005
|
+
--color-on-clay-90: var(--color-black);
|
|
1006
|
+
}
|
|
1007
|
+
|
|
817
1008
|
:root {
|
|
818
1009
|
--color-clay-10-90: #f2d9df;
|
|
819
1010
|
--color-clay-20-80: #e5b3bf;
|
|
@@ -870,6 +1061,34 @@
|
|
|
870
1061
|
|
|
871
1062
|
/* ------------------------------------------------------------------------------ */
|
|
872
1063
|
/* -------------------------------SUPPORT - FLOWER------------------------------- */
|
|
1064
|
+
/* Auto-contrast pair: `--color-on-{name}-{step}` is the label/icon color for
|
|
1065
|
+
anything painted on `--color-{name}-{step}`. It follows the same mirror
|
|
1066
|
+
math as the background it answers to — in dark the background resolves to
|
|
1067
|
+
the complementary step, so the on-color is computed from that same step. */
|
|
1068
|
+
:root {
|
|
1069
|
+
--color-on-flower-10: var(--color-black);
|
|
1070
|
+
--color-on-flower-20: var(--color-black);
|
|
1071
|
+
--color-on-flower-30: var(--color-black);
|
|
1072
|
+
--color-on-flower-40: var(--color-black);
|
|
1073
|
+
--color-on-flower-50: var(--color-black);
|
|
1074
|
+
--color-on-flower-60: var(--color-white);
|
|
1075
|
+
--color-on-flower-70: var(--color-white);
|
|
1076
|
+
--color-on-flower-80: var(--color-white);
|
|
1077
|
+
--color-on-flower-90: var(--color-white);
|
|
1078
|
+
}
|
|
1079
|
+
|
|
1080
|
+
[data-theme="dark"] {
|
|
1081
|
+
--color-on-flower-10: var(--color-white);
|
|
1082
|
+
--color-on-flower-20: var(--color-white);
|
|
1083
|
+
--color-on-flower-30: var(--color-white);
|
|
1084
|
+
--color-on-flower-40: var(--color-white);
|
|
1085
|
+
--color-on-flower-50: var(--color-black);
|
|
1086
|
+
--color-on-flower-60: var(--color-black);
|
|
1087
|
+
--color-on-flower-70: var(--color-black);
|
|
1088
|
+
--color-on-flower-80: var(--color-black);
|
|
1089
|
+
--color-on-flower-90: var(--color-black);
|
|
1090
|
+
}
|
|
1091
|
+
|
|
873
1092
|
:root {
|
|
874
1093
|
--color-flower-10-90: #f2d9f2;
|
|
875
1094
|
--color-flower-20-80: #e5b3e5;
|
|
@@ -926,6 +1145,34 @@
|
|
|
926
1145
|
|
|
927
1146
|
/* ------------------------------------------------------------------------------ */
|
|
928
1147
|
/* --------------------------------SUPPORT - DUSK-------------------------------- */
|
|
1148
|
+
/* Auto-contrast pair: `--color-on-{name}-{step}` is the label/icon color for
|
|
1149
|
+
anything painted on `--color-{name}-{step}`. It follows the same mirror
|
|
1150
|
+
math as the background it answers to — in dark the background resolves to
|
|
1151
|
+
the complementary step, so the on-color is computed from that same step. */
|
|
1152
|
+
:root {
|
|
1153
|
+
--color-on-dusk-10: var(--color-black);
|
|
1154
|
+
--color-on-dusk-20: var(--color-black);
|
|
1155
|
+
--color-on-dusk-30: var(--color-black);
|
|
1156
|
+
--color-on-dusk-40: var(--color-black);
|
|
1157
|
+
--color-on-dusk-50: var(--color-white);
|
|
1158
|
+
--color-on-dusk-60: var(--color-white);
|
|
1159
|
+
--color-on-dusk-70: var(--color-white);
|
|
1160
|
+
--color-on-dusk-80: var(--color-white);
|
|
1161
|
+
--color-on-dusk-90: var(--color-white);
|
|
1162
|
+
}
|
|
1163
|
+
|
|
1164
|
+
[data-theme="dark"] {
|
|
1165
|
+
--color-on-dusk-10: var(--color-white);
|
|
1166
|
+
--color-on-dusk-20: var(--color-white);
|
|
1167
|
+
--color-on-dusk-30: var(--color-white);
|
|
1168
|
+
--color-on-dusk-40: var(--color-white);
|
|
1169
|
+
--color-on-dusk-50: var(--color-white);
|
|
1170
|
+
--color-on-dusk-60: var(--color-black);
|
|
1171
|
+
--color-on-dusk-70: var(--color-black);
|
|
1172
|
+
--color-on-dusk-80: var(--color-black);
|
|
1173
|
+
--color-on-dusk-90: var(--color-black);
|
|
1174
|
+
}
|
|
1175
|
+
|
|
929
1176
|
:root {
|
|
930
1177
|
--color-dusk-10-90: #e1d9f2;
|
|
931
1178
|
--color-dusk-20-80: #c3b3e5;
|
|
@@ -982,6 +1229,34 @@
|
|
|
982
1229
|
|
|
983
1230
|
/* ------------------------------------------------------------------------------ */
|
|
984
1231
|
/* --------------------------------SUPPORT - SKY--------------------------------- */
|
|
1232
|
+
/* Auto-contrast pair: `--color-on-{name}-{step}` is the label/icon color for
|
|
1233
|
+
anything painted on `--color-{name}-{step}`. It follows the same mirror
|
|
1234
|
+
math as the background it answers to — in dark the background resolves to
|
|
1235
|
+
the complementary step, so the on-color is computed from that same step. */
|
|
1236
|
+
:root {
|
|
1237
|
+
--color-on-sky-10: var(--color-black);
|
|
1238
|
+
--color-on-sky-20: var(--color-black);
|
|
1239
|
+
--color-on-sky-30: var(--color-black);
|
|
1240
|
+
--color-on-sky-40: var(--color-black);
|
|
1241
|
+
--color-on-sky-50: var(--color-white);
|
|
1242
|
+
--color-on-sky-60: var(--color-white);
|
|
1243
|
+
--color-on-sky-70: var(--color-white);
|
|
1244
|
+
--color-on-sky-80: var(--color-white);
|
|
1245
|
+
--color-on-sky-90: var(--color-white);
|
|
1246
|
+
}
|
|
1247
|
+
|
|
1248
|
+
[data-theme="dark"] {
|
|
1249
|
+
--color-on-sky-10: var(--color-white);
|
|
1250
|
+
--color-on-sky-20: var(--color-white);
|
|
1251
|
+
--color-on-sky-30: var(--color-white);
|
|
1252
|
+
--color-on-sky-40: var(--color-white);
|
|
1253
|
+
--color-on-sky-50: var(--color-white);
|
|
1254
|
+
--color-on-sky-60: var(--color-black);
|
|
1255
|
+
--color-on-sky-70: var(--color-black);
|
|
1256
|
+
--color-on-sky-80: var(--color-black);
|
|
1257
|
+
--color-on-sky-90: var(--color-black);
|
|
1258
|
+
}
|
|
1259
|
+
|
|
985
1260
|
:root {
|
|
986
1261
|
--color-sky-10-90: #d9e1f2;
|
|
987
1262
|
--color-sky-20-80: #b3c3e5;
|
|
@@ -1038,6 +1313,34 @@
|
|
|
1038
1313
|
|
|
1039
1314
|
/* ------------------------------------------------------------------------------ */
|
|
1040
1315
|
/* --------------------------------SUPPORT - SEA--------------------------------- */
|
|
1316
|
+
/* Auto-contrast pair: `--color-on-{name}-{step}` is the label/icon color for
|
|
1317
|
+
anything painted on `--color-{name}-{step}`. It follows the same mirror
|
|
1318
|
+
math as the background it answers to — in dark the background resolves to
|
|
1319
|
+
the complementary step, so the on-color is computed from that same step. */
|
|
1320
|
+
:root {
|
|
1321
|
+
--color-on-sea-10: var(--color-black);
|
|
1322
|
+
--color-on-sea-20: var(--color-black);
|
|
1323
|
+
--color-on-sea-30: var(--color-black);
|
|
1324
|
+
--color-on-sea-40: var(--color-black);
|
|
1325
|
+
--color-on-sea-50: var(--color-black);
|
|
1326
|
+
--color-on-sea-60: var(--color-white);
|
|
1327
|
+
--color-on-sea-70: var(--color-white);
|
|
1328
|
+
--color-on-sea-80: var(--color-white);
|
|
1329
|
+
--color-on-sea-90: var(--color-white);
|
|
1330
|
+
}
|
|
1331
|
+
|
|
1332
|
+
[data-theme="dark"] {
|
|
1333
|
+
--color-on-sea-10: var(--color-white);
|
|
1334
|
+
--color-on-sea-20: var(--color-white);
|
|
1335
|
+
--color-on-sea-30: var(--color-white);
|
|
1336
|
+
--color-on-sea-40: var(--color-white);
|
|
1337
|
+
--color-on-sea-50: var(--color-black);
|
|
1338
|
+
--color-on-sea-60: var(--color-black);
|
|
1339
|
+
--color-on-sea-70: var(--color-black);
|
|
1340
|
+
--color-on-sea-80: var(--color-black);
|
|
1341
|
+
--color-on-sea-90: var(--color-black);
|
|
1342
|
+
}
|
|
1343
|
+
|
|
1041
1344
|
:root {
|
|
1042
1345
|
--color-sea-10-90: #d9eaf2;
|
|
1043
1346
|
--color-sea-20-80: #b3d5e5;
|
|
@@ -1094,6 +1397,34 @@
|
|
|
1094
1397
|
|
|
1095
1398
|
/* ------------------------------------------------------------------------------ */
|
|
1096
1399
|
/* --------------------------------SUPPORT - LAKE-------------------------------- */
|
|
1400
|
+
/* Auto-contrast pair: `--color-on-{name}-{step}` is the label/icon color for
|
|
1401
|
+
anything painted on `--color-{name}-{step}`. It follows the same mirror
|
|
1402
|
+
math as the background it answers to — in dark the background resolves to
|
|
1403
|
+
the complementary step, so the on-color is computed from that same step. */
|
|
1404
|
+
:root {
|
|
1405
|
+
--color-on-lake-10: var(--color-black);
|
|
1406
|
+
--color-on-lake-20: var(--color-black);
|
|
1407
|
+
--color-on-lake-30: var(--color-black);
|
|
1408
|
+
--color-on-lake-40: var(--color-black);
|
|
1409
|
+
--color-on-lake-50: var(--color-black);
|
|
1410
|
+
--color-on-lake-60: var(--color-black);
|
|
1411
|
+
--color-on-lake-70: var(--color-white);
|
|
1412
|
+
--color-on-lake-80: var(--color-white);
|
|
1413
|
+
--color-on-lake-90: var(--color-white);
|
|
1414
|
+
}
|
|
1415
|
+
|
|
1416
|
+
[data-theme="dark"] {
|
|
1417
|
+
--color-on-lake-10: var(--color-white);
|
|
1418
|
+
--color-on-lake-20: var(--color-white);
|
|
1419
|
+
--color-on-lake-30: var(--color-white);
|
|
1420
|
+
--color-on-lake-40: var(--color-black);
|
|
1421
|
+
--color-on-lake-50: var(--color-black);
|
|
1422
|
+
--color-on-lake-60: var(--color-black);
|
|
1423
|
+
--color-on-lake-70: var(--color-black);
|
|
1424
|
+
--color-on-lake-80: var(--color-black);
|
|
1425
|
+
--color-on-lake-90: var(--color-black);
|
|
1426
|
+
}
|
|
1427
|
+
|
|
1097
1428
|
:root {
|
|
1098
1429
|
--color-lake-10-90: #d9f2ee;
|
|
1099
1430
|
--color-lake-20-80: #b3e5dd;
|
|
@@ -1148,6 +1479,763 @@
|
|
|
1148
1479
|
);
|
|
1149
1480
|
}
|
|
1150
1481
|
|
|
1482
|
+
/* ------------------------------------------------------------------------------ */
|
|
1483
|
+
/* --------------------------------COLOR SCHEMES--------------------------------- */
|
|
1484
|
+
/* Emitted AFTER every family on purpose. These selectors and the `:root` blocks the
|
|
1485
|
+
`color-family` mixin writes have identical specificity (0,1,0), so the later one
|
|
1486
|
+
wins — and `:root` matches <html> too. Declared earlier, a scheme set on <html>
|
|
1487
|
+
itself lost to the family defaults and silently did nothing, which is how every
|
|
1488
|
+
panel portaled to document.body (Select, Menu, DatePicker, ColorPicker, …) ended
|
|
1489
|
+
up ignoring the active scheme: outside the app tree, <html> is the only carrier
|
|
1490
|
+
left. Keep this section last. */
|
|
1491
|
+
[data-color-scheme="neutral"] {
|
|
1492
|
+
--color-primary-10: var(--color-neutral-10);
|
|
1493
|
+
--color-primary-20: var(--color-neutral-20);
|
|
1494
|
+
--color-primary-30: var(--color-neutral-30);
|
|
1495
|
+
--color-primary-40: var(--color-neutral-50);
|
|
1496
|
+
--color-primary-50: var(--color-neutral-80);
|
|
1497
|
+
--color-primary-60: var(--color-neutral-90);
|
|
1498
|
+
--color-primary-70: var(--color-neutral-90);
|
|
1499
|
+
--color-primary-80: var(--color-neutral-90);
|
|
1500
|
+
--color-primary-90: var(--color-neutral-90);
|
|
1501
|
+
/* Neutral is the one scheme that isn't a straight family remap (step 40 → 50,
|
|
1502
|
+
50 → 80, 60+ → 90), so its on-colors are mapped by hand to the step actually
|
|
1503
|
+
used above instead of by the generated loop. */
|
|
1504
|
+
--color-on-primary-10: var(--color-on-neutral-10);
|
|
1505
|
+
--color-on-primary-20: var(--color-on-neutral-20);
|
|
1506
|
+
--color-on-primary-30: var(--color-on-neutral-30);
|
|
1507
|
+
--color-on-primary-40: var(--color-on-neutral-50);
|
|
1508
|
+
--color-on-primary-50: var(--color-on-neutral-80);
|
|
1509
|
+
--color-on-primary-60: var(--color-on-neutral-90);
|
|
1510
|
+
--color-on-primary-70: var(--color-on-neutral-90);
|
|
1511
|
+
--color-on-primary-80: var(--color-on-neutral-90);
|
|
1512
|
+
--color-on-primary-90: var(--color-on-neutral-90);
|
|
1513
|
+
}
|
|
1514
|
+
|
|
1515
|
+
/* Map key = attribute value; tuple = (source family, force --color-on-primary: black?) */
|
|
1516
|
+
[data-color-scheme="secondary"] {
|
|
1517
|
+
--color-primary-10: var(--color-secondary-10);
|
|
1518
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1519
|
+
from a different family than the background it sits on would defeat the
|
|
1520
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1521
|
+
same cascade position). */
|
|
1522
|
+
--color-on-primary-10: var(--color-on-secondary-10);
|
|
1523
|
+
--color-primary-20: var(--color-secondary-20);
|
|
1524
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1525
|
+
from a different family than the background it sits on would defeat the
|
|
1526
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1527
|
+
same cascade position). */
|
|
1528
|
+
--color-on-primary-20: var(--color-on-secondary-20);
|
|
1529
|
+
--color-primary-30: var(--color-secondary-30);
|
|
1530
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1531
|
+
from a different family than the background it sits on would defeat the
|
|
1532
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1533
|
+
same cascade position). */
|
|
1534
|
+
--color-on-primary-30: var(--color-on-secondary-30);
|
|
1535
|
+
--color-primary-40: var(--color-secondary-40);
|
|
1536
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1537
|
+
from a different family than the background it sits on would defeat the
|
|
1538
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1539
|
+
same cascade position). */
|
|
1540
|
+
--color-on-primary-40: var(--color-on-secondary-40);
|
|
1541
|
+
--color-primary-50: var(--color-secondary-50);
|
|
1542
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1543
|
+
from a different family than the background it sits on would defeat the
|
|
1544
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1545
|
+
same cascade position). */
|
|
1546
|
+
--color-on-primary-50: var(--color-on-secondary-50);
|
|
1547
|
+
--color-primary-60: var(--color-secondary-60);
|
|
1548
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1549
|
+
from a different family than the background it sits on would defeat the
|
|
1550
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1551
|
+
same cascade position). */
|
|
1552
|
+
--color-on-primary-60: var(--color-on-secondary-60);
|
|
1553
|
+
--color-primary-70: var(--color-secondary-70);
|
|
1554
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1555
|
+
from a different family than the background it sits on would defeat the
|
|
1556
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1557
|
+
same cascade position). */
|
|
1558
|
+
--color-on-primary-70: var(--color-on-secondary-70);
|
|
1559
|
+
--color-primary-80: var(--color-secondary-80);
|
|
1560
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1561
|
+
from a different family than the background it sits on would defeat the
|
|
1562
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1563
|
+
same cascade position). */
|
|
1564
|
+
--color-on-primary-80: var(--color-on-secondary-80);
|
|
1565
|
+
--color-primary-90: var(--color-secondary-90);
|
|
1566
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1567
|
+
from a different family than the background it sits on would defeat the
|
|
1568
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1569
|
+
same cascade position). */
|
|
1570
|
+
--color-on-primary-90: var(--color-on-secondary-90);
|
|
1571
|
+
}
|
|
1572
|
+
|
|
1573
|
+
[data-color-scheme="tertiary"] {
|
|
1574
|
+
--color-primary-10: var(--color-tertiary-10);
|
|
1575
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1576
|
+
from a different family than the background it sits on would defeat the
|
|
1577
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1578
|
+
same cascade position). */
|
|
1579
|
+
--color-on-primary-10: var(--color-on-tertiary-10);
|
|
1580
|
+
--color-primary-20: var(--color-tertiary-20);
|
|
1581
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1582
|
+
from a different family than the background it sits on would defeat the
|
|
1583
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1584
|
+
same cascade position). */
|
|
1585
|
+
--color-on-primary-20: var(--color-on-tertiary-20);
|
|
1586
|
+
--color-primary-30: var(--color-tertiary-30);
|
|
1587
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1588
|
+
from a different family than the background it sits on would defeat the
|
|
1589
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1590
|
+
same cascade position). */
|
|
1591
|
+
--color-on-primary-30: var(--color-on-tertiary-30);
|
|
1592
|
+
--color-primary-40: var(--color-tertiary-40);
|
|
1593
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1594
|
+
from a different family than the background it sits on would defeat the
|
|
1595
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1596
|
+
same cascade position). */
|
|
1597
|
+
--color-on-primary-40: var(--color-on-tertiary-40);
|
|
1598
|
+
--color-primary-50: var(--color-tertiary-50);
|
|
1599
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1600
|
+
from a different family than the background it sits on would defeat the
|
|
1601
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1602
|
+
same cascade position). */
|
|
1603
|
+
--color-on-primary-50: var(--color-on-tertiary-50);
|
|
1604
|
+
--color-primary-60: var(--color-tertiary-60);
|
|
1605
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1606
|
+
from a different family than the background it sits on would defeat the
|
|
1607
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1608
|
+
same cascade position). */
|
|
1609
|
+
--color-on-primary-60: var(--color-on-tertiary-60);
|
|
1610
|
+
--color-primary-70: var(--color-tertiary-70);
|
|
1611
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1612
|
+
from a different family than the background it sits on would defeat the
|
|
1613
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1614
|
+
same cascade position). */
|
|
1615
|
+
--color-on-primary-70: var(--color-on-tertiary-70);
|
|
1616
|
+
--color-primary-80: var(--color-tertiary-80);
|
|
1617
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1618
|
+
from a different family than the background it sits on would defeat the
|
|
1619
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1620
|
+
same cascade position). */
|
|
1621
|
+
--color-on-primary-80: var(--color-on-tertiary-80);
|
|
1622
|
+
--color-primary-90: var(--color-tertiary-90);
|
|
1623
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1624
|
+
from a different family than the background it sits on would defeat the
|
|
1625
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1626
|
+
same cascade position). */
|
|
1627
|
+
--color-on-primary-90: var(--color-on-tertiary-90);
|
|
1628
|
+
}
|
|
1629
|
+
|
|
1630
|
+
[data-color-scheme="lya"] {
|
|
1631
|
+
--color-primary-10: var(--color-lya-10);
|
|
1632
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1633
|
+
from a different family than the background it sits on would defeat the
|
|
1634
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1635
|
+
same cascade position). */
|
|
1636
|
+
--color-on-primary-10: var(--color-on-lya-10);
|
|
1637
|
+
--color-primary-20: var(--color-lya-20);
|
|
1638
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1639
|
+
from a different family than the background it sits on would defeat the
|
|
1640
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1641
|
+
same cascade position). */
|
|
1642
|
+
--color-on-primary-20: var(--color-on-lya-20);
|
|
1643
|
+
--color-primary-30: var(--color-lya-30);
|
|
1644
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1645
|
+
from a different family than the background it sits on would defeat the
|
|
1646
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1647
|
+
same cascade position). */
|
|
1648
|
+
--color-on-primary-30: var(--color-on-lya-30);
|
|
1649
|
+
--color-primary-40: var(--color-lya-40);
|
|
1650
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1651
|
+
from a different family than the background it sits on would defeat the
|
|
1652
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1653
|
+
same cascade position). */
|
|
1654
|
+
--color-on-primary-40: var(--color-on-lya-40);
|
|
1655
|
+
--color-primary-50: var(--color-lya-50);
|
|
1656
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1657
|
+
from a different family than the background it sits on would defeat the
|
|
1658
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1659
|
+
same cascade position). */
|
|
1660
|
+
--color-on-primary-50: var(--color-on-lya-50);
|
|
1661
|
+
--color-primary-60: var(--color-lya-60);
|
|
1662
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1663
|
+
from a different family than the background it sits on would defeat the
|
|
1664
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1665
|
+
same cascade position). */
|
|
1666
|
+
--color-on-primary-60: var(--color-on-lya-60);
|
|
1667
|
+
--color-primary-70: var(--color-lya-70);
|
|
1668
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1669
|
+
from a different family than the background it sits on would defeat the
|
|
1670
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1671
|
+
same cascade position). */
|
|
1672
|
+
--color-on-primary-70: var(--color-on-lya-70);
|
|
1673
|
+
--color-primary-80: var(--color-lya-80);
|
|
1674
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1675
|
+
from a different family than the background it sits on would defeat the
|
|
1676
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1677
|
+
same cascade position). */
|
|
1678
|
+
--color-on-primary-80: var(--color-on-lya-80);
|
|
1679
|
+
--color-primary-90: var(--color-lya-90);
|
|
1680
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1681
|
+
from a different family than the background it sits on would defeat the
|
|
1682
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1683
|
+
same cascade position). */
|
|
1684
|
+
--color-on-primary-90: var(--color-on-lya-90);
|
|
1685
|
+
}
|
|
1686
|
+
|
|
1687
|
+
[data-color-scheme="leaf"] {
|
|
1688
|
+
--color-primary-10: var(--color-leaf-10);
|
|
1689
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1690
|
+
from a different family than the background it sits on would defeat the
|
|
1691
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1692
|
+
same cascade position). */
|
|
1693
|
+
--color-on-primary-10: var(--color-on-leaf-10);
|
|
1694
|
+
--color-primary-20: var(--color-leaf-20);
|
|
1695
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1696
|
+
from a different family than the background it sits on would defeat the
|
|
1697
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1698
|
+
same cascade position). */
|
|
1699
|
+
--color-on-primary-20: var(--color-on-leaf-20);
|
|
1700
|
+
--color-primary-30: var(--color-leaf-30);
|
|
1701
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1702
|
+
from a different family than the background it sits on would defeat the
|
|
1703
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1704
|
+
same cascade position). */
|
|
1705
|
+
--color-on-primary-30: var(--color-on-leaf-30);
|
|
1706
|
+
--color-primary-40: var(--color-leaf-40);
|
|
1707
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1708
|
+
from a different family than the background it sits on would defeat the
|
|
1709
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1710
|
+
same cascade position). */
|
|
1711
|
+
--color-on-primary-40: var(--color-on-leaf-40);
|
|
1712
|
+
--color-primary-50: var(--color-leaf-50);
|
|
1713
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1714
|
+
from a different family than the background it sits on would defeat the
|
|
1715
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1716
|
+
same cascade position). */
|
|
1717
|
+
--color-on-primary-50: var(--color-on-leaf-50);
|
|
1718
|
+
--color-primary-60: var(--color-leaf-60);
|
|
1719
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1720
|
+
from a different family than the background it sits on would defeat the
|
|
1721
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1722
|
+
same cascade position). */
|
|
1723
|
+
--color-on-primary-60: var(--color-on-leaf-60);
|
|
1724
|
+
--color-primary-70: var(--color-leaf-70);
|
|
1725
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1726
|
+
from a different family than the background it sits on would defeat the
|
|
1727
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1728
|
+
same cascade position). */
|
|
1729
|
+
--color-on-primary-70: var(--color-on-leaf-70);
|
|
1730
|
+
--color-primary-80: var(--color-leaf-80);
|
|
1731
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1732
|
+
from a different family than the background it sits on would defeat the
|
|
1733
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1734
|
+
same cascade position). */
|
|
1735
|
+
--color-on-primary-80: var(--color-on-leaf-80);
|
|
1736
|
+
--color-primary-90: var(--color-leaf-90);
|
|
1737
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1738
|
+
from a different family than the background it sits on would defeat the
|
|
1739
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1740
|
+
same cascade position). */
|
|
1741
|
+
--color-on-primary-90: var(--color-on-leaf-90);
|
|
1742
|
+
--color-on-primary: var(--color-black);
|
|
1743
|
+
}
|
|
1744
|
+
|
|
1745
|
+
[data-color-scheme="sand"] {
|
|
1746
|
+
--color-primary-10: var(--color-sand-10);
|
|
1747
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1748
|
+
from a different family than the background it sits on would defeat the
|
|
1749
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1750
|
+
same cascade position). */
|
|
1751
|
+
--color-on-primary-10: var(--color-on-sand-10);
|
|
1752
|
+
--color-primary-20: var(--color-sand-20);
|
|
1753
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1754
|
+
from a different family than the background it sits on would defeat the
|
|
1755
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1756
|
+
same cascade position). */
|
|
1757
|
+
--color-on-primary-20: var(--color-on-sand-20);
|
|
1758
|
+
--color-primary-30: var(--color-sand-30);
|
|
1759
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1760
|
+
from a different family than the background it sits on would defeat the
|
|
1761
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1762
|
+
same cascade position). */
|
|
1763
|
+
--color-on-primary-30: var(--color-on-sand-30);
|
|
1764
|
+
--color-primary-40: var(--color-sand-40);
|
|
1765
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1766
|
+
from a different family than the background it sits on would defeat the
|
|
1767
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1768
|
+
same cascade position). */
|
|
1769
|
+
--color-on-primary-40: var(--color-on-sand-40);
|
|
1770
|
+
--color-primary-50: var(--color-sand-50);
|
|
1771
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1772
|
+
from a different family than the background it sits on would defeat the
|
|
1773
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1774
|
+
same cascade position). */
|
|
1775
|
+
--color-on-primary-50: var(--color-on-sand-50);
|
|
1776
|
+
--color-primary-60: var(--color-sand-60);
|
|
1777
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1778
|
+
from a different family than the background it sits on would defeat the
|
|
1779
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1780
|
+
same cascade position). */
|
|
1781
|
+
--color-on-primary-60: var(--color-on-sand-60);
|
|
1782
|
+
--color-primary-70: var(--color-sand-70);
|
|
1783
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1784
|
+
from a different family than the background it sits on would defeat the
|
|
1785
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1786
|
+
same cascade position). */
|
|
1787
|
+
--color-on-primary-70: var(--color-on-sand-70);
|
|
1788
|
+
--color-primary-80: var(--color-sand-80);
|
|
1789
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1790
|
+
from a different family than the background it sits on would defeat the
|
|
1791
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1792
|
+
same cascade position). */
|
|
1793
|
+
--color-on-primary-80: var(--color-on-sand-80);
|
|
1794
|
+
--color-primary-90: var(--color-sand-90);
|
|
1795
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1796
|
+
from a different family than the background it sits on would defeat the
|
|
1797
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1798
|
+
same cascade position). */
|
|
1799
|
+
--color-on-primary-90: var(--color-on-sand-90);
|
|
1800
|
+
--color-on-primary: var(--color-black);
|
|
1801
|
+
}
|
|
1802
|
+
|
|
1803
|
+
[data-color-scheme="wood"] {
|
|
1804
|
+
--color-primary-10: var(--color-wood-10);
|
|
1805
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1806
|
+
from a different family than the background it sits on would defeat the
|
|
1807
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1808
|
+
same cascade position). */
|
|
1809
|
+
--color-on-primary-10: var(--color-on-wood-10);
|
|
1810
|
+
--color-primary-20: var(--color-wood-20);
|
|
1811
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1812
|
+
from a different family than the background it sits on would defeat the
|
|
1813
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1814
|
+
same cascade position). */
|
|
1815
|
+
--color-on-primary-20: var(--color-on-wood-20);
|
|
1816
|
+
--color-primary-30: var(--color-wood-30);
|
|
1817
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1818
|
+
from a different family than the background it sits on would defeat the
|
|
1819
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1820
|
+
same cascade position). */
|
|
1821
|
+
--color-on-primary-30: var(--color-on-wood-30);
|
|
1822
|
+
--color-primary-40: var(--color-wood-40);
|
|
1823
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1824
|
+
from a different family than the background it sits on would defeat the
|
|
1825
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1826
|
+
same cascade position). */
|
|
1827
|
+
--color-on-primary-40: var(--color-on-wood-40);
|
|
1828
|
+
--color-primary-50: var(--color-wood-50);
|
|
1829
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1830
|
+
from a different family than the background it sits on would defeat the
|
|
1831
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1832
|
+
same cascade position). */
|
|
1833
|
+
--color-on-primary-50: var(--color-on-wood-50);
|
|
1834
|
+
--color-primary-60: var(--color-wood-60);
|
|
1835
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1836
|
+
from a different family than the background it sits on would defeat the
|
|
1837
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1838
|
+
same cascade position). */
|
|
1839
|
+
--color-on-primary-60: var(--color-on-wood-60);
|
|
1840
|
+
--color-primary-70: var(--color-wood-70);
|
|
1841
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1842
|
+
from a different family than the background it sits on would defeat the
|
|
1843
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1844
|
+
same cascade position). */
|
|
1845
|
+
--color-on-primary-70: var(--color-on-wood-70);
|
|
1846
|
+
--color-primary-80: var(--color-wood-80);
|
|
1847
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1848
|
+
from a different family than the background it sits on would defeat the
|
|
1849
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1850
|
+
same cascade position). */
|
|
1851
|
+
--color-on-primary-80: var(--color-on-wood-80);
|
|
1852
|
+
--color-primary-90: var(--color-wood-90);
|
|
1853
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1854
|
+
from a different family than the background it sits on would defeat the
|
|
1855
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1856
|
+
same cascade position). */
|
|
1857
|
+
--color-on-primary-90: var(--color-on-wood-90);
|
|
1858
|
+
}
|
|
1859
|
+
|
|
1860
|
+
[data-color-scheme="clay"] {
|
|
1861
|
+
--color-primary-10: var(--color-clay-10);
|
|
1862
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1863
|
+
from a different family than the background it sits on would defeat the
|
|
1864
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1865
|
+
same cascade position). */
|
|
1866
|
+
--color-on-primary-10: var(--color-on-clay-10);
|
|
1867
|
+
--color-primary-20: var(--color-clay-20);
|
|
1868
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1869
|
+
from a different family than the background it sits on would defeat the
|
|
1870
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1871
|
+
same cascade position). */
|
|
1872
|
+
--color-on-primary-20: var(--color-on-clay-20);
|
|
1873
|
+
--color-primary-30: var(--color-clay-30);
|
|
1874
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1875
|
+
from a different family than the background it sits on would defeat the
|
|
1876
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1877
|
+
same cascade position). */
|
|
1878
|
+
--color-on-primary-30: var(--color-on-clay-30);
|
|
1879
|
+
--color-primary-40: var(--color-clay-40);
|
|
1880
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1881
|
+
from a different family than the background it sits on would defeat the
|
|
1882
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1883
|
+
same cascade position). */
|
|
1884
|
+
--color-on-primary-40: var(--color-on-clay-40);
|
|
1885
|
+
--color-primary-50: var(--color-clay-50);
|
|
1886
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1887
|
+
from a different family than the background it sits on would defeat the
|
|
1888
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1889
|
+
same cascade position). */
|
|
1890
|
+
--color-on-primary-50: var(--color-on-clay-50);
|
|
1891
|
+
--color-primary-60: var(--color-clay-60);
|
|
1892
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1893
|
+
from a different family than the background it sits on would defeat the
|
|
1894
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1895
|
+
same cascade position). */
|
|
1896
|
+
--color-on-primary-60: var(--color-on-clay-60);
|
|
1897
|
+
--color-primary-70: var(--color-clay-70);
|
|
1898
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1899
|
+
from a different family than the background it sits on would defeat the
|
|
1900
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1901
|
+
same cascade position). */
|
|
1902
|
+
--color-on-primary-70: var(--color-on-clay-70);
|
|
1903
|
+
--color-primary-80: var(--color-clay-80);
|
|
1904
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1905
|
+
from a different family than the background it sits on would defeat the
|
|
1906
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1907
|
+
same cascade position). */
|
|
1908
|
+
--color-on-primary-80: var(--color-on-clay-80);
|
|
1909
|
+
--color-primary-90: var(--color-clay-90);
|
|
1910
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1911
|
+
from a different family than the background it sits on would defeat the
|
|
1912
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1913
|
+
same cascade position). */
|
|
1914
|
+
--color-on-primary-90: var(--color-on-clay-90);
|
|
1915
|
+
}
|
|
1916
|
+
|
|
1917
|
+
[data-color-scheme="flower"] {
|
|
1918
|
+
--color-primary-10: var(--color-flower-10);
|
|
1919
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1920
|
+
from a different family than the background it sits on would defeat the
|
|
1921
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1922
|
+
same cascade position). */
|
|
1923
|
+
--color-on-primary-10: var(--color-on-flower-10);
|
|
1924
|
+
--color-primary-20: var(--color-flower-20);
|
|
1925
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1926
|
+
from a different family than the background it sits on would defeat the
|
|
1927
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1928
|
+
same cascade position). */
|
|
1929
|
+
--color-on-primary-20: var(--color-on-flower-20);
|
|
1930
|
+
--color-primary-30: var(--color-flower-30);
|
|
1931
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1932
|
+
from a different family than the background it sits on would defeat the
|
|
1933
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1934
|
+
same cascade position). */
|
|
1935
|
+
--color-on-primary-30: var(--color-on-flower-30);
|
|
1936
|
+
--color-primary-40: var(--color-flower-40);
|
|
1937
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1938
|
+
from a different family than the background it sits on would defeat the
|
|
1939
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1940
|
+
same cascade position). */
|
|
1941
|
+
--color-on-primary-40: var(--color-on-flower-40);
|
|
1942
|
+
--color-primary-50: var(--color-flower-50);
|
|
1943
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1944
|
+
from a different family than the background it sits on would defeat the
|
|
1945
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1946
|
+
same cascade position). */
|
|
1947
|
+
--color-on-primary-50: var(--color-on-flower-50);
|
|
1948
|
+
--color-primary-60: var(--color-flower-60);
|
|
1949
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1950
|
+
from a different family than the background it sits on would defeat the
|
|
1951
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1952
|
+
same cascade position). */
|
|
1953
|
+
--color-on-primary-60: var(--color-on-flower-60);
|
|
1954
|
+
--color-primary-70: var(--color-flower-70);
|
|
1955
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1956
|
+
from a different family than the background it sits on would defeat the
|
|
1957
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1958
|
+
same cascade position). */
|
|
1959
|
+
--color-on-primary-70: var(--color-on-flower-70);
|
|
1960
|
+
--color-primary-80: var(--color-flower-80);
|
|
1961
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1962
|
+
from a different family than the background it sits on would defeat the
|
|
1963
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1964
|
+
same cascade position). */
|
|
1965
|
+
--color-on-primary-80: var(--color-on-flower-80);
|
|
1966
|
+
--color-primary-90: var(--color-flower-90);
|
|
1967
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1968
|
+
from a different family than the background it sits on would defeat the
|
|
1969
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1970
|
+
same cascade position). */
|
|
1971
|
+
--color-on-primary-90: var(--color-on-flower-90);
|
|
1972
|
+
}
|
|
1973
|
+
|
|
1974
|
+
[data-color-scheme="dusk"] {
|
|
1975
|
+
--color-primary-10: var(--color-dusk-10);
|
|
1976
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1977
|
+
from a different family than the background it sits on would defeat the
|
|
1978
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1979
|
+
same cascade position). */
|
|
1980
|
+
--color-on-primary-10: var(--color-on-dusk-10);
|
|
1981
|
+
--color-primary-20: var(--color-dusk-20);
|
|
1982
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1983
|
+
from a different family than the background it sits on would defeat the
|
|
1984
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1985
|
+
same cascade position). */
|
|
1986
|
+
--color-on-primary-20: var(--color-on-dusk-20);
|
|
1987
|
+
--color-primary-30: var(--color-dusk-30);
|
|
1988
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1989
|
+
from a different family than the background it sits on would defeat the
|
|
1990
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1991
|
+
same cascade position). */
|
|
1992
|
+
--color-on-primary-30: var(--color-on-dusk-30);
|
|
1993
|
+
--color-primary-40: var(--color-dusk-40);
|
|
1994
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
1995
|
+
from a different family than the background it sits on would defeat the
|
|
1996
|
+
whole point, so these two lines must never drift apart (same block,
|
|
1997
|
+
same cascade position). */
|
|
1998
|
+
--color-on-primary-40: var(--color-on-dusk-40);
|
|
1999
|
+
--color-primary-50: var(--color-dusk-50);
|
|
2000
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
2001
|
+
from a different family than the background it sits on would defeat the
|
|
2002
|
+
whole point, so these two lines must never drift apart (same block,
|
|
2003
|
+
same cascade position). */
|
|
2004
|
+
--color-on-primary-50: var(--color-on-dusk-50);
|
|
2005
|
+
--color-primary-60: var(--color-dusk-60);
|
|
2006
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
2007
|
+
from a different family than the background it sits on would defeat the
|
|
2008
|
+
whole point, so these two lines must never drift apart (same block,
|
|
2009
|
+
same cascade position). */
|
|
2010
|
+
--color-on-primary-60: var(--color-on-dusk-60);
|
|
2011
|
+
--color-primary-70: var(--color-dusk-70);
|
|
2012
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
2013
|
+
from a different family than the background it sits on would defeat the
|
|
2014
|
+
whole point, so these two lines must never drift apart (same block,
|
|
2015
|
+
same cascade position). */
|
|
2016
|
+
--color-on-primary-70: var(--color-on-dusk-70);
|
|
2017
|
+
--color-primary-80: var(--color-dusk-80);
|
|
2018
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
2019
|
+
from a different family than the background it sits on would defeat the
|
|
2020
|
+
whole point, so these two lines must never drift apart (same block,
|
|
2021
|
+
same cascade position). */
|
|
2022
|
+
--color-on-primary-80: var(--color-on-dusk-80);
|
|
2023
|
+
--color-primary-90: var(--color-dusk-90);
|
|
2024
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
2025
|
+
from a different family than the background it sits on would defeat the
|
|
2026
|
+
whole point, so these two lines must never drift apart (same block,
|
|
2027
|
+
same cascade position). */
|
|
2028
|
+
--color-on-primary-90: var(--color-on-dusk-90);
|
|
2029
|
+
}
|
|
2030
|
+
|
|
2031
|
+
[data-color-scheme="sky"] {
|
|
2032
|
+
--color-primary-10: var(--color-sky-10);
|
|
2033
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
2034
|
+
from a different family than the background it sits on would defeat the
|
|
2035
|
+
whole point, so these two lines must never drift apart (same block,
|
|
2036
|
+
same cascade position). */
|
|
2037
|
+
--color-on-primary-10: var(--color-on-sky-10);
|
|
2038
|
+
--color-primary-20: var(--color-sky-20);
|
|
2039
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
2040
|
+
from a different family than the background it sits on would defeat the
|
|
2041
|
+
whole point, so these two lines must never drift apart (same block,
|
|
2042
|
+
same cascade position). */
|
|
2043
|
+
--color-on-primary-20: var(--color-on-sky-20);
|
|
2044
|
+
--color-primary-30: var(--color-sky-30);
|
|
2045
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
2046
|
+
from a different family than the background it sits on would defeat the
|
|
2047
|
+
whole point, so these two lines must never drift apart (same block,
|
|
2048
|
+
same cascade position). */
|
|
2049
|
+
--color-on-primary-30: var(--color-on-sky-30);
|
|
2050
|
+
--color-primary-40: var(--color-sky-40);
|
|
2051
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
2052
|
+
from a different family than the background it sits on would defeat the
|
|
2053
|
+
whole point, so these two lines must never drift apart (same block,
|
|
2054
|
+
same cascade position). */
|
|
2055
|
+
--color-on-primary-40: var(--color-on-sky-40);
|
|
2056
|
+
--color-primary-50: var(--color-sky-50);
|
|
2057
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
2058
|
+
from a different family than the background it sits on would defeat the
|
|
2059
|
+
whole point, so these two lines must never drift apart (same block,
|
|
2060
|
+
same cascade position). */
|
|
2061
|
+
--color-on-primary-50: var(--color-on-sky-50);
|
|
2062
|
+
--color-primary-60: var(--color-sky-60);
|
|
2063
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
2064
|
+
from a different family than the background it sits on would defeat the
|
|
2065
|
+
whole point, so these two lines must never drift apart (same block,
|
|
2066
|
+
same cascade position). */
|
|
2067
|
+
--color-on-primary-60: var(--color-on-sky-60);
|
|
2068
|
+
--color-primary-70: var(--color-sky-70);
|
|
2069
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
2070
|
+
from a different family than the background it sits on would defeat the
|
|
2071
|
+
whole point, so these two lines must never drift apart (same block,
|
|
2072
|
+
same cascade position). */
|
|
2073
|
+
--color-on-primary-70: var(--color-on-sky-70);
|
|
2074
|
+
--color-primary-80: var(--color-sky-80);
|
|
2075
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
2076
|
+
from a different family than the background it sits on would defeat the
|
|
2077
|
+
whole point, so these two lines must never drift apart (same block,
|
|
2078
|
+
same cascade position). */
|
|
2079
|
+
--color-on-primary-80: var(--color-on-sky-80);
|
|
2080
|
+
--color-primary-90: var(--color-sky-90);
|
|
2081
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
2082
|
+
from a different family than the background it sits on would defeat the
|
|
2083
|
+
whole point, so these two lines must never drift apart (same block,
|
|
2084
|
+
same cascade position). */
|
|
2085
|
+
--color-on-primary-90: var(--color-on-sky-90);
|
|
2086
|
+
}
|
|
2087
|
+
|
|
2088
|
+
[data-color-scheme="sea"] {
|
|
2089
|
+
--color-primary-10: var(--color-sea-10);
|
|
2090
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
2091
|
+
from a different family than the background it sits on would defeat the
|
|
2092
|
+
whole point, so these two lines must never drift apart (same block,
|
|
2093
|
+
same cascade position). */
|
|
2094
|
+
--color-on-primary-10: var(--color-on-sea-10);
|
|
2095
|
+
--color-primary-20: var(--color-sea-20);
|
|
2096
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
2097
|
+
from a different family than the background it sits on would defeat the
|
|
2098
|
+
whole point, so these two lines must never drift apart (same block,
|
|
2099
|
+
same cascade position). */
|
|
2100
|
+
--color-on-primary-20: var(--color-on-sea-20);
|
|
2101
|
+
--color-primary-30: var(--color-sea-30);
|
|
2102
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
2103
|
+
from a different family than the background it sits on would defeat the
|
|
2104
|
+
whole point, so these two lines must never drift apart (same block,
|
|
2105
|
+
same cascade position). */
|
|
2106
|
+
--color-on-primary-30: var(--color-on-sea-30);
|
|
2107
|
+
--color-primary-40: var(--color-sea-40);
|
|
2108
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
2109
|
+
from a different family than the background it sits on would defeat the
|
|
2110
|
+
whole point, so these two lines must never drift apart (same block,
|
|
2111
|
+
same cascade position). */
|
|
2112
|
+
--color-on-primary-40: var(--color-on-sea-40);
|
|
2113
|
+
--color-primary-50: var(--color-sea-50);
|
|
2114
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
2115
|
+
from a different family than the background it sits on would defeat the
|
|
2116
|
+
whole point, so these two lines must never drift apart (same block,
|
|
2117
|
+
same cascade position). */
|
|
2118
|
+
--color-on-primary-50: var(--color-on-sea-50);
|
|
2119
|
+
--color-primary-60: var(--color-sea-60);
|
|
2120
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
2121
|
+
from a different family than the background it sits on would defeat the
|
|
2122
|
+
whole point, so these two lines must never drift apart (same block,
|
|
2123
|
+
same cascade position). */
|
|
2124
|
+
--color-on-primary-60: var(--color-on-sea-60);
|
|
2125
|
+
--color-primary-70: var(--color-sea-70);
|
|
2126
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
2127
|
+
from a different family than the background it sits on would defeat the
|
|
2128
|
+
whole point, so these two lines must never drift apart (same block,
|
|
2129
|
+
same cascade position). */
|
|
2130
|
+
--color-on-primary-70: var(--color-on-sea-70);
|
|
2131
|
+
--color-primary-80: var(--color-sea-80);
|
|
2132
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
2133
|
+
from a different family than the background it sits on would defeat the
|
|
2134
|
+
whole point, so these two lines must never drift apart (same block,
|
|
2135
|
+
same cascade position). */
|
|
2136
|
+
--color-on-primary-80: var(--color-on-sea-80);
|
|
2137
|
+
--color-primary-90: var(--color-sea-90);
|
|
2138
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
2139
|
+
from a different family than the background it sits on would defeat the
|
|
2140
|
+
whole point, so these two lines must never drift apart (same block,
|
|
2141
|
+
same cascade position). */
|
|
2142
|
+
--color-on-primary-90: var(--color-on-sea-90);
|
|
2143
|
+
}
|
|
2144
|
+
|
|
2145
|
+
[data-color-scheme="lake"] {
|
|
2146
|
+
--color-primary-10: var(--color-lake-10);
|
|
2147
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
2148
|
+
from a different family than the background it sits on would defeat the
|
|
2149
|
+
whole point, so these two lines must never drift apart (same block,
|
|
2150
|
+
same cascade position). */
|
|
2151
|
+
--color-on-primary-10: var(--color-on-lake-10);
|
|
2152
|
+
--color-primary-20: var(--color-lake-20);
|
|
2153
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
2154
|
+
from a different family than the background it sits on would defeat the
|
|
2155
|
+
whole point, so these two lines must never drift apart (same block,
|
|
2156
|
+
same cascade position). */
|
|
2157
|
+
--color-on-primary-20: var(--color-on-lake-20);
|
|
2158
|
+
--color-primary-30: var(--color-lake-30);
|
|
2159
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
2160
|
+
from a different family than the background it sits on would defeat the
|
|
2161
|
+
whole point, so these two lines must never drift apart (same block,
|
|
2162
|
+
same cascade position). */
|
|
2163
|
+
--color-on-primary-30: var(--color-on-lake-30);
|
|
2164
|
+
--color-primary-40: var(--color-lake-40);
|
|
2165
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
2166
|
+
from a different family than the background it sits on would defeat the
|
|
2167
|
+
whole point, so these two lines must never drift apart (same block,
|
|
2168
|
+
same cascade position). */
|
|
2169
|
+
--color-on-primary-40: var(--color-on-lake-40);
|
|
2170
|
+
--color-primary-50: var(--color-lake-50);
|
|
2171
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
2172
|
+
from a different family than the background it sits on would defeat the
|
|
2173
|
+
whole point, so these two lines must never drift apart (same block,
|
|
2174
|
+
same cascade position). */
|
|
2175
|
+
--color-on-primary-50: var(--color-on-lake-50);
|
|
2176
|
+
--color-primary-60: var(--color-lake-60);
|
|
2177
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
2178
|
+
from a different family than the background it sits on would defeat the
|
|
2179
|
+
whole point, so these two lines must never drift apart (same block,
|
|
2180
|
+
same cascade position). */
|
|
2181
|
+
--color-on-primary-60: var(--color-on-lake-60);
|
|
2182
|
+
--color-primary-70: var(--color-lake-70);
|
|
2183
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
2184
|
+
from a different family than the background it sits on would defeat the
|
|
2185
|
+
whole point, so these two lines must never drift apart (same block,
|
|
2186
|
+
same cascade position). */
|
|
2187
|
+
--color-on-primary-70: var(--color-on-lake-70);
|
|
2188
|
+
--color-primary-80: var(--color-lake-80);
|
|
2189
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
2190
|
+
from a different family than the background it sits on would defeat the
|
|
2191
|
+
whole point, so these two lines must never drift apart (same block,
|
|
2192
|
+
same cascade position). */
|
|
2193
|
+
--color-on-primary-80: var(--color-on-lake-80);
|
|
2194
|
+
--color-primary-90: var(--color-lake-90);
|
|
2195
|
+
/* Remapped in lockstep with the background above — an on-color resolved
|
|
2196
|
+
from a different family than the background it sits on would defeat the
|
|
2197
|
+
whole point, so these two lines must never drift apart (same block,
|
|
2198
|
+
same cascade position). */
|
|
2199
|
+
--color-on-primary-90: var(--color-on-lake-90);
|
|
2200
|
+
}
|
|
2201
|
+
|
|
2202
|
+
/* ------------------------------------------------------------------------------ */
|
|
2203
|
+
/* Deferred from the Lya block above — every source family now exists. */
|
|
2204
|
+
:root {
|
|
2205
|
+
--color-on-lya-10: var(--color-black);
|
|
2206
|
+
--color-on-lya-20: var(--color-black);
|
|
2207
|
+
--color-on-lya-30: var(--color-black);
|
|
2208
|
+
--color-on-lya-40: var(--color-black);
|
|
2209
|
+
--color-on-lya-50: var(--color-white);
|
|
2210
|
+
--color-on-lya-60: var(--color-white);
|
|
2211
|
+
--color-on-lya-70: var(--color-white);
|
|
2212
|
+
--color-on-lya-80: var(--color-white);
|
|
2213
|
+
--color-on-lya-90: var(--color-white);
|
|
2214
|
+
}
|
|
2215
|
+
|
|
2216
|
+
[data-theme="dark"] {
|
|
2217
|
+
--color-on-lya-10: var(--color-white);
|
|
2218
|
+
--color-on-lya-20: var(--color-white);
|
|
2219
|
+
--color-on-lya-30: var(--color-white);
|
|
2220
|
+
--color-on-lya-40: var(--color-white);
|
|
2221
|
+
--color-on-lya-50: var(--color-white);
|
|
2222
|
+
--color-on-lya-60: var(--color-black);
|
|
2223
|
+
--color-on-lya-70: var(--color-black);
|
|
2224
|
+
--color-on-lya-80: var(--color-black);
|
|
2225
|
+
--color-on-lya-90: var(--color-black);
|
|
2226
|
+
}
|
|
2227
|
+
|
|
2228
|
+
/* ------------------------------------------------------------------------------ */
|
|
2229
|
+
/* ---------------------------------MENU SIZING---------------------------------- */
|
|
2230
|
+
:root {
|
|
2231
|
+
--menu-item-height: 40px;
|
|
2232
|
+
/* The scrollable list of any menu / select / dropdown stops here. Measured in ITEMS,
|
|
2233
|
+
so a half item stays visible and the list reads as scrollable. It caps the LIST,
|
|
2234
|
+
never the panel — a search field or footer sits outside this box, so the same
|
|
2235
|
+
7.5 items are reachable with or without one. */
|
|
2236
|
+
--menu-max-height: calc(var(--menu-item-height) * 7.5);
|
|
2237
|
+
}
|
|
2238
|
+
|
|
1151
2239
|
/* ------------------------------------------------------------------------------ */
|
|
1152
2240
|
/* -----------------------------------OPACITY------------------------------------ */
|
|
1153
2241
|
:root {
|