@amsterdam/design-system-tokens 0.6.0 → 0.7.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 (109) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/build.js +1 -1
  3. package/dist/compact.css +14 -14
  4. package/dist/compact.d.ts +4 -4
  5. package/dist/compact.json +3 -3
  6. package/dist/compact.mjs +14 -14
  7. package/dist/compact.scss +14 -14
  8. package/dist/compact.theme.css +15 -15
  9. package/dist/index.css +581 -582
  10. package/dist/index.d.ts +29 -30
  11. package/dist/index.json +43 -44
  12. package/dist/index.mjs +581 -582
  13. package/dist/index.scss +581 -582
  14. package/dist/index.theme.css +582 -583
  15. package/package.json +1 -1
  16. package/src/brand/{amsterdam → ams}/color.tokens.json +1 -1
  17. package/src/brand/{amsterdam → ams}/proportion.tokens.json +1 -1
  18. package/src/brand/{amsterdam → ams}/space.compact.tokens.json +1 -1
  19. package/src/brand/{amsterdam → ams}/space.tokens.json +5 -5
  20. package/src/brand/{amsterdam/typography.compact.tokens.json → ams/text.compact.tokens.json} +3 -3
  21. package/src/brand/{amsterdam/typography.tokens.json → ams/text.tokens.json} +3 -3
  22. package/src/common/{amsterdam → ams}/action.tokens.json +1 -1
  23. package/src/common/{amsterdam → ams}/border.tokens.json +1 -1
  24. package/src/common/{amsterdam → ams}/focus.tokens.json +1 -1
  25. package/src/common/{amsterdam → ams}/hyphenation.tokens.json +1 -1
  26. package/src/common/{amsterdam → ams}/link-appearance.tokens.json +5 -5
  27. package/src/components/ams/accordion.tokens.json +25 -0
  28. package/src/components/ams/alert.tokens.json +29 -0
  29. package/src/components/ams/aspect-ratio.tokens.json +12 -0
  30. package/src/components/ams/badge.tokens.json +43 -0
  31. package/src/components/ams/blockquote.tokens.json +12 -0
  32. package/src/components/ams/breadcrumb.tokens.json +26 -0
  33. package/src/components/ams/button.tokens.json +59 -0
  34. package/src/components/ams/card.tokens.json +17 -0
  35. package/src/components/ams/checkbox.tokens.json +75 -0
  36. package/src/components/ams/column.tokens.json +13 -0
  37. package/src/components/{amsterdam → ams}/dialog.tokens.json +7 -7
  38. package/src/components/ams/fieldset.tokens.json +13 -0
  39. package/src/components/ams/form-label.tokens.json +11 -0
  40. package/src/components/ams/gap.tokens.json +11 -0
  41. package/src/components/ams/grid.compact.tokens.json +7 -0
  42. package/src/components/ams/grid.tokens.json +25 -0
  43. package/src/components/ams/header.tokens.json +14 -0
  44. package/src/components/ams/heading.tokens.json +36 -0
  45. package/src/components/ams/icon-button.tokens.json +37 -0
  46. package/src/components/ams/icon.tokens.json +22 -0
  47. package/src/components/ams/link-list.tokens.json +45 -0
  48. package/src/components/ams/link.tokens.json +61 -0
  49. package/src/components/ams/logo.tokens.json +10 -0
  50. package/src/components/ams/margin.tokens.json +11 -0
  51. package/src/components/ams/mark.tokens.json +7 -0
  52. package/src/components/ams/mega-menu.tokens.json +18 -0
  53. package/src/components/{amsterdam → ams}/ordered-list.tokens.json +7 -7
  54. package/src/components/ams/page-heading.tokens.json +12 -0
  55. package/src/components/ams/page-menu.tokens.json +24 -0
  56. package/src/components/ams/pagination.tokens.json +25 -0
  57. package/src/components/ams/paragraph.tokens.json +22 -0
  58. package/src/components/{amsterdam → ams}/radio.tokens.json +14 -14
  59. package/src/components/ams/row.tokens.json +13 -0
  60. package/src/components/{amsterdam → ams}/screen.tokens.json +1 -1
  61. package/src/components/ams/search-field.tokens.json +45 -0
  62. package/src/components/ams/skip-link.tokens.json +18 -0
  63. package/src/components/ams/spotlight.tokens.json +30 -0
  64. package/src/components/ams/switch.tokens.json +24 -0
  65. package/src/components/ams/table.tokens.json +22 -0
  66. package/src/components/ams/tabs.tokens.json +34 -0
  67. package/src/components/ams/text-area.tokens.json +36 -0
  68. package/src/components/ams/text-input.tokens.json +32 -0
  69. package/src/components/ams/top-task-link.tokens.json +28 -0
  70. package/src/components/{amsterdam → ams}/unordered-list.tokens.json +7 -7
  71. package/src/components/amsterdam/accordion.tokens.json +0 -25
  72. package/src/components/amsterdam/alert.tokens.json +0 -29
  73. package/src/components/amsterdam/aspect-ratio.tokens.json +0 -12
  74. package/src/components/amsterdam/badge.tokens.json +0 -43
  75. package/src/components/amsterdam/blockquote.tokens.json +0 -12
  76. package/src/components/amsterdam/breadcrumb.tokens.json +0 -26
  77. package/src/components/amsterdam/button.tokens.json +0 -62
  78. package/src/components/amsterdam/card.tokens.json +0 -17
  79. package/src/components/amsterdam/checkbox.tokens.json +0 -75
  80. package/src/components/amsterdam/column.tokens.json +0 -13
  81. package/src/components/amsterdam/fieldset.tokens.json +0 -13
  82. package/src/components/amsterdam/form-label.tokens.json +0 -11
  83. package/src/components/amsterdam/gap.tokens.json +0 -11
  84. package/src/components/amsterdam/grid.compact.tokens.json +0 -7
  85. package/src/components/amsterdam/grid.tokens.json +0 -25
  86. package/src/components/amsterdam/header.tokens.json +0 -14
  87. package/src/components/amsterdam/heading.tokens.json +0 -34
  88. package/src/components/amsterdam/icon-button.tokens.json +0 -37
  89. package/src/components/amsterdam/icon.tokens.json +0 -22
  90. package/src/components/amsterdam/link-list.tokens.json +0 -45
  91. package/src/components/amsterdam/link.tokens.json +0 -61
  92. package/src/components/amsterdam/logo.tokens.json +0 -10
  93. package/src/components/amsterdam/margin.tokens.json +0 -11
  94. package/src/components/amsterdam/mark.tokens.json +0 -7
  95. package/src/components/amsterdam/mega-menu.tokens.json +0 -18
  96. package/src/components/amsterdam/page-heading.tokens.json +0 -12
  97. package/src/components/amsterdam/page-menu.tokens.json +0 -24
  98. package/src/components/amsterdam/pagination.tokens.json +0 -25
  99. package/src/components/amsterdam/paragraph.tokens.json +0 -22
  100. package/src/components/amsterdam/row.tokens.json +0 -13
  101. package/src/components/amsterdam/search-field.tokens.json +0 -45
  102. package/src/components/amsterdam/skip-link.tokens.json +0 -18
  103. package/src/components/amsterdam/spotlight.tokens.json +0 -30
  104. package/src/components/amsterdam/switch.tokens.json +0 -24
  105. package/src/components/amsterdam/table.tokens.json +0 -22
  106. package/src/components/amsterdam/tabs.tokens.json +0 -34
  107. package/src/components/amsterdam/text-area.tokens.json +0 -36
  108. package/src/components/amsterdam/text-input.tokens.json +0 -32
  109. package/src/components/amsterdam/top-task-link.tokens.json +0 -28
package/dist/index.scss CHANGED
@@ -1,585 +1,584 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Fri, 08 Mar 2024 13:00:06 GMT
3
+ // Generated on Tue, 12 Mar 2024 14:50:53 GMT
4
4
 
