@amsterdam/design-system-tokens 0.1.8 → 0.2.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 (35) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/_variables.scss +218 -154
  3. package/dist/index.css +218 -154
  4. package/dist/index.d.ts +200 -136
  5. package/dist/index.js +205 -141
  6. package/dist/index.json +204 -140
  7. package/dist/index.tokens.json +336 -269
  8. package/dist/root.css +218 -154
  9. package/dist/tokens.d.ts +324 -257
  10. package/dist/tokens.js +3343 -1864
  11. package/dist/variables.less +218 -154
  12. package/package.json +2 -2
  13. package/src/brand/amsterdam/typography.tokens.json +70 -84
  14. package/src/common/amsterdam/link-appearance.tokens.json +31 -0
  15. package/src/components/amsterdam/accordion.tokens.json +8 -7
  16. package/src/components/amsterdam/alert.tokens.json +6 -5
  17. package/src/components/amsterdam/blockquote.tokens.json +6 -5
  18. package/src/components/amsterdam/breadcrumb.tokens.json +19 -34
  19. package/src/components/amsterdam/button.tokens.json +6 -4
  20. package/src/components/amsterdam/card.tokens.json +6 -2
  21. package/src/components/amsterdam/checkbox.tokens.json +7 -13
  22. package/src/components/amsterdam/dialog.tokens.json +6 -5
  23. package/src/components/amsterdam/form-label.tokens.json +6 -5
  24. package/src/components/amsterdam/grid.tokens.json +2 -2
  25. package/src/components/amsterdam/heading.tokens.json +44 -28
  26. package/src/components/amsterdam/icon.tokens.json +37 -28
  27. package/src/components/amsterdam/link.tokens.json +41 -33
  28. package/src/components/amsterdam/ordered-list.tokens.json +6 -5
  29. package/src/components/amsterdam/page-heading.tokens.json +17 -8
  30. package/src/components/amsterdam/page-menu.tokens.json +13 -9
  31. package/src/components/amsterdam/pagination.tokens.json +17 -18
  32. package/src/components/amsterdam/paragraph.tokens.json +22 -19
  33. package/src/components/amsterdam/top-task-link.tokens.json +25 -47
  34. package/src/components/amsterdam/unordered-list.tokens.json +6 -5
  35. package/src/components/utrecht/button.tokens.json +1 -3
