@rijkshuisstijl-community/design-tokens 1.0.0-alpha.3 → 1.0.0-alpha.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.
Files changed (43) hide show
  1. package/dist/_variables.scss +303 -7
  2. package/dist/index.css +303 -7
  3. package/dist/index.d.ts +303 -7
  4. package/dist/index.js +303 -7
  5. package/dist/index.json +302 -6
  6. package/dist/index.tokens.json +677 -9
  7. package/dist/root.css +303 -7
  8. package/dist/tokens.d.ts +676 -9
  9. package/dist/tokens.js +6492 -77
  10. package/dist/variables.less +303 -7
  11. package/package.json +4 -3
  12. package/src/brand/rhc/color.tokens.json +96 -6
  13. package/src/brand/rhc/font.tokens.json +34 -0
  14. package/src/common/utrecht/action.tokens.json +10 -0
  15. package/src/common/utrecht/focus.tokens.json +17 -0
  16. package/src/components/basiselementen/document.tokens.json +15 -0
  17. package/src/components/rvo/button.tokens.json +33 -0
  18. package/src/components/rvo/checkbox.tokens.json +32 -0
  19. package/src/components/rvo/custom-radio-button.tokens.json +24 -0
  20. package/src/components/rvo/heading.tokens.json +24 -0
  21. package/src/components/rvo/logo.tokens.json +13 -0
  22. package/src/components/rvo/select.tokens.json +15 -0
  23. package/src/components/utrecht/breadcrumbs.tokens.json +66 -0
  24. package/src/components/utrecht/button.tokens.json +120 -0
  25. package/src/components/utrecht/custom-radio-button.tokens.json +53 -0
  26. package/src/components/utrecht/data-list.tokens.json +91 -0
  27. package/src/components/utrecht/document.tokens.json +12 -0
  28. package/src/components/utrecht/form-field.tokens.json +21 -0
  29. package/src/components/utrecht/form-fieldset.tokens.json +27 -0
  30. package/src/components/utrecht/form-input.tokens.json +42 -0
  31. package/src/components/utrecht/form-label.tokens.json +23 -0
  32. package/src/components/utrecht/heading-1.tokens.json +13 -0
  33. package/src/components/utrecht/heading-2.tokens.json +13 -0
  34. package/src/components/utrecht/heading-3.tokens.json +13 -0
  35. package/src/components/utrecht/heading-4.tokens.json +13 -0
  36. package/src/components/utrecht/heading-5.tokens.json +13 -0
  37. package/src/components/utrecht/heading-6.tokens.json +13 -0
  38. package/src/components/utrecht/link.tokens.json +44 -0
  39. package/src/components/utrecht/ordered-list.tokens.json +19 -0
  40. package/src/components/utrecht/paragraph.tokens.json +23 -0
  41. package/src/components/utrecht/unordered-list.tokens.json +31 -0
  42. package/src/common/rhc/focus.tokens.json +0 -7
  43. package/src/components/rhc/button.tokens.json +0 -8
