@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
@@ -1,7 +1,14 @@
1
1
 
2
2
  // Do not edit directly, this file was auto-generated.
3
3
 
4
+ $signalen-progress-bar-border-radius: 4px;
4
5
  $of-progress-indicator-mobile-box-shadow: 0px 0px 2px 0px rgba(0 0 0 / 20%);
6
+ $nl-number-badge-padding-inline: 1ex;
7
+ $nl-number-badge-padding-block: 1ex;
8
+ $nl-data-badge-border-radius: 0;
9
+ $nl-code-block-padding-inline: 20px;
10
+ $nl-code-block-padding-block: 20px;
11
+ $nl-code-block-font-family: "Monaco";
5
12
  $denhaag-process-steps-sub-step-marker-size: 12px;
6
13
  $denhaag-process-steps-step-marker-size: 28px;
7
14
  $utrecht-toptask-nav-link-grid-max-inline-size: 240px;
@@ -145,19 +152,35 @@ $utrecht-pagination-page-link-border-color: transparent;
145
152
  $utrecht-pagination-page-link-background-color: transparent;
146
153
  $utrecht-pagination-margin-block-end: 1em;
147
154
  $utrecht-pagination-margin-block-start: 0;
148
- $utrecht-page-padding-inline-start: 2em;
155
+ $utrecht-page-padding-inline-start: 0;
149
156
  $utrecht-page-padding-block-end: 1em;
150
- $utrecht-page-padding-inline-end: 2em;
157
+ $utrecht-page-padding-inline-end: 0;
151
158
  $utrecht-page-padding-block-start: 1.8em;
152
159
  $utrecht-page-max-inline-size: 1184px;
153
160
  $utrecht-page-margin-inline-end: 2em;
154
161
  $utrecht-page-margin-inline-start: 2em;
155
- $utrecht-page-header-padding-inline-end: 2.4em;
156
- $utrecht-page-header-padding-inline-start: 2em;
157
- $utrecht-page-header-padding-block-end: 1em;
158
- $utrecht-page-header-padding-block-start: 1.8em;
162
+ $utrecht-page-header-content-padding-inline: 2em;
163
+ $utrecht-page-header-content-max-inline-size: 1184px;
164
+ $utrecht-page-header-content-padding-inline-end: 2.4em;
165
+ $utrecht-page-header-content-padding-inline-start: 2em;
166
+ $utrecht-page-header-content-padding-block-end: 1em;
167
+ $utrecht-page-header-content-padding-block-start: 1.8em;
168
+ $utrecht-page-header-padding-inline-end: 0;
169
+ $utrecht-page-header-padding-inline-start: 0;
170
+ $utrecht-page-header-padding-block-end: 0;
171
+ $utrecht-page-header-padding-block-start: 0;
172
+ $utrecht-page-footer-content-max-inline-size: 1184px;
159
173
  $utrecht-page-content-padding-block-end: 2em;
160
174
  $utrecht-page-content-padding-block-start: 2em;
175
+ $utrecht-page-body-padding-block-start: 0;
176
+ $utrecht-page-body-padding-block-end: 0;
177
+ $utrecht-page-body-padding-inline-start: 0;
178
+ $utrecht-page-body-padding-inline-end: 0;
179
+ $utrecht-page-body-content-padding-inline-end: 2.4em;
180
+ $utrecht-page-body-content-max-inline-size: 1184px;
181
+ $utrecht-page-body-content-padding-inline-start: 2em;
182
+ $utrecht-page-body-content-padding-block-end: 1em;
183
+ $utrecht-page-body-content-padding-block-start: 0;
161
184
  $utrecht-ordered-list-item-padding-inline-start: 0;
162
185
  $utrecht-ordered-list-item-margin-block-end: 0.25em;
163
186
  $utrecht-ordered-list-item-margin-block-start: 0.25em;
@@ -166,8 +189,6 @@ $utrecht-ordered-list-margin-block-end: 1em;
166
189
  $utrecht-ordered-list-margin-block-start: 0;
167
190
  $utrecht-number-data-negative-color: red;
168
191
  $utrecht-number-data-positive-color: green;
169
- $utrecht-number-badge-padding-inline: 1ex; // Default inline padding color for badge components
170
- $utrecht-number-badge-padding-block: 1ex; // Default block padding for badge components
171
192
  $utrecht-topnav-link-focus-text-decoration: none;
172
193
  $utrecht-topnav-link-focus-border-type: dotted;
173
194
  $utrecht-mapcontrolbutton-margin-inline-start: 0;
