@rijkshuisstijl-community/design-tokens 5.0.0 → 6.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.
Files changed (105) hide show
  1. package/CHANGELOG.md +34 -0
  2. package/dist/_variables.scss +603 -668
  3. package/dist/index.css +603 -668
  4. package/dist/index.d.ts +690 -755
  5. package/dist/index.js +692 -757
  6. package/dist/index.json +691 -756
  7. package/dist/index.tokens.json +1715 -1802
  8. package/dist/koop/_variables.scss +38 -118
  9. package/dist/koop/index.css +38 -118
  10. package/dist/koop/index.d.ts +36 -116
  11. package/dist/koop/index.js +38 -118
  12. package/dist/koop/index.json +37 -117
  13. package/dist/koop/index.tokens.json +47 -159
  14. package/dist/koop/root.css +38 -118
  15. package/dist/koop/tokens.d.ts +46 -158
  16. package/dist/koop/tokens.js +2345 -4171
  17. package/dist/root.css +603 -668
  18. package/dist/tokens.d.ts +1614 -1701
  19. package/dist/tokens.js +24567 -26048
  20. package/dist/uitvoerend-groen/_variables.scss +28 -108
  21. package/dist/uitvoerend-groen/index.css +28 -108
  22. package/dist/uitvoerend-groen/index.d.ts +26 -106
  23. package/dist/uitvoerend-groen/index.js +28 -108
  24. package/dist/uitvoerend-groen/index.json +27 -107
  25. package/dist/uitvoerend-groen/index.tokens.json +35 -147
  26. package/dist/uitvoerend-groen/root.css +28 -108
  27. package/dist/uitvoerend-groen/tokens.d.ts +34 -146
  28. package/dist/uitvoerend-groen/tokens.js +1240 -3066
  29. package/dist/uitvoerend-hemelblauw/_variables.scss +28 -108
  30. package/dist/uitvoerend-hemelblauw/index.css +28 -108
  31. package/dist/uitvoerend-hemelblauw/index.d.ts +26 -106
  32. package/dist/uitvoerend-hemelblauw/index.js +28 -108
  33. package/dist/uitvoerend-hemelblauw/index.json +27 -107
  34. package/dist/uitvoerend-hemelblauw/index.tokens.json +35 -147
  35. package/dist/uitvoerend-hemelblauw/root.css +28 -108
  36. package/dist/uitvoerend-hemelblauw/tokens.d.ts +34 -146
  37. package/dist/uitvoerend-hemelblauw/tokens.js +1240 -3066
  38. package/dist/uitvoerend-mintgroen/_variables.scss +28 -108
  39. package/dist/uitvoerend-mintgroen/index.css +28 -108
  40. package/dist/uitvoerend-mintgroen/index.d.ts +26 -106
  41. package/dist/uitvoerend-mintgroen/index.js +28 -108
  42. package/dist/uitvoerend-mintgroen/index.json +27 -107
  43. package/dist/uitvoerend-mintgroen/index.tokens.json +35 -147
  44. package/dist/uitvoerend-mintgroen/root.css +28 -108
  45. package/dist/uitvoerend-mintgroen/tokens.d.ts +34 -146
  46. package/dist/uitvoerend-mintgroen/tokens.js +1240 -3066
  47. package/dist/uitvoerend-oranje/_variables.scss +51 -131
  48. package/dist/uitvoerend-oranje/index.css +51 -131
  49. package/dist/uitvoerend-oranje/index.d.ts +49 -129
  50. package/dist/uitvoerend-oranje/index.js +51 -131
  51. package/dist/uitvoerend-oranje/index.json +50 -130
  52. package/dist/uitvoerend-oranje/index.tokens.json +69 -181
  53. package/dist/uitvoerend-oranje/root.css +51 -131
  54. package/dist/uitvoerend-oranje/tokens.d.ts +65 -177
  55. package/dist/uitvoerend-oranje/tokens.js +1856 -3682
  56. package/dist/uitvoerend-paars/_variables.scss +28 -108
  57. package/dist/uitvoerend-paars/index.css +28 -108
  58. package/dist/uitvoerend-paars/index.d.ts +26 -106
  59. package/dist/uitvoerend-paars/index.js +28 -108
  60. package/dist/uitvoerend-paars/index.json +27 -107
  61. package/dist/uitvoerend-paars/index.tokens.json +35 -147
  62. package/dist/uitvoerend-paars/root.css +28 -108
  63. package/dist/uitvoerend-paars/tokens.d.ts +34 -146
  64. package/dist/uitvoerend-paars/tokens.js +1240 -3066
  65. package/dist/uitvoerend-violet/_variables.scss +28 -108
  66. package/dist/uitvoerend-violet/index.css +28 -108
  67. package/dist/uitvoerend-violet/index.d.ts +26 -106
  68. package/dist/uitvoerend-violet/index.js +28 -108
  69. package/dist/uitvoerend-violet/index.json +27 -107
  70. package/dist/uitvoerend-violet/index.tokens.json +35 -147
  71. package/dist/uitvoerend-violet/root.css +28 -108
  72. package/dist/uitvoerend-violet/tokens.d.ts +34 -146
  73. package/dist/uitvoerend-violet/tokens.js +1240 -3066
  74. package/dist/uitvoerend-violet-oud/_variables.scss +83 -163
  75. package/dist/uitvoerend-violet-oud/index.css +83 -163
  76. package/dist/uitvoerend-violet-oud/index.d.ts +81 -161
  77. package/dist/uitvoerend-violet-oud/index.js +83 -163
  78. package/dist/uitvoerend-violet-oud/index.json +82 -162
  79. package/dist/uitvoerend-violet-oud/index.tokens.json +102 -214
  80. package/dist/uitvoerend-violet-oud/root.css +83 -163
  81. package/dist/uitvoerend-violet-oud/tokens.d.ts +100 -212
  82. package/dist/uitvoerend-violet-oud/tokens.js +3009 -4835
  83. package/dist/wetgevend/_variables.scss +28 -108
  84. package/dist/wetgevend/index.css +28 -108
  85. package/dist/wetgevend/index.d.ts +26 -106
  86. package/dist/wetgevend/index.js +28 -108
  87. package/dist/wetgevend/index.json +27 -107
  88. package/dist/wetgevend/index.tokens.json +35 -147
  89. package/dist/wetgevend/root.css +28 -108
  90. package/dist/wetgevend/tokens.d.ts +34 -146
  91. package/dist/wetgevend/tokens.js +1240 -3066
  92. package/figma/figma.tokens.json +872 -934
  93. package/package.json +1 -1
  94. package/src/generated/base.tokens.json +4916 -5198
  95. package/src/generated/koop/tokens.json +167 -519
  96. package/src/generated/themes.json +1379 -4547
  97. package/src/generated/uitvoerend-groen/tokens.json +124 -476
  98. package/src/generated/uitvoerend-hemelblauw/tokens.json +124 -476
  99. package/src/generated/uitvoerend-mintgroen/tokens.json +124 -476
  100. package/src/generated/uitvoerend-oranje/tokens.json +196 -548
  101. package/src/generated/uitvoerend-paars/tokens.json +124 -476
  102. package/src/generated/uitvoerend-violet/tokens.json +124 -476
  103. package/src/generated/uitvoerend-violet-oud/tokens.json +434 -786
  104. package/src/generated/wetgevend/tokens.json +124 -476
  105. package/token-transformer.mjs +1 -1
