@amsterdam/design-system-tokens 1.0.1 → 2.1.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 (62) hide show
  1. package/CHANGELOG.md +70 -0
  2. package/README.md +5 -1
  3. package/dist/compact.css +30 -18
  4. package/dist/compact.d.ts +16 -0
  5. package/dist/compact.json +36 -20
  6. package/dist/compact.mjs +33 -23
  7. package/dist/compact.scss +30 -18
  8. package/dist/compact.theme.css +30 -18
  9. package/dist/index.css +347 -269
  10. package/dist/index.d.ts +274 -142
  11. package/dist/index.json +565 -433
  12. package/dist/index.mjs +490 -414
  13. package/dist/index.scss +347 -269
  14. package/dist/index.theme.css +347 -269
  15. package/package.json +2 -2
  16. package/src/brand/ams/border.compact.tokens.json +12 -0
  17. package/src/brand/ams/color.deprecated.tokens.json +12 -0
  18. package/src/brand/ams/color.tokens.json +2 -3
  19. package/src/brand/ams/space.compact.tokens.json +6 -6
  20. package/src/brand/ams/space.tokens.json +6 -6
  21. package/src/brand/ams/typography.compact.tokens.json +17 -15
  22. package/src/brand/ams/typography.deprecated.compact.tokens.json +20 -0
  23. package/src/brand/ams/typography.deprecated.tokens.json +28 -0
  24. package/src/brand/ams/typography.tokens.json +17 -25
  25. package/src/common/ams/inputs.tokens.json +34 -0
  26. package/src/common/ams/links.tokens.json +4 -4
  27. package/src/components/ams/accordion.deprecated.tokens.json +17 -0
  28. package/src/components/ams/accordion.tokens.json +1 -10
  29. package/src/components/ams/breadcrumb.tokens.json +3 -3
  30. package/src/components/ams/button.tokens.json +1 -1
  31. package/src/components/ams/call-to-action-link.tokens.json +24 -0
  32. package/src/components/ams/checkbox.deprecated.tokens.json +43 -0
  33. package/src/components/ams/checkbox.tokens.json +22 -35
  34. package/src/components/ams/date-input.deprecated.tokens.json +32 -0
  35. package/src/components/ams/date-input.tokens.json +25 -25
  36. package/src/components/ams/error-message.tokens.json +2 -2
  37. package/src/components/ams/field-set.tokens.json +3 -3
  38. package/src/components/ams/file-input.tokens.json +25 -24
  39. package/src/components/ams/icon.deprecated.tokens.json +16 -0
  40. package/src/components/ams/icon.tokens.json +8 -0
  41. package/src/components/ams/label.tokens.json +2 -2
  42. package/src/components/ams/menu.deprecated.tokens.json +32 -0
  43. package/src/components/ams/menu.tokens.json +37 -0
  44. package/src/components/ams/ordered-list.tokens.json +2 -2
  45. package/src/components/ams/page-footer.tokens.json +2 -2
  46. package/src/components/ams/page-header.tokens.json +2 -2
  47. package/src/components/ams/{page-heading.tokens.json → page-heading.deprecated.tokens.json} +1 -0
  48. package/src/components/ams/page.tokens.json +1 -1
  49. package/src/components/ams/password-input.tokens.json +18 -18
  50. package/src/components/ams/radio.tokens.json +1 -1
  51. package/src/components/ams/search-field.tokens.json +23 -23
  52. package/src/components/ams/select.tokens.json +17 -17
  53. package/src/components/ams/skip-link.tokens.json +2 -2
  54. package/src/components/ams/standalone-link.deprecated.tokens.json +32 -0
  55. package/src/components/ams/standalone-link.tokens.json +5 -13
  56. package/src/components/ams/table-of-contents.deprecated.tokens.json +11 -0
  57. package/src/components/ams/table-of-contents.tokens.json +1 -6
  58. package/src/components/ams/text-area.tokens.json +18 -18
  59. package/src/components/ams/text-input.tokens.json +18 -18
  60. package/src/components/ams/time-input.deprecated.tokens.json +32 -0
  61. package/src/components/ams/time-input.tokens.json +25 -25
  62. package/src/components/ams/unordered-list.tokens.json +2 -2
package/dist/index.scss CHANGED
@@ -11,6 +11,14 @@ $ams-border-width-s: 0.0625rem;
11
11
  $ams-border-width-m: 0.125rem;
12
12
  $ams-border-width-l: 0.1875rem;
13
13
  $ams-border-width-xl: 0.25rem;
14
+ $ams-color-interactive-secondary: #181818; // Use `currentColor` instead
15
+ $ams-color-interactive-contrast: #181818;
16
+ $ams-color-interactive: #004699;
17
+ $ams-color-interactive-disabled: #767676;
18
+ $ams-color-interactive-hover: #003677;
19
+ $ams-color-interactive-invalid: #ec0000;
20
+ $ams-color-interactive-invalid-hover: #b70000;
21
+ $ams-color-interactive-inverse: #ffffff;
14
22
  $ams-color-background: #ffffff;
15
23
  $ams-color-feedback-error: #ec0000;
16
24
  $ams-color-feedback-info: #009de6;
@@ -23,14 +31,6 @@ $ams-color-highlight-magenta: #e50082;
23
31
  $ams-color-highlight-orange: #ff9100;
24
32
  $ams-color-highlight-purple: #a00078;
25
33
  $ams-color-highlight-yellow: #ffe600;
26
- $ams-color-interactive-contrast: #000000;
27
- $ams-color-interactive: #004699;
28
- $ams-color-interactive-disabled: #767676;
29
- $ams-color-interactive-hover: #003677;
30
- $ams-color-interactive-invalid: #ec0000;
31
- $ams-color-interactive-invalid-hover: #b70000;
32
- $ams-color-interactive-inverse: #ffffff;
33
- $ams-color-interactive-secondary: #181818;
34
34
  $ams-color-separator: #d1d1d1;
35
35
  $ams-color-text: #181818;
36
36
  $ams-color-text-inverse: #ffffff;
@@ -38,38 +38,42 @@ $ams-color-text-secondary: #767676;
38
38
  $ams-cursor-disabled: not-allowed;
39
39
  $ams-cursor-interactive: pointer;
40
40
  $ams-focus-outline-offset: 0.25rem;
41
- $ams-space-xs: clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem);
42
- $ams-space-s: clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem);
43
- $ams-space-m: clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem);
44
- $ams-space-l: clamp(1.6875rem, 1.5469rem + 0.7031vw, 2.25rem);
45
- $ams-space-xl: clamp(2.25rem, 1.9375rem + 1.5625vw, 3.5rem);
46
- $ams-space-2xl: clamp(2.8125rem, 2.2031rem + 3.0469vw, 5.25rem);
41
+ $ams-space-xs: clamp(0.25rem, 0.2143rem + 0.1786vw, 0.375rem);
42
+ $ams-space-s: clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem);
43
+ $ams-space-m: clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem);
44
+ $ams-space-l: clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem);
45
+ $ams-space-xl: clamp(2.25rem, 1.8214rem + 2.1429vw, 3.75rem);
46
+ $ams-space-2xl: clamp(3rem, 2.25rem + 3.75vw, 5.625rem);
47
+ $ams-typography-heading-0-font-size: clamp(2.435rem, 2.0409rem + 1.9709vw, 3.8147rem); // Use Heading size 1 instead.
48
+ $ams-typography-heading-0-line-height: 1.1; // Use Heading size 1 instead.
49
+ $ams-typography-heading-1-font-size: clamp(2rem, 1.7143rem + 1.4286vw, 3rem);
50
+ $ams-typography-heading-1-line-height: 1.2;
51
+ $ams-typography-heading-2-line-height: 1.3;
52
+ $ams-typography-heading-3-line-height: 1.3;
53
+ $ams-typography-heading-4-line-height: 1.4;
54
+ $ams-typography-heading-5-line-height: 1.4;
55
+ $ams-typography-heading-6-line-height: 1.4; // Use Heading size 5 instead.
56
+ $ams-typography-heading-font-weight: 800;
57
+ $ams-typography-heading-text-wrap: balance;
47
58
  $ams-typography-font-family: 'Amsterdam Sans', Arial, sans-serif;
48
59
  $ams-typography-hyphenate-limit-chars: 12 8 4;
49
- $ams-typography-body-text-font-size: clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem);
60
+ $ams-typography-body-text-font-size: clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem);
50
61
  $ams-typography-body-text-font-weight: 400;
51
- $ams-typography-body-text-line-height: 1.6667;
62
+ $ams-typography-body-text-line-height: 1.8;
52
63
  $ams-typography-body-text-bold-font-weight: 800;
53
- $ams-typography-body-text-small-font-size: clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem);
54
- $ams-typography-body-text-small-line-height: 1.5152;
55
- $ams-typography-body-text-large-font-size: clamp(1.3125rem, calc(1.1719rem + 0.7031vw), 1.875rem);
56
- $ams-typography-body-text-large-line-height: 1.5152;
57
- $ams-typography-body-text-x-large-font-size: clamp(1.5313rem, calc(1.3281rem + 1.0156vw), 2.3438rem);
58
- $ams-typography-body-text-x-large-line-height: 1.3776;
59
- $ams-typography-heading-0-font-size: clamp(2.4316rem, calc(1.8951rem + 2.6826vw), 4.5776rem);
60
- $ams-typography-heading-0-line-height: 1.1386;
61
- $ams-typography-heading-1-font-size: clamp(2.0842rem, calc(1.6897rem + 1.9724vw), 3.6621rem);
62
- $ams-typography-heading-1-line-height: 1.1754;
63
- $ams-typography-heading-2-font-size: clamp(1.7865rem, calc(1.5007rem + 1.429vw), 2.9297rem);
64
- $ams-typography-heading-2-line-height: 1.2133;
65
- $ams-typography-heading-3-line-height: 1.2524;
66
- $ams-typography-heading-4-line-height: 1.2928;
67
- $ams-typography-heading-5-line-height: 1.3345;
68
- $ams-typography-heading-6-line-height: 1.3776;
69
- $ams-typography-heading-font-weight: 800;
70
- $ams-typography-heading-text-wrap: balance;
71
- $ams-links-text-underline-offset: 0.3333em;
72
- $ams-links-hover-text-underline-offset: 0.2778em;
64
+ $ams-typography-body-text-small-font-size: 1rem;
65
+ $ams-typography-body-text-small-line-height: 1.6;
66
+ $ams-typography-body-text-large-font-size: clamp(1.3125rem, 1.2411rem + 0.3571vw, 1.5625rem);
67
+ $ams-typography-body-text-large-line-height: 1.6;
68
+ $ams-typography-body-text-x-large-font-size: clamp(1.5rem, 1.3571rem + 0.7143vw, 2rem);
69
+ $ams-typography-body-text-x-large-line-height: 1.4;
70
+ $ams-inputs-border-color: currentColor;
71
+ $ams-inputs-border-style: solid;
72
+ $ams-inputs-line-height: 1.4;
73
+ $ams-links-text-decoration-thickness: 0.125rem; // 2px
74
+ $ams-links-text-underline-offset: 0.15625rem; // 2.5px
75
+ $ams-links-hover-text-decoration-thickness: 0.1875rem; // 3px
76
+ $ams-links-hover-text-underline-offset: 0.09375rem; // 1.5px
73
77
  $ams-links-subtle-text-decoration-line: none;
