@openkfw/design-tokens 0.3.0 → 0.4.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/README.md +36 -2
- package/output/figma/kfw-design-tokens.light.json +22 -8
- package/output/json/kfw-design-tokens.light.json +200 -104
- package/output/penpot/kfw-design-tokens.light.json +22 -8
- package/output/web_stable_10px/css/kfw-design-tokens.light.css +42 -38
- package/output/web_stable_10px/js/kfw-design-tokens.light.d.ts +9 -2
- package/output/web_stable_10px/js/kfw-design-tokens.light.js +42 -38
- package/output/web_stable_10px/scss/kfw-design-tokens.light.scss +42 -38
- package/output/{web_next_16px → web_thirdparty_16px}/css/kfw-design-tokens.light.css +42 -38
- package/output/{web_next_16px → web_thirdparty_16px}/js/kfw-design-tokens.light.d.ts +9 -2
- package/output/{web_next_16px → web_thirdparty_16px}/js/kfw-design-tokens.light.js +42 -38
- package/output/{web_next_16px → web_thirdparty_16px}/scss/kfw-design-tokens.light.scss +42 -38
- package/package.json +6 -6
- package/tokens/gen-tokens.dark.json5 +64 -46
- package/tokens/tokens.json +36 -29
|
@@ -340,10 +340,10 @@
|
|
|
340
340
|
fontfamily: {
|
|
341
341
|
$type: "fontFamily",
|
|
342
342
|
sans: {
|
|
343
|
-
$value: "'KfW Centro Sans',
|
|
343
|
+
$value: "'KfW Centro Sans', system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif",
|
|
344
344
|
},
|
|
345
345
|
mono: {
|
|
346
|
-
$value: "ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas
|
|
346
|
+
$value: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
|
|
347
347
|
},
|
|
348
348
|
},
|
|
349
349
|
space: {
|
|
@@ -420,12 +420,12 @@
|
|
|
420
420
|
},
|
|
421
421
|
val: {
|
|
422
422
|
$value: {
|
|
423
|
-
value:
|
|
423
|
+
value: 0.588,
|
|
424
424
|
unit: "px",
|
|
425
425
|
},
|
|
426
426
|
$fluid: {
|
|
427
427
|
unit: "vi",
|
|
428
|
-
value: 0.
|
|
428
|
+
value: 0.735,
|
|
429
429
|
},
|
|
430
430
|
},
|
|
431
431
|
},
|
|
@@ -438,12 +438,12 @@
|
|
|
438
438
|
},
|
|
439
439
|
val: {
|
|
440
440
|
$value: {
|
|
441
|
-
value:
|
|
441
|
+
value: 5.588,
|
|
442
442
|
unit: "px",
|
|
443
443
|
},
|
|
444
444
|
$fluid: {
|
|
445
445
|
unit: "vi",
|
|
446
|
-
value: 0.
|
|
446
|
+
value: 0.735,
|
|
447
447
|
},
|
|
448
448
|
},
|
|
449
449
|
},
|
|
@@ -456,12 +456,12 @@
|
|
|
456
456
|
},
|
|
457
457
|
val: {
|
|
458
458
|
$value: {
|
|
459
|
-
value:
|
|
459
|
+
value: 10.588,
|
|
460
460
|
unit: "px",
|
|
461
461
|
},
|
|
462
462
|
$fluid: {
|
|
463
463
|
unit: "vi",
|
|
464
|
-
value: 0.
|
|
464
|
+
value: 0.735,
|
|
465
465
|
},
|
|
466
466
|
},
|
|
467
467
|
},
|
|
@@ -474,12 +474,12 @@
|
|
|
474
474
|
},
|
|
475
475
|
val: {
|
|
476
476
|
$value: {
|
|
477
|
-
value:
|
|
477
|
+
value: 15.588,
|
|
478
478
|
unit: "px",
|
|
479
479
|
},
|
|
480
480
|
$fluid: {
|
|
481
481
|
unit: "vi",
|
|
482
|
-
value: 0.
|
|
482
|
+
value: 0.735,
|
|
483
483
|
},
|
|
484
484
|
},
|
|
485
485
|
},
|
|
@@ -492,12 +492,12 @@
|
|
|
492
492
|
},
|
|
493
493
|
val: {
|
|
494
494
|
$value: {
|
|
495
|
-
value:
|
|
495
|
+
value: 20.588,
|
|
496
496
|
unit: "px",
|
|
497
497
|
},
|
|
498
498
|
$fluid: {
|
|
499
499
|
unit: "vi",
|
|
500
|
-
value: 0.
|
|
500
|
+
value: 0.735,
|
|
501
501
|
},
|
|
502
502
|
},
|
|
503
503
|
},
|
|
@@ -510,12 +510,12 @@
|
|
|
510
510
|
},
|
|
511
511
|
val: {
|
|
512
512
|
$value: {
|
|
513
|
-
value:
|
|
513
|
+
value: 25.588,
|
|
514
514
|
unit: "px",
|
|
515
515
|
},
|
|
516
516
|
$fluid: {
|
|
517
517
|
unit: "vi",
|
|
518
|
-
value: 0.
|
|
518
|
+
value: 0.735,
|
|
519
519
|
},
|
|
520
520
|
},
|
|
521
521
|
},
|
|
@@ -528,12 +528,12 @@
|
|
|
528
528
|
},
|
|
529
529
|
val: {
|
|
530
530
|
$value: {
|
|
531
|
-
value:
|
|
531
|
+
value: 30.588,
|
|
532
532
|
unit: "px",
|
|
533
533
|
},
|
|
534
534
|
$fluid: {
|
|
535
535
|
unit: "vi",
|
|
536
|
-
value: 0.
|
|
536
|
+
value: 0.735,
|
|
537
537
|
},
|
|
538
538
|
},
|
|
539
539
|
},
|
|
@@ -546,12 +546,12 @@
|
|
|
546
546
|
},
|
|
547
547
|
val: {
|
|
548
548
|
$value: {
|
|
549
|
-
value:
|
|
549
|
+
value: 31.176,
|
|
550
550
|
unit: "px",
|
|
551
551
|
},
|
|
552
552
|
$fluid: {
|
|
553
553
|
unit: "vi",
|
|
554
|
-
value: 1.
|
|
554
|
+
value: 1.471,
|
|
555
555
|
},
|
|
556
556
|
},
|
|
557
557
|
},
|
|
@@ -564,12 +564,12 @@
|
|
|
564
564
|
},
|
|
565
565
|
val: {
|
|
566
566
|
$value: {
|
|
567
|
-
value:
|
|
567
|
+
value: 41.176,
|
|
568
568
|
unit: "px",
|
|
569
569
|
},
|
|
570
570
|
$fluid: {
|
|
571
571
|
unit: "vi",
|
|
572
|
-
value: 1.
|
|
572
|
+
value: 1.471,
|
|
573
573
|
},
|
|
574
574
|
},
|
|
575
575
|
},
|
|
@@ -656,11 +656,11 @@
|
|
|
656
656
|
val: {
|
|
657
657
|
$value: {
|
|
658
658
|
unit: "px",
|
|
659
|
-
value:
|
|
659
|
+
value: 12.235,
|
|
660
660
|
},
|
|
661
661
|
$fluid: {
|
|
662
662
|
unit: "vi",
|
|
663
|
-
value: 0.
|
|
663
|
+
value: 0.294,
|
|
664
664
|
},
|
|
665
665
|
},
|
|
666
666
|
},
|
|
@@ -674,11 +674,11 @@
|
|
|
674
674
|
val: {
|
|
675
675
|
$value: {
|
|
676
676
|
unit: "px",
|
|
677
|
-
value:
|
|
677
|
+
value: 14.235,
|
|
678
678
|
},
|
|
679
679
|
$fluid: {
|
|
680
680
|
unit: "vi",
|
|
681
|
-
value: 0.
|
|
681
|
+
value: 0.294,
|
|
682
682
|
},
|
|
683
683
|
},
|
|
684
684
|
},
|
|
@@ -692,11 +692,11 @@
|
|
|
692
692
|
val: {
|
|
693
693
|
$value: {
|
|
694
694
|
unit: "px",
|
|
695
|
-
value:
|
|
695
|
+
value: 16.235,
|
|
696
696
|
},
|
|
697
697
|
$fluid: {
|
|
698
698
|
unit: "vi",
|
|
699
|
-
value: 0.
|
|
699
|
+
value: 0.294,
|
|
700
700
|
},
|
|
701
701
|
},
|
|
702
702
|
},
|
|
@@ -710,11 +710,11 @@
|
|
|
710
710
|
val: {
|
|
711
711
|
$value: {
|
|
712
712
|
unit: "px",
|
|
713
|
-
value:
|
|
713
|
+
value: 18.235,
|
|
714
714
|
},
|
|
715
715
|
$fluid: {
|
|
716
716
|
unit: "vi",
|
|
717
|
-
value: 0.
|
|
717
|
+
value: 0.294,
|
|
718
718
|
},
|
|
719
719
|
},
|
|
720
720
|
},
|
|
@@ -728,11 +728,11 @@
|
|
|
728
728
|
val: {
|
|
729
729
|
$value: {
|
|
730
730
|
unit: "px",
|
|
731
|
-
value:
|
|
731
|
+
value: 20.235,
|
|
732
732
|
},
|
|
733
733
|
$fluid: {
|
|
734
734
|
unit: "vi",
|
|
735
|
-
value: 0.
|
|
735
|
+
value: 0.294,
|
|
736
736
|
},
|
|
737
737
|
},
|
|
738
738
|
},
|
|
@@ -746,11 +746,11 @@
|
|
|
746
746
|
val: {
|
|
747
747
|
$value: {
|
|
748
748
|
unit: "px",
|
|
749
|
-
value:
|
|
749
|
+
value: 22.235,
|
|
750
750
|
},
|
|
751
751
|
$fluid: {
|
|
752
752
|
unit: "vi",
|
|
753
|
-
value: 0.
|
|
753
|
+
value: 0.294,
|
|
754
754
|
},
|
|
755
755
|
},
|
|
756
756
|
},
|
|
@@ -764,11 +764,11 @@
|
|
|
764
764
|
val: {
|
|
765
765
|
$value: {
|
|
766
766
|
unit: "px",
|
|
767
|
-
value:
|
|
767
|
+
value: 24.235,
|
|
768
768
|
},
|
|
769
769
|
$fluid: {
|
|
770
770
|
unit: "vi",
|
|
771
|
-
value: 0.
|
|
771
|
+
value: 0.294,
|
|
772
772
|
},
|
|
773
773
|
},
|
|
774
774
|
},
|
|
@@ -782,11 +782,11 @@
|
|
|
782
782
|
val: {
|
|
783
783
|
$value: {
|
|
784
784
|
unit: "px",
|
|
785
|
-
value:
|
|
785
|
+
value: 24.471,
|
|
786
786
|
},
|
|
787
787
|
$fluid: {
|
|
788
788
|
unit: "vi",
|
|
789
|
-
value: 0.
|
|
789
|
+
value: 0.588,
|
|
790
790
|
},
|
|
791
791
|
},
|
|
792
792
|
},
|
|
@@ -800,11 +800,11 @@
|
|
|
800
800
|
val: {
|
|
801
801
|
$value: {
|
|
802
802
|
unit: "px",
|
|
803
|
-
value:
|
|
803
|
+
value: 24.706,
|
|
804
804
|
},
|
|
805
805
|
$fluid: {
|
|
806
806
|
unit: "vi",
|
|
807
|
-
value: 0.
|
|
807
|
+
value: 0.882,
|
|
808
808
|
},
|
|
809
809
|
},
|
|
810
810
|
},
|
|
@@ -997,11 +997,11 @@
|
|
|
997
997
|
val: {
|
|
998
998
|
$value: {
|
|
999
999
|
unit: "px",
|
|
1000
|
-
value:
|
|
1000
|
+
value: 2.353,
|
|
1001
1001
|
},
|
|
1002
1002
|
$fluid: {
|
|
1003
1003
|
unit: "vi",
|
|
1004
|
-
value:
|
|
1004
|
+
value: 2.941,
|
|
1005
1005
|
},
|
|
1006
1006
|
},
|
|
1007
1007
|
},
|
|
@@ -1074,11 +1074,11 @@
|
|
|
1074
1074
|
val: {
|
|
1075
1075
|
$value: {
|
|
1076
1076
|
unit: "px",
|
|
1077
|
-
value:
|
|
1077
|
+
value: -9.176,
|
|
1078
1078
|
},
|
|
1079
1079
|
$fluid: {
|
|
1080
1080
|
unit: "vi",
|
|
1081
|
-
value:
|
|
1081
|
+
value: 3.529,
|
|
1082
1082
|
},
|
|
1083
1083
|
},
|
|
1084
1084
|
},
|
|
@@ -1091,6 +1091,7 @@
|
|
|
1091
1091
|
fn: {
|
|
1092
1092
|
default: {
|
|
1093
1093
|
$value: "{base.color.white.default}",
|
|
1094
|
+
$description: "Main interaction color for buttons and links",
|
|
1094
1095
|
},
|
|
1095
1096
|
active: {
|
|
1096
1097
|
$value: "{base.color.white.default}",
|
|
@@ -1108,6 +1109,7 @@
|
|
|
1108
1109
|
text: {
|
|
1109
1110
|
default: {
|
|
1110
1111
|
$value: "{base.color.gray.100}",
|
|
1112
|
+
$description: "Main text color for body",
|
|
1111
1113
|
},
|
|
1112
1114
|
"on-dark-bg": {
|
|
1113
1115
|
$value: "{base.color.blue.700}",
|
|
@@ -1122,6 +1124,7 @@
|
|
|
1122
1124
|
background: {
|
|
1123
1125
|
default: {
|
|
1124
1126
|
$value: "{base.color.black}",
|
|
1127
|
+
$description: "Main background color for body",
|
|
1125
1128
|
},
|
|
1126
1129
|
subtle: {
|
|
1127
1130
|
$value: "{base.color.gray.600}",
|
|
@@ -1285,14 +1288,17 @@
|
|
|
1285
1288
|
default: {
|
|
1286
1289
|
$value: "{base.space.static.20}",
|
|
1287
1290
|
},
|
|
1288
|
-
|
|
1289
|
-
$value: "{base.space.static.
|
|
1291
|
+
"2xsmall": {
|
|
1292
|
+
$value: "{base.space.static.5}",
|
|
1293
|
+
},
|
|
1294
|
+
xsmall: {
|
|
1295
|
+
$value: "{base.space.static.10}",
|
|
1290
1296
|
},
|
|
1291
1297
|
small: {
|
|
1292
|
-
$value: "{base.space.static.
|
|
1298
|
+
$value: "{base.space.static.15}",
|
|
1293
1299
|
},
|
|
1294
1300
|
large: {
|
|
1295
|
-
$value: "{base.space.static.
|
|
1301
|
+
$value: "{base.space.static.30}",
|
|
1296
1302
|
},
|
|
1297
1303
|
"heading-1": {
|
|
1298
1304
|
$value: "{base.space.static.20}",
|
|
@@ -1397,6 +1403,15 @@
|
|
|
1397
1403
|
$type: "dimension",
|
|
1398
1404
|
$value: "{base.borderradius.md}",
|
|
1399
1405
|
},
|
|
1406
|
+
borderwidth: {
|
|
1407
|
+
$type: "dimension",
|
|
1408
|
+
default: {
|
|
1409
|
+
$value: "{base.borderwidth.md}",
|
|
1410
|
+
},
|
|
1411
|
+
large: {
|
|
1412
|
+
$value: "{base.borderwidth.lg}",
|
|
1413
|
+
},
|
|
1414
|
+
},
|
|
1400
1415
|
focusring: {
|
|
1401
1416
|
"outline-width": {
|
|
1402
1417
|
$type: "dimension",
|
|
@@ -1431,6 +1446,9 @@
|
|
|
1431
1446
|
desktop: {
|
|
1432
1447
|
$value: "{base.layout.breakpoint.lg}",
|
|
1433
1448
|
},
|
|
1449
|
+
"desktop-large": {
|
|
1450
|
+
$value: "{base.layout.breakpoint.xl}",
|
|
1451
|
+
},
|
|
1434
1452
|
},
|
|
1435
1453
|
contentwrapper: {
|
|
1436
1454
|
$type: "dimension",
|
package/tokens/tokens.json
CHANGED
|
@@ -50,10 +50,10 @@
|
|
|
50
50
|
"fontfamily": {
|
|
51
51
|
"$type": "fontFamily",
|
|
52
52
|
"sans": {
|
|
53
|
-
"$value": "'KfW Centro Sans',
|
|
53
|
+
"$value": "'KfW Centro Sans', system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif"
|
|
54
54
|
},
|
|
55
55
|
"mono": {
|
|
56
|
-
"$value": "ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas
|
|
56
|
+
"$value": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace"
|
|
57
57
|
}
|
|
58
58
|
},
|
|
59
59
|
"space": {
|
|
@@ -74,47 +74,47 @@
|
|
|
74
74
|
"5": {
|
|
75
75
|
"min": { "$value": "{base.space.static.5}" },
|
|
76
76
|
"max": { "$value": "{base.space.static.10}" },
|
|
77
|
-
"val": { "$value": { "value":
|
|
77
|
+
"val": { "$value": { "value": 0.588, "unit": "px" }, "$fluid": { "unit": "vi", "value": 0.735 } }
|
|
78
78
|
},
|
|
79
79
|
"10": {
|
|
80
80
|
"min": { "$value": "{base.space.static.10}" },
|
|
81
81
|
"max": { "$value": "{base.space.static.15}" },
|
|
82
|
-
"val": { "$value": { "value":
|
|
82
|
+
"val": { "$value": { "value": 5.588, "unit": "px" }, "$fluid": { "unit": "vi", "value": 0.735 } }
|
|
83
83
|
},
|
|
84
84
|
"15": {
|
|
85
85
|
"min": { "$value": "{base.space.static.15}" },
|
|
86
86
|
"max": { "$value": "{base.space.static.20}" },
|
|
87
|
-
"val": { "$value": { "value":
|
|
87
|
+
"val": { "$value": { "value": 10.588, "unit": "px" }, "$fluid": { "unit": "vi", "value": 0.735 } }
|
|
88
88
|
},
|
|
89
89
|
"20": {
|
|
90
90
|
"min": { "$value": "{base.space.static.20}" },
|
|
91
91
|
"max": { "$value": "{base.space.static.25}" },
|
|
92
|
-
"val": { "$value": { "value":
|
|
92
|
+
"val": { "$value": { "value": 15.588, "unit": "px" }, "$fluid": { "unit": "vi", "value": 0.735 } }
|
|
93
93
|
},
|
|
94
94
|
"25": {
|
|
95
95
|
"min": { "$value": "{base.space.static.25}" },
|
|
96
96
|
"max": { "$value": "{base.space.static.30}" },
|
|
97
|
-
"val": { "$value": { "value":
|
|
97
|
+
"val": { "$value": { "value": 20.588, "unit": "px" }, "$fluid": { "unit": "vi", "value": 0.735 } }
|
|
98
98
|
},
|
|
99
99
|
"30": {
|
|
100
100
|
"min": { "$value": "{base.space.static.30}" },
|
|
101
101
|
"max": { "$value": "{base.space.static.35}" },
|
|
102
|
-
"val": { "$value": { "value":
|
|
102
|
+
"val": { "$value": { "value": 25.588, "unit": "px" }, "$fluid": { "unit": "vi", "value": 0.735 } }
|
|
103
103
|
},
|
|
104
104
|
"35": {
|
|
105
105
|
"min": { "$value": "{base.space.static.35}" },
|
|
106
106
|
"max": { "$value": "{base.space.static.40}" },
|
|
107
|
-
"val": { "$value": { "value":
|
|
107
|
+
"val": { "$value": { "value": 30.588, "unit": "px" }, "$fluid": { "unit": "vi", "value": 0.735 } }
|
|
108
108
|
},
|
|
109
109
|
"40": {
|
|
110
110
|
"min": { "$value": "{base.space.static.40}" },
|
|
111
111
|
"max": { "$value": "{base.space.static.50}" },
|
|
112
|
-
"val": { "$value": { "value":
|
|
112
|
+
"val": { "$value": { "value": 31.176, "unit": "px" }, "$fluid": { "unit": "vi", "value": 1.471 } }
|
|
113
113
|
},
|
|
114
114
|
"50": {
|
|
115
115
|
"min": { "$value": "{base.space.static.50}" },
|
|
116
116
|
"max": { "$value": "{base.space.static.60}" },
|
|
117
|
-
"val": { "$value": { "value":
|
|
117
|
+
"val": { "$value": { "value": 41.176, "unit": "px" }, "$fluid": { "unit": "vi", "value": 1.471 } }
|
|
118
118
|
}
|
|
119
119
|
}
|
|
120
120
|
},
|
|
@@ -137,47 +137,47 @@
|
|
|
137
137
|
"sm": {
|
|
138
138
|
"min": { "$value": "{base.fontsize.static.sm}" },
|
|
139
139
|
"max": { "$value": "{base.fontsize.static.md}" },
|
|
140
|
-
"val": { "$value": { "unit": "px", "value":
|
|
140
|
+
"val": { "$value": { "unit": "px", "value": 12.235 }, "$fluid": { "unit": "vi", "value": 0.294 } }
|
|
141
141
|
},
|
|
142
142
|
"md": {
|
|
143
143
|
"min": { "$value": "{base.fontsize.static.md}" },
|
|
144
144
|
"max": { "$value": "{base.fontsize.static.lg}" },
|
|
145
|
-
"val": { "$value": { "unit": "px", "value":
|
|
145
|
+
"val": { "$value": { "unit": "px", "value": 14.235 }, "$fluid": { "unit": "vi", "value": 0.294 } }
|
|
146
146
|
},
|
|
147
147
|
"lg": {
|
|
148
148
|
"min": { "$value": "{base.fontsize.static.lg}" },
|
|
149
149
|
"max": { "$value": "{base.fontsize.static.xl}" },
|
|
150
|
-
"val": { "$value": { "unit": "px", "value":
|
|
150
|
+
"val": { "$value": { "unit": "px", "value": 16.235 }, "$fluid": { "unit": "vi", "value": 0.294 } }
|
|
151
151
|
},
|
|
152
152
|
"xl": {
|
|
153
153
|
"min": { "$value": "{base.fontsize.static.xl}" },
|
|
154
154
|
"max": { "$value": "{base.fontsize.static.2xl}" },
|
|
155
|
-
"val": { "$value": { "unit": "px", "value":
|
|
155
|
+
"val": { "$value": { "unit": "px", "value": 18.235 }, "$fluid": { "unit": "vi", "value": 0.294 } }
|
|
156
156
|
},
|
|
157
157
|
"2xl": {
|
|
158
158
|
"min": { "$value": "{base.fontsize.static.2xl}" },
|
|
159
159
|
"max": { "$value": "{base.fontsize.static.3xl}" },
|
|
160
|
-
"val": { "$value": { "unit": "px", "value":
|
|
160
|
+
"val": { "$value": { "unit": "px", "value": 20.235 }, "$fluid": { "unit": "vi", "value": 0.294 } }
|
|
161
161
|
},
|
|
162
162
|
"3xl": {
|
|
163
163
|
"min": { "$value": "{base.fontsize.static.3xl}" },
|
|
164
164
|
"max": { "$value": "{base.fontsize.static.4xl}" },
|
|
165
|
-
"val": { "$value": { "unit": "px", "value":
|
|
165
|
+
"val": { "$value": { "unit": "px", "value": 22.235 }, "$fluid": { "unit": "vi", "value": 0.294 } }
|
|
166
166
|
},
|
|
167
167
|
"4xl": {
|
|
168
168
|
"min": { "$value": "{base.fontsize.static.4xl}" },
|
|
169
169
|
"max": { "$value": "{base.fontsize.static.5xl}" },
|
|
170
|
-
"val": { "$value": { "unit": "px", "value":
|
|
170
|
+
"val": { "$value": { "unit": "px", "value": 24.235 }, "$fluid": { "unit": "vi", "value": 0.294 } }
|
|
171
171
|
},
|
|
172
172
|
"5xl": {
|
|
173
173
|
"min": { "$value": "{base.fontsize.static.5xl}" },
|
|
174
174
|
"max": { "$value": "{base.fontsize.static.7xl}" },
|
|
175
|
-
"val": { "$value": { "unit": "px", "value":
|
|
175
|
+
"val": { "$value": { "unit": "px", "value": 24.471 }, "$fluid": { "unit": "vi", "value": 0.588 } }
|
|
176
176
|
},
|
|
177
177
|
"6xl": {
|
|
178
178
|
"min": { "$value": "{base.fontsize.static.6xl}" },
|
|
179
179
|
"max": { "$value": "{base.fontsize.static.8xl}" },
|
|
180
|
-
"val": { "$value": { "unit": "px", "value":
|
|
180
|
+
"val": { "$value": { "unit": "px", "value": 24.706 }, "$fluid": { "unit": "vi", "value": 0.882 } }
|
|
181
181
|
}
|
|
182
182
|
}
|
|
183
183
|
},
|
|
@@ -237,7 +237,7 @@
|
|
|
237
237
|
"fluid": {
|
|
238
238
|
"min": { "$value": "{base.layout.safezone.static.md}" },
|
|
239
239
|
"max": { "$value": "{base.layout.safezone.static.lg}" },
|
|
240
|
-
"val": { "$value": { "unit": "px", "value":
|
|
240
|
+
"val": { "$value": { "unit": "px", "value": 2.353 }, "$fluid": { "unit": "vi", "value": 2.941 } }
|
|
241
241
|
}
|
|
242
242
|
},
|
|
243
243
|
"gridcolumn": {
|
|
@@ -262,7 +262,7 @@
|
|
|
262
262
|
"fluid": {
|
|
263
263
|
"min": { "$value": "{base.layout.gridgap.static.xs}" },
|
|
264
264
|
"max": { "$value": "{base.layout.gridgap.static.xl}" },
|
|
265
|
-
"val": { "$value": { "unit": "px", "value":
|
|
265
|
+
"val": { "$value": { "unit": "px", "value": -9.176 }, "$fluid": { "unit": "vi", "value": 3.529 } }
|
|
266
266
|
}
|
|
267
267
|
}
|
|
268
268
|
}
|
|
@@ -271,20 +271,20 @@
|
|
|
271
271
|
"color": {
|
|
272
272
|
"$type": "color",
|
|
273
273
|
"fn": {
|
|
274
|
-
"default": { "$value": "{base.color.blue.600}" },
|
|
274
|
+
"default": { "$value": "{base.color.blue.600}", "$description": "Main interaction color for buttons and links" },
|
|
275
275
|
"active": { "$value": "{base.color.blue.700}" },
|
|
276
276
|
"inactive": { "$value": "{base.color.gray.300}" },
|
|
277
277
|
"border": { "$value": "{base.color.gray.600}" },
|
|
278
278
|
"label": { "$value": "{base.color.gray.600}" }
|
|
279
279
|
},
|
|
280
280
|
"text": {
|
|
281
|
-
"default": { "$value": "{base.color.gray.600}" },
|
|
281
|
+
"default": { "$value": "{base.color.gray.600}", "$description": "Main text color for body" },
|
|
282
282
|
"on-dark-bg": { "$value": "{base.color.white.default}" },
|
|
283
283
|
"on-disabled": { "$value": "{base.color.white.default}" },
|
|
284
284
|
"headline-on-dark-bg": { "$value": "{base.color.green.300}" }
|
|
285
285
|
},
|
|
286
286
|
"background": {
|
|
287
|
-
"default": { "$value": "{base.color.white.default}" },
|
|
287
|
+
"default": { "$value": "{base.color.white.default}", "$description": "Main background color for body" },
|
|
288
288
|
"subtle": { "$value": "{base.color.gray.50}" },
|
|
289
289
|
"disabled": { "$value": "{base.color.gray.300}" },
|
|
290
290
|
"light-blue": { "$value": "{base.color.blue.100}" },
|
|
@@ -361,9 +361,10 @@
|
|
|
361
361
|
"fontspace": {
|
|
362
362
|
"$type": "dimension",
|
|
363
363
|
"default": { "$value": "{base.space.static.20}" },
|
|
364
|
-
"
|
|
365
|
-
"
|
|
366
|
-
"
|
|
364
|
+
"2xsmall": { "$value": "{base.space.static.5}" },
|
|
365
|
+
"xsmall": { "$value": "{base.space.static.10}" },
|
|
366
|
+
"small": { "$value": "{base.space.static.15}" },
|
|
367
|
+
"large": { "$value": "{base.space.static.30}" },
|
|
367
368
|
"heading-1": { "$value": "{base.space.static.20}" },
|
|
368
369
|
"heading-2": { "$value": "{base.space.static.20}" },
|
|
369
370
|
"heading-3": { "$value": "{base.space.static.10}" },
|
|
@@ -411,6 +412,11 @@
|
|
|
411
412
|
"$type": "dimension",
|
|
412
413
|
"$value": "{base.borderradius.md}"
|
|
413
414
|
},
|
|
415
|
+
"borderwidth": {
|
|
416
|
+
"$type": "dimension",
|
|
417
|
+
"default": { "$value": "{base.borderwidth.md}" },
|
|
418
|
+
"large": { "$value": "{base.borderwidth.lg}" }
|
|
419
|
+
},
|
|
414
420
|
"focusring": {
|
|
415
421
|
"outline-width": { "$type": "dimension", "$value": "{base.borderwidth.lg}" },
|
|
416
422
|
"outline-offset": { "$type": "dimension", "$value": "{base.borderwidth.lg}" },
|
|
@@ -429,7 +435,8 @@
|
|
|
429
435
|
"$type": "dimension",
|
|
430
436
|
"mobile": { "$value": "{base.layout.breakpoint.sm}" },
|
|
431
437
|
"tablet": { "$value": "{base.layout.breakpoint.md}" },
|
|
432
|
-
"desktop": { "$value": "{base.layout.breakpoint.lg}" }
|
|
438
|
+
"desktop": { "$value": "{base.layout.breakpoint.lg}" },
|
|
439
|
+
"desktop-large": { "$value": "{base.layout.breakpoint.xl}" }
|
|
433
440
|
},
|
|
434
441
|
"contentwrapper": {
|
|
435
442
|
"$type": "dimension",
|