@@ -1,22 +1,21 @@
1
1
  {
2
2
  "amsterdam": {
3
3
  "link": {
4
- "color": { "value": "{amsterdam.color.primary-blue}" },
5
- "outline-offset": { "value": "{amsterdam.focus.outline-offset}" },
4
+ "color": { "value": "{amsterdam.link-appearance.color}" },
6
5
  "font-family": {
7
6
  "value": "{amsterdam.typography.font-family}"
8
7
  },
9
8
  "font-weight": {
10
9
  "value": "{amsterdam.typography.font-weight.normal}"
11
10
  },
11
+ "outline-offset": { "value": "{amsterdam.focus.outline-offset}" },
12
12
  "hover": {
13
- "color": { "value": "{amsterdam.color.dark-blue}" }
13
+ "color": { "value": "{amsterdam.link-appearance.hover.color}" }
14
14
  },
15
15
  "inline": {
16
- "hover": {
17
- "text-decoration": { "value": "underline" },
18
- "text-underline-offset": { "value": "3px" }
19
- },
16
+ "text-decoration-line": { "value": "{amsterdam.link-appearance.regular.text-decoration-line}" },
17
+ "text-decoration-thickness": { "value": "{amsterdam.link-appearance.text-decoration-thickness}" },
18
+ "text-underline-offset": { "value": "{amsterdam.link-appearance.text-underline-offset}" },
20
19
  "font-family": {
21
20
  "value": "inherit"
22
21
  },
@@ -26,59 +25,68 @@
26
25
  "line-height": {
27
26
  "value": "inherit"
28
27
  },
29
- "text-decoration": { "value": "none" },
30
- "text-decoration-thickness": { "value": "2px" },
28
+ "hover": {
29
+ "text-decoration-thickness": {
30
+ "value": "{amsterdam.link-appearance.regular.hover.text-decoration-thickness}"
31
+ },
32
+ "text-underline-offset": { "value": "{amsterdam.link-appearance.regular.hover.text-underline-offset}" }
33
+ },
31
34
  "visited": {
32
35
  "color": { "value": "{amsterdam.color.purple}" }
33
36
  }
34
37
  },
35
38
  "in-list": {
36
39
  "gap": { "value": "0.5em" },
40
+ "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.text-decoration-line}" },
41
+ "text-decoration-thickness": { "value": "{amsterdam.link-appearance.text-decoration-thickness}" },
42
+ "text-underline-offset": { "value": "{amsterdam.link-appearance.text-underline-offset}" },
37
43
  "hover": {
38
- "text-decoration": { "value": "underline" },
39
- "text-decoration-thickness": { "value": "2px" },
40
- "text-underline-offset": { "value": "7px" }
44
+ "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.hover.text-decoration-line}" }
41
45
  },
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}" }
46
+ "spacious": {
47
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" },
48
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" }
46
49
  },
47
- "wide": {
48
- "font-size": { "value": "{amsterdam.typography.text-level.7.wide.font-size}" }
50
+ "compact": {
51
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" },
52
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" }
49
53
  }
50
54
  },
51
55
  "standalone": {
52
- "text-underline-offset": { "value": "8px" },
53
- "text-decoration-thickness": { "value": "2px" },
56
+ "text-decoration-line": { "value": "{amsterdam.link-appearance.regular.text-decoration-line}" },
57
+ "text-decoration-thickness": { "value": "{amsterdam.link-appearance.text-decoration-thickness}" },
58
+ "text-underline-offset": { "value": "{amsterdam.link-appearance.text-underline-offset}" },
54
59
  "hover": {
55
- "text-decoration-thickness": { "value": "3px" },
56
- "text-underline-offset": { "value": "7px" }
60
+ "text-decoration-thickness": {
61
+ "value": "{amsterdam.link-appearance.regular.hover.text-decoration-thickness}"
62
+ },
63
+ "text-underline-offset": { "value": "{amsterdam.link-appearance.regular.hover.text-underline-offset}" }
57
64
  },
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}" }
65
+ "spacious": {
66
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" },
67
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" }
61
68
  },
62
- "wide": {
63
- "font-size": { "value": "{amsterdam.typography.text-level.6.wide.font-size}" }
69
+ "compact": {
70
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" },
71
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" }
64
72
  }
65
73
  },
66
74
  "on-background-dark": {
67
- "color": { "value": "{amsterdam.color.primary-white}" },
75
+ "color": { "value": "{amsterdam.link-appearance.on-background-dark.color}" },
68
76
  "hover": {
69
- "color": { "value": "{amsterdam.color.primary-white}" }
77
+ "color": { "value": "{amsterdam.link-appearance.on-background-dark.color}" }
70
78
  },
71
79
  "visited": {
72
- "color": { "value": "{amsterdam.color.primary-white}" }
80
+ "color": { "value": "{amsterdam.link-appearance.on-background-dark.color}" }
73
81
  }
74
82
  },
75
83
  "on-background-light": {
76
- "color": { "value": "{amsterdam.color.primary-black}" },
84
+ "color": { "value": "{amsterdam.link-appearance.on-background-light.color}" },
77
85
  "hover": {
78
- "color": { "value": "{amsterdam.color.primary-black}" }
86
+ "color": { "value": "{amsterdam.link-appearance.on-background-light.color}" }
79
87
  },
80
88
  "visited": {
81
- "color": { "value": "{amsterdam.color.primary-black}" }
89
+ "color": { "value": "{amsterdam.link-appearance.on-background-light.color}" }
82
90
  }
83
91
  }
84
92
  }
@@ -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.6.font-size}" },
11
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.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.6.font-size}" },
15
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" }
15
16
  },
16
17
  "item": {
17
18
  "margin-inline-start": {
@@ -3,15 +3,24 @@
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": {
10
+ "value": "{amsterdam.typography.spacious.text-level.0.font-size}"
11
+ },
12
+ "line-height": {
13
+ "value": "{amsterdam.typography.spacious.text-level.0.font-size}"
14
+ }
15
+ },
16
+ "compact": {
17
+ "font-size": {
18
+ "value": "{amsterdam.typography.compact.text-level.0.font-size}"
19
+ },
20
+ "line-height": {
21
+ "value": "{amsterdam.typography.compact.text-level.0.font-size}"
22
+ }
23
+ }
15
24
  }
16
25
  }
17
26
  }
