@utrecht/design-tokens 2.1.1 → 2.3.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 (61) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/_mixin-theme.scss +3 -5
  3. package/dist/_mixin.scss +3 -5
  4. package/dist/_variables.scss +3 -5
  5. package/dist/dark/_mixin-theme.scss +3 -5
  6. package/dist/dark/_mixin.scss +3 -5
  7. package/dist/dark/_variables.scss +3 -5
  8. package/dist/dark/index.cjs +3 -5
  9. package/dist/dark/index.css +3 -5
  10. package/dist/dark/index.d.ts +2 -6
  11. package/dist/dark/index.flat.json +1 -3
  12. package/dist/dark/index.json +26 -40
  13. package/dist/dark/index.mjs +3 -5
  14. package/dist/dark/index.tokens.json +441 -14
  15. package/dist/dark/list.d.ts +14 -0
  16. package/dist/dark/list.json +26 -40
  17. package/dist/dark/list.mjs +30694 -0
  18. package/dist/dark/property.css +2 -0
  19. package/dist/dark/root.css +1 -3
  20. package/dist/dark/theme-prince-xml.css +3 -5
  21. package/dist/dark/theme.css +1 -3
  22. package/dist/dark/tokens.cjs +512 -97
  23. package/dist/dark/tokens.d.ts +239 -13
  24. package/dist/dark/tokens.json +514 -99
  25. package/dist/dark/variables.cjs +3 -5
  26. package/dist/dark/variables.css +1 -3
  27. package/dist/dark/variables.d.ts +2 -6
  28. package/dist/dark/variables.json +1 -3
  29. package/dist/dark/variables.less +3 -5
  30. package/dist/dark/variables.mjs +3 -5
  31. package/dist/index.cjs +3 -5
  32. package/dist/index.css +84 -10
  33. package/dist/index.d.ts +2 -6
  34. package/dist/index.flat.json +1 -3
  35. package/dist/index.json +26 -40
  36. package/dist/index.mjs +3 -5
  37. package/dist/index.tokens.json +441 -14
  38. package/dist/list.d.ts +14 -0
  39. package/dist/list.json +26 -40
  40. package/dist/list.mjs +31811 -0
  41. package/dist/property.css +2 -0
  42. package/dist/root.css +1 -3
  43. package/dist/theme-prince-xml.css +3 -5
  44. package/dist/theme.css +1 -3
  45. package/dist/tokens.cjs +512 -97
  46. package/dist/tokens.d.ts +239 -13
  47. package/dist/tokens.json +514 -99
  48. package/dist/variables.cjs +3 -5
  49. package/dist/variables.css +1 -3
  50. package/dist/variables.d.ts +2 -6
  51. package/dist/variables.json +1 -3
  52. package/dist/variables.less +3 -5
  53. package/dist/variables.mjs +3 -5
  54. package/package.json +1 -1
  55. package/src/brand/utrecht/typography.tokens.json +0 -2
  56. package/src/component/utrecht/blockquote.tokens.json +1 -1
  57. package/src/css-property-formatter.mjs +2 -1
  58. package/src/index.scss +79 -0
  59. package/src/json-list-formatter.js +2 -1
  60. package/style-dictionary-build.mjs +3 -1
  61. package/style-dictionary-config.mjs +27 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @utrecht/design-tokens
2
2
 
3
+ ## 2.3.0
4
+
5
+ ### Minor Changes
6
+
7
+ - b2cb0fa: Add `list.mjs` and `list.d.mts` to the design tokens package.
8
+
9
+ ## 2.2.0
10
+
11
+ ### Minor Changes
12
+
13
+ - fb0a096: Add `utrecht-theme--viewport-scale` class name to `dist/index.css` for responsive scales.
14
+
3
15
  ## 2.1.1
4
16
 
5
17
  ### Patch Changes
package/dist/_mixin-theme.scss CHANGED
@@ -32,8 +32,6 @@
32
32
  --utrecht-typography-scale-lg-font-size: 1.125rem; /* 18px */
33
33
  --utrecht-typography-scale-md-font-size: 1rem; /* 16px */
34
34
  --utrecht-typography-scale-sm-font-size: 0.875rem; /* 14px */
35
- --utrecht-typography-scale-xs-font-size: 0.75rem; /* 12px */
36
- --utrecht-typography-scale-2xs-font-size: 0.5rem; /* 8px */
37
35
  --utrecht-typography-sans-serif-font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Arial", sans-serif;
38
36
  --utrecht-icon-scale-4xl: 48px;
39
37
  --utrecht-icon-scale-3xl: 36px; /* Formaat voor toptaks iconen */
