@amsterdam/design-system-tokens 0.1.8 → 0.3.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 (45) hide show
  1. package/CHANGELOG.md +37 -0
  2. package/dist/_variables.scss +274 -163
  3. package/dist/index.css +274 -163
  4. package/dist/index.d.ts +255 -144
  5. package/dist/index.js +261 -150
  6. package/dist/index.json +260 -149
  7. package/dist/index.tokens.json +455 -297
  8. package/dist/root.css +274 -163
  9. package/dist/tokens.d.ts +442 -284
  10. package/dist/tokens.js +5618 -3116
  11. package/dist/variables.less +274 -163
  12. package/package.json +3 -3
  13. package/src/brand/amsterdam/typography.tokens.json +62 -84
  14. package/src/common/amsterdam/border.tokens.json +3 -9
  15. package/src/common/amsterdam/link-appearance.tokens.json +31 -0
  16. package/src/common/amsterdam/spacing.tokens.json +4 -12
  17. package/src/components/amsterdam/accordion.tokens.json +8 -9
  18. package/src/components/amsterdam/alert.tokens.json +6 -5
  19. package/src/components/amsterdam/blockquote.tokens.json +6 -5
  20. package/src/components/amsterdam/breadcrumb.tokens.json +21 -34
  21. package/src/components/amsterdam/button.tokens.json +11 -19
  22. package/src/components/amsterdam/card.tokens.json +6 -2
  23. package/src/components/amsterdam/checkbox.tokens.json +27 -73
  24. package/src/components/amsterdam/dialog.tokens.json +6 -5
  25. package/src/components/amsterdam/form-label.tokens.json +6 -5
  26. package/src/components/amsterdam/grid.tokens.json +5 -11
  27. package/src/components/amsterdam/header.tokens.json +7 -0
  28. package/src/components/amsterdam/heading.tokens.json +44 -28
  29. package/src/components/amsterdam/icon.tokens.json +29 -28
  30. package/src/components/amsterdam/link.tokens.json +43 -45
  31. package/src/components/amsterdam/mark.tokens.json +7 -0
  32. package/src/components/amsterdam/ordered-list.tokens.json +6 -5
  33. package/src/components/amsterdam/page-heading.tokens.json +9 -8
  34. package/src/components/amsterdam/page-menu.tokens.json +13 -9
  35. package/src/components/amsterdam/pagination.tokens.json +17 -18
  36. package/src/components/amsterdam/paragraph.tokens.json +22 -19
  37. package/src/components/amsterdam/search-field.tokens.json +47 -0
  38. package/src/components/amsterdam/skip-link.tokens.json +20 -0
  39. package/src/components/amsterdam/spotlight.tokens.json +30 -0
  40. package/src/components/amsterdam/switch.tokens.json +10 -30
  41. package/src/components/amsterdam/text-input.tokens.json +36 -0
  42. package/src/components/amsterdam/top-task-link.tokens.json +25 -47
  43. package/src/components/amsterdam/unordered-list.tokens.json +6 -5
  44. package/src/components/utrecht/button.tokens.json +25 -75
  45. package/src/components/amsterdam/highlight.tokens.json +0 -46
