@digigov/theme-grnet 2.0.0-6452adf3 → 2.0.0-6eea4edb

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/index.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,8 +684,6 @@
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
  }
697
688
  .ds-accordion__section-summary {
698
689
  --accordion__section-summary-background: var(--color-base-200);
@@ -717,33 +708,11 @@
717
708
  }
718
709
  }
719
710
  .ds-btn-secondary {
720
- --btn-secondary-background-color: var(--color-base-300);
721
- --btn-secondary-color: var(--color-base-content);
722
- --btn-secondary-background-color-hover: var(--color-base-400);
723
- --btn-secondary-color-hover: var(--color-base-content);
724
- --btn-secondary-background-color-active: var(--color-base-500);
725
711
  --btn-secondary-box-shadow: 0;
726
712
  }
727
- @media print {
728
- .ds-btn-secondary {
729
- --btn-secondary-background-color: var(--color-white);
730
- --btn-secondary-color: var(--color-base-content)
731
- }
732
- }
733
713
  .ds-btn-warning {
734
- --btn-warning-background-color: var(--color-error);
735
- --btn-warning-color: var(--color-white);
736
- --btn-warning-background-color-hover: var(--color-error-hover);
737
- --btn-warning-color-hover: var(--color-white);
738
- --btn-warning-background-color-active: var(--color-error-hover);
739
714
  --btn-warning-box-shadow: 0;
740
715
  }
741
- @media print {
742
- .ds-btn-warning {
743
- --btn-warning-background-color: var(--color-white);
744
- --btn-warning-color: var(--color-base-content)
745
- }
746
- }
747
716
  .ds-card__text {
748
717
  --card__text-font-size: var(--text-base);
749
718
  --card__text-line-height: var(--line-h-base);
@@ -755,13 +724,11 @@
755
724
  }
756
725
  }
757
726
  .ds-card {
758
- --card-border-radius: var(--border-radius-lg);
759
727
  --card-background-color: var(--color-base-200);
760
728
  --card-padding-x: 1rem;
761
729
  --card-padding-y: 1.5rem;
762
730
  }
763
731
  .ds-footer {
764
- --footer-border: solid var(--color-tertiary);
765
732
  --footer-border-width: 0;
766
733
  --footer-background-color: var(--color-base-900);
767
734
  --footer-color: var(--color-base-200);
@@ -791,690 +758,6 @@
791
758
  --tabs__panel-border-radius: 0 var(--border-radius-md) var(--border-radius-lg);
792
759
  }
