@amsterdam/design-system-tokens 0.1.3 → 0.1.4

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 (32) hide show
  1. package/dist/_variables.scss +188 -93
  2. package/dist/index.css +188 -93
  3. package/dist/index.d.ts +183 -80
  4. package/dist/index.js +178 -83
  5. package/dist/index.json +177 -82
  6. package/dist/index.tokens.json +416 -183
  7. package/dist/root.css +188 -93
  8. package/dist/tokens.d.ts +411 -129
  9. package/dist/tokens.js +4089 -1901
  10. package/dist/variables.less +188 -93
  11. package/package.json +2 -2
  12. package/src/brand/amsterdam/typography.tokens.json +40 -24
  13. package/src/common/utrecht/action.tokens.json +12 -0
  14. package/src/common/utrecht/focus.tokens.json +7 -0
  15. package/src/components/amsterdam/accordion.tokens.json +6 -4
  16. package/src/components/amsterdam/blockquote.tokens.json +17 -0
  17. package/src/components/amsterdam/breadcrumb.tokens.json +42 -0
  18. package/src/components/amsterdam/button.tokens.json +34 -4
  19. package/src/components/amsterdam/checkbox.tokens.json +121 -0
  20. package/src/components/amsterdam/footer.tokens.json +11 -0
  21. package/src/components/amsterdam/form-label.tokens.json +7 -5
  22. package/src/components/amsterdam/heading.tokens.json +25 -16
  23. package/src/components/amsterdam/icon.tokens.json +10 -10
  24. package/src/components/amsterdam/link.tokens.json +38 -51
  25. package/src/components/amsterdam/ordered-list.tokens.json +41 -0
  26. package/src/components/amsterdam/page-grid.tokens.json +20 -0
  27. package/src/components/amsterdam/page-heading.tokens.json +17 -0
  28. package/src/components/amsterdam/page-menu.tokens.json +25 -0
  29. package/src/components/amsterdam/paragraph.tokens.json +19 -12
  30. package/src/components/amsterdam/top-task-link.tokens.json +34 -0
  31. package/src/components/amsterdam/unordered-list.tokens.json +25 -11
  32. package/src/components/utrecht/button.tokens.json +17 -27
