@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.cjs 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
  module.exports = {
@@ -61,7 +60,7 @@ module.exports = {
61
60
  "utrechtBackdropBackgroundColor": "hsl(0 0% 100%)",
62
61
  "utrechtBackdropColor": "hsl(0 0% 0%)",
63
62
  "utrechtBackdropOpacity": "0.8",
64
- "utrechtBackdropFadeInAnimationDuration": "0.4s",
63
+ "utrechtBackdropFadeInAnimationDuration": "400ms",
65
64
  "utrechtBackdropReducedTransparencyOpacity": "0.98",
66
65
  "utrechtBadgeCounterBackgroundColor": "hsl(0 100% 40%)",
67
66
  "utrechtBadgeCounterBorderRadius": "1rem",
@@ -79,9 +78,9 @@ module.exports = {
79
78
  "utrechtBadgeFontStyle": "normal",
80
79
  "utrechtBlockquoteMarginInlineStart": "1.6em",
81
80
  "utrechtBlockquoteMarginInlineEnd": "1.6em",
82
- "utrechtBlockquoteAttributionFontSize": "0.75rem",
83
81
  "utrechtBlockquoteContentColor": "hsl(0 100% 40%)",
84
82
  "utrechtBlockquoteContentFontSize": "1.125rem",
83
+ "utrechtBlockquoteCaptionFontSize": "0.875rem",
85
84
  "utrechtBlockquoteMarginBlockStart": "1.6em",
86
85
  "utrechtBlockquoteMarginBlockEnd": "1.6em",
87
86
  "utrechtBreadcrumbNavMinBlockSize": "34px",
@@ -111,6 +110,7 @@ module.exports = {
111
110
  "utrechtButtonBorderRadius": "0",
112
111
  "utrechtButtonBorderWidth": "1px",
113
112
  "utrechtButtonColor": "hsl(0 0% 40%)",
113
+ "utrechtButtonColumnGap": "0.5ch",
114
114
  "utrechtButtonFontFamily": "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif",
115
115
  "utrechtButtonFontSize": "1rem",
116
116
  "utrechtButtonMarginBlockStart": "8px",
@@ -123,7 +123,6 @@ module.exports = {
123
123
  "utrechtButtonPaddingInlineEnd": "16px",
124
124
  "utrechtButtonActiveBackgroundColor": "hsl(0 0% 40%)",
125
125
  "utrechtButtonActiveColor": "hsl(0 0% 100%)",
126
- "utrechtButtonIconGap": "0.5ch",
127
126
  "utrechtButtonDisabledBackgroundColor": "hsl(0 0% 90%)",
128
127
  "utrechtButtonDisabledBorderColor": "hsl(0 0% 80%)",
129
128
  "utrechtButtonDisabledColor": "hsl(0 0% 80%)",
@@ -233,7 +232,7 @@ module.exports = {
233
232
  "utrechtCalendarTableWeeksItemWidth": "44px",
234
233
  "utrechtCalendarTableWeeksItemPaddingBlockStart": "4px",
235
234
  "utrechtCalendarTableWeeksItemPaddingBlockEnd": "10px",
236
- "utrechtCalendarTableWeeksItemLineHeight": "24px",
235
+ "utrechtCalendarTableWeeksItemLineHeight": "1.5rem",
237
236
  "utrechtCalendarTableDaysItemDaySize": "44px",
238
237
  "utrechtCalendarTableDaysItemDayColor": "hsl(0 0% 0%)",
239
238
  "utrechtCalendarTableDaysItemDayBorderWidth": "2px",
@@ -277,8 +276,8 @@ module.exports = {
277
276
  "utrechtCheckboxMarginBlockStart": 0,
278
277
  "utrechtCodeBlockBackgroundColor": "hsl(0 0% 95%)",
279
278
  "utrechtCodeBlockColor": "hsl(0 0% 0%)",
280
- "utrechtCodeBlockFontSize": "16px",
281
- "utrechtCodeBlockLineHeight": "24px",
279
+ "utrechtCodeBlockFontSize": "1rem",
280
+ "utrechtCodeBlockLineHeight": "1.5",
282
281
  "utrechtCodeBlockMarginBlockStart": "20px",
283
282
  "utrechtCodeBlockMarginBlockEnd": "20px",
284
283
  "utrechtCodeBlockPaddingBlockStart": "20px",
@@ -289,12 +288,12 @@ module.exports = {
289
288
  "utrechtColumnLayoutColumnRuleWidth": "2px",
290
289
  "utrechtColumnLayoutColumnWidth": "350px",
291
290
  "utrechtColumnLayoutGap": "16px",
291
+ "utrechtActionActivateCursor": "pointer",
292
292
  "utrechtActionBusyCursor": "wait",
293
293
  "utrechtActionDisabledCursor": "not-allowed",
294
+ "utrechtActionInertCursor": "default",
294
295
  "utrechtActionNavigateCursor": "pointer",
295
296
  "utrechtActionSubmitCursor": "pointer",
296
- "utrechtActionActivateCursor": "pointer",
297
- "utrechtActionInertCursor": "default",
298
297
  "utrechtFeedbackDangerBackgroundColor": "hsl(0 100% 40%)",
299
298
  "utrechtFeedbackDangerBorderColor": "hsl(0 100% 40%)",
300
299
  "utrechtFeedbackDangerColor": "hsl(0 100% 40%)",
@@ -420,8 +419,8 @@ module.exports = {
420
419
  "utrechtDrawerPaddingInlineEnd": "16px",
421
420
  "utrechtEmphasisStrongFontWeight": "700",
422
421
  "utrechtFigureCaptionColor": "#727272",
423
- "utrechtFigureCaptionFontSize": "14px",
424
- "utrechtFigureCaptionLineHeight": "20px",
422
+ "utrechtFigureCaptionFontSize": "0.875rem",
423
+ "utrechtFigureCaptionLineHeight": "1.5",
425
424
  "utrechtFocusBackgroundColor": "hsl(48 100% 60%)",
426
425
  "utrechtFocusOutlineColor": "hsl(0 0% 0%)",
427
426
  "utrechtFocusOutlineStyle": "dotted",
@@ -465,7 +464,7 @@ module.exports = {
465
464
  "utrechtFormFieldsetSectionColor": "hsl(0 0% 0%)",
466
465
  "utrechtFormFieldsetLegendFontSize": "1rem",
467
466
  "utrechtFormFieldsetLegendFontWeight": "700",
468
- "utrechtFormFieldsetLegendLineHeight": "1.4",
467
+ "utrechtFormFieldsetLegendLineHeight": "1.5",
469
468
  "utrechtFormFieldsetLegendMarginBlockEnd": "12px",
470
469
  "utrechtFormFieldsetLegendMarginBlockStart": "24px",
471
470
  "utrechtFormFieldsetLegendDisabledColor": "hsl(0 0% 40%)",
@@ -473,7 +472,7 @@ module.exports = {
473
472
  "utrechtFormLabelFontSize": "1em",
474
473
  "utrechtFormLabelCheckboxFontWeight": "400",
475
474
  "utrechtFormLabelRadioFontWeight": "400",
476
- "utrechtFormToggleAccentColor": "hsla(0, 0%, 48%, 1)",
475
+ "utrechtFormToggleAccentColor": "hsla(0 0% 48% / 100%)",
477
476
  "utrechtFormToggleBackgroundColor": "hsl(0 0% 100%)",
478
477
  "utrechtFormToggleBorderColor": "transparent",
479
478
  "utrechtFormToggleBorderStyle": "solid",
@@ -557,7 +556,7 @@ module.exports = {
557
556
  "utrechtLinkTextUnderlineOffset": "3px",
558
557
  "utrechtLinkActiveColor": "hsl(211 60% 35%)",
559
558
  "utrechtLinkFocusColor": "hsl(211 60% 40%)",
560
- "utrechtLinkFocusTextDecoration": "none",
559
+ "utrechtLinkFocusVisibleTextDecoration": "none",
561
560
  "utrechtLinkHoverColor": "hsl(211 60% 40%)",
562
561
  "utrechtLinkHoverTextDecoration": "underline",
563
562
  "utrechtLinkHoverTextDecorationThickness": "3px",
@@ -578,10 +577,10 @@ module.exports = {
578
577
  "utrechtListboxOptionActiveBackgroundColor": "hsl(0 0% 95%)",
579
578
  "utrechtListboxOptionActiveColor": "hsl(0 0% 0%)",
580
579
  "utrechtListboxOptionActiveFontWeight": "700",
580
+ "utrechtListboxOptionHoverBackgroundColor": "hsl(211 60% 90%)",
581
+ "utrechtListboxOptionHoverColor": "hsl(0 0% 0%)",
581
582
  "utrechtListboxOptionSelectedBackgroundColor": "hsl(0 0% 95%)",
582
583
  "utrechtListboxOptionSelectedColor": "hsl(0 0% 0%)",
583
- "utrechtListboxOptionHoverColor": "hsl(0 0% 0%)",
584
- "utrechtListboxOptionHoverBackgroundColor": "hsl(211 60% 90%)",
585
584
  "utrechtListboxOptionGroupMarginBlockEnd": "8px",
586
585
  "utrechtListboxOptionGroupTitleFontSize": "1rem",
587
586
  "utrechtListboxOptionGroupTitleFontWeight": "700",
@@ -606,14 +605,6 @@ module.exports = {
606
605
  "utrechtMapcontrolbuttonColor": "hsl(0 0% 40%)",
607
606
  "utrechtMapcontrolbuttonMinBlockSize": "32px",
608
607
  "utrechtMapcontrolbuttonMinInlineSize": "32px",
609
- "utrechtMapcontrolbuttonMarginBlockStart": "8px",
610
- "utrechtMapcontrolbuttonMarginBlockEnd": "8px",
611
- "utrechtMapcontrolbuttonMarginInlineStart": "0",
612
- "utrechtMapcontrolbuttonMarginInlineEnd": "0",
613
- "utrechtMapcontrolbuttonPaddingBlockStart": "4px",
614
- "utrechtMapcontrolbuttonPaddingBlockEnd": "4px",
615
- "utrechtMapcontrolbuttonPaddingInlineStart": "4px",
616
- "utrechtMapcontrolbuttonPaddingInlineEnd": "4px",
617
608
  "utrechtMapcontrolbuttonDisabledBackgroundColor": "hsl(0 0% 90%)",
618
609
  "utrechtMapcontrolbuttonDisabledBorderColor": "hsl(0 0% 80%)",
619
610
  "utrechtMapcontrolbuttonDisabledColor": "hsl(0 0% 80%)",
@@ -623,6 +614,14 @@ module.exports = {
623
614
  "utrechtMapcontrolbuttonHoverColor": "hsl(0 0% 100%)",
624
615
  "utrechtMapcontrolbuttonLabelMarginInlineStart": "8px",
625
616
  "utrechtMapcontrolbuttonLabelMarginInlineEnd": "8px",
617
+ "utrechtMapcontrolbuttonMarginBlockEnd": "8px",
618
+ "utrechtMapcontrolbuttonMarginBlockStart": "8px",
619
+ "utrechtMapcontrolbuttonMarginInlineEnd": "0",
620
+ "utrechtMapcontrolbuttonMarginInlineStart": "0",
621
+ "utrechtMapcontrolbuttonPaddingBlockEnd": "4px",
622
+ "utrechtMapcontrolbuttonPaddingBlockStart": "4px",
623
+ "utrechtMapcontrolbuttonPaddingInlineEnd": "4px",
624
+ "utrechtMapcontrolbuttonPaddingInlineStart": "4px",
626
625
  "utrechtMarkBackgroundColor": "hsl(48 100% 60%)",
627
626
  "utrechtMarkColor": "hsl(0 0% 0%)",
628
627
  "utrechtNavBarBackgroundColor": "hsl(0 0% 100%)",
@@ -688,7 +687,7 @@ module.exports = {
688
687
  "utrechtPagePaddingInlineEnd": "2em",
689
688
  "utrechtPagePaddingBlockEnd": "1em",
690
689
  "utrechtPagePaddingInlineStart": "2em",
691
- "utrechtPaginationFontSize": "14px",
690
+ "utrechtPaginationFontSize": "0.875rem",
692
691
  "utrechtPaginationMarginBlockStart": "0",
693
692
  "utrechtPaginationMarginBlockEnd": "1em",
694
693
  "utrechtPaginationPageLinkBackgroundColor": "transparent",
@@ -806,7 +805,7 @@ module.exports = {
806
805
  "utrechtSkipLinkTextDecoration": "underline",
807
806
  "utrechtSkipLinkFocusBackgroundColor": "hsl(48 100% 80%)",
808
807
  "utrechtSkipLinkFocusColor": "hsl(0 0% 0%)",
809
- "utrechtSkipLinkFocusTextDecoration": "none",
808
+ "utrechtSkipLinkFocusVisibleTextDecoration": "none",
810
809
  "utrechtSpotlightSectionBackgroundColor": "hsl(0 0% 90%)",
811
810
  "utrechtSpotlightSectionColor": "hsl(0 0% 0%)",
812
811
  "utrechtSpotlightSectionPaddingBlockStart": "16px",
@@ -822,7 +821,7 @@ module.exports = {
822
821
  "utrechtTableMarginBlockEnd": "0",
823
822
  "utrechtTableMarginBlockStart": "16px",
824
823
  "utrechtTableCaptionFontWeight": "700",
825
- "utrechtTableCaptionFontSize": "1.125em",
824
+ "utrechtTableCaptionFontSize": "1.125rem",
826
825
  "utrechtTableCaptionTextAlign": "start",
827
826
  "utrechtTableCaptionMarginBlockEnd": "1em",
828
827
  "utrechtTableHeaderFontWeight": "700",
@@ -836,7 +835,7 @@ module.exports = {
836
835
  "utrechtTableFooterStickyColor": "hsl(0 0% 0%)",
837
836
  "utrechtTableFooterStickyBorderBlockStartColor": "hsl(0 100% 40%)",
838
837
  "utrechtTableFooterStickyBorderBlockStartWidth": "2px",
839
- "utrechtTableCellLineHeight": "24px",
838
+ "utrechtTableCellLineHeight": "1.5rem",
840
839
  "utrechtTableCellPaddingBlockEnd": "0.5em",
841
840
  "utrechtTableCellPaddingBlockStart": "0.5em",
842
841
  "utrechtTableCellPaddingInlineEnd": "0.4em",
@@ -929,8 +928,6 @@ module.exports = {
929
928
  "utrechtIconScale3xl": "36px",
930
929
  "utrechtIconScale4xl": "48px",
931
930
  "utrechtTypographySansSerifFontFamily": "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif",
932
- "utrechtTypographyScale2xsFontSize": "0.5rem",
933
- "utrechtTypographyScaleXsFontSize": "0.75rem",
934
931
  "utrechtTypographyScaleSmFontSize": "0.875rem",
935
932
  "utrechtTypographyScaleMdFontSize": "1rem",
936
933
  "utrechtTypographyScaleLgFontSize": "1.125rem",
@@ -1008,5 +1005,5 @@ module.exports = {
1008
1005
  "ofPageFooterBg": "hsl(0 100% 40%)",
1009
1006
  "ofPageFooterFg": "hsl(0 0% 100%)",
1010
1007
  "ofProgressIndicatorBackgroundColor": "hsl(0 0% 100%)",
1011
- "ofProgressIndicatorMobileBoxShadow": "0px 0px 2px 0px rgba(0, 0, 0, 0.2)"
1008
+ "ofProgressIndicatorMobileBoxShadow": "0px 0px 2px 0px rgba(0 0 0 / 20%)"
1012
1009
  };