package/src/components/amsterdam/grid.tokens.json CHANGED
@@ -1,10 +1,8 @@
1
1
  {
2
2
  "amsterdam": {
3
3
  "grid": {
4
- "column-count": {
5
- "value": "4"
6
- },
7
- "density-low": {
4
+ "column-count": { "value": "4" },
5
+ "spacious": {
8
6
  "gap": {
9
7
  "value": "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)",
10
8
  "comment": "Grows from 16px at 320px wide to 56px at 1600px wide."
@@ -14,7 +12,7 @@
14
12
  "comment": "Equals 1.5 times the gap."
15
13
  }
16
14
  },
17
- "density-high": {
15
+ "compact": {
18
16
  "gap": {
19
17
  "value": "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)",
20
18
  "comment": "Grows from 16px at 1088px wide to 40px at 2624px wide."
@@ -25,14 +23,10 @@
25
23
  }
26
24
  },
27
25
  "medium": {
28
- "column-count": {
29
- "value": "8"
30
- }
26
+ "column-count": { "value": "8" }
31
27
  },
32
28
  "wide": {
33
- "column-count": {
34
- "value": "12"
35
- }
29
+ "column-count": { "value": "12" }
36
30
  }
37
31
  }
38
32
  }
package/src/components/amsterdam/header.tokens.json ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "amsterdam": {
3
+ "header": {
4
+ "column-gap": { "value": "{amsterdam.grid.spacious.gap}" }
5
+ }
6
+ }
7
+ }
package/src/components/amsterdam/heading.tokens.json CHANGED
@@ -5,40 +5,56 @@
5
5
  "font-family": { "value": "{amsterdam.typography.font-family}" },
6
6
  "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
7
7
  "inverse-color": { "value": "{amsterdam.color.primary-white}" },
8
- "1": {
9
- "line-height": { "value": "{amsterdam.typography.text-level.1.line-height}" },
10
- "narrow": {
11
- "font-size": { "value": "{amsterdam.typography.text-level.1.narrow.font-size}" }
8
+ "spacious": {
9
+ "level-1": {
10
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.1.line-height}" },
11
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.1.font-size}" }
12
12
  },
13
- "wide": {
14
- "font-size": { "value": "{amsterdam.typography.text-level.1.wide.font-size}" }
15
- }
16
- },
17
- "2": {
18
- "line-height": { "value": "{amsterdam.typography.text-level.2.line-height}" },
19
- "narrow": {
20
- "font-size": { "value": "{amsterdam.typography.text-level.2.narrow.font-size}" }
13
+ "level-2": {
14
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.2.line-height}" },
15
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.2.font-size}" }
21
16
  },
22
- "wide": {
23
- "font-size": { "value": "{amsterdam.typography.text-level.2.wide.font-size}" }
24
- }
25
- },
26
- "3": {
27
- "line-height": { "value": "{amsterdam.typography.text-level.3.line-height}" },
28
- "narrow": {
29
- "font-size": { "value": "{amsterdam.typography.text-level.3.narrow.font-size}" }
17
+ "level-3": {
18
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.3.line-height}" },
19
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.3.font-size}" }
20
+ },
21
+ "level-4": {
22
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.4.line-height}" },
23
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.4.font-size}" }
30
24
  },
31
- "wide": {
32
- "font-size": { "value": "{amsterdam.typography.text-level.3.wide.font-size}" }
25
+ "level-5": {
26
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" },
27
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" }
28
+ },
29
+ "level-6": {
30
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" },
31
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" }
33
32
  }
34
33
  },
35
- "4": {
36
- "line-height": { "value": "{amsterdam.typography.text-level.4.line-height}" },
37
- "narrow": {
38
- "font-size": { "value": "{amsterdam.typography.text-level.4.narrow.font-size}" }
34
+ "compact": {
35
+ "level-1": {
36
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.1.line-height}" },
37
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.1.font-size}" }
38
+ },
39
+ "level-2": {
40
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.2.line-height}" },
41
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.2.font-size}" }
42
+ },
43
+ "level-3": {
44
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.3.line-height}" },
45
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.3.font-size}" }
46
+ },
47
+ "level-4": {
48
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.4.line-height}" },
49
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.4.font-size}" }
50
+ },
51
+ "level-5": {
52
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" },
53
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" }
39
54
  },
40
- "wide": {
41
- "font-size": { "value": "{amsterdam.typography.text-level.4.wide.font-size}" }
55
+ "level-6": {
56
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" },
57
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" }
42
58
  }
43
59
  }
44
60
  }