@@ -370,21 +370,6 @@
370
370
  "color": "#94A3B8"
371
371
  }
372
372
  },
373
- "number-badge": {
374
- "line-height": "125%",
375
- "background-color": "#a90061",
376
- "border-color": "transparent",
377
- "border-radius": "999px",
378
- "border-width": "0px",
379
- "color": "#fff",
380
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
381
- "font-size": "1.25rem",
382
- "font-weight": 700,
383
- "min-block-size": "24px",
384
- "min-inline-size": "24px",
385
- "padding-block": "0.125rem",
386
- "padding-inline": "0.5rem"
387
- },
388
373
  "figure": {
389
374
  "caption": {
390
375
  "border-color": "#CBD5E1",
@@ -403,18 +388,92 @@
403
388
  "border-start-start-radius": 0
404
389
  }
405
390
  },
406
- "alert": {
407
- "heading": {
391
+ "number-badge": {
392
+ "background-color": "#a90061",
393
+ "border-color": "transparent",
394
+ "border-radius": "999px",
395
+ "border-width": "0px",
396
+ "color": "#fff",
397
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
398
+ "font-size": "1.25rem",
399
+ "font-weight": 700,
400
+ "min-block-size": "24px",
401
+ "min-inline-size": "24px",
402
+ "padding-block": "0.125rem",
403
+ "padding-inline": "0.5rem"
404
+ },
405
+ "blockquote": {
406
+ "border-block-end-width": 0,
407
+ "border-block-start-width": 0,
408
+ "border-end-end-radius": 0,
409
+ "border-end-start-radius": 0,
410
+ "border-inline-end-width": 0,
411
+ "border-start-end-radius": 0,
412
+ "border-start-start-radius": 0,
413
+ "margin-block-end": 0,
414
+ "margin-block-start": 0,
415
+ "margin-inline-end": 0,
416
+ "margin-inline-start": 0,
417
+ "blue-corner-border-variation": {
418
+ "border-block-end-width": "2px",
419
+ "border-color": "#a90061",
420
+ "border-end-end-radius": "3rem",
421
+ "border-inline-end-width": "2px"
422
+ },
423
+ "caption": {
424
+ "color": "#154273",
408
425
  "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
409
426
  "font-size": "1.25rem",
410
- "font-weight": 700,
411
- "line-height": "150%"
427
+ "font-weight": 400,
428
+ "line-height": "150%",
429
+ "padding-block-start": "0.75rem"
412
430
  },
413
- "message": {
414
- "column-gap": "0.5rem",
431
+ "content": {
432
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
433
+ "font-weight": 400,
415
434
  "line-height": "150%",
416
- "row-gap": "0rem"
435
+ "color": "#154273",
436
+ "font-size": "1.25rem"
437
+ },
438
+ "pink-background-variation": {
439
+ "background-color": "#F6BDE1",
440
+ "border-end-start-radius": "3rem",
441
+ "padding": "2.5rem"
442
+ },
443
+ "pink-corner-border-variation": {
444
+ "border-block-start-width": "0.25rem",
445
+ "border-color": "#F6BDE1",
446
+ "border-inline-start-width": "0.25rem",
447
+ "border-start-start-radius": "3rem",
448
+ "padding": "2.5rem"
417
449
  },
450
+ "pink-left-border-variation": {
451
+ "border-color": "#F6BDE1",
452
+ "border-inline-start-width": "0.75rem",
453
+ "padding-block-end": "1.5rem",
454
+ "padding-block-start": "1.5rem",
455
+ "padding-inline-end": "2.5rem",
456
+ "padding-inline-start": "2.5rem"
457
+ },
458
+ "background-color": "transparent",
459
+ "border-inline-start-width": "0px",
460
+ "border-color": "transparent",
461
+ "border-radius": "0px",
462
+ "border-width": "0px",
463
+ "color": "#154273",
464
+ "font-size": "1.25rem",
465
+ "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
466
+ "padding-block-end": "2rem",
467
+ "padding-block-start": "2rem",
468
+ "padding-inline-end": "2rem",
469
+ "padding-inline-start": "2rem",
470
+ "row-gap": "0.75rem",
471
+ "attribution": {
472
+ "color": "#154273",
473
+ "font-size": "1.25rem"
474
+ }
475
+ },
476
+ "alert": {
418
477
  "background-color": "#d9ebf7",
419
478
  "border-color": "transparent",
420
479
  "border-radius": 0,
@@ -440,6 +499,9 @@
440
499
  "border-color": "transparent",
441
500
  "color": "#000"
442
501
  },
502
+ "message": {
503
+ "row-gap": "0rem"
504
+ },
443
505
  "ok": {
444
506
  "background-color": "#e1eddb",
445
507
  "border-color": "transparent",
@@ -469,18 +531,18 @@
469
531
  }
470
532
  },
471
533
  "accordion": {
534
+ "margin-block-end": "0rem",
535
+ "margin-block-start": "0rem",
536
+ "row-gap": "0rem",
537
+ "panel": {
538
+ "border-color": "transparent",
539
+ "border-width": "1px",
540
+ "padding-block-end": "1.5rem",
541
+ "padding-block-start": "1rem",
542
+ "padding-inline-end": "1rem",
543
+ "padding-inline-start": "1rem"
544
+ },
472
545
  "button": {
473
- "active": {
474
- "row-gap": 0,
475
- "background-color": "#F1F5F9",
476
- "border-color": "transparent",
477
- "color": "#0F172A"
478
- },
479
- "focus": {
480
- "background-color": "#f2d9e7",
481
- "border-color": "#a90061",
482
- "color": "#0F172A"
483
- },
484
546
  "background-color": "#fff",
485
547
  "border-color": "transparent",
486
548
  "border-radius": "0px",
@@ -494,6 +556,11 @@
494
556
  "icon": {
495
557
  "size": "24px"
496
558
  },
559
+ "active": {
560
+ "background-color": "#F1F5F9",
561
+ "border-color": "transparent",
562
+ "color": "#0F172A"
563
+ },
497
564
  "hover": {
498
565
  "background-color": "#F8FAFC",
499
566
  "border-color": "transparent",
@@ -506,17 +573,6 @@
506
573
  "color": "#0F172A"
507
574
  }
508
575
  },
509
- "margin-block-end": "0rem",
510
- "margin-block-start": "0rem",
511
- "row-gap": "0rem",
512
- "panel": {
513
- "border-color": "transparent",
514
- "border-width": "1px",
515
- "padding-block-end": "1.5rem",
516
- "padding-block-start": "1rem",
517
- "padding-inline-end": "1rem",
518
- "padding-inline-start": "1rem"
519
- },
520
576
  "section": {
521
577
  "border-color": "#94A3B8",
522
578
  "hover": {
@@ -527,114 +583,6 @@
527
583
  "margin-block-start": "0rem"
528
584
  }
529
585
  },
530
- "blockquote": {
531
- "border-block-end-width": 0,
532
- "border-block-start-width": 0,
533
- "border-end-end-radius": 0,
534
- "border-end-start-radius": 0,
535
- "border-inline-end-width": 0,
536
- "border-start-end-radius": 0,
537
- "border-start-start-radius": 0,
538
- "margin-block-end": 0,
539
- "margin-block-start": 0,
540
- "margin-inline-end": 0,
541
- "margin-inline-start": 0,
542
- "blue-corner-border-variation": {
543
- "border-block-end-width": "2px",
544
- "border-color": "#a90061",
545
- "border-end-end-radius": "3rem",
546
- "border-inline-end-width": "2px"
547
- },
548
- "caption": {
549
- "color": "#154273",
550
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
551
- "font-size": "1.25rem",
552
- "font-weight": 400,
553
- "line-height": "150%",
554
- "padding-block-start": "0.75rem"
555
- },
556
- "content": {
557
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
558
- "font-weight": 400,
559
- "line-height": "150%",
560
- "color": "#154273",
561
- "font-size": "1.25rem"
562
- },
563
- "pink-background-variation": {
564
- "background-color": "#F6BDE1",
565
- "border-end-start-radius": "3rem",
566
- "padding": "2.5rem"
567
- },
568
- "pink-corner-border-variation": {
569
- "border-block-start-width": "0.25rem",
570
- "border-color": "#F6BDE1",
571
- "border-inline-start-width": "0.25rem",
572
- "border-start-start-radius": "3rem",
573
- "padding": "2.5rem"
574
- },
575
- "pink-left-border-variation": {
576
- "border-color": "#F6BDE1",
577
- "border-inline-start-width": "0.75rem",
578
- "padding-block-end": "1.5rem",
579
- "padding-block-start": "1.5rem",
580
- "padding-inline-end": "2.5rem",
581
- "padding-inline-start": "2.5rem"
582
- },
583
- "background-color": "transparent",
584
- "border-inline-start-width": "0px",
585
- "border-color": "transparent",
586
- "border-radius": "0px",
587
- "border-width": "0px",
588
- "color": "#154273",
589
- "font-size": "1.25rem",
590
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
591
- "padding-block-end": "2rem",
592
- "padding-block-start": "2rem",
593
- "padding-inline-end": "2rem",
594
- "padding-inline-start": "2rem",
595
- "row-gap": "0.75rem",
596
- "attribution": {
597
- "color": "#154273",
598
- "font-size": "1.25rem"
599
- }
600
- },
601
- "skip-link": {
602
- "focus": {
603
- "text-decoration": "None",
604
- "border-color": "#a90061",
605
- "border-width": "2px",
606
- "border-style": "solid",
607
- "background-color": "#fff",
608
- "color": "#01689b"
609
- },
610
- "border-color": "transparent",
611
- "box-block-end-shadow": {
612
- "color": "#0000001a",
613
- "blur-radius": "48px",
614
- "offset-x": 0,
615
- "offset-y": "16px",
616
- "spread-radius": 0
617
- },
618
- "focus-visible": {
619
- "outline-color": "#000",
620
- "text-decoration": "underline"
621
- },
622
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
623
- "font-weight": 700,
624
- "line-height": "150%",
625
- "border-width": "2px",
626
- "text-underline-offset": "0.125rem",
627
- "font-size": "1.25rem",
628
- "background-color": "#fff",
629
- "color": "#01689b",
630
- "min-block-size": "48px",
631
- "min-inline-size": "48px",
632
- "padding-block-end": "0.75rem",
633
- "padding-block-start": "0.75rem",
634
- "padding-inline-end": "1rem",
635
- "padding-inline-start": "1rem",
636
- "text-decoration": "underline"
637
- },
638
586
  "data-badge": {
639
587
  "background-color": "#f2d9e7",
640
588
  "border-radius": "10px",
@@ -1197,8 +1145,8 @@
1197
1145
  "button": {
1198
1146
  "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
1199
1147
  "font-size": "1.25rem",
1200
- "font-weight": 400,
1201
- "line-height": "150%"
1148
+ "font-weight": 700,
1149
+ "line-height": "1.875rem"
1202
1150
  }
1203
1151
  },
1204
1152
  "link-list": {
@@ -1207,14 +1155,10 @@
1207
1155
  "text-decoration": "underline"
1208
1156
  }
1209
1157
  }
1210
- },
1211
- "skip-link": {
1212
- "font-weight": 700
1213
1158
  }
1214
1159
  },
