@amsterdam/design-system-tokens 1.0.0 → 2.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 (59) hide show
  1. package/CHANGELOG.md +57 -0
  2. package/README.md +14 -3
  3. package/dist/compact.css +30 -18
  4. package/dist/compact.d.ts +16 -0
  5. package/dist/compact.json +36 -20
  6. package/dist/compact.mjs +33 -23
  7. package/dist/compact.scss +30 -18
  8. package/dist/compact.theme.css +30 -18
  9. package/dist/index.css +335 -269
  10. package/dist/index.d.ts +229 -125
  11. package/dist/index.json +525 -421
  12. package/dist/index.mjs +459 -404
  13. package/dist/index.scss +335 -269
  14. package/dist/index.theme.css +335 -269
  15. package/package.json +2 -2
  16. package/src/brand/ams/border.compact.tokens.json +12 -0
  17. package/src/brand/ams/color.deprecated.tokens.json +12 -0
  18. package/src/brand/ams/color.tokens.json +2 -3
  19. package/src/brand/ams/space.compact.tokens.json +6 -6
  20. package/src/brand/ams/space.tokens.json +6 -6
  21. package/src/brand/ams/typography.compact.tokens.json +17 -15
  22. package/src/brand/ams/typography.deprecated.compact.tokens.json +20 -0
  23. package/src/brand/ams/typography.deprecated.tokens.json +28 -0
  24. package/src/brand/ams/typography.tokens.json +17 -25
  25. package/src/common/ams/inputs.tokens.json +34 -0
  26. package/src/common/ams/links.tokens.json +4 -4
  27. package/src/components/ams/accordion.deprecated.tokens.json +17 -0
  28. package/src/components/ams/accordion.tokens.json +1 -10
  29. package/src/components/ams/breadcrumb.tokens.json +3 -3
  30. package/src/components/ams/button.tokens.json +13 -11
  31. package/src/components/ams/call-to-action-link.tokens.json +24 -0
  32. package/src/components/ams/checkbox.deprecated.tokens.json +43 -0
  33. package/src/components/ams/checkbox.tokens.json +22 -35
  34. package/src/components/ams/date-input.tokens.json +23 -23
  35. package/src/components/ams/error-message.tokens.json +2 -2
  36. package/src/components/ams/field-set.tokens.json +3 -3
  37. package/src/components/ams/file-input.tokens.json +25 -24
  38. package/src/components/ams/icon.deprecated.tokens.json +16 -0
  39. package/src/components/ams/icon.tokens.json +8 -0
  40. package/src/components/ams/label.tokens.json +2 -2
  41. package/src/components/ams/menu.tokens.json +39 -0
  42. package/src/components/ams/ordered-list.tokens.json +2 -2
  43. package/src/components/ams/page-footer.tokens.json +2 -2
  44. package/src/components/ams/page-header.tokens.json +2 -2
  45. package/src/components/ams/{page-heading.tokens.json → page-heading.deprecated.tokens.json} +1 -0
  46. package/src/components/ams/page.tokens.json +1 -1
  47. package/src/components/ams/password-input.tokens.json +18 -18
  48. package/src/components/ams/radio.tokens.json +1 -1
  49. package/src/components/ams/search-field.tokens.json +23 -23
  50. package/src/components/ams/select.tokens.json +17 -17
  51. package/src/components/ams/skip-link.tokens.json +2 -2
  52. package/src/components/ams/standalone-link.deprecated.tokens.json +32 -0
  53. package/src/components/ams/standalone-link.tokens.json +5 -13
  54. package/src/components/ams/table-of-contents.deprecated.tokens.json +11 -0
  55. package/src/components/ams/table-of-contents.tokens.json +1 -6
  56. package/src/components/ams/text-area.tokens.json +18 -18
  57. package/src/components/ams/text-input.tokens.json +18 -18
  58. package/src/components/ams/time-input.tokens.json +23 -23
  59. package/src/components/ams/unordered-list.tokens.json +2 -2
package/src/components/ams/table-of-contents.tokens.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "font-family": { "value": "{ams.typography.font-family}" },
5
5
  "font-size": { "value": "{ams.typography.body-text.font-size}" },
6
6
  "font-weight": { "value": "{ams.typography.body-text.font-weight}" },
7
- "gap": { "value": "{ams.space.m}" },
7
+ "gap": { "value": "{ams.space.s}" },
8
8
  "line-height": { "value": "{ams.typography.body-text.line-height}" },
