@new-ui/colors 1.2.0 → 1.2.1-beta.2

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.
Files changed (27) hide show
  1. package/.github/workflows/ci.yml +19 -0
  2. package/README.md +28 -36
  3. package/assets/cover.png +0 -0
  4. package/dist/index.css +2 -0
  5. package/dist/index.css.map +1 -0
  6. package/package.json +11 -4
  7. package/parcel.config.js +3 -0
  8. package/src/_theme-light--cold.scss +123 -0
  9. package/src/_theme-light--warm.scss +123 -0
  10. package/src/_theme-light.scss +123 -0
  11. package/src/_utilities.scss +304 -0
  12. package/src/index.scss +4 -0
  13. package/build-tokens.js +0 -34
  14. package/dist/themes/dark-cold.css +0 -184
  15. package/dist/themes/dark-warm.css +0 -184
  16. package/dist/themes/dark.css +0 -184
  17. package/dist/themes/light-cold.css +0 -184
  18. package/dist/themes/light-warm.css +0 -184
  19. package/dist/themes/light.css +0 -184
  20. package/help/cover.png +0 -0
  21. package/tokens/global/global.json +0 -515
  22. package/tokens/themes/dark/dark.json +0 -198
  23. package/tokens/themes/dark-cold/dark.json +0 -198
  24. package/tokens/themes/dark-warm/dark.json +0 -198
  25. package/tokens/themes/light/light.json +0 -198
  26. package/tokens/themes/light-cold/light.json +0 -198
  27. package/tokens/themes/light-warm/light.json +0 -198