1215
1160
  "nl": {
1216
1161
  "number-badge": {
1217
- "line-height": "125%",
1218
1162
  "background-color": "#a90061",
1219
1163
  "border-color": "transparent",
1220
1164
  "border-radius": "999px",
@@ -1229,33 +1173,6 @@
1229
1173
  "padding-inline": "0.5rem"
1230
1174
  },
1231
1175
  "skip-link": {
1232
- "border-color": "transparent",
1233
- "border-width": "2px",
1234
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
1235
- "font-weight": 700,
1236
- "padding-block-end": "0.75rem",
1237
- "padding-block-start": "0.75rem",
1238
- "padding-inline-end": "1rem",
1239
- "padding-inline-start": "1rem",
1240
- "box-block-end-shadow": {
1241
- "blur-radius": "48px",
1242
- "color": "#0000001a",
1243
- "offset-x": 0,
1244
- "offset-y": "16px",
1245
- "spread-radius": 0
1246
- },
1247
- "focus": {
1248
- "background-color": "#fff",
1249
- "border-color": "#a90061",
1250
- "border-style": "solid",
1251
- "border-width": "2px",
1252
- "color": "#0F172A",
1253
- "text-decoration": "None"
1254
- },
1255
- "focus-visible": {
1256
- "outline-color": "#000"
1257
- },
1258
- "text-decoration": "underline",
1259
1176
  "background-color": "#fff",
1260
1177
  "color": "#01689b",
1261
1178
  "padding-block": "0.75rem",
@@ -1363,35 +1280,6 @@
1363
1280
  }
1364
1281
  },
1365
1282
  "rhc": {
1366
- "accordion": {
1367
- "border-radius": "0px",
1368
- "color": "#0F172A",
1369
- "header": {
1370
- "margin": 0
1371
- },
1372
- "section": {
1373
- "border-block-end-width": "1px",
1374
- "border-color": "#94A3B8",
1375
- "border-width": "1px"
1376
- },
1377
- "button": {
1378
- "padding-block-end": "0.75rem",
1379
- "padding-block-start": "0.75rem",
1380
- "padding-inline-end": "1rem",
1381
- "padding-inline-start": "1rem",
1382
- "expanded": {
1383
- "background-color": "#fff",
1384
- "color": "#0F172A"
1385
- },
1386
- "icon": {
1387
- "margin-block": "0.25rem"
1388
- },
1389
- "font-family": "'Fira Sans', Arial, Verdana, sans-serif",
1390
- "font-weight": 400,
1391
- "font-size": "1.25rem",
1392
- "line-height": "150%"
1393
- }
1394
- },
1395
1283
  "keep": {
1396
1284
  "_comment": "⚠️ Deze tokens zijn legacy en worden vervangen door de tokenset components/blockquote.",
1397
1285
  "top-left": {