@amsterdam/design-system-tokens 0.9.0 → 0.11.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 (56) hide show
  1. package/CHANGELOG.md +34 -0
  2. package/build.js +15 -14
  3. package/dist/compact.css +13 -9
  4. package/dist/compact.d.ts +10 -12
  5. package/dist/compact.json +12 -7
  6. package/dist/compact.mjs +13 -9
  7. package/dist/compact.scss +13 -9
  8. package/dist/compact.theme.css +13 -9
  9. package/dist/index.css +145 -108
  10. package/dist/index.d.ts +96 -41
  11. package/dist/index.json +254 -192
  12. package/dist/index.mjs +223 -186
  13. package/dist/index.scss +145 -108
  14. package/dist/index.theme.css +145 -108
  15. package/package.json +3 -2
  16. package/src/brand/ams/proportion.tokens.json +3 -3
  17. package/src/brand/ams/space.compact.tokens.json +5 -0
  18. package/src/brand/ams/space.tokens.json +10 -19
  19. package/src/brand/ams/text.compact.tokens.json +7 -7
  20. package/src/brand/ams/text.tokens.json +7 -7
  21. package/src/components/ams/accordion.tokens.json +4 -4
  22. package/src/components/ams/alert.tokens.json +6 -3
  23. package/src/components/ams/avatar.tokens.json +26 -6
  24. package/src/components/ams/badge.tokens.json +1 -1
  25. package/src/components/ams/breadcrumb.tokens.json +4 -1
  26. package/src/components/ams/button.tokens.json +3 -3
  27. package/src/components/ams/card.tokens.json +4 -0
  28. package/src/components/ams/{form-field-character-counter.tokens.json → character-count.tokens.json} +1 -1
  29. package/src/components/ams/checkbox.tokens.json +1 -0
  30. package/src/components/ams/column.tokens.json +6 -5
  31. package/src/components/ams/date-input.tokens.json +2 -2
  32. package/src/components/ams/description-list.tokens.json +3 -3
  33. package/src/components/ams/dialog.tokens.json +8 -7
  34. package/src/components/ams/field-set.tokens.json +3 -7
  35. package/src/components/ams/field.tokens.json +3 -9
  36. package/src/components/ams/file-input.tokens.json +5 -5
  37. package/src/components/ams/form-error-list.tokens.json +7 -0
  38. package/src/components/ams/header.tokens.json +1 -1
  39. package/src/components/ams/link-list.tokens.json +2 -2
  40. package/src/components/ams/mega-menu.tokens.json +1 -1
  41. package/src/components/ams/ordered-list.tokens.json +1 -1
  42. package/src/components/ams/page-menu.tokens.json +1 -1
  43. package/src/components/ams/pagination.tokens.json +2 -1
  44. package/src/components/ams/radio.tokens.json +1 -0
  45. package/src/components/ams/row.tokens.json +6 -5
  46. package/src/components/ams/search-field.tokens.json +4 -4
  47. package/src/components/ams/select.tokens.json +3 -3
  48. package/src/components/ams/skip-link.tokens.json +2 -2
  49. package/src/components/ams/table-of-contents.tokens.json +34 -0
  50. package/src/components/ams/table.tokens.json +2 -2
  51. package/src/components/ams/tabs.tokens.json +3 -2
  52. package/src/components/ams/text-area.tokens.json +2 -2
  53. package/src/components/ams/text-input.tokens.json +2 -2
  54. package/src/components/ams/time-input.tokens.json +2 -2
  55. package/src/components/ams/top-task-link.tokens.json +1 -0
  56. package/src/components/ams/unordered-list.tokens.json +1 -1
package/dist/index.scss CHANGED
@@ -1,6 +1,5 @@
1
1
 
2
- // Do not edit directly
3
- // Generated on Wed, 05 Jun 2024 11:22:11 GMT
2
+ // Do not edit directly, this file was auto-generated.
4
3
 
5
4
  $ams-unordered-list-unordered-list-item-padding-inline-start: 0.875rem; // The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem.
6
5
  $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.
@@ -8,14 +7,9 @@ $ams-unordered-list-unordered-list-list-style-type: '\2013';
8
7
  $ams-unordered-list-item-padding-inline-start: 0.875rem; // The total level 1 indentation for Amsterdam is 40 pixels, or 2.5rem.
9
8
  $ams-unordered-list-item-margin-inline-start: 1.625rem; // Divide your total indentation width over margin and padding to position the marker.
10
9
  $ams-unordered-list-list-style-type: '\2022';
11
- $ams-unordered-list-gap: 0.75rem;
12
10
  $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='%23102E62'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>");
13
11
  $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='%23BEBEBE'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>");
14
12
  $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>");
15
- $ams-text-area-padding-inline: 1rem;
16
- $ams-text-area-padding-block: 0.5rem;
17
- $ams-tabs-button-padding-inline: 1rem;
18
- $ams-tabs-button-padding-block: .5rem;
19
13
  $ams-tabs-button-outline-offset: -0.25rem;
20
14
  $ams-switch-thumb-block-size: 1.75rem;
21
15
  $ams-switch-thumb-inline-size: 1.75rem;
@@ -25,55 +19,45 @@ $ams-select-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://ww
25
19
  $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>");
26
20
  $ams-screen-x-wide-max-inline-size: 132rem;
27
21
  $ams-screen-wide-max-inline-size: 100rem;
22
+ $ams-row-gap-no: 0;
28
23
  $ams-radio-circle-invalid-checked-hover-background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='%23EC0000'%3E%3Ccircle cx='16' cy='16' r='16' /%3E%3C/svg%3E");
29
24
  $ams-radio-circle-invalid-checked-background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='%23EC0000'%3E%3Ccircle cx='16' cy='16' r='16' /%3E%3C/svg%3E");
30
25
  $ams-radio-circle-disabled-checked-hover-background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='%23767676'%3E%3Ccircle cx='16' cy='16' r='16' /%3E%3C/svg%3E");
31
26
  $ams-radio-circle-disabled-checked-background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='%23767676'%3E%3Ccircle cx='16' cy='16' r='16' /%3E%3C/svg%3E");
32
27
  $ams-radio-circle-checked-hover-background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='%23102E62'%3E%3Ccircle cx='16' cy='16' r='16' /%3E%3C/svg%3E");
33
28
  $ams-radio-circle-checked-background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='%23004699'%3E%3Ccircle cx='16' cy='16' r='16' /%3E%3C/svg%3E");
34
- $ams-page-menu-item-gap: 0.5rem;
35
29
  $ams-ordered-list-ordered-list-item-padding-inline-start: 0.25rem; // The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem.
36
30
  $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.
37
31
  $ams-ordered-list-ordered-list-list-style-type: lower-alpha;
38
32
  $ams-ordered-list-item-padding-inline-start: 0.25rem; // The total level 1 indentation for Amsterdam is 40 pixels, or 2.5rem.
