@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/dist/dark/index.mjs CHANGED
@@ -84,6 +84,11 @@ export const utrechtBlockquoteContentFontSize = "1.125rem";
84
84
  export const utrechtBlockquoteCaptionFontSize = "0.875rem";
85
85
  export const utrechtBlockquoteMarginBlockStart = "1.6em";
86
86
  export const utrechtBlockquoteMarginBlockEnd = "1.6em";
87
+ export const utrechtBodyFontFamily = "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif";
88
+ export const utrechtBodyFontSize = "1rem";
89
+ export const utrechtBodyLineHeight = "1.4";
90
+ export const utrechtBodyBackgroundColor = "hsl(0 0% 100%)";
91
+ export const utrechtBodyColor = "hsl(0 0% 0%)";
87
92
  export const utrechtBreadcrumbNavMinBlockSize = "34px";
88
93
  export const utrechtBreadcrumbNavFontSize = "1rem";
89
94
  export const utrechtBreadcrumbNavItemPaddingBlockStart = "8px";
@@ -284,6 +289,7 @@ export const utrechtCheckboxInvalidBorderColor = "#990000";
284
289
  export const utrechtCheckboxMarginBlockStart = 0;
285
290
  export const utrechtCodeBlockBackgroundColor = "hsl(0 0% 95%)";
286
291
  export const utrechtCodeBlockColor = "hsl(0 0% 0%)";
292
+ export const utrechtCodeBlockFontFamily = "\"Monaco\"";
287
293
  export const utrechtCodeBlockFontSize = "1rem";
288
294
  export const utrechtCodeBlockLineHeight = "1.5";
289
295
  export const utrechtCodeBlockMarginBlockStart = "20px";
@@ -551,6 +557,7 @@ export const utrechtLinkListLinkColumnGap = "8px";
551
557
  export const utrechtLinkListLinkFontWeight = "700";
552
558
  export const utrechtLinkListLinkTextDecoration = "none";
553
559
  export const utrechtLinkListIconSize = "14px";
560
+ export const utrechtLinkListIconInsetBlockStart = "0.15em";
554
561
  export const utrechtLinkSocialBackgroundColor = "hsl(0 100% 40%)";
555
562
  export const utrechtLinkSocialBorderColor = "hsl(0 0% 100%)";
556
563
  export const utrechtLinkSocialBorderWidth = "2px";
@@ -632,8 +639,6 @@ export const utrechtMapcontrolbuttonPaddingInlineEnd = "4px";
632
639
  export const utrechtMapcontrolbuttonPaddingInlineStart = "4px";
633
640
  export const utrechtMarkBackgroundColor = "hsl(48 100% 60%)";
634
641
  export const utrechtMarkColor = "hsl(0 0% 0%)";
635
- export const utrechtNavBarBackgroundColor = "hsl(0 0% 100%)";
636
- export const utrechtNavBarColor = "hsl(0 0% 0%)";
637
642
  export const utrechtNavBarContentMaxInlineSize = "1184px";
638
643
  export const utrechtNavBarLinkPaddingBlockEnd = "8px";
639
644
  export const utrechtNavBarLinkPaddingBlockStart = "8px";
@@ -673,28 +678,47 @@ export const utrechtOrderedListPaddingInlineStart = "28.8px";
673
678
  export const utrechtOrderedListItemMarginBlockStart = "0.25em";
674
679
  export const utrechtOrderedListItemMarginBlockEnd = "0.25em";
675
680
  export const utrechtOrderedListItemPaddingInlineStart = "0";
681
+ export const utrechtPageBodyContentBackgroundColor = "hsl(0 0% 100%)";
682
+ export const utrechtPageBodyContentColor = "hsl(0 0% 0%)";
683
+ export const utrechtPageBodyContentPaddingBlockStart = "0";
684
+ export const utrechtPageBodyContentPaddingBlockEnd = "1em";
685
+ export const utrechtPageBodyContentPaddingInlineStart = "2em";
686
+ export const utrechtPageBodyContentMaxInlineSize = "1184px";
687
+ export const utrechtPageBodyContentPaddingInlineEnd = "2.4em";
688
+ export const utrechtPageBodyPaddingInlineEnd = "0";
689
+ export const utrechtPageBodyPaddingInlineStart = "0";
690
+ export const utrechtPageBodyPaddingBlockEnd = "0";
691
+ export const utrechtPageBodyPaddingBlockStart = "0";
676
692
  export const utrechtPageContentPaddingBlockStart = "2em";