74
78
  $ams-links-subtle-hover-text-decoration-line: underline;
75
79
  $ams-accordion-button-padding-inline: 0;
@@ -85,12 +89,14 @@ $ams-button-secondary-border-color: currentColor;
85
89
  $ams-button-tertiary-background-color: transparent;
86
90
  $ams-button-tertiary-border-color: transparent;
87
91
  $ams-button-tertiary-hover-border-color: currentColor;
88
- $ams-checkbox-icon-container-inline-size: 1.5rem;
89
- $ams-date-input-border-color: currentColor;
90
- $ams-date-input-border-style: solid;
91
- $ams-date-input-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23004699'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>");
92
- $ams-date-input-disabled-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23767676'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>");
93
- $ams-date-input-hover-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23003677'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>");
92
+ $ams-call-to-action-link-background-color: #00a03c;
93
+ $ams-call-to-action-link-hover-background-color: #007c2e;
94
+ $ams-date-input-disabled-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23767676'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>"); // Use the token with ‘calendar’ spelled correctly instead
95
+ $ams-date-input-disabled-calendar-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23767676'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>");
96
+ $ams-date-input-hover-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23003677'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>"); // Use the token with ‘calendar’ spelled correctly instead
97
+ $ams-date-input-hover-calendar-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23003677'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>");
98
+ $ams-date-input-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23004699'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>"); // Use the token with ‘calendar’ spelled correctly instead
99
+ $ams-date-input-calendar-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23004699'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>");
94
100
  $ams-description-list-narrow-grid-template-columns: 1fr 4fr;
95
101
  $ams-description-list-medium-grid-template-columns: 1fr 2fr;
96
102
  $ams-description-list-wide-grid-template-columns: 1fr 1fr;
@@ -98,10 +104,7 @@ $ams-dialog-border-style: solid;
98
104
  $ams-dialog-max-inline-size: 48rem;
99
105
  $ams-dialog-backdrop-background-color: rgb(24 24 24 / 62.5%);
100
106
  $ams-dialog-body-padding-block: 0;
101
- $ams-file-input-border-color: currentColor;
102
107
  $ams-file-input-border-style: dashed;
103
- $ams-file-input-file-selector-button-border-color: currentColor;
104
- $ams-file-input-file-selector-button-border-style: solid;
105
108
  $ams-file-list-file-preview-width: clamp(2.5rem, 10vw, 5rem);
106
109
  $ams-grid-column-count: 4;
107
110
  $ams-grid-medium-column-count: 8;
@@ -118,69 +121,72 @@ $ams-link-line-height: inherit;
118
121
  $ams-logo-min-block-size: 2.5rem;
119
122
  $ams-logo-emblem-color: #ec0000;
120
123
  $ams-logo-title-color: #ec0000;
124
+ $ams-menu-wide-max-inline-size: 8rem;
121
125
  $ams-ordered-list-list-style-type: decimal;
122
126
  $ams-ordered-list-item-margin-inline-start: 2.25rem; // Divide your total indentation width over margin and padding to position the marker.
123
127
  $ams-ordered-list-item-padding-inline-start: 0.25rem; // The total level 1 indentation for Amsterdam is 40 pixels, or 2.5rem.
124
128
  $ams-ordered-list-ordered-list-list-style-type: lower-alpha;
125
- $ams-ordered-list-ordered-list-padding-block-end: 0;
126
129
  $ams-ordered-list-ordered-list-item-margin-inline-start: 1.5rem; // Indent less than the parent to start-align the child’s marker with the parent text.
127
130
  $ams-ordered-list-ordered-list-item-padding-inline-start: 0.25rem; // The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem.
128
131
  $ams-page-footer-spotlight-background-color: #004699;
129
- $ams-page-max-inline-size: 100rem;
130
- $ams-password-input-border-color: currentColor;
131
- $ams-password-input-border-style: solid;
132
- $ams-radio-icon-container-inline-size: 1.5rem;
133
- $ams-search-field-input-border-color: currentColor;
134
- $ams-search-field-input-border-style: solid;
132
+ $ams-page-max-inline-size: 90rem;
135
133
  $ams-search-field-input-cancel-button-background-image: 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>");
136
134
  $ams-select-background-image: 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>");
137
- $ams-select-border-color: currentColor;
138
- $ams-select-border-style: solid;
139
135
  $ams-select-disabled-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23767676' fill-rule='evenodd' d='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>");
140
136
  $ams-select-hover-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23003677' fill-rule='evenodd' d='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>");
141
137
  $ams-switch-background-color: #767676;
142
138
  $ams-switch-inline-size: 3.5rem;
143
139
  $ams-switch-thumb-block-size: 1.75rem;
144
140
  $ams-switch-thumb-inline-size: 1.75rem;
145
- $ams-text-area-border-color: currentColor;
146
- $ams-text-area-border-style: solid;
147
- $ams-text-input-border-color: currentColor;
148
- $ams-text-input-border-style: solid;
149
- $ams-time-input-border-color: currentColor;
150
- $ams-time-input-border-style: solid;
151
- $ams-time-input-calender-picker-indicator-background-image: 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>");
152
- $ams-time-input-disabled-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23767676'><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>");
153
- $ams-time-input-hover-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23003677'><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>");
141
+ $ams-time-input-disabled-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23767676'><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>"); // Use the token with ‘calendar’ spelled correctly instead
142
+ $ams-time-input-disabled-calendar-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23767676'><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>");
143
+ $ams-time-input-hover-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23003677'><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>"); // Use the token with ‘calendar’ spelled correctly instead
144
+ $ams-time-input-hover-calendar-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23003677'><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>");
145
+ $ams-time-input-calender-picker-indicator-background-image: 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>"); // Use the token with ‘calendar’ spelled correctly instead
146
+ $ams-time-input-calendar-picker-indicator-background-image: 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>");
154
147
  $ams-unordered-list-list-style-type: '\2022';
155
148
  $ams-unordered-list-item-margin-inline-start: 1.625rem; // Divide your total indentation width over margin and padding to position the marker.
156
149
  $ams-unordered-list-item-padding-inline-start: 0.875rem; // The total level 1 indentation for Amsterdam is 40 pixels, or 2.5rem.
157
150
  $ams-unordered-list-unordered-list-list-style-type: '\2013';
158
- $ams-unordered-list-unordered-list-padding-block-end: 0;
159
151
  $ams-unordered-list-unordered-list-item-margin-inline-start: 0.875rem; // Indent less than the parent to start-align the child’s marker with the parent text.
160
152
  $ams-unordered-list-unordered-list-item-padding-inline-start: 0.875rem; // The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem.
161
- $ams-typography-heading-3-font-size: $ams-typography-body-text-x-large-font-size;
162
- $ams-typography-heading-4-font-size: $ams-typography-body-text-large-font-size;
163
- $ams-typography-heading-5-font-size: $ams-typography-body-text-font-size;
164
- $ams-typography-heading-6-font-size: $ams-typography-body-text-small-font-size;
153
+ $ams-typography-heading-2-font-size: $ams-typography-body-text-x-large-font-size;
154
+ $ams-typography-heading-3-font-size: $ams-typography-body-text-large-font-size;
155
+ $ams-typography-heading-4-font-size: $ams-typography-body-text-font-size;
156
+ $ams-typography-heading-5-font-size: $ams-typography-body-text-small-font-size;
157
+ $ams-typography-heading-6-font-size: $ams-typography-body-text-small-font-size; // Use Heading size 5 instead.
158
+ $ams-inputs-background-color: $ams-color-background;
159
+ $ams-inputs-border-width: $ams-border-width-m;
160
+ $ams-inputs-color: $ams-color-text;
161
+ $ams-inputs-font-family: $ams-typography-font-family;
162
+ $ams-inputs-font-size: $ams-typography-body-text-font-size;
163
+ $ams-inputs-font-weight: $ams-typography-body-text-font-weight;
164
+ $ams-inputs-outline-offset: $ams-focus-outline-offset;
165
+ $ams-inputs-padding-block: $ams-space-s;
166
+ $ams-inputs-padding-inline: $ams-space-m;
167
+ $ams-inputs-disabled-color: $ams-color-interactive-disabled;
168
+ $ams-inputs-hover-box-shadow: inset 0 0 0 $ams-border-width-s;
169
+ $ams-inputs-invalid-border-color: $ams-color-interactive-invalid;
170
+ $ams-inputs-invalid-hover-border-color: $ams-color-interactive-invalid-hover;
171
+ $ams-inputs-invalid-hover-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-invalid-hover;
172
+ $ams-inputs-placeholder-color: $ams-color-text-secondary;
165
173
  $ams-links-color: $ams-color-interactive;
166
- $ams-links-text-decoration-thickness: $ams-border-width-m;
167
174
  $ams-links-hover-color: $ams-color-interactive-hover;
168
- $ams-links-hover-text-decoration-thickness: $ams-border-width-l;
169
175
  $ams-links-contrast-color: $ams-color-interactive-contrast;
170
176
  $ams-links-contrast-hover-color: $ams-color-interactive-contrast;
171
177
  $ams-links-inverse-color: $ams-color-interactive-inverse;
172
178
  $ams-links-inverse-hover-color: $ams-color-interactive-inverse;
173
- $ams-accordion-gap: $ams-space-m;
174
- $ams-accordion-button-color: $ams-color-interactive;
175
- $ams-accordion-button-cursor: $ams-cursor-interactive;
176
179
  $ams-accordion-button-font-family: $ams-typography-font-family;
177
180
  $ams-accordion-button-font-weight: $ams-typography-heading-font-weight;
181
+ $ams-accordion-button-line-height: $ams-typography-heading-3-line-height;
182
+ $ams-accordion-button-text-wrap: $ams-typography-heading-text-wrap;
183
+ $ams-accordion-button-color: $ams-color-interactive;
184
+ $ams-accordion-button-cursor: $ams-cursor-interactive;
178
185
  $ams-accordion-button-gap: $ams-space-s;
179
- $ams-accordion-button-line-height: $ams-typography-heading-4-line-height;
180
186
  $ams-accordion-button-outline-offset: $ams-focus-outline-offset;
181
187
  $ams-accordion-button-padding-block: $ams-space-s;
182
- $ams-accordion-button-text-wrap: $ams-typography-heading-text-wrap;
183
188
  $ams-accordion-button-hover-color: $ams-color-interactive-hover;