package/src/components/amsterdam/icon.tokens.json CHANGED
@@ -1,40 +1,41 @@
1
1
  {
2
2
  "amsterdam": {
3
3
  "icon": {
4
- "size-3": {
5
- "icon-size": {
6
- "narrow": { "value": "{amsterdam.typography.text-level.3.narrow.font-size}" },
7
- "wide": { "value": "{amsterdam.typography.text-level.3.wide.font-size}" }
4
+ "spacious": {
5
+ "size-3": {
6
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.3.font-size}" },
7
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.3.line-height}" }
8
8
  },
9
- "container-multiplier": { "value": "{amsterdam.typography.text-level.3.line-height}" }
10
- },
11
- "size-4": {
12
- "icon-size": {
13
- "narrow": { "value": "{amsterdam.typography.text-level.4.narrow.font-size}" },
14
- "wide": { "value": "{amsterdam.typography.text-level.4.wide.font-size}" }
9
+ "size-4": {
10
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.4.font-size}" },
11
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.4.line-height}" }
15
12
  },
16
- "container-multiplier": { "value": "{amsterdam.typography.text-level.4.line-height}" }
17
- },
18
- "size-5": {
19
- "icon-size": {
20
- "narrow": { "value": "{amsterdam.typography.text-level.5.narrow.font-size}" },
21
- "wide": { "value": "{amsterdam.typography.text-level.5.wide.font-size}" }
13
+ "size-5": {
14
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" },
15
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" }
22
16
  },
23
- "container-multiplier": { "value": "{amsterdam.typography.text-level.5.line-height}" }
17
+ "size-6": {
18
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" },
19
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" }
20
+ }
24
21
  },
25
- "size-6": {
26
- "icon-size": {
27
- "narrow": { "value": "{amsterdam.typography.text-level.6.narrow.font-size}" },
28
- "wide": { "value": "{amsterdam.typography.text-level.6.wide.font-size}" }
22
+ "compact": {
23
+ "size-3": {
24
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.3.font-size}" },
25
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.3.line-height}" }
29
26
  },
30
- "container-multiplier": { "value": "{amsterdam.typography.text-level.6.line-height}" }
31
- },
32
- "size-7": {
33
- "icon-size": {
34
- "narrow": { "value": "{amsterdam.typography.text-level.7.narrow.font-size}" },
35
- "wide": { "value": "{amsterdam.typography.text-level.7.wide.font-size}" }
27
+ "size-4": {
28
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.4.font-size}" },
29
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.4.line-height}" }
30
+ },
31
+ "size-5": {
32
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" },
33
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" }
36
34
  },
37
- "container-multiplier": { "value": "{amsterdam.typography.text-level.7.line-height}" }
35
+ "size-6": {
36
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" },
37
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" }
38
+ }
38
39
  }
39
40
  }
40
41
  }