677
693
  export const utrechtPageContentPaddingBlockEnd = "2em";
678
694
  export const utrechtPageFooterColor = "hsl(0 0% 100%)";
679
695
  export const utrechtPageFooterBackgroundColor = "hsl(0 100% 40%)";
680
696
  export const utrechtPageFooterBackgroundImage = "linear-gradient(45deg, hsl(0 100% 40%), hsl(0 100% 40%) 50%, #d63433 50%);";
681
- export const utrechtPageFooterPaddingInlineEnd = "28px";
682
- export const utrechtPageFooterPaddingInlineStart = "28px";
683
- export const utrechtPageFooterPaddingBlockEnd = "48px";
684
- export const utrechtPageFooterPaddingBlockStart = "48px";
685
- export const utrechtPageHeaderPaddingBlockStart = "1.8em";
686
- export const utrechtPageHeaderPaddingBlockEnd = "1em";
687
- export const utrechtPageHeaderPaddingInlineStart = "2em";
688
- export const utrechtPageHeaderPaddingInlineEnd = "2.4em";
697
+ export const utrechtPageFooterContentPaddingBlockEnd = "48px";
698
+ export const utrechtPageFooterContentPaddingBlockStart = "48px";
699
+ export const utrechtPageFooterContentMaxInlineSize = "1184px";
700
+ export const utrechtPageFooterContentPaddingInline = "28px";
701
+ export const utrechtPageHeaderPaddingBlockStart = "0";
702
+ export const utrechtPageHeaderPaddingBlockEnd = "0";
703
+ export const utrechtPageHeaderPaddingInlineStart = "0";
704
+ export const utrechtPageHeaderPaddingInlineEnd = "0";
705
+ export const utrechtPageHeaderContentBackgroundColor = "hsl(0 0% 100%)";
706
+ export const utrechtPageHeaderContentColor = "hsl(0 0% 0%)";
707
+ export const utrechtPageHeaderContentPaddingBlockStart = "1.8em";
708
+ export const utrechtPageHeaderContentPaddingBlockEnd = "1em";
709
+ export const utrechtPageHeaderContentPaddingInlineStart = "2em";
710
+ export const utrechtPageHeaderContentPaddingInlineEnd = "2.4em";
711
+ export const utrechtPageHeaderContentMaxInlineSize = "1184px";
712
+ export const utrechtPageHeaderContentPaddingInline = "2em";
689
713
  export const utrechtPageBackgroundColor = "hsl(0 0% 15%)";
690
714
  export const utrechtPageColor = "hsl(0 0% 95%)";
691
715
  export const utrechtPageMarginInlineStart = "2em";
692
716
  export const utrechtPageMarginInlineEnd = "2em";
693
717
  export const utrechtPageMaxInlineSize = "1184px";
694
718
  export const utrechtPagePaddingBlockStart = "1.8em";
695
- export const utrechtPagePaddingInlineEnd = "2em";
719
+ export const utrechtPagePaddingInlineEnd = "0";
696
720
  export const utrechtPagePaddingBlockEnd = "1em";
697
- export const utrechtPagePaddingInlineStart = "2em";
721
+ export const utrechtPagePaddingInlineStart = "0";
698
722
  export const utrechtPaginationFontSize = "0.875rem";
699
723
  export const utrechtPaginationMarginBlockStart = "0";
700
724
  export const utrechtPaginationMarginBlockEnd = "1em";
@@ -737,7 +761,6 @@ export const utrechtParagraphFontWeight = "400";
737
761
  export const utrechtParagraphLineHeight = "1.5";
738
762
  export const utrechtParagraphMarginBlockStart = "16px";
739
763
  export const utrechtParagraphMarginBlockEnd = "0";