39
33
  $ams-ordered-list-item-margin-inline-start: 2.25rem; // Divide your total indentation width over margin and padding to position the marker.
40
34
  $ams-ordered-list-list-style-type: decimal;
41
- $ams-ordered-list-gap: 0.75rem;
42
- $ams-mega-menu-list-category-padding-block-start: 1rem;
43
35
  $ams-mega-menu-list-category-column-width: 20rem;
44
36
  $ams-logo-block-size: 2.5rem;
45
37
  $ams-link-inline-line-height: inherit;
46
38
  $ams-link-inline-font-size: inherit;
47
39
  $ams-link-inline-font-family: inherit;
48
- $ams-link-list-link-gap: 0.5em;
49
- $ams-link-list-gap: 0.5em;
50
40
  $ams-icon-button-on-background-light-hover-background-color: rgba(0, 0, 0, 0.125);
51
41
  $ams-icon-button-hover-background-color: rgba(0, 70, 153, 0.125);
52
42
  $ams-grid-wide-column-count: 12;
53
43
  $ams-grid-medium-column-count: 8;
54
44
  $ams-grid-column-count: 4;
55
- $ams-dialog-footer-gap: 1rem;
56
- $ams-dialog-header-gap: 1rem;
57
- $ams-dialog-form-max-block-size: 75vh;
58
- $ams-dialog-form-padding-inline: clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem);
59
- $ams-dialog-form-padding-block: clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem);
60
- $ams-dialog-form-gap: 1.5rem;
61
- $ams-dialog-max-inline-size: min(87.69vw, 45rem);
45
+ $ams-dialog-max-inline-size: 48rem;
62
46
  $ams-dialog-border: 0;
63
47
  $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='%23102E62'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>");
64
48
  $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='%23BEBEBE'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>");
65
49
  $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>");
50
+ $ams-column-gap-no: 0;
66
51
  $ams-checkbox-checkmark-indeterminate-background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='white'%3E%3Cpath fill-rule='evenodd' d='M0 13.714h32v4H0z'/%3E%3C/svg%3E");
67
52
  $ams-checkbox-checkmark-checked-background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23ffffff'%3E%3Cpath fill-rule='evenodd' d='M12.216 27.016 0 14.168l2.91-2.77 9.346 9.837L29.129 4 32 6.8z'/%3E%3C/svg%3E");
68
53
  $ams-button-tertiary-disabled-background-color: transparent;
69
54
  $ams-button-tertiary-background-color: transparent;
70
- $ams-button-gap: 1rem;
55
+ $ams-breadcrumb-separator-inline-size: 1ex;
56
+ $ams-breadcrumb-separator-block-size: 1ex;
71
57
  $ams-breadcrumb-separator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23000000' fill-rule='evenodd' d='m9.757 32-2.9-2.91L19.937 16 6.857 2.91 9.757 0l16 16z'/></svg>");
72
- $ams-avatar-padding-inline: 0.25rem;
73
- $ams-avatar-padding-block: 0.25rem;
74
- $ams-alert-gap: 1rem;
75
58
  $ams-alert-border-style: solid;
76
59
  $ams-accordion-panel-padding-inline: 0;
60
+ $ams-accordion-panel-padding-block: 0;
77
61
  $ams-accordion-button-padding-inline: 0;
78
62
  $ams-link-appearance-subtle-hover-text-decoration-line: underline;
79
63
  $ams-link-appearance-subtle-text-decoration-line: none;
@@ -91,42 +75,37 @@ $ams-action-disabled-cursor: not-allowed;
91
75
  $ams-action-busy-cursor: wait;
92
76
  $ams-action-activate-cursor: pointer;
93
77
  $ams-text-level-6-line-height: 1.6;
94
- $ams-text-level-6-font-size: clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem);
78
+ $ams-text-level-6-font-size: clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem);
95
79
  $ams-text-level-5-line-height: 1.6;
96
- $ams-text-level-5-font-size: clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem);
80
+ $ams-text-level-5-font-size: clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem);
97
81
  $ams-text-level-4-line-height: 1.5;
98
- $ams-text-level-4-font-size: clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem);
82
+ $ams-text-level-4-font-size: clamp(1.3125rem, calc(1.1719rem + 0.7031vw), 1.875rem);
99
83
  $ams-text-level-3-line-height: 1.3;
100
- $ams-text-level-3-font-size: clamp(1.531rem, calc(1.016vw + 1.328rem), 2.344rem);
84
+ $ams-text-level-3-font-size: clamp(1.5313rem, calc(1.3281rem + 1.0156vw), 2.3438rem);
101
85
  $ams-text-level-2-line-height: 1.25;
102
- $ams-text-level-2-font-size: clamp(1.786rem, calc(1.43vw + 1.5rem), 2.93rem);
86
+ $ams-text-level-2-font-size: clamp(1.7865rem, calc(1.5007rem + 1.429vw), 2.9297rem);
103
87
  $ams-text-level-1-line-height: 1.2;
104
- $ams-text-level-1-font-size: clamp(2.084rem, calc(1.973vw + 1.69rem), 3.662rem);
88
+ $ams-text-level-1-font-size: clamp(2.0842rem, calc(1.6897rem + 1.9724vw), 3.6621rem);
105
89
  $ams-text-level-0-line-height: 1.15;
106
- $ams-text-level-0-font-size: clamp(2.432rem, calc(2.683vw + 1.895rem), 4.578rem);
90
+ $ams-text-level-0-font-size: clamp(2.4316rem, calc(1.8951rem + 2.6826vw), 4.5776rem);
107
91
  $ams-text-font-weight-bold: 800;
108
92
  $ams-text-font-weight-normal: 400;
109
93
  $ams-text-font-family: 'Amsterdam Sans', Arial, sans-serif;