package/src/_utilities.scss ADDED
@@ -0,0 +1,304 @@
1
+
2
+ .nu-u-bg-red1 {background-color: var(--red1);}
3
+ .nu-u-bg-red2 {background-color: var(--red2);}
4
+ .nu-u-bg-red3 {background-color: var(--red3);}
5
+ .nu-u-bg-red4 {background-color: var(--red4);}
6
+ .nu-u-bg-red5 {background-color: var(--red5);}
7
+ .nu-u-bg-red6 {background-color: var(--red6);}
8
+ .nu-u-bg-red7 {background-color: var(--red7);}
9
+ .nu-u-bg-red8 {background-color: var(--red8);}
10
+
11
+ .nu-u-bg-orange1 {background-color: var(--orange1);}
12
+ .nu-u-bg-orange2 {background-color: var(--orange2);}
13
+ .nu-u-bg-orange3 {background-color: var(--orange3);}
14
+ .nu-u-bg-orange4 {background-color: var(--orange4);}
15
+ .nu-u-bg-orange5 {background-color: var(--orange5);}
16
+ .nu-u-bg-orange6 {background-color: var(--orange6);}
17
+ .nu-u-bg-orange7 {background-color: var(--orange7);}
18
+ .nu-u-bg-orange8 {background-color: var(--orange8);}
19
+
20
+ .nu-u-bg-yellow1 {background-color: var(--yellow1);}
21
+ .nu-u-bg-yellow2 {background-color: var(--yellow2);}
22
+ .nu-u-bg-yellow3 {background-color: var(--yellow3);}
23
+ .nu-u-bg-yellow4 {background-color: var(--yellow4);}
24
+ .nu-u-bg-yellow5 {background-color: var(--yellow5);}
25
+ .nu-u-bg-yellow6 {background-color: var(--yellow6);}
26
+ .nu-u-bg-yellow7 {background-color: var(--yellow7);}
27
+ .nu-u-bg-yellow8 {background-color: var(--yellow8);}
28
+
29
+ .nu-u-bg-green1 {background-color: var(--green1);}
30
+ .nu-u-bg-green2 {background-color: var(--green2);}
31
+ .nu-u-bg-green3 {background-color: var(--green3);}
32
+ .nu-u-bg-green4 {background-color: var(--green4);}
33
+ .nu-u-bg-green5 {background-color: var(--green5);}
34
+ .nu-u-bg-green6 {background-color: var(--green6);}
35
+ .nu-u-bg-green7 {background-color: var(--green7);}
36
+ .nu-u-bg-green8 {background-color: var(--green8);}
37
+
38
+ .nu-u-bg-mint1 {background-color: var(--mint1);}
39
+ .nu-u-bg-mint2 {background-color: var(--mint2);}
40
+ .nu-u-bg-mint3 {background-color: var(--mint3);}
41
+ .nu-u-bg-mint4 {background-color: var(--mint4);}
42
+ .nu-u-bg-mint5 {background-color: var(--mint5);}
43
+ .nu-u-bg-mint6 {background-color: var(--mint6);}
44
+ .nu-u-bg-mint7 {background-color: var(--mint7);}
45
+ .nu-u-bg-mint8 {background-color: var(--mint8);}
46
+
47
+ .nu-u-bg-teal1 {background-color: var(--teal1);}
48
+ .nu-u-bg-teal2 {background-color: var(--teal2);}
49
+ .nu-u-bg-teal3 {background-color: var(--teal3);}
50
+ .nu-u-bg-teal4 {background-color: var(--teal4);}
51
+ .nu-u-bg-teal5 {background-color: var(--teal5);}
52
+ .nu-u-bg-teal6 {background-color: var(--teal6);}
53
+ .nu-u-bg-teal7 {background-color: var(--teal7);}
54
+ .nu-u-bg-teal8 {background-color: var(--teal8);}
55
+
56
+ .nu-u-bg-cyan1 {background-color: var(--cyan1);}
57
+ .nu-u-bg-cyan2 {background-color: var(--cyan2);}
58
+ .nu-u-bg-cyan3 {background-color: var(--cyan3);}
59
+ .nu-u-bg-cyan4 {background-color: var(--cyan4);}
60
+ .nu-u-bg-cyan5 {background-color: var(--cyan5);}
61
+ .nu-u-bg-cyan6 {background-color: var(--cyan6);}
62
+ .nu-u-bg-cyan7 {background-color: var(--cyan7);}
63
+ .nu-u-bg-cyan8 {background-color: var(--cyan8);}
64
+
65
+ .nu-u-bg-blue1 {background-color: var(--blue1);}
66
+ .nu-u-bg-blue2 {background-color: var(--blue2);}
67
+ .nu-u-bg-blue3 {background-color: var(--blue3);}
68
+ .nu-u-bg-blue4 {background-color: var(--blue4);}
69
+ .nu-u-bg-blue5 {background-color: var(--blue5);}
70
+ .nu-u-bg-blue6 {background-color: var(--blue6);}
71
+ .nu-u-bg-blue7 {background-color: var(--blue7);}
72
+ .nu-u-bg-blue8 {background-color: var(--blue8);}
73
+
74
+ .nu-u-bg-indigo1 {background-color: var(--indigo1);}
75
+ .nu-u-bg-indigo2 {background-color: var(--indigo2);}
76
+ .nu-u-bg-indigo3 {background-color: var(--indigo3);}
77
+ .nu-u-bg-indigo4 {background-color: var(--indigo4);}
78
+ .nu-u-bg-indigo5 {background-color: var(--indigo5);}
79
+ .nu-u-bg-indigo6 {background-color: var(--indigo6);}
80
+ .nu-u-bg-indigo7 {background-color: var(--indigo7);}
81
+ .nu-u-bg-indigo8 {background-color: var(--indigo8);}
82
+
83
+ .nu-u-bg-purple1 {background-color: var(--purple1);}
84
+ .nu-u-bg-purple2 {background-color: var(--purple2);}
85
+ .nu-u-bg-purple3 {background-color: var(--purple3);}
86
+ .nu-u-bg-purple4 {background-color: var(--purple4);}
87
+ .nu-u-bg-purple5 {background-color: var(--purple5);}
88
+ .nu-u-bg-purple6 {background-color: var(--purple6);}
89
+ .nu-u-bg-purple7 {background-color: var(--purple7);}
90
+ .nu-u-bg-purple8 {background-color: var(--purple8);}
91
+
92
+ .nu-u-bg-pink1 {background-color: var(--pink1);}
93
+ .nu-u-bg-pink2 {background-color: var(--pink2);}
94
+ .nu-u-bg-pink3 {background-color: var(--pink3);}
95
+ .nu-u-bg-pink4 {background-color: var(--pink4);}
96
+ .nu-u-bg-pink5 {background-color: var(--pink5);}
97
+ .nu-u-bg-pink6 {background-color: var(--pink6);}
98
+ .nu-u-bg-pink7 {background-color: var(--pink7);}
99
+ .nu-u-bg-pink8 {background-color: var(--pink8);}
100
+
101
+ .nu-u-bg-brown1 {background-color: var(--brown1);}
102
+ .nu-u-bg-brown2 {background-color: var(--brown2);}
103
+ .nu-u-bg-brown3 {background-color: var(--brown3);}
104
+ .nu-u-bg-brown4 {background-color: var(--brown4);}
105
+ .nu-u-bg-brown5 {background-color: var(--brown5);}
106
+ .nu-u-bg-brown6 {background-color: var(--brown6);}
107
+ .nu-u-bg-brown7 {background-color: var(--brown7);}
108
+ .nu-u-bg-brown8 {background-color: var(--brown8);}
109
+
110
+ .nu-u-bg-grey1 {background-color: var(--grey1);}
111
+ .nu-u-bg-grey2 {background-color: var(--grey2);}
112
+ .nu-u-bg-grey3 {background-color: var(--grey3);}
113
+ .nu-u-bg-grey4 {background-color: var(--grey4);}
114
+ .nu-u-bg-grey5 {background-color: var(--grey5);}
115
+ .nu-u-bg-grey6 {background-color: var(--grey6);}
116
+ .nu-u-bg-grey7 {background-color: var(--grey7);}
117
+ .nu-u-bg-grey8 {background-color: var(--grey8);}
118
+ .nu-u-bg-grey9 {background-color: var(--grey9);}
119
+ .nu-u-bg-grey10 {background-color: var(--grey10);}
120
+
121
+ .nu-u-text-red1 {color: var(--red1);}
122
+ .nu-u-text-red2 {color: var(--red2);}
123
+ .nu-u-text-red3 {color: var(--red3);}
124
+ .nu-u-text-red4 {color: var(--red4);}
125
+ .nu-u-text-red5 {color: var(--red5);}
126
+ .nu-u-text-red6 {color: var(--red6);}
127
+ .nu-u-text-red7 {color: var(--red7);}
128
+ .nu-u-text-red8 {color: var(--red8);}
129
+
130
+ .nu-u-text-orange1 {color: var(--orange1);}
131
+ .nu-u-text-orange2 {color: var(--orange2);}
132
+ .nu-u-text-orange3 {color: var(--orange3);}
133
+ .nu-u-text-orange4 {color: var(--orange4);}
134
+ .nu-u-text-orange5 {color: var(--orange5);}
135
+ .nu-u-text-orange6 {color: var(--orange6);}
136
+ .nu-u-text-orange7 {color: var(--orange7);}
137
+ .nu-u-text-orange8 {color: var(--orange8);}
138
+
139
+ .nu-u-text-yellow1 {color: var(--yellow1);}
140
+ .nu-u-text-yellow2 {color: var(--yellow2);}
141
+ .nu-u-text-yellow3 {color: var(--yellow3);}
142
+ .nu-u-text-yellow4 {color: var(--yellow4);}
143
+ .nu-u-text-yellow5 {color: var(--yellow5);}
144
+ .nu-u-text-yellow6 {color: var(--yellow6);}
145
+ .nu-u-text-yellow7 {color: var(--yellow7);}
146
+ .nu-u-text-yellow8 {color: var(--yellow8);}
147
+
148
+ .nu-u-text-green1 {color: var(--green1);}
149
+ .nu-u-text-green2 {color: var(--green2);}
150
+ .nu-u-text-green3 {color: var(--green3);}
151
+ .nu-u-text-green4 {color: var(--green4);}
152
+ .nu-u-text-green5 {color: var(--green5);}
153
+ .nu-u-text-green6 {color: var(--green6);}
154
+ .nu-u-text-green7 {color: var(--green7);}
155
+ .nu-u-text-green8 {color: var(--green8);}
156
+
157
+ .nu-u-text-mint1 {color: var(--mint1);}
158
+ .nu-u-text-mint2 {color: var(--mint2);}
159
+ .nu-u-text-mint3 {color: var(--mint3);}
160
+ .nu-u-text-mint4 {color: var(--mint4);}
161
+ .nu-u-text-mint5 {color: var(--mint5);}
162
+ .nu-u-text-mint6 {color: var(--mint6);}
163
+ .nu-u-text-mint7 {color: var(--mint7);}
164
+ .nu-u-text-mint8 {color: var(--mint8);}
165
+
166
+ .nu-u-text-teal1 {color: var(--teal1);}
167
+ .nu-u-text-teal2 {color: var(--teal2);}
168
+ .nu-u-text-teal3 {color: var(--teal3);}
169
+ .nu-u-text-teal4 {color: var(--teal4);}
170
+ .nu-u-text-teal5 {color: var(--teal5);}
171
+ .nu-u-text-teal6 {color: var(--teal6);}
172
+ .nu-u-text-teal7 {color: var(--teal7);}
173
+ .nu-u-text-teal8 {color: var(--teal8);}
174
+
175
+ .nu-u-text-cyan1 {color: var(--cyan1);}
176
+ .nu-u-text-cyan2 {color: var(--cyan2);}
177
+ .nu-u-text-cyan3 {color: var(--cyan3);}
178
+ .nu-u-text-cyan4 {color: var(--cyan4);}
179
+ .nu-u-text-cyan5 {color: var(--cyan5);}
180
+ .nu-u-text-cyan6 {color: var(--cyan6);}
181
+ .nu-u-text-cyan7 {color: var(--cyan7);}
182
+ .nu-u-text-cyan8 {color: var(--cyan8);}
183
+
184
+ .nu-u-text-blue1 {color: var(--blue1);}
185
+ .nu-u-text-blue2 {color: var(--blue2);}
186
+ .nu-u-text-blue3 {color: var(--blue3);}
187
+ .nu-u-text-blue4 {color: var(--blue4);}
188
+ .nu-u-text-blue5 {color: var(--blue5);}
189
+ .nu-u-text-blue6 {color: var(--blue6);}
190
+ .nu-u-text-blue7 {color: var(--blue7);}
191
+ .nu-u-text-blue8 {color: var(--blue8);}
192
+
193
+ .nu-u-text-indigo1 {color: var(--indigo1);}
194
+ .nu-u-text-indigo2 {color: var(--indigo2);}
195
+ .nu-u-text-indigo3 {color: var(--indigo3);}
196
+ .nu-u-text-indigo4 {color: var(--indigo4);}
197
+ .nu-u-text-indigo5 {color: var(--indigo5);}
198
+ .nu-u-text-indigo6 {color: var(--indigo6);}
199
+ .nu-u-text-indigo7 {color: var(--indigo7);}
200
+ .nu-u-text-indigo8 {color: var(--indigo8);}
201
+
202
+ .nu-u-text-purple1 {color: var(--purple1);}
203
+ .nu-u-text-purple2 {color: var(--purple2);}
204
+ .nu-u-text-purple3 {color: var(--purple3);}
205
+ .nu-u-text-purple4 {color: var(--purple4);}
206
+ .nu-u-text-purple5 {color: var(--purple5);}
207
+ .nu-u-text-purple6 {color: var(--purple6);}
208
+ .nu-u-text-purple7 {color: var(--purple7);}
209
+ .nu-u-text-purple8 {color: var(--purple8);}
210
+
211
+ .nu-u-text-pink1 {color: var(--pink1);}
212
+ .nu-u-text-pink2 {color: var(--pink2);}
213
+ .nu-u-text-pink3 {color: var(--pink3);}
214
+ .nu-u-text-pink4 {color: var(--pink4);}
215
+ .nu-u-text-pink5 {color: var(--pink5);}
216
+ .nu-u-text-pink6 {color: var(--pink6);}
217
+ .nu-u-text-pink7 {color: var(--pink7);}
218
+ .nu-u-text-pink8 {color: var(--pink8);}
219
+
220
+ .nu-u-text-brown1 {color: var(--brown1);}
221
+ .nu-u-text-brown2 {color: var(--brown2);}
222
+ .nu-u-text-brown3 {color: var(--brown3);}
223
+ .nu-u-text-brown4 {color: var(--brown4);}
224
+ .nu-u-text-brown5 {color: var(--brown5);}
225
+ .nu-u-text-brown6 {color: var(--brown6);}
226
+ .nu-u-text-brown7 {color: var(--brown7);}
227
+ .nu-u-text-brown8 {color: var(--brown8);}
228
+
229
+ .nu-u-text-grey1 {color: var(--grey1);}
230
+ .nu-u-text-grey2 {color: var(--grey2);}
231
+ .nu-u-text-grey3 {color: var(--grey3);}
232
+ .nu-u-text-grey4 {color: var(--grey4);}
233
+ .nu-u-text-grey5 {color: var(--grey5);}
234
+ .nu-u-text-grey6 {color: var(--grey6);}
235
+ .nu-u-text-grey7 {color: var(--grey7);}
236
+ .nu-u-text-grey8 {color: var(--grey8);}
237
+ .nu-u-text-grey9 {color: var(--grey9);}
238
+ .nu-u-text-grey10 {color: var(--grey10);}
239
+
240
+ .nu-u-bg {background-color: var(--white);}
241
+ .nu-u-bg-secondary {background-color: var(--grey1);}
242
+ .nu-u-bg-hover {background-color: var(--grey1);}
243
+ .nu-u-bg-selected {background-color: var(--grey2);}
244
+ .nu-u-bg-selected-hover {background-color: var(--grey3);}
245
+ .nu-u-bg-red {background-color: var(--red1);}
246
+ .nu-u-bg-orange {background-color: var(--orange1);}
247
+ .nu-u-bg-yellow {background-color: var(--yellow1);}
248
+ .nu-u-bg-green {background-color: var(--green);}
249
+ .nu-u-bg-mint {background-color: var(--mint);}
250
+ .nu-u-bg-teal {background-color: var(--teal1);}
251
+ .nu-u-bg-cyan {background-color: var(--cyan1);}
252
+ .nu-u-bg-blue {background-color: var(--blue1);}
253
+ .nu-u-bg-indigo {background-color: var(--indigo1);}
254
+ .nu-u-bg-purple {background-color: var(--purple1);}
255
+ .nu-u-bg-pink {background-color: var(--pink);}
256
+ .nu-u-bg-brown {background-color: var(--brown);}
257
+
258
+ .nu-u-bg-black {background-color: var(--black);}
259
+ .nu-u-bg-white {background-color: var(--white);}
260
+
261
+ /* Border */
262
+ .nu-u-b--muted {border-color: var(--grey-2);}
263
+ .nu-u-b {border-color: var(--grey4);}
264
+ .nu-u-b--strong {border-color: var(--grey6);}
265
+
266
+ /* Text */
267
+ .nu-u-text--primary {color: var(--grey10);}
268
+ .nu-u-text--primary-alt {color: var(--grey8);}
269
+ .nu-u-text--secondary {color: var(--grey7);}
270
+ .nu-u-text--placeholder::placeholder,
271
+ .nu-u-text--placeholder::webkit-input-placeholder,
272
+ .nu-u-text--placeholder:ms-input-placeholder {color: var(--grey4);}
273
+ .nu-u-text--on-color {color: var(--white);}
274
+ .nu-u-text--error {color: var(--red6);}
275
+ .nu-u-text--success {color: var(--green6);}
276
+
277
+ .nu-u-text-black {color: var(--black);}
278
+ .nu-u-text-white {color: var(--white);}
279
+
280
+ /* Icons */
281
+ .nu-u-icon--primary {color: var(--grey9);}
282
+ .nu-u-icon--secondary {color: var(--grey7);}
283
+ .nu-u-icon--disabled {color: var(--grey4);}
284
+ .nu-u-icon--on-color {color: var(--white);}
285
+
286
+ /* Links */
287
+ .nu-u-link {
288
+ color: var(--blue5);
289
+ &:hover {
290
+ color: var(--blue6);
291
+ }
292
+ }
293
+ .nu-u-link--subtle {
294
+ color: var(--grey8);
295
+ &:hover {
296
+ color: var(--indigo5);
297
+ }
298
+ }
299
+
300
+ /* Support */
301
+ .nu-u-support--error {color: var(--red5);}
302
+ .nu-u-support--warning {color: var(--yellow5);}
303
+ .nu-u-support--success {color: var(--green5);}
304
+ .nu-u-support--info {color: var(--blue5);}
package/src/index.scss ADDED
@@ -0,0 +1,4 @@
1
+ @import 'theme-light';
2
+ @import 'theme-light--warm';
3
+ @import 'theme-light--cold';
4
+ @import 'utilities';
package/build-tokens.js DELETED
@@ -1,34 +0,0 @@
1
- const StyleDictionary = require("style-dictionary");
2
- const args = require("minimist")(process.argv.slice(2));
3
- const theme = args.theme ? args.theme : "primary";
4
-
5
- console.log(`Compiling tokens with the ${theme.toUpperCase()} theme ...`);
6
-
7
- const getStyleDictionaryConfig = (theme) => {
8
- return {
9
- log: "warn",
10
- source: [
11
- "tokens/global/**/*.+(js|json)",
12
- `tokens/themes/${theme}/**/*.+(js|json)`,
13
- ],
14
- platforms: {
15
- css: {
16
- transformGroup: "css",
17
- buildPath: "dist/themes/",
18
- files: [
19
- {
20
- destination: `${theme}.css`,
21
- format: "css/variables",
22
- "options": {"outputReferences": true}
23
- },
24
- ],
25
- },
26
- },
27
- };
28
- };
29
-
30
- const StyleDictionaryExtended = StyleDictionary.extend(
31
- getStyleDictionaryConfig(theme)
32
- );
33
-
34
- StyleDictionaryExtended.buildAllPlatforms();
package/dist/themes/dark-cold.css DELETED
@@ -1,184 +0,0 @@
1
- /**
2
- * Do not edit directly
3
- * Generated on Mon, 26 Dec 2022 09:03:08 GMT
4
- */
5
-
6
- :root {
7
- --white: hsl(0, 0%, 100%);
8
- --black: hsl(0, 0%, 0%);
9
- --cold10: hsl(206, 16%, 8%);
10
- --cold9: hsl(200, 12%, 15%);
11
- --cold8: hsl(207, 10%, 23%);
12
- --cold7: hsl(207, 7%, 32%);
13
- --cold6: hsl(210, 6%, 44%);
14
- --cold5: hsl(216, 7%, 56%);
15
- --cold4: hsl(210, 8%, 66%);
16
- --cold3: hsl(210, 11%, 78%);
17
- --cold2: hsl(213, 15%, 88%);
18
- --cold1: hsl(220, 30%, 96%);
19
- --warm10: hsl(0, 7%, 8%);
20
- --warm9: hsl(0, 3%, 15%);
21
- --warm8: hsl(0, 3%, 23%);
22
- --warm7: hsl(0, 3%, 33%);
23
- --warm6: hsl(0, 2%, 44%);
24
- --warm5: hsl(0, 2%, 55%);
25
- --warm4: hsl(0, 3%, 67%);
26
- --warm3: hsl(10, 5%, 78%);
27
- --warm2: hsl(10, 10%, 89%);
28
- --warm1: hsl(12, 24%, 96%);
29
- --grey10: hsl(0, 0%, 9%);
30
- --grey9: hsl(0, 0%, 15%);
31
- --grey8: hsl(0, 0%, 22%);
32
- --grey7: hsl(0, 0%, 32%);
33
- --grey6: hsl(0, 0%, 44%);
34
- --grey5: hsl(0, 0%, 55%);
35
- --grey4: hsl(0, 0%, 66%);
36
- --grey3: hsl(0, 0%, 78%);
37
- --grey2: hsl(0, 0%, 88%);
38
- --grey1: hsl(0, 0%, 96%);
39
- --brown8: hsl(35, 27%, 14%);
40
- --brown7: hsl(34, 26%, 26%);
41
- --brown6: hsl(33, 26%, 38%);
42
- --brown5: hsl(34, 27%, 50%);
43
- --brown4: hsl(34, 26%, 54%);
44
- --brown3: hsl(34, 26%, 74%);
45
- --brown2: hsl(35, 27%, 86%);
46
- --brown1: hsl(33, 29%, 94%);
47
- --pink8: hsl(349, 69%, 16%);
48
- --pink7: hsl(349, 71%, 31%);
49
- --pink6: hsl(348, 70%, 45%);
50
- --pink5: hsl(349, 100%, 59%);
51
- --pink4: hsl(349, 100%, 62%);
52
- --pink3: hsl(349, 100%, 78%);
53
- --pink2: hsl(349, 100%, 89%);
54
- --pink1: hsl(348, 100%, 95%);
55
- --purple8: hsl(280, 46%, 17%);
56
- --purple7: hsl(279, 46%, 31%);
57
- --purple6: hsl(280, 46%, 45%);
58
- --purple5: hsl(280, 68%, 60%);
59
- --purple4: hsl(280, 68%, 63%);
60
- --purple3: hsl(279, 68%, 79%);
61
- --purple2: hsl(280, 68%, 89%);
62
- --purple1: hsl(279, 68%, 95%);
63
- --indigo8: hsl(242, 43%, 16%);
64
- --indigo7: hsl(241, 43%, 31%);
65
- --indigo6: hsl(241, 43%, 45%);
66
- --indigo5: hsl(241, 61%, 59%);
67
- --indigo4: hsl(241, 61%, 62%);
68
- --indigo3: hsl(241, 61%, 79%);
69
- --indigo2: hsl(242, 62%, 89%);
70
- --indigo1: hsl(244, 62%, 95%);
71
- --blue8: hsl(211, 100%, 14%);
72
- --blue7: hsl(211, 100%, 26%);
73
- --blue6: hsl(211, 100%, 38%);
74
- --blue5: hsl(211, 100%, 50%);
75
- --blue4: hsl(211, 100%, 54%);
76
- --blue3: hsl(211, 100%, 74%);
77
- --blue2: hsl(211, 100%, 86%);
78
- --blue1: hsl(211, 100%, 94%);
79
- --cyan8: hsl(199, 64%, 15%);
80
- --cyan7: hsl(199, 64%, 29%);
81
- --cyan6: hsl(199, 64%, 42%);
82
- --cyan5: hsl(199, 78%, 55%);
83
- --cyan4: hsl(199, 78%, 58%);
84
- --cyan3: hsl(199, 78%, 76%);
85
- --cyan2: hsl(199, 78%, 87%);
86
- --cyan1: hsl(199, 79%, 95%);
87
- --teal8: hsl(189, 62%, 13%);
88
- --teal7: hsl(189, 61%, 25%);
89
- --teal6: hsl(189, 61%, 37%);
90
- --teal5: hsl(189, 61%, 48%);
91
- --teal4: hsl(189, 57%, 52%);
92
- --teal3: hsl(189, 58%, 73%);
93
- --teal2: hsl(189, 57%, 85%);
94
- --teal1: hsl(190, 56%, 94%);
95
- --mint8: hsl(178, 100%, 11%);
96
- --mint7: hsl(177, 100%, 20%);
97
- --mint6: hsl(178, 100%, 30%);
98
- --mint5: hsl(177, 100%, 39%);
99
- --mint4: hsl(177, 82%, 44%);
100
- --mint3: hsl(177, 64%, 68%);
101
- --mint2: hsl(178, 63%, 83%);
102
- --mint1: hsl(178, 63%, 93%);
103
- --green8: hsl(136, 59%, 14%);
104
- --green7: hsl(135, 59%, 26%);
105
- --green6: hsl(135, 58%, 37%);
106
- --green5: hsl(135, 59%, 49%);
107
- --green4: hsl(135, 56%, 53%);
108
- --green3: hsl(135, 57%, 74%);
109
- --green2: hsl(136, 56%, 86%);
110
- --green1: hsl(137, 56%, 94%);
111
- --yellow8: hsl(48, 100%, 14%);
112
- --yellow7: hsl(48, 100%, 26%);
113
- --yellow6: hsl(48, 100%, 38%);
114
- --yellow5: hsl(48, 100%, 50%);
115
- --yellow4: hsl(48, 100%, 54%);
116
- --yellow3: hsl(48, 100%, 74%);
117
- --yellow2: hsl(48, 100%, 86%);
118
- --yellow1: hsl(48, 100%, 94%);
119
- --orange8: hsl(35, 100%, 14%);
120
- --orange7: hsl(35, 100%, 26%);
121
- --orange6: hsl(35, 100%, 38%);
122
- --orange5: hsl(35, 100%, 50%);
123
- --orange4: hsl(35, 100%, 54%);
124
- --orange3: hsl(35, 100%, 74%);
125
- --orange2: hsl(35, 100%, 86%);
126
- --orange1: hsl(35, 100%, 94%);
127
- --red8: hsl(3, 69%, 16%);
128
- --red7: hsl(3, 68%, 31%);
129
- --red6: hsl(3, 68%, 45%);
130
- --red5: hsl(3, 100%, 59%);
131
- --red4: hsl(3, 100%, 63%);
132
- --red3: hsl(3, 100%, 79%);
133
- --red2: hsl(3, 100%, 89%);
134
- --red1: hsl(2, 100%, 95%);
135
- --text-success: var(--green4);
136
- --text-error: var(--red4);
137
- --text-on-color: var(--white);
138
- --text-placeholder: var(--cold6);
139
- --text-secondary: var(--cold5);
140
- --text-primary-alt: var(--cold3);
141
- --text-primary: var(--cold1);
142
- --support-info: var(--blue4);
143
- --support-success: var(--green4);
144
- --support-warning: var(--yellow4);
145
- --support-error: var(--red4);
146
- --link-visited: var(--indigo4);
147
- --link-subtle: var(--cold1);
148
- --link-hover: var(--blue3);
149
- --link: var(--blue4);
150
- --icon-on-color: var(--white);
151
- --icon-disabled: var(--cold8);
152
- --icon-secondary: var(--cold4);
153
- --icon-primary: var(--cold2);
154
- --button-disabled: var(--cold9);
155
- --button-danger-active: var(--red3);
156
- --button-danger-hover: var(--red3);
157
- --button-danger: var(--red4);
158
- --button-secondary-active: var(--cold3);
159
- --button-secondary-hover: var(--cold2);
160
- --button-secondary: var(--cold1);
161
- --button-primary-active: var(--blue3);
162
- --button-primary-hover: var(--blue3);
163
- --button-primary: var(--blue4);
164
- --border-strong: var(--cold5);
165
- --border: var(--cold7);
166
- --border-muted: var(--cold9);
167
- --background-brown: var(--brown8);
168
- --background-pink: var(--pink8);
169
- --background-purple: var(--purple8);
170
- --background-indigo: var(--indigo8);
171
- --background-blue: var(--blue8);
172
- --background-cyan: var(--cyan8);
173
- --background-teal: var(--teal8);
174
- --background-mint: var(--mint8);
175
- --background-green: var(--green8);
176
- --background-yellow: var(--yellow8);
177
- --background-orange: var(--orange8);
178
- --background-red: var(--red8);
179
- --background-selected-hover: var(--cold7);
180
- --background-selected: var(--cold8);
181
- --background-hover: var(--cold9);
182
- --background-secondary: var(--cold9);
183
- --background: var(--cold10);
184
- }