740
- export const utrechtParagraphLeadColor = "hsl(0 0% 95%)";
741
764
  export const utrechtParagraphLeadFontSize = "1.25rem";
742
765
  export const utrechtParagraphLeadFontWeight = "400";
743
766
  export const utrechtParagraphLeadLineHeight = "1.5";
@@ -747,6 +770,7 @@ export const utrechtPreHeadingMarginBlockStart = "28px";
747
770
  export const utrechtRadioButtonBackgroundColor = "hsl(0 0% 20%)";
748
771
  export const utrechtRadioButtonBorderColor = "hsl(0 0% 95%)";
749
772
  export const utrechtRadioButtonBorderWidth = "2px";
773
+ export const utrechtRadioButtonColor = "hsl(0 0% 100%)";
750
774
  export const utrechtRadioButtonSize = "24px";
751
775
  export const utrechtRadioButtonMarginInlineEnd = "12px";
752
776
  export const utrechtRadioButtonIconSize = "42%";
@@ -765,13 +789,14 @@ export const utrechtRadioButtonDisabledBorderColor = "hsl(0 0% 80%)";
765
789
  export const utrechtRadioButtonDisabledColor = "hsl(0 0% 100%)";
766
790
  export const utrechtRadioButtonInvalidBorderColor = "#990000";
767
791
  export const utrechtRadioButtonInvalidBorderWidth = "2px";
768
- export const utrechtRadioButtonColor = "hsl(0 0% 100%)";
769
792
  export const utrechtRadioButtonBorderRadius = "0";
770
793
  export const utrechtRichTextStrangerMarginBlockEnd = "32px";
771
794
  export const utrechtRichTextAcquaintanceMarginBlockEnd = "16px";
772
795
  export const utrechtRichTextFriendMarginBlockEnd = "8px";
773
796
  export const utrechtRichTextBestFriendMarginBlockEnd = "4px";
774
797
  export const utrechtRichTextConfidantMarginBlockEnd = 0;
798
+ export const utrechtRootBackgroundColor = "hsl(0 0% 95%)";
799
+ export const utrechtRootColor = "hsl(0 0% 10%)";
775
800
  export const utrechtSearchBarButtonBackgroundColor = "hsl(0 100% 40%)";
776
801
  export const utrechtSearchBarButtonBorderColor = "hsl(0 100% 40%)";
777
802
  export const utrechtSearchBarButtonColor = "hsl(0 0% 100%)";
@@ -1010,9 +1035,73 @@ export const denhaagProcessStepsSubStepHeadingColor = "hsl(0 0% 15%)";
1010
1035
  export const denhaagProcessStepsSubStepHeadingFontSize = "0.875rem";
1011
1036
  export const denhaagProcessStepsSubStepHeadingFontWeight = "400";
1012
1037
  export const denhaagProcessStepsSubStepLineColor = "hsl(90 30% 30%)";