110
- $ams-space-stack-xl: 2rem;
111
- $ams-space-stack-lg: 1.5rem;
112
- $ams-space-stack-md: 1rem;
113
- $ams-space-stack-sm: .75rem;
114
- $ams-space-stack-xs: .5rem;
115
- $ams-space-inside-xl: 2rem;
116
- $ams-space-inside-lg: 1.5rem;
117
- $ams-space-inside-md: 1rem;
118
- $ams-space-inside-sm: .75rem;
119
- $ams-space-inside-xs: .5rem;
120
- $ams-space-grid-xl: clamp(2rem, calc(6.25vw + 0.75rem), 7rem);
121
- $ams-space-grid-lg: clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem);
122
- $ams-space-grid-md: clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem); // Grows from 16px at 320px wide to 56px at 1600px wide.
123
- $ams-space-grid-sm: clamp(0.5rem, calc(1.5625vw + 0.1875rem), 1.75rem);
124
- $ams-space-grid-xs: clamp(0.25rem, calc(0.78125vw + 0.09375rem), 0.875rem);
125
- $ams-proportion-2x-wide: 32 / 9;
94
+ $ams-space-grid-xl: clamp(2rem, calc(0.75rem + 6.25vw), 7rem);
95
+ $ams-space-grid-lg: clamp(1.5rem, calc(0.5625rem + 4.6875vw), 5.25rem);
96
+ $ams-space-grid-md: clamp(1rem, calc(0.375rem + 3.125vw), 3.5rem); // Grows from 16px at 320px wide to 56px at 1600px wide.
97
+ $ams-space-grid-sm: clamp(0.5rem, calc(0.1875rem + 1.5625vw), 1.75rem);
98
+ $ams-space-grid-xs: clamp(0.25rem, calc(0.09375rem + 0.78125vw), 0.875rem);
99
+ $ams-space-xl: clamp(2.25rem, 2.0625rem + 0.9375vw, 3rem);
100
+ $ams-space-lg: clamp(1.6875rem, 1.5469rem + 0.7031vw, 2.25rem);
101
+ $ams-space-md: clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem);
102
+ $ams-space-sm: clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem);
103
+ $ams-space-xs: clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem);
104
+ $ams-proportion-2x-wide: 16 / 5;
126
105
  $ams-proportion-x-wide: 16 / 9;
127
- $ams-proportion-wide: 5 / 4;
106
+ $ams-proportion-wide: 4 / 3;
128
107
  $ams-proportion-square: 1 / 1;
129
- $ams-proportion-tall: 4 / 5;
108
+ $ams-proportion-tall: 3 / 4;
130
109
  $ams-proportion-x-tall: 9 / 16;
131
110
  $ams-color-neutral-grey3: #767676;
132
111
  $ams-color-neutral-grey2: #BEBEBE;
@@ -151,6 +130,7 @@ $ams-unordered-list-small-line-height: $ams-text-level-6-line-height;
151
130
  $ams-unordered-list-small-font-size: $ams-text-level-6-font-size;
152
131
  $ams-unordered-list-line-height: $ams-text-level-5-line-height;
153
132
  $ams-unordered-list-inverse-color: $ams-color-primary-white;
133
+ $ams-unordered-list-gap: $ams-space-sm;
154
134
  $ams-unordered-list-font-weight: $ams-text-font-weight-normal;
155
135
  $ams-unordered-list-font-size: $ams-text-level-5-font-size;
156
136
  $ams-unordered-list-font-family: $ams-text-font-family;
@@ -169,14 +149,15 @@ $ams-top-task-link-description-font-weight: $ams-text-font-weight-normal;
169
149
  $ams-top-task-link-description-font-size: $ams-text-level-6-font-size;
170
150
  $ams-top-task-link-description-font-family: $ams-text-font-family;
171
151
  $ams-top-task-link-description-color: $ams-color-primary-black;
152
+ $ams-top-task-link-gap: $ams-space-sm;
172
153
  $ams-time-input-invalid-hover-box-shadow: inset 0 0 0 $ams-border-width-md $ams-color-primary-red;
173
154
  $ams-time-input-invalid-box-shadow: inset 0 0 0 $ams-border-width-sm $ams-color-primary-red;
174
155
  $ams-time-input-hover-box-shadow: inset 0 0 0 $ams-border-width-md $ams-color-primary-black;
175
156
  $ams-time-input-disabled-color: $ams-color-neutral-grey2;
176
157
  $ams-time-input-disabled-box-shadow: inset 0 0 0 $ams-border-width-sm $ams-color-neutral-grey2;
177
158
  $ams-time-input-disabled-background-color: $ams-color-primary-white;
178
- $ams-time-input-padding-inline: $ams-space-inside-md;
179
- $ams-time-input-padding-block: $ams-space-inside-xs;
159
+ $ams-time-input-padding-inline: $ams-space-md;
160
+ $ams-time-input-padding-block: $ams-space-sm;
180
161
  $ams-time-input-outline-offset: $ams-focus-outline-offset;
181
162
  $ams-time-input-line-height: $ams-text-level-5-line-height;
182
163
  $ams-time-input-font-weight: $ams-text-font-weight-normal;
@@ -192,8 +173,8 @@ $ams-text-input-hover-box-shadow: inset 0 0 0 $ams-border-width-md $ams-color-pr
192
173
  $ams-text-input-disabled-color: $ams-color-neutral-grey2;
193
174
  $ams-text-input-disabled-box-shadow: inset 0 0 0 $ams-border-width-sm $ams-color-neutral-grey2;
194
175
  $ams-text-input-disabled-background-color: $ams-color-primary-white;
195
- $ams-text-input-padding-inline: $ams-space-inside-md;
196
- $ams-text-input-padding-block: $ams-space-inside-xs;
176
+ $ams-text-input-padding-inline: $ams-space-md;
177
+ $ams-text-input-padding-block: $ams-space-sm;
197
178
  $ams-text-input-outline-offset: $ams-focus-outline-offset;
198
179
  $ams-text-input-line-height: $ams-text-level-5-line-height;
199
180
  $ams-text-input-font-weight: $ams-text-font-weight-normal;
@@ -210,6 +191,8 @@ $ams-text-area-disabled-cursor: $ams-action-disabled-cursor;
210
191
  $ams-text-area-disabled-color: $ams-color-neutral-grey2;
211
192
  $ams-text-area-disabled-box-shadow: inset 0 0 0 $ams-border-width-sm $ams-color-neutral-grey2;
212
193
  $ams-text-area-disabled-background-color: $ams-color-primary-white;
194
+ $ams-text-area-padding-inline: $ams-space-md;
195
+ $ams-text-area-padding-block: $ams-space-sm;
213
196
  $ams-text-area-outline-offset: $ams-focus-outline-offset;
214
197
  $ams-text-area-min-block-size: calc($ams-text-level-5-line-height * 1em + 2 * $ams-text-area-padding-block);
215
198
  $ams-text-area-line-height: $ams-text-level-5-line-height;
@@ -225,6 +208,8 @@ $ams-tabs-button-selected-color: $ams-color-primary-white;
225
208
  $ams-tabs-button-selected-background-color: $ams-color-primary-blue;
226
209
  $ams-tabs-button-hover-box-shadow: inset 0 -0.125rem 0 0 $ams-color-dark-blue;
227
210
  $ams-tabs-button-hover-color: $ams-color-dark-blue;
211
+ $ams-tabs-button-padding-inline: $ams-space-md;
212
+ $ams-tabs-button-padding-block: $ams-space-sm;
228
213
  $ams-tabs-button-line-height: $ams-text-level-5-line-height;
229
214
  $ams-tabs-button-font-weight: $ams-text-font-weight-normal;
230
215
  $ams-tabs-button-font-size: $ams-text-level-5-font-size;