package/src/components/amsterdam/button.tokens.json CHANGED
@@ -1,14 +1,44 @@
1
1
  {
2
2
  "amsterdam": {
3
3
  "button": {
4
- "font-size": {
5
- "narrow": { "value": "{amsterdam.typography.text-level.6.font-size.narrow}" },
6
- "wide": { "value": "{amsterdam.typography.text-level.6.font-size.wide}" }
4
+ "narrow": {
5
+ "font-size": { "value": "{amsterdam.typography.text-level.6.narrow.font-size}" }
6
+ },
7
+ "wide": {
8
+ "font-size": { "value": "{amsterdam.typography.text-level.6.wide.font-size}" }
7
9
  },
8
10
  "secondary": {
11
+ "box-shadow": {
12
+ "value": "inset 0 0 0 2px {amsterdam.color.primary-blue}"
13
+ },
14
+ "hover": {
15
+ "box-shadow": {
16
+ "value": "inset 0 0 0 3px {amsterdam.color.dark-blue}"
17
+ }
18
+ },
19
+ "disabled": {
20
+ "box-shadow": {
21
+ "value": "inset 0 0 0 2px {amsterdam.color.neutral-grey2}"
22
+ }
23
+ },
24
+ "focus": {
25
+ "box-shadow": {
26
+ "value": "inset 0 0 0 3px {amsterdam.color.dark-blue}"
27
+ },
28
+ "color": {
29
+ "value": "{amsterdam.color.dark-blue}"
30
+ }
31
+ }
32
+ },
33
+ "tertiary": {
9
34
  "hover": {
10
35
  "box-shadow": {
11
- "value": "0 0 0 1px {amsterdam.color.dark-blue}"
36
+ "value": "inset 0 0 0 2px {amsterdam.color.neutral-grey3}"
37
+ }
38
+ },
39
+ "focus": {
40
+ "box-shadow": {
41
+ "value": "inset 0 0 0 2px {amsterdam.color.neutral-grey3}"
12
42
  }
13
43
  }
14
44
  }
package/src/components/amsterdam/checkbox.tokens.json ADDED
@@ -0,0 +1,121 @@
1
+ {
2
+ "amsterdam": {
3
+ "checkbox": {
4
+ "color": {
5
+ "value": "{amsterdam.color.primary-black}"
6
+ },
7
+ "checkmark": {
8
+ "border-color": {
9
+ "value": "{amsterdam.color.primary-blue}"
10
+ },
11
+ "checked": {
12
+ "background-color": {
13
+ "value": "{amsterdam.color.primary-blue}"
14
+ },
15
+ "hover": {
16
+ "background-color": {
17
+ "value": "{amsterdam.color.dark-blue}"
18
+ }
19
+ }
20
+ },
21
+ "disabled": {
22
+ "border-color": {
23
+ "value": "{amsterdam.color.neutral-grey3}"
24
+ },
25
+ "checked": {
26
+ "background-color": {
27
+ "value": "{amsterdam.color.neutral-grey3}"
28
+ },
29
+ "hover": {
30
+ "background-color": {
31
+ "value": "{amsterdam.color.neutral-grey3}"
32
+ }
33
+ }
34
+ },
35
+ "indeterminate": {
36
+ "background-color": {
37
+ "value": "{amsterdam.color.neutral-grey3}"
38
+ },
39
+ "hover": {
40
+ "background-color": {
41
+ "value": "{amsterdam.color.neutral-grey3}"
42
+ }
43
+ }
44
+ }
45
+ },
46
+ "hover": {
47
+ "border-color": {
48
+ "value": "{amsterdam.color.dark-blue}"
49
+ }
50
+ },
51
+ "invalid": {
52
+ "border-color": {
53
+ "value": "{amsterdam.color.primary-red}"
54
+ },
55
+ "checked": {
56
+ "background-color": {
57
+ "value": "{amsterdam.color.primary-red}"
58
+ },
59
+ "hover": {
60
+ "background-color": {
61
+ "value": "{amsterdam.color.primary-red}"
62
+ }
63
+ }
64
+ },
65
+ "hover": {
66
+ "border-color": {
67
+ "value": "{amsterdam.color.primary-red}"
68
+ }
69
+ },
70
+ "indeterminate": {
71
+ "background-color": {
72
+ "value": "{amsterdam.color.primary-red}"
73
+ },
74
+ "hover": {
75
+ "background-color": {
76
+ "value": "{amsterdam.color.primary-red}"
77
+ }
78
+ }
79
+ }
80
+ },
81
+ "indeterminate": {
82
+ "background-color": {
83
+ "value": "{amsterdam.color.primary-blue}"
84
+ },
85
+ "hover": {
86
+ "background-color": {
87
+ "value": "{amsterdam.color.dark-blue}"
88
+ }
89
+ }
90
+ },
91
+ "narrow": {
92
+ "size": { "value": "{amsterdam.typography.text-level.6.narrow.font-size}" }
93
+ },
94
+ "wide": {
95
+ "size": { "value": "{amsterdam.typography.text-level.6.wide.font-size}" }
96
+ },
97
+ "multiplier": { "value": "{amsterdam.typography.text-level.6.line-height}" }
98
+ },
99
+ "disabled": {
100
+ "color": {
101
+ "value": "{amsterdam.color.neutral-grey3}"
102
+ }
103
+ },
104
+ "font-family": { "value": "{amsterdam.typography.font-family}" },
105
+ "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
106
+ "hover": {
107
+ "color": {
108
+ "value": "{amsterdam.color.dark-blue}"
109
+ }
110
+ },
111
+ "outline-offset": { "value": "{amsterdam.focus.outline-offset}" },
112
+ "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" },
113
+ "narrow": {
114
+ "font-size": { "value": "{amsterdam.typography.text-level.6.narrow.font-size}" }
115
+ },
116
+ "wide": {
117
+ "font-size": { "value": "{amsterdam.typography.text-level.6.wide.font-size}" }
118
+ }
119
+ }
120
+ }
121
+ }
package/src/components/amsterdam/footer.tokens.json ADDED
@@ -0,0 +1,11 @@
1
+ {
2
+ "amsterdam": {
3
+ "footer": {
4
+ "top": {
5
+ "background-color": {
6
+ "value": "{amsterdam.color.primary-blue}"
7
+ }
8
+ }
9
+ }
10
+ }
11
+ }
package/src/components/amsterdam/form-label.tokens.json CHANGED
@@ -3,12 +3,14 @@
3
3
  "form-label": {
4
4
  "color": { "value": "{amsterdam.color.primary-black}" },
5
5
  "font-family": { "value": "{amsterdam.typography.font-family}" },
6
- "font-size": {
7
- "narrow": { "value": "{amsterdam.typography.text-level.7.font-size.narrow}" },
8
- "wide": { "value": "{amsterdam.typography.text-level.7.font-size.wide}" }
9
- },
10
6
  "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
11
- "line-height": { "value": "{amsterdam.typography.text-level.7.line-height}" }
7
+ "line-height": { "value": "{amsterdam.typography.text-level.7.line-height}" },
8
+ "narrow": {
9
+ "font-size": { "value": "{amsterdam.typography.text-level.7.narrow.font-size}" }
10
+ },
11
+ "wide": {
12
+ "font-size": { "value": "{amsterdam.typography.text-level.7.wide.font-size}" }
13
+ }
12
14
  }
13
15
  }
14
16
  }
package/src/components/amsterdam/heading.tokens.json CHANGED
@@ -4,33 +4,42 @@
4
4
  "color": { "value": "{amsterdam.color.primary-black}" },
5
5
  "font-family": { "value": "{amsterdam.typography.font-family}" },
6
6
  "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
7
+ "inverse-color": { "value": "{amsterdam.color.primary-white}" },
7
8
  "1": {
8
- "font-size": {
9
- "narrow": { "value": "{amsterdam.typography.text-level.1.font-size.narrow}" },
10
- "wide": { "value": "{amsterdam.typography.text-level.1.font-size.wide}" }
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}" }
11
12
  },
12
- "line-height": { "value": "{amsterdam.typography.text-level.1.line-height}" }
13
+ "wide": {
14
+ "font-size": { "value": "{amsterdam.typography.text-level.1.wide.font-size}" }
15
+ }
13
16
  },
