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