@@ -603,10 +601,10 @@
603
601
  --utrecht-listbox-option-group-title-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
604
602
  --utrecht-listbox-option-group-title-font-size: var(--utrecht-typography-scale-md-font-size);
605
603
  --utrecht-listbox-option-group-margin-block-end: var(--utrecht-space-inline-xs);
606
- --utrecht-listbox-option-hover-background-color: var(--utrecht-color-blue-90);
607
- --utrecht-listbox-option-hover-color: var(--utrecht-color-black);
608
604
  --utrecht-listbox-option-selected-color: var(--utrecht-color-black);
609
605
  --utrecht-listbox-option-selected-background-color: var(--utrecht-color-grey-95);
606
+ --utrecht-listbox-option-hover-color: var(--utrecht-color-black);
607
+ --utrecht-listbox-option-hover-background-color: var(--utrecht-color-blue-90);
610
608
  --utrecht-listbox-option-active-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
611
609
  --utrecht-listbox-option-active-color: var(--utrecht-color-black);
612
610
  --utrecht-listbox-option-active-background-color: var(--utrecht-color-grey-95);
@@ -866,7 +864,7 @@
866
864
  --utrecht-breadcrumb-nav-item-padding-block-end: var(--utrecht-space-block-xs);
867
865
  --utrecht-breadcrumb-nav-item-padding-block-start: var(--utrecht-space-block-xs);
868
866
  --utrecht-breadcrumb-nav-font-size: var(--utrecht-typography-scale-md-font-size);
869
- --utrecht-blockquote-caption-font-size: var(--utrecht-typography-scale-xs-font-size);
867
+ --utrecht-blockquote-caption-font-size: var(--utrecht-typography-scale-sm-font-size);
870
868
  --utrecht-blockquote-content-font-size: var(--utrecht-typography-scale-lg-font-size);
871
869
  --utrecht-blockquote-content-color: var(--utrecht-color-red-40);
872
870
  --utrecht-badge-font-style: var(--utrecht-typography-font-style-normal);
package/dist/_mixin.scss CHANGED
@@ -32,8 +32,6 @@
32
32
  --utrecht-typography-scale-lg-font-size: 1.125rem; /* 18px */
33
33
  --utrecht-typography-scale-md-font-size: 1rem; /* 16px */
34
34
  --utrecht-typography-scale-sm-font-size: 0.875rem; /* 14px */
35
- --utrecht-typography-scale-xs-font-size: 0.75rem; /* 12px */
36
- --utrecht-typography-scale-2xs-font-size: 0.5rem; /* 8px */
37
35
  --utrecht-typography-sans-serif-font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Arial", sans-serif;
38
36
  --utrecht-icon-scale-4xl: 48px;
39
37
  --utrecht-icon-scale-3xl: 36px; /* Formaat voor toptaks iconen */
@@ -603,10 +601,10 @@
603
601
  --utrecht-listbox-option-group-title-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
604
602
  --utrecht-listbox-option-group-title-font-size: var(--utrecht-typography-scale-md-font-size);
605
603
  --utrecht-listbox-option-group-margin-block-end: var(--utrecht-space-inline-xs);
606
- --utrecht-listbox-option-hover-background-color: var(--utrecht-color-blue-90);
607
- --utrecht-listbox-option-hover-color: var(--utrecht-color-black);
608
604
  --utrecht-listbox-option-selected-color: var(--utrecht-color-black);
609
605
  --utrecht-listbox-option-selected-background-color: var(--utrecht-color-grey-95);
606
+ --utrecht-listbox-option-hover-color: var(--utrecht-color-black);
607
+ --utrecht-listbox-option-hover-background-color: var(--utrecht-color-blue-90);
610
608
  --utrecht-listbox-option-active-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
611
609
  --utrecht-listbox-option-active-color: var(--utrecht-color-black);
612
610
  --utrecht-listbox-option-active-background-color: var(--utrecht-color-grey-95);
@@ -866,7 +864,7 @@
866
864
  --utrecht-breadcrumb-nav-item-padding-block-end: var(--utrecht-space-block-xs);
867
865
  --utrecht-breadcrumb-nav-item-padding-block-start: var(--utrecht-space-block-xs);
868
866
  --utrecht-breadcrumb-nav-font-size: var(--utrecht-typography-scale-md-font-size);
869
- --utrecht-blockquote-caption-font-size: var(--utrecht-typography-scale-xs-font-size);
867
+ --utrecht-blockquote-caption-font-size: var(--utrecht-typography-scale-sm-font-size);
870
868
  --utrecht-blockquote-content-font-size: var(--utrecht-typography-scale-lg-font-size);
871
869
  --utrecht-blockquote-content-color: var(--utrecht-color-red-40);
