@utrecht/design-tokens 2.2.0 → 2.4.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 +20 -0
- package/dist/_mixin-theme.scss +124 -63
- package/dist/_mixin.scss +124 -63
- package/dist/_variables.scss +124 -63
- package/dist/dark/_mixin-theme.scss +124 -63
- package/dist/dark/_mixin.scss +124 -63
- package/dist/dark/_variables.scss +124 -63
- package/dist/dark/index.cjs +62 -1
- package/dist/dark/index.css +124 -63
- package/dist/dark/index.d.ts +62 -1
- package/dist/dark/index.flat.json +62 -1
- package/dist/dark/index.json +1046 -102
- package/dist/dark/index.mjs +62 -1
- package/dist/dark/index.tokens.json +614 -72
- package/dist/dark/list.d.ts +14 -0
- package/dist/dark/list.json +1046 -102
- package/dist/dark/list.mjs +31638 -0
- package/dist/dark/property.css +0 -1
- package/dist/dark/root.css +124 -63
- package/dist/dark/theme-prince-xml.css +124 -63
- package/dist/dark/theme.css +124 -63
- package/dist/dark/tokens.cjs +1541 -116
- package/dist/dark/tokens.d.ts +355 -22
- package/dist/dark/tokens.json +1541 -116
- package/dist/dark/variables.cjs +62 -1
- package/dist/dark/variables.css +124 -63
- package/dist/dark/variables.d.ts +62 -1
- package/dist/dark/variables.json +62 -1
- package/dist/dark/variables.less +124 -63
- package/dist/dark/variables.mjs +62 -1
- package/dist/index.cjs +62 -1
- package/dist/index.css +248 -126
- package/dist/index.d.ts +62 -1
- package/dist/index.flat.json +62 -1
- package/dist/index.json +1046 -102
- package/dist/index.mjs +62 -1
- package/dist/index.tokens.json +614 -72
- package/dist/list.d.ts +14 -0
- package/dist/list.json +1046 -102
- package/dist/list.mjs +32755 -0
- package/dist/property.css +0 -1
- package/dist/root.css +124 -63
- package/dist/theme-prince-xml.css +124 -63
- package/dist/theme.css +124 -63
- package/dist/tokens.cjs +1541 -116
- package/dist/tokens.d.ts +355 -22
- package/dist/tokens.json +1541 -116
- package/dist/variables.cjs +62 -1
- package/dist/variables.css +124 -63
- package/dist/variables.d.ts +62 -1
- package/dist/variables.json +62 -1
- package/dist/variables.less +124 -63
- package/dist/variables.mjs +62 -1
- 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/utrecht/badge.tokens.json +5 -5
- 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/mark.tokens.json +2 -2
- package/src/component/utrecht/number-badge.tokens.json +6 -6
- package/src/component/utrecht/paragraph.tokens.json +8 -8
- package/src/component/utrecht/skip-link.tokens.json +10 -10
- package/src/css-property-formatter.mjs +2 -1
- package/src/json-list-formatter.js +2 -1
- package/style-dictionary-build.mjs +3 -1
- package/style-dictionary-config.mjs +27 -0
- package/src/component/utrecht/badge-data.tokens.json +0 -8
package/dist/property.css
CHANGED
|
@@ -572,7 +572,6 @@
|
|
|
572
572
|
@property --utrecht-pagination-relative-link-text-transform { syntax: 'inherit | uppercase'; inherits: true; }
|
|
573
573
|
@property --utrecht-paragraph-font-size { syntax: '<length>'; inherits: true; }
|
|
574
574
|
@property --utrecht-paragraph-font-weight { syntax: '<number>'; inherits: true; }
|
|
575
|
-
@property --utrecht-paragraph-lead-color { syntax: '<color>'; inherits: true; }
|
|
576
575
|
@property --utrecht-paragraph-lead-font-size { syntax: '<length>'; inherits: true; }
|
|
577
576
|
@property --utrecht-paragraph-lead-font-weight { syntax: '<number>'; inherits: true; }
|
|
578
577
|
@property --utrecht-paragraph-lead-line-height { syntax: '<length> | <number>'; inherits: true; }
|
package/dist/root.css
CHANGED
|
@@ -158,8 +158,6 @@
|
|
|
158
158
|
--utrecht-ordered-list-item-margin-block-end: 0.25em;
|
|
159
159
|
--utrecht-number-data-positive-color: green;
|
|
160
160
|
--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
161
|
--utrecht-mapcontrolbutton-margin-inline-start: 0;
|
|
164
162
|
--utrecht-mapcontrolbutton-margin-inline-end: 0;
|
|
165
163
|
--utrecht-mapcontrolbutton-focus-text-decoration: none;
|
|
@@ -292,10 +290,6 @@
|
|
|
292
290
|
--utrecht-color-blue-30: hsl(211 60% 30%); /* Deze kleur gebruiken we niet (interaction active) */
|
|
293
291
|
--utrecht-color-blue-20: hsl(211 60% 20%); /* basis donkerblauw (OS focus) */
|
|
294
292
|
--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
293
|
--utrecht-checkbox-size: 24px;
|
|
300
294
|
--utrecht-checkbox-margin-block-start: 0;
|
|
301
295
|
--utrecht-checkbox-focus-border-width: 2px;
|
|
@@ -357,7 +351,6 @@
|
|
|
357
351
|
--utrecht-blockquote-margin-block-end: 1.6em;
|
|
358
352
|
--utrecht-badge-counter-padding-inline: 1ex; /* Default inline padding color for badge components */
|
|
359
353
|
--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
354
|
--utrecht-backdrop-reduced-transparency-opacity: 0.98;
|
|
362
355
|
--utrecht-backdrop-opacity: 0.8;
|
|
363
356
|
--utrecht-backdrop-fade-in-animation-duration: 400ms;
|
|
@@ -378,6 +371,12 @@
|
|
|
378
371
|
--utrecht-accordion-button-hover-background-color: inherit;
|
|
379
372
|
--utrecht-accordion-button-border-width: 0;
|
|
380
373
|
--of-progress-indicator-mobile-box-shadow: 0px 0px 2px 0px rgba(0 0 0 / 20%);
|
|
374
|
+
--nl-number-badge-padding-inline: 1ex;
|
|
375
|
+
--nl-number-badge-padding-block: 1ex;
|
|
376
|
+
--nl-data-badge-border-radius: 0;
|
|
377
|
+
--nl-code-block-padding-inline: 20px;
|
|
378
|
+
--nl-code-block-padding-block: 20px;
|
|
379
|
+
--nl-code-block-font-family: "Monaco";
|
|
381
380
|
--denhaag-process-steps-sub-step-marker-size: 12px;
|
|
382
381
|
--denhaag-process-steps-step-marker-size: 28px;
|
|
383
382
|
--utrecht-unordered-list-marker-color: var(--utrecht-color-red-40);
|
|
@@ -430,8 +429,6 @@
|
|
|
430
429
|
--utrecht-spotlight-section-error-background-color: var(--utrecht-color-red-95);
|
|
431
430
|
--utrecht-spotlight-section-color: var(--utrecht-color-black);
|
|
432
431
|
--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
432
|
--utrecht-sidenav-link-hover-color: var(--utrecht-color-blue-40);
|
|
436
433
|
--utrecht-sidenav-link-color: var(--utrecht-color-blue-40);
|
|
437
434
|
--utrecht-sidenav-item-marker-hover-color: var(--utrecht-color-blue-50);
|
|
@@ -486,13 +483,6 @@
|
|
|
486
483
|
--utrecht-pre-heading-font-size: var(--utrecht-typography-scale-md-font-size);
|
|
487
484
|
--utrecht-paragraph-small-font-size: var(--utrecht-typography-scale-sm-font-size);
|
|
488
485
|
--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
486
|
--utrecht-pagination-relative-link-hover-color: var(--utrecht-color-white);
|
|
497
487
|
--utrecht-pagination-relative-link-hover-border-color: var(--utrecht-color-blue-35);
|
|
498
488
|
--utrecht-pagination-relative-link-hover-background-color: var(--utrecht-color-blue-35);
|
|
@@ -518,9 +508,8 @@
|
|
|
518
508
|
--utrecht-page-footer-background-color: var(--utrecht-color-red-40);
|
|
519
509
|
--utrecht-page-color: var(--utrecht-color-black);
|
|
520
510
|
--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);
|
|
511
|
+
--utrecht-number-badge-padding-inline: var(--nl-number-badge-padding-inline); /* Default inline padding color for badge components */
|
|
512
|
+
--utrecht-number-badge-padding-block: var(--nl-number-badge-padding-block); /* Default block padding for badge components */
|
|
524
513
|
--utrecht-nav-bar-link-padding-inline-start: var(--utrecht-space-inline-md);
|
|
525
514
|
--utrecht-nav-bar-link-padding-inline-end: var(--utrecht-space-inline-md);
|
|
526
515
|
--utrecht-nav-bar-link-padding-block-start: var(--utrecht-space-block-xs);
|
|
@@ -530,8 +519,6 @@
|
|
|
530
519
|
--utrecht-nav-bar-background-color: var(--utrecht-color-white);
|
|
531
520
|
--utrecht-menulijst-item-hover-color: var(--utrecht-color-blue-40);
|
|
532
521
|
--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
522
|
--utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
|
|
536
523
|
--utrecht-mapcontrolbutton-padding-inline-end: var(--utrecht-space-inline-2xs);
|
|
537
524
|
--utrecht-mapcontrolbutton-padding-block-start: var(--utrecht-space-block-2xs);
|
|
@@ -588,30 +575,6 @@
|
|
|
588
575
|
--utrecht-index-char-nav-link-current-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
|
|
589
576
|
--utrecht-index-char-nav-gap: var(--utrecht-space-column-sm);
|
|
590
577
|
--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
578
|
--utrecht-form-toggle-track-disabled-background-color: var(--utrecht-color-grey-90);
|
|
616
579
|
--utrecht-form-toggle-track-border-radius: var(--utrecht-form-toggle-border-radius);
|
|
617
580
|
--utrecht-form-toggle-thumb-disabled-background-color: var(--utrecht-color-white);
|
|
@@ -688,12 +651,13 @@
|
|
|
688
651
|
--utrecht-data-list-item-key-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
|
|
689
652
|
--utrecht-column-layout-gap: var(--utrecht-space-column-md);
|
|
690
653
|
--utrecht-column-layout-column-rule-color: var(--utrecht-color-grey-80);
|
|
654
|
+
--utrecht-code-block-padding-inline-start: var(--nl-code-block-padding-inline);
|
|
655
|
+
--utrecht-code-block-padding-inline-end: var(--nl-code-block-padding-inline);
|
|
656
|
+
--utrecht-code-block-padding-block-start: var(--nl-code-block-padding-block);
|
|
657
|
+
--utrecht-code-block-padding-block-end: var(--nl-code-block-padding-block);
|
|
691
658
|
--utrecht-code-block-margin-block-start: var(--utrecht-space-block-lg);
|
|
692
659
|
--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);
|
|
660
|
+
--utrecht-code-block-font-family: var(--nl-code-block-font-family);
|
|
697
661
|
--utrecht-checkbox-indeterminate-background-color: var(--utrecht-color-blue-40);
|
|
698
662
|
--utrecht-checkbox-disabled-border-color: var(--utrecht-color-grey-80);
|
|
699
663
|
--utrecht-checkbox-disabled-background-color: var(--utrecht-color-grey-80);
|
|
@@ -827,16 +791,13 @@
|
|
|
827
791
|
--utrecht-blockquote-content-font-size: var(--utrecht-typography-scale-lg-font-size);
|
|
828
792
|
--utrecht-blockquote-content-color: var(--utrecht-color-red-40);
|
|
829
793
|
--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
794
|
--utrecht-badge-list-item-margin-inline: var(--utrecht-space-block-sm);
|
|
833
795
|
--utrecht-badge-list-item-margin-block: var(--utrecht-space-block-xs);
|
|
834
796
|
--utrecht-badge-font-style: var(--utrecht-typography-font-style-normal);
|
|
835
797
|
--utrecht-badge-counter-font-size: var(--utrecht-typography-scale-md-font-size);
|
|
836
798
|
--utrecht-badge-counter-color: var(--utrecht-color-white); /* Default text color for badge components */
|
|
837
799
|
--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 */
|
|
800
|
+
--utrecht-badge-border-radius: var(--nl-data-badge-border-radius); /* Default corner radius for badge components */
|
|
840
801
|
--utrecht-backdrop-color: var(--utrecht-color-black);
|
|
841
802
|
--utrecht-backdrop-background-color: var(--utrecht-color-white);
|
|
842
803
|
--utrecht-alert-warning-color: var(--utrecht-color-black);
|
|
@@ -883,6 +844,53 @@
|
|
|
883
844
|
--utrecht-accordion-button-active-color: var(--utrecht-color-grey-10);
|
|
884
845
|
--utrecht-accordion-button-active-border-color: var(--utrecht-color-grey-95);
|
|
885
846
|
--utrecht-accordion-button-active-background-color: var(--utrecht-color-grey-80);
|
|
847
|
+
--nl-skip-link-text-decoration: var(--utrecht-link-text-decoration);
|
|
848
|
+
--nl-skip-link-focus-visible-text-decoration: var(--utrecht-link-focus-visible-text-decoration);
|
|
849
|
+
--nl-paragraph-small-font-size: var(--utrecht-typography-scale-sm-font-size);
|
|
850
|
+
--nl-paragraph-line-height: var(--utrecht-typography-line-height-md);
|
|
851
|
+
--nl-paragraph-lead-line-height: var(--utrecht-typography-line-height-md);
|
|
852
|
+
--nl-paragraph-lead-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
|
|
853
|
+
--nl-paragraph-lead-font-size: var(--utrecht-typography-scale-xl-font-size);
|
|
854
|
+
--nl-paragraph-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
|
|
855
|
+
--nl-paragraph-font-size: var(--utrecht-typography-scale-md-font-size);
|
|
856
|
+
--nl-paragraph-font-family: var(--utrecht-typography-sans-serif-font-family);
|
|
857
|
+
--nl-number-badge-font-size: var(--utrecht-typography-scale-md-font-size);
|
|
858
|
+
--nl-number-badge-color: var(--utrecht-color-white);
|
|
859
|
+
--nl-number-badge-background-color: var(--utrecht-color-red-40);
|
|
860
|
+
--nl-mark-color: var(--utrecht-color-black);
|
|
861
|
+
--nl-mark-background-color: var(--utrecht-color-yellow-60);
|
|
862
|
+
--nl-heading-level-6-line-height: var(--utrecht-typography-line-height-md);
|
|
863
|
+
--nl-heading-level-6-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
|
|
864
|
+
--nl-heading-level-6-font-size: var(--utrecht-typography-scale-sm-font-size);
|
|
865
|
+
--nl-heading-level-6-font-family: var(--utrecht-typography-sans-serif-font-family);
|
|
866
|
+
--nl-heading-level-5-line-height: var(--utrecht-typography-line-height-md);
|
|
867
|
+
--nl-heading-level-5-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
|
|
868
|
+
--nl-heading-level-5-font-size: var(--utrecht-typography-scale-sm-font-size);
|
|
869
|
+
--nl-heading-level-5-font-family: var(--utrecht-typography-sans-serif-font-family);
|
|
870
|
+
--nl-heading-level-4-line-height: var(--utrecht-typography-line-height-md);
|
|
871
|
+
--nl-heading-level-4-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
|
|
872
|
+
--nl-heading-level-4-font-size: var(--utrecht-typography-scale-lg-font-size);
|
|
873
|
+
--nl-heading-level-4-font-family: var(--utrecht-typography-sans-serif-font-family);
|
|
874
|
+
--nl-heading-level-3-line-height: var(--utrecht-typography-line-height-sm);
|
|
875
|
+
--nl-heading-level-3-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
|
|
876
|
+
--nl-heading-level-3-font-size: var(--utrecht-typography-scale-xl-font-size);
|
|
877
|
+
--nl-heading-level-3-font-family: var(--utrecht-typography-sans-serif-font-family);
|
|
878
|
+
--nl-heading-level-2-line-height: var(--utrecht-typography-line-height-sm);
|
|
879
|
+
--nl-heading-level-2-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
|
|
880
|
+
--nl-heading-level-2-font-size: var(--utrecht-typography-scale-xl-font-size);
|
|
881
|
+
--nl-heading-level-2-font-family: var(--utrecht-typography-sans-serif-font-family);
|
|
882
|
+
--nl-heading-level-1-line-height: var(--utrecht-typography-line-height-sm);
|
|
883
|
+
--nl-heading-level-1-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
|
|
884
|
+
--nl-heading-level-1-font-size: var(--utrecht-typography-scale-4xl-font-size);
|
|
885
|
+
--nl-heading-level-1-font-family: var(--utrecht-typography-sans-serif-font-family);
|
|
886
|
+
--nl-data-badge-padding-inline: var(--utrecht-space-inline-sm);
|
|
887
|
+
--nl-data-badge-padding-block: var(--utrecht-space-block-xs);
|
|
888
|
+
--nl-data-badge-color: var(--utrecht-color-white);
|
|
889
|
+
--nl-data-badge-background-color: var(--utrecht-color-grey-30);
|
|
890
|
+
--nl-code-block-line-height: var(--utrecht-typography-line-height-md);
|
|
891
|
+
--nl-code-block-font-size: var(--utrecht-typography-scale-md-font-size);
|
|
892
|
+
--nl-code-block-color: var(--utrecht-color-black);
|
|
893
|
+
--nl-code-block-background-color: var(--utrecht-color-grey-95);
|
|
886
894
|
--denhaag-process-steps-sub-step-marker-border-color: var(--utrecht-color-green-30);
|
|
887
895
|
--denhaag-process-steps-sub-step-marker-background-color: var(--utrecht-color-white);
|
|
888
896
|
--denhaag-process-steps-sub-step-heading-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
|
|
@@ -927,23 +935,51 @@
|
|
|
927
935
|
--utrecht-toptask-link-hover-background-color: var(--utrecht-button-primary-action-hover-background-color);
|
|
928
936
|
--utrecht-toptask-link-color: var(--utrecht-button-primary-action-color);
|
|
929
937
|
--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);
|
|
938
|
+
--utrecht-skip-link-text-decoration: var(--nl-skip-link-text-decoration);
|
|
939
|
+
--utrecht-skip-link-focus-visible-text-decoration: var(--nl-skip-link-focus-visible-text-decoration);
|
|
938
940
|
--utrecht-radio-button-border-color: var(--utrecht-form-control-border-color);
|
|
939
941
|
--utrecht-radio-button-background-color: var(--utrecht-form-control-background-color);
|
|
940
|
-
--utrecht-paragraph-
|
|
941
|
-
--utrecht-
|
|
942
|
+
--utrecht-paragraph-line-height: var(--nl-paragraph-line-height);
|
|
943
|
+
--utrecht-paragraph-lead-line-height: var(--nl-paragraph-lead-line-height);
|
|
944
|
+
--utrecht-paragraph-lead-font-weight: var(--nl-paragraph-lead-font-weight);
|
|
945
|
+
--utrecht-paragraph-lead-font-size: var(--nl-paragraph-lead-font-size);
|
|
946
|
+
--utrecht-paragraph-font-weight: var(--nl-paragraph-font-weight);
|
|
947
|
+
--utrecht-paragraph-font-size: var(--nl-paragraph-font-size);
|
|
948
|
+
--utrecht-paragraph-font-family: var(--nl-paragraph-font-family);
|
|
949
|
+
--utrecht-number-badge-font-size: var(--nl-number-badge-font-size);
|
|
950
|
+
--utrecht-number-badge-color: var(--nl-number-badge-color); /* Default text color for badge components */
|
|
951
|
+
--utrecht-number-badge-background-color: var(--nl-number-badge-background-color);
|
|
952
|
+
--utrecht-mark-color: var(--nl-mark-color);
|
|
953
|
+
--utrecht-mark-background-color: var(--nl-mark-background-color);
|
|
942
954
|
--utrecht-listbox-border-width: var(--utrecht-form-control-border-width);
|
|
943
955
|
--utrecht-listbox-border-color: var(--utrecht-form-control-border-color);
|
|
944
956
|
--utrecht-link-visited-color: var(--utrecht-link-color);
|
|
945
957
|
--utrecht-link-hover-color: var(--utrecht-link-focus-color);
|
|
946
958
|
--utrecht-link-active-color: var(--utrecht-link-color);
|
|
959
|
+
--utrecht-heading-6-line-height: var(--nl-heading-level-6-line-height);
|
|
960
|
+
--utrecht-heading-6-font-weight: var(--nl-heading-level-6-font-weight);
|
|
961
|
+
--utrecht-heading-6-font-size: var(--nl-heading-level-6-font-size);
|
|
962
|
+
--utrecht-heading-6-font-family: var(--nl-heading-level-6-font-family);
|
|
963
|
+
--utrecht-heading-5-line-height: var(--nl-heading-level-5-line-height);
|
|
964
|
+
--utrecht-heading-5-font-weight: var(--nl-heading-level-5-font-weight);
|
|
965
|
+
--utrecht-heading-5-font-size: var(--nl-heading-level-5-font-size);
|
|
966
|
+
--utrecht-heading-5-font-family: var(--nl-heading-level-5-font-family);
|
|
967
|
+
--utrecht-heading-4-line-height: var(--nl-heading-level-4-line-height);
|
|
968
|
+
--utrecht-heading-4-font-weight: var(--nl-heading-level-4-font-weight);
|
|
969
|
+
--utrecht-heading-4-font-size: var(--nl-heading-level-4-font-size);
|
|
970
|
+
--utrecht-heading-4-font-family: var(--nl-heading-level-4-font-family);
|
|
971
|
+
--utrecht-heading-3-line-height: var(--nl-heading-level-3-line-height);
|
|
972
|
+
--utrecht-heading-3-font-weight: var(--nl-heading-level-3-font-weight);
|
|
973
|
+
--utrecht-heading-3-font-size: var(--nl-heading-level-3-font-size);
|
|
974
|
+
--utrecht-heading-3-font-family: var(--nl-heading-level-3-font-family);
|
|
975
|
+
--utrecht-heading-2-line-height: var(--nl-heading-level-2-line-height);
|
|
976
|
+
--utrecht-heading-2-font-weight: var(--nl-heading-level-2-font-weight);
|
|
977
|
+
--utrecht-heading-2-font-size: var(--nl-heading-level-2-font-size);
|
|
978
|
+
--utrecht-heading-2-font-family: var(--nl-heading-level-2-font-family);
|
|
979
|
+
--utrecht-heading-1-line-height: var(--nl-heading-level-1-line-height);
|
|
980
|
+
--utrecht-heading-1-font-weight: var(--nl-heading-level-1-font-weight);
|
|
981
|
+
--utrecht-heading-1-font-size: var(--nl-heading-level-1-font-size);
|
|
982
|
+
--utrecht-heading-1-font-family: var(--nl-heading-level-1-font-family);
|
|
947
983
|
--utrecht-form-field-error-message-color: var(--utrecht-feedback-invalid-color);
|
|
948
984
|
--utrecht-form-field-description-warning-color: var(--utrecht-feedback-warning-color);
|
|
949
985
|
--utrecht-form-field-description-invalid-color: var(--utrecht-feedback-invalid-color);
|
|
@@ -963,6 +999,10 @@
|
|
|
963
999
|
--utrecht-feedback-active-color: var(--utrecht-feedback-safe-color);
|
|
964
1000
|
--utrecht-drawer-color: var(--utrecht-document-color);
|
|
965
1001
|
--utrecht-drawer-background-color: var(--utrecht-document-background-color);
|
|
1002
|
+
--utrecht-code-block-line-height: var(--nl-code-block-line-height);
|
|
1003
|
+
--utrecht-code-block-font-size: var(--nl-code-block-font-size);
|
|
1004
|
+
--utrecht-code-block-color: var(--nl-code-block-color);
|
|
1005
|
+
--utrecht-code-block-background-color: var(--nl-code-block-background-color);
|
|
966
1006
|
--utrecht-checkbox-color: var(--utrecht-form-control-color);
|
|
967
1007
|
--utrecht-checkbox-border-color: var(--utrecht-form-control-border-color);
|
|
968
1008
|
--utrecht-checkbox-background-color: var(--utrecht-form-control-background-color);
|
|
@@ -977,13 +1017,34 @@
|
|
|
977
1017
|
--utrecht-button-pressed-background-color: var(--utrecht-button-active-background-color);
|
|
978
1018
|
--utrecht-breadcrumb-nav-link-focus-background-color: var(--utrecht-focus-background-color);
|
|
979
1019
|
--utrecht-breadcrumb-nav-arrows-link-focus-background-color: var(--utrecht-focus-background-color);
|
|
1020
|
+
--utrecht-badge-padding-inline: var(--nl-data-badge-padding-inline); /* Default inline padding color for badge components */
|
|
1021
|
+
--utrecht-badge-padding-block: var(--nl-data-badge-padding-block); /* Default block padding for badge components */
|
|
980
1022
|
--utrecht-badge-counter-border-radius: var(--utrecht-badge-counter-font-size); /* Default corner radius for badge components */
|
|
1023
|
+
--utrecht-badge-color: var(--nl-data-badge-color); /* Default text color for badge components */
|
|
1024
|
+
--utrecht-badge-background-color: var(--nl-data-badge-background-color); /* Default background color for badge components */
|
|
981
1025
|
--of-progress-indicator-background-color: var(--utrecht-document-background-color);
|
|
982
1026
|
--of-page-footer-fg: var(--utrecht-page-footer-color);
|
|
983
1027
|
--of-page-footer-bg: var(--utrecht-page-footer-background-color);
|
|
984
1028
|
--of-layout-background: var(--utrecht-document-background-color);
|
|
1029
|
+
--nl-skip-link-padding-inline: var(--utrecht-button-padding-inline-start);
|
|
1030
|
+
--nl-skip-link-padding-block: var(--utrecht-button-padding-block-start);
|
|
1031
|
+
--nl-skip-link-focus-visible-color: var(--utrecht-topnav-link-focus-color);
|
|
1032
|
+
--nl-skip-link-focus-visible-background-color: var(--utrecht-topnav-link-focus-background-color);
|
|
1033
|
+
--nl-skip-link-color: var(--utrecht-topnav-link-color);
|
|
1034
|
+
--nl-skip-link-background-color: var(--utrecht-topnav-list-background-color);
|
|
1035
|
+
--nl-paragraph-lead-color: var(--utrecht-document-color);
|
|
1036
|
+
--nl-number-badge-border-radius: var(--nl-number-badge-font-size);
|
|
985
1037
|
--denhaag-process-steps-sub-step-line-color: var(--denhaag-process-steps-step-line-color);
|
|
1038
|
+
--utrecht-skip-link-padding-inline-start: var(--nl-skip-link-padding-inline);
|
|
1039
|
+
--utrecht-skip-link-padding-inline-end: var(--nl-skip-link-padding-inline);
|
|
1040
|
+
--utrecht-skip-link-padding-block-start: var(--nl-skip-link-padding-block);
|
|
1041
|
+
--utrecht-skip-link-padding-block-end: var(--nl-skip-link-padding-block);
|
|
1042
|
+
--utrecht-skip-link-focus-color: var(--nl-skip-link-focus-visible-color);
|
|
1043
|
+
--utrecht-skip-link-focus-background-color: var(--nl-skip-link-focus-visible-background-color);
|
|
1044
|
+
--utrecht-skip-link-color: var(--nl-skip-link-color);
|
|
1045
|
+
--utrecht-skip-link-background-color: var(--nl-skip-link-background-color);
|
|
986
1046
|
--utrecht-radio-button-invalid-border-color: var(--utrecht-form-control-invalid-border-color);
|
|
1047
|
+
--utrecht-number-badge-border-radius: var(--nl-number-badge-border-radius);
|
|
987
1048
|
--utrecht-form-field-invalid-border-inline-start-color: var(--utrecht-form-control-invalid-border-color);
|
|
988
1049
|
--utrecht-form-field-description-valid-color: var(--utrecht-feedback-valid-color);
|
|
989
1050
|
--utrecht-feedback-warning-fill-background-color: var(--utrecht-feedback-warning-background-color);
|
|
@@ -4,6 +4,12 @@
|
|
|
4
4
|
|
|
5
5
|
.utrecht-theme {
|
|
6
6
|
--of-progress-indicator-mobile-box-shadow: 0px 0px 2px 0px rgba(0 0 0 / 20%);
|
|
7
|
+
--nl-number-badge-padding-inline: 1ex;
|
|
8
|
+
--nl-number-badge-padding-block: 1ex;
|
|
9
|
+
--nl-data-badge-border-radius: 0;
|
|
10
|
+
--nl-code-block-padding-inline: 20px;
|
|
11
|
+
--nl-code-block-padding-block: 20px;
|
|
12
|
+
--nl-code-block-font-family: "Monaco";
|
|
7
13
|
--denhaag-process-steps-sub-step-marker-size: 12px;
|
|
8
14
|
--denhaag-process-steps-step-marker-size: 28px;
|
|
9
15
|
--utrecht-toptask-nav-link-grid-max-inline-size: 240px;
|
|
@@ -168,8 +174,6 @@
|
|
|
168
174
|
--utrecht-ordered-list-margin-block-start: 0;
|
|
169
175
|
--utrecht-number-data-negative-color: red;
|
|
170
176
|
--utrecht-number-data-positive-color: green;
|
|
171
|
-
--utrecht-number-badge-padding-inline: 1ex; /* Default inline padding color for badge components */
|
|
172
|
-
--utrecht-number-badge-padding-block: 1ex; /* Default block padding for badge components */
|
|
173
177
|
--utrecht-topnav-link-focus-text-decoration: none;
|
|
174
178
|
--utrecht-topnav-link-focus-border-type: dotted;
|
|
175
179
|
--utrecht-mapcontrolbutton-margin-inline-start: 0;
|
|
@@ -310,10 +314,6 @@
|
|
|
310
314
|
--utrecht-action-activate-cursor: pointer;
|
|
311
315
|
--utrecht-column-layout-column-width: 350px;
|
|
312
316
|
--utrecht-column-layout-column-rule-width: 2px;
|
|
313
|
-
--utrecht-code-block-padding-inline-end: 20px;
|
|
314
|
-
--utrecht-code-block-padding-inline-start: 20px;
|
|
315
|
-
--utrecht-code-block-padding-block-end: 20px;
|
|
316
|
-
--utrecht-code-block-padding-block-start: 20px;
|
|
317
317
|
--utrecht-checkbox-margin-block-start: 0;
|
|
318
318
|
--utrecht-checkbox-focus-border-width: 2px;
|
|
319
319
|
--utrecht-checkbox-size: 24px;
|
|
@@ -364,7 +364,6 @@
|
|
|
364
364
|
--utrecht-blockquote-margin-block-start: 1.6em;
|
|
365
365
|
--utrecht-blockquote-margin-inline-end: 1.6em;
|
|
366
366
|
--utrecht-blockquote-margin-inline-start: 1.6em;
|
|
367
|
-
--utrecht-badge-border-radius: 0; /* Default corner radius for badge components */
|
|
368
367
|
--utrecht-badge-counter-padding-inline: 1ex; /* Default inline padding color for badge components */
|
|
369
368
|
--utrecht-badge-counter-padding-block: 1ex; /* Default block padding for badge components */
|
|
370
369
|
--utrecht-backdrop-reduced-transparency-opacity: 0.98;
|
|
@@ -380,6 +379,53 @@
|
|
|
380
379
|
--utrecht-accordion-button-icon-size: 24px;
|
|
381
380
|
--utrecht-accordion-button-hover-background-color: inherit;
|
|
382
381
|
--utrecht-accordion-button-border-width: 0;
|
|
382
|
+
--nl-skip-link-focus-visible-text-decoration: var(--utrecht-link-focus-visible-text-decoration);
|
|
383
|
+
--nl-skip-link-text-decoration: var(--utrecht-link-text-decoration);
|
|
384
|
+
--nl-paragraph-small-font-size: var(--utrecht-typography-scale-sm-font-size);
|
|
385
|
+
--nl-paragraph-lead-line-height: var(--utrecht-typography-line-height-md);
|
|
386
|
+
--nl-paragraph-lead-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
|
|
387
|
+
--nl-paragraph-lead-font-size: var(--utrecht-typography-scale-xl-font-size);
|
|
388
|
+
--nl-paragraph-line-height: var(--utrecht-typography-line-height-md);
|
|
389
|
+
--nl-paragraph-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
|
|
390
|
+
--nl-paragraph-font-size: var(--utrecht-typography-scale-md-font-size);
|
|
391
|
+
--nl-paragraph-font-family: var(--utrecht-typography-sans-serif-font-family);
|
|
392
|
+
--nl-number-badge-font-size: var(--utrecht-typography-scale-md-font-size);
|
|
393
|
+
--nl-number-badge-color: var(--utrecht-color-white);
|
|
394
|
+
--nl-number-badge-background-color: var(--utrecht-color-red-40);
|
|
395
|
+
--nl-mark-color: var(--utrecht-color-black);
|
|
396
|
+
--nl-mark-background-color: var(--utrecht-color-yellow-60);
|
|
397
|
+
--nl-heading-level-6-line-height: var(--utrecht-typography-line-height-md);
|
|
398
|
+
--nl-heading-level-6-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
|
|
399
|
+
--nl-heading-level-6-font-size: var(--utrecht-typography-scale-sm-font-size);
|
|
400
|
+
--nl-heading-level-6-font-family: var(--utrecht-typography-sans-serif-font-family);
|
|
401
|
+
--nl-heading-level-5-line-height: var(--utrecht-typography-line-height-md);
|
|
402
|
+
--nl-heading-level-5-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
|
|
403
|
+
--nl-heading-level-5-font-size: var(--utrecht-typography-scale-sm-font-size);
|
|
404
|
+
--nl-heading-level-5-font-family: var(--utrecht-typography-sans-serif-font-family);
|
|
405
|
+
--nl-heading-level-4-line-height: var(--utrecht-typography-line-height-md);
|
|
406
|
+
--nl-heading-level-4-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
|
|
407
|
+
--nl-heading-level-4-font-size: var(--utrecht-typography-scale-lg-font-size);
|
|
408
|
+
--nl-heading-level-4-font-family: var(--utrecht-typography-sans-serif-font-family);
|
|
409
|
+
--nl-heading-level-3-line-height: var(--utrecht-typography-line-height-sm);
|
|
410
|
+
--nl-heading-level-3-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
|
|
411
|
+
--nl-heading-level-3-font-size: var(--utrecht-typography-scale-xl-font-size);
|
|
412
|
+
--nl-heading-level-3-font-family: var(--utrecht-typography-sans-serif-font-family);
|
|
413
|
+
--nl-heading-level-2-line-height: var(--utrecht-typography-line-height-sm);
|
|
414
|
+
--nl-heading-level-2-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
|
|
415
|
+
--nl-heading-level-2-font-size: var(--utrecht-typography-scale-xl-font-size);
|
|
416
|
+
--nl-heading-level-2-font-family: var(--utrecht-typography-sans-serif-font-family);
|
|
417
|
+
--nl-heading-level-1-line-height: var(--utrecht-typography-line-height-sm);
|
|
418
|
+
--nl-heading-level-1-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
|
|
419
|
+
--nl-heading-level-1-font-size: var(--utrecht-typography-scale-4xl-font-size);
|
|
420
|
+
--nl-heading-level-1-font-family: var(--utrecht-typography-sans-serif-font-family);
|
|
421
|
+
--nl-data-badge-padding-inline: var(--utrecht-space-inline-sm);
|
|
422
|
+
--nl-data-badge-padding-block: var(--utrecht-space-block-xs);
|
|
423
|
+
--nl-data-badge-color: var(--utrecht-color-white);
|
|
424
|
+
--nl-data-badge-background-color: var(--utrecht-color-grey-30);
|
|
425
|
+
--nl-code-block-line-height: var(--utrecht-typography-line-height-md);
|
|
426
|
+
--nl-code-block-font-size: var(--utrecht-typography-scale-md-font-size);
|
|
427
|
+
--nl-code-block-color: var(--utrecht-color-black);
|
|
428
|
+
--nl-code-block-background-color: var(--utrecht-color-grey-95);
|
|
383
429
|
--denhaag-process-steps-sub-step-heading-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
|
|
384
430
|
--denhaag-process-steps-sub-step-heading-font-size: var(--utrecht-typography-scale-sm-font-size);
|
|
385
431
|
--denhaag-process-steps-sub-step-heading-color: var(--utrecht-color-grey-15);
|
|
@@ -463,8 +509,6 @@
|
|
|
463
509
|
--utrecht-spotlight-section-padding-block-start: var(--utrecht-space-block-md);
|
|
464
510
|
--utrecht-spotlight-section-color: var(--utrecht-color-black);
|
|
465
511
|
--utrecht-spotlight-section-background-color: var(--utrecht-color-grey-90);
|
|
466
|
-
--utrecht-skip-link-focus-visible-text-decoration: var(--utrecht-link-focus-visible-text-decoration);
|
|
467
|
-
--utrecht-skip-link-text-decoration: var(--utrecht-link-text-decoration);
|
|
468
512
|
--utrecht-separator-margin-block-start: var(--utrecht-space-block-md);
|
|
469
513
|
--utrecht-separator-margin-block-end: var(--utrecht-space-block-md);
|
|
470
514
|
--utrecht-separator-color: var(--utrecht-color-grey-90);
|
|
@@ -509,14 +553,7 @@
|
|
|
509
553
|
--utrecht-pre-heading-margin-block-start: var(--utrecht-space-row-2xl);
|
|
510
554
|
--utrecht-pre-heading-font-size: var(--utrecht-typography-scale-md-font-size);
|
|
511
555
|
--utrecht-paragraph-small-font-size: var(--utrecht-typography-scale-sm-font-size);
|
|
512
|
-
--utrecht-paragraph-lead-line-height: var(--utrecht-typography-line-height-md);
|
|
513
|
-
--utrecht-paragraph-lead-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
|
|
514
|
-
--utrecht-paragraph-lead-font-size: var(--utrecht-typography-scale-xl-font-size);
|
|
515
556
|
--utrecht-paragraph-margin-block-start: var(--utrecht-space-block-md);
|
|
516
|
-
--utrecht-paragraph-line-height: var(--utrecht-typography-line-height-md);
|
|
517
|
-
--utrecht-paragraph-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
|
|
518
|
-
--utrecht-paragraph-font-size: var(--utrecht-typography-scale-md-font-size);
|
|
519
|
-
--utrecht-paragraph-font-family: var(--utrecht-typography-sans-serif-font-family);
|
|
520
557
|
--utrecht-pagination-relative-link-hover-color: var(--utrecht-color-white);
|
|
521
558
|
--utrecht-pagination-relative-link-hover-border-color: var(--utrecht-color-blue-35);
|
|
522
559
|
--utrecht-pagination-relative-link-hover-background-color: var(--utrecht-color-blue-35);
|
|
@@ -542,9 +579,8 @@
|
|
|
542
579
|
--utrecht-page-footer-background-image: linear-gradient(45deg, var(--utrecht-color-red-40), var(--utrecht-color-red-40) 50%, #d63433 50%);;
|
|
543
580
|
--utrecht-page-footer-background-color: var(--utrecht-color-red-40);
|
|
544
581
|
--utrecht-page-footer-color: var(--utrecht-color-white);
|
|
545
|
-
--utrecht-number-badge-
|
|
546
|
-
--utrecht-number-badge-
|
|
547
|
-
--utrecht-number-badge-background-color: var(--utrecht-color-red-40);
|
|
582
|
+
--utrecht-number-badge-padding-inline: var(--nl-number-badge-padding-inline); /* Default inline padding color for badge components */
|
|
583
|
+
--utrecht-number-badge-padding-block: var(--nl-number-badge-padding-block); /* Default block padding for badge components */
|
|
548
584
|
--utrecht-topnav-link-hover-background-color: var(--utrecht-color-black);
|
|
549
585
|
--utrecht-topnav-link-focus-outline-color: var(--utrecht-color-black);
|
|
550
586
|
--utrecht-topnav-link-focus-background-color: var(--utrecht-color-yellow-80);
|
|
@@ -570,8 +606,6 @@
|
|
|
570
606
|
--utrecht-nav-bar-content-max-inline-size: var(--utrecht-page-max-inline-size);
|
|
571
607
|
--utrecht-nav-bar-color: var(--utrecht-color-black);
|
|
572
608
|
--utrecht-nav-bar-background-color: var(--utrecht-color-white);
|
|
573
|
-
--utrecht-mark-color: var(--utrecht-color-black);
|
|
574
|
-
--utrecht-mark-background-color: var(--utrecht-color-yellow-60);
|
|
575
609
|
--utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
|
|
576
610
|
--utrecht-mapcontrolbutton-padding-inline-end: var(--utrecht-space-inline-2xs);
|
|
577
611
|
--utrecht-mapcontrolbutton-padding-block-start: var(--utrecht-space-block-2xs);
|
|
@@ -628,30 +662,6 @@
|
|
|
628
662
|
--utrecht-index-char-nav-margin-block-end: var(--utrecht-space-block-md);
|
|
629
663
|
--utrecht-index-char-nav-margin-block-start: var(--utrecht-space-block-lg);
|
|
630
664
|
--utrecht-heading-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
|
|
631
|
-
--utrecht-heading-6-line-height: var(--utrecht-typography-line-height-md);
|
|
632
|
-
--utrecht-heading-6-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
|
|
633
|
-
--utrecht-heading-6-font-size: var(--utrecht-typography-scale-sm-font-size);
|
|
634
|
-
--utrecht-heading-6-font-family: var(--utrecht-typography-sans-serif-font-family);
|
|
635
|
-
--utrecht-heading-5-line-height: var(--utrecht-typography-line-height-md);
|
|
636
|
-
--utrecht-heading-5-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
|
|
637
|
-
--utrecht-heading-5-font-size: var(--utrecht-typography-scale-sm-font-size);
|
|
638
|
-
--utrecht-heading-5-font-family: var(--utrecht-typography-sans-serif-font-family);
|
|
639
|
-
--utrecht-heading-4-line-height: var(--utrecht-typography-line-height-md);
|
|
640
|
-
--utrecht-heading-4-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
|
|
641
|
-
--utrecht-heading-4-font-size: var(--utrecht-typography-scale-lg-font-size);
|
|
642
|
-
--utrecht-heading-4-font-family: var(--utrecht-typography-sans-serif-font-family);
|
|
643
|
-
--utrecht-heading-3-line-height: var(--utrecht-typography-line-height-sm);
|
|
644
|
-
--utrecht-heading-3-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
|
|
645
|
-
--utrecht-heading-3-font-size: var(--utrecht-typography-scale-xl-font-size);
|
|
646
|
-
--utrecht-heading-3-font-family: var(--utrecht-typography-sans-serif-font-family);
|
|
647
|
-
--utrecht-heading-2-line-height: var(--utrecht-typography-line-height-sm);
|
|
648
|
-
--utrecht-heading-2-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
|
|
649
|
-
--utrecht-heading-2-font-size: var(--utrecht-typography-scale-xl-font-size);
|
|
650
|
-
--utrecht-heading-2-font-family: var(--utrecht-typography-sans-serif-font-family);
|
|
651
|
-
--utrecht-heading-1-line-height: var(--utrecht-typography-line-height-sm);
|
|
652
|
-
--utrecht-heading-1-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
|
|
653
|
-
--utrecht-heading-1-font-size: var(--utrecht-typography-scale-4xl-font-size);
|
|
654
|
-
--utrecht-heading-1-font-family: var(--utrecht-typography-sans-serif-font-family);
|
|
655
665
|
--utrecht-form-toggle-focus-border-color: var(--utrecht-color-black);
|
|
656
666
|
--utrecht-form-toggle-checked-accent-color: var(--utrecht-color-blue-35);
|
|
657
667
|
--utrecht-form-toggle-thumb-disabled-background-color: var(--utrecht-color-white);
|
|
@@ -728,12 +738,13 @@
|
|
|
728
738
|
--utrecht-feedback-danger-color: var(--utrecht-color-red-40);
|
|
729
739
|
--utrecht-column-layout-gap: var(--utrecht-space-column-md);
|
|
730
740
|
--utrecht-column-layout-column-rule-color: var(--utrecht-color-grey-80);
|
|
741
|
+
--utrecht-code-block-padding-inline-end: var(--nl-code-block-padding-inline);
|
|
742
|
+
--utrecht-code-block-padding-inline-start: var(--nl-code-block-padding-inline);
|
|
743
|
+
--utrecht-code-block-padding-block-end: var(--nl-code-block-padding-block);
|
|
744
|
+
--utrecht-code-block-padding-block-start: var(--nl-code-block-padding-block);
|
|
731
745
|
--utrecht-code-block-margin-block-end: var(--utrecht-space-block-lg);
|
|
732
746
|
--utrecht-code-block-margin-block-start: var(--utrecht-space-block-lg);
|
|
733
|
-
--utrecht-code-block-
|
|
734
|
-
--utrecht-code-block-font-size: var(--utrecht-typography-scale-md-font-size);
|
|
735
|
-
--utrecht-code-block-color: var(--utrecht-color-black);
|
|
736
|
-
--utrecht-code-block-background-color: var(--utrecht-color-grey-95);
|
|
747
|
+
--utrecht-code-block-font-family: var(--nl-code-block-font-family);
|
|
737
748
|
--utrecht-checkbox-indeterminate-background-color: var(--utrecht-color-blue-40);
|
|
738
749
|
--utrecht-checkbox-checked-background-color: var(--utrecht-color-blue-40);
|
|
739
750
|
--utrecht-checkbox-checked-border-color: var(--utrecht-color-blue-40);
|
|
@@ -868,10 +879,7 @@
|
|
|
868
879
|
--utrecht-blockquote-content-font-size: var(--utrecht-typography-scale-lg-font-size);
|
|
869
880
|
--utrecht-blockquote-content-color: var(--utrecht-color-red-40);
|
|
870
881
|
--utrecht-badge-font-style: var(--utrecht-typography-font-style-normal);
|
|
871
|
-
--utrecht-badge-
|
|
872
|
-
--utrecht-badge-padding-block: var(--utrecht-space-block-xs); /* Default block padding for badge components */
|
|
873
|
-
--utrecht-badge-color: var(--utrecht-color-white); /* Default text color for badge components */
|
|
874
|
-
--utrecht-badge-background-color: var(--utrecht-color-grey-30); /* Default background color for badge components */
|
|
882
|
+
--utrecht-badge-border-radius: var(--nl-data-badge-border-radius); /* Default corner radius for badge components */
|
|
875
883
|
--utrecht-badge-list-item-margin-inline: var(--utrecht-space-block-sm);
|
|
876
884
|
--utrecht-badge-list-item-margin-block: var(--utrecht-space-block-xs);
|
|
877
885
|
--utrecht-badge-counter-font-size: var(--utrecht-typography-scale-md-font-size);
|
|
@@ -927,28 +935,64 @@
|
|
|
927
935
|
--of-page-footer-fg: var(--utrecht-page-footer-color);
|
|
928
936
|
--of-page-footer-bg: var(--utrecht-page-footer-background-color);
|
|
929
937
|
--of-layout-background: var(--utrecht-document-background-color);
|
|
938
|
+
--nl-skip-link-focus-visible-background-color: var(--utrecht-topnav-link-focus-background-color);
|
|
939
|
+
--nl-skip-link-focus-visible-color: var(--utrecht-topnav-link-focus-color);
|
|
940
|
+
--nl-skip-link-padding-inline: var(--utrecht-button-padding-inline-start);
|
|
941
|
+
--nl-skip-link-padding-block: var(--utrecht-button-padding-block-start);
|
|
942
|
+
--nl-skip-link-color: var(--utrecht-topnav-link-color);
|
|
943
|
+
--nl-skip-link-background-color: var(--utrecht-topnav-list-background-color);
|
|
944
|
+
--nl-paragraph-lead-color: var(--utrecht-document-color);
|
|
945
|
+
--nl-number-badge-border-radius: var(--nl-number-badge-font-size);
|
|
930
946
|
--denhaag-process-steps-sub-step-line-color: var(--denhaag-process-steps-step-line-color);
|
|
931
947
|
--utrecht-toptask-link-hover-color: var(--utrecht-button-primary-action-hover-color);
|
|
932
948
|
--utrecht-toptask-link-hover-background-color: var(--utrecht-button-primary-action-hover-background-color);
|
|
933
949
|
--utrecht-toptask-link-color: var(--utrecht-button-primary-action-color);
|
|
934
950
|
--utrecht-toptask-link-background-color: var(--utrecht-button-primary-action-background-color);
|
|
935
|
-
--utrecht-skip-link-focus-
|
|
936
|
-
--utrecht-skip-link-
|
|
937
|
-
--utrecht-skip-link-padding-inline-end: var(--utrecht-button-padding-inline-end);
|
|
938
|
-
--utrecht-skip-link-padding-inline-start: var(--utrecht-button-padding-inline-start);
|
|
939
|
-
--utrecht-skip-link-padding-block-end: var(--utrecht-button-padding-block-end);
|
|
940
|
-
--utrecht-skip-link-padding-block-start: var(--utrecht-button-padding-block-start);
|
|
941
|
-
--utrecht-skip-link-color: var(--utrecht-topnav-link-color);
|
|
942
|
-
--utrecht-skip-link-background-color: var(--utrecht-topnav-list-background-color);
|
|
951
|
+
--utrecht-skip-link-focus-visible-text-decoration: var(--nl-skip-link-focus-visible-text-decoration);
|
|
952
|
+
--utrecht-skip-link-text-decoration: var(--nl-skip-link-text-decoration);
|
|
943
953
|
--utrecht-radio-button-border-color: var(--utrecht-form-control-border-color);
|
|
944
954
|
--utrecht-radio-button-background-color: var(--utrecht-form-control-background-color);
|
|
945
|
-
--utrecht-paragraph-lead-
|
|
946
|
-
--utrecht-
|
|
955
|
+
--utrecht-paragraph-lead-line-height: var(--nl-paragraph-lead-line-height);
|
|
956
|
+
--utrecht-paragraph-lead-font-weight: var(--nl-paragraph-lead-font-weight);
|
|
957
|
+
--utrecht-paragraph-lead-font-size: var(--nl-paragraph-lead-font-size);
|
|
958
|
+
--utrecht-paragraph-line-height: var(--nl-paragraph-line-height);
|
|
959
|
+
--utrecht-paragraph-font-weight: var(--nl-paragraph-font-weight);
|
|
960
|
+
--utrecht-paragraph-font-size: var(--nl-paragraph-font-size);
|
|
961
|
+
--utrecht-paragraph-font-family: var(--nl-paragraph-font-family);
|
|
962
|
+
--utrecht-number-badge-font-size: var(--nl-number-badge-font-size);
|
|
963
|
+
--utrecht-number-badge-color: var(--nl-number-badge-color); /* Default text color for badge components */
|
|
964
|
+
--utrecht-number-badge-background-color: var(--nl-number-badge-background-color);
|
|
965
|
+
--utrecht-mark-color: var(--nl-mark-color);
|
|
966
|
+
--utrecht-mark-background-color: var(--nl-mark-background-color);
|
|
947
967
|
--utrecht-listbox-border-width: var(--utrecht-form-control-border-width);
|
|
948
968
|
--utrecht-listbox-border-color: var(--utrecht-form-control-border-color);
|
|
949
969
|
--utrecht-link-visited-color: var(--utrecht-link-color);
|
|
950
970
|
--utrecht-link-hover-color: var(--utrecht-link-focus-color);
|
|
951
971
|
--utrecht-link-active-color: var(--utrecht-link-color);
|
|
972
|
+
--utrecht-heading-6-line-height: var(--nl-heading-level-6-line-height);
|
|
973
|
+
--utrecht-heading-6-font-weight: var(--nl-heading-level-6-font-weight);
|
|
974
|
+
--utrecht-heading-6-font-size: var(--nl-heading-level-6-font-size);
|
|
975
|
+
--utrecht-heading-6-font-family: var(--nl-heading-level-6-font-family);
|
|
976
|
+
--utrecht-heading-5-line-height: var(--nl-heading-level-5-line-height);
|
|
977
|
+
--utrecht-heading-5-font-weight: var(--nl-heading-level-5-font-weight);
|
|
978
|
+
--utrecht-heading-5-font-size: var(--nl-heading-level-5-font-size);
|
|
979
|
+
--utrecht-heading-5-font-family: var(--nl-heading-level-5-font-family);
|
|
980
|
+
--utrecht-heading-4-line-height: var(--nl-heading-level-4-line-height);
|
|
981
|
+
--utrecht-heading-4-font-weight: var(--nl-heading-level-4-font-weight);
|
|
982
|
+
--utrecht-heading-4-font-size: var(--nl-heading-level-4-font-size);
|
|
983
|
+
--utrecht-heading-4-font-family: var(--nl-heading-level-4-font-family);
|
|
984
|
+
--utrecht-heading-3-line-height: var(--nl-heading-level-3-line-height);
|
|
985
|
+
--utrecht-heading-3-font-weight: var(--nl-heading-level-3-font-weight);
|
|
986
|
+
--utrecht-heading-3-font-size: var(--nl-heading-level-3-font-size);
|
|
987
|
+
--utrecht-heading-3-font-family: var(--nl-heading-level-3-font-family);
|
|
988
|
+
--utrecht-heading-2-line-height: var(--nl-heading-level-2-line-height);
|
|
989
|
+
--utrecht-heading-2-font-weight: var(--nl-heading-level-2-font-weight);
|
|
990
|
+
--utrecht-heading-2-font-size: var(--nl-heading-level-2-font-size);
|
|
991
|
+
--utrecht-heading-2-font-family: var(--nl-heading-level-2-font-family);
|
|
992
|
+
--utrecht-heading-1-line-height: var(--nl-heading-level-1-line-height);
|
|
993
|
+
--utrecht-heading-1-font-weight: var(--nl-heading-level-1-font-weight);
|
|
994
|
+
--utrecht-heading-1-font-size: var(--nl-heading-level-1-font-size);
|
|
995
|
+
--utrecht-heading-1-font-family: var(--nl-heading-level-1-font-family);
|
|
952
996
|
--utrecht-form-field-error-message-color: var(--utrecht-feedback-invalid-color);
|
|
953
997
|
--utrecht-form-field-description-warning-color: var(--utrecht-feedback-warning-color);
|
|
954
998
|
--utrecht-form-field-description-invalid-color: var(--utrecht-feedback-invalid-color);
|
|
@@ -968,6 +1012,10 @@
|
|
|
968
1012
|
--utrecht-feedback-warning-background-color: var(--utrecht-feedback-warning-color);
|
|
969
1013
|
--utrecht-feedback-danger-border-color: var(--utrecht-feedback-danger-color);
|
|
970
1014
|
--utrecht-feedback-danger-background-color: var(--utrecht-feedback-danger-color);
|
|
1015
|
+
--utrecht-code-block-line-height: var(--nl-code-block-line-height);
|
|
1016
|
+
--utrecht-code-block-font-size: var(--nl-code-block-font-size);
|
|
1017
|
+
--utrecht-code-block-color: var(--nl-code-block-color);
|
|
1018
|
+
--utrecht-code-block-background-color: var(--nl-code-block-background-color);
|
|
971
1019
|
--utrecht-checkbox-color: var(--utrecht-form-control-color);
|
|
972
1020
|
--utrecht-checkbox-border-color: var(--utrecht-form-control-border-color);
|
|
973
1021
|
--utrecht-checkbox-background-color: var(--utrecht-form-control-background-color);
|
|
@@ -982,9 +1030,22 @@
|
|
|
982
1030
|
--utrecht-button-pressed-background-color: var(--utrecht-button-active-background-color);
|
|
983
1031
|
--utrecht-breadcrumb-nav-arrows-link-focus-background-color: var(--utrecht-focus-background-color);
|
|
984
1032
|
--utrecht-breadcrumb-nav-link-focus-background-color: var(--utrecht-focus-background-color);
|
|
1033
|
+
--utrecht-badge-padding-inline: var(--nl-data-badge-padding-inline); /* Default inline padding color for badge components */
|
|
1034
|
+
--utrecht-badge-padding-block: var(--nl-data-badge-padding-block); /* Default block padding for badge components */
|
|
1035
|
+
--utrecht-badge-color: var(--nl-data-badge-color); /* Default text color for badge components */
|
|
1036
|
+
--utrecht-badge-background-color: var(--nl-data-badge-background-color); /* Default background color for badge components */
|
|
985
1037
|
--utrecht-badge-counter-border-radius: var(--utrecht-badge-counter-font-size); /* Default corner radius for badge components */
|
|
986
1038
|
--of-layout-bg: var(--of-layout-background);
|
|
1039
|
+
--utrecht-skip-link-focus-color: var(--nl-skip-link-focus-visible-color);
|
|
1040
|
+
--utrecht-skip-link-focus-background-color: var(--nl-skip-link-focus-visible-background-color);
|
|
1041
|
+
--utrecht-skip-link-padding-inline-end: var(--nl-skip-link-padding-inline);
|
|
1042
|
+
--utrecht-skip-link-padding-inline-start: var(--nl-skip-link-padding-inline);
|
|
1043
|
+
--utrecht-skip-link-padding-block-end: var(--nl-skip-link-padding-block);
|
|
1044
|
+
--utrecht-skip-link-padding-block-start: var(--nl-skip-link-padding-block);
|
|
1045
|
+
--utrecht-skip-link-color: var(--nl-skip-link-color);
|
|
1046
|
+
--utrecht-skip-link-background-color: var(--nl-skip-link-background-color);
|
|
987
1047
|
--utrecht-radio-button-invalid-border-color: var(--utrecht-form-control-invalid-border-color);
|
|
1048
|
+
--utrecht-number-badge-border-radius: var(--nl-number-badge-border-radius);
|
|
988
1049
|
--utrecht-form-field-invalid-border-inline-start-color: var(--utrecht-form-control-invalid-border-color);
|
|
989
1050
|
--utrecht-form-field-description-valid-color: var(--utrecht-feedback-valid-color);
|
|
990
1051
|
--utrecht-feedback-active-border-color: var(--utrecht-feedback-safe-border-color);
|