package/src/components/amsterdam/link.tokens.json CHANGED
@@ -1,84 +1,82 @@
1
1
  {
2
2
  "amsterdam": {
3
3
  "link": {
4
- "color": { "value": "{amsterdam.color.primary-blue}" },
4
+ "color": { "value": "{amsterdam.link-appearance.color}" },
5
+ "font-family": { "value": "{amsterdam.typography.font-family}" },
6
+ "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
5
7
  "outline-offset": { "value": "{amsterdam.focus.outline-offset}" },
6
- "font-family": {
7
- "value": "{amsterdam.typography.font-family}"
8
- },
9
- "font-weight": {
10
- "value": "{amsterdam.typography.font-weight.normal}"
11
- },
12
8
  "hover": {
13
- "color": { "value": "{amsterdam.color.dark-blue}" }
9
+ "color": { "value": "{amsterdam.link-appearance.hover.color}" }
14
10
  },
15
11
  "inline": {
12
+ "text-decoration-line": { "value": "{amsterdam.link-appearance.regular.text-decoration-line}" },
13
+ "text-decoration-thickness": { "value": "{amsterdam.link-appearance.text-decoration-thickness}" },
14
+ "text-underline-offset": { "value": "{amsterdam.link-appearance.text-underline-offset}" },
15
+ "font-family": { "value": "inherit" },
16
+ "font-size": { "value": "inherit" },
17
+ "line-height": { "value": "inherit" },
16
18
  "hover": {
17
- "text-decoration": { "value": "underline" },
18
- "text-underline-offset": { "value": "3px" }
19
- },
20
- "font-family": {
21
- "value": "inherit"
22
- },
23
- "font-size": {
24
- "value": "inherit"
25
- },
26
- "line-height": {
27
- "value": "inherit"
19
+ "text-decoration-thickness": {
20
+ "value": "{amsterdam.link-appearance.regular.hover.text-decoration-thickness}"
21
+ },
22
+ "text-underline-offset": { "value": "{amsterdam.link-appearance.regular.hover.text-underline-offset}" }
28
23
  },
29
- "text-decoration": { "value": "none" },
30
- "text-decoration-thickness": { "value": "2px" },
31
24
  "visited": {
32
25
  "color": { "value": "{amsterdam.color.purple}" }
33
26
  }
34
27
  },
35
28
  "in-list": {
36
29
  "gap": { "value": "0.5em" },
30
+ "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.text-decoration-line}" },
31
+ "text-decoration-thickness": { "value": "{amsterdam.link-appearance.text-decoration-thickness}" },
32
+ "text-underline-offset": { "value": "{amsterdam.link-appearance.text-underline-offset}" },
37
33
  "hover": {
38
- "text-decoration": { "value": "underline" },
39
- "text-decoration-thickness": { "value": "2px" },
40
- "text-underline-offset": { "value": "7px" }
34
+ "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.hover.text-decoration-line}" }
41
35
  },
42
- "text-decoration": { "value": "none" },
43
- "line-height": { "value": "{amsterdam.typography.text-level.7.line-height}" },
44
- "narrow": {
45
- "font-size": { "value": "{amsterdam.typography.text-level.7.narrow.font-size}" }
36
+ "spacious": {
37
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" },
38
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" }
46
39
  },
47
- "wide": {
48
- "font-size": { "value": "{amsterdam.typography.text-level.7.wide.font-size}" }
40
+ "compact": {
41
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" },
42
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" }
49
43
  }
50
44
  },
51
45
  "standalone": {
52
- "text-underline-offset": { "value": "8px" },
53
- "text-decoration-thickness": { "value": "2px" },
46
+ "text-decoration-line": { "value": "{amsterdam.link-appearance.regular.text-decoration-line}" },
47
+ "text-decoration-thickness": { "value": "{amsterdam.link-appearance.text-decoration-thickness}" },
48
+ "text-underline-offset": { "value": "{amsterdam.link-appearance.text-underline-offset}" },
54
49
  "hover": {
55
- "text-decoration-thickness": { "value": "3px" },
56
- "text-underline-offset": { "value": "7px" }
50
+ "text-decoration-thickness": {
51
+ "value": "{amsterdam.link-appearance.regular.hover.text-decoration-thickness}"
52
+ },
53
+ "text-underline-offset": { "value": "{amsterdam.link-appearance.regular.hover.text-underline-offset}" }
57
54
  },
58
- "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" },
59
- "narrow": {
60
- "font-size": { "value": "{amsterdam.typography.text-level.6.narrow.font-size}" }
55
+ "spacious": {
56
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" },
57
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" }
61
58
  },
62
- "wide": {
63
- "font-size": { "value": "{amsterdam.typography.text-level.6.wide.font-size}" }
59
+ "compact": {
60
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" },
61
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" }
64
62
  }
65
63
  },
66
64
  "on-background-dark": {
67
- "color": { "value": "{amsterdam.color.primary-white}" },
65
+ "color": { "value": "{amsterdam.link-appearance.on-background-dark.color}" },
68
66
  "hover": {
69
- "color": { "value": "{amsterdam.color.primary-white}" }
67
+ "color": { "value": "{amsterdam.link-appearance.on-background-dark.color}" }
70
68
  },
71
69
  "visited": {
72
- "color": { "value": "{amsterdam.color.primary-white}" }
70
+ "color": { "value": "{amsterdam.link-appearance.on-background-dark.color}" }
73
71
  }
74
72
  },
75
73
  "on-background-light": {
76
- "color": { "value": "{amsterdam.color.primary-black}" },
74
+ "color": { "value": "{amsterdam.link-appearance.on-background-light.color}" },
77
75
  "hover": {
78
- "color": { "value": "{amsterdam.color.primary-black}" }
76
+ "color": { "value": "{amsterdam.link-appearance.on-background-light.color}" }
79
77
  },
80
78
  "visited": {
81
- "color": { "value": "{amsterdam.color.primary-black}" }
79
+ "color": { "value": "{amsterdam.link-appearance.on-background-light.color}" }
82
80
  }
83
81
  }
84
82
  }
package/src/components/amsterdam/mark.tokens.json ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "amsterdam": {
3
+ "mark": {
4
+ "background-color": { "value": "var(--amsterdam-color-yellow)" }
5
+ }
6
+ }
7
+ }
package/src/components/amsterdam/ordered-list.tokens.json CHANGED
@@ -5,13 +5,14 @@
5
5
  "font-family": { "value": "{amsterdam.typography.font-family}" },
6
6
  "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
7
7
  "gap": { "value": "0.75rem" },
8
- "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" },
9
8
  "list-style-type": { "value": "decimal" },
10
- "narrow": {
11
- "font-size": { "value": "{amsterdam.typography.text-level.6.narrow.font-size}" }
9
+ "spacious": {
10
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" },
11
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" }
12
12
  },
13
- "wide": {
14
- "font-size": { "value": "{amsterdam.typography.text-level.6.wide.font-size}" }
13
+ "compact": {
14
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" },
15
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" }
15
16
  },
16
17
  "item": {
17
18
  "margin-inline-start": {
package/src/components/amsterdam/page-heading.tokens.json CHANGED
@@ -3,15 +3,16 @@
3
3
  "page-heading": {
4
4
  "color": { "value": "{amsterdam.color.primary-black}" },
5
5
  "font-family": { "value": "{amsterdam.typography.font-family}" },
6
- "line-height": { "value": "{amsterdam.typography.text-level.0.line-height}" },
7
- "narrow": {
8
- "font-size": { "value": "{amsterdam.typography.text-level.0.narrow.font-size}" }
9
- },
10
- "wide": {
11
- "font-size": { "value": "{amsterdam.typography.text-level.0.wide.font-size}" }
12
- },
13
6
  "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
14
- "inverse-color": { "value": "{amsterdam.color.primary-white}" }
7
+ "inverse-color": { "value": "{amsterdam.color.primary-white}" },
8
+ "spacious": {
9
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.0.font-size}" },
10
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.0.font-size}" }
11
+ },
12
+ "compact": {
13
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.0.font-size}" },
14
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.0.font-size}" }
15
+ }
15
16
  }
16
17
  }
