@amsterdam/design-system-tokens 0.16.0 → 1.0.1

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 (36) hide show
  1. package/CHANGELOG.md +33 -0
  2. package/README.md +10 -3
  3. package/dist/compact.css +3 -0
  4. package/dist/compact.d.ts +7 -0
  5. package/dist/compact.json +8 -1
  6. package/dist/compact.mjs +4 -0
  7. package/dist/compact.scss +3 -0
  8. package/dist/compact.theme.css +3 -0
  9. package/dist/index.css +138 -109
  10. package/dist/index.d.ts +136 -93
  11. package/dist/index.json +191 -148
  12. package/dist/index.mjs +162 -140
  13. package/dist/index.scss +129 -100
  14. package/dist/index.theme.css +138 -109
  15. package/package.json +2 -2
  16. package/src/brand/ams/focus.tokens.json +1 -1
  17. package/src/brand/ams/typography.compact.tokens.json +2 -1
  18. package/src/components/ams/alert.tokens.json +6 -7
  19. package/src/components/ams/avatar.tokens.json +9 -0
  20. package/src/components/ams/button.tokens.json +19 -21
  21. package/src/components/ams/checkbox.tokens.json +57 -36
  22. package/src/components/ams/date-input.tokens.json +9 -8
  23. package/src/components/ams/dialog.tokens.json +3 -1
  24. package/src/components/ams/file-input.tokens.json +8 -11
  25. package/src/components/ams/hint.tokens.json +1 -1
  26. package/src/components/ams/page-header.compact.tokens.json +10 -0
  27. package/src/components/ams/page-header.tokens.json +1 -0
  28. package/src/components/ams/password-input.tokens.json +7 -6
  29. package/src/components/ams/radio.tokens.json +0 -2
  30. package/src/components/ams/search-field.tokens.json +7 -4
  31. package/src/components/ams/select.tokens.json +11 -6
  32. package/src/components/ams/switch.tokens.json +2 -2
  33. package/src/components/ams/tabs.tokens.json +3 -3
  34. package/src/components/ams/text-area.tokens.json +7 -6
  35. package/src/components/ams/text-input.tokens.json +7 -6
  36. package/src/components/ams/time-input.tokens.json +9 -8
package/src/components/ams/avatar.tokens.json CHANGED
@@ -3,6 +3,9 @@
3
3
  "avatar": {
4
4
  "aspect-ratio": { "value": "{ams.aspect-ratio.1-1}" },
5
5
  "background-color": { "value": "{ams.color.highlight.purple}" },
6
+ "border-color": { "value": "{ams.color.highlight.purple}" },
7
+ "border-style": { "value": "solid" },
8
+ "border-width": { "value": "{ams.border.width.m}" },
6
9
  "color": { "value": "{ams.color.text.inverse}" },
7
10
  "font-family": { "value": "{ams.typography.font-family}" },
8
11
  "font-size": { "value": "{ams.typography.body-text.small.font-size}" },
@@ -15,26 +18,32 @@
15
18
  },
16
19
  "azure": {
17
20
  "background-color": { "value": "{ams.color.highlight.azure}" },
21
+ "border-color": { "value": "{ams.color.highlight.azure}" },
18
22
  "color": { "value": "{ams.color.text.inverse}" }
19
23
  },
20
24
  "green": {
21
25
  "background-color": { "value": "{ams.color.highlight.green}" },
26
+ "border-color": { "value": "{ams.color.highlight.green}" },
22
27
  "color": { "value": "{ams.color.text.inverse}" }
23
28
  },
24
29
  "lime": {
25
30
  "background-color": { "value": "{ams.color.highlight.lime}" },
31
+ "border-color": { "value": "{ams.color.highlight.lime}" },
26
32
  "color": { "value": "{ams.color.text.default}" }
27
33
  },
28
34
  "magenta": {
29
35
  "background-color": { "value": "{ams.color.highlight.magenta}" },
36
+ "border-color": { "value": "{ams.color.highlight.magenta}" },
30
37
  "color": { "value": "{ams.color.text.inverse}" }
31
38
  },
32
39
  "orange": {
33
40
  "background-color": { "value": "{ams.color.highlight.orange}" },
41
+ "border-color": { "value": "{ams.color.highlight.orange}" },
34
42
  "color": { "value": "{ams.color.text.default}" }
35
43
  },
36
44
  "yellow": {
37
45
  "background-color": { "value": "{ams.color.highlight.yellow}" },
46
+ "border-color": { "value": "{ams.color.highlight.yellow}" },
38
47
  "color": { "value": "{ams.color.text.default}" }
39
48
  }
