@digigov/theme-govgr 2.0.0-834daea4 → 2.0.0-aefd0709

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 (5) hide show
  1. package/dist/global-variables.css +11 -0
  2. package/dist/index.css +1 -1004
  3. package/dist/index.js +1 -1
  4. package/package.json +4 -4
  5. package/dist/variables.css +0 -1014
package/dist/variables.css DELETED
@@ -1,1014 +0,0 @@
1
- :root {
2
- --text-sm-default: 0.875rem;
3
- --text-base-default: 1rem;
4
- --text-lg-default: 1.1875rem;
5
- --text-xl-default: 1.25rem;
6
- --text-2xl-default: 1.5rem;
7
- --text-3xl-default: 1.875rem;
8
- --text-4xl-default: 2.25rem;
9
- --text-5xl-default: 3rem;
10
-
11
- --text-sm-large: 1rem;
12
- --text-base-large: 1.25rem;
13
- --text-lg-large: 1.4rem;
14
- --text-xl-large: 1.6rem;
15
- --text-2xl-large: 1.875rem;
16
- --text-3xl-large: 2.25rem;
17
- --text-4xl-large: 2.5rem;
18
- --text-5xl-large: 3rem;
19
-
20
- --text-sm: var(--text-sm-default);
21
- --text-base: var(--text-base-default);
22
- --text-lg: var(--text-lg-default);
23
- --text-xl: var(--text-xl-default);
24
- --text-2xl: var(--text-2xl-default);
25
- --text-3xl: var(--text-3xl-default);
26
- --text-4xl: var(--text-4xl-default);
27
- --text-5xl: var(--text-5xl-default);
28
-
29
- --line-h-sm-default: 1.375;
30
- --line-h-base-default: 1.375;
31
- --line-h-lg-default: 1.375;
32
- --line-h-xl-default: 1.25;
33
- --line-h-2xl-default: 1.25;
34
- --line-h-3xl-default: 1.25;
35
- --line-h-4xl-default: 1.25;
36
- --line-h-5xl-default: 1.25;
37
-
38
- --line-h-sm-large: 2;
39
- --line-h-base-large: 2;
40
- --line-h-lg-large: 2;
41
- --line-h-xl-large: 1.75;
42
- --line-h-2xl-large: 1.75;
43
- --line-h-3xl-large: 1.5;
44
- --line-h-4xl-large: 1.5;
45
- --line-h-5xl-large: 1.25;
46
-
47
- --line-h-sm: var(--line-h-sm-default);
48
- --line-h-base: var(--line-h-base-default);
49
- --line-h-lg: var(--line-h-lg-default);
50
- --line-h-xl: var(--line-h-xl-default);
51
- --line-h-2xl: var(--line-h-2xl-default);
52
- --line-h-3xl: var(--line-h-3xl-default);
53
- --line-h-4xl: var(--line-h-4xl-default);
54
- --line-h-5xl: var(--line-h-5xl-default);
55
-
56
- --letter-spacing-normal-default: normal;
57
- --letter-spacing-wide-default: 0.025rem;
58
- --letter-spacing-wider-default: 0.05rem;
59
- --letter-spacing-widest-default: 0.075rem;
60
-
61
- --letter-spacing-normal-extra: 0.05rem;
62
- --letter-spacing-wide-extra: 0.075rem;
63
- --letter-spacing-wider-extra: 0.01rem;
64
- --letter-spacing-widest-extra: 0.125rem;
65
-
66
- --letter-spacing-normal: var(--letter-spacing-normal-default);
67
- --letter-spacing-wide: var(--letter-spacing-wide-default);
68
- --letter-spacing-wider: var(--letter-spacing-wider-default);
69
- --letter-spacing-widest: var(--letter-spacing-widest-default);
70
-
71
- --border-radius-md: 0px;
72
- --border-radius-lg: 0px;
73
-
74
- --color-footer-link: var(--color-link);
75
- --color-footer-link-hover: var(--color-link-hover);
76
-
77
- --color-header-text: var(--color-white);
78
- --color-header-text-hover: var(--color-white);
79
- }
80
-
81
- .ds-accordion__section-heading {
82
- --accordion__section-heading-font-size: var(--text-lg);
83
- }
84
-
85
- @media (min-width: 768px) {
86
-
87
- .ds-accordion__section-heading {
88
- --accordion__section-heading-font-size: var(--text-xl)
89
- }
90
- }
91
- .ds-accordion__section-summary {
92
- --accordion__section-summary-background: var(--color-base-100);
93
- --accordion__section-summary-background-hover: var(--color-base-200);
94
- }
95
- .ds-breadcrumbs__list-item {
96
- --breadcrumbs__list-item-font-size: var(--text-sm);
97
- }
98
- @media (min-width: 768px) {
99
- .ds-breadcrumbs__list-item {
100
- --breadcrumbs__list-item-font-size: var(--text-base)
101
- }
102
- }
103
- .ds-back-to-top-link {
104
- --back-to-top-link-color: var(--color-link);
105
- --back-to-top-link-color-active: var(--color-link-active);
106
- --back-to-top-link-color-hover: var(--color-link-hover);
107
- --back-to-top-link-padding: 0px;
108
- --back-to-top-link-font-size: var(--text-base);
109
- --back-to-top-link-line-height: var(--line-h-base);
110
- --back-to-top-link-letter-spacing: var(--letter-spacing-normal);
111
- }
112
- @media (min-width: 768px) {
113
- .ds-back-to-top-link {
114
- --back-to-top-link-font-size: var(--text-lg);
115
- --back-to-top-link-line-height: var(--line-h-lg)
116
- }
117
- }
118
- .ds-btn {
119
- --btn-border-radius: 0px;
120
- --btn-padding-y: 0.5rem;
121
- --btn-padding-x: 1.25rem;
122
- --btn-letter-spacing: var(--letter-spacing-wide);
123
- --btn-font-size: var(--text-base);
124
- }
125
- @media (min-width: 768px) {
126
- .ds-btn {
127
- --btn-font-size: var(--text-lg)
128
- }
129
- }
130
- @media print {
131
- .ds-btn {
132
- --btn-padding-y: 0.5rem;
133
- --btn-padding-x: 1rem
134
- }
135
- }
136
- .ds-btn-cta {
137
- --btn-cta-font-size: var(--text-lg);
138
- }
139
- @media (min-width: 768px) {
140
- .ds-btn-cta {
141
- --btn-cta-font-size: var(--text-xl)
142
- }
143
- }
144
- .ds-btn-primary {
145
- --btn-primary-background-color: var(--color-success);
146
- --btn-primary-color: var(--color-white);
147
- --btn-primary-background-color-hover: var(--color-success-hover);
148
- --btn-primary-color-hover: var(--color-white);
149
- --btn-primary-background-color-active: var(--color-success-hover);
150
- --btn-primary-box-shadow: 0 2px 0 var(--color-base-content);
151
- }
152
- @media print {
153
- .ds-btn-primary {
154
- --btn-primary-background-color: var(--color-white);
155
- --btn-primary-color: var(--color-base-content)
156
- }
157
- }
158
- .ds-btn-secondary {
159
- --btn-secondary-background-color: var(--color-base-300);
160
- --btn-secondary-color: var(--color-base-content);
161
- --btn-secondary-background-color-hover: var(--color-base-400);
162
- --btn-secondary-color-hover: var(--color-base-content);
163
- --btn-secondary-background-color-active: var(--color-base-500);
164
- --btn-secondary-box-shadow: 0 2px 0 var(--color-base-500);
165
- }
166
- @media print {
167
- .ds-btn-secondary {
168
- --btn-secondary-background-color: var(--color-white);
169
- --btn-secondary-color: var(--color-base-content)
170
- }
171
- }
172
- .ds-btn-warning {
173
- --btn-warning-background-color: var(--color-error);
174
- --btn-warning-color: var(--color-white);
175
- --btn-warning-background-color-hover: var(--color-error-hover);
176
- --btn-warning-color-hover: var(--color-white);
177
- --btn-warning-background-color-active: var(--color-error-hover);
178
- --btn-warning-box-shadow: 0 2px 0 var(--color-base-content);
179
- }
180
- @media print {
181
- .ds-btn-warning {
182
- --btn-warning-background-color: var(--color-white);
183
- --btn-warning-color: var(--color-base-content)
184
- }
185
- }
186
- .ds-card__content {
187
- --card__content-font-size: var(--text-sm);
188
- --card__content-line-height: var(--line-h-sm);
189
- }
190
- @media (min-width: 768px) {
191
- .ds-card__content {
192
- --card__content-font-size: var(--text-base);
193
- --card__content-line-height: var(--line-h-base)
194
- }
195
- }
196
- .ds-card {
197
- --card-border-radius: var(--border-radius-lg);
198
- --card-background-color: var(--color-base-100);
199
- --card-padding: 0;
200
- }
201
- .ds-fieldset__legend {
202
- --fieldset__legend-margin-bottom: 1rem;
203
- --fieldset__legend-font-weight: 700;
204
- --fieldset__legend-letter-spacing: var(--letter-spacing-normal);
205
- }
206
- .ds-fieldset__legend--xl {
207
- --fieldset__legend--xl-font-size: var(--text-3xl);
208
- --fieldset__legend--xl-line-height: var(--line-h-3xl);
209
- }
210
- @media (min-width: 768px) {
211
- .ds-fieldset__legend--xl {
212
- --fieldset__legend--xl-font-size: var(--text-5xl);
213
- --fieldset__legend--xl-line-height: var(--line-h-5xl)
214
- }
215
- }
216
- .ds-fieldset__legend--lg {
217
- --fieldset__legend--lg-font-size: var(--text-2xl);
218
- --fieldset__legend--lg-line-height: var(--line-h-2xl);
219
- }
220
- @media (min-width: 768px) {
221
- .ds-fieldset__legend--lg {
222
- --fieldset__legend--lg-font-size: var(--text-4xl);
223
- --fieldset__legend--lg-line-height: var(--line-h-4xl)
224
- }
225
- }
226
- .ds-fieldset__legend--md {
227
- --fieldset__legend--md-font-size: var(--text-xl);
228
- --fieldset__legend--md-line-height: var(--line-h-xl);
229
- }
230
- @media (min-width: 768px) {
231
- .ds-fieldset__legend--md {
232
- --fieldset__legend--md-font-size: var(--text-2xl);
233
- --fieldset__legend--md-line-height: var(--line-h-2xl)
234
- }
235
- }
236
- .ds-fieldset__legend--sm {
237
- --fieldset__legend--sm-font-size: var(--text-base);
238
- --fieldset__legend--sm-line-height: var(--line-h-base);
239
- }
240
- @media (min-width: 768px) {
241
- .ds-fieldset__legend--sm {
242
- --fieldset__legend--sm-font-size: var(--text-lg);
243
- --fieldset__legend--sm-line-height: var(--line-h-lg)
244
- }
245
- }
246
- .ds-label {
247
- --label-font-size: var(--text-base);
248
- --label-line-height: var(--line-h-base);
249
- --label-letter-spacing: var(--letter-spacing-normal);
250
- }
251
- @media (min-width: 768px) {
252
- .ds-label {
253
- --label-font-size: var(--text-lg);
254
- --label-line-height: var(--line-h-lg)
255
- }
256
- }
257
- .ds-label__title {
258
- --label__title-margin-bottom: 0rem;
259
- --label__title-font-weight: 700;
260
- --label__title-letter-spacing: var(--letter-spacing-normal);
261
- }
262
- .ds-label__title--xl {
263
- --label__title--xl-font-size: var(--text-3xl);
264
- --label__title--xl-line-height: var(--line-h-3xl);
265
- }
266
- @media (min-width: 768px) {
267
- .ds-label__title--xl {
268
- --label__title--xl-font-size: var(--text-5xl);
269
- --label__title--xl-line-height: var(--line-h-5xl)
270
- }
271
- }
272
- .ds-label__title--lg {
273
- --label__title--lg-font-size: var(--text-2xl);
274
- --label__title--lg-line-height: var(--line-h-2xl);
275
- }
276
- @media (min-width: 768px) {
277
- .ds-label__title--lg {
278
- --label__title--lg-font-size: var(--text-4xl);
279
- --label__title--lg-line-height: var(--line-h-4xl)
280
- }
281
- }
282
- .ds-label__title--md {
283
- --label__title--md-font-size: var(--text-xl);
284
- --label__title--md-line-height: var(--line-h-xl);
285
- }
286
- @media (min-width: 768px) {
287
- .ds-label__title--md {
288
- --label__title--md-font-size: var(--text-2xl);
289
- --label__title--md-line-height: var(--line-h-2xl)
290
- }
291
- }
292
- .ds-label__title--sm {
293
- --label__title--sm-font-size: var(--text-base);
294
- --label__title--sm-line-height: var(--line-h-base);
295
- }
296
- @media (min-width: 768px) {
297
- .ds-label__title--sm {
298
- --label__title--sm-font-size: var(--text-lg);
299
- --label__title--sm-line-height: var(--line-h-lg)
300
- }
301
- }
302
- .ds-input {
303
- --input-border-radius: var(--border-radius-md);
304
- }
305
- .ds-textarea {
306
- --textarea-border-radius: var(--border-radius-md);
307
- }
308
- .ds-select {
309
- --select-border-radius: var(--border-radius-md);
310
- }
311
- .ds-footer__copyright {
312
- --footer__copyright-font-size: var(--text-sm);
313
- }
314
- @media (min-width: 768px) {
315
- .ds-footer__copyright {
316
- --footer__copyright-font-size: var(--text-base)
317
- }
318
- }
319
- .ds-footer {
320
- --footer-border: solid var(--color-tertiary);
321
- --footer-border-width: 4px 0 0 0;
322
- --footer-background-color: var(--color-base-200);
323
- --footer-color: var(--color-base-800);
324
- }
325
- .ds-footer__link {
326
- --footer__link-text-decoration: underline;
327
- --footer__link-text-decoration-hover: underline;
328
- --footer__link-color-hover: var(--link-color-hover);
329
- --footer__link-color-focus: var(--link-color-active);
330
- }
331
- .ds-header {
332
- --header-border: solid var(--color-tertiary);
333
- --header-border-width: 0 0 8px 0;
334
- --header-background: var(--color-primary);
335
- }
336
- .ds-header__title {
337
- --header__title-color: var(--color-header-text);
338
- --header__title-color-hover: var(--color-header-text-hover);
339
- }
340
- .ds-warning-text {
341
- --warning-text-font-size: var(--text-base);
342
- }
343
- @media (min-width: 768px) {
344
- .ds-warning-text {
345
- --warning-text-font-size: var(--text-lg)
346
- }
347
- }
348
- .ds-details {
349
- --details-font-size: var(--text-base);
350
- --details-line-height: var(--line-h-base);
351
- }
352
- @media (min-width: 768px) {
353
- .ds-details {
354
- --details-font-size: var(--text-lg);
355
- --details-line-height: var(--line-h-lg)
356
- }
357
- }
358
- .ds-details__summary {
359
- --details__summary-font-size: var(--text-base);
360
- --details__summary-line-height: var(--line-h-base);
361
- }
362
- @media (min-width: 768px) {
363
- .ds-details__summary {
364
- --details__summary-font-size: var(--text-lg);
365
- --details__summary-line-height: var(--line-h-lg)
366
- }
367
- }
368
- .ds-details__summary--lg {
369
- --details__summary--lg-font-size: var(--text-lg);
370
- --details__summary--lg-line-height: var(--line-h-lg);
371
- }
372
- @media (min-width: 768px) {
373
- .ds-details__summary--lg {
374
- --details__summary--lg-font-size: var(--text-xl);
375
- --details__summary--lg-line-height: var(--line-h-xl)
376
- }
377
- }
378
- .ds-blockquote {
379
- --blockquote-font-size: var(--text-base);
380
- --blockquote-line-height: var(--line-h-base);
381
- }
382
- @media (min-width: 768px) {
383
- .ds-blockquote {
384
- --blockquote-font-size: var(--text-lg);
385
- --blockquote-line-height: var(--line-h-lg)
386
- }
387
- }
388
- .ds-notification-banner {
389
- --notification-banner-border-radius: var(--border-radius-md);
390
- }
391
- .ds-circular-progress__circle--1 {
392
- --circular-progress__circle--1-stroke: var(--color-secondary);
393
- }
394
- .ds-circular-progress__circle--2 {
395
- --circular-progress__circle--2-stroke: var(--color-primary);
396
- }
397
- .ds-tabs__panel {
398
- --tabs__panel-border-radius: 0;
399
- }
400
- .ds-panel {
401
- --panel-border-radius: var(--border-radius-md);
402
- }
403
- .ds-panel__title {
404
- --panel__title-font-size: var(--text-4xl);
405
- --panel__title-line-height: var(--line-h-4xl);
406
- --panel__title-margin-bottom: 1rem;
407
- --panel__title-font-weight: 700;
408
- --panel__title-letter-spacing: var(--letter-spacing-normal);
409
- }
410
- @media (min-width: 768px) {
411
- .ds-panel__title {
412
- --panel__title-font-size: var(--text-5xl);
413
- --panel__title-line-height: var(--line-h-5xl);
414
- --panel__title-margin-bottom: 1.5rem
415
- }
416
- }
417
- @media print {
418
- .ds-panel__title {
419
- --panel__title-font-size: var(--text-4xl);
420
- --panel__title-line-height: var(--line-h-4xl);
421
- --panel__title-margin-bottom: 1.5rem
422
- }
423
- }
424
- .ds-panel__body {
425
- --panel__body-font-size: var(--text-2xl);
426
- --panel__body-line-height: var(--line-h-2xl);
427
- --panel__body-margin: auto;
428
- --panel__body-letter-spacing: var(--letter-spacing-normal);
429
- }
430
- @media (min-width: 768px) {
431
- .ds-panel__body {
432
- --panel__body-font-size: var(--text-4xl);
433
- --panel__body-line-height: var(--line-h-4xl)
434
- }
435
- }
436
- @media print {
437
- .ds-panel__body {
438
- --panel__body-font-size: var(--text-2xl);
439
- --panel__body-line-height: var(--line-h-2xl)
440
- }
441
- }
442
- .ds-phase-banner__content {
443
- --phase-banner__content-font-size: var(--text-base);
444
- }
445
- @media (min-width: 768px) {
446
- .ds-phase-banner__content {
447
- --phase-banner__content-font-size: var(--text-lg)
448
- }
449
- }
450
- .ds-radios__label {
451
- --radios__label-font-size: var(--text-base);
452
- }
453
- @media (min-width: 768px) {
454
- .ds-radios__label {
455
- --radios__label-font-size: var(--text-lg)
456
- }
457
- }
458
- .ds-summary-list {
459
- --summary-list-font-size: var(--text-base);
460
- }
461
- @media (min-width: 768px) {
462
- .ds-summary-list {
463
- --summary-list-font-size: var(--text-lg)
464
- }
465
- }
466
- .ds-heading-xl {
467
- --heading-xl-font-size: var(--text-3xl);
468
- --heading-xl-line-height: var(--line-h-3xl);
469
- --heading-xl-margin-bottom: 2rem;
470
- --heading-xl-font-weight: 700;
471
- --heading-xl-letter-spacing: var(--letter-spacing-normal);
472
- }
473
- @media (min-width: 768px) {
474
- .ds-heading-xl {
475
- --heading-xl-font-size: var(--text-5xl);
476
- --heading-xl-line-height: var(--line-h-5xl);
477
- --heading-xl-margin-bottom: 3rem
478
- }
479
- }
480
- .ds-heading-lg {
481
- --heading-lg-font-size: var(--text-2xl);
482
- --heading-lg-line-height: var(--line-h-2xl);
483
- --heading-lg-margin-bottom: 2rem;
484
- --heading-lg-font-weight: 700;
485
- --heading-lg-letter-spacing: var(--letter-spacing-normal);
486
- }
487
- @media (min-width: 768px) {
488
- .ds-heading-lg {
489
- --heading-lg-font-size: var(--text-4xl);
490
- --heading-lg-line-height: var(--line-h-4xl);
491
- --heading-lg-margin-bottom: 2.5rem
492
- }
493
- }
494
- .ds-heading-md {
495
- --heading-md-font-size: var(--text-xl);
496
- --heading-md-line-height: var(--line-h-xl);
497
- --heading-md-margin-bottom: 1.5rem;
498
- --heading-md-font-weight: 700;
499
- --heading-md-letter-spacing: var(--letter-spacing-normal);
500
- }
501
- @media (min-width: 768px) {
502
- .ds-heading-md {
503
- --heading-md-font-size: var(--text-2xl);
504
- --heading-md-line-height: var(--line-h-2xl);
505
- --heading-md-margin-bottom: 2rem
506
- }
507
- }
508
- .ds-heading-sm {
509
- --heading-sm-font-size: var(--text-base);
510
- --heading-sm-line-height: var(--line-h-base);
511
- --heading-sm-margin-bottom: 0.75rem;
512
- --heading-sm-font-weight: 700;
513
- --heading-sm-letter-spacing: var(--letter-spacing-normal);
514
- }
515
- @media (min-width: 768px) {
516
- .ds-heading-sm {
517
- --heading-sm-font-size: var(--text-lg);
518
- --heading-sm-line-height: var(--line-h-lg);
519
- --heading-sm-margin-bottom: 1.25rem
520
- }
521
- }
522
- .ds-heading-xs {
523
- --heading-xs-font-size: var(--text-sm);
524
- --heading-xs-line-height: var(--line-h-sm);
525
- --heading-xs-margin-bottom: 0.5rem;
526
- --heading-xs-font-weight: 700;
527
- --heading-xs-letter-spacing: var(--letter-spacing-normal);
528
- }
529
- @media (min-width: 768px) {
530
- .ds-heading-xs {
531
- --heading-xs-font-size: var(--text-base);
532
- --heading-xs-line-height: var(--line-h-base);
533
- --heading-xs-margin-bottom: 1rem
534
- }
535
- }
536
- .ds-caption-xl {
537
- --caption-xl-font-size: var(--text-xl);
538
- --caption-xl-line-height: var(--line-h-xl);
539
- --caption-xl-margin-bottom: 0.25rem;
540
- --caption-xl-color: var(--color-base-800);
541
- --caption-xl-font-weight: 400;
542
- --caption-xl-letter-spacing: var(--letter-spacing-normal);
543
- }
544
- @media (min-width: 768px) {
545
- .ds-caption-xl {
546
- --caption-xl-font-size: var(--text-2xl);
547
- --caption-xl-line-height: var(--line-h-2xl);
548
- --caption-xl-margin-bottom: 0.5rem
549
- }
550
- }
551
- .ds-caption-lg {
552
- --caption-lg-font-size: var(--text-lg);
553
- --caption-lg-line-height: var(--line-h-lg);
554
- --caption-lg-margin-bottom: 0rem;
555
- --caption-lg-color: var(--color-base-800);
556
- --caption-lg-font-weight: 400;
557
- --caption-lg-letter-spacing: var(--letter-spacing-normal);
558
- }
559
- @media (min-width: 768px) {
560
- .ds-caption-lg {
561
- --caption-lg-font-size: var(--text-xl);
562
- --caption-lg-line-height: var(--line-h-xl)
563
- }
564
- }
565
- .ds-caption-md {
566
- --caption-md-font-size: var(--text-base);
567
- --caption-md-line-height: var(--line-h-base);
568
- --caption-md-margin-bottom: 0rem;
569
- --caption-md-color: var(--color-base-800);
570
- --caption-md-font-weight: 400;
571
- --caption-md-letter-spacing: var(--letter-spacing-normal);
572
- }
573
- @media (min-width: 768px) {
574
- .ds-caption-md {
575
- --caption-md-font-size: var(--text-lg);
576
- --caption-md-line-height: var(--line-h-lg)
577
- }
578
- }
579
- .ds-body {
580
- --body-font-size: var(--text-base);
581
- --body-line-height: var(--line-h-base);
582
- --body-margin-bottom: 1rem;
583
- --body-color: var(--color-base-content);
584
- --body-letter-spacing: var(--letter-spacing-normal);
585
- }
586
- @media (min-width: 768px) {
587
- .ds-body {
588
- --body-font-size: var(--text-lg);
589
- --body-line-height: var(--line-h-lg);
590
- --body-margin-bottom: 2rem
591
- }
592
- }
593
- .ds-body--lg {
594
- --body--lg-font-size: var(--text-lg);
595
- --body--lg-line-height: var(--line-h-lg);
596
- }
597
- @media (min-width: 768px) {
598
- .ds-body--lg {
599
- --body--lg-font-size: var(--text-2xl);
600
- --body--lg-line-height: var(--line-h-2xl)
601
- }
602
- }
603
- .ds-body--sm {
604
- --body--sm-font-size: var(--text-sm);
605
- --body--sm-line-height: var(--line-h-sm);
606
- }
607
- @media (min-width: 768px) {
608
- .ds-body--sm {
609
- --body--sm-font-size: var(--text-base);
610
- --body--sm-line-height: var(--text-base)
611
- }
612
- }
613
- .ds-hint {
614
- --hint-font-size: var(--text-base);
615
- --hint-line-height: var(--line-h-base);
616
- --hint-margin-bottom: 1rem;
617
- --hint-color: var(--color-base-800);
618
- --hint-letter-spacing: var(--letter-spacing-normal);
619
- }
620
- @media (min-width: 768px) {
621
- .ds-hint {
622
- --hint-font-size: var(--text-lg);
623
- --hint-line-height: var(--line-h-lg)
624
- }
625
- }
626
- .ds-hint--lg {
627
- --hint--lg-font-size: var(--text-lg);
628
- --hint--lg-line-height: var(--line-h-lg);
629
- }
630
- @media (min-width: 768px) {
631
- .ds-hint--lg {
632
- --hint--lg-font-size: var(--text-2xl);
633
- --hint--lg-line-height: var(--line-h-2xl)
634
- }
635
- }
636
- .ds-hint--sm {
637
- --hint--sm-font-size: var(--text-sm);
638
- --hint--sm-line-height: var(--line-h-sm);
639
- }
640
- @media (min-width: 768px) {
641
- .ds-hint--sm {
642
- --hint--sm-font-size: var(--text-base);
643
- --hint--sm-line-height: var(--text-lg)
644
- }
645
- }
646
- .ds-link {
647
- --link-color: var(--color-link);
648
- --link-color-active: var(--color-link-active);
649
- --link-color-hover: var(--color-link-hover);
650
- --link-padding: 0px;
651
- --link-font-size: var(--text-base);
652
- --link-line-height: var(--line-h-base);
653
- --link-letter-spacing: var(--letter-spacing-normal);
654
- }
655
- @media (min-width: 768px) {
656
- .ds-link {
657
- --link-font-size: var(--text-lg);
658
- --link-line-height: var(--line-h-lg)
659
- }
660
- }
661
- .ds-back-link {
662
- --back-link-font-size: var(--text-base);
663
- --back-link-letter-spacing: var(--letter-spacing-normal);
664
- }
665
- @media (min-width: 768px) {
666
- .ds-back-link {
667
- --back-link-font-size: var(--text-lg)
668
- }
669
- }
670
- .ds-list {
671
- --list-font-size: var(--text-base);
672
- --list-line-height: var(--line-h-base);
673
- --list-letter-spacing: var(--letter-spacing-normal);
674
- }
675
- @media (min-width: 768px) {
676
- .ds-list {
677
- --list-font-size: var(--text-lg);
678
- --list-line-height: var(--line-h-lg)
679
- }
680
- }
681
-
682
- /* LAYOUT */
683
- .dark .ds-footer {
684
- --tw-border-opacity: 1;
685
- border-color: rgba(var(--color-tertiary-300-rgb), var(--tw-border-opacity));
686
- }
687
- .dark .ds-radios__input:focus {
688
- border-width: 2px;
689
- box-shadow:
690
- 0 0 0 4px var(--color-base-100),
691
- 0 0 0 7px var(--color-focus);
692
- }
693
- .dark .ds-radios__input:focus:before {
694
- top: 6px;
695
- left: 6px;
696
- }
697
- .dark .ds-footer__government-logo {
698
- display: none;
699
- }
700
- .dark .ds-footer__government-logo-inverted {
701
- display: block;
702
- }
703
- .dark .ds-image-logo-light {
704
- display: none;
705
- }
706
- .dark .ds-image-logo-dark {
707
- display: block;
708
- }
709
- .dark .ds-footer__link {
710
- padding: 0 2px;
711
- }
712
- .dark .ds-footer__link:focus {
713
- --tw-text-opacity: 1;
714
- color: rgba(var(--color-link-active-rgb), var(--tw-text-opacity));
715
- box-shadow:
716
- 0 -2px var(--color-focus),
717
- 0 4px var(--color-link-active);
718
- }
719
- .dark .ds-masthead.ds-masthead--primary {
720
- color: rgba(var(--color-base-content-rgb),var(--tw-text-opacity));
721
- --tw-text-opacity: 1;
722
- color: rgba(var(--color-base-content-rgb), var(--tw-text-opacity));
723
- }
724
- .dark .ds-masthead.ds-masthead--primary .ds-body {
725
- color: rgba(var(--color-base-content-rgb),var(--tw-text-opacity));
726
- --tw-text-opacity: 1;
727
- color: rgba(var(--color-base-content-rgb), var(--tw-text-opacity));
728
- }
729
- .dark .ds-masthead__body {
730
- color: rgba(var(--color-base-content-rgb),var(--tw-text-opacity));
731
- --tw-text-opacity: 1;
732
- color: rgba(var(--color-base-content-rgb), var(--tw-text-opacity));
733
- }
734
- .dark .ds-background-dark .ds-hint, .dark .ds-masthead.ds-masthead--primary .ds-hint {
735
- color: rgba(var(--color-base-content-rgb),var(--tw-text-opacity));
736
- --tw-text-opacity: 1;
737
- color: rgba(var(--color-base-content-rgb), var(--tw-text-opacity));
738
- }
739
- .dark .ds-background-dark .ds-btn, .dark .ds-masthead--primary .ds-btn {
740
- border-color: rgba(var(--color-base-content-rgb),var(--tw-border-opacity));
741
- --tw-border-opacity: 1;
742
- border-color: rgba(var(--color-base-content-rgb), var(--tw-border-opacity));
743
- }
744
- .dark .ds-background-dark .ds-btn:focus, .dark .ds-masthead--primary .ds-btn:focus {
745
- box-shadow:
746
- 0 0 0 6px var(--color-tertiary),
747
- 0 0 0 10px var(--color-focus);
748
- }
749
-
750
- /* FORM */
751
- .dark .ds-checkboxes__input:focus {
752
- box-shadow:
753
- 0 0 0 3px var(--color-base-100),
754
- 0 0 0 6px var(--color-focus);
755
- }
756
- .dark .ds-checkboxes__input:focus:before {
757
- border-width: 3px;
758
- }
759
- .dark .ds-input:focus,
760
- .dark .ds-select:focus,
761
- .dark .ds-textarea:focus,
762
- .dark
763
- .ds-autocomplete__multi-input-container.ds-autocomplete__multi-input-container--focused,
764
- .dark .ds-autocomplete__input.ds-autocomplete__input--focused {
765
- outline: 4px solid transparent;
766
- box-shadow:
767
- 0 0 0 3px var(--color-base-100),
768
- 0 0 0 6px var(--color-focus);
769
- }
770
-
771
- /* BUTTONS AND LINKS */
772
- .dark .ds-btn:focus, .dark .ds-btn[type="button"]:focus, .dark .ds-btn[type="reset"]:focus, .dark .ds-btn[type="submit"]:focus {
773
- box-shadow:
774
- 0 0 0 6px var(--color-base-100),
775
- 0 0 0 10px var(--color-focus);
776
- }
777
- .dark .ds-header .ds-dropdown__button.ds-link:focus, .dark .ds-admin-header .ds-dropdown__button.ds-link:focus {
778
- --tw-text-opacity: 1;
779
- color: rgba(var(--color-link-active-rgb), var(--tw-text-opacity));
780
- }
781
- .dark .ds-btn-secondary {
782
- color: rgba(var(--color-base-100-rgb),var(--tw-text-opacity));
783
- --tw-bg-opacity: 1;
784
- background-color: rgba(var(--color-base-800-rgb), var(--tw-bg-opacity));
785
- --tw-text-opacity: 1;
786
- color: rgba(var(--color-base-100-rgb), var(--tw-text-opacity));
787
- }
788
- .dark .ds-btn-secondary:hover {
789
- background-color: rgba(var(--color-base-700-rgb),var(--tw-bg-opacity));
790
- --tw-bg-opacity: 1;
791
- background-color: rgba(var(--color-base-700-rgb), var(--tw-bg-opacity));
792
- --tw-text-opacity: 1;
793
- color: rgba(var(--color-black-rgb), var(--tw-text-opacity));
794
- }
795
- .dark .ds-btn-secondary .ds-svg-icon {
796
- fill: var(--color-base-100);
797
- }
798
- .dark .ds-dropdown[open] .ds-dropdown__button.ds-btn-secondary {
799
- background-color: rgba(var(--color-base-700-rgb),var(--tw-bg-opacity));
800
- color: rgba(var(--color-white-rgb),var(--tw-text-opacity));
801
- --tw-bg-opacity: 1;
802
- background-color: rgba(var(--color-base-700-rgb), var(--tw-bg-opacity));
803
- --tw-text-opacity: 1;
804
- color: rgba(var(--color-white-rgb), var(--tw-text-opacity));
805
- }
806
-
807
- .dark .ds-link {
808
- padding: 0 2px;
809
- }
810
-
811
- .dark .ds-link:focus {
812
- box-shadow:
813
- 0 -2px var(--color-focus),
814
- 0 4px var(--color-link-active);
815
- }
816
- .dark .ds-background-dark .ds-link,
817
- .dark .ds-masthead.ds-masthead--primary .ds-link {
818
- color: rgba(var(--color-base-content-rgb),var(--tw-text-opacity));
819
- --tw-text-opacity: 1;
820
- color: rgba(var(--color-base-content-rgb), var(--tw-text-opacity));
821
- }
822
- .dark .ds-background-dark .ds-link:focus, .dark .ds-masthead.ds-masthead--primary .ds-link:focus {
823
- --tw-text-opacity: 1;
824
- color: rgba(var(--color-link-active-rgb), var(--tw-text-opacity));
825
- }
826
- .dark .ds-breadcrumbs__list-item::before {
827
- background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"> <path d="M8.5,2L6.1,4.3l7.6,7.7l-7.6,7.6L8.5,22l10-10L8.5,2z" style="fill:%23fff;"/></svg>');
828
- }
829
- .dark .ds-breadcrumbs__link,
830
- .dark .ds-back-link,
831
- .dark .ds-back-to-top-link,
832
- .dark .ds-details__summary {
833
- padding: 0 2px;
834
- }
835
- .dark .ds-breadcrumbs__link:focus, .dark .ds-back-link:focus, .dark .ds-back-to-top-link:focus, .dark .ds-details__summary:focus {
836
- --tw-text-opacity: 1;
837
- color: rgba(var(--color-link-active-rgb), var(--tw-text-opacity));
838
- box-shadow:
839
- 0 -2px var(--color-focus),
840
- 0 4px var(--color-link-active);
841
- }
842
- .dark .ds-back-link:focus .ds-svg-icon--caret,
843
- .dark .ds-back-to-top-link:focus .ds-svg-icon--arrow {
844
- fill: var(--color-link-active);
845
- }
846
-
847
- /* CORE COMPONENTS */
848
- .dark .ds-accordion .ds-accordion__section-button {
849
- padding: 0 1px;
850
- }
851
- .dark .ds-accordion .ds-accordion__section-button::after {
852
- padding: 0 1px;
853
- }
854
- .dark .ds-accordion .ds-accordion__section-summary:focus .ds-accordion__section-button {
855
- color: rgba(var(--color-base-content-invert-rgb),var(--tw-text-opacity));
856
- --tw-text-opacity: 1;
857
- color: rgba(var(--color-base-content-invert-rgb), var(--tw-text-opacity));
858
- }
859
- .dark .ds-accordion .ds-accordion__section-summary:focus .ds-accordion__section-button::after {
860
- color: rgba(var(--color-base-content-invert-rgb),var(--tw-text-opacity));
861
- --tw-text-opacity: 1;
862
- color: rgba(var(--color-base-content-invert-rgb), var(--tw-text-opacity));
863
- }
864
-
865
- .dark .ds-card.ds-card--border.ds-card--border-light {
866
- border-width: 0;
867
- background-color: rgba(var(--color-base-300-rgb),var(--tw-bg-opacity));
868
- border-width: 0px;
869
- --tw-bg-opacity: 1;
870
- background-color: rgba(var(--color-base-300-rgb), var(--tw-bg-opacity));
871
- }
872
- .dark .ds-card.ds-card--divider,
873
- .dark .ds-card.ds-card--border-top,
874
- .dark .ds-card.ds-card--border-light {
875
- border-color: rgba(var(--color-base-500-rgb),var(--tw-border-opacity));
876
- --tw-border-opacity: 1;
877
- border-color: rgba(var(--color-base-500-rgb), var(--tw-border-opacity));
878
- }
879
- .dark .ds-card.ds-card--cta .ds-card__body:after {
880
- background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' aria-hidden='true'> <path d='M8.5,2L6.1,4.3l7.6,7.7l-7.6,7.6L8.5,22l10-10L8.5,2z' style='fill:%23fff;' /> </svg>");
881
- }
882
- .dark .ds-section-break.ds-section-break--visible {
883
- border-color: rgba(var(--color-base-500-rgb),var(--tw-border-opacity));
884
- --tw-border-opacity: 1;
885
- border-color: rgba(var(--color-base-500-rgb), var(--tw-border-opacity));
886
- }
887
- .dark .ds-phase-banner__tag {
888
- color: rgba(var(--color-base-content-rgb),var(--tw-text-opacity));
889
- --tw-text-opacity: 1;
890
- color: rgba(var(--color-base-content-rgb), var(--tw-text-opacity));
891
- }
892
- .dark .ds-phase-banner-header .ds-phase-banner__message {
893
- color: rgba(var(--color-base-content-invert-rgb),var(--tw-text-opacity));
894
- --tw-text-opacity: 1;
895
- color: rgba(var(--color-base-content-invert-rgb), var(--tw-text-opacity));
896
- }
897
- .dark .ds-summary-list__row {
898
- border-color: rgba(var(--color-base-500-rgb),var(--tw-border-opacity));
899
- --tw-border-opacity: 1;
900
- border-color: rgba(var(--color-base-500-rgb), var(--tw-border-opacity));
901
- }
902
- @media (min-width: 640px) {
903
-
904
- .dark .ds-summary-list__key,
905
- .dark .ds-summary-list__value,
906
- .dark .ds-summary-list__actions {
907
- border-color: rgba(var(--color-base-500-rgb),var(--tw-border-opacity));
908
- --tw-border-opacity: 1;
909
- border-color: rgba(var(--color-base-500-rgb), var(--tw-border-opacity));
910
- }
911
- }
912
-
913
- .dark .ds-table-container.ds-table-container--border {
914
- border-color: rgba(var(--color-base-500-rgb),var(--tw-border-opacity));
915
- --tw-border-opacity: 1;
916
- border-color: rgba(var(--color-base-500-rgb), var(--tw-border-opacity));
917
- }
918
- .dark .ds-table.ds-table--vertical-lines .ds-table__cell,
919
- .dark .ds-table.ds-table--vertical-lines .ds-table__header,
920
- .dark .ds-table.ds-table--vertical-lines .ds-table__head {
921
- border-color: rgba(var(--color-base-500-rgb),var(--tw-border-opacity));
922
- --tw-border-opacity: 1;
923
- border-color: rgba(var(--color-base-500-rgb), var(--tw-border-opacity));
924
- }
925
- @supports (-moz-appearance: none) {
926
- .dark .ds-table.ds-table--vertical-lines .ds-table__header:last-child, .dark .ds-table.ds-table--vertical-lines .ds-table__cell:last-child {
927
- border-color: rgba(var(--color-base-500-rgb),var(--tw-border-opacity)) !important;
928
- --tw-border-opacity: 1 !important;
929
- border-color: rgba(var(--color-base-500-rgb), var(--tw-border-opacity)) !important;
930
- }
931
- }
932
- .dark .ds-table.ds-table--vertical-lines.ds-table--light .ds-table__body .ds-table__header {
933
- border-color: rgba(var(--color-base-500-rgb),var(--tw-border-opacity)) !important;
934
- --tw-border-opacity: 1 !important;
935
- border-color: rgba(var(--color-base-500-rgb), var(--tw-border-opacity)) !important;
936
- }
937
- @media (min-width: 768px) {
938
- .dark .ds-table.ds-table--stacked-md .ds-table__header:last-child, .dark .ds-table.ds-table--stacked-md .ds-table__cell:last-child {
939
- border-bottom-color: rgb(var(--color-base-500-rgb));
940
- }
941
- }
942
- .dark .ds-table__header,
943
- .dark .ds-table__cell {
944
- border-color: rgba(var(--color-base-500-rgb),var(--tw-border-opacity));
945
- --tw-border-opacity: 1;
946
- border-color: rgba(var(--color-base-500-rgb), var(--tw-border-opacity));
947
- }
948
- .dark .ds-table.ds-table--dark .ds-table__header {
949
- color: rgba(var(--color-base-content-rgb),var(--tw-text-opacity));
950
- --tw-text-opacity: 1;
951
- color: rgba(var(--color-base-content-rgb), var(--tw-text-opacity));
952
- }
953
- .dark .ds-tabs .ds-tabs__list .ds-tabs__tab {
954
- padding: 0 2px;
955
- }
956
- .dark .ds-tabs .ds-tabs__list .ds-tabs__tab:focus {
957
- --tw-text-opacity: 1;
958
- color: rgba(var(--color-link-active-rgb), var(--tw-text-opacity));
959
- }
960
- .dark .ds-step-nav__accordion__summary:focus .ds-step-nav__accordion__heading__title {
961
- --tw-text-opacity: 1;
962
- color: rgba(var(--color-link-active-rgb), var(--tw-text-opacity));
963
- padding: 0 2px;
964
- box-shadow:
965
- 0 -2px var(--color-focus),
966
- 0 4px var(--color-link-active);
967
- }
968
- .dark .ds-step-nav__accordion__summary:focus .ds-step-nav__accordion__closed,
969
- .dark .ds-step-nav__accordion__summary:focus .ds-step-nav__accordion__opened {
970
- --tw-text-opacity: 1;
971
- color: rgba(var(--color-link-active-rgb), var(--tw-text-opacity));
972
- padding: 0 2px;
973
- }
974
- .dark .ds-nav__list-item:focus {
975
- --tw-text-opacity: 1;
976
- color: rgba(var(--color-link-active-rgb), var(--tw-text-opacity));
977
- box-shadow:
978
- 0 -2px var(--color-focus),
979
- 0 4px var(--color-link-active);
980
- }
981
- .dark .ds-task-list__content__tag.ds-task-list__content__tag--primary {
982
- color: rgba(var(--color-base-content-rgb),var(--tw-text-opacity));
983
- --tw-text-opacity: 1;
984
- color: rgba(var(--color-base-content-rgb), var(--tw-text-opacity));
985
- }
986
- .dark .ds-notification-banner__link {
987
- padding: 0 2px;
988
- }
989
- .dark .ds-notification-banner__link:focus {
990
- --tw-text-opacity: 1;
991
- color: rgba(var(--color-link-active-rgb), var(--tw-text-opacity));
992
- box-shadow:
993
- 0 -2px var(--color-focus),
994
- 0 4px var(--color-link-active);
995
- }
996
- .dark .ds-chip:focus {
997
- outline: 2px solid var(--color-focus);
998
- outline-offset: 3px;
999
- box-shadow: none;
1000
- }
1001
- @media (min-width: 0px) {
1002
-
1003
- .dark .ds-nav__list-item-link:focus, .dark .ds-nav__list-item-btn:focus {
1004
- --tw-text-opacity: 1 !important;
1005
- color: rgba(var(--color-link-active-rgb), var(--tw-text-opacity)) !important;
1006
- }
1007
- }
1008
- .dark .ds-nav__list-item-link:focus > .ds-svg-icon, .dark .ds-nav__list-item-btn:focus > .ds-svg-icon {
1009
- fill: var(--color-link-active) !important;
1010
- }
1011
- .dark .ds-code.ds-code--name {
1012
- --tw-text-opacity: 1 !important;
1013
- color: rgba(var(--color-secondary-100-rgb), var(--tw-text-opacity)) !important;
1014
- }