@@ -233,9 +218,10 @@ $ams-tabs-button-cursor: $ams-action-activate-cursor;
233
218
  $ams-tabs-button-color: $ams-color-primary-blue;
234
219
  $ams-tabs-list-border-block-end: $ams-border-width-md solid $ams-color-primary-blue;
235
220
  $ams-tabs-list-background-color: $ams-color-primary-white;
221
+ $ams-tabs-gap: $ams-space-md;
236
222
  $ams-table-header-cell-font-weight: $ams-text-font-weight-bold;
237
- $ams-table-cell-padding-inline: $ams-space-inside-md;
238
- $ams-table-cell-padding-block: $ams-space-inside-md;
223
+ $ams-table-cell-padding-inline: $ams-space-md;
224
+ $ams-table-cell-padding-block: $ams-space-sm;
239
225
  $ams-table-cell-border-block-end: $ams-border-width-sm solid $ams-color-neutral-grey1;
240
226
  $ams-table-caption-font-weight: $ams-text-font-weight-bold;
241
227
  $ams-table-line-height: $ams-text-level-5-line-height;
@@ -243,6 +229,21 @@ $ams-table-font-weight: $ams-text-font-weight-normal;
243
229
  $ams-table-font-size: $ams-text-level-5-font-size;
244
230
  $ams-table-font-family: $ams-text-font-family;
245
231
  $ams-table-color: $ams-color-primary-black;
232
+ $ams-table-of-contents-heading-line-height: $ams-text-level-4-line-height;
233
+ $ams-table-of-contents-heading-font-size: $ams-text-level-4-font-size;
234
+ $ams-table-of-contents-heading-font-weight: $ams-text-font-weight-bold;
235
+ $ams-table-of-contents-list-list-padding-inline-start: $ams-space-lg;
236
+ $ams-table-of-contents-list-list-padding-block-start: $ams-space-sm;
237
+ $ams-table-of-contents-list-gap: $ams-space-sm;
238
+ $ams-table-of-contents-link-hover-text-decoration-line: $ams-link-appearance-subtle-hover-text-decoration-line;
239
+ $ams-table-of-contents-link-text-underline-offset: $ams-link-appearance-text-underline-offset;
240
+ $ams-table-of-contents-link-text-decoration-line: $ams-link-appearance-subtle-text-decoration-line;
241
+ $ams-table-of-contents-link-outline-offset: $ams-focus-outline-offset;
242
+ $ams-table-of-contents-line-height: $ams-text-level-5-line-height;
243
+ $ams-table-of-contents-gap: $ams-space-md;
244
+ $ams-table-of-contents-font-weight: $ams-text-font-weight-normal;
245
+ $ams-table-of-contents-font-size: $ams-text-level-5-font-size;
246
+ $ams-table-of-contents-font-family: $ams-text-font-family;
246
247
  $ams-switch-disabled-background-color: $ams-color-neutral-grey2;
247
248
  $ams-switch-checked-background-color: $ams-color-primary-blue;
248
249
  $ams-switch-thumb-hover-color: $ams-color-dark-blue;
@@ -259,8 +260,8 @@ $ams-spotlight-dark-green-background-color: $ams-color-dark-green;
259
260
  $ams-spotlight-dark-blue-background-color: $ams-color-primary-blue;
260
261
  $ams-spotlight-blue-background-color: $ams-color-blue;
261
262
  $ams-skip-link-hover-background-color: $ams-color-dark-blue;
262
- $ams-skip-link-padding-inline: $ams-space-inside-md;
263
- $ams-skip-link-padding-block: $ams-space-inside-xs;
263
+ $ams-skip-link-padding-inline: $ams-space-md;
264
+ $ams-skip-link-padding-block: $ams-space-sm;
264
265
  $ams-skip-link-outline-offset: $ams-focus-outline-offset;
265
266
  $ams-skip-link-line-height: $ams-text-level-6-line-height;
266
267
  $ams-skip-link-font-weight: $ams-text-font-weight-normal;
@@ -274,8 +275,8 @@ $ams-select-invalid-box-shadow: inset 0 0 0 $ams-border-width-sm $ams-color-prim
274
275
  $ams-select-hover-box-shadow: inset 0 0 0 $ams-border-width-md $ams-color-primary-black;
275
276
  $ams-select-disabled-color: $ams-color-neutral-grey2;
276
277
  $ams-select-disabled-box-shadow: inset 0 0 0 $ams-border-width-sm $ams-color-neutral-grey2;
277
- $ams-select-padding-inline: $ams-space-inside-md calc(2 * $ams-space-inside-md + 1em);
278
- $ams-select-padding-block: $ams-space-inside-xs;
278
+ $ams-select-padding-inline: $ams-space-md calc(2 * $ams-space-md + 1em);
279
+ $ams-select-padding-block: $ams-space-sm;
279
280
  $ams-select-outline-offset: $ams-focus-outline-offset;
280
281
  $ams-select-line-height: $ams-text-level-5-line-height;
281
282
  $ams-select-font-weight: $ams-text-font-weight-normal;
@@ -283,7 +284,7 @@ $ams-select-font-size: $ams-text-level-5-font-size;
283
284
  $ams-select-font-family: $ams-text-font-family;
284
285
  $ams-select-color: $ams-color-primary-black;
285
286
  $ams-select-box-shadow: inset 0 0 0 $ams-border-width-sm $ams-color-primary-black;
286
- $ams-select-background-position: right $ams-space-inside-md center;
287
+ $ams-select-background-position: right $ams-space-md center;
287
288
  $ams-select-background-color: $ams-color-primary-white;
288
289
  $ams-search-field-input-placeholder-color: $ams-color-neutral-grey3;
289
290
  $ams-search-field-input-invalid-hover-box-shadow: inset 0 0 0 $ams-border-width-md $ams-color-primary-red;
@@ -292,8 +293,8 @@ $ams-search-field-input-hover-box-shadow: inset 0 0 0 $ams-border-width-md $ams-
292
293
  $ams-search-field-input-cancel-button-inline-size: $ams-text-level-5-font-size;
293
294
  $ams-search-field-input-cancel-button-color: $ams-color-primary-blue;
294
295
  $ams-search-field-input-cancel-button-block-size: $ams-text-level-5-font-size;
295
- $ams-search-field-input-padding-inline: $ams-space-inside-md;
296
- $ams-search-field-input-padding-block: $ams-space-inside-xs;
296
+ $ams-search-field-input-padding-inline: $ams-space-md;
297
+ $ams-search-field-input-padding-block: $ams-space-sm;
297
298
  $ams-search-field-input-outline-offset: $ams-focus-outline-offset;
298
299
  $ams-search-field-input-line-height: $ams-text-level-5-line-height;
299
300
  $ams-search-field-input-font-weight: $ams-text-font-weight-normal;
