@digigov/theme-grnet 2.0.0-834daea4 → 2.0.0-8bbad051

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 (7) hide show
  1. package/dist/colors.css +218 -227
  2. package/dist/components-variables.css +0 -24
  3. package/dist/global-variables.css +4 -0
  4. package/dist/index.css +218 -935
  5. package/dist/index.js +1 -1
  6. package/package.json +8 -4
  7. package/dist/variables.css +0 -688
package/dist/colors.css CHANGED
@@ -1,4 +1,5 @@
1
1
  :root {
2
+ /* Color palette */
2
3
  --color-gray-100: #fefefe;
3
4
  --color-gray-100-rgb: 254, 254, 254;
4
5
  --color-gray-200: #ebebec;
@@ -21,7 +22,7 @@
21
22
  --color-gray-1000-rgb: 43, 39, 41;
22
23
  --color-gray-1100: #191516;
23
24
  --color-gray-1100-rgb: 25, 21, 22;
24
- --color-gray-1200: #000000;
25
+ --color-gray-1200: #000;
25
26
  --color-gray-1200-rgb: 0, 0, 0;
26
27
  --color-red-100: #ff837b;
27
28
  --color-red-100-rgb: 255, 131, 123;
@@ -95,6 +96,8 @@
95
96
  --color-purple-700-rgb: 53, 50, 82;
96
97
  --color-yellow-100: #f7d41d;
97
98
  --color-yellow-100-rgb: 247, 212, 29;
99
+
100
+ /* Brand colors */
98
101
  --color-primary-100: #ffb85b;
99
102
  --color-primary-100-rgb: 255, 184, 91;
100
103
  --color-primary-200: #f7941d;
@@ -119,76 +122,85 @@
119
122
  --color-tertiary-300-rgb: 2, 21, 63;
120
123
  --color-tertiary: #102958;
121
124
  --color-tertiary-rgb: 16, 41, 88;
122
- --color-base-100: #fefefe;
123
- --color-base-100-rgb: 254, 254, 254;
124
- --color-base-200: #ebebec;
125
- --color-base-200-rgb: 235, 235, 236;
126
- --color-base-300: #cbcdce;
127
- --color-base-300-rgb: 203, 205, 206;
128
- --color-base-400: #b1b2b5;
129
- --color-base-400-rgb: 177, 178, 181;
130
- --color-base-500: #96999b;
131
- --color-base-500-rgb: 150, 153, 155;
132
- --color-base-600: #7f8184;
133
- --color-base-600-rgb: 127, 129, 132;
134
- --color-base-700: #6b6b6e;
135
- --color-base-700-rgb: 107, 107, 110;
136
- --color-base-800: #515153;
137
- --color-base-800-rgb: 81, 81, 83;
138
- --color-base-900: #383536;
139
- --color-base-900-rgb: 56, 53, 54;
140
- --color-base-1000: #2b2729;
141
- --color-base-1000-rgb: 43, 39, 41;
142
- --color-base-1100: #191516;
143
- --color-base-1100-rgb: 25, 21, 22;
144
- --color-base-content: #2b2729;
145
- --color-base-content-rgb: 43, 39, 41;
146
- --color-base-content-secondary: #6b6b6e;
147
- --color-base-content-secondary-rgb: 107, 107, 110;
148
- --color-base-content-invert: #fefefe;
149
- --color-base-content-invert-rgb: 254, 254, 254;
150
- --color-accent: #2b2729;
151
- --color-accent-rgb: 43, 39, 41;
152
- --color-accent-focus: #383536;
153
- --color-accent-focus-rgb: 56, 53, 54;
154
- --color-accent-content: #fefefe;
155
- --color-accent-content-rgb: 254, 254, 254;
156
- --color-focus: #f7d41d;
157
- --color-focus-rgb: 247, 212, 29;
158
- --color-error: #a82728;
159
- --color-error-rgb: 168, 39, 40;
160
- --color-error-hover: #762422;
161
- --color-error-hover-rgb: 118, 36, 34;
162
- --color-success: #40731f;
163
- --color-success-rgb: 64, 115, 31;
164
- --color-success-hover: #3a631f;
165
- --color-success-hover-rgb: 58, 99, 31;
166
- --color-link: #305898;
167
- --color-link-rgb: 48, 88, 152;
168
- --color-link-hover: #1e3f79;
169
- --color-link-hover-rgb: 30, 63, 121;
170
- --color-link-active: #2b2729;
171
- --color-link-active-rgb: 43, 39, 41;
172
- --color-link-visited: #413b68;
173
- --color-link-visited-rgb: 65, 59, 104;
174
- --color-warning: #f29019;
175
- --color-warning-rgb: 242, 144, 25;
176
- --color-info: #3c67a8;
177
- --color-info-rgb: 60, 103, 168;
178
- --color-info-hover: #305898;
179
- --color-info-hover-rgb: 48, 88, 152;
180
- --color-footer: #fefefe;
181
- --color-footer-rgb: 254, 254, 254;
182
- --color-footer-hover: #ebebec;
183
- --color-footer-hover-rgb: 235, 235, 236;
184
- --color-white: #fefefe;
185
- --color-white-rgb: 254, 254, 254;
186
- --color-black: #000000;
187
- --color-black-rgb: 0, 0, 0;
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);
188
199
  }