872
870
  --utrecht-badge-font-style: var(--utrecht-typography-font-style-normal);
package/dist/_variables.scss CHANGED
@@ -30,8 +30,6 @@ $utrecht-typography-scale-xl-font-size: 1.25rem; // 20px
30
30
  $utrecht-typography-scale-lg-font-size: 1.125rem; // 18px
31
31
  $utrecht-typography-scale-md-font-size: 1rem; // 16px
32
32
  $utrecht-typography-scale-sm-font-size: 0.875rem; // 14px
33
- $utrecht-typography-scale-xs-font-size: 0.75rem; // 12px
34
- $utrecht-typography-scale-2xs-font-size: 0.5rem; // 8px
35
33
  $utrecht-typography-sans-serif-font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Arial", sans-serif;
36
34
  $utrecht-icon-scale-4xl: 48px;
37
35
  $utrecht-icon-scale-3xl: 36px; // Formaat voor toptaks iconen
@@ -601,10 +599,10 @@ $utrecht-listbox-option-group-title-color: $utrecht-color-black;
601
599
  $utrecht-listbox-option-group-title-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
602
600
  $utrecht-listbox-option-group-title-font-size: $utrecht-typography-scale-md-font-size;
603
601
  $utrecht-listbox-option-group-margin-block-end: $utrecht-space-inline-xs;
604
- $utrecht-listbox-option-hover-background-color: $utrecht-color-blue-90;
605
- $utrecht-listbox-option-hover-color: $utrecht-color-black;
606
602
  $utrecht-listbox-option-selected-color: $utrecht-color-black;
607
603
  $utrecht-listbox-option-selected-background-color: $utrecht-color-grey-95;
604
+ $utrecht-listbox-option-hover-color: $utrecht-color-black;
605
+ $utrecht-listbox-option-hover-background-color: $utrecht-color-blue-90;
608
606
  $utrecht-listbox-option-active-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
609
607
  $utrecht-listbox-option-active-color: $utrecht-color-black;
610
608
  $utrecht-listbox-option-active-background-color: $utrecht-color-grey-95;
@@ -864,7 +862,7 @@ $utrecht-breadcrumb-nav-item-padding-inline-end: $utrecht-space-inline-xs;
864
862
  $utrecht-breadcrumb-nav-item-padding-block-end: $utrecht-space-block-xs;
865
863
  $utrecht-breadcrumb-nav-item-padding-block-start: $utrecht-space-block-xs;
866
864
  $utrecht-breadcrumb-nav-font-size: $utrecht-typography-scale-md-font-size;
867
- $utrecht-blockquote-caption-font-size: $utrecht-typography-scale-xs-font-size;
865
+ $utrecht-blockquote-caption-font-size: $utrecht-typography-scale-sm-font-size;
868
866
  $utrecht-blockquote-content-font-size: $utrecht-typography-scale-lg-font-size;
869
867
  $utrecht-blockquote-content-color: $utrecht-color-red-40;
870
868
  $utrecht-badge-font-style: $utrecht-typography-font-style-normal;
package/dist/dark/_mixin-theme.scss CHANGED
@@ -32,8 +32,6 @@
32
32
  --utrecht-typography-scale-lg-font-size: 1.125rem; /* 18px */
33
33
  --utrecht-typography-scale-md-font-size: 1rem; /* 16px */
34
34
  --utrecht-typography-scale-sm-font-size: 0.875rem; /* 14px */
35
- --utrecht-typography-scale-xs-font-size: 0.75rem; /* 12px */
36
- --utrecht-typography-scale-2xs-font-size: 0.5rem; /* 8px */
37
35
  --utrecht-typography-sans-serif-font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Arial", sans-serif;
38
36
  --utrecht-icon-scale-4xl: 48px;
39
37
  --utrecht-icon-scale-3xl: 36px; /* Formaat voor toptaks iconen */
@@ -608,10 +606,10 @@
608
606
  --utrecht-listbox-option-group-title-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
609
607
  --utrecht-listbox-option-group-title-font-size: var(--utrecht-typography-scale-md-font-size);
610
608
  --utrecht-listbox-option-group-margin-block-end: var(--utrecht-space-inline-xs);
611
- --utrecht-listbox-option-hover-background-color: var(--utrecht-color-blue-90);
612
- --utrecht-listbox-option-hover-color: var(--utrecht-color-black);
613
609
  --utrecht-listbox-option-selected-color: var(--utrecht-color-black);
614
610
  --utrecht-listbox-option-selected-background-color: var(--utrecht-color-grey-95);
