@utrecht/design-tokens 2.1.0 → 2.2.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 (79) hide show
  1. package/.stylelintrc.json +5 -1
  2. package/CHANGELOG.md +14 -0
  3. package/config.json +8 -0
  4. package/dist/_mixin-theme.scss +34 -37
  5. package/dist/_mixin.scss +1009 -0
  6. package/dist/_variables.scss +34 -37
  7. package/dist/background-image-icon.css +0 -1
  8. package/dist/dark/_mixin-theme.scss +34 -37
  9. package/dist/dark/_mixin.scss +1020 -0
  10. package/dist/dark/_variables.scss +1017 -0
  11. package/dist/dark/index.cjs +1020 -0
  12. package/dist/dark/index.css +34 -37
  13. package/dist/dark/index.d.ts +1139 -0
  14. package/dist/dark/index.flat.json +1016 -0
  15. package/dist/dark/index.json +30694 -0
  16. package/dist/dark/index.mjs +1018 -0
  17. package/dist/dark/index.tokens.json +7885 -0
  18. package/dist/dark/list.json +30694 -0
  19. package/dist/dark/property.css +705 -0
  20. package/dist/dark/root.css +538 -541
  21. package/dist/dark/theme-prince-xml.css +1020 -0
  22. package/dist/dark/theme.css +1020 -0
  23. package/dist/dark/tokens.cjs +37567 -0
  24. package/dist/dark/tokens.d.ts +4842 -0
  25. package/dist/dark/tokens.json +37563 -0
  26. package/dist/dark/variables.cjs +1020 -0
  27. package/dist/dark/variables.css +1020 -0
  28. package/dist/dark/variables.d.ts +1139 -0
  29. package/dist/dark/variables.json +1016 -0
  30. package/dist/dark/variables.less +1017 -0
  31. package/dist/dark/variables.mjs +1018 -0
  32. package/dist/index.cjs +29 -32
  33. package/dist/index.css +149 -82
  34. package/dist/index.d.ts +18 -25
  35. package/dist/index.flat.json +591 -593
  36. package/dist/index.json +4577 -7587
  37. package/dist/index.mjs +31 -34
  38. package/dist/index.tokens.json +385 -71
  39. package/dist/list.json +31811 -0
  40. package/dist/property.css +770 -0
  41. package/dist/root.css +529 -532
  42. package/dist/theme-prince-xml.css +34 -37
  43. package/dist/theme.css +529 -532
  44. package/dist/tokens.cjs +6297 -8992
  45. package/dist/tokens.d.ts +208 -60
  46. package/dist/tokens.json +38705 -0
  47. package/dist/variables.cjs +1009 -0
  48. package/dist/variables.css +1009 -0
  49. package/dist/variables.d.ts +1128 -0
  50. package/dist/variables.json +1005 -0
  51. package/dist/variables.less +34 -37
  52. package/dist/variables.mjs +1007 -0
  53. package/package.json +6 -5
  54. package/src/background-image-icon.scss +0 -1
  55. package/src/brand/utrecht/typography.tokens.json +7 -9
  56. package/src/component/of/progress-indicator.tokens.json +1 -1
  57. package/src/component/utrecht/backdrop.tokens.json +1 -1
  58. package/src/component/utrecht/blockquote.tokens.json +3 -3
  59. package/src/component/utrecht/button.tokens.json +1 -3
  60. package/src/component/utrecht/code-block.tokens.json +2 -2
  61. package/src/component/utrecht/figure.tokens.json +2 -2
  62. package/src/component/utrecht/form-fieldset.tokens.json +2 -2
  63. package/src/component/utrecht/form-toggle.tokens.json +1 -1
  64. package/src/component/utrecht/link.tokens.json +3 -1
  65. package/src/component/utrecht/pagination.tokens.json +1 -1
  66. package/src/component/utrecht/skip-link.tokens.json +4 -2
  67. package/src/component/utrecht/table.tokens.json +1 -1
  68. package/src/component/utrecht/toptask-link.tokens.json +1 -1
  69. package/src/css-property-formatter.mjs +46 -0
  70. package/src/dark/component/tokens.json +1 -1
  71. package/src/index.scss +81 -5
  72. package/style-dictionary-build-dark.mjs +64 -0
  73. package/style-dictionary-build.mjs +41 -0
  74. package/style-dictionary-config.mjs +261 -0
  75. package/dist/figma-tokens.json +0 -40396
  76. package/src/css-property-formatter.js +0 -35
  77. package/src/style-dictionary-config-dark.js +0 -56
  78. package/src/style-dictionary-config.js +0 -63
  79. package/style-dictionary.config.json +0 -143