189
200
 
190
201
  :root.dark,
191
202
  .dark {
203
+ /* Color palette */
192
204
  --color-gray-100: #171314;
193
205
  --color-gray-100-rgb: 23, 19, 20;
194
206
  --color-gray-200: #272324;
@@ -285,6 +297,11 @@
285
297
  --color-purple-700-rgb: 214, 204, 231;
286
298
  --color-yellow-100: #f7d41d;
287
299
  --color-yellow-100-rgb: 247, 212, 29;
300
+
301
+ /* Brand colors */
302
+ /* Same colors as the light theme. */
303
+
304
+ /* UI colors */
288
305
  --color-primary-100: #ffb85b;
289
306
  --color-primary-100-rgb: 255, 184, 91;
290
307
  --color-primary-200: #f7941d;
@@ -309,72 +326,70 @@
309
326
  --color-tertiary-300-rgb: 2, 21, 63;
310
327
  --color-tertiary: #102958;
311
328
  --color-tertiary-rgb: 16, 41, 88;
312
- --color-base-100: #171314;
313
- --color-base-100-rgb: 23, 19, 20;
314
- --color-base-200: #272324;
315
- --color-base-200-rgb: 39, 35, 36;
316
- --color-base-300: #3a3839;
317
- --color-base-300-rgb: 58, 56, 57;
318
- --color-base-400: #4b4a4c;
319
- --color-base-400-rgb: 75, 74, 76;
320
- --color-base-500: #5e5e61;
321
- --color-base-500-rgb: 94, 94, 97;
322
- --color-base-600: #717375;
323
- --color-base-600-rgb: 113, 115, 117;
324
- --color-base-700: #87898c;
325
- --color-base-700-rgb: 135, 137, 140;
326
- --color-base-800: #a7a9ac;
327
- --color-base-800-rgb: 167, 169, 172;
328
- --color-base-900: #cfd0d2;
329
- --color-base-900-rgb: 207, 208, 210;
330
- --color-base-1000: #e4e4e5;
331
- --color-base-1000-rgb: 228, 228, 229;
332
- --color-base-1100: #fbfbfb;
333
- --color-base-1100-rgb: 251, 251, 251;
334
- --color-base-content: #e4e4e5;
335
- --color-base-content-rgb: 228, 228, 229;
336
- --color-base-content-secondary: #87898c;
337
- --color-base-content-secondary-rgb: 135, 137, 140;
338
- --color-base-content-invert: #171314;
339
- --color-base-content-invert-rgb: 23, 19, 20;
340
- --color-accent: #e4e4e5;
341
- --color-accent-rgb: 228, 228, 229;
342
- --color-accent-focus: #cfd0d2;
343
- --color-accent-focus-rgb: 207, 208, 210;
344
- --color-accent-content: #171314;
345
- --color-accent-content-rgb: 23, 19, 20;
346
- --color-focus: #f7d41d;
347
- --color-focus-rgb: 247, 212, 29;
348
- --color-error: #bd282c;
349
- --color-error-rgb: 189, 40, 44;
350
- --color-error-hover: #ea383b;
351
- --color-error-hover-rgb: 234, 56, 59;
352
- --color-success: #3f6f1f;
353
- --color-success-rgb: 63, 111, 31;
354
- --color-success-hover: #4a8d1d;
355
- --color-success-hover-rgb: 74, 141, 29;
356
- --color-link: #658fcb;
357
- --color-link-rgb: 101, 143, 203;
358
- --color-link-hover: #7ba1d4;
359
- --color-link-hover-rgb: 123, 161, 212;
360
- --color-link-active: #2b5190;
361
- --color-link-active-rgb: 43, 81, 144;
362
- --color-link-visited: #9661e2;
363
- --color-link-visited-rgb: 150, 97, 226;
364
- --color-warning: #e68813;
365
- --color-warning-rgb: 230, 136, 19;
366
- --color-info: #527ebe;
367
- --color-info-rgb: 82, 126, 190;
368
- --color-info-hover: #658fcb;
369
- --color-info-hover-rgb: 101, 143, 203;
370
- --color-footer: #cfd0d2;
371
- --color-footer-rgb: 207, 208, 210;
372
- --color-footer-hover: #a7a9ac;
373
- --color-footer-hover-rgb: 167, 169, 172;
374
- --color-white: #fefffe;
375
- --color-white-rgb: 254, 255, 254;
376
- --color-black: #171314;
377
- --color-black-rgb: 23, 19, 20;
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);
378
393
  --text-sm-default: 0.875rem;