@@ -303,17 +304,17 @@ $ams-search-field-input-color: $ams-color-primary-black;
303
304
  $ams-search-field-input-box-shadow: inset 0 0 0 $ams-border-width-sm $ams-color-primary-black;
304
305
  $ams-search-field-input-background-color: $ams-color-primary-white;
305
306
  $ams-search-field-button-hover-background-color: $ams-color-dark-blue;
306
- $ams-search-field-button-padding-inline: $ams-space-inside-xs;
307
- $ams-search-field-button-padding-block: $ams-space-inside-xs;
307
+ $ams-search-field-button-padding-inline: $ams-space-sm;
308
+ $ams-search-field-button-padding-block: $ams-space-sm;
308
309
  $ams-search-field-button-outline-offset: $ams-focus-outline-offset;
309
310
  $ams-search-field-button-color: $ams-color-primary-white;
310
311
  $ams-search-field-button-background-color: $ams-color-primary-blue;
311
312
  $ams-screen-background-color: $ams-color-primary-white;
312
- $ams-row-gap-xl: $ams-space-stack-xl;
313
- $ams-row-gap-lg: $ams-space-stack-lg;
314
- $ams-row-gap-md: $ams-space-stack-md;
315
- $ams-row-gap-sm: $ams-space-stack-sm;
316
- $ams-row-gap-xs: $ams-space-stack-xs;
313
+ $ams-row-gap-xl: $ams-space-xl;
314
+ $ams-row-gap-lg: $ams-space-lg;
315
+ $ams-row-gap-md: $ams-space-md;
316
+ $ams-row-gap-sm: $ams-space-sm;
317
+ $ams-row-gap-xs: $ams-space-xs;
317
318
  $ams-radio-hover-text-decoration-thickness: $ams-border-width-md;
318
319
  $ams-radio-hover-color: $ams-color-dark-blue;
319
320
  $ams-radio-disabled-color: $ams-color-neutral-grey3;
@@ -326,6 +327,7 @@ $ams-radio-circle-border-width: $ams-border-width-md;
326
327
  $ams-radio-circle-border-color: $ams-color-primary-blue;
327
328
  $ams-radio-outline-offset: $ams-focus-outline-offset;
328
329
  $ams-radio-line-height: $ams-text-level-5-line-height;
330
+ $ams-radio-gap: $ams-space-sm;
329
331
  $ams-radio-font-weight: $ams-text-font-weight-normal;
330
332
  $ams-radio-font-size: $ams-text-level-5-font-size;
331
333
  $ams-radio-font-family: $ams-text-font-family;
@@ -344,8 +346,9 @@ $ams-pagination-button-hover-text-decoration-line: $ams-link-appearance-subtle-h
344
346
  $ams-pagination-button-current-font-weight: $ams-text-font-weight-bold;
345
347
  $ams-pagination-button-text-underline-offset: $ams-link-appearance-text-underline-offset;
346
348
  $ams-pagination-button-text-decoration-line: $ams-link-appearance-subtle-text-decoration-line;
347
- $ams-pagination-button-padding-inline: $ams-space-inside-sm;
349
+ $ams-pagination-button-padding-inline: $ams-space-sm;
348
350
  $ams-pagination-button-outline-offset: $ams-focus-outline-offset;
351
+ $ams-pagination-button-gap: $ams-space-xs;
349
352
  $ams-pagination-line-height: $ams-text-level-5-line-height;
350
353
  $ams-pagination-font-weight: $ams-text-font-weight-normal;
351
354
  $ams-pagination-font-size: $ams-text-level-5-font-size;
@@ -355,6 +358,7 @@ $ams-page-menu-item-text-underline-offset: $ams-link-appearance-text-underline-o
355
358
  $ams-page-menu-item-text-decoration-line: $ams-link-appearance-subtle-text-decoration-line;
356
359
  $ams-page-menu-item-outline-offset: $ams-focus-outline-offset;
357
360
  $ams-page-menu-item-line-height: $ams-text-level-6-line-height;
361
+ $ams-page-menu-item-gap: $ams-space-sm;
358
362
  $ams-page-menu-item-font-weight: $ams-text-font-weight-normal;
359
363
  $ams-page-menu-item-font-size: $ams-text-level-6-font-size;
360
364
  $ams-page-menu-item-font-family: $ams-text-font-family;
@@ -370,11 +374,13 @@ $ams-ordered-list-small-line-height: $ams-text-level-6-line-height;
370
374
  $ams-ordered-list-small-font-size: $ams-text-level-6-font-size;
371
375
  $ams-ordered-list-line-height: $ams-text-level-5-line-height;
372
376
  $ams-ordered-list-inverse-color: $ams-color-primary-white;
377
+ $ams-ordered-list-gap: $ams-space-sm;
373
378
  $ams-ordered-list-font-weight: $ams-text-font-weight-normal;
374
379
  $ams-ordered-list-font-size: $ams-text-level-5-font-size;
375
380
  $ams-ordered-list-font-family: $ams-text-font-family;
376
381
  $ams-ordered-list-color: $ams-color-primary-black;
377
382
  $ams-mega-menu-list-category-padding-block-end: $ams-space-grid-md; // Must have the same value as `ams.grid.row-gap.md`.
383
+ $ams-mega-menu-list-category-padding-block-start: $ams-space-md;
378
384
  $ams-mega-menu-list-category-column-gap: $ams-space-grid-md; // Must have the same value as `ams.grid.column-gap`.
379
385
  $ams-mark-background-color: $ams-color-yellow;
380
386
  $ams-margin-xl: $ams-space-grid-xl;
@@ -406,9 +412,11 @@ $ams-link-list-link-text-underline-offset: $ams-link-appearance-text-underline-o
406
412
  $ams-link-list-link-text-decoration-line: $ams-link-appearance-subtle-text-decoration-line;
407
413
  $ams-link-list-link-outline-offset: $ams-focus-outline-offset;
408
414
  $ams-link-list-link-line-height: $ams-text-level-5-line-height;
415
+ $ams-link-list-link-gap: $ams-space-sm;
409
416
  $ams-link-list-link-font-weight: $ams-text-font-weight-normal;
410
417
  $ams-link-list-link-font-size: $ams-text-level-5-font-size;
411
418
  $ams-link-list-link-font-family: $ams-text-font-family;
419
+ $ams-link-list-gap: $ams-space-sm;
412
420
  $ams-label-line-height: $ams-text-level-4-line-height;
413
421
  $ams-label-font-weight: $ams-text-font-weight-bold;
414
422
  $ams-label-font-size: $ams-text-level-4-font-size;
@@ -452,7 +460,7 @@ $ams-heading-font-weight: $ams-text-font-weight-bold;
452
460
  $ams-heading-font-family: $ams-text-font-family;
453
461
  $ams-heading-color: $ams-color-primary-black;
454
462
  $ams-header-logo-link-outline-offset: $ams-focus-outline-offset;