14
17
  "2": {
15
- "font-size": {
16
- "narrow": { "value": "{amsterdam.typography.text-level.2.font-size.narrow}" },
17
- "wide": { "value": "{amsterdam.typography.text-level.2.font-size.wide}" }
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}" }
18
21
  },
19
- "line-height": { "value": "{amsterdam.typography.text-level.2.line-height}" }
22
+ "wide": {
23
+ "font-size": { "value": "{amsterdam.typography.text-level.2.wide.font-size}" }
24
+ }
20
25
  },
21
26
  "3": {
22
- "font-size": {
23
- "narrow": { "value": "{amsterdam.typography.text-level.3.font-size.narrow}" },
24
- "wide": { "value": "{amsterdam.typography.text-level.3.font-size.wide}" }
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}" }
25
30
  },
26
- "line-height": { "value": "{amsterdam.typography.text-level.3.line-height}" }
31
+ "wide": {
32
+ "font-size": { "value": "{amsterdam.typography.text-level.3.wide.font-size}" }
33
+ }
27
34
  },
28
35
  "4": {
29
- "font-size": {
30
- "narrow": { "value": "{amsterdam.typography.text-level.4.font-size.narrow}" },
31
- "wide": { "value": "{amsterdam.typography.text-level.4.font-size.wide}" }
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}" }
32
39
  },
33
- "line-height": { "value": "{amsterdam.typography.text-level.4.line-height}" }
40
+ "wide": {
41
+ "font-size": { "value": "{amsterdam.typography.text-level.4.wide.font-size}" }
42
+ }
34
43
  }
