@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.
Files changed (83) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/dist/_mixin-theme.scss +165 -76
  3. package/dist/_mixin.scss +165 -76
  4. package/dist/_variables.scss +165 -76
  5. package/dist/dark/_mixin-theme.scss +165 -76
  6. package/dist/dark/_mixin.scss +165 -76
  7. package/dist/dark/_variables.scss +165 -76
  8. package/dist/dark/index.cjs +104 -15
  9. package/dist/dark/index.css +165 -76
  10. package/dist/dark/index.d.ts +97 -8
  11. package/dist/dark/index.flat.json +102 -13
  12. package/dist/dark/index.json +11111 -9439
  13. package/dist/dark/index.mjs +103 -14
  14. package/dist/dark/index.tokens.json +369 -248
  15. package/dist/dark/list.json +11111 -9439
  16. package/dist/dark/list.mjs +11111 -9439
  17. package/dist/dark/property.css +19 -7
  18. package/dist/dark/root.css +164 -75
  19. package/dist/dark/theme-prince-xml.css +165 -76
  20. package/dist/dark/theme.css +164 -75
  21. package/dist/dark/tokens.cjs +2051 -347
  22. package/dist/dark/tokens.d.ts +255 -126
  23. package/dist/dark/tokens.json +2051 -347
  24. package/dist/dark/variables.cjs +104 -15
  25. package/dist/dark/variables.css +164 -75
  26. package/dist/dark/variables.d.ts +97 -8
  27. package/dist/dark/variables.json +102 -13
  28. package/dist/dark/variables.less +165 -76
  29. package/dist/dark/variables.mjs +103 -14
  30. package/dist/index.cjs +104 -15
  31. package/dist/index.css +330 -152
  32. package/dist/index.d.ts +97 -8
  33. package/dist/index.flat.json +102 -13
  34. package/dist/index.json +2175 -503
  35. package/dist/index.mjs +103 -14
  36. package/dist/index.tokens.json +369 -248
  37. package/dist/list.json +2175 -503
  38. package/dist/list.mjs +2175 -503
  39. package/dist/property.css +19 -7
  40. package/dist/root.css +164 -75
  41. package/dist/theme-prince-xml.css +165 -76
  42. package/dist/theme.css +164 -75
  43. package/dist/tokens.cjs +2051 -347
  44. package/dist/tokens.d.ts +255 -126
  45. package/dist/tokens.json +2051 -347
  46. package/dist/variables.cjs +104 -15
  47. package/dist/variables.css +164 -75
  48. package/dist/variables.d.ts +97 -8
  49. package/dist/variables.json +102 -13
  50. package/dist/variables.less +165 -76
  51. package/dist/variables.mjs +103 -14
  52. package/package.json +1 -1
  53. package/src/component/nl/code-block.tokens.json +13 -0
  54. package/src/component/nl/code.tokens.json +11 -0
  55. package/src/component/nl/data-badge.tokens.json +22 -0
  56. package/src/component/nl/heading.tokens.json +48 -0
  57. package/src/component/nl/mark.tokens.json +8 -0
  58. package/src/component/nl/number-badge.tokens.json +23 -0
  59. package/src/component/nl/paragraph.tokens.json +20 -0
  60. package/src/component/nl/skip-link.tokens.json +16 -0
  61. package/src/component/signalen/signalen.tokens.json +17 -0
  62. package/src/component/utrecht/badge.tokens.json +5 -5
  63. package/src/component/utrecht/body.tokens.json +11 -0
  64. package/src/component/utrecht/code-block.tokens.json +9 -9
  65. package/src/component/utrecht/heading-1.tokens.json +4 -4
  66. package/src/component/utrecht/heading-2.tokens.json +4 -4
  67. package/src/component/utrecht/heading-3.tokens.json +4 -4
  68. package/src/component/utrecht/heading-4.tokens.json +4 -4
  69. package/src/component/utrecht/heading-5.tokens.json +4 -4
  70. package/src/component/utrecht/heading-6.tokens.json +4 -4
  71. package/src/component/utrecht/link-list.tokens.json +3 -0
  72. package/src/component/utrecht/mark.tokens.json +2 -2
  73. package/src/component/utrecht/nav-bar.tokens.json +0 -2
  74. package/src/component/utrecht/number-badge.tokens.json +6 -6
  75. package/src/component/utrecht/page-body.tokens.json +19 -0
  76. package/src/component/utrecht/page-footer.tokens.json +6 -4
  77. package/src/component/utrecht/page-header.tokens.json +14 -4
  78. package/src/component/utrecht/page.tokens.json +2 -2
  79. package/src/component/utrecht/paragraph.tokens.json +8 -8
  80. package/src/component/utrecht/root.tokens.json +8 -0
  81. package/src/component/utrecht/skip-link.tokens.json +10 -10
  82. package/project.json +0 -25
  83. package/src/component/utrecht/badge-data.tokens.json +0 -8