@@ -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.7.font-size}" },
17
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.7.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.7.font-size}" },
21
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.7.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
  }
@@ -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.6.font-size}" },
9
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.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.6.font-size}" },
13
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.6.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
  }
@@ -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.7.font-size}" },
11
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.7.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.6.font-size}" },
15
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" }
16
+ },
17
+ "large": {
18
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" },
19
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.5.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.7.font-size}" },
25
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.7.line-height}" }
26
+ },
27
+ "medium": {
28
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" },
29
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.6.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.5.font-size}" },
33
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" }
31
34
  }
32
35
  }
33
36
  }
@@ -2,61 +2,39 @@
2
2
  "amsterdam": {
3
3
  "top-task-link": {
4
4
  "description": {
5
- "color": {
6
- "value": "{amsterdam.color.primary-black}"
7
- },
8
- "font-family": {
9
- "value": "{amsterdam.typography.font-family}"
10
- },
11
- "font-weight": {
12
- "value": "{amsterdam.typography.font-weight.normal}"
13
- },
14
- "line-height": {
15
- "value": "{amsterdam.typography.text-level.7.line-height}"
16
- },
17
- "narrow": {
18
- "font-size": {
19
- "value": "{amsterdam.typography.text-level.7.narrow.font-size}"
20
- }
21
- },
22
- "wide": {
23
- "font-size": {
24
- "value": "{amsterdam.typography.text-level.7.wide.font-size}"
25
- }
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
+ "spacious": {
9
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.7.font-size}" },
10
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.7.line-height}" }
11
+ },
12
+ "compact": {
13
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.7.font-size}" },
14
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.7.line-height}" }
26
15
  }
27
16
  },
28
17
  "label": {
29
- "color": {
30
- "value": "{amsterdam.color.primary-blue}"
31
- },
32
- "font-family": {
33
- "value": "{amsterdam.typography.font-family}"
34
- },
35
- "font-weight": {
36
- "value": "{amsterdam.typography.font-weight.bold}"
37
- },
18
+ "color": { "value": "{amsterdam.link-appearance.color}" },
19
+ "font-family": { "value": "{amsterdam.typography.font-family}" },
20
+ "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
21
+ "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.text-decoration-line}" },
22
+ "text-decoration-thickness": { "value": "{amsterdam.link-appearance.text-decoration-thickness}" },
23
+ "text-underline-offset": { "value": "{amsterdam.link-appearance.text-underline-offset}" },
38
24
  "hover": {
39
- "color": {
40
- "value": "{amsterdam.color.dark-blue}"
41
- }
42
- },
43
- "line-height": {
44
- "value": "{amsterdam.typography.text-level.4.line-height}"
25
+ "color": { "value": "{amsterdam.color.dark-blue}" },
26
+ "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.hover.text-decoration-line}" }
45
27
  },
46
- "narrow": {
47
- "font-size": {
48
- "value": "{amsterdam.typography.text-level.4.narrow.font-size}"
49
- }
28
+ "spacious": {
29
+ "font-size": { "value": "{amsterdam.typography.spacious.text-level.4.font-size}" },
30
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.4.line-height}" }
50
31
  },
51
- "wide": {
52
- "font-size": {
53
- "value": "{amsterdam.typography.text-level.4.wide.font-size}"
54
- }
32
+ "compact": {
33
+ "font-size": { "value": "{amsterdam.typography.compact.text-level.4.font-size}" },
34
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.4.line-height}" }
55
35
  }
56
36
  },
57
- "outline-offset": {
58
- "value": "{amsterdam.focus.outline-offset}"
59
- }
37
+ "outline-offset": { "value": "{amsterdam.focus.outline-offset}" }
60
38
  }
61
39
  }
62
40
  }
@@ -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": "'\\2022'" },
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.6.font-size}" },
11
+ "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.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.6.font-size}" },
15
+ "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" }
15
16
  },
16
17
  "item": {
17
18
  "margin-inline-start": {
@@ -14,9 +14,7 @@
14
14
  "value": "{amsterdam.typography.font-family}"
15
15
  },
16
16
  "font-size": {},
17
- "line-height": {
18
- "value": "{amsterdam.typography.text-level.6.line-height}"
19
- },
17
+ "line-height": {},
20
18
  "padding-inline-start": {
21
19
  "value": "{amsterdam.spacing.inset.md}"
22
20
  },