@digigov/theme-grnet 2.0.0-0138f8bd

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.
@@ -0,0 +1,687 @@
1
+ :root {
2
+ /* Color palette */
3
+ --color-gray-100: #fefefe;
4
+ --color-gray-100-rgb: 254, 254, 254;
5
+ --color-gray-200: #ebebec;
6
+ --color-gray-200-rgb: 235, 235, 236;
7
+ --color-gray-300: #cbcdce;
8
+ --color-gray-300-rgb: 203, 205, 206;
9
+ --color-gray-400: #b1b2b5;
10
+ --color-gray-400-rgb: 177, 178, 181;
11
+ --color-gray-500: #96999b;
12
+ --color-gray-500-rgb: 150, 153, 155;
13
+ --color-gray-600: #7f8184;
14
+ --color-gray-600-rgb: 127, 129, 132;
15
+ --color-gray-700: #6b6b6e;
16
+ --color-gray-700-rgb: 107, 107, 110;
17
+ --color-gray-800: #515153;
18
+ --color-gray-800-rgb: 81, 81, 83;
19
+ --color-gray-900: #383536;
20
+ --color-gray-900-rgb: 56, 53, 54;
21
+ --color-gray-1000: #2b2729;
22
+ --color-gray-1000-rgb: 43, 39, 41;
23
+ --color-gray-1100: #191516;
24
+ --color-gray-1100-rgb: 25, 21, 22;
25
+ --color-gray-1200: #000;
26
+ --color-gray-1200-rgb: 0, 0, 0;
27
+ --color-red-100: #ff837b;
28
+ --color-red-100-rgb: 255, 131, 123;
29
+ --color-red-200: #fe5955;
30
+ --color-red-200-rgb: 254, 89, 85;
31
+ --color-red-300: #df3035;
32
+ --color-red-300-rgb: 223, 48, 53;
33
+ --color-red-400: #c4292d;
34
+ --color-red-400-rgb: 196, 41, 45;
35
+ --color-red-500: #a82728;
36
+ --color-red-500-rgb: 168, 39, 40;
37
+ --color-red-600: #762422;
38
+ --color-red-600-rgb: 118, 36, 34;
39
+ --color-red-700: #60201e;
40
+ --color-red-700-rgb: 96, 32, 30;
41
+ --color-orange-100: #f29019;
42
+ --color-orange-100-rgb: 242, 144, 25;
43
+ --color-orange-200: #d57d11;
44
+ --color-orange-200-rgb: 213, 125, 17;
45
+ --color-orange-300: #aa6617;
46
+ --color-orange-300-rgb: 170, 102, 23;
47
+ --color-orange-400: #935a1a;
48
+ --color-orange-400-rgb: 147, 90, 26;
49
+ --color-orange-500: #7d4e1b;
50
+ --color-orange-500-rgb: 125, 78, 27;
51
+ --color-orange-600: #593a1a;
52
+ --color-orange-600-rgb: 89, 58, 26;
53
+ --color-orange-700: #483118;
54
+ --color-orange-700-rgb: 72, 49, 24;
55
+ --color-green-100: #6abb3b;
56
+ --color-green-100-rgb: 106, 187, 59;
57
+ --color-green-200: #53a51c;
58
+ --color-green-200-rgb: 83, 165, 28;
59
+ --color-green-300: #47841e;
60
+ --color-green-300-rgb: 71, 132, 30;
61
+ --color-green-400: #40731f;
62
+ --color-green-400-rgb: 64, 115, 31;
63
+ --color-green-500: #3a631f;
64
+ --color-green-500-rgb: 58, 99, 31;
65
+ --color-green-600: #2d471d;
66
+ --color-green-600-rgb: 45, 71, 29;
67
+ --color-green-700: #273b1a;
68
+ --color-green-700-rgb: 39, 59, 26;
69
+ --color-blue-100: #88aad7;
70
+ --color-blue-100-rgb: 136, 170, 215;
71
+ --color-blue-200: #6b94ce;
72
+ --color-blue-200-rgb: 107, 148, 206;
73
+ --color-blue-300: #4b77b7;
74
+ --color-blue-300-rgb: 75, 119, 183;
75
+ --color-blue-400: #3c67a8;
76
+ --color-blue-400-rgb: 60, 103, 168;
77
+ --color-blue-500: #305898;
78
+ --color-blue-500-rgb: 48, 88, 152;
79
+ --color-blue-600: #1e3f79;
80
+ --color-blue-600-rgb: 30, 63, 121;
81
+ --color-blue-700: #173469;
82
+ --color-blue-700-rgb: 23, 52, 105;
83
+ --color-purple-100: #b69cde;
84
+ --color-purple-100-rgb: 182, 156, 222;
85
+ --color-purple-200: #a680df;
86
+ --color-purple-200-rgb: 166, 128, 223;
87
+ --color-purple-300: #8c58e3;
88
+ --color-purple-300-rgb: 140, 88, 227;
89
+ --color-purple-400: #6b58b8;
90
+ --color-purple-400-rgb: 107, 88, 184;
91
+ --color-purple-500: #5b4e9a;
92
+ --color-purple-500-rgb: 91, 78, 154;
93
+ --color-purple-600: #413b68;
94
+ --color-purple-600-rgb: 65, 59, 104;
95
+ --color-purple-700: #353252;
96
+ --color-purple-700-rgb: 53, 50, 82;
97
+ --color-yellow-100: #f7d41d;
98
+ --color-yellow-100-rgb: 247, 212, 29;
99
+
100
+ /* Brand colors */
101
+ --color-primary-100: #ffb85b;
102
+ --color-primary-100-rgb: 255, 184, 91;
103
+ --color-primary-200: #f7941d;
104
+ --color-primary-200-rgb: 247, 148, 29;
105
+ --color-primary-300: #de8311;
106
+ --color-primary-300-rgb: 222, 131, 17;
107
+ --color-primary: #f7941d;
108
+ --color-primary-rgb: 247, 148, 29;
109
+ --color-secondary-100: #85abdf;
110
+ --color-secondary-100-rgb: 133, 171, 223;
111
+ --color-secondary-200: #6993cd;
112
+ --color-secondary-200-rgb: 105, 147, 205;
113
+ --color-secondary-300: #5b82b8;
114
+ --color-secondary-300-rgb: 91, 130, 184;
115
+ --color-secondary: #6993cd;
116
+ --color-secondary-rgb: 105, 147, 205;
117
+ --color-tertiary-100: #263d69;
118
+ --color-tertiary-100-rgb: 38, 61, 105;
119
+ --color-tertiary-200: #102958;
120
+ --color-tertiary-200-rgb: 16, 41, 88;
121
+ --color-tertiary-300: #02153f;
122
+ --color-tertiary-300-rgb: 2, 21, 63;
123
+ --color-tertiary: #102958;
124
+ --color-tertiary-rgb: 16, 41, 88;
125
+
126
+ /* UI colors */
127
+ --color-base-100: var(--color-gray-100);
128
+ --color-base-100-rgb: var(--color-gray-100-rgb);
129
+ --color-base-200: var(--color-gray-200);
130
+ --color-base-200-rgb: var(--color-gray-200-rgb);
131
+ --color-base-300: var(--color-gray-300);
132
+ --color-base-300-rgb: var(--color-gray-300-rgb);
133
+ --color-base-400: var(--color-gray-400);
134
+ --color-base-400-rgb: var(--color-gray-400-rgb);
135
+ --color-base-500: var(--color-gray-500);
136
+ --color-base-500-rgb: var(--color-gray-500-rgb);
137
+ --color-base-600: var(--color-gray-600);
138
+ --color-base-600-rgb: var(--color-gray-600-rgb);
139
+ --color-base-700: var(--color-gray-700);
140
+ --color-base-700-rgb: var(--color-gray-700-rgb);
141
+ --color-base-800: var(--color-gray-800);
142
+ --color-base-800-rgb: var(--color-gray-800-rgb);
143
+ --color-base-900: var(--color-gray-900);
144
+ --color-base-900-rgb: var(--color-gray-900-rgb);
145
+ --color-base-1000: var(--color-gray-1000);
146
+ --color-base-1000-rgb: var(--color-gray-1000-rgb);
147
+ --color-base-1100: var(--color-gray-1100);
148
+ --color-base-1100-rgb: var(--color-gray-1100-rgb);
149
+ --color-base-content: var(--color-gray-1000);
150
+ --color-base-content-rgb: var(--color-gray-1000-rgb);
151
+ --color-base-content-secondary: var(--color-gray-700);
152
+ --color-base-content-secondary-rgb: var(--color-gray-700-rgb);
153
+ --color-base-content-invert: var(--color-gray-100);
154
+ --color-base-content-invert-rgb: var(--color-gray-100-rgb);
155
+ --color-white: var(--color-gray-100);
156
+ --color-white-rgb: var(--color-gray-100-rgb);
157
+ --color-black: var(--color-gray-1200);
158
+ --color-black-rgb: var(--color-gray-1200-rgb);
159
+ --color-accent: var(--color-gray-1000);
160
+ --color-accent-rgb: var(--color-gray-1000-rgb);
161
+ --color-accent-focus: var(--color-gray-900);
162
+ --color-accent-focus-rgb: var(--color-gray-900-rgb);
163
+ --color-accent-content: var(--color-gray-100);
164
+ --color-accent-content-rgb: var(--color-gray-100-rgb);
165
+ --color-focus: var(--color-yellow-100);
166
+ --color-focus-rgb: var(--color-yellow-100-rgb);
167
+ --color-error: var(--color-red-500);
168
+ --color-error-rgb: var(--color-red-500-rgb);
169
+ --color-error-hover: var(--color-red-600);
170
+ --color-error-hover-rgb: var(--color-red-600-rgb);
171
+ --color-success: var(--color-green-400);
172
+ --color-success-rgb: var(--color-green-400-rgb);
173
+ --color-success-hover: var(--color-green-500);
174
+ --color-success-hover-rgb: var(--color-green-500-rgb);
175
+ --color-link: var(--color-blue-500);
176
+ --color-link-rgb: var(--color-blue-500-rgb);
177
+ --color-link-hover: var(--color-blue-600);
178
+ --color-link-hover-rgb: var(--color-blue-600-rgb);
179
+ --color-link-active: var(--color-gray-1000);
180
+ --color-link-active-rgb: var(--color-gray-1000-rgb);
181
+ --color-link-visited: var(--color-purple-600);
182
+ --color-link-visited-rgb: var(--color-purple-600-rgb);
183
+ --color-warning: var(--color-orange-100);
184
+ --color-warning-rgb: var(--color-orange-100-rgb);
185
+ --color-info: var(--color-blue-400);
186
+ --color-info-rgb: var(--color-blue-400-rgb);
187
+ --color-info-hover: var(--color-blue-500);
188
+ --color-info-hover-rgb: var(--color-blue-500-rgb);
189
+ --color-footer-text: var(--color-gray-100);
190
+ --color-footer-text-rgb: var(--color-gray-100-rgb);
191
+ --color-footer-link: var(--color-base-200);
192
+ --color-footer-link-rgb: var(--color-base-200-rgb);
193
+ --color-footer-link-hover: var(--color-base-300);
194
+ --color-footer-link-hover-rgb: var(--color-base-300-rgb);
195
+ --color-header-text: var(--color-base-content);
196
+ --color-header-text-rgb: var(--color-base-content-rgb);
197
+ --color-header-text-hover: var(--color-base-content);
198
+ --color-header-text-hover-rgb: var(--color-base-content-rgb);
199
+ }
200
+
201
+ :root.dark,
202
+ .dark {
203
+ /* Color palette */
204
+ --color-gray-100: #171314;
205
+ --color-gray-100-rgb: 23, 19, 20;
206
+ --color-gray-200: #272324;
207
+ --color-gray-200-rgb: 39, 35, 36;
208
+ --color-gray-300: #3a3839;
209
+ --color-gray-300-rgb: 58, 56, 57;
210
+ --color-gray-400: #4b4a4c;
211
+ --color-gray-400-rgb: 75, 74, 76;
212
+ --color-gray-500: #5e5e61;
213
+ --color-gray-500-rgb: 94, 94, 97;
214
+ --color-gray-600: #717375;
215
+ --color-gray-600-rgb: 113, 115, 117;
216
+ --color-gray-700: #87898c;
217
+ --color-gray-700-rgb: 135, 137, 140;
218
+ --color-gray-800: #a7a9ac;
219
+ --color-gray-800-rgb: 167, 169, 172;
220
+ --color-gray-900: #cfd0d2;
221
+ --color-gray-900-rgb: 207, 208, 210;
222
+ --color-gray-1000: #e4e4e5;
223
+ --color-gray-1000-rgb: 228, 228, 229;
224
+ --color-gray-1100: #fbfbfb;
225
+ --color-gray-1100-rgb: 251, 251, 251;
226
+ --color-gray-1200: #fefffe;
227
+ --color-gray-1200-rgb: 254, 255, 254;
228
+ --color-red-100: #9b2627;
229
+ --color-red-100-rgb: 155, 38, 39;
230
+ --color-red-200: #bd282c;
231
+ --color-red-200-rgb: 189, 40, 44;
232
+ --color-red-300: #ea383b;
233
+ --color-red-300-rgb: 234, 56, 59;
234
+ --color-red-400: #fb504e;
235
+ --color-red-400-rgb: 251, 80, 78;
236
+ --color-red-500: #ff726b;
237
+ --color-red-500-rgb: 255, 114, 107;
238
+ --color-red-600: #ffa9a2;
239
+ --color-red-600-rgb: 255, 169, 162;
240
+ --color-red-700: #ffc1bb;
241
+ --color-red-700-rgb: 255, 193, 187;
242
+ --color-orange-100: #73491c;
243
+ --color-orange-100-rgb: 115, 73, 28;
244
+ --color-orange-200: #8c571b;
245
+ --color-orange-200-rgb: 140, 87, 27;
246
+ --color-orange-300: #b56c15;
247
+ --color-orange-300-rgb: 181, 108, 21;
248
+ --color-orange-400: #ce7912;
249
+ --color-orange-400-rgb: 206, 121, 18;
250
+ --color-orange-500: #e68813;
251
+ --color-orange-500-rgb: 230, 136, 19;
252
+ --color-orange-600: #ffaf4a;
253
+ --color-orange-600-rgb: 255, 175, 74;
254
+ --color-orange-700: #ffc679;
255
+ --color-orange-700-rgb: 255, 198, 121;
256
+ --color-green-100: #375b1f;
257
+ --color-green-100-rgb: 55, 91, 31;
258
+ --color-green-200: #3f6f1f;
259
+ --color-green-200-rgb: 63, 111, 31;
260
+ --color-green-300: #4a8d1d;
261
+ --color-green-300-rgb: 74, 141, 29;
262
+ --color-green-400: #519f1b;
263
+ --color-green-400-rgb: 81, 159, 27;
264
+ --color-green-500: #5fb22b;
265
+ --color-green-500-rgb: 95, 178, 43;
266
+ --color-green-600: #93cf73;
267
+ --color-green-600-rgb: 147, 207, 115;
268
+ --color-green-700: #b3dc9f;
269
+ --color-green-700-rgb: 179, 220, 159;
270
+ --color-blue-100: #2b5190;
271
+ --color-blue-100-rgb: 43, 81, 144;
272
+ --color-blue-200: #3963a4;
273
+ --color-blue-200-rgb: 57, 99, 164;
274
+ --color-blue-300: #527ebe;
275
+ --color-blue-300-rgb: 82, 126, 190;
276
+ --color-blue-400: #658fcb;
277
+ --color-blue-400-rgb: 101, 143, 203;
278
+ --color-blue-500: #7ba1d4;
279
+ --color-blue-500-rgb: 123, 161, 212;
280
+ --color-blue-600: #abc1e0;
281
+ --color-blue-600-rgb: 171, 193, 224;
282
+ --color-blue-700: #c3d2e6;
283
+ --color-blue-700-rgb: 195, 210, 230;
284
+ --color-purple-100: #53498b;
285
+ --color-purple-100-rgb: 83, 73, 139;
286
+ --color-purple-200: #6655b0;
287
+ --color-purple-200-rgb: 102, 85, 176;
288
+ --color-purple-300: #9661e2;
289
+ --color-purple-300-rgb: 150, 97, 226;
290
+ --color-purple-400: #a379e0;
291
+ --color-purple-400-rgb: 163, 121, 224;
292
+ --color-purple-500: #af90de;
293
+ --color-purple-500-rgb: 175, 144, 222;
294
+ --color-purple-600: #c8b9e2;
295
+ --color-purple-600-rgb: 200, 185, 226;
296
+ --color-purple-700: #d6cce7;
297
+ --color-purple-700-rgb: 214, 204, 231;
298
+ --color-yellow-100: #f7d41d;
299
+ --color-yellow-100-rgb: 247, 212, 29;
300
+
301
+ /* Brand colors */
302
+ /* Same colors as the light theme. */
303
+
304
+ /* UI colors */
305
+ --color-primary-100: #ffb85b;
306
+ --color-primary-100-rgb: 255, 184, 91;
307
+ --color-primary-200: #f7941d;
308
+ --color-primary-200-rgb: 247, 148, 29;
309
+ --color-primary-300: #de8311;
310
+ --color-primary-300-rgb: 222, 131, 17;
311
+ --color-primary: #f7941d;
312
+ --color-primary-rgb: 247, 148, 29;
313
+ --color-secondary-100: #85abdf;
314
+ --color-secondary-100-rgb: 133, 171, 223;
315
+ --color-secondary-200: #6993cd;
316
+ --color-secondary-200-rgb: 105, 147, 205;
317
+ --color-secondary-300: #5b82b8;
318
+ --color-secondary-300-rgb: 91, 130, 184;
319
+ --color-secondary: #6993cd;
320
+ --color-secondary-rgb: 105, 147, 205;
321
+ --color-tertiary-100: #263d69;
322
+ --color-tertiary-100-rgb: 38, 61, 105;
323
+ --color-tertiary-200: #102958;
324
+ --color-tertiary-200-rgb: 16, 41, 88;
325
+ --color-tertiary-300: #02153f;
326
+ --color-tertiary-300-rgb: 2, 21, 63;
327
+ --color-tertiary: #102958;
328
+ --color-tertiary-rgb: 16, 41, 88;
329
+ --color-base-100: var(--color-gray-100);
330
+ --color-base-100-rgb: var(--color-gray-100-rgb);
331
+ --color-base-200: var(--color-gray-200);
332
+ --color-base-200-rgb: var(--color-gray-200-rgb);
333
+ --color-base-300: var(--color-gray-300);
334
+ --color-base-300-rgb: var(--color-gray-300-rgb);
335
+ --color-base-400: var(--color-gray-400);
336
+ --color-base-400-rgb: var(--color-gray-400-rgb);
337
+ --color-base-500: var(--color-gray-500);
338
+ --color-base-500-rgb: var(--color-gray-500-rgb);
339
+ --color-base-600: var(--color-gray-600);
340
+ --color-base-600-rgb: var(--color-gray-600-rgb);
341
+ --color-base-700: var(--color-gray-700);
342
+ --color-base-700-rgb: var(--color-gray-700-rgb);
343
+ --color-base-800: var(--color-gray-800);
344
+ --color-base-800-rgb: var(--color-gray-800-rgb);
345
+ --color-base-900: var(--color-gray-900);
346
+ --color-base-900-rgb: var(--color-gray-900-rgb);
347
+ --color-base-1000: var(--color-gray-1000);
348
+ --color-base-1000-rgb: var(--color-gray-1000-rgb);
349
+ --color-base-1100: var(--color-gray-1100);
350
+ --color-base-1100-rgb: var(--color-gray-1100-rgb);
351
+ --color-base-content: var(--color-gray-1000);
352
+ --color-base-content-rgb: var(--color-gray-1000-rgb);
353
+ --color-base-content-secondary: var(--color-gray-700);
354
+ --color-base-content-secondary-rgb: var(--color-gray-700-rgb);
355
+ --color-base-content-invert: var(--color-gray-100);
356
+ --color-base-content-invert-rgb: var(--color-gray-100-rgb);
357
+ --color-accent: var(--color-gray-1000);
358
+ --color-accent-rgb: var(--color-gray-1000-rgb);
359
+ --color-accent-focus: var(--color-gray-900);
360
+ --color-accent-focus-rgb: var(--color-gray-900-rgb);
361
+ --color-accent-content: var(--color-gray-100);
362
+ --color-accent-content-rgb: var(--color-gray-100-rgb);
363
+ --color-focus: var(--color-yellow-100);
364
+ --color-focus-rgb: var(--color-yellow-100-rgb);
365
+ --color-error: var(--color-red-200);
366
+ --color-error-rgb: var(--color-red-200-rgb);
367
+ --color-error-hover: var(--color-red-300);
368
+ --color-error-hover-rgb: var(--color-red-300-rgb);
369
+ --color-success: var(--color-green-200);
370
+ --color-success-rgb: var(--color-green-200-rgb);
371
+ --color-success-hover: var(--color-green-300);
372
+ --color-success-hover-rgb: var(--color-green-300-rgb);
373
+ --color-link: var(--color-blue-400);
374
+ --color-link-rgb: var(--color-blue-400-rgb);
375
+ --color-link-hover: var(--color-blue-500);
376
+ --color-link-hover-rgb: var(--color-blue-500-rgb);
377
+ --color-link-active: var(--color-blue-100);
378
+ --color-link-active-rgb: var(--color-blue-100-rgb);
379
+ --color-link-visited: var(--color-purple-300);
380
+ --color-link-visited-rgb: var(--color-purple-300-rgb);
381
+ --color-warning: var(--color-orange-500);
382
+ --color-warning-rgb: var(--color-orange-500-rgb);
383
+ --color-info: var(--color-blue-300);
384
+ --color-info-rgb: var(--color-blue-300-rgb);
385
+ --color-info-hover: var(--color-blue-400);
386
+ --color-info-hover-rgb: var(--color-blue-400-rgb);
387
+ --color-white: var(--color-gray-1200);
388
+ --color-white-rgb: var(--color-gray-1200-rgb);
389
+ --color-black: var(--color-gray-100);
390
+ --color-black-rgb: var(--color-gray-100-rgb);
391
+ --color-footer-text: var(--color-gray-900);
392
+ --color-footer-text-rgb: var(--color-gray-900-rgb);
393
+ --text-sm-default: 0.875rem;
394
+ --text-base-default: 1rem;
395
+ --text-lg-default: 1.1875rem;
396
+ --text-xl-default: 1.25rem;
397
+ --text-2xl-default: 1.5rem;
398
+ --text-3xl-default: 1.875rem;
399
+ --text-4xl-default: 2.25rem;
400
+ --text-5xl-default: 3rem;
401
+ --text-sm-large: 1rem;
402
+ --text-base-large: 1.25rem;
403
+ --text-lg-large: 1.4rem;
404
+ --text-xl-large: 1.6rem;
405
+ --text-2xl-large: 1.875rem;
406
+ --text-3xl-large: 2.25rem;
407
+ --text-4xl-large: 2.5rem;
408
+ --text-5xl-large: 3rem;
409
+ --text-sm: var(--text-sm-default);
410
+ --text-base: var(--text-base-default);
411
+ --text-lg: var(--text-lg-default);
412
+ --text-xl: var(--text-xl-default);
413
+ --text-2xl: var(--text-2xl-default);
414
+ --text-3xl: var(--text-3xl-default);
415
+ --text-4xl: var(--text-4xl-default);
416
+ --text-5xl: var(--text-5xl-default);
417
+ --line-h-sm-default: 1.375;
418
+ --line-h-base-default: 1.375;
419
+ --line-h-lg-default: 1.375;
420
+ --line-h-xl-default: 1.25;
421
+ --line-h-2xl-default: 1.25;
422
+ --line-h-3xl-default: 1.25;
423
+ --line-h-4xl-default: 1.25;
424
+ --line-h-5xl-default: 1.25;
425
+ --line-h-sm-large: 2;
426
+ --line-h-base-large: 2;
427
+ --line-h-lg-large: 2;
428
+ --line-h-xl-large: 1.75;
429
+ --line-h-2xl-large: 1.75;
430
+ --line-h-3xl-large: 1.5;
431
+ --line-h-4xl-large: 1.5;
432
+ --line-h-5xl-large: 1.25;
433
+ --line-h-sm: var(--line-h-sm-default);
434
+ --line-h-base: var(--line-h-base-default);
435
+ --line-h-lg: var(--line-h-lg-default);
436
+ --line-h-xl: var(--line-h-xl-default);
437
+ --line-h-2xl: var(--line-h-2xl-default);
438
+ --line-h-3xl: var(--line-h-3xl-default);
439
+ --line-h-4xl: var(--line-h-4xl-default);
440
+ --line-h-5xl: var(--line-h-5xl-default);
441
+ --letter-spacing-normal-default: normal;
442
+ --letter-spacing-wide-default: 0.025rem;
443
+ --letter-spacing-wider-default: 0.05rem;
444
+ --letter-spacing-widest-default: 0.075rem;
445
+ --letter-spacing-normal-extra: 0.05rem;
446
+ --letter-spacing-wide-extra: 0.075rem;
447
+ --letter-spacing-wider-extra: 0.01rem;
448
+ --letter-spacing-widest-extra: 0.125rem;
449
+ --letter-spacing-normal: var(--letter-spacing-normal-default);
450
+ --letter-spacing-wide: var(--letter-spacing-wide-default);
451
+ --letter-spacing-wider: var(--letter-spacing-wider-default);
452
+ --letter-spacing-widest: var(--letter-spacing-widest-default);
453
+ --border-radius-md: 4px;
454
+ --border-radius-lg: 8px;
455
+ }
456
+
457
+ :root.darker,
458
+ .darker {
459
+ /* Color palette */
460
+ --color-gray-100: #020202;
461
+ --color-gray-100-rgb: 2, 2, 2;
462
+ --color-gray-200: #1c1819;
463
+ --color-gray-200-rgb: 28, 24, 25;
464
+ --color-gray-300: #333031;
465
+ --color-gray-300-rgb: 51, 48, 49;
466
+ --color-gray-400: #444244;
467
+ --color-gray-400-rgb: 68, 66, 68;
468
+ --color-gray-500: #565658;
469
+ --color-gray-500-rgb: 86, 86, 88;
470
+ --color-gray-600: #6a6a6d;
471
+ --color-gray-600-rgb: 106, 106, 109;
472
+ --color-gray-700: #7e8083;
473
+ --color-gray-700-rgb: 126, 128, 131;
474
+ --color-gray-800: #9d9fa2;
475
+ --color-gray-800-rgb: 157, 159, 162;
476
+ --color-gray-900: #c3c5c7;
477
+ --color-gray-900-rgb: 195, 197, 199;
478
+ --color-gray-1000: #d8d8da;
479
+ --color-gray-1000-rgb: 216, 216, 218;
480
+ --color-gray-1100: #ededee;
481
+ --color-gray-1100-rgb: 237, 237, 238;
482
+ --color-gray-1200: #fefffe;
483
+ --color-gray-1200-rgb: 254, 255, 254;
484
+ --color-red-100: #8b2525;
485
+ --color-red-100-rgb: 139, 37, 37;
486
+ --color-red-200: #ad2729;
487
+ --color-red-200-rgb: 173, 39, 41;
488
+ --color-red-300: #dd2f34;
489
+ --color-red-300-rgb: 221, 47, 52;
490
+ --color-red-400: #f24142;
491
+ --color-red-400-rgb: 242, 65, 66;
492
+ --color-red-500: #ff5e59;
493
+ --color-red-500-rgb: 255, 94, 89;
494
+ --color-red-600: #ff9990;
495
+ --color-red-600-rgb: 255, 153, 144;
496
+ --color-red-700: #ffb1aa;
497
+ --color-red-700-rgb: 255, 177, 170;
498
+ --color-orange-100: #67431b;
499
+ --color-orange-100-rgb: 103, 67, 27;
500
+ --color-orange-200: #81501b;
501
+ --color-orange-200-rgb: 129, 80, 27;
502
+ --color-orange-300: #a86518;
503
+ --color-orange-300-rgb: 168, 101, 24;
504
+ --color-orange-400: #c07214;
505
+ --color-orange-400-rgb: 192, 114, 20;
506
+ --color-orange-500: #d97f11;
507
+ --color-orange-500-rgb: 217, 127, 17;
508
+ --color-orange-600: #ff9e2c;
509
+ --color-orange-600-rgb: 255, 158, 44;
510
+ --color-orange-700: #ffb658;
511
+ --color-orange-700-rgb: 255, 182, 88;
512
+ --color-green-100: #33531e;
513
+ --color-green-100-rgb: 51, 83, 30;
514
+ --color-green-200: #3b661f;
515
+ --color-green-200-rgb: 59, 102, 31;
516
+ --color-green-300: #46831e;
517
+ --color-green-300-rgb: 70, 131, 30;
518
+ --color-green-400: #4d951c;
519
+ --color-green-400-rgb: 77, 149, 28;
520
+ --color-green-500: #55a81e;
521
+ --color-green-500-rgb: 85, 168, 30;
522
+ --color-green-600: #7fc758;
523
+ --color-green-600-rgb: 127, 199, 88;
524
+ --color-green-700: #9dd381;
525
+ --color-green-700-rgb: 157, 211, 129;
526
+ --color-blue-100: #254a86;
527
+ --color-blue-100-rgb: 37, 74, 134;
528
+ --color-blue-200: #325b9b;
529
+ --color-blue-200-rgb: 50, 91, 155;
530
+ --color-blue-300: #4976b6;
531
+ --color-blue-300-rgb: 73, 118, 182;
532
+ --color-blue-400: #5b86c4;
533
+ --color-blue-400-rgb: 91, 134, 196;
534
+ --color-blue-500: #6f97cf;
535
+ --color-blue-500-rgb: 111, 151, 207;
536
+ --color-blue-600: #9bb7dc;
537
+ --color-blue-600-rgb: 155, 183, 220;
538
+ --color-blue-700: #b2c6e2;
539
+ --color-blue-700-rgb: 178, 198, 226;
540
+ --color-purple-100: #4b437c;
541
+ --color-purple-100-rgb: 75, 67, 124;
542
+ --color-purple-200: #5c509e;
543
+ --color-purple-200-rgb: 92, 80, 158;
544
+ --color-purple-300: #8858e2;
545
+ --color-purple-300-rgb: 136, 88, 226;
546
+ --color-purple-400: #9c6ce1;
547
+ --color-purple-400-rgb: 156, 108, 225;
548
+ --color-purple-500: #a883df;
549
+ --color-purple-500-rgb: 168, 131, 223;
550
+ --color-purple-600: #bface0;
551
+ --color-purple-600-rgb: 191, 172, 224;
552
+ --color-purple-700: #ccbfe3;
553
+ --color-purple-700-rgb: 204, 191, 227;
554
+ --color-yellow-100: #f7d41d;
555
+ --color-yellow-100-rgb: 247, 212, 29;
556
+
557
+ /* Brand colors */
558
+ /* Same colors as the light theme. */
559
+
560
+ /* UI colors */
561
+ --color-base-100: var(--color-gray-100);
562
+ --color-base-100-rgb: var(--color-gray-100-rgb);
563
+ --color-base-200: var(--color-gray-200);
564
+ --color-base-200-rgb: var(--color-gray-200-rgb);
565
+ --color-base-300: var(--color-gray-300);
566
+ --color-base-300-rgb: var(--color-gray-300-rgb);
567
+ --color-base-400: var(--color-gray-400);
568
+ --color-base-400-rgb: var(--color-gray-400-rgb);
569
+ --color-base-500: var(--color-gray-500);
570
+ --color-base-500-rgb: var(--color-gray-500-rgb);
571
+ --color-base-600: var(--color-gray-600);
572
+ --color-base-600-rgb: var(--color-gray-600-rgb);
573
+ --color-base-700: var(--color-gray-700);
574
+ --color-base-700-rgb: var(--color-gray-700-rgb);
575
+ --color-base-800: var(--color-gray-800);
576
+ --color-base-800-rgb: var(--color-gray-800-rgb);
577
+ --color-base-900: var(--color-gray-900);
578
+ --color-base-900-rgb: var(--color-gray-900-rgb);
579
+ --color-base-1000: var(--color-gray-1000);
580
+ --color-base-1000-rgb: var(--color-gray-1000-rgb);
581
+ --color-base-1100: var(--color-gray-1100);
582
+ --color-base-1100-rgb: var(--color-gray-1100-rgb);
583
+ --color-base-content: var(--color-gray-1000);
584
+ --color-base-content-rgb: var(--color-gray-1000-rgb);
585
+ --color-base-content-secondary: var(--color-gray-700);
586
+ --color-base-content-secondary-rgb: var(--color-gray-700-rgb);
587
+ --color-base-content-invert: var(--color-gray-100);
588
+ --color-base-content-invert-rgb: var(--color-gray-100-rgb);
589
+ --color-accent: var(--color-gray-1000);
590
+ --color-accent-rgb: var(--color-gray-1000-rgb);
591
+ --color-accent-focus: var(--color-gray-900);
592
+ --color-accent-focus-rgb: var(--color-gray-900-rgb);
593
+ --color-accent-content: var(--color-gray-100);
594
+ --color-accent-content-rgb: var(--color-gray-100-rgb);
595
+ --color-focus: var(--color-yellow-100);
596
+ --color-focus-rgb: var(--color-yellow-100-rgb);
597
+ --color-error: var(--color-red-300);
598
+ --color-error-rgb: var(--color-red-300-rgb);
599
+ --color-error-hover: var(--color-red-400);
600
+ --color-error-hover-rgb: var(--color-red-400-rgb);
601
+ --color-success: var(--color-green-300);
602
+ --color-success-rgb: var(--color-green-300-rgb);
603
+ --color-success-hover: var(--color-green-400);
604
+ --color-success-hover-rgb: var(--color-green-400-rgb);
605
+ --color-link: var(--color-blue-400);
606
+ --color-link-rgb: var(--color-blue-400-rgb);
607
+ --color-link-hover: var(--color-blue-500);
608
+ --color-link-hover-rgb: var(--color-blue-500-rgb);
609
+ --color-link-active: var(--color-blue-100);
610
+ --color-link-active-rgb: var(--color-blue-100-rgb);
611
+ --color-link-visited: var(--color-purple-300);
612
+ --color-link-visited-rgb: var(--color-purple-300-rgb);
613
+ --color-warning: var(--color-orange-500);
614
+ --color-warning-rgb: var(--color-orange-500-rgb);
615
+ --color-info: var(--color-blue-200);
616
+ --color-info-rgb: var(--color-blue-200-rgb);
617
+ --color-info-hover: var(--color-blue-300);
618
+ --color-info-hover-rgb: var(--color-blue-300-rgb);
619
+ --color-white: var(--color-gray-1200);
620
+ --color-white-rgb: var(--color-gray-1200-rgb);
621
+ --color-black: var(--color-gray-100);
622
+ --color-black-rgb: var(--color-gray-100-rgb);
623
+ --color-footer-text: var(--color-gray-100);
624
+ --color-footer-text-rgb: var(--color-gray-100-rgb);
625
+ --text-sm-default: 0.875rem;
626
+ --text-base-default: 1rem;
627
+ --text-lg-default: 1.1875rem;
628
+ --text-xl-default: 1.25rem;
629
+ --text-2xl-default: 1.5rem;
630
+ --text-3xl-default: 1.875rem;
631
+ --text-4xl-default: 2.25rem;
632
+ --text-5xl-default: 3rem;
633
+ --text-sm-large: 1rem;
634
+ --text-base-large: 1.25rem;
635
+ --text-lg-large: 1.4rem;
636
+ --text-xl-large: 1.6rem;
637
+ --text-2xl-large: 1.875rem;
638
+ --text-3xl-large: 2.25rem;
639
+ --text-4xl-large: 2.5rem;
640
+ --text-5xl-large: 3rem;
641
+ --text-sm: var(--text-sm-default);
642
+ --text-base: var(--text-base-default);
643
+ --text-lg: var(--text-lg-default);
644
+ --text-xl: var(--text-xl-default);
645
+ --text-2xl: var(--text-2xl-default);
646
+ --text-3xl: var(--text-3xl-default);
647
+ --text-4xl: var(--text-4xl-default);
648
+ --text-5xl: var(--text-5xl-default);
649
+ --line-h-sm-default: 1.375;
650
+ --line-h-base-default: 1.375;
651
+ --line-h-lg-default: 1.375;
652
+ --line-h-xl-default: 1.25;
653
+ --line-h-2xl-default: 1.25;
654
+ --line-h-3xl-default: 1.25;
655
+ --line-h-4xl-default: 1.25;
656
+ --line-h-5xl-default: 1.25;
657
+ --line-h-sm-large: 2;
658
+ --line-h-base-large: 2;
659
+ --line-h-lg-large: 2;
660
+ --line-h-xl-large: 1.75;
661
+ --line-h-2xl-large: 1.75;
662
+ --line-h-3xl-large: 1.5;
663
+ --line-h-4xl-large: 1.5;
664
+ --line-h-5xl-large: 1.25;
665
+ --line-h-sm: var(--line-h-sm-default);
666
+ --line-h-base: var(--line-h-base-default);
667
+ --line-h-lg: var(--line-h-lg-default);
668
+ --line-h-xl: var(--line-h-xl-default);
669
+ --line-h-2xl: var(--line-h-2xl-default);
670
+ --line-h-3xl: var(--line-h-3xl-default);
671
+ --line-h-4xl: var(--line-h-4xl-default);
672
+ --line-h-5xl: var(--line-h-5xl-default);
673
+ --letter-spacing-normal-default: normal;
674
+ --letter-spacing-wide-default: 0.025rem;
675
+ --letter-spacing-wider-default: 0.05rem;
676
+ --letter-spacing-widest-default: 0.075rem;
677
+ --letter-spacing-normal-extra: 0.05rem;
678
+ --letter-spacing-wide-extra: 0.075rem;
679
+ --letter-spacing-wider-extra: 0.01rem;
680
+ --letter-spacing-widest-extra: 0.125rem;
681
+ --letter-spacing-normal: var(--letter-spacing-normal-default);
682
+ --letter-spacing-wide: var(--letter-spacing-wide-default);
683
+ --letter-spacing-wider: var(--letter-spacing-wider-default);
684
+ --letter-spacing-widest: var(--letter-spacing-widest-default);
685
+ --border-radius-md: 4px;
686
+ --border-radius-lg: 8px;
687
+ }