package/CHANGELOG.md CHANGED
@@ -1,5 +1,26 @@
1
1
  # @utrecht/design-tokens
2
2
 
3
+ ## 2.5.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 882e10d: Add design tokens for `body`, `nav-bar`, `page-body`, `page-footer`, `page-header` and `root`.
8
+ - 3bc0dd6: Add some design tokens for the Signalen application.
9
+
10
+ ## 2.4.0
11
+
12
+ ### Minor Changes
13
+
14
+ - 6ce885b: Add design tokens for NL Design System Candidate components:
15
+
16
+ - `nl-code-block…`
17
+ - `nl-data-badge`
18
+ - `nl-heading`
19
+ - `nl-mark`
20
+ - `nl-number-badge`
21
+ - `nl-paragraph`
22
+ - `nl-skip-link`
23
+
3
24
  ## 2.3.0
4
25
 
5
26
  ### Minor Changes
package/dist/_mixin-theme.scss CHANGED
@@ -3,7 +3,14 @@
3
3
  */
4
4
 
5
5
  @mixin utrecht-theme {
6
+ --signalen-progress-bar-border-radius: 4px;
6
7
  --of-progress-indicator-mobile-box-shadow: 0px 0px 2px 0px rgba(0 0 0 / 20%);
8
+ --nl-number-badge-padding-inline: 1ex;
9
+ --nl-number-badge-padding-block: 1ex;
10
+ --nl-data-badge-border-radius: 0;
11
+ --nl-code-block-padding-inline: 20px;
12
+ --nl-code-block-padding-block: 20px;
13
+ --nl-code-block-font-family: "Monaco";
7
14
  --denhaag-process-steps-sub-step-marker-size: 12px;
8
15
  --denhaag-process-steps-step-marker-size: 28px;
9
16
  --utrecht-toptask-nav-link-grid-max-inline-size: 240px;
@@ -147,19 +154,35 @@
147
154
  --utrecht-pagination-page-link-background-color: transparent;
148
155
  --utrecht-pagination-margin-block-end: 1em;
149
156
  --utrecht-pagination-margin-block-start: 0;
150
- --utrecht-page-padding-inline-start: 2em;
157
+ --utrecht-page-padding-inline-start: 0;
151
158
  --utrecht-page-padding-block-end: 1em;
152
- --utrecht-page-padding-inline-end: 2em;
159
+ --utrecht-page-padding-inline-end: 0;
153
160
  --utrecht-page-padding-block-start: 1.8em;
154
161
  --utrecht-page-max-inline-size: 1184px;
155
162
  --utrecht-page-margin-inline-end: 2em;
156
163
  --utrecht-page-margin-inline-start: 2em;
157
- --utrecht-page-header-padding-inline-end: 2.4em;
158
- --utrecht-page-header-padding-inline-start: 2em;
159
- --utrecht-page-header-padding-block-end: 1em;
160
- --utrecht-page-header-padding-block-start: 1.8em;
164
+ --utrecht-page-header-content-padding-inline: 2em;
165
+ --utrecht-page-header-content-max-inline-size: 1184px;
166
+ --utrecht-page-header-content-padding-inline-end: 2.4em;
167
+ --utrecht-page-header-content-padding-inline-start: 2em;
168
+ --utrecht-page-header-content-padding-block-end: 1em;
169
+ --utrecht-page-header-content-padding-block-start: 1.8em;
170
+ --utrecht-page-header-padding-inline-end: 0;
171
+ --utrecht-page-header-padding-inline-start: 0;
172
+ --utrecht-page-header-padding-block-end: 0;
173
+ --utrecht-page-header-padding-block-start: 0;
174
+ --utrecht-page-footer-content-max-inline-size: 1184px;
161
175
  --utrecht-page-content-padding-block-end: 2em;
162
176
  --utrecht-page-content-padding-block-start: 2em;
177
+ --utrecht-page-body-padding-block-start: 0;
178
+ --utrecht-page-body-padding-block-end: 0;
179
+ --utrecht-page-body-padding-inline-start: 0;
180
+ --utrecht-page-body-padding-inline-end: 0;
181
+ --utrecht-page-body-content-padding-inline-end: 2.4em;
182
+ --utrecht-page-body-content-max-inline-size: 1184px;
183
+ --utrecht-page-body-content-padding-inline-start: 2em;
184
+ --utrecht-page-body-content-padding-block-end: 1em;
185
+ --utrecht-page-body-content-padding-block-start: 0;
163
186
  --utrecht-ordered-list-item-padding-inline-start: 0;
164
187
  --utrecht-ordered-list-item-margin-block-end: 0.25em;
165
188
  --utrecht-ordered-list-item-margin-block-start: 0.25em;
@@ -168,8 +191,6 @@
168
191
  --utrecht-ordered-list-margin-block-start: 0;
169
192
  --utrecht-number-data-negative-color: red;
170
193
  --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
194
  --utrecht-topnav-link-focus-text-decoration: none;
174
195
  --utrecht-topnav-link-focus-border-type: dotted;
175
196
  --utrecht-mapcontrolbutton-margin-inline-start: 0;
@@ -198,6 +219,7 @@
198
219
  --utrecht-link-social-icon-size: 26px;
199
220
  --utrecht-link-social-size: 40px;
200
221
  --utrecht-link-social-border-width: 2px;
222
+ --utrecht-link-list-icon-inset-block-start: 0.15em;
201
223
  --utrecht-link-list-icon-size: 14px;
202
224
  --utrecht-link-list-link-text-decoration: none;
203
225
  --utrecht-icon-baseline-inset-block-start: 0.125em;
@@ -310,10 +332,6 @@
310
332
  --utrecht-action-activate-cursor: pointer;
311
333
  --utrecht-column-layout-column-width: 350px;
312
334
  --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
335
  --utrecht-checkbox-margin-block-start: 0;
318
336
  --utrecht-checkbox-focus-border-width: 2px;
319
337
  --utrecht-checkbox-size: 24px;
@@ -360,11 +378,11 @@
360
378
  --utrecht-breadcrumb-nav-link-hover-text-decoration: underline;
361
379
  --utrecht-breadcrumb-nav-link-focus-text-decoration: underline;
362
380
  --utrecht-breadcrumb-nav-min-block-size: 34px;
381
+ --utrecht-body-line-height: 1.4;
363
382
  --utrecht-blockquote-margin-block-end: 1.6em;
364
383
  --utrecht-blockquote-margin-block-start: 1.6em;
365
384
  --utrecht-blockquote-margin-inline-end: 1.6em;
366
385
  --utrecht-blockquote-margin-inline-start: 1.6em;
367
- --utrecht-badge-border-radius: 0; /* Default corner radius for badge components */
368
386
  --utrecht-badge-counter-padding-inline: 1ex; /* Default inline padding color for badge components */
369
387
  --utrecht-badge-counter-padding-block: 1ex; /* Default block padding for badge components */
370
388
  --utrecht-backdrop-reduced-transparency-opacity: 0.98;
@@ -380,6 +398,53 @@
380
398
  --utrecht-accordion-button-icon-size: 24px;
381
399
  --utrecht-accordion-button-hover-background-color: inherit;
382
400
  --utrecht-accordion-button-border-width: 0;
401
+ --nl-skip-link-focus-visible-text-decoration: var(--utrecht-link-focus-visible-text-decoration);
402
+ --nl-skip-link-text-decoration: var(--utrecht-link-text-decoration);
403
+ --nl-paragraph-small-font-size: var(--utrecht-typography-scale-sm-font-size);
404
+ --nl-paragraph-lead-line-height: var(--utrecht-typography-line-height-md);
405
+ --nl-paragraph-lead-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
406
+ --nl-paragraph-lead-font-size: var(--utrecht-typography-scale-xl-font-size);
407
+ --nl-paragraph-line-height: var(--utrecht-typography-line-height-md);
408
+ --nl-paragraph-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
409
+ --nl-paragraph-font-size: var(--utrecht-typography-scale-md-font-size);
410
+ --nl-paragraph-font-family: var(--utrecht-typography-sans-serif-font-family);
411
+ --nl-number-badge-font-size: var(--utrecht-typography-scale-md-font-size);
412
+ --nl-number-badge-color: var(--utrecht-color-white);
413
+ --nl-number-badge-background-color: var(--utrecht-color-red-40);
414
+ --nl-mark-color: var(--utrecht-color-black);
415
+ --nl-mark-background-color: var(--utrecht-color-yellow-60);
416
+ --nl-heading-level-6-line-height: var(--utrecht-typography-line-height-md);
417
+ --nl-heading-level-6-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
418
+ --nl-heading-level-6-font-size: var(--utrecht-typography-scale-sm-font-size);
419
+ --nl-heading-level-6-font-family: var(--utrecht-typography-sans-serif-font-family);
420
+ --nl-heading-level-5-line-height: var(--utrecht-typography-line-height-md);
421
+ --nl-heading-level-5-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
422
+ --nl-heading-level-5-font-size: var(--utrecht-typography-scale-sm-font-size);
423
+ --nl-heading-level-5-font-family: var(--utrecht-typography-sans-serif-font-family);
424
+ --nl-heading-level-4-line-height: var(--utrecht-typography-line-height-md);
425
+ --nl-heading-level-4-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
426
+ --nl-heading-level-4-font-size: var(--utrecht-typography-scale-lg-font-size);
427
+ --nl-heading-level-4-font-family: var(--utrecht-typography-sans-serif-font-family);
428
+ --nl-heading-level-3-line-height: var(--utrecht-typography-line-height-sm);
429
+ --nl-heading-level-3-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
430
+ --nl-heading-level-3-font-size: var(--utrecht-typography-scale-xl-font-size);
431
+ --nl-heading-level-3-font-family: var(--utrecht-typography-sans-serif-font-family);
432
+ --nl-heading-level-2-line-height: var(--utrecht-typography-line-height-sm);
433
+ --nl-heading-level-2-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
434
+ --nl-heading-level-2-font-size: var(--utrecht-typography-scale-xl-font-size);
435
+ --nl-heading-level-2-font-family: var(--utrecht-typography-sans-serif-font-family);
436
+ --nl-heading-level-1-line-height: var(--utrecht-typography-line-height-sm);
437
+ --nl-heading-level-1-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
438
+ --nl-heading-level-1-font-size: var(--utrecht-typography-scale-4xl-font-size);
439
+ --nl-heading-level-1-font-family: var(--utrecht-typography-sans-serif-font-family);
440
+ --nl-data-badge-padding-inline: var(--utrecht-space-inline-sm);
441
+ --nl-data-badge-padding-block: var(--utrecht-space-block-xs);
442
+ --nl-data-badge-color: var(--utrecht-color-white);
443
+ --nl-data-badge-background-color: var(--utrecht-color-grey-30);
444
+ --nl-code-block-line-height: var(--utrecht-typography-line-height-md);
445
+ --nl-code-block-font-size: var(--utrecht-typography-scale-md-font-size);
446
+ --nl-code-block-color: var(--utrecht-color-black);
447
+ --nl-code-block-background-color: var(--utrecht-color-grey-95);
383
448
  --denhaag-process-steps-sub-step-heading-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
384
449
  --denhaag-process-steps-sub-step-heading-font-size: var(--utrecht-typography-scale-sm-font-size);
385
450
  --denhaag-process-steps-sub-step-heading-color: var(--utrecht-color-grey-15);
@@ -463,8 +528,6 @@
463
528
  --utrecht-spotlight-section-padding-block-start: var(--utrecht-space-block-md);
464
529
  --utrecht-spotlight-section-color: var(--utrecht-color-black);
465
530
  --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
531
  --utrecht-separator-margin-block-start: var(--utrecht-space-block-md);
469
532
  --utrecht-separator-margin-block-end: var(--utrecht-space-block-md);
470
533
  --utrecht-separator-color: var(--utrecht-color-grey-90);
@@ -488,11 +551,12 @@
488
551
  --utrecht-search-bar-button-color: var(--utrecht-color-white);
489
552
  --utrecht-search-bar-button-border-color: var(--utrecht-color-red-40);
490
553
  --utrecht-search-bar-button-background-color: var(--utrecht-color-red-40);
554
+ --utrecht-root-color: var(--utrecht-color-grey-10);
555
+ --utrecht-root-background-color: var(--utrecht-color-grey-95);
491
556
  --utrecht-rich-text-best-friend-margin-block-end: var(--utrecht-space-block-2xs);
492
557
  --utrecht-rich-text-friend-margin-block-end: var(--utrecht-space-block-xs);
493
558
  --utrecht-rich-text-acquaintance-margin-block-end: var(--utrecht-space-block-md);
494
559
  --utrecht-rich-text-stranger-margin-block-end: var(--utrecht-space-block-2xl);
495
- --utrecht-radio-button-color: var(--utrecht-color-white);
496
560
  --utrecht-radio-button-disabled-color: var(--utrecht-color-white);
497
561
  --utrecht-radio-button-disabled-border-color: var(--utrecht-color-grey-80);
498
562
  --utrecht-radio-button-disabled-background-color: var(--utrecht-color-grey-80);
@@ -506,17 +570,11 @@
506
570
  --utrecht-radio-button-checked-border-color: var(--utrecht-color-blue-40);
507
571
  --utrecht-radio-button-checked-background-color: var(--utrecht-color-blue-40);
508
572
  --utrecht-radio-button-active-background-color: var(--utrecht-color-blue-80);
573
+ --utrecht-radio-button-color: var(--utrecht-color-white);
509
574
  --utrecht-pre-heading-margin-block-start: var(--utrecht-space-row-2xl);
510
575
  --utrecht-pre-heading-font-size: var(--utrecht-typography-scale-md-font-size);
511
576
  --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
577
  --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
578
  --utrecht-pagination-relative-link-hover-color: var(--utrecht-color-white);
521
579
  --utrecht-pagination-relative-link-hover-border-color: var(--utrecht-color-blue-35);
522
580
  --utrecht-pagination-relative-link-hover-background-color: var(--utrecht-color-blue-35);
@@ -535,16 +593,18 @@
535
593
  --utrecht-pagination-font-size: var(--utrecht-typography-scale-sm-font-size);
536
594
  --utrecht-page-color: var(--utrecht-color-black);
537
595
  --utrecht-page-background-color: var(--utrecht-color-white);
538
- --utrecht-page-footer-padding-block-start: var(--utrecht-space-block-3xl);
539
- --utrecht-page-footer-padding-block-end: var(--utrecht-space-block-3xl);
540
- --utrecht-page-footer-padding-inline-start: var(--utrecht-space-inline-2xl);
541
- --utrecht-page-footer-padding-inline-end: var(--utrecht-space-inline-2xl);
596
+ --utrecht-page-header-content-color: var(--utrecht-color-black);
597
+ --utrecht-page-header-content-background-color: var(--utrecht-color-white);
598
+ --utrecht-page-footer-content-padding-inline: var(--utrecht-space-inline-2xl);
599
+ --utrecht-page-footer-content-padding-block-start: var(--utrecht-space-block-3xl);
600
+ --utrecht-page-footer-content-padding-block-end: var(--utrecht-space-block-3xl);
542
601
  --utrecht-page-footer-background-image: linear-gradient(45deg, var(--utrecht-color-red-40), var(--utrecht-color-red-40) 50%, #d63433 50%);;
543
602
  --utrecht-page-footer-background-color: var(--utrecht-color-red-40);
544
603
  --utrecht-page-footer-color: var(--utrecht-color-white);
545
- --utrecht-number-badge-font-size: var(--utrecht-typography-scale-md-font-size);
546
- --utrecht-number-badge-color: var(--utrecht-color-white); /* Default text color for badge components */
547
- --utrecht-number-badge-background-color: var(--utrecht-color-red-40);
604
+ --utrecht-page-body-content-color: var(--utrecht-color-black);
605
+ --utrecht-page-body-content-background-color: var(--utrecht-color-white);
606
+ --utrecht-number-badge-padding-inline: var(--nl-number-badge-padding-inline); /* Default inline padding color for badge components */
607
+ --utrecht-number-badge-padding-block: var(--nl-number-badge-padding-block); /* Default block padding for badge components */
548
608
  --utrecht-topnav-link-hover-background-color: var(--utrecht-color-black);
549
609
  --utrecht-topnav-link-focus-outline-color: var(--utrecht-color-black);
550
610
  --utrecht-topnav-link-focus-background-color: var(--utrecht-color-yellow-80);
@@ -568,10 +628,6 @@
568
628
  --utrecht-nav-bar-link-padding-block-start: var(--utrecht-space-block-xs);
569
629
  --utrecht-nav-bar-link-padding-block-end: var(--utrecht-space-block-xs);
570
630
  --utrecht-nav-bar-content-max-inline-size: var(--utrecht-page-max-inline-size);
571
- --utrecht-nav-bar-color: var(--utrecht-color-black);
572
- --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
631
  --utrecht-mapcontrolbutton-padding-inline-start: var(--utrecht-space-inline-2xs);
576
632
  --utrecht-mapcontrolbutton-padding-inline-end: var(--utrecht-space-inline-2xs);
577
633
  --utrecht-mapcontrolbutton-padding-block-start: var(--utrecht-space-block-2xs);
@@ -628,30 +684,6 @@
628
684
  --utrecht-index-char-nav-margin-block-end: var(--utrecht-space-block-md);
629
685
  --utrecht-index-char-nav-margin-block-start: var(--utrecht-space-block-lg);
630
686
  --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
687
  --utrecht-form-toggle-focus-border-color: var(--utrecht-color-black);
656
688
  --utrecht-form-toggle-checked-accent-color: var(--utrecht-color-blue-35);
657
689
  --utrecht-form-toggle-thumb-disabled-background-color: var(--utrecht-color-white);
@@ -728,12 +760,13 @@
728
760
  --utrecht-feedback-danger-color: var(--utrecht-color-red-40);
729
761
  --utrecht-column-layout-gap: var(--utrecht-space-column-md);
730
762
  --utrecht-column-layout-column-rule-color: var(--utrecht-color-grey-80);
763
+ --utrecht-code-block-padding-inline-end: var(--nl-code-block-padding-inline);
764
+ --utrecht-code-block-padding-inline-start: var(--nl-code-block-padding-inline);
765
+ --utrecht-code-block-padding-block-end: var(--nl-code-block-padding-block);
766
+ --utrecht-code-block-padding-block-start: var(--nl-code-block-padding-block);
731
767
  --utrecht-code-block-margin-block-end: var(--utrecht-space-block-lg);
732
768
  --utrecht-code-block-margin-block-start: var(--utrecht-space-block-lg);
733
- --utrecht-code-block-line-height: var(--utrecht-typography-line-height-md);
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);
769
+ --utrecht-code-block-font-family: var(--nl-code-block-font-family);
737
770
  --utrecht-checkbox-indeterminate-background-color: var(--utrecht-color-blue-40);
738
771
  --utrecht-checkbox-checked-background-color: var(--utrecht-color-blue-40);
739
772
  --utrecht-checkbox-checked-border-color: var(--utrecht-color-blue-40);
@@ -864,14 +897,15 @@
864
897
  --utrecht-breadcrumb-nav-item-padding-block-end: var(--utrecht-space-block-xs);
865
898
  --utrecht-breadcrumb-nav-item-padding-block-start: var(--utrecht-space-block-xs);
866
899
  --utrecht-breadcrumb-nav-font-size: var(--utrecht-typography-scale-md-font-size);
900
+ --utrecht-body-color: var(--utrecht-color-black);
901
+ --utrecht-body-background-color: var(--utrecht-color-white);
902
+ --utrecht-body-font-size: var(--utrecht-typography-scale-md-font-size);
903
+ --utrecht-body-font-family: var(--utrecht-typography-sans-serif-font-family);
867
904
  --utrecht-blockquote-caption-font-size: var(--utrecht-typography-scale-sm-font-size);
868
905
  --utrecht-blockquote-content-font-size: var(--utrecht-typography-scale-lg-font-size);
869
906
  --utrecht-blockquote-content-color: var(--utrecht-color-red-40);
870
907
  --utrecht-badge-font-style: var(--utrecht-typography-font-style-normal);
871
- --utrecht-badge-padding-inline: var(--utrecht-space-inline-sm); /* Default inline padding color for badge components */
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 */
908
+ --utrecht-badge-border-radius: var(--nl-data-badge-border-radius); /* Default corner radius for badge components */
875
909
  --utrecht-badge-list-item-margin-inline: var(--utrecht-space-block-sm);
876
910
  --utrecht-badge-list-item-margin-block: var(--utrecht-space-block-xs);
877
911
  --utrecht-badge-counter-font-size: var(--utrecht-typography-scale-md-font-size);
@@ -923,32 +957,70 @@
923
957
  --utrecht-accordion-button-padding-inline-start: var(--utrecht-space-block-md);
924
958
  --utrecht-accordion-button-padding-inline-end: var(--utrecht-space-block-md);
925
959
  --utrecht-accordion-row-gap: var(--utrecht-space-block-xs);
960
+ --signalen-modal-dialog-color: var(--utrecht-body-color);
961
+ --signalen-modal-dialog-background-color: var(--utrecht-body-background-color);
926
962
  --of-progress-indicator-background-color: var(--utrecht-document-background-color);
927
963
  --of-page-footer-fg: var(--utrecht-page-footer-color);
928
964
  --of-page-footer-bg: var(--utrecht-page-footer-background-color);
929
965
  --of-layout-background: var(--utrecht-document-background-color);
966
+ --nl-skip-link-focus-visible-background-color: var(--utrecht-topnav-link-focus-background-color);
967
+ --nl-skip-link-focus-visible-color: var(--utrecht-topnav-link-focus-color);
968
+ --nl-skip-link-padding-inline: var(--utrecht-button-padding-inline-start);
969
+ --nl-skip-link-padding-block: var(--utrecht-button-padding-block-start);
970
+ --nl-skip-link-color: var(--utrecht-topnav-link-color);
971
+ --nl-skip-link-background-color: var(--utrecht-topnav-list-background-color);
972
+ --nl-paragraph-lead-color: var(--utrecht-document-color);
973
+ --nl-number-badge-border-radius: var(--nl-number-badge-font-size);
930
974
  --denhaag-process-steps-sub-step-line-color: var(--denhaag-process-steps-step-line-color);
931
975
  --utrecht-toptask-link-hover-color: var(--utrecht-button-primary-action-hover-color);
932
976
  --utrecht-toptask-link-hover-background-color: var(--utrecht-button-primary-action-hover-background-color);
933
977
  --utrecht-toptask-link-color: var(--utrecht-button-primary-action-color);
934
978
  --utrecht-toptask-link-background-color: var(--utrecht-button-primary-action-background-color);
935
- --utrecht-skip-link-focus-color: var(--utrecht-topnav-link-focus-color);
936
- --utrecht-skip-link-focus-background-color: var(--utrecht-topnav-link-focus-background-color);
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);
979
+ --utrecht-skip-link-focus-visible-text-decoration: var(--nl-skip-link-focus-visible-text-decoration);
980
+ --utrecht-skip-link-text-decoration: var(--nl-skip-link-text-decoration);
943
981
  --utrecht-radio-button-border-color: var(--utrecht-form-control-border-color);