40
49
  }
package/src/components/ams/button.tokens.json CHANGED
@@ -1,6 +1,8 @@
1
1
  {
2
2
  "ams": {
3
3
  "button": {
4
+ "border-style": { "value": "solid" },
5
+ "border-width": { "value": "{ams.border.width.m}" },
4
6
  "cursor": { "value": "{ams.cursor.interactive}" },
5
7
  "font-family": { "value": "{ams.typography.font-family}" },
6
8
  "font-size": { "value": "{ams.typography.body-text.font-size}" },
@@ -13,51 +15,47 @@
13
15
  "disabled": {
14
16
  "cursor": { "value": "{ams.cursor.disabled}" }
15
17
  },
16
- "forced-color-mode": {
17
- "border": { "value": "{ams.border.width.m} solid" }
18
+ "icon-only": {
19
+ "padding-block": { "value": "{ams.space.s}" },
20
+ "padding-inline": { "value": "{ams.space.s}" }
18
21
  },
19
22
  "primary": {
20
23
  "background-color": { "value": "{ams.color.interactive.default}" },
21
- "box-shadow": { "value": "inset 0 0 0 {ams.border.width.m} {ams.color.interactive.default}" },
24
+ "border-color": { "value": "{ams.color.interactive.default}" },
22
25
  "color": { "value": "{ams.color.text.inverse}" },
23
26
  "disabled": {
24
27
  "background-color": { "value": "{ams.color.interactive.disabled}" },
25
- "box-shadow": { "value": "inset 0 0 0 {ams.border.width.m} {ams.color.interactive.disabled}" }
28
+ "border-color": { "value": "{ams.color.interactive.disabled}" }
26
29
  },
27
30
  "hover": {
28
31
  "background-color": { "value": "{ams.color.interactive.hover}" },
29
- "box-shadow": { "value": "inset 0 0 0 {ams.border.width.m} {ams.color.interactive.hover}" }
32
+ "border-color": { "value": "{ams.color.interactive.hover}" }
30
33
  }
31
34
  },
32
35
  "secondary": {
33
36
  "background-color": { "value": "{ams.color.background}" },
37
+ "border-color": { "value": "currentColor" },
34
38
  "color": { "value": "{ams.color.interactive.default}" },
35
- "box-shadow": { "value": "inset 0 0 0 {ams.border.width.m} {ams.color.interactive.default}" },
36
- "hover": {
37
- "box-shadow": { "value": "inset 0 0 0 {ams.border.width.l} {ams.color.interactive.hover}" },
38
- "color": { "value": "{ams.color.interactive.hover}" }
39
- },
40
39
  "disabled": {
41
- "background-color": { "value": "{ams.color.background}" },
42
- "box-shadow": { "value": "inset 0 0 0 {ams.border.width.m} {ams.color.interactive.disabled}" },
40
+ "border-color": { "value": "{ams.color.interactive.disabled}" },
43
41
  "color": { "value": "{ams.color.interactive.disabled}" }
42
+ },
43
+ "hover": {
44
+ "box-shadow": { "value": "inset 0 0 0 {ams.border.width.s}" },
45
+ "color": { "value": "{ams.color.interactive.hover}" }
44
46
  }
45
47
  },
46
48
  "tertiary": {
47
49
  "background-color": { "value": "transparent" },
50
+ "border-color": { "value": "transparent" },
48
51
  "color": { "value": "{ams.color.interactive.default}" },
49
- "hover": {
50
- "box-shadow": { "value": "inset 0 0 0 {ams.border.width.m} {ams.color.interactive.hover}" },
51
- "color": { "value": "{ams.color.interactive.hover}" }
52
- },
53
52
  "disabled": {
54
- "background-color": { "value": "transparent" },
55
53
  "color": { "value": "{ams.color.interactive.disabled}" }
54
+ },
55
+ "hover": {
56
+ "border-color": { "value": "currentColor" },
57
+ "color": { "value": "{ams.color.interactive.hover}" }
56
58
  }
57
- },
58
- "icon-only": {
59
- "padding-block": { "value": "{ams.space.s}" },
60
- "padding-inline": { "value": "{ams.space.s}" }
61
59
  }
62
60
  }
63
61
  }
package/src/components/ams/checkbox.tokens.json CHANGED
@@ -9,66 +9,87 @@
9
9
  "gap": { "value": "{ams.space.s}" },
10
10
  "line-height": { "value": "{ams.typography.body-text.line-height}" },
11
11
  "outline-offset": { "value": "{ams.focus.outline-offset}" },
12
- "checkmark": {
13
- "border-color": { "value": "{ams.color.interactive.default}" },
14
- "border-width": { "value": "{ams.border.width.m}" },
15
- "checked": {
16
- "background-color": { "value": "{ams.color.interactive.default}" },
17
- "background-image": {
18
- "value": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23ffffff'%3E%3Cpath fill-rule='evenodd' d='M12.216 27.016 0 14.168l2.91-2.77 9.346 9.837L29.129 4 32 6.8z'/%3E%3C/svg%3E\")"
19
- },
12
+ "checked-indicator": {
13
+ "stroke": { "value": "{ams.color.interactive.inverse}" }
14
+ },
15
+ "indeterminate-indicator": {
16
+ "stroke": { "value": "{ams.color.interactive.inverse}" }
17
+ },
18
+ "hover-indicator": {
19
+ "hover": {
20
+ "stroke": { "value": "{ams.color.interactive.hover}" }
21
+ },
22
+ "invalid": {
20
23
  "hover": {
21
- "background-color": { "value": "{ams.color.interactive.hover}" }
24
+ "stroke": { "value": "{ams.color.interactive.invalid.hover}" }
22
25
  }
23
- },
24
- "disabled": {
25
- "border-color": { "value": "{ams.color.interactive.disabled}" },
26
- "border-width": { "value": "{ams.border.width.m}" },
27
- "checked": {
28
- "background-color": { "value": "{ams.color.interactive.disabled}" },
26
+ }
27
+ },
28
+ "rectangle": {
29
+ "fill": { "value": "{ams.color.background}" },
30
+ "stroke": { "value": "{ams.color.interactive.default}" },
31
+ "checked": {
32
+ "fill": { "value": "{ams.color.interactive.default}" },
33
+ "disabled": {
34
+ "fill": { "value": "{ams.color.interactive.disabled}" },
29
35
  "hover": {
30
- "background-color": { "value": "{ams.color.interactive.disabled}" }
36
+ "fill": { "value": "{ams.color.interactive.disabled}" }
31
37
  }
32
38
  },
33
- "indeterminate": {
34
- "background-color": { "value": "{ams.color.interactive.disabled}" },
39
+ "hover": {
40
+ "fill": { "value": "{ams.color.interactive.hover}" },
41
+ "disabled-invalid": {
42
+ "fill": { "value": "{ams.color.interactive.disabled}" }
43
+ }
44
+ },
45
+ "invalid": {
46
+ "fill": { "value": "{ams.color.interactive.invalid.default}" },
35
47
  "hover": {
36
- "background-color": { "value": "{ams.color.interactive.disabled}" }
48
+ "fill": { "value": "{ams.color.interactive.invalid.hover}" }
37
49
  }
38
50
  }
39
51
  },
52
+ "disabled": {
53
+ "stroke": { "value": "{ams.color.interactive.disabled}" }
54
+ },
40
55
  "hover": {
41
- "border-color": { "value": "{ams.color.interactive.hover}" },
42
- "border-width": { "value": "{ams.border.width.l}" }
56
+ "stroke": { "value": "{ams.color.interactive.hover}" },
57
+ "disabled-invalid": {
58
+ "stroke": { "value": "{ams.color.interactive.disabled}" }
59
+ }
43
60
  },
44
- "invalid": {
45
- "border-color": { "value": "{ams.color.interactive.invalid.default}" },
46
- "checked": {
47
- "background-color": { "value": "{ams.color.interactive.invalid.default}" },
61
+ "indeterminate": {
62
+ "fill": { "value": "{ams.color.interactive.default}" },
63
+ "disabled": {
64
+ "fill": { "value": "{ams.color.interactive.disabled}" },
48
65
  "hover": {
49
- "background-color": { "value": "{ams.color.interactive.invalid.hover}" }
66
+ "fill": { "value": "{ams.color.interactive.disabled}" }
50
67
  }
51
68
  },
52
69
  "hover": {
53
- "border-color": { "value": "{ams.color.interactive.invalid.hover}" }
70
+ "fill": { "value": "{ams.color.interactive.hover}" },
71
+ "disabled-invalid": {
72
+ "fill": { "value": "{ams.color.interactive.disabled}" }
73
+ }
54
74
  },
55
- "indeterminate": {
56
- "background-color": { "value": "{ams.color.interactive.invalid.default}" },
75
+ "invalid": {
76
+ "fill": { "value": "{ams.color.interactive.invalid.default}" },
57
77
  "hover": {
58
- "background-color": { "value": "{ams.color.interactive.invalid.hover}" }
78
+ "fill": { "value": "{ams.color.interactive.invalid.hover}" }
59
79
  }
60
80
  }
61
81
  },
62
- "indeterminate": {
63
- "background-color": { "value": "{ams.color.interactive.default}" },
64
- "background-image": {
65
- "value": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='white'%3E%3Cpath fill-rule='evenodd' d='M0 13.714h32v4H0z'/%3E%3C/svg%3E\")"
66
- },
82
+ "invalid": {
83
+ "stroke": { "value": "{ams.color.interactive.invalid.default}" },
67
84
  "hover": {
68
- "background-color": { "value": "{ams.color.interactive.hover}" }
85
+ "stroke": { "value": "{ams.color.interactive.invalid.hover}" }
69
86
  }
70
87
  }
71
88
  },
89
+ "icon-container": {
90
+ "block-size": { "value": "calc({ams.checkbox.font-size} * {ams.checkbox.line-height})" },
91
+ "inline-size": { "value": "1.5rem" }
92
+ },
72
93
  "disabled": {
73
94
  "cursor": { "value": "{ams.cursor.disabled}" },
74
95
  "color": { "value": "{ams.color.interactive.disabled}" }
package/src/components/ams/date-input.tokens.json CHANGED
@@ -2,7 +2,9 @@
2
2
  "ams": {
3
3
  "date-input": {
4
4
  "background-color": { "value": "{ams.color.background}" },
5
- "box-shadow": { "value": "inset 0 0 0 {ams.border.width.s} {ams.color.interactive.secondary}" },
5
+ "border-color": { "value": "currentColor" },
6
+ "border-style": { "value": "solid" },
7
+ "border-width": { "value": "{ams.border.width.m}" },
6
8
  "color": { "value": "{ams.color.text.default}" },
7
9
  "font-family": { "value": "{ams.typography.font-family}" },
8
10
  "font-size": { "value": "{ams.typography.body-text.font-size}" },
@@ -18,28 +20,27 @@
18
20
  "cursor": { "value": "{ams.cursor.interactive}" }
19
21
  },
20
22
  "disabled": {
21
- "background-color": { "value": "{ams.color.background}" },
22
- "box-shadow": { "value": "inset 0 0 0 {ams.border.width.s} {ams.color.interactive.disabled}" },
23
23
  "color": { "value": "{ams.color.interactive.disabled}" },
24
24
  "cursor": { "value": "{ams.cursor.disabled}" },
25
25
  "calender-picker-indicator": {
26
26
  "background-image": {
27
- "value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23BEBEBE'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>\")"
27
+ "value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23767676'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>\")"
28
28
  }
29
29
  }
30
30
  },
31
31
  "hover": {
32
- "box-shadow": { "value": "inset 0 0 0 {ams.border.width.m} {ams.color.interactive.secondary}" },
32
+ "box-shadow": { "value": "inset 0 0 0 {ams.border.width.s}" },
33
33
  "calender-picker-indicator": {
34
34
  "background-image": {
35
- "value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23102E62'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>\")"
35
+ "value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23003677'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>\")"
36
36
  }
37
37
  }
38
38
  },
39
39
  "invalid": {
40
- "box-shadow": { "value": "inset 0 0 0 {ams.border.width.s} {ams.color.interactive.invalid.default}" },
40
+ "border-color": { "value": "{ams.color.interactive.invalid.default}" },
41
41
  "hover": {
42
- "box-shadow": { "value": "inset 0 0 0 {ams.border.width.m} {ams.color.interactive.invalid.hover}" }
42
+ "border-color": { "value": "{ams.color.interactive.invalid.hover}" },
43
+ "box-shadow": { "value": "inset 0 0 0 {ams.border.width.s} {ams.color.interactive.invalid.hover}" }
43
44
  }
44
45
  }
45
46
  }
package/src/components/ams/dialog.tokens.json CHANGED
@@ -2,7 +2,9 @@
2
2
  "ams": {
3
3
  "dialog": {
4
4
  "background-color": { "value": "{ams.color.background}" },
5
- "border": { "value": "{ams.border.width.m} solid {ams.dialog.background-color}" },
5
+ "border-color": { "value": "{ams.dialog.background-color}" },
6
+ "border-style": { "value": "solid" },
7
+ "border-width": { "value": "{ams.border.width.m}" },
6
8
  "gap": { "value": "{ams.space.m}" },
7
9
  "inline-size": { "value": "calc(100% - 2 * {ams.space.l})" },
8
10
  "max-block-size": { "value": "calc(100dvh - 2 * {ams.space.l})" },
package/src/components/ams/file-input.tokens.json CHANGED
@@ -2,17 +2,16 @@
2
2
  "ams": {
3
3
  "file-input": {
4
4
  "background-color": { "value": "{ams.color.background}" },
5
- "border": { "value": "{ams.border.width.s} dashed {ams.color.interactive.secondary}" },
5
+ "border-color": { "value": "currentColor" },
6
+ "border-style": { "value": "dashed" },
7
+ "border-width": { "value": "{ams.border.width.m}" },
6
8
  "color": { "value": "{ams.color.text.default}" },
7
9
  "cursor": { "value": "{ams.cursor.interactive}" },
8
10
  "font-family": { "value": "{ams.typography.font-family}" },
9
11
  "font-size": { "value": "{ams.typography.body-text.font-size}" },
10
12
  "font-weight": { "value": "{ams.typography.body-text.font-weight}" },
11
13
  "line-height": { "value": "{ams.typography.body-text.line-height}" },
12
- "outline-offset": {
13
- "comment": "Compensate for the dashed border",
14
- "value": "calc({ams.focus.outline-offset} * 2)"
15
- },
14
+ "outline-offset": { "value": "{ams.focus.outline-offset}" },
16
15
  "padding-block": { "value": "{ams.space.m}" },
17
16
  "padding-inline": { "value": "{ams.space.m}" },
18
17
  "disabled": {
@@ -21,23 +20,21 @@
21
20
  },
22
21
  "file-selector-button": {
23
22
  "background-color": { "value": "{ams.color.background}" },
24
- "box-shadow": { "value": "inset 0 0 0 {ams.border.width.m} {ams.color.interactive.default}" },
23
+ "border-color": { "value": "currentColor" },
24
+ "border-style": { "value": "solid" },
25
+ "border-width": { "value": "{ams.border.width.m}" },
25
26
  "color": { "value": "{ams.color.interactive.default}" },
26
27
  "cursor": { "value": "{ams.cursor.interactive}" },
27
28
  "margin-inline-end": { "value": "{ams.space.m}" },
28
29
  "padding-block": { "value": "{ams.space.s}" },
29
30
  "padding-inline": { "value": "{ams.space.m}" },
30
31
  "hover": {
31
- "box-shadow": { "value": "inset 0 0 0 {ams.border.width.l} {ams.color.interactive.hover}" },
32
+ "box-shadow": { "value": "inset 0 0 0 {ams.border.width.s}" },
32
33
  "color": { "value": "{ams.color.interactive.hover}" }
33
34
  },
34
35
  "disabled": {
35
- "box-shadow": { "value": "inset 0 0 0 {ams.border.width.m} {ams.color.interactive.disabled}" },
36
36
  "color": { "value": "{ams.color.interactive.disabled}" },
37
37
  "cursor": { "value": "{ams.cursor.disabled}" }
38
- },
39
- "forced-color-mode": {
40
- "border": { "value": "{ams.border.width.m} solid" }
41
38
  }
42
39
  }
43
40
  }
package/src/components/ams/hint.tokens.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "ams": {
3
3
  "hint": {
4
- "color": { "value": "{ams.color.text.secondary}" }
4
+ "font-weight": { "value": "{ams.typography.body-text.font-weight}" }
5
5
  }
6
6
  }
7
7
  }
package/src/components/ams/page-header.compact.tokens.json ADDED
@@ -0,0 +1,10 @@
1
+ {
2
+ "ams": {
3
+ "page-header": {
4
+ "brand-name": {
5
+ "font-size": { "value": "{ams.typography.heading.2.font-size}" },
6
+ "line-height": { "value": "{ams.typography.heading.2.line-height}" }
7
+ }
8
+ }
9
+ }
10
+ }
package/src/components/ams/page-header.tokens.json CHANGED
@@ -21,6 +21,7 @@
21
21
  "color": { "value": "{ams.color.text.default}" },
22
22
  "font-size": { "value": "{ams.typography.heading.4.font-size}" },
23
23
  "font-weight": { "value": "{ams.typography.heading.font-weight}" },
24
+ "line-height": { "value": "{ams.typography.heading.4.line-height}" },
24
25
  "text-wrap": { "value": "{ams.typography.heading.text-wrap}" }
25
26
  },
26
27
  "mega-menu": {
package/src/components/ams/password-input.tokens.json CHANGED
@@ -2,7 +2,9 @@
2
2
  "ams": {
3
3
  "password-input": {
4
4
  "background-color": { "value": "{ams.color.background}" },
5
- "box-shadow": { "value": "inset 0 0 0 {ams.border.width.s} {ams.color.interactive.secondary}" },
5
+ "border-color": { "value": "currentColor" },
6
+ "border-style": { "value": "solid" },
7
+ "border-width": { "value": "{ams.border.width.m}" },
6
8
  "color": { "value": "{ams.color.text.default}" },
7
9
  "font-family": { "value": "{ams.typography.font-family}" },
8
10
  "font-size": { "value": "{ams.typography.body-text.font-size}" },
@@ -12,18 +14,17 @@
12
14
  "padding-block": { "value": "{ams.space.s}" },
13
15
  "padding-inline": { "value": "{ams.space.m}" },
14
16
  "disabled": {
15
- "background-color": { "value": "{ams.color.background}" },
16
- "box-shadow": { "value": "inset 0 0 0 {ams.border.width.s} {ams.color.interactive.disabled}" },
17
17
  "color": { "value": "{ams.color.interactive.disabled}" },
18
18
  "cursor": { "value": "{ams.cursor.disabled}" }
19
19
  },
20
20
  "hover": {
21
- "box-shadow": { "value": "inset 0 0 0 {ams.border.width.m} {ams.color.interactive.secondary}" }
21
+ "box-shadow": { "value": "inset 0 0 0 {ams.border.width.s}" }
22
22
  },
23
23
  "invalid": {
24
- "box-shadow": { "value": "inset 0 0 0 {ams.border.width.s} {ams.color.interactive.invalid.default}" },
24
+ "border-color": { "value": "{ams.color.interactive.invalid.default}" },
25
25
  "hover": {
26
- "box-shadow": { "value": "inset 0 0 0 {ams.border.width.m} {ams.color.interactive.invalid.hover}" }
26
+ "border-color": { "value": "{ams.color.interactive.invalid.hover}" },
27
+ "box-shadow": { "value": "inset 0 0 0 {ams.border.width.s} {ams.color.interactive.invalid.hover}" }
27
28
  }
28
29
  },
29
30
  "placeholder": {
package/src/components/ams/radio.tokens.json CHANGED
@@ -33,7 +33,6 @@
33
33
  }
34
34
  },
35
35
  "hover-indicator": {
36
- "stroke-width": { "value": "3px" },
37
36
  "hover": {
38
37
  "stroke": { "value": "{ams.color.interactive.hover}" }
39
38
  },
@@ -46,7 +45,6 @@
46
45
  "circle": {
47
46
  "fill": { "value": "{ams.color.background}" },
48
47
  "stroke": { "value": "{ams.color.interactive.default}" },
49
- "stroke-width": { "value": "2px" },
50
48
  "disabled": {
51
49
  "stroke": { "value": "{ams.color.interactive.disabled}" }
52
50
  },
package/src/components/ams/search-field.tokens.json CHANGED
@@ -3,7 +3,9 @@
3
3
  "search-field": {
4
4
  "input": {
5
5
  "background-color": { "value": "{ams.color.background}" },
6
- "box-shadow": { "value": "inset 0 0 0 {ams.border.width.s} {ams.color.interactive.secondary}" },
6
+ "border-color": { "value": "currentColor" },
7
+ "border-style": { "value": "solid" },
8
+ "border-width": { "value": "{ams.border.width.m}" },
7
9
  "color": { "value": "{ams.color.text.default}" },
8
10
  "font-family": { "value": "{ams.typography.font-family}" },
9
11
  "font-size": { "value": "{ams.typography.body-text.font-size}" },
@@ -22,12 +24,13 @@
22
24
  "inline-size": { "value": "{ams.typography.body-text.font-size}" }
23
25
  },
24
26
  "hover": {
25
- "box-shadow": { "value": "inset 0 0 0 {ams.border.width.m} {ams.color.interactive.secondary}" }
27
+ "box-shadow": { "value": "inset 0 0 0 {ams.border.width.s}" }
26
28
  },
27
29
  "invalid": {
28
- "box-shadow": { "value": "inset 0 0 0 {ams.border.width.s} {ams.color.interactive.invalid.default}" },
30
+ "border-color": { "value": "{ams.color.interactive.invalid.default}" },
29
31
  "hover": {
30
- "box-shadow": { "value": "inset 0 0 0 {ams.border.width.m} {ams.color.interactive.invalid.hover}" }
32
+ "border-color": { "value": "{ams.color.interactive.invalid.hover}" },
33
+ "box-shadow": { "value": "inset 0 0 0 {ams.border.width.s} {ams.color.interactive.invalid.hover}" }
31
34
  }
32
35
  },
33
36
  "placeholder": {
package/src/components/ams/select.tokens.json CHANGED
@@ -6,7 +6,9 @@
6
6
  "value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23004699' fill-rule='evenodd' d='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>\")"
7
7
  },
8
8
  "background-position": { "value": "right {ams.space.m} center" },
9
- "box-shadow": { "value": "inset 0 0 0 {ams.border.width.s} {ams.color.interactive.secondary}" },
9
+ "border-color": { "value": "currentColor" },
10
+ "border-style": { "value": "solid" },
11
+ "border-width": { "value": "{ams.border.width.m}" },
10
12
  "color": { "value": "{ams.color.text.default}" },
11
13
  "font-family": { "value": "{ams.typography.font-family}" },
12
14
  "font-size": { "value": "{ams.typography.body-text.font-size}" },
@@ -17,19 +19,22 @@
17
19
  "padding-inline": { "value": "{ams.space.m} calc(2 * {ams.space.m} + 1em)" },
18
20
  "disabled": {
19
21
  "background-image": {
20
- "value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23BEBEBE' fill-rule='evenodd' d='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>\")"
22
+ "value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23767676' fill-rule='evenodd' d='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>\")"
21
23
  },
22
- "box-shadow": { "value": "inset 0 0 0 {ams.border.width.s} {ams.color.interactive.disabled}" },
23
24
  "color": { "value": "{ams.color.interactive.disabled}" },
24
25
  "cursor": { "value": "{ams.cursor.disabled}" }
25
26
  },
26
27
  "hover": {
27
- "box-shadow": { "value": "inset 0 0 0 {ams.border.width.m} {ams.color.interactive.secondary}" }
28
+ "box-shadow": { "value": "inset 0 0 0 {ams.border.width.s}" },
29
+ "background-image": {
30
+ "value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23003677' fill-rule='evenodd' d='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>\")"
31
+ }
28
32
  },
29
33
  "invalid": {
30
- "box-shadow": { "value": "inset 0 0 0 {ams.border.width.s} {ams.color.interactive.invalid.default}" },
34
+ "border-color": { "value": "{ams.color.interactive.invalid.default}" },
31
35
  "hover": {
32
- "box-shadow": { "value": "inset 0 0 0 {ams.border.width.m} {ams.color.interactive.invalid.hover}" }
36
+ "border-color": { "value": "{ams.color.interactive.invalid.hover}" },
37
+ "box-shadow": { "value": "inset 0 0 0 {ams.border.width.s} {ams.color.interactive.invalid.hover}" }
33
38
  }
34
39
  },
35
40
  "option": {
package/src/components/ams/switch.tokens.json CHANGED
@@ -7,10 +7,10 @@
7
7
  "inline-size": { "value": "3.5rem" },
8
8
  "thumb": {
9
9
  "background-color": { "value": "{ams.color.background}" },
10
- "inline-size": { "value": "1.75rem" },
11
10
  "block-size": { "value": "1.75rem" },
11
+ "inline-size": { "value": "1.75rem" },
12
12
  "hover": {
13
- "box-shadow": { "value": "0 0 0 0.125rem {ams.switch.thumb.hover.color}" },
13
+ "box-shadow": { "value": "0 0 0 {ams.border.width.m} {ams.switch.thumb.hover.color}" },
14
14
  "color": { "value": "{ams.color.interactive.hover}" }
15
15
  }
16
16
  },
package/src/components/ams/tabs.tokens.json CHANGED
@@ -12,12 +12,12 @@
12
12
  "font-size": { "value": "{ams.typography.body-text.font-size}" },
13
13
  "font-weight": { "value": "{ams.typography.body-text.font-weight}" },
14
14
  "line-height": { "value": "{ams.typography.body-text.line-height}" },
15
- "outline-offset": { "value": "-0.25rem" },
15
+ "outline-offset": { "value": "calc({ams.focus.outline-offset} * -1)" },
16
16
  "padding-block": { "value": "{ams.space.s}" },
17
17
  "padding-inline": { "value": "{ams.space.m}" },
18
18
  "hover": {
19
- "color": { "value": "{ams.color.interactive.hover}" },
20
- "box-shadow": { "value": "inset 0 calc({ams.border.width.m} * -1)" }
19
+ "box-shadow": { "value": "inset 0 calc({ams.border.width.m} * -1)" },
20
+ "color": { "value": "{ams.color.interactive.hover}" }
21
21
  },
22
22
  "selected": {
23
23
  "box-shadow": { "value": "inset 0 calc({ams.border.width.xl} * -1)" },
package/src/components/ams/text-area.tokens.json CHANGED
@@ -2,7 +2,9 @@
2
2
  "ams": {
3
3
  "text-area": {
4
4
  "background-color": { "value": "{ams.color.background}" },
5
- "box-shadow": { "value": "inset 0 0 0 {ams.border.width.s} {ams.color.interactive.secondary}" },
5
+ "border-color": { "value": "currentColor" },
6
+ "border-style": { "value": "solid" },
7
+ "border-width": { "value": "{ams.border.width.m}" },
6
8
  "color": { "value": "{ams.color.text.default}" },
7
9
  "font-family": { "value": "{ams.typography.font-family}" },
8
10
  "font-size": { "value": "{ams.typography.body-text.font-size}" },
@@ -15,18 +17,17 @@
15
17
  "padding-block": { "value": "{ams.space.s}" },
16
18
  "padding-inline": { "value": "{ams.space.m}" },
17
19
  "disabled": {
18
- "background-color": { "value": "{ams.color.background}" },
19
- "box-shadow": { "value": "inset 0 0 0 {ams.border.width.s} {ams.color.interactive.disabled}" },
20
20
  "color": { "value": "{ams.color.interactive.disabled}" },
21
21
  "cursor": { "value": "{ams.cursor.disabled}" }
22
22
  },
23
23
  "hover": {
24
- "box-shadow": { "value": "inset 0 0 0 {ams.border.width.m} {ams.color.interactive.secondary}" }
24
+ "box-shadow": { "value": "inset 0 0 0 {ams.border.width.s}" }
25
25
  },
26
26
  "invalid": {
27
- "box-shadow": { "value": "inset 0 0 0 {ams.border.width.s} {ams.color.interactive.invalid.default}" },
27
+ "border-color": { "value": "{ams.color.interactive.invalid.default}" },
28
28
  "hover": {
29
- "box-shadow": { "value": "inset 0 0 0 {ams.border.width.m} {ams.color.interactive.invalid.hover}" }
29
+ "border-color": { "value": "{ams.color.interactive.invalid.hover}" },
30
+ "box-shadow": { "value": "inset 0 0 0 {ams.border.width.s} {ams.color.interactive.invalid.hover}" }
30
31
  }
31
32
  },
32
33
  "placeholder": {
package/src/components/ams/text-input.tokens.json CHANGED
@@ -2,7 +2,9 @@
2
2
  "ams": {
3
3
  "text-input": {
4
4
  "background-color": { "value": "{ams.color.background}" },
5
- "box-shadow": { "value": "inset 0 0 0 {ams.border.width.s} {ams.color.interactive.secondary}" },
5
+ "border-color": { "value": "currentColor" },
6
+ "border-style": { "value": "solid" },
7
+ "border-width": { "value": "{ams.border.width.m}" },
6
8
  "color": { "value": "{ams.color.text.default}" },
7
9
  "font-family": { "value": "{ams.typography.font-family}" },
8
10
  "font-size": { "value": "{ams.typography.body-text.font-size}" },
@@ -12,18 +14,17 @@
12
14
  "padding-block": { "value": "{ams.space.s}" },
13
15
  "padding-inline": { "value": "{ams.space.m}" },
14
16
  "disabled": {
15
- "background-color": { "value": "{ams.color.background}" },
16
- "box-shadow": { "value": "inset 0 0 0 {ams.border.width.s} {ams.color.interactive.disabled}" },
17
17
  "color": { "value": "{ams.color.interactive.disabled}" },
18
18
  "cursor": { "value": "{ams.cursor.disabled}" }
19
19
  },
20
20
  "hover": {
21
- "box-shadow": { "value": "inset 0 0 0 {ams.border.width.m} {ams.color.interactive.secondary}" }
21
+ "box-shadow": { "value": "inset 0 0 0 {ams.border.width.s}" }
22
22
  },
23
23
  "invalid": {
24
- "box-shadow": { "value": "inset 0 0 0 {ams.border.width.s} {ams.color.interactive.invalid.default}" },
24
+ "border-color": { "value": "{ams.color.interactive.invalid.default}" },
25
25
  "hover": {
26
- "box-shadow": { "value": "inset 0 0 0 {ams.border.width.m} {ams.color.interactive.invalid.hover}" }
26
+ "border-color": { "value": "{ams.color.interactive.invalid.hover}" },
27
+ "box-shadow": { "value": "inset 0 0 0 {ams.border.width.s} {ams.color.interactive.invalid.hover}" }
27
28
  }
28
29
  },
29
30
  "placeholder": {