17
18
  }
package/src/components/amsterdam/page-menu.tokens.json CHANGED
@@ -4,21 +4,25 @@
4
4
  "column-gap": { "value": "2.5rem" },
5
5
  "row-gap": { "value": "0.5rem" },
6
6
  "item": {
7
- "color": { "value": "{amsterdam.color.primary-black}" },
7
+ "color": { "value": "{amsterdam.link-appearance.color}" },
8
8
  "font-family": { "value": "{amsterdam.typography.font-family}" },
9
9
  "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
10
10
  "gap": { "value": "0.5rem" },
11
- "line-height": { "value": "{amsterdam.typography.text-level.7.line-height}" },
12
- "text-decoration": { "value": "none" },
13
- "narrow": {
14
- "font-size": { "value": "{amsterdam.typography.text-level.7.narrow.font-size}" }
11
+ "outline-offset": { "value": "{amsterdam.focus.outline-offset}" },
12
+ "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.text-decoration-line}" },
13
+ "text-decoration-thickness": { "value": "{amsterdam.link-appearance.text-decoration-thickness}" },
14
+ "text-underline-offset": { "value": "{amsterdam.link-appearance.text-underline-offset}" },
15
+ "spacious": {
16
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" },
17
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" }
15
18
  },
16
- "wide": {
17
- "font-size": { "value": "{amsterdam.typography.text-level.7.wide.font-size}" }
19
+ "compact": {
20
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" },
21
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" }
18
22
  },
19
23
  "hover": {
20
- "color": { "value": "{amsterdam.color.primary-black}" },
21
- "text-decoration": { "value": "underline" }
24
+ "color": { "value": "{amsterdam.link-appearance.hover.color}" },
25
+ "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.hover.text-decoration-line}" }
22
26
  }
23
27
  }