35
44
  }
36
45
  }
package/src/components/amsterdam/icon.tokens.json CHANGED
@@ -3,36 +3,36 @@
3
3
  "icon": {
4
4
  "size-3": {
5
5
  "icon-size": {
6
- "narrow": { "value": "{amsterdam.typography.text-level.3.font-size.narrow}" },
7
- "wide": { "value": "{amsterdam.typography.text-level.3.font-size.wide}" }
6
+ "narrow": { "value": "{amsterdam.typography.text-level.3.narrow.font-size}" },
7
+ "wide": { "value": "{amsterdam.typography.text-level.3.wide.font-size}" }
8
8
  },
9
9
  "container-multiplier": { "value": "{amsterdam.typography.text-level.3.line-height}" }
10
10
  },
11
11
  "size-4": {
12
12
  "icon-size": {
13
- "narrow": { "value": "{amsterdam.typography.text-level.4.font-size.narrow}" },
14
- "wide": { "value": "{amsterdam.typography.text-level.4.font-size.wide}" }
13
+ "narrow": { "value": "{amsterdam.typography.text-level.4.narrow.font-size}" },
14
+ "wide": { "value": "{amsterdam.typography.text-level.4.wide.font-size}" }
15
15
  },
16
16
  "container-multiplier": { "value": "{amsterdam.typography.text-level.4.line-height}" }
17
17
  },
18
18
  "size-5": {
19
19
  "icon-size": {
20
- "narrow": { "value": "{amsterdam.typography.text-level.5.font-size.narrow}" },
21
- "wide": { "value": "{amsterdam.typography.text-level.5.font-size.wide}" }
20
+ "narrow": { "value": "{amsterdam.typography.text-level.5.narrow.font-size}" },
21
+ "wide": { "value": "{amsterdam.typography.text-level.5.wide.font-size}" }
22
22
  },
23
23
  "container-multiplier": { "value": "{amsterdam.typography.text-level.5.line-height}" }
24
24
  },
25
25
  "size-6": {
26
26
  "icon-size": {
27
- "narrow": { "value": "{amsterdam.typography.text-level.6.font-size.narrow}" },
28
- "wide": { "value": "{amsterdam.typography.text-level.6.font-size.wide}" }
27
+ "narrow": { "value": "{amsterdam.typography.text-level.6.narrow.font-size}" },
28
+ "wide": { "value": "{amsterdam.typography.text-level.6.wide.font-size}" }
29
29
  },
30
30
  "container-multiplier": { "value": "{amsterdam.typography.text-level.6.line-height}" }
31
31
  },
32
32
  "size-7": {
33
33
  "icon-size": {
34
- "narrow": { "value": "{amsterdam.typography.text-level.7.font-size.narrow}" },
35
- "wide": { "value": "{amsterdam.typography.text-level.7.font-size.wide}" }
34
+ "narrow": { "value": "{amsterdam.typography.text-level.7.narrow.font-size}" },
35
+ "wide": { "value": "{amsterdam.typography.text-level.7.wide.font-size}" }
36
36
  },
37
37
  "container-multiplier": { "value": "{amsterdam.typography.text-level.7.line-height}" }
38
38
  }
package/src/components/amsterdam/link.tokens.json CHANGED
@@ -3,68 +3,69 @@
3
3
  "link": {
4
4
  "color": { "value": "{amsterdam.color.primary-blue}" },
5
5
  "outline-offset": { "value": "{amsterdam.focus.outline-offset}" },
6
- "text-decoration": { "value": "none" },
7
- "text-underline-offset": { "value": "9px" },
8
- "text-decoration-thickness": { "value": "2px" },
9
6
  "font-family": {
10
7
  "value": "{amsterdam.typography.font-family}"
11
8
  },
12
- "font-size": {
13
- "narrow": { "value": "{amsterdam.typography.text-level.6.font-size.narrow}" },
14
- "wide": { "value": "{amsterdam.typography.text-level.6.font-size.wide}" }
15
- },
16
9
  "font-weight": {
17
10
  "value": "{amsterdam.typography.font-weight.normal}"
18
11
  },
19
12
  "focus": {
20
- "color": { "value": "{amsterdam.color.dark-blue}" },
21
- "text-decoration": { "value": "underline" }
22
- },
23
- "hover": {
24
- "color": { "value": "{amsterdam.color.dark-blue}" },
25
- "text-decoration": { "value": "underline" },
26
- "text-decoration-thickness": { "value": "2px" }
27
- },
28
- "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" },
29
- "visited": {
30
- "color": { "value": "{amsterdam.color.primary-blue}" }
31
- },
32
- "standalone-bold": {
33
- "font-weight": {
34
- "value": "{amsterdam.typography.font-weight.bold}"
35
- }
13
+ "color": { "value": "{amsterdam.color.dark-blue}" }
36
14
  },
37
15
  "inline": {
38
- "text-underline-offset": { "value": "3px" },
16
+ "focus": {
17
+ "text-decoration": { "value": "underline" },
18
+ "text-underline-offset": { "value": "3px" }
19
+ },
39
20
  "font-family": {
40
21
  "value": "inherit"
41
22
  },
42
23
  "font-size": {
43
24
  "value": "inherit"
44
25
  },
26
+ "line-height": {
27
+ "value": "inherit"
28
+ },
29
+ "text-decoration": { "value": "none" },
45
30
  "visited": {
46
31
  "color": { "value": "{amsterdam.color.purple}" }
47
32
  }
48
33
  },
49
34
  "in-list": {
50
35
  "gap": { "value": "0.5em" },
51
- "text-underline-offset": { "value": "0.3em" },
52
- "font-size": {
53
- "narrow": { "value": "{amsterdam.typography.text-level.7.font-size.narrow}" },
54
- "wide": { "value": "{amsterdam.typography.text-level.7.font-size.wide}" }
36
+ "focus": {
37
+ "text-decoration": { "value": "underline" },
38
+ "text-decoration-thickness": { "value": "2px" },
39
+ "text-underline-offset": { "value": "7px" }
40
+ },
41
+ "text-decoration": { "value": "none" },
42
+ "line-height": { "value": "{amsterdam.typography.text-level.7.line-height}" },
43
+ "narrow": {
44
+ "font-size": { "value": "{amsterdam.typography.text-level.7.narrow.font-size}" }
55
45
  },
56
- "line-height": { "value": "{amsterdam.typography.text-level.7.line-height}" }
46
+ "wide": {
47
+ "font-size": { "value": "{amsterdam.typography.text-level.7.wide.font-size}" }
48
+ }
57
49
  },
58
- "on-background-dark": {
59
- "color": { "value": "{amsterdam.color.primary-white}" },
60
- "text-decoration": { "value": "underline" },
50
+ "standalone": {
51
+ "text-underline-offset": { "value": "8px" },
52
+ "text-decoration-thickness": { "value": "2px" },
61
53
  "focus": {
62
- "color": { "value": "{amsterdam.color.primary-white}" },
63
- "text-decoration": { "value": "underline" }
54
+ "text-decoration-thickness": { "value": "3px" },
55
+ "text-underline-offset": { "value": "7px" }
56
+ },
57
+ "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" },
58
+ "narrow": {
59
+ "font-size": { "value": "{amsterdam.typography.text-level.6.narrow.font-size}" }
64
60
  },
61
+ "wide": {
62
+ "font-size": { "value": "{amsterdam.typography.text-level.6.wide.font-size}" }
63
+ }
64
+ },
65
+ "on-background-dark": {
66
+ "color": { "value": "{amsterdam.color.primary-white}" },
65
67
  "hover": {
66
- "color": { "value": "{amsterdam.color.primary-white}" },
67
- "text-decoration": { "value": "none" }
68
+ "color": { "value": "{amsterdam.color.primary-white}" }
68
69
  },
69
70
  "visited": {
70
71
  "color": { "value": "{amsterdam.color.primary-white}" }
@@ -72,22 +73,8 @@
72
73
  },
73
74
  "on-background-light": {
74
75
  "color": { "value": "{amsterdam.color.primary-black}" },
75
- "text-decoration": { "value": "underline" },
76
- "text-decoration-thickness": { "value": "2px" },
77
- "text-underline-offset": { "value": "9px" },
78
- "active": {
79
- "color": { "value": "{amsterdam.color.primary-black}" }
80
- },
81
- "font-size": {
82
- "value": "{amsterdam.typography.text-level.6.font-size}"
83
- },
84
- "focus": {
85
- "color": { "value": "{amsterdam.color.primary-black}" },
86
- "text-decoration": { "value": "underline" }
87
- },
88
76
  "hover": {
89
- "color": { "value": "{amsterdam.color.primary-black}" },
90
- "text-decoration": { "value": "none" }
77
+ "color": { "value": "{amsterdam.color.primary-black}" }
91
78
  },
92
79
  "visited": {
93
80
  "color": { "value": "{amsterdam.color.primary-black}" }
package/src/components/amsterdam/ordered-list.tokens.json ADDED
@@ -0,0 +1,41 @@
1
+ {
2
+ "amsterdam": {
3
+ "ordered-list": {
4
+ "color": { "value": "{amsterdam.color.primary-black}" },
5
+ "font-family": { "value": "{amsterdam.typography.font-family}" },
6
+ "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
7
+ "gap": { "value": "0.75rem" },
8
+ "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" },
9
+ "list-style-type": { "value": "decimal" },
10
+ "narrow": {
11
+ "font-size": { "value": "{amsterdam.typography.text-level.6.narrow.font-size}" }
12
+ },
13
+ "wide": {
14
+ "font-size": { "value": "{amsterdam.typography.text-level.6.wide.font-size}" }
15
+ },
16
+ "item": {
17
+ "margin-inline-start": {
18
+ "value": "2.25rem",
19
+ "comment": "Divide your total indentation width over margin and padding to position the marker."
20
+ },
21
+ "padding-inline-start": {
22
+ "value": "0.25rem",
23
+ "comment": "The total level 1 indentation for Amsterdam is 40 pixels, or 2.5rem."
24
+ }
25
+ },
26
+ "ordered-list": {
27
+ "list-style-type": { "value": "lower-alpha" },
28
+ "item": {
29
+ "margin-inline-start": {
30
+ "value": "1.5rem",
31
+ "comment": "Indent less than the parent to start-align the child’s marker with the parent text."
32
+ },
33
+ "padding-inline-start": {
34
+ "value": "0.25rem",
35
+ "comment": "The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem."
36
+ }
37
+ }
38
+ }
39
+ }
40
+ }
41
+ }
package/src/components/amsterdam/page-grid.tokens.json ADDED
@@ -0,0 +1,20 @@
1
+ {
2
+ "amsterdam": {
3
+ "page-grid": {
4
+ "column-count": {
5
+ "narrow": {
6
+ "value": "4"
7
+ },
8
+ "wide": {
9
+ "value": "12"
10
+ }
11
+ },
12
+ "column-gap": {
13
+ "value": "clamp(0.5rem, calc(0.5rem + 0.0142857143 * (100vw - 20rem)), 1.5rem)"
14
+ },
15
+ "max-width": {
16
+ "value": "1440px"
17
+ }
18
+ }
19
+ }
20
+ }
package/src/components/amsterdam/page-heading.tokens.json ADDED
@@ -0,0 +1,17 @@
1
+ {
2
+ "amsterdam": {
3
+ "page-heading": {
4
+ "color": { "value": "{amsterdam.color.primary-black}" },
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
+ "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
14
+ "inverse-color": { "value": "{amsterdam.color.primary-white}" }
15
+ }
16
+ }
17
+ }
package/src/components/amsterdam/page-menu.tokens.json ADDED
@@ -0,0 +1,25 @@
1
+ {
2
+ "amsterdam": {
3
+ "page-menu": {
4
+ "column-gap": { "value": "2.5rem" },
5
+ "row-gap": { "value": "0.5rem" },
6
+ "item": {
7
+ "color": { "value": "{amsterdam.color.primary-black}" },
8
+ "font-family": { "value": "{amsterdam.typography.font-family}" },
9
+ "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
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}" }
15
+ },
16
+ "wide": {
17
+ "font-size": { "value": "{amsterdam.typography.text-level.7.wide.font-size}" }
18
+ },
19
+ "hover": {
20
+ "color": { "value": "{amsterdam.color.dark-blue}" }
21
+ }
22
+ }
23
+ }
24
+ }
25
+ }
package/src/components/amsterdam/paragraph.tokens.json CHANGED
@@ -3,25 +3,32 @@
3
3
  "paragraph": {
4
4
  "color": { "value": "{amsterdam.color.primary-black}" },
5
5
  "font-family": { "value": "{amsterdam.typography.font-family}" },
6
- "font-size": {
7
- "narrow": { "value": "{amsterdam.typography.text-level.6.font-size.narrow}" },
8
- "wide": { "value": "{amsterdam.typography.text-level.6.font-size.wide}" }
9
- },
10
6
  "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
7
+ "inverse-color": { "value": "{amsterdam.color.primary-white}" },
11
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
+ },
12
15
  "small": {
13
- "font-size": {
14
- "narrow": { "value": "{amsterdam.typography.text-level.7.font-size.narrow}" },
15
- "wide": { "value": "{amsterdam.typography.text-level.7.font-size.wide}" }
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}" }
16
19
  },
17
- "line-height": { "value": "{amsterdam.typography.text-level.7.line-height}" }
20
+ "wide": {
21
+ "font-size": { "value": "{amsterdam.typography.text-level.7.wide.font-size}" }
22
+ }
18
23
  },
19
24
  "large": {
20
- "font-size": {
21
- "narrow": { "value": "{amsterdam.typography.text-level.5.font-size.narrow}" },
22
- "wide": { "value": "{amsterdam.typography.text-level.5.font-size.wide}" }
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}" }
23
28
  },
24
- "line-height": { "value": "{amsterdam.typography.text-level.5.line-height}" }
29
+ "wide": {
30
+ "font-size": { "value": "{amsterdam.typography.text-level.5.wide.font-size}" }
31
+ }
25
32
  }