611
+ --utrecht-listbox-option-hover-color: var(--utrecht-color-black);
612
+ --utrecht-listbox-option-hover-background-color: var(--utrecht-color-blue-90);
615
613
  --utrecht-listbox-option-active-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
616
614
  --utrecht-listbox-option-active-color: var(--utrecht-color-black);
617
615
  --utrecht-listbox-option-active-background-color: var(--utrecht-color-grey-95);
@@ -867,7 +865,7 @@
867
865
  --utrecht-breadcrumb-nav-item-padding-block-end: var(--utrecht-space-block-xs);
868
866
  --utrecht-breadcrumb-nav-item-padding-block-start: var(--utrecht-space-block-xs);
869
867
  --utrecht-breadcrumb-nav-font-size: var(--utrecht-typography-scale-md-font-size);
870
- --utrecht-blockquote-caption-font-size: var(--utrecht-typography-scale-xs-font-size);
868
+ --utrecht-blockquote-caption-font-size: var(--utrecht-typography-scale-sm-font-size);
871
869
  --utrecht-blockquote-content-font-size: var(--utrecht-typography-scale-lg-font-size);
872
870
  --utrecht-blockquote-content-color: var(--utrecht-color-red-40);
873
871
  --utrecht-badge-font-style: var(--utrecht-typography-font-style-normal);
package/dist/dark/_mixin.scss CHANGED
@@ -32,8 +32,6 @@
32
32
  --utrecht-typography-scale-lg-font-size: 1.125rem; /* 18px */
33
33
  --utrecht-typography-scale-md-font-size: 1rem; /* 16px */
34
34
  --utrecht-typography-scale-sm-font-size: 0.875rem; /* 14px */
35
- --utrecht-typography-scale-xs-font-size: 0.75rem; /* 12px */
36
- --utrecht-typography-scale-2xs-font-size: 0.5rem; /* 8px */
37
35
  --utrecht-typography-sans-serif-font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Arial", sans-serif;
38
36
  --utrecht-icon-scale-4xl: 48px;
39
37
  --utrecht-icon-scale-3xl: 36px; /* Formaat voor toptaks iconen */
@@ -608,10 +606,10 @@
608
606
  --utrecht-listbox-option-group-title-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
609
607
  --utrecht-listbox-option-group-title-font-size: var(--utrecht-typography-scale-md-font-size);
610
608
  --utrecht-listbox-option-group-margin-block-end: var(--utrecht-space-inline-xs);
611
- --utrecht-listbox-option-hover-background-color: var(--utrecht-color-blue-90);
612
- --utrecht-listbox-option-hover-color: var(--utrecht-color-black);
613
609
  --utrecht-listbox-option-selected-color: var(--utrecht-color-black);
614
610
  --utrecht-listbox-option-selected-background-color: var(--utrecht-color-grey-95);
611
+ --utrecht-listbox-option-hover-color: var(--utrecht-color-black);
612
+ --utrecht-listbox-option-hover-background-color: var(--utrecht-color-blue-90);
615
613
  --utrecht-listbox-option-active-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
616
614
  --utrecht-listbox-option-active-color: var(--utrecht-color-black);
617
615
  --utrecht-listbox-option-active-background-color: var(--utrecht-color-grey-95);
@@ -867,7 +865,7 @@
867
865
  --utrecht-breadcrumb-nav-item-padding-block-end: var(--utrecht-space-block-xs);
868
866
  --utrecht-breadcrumb-nav-item-padding-block-start: var(--utrecht-space-block-xs);
869
867
  --utrecht-breadcrumb-nav-font-size: var(--utrecht-typography-scale-md-font-size);
870
- --utrecht-blockquote-caption-font-size: var(--utrecht-typography-scale-xs-font-size);
868
+ --utrecht-blockquote-caption-font-size: var(--utrecht-typography-scale-sm-font-size);
871
869
  --utrecht-blockquote-content-font-size: var(--utrecht-typography-scale-lg-font-size);
872
870
  --utrecht-blockquote-content-color: var(--utrecht-color-red-40);
873
871
  --utrecht-badge-font-style: var(--utrecht-typography-font-style-normal);
package/dist/dark/_variables.scss CHANGED
@@ -30,8 +30,6 @@ $utrecht-typography-scale-xl-font-size: 1.25rem; // 20px
30
30
  $utrecht-typography-scale-lg-font-size: 1.125rem; // 18px
31
31
  $utrecht-typography-scale-md-font-size: 1rem; // 16px
32
32
  $utrecht-typography-scale-sm-font-size: 0.875rem; // 14px
33
- $utrecht-typography-scale-xs-font-size: 0.75rem; // 12px
34
- $utrecht-typography-scale-2xs-font-size: 0.5rem; // 8px
35
33
  $utrecht-typography-sans-serif-font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Arial", sans-serif;
