@amsterdam/design-system-tokens 1.0.0 → 2.0.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 (59) hide show
  1. package/CHANGELOG.md +57 -0
  2. package/README.md +14 -3
  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 +335 -269
  10. package/dist/index.d.ts +229 -125
  11. package/dist/index.json +525 -421
  12. package/dist/index.mjs +459 -404
  13. package/dist/index.scss +335 -269
  14. package/dist/index.theme.css +335 -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 +13 -11
  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.tokens.json +23 -23
  35. package/src/components/ams/error-message.tokens.json +2 -2
  36. package/src/components/ams/field-set.tokens.json +3 -3
  37. package/src/components/ams/file-input.tokens.json +25 -24
  38. package/src/components/ams/icon.deprecated.tokens.json +16 -0
  39. package/src/components/ams/icon.tokens.json +8 -0
  40. package/src/components/ams/label.tokens.json +2 -2
  41. package/src/components/ams/menu.tokens.json +39 -0
  42. package/src/components/ams/ordered-list.tokens.json +2 -2
  43. package/src/components/ams/page-footer.tokens.json +2 -2
  44. package/src/components/ams/page-header.tokens.json +2 -2
  45. package/src/components/ams/{page-heading.tokens.json → page-heading.deprecated.tokens.json} +1 -0
  46. package/src/components/ams/page.tokens.json +1 -1
  47. package/src/components/ams/password-input.tokens.json +18 -18
  48. package/src/components/ams/radio.tokens.json +1 -1
  49. package/src/components/ams/search-field.tokens.json +23 -23
  50. package/src/components/ams/select.tokens.json +17 -17
  51. package/src/components/ams/skip-link.tokens.json +2 -2
  52. package/src/components/ams/standalone-link.deprecated.tokens.json +32 -0
  53. package/src/components/ams/standalone-link.tokens.json +5 -13
  54. package/src/components/ams/table-of-contents.deprecated.tokens.json +11 -0
  55. package/src/components/ams/table-of-contents.tokens.json +1 -6
  56. package/src/components/ams/text-area.tokens.json +18 -18
  57. package/src/components/ams/text-input.tokens.json +18 -18
  58. package/src/components/ams/time-input.tokens.json +23 -23
  59. 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;
