@utrecht/design-tokens 2.5.0 → 3.0.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 (54) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/_mixin-theme.scss +24 -19
  3. package/dist/_mixin.scss +24 -19
  4. package/dist/_variables.scss +24 -19
  5. package/dist/dark/_mixin-theme.scss +23 -18
  6. package/dist/dark/_mixin.scss +23 -18
  7. package/dist/dark/_variables.scss +23 -18
  8. package/dist/dark/index.cjs +23 -18
  9. package/dist/dark/index.css +23 -18
  10. package/dist/dark/index.d.ts +7 -2
  11. package/dist/dark/index.flat.json +23 -18
  12. package/dist/dark/index.json +242 -86
  13. package/dist/dark/index.mjs +23 -18
  14. package/dist/dark/index.tokens.json +48 -38
  15. package/dist/dark/list.json +242 -86
  16. package/dist/dark/list.mjs +242 -86
  17. package/dist/dark/property.css +7 -3
  18. package/dist/dark/root.css +23 -18
  19. package/dist/dark/theme-prince-xml.css +23 -18
  20. package/dist/dark/theme.css +23 -18
  21. package/dist/dark/tokens.cjs +275 -114
  22. package/dist/dark/tokens.d.ts +22 -12
  23. package/dist/dark/tokens.json +275 -114
  24. package/dist/dark/variables.cjs +23 -18
  25. package/dist/dark/variables.css +23 -18
  26. package/dist/dark/variables.d.ts +7 -2
  27. package/dist/dark/variables.json +23 -18
  28. package/dist/dark/variables.less +23 -18
  29. package/dist/dark/variables.mjs +23 -18
  30. package/dist/index.cjs +24 -19
  31. package/dist/index.css +47 -37
  32. package/dist/index.d.ts +7 -2
  33. package/dist/index.flat.json +24 -19
  34. package/dist/index.json +244 -88
  35. package/dist/index.mjs +24 -19
  36. package/dist/index.tokens.json +49 -39
  37. package/dist/list.json +244 -88
  38. package/dist/list.mjs +244 -88
  39. package/dist/property.css +7 -3
  40. package/dist/root.css +24 -19
  41. package/dist/theme-prince-xml.css +24 -19
  42. package/dist/theme.css +24 -19
  43. package/dist/tokens.cjs +277 -116
  44. package/dist/tokens.d.ts +22 -12
  45. package/dist/tokens.json +277 -116
  46. package/dist/variables.cjs +24 -19
  47. package/dist/variables.css +24 -19
  48. package/dist/variables.d.ts +7 -2
  49. package/dist/variables.json +24 -19
  50. package/dist/variables.less +24 -19
  51. package/dist/variables.mjs +24 -19
  52. package/package.json +1 -1
  53. package/src/component/utrecht/accordion.tokens.json +30 -19
  54. package/src/component/utrecht/backdrop.tokens.json +1 -1
package/dist/dark/index.mjs CHANGED
@@ -2,33 +2,38 @@
2
2
  * Do not edit directly, this file was auto-generated.
3
3
  */
4
4
 
5
- export const utrechtAccordionRowGap = "8px";
6
- export const utrechtAccordionButtonPaddingInlineEnd = "16px";
7
- export const utrechtAccordionButtonPaddingInlineStart = "16px";
8
- export const utrechtAccordionButtonPaddingBlockEnd = "8px";
9
- export const utrechtAccordionButtonPaddingBlockStart = "8px";
10
- export const utrechtAccordionButtonBackgroundColor = "hsl(0 0% 95%)";
11
- export const utrechtAccordionButtonColor = "hsl(0 0% 10%)";
12
- export const utrechtAccordionButtonBorderColor = "hsl(0 0% 95%)";
5
+ export const utrechtAccordionButtonPaddingInlineEnd = "8px";
6
+ export const utrechtAccordionButtonPaddingInlineStart = "8px";
7
+ export const utrechtAccordionButtonPaddingBlockEnd = "16px";
8
+ export const utrechtAccordionButtonPaddingBlockStart = "16px";
9
+ export const utrechtAccordionButtonColor = "hsl(211 60% 40%)";
10
+ export const utrechtAccordionButtonBorderColor = "transparent";
13
11
  export const utrechtAccordionButtonBorderWidth = "0";