36
34
  $utrecht-icon-scale-4xl: 48px;
37
35
  $utrecht-icon-scale-3xl: 36px; // Formaat voor toptaks iconen
@@ -606,10 +604,10 @@ $utrecht-listbox-option-group-title-color: $utrecht-color-black;
606
604
  $utrecht-listbox-option-group-title-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
607
605
  $utrecht-listbox-option-group-title-font-size: $utrecht-typography-scale-md-font-size;
608
606
  $utrecht-listbox-option-group-margin-block-end: $utrecht-space-inline-xs;
609
- $utrecht-listbox-option-hover-background-color: $utrecht-color-blue-90;
610
- $utrecht-listbox-option-hover-color: $utrecht-color-black;
611
607
  $utrecht-listbox-option-selected-color: $utrecht-color-black;
612
608
  $utrecht-listbox-option-selected-background-color: $utrecht-color-grey-95;
609
+ $utrecht-listbox-option-hover-color: $utrecht-color-black;
610
+ $utrecht-listbox-option-hover-background-color: $utrecht-color-blue-90;
613
611
  $utrecht-listbox-option-active-font-weight: $utrecht-typography-weight-scale-bold-font-weight;
614
612
  $utrecht-listbox-option-active-color: $utrecht-color-black;
615
613
  $utrecht-listbox-option-active-background-color: $utrecht-color-grey-95;
@@ -865,7 +863,7 @@ $utrecht-breadcrumb-nav-item-padding-inline-end: $utrecht-space-inline-xs;
865
863
  $utrecht-breadcrumb-nav-item-padding-block-end: $utrecht-space-block-xs;
866
864
  $utrecht-breadcrumb-nav-item-padding-block-start: $utrecht-space-block-xs;
867
865
  $utrecht-breadcrumb-nav-font-size: $utrecht-typography-scale-md-font-size;
868
- $utrecht-blockquote-caption-font-size: $utrecht-typography-scale-xs-font-size;
866
+ $utrecht-blockquote-caption-font-size: $utrecht-typography-scale-sm-font-size;
869
867
  $utrecht-blockquote-content-font-size: $utrecht-typography-scale-lg-font-size;
870
868
  $utrecht-blockquote-content-color: $utrecht-color-red-40;
871
869
  $utrecht-badge-font-style: $utrecht-typography-font-style-normal;