379
394
  --text-base-default: 1rem;
380
395
  --text-lg-default: 1.1875rem;
@@ -437,12 +452,11 @@
437
452
  --letter-spacing-widest: var(--letter-spacing-widest-default);
438
453
  --border-radius-md: 4px;
439
454
  --border-radius-lg: 8px;
440
- --color-header-text: var(--black);
441
- --color-header-text-hover: var(--black);
442
455
  }
443
456
 
444
457
  :root.darker,
445
458
  .darker {
459
+ /* Color palette */
446
460
  --color-gray-100: #020202;
447
461
  --color-gray-100-rgb: 2, 2, 2;
448
462
  --color-gray-200: #1c1819;
@@ -539,96 +553,75 @@
539
553
  --color-purple-700-rgb: 204, 191, 227;
540
554
  --color-yellow-100: #f7d41d;
541
555
  --color-yellow-100-rgb: 247, 212, 29;
542
- --color-primary-100: #ffb85b;
543
- --color-primary-100-rgb: 255, 184, 91;
544
- --color-primary-200: #f7941d;
545
- --color-primary-200-rgb: 247, 148, 29;
546
- --color-primary-300: #de8311;
547
- --color-primary-300-rgb: 222, 131, 17;
548
- --color-primary: #f7941d;
549
- --color-primary-rgb: 247, 148, 29;
550
- --color-secondary-100: #85abdf;
551
- --color-secondary-100-rgb: 133, 171, 223;
552
- --color-secondary-200: #6993cd;
553
- --color-secondary-200-rgb: 105, 147, 205;
554
- --color-secondary-300: #5b82b8;
555
- --color-secondary-300-rgb: 91, 130, 184;
556
- --color-secondary: #6993cd;
557
- --color-secondary-rgb: 105, 147, 205;
558
- --color-tertiary-100: #263d69;
559
- --color-tertiary-100-rgb: 38, 61, 105;
560
- --color-tertiary-200: #102958;
561
- --color-tertiary-200-rgb: 16, 41, 88;
562
- --color-tertiary-300: #02153f;
563
- --color-tertiary-300-rgb: 2, 21, 63;
564
- --color-tertiary: #102958;
565
- --color-tertiary-rgb: 16, 41, 88;
566
- --color-base-100: #020202;
567
- --color-base-100-rgb: 2, 2, 2;
568
- --color-base-200: #1c1819;
569
- --color-base-200-rgb: 28, 24, 25;
570
- --color-base-300: #333031;
571
- --color-base-300-rgb: 51, 48, 49;
572
- --color-base-400: #444244;
573
- --color-base-400-rgb: 68, 66, 68;
574
- --color-base-500: #565658;
575
- --color-base-500-rgb: 86, 86, 88;
576
- --color-base-600: #6a6a6d;
577
- --color-base-600-rgb: 106, 106, 109;
578
- --color-base-700: #7e8083;
579
- --color-base-700-rgb: 126, 128, 131;
580
- --color-base-800: #9d9fa2;
581
- --color-base-800-rgb: 157, 159, 162;
582
- --color-base-900: #c3c5c7;
583
- --color-base-900-rgb: 195, 197, 199;
584
- --color-base-1000: #d8d8da;
585
- --color-base-1000-rgb: 216, 216, 218;
586
- --color-base-1100: #ededee;
587
- --color-base-1100-rgb: 237, 237, 238;
588
- --color-base-content: #d8d8da;
589
- --color-base-content-rgb: 216, 216, 218;
590
- --color-base-content-secondary: #7e8083;
591
- --color-base-content-secondary-rgb: 126, 128, 131;
592
- --color-base-content-invert: #020202;
593
- --color-base-content-invert-rgb: 2, 2, 2;
594
- --color-accent: #d8d8da;
595
- --color-accent-rgb: 216, 216, 218;
596
- --color-accent-focus: #c3c5c7;
597
- --color-accent-focus-rgb: 195, 197, 199;
598
- --color-accent-content: #020202;
599
- --color-accent-content-rgb: 2, 2, 2;
600
- --color-focus: #f7d41d;
601
- --color-focus-rgb: 247, 212, 29;
602
- --color-error: #dd2f34;
603
- --color-error-rgb: 221, 47, 52;
604
- --color-error-hover: #f24142;
605
- --color-error-hover-rgb: 242, 65, 66;
606
- --color-success: #46831e;
607
- --color-success-rgb: 70, 131, 30;
608
- --color-success-hover: #4d951c;
609
- --color-success-hover-rgb: 77, 149, 28;
610
- --color-link: #5b86c4;
611
- --color-link-rgb: 91, 134, 196;
612
- --color-link-hover: #6f97cf;
613
- --color-link-hover-rgb: 111, 151, 207;
614
- --color-link-active: #254a86;
615
- --color-link-active-rgb: 37, 74, 134;
616
- --color-link-visited: #8858e2;
617
- --color-link-visited-rgb: 136, 88, 226;
618
- --color-warning: #d97f11;
619
- --color-warning-rgb: 217, 127, 17;
620
- --color-info: #325b9b;
621
- --color-info-rgb: 50, 91, 155;
622
- --color-info-hover: #4976b6;
623
- --color-info-hover-rgb: 73, 118, 182;
624
- --color-footer: #020202;
625
- --color-footer-rgb: 2, 2, 2;
626
- --color-footer-hover: #1c1819;
627
- --color-footer-hover-rgb: 28, 24, 25;
628
- --color-white: #fefffe;
629
- --color-white-rgb: 254, 255, 254;
630
- --color-black: #020202;
631
- --color-black-rgb: 2, 2, 2;
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);
632
625
  --text-sm-default: 0.875rem;