24
28
  }
package/src/components/amsterdam/pagination.tokens.json CHANGED
@@ -1,30 +1,29 @@
1
1
  {
2
2
  "amsterdam": {
3
3
  "pagination": {
4
- "color": { "value": "{amsterdam.color.primary-blue}" },
5
- "font-family": {
6
- "value": "{amsterdam.typography.font-family}"
4
+ "color": { "value": "{amsterdam.link-appearance.color}" },
5
+ "font-family": { "value": "{amsterdam.typography.font-family}" },
6
+ "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
7
+ "spacious": {
8
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" },
9
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" }
7
10
  },
8
- "font-weight": {
9
- "value": "{amsterdam.typography.font-weight.normal}"
10
- },
11
- "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" },
12
- "narrow": {
13
- "font-size": { "value": "{amsterdam.typography.text-level.6.narrow.font-size}" }
14
- },
15
- "wide": {
16
- "font-size": { "value": "{amsterdam.typography.text-level.6.wide.font-size}" }
11
+ "compact": {
12
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" },
13
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" }
17
14
  },
18
15
  "button": {
16
+ "outline-offset": { "value": "{amsterdam.focus.outline-offset}" },
17
+ "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.text-decoration-line}" },
18
+ "text-decoration-thickness": { "value": "{amsterdam.link-appearance.text-decoration-thickness}" },
19
+ "text-underline-offset": { "value": "{amsterdam.link-appearance.text-underline-offset}" },
19
20
  "current": {
20
- "font-weight": {
21
- "value": "{amsterdam.typography.font-weight.bold}"
22
- }
21
+ "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" }
23
22
  },
24
23
  "hover": {
25
- "color": { "value": "{amsterdam.color.dark-blue}" }
26
- },
27
- "outline-offset": { "value": "{amsterdam.focus.outline-offset}" }
24
+ "color": { "value": "{amsterdam.link-appearance.hover.color}" },
25
+ "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.hover.text-decoration-line}" }
26
+ }
28
27
  }
29
28
  }
30
29
  }
package/src/components/amsterdam/paragraph.tokens.json CHANGED
@@ -5,29 +5,32 @@
5
5
  "font-family": { "value": "{amsterdam.typography.font-family}" },
6
6
  "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
7
7
  "inverse-color": { "value": "{amsterdam.color.primary-white}" },