package/dist/dark/index.cjs CHANGED
@@ -82,7 +82,7 @@ module.exports = {
82
82
  "utrechtBlockquoteMarginInlineEnd": "1.6em",
83
83
  "utrechtBlockquoteContentColor": "hsl(0 100% 40%)",
84
84
  "utrechtBlockquoteContentFontSize": "1.125rem",
85
- "utrechtBlockquoteCaptionFontSize": "0.75rem",
85
+ "utrechtBlockquoteCaptionFontSize": "0.875rem",
86
86
  "utrechtBlockquoteMarginBlockStart": "1.6em",
87
87
  "utrechtBlockquoteMarginBlockEnd": "1.6em",
88
88
  "utrechtBreadcrumbNavMinBlockSize": "34px",
@@ -586,10 +586,10 @@ module.exports = {
586
586
  "utrechtListboxOptionActiveBackgroundColor": "hsl(0 0% 95%)",
587
587
  "utrechtListboxOptionActiveColor": "hsl(0 0% 0%)",
588
588
  "utrechtListboxOptionActiveFontWeight": "700",
589
+ "utrechtListboxOptionHoverBackgroundColor": "hsl(211 60% 90%)",
590
+ "utrechtListboxOptionHoverColor": "hsl(0 0% 0%)",
589
591
  "utrechtListboxOptionSelectedBackgroundColor": "hsl(0 0% 95%)",
590
592
  "utrechtListboxOptionSelectedColor": "hsl(0 0% 0%)",
591
- "utrechtListboxOptionHoverColor": "hsl(0 0% 0%)",
592
- "utrechtListboxOptionHoverBackgroundColor": "hsl(211 60% 90%)",
593
593
  "utrechtListboxOptionGroupMarginBlockEnd": "8px",
594
594
  "utrechtListboxOptionGroupTitleFontSize": "1rem",
595
595
  "utrechtListboxOptionGroupTitleFontWeight": "700",
@@ -939,8 +939,6 @@ module.exports = {
939
939
  "utrechtIconScale3xl": "36px",
940
940
  "utrechtIconScale4xl": "48px",
941
941
  "utrechtTypographySansSerifFontFamily": "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif",
942
- "utrechtTypographyScale2xsFontSize": "0.5rem",
943
- "utrechtTypographyScaleXsFontSize": "0.75rem",
944
942
  "utrechtTypographyScaleSmFontSize": "0.875rem",
945
943
  "utrechtTypographyScaleMdFontSize": "1rem",
946
944
  "utrechtTypographyScaleLgFontSize": "1.125rem",
package/dist/dark/index.css CHANGED
@@ -37,8 +37,6 @@
37
37
  --utrecht-typography-scale-lg-font-size: 1.125rem; /* 18px */
38
38
  --utrecht-typography-scale-md-font-size: 1rem; /* 16px */
39
39
  --utrecht-typography-scale-sm-font-size: 0.875rem; /* 14px */
40
- --utrecht-typography-scale-xs-font-size: 0.75rem; /* 12px */
41
- --utrecht-typography-scale-2xs-font-size: 0.5rem; /* 8px */
42
40
  --utrecht-typography-sans-serif-font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Arial", sans-serif;
43
41
  --utrecht-icon-scale-4xl: 48px;
44
42
  --utrecht-icon-scale-3xl: 36px; /* Formaat voor toptaks iconen */
@@ -613,10 +611,10 @@
613
611
  --utrecht-listbox-option-group-title-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
614
612
  --utrecht-listbox-option-group-title-font-size: var(--utrecht-typography-scale-md-font-size);
615
613
  --utrecht-listbox-option-group-margin-block-end: var(--utrecht-space-inline-xs);
616
- --utrecht-listbox-option-hover-background-color: var(--utrecht-color-blue-90);
617
- --utrecht-listbox-option-hover-color: var(--utrecht-color-black);
618
614
  --utrecht-listbox-option-selected-color: var(--utrecht-color-black);
619
615
  --utrecht-listbox-option-selected-background-color: var(--utrecht-color-grey-95);
616
+ --utrecht-listbox-option-hover-color: var(--utrecht-color-black);
617
+ --utrecht-listbox-option-hover-background-color: var(--utrecht-color-blue-90);
620
618
  --utrecht-listbox-option-active-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
621
619
  --utrecht-listbox-option-active-color: var(--utrecht-color-black);
622
620
  --utrecht-listbox-option-active-background-color: var(--utrecht-color-grey-95);
@@ -872,7 +870,7 @@
872
870
  --utrecht-breadcrumb-nav-item-padding-block-end: var(--utrecht-space-block-xs);
873
871
  --utrecht-breadcrumb-nav-item-padding-block-start: var(--utrecht-space-block-xs);
874
872
  --utrecht-breadcrumb-nav-font-size: var(--utrecht-typography-scale-md-font-size);
875
- --utrecht-blockquote-caption-font-size: var(--utrecht-typography-scale-xs-font-size);
873
+ --utrecht-blockquote-caption-font-size: var(--utrecht-typography-scale-sm-font-size);
876
874
  --utrecht-blockquote-content-font-size: var(--utrecht-typography-scale-lg-font-size);
877
875
  --utrecht-blockquote-content-color: var(--utrecht-color-red-40);
878
876
  --utrecht-badge-font-style: var(--utrecht-typography-font-style-normal);
package/dist/dark/index.d.ts CHANGED
@@ -649,10 +649,10 @@ export const utrechtListboxOptionPaddingInlineStart : string;
649
649
  export const utrechtListboxOptionActiveBackgroundColor : string;
650
650
  export const utrechtListboxOptionActiveColor : string;
651
651
  export const utrechtListboxOptionActiveFontWeight : string;
652
+ export const utrechtListboxOptionHoverBackgroundColor : string;
653
+ export const utrechtListboxOptionHoverColor : string;
652
654
  export const utrechtListboxOptionSelectedBackgroundColor : string;
653
655
  export const utrechtListboxOptionSelectedColor : string;
654
- export const utrechtListboxOptionHoverColor : string;
655
- export const utrechtListboxOptionHoverBackgroundColor : string;
656
656
  export const utrechtListboxOptionGroupMarginBlockEnd : string;
657
657
  export const utrechtListboxOptionGroupTitleFontSize : string;
658
658
  export const utrechtListboxOptionGroupTitleFontWeight : string;
@@ -1052,10 +1052,6 @@ export const utrechtIconScale2xl : string;
1052
1052
  export const utrechtIconScale3xl : string;
1053
1053
  export const utrechtIconScale4xl : string;
1054
1054
  export const utrechtTypographySansSerifFontFamily : string;
1055
- /** 8px */
1056
- export const utrechtTypographyScale2xsFontSize : string;
1057
- /** 12px */
1058
- export const utrechtTypographyScaleXsFontSize : string;
1059
1055
  /** 14px */
1060
1056
  export const utrechtTypographyScaleSmFontSize : string;
1061
1057
  /** 16px */
package/dist/dark/index.flat.json CHANGED
@@ -129,7 +129,7 @@
129
129
  "utrechtBadgeListItemMarginInline": "12px",
130
130
  "utrechtBadgePaddingBlock": "8px",
131
131
  "utrechtBadgePaddingInline": "12px",
132
- "utrechtBlockquoteCaptionFontSize": "0.75rem",
132
+ "utrechtBlockquoteCaptionFontSize": "0.875rem",
133
133
  "utrechtBlockquoteContentColor": "hsl(0 100% 40%)",
134
134
  "utrechtBlockquoteContentFontSize": "1.125rem",
135
135
  "utrechtBlockquoteMarginBlockEnd": "1.6em",
@@ -1000,14 +1000,12 @@
1000
1000
  "utrechtTypographyLineHeightXs": "1",
1001
1001
  "utrechtTypographySansSerifFontFamily": "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif",
1002
1002
  "utrechtTypographyScale2xlFontSize": "1.375rem",
1003
- "utrechtTypographyScale2xsFontSize": "0.5rem",
1004
1003
  "utrechtTypographyScale3xlFontSize": "1.5rem",
1005
1004
  "utrechtTypographyScale4xlFontSize": "2rem",
1006
1005
  "utrechtTypographyScaleLgFontSize": "1.125rem",
1007
1006
  "utrechtTypographyScaleMdFontSize": "1rem",
1008
1007
  "utrechtTypographyScaleSmFontSize": "0.875rem",
1009
1008
  "utrechtTypographyScaleXlFontSize": "1.25rem",
1010
- "utrechtTypographyScaleXsFontSize": "0.75rem",
1011
1009
  "utrechtTypographyWeightScaleBoldFontWeight": "700",
1012
1010
  "utrechtTypographyWeightScaleNormalFontWeight": "400",
1013
1011
  "utrechtUnorderedListItemMarginBlockEnd": "0.25rem",
package/dist/dark/index.json CHANGED
@@ -4047,7 +4047,7 @@
4047
4047
  }
4048
4048
  },
4049
4049
  "type": "fontSize",
4050
- "value": "0.75rem",
4050
+ "value": "0.875rem",
4051
4051
  "filePath": "src/component/utrecht/blockquote.tokens.json",
4052
4052
  "isSource": true,
4053
4053
  "original": {
@@ -4062,7 +4062,7 @@
4062
4062
  }
4063
4063
  },