14
- export const utrechtAccordionButtonHoverBackgroundColor = "inherit";
15
- export const utrechtAccordionButtonHoverBorderColor = "hsl(0 0% 95%)";
16
- export const utrechtAccordionButtonHoverColor = "hsl(0 0% 10%)";
17
- export const utrechtAccordionButtonActiveBackgroundColor = "hsl(0 0% 80%)";
18
- export const utrechtAccordionButtonActiveBorderColor = "hsl(0 0% 95%)";
12
+ export const utrechtAccordionButtonHoverBackgroundColor = "hsl(0 0% 95%)";
13
+ export const utrechtAccordionButtonHoverBorderColor = "transparent";
14
+ export const utrechtAccordionButtonHoverColor = "hsl(211 60% 40%)";
15
+ export const utrechtAccordionButtonActiveBackgroundColor = "hsl(0 0% 100%)";
16
+ export const utrechtAccordionButtonActiveBorderColor = "transparent";
19
17
  export const utrechtAccordionButtonActiveColor = "hsl(0 0% 10%)";
20
- export const utrechtAccordionButtonFocusBackgroundColor = "hsl(0 0% 80%)";
21
- export const utrechtAccordionButtonFocusBorderColor = "hsl(0 0% 95%)";
18
+ export const utrechtAccordionButtonFocusBackgroundColor = "hsl(0 0% 100%)";
19
+ export const utrechtAccordionButtonFocusBorderColor = "transparent";
22
20
  export const utrechtAccordionButtonFocusColor = "hsl(0 0% 10%)";
21
+ export const utrechtAccordionButtonFocusVisibleBorderColor = "hsl(0 0% 90%)";
22
+ export const utrechtAccordionButtonFocusVisibleBorderWidth = "2px";
23
+ export const utrechtAccordionButtonFocusVisibleBackgroundColor = "hsl(48 100% 80%)";
24
+ export const utrechtAccordionButtonFocusVisibleColor = "hsl(211 60% 40%)";
23
25
  export const utrechtAccordionButtonIconSize = "24px";
24
26
  export const utrechtAccordionButtonIconUtrechtBackgroundColor = "hsl(48 100% 50%)";
25
- export const utrechtAccordionPanelBorderColor = "hsl(0 0% 95%)";
26
- export const utrechtAccordionPanelBorderWidth = "2px";
27
+ export const utrechtAccordionPanelBorderColor = "transparent";
28
+ export const utrechtAccordionPanelBorderWidth = "0";
27
29
  export const utrechtAccordionPanelPaddingBlockStart = "8px";
28
30
  export const utrechtAccordionPanelPaddingBlockEnd = "8px";
29
- export const utrechtAccordionPanelPaddingInlineStart = "16px";
31
+ export const utrechtAccordionPanelPaddingInlineStart = "32px";
30
32
  export const utrechtAccordionPanelPaddingInlineEnd = "16px";
31
33
  export const utrechtAccordionSectionMarginBlockStart = "4px";
34
+ export const utrechtAccordionSectionBorderColor = "hsl(0 0% 90%)";
35
+ export const utrechtAccordionSectionBorderWidth = "2px";
36
+ export const utrechtAccordionSectionHoverBorderColor = "hsl(0 0% 95%)";
32
37
  export const utrechtAlertDialogMaxBlockSize = "80vh";
33
38
  export const utrechtAlertDialogMaxInlineSize = "780px";
34
39
  export const utrechtAlertDialogMinBlockSize = "100px";
package/dist/dark/index.tokens.json CHANGED
@@ -21,15 +21,33 @@
21
21
  },
22
22
  "type": "spacing"
23
23
  },