1038
+ export const nlCodeBlockBackgroundColor = "hsl(0 0% 95%)";
1039
+ export const nlCodeBlockColor = "hsl(0 0% 0%)";
1040
+ export const nlCodeBlockFontFamily = "\"Monaco\"";
1041
+ export const nlCodeBlockFontSize = "1rem";
1042
+ export const nlCodeBlockLineHeight = "1.5";
1043
+ export const nlCodeBlockPaddingBlock = "20px";
1044
+ export const nlCodeBlockPaddingInline = "20px";
1045
+ export const nlDataBadgeBackgroundColor = "hsl(0 0% 30%)";
1046
+ export const nlDataBadgeBorderRadius = "0";
1047
+ export const nlDataBadgeColor = "hsl(0 0% 100%)";
1048
+ export const nlDataBadgePaddingBlock = "8px";
1049
+ export const nlDataBadgePaddingInline = "12px";
1050
+ export const nlHeadingLevel1FontFamily = "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif";
1051
+ export const nlHeadingLevel1FontSize = "2rem";
1052
+ export const nlHeadingLevel1FontWeight = "700";
1053
+ export const nlHeadingLevel1LineHeight = "1.25";
1054
+ export const nlHeadingLevel2FontFamily = "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif";
1055
+ export const nlHeadingLevel2FontSize = "1.25rem";
1056
+ export const nlHeadingLevel2FontWeight = "700";
1057
+ export const nlHeadingLevel2LineHeight = "1.25";
1058
+ export const nlHeadingLevel3FontFamily = "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif";
1059
+ export const nlHeadingLevel3FontSize = "1.25rem";
1060
+ export const nlHeadingLevel3FontWeight = "400";
1061
+ export const nlHeadingLevel3LineHeight = "1.25";
1062
+ export const nlHeadingLevel4FontFamily = "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif";
1063
+ export const nlHeadingLevel4FontSize = "1.125rem";
1064
+ export const nlHeadingLevel4FontWeight = "400";
1065
+ export const nlHeadingLevel4LineHeight = "1.5";
1066
+ export const nlHeadingLevel5FontFamily = "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif";
1067
+ export const nlHeadingLevel5FontSize = "0.875rem";
1068
+ export const nlHeadingLevel5FontWeight = "400";
1069
+ export const nlHeadingLevel5LineHeight = "1.5";
1070
+ export const nlHeadingLevel6FontFamily = "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif";
1071
+ export const nlHeadingLevel6FontSize = "0.875rem";
1072
+ export const nlHeadingLevel6FontWeight = "400";
1073
+ export const nlHeadingLevel6LineHeight = "1.5";
1074
+ export const nlMarkBackgroundColor = "hsl(48 100% 60%)";
1075
+ export const nlMarkColor = "hsl(0 0% 0%)";
1076
+ export const nlNumberBadgeBackgroundColor = "hsl(0 100% 40%)";
1077
+ export const nlNumberBadgeBorderRadius = "1rem";
1078
+ export const nlNumberBadgeColor = "hsl(0 0% 100%)";
1079
+ export const nlNumberBadgeFontSize = "1rem";
1080
+ export const nlNumberBadgePaddingBlock = "1ex";
1081
+ export const nlNumberBadgePaddingInline = "1ex";
1082
+ export const nlParagraphFontFamily = "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif";
1083
+ export const nlParagraphFontSize = "1rem";
1084
+ export const nlParagraphFontWeight = "400";
1085
+ export const nlParagraphLineHeight = "1.5";
1086
+ export const nlParagraphLeadColor = "hsl(0 0% 95%)";
1087
+ export const nlParagraphLeadFontSize = "1.25rem";
1088
+ export const nlParagraphLeadFontWeight = "400";
1089
+ export const nlParagraphLeadLineHeight = "1.5";
1090
+ export const nlParagraphSmallFontSize = "0.875rem";
1091
+ export const nlSkipLinkBackgroundColor = "hsl(0 0% 15%)";
1092
+ export const nlSkipLinkColor = "hsl(0 0% 100%)";
1093
+ export const nlSkipLinkPaddingBlock = "8px";
1094
+ export const nlSkipLinkPaddingInline = "16px";
1095
+ export const nlSkipLinkTextDecoration = "underline";
1096
+ export const nlSkipLinkFocusVisibleColor = "hsl(0 0% 0%)";
1097
+ export const nlSkipLinkFocusVisibleBackgroundColor = "hsl(48 100% 80%)";
1098
+ export const nlSkipLinkFocusVisibleTextDecoration = "none";
1013
1099
  export const ofLayoutBackground = "hsl(0 0% 15%)";
1014
1100
  export const ofLayoutBg = "hsl(0 0% 15%)";
1015
1101
  export const ofPageFooterBg = "hsl(0 100% 40%)";
1016
1102
  export const ofPageFooterFg = "hsl(0 0% 100%)";
1017
1103
  export const ofProgressIndicatorBackgroundColor = "hsl(0 0% 15%)";
1018
1104
  export const ofProgressIndicatorMobileBoxShadow = "0px 0px 2px 0px rgba(0 0 0 / 20%)";
1105
+ export const signalenModalDialogBackgroundColor = "hsl(0 0% 100%)";
1106
+ export const signalenModalDialogColor = "hsl(0 0% 0%)";
1107
+ export const signalenProgressBarBorderRadius = "4px";