189
+ $ams-accordion-gap: $ams-space-s;
184
190
  $ams-action-group-gap: $ams-space-m;
185
191
  $ams-alert-background-color: $ams-color-background;
186
192
  $ams-alert-border-color: $ams-color-feedback-info;
@@ -255,12 +261,13 @@ $ams-blockquote-font-weight: $ams-typography-body-text-bold-font-weight;
255
261
  $ams-blockquote-line-height: $ams-typography-body-text-x-large-line-height;
256
262
  $ams-blockquote-inverse-color: $ams-color-text-inverse;
257
263
  $ams-breadcrumb-font-family: $ams-typography-font-family;
258
- $ams-breadcrumb-font-size: $ams-typography-body-text-small-font-size;
264
+ $ams-breadcrumb-font-size: $ams-typography-body-text-font-size;
259
265
  $ams-breadcrumb-font-weight: $ams-typography-body-text-font-weight;
260
- $ams-breadcrumb-line-height: $ams-typography-body-text-small-line-height;
261
- $ams-breadcrumb-separator-margin-inline: $ams-space-xs;
266
+ $ams-breadcrumb-line-height: $ams-typography-body-text-line-height;
267
+ $ams-breadcrumb-separator-margin-inline: $ams-space-s;
262
268
  $ams-breadcrumb-link-outline-offset: $ams-focus-outline-offset;
263
269
  $ams-breadcrumb-link-text-decoration-line: $ams-links-subtle-text-decoration-line;
270
+ $ams-breadcrumb-link-text-decoration-thickness: $ams-links-text-decoration-thickness;
264
271
  $ams-breadcrumb-link-text-underline-offset: $ams-links-text-underline-offset;
265
272
  $ams-breadcrumb-link-hover-text-decoration-line: $ams-links-subtle-hover-text-decoration-line;
266
273
  $ams-button-border-width: $ams-border-width-m;
@@ -268,7 +275,7 @@ $ams-button-cursor: $ams-cursor-interactive;
268
275
  $ams-button-font-family: $ams-typography-font-family;
269
276
  $ams-button-font-size: $ams-typography-body-text-font-size;
270
277
  $ams-button-font-weight: $ams-typography-body-text-font-weight;
271
- $ams-button-line-height: $ams-typography-body-text-line-height;
278
+ $ams-button-line-height: $ams-inputs-line-height;
272
279
  $ams-button-gap: $ams-space-s;
273
280
  $ams-button-outline-offset: $ams-focus-outline-offset;
274
281
  $ams-button-padding-block: $ams-space-s;
@@ -292,11 +299,24 @@ $ams-button-secondary-hover-color: $ams-color-interactive-hover;
292
299
  $ams-button-tertiary-color: $ams-color-interactive;
293
300
  $ams-button-tertiary-disabled-color: $ams-color-interactive-disabled;
294
301
  $ams-button-tertiary-hover-color: $ams-color-interactive-hover;
302
+ $ams-call-to-action-link-color: $ams-color-text-inverse;
303
+ $ams-call-to-action-link-font-family: $ams-typography-font-family;
304
+ $ams-call-to-action-link-font-size: $ams-typography-body-text-font-size;
305
+ $ams-call-to-action-link-font-weight: $ams-typography-body-text-font-weight;
306
+ $ams-call-to-action-link-line-height: $ams-typography-body-text-line-height;
307
+ $ams-call-to-action-link-outline-offset: $ams-focus-outline-offset;
308
+ $ams-call-to-action-link-padding-block: $ams-space-xs;
309
+ $ams-call-to-action-link-padding-inline: $ams-space-m;
310
+ $ams-call-to-action-link-text-decoration-thickness: $ams-links-text-decoration-thickness;
311
+ $ams-call-to-action-link-text-underline-offset: $ams-links-text-underline-offset;
312
+ $ams-call-to-action-link-hover-text-decoration-thickness: $ams-links-hover-text-decoration-thickness;
313
+ $ams-call-to-action-link-hover-text-underline-offset: $ams-links-hover-text-underline-offset;
295
314
  $ams-card-heading-margin-block-end: $ams-space-xs;
296
315
  $ams-card-heading-group-gap: $ams-space-xs;
297
316
  $ams-card-heading-group-margin-block-end: $ams-space-xs;
298
317
  $ams-card-image-margin-block-end: $ams-space-s;
299
318
  $ams-card-link-text-decoration-line: $ams-links-subtle-text-decoration-line;
319
+ $ams-card-link-text-decoration-thickness: $ams-links-text-decoration-thickness;
300
320
  $ams-card-link-text-underline-offset: $ams-links-text-underline-offset;
301
321
  $ams-card-link-hover-text-decoration-line: $ams-links-subtle-hover-text-decoration-line;
302
322
  $ams-card-outline-offset: $ams-focus-outline-offset;
@@ -306,65 +326,57 @@ $ams-character-count-font-size: $ams-typography-body-text-small-font-size;
306
326
  $ams-character-count-font-weight: $ams-typography-body-text-font-weight;
307
327
  $ams-character-count-line-height: $ams-typography-body-text-small-line-height;
308
328
  $ams-character-count-error-color: $ams-color-feedback-error;
309
- $ams-checkbox-color: $ams-color-text;
310
- $ams-checkbox-cursor: $ams-cursor-interactive;
311
- $ams-checkbox-font-family: $ams-typography-font-family;
312
- $ams-checkbox-font-size: $ams-typography-body-text-font-size;
313
- $ams-checkbox-font-weight: $ams-typography-body-text-font-weight;
314
- $ams-checkbox-gap: $ams-space-s;
315
- $ams-checkbox-line-height: $ams-typography-body-text-line-height;
316
- $ams-checkbox-outline-offset: $ams-focus-outline-offset;
317
- $ams-checkbox-checked-indicator-stroke: $ams-color-interactive-inverse;
318
- $ams-checkbox-indeterminate-indicator-stroke: $ams-color-interactive-inverse;
319
- $ams-checkbox-hover-indicator-hover-stroke: $ams-color-interactive-hover;
320
- $ams-checkbox-hover-indicator-invalid-hover-stroke: $ams-color-interactive-invalid-hover;
321
- $ams-checkbox-rectangle-fill: $ams-color-background;
322
- $ams-checkbox-rectangle-stroke: $ams-color-interactive;
323
- $ams-checkbox-rectangle-checked-fill: $ams-color-interactive;
324
- $ams-checkbox-rectangle-checked-disabled-fill: $ams-color-interactive-disabled;
329
+ $ams-checkbox-hover-text-decoration-thickness: $ams-border-width-m; // Use `ams.checkbox.text-decoration-thickness` instead
330
+ $ams-checkbox-hover-color: $ams-color-interactive-hover;
331
+ $ams-checkbox-hover-text-decoration-line: $ams-links-subtle-hover-text-decoration-line;
325
332
  $ams-checkbox-rectangle-checked-disabled-hover-fill: $ams-color-interactive-disabled;
326
- $ams-checkbox-rectangle-checked-hover-fill: $ams-color-interactive-hover;
333
+ $ams-checkbox-rectangle-checked-disabled-fill: $ams-color-interactive-disabled;
327
334
  $ams-checkbox-rectangle-checked-hover-disabled-invalid-fill: $ams-color-interactive-disabled;
335
+ $ams-checkbox-rectangle-checked-hover-fill: $ams-color-interactive-hover;
336
+ $ams-checkbox-rectangle-checked-fill: $ams-color-interactive;
328
337
  $ams-checkbox-rectangle-checked-invalid-fill: $ams-color-interactive-invalid;
329
338
  $ams-checkbox-rectangle-checked-invalid-hover-fill: $ams-color-interactive-invalid-hover;
330
- $ams-checkbox-rectangle-disabled-stroke: $ams-color-interactive-disabled;
331
- $ams-checkbox-rectangle-hover-stroke: $ams-color-interactive-hover;
332
339
  $ams-checkbox-rectangle-hover-disabled-invalid-stroke: $ams-color-interactive-disabled;
333
- $ams-checkbox-rectangle-indeterminate-fill: $ams-color-interactive;
334
- $ams-checkbox-rectangle-indeterminate-disabled-fill: $ams-color-interactive-disabled;
340
+ $ams-checkbox-rectangle-hover-stroke: $ams-color-interactive-hover;
335
341
  $ams-checkbox-rectangle-indeterminate-disabled-hover-fill: $ams-color-interactive-disabled;
336
- $ams-checkbox-rectangle-indeterminate-hover-fill: $ams-color-interactive-hover;
342
+ $ams-checkbox-rectangle-indeterminate-disabled-fill: $ams-color-interactive-disabled;
337
343
  $ams-checkbox-rectangle-indeterminate-hover-disabled-invalid-fill: $ams-color-interactive-disabled;
344
+ $ams-checkbox-rectangle-indeterminate-hover-fill: $ams-color-interactive-hover;
345
+ $ams-checkbox-rectangle-indeterminate-fill: $ams-color-interactive;
338
346
  $ams-checkbox-rectangle-indeterminate-invalid-fill: $ams-color-interactive-invalid;
339
347
  $ams-checkbox-rectangle-indeterminate-invalid-hover-fill: $ams-color-interactive-invalid-hover;
348
+ $ams-checkbox-rectangle-fill: $ams-color-background;
349
+ $ams-checkbox-rectangle-stroke: $ams-color-interactive;
350
+ $ams-checkbox-rectangle-disabled-stroke: $ams-color-interactive-disabled;
340
351
  $ams-checkbox-rectangle-invalid-stroke: $ams-color-interactive-invalid;
341
352
  $ams-checkbox-rectangle-invalid-hover-stroke: $ams-color-interactive-invalid-hover;
353
+ $ams-checkbox-color: $ams-color-text;
354
+ $ams-checkbox-cursor: $ams-cursor-interactive;
355
+ $ams-checkbox-font-family: $ams-typography-font-family;
356
+ $ams-checkbox-font-size: $ams-typography-body-text-font-size;
357
+ $ams-checkbox-font-weight: $ams-typography-body-text-font-weight;
358
+ $ams-checkbox-gap: $ams-space-s;
359
+ $ams-checkbox-line-height: $ams-typography-body-text-line-height;
360
+ $ams-checkbox-outline-offset: $ams-focus-outline-offset;
361
+ $ams-checkbox-text-decoration-thickness: $ams-links-text-decoration-thickness;
362
+ $ams-checkbox-text-underline-offset: $ams-links-text-underline-offset;
342
363
  $ams-checkbox-disabled-cursor: $ams-cursor-disabled;
343
364
  $ams-checkbox-disabled-color: $ams-color-interactive-disabled;