@@ -196,6 +217,7 @@ $utrecht-link-social-hover-transform-scale: 1.1;
196
217
  $utrecht-link-social-icon-size: 26px;
197
218
  $utrecht-link-social-size: 40px;
198
219
  $utrecht-link-social-border-width: 2px;
220
+ $utrecht-link-list-icon-inset-block-start: 0.15em;
199
221
  $utrecht-link-list-icon-size: 14px;
200
222
  $utrecht-link-list-link-text-decoration: none;
201
223
  $utrecht-icon-baseline-inset-block-start: 0.125em;
@@ -308,10 +330,6 @@ $utrecht-action-busy-cursor: wait;
308
330
  $utrecht-action-activate-cursor: pointer;
309
331
  $utrecht-column-layout-column-width: 350px;
310
332
  $utrecht-column-layout-column-rule-width: 2px;
311
- $utrecht-code-block-padding-inline-end: 20px;
312
- $utrecht-code-block-padding-inline-start: 20px;
313
- $utrecht-code-block-padding-block-end: 20px;
314
- $utrecht-code-block-padding-block-start: 20px;
315
333
  $utrecht-checkbox-margin-block-start: 0;
316
334
  $utrecht-checkbox-focus-border-width: 2px;
317
335
  $utrecht-checkbox-size: 24px;
@@ -358,11 +376,11 @@ $utrecht-breadcrumb-nav-link-text-decoration: none;
358
376
  $utrecht-breadcrumb-nav-link-hover-text-decoration: underline;
359
377
  $utrecht-breadcrumb-nav-link-focus-text-decoration: underline;
360
378
  $utrecht-breadcrumb-nav-min-block-size: 34px;
379
+ $utrecht-body-line-height: 1.4;
361
380
  $utrecht-blockquote-margin-block-end: 1.6em;
362
381
  $utrecht-blockquote-margin-block-start: 1.6em;
363
382
  $utrecht-blockquote-margin-inline-end: 1.6em;
364
383
  $utrecht-blockquote-margin-inline-start: 1.6em;
365
- $utrecht-badge-border-radius: 0; // Default corner radius for badge components
366
384
  $utrecht-badge-counter-padding-inline: 1ex; // Default inline padding color for badge components
367
385
  $utrecht-badge-counter-padding-block: 1ex; // Default block padding for badge components
368
386
  $utrecht-backdrop-reduced-transparency-opacity: 0.98;
@@ -378,6 +396,53 @@ $utrecht-accordion-panel-border-width: 2px;
378
396
  $utrecht-accordion-button-icon-size: 24px;
379
397
  $utrecht-accordion-button-hover-background-color: inherit;
380
398
  $utrecht-accordion-button-border-width: 0;
