@utrecht/design-tokens 2.3.0 → 2.5.0
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.
- package/CHANGELOG.md +21 -0
- package/dist/_mixin-theme.scss +165 -76
- package/dist/_mixin.scss +165 -76
- package/dist/_variables.scss +165 -76
- package/dist/dark/_mixin-theme.scss +165 -76
- package/dist/dark/_mixin.scss +165 -76
- package/dist/dark/_variables.scss +165 -76
- package/dist/dark/index.cjs +104 -15
- package/dist/dark/index.css +165 -76
- package/dist/dark/index.d.ts +97 -8
- package/dist/dark/index.flat.json +102 -13
- package/dist/dark/index.json +11111 -9439
- package/dist/dark/index.mjs +103 -14
- package/dist/dark/index.tokens.json +369 -248
- package/dist/dark/list.json +11111 -9439
- package/dist/dark/list.mjs +11111 -9439
- package/dist/dark/property.css +19 -7
- package/dist/dark/root.css +164 -75
- package/dist/dark/theme-prince-xml.css +165 -76
- package/dist/dark/theme.css +164 -75
- package/dist/dark/tokens.cjs +2051 -347
- package/dist/dark/tokens.d.ts +255 -126
- package/dist/dark/tokens.json +2051 -347
- package/dist/dark/variables.cjs +104 -15
- package/dist/dark/variables.css +164 -75
- package/dist/dark/variables.d.ts +97 -8
- package/dist/dark/variables.json +102 -13
- package/dist/dark/variables.less +165 -76
- package/dist/dark/variables.mjs +103 -14
- package/dist/index.cjs +104 -15
- package/dist/index.css +330 -152
- package/dist/index.d.ts +97 -8
- package/dist/index.flat.json +102 -13
- package/dist/index.json +2175 -503
- package/dist/index.mjs +103 -14
- package/dist/index.tokens.json +369 -248
- package/dist/list.json +2175 -503
- package/dist/list.mjs +2175 -503
- package/dist/property.css +19 -7
- package/dist/root.css +164 -75
- package/dist/theme-prince-xml.css +165 -76
- package/dist/theme.css +164 -75
- package/dist/tokens.cjs +2051 -347
- package/dist/tokens.d.ts +255 -126
- package/dist/tokens.json +2051 -347
- package/dist/variables.cjs +104 -15
- package/dist/variables.css +164 -75
- package/dist/variables.d.ts +97 -8
- package/dist/variables.json +102 -13
- package/dist/variables.less +165 -76
- package/dist/variables.mjs +103 -14
- package/package.json +1 -1
- package/src/component/nl/code-block.tokens.json +13 -0
- package/src/component/nl/code.tokens.json +11 -0
- package/src/component/nl/data-badge.tokens.json +22 -0
- package/src/component/nl/heading.tokens.json +48 -0
- package/src/component/nl/mark.tokens.json +8 -0
- package/src/component/nl/number-badge.tokens.json +23 -0
- package/src/component/nl/paragraph.tokens.json +20 -0
- package/src/component/nl/skip-link.tokens.json +16 -0
- package/src/component/signalen/signalen.tokens.json +17 -0
- package/src/component/utrecht/badge.tokens.json +5 -5
- package/src/component/utrecht/body.tokens.json +11 -0
- package/src/component/utrecht/code-block.tokens.json +9 -9
- package/src/component/utrecht/heading-1.tokens.json +4 -4
- package/src/component/utrecht/heading-2.tokens.json +4 -4
- package/src/component/utrecht/heading-3.tokens.json +4 -4
- package/src/component/utrecht/heading-4.tokens.json +4 -4
- package/src/component/utrecht/heading-5.tokens.json +4 -4
- package/src/component/utrecht/heading-6.tokens.json +4 -4
- package/src/component/utrecht/link-list.tokens.json +3 -0
- package/src/component/utrecht/mark.tokens.json +2 -2
- package/src/component/utrecht/nav-bar.tokens.json +0 -2
- package/src/component/utrecht/number-badge.tokens.json +6 -6
- package/src/component/utrecht/page-body.tokens.json +19 -0
- package/src/component/utrecht/page-footer.tokens.json +6 -4
- package/src/component/utrecht/page-header.tokens.json +14 -4
- package/src/component/utrecht/page.tokens.json +2 -2
- package/src/component/utrecht/paragraph.tokens.json +8 -8
- package/src/component/utrecht/root.tokens.json +8 -0
- package/src/component/utrecht/skip-link.tokens.json +10 -10
- package/project.json +0 -25
- package/src/component/utrecht/badge-data.tokens.json +0 -8
package/dist/theme.css
CHANGED
|
@@ -137,19 +137,35 @@
|
|
|
137
137
|
--utrecht-pagination-page-link-background-color: transparent;
|
|
138
138
|
--utrecht-pagination-margin-block-start: 0;
|
|
139
139
|
--utrecht-pagination-margin-block-end: 1em;
|
|
140
|
-
--utrecht-page-padding-inline-start:
|
|
141
|
-
--utrecht-page-padding-inline-end:
|
|
140
|
+
--utrecht-page-padding-inline-start: 0;
|
|
141
|
+
--utrecht-page-padding-inline-end: 0;
|
|
142
142
|
--utrecht-page-padding-block-start: 1.8em;
|
|
143
143
|
--utrecht-page-padding-block-end: 1em;
|
|
144
144
|
--utrecht-page-max-inline-size: 1184px;
|
|
145
145
|
--utrecht-page-margin-inline-start: 2em;
|
|
146
146
|
--utrecht-page-margin-inline-end: 2em;
|
|
147
|
-
--utrecht-page-header-padding-inline-start:
|
|
148
|
-
--utrecht-page-header-padding-inline-end:
|
|
149
|
-
--utrecht-page-header-padding-block-start:
|
|
150
|
-
--utrecht-page-header-padding-block-end:
|
|
147
|
+
--utrecht-page-header-padding-inline-start: 0;
|
|
148
|
+
--utrecht-page-header-padding-inline-end: 0;
|
|
149
|
+
--utrecht-page-header-padding-block-start: 0;
|
|
150
|
+
--utrecht-page-header-padding-block-end: 0;
|
|
151
|
+
--utrecht-page-header-content-padding-inline-start: 2em;
|
|
152
|
+
--utrecht-page-header-content-padding-inline-end: 2.4em;
|
|
153
|
+
--utrecht-page-header-content-padding-inline: 2em;
|
|
154
|
+
--utrecht-page-header-content-padding-block-start: 1.8em;
|
|
155
|
+
--utrecht-page-header-content-padding-block-end: 1em;
|
|
156
|
+
--utrecht-page-header-content-max-inline-size: 1184px;
|
|
157
|
+
--utrecht-page-footer-content-max-inline-size: 1184px;
|
|
151
158
|
--utrecht-page-content-padding-block-start: 2em;
|
|
152
159
|
--utrecht-page-content-padding-block-end: 2em;
|
|
160
|
+
--utrecht-page-body-padding-inline-start: 0;
|
|
161
|
+
--utrecht-page-body-padding-inline-end: 0;
|
|
162
|
+
--utrecht-page-body-padding-block-start: 0;
|
|
163
|
+
--utrecht-page-body-padding-block-end: 0;
|
|
164
|
+
--utrecht-page-body-content-padding-inline-start: 2em;
|
|
165
|
+
--utrecht-page-body-content-padding-inline-end: 2.4em;
|
|
166
|
+
--utrecht-page-body-content-padding-block-start: 0;
|
|
167
|
+
--utrecht-page-body-content-padding-block-end: 1em;
|
|
168
|
+
--utrecht-page-body-content-max-inline-size: 1184px;
|
|
153
169
|
--utrecht-ordered-list-padding-inline-start: 28.8px;
|
|
154
170
|
--utrecht-ordered-list-margin-block-start: 0;
|
|
155
171
|
--utrecht-ordered-list-margin-block-end: 1em;
|
|
@@ -158,8 +174,6 @@
|
|
|
158
174
|
--utrecht-ordered-list-item-margin-block-end: 0.25em;
|
|
159
175
|
--utrecht-number-data-positive-color: green;
|
|
160
176
|
--utrecht-number-data-negative-color: red;
|
|
161
|
-
--utrecht-number-badge-padding-inline: 1ex; /* Default inline padding color for badge components */
|
|
162
|
-
--utrecht-number-badge-padding-block: 1ex; /* Default block padding for badge components */
|
|
163
177
|
--utrecht-mapcontrolbutton-margin-inline-start: 0;
|
|
164
178
|
--utrecht-mapcontrolbutton-margin-inline-end: 0;
|
|
165
179
|
--utrecht-mapcontrolbutton-focus-text-decoration: none;
|
|
@@ -184,6 +198,7 @@
|
|
|
184
198
|
--utrecht-link-social-border-width: 2px;
|
|
185
199
|
--utrecht-link-list-link-text-decoration: none;
|
|
186
200
|
--utrecht-link-list-icon-size: 14px;
|
|
201
|
+
--utrecht-link-list-icon-inset-block-start: 0.15em;
|
|
187
202
|
--utrecht-link-icon-size: 1.2em;
|
|
188
203
|
--utrecht-link-hover-text-decoration-thickness: 3px;
|
|
189
204
|
--utrecht-link-hover-text-decoration: underline;
|
|
@@ -292,10 +307,6 @@
|
|
|
292
307
|
--utrecht-color-blue-30: hsl(211 60% 30%); /* Deze kleur gebruiken we niet (interaction active) */
|
|
293
308
|
--utrecht-color-blue-20: hsl(211 60% 20%); /* basis donkerblauw (OS focus) */
|
|
294
309
|
--utrecht-color-black: hsl(0 0% 0%);
|
|
295
|
-
--utrecht-code-block-padding-inline-start: 20px;
|
|
296
|
-
--utrecht-code-block-padding-inline-end: 20px;
|
|
297
|
-
--utrecht-code-block-padding-block-start: 20px;
|
|
298
|
-
--utrecht-code-block-padding-block-end: 20px;
|
|
299
310
|
--utrecht-checkbox-size: 24px;
|
|
300
311
|
--utrecht-checkbox-margin-block-start: 0;
|
|
301
312
|
--utrecht-checkbox-focus-border-width: 2px;
|
|
@@ -351,13 +362,13 @@
|
|
|
351
362
|
--utrecht-border-radius-none: 0;
|
|
352
363
|
--utrecht-border-radius-md: 4px;
|
|
353
364
|
--utrecht-border-radius-lg: 8px;
|
|
365
|
+
--utrecht-body-line-height: 1.4;
|
|
354
366
|
--utrecht-blockquote-margin-inline-start: 1.6em;
|
|
355
367
|
--utrecht-blockquote-margin-inline-end: 1.6em;
|
|
356
368
|
--utrecht-blockquote-margin-block-start: 1.6em;
|
|
357
369
|
--utrecht-blockquote-margin-block-end: 1.6em;
|
|
358
370
|
--utrecht-badge-counter-padding-inline: 1ex; /* Default inline padding color for badge components */
|
|
359
371
|
--utrecht-badge-counter-padding-block: 1ex; /* Default block padding for badge components */
|
|
360
|
-
--utrecht-badge-border-radius: 0; /* Default corner radius for badge components */
|
|
361
372
|
--utrecht-backdrop-reduced-transparency-opacity: 0.98;
|
|
362
373
|
--utrecht-backdrop-opacity: 0.8;
|
|
363
374
|
--utrecht-backdrop-fade-in-animation-duration: 400ms;
|
|
@@ -377,7 +388,14 @@
|
|
|
377
388
|
--utrecht-accordion-button-icon-size: 24px;
|
|
378
389
|
--utrecht-accordion-button-hover-background-color: inherit;
|
|
379
390
|
--utrecht-accordion-button-border-width: 0;
|
|
391
|
+
--signalen-progress-bar-border-radius: 4px;
|
|
380
392
|
--of-progress-indicator-mobile-box-shadow: 0px 0px 2px 0px rgba(0 0 0 / 20%);
|
|
393
|
+
--nl-number-badge-padding-inline: 1ex;
|
|
394
|
+
--nl-number-badge-padding-block: 1ex;
|
|
395
|
+
--nl-data-badge-border-radius: 0;
|
|
396
|
+
--nl-code-block-padding-inline: 20px;
|
|
397
|
+
--nl-code-block-padding-block: 20px;
|
|
398
|
+
--nl-code-block-font-family: "Monaco";
|
|
381
399
|
--denhaag-process-steps-sub-step-marker-size: 12px;
|
|
382
400
|
--denhaag-process-steps-step-marker-size: 28px;
|
|
383
401
|
--utrecht-unordered-list-marker-color: var(--utrecht-color-red-40);
|
|
@@ -430,8 +448,6 @@
|
|
|
430
448
|
--utrecht-spotlight-section-error-background-color: var(--utrecht-color-red-95);
|
|
431
449
|
--utrecht-spotlight-section-color: var(--utrecht-color-black);
|
|
432
450
|
--utrecht-spotlight-section-background-color: var(--utrecht-color-grey-90);
|
|
433
|
-
--utrecht-skip-link-text-decoration: var(--utrecht-link-text-decoration);
|
|
434
|
-
--utrecht-skip-link-focus-visible-text-decoration: var(--utrecht-link-focus-visible-text-decoration);
|
|
435
451
|
--utrecht-sidenav-link-hover-color: var(--utrecht-color-blue-40);
|
|
436
452
|
--utrecht-sidenav-link-color: var(--utrecht-color-blue-40);
|
|
437
453
|
--utrecht-sidenav-item-marker-hover-color: var(--utrecht-color-blue-50);
|
|
@@ -464,6 +480,8 @@
|
|
|
464
480
|
--utrecht-search-bar-button-color: var(--utrecht-color-white);
|
|
465
481
|
--utrecht-search-bar-button-border-color: var(--utrecht-color-red-40);
|
|
466
482
|
--utrecht-search-bar-button-background-color: var(--utrecht-color-red-40);
|
|
483
|
+
--utrecht-root-color: var(--utrecht-color-grey-10);
|
|
484
|
+
--utrecht-root-background-color: var(--utrecht-color-grey-95);
|
|
467
485
|
--utrecht-rich-text-stranger-margin-block-end: var(--utrecht-space-block-2xl);
|
|
468
486
|
--utrecht-rich-text-friend-margin-block-end: var(--utrecht-space-block-xs);
|
|
469
487
|
--utrecht-rich-text-best-friend-margin-block-end: var(--utrecht-space-block-2xs);
|
|
@@ -486,13 +504,6 @@
|
|
|
486
504
|
--utrecht-pre-heading-font-size: var(--utrecht-typography-scale-md-font-size);
|
|
487
505
|
--utrecht-paragraph-small-font-size: var(--utrecht-typography-scale-sm-font-size);
|
|
488
506
|
--utrecht-paragraph-margin-block-start: var(--utrecht-space-block-md);
|
|
489
|
-
--utrecht-paragraph-line-height: var(--utrecht-typography-line-height-md);
|
|
490
|
-
--utrecht-paragraph-lead-line-height: var(--utrecht-typography-line-height-md);
|
|
491
|
-
--utrecht-paragraph-lead-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
|
|
492
|
-
--utrecht-paragraph-lead-font-size: var(--utrecht-typography-scale-xl-font-size);
|
|
493
|
-
--utrecht-paragraph-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
|
|
494
|
-
--utrecht-paragraph-font-size: var(--utrecht-typography-scale-md-font-size);
|
|
495
|
-
--utrecht-paragraph-font-family: var(--utrecht-typography-sans-serif-font-family);
|
|
496
507
|
--utrecht-pagination-relative-link-hover-color: var(--utrecht-color-white);
|
|
497
508
|
--utrecht-pagination-relative-link-hover-border-color: var(--utrecht-color-blue-35);
|
|
498
509
|
--utrecht-pagination-relative-link-hover-background-color: var(--utrecht-color-blue-35);
|
|
@@ -509,29 +520,27 @@
|
|
|
509
520
|
--utrecht-pagination-page-link-current-background-color: var(--utrecht-color-blue-35);
|
|
510
521
|
--utrecht-pagination-page-link-color: var(--utrecht-color-blue-35);
|
|
511
522
|
--utrecht-pagination-font-size: var(--utrecht-typography-scale-sm-font-size);
|
|
512
|
-
--utrecht-page-
|
|
513
|
-
--utrecht-page-
|
|
514
|
-
--utrecht-page-footer-padding-
|
|
515
|
-
--utrecht-page-footer-padding-block-
|
|
523
|
+
--utrecht-page-header-content-color: var(--utrecht-color-black);
|
|
524
|
+
--utrecht-page-header-content-background-color: var(--utrecht-color-white);
|
|
525
|
+
--utrecht-page-footer-content-padding-inline: var(--utrecht-space-inline-2xl);
|
|
526
|
+
--utrecht-page-footer-content-padding-block-start: var(--utrecht-space-block-3xl);
|
|
527
|
+
--utrecht-page-footer-content-padding-block-end: var(--utrecht-space-block-3xl);
|
|
516
528
|
--utrecht-page-footer-color: var(--utrecht-color-white);
|
|
517
529
|
--utrecht-page-footer-background-image: linear-gradient(45deg, var(--utrecht-color-red-40), var(--utrecht-color-red-40) 50%, #d63433 50%);;
|
|
518
530
|
--utrecht-page-footer-background-color: var(--utrecht-color-red-40);
|
|
519
531
|
--utrecht-page-color: var(--utrecht-color-black);
|
|
532
|
+
--utrecht-page-body-content-color: var(--utrecht-color-black);
|
|
533
|
+
--utrecht-page-body-content-background-color: var(--utrecht-color-white);
|
|
520
534
|
--utrecht-page-background-color: var(--utrecht-color-white);
|
|
521
|
-
--utrecht-number-badge-
|
|
522
|
-
--utrecht-number-badge-
|
|
523
|
-
--utrecht-number-badge-background-color: var(--utrecht-color-red-40);
|
|
535
|
+
--utrecht-number-badge-padding-inline: var(--nl-number-badge-padding-inline); /* Default inline padding color for badge components */
|
|
536
|
+
--utrecht-number-badge-padding-block: var(--nl-number-badge-padding-block); /* Default block padding for badge components */
|
|
524
537
|
--utrecht-nav-bar-link-padding-inline-start: var(--utrecht-space-inline-md);
|
|
525
538
|
--utrecht-nav-bar-link-padding-inline-end: var(--utrecht-space-inline-md);
|
|
526
539
|
--utrecht-nav-bar-link-padding-block-start: var(--utrecht-space-block-xs);
|
|
527
540
|
--utrecht-nav-bar-link-padding-block-end: var(--utrecht-space-block-xs);
|
|
528
541
|
--utrecht-nav-bar-content-max-inline-size: var(--utrecht-page-max-inline-size);
|
|
529
|
-
--utrecht-nav-bar-color: var(--utrecht-color-black);
|
|
530
|
-
--utrecht-nav-bar-background-color: var(--utrecht-color-white);
|
|
531
542
|
--utrecht-menulijst-item-hover-color: var(--utrecht-color-blue-40);
|
|
532
543
|
--utrecht-menulijst-item-color: var(--utrecht-color-blue-35);
|
|
533
|
-
--utrecht-mark-color: var(--utrecht-color-black);
|
|
534
|
-
--utrecht-mark-background-color: var(--utrecht-color-yellow-60);
|
|
535
544
|
--utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
|
|
536
545
|
--utrecht-mapcontrolbutton-padding-inline-end: var(--utrecht-space-inline-2xs);
|
|
537
546
|
--utrecht-mapcontrolbutton-padding-block-start: var(--utrecht-space-block-2xs);
|
|
@@ -588,30 +597,6 @@
|
|
|
588
597
|
--utrecht-index-char-nav-link-current-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
|
|
589
598
|
--utrecht-index-char-nav-gap: var(--utrecht-space-column-sm);
|
|
590
599
|
--utrecht-heading-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
|
|
591
|
-
--utrecht-heading-6-line-height: var(--utrecht-typography-line-height-md);
|
|
592
|
-
--utrecht-heading-6-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
|
|
593
|
-
--utrecht-heading-6-font-size: var(--utrecht-typography-scale-sm-font-size);
|
|
594
|
-
--utrecht-heading-6-font-family: var(--utrecht-typography-sans-serif-font-family);
|
|
595
|
-
--utrecht-heading-5-line-height: var(--utrecht-typography-line-height-md);
|
|
596
|
-
--utrecht-heading-5-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
|
|
597
|
-
--utrecht-heading-5-font-size: var(--utrecht-typography-scale-sm-font-size);
|
|
598
|
-
--utrecht-heading-5-font-family: var(--utrecht-typography-sans-serif-font-family);
|
|
599
|
-
--utrecht-heading-4-line-height: var(--utrecht-typography-line-height-md);
|
|
600
|
-
--utrecht-heading-4-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
|
|
601
|
-
--utrecht-heading-4-font-size: var(--utrecht-typography-scale-lg-font-size);
|
|
602
|
-
--utrecht-heading-4-font-family: var(--utrecht-typography-sans-serif-font-family);
|
|
603
|
-
--utrecht-heading-3-line-height: var(--utrecht-typography-line-height-sm);
|
|
604
|
-
--utrecht-heading-3-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
|
|
605
|
-
--utrecht-heading-3-font-size: var(--utrecht-typography-scale-xl-font-size);
|
|
606
|
-
--utrecht-heading-3-font-family: var(--utrecht-typography-sans-serif-font-family);
|
|
607
|
-
--utrecht-heading-2-line-height: var(--utrecht-typography-line-height-sm);
|
|
608
|
-
--utrecht-heading-2-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
|
|
609
|
-
--utrecht-heading-2-font-size: var(--utrecht-typography-scale-xl-font-size);
|
|
610
|
-
--utrecht-heading-2-font-family: var(--utrecht-typography-sans-serif-font-family);
|
|
611
|
-
--utrecht-heading-1-line-height: var(--utrecht-typography-line-height-sm);
|
|
612
|
-
--utrecht-heading-1-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
|
|
613
|
-
--utrecht-heading-1-font-size: var(--utrecht-typography-scale-4xl-font-size);
|
|
614
|
-
--utrecht-heading-1-font-family: var(--utrecht-typography-sans-serif-font-family);
|
|
615
600
|
--utrecht-form-toggle-track-disabled-background-color: var(--utrecht-color-grey-90);
|
|
616
601
|
--utrecht-form-toggle-track-border-radius: var(--utrecht-form-toggle-border-radius);
|
|
617
602
|
--utrecht-form-toggle-thumb-disabled-background-color: var(--utrecht-color-white);
|
|
@@ -688,12 +673,13 @@
|
|
|
688
673
|
--utrecht-data-list-item-key-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
|
|
689
674
|
--utrecht-column-layout-gap: var(--utrecht-space-column-md);
|
|
690
675
|
--utrecht-column-layout-column-rule-color: var(--utrecht-color-grey-80);
|
|
676
|
+
--utrecht-code-block-padding-inline-start: var(--nl-code-block-padding-inline);
|
|
677
|
+
--utrecht-code-block-padding-inline-end: var(--nl-code-block-padding-inline);
|
|
678
|
+
--utrecht-code-block-padding-block-start: var(--nl-code-block-padding-block);
|
|
679
|
+
--utrecht-code-block-padding-block-end: var(--nl-code-block-padding-block);
|
|
691
680
|
--utrecht-code-block-margin-block-start: var(--utrecht-space-block-lg);
|
|
692
681
|
--utrecht-code-block-margin-block-end: var(--utrecht-space-block-lg);
|
|
693
|
-
--utrecht-code-block-
|
|
694
|
-
--utrecht-code-block-font-size: var(--utrecht-typography-scale-md-font-size);
|
|
695
|
-
--utrecht-code-block-color: var(--utrecht-color-black);
|
|
696
|
-
--utrecht-code-block-background-color: var(--utrecht-color-grey-95);
|
|
682
|
+
--utrecht-code-block-font-family: var(--nl-code-block-font-family);
|
|
697
683
|
--utrecht-checkbox-indeterminate-background-color: var(--utrecht-color-blue-40);
|
|
698
684
|
--utrecht-checkbox-disabled-border-color: var(--utrecht-color-grey-80);
|
|
699
685
|
--utrecht-checkbox-disabled-background-color: var(--utrecht-color-grey-80);
|
|
@@ -824,19 +810,20 @@
|
|
|
824
810
|
--utrecht-breadcrumb-nav-arrows-link-focus-color: var(--utrecht-color-black);
|
|
825
811
|
--utrecht-breadcrumb-nav-arrows-link-color: var(--utrecht-color-black);
|
|
826
812
|
--utrecht-breadcrumb-nav-arrows-link-background-color: var(--utrecht-color-grey-90);
|
|
813
|
+
--utrecht-body-font-size: var(--utrecht-typography-scale-md-font-size);
|
|
814
|
+
--utrecht-body-font-family: var(--utrecht-typography-sans-serif-font-family);
|
|
815
|
+
--utrecht-body-color: var(--utrecht-color-black);
|
|
816
|
+
--utrecht-body-background-color: var(--utrecht-color-white);
|
|
827
817
|
--utrecht-blockquote-content-font-size: var(--utrecht-typography-scale-lg-font-size);
|
|
828
818
|
--utrecht-blockquote-content-color: var(--utrecht-color-red-40);
|
|
829
819
|
--utrecht-blockquote-caption-font-size: var(--utrecht-typography-scale-sm-font-size);
|
|
830
|
-
--utrecht-badge-padding-inline: var(--utrecht-space-inline-sm); /* Default inline padding color for badge components */
|
|
831
|
-
--utrecht-badge-padding-block: var(--utrecht-space-block-xs); /* Default block padding for badge components */
|
|
832
820
|
--utrecht-badge-list-item-margin-inline: var(--utrecht-space-block-sm);
|
|
833
821
|
--utrecht-badge-list-item-margin-block: var(--utrecht-space-block-xs);
|
|
834
822
|
--utrecht-badge-font-style: var(--utrecht-typography-font-style-normal);
|
|
835
823
|
--utrecht-badge-counter-font-size: var(--utrecht-typography-scale-md-font-size);
|
|
836
824
|
--utrecht-badge-counter-color: var(--utrecht-color-white); /* Default text color for badge components */
|
|
837
825
|
--utrecht-badge-counter-background-color: var(--utrecht-color-red-40); /* Default background color for badge components */
|
|
838
|
-
--utrecht-badge-
|
|
839
|
-
--utrecht-badge-background-color: var(--utrecht-color-grey-30); /* Default background color for badge components */
|
|
826
|
+
--utrecht-badge-border-radius: var(--nl-data-badge-border-radius); /* Default corner radius for badge components */
|
|
840
827
|
--utrecht-backdrop-color: var(--utrecht-color-black);
|
|
841
828
|
--utrecht-backdrop-background-color: var(--utrecht-color-white);
|
|
842
829
|
--utrecht-alert-warning-color: var(--utrecht-color-black);
|
|
@@ -883,6 +870,53 @@
|
|
|
883
870
|
--utrecht-accordion-button-active-color: var(--utrecht-color-grey-10);
|
|
884
871
|
--utrecht-accordion-button-active-border-color: var(--utrecht-color-grey-95);
|
|
885
872
|
--utrecht-accordion-button-active-background-color: var(--utrecht-color-grey-80);
|
|
873
|
+
--nl-skip-link-text-decoration: var(--utrecht-link-text-decoration);
|
|
874
|
+
--nl-skip-link-focus-visible-text-decoration: var(--utrecht-link-focus-visible-text-decoration);
|
|
875
|
+
--nl-paragraph-small-font-size: var(--utrecht-typography-scale-sm-font-size);
|
|
876
|
+
--nl-paragraph-line-height: var(--utrecht-typography-line-height-md);
|
|
877
|
+
--nl-paragraph-lead-line-height: var(--utrecht-typography-line-height-md);
|
|
878
|
+
--nl-paragraph-lead-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
|
|
879
|
+
--nl-paragraph-lead-font-size: var(--utrecht-typography-scale-xl-font-size);
|
|
880
|
+
--nl-paragraph-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
|
|
881
|
+
--nl-paragraph-font-size: var(--utrecht-typography-scale-md-font-size);
|
|
882
|
+
--nl-paragraph-font-family: var(--utrecht-typography-sans-serif-font-family);
|
|
883
|
+
--nl-number-badge-font-size: var(--utrecht-typography-scale-md-font-size);
|
|
884
|
+
--nl-number-badge-color: var(--utrecht-color-white);
|
|
885
|
+
--nl-number-badge-background-color: var(--utrecht-color-red-40);
|
|
886
|
+
--nl-mark-color: var(--utrecht-color-black);
|
|
887
|
+
--nl-mark-background-color: var(--utrecht-color-yellow-60);
|
|
888
|
+
--nl-heading-level-6-line-height: var(--utrecht-typography-line-height-md);
|
|
889
|
+
--nl-heading-level-6-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
|
|
890
|
+
--nl-heading-level-6-font-size: var(--utrecht-typography-scale-sm-font-size);
|
|
891
|
+
--nl-heading-level-6-font-family: var(--utrecht-typography-sans-serif-font-family);
|
|
892
|
+
--nl-heading-level-5-line-height: var(--utrecht-typography-line-height-md);
|
|
893
|
+
--nl-heading-level-5-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
|
|
894
|
+
--nl-heading-level-5-font-size: var(--utrecht-typography-scale-sm-font-size);
|
|
895
|
+
--nl-heading-level-5-font-family: var(--utrecht-typography-sans-serif-font-family);
|
|
896
|
+
--nl-heading-level-4-line-height: var(--utrecht-typography-line-height-md);
|
|
897
|
+
--nl-heading-level-4-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
|
|
898
|
+
--nl-heading-level-4-font-size: var(--utrecht-typography-scale-lg-font-size);
|
|
899
|
+
--nl-heading-level-4-font-family: var(--utrecht-typography-sans-serif-font-family);
|
|
900
|
+
--nl-heading-level-3-line-height: var(--utrecht-typography-line-height-sm);
|
|
901
|
+
--nl-heading-level-3-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
|
|
902
|
+
--nl-heading-level-3-font-size: var(--utrecht-typography-scale-xl-font-size);
|
|
903
|
+
--nl-heading-level-3-font-family: var(--utrecht-typography-sans-serif-font-family);
|
|
904
|
+
--nl-heading-level-2-line-height: var(--utrecht-typography-line-height-sm);
|
|
905
|
+
--nl-heading-level-2-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
|
|
906
|
+
--nl-heading-level-2-font-size: var(--utrecht-typography-scale-xl-font-size);
|
|
907
|
+
--nl-heading-level-2-font-family: var(--utrecht-typography-sans-serif-font-family);
|
|
908
|
+
--nl-heading-level-1-line-height: var(--utrecht-typography-line-height-sm);
|
|
909
|
+
--nl-heading-level-1-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
|
|
910
|
+
--nl-heading-level-1-font-size: var(--utrecht-typography-scale-4xl-font-size);
|
|
911
|
+
--nl-heading-level-1-font-family: var(--utrecht-typography-sans-serif-font-family);
|
|
912
|
+
--nl-data-badge-padding-inline: var(--utrecht-space-inline-sm);
|
|
913
|
+
--nl-data-badge-padding-block: var(--utrecht-space-block-xs);
|
|
914
|
+
--nl-data-badge-color: var(--utrecht-color-white);
|
|
915
|
+
--nl-data-badge-background-color: var(--utrecht-color-grey-30);
|
|
916
|
+
--nl-code-block-line-height: var(--utrecht-typography-line-height-md);
|
|
917
|
+
--nl-code-block-font-size: var(--utrecht-typography-scale-md-font-size);
|
|
918
|
+
--nl-code-block-color: var(--utrecht-color-black);
|
|
919
|
+
--nl-code-block-background-color: var(--utrecht-color-grey-95);
|
|
886
920
|
--denhaag-process-steps-sub-step-marker-border-color: var(--utrecht-color-green-30);
|
|
887
921
|
--denhaag-process-steps-sub-step-marker-background-color: var(--utrecht-color-white);
|
|
888
922
|
--denhaag-process-steps-sub-step-heading-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
|
|
@@ -927,23 +961,51 @@
|
|
|
927
961
|
--utrecht-toptask-link-hover-background-color: var(--utrecht-button-primary-action-hover-background-color);
|
|
928
962
|
--utrecht-toptask-link-color: var(--utrecht-button-primary-action-color);
|
|
929
963
|
--utrecht-toptask-link-background-color: var(--utrecht-button-primary-action-background-color);
|
|
930
|
-
--utrecht-skip-link-
|
|
931
|
-
--utrecht-skip-link-
|
|
932
|
-
--utrecht-skip-link-padding-block-start: var(--utrecht-button-padding-block-start);
|
|
933
|
-
--utrecht-skip-link-padding-block-end: var(--utrecht-button-padding-block-end);
|
|
934
|
-
--utrecht-skip-link-focus-color: var(--utrecht-topnav-link-focus-color);
|
|
935
|
-
--utrecht-skip-link-focus-background-color: var(--utrecht-topnav-link-focus-background-color);
|
|
936
|
-
--utrecht-skip-link-color: var(--utrecht-topnav-link-color);
|
|
937
|
-
--utrecht-skip-link-background-color: var(--utrecht-topnav-list-background-color);
|
|
964
|
+
--utrecht-skip-link-text-decoration: var(--nl-skip-link-text-decoration);
|
|
965
|
+
--utrecht-skip-link-focus-visible-text-decoration: var(--nl-skip-link-focus-visible-text-decoration);
|
|
938
966
|
--utrecht-radio-button-border-color: var(--utrecht-form-control-border-color);
|
|
939
967
|
--utrecht-radio-button-background-color: var(--utrecht-form-control-background-color);
|
|
940
|
-
--utrecht-paragraph-
|
|
941
|
-
--utrecht-
|
|
968
|
+
--utrecht-paragraph-line-height: var(--nl-paragraph-line-height);
|
|
969
|
+
--utrecht-paragraph-lead-line-height: var(--nl-paragraph-lead-line-height);
|
|
970
|
+
--utrecht-paragraph-lead-font-weight: var(--nl-paragraph-lead-font-weight);
|
|
971
|
+
--utrecht-paragraph-lead-font-size: var(--nl-paragraph-lead-font-size);
|
|
972
|
+
--utrecht-paragraph-font-weight: var(--nl-paragraph-font-weight);
|
|
973
|
+
--utrecht-paragraph-font-size: var(--nl-paragraph-font-size);
|
|
974
|
+
--utrecht-paragraph-font-family: var(--nl-paragraph-font-family);
|
|
975
|
+
--utrecht-number-badge-font-size: var(--nl-number-badge-font-size);
|
|
976
|
+
--utrecht-number-badge-color: var(--nl-number-badge-color); /* Default text color for badge components */
|
|
977
|
+
--utrecht-number-badge-background-color: var(--nl-number-badge-background-color);
|
|
978
|
+
--utrecht-mark-color: var(--nl-mark-color);
|
|
979
|
+
--utrecht-mark-background-color: var(--nl-mark-background-color);
|
|
942
980
|
--utrecht-listbox-border-width: var(--utrecht-form-control-border-width);
|
|
943
981
|
--utrecht-listbox-border-color: var(--utrecht-form-control-border-color);
|
|
944
982
|
--utrecht-link-visited-color: var(--utrecht-link-color);
|
|
945
983
|
--utrecht-link-hover-color: var(--utrecht-link-focus-color);
|
|
946
984
|
--utrecht-link-active-color: var(--utrecht-link-color);
|
|
985
|
+
--utrecht-heading-6-line-height: var(--nl-heading-level-6-line-height);
|
|
986
|
+
--utrecht-heading-6-font-weight: var(--nl-heading-level-6-font-weight);
|
|
987
|
+
--utrecht-heading-6-font-size: var(--nl-heading-level-6-font-size);
|
|
988
|
+
--utrecht-heading-6-font-family: var(--nl-heading-level-6-font-family);
|
|
989
|
+
--utrecht-heading-5-line-height: var(--nl-heading-level-5-line-height);
|
|
990
|
+
--utrecht-heading-5-font-weight: var(--nl-heading-level-5-font-weight);
|
|
991
|
+
--utrecht-heading-5-font-size: var(--nl-heading-level-5-font-size);
|
|
992
|
+
--utrecht-heading-5-font-family: var(--nl-heading-level-5-font-family);
|
|
993
|
+
--utrecht-heading-4-line-height: var(--nl-heading-level-4-line-height);
|
|
994
|
+
--utrecht-heading-4-font-weight: var(--nl-heading-level-4-font-weight);
|
|
995
|
+
--utrecht-heading-4-font-size: var(--nl-heading-level-4-font-size);
|
|
996
|
+
--utrecht-heading-4-font-family: var(--nl-heading-level-4-font-family);
|
|
997
|
+
--utrecht-heading-3-line-height: var(--nl-heading-level-3-line-height);
|
|
998
|
+
--utrecht-heading-3-font-weight: var(--nl-heading-level-3-font-weight);
|
|
999
|
+
--utrecht-heading-3-font-size: var(--nl-heading-level-3-font-size);
|
|
1000
|
+
--utrecht-heading-3-font-family: var(--nl-heading-level-3-font-family);
|
|
1001
|
+
--utrecht-heading-2-line-height: var(--nl-heading-level-2-line-height);
|
|
1002
|
+
--utrecht-heading-2-font-weight: var(--nl-heading-level-2-font-weight);
|
|
1003
|
+
--utrecht-heading-2-font-size: var(--nl-heading-level-2-font-size);
|
|
1004
|
+
--utrecht-heading-2-font-family: var(--nl-heading-level-2-font-family);
|
|
1005
|
+
--utrecht-heading-1-line-height: var(--nl-heading-level-1-line-height);
|
|
1006
|
+
--utrecht-heading-1-font-weight: var(--nl-heading-level-1-font-weight);
|
|
1007
|
+
--utrecht-heading-1-font-size: var(--nl-heading-level-1-font-size);
|
|
1008
|
+
--utrecht-heading-1-font-family: var(--nl-heading-level-1-font-family);
|
|
947
1009
|
--utrecht-form-field-error-message-color: var(--utrecht-feedback-invalid-color);
|
|
948
1010
|
--utrecht-form-field-description-warning-color: var(--utrecht-feedback-warning-color);
|
|
949
1011
|
--utrecht-form-field-description-invalid-color: var(--utrecht-feedback-invalid-color);
|
|
@@ -963,6 +1025,10 @@
|
|
|
963
1025
|
--utrecht-feedback-active-color: var(--utrecht-feedback-safe-color);
|
|
964
1026
|
--utrecht-drawer-color: var(--utrecht-document-color);
|
|
965
1027
|
--utrecht-drawer-background-color: var(--utrecht-document-background-color);
|
|
1028
|
+
--utrecht-code-block-line-height: var(--nl-code-block-line-height);
|
|
1029
|
+
--utrecht-code-block-font-size: var(--nl-code-block-font-size);
|
|
1030
|
+
--utrecht-code-block-color: var(--nl-code-block-color);
|
|
1031
|
+
--utrecht-code-block-background-color: var(--nl-code-block-background-color);
|
|
966
1032
|
--utrecht-checkbox-color: var(--utrecht-form-control-color);
|
|
967
1033
|
--utrecht-checkbox-border-color: var(--utrecht-form-control-border-color);
|
|
968
1034
|
--utrecht-checkbox-background-color: var(--utrecht-form-control-background-color);
|
|
@@ -977,13 +1043,36 @@
|
|
|
977
1043
|
--utrecht-button-pressed-background-color: var(--utrecht-button-active-background-color);
|
|
978
1044
|
--utrecht-breadcrumb-nav-link-focus-background-color: var(--utrecht-focus-background-color);
|
|
979
1045
|
--utrecht-breadcrumb-nav-arrows-link-focus-background-color: var(--utrecht-focus-background-color);
|
|
1046
|
+
--utrecht-badge-padding-inline: var(--nl-data-badge-padding-inline); /* Default inline padding color for badge components */
|
|
1047
|
+
--utrecht-badge-padding-block: var(--nl-data-badge-padding-block); /* Default block padding for badge components */
|
|
980
1048
|
--utrecht-badge-counter-border-radius: var(--utrecht-badge-counter-font-size); /* Default corner radius for badge components */
|
|
1049
|
+
--utrecht-badge-color: var(--nl-data-badge-color); /* Default text color for badge components */
|
|
1050
|
+
--utrecht-badge-background-color: var(--nl-data-badge-background-color); /* Default background color for badge components */
|
|
1051
|
+
--signalen-modal-dialog-color: var(--utrecht-body-color);
|
|
1052
|
+
--signalen-modal-dialog-background-color: var(--utrecht-body-background-color);
|
|
981
1053
|
--of-progress-indicator-background-color: var(--utrecht-document-background-color);
|
|
982
1054
|
--of-page-footer-fg: var(--utrecht-page-footer-color);
|
|
983
1055
|
--of-page-footer-bg: var(--utrecht-page-footer-background-color);
|
|
984
1056
|
--of-layout-background: var(--utrecht-document-background-color);
|
|
1057
|
+
--nl-skip-link-padding-inline: var(--utrecht-button-padding-inline-start);
|
|
1058
|
+
--nl-skip-link-padding-block: var(--utrecht-button-padding-block-start);
|
|
1059
|
+
--nl-skip-link-focus-visible-color: var(--utrecht-topnav-link-focus-color);
|
|
1060
|
+
--nl-skip-link-focus-visible-background-color: var(--utrecht-topnav-link-focus-background-color);
|
|
1061
|
+
--nl-skip-link-color: var(--utrecht-topnav-link-color);
|
|
1062
|
+
--nl-skip-link-background-color: var(--utrecht-topnav-list-background-color);
|
|
1063
|
+
--nl-paragraph-lead-color: var(--utrecht-document-color);
|
|
1064
|
+
--nl-number-badge-border-radius: var(--nl-number-badge-font-size);
|
|
985
1065
|
--denhaag-process-steps-sub-step-line-color: var(--denhaag-process-steps-step-line-color);
|
|
1066
|
+
--utrecht-skip-link-padding-inline-start: var(--nl-skip-link-padding-inline);
|
|
1067
|
+
--utrecht-skip-link-padding-inline-end: var(--nl-skip-link-padding-inline);
|
|
1068
|
+
--utrecht-skip-link-padding-block-start: var(--nl-skip-link-padding-block);
|
|
1069
|
+
--utrecht-skip-link-padding-block-end: var(--nl-skip-link-padding-block);
|
|
1070
|
+
--utrecht-skip-link-focus-color: var(--nl-skip-link-focus-visible-color);
|
|
1071
|
+
--utrecht-skip-link-focus-background-color: var(--nl-skip-link-focus-visible-background-color);
|
|
1072
|
+
--utrecht-skip-link-color: var(--nl-skip-link-color);
|
|
1073
|
+
--utrecht-skip-link-background-color: var(--nl-skip-link-background-color);
|
|
986
1074
|
--utrecht-radio-button-invalid-border-color: var(--utrecht-form-control-invalid-border-color);
|
|
1075
|
+
--utrecht-number-badge-border-radius: var(--nl-number-badge-border-radius);
|
|
987
1076
|
--utrecht-form-field-invalid-border-inline-start-color: var(--utrecht-form-control-invalid-border-color);
|
|
988
1077
|
--utrecht-form-field-description-valid-color: var(--utrecht-feedback-valid-color);
|
|
989
1078
|
--utrecht-feedback-warning-fill-background-color: var(--utrecht-feedback-warning-background-color);
|