455
- $ams-header-padding-block: $ams-space-inside-md;
463
+ $ams-header-padding-block: $ams-space-md;
456
464
  $ams-header-column-gap: $ams-space-grid-md; // Must have the same value as `ams.grid.column-gap`.
457
465
  $ams-grid-row-gap-lg: $ams-space-grid-lg;
458
466
  $ams-grid-row-gap-md: $ams-space-grid-md;
@@ -467,29 +475,24 @@ $ams-gap-lg: $ams-space-grid-lg;
467
475
  $ams-gap-md: $ams-space-grid-md;
468
476
  $ams-gap-sm: $ams-space-grid-sm;
469
477
  $ams-gap-xs: $ams-space-grid-xs;
470
- $ams-form-field-character-counter-error-color: $ams-color-primary-red;
471
- $ams-form-field-character-counter-line-height: $ams-text-level-6-line-height;
472
- $ams-form-field-character-counter-font-weight: $ams-text-font-weight-normal;
473
- $ams-form-field-character-counter-font-size: $ams-text-level-6-font-size;
474
- $ams-form-field-character-counter-font-family: $ams-text-font-family;
475
- $ams-form-field-character-counter-color: $ams-color-primary-black;
478
+ $ams-form-error-list-outline-offset: $ams-focus-outline-offset;
476
479
  $ams-file-input-file-selector-button-forced-color-mode-border: $ams-border-width-md solid;
477
480
  $ams-file-input-file-selector-button-disabled-cursor: $ams-action-disabled-cursor;
478
481
  $ams-file-input-file-selector-button-disabled-color: $ams-color-neutral-grey2;
479
482
  $ams-file-input-file-selector-button-disabled-box-shadow: inset 0 0 0 $ams-border-width-md $ams-color-neutral-grey2;
480
483
  $ams-file-input-file-selector-button-hover-color: $ams-color-dark-blue;
481
484
  $ams-file-input-file-selector-button-hover-box-shadow: inset 0 0 0 $ams-border-width-lg $ams-color-dark-blue;
482
- $ams-file-input-file-selector-button-padding-inline: $ams-space-inside-md;
483
- $ams-file-input-file-selector-button-padding-block: $ams-space-inside-xs;
484
- $ams-file-input-file-selector-button-margin-inline-end: $ams-space-inside-md;
485
+ $ams-file-input-file-selector-button-padding-inline: $ams-space-md;
486
+ $ams-file-input-file-selector-button-padding-block: $ams-space-sm;
487
+ $ams-file-input-file-selector-button-margin-inline-end: $ams-space-md;
485
488
  $ams-file-input-file-selector-button-cursor: $ams-action-activate-cursor;
486
489
  $ams-file-input-file-selector-button-color: $ams-color-primary-blue;
487
490
  $ams-file-input-file-selector-button-box-shadow: inset 0 0 0 $ams-border-width-md $ams-color-primary-blue;
488
491
  $ams-file-input-file-selector-button-background-color: $ams-color-primary-white;
489
492
  $ams-file-input-disabled-cursor: $ams-action-disabled-cursor;
490
493
  $ams-file-input-disabled-color: $ams-color-neutral-grey2;
491
- $ams-file-input-padding-inline: $ams-space-inside-md;
492
- $ams-file-input-padding-block: $ams-space-inside-md;
494
+ $ams-file-input-padding-inline: $ams-space-md;
495
+ $ams-file-input-padding-block: $ams-space-md;
493
496
  $ams-file-input-outline-offset: $ams-focus-outline-offset;
494
497
  $ams-file-input-line-height: $ams-text-level-5-line-height;
495
498
  $ams-file-input-font-weight: $ams-text-font-weight-normal;
@@ -499,29 +502,36 @@ $ams-file-input-cursor: $ams-action-activate-cursor;
499
502
  $ams-file-input-color: $ams-color-primary-black;
500
503
  $ams-file-input-border: $ams-border-width-sm dashed $ams-color-neutral-grey3;
501
504
  $ams-file-input-background-color: $ams-color-primary-white;
502
- $ams-field-invalid-padding-inline-start: $ams-space-inside-md;
505
+ $ams-field-invalid-padding-inline-start: $ams-space-md;
503
506
  $ams-field-invalid-border-inline-start: $ams-border-width-lg solid $ams-color-primary-red;
504
- $ams-field-gap: $ams-space-stack-sm;
505
- $ams-field-set-legend-margin-block-end: $ams-space-inside-md;
507
+ $ams-field-gap: $ams-space-sm;
508
+ $ams-field-set-legend-margin-block-end: $ams-space-md;
506
509
  $ams-field-set-legend-line-height: $ams-text-level-4-line-height;
507
510
  $ams-field-set-legend-font-weight: $ams-text-font-weight-bold;
508
511
  $ams-field-set-legend-font-size: $ams-text-level-4-font-size;
509
512
  $ams-field-set-legend-font-family: $ams-text-font-family;
510
513
  $ams-field-set-legend-color: $ams-color-primary-black;
511
- $ams-field-set-invalid-padding-inline-start: $ams-space-inside-md;
514
+ $ams-field-set-invalid-padding-inline-start: $ams-space-md;
512
515
  $ams-field-set-invalid-border-inline-start: $ams-border-width-lg solid $ams-color-primary-red;
513
516
  $ams-error-message-line-height: $ams-text-level-6-line-height;
514
517
  $ams-error-message-font-weight: $ams-text-font-weight-normal;
515
518
  $ams-error-message-font-size: $ams-text-level-6-font-size;
516
519
  $ams-error-message-font-family: $ams-text-font-family;
517
520
  $ams-error-message-color: $ams-color-primary-red;
521
+ $ams-dialog-footer-gap: $ams-space-md;
522
+ $ams-dialog-header-gap: $ams-space-md;
523
+ $ams-dialog-form-padding-inline: $ams-space-grid-lg;
524
+ $ams-dialog-form-padding-block: $ams-space-grid-md;
525
+ $ams-dialog-form-gap: $ams-space-md;
526
+ $ams-dialog-max-block-size: calc(100% - 2 * $ams-space-grid-md);
527
+ $ams-dialog-inline-size: calc(100% - 2 * $ams-space-grid-md);
518
528
  $ams-dialog-background-color: $ams-color-primary-white;
519
- $ams-description-list-details-padding-inline-start: $ams-space-inside-xl;
529
+ $ams-description-list-details-padding-inline-start: $ams-space-lg;
520
530
  $ams-description-list-details-font-weight: $ams-text-font-weight-bold;
521
- $ams-description-list-row-gap: $ams-space-stack-md;
531
+ $ams-description-list-row-gap: $ams-space-sm;
522
532
  $ams-description-list-line-height: $ams-text-level-5-line-height;
523
533
  $ams-description-list-inverse-color: $ams-color-primary-white;