344
- $ams-checkbox-hover-color: $ams-color-interactive-hover;
345
- $ams-checkbox-hover-text-decoration-thickness: $ams-border-width-m;
365
+ $ams-checkbox-checked-indicator-stroke: $ams-color-interactive-inverse;
366
+ $ams-checkbox-hover-indicator-hover-stroke: $ams-color-interactive-hover;
367
+ $ams-checkbox-hover-indicator-invalid-hover-stroke: $ams-color-interactive-invalid-hover;
368
+ $ams-checkbox-indeterminate-indicator-stroke: $ams-color-interactive-inverse;
346
369
  $ams-column-gap-x-small: $ams-space-xs;
347
370
  $ams-column-gap-small: $ams-space-s;
348
371
  $ams-column-gap-medium: $ams-space-m;
349
372
  $ams-column-gap-large: $ams-space-l;
350
373
  $ams-column-gap-x-large: $ams-space-xl;
351
- $ams-date-input-background-color: $ams-color-background;
352
- $ams-date-input-border-width: $ams-border-width-m;
353
- $ams-date-input-color: $ams-color-text;
354
- $ams-date-input-font-family: $ams-typography-font-family;
355
- $ams-date-input-font-size: $ams-typography-body-text-font-size;
356
- $ams-date-input-font-weight: $ams-typography-body-text-font-weight;
357
- $ams-date-input-line-height: $ams-typography-body-text-line-height;
358
- $ams-date-input-outline-offset: $ams-focus-outline-offset;
359
- $ams-date-input-padding-block: $ams-space-s;
360
- $ams-date-input-padding-inline: $ams-space-m;
361
- $ams-date-input-calender-picker-indicator-cursor: $ams-cursor-interactive;
362
- $ams-date-input-disabled-color: $ams-color-interactive-disabled;
363
374
  $ams-date-input-disabled-cursor: $ams-cursor-disabled;
364
- $ams-date-input-hover-box-shadow: inset 0 0 0 $ams-border-width-s;
365
- $ams-date-input-invalid-border-color: $ams-color-interactive-invalid;
366
- $ams-date-input-invalid-hover-border-color: $ams-color-interactive-invalid-hover;
367
- $ams-date-input-invalid-hover-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-invalid-hover;
375
+ $ams-date-input-calender-picker-indicator-cursor: $ams-cursor-interactive; // Use the token with ‘calendar’ spelled correctly instead
376
+ $ams-date-input-border-color: $ams-inputs-border-color;
377
+ $ams-date-input-border-style: $ams-inputs-border-style;
378
+ $ams-date-input-line-height: $ams-inputs-line-height;
379
+ $ams-date-input-calendar-picker-indicator-cursor: $ams-cursor-interactive;
368
380
  $ams-description-list-color: $ams-color-text;
369
381
  $ams-description-list-column-gap: $ams-space-l;
370
382
  $ams-description-list-font-family: $ams-typography-font-family;
@@ -395,17 +407,17 @@ $ams-dialog-footer-medium-padding-block: 0 $ams-space-xl;
395
407
  $ams-dialog-footer-medium-padding-inline: $ams-space-xl;
396
408
  $ams-error-message-color: $ams-color-feedback-error;
397
409
  $ams-error-message-font-family: $ams-typography-font-family;
398
- $ams-error-message-font-size: $ams-typography-body-text-small-font-size;
410
+ $ams-error-message-font-size: $ams-typography-body-text-font-size;
399
411
  $ams-error-message-font-weight: $ams-typography-body-text-font-weight;
400
412
  $ams-error-message-gap: $ams-space-xs;
401
- $ams-error-message-line-height: $ams-typography-body-text-small-line-height;
413
+ $ams-error-message-line-height: $ams-typography-body-text-line-height;
402
414
  $ams-field-set-invalid-border-inline-start: $ams-border-width-l solid $ams-color-feedback-error;
403
415
  $ams-field-set-invalid-padding-inline-start: $ams-space-m;
404
416
  $ams-field-set-legend-color: $ams-color-text;
405
417
  $ams-field-set-legend-font-family: $ams-typography-font-family;
406
418
  $ams-field-set-legend-font-weight: $ams-typography-heading-font-weight;
407
- $ams-field-set-legend-line-height: $ams-typography-heading-4-line-height;
408
- $ams-field-set-legend-margin-block-end: $ams-space-m;
419
+ $ams-field-set-legend-line-height: $ams-typography-heading-3-line-height;
420
+ $ams-field-set-legend-margin-block-end: $ams-space-s;
409
421
  $ams-field-set-legend-text-wrap: $ams-typography-heading-text-wrap;
410
422
  $ams-field-gap: $ams-space-s;
411
423
  $ams-field-invalid-border-inline-start: $ams-border-width-l solid $ams-color-feedback-error;
@@ -417,30 +429,15 @@ $ams-figure-caption-font-size: $ams-typography-body-text-small-font-size;
417
429
  $ams-figure-caption-font-weight: $ams-typography-body-text-font-weight;
418
430
  $ams-figure-caption-line-height: $ams-typography-body-text-small-line-height;
419
431
  $ams-figure-caption-inverse-color: $ams-color-text-inverse;
420
- $ams-file-input-background-color: $ams-color-background;
421
- $ams-file-input-border-width: $ams-border-width-m;
422
- $ams-file-input-color: $ams-color-text;
432
+ $ams-file-input-border-color: $ams-inputs-border-color;
423
433
  $ams-file-input-cursor: $ams-cursor-interactive;
424
- $ams-file-input-font-family: $ams-typography-font-family;
425
- $ams-file-input-font-size: $ams-typography-body-text-font-size;
426
- $ams-file-input-font-weight: $ams-typography-body-text-font-weight;
427
- $ams-file-input-line-height: $ams-typography-body-text-line-height;
428
- $ams-file-input-outline-offset: $ams-focus-outline-offset;
434
+ $ams-file-input-line-height: $ams-inputs-line-height;
429
435
  $ams-file-input-padding-block: $ams-space-m;
430
436
  $ams-file-input-padding-inline: $ams-space-m;
431
- $ams-file-input-disabled-color: $ams-color-interactive-disabled;
432
437
  $ams-file-input-disabled-cursor: $ams-cursor-disabled;
433
- $ams-file-input-file-selector-button-background-color: $ams-color-background;
434
- $ams-file-input-file-selector-button-border-width: $ams-border-width-m;
435
- $ams-file-input-file-selector-button-color: $ams-color-interactive;
436
- $ams-file-input-file-selector-button-cursor: $ams-cursor-interactive;
438
+ $ams-file-input-file-selector-button-border-color: $ams-button-secondary-border-color;
439
+ $ams-file-input-file-selector-button-border-style: $ams-button-border-style;
437
440
  $ams-file-input-file-selector-button-margin-inline-end: $ams-space-m;
438
- $ams-file-input-file-selector-button-padding-block: $ams-space-s;
439
- $ams-file-input-file-selector-button-padding-inline: $ams-space-m;
440
- $ams-file-input-file-selector-button-hover-box-shadow: inset 0 0 0 $ams-border-width-s;
441
- $ams-file-input-file-selector-button-hover-color: $ams-color-interactive-hover;
442
- $ams-file-input-file-selector-button-disabled-color: $ams-color-interactive-disabled;
443
- $ams-file-input-file-selector-button-disabled-cursor: $ams-cursor-disabled;
444
441
  $ams-file-list-gap: $ams-space-m;
445
442
  $ams-file-list-padding-block: $ams-space-m;
446
443
  $ams-file-list-file-font-family: $ams-typography-font-family;
@@ -461,7 +458,6 @@ $ams-grid-medium-padding-inline: $ams-space-xl;
461
458
  $ams-grid-wide-padding-inline: $ams-space-2xl;
462
459
  $ams-heading-1-font-size: $ams-typography-heading-1-font-size;
463
460
  $ams-heading-1-line-height: $ams-typography-heading-1-line-height;
464
- $ams-heading-2-font-size: $ams-typography-heading-2-font-size;
465
461
  $ams-heading-2-line-height: $ams-typography-heading-2-line-height;
466
462
  $ams-heading-3-line-height: $ams-typography-heading-3-line-height;
467
463
  $ams-heading-4-line-height: $ams-typography-heading-4-line-height;
@@ -488,12 +484,17 @@ $ams-icon-button-inverse-hover-background-color: $ams-color-interactive-hover;
488
484
  $ams-icon-button-inverse-hover-color: $ams-color-interactive-inverse;
489
485
  $ams-icon-button-inverse-disabled-color: $ams-color-interactive-inverse;
490
486
  $ams-icon-button-inverse-disabled-background-color: $ams-color-interactive-disabled;
487
+ $ams-icon-heading-0-font-size: $ams-typography-heading-0-font-size; // Deprecated. Use ‘heading 1’ instead.
488
+ $ams-icon-heading-0-line-height: $ams-typography-heading-0-line-height; // Deprecated. Use ‘heading 1’ instead.
491
489
  $ams-icon-font-size: $ams-typography-body-text-font-size;
492
490
  $ams-icon-line-height: $ams-typography-body-text-line-height;
493
491
  $ams-icon-small-font-size: $ams-typography-body-text-small-font-size;
494
492
  $ams-icon-small-line-height: $ams-typography-body-text-small-line-height;
495
493
  $ams-icon-large-font-size: $ams-typography-body-text-large-font-size;
496
494
  $ams-icon-large-line-height: $ams-typography-body-text-large-line-height;
495
+ $ams-icon-heading-1-font-size: $ams-typography-heading-1-font-size;
496
+ $ams-icon-heading-1-line-height: $ams-typography-heading-1-line-height;
497
+ $ams-icon-heading-2-line-height: $ams-typography-heading-2-line-height;
497
498
  $ams-icon-heading-3-line-height: $ams-typography-heading-3-line-height;
498
499
  $ams-icon-heading-4-line-height: $ams-typography-heading-4-line-height;
499
500
  $ams-icon-heading-5-line-height: $ams-typography-heading-5-line-height;
@@ -510,7 +511,7 @@ $ams-invalid-form-alert-outline-offset: $ams-focus-outline-offset;
510
511
  $ams-label-color: $ams-color-text;
511
512
  $ams-label-font-family: $ams-typography-font-family;
512
513
  $ams-label-font-weight: $ams-typography-heading-font-weight;
513
- $ams-label-line-height: $ams-typography-heading-4-line-height;
514
+ $ams-label-line-height: $ams-typography-heading-3-line-height;
514
515
  $ams-label-text-wrap: $ams-typography-heading-text-wrap;
515
516
  $ams-link-list-gap: $ams-space-s;
516
517
  $ams-link-list-link-font-family: $ams-typography-font-family;
@@ -520,6 +521,7 @@ $ams-link-list-link-gap: $ams-space-s;
520
521
  $ams-link-list-link-line-height: $ams-typography-body-text-line-height;
521
522
  $ams-link-list-link-outline-offset: $ams-focus-outline-offset;
522
523
  $ams-link-list-link-text-decoration-line: $ams-links-subtle-text-decoration-line;
524
+ $ams-link-list-link-text-decoration-thickness: $ams-links-text-decoration-thickness;
523
525
  $ams-link-list-link-text-underline-offset: $ams-links-text-underline-offset;
