@amsterdam/design-system-tokens 3.0.0 → 3.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 (107) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/README.md +45 -1
  3. package/build.js +25 -35
  4. package/dist/compact.css +2 -2
  5. package/dist/compact.d.ts +3 -3
  6. package/dist/compact.mjs +2 -2
  7. package/dist/compact.scss +2 -2
  8. package/dist/compact.theme.css +2 -2
  9. package/dist/index.css +118 -47
  10. package/dist/index.d.ts +174 -9
  11. package/dist/index.json +197 -32
  12. package/dist/index.mjs +176 -70
  13. package/dist/index.scss +118 -47
  14. package/dist/index.theme.css +118 -47
  15. package/package.json +2 -2
  16. package/src/brand/ams/aspect-ratio.tokens.json +18 -6
  17. package/src/brand/ams/border.compact.tokens.json +36 -4
  18. package/src/brand/ams/border.tokens.json +36 -4
  19. package/src/brand/ams/color.deprecated.tokens.json +3 -2
  20. package/src/brand/ams/color.tokens.json +106 -23
  21. package/src/brand/ams/cursor.tokens.json +6 -2
  22. package/src/brand/ams/focus.tokens.json +10 -1
  23. package/src/brand/ams/space.compact.tokens.json +30 -6
  24. package/src/brand/ams/space.tokens.json +24 -6
  25. package/src/brand/ams/typography.compact.tokens.json +110 -18
  26. package/src/brand/ams/typography.deprecated.compact.tokens.json +10 -4
  27. package/src/brand/ams/typography.deprecated.tokens.json +20 -8
  28. package/src/brand/ams/typography.tokens.json +131 -24
  29. package/src/common/ams/inputs.tokens.json +121 -18
  30. package/src/common/ams/links.tokens.json +72 -12
  31. package/src/components/ams/accordion.deprecated.tokens.json +29 -7
  32. package/src/components/ams/accordion.tokens.json +46 -8
  33. package/src/components/ams/action-group.tokens.json +7 -1
  34. package/src/components/ams/alert.tokens.json +83 -16
  35. package/src/components/ams/avatar.tokens.json +139 -31
  36. package/src/components/ams/badge.tokens.json +98 -21
  37. package/src/components/ams/blockquote.tokens.json +28 -6
  38. package/src/components/ams/breadcrumb.tokens.json +68 -15
  39. package/src/components/ams/button.tokens.json +176 -34
  40. package/src/components/ams/call-to-action-link.tokens.json +73 -14
  41. package/src/components/ams/card.tokens.json +60 -11
  42. package/src/components/ams/character-count.tokens.json +28 -6
  43. package/src/components/ams/checkbox.deprecated.tokens.json +23 -7
  44. package/src/components/ams/checkbox.tokens.json +154 -36
  45. package/src/components/ams/column.tokens.json +35 -5
  46. package/src/components/ams/date-input.deprecated.tokens.json +14 -8
  47. package/src/components/ams/date-input.tokens.json +92 -25
  48. package/src/components/ams/description-list.tokens.json +86 -13
  49. package/src/components/ams/dialog.tokens.json +144 -23
  50. package/src/components/ams/error-message.tokens.json +31 -6
  51. package/src/components/ams/field-set.deprecated.tokens.json +8 -1
  52. package/src/components/ams/field-set.tokens.json +69 -13
  53. package/src/components/ams/field.deprecated.tokens.json +8 -1
  54. package/src/components/ams/field.tokens.json +24 -4
  55. package/src/components/ams/figure.tokens.json +35 -7
  56. package/src/components/ams/file-input.tokens.json +143 -29
  57. package/src/components/ams/file-list.tokens.json +49 -9
  58. package/src/components/ams/grid.compact.tokens.json +7 -1
  59. package/src/components/ams/grid.tokens.json +79 -13
  60. package/src/components/ams/heading.tokens.json +91 -17
  61. package/src/components/ams/hint.tokens.json +8 -2
  62. package/src/components/ams/icon-button.tokens.json +69 -17
  63. package/src/components/ams/icon.deprecated.tokens.json +10 -4
  64. package/src/components/ams/icon.tokens.json +112 -19
  65. package/src/components/ams/image-slider.tokens.json +60 -10
  66. package/src/components/ams/image.tokens.json +3 -1
  67. package/src/components/ams/invalid-form-alert.tokens.json +7 -1
  68. package/src/components/ams/label.tokens.json +31 -7
  69. package/src/components/ams/link-list.tokens.json +106 -21
  70. package/src/components/ams/link.tokens.json +73 -15
  71. package/src/components/ams/logo.tokens.json +23 -5
  72. package/src/components/ams/mark.tokens.json +4 -1
  73. package/src/components/ams/menu.deprecated.tokens.json +12 -8
  74. package/src/components/ams/menu.tokens.json +119 -21
  75. package/src/components/ams/ordered-list.tokens.json +110 -22
  76. package/src/components/ams/page-footer.tokens.json +98 -18
  77. package/src/components/ams/page-header.compact.tokens.json +19 -3
  78. package/src/components/ams/page-header.tokens.json +214 -34
  79. package/src/components/ams/page-heading.deprecated.tokens.json +38 -8
  80. package/src/components/ams/page.tokens.json +24 -5
  81. package/src/components/ams/pagination.tokens.json +70 -14
  82. package/src/components/ams/paragraph.tokens.json +55 -11
  83. package/src/components/ams/password-input.tokens.json +92 -19
  84. package/src/components/ams/progress-list.tokens.json +372 -0
  85. package/src/components/ams/radio.tokens.json +142 -33
  86. package/src/components/ams/row.tokens.json +35 -5
  87. package/src/components/ams/search-field.tokens.json +101 -22
  88. package/src/components/ams/select.tokens.json +97 -24
  89. package/src/components/ams/skip-link.tokens.json +53 -10
  90. package/src/components/ams/spotlight.tokens.json +28 -7
  91. package/src/components/ams/standalone-link.deprecated.tokens.json +16 -10
  92. package/src/components/ams/standalone-link.tokens.json +75 -16
  93. package/src/components/ams/switch.tokens.json +57 -12
  94. package/src/components/ams/table-of-contents.deprecated.tokens.json +16 -3
  95. package/src/components/ams/table-of-contents.tokens.json +80 -15
  96. package/src/components/ams/table.tokens.json +49 -10
  97. package/src/components/ams/tabs.tokens.json +130 -17
  98. package/src/components/ams/text-area.tokens.json +97 -20
  99. package/src/components/ams/text-input.tokens.json +90 -19
  100. package/src/components/ams/time-input.deprecated.tokens.json +14 -8
  101. package/src/components/ams/time-input.tokens.json +90 -25
  102. package/src/components/ams/unordered-list.tokens.json +112 -22
  103. package/style-dictionary/dimensionToString.js +25 -0
  104. package/style-dictionary/transforms/dtcg-dimension.js +30 -0
  105. package/style-dictionary/transforms/name-custom-camel.js +27 -0
  106. package/style-dictionary/transforms/name-custom-kebab.js +27 -0
  107. package/style-dictionary/transforms/shadow-dtcg-dimension-normalize.js +50 -0
