@utrecht/design-tokens 2.1.0 → 2.2.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/.stylelintrc.json +5 -1
- package/CHANGELOG.md +14 -0
- package/config.json +8 -0
- package/dist/_mixin-theme.scss +34 -37
- package/dist/_mixin.scss +1009 -0
- package/dist/_variables.scss +34 -37
- package/dist/background-image-icon.css +0 -1
- package/dist/dark/_mixin-theme.scss +34 -37
- package/dist/dark/_mixin.scss +1020 -0
- package/dist/dark/_variables.scss +1017 -0
- package/dist/dark/index.cjs +1020 -0
- package/dist/dark/index.css +34 -37
- package/dist/dark/index.d.ts +1139 -0
- package/dist/dark/index.flat.json +1016 -0
- package/dist/dark/index.json +30694 -0
- package/dist/dark/index.mjs +1018 -0
- package/dist/dark/index.tokens.json +7885 -0
- package/dist/dark/list.json +30694 -0
- package/dist/dark/property.css +705 -0
- package/dist/dark/root.css +538 -541
- package/dist/dark/theme-prince-xml.css +1020 -0
- package/dist/dark/theme.css +1020 -0
- package/dist/dark/tokens.cjs +37567 -0
- package/dist/dark/tokens.d.ts +4842 -0
- package/dist/dark/tokens.json +37563 -0
- package/dist/dark/variables.cjs +1020 -0
- package/dist/dark/variables.css +1020 -0
- package/dist/dark/variables.d.ts +1139 -0
- package/dist/dark/variables.json +1016 -0
- package/dist/dark/variables.less +1017 -0
- package/dist/dark/variables.mjs +1018 -0
- package/dist/index.cjs +29 -32
- package/dist/index.css +149 -82
- package/dist/index.d.ts +18 -25
- package/dist/index.flat.json +591 -593
- package/dist/index.json +4577 -7587
- package/dist/index.mjs +31 -34
- package/dist/index.tokens.json +385 -71
- package/dist/list.json +31811 -0
- package/dist/property.css +770 -0
- package/dist/root.css +529 -532
- package/dist/theme-prince-xml.css +34 -37
- package/dist/theme.css +529 -532
- package/dist/tokens.cjs +6297 -8992
- package/dist/tokens.d.ts +208 -60
- package/dist/tokens.json +38705 -0
- package/dist/variables.cjs +1009 -0
- package/dist/variables.css +1009 -0
- package/dist/variables.d.ts +1128 -0
- package/dist/variables.json +1005 -0
- package/dist/variables.less +34 -37
- package/dist/variables.mjs +1007 -0
- package/package.json +6 -5
- package/src/background-image-icon.scss +0 -1
- package/src/brand/utrecht/typography.tokens.json +7 -9
- package/src/component/of/progress-indicator.tokens.json +1 -1
- package/src/component/utrecht/backdrop.tokens.json +1 -1
- package/src/component/utrecht/blockquote.tokens.json +3 -3
- package/src/component/utrecht/button.tokens.json +1 -3
- package/src/component/utrecht/code-block.tokens.json +2 -2
- package/src/component/utrecht/figure.tokens.json +2 -2
- package/src/component/utrecht/form-fieldset.tokens.json +2 -2
- package/src/component/utrecht/form-toggle.tokens.json +1 -1
- package/src/component/utrecht/link.tokens.json +3 -1
- package/src/component/utrecht/pagination.tokens.json +1 -1
- package/src/component/utrecht/skip-link.tokens.json +4 -2
- package/src/component/utrecht/table.tokens.json +1 -1
- package/src/component/utrecht/toptask-link.tokens.json +1 -1
- package/src/css-property-formatter.mjs +46 -0
- package/src/dark/component/tokens.json +1 -1
- package/src/index.scss +81 -5
- package/style-dictionary-build-dark.mjs +64 -0
- package/style-dictionary-build.mjs +41 -0
- package/style-dictionary-config.mjs +261 -0
- package/dist/figma-tokens.json +0 -40396
- package/src/css-property-formatter.js +0 -35
- package/src/style-dictionary-config-dark.js +0 -56
- package/src/style-dictionary-config.js +0 -63
- package/style-dictionary.config.json +0 -143
package/dist/tokens.d.ts
CHANGED
|
@@ -1,25 +1,18 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Do not edit directly
|
|
3
|
-
* Generated on Tue, 01 Oct 2024 19:52:18 GMT
|
|
2
|
+
* Do not edit directly, this file was auto-generated.
|
|
4
3
|
*/
|
|
5
4
|
|
|
6
5
|
export default tokens;
|
|
7
6
|
|
|
8
7
|
declare interface DesignToken {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
subitem?: string;
|
|
18
|
-
state?: string;
|
|
19
|
-
[key: string]: any;
|
|
20
|
-
};
|
|
21
|
-
[key: string]: any;
|
|
22
|
-
}
|
|
8
|
+
value?: any;
|
|
9
|
+
type?: string;
|
|
10
|
+
comment?: string;
|
|
11
|
+
name?: string;
|
|
12
|
+
themeable?: boolean;
|
|
13
|
+
attributes?: Record<string, unknown>;
|
|
14
|
+
[key: string]: any;
|
|
15
|
+
}
|
|
23
16
|
|
|
24
17
|
declare const tokens: {
|
|
25
18
|
"utrecht": {
|
|
@@ -405,6 +398,26 @@ declare const tokens: {
|
|
|
405
398
|
"nl.nldesignsystem.css.property": {}
|
|
406
399
|
}
|
|
407
400
|
},
|
|
401
|
+
"border-inline-start-width": {
|
|
402
|
+
"$extensions": {
|
|
403
|
+
"nl.nldesignsystem.css.property": {}
|
|
404
|
+
}
|
|
405
|
+
},
|
|
406
|
+
"border-color": {
|
|
407
|
+
"$extensions": {
|
|
408
|
+
"nl.nldesignsystem.css.property": {}
|
|
409
|
+
}
|
|
410
|
+
},
|
|
411
|
+
"border-radius": {
|
|
412
|
+
"$extensions": {
|
|
413
|
+
"nl.nldesignsystem.css.property": {}
|
|
414
|
+
}
|
|
415
|
+
},
|
|
416
|
+
"border-width": {
|
|
417
|
+
"$extensions": {
|
|
418
|
+
"nl.nldesignsystem.css.property": {}
|
|
419
|
+
}
|
|
420
|
+
},
|
|
408
421
|
"color": {
|
|
409
422
|
"$extensions": {
|
|
410
423
|
"nl.nldesignsystem.css.property": {}
|
|
@@ -449,12 +462,17 @@ declare const tokens: {
|
|
|
449
462
|
"nl.nldesignsystem.css.property": {}
|
|
450
463
|
}
|
|
451
464
|
},
|
|
452
|
-
"padding-
|
|
465
|
+
"padding-block-start": {
|
|
466
|
+
"$extensions": {
|
|
467
|
+
"nl.nldesignsystem.css.property": {}
|
|
468
|
+
}
|
|
469
|
+
},
|
|
470
|
+
"padding-block-end": {
|
|
453
471
|
"$extensions": {
|
|
454
472
|
"nl.nldesignsystem.css.property": {}
|
|
455
473
|
}
|
|
456
474
|
},
|
|
457
|
-
"
|
|
475
|
+
"row-gap": {
|
|
458
476
|
"$extensions": {
|
|
459
477
|
"nl.nldesignsystem.css.property": {}
|
|
460
478
|
}
|
|
@@ -465,14 +483,36 @@ declare const tokens: {
|
|
|
465
483
|
"nl.nldesignsystem.css.property": {}
|
|
466
484
|
}
|
|
467
485
|
},
|
|
468
|
-
"font-size":
|
|
486
|
+
"font-size": {
|
|
487
|
+
"$extensions": {
|
|
488
|
+
"nl.nldesignsystem.css.property": {}
|
|
489
|
+
}
|
|
490
|
+
}
|
|
469
491
|
},
|
|
470
492
|
"content": {
|
|
471
493
|
"color": DesignToken,
|
|
472
494
|
"font-size": DesignToken
|
|
473
495
|
},
|
|
474
|
-
"
|
|
475
|
-
|
|
496
|
+
"caption": {
|
|
497
|
+
"color": {
|
|
498
|
+
"$extensions": {
|
|
499
|
+
"nl.nldesignsystem.css.property": {}
|
|
500
|
+
}
|
|
501
|
+
},
|
|
502
|
+
"font-size": DesignToken
|
|
503
|
+
},
|
|
504
|
+
"quote": {
|
|
505
|
+
"color": {
|
|
506
|
+
"$extensions": {
|
|
507
|
+
"nl.nldesignsystem.css.property": {}
|
|
508
|
+
}
|
|
509
|
+
},
|
|
510
|
+
"font-size": {
|
|
511
|
+
"$extensions": {
|
|
512
|
+
"nl.nldesignsystem.css.property": {}
|
|
513
|
+
}
|
|
514
|
+
}
|
|
515
|
+
},
|
|
476
516
|
"margin-block-start": DesignToken,
|
|
477
517
|
"margin-block-end": DesignToken
|
|
478
518
|
},
|
|
@@ -603,6 +643,7 @@ declare const tokens: {
|
|
|
603
643
|
"border-radius": DesignToken,
|
|
604
644
|
"border-width": DesignToken,
|
|
605
645
|
"color": DesignToken,
|
|
646
|
+
"column-gap": DesignToken,
|
|
606
647
|
"font-family": DesignToken,
|
|
607
648
|
"font-size": DesignToken,
|
|
608
649
|
"font-weight": {
|
|
@@ -658,7 +699,6 @@ declare const tokens: {
|
|
|
658
699
|
"color": DesignToken
|
|
659
700
|
},
|
|
660
701
|
"icon": {
|
|
661
|
-
"gap": DesignToken,
|
|
662
702
|
"size": {
|
|
663
703
|
"$extensions": {
|
|
664
704
|
"nl.nldesignsystem.css.property": {}
|
|
@@ -1442,25 +1482,37 @@ declare const tokens: {
|
|
|
1442
1482
|
"column-rule-color": DesignToken,
|
|
1443
1483
|
"column-rule-width": DesignToken,
|
|
1444
1484
|
"column-width": DesignToken,
|
|
1445
|
-
"gap": DesignToken
|
|
1485
|
+
"gap": DesignToken,
|
|
1486
|
+
"print": {
|
|
1487
|
+
"column-count": {
|
|
1488
|
+
"$extensions": {
|
|
1489
|
+
"nl.nldesignsystem.css.property": {}
|
|
1490
|
+
}
|
|
1491
|
+
},
|
|
1492
|
+
"column-width": {
|
|
1493
|
+
"$extensions": {
|
|
1494
|
+
"nl.nldesignsystem.css.property": {}
|
|
1495
|
+
}
|
|
1496
|
+
}
|
|
1497
|
+
}
|
|
1446
1498
|
},
|
|
1447
1499
|
"action": {
|
|
1448
|
-
"
|
|
1500
|
+
"activate": {
|
|
1449
1501
|
"cursor": DesignToken
|
|
1450
1502
|
},
|
|
1451
|
-
"
|
|
1503
|
+
"busy": {
|
|
1452
1504
|
"cursor": DesignToken
|
|
1453
1505
|
},
|
|
1454
|
-
"
|
|
1506
|
+
"disabled": {
|
|
1455
1507
|
"cursor": DesignToken
|
|
1456
1508
|
},
|
|
1457
|
-
"
|
|
1509
|
+
"inert": {
|
|
1458
1510
|
"cursor": DesignToken
|
|
1459
1511
|
},
|
|
1460
|
-
"
|
|
1512
|
+
"navigate": {
|
|
1461
1513
|
"cursor": DesignToken
|
|
1462
1514
|
},
|
|
1463
|
-
"
|
|
1515
|
+
"submit": {
|
|
1464
1516
|
"cursor": DesignToken
|
|
1465
1517
|
}
|
|
1466
1518
|
},
|
|
@@ -2480,6 +2532,27 @@ declare const tokens: {
|
|
|
2480
2532
|
},
|
|
2481
2533
|
"focus": {
|
|
2482
2534
|
"color": DesignToken,
|
|
2535
|
+
"background-color": {
|
|
2536
|
+
"$extensions": {
|
|
2537
|
+
"nl.nldesignsystem.css.property": {}
|
|
2538
|
+
}
|
|
2539
|
+
},
|
|
2540
|
+
"text-decoration": {
|
|
2541
|
+
"$extensions": {
|
|
2542
|
+
"nl.nldesignsystem.css.property": {
|
|
2543
|
+
"syntax": {}
|
|
2544
|
+
},
|
|
2545
|
+
"nl.nldesignsystem.fallback": {}
|
|
2546
|
+
}
|
|
2547
|
+
},
|
|
2548
|
+
"text-decoration-thickness": {
|
|
2549
|
+
"$extensions": {
|
|
2550
|
+
"nl.nldesignsystem.css.property": {},
|
|
2551
|
+
"nl.nldesignsystem.fallback": {}
|
|
2552
|
+
}
|
|
2553
|
+
}
|
|
2554
|
+
},
|
|
2555
|
+
"focus-visible": {
|
|
2483
2556
|
"text-decoration": DesignToken,
|
|
2484
2557
|
"text-decoration-thickness": {
|
|
2485
2558
|
"$extensions": {
|
|
@@ -2632,20 +2705,56 @@ declare const tokens: {
|
|
|
2632
2705
|
"color": DesignToken,
|
|
2633
2706
|
"font-weight": DesignToken
|
|
2634
2707
|
},
|
|
2635
|
-
"
|
|
2708
|
+
"disabled": {
|
|
2709
|
+
"background-color": {
|
|
2710
|
+
"$extensions": {
|
|
2711
|
+
"nl.nldesignsystem.css.property": {}
|
|
2712
|
+
}
|
|
2713
|
+
},
|
|
2714
|
+
"color": {
|
|
2715
|
+
"$extensions": {
|
|
2716
|
+
"nl.nldesignsystem.css.property": {}
|
|
2717
|
+
}
|
|
2718
|
+
}
|
|
2719
|
+
},
|
|
2720
|
+
"hover": {
|
|
2636
2721
|
"background-color": DesignToken,
|
|
2637
2722
|
"color": DesignToken
|
|
2638
2723
|
},
|
|
2724
|
+
"selected": {
|
|
2725
|
+
"background-color": DesignToken,
|
|
2726
|
+
"color": DesignToken,
|
|
2727
|
+
"disabled": {
|
|
2728
|
+
"background-color": {
|
|
2729
|
+
"$extensions": {
|
|
2730
|
+
"nl.nldesignsystem.css.property": {}
|
|
2731
|
+
}
|
|
2732
|
+
},
|
|
2733
|
+
"color": {
|
|
2734
|
+
"$extensions": {
|
|
2735
|
+
"nl.nldesignsystem.css.property": {}
|
|
2736
|
+
}
|
|
2737
|
+
}
|
|
2738
|
+
},
|
|
2739
|
+
"hover": {
|
|
2740
|
+
"background-color": {
|
|
2741
|
+
"$extensions": {
|
|
2742
|
+
"nl.nldesignsystem.css.property": {}
|
|
2743
|
+
}
|
|
2744
|
+
},
|
|
2745
|
+
"color": {
|
|
2746
|
+
"$extensions": {
|
|
2747
|
+
"nl.nldesignsystem.css.property": {}
|
|
2748
|
+
}
|
|
2749
|
+
}
|
|
2750
|
+
}
|
|
2751
|
+
},
|
|
2639
2752
|
"icon": {
|
|
2640
2753
|
"size": {
|
|
2641
2754
|
"$extensions": {
|
|
2642
2755
|
"nl.nldesignsystem.css.property": {}
|
|
2643
2756
|
}
|
|
2644
2757
|
}
|
|
2645
|
-
},
|
|
2646
|
-
"hover": {
|
|
2647
|
-
"color": DesignToken,
|
|
2648
|
-
"background-color": DesignToken
|
|
2649
2758
|
}
|
|
2650
2759
|
},
|
|
2651
2760
|
"z-index": {},
|
|
@@ -2726,14 +2835,6 @@ declare const tokens: {
|
|
|
2726
2835
|
},
|
|
2727
2836
|
"min-block-size": DesignToken,
|
|
2728
2837
|
"min-inline-size": DesignToken,
|
|
2729
|
-
"margin-block-start": DesignToken,
|
|
2730
|
-
"margin-block-end": DesignToken,
|
|
2731
|
-
"margin-inline-start": DesignToken,
|
|
2732
|
-
"margin-inline-end": DesignToken,
|
|
2733
|
-
"padding-block-start": DesignToken,
|
|
2734
|
-
"padding-block-end": DesignToken,
|
|
2735
|
-
"padding-inline-start": DesignToken,
|
|
2736
|
-
"padding-inline-end": DesignToken,
|
|
2737
2838
|
"disabled": {
|
|
2738
2839
|
"background-color": DesignToken,
|
|
2739
2840
|
"border-color": DesignToken,
|
|
@@ -2752,18 +2853,14 @@ declare const tokens: {
|
|
|
2752
2853
|
"margin-inline-start": DesignToken,
|
|
2753
2854
|
"margin-inline-end": DesignToken
|
|
2754
2855
|
},
|
|
2755
|
-
"
|
|
2756
|
-
|
|
2757
|
-
|
|
2758
|
-
|
|
2759
|
-
|
|
2760
|
-
|
|
2761
|
-
|
|
2762
|
-
|
|
2763
|
-
"nl.nldesignsystem.css.property": {}
|
|
2764
|
-
}
|
|
2765
|
-
}
|
|
2766
|
-
}
|
|
2856
|
+
"margin-block-end": DesignToken,
|
|
2857
|
+
"margin-block-start": DesignToken,
|
|
2858
|
+
"margin-inline-end": DesignToken,
|
|
2859
|
+
"margin-inline-start": DesignToken,
|
|
2860
|
+
"padding-block-end": DesignToken,
|
|
2861
|
+
"padding-block-start": DesignToken,
|
|
2862
|
+
"padding-inline-end": DesignToken,
|
|
2863
|
+
"padding-inline-start": DesignToken
|
|
2767
2864
|
},
|
|
2768
2865
|
"mark": {
|
|
2769
2866
|
"background-color": DesignToken,
|
|
@@ -2830,7 +2927,19 @@ declare const tokens: {
|
|
|
2830
2927
|
},
|
|
2831
2928
|
"number-badge": {
|
|
2832
2929
|
"background-color": DesignToken,
|
|
2930
|
+
"border-color": {
|
|
2931
|
+
"$extensions": {
|
|
2932
|
+
"nl.nldesignsystem.css.property": {},
|
|
2933
|
+
"nl.nldesignsystem.fallback": {}
|
|
2934
|
+
}
|
|
2935
|
+
},
|
|
2833
2936
|
"border-radius": DesignToken,
|
|
2937
|
+
"border-width": {
|
|
2938
|
+
"$extensions": {
|
|
2939
|
+
"nl.nldesignsystem.css.property": {},
|
|
2940
|
+
"nl.nldesignsystem.fallback": {}
|
|
2941
|
+
}
|
|
2942
|
+
},
|
|
2834
2943
|
"color": DesignToken,
|
|
2835
2944
|
"font-family": {
|
|
2836
2945
|
"$extensions": {
|
|
@@ -3460,6 +3569,12 @@ declare const tokens: {
|
|
|
3460
3569
|
"nl.nldesignsystem.fallback": {}
|
|
3461
3570
|
}
|
|
3462
3571
|
},
|
|
3572
|
+
"line-height": {
|
|
3573
|
+
"$extensions": {
|
|
3574
|
+
"nl.nldesignsystem.css.property": {},
|
|
3575
|
+
"nl.nldesignsystem.fallback": {}
|
|
3576
|
+
}
|
|
3577
|
+
},
|
|
3463
3578
|
"min-block-size": {
|
|
3464
3579
|
"$extensions": {
|
|
3465
3580
|
"nl.nldesignsystem.css.property": {},
|
|
@@ -3516,6 +3631,26 @@ declare const tokens: {
|
|
|
3516
3631
|
}
|
|
3517
3632
|
}
|
|
3518
3633
|
},
|
|
3634
|
+
"hover": {
|
|
3635
|
+
"background-color": {
|
|
3636
|
+
"$extensions": {
|
|
3637
|
+
"nl.nldesignsystem.css.property": {},
|
|
3638
|
+
"nl.nldesignsystem.fallback": {}
|
|
3639
|
+
}
|
|
3640
|
+
},
|
|
3641
|
+
"border-color": {
|
|
3642
|
+
"$extensions": {
|
|
3643
|
+
"nl.nldesignsystem.css.property": {},
|
|
3644
|
+
"nl.nldesignsystem.fallback": {}
|
|
3645
|
+
}
|
|
3646
|
+
},
|
|
3647
|
+
"color": {
|
|
3648
|
+
"$extensions": {
|
|
3649
|
+
"nl.nldesignsystem.css.property": {},
|
|
3650
|
+
"nl.nldesignsystem.fallback": {}
|
|
3651
|
+
}
|
|
3652
|
+
}
|
|
3653
|
+
},
|
|
3519
3654
|
"focus": {
|
|
3520
3655
|
"background-color": {
|
|
3521
3656
|
"$extensions": {
|
|
@@ -3600,6 +3735,25 @@ declare const tokens: {
|
|
|
3600
3735
|
"focus": {
|
|
3601
3736
|
"background-color": DesignToken,
|
|
3602
3737
|
"color": DesignToken,
|
|
3738
|
+
"text-decoration": {
|
|
3739
|
+
"$extensions": {
|
|
3740
|
+
"nl.nldesignsystem.css.property": {
|
|
3741
|
+
"syntax": {}
|
|
3742
|
+
}
|
|
3743
|
+
}
|
|
3744
|
+
}
|
|
3745
|
+
},
|
|
3746
|
+
"focus-visible": {
|
|
3747
|
+
"background-color": {
|
|
3748
|
+
"$extensions": {
|
|
3749
|
+
"nl.nldesignsystem.css.property": {}
|
|
3750
|
+
}
|
|
3751
|
+
},
|
|
3752
|
+
"color": {
|
|
3753
|
+
"$extensions": {
|
|
3754
|
+
"nl.nldesignsystem.css.property": {}
|
|
3755
|
+
}
|
|
3756
|
+
},
|
|
3603
3757
|
"text-decoration": DesignToken
|
|
3604
3758
|
}
|
|
3605
3759
|
},
|
|
@@ -4468,12 +4622,6 @@ declare const tokens: {
|
|
|
4468
4622
|
"font-family": DesignToken
|
|
4469
4623
|
},
|
|
4470
4624
|
"scale": {
|
|
4471
|
-
"2xs": {
|
|
4472
|
-
"font-size": DesignToken
|
|
4473
|
-
},
|
|
4474
|
-
"xs": {
|
|
4475
|
-
"font-size": DesignToken
|
|
4476
|
-
},
|
|
4477
4625
|
"sm": {
|
|
4478
4626
|
"font-size": DesignToken
|
|
4479
4627
|
},
|