944
982
  --utrecht-radio-button-background-color: var(--utrecht-form-control-background-color);
945
- --utrecht-paragraph-lead-color: var(--utrecht-document-color);
946
- --utrecht-number-badge-border-radius: var(--utrecht-number-badge-font-size);
983
+ --utrecht-paragraph-lead-line-height: var(--nl-paragraph-lead-line-height);
984
+ --utrecht-paragraph-lead-font-weight: var(--nl-paragraph-lead-font-weight);
985
+ --utrecht-paragraph-lead-font-size: var(--nl-paragraph-lead-font-size);
986
+ --utrecht-paragraph-line-height: var(--nl-paragraph-line-height);
987
+ --utrecht-paragraph-font-weight: var(--nl-paragraph-font-weight);
988
+ --utrecht-paragraph-font-size: var(--nl-paragraph-font-size);
989
+ --utrecht-paragraph-font-family: var(--nl-paragraph-font-family);
990
+ --utrecht-number-badge-font-size: var(--nl-number-badge-font-size);
991
+ --utrecht-number-badge-color: var(--nl-number-badge-color); /* Default text color for badge components */
992
+ --utrecht-number-badge-background-color: var(--nl-number-badge-background-color);
993
+ --utrecht-mark-color: var(--nl-mark-color);
994
+ --utrecht-mark-background-color: var(--nl-mark-background-color);
947
995
  --utrecht-listbox-border-width: var(--utrecht-form-control-border-width);