4064
4064
  "type": "fontSize",
4065
- "value": "{utrecht.typography.scale.xs.font-size}"
4065
+ "value": "{utrecht.typography.scale.sm.font-size}"
4066
4066
  },
4067
4067
  "name": "utrechtBlockquoteCaptionFontSize",
4068
4068
  "attributes": {},
@@ -18845,10 +18845,22 @@
18845
18845
  ]
18846
18846
  },
18847
18847
  {
18848
+ "$extensions": {
18849
+ "nl.nldesignsystem.css.property": {
18850
+ "syntax": "<color>",
18851
+ "inherits": true
18852
+ }
18853
+ },
18848
18854
  "value": "hsl(211 60% 90%)",
18849
18855
  "filePath": "src/component/utrecht/listbox.tokens.json",
18850
18856
  "isSource": true,
18851
18857
  "original": {
18858
+ "$extensions": {
18859
+ "nl.nldesignsystem.css.property": {
18860
+ "syntax": "<color>",
18861
+ "inherits": true
18862
+ }
18863
+ },
18852
18864
  "value": "{utrecht.color.blue.90}"
18853
18865
  },
18854
18866
  "name": "utrechtListboxOptionHoverBackgroundColor",
@@ -18862,10 +18874,22 @@
18862
18874
  ]
18863
18875
  },
18864
18876
  {
18877
+ "$extensions": {
18878
+ "nl.nldesignsystem.css.property": {
18879
+ "syntax": "<color>",
18880
+ "inherits": true
18881
+ }
18882
+ },
18865
18883
  "value": "hsl(0 0% 0%)",
18866
18884
  "filePath": "src/component/utrecht/listbox.tokens.json",
18867
18885
  "isSource": true,
18868
18886
  "original": {
18887
+ "$extensions": {
18888
+ "nl.nldesignsystem.css.property": {
18889
+ "syntax": "<color>",
18890
+ "inherits": true
18891
+ }
18892
+ },
18869
18893
  "value": "{utrecht.color.black}"
18870
18894
  },
18871
18895
  "name": "utrechtListboxOptionHoverColor",
@@ -30337,25 +30361,6 @@
30337
30361
  "font-size"
30338
30362
  ]