524
- $ams-description-list-gap: $ams-space-stack-md;
534
+ $ams-description-list-gap: $ams-space-sm;
525
535
  $ams-description-list-font-weight: $ams-text-font-weight-normal;
526
536
  $ams-description-list-font-size: $ams-text-level-5-font-size;
527
537
  $ams-description-list-font-family: $ams-text-font-family;
@@ -532,8 +542,8 @@ $ams-date-input-hover-box-shadow: inset 0 0 0 $ams-border-width-md $ams-color-pr
532
542
  $ams-date-input-disabled-color: $ams-color-neutral-grey2;
533
543
  $ams-date-input-disabled-box-shadow: inset 0 0 0 $ams-border-width-sm $ams-color-neutral-grey2;
534
544
  $ams-date-input-disabled-background-color: $ams-color-primary-white;
535
- $ams-date-input-padding-inline: $ams-space-inside-lg;
536
- $ams-date-input-padding-block: $ams-space-inside-xs;
545
+ $ams-date-input-padding-inline: $ams-space-md;
546
+ $ams-date-input-padding-block: $ams-space-sm;
537
547
  $ams-date-input-outline-offset: $ams-focus-outline-offset;
538
548
  $ams-date-input-line-height: $ams-text-level-5-line-height;
539
549
  $ams-date-input-font-weight: $ams-text-font-weight-normal;
@@ -542,11 +552,11 @@ $ams-date-input-font-family: $ams-text-font-family;
542
552
  $ams-date-input-color: $ams-color-primary-black;
543
553
  $ams-date-input-box-shadow: inset 0 0 0 $ams-border-width-sm $ams-color-primary-black;
544
554
  $ams-date-input-background-color: $ams-color-primary-white;
545
- $ams-column-gap-xl: $ams-space-grid-xl;
546
- $ams-column-gap-lg: $ams-space-grid-lg;
547
- $ams-column-gap-md: $ams-space-grid-md;
548
- $ams-column-gap-sm: $ams-space-grid-sm;
549
- $ams-column-gap-xs: $ams-space-grid-xs;
555
+ $ams-column-gap-xl: $ams-space-xl;
556
+ $ams-column-gap-lg: $ams-space-lg;
557
+ $ams-column-gap-md: $ams-space-md;
558
+ $ams-column-gap-sm: $ams-space-sm;
559
+ $ams-column-gap-xs: $ams-space-xs;
550
560
  $ams-checkbox-hover-text-decoration-thickness: $ams-border-width-md;
551
561
  $ams-checkbox-hover-color: $ams-color-dark-blue;
552
562
  $ams-checkbox-disabled-color: $ams-color-neutral-grey3;
@@ -572,14 +582,23 @@ $ams-checkbox-checkmark-border-width: $ams-border-width-md;
572
582
  $ams-checkbox-checkmark-border-color: $ams-color-primary-blue;
573
583
  $ams-checkbox-outline-offset: $ams-focus-outline-offset;
574
584
  $ams-checkbox-line-height: $ams-text-level-5-line-height;
585
+ $ams-checkbox-gap: $ams-space-sm;
575
586
  $ams-checkbox-font-weight: $ams-text-font-weight-normal;
576
587
  $ams-checkbox-font-size: $ams-text-level-5-font-size;
577
588
  $ams-checkbox-font-family: $ams-text-font-family;
578
589
  $ams-checkbox-color: $ams-color-primary-black;
590
+ $ams-character-count-error-color: $ams-color-primary-red;
591
+ $ams-character-count-line-height: $ams-text-level-6-line-height;
592
+ $ams-character-count-font-weight: $ams-text-font-weight-normal;
593
+ $ams-character-count-font-size: $ams-text-level-6-font-size;
594
+ $ams-character-count-font-family: $ams-text-font-family;
595
+ $ams-character-count-color: $ams-color-primary-black;
579
596
  $ams-card-outline-offset: $ams-focus-outline-offset;
580
597
  $ams-card-link-hover-text-decoration-line: $ams-link-appearance-subtle-hover-text-decoration-line;
581
598
  $ams-card-link-text-underline-offset: $ams-link-appearance-text-underline-offset;
582
599
  $ams-card-link-text-decoration-line: $ams-link-appearance-subtle-text-decoration-line;
600
+ $ams-card-heading-group-gap: $ams-space-sm;
601
+ $ams-card-gap: $ams-space-sm;
583
602
  $ams-button-tertiary-disabled-color: $ams-color-neutral-grey2;
584
603
  $ams-button-tertiary-hover-color: $ams-color-dark-blue;
585
604
  $ams-button-tertiary-hover-box-shadow: inset 0 0 0 $ams-border-width-md $ams-color-dark-blue;
@@ -602,9 +621,10 @@ $ams-button-primary-box-shadow: inset 0 0 0 $ams-border-width-md $ams-color-prim
602
621
  $ams-button-primary-background-color: $ams-color-primary-blue;
603
622
  $ams-button-forced-color-mode-border: $ams-border-width-md solid;
604
623
  $ams-button-disabled-cursor: $ams-action-disabled-cursor;
624
+ $ams-button-padding-inline: $ams-space-md;
625
+ $ams-button-padding-block: $ams-space-sm;
605
626
  $ams-button-outline-offset: $ams-focus-outline-offset;
606
- $ams-button-padding-inline: $ams-space-inside-md;
607
- $ams-button-padding-block: $ams-space-inside-xs;
627
+ $ams-button-gap: $ams-space-sm;
608
628
  $ams-button-line-height: $ams-text-level-5-line-height;
609
629
  $ams-button-font-size: $ams-text-level-5-font-size;
610
630
  $ams-button-font-family: $ams-text-font-family;
@@ -614,6 +634,7 @@ $ams-breadcrumb-link-hover-color: $ams-color-dark-blue;
614
634
  $ams-breadcrumb-link-text-underline-offset: $ams-link-appearance-text-underline-offset;
615
635
  $ams-breadcrumb-link-text-decoration-line: $ams-link-appearance-subtle-text-decoration-line;
616
636
  $ams-breadcrumb-link-outline-offset: $ams-focus-outline-offset;
637
+ $ams-breadcrumb-separator-margin-inline: $ams-space-xs;
617
638
  $ams-breadcrumb-line-height: $ams-text-level-6-line-height;
618
639
  $ams-breadcrumb-font-weight: $ams-text-font-weight-normal;
619
640
  $ams-breadcrumb-font-size: $ams-text-level-6-font-size;
@@ -652,13 +673,15 @@ $ams-badge-blue-color: $ams-color-primary-white;
652
673
  $ams-badge-blue-background-color: $ams-color-primary-blue;
653
674
  $ams-badge-black-color: $ams-color-primary-white;
654
675
  $ams-badge-black-background-color: $ams-color-primary-black;
