@amsterdam/design-system-tokens 0.9.0 → 0.11.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 (56) hide show
  1. package/CHANGELOG.md +34 -0
  2. package/build.js +15 -14
  3. package/dist/compact.css +13 -9
  4. package/dist/compact.d.ts +10 -12
  5. package/dist/compact.json +12 -7
  6. package/dist/compact.mjs +13 -9
  7. package/dist/compact.scss +13 -9
  8. package/dist/compact.theme.css +13 -9
  9. package/dist/index.css +145 -108
  10. package/dist/index.d.ts +96 -41
  11. package/dist/index.json +254 -192
  12. package/dist/index.mjs +223 -186
  13. package/dist/index.scss +145 -108
  14. package/dist/index.theme.css +145 -108
  15. package/package.json +3 -2
  16. package/src/brand/ams/proportion.tokens.json +3 -3
  17. package/src/brand/ams/space.compact.tokens.json +5 -0
  18. package/src/brand/ams/space.tokens.json +10 -19
  19. package/src/brand/ams/text.compact.tokens.json +7 -7
  20. package/src/brand/ams/text.tokens.json +7 -7
  21. package/src/components/ams/accordion.tokens.json +4 -4
  22. package/src/components/ams/alert.tokens.json +6 -3
  23. package/src/components/ams/avatar.tokens.json +26 -6
  24. package/src/components/ams/badge.tokens.json +1 -1
  25. package/src/components/ams/breadcrumb.tokens.json +4 -1
  26. package/src/components/ams/button.tokens.json +3 -3
  27. package/src/components/ams/card.tokens.json +4 -0
  28. package/src/components/ams/{form-field-character-counter.tokens.json → character-count.tokens.json} +1 -1
  29. package/src/components/ams/checkbox.tokens.json +1 -0
  30. package/src/components/ams/column.tokens.json +6 -5
  31. package/src/components/ams/date-input.tokens.json +2 -2
  32. package/src/components/ams/description-list.tokens.json +3 -3
  33. package/src/components/ams/dialog.tokens.json +8 -7
  34. package/src/components/ams/field-set.tokens.json +3 -7
  35. package/src/components/ams/field.tokens.json +3 -9
  36. package/src/components/ams/file-input.tokens.json +5 -5
  37. package/src/components/ams/form-error-list.tokens.json +7 -0
  38. package/src/components/ams/header.tokens.json +1 -1
  39. package/src/components/ams/link-list.tokens.json +2 -2
  40. package/src/components/ams/mega-menu.tokens.json +1 -1
  41. package/src/components/ams/ordered-list.tokens.json +1 -1
  42. package/src/components/ams/page-menu.tokens.json +1 -1
  43. package/src/components/ams/pagination.tokens.json +2 -1
  44. package/src/components/ams/radio.tokens.json +1 -0
  45. package/src/components/ams/row.tokens.json +6 -5
  46. package/src/components/ams/search-field.tokens.json +4 -4
  47. package/src/components/ams/select.tokens.json +3 -3
  48. package/src/components/ams/skip-link.tokens.json +2 -2
  49. package/src/components/ams/table-of-contents.tokens.json +34 -0
  50. package/src/components/ams/table.tokens.json +2 -2
  51. package/src/components/ams/tabs.tokens.json +3 -2
  52. package/src/components/ams/text-area.tokens.json +2 -2
  53. package/src/components/ams/text-input.tokens.json +2 -2
  54. package/src/components/ams/time-input.tokens.json +2 -2
  55. package/src/components/ams/top-task-link.tokens.json +1 -0
  56. package/src/components/ams/unordered-list.tokens.json +1 -1
package/src/components/ams/select.tokens.json CHANGED
@@ -5,7 +5,7 @@
5
5
  "background-image": {
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
- "background-position": { "value": "right {ams.space.inside.md} center" },
8
+ "background-position": { "value": "right {ams.space.md} center" },
9
9
  "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.primary-black}" },
10
10
  "color": { "value": "{ams.color.primary-black}" },
11
11
  "font-family": { "value": "{ams.text.font-family}" },
@@ -13,8 +13,8 @@
13
13
  "font-weight": { "value": "{ams.text.font-weight.normal}" },