399
+ $nl-skip-link-focus-visible-text-decoration: $utrecht-link-focus-visible-text-decoration;
400
+ $nl-skip-link-text-decoration: $utrecht-link-text-decoration;
401
+ $nl-paragraph-small-font-size: $utrecht-typography-scale-sm-font-size;
402
+ $nl-paragraph-lead-line-height: $utrecht-typography-line-height-md;
403
+ $nl-paragraph-lead-font-weight: $utrecht-typography-weight-scale-normal-font-weight;
404
+ $nl-paragraph-lead-font-size: $utrecht-typography-scale-xl-font-size;
405
+ $nl-paragraph-line-height: $utrecht-typography-line-height-md;
406
+ $nl-paragraph-font-weight: $utrecht-typography-weight-scale-normal-font-weight;
407
+ $nl-paragraph-font-size: $utrecht-typography-scale-md-font-size;
408
+ $nl-paragraph-font-family: $utrecht-typography-sans-serif-font-family;
409
+ $nl-number-badge-font-size: $utrecht-typography-scale-md-font-size;
410
+ $nl-number-badge-color: $utrecht-color-white;
411
+ $nl-number-badge-background-color: $utrecht-color-red-40;
412
+ $nl-mark-color: $utrecht-color-black;
413
+ $nl-mark-background-color: $utrecht-color-yellow-60;
414
+ $nl-heading-level-6-line-height: $utrecht-typography-line-height-md;
415
+ $nl-heading-level-6-font-weight: $utrecht-typography-weight-scale-normal-font-weight;
416
+ $nl-heading-level-6-font-size: $utrecht-typography-scale-sm-font-size;
417
+ $nl-heading-level-6-font-family: $utrecht-typography-sans-serif-font-family;
418
+ $nl-heading-level-5-line-height: $utrecht-typography-line-height-md;
419
+ $nl-heading-level-5-font-weight: $utrecht-typography-weight-scale-normal-font-weight;
420
+ $nl-heading-level-5-font-size: $utrecht-typography-scale-sm-font-size;
421
+ $nl-heading-level-5-font-family: $utrecht-typography-sans-serif-font-family;
422
+ $nl-heading-level-4-line-height: $utrecht-typography-line-height-md;
423
+ $nl-heading-level-4-font-weight: $utrecht-typography-weight-scale-normal-font-weight;
424
+ $nl-heading-level-4-font-size: $utrecht-typography-scale-lg-font-size;
425
+ $nl-heading-level-4-font-family: $utrecht-typography-sans-serif-font-family;
426
+ $nl-heading-level-3-line-height: $utrecht-typography-line-height-sm;
427
+ $nl-heading-level-3-font-weight: $utrecht-typography-weight-scale-normal-font-weight;
428
+ $nl-heading-level-3-font-size: $utrecht-typography-scale-xl-font-size;
429
+ $nl-heading-level-3-font-family: $utrecht-typography-sans-serif-font-family;
430
+ $nl-heading-level-2-line-height: $utrecht-typography-line-height-sm;
431
+ $nl-heading-level-2-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
432
+ $nl-heading-level-2-font-size: $utrecht-typography-scale-xl-font-size;
433
+ $nl-heading-level-2-font-family: $utrecht-typography-sans-serif-font-family;
434
+ $nl-heading-level-1-line-height: $utrecht-typography-line-height-sm;
435
+ $nl-heading-level-1-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
436
+ $nl-heading-level-1-font-size: $utrecht-typography-scale-4xl-font-size;
437
+ $nl-heading-level-1-font-family: $utrecht-typography-sans-serif-font-family;
438
+ $nl-data-badge-padding-inline: $utrecht-space-inline-sm;
439
+ $nl-data-badge-padding-block: $utrecht-space-block-xs;
440
+ $nl-data-badge-color: $utrecht-color-white;
441
+ $nl-data-badge-background-color: $utrecht-color-grey-30;
442
+ $nl-code-block-line-height: $utrecht-typography-line-height-md;
443
+ $nl-code-block-font-size: $utrecht-typography-scale-md-font-size;
444
+ $nl-code-block-color: $utrecht-color-black;
445
+ $nl-code-block-background-color: $utrecht-color-grey-95;
381
446
  $denhaag-process-steps-sub-step-heading-font-weight: $utrecht-typography-weight-scale-normal-font-weight;
382
447
  $denhaag-process-steps-sub-step-heading-font-size: $utrecht-typography-scale-sm-font-size;
383
448
  $denhaag-process-steps-sub-step-heading-color: $utrecht-color-grey-15;
@@ -461,8 +526,6 @@ $utrecht-spotlight-section-padding-block-end: $utrecht-space-block-sm;
461
526
  $utrecht-spotlight-section-padding-block-start: $utrecht-space-block-md;
462
527
  $utrecht-spotlight-section-color: $utrecht-color-black;
463
528
  $utrecht-spotlight-section-background-color: $utrecht-color-grey-90;
464
- $utrecht-skip-link-focus-visible-text-decoration: $utrecht-link-focus-visible-text-decoration;
465
- $utrecht-skip-link-text-decoration: $utrecht-link-text-decoration;
466
529
  $utrecht-separator-margin-block-start: $utrecht-space-block-md;
467
530
  $utrecht-separator-margin-block-end: $utrecht-space-block-md;
468
531
  $utrecht-separator-color: $utrecht-color-grey-90;
@@ -486,11 +549,12 @@ $utrecht-search-bar-button-font-size: $utrecht-typography-scale-sm-font-size;
486
549
  $utrecht-search-bar-button-color: $utrecht-color-white;
487
550
  $utrecht-search-bar-button-border-color: $utrecht-color-red-40;
488
551
  $utrecht-search-bar-button-background-color: $utrecht-color-red-40;
552
+ $utrecht-root-color: $utrecht-color-grey-10;
553
+ $utrecht-root-background-color: $utrecht-color-grey-95;
489
554
  $utrecht-rich-text-best-friend-margin-block-end: $utrecht-space-block-2xs;
490
555
  $utrecht-rich-text-friend-margin-block-end: $utrecht-space-block-xs;
491
556
  $utrecht-rich-text-acquaintance-margin-block-end: $utrecht-space-block-md;
492
557
  $utrecht-rich-text-stranger-margin-block-end: $utrecht-space-block-2xl;