793
760
  :root {
794
- --text-sm-default: 0.875rem;
795
- --text-base-default: 1rem;
796
- --text-lg-default: 1.1875rem;
797
- --text-xl-default: 1.25rem;
798
- --text-2xl-default: 1.5rem;
799
- --text-3xl-default: 1.875rem;
800
- --text-4xl-default: 2.25rem;
801
- --text-5xl-default: 3rem;
802
-
803
- --text-sm-large: 1rem;
804
- --text-base-large: 1.25rem;
805
- --text-lg-large: 1.4rem;
806
- --text-xl-large: 1.6rem;
807
- --text-2xl-large: 1.875rem;
808
- --text-3xl-large: 2.25rem;
809
- --text-4xl-large: 2.5rem;
810
- --text-5xl-large: 3rem;
811
-
812
- --text-sm: var(--text-sm-default);
813
- --text-base: var(--text-base-default);
814
- --text-lg: var(--text-lg-default);
815
- --text-xl: var(--text-xl-default);
816
- --text-2xl: var(--text-2xl-default);
817
- --text-3xl: var(--text-3xl-default);
818
- --text-4xl: var(--text-4xl-default);
819
- --text-5xl: var(--text-5xl-default);
820
-
821
- --line-h-sm-default: 1.375;
822
- --line-h-base-default: 1.375;
823
- --line-h-lg-default: 1.375;
824
- --line-h-xl-default: 1.25;
825
- --line-h-2xl-default: 1.25;
826
- --line-h-3xl-default: 1.25;
827
- --line-h-4xl-default: 1.25;
828
- --line-h-5xl-default: 1.25;
829
-
830
- --line-h-sm-large: 2;
831
- --line-h-base-large: 2;
832
- --line-h-lg-large: 2;
833
- --line-h-xl-large: 1.75;
834
- --line-h-2xl-large: 1.75;
835
- --line-h-3xl-large: 1.5;
836
- --line-h-4xl-large: 1.5;
837
- --line-h-5xl-large: 1.25;
838
-
839
- --line-h-sm: var(--line-h-sm-default);
840
- --line-h-base: var(--line-h-base-default);
841
- --line-h-lg: var(--line-h-lg-default);
842
- --line-h-xl: var(--line-h-xl-default);
843
- --line-h-2xl: var(--line-h-2xl-default);
844
- --line-h-3xl: var(--line-h-3xl-default);
845
- --line-h-4xl: var(--line-h-4xl-default);
846
- --line-h-5xl: var(--line-h-5xl-default);
847
-
848
- --letter-spacing-normal-default: normal;
849
- --letter-spacing-wide-default: 0.025rem;
850
- --letter-spacing-wider-default: 0.05rem;
851
- --letter-spacing-widest-default: 0.075rem;
852
-
853
- --letter-spacing-normal-extra: 0.05rem;
854
- --letter-spacing-wide-extra: 0.075rem;
855
- --letter-spacing-wider-extra: 0.01rem;
856
- --letter-spacing-widest-extra: 0.125rem;
857
-
858
- --letter-spacing-normal: var(--letter-spacing-normal-default);
859
- --letter-spacing-wide: var(--letter-spacing-wide-default);
860
- --letter-spacing-wider: var(--letter-spacing-wider-default);
861
- --letter-spacing-widest: var(--letter-spacing-widest-default);
862
-
863
761
  --border-radius-md: 4px;
864
762
  --border-radius-lg: 8px;
865
-
866
- /* TODO: This was not originally defined */
867
- --color-footer-link: var(--color-link);
868
- --color-footer-link-hover: var(--color-link-hover);
869
-
870
- --color-header-text: var(--black);
871
- --color-header-text-hover: var(--black);
872
- }
873
-
874
- .ds-accordion__section-heading {
875
- --accordion__section-heading-font-size: var(--text-lg);
876
- }
877
-
878
- @media (min-width: 768px) {
879
-
880
- .ds-accordion__section-heading {
881
- --accordion__section-heading-font-size: var(--text-xl)
882
- }
883
- }
884
-
885
- .ds-accordion__section-summary {
886
- --accordion__section-summary-background: var(--color-base-200);
887
- --accordion__section-summary-background-hover: var(--color-base-300);
888
- }
889
-
890
- .ds-breadcrumbs__list-item {
891
- --breadcrumbs__list-item-font-size: var(--text-sm);
892
- }
893
-
894
- @media (min-width: 768px) {
895
-
896
- .ds-breadcrumbs__list-item {
897
- --breadcrumbs__list-item-font-size: var(--text-base)
898
- }
899
- }
900
-
901
- .ds-back-to-top-link {
902
- --back-to-top-link-color: var(--color-link);
903
- --back-to-top-link-color-active: var(--color-link-active);
904
- --back-to-top-link-color-hover: var(--color-link-hover);
905
- --back-to-top-link-padding: 0px;
906
- --back-to-top-link-font-size: var(--text-base);
907
- --back-to-top-link-line-height: var(--line-h-base);
908
- --back-to-top-link-letter-spacing: var(--letter-spacing-normal);
909
- }
910
-
911
- @media (min-width: 768px) {
912
-
913
- .ds-back-to-top-link {
914
- --back-to-top-link-font-size: var(--text-lg);
915
- --back-to-top-link-line-height: var(--line-h-lg)
916
- }
917
- }
918
-
919
- .ds-btn {
920
- --btn-border-radius: 4px;
921
- --btn-padding: 0.5rem 1.25rem;
922
- --btn-letter-spacing: var(--letter-spacing-wide);
923
- --btn-font-size: var(--text-base);
924
- }
925
-
926
- @media (min-width: 768px) {
927
-
928
- .ds-btn {
929
- --btn-font-size: var(--text-lg)
930
- }
931
- }
932
-
933
- @media print {
934
-
935
- .ds-btn {
936
- --btn-padding: 0.5rem 1rem
937
- }
938
- }
939
-
940
- .ds-btn-cta {
941
- --btn-cta-font-size: var(--text-lg);
942
- }
943
-
944
- @media (min-width: 768px) {
945
-
946
- .ds-btn-cta {
947
- --btn-cta-font-size: var(--text-xl)
948
- }
949
- }
950
-
951
- .ds-btn-primary {
952
- --btn-primary-background-color: var(--color-primary);
953
- --btn-primary-color: var(--color-base-content);
954
- --btn-primary-background-color-hover: var(--color-primary-300);
955
- --btn-primary-color-hover: var(--color-base-content);
956
- --btn-primary-background-color-active: var(--color-primary-300);
957
- --btn-primary-box-shadow: 0;
958
- }
959
-
960
- @media print {
961
-
962
- .ds-btn-primary {
963
- --btn-primary-background-color: var(--color-white);
964
- --btn-primary-color: var(--color-base-content)
965
- }
966
- }
967
-
968
- .ds-btn-secondary {
969
- --btn-secondary-background-color: var(--color-base-300);
970
- --btn-secondary-color: var(--color-base-content);
971
- --btn-secondary-background-color-hover: var(--color-base-400);
972
- --btn-secondary-color-hover: var(--color-base-content);
973
- --btn-secondary-background-color-active: var(--color-base-500);
974
- --btn-secondary-box-shadow: 0;
975
- }
976
-
977
- @media print {
978
-
979
- .ds-btn-secondary {
980
- --btn-secondary-background-color: var(--color-white);
981
- --btn-secondary-color: var(--color-base-content)
982
- }
983
- }
984
-
985
- .ds-btn-warning {
986
- --btn-warning-background-color: var(--color-error);
987
- --btn-warning-color: var(--color-white);
988
- --btn-warning-background-color-hover: var(--color-error-hover);
989
- --btn-warning-color-hover: var(--color-white);
990
- --btn-warning-background-color-active: var(--color-error-hover);
991
- --btn-warning-box-shadow: 0;
992
- }
993
-
994
- @media print {
995
-
996
- .ds-btn-warning {
997
- --btn-warning-background-color: var(--color-white);
998
- --btn-warning-color: var(--color-base-content)
999
- }
1000
- }
1001
-
1002
- .ds-card__text {
1003
- --card__text-font-size: var(--text-base);
1004
- --card__text-line-height: var(--line-h-base);
1005
- }
1006
-
1007
- @media (min-width: 768px) {
1008
-
1009
- .ds-card__text {
1010
- --card__text-font-size: var(--text-lg);
1011
- --card__text-line-height: var(--line-h-lg)
1012
- }
1013
- }
1014
-
1015
- .ds-card {
1016
- --card-border-radius: var(--border-radius-lg);
1017
- --card-background-color: var(--color-base-200);
1018
- --card-padding: 1.5rem 1rem;
1019
- }
1020
-
1021
- .ds-label {
1022
- --label-font-size: var(--text-base);
1023
- --label-line-height: var(--line-h-base);
1024
- --label-letter-spacing: var(--letter-spacing-normal);
1025
- }
1026
-
1027
- @media (min-width: 768px) {
1028
-
1029
- .ds-label {
1030
- --label-font-size: var(--text-lg);
1031
- --label-line-height: var(--line-h-lg)
1032
- }
1033
- }
1034
-
1035
- .ds-input {
1036
- --input-border-radius: var(--border-radius-md);
1037
- }
1038
-
1039
- .ds-textarea {
1040
- --textarea-border-radius: var(--border-radius-md);
1041
- }
1042
-
1043
- .ds-select {
1044
- --select-border-radius: var(--border-radius-md);
1045
- }
1046
-
1047
- .ds-footer__copyright {
1048
- --footer__copyright-font-size: var(--text-sm);
1049
- }
1050
-
1051
- @media (min-width: 768px) {
1052
-
1053
- .ds-footer__copyright {
1054
- --footer__copyright-font-size: var(--text-base)
1055
- }
1056
- }
1057
-
1058
- .ds-footer {
1059
- --footer-border: solid var(--color-tertiary);
1060
- --footer-border-width: 0;
1061
- --footer-background-color: var(--color-base-900);
1062
- --footer-color: var(--color-base-200);
1063
- }
1064
-
1065
- .ds-footer__link {
1066
- --footer__link-text-decoration: none;
1067
- --footer__link-text-decoration-hover: underline;
1068
- --footer__link-color-hover: var(--color-base-300);
1069
- --footer__link-color-focus: var(--color-base-content);
1070
- }
1071
-
1072
- .ds-header {
1073
- --header-border: solid var(--color-base-300);
1074
- --header-border-width: 0 0 1px 0;
1075
- --header-background: var(--color-base-200);
1076
- }
1077
-
1078
- .ds-header__title {
1079
- --header__title-color: var(--header-color);
1080
- --header__title-color-hover: var(--header-color-hover);
1081
- }
1082
-
1083
- .ds-warning-text {
1084
- --warning-text-font-size: var(--text-base);
1085
- }
1086
-
1087
- @media (min-width: 768px) {
1088
-
1089
- .ds-warning-text {
1090
- --warning-text-font-size: var(--text-lg)
1091
- }
1092
- }
1093
-
1094
- .ds-details {
1095
- --details-font-size: var(--text-base);
1096
- --details-line-height: var(--line-h-base);
1097
- }
1098
-
1099
- @media (min-width: 768px) {
1100
-
1101
- .ds-details {
1102
- --details-font-size: var(--text-lg);
1103
- --details-line-height: var(--line-h-lg)
1104
- }
1105
- }
1106
-
1107
- .ds-details__summary {
1108
- --details__summary-font-size: var(--text-base);
1109
- --details__summary-line-height: var(--line-h-base);
1110
- }
1111
-
1112
- @media (min-width: 768px) {
1113
-
1114
- .ds-details__summary {
1115
- --details__summary-font-size: var(--text-lg);
1116
- --details__summary-line-height: var(--line-h-lg)
1117
- }
1118
- }
1119
-
1120
- .ds-details__summary--lg {
1121
- --details__summary--lg-font-size: var(--text-lg);
1122
- --details__summary--lg-line-height: var(--line-h-lg);
1123
- }
1124
-
1125
- @media (min-width: 768px) {
1126
-
1127
- .ds-details__summary--lg {
1128
- --details__summary--lg-font-size: var(--text-xl);
1129
- --details__summary--lg-line-height: var(--line-h-xl)
1130
763
  }
1131
- }
1132
-
1133
- .ds-blockquote {
1134
- --blockquote-font-size: var(--text-base);
1135
- --blockquote-line-height: var(--line-h-base);
1136
- }
1137
-
1138
- @media (min-width: 768px) {
1139
-
1140
- .ds-blockquote {
1141
- --blockquote-font-size: var(--text-lg);
1142
- --blockquote-line-height: var(--line-h-lg)
1143
- }
1144
- }
1145
-
1146
- .ds-notification-banner {
1147
- --notification-banner-border-radius: var(--border-radius-md);
1148
- }
1149
-
1150
- .ds-circular-progress__circle--1 {
1151
- --circular-progress__circle--1-stroke: var(--color-secondary);
1152
- }
1153
-
1154
- .ds-circular-progress__circle--2 {
1155
- --circular-progress__circle--2-stroke: var(--color-tertiary);
1156
- }
1157
-
1158
- .ds-tabs__panel {
1159
- --tabs__panel-border-radius: 0 var(--border-radius-md) var(--border-radius-lg);
1160
- }
1161
-
1162
- .ds-panel {
1163
- --panel-border-radius: var(--border-radius-md);
1164
- }
1165
-
1166
- .ds-panel__title {
1167
- --panel__title-font-size: var(--text-4xl);
1168
- --panel__title-line-height: var(--line-h-4xl);
1169
- --panel__title-margin-bottom: 1rem;
1170
- --panel__title-font-weight: 700;
1171
- --panel__title-letter-spacing: var(--letter-spacing-normal);
1172
- }
1173
-
1174
- @media (min-width: 768px) {
1175
-
1176
- .ds-panel__title {
1177
- --panel__title-font-size: var(--text-5xl);
1178
- --panel__title-line-height: var(--line-h-5xl);
1179
- --panel__title-margin-bottom: 1.5rem
1180
- }
1181
- }
1182
-
1183
- @media print {
1184
-
1185
- .ds-panel__title {
1186
- --panel__title-font-size: var(--text-4xl);
1187
- --panel__title-line-height: var(--line-h-4xl);
1188
- --panel__title-margin-bottom: 1.5rem
1189
- }
1190
- }
1191
-
1192
- .ds-panel__body {
1193
- --panel__body-font-size: var(--text-2xl);
1194
- --panel__body-line-height: var(--line-h-2xl);
1195
- --panel__body-margin: auto;
1196
- --panel__body-letter-spacing: var(--letter-spacing-normal);
1197
- }
1198
-
1199
- @media (min-width: 768px) {
1200
-
1201
- .ds-panel__body {
1202
- --panel__body-font-size: var(--text-4xl);
1203
- --panel__body-line-height: var(--line-h-4xl)
1204
- }
1205
- }
1206
-
1207
- @media print {
1208
-
1209
- .ds-panel__body {
1210
- --panel__body-font-size: var(--text-2xl);
1211
- --panel__body-line-height: var(--line-h-2xl)
1212
- }
1213
- }
1214
-
1215
- .ds-phase-banner__content {
1216
- --phase-banner__content-font-size: var(--text-base);
1217
- }
1218
-
1219
- @media (min-width: 768px) {
1220
-
1221
- .ds-phase-banner__content {
1222
- --phase-banner__content-font-size: var(--text-lg)
1223
- }
1224
- }
1225
-
1226
- .ds-radios__label {
1227
- --radios__label-font-size: var(--text-base);
1228
- }
1229
-
1230
- @media (min-width: 768px) {
1231
-
1232
- .ds-radios__label {
1233
- --radios__label-font-size: var(--text-lg)
1234
- }
1235
- }
1236
-
1237
- .ds-summary-list {
1238
- --summary-list-font-size: var(--text-base);
1239
- }
1240
-
1241
- @media (min-width: 768px) {
1242
-
1243
- .ds-summary-list {
1244
- --summary-list-font-size: var(--text-lg)
1245
- }
1246
- }
1247
-
1248
- .ds-heading-xl {
1249
- --heading-xl-font-size: var(--text-3xl);
1250
- --heading-xl-line-height: var(--line-h-3xl);
1251
- --heading-xl-margin-bottom: 2rem;
1252
- --heading-xl-font-weight: 700;
1253
- --heading-xl-letter-spacing: var(--letter-spacing-normal);
1254
- }
1255
-
1256
- @media (min-width: 768px) {
1257
-
1258
- .ds-heading-xl {
1259
- --heading-xl-font-size: var(--text-5xl);
1260
- --heading-xl-line-height: var(--line-h-5xl);
1261
- --heading-xl-margin-bottom: 3rem
1262
- }
1263
- }
1264
-
1265
- .ds-heading-lg {
1266
- --heading-lg-font-size: var(--text-2xl);
1267
- --heading-lg-line-height: var(--line-h-2xl);
1268
- --heading-lg-margin-bottom: 2rem;
1269
- --heading-lg-font-weight: 700;
1270
- --heading-lg-letter-spacing: var(--letter-spacing-normal);
1271
- }
1272
-
1273
- @media (min-width: 768px) {
1274
-
1275
- .ds-heading-lg {
1276
- --heading-lg-font-size: var(--text-4xl);
1277
- --heading-lg-line-height: var(--line-h-4xl);
1278
- --heading-lg-margin-bottom: 2.5rem
1279
- }
1280
- }
1281
-
1282
- .ds-heading-md {
1283
- --heading-md-font-size: var(--text-xl);
1284
- --heading-md-line-height: var(--line-h-xl);
1285
- --heading-md-margin-bottom: 1.5rem;
1286
- --heading-md-font-weight: 700;
1287
- --heading-md-letter-spacing: var(--letter-spacing-normal);
1288
- }
1289
-
1290
- @media (min-width: 768px) {
1291
-
1292
- .ds-heading-md {
1293
- --heading-md-font-size: var(--text-2xl);
1294
- --heading-md-line-height: var(--line-h-2xl);
1295
- --heading-md-margin-bottom: 2rem
1296
- }
1297
- }
1298
-
1299
- .ds-heading-sm {
1300
- --heading-sm-font-size: var(--text-base);
1301
- --heading-sm-line-height: var(--line-h-base);
1302
- --heading-sm-margin-bottom: 0.75rem;
1303
- --heading-sm-font-weight: 700;
1304
- --heading-sm-letter-spacing: var(--letter-spacing-normal);
1305
- }
1306
-
1307
- @media (min-width: 768px) {
1308
-
1309
- .ds-heading-sm {
1310
- --heading-sm-font-size: var(--text-lg);
1311
- --heading-sm-line-height: var(--line-h-lg);
1312
- --heading-sm-margin-bottom: 1.25rem
1313
- }
1314
- }
1315
-
1316
- .ds-heading-xs {
1317
- --heading-xs-font-size: var(--text-sm);
1318
- --heading-xs-line-height: var(--line-h-sm);
1319
- --heading-xs-margin-bottom: 0.5rem;
1320
- --heading-xs-font-weight: 700;
1321
- --heading-xs-letter-spacing: var(--letter-spacing-normal);
1322
- }
1323
-
1324
- @media (min-width: 768px) {
1325
-
1326
- .ds-heading-xs {
1327
- --heading-xs-font-size: var(--text-base);
1328
- --heading-xs-line-height: var(--line-h-base);
1329
- --heading-xs-margin-bottom: 1rem
1330
- }
1331
- }
1332
-
1333
- .ds-caption-xl {
1334
- --caption-xl-font-size: var(--text-xl);
1335
- --caption-xl-line-height: var(--line-h-xl);
1336
- --caption-xl-margin-bottom: 0.25rem;
1337
- --caption-xl-color: var(--color-base-800);
1338
- --caption-xl-font-weight: 400;
1339
- --caption-xl-letter-spacing: var(--letter-spacing-normal);
1340
- }
1341
-
1342
- @media (min-width: 768px) {
1343
-
1344
- .ds-caption-xl {
1345
- --caption-xl-font-size: var(--text-2xl);
1346
- --caption-xl-line-height: var(--line-h-2xl);
1347
- --caption-xl-margin-bottom: 0.5rem
1348
- }
1349
- }
1350
-
1351
- .ds-caption-lg {
1352
- --caption-lg-font-size: var(--text-lg);
1353
- --caption-lg-line-height: var(--line-h-lg);
1354
- --caption-lg-margin-bottom: 0rem;
1355
- --caption-lg-color: var(--color-base-800);
1356
- --caption-lg-font-weight: 400;
1357
- --caption-lg-letter-spacing: var(--letter-spacing-normal);
1358
- }
1359
-
1360
- @media (min-width: 768px) {
1361
-
1362
- .ds-caption-lg {
1363
- --caption-lg-font-size: var(--text-xl);
1364
- --caption-lg-line-height: var(--line-h-xl)
1365
- }
1366
- }
1367
-
1368
- .ds-caption-md {
1369
- --caption-md-font-size: var(--text-base);
1370
- --caption-md-line-height: var(--line-h-base);
1371
- --caption-md-margin-bottom: 0rem;
1372
- --caption-md-color: var(--color-base-800);
1373
- --caption-md-font-weight: 400;
1374
- --caption-md-letter-spacing: var(--letter-spacing-normal);
1375
- }
1376
-
1377
- @media (min-width: 768px) {
1378
-
1379
- .ds-caption-md {
1380
- --caption-md-font-size: var(--text-lg);
1381
- --caption-md-line-height: var(--line-h-lg)
1382
- }
1383
- }
1384
-
1385
- .ds-body {
1386
- --body-font-size: var(--text-base);
1387
- --body-line-height: var(--line-h-base);
1388
- --body-margin-bottom: 1rem;
1389
- --body-color: var(--color-base-content);
1390
- --body-letter-spacing: var(--letter-spacing-normal);
1391
- }
1392
-
1393
- @media (min-width: 768px) {
1394
-
1395
- .ds-body {
1396
- --body-font-size: var(--text-lg);
1397
- --body-line-height: var(--line-h-lg);
1398
- --body-margin-bottom: 2rem
1399
- }
1400
- }
1401
-
1402
- .ds-body-lg {
1403
- --body-lg-font-size: var(--text-lg);
1404
- --body-lg-line-height: var(--line-h-lg);
1405
- }
1406
-
1407
- .ds-body-sm {
1408
- --body-sm-font-size: var(--text-sm);
1409
- --body-sm-line-height: var(--line-h-sm);
1410
- }
1411
-
1412
- .ds-hint {
1413
- --hint-font-size: var(--text-base);
1414
- --hint-line-height: var(--line-h-base);
1415
- --hint-margin-bottom: 1rem;
1416
- --hint-color: var(--color-base-800);
1417
- --hint-letter-spacing: var(--letter-spacing-normal);
1418
- }
1419
-
1420
- @media (min-width: 768px) {
1421
-
1422
- .ds-hint {
1423
- --hint-font-size: var(--text-lg);
1424
- --hint-line-height: var(--line-h-lg)
1425
- }
1426
- }
1427
-
1428
- .ds-hint-lg {
1429
- --hint-lg-font-size: var(--text-lg);
1430
- --hint-lg-line-height: var(--line-h-lg);
1431
- }
1432
-
1433
- .ds-hint-sm {
1434
- --hint-sm-font-size: var(--text-sm);
1435
- --hint-sm-line-height: var(--line-h-sm);
1436
- }
1437
-
1438
- .ds-link {
1439
- --link-color: var(--color-link);
1440
- --link-color-active: var(--color-link-active);
1441
- --link-color-hover: var(--color-link-hover);
1442
- --link-padding: 0px;
1443
- --link-font-size: var(--text-base);
1444
- --link-line-height: var(--line-h-base);
1445
- --link-letter-spacing: var(--letter-spacing-normal);
1446
- }
1447
-
1448
- @media (min-width: 768px) {
1449
-
1450
- .ds-link {
1451
- --link-font-size: var(--text-lg);
1452
- --link-line-height: var(--line-h-lg)
1453
- }
1454
- }
1455
-
1456
- .ds-back-link {
1457
- --back-link-font-size: var(--text-base);
1458
- --back-link-letter-spacing: var(--letter-spacing-normal);
1459
- }
1460
-
1461
- @media (min-width: 768px) {
1462
-
1463
- .ds-back-link {
1464
- --back-link-font-size: var(--text-lg)
1465
- }
1466
- }
1467
-
1468
- .ds-list {
1469
- --list-font-size: var(--text-base);
1470
- --list-line-height: var(--line-h-base);
1471
- --list-letter-spacing: var(--letter-spacing-normal);
1472
- }
1473
-
1474
- @media (min-width: 768px) {
1475
-
1476
- .ds-list {
1477
- --list-font-size: var(--text-lg);
1478
- --list-line-height: var(--line-h-lg)
1479
- }
1480
- }