@@ -2,29 +2,35 @@
2
2
  "ams": {
3
3
  "time-input": {
4
4
  "disabled": {
5
+ "calendar-picker-indicator": {
6
+ "$deprecated": "This token will be removed in release 6.0.0",
7
+ "background-image": {
8
+ "$value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23767676'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>\")"
9
+ }
10
+ },
5
11
  "calender-picker-indicator": {
6
12
  "background-image": {
7
- "comment": "Use the token with ‘calendar spelled correctly instead",
8
- "value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23767676'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>\")"
13
+ "$deprecated": "Use `ams.time-input.disabled.calendar-picker-indicator.background-image` instead",
14
+ "$value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23767676'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>\")"
9
15
  }
10
16
  }
11
17
  },
12
18
  "hover": {
13
19
  "calender-picker-indicator": {
14
20
  "background-image": {
15
- "comment": "Use the token with ‘calendar spelled correctly instead",
16
- "value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23003677'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>\")"
21
+ "$deprecated": "Use `ams.time-input.hover.calendar-picker-indicator.background-image` instead",
22
+ "$value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23003677'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>\")"
17
23
  }
18
24
  }
19
25
  },
20
26
  "calender-picker-indicator": {
21
27
  "background-image": {
22
- "comment": "Use the token with ‘calendar spelled correctly instead",
23
- "value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23004699'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>\")"
28
+ "$deprecated": "Use `ams.time-input.calendar-picker-indicator.background-image` instead",
29
+ "$value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23004699'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>\")"
24
30
  },
25
31
  "cursor": {
26
- "comment": "Use the token with ‘calendar spelled correctly instead",
27
- "value": "{ams.cursor.interactive}"
32
+ "$deprecated": "Use `ams.time-input.calendar-picker-indicator.cursor` instead",
33
+ "$value": "{ams.cursor.interactive}"
28
34
  }
29
35
  }
30
36
  }
@@ -1,47 +1,112 @@
1
1
  {
2
2
  "ams": {
3
3
  "time-input": {
4
- "background-color": { "value": "{ams.inputs.background-color}" },
5
- "border-color": { "value": "{ams.inputs.border-color}" },
6
- "border-style": { "value": "{ams.inputs.border-style}" },
7
- "border-width": { "value": "{ams.inputs.border-width}" },
8
- "color": { "value": "{ams.inputs.color}" },
9
- "font-family": { "value": "{ams.inputs.font-family}" },
10
- "font-size": { "value": "{ams.inputs.font-size}" },
11
- "font-weight": { "value": "{ams.inputs.font-weight}" },
12
- "line-height": { "value": "{ams.inputs.line-height}" },
13
- "outline-offset": { "value": "{ams.inputs.outline-offset}" },
14
- "padding-block": { "value": "{ams.inputs.padding-block}" },
15
- "padding-inline": { "value": "{ams.inputs.padding-inline}" },
4
+ "background-color": {
5
+ "$value": "{ams.inputs.background-color}",
6
+ "$type": "color"
7
+ },
8
+ "border-color": {
9
+ "$value": "{ams.inputs.border-color}",
10
+ "$type": "color"
11
+ },
12
+ "border-style": {
13
+ "$value": "{ams.inputs.border-style}",
14
+ "$extensions": {
15
+ "nl.amsterdam.type": "borderStyle"
16
+ }
17
+ },
18
+ "border-width": {
19
+ "$value": "{ams.inputs.border-width}",
20
+ "$extensions": {
21
+ "nl.amsterdam.type": "borderWidth"
22
+ }
23
+ },
24
+ "color": {
25
+ "$value": "{ams.inputs.color}",
26
+ "$type": "color"
27
+ },
28
+ "font-family": {
29
+ "$value": "{ams.inputs.font-family}",
30
+ "$type": "fontFamily"
31
+ },
32
+ "font-size": {
33
+ "$value": "{ams.inputs.font-size}",
34
+ "$extensions": {
35
+ "nl.amsterdam.type": "fontSize"
36
+ }
37
+ },
38
+ "font-weight": {
39
+ "$value": "{ams.inputs.font-weight}",
40
+ "$type": "fontWeight"
41
+ },
42
+ "line-height": {
43
+ "$value": "{ams.inputs.line-height}",
44
+ "$extensions": {
45
+ "nl.amsterdam.type": "lineHeight"
46
+ }
47
+ },
48
+ "outline-offset": {
49
+ "$value": "{ams.inputs.outline-offset}",
50
+ "$type": "dimension",
51
+ "$extensions": {
52
+ "nl.amsterdam.subtype": "space"
53
+ }
54
+ },
55
+ "padding-block": {
56
+ "$value": "{ams.inputs.padding-block}",
57
+ "$type": "dimension",
58
+ "$extensions": {
59
+ "nl.amsterdam.subtype": "space"
60
+ }
61
+ },
62
+ "padding-inline": {
63
+ "$value": "{ams.inputs.padding-inline}",
64
+ "$type": "dimension",
65
+ "$extensions": {
66
+ "nl.amsterdam.subtype": "space"
67
+ }
68
+ },
16
69
  "disabled": {
17
- "color": { "value": "{ams.inputs.disabled.color}" },
18
- "cursor": { "value": "{ams.cursor.disabled}" },
19
- "calendar-picker-indicator": {
20
- "background-image": {
21
- "value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23767676'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>\")"
22
- }
70
+ "color": {
71
+ "$value": "{ams.inputs.disabled.color}",
72
+ "$type": "color"
73
+ },
74
+ "cursor": {
75
+ "$value": "{ams.cursor.disabled}"
23
76
  }
24
77
  },
25
78
  "hover": {
26
- "box-shadow": { "value": "{ams.inputs.hover.box-shadow}" },
79
+ "box-shadow": {
80
+ "$value": "{ams.inputs.hover.box-shadow}"
81
+ },
27
82
  "calendar-picker-indicator": {
28
83
  "background-image": {
29
- "value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23003677'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>\")"
84
+ "$value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23003677'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>\")"
30
85
  }
31
86
  }
32
87
  },
33
88
  "invalid": {
34
- "border-color": { "value": "{ams.inputs.invalid.border-color}" },
89
+ "border-color": {
90
+ "$value": "{ams.inputs.invalid.border-color}",
91
+ "$type": "color"
92
+ },
35
93
  "hover": {
36
- "border-color": { "value": "{ams.inputs.invalid.hover.border-color}" },
37
- "box-shadow": { "value": "{ams.inputs.invalid.hover.box-shadow}" }
94
+ "border-color": {
95
+ "$value": "{ams.inputs.invalid.hover.border-color}",
96
+ "$type": "color"
97
+ },
98
+ "box-shadow": {
99
+ "$value": "{ams.inputs.invalid.hover.box-shadow}"
100
+ }
38
101
  }
39
102
  },
40
103
  "calendar-picker-indicator": {
41
104
  "background-image": {
42
- "value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23004699'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>\")"
105
+ "$value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23004699'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>\")"
43
106
  },
44
- "cursor": { "value": "{ams.cursor.interactive}" }
107
+ "cursor": {
108
+ "$value": "{ams.cursor.interactive}"
109
+ }
45
110
  }
46
111
  }
47
112
  }
@@ -1,43 +1,133 @@
1
1
  {
2
2
  "ams": {
3
3
  "unordered-list": {
4
- "color": { "value": "{ams.color.text.default}" },
5
- "font-family": { "value": "{ams.typography.font-family}" },
6
- "font-size": { "value": "{ams.typography.body-text.font-size}" },
7
- "font-weight": { "value": "{ams.typography.body-text.font-weight}" },
8
- "gap": { "value": "{ams.space.s}" },
9
- "line-height": { "value": "{ams.typography.body-text.line-height}" },
10
- "list-style-type": { "value": "'\\2022'" },
4
+ "color": {
5
+ "$value": "{ams.color.text.default}",
6
+ "$type": "color"
7
+ },
8
+ "font-family": {
9
+ "$value": "{ams.typography.font-family}",
10
+ "$type": "fontFamily"
11
+ },
12
+ "font-size": {
13
+ "$value": "{ams.typography.body-text.font-size}",
14
+ "$extensions": {
15
+ "nl.amsterdam.type": "fontSize"
16
+ }
17
+ },
18
+ "font-weight": {
19
+ "$value": "{ams.typography.body-text.font-weight}",
20
+ "$type": "fontWeight"
21
+ },
22
+ "gap": {
23
+ "$value": "{ams.space.s}",
24
+ "$type": "dimension",
25
+ "$extensions": {
26
+ "nl.amsterdam.subtype": "space"
27
+ }
28
+ },
29
+ "line-height": {
30
+ "$value": "{ams.typography.body-text.line-height}",
31
+ "$extensions": {
32
+ "nl.amsterdam.type": "lineHeight"
33
+ }
34
+ },
35
+ "list-style-type": {
36
+ "$value": "'\\2022'",
37
+ "$type": "fontFamily"
38
+ },
11
39
  "inverse": {
12
- "color": { "value": "{ams.color.text.inverse}" }
40
+ "color": {
41
+ "$value": "{ams.color.text.inverse}",
42
+ "$type": "color"
43
+ }
13
44
  },
14
45
  "small": {
15
- "font-size": { "value": "{ams.typography.body-text.small.font-size}" },
16
- "line-height": { "value": "{ams.typography.body-text.small.line-height}" }
46
+ "font-size": {
47
+ "$value": "{ams.typography.body-text.small.font-size}",
48
+ "$extensions": {
49
+ "nl.amsterdam.type": "fontSize"
50
+ }
51
+ },
52
+ "line-height": {
53
+ "$value": "{ams.typography.body-text.small.line-height}",
54
+ "$extensions": {
55
+ "nl.amsterdam.type": "lineHeight"
56
+ }
57
+ }
17
58
  },
18
59
  "item": {
19
60
  "margin-inline-start": {
20
- "value": "1.625rem",
21
- "comment": "Divide your total indentation width over margin and padding to position the marker."
61
+ "$value": {
62
+ "value": 1.625,
63
+ "unit": "rem"
64
+ },
65
+ "$type": "dimension",
66
+ "$extensions": {
67
+ "nl.amsterdam.hint": "Divide your total indentation width over margin and padding to position the marker.",
68
+ "nl.amsterdam.subtype": "space"
69
+ }
22
70
  },
23
71
  "padding-inline-start": {
24
- "value": "0.875rem",
25
- "comment": "The total level 1 indentation for Amsterdam is 40 pixels, or 2.5rem."
72
+ "$value": {
73
+ "value": 0.875,
74
+ "unit": "rem"
75
+ },
76
+ "$extensions": {
77
+ "nl.amsterdam.hint": "The total level 1 indentation for Amsterdam is 40 pixels, or 2.5rem.",
78
+ "nl.amsterdam.subtype": "space"
79
+ },
80
+ "$type": "dimension"
26
81
  }
27
82
  },
28
83
  "unordered-list": {
29
- "gap": { "value": "{ams.space.s}" },
30
- "list-style-type": { "value": "'\\2013'" },
31
- "padding-block-end": { "value": "{ams.space.s}" },
32
- "padding-block-start": { "value": "{ams.space.s}" },
84
+ "gap": {
85
+ "$value": "{ams.space.s}",
86
+ "$type": "dimension",
87
+ "$extensions": {
88
+ "nl.amsterdam.subtype": "space"
89
+ }
90
+ },
91
+ "list-style-type": {
92
+ "$value": "'\\2013'",
93
+ "$type": "fontFamily"
94
+ },
95
+ "padding-block-end": {
96
+ "$value": "{ams.space.s}",
97
+ "$type": "dimension",
98
+ "$extensions": {
99
+ "nl.amsterdam.subtype": "space"
100
+ }
101
+ },
102
+ "padding-block-start": {
103
+ "$value": "{ams.space.s}",
104
+ "$type": "dimension",
105
+ "$extensions": {
106
+ "nl.amsterdam.subtype": "space"
107
+ }
108
+ },
33
109
  "item": {
34
110
  "margin-inline-start": {
35
- "value": "0.875rem",
36
- "comment": "Indent less than the parent to start-align the child’s marker with the parent text."
111
+ "$value": {
112
+ "value": 0.875,
113
+ "unit": "rem"
114
+ },
115
+ "$type": "dimension",
116
+ "$extensions": {
117
+ "nl.amsterdam.hint": "Indent less than the parent to start-align the child\u2019s marker with the parent text.",
118
+ "nl.amsterdam.subtype": "space"
119
+ }
37
120
  },
38
121
  "padding-inline-start": {
39
- "value": "0.875rem",
40
- "comment": "The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem."
122
+ "$value": {
123
+ "value": 0.875,
124
+ "unit": "rem"
125
+ },
126
+ "$extensions": {
127
+ "nl.amsterdam.hint": "The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem.",
128
+ "nl.amsterdam.subtype": "space"
129
+ },
130
+ "$type": "dimension"
41
131
  }
42
132
  }
43
133
  }
@@ -0,0 +1,25 @@
1
+ /**
2
+ * @license EUPL-1.2+
3
+ * Copyright Gemeente Amsterdam
4
+ */
5
+
6
+ /**
7
+ * Converts a DTCG dimension object to a CSS value string.
8
+ *
9
+ * Passes through any value that is not a dimension object (e.g. a bare string
10
+ * or an already-resolved reference), making it safe to use without pre-checking.
11
+ *
12
+ * @param {({ value: number, unit: 'px' | 'rem' } | string)} dimension
13
+ * @returns {string}
14
+ *
15
+ * @example
16
+ * dimensionToString({ value: 0.5, unit: 'rem' }) // '0.5rem'
17
+ * dimensionToString('2rem') // '2rem'
18
+ */
19
+ export const dimensionToString = (dimension) => {
20
+ if (dimension && typeof dimension === 'object' && 'value' in dimension && 'unit' in dimension) {
21
+ return `${dimension.value}${dimension.unit}`
22
+ }
23
+
24
+ return dimension
25
+ }
@@ -0,0 +1,30 @@
1
+ /**
2
+ * @license EUPL-1.2+
3
+ * Copyright Gemeente Amsterdam
4
+ */
5
+
6
+ import { transformTypes } from 'style-dictionary/enums'
7
+
8
+ import { dimensionToString } from '../dimensionToString.js'
9
+
10
+ /**
11
+ * Transforms DTCG dimension objects to CSS value strings.
12
+ *
13
+ * @example
14
+ * // Input ($value of a token):
15
+ * { value: 1, unit: 'rem' }
16
+ *
17
+ * // Output (transformed token value):
18
+ * '1rem'
19
+ * @see {@link https://www.designtokens.org/TR/2025.10/format/#dimension} DTCG dimension spec
20
+ */
21
+ export const dtcgDimension = {
22
+ filter: (token) => {
23
+ const value = token.$value ?? token.value
24
+ return value?.value !== null && value?.unit
25
+ },
26
+ name: 'dtcg/dimension',
27
+ transform: (token) => dimensionToString(token.$value ?? token.value),
28
+ transitive: true,
29
+ type: transformTypes.value,
30
+ }
@@ -0,0 +1,27 @@
1
+ /**
2
+ * @license EUPL-1.2+
3
+ * Copyright Gemeente Amsterdam
4
+ */
5
+
6
+ import { camelCase } from 'change-case'
7
+ import { transformTypes } from 'style-dictionary/enums'
8
+
9
+ /**
10
+ * Strip a trailing `default` path segment when transforming to camel case.
11
+ *
12
+ * @example
13
+ * // Token path without 'default':
14
+ * ['ams', 'color', 'primary'] → 'amsColorPrimary'
15
+ *
16
+ * // Token path with trailing 'default':
17
+ * ['ams', 'color', 'default'] → 'amsColor'
18
+ */
19
+ export const nameCustomCamel = {
20
+ name: 'name/customCamel',
21
+ transform: function (token) {
22
+ const filteredPath = token.path[token.path.length - 1] === 'default' ? token.path.slice(0, -1) : token.path
23
+
24
+ return camelCase(filteredPath.join(' '))
25
+ },
26
+ type: transformTypes.name,
27
+ }
@@ -0,0 +1,27 @@
1
+ /**
2
+ * @license EUPL-1.2+
3
+ * Copyright Gemeente Amsterdam
4
+ */
5
+
6
+ import { kebabCase } from 'change-case'
7
+ import { transformTypes } from 'style-dictionary/enums'
8
+
9
+ /**
10
+ * Strip a trailing `default` path segment when transforming to kebab case.
11
+ *
12
+ * @example
13
+ * // Token path without 'default':
14
+ * ['ams', 'color', 'primary'] → '--ams-color-primary'
15
+ *
16
+ * // Token path with trailing 'default':
17
+ * ['ams', 'color', 'default'] → '--ams-color'
18
+ */
19
+ export const nameCustomKebab = {
20
+ name: 'name/customKebab',
21
+ transform: function (token) {
22
+ const filteredPath = token.path[token.path.length - 1] === 'default' ? token.path.slice(0, -1) : token.path
23
+
24
+ return kebabCase(filteredPath.join(' '))
25
+ },
26
+ type: transformTypes.name,
27
+ }
@@ -0,0 +1,50 @@
1
+ /**
2
+ * @license EUPL-1.2+
3
+ * Copyright Gemeente Amsterdam
4
+ */
5
+
6
+ import { dimensionToString } from '../dimensionToString.js'
7
+
8
+ /**
9
+ * Normalizes DTCG dimension objects within shadow token sub-values to bare CSS strings.
10
+ *
11
+ * The DTCG spec requires dimension values to be expressed as objects
12
+ * (`{ value: number, unit: "px" | "rem" }`), but Style Dictionary's built-in
13
+ * `shadow/css/shorthand` transform expects sub-values like `offsetX`, `offsetY`,
14
+ * `blur`, and `spread` to already be CSS strings (e.g. `"0.5rem"`).
15
+ *
16
+ * This transform bridges that gap by converting any dimension objects found in
17
+ * shadow sub-values to their CSS string equivalents before `shadow/css/shorthand` runs.
18
+ * Non-object values (bare strings, resolved references) are passed through unchanged.
19
+ *
20
+ * Must be applied **before** `shadow/css/shorthand` in the transforms array,
21
+ * and must be transitive so it runs after token references are resolved.
22
+ *
23
+ * @example
24
+ * // Input ($value of a shadow token):
25
+ * { offsetX: { value: 0, unit: "rem" }, blur: { value: 0.5, unit: "rem" }, ... }
26
+ *
27
+ * // Output (ready for shadow/css/shorthand):
28
+ * { offsetX: "0rem", blur: "0.5rem", ... }
29
+ *
30
+ * @see {@link https://www.designtokens.org/TR/2025.10/format/#shadow} DTCG shadow spec
31
+ * @see {@link https://github.com/style-dictionary/style-dictionary/issues/1398} Related SD issue
32
+ */
33
+ export const shadowDTCGDimensionNormalize = {
34
+ filter: (token) => (token.$type ?? token.type) === 'shadow',
35
+ name: 'shadow/dtcg-dimension-normalize',
36
+ transform: (token) => {
37
+ const value = token.$value ?? token.value
38
+ const normalize = (shadow) => ({
39
+ ...shadow,
40
+ blur: dimensionToString(shadow.blur),
41
+ offsetX: dimensionToString(shadow.offsetX),
42
+ offsetY: dimensionToString(shadow.offsetY),
43
+ spread: dimensionToString(shadow.spread),
44
+ })
45
+
46
+ return Array.isArray(value) ? value.map(normalize) : normalize(value)
47
+ },
48
+ transitive: true,
49
+ type: 'value',
50
+ }