@amsterdam/design-system-tokens 0.6.1 → 0.7.1

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