655
- $ams-badge-padding-inline: $ams-space-inside-xs;
676
+ $ams-badge-padding-inline: $ams-space-xs;
656
677
  $ams-badge-line-height: $ams-text-level-5-line-height;
657
678
  $ams-badge-font-weight: $ams-text-font-weight-bold;
658
679
  $ams-badge-font-size: $ams-text-level-5-font-size;
659
680
  $ams-badge-font-family: $ams-text-font-family;
660
681
  $ams-avatar-yellow-color: $ams-color-primary-black;
661
682
  $ams-avatar-yellow-background-color: $ams-color-yellow;
683
+ $ams-avatar-white-color: $ams-color-primary-black;
684
+ $ams-avatar-white-background-color: $ams-color-primary-white;
662
685
  $ams-avatar-red-color: $ams-color-primary-white;
663
686
  $ams-avatar-red-background-color: $ams-color-primary-red;
664
687
  $ams-avatar-purple-color: $ams-color-primary-white;
@@ -667,14 +690,24 @@ $ams-avatar-orange-color: $ams-color-primary-black;
667
690
  $ams-avatar-orange-background-color: $ams-color-orange;
668
691
  $ams-avatar-magenta-color: $ams-color-primary-white;
669
692
  $ams-avatar-magenta-background-color: $ams-color-magenta;
693
+ $ams-avatar-light-blue-color: $ams-color-primary-black;
694
+ $ams-avatar-light-blue-background-color: $ams-color-blue;
695
+ $ams-avatar-grey-3-color: $ams-color-primary-white;
696
+ $ams-avatar-grey-3-background-color: $ams-color-neutral-grey3;
697
+ $ams-avatar-grey-2-color: $ams-color-primary-black;
698
+ $ams-avatar-grey-2-background-color: $ams-color-neutral-grey2;
699
+ $ams-avatar-grey-1-color: $ams-color-primary-black;
700
+ $ams-avatar-grey-1-background-color: $ams-color-neutral-grey1;
670
701
  $ams-avatar-green-color: $ams-color-primary-black;
671
702
  $ams-avatar-green-background-color: $ams-color-green;
672
703
  $ams-avatar-dark-green-color: $ams-color-primary-white;
673
704
  $ams-avatar-dark-green-background-color: $ams-color-dark-green;
674
- $ams-avatar-dark-blue-color: $ams-color-primary-white;
675
- $ams-avatar-dark-blue-background-color: $ams-color-primary-blue;
676
- $ams-avatar-blue-color: $ams-color-primary-black;
677
- $ams-avatar-blue-background-color: $ams-color-blue;
705
+ $ams-avatar-blue-color: $ams-color-primary-white;
706
+ $ams-avatar-blue-background-color: $ams-color-primary-blue;
707
+ $ams-avatar-black-color: $ams-color-primary-white;
708
+ $ams-avatar-black-background-color: $ams-color-primary-black;
709
+ $ams-avatar-padding-inline: $ams-space-xs;
710
+ $ams-avatar-padding-block: $ams-space-xs;
678
711
  $ams-avatar-line-height: $ams-text-level-6-line-height;
679
712
  $ams-avatar-font-weight: $ams-text-font-weight-normal;
680
713
  $ams-avatar-font-size: $ams-text-level-6-font-size;
@@ -686,26 +719,27 @@ $ams-aspect-ratio-wide: $ams-proportion-wide;
686
719
  $ams-aspect-ratio-square: $ams-proportion-square;
687
720
  $ams-aspect-ratio-tall: $ams-proportion-tall;
688
721
  $ams-aspect-ratio-x-tall: $ams-proportion-x-tall;
722
+ $ams-alert-content-gap: $ams-space-sm;
689
723
  $ams-alert-close-hover-fill: $ams-color-primary-blue;
690
724
  $ams-alert-close-fill: $ams-color-primary-black;
691
725
  $ams-alert-warning-border-color: $ams-color-orange;
692
726
  $ams-alert-success-border-color: $ams-color-dark-green;
693
727
  $ams-alert-info-border-color: $ams-color-primary-blue;
694
728
  $ams-alert-error-border-color: $ams-color-primary-red;
695
- $ams-alert-padding-inline: $ams-space-inside-lg;
696
- $ams-alert-padding-block: $ams-space-inside-md;
729
+ $ams-alert-padding-inline: $ams-space-lg;
730
+ $ams-alert-padding-block: $ams-space-md;
731
+ $ams-alert-gap: $ams-space-sm;
697
732
  $ams-alert-border-width: $ams-border-width-xl;
698
- $ams-accordion-panel-padding-block: 0 $ams-space-inside-md;
699
733
  $ams-accordion-button-hover-color: $ams-color-dark-blue;
700
734
  $ams-accordion-button-focus-outline-offset: $ams-focus-outline-offset;
701
- $ams-accordion-button-padding-block: $ams-space-inside-sm;
735
+ $ams-accordion-button-padding-block: $ams-space-sm;
702
736
  $ams-accordion-button-line-height: $ams-text-level-5-line-height;
703
- $ams-accordion-button-gap: $ams-space-inside-md;
737
+ $ams-accordion-button-gap: $ams-space-sm;
704
738
  $ams-accordion-button-font-weight: $ams-text-font-weight-bold;
705
739
  $ams-accordion-button-font-size: $ams-text-level-5-font-size;
706
740
  $ams-accordion-button-font-family: $ams-text-font-family;
707
741
  $ams-accordion-button-color: $ams-color-primary-blue;
708
- $ams-accordion-gap: $ams-space-inside-xs;
742
+ $ams-accordion-gap: $ams-space-md;
709
743
  $ams-link-appearance-regular-hover-text-decoration-thickness: $ams-border-width-lg;
710
744
  $ams-link-appearance-on-background-light-color: $ams-color-primary-black;
711
745
  $ams-link-appearance-on-background-dark-color: $ams-color-primary-white;
@@ -714,6 +748,9 @@ $ams-link-appearance-text-decoration-thickness: $ams-border-width-md;
714
748
  $ams-link-appearance-color: $ams-color-primary-blue;
715
749
  $ams-top-task-link-label-text-decoration-thickness: $ams-link-appearance-text-decoration-thickness;
716
750
  $ams-top-task-link-label-color: $ams-link-appearance-color;
751
+ $ams-table-of-contents-link-hover-color: $ams-link-appearance-hover-color;
752
+ $ams-table-of-contents-link-text-decoration-thickness: $ams-link-appearance-text-decoration-thickness;
753
+ $ams-table-of-contents-link-color: $ams-link-appearance-color;
717
754
  $ams-switch-thumb-hover-box-shadow: 0 0 0 0.125rem $ams-switch-thumb-hover-color;
718
755
  $ams-pagination-button-hover-color: $ams-link-appearance-hover-color;
719
756
  $ams-pagination-button-text-decoration-thickness: $ams-link-appearance-text-decoration-thickness;