@rijkshuisstijl-community/design-tokens 1.0.0-alpha.17 → 1.0.0-alpha.3

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 (45) hide show
  1. package/LICENSE.md +282 -7
  2. package/README.md +3 -21
  3. package/dist/_variables.scss +7 -303
  4. package/dist/index.css +7 -303
  5. package/dist/index.d.ts +7 -305
  6. package/dist/index.js +7 -303
  7. package/dist/index.json +7 -303
  8. package/dist/index.tokens.json +10 -678
  9. package/dist/root.css +7 -303
  10. package/dist/tokens.d.ts +10 -677
  11. package/dist/tokens.js +78 -6493
  12. package/dist/variables.less +7 -303
  13. package/package.json +6 -7
  14. package/src/brand/rhc/color.tokens.json +6 -96
  15. package/src/common/rhc/focus.tokens.json +7 -0
  16. package/src/components/rhc/button.tokens.json +8 -0
  17. package/src/brand/rhc/font.tokens.json +0 -34
  18. package/src/common/utrecht/action.tokens.json +0 -10
  19. package/src/common/utrecht/focus.tokens.json +0 -17
  20. package/src/components/basiselementen/document.tokens.json +0 -15
  21. package/src/components/rvo/button.tokens.json +0 -33
  22. package/src/components/rvo/checkbox.tokens.json +0 -32
  23. package/src/components/rvo/custom-radio-button.tokens.json +0 -24
  24. package/src/components/rvo/heading.tokens.json +0 -24
  25. package/src/components/rvo/logo.tokens.json +0 -13
  26. package/src/components/rvo/select.tokens.json +0 -15
  27. package/src/components/utrecht/breadcrumbs.tokens.json +0 -66
  28. package/src/components/utrecht/button.tokens.json +0 -120
  29. package/src/components/utrecht/custom-radio-button.tokens.json +0 -53
  30. package/src/components/utrecht/data-list.tokens.json +0 -91
  31. package/src/components/utrecht/document.tokens.json +0 -12
  32. package/src/components/utrecht/form-field.tokens.json +0 -21
  33. package/src/components/utrecht/form-fieldset.tokens.json +0 -27
  34. package/src/components/utrecht/form-input.tokens.json +0 -42
  35. package/src/components/utrecht/form-label.tokens.json +0 -23
  36. package/src/components/utrecht/heading-1.tokens.json +0 -13
  37. package/src/components/utrecht/heading-2.tokens.json +0 -13
  38. package/src/components/utrecht/heading-3.tokens.json +0 -13
  39. package/src/components/utrecht/heading-4.tokens.json +0 -13
  40. package/src/components/utrecht/heading-5.tokens.json +0 -13
  41. package/src/components/utrecht/heading-6.tokens.json +0 -13
  42. package/src/components/utrecht/link.tokens.json +0 -44
  43. package/src/components/utrecht/ordered-list.tokens.json +0 -19
  44. package/src/components/utrecht/paragraph.tokens.json +0 -23
  45. package/src/components/utrecht/unordered-list.tokens.json +0 -31
@@ -1,688 +1,20 @@
1
1
  {
2
- "basiselementen": {
2
+ "rhc": {
3
3
  "color": {
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"
4
+ "blue": {
5
+ "50": "cornflowerblue"
71
6
  },
72
- "busy": {
73
- "cursor": "wait"
74
- },
75
- "disabled": {
76
- "cursor": "not-allowed"
77
- },
78
- "submit": {
79
- "cursor": "pointer"
7
+ "grey": {
8
+ "0": "black",
9
+ "100": "white"
80
10
  }
81
11
  },
82
12
  "focus": {
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
- }
13
+ "outline-offset": "2px"
91
14
  },
92
15
  "button": {
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"
16
+ "background-color": "cornflowerblue",
17
+ "color": "white"
686
18
  }
687
19
  }
688
- }
20
+ }