9
9
  "link": {
10
10
  "color": { "value": "{ams.links.color}" },
@@ -23,11 +23,6 @@
23
23
  "padding-block-start": { "value": "{ams.space.s}" },
24
24
  "padding-inline-start": { "value": "{ams.space.l}" }
25
25
  }
26
- },
27
- "heading": {
28
- "font-weight": { "value": "{ams.typography.heading.font-weight}" },
29
- "font-size": { "value": "{ams.typography.heading.4.font-size}" },
30
- "line-height": { "value": "{ams.typography.heading.4.line-height}" }
31
26
  }
32
27
  }
33
28
  }
package/src/components/ams/text-area.tokens.json CHANGED
@@ -1,37 +1,37 @@
1
1
  {
2
2
  "ams": {
3
3
  "text-area": {
4
- "background-color": { "value": "{ams.color.background}" },
5
- "border-color": { "value": "currentColor" },
6
- "border-style": { "value": "solid" },
7
- "border-width": { "value": "{ams.border.width.m}" },
8
- "color": { "value": "{ams.color.text.default}" },
9
- "font-family": { "value": "{ams.typography.font-family}" },
10
- "font-size": { "value": "{ams.typography.body-text.font-size}" },
11
- "font-weight": { "value": "{ams.typography.body-text.font-weight}" },
12
- "line-height": { "value": "{ams.typography.body-text.line-height}" },
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
13
  "min-block-size": {
14
14
  "value": "calc({ams.typography.body-text.line-height} * 1em + 2 * {ams.text-area.padding-block})"
15
15
  },
16
- "outline-offset": { "value": "{ams.focus.outline-offset}" },
17
- "padding-block": { "value": "{ams.space.s}" },
18
- "padding-inline": { "value": "{ams.space.m}" },
16
+ "outline-offset": { "value": "{ams.inputs.outline-offset}" },
17
+ "padding-block": { "value": "{ams.inputs.padding-block}" },
18
+ "padding-inline": { "value": "{ams.inputs.padding-inline}" },
19
19
  "disabled": {
20
- "color": { "value": "{ams.color.interactive.disabled}" },
20
+ "color": { "value": "{ams.inputs.disabled.color}" },
21
21
  "cursor": { "value": "{ams.cursor.disabled}" }
22
22
  },
23
23
  "hover": {
24
- "box-shadow": { "value": "inset 0 0 0 {ams.border.width.s}" }
24
+ "box-shadow": { "value": "{ams.inputs.hover.box-shadow}" }
25
25
  },
26
26
  "invalid": {
27
- "border-color": { "value": "{ams.color.interactive.invalid.default}" },
27
+ "border-color": { "value": "{ams.inputs.invalid.border-color}" },
28
28
  "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}" }
29
+ "border-color": { "value": "{ams.inputs.invalid.hover.border-color}" },
30
+ "box-shadow": { "value": "{ams.inputs.invalid.hover.box-shadow}" }
31
31
  }
32
32
  },
33
33
  "placeholder": {
34
- "color": { "value": "{ams.color.text.secondary}" }
34
+ "color": { "value": "{ams.inputs.placeholder.color}" }
35
35
  }
36
36
  }
37
37
  }
package/src/components/ams/text-input.tokens.json CHANGED
@@ -1,34 +1,34 @@
1
1
  {
2
2
  "ams": {
3
3
  "text-input": {
4
- "background-color": { "value": "{ams.color.background}" },
5
- "border-color": { "value": "currentColor" },
6
- "border-style": { "value": "solid" },
7
- "border-width": { "value": "{ams.border.width.m}" },
8
- "color": { "value": "{ams.color.text.default}" },
9
- "font-family": { "value": "{ams.typography.font-family}" },
10
- "font-size": { "value": "{ams.typography.body-text.font-size}" },
11
- "font-weight": { "value": "{ams.typography.body-text.font-weight}" },
12
- "line-height": { "value": "{ams.typography.body-text.line-height}" },
13
- "outline-offset": { "value": "{ams.focus.outline-offset}" },
14
- "padding-block": { "value": "{ams.space.s}" },
15
- "padding-inline": { "value": "{ams.space.m}" },
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}" },
16
16
  "disabled": {
17
- "color": { "value": "{ams.color.interactive.disabled}" },
17
+ "color": { "value": "{ams.inputs.disabled.color}" },
18
18
  "cursor": { "value": "{ams.cursor.disabled}" }
19
19
  },
20
20
  "hover": {
21
- "box-shadow": { "value": "inset 0 0 0 {ams.border.width.s}" }
21
+ "box-shadow": { "value": "{ams.inputs.hover.box-shadow}" }
22
22
  },
23
23
  "invalid": {
24
- "border-color": { "value": "{ams.color.interactive.invalid.default}" },
24
+ "border-color": { "value": "{ams.inputs.invalid.border-color}" },
25
25
  "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}" }
26
+ "border-color": { "value": "{ams.inputs.invalid.hover.border-color}" },
27
+ "box-shadow": { "value": "{ams.inputs.invalid.hover.box-shadow}" }
28
28
  }
29
29
  },