5
- $amsterdam-unordered-list-unordered-list-item-padding-inline-start: 0.875rem; // The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem.
6
- $amsterdam-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.
7
- $amsterdam-unordered-list-unordered-list-list-style-type: '\2013';
8
- $amsterdam-unordered-list-item-padding-inline-start: 0.875rem; // The total level 1 indentation for Amsterdam is 40 pixels, or 2.5rem.
9
- $amsterdam-unordered-list-item-margin-inline-start: 1.625rem; // Divide your total indentation width over margin and padding to position the marker.
10
- $amsterdam-unordered-list-list-style-type: '\2022';
11
- $amsterdam-unordered-list-gap: 0.75rem;
12
- $amsterdam-text-area-padding-inline: 1rem;
13
- $amsterdam-text-area-padding-block: 0.5rem;
14
- $amsterdam-tabs-button-padding-inline: 1rem;
15
- $amsterdam-tabs-button-padding-block: .5rem;
16
- $amsterdam-tabs-button-outline-offset: -0.25rem;
17
- $amsterdam-tabs-button-border: none;
18
- $amsterdam-tabs-button-background-color: transparent;
19
- $amsterdam-switch-thumb-height: 1.75rem;
20
- $amsterdam-switch-thumb-width: 1.75rem;
21
- $amsterdam-switch-width: 3.5rem;
22
- $amsterdam-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>");
23
- $amsterdam-screen-x-wide-max-width: 132rem;
24
- $amsterdam-screen-wide-max-width: 100rem;
25
- $amsterdam-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");
26
- $amsterdam-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");
27
- $amsterdam-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");
28
- $amsterdam-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");
29
- $amsterdam-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");
30
- $amsterdam-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");
31
- $amsterdam-page-menu-item-gap: 0.5rem;
32
- $amsterdam-page-menu-row-gap: 0.5rem;
33
- $amsterdam-page-menu-column-gap: 2.5rem;
34
- $amsterdam-ordered-list-ordered-list-item-padding-inline-start: 0.25rem; // The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem.
35
- $amsterdam-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.
36
- $amsterdam-ordered-list-ordered-list-list-style-type: lower-alpha;
37
- $amsterdam-ordered-list-item-padding-inline-start: 0.25rem; // The total level 1 indentation for Amsterdam is 40 pixels, or 2.5rem.
38
- $amsterdam-ordered-list-item-margin-inline-start: 2.25rem; // Divide your total indentation width over margin and padding to position the marker.
39
- $amsterdam-ordered-list-list-style-type: decimal;
40
- $amsterdam-ordered-list-gap: 0.75rem;
41
- $amsterdam-mega-menu-list-category-padding-block-start: 1rem;
42
- $amsterdam-mega-menu-list-category-column-width: 20rem;
43
- $amsterdam-logo-height: 2.5rem;
44
- $amsterdam-link-inline-line-height: inherit;
45
- $amsterdam-link-inline-font-size: inherit;
46
- $amsterdam-link-inline-font-family: inherit;
47
- $amsterdam-link-list-link-gap: 0.5em;
48
- $amsterdam-link-list-gap: 0.5em;
49
- $amsterdam-icon-button-on-background-light-hover-background-color: rgba(0, 0, 0, 0.125);
50
- $amsterdam-icon-button-hover-background-color: rgba(0, 70, 153, 0.125);
51
- $amsterdam-grid-wide-column-count: 12;
52
- $amsterdam-grid-medium-column-count: 8;
53
- $amsterdam-grid-column-count: 4;
54
- $amsterdam-dialog-footer-gap: 1rem;
55
- $amsterdam-dialog-header-gap: 1rem;
56
- $amsterdam-dialog-form-max-block-size: 75vh;
57
- $amsterdam-dialog-form-padding-inline: clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem);
58
- $amsterdam-dialog-form-padding-block: clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem);
59
- $amsterdam-dialog-form-gap: 1.5rem;
60
- $amsterdam-dialog-max-inline-size: min(87.69vw, 45rem);
61
- $amsterdam-dialog-border: 0;
62
- $amsterdam-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");
63
- $amsterdam-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");
64
- $amsterdam-button-tertiary-disabled-background-color: transparent;
65
- $amsterdam-button-tertiary-background-color: transparent;
66
- $amsterdam-button-gap: 1rem;
67
- $amsterdam-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>");
68
- $amsterdam-alert-gap: 1rem;
69
- $amsterdam-alert-border-style: solid;
70
- $amsterdam-alert-border-width: 4px;
71
- $amsterdam-link-appearance-subtle-hover-text-decoration-line: underline;
72
- $amsterdam-link-appearance-subtle-text-decoration-line: none;
73
- $amsterdam-link-appearance-regular-hover-text-underline-offset: 0.3125rem;
74
- $amsterdam-link-appearance-regular-hover-text-decoration-thickness: 0.1875rem;
75
- $amsterdam-link-appearance-regular-text-decoration-line: underline;
76
- $amsterdam-link-appearance-text-underline-offset: 0.375rem;
77
- $amsterdam-link-appearance-text-decoration-thickness: 0.125rem;
78
- $amsterdam-hyphenation-overflow-wrap: break-word;
79
- $amsterdam-hyphenation-hyphens: auto;
80
- $amsterdam-hyphenation-hyphenate-limit-chars: 12 8 4;
81
- $amsterdam-focus-outline-offset: 2px;
82
- $amsterdam-border-width-lg: 3px;
83
- $amsterdam-border-width-md: 2px;
84
- $amsterdam-border-width-sm: 1px;
85
- $amsterdam-action-submit-cursor: pointer;
86
- $amsterdam-action-navigate-cursor: pointer;
87
- $amsterdam-action-inert-cursor: default;
88
- $amsterdam-action-disabled-cursor: not-allowed;
89
- $amsterdam-action-busy-cursor: wait;
90
- $amsterdam-action-activate-cursor: pointer;
91
- $amsterdam-typography-text-level-6-line-height: 1.6;
92
- $amsterdam-typography-text-level-6-font-size: clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem);
93
- $amsterdam-typography-text-level-5-line-height: 1.6;
94
- $amsterdam-typography-text-level-5-font-size: clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem);
95
- $amsterdam-typography-text-level-4-line-height: 1.5;
96
- $amsterdam-typography-text-level-4-font-size: clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem);
97
- $amsterdam-typography-text-level-3-line-height: 1.3;
98
- $amsterdam-typography-text-level-3-font-size: clamp(1.531rem, calc(1.016vw + 1.328rem), 2.344rem);
99
- $amsterdam-typography-text-level-2-line-height: 1.25;
100
- $amsterdam-typography-text-level-2-font-size: clamp(1.786rem, calc(1.43vw + 1.5rem), 2.93rem);
101
- $amsterdam-typography-text-level-1-line-height: 1.2;
102
- $amsterdam-typography-text-level-1-font-size: clamp(2.084rem, calc(1.973vw + 1.69rem), 3.662rem);
103
- $amsterdam-typography-text-level-0-line-height: 1.15;
104
- $amsterdam-typography-text-level-0-font-size: clamp(2.432rem, calc(2.683vw + 1.895rem), 4.578rem);
105
- $amsterdam-typography-font-weight-bold: 800;
106
- $amsterdam-typography-font-weight-normal: 400;
107
- $amsterdam-typography-font-family: 'Amsterdam Sans', Arial, sans-serif;
108
- $amsterdam-space-stack-xl: 2rem;
109
- $amsterdam-space-stack-lg: 1.5rem;
110
- $amsterdam-space-stack-md: 1rem;
111
- $amsterdam-space-stack-sm: .5rem;
112
- $amsterdam-space-stack-xs: .25rem;
113
- $amsterdam-space-inside-xl: 2rem;
114
- $amsterdam-space-inside-lg: 1.5rem;
115
- $amsterdam-space-inside-md: 1rem;
116
- $amsterdam-space-inside-sm: .5rem;
117
- $amsterdam-space-inside-xs: .25rem;
118
- $amsterdam-space-grid-xl: clamp(2rem, calc(6.25vw + 0.75rem), 7rem);
119
- $amsterdam-space-grid-lg: clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem);
120
- $amsterdam-space-grid-md: clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem); // Grows from 16px at 320px wide to 56px at 1600px wide.
121
- $amsterdam-space-grid-sm: clamp(0.5rem, calc(1.5625vw + 0.1875rem), 1.75rem);
122
- $amsterdam-space-grid-xs: clamp(0.25rem, calc(0.78125vw + 0.09375rem), 0.875rem);
123
- $amsterdam-proportion-2x-wide: 32 / 9;
124
- $amsterdam-proportion-x-wide: 16 / 9;
125
- $amsterdam-proportion-wide: 5 / 4;
126
- $amsterdam-proportion-square: 1 / 1;
127
- $amsterdam-proportion-tall: 4 / 5;
128
- $amsterdam-proportion-x-tall: 9 / 16;
129
- $amsterdam-color-neutral-grey3: #767676;
130
- $amsterdam-color-neutral-grey2: #BEBEBE;
131
- $amsterdam-color-neutral-grey1: #E8E8E8;
132
- $amsterdam-color-magenta: #E50082;
133
- $amsterdam-color-purple: #A00078;
134
- $amsterdam-color-blue: #009DE6;
135
- $amsterdam-color-dark-green: #00A03C;
136
- $amsterdam-color-green: #BED200;
137
- $amsterdam-color-yellow: #FFE600;
138
- $amsterdam-color-orange: #FF9100;
139
- $amsterdam-color-dark-blue: #102E62;
140
- $amsterdam-color-primary-red: #EC0000;
141
- $amsterdam-color-primary-blue: #004699;
142
- $amsterdam-color-primary-white: #FFFFFF;
143
- $amsterdam-color-primary-black: #000000;
144
- $amsterdam-unordered-list-line-height: $amsterdam-typography-text-level-5-line-height;
145
- $amsterdam-unordered-list-inverse-color: $amsterdam-color-primary-white;
146
- $amsterdam-unordered-list-font-weight: $amsterdam-typography-font-weight-normal;
147
- $amsterdam-unordered-list-font-size: $amsterdam-typography-text-level-5-font-size;
148
- $amsterdam-unordered-list-font-family: $amsterdam-typography-font-family;
149
- $amsterdam-unordered-list-color: $amsterdam-color-primary-black;
150
- $amsterdam-top-task-link-outline-offset: $amsterdam-focus-outline-offset;
151
- $amsterdam-top-task-link-label-hover-text-decoration-line: $amsterdam-link-appearance-subtle-hover-text-decoration-line;
152
- $amsterdam-top-task-link-label-hover-color: $amsterdam-color-dark-blue;
153
- $amsterdam-top-task-link-label-text-underline-offset: $amsterdam-link-appearance-text-underline-offset;
154
- $amsterdam-top-task-link-label-text-decoration-thickness: $amsterdam-link-appearance-text-decoration-thickness;
155
- $amsterdam-top-task-link-label-text-decoration-line: $amsterdam-link-appearance-subtle-text-decoration-line;
156
- $amsterdam-top-task-link-label-line-height: $amsterdam-typography-text-level-4-line-height;
157
- $amsterdam-top-task-link-label-font-weight: $amsterdam-typography-font-weight-bold;
158
- $amsterdam-top-task-link-label-font-size: $amsterdam-typography-text-level-4-font-size;
159
- $amsterdam-top-task-link-label-font-family: $amsterdam-typography-font-family;
160
- $amsterdam-top-task-link-description-line-height: $amsterdam-typography-text-level-6-line-height;
161
- $amsterdam-top-task-link-description-font-weight: $amsterdam-typography-font-weight-normal;
162
- $amsterdam-top-task-link-description-font-size: $amsterdam-typography-text-level-6-font-size;
163
- $amsterdam-top-task-link-description-font-family: $amsterdam-typography-font-family;
164
- $amsterdam-top-task-link-description-color: $amsterdam-color-primary-black;
165
- $amsterdam-text-input-placeholder-color: $amsterdam-color-neutral-grey3;
166
- $amsterdam-text-input-invalid-hover-box-shadow: inset 0 0 0 2px $amsterdam-color-primary-red;
167
- $amsterdam-text-input-invalid-box-shadow: inset 0 0 0 1px $amsterdam-color-primary-red;
168
- $amsterdam-text-input-hover-box-shadow: inset 0 0 0 2px $amsterdam-color-primary-black;
169
- $amsterdam-text-input-disabled-color: $amsterdam-color-neutral-grey2;
170
- $amsterdam-text-input-disabled-box-shadow: inset 0 0 0 1px $amsterdam-color-neutral-grey2;
171
- $amsterdam-text-input-disabled-background-color: $amsterdam-color-primary-white;
172
- $amsterdam-text-input-padding-inline: $amsterdam-space-inside-md;
173
- $amsterdam-text-input-padding-block: $amsterdam-space-inside-xs;
174
- $amsterdam-text-input-outline-offset: $amsterdam-focus-outline-offset;
175
- $amsterdam-text-input-line-height: $amsterdam-typography-text-level-6-line-height;
176
- $amsterdam-text-input-font-weight: $amsterdam-typography-font-weight-normal;
177
- $amsterdam-text-input-font-size: $amsterdam-typography-text-level-6-font-size;
178
- $amsterdam-text-input-font-family: $amsterdam-typography-font-family;
179
- $amsterdam-text-input-color: $amsterdam-color-primary-black;
180
- $amsterdam-text-input-box-shadow: inset 0 0 0 1px $amsterdam-color-primary-black;
181
- $amsterdam-text-area-placeholder-color: $amsterdam-color-neutral-grey3;
182
- $amsterdam-text-area-invalid-hover-box-shadow: inset 0 0 0 2px $amsterdam-color-primary-red;
183
- $amsterdam-text-area-invalid-box-shadow: inset 0 0 0 1px $amsterdam-color-primary-red;
184
- $amsterdam-text-area-hover-box-shadow: inset 0 0 0 2px $amsterdam-color-primary-black;
185
- $amsterdam-text-area-disabled-cursor: $amsterdam-action-disabled-cursor;
186
- $amsterdam-text-area-disabled-color: $amsterdam-color-neutral-grey2;
187
- $amsterdam-text-area-disabled-box-shadow: inset 0 0 0 1px $amsterdam-color-neutral-grey2;
188
- $amsterdam-text-area-disabled-background-color: $amsterdam-color-primary-white;
189
- $amsterdam-text-area-outline-offset: $amsterdam-focus-outline-offset;
190
- $amsterdam-text-area-min-height: calc($amsterdam-typography-text-level-6-line-height * 1em + 2 * $amsterdam-text-area-padding-block);
191
- $amsterdam-text-area-line-height: $amsterdam-typography-text-level-6-line-height;
192
- $amsterdam-text-area-font-weight: $amsterdam-typography-font-weight-normal;
193
- $amsterdam-text-area-font-size: $amsterdam-typography-text-level-6-font-size;
194
- $amsterdam-text-area-font-family: $amsterdam-typography-font-family;
195
- $amsterdam-text-area-color: $amsterdam-color-primary-black;
196
- $amsterdam-text-area-box-shadow: inset 0 0 0 1px $amsterdam-color-primary-black;
197
- $amsterdam-tabs-button-disabled-cursor: $amsterdam-action-disabled-cursor;
198
- $amsterdam-tabs-button-disabled-color: $amsterdam-color-neutral-grey2;
199
- $amsterdam-tabs-button-selected-color: $amsterdam-color-primary-white;
200
- $amsterdam-tabs-button-selected-background-color: $amsterdam-color-primary-blue;
201
- $amsterdam-tabs-button-hover-box-shadow: inset 0 -0.125rem 0 0 $amsterdam-color-dark-blue;
202
- $amsterdam-tabs-button-hover-color: $amsterdam-color-dark-blue;
203
- $amsterdam-tabs-button-line-height: $amsterdam-typography-text-level-5-line-height;
204
- $amsterdam-tabs-button-font-size: $amsterdam-typography-text-level-5-font-size;
205
- $amsterdam-tabs-button-font-weight: $amsterdam-typography-font-weight-normal;
206
- $amsterdam-tabs-button-font-family: $amsterdam-typography-font-family;
207
- $amsterdam-tabs-button-cursor: $amsterdam-action-activate-cursor;
208
- $amsterdam-tabs-button-color: $amsterdam-color-primary-blue;
209
- $amsterdam-tabs-list-border-bottom: .125rem solid $amsterdam-color-primary-blue;
210
- $amsterdam-table-header-cell-font-weight: $amsterdam-typography-font-weight-bold;
211
- $amsterdam-table-cell-padding-inline: $amsterdam-space-inside-md;
212
- $amsterdam-table-cell-padding-block: $amsterdam-space-inside-md;
213
- $amsterdam-table-cell-border-bottom: 1px solid $amsterdam-color-neutral-grey1;
214
- $amsterdam-table-caption-font-weight: $amsterdam-typography-font-weight-bold;
215
- $amsterdam-table-line-height: $amsterdam-typography-text-level-5-line-height;
216
- $amsterdam-table-font-size: $amsterdam-typography-text-level-5-font-size;
217
- $amsterdam-table-font-weight: $amsterdam-typography-font-weight-normal;
218
- $amsterdam-table-font-family: $amsterdam-typography-font-family;
219
- $amsterdam-table-color: $amsterdam-color-primary-black;
220
- $amsterdam-switch-disabled-background-color: $amsterdam-color-neutral-grey2;
221
- $amsterdam-switch-outline-offset: $amsterdam-focus-outline-offset;
222
- $amsterdam-switch-checked-background-color: $amsterdam-color-primary-blue;
223
- $amsterdam-switch-thumb-hover-color: $amsterdam-color-dark-blue;
224
- $amsterdam-switch-thumb-background-color: $amsterdam-color-primary-white;
225
- $amsterdam-switch-background-color: $amsterdam-color-neutral-grey3;
226
- $amsterdam-switch-font-family: $amsterdam-typography-font-family;
227
- $amsterdam-spotlight-yellow-background-color: $amsterdam-color-yellow;
228
- $amsterdam-spotlight-purple-background-color: $amsterdam-color-purple;
229
- $amsterdam-spotlight-orange-background-color: $amsterdam-color-orange;
230
- $amsterdam-spotlight-magenta-background-color: $amsterdam-color-magenta;
231
- $amsterdam-spotlight-green-background-color: $amsterdam-color-green;
232
- $amsterdam-spotlight-dark-green-background-color: $amsterdam-color-dark-green;
233
- $amsterdam-spotlight-dark-blue-background-color: $amsterdam-color-primary-blue;
234
- $amsterdam-spotlight-blue-background-color: $amsterdam-color-blue;
235
- $amsterdam-skip-link-hover-background-color: $amsterdam-color-dark-blue;
236
- $amsterdam-skip-link-padding-inline: $amsterdam-space-inside-md;
237
- $amsterdam-skip-link-padding-block: $amsterdam-space-inside-xs;
238
- $amsterdam-skip-link-outline-offset: $amsterdam-focus-outline-offset;
239
- $amsterdam-skip-link-line-height: $amsterdam-typography-text-level-6-line-height;
240
- $amsterdam-skip-link-font-size: $amsterdam-typography-text-level-6-font-size;
241
- $amsterdam-skip-link-font-weight: $amsterdam-typography-font-weight-normal;
242
- $amsterdam-skip-link-font-family: $amsterdam-typography-font-family;
243
- $amsterdam-skip-link-color: $amsterdam-color-primary-white;
244
- $amsterdam-skip-link-background-color: $amsterdam-color-primary-blue;
245
- $amsterdam-search-field-input-placeholder-color: $amsterdam-color-neutral-grey3;
246
- $amsterdam-search-field-input-hover-box-shadow: inset 0 0 0 2px $amsterdam-color-primary-black;
247
- $amsterdam-search-field-input-cancel-button-width: $amsterdam-typography-text-level-6-font-size;
248
- $amsterdam-search-field-input-cancel-button-height: $amsterdam-typography-text-level-6-font-size;
249
- $amsterdam-search-field-input-cancel-button-color: $amsterdam-color-primary-blue;
250
- $amsterdam-search-field-input-padding-inline: $amsterdam-space-inside-md;
251
- $amsterdam-search-field-input-padding-block: $amsterdam-space-inside-xs;
252
- $amsterdam-search-field-input-outline-offset: $amsterdam-focus-outline-offset;
253
- $amsterdam-search-field-input-line-height: $amsterdam-typography-text-level-6-line-height;
254
- $amsterdam-search-field-input-font-weight: $amsterdam-typography-font-weight-normal;
255
- $amsterdam-search-field-input-font-size: $amsterdam-typography-text-level-6-font-size;
256
- $amsterdam-search-field-input-font-family: $amsterdam-typography-font-family;
257
- $amsterdam-search-field-input-color: $amsterdam-color-primary-black;
258
- $amsterdam-search-field-input-box-shadow: inset 0 0 0 1px $amsterdam-color-primary-black;
259
- $amsterdam-search-field-button-padding-inline: $amsterdam-space-inside-xs;
260
- $amsterdam-search-field-button-padding-block: $amsterdam-space-inside-xs;
261
- $amsterdam-search-field-button-hover-background-color: $amsterdam-color-dark-blue;
262
- $amsterdam-search-field-button-outline-offset: $amsterdam-focus-outline-offset;
263
- $amsterdam-search-field-button-color: $amsterdam-color-primary-white;
264
- $amsterdam-search-field-button-background-color: $amsterdam-color-primary-blue;
265
- $amsterdam-row-gap-xl: $amsterdam-space-stack-xl;
266
- $amsterdam-row-gap-lg: $amsterdam-space-stack-lg;
267
- $amsterdam-row-gap-md: $amsterdam-space-stack-md;
268
- $amsterdam-row-gap-sm: $amsterdam-space-stack-sm;
269
- $amsterdam-row-gap-xs: $amsterdam-space-stack-xs;
270
- $amsterdam-radio-hover-color: $amsterdam-color-dark-blue;
271
- $amsterdam-radio-disabled-color: $amsterdam-color-neutral-grey3;
272
- $amsterdam-radio-circle-invalid-hover-border-color: $amsterdam-color-primary-red;
273
- $amsterdam-radio-circle-invalid-border-color: $amsterdam-color-primary-red;
274
- $amsterdam-radio-circle-hover-border-color: $amsterdam-color-dark-blue;
275
- $amsterdam-radio-circle-disabled-border-color: $amsterdam-color-neutral-grey3;
276
- $amsterdam-radio-circle-border-color: $amsterdam-color-primary-blue;
277
- $amsterdam-radio-outline-offset: $amsterdam-focus-outline-offset;
278
- $amsterdam-radio-line-height: $amsterdam-typography-text-level-5-line-height;
279
- $amsterdam-radio-font-weight: $amsterdam-typography-font-weight-normal;
280
- $amsterdam-radio-font-size: $amsterdam-typography-text-level-5-font-size;
281
- $amsterdam-radio-font-family: $amsterdam-typography-font-family;
282
- $amsterdam-radio-color: $amsterdam-color-primary-black;
283
- $amsterdam-paragraph-large-line-height: $amsterdam-typography-text-level-4-line-height;
284
- $amsterdam-paragraph-large-font-size: $amsterdam-typography-text-level-4-font-size;
285
- $amsterdam-paragraph-medium-line-height: $amsterdam-typography-text-level-5-line-height;
286
- $amsterdam-paragraph-medium-font-size: $amsterdam-typography-text-level-5-font-size;
287
- $amsterdam-paragraph-small-line-height: $amsterdam-typography-text-level-6-line-height;
288
- $amsterdam-paragraph-small-font-size: $amsterdam-typography-text-level-6-font-size;
289
- $amsterdam-paragraph-inverse-color: $amsterdam-color-primary-white;
290
- $amsterdam-paragraph-font-weight: $amsterdam-typography-font-weight-normal;
291
- $amsterdam-paragraph-font-family: $amsterdam-typography-font-family;
292
- $amsterdam-paragraph-color: $amsterdam-color-primary-black;
293
- $amsterdam-pagination-button-hover-text-decoration-line: $amsterdam-link-appearance-subtle-hover-text-decoration-line;
294
- $amsterdam-pagination-button-current-font-weight: $amsterdam-typography-font-weight-bold;
295
- $amsterdam-pagination-button-text-underline-offset: $amsterdam-link-appearance-text-underline-offset;
296
- $amsterdam-pagination-button-text-decoration-thickness: $amsterdam-link-appearance-text-decoration-thickness;
297
- $amsterdam-pagination-button-text-decoration-line: $amsterdam-link-appearance-subtle-text-decoration-line;
298
- $amsterdam-pagination-button-padding-inline: $amsterdam-space-inside-sm;
299
- $amsterdam-pagination-button-outline-offset: $amsterdam-focus-outline-offset;
300
- $amsterdam-pagination-line-height: $amsterdam-typography-text-level-5-line-height;
301
- $amsterdam-pagination-font-weight: $amsterdam-typography-font-weight-normal;
302
- $amsterdam-pagination-font-size: $amsterdam-typography-text-level-5-font-size;
303
- $amsterdam-pagination-font-family: $amsterdam-typography-font-family;
304
- $amsterdam-page-menu-item-hover-text-decoration-line: $amsterdam-link-appearance-subtle-hover-text-decoration-line;
305
- $amsterdam-page-menu-item-text-underline-offset: $amsterdam-link-appearance-text-underline-offset;
306
- $amsterdam-page-menu-item-text-decoration-thickness: $amsterdam-link-appearance-text-decoration-thickness;
307
- $amsterdam-page-menu-item-text-decoration-line: $amsterdam-link-appearance-subtle-text-decoration-line;
308
- $amsterdam-page-menu-item-outline-offset: $amsterdam-focus-outline-offset;
309
- $amsterdam-page-menu-item-line-height: $amsterdam-typography-text-level-6-line-height;
310
- $amsterdam-page-menu-item-font-weight: $amsterdam-typography-font-weight-normal;
311
- $amsterdam-page-menu-item-font-size: $amsterdam-typography-text-level-6-font-size;
312
- $amsterdam-page-menu-item-font-family: $amsterdam-typography-font-family;
313
- $amsterdam-page-heading-line-height: $amsterdam-typography-text-level-0-font-size;
314
- $amsterdam-page-heading-inverse-color: $amsterdam-color-primary-white;
315
- $amsterdam-page-heading-font-weight: $amsterdam-typography-font-weight-bold;
316
- $amsterdam-page-heading-font-size: $amsterdam-typography-text-level-0-font-size;
317
- $amsterdam-page-heading-font-family: $amsterdam-typography-font-family;
318
- $amsterdam-page-heading-color: $amsterdam-color-primary-black;
319
- $amsterdam-ordered-list-line-height: $amsterdam-typography-text-level-5-line-height;
320
- $amsterdam-ordered-list-inverse-color: $amsterdam-color-primary-white;
321
- $amsterdam-ordered-list-font-weight: $amsterdam-typography-font-weight-normal;
322
- $amsterdam-ordered-list-font-size: $amsterdam-typography-text-level-5-font-size;
323
- $amsterdam-ordered-list-font-family: $amsterdam-typography-font-family;
324
- $amsterdam-ordered-list-color: $amsterdam-color-primary-black;
325
- $amsterdam-mega-menu-list-category-padding-block-end: $amsterdam-space-grid-md; // Must have the same value as `amsterdam.grid.row-gap.md`.
326
- $amsterdam-mega-menu-list-category-column-gap: $amsterdam-space-grid-md; // Must have the same value as `amsterdam.grid.column-gap`.
327
- $amsterdam-mark-background-color: $amsterdam-color-yellow;
328
- $amsterdam-margin-xl: $amsterdam-space-grid-xl;
329
- $amsterdam-margin-lg: $amsterdam-space-grid-lg;
330
- $amsterdam-margin-md: $amsterdam-space-grid-md;
331
- $amsterdam-margin-sm: $amsterdam-space-grid-sm;
332
- $amsterdam-margin-xs: $amsterdam-space-grid-xs;
333
- $amsterdam-logo-subsite-color: $amsterdam-color-primary-black;
334
- $amsterdam-logo-title-color: $amsterdam-color-primary-red;
335
- $amsterdam-logo-emblem-color: $amsterdam-color-primary-red;
336
- $amsterdam-link-standalone-hover-text-underline-offset: $amsterdam-link-appearance-regular-hover-text-underline-offset;
337
- $amsterdam-link-standalone-hover-text-decoration-thickness: $amsterdam-link-appearance-regular-hover-text-decoration-thickness;
338
- $amsterdam-link-standalone-text-underline-offset: $amsterdam-link-appearance-text-underline-offset;
339
- $amsterdam-link-standalone-text-decoration-thickness: $amsterdam-link-appearance-text-decoration-thickness;
340
- $amsterdam-link-standalone-text-decoration-line: $amsterdam-link-appearance-regular-text-decoration-line;
341
- $amsterdam-link-standalone-line-height: $amsterdam-typography-text-level-5-line-height;
342
- $amsterdam-link-standalone-font-size: $amsterdam-typography-text-level-5-font-size;
343
- $amsterdam-link-inline-visited-color: $amsterdam-color-purple;
344
- $amsterdam-link-inline-hover-text-underline-offset: $amsterdam-link-appearance-regular-hover-text-underline-offset;
345
- $amsterdam-link-inline-hover-text-decoration-thickness: $amsterdam-link-appearance-regular-hover-text-decoration-thickness;
346
- $amsterdam-link-inline-text-underline-offset: $amsterdam-link-appearance-text-underline-offset;
347
- $amsterdam-link-inline-text-decoration-thickness: $amsterdam-link-appearance-text-decoration-thickness;
348
- $amsterdam-link-inline-text-decoration-line: $amsterdam-link-appearance-regular-text-decoration-line;
349
- $amsterdam-link-outline-offset: $amsterdam-focus-outline-offset;
350
- $amsterdam-link-font-weight: $amsterdam-typography-font-weight-normal;
351
- $amsterdam-link-font-family: $amsterdam-typography-font-family;
352
- $amsterdam-link-list-link-hover-text-decoration-line: $amsterdam-link-appearance-subtle-hover-text-decoration-line;
353
- $amsterdam-link-list-link-large-line-height: $amsterdam-typography-text-level-4-line-height;
354
- $amsterdam-link-list-link-large-font-size: $amsterdam-typography-text-level-4-font-size;
355
- $amsterdam-link-list-link-medium-line-height: $amsterdam-typography-text-level-5-line-height;
356
- $amsterdam-link-list-link-medium-font-size: $amsterdam-typography-text-level-5-font-size;
357
- $amsterdam-link-list-link-small-line-height: $amsterdam-typography-text-level-6-line-height;
358
- $amsterdam-link-list-link-small-font-size: $amsterdam-typography-text-level-6-font-size;
359
- $amsterdam-link-list-link-text-underline-offset: $amsterdam-link-appearance-text-underline-offset;
360
- $amsterdam-link-list-link-text-decoration-thickness: $amsterdam-link-appearance-text-decoration-thickness;
361
- $amsterdam-link-list-link-text-decoration-line: $amsterdam-link-appearance-subtle-text-decoration-line;
362
- $amsterdam-link-list-link-outline-offset: $amsterdam-focus-outline-offset;
363
- $amsterdam-link-list-link-font-weight: $amsterdam-typography-font-weight-normal;
364
- $amsterdam-link-list-link-font-family: $amsterdam-typography-font-family;
365
- $amsterdam-icon-size-6-line-height: $amsterdam-typography-text-level-6-line-height;
366
- $amsterdam-icon-size-6-font-size: $amsterdam-typography-text-level-6-font-size;
367
- $amsterdam-icon-size-5-line-height: $amsterdam-typography-text-level-5-line-height;
368
- $amsterdam-icon-size-5-font-size: $amsterdam-typography-text-level-5-font-size;
369
- $amsterdam-icon-size-4-line-height: $amsterdam-typography-text-level-4-line-height;
370
- $amsterdam-icon-size-4-font-size: $amsterdam-typography-text-level-4-font-size;
371
- $amsterdam-icon-size-3-line-height: $amsterdam-typography-text-level-3-line-height;
372
- $amsterdam-icon-size-3-font-size: $amsterdam-typography-text-level-3-font-size;
373
- $amsterdam-icon-button-on-background-dark-disabled-background-color: $amsterdam-color-neutral-grey2;
374
- $amsterdam-icon-button-on-background-dark-disabled-color: $amsterdam-color-primary-white;
375
- $amsterdam-icon-button-on-background-dark-hover-color: $amsterdam-color-primary-white;
376
- $amsterdam-icon-button-on-background-dark-hover-background-color: $amsterdam-color-dark-blue;
377
- $amsterdam-icon-button-on-background-dark-color: $amsterdam-color-primary-white;
378
- $amsterdam-icon-button-on-background-dark-background-color: $amsterdam-color-primary-blue;
379
- $amsterdam-icon-button-on-background-light-disabled-color: $amsterdam-color-neutral-grey2;
380
- $amsterdam-icon-button-on-background-light-hover-color: $amsterdam-color-primary-black;
381
- $amsterdam-icon-button-on-background-light-color: $amsterdam-color-primary-black;
382
- $amsterdam-icon-button-disabled-color: $amsterdam-color-neutral-grey2;
383
- $amsterdam-icon-button-hover-color: $amsterdam-color-dark-blue;
384
- $amsterdam-icon-button-outline-offset: $amsterdam-focus-outline-offset;
385
- $amsterdam-icon-button-color: $amsterdam-color-primary-blue;
386
- $amsterdam-heading-level-6-line-height: $amsterdam-typography-text-level-6-line-height;
387
- $amsterdam-heading-level-6-font-size: $amsterdam-typography-text-level-6-font-size;
388
- $amsterdam-heading-level-5-line-height: $amsterdam-typography-text-level-5-line-height;
389
- $amsterdam-heading-level-5-font-size: $amsterdam-typography-text-level-5-font-size;
390
- $amsterdam-heading-level-4-line-height: $amsterdam-typography-text-level-4-line-height;
391
- $amsterdam-heading-level-4-font-size: $amsterdam-typography-text-level-4-font-size;
392
- $amsterdam-heading-level-3-line-height: $amsterdam-typography-text-level-3-line-height;
393
- $amsterdam-heading-level-3-font-size: $amsterdam-typography-text-level-3-font-size;
394
- $amsterdam-heading-level-2-line-height: $amsterdam-typography-text-level-2-line-height;
395
- $amsterdam-heading-level-2-font-size: $amsterdam-typography-text-level-2-font-size;
396
- $amsterdam-heading-level-1-line-height: $amsterdam-typography-text-level-1-line-height;
397
- $amsterdam-heading-level-1-font-size: $amsterdam-typography-text-level-1-font-size;
398
- $amsterdam-heading-inverse-color: $amsterdam-color-primary-white;
399
- $amsterdam-heading-font-weight: $amsterdam-typography-font-weight-bold;
400
- $amsterdam-heading-font-family: $amsterdam-typography-font-family;
401
- $amsterdam-heading-color: $amsterdam-color-primary-black;
402
- $amsterdam-header-logo-link-outline-offset: $amsterdam-focus-outline-offset;
403
- $amsterdam-header-padding-block: $amsterdam-space-inside-md;
404
- $amsterdam-header-column-gap: $amsterdam-space-grid-md; // Must have the same value as `amsterdam.grid.column-gap`.
405
- $amsterdam-grid-row-gap-lg: $amsterdam-space-grid-lg;
406
- $amsterdam-grid-row-gap-md: $amsterdam-space-grid-md;
407
- $amsterdam-grid-row-gap-sm: $amsterdam-space-grid-sm;
408
- $amsterdam-grid-padding-inline: $amsterdam-space-grid-lg;
409
- $amsterdam-grid-padding-block-lg: $amsterdam-space-grid-lg;
410
- $amsterdam-grid-padding-block-md: $amsterdam-space-grid-md;
411
- $amsterdam-grid-padding-block-sm: $amsterdam-space-grid-sm;
412
- $amsterdam-grid-column-gap: $amsterdam-space-grid-md;
413
- $amsterdam-gap-xl: $amsterdam-space-grid-xl;
414
- $amsterdam-gap-lg: $amsterdam-space-grid-lg;
415
- $amsterdam-gap-md: $amsterdam-space-grid-md;
416
- $amsterdam-gap-sm: $amsterdam-space-grid-sm;
417
- $amsterdam-gap-xs: $amsterdam-space-grid-xs;
418
- $amsterdam-form-label-line-height: $amsterdam-typography-text-level-4-line-height;
419
- $amsterdam-form-label-font-weight: $amsterdam-typography-font-weight-bold;
420
- $amsterdam-form-label-font-size: $amsterdam-typography-text-level-4-font-size;
421
- $amsterdam-form-label-font-family: $amsterdam-typography-font-family;
422
- $amsterdam-form-label-color: $amsterdam-color-primary-black;
423
- $amsterdam-fieldset-legend-line-height: $amsterdam-typography-text-level-4-line-height;
424
- $amsterdam-fieldset-legend-font-weight: $amsterdam-typography-font-weight-bold;
425
- $amsterdam-fieldset-legend-font-size: $amsterdam-typography-text-level-4-font-size;
426
- $amsterdam-fieldset-legend-font-family: $amsterdam-typography-font-family;
427
- $amsterdam-fieldset-legend-color: $amsterdam-color-primary-black;
428
- $amsterdam-dialog-title-line-height: $amsterdam-typography-text-level-5-line-height;
429
- $amsterdam-dialog-title-font-weight: $amsterdam-typography-font-weight-bold;
430
- $amsterdam-dialog-title-font-size: $amsterdam-typography-text-level-5-font-size;
431
- $amsterdam-dialog-title-font-family: $amsterdam-typography-font-family;
432
- $amsterdam-dialog-title-color: $amsterdam-color-primary-black;
433
- $amsterdam-dialog-background-color: $amsterdam-color-primary-white;
434
- $amsterdam-column-gap-xl: $amsterdam-space-grid-xl;
435
- $amsterdam-column-gap-lg: $amsterdam-space-grid-lg;
436
- $amsterdam-column-gap-md: $amsterdam-space-grid-md;
437
- $amsterdam-column-gap-sm: $amsterdam-space-grid-sm;
438
- $amsterdam-column-gap-xs: $amsterdam-space-grid-xs;
439
- $amsterdam-checkbox-hover-color: $amsterdam-color-dark-blue;
440
- $amsterdam-checkbox-disabled-color: $amsterdam-color-neutral-grey3;
441
- $amsterdam-checkbox-checkmark-indeterminate-hover-background-color: $amsterdam-color-dark-blue;
442
- $amsterdam-checkbox-checkmark-indeterminate-background-color: $amsterdam-color-primary-blue;
443
- $amsterdam-checkbox-checkmark-invalid-indeterminate-hover-background-color: $amsterdam-color-primary-red;
444
- $amsterdam-checkbox-checkmark-invalid-indeterminate-background-color: $amsterdam-color-primary-red;
445
- $amsterdam-checkbox-checkmark-invalid-hover-border-color: $amsterdam-color-primary-red;
446
- $amsterdam-checkbox-checkmark-invalid-checked-hover-background-color: $amsterdam-color-primary-red;
447
- $amsterdam-checkbox-checkmark-invalid-checked-background-color: $amsterdam-color-primary-red;
448
- $amsterdam-checkbox-checkmark-invalid-border-color: $amsterdam-color-primary-red;
449
- $amsterdam-checkbox-checkmark-hover-border-color: $amsterdam-color-dark-blue;
450
- $amsterdam-checkbox-checkmark-disabled-indeterminate-hover-background-color: $amsterdam-color-neutral-grey3;
451
- $amsterdam-checkbox-checkmark-disabled-indeterminate-background-color: $amsterdam-color-neutral-grey3;
452
- $amsterdam-checkbox-checkmark-disabled-checked-hover-background-color: $amsterdam-color-neutral-grey3;
453
- $amsterdam-checkbox-checkmark-disabled-checked-background-color: $amsterdam-color-neutral-grey3;
454
- $amsterdam-checkbox-checkmark-disabled-border-color: $amsterdam-color-neutral-grey3;
455
- $amsterdam-checkbox-checkmark-checked-hover-background-color: $amsterdam-color-dark-blue;
456
- $amsterdam-checkbox-checkmark-checked-background-color: $amsterdam-color-primary-blue;
457
- $amsterdam-checkbox-checkmark-border-color: $amsterdam-color-primary-blue;
458
- $amsterdam-checkbox-outline-offset: $amsterdam-focus-outline-offset;
459
- $amsterdam-checkbox-line-height: $amsterdam-typography-text-level-5-line-height;
460
- $amsterdam-checkbox-font-weight: $amsterdam-typography-font-weight-normal;
461
- $amsterdam-checkbox-font-size: $amsterdam-typography-text-level-5-font-size;
462
- $amsterdam-checkbox-font-family: $amsterdam-typography-font-family;
463
- $amsterdam-checkbox-color: $amsterdam-color-primary-black;
464
- $amsterdam-card-outline-offset: $amsterdam-focus-outline-offset;
465
- $amsterdam-card-link-hover-text-decoration-line: $amsterdam-link-appearance-subtle-hover-text-decoration-line;
466
- $amsterdam-card-link-text-underline-offset: $amsterdam-link-appearance-text-underline-offset;
467
- $amsterdam-card-link-text-decoration-thickness: $amsterdam-link-appearance-text-decoration-thickness;
468
- $amsterdam-card-link-text-decoration-line: $amsterdam-link-appearance-subtle-text-decoration-line;
469
- $amsterdam-button-tertiary-disabled-color: $amsterdam-color-neutral-grey2;
470
- $amsterdam-button-tertiary-hover-color: $amsterdam-color-dark-blue;
471
- $amsterdam-button-tertiary-hover-box-shadow: inset 0 0 0 2px $amsterdam-color-dark-blue;
472
- $amsterdam-button-tertiary-color: $amsterdam-color-primary-blue;
473
- $amsterdam-button-secondary-focus-box-shadow: inset 0 0 0 2px $amsterdam-color-primary-blue;
474
- $amsterdam-button-secondary-disabled-color: $amsterdam-color-neutral-grey2;
475
- $amsterdam-button-secondary-disabled-box-shadow: inset 0 0 0 2px $amsterdam-color-neutral-grey2;
476
- $amsterdam-button-secondary-disabled-background-color: $amsterdam-color-primary-white;
477
- $amsterdam-button-secondary-hover-color: $amsterdam-color-dark-blue;
478
- $amsterdam-button-secondary-hover-box-shadow: inset 0 0 0 3px $amsterdam-color-dark-blue;
479
- $amsterdam-button-secondary-box-shadow: inset 0 0 0 2px $amsterdam-color-primary-blue;
480
- $amsterdam-button-secondary-color: $amsterdam-color-primary-blue;
481
- $amsterdam-button-secondary-background-color: $amsterdam-color-primary-white;
482
- $amsterdam-button-primary-hover-box-shadow: inset 0 0 0 2px $amsterdam-color-dark-blue;
483
- $amsterdam-button-primary-hover-background-color: $amsterdam-color-dark-blue;
484
- $amsterdam-button-primary-disabled-box-shadow: inset 0 0 0 2px $amsterdam-color-neutral-grey2;
485
- $amsterdam-button-primary-disabled-background-color: $amsterdam-color-neutral-grey2;
486
- $amsterdam-button-primary-color: $amsterdam-color-primary-white;
487
- $amsterdam-button-primary-box-shadow: inset 0 0 0 2px $amsterdam-color-primary-blue;
488
- $amsterdam-button-primary-background-color: $amsterdam-color-primary-blue;
489
- $amsterdam-button-disabled-cursor: $amsterdam-action-disabled-cursor;
490
- $amsterdam-button-busy-cursor: $amsterdam-action-busy-cursor;
491
- $amsterdam-button-outline-offset: $amsterdam-focus-outline-offset;
492
- $amsterdam-button-padding-inline: $amsterdam-space-inside-md;
493
- $amsterdam-button-padding-block: $amsterdam-space-inside-xs;
494
- $amsterdam-button-line-height: $amsterdam-typography-text-level-5-line-height;
495
- $amsterdam-button-font-size: $amsterdam-typography-text-level-5-font-size;
496
- $amsterdam-button-font-family: $amsterdam-typography-font-family;
497
- $amsterdam-button-cursor: $amsterdam-action-activate-cursor;
498
- $amsterdam-breadcrumb-item-link-hover-text-decoration-line: $amsterdam-link-appearance-subtle-hover-text-decoration-line;
499
- $amsterdam-breadcrumb-item-link-hover-color: $amsterdam-color-dark-blue;
500
- $amsterdam-breadcrumb-item-link-text-underline-offset: $amsterdam-link-appearance-text-underline-offset;
501
- $amsterdam-breadcrumb-item-link-text-decoration-thickness: $amsterdam-link-appearance-text-decoration-thickness;
502
- $amsterdam-breadcrumb-item-link-text-decoration-line: $amsterdam-link-appearance-subtle-text-decoration-line;
503
- $amsterdam-breadcrumb-item-link-outline-offset: $amsterdam-focus-outline-offset;
504
- $amsterdam-breadcrumb-line-height: $amsterdam-typography-text-level-6-line-height;
505
- $amsterdam-breadcrumb-font-weight: $amsterdam-typography-font-weight-normal;
506
- $amsterdam-breadcrumb-font-size: $amsterdam-typography-text-level-6-font-size;
507
- $amsterdam-breadcrumb-font-family: $amsterdam-typography-font-family;
508
- $amsterdam-blockquote-inverse-color: $amsterdam-color-primary-white;
509
- $amsterdam-blockquote-line-height: $amsterdam-typography-text-level-3-line-height;
510
- $amsterdam-blockquote-font-weight: $amsterdam-typography-font-weight-bold;
511
- $amsterdam-blockquote-font-size: $amsterdam-typography-text-level-3-font-size;
512
- $amsterdam-blockquote-font-family: $amsterdam-typography-font-family;
513
- $amsterdam-blockquote-color: $amsterdam-color-primary-black;
514
- $amsterdam-badge-yellow-color: $amsterdam-color-primary-black;
515
- $amsterdam-badge-yellow-background-color: $amsterdam-color-yellow;
516
- $amsterdam-badge-purple-color: $amsterdam-color-primary-white;
517
- $amsterdam-badge-purple-background-color: $amsterdam-color-purple;
518
- $amsterdam-badge-orange-color: $amsterdam-color-primary-black;
519
- $amsterdam-badge-orange-background-color: $amsterdam-color-orange;
520
- $amsterdam-badge-magenta-color: $amsterdam-color-primary-white;
521
- $amsterdam-badge-magenta-background-color: $amsterdam-color-magenta;
522
- $amsterdam-badge-green-color: $amsterdam-color-primary-black;
523
- $amsterdam-badge-green-background-color: $amsterdam-color-green;
524
- $amsterdam-badge-dark-green-color: $amsterdam-color-primary-white;
525
- $amsterdam-badge-dark-green-background-color: $amsterdam-color-dark-green;
526
- $amsterdam-badge-dark-blue-color: $amsterdam-color-primary-white;
527
- $amsterdam-badge-dark-blue-background-color: $amsterdam-color-primary-blue;
528
- $amsterdam-badge-blue-color: $amsterdam-color-primary-black;
529
- $amsterdam-badge-blue-background-color: $amsterdam-color-blue;
530
- $amsterdam-badge-padding-inline: $amsterdam-space-inside-xs;
531
- $amsterdam-badge-line-height: $amsterdam-typography-text-level-5-line-height;
532
- $amsterdam-badge-font-weight: $amsterdam-typography-font-weight-bold;
533
- $amsterdam-badge-font-size: $amsterdam-typography-text-level-5-font-size;
534
- $amsterdam-badge-font-family: $amsterdam-typography-font-family;
535
- $amsterdam-aspect-ratio-2x-wide: $amsterdam-proportion-2x-wide;
536
- $amsterdam-aspect-ratio-x-wide: $amsterdam-proportion-x-wide;
537
- $amsterdam-aspect-ratio-wide: $amsterdam-proportion-wide;
538
- $amsterdam-aspect-ratio-square: $amsterdam-proportion-square;
539
- $amsterdam-aspect-ratio-tall: $amsterdam-proportion-tall;
540
- $amsterdam-aspect-ratio-x-tall: $amsterdam-proportion-x-tall;
541
- $amsterdam-alert-close-hover-fill: $amsterdam-color-primary-blue;
542
- $amsterdam-alert-close-fill: $amsterdam-color-primary-black;
543
- $amsterdam-alert-warning-border-color: $amsterdam-color-orange;
544
- $amsterdam-alert-success-border-color: $amsterdam-color-dark-green;
545
- $amsterdam-alert-info-border-color: $amsterdam-color-primary-blue;
546
- $amsterdam-alert-error-border-color: $amsterdam-color-primary-red;
547
- $amsterdam-alert-padding-inline: $amsterdam-space-inside-lg;
548
- $amsterdam-alert-padding-block: $amsterdam-space-inside-md;
549
- $amsterdam-accordion-panel-padding-inline: $amsterdam-space-inside-md;
550
- $amsterdam-accordion-panel-padding-block: $amsterdam-space-inside-md;
551
- $amsterdam-accordion-button-hover-box-shadow: inset 0 0 0 2px $amsterdam-color-neutral-grey3;
552
- $amsterdam-accordion-button-focus-outline-offset: $amsterdam-focus-outline-offset;
553
- $amsterdam-accordion-button-padding-inline: $amsterdam-space-inside-md;
554
- $amsterdam-accordion-button-padding-block: $amsterdam-space-inside-sm;
555
- $amsterdam-accordion-button-line-height: $amsterdam-typography-text-level-5-line-height;
556
- $amsterdam-accordion-button-font-weight: $amsterdam-typography-font-weight-bold;
557
- $amsterdam-accordion-button-font-size: $amsterdam-typography-text-level-5-font-size;
558
- $amsterdam-accordion-button-font-family: $amsterdam-typography-font-family;
559
- $amsterdam-accordion-button-color: $amsterdam-color-primary-blue;
560
- $amsterdam-link-appearance-on-background-light-color: $amsterdam-color-primary-black;
561
- $amsterdam-link-appearance-on-background-dark-color: $amsterdam-color-primary-white;
562
- $amsterdam-link-appearance-hover-color: $amsterdam-color-dark-blue;
563
- $amsterdam-link-appearance-color: $amsterdam-color-primary-blue;
564
- $amsterdam-top-task-link-label-color: $amsterdam-link-appearance-color;
565
- $amsterdam-pagination-button-hover-color: $amsterdam-link-appearance-hover-color;
566
- $amsterdam-pagination-color: $amsterdam-link-appearance-color;
567
- $amsterdam-page-menu-item-hover-color: $amsterdam-link-appearance-hover-color;
568
- $amsterdam-page-menu-item-color: $amsterdam-link-appearance-color;
569
- $amsterdam-link-on-background-light-visited-color: $amsterdam-link-appearance-on-background-light-color;
570
- $amsterdam-link-on-background-light-hover-color: $amsterdam-link-appearance-on-background-light-color;
571
- $amsterdam-link-on-background-light-color: $amsterdam-link-appearance-on-background-light-color;
572
- $amsterdam-link-on-background-dark-visited-color: $amsterdam-link-appearance-on-background-dark-color;
573
- $amsterdam-link-on-background-dark-hover-color: $amsterdam-link-appearance-on-background-dark-color;
574
- $amsterdam-link-on-background-dark-color: $amsterdam-link-appearance-on-background-dark-color;
575
- $amsterdam-link-hover-color: $amsterdam-link-appearance-hover-color;
576
- $amsterdam-link-color: $amsterdam-link-appearance-color;
577
- $amsterdam-link-list-link-on-background-light-hover-color: $amsterdam-link-appearance-on-background-light-color;
578
- $amsterdam-link-list-link-on-background-light-color: $amsterdam-link-appearance-on-background-light-color;
579
- $amsterdam-link-list-link-on-background-dark-hover-color: $amsterdam-link-appearance-on-background-dark-color;
580
- $amsterdam-link-list-link-on-background-dark-color: $amsterdam-link-appearance-on-background-dark-color;
581
- $amsterdam-link-list-link-hover-color: $amsterdam-link-appearance-hover-color;
582
- $amsterdam-link-list-link-color: $amsterdam-link-appearance-color;
583
- $amsterdam-card-link-hover-color: $amsterdam-link-appearance-hover-color;
584
- $amsterdam-card-link-color: $amsterdam-link-appearance-color;
585
- $amsterdam-breadcrumb-item-link-color: $amsterdam-link-appearance-color;
5
+ $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
+ $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.
7
+ $ams-unordered-list-unordered-list-list-style-type: '\2013';
8
+ $ams-unordered-list-item-padding-inline-start: 0.875rem; // The total level 1 indentation for Amsterdam is 40 pixels, or 2.5rem.
9
+ $ams-unordered-list-item-margin-inline-start: 1.625rem; // Divide your total indentation width over margin and padding to position the marker.
10
+ $ams-unordered-list-list-style-type: '\2022';
11
+ $ams-unordered-list-gap: 0.75rem;
12
+ $ams-text-area-padding-inline: 1rem;
13
+ $ams-text-area-padding-block: 0.5rem;
14
+ $ams-tabs-button-padding-inline: 1rem;
15
+ $ams-tabs-button-padding-block: .5rem;
16
+ $ams-tabs-button-outline-offset: -0.25rem;
17
+ $ams-tabs-button-border: none;
18
+ $ams-tabs-button-background-color: transparent;
19
+ $ams-switch-thumb-height: 1.75rem;
20
+ $ams-switch-thumb-width: 1.75rem;
21
+ $ams-switch-width: 3.5rem;
22
+ $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>");
23
+ $ams-screen-x-wide-max-width: 132rem;
24
+ $ams-screen-wide-max-width: 100rem;
25
+ $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");
26
+ $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");
27
+ $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");
28
+ $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");
29
+ $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");
30
+ $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");
31
+ $ams-page-menu-item-gap: 0.5rem;
32
+ $ams-page-menu-row-gap: 0.5rem;
33
+ $ams-page-menu-column-gap: 2.5rem;
34
+ $ams-ordered-list-ordered-list-item-padding-inline-start: 0.25rem; // The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem.
35
+ $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.
36
+ $ams-ordered-list-ordered-list-list-style-type: lower-alpha;
37
+ $ams-ordered-list-item-padding-inline-start: 0.25rem; // The total level 1 indentation for Amsterdam is 40 pixels, or 2.5rem.
38
+ $ams-ordered-list-item-margin-inline-start: 2.25rem; // Divide your total indentation width over margin and padding to position the marker.
39
+ $ams-ordered-list-list-style-type: decimal;
40
+ $ams-ordered-list-gap: 0.75rem;
41
+ $ams-mega-menu-list-category-padding-block-start: 1rem;
42
+ $ams-mega-menu-list-category-column-width: 20rem;
43
+ $ams-logo-height: 2.5rem;
44
+ $ams-link-inline-line-height: inherit;
45
+ $ams-link-inline-font-size: inherit;
46
+ $ams-link-inline-font-family: inherit;
47
+ $ams-link-list-link-gap: 0.5em;
48
+ $ams-link-list-gap: 0.5em;
49
+ $ams-icon-button-on-background-light-hover-background-color: rgba(0, 0, 0, 0.125);
50
+ $ams-icon-button-hover-background-color: rgba(0, 70, 153, 0.125);
51
+ $ams-grid-wide-column-count: 12;
52
+ $ams-grid-medium-column-count: 8;
53
+ $ams-grid-column-count: 4;
54
+ $ams-dialog-footer-gap: 1rem;
55
+ $ams-dialog-header-gap: 1rem;
56
+ $ams-dialog-form-max-block-size: 75vh;
57
+ $ams-dialog-form-padding-inline: clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem);
58
+ $ams-dialog-form-padding-block: clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem);
59
+ $ams-dialog-form-gap: 1.5rem;
60
+ $ams-dialog-max-inline-size: min(87.69vw, 45rem);
61
+ $ams-dialog-border: 0;
62
+ $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");
63
+ $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");
64
+ $ams-button-tertiary-disabled-background-color: transparent;
65
+ $ams-button-tertiary-background-color: transparent;
66
+ $ams-button-gap: 1rem;
67
+ $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>");
68
+ $ams-alert-gap: 1rem;
69
+ $ams-alert-border-style: solid;
70
+ $ams-alert-border-width: 4px;
71
+ $ams-link-appearance-subtle-hover-text-decoration-line: underline;
72
+ $ams-link-appearance-subtle-text-decoration-line: none;
73
+ $ams-link-appearance-regular-hover-text-underline-offset: 0.3125rem;
74
+ $ams-link-appearance-regular-hover-text-decoration-thickness: 0.1875rem;
75
+ $ams-link-appearance-regular-text-decoration-line: underline;
76
+ $ams-link-appearance-text-underline-offset: 0.375rem;
77
+ $ams-link-appearance-text-decoration-thickness: 0.125rem;
78
+ $ams-hyphenation-overflow-wrap: break-word;
79
+ $ams-hyphenation-hyphens: auto;
80
+ $ams-hyphenation-hyphenate-limit-chars: 12 8 4;
81
+ $ams-focus-outline-offset: 2px;
82
+ $ams-border-width-lg: 3px;
83
+ $ams-border-width-md: 2px;
84
+ $ams-border-width-sm: 1px;
85
+ $ams-action-submit-cursor: pointer;
86
+ $ams-action-navigate-cursor: pointer;
87
+ $ams-action-inert-cursor: default;
88
+ $ams-action-disabled-cursor: not-allowed;
89
+ $ams-action-busy-cursor: wait;
90
+ $ams-action-activate-cursor: pointer;
91
+ $ams-text-level-6-line-height: 1.6;
92
+ $ams-text-level-6-font-size: clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem);
93
+ $ams-text-level-5-line-height: 1.6;
94
+ $ams-text-level-5-font-size: clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem);
95
+ $ams-text-level-4-line-height: 1.5;
96
+ $ams-text-level-4-font-size: clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem);
97
+ $ams-text-level-3-line-height: 1.3;
98
+ $ams-text-level-3-font-size: clamp(1.531rem, calc(1.016vw + 1.328rem), 2.344rem);
99
+ $ams-text-level-2-line-height: 1.25;
100
+ $ams-text-level-2-font-size: clamp(1.786rem, calc(1.43vw + 1.5rem), 2.93rem);
101
+ $ams-text-level-1-line-height: 1.2;
102
+ $ams-text-level-1-font-size: clamp(2.084rem, calc(1.973vw + 1.69rem), 3.662rem);
103
+ $ams-text-level-0-line-height: 1.15;
104
+ $ams-text-level-0-font-size: clamp(2.432rem, calc(2.683vw + 1.895rem), 4.578rem);
105
+ $ams-text-font-weight-bold: 800;
106
+ $ams-text-font-weight-normal: 400;
107
+ $ams-text-font-family: 'Amsterdam Sans', Arial, sans-serif;
108
+ $ams-space-stack-xl: 2rem;
109
+ $ams-space-stack-lg: 1.5rem;
110
+ $ams-space-stack-md: 1rem;
111
+ $ams-space-stack-sm: .75rem;
112
+ $ams-space-stack-xs: .5rem;
113
+ $ams-space-inside-xl: 2rem;
114
+ $ams-space-inside-lg: 1.5rem;
115
+ $ams-space-inside-md: 1rem;
116
+ $ams-space-inside-sm: .75rem;
117
+ $ams-space-inside-xs: .5rem;
118
+ $ams-space-grid-xl: clamp(2rem, calc(6.25vw + 0.75rem), 7rem);
119
+ $ams-space-grid-lg: clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem);
120
+ $ams-space-grid-md: clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem); // Grows from 16px at 320px wide to 56px at 1600px wide.
121
+ $ams-space-grid-sm: clamp(0.5rem, calc(1.5625vw + 0.1875rem), 1.75rem);
122
+ $ams-space-grid-xs: clamp(0.25rem, calc(0.78125vw + 0.09375rem), 0.875rem);
123
+ $ams-proportion-2x-wide: 32 / 9;
124
+ $ams-proportion-x-wide: 16 / 9;
125
+ $ams-proportion-wide: 5 / 4;
126
+ $ams-proportion-square: 1 / 1;
127
+ $ams-proportion-tall: 4 / 5;
128
+ $ams-proportion-x-tall: 9 / 16;
129
+ $ams-color-neutral-grey3: #767676;
130
+ $ams-color-neutral-grey2: #BEBEBE;
131
+ $ams-color-neutral-grey1: #E8E8E8;
132
+ $ams-color-magenta: #E50082;
133
+ $ams-color-purple: #A00078;
134
+ $ams-color-blue: #009DE6;
135
+ $ams-color-dark-green: #00A03C;
136
+ $ams-color-green: #BED200;
137
+ $ams-color-yellow: #FFE600;
138
+ $ams-color-orange: #FF9100;
139
+ $ams-color-dark-blue: #102E62;
140
+ $ams-color-primary-red: #EC0000;
141
+ $ams-color-primary-blue: #004699;
142
+ $ams-color-primary-white: #FFFFFF;
143
+ $ams-color-primary-black: #000000;
144
+ $ams-unordered-list-line-height: $ams-text-level-5-line-height;
145
+ $ams-unordered-list-inverse-color: $ams-color-primary-white;
146
+ $ams-unordered-list-font-weight: $ams-text-font-weight-normal;
147
+ $ams-unordered-list-font-size: $ams-text-level-5-font-size;
148
+ $ams-unordered-list-font-family: $ams-text-font-family;
149
+ $ams-unordered-list-color: $ams-color-primary-black;
150
+ $ams-top-task-link-outline-offset: $ams-focus-outline-offset;
151
+ $ams-top-task-link-label-hover-text-decoration-line: $ams-link-appearance-subtle-hover-text-decoration-line;
152
+ $ams-top-task-link-label-hover-color: $ams-color-dark-blue;
153
+ $ams-top-task-link-label-text-underline-offset: $ams-link-appearance-text-underline-offset;
154
+ $ams-top-task-link-label-text-decoration-thickness: $ams-link-appearance-text-decoration-thickness;
155
+ $ams-top-task-link-label-text-decoration-line: $ams-link-appearance-subtle-text-decoration-line;
156
+ $ams-top-task-link-label-line-height: $ams-text-level-4-line-height;
157
+ $ams-top-task-link-label-font-weight: $ams-text-font-weight-bold;
158
+ $ams-top-task-link-label-font-size: $ams-text-level-4-font-size;
159
+ $ams-top-task-link-label-font-family: $ams-text-font-family;
160
+ $ams-top-task-link-description-line-height: $ams-text-level-6-line-height;
161
+ $ams-top-task-link-description-font-weight: $ams-text-font-weight-normal;
162
+ $ams-top-task-link-description-font-size: $ams-text-level-6-font-size;
163
+ $ams-top-task-link-description-font-family: $ams-text-font-family;
164
+ $ams-top-task-link-description-color: $ams-color-primary-black;
165
+ $ams-text-input-placeholder-color: $ams-color-neutral-grey3;
166
+ $ams-text-input-invalid-hover-box-shadow: inset 0 0 0 2px $ams-color-primary-red;
167
+ $ams-text-input-invalid-box-shadow: inset 0 0 0 1px $ams-color-primary-red;
168
+ $ams-text-input-hover-box-shadow: inset 0 0 0 2px $ams-color-primary-black;
169
+ $ams-text-input-disabled-color: $ams-color-neutral-grey2;
170
+ $ams-text-input-disabled-box-shadow: inset 0 0 0 1px $ams-color-neutral-grey2;
171
+ $ams-text-input-disabled-background-color: $ams-color-primary-white;
172
+ $ams-text-input-padding-inline: $ams-space-inside-md;
173
+ $ams-text-input-padding-block: $ams-space-inside-xs;
174
+ $ams-text-input-outline-offset: $ams-focus-outline-offset;
175
+ $ams-text-input-line-height: $ams-text-level-6-line-height;
176
+ $ams-text-input-font-weight: $ams-text-font-weight-normal;
177
+ $ams-text-input-font-size: $ams-text-level-6-font-size;
178
+ $ams-text-input-font-family: $ams-text-font-family;
179
+ $ams-text-input-color: $ams-color-primary-black;
180
+ $ams-text-input-box-shadow: inset 0 0 0 1px $ams-color-primary-black;
181
+ $ams-text-area-placeholder-color: $ams-color-neutral-grey3;
182
+ $ams-text-area-invalid-hover-box-shadow: inset 0 0 0 2px $ams-color-primary-red;
183
+ $ams-text-area-invalid-box-shadow: inset 0 0 0 1px $ams-color-primary-red;
184
+ $ams-text-area-hover-box-shadow: inset 0 0 0 2px $ams-color-primary-black;
185
+ $ams-text-area-disabled-cursor: $ams-action-disabled-cursor;
186
+ $ams-text-area-disabled-color: $ams-color-neutral-grey2;
187
+ $ams-text-area-disabled-box-shadow: inset 0 0 0 1px $ams-color-neutral-grey2;
188
+ $ams-text-area-disabled-background-color: $ams-color-primary-white;
189
+ $ams-text-area-outline-offset: $ams-focus-outline-offset;
190
+ $ams-text-area-min-height: calc($ams-text-level-6-line-height * 1em + 2 * $ams-text-area-padding-block);
191
+ $ams-text-area-line-height: $ams-text-level-6-line-height;
192
+ $ams-text-area-font-weight: $ams-text-font-weight-normal;
193
+ $ams-text-area-font-size: $ams-text-level-6-font-size;
194
+ $ams-text-area-font-family: $ams-text-font-family;
195
+ $ams-text-area-color: $ams-color-primary-black;
196
+ $ams-text-area-box-shadow: inset 0 0 0 1px $ams-color-primary-black;
197
+ $ams-tabs-button-disabled-cursor: $ams-action-disabled-cursor;
198
+ $ams-tabs-button-disabled-color: $ams-color-neutral-grey2;
199
+ $ams-tabs-button-selected-color: $ams-color-primary-white;
200
+ $ams-tabs-button-selected-background-color: $ams-color-primary-blue;
201
+ $ams-tabs-button-hover-box-shadow: inset 0 -0.125rem 0 0 $ams-color-dark-blue;
202
+ $ams-tabs-button-hover-color: $ams-color-dark-blue;
203
+ $ams-tabs-button-line-height: $ams-text-level-5-line-height;
204
+ $ams-tabs-button-font-size: $ams-text-level-5-font-size;
205
+ $ams-tabs-button-font-weight: $ams-text-font-weight-normal;
206
+ $ams-tabs-button-font-family: $ams-text-font-family;
207
+ $ams-tabs-button-cursor: $ams-action-activate-cursor;
208
+ $ams-tabs-button-color: $ams-color-primary-blue;
209
+ $ams-tabs-list-border-bottom: .125rem solid $ams-color-primary-blue;
210
+ $ams-table-header-cell-font-weight: $ams-text-font-weight-bold;
211
+ $ams-table-cell-padding-inline: $ams-space-inside-md;
212
+ $ams-table-cell-padding-block: $ams-space-inside-md;
213
+ $ams-table-cell-border-bottom: 1px solid $ams-color-neutral-grey1;
214
+ $ams-table-caption-font-weight: $ams-text-font-weight-bold;
215
+ $ams-table-line-height: $ams-text-level-5-line-height;
216
+ $ams-table-font-size: $ams-text-level-5-font-size;
217
+ $ams-table-font-weight: $ams-text-font-weight-normal;
218
+ $ams-table-font-family: $ams-text-font-family;
219
+ $ams-table-color: $ams-color-primary-black;
220
+ $ams-switch-disabled-background-color: $ams-color-neutral-grey2;
221
+ $ams-switch-outline-offset: $ams-focus-outline-offset;
222
+ $ams-switch-checked-background-color: $ams-color-primary-blue;
223
+ $ams-switch-thumb-hover-color: $ams-color-dark-blue;
224
+ $ams-switch-thumb-background-color: $ams-color-primary-white;
225
+ $ams-switch-background-color: $ams-color-neutral-grey3;
226
+ $ams-switch-font-family: $ams-text-font-family;
227
+ $ams-spotlight-yellow-background-color: $ams-color-yellow;
228
+ $ams-spotlight-purple-background-color: $ams-color-purple;
229
+ $ams-spotlight-orange-background-color: $ams-color-orange;
230
+ $ams-spotlight-magenta-background-color: $ams-color-magenta;
231
+ $ams-spotlight-green-background-color: $ams-color-green;
232
+ $ams-spotlight-dark-green-background-color: $ams-color-dark-green;
233
+ $ams-spotlight-dark-blue-background-color: $ams-color-primary-blue;
234
+ $ams-spotlight-blue-background-color: $ams-color-blue;
235
+ $ams-skip-link-hover-background-color: $ams-color-dark-blue;
236
+ $ams-skip-link-padding-inline: $ams-space-inside-md;
237
+ $ams-skip-link-padding-block: $ams-space-inside-xs;
238
+ $ams-skip-link-outline-offset: $ams-focus-outline-offset;
239
+ $ams-skip-link-line-height: $ams-text-level-6-line-height;
240
+ $ams-skip-link-font-size: $ams-text-level-6-font-size;
241
+ $ams-skip-link-font-weight: $ams-text-font-weight-normal;
242
+ $ams-skip-link-font-family: $ams-text-font-family;
243
+ $ams-skip-link-color: $ams-color-primary-white;
244
+ $ams-skip-link-background-color: $ams-color-primary-blue;
245
+ $ams-search-field-input-placeholder-color: $ams-color-neutral-grey3;
246
+ $ams-search-field-input-hover-box-shadow: inset 0 0 0 2px $ams-color-primary-black;
247
+ $ams-search-field-input-cancel-button-width: $ams-text-level-6-font-size;
248
+ $ams-search-field-input-cancel-button-height: $ams-text-level-6-font-size;
249
+ $ams-search-field-input-cancel-button-color: $ams-color-primary-blue;
250
+ $ams-search-field-input-padding-inline: $ams-space-inside-md;
251
+ $ams-search-field-input-padding-block: $ams-space-inside-xs;
252
+ $ams-search-field-input-outline-offset: $ams-focus-outline-offset;
253
+ $ams-search-field-input-line-height: $ams-text-level-6-line-height;
254
+ $ams-search-field-input-font-weight: $ams-text-font-weight-normal;
255
+ $ams-search-field-input-font-size: $ams-text-level-6-font-size;
256
+ $ams-search-field-input-font-family: $ams-text-font-family;
257
+ $ams-search-field-input-color: $ams-color-primary-black;
258
+ $ams-search-field-input-box-shadow: inset 0 0 0 1px $ams-color-primary-black;
259
+ $ams-search-field-button-padding-inline: $ams-space-inside-xs;
260
+ $ams-search-field-button-padding-block: $ams-space-inside-xs;
261
+ $ams-search-field-button-hover-background-color: $ams-color-dark-blue;
262
+ $ams-search-field-button-outline-offset: $ams-focus-outline-offset;
263
+ $ams-search-field-button-color: $ams-color-primary-white;
264
+ $ams-search-field-button-background-color: $ams-color-primary-blue;
265
+ $ams-row-gap-xl: $ams-space-stack-xl;
266
+ $ams-row-gap-lg: $ams-space-stack-lg;
267
+ $ams-row-gap-md: $ams-space-stack-md;
268
+ $ams-row-gap-sm: $ams-space-stack-sm;
269
+ $ams-row-gap-xs: $ams-space-stack-xs;
270
+ $ams-radio-hover-color: $ams-color-dark-blue;
271
+ $ams-radio-disabled-color: $ams-color-neutral-grey3;
272
+ $ams-radio-circle-invalid-hover-border-color: $ams-color-primary-red;
273
+ $ams-radio-circle-invalid-border-color: $ams-color-primary-red;
274
+ $ams-radio-circle-hover-border-color: $ams-color-dark-blue;
275
+ $ams-radio-circle-disabled-border-color: $ams-color-neutral-grey3;
276
+ $ams-radio-circle-border-color: $ams-color-primary-blue;
277
+ $ams-radio-outline-offset: $ams-focus-outline-offset;
278
+ $ams-radio-line-height: $ams-text-level-5-line-height;
279
+ $ams-radio-font-weight: $ams-text-font-weight-normal;
280
+ $ams-radio-font-size: $ams-text-level-5-font-size;
281
+ $ams-radio-font-family: $ams-text-font-family;
282
+ $ams-radio-color: $ams-color-primary-black;
283
+ $ams-paragraph-large-line-height: $ams-text-level-4-line-height;
284
+ $ams-paragraph-large-font-size: $ams-text-level-4-font-size;
285
+ $ams-paragraph-medium-line-height: $ams-text-level-5-line-height;
286
+ $ams-paragraph-medium-font-size: $ams-text-level-5-font-size;
287
+ $ams-paragraph-small-line-height: $ams-text-level-6-line-height;
288
+ $ams-paragraph-small-font-size: $ams-text-level-6-font-size;
289
+ $ams-paragraph-inverse-color: $ams-color-primary-white;
290
+ $ams-paragraph-font-weight: $ams-text-font-weight-normal;
291
+ $ams-paragraph-font-family: $ams-text-font-family;
292
+ $ams-paragraph-color: $ams-color-primary-black;
293
+ $ams-pagination-button-hover-text-decoration-line: $ams-link-appearance-subtle-hover-text-decoration-line;
294
+ $ams-pagination-button-current-font-weight: $ams-text-font-weight-bold;
295
+ $ams-pagination-button-text-underline-offset: $ams-link-appearance-text-underline-offset;
296
+ $ams-pagination-button-text-decoration-thickness: $ams-link-appearance-text-decoration-thickness;
297
+ $ams-pagination-button-text-decoration-line: $ams-link-appearance-subtle-text-decoration-line;
298
+ $ams-pagination-button-padding-inline: $ams-space-inside-sm;
299
+ $ams-pagination-button-outline-offset: $ams-focus-outline-offset;
300
+ $ams-pagination-line-height: $ams-text-level-5-line-height;
301
+ $ams-pagination-font-weight: $ams-text-font-weight-normal;
302
+ $ams-pagination-font-size: $ams-text-level-5-font-size;
303
+ $ams-pagination-font-family: $ams-text-font-family;
304
+ $ams-page-menu-item-hover-text-decoration-line: $ams-link-appearance-subtle-hover-text-decoration-line;
305
+ $ams-page-menu-item-text-underline-offset: $ams-link-appearance-text-underline-offset;
306
+ $ams-page-menu-item-text-decoration-thickness: $ams-link-appearance-text-decoration-thickness;
307
+ $ams-page-menu-item-text-decoration-line: $ams-link-appearance-subtle-text-decoration-line;
308
+ $ams-page-menu-item-outline-offset: $ams-focus-outline-offset;
309
+ $ams-page-menu-item-line-height: $ams-text-level-6-line-height;
310
+ $ams-page-menu-item-font-weight: $ams-text-font-weight-normal;
311
+ $ams-page-menu-item-font-size: $ams-text-level-6-font-size;
312
+ $ams-page-menu-item-font-family: $ams-text-font-family;
313
+ $ams-page-heading-line-height: $ams-text-level-0-font-size;
314
+ $ams-page-heading-inverse-color: $ams-color-primary-white;
315
+ $ams-page-heading-font-weight: $ams-text-font-weight-bold;
316
+ $ams-page-heading-font-size: $ams-text-level-0-font-size;
317
+ $ams-page-heading-font-family: $ams-text-font-family;
318
+ $ams-page-heading-color: $ams-color-primary-black;
319
+ $ams-ordered-list-line-height: $ams-text-level-5-line-height;
320
+ $ams-ordered-list-inverse-color: $ams-color-primary-white;
321
+ $ams-ordered-list-font-weight: $ams-text-font-weight-normal;
322
+ $ams-ordered-list-font-size: $ams-text-level-5-font-size;
323
+ $ams-ordered-list-font-family: $ams-text-font-family;
324
+ $ams-ordered-list-color: $ams-color-primary-black;
325
+ $ams-mega-menu-list-category-padding-block-end: $ams-space-grid-md; // Must have the same value as `ams.grid.row-gap.md`.
326
+ $ams-mega-menu-list-category-column-gap: $ams-space-grid-md; // Must have the same value as `ams.grid.column-gap`.
327
+ $ams-mark-background-color: $ams-color-yellow;
328
+ $ams-margin-xl: $ams-space-grid-xl;
329
+ $ams-margin-lg: $ams-space-grid-lg;
330
+ $ams-margin-md: $ams-space-grid-md;
331
+ $ams-margin-sm: $ams-space-grid-sm;
332
+ $ams-margin-xs: $ams-space-grid-xs;
333
+ $ams-logo-subsite-color: $ams-color-primary-black;
334
+ $ams-logo-title-color: $ams-color-primary-red;
335
+ $ams-logo-emblem-color: $ams-color-primary-red;
336
+ $ams-link-standalone-hover-text-underline-offset: $ams-link-appearance-regular-hover-text-underline-offset;
337
+ $ams-link-standalone-hover-text-decoration-thickness: $ams-link-appearance-regular-hover-text-decoration-thickness;
338
+ $ams-link-standalone-text-underline-offset: $ams-link-appearance-text-underline-offset;
339
+ $ams-link-standalone-text-decoration-thickness: $ams-link-appearance-text-decoration-thickness;
340
+ $ams-link-standalone-text-decoration-line: $ams-link-appearance-regular-text-decoration-line;
341
+ $ams-link-standalone-line-height: $ams-text-level-5-line-height;
342
+ $ams-link-standalone-font-size: $ams-text-level-5-font-size;
343
+ $ams-link-inline-visited-color: $ams-color-purple;
344
+ $ams-link-inline-hover-text-underline-offset: $ams-link-appearance-regular-hover-text-underline-offset;
345
+ $ams-link-inline-hover-text-decoration-thickness: $ams-link-appearance-regular-hover-text-decoration-thickness;
346
+ $ams-link-inline-text-underline-offset: $ams-link-appearance-text-underline-offset;
347
+ $ams-link-inline-text-decoration-thickness: $ams-link-appearance-text-decoration-thickness;
348
+ $ams-link-inline-text-decoration-line: $ams-link-appearance-regular-text-decoration-line;
349
+ $ams-link-outline-offset: $ams-focus-outline-offset;
350
+ $ams-link-font-weight: $ams-text-font-weight-normal;
351
+ $ams-link-font-family: $ams-text-font-family;
352
+ $ams-link-list-link-hover-text-decoration-line: $ams-link-appearance-subtle-hover-text-decoration-line;
353
+ $ams-link-list-link-large-line-height: $ams-text-level-4-line-height;
354
+ $ams-link-list-link-large-font-size: $ams-text-level-4-font-size;
355
+ $ams-link-list-link-medium-line-height: $ams-text-level-5-line-height;
356
+ $ams-link-list-link-medium-font-size: $ams-text-level-5-font-size;
357
+ $ams-link-list-link-small-line-height: $ams-text-level-6-line-height;
358
+ $ams-link-list-link-small-font-size: $ams-text-level-6-font-size;
359
+ $ams-link-list-link-text-underline-offset: $ams-link-appearance-text-underline-offset;
360
+ $ams-link-list-link-text-decoration-thickness: $ams-link-appearance-text-decoration-thickness;
361
+ $ams-link-list-link-text-decoration-line: $ams-link-appearance-subtle-text-decoration-line;
362
+ $ams-link-list-link-outline-offset: $ams-focus-outline-offset;
363
+ $ams-link-list-link-font-weight: $ams-text-font-weight-normal;
364
+ $ams-link-list-link-font-family: $ams-text-font-family;
365
+ $ams-icon-size-6-line-height: $ams-text-level-6-line-height;
366
+ $ams-icon-size-6-font-size: $ams-text-level-6-font-size;
367
+ $ams-icon-size-5-line-height: $ams-text-level-5-line-height;
368
+ $ams-icon-size-5-font-size: $ams-text-level-5-font-size;
369
+ $ams-icon-size-4-line-height: $ams-text-level-4-line-height;
370
+ $ams-icon-size-4-font-size: $ams-text-level-4-font-size;
371
+ $ams-icon-size-3-line-height: $ams-text-level-3-line-height;
372
+ $ams-icon-size-3-font-size: $ams-text-level-3-font-size;
373
+ $ams-icon-button-on-background-dark-disabled-background-color: $ams-color-neutral-grey2;
374
+ $ams-icon-button-on-background-dark-disabled-color: $ams-color-primary-white;
375
+ $ams-icon-button-on-background-dark-hover-color: $ams-color-primary-white;
376
+ $ams-icon-button-on-background-dark-hover-background-color: $ams-color-dark-blue;
377
+ $ams-icon-button-on-background-dark-color: $ams-color-primary-white;
378
+ $ams-icon-button-on-background-dark-background-color: $ams-color-primary-blue;
379
+ $ams-icon-button-on-background-light-disabled-color: $ams-color-neutral-grey2;
380
+ $ams-icon-button-on-background-light-hover-color: $ams-color-primary-black;
381
+ $ams-icon-button-on-background-light-color: $ams-color-primary-black;
382
+ $ams-icon-button-disabled-color: $ams-color-neutral-grey2;
383
+ $ams-icon-button-hover-color: $ams-color-dark-blue;
384
+ $ams-icon-button-outline-offset: $ams-focus-outline-offset;
385
+ $ams-icon-button-color: $ams-color-primary-blue;
386
+ $ams-heading-level-6-line-height: $ams-text-level-6-line-height;
387
+ $ams-heading-level-6-font-size: $ams-text-level-6-font-size;
388
+ $ams-heading-level-5-line-height: $ams-text-level-5-line-height;
389
+ $ams-heading-level-5-font-size: $ams-text-level-5-font-size;
390
+ $ams-heading-level-4-line-height: $ams-text-level-4-line-height;
391
+ $ams-heading-level-4-font-size: $ams-text-level-4-font-size;
392
+ $ams-heading-level-3-line-height: $ams-text-level-3-line-height;
393
+ $ams-heading-level-3-font-size: $ams-text-level-3-font-size;
394
+ $ams-heading-level-2-line-height: $ams-text-level-2-line-height;
395
+ $ams-heading-level-2-font-size: $ams-text-level-2-font-size;
396
+ $ams-heading-level-1-line-height: $ams-text-level-1-line-height;
397
+ $ams-heading-level-1-font-size: $ams-text-level-1-font-size;
398
+ $ams-heading-inverse-color: $ams-color-primary-white;
399
+ $ams-heading-font-weight: $ams-text-font-weight-bold;
400
+ $ams-heading-font-family: $ams-text-font-family;
401
+ $ams-heading-color: $ams-color-primary-black;
402
+ $ams-header-logo-link-outline-offset: $ams-focus-outline-offset;
403
+ $ams-header-padding-block: $ams-space-inside-md;
404
+ $ams-header-column-gap: $ams-space-grid-md; // Must have the same value as `ams.grid.column-gap`.
405
+ $ams-grid-row-gap-lg: $ams-space-grid-lg;
406
+ $ams-grid-row-gap-md: $ams-space-grid-md;
407
+ $ams-grid-row-gap-sm: $ams-space-grid-sm;
408
+ $ams-grid-padding-inline: $ams-space-grid-lg;
409
+ $ams-grid-padding-block-lg: $ams-space-grid-lg;
410
+ $ams-grid-padding-block-md: $ams-space-grid-md;
411
+ $ams-grid-padding-block-sm: $ams-space-grid-sm;
412
+ $ams-grid-column-gap: $ams-space-grid-md;
413
+ $ams-gap-xl: $ams-space-grid-xl;
414
+ $ams-gap-lg: $ams-space-grid-lg;
415
+ $ams-gap-md: $ams-space-grid-md;
416
+ $ams-gap-sm: $ams-space-grid-sm;
417
+ $ams-gap-xs: $ams-space-grid-xs;
418
+ $ams-form-label-line-height: $ams-text-level-4-line-height;
419
+ $ams-form-label-font-weight: $ams-text-font-weight-bold;
420
+ $ams-form-label-font-size: $ams-text-level-4-font-size;
421
+ $ams-form-label-font-family: $ams-text-font-family;
422
+ $ams-form-label-color: $ams-color-primary-black;
423
+ $ams-fieldset-legend-line-height: $ams-text-level-4-line-height;
424
+ $ams-fieldset-legend-font-weight: $ams-text-font-weight-bold;
425
+ $ams-fieldset-legend-font-size: $ams-text-level-4-font-size;
426
+ $ams-fieldset-legend-font-family: $ams-text-font-family;
427
+ $ams-fieldset-legend-color: $ams-color-primary-black;
428
+ $ams-dialog-title-line-height: $ams-text-level-5-line-height;
429
+ $ams-dialog-title-font-weight: $ams-text-font-weight-bold;
430
+ $ams-dialog-title-font-size: $ams-text-level-5-font-size;
431
+ $ams-dialog-title-font-family: $ams-text-font-family;
432
+ $ams-dialog-title-color: $ams-color-primary-black;
433
+ $ams-dialog-background-color: $ams-color-primary-white;
434
+ $ams-column-gap-xl: $ams-space-grid-xl;
435
+ $ams-column-gap-lg: $ams-space-grid-lg;
436
+ $ams-column-gap-md: $ams-space-grid-md;
437
+ $ams-column-gap-sm: $ams-space-grid-sm;
438
+ $ams-column-gap-xs: $ams-space-grid-xs;
439
+ $ams-checkbox-hover-color: $ams-color-dark-blue;
440
+ $ams-checkbox-disabled-color: $ams-color-neutral-grey3;
441
+ $ams-checkbox-checkmark-indeterminate-hover-background-color: $ams-color-dark-blue;
442
+ $ams-checkbox-checkmark-indeterminate-background-color: $ams-color-primary-blue;
443
+ $ams-checkbox-checkmark-invalid-indeterminate-hover-background-color: $ams-color-primary-red;
444
+ $ams-checkbox-checkmark-invalid-indeterminate-background-color: $ams-color-primary-red;
445
+ $ams-checkbox-checkmark-invalid-hover-border-color: $ams-color-primary-red;
446
+ $ams-checkbox-checkmark-invalid-checked-hover-background-color: $ams-color-primary-red;
447
+ $ams-checkbox-checkmark-invalid-checked-background-color: $ams-color-primary-red;
448
+ $ams-checkbox-checkmark-invalid-border-color: $ams-color-primary-red;
449
+ $ams-checkbox-checkmark-hover-border-color: $ams-color-dark-blue;
450
+ $ams-checkbox-checkmark-disabled-indeterminate-hover-background-color: $ams-color-neutral-grey3;
451
+ $ams-checkbox-checkmark-disabled-indeterminate-background-color: $ams-color-neutral-grey3;
452
+ $ams-checkbox-checkmark-disabled-checked-hover-background-color: $ams-color-neutral-grey3;
453
+ $ams-checkbox-checkmark-disabled-checked-background-color: $ams-color-neutral-grey3;
454
+ $ams-checkbox-checkmark-disabled-border-color: $ams-color-neutral-grey3;
455
+ $ams-checkbox-checkmark-checked-hover-background-color: $ams-color-dark-blue;
456
+ $ams-checkbox-checkmark-checked-background-color: $ams-color-primary-blue;
457
+ $ams-checkbox-checkmark-border-color: $ams-color-primary-blue;
458
+ $ams-checkbox-outline-offset: $ams-focus-outline-offset;
459
+ $ams-checkbox-line-height: $ams-text-level-5-line-height;
460
+ $ams-checkbox-font-weight: $ams-text-font-weight-normal;
461
+ $ams-checkbox-font-size: $ams-text-level-5-font-size;
462
+ $ams-checkbox-font-family: $ams-text-font-family;
463
+ $ams-checkbox-color: $ams-color-primary-black;
464
+ $ams-card-outline-offset: $ams-focus-outline-offset;
465
+ $ams-card-link-hover-text-decoration-line: $ams-link-appearance-subtle-hover-text-decoration-line;
466
+ $ams-card-link-text-underline-offset: $ams-link-appearance-text-underline-offset;
467
+ $ams-card-link-text-decoration-thickness: $ams-link-appearance-text-decoration-thickness;
468
+ $ams-card-link-text-decoration-line: $ams-link-appearance-subtle-text-decoration-line;
469
+ $ams-button-tertiary-disabled-color: $ams-color-neutral-grey2;
470
+ $ams-button-tertiary-hover-color: $ams-color-dark-blue;
471
+ $ams-button-tertiary-hover-box-shadow: inset 0 0 0 2px $ams-color-dark-blue;
472
+ $ams-button-tertiary-color: $ams-color-primary-blue;
473
+ $ams-button-secondary-focus-box-shadow: inset 0 0 0 2px $ams-color-primary-blue;
474
+ $ams-button-secondary-disabled-color: $ams-color-neutral-grey2;
475
+ $ams-button-secondary-disabled-box-shadow: inset 0 0 0 2px $ams-color-neutral-grey2;
476
+ $ams-button-secondary-disabled-background-color: $ams-color-primary-white;
477
+ $ams-button-secondary-hover-color: $ams-color-dark-blue;
478
+ $ams-button-secondary-hover-box-shadow: inset 0 0 0 3px $ams-color-dark-blue;
479
+ $ams-button-secondary-box-shadow: inset 0 0 0 2px $ams-color-primary-blue;
480
+ $ams-button-secondary-color: $ams-color-primary-blue;
481
+ $ams-button-secondary-background-color: $ams-color-primary-white;
482
+ $ams-button-primary-hover-box-shadow: inset 0 0 0 2px $ams-color-dark-blue;
483
+ $ams-button-primary-hover-background-color: $ams-color-dark-blue;
484
+ $ams-button-primary-disabled-box-shadow: inset 0 0 0 2px $ams-color-neutral-grey2;
485
+ $ams-button-primary-disabled-background-color: $ams-color-neutral-grey2;
486
+ $ams-button-primary-color: $ams-color-primary-white;
487
+ $ams-button-primary-box-shadow: inset 0 0 0 2px $ams-color-primary-blue;
488
+ $ams-button-primary-background-color: $ams-color-primary-blue;
489
+ $ams-button-disabled-cursor: $ams-action-disabled-cursor;
490
+ $ams-button-outline-offset: $ams-focus-outline-offset;
491
+ $ams-button-padding-inline: $ams-space-inside-md;
492
+ $ams-button-padding-block: $ams-space-inside-xs;
493
+ $ams-button-line-height: $ams-text-level-5-line-height;
494
+ $ams-button-font-size: $ams-text-level-5-font-size;
495
+ $ams-button-font-family: $ams-text-font-family;
496
+ $ams-button-cursor: $ams-action-activate-cursor;
497
+ $ams-breadcrumb-item-link-hover-text-decoration-line: $ams-link-appearance-subtle-hover-text-decoration-line;
498
+ $ams-breadcrumb-item-link-hover-color: $ams-color-dark-blue;
499
+ $ams-breadcrumb-item-link-text-underline-offset: $ams-link-appearance-text-underline-offset;
500
+ $ams-breadcrumb-item-link-text-decoration-thickness: $ams-link-appearance-text-decoration-thickness;
501
+ $ams-breadcrumb-item-link-text-decoration-line: $ams-link-appearance-subtle-text-decoration-line;
502
+ $ams-breadcrumb-item-link-outline-offset: $ams-focus-outline-offset;
503
+ $ams-breadcrumb-line-height: $ams-text-level-6-line-height;
504
+ $ams-breadcrumb-font-weight: $ams-text-font-weight-normal;
505
+ $ams-breadcrumb-font-size: $ams-text-level-6-font-size;
506
+ $ams-breadcrumb-font-family: $ams-text-font-family;
507
+ $ams-blockquote-inverse-color: $ams-color-primary-white;
508
+ $ams-blockquote-line-height: $ams-text-level-3-line-height;
509
+ $ams-blockquote-font-weight: $ams-text-font-weight-bold;
510
+ $ams-blockquote-font-size: $ams-text-level-3-font-size;
511
+ $ams-blockquote-font-family: $ams-text-font-family;
512
+ $ams-blockquote-color: $ams-color-primary-black;
513
+ $ams-badge-yellow-color: $ams-color-primary-black;
514
+ $ams-badge-yellow-background-color: $ams-color-yellow;
515
+ $ams-badge-purple-color: $ams-color-primary-white;
516
+ $ams-badge-purple-background-color: $ams-color-purple;
517
+ $ams-badge-orange-color: $ams-color-primary-black;
518
+ $ams-badge-orange-background-color: $ams-color-orange;
519
+ $ams-badge-magenta-color: $ams-color-primary-white;
520
+ $ams-badge-magenta-background-color: $ams-color-magenta;
521
+ $ams-badge-green-color: $ams-color-primary-black;
522
+ $ams-badge-green-background-color: $ams-color-green;
523
+ $ams-badge-dark-green-color: $ams-color-primary-white;
524
+ $ams-badge-dark-green-background-color: $ams-color-dark-green;
525
+ $ams-badge-dark-blue-color: $ams-color-primary-white;
526
+ $ams-badge-dark-blue-background-color: $ams-color-primary-blue;
527
+ $ams-badge-blue-color: $ams-color-primary-black;
528
+ $ams-badge-blue-background-color: $ams-color-blue;
529
+ $ams-badge-padding-inline: $ams-space-inside-xs;
530
+ $ams-badge-line-height: $ams-text-level-5-line-height;
531
+ $ams-badge-font-weight: $ams-text-font-weight-bold;
532
+ $ams-badge-font-size: $ams-text-level-5-font-size;
533
+ $ams-badge-font-family: $ams-text-font-family;
534
+ $ams-aspect-ratio-2x-wide: $ams-proportion-2x-wide;
535
+ $ams-aspect-ratio-x-wide: $ams-proportion-x-wide;
536
+ $ams-aspect-ratio-wide: $ams-proportion-wide;
537
+ $ams-aspect-ratio-square: $ams-proportion-square;
538
+ $ams-aspect-ratio-tall: $ams-proportion-tall;
539
+ $ams-aspect-ratio-x-tall: $ams-proportion-x-tall;
540
+ $ams-alert-close-hover-fill: $ams-color-primary-blue;
541
+ $ams-alert-close-fill: $ams-color-primary-black;
542
+ $ams-alert-warning-border-color: $ams-color-orange;
543
+ $ams-alert-success-border-color: $ams-color-dark-green;
544
+ $ams-alert-info-border-color: $ams-color-primary-blue;
545
+ $ams-alert-error-border-color: $ams-color-primary-red;
546
+ $ams-alert-padding-inline: $ams-space-inside-lg;
547
+ $ams-alert-padding-block: $ams-space-inside-md;
548
+ $ams-accordion-panel-padding-inline: $ams-space-inside-md;
549
+ $ams-accordion-panel-padding-block: $ams-space-inside-md;
550
+ $ams-accordion-button-hover-box-shadow: inset 0 0 0 2px $ams-color-neutral-grey3;
551
+ $ams-accordion-button-focus-outline-offset: $ams-focus-outline-offset;
552
+ $ams-accordion-button-padding-inline: $ams-space-inside-md;
553
+ $ams-accordion-button-padding-block: $ams-space-inside-sm;
554
+ $ams-accordion-button-line-height: $ams-text-level-5-line-height;
555
+ $ams-accordion-button-font-weight: $ams-text-font-weight-bold;
556
+ $ams-accordion-button-font-size: $ams-text-level-5-font-size;
557
+ $ams-accordion-button-font-family: $ams-text-font-family;
558
+ $ams-accordion-button-color: $ams-color-primary-blue;
559
+ $ams-link-appearance-on-background-light-color: $ams-color-primary-black;
560
+ $ams-link-appearance-on-background-dark-color: $ams-color-primary-white;
561
+ $ams-link-appearance-hover-color: $ams-color-dark-blue;
562
+ $ams-link-appearance-color: $ams-color-primary-blue;
563
+ $ams-top-task-link-label-color: $ams-link-appearance-color;
564
+ $ams-pagination-button-hover-color: $ams-link-appearance-hover-color;
565
+ $ams-pagination-color: $ams-link-appearance-color;
566
+ $ams-page-menu-item-hover-color: $ams-link-appearance-hover-color;
567
+ $ams-page-menu-item-color: $ams-link-appearance-color;
568
+ $ams-link-on-background-light-visited-color: $ams-link-appearance-on-background-light-color;
569
+ $ams-link-on-background-light-hover-color: $ams-link-appearance-on-background-light-color;
570
+ $ams-link-on-background-light-color: $ams-link-appearance-on-background-light-color;
571
+ $ams-link-on-background-dark-visited-color: $ams-link-appearance-on-background-dark-color;
572
+ $ams-link-on-background-dark-hover-color: $ams-link-appearance-on-background-dark-color;
573
+ $ams-link-on-background-dark-color: $ams-link-appearance-on-background-dark-color;
574
+ $ams-link-hover-color: $ams-link-appearance-hover-color;
575
+ $ams-link-color: $ams-link-appearance-color;
576
+ $ams-link-list-link-on-background-light-hover-color: $ams-link-appearance-on-background-light-color;
577
+ $ams-link-list-link-on-background-light-color: $ams-link-appearance-on-background-light-color;
578
+ $ams-link-list-link-on-background-dark-hover-color: $ams-link-appearance-on-background-dark-color;
579
+ $ams-link-list-link-on-background-dark-color: $ams-link-appearance-on-background-dark-color;
580
+ $ams-link-list-link-hover-color: $ams-link-appearance-hover-color;
581
+ $ams-link-list-link-color: $ams-link-appearance-color;
582
+ $ams-card-link-hover-color: $ams-link-appearance-hover-color;
583
+ $ams-card-link-color: $ams-link-appearance-color;
584
+ $ams-breadcrumb-item-link-color: $ams-link-appearance-color;