8
- "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" },
9
- "narrow": {
10
- "font-size": { "value": "{amsterdam.typography.text-level.6.narrow.font-size}" }
11
- },
12
- "wide": {
13
- "font-size": { "value": "{amsterdam.typography.text-level.6.wide.font-size}" }
14
- },
15
- "small": {
16
- "line-height": { "value": "{amsterdam.typography.text-level.7.line-height}" },
17
- "narrow": {
18
- "font-size": { "value": "{amsterdam.typography.text-level.7.narrow.font-size}" }
8
+ "spacious": {
9
+ "small": {
10
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" },
11
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" }
19
12
  },
20
- "wide": {
21
- "font-size": { "value": "{amsterdam.typography.text-level.7.wide.font-size}" }
13
+ "medium": {
14
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" },
15
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" }
16
+ },
17
+ "large": {
18
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.4.font-size}" },
19
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.4.line-height}" }
22
20
  }
23
21
  },
24
- "large": {
25
- "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" },
26
- "narrow": {
27
- "font-size": { "value": "{amsterdam.typography.text-level.5.narrow.font-size}" }
22
+ "compact": {
23
+ "small": {
24
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" },
25
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" }
26
+ },
27
+ "medium": {
28
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" },
29
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" }
28
30
  },
29
- "wide": {
30
- "font-size": { "value": "{amsterdam.typography.text-level.5.wide.font-size}" }
31
+ "large": {
32
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.4.font-size}" },
33
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.4.line-height}" }
31
34
  }
32
35
  }
33
36
  }
package/src/components/amsterdam/search-field.tokens.json ADDED
@@ -0,0 +1,47 @@
1
+ {
2
+ "amsterdam": {
3
+ "search-field": {
4
+ "button": {
5
+ "background-color": { "value": "{amsterdam.color.primary-blue}" },
6
+ "color": { "value": "{amsterdam.color.primary-white}" },
7
+ "outline-offset": { "value": "{amsterdam.focus.outline-offset}" },
8
+ "hover": {
9
+ "background-color": { "value": "{amsterdam.color.dark-blue}" }
10
+ }
11
+ },
12
+ "input": {
13
+ "box-shadow": {
14
+ "value": "inset 0 0 0 1px {amsterdam.color.primary-black}"
15
+ },
16
+ "color": { "value": "{amsterdam.color.primary-black}" },
17
+ "font-family": { "value": "{amsterdam.typography.font-family}" },
18
+ "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
19
+ "outline-offset": { "value": "{amsterdam.focus.outline-offset}" },
20
+ "cancel-button": {
21
+ "background-image": {
22
+ "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='M29.333 5.47 26.53 2.668 16 13.187 5.47 2.666 2.668 5.47 13.187 16 2.666 26.53l2.804 2.803L16 18.813l10.53 10.52 2.803-2.804L18.813 16z'/></svg>\")"
23
+ },
24
+ "color": { "value": "{amsterdam.color.primary-blue}" },
25
+ "height": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" },
26
+ "width": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" }
27
+ },
28
+ "hover": {
29
+ "box-shadow": {
30
+ "value": "inset 0 0 0 2px {amsterdam.color.primary-black}"
31
+ }
32
+ },
33
+ "placeholder": {
34
+ "color": { "value": "{amsterdam.color.neutral-grey3}" }
35
+ },
36
+ "compact": {
37
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" },
38
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" }
39
+ },
40
+ "spacious": {
41
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" },
42
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" }
43
+ }
44
+ }
45
+ }
46
+ }
47
+ }
package/src/components/amsterdam/skip-link.tokens.json ADDED
@@ -0,0 +1,20 @@
1
+ {
2
+ "amsterdam": {
3
+ "skip-link": {
4
+ "background-color": { "value": "{amsterdam.color.primary-blue}" },
5
+ "color": { "value": "{amsterdam.color.primary-white}" },
6
+ "font-family": { "value": "{amsterdam.typography.font-family}" },
7
+ "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
8
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" },
9
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" },
10
+ "outline-offset": { "value": "{amsterdam.focus.outline-offset}" },
11
+ "compact": {
12
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" },
13
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" }
14
+ },
15
+ "hover": {
16
+ "background-color": { "value": "{amsterdam.color.dark-blue}" }
17
+ }
18
+ }
19
+ }
20
+ }