524
526
  $ams-link-list-link-small-font-size: $ams-typography-body-text-small-font-size;
525
527
  $ams-link-list-link-small-line-height: $ams-typography-body-text-small-line-height;
@@ -528,31 +530,52 @@ $ams-link-list-link-large-line-height: $ams-typography-body-text-large-line-heig
528
530
  $ams-link-list-link-hover-text-decoration-line: $ams-links-subtle-hover-text-decoration-line;
529
531
  $ams-link-font-weight: $ams-typography-body-text-font-weight;
530
532
  $ams-link-outline-offset: $ams-focus-outline-offset;
533
+ $ams-link-text-decoration-thickness: $ams-links-text-decoration-thickness;
531
534
  $ams-link-text-underline-offset: $ams-links-text-underline-offset;
535
+ $ams-link-hover-text-decoration-thickness: $ams-links-hover-text-decoration-thickness;
532
536
  $ams-link-hover-text-underline-offset: $ams-links-hover-text-underline-offset;
533
537
  $ams-logo-block-size: $ams-space-xl;
534
538
  $ams-logo-subsite-color: $ams-color-text;
535
539
  $ams-mark-background-color: $ams-color-highlight-yellow;
540
+ $ams-menu-link-gap: $ams-space-s;
541
+ $ams-menu-link-outline-offset: $ams-focus-outline-offset;
542
+ $ams-menu-link-padding-block: $ams-space-s;
543
+ $ams-menu-link-padding-inline: $ams-space-s;
544
+ $ams-menu-link-text-decoration-line: $ams-links-subtle-text-decoration-line;
545
+ $ams-menu-link-text-decoration-thickness: $ams-links-text-decoration-thickness;
546
+ $ams-menu-link-text-underline-offset: $ams-links-text-underline-offset;
547
+ $ams-menu-link-hover-text-decoration-line: $ams-links-subtle-hover-text-decoration-line;
548
+ $ams-menu-link-wide-gap: $ams-space-xs;
549
+ $ams-menu-background-color: $ams-color-interactive;
550
+ $ams-menu-font-family: $ams-typography-font-family;
551
+ $ams-menu-font-size: $ams-typography-body-text-font-size;
552
+ $ams-menu-font-weight: $ams-typography-body-text-font-weight;
553
+ $ams-menu-line-height: $ams-typography-body-text-line-height;
554
+ $ams-menu-padding-block: $ams-space-m;
555
+ $ams-menu-wide-padding-inline: $ams-space-s;
556
+ $ams-menu-list-gap: $ams-space-m;
536
557
  $ams-ordered-list-color: $ams-color-text;
537
558
  $ams-ordered-list-font-family: $ams-typography-font-family;
538
559
  $ams-ordered-list-font-size: $ams-typography-body-text-font-size;
539
560
  $ams-ordered-list-font-weight: $ams-typography-body-text-font-weight;
540
- $ams-ordered-list-gap: $ams-space-m;
561
+ $ams-ordered-list-gap: $ams-space-s;
541
562
  $ams-ordered-list-line-height: $ams-typography-body-text-line-height;
542
563
  $ams-ordered-list-small-font-size: $ams-typography-body-text-small-font-size;
543
564
  $ams-ordered-list-small-line-height: $ams-typography-body-text-small-line-height;
544
565
  $ams-ordered-list-inverse-color: $ams-color-text-inverse;
545
566
  $ams-ordered-list-ordered-list-gap: $ams-space-s;
567
+ $ams-ordered-list-ordered-list-padding-block-end: $ams-space-s;
546
568
  $ams-ordered-list-ordered-list-padding-block-start: $ams-space-s;
547
569
  $ams-page-footer-menu-column-gap: $ams-space-l;
548
570
  $ams-page-footer-menu-padding-block: $ams-space-l;
549
571
  $ams-page-footer-menu-row-gap: $ams-space-xs;
550
572
  $ams-page-footer-menu-link-font-family: $ams-typography-font-family;
551
- $ams-page-footer-menu-link-font-size: $ams-typography-body-text-small-font-size;
573
+ $ams-page-footer-menu-link-font-size: $ams-typography-body-text-font-size;
552
574
  $ams-page-footer-menu-link-font-weight: $ams-typography-body-text-font-weight;
553
- $ams-page-footer-menu-link-line-height: $ams-typography-body-text-small-line-height;
575
+ $ams-page-footer-menu-link-line-height: $ams-typography-body-text-line-height;
554
576
  $ams-page-footer-menu-link-outline-offset: $ams-focus-outline-offset;
555
577
  $ams-page-footer-menu-link-text-decoration-line: $ams-links-subtle-text-decoration-line;
578
+ $ams-page-footer-menu-link-text-decoration-thickness: $ams-links-text-decoration-thickness;
556
579
  $ams-page-footer-menu-link-text-underline-offset: $ams-links-text-underline-offset;
557
580
  $ams-page-footer-menu-link-hover-text-decoration-line: $ams-links-subtle-hover-text-decoration-line;
558
581
  $ams-page-header-font-family: $ams-typography-font-family;
@@ -561,7 +584,7 @@ $ams-page-header-logo-link-column-gap: $ams-space-m;
561
584
  $ams-page-header-logo-link-outline-offset: $ams-focus-outline-offset;
562
585
  $ams-page-header-brand-name-color: $ams-color-text;
563
586
  $ams-page-header-brand-name-font-weight: $ams-typography-heading-font-weight;
564
- $ams-page-header-brand-name-line-height: $ams-typography-heading-4-line-height;
587
+ $ams-page-header-brand-name-line-height: $ams-typography-heading-3-line-height;
565
588
  $ams-page-header-brand-name-text-wrap: $ams-typography-heading-text-wrap;
566
589
  $ams-page-header-mega-menu-button-cursor: $ams-cursor-interactive;
567
590
  $ams-page-header-mega-menu-button-label-open-font-weight: $ams-typography-body-text-bold-font-weight;
@@ -575,6 +598,7 @@ $ams-page-header-menu-item-line-height: $ams-typography-body-text-line-height;
575
598
  $ams-page-header-menu-item-outline-offset: $ams-focus-outline-offset;
576
599
  $ams-page-header-menu-item-padding-block: $ams-space-xs;
577
600
  $ams-page-header-menu-link-text-decoration-line: $ams-links-subtle-text-decoration-line;
601
+ $ams-page-header-menu-link-text-decoration-thickness: $ams-links-text-decoration-thickness;
578
602
  $ams-page-header-menu-link-text-underline-offset: $ams-links-text-underline-offset;
579
603
  $ams-page-header-menu-link-hover-text-decoration-line: $ams-links-subtle-hover-text-decoration-line;
580
604
  $ams-page-header-navigation-column-gap: $ams-space-l;
@@ -595,6 +619,7 @@ $ams-pagination-link-gap: $ams-space-xs;
595
619
  $ams-pagination-link-outline-offset: $ams-focus-outline-offset;
596
620
  $ams-pagination-link-padding-inline: $ams-space-s;
597
621
  $ams-pagination-link-text-decoration-line: $ams-links-subtle-text-decoration-line;
622
+ $ams-pagination-link-text-decoration-thickness: $ams-links-text-decoration-thickness;
598
623
  $ams-pagination-link-text-underline-offset: $ams-links-text-underline-offset;
599
624
  $ams-pagination-link-current-font-weight: $ams-typography-body-text-bold-font-weight;
600
625
  $ams-pagination-link-hover-text-decoration-line: $ams-links-subtle-hover-text-decoration-line;
@@ -608,23 +633,10 @@ $ams-paragraph-small-font-size: $ams-typography-body-text-small-font-size;
608
633
  $ams-paragraph-small-line-height: $ams-typography-body-text-small-line-height;
609
634
  $ams-paragraph-large-font-size: $ams-typography-body-text-large-font-size;
610
635
  $ams-paragraph-large-line-height: $ams-typography-body-text-large-line-height;
611
- $ams-password-input-background-color: $ams-color-background;
612
- $ams-password-input-border-width: $ams-border-width-m;
613
- $ams-password-input-color: $ams-color-text;
614
- $ams-password-input-font-family: $ams-typography-font-family;
615
- $ams-password-input-font-size: $ams-typography-body-text-font-size;
616
- $ams-password-input-font-weight: $ams-typography-body-text-font-weight;
617
- $ams-password-input-line-height: $ams-typography-body-text-line-height;
618
- $ams-password-input-outline-offset: $ams-focus-outline-offset;
619
- $ams-password-input-padding-block: $ams-space-s;
620
- $ams-password-input-padding-inline: $ams-space-m;
621
- $ams-password-input-disabled-color: $ams-color-interactive-disabled;
636
+ $ams-password-input-border-color: $ams-inputs-border-color;
637
+ $ams-password-input-border-style: $ams-inputs-border-style;
638
+ $ams-password-input-line-height: $ams-inputs-line-height;
622
639
  $ams-password-input-disabled-cursor: $ams-cursor-disabled;
623
- $ams-password-input-hover-box-shadow: inset 0 0 0 $ams-border-width-s;
624
- $ams-password-input-invalid-border-color: $ams-color-interactive-invalid;
625
- $ams-password-input-invalid-hover-border-color: $ams-color-interactive-invalid-hover;
626
- $ams-password-input-invalid-hover-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-invalid-hover;
627
- $ams-password-input-placeholder-color: $ams-color-text-secondary;
628
640
  $ams-radio-color: $ams-color-text;
629
641
  $ams-radio-cursor: $ams-cursor-interactive;
630
642
  $ams-radio-font-family: $ams-typography-font-family;
@@ -633,6 +645,7 @@ $ams-radio-font-weight: $ams-typography-body-text-font-weight;
633
645
  $ams-radio-gap: $ams-space-s;
634
646
  $ams-radio-line-height: $ams-typography-body-text-line-height;
635
647
  $ams-radio-outline-offset: $ams-focus-outline-offset;
648
+ $ams-radio-text-decoration-thickness: $ams-links-text-decoration-thickness;
636
649
  $ams-radio-text-underline-offset: $ams-links-text-underline-offset;
637
650
  $ams-radio-checked-indicator-fill: $ams-color-interactive;
638
651
  $ams-radio-checked-indicator-disabled-fill: $ams-color-interactive-disabled;
@@ -660,49 +673,25 @@ $ams-row-gap-small: $ams-space-s;
660
673
  $ams-row-gap-medium: $ams-space-m;
661
674
  $ams-row-gap-large: $ams-space-l;
662
675
  $ams-row-gap-x-large: $ams-space-xl;