package/dist/index.mjs CHANGED
@@ -1,6 +1,5 @@
1
1
  /**
2
- * Do not edit directly
3
- * Generated on Tue, 01 Oct 2024 19:52:17 GMT
2
+ * Do not edit directly, this file was auto-generated.
4
3
  */
5
4
 
6
5
  export const utrechtAccordionRowGap = "8px";
@@ -60,7 +59,7 @@ export const utrechtArticleMaxInlineSize = "780px";
60
59
  export const utrechtBackdropBackgroundColor = "hsl(0 0% 100%)";
61
60
  export const utrechtBackdropColor = "hsl(0 0% 0%)";
62
61
  export const utrechtBackdropOpacity = "0.8";
63
- export const utrechtBackdropFadeInAnimationDuration = "0.4s";
62
+ export const utrechtBackdropFadeInAnimationDuration = "400ms";
64
63
  export const utrechtBackdropReducedTransparencyOpacity = "0.98";
65
64
  export const utrechtBadgeCounterBackgroundColor = "hsl(0 100% 40%)"; // Default background color for badge components
66
65
  export const utrechtBadgeCounterBorderRadius = "1rem"; // Default corner radius for badge components
@@ -78,9 +77,9 @@ export const utrechtBadgePaddingInline = "12px"; // Default inline padding color
78
77
  export const utrechtBadgeFontStyle = "normal";
79
78
  export const utrechtBlockquoteMarginInlineStart = "1.6em";
80
79
  export const utrechtBlockquoteMarginInlineEnd = "1.6em";
81
- export const utrechtBlockquoteAttributionFontSize = "0.75rem";
82
80
  export const utrechtBlockquoteContentColor = "hsl(0 100% 40%)";
83
81
  export const utrechtBlockquoteContentFontSize = "1.125rem";
82
+ export const utrechtBlockquoteCaptionFontSize = "0.875rem";
84
83
  export const utrechtBlockquoteMarginBlockStart = "1.6em";
85
84
  export const utrechtBlockquoteMarginBlockEnd = "1.6em";
86
85
  export const utrechtBreadcrumbNavMinBlockSize = "34px";
@@ -110,6 +109,7 @@ export const utrechtButtonBorderColor = "hsl(0 0% 40%)";
110
109
  export const utrechtButtonBorderRadius = "0";
111
110
  export const utrechtButtonBorderWidth = "1px";
112
111
  export const utrechtButtonColor = "hsl(0 0% 40%)";
112
+ export const utrechtButtonColumnGap = "0.5ch";
113
113
  export const utrechtButtonFontFamily = "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif";
114
114
  export const utrechtButtonFontSize = "1rem";
115
115
  export const utrechtButtonMarginBlockStart = "8px";
@@ -122,7 +122,6 @@ export const utrechtButtonPaddingInlineStart = "16px";
122
122
  export const utrechtButtonPaddingInlineEnd = "16px";
123
123
  export const utrechtButtonActiveBackgroundColor = "hsl(0 0% 40%)";
124
124
  export const utrechtButtonActiveColor = "hsl(0 0% 100%)";
125
- export const utrechtButtonIconGap = "0.5ch";
126
125
  export const utrechtButtonDisabledBackgroundColor = "hsl(0 0% 90%)";
127
126
  export const utrechtButtonDisabledBorderColor = "hsl(0 0% 80%)";
