@amsterdam/design-system-tokens 0.1.6 → 0.1.7
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.
- package/dist/_variables.scss +72 -36
- package/dist/index.css +72 -36
- package/dist/index.d.ts +60 -20
- package/dist/index.js +71 -35
- package/dist/index.json +70 -34
- package/dist/index.tokens.json +130 -37
- package/dist/root.css +72 -36
- package/dist/tokens.d.ts +116 -23
- package/dist/tokens.js +1094 -293
- package/dist/variables.less +72 -36
- package/package.json +3 -3
- package/src/brand/amsterdam/color.tokens.json +1 -1
- package/src/brand/amsterdam/proportion.tokens.json +3 -2
- package/src/components/amsterdam/aspect-ratio.tokens.json +3 -2
- package/src/components/amsterdam/breadcrumb.tokens.json +3 -0
- package/src/components/amsterdam/button.tokens.json +1 -9
- package/src/components/amsterdam/card.tokens.json +13 -0
- package/src/components/amsterdam/grid.tokens.json +39 -0
- package/src/components/amsterdam/highlight.tokens.json +46 -0
- package/src/components/amsterdam/link.tokens.json +5 -4
- package/src/components/amsterdam/pagination.tokens.json +31 -0
- package/src/components/amsterdam/screen.tokens.json +12 -0
- package/src/components/amsterdam/switch.tokens.json +44 -0
- package/src/components/amsterdam/top-task-link.tokens.json +42 -14
- package/src/components/utrecht/button.tokens.json +1 -3
- package/src/components/amsterdam/page-grid.tokens.json +0 -20
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Fri, 17 Nov 2023 13:11:47 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
export const amsterdamColorPrimaryBlack : string;
|
|
@@ -19,11 +19,12 @@ export const amsterdamColorNeutralGrey1 : string;
|
|
|
19
19
|
export const amsterdamColorNeutralGrey2 : string;
|
|
20
20
|
export const amsterdamColorNeutralGrey3 : string;
|
|
21
21
|
export const amsterdamColorNeutralGrey4 : string;
|
|
22
|
-
export const
|
|
22
|
+
export const amsterdamProportionXTall : string;
|
|
23
23
|
export const amsterdamProportionTall : string;
|
|
24
24
|
export const amsterdamProportionSquare : string;
|
|
25
25
|
export const amsterdamProportionWide : string;
|
|
26
|
-
export const
|
|
26
|
+
export const amsterdamProportionXWide : string;
|
|
27
|
+
export const amsterdamProportion2xWide : string;
|
|
27
28
|
export const amsterdamTypographyFontFamily : string;
|
|
28
29
|
export const amsterdamTypographyFontWeightNormal : number;
|
|
29
30
|
export const amsterdamTypographyFontWeightBold : number;
|
|
@@ -87,11 +88,12 @@ export const amsterdamAlertSuccessBorderColor : string;
|
|
|
87
88
|
export const amsterdamAlertCloseBackgroundColor : string;
|
|
88
89
|
export const amsterdamAlertCloseFill : string;
|
|
89
90
|
export const amsterdamAlertCloseHoverFill : string;
|
|
90
|
-
export const
|
|
91
|
+
export const amsterdamAspectRatioXTall : string;
|
|
91
92
|
export const amsterdamAspectRatioTall : string;
|
|
92
93
|
export const amsterdamAspectRatioSquare : string;
|
|
93
94
|
export const amsterdamAspectRatioWide : string;
|
|
94
|
-
export const
|
|
95
|
+
export const amsterdamAspectRatioXWide : string;
|
|
96
|
+
export const amsterdamAspectRatio2xWide : string;
|
|
95
97
|
export const amsterdamBlockquoteColor : string;
|
|
96
98
|
export const amsterdamBlockquoteFontFamily : string;
|
|
97
99
|
export const amsterdamBlockquoteFontWeight : number;
|
|
@@ -101,6 +103,7 @@ export const amsterdamBlockquoteNarrowFontSize : string;
|
|
|
101
103
|
export const amsterdamBlockquoteWideFontSize : string;
|
|
102
104
|
export const amsterdamBreadcrumbColor : string;
|
|
103
105
|
export const amsterdamBreadcrumbFontFamily : string;
|
|
106
|
+
export const amsterdamBreadcrumbFontWeight : number;
|
|
104
107
|
export const amsterdamBreadcrumbLineHeight : string;
|
|
105
108
|
export const amsterdamBreadcrumbNarrowFontSize : string;
|
|
106
109
|
export const amsterdamBreadcrumbWideFontSize : string;
|
|
@@ -115,9 +118,10 @@ export const amsterdamButtonSecondaryBoxShadow : string;
|
|
|
115
118
|
export const amsterdamButtonSecondaryHoverBoxShadow : string;
|
|
116
119
|
export const amsterdamButtonSecondaryDisabledBoxShadow : string;
|
|
117
120
|
export const amsterdamButtonSecondaryFocusBoxShadow : string;
|
|
118
|
-
export const amsterdamButtonSecondaryFocusColor : string;
|
|
119
121
|
export const amsterdamButtonTertiaryHoverBoxShadow : string;
|
|
120
|
-
export const
|
|
122
|
+
export const amsterdamCardLinkColor : string;
|
|
123
|
+
export const amsterdamCardLinkHoverColor : string;
|
|
124
|
+
export const amsterdamCardOutlineOffset : string;
|
|
121
125
|
export const amsterdamCheckboxColor : string;
|
|
122
126
|
export const amsterdamCheckboxCheckmarkBorderColor : string;
|
|
123
127
|
export const amsterdamCheckboxCheckmarkCheckedBackgroundColor : string;
|
|
@@ -154,6 +158,17 @@ export const amsterdamFormLabelFontWeight : number;
|
|
|
154
158
|
export const amsterdamFormLabelLineHeight : string;
|
|
155
159
|
export const amsterdamFormLabelNarrowFontSize : string;
|
|
156
160
|
export const amsterdamFormLabelWideFontSize : string;
|
|
161
|
+
export const amsterdamGridColumnCount : string;
|
|
162
|
+
/** Grows from 16px at 320px wide to 56px at 1600px wide. */
|
|
163
|
+
export const amsterdamGridDensityLowGap : string;
|
|
164
|
+
/** Equals 1.5 times the gap. */
|
|
165
|
+
export const amsterdamGridDensityLowPaddingInline : string;
|
|
166
|
+
/** Grows from 16px at 1088px wide to 40px at 2624px wide. */
|
|
167
|
+
export const amsterdamGridDensityHighGap : string;
|
|
168
|
+
/** Equals the gap. */
|
|
169
|
+
export const amsterdamGridDensityHighPaddingInline : string;
|
|
170
|
+
export const amsterdamGridMediumColumnCount : string;
|
|
171
|
+
export const amsterdamGridWideColumnCount : string;
|
|
157
172
|
export const amsterdamHeading1LineHeight : string;
|
|
158
173
|
export const amsterdamHeading1NarrowFontSize : string;
|
|
159
174
|
export const amsterdamHeading1WideFontSize : string;
|
|
@@ -170,6 +185,14 @@ export const amsterdamHeadingColor : string;
|
|
|
170
185
|
export const amsterdamHeadingFontFamily : string;
|
|
171
186
|
export const amsterdamHeadingFontWeight : number;
|
|
172
187
|
export const amsterdamHeadingInverseColor : string;
|
|
188
|
+
export const amsterdamHighlightBlueBackgroundColor : string;
|
|
189
|
+
export const amsterdamHighlightDarkGreenBackgroundColor : string;
|
|
190
|
+
export const amsterdamHighlightGreenBackgroundColor : string;
|
|
191
|
+
export const amsterdamHighlightLightBlueBackgroundColor : string;
|
|
192
|
+
export const amsterdamHighlightMagentaBackgroundColor : string;
|
|
193
|
+
export const amsterdamHighlightOrangeBackgroundColor : string;
|
|
194
|
+
export const amsterdamHighlightPurpleBackgroundColor : string;
|
|
195
|
+
export const amsterdamHighlightYellowBackgroundColor : string;
|
|
173
196
|
export const amsterdamIconSize3IconSizeNarrow : string;
|
|
174
197
|
export const amsterdamIconSize3IconSizeWide : string;
|
|
175
198
|
export const amsterdamIconSize3ContainerMultiplier : string;
|
|
@@ -189,26 +212,27 @@ export const amsterdamLinkColor : string;
|
|
|
189
212
|
export const amsterdamLinkOutlineOffset : string;
|
|
190
213
|
export const amsterdamLinkFontFamily : string;
|
|
191
214
|
export const amsterdamLinkFontWeight : number;
|
|
192
|
-
export const
|
|
193
|
-
export const
|
|
194
|
-
export const
|
|
215
|
+
export const amsterdamLinkHoverColor : string;
|
|
216
|
+
export const amsterdamLinkInlineHoverTextDecoration : string;
|
|
217
|
+
export const amsterdamLinkInlineHoverTextUnderlineOffset : string;
|
|
195
218
|
export const amsterdamLinkInlineFontFamily : string;
|
|
196
219
|
export const amsterdamLinkInlineFontSize : string;
|
|
197
220
|
export const amsterdamLinkInlineLineHeight : string;
|
|
198
221
|
export const amsterdamLinkInlineTextDecoration : string;
|
|
222
|
+
export const amsterdamLinkInlineTextDecorationThickness : string;
|
|
199
223
|
export const amsterdamLinkInlineVisitedColor : string;
|
|
200
224
|
export const amsterdamLinkInListGap : string;
|
|
201
|
-
export const
|
|
202
|
-
export const
|
|
203
|
-
export const
|
|
225
|
+
export const amsterdamLinkInListHoverTextDecoration : string;
|
|
226
|
+
export const amsterdamLinkInListHoverTextDecorationThickness : string;
|
|
227
|
+
export const amsterdamLinkInListHoverTextUnderlineOffset : string;
|
|
204
228
|
export const amsterdamLinkInListTextDecoration : string;
|
|
205
229
|
export const amsterdamLinkInListLineHeight : string;
|
|
206
230
|
export const amsterdamLinkInListNarrowFontSize : string;
|
|
207
231
|
export const amsterdamLinkInListWideFontSize : string;
|
|
208
232
|
export const amsterdamLinkStandaloneTextUnderlineOffset : string;
|
|
209
233
|
export const amsterdamLinkStandaloneTextDecorationThickness : string;
|
|
210
|
-
export const
|
|
211
|
-
export const
|
|
234
|
+
export const amsterdamLinkStandaloneHoverTextDecorationThickness : string;
|
|
235
|
+
export const amsterdamLinkStandaloneHoverTextUnderlineOffset : string;
|
|
212
236
|
export const amsterdamLinkStandaloneLineHeight : string;
|
|
213
237
|
export const amsterdamLinkStandaloneNarrowFontSize : string;
|
|
214
238
|
export const amsterdamLinkStandaloneWideFontSize : string;
|
|
@@ -235,10 +259,6 @@ export const amsterdamOrderedListOrderedListListStyleType : string;
|
|
|
235
259
|
export const amsterdamOrderedListOrderedListItemMarginInlineStart : string;
|
|
236
260
|
/** The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem. */
|
|
237
261
|
export const amsterdamOrderedListOrderedListItemPaddingInlineStart : string;
|
|
238
|
-
export const amsterdamPageGridColumnCountNarrow : string;
|
|
239
|
-
export const amsterdamPageGridColumnCountWide : string;
|
|
240
|
-
export const amsterdamPageGridColumnGap : string;
|
|
241
|
-
export const amsterdamPageGridMaxWidth : string;
|
|
242
262
|
export const amsterdamPageHeadingColor : string;
|
|
243
263
|
export const amsterdamPageHeadingFontFamily : string;
|
|
244
264
|
export const amsterdamPageHeadingLineHeight : string;
|
|
@@ -258,6 +278,15 @@ export const amsterdamPageMenuItemNarrowFontSize : string;
|
|
|
258
278
|
export const amsterdamPageMenuItemWideFontSize : string;
|
|
259
279
|
export const amsterdamPageMenuItemHoverColor : string;
|
|
260
280
|
export const amsterdamPageMenuItemHoverTextDecoration : string;
|
|
281
|
+
export const amsterdamPaginationColor : string;
|
|
282
|
+
export const amsterdamPaginationFontFamily : string;
|
|
283
|
+
export const amsterdamPaginationFontWeight : number;
|
|
284
|
+
export const amsterdamPaginationLineHeight : string;
|
|
285
|
+
export const amsterdamPaginationNarrowFontSize : string;
|
|
286
|
+
export const amsterdamPaginationWideFontSize : string;
|
|
287
|
+
export const amsterdamPaginationButtonCurrentFontWeight : number;
|
|
288
|
+
export const amsterdamPaginationButtonHoverColor : string;
|
|
289
|
+
export const amsterdamPaginationButtonOutlineOffset : string;
|
|
261
290
|
export const amsterdamParagraphColor : string;
|
|
262
291
|
export const amsterdamParagraphFontFamily : string;
|
|
263
292
|
export const amsterdamParagraphFontWeight : number;
|
|
@@ -271,6 +300,18 @@ export const amsterdamParagraphSmallWideFontSize : string;
|
|
|
271
300
|
export const amsterdamParagraphLargeLineHeight : string;
|
|
272
301
|
export const amsterdamParagraphLargeNarrowFontSize : string;
|
|
273
302
|
export const amsterdamParagraphLargeWideFontSize : string;
|
|
303
|
+
export const amsterdamScreenWideMaxWidth : string;
|
|
304
|
+
export const amsterdamScreenXWideMaxWidth : string;
|
|
305
|
+
export const amsterdamSwitchFontFamily : string;
|
|
306
|
+
export const amsterdamSwitchBackgroundColor : string;
|
|
307
|
+
export const amsterdamSwitchWidth : string;
|
|
308
|
+
export const amsterdamSwitchThumbBackgroundColor : string;
|
|
309
|
+
export const amsterdamSwitchThumbWidth : string;
|
|
310
|
+
export const amsterdamSwitchThumbHeight : string;
|
|
311
|
+
export const amsterdamSwitchThumbHoverColor : string;
|
|
312
|
+
export const amsterdamSwitchCheckedBackgroundColor : string;
|
|
313
|
+
export const amsterdamSwitchOutlineOffset : string;
|
|
314
|
+
export const amsterdamSwitchDisabledBackgroundColor : string;
|
|
274
315
|
export const amsterdamTopTaskLinkDescriptionColor : string;
|
|
275
316
|
export const amsterdamTopTaskLinkDescriptionFontFamily : string;
|
|
276
317
|
export const amsterdamTopTaskLinkDescriptionFontWeight : number;
|
|
@@ -323,7 +364,6 @@ export const utrechtButtonPrimaryActionBackgroundColor : string;
|
|
|
323
364
|
export const utrechtButtonPrimaryActionColor : string;
|
|
324
365
|
export const utrechtButtonPrimaryActionDisabledBackgroundColor : string;
|
|
325
366
|
export const utrechtButtonPrimaryActionHoverBackgroundColor : string;
|
|
326
|
-
export const utrechtButtonPrimaryActionFocusBackgroundColor : string;
|
|
327
367
|
export const utrechtButtonSecondaryActionBackgroundColor : string;
|
|
328
368
|
export const utrechtButtonSecondaryActionColor : string;
|
|
329
369
|
export const utrechtButtonSecondaryActionHoverColor : string;
|
package/dist/index.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Fri, 17 Nov 2023 13:11:47 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
export const amsterdamColorPrimaryBlack = "#000000";
|
|
7
7
|
export const amsterdamColorPrimaryWhite = "#ffffff";
|
|
8
8
|
export const amsterdamColorPrimaryBlue = "#004699";
|
|
9
9
|
export const amsterdamColorPrimaryRed = "#EC0000";
|
|
10
|
-
export const amsterdamColorDarkBlue = "#
|
|
10
|
+
export const amsterdamColorDarkBlue = "#102E62";
|
|
11
11
|
export const amsterdamColorOrange = "#FF9100";
|
|
12
12
|
export const amsterdamColorYellow = "#FFE600";
|
|
13
13
|
export const amsterdamColorGreen = "#BED200";
|
|
@@ -19,11 +19,12 @@ export const amsterdamColorNeutralGrey1 = "#E6E6E6";
|
|
|
19
19
|
export const amsterdamColorNeutralGrey2 = "#B4B4B4";
|
|
20
20
|
export const amsterdamColorNeutralGrey3 = "#767676";
|
|
21
21
|
export const amsterdamColorNeutralGrey4 = "#323232";
|
|
22
|
-
export const
|
|
22
|
+
export const amsterdamProportionXTall = "9 / 16";
|
|
23
23
|
export const amsterdamProportionTall = "4 / 5";
|
|
24
24
|
export const amsterdamProportionSquare = "1 / 1";
|
|
25
25
|
export const amsterdamProportionWide = "5 / 4";
|
|
26
|
-
export const
|
|
26
|
+
export const amsterdamProportionXWide = "16 / 9";
|
|
27
|
+
export const amsterdamProportion2xWide = "32 / 9";
|
|
27
28
|
export const amsterdamTypographyFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
28
29
|
export const amsterdamTypographyFontWeightNormal = 400;
|
|
29
30
|
export const amsterdamTypographyFontWeightBold = 800;
|
|
@@ -87,11 +88,12 @@ export const amsterdamAlertSuccessBorderColor = "#00A03C";
|
|
|
87
88
|
export const amsterdamAlertCloseBackgroundColor = "transparent";
|
|
88
89
|
export const amsterdamAlertCloseFill = "#000000";
|
|
89
90
|
export const amsterdamAlertCloseHoverFill = "#004699";
|
|
90
|
-
export const
|
|
91
|
+
export const amsterdamAspectRatioXTall = "9 / 16";
|
|
91
92
|
export const amsterdamAspectRatioTall = "4 / 5";
|
|
92
93
|
export const amsterdamAspectRatioSquare = "1 / 1";
|
|
93
94
|
export const amsterdamAspectRatioWide = "5 / 4";
|
|
94
|
-
export const
|
|
95
|
+
export const amsterdamAspectRatioXWide = "16 / 9";
|
|
96
|
+
export const amsterdamAspectRatio2xWide = "32 / 9";
|
|
95
97
|
export const amsterdamBlockquoteColor = "#000000";
|
|
96
98
|
export const amsterdamBlockquoteFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
97
99
|
export const amsterdamBlockquoteFontWeight = 800;
|
|
@@ -101,33 +103,35 @@ export const amsterdamBlockquoteNarrowFontSize = "clamp(1.5rem, calc(1.5rem + (0
|
|
|
101
103
|
export const amsterdamBlockquoteWideFontSize = "clamp(1.8125rem, calc(1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625), 2rem)";
|
|
102
104
|
export const amsterdamBreadcrumbColor = "#004699";
|
|
103
105
|
export const amsterdamBreadcrumbFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
106
|
+
export const amsterdamBreadcrumbFontWeight = 400;
|
|
104
107
|
export const amsterdamBreadcrumbLineHeight = "1.6";
|
|
105
108
|
export const amsterdamBreadcrumbNarrowFontSize = "clamp(1rem, calc(1rem + (0.0625 * (100vw - 20rem)) / 33.3125), 1.0625rem)";
|
|
106
109
|
export const amsterdamBreadcrumbWideFontSize = "clamp(1.0625rem, calc(1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.125rem)";
|
|
107
110
|
export const amsterdamBreadcrumbItemLinkOutlineOffset = "2px";
|
|
108
|
-
export const amsterdamBreadcrumbItemLinkHoverColor = "#
|
|
109
|
-
export const amsterdamBreadcrumbItemLinkHoverBoxShadow = "inset 0 -2px 0 0 #
|
|
110
|
-
export const amsterdamBreadcrumbItemLinkFocusColor = "#
|
|
111
|
+
export const amsterdamBreadcrumbItemLinkHoverColor = "#102E62";
|
|
112
|
+
export const amsterdamBreadcrumbItemLinkHoverBoxShadow = "inset 0 -2px 0 0 #102E62";
|
|
113
|
+
export const amsterdamBreadcrumbItemLinkFocusColor = "#102E62";
|
|
111
114
|
export const amsterdamBreadcrumbItemLinkFocusTextDecoration = "underline";
|
|
112
115
|
export const amsterdamButtonNarrowFontSize = "clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)";
|
|
113
116
|
export const amsterdamButtonWideFontSize = "clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem)";
|
|
114
117
|
export const amsterdamButtonSecondaryBoxShadow = "inset 0 0 0 2px #004699";
|
|
115
|
-
export const amsterdamButtonSecondaryHoverBoxShadow = "inset 0 0 0 3px #
|
|
118
|
+
export const amsterdamButtonSecondaryHoverBoxShadow = "inset 0 0 0 3px #102E62";
|
|
116
119
|
export const amsterdamButtonSecondaryDisabledBoxShadow = "inset 0 0 0 2px #B4B4B4";
|
|
117
|
-
export const amsterdamButtonSecondaryFocusBoxShadow = "inset 0 0 0
|
|
118
|
-
export const amsterdamButtonSecondaryFocusColor = "#00387A";
|
|
120
|
+
export const amsterdamButtonSecondaryFocusBoxShadow = "inset 0 0 0 2px #004699";
|
|
119
121
|
export const amsterdamButtonTertiaryHoverBoxShadow = "inset 0 0 0 2px #767676";
|
|
120
|
-
export const
|
|
122
|
+
export const amsterdamCardLinkColor = "#004699";
|
|
123
|
+
export const amsterdamCardLinkHoverColor = "#102E62";
|
|
124
|
+
export const amsterdamCardOutlineOffset = "2px";
|
|
121
125
|
export const amsterdamCheckboxColor = "#000000";
|
|
122
126
|
export const amsterdamCheckboxCheckmarkBorderColor = "#004699";
|
|
123
127
|
export const amsterdamCheckboxCheckmarkCheckedBackgroundColor = "#004699";
|
|
124
|
-
export const amsterdamCheckboxCheckmarkCheckedHoverBackgroundColor = "#
|
|
128
|
+
export const amsterdamCheckboxCheckmarkCheckedHoverBackgroundColor = "#102E62";
|
|
125
129
|
export const amsterdamCheckboxCheckmarkDisabledBorderColor = "#767676";
|
|
126
130
|
export const amsterdamCheckboxCheckmarkDisabledCheckedBackgroundColor = "#767676";
|
|
127
131
|
export const amsterdamCheckboxCheckmarkDisabledCheckedHoverBackgroundColor = "#767676";
|
|
128
132
|
export const amsterdamCheckboxCheckmarkDisabledIndeterminateBackgroundColor = "#767676";
|
|
129
133
|
export const amsterdamCheckboxCheckmarkDisabledIndeterminateHoverBackgroundColor = "#767676";
|
|
130
|
-
export const amsterdamCheckboxCheckmarkHoverBorderColor = "#
|
|
134
|
+
export const amsterdamCheckboxCheckmarkHoverBorderColor = "#102E62";
|
|
131
135
|
export const amsterdamCheckboxCheckmarkInvalidBorderColor = "#EC0000";
|
|
132
136
|
export const amsterdamCheckboxCheckmarkInvalidCheckedBackgroundColor = "#EC0000";
|
|
133
137
|
export const amsterdamCheckboxCheckmarkInvalidCheckedHoverBackgroundColor = "#EC0000";
|
|
@@ -135,14 +139,14 @@ export const amsterdamCheckboxCheckmarkInvalidHoverBorderColor = "#EC0000";
|
|
|
135
139
|
export const amsterdamCheckboxCheckmarkInvalidIndeterminateBackgroundColor = "#EC0000";
|
|
136
140
|
export const amsterdamCheckboxCheckmarkInvalidIndeterminateHoverBackgroundColor = "#EC0000";
|
|
137
141
|
export const amsterdamCheckboxCheckmarkIndeterminateBackgroundColor = "#004699";
|
|
138
|
-
export const amsterdamCheckboxCheckmarkIndeterminateHoverBackgroundColor = "#
|
|
142
|
+
export const amsterdamCheckboxCheckmarkIndeterminateHoverBackgroundColor = "#102E62";
|
|
139
143
|
export const amsterdamCheckboxCheckmarkNarrowSize = "clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)";
|
|
140
144
|
export const amsterdamCheckboxCheckmarkWideSize = "clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem)";
|
|
141
145
|
export const amsterdamCheckboxCheckmarkMultiplier = "1.6";
|
|
142
146
|
export const amsterdamCheckboxDisabledColor = "#767676";
|
|
143
147
|
export const amsterdamCheckboxFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
144
148
|
export const amsterdamCheckboxFontWeight = 400;
|
|
145
|
-
export const amsterdamCheckboxHoverColor = "#
|
|
149
|
+
export const amsterdamCheckboxHoverColor = "#102E62";
|
|
146
150
|
export const amsterdamCheckboxOutlineOffset = "2px";
|
|
147
151
|
export const amsterdamCheckboxLineHeight = "1.6";
|
|
148
152
|
export const amsterdamCheckboxNarrowFontSize = "clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)";
|
|
@@ -154,6 +158,13 @@ export const amsterdamFormLabelFontWeight = 800;
|
|
|
154
158
|
export const amsterdamFormLabelLineHeight = "1.6";
|
|
155
159
|
export const amsterdamFormLabelNarrowFontSize = "clamp(1rem, calc(1rem + (0.0625 * (100vw - 20rem)) / 33.3125), 1.0625rem)";
|
|
156
160
|
export const amsterdamFormLabelWideFontSize = "clamp(1.0625rem, calc(1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.125rem)";
|
|
161
|
+
export const amsterdamGridColumnCount = "4";
|
|
162
|
+
export const amsterdamGridDensityLowGap = "clamp(1rem, 3.125vw + 0.375rem, 3.5rem)"; // Grows from 16px at 320px wide to 56px at 1600px wide.
|
|
163
|
+
export const amsterdamGridDensityLowPaddingInline = "clamp(1.5rem, 4.6875vw + 0.5625rem, 5.25rem)"; // Equals 1.5 times the gap.
|
|
164
|
+
export const amsterdamGridDensityHighGap = "clamp(1rem, 1.5625vw - 0.0625rem, 2.5rem)"; // Grows from 16px at 1088px wide to 40px at 2624px wide.
|
|
165
|
+
export const amsterdamGridDensityHighPaddingInline = "clamp(1rem, 1.5625vw - 0.0625rem, 2.5rem)"; // Equals the gap.
|
|
166
|
+
export const amsterdamGridMediumColumnCount = "8";
|
|
167
|
+
export const amsterdamGridWideColumnCount = "12";
|
|
157
168
|
export const amsterdamHeading1LineHeight = "1.2";
|
|
158
169
|
export const amsterdamHeading1NarrowFontSize = "clamp(2rem, calc(2rem + (1 * (100vw - 20rem)) / 33.3125), 3rem)";
|
|
159
170
|
export const amsterdamHeading1WideFontSize = "clamp(3rem, calc(3rem + (0.5 * (100vw - 53.375rem)) / 36.625), 3.5rem)";
|
|
@@ -170,6 +181,14 @@ export const amsterdamHeadingColor = "#000000";
|
|
|
170
181
|
export const amsterdamHeadingFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
171
182
|
export const amsterdamHeadingFontWeight = 800;
|
|
172
183
|
export const amsterdamHeadingInverseColor = "#ffffff";
|
|
184
|
+
export const amsterdamHighlightBlueBackgroundColor = "#004699";
|
|
185
|
+
export const amsterdamHighlightDarkGreenBackgroundColor = "#00A03C";
|
|
186
|
+
export const amsterdamHighlightGreenBackgroundColor = "#BED200";
|
|
187
|
+
export const amsterdamHighlightLightBlueBackgroundColor = "#009DEC";
|
|
188
|
+
export const amsterdamHighlightMagentaBackgroundColor = "#E50082";
|
|
189
|
+
export const amsterdamHighlightOrangeBackgroundColor = "#FF9100";
|
|
190
|
+
export const amsterdamHighlightPurpleBackgroundColor = "#A00078";
|
|
191
|
+
export const amsterdamHighlightYellowBackgroundColor = "#FFE600";
|
|
173
192
|
export const amsterdamIconSize3IconSizeNarrow = "clamp(1.5rem, calc(1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125), 1.8125rem)";
|
|
174
193
|
export const amsterdamIconSize3IconSizeWide = "clamp(1.8125rem, calc(1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625), 2rem)";
|
|
175
194
|
export const amsterdamIconSize3ContainerMultiplier = "1.4";
|
|
@@ -189,26 +208,27 @@ export const amsterdamLinkColor = "#004699";
|
|
|
189
208
|
export const amsterdamLinkOutlineOffset = "2px";
|
|
190
209
|
export const amsterdamLinkFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
191
210
|
export const amsterdamLinkFontWeight = 400;
|
|
192
|
-
export const
|
|
193
|
-
export const
|
|
194
|
-
export const
|
|
211
|
+
export const amsterdamLinkHoverColor = "#102E62";
|
|
212
|
+
export const amsterdamLinkInlineHoverTextDecoration = "underline";
|
|
213
|
+
export const amsterdamLinkInlineHoverTextUnderlineOffset = "3px";
|
|
195
214
|
export const amsterdamLinkInlineFontFamily = "inherit";
|
|
196
215
|
export const amsterdamLinkInlineFontSize = "inherit";
|
|
197
216
|
export const amsterdamLinkInlineLineHeight = "inherit";
|
|
198
217
|
export const amsterdamLinkInlineTextDecoration = "none";
|
|
218
|
+
export const amsterdamLinkInlineTextDecorationThickness = "2px";
|
|
199
219
|
export const amsterdamLinkInlineVisitedColor = "#A00078";
|
|
200
220
|
export const amsterdamLinkInListGap = "0.5em";
|
|
201
|
-
export const
|
|
202
|
-
export const
|
|
203
|
-
export const
|
|
221
|
+
export const amsterdamLinkInListHoverTextDecoration = "underline";
|
|
222
|
+
export const amsterdamLinkInListHoverTextDecorationThickness = "2px";
|
|
223
|
+
export const amsterdamLinkInListHoverTextUnderlineOffset = "7px";
|
|
204
224
|
export const amsterdamLinkInListTextDecoration = "none";
|
|
205
225
|
export const amsterdamLinkInListLineHeight = "1.6";
|
|
206
226
|
export const amsterdamLinkInListNarrowFontSize = "clamp(1rem, calc(1rem + (0.0625 * (100vw - 20rem)) / 33.3125), 1.0625rem)";
|
|
207
227
|
export const amsterdamLinkInListWideFontSize = "clamp(1.0625rem, calc(1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.125rem)";
|
|
208
228
|
export const amsterdamLinkStandaloneTextUnderlineOffset = "8px";
|
|
209
229
|
export const amsterdamLinkStandaloneTextDecorationThickness = "2px";
|
|
210
|
-
export const
|
|
211
|
-
export const
|
|
230
|
+
export const amsterdamLinkStandaloneHoverTextDecorationThickness = "3px";
|
|
231
|
+
export const amsterdamLinkStandaloneHoverTextUnderlineOffset = "7px";
|
|
212
232
|
export const amsterdamLinkStandaloneLineHeight = "1.6";
|
|
213
233
|
export const amsterdamLinkStandaloneNarrowFontSize = "clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)";
|
|
214
234
|
export const amsterdamLinkStandaloneWideFontSize = "clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem)";
|
|
@@ -231,10 +251,6 @@ export const amsterdamOrderedListItemPaddingInlineStart = "0.25rem"; // The tota
|
|
|
231
251
|
export const amsterdamOrderedListOrderedListListStyleType = "lower-alpha";
|
|
232
252
|
export const amsterdamOrderedListOrderedListItemMarginInlineStart = "1.5rem"; // Indent less than the parent to start-align the child’s marker with the parent text.
|
|
233
253
|
export const amsterdamOrderedListOrderedListItemPaddingInlineStart = "0.25rem"; // The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem.
|
|
234
|
-
export const amsterdamPageGridColumnCountNarrow = "4";
|
|
235
|
-
export const amsterdamPageGridColumnCountWide = "12";
|
|
236
|
-
export const amsterdamPageGridColumnGap = "clamp(0.5rem, calc(0.5rem + 0.0142857143 * (100vw - 20rem)), 1.5rem)";
|
|
237
|
-
export const amsterdamPageGridMaxWidth = "1440px";
|
|
238
254
|
export const amsterdamPageHeadingColor = "#000000";
|
|
239
255
|
export const amsterdamPageHeadingFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
240
256
|
export const amsterdamPageHeadingLineHeight = "1.1";
|
|
@@ -254,6 +270,15 @@ export const amsterdamPageMenuItemNarrowFontSize = "clamp(1rem, calc(1rem + (0.0
|
|
|
254
270
|
export const amsterdamPageMenuItemWideFontSize = "clamp(1.0625rem, calc(1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.125rem)";
|
|
255
271
|
export const amsterdamPageMenuItemHoverColor = "#000000";
|
|
256
272
|
export const amsterdamPageMenuItemHoverTextDecoration = "underline";
|
|
273
|
+
export const amsterdamPaginationColor = "#004699";
|
|
274
|
+
export const amsterdamPaginationFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
275
|
+
export const amsterdamPaginationFontWeight = 400;
|
|
276
|
+
export const amsterdamPaginationLineHeight = "1.6";
|
|
277
|
+
export const amsterdamPaginationNarrowFontSize = "clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)";
|
|
278
|
+
export const amsterdamPaginationWideFontSize = "clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem)";
|
|
279
|
+
export const amsterdamPaginationButtonCurrentFontWeight = 800;
|
|
280
|
+
export const amsterdamPaginationButtonHoverColor = "#102E62";
|
|
281
|
+
export const amsterdamPaginationButtonOutlineOffset = "2px";
|
|
257
282
|
export const amsterdamParagraphColor = "#000000";
|
|
258
283
|
export const amsterdamParagraphFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
259
284
|
export const amsterdamParagraphFontWeight = 400;
|
|
@@ -267,6 +292,18 @@ export const amsterdamParagraphSmallWideFontSize = "clamp(1.0625rem, calc(1.0625
|
|
|
267
292
|
export const amsterdamParagraphLargeLineHeight = "1.5";
|
|
268
293
|
export const amsterdamParagraphLargeNarrowFontSize = "clamp(1.375rem, calc(1.375rem + (0.25 * (100vw - 20rem)) / 33.3125), 1.625rem)";
|
|
269
294
|
export const amsterdamParagraphLargeWideFontSize = "clamp(1.625rem, calc(1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.75rem)";
|
|
295
|
+
export const amsterdamScreenWideMaxWidth = "100rem";
|
|
296
|
+
export const amsterdamScreenXWideMaxWidth = "132rem";
|
|
297
|
+
export const amsterdamSwitchFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
298
|
+
export const amsterdamSwitchBackgroundColor = "#767676";
|
|
299
|
+
export const amsterdamSwitchWidth = "3.5rem";
|
|
300
|
+
export const amsterdamSwitchThumbBackgroundColor = "#ffffff";
|
|
301
|
+
export const amsterdamSwitchThumbWidth = "1.75rem";
|
|
302
|
+
export const amsterdamSwitchThumbHeight = "1.75rem";
|
|
303
|
+
export const amsterdamSwitchThumbHoverColor = "#102E62";
|
|
304
|
+
export const amsterdamSwitchCheckedBackgroundColor = "#004699";
|
|
305
|
+
export const amsterdamSwitchOutlineOffset = "2px";
|
|
306
|
+
export const amsterdamSwitchDisabledBackgroundColor = "#B4B4B4";
|
|
270
307
|
export const amsterdamTopTaskLinkDescriptionColor = "#000000";
|
|
271
308
|
export const amsterdamTopTaskLinkDescriptionFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
272
309
|
export const amsterdamTopTaskLinkDescriptionFontWeight = 400;
|
|
@@ -276,7 +313,7 @@ export const amsterdamTopTaskLinkDescriptionWideFontSize = "clamp(1.0625rem, cal
|
|
|
276
313
|
export const amsterdamTopTaskLinkLabelColor = "#004699";
|
|
277
314
|
export const amsterdamTopTaskLinkLabelFontFamily = "'Amsterdam Sans', Arial, sans-serif";
|
|
278
315
|
export const amsterdamTopTaskLinkLabelFontWeight = 800;
|
|
279
|
-
export const amsterdamTopTaskLinkLabelHoverColor = "#
|
|
316
|
+
export const amsterdamTopTaskLinkLabelHoverColor = "#102E62";
|
|
280
317
|
export const amsterdamTopTaskLinkLabelLineHeight = "1.4";
|
|
281
318
|
export const amsterdamTopTaskLinkLabelNarrowFontSize = "clamp(1.25rem, calc(1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.4375rem)";
|
|
282
319
|
export const amsterdamTopTaskLinkLabelWideFontSize = "clamp(1.4375rem, calc(1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.5625rem)";
|
|
@@ -314,16 +351,15 @@ export const utrechtButtonDisabledColor = "#ffffff";
|
|
|
314
351
|
export const utrechtButtonPrimaryActionBackgroundColor = "#004699";
|
|
315
352
|
export const utrechtButtonPrimaryActionColor = "#ffffff";
|
|
316
353
|
export const utrechtButtonPrimaryActionDisabledBackgroundColor = "#B4B4B4";
|
|
317
|
-
export const utrechtButtonPrimaryActionHoverBackgroundColor = "#
|
|
318
|
-
export const utrechtButtonPrimaryActionFocusBackgroundColor = "#00387A";
|
|
354
|
+
export const utrechtButtonPrimaryActionHoverBackgroundColor = "#102E62";
|
|
319
355
|
export const utrechtButtonSecondaryActionBackgroundColor = "#ffffff";
|
|
320
356
|
export const utrechtButtonSecondaryActionColor = "#004699";
|
|
321
|
-
export const utrechtButtonSecondaryActionHoverColor = "#
|
|
357
|
+
export const utrechtButtonSecondaryActionHoverColor = "#102E62";
|
|
322
358
|
export const utrechtButtonSecondaryActionDisabledBackgroundColor = "#ffffff";
|
|
323
359
|
export const utrechtButtonSecondaryActionDisabledColor = "#B4B4B4";
|
|
324
360
|
export const utrechtButtonSubtleBackgroundColor = "transparent";
|
|
325
361
|
export const utrechtButtonSubtleColor = "#004699";
|
|
326
|
-
export const utrechtButtonSubtleHoverColor = "#
|
|
327
|
-
export const utrechtButtonSubtleFocusColor = "#
|
|
362
|
+
export const utrechtButtonSubtleHoverColor = "#102E62";
|
|
363
|
+
export const utrechtButtonSubtleFocusColor = "#102E62";
|
|
328
364
|
export const utrechtButtonSubtleDisabledBackgroundColor = "transparent";
|
|
329
365
|
export const utrechtButtonSubtleDisabledColor = "#B4B4B4";
|