948
996
  --utrecht-listbox-border-color: var(--utrecht-form-control-border-color);
949
997
  --utrecht-link-visited-color: var(--utrecht-link-color);
950
998
  --utrecht-link-hover-color: var(--utrecht-link-focus-color);
951
999
  --utrecht-link-active-color: var(--utrecht-link-color);
1000
+ --utrecht-heading-6-line-height: var(--nl-heading-level-6-line-height);
1001
+ --utrecht-heading-6-font-weight: var(--nl-heading-level-6-font-weight);
1002
+ --utrecht-heading-6-font-size: var(--nl-heading-level-6-font-size);
1003
+ --utrecht-heading-6-font-family: var(--nl-heading-level-6-font-family);
1004
+ --utrecht-heading-5-line-height: var(--nl-heading-level-5-line-height);
1005
+ --utrecht-heading-5-font-weight: var(--nl-heading-level-5-font-weight);
1006
+ --utrecht-heading-5-font-size: var(--nl-heading-level-5-font-size);
1007
+ --utrecht-heading-5-font-family: var(--nl-heading-level-5-font-family);
1008
+ --utrecht-heading-4-line-height: var(--nl-heading-level-4-line-height);
1009
+ --utrecht-heading-4-font-weight: var(--nl-heading-level-4-font-weight);
1010
+ --utrecht-heading-4-font-size: var(--nl-heading-level-4-font-size);
1011
+ --utrecht-heading-4-font-family: var(--nl-heading-level-4-font-family);
1012
+ --utrecht-heading-3-line-height: var(--nl-heading-level-3-line-height);
1013
+ --utrecht-heading-3-font-weight: var(--nl-heading-level-3-font-weight);
1014
+ --utrecht-heading-3-font-size: var(--nl-heading-level-3-font-size);
1015
+ --utrecht-heading-3-font-family: var(--nl-heading-level-3-font-family);
1016
+ --utrecht-heading-2-line-height: var(--nl-heading-level-2-line-height);
1017
+ --utrecht-heading-2-font-weight: var(--nl-heading-level-2-font-weight);
1018
+ --utrecht-heading-2-font-size: var(--nl-heading-level-2-font-size);
1019
+ --utrecht-heading-2-font-family: var(--nl-heading-level-2-font-family);
1020
+ --utrecht-heading-1-line-height: var(--nl-heading-level-1-line-height);
1021
+ --utrecht-heading-1-font-weight: var(--nl-heading-level-1-font-weight);
1022
+ --utrecht-heading-1-font-size: var(--nl-heading-level-1-font-size);
1023
+ --utrecht-heading-1-font-family: var(--nl-heading-level-1-font-family);
952
1024
  --utrecht-form-field-error-message-color: var(--utrecht-feedback-invalid-color);