128
127
  export const utrechtButtonDisabledColor = "hsl(0 0% 80%)";
@@ -232,7 +231,7 @@ export const utrechtButtonSubtleReadyFocusColor = "hsl(90 30% 38%)";
232
231
  export const utrechtCalendarTableWeeksItemWidth = "44px";
233
232
  export const utrechtCalendarTableWeeksItemPaddingBlockStart = "4px";
234
233
  export const utrechtCalendarTableWeeksItemPaddingBlockEnd = "10px";
235
- export const utrechtCalendarTableWeeksItemLineHeight = "24px";
234
+ export const utrechtCalendarTableWeeksItemLineHeight = "1.5rem";
236
235
  export const utrechtCalendarTableDaysItemDaySize = "44px";
237
236
  export const utrechtCalendarTableDaysItemDayColor = "hsl(0 0% 0%)";
238
237
  export const utrechtCalendarTableDaysItemDayBorderWidth = "2px";
@@ -276,8 +275,8 @@ export const utrechtCheckboxInvalidBorderColor = "#990000";
276
275
  export const utrechtCheckboxMarginBlockStart = 0;
277
276
  export const utrechtCodeBlockBackgroundColor = "hsl(0 0% 95%)";
278
277
  export const utrechtCodeBlockColor = "hsl(0 0% 0%)";
279
- export const utrechtCodeBlockFontSize = "16px";
280
- export const utrechtCodeBlockLineHeight = "24px";
278
+ export const utrechtCodeBlockFontSize = "1rem";
279
+ export const utrechtCodeBlockLineHeight = "1.5";
281
280
  export const utrechtCodeBlockMarginBlockStart = "20px";
282
281
  export const utrechtCodeBlockMarginBlockEnd = "20px";
283
282
  export const utrechtCodeBlockPaddingBlockStart = "20px";
@@ -288,12 +287,12 @@ export const utrechtColumnLayoutColumnRuleColor = "hsl(0 0% 80%)";
288
287
  export const utrechtColumnLayoutColumnRuleWidth = "2px";
289
288
  export const utrechtColumnLayoutColumnWidth = "350px";
290
289
  export const utrechtColumnLayoutGap = "16px";
290
+ export const utrechtActionActivateCursor = "pointer";
291
291
  export const utrechtActionBusyCursor = "wait";
292
292
  export const utrechtActionDisabledCursor = "not-allowed";
293
+ export const utrechtActionInertCursor = "default";
293
294
  export const utrechtActionNavigateCursor = "pointer";
294
295
  export const utrechtActionSubmitCursor = "pointer";
295
- export const utrechtActionActivateCursor = "pointer";
296
- export const utrechtActionInertCursor = "default";
297
296
  export const utrechtFeedbackDangerBackgroundColor = "hsl(0 100% 40%)";
298
297
  export const utrechtFeedbackDangerBorderColor = "hsl(0 100% 40%)";
299
298
  export const utrechtFeedbackDangerColor = "hsl(0 100% 40%)";
@@ -419,8 +418,8 @@ export const utrechtDrawerPaddingInlineStart = "16px";
419
418
  export const utrechtDrawerPaddingInlineEnd = "16px";
420
419
  export const utrechtEmphasisStrongFontWeight = "700";
421
420
  export const utrechtFigureCaptionColor = "#727272";
422
- export const utrechtFigureCaptionFontSize = "14px";
423
- export const utrechtFigureCaptionLineHeight = "20px";
421
+ export const utrechtFigureCaptionFontSize = "0.875rem";
422
+ export const utrechtFigureCaptionLineHeight = "1.5";
424
423
  export const utrechtFocusBackgroundColor = "hsl(48 100% 60%)";
425
424
  export const utrechtFocusOutlineColor = "hsl(0 0% 0%)";
426
425
  export const utrechtFocusOutlineStyle = "dotted";