@@ -81,15 +85,15 @@ $ams-breadcrumb-separator-background-image: url("data:image/svg+xml;utf8,<svg xm
81
85
  $ams-breadcrumb-separator-block-size: 1ex;
82
86
  $ams-breadcrumb-separator-inline-size: 1ex;
83
87
  $ams-button-border-style: solid;
88
+ $ams-button-secondary-border-color: currentColor;
84
89
  $ams-button-tertiary-background-color: transparent;
85
90
  $ams-button-tertiary-border-color: transparent;
86
91
  $ams-button-tertiary-hover-border-color: currentColor;
87
- $ams-checkbox-icon-container-inline-size: 1.5rem;
88
- $ams-date-input-border-color: currentColor;
89
- $ams-date-input-border-style: solid;
90
- $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-call-to-action-link-background-color: #00a03c;
93
+ $ams-call-to-action-link-hover-background-color: #007c2e;
91
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>");
92
95
  $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>");
96
+ $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>");
93
97
  $ams-description-list-narrow-grid-template-columns: 1fr 4fr;
94
98
  $ams-description-list-medium-grid-template-columns: 1fr 2fr;
95
99
  $ams-description-list-wide-grid-template-columns: 1fr 1fr;
@@ -97,10 +101,7 @@ $ams-dialog-border-style: solid;
97
101
  $ams-dialog-max-inline-size: 48rem;
98
102
  $ams-dialog-backdrop-background-color: rgb(24 24 24 / 62.5%);
99
103
  $ams-dialog-body-padding-block: 0;
100
- $ams-file-input-border-color: currentColor;
101
104
  $ams-file-input-border-style: dashed;
102
- $ams-file-input-file-selector-button-border-color: currentColor;
103
- $ams-file-input-file-selector-button-border-style: solid;
104
105
  $ams-file-list-file-preview-width: clamp(2.5rem, 10vw, 5rem);
105
106
  $ams-grid-column-count: 4;
106
107
  $ams-grid-medium-column-count: 8;
@@ -121,65 +122,64 @@ $ams-ordered-list-list-style-type: decimal;
121
122
  $ams-ordered-list-item-margin-inline-start: 2.25rem; // Divide your total indentation width over margin and padding to position the marker.
122
123
  $ams-ordered-list-item-padding-inline-start: 0.25rem; // The total level 1 indentation for Amsterdam is 40 pixels, or 2.5rem.
123
124
  $ams-ordered-list-ordered-list-list-style-type: lower-alpha;
124
- $ams-ordered-list-ordered-list-padding-block-end: 0;
125
125
  $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.
126
126
  $ams-ordered-list-ordered-list-item-padding-inline-start: 0.25rem; // The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem.
127
127
  $ams-page-footer-spotlight-background-color: #004699;
128
- $ams-page-max-inline-size: 100rem;
129
- $ams-password-input-border-color: currentColor;
130
- $ams-password-input-border-style: solid;
131
- $ams-radio-icon-container-inline-size: 1.5rem;
132
- $ams-search-field-input-border-color: currentColor;
133
- $ams-search-field-input-border-style: solid;
128
+ $ams-page-max-inline-size: 90rem;
134
129
  $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>");
135
130
  $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>");
136
- $ams-select-border-color: currentColor;
137
- $ams-select-border-style: solid;
138
131
  $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>");
139
132
  $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>");
140
133
  $ams-switch-background-color: #767676;
141
134
  $ams-switch-inline-size: 3.5rem;
142
135
  $ams-switch-thumb-block-size: 1.75rem;
143
136
  $ams-switch-thumb-inline-size: 1.75rem;
144
- $ams-text-area-border-color: currentColor;
145
- $ams-text-area-border-style: solid;
146
- $ams-text-input-border-color: currentColor;
147
- $ams-text-input-border-style: solid;
148
- $ams-time-input-border-color: currentColor;
149
- $ams-time-input-border-style: solid;
150
- $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>");
151
137
  $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>");
152
138
  $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>");
139
+ $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>");
153
140
  $ams-unordered-list-list-style-type: '\2022';
154
141
  $ams-unordered-list-item-margin-inline-start: 1.625rem; // Divide your total indentation width over margin and padding to position the marker.
155
142
  $ams-unordered-list-item-padding-inline-start: 0.875rem; // The total level 1 indentation for Amsterdam is 40 pixels, or 2.5rem.
156
143
  $ams-unordered-list-unordered-list-list-style-type: '\2013';
157
- $ams-unordered-list-unordered-list-padding-block-end: 0;
158
144
  $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.
159
145
  $ams-unordered-list-unordered-list-item-padding-inline-start: 0.875rem; // The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem.
160
- $ams-typography-heading-3-font-size: $ams-typography-body-text-x-large-font-size;
161
- $ams-typography-heading-4-font-size: $ams-typography-body-text-large-font-size;
162
- $ams-typography-heading-5-font-size: $ams-typography-body-text-font-size;
163
- $ams-typography-heading-6-font-size: $ams-typography-body-text-small-font-size;
146
+ $ams-typography-heading-2-font-size: $ams-typography-body-text-x-large-font-size;
147
+ $ams-typography-heading-3-font-size: $ams-typography-body-text-large-font-size;
148
+ $ams-typography-heading-4-font-size: $ams-typography-body-text-font-size;
149
+ $ams-typography-heading-5-font-size: $ams-typography-body-text-small-font-size;
150
+ $ams-typography-heading-6-font-size: $ams-typography-body-text-small-font-size; // Use Heading size 5 instead.
151
+ $ams-inputs-background-color: $ams-color-background;
152
+ $ams-inputs-border-width: $ams-border-width-m;
153
+ $ams-inputs-color: $ams-color-text;
154
+ $ams-inputs-font-family: $ams-typography-font-family;
155
+ $ams-inputs-font-size: $ams-typography-body-text-font-size;
156
+ $ams-inputs-font-weight: $ams-typography-body-text-font-weight;
157
+ $ams-inputs-outline-offset: $ams-focus-outline-offset;
158
+ $ams-inputs-padding-block: $ams-space-s;
159
+ $ams-inputs-padding-inline: $ams-space-m;
160
+ $ams-inputs-disabled-color: $ams-color-interactive-disabled;
161
+ $ams-inputs-hover-box-shadow: inset 0 0 0 $ams-border-width-s;
162
+ $ams-inputs-invalid-border-color: $ams-color-interactive-invalid;
163
+ $ams-inputs-invalid-hover-border-color: $ams-color-interactive-invalid-hover;
164
+ $ams-inputs-invalid-hover-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-invalid-hover;
165
+ $ams-inputs-placeholder-color: $ams-color-text-secondary;
164
166
  $ams-links-color: $ams-color-interactive;
165
- $ams-links-text-decoration-thickness: $ams-border-width-m;
166
167
  $ams-links-hover-color: $ams-color-interactive-hover;
167
- $ams-links-hover-text-decoration-thickness: $ams-border-width-l;
168
168
  $ams-links-contrast-color: $ams-color-interactive-contrast;
169
169
  $ams-links-contrast-hover-color: $ams-color-interactive-contrast;
170
170
  $ams-links-inverse-color: $ams-color-interactive-inverse;
171
171
  $ams-links-inverse-hover-color: $ams-color-interactive-inverse;
172
- $ams-accordion-gap: $ams-space-m;
173
- $ams-accordion-button-color: $ams-color-interactive;
174
- $ams-accordion-button-cursor: $ams-cursor-interactive;
175
172
  $ams-accordion-button-font-family: $ams-typography-font-family;
176
173
  $ams-accordion-button-font-weight: $ams-typography-heading-font-weight;
174
+ $ams-accordion-button-line-height: $ams-typography-heading-3-line-height;
175
+ $ams-accordion-button-text-wrap: $ams-typography-heading-text-wrap;
176
+ $ams-accordion-button-color: $ams-color-interactive;
177
+ $ams-accordion-button-cursor: $ams-cursor-interactive;
177
178
  $ams-accordion-button-gap: $ams-space-s;
178
- $ams-accordion-button-line-height: $ams-typography-heading-4-line-height;
179
179
  $ams-accordion-button-outline-offset: $ams-focus-outline-offset;
180
180
  $ams-accordion-button-padding-block: $ams-space-s;
181
- $ams-accordion-button-text-wrap: $ams-typography-heading-text-wrap;
182
181
  $ams-accordion-button-hover-color: $ams-color-interactive-hover;
182
+ $ams-accordion-gap: $ams-space-s;
183
183
  $ams-action-group-gap: $ams-space-m;
184
184
  $ams-alert-background-color: $ams-color-background;
185
185
  $ams-alert-border-color: $ams-color-feedback-info;
@@ -254,12 +254,13 @@ $ams-blockquote-font-weight: $ams-typography-body-text-bold-font-weight;
254
254
  $ams-blockquote-line-height: $ams-typography-body-text-x-large-line-height;
255
255
  $ams-blockquote-inverse-color: $ams-color-text-inverse;
256
256
  $ams-breadcrumb-font-family: $ams-typography-font-family;
257
- $ams-breadcrumb-font-size: $ams-typography-body-text-small-font-size;
257
+ $ams-breadcrumb-font-size: $ams-typography-body-text-font-size;
258
258
  $ams-breadcrumb-font-weight: $ams-typography-body-text-font-weight;
259
- $ams-breadcrumb-line-height: $ams-typography-body-text-small-line-height;
260
- $ams-breadcrumb-separator-margin-inline: $ams-space-xs;
259
+ $ams-breadcrumb-line-height: $ams-typography-body-text-line-height;
260
+ $ams-breadcrumb-separator-margin-inline: $ams-space-s;
261
261
  $ams-breadcrumb-link-outline-offset: $ams-focus-outline-offset;
262
262
  $ams-breadcrumb-link-text-decoration-line: $ams-links-subtle-text-decoration-line;
263
+ $ams-breadcrumb-link-text-decoration-thickness: $ams-links-text-decoration-thickness;
263
264
  $ams-breadcrumb-link-text-underline-offset: $ams-links-text-underline-offset;
264
265
  $ams-breadcrumb-link-hover-text-decoration-line: $ams-links-subtle-hover-text-decoration-line;
265
266
  $ams-button-border-width: $ams-border-width-m;
@@ -267,12 +268,14 @@ $ams-button-cursor: $ams-cursor-interactive;
267
268
  $ams-button-font-family: $ams-typography-font-family;
268
269
  $ams-button-font-size: $ams-typography-body-text-font-size;
269
270
  $ams-button-font-weight: $ams-typography-body-text-font-weight;
270
- $ams-button-line-height: $ams-typography-body-text-line-height;
271
+ $ams-button-line-height: $ams-inputs-line-height;
271
272
  $ams-button-gap: $ams-space-s;
272
273
  $ams-button-outline-offset: $ams-focus-outline-offset;
273
274
  $ams-button-padding-block: $ams-space-s;
274
275
  $ams-button-padding-inline: $ams-space-m;
275
276
  $ams-button-disabled-cursor: $ams-cursor-disabled;
277
+ $ams-button-icon-only-padding-block: $ams-space-s;
278
+ $ams-button-icon-only-padding-inline: $ams-space-s;
276
279
  $ams-button-primary-background-color: $ams-color-interactive;
277
280
  $ams-button-primary-border-color: $ams-color-interactive;
278
281
  $ams-button-primary-color: $ams-color-text-inverse;
@@ -282,19 +285,31 @@ $ams-button-primary-hover-background-color: $ams-color-interactive-hover;
282
285
  $ams-button-primary-hover-border-color: $ams-color-interactive-hover;
283
286
  $ams-button-secondary-background-color: $ams-color-background;
284
287
  $ams-button-secondary-color: $ams-color-interactive;
288
+ $ams-button-secondary-disabled-border-color: $ams-color-interactive-disabled;
289
+ $ams-button-secondary-disabled-color: $ams-color-interactive-disabled;
285
290
  $ams-button-secondary-hover-box-shadow: inset 0 0 0 $ams-border-width-s;
286
291
  $ams-button-secondary-hover-color: $ams-color-interactive-hover;
287
- $ams-button-secondary-disabled-color: $ams-color-interactive-disabled;
288
292
  $ams-button-tertiary-color: $ams-color-interactive;
289
- $ams-button-tertiary-hover-color: $ams-color-interactive-hover;
290
293
  $ams-button-tertiary-disabled-color: $ams-color-interactive-disabled;
291
- $ams-button-icon-only-padding-block: $ams-space-s;
292
- $ams-button-icon-only-padding-inline: $ams-space-s;
294
+ $ams-button-tertiary-hover-color: $ams-color-interactive-hover;
295
+ $ams-call-to-action-link-color: $ams-color-text-inverse;
296
+ $ams-call-to-action-link-font-family: $ams-typography-font-family;
297
+ $ams-call-to-action-link-font-size: $ams-typography-body-text-font-size;
298
+ $ams-call-to-action-link-font-weight: $ams-typography-body-text-font-weight;
299
+ $ams-call-to-action-link-line-height: $ams-typography-body-text-line-height;
300
+ $ams-call-to-action-link-outline-offset: $ams-focus-outline-offset;
301
+ $ams-call-to-action-link-padding-block: $ams-space-xs;
302
+ $ams-call-to-action-link-padding-inline: $ams-space-m;
303
+ $ams-call-to-action-link-text-decoration-thickness: $ams-links-text-decoration-thickness;
304
+ $ams-call-to-action-link-text-underline-offset: $ams-links-text-underline-offset;
305
+ $ams-call-to-action-link-hover-text-decoration-thickness: $ams-links-hover-text-decoration-thickness;
306
+ $ams-call-to-action-link-hover-text-underline-offset: $ams-links-hover-text-underline-offset;
293
307
  $ams-card-heading-margin-block-end: $ams-space-xs;
294
308
  $ams-card-heading-group-gap: $ams-space-xs;
295
309
  $ams-card-heading-group-margin-block-end: $ams-space-xs;
296
310
  $ams-card-image-margin-block-end: $ams-space-s;
297
311
  $ams-card-link-text-decoration-line: $ams-links-subtle-text-decoration-line;
312
+ $ams-card-link-text-decoration-thickness: $ams-links-text-decoration-thickness;
298
313
  $ams-card-link-text-underline-offset: $ams-links-text-underline-offset;
299
314
  $ams-card-link-hover-text-decoration-line: $ams-links-subtle-hover-text-decoration-line;
300
315
  $ams-card-outline-offset: $ams-focus-outline-offset;
@@ -304,65 +319,56 @@ $ams-character-count-font-size: $ams-typography-body-text-small-font-size;
304
319
  $ams-character-count-font-weight: $ams-typography-body-text-font-weight;
305
320
  $ams-character-count-line-height: $ams-typography-body-text-small-line-height;
306
321
  $ams-character-count-error-color: $ams-color-feedback-error;
307
- $ams-checkbox-color: $ams-color-text;
308
- $ams-checkbox-cursor: $ams-cursor-interactive;
309
- $ams-checkbox-font-family: $ams-typography-font-family;
310
- $ams-checkbox-font-size: $ams-typography-body-text-font-size;
311
- $ams-checkbox-font-weight: $ams-typography-body-text-font-weight;
312
- $ams-checkbox-gap: $ams-space-s;
313
- $ams-checkbox-line-height: $ams-typography-body-text-line-height;
314
- $ams-checkbox-outline-offset: $ams-focus-outline-offset;
315
- $ams-checkbox-checked-indicator-stroke: $ams-color-interactive-inverse;
316
- $ams-checkbox-indeterminate-indicator-stroke: $ams-color-interactive-inverse;
317
- $ams-checkbox-hover-indicator-hover-stroke: $ams-color-interactive-hover;
318
- $ams-checkbox-hover-indicator-invalid-hover-stroke: $ams-color-interactive-invalid-hover;
319
- $ams-checkbox-rectangle-fill: $ams-color-background;
320
- $ams-checkbox-rectangle-stroke: $ams-color-interactive;
321
- $ams-checkbox-rectangle-checked-fill: $ams-color-interactive;
322
- $ams-checkbox-rectangle-checked-disabled-fill: $ams-color-interactive-disabled;
322
+ $ams-checkbox-hover-text-decoration-thickness: $ams-border-width-m; // Use `ams.checkbox.text-decoration-thickness` instead
323
+ $ams-checkbox-hover-color: $ams-color-interactive-hover;
324
+ $ams-checkbox-hover-text-decoration-line: $ams-links-subtle-hover-text-decoration-line;
323
325
  $ams-checkbox-rectangle-checked-disabled-hover-fill: $ams-color-interactive-disabled;
324
- $ams-checkbox-rectangle-checked-hover-fill: $ams-color-interactive-hover;
326
+ $ams-checkbox-rectangle-checked-disabled-fill: $ams-color-interactive-disabled;
325
327
  $ams-checkbox-rectangle-checked-hover-disabled-invalid-fill: $ams-color-interactive-disabled;
328
+ $ams-checkbox-rectangle-checked-hover-fill: $ams-color-interactive-hover;
329
+ $ams-checkbox-rectangle-checked-fill: $ams-color-interactive;
326
330
  $ams-checkbox-rectangle-checked-invalid-fill: $ams-color-interactive-invalid;
327
331
  $ams-checkbox-rectangle-checked-invalid-hover-fill: $ams-color-interactive-invalid-hover;
328
- $ams-checkbox-rectangle-disabled-stroke: $ams-color-interactive-disabled;
329
- $ams-checkbox-rectangle-hover-stroke: $ams-color-interactive-hover;
330
332
  $ams-checkbox-rectangle-hover-disabled-invalid-stroke: $ams-color-interactive-disabled;
331
- $ams-checkbox-rectangle-indeterminate-fill: $ams-color-interactive;
332
- $ams-checkbox-rectangle-indeterminate-disabled-fill: $ams-color-interactive-disabled;
333
+ $ams-checkbox-rectangle-hover-stroke: $ams-color-interactive-hover;
333
334
  $ams-checkbox-rectangle-indeterminate-disabled-hover-fill: $ams-color-interactive-disabled;
334
- $ams-checkbox-rectangle-indeterminate-hover-fill: $ams-color-interactive-hover;
335
+ $ams-checkbox-rectangle-indeterminate-disabled-fill: $ams-color-interactive-disabled;
335
336
  $ams-checkbox-rectangle-indeterminate-hover-disabled-invalid-fill: $ams-color-interactive-disabled;
337
+ $ams-checkbox-rectangle-indeterminate-hover-fill: $ams-color-interactive-hover;
338
+ $ams-checkbox-rectangle-indeterminate-fill: $ams-color-interactive;
336
339
  $ams-checkbox-rectangle-indeterminate-invalid-fill: $ams-color-interactive-invalid;
337
340
  $ams-checkbox-rectangle-indeterminate-invalid-hover-fill: $ams-color-interactive-invalid-hover;
341
+ $ams-checkbox-rectangle-fill: $ams-color-background;
342
+ $ams-checkbox-rectangle-stroke: $ams-color-interactive;
343
+ $ams-checkbox-rectangle-disabled-stroke: $ams-color-interactive-disabled;
338
344
  $ams-checkbox-rectangle-invalid-stroke: $ams-color-interactive-invalid;
339
345
  $ams-checkbox-rectangle-invalid-hover-stroke: $ams-color-interactive-invalid-hover;
346
+ $ams-checkbox-color: $ams-color-text;
347
+ $ams-checkbox-cursor: $ams-cursor-interactive;
348
+ $ams-checkbox-font-family: $ams-typography-font-family;
349
+ $ams-checkbox-font-size: $ams-typography-body-text-font-size;
350
+ $ams-checkbox-font-weight: $ams-typography-body-text-font-weight;
351
+ $ams-checkbox-gap: $ams-space-s;
352
+ $ams-checkbox-line-height: $ams-typography-body-text-line-height;
353
+ $ams-checkbox-outline-offset: $ams-focus-outline-offset;
354
+ $ams-checkbox-text-decoration-thickness: $ams-links-text-decoration-thickness;
355
+ $ams-checkbox-text-underline-offset: $ams-links-text-underline-offset;
340
356
  $ams-checkbox-disabled-cursor: $ams-cursor-disabled;
341
357
  $ams-checkbox-disabled-color: $ams-color-interactive-disabled;
342
- $ams-checkbox-hover-color: $ams-color-interactive-hover;
343
- $ams-checkbox-hover-text-decoration-thickness: $ams-border-width-m;
358
+ $ams-checkbox-checked-indicator-stroke: $ams-color-interactive-inverse;
359
+ $ams-checkbox-hover-indicator-hover-stroke: $ams-color-interactive-hover;
360
+ $ams-checkbox-hover-indicator-invalid-hover-stroke: $ams-color-interactive-invalid-hover;
361
+ $ams-checkbox-indeterminate-indicator-stroke: $ams-color-interactive-inverse;
344
362
  $ams-column-gap-x-small: $ams-space-xs;
345
363
  $ams-column-gap-small: $ams-space-s;
346
364
  $ams-column-gap-medium: $ams-space-m;
347
365
  $ams-column-gap-large: $ams-space-l;
348
366
  $ams-column-gap-x-large: $ams-space-xl;
349
- $ams-date-input-background-color: $ams-color-background;
350
- $ams-date-input-border-width: $ams-border-width-m;
351
- $ams-date-input-color: $ams-color-text;
352
- $ams-date-input-font-family: $ams-typography-font-family;
353
- $ams-date-input-font-size: $ams-typography-body-text-font-size;
354
- $ams-date-input-font-weight: $ams-typography-body-text-font-weight;
355
- $ams-date-input-line-height: $ams-typography-body-text-line-height;
356
- $ams-date-input-outline-offset: $ams-focus-outline-offset;
357
- $ams-date-input-padding-block: $ams-space-s;
358
- $ams-date-input-padding-inline: $ams-space-m;
359
- $ams-date-input-calender-picker-indicator-cursor: $ams-cursor-interactive;
360
- $ams-date-input-disabled-color: $ams-color-interactive-disabled;
367
+ $ams-date-input-border-color: $ams-inputs-border-color;
368
+ $ams-date-input-border-style: $ams-inputs-border-style;
369
+ $ams-date-input-line-height: $ams-inputs-line-height;
361
370
  $ams-date-input-disabled-cursor: $ams-cursor-disabled;
362
- $ams-date-input-hover-box-shadow: inset 0 0 0 $ams-border-width-s;
363
- $ams-date-input-invalid-border-color: $ams-color-interactive-invalid;
364
- $ams-date-input-invalid-hover-border-color: $ams-color-interactive-invalid-hover;
365
- $ams-date-input-invalid-hover-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-invalid-hover;
371
+ $ams-date-input-calender-picker-indicator-cursor: $ams-cursor-interactive;
366
372
  $ams-description-list-color: $ams-color-text;
367
373
  $ams-description-list-column-gap: $ams-space-l;
368
374
  $ams-description-list-font-family: $ams-typography-font-family;
@@ -393,17 +399,17 @@ $ams-dialog-footer-medium-padding-block: 0 $ams-space-xl;
393
399
  $ams-dialog-footer-medium-padding-inline: $ams-space-xl;
394
400
  $ams-error-message-color: $ams-color-feedback-error;
395
401
  $ams-error-message-font-family: $ams-typography-font-family;
396
- $ams-error-message-font-size: $ams-typography-body-text-small-font-size;
402
+ $ams-error-message-font-size: $ams-typography-body-text-font-size;
397
403
  $ams-error-message-font-weight: $ams-typography-body-text-font-weight;
398
404
  $ams-error-message-gap: $ams-space-xs;
399
- $ams-error-message-line-height: $ams-typography-body-text-small-line-height;
405
+ $ams-error-message-line-height: $ams-typography-body-text-line-height;
400
406
  $ams-field-set-invalid-border-inline-start: $ams-border-width-l solid $ams-color-feedback-error;
401
407
  $ams-field-set-invalid-padding-inline-start: $ams-space-m;
402
408
  $ams-field-set-legend-color: $ams-color-text;
403
409
  $ams-field-set-legend-font-family: $ams-typography-font-family;
404
410
  $ams-field-set-legend-font-weight: $ams-typography-heading-font-weight;
405
- $ams-field-set-legend-line-height: $ams-typography-heading-4-line-height;
406
- $ams-field-set-legend-margin-block-end: $ams-space-m;
411
+ $ams-field-set-legend-line-height: $ams-typography-heading-3-line-height;
412
+ $ams-field-set-legend-margin-block-end: $ams-space-s;
407
413
  $ams-field-set-legend-text-wrap: $ams-typography-heading-text-wrap;
408
414
  $ams-field-gap: $ams-space-s;
409
415
  $ams-field-invalid-border-inline-start: $ams-border-width-l solid $ams-color-feedback-error;
@@ -415,30 +421,15 @@ $ams-figure-caption-font-size: $ams-typography-body-text-small-font-size;
415
421
  $ams-figure-caption-font-weight: $ams-typography-body-text-font-weight;
416
422
  $ams-figure-caption-line-height: $ams-typography-body-text-small-line-height;
417
423
  $ams-figure-caption-inverse-color: $ams-color-text-inverse;
418
- $ams-file-input-background-color: $ams-color-background;
419
- $ams-file-input-border-width: $ams-border-width-m;
420
- $ams-file-input-color: $ams-color-text;
424
+ $ams-file-input-border-color: $ams-inputs-border-color;
421
425
  $ams-file-input-cursor: $ams-cursor-interactive;
422
- $ams-file-input-font-family: $ams-typography-font-family;
423
- $ams-file-input-font-size: $ams-typography-body-text-font-size;
424
- $ams-file-input-font-weight: $ams-typography-body-text-font-weight;
425
- $ams-file-input-line-height: $ams-typography-body-text-line-height;
426
- $ams-file-input-outline-offset: $ams-focus-outline-offset;
426
+ $ams-file-input-line-height: $ams-inputs-line-height;
427
427
  $ams-file-input-padding-block: $ams-space-m;
428
428
  $ams-file-input-padding-inline: $ams-space-m;
429
- $ams-file-input-disabled-color: $ams-color-interactive-disabled;
430
429
  $ams-file-input-disabled-cursor: $ams-cursor-disabled;
431
- $ams-file-input-file-selector-button-background-color: $ams-color-background;
432
- $ams-file-input-file-selector-button-border-width: $ams-border-width-m;
433
- $ams-file-input-file-selector-button-color: $ams-color-interactive;
434
- $ams-file-input-file-selector-button-cursor: $ams-cursor-interactive;
430
+ $ams-file-input-file-selector-button-border-color: $ams-button-secondary-border-color;
431
+ $ams-file-input-file-selector-button-border-style: $ams-button-border-style;
435
432
  $ams-file-input-file-selector-button-margin-inline-end: $ams-space-m;
436
- $ams-file-input-file-selector-button-padding-block: $ams-space-s;
437
- $ams-file-input-file-selector-button-padding-inline: $ams-space-m;
438
- $ams-file-input-file-selector-button-hover-box-shadow: inset 0 0 0 $ams-border-width-s;
439
- $ams-file-input-file-selector-button-hover-color: $ams-color-interactive-hover;
440
- $ams-file-input-file-selector-button-disabled-color: $ams-color-interactive-disabled;
441
- $ams-file-input-file-selector-button-disabled-cursor: $ams-cursor-disabled;
442
433
  $ams-file-list-gap: $ams-space-m;
443
434
  $ams-file-list-padding-block: $ams-space-m;
444
435
  $ams-file-list-file-font-family: $ams-typography-font-family;
@@ -459,7 +450,6 @@ $ams-grid-medium-padding-inline: $ams-space-xl;
459
450
  $ams-grid-wide-padding-inline: $ams-space-2xl;
460
451
  $ams-heading-1-font-size: $ams-typography-heading-1-font-size;
461
452
  $ams-heading-1-line-height: $ams-typography-heading-1-line-height;
462
- $ams-heading-2-font-size: $ams-typography-heading-2-font-size;
463
453
  $ams-heading-2-line-height: $ams-typography-heading-2-line-height;
464
454
  $ams-heading-3-line-height: $ams-typography-heading-3-line-height;
465
455
  $ams-heading-4-line-height: $ams-typography-heading-4-line-height;
@@ -486,12 +476,17 @@ $ams-icon-button-inverse-hover-background-color: $ams-color-interactive-hover;
486
476
  $ams-icon-button-inverse-hover-color: $ams-color-interactive-inverse;
487
477
  $ams-icon-button-inverse-disabled-color: $ams-color-interactive-inverse;
488
478
  $ams-icon-button-inverse-disabled-background-color: $ams-color-interactive-disabled;
479
+ $ams-icon-heading-0-font-size: $ams-typography-heading-0-font-size; // Deprecated. Use ‘heading 1’ instead.
480
+ $ams-icon-heading-0-line-height: $ams-typography-heading-0-line-height; // Deprecated. Use ‘heading 1’ instead.
489
481
  $ams-icon-font-size: $ams-typography-body-text-font-size;
490
482
  $ams-icon-line-height: $ams-typography-body-text-line-height;
491
483
  $ams-icon-small-font-size: $ams-typography-body-text-small-font-size;
492
484
  $ams-icon-small-line-height: $ams-typography-body-text-small-line-height;
493
485
  $ams-icon-large-font-size: $ams-typography-body-text-large-font-size;
494
486
  $ams-icon-large-line-height: $ams-typography-body-text-large-line-height;
487
+ $ams-icon-heading-1-font-size: $ams-typography-heading-1-font-size;
488
+ $ams-icon-heading-1-line-height: $ams-typography-heading-1-line-height;
489
+ $ams-icon-heading-2-line-height: $ams-typography-heading-2-line-height;
495
490
  $ams-icon-heading-3-line-height: $ams-typography-heading-3-line-height;
496
491
  $ams-icon-heading-4-line-height: $ams-typography-heading-4-line-height;
497
492
  $ams-icon-heading-5-line-height: $ams-typography-heading-5-line-height;
@@ -508,7 +503,7 @@ $ams-invalid-form-alert-outline-offset: $ams-focus-outline-offset;
508
503
  $ams-label-color: $ams-color-text;
509
504
  $ams-label-font-family: $ams-typography-font-family;
510
505
  $ams-label-font-weight: $ams-typography-heading-font-weight;
511
- $ams-label-line-height: $ams-typography-heading-4-line-height;
506
+ $ams-label-line-height: $ams-typography-heading-3-line-height;
512
507
  $ams-label-text-wrap: $ams-typography-heading-text-wrap;
513
508
  $ams-link-list-gap: $ams-space-s;
514
509
  $ams-link-list-link-font-family: $ams-typography-font-family;
@@ -518,6 +513,7 @@ $ams-link-list-link-gap: $ams-space-s;
518
513
  $ams-link-list-link-line-height: $ams-typography-body-text-line-height;
519
514
  $ams-link-list-link-outline-offset: $ams-focus-outline-offset;
520
515
  $ams-link-list-link-text-decoration-line: $ams-links-subtle-text-decoration-line;
516
+ $ams-link-list-link-text-decoration-thickness: $ams-links-text-decoration-thickness;
521
517
  $ams-link-list-link-text-underline-offset: $ams-links-text-underline-offset;
522
518
  $ams-link-list-link-small-font-size: $ams-typography-body-text-small-font-size;
523
519
  $ams-link-list-link-small-line-height: $ams-typography-body-text-small-line-height;
@@ -526,31 +522,48 @@ $ams-link-list-link-large-line-height: $ams-typography-body-text-large-line-heig
526
522
  $ams-link-list-link-hover-text-decoration-line: $ams-links-subtle-hover-text-decoration-line;
527
523
  $ams-link-font-weight: $ams-typography-body-text-font-weight;
528
524
  $ams-link-outline-offset: $ams-focus-outline-offset;
525
+ $ams-link-text-decoration-thickness: $ams-links-text-decoration-thickness;
529
526
  $ams-link-text-underline-offset: $ams-links-text-underline-offset;
527
+ $ams-link-hover-text-decoration-thickness: $ams-links-hover-text-decoration-thickness;
530
528
  $ams-link-hover-text-underline-offset: $ams-links-hover-text-underline-offset;
531
529
  $ams-logo-block-size: $ams-space-xl;
532
530
  $ams-logo-subsite-color: $ams-color-text;
533
531
  $ams-mark-background-color: $ams-color-highlight-yellow;
532
+ $ams-menu-font-family: $ams-typography-font-family;
533
+ $ams-menu-font-size: $ams-typography-body-text-font-size;
534
+ $ams-menu-font-weight: $ams-typography-body-text-font-weight;
535
+ $ams-menu-line-height: $ams-typography-body-text-line-height;
536
+ $ams-menu-link-gap: $ams-space-s;
537
+ $ams-menu-link-outline-offset: $ams-focus-outline-offset;
538
+ $ams-menu-link-padding-block: $ams-space-s;
539
+ $ams-menu-link-padding-inline: $ams-space-s;
540
+ $ams-menu-link-text-decoration-line: $ams-links-subtle-text-decoration-line;
541
+ $ams-menu-link-text-decoration-thickness: $ams-links-text-decoration-thickness;
542
+ $ams-menu-link-text-underline-offset: $ams-links-text-underline-offset;
543
+ $ams-menu-link-hover-text-decoration-line: $ams-links-subtle-hover-text-decoration-line;
544
+ $ams-menu-list-gap: $ams-space-m;
534
545
  $ams-ordered-list-color: $ams-color-text;
535
546
  $ams-ordered-list-font-family: $ams-typography-font-family;
536
547
  $ams-ordered-list-font-size: $ams-typography-body-text-font-size;
537
548
  $ams-ordered-list-font-weight: $ams-typography-body-text-font-weight;
538
- $ams-ordered-list-gap: $ams-space-m;
549
+ $ams-ordered-list-gap: $ams-space-s;
539
550
  $ams-ordered-list-line-height: $ams-typography-body-text-line-height;
540
551
  $ams-ordered-list-small-font-size: $ams-typography-body-text-small-font-size;
541
552
  $ams-ordered-list-small-line-height: $ams-typography-body-text-small-line-height;
542
553
  $ams-ordered-list-inverse-color: $ams-color-text-inverse;
543
554
  $ams-ordered-list-ordered-list-gap: $ams-space-s;
555
+ $ams-ordered-list-ordered-list-padding-block-end: $ams-space-s;
544
556
  $ams-ordered-list-ordered-list-padding-block-start: $ams-space-s;
545
557
  $ams-page-footer-menu-column-gap: $ams-space-l;
546
558
  $ams-page-footer-menu-padding-block: $ams-space-l;
547
559
  $ams-page-footer-menu-row-gap: $ams-space-xs;
548
560
  $ams-page-footer-menu-link-font-family: $ams-typography-font-family;
549
- $ams-page-footer-menu-link-font-size: $ams-typography-body-text-small-font-size;
561
+ $ams-page-footer-menu-link-font-size: $ams-typography-body-text-font-size;
550
562
  $ams-page-footer-menu-link-font-weight: $ams-typography-body-text-font-weight;
551
- $ams-page-footer-menu-link-line-height: $ams-typography-body-text-small-line-height;
563
+ $ams-page-footer-menu-link-line-height: $ams-typography-body-text-line-height;
552
564
  $ams-page-footer-menu-link-outline-offset: $ams-focus-outline-offset;
553
565
  $ams-page-footer-menu-link-text-decoration-line: $ams-links-subtle-text-decoration-line;
566
+ $ams-page-footer-menu-link-text-decoration-thickness: $ams-links-text-decoration-thickness;
554
567
  $ams-page-footer-menu-link-text-underline-offset: $ams-links-text-underline-offset;
555
568
  $ams-page-footer-menu-link-hover-text-decoration-line: $ams-links-subtle-hover-text-decoration-line;
556
569
  $ams-page-header-font-family: $ams-typography-font-family;
@@ -559,7 +572,7 @@ $ams-page-header-logo-link-column-gap: $ams-space-m;
559
572
  $ams-page-header-logo-link-outline-offset: $ams-focus-outline-offset;
560
573
  $ams-page-header-brand-name-color: $ams-color-text;
561
574
  $ams-page-header-brand-name-font-weight: $ams-typography-heading-font-weight;
562
- $ams-page-header-brand-name-line-height: $ams-typography-heading-4-line-height;
575
+ $ams-page-header-brand-name-line-height: $ams-typography-heading-3-line-height;
563
576
  $ams-page-header-brand-name-text-wrap: $ams-typography-heading-text-wrap;
564
577
  $ams-page-header-mega-menu-button-cursor: $ams-cursor-interactive;
565
578
  $ams-page-header-mega-menu-button-label-open-font-weight: $ams-typography-body-text-bold-font-weight;
@@ -573,6 +586,7 @@ $ams-page-header-menu-item-line-height: $ams-typography-body-text-line-height;
573
586
  $ams-page-header-menu-item-outline-offset: $ams-focus-outline-offset;
574
587
  $ams-page-header-menu-item-padding-block: $ams-space-xs;
575
588
  $ams-page-header-menu-link-text-decoration-line: $ams-links-subtle-text-decoration-line;
589
+ $ams-page-header-menu-link-text-decoration-thickness: $ams-links-text-decoration-thickness;
576
590
  $ams-page-header-menu-link-text-underline-offset: $ams-links-text-underline-offset;
577
591
  $ams-page-header-menu-link-hover-text-decoration-line: $ams-links-subtle-hover-text-decoration-line;
578
592
  $ams-page-header-navigation-column-gap: $ams-space-l;
@@ -593,6 +607,7 @@ $ams-pagination-link-gap: $ams-space-xs;
593
607
  $ams-pagination-link-outline-offset: $ams-focus-outline-offset;
594
608
  $ams-pagination-link-padding-inline: $ams-space-s;
595
609
  $ams-pagination-link-text-decoration-line: $ams-links-subtle-text-decoration-line;
610
+ $ams-pagination-link-text-decoration-thickness: $ams-links-text-decoration-thickness;
596
611
  $ams-pagination-link-text-underline-offset: $ams-links-text-underline-offset;
597
612
  $ams-pagination-link-current-font-weight: $ams-typography-body-text-bold-font-weight;
598
613
  $ams-pagination-link-hover-text-decoration-line: $ams-links-subtle-hover-text-decoration-line;
@@ -606,23 +621,10 @@ $ams-paragraph-small-font-size: $ams-typography-body-text-small-font-size;
606
621
  $ams-paragraph-small-line-height: $ams-typography-body-text-small-line-height;
607
622
  $ams-paragraph-large-font-size: $ams-typography-body-text-large-font-size;
608
623
  $ams-paragraph-large-line-height: $ams-typography-body-text-large-line-height;
609
- $ams-password-input-background-color: $ams-color-background;
610
- $ams-password-input-border-width: $ams-border-width-m;
611
- $ams-password-input-color: $ams-color-text;
612
- $ams-password-input-font-family: $ams-typography-font-family;
613
- $ams-password-input-font-size: $ams-typography-body-text-font-size;
614
- $ams-password-input-font-weight: $ams-typography-body-text-font-weight;
615
- $ams-password-input-line-height: $ams-typography-body-text-line-height;
616
- $ams-password-input-outline-offset: $ams-focus-outline-offset;
617
- $ams-password-input-padding-block: $ams-space-s;
618
- $ams-password-input-padding-inline: $ams-space-m;
619
- $ams-password-input-disabled-color: $ams-color-interactive-disabled;
624
+ $ams-password-input-border-color: $ams-inputs-border-color;
625
+ $ams-password-input-border-style: $ams-inputs-border-style;
626
+ $ams-password-input-line-height: $ams-inputs-line-height;
620
627
  $ams-password-input-disabled-cursor: $ams-cursor-disabled;
621
- $ams-password-input-hover-box-shadow: inset 0 0 0 $ams-border-width-s;
622
- $ams-password-input-invalid-border-color: $ams-color-interactive-invalid;
623
- $ams-password-input-invalid-hover-border-color: $ams-color-interactive-invalid-hover;
624
- $ams-password-input-invalid-hover-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-invalid-hover;
625
- $ams-password-input-placeholder-color: $ams-color-text-secondary;
626
628
  $ams-radio-color: $ams-color-text;
627
629
  $ams-radio-cursor: $ams-cursor-interactive;
628
630
  $ams-radio-font-family: $ams-typography-font-family;
@@ -631,6 +633,7 @@ $ams-radio-font-weight: $ams-typography-body-text-font-weight;
631
633
  $ams-radio-gap: $ams-space-s;
632
634
  $ams-radio-line-height: $ams-typography-body-text-line-height;
633
635
  $ams-radio-outline-offset: $ams-focus-outline-offset;
636
+ $ams-radio-text-decoration-thickness: $ams-links-text-decoration-thickness;
634
637
  $ams-radio-text-underline-offset: $ams-links-text-underline-offset;
635
638
  $ams-radio-checked-indicator-fill: $ams-color-interactive;
636
639
  $ams-radio-checked-indicator-disabled-fill: $ams-color-interactive-disabled;
@@ -658,49 +661,25 @@ $ams-row-gap-small: $ams-space-s;
658
661
  $ams-row-gap-medium: $ams-space-m;
659
662
  $ams-row-gap-large: $ams-space-l;
660
663
  $ams-row-gap-x-large: $ams-space-xl;
661
- $ams-search-field-input-background-color: $ams-color-background;
662
- $ams-search-field-input-border-width: $ams-border-width-m;
663
- $ams-search-field-input-color: $ams-color-text;
664
- $ams-search-field-input-font-family: $ams-typography-font-family;
665
- $ams-search-field-input-font-size: $ams-typography-body-text-font-size;
666
- $ams-search-field-input-font-weight: $ams-typography-body-text-font-weight;
667
- $ams-search-field-input-line-height: $ams-typography-body-text-line-height;
668
- $ams-search-field-input-outline-offset: $ams-focus-outline-offset;
669
- $ams-search-field-input-padding-block: $ams-space-s;
670
- $ams-search-field-input-padding-inline: $ams-space-m;
664
+ $ams-search-field-input-border-color: $ams-inputs-border-color;
665
+ $ams-search-field-input-border-style: $ams-inputs-border-style;
666
+ $ams-search-field-input-line-height: $ams-inputs-line-height;
671
667
  $ams-search-field-input-cancel-button-block-size: $ams-typography-body-text-font-size;
672
668
  $ams-search-field-input-cancel-button-color: $ams-color-interactive;
673
669
  $ams-search-field-input-cancel-button-cursor: $ams-cursor-interactive;
674
670
  $ams-search-field-input-cancel-button-inline-size: $ams-typography-body-text-font-size;
675
- $ams-search-field-input-hover-box-shadow: inset 0 0 0 $ams-border-width-s;
676
- $ams-search-field-input-invalid-border-color: $ams-color-interactive-invalid;
677
- $ams-search-field-input-invalid-hover-border-color: $ams-color-interactive-invalid-hover;
678
- $ams-search-field-input-invalid-hover-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-invalid-hover;
679
- $ams-search-field-input-placeholder-color: $ams-color-text-secondary;
680
- $ams-select-background-color: $ams-color-background;
681
671
  $ams-select-background-position: right $ams-space-m center;
682
- $ams-select-border-width: $ams-border-width-m;
683
- $ams-select-color: $ams-color-text;
684
- $ams-select-font-family: $ams-typography-font-family;
685
- $ams-select-font-size: $ams-typography-body-text-font-size;
686
- $ams-select-font-weight: $ams-typography-body-text-font-weight;
687
- $ams-select-line-height: $ams-typography-body-text-line-height;
688
- $ams-select-outline-offset: $ams-focus-outline-offset;
689
- $ams-select-padding-block: $ams-space-s;
690
- $ams-select-padding-inline: $ams-space-m calc(2 * $ams-space-m + 1em);
691
- $ams-select-disabled-color: $ams-color-interactive-disabled;
672
+ $ams-select-border-color: $ams-inputs-border-color;
673
+ $ams-select-border-style: $ams-inputs-border-style;
674
+ $ams-select-line-height: $ams-inputs-line-height;
692
675
  $ams-select-disabled-cursor: $ams-cursor-disabled;
693
- $ams-select-hover-box-shadow: inset 0 0 0 $ams-border-width-s;
694
- $ams-select-invalid-border-color: $ams-color-interactive-invalid;
695
- $ams-select-invalid-hover-border-color: $ams-color-interactive-invalid-hover;
696
- $ams-select-invalid-hover-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-invalid-hover;
697
676
  $ams-select-option-disabled-color: $ams-color-interactive-disabled;
698
677
  $ams-skip-link-background-color: $ams-color-interactive;
699
678
  $ams-skip-link-color: $ams-color-text-inverse;
700
679
  $ams-skip-link-font-family: $ams-typography-font-family;
701
- $ams-skip-link-font-size: $ams-typography-body-text-small-font-size;
680
+ $ams-skip-link-font-size: $ams-typography-body-text-font-size;
702
681
  $ams-skip-link-font-weight: $ams-typography-body-text-font-weight;
703
- $ams-skip-link-line-height: $ams-typography-body-text-small-line-height;
682
+ $ams-skip-link-line-height: $ams-typography-body-text-line-height;
704
683
  $ams-skip-link-outline-offset: $ams-focus-outline-offset;
705
684
  $ams-skip-link-padding-block: $ams-space-s;
706
685
  $ams-skip-link-padding-inline: $ams-space-m;
@@ -712,16 +691,21 @@ $ams-spotlight-lime-background-color: $ams-color-highlight-lime;
712
691
  $ams-spotlight-magenta-background-color: $ams-color-highlight-magenta;
713
692
  $ams-spotlight-orange-background-color: $ams-color-highlight-orange;
714
693
  $ams-spotlight-yellow-background-color: $ams-color-highlight-yellow;
694
+ $ams-standalone-link-hover-text-decoration-thickness: $ams-links-hover-text-decoration-thickness; // Use `ams.standalone-link.text-decoration-thickness` instead
695
+ $ams-standalone-link-hover-text-underline-offset: $ams-links-hover-text-underline-offset; // Use `ams.standalone-link.text-underline-offset` instead
696
+ $ams-standalone-link-hover-text-decoration-line: $ams-links-subtle-hover-text-decoration-line;
697
+ $ams-standalone-link-with-icon-text-decoration-line: $ams-links-subtle-text-decoration-line; // Use `ams.standalone-link.text-decoration-line` instead
698
+ $ams-standalone-link-with-icon-text-decoration-thickness: $ams-links-text-decoration-thickness; // Use `ams.standalone-link.text-decoration-thickness` instead
699
+ $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
715
700
  $ams-standalone-link-column-gap: $ams-space-s;
716
701
  $ams-standalone-link-font-family: $ams-typography-font-family;
717
702
  $ams-standalone-link-font-size: $ams-typography-body-text-font-size;
718
703
  $ams-standalone-link-font-weight: $ams-typography-body-text-font-weight;
719
704
  $ams-standalone-link-line-height: $ams-typography-body-text-line-height;
720
705
  $ams-standalone-link-outline-offset: $ams-focus-outline-offset;
706
+ $ams-standalone-link-text-decoration-line: $ams-links-subtle-text-decoration-line;
707
+ $ams-standalone-link-text-decoration-thickness: $ams-links-text-decoration-thickness;
721
708
  $ams-standalone-link-text-underline-offset: $ams-links-text-underline-offset;
722
- $ams-standalone-link-hover-text-underline-offset: $ams-links-hover-text-underline-offset;
723
- $ams-standalone-link-with-icon-text-decoration-line: $ams-links-subtle-text-decoration-line;
724
- $ams-standalone-link-with-icon-hover-text-decoration-line: $ams-links-subtle-hover-text-decoration-line;
725
709
  $ams-switch-cursor: $ams-cursor-interactive;
726
710
  $ams-switch-outline-offset: $ams-focus-outline-offset;
727
711
  $ams-switch-thumb-background-color: $ams-color-background;
@@ -730,20 +714,21 @@ $ams-switch-thumb-hover-box-shadow: 0 0 0 $ams-border-width-m $ams-switch-thumb-
730
714
  $ams-switch-checked-background-color: $ams-color-interactive;
731
715
  $ams-switch-disabled-background-color: $ams-color-interactive-disabled;
732
716
  $ams-switch-disabled-cursor: $ams-cursor-disabled;
717
+ $ams-table-of-contents-heading-font-weight: $ams-typography-heading-font-weight;
718
+ $ams-table-of-contents-heading-line-height: $ams-typography-heading-4-line-height;
733
719
  $ams-table-of-contents-font-family: $ams-typography-font-family;
734
720
  $ams-table-of-contents-font-size: $ams-typography-body-text-font-size;
735
721
  $ams-table-of-contents-font-weight: $ams-typography-body-text-font-weight;
736
- $ams-table-of-contents-gap: $ams-space-m;
722
+ $ams-table-of-contents-gap: $ams-space-s;
737
723
  $ams-table-of-contents-line-height: $ams-typography-body-text-line-height;
738
724
  $ams-table-of-contents-link-outline-offset: $ams-focus-outline-offset;
739
725
  $ams-table-of-contents-link-text-decoration-line: $ams-links-subtle-text-decoration-line;
726
+ $ams-table-of-contents-link-text-decoration-thickness: $ams-links-text-decoration-thickness;
740
727
  $ams-table-of-contents-link-text-underline-offset: $ams-links-text-underline-offset;
741
728
  $ams-table-of-contents-link-hover-text-decoration-line: $ams-links-subtle-hover-text-decoration-line;
742
729
  $ams-table-of-contents-list-gap: $ams-space-s;
743
730
  $ams-table-of-contents-list-list-padding-block-start: $ams-space-s;
744
731
  $ams-table-of-contents-list-list-padding-inline-start: $ams-space-l;
745
- $ams-table-of-contents-heading-font-weight: $ams-typography-heading-font-weight;
746
- $ams-table-of-contents-heading-line-height: $ams-typography-heading-4-line-height;
747
732
  $ams-table-color: $ams-color-text;
748
733
  $ams-table-font-family: $ams-typography-font-family;
749
734
  $ams-table-font-size: $ams-typography-body-text-font-size;
@@ -771,130 +756,211 @@ $ams-tabs-button-selected-box-shadow: inset 0 calc($ams-border-width-xl * -1);
771
756
  $ams-tabs-button-selected-font-weight: $ams-typography-body-text-bold-font-weight;
772
757
  $ams-tabs-button-disabled-color: $ams-color-interactive-disabled;
773
758
  $ams-tabs-button-disabled-cursor: $ams-cursor-disabled;
774
- $ams-text-area-background-color: $ams-color-background;
775
- $ams-text-area-border-width: $ams-border-width-m;
776
- $ams-text-area-color: $ams-color-text;
777
- $ams-text-area-font-family: $ams-typography-font-family;
778
- $ams-text-area-font-size: $ams-typography-body-text-font-size;
779
- $ams-text-area-font-weight: $ams-typography-body-text-font-weight;
780
- $ams-text-area-line-height: $ams-typography-body-text-line-height;
759
+ $ams-text-area-border-color: $ams-inputs-border-color;
760
+ $ams-text-area-border-style: $ams-inputs-border-style;
761
+ $ams-text-area-line-height: $ams-inputs-line-height;
781
762
  $ams-text-area-min-block-size: calc($ams-typography-body-text-line-height * 1em + 2 * $ams-text-area-padding-block);
782
- $ams-text-area-outline-offset: $ams-focus-outline-offset;
783
- $ams-text-area-padding-block: $ams-space-s;
784
- $ams-text-area-padding-inline: $ams-space-m;
785
- $ams-text-area-disabled-color: $ams-color-interactive-disabled;
786
763
  $ams-text-area-disabled-cursor: $ams-cursor-disabled;
787
- $ams-text-area-hover-box-shadow: inset 0 0 0 $ams-border-width-s;
788
- $ams-text-area-invalid-border-color: $ams-color-interactive-invalid;
789
- $ams-text-area-invalid-hover-border-color: $ams-color-interactive-invalid-hover;
790
- $ams-text-area-invalid-hover-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-invalid-hover;
791
- $ams-text-area-placeholder-color: $ams-color-text-secondary;
792
- $ams-text-input-background-color: $ams-color-background;
793
- $ams-text-input-border-width: $ams-border-width-m;
794
- $ams-text-input-color: $ams-color-text;
795
- $ams-text-input-font-family: $ams-typography-font-family;
796
- $ams-text-input-font-size: $ams-typography-body-text-font-size;
797
- $ams-text-input-font-weight: $ams-typography-body-text-font-weight;
798
- $ams-text-input-line-height: $ams-typography-body-text-line-height;
799
- $ams-text-input-outline-offset: $ams-focus-outline-offset;
800
- $ams-text-input-padding-block: $ams-space-s;
801
- $ams-text-input-padding-inline: $ams-space-m;
802
- $ams-text-input-disabled-color: $ams-color-interactive-disabled;
764
+ $ams-text-input-border-color: $ams-inputs-border-color;
765
+ $ams-text-input-border-style: $ams-inputs-border-style;
766
+ $ams-text-input-line-height: $ams-inputs-line-height;
803
767
  $ams-text-input-disabled-cursor: $ams-cursor-disabled;
804
- $ams-text-input-hover-box-shadow: inset 0 0 0 $ams-border-width-s;
805
- $ams-text-input-invalid-border-color: $ams-color-interactive-invalid;
806
- $ams-text-input-invalid-hover-border-color: $ams-color-interactive-invalid-hover;
807
- $ams-text-input-invalid-hover-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-invalid-hover;
808
- $ams-text-input-placeholder-color: $ams-color-text-secondary;
809
- $ams-time-input-background-color: $ams-color-background;
810
- $ams-time-input-border-width: $ams-border-width-m;
811
- $ams-time-input-color: $ams-color-text;
812
- $ams-time-input-font-family: $ams-typography-font-family;
813
- $ams-time-input-font-size: $ams-typography-body-text-font-size;
814
- $ams-time-input-font-weight: $ams-typography-body-text-font-weight;
815
- $ams-time-input-line-height: $ams-typography-body-text-line-height;
816
- $ams-time-input-outline-offset: $ams-focus-outline-offset;
817
- $ams-time-input-padding-block: $ams-space-s;
818
- $ams-time-input-padding-inline: $ams-space-m;
819
- $ams-time-input-calender-picker-indicator-cursor: $ams-cursor-interactive;
820
- $ams-time-input-disabled-color: $ams-color-interactive-disabled;
768
+ $ams-time-input-border-color: $ams-inputs-border-color;
769
+ $ams-time-input-border-style: $ams-inputs-border-style;
770
+ $ams-time-input-line-height: $ams-inputs-line-height;
821
771
  $ams-time-input-disabled-cursor: $ams-cursor-disabled;
822
- $ams-time-input-hover-box-shadow: inset 0 0 0 $ams-border-width-s;
823
- $ams-time-input-invalid-border-color: $ams-color-interactive-invalid;
824
- $ams-time-input-invalid-hover-border-color: $ams-color-interactive-invalid-hover;
825
- $ams-time-input-invalid-hover-box-shadow: inset 0 0 0 $ams-border-width-s $ams-color-interactive-invalid-hover;
772
+ $ams-time-input-calender-picker-indicator-cursor: $ams-cursor-interactive;
826
773
  $ams-unordered-list-color: $ams-color-text;
827
774
  $ams-unordered-list-font-family: $ams-typography-font-family;
828
775
  $ams-unordered-list-font-size: $ams-typography-body-text-font-size;
829
776
  $ams-unordered-list-font-weight: $ams-typography-body-text-font-weight;
830
- $ams-unordered-list-gap: $ams-space-m;
777
+ $ams-unordered-list-gap: $ams-space-s;
831
778
  $ams-unordered-list-line-height: $ams-typography-body-text-line-height;
832
779
  $ams-unordered-list-inverse-color: $ams-color-text-inverse;
833
780
  $ams-unordered-list-small-font-size: $ams-typography-body-text-small-font-size;
834
781
  $ams-unordered-list-small-line-height: $ams-typography-body-text-small-line-height;
835
782
  $ams-unordered-list-unordered-list-gap: $ams-space-s;
783
+ $ams-unordered-list-unordered-list-padding-block-end: $ams-space-s;
836
784
  $ams-unordered-list-unordered-list-padding-block-start: $ams-space-s;
837
- $ams-accordion-button-font-size: $ams-typography-heading-4-font-size;
785
+ $ams-accordion-button-font-size: $ams-typography-heading-3-font-size;
838
786
  $ams-breadcrumb-link-color: $ams-links-color;
839
- $ams-breadcrumb-link-text-decoration-thickness: $ams-links-text-decoration-thickness;
840
787
  $ams-breadcrumb-link-hover-color: $ams-links-hover-color;
841
788
  $ams-card-link-color: $ams-links-color;
842
- $ams-card-link-text-decoration-thickness: $ams-links-text-decoration-thickness;
843
789
  $ams-card-link-hover-color: $ams-links-hover-color;
844
790
  $ams-checkbox-icon-container-block-size: calc($ams-checkbox-font-size * $ams-checkbox-line-height);
791
+ $ams-checkbox-icon-container-inline-size: $ams-checkbox-font-size;
792
+ $ams-date-input-background-color: $ams-inputs-background-color;
793
+ $ams-date-input-border-width: $ams-inputs-border-width;
794
+ $ams-date-input-color: $ams-inputs-color;
795
+ $ams-date-input-font-family: $ams-inputs-font-family;
796
+ $ams-date-input-font-size: $ams-inputs-font-size;
797
+ $ams-date-input-font-weight: $ams-inputs-font-weight;
798
+ $ams-date-input-outline-offset: $ams-inputs-outline-offset;
799
+ $ams-date-input-padding-block: $ams-inputs-padding-block;
800
+ $ams-date-input-padding-inline: $ams-inputs-padding-inline;
801
+ $ams-date-input-disabled-color: $ams-inputs-disabled-color;
802
+ $ams-date-input-hover-box-shadow: $ams-inputs-hover-box-shadow;
803
+ $ams-date-input-invalid-border-color: $ams-inputs-invalid-border-color;
804
+ $ams-date-input-invalid-hover-border-color: $ams-inputs-invalid-hover-border-color;
805
+ $ams-date-input-invalid-hover-box-shadow: $ams-inputs-invalid-hover-box-shadow;
845
806
  $ams-dialog-border-color: $ams-dialog-background-color;
846
- $ams-field-set-legend-font-size: $ams-typography-heading-4-font-size;
807
+ $ams-field-set-legend-font-size: $ams-typography-heading-3-font-size;
808
+ $ams-file-input-background-color: $ams-inputs-background-color;
809
+ $ams-file-input-border-width: $ams-inputs-border-width;
810
+ $ams-file-input-color: $ams-inputs-color;
811
+ $ams-file-input-font-family: $ams-inputs-font-family;
812
+ $ams-file-input-font-size: $ams-inputs-font-size;
813
+ $ams-file-input-font-weight: $ams-inputs-font-weight;
814
+ $ams-file-input-outline-offset: $ams-inputs-outline-offset;
815
+ $ams-file-input-disabled-color: $ams-inputs-disabled-color;
816
+ $ams-file-input-file-selector-button-background-color: $ams-button-secondary-background-color;
817
+ $ams-file-input-file-selector-button-border-width: $ams-button-border-width;
818
+ $ams-file-input-file-selector-button-color: $ams-button-secondary-color;
819
+ $ams-file-input-file-selector-button-cursor: $ams-button-cursor;
820
+ $ams-file-input-file-selector-button-line-height: $ams-button-line-height;
821
+ $ams-file-input-file-selector-button-padding-block: $ams-button-padding-block;
822
+ $ams-file-input-file-selector-button-padding-inline: $ams-button-padding-inline;
823
+ $ams-file-input-file-selector-button-disabled-color: $ams-button-secondary-disabled-color;
824
+ $ams-file-input-file-selector-button-disabled-cursor: $ams-button-disabled-cursor;
825
+ $ams-file-input-file-selector-button-hover-box-shadow: $ams-button-secondary-hover-box-shadow;
826
+ $ams-file-input-file-selector-button-hover-color: $ams-button-secondary-hover-color;
827
+ $ams-heading-2-font-size: $ams-typography-heading-2-font-size;
847
828
  $ams-heading-3-font-size: $ams-typography-heading-3-font-size;
848
829
  $ams-heading-4-font-size: $ams-typography-heading-4-font-size;
849
830
  $ams-heading-5-font-size: $ams-typography-heading-5-font-size;
850
831
  $ams-heading-6-font-size: $ams-typography-heading-6-font-size;
832
+ $ams-icon-heading-2-font-size: $ams-typography-heading-2-font-size;
851
833
  $ams-icon-heading-3-font-size: $ams-typography-heading-3-font-size;
852
834
  $ams-icon-heading-4-font-size: $ams-typography-heading-4-font-size;
853
835
  $ams-icon-heading-5-font-size: $ams-typography-heading-5-font-size;
854
836
  $ams-icon-heading-6-font-size: $ams-typography-heading-6-font-size;
855
- $ams-label-font-size: $ams-typography-heading-4-font-size;
837
+ $ams-label-font-size: $ams-typography-heading-3-font-size;
856
838
  $ams-link-list-link-color: $ams-links-color;
857
- $ams-link-list-link-text-decoration-thickness: $ams-links-text-decoration-thickness;
858
839
  $ams-link-list-link-hover-color: $ams-links-hover-color;
859
840
  $ams-link-list-link-contrast-color: $ams-links-contrast-color;
860
841
  $ams-link-list-link-contrast-hover-color: $ams-links-contrast-hover-color;
861
842
  $ams-link-list-link-inverse-color: $ams-links-inverse-color;
862
843
  $ams-link-list-link-inverse-hover-color: $ams-links-inverse-hover-color;
863
844
  $ams-link-color: $ams-links-color;
864
- $ams-link-text-decoration-thickness: $ams-links-text-decoration-thickness;
865
845
  $ams-link-hover-color: $ams-links-hover-color;
866
- $ams-link-hover-text-decoration-thickness: $ams-links-hover-text-decoration-thickness;
867
846
  $ams-link-contrast-color: $ams-links-contrast-color;
868
847
  $ams-link-contrast-hover-color: $ams-links-contrast-hover-color;
869
848
  $ams-link-inverse-color: $ams-links-inverse-color;
870
849
  $ams-link-inverse-hover-color: $ams-links-inverse-hover-color;
850
+ $ams-menu-link-color: $ams-links-color;
851
+ $ams-menu-link-hover-color: $ams-links-hover-color;
852
+ $ams-menu-link-contrast-color: $ams-links-contrast-color;
853
+ $ams-menu-link-contrast-hover-color: $ams-links-contrast-hover-color;
854
+ $ams-menu-link-inverse-color: $ams-links-inverse-color;
855
+ $ams-menu-link-inverse-hover-color: $ams-links-inverse-hover-color;
871
856
  $ams-page-footer-menu-padding-inline: $ams-grid-padding-inline;
872
857
  $ams-page-footer-menu-medium-padding-inline: $ams-grid-medium-padding-inline;
873
858
  $ams-page-footer-menu-wide-padding-inline: $ams-grid-wide-padding-inline;
874
859
  $ams-page-footer-menu-link-color: $ams-links-color;
875
- $ams-page-footer-menu-link-text-decoration-thickness: $ams-links-text-decoration-thickness;
876
860
  $ams-page-footer-menu-link-hover-color: $ams-links-hover-color;
877
861
  $ams-page-header-padding-inline: $ams-grid-padding-inline; // Must be the Grid inline padding, to make sure Header and Grid line up
878
862
  $ams-page-header-medium-padding-inline: $ams-grid-medium-padding-inline;
879
863
  $ams-page-header-wide-padding-inline: $ams-grid-wide-padding-inline;
880
- $ams-page-header-brand-name-font-size: $ams-typography-heading-4-font-size;
864
+ $ams-page-header-brand-name-font-size: $ams-typography-heading-3-font-size;
881
865
  $ams-page-header-menu-item-color: $ams-links-color;
882
866
  $ams-page-header-menu-item-hover-color: $ams-links-hover-color;
883
- $ams-page-header-menu-link-text-decoration-thickness: $ams-links-text-decoration-thickness;
884
867
  $ams-pagination-link-color: $ams-links-color;
885
- $ams-pagination-link-text-decoration-thickness: $ams-links-text-decoration-thickness;
886
868
  $ams-pagination-link-hover-color: $ams-links-hover-color;
887
- $ams-radio-text-decoration-thickness: $ams-links-text-decoration-thickness;
869
+ $ams-password-input-background-color: $ams-inputs-background-color;
870
+ $ams-password-input-border-width: $ams-inputs-border-width;
871
+ $ams-password-input-color: $ams-inputs-color;
872
+ $ams-password-input-font-family: $ams-inputs-font-family;
873
+ $ams-password-input-font-size: $ams-inputs-font-size;
874
+ $ams-password-input-font-weight: $ams-inputs-font-weight;
875
+ $ams-password-input-outline-offset: $ams-inputs-outline-offset;
876
+ $ams-password-input-padding-block: $ams-inputs-padding-block;
877
+ $ams-password-input-padding-inline: $ams-inputs-padding-inline;
878
+ $ams-password-input-disabled-color: $ams-inputs-disabled-color;
879
+ $ams-password-input-hover-box-shadow: $ams-inputs-hover-box-shadow;
880
+ $ams-password-input-invalid-border-color: $ams-inputs-invalid-border-color;
881
+ $ams-password-input-invalid-hover-border-color: $ams-inputs-invalid-hover-border-color;
882
+ $ams-password-input-invalid-hover-box-shadow: $ams-inputs-invalid-hover-box-shadow;
883
+ $ams-password-input-placeholder-color: $ams-inputs-placeholder-color;
888
884
  $ams-radio-icon-container-block-size: calc($ams-radio-font-size * $ams-radio-line-height);
885
+ $ams-radio-icon-container-inline-size: $ams-radio-font-size;
886
+ $ams-search-field-input-background-color: $ams-inputs-background-color;
887
+ $ams-search-field-input-border-width: $ams-inputs-border-width;
888
+ $ams-search-field-input-color: $ams-inputs-color;
889
+ $ams-search-field-input-font-family: $ams-inputs-font-family;
890
+ $ams-search-field-input-font-size: $ams-inputs-font-size;
891
+ $ams-search-field-input-font-weight: $ams-inputs-font-weight;
892
+ $ams-search-field-input-outline-offset: $ams-inputs-outline-offset;
893
+ $ams-search-field-input-padding-block: $ams-inputs-padding-block;
894
+ $ams-search-field-input-padding-inline: $ams-inputs-padding-inline;
895
+ $ams-search-field-input-hover-box-shadow: $ams-inputs-hover-box-shadow;
896
+ $ams-search-field-input-invalid-border-color: $ams-inputs-invalid-border-color;
897
+ $ams-search-field-input-invalid-hover-border-color: $ams-inputs-invalid-hover-border-color;
898
+ $ams-search-field-input-invalid-hover-box-shadow: $ams-inputs-invalid-hover-box-shadow;
899
+ $ams-search-field-input-placeholder-color: $ams-inputs-placeholder-color;
900
+ $ams-select-background-color: $ams-inputs-background-color;
901
+ $ams-select-border-width: $ams-inputs-border-width;
902
+ $ams-select-color: $ams-inputs-color;
903
+ $ams-select-font-family: $ams-inputs-font-family;
904
+ $ams-select-font-size: $ams-inputs-font-size;
905
+ $ams-select-font-weight: $ams-inputs-font-weight;
906
+ $ams-select-outline-offset: $ams-inputs-outline-offset;
907
+ $ams-select-padding-block: $ams-inputs-padding-block;
908
+ $ams-select-padding-inline: $ams-inputs-padding-inline calc(2 * $ams-inputs-padding-inline + 1em);
909
+ $ams-select-disabled-color: $ams-inputs-disabled-color;
910
+ $ams-select-hover-box-shadow: $ams-inputs-hover-box-shadow;
911
+ $ams-select-invalid-border-color: $ams-inputs-invalid-border-color;
912
+ $ams-select-invalid-hover-border-color: $ams-inputs-invalid-hover-border-color;
913
+ $ams-select-invalid-hover-box-shadow: $ams-inputs-invalid-hover-box-shadow;
914
+ $ams-standalone-link-hover-color: $ams-links-hover-color;
889
915
  $ams-standalone-link-color: $ams-links-color;
890
- $ams-standalone-link-text-decoration-thickness: $ams-links-text-decoration-thickness;
891
916
  $ams-standalone-link-contrast-color: $ams-links-contrast-color;
892
917
  $ams-standalone-link-contrast-hover-color: $ams-links-contrast-hover-color;
893
- $ams-standalone-link-hover-color: $ams-links-hover-color;
894
- $ams-standalone-link-hover-text-decoration-thickness: $ams-links-hover-text-decoration-thickness;
895
918
  $ams-standalone-link-inverse-color: $ams-links-inverse-color;
896
919
  $ams-standalone-link-inverse-hover-color: $ams-links-inverse-hover-color;
920
+ $ams-table-of-contents-heading-font-size: $ams-typography-heading-4-font-size;
897
921
  $ams-table-of-contents-link-color: $ams-links-color;
898
- $ams-table-of-contents-link-text-decoration-thickness: $ams-links-text-decoration-thickness;
899
922
  $ams-table-of-contents-link-hover-color: $ams-links-hover-color;
900
- $ams-table-of-contents-heading-font-size: $ams-typography-heading-4-font-size;
923
+ $ams-text-area-background-color: $ams-inputs-background-color;
924
+ $ams-text-area-border-width: $ams-inputs-border-width;
925
+ $ams-text-area-color: $ams-inputs-color;
926
+ $ams-text-area-font-family: $ams-inputs-font-family;
927
+ $ams-text-area-font-size: $ams-inputs-font-size;
928
+ $ams-text-area-font-weight: $ams-inputs-font-weight;
929
+ $ams-text-area-outline-offset: $ams-inputs-outline-offset;
930
+ $ams-text-area-padding-block: $ams-inputs-padding-block;
931
+ $ams-text-area-padding-inline: $ams-inputs-padding-inline;
932
+ $ams-text-area-disabled-color: $ams-inputs-disabled-color;
933
+ $ams-text-area-hover-box-shadow: $ams-inputs-hover-box-shadow;
934
+ $ams-text-area-invalid-border-color: $ams-inputs-invalid-border-color;
935
+ $ams-text-area-invalid-hover-border-color: $ams-inputs-invalid-hover-border-color;
936
+ $ams-text-area-invalid-hover-box-shadow: $ams-inputs-invalid-hover-box-shadow;
937
+ $ams-text-area-placeholder-color: $ams-inputs-placeholder-color;
938
+ $ams-text-input-background-color: $ams-inputs-background-color;
939
+ $ams-text-input-border-width: $ams-inputs-border-width;
940
+ $ams-text-input-color: $ams-inputs-color;
941
+ $ams-text-input-font-family: $ams-inputs-font-family;
942
+ $ams-text-input-font-size: $ams-inputs-font-size;
943
+ $ams-text-input-font-weight: $ams-inputs-font-weight;
944
+ $ams-text-input-outline-offset: $ams-inputs-outline-offset;
945
+ $ams-text-input-padding-block: $ams-inputs-padding-block;
946
+ $ams-text-input-padding-inline: $ams-inputs-padding-inline;
947
+ $ams-text-input-disabled-color: $ams-inputs-disabled-color;
948
+ $ams-text-input-hover-box-shadow: $ams-inputs-hover-box-shadow;
949
+ $ams-text-input-invalid-border-color: $ams-inputs-invalid-border-color;
950
+ $ams-text-input-invalid-hover-border-color: $ams-inputs-invalid-hover-border-color;
951
+ $ams-text-input-invalid-hover-box-shadow: $ams-inputs-invalid-hover-box-shadow;
952
+ $ams-text-input-placeholder-color: $ams-inputs-placeholder-color;
953
+ $ams-time-input-background-color: $ams-inputs-background-color;
954
+ $ams-time-input-border-width: $ams-inputs-border-width;
955
+ $ams-time-input-color: $ams-inputs-color;
956
+ $ams-time-input-font-family: $ams-inputs-font-family;
957
+ $ams-time-input-font-size: $ams-inputs-font-size;
958
+ $ams-time-input-font-weight: $ams-inputs-font-weight;
959
+ $ams-time-input-outline-offset: $ams-inputs-outline-offset;
960
+ $ams-time-input-padding-block: $ams-inputs-padding-block;
961
+ $ams-time-input-padding-inline: $ams-inputs-padding-inline;
962
+ $ams-time-input-disabled-color: $ams-inputs-disabled-color;
963
+ $ams-time-input-hover-box-shadow: $ams-inputs-hover-box-shadow;
964
+ $ams-time-input-invalid-border-color: $ams-inputs-invalid-border-color;
965
+ $ams-time-input-invalid-hover-border-color: $ams-inputs-invalid-hover-border-color;
966
+ $ams-time-input-invalid-hover-box-shadow: $ams-inputs-invalid-hover-box-shadow;