@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.
- package/CHANGELOG.md +24 -0
- package/README.md +45 -1
- package/build.js +25 -35
- package/dist/compact.css +2 -2
- package/dist/compact.d.ts +3 -3
- package/dist/compact.mjs +2 -2
- package/dist/compact.scss +2 -2
- package/dist/compact.theme.css +2 -2
- package/dist/index.css +118 -47
- package/dist/index.d.ts +174 -9
- package/dist/index.json +197 -32
- package/dist/index.mjs +176 -70
- package/dist/index.scss +118 -47
- package/dist/index.theme.css +118 -47
- package/package.json +2 -2
- package/src/brand/ams/aspect-ratio.tokens.json +18 -6
- package/src/brand/ams/border.compact.tokens.json +36 -4
- package/src/brand/ams/border.tokens.json +36 -4
- package/src/brand/ams/color.deprecated.tokens.json +3 -2
- package/src/brand/ams/color.tokens.json +106 -23
- package/src/brand/ams/cursor.tokens.json +6 -2
- package/src/brand/ams/focus.tokens.json +10 -1
- package/src/brand/ams/space.compact.tokens.json +30 -6
- package/src/brand/ams/space.tokens.json +24 -6
- package/src/brand/ams/typography.compact.tokens.json +110 -18
- package/src/brand/ams/typography.deprecated.compact.tokens.json +10 -4
- package/src/brand/ams/typography.deprecated.tokens.json +20 -8
- package/src/brand/ams/typography.tokens.json +131 -24
- package/src/common/ams/inputs.tokens.json +121 -18
- package/src/common/ams/links.tokens.json +72 -12
- package/src/components/ams/accordion.deprecated.tokens.json +29 -7
- package/src/components/ams/accordion.tokens.json +46 -8
- package/src/components/ams/action-group.tokens.json +7 -1
- package/src/components/ams/alert.tokens.json +83 -16
- package/src/components/ams/avatar.tokens.json +139 -31
- package/src/components/ams/badge.tokens.json +98 -21
- package/src/components/ams/blockquote.tokens.json +28 -6
- package/src/components/ams/breadcrumb.tokens.json +68 -15
- package/src/components/ams/button.tokens.json +176 -34
- package/src/components/ams/call-to-action-link.tokens.json +73 -14
- package/src/components/ams/card.tokens.json +60 -11
- package/src/components/ams/character-count.tokens.json +28 -6
- package/src/components/ams/checkbox.deprecated.tokens.json +23 -7
- package/src/components/ams/checkbox.tokens.json +154 -36
- package/src/components/ams/column.tokens.json +35 -5
- package/src/components/ams/date-input.deprecated.tokens.json +14 -8
- package/src/components/ams/date-input.tokens.json +92 -25
- package/src/components/ams/description-list.tokens.json +86 -13
- package/src/components/ams/dialog.tokens.json +144 -23
- package/src/components/ams/error-message.tokens.json +31 -6
- package/src/components/ams/field-set.deprecated.tokens.json +8 -1
- package/src/components/ams/field-set.tokens.json +69 -13
- package/src/components/ams/field.deprecated.tokens.json +8 -1
- package/src/components/ams/field.tokens.json +24 -4
- package/src/components/ams/figure.tokens.json +35 -7
- package/src/components/ams/file-input.tokens.json +143 -29
- package/src/components/ams/file-list.tokens.json +49 -9
- package/src/components/ams/grid.compact.tokens.json +7 -1
- package/src/components/ams/grid.tokens.json +79 -13
- package/src/components/ams/heading.tokens.json +91 -17
- package/src/components/ams/hint.tokens.json +8 -2
- package/src/components/ams/icon-button.tokens.json +69 -17
- package/src/components/ams/icon.deprecated.tokens.json +10 -4
- package/src/components/ams/icon.tokens.json +112 -19
- package/src/components/ams/image-slider.tokens.json +60 -10
- package/src/components/ams/image.tokens.json +3 -1
- package/src/components/ams/invalid-form-alert.tokens.json +7 -1
- package/src/components/ams/label.tokens.json +31 -7
- package/src/components/ams/link-list.tokens.json +106 -21
- package/src/components/ams/link.tokens.json +73 -15
- package/src/components/ams/logo.tokens.json +23 -5
- package/src/components/ams/mark.tokens.json +4 -1
- package/src/components/ams/menu.deprecated.tokens.json +12 -8
- package/src/components/ams/menu.tokens.json +119 -21
- package/src/components/ams/ordered-list.tokens.json +110 -22
- package/src/components/ams/page-footer.tokens.json +98 -18
- package/src/components/ams/page-header.compact.tokens.json +19 -3
- package/src/components/ams/page-header.tokens.json +214 -34
- package/src/components/ams/page-heading.deprecated.tokens.json +38 -8
- package/src/components/ams/page.tokens.json +24 -5
- package/src/components/ams/pagination.tokens.json +70 -14
- package/src/components/ams/paragraph.tokens.json +55 -11
- package/src/components/ams/password-input.tokens.json +92 -19
- package/src/components/ams/progress-list.tokens.json +372 -0
- package/src/components/ams/radio.tokens.json +142 -33
- package/src/components/ams/row.tokens.json +35 -5
- package/src/components/ams/search-field.tokens.json +101 -22
- package/src/components/ams/select.tokens.json +97 -24
- package/src/components/ams/skip-link.tokens.json +53 -10
- package/src/components/ams/spotlight.tokens.json +28 -7
- package/src/components/ams/standalone-link.deprecated.tokens.json +16 -10
- package/src/components/ams/standalone-link.tokens.json +75 -16
- package/src/components/ams/switch.tokens.json +57 -12
- package/src/components/ams/table-of-contents.deprecated.tokens.json +16 -3
- package/src/components/ams/table-of-contents.tokens.json +80 -15
- package/src/components/ams/table.tokens.json +49 -10
- package/src/components/ams/tabs.tokens.json +130 -17
- package/src/components/ams/text-area.tokens.json +97 -20
- package/src/components/ams/text-input.tokens.json +90 -19
- package/src/components/ams/time-input.deprecated.tokens.json +14 -8
- package/src/components/ams/time-input.tokens.json +90 -25
- package/src/components/ams/unordered-list.tokens.json +112 -22
- package/style-dictionary/dimensionToString.js +25 -0
- package/style-dictionary/transforms/dtcg-dimension.js +30 -0
- package/style-dictionary/transforms/name-custom-camel.js +27 -0
- package/style-dictionary/transforms/name-custom-kebab.js +27 -0
- 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
|
-
"
|
|
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
|
-
"
|
|
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
|
-
"
|
|
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
|
-
"
|
|
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": {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
"color": {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
"
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
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": {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
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": {
|
|
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": {
|
|
89
|
+
"border-color": {
|
|
90
|
+
"$value": "{ams.inputs.invalid.border-color}",
|
|
91
|
+
"$type": "color"
|
|
92
|
+
},
|
|
35
93
|
"hover": {
|
|
36
|
-
"border-color": {
|
|
37
|
-
|
|
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": {
|
|
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": {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
"
|
|
9
|
-
|
|
10
|
-
|
|
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": {
|
|
40
|
+
"color": {
|
|
41
|
+
"$value": "{ams.color.text.inverse}",
|
|
42
|
+
"$type": "color"
|
|
43
|
+
}
|
|
13
44
|
},
|
|
14
45
|
"small": {
|
|
15
|
-
"font-size": {
|
|
16
|
-
|
|
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":
|
|
21
|
-
|
|
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":
|
|
25
|
-
|
|
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": {
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
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":
|
|
36
|
-
|
|
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":
|
|
40
|
-
|
|
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
|
+
}
|