30
30
  "placeholder": {
31
- "color": { "value": "{ams.color.text.secondary}" }
31
+ "color": { "value": "{ams.inputs.placeholder.color}" }
32
32
  }
33
33
  }
34
34
  }
package/src/components/ams/time-input.tokens.json CHANGED
@@ -1,26 +1,20 @@
1
1
  {
2
2
  "ams": {
3
3
  "time-input": {
4
- "background-color": { "value": "{ams.color.background}" },
5
- "border-color": { "value": "currentColor" },
6
- "border-style": { "value": "solid" },
7
- "border-width": { "value": "{ams.border.width.m}" },
8
- "color": { "value": "{ams.color.text.default}" },
9
- "font-family": { "value": "{ams.typography.font-family}" },
10
- "font-size": { "value": "{ams.typography.body-text.font-size}" },
11
- "font-weight": { "value": "{ams.typography.body-text.font-weight}" },
12
- "line-height": { "value": "{ams.typography.body-text.line-height}" },
13
- "outline-offset": { "value": "{ams.focus.outline-offset}" },
14
- "padding-block": { "value": "{ams.space.s}" },
15
- "padding-inline": { "value": "{ams.space.m}" },
16
- "calender-picker-indicator": {
17
- "background-image": {
18
- "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>\")"
19
- },
20
- "cursor": { "value": "{ams.cursor.interactive}" }
21
- },
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}" },
22
16
  "disabled": {
23
- "color": { "value": "{ams.color.interactive.disabled}" },
17
+ "color": { "value": "{ams.inputs.disabled.color}" },
24
18
  "cursor": { "value": "{ams.cursor.disabled}" },
25
19
  "calender-picker-indicator": {
26
20
  "background-image": {
@@ -29,7 +23,7 @@
29
23
  }
30
24
  },
31
25
  "hover": {
32
- "box-shadow": { "value": "inset 0 0 0 {ams.border.width.s}" },
26
+ "box-shadow": { "value": "{ams.inputs.hover.box-shadow}" },
33
27
  "calender-picker-indicator": {
34
28
  "background-image": {
35
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>\")"
@@ -37,11 +31,17 @@
37
31
  }
38
32
  },
39
33
  "invalid": {
40
- "border-color": { "value": "{ams.color.interactive.invalid.default}" },
34
+ "border-color": { "value": "{ams.inputs.invalid.border-color}" },
41
35
  "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}" }
36
+ "border-color": { "value": "{ams.inputs.invalid.hover.border-color}" },
37
+ "box-shadow": { "value": "{ams.inputs.invalid.hover.box-shadow}" }
44
38
  }
39
+ },
40
+ "calender-picker-indicator": {
41
+ "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>\")"
43
+ },
44
+ "cursor": { "value": "{ams.cursor.interactive}" }
45
45
  }
46
46
  }
47
47
  }
package/src/components/ams/unordered-list.tokens.json CHANGED
@@ -5,7 +5,7 @@
5
5
  "font-family": { "value": "{ams.typography.font-family}" },
6
6
  "font-size": { "value": "{ams.typography.body-text.font-size}" },
7
7
  "font-weight": { "value": "{ams.typography.body-text.font-weight}" },
8
- "gap": { "value": "{ams.space.m}" },
8
+ "gap": { "value": "{ams.space.s}" },
9
9
  "line-height": { "value": "{ams.typography.body-text.line-height}" },
10
10
  "list-style-type": { "value": "'\\2022'" },
11
11
  "inverse": {
@@ -28,7 +28,7 @@
28
28
  "unordered-list": {
29
29
  "gap": { "value": "{ams.space.s}" },
30
30
  "list-style-type": { "value": "'\\2013'" },
31
- "padding-block-end": { "value": "0" },
31
+ "padding-block-end": { "value": "{ams.space.s}" },
32
32
  "padding-block-start": { "value": "{ams.space.s}" },
33
33
  "item": {
34
34
  "margin-inline-start": {