14
14
  "line-height": { "value": "{ams.text.level.5.line-height}" },
15
15
  "outline-offset": { "value": "{ams.focus.outline-offset}" },
16
- "padding-block": { "value": "{ams.space.inside.xs}" },
17
- "padding-inline": { "value": "{ams.space.inside.md} calc(2 * {ams.space.inside.md} + 1em)" },
16
+ "padding-block": { "value": "{ams.space.sm}" },
17
+ "padding-inline": { "value": "{ams.space.md} calc(2 * {ams.space.md} + 1em)" },
18
18
  "disabled": {
19
19
  "background-image": {
20
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>\")"
package/src/components/ams/skip-link.tokens.json CHANGED
@@ -8,8 +8,8 @@
8
8
  "font-weight": { "value": "{ams.text.font-weight.normal}" },
9
9
  "line-height": { "value": "{ams.text.level.6.line-height}" },
10
10
  "outline-offset": { "value": "{ams.focus.outline-offset}" },
11
- "padding-block": { "value": "{ams.space.inside.xs}" },
12
- "padding-inline": { "value": "{ams.space.inside.md}" },
11
+ "padding-block": { "value": "{ams.space.sm}" },
12
+ "padding-inline": { "value": "{ams.space.md}" },
13
13
  "hover": {
14
14
  "background-color": { "value": "{ams.color.dark-blue}" }
15
15
  }
package/src/components/ams/table-of-contents.tokens.json ADDED
@@ -0,0 +1,34 @@
1
+ {
2
+ "ams": {
3
+ "table-of-contents": {
4
+ "font-family": { "value": "{ams.text.font-family}" },
5
+ "font-size": { "value": "{ams.text.level.5.font-size}" },
6
+ "font-weight": { "value": "{ams.text.font-weight.normal}" },
7
+ "gap": { "value": "{ams.space.md}" },
8
+ "line-height": { "value": "{ams.text.level.5.line-height}" },
9
+ "link": {
10
+ "color": { "value": "{ams.link-appearance.color}" },
11
+ "outline-offset": { "value": "{ams.focus.outline-offset}" },
12
+ "text-decoration-line": { "value": "{ams.link-appearance.subtle.text-decoration-line}" },
13
+ "text-decoration-thickness": { "value": "{ams.link-appearance.text-decoration-thickness}" },
14
+ "text-underline-offset": { "value": "{ams.link-appearance.text-underline-offset}" },
15
+ "hover": {
16
+ "color": { "value": "{ams.link-appearance.hover.color}" },
17
+ "text-decoration-line": { "value": "{ams.link-appearance.subtle.hover.text-decoration-line}" }
18
+ }
19
+ },
20
+ "list": {
21
+ "gap": { "value": "{ams.space.sm}" },
22
+ "list": {
23
+ "padding-block-start": { "value": "{ams.space.sm}" },
24
+ "padding-inline-start": { "value": "{ams.space.lg}" }
25
+ }
26
+ },
27
+ "heading": {
28
+ "font-weight": { "value": "{ams.text.font-weight.bold}" },
29
+ "font-size": { "value": "{ams.text.level.4.font-size}" },
30
+ "line-height": { "value": "{ams.text.level.4.line-height}" }
31
+ }
32
+ }
33
+ }
34
+ }
package/src/components/ams/table.tokens.json CHANGED
@@ -11,8 +11,8 @@
11
11
  },
12
12
  "cell": {
13
13
  "border-block-end": { "value": "{ams.border.width.sm} solid {ams.color.neutral-grey1}" },
14
- "padding-block": { "value": "{ams.space.inside.md}" },
15
- "padding-inline": { "value": "{ams.space.inside.md}" }
14
+ "padding-block": { "value": "{ams.space.sm}" },
15
+ "padding-inline": { "value": "{ams.space.md}" }
16
16
  },
17
17
  "header-cell": {
18
18
  "font-weight": { "value": "{ams.text.font-weight.bold}" }
package/src/components/ams/tabs.tokens.json CHANGED
@@ -1,6 +1,7 @@
1
1
  {
2
2
  "ams": {
3
3
  "tabs": {
4
+ "gap": { "value": "{ams.space.md}" },
4
5
  "list": {
5
6
  "background-color": { "value": "{ams.color.primary-white}" },
6
7
  "border-block-end": { "value": "{ams.border.width.md} solid {ams.color.primary-blue}" }
@@ -13,8 +14,8 @@
13
14
  "font-weight": { "value": "{ams.text.font-weight.normal}" },
14
15
  "line-height": { "value": "{ams.text.level.5.line-height}" },
15
16
  "outline-offset": { "value": "-0.25rem" },
16
- "padding-block": { "value": ".5rem" },
17
- "padding-inline": { "value": "1rem" },
17
+ "padding-block": { "value": "{ams.space.sm}" },
18
+ "padding-inline": { "value": "{ams.space.md}" },
18
19
  "hover": {
19
20
  "color": { "value": "{ams.color.dark-blue}" },
20
21
  "box-shadow": { "value": "inset 0 -0.125rem 0 0 {ams.color.dark-blue}" }
package/src/components/ams/text-area.tokens.json CHANGED
@@ -12,8 +12,8 @@
12
12
  "value": "calc({ams.text.level.5.line-height} * 1em + 2 * {ams.text-area.padding-block})"
13
13
  },
14
14
  "outline-offset": { "value": "{ams.focus.outline-offset}" },
15
- "padding-block": { "value": "0.5rem" },
16
- "padding-inline": { "value": "1rem" },
15
+ "padding-block": { "value": "{ams.space.sm}" },
16
+ "padding-inline": { "value": "{ams.space.md}" },
17
17
  "disabled": {
18
18
  "background-color": { "value": "{ams.color.primary-white}" },
19
19
  "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.neutral-grey2}" },
package/src/components/ams/text-input.tokens.json CHANGED
@@ -9,8 +9,8 @@
9
9
  "font-weight": { "value": "{ams.text.font-weight.normal}" },
10
10
  "line-height": { "value": "{ams.text.level.5.line-height}" },
11
11
  "outline-offset": { "value": "{ams.focus.outline-offset}" },
12
- "padding-block": { "value": "{ams.space.inside.xs}" },
13
- "padding-inline": { "value": "{ams.space.inside.md}" },
12
+ "padding-block": { "value": "{ams.space.sm}" },
13
+ "padding-inline": { "value": "{ams.space.md}" },
14
14
  "disabled": {
15
15
  "background-color": { "value": "{ams.color.primary-white}" },
16
16
  "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.neutral-grey2}" },
package/src/components/ams/time-input.tokens.json CHANGED
@@ -9,8 +9,8 @@
9
9
  "font-weight": { "value": "{ams.text.font-weight.normal}" },
10
10
  "line-height": { "value": "{ams.text.level.5.line-height}" },
11
11
  "outline-offset": { "value": "{ams.focus.outline-offset}" },
12
- "padding-block": { "value": "{ams.space.inside.xs}" },
13
- "padding-inline": { "value": "{ams.space.inside.md}" },
12
+ "padding-block": { "value": "{ams.space.sm}" },
13
+ "padding-inline": { "value": "{ams.space.md}" },
14
14
  "calender-picker-indicator": {
15
15
  "background-image": {
16
16
  "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>\")"
package/src/components/ams/top-task-link.tokens.json CHANGED
@@ -1,6 +1,7 @@
1
1
  {
2
2
  "ams": {
3
3
  "top-task-link": {
4
+ "gap": { "value": "{ams.space.sm}" },
4
5
  "description": {
5
6
  "color": { "value": "{ams.color.primary-black}" },
6
7
  "font-family": { "value": "{ams.text.font-family}" },
package/src/components/ams/unordered-list.tokens.json CHANGED
@@ -5,7 +5,7 @@
5
5
  "font-family": { "value": "{ams.text.font-family}" },
6
6
  "font-size": { "value": "{ams.text.level.5.font-size}" },
7
7
  "font-weight": { "value": "{ams.text.font-weight.normal}" },
8
- "gap": { "value": "0.75rem" },
8
+ "gap": { "value": "{ams.space.sm}" },
9
9
  "inverse-color": { "value": "{ams.color.primary-white}" },
10
10
  "line-height": { "value": "{ams.text.level.5.line-height}" },
11
11
  "list-style-type": { "value": "'\\2022'" },