@amsterdam/design-system-tokens 0.13.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 +89 -1
- package/README.md +27 -14
- package/build.js +42 -13
- package/dist/compact.css +18 -18
- package/dist/compact.d.ts +44 -38
- package/dist/compact.json +21 -15
- package/dist/compact.mjs +27 -18
- package/dist/compact.scss +18 -18
- package/dist/compact.theme.css +18 -18
- package/dist/index.css +789 -744
- package/dist/index.d.ts +1544 -1473
- package/dist/index.json +687 -616
- package/dist/index.mjs +900 -636
- package/dist/index.scss +789 -744
- package/dist/index.theme.css +789 -744
- package/package.json +4 -3
- package/src/brand/ams/aspect-ratio.tokens.json +12 -0
- 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 +26 -19
- 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 +6 -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 +17 -0
- package/src/components/ams/file-input.tokens.json +29 -26
- package/src/components/ams/file-list.tokens.json +21 -0
- package/src/components/ams/footer.tokens.json +30 -0
- 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 +50 -4
- 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 +25 -12
- package/src/components/ams/image-slider.tokens.json +1 -1
- package/src/components/ams/image.tokens.json +7 -0
- 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 +11 -4
- 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 +40 -25
- 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 -28
- 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 -15
- 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 -10
- package/src/components/ams/tabs.tokens.json +16 -17
- 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/proportion.tokens.json +0 -12
- 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/aspect-ratio.tokens.json +0 -12
- 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,33 +1,33 @@
|
|
|
1
1
|
{
|
|
2
2
|
"ams": {
|
|
3
3
|
"table-of-contents": {
|
|
4
|
-
"font-family": { "value": "{ams.
|
|
5
|
-
"font-size": { "value": "{ams.text.
|
|
6
|
-
"font-weight": { "value": "{ams.text.font-weight
|
|
7
|
-
"gap": { "value": "{ams.space.
|
|
8
|
-
"line-height": { "value": "{ams.text.
|
|
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
|
+
"gap": { "value": "{ams.space.m}" },
|
|
8
|
+
"line-height": { "value": "{ams.typography.body-text.line-height}" },
|
|
9
9
|
"link": {
|
|
10
|
-
"color": { "value": "{ams.
|
|
10
|
+
"color": { "value": "{ams.links.color}" },
|
|
11
11
|
"outline-offset": { "value": "{ams.focus.outline-offset}" },
|
|
12
|
-
"text-decoration-line": { "value": "{ams.
|
|
13
|
-
"text-decoration-thickness": { "value": "{ams.
|
|
14
|
-
"text-underline-offset": { "value": "{ams.
|
|
12
|
+
"text-decoration-line": { "value": "{ams.links.subtle.text-decoration-line}" },
|
|
13
|
+
"text-decoration-thickness": { "value": "{ams.links.text-decoration-thickness}" },
|
|
14
|
+
"text-underline-offset": { "value": "{ams.links.text-underline-offset}" },
|
|
15
15
|
"hover": {
|
|
16
|
-
"color": { "value": "{ams.
|
|
17
|
-
"text-decoration-line": { "value": "{ams.
|
|
16
|
+
"color": { "value": "{ams.links.hover.color}" },
|
|
17
|
+
"text-decoration-line": { "value": "{ams.links.subtle.hover.text-decoration-line}" }
|
|
18
18
|
}
|
|
19
19
|
},
|
|
20
20
|
"list": {
|
|
21
|
-
"gap": { "value": "{ams.space.
|
|
21
|
+
"gap": { "value": "{ams.space.s}" },
|
|
22
22
|
"list": {
|
|
23
|
-
"padding-block-start": { "value": "{ams.space.
|
|
24
|
-
"padding-inline-start": { "value": "{ams.space.
|
|
23
|
+
"padding-block-start": { "value": "{ams.space.s}" },
|
|
24
|
+
"padding-inline-start": { "value": "{ams.space.l}" }
|
|
25
25
|
}
|
|
26
26
|
},
|
|
27
27
|
"heading": {
|
|
28
|
-
"font-weight": { "value": "{ams.
|
|
29
|
-
"font-size": { "value": "{ams.
|
|
30
|
-
"line-height": { "value": "{ams.
|
|
28
|
+
"font-weight": { "value": "{ams.typography.heading.font-weight}" },
|
|
29
|
+
"font-size": { "value": "{ams.typography.heading.4.font-size}" },
|
|
30
|
+
"line-height": { "value": "{ams.typography.heading.4.line-height}" }
|
|
31
31
|
}
|
|
32
32
|
}
|
|
33
33
|
}
|
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
{
|
|
2
2
|
"ams": {
|
|
3
3
|
"table": {
|
|
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.
|
|
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
9
|
"caption": {
|
|
10
|
-
"font-weight": { "value": "{ams.text.font-weight
|
|
10
|
+
"font-weight": { "value": "{ams.typography.body-text.bold.font-weight}" }
|
|
11
11
|
},
|
|
12
12
|
"cell": {
|
|
13
|
-
"border-block-end": { "value": "{ams.border.width.
|
|
14
|
-
"padding-block": { "value": "{ams.space.
|
|
15
|
-
"padding-inline": { "value": "{ams.space.
|
|
13
|
+
"border-block-end": { "value": "{ams.border.width.s} solid {ams.color.separator}" },
|
|
14
|
+
"padding-block": { "value": "{ams.space.s}" },
|
|
15
|
+
"padding-inline": { "value": "{ams.space.m}" }
|
|
16
16
|
},
|
|
17
17
|
"header-cell": {
|
|
18
|
-
"font-weight": { "value": "{ams.text.font-weight
|
|
18
|
+
"font-weight": { "value": "{ams.typography.body-text.bold.font-weight}" }
|
|
19
19
|
}
|
|
20
20
|
}
|
|
21
21
|
}
|
|
@@ -1,32 +1,31 @@
|
|
|
1
1
|
{
|
|
2
2
|
"ams": {
|
|
3
3
|
"tabs": {
|
|
4
|
-
"gap": { "value": "{ams.space.
|
|
4
|
+
"gap": { "value": "{ams.space.m}" },
|
|
5
5
|
"list": {
|
|
6
|
-
"
|
|
7
|
-
"border-block-end": { "value": "{ams.border.width.md} solid {ams.color.primary-blue}" }
|
|
6
|
+
"box-shadow": { "value": "inset 0 calc({ams.border.width.m} * -1) {ams.color.separator}" }
|
|
8
7
|
},
|
|
9
8
|
"button": {
|
|
10
|
-
"color": { "value": "{ams.color.
|
|
11
|
-
"cursor": { "value": "{ams.
|
|
12
|
-
"font-family": { "value": "{ams.
|
|
13
|
-
"font-size": { "value": "{ams.text.
|
|
14
|
-
"font-weight": { "value": "{ams.text.font-weight
|
|
15
|
-
"line-height": { "value": "{ams.text.
|
|
9
|
+
"color": { "value": "{ams.color.interactive.default}" },
|
|
10
|
+
"cursor": { "value": "{ams.cursor.interactive}" },
|
|
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}" },
|
|
16
15
|
"outline-offset": { "value": "-0.25rem" },
|
|
17
|
-
"padding-block": { "value": "{ams.space.
|
|
18
|
-
"padding-inline": { "value": "{ams.space.
|
|
16
|
+
"padding-block": { "value": "{ams.space.s}" },
|
|
17
|
+
"padding-inline": { "value": "{ams.space.m}" },
|
|
19
18
|
"hover": {
|
|
20
|
-
"color": { "value": "{ams.color.
|
|
21
|
-
"box-shadow": { "value": "inset 0
|
|
19
|
+
"color": { "value": "{ams.color.interactive.hover}" },
|
|
20
|
+
"box-shadow": { "value": "inset 0 calc({ams.border.width.m} * -1)" }
|
|
22
21
|
},
|
|
23
22
|
"selected": {
|
|
24
|
-
"
|
|
25
|
-
"
|
|
23
|
+
"box-shadow": { "value": "inset 0 calc({ams.border.width.xl} * -1)" },
|
|
24
|
+
"font-weight": { "value": "{ams.typography.body-text.bold.font-weight}" }
|
|
26
25
|
},
|
|
27
26
|
"disabled": {
|
|
28
|
-
"color": { "value": "{ams.color.
|
|
29
|
-
"cursor": { "value": "{ams.
|
|
27
|
+
"color": { "value": "{ams.color.interactive.disabled}" },
|
|
28
|
+
"cursor": { "value": "{ams.cursor.disabled}" }
|
|
30
29
|
}
|
|
31
30
|
}
|
|
32
31
|
}
|
|
@@ -1,36 +1,36 @@
|
|
|
1
1
|
{
|
|
2
2
|
"ams": {
|
|
3
3
|
"text-area": {
|
|
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
|
"min-block-size": {
|
|
12
|
-
"value": "calc({ams.text.
|
|
12
|
+
"value": "calc({ams.typography.body-text.line-height} * 1em + 2 * {ams.text-area.padding-block})"
|
|
13
13
|
},
|
|
14
14
|
"outline-offset": { "value": "{ams.focus.outline-offset}" },
|
|
15
|
-
"padding-block": { "value": "{ams.space.
|
|
16
|
-
"padding-inline": { "value": "{ams.space.
|
|
15
|
+
"padding-block": { "value": "{ams.space.s}" },
|
|
16
|
+
"padding-inline": { "value": "{ams.space.m}" },
|
|
17
17
|
"disabled": {
|
|
18
|
-
"background-color": { "value": "{ams.color.
|
|
19
|
-
"box-shadow": { "value": "inset 0 0 0 {ams.border.width.
|
|
20
|
-
"color": { "value": "{ams.color.
|
|
21
|
-
"cursor": { "value": "{ams.
|
|
18
|
+
"background-color": { "value": "{ams.color.background}" },
|
|
19
|
+
"box-shadow": { "value": "inset 0 0 0 {ams.border.width.s} {ams.color.interactive.disabled}" },
|
|
20
|
+
"color": { "value": "{ams.color.interactive.disabled}" },
|
|
21
|
+
"cursor": { "value": "{ams.cursor.disabled}" }
|
|
22
22
|
},
|
|
23
23
|
"hover": {
|
|
24
|
-
"box-shadow": { "value": "inset 0 0 0 {ams.border.width.
|
|
24
|
+
"box-shadow": { "value": "inset 0 0 0 {ams.border.width.m} {ams.color.interactive.secondary}" }
|
|
25
25
|
},
|
|
26
26
|
"invalid": {
|
|
27
|
-
"box-shadow": { "value": "inset 0 0 0 {ams.border.width.
|
|
27
|
+
"box-shadow": { "value": "inset 0 0 0 {ams.border.width.s} {ams.color.interactive.invalid.default}" },
|
|
28
28
|
"hover": {
|
|
29
|
-
"box-shadow": { "value": "inset 0 0 0 {ams.border.width.
|
|
29
|
+
"box-shadow": { "value": "inset 0 0 0 {ams.border.width.m} {ams.color.interactive.invalid.hover}" }
|
|
30
30
|
}
|
|
31
31
|
},
|
|
32
32
|
"placeholder": {
|
|
33
|
-
"color": { "value": "{ams.color.
|
|
33
|
+
"color": { "value": "{ams.color.text.secondary}" }
|
|
34
34
|
}
|
|
35
35
|
}
|
|
36
36
|
}
|
|
@@ -1,32 +1,33 @@
|
|
|
1
1
|
{
|
|
2
2
|
"ams": {
|
|
3
3
|
"text-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,25 +1,27 @@
|
|
|
1
1
|
{
|
|
2
2
|
"ams": {
|
|
3
3
|
"time-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
|
"calender-picker-indicator": {
|
|
15
15
|
"background-image": {
|
|
16
16
|
"value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23004699'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>\")"
|
|
17
|
-
}
|
|
17
|
+
},
|
|
18
|
+
"cursor": { "value": "{ams.cursor.interactive}" }
|
|
18
19
|
},
|
|
19
20
|
"disabled": {
|
|
20
|
-
"background-color": { "value": "{ams.color.
|
|
21
|
-
"box-shadow": { "value": "inset 0 0 0 {ams.border.width.
|
|
22
|
-
"color": { "value": "{ams.color.
|
|
21
|
+
"background-color": { "value": "{ams.color.background}" },
|
|
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}" },
|
|
23
25
|
"calender-picker-indicator": {
|
|
24
26
|
"background-image": {
|
|
25
27
|
"value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23BEBEBE'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>\")"
|
|
@@ -27,7 +29,7 @@
|
|
|
27
29
|
}
|
|
28
30
|
},
|
|
29
31
|
"hover": {
|
|
30
|
-
"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.secondary}" },
|
|
31
33
|
"calender-picker-indicator": {
|
|
32
34
|
"background-image": {
|
|
33
35
|
"value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23102E62'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>\")"
|
|
@@ -35,9 +37,9 @@
|
|
|
35
37
|
}
|
|
36
38
|
},
|
|
37
39
|
"invalid": {
|
|
38
|
-
"box-shadow": { "value": "inset 0 0 0 {ams.border.width.
|
|
40
|
+
"box-shadow": { "value": "inset 0 0 0 {ams.border.width.s} {ams.color.interactive.invalid.default}" },
|
|
39
41
|
"hover": {
|
|
40
|
-
"box-shadow": { "value": "inset 0 0 0 {ams.border.width.
|
|
42
|
+
"box-shadow": { "value": "inset 0 0 0 {ams.border.width.m} {ams.color.interactive.invalid.hover}" }
|
|
41
43
|
}
|
|
42
44
|
}
|
|
43
45
|
}
|
|
@@ -1,26 +1,26 @@
|
|
|
1
1
|
{
|
|
2
2
|
"ams": {
|
|
3
3
|
"top-task-link": {
|
|
4
|
-
"gap": { "value": "{ams.space.
|
|
4
|
+
"gap": { "value": "{ams.space.s}" },
|
|
5
5
|
"description": {
|
|
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.
|
|
6
|
+
"color": { "value": "{ams.color.text.default}" },
|
|
7
|
+
"font-family": { "value": "{ams.typography.font-family}" },
|
|
8
|
+
"font-size": { "value": "{ams.typography.body-text.small.font-size}" },
|
|
9
|
+
"font-weight": { "value": "{ams.typography.body-text.font-weight}" },
|
|
10
|
+
"line-height": { "value": "{ams.typography.body-text.small.line-height}" }
|
|
11
11
|
},
|
|
12
12
|
"label": {
|
|
13
|
-
"color": { "value": "{ams.
|
|
14
|
-
"font-family": { "value": "{ams.
|
|
15
|
-
"font-size": { "value": "{ams.
|
|
16
|
-
"font-weight": { "value": "{ams.
|
|
17
|
-
"line-height": { "value": "{ams.
|
|
18
|
-
"text-decoration-line": { "value": "{ams.
|
|
19
|
-
"text-decoration-thickness": { "value": "{ams.
|
|
20
|
-
"text-underline-offset": { "value": "{ams.
|
|
13
|
+
"color": { "value": "{ams.links.color}" },
|
|
14
|
+
"font-family": { "value": "{ams.typography.font-family}" },
|
|
15
|
+
"font-size": { "value": "{ams.typography.heading.4.font-size}" },
|
|
16
|
+
"font-weight": { "value": "{ams.typography.heading.font-weight}" },
|
|
17
|
+
"line-height": { "value": "{ams.typography.heading.4.line-height}" },
|
|
18
|
+
"text-decoration-line": { "value": "{ams.links.subtle.text-decoration-line}" },
|
|
19
|
+
"text-decoration-thickness": { "value": "{ams.links.text-decoration-thickness}" },
|
|
20
|
+
"text-underline-offset": { "value": "{ams.links.text-underline-offset}" },
|
|
21
21
|
"hover": {
|
|
22
|
-
"color": { "value": "{ams.color
|
|
23
|
-
"text-decoration-line": { "value": "{ams.
|
|
22
|
+
"color": { "value": "{ams.links.hover.color}" },
|
|
23
|
+
"text-decoration-line": { "value": "{ams.links.subtle.hover.text-decoration-line}" }
|
|
24
24
|
}
|
|
25
25
|
},
|
|
26
26
|
"outline-offset": { "value": "{ams.focus.outline-offset}" }
|
|
@@ -1,14 +1,20 @@
|
|
|
1
1
|
{
|
|
2
2
|
"ams": {
|
|
3
3
|
"unordered-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": "'\\2022'" },
|
|
11
|
+
"inverse": {
|
|
12
|
+
"color": { "value": "{ams.color.text.inverse}" }
|
|
13
|
+
},
|
|
14
|
+
"small": {
|
|
15
|
+
"font-size": { "value": "{ams.typography.body-text.small.font-size}" },
|
|
16
|
+
"line-height": { "value": "{ams.typography.body-text.small.line-height}" }
|
|
17
|
+
},
|
|
12
18
|
"item": {
|
|
13
19
|
"margin-inline-start": {
|
|
14
20
|
"value": "1.625rem",
|
|
@@ -20,10 +26,10 @@
|
|
|
20
26
|
}
|
|
21
27
|
},
|
|
22
28
|
"unordered-list": {
|
|
23
|
-
"gap": { "value": "{ams.space.
|
|
29
|
+
"gap": { "value": "{ams.space.s}" },
|
|
24
30
|
"list-style-type": { "value": "'\\2013'" },
|
|
25
31
|
"padding-block-end": { "value": "0" },
|
|
26
|
-
"padding-block-start": { "value": "{ams.space.
|
|
32
|
+
"padding-block-start": { "value": "{ams.space.s}" },
|
|
27
33
|
"item": {
|
|
28
34
|
"margin-inline-start": {
|
|
29
35
|
"value": "0.875rem",
|
|
@@ -34,10 +40,6 @@
|
|
|
34
40
|
"comment": "The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem."
|
|
35
41
|
}
|
|
36
42
|
}
|
|
37
|
-
},
|
|
38
|
-
"small": {
|
|
39
|
-
"font-size": { "value": "{ams.text.level.6.font-size}" },
|
|
40
|
-
"line-height": { "value": "{ams.text.level.6.line-height}" }
|
|
41
43
|
}
|
|
42
44
|
}
|
|
43
45
|
}
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"ams": {
|
|
3
|
-
"text": {
|
|
4
|
-
"font-family": { "value": "'Amsterdam Sans', Arial, sans-serif" },
|
|
5
|
-
"font-weight": {
|
|
6
|
-
"normal": { "value": 400 },
|
|
7
|
-
"bold": { "value": 800 }
|
|
8
|
-
},
|
|
9
|
-
"level": {
|
|
10
|
-
"0": {
|
|
11
|
-
"font-size": { "value": "clamp(2.4316rem, calc(1.8951rem + 2.6826vw), 4.5776rem)" },
|
|
12
|
-
"line-height": { "value": "1.15" }
|
|
13
|
-
},
|
|
14
|
-
"1": {
|
|
15
|
-
"font-size": { "value": "clamp(2.0842rem, calc(1.6897rem + 1.9724vw), 3.6621rem)" },
|
|
16
|
-
"line-height": { "value": "1.2" }
|
|
17
|
-
},
|
|
18
|
-
"2": {
|
|
19
|
-
"font-size": { "value": "clamp(1.7865rem, calc(1.5007rem + 1.429vw), 2.9297rem)" },
|
|
20
|
-
"line-height": { "value": "1.25" }
|
|
21
|
-
},
|
|
22
|
-
"3": {
|
|
23
|
-
"font-size": { "value": "clamp(1.5313rem, calc(1.3281rem + 1.0156vw), 2.3438rem)" },
|
|
24
|
-
"line-height": { "value": "1.3" }
|
|
25
|
-
},
|
|
26
|
-
"4": {
|
|
27
|
-
"font-size": { "value": "clamp(1.3125rem, calc(1.1719rem + 0.7031vw), 1.875rem)" },
|
|
28
|
-
"line-height": { "value": "1.5" }
|
|
29
|
-
},
|
|
30
|
-
"5": {
|
|
31
|
-
"font-size": { "value": "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)" },
|
|
32
|
-
"line-height": { "value": "1.6" }
|
|
33
|
-
},
|
|
34
|
-
"6": {
|
|
35
|
-
"font-size": { "value": "clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem)" },
|
|
36
|
-
"line-height": { "value": "1.6" }
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"ams": {
|
|
3
|
-
"action": {
|
|
4
|
-
"activate": { "cursor": { "value": "pointer" } },
|
|
5
|
-
"busy": { "cursor": { "value": "wait" } },
|
|
6
|
-
"disabled": { "cursor": { "value": "not-allowed" } },
|
|
7
|
-
"inert": { "cursor": { "value": "default" } },
|
|
8
|
-
"navigate": { "cursor": { "value": "pointer" } },
|
|
9
|
-
"submit": { "cursor": { "value": "pointer" } }
|
|
10
|
-
}
|
|
11
|
-
}
|
|
12
|
-
}
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"ams": {
|
|
3
|
-
"link-appearance": {
|
|
4
|
-
"color": { "value": "{ams.color.primary-blue}" },
|
|
5
|
-
"text-decoration-thickness": { "value": "{ams.border.width.md}" },
|
|
6
|
-
"text-underline-offset": { "value": "0.3333em" },
|
|
7
|
-
"hover": {
|
|
8
|
-
"color": { "value": "{ams.color.dark-blue}" }
|
|
9
|
-
},
|
|
10
|
-
"regular": {
|
|
11
|
-
"text-decoration-line": { "value": "underline" },
|
|
12
|
-
"hover": {
|
|
13
|
-
"text-decoration-thickness": { "value": "{ams.border.width.lg}" },
|
|
14
|
-
"text-underline-offset": { "value": "0.2778em" }
|
|
15
|
-
}
|
|
16
|
-
},
|
|
17
|
-
"subtle": {
|
|
18
|
-
"text-decoration-line": { "value": "none" },
|
|
19
|
-
"hover": {
|
|
20
|
-
"text-decoration-line": { "value": "underline" }
|
|
21
|
-
}
|
|
22
|
-
},
|
|
23
|
-
"contrast": {
|
|
24
|
-
"color": { "value": "{ams.color.primary-black}" },
|
|
25
|
-
"hover": {
|
|
26
|
-
"color": { "value": "{ams.color.primary-black}" }
|
|
27
|
-
},
|
|
28
|
-
"visited": {
|
|
29
|
-
"color": { "value": "{ams.color.primary-black}" }
|
|
30
|
-
}
|
|
31
|
-
},
|
|
32
|
-
"inverse": {
|
|
33
|
-
"color": { "value": "{ams.color.primary-white}" },
|
|
34
|
-
"hover": {
|
|
35
|
-
"color": { "value": "{ams.color.primary-white}" }
|
|
36
|
-
},
|
|
37
|
-
"visited": {
|
|
38
|
-
"color": { "value": "{ams.color.primary-white}" }
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"ams": {
|
|
3
|
-
"aspect-ratio": {
|
|
4
|
-
"x-tall": { "value": "{ams.proportion.x-tall}" },
|
|
5
|
-
"tall": { "value": "{ams.proportion.tall}" },
|
|
6
|
-
"square": { "value": "{ams.proportion.square}" },
|
|
7
|
-
"wide": { "value": "{ams.proportion.wide}" },
|
|
8
|
-
"x-wide": { "value": "{ams.proportion.x-wide}" },
|
|
9
|
-
"2x-wide": { "value": "{ams.proportion.2x-wide}" }
|
|
10
|
-
}
|
|
11
|
-
}
|
|
12
|
-
}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"ams": {
|
|
3
|
-
"margin": {
|
|
4
|
-
"xs": { "value": "{ams.space.grid.xs}" },
|
|
5
|
-
"sm": { "value": "{ams.space.grid.sm}" },
|
|
6
|
-
"md": { "value": "{ams.space.grid.md}" },
|
|
7
|
-
"lg": { "value": "{ams.space.grid.lg}" },
|
|
8
|
-
"xl": { "value": "{ams.space.grid.xl}" }
|
|
9
|
-
}
|
|
10
|
-
}
|
|
11
|
-
}
|
|
File without changes
|