@@ -464,7 +463,7 @@ export const utrechtFormFieldsetSectionBackgroundColor = "hsl(0 0% 80%)";
464
463
  export const utrechtFormFieldsetSectionColor = "hsl(0 0% 0%)";
465
464
  export const utrechtFormFieldsetLegendFontSize = "1rem";
466
465
  export const utrechtFormFieldsetLegendFontWeight = "700";
467
- export const utrechtFormFieldsetLegendLineHeight = "1.4";
466
+ export const utrechtFormFieldsetLegendLineHeight = "1.5";
468
467
  export const utrechtFormFieldsetLegendMarginBlockEnd = "12px";
469
468
  export const utrechtFormFieldsetLegendMarginBlockStart = "24px";
470
469
  export const utrechtFormFieldsetLegendDisabledColor = "hsl(0 0% 40%)";
@@ -472,7 +471,7 @@ export const utrechtFormLabelFontWeight = "700";
472
471
  export const utrechtFormLabelFontSize = "1em";
473
472
  export const utrechtFormLabelCheckboxFontWeight = "400";
474
473
  export const utrechtFormLabelRadioFontWeight = "400";
475
- export const utrechtFormToggleAccentColor = "hsla(0, 0%, 48%, 1)";
474
+ export const utrechtFormToggleAccentColor = "hsla(0 0% 48% / 100%)";
476
475
  export const utrechtFormToggleBackgroundColor = "hsl(0 0% 100%)";
477
476
  export const utrechtFormToggleBorderColor = "transparent";
478
477
  export const utrechtFormToggleBorderStyle = "solid";
@@ -556,7 +555,7 @@ export const utrechtLinkTextDecoration = "underline";
556
555
  export const utrechtLinkTextUnderlineOffset = "3px";
557
556
  export const utrechtLinkActiveColor = "hsl(211 60% 35%)";
558
557
  export const utrechtLinkFocusColor = "hsl(211 60% 40%)";
559
- export const utrechtLinkFocusTextDecoration = "none";
558
+ export const utrechtLinkFocusVisibleTextDecoration = "none";
560
559
  export const utrechtLinkHoverColor = "hsl(211 60% 40%)";
561
560
  export const utrechtLinkHoverTextDecoration = "underline";
562
561
  export const utrechtLinkHoverTextDecorationThickness = "3px";
@@ -577,10 +576,10 @@ export const utrechtListboxOptionPaddingInlineStart = "8px";
577
576
  export const utrechtListboxOptionActiveBackgroundColor = "hsl(0 0% 95%)";
578
577
  export const utrechtListboxOptionActiveColor = "hsl(0 0% 0%)";
579
578
  export const utrechtListboxOptionActiveFontWeight = "700";
579
+ export const utrechtListboxOptionHoverBackgroundColor = "hsl(211 60% 90%)";
580
+ export const utrechtListboxOptionHoverColor = "hsl(0 0% 0%)";
580
581
  export const utrechtListboxOptionSelectedBackgroundColor = "hsl(0 0% 95%)";
581
582
  export const utrechtListboxOptionSelectedColor = "hsl(0 0% 0%)";
582
- export const utrechtListboxOptionHoverColor = "hsl(0 0% 0%)";
583
- export const utrechtListboxOptionHoverBackgroundColor = "hsl(211 60% 90%)";
584
583
  export const utrechtListboxOptionGroupMarginBlockEnd = "8px";
585
584
  export const utrechtListboxOptionGroupTitleFontSize = "1rem";
586
585
  export const utrechtListboxOptionGroupTitleFontWeight = "700";
@@ -605,14 +604,6 @@ export const utrechtMapcontrolbuttonBorderWidth = "1px";
605
604
  export const utrechtMapcontrolbuttonColor = "hsl(0 0% 40%)";
606
605
  export const utrechtMapcontrolbuttonMinBlockSize = "32px";
607
606
  export const utrechtMapcontrolbuttonMinInlineSize = "32px";