@@ -1,20 +1,688 @@
1
1
  {
2
- "rhc": {
2
+ "basiselementen": {
3
3
  "color": {
4
- "blue": {
5
- "50": "cornflowerblue"
4
+ "logoblauw": "#154273",
5
+ "hemelblauw": "#007bc7",
6
+ "hemelblauw-tint1": "#b2d7ee",
7
+ "hemelblauw-tint2": "#d9ebf7",
8
+ "lichtblauw": "#8fcae7",
9
+ "lichtblauw-tint1": "#ddeff8",
10
+ "lichtblauw-tint2": "#eef7fb",
11
+ "donkerblauw": "#01689b",
12
+ "donkerblauw-shade1": "#01496D",
13
+ "oranje": "#e17000",
14
+ "oranje-tint1": "#f6d4b2",
15
+ "oranje-tint2": "#fbead9",
16
+ "groen": "#39870c",
17
+ "groen-tint1": "#c3dbb6",
18
+ "groen-tint2": "#e1eddb",
19
+ "donkergroen": "#275e08",
20
+ "donkergeel": "#ffb612",
21
+ "donkergeel-tint1": "#ffe9b7",
22
+ "donkergeel-tint2": "#fff4dc",
23
+ "rood": "#d51b1e",
24
+ "rood-tint1": "#f2bfbb",
25
+ "rood-shade1": "#4d0a0b",
26
+ "rood-tint2": "#f9dfdd",
27
+ "grijs1": "#f3f3f3",
28
+ "grijs2": "#e6e6e6",
29
+ "grijs3": "#cccccc",
30
+ "grijs4": "#b4b4b4",
31
+ "grijs5": "#999999",
32
+ "grijs6": "#696969",
33
+ "grijs7": "#535353",
34
+ "zwart": "#000000",
35
+ "wit": "#ffffff"
36
+ },
37
+ "font": {
38
+ "sans-serif": {
39
+ "font-family": "'RijksoverheidSansWebText'"
40
+ },
41
+ "sans-serif-fallback": {
42
+ "font-family": "'Calibri', 'Verdana', 'Arial', sans-serif"
43
+ },
44
+ "serif": {
45
+ "font-family": "'RijksoverheidSerifWeb'"
46
+ },
47
+ "serif-fallback": {
48
+ "font-family": "'Times New Roman', serif"
49
+ }
50
+ },
51
+ "font-weight": {
52
+ "normal": "400",
53
+ "bold": "700"
54
+ },
55
+ "root": {
56
+ "font-size": "100%"
57
+ },
58
+ "document": {
59
+ "background-color": "#ffffff",
60
+ "color": "#000000",
61
+ "font-family": "'RijksoverheidSansWebText'",
62
+ "font-size": "18px",
63
+ "font-weight": {},
64
+ "line-height": "150%"
65
+ }
66
+ },
67
+ "utrecht": {
68
+ "action": {
69
+ "activate": {
70
+ "cursor": "pointer"
6
71
  },
7
- "grey": {
8
- "0": "black",
9
- "100": "white"
72
+ "busy": {
73
+ "cursor": "wait"
74
+ },
75
+ "disabled": {
76
+ "cursor": "not-allowed"
77
+ },
78
+ "submit": {
79
+ "cursor": "pointer"
10
80
  }
11
81
  },
12
82
  "focus": {
13
- "outline-offset": "2px"
83
+ "background-color": {},
84
+ "outline-color": "#000000",
85
+ "outline-offset": "3px",
86
+ "outline-style": "dashed",
87
+ "outline-width": "2px",
88
+ "inverse": {
89
+ "outline-color": "#ffffff"
90
+ }
14
91
  },
15
92
  "button": {
16
- "background-color": "cornflowerblue",
17
- "color": "white"
93
+ "rvo-xs": {
94
+ "font-size": "0.875rem",
95
+ "font-weight": "400",
96
+ "padding-block-start": "4px",
97
+ "padding-block-end": "4px",
98
+ "padding-inline-start": "calc(8px + 4px)",
99
+ "padding-inline-end": "calc(8px + 4px)",
100
+ "min-block-size": "auto"
101
+ },
102
+ "rvo-sm": {
103
+ "font-size": "1rem",
104
+ "padding-block-start": "4px",
105
+ "padding-block-end": "4px",
106
+ "padding-inline-start": "12px",
107
+ "padding-inline-end": "12px",
108
+ "min-block-size": "30px"
109
+ },
110
+ "rvo-md": {
111
+ "font-size": "18px",
112
+ "padding-block-start": "8px",
113
+ "padding-block-end": "8px",
114
+ "padding-inline-start": "16px",
115
+ "padding-inline-end": "16px"
116
+ },
117
+ "rvo-tertiary-action": {
118
+ "text-decoration": "none"
119
+ },
120
+ "$comment": "https://www.rijkshuisstijl.nl/basiselementen/basiselementen-online/online-componenten/buttons",
121
+ "background-color": "#01689b",
122
+ "border-bottom-color": {},
123
+ "border-bottom-width": {},
124
+ "border-color": {},
125
+ "border-radius": {},
126
+ "border-width": "0",
127
+ "color": "#ffffff",
128
+ "font-size": "18px",
129
+ "font-weight": {},
130
+ "inline-size": {},
131
+ "letter-spacing": {},
132
+ "line-height": {},
133
+ "margin-block-end": {},
134
+ "margin-block-start": {},
135
+ "margin-inline-end": {},
136
+ "margin-inline-start": {},
137
+ "min-block-size": {},
138
+ "min-inline-size": {},
139
+ "padding-block-start": "8px",
140
+ "padding-block-end": "8px",
141
+ "padding-inline-start": "16px",
142
+ "padding-inline-end": "16px",
143
+ "text-transform": {},
144
+ "disabled": {
145
+ "border-color": "#e6e6e6",
146
+ "background-color": "#e6e6e6",
147
+ "color": "#cccccc"
148
+ },
149
+ "primary-action": {
150
+ "background-color": {},
151
+ "border-color": {},
152
+ "border-width": {},
153
+ "color": {},
154
+ "active": {
155
+ "background-color": "#01496D"
156
+ },
157
+ "focus": {
158
+ "background-color": "#01689b"
159
+ },
160
+ "hover": {
161
+ "background-color": "#01496D"
162
+ },
163
+ "disabled": {
164
+ "border-color": "#e6e6e6",
165
+ "background-color": "#e6e6e6",
166
+ "color": "#cccccc"
167
+ },
168
+ "warning": {
169
+ "background-color": "#d51b1e",
170
+ "color": "#ffffff",
171
+ "active": {
172
+ "background-color": "#d51b1e"
173
+ },
174
+ "focus": {
175
+ "background-color": "#d51b1e"
176
+ },
177
+ "hover": {
178
+ "background-color": "#4d0a0b"
179
+ },
180
+ "disabled": {
181
+ "border-color": "#e6e6e6",
182
+ "background-color": "#e6e6e6",
183
+ "color": "#cccccc"
184
+ }
185
+ }
186
+ },
187
+ "secondary-action": {
188
+ "background-color": "#ffffff",
189
+ "border-color": "#01689b",
190
+ "border-width": "1px",
191
+ "color": "#01689b",
192
+ "active": {
193
+ "background-color": "#01496D",
194
+ "border-color": "#01496D",
195
+ "color": "#ffffff"
196
+ },
197
+ "focus": {
198
+ "color": "#01689b",
199
+ "border-color": {},
200
+ "border-width": {}
201
+ },
202
+ "disabled": {
203
+ "background-color": "#ffffff",
204
+ "border-color": "#cccccc",
205
+ "color": "#cccccc"
206
+ },
207
+ "hover": {
208
+ "color": "#01496D",
209
+ "background-color": "#ffffff",
210
+ "border-color": "#01496D"
211
+ }
212
+ },
213
+ "subtle": {
214
+ "background-color": "transparent",
215
+ "color": "#d51b1e",
216
+ "font-size": "15px",
217
+ "font-weight": "700",
218
+ "hover": {
219
+ "text-decoration": "underline"
220
+ },
221
+ "disabled": {
222
+ "border-color": {},
223
+ "background-color": "transparent",
224
+ "color": "#cccccc"
225
+ },
226
+ "text-decoration": "underline",
227
+ "warning": {
228
+ "hover": {
229
+ "color": "#4d0a0b"
230
+ }
231
+ }
232
+ }
233
+ },
234
+ "breadcrumb": {
235
+ "block-size": {},
236
+ "font-family": {},
237
+ "font-size": "0.875rem",
238
+ "text-transform": {},
239
+ "divider": {
240
+ "inline-size": {}
241
+ },
242
+ "item": {
243
+ "gap": "8px",
244
+ "padding-block-start": "0",
245
+ "padding-block-end": "0",
246
+ "padding-inline-end": "0",
247
+ "padding-inline-start": "0"
248
+ },
249
+ "link": {
250
+ "background-color": {},
251
+ "color": "#007bc7",
252
+ "focus": {
253
+ "background-color": "#d9ebf7",
254
+ "color": "#000000",
255
+ "text-decoration": "none",
256
+ "text-decoration-thickness": "1px"
257
+ },
258
+ "hover": {
259
+ "color": "#01689b",
260
+ "text-decoration": "underline",
261
+ "text-decoration-thickness": "1px !important"
262
+ },
263
+ "text-decoration": "none"
264
+ }
265
+ },
266
+ "custom-radio-button": {
267
+ "size": "24px",
268
+ "border-color": "#000000",
269
+ "color": "#000000",
270
+ "border-width": "1px",
271
+ "background-color": "#ffffff",
272
+ "border-radius": "0",
273
+ "padding": {},
274
+ "icon": {
275
+ "size": "18px"
276
+ },
277
+ "active": {
278
+ "border-color": {},
279
+ "border-width": {},
280
+ "background-color": "#007bc7",
281
+ "color": {}
282
+ },
283
+ "focus": {
284
+ "border-color": {},
285
+ "border-width": {},
286
+ "background-color": {}
287
+ },
288
+ "disabled": {
289
+ "border-color": "#cccccc",
290
+ "border-width": {},
291
+ "background-color": "#ffffff",
292
+ "color": {}
293
+ },
294
+ "checked": {
295
+ "border-color": "#007bc7",
296
+ "border-width": "3px",
297
+ "background-color": "#007bc7",
298
+ "color": "#007bc7",
299
+ "active": {
300
+ "border-color": {},
301
+ "background-color": "#007bc7"
302
+ }
303
+ },
304
+ "invalid": {
305
+ "border-color": "#cccccc",
306
+ "border-width": {},
307
+ "background-color": {},
308
+ "color": {},
309
+ "active": {
310
+ "border-color": {},
311
+ "background-color": {}
312
+ }
313
+ }
314
+ },
315
+ "data-list": {
316
+ "border-color": "#b4b4b4",
317
+ "border-width": "1px",
318
+ "margin-block-end": "0",
319
+ "margin-block-start": "0",
320
+ "item-key": {
321
+ "border-inline-end-color": "#b4b4b4",
322
+ "border-inline-end-width": "1px",
323
+ "color": {},
324
+ "font-size": {},
325
+ "font-weight": "700",
326
+ "line-height": {},
327
+ "padding-block-end": "9px",
328
+ "padding-block-start": "9px",
329
+ "padding-inline-end": "18px",
330
+ "padding-inline-start": "18px"
331
+ },
332
+ "item-value": {
333
+ "color": {},
334
+ "font-size": {},
335
+ "line-height": {},
336
+ "padding-block-end": "9px",
337
+ "padding-block-start": "9px",
338
+ "padding-inline-end": "18px",
339
+ "padding-inline-start": "18px"
340
+ },
341
+ "rows": {
342
+ "border-bottom-color": "#b4b4b4",
343
+ "border-bottom-width": "1px",
344
+ "item": {
345
+ "margin-block-start": "0",
346
+ "padding-inline-start": "14px"
347
+ },
348
+ "item-value": {
349
+ "margin-block-start": "0"
350
+ },
351
+ "column": {
352
+ "inline-size": "50%",
353
+ "min-inline-size": "25ch"
354
+ },
355
+ "gap": {}
356
+ }
357
+ },
358
+ "document": {
359
+ "background-color": "#ffffff",
360
+ "color": "#000000",
361
+ "font-family": "'RijksoverheidSansWebText'",
362
+ "font-size": "18px",
363
+ "font-weight": {},
364
+ "line-height": "150%"
365
+ },
366
+ "form-field": {
367
+ "description": {
368
+ "margin-block-start": "0",
369
+ "margin-block-end": "1ex"
370
+ },
371
+ "invalid": {
372
+ "border-inline-start-color": {},
373
+ "border-inline-start-width": {},
374
+ "padding-inline-start": {}
375
+ },
376
+ "label": {
377
+ "margin-block-end": {}
378
+ },
379
+ "margin-block-end": "1ex",
380
+ "margin-block-start": "1ex",
381
+ "min-width": "100%"
382
+ },
383
+ "form-fieldset": {
384
+ "margin-block-end": "1ex",
385
+ "margin-block-start": "1ex",
386
+ "section": {
387
+ "background-color": "#ffffff",
388
+ "color": {}
389
+ },
390
+ "padding-block-end": "36px",
391
+ "padding-block-start": "36px",
392
+ "padding-inline-end": "36px",
393
+ "padding-inline-start": "36px",
394
+ "legend": {
395
+ "color": {},
396
+ "font-family": {},
397
+ "font-size": {},
398
+ "font-weight": "700",
399
+ "line-height": "150%",
400
+ "margin-block-end": "1ex",
401
+ "margin-block-start": "0",
402
+ "text-transform": {}
403
+ }
404
+ },
405
+ "form-input": {
406
+ "background-color": "#ffffff",
407
+ "border-color": "#696969",
408
+ "border-radius": "0",
409
+ "border-width": "1px",
410
+ "color": "#000000",
411
+ "font-family": {},
412
+ "font-size": "18px",
413
+ "font-style": {},
414
+ "max-inline-size": {},
415
+ "padding-block-end": "8px",
416
+ "padding-block-start": "12px",
417
+ "padding-inline-end": "12px",
418
+ "padding-inline-start": "12px",
419
+ "placeholder": {
420
+ "color": {}
421
+ },
422
+ "disabled": {
423
+ "background-color": "#cccccc !important",
424
+ "border-color": "#535353",
425
+ "border-width": "0",
426
+ "color": "#535353"
427
+ },
428
+ "focus": {
429
+ "background-color": "#ffffff",
430
+ "border-color": "#696969",
431
+ "border-width": {}
432
+ },
433
+ "invalid": {
434
+ "background-color": "#ffffff",
435
+ "border-color": "#d51b1e",
436
+ "border-width": "1px"
437
+ },
438
+ "read-only": {
439
+ "border-color": "#535353",
440
+ "color": "#535353"
441
+ }
442
+ },
443
+ "form-label": {
444
+ "color": {},
445
+ "font-weight": "700",
446
+ "font-size": "18px",
447
+ "checkbox": {
448
+ "color": {},
449
+ "font-weight": {}
450
+ },
451
+ "checked": {
452
+ "font-weight": {}
453
+ },
454
+ "disabled": {
455
+ "color": {}
456
+ },
457
+ "radio": {
458
+ "color": {},
459
+ "font-weight": {}
460
+ }
461
+ },
462
+ "heading-1": {
463
+ "color": {},
464
+ "font-family": {},
465
+ "font-size": "2rem",
466
+ "font-weight": "700",
467
+ "line-height": "125%",
468
+ "margin-block-end": "16px",
469
+ "margin-block-start": "16px"
470
+ },
471
+ "heading-2": {
472
+ "color": {},
473
+ "font-family": {},
474
+ "font-size": "1.5rem",
475
+ "font-weight": "700",
476
+ "line-height": "150%",
477
+ "margin-block-end": "4px",
478
+ "margin-block-start": {}
479
+ },
480
+ "heading-3": {
481
+ "color": {},
482
+ "font-family": {},
483
+ "font-size": "1.25rem",
484
+ "font-weight": "700",
485
+ "line-height": "125%",
486
+ "margin-block-end": "4px",
487
+ "margin-block-start": {}
488
+ },
489
+ "heading-4": {
490
+ "color": {},
491
+ "font-family": {},
492
+ "font-size": "1.125rem",
493
+ "font-weight": "700",
494
+ "line-height": {},
495
+ "margin-block-end": "4px",
496
+ "margin-block-start": {}
497
+ },
498
+ "heading-5": {
499
+ "color": {},
500
+ "font-family": {},
501
+ "font-size": "1rem",
502
+ "font-weight": "700",
503
+ "line-height": {},
504
+ "margin-block-end": "4px",
505
+ "margin-block-start": {}
506
+ },
507
+ "heading-6": {
508
+ "color": {},
509
+ "font-family": {},
510
+ "font-size": "0.875rem",
511
+ "font-weight": "700",
512
+ "line-height": {},
513
+ "margin-block-end": "4px",
514
+ "margin-block-start": {}
515
+ },
516
+ "link": {
517
+ "background-color": {},
518
+ "color": "#007bc7",
519
+ "text-decoration": "underline",
520
+ "text-decoration-thickness": "1px",
521
+ "text-underline-offset": "2px",
522
+ "font-weight": "400",
523
+ "icon": {
524
+ "background-color": {}
525
+ },
526
+ "hover": {
527
+ "background-color": {},
528
+ "color": "#01689b",
529
+ "text-decoration-thickness": "1px",
530
+ "font-weight": "700",
531
+ "icon": {
532
+ "background-color": {}
533
+ },
534
+ "text-decoration": "none"
535
+ },
536
+ "active": {
537
+ "background-color": {},
538
+ "color": "#01689b",
539
+ "font-weight": "700",
540
+ "icon": {
541
+ "background-color": {}
542
+ },
543
+ "text-decoration-thickness": "1px"
544
+ },
545
+ "focus": {
546
+ "background-color": {},
547
+ "color": {},
548
+ "font-weight": {},
549
+ "icon": {
550
+ "background-color": {}
551
+ },
552
+ "outline-offset": "0",
553
+ "text-decoration-thickness": "1px"
554
+ }
555
+ },
556
+ "ordered-list": {
557
+ "margin-block-start": {},
558
+ "margin-block-end": "0",
559
+ "item": {
560
+ "margin-block-start": "0.5ex",
561
+ "margin-block-end": "0.5ex",
562
+ "padding-inline-start": "0"
563
+ },
564
+ "marker": {
565
+ "color": {}
566
+ },
567
+ "padding-inline-start": "0"
568
+ },
569
+ "paragraph": {
570
+ "color": {},
571
+ "font-family": {},
572
+ "font-size": "18px",
573
+ "font-weight": {},
574
+ "line-height": "150%",
575
+ "margin-block-start": {},
576
+ "margin-block-end": "16px",
577
+ "lead": {
578
+ "color": {},
579
+ "font-size": "20px",
580
+ "font-weight": {},
581
+ "line-height": "150%"
582
+ },
583
+ "small": {
584
+ "font-size": "16px",
585
+ "line-height": "150%"
586
+ }
587
+ },
588
+ "unordered-list": {
589
+ "margin-block-start": "0",
590
+ "margin-block-end": "16px",
591
+ "item": {
592
+ "margin-block-start": "0.5ex",
593
+ "margin-block-end": "0.5ex",
594
+ "padding-inline-start": "0",
595
+ "marker": "initial"
596
+ },
597
+ "marker": {
598
+ "color": {}
599
+ },
600
+ "padding-inline-start": "20px",
601
+ "list-style-type": "square"
602
+ }
603
+ },
604
+ "rvo": {
605
+ "checkbox": {
606
+ "size": "24px",
607
+ "icon": {
608
+ "size": "16px",
609
+ "color": "#ffffff"
610
+ },
611
+ "background-color": "#ffffff",
612
+ "border-width": "1px",
613
+ "border-color": "#000000",
614
+ "focus": {
615
+ "border-color": {},
616
+ "border-width": {},
617
+ "background-color": {}
618
+ },
619
+ "checked": {
620
+ "background-color": "#007bc7"
621
+ },
622
+ "hover": {
623
+ "background-color": "#01689b",
624
+ "border-color": "#007bc7"
625
+ },
626
+ "disabled": {
627
+ "border-color": "#cccccc",
628
+ "border-width": {},
629
+ "background-color": "#ffffff",
630
+ "color": "#cccccc"
631
+ }
632
+ },
633
+ "custom-radio-button": {
634
+ "label": {
635
+ "disabled": {
636
+ "color": "#cccccc"
637
+ }
638
+ },
639
+ "hover": {
640
+ "border-color": "#007bc7"
641
+ },
642
+ "checked": {
643
+ "border-color": "#007bc7",
644
+ "background": "radial-gradient(circle, #ffffff 30%, #007bc7 30%)"
645
+ }
646
+ },
647
+ "heading": {
648
+ "1": {
649
+ "line-height": "125%"
650
+ },
651
+ "2": {
652
+ "line-height": {}
653
+ },
654
+ "3": {
655
+ "line-height": {}
656
+ },
657
+ "4": {
658
+ "line-height": {}
659
+ },
660
+ "5": {
661
+ "line-height": {}
662
+ },
663
+ "6": {
664
+ "line-height": {}
665
+ }
666
+ },
667
+ "logo": {
668
+ "font-family": "'RijksoverheidSerifWeb'",
669
+ "font-size": "16px",
670
+ "color": "#000000",
671
+ "emblem": {
672
+ "background-color": "#154273",
673
+ "color": "#ffffff"
674
+ }
675
+ },
676
+ "select": {
677
+ "icon": {
678
+ "background-color": "#007bc7",
679
+ "color": "#ffffff"
680
+ },
681
+ "outline-offset": "0",
682
+ "padding-block-end": "9px",
683
+ "padding-block-start": "10px",
684
+ "padding-inline-end": "50px",
685
+ "padding-inline-start": "18px"
18
686
  }
19
687
  }
20
688
  }