493
- $utrecht-radio-button-color: $utrecht-color-white;
494
558
  $utrecht-radio-button-disabled-color: $utrecht-color-white;
495
559
  $utrecht-radio-button-disabled-border-color: $utrecht-color-grey-80;
496
560
  $utrecht-radio-button-disabled-background-color: $utrecht-color-grey-80;
@@ -504,17 +568,11 @@ $utrecht-radio-button-checked-active-background-color: $utrecht-color-blue-40;
504
568
  $utrecht-radio-button-checked-border-color: $utrecht-color-blue-40;
505
569
  $utrecht-radio-button-checked-background-color: $utrecht-color-blue-40;
506
570
  $utrecht-radio-button-active-background-color: $utrecht-color-blue-80;
571
+ $utrecht-radio-button-color: $utrecht-color-white;
507
572
  $utrecht-pre-heading-margin-block-start: $utrecht-space-row-2xl;
508
573
  $utrecht-pre-heading-font-size: $utrecht-typography-scale-md-font-size;
509
574
  $utrecht-paragraph-small-font-size: $utrecht-typography-scale-sm-font-size;
510
- $utrecht-paragraph-lead-line-height: $utrecht-typography-line-height-md;
511
- $utrecht-paragraph-lead-font-weight: $utrecht-typography-weight-scale-normal-font-weight;
512
- $utrecht-paragraph-lead-font-size: $utrecht-typography-scale-xl-font-size;
513
575
  $utrecht-paragraph-margin-block-start: $utrecht-space-block-md;
514
- $utrecht-paragraph-line-height: $utrecht-typography-line-height-md;
515
- $utrecht-paragraph-font-weight: $utrecht-typography-weight-scale-normal-font-weight;
516
- $utrecht-paragraph-font-size: $utrecht-typography-scale-md-font-size;
517
- $utrecht-paragraph-font-family: $utrecht-typography-sans-serif-font-family;
518
576
  $utrecht-pagination-relative-link-hover-color: $utrecht-color-white;
519
577
  $utrecht-pagination-relative-link-hover-border-color: $utrecht-color-blue-35;
520
578
  $utrecht-pagination-relative-link-hover-background-color: $utrecht-color-blue-35;
@@ -533,16 +591,18 @@ $utrecht-pagination-page-link-color: $utrecht-color-blue-35;
533
591
  $utrecht-pagination-font-size: $utrecht-typography-scale-sm-font-size;
534
592
  $utrecht-page-color: $utrecht-color-black;
535
593
  $utrecht-page-background-color: $utrecht-color-white;
