@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/index.cjs CHANGED
@@ -83,6 +83,11 @@ module.exports = {
83
83
  "utrechtBlockquoteCaptionFontSize": "0.875rem",
84
84
  "utrechtBlockquoteMarginBlockStart": "1.6em",
85
85
  "utrechtBlockquoteMarginBlockEnd": "1.6em",
86
+ "utrechtBodyFontFamily": "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif",
87
+ "utrechtBodyFontSize": "1rem",
88
+ "utrechtBodyLineHeight": "1.4",
89
+ "utrechtBodyBackgroundColor": "hsl(0 0% 100%)",
90
+ "utrechtBodyColor": "hsl(0 0% 0%)",
86
91
  "utrechtBreadcrumbNavMinBlockSize": "34px",
87
92
  "utrechtBreadcrumbNavFontSize": "1rem",
88
93
  "utrechtBreadcrumbNavItemPaddingBlockStart": "8px",
@@ -276,6 +281,7 @@ module.exports = {
276
281
  "utrechtCheckboxMarginBlockStart": 0,
277
282
  "utrechtCodeBlockBackgroundColor": "hsl(0 0% 95%)",
278
283
  "utrechtCodeBlockColor": "hsl(0 0% 0%)",
284
+ "utrechtCodeBlockFontFamily": "\"Monaco\"",
279
285
  "utrechtCodeBlockFontSize": "1rem",
280
286
  "utrechtCodeBlockLineHeight": "1.5",
281
287
  "utrechtCodeBlockMarginBlockStart": "20px",
@@ -543,6 +549,7 @@ module.exports = {
543
549
  "utrechtLinkListLinkFontWeight": "700",
544
550
  "utrechtLinkListLinkTextDecoration": "none",
545
551
  "utrechtLinkListIconSize": "14px",
552
+ "utrechtLinkListIconInsetBlockStart": "0.15em",
546
553
  "utrechtLinkSocialBackgroundColor": "hsl(0 100% 40%)",
547
554
  "utrechtLinkSocialBorderColor": "hsl(0 0% 100%)",
548
555
  "utrechtLinkSocialBorderWidth": "2px",
@@ -624,8 +631,6 @@ module.exports = {
624
631
  "utrechtMapcontrolbuttonPaddingInlineStart": "4px",
625
632
  "utrechtMarkBackgroundColor": "hsl(48 100% 60%)",
626
633
  "utrechtMarkColor": "hsl(0 0% 0%)",
627
- "utrechtNavBarBackgroundColor": "hsl(0 0% 100%)",
628
- "utrechtNavBarColor": "hsl(0 0% 0%)",
629
634
  "utrechtNavBarContentMaxInlineSize": "1184px",
630
635
  "utrechtNavBarLinkPaddingBlockEnd": "8px",
631
636
  "utrechtNavBarLinkPaddingBlockStart": "8px",
@@ -665,28 +670,47 @@ module.exports = {
665
670
  "utrechtOrderedListItemMarginBlockStart": "0.25em",
666
671
  "utrechtOrderedListItemMarginBlockEnd": "0.25em",
667
672
  "utrechtOrderedListItemPaddingInlineStart": "0",
673
+ "utrechtPageBodyContentBackgroundColor": "hsl(0 0% 100%)",
674
+ "utrechtPageBodyContentColor": "hsl(0 0% 0%)",
675
+ "utrechtPageBodyContentPaddingBlockStart": "0",
676
+ "utrechtPageBodyContentPaddingBlockEnd": "1em",
677
+ "utrechtPageBodyContentPaddingInlineStart": "2em",
678
+ "utrechtPageBodyContentMaxInlineSize": "1184px",
679
+ "utrechtPageBodyContentPaddingInlineEnd": "2.4em",
680
+ "utrechtPageBodyPaddingInlineEnd": "0",
681
+ "utrechtPageBodyPaddingInlineStart": "0",
682
+ "utrechtPageBodyPaddingBlockEnd": "0",
683
+ "utrechtPageBodyPaddingBlockStart": "0",
668
684
  "utrechtPageContentPaddingBlockStart": "2em",
669
685
  "utrechtPageContentPaddingBlockEnd": "2em",
670
686
  "utrechtPageFooterColor": "hsl(0 0% 100%)",
671
687
  "utrechtPageFooterBackgroundColor": "hsl(0 100% 40%)",
672
688
  "utrechtPageFooterBackgroundImage": "linear-gradient(45deg, hsl(0 100% 40%), hsl(0 100% 40%) 50%, #d63433 50%);",
673
- "utrechtPageFooterPaddingInlineEnd": "28px",
674
- "utrechtPageFooterPaddingInlineStart": "28px",
675
- "utrechtPageFooterPaddingBlockEnd": "48px",
676
- "utrechtPageFooterPaddingBlockStart": "48px",
677
- "utrechtPageHeaderPaddingBlockStart": "1.8em",
678
- "utrechtPageHeaderPaddingBlockEnd": "1em",
679
- "utrechtPageHeaderPaddingInlineStart": "2em",
680
- "utrechtPageHeaderPaddingInlineEnd": "2.4em",
689
+ "utrechtPageFooterContentPaddingBlockEnd": "48px",
690
+ "utrechtPageFooterContentPaddingBlockStart": "48px",
691
+ "utrechtPageFooterContentMaxInlineSize": "1184px",
692
+ "utrechtPageFooterContentPaddingInline": "28px",
693
+ "utrechtPageHeaderPaddingBlockStart": "0",
694
+ "utrechtPageHeaderPaddingBlockEnd": "0",
695
+ "utrechtPageHeaderPaddingInlineStart": "0",
696
+ "utrechtPageHeaderPaddingInlineEnd": "0",
697
+ "utrechtPageHeaderContentBackgroundColor": "hsl(0 0% 100%)",
698
+ "utrechtPageHeaderContentColor": "hsl(0 0% 0%)",
699
+ "utrechtPageHeaderContentPaddingBlockStart": "1.8em",
700
+ "utrechtPageHeaderContentPaddingBlockEnd": "1em",
701
+ "utrechtPageHeaderContentPaddingInlineStart": "2em",
702
+ "utrechtPageHeaderContentPaddingInlineEnd": "2.4em",
703
+ "utrechtPageHeaderContentMaxInlineSize": "1184px",
704
+ "utrechtPageHeaderContentPaddingInline": "2em",
681
705
  "utrechtPageBackgroundColor": "hsl(0 0% 100%)",
682
706
  "utrechtPageColor": "hsl(0 0% 0%)",
683
707
  "utrechtPageMarginInlineStart": "2em",
684
708
  "utrechtPageMarginInlineEnd": "2em",
685
709
  "utrechtPageMaxInlineSize": "1184px",
686
710
  "utrechtPagePaddingBlockStart": "1.8em",
687
- "utrechtPagePaddingInlineEnd": "2em",
711
+ "utrechtPagePaddingInlineEnd": "0",
688
712
  "utrechtPagePaddingBlockEnd": "1em",
689
- "utrechtPagePaddingInlineStart": "2em",
713
+ "utrechtPagePaddingInlineStart": "0",
690
714
  "utrechtPaginationFontSize": "0.875rem",
691
715
  "utrechtPaginationMarginBlockStart": "0",
692
716
  "utrechtPaginationMarginBlockEnd": "1em",
@@ -729,7 +753,6 @@ module.exports = {
729
753
  "utrechtParagraphLineHeight": "1.5",
730
754
  "utrechtParagraphMarginBlockStart": "16px",
731
755
  "utrechtParagraphMarginBlockEnd": "0",
732
- "utrechtParagraphLeadColor": "hsl(0 0% 0%)",
733
756
  "utrechtParagraphLeadFontSize": "1.25rem",
734
757
  "utrechtParagraphLeadFontWeight": "400",
735
758
  "utrechtParagraphLeadLineHeight": "1.5",
@@ -739,6 +762,7 @@ module.exports = {
739
762
  "utrechtRadioButtonBackgroundColor": "hsl(0 0% 100%)",
740
763
  "utrechtRadioButtonBorderColor": "hsl(0 0% 30%)",
741
764
  "utrechtRadioButtonBorderWidth": "2px",
765
+ "utrechtRadioButtonColor": "hsl(0 0% 100%)",
742
766
  "utrechtRadioButtonSize": "24px",
743
767
  "utrechtRadioButtonMarginInlineEnd": "12px",
744
768
  "utrechtRadioButtonIconSize": "42%",
@@ -757,13 +781,14 @@ module.exports = {
757
781
  "utrechtRadioButtonDisabledColor": "hsl(0 0% 100%)",
758
782
  "utrechtRadioButtonInvalidBorderColor": "#990000",
759
783
  "utrechtRadioButtonInvalidBorderWidth": "2px",
760
- "utrechtRadioButtonColor": "hsl(0 0% 100%)",
761
784
  "utrechtRadioButtonBorderRadius": "0",
762
785
  "utrechtRichTextStrangerMarginBlockEnd": "32px",
763
786
  "utrechtRichTextAcquaintanceMarginBlockEnd": "16px",
764
787
  "utrechtRichTextFriendMarginBlockEnd": "8px",
765
788
  "utrechtRichTextBestFriendMarginBlockEnd": "4px",
766
789
  "utrechtRichTextConfidantMarginBlockEnd": 0,
790
+ "utrechtRootBackgroundColor": "hsl(0 0% 95%)",
791
+ "utrechtRootColor": "hsl(0 0% 10%)",
767
792
  "utrechtSearchBarButtonBackgroundColor": "hsl(0 100% 40%)",
768
793
  "utrechtSearchBarButtonBorderColor": "hsl(0 100% 40%)",
769
794
  "utrechtSearchBarButtonColor": "hsl(0 0% 100%)",
@@ -1000,10 +1025,74 @@ module.exports = {
1000
1025
  "denhaagProcessStepsSubStepHeadingFontSize": "0.875rem",
1001
1026
  "denhaagProcessStepsSubStepHeadingFontWeight": "400",
1002
1027
  "denhaagProcessStepsSubStepLineColor": "hsl(90 30% 30%)",
1028
+ "nlCodeBlockBackgroundColor": "hsl(0 0% 95%)",
1029
+ "nlCodeBlockColor": "hsl(0 0% 0%)",
1030
+ "nlCodeBlockFontFamily": "\"Monaco\"",
1031
+ "nlCodeBlockFontSize": "1rem",
1032
+ "nlCodeBlockLineHeight": "1.5",
1033
+ "nlCodeBlockPaddingBlock": "20px",
1034
+ "nlCodeBlockPaddingInline": "20px",
1035
+ "nlDataBadgeBackgroundColor": "hsl(0 0% 30%)",
1036
+ "nlDataBadgeBorderRadius": "0",
1037
+ "nlDataBadgeColor": "hsl(0 0% 100%)",
1038
+ "nlDataBadgePaddingBlock": "8px",
1039
+ "nlDataBadgePaddingInline": "12px",
1040
+ "nlHeadingLevel1FontFamily": "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif",
1041
+ "nlHeadingLevel1FontSize": "2rem",
1042
+ "nlHeadingLevel1FontWeight": "700",
1043
+ "nlHeadingLevel1LineHeight": "1.25",
1044
+ "nlHeadingLevel2FontFamily": "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif",
1045
+ "nlHeadingLevel2FontSize": "1.25rem",
1046
+ "nlHeadingLevel2FontWeight": "700",
1047
+ "nlHeadingLevel2LineHeight": "1.25",
1048
+ "nlHeadingLevel3FontFamily": "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif",
1049
+ "nlHeadingLevel3FontSize": "1.25rem",
1050
+ "nlHeadingLevel3FontWeight": "400",
1051
+ "nlHeadingLevel3LineHeight": "1.25",
1052
+ "nlHeadingLevel4FontFamily": "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif",
1053
+ "nlHeadingLevel4FontSize": "1.125rem",
1054
+ "nlHeadingLevel4FontWeight": "400",
1055
+ "nlHeadingLevel4LineHeight": "1.5",
1056
+ "nlHeadingLevel5FontFamily": "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif",
1057
+ "nlHeadingLevel5FontSize": "0.875rem",
1058
+ "nlHeadingLevel5FontWeight": "400",
1059
+ "nlHeadingLevel5LineHeight": "1.5",
1060
+ "nlHeadingLevel6FontFamily": "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif",
1061
+ "nlHeadingLevel6FontSize": "0.875rem",
1062
+ "nlHeadingLevel6FontWeight": "400",
1063
+ "nlHeadingLevel6LineHeight": "1.5",
1064
+ "nlMarkBackgroundColor": "hsl(48 100% 60%)",
1065
+ "nlMarkColor": "hsl(0 0% 0%)",
1066
+ "nlNumberBadgeBackgroundColor": "hsl(0 100% 40%)",
1067
+ "nlNumberBadgeBorderRadius": "1rem",
1068
+ "nlNumberBadgeColor": "hsl(0 0% 100%)",
1069
+ "nlNumberBadgeFontSize": "1rem",
1070
+ "nlNumberBadgePaddingBlock": "1ex",
1071
+ "nlNumberBadgePaddingInline": "1ex",
1072
+ "nlParagraphFontFamily": "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif",
1073
+ "nlParagraphFontSize": "1rem",
1074
+ "nlParagraphFontWeight": "400",
1075
+ "nlParagraphLineHeight": "1.5",
1076
+ "nlParagraphLeadColor": "hsl(0 0% 0%)",
1077
+ "nlParagraphLeadFontSize": "1.25rem",
1078
+ "nlParagraphLeadFontWeight": "400",
1079
+ "nlParagraphLeadLineHeight": "1.5",
1080
+ "nlParagraphSmallFontSize": "0.875rem",
1081
+ "nlSkipLinkBackgroundColor": "hsl(0 0% 15%)",
1082
+ "nlSkipLinkColor": "hsl(0 0% 100%)",
1083
+ "nlSkipLinkPaddingBlock": "8px",
1084
+ "nlSkipLinkPaddingInline": "16px",
1085
+ "nlSkipLinkTextDecoration": "underline",
1086
+ "nlSkipLinkFocusVisibleColor": "hsl(0 0% 0%)",
1087
+ "nlSkipLinkFocusVisibleBackgroundColor": "hsl(48 100% 80%)",
1088
+ "nlSkipLinkFocusVisibleTextDecoration": "none",
1003
1089
  "ofLayoutBackground": "hsl(0 0% 100%)",
1004
1090
  "ofLayoutBg": "hsl(0 0% 100%)",
1005
1091
  "ofPageFooterBg": "hsl(0 100% 40%)",
1006
1092
  "ofPageFooterFg": "hsl(0 0% 100%)",
1007
1093
  "ofProgressIndicatorBackgroundColor": "hsl(0 0% 100%)",
1008
- "ofProgressIndicatorMobileBoxShadow": "0px 0px 2px 0px rgba(0 0 0 / 20%)"
1094
+ "ofProgressIndicatorMobileBoxShadow": "0px 0px 2px 0px rgba(0 0 0 / 20%)",
1095
+ "signalenModalDialogBackgroundColor": "hsl(0 0% 100%)",
1096
+ "signalenModalDialogColor": "hsl(0 0% 0%)",
1097
+ "signalenProgressBarBorderRadius": "4px"
1009
1098
  };