953
1025
  --utrecht-form-field-description-warning-color: var(--utrecht-feedback-warning-color);
954
1026
  --utrecht-form-field-description-invalid-color: var(--utrecht-feedback-invalid-color);
@@ -968,6 +1040,10 @@
968
1040
  --utrecht-feedback-warning-background-color: var(--utrecht-feedback-warning-color);
969
1041
  --utrecht-feedback-danger-border-color: var(--utrecht-feedback-danger-color);
970
1042
  --utrecht-feedback-danger-background-color: var(--utrecht-feedback-danger-color);
1043
+ --utrecht-code-block-line-height: var(--nl-code-block-line-height);
1044
+ --utrecht-code-block-font-size: var(--nl-code-block-font-size);
1045
+ --utrecht-code-block-color: var(--nl-code-block-color);
1046
+ --utrecht-code-block-background-color: var(--nl-code-block-background-color);
971
1047
  --utrecht-checkbox-color: var(--utrecht-form-control-color);
972
1048
  --utrecht-checkbox-border-color: var(--utrecht-form-control-border-color);
973
1049
  --utrecht-checkbox-background-color: var(--utrecht-form-control-background-color);
@@ -982,9 +1058,22 @@
982
1058
  --utrecht-button-pressed-background-color: var(--utrecht-button-active-background-color);