536
- $utrecht-page-footer-padding-block-start: $utrecht-space-block-3xl;
537
- $utrecht-page-footer-padding-block-end: $utrecht-space-block-3xl;
538
- $utrecht-page-footer-padding-inline-start: $utrecht-space-inline-2xl;
539
- $utrecht-page-footer-padding-inline-end: $utrecht-space-inline-2xl;
594
+ $utrecht-page-header-content-color: $utrecht-color-black;
595
+ $utrecht-page-header-content-background-color: $utrecht-color-white;
596
+ $utrecht-page-footer-content-padding-inline: $utrecht-space-inline-2xl;
597
+ $utrecht-page-footer-content-padding-block-start: $utrecht-space-block-3xl;
598
+ $utrecht-page-footer-content-padding-block-end: $utrecht-space-block-3xl;
540
599
  $utrecht-page-footer-background-image: linear-gradient(45deg, $utrecht-color-red-40, $utrecht-color-red-40 50%, #d63433 50%);;
541
600
  $utrecht-page-footer-background-color: $utrecht-color-red-40;
542
601
  $utrecht-page-footer-color: $utrecht-color-white;
543
- $utrecht-number-badge-font-size: $utrecht-typography-scale-md-font-size;
544
- $utrecht-number-badge-color: $utrecht-color-white; // Default text color for badge components
545
- $utrecht-number-badge-background-color: $utrecht-color-red-40;
602
+ $utrecht-page-body-content-color: $utrecht-color-black;
603
+ $utrecht-page-body-content-background-color: $utrecht-color-white;
604
+ $utrecht-number-badge-padding-inline: $nl-number-badge-padding-inline; // Default inline padding color for badge components
605
+ $utrecht-number-badge-padding-block: $nl-number-badge-padding-block; // Default block padding for badge components
546
606
  $utrecht-topnav-link-hover-background-color: $utrecht-color-black;
547
607
  $utrecht-topnav-link-focus-outline-color: $utrecht-color-black;
548
608
  $utrecht-topnav-link-focus-background-color: $utrecht-color-yellow-80;
@@ -566,10 +626,6 @@ $utrecht-nav-bar-link-padding-inline-end: $utrecht-space-inline-md;
566
626
  $utrecht-nav-bar-link-padding-block-start: $utrecht-space-block-xs;
567
627
  $utrecht-nav-bar-link-padding-block-end: $utrecht-space-block-xs;
568
628
  $utrecht-nav-bar-content-max-inline-size: $utrecht-page-max-inline-size;
569
- $utrecht-nav-bar-color: $utrecht-color-black;
570
- $utrecht-nav-bar-background-color: $utrecht-color-white;
571
- $utrecht-mark-color: $utrecht-color-black;
572
- $utrecht-mark-background-color: $utrecht-color-yellow-60;
573
629
  $utrecht-mapcontrolbutton-padding-inline-start: $utrecht-space-inline-2xs;
574
630
  $utrecht-mapcontrolbutton-padding-inline-end: $utrecht-space-inline-2xs;
575
631
  $utrecht-mapcontrolbutton-padding-block-start: $utrecht-space-block-2xs;
@@ -626,30 +682,6 @@ $utrecht-index-char-nav-gap: $utrecht-space-column-sm;
626
682
  $utrecht-index-char-nav-margin-block-end: $utrecht-space-block-md;
627
683
  $utrecht-index-char-nav-margin-block-start: $utrecht-space-block-lg;
628
684
  $utrecht-heading-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
629
- $utrecht-heading-6-line-height: $utrecht-typography-line-height-md;
630
- $utrecht-heading-6-font-weight: $utrecht-typography-weight-scale-normal-font-weight;
631
- $utrecht-heading-6-font-size: $utrecht-typography-scale-sm-font-size;
632
- $utrecht-heading-6-font-family: $utrecht-typography-sans-serif-font-family;
633
- $utrecht-heading-5-line-height: $utrecht-typography-line-height-md;
634
- $utrecht-heading-5-font-weight: $utrecht-typography-weight-scale-normal-font-weight;
635
- $utrecht-heading-5-font-size: $utrecht-typography-scale-sm-font-size;
636
- $utrecht-heading-5-font-family: $utrecht-typography-sans-serif-font-family;
637
- $utrecht-heading-4-line-height: $utrecht-typography-line-height-md;
638
- $utrecht-heading-4-font-weight: $utrecht-typography-weight-scale-normal-font-weight;
639
- $utrecht-heading-4-font-size: $utrecht-typography-scale-lg-font-size;
640
- $utrecht-heading-4-font-family: $utrecht-typography-sans-serif-font-family;
641
- $utrecht-heading-3-line-height: $utrecht-typography-line-height-sm;
642
- $utrecht-heading-3-font-weight: $utrecht-typography-weight-scale-normal-font-weight;
643
- $utrecht-heading-3-font-size: $utrecht-typography-scale-xl-font-size;
644
- $utrecht-heading-3-font-family: $utrecht-typography-sans-serif-font-family;
645
- $utrecht-heading-2-line-height: $utrecht-typography-line-height-sm;
646
- $utrecht-heading-2-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
647
- $utrecht-heading-2-font-size: $utrecht-typography-scale-xl-font-size;
648
- $utrecht-heading-2-font-family: $utrecht-typography-sans-serif-font-family;
649
- $utrecht-heading-1-line-height: $utrecht-typography-line-height-sm;
650
- $utrecht-heading-1-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
651
- $utrecht-heading-1-font-size: $utrecht-typography-scale-4xl-font-size;
652
- $utrecht-heading-1-font-family: $utrecht-typography-sans-serif-font-family;
653
685
  $utrecht-form-toggle-focus-border-color: $utrecht-color-black;
654
686
  $utrecht-form-toggle-checked-accent-color: $utrecht-color-blue-35;
655
687
  $utrecht-form-toggle-thumb-disabled-background-color: $utrecht-color-white;
@@ -726,12 +758,13 @@ $utrecht-feedback-danger-fill-color: $utrecht-color-white;
726
758
  $utrecht-feedback-danger-color: $utrecht-color-red-40;
727
759
  $utrecht-column-layout-gap: $utrecht-space-column-md;
728
760
  $utrecht-column-layout-column-rule-color: $utrecht-color-grey-80;
761
+ $utrecht-code-block-padding-inline-end: $nl-code-block-padding-inline;
762
+ $utrecht-code-block-padding-inline-start: $nl-code-block-padding-inline;
763
+ $utrecht-code-block-padding-block-end: $nl-code-block-padding-block;
764
+ $utrecht-code-block-padding-block-start: $nl-code-block-padding-block;
729
765
  $utrecht-code-block-margin-block-end: $utrecht-space-block-lg;
730
766
  $utrecht-code-block-margin-block-start: $utrecht-space-block-lg;
731
- $utrecht-code-block-line-height: $utrecht-typography-line-height-md;
732
- $utrecht-code-block-font-size: $utrecht-typography-scale-md-font-size;
733
- $utrecht-code-block-color: $utrecht-color-black;
734
- $utrecht-code-block-background-color: $utrecht-color-grey-95;
767
+ $utrecht-code-block-font-family: $nl-code-block-font-family;
735
768
  $utrecht-checkbox-indeterminate-background-color: $utrecht-color-blue-40;
736
769
  $utrecht-checkbox-checked-background-color: $utrecht-color-blue-40;
737
770
  $utrecht-checkbox-checked-border-color: $utrecht-color-blue-40;
@@ -862,14 +895,15 @@ $utrecht-breadcrumb-nav-item-padding-inline-end: $utrecht-space-inline-xs;
862
895
  $utrecht-breadcrumb-nav-item-padding-block-end: $utrecht-space-block-xs;
863
896
  $utrecht-breadcrumb-nav-item-padding-block-start: $utrecht-space-block-xs;
864
897
  $utrecht-breadcrumb-nav-font-size: $utrecht-typography-scale-md-font-size;
898
+ $utrecht-body-color: $utrecht-color-black;
899
+ $utrecht-body-background-color: $utrecht-color-white;
900
+ $utrecht-body-font-size: $utrecht-typography-scale-md-font-size;
901
+ $utrecht-body-font-family: $utrecht-typography-sans-serif-font-family;
865
902
  $utrecht-blockquote-caption-font-size: $utrecht-typography-scale-sm-font-size;
866
903
  $utrecht-blockquote-content-font-size: $utrecht-typography-scale-lg-font-size;
867
904
  $utrecht-blockquote-content-color: $utrecht-color-red-40;
868
905
  $utrecht-badge-font-style: $utrecht-typography-font-style-normal;
869
- $utrecht-badge-padding-inline: $utrecht-space-inline-sm; // Default inline padding color for badge components
870
- $utrecht-badge-padding-block: $utrecht-space-block-xs; // Default block padding for badge components
871
- $utrecht-badge-color: $utrecht-color-white; // Default text color for badge components
872
- $utrecht-badge-background-color: $utrecht-color-grey-30; // Default background color for badge components
906
+ $utrecht-badge-border-radius: $nl-data-badge-border-radius; // Default corner radius for badge components
873
907
  $utrecht-badge-list-item-margin-inline: $utrecht-space-block-sm;
874
908
  $utrecht-badge-list-item-margin-block: $utrecht-space-block-xs;
875
909
  $utrecht-badge-counter-font-size: $utrecht-typography-scale-md-font-size;
@@ -921,32 +955,70 @@ $utrecht-accordion-button-padding-block-end: $utrecht-space-block-xs;
921
955
  $utrecht-accordion-button-padding-inline-start: $utrecht-space-block-md;
922
956
  $utrecht-accordion-button-padding-inline-end: $utrecht-space-block-md;
923
957
  $utrecht-accordion-row-gap: $utrecht-space-block-xs;
958
+ $signalen-modal-dialog-color: $utrecht-body-color;
959
+ $signalen-modal-dialog-background-color: $utrecht-body-background-color;
924
960
  $of-progress-indicator-background-color: $utrecht-document-background-color;
925
961
  $of-page-footer-fg: $utrecht-page-footer-color;
926
962
  $of-page-footer-bg: $utrecht-page-footer-background-color;
927
963
  $of-layout-background: $utrecht-document-background-color;
964
+ $nl-skip-link-focus-visible-background-color: $utrecht-topnav-link-focus-background-color;
965
+ $nl-skip-link-focus-visible-color: $utrecht-topnav-link-focus-color;
966
+ $nl-skip-link-padding-inline: $utrecht-button-padding-inline-start;
967
+ $nl-skip-link-padding-block: $utrecht-button-padding-block-start;
968
+ $nl-skip-link-color: $utrecht-topnav-link-color;
969
+ $nl-skip-link-background-color: $utrecht-topnav-list-background-color;
970
+ $nl-paragraph-lead-color: $utrecht-document-color;
971
+ $nl-number-badge-border-radius: $nl-number-badge-font-size;
928
972
  $denhaag-process-steps-sub-step-line-color: $denhaag-process-steps-step-line-color;
929
973
  $utrecht-toptask-link-hover-color: $utrecht-button-primary-action-hover-color;
930
974
  $utrecht-toptask-link-hover-background-color: $utrecht-button-primary-action-hover-background-color;
931
975
  $utrecht-toptask-link-color: $utrecht-button-primary-action-color;
932
976
  $utrecht-toptask-link-background-color: $utrecht-button-primary-action-background-color;
933
- $utrecht-skip-link-focus-color: $utrecht-topnav-link-focus-color;
934
- $utrecht-skip-link-focus-background-color: $utrecht-topnav-link-focus-background-color;
935
- $utrecht-skip-link-padding-inline-end: $utrecht-button-padding-inline-end;
936
- $utrecht-skip-link-padding-inline-start: $utrecht-button-padding-inline-start;
937
- $utrecht-skip-link-padding-block-end: $utrecht-button-padding-block-end;
938
- $utrecht-skip-link-padding-block-start: $utrecht-button-padding-block-start;
939
- $utrecht-skip-link-color: $utrecht-topnav-link-color;
940
- $utrecht-skip-link-background-color: $utrecht-topnav-list-background-color;
977
+ $utrecht-skip-link-focus-visible-text-decoration: $nl-skip-link-focus-visible-text-decoration;
978
+ $utrecht-skip-link-text-decoration: $nl-skip-link-text-decoration;
941
979
  $utrecht-radio-button-border-color: $utrecht-form-control-border-color;
942
980
  $utrecht-radio-button-background-color: $utrecht-form-control-background-color;
943
- $utrecht-paragraph-lead-color: $utrecht-document-color;
944
- $utrecht-number-badge-border-radius: $utrecht-number-badge-font-size;
981
+ $utrecht-paragraph-lead-line-height: $nl-paragraph-lead-line-height;
982
+ $utrecht-paragraph-lead-font-weight: $nl-paragraph-lead-font-weight;
983
+ $utrecht-paragraph-lead-font-size: $nl-paragraph-lead-font-size;
984
+ $utrecht-paragraph-line-height: $nl-paragraph-line-height;
985
+ $utrecht-paragraph-font-weight: $nl-paragraph-font-weight;
986
+ $utrecht-paragraph-font-size: $nl-paragraph-font-size;
987
+ $utrecht-paragraph-font-family: $nl-paragraph-font-family;
988
+ $utrecht-number-badge-font-size: $nl-number-badge-font-size;
989
+ $utrecht-number-badge-color: $nl-number-badge-color; // Default text color for badge components
990
+ $utrecht-number-badge-background-color: $nl-number-badge-background-color;
991
+ $utrecht-mark-color: $nl-mark-color;
992
+ $utrecht-mark-background-color: $nl-mark-background-color;
945
993
  $utrecht-listbox-border-width: $utrecht-form-control-border-width;
946
994
  $utrecht-listbox-border-color: $utrecht-form-control-border-color;
947
995
  $utrecht-link-visited-color: $utrecht-link-color;
948
996
  $utrecht-link-hover-color: $utrecht-link-focus-color;
949
997
  $utrecht-link-active-color: $utrecht-link-color;
998
+ $utrecht-heading-6-line-height: $nl-heading-level-6-line-height;
999
+ $utrecht-heading-6-font-weight: $nl-heading-level-6-font-weight;
1000
+ $utrecht-heading-6-font-size: $nl-heading-level-6-font-size;
1001
+ $utrecht-heading-6-font-family: $nl-heading-level-6-font-family;
1002
+ $utrecht-heading-5-line-height: $nl-heading-level-5-line-height;
1003
+ $utrecht-heading-5-font-weight: $nl-heading-level-5-font-weight;
1004
+ $utrecht-heading-5-font-size: $nl-heading-level-5-font-size;
1005
+ $utrecht-heading-5-font-family: $nl-heading-level-5-font-family;
1006
+ $utrecht-heading-4-line-height: $nl-heading-level-4-line-height;
1007
+ $utrecht-heading-4-font-weight: $nl-heading-level-4-font-weight;
1008
+ $utrecht-heading-4-font-size: $nl-heading-level-4-font-size;
1009
+ $utrecht-heading-4-font-family: $nl-heading-level-4-font-family;
1010
+ $utrecht-heading-3-line-height: $nl-heading-level-3-line-height;
1011
+ $utrecht-heading-3-font-weight: $nl-heading-level-3-font-weight;
1012
+ $utrecht-heading-3-font-size: $nl-heading-level-3-font-size;
1013
+ $utrecht-heading-3-font-family: $nl-heading-level-3-font-family;
1014
+ $utrecht-heading-2-line-height: $nl-heading-level-2-line-height;
1015
+ $utrecht-heading-2-font-weight: $nl-heading-level-2-font-weight;
1016
+ $utrecht-heading-2-font-size: $nl-heading-level-2-font-size;
1017
+ $utrecht-heading-2-font-family: $nl-heading-level-2-font-family;
1018
+ $utrecht-heading-1-line-height: $nl-heading-level-1-line-height;
1019
+ $utrecht-heading-1-font-weight: $nl-heading-level-1-font-weight;
1020
+ $utrecht-heading-1-font-size: $nl-heading-level-1-font-size;
1021
+ $utrecht-heading-1-font-family: $nl-heading-level-1-font-family;
950
1022
  $utrecht-form-field-error-message-color: $utrecht-feedback-invalid-color;
951
1023
  $utrecht-form-field-description-warning-color: $utrecht-feedback-warning-color;
952
1024
  $utrecht-form-field-description-invalid-color: $utrecht-feedback-invalid-color;
@@ -966,6 +1038,10 @@ $utrecht-feedback-warning-border-color: $utrecht-feedback-warning-color;
966
1038
  $utrecht-feedback-warning-background-color: $utrecht-feedback-warning-color;
967
1039
  $utrecht-feedback-danger-border-color: $utrecht-feedback-danger-color;
968
1040
  $utrecht-feedback-danger-background-color: $utrecht-feedback-danger-color;
1041
+ $utrecht-code-block-line-height: $nl-code-block-line-height;
1042
+ $utrecht-code-block-font-size: $nl-code-block-font-size;
1043
+ $utrecht-code-block-color: $nl-code-block-color;
1044
+ $utrecht-code-block-background-color: $nl-code-block-background-color;
969
1045
  $utrecht-checkbox-color: $utrecht-form-control-color;
970
1046
  $utrecht-checkbox-border-color: $utrecht-form-control-border-color;
971
1047
  $utrecht-checkbox-background-color: $utrecht-form-control-background-color;
@@ -980,9 +1056,22 @@ $utrecht-button-pressed-color: $utrecht-button-active-color;
980
1056
  $utrecht-button-pressed-background-color: $utrecht-button-active-background-color;
981
1057
  $utrecht-breadcrumb-nav-arrows-link-focus-background-color: $utrecht-focus-background-color;
982
1058
  $utrecht-breadcrumb-nav-link-focus-background-color: $utrecht-focus-background-color;
1059
+ $utrecht-badge-padding-inline: $nl-data-badge-padding-inline; // Default inline padding color for badge components
1060
+ $utrecht-badge-padding-block: $nl-data-badge-padding-block; // Default block padding for badge components
1061
+ $utrecht-badge-color: $nl-data-badge-color; // Default text color for badge components
1062
+ $utrecht-badge-background-color: $nl-data-badge-background-color; // Default background color for badge components
983
1063
  $utrecht-badge-counter-border-radius: $utrecht-badge-counter-font-size; // Default corner radius for badge components
984
1064
  $of-layout-bg: $of-layout-background;
1065
+ $utrecht-skip-link-focus-color: $nl-skip-link-focus-visible-color;
1066
+ $utrecht-skip-link-focus-background-color: $nl-skip-link-focus-visible-background-color;
1067
+ $utrecht-skip-link-padding-inline-end: $nl-skip-link-padding-inline;
1068
+ $utrecht-skip-link-padding-inline-start: $nl-skip-link-padding-inline;
1069
+ $utrecht-skip-link-padding-block-end: $nl-skip-link-padding-block;
1070
+ $utrecht-skip-link-padding-block-start: $nl-skip-link-padding-block;
1071
+ $utrecht-skip-link-color: $nl-skip-link-color;
1072
+ $utrecht-skip-link-background-color: $nl-skip-link-background-color;
985
1073
  $utrecht-radio-button-invalid-border-color: $utrecht-form-control-invalid-border-color;
1074
+ $utrecht-number-badge-border-radius: $nl-number-badge-border-radius;
986
1075
  $utrecht-form-field-invalid-border-inline-start-color: $utrecht-form-control-invalid-border-color;
987
1076
  $utrecht-form-field-description-valid-color: $utrecht-feedback-valid-color;
988
1077
  $utrecht-feedback-active-border-color: $utrecht-feedback-safe-border-color;