633
626
  --text-base-default: 1rem;
634
627
  --text-lg-default: 1.1875rem;
@@ -691,6 +684,4 @@
691
684
  --letter-spacing-widest: var(--letter-spacing-widest-default);
692
685
  --border-radius-md: 4px;
693
686
  --border-radius-lg: 8px;
694
- --color-header-text: var(--black);
695
- --color-header-text-hover: var(--black);
696
687
  }
package/dist/components-variables.css CHANGED
@@ -21,33 +21,11 @@
21
21
  }
22
22
  }
23
23
  .ds-btn-secondary {
24
- --btn-secondary-background-color: var(--color-base-300);
25
- --btn-secondary-color: var(--color-base-content);
26
- --btn-secondary-background-color-hover: var(--color-base-400);
27
- --btn-secondary-color-hover: var(--color-base-content);
28
- --btn-secondary-background-color-active: var(--color-base-500);
29
24
  --btn-secondary-box-shadow: 0;
30
25
  }
31
- @media print {
32
- .ds-btn-secondary {
33
- --btn-secondary-background-color: var(--color-white);
34
- --btn-secondary-color: var(--color-base-content)
35
- }
36
- }
37
26
  .ds-btn-warning {
38
- --btn-warning-background-color: var(--color-error);
39
- --btn-warning-color: var(--color-white);
40
- --btn-warning-background-color-hover: var(--color-error-hover);
41
- --btn-warning-color-hover: var(--color-white);
42
- --btn-warning-background-color-active: var(--color-error-hover);
43
27
  --btn-warning-box-shadow: 0;
44
28
  }
45
- @media print {
46
- .ds-btn-warning {
47
- --btn-warning-background-color: var(--color-white);
48
- --btn-warning-color: var(--color-base-content)
49
- }
50
- }
51
29
  .ds-card__text {
52
30
  --card__text-font-size: var(--text-base);
53
31
  --card__text-line-height: var(--line-h-base);
@@ -59,13 +37,11 @@
59
37
  }
60
38
  }
61
39
  .ds-card {
62
- --card-border-radius: var(--border-radius-lg);
63
40
  --card-background-color: var(--color-base-200);
64
41
  --card-padding-x: 1rem;
65
42
  --card-padding-y: 1.5rem;
66
43
  }
67
44
  .ds-footer {
68
- --footer-border: solid var(--color-tertiary);
69
45
  --footer-border-width: 0;
70
46
  --footer-background-color: var(--color-base-900);
71
47
  --footer-color: var(--color-base-200);
package/dist/global-variables.css ADDED
@@ -0,0 +1,4 @@
1
+ :root {
2
+ --border-radius-md: 4px;
3
+ --border-radius-lg: 8px;
4
+ }