608
- export const utrechtMapcontrolbuttonMarginBlockStart = "8px";
609
- export const utrechtMapcontrolbuttonMarginBlockEnd = "8px";
610
- export const utrechtMapcontrolbuttonMarginInlineStart = "0";
611
- export const utrechtMapcontrolbuttonMarginInlineEnd = "0";
612
- export const utrechtMapcontrolbuttonPaddingBlockStart = "4px";
613
- export const utrechtMapcontrolbuttonPaddingBlockEnd = "4px";
614
- export const utrechtMapcontrolbuttonPaddingInlineStart = "4px";
615
- export const utrechtMapcontrolbuttonPaddingInlineEnd = "4px";
616
607
  export const utrechtMapcontrolbuttonDisabledBackgroundColor = "hsl(0 0% 90%)";
617
608
  export const utrechtMapcontrolbuttonDisabledBorderColor = "hsl(0 0% 80%)";
618
609
  export const utrechtMapcontrolbuttonDisabledColor = "hsl(0 0% 80%)";
@@ -622,6 +613,14 @@ export const utrechtMapcontrolbuttonHoverBackgroundColor = "hsl(0 0% 90%)";
622
613
  export const utrechtMapcontrolbuttonHoverColor = "hsl(0 0% 100%)";
623
614
  export const utrechtMapcontrolbuttonLabelMarginInlineStart = "8px";
624
615
  export const utrechtMapcontrolbuttonLabelMarginInlineEnd = "8px";
616
+ export const utrechtMapcontrolbuttonMarginBlockEnd = "8px";
617
+ export const utrechtMapcontrolbuttonMarginBlockStart = "8px";
618
+ export const utrechtMapcontrolbuttonMarginInlineEnd = "0";
619
+ export const utrechtMapcontrolbuttonMarginInlineStart = "0";
620
+ export const utrechtMapcontrolbuttonPaddingBlockEnd = "4px";
621
+ export const utrechtMapcontrolbuttonPaddingBlockStart = "4px";
622
+ export const utrechtMapcontrolbuttonPaddingInlineEnd = "4px";
623
+ export const utrechtMapcontrolbuttonPaddingInlineStart = "4px";
625
624
  export const utrechtMarkBackgroundColor = "hsl(48 100% 60%)";
626
625
  export const utrechtMarkColor = "hsl(0 0% 0%)";
627
626
  export const utrechtNavBarBackgroundColor = "hsl(0 0% 100%)";
@@ -651,8 +650,8 @@ export const utrechtTopnavLinkFocusTextDecoration = "none";
651
650
  export const utrechtTopnavLinkFocusBackgroundColor = "hsl(48 100% 80%)";
652
651
  export const utrechtTopnavLinkFocusOutlineColor = "hsl(0 0% 0%)";
653
652
  export const utrechtTopnavLinkHoverBackgroundColor = "hsl(0 0% 0%)";
654
- export const utrechtNumberBadgeBackgroundColor = "hsl(0 100% 40%)"; // Default background color for badge components
655
- export const utrechtNumberBadgeBorderRadius = "1rem"; // Default corner radius for badge components
653
+ export const utrechtNumberBadgeBackgroundColor = "hsl(0 100% 40%)";
654
+ export const utrechtNumberBadgeBorderRadius = "1rem";
656
655
  export const utrechtNumberBadgeColor = "hsl(0 0% 100%)"; // Default text color for badge components
657
656
  export const utrechtNumberBadgeFontSize = "1rem";
658
657
  export const utrechtNumberBadgePaddingBlock = "1ex"; // Default block padding for badge components
@@ -687,7 +686,7 @@ export const utrechtPagePaddingBlockStart = "1.8em";
687
686
  export const utrechtPagePaddingInlineEnd = "2em";
688
687
  export const utrechtPagePaddingBlockEnd = "1em";
689
688
  export const utrechtPagePaddingInlineStart = "2em";
690
- export const utrechtPaginationFontSize = "14px";
689
+ export const utrechtPaginationFontSize = "0.875rem";
691
690
  export const utrechtPaginationMarginBlockStart = "0";