24
- "row-gap": "8px",
24
+ "row-gap": {
25
+ "$extensions": {
26
+ "nl.nldesignsystem.css.property": {
27
+ "syntax": "<length>",
28
+ "inherits": true
29
+ },
30
+ "nl.nldesignsystem.figma.supports-token": false
31
+ },
32
+ "type": "spacing"
33
+ },
25
34
  "button": {
26
- "padding-inline-end": "16px",
27
- "padding-inline-start": "16px",
28
- "padding-block-end": "8px",
29
- "padding-block-start": "8px",
30
- "background-color": "hsl(0 0% 95%)",
31
- "color": "hsl(0 0% 10%)",
32
- "border-color": "hsl(0 0% 95%)",
35
+ "padding-inline-end": "8px",
36
+ "padding-inline-start": "8px",
37
+ "padding-block-end": "16px",
38
+ "padding-block-start": "16px",
39
+ "background-color": {
40
+ "$extensions": {
41
+ "nl.nldesignsystem.css.property": {
42
+ "syntax": "<color>",
43
+ "inherits": true
44
+ },
45
+ "nl.nldesignsystem.figma.supports-token": true
46
+ },
47
+ "type": "color"
48
+ },
49
+ "color": "hsl(211 60% 40%)",
50
+ "border-color": "transparent",
33
51
  "border-radius": {
34
52
  "$extensions": {
35
53
  "nl.nldesignsystem.css.property": {
@@ -52,53 +70,39 @@
52
70
  "type": "spacing"
53
71
  },
54
72
  "hover": {
55
- "background-color": "inherit",
56
- "border-color": "hsl(0 0% 95%)",
57
- "color": "hsl(0 0% 10%)"
73
+ "background-color": "hsl(0 0% 95%)",
74
+ "border-color": "transparent",
75
+ "color": "hsl(211 60% 40%)"
58
76
  },
59
77
  "active": {
60
- "background-color": "hsl(0 0% 80%)",
61
- "border-color": "hsl(0 0% 95%)",
78
+ "background-color": "hsl(0 0% 100%)",
79
+ "border-color": "transparent",
62
80
  "color": "hsl(0 0% 10%)"
63
81
  },
64
82
  "focus": {
65
- "background-color": "hsl(0 0% 80%)",
66
- "border-color": "hsl(0 0% 95%)",
83
+ "background-color": "hsl(0 0% 100%)",
84
+ "border-color": "transparent",
67
85
  "color": "hsl(0 0% 10%)"
68
86
  },
87
+ "focus-visible": {
88
+ "border-color": "hsl(0 0% 90%)",
89
+ "border-width": "2px",
90
+ "background-color": "hsl(48 100% 80%)",
91
+ "color": "hsl(211 60% 40%)"
92
+ },
69
93
  "icon": {
70
94
  "size": "24px",
71
95
  "utrecht": {
72
- "arrow-down": {
73
- "$extensions": {
74
- "nl.nldesignsystem.css.property": {
75
- "syntax": "<url>",
76
- "inherits": true
77
- },
78
- "nl.nldesignsystem.figma.supports-token": false
79
- },
80
- "type": "other"
81
- },
82
- "arrow-up": {
83
- "$extensions": {
84
- "nl.nldesignsystem.css.property": {
85
- "syntax": "<url>",
86
- "inherits": true
87
- },
88
- "nl.nldesignsystem.figma.supports-token": false
89
- },
90
- "type": "other"
91
- },
92
96
  "background-color": "hsl(48 100% 50%)"
93
97
  }
94
98
  }
95
99
  },
96
100
  "panel": {
97
- "border-color": "hsl(0 0% 95%)",
98
- "border-width": "2px",
101
+ "border-color": "transparent",
102
+ "border-width": "0",
99
103
  "padding-block-start": "8px",
100
104
  "padding-block-end": "8px",
101
- "padding-inline-start": "16px",
105
+ "padding-inline-start": "32px",
102
106
  "padding-inline-end": "16px"
103
107
  },
104
108
  "section": {
@@ -112,6 +116,11 @@
112
116
  "nl.nldesignsystem.figma.supports-token": false
113
117
  },
114
118
  "type": "spacing"
119
+ },
120
+ "border-color": "hsl(0 0% 90%)",
121
+ "border-width": "2px",
122
+ "hover": {
123
+ "border-color": "hsl(0 0% 95%)"
115
124
  }
116
125
  }
117
126
  },
@@ -4843,6 +4852,7 @@
4843
4852
  "color": "red"
4844
4853
  }
4845
4854
  },
4855
+ "open-forms-container": {},
4846
4856
  "ordered-list": {
4847
4857
  "font-size": {
4848
4858
  "$extensions": {