663
- $ams-search-field-input-background-color: $ams-color-background;
664
- $ams-search-field-input-border-width: $ams-border-width-m;
665
- $ams-search-field-input-color: $ams-color-text;
666
- $ams-search-field-input-font-family: $ams-typography-font-family;
667
- $ams-search-field-input-font-size: $ams-typography-body-text-font-size;
668
- $ams-search-field-input-font-weight: $ams-typography-body-text-font-weight;
669
- $ams-search-field-input-line-height: $ams-typography-body-text-line-height;
670
- $ams-search-field-input-outline-offset: $ams-focus-outline-offset;
671
- $ams-search-field-input-padding-block: $ams-space-s;
672
- $ams-search-field-input-padding-inline: $ams-space-m;
676
+ $ams-search-field-input-border-color: $ams-inputs-border-color;
677
+ $ams-search-field-input-border-style: $ams-inputs-border-style;
678
+ $ams-search-field-input-line-height: $ams-inputs-line-height;
673
679
  $ams-search-field-input-cancel-button-block-size: $ams-typography-body-text-font-size;
674
680
  $ams-search-field-input-cancel-button-color: $ams-color-interactive;
675
681
  $ams-search-field-input-cancel-button-cursor: $ams-cursor-interactive;
676
682
  $ams-search-field-input-cancel-button-inline-size: $ams-typography-body-text-font-size;
677
- $ams-search-field-input-hover-box-shadow: inset 0 0 0 $ams-border-width-s;
678
- $ams-search-field-input-invalid-border-color: $ams-color-interactive-invalid;
679
- $ams-search-field-input-invalid-hover-border-color: $ams-color-interactive-invalid-hover;
680
- $ams-search-field-input-invalid-hover-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-invalid-hover;
681
- $ams-search-field-input-placeholder-color: $ams-color-text-secondary;
682
- $ams-select-background-color: $ams-color-background;
683
683
  $ams-select-background-position: right $ams-space-m center;
684
- $ams-select-border-width: $ams-border-width-m;
685
- $ams-select-color: $ams-color-text;
686
- $ams-select-font-family: $ams-typography-font-family;
687
- $ams-select-font-size: $ams-typography-body-text-font-size;
688
- $ams-select-font-weight: $ams-typography-body-text-font-weight;
689
- $ams-select-line-height: $ams-typography-body-text-line-height;
690
- $ams-select-outline-offset: $ams-focus-outline-offset;
691
- $ams-select-padding-block: $ams-space-s;
692
- $ams-select-padding-inline: $ams-space-m calc(2 * $ams-space-m + 1em);
693
- $ams-select-disabled-color: $ams-color-interactive-disabled;
684
+ $ams-select-border-color: $ams-inputs-border-color;
685
+ $ams-select-border-style: $ams-inputs-border-style;
686
+ $ams-select-line-height: $ams-inputs-line-height;
694
687
  $ams-select-disabled-cursor: $ams-cursor-disabled;
695
- $ams-select-hover-box-shadow: inset 0 0 0 $ams-border-width-s;
696
- $ams-select-invalid-border-color: $ams-color-interactive-invalid;
697
- $ams-select-invalid-hover-border-color: $ams-color-interactive-invalid-hover;
698
- $ams-select-invalid-hover-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-invalid-hover;
699
688
  $ams-select-option-disabled-color: $ams-color-interactive-disabled;
700
689
  $ams-skip-link-background-color: $ams-color-interactive;
701
690
  $ams-skip-link-color: $ams-color-text-inverse;
702
691
  $ams-skip-link-font-family: $ams-typography-font-family;
703
- $ams-skip-link-font-size: $ams-typography-body-text-small-font-size;
692
+ $ams-skip-link-font-size: $ams-typography-body-text-font-size;
704
693
  $ams-skip-link-font-weight: $ams-typography-body-text-font-weight;
705
- $ams-skip-link-line-height: $ams-typography-body-text-small-line-height;
694
+ $ams-skip-link-line-height: $ams-typography-body-text-line-height;
706
695
  $ams-skip-link-outline-offset: $ams-focus-outline-offset;
707
696
  $ams-skip-link-padding-block: $ams-space-s;
708
697
  $ams-skip-link-padding-inline: $ams-space-m;
@@ -714,16 +703,21 @@ $ams-spotlight-lime-background-color: $ams-color-highlight-lime;
714
703
  $ams-spotlight-magenta-background-color: $ams-color-highlight-magenta;
715
704
  $ams-spotlight-orange-background-color: $ams-color-highlight-orange;
716
705
  $ams-spotlight-yellow-background-color: $ams-color-highlight-yellow;
706
+ $ams-standalone-link-hover-text-decoration-thickness: $ams-links-hover-text-decoration-thickness; // Use `ams.standalone-link.text-decoration-thickness` instead
707
+ $ams-standalone-link-hover-text-underline-offset: $ams-links-hover-text-underline-offset; // Use `ams.standalone-link.text-underline-offset` instead
708
+ $ams-standalone-link-hover-text-decoration-line: $ams-links-subtle-hover-text-decoration-line;
709
+ $ams-standalone-link-with-icon-text-decoration-line: $ams-links-subtle-text-decoration-line; // Use `ams.standalone-link.text-decoration-line` instead
710
+ $ams-standalone-link-with-icon-text-decoration-thickness: $ams-links-text-decoration-thickness; // Use `ams.standalone-link.text-decoration-thickness` instead
711
+ $ams-standalone-link-with-icon-hover-text-decoration-line: $ams-links-subtle-hover-text-decoration-line; // Use `ams.standalone-link.hover.text-decoration-line` instead
717
712
  $ams-standalone-link-column-gap: $ams-space-s;
718
713
  $ams-standalone-link-font-family: $ams-typography-font-family;
719
714
  $ams-standalone-link-font-size: $ams-typography-body-text-font-size;
720
715
  $ams-standalone-link-font-weight: $ams-typography-body-text-font-weight;
721
716
  $ams-standalone-link-line-height: $ams-typography-body-text-line-height;
722
717
  $ams-standalone-link-outline-offset: $ams-focus-outline-offset;
718
+ $ams-standalone-link-text-decoration-line: $ams-links-subtle-text-decoration-line;
719
+ $ams-standalone-link-text-decoration-thickness: $ams-links-text-decoration-thickness;
723
720
  $ams-standalone-link-text-underline-offset: $ams-links-text-underline-offset;
724
- $ams-standalone-link-hover-text-underline-offset: $ams-links-hover-text-underline-offset;
725
- $ams-standalone-link-with-icon-text-decoration-line: $ams-links-subtle-text-decoration-line;
726
- $ams-standalone-link-with-icon-hover-text-decoration-line: $ams-links-subtle-hover-text-decoration-line;
727
721
  $ams-switch-cursor: $ams-cursor-interactive;
728
722
  $ams-switch-outline-offset: $ams-focus-outline-offset;
729
723
  $ams-switch-thumb-background-color: $ams-color-background;
@@ -732,20 +726,21 @@ $ams-switch-thumb-hover-box-shadow: 0 0 0 $ams-border-width-m $ams-switch-thumb-
732
726
  $ams-switch-checked-background-color: $ams-color-interactive;
733
727
  $ams-switch-disabled-background-color: $ams-color-interactive-disabled;
734
728
  $ams-switch-disabled-cursor: $ams-cursor-disabled;
729
+ $ams-table-of-contents-heading-font-weight: $ams-typography-heading-font-weight;
730
+ $ams-table-of-contents-heading-line-height: $ams-typography-heading-4-line-height;
735
731
  $ams-table-of-contents-font-family: $ams-typography-font-family;
736
732
  $ams-table-of-contents-font-size: $ams-typography-body-text-font-size;
737
733
  $ams-table-of-contents-font-weight: $ams-typography-body-text-font-weight;
738
- $ams-table-of-contents-gap: $ams-space-m;
734
+ $ams-table-of-contents-gap: $ams-space-s;
739
735
  $ams-table-of-contents-line-height: $ams-typography-body-text-line-height;
740
736
  $ams-table-of-contents-link-outline-offset: $ams-focus-outline-offset;
741
737
  $ams-table-of-contents-link-text-decoration-line: $ams-links-subtle-text-decoration-line;
738
+ $ams-table-of-contents-link-text-decoration-thickness: $ams-links-text-decoration-thickness;
742
739
  $ams-table-of-contents-link-text-underline-offset: $ams-links-text-underline-offset;
743
740
  $ams-table-of-contents-link-hover-text-decoration-line: $ams-links-subtle-hover-text-decoration-line;
744
741
  $ams-table-of-contents-list-gap: $ams-space-s;
745
742
  $ams-table-of-contents-list-list-padding-block-start: $ams-space-s;
746
743
  $ams-table-of-contents-list-list-padding-inline-start: $ams-space-l;
747
- $ams-table-of-contents-heading-font-weight: $ams-typography-heading-font-weight;
748
- $ams-table-of-contents-heading-line-height: $ams-typography-heading-4-line-height;
749
744
  $ams-table-color: $ams-color-text;
750
745
  $ams-table-font-family: $ams-typography-font-family;
751
746
  $ams-table-font-size: $ams-typography-body-text-font-size;
@@ -773,130 +768,213 @@ $ams-tabs-button-selected-box-shadow: inset 0 calc($ams-border-width-xl * -1);
773
768
  $ams-tabs-button-selected-font-weight: $ams-typography-body-text-bold-font-weight;
774
769
  $ams-tabs-button-disabled-color: $ams-color-interactive-disabled;
775
770
  $ams-tabs-button-disabled-cursor: $ams-cursor-disabled;
776
- $ams-text-area-background-color: $ams-color-background;
777
- $ams-text-area-border-width: $ams-border-width-m;
778
- $ams-text-area-color: $ams-color-text;
779
- $ams-text-area-font-family: $ams-typography-font-family;
780
- $ams-text-area-font-size: $ams-typography-body-text-font-size;
781
- $ams-text-area-font-weight: $ams-typography-body-text-font-weight;
782
- $ams-text-area-line-height: $ams-typography-body-text-line-height;
771
+ $ams-text-area-border-color: $ams-inputs-border-color;
772
+ $ams-text-area-border-style: $ams-inputs-border-style;
773
+ $ams-text-area-line-height: $ams-inputs-line-height;
783
774
  $ams-text-area-min-block-size: calc($ams-typography-body-text-line-height * 1em + 2 * $ams-text-area-padding-block);
784
- $ams-text-area-outline-offset: $ams-focus-outline-offset;
785
- $ams-text-area-padding-block: $ams-space-s;
786
- $ams-text-area-padding-inline: $ams-space-m;
787
- $ams-text-area-disabled-color: $ams-color-interactive-disabled;
788
775
  $ams-text-area-disabled-cursor: $ams-cursor-disabled;