692
691
  export const utrechtPaginationMarginBlockEnd = "1em";
693
692
  export const utrechtPaginationPageLinkBackgroundColor = "transparent";
@@ -805,7 +804,7 @@ export const utrechtSkipLinkPaddingInlineEnd = "16px";
805
804
  export const utrechtSkipLinkTextDecoration = "underline";
806
805
  export const utrechtSkipLinkFocusBackgroundColor = "hsl(48 100% 80%)";
807
806
  export const utrechtSkipLinkFocusColor = "hsl(0 0% 0%)";
808
- export const utrechtSkipLinkFocusTextDecoration = "none";
807
+ export const utrechtSkipLinkFocusVisibleTextDecoration = "none";
809
808
  export const utrechtSpotlightSectionBackgroundColor = "hsl(0 0% 90%)";
810
809
  export const utrechtSpotlightSectionColor = "hsl(0 0% 0%)";
811
810
  export const utrechtSpotlightSectionPaddingBlockStart = "16px";
@@ -821,7 +820,7 @@ export const utrechtSurfaceColor = "hsl(0 0% 10%)";
821
820
  export const utrechtTableMarginBlockEnd = "0";
822
821
  export const utrechtTableMarginBlockStart = "16px";
823
822
  export const utrechtTableCaptionFontWeight = "700";
824
- export const utrechtTableCaptionFontSize = "1.125em";
823
+ export const utrechtTableCaptionFontSize = "1.125rem";
825
824
  export const utrechtTableCaptionTextAlign = "start";
826
825
  export const utrechtTableCaptionMarginBlockEnd = "1em";
827
826
  export const utrechtTableHeaderFontWeight = "700";
@@ -835,7 +834,7 @@ export const utrechtTableFooterStickyBackgroundColor = "hsl(0 0% 100%)";
835
834
  export const utrechtTableFooterStickyColor = "hsl(0 0% 0%)";
836
835
  export const utrechtTableFooterStickyBorderBlockStartColor = "hsl(0 100% 40%)";
837
836
  export const utrechtTableFooterStickyBorderBlockStartWidth = "2px";
838
- export const utrechtTableCellLineHeight = "24px";
837
+ export const utrechtTableCellLineHeight = "1.5rem";
839
838
  export const utrechtTableCellPaddingBlockEnd = "0.5em";
840
839
  export const utrechtTableCellPaddingBlockStart = "0.5em";
841
840
  export const utrechtTableCellPaddingInlineEnd = "0.4em";
@@ -928,8 +927,6 @@ export const utrechtIconScale2xl = "30px"; // Formaat voor marker iconen
928
927
  export const utrechtIconScale3xl = "36px"; // Formaat voor toptaks iconen
929
928
  export const utrechtIconScale4xl = "48px";
930
929
  export const utrechtTypographySansSerifFontFamily = "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif";
931
- export const utrechtTypographyScale2xsFontSize = "0.5rem"; // 8px
932
- export const utrechtTypographyScaleXsFontSize = "0.75rem"; // 12px
933
930
  export const utrechtTypographyScaleSmFontSize = "0.875rem"; // 14px
934
931
  export const utrechtTypographyScaleMdFontSize = "1rem"; // 16px
935
932
  export const utrechtTypographyScaleLgFontSize = "1.125rem"; // 18px
@@ -1007,4 +1004,4 @@ export const ofLayoutBg = "hsl(0 0% 100%)";
1007
1004
  export const ofPageFooterBg = "hsl(0 100% 40%)";
1008
1005
  export const ofPageFooterFg = "hsl(0 0% 100%)";
1009
1006
  export const ofProgressIndicatorBackgroundColor = "hsl(0 0% 100%)";
1010
- export const ofProgressIndicatorMobileBoxShadow = "0px 0px 2px 0px rgba(0, 0, 0, 0.2)";
1007
+ export const ofProgressIndicatorMobileBoxShadow = "0px 0px 2px 0px rgba(0 0 0 / 20%)";