@rijkshuisstijl-community/design-tokens 1.1.0 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +34 -0
- package/README.md +153 -12
- package/dist/_variables.scss +772 -743
- package/dist/index.css +772 -743
- package/dist/index.d.ts +545 -516
- package/dist/index.js +609 -580
- package/dist/index.json +608 -579
- package/dist/index.tokens.json +1664 -1613
- package/dist/root.css +772 -743
- package/dist/tokens.d.ts +1569 -1518
- package/dist/tokens.js +22875 -22078
- package/dist/uitvoerend-groen/_variables.scss +1337 -0
- package/dist/uitvoerend-groen/index.css +1340 -0
- package/dist/{uitvoerend-mintgroen-focus → uitvoerend-groen}/index.d.ts +442 -418
- package/dist/uitvoerend-groen/index.js +1338 -0
- package/dist/uitvoerend-groen/index.json +1335 -0
- package/dist/uitvoerend-groen/index.tokens.json +2049 -0
- package/dist/uitvoerend-groen/root.css +1340 -0
- package/dist/{uitvoerend-mintgroen-focus → uitvoerend-groen}/tokens.d.ts +646 -628
- package/dist/{uitvoerend-mintgroen-focus → uitvoerend-groen}/tokens.js +14276 -13624
- package/dist/uitvoerend-hemelblauw/_variables.scss +1337 -0
- package/dist/uitvoerend-hemelblauw/index.css +1340 -0
- package/dist/uitvoerend-hemelblauw/index.d.ts +1338 -0
- package/dist/uitvoerend-hemelblauw/index.js +1338 -0
- package/dist/uitvoerend-hemelblauw/index.json +1335 -0
- package/dist/uitvoerend-hemelblauw/index.tokens.json +2049 -0
- package/dist/uitvoerend-hemelblauw/root.css +1340 -0
- package/dist/uitvoerend-hemelblauw/tokens.d.ts +2072 -0
- package/dist/uitvoerend-hemelblauw/tokens.js +31258 -0
- package/dist/{uitvoerend-mintgroen-focus → uitvoerend-mintgroen}/_variables.scss +533 -509
- package/dist/{uitvoerend-mintgroen-focus → uitvoerend-mintgroen}/index.css +534 -510
- package/dist/uitvoerend-mintgroen/index.d.ts +1338 -0
- package/dist/{uitvoerend-mintgroen-focus → uitvoerend-mintgroen}/index.js +507 -483
- package/dist/{uitvoerend-mintgroen-focus → uitvoerend-mintgroen}/index.json +506 -482
- package/dist/{uitvoerend-mintgroen-focus → uitvoerend-mintgroen}/index.tokens.json +734 -716
- package/dist/{uitvoerend-mintgroen-focus → uitvoerend-mintgroen}/root.css +533 -509
- package/dist/uitvoerend-mintgroen/tokens.d.ts +2072 -0
- package/dist/uitvoerend-mintgroen/tokens.js +31258 -0
- package/dist/uitvoerend-oranje/_variables.scss +1337 -0
- package/dist/uitvoerend-oranje/index.css +1340 -0
- package/dist/uitvoerend-oranje/index.d.ts +1338 -0
- package/dist/uitvoerend-oranje/index.js +1338 -0
- package/dist/uitvoerend-oranje/index.json +1335 -0
- package/dist/uitvoerend-oranje/index.tokens.json +2049 -0
- package/dist/uitvoerend-oranje/root.css +1340 -0
- package/dist/uitvoerend-oranje/tokens.d.ts +2072 -0
- package/dist/uitvoerend-oranje/tokens.js +31258 -0
- package/dist/uitvoerend-paars/_variables.scss +1337 -0
- package/dist/uitvoerend-paars/index.css +1340 -0
- package/dist/uitvoerend-paars/index.d.ts +1338 -0
- package/dist/uitvoerend-paars/index.js +1338 -0
- package/dist/uitvoerend-paars/index.json +1335 -0
- package/dist/uitvoerend-paars/index.tokens.json +2049 -0
- package/dist/uitvoerend-paars/root.css +1340 -0
- package/dist/uitvoerend-paars/tokens.d.ts +2072 -0
- package/dist/uitvoerend-paars/tokens.js +31258 -0
- package/dist/uitvoerend-violet/_variables.scss +231 -202
- package/dist/uitvoerend-violet/index.css +231 -202
- package/dist/uitvoerend-violet/index.d.ts +102 -73
- package/dist/uitvoerend-violet/index.js +231 -202
- package/dist/uitvoerend-violet/index.json +230 -201
- package/dist/uitvoerend-violet/index.tokens.json +281 -230
- package/dist/uitvoerend-violet/root.css +231 -202
- package/dist/uitvoerend-violet/tokens.d.ts +151 -100
- package/dist/uitvoerend-violet/tokens.js +16369 -15572
- package/dist/uitvoerend-violet-oud/_variables.scss +231 -201
- package/dist/uitvoerend-violet-oud/index.css +231 -201
- package/dist/uitvoerend-violet-oud/index.d.ts +102 -72
- package/dist/uitvoerend-violet-oud/index.js +231 -201
- package/dist/uitvoerend-violet-oud/index.json +230 -200
- package/dist/uitvoerend-violet-oud/index.tokens.json +281 -229
- package/dist/uitvoerend-violet-oud/root.css +231 -201
- package/dist/uitvoerend-violet-oud/tokens.d.ts +151 -99
- package/dist/uitvoerend-violet-oud/tokens.js +12621 -11803
- package/dist/wetgevend/_variables.scss +171 -142
- package/dist/wetgevend/index.css +171 -142
- package/dist/wetgevend/index.d.ts +102 -73
- package/dist/wetgevend/index.js +171 -142
- package/dist/wetgevend/index.json +170 -141
- package/dist/wetgevend/index.tokens.json +221 -170
- package/dist/wetgevend/root.css +171 -142
- package/dist/wetgevend/tokens.d.ts +151 -100
- package/dist/wetgevend/tokens.js +12217 -11420
- package/figma/figma.tokens.json +2428 -556
- package/package.json +1 -1
- package/src/generated/base.tokens.json +4520 -4338
- package/src/generated/themes.json +28993 -3285
- package/src/generated/uitvoerend-groen/tokens.json +6252 -0
- package/src/generated/uitvoerend-hemelblauw/tokens.json +6252 -0
- package/src/generated/{uitvoerend-mintgroen-focus → uitvoerend-mintgroen}/tokens.json +2374 -2240
- package/src/generated/uitvoerend-oranje/tokens.json +6252 -0
- package/src/generated/uitvoerend-paars/tokens.json +6252 -0
- package/src/generated/uitvoerend-violet/tokens.json +640 -458
- package/src/generated/uitvoerend-violet-oud/tokens.json +643 -457
- package/src/generated/wetgevend/tokens.json +602 -420
package/dist/wetgevend/index.js
CHANGED
|
@@ -1,13 +1,67 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Tue, 27 May 2025 13:07:14 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
|
-
export const
|
|
7
|
-
export const
|
|
8
|
-
export const
|
|
9
|
-
export const
|
|
10
|
-
export const
|
|
6
|
+
export const utrechtColumnLayoutColumnRuleColor = "transparent";
|
|
7
|
+
export const utrechtColumnLayoutColumnRuleWidth = "0px";
|
|
8
|
+
export const utrechtColumnLayoutColumnWidth = "400px";
|
|
9
|
+
export const utrechtColumnLayoutGap = "0.75rem";
|
|
10
|
+
export const utrechtBlockquoteBackgroundColor = "transparent";
|
|
11
|
+
export const utrechtBlockquoteBorderInlineStartWidth = 0;
|
|
12
|
+
export const utrechtBlockquoteBorderColor = "transparent";
|
|
13
|
+
export const utrechtBlockquoteBorderRadius = 0;
|
|
14
|
+
export const utrechtBlockquoteBorderWidth = 0;
|
|
15
|
+
export const utrechtBlockquoteColor = "#154273";
|
|
16
|
+
export const utrechtBlockquoteFontSize = "1.25rem";
|
|
17
|
+
export const utrechtBlockquoteFontFamily = "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif";
|
|
18
|
+
export const utrechtBlockquotePaddingBlockEnd = "2rem";
|
|
19
|
+
export const utrechtBlockquotePaddingBlockStart = "2rem";
|
|
20
|
+
export const utrechtBlockquotePaddingInlineEnd = "2rem";
|
|
21
|
+
export const utrechtBlockquotePaddingInlineStart = "2rem";
|
|
22
|
+
export const utrechtBlockquoteRowGap = "0.75rem";
|
|
23
|
+
export const utrechtBlockquoteAttributionColor = "#154273";
|
|
24
|
+
export const utrechtBlockquoteAttributionFontSize = "1.25rem";
|
|
25
|
+
export const utrechtBlockquoteContentColor = "#154273";
|
|
26
|
+
export const utrechtBlockquoteContentFontSize = "1.25rem";
|
|
27
|
+
export const utrechtBlockquoteContentFontFamily = "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif";
|
|
28
|
+
export const utrechtBlockquoteContentLineHeight = "150%";
|
|
29
|
+
export const utrechtBlockquoteContentFontWeight = 400;
|
|
30
|
+
export const utrechtBlockquoteCaptionFontSize = "1.25rem";
|
|
31
|
+
export const utrechtBlockquoteCaptionFontFamily = "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif";
|
|
32
|
+
export const utrechtBlockquoteCaptionLineHeight = "150%";
|
|
33
|
+
export const utrechtBlockquoteCaptionFontWeight = 400;
|
|
34
|
+
export const utrechtBlockquoteCaptionPaddingBlockStart = "0.75rem";
|
|
35
|
+
export const utrechtBlockquoteCaptionColor = "#154273";
|
|
36
|
+
export const utrechtBlockquoteMarginBlockEnd = 0;
|
|
37
|
+
export const utrechtBlockquoteMarginBlockStart = 0;
|
|
38
|
+
export const utrechtBlockquoteMarginInlineEnd = 0;
|
|
39
|
+
export const utrechtBlockquoteMarginInlineStart = 0;
|
|
40
|
+
export const utrechtBlockquoteBorderBlockStartWidth = 0;
|
|
41
|
+
export const utrechtBlockquoteBorderBlockEndWidth = 0;
|
|
42
|
+
export const utrechtBlockquoteBorderInlineEndWidth = 0;
|
|
43
|
+
export const utrechtBlockquoteBorderStartStartRadius = 0;
|
|
44
|
+
export const utrechtBlockquoteBorderStartEndRadius = 0;
|
|
45
|
+
export const utrechtBlockquoteBorderEndStartRadius = 0;
|
|
46
|
+
export const utrechtBlockquoteBorderEndEndRadius = 0;
|
|
47
|
+
export const utrechtBlockquoteBlueCornerBorderVariationBorderColor = "#154273";
|
|
48
|
+
export const utrechtBlockquoteBlueCornerBorderVariationBorderBlockEndWidth = "2px";
|
|
49
|
+
export const utrechtBlockquoteBlueCornerBorderVariationBorderInlineEndWidth = "2px";
|
|
50
|
+
export const utrechtBlockquoteBlueCornerBorderVariationBorderEndEndRadius = "3rem";
|
|
51
|
+
export const utrechtBlockquotePinkBackgroundVariationBackgroundColor = "#F6BDE1";
|
|
52
|
+
export const utrechtBlockquotePinkBackgroundVariationBorderEndStartRadius = "3rem";
|
|
53
|
+
export const utrechtBlockquotePinkBackgroundVariationPadding = "2.5rem";
|
|
54
|
+
export const utrechtBlockquotePinkLeftBorderVariationBorderColor = "#F6BDE1";
|
|
55
|
+
export const utrechtBlockquotePinkLeftBorderVariationBorderInlineStartWidth = "0.75rem";
|
|
56
|
+
export const utrechtBlockquotePinkLeftBorderVariationPaddingInlineStart = "2.5rem";
|
|
57
|
+
export const utrechtBlockquotePinkLeftBorderVariationPaddingInlineEnd = "2.5rem";
|
|
58
|
+
export const utrechtBlockquotePinkLeftBorderVariationPaddingBlockStart = "1.5rem";
|
|
59
|
+
export const utrechtBlockquotePinkLeftBorderVariationPaddingBlockEnd = "1.5rem";
|
|
60
|
+
export const utrechtBlockquotePinkCornerBorderVariationBorderColor = "#F6BDE1";
|
|
61
|
+
export const utrechtBlockquotePinkCornerBorderVariationBorderBlockStartWidth = "0.25rem";
|
|
62
|
+
export const utrechtBlockquotePinkCornerBorderVariationBorderInlineStartWidth = "0.25rem";
|
|
63
|
+
export const utrechtBlockquotePinkCornerBorderVariationBorderStartStartRadius = "3rem";
|
|
64
|
+
export const utrechtBlockquotePinkCornerBorderVariationPadding = "2.5rem";
|
|
11
65
|
export const utrechtIconColor = "inherit";
|
|
12
66
|
export const utrechtIconSize = "24px";
|
|
13
67
|
export const utrechtIconInsetBlockStart = 0;
|
|
@@ -15,7 +69,7 @@ export const utrechtUnorderedListPaddingInlineStart = "1.5rem";
|
|
|
15
69
|
export const utrechtUnorderedListMarginBlockEnd = "0.25rem";
|
|
16
70
|
export const utrechtUnorderedListMarginBlockStart = "0.25rem";
|
|
17
71
|
export const utrechtUnorderedListColor = "#0F172A";
|
|
18
|
-
export const utrechtUnorderedListFontFamily = "Fira Sans, Arial, Verdana, sans-serif";
|
|
72
|
+
export const utrechtUnorderedListFontFamily = "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif";
|
|
19
73
|
export const utrechtUnorderedListFontWeight = 400;
|
|
20
74
|
export const utrechtUnorderedListFontSize = "1.25rem";
|
|
21
75
|
export const utrechtUnorderedListLineHeight = "150%";
|
|
@@ -25,7 +79,7 @@ export const utrechtUnorderedListItemMarginBlockStart = "0.25rem";
|
|
|
25
79
|
export const utrechtUnorderedListMarkerColor = "#0F172A";
|
|
26
80
|
export const utrechtUnorderedListMarkerBorderColor = "#0F172A";
|
|
27
81
|
export const utrechtTextboxBorderRadius = "2.5px";
|
|
28
|
-
export const utrechtTextboxFontFamily = "Fira Sans, Arial, Verdana, sans-serif";
|
|
82
|
+
export const utrechtTextboxFontFamily = "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif";
|
|
29
83
|
export const utrechtTextboxFontSize = "1.25rem";
|
|
30
84
|
export const utrechtTextboxFontWeight = 400;
|
|
31
85
|
export const utrechtTextboxLineHeight = "150%";
|
|
@@ -88,19 +142,19 @@ export const utrechtTextareaHoverBorderWidth = "1px";
|
|
|
88
142
|
export const utrechtTextareaBorderRadius = "2.5px";
|
|
89
143
|
export const utrechtTextareaBorderBottomWidth = "1px";
|
|
90
144
|
export const utrechtTextareaBorderWidth = "1px";
|
|
91
|
-
export const utrechtTextareaFontFamily = "Fira Sans, Arial, Verdana, sans-serif";
|
|
145
|
+
export const utrechtTextareaFontFamily = "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif";
|
|
92
146
|
export const utrechtTextareaFontWeight = 400;
|
|
93
147
|
export const utrechtTextareaLineHeight = "150%";
|
|
94
148
|
export const utrechtTextareaFontSize = "1.25rem";
|
|
95
149
|
export const utrechtTableHeaderCellLineHeight = "150%";
|
|
96
150
|
export const utrechtTableHeaderCellColor = "#0F172A";
|
|
97
|
-
export const utrechtTableHeaderCellFontFamily = "Fira Sans, Arial, Verdana, sans-serif";
|
|
151
|
+
export const utrechtTableHeaderCellFontFamily = "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif";
|
|
98
152
|
export const utrechtTableHeaderCellFontWeight = 700;
|
|
99
153
|
export const utrechtTableHeaderCellFontSize = "1.25rem";
|
|
100
154
|
export const utrechtTableCaptionLineHeight = "125%";
|
|
101
155
|
export const utrechtTableCaptionMarginBlockEnd = "1.5rem";
|
|
102
156
|
export const utrechtTableCaptionColor = "#0F172A";
|
|
103
|
-
export const utrechtTableCaptionFontFamily = "Fira Sans, Arial, Verdana, sans-serif";
|
|
157
|
+
export const utrechtTableCaptionFontFamily = "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif";
|
|
104
158
|
export const utrechtTableCaptionFontWeight = 700;
|
|
105
159
|
export const utrechtTableCaptionFontSize = "1.875rem";
|
|
106
160
|
export const utrechtTableCellPaddingBlockEnd = "0.75rem";
|
|
@@ -109,7 +163,7 @@ export const utrechtTableCellPaddingInlineEnd = "1rem";
|
|
|
109
163
|
export const utrechtTableCellPaddingInlineStart = "1rem";
|
|
110
164
|
export const utrechtTableCellLineHeight = "150%";
|
|
111
165
|
export const utrechtTableDataCellColor = "#0F172A";
|
|
112
|
-
export const utrechtTableDataCellFontFamily = "Fira Sans, Arial, Verdana, sans-serif";
|
|
166
|
+
export const utrechtTableDataCellFontFamily = "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif";
|
|
113
167
|
export const utrechtTableDataCellFontWeight = 400;
|
|
114
168
|
export const utrechtTableDataCellLineHeight = "150%";
|
|
115
169
|
export const utrechtTableDataCellFontSize = "1.25rem";
|
|
@@ -125,7 +179,7 @@ export const utrechtTableRowBackgroundColor = "transparent";
|
|
|
125
179
|
export const utrechtTableFooterCellFontWeight = 700;
|
|
126
180
|
export const utrechtTableFooterCellFontSize = "1.25rem";
|
|
127
181
|
export const utrechtTableFooterCellColor = "#0F172A";
|
|
128
|
-
export const utrechtTableFooterCellFontFamily = "Fira Sans, Arial, Verdana, sans-serif";
|
|
182
|
+
export const utrechtTableFooterCellFontFamily = "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif";
|
|
129
183
|
export const utrechtTableFooterCellLineHeight = "150%";
|
|
130
184
|
export const utrechtTableContainerBoxInlineEndShadowX = 0;
|
|
131
185
|
export const utrechtTableContainerBoxInlineEndShadowY = "16px";
|
|
@@ -139,7 +193,7 @@ export const utrechtTableContainerBoxInlineStartShadowSpread = 0;
|
|
|
139
193
|
export const utrechtTableContainerBoxInlineStartShadowColor = "#0000001a";
|
|
140
194
|
export const utrechtTableFontSize = "1.25rem";
|
|
141
195
|
export const utrechtSkipLinkFontWeight = 700;
|
|
142
|
-
export const utrechtSkipLinkFontFamily = "Fira Sans, Arial, Verdana, sans-serif";
|
|
196
|
+
export const utrechtSkipLinkFontFamily = "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif";
|
|
143
197
|
export const utrechtSkipLinkFontSize = "1.25rem";
|
|
144
198
|
export const utrechtSkipLinkLineHeight = "150%";
|
|
145
199
|
export const utrechtSkipLinkMinBlockSize = "48px";
|
|
@@ -197,7 +251,7 @@ export const utrechtSelectPaddingInlineStart = "0.75rem";
|
|
|
197
251
|
export const utrechtSelectBorderRadius = "2.5px";
|
|
198
252
|
export const utrechtSelectBorderBottomWidth = "auto";
|
|
199
253
|
export const utrechtSelectBorderWidth = "1px";
|
|
200
|
-
export const utrechtSelectFontFamily = "Fira Sans, Arial, Verdana, sans-serif";
|
|
254
|
+
export const utrechtSelectFontFamily = "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif";
|
|
201
255
|
export const utrechtSelectFontWeight = 400;
|
|
202
256
|
export const utrechtSelectLineHeight = "150%";
|
|
203
257
|
export const utrechtSelectFontSize = "1.25rem";
|
|
@@ -242,8 +296,13 @@ export const utrechtRadioButtonHoverBorderColor = "#738eab";
|
|
|
242
296
|
export const utrechtRadioButtonHoverBorderWidth = "1px";
|
|
243
297
|
export const utrechtRadioButtonBorderRadius = "999px";
|
|
244
298
|
export const utrechtRadioButtonBorderWidth = "1px";
|
|
299
|
+
export const utrechtPreHeadingColor = "#0F172A";
|
|
300
|
+
export const utrechtPreHeadingFontFamily = "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif";
|
|
301
|
+
export const utrechtPreHeadingFontWeight = 700;
|
|
302
|
+
export const utrechtPreHeadingLineHeight = "125%";
|
|
303
|
+
export const utrechtPreHeadingFontSize = "1rem";
|
|
245
304
|
export const utrechtParagraphColor = "#0F172A";
|
|
246
|
-
export const utrechtParagraphFontFamily = "Fira Sans, Arial, Verdana, sans-serif";
|
|
305
|
+
export const utrechtParagraphFontFamily = "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif";
|
|
247
306
|
export const utrechtParagraphFontSize = "1.25rem";
|
|
248
307
|
export const utrechtParagraphFontWeight = 400;
|
|
249
308
|
export const utrechtParagraphLineHeight = "150%";
|
|
@@ -261,7 +320,7 @@ export const utrechtOrderedListItemPaddingInlineStart = 0;
|
|
|
261
320
|
export const utrechtOrderedListItemMarginBlockEnd = "0.25rem";
|
|
262
321
|
export const utrechtOrderedListItemMarginBlockStart = "0.25rem";
|
|
263
322
|
export const utrechtOrderedListColor = "#0F172A";
|
|
264
|
-
export const utrechtOrderedListFontFamily = "Fira Sans, Arial, Verdana, sans-serif";
|
|
323
|
+
export const utrechtOrderedListFontFamily = "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif";
|
|
265
324
|
export const utrechtOrderedListFontWeight = 400;
|
|
266
325
|
export const utrechtOrderedListFontSize = "1.25rem";
|
|
267
326
|
export const utrechtOrderedListLineHeight = "150%";
|
|
@@ -290,40 +349,40 @@ export const utrechtLinkIconSize = "24px";
|
|
|
290
349
|
export const utrechtLinkColumnGap = "0.25rem";
|
|
291
350
|
export const utrechtLinkTextDecorationThickness = "auto";
|
|
292
351
|
export const utrechtLinkTextUnderlineOffset = "0.125rem";
|
|
293
|
-
export const utrechtLinkFontFamily = "Fira Sans, Arial, Verdana, sans-serif";
|
|
352
|
+
export const utrechtLinkFontFamily = "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif";
|
|
294
353
|
export const utrechtLinkFontWeight = 400;
|
|
295
354
|
export const utrechtLinkFontSize = "1.25rem";
|
|
296
355
|
export const utrechtLinkLineHeight = "150%";
|
|
297
356
|
export const utrechtHeading1Color = "#154273";
|
|
298
|
-
export const utrechtHeading1FontFamily = "Fira Sans, Arial, Verdana, sans-serif";
|
|
357
|
+
export const utrechtHeading1FontFamily = "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif";
|
|
299
358
|
export const utrechtHeading1FontWeight = 700;
|
|
300
359
|
export const utrechtHeading1LineHeight = "125%";
|
|
301
360
|
export const utrechtHeading1FontSize = "3.125rem";
|
|
302
361
|
export const utrechtHeading1MarginBlockEnd = 0;
|
|
303
362
|
export const utrechtHeading1MarginBlockStart = 0;
|
|
304
363
|
export const utrechtHeading2Color = "#154273";
|
|
305
|
-
export const utrechtHeading2FontFamily = "Fira Sans, Arial, Verdana, sans-serif";
|
|
364
|
+
export const utrechtHeading2FontFamily = "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif";
|
|
306
365
|
export const utrechtHeading2FontWeight = 700;
|
|
307
366
|
export const utrechtHeading2LineHeight = "125%";
|
|
308
367
|
export const utrechtHeading2FontSize = "2.5rem";
|
|
309
368
|
export const utrechtHeading2MarginBlockEnd = 0;
|
|
310
369
|
export const utrechtHeading2MarginBlockStart = 0;
|
|
311
370
|
export const utrechtHeading3Color = "#154273";
|
|
312
|
-
export const utrechtHeading3FontFamily = "Fira Sans, Arial, Verdana, sans-serif";
|
|
371
|
+
export const utrechtHeading3FontFamily = "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif";
|
|
313
372
|
export const utrechtHeading3FontWeight = 700;
|
|
314
373
|
export const utrechtHeading3LineHeight = "125%";
|
|
315
374
|
export const utrechtHeading3FontSize = "1.875rem";
|
|
316
375
|
export const utrechtHeading3MarginBlockEnd = 0;
|
|
317
376
|
export const utrechtHeading3MarginBlockStart = 0;
|
|
318
377
|
export const utrechtHeading4Color = "#154273";
|
|
319
|
-
export const utrechtHeading4FontFamily = "Fira Sans, Arial, Verdana, sans-serif";
|
|
378
|
+
export const utrechtHeading4FontFamily = "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif";
|
|
320
379
|
export const utrechtHeading4FontWeight = 700;
|
|
321
380
|
export const utrechtHeading4LineHeight = "125%";
|
|
322
381
|
export const utrechtHeading4FontSize = "1.5rem";
|
|
323
382
|
export const utrechtHeading4MarginBlockEnd = 0;
|
|
324
383
|
export const utrechtHeading4MarginBlockStart = 0;
|
|
325
384
|
export const utrechtHeading5Color = "#154273";
|
|
326
|
-
export const utrechtHeading5FontFamily = "Fira Sans, Arial, Verdana, sans-serif";
|
|
385
|
+
export const utrechtHeading5FontFamily = "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif";
|
|
327
386
|
export const utrechtHeading5FontWeight = 700;
|
|
328
387
|
export const utrechtHeading5LineHeight = "125%";
|
|
329
388
|
export const utrechtHeading5FontSize = "1.25rem";
|
|
@@ -333,20 +392,20 @@ export const utrechtFormLabelColor = "#0F172A";
|
|
|
333
392
|
export const utrechtFormLabelFontSize = "1.25rem";
|
|
334
393
|
export const utrechtFormLabelFontWeight = 700;
|
|
335
394
|
export const utrechtFormFieldLabelColor = "#0F172A";
|
|
336
|
-
export const utrechtFormFieldLabelFontFamily = "Fira Sans, Arial, Verdana, sans-serif";
|
|
395
|
+
export const utrechtFormFieldLabelFontFamily = "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif";
|
|
337
396
|
export const utrechtFormFieldLabelFontSize = "1.25rem";
|
|
338
397
|
export const utrechtFormFieldLabelFontWeight = 700;
|
|
339
398
|
export const utrechtFormFieldLabelLineHeight = "150%";
|
|
340
399
|
export const utrechtFormFieldErrorMessageIconSize = "24px";
|
|
341
400
|
export const utrechtFormFieldErrorMessageIconMarginInlineEnd = "0.5rem";
|
|
342
401
|
export const utrechtFormFieldErrorMessageColor = "#d52b1e";
|
|
343
|
-
export const utrechtFormFieldErrorMessageFontFamily = "Fira Sans, Arial, Verdana, sans-serif";
|
|
402
|
+
export const utrechtFormFieldErrorMessageFontFamily = "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif";
|
|
344
403
|
export const utrechtFormFieldErrorMessageFontSize = "1.25rem";
|
|
345
404
|
export const utrechtFormFieldErrorMessageFontWeight = 400;
|
|
346
405
|
export const utrechtFormFieldErrorMessageMarginBlockEnd = "0.5rem";
|
|
347
406
|
export const utrechtFormFieldErrorMessagePaddingBlockEnd = "0.5rem";
|
|
348
407
|
export const utrechtFormFieldDescriptionColor = "#334155";
|
|
349
|
-
export const utrechtFormFieldDescriptionFontFamily = "Fira Sans, Arial, Verdana, sans-serif";
|
|
408
|
+
export const utrechtFormFieldDescriptionFontFamily = "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif";
|
|
350
409
|
export const utrechtFormFieldDescriptionFontSize = "1.25rem";
|
|
351
410
|
export const utrechtFormFieldDescriptionLineHeight = "150%";
|
|
352
411
|
export const utrechtFormFieldDescriptionMarginBlockStart = "-0.5rem";
|
|
@@ -378,7 +437,7 @@ export const utrechtFigureImgBorderEndStartRadius = 0;
|
|
|
378
437
|
export const utrechtFigureImgBorderStartEndRadius = 0;
|
|
379
438
|
export const utrechtFigureImgBorderStartStartRadius = 0;
|
|
380
439
|
export const utrechtFormFieldsetLegendColor = "#0F172A";
|
|
381
|
-
export const utrechtFormFieldsetLegendFontFamily = "Fira Sans, Arial, Verdana, sans-serif";
|
|
440
|
+
export const utrechtFormFieldsetLegendFontFamily = "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif";
|
|
382
441
|
export const utrechtFormFieldsetLegendFontSize = "1.25rem";
|
|
383
442
|
export const utrechtFormFieldsetLegendFontWeight = 700;
|
|
384
443
|
export const utrechtFormFieldsetLegendLineHeight = "150%";
|
|
@@ -395,7 +454,7 @@ export const utrechtNumberBadgeMinInlineSize = "24px";
|
|
|
395
454
|
export const utrechtNumberBadgeFontWeight = 700;
|
|
396
455
|
export const utrechtNumberBadgeBorderWidth = "0px";
|
|
397
456
|
export const utrechtNumberBadgeBorderRadius = "999px";
|
|
398
|
-
export const utrechtNumberBadgeFontFamily = "Fira Sans, Arial, Verdana, sans-serif";
|
|
457
|
+
export const utrechtNumberBadgeFontFamily = "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif";
|
|
399
458
|
export const utrechtNumberBadgeBackgroundColor = "#154273";
|
|
400
459
|
export const utrechtNumberBadgeBorderColor = "transparent";
|
|
401
460
|
export const utrechtNumberBadgeColor = "#fff";
|
|
@@ -466,14 +525,14 @@ export const utrechtButtonGroupMarginBlockStart = "0px";
|
|
|
466
525
|
export const utrechtButtonGroupPaddingBlockEnd = "0px";
|
|
467
526
|
export const utrechtButtonGroupPaddingBlockStart = "0px";
|
|
468
527
|
export const utrechtButtonGroupRowGap = "0.5rem";
|
|
469
|
-
export const utrechtButtonBackgroundColor = "
|
|
470
|
-
export const utrechtButtonBorderColor = "
|
|
471
|
-
export const utrechtButtonColor = "#
|
|
528
|
+
export const utrechtButtonBackgroundColor = "#0F172A";
|
|
529
|
+
export const utrechtButtonBorderColor = "transparent";
|
|
530
|
+
export const utrechtButtonColor = "#fff";
|
|
472
531
|
export const utrechtButtonBorderRadius = "5px";
|
|
473
532
|
export const utrechtButtonBorderWidth = "1px";
|
|
474
533
|
export const utrechtButtonIconGap = "0.5rem";
|
|
475
534
|
export const utrechtButtonIconSize = "24px";
|
|
476
|
-
export const utrechtButtonFontFamily = "Fira Sans, Arial, Verdana, sans-serif";
|
|
535
|
+
export const utrechtButtonFontFamily = "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif";
|
|
477
536
|
export const utrechtButtonFontSize = "1.25rem";
|
|
478
537
|
export const utrechtButtonFontWeight = 700;
|
|
479
538
|
export const utrechtButtonLineHeight = "150%";
|
|
@@ -481,18 +540,18 @@ export const utrechtButtonPaddingBlockEnd = "0.5rem";
|
|
|
481
540
|
export const utrechtButtonPaddingBlockStart = "0.5rem";
|
|
482
541
|
export const utrechtButtonPaddingInlineEnd = "1rem";
|
|
483
542
|
export const utrechtButtonPaddingInlineStart = "1rem";
|
|
484
|
-
export const utrechtButtonDisabledBackgroundColor = "#
|
|
543
|
+
export const utrechtButtonDisabledBackgroundColor = "#E2E8F0";
|
|
485
544
|
export const utrechtButtonDisabledBorderColor = "transparent";
|
|
486
|
-
export const utrechtButtonDisabledColor = "#
|
|
487
|
-
export const utrechtButtonFocusBackgroundColor = "#
|
|
545
|
+
export const utrechtButtonDisabledColor = "#94A3B8";
|
|
546
|
+
export const utrechtButtonFocusBackgroundColor = "#475569";
|
|
488
547
|
export const utrechtButtonFocusBorderColor = "transparent";
|
|
489
|
-
export const utrechtButtonFocusColor = "#
|
|
490
|
-
export const utrechtButtonHoverBackgroundColor = "#
|
|
491
|
-
export const utrechtButtonHoverBorderColor = "
|
|
492
|
-
export const utrechtButtonHoverColor = "#
|
|
493
|
-
export const utrechtButtonActiveBackgroundColor = "#
|
|
494
|
-
export const utrechtButtonActiveBorderColor = "
|
|
495
|
-
export const utrechtButtonActiveColor = "#
|
|
548
|
+
export const utrechtButtonFocusColor = "#fff";
|
|
549
|
+
export const utrechtButtonHoverBackgroundColor = "#475569";
|
|
550
|
+
export const utrechtButtonHoverBorderColor = "transparent";
|
|
551
|
+
export const utrechtButtonHoverColor = "#fff";
|
|
552
|
+
export const utrechtButtonActiveBackgroundColor = "#1E293B";
|
|
553
|
+
export const utrechtButtonActiveBorderColor = "transparent";
|
|
554
|
+
export const utrechtButtonActiveColor = "#fff";
|
|
496
555
|
export const utrechtButtonMinBlockSize = "48px";
|
|
497
556
|
export const utrechtButtonMinInlineSize = "48px";
|
|
498
557
|
export const utrechtButtonColumnGap = "0.5rem";
|
|
@@ -503,9 +562,9 @@ export const utrechtButtonPrimaryActionBackgroundColor = "#154273";
|
|
|
503
562
|
export const utrechtButtonPrimaryActionBorderColor = "transparent";
|
|
504
563
|
export const utrechtButtonPrimaryActionColor = "#fff";
|
|
505
564
|
export const utrechtButtonPrimaryActionDisabledBackgroundColor = "#b8c6d5";
|
|
506
|
-
export const utrechtButtonPrimaryActionDisabledBorderColor = "
|
|
565
|
+
export const utrechtButtonPrimaryActionDisabledBorderColor = "transparent";
|
|
507
566
|
export const utrechtButtonPrimaryActionDisabledColor = "#4f7196";
|
|
508
|
-
export const utrechtButtonPrimaryActionFocusBackgroundColor = "#
|
|
567
|
+
export const utrechtButtonPrimaryActionFocusBackgroundColor = "#162f50";
|
|
509
568
|
export const utrechtButtonPrimaryActionFocusBorderColor = "transparent";
|
|
510
569
|
export const utrechtButtonPrimaryActionFocusColor = "#fff";
|
|
511
570
|
export const utrechtButtonPrimaryActionFontWeight = 700;
|
|
@@ -514,27 +573,33 @@ export const utrechtButtonPrimaryActionActiveBorderColor = "transparent";
|
|
|
514
573
|
export const utrechtButtonPrimaryActionActiveColor = "#fff";
|
|
515
574
|
export const utrechtButtonPrimaryActionFontSize = "1.25rem";
|
|
516
575
|
export const utrechtButtonPrimaryActionLineHeight = "1.875rem";
|
|
517
|
-
export const
|
|
518
|
-
export const
|
|
519
|
-
export const
|
|
576
|
+
export const utrechtButtonPrimaryActionPressedBackgroundColor = "#162945";
|
|
577
|
+
export const utrechtButtonPrimaryActionPressedBorderColor = "transparent";
|
|
578
|
+
export const utrechtButtonPrimaryActionPressedColor = "#fff";
|
|
579
|
+
export const utrechtButtonSecondaryActionHoverBackgroundColor = "#dce3ea";
|
|
580
|
+
export const utrechtButtonSecondaryActionHoverBorderColor = "#162f50";
|
|
581
|
+
export const utrechtButtonSecondaryActionHoverColor = "#162f50";
|
|
520
582
|
export const utrechtButtonSecondaryActionBackgroundColor = "transparent";
|
|
521
583
|
export const utrechtButtonSecondaryActionBorderColor = "#154273";
|
|
522
584
|
export const utrechtButtonSecondaryActionColor = "#154273";
|
|
523
585
|
export const utrechtButtonSecondaryActionDisabledBackgroundColor = "transparent";
|
|
524
|
-
export const utrechtButtonSecondaryActionDisabledBorderColor = "#
|
|
586
|
+
export const utrechtButtonSecondaryActionDisabledBorderColor = "#95a9c0";
|
|
525
587
|
export const utrechtButtonSecondaryActionDisabledColor = "#738eab";
|
|
526
|
-
export const utrechtButtonSecondaryActionFocusBackgroundColor = "#
|
|
588
|
+
export const utrechtButtonSecondaryActionFocusBackgroundColor = "#dce3ea";
|
|
527
589
|
export const utrechtButtonSecondaryActionFocusBorderColor = "transparent";
|
|
528
|
-
export const utrechtButtonSecondaryActionFocusColor = "#
|
|
590
|
+
export const utrechtButtonSecondaryActionFocusColor = "#162f50";
|
|
529
591
|
export const utrechtButtonSecondaryActionFontWeight = 700;
|
|
530
592
|
export const utrechtButtonSecondaryActionActiveBackgroundColor = "#95a9c0";
|
|
531
|
-
export const utrechtButtonSecondaryActionActiveBorderColor = "#
|
|
532
|
-
export const utrechtButtonSecondaryActionActiveColor = "#
|
|
593
|
+
export const utrechtButtonSecondaryActionActiveBorderColor = "#162945";
|
|
594
|
+
export const utrechtButtonSecondaryActionActiveColor = "#162f50";
|
|
533
595
|
export const utrechtButtonSecondaryActionFontSize = "1.25rem";
|
|
534
596
|
export const utrechtButtonSecondaryActionLineHeight = "1.875rem";
|
|
597
|
+
export const utrechtButtonSecondaryActionPressedBackgroundColor = "#b8c6d5";
|
|
598
|
+
export const utrechtButtonSecondaryActionPressedBorderColor = "#162945";
|
|
599
|
+
export const utrechtButtonSecondaryActionPressedColor = "#162945";
|
|
535
600
|
export const utrechtButtonSubtleFontSize = "1.25rem";
|
|
536
601
|
export const utrechtButtonSubtleFontWeight = 700;
|
|
537
|
-
export const utrechtButtonSubtleHoverBackgroundColor = "
|
|
602
|
+
export const utrechtButtonSubtleHoverBackgroundColor = "#dce3ea";
|
|
538
603
|
export const utrechtButtonSubtleHoverBorderColor = "transparent";
|
|
539
604
|
export const utrechtButtonSubtleHoverColor = "#162f50";
|
|
540
605
|
export const utrechtButtonSubtleBackgroundColor = "transparent";
|
|
@@ -545,11 +610,17 @@ export const utrechtButtonSubtleDisabledBorderColor = "transparent";
|
|
|
545
610
|
export const utrechtButtonSubtleDisabledColor = "#b8c6d5";
|
|
546
611
|
export const utrechtButtonSubtleFocusBackgroundColor = "#dce3ea";
|
|
547
612
|
export const utrechtButtonSubtleFocusBorderColor = "transparent";
|
|
548
|
-
export const utrechtButtonSubtleFocusColor = "#
|
|
549
|
-
export const utrechtButtonSubtleActiveBackgroundColor = "
|
|
613
|
+
export const utrechtButtonSubtleFocusColor = "#162f50";
|
|
614
|
+
export const utrechtButtonSubtleActiveBackgroundColor = "#95a9c0";
|
|
550
615
|
export const utrechtButtonSubtleActiveBorderColor = "transparent";
|
|
551
616
|
export const utrechtButtonSubtleActiveColor = "#0d2845";
|
|
552
617
|
export const utrechtButtonSubtleLineHeight = "1.875rem";
|
|
618
|
+
export const utrechtButtonSubtlePressedBackgroundColor = "#b8c6d5";
|
|
619
|
+
export const utrechtButtonSubtlePressedBorderColor = "transparent";
|
|
620
|
+
export const utrechtButtonSubtlePressedColor = "#162945";
|
|
621
|
+
export const utrechtButtonPressedBackgroundColor = "#1E293B";
|
|
622
|
+
export const utrechtButtonPressedBorderColor = "transparent";
|
|
623
|
+
export const utrechtButtonPressedColor = "#fff";
|
|
553
624
|
export const utrechtBreadcrumbNavLineHeight = 1.4;
|
|
554
625
|
export const utrechtBreadcrumbNavFontSize = "1.25rem";
|
|
555
626
|
export const utrechtBreadcrumbNavLinkIconSize = "24px";
|
|
@@ -573,59 +644,10 @@ export const utrechtBreadcrumbNavDividerSize = "24px";
|
|
|
573
644
|
export const utrechtBreadcrumbNavDividerColor = "#334155";
|
|
574
645
|
export const utrechtBreadcrumbNavDividerInsetBlockStart = 0;
|
|
575
646
|
export const utrechtBreadcrumbNavMarginInline = "0.5rem";
|
|
576
|
-
export const utrechtBreadcrumbNavFontFamily = "Fira Sans, Arial, Verdana, sans-serif";
|
|
647
|
+
export const utrechtBreadcrumbNavFontFamily = "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif";
|
|
577
648
|
export const utrechtBreadcrumbNavFontWeight = 400;
|
|
578
|
-
export const utrechtBlockquoteCaptionFontSize = "1.25rem";
|
|
579
|
-
export const utrechtBlockquoteCaptionFontFamily = "Fira Sans, Arial, Verdana, sans-serif";
|
|
580
|
-
export const utrechtBlockquoteCaptionLineHeight = "150%";
|
|
581
|
-
export const utrechtBlockquoteCaptionFontWeight = 400;
|
|
582
|
-
export const utrechtBlockquoteCaptionPaddingBlockStart = "0.75rem";
|
|
583
|
-
export const utrechtBlockquoteCaptionColor = "#334155";
|
|
584
|
-
export const utrechtBlockquoteContentFontFamily = "RijksoverheidSerifWeb, 'Times New Roman', serif";
|
|
585
|
-
export const utrechtBlockquoteContentLineHeight = "150%";
|
|
586
|
-
export const utrechtBlockquoteContentFontWeight = 400;
|
|
587
|
-
export const utrechtBlockquoteContentFontSize = "1.5rem";
|
|
588
|
-
export const utrechtBlockquoteContentColor = "#0F172A";
|
|
589
|
-
export const utrechtBlockquoteMarginBlockEnd = 0;
|
|
590
|
-
export const utrechtBlockquoteMarginBlockStart = 0;
|
|
591
|
-
export const utrechtBlockquoteMarginInlineEnd = 0;
|
|
592
|
-
export const utrechtBlockquoteMarginInlineStart = 0;
|
|
593
|
-
export const utrechtBlockquotePaddingBlockEnd = "2rem";
|
|
594
|
-
export const utrechtBlockquotePaddingBlockStart = "2rem";
|
|
595
|
-
export const utrechtBlockquotePaddingInlineEnd = "2rem";
|
|
596
|
-
export const utrechtBlockquotePaddingInlineStart = "2rem";
|
|
597
|
-
export const utrechtBlockquoteRowGap = "0.75rem";
|
|
598
|
-
export const utrechtBlockquoteBackgroundColor = "transparent";
|
|
599
|
-
export const utrechtBlockquoteBorderColor = "#154273";
|
|
600
|
-
export const utrechtBlockquoteBorderBlockStartWidth = 0;
|
|
601
|
-
export const utrechtBlockquoteBorderBlockEndWidth = 0;
|
|
602
|
-
export const utrechtBlockquoteBorderInlineStartWidth = 0;
|
|
603
|
-
export const utrechtBlockquoteBorderInlineEndWidth = 0;
|
|
604
|
-
export const utrechtBlockquoteBorderStartStartRadius = 0;
|
|
605
|
-
export const utrechtBlockquoteBorderStartEndRadius = 0;
|
|
606
|
-
export const utrechtBlockquoteBorderEndStartRadius = 0;
|
|
607
|
-
export const utrechtBlockquoteBorderEndEndRadius = 0;
|
|
608
|
-
export const utrechtBlockquoteBorderWidth = "2px";
|
|
609
|
-
export const utrechtBlockquoteBlueCornerBorderVariationBorderColor = "#154273";
|
|
610
|
-
export const utrechtBlockquoteBlueCornerBorderVariationBorderBlockEndWidth = "2px";
|
|
611
|
-
export const utrechtBlockquoteBlueCornerBorderVariationBorderInlineEndWidth = "2px";
|
|
612
|
-
export const utrechtBlockquoteBlueCornerBorderVariationBorderEndEndRadius = "3rem";
|
|
613
|
-
export const utrechtBlockquotePinkBackgroundVariationBackgroundColor = "#F6BDE1";
|
|
614
|
-
export const utrechtBlockquotePinkBackgroundVariationBorderEndStartRadius = "3rem";
|
|
615
|
-
export const utrechtBlockquotePinkBackgroundVariationPadding = "2.5rem";
|
|
616
|
-
export const utrechtBlockquotePinkLeftBorderVariationBorderColor = "#F6BDE1";
|
|
617
|
-
export const utrechtBlockquotePinkLeftBorderVariationBorderInlineStartWidth = "0.75rem";
|
|
618
|
-
export const utrechtBlockquotePinkLeftBorderVariationPaddingInlineStart = "2.5rem";
|
|
619
|
-
export const utrechtBlockquotePinkLeftBorderVariationPaddingInlineEnd = "2.5rem";
|
|
620
|
-
export const utrechtBlockquotePinkLeftBorderVariationPaddingBlockStart = "1.5rem";
|
|
621
|
-
export const utrechtBlockquotePinkLeftBorderVariationPaddingBlockEnd = "1.5rem";
|
|
622
|
-
export const utrechtBlockquotePinkCornerBorderVariationBorderColor = "#F6BDE1";
|
|
623
|
-
export const utrechtBlockquotePinkCornerBorderVariationBorderBlockStartWidth = "0.25rem";
|
|
624
|
-
export const utrechtBlockquotePinkCornerBorderVariationBorderInlineStartWidth = "0.25rem";
|
|
625
|
-
export const utrechtBlockquotePinkCornerBorderVariationBorderStartStartRadius = "3rem";
|
|
626
|
-
export const utrechtBlockquotePinkCornerBorderVariationPadding = "2.5rem";
|
|
627
649
|
export const utrechtArticleMaxInlineSize = "75ch";
|
|
628
|
-
export const utrechtAlertHeadingFontFamily = "Fira Sans, Arial, Verdana, sans-serif";
|
|
650
|
+
export const utrechtAlertHeadingFontFamily = "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif";
|
|
629
651
|
export const utrechtAlertHeadingFontWeight = 700;
|
|
630
652
|
export const utrechtAlertHeadingLineHeight = "150%";
|
|
631
653
|
export const utrechtAlertHeadingFontSize = "1.25rem";
|
|
@@ -685,7 +707,7 @@ export const utrechtAccordionButtonActiveColor = "#0F172A";
|
|
|
685
707
|
export const utrechtAccordionButtonActiveRowGap = 0;
|
|
686
708
|
export const utrechtDocumentBackgroundColor = "#fff";
|
|
687
709
|
export const utrechtDocumentColor = "#0F172A";
|
|
688
|
-
export const utrechtDocumentFontFamily = "Fira Sans, Arial, Verdana, sans-serif";
|
|
710
|
+
export const utrechtDocumentFontFamily = "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif";
|
|
689
711
|
export const utrechtDocumentFontSize = "1.25rem";
|
|
690
712
|
export const utrechtDocumentLineHeight = "150%";
|
|
691
713
|
export const utrechtDocumentFontWeight = 400;
|
|
@@ -700,6 +722,27 @@ export const utrechtFocusOutlineOffset = "0.125rem";
|
|
|
700
722
|
export const utrechtFocusOutlineStyle = "solid";
|
|
701
723
|
export const utrechtFocusOutlineWidth = "2px";
|
|
702
724
|
export const utrechtFocusInverseOutlineColor = "#fff";
|
|
725
|
+
export const rhcKeepComment = "⚠️ Deze tokens zijn legacy en worden vervangen door de tokenset components/blockquote.";
|
|
726
|
+
export const rhcKeepTopLeftBorderRadiusTopLeft = "48px";
|
|
727
|
+
export const rhcKeepTopLeftBorderRadiusTopRight = 0;
|
|
728
|
+
export const rhcKeepTopLeftBorderRadiusBottomRight = 0;
|
|
729
|
+
export const rhcKeepTopLeftBorderRadiusBottomLeft = 0;
|
|
730
|
+
export const rhcKeepTopRightBorderRadiusTopRight = "48px";
|
|
731
|
+
export const rhcKeepTopRightBorderRadiusTopLeft = 0;
|
|
732
|
+
export const rhcKeepTopRightBorderRadiusBottomRight = 0;
|
|
733
|
+
export const rhcKeepTopRightBorderRadiusBottomLeft = 0;
|
|
734
|
+
export const rhcKeepBottomRightBorderRadiusTopLeft = 0;
|
|
735
|
+
export const rhcKeepBottomRightBorderRadiusTopRight = 0;
|
|
736
|
+
export const rhcKeepBottomRightBorderRadiusBottomRight = "48px";
|
|
737
|
+
export const rhcKeepBottomRightBorderRadiusBottomLeft = 0;
|
|
738
|
+
export const rhcKeepBottomLeftBorderRadiusTopLeft = 0;
|
|
739
|
+
export const rhcKeepBottomLeftBorderRadiusTopRight = 0;
|
|
740
|
+
export const rhcKeepBottomLeftBorderRadiusBottomRight = 0;
|
|
741
|
+
export const rhcKeepBottomLeftBorderRadiusBottomLeft = "48px";
|
|
742
|
+
export const rhcRoundedCornerXsBorderRadius = "24px";
|
|
743
|
+
export const rhcRoundedCornerMdBorderRadius = "48px";
|
|
744
|
+
export const rhcRoundedCornerXlBorderRadius = "96px";
|
|
745
|
+
export const rhcRoundedCornerBorderWidth = "2px";
|
|
703
746
|
export const rhcSubNavBarBackgroundColor = "#f2f4f6";
|
|
704
747
|
export const rhcSubNavBarColumnGap = "0.5rem";
|
|
705
748
|
export const rhcSubNavBarColumnWidth = "375px";
|
|
@@ -729,7 +772,7 @@ export const rhcSidenavLinkLineHeight = "150%";
|
|
|
729
772
|
export const rhcSidenavLinkIconSize = "24px";
|
|
730
773
|
export const rhcSidenavLinkIconMarginInline = "0.5rem";
|
|
731
774
|
export const rhcSidenavLinkFontSize = "1.25rem";
|
|
732
|
-
export const rhcSidenavLinkFontFamily = "Fira Sans, Arial, Verdana, sans-serif";
|
|
775
|
+
export const rhcSidenavLinkFontFamily = "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif";
|
|
733
776
|
export const rhcSidenavLinkFontWeight = 400;
|
|
734
777
|
export const rhcSidenavLinkCurrentFontWeight = 700;
|
|
735
778
|
export const rhcSidenavLinkCurrentColor = "#0F172A";
|
|
@@ -761,7 +804,7 @@ export const rhcNavigationListItemIconSize = "24px";
|
|
|
761
804
|
export const rhcNavigationListItemContentFontSize = "1.125rem";
|
|
762
805
|
export const rhcNavigationListItemContentColumnGap = "0.5rem";
|
|
763
806
|
export const rhcNavigationListItemContentRowGap = "0.25rem";
|
|
764
|
-
export const rhcNavigationListItemLabelFontFamily = "Fira Sans, Arial, Verdana, sans-serif";
|
|
807
|
+
export const rhcNavigationListItemLabelFontFamily = "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif";
|
|
765
808
|
export const rhcNavigationListItemLabelFontSize = "1.875rem";
|
|
766
809
|
export const rhcNavigationListItemLabelFontWeight = 700;
|
|
767
810
|
export const rhcNavigationListItemLabelLineHeight = "150%";
|
|
@@ -815,7 +858,7 @@ export const rhcMessageListItemPaddingInline = "1rem";
|
|
|
815
858
|
export const rhcMessageListItemContentFontSize = "1.125rem";
|
|
816
859
|
export const rhcMessageListItemContentColumnGap = "0.5rem";
|
|
817
860
|
export const rhcMessageListItemContentRowGap = "0.5rem";
|
|
818
|
-
export const rhcMessageListItemLabelFontFamily = "Fira Sans, Arial, Verdana, sans-serif";
|
|
861
|
+
export const rhcMessageListItemLabelFontFamily = "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif";
|
|
819
862
|
export const rhcMessageListItemLabelFontSize = "1.25rem";
|
|
820
863
|
export const rhcMessageListItemLabelFontWeight = 700;
|
|
821
864
|
export const rhcMessageListItemLabelLineHeight = "150%";
|
|
@@ -832,7 +875,7 @@ export const rhcLogoSubtitleFontWeight = 400;
|
|
|
832
875
|
export const rhcLogoSubtitleLineHeight = "1rem";
|
|
833
876
|
export const rhcLogoSubtitleFontSize = "0.775rem";
|
|
834
877
|
export const rhcLogoColumnGap = "12px";
|
|
835
|
-
export const rhcLogoFontFamily = "Fira Sans, Arial, Verdana, sans-serif";
|
|
878
|
+
export const rhcLogoFontFamily = "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif";
|
|
836
879
|
export const rhcLogoColor = "#154273";
|
|
837
880
|
export const rhcLinkListCardBackgroundColor = "#fff";
|
|
838
881
|
export const rhcLinkListCardPaddingBlockStart = "1.5rem";
|
|
@@ -848,11 +891,11 @@ export const rhcIconOnlyButtonPaddingInlineStart = "0.75rem";
|
|
|
848
891
|
export const rhcHeroHeadingFontWeight = 700;
|
|
849
892
|
export const rhcHeroHeadingLineHeight = "125%";
|
|
850
893
|
export const rhcHeroHeadingFontSize = "1.875rem";
|
|
851
|
-
export const rhcHeroHeadingFontFamily = "Fira Sans, Arial, Verdana, sans-serif";
|
|
894
|
+
export const rhcHeroHeadingFontFamily = "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif";
|
|
852
895
|
export const rhcHeroSubHeadingFontWeight = 400;
|
|
853
896
|
export const rhcHeroSubHeadingLineHeight = "150%";
|
|
854
897
|
export const rhcHeroSubHeadingFontSize = "1.25rem";
|
|
855
|
-
export const rhcHeroSubHeadingFontFamily = "Fira Sans, Arial, Verdana, sans-serif";
|
|
898
|
+
export const rhcHeroSubHeadingFontFamily = "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif";
|
|
856
899
|
export const rhcHeroMessageBackgroundColor = "#154273";
|
|
857
900
|
export const rhcHeroMessageColor = "#fff";
|
|
858
901
|
export const rhcHeroMessageRowGap = "0.125rem";
|
|
@@ -955,7 +998,7 @@ export const rhcCardAsLinkHorizontalPaddingBlockStart = 0;
|
|
|
955
998
|
export const rhcCardAsLinkHorizontalPaddingInlineEnd = "1rem";
|
|
956
999
|
export const rhcCardAsLinkHorizontalPaddingInlineStart = "1rem";
|
|
957
1000
|
export const rhcCardAsLinkHorizontalHeadingInlineSize = "200px";
|
|
958
|
-
export const rhcAccordionButtonFontFamily = "Fira Sans, Arial, Verdana, sans-serif";
|
|
1001
|
+
export const rhcAccordionButtonFontFamily = "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif";
|
|
959
1002
|
export const rhcAccordionButtonFontSize = "1.25rem";
|
|
960
1003
|
export const rhcAccordionButtonFontWeight = 400;
|
|
961
1004
|
export const rhcAccordionButtonLineHeight = "150%";
|
|
@@ -972,32 +1015,17 @@ export const rhcAccordionSectionBorderColor = "#94A3B8";
|
|
|
972
1015
|
export const rhcAccordionHeaderMargin = 0;
|
|
973
1016
|
export const rhcAccordionBorderRadius = "0px";
|
|
974
1017
|
export const rhcAccordionColor = "#0F172A";
|
|
975
|
-
export const rhcKeepTopLeftBorderRadiusTopLeft = "48px";
|
|
976
|
-
export const rhcKeepTopLeftBorderRadiusTopRight = 0;
|
|
977
|
-
export const rhcKeepTopLeftBorderRadiusBottomRight = 0;
|
|
978
|
-
export const rhcKeepTopLeftBorderRadiusBottomLeft = 0;
|
|
979
|
-
export const rhcKeepTopRightBorderRadiusTopRight = "48px";
|
|
980
|
-
export const rhcKeepTopRightBorderRadiusTopLeft = 0;
|
|
981
|
-
export const rhcKeepTopRightBorderRadiusBottomRight = 0;
|
|
982
|
-
export const rhcKeepTopRightBorderRadiusBottomLeft = 0;
|
|
983
|
-
export const rhcKeepBottomRightBorderRadiusTopLeft = 0;
|
|
984
|
-
export const rhcKeepBottomRightBorderRadiusTopRight = 0;
|
|
985
|
-
export const rhcKeepBottomRightBorderRadiusBottomRight = "48px";
|
|
986
|
-
export const rhcKeepBottomRightBorderRadiusBottomLeft = 0;
|
|
987
|
-
export const rhcKeepBottomLeftBorderRadiusTopLeft = 0;
|
|
988
|
-
export const rhcKeepBottomLeftBorderRadiusTopRight = 0;
|
|
989
|
-
export const rhcKeepBottomLeftBorderRadiusBottomRight = 0;
|
|
990
|
-
export const rhcKeepBottomLeftBorderRadiusBottomLeft = "48px";
|
|
991
1018
|
export const rhcBorderRadiusSm = "2.5px";
|
|
992
1019
|
export const rhcBorderRadiusMd = "5px";
|
|
993
|
-
export const rhcBorderRadiusKeep = "48px";
|
|
994
1020
|
export const rhcBorderRadiusCircle = "999px";
|
|
995
1021
|
export const rhcBorderRadiusNone = "0px";
|
|
996
1022
|
export const rhcColorFocusOutline = "#000";
|
|
997
1023
|
export const rhcColorForegroundDefault = "#0F172A";
|
|
998
1024
|
export const rhcColorForegroundSubdued = "#334155";
|
|
999
|
-
export const rhcColorForegroundOnEmphasis = "#fff";
|
|
1000
1025
|
export const rhcColorForegroundLink = "#01689b";
|
|
1026
|
+
export const rhcColorForegroundOnDarkColor = "#fff";
|
|
1027
|
+
export const rhcColorForegroundOnLightColor = "#000";
|
|
1028
|
+
export const rhcColorForegroundOnEmphasis = "#fff";
|
|
1001
1029
|
export const rhcColorBorderDefault = "#64748B";
|
|
1002
1030
|
export const rhcColorBorderSubdued = "#94A3B8";
|
|
1003
1031
|
export const rhcColorBorderStrong = "#0F172A";
|
|
@@ -1011,6 +1039,7 @@ export const rhcColorFeedbackErrorSubdued = "#f9dfdd";
|
|
|
1011
1039
|
export const rhcColorFeedbackWarningDefault = "#ffb612";
|
|
1012
1040
|
export const rhcColorFeedbackWarningSubdued = "#fff4db";
|
|
1013
1041
|
export const rhcColorAccent500 = "#8fcae7";
|
|
1042
|
+
export const rhcColorAccent2500 = "#f092cd";
|
|
1014
1043
|
export const rhcColorPrimary50 = "#dce3ea";
|
|
1015
1044
|
export const rhcColorPrimary100 = "#b8c6d5";
|
|
1016
1045
|
export const rhcColorPrimary200 = "#95a9c0";
|
|
@@ -1182,7 +1211,7 @@ export const rhcFontWeightRegular = 400;
|
|
|
1182
1211
|
export const rhcFontWeightChosenRegular = 400;
|
|
1183
1212
|
export const rhcFontWeightLight = 300;
|
|
1184
1213
|
export const rhcFontWeightThin = 200;
|
|
1185
|
-
export const rhcFontFamilyPrimary = "Fira Sans, Arial, Verdana, sans-serif";
|
|
1214
|
+
export const rhcFontFamilyPrimary = "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif";
|
|
1186
1215
|
export const rhcFontFamilySecondary = "RijksoverheidSerifWeb, 'Times New Roman', serif";
|
|
1187
1216
|
export const rhcBorderWidthDefault = "1px";
|
|
1188
1217
|
export const rhcBorderWidthM = "2px";
|
|
@@ -1199,7 +1228,7 @@ export const rhcSpace500 = "2.5rem";
|
|
|
1199
1228
|
export const rhcSpace600 = "3rem";
|
|
1200
1229
|
export const rhcSpace700 = "3.5rem";
|
|
1201
1230
|
export const nlSkipLinkFontWeight = 700;
|
|
1202
|
-
export const nlSkipLinkFontFamily = "Fira Sans, Arial, Verdana, sans-serif";
|
|
1231
|
+
export const nlSkipLinkFontFamily = "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif";
|
|
1203
1232
|
export const nlSkipLinkFontSize = "1.25rem";
|
|
1204
1233
|
export const nlSkipLinkLineHeight = "150%";
|
|
1205
1234
|
export const nlSkipLinkMinBlockSize = "48px";
|
|
@@ -1227,7 +1256,7 @@ export const nlSkipLinkBoxBlockEndShadowColor = "#0000001a";
|
|
|
1227
1256
|
export const nlSkipLinkTextDecoration = "underline";
|
|
1228
1257
|
export const nlSkipLinkTextUnderlineOffset = "0.125rem";
|
|
1229
1258
|
export const nlParagraphColor = "#0F172A";
|
|
1230
|
-
export const nlParagraphFontFamily = "Fira Sans, Arial, Verdana, sans-serif";
|
|
1259
|
+
export const nlParagraphFontFamily = "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif";
|
|
1231
1260
|
export const nlParagraphFontSize = "1.25rem";
|
|
1232
1261
|
export const nlParagraphFontWeight = 400;
|
|
1233
1262
|
export const nlParagraphLineHeight = "150%";
|
|
@@ -1255,40 +1284,40 @@ export const nlLinkIconSize = "24px";
|
|
|
1255
1284
|
export const nlLinkColumnGap = "0.25rem";
|
|
1256
1285
|
export const nlLinkTextDecorationThickness = "auto";
|
|
1257
1286
|
export const nlLinkTextUnderlineOffset = "0.125rem";
|
|
1258
|
-
export const nlLinkFontFamily = "Fira Sans, Arial, Verdana, sans-serif";
|
|
1287
|
+
export const nlLinkFontFamily = "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif";
|
|
1259
1288
|
export const nlLinkFontWeight = 400;
|
|
1260
1289
|
export const nlLinkFontSize = "1.25rem";
|
|
1261
1290
|
export const nlLinkLineHeight = "150%";
|
|
1262
1291
|
export const nlHeadingLevel1Color = "#154273";
|
|
1263
|
-
export const nlHeadingLevel1FontFamily = "Fira Sans, Arial, Verdana, sans-serif";
|
|
1292
|
+
export const nlHeadingLevel1FontFamily = "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif";
|
|
1264
1293
|
export const nlHeadingLevel1FontWeight = 700;
|
|
1265
1294
|
export const nlHeadingLevel1LineHeight = "125%";
|
|
1266
1295
|
export const nlHeadingLevel1FontSize = "3.125rem";
|
|
1267
1296
|
export const nlHeadingLevel1MarginBlockEnd = 0;
|
|
1268
1297
|
export const nlHeadingLevel1MarginBlockStart = 0;
|
|
1269
1298
|
export const nlHeadingLevel2Color = "#154273";
|
|
1270
|
-
export const nlHeadingLevel2FontFamily = "Fira Sans, Arial, Verdana, sans-serif";
|
|
1299
|
+
export const nlHeadingLevel2FontFamily = "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif";
|
|
1271
1300
|
export const nlHeadingLevel2FontWeight = 700;
|
|
1272
1301
|
export const nlHeadingLevel2LineHeight = "125%";
|
|
1273
1302
|
export const nlHeadingLevel2FontSize = "2.5rem";
|
|
1274
1303
|
export const nlHeadingLevel2MarginBlockEnd = 0;
|
|
1275
1304
|
export const nlHeadingLevel2MarginBlockStart = 0;
|
|
1276
1305
|
export const nlHeadingLevel3Color = "#154273";
|
|
1277
|
-
export const nlHeadingLevel3FontFamily = "Fira Sans, Arial, Verdana, sans-serif";
|
|
1306
|
+
export const nlHeadingLevel3FontFamily = "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif";
|
|
1278
1307
|
export const nlHeadingLevel3FontWeight = 700;
|
|
1279
1308
|
export const nlHeadingLevel3LineHeight = "125%";
|
|
1280
1309
|
export const nlHeadingLevel3FontSize = "1.875rem";
|
|
1281
1310
|
export const nlHeadingLevel3MarginBlockEnd = 0;
|
|
1282
1311
|
export const nlHeadingLevel3MarginBlockStart = 0;
|
|
1283
1312
|
export const nlHeadingLevel4Color = "#154273";
|
|
1284
|
-
export const nlHeadingLevel4FontFamily = "Fira Sans, Arial, Verdana, sans-serif";
|
|
1313
|
+
export const nlHeadingLevel4FontFamily = "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif";
|
|
1285
1314
|
export const nlHeadingLevel4FontWeight = 700;
|
|
1286
1315
|
export const nlHeadingLevel4LineHeight = "125%";
|
|
1287
1316
|
export const nlHeadingLevel4FontSize = "1.5rem";
|
|
1288
1317
|
export const nlHeadingLevel4MarginBlockEnd = 0;
|
|
1289
1318
|
export const nlHeadingLevel4MarginBlockStart = 0;
|
|
1290
1319
|
export const nlHeadingLevel5Color = "#154273";
|
|
1291
|
-
export const nlHeadingLevel5FontFamily = "Fira Sans, Arial, Verdana, sans-serif";
|
|
1320
|
+
export const nlHeadingLevel5FontFamily = "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif";
|
|
1292
1321
|
export const nlHeadingLevel5FontWeight = 700;
|
|
1293
1322
|
export const nlHeadingLevel5LineHeight = "125%";
|
|
1294
1323
|
export const nlHeadingLevel5FontSize = "1.25rem";
|
|
@@ -1301,7 +1330,7 @@ export const nlNumberBadgeMinInlineSize = "24px";
|
|
|
1301
1330
|
export const nlNumberBadgeFontWeight = 700;
|
|
1302
1331
|
export const nlNumberBadgeBorderWidth = "0px";
|
|
1303
1332
|
export const nlNumberBadgeBorderRadius = "999px";
|
|
1304
|
-
export const nlNumberBadgeFontFamily = "Fira Sans, Arial, Verdana, sans-serif";
|
|
1333
|
+
export const nlNumberBadgeFontFamily = "RijksoverheidSansWeb, Fira Sans, Arial, Verdana, sans-serif";
|
|
1305
1334
|
export const nlNumberBadgeBackgroundColor = "#154273";
|
|
1306
1335
|
export const nlNumberBadgeBorderColor = "transparent";
|
|
1307
1336
|
export const nlNumberBadgeColor = "#fff";
|