789
- $ams-text-area-hover-box-shadow: inset 0 0 0 $ams-border-width-s;
790
- $ams-text-area-invalid-border-color: $ams-color-interactive-invalid;
791
- $ams-text-area-invalid-hover-border-color: $ams-color-interactive-invalid-hover;
792
- $ams-text-area-invalid-hover-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-invalid-hover;
793
- $ams-text-area-placeholder-color: $ams-color-text-secondary;
794
- $ams-text-input-background-color: $ams-color-background;
795
- $ams-text-input-border-width: $ams-border-width-m;
796
- $ams-text-input-color: $ams-color-text;
797
- $ams-text-input-font-family: $ams-typography-font-family;
798
- $ams-text-input-font-size: $ams-typography-body-text-font-size;
799
- $ams-text-input-font-weight: $ams-typography-body-text-font-weight;
800
- $ams-text-input-line-height: $ams-typography-body-text-line-height;
801
- $ams-text-input-outline-offset: $ams-focus-outline-offset;
802
- $ams-text-input-padding-block: $ams-space-s;
803
- $ams-text-input-padding-inline: $ams-space-m;
804
- $ams-text-input-disabled-color: $ams-color-interactive-disabled;
776
+ $ams-text-input-border-color: $ams-inputs-border-color;
777
+ $ams-text-input-border-style: $ams-inputs-border-style;
778
+ $ams-text-input-line-height: $ams-inputs-line-height;
805
779
  $ams-text-input-disabled-cursor: $ams-cursor-disabled;
806
- $ams-text-input-hover-box-shadow: inset 0 0 0 $ams-border-width-s;
807
- $ams-text-input-invalid-border-color: $ams-color-interactive-invalid;
808
- $ams-text-input-invalid-hover-border-color: $ams-color-interactive-invalid-hover;
809
- $ams-text-input-invalid-hover-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-invalid-hover;
810
- $ams-text-input-placeholder-color: $ams-color-text-secondary;
811
- $ams-time-input-background-color: $ams-color-background;
812
- $ams-time-input-border-width: $ams-border-width-m;
813
- $ams-time-input-color: $ams-color-text;
814
- $ams-time-input-font-family: $ams-typography-font-family;
815
- $ams-time-input-font-size: $ams-typography-body-text-font-size;
816
- $ams-time-input-font-weight: $ams-typography-body-text-font-weight;
817
- $ams-time-input-line-height: $ams-typography-body-text-line-height;
818
- $ams-time-input-outline-offset: $ams-focus-outline-offset;
819
- $ams-time-input-padding-block: $ams-space-s;
820
- $ams-time-input-padding-inline: $ams-space-m;
821
- $ams-time-input-calender-picker-indicator-cursor: $ams-cursor-interactive;
822
- $ams-time-input-disabled-color: $ams-color-interactive-disabled;
823
780
  $ams-time-input-disabled-cursor: $ams-cursor-disabled;
824
- $ams-time-input-hover-box-shadow: inset 0 0 0 $ams-border-width-s;
825
- $ams-time-input-invalid-border-color: $ams-color-interactive-invalid;
826
- $ams-time-input-invalid-hover-border-color: $ams-color-interactive-invalid-hover;
827
- $ams-time-input-invalid-hover-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-invalid-hover;
781
+ $ams-time-input-calender-picker-indicator-cursor: $ams-cursor-interactive; // Use the token with ‘calendar’ spelled correctly instead
782
+ $ams-time-input-border-color: $ams-inputs-border-color;
783
+ $ams-time-input-border-style: $ams-inputs-border-style;
784
+ $ams-time-input-line-height: $ams-inputs-line-height;
785
+ $ams-time-input-calendar-picker-indicator-cursor: $ams-cursor-interactive;
828
786
  $ams-unordered-list-color: $ams-color-text;
829
787
  $ams-unordered-list-font-family: $ams-typography-font-family;
830
788
  $ams-unordered-list-font-size: $ams-typography-body-text-font-size;
831
789
  $ams-unordered-list-font-weight: $ams-typography-body-text-font-weight;
832
- $ams-unordered-list-gap: $ams-space-m;
790
+ $ams-unordered-list-gap: $ams-space-s;
833
791
  $ams-unordered-list-line-height: $ams-typography-body-text-line-height;
834
792
  $ams-unordered-list-inverse-color: $ams-color-text-inverse;
835
793
  $ams-unordered-list-small-font-size: $ams-typography-body-text-small-font-size;
836
794
  $ams-unordered-list-small-line-height: $ams-typography-body-text-small-line-height;
837
795
  $ams-unordered-list-unordered-list-gap: $ams-space-s;
796
+ $ams-unordered-list-unordered-list-padding-block-end: $ams-space-s;
838
797
  $ams-unordered-list-unordered-list-padding-block-start: $ams-space-s;
839
- $ams-accordion-button-font-size: $ams-typography-heading-4-font-size;
798
+ $ams-accordion-button-font-size: $ams-typography-heading-3-font-size;
840
799
  $ams-breadcrumb-link-color: $ams-links-color;
841
- $ams-breadcrumb-link-text-decoration-thickness: $ams-links-text-decoration-thickness;
842
800
  $ams-breadcrumb-link-hover-color: $ams-links-hover-color;
843
801
  $ams-card-link-color: $ams-links-color;
844
- $ams-card-link-text-decoration-thickness: $ams-links-text-decoration-thickness;
845
802
  $ams-card-link-hover-color: $ams-links-hover-color;
846
803
  $ams-checkbox-icon-container-block-size: calc($ams-checkbox-font-size * $ams-checkbox-line-height);
804
+ $ams-checkbox-icon-container-inline-size: $ams-checkbox-font-size;
805
+ $ams-date-input-disabled-color: $ams-inputs-disabled-color;
806
+ $ams-date-input-hover-box-shadow: $ams-inputs-hover-box-shadow;
807
+ $ams-date-input-background-color: $ams-inputs-background-color;
808
+ $ams-date-input-border-width: $ams-inputs-border-width;
809
+ $ams-date-input-color: $ams-inputs-color;
810
+ $ams-date-input-font-family: $ams-inputs-font-family;
811
+ $ams-date-input-font-size: $ams-inputs-font-size;
812
+ $ams-date-input-font-weight: $ams-inputs-font-weight;
813
+ $ams-date-input-outline-offset: $ams-inputs-outline-offset;
814
+ $ams-date-input-padding-block: $ams-inputs-padding-block;
815
+ $ams-date-input-padding-inline: $ams-inputs-padding-inline;
816
+ $ams-date-input-invalid-border-color: $ams-inputs-invalid-border-color;
817
+ $ams-date-input-invalid-hover-border-color: $ams-inputs-invalid-hover-border-color;
818
+ $ams-date-input-invalid-hover-box-shadow: $ams-inputs-invalid-hover-box-shadow;
847
819
  $ams-dialog-border-color: $ams-dialog-background-color;
848
- $ams-field-set-legend-font-size: $ams-typography-heading-4-font-size;
820
+ $ams-field-set-legend-font-size: $ams-typography-heading-3-font-size;
821
+ $ams-file-input-background-color: $ams-inputs-background-color;
822
+ $ams-file-input-border-width: $ams-inputs-border-width;
823
+ $ams-file-input-color: $ams-inputs-color;
824
+ $ams-file-input-font-family: $ams-inputs-font-family;
825
+ $ams-file-input-font-size: $ams-inputs-font-size;
826
+ $ams-file-input-font-weight: $ams-inputs-font-weight;
827
+ $ams-file-input-outline-offset: $ams-inputs-outline-offset;
828
+ $ams-file-input-disabled-color: $ams-inputs-disabled-color;
829
+ $ams-file-input-file-selector-button-background-color: $ams-button-secondary-background-color;
830
+ $ams-file-input-file-selector-button-border-width: $ams-button-border-width;
831
+ $ams-file-input-file-selector-button-color: $ams-button-secondary-color;
832
+ $ams-file-input-file-selector-button-cursor: $ams-button-cursor;
833
+ $ams-file-input-file-selector-button-line-height: $ams-button-line-height;
834
+ $ams-file-input-file-selector-button-padding-block: $ams-button-padding-block;
835
+ $ams-file-input-file-selector-button-padding-inline: $ams-button-padding-inline;
836
+ $ams-file-input-file-selector-button-disabled-color: $ams-button-secondary-disabled-color;
837
+ $ams-file-input-file-selector-button-disabled-cursor: $ams-button-disabled-cursor;
838
+ $ams-file-input-file-selector-button-hover-box-shadow: $ams-button-secondary-hover-box-shadow;
839
+ $ams-file-input-file-selector-button-hover-color: $ams-button-secondary-hover-color;
840
+ $ams-heading-2-font-size: $ams-typography-heading-2-font-size;
849
841
  $ams-heading-3-font-size: $ams-typography-heading-3-font-size;
850
842
  $ams-heading-4-font-size: $ams-typography-heading-4-font-size;
851
843
  $ams-heading-5-font-size: $ams-typography-heading-5-font-size;
852
844
  $ams-heading-6-font-size: $ams-typography-heading-6-font-size;
845
+ $ams-icon-heading-2-font-size: $ams-typography-heading-2-font-size;
853
846
  $ams-icon-heading-3-font-size: $ams-typography-heading-3-font-size;
854
847
  $ams-icon-heading-4-font-size: $ams-typography-heading-4-font-size;
855
848
  $ams-icon-heading-5-font-size: $ams-typography-heading-5-font-size;
856
849
  $ams-icon-heading-6-font-size: $ams-typography-heading-6-font-size;
857
- $ams-label-font-size: $ams-typography-heading-4-font-size;
850
+ $ams-label-font-size: $ams-typography-heading-3-font-size;
858
851
  $ams-link-list-link-color: $ams-links-color;
859
- $ams-link-list-link-text-decoration-thickness: $ams-links-text-decoration-thickness;
860
852
  $ams-link-list-link-hover-color: $ams-links-hover-color;
861
853
  $ams-link-list-link-contrast-color: $ams-links-contrast-color;
862
854
  $ams-link-list-link-contrast-hover-color: $ams-links-contrast-hover-color;
863
855
  $ams-link-list-link-inverse-color: $ams-links-inverse-color;
864
856
  $ams-link-list-link-inverse-hover-color: $ams-links-inverse-hover-color;
865
857
  $ams-link-color: $ams-links-color;
866
- $ams-link-text-decoration-thickness: $ams-links-text-decoration-thickness;
867
858
  $ams-link-hover-color: $ams-links-hover-color;
868
- $ams-link-hover-text-decoration-thickness: $ams-links-hover-text-decoration-thickness;
869
859
  $ams-link-contrast-color: $ams-links-contrast-color;
870
860
  $ams-link-contrast-hover-color: $ams-links-contrast-hover-color;
871
861
  $ams-link-inverse-color: $ams-links-inverse-color;
872
862
  $ams-link-inverse-hover-color: $ams-links-inverse-hover-color;