983
1059
  --utrecht-breadcrumb-nav-arrows-link-focus-background-color: var(--utrecht-focus-background-color);
984
1060
  --utrecht-breadcrumb-nav-link-focus-background-color: var(--utrecht-focus-background-color);
1061
+ --utrecht-badge-padding-inline: var(--nl-data-badge-padding-inline); /* Default inline padding color for badge components */
1062
+ --utrecht-badge-padding-block: var(--nl-data-badge-padding-block); /* Default block padding for badge components */
1063
+ --utrecht-badge-color: var(--nl-data-badge-color); /* Default text color for badge components */
1064
+ --utrecht-badge-background-color: var(--nl-data-badge-background-color); /* Default background color for badge components */
985
1065
  --utrecht-badge-counter-border-radius: var(--utrecht-badge-counter-font-size); /* Default corner radius for badge components */
986
1066
  --of-layout-bg: var(--of-layout-background);
1067
+ --utrecht-skip-link-focus-color: var(--nl-skip-link-focus-visible-color);
1068
+ --utrecht-skip-link-focus-background-color: var(--nl-skip-link-focus-visible-background-color);
1069
+ --utrecht-skip-link-padding-inline-end: var(--nl-skip-link-padding-inline);
1070
+ --utrecht-skip-link-padding-inline-start: var(--nl-skip-link-padding-inline);
1071
+ --utrecht-skip-link-padding-block-end: var(--nl-skip-link-padding-block);
1072
+ --utrecht-skip-link-padding-block-start: var(--nl-skip-link-padding-block);
1073
+ --utrecht-skip-link-color: var(--nl-skip-link-color);
1074
+ --utrecht-skip-link-background-color: var(--nl-skip-link-background-color);
987
1075
  --utrecht-radio-button-invalid-border-color: var(--utrecht-form-control-invalid-border-color);
1076
+ --utrecht-number-badge-border-radius: var(--nl-number-badge-border-radius);
988
1077
  --utrecht-form-field-invalid-border-inline-start-color: var(--utrecht-form-control-invalid-border-color);
989
1078
  --utrecht-form-field-description-valid-color: var(--utrecht-feedback-valid-color);
990
1079
  --utrecht-feedback-active-border-color: var(--utrecht-feedback-safe-border-color);