30339
30363
  },
30340
- {
30341
- "value": "0.5rem",
30342
- "comment": "8px",
30343
- "filePath": "src/brand/utrecht/typography.tokens.json",
30344
- "isSource": true,
30345
- "original": {
30346
- "value": "8px",
30347
- "comment": "8px"
30348
- },
30349
- "name": "utrechtTypographyScale2xsFontSize",
30350
- "attributes": {},
30351
- "path": [
30352
- "utrecht",
30353
- "typography",
30354
- "scale",
30355
- "2xs",
30356
- "font-size"
30357
- ]
30358
- },
30359
30364
  {
30360
30365
  "value": "1.5rem",
30361
30366
  "comment": "24px",
@@ -30470,25 +30475,6 @@
30470
30475
  "font-size"
30471
30476
  ]
30472
30477
  },
30473
- {
30474
- "value": "0.75rem",
30475
- "comment": "12px",
30476
- "filePath": "src/brand/utrecht/typography.tokens.json",
30477
- "isSource": true,
30478
- "original": {
30479
- "value": "12px",
30480
- "comment": "12px"
30481
- },
30482
- "name": "utrechtTypographyScaleXsFontSize",
30483
- "attributes": {},
30484
- "path": [
30485
- "utrecht",
30486
- "typography",
30487
- "scale",
30488
- "xs",
30489
- "font-size"
30490
- ]
30491
- },
30492
30478
  {
30493
30479
  "value": "700",
30494
30480
  "filePath": "src/brand/utrecht/typography.tokens.json",
package/dist/dark/index.mjs CHANGED
@@ -81,7 +81,7 @@ export const utrechtBlockquoteMarginInlineStart = "1.6em";
81
81
  export const utrechtBlockquoteMarginInlineEnd = "1.6em";
82
82
  export const utrechtBlockquoteContentColor = "hsl(0 100% 40%)";
83
83
  export const utrechtBlockquoteContentFontSize = "1.125rem";
84
- export const utrechtBlockquoteCaptionFontSize = "0.75rem";
84
+ export const utrechtBlockquoteCaptionFontSize = "0.875rem";
85
85
  export const utrechtBlockquoteMarginBlockStart = "1.6em";
86
86
  export const utrechtBlockquoteMarginBlockEnd = "1.6em";
87
87
  export const utrechtBreadcrumbNavMinBlockSize = "34px";
@@ -585,10 +585,10 @@ export const utrechtListboxOptionPaddingInlineStart = "8px";
585
585
  export const utrechtListboxOptionActiveBackgroundColor = "hsl(0 0% 95%)";
586
586
  export const utrechtListboxOptionActiveColor = "hsl(0 0% 0%)";
587
587
  export const utrechtListboxOptionActiveFontWeight = "700";
588
+ export const utrechtListboxOptionHoverBackgroundColor = "hsl(211 60% 90%)";
589
+ export const utrechtListboxOptionHoverColor = "hsl(0 0% 0%)";
588
590
  export const utrechtListboxOptionSelectedBackgroundColor = "hsl(0 0% 95%)";
589
591
  export const utrechtListboxOptionSelectedColor = "hsl(0 0% 0%)";
590
- export const utrechtListboxOptionHoverColor = "hsl(0 0% 0%)";
591
- export const utrechtListboxOptionHoverBackgroundColor = "hsl(211 60% 90%)";
592
592
  export const utrechtListboxOptionGroupMarginBlockEnd = "8px";
593
593
  export const utrechtListboxOptionGroupTitleFontSize = "1rem";
594
594
  export const utrechtListboxOptionGroupTitleFontWeight = "700";
@@ -938,8 +938,6 @@ export const utrechtIconScale2xl = "30px"; // Formaat voor marker iconen
938
938
  export const utrechtIconScale3xl = "36px"; // Formaat voor toptaks iconen
939
939
  export const utrechtIconScale4xl = "48px";
940
940
  export const utrechtTypographySansSerifFontFamily = "\"Lucida Grande\", \"Lucida Sans Unicode\", \"Lucida Sans\", \"Arial\", sans-serif";
941
- export const utrechtTypographyScale2xsFontSize = "0.5rem"; // 8px
942
- export const utrechtTypographyScaleXsFontSize = "0.75rem"; // 12px
943
941
  export const utrechtTypographyScaleSmFontSize = "0.875rem"; // 14px
944
942
  export const utrechtTypographyScaleMdFontSize = "1rem"; // 16px
945
943
  export const utrechtTypographyScaleLgFontSize = "1.125rem"; // 18px