863
+ $ams-menu-link-contrast-color: $ams-links-contrast-color; // The menu has a dark background now, so this is no longer needed.
864
+ $ams-menu-link-contrast-hover-color: $ams-links-contrast-hover-color; // The menu has a dark background now, so this is no longer needed.
865
+ $ams-menu-link-inverse-color: $ams-links-inverse-color; // The menu has a dark background now, so this is no longer needed.
866
+ $ams-menu-link-inverse-hover-color: $ams-links-inverse-hover-color; // The menu has a dark background now, so this is no longer needed.
867
+ $ams-menu-link-color: $ams-links-inverse-color;
868
+ $ams-menu-link-hover-color: $ams-links-inverse-hover-color;
869
+ $ams-menu-wide-padding-block: calc($ams-logo-block-size + 2 * $ams-page-header-padding-block) $ams-space-m;
873
870
  $ams-page-footer-menu-padding-inline: $ams-grid-padding-inline;
874
871
  $ams-page-footer-menu-medium-padding-inline: $ams-grid-medium-padding-inline;
875
872
  $ams-page-footer-menu-wide-padding-inline: $ams-grid-wide-padding-inline;
876
873
  $ams-page-footer-menu-link-color: $ams-links-color;
877
- $ams-page-footer-menu-link-text-decoration-thickness: $ams-links-text-decoration-thickness;
878
874
  $ams-page-footer-menu-link-hover-color: $ams-links-hover-color;
879
875
  $ams-page-header-padding-inline: $ams-grid-padding-inline; // Must be the Grid inline padding, to make sure Header and Grid line up
880
876
  $ams-page-header-medium-padding-inline: $ams-grid-medium-padding-inline;
881
877
  $ams-page-header-wide-padding-inline: $ams-grid-wide-padding-inline;
882
- $ams-page-header-brand-name-font-size: $ams-typography-heading-4-font-size;
878
+ $ams-page-header-brand-name-font-size: $ams-typography-heading-3-font-size;
883
879
  $ams-page-header-menu-item-color: $ams-links-color;
884
880
  $ams-page-header-menu-item-hover-color: $ams-links-hover-color;
885
- $ams-page-header-menu-link-text-decoration-thickness: $ams-links-text-decoration-thickness;
886
881
  $ams-pagination-link-color: $ams-links-color;
887
- $ams-pagination-link-text-decoration-thickness: $ams-links-text-decoration-thickness;
888
882
  $ams-pagination-link-hover-color: $ams-links-hover-color;
889
- $ams-radio-text-decoration-thickness: $ams-links-text-decoration-thickness;
883
+ $ams-password-input-background-color: $ams-inputs-background-color;
884
+ $ams-password-input-border-width: $ams-inputs-border-width;
885
+ $ams-password-input-color: $ams-inputs-color;
886
+ $ams-password-input-font-family: $ams-inputs-font-family;
887
+ $ams-password-input-font-size: $ams-inputs-font-size;
888
+ $ams-password-input-font-weight: $ams-inputs-font-weight;
889
+ $ams-password-input-outline-offset: $ams-inputs-outline-offset;
890
+ $ams-password-input-padding-block: $ams-inputs-padding-block;
891
+ $ams-password-input-padding-inline: $ams-inputs-padding-inline;
892
+ $ams-password-input-disabled-color: $ams-inputs-disabled-color;
893
+ $ams-password-input-hover-box-shadow: $ams-inputs-hover-box-shadow;
894
+ $ams-password-input-invalid-border-color: $ams-inputs-invalid-border-color;
895
+ $ams-password-input-invalid-hover-border-color: $ams-inputs-invalid-hover-border-color;
896
+ $ams-password-input-invalid-hover-box-shadow: $ams-inputs-invalid-hover-box-shadow;
897
+ $ams-password-input-placeholder-color: $ams-inputs-placeholder-color;
890
898
  $ams-radio-icon-container-block-size: calc($ams-radio-font-size * $ams-radio-line-height);
899
+ $ams-radio-icon-container-inline-size: $ams-radio-font-size;
900
+ $ams-search-field-input-background-color: $ams-inputs-background-color;
901
+ $ams-search-field-input-border-width: $ams-inputs-border-width;
902
+ $ams-search-field-input-color: $ams-inputs-color;
903
+ $ams-search-field-input-font-family: $ams-inputs-font-family;
904
+ $ams-search-field-input-font-size: $ams-inputs-font-size;
905
+ $ams-search-field-input-font-weight: $ams-inputs-font-weight;
906
+ $ams-search-field-input-outline-offset: $ams-inputs-outline-offset;
907
+ $ams-search-field-input-padding-block: $ams-inputs-padding-block;
908
+ $ams-search-field-input-padding-inline: $ams-inputs-padding-inline;
909
+ $ams-search-field-input-hover-box-shadow: $ams-inputs-hover-box-shadow;
910
+ $ams-search-field-input-invalid-border-color: $ams-inputs-invalid-border-color;
911
+ $ams-search-field-input-invalid-hover-border-color: $ams-inputs-invalid-hover-border-color;
912
+ $ams-search-field-input-invalid-hover-box-shadow: $ams-inputs-invalid-hover-box-shadow;
913
+ $ams-search-field-input-placeholder-color: $ams-inputs-placeholder-color;
914
+ $ams-select-background-color: $ams-inputs-background-color;
915
+ $ams-select-border-width: $ams-inputs-border-width;
916
+ $ams-select-color: $ams-inputs-color;
917
+ $ams-select-font-family: $ams-inputs-font-family;
918
+ $ams-select-font-size: $ams-inputs-font-size;
919
+ $ams-select-font-weight: $ams-inputs-font-weight;
920
+ $ams-select-outline-offset: $ams-inputs-outline-offset;
921
+ $ams-select-padding-block: $ams-inputs-padding-block;
922
+ $ams-select-padding-inline: $ams-inputs-padding-inline calc(2 * $ams-inputs-padding-inline + 1em);
923
+ $ams-select-disabled-color: $ams-inputs-disabled-color;
924
+ $ams-select-hover-box-shadow: $ams-inputs-hover-box-shadow;
925
+ $ams-select-invalid-border-color: $ams-inputs-invalid-border-color;
926
+ $ams-select-invalid-hover-border-color: $ams-inputs-invalid-hover-border-color;
927
+ $ams-select-invalid-hover-box-shadow: $ams-inputs-invalid-hover-box-shadow;
928
+ $ams-standalone-link-hover-color: $ams-links-hover-color;
891
929
  $ams-standalone-link-color: $ams-links-color;
892
- $ams-standalone-link-text-decoration-thickness: $ams-links-text-decoration-thickness;
893
930
  $ams-standalone-link-contrast-color: $ams-links-contrast-color;
894
931
  $ams-standalone-link-contrast-hover-color: $ams-links-contrast-hover-color;
895
- $ams-standalone-link-hover-color: $ams-links-hover-color;
896
- $ams-standalone-link-hover-text-decoration-thickness: $ams-links-hover-text-decoration-thickness;
897
932
  $ams-standalone-link-inverse-color: $ams-links-inverse-color;
898
933
  $ams-standalone-link-inverse-hover-color: $ams-links-inverse-hover-color;
934
+ $ams-table-of-contents-heading-font-size: $ams-typography-heading-4-font-size;
899
935
  $ams-table-of-contents-link-color: $ams-links-color;
900
- $ams-table-of-contents-link-text-decoration-thickness: $ams-links-text-decoration-thickness;
901
936
  $ams-table-of-contents-link-hover-color: $ams-links-hover-color;
902
- $ams-table-of-contents-heading-font-size: $ams-typography-heading-4-font-size;
937
+ $ams-text-area-background-color: $ams-inputs-background-color;
938
+ $ams-text-area-border-width: $ams-inputs-border-width;
939
+ $ams-text-area-color: $ams-inputs-color;
940
+ $ams-text-area-font-family: $ams-inputs-font-family;
941
+ $ams-text-area-font-size: $ams-inputs-font-size;
942
+ $ams-text-area-font-weight: $ams-inputs-font-weight;
943
+ $ams-text-area-outline-offset: $ams-inputs-outline-offset;
944
+ $ams-text-area-padding-block: $ams-inputs-padding-block;
945
+ $ams-text-area-padding-inline: $ams-inputs-padding-inline;
946
+ $ams-text-area-disabled-color: $ams-inputs-disabled-color;
947
+ $ams-text-area-hover-box-shadow: $ams-inputs-hover-box-shadow;
948
+ $ams-text-area-invalid-border-color: $ams-inputs-invalid-border-color;
949
+ $ams-text-area-invalid-hover-border-color: $ams-inputs-invalid-hover-border-color;
950
+ $ams-text-area-invalid-hover-box-shadow: $ams-inputs-invalid-hover-box-shadow;
951
+ $ams-text-area-placeholder-color: $ams-inputs-placeholder-color;
952
+ $ams-text-input-background-color: $ams-inputs-background-color;
953
+ $ams-text-input-border-width: $ams-inputs-border-width;
954
+ $ams-text-input-color: $ams-inputs-color;
955
+ $ams-text-input-font-family: $ams-inputs-font-family;
956
+ $ams-text-input-font-size: $ams-inputs-font-size;
957
+ $ams-text-input-font-weight: $ams-inputs-font-weight;
958
+ $ams-text-input-outline-offset: $ams-inputs-outline-offset;
959
+ $ams-text-input-padding-block: $ams-inputs-padding-block;
960
+ $ams-text-input-padding-inline: $ams-inputs-padding-inline;
961
+ $ams-text-input-disabled-color: $ams-inputs-disabled-color;
962
+ $ams-text-input-hover-box-shadow: $ams-inputs-hover-box-shadow;
963
+ $ams-text-input-invalid-border-color: $ams-inputs-invalid-border-color;
964
+ $ams-text-input-invalid-hover-border-color: $ams-inputs-invalid-hover-border-color;
965
+ $ams-text-input-invalid-hover-box-shadow: $ams-inputs-invalid-hover-box-shadow;
966
+ $ams-text-input-placeholder-color: $ams-inputs-placeholder-color;
967
+ $ams-time-input-disabled-color: $ams-inputs-disabled-color;
968
+ $ams-time-input-hover-box-shadow: $ams-inputs-hover-box-shadow;
969
+ $ams-time-input-background-color: $ams-inputs-background-color;
970
+ $ams-time-input-border-width: $ams-inputs-border-width;
971
+ $ams-time-input-color: $ams-inputs-color;
972
+ $ams-time-input-font-family: $ams-inputs-font-family;
973
+ $ams-time-input-font-size: $ams-inputs-font-size;
974
+ $ams-time-input-font-weight: $ams-inputs-font-weight;
975
+ $ams-time-input-outline-offset: $ams-inputs-outline-offset;
976
+ $ams-time-input-padding-block: $ams-inputs-padding-block;
977
+ $ams-time-input-padding-inline: $ams-inputs-padding-inline;
978
+ $ams-time-input-invalid-border-color: $ams-inputs-invalid-border-color;
979
+ $ams-time-input-invalid-hover-border-color: $ams-inputs-invalid-hover-border-color;
980
+ $ams-time-input-invalid-hover-box-shadow: $ams-inputs-invalid-hover-box-shadow;