@amsterdam/design-system-tokens 0.14.0 → 0.15.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.
- package/CHANGELOG.md +65 -0
- package/README.md +14 -7
- package/build.js +39 -16
- package/dist/compact.css +18 -18
- package/dist/compact.d.ts +18 -12
- package/dist/compact.json +21 -15
- package/dist/compact.mjs +21 -22
- package/dist/compact.scss +18 -18
- package/dist/compact.theme.css +18 -18
- package/dist/index.css +779 -766
- package/dist/index.d.ts +286 -283
- package/dist/index.json +589 -586
- package/dist/index.mjs +533 -509
- package/dist/index.scss +779 -766
- package/dist/index.theme.css +779 -766
- package/package.json +4 -3
- package/src/brand/ams/aspect-ratio.tokens.json +6 -6
- package/src/brand/ams/border.tokens.json +3 -3
- package/src/brand/ams/color.tokens.json +34 -15
- package/src/brand/ams/cursor.tokens.json +8 -0
- package/src/brand/ams/space.compact.tokens.json +6 -15
- package/src/brand/ams/space.tokens.json +5 -14
- package/src/brand/ams/{text.compact.tokens.json → typography.compact.tokens.json} +14 -2
- package/src/brand/ams/typography.tokens.json +59 -0
- package/src/common/ams/links.tokens.json +32 -0
- package/src/components/ams/accordion.tokens.json +11 -12
- package/src/components/ams/action-group.tokens.json +1 -1
- package/src/components/ams/alert.tokens.json +27 -15
- package/src/components/ams/avatar.tokens.json +23 -53
- package/src/components/ams/badge.tokens.json +22 -48
- package/src/components/ams/blockquote.tokens.json +8 -6
- package/src/components/ams/breadcrumb.tokens.json +10 -10
- package/src/components/ams/button.tokens.json +31 -33
- package/src/components/ams/card.tokens.json +8 -8
- package/src/components/ams/character-count.tokens.json +6 -6
- package/src/components/ams/checkbox.tokens.json +31 -29
- package/src/components/ams/column.tokens.json +5 -6
- package/src/components/ams/date-input.tokens.json +18 -16
- package/src/components/ams/description-list.tokens.json +21 -10
- package/src/components/ams/dialog.tokens.json +19 -8
- package/src/components/ams/error-message.tokens.json +5 -5
- package/src/components/ams/field-set.tokens.json +8 -8
- package/src/components/ams/field.tokens.json +3 -3
- package/src/components/ams/figure.tokens.json +9 -7
- package/src/components/ams/file-input.tokens.json +29 -26
- package/src/components/ams/file-list.tokens.json +8 -8
- package/src/components/ams/footer.tokens.json +23 -2
- package/src/components/ams/grid.compact.tokens.json +1 -1
- package/src/components/ams/grid.tokens.json +12 -10
- package/src/components/ams/header.tokens.json +23 -19
- package/src/components/ams/heading.tokens.json +29 -29
- package/src/components/ams/hint.tokens.json +1 -1
- package/src/components/ams/icon-button.tokens.json +18 -16
- package/src/components/ams/icon.tokens.json +24 -14
- package/src/components/ams/image-slider.tokens.json +1 -1
- package/src/components/ams/image.tokens.json +1 -1
- package/src/components/ams/{form-error-list.tokens.json → invalid-form-alert.tokens.json} +1 -1
- package/src/components/ams/label.tokens.json +5 -5
- package/src/components/ams/link-list.tokens.json +22 -22
- package/src/components/ams/link.tokens.json +20 -31
- package/src/components/ams/logo.tokens.json +10 -7
- package/src/components/ams/mark.tokens.json +1 -1
- package/src/components/ams/mega-menu.tokens.json +3 -3
- package/src/components/ams/ordered-list.tokens.json +13 -11
- package/src/components/ams/page-heading.tokens.json +8 -6
- package/src/components/ams/page-menu.tokens.json +13 -13
- package/src/components/ams/pagination.tokens.json +13 -13
- package/src/components/ams/paragraph.tokens.json +12 -10
- package/src/components/ams/password-input.tokens.json +17 -16
- package/src/components/ams/radio.tokens.json +30 -28
- package/src/components/ams/row.tokens.json +5 -6
- package/src/components/ams/screen.tokens.json +1 -1
- package/src/components/ams/search-field.tokens.json +17 -18
- package/src/components/ams/select.tokens.json +17 -16
- package/src/components/ams/skip-link.tokens.json +9 -9
- package/src/components/ams/spotlight.tokens.json +10 -10
- package/src/components/ams/switch.tokens.json +7 -6
- package/src/components/ams/table-of-contents.tokens.json +17 -17
- package/src/components/ams/table.tokens.json +10 -13
- package/src/components/ams/tabs.tokens.json +16 -20
- package/src/components/ams/text-area.tokens.json +18 -18
- package/src/components/ams/text-input.tokens.json +17 -16
- package/src/components/ams/time-input.tokens.json +18 -16
- package/src/components/ams/top-task-link.tokens.json +16 -16
- package/src/components/ams/unordered-list.tokens.json +15 -13
- package/src/brand/ams/text.tokens.json +0 -41
- package/src/common/ams/action.tokens.json +0 -12
- package/src/common/ams/hyphenation.tokens.json +0 -9
- package/src/common/ams/link-appearance.tokens.json +0 -43
- package/src/components/ams/breakout.tokens.json +0 -11
- package/src/components/ams/gap.tokens.json +0 -11
- package/src/components/ams/margin.tokens.json +0 -11
- /package/src/{common → brand}/ams/focus.tokens.json +0 -0
|
@@ -1,59 +1,48 @@
|
|
|
1
1
|
{
|
|
2
2
|
"ams": {
|
|
3
3
|
"link": {
|
|
4
|
-
"color": { "value": "{ams.
|
|
5
|
-
"font-family": { "value": "{ams.
|
|
6
|
-
"font-weight": { "value": "{ams.text.font-weight
|
|
4
|
+
"color": { "value": "{ams.links.color}" },
|
|
5
|
+
"font-family": { "value": "{ams.typography.font-family}" },
|
|
6
|
+
"font-weight": { "value": "{ams.typography.body-text.font-weight}" },
|
|
7
7
|
"outline-offset": { "value": "{ams.focus.outline-offset}" },
|
|
8
8
|
"hover": {
|
|
9
|
-
"color": { "value": "{ams.
|
|
9
|
+
"color": { "value": "{ams.links.hover.color}" }
|
|
10
10
|
},
|
|
11
11
|
"inline": {
|
|
12
|
-
"text-decoration-
|
|
13
|
-
"text-
|
|
14
|
-
"text-underline-offset": { "value": "{ams.link-appearance.text-underline-offset}" },
|
|
12
|
+
"text-decoration-thickness": { "value": "{ams.links.text-decoration-thickness}" },
|
|
13
|
+
"text-underline-offset": { "value": "{ams.links.text-underline-offset}" },
|
|
15
14
|
"font-family": { "value": "inherit" },
|
|
16
15
|
"font-size": { "value": "inherit" },
|
|
17
16
|
"line-height": { "value": "inherit" },
|
|
18
17
|
"hover": {
|
|
19
18
|
"text-decoration-thickness": {
|
|
20
|
-
"value": "{ams.
|
|
19
|
+
"value": "{ams.links.hover.text-decoration-thickness}"
|
|
21
20
|
},
|
|
22
|
-
"text-underline-offset": { "value": "{ams.
|
|
23
|
-
},
|
|
24
|
-
"visited": {
|
|
25
|
-
"color": { "value": "{ams.color.purple}" }
|
|
21
|
+
"text-underline-offset": { "value": "{ams.links.hover.text-underline-offset}" }
|
|
26
22
|
}
|
|
27
23
|
},
|
|
28
24
|
"standalone": {
|
|
29
|
-
"font-size": { "value": "{ams.text.
|
|
30
|
-
"line-height": { "value": "{ams.text.
|
|
31
|
-
"text-decoration-
|
|
32
|
-
"text-
|
|
33
|
-
"text-underline-offset": { "value": "{ams.link-appearance.text-underline-offset}" },
|
|
25
|
+
"font-size": { "value": "{ams.typography.body-text.font-size}" },
|
|
26
|
+
"line-height": { "value": "{ams.typography.body-text.line-height}" },
|
|
27
|
+
"text-decoration-thickness": { "value": "{ams.links.text-decoration-thickness}" },
|
|
28
|
+
"text-underline-offset": { "value": "{ams.links.text-underline-offset}" },
|
|
34
29
|
"hover": {
|
|
35
30
|
"text-decoration-thickness": {
|
|
36
|
-
"value": "{ams.
|
|
31
|
+
"value": "{ams.links.hover.text-decoration-thickness}"
|
|
37
32
|
},
|
|
38
|
-
"text-underline-offset": { "value": "{ams.
|
|
33
|
+
"text-underline-offset": { "value": "{ams.links.hover.text-underline-offset}" }
|
|
39
34
|
}
|
|
40
35
|
},
|
|
41
|
-
"contrast
|
|
42
|
-
"color": { "value": "{ams.
|
|
36
|
+
"contrast": {
|
|
37
|
+
"color": { "value": "{ams.links.contrast.color}" },
|
|
43
38
|
"hover": {
|
|
44
|
-
"color": { "value": "{ams.
|
|
45
|
-
},
|
|
46
|
-
"visited": {
|
|
47
|
-
"color": { "value": "{ams.link-appearance.contrast.visited.color}" }
|
|
39
|
+
"color": { "value": "{ams.links.contrast.hover.color}" }
|
|
48
40
|
}
|
|
49
41
|
},
|
|
50
|
-
"inverse
|
|
51
|
-
"color": { "value": "{ams.
|
|
42
|
+
"inverse": {
|
|
43
|
+
"color": { "value": "{ams.links.inverse.color}" },
|
|
52
44
|
"hover": {
|
|
53
|
-
"color": { "value": "{ams.
|
|
54
|
-
},
|
|
55
|
-
"visited": {
|
|
56
|
-
"color": { "value": "{ams.link-appearance.inverse.visited.color}" }
|
|
45
|
+
"color": { "value": "{ams.links.inverse.hover.color}" }
|
|
57
46
|
}
|
|
58
47
|
}
|
|
59
48
|
}
|
|
@@ -1,14 +1,17 @@
|
|
|
1
1
|
{
|
|
2
2
|
"ams": {
|
|
3
3
|
"logo": {
|
|
4
|
-
"block-size": {
|
|
5
|
-
"value": "clamp(1rem, calc(0.375rem + 3.125vw), 3.5rem)",
|
|
6
|
-
"comment": "This is the same size as Grid space medium"
|
|
7
|
-
},
|
|
8
|
-
"emblem": { "color": { "value": "{ams.color.primary-red}" } },
|
|
4
|
+
"block-size": { "value": "{ams.space.xl}" },
|
|
9
5
|
"min-block-size": { "value": "2.5rem" },
|
|
10
|
-
"
|
|
11
|
-
|
|
6
|
+
"emblem": {
|
|
7
|
+
"color": { "value": "#ec0000" }
|
|
8
|
+
},
|
|
9
|
+
"subsite": {
|
|
10
|
+
"color": { "value": "{ams.color.text.default}" }
|
|
11
|
+
},
|
|
12
|
+
"title": {
|
|
13
|
+
"color": { "value": "#ec0000" }
|
|
14
|
+
}
|
|
12
15
|
}
|
|
13
16
|
}
|
|
14
17
|
}
|
|
@@ -3,13 +3,13 @@
|
|
|
3
3
|
"mega-menu": {
|
|
4
4
|
"list-category": {
|
|
5
5
|
"column-gap": {
|
|
6
|
-
"value": "{ams.space.
|
|
6
|
+
"value": "{ams.space.xl}",
|
|
7
7
|
"comment": "Must have the same value as `ams.grid.column-gap`."
|
|
8
8
|
},
|
|
9
9
|
"column-width": { "value": "20rem" },
|
|
10
|
-
"padding-block-start": { "value": "{ams.space.
|
|
10
|
+
"padding-block-start": { "value": "{ams.space.m}" },
|
|
11
11
|
"padding-block-end": {
|
|
12
|
-
"value": "{ams.space.
|
|
12
|
+
"value": "{ams.space.xl}",
|
|
13
13
|
"comment": "Must have the same value as `ams.grid.row-gap.md`."
|
|
14
14
|
}
|
|
15
15
|
}
|
|
@@ -1,17 +1,19 @@
|
|
|
1
1
|
{
|
|
2
2
|
"ams": {
|
|
3
3
|
"ordered-list": {
|
|
4
|
-
"color": { "value": "{ams.color.
|
|
5
|
-
"font-family": { "value": "{ams.
|
|
6
|
-
"font-size": { "value": "{ams.text.
|
|
7
|
-
"font-weight": { "value": "{ams.text.font-weight
|
|
8
|
-
"gap": { "value": "{ams.space.
|
|
9
|
-
"
|
|
10
|
-
"line-height": { "value": "{ams.text.level.5.line-height}" },
|
|
4
|
+
"color": { "value": "{ams.color.text.default}" },
|
|
5
|
+
"font-family": { "value": "{ams.typography.font-family}" },
|
|
6
|
+
"font-size": { "value": "{ams.typography.body-text.font-size}" },
|
|
7
|
+
"font-weight": { "value": "{ams.typography.body-text.font-weight}" },
|
|
8
|
+
"gap": { "value": "{ams.space.m}" },
|
|
9
|
+
"line-height": { "value": "{ams.typography.body-text.line-height}" },
|
|
11
10
|
"list-style-type": { "value": "decimal" },
|
|
12
11
|
"small": {
|
|
13
|
-
"font-size": { "value": "{ams.text.
|
|
14
|
-
"line-height": { "value": "{ams.text.
|
|
12
|
+
"font-size": { "value": "{ams.typography.body-text.small.font-size}" },
|
|
13
|
+
"line-height": { "value": "{ams.typography.body-text.small.line-height}" }
|
|
14
|
+
},
|
|
15
|
+
"inverse": {
|
|
16
|
+
"color": { "value": "{ams.color.text.inverse}" }
|
|
15
17
|
},
|
|
16
18
|
"item": {
|
|
17
19
|
"margin-inline-start": {
|
|
@@ -24,10 +26,10 @@
|
|
|
24
26
|
}
|
|
25
27
|
},
|
|
26
28
|
"ordered-list": {
|
|
27
|
-
"gap": { "value": "{ams.space.
|
|
29
|
+
"gap": { "value": "{ams.space.s}" },
|
|
28
30
|
"list-style-type": { "value": "lower-alpha" },
|
|
29
31
|
"padding-block-end": { "value": "0" },
|
|
30
|
-
"padding-block-start": { "value": "{ams.space.
|
|
32
|
+
"padding-block-start": { "value": "{ams.space.s}" },
|
|
31
33
|
"item": {
|
|
32
34
|
"margin-inline-start": {
|
|
33
35
|
"value": "1.5rem",
|
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"ams": {
|
|
3
3
|
"page-heading": {
|
|
4
|
-
"color": { "value": "{ams.color.
|
|
5
|
-
"font-family": { "value": "{ams.
|
|
6
|
-
"font-size": { "value": "{ams.
|
|
7
|
-
"font-weight": { "value": "{ams.
|
|
8
|
-
"
|
|
9
|
-
"
|
|
4
|
+
"color": { "value": "{ams.color.text.default}" },
|
|
5
|
+
"font-family": { "value": "{ams.typography.font-family}" },
|
|
6
|
+
"font-size": { "value": "{ams.typography.heading.0.font-size}" },
|
|
7
|
+
"font-weight": { "value": "{ams.typography.heading.font-weight}" },
|
|
8
|
+
"line-height": { "value": "{ams.typography.heading.0.line-height}" },
|
|
9
|
+
"inverse": {
|
|
10
|
+
"color": { "value": "{ams.color.text.inverse}" }
|
|
11
|
+
}
|
|
10
12
|
}
|
|
11
13
|
}
|
|
12
14
|
}
|
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
{
|
|
2
2
|
"ams": {
|
|
3
3
|
"page-menu": {
|
|
4
|
-
"column-gap": { "value": "{ams.space.
|
|
5
|
-
"row-gap": { "value": "{ams.space.
|
|
4
|
+
"column-gap": { "value": "{ams.space.xl}" },
|
|
5
|
+
"row-gap": { "value": "{ams.space.m}" },
|
|
6
6
|
"item": {
|
|
7
|
-
"color": { "value": "{ams.
|
|
8
|
-
"font-family": { "value": "{ams.
|
|
9
|
-
"font-size": { "value": "{ams.text.
|
|
10
|
-
"font-weight": { "value": "{ams.text.font-weight
|
|
11
|
-
"gap": { "value": "{ams.space.
|
|
12
|
-
"line-height": { "value": "{ams.text.
|
|
7
|
+
"color": { "value": "{ams.links.color}" },
|
|
8
|
+
"font-family": { "value": "{ams.typography.font-family}" },
|
|
9
|
+
"font-size": { "value": "{ams.typography.body-text.small.font-size}" },
|
|
10
|
+
"font-weight": { "value": "{ams.typography.body-text.font-weight}" },
|
|
11
|
+
"gap": { "value": "{ams.space.s}" },
|
|
12
|
+
"line-height": { "value": "{ams.typography.body-text.small.line-height}" },
|
|
13
13
|
"outline-offset": { "value": "{ams.focus.outline-offset}" },
|
|
14
|
-
"text-decoration-line": { "value": "{ams.
|
|
15
|
-
"text-decoration-thickness": { "value": "{ams.
|
|
16
|
-
"text-underline-offset": { "value": "{ams.
|
|
14
|
+
"text-decoration-line": { "value": "{ams.links.subtle.text-decoration-line}" },
|
|
15
|
+
"text-decoration-thickness": { "value": "{ams.links.text-decoration-thickness}" },
|
|
16
|
+
"text-underline-offset": { "value": "{ams.links.text-underline-offset}" },
|
|
17
17
|
"hover": {
|
|
18
|
-
"color": { "value": "{ams.
|
|
19
|
-
"text-decoration-line": { "value": "{ams.
|
|
18
|
+
"color": { "value": "{ams.links.hover.color}" },
|
|
19
|
+
"text-decoration-line": { "value": "{ams.links.subtle.hover.text-decoration-line}" }
|
|
20
20
|
}
|
|
21
21
|
}
|
|
22
22
|
}
|
|
@@ -1,24 +1,24 @@
|
|
|
1
1
|
{
|
|
2
2
|
"ams": {
|
|
3
3
|
"pagination": {
|
|
4
|
-
"
|
|
5
|
-
"font-
|
|
6
|
-
"font-
|
|
7
|
-
"
|
|
8
|
-
"
|
|
9
|
-
|
|
4
|
+
"font-family": { "value": "{ams.typography.font-family}" },
|
|
5
|
+
"font-size": { "value": "{ams.typography.body-text.font-size}" },
|
|
6
|
+
"font-weight": { "value": "{ams.typography.body-text.font-weight}" },
|
|
7
|
+
"line-height": { "value": "{ams.typography.body-text.line-height}" },
|
|
8
|
+
"link": {
|
|
9
|
+
"color": { "value": "{ams.links.color}" },
|
|
10
10
|
"gap": { "value": "{ams.space.xs}" },
|
|
11
11
|
"outline-offset": { "value": "{ams.focus.outline-offset}" },
|
|
12
|
-
"padding-inline": { "value": "{ams.space.
|
|
13
|
-
"text-decoration-line": { "value": "{ams.
|
|
14
|
-
"text-decoration-thickness": { "value": "{ams.
|
|
15
|
-
"text-underline-offset": { "value": "{ams.
|
|
12
|
+
"padding-inline": { "value": "{ams.space.s}" },
|
|
13
|
+
"text-decoration-line": { "value": "{ams.links.subtle.text-decoration-line}" },
|
|
14
|
+
"text-decoration-thickness": { "value": "{ams.links.text-decoration-thickness}" },
|
|
15
|
+
"text-underline-offset": { "value": "{ams.links.text-underline-offset}" },
|
|
16
16
|
"current": {
|
|
17
|
-
"font-weight": { "value": "{ams.text.font-weight
|
|
17
|
+
"font-weight": { "value": "{ams.typography.body-text.bold.font-weight}" }
|
|
18
18
|
},
|
|
19
19
|
"hover": {
|
|
20
|
-
"color": { "value": "{ams.
|
|
21
|
-
"text-decoration-line": { "value": "{ams.
|
|
20
|
+
"color": { "value": "{ams.links.hover.color}" },
|
|
21
|
+
"text-decoration-line": { "value": "{ams.links.subtle.hover.text-decoration-line}" }
|
|
22
22
|
}
|
|
23
23
|
}
|
|
24
24
|
}
|
|
@@ -1,19 +1,21 @@
|
|
|
1
1
|
{
|
|
2
2
|
"ams": {
|
|
3
3
|
"paragraph": {
|
|
4
|
-
"color": { "value": "{ams.color.
|
|
5
|
-
"font-family": { "value": "{ams.
|
|
6
|
-
"font-size": { "value": "{ams.text.
|
|
7
|
-
"font-weight": { "value": "{ams.text.font-weight
|
|
8
|
-
"line-height": { "value": "{ams.text.
|
|
9
|
-
"inverse
|
|
4
|
+
"color": { "value": "{ams.color.text.default}" },
|
|
5
|
+
"font-family": { "value": "{ams.typography.font-family}" },
|
|
6
|
+
"font-size": { "value": "{ams.typography.body-text.font-size}" },
|
|
7
|
+
"font-weight": { "value": "{ams.typography.body-text.font-weight}" },
|
|
8
|
+
"line-height": { "value": "{ams.typography.body-text.line-height}" },
|
|
9
|
+
"inverse": {
|
|
10
|
+
"color": { "value": "{ams.color.text.inverse}" }
|
|
11
|
+
},
|
|
10
12
|
"small": {
|
|
11
|
-
"font-size": { "value": "{ams.text.
|
|
12
|
-
"line-height": { "value": "{ams.text.
|
|
13
|
+
"font-size": { "value": "{ams.typography.body-text.small.font-size}" },
|
|
14
|
+
"line-height": { "value": "{ams.typography.body-text.small.line-height}" }
|
|
13
15
|
},
|
|
14
16
|
"large": {
|
|
15
|
-
"font-size": { "value": "{ams.text.
|
|
16
|
-
"line-height": { "value": "{ams.text.
|
|
17
|
+
"font-size": { "value": "{ams.typography.body-text.large.font-size}" },
|
|
18
|
+
"line-height": { "value": "{ams.typography.body-text.large.line-height}" }
|
|
17
19
|
}
|
|
18
20
|
}
|
|
19
21
|
}
|
|
@@ -1,32 +1,33 @@
|
|
|
1
1
|
{
|
|
2
2
|
"ams": {
|
|
3
3
|
"password-input": {
|
|
4
|
-
"background-color": { "value": "{ams.color.
|
|
5
|
-
"box-shadow": { "value": "inset 0 0 0 {ams.border.width.
|
|
6
|
-
"color": { "value": "{ams.color.
|
|
7
|
-
"font-family": { "value": "{ams.
|
|
8
|
-
"font-size": { "value": "{ams.text.
|
|
9
|
-
"font-weight": { "value": "{ams.text.font-weight
|
|
10
|
-
"line-height": { "value": "{ams.text.
|
|
4
|
+
"background-color": { "value": "{ams.color.background}" },
|
|
5
|
+
"box-shadow": { "value": "inset 0 0 0 {ams.border.width.s} {ams.color.interactive.secondary}" },
|
|
6
|
+
"color": { "value": "{ams.color.text.default}" },
|
|
7
|
+
"font-family": { "value": "{ams.typography.font-family}" },
|
|
8
|
+
"font-size": { "value": "{ams.typography.body-text.font-size}" },
|
|
9
|
+
"font-weight": { "value": "{ams.typography.body-text.font-weight}" },
|
|
10
|
+
"line-height": { "value": "{ams.typography.body-text.line-height}" },
|
|
11
11
|
"outline-offset": { "value": "{ams.focus.outline-offset}" },
|
|
12
|
-
"padding-block": { "value": "{ams.space.
|
|
13
|
-
"padding-inline": { "value": "{ams.space.
|
|
12
|
+
"padding-block": { "value": "{ams.space.s}" },
|
|
13
|
+
"padding-inline": { "value": "{ams.space.m}" },
|
|
14
14
|
"disabled": {
|
|
15
|
-
"background-color": { "value": "{ams.color.
|
|
16
|
-
"box-shadow": { "value": "inset 0 0 0 {ams.border.width.
|
|
17
|
-
"color": { "value": "{ams.color.
|
|
15
|
+
"background-color": { "value": "{ams.color.background}" },
|
|
16
|
+
"box-shadow": { "value": "inset 0 0 0 {ams.border.width.s} {ams.color.interactive.disabled}" },
|
|
17
|
+
"color": { "value": "{ams.color.interactive.disabled}" },
|
|
18
|
+
"cursor": { "value": "{ams.cursor.disabled}" }
|
|
18
19
|
},
|
|
19
20
|
"hover": {
|
|
20
|
-
"box-shadow": { "value": "inset 0 0 0 {ams.border.width.
|
|
21
|
+
"box-shadow": { "value": "inset 0 0 0 {ams.border.width.m} {ams.color.interactive.secondary}" }
|
|
21
22
|
},
|
|
22
23
|
"invalid": {
|
|
23
|
-
"box-shadow": { "value": "inset 0 0 0 {ams.border.width.
|
|
24
|
+
"box-shadow": { "value": "inset 0 0 0 {ams.border.width.s} {ams.color.interactive.invalid.default}" },
|
|
24
25
|
"hover": {
|
|
25
|
-
"box-shadow": { "value": "inset 0 0 0 {ams.border.width.
|
|
26
|
+
"box-shadow": { "value": "inset 0 0 0 {ams.border.width.m} {ams.color.interactive.invalid.hover}" }
|
|
26
27
|
}
|
|
27
28
|
},
|
|
28
29
|
"placeholder": {
|
|
29
|
-
"color": { "value": "{ams.color.
|
|
30
|
+
"color": { "value": "{ams.color.text.secondary}" }
|
|
30
31
|
}
|
|
31
32
|
}
|
|
32
33
|
}
|
|
@@ -1,76 +1,78 @@
|
|
|
1
1
|
{
|
|
2
2
|
"ams": {
|
|
3
3
|
"radio": {
|
|
4
|
-
"color": { "value": "{ams.color.
|
|
5
|
-
"
|
|
6
|
-
"font-
|
|
7
|
-
"font-
|
|
8
|
-
"
|
|
9
|
-
"
|
|
4
|
+
"color": { "value": "{ams.color.text.default}" },
|
|
5
|
+
"cursor": { "value": "{ams.cursor.interactive}" },
|
|
6
|
+
"font-family": { "value": "{ams.typography.font-family}" },
|
|
7
|
+
"font-size": { "value": "{ams.typography.body-text.font-size}" },
|
|
8
|
+
"font-weight": { "value": "{ams.typography.body-text.font-weight}" },
|
|
9
|
+
"gap": { "value": "{ams.space.s}" },
|
|
10
|
+
"line-height": { "value": "{ams.typography.body-text.line-height}" },
|
|
10
11
|
"outline-offset": { "value": "{ams.focus.outline-offset}" },
|
|
11
|
-
"text-decoration-thickness": { "value": "{ams.
|
|
12
|
-
"text-underline-offset": { "value": "{ams.
|
|
12
|
+
"text-decoration-thickness": { "value": "{ams.links.text-decoration-thickness}" },
|
|
13
|
+
"text-underline-offset": { "value": "{ams.links.text-underline-offset}" },
|
|
13
14
|
"checked-indicator": {
|
|
14
|
-
"fill": { "value": "{ams.color.
|
|
15
|
+
"fill": { "value": "{ams.color.interactive.default}" },
|
|
15
16
|
"disabled": {
|
|
16
|
-
"fill": { "value": "{ams.color.
|
|
17
|
+
"fill": { "value": "{ams.color.interactive.disabled}" }
|
|
17
18
|
},
|
|
18
19
|
"disabled-invalid": {
|
|
19
|
-
"fill": { "value": "{ams.color.
|
|
20
|
+
"fill": { "value": "{ams.color.interactive.disabled}" },
|
|
20
21
|
"hover": {
|
|
21
|
-
"fill": { "value": "{ams.color.
|
|
22
|
+
"fill": { "value": "{ams.color.interactive.disabled}" }
|
|
22
23
|
}
|
|
23
24
|
},
|
|
24
25
|
"hover": {
|
|
25
|
-
"fill": { "value": "{ams.color.
|
|
26
|
+
"fill": { "value": "{ams.color.interactive.hover}" }
|
|
26
27
|
},
|
|
27
28
|
"invalid": {
|
|
28
|
-
"fill": { "value": "{ams.color.
|
|
29
|
+
"fill": { "value": "{ams.color.interactive.invalid.default}" },
|
|
29
30
|
"hover": {
|
|
30
|
-
"fill": { "value": "{ams.color.
|
|
31
|
+
"fill": { "value": "{ams.color.interactive.invalid.hover}" }
|
|
31
32
|
}
|
|
32
33
|
}
|
|
33
34
|
},
|
|
34
35
|
"hover-indicator": {
|
|
35
36
|
"stroke-width": { "value": "3px" },
|
|
36
37
|
"hover": {
|
|
37
|
-
"stroke": { "value": "{ams.color.
|
|
38
|
+
"stroke": { "value": "{ams.color.interactive.hover}" }
|
|
38
39
|
},
|
|
39
40
|
"invalid": {
|
|
40
41
|
"hover": {
|
|
41
|
-
"stroke": { "value": "{ams.color.
|
|
42
|
+
"stroke": { "value": "{ams.color.interactive.invalid.hover}" }
|
|
42
43
|
}
|
|
43
44
|
}
|
|
44
45
|
},
|
|
45
46
|
"circle": {
|
|
46
|
-
"fill": { "value": "{ams.color.
|
|
47
|
-
"stroke": { "value": "{ams.color.
|
|
47
|
+
"fill": { "value": "{ams.color.background}" },
|
|
48
|
+
"stroke": { "value": "{ams.color.interactive.default}" },
|
|
48
49
|
"stroke-width": { "value": "2px" },
|
|
49
50
|
"disabled": {
|
|
50
|
-
"stroke": { "value": "{ams.color.
|
|
51
|
+
"stroke": { "value": "{ams.color.interactive.disabled}" }
|
|
51
52
|
},
|
|
52
53
|
"disabled-invalid": {
|
|
53
|
-
"stroke": { "value": "{ams.color.
|
|
54
|
+
"stroke": { "value": "{ams.color.interactive.disabled}" },
|
|
54
55
|
"hover": {
|
|
55
|
-
"stroke": { "value": "{ams.color.
|
|
56
|
+
"stroke": { "value": "{ams.color.interactive.disabled}" }
|
|
56
57
|
}
|
|
57
58
|
},
|
|
58
59
|
"hover": {
|
|
59
|
-
"stroke": { "value": "{ams.color.
|
|
60
|
+
"stroke": { "value": "{ams.color.interactive.hover}" }
|
|
60
61
|
},
|
|
61
62
|
"invalid": {
|
|
62
|
-
"stroke": { "value": "{ams.color.
|
|
63
|
+
"stroke": { "value": "{ams.color.interactive.invalid.default}" },
|
|
63
64
|
"hover": {
|
|
64
|
-
"stroke": { "value": "{ams.color.
|
|
65
|
+
"stroke": { "value": "{ams.color.interactive.invalid.hover}" }
|
|
65
66
|
}
|
|
66
67
|
}
|
|
67
68
|
},
|
|
68
69
|
"disabled": {
|
|
69
|
-
"color": { "value": "{ams.color.
|
|
70
|
+
"color": { "value": "{ams.color.interactive.disabled}" },
|
|
71
|
+
"cursor": { "value": "{ams.cursor.disabled}" }
|
|
70
72
|
},
|
|
71
73
|
"hover": {
|
|
72
|
-
"color": { "value": "{ams.color.
|
|
73
|
-
"text-decoration-line": { "value": "{ams.
|
|
74
|
+
"color": { "value": "{ams.color.interactive.hover}" },
|
|
75
|
+
"text-decoration-line": { "value": "{ams.links.subtle.hover.text-decoration-line}" }
|
|
74
76
|
},
|
|
75
77
|
"icon-container": {
|
|
76
78
|
"block-size": { "value": "calc({ams.radio.font-size} * {ams.radio.line-height})" },
|
|
@@ -2,12 +2,11 @@
|
|
|
2
2
|
"ams": {
|
|
3
3
|
"row": {
|
|
4
4
|
"gap": {
|
|
5
|
-
"
|
|
6
|
-
"
|
|
7
|
-
"
|
|
8
|
-
"
|
|
9
|
-
"
|
|
10
|
-
"xl": { "value": "{ams.space.xl}" }
|
|
5
|
+
"x-small": { "value": "{ams.space.xs}" },
|
|
6
|
+
"small": { "value": "{ams.space.s}" },
|
|
7
|
+
"medium": { "value": "{ams.space.m}" },
|
|
8
|
+
"large": { "value": "{ams.space.l}" },
|
|
9
|
+
"x-large": { "value": "{ams.space.xl}" }
|
|
11
10
|
}
|
|
12
11
|
}
|
|
13
12
|
}
|
|
@@ -2,37 +2,36 @@
|
|
|
2
2
|
"ams": {
|
|
3
3
|
"search-field": {
|
|
4
4
|
"input": {
|
|
5
|
-
"background-color": { "value": "{ams.color.
|
|
6
|
-
"box-shadow": { "value": "inset 0 0 0 {ams.border.width.
|
|
7
|
-
"color": { "value": "{ams.color.
|
|
8
|
-
"font-family": { "value": "{ams.
|
|
9
|
-
"font-size": { "value": "{ams.text.
|
|
10
|
-
"font-weight": { "value": "{ams.text.font-weight
|
|
11
|
-
"line-height": { "value": "{ams.text.
|
|
5
|
+
"background-color": { "value": "{ams.color.background}" },
|
|
6
|
+
"box-shadow": { "value": "inset 0 0 0 {ams.border.width.s} {ams.color.interactive.secondary}" },
|
|
7
|
+
"color": { "value": "{ams.color.text.default}" },
|
|
8
|
+
"font-family": { "value": "{ams.typography.font-family}" },
|
|
9
|
+
"font-size": { "value": "{ams.typography.body-text.font-size}" },
|
|
10
|
+
"font-weight": { "value": "{ams.typography.body-text.font-weight}" },
|
|
11
|
+
"line-height": { "value": "{ams.typography.body-text.line-height}" },
|
|
12
12
|
"outline-offset": { "value": "{ams.focus.outline-offset}" },
|
|
13
|
-
"padding-block": { "value": "{ams.space.
|
|
14
|
-
"padding-inline": { "value": "{ams.space.
|
|
13
|
+
"padding-block": { "value": "{ams.space.s}" },
|
|
14
|
+
"padding-inline": { "value": "{ams.space.m}" },
|
|
15
15
|
"cancel-button": {
|
|
16
16
|
"background-image": {
|
|
17
17
|
"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>\")"
|
|
18
18
|
},
|
|
19
|
-
"block-size": { "value": "{ams.text.
|
|
20
|
-
"color": { "value": "{ams.color.
|
|
21
|
-
"
|
|
19
|
+
"block-size": { "value": "{ams.typography.body-text.font-size}" },
|
|
20
|
+
"color": { "value": "{ams.color.interactive.default}" },
|
|
21
|
+
"cursor": { "value": "{ams.cursor.interactive}" },
|
|
22
|
+
"inline-size": { "value": "{ams.typography.body-text.font-size}" }
|
|
22
23
|
},
|
|
23
24
|
"hover": {
|
|
24
|
-
"box-shadow": {
|
|
25
|
-
"value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-black}"
|
|
26
|
-
}
|
|
25
|
+
"box-shadow": { "value": "inset 0 0 0 {ams.border.width.m} {ams.color.interactive.secondary}" }
|
|
27
26
|
},
|
|
28
27
|
"invalid": {
|
|
29
|
-
"box-shadow": { "value": "inset 0 0 0 {ams.border.width.
|
|
28
|
+
"box-shadow": { "value": "inset 0 0 0 {ams.border.width.s} {ams.color.interactive.invalid.default}" },
|
|
30
29
|
"hover": {
|
|
31
|
-
"box-shadow": { "value": "inset 0 0 0 {ams.border.width.
|
|
30
|
+
"box-shadow": { "value": "inset 0 0 0 {ams.border.width.m} {ams.color.interactive.invalid.hover}" }
|
|
32
31
|
}
|
|
33
32
|
},
|
|
34
33
|
"placeholder": {
|
|
35
|
-
"color": { "value": "{ams.color.
|
|
34
|
+
"color": { "value": "{ams.color.text.secondary}" }
|
|
36
35
|
}
|
|
37
36
|
}
|
|
38
37
|
}
|
|
@@ -1,39 +1,40 @@
|
|
|
1
1
|
{
|
|
2
2
|
"ams": {
|
|
3
3
|
"select": {
|
|
4
|
-
"background-color": { "value": "{ams.color.
|
|
4
|
+
"background-color": { "value": "{ams.color.background}" },
|
|
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.
|
|
9
|
-
"box-shadow": { "value": "inset 0 0 0 {ams.border.width.
|
|
10
|
-
"color": { "value": "{ams.color.
|
|
11
|
-
"font-family": { "value": "{ams.
|
|
12
|
-
"font-size": { "value": "{ams.text.
|
|
13
|
-
"font-weight": { "value": "{ams.text.font-weight
|
|
14
|
-
"line-height": { "value": "{ams.text.
|
|
8
|
+
"background-position": { "value": "right {ams.space.m} center" },
|
|
9
|
+
"box-shadow": { "value": "inset 0 0 0 {ams.border.width.s} {ams.color.interactive.secondary}" },
|
|
10
|
+
"color": { "value": "{ams.color.text.default}" },
|
|
11
|
+
"font-family": { "value": "{ams.typography.font-family}" },
|
|
12
|
+
"font-size": { "value": "{ams.typography.body-text.font-size}" },
|
|
13
|
+
"font-weight": { "value": "{ams.typography.body-text.font-weight}" },
|
|
14
|
+
"line-height": { "value": "{ams.typography.body-text.line-height}" },
|
|
15
15
|
"outline-offset": { "value": "{ams.focus.outline-offset}" },
|
|
16
|
-
"padding-block": { "value": "{ams.space.
|
|
17
|
-
"padding-inline": { "value": "{ams.space.
|
|
16
|
+
"padding-block": { "value": "{ams.space.s}" },
|
|
17
|
+
"padding-inline": { "value": "{ams.space.m} calc(2 * {ams.space.m} + 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>\")"
|
|
21
21
|
},
|
|
22
|
-
"box-shadow": { "value": "inset 0 0 0 {ams.border.width.
|
|
23
|
-
"color": { "value": "{ams.color.
|
|
22
|
+
"box-shadow": { "value": "inset 0 0 0 {ams.border.width.s} {ams.color.interactive.disabled}" },
|
|
23
|
+
"color": { "value": "{ams.color.interactive.disabled}" },
|
|
24
|
+
"cursor": { "value": "{ams.cursor.disabled}" }
|
|
24
25
|
},
|
|
25
26
|
"hover": {
|
|
26
|
-
"box-shadow": { "value": "inset 0 0 0 {ams.border.width.
|
|
27
|
+
"box-shadow": { "value": "inset 0 0 0 {ams.border.width.m} {ams.color.interactive.secondary}" }
|
|
27
28
|
},
|
|
28
29
|
"invalid": {
|
|
29
|
-
"box-shadow": { "value": "inset 0 0 0 {ams.border.width.
|
|
30
|
+
"box-shadow": { "value": "inset 0 0 0 {ams.border.width.s} {ams.color.interactive.invalid.default}" },
|
|
30
31
|
"hover": {
|
|
31
|
-
"box-shadow": { "value": "inset 0 0 0 {ams.border.width.
|
|
32
|
+
"box-shadow": { "value": "inset 0 0 0 {ams.border.width.m} {ams.color.interactive.invalid.hover}" }
|
|
32
33
|
}
|
|
33
34
|
},
|
|
34
35
|
"option": {
|
|
35
36
|
"disabled": {
|
|
36
|
-
"color": { "value": "{ams.color.
|
|
37
|
+
"color": { "value": "{ams.color.interactive.disabled}" }
|
|
37
38
|
}
|
|
38
39
|
}
|
|
39
40
|
}
|