26
33
  }
27
34
  }
package/src/components/amsterdam/top-task-link.tokens.json ADDED
@@ -0,0 +1,34 @@
1
+ {
2
+ "amsterdam": {
3
+ "top-task-link": {
4
+ "description": {
5
+ "color": { "value": "{amsterdam.color.primary-black}" },
6
+ "font-family": { "value": "{amsterdam.typography.font-family}" },
7
+ "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" },
8
+ "line-height": { "value": "{amsterdam.typography.text-level.7.line-height}" },
9
+ "narrow": {
10
+ "font-size": { "value": "{amsterdam.typography.text-level.7.narrow.font-size}" }
11
+ },
12
+ "wide": {
13
+ "font-size": { "value": "{amsterdam.typography.text-level.7.wide.font-size}" }
14
+ }
15
+ },
16
+ "label": {
17
+ "color": { "value": "{amsterdam.color.primary-blue}" },
18
+ "font-family": { "value": "{amsterdam.typography.font-family}" },
19
+ "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
20
+ "hover": {
21
+ "color": { "value": "{amsterdam.color.dark-blue}" }
22
+ },
23
+ "line-height": { "value": "{amsterdam.typography.text-level.4.line-height}" },
24
+ "narrow": {
25
+ "font-size": { "value": "{amsterdam.typography.text-level.4.narrow.font-size}" }
26
+ },
27
+ "wide": {
28
+ "font-size": { "value": "{amsterdam.typography.text-level.4.wide.font-size}" }
29
+ }
30
+ },
31
+ "outline-offset": { "value": "{amsterdam.focus.outline-offset}" }
32
+ }
33
+ }
34
+ }