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