@baloise/ds-tokens 20.0.0-next.7 → 20.0.0-next.8
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/dist/css/base.tokens.css +198 -198
- package/dist/docs/base.tokens.json +44096 -44115
- package/dist/js/base.tokens.js +212 -212
- package/dist/out-tsc/config.brand.js +1 -1
- package/dist/out-tsc/css-naming.js +26 -0
- package/dist/out-tsc/css-preview.js +8 -0
- package/dist/out-tsc/css-value.js +86 -0
- package/dist/out-tsc/formatter.js +3 -3
- package/dist/out-tsc/transformers.js +6 -79
- package/dist/sass/base.tokens.scss +187 -187
- package/dist/web/base.tokens.json +217 -217
- package/package.json +6 -1
- package/sbom.cdx.json +36584 -18456
package/dist/js/base.tokens.js
CHANGED
|
@@ -2,162 +2,6 @@
|
|
|
2
2
|
* Do not edit directly, this file was auto-generated.
|
|
3
3
|
*/
|
|
4
4
|
|
|
5
|
-
export const DsGlobalColorWhite = "#ffffff";
|
|
6
|
-
export const DsGlobalColorBlack = "#000000";
|
|
7
|
-
export const DsGlobalColorNeutral = "#ffffff00";
|
|
8
|
-
export const DsGlobalColorDanger1 = "#fce8e6";
|
|
9
|
-
export const DsGlobalColorDanger2 = "#f7a299";
|
|
10
|
-
export const DsGlobalColorDanger3 = "#f05d4d";
|
|
11
|
-
export const DsGlobalColorDanger4 = "#ea1800";
|
|
12
|
-
export const DsGlobalColorDanger5 = "#cb1501";
|
|
13
|
-
export const DsGlobalColorDanger6 = "#a01100";
|
|
14
|
-
export const DsGlobalColorWarning1 = "#fff9e8";
|
|
15
|
-
export const DsGlobalColorWarning2 = "#ffe5a3";
|
|
16
|
-
export const DsGlobalColorWarning3 = "#ffd25e";
|
|
17
|
-
export const DsGlobalColorWarning4 = "#ffbe19";
|
|
18
|
-
export const DsGlobalColorWarning5 = "#f99319";
|
|
19
|
-
export const DsGlobalColorWarning6 = "#c97612";
|
|
20
|
-
export const DsGlobalColorSuccess1 = "#e8f3ec";
|
|
21
|
-
export const DsGlobalColorSuccess2 = "#a1cfb3";
|
|
22
|
-
export const DsGlobalColorSuccess3 = "#5bab7a";
|
|
23
|
-
export const DsGlobalColorSuccess4 = "#168741";
|
|
24
|
-
export const DsGlobalColorSuccess5 = "#116b34";
|
|
25
|
-
export const DsGlobalColorSuccess6 = "#0b5227";
|
|
26
|
-
export const DsGlobalColorInfo1 = "#e8f1fb";
|
|
27
|
-
export const DsGlobalColorInfo2 = "#a4c9ed";
|
|
28
|
-
export const DsGlobalColorInfo3 = "#60a0e0";
|
|
29
|
-
export const DsGlobalColorInfo4 = "#1c77d2";
|
|
30
|
-
export const DsGlobalColorInfo5 = "#155ba3";
|
|
31
|
-
export const DsGlobalColorInfo6 = "#0e457b";
|
|
32
|
-
export const DsGlobalColorSky1 = "#e5f1fe";
|
|
33
|
-
export const DsGlobalColorSky2 = "#a7d1fa";
|
|
34
|
-
export const DsGlobalColorSky3 = "#56a7f5";
|
|
35
|
-
export const DsGlobalColorSky4 = "#6672cc";
|
|
36
|
-
export const DsGlobalColorSky5 = "#0014aa";
|
|
37
|
-
export const DsGlobalColorSky6 = "#000a55";
|
|
38
|
-
export const DsGlobalColorGrey0 = "#fafafa";
|
|
39
|
-
export const DsGlobalColorGrey1 = "#f0f0f0";
|
|
40
|
-
export const DsGlobalColorGrey2 = "#e0e0e0";
|
|
41
|
-
export const DsGlobalColorGrey3 = "#d0d0d0";
|
|
42
|
-
export const DsGlobalColorGrey4 = "#b6b6b6";
|
|
43
|
-
export const DsGlobalColorGrey5 = "#747474";
|
|
44
|
-
export const DsGlobalColorGrey6 = "#313131";
|
|
45
|
-
export const DsGlobalColorYellow1 = "#fff9e8";
|
|
46
|
-
export const DsGlobalColorYellow2 = "#ffecbc";
|
|
47
|
-
export const DsGlobalColorYellow3 = "#fae052";
|
|
48
|
-
export const DsGlobalColorYellow4 = "#ffbe19";
|
|
49
|
-
export const DsGlobalColorYellow5 = "#fa9319";
|
|
50
|
-
export const DsGlobalColorYellow6 = "#b24a00";
|
|
51
|
-
export const DsGlobalColorRed1 = "#ffeef1";
|
|
52
|
-
export const DsGlobalColorRed2 = "#ffd7d7";
|
|
53
|
-
export const DsGlobalColorRed3 = "#ffaca6";
|
|
54
|
-
export const DsGlobalColorRed4 = "#ff596f";
|
|
55
|
-
export const DsGlobalColorRed5 = "#d9304c";
|
|
56
|
-
export const DsGlobalColorRed6 = "#99172d";
|
|
57
|
-
export const DsGlobalColorGreen1 = "#e9fbf7";
|
|
58
|
-
export const DsGlobalColorGreen2 = "#cbf2ec";
|
|
59
|
-
export const DsGlobalColorGreen3 = "#94e3d4";
|
|
60
|
-
export const DsGlobalColorGreen4 = "#21d9ac";
|
|
61
|
-
export const DsGlobalColorGreen5 = "#00b28f";
|
|
62
|
-
export const DsGlobalColorGreen6 = "#1b5951";
|
|
63
|
-
export const DsGlobalColorPurple1 = "#f9f3ff";
|
|
64
|
-
export const DsGlobalColorPurple2 = "#e1d9ff";
|
|
65
|
-
export const DsGlobalColorPurple3 = "#b8b2ff";
|
|
66
|
-
export const DsGlobalColorPurple4 = "#be82fa";
|
|
67
|
-
export const DsGlobalColorPurple5 = "#9f52cc";
|
|
68
|
-
export const DsGlobalColorPurple6 = "#6c2273";
|
|
69
|
-
export const DsGlobalColorPrimary1 = "#e5e7f0";
|
|
70
|
-
export const DsGlobalColorPrimary2 = "#b3b6d4";
|
|
71
|
-
export const DsGlobalColorPrimary3 = "#656ea8";
|
|
72
|
-
export const DsGlobalColorPrimary4 = "#293485";
|
|
73
|
-
export const DsGlobalColorPrimary5 = "#000d6e";
|
|
74
|
-
export const DsGlobalColorPrimary6 = "#000739";
|
|
75
|
-
export const DsGlobalElevationShadow0 = "none";
|
|
76
|
-
export const DsGlobalElevationShadow1 = "0 2px 5px 1px rgba(0, 7, 57, 0.12)";
|
|
77
|
-
export const DsGlobalElevationShadow2 = "0 4px 4px 0 rgba(0, 7, 57, 0.15)";
|
|
78
|
-
export const DsGlobalElevationShadow3 = "0 0 10px 0 rgba(0, 7, 57, 0.15)";
|
|
79
|
-
export const DsGlobalElevationShadow4 = "0 0 30px 0 rgba(0, 7, 57, 0.15)";
|
|
80
|
-
export const DsGlobalElevationOpacity0 = 0;
|
|
81
|
-
export const DsGlobalElevationOpacity30 = 0.3;
|
|
82
|
-
export const DsGlobalElevationOpacity40 = 0.4;
|
|
83
|
-
export const DsGlobalElevationOpacity50 = 0.5;
|
|
84
|
-
export const DsGlobalElevationOpacity60 = 0.6;
|
|
85
|
-
export const DsGlobalElevationOpacity80 = 0.8;
|
|
86
|
-
export const DsGlobalElevationOpacity100 = 1;
|
|
87
|
-
export const DsGlobalElevationZIndex100 = 100;
|
|
88
|
-
export const DsGlobalElevationZIndex200 = 200;
|
|
89
|
-
export const DsGlobalElevationZIndex300 = 300;
|
|
90
|
-
export const DsGlobalElevationZIndex400 = 400;
|
|
91
|
-
export const DsGlobalElevationZIndex1000 = 1000;
|
|
92
|
-
export const DsGlobalElevationZIndex1100 = 1100;
|
|
93
|
-
export const DsGlobalElevationZIndex1200 = 1200;
|
|
94
|
-
export const DsGlobalElevationZIndex1300 = 1300;
|
|
95
|
-
export const DsGlobalElevationZIndexBehindAll = -999999;
|
|
96
|
-
export const DsGlobalFontShadow0 = "none";
|
|
97
|
-
export const DsGlobalFontShadow1 =
|
|
98
|
-
"0px 0px 4px rgba(0, 0, 0, 0.15), 0px 4px 12px rgba(0, 0, 0, 0.25), 0px 0px 80px rgba(0, 0, 0, 0.5)";
|
|
99
|
-
export const DsGlobalFontSize0 = 0;
|
|
100
|
-
export const DsGlobalFontSize12 = 12;
|
|
101
|
-
export const DsGlobalFontSize14 = 14;
|
|
102
|
-
export const DsGlobalFontSize16 = 16;
|
|
103
|
-
export const DsGlobalFontSize18 = 18;
|
|
104
|
-
export const DsGlobalFontSize20 = 20;
|
|
105
|
-
export const DsGlobalFontSize24 = 24;
|
|
106
|
-
export const DsGlobalFontSize28 = 28;
|
|
107
|
-
export const DsGlobalFontSize32 = 32;
|
|
108
|
-
export const DsGlobalFontSize40 = 40;
|
|
109
|
-
export const DsGlobalFontSize48 = 48;
|
|
110
|
-
export const DsGlobalFontSize80 = 80;
|
|
111
|
-
export const DsGlobalFontSize176 = 176;
|
|
112
|
-
export const DsGlobalFontFamilyHeading =
|
|
113
|
-
'"BaloiseCreateHeadline", "Arial", "sans-serif"';
|
|
114
|
-
export const DsGlobalFontFamilyBody =
|
|
115
|
-
'"BaloiseCreateText", "Arial", "sans-serif"';
|
|
116
|
-
export const DsGlobalFontWeight300 = "300";
|
|
117
|
-
export const DsGlobalFontWeight400 = "400";
|
|
118
|
-
export const DsGlobalFontWeight700 = "700";
|
|
119
|
-
export const DsGlobalFontLineHeight1 = 1;
|
|
120
|
-
export const DsGlobalFontLineHeight2 = 1.3;
|
|
121
|
-
export const DsGlobalFontLineHeight3 = 1.5;
|
|
122
|
-
export const DsGlobalFontLineHeight4 = 2;
|
|
123
|
-
export const DsGlobalSizeBorder0 = 0;
|
|
124
|
-
export const DsGlobalSizeBorder1 = 1;
|
|
125
|
-
export const DsGlobalSizeBorder2 = 2;
|
|
126
|
-
export const DsGlobalSizeBorder3 = 4;
|
|
127
|
-
export const DsGlobalSizeRadius0 = 0;
|
|
128
|
-
export const DsGlobalSizeRadius1 = 4;
|
|
129
|
-
export const DsGlobalSizeRadius2 = 12;
|
|
130
|
-
export const DsGlobalSizeRadius3 = 9999;
|
|
131
|
-
export const DsGlobalSizeBreakpoint1 = 769;
|
|
132
|
-
export const DsGlobalSizeBreakpoint2 = 1024;
|
|
133
|
-
export const DsGlobalSizeBreakpoint3 = 1280;
|
|
134
|
-
export const DsGlobalSizeBreakpoint4 = 1440;
|
|
135
|
-
export const DsGlobalSizeBreakpoint5 = 1920;
|
|
136
|
-
export const DsGlobalSizeContainer1 = 320;
|
|
137
|
-
export const DsGlobalSizeContainer2 = 480;
|
|
138
|
-
export const DsGlobalSizeContainer3 = 640;
|
|
139
|
-
export const DsGlobalSizeContainer4 = 896;
|
|
140
|
-
export const DsGlobalSizeContainer5 = 1496;
|
|
141
|
-
export const DsGlobalSizeContainerFull = "100%";
|
|
142
|
-
export const DsGlobalSizeSpace0 = 0;
|
|
143
|
-
export const DsGlobalSizeSpace1 = 1;
|
|
144
|
-
export const DsGlobalSizeSpace2 = 2;
|
|
145
|
-
export const DsGlobalSizeSpace4 = 4;
|
|
146
|
-
export const DsGlobalSizeSpace8 = 8;
|
|
147
|
-
export const DsGlobalSizeSpace12 = 12;
|
|
148
|
-
export const DsGlobalSizeSpace14 = 14;
|
|
149
|
-
export const DsGlobalSizeSpace16 = 16;
|
|
150
|
-
export const DsGlobalSizeSpace20 = 20;
|
|
151
|
-
export const DsGlobalSizeSpace24 = 24;
|
|
152
|
-
export const DsGlobalSizeSpace32 = 32;
|
|
153
|
-
export const DsGlobalSizeSpace40 = 40;
|
|
154
|
-
export const DsGlobalSizeSpace48 = 48;
|
|
155
|
-
export const DsGlobalSizeSpace56 = 56;
|
|
156
|
-
export const DsGlobalSizeSpace64 = 64;
|
|
157
|
-
export const DsGlobalSizeSpace72 = 72;
|
|
158
|
-
export const DsGlobalSizeSpace96 = 96;
|
|
159
|
-
export const DsGlobalSizeSpace128 = 128;
|
|
160
|
-
export const DsGlobalSizeSpaceAuto = "auto";
|
|
161
5
|
export const DsAliasBackgroundColorWhite = "#ffffff";
|
|
162
6
|
export const DsAliasBackgroundColorSelected = "#b3b6d4";
|
|
163
7
|
export const DsAliasBackgroundColorHover = "#fafafa";
|
|
@@ -448,19 +292,19 @@ export const DsComponentHeading5Space = 8;
|
|
|
448
292
|
export const DsComponentHeading5SizeMobile = 16;
|
|
449
293
|
export const DsComponentHeading5SizeTablet = 16;
|
|
450
294
|
export const DsComponentHeading5SizeDesktop = 16;
|
|
451
|
-
export const
|
|
295
|
+
export const DsComponentHeadingFontFamily =
|
|
452
296
|
'"BaloiseCreateHeadline", "Arial", "sans-serif"';
|
|
453
|
-
export const
|
|
297
|
+
export const DsComponentHeadingFontWeight = "700";
|
|
454
298
|
export const DsComponentHeadingLineHeight = 1.3;
|
|
455
299
|
export const DsComponentHeadingShadow =
|
|
456
300
|
"0px 0px 4px rgba(0, 0, 0, 0.15), 0px 4px 12px rgba(0, 0, 0, 0.25), 0px 0px 80px rgba(0, 0, 0, 0.5)";
|
|
457
301
|
export const DsComponentHeadingColorBase = "inherit";
|
|
458
|
-
export const
|
|
459
|
-
export const
|
|
460
|
-
export const
|
|
461
|
-
export const
|
|
462
|
-
export const
|
|
463
|
-
export const
|
|
302
|
+
export const DsComponentHeadingPrimaryColorBase = "#000d6e";
|
|
303
|
+
export const DsComponentHeadingWhiteColorBase = "#ffffff";
|
|
304
|
+
export const DsComponentHeadingInfoColorBase = "#1c77d2";
|
|
305
|
+
export const DsComponentHeadingSuccessColorBase = "#168741";
|
|
306
|
+
export const DsComponentHeadingWarningColorBase = "#b24a00";
|
|
307
|
+
export const DsComponentHeadingDangerColorBase = "#ea1800";
|
|
464
308
|
export const DsComponentHeadingDisplay1Space = 16;
|
|
465
309
|
export const DsComponentHeadingDisplay1SizeMobile = 48;
|
|
466
310
|
export const DsComponentHeadingDisplay1SizeTablet = 80;
|
|
@@ -469,39 +313,39 @@ export const DsComponentHeadingDisplay2Space = 16;
|
|
|
469
313
|
export const DsComponentHeadingDisplay2SizeMobile = 32;
|
|
470
314
|
export const DsComponentHeadingDisplay2SizeTablet = 48;
|
|
471
315
|
export const DsComponentHeadingDisplay2SizeDesktop = 48;
|
|
472
|
-
export const
|
|
316
|
+
export const DsComponentHeadingSubtitleFontFamily =
|
|
473
317
|
'"BaloiseCreateHeadline", "Arial", "sans-serif"';
|
|
474
318
|
export const DsComponentHeadingSubtitleLineHeight = 1.3;
|
|
475
|
-
export const
|
|
476
|
-
export const DsComponentBadgeTextFamily =
|
|
477
|
-
'"BaloiseCreateHeadline", "Arial", "sans-serif"';
|
|
478
|
-
export const DsComponentBadgeTextWeight = "700";
|
|
479
|
-
export const DsComponentBadgeTextSizeSm = 0;
|
|
480
|
-
export const DsComponentBadgeTextSizeBase = 12;
|
|
481
|
-
export const DsComponentBadgeTextSizeLg = 16;
|
|
319
|
+
export const DsComponentHeadingSubtitleFontWeight = "300";
|
|
482
320
|
export const DsComponentBadgeSizeSm = 12;
|
|
483
321
|
export const DsComponentBadgeSizeBase = 24;
|
|
484
322
|
export const DsComponentBadgeSizeLg = 32;
|
|
485
|
-
export const
|
|
486
|
-
|
|
487
|
-
export const
|
|
488
|
-
export const
|
|
489
|
-
export const
|
|
490
|
-
export const
|
|
491
|
-
export const
|
|
492
|
-
export const
|
|
493
|
-
export const
|
|
494
|
-
export const
|
|
495
|
-
export const
|
|
496
|
-
export const
|
|
497
|
-
export const
|
|
498
|
-
export const
|
|
499
|
-
export const
|
|
500
|
-
export const
|
|
501
|
-
export const
|
|
502
|
-
export const
|
|
503
|
-
export const
|
|
504
|
-
export const
|
|
323
|
+
export const DsComponentBadgeFontFamily =
|
|
324
|
+
'"BaloiseCreateHeadline", "Arial", "sans-serif"';
|
|
325
|
+
export const DsComponentBadgeFontWeight = "700";
|
|
326
|
+
export const DsComponentBadgeFontSizeSm = 0;
|
|
327
|
+
export const DsComponentBadgeFontSizeBase = 12;
|
|
328
|
+
export const DsComponentBadgeFontSizeLg = 16;
|
|
329
|
+
export const DsComponentBadgeBaseColorText = "#000d6e";
|
|
330
|
+
export const DsComponentBadgeBaseColorBackground = "#ffaca6";
|
|
331
|
+
export const DsComponentBadgeInfoColorText = "#000d6e";
|
|
332
|
+
export const DsComponentBadgeInfoColorBackground = "#b8b2ff";
|
|
333
|
+
export const DsComponentBadgeSuccessColorText = "#000d6e";
|
|
334
|
+
export const DsComponentBadgeSuccessColorBackground = "#94e3d4";
|
|
335
|
+
export const DsComponentBadgeWarningColorText = "#000d6e";
|
|
336
|
+
export const DsComponentBadgeWarningColorBackground = "#ffecbc";
|
|
337
|
+
export const DsComponentBadgeDangerColorText = "#000d6e";
|
|
338
|
+
export const DsComponentBadgeDangerColorBackground = "#ffaca6";
|
|
339
|
+
export const DsComponentBadgeRedColorText = "#000d6e";
|
|
340
|
+
export const DsComponentBadgeRedColorBackground = "#ffaca6";
|
|
341
|
+
export const DsComponentBadgePurpleColorText = "#000d6e";
|
|
342
|
+
export const DsComponentBadgePurpleColorBackground = "#b8b2ff";
|
|
343
|
+
export const DsComponentBadgeGreenColorText = "#000d6e";
|
|
344
|
+
export const DsComponentBadgeGreenColorBackground = "#94e3d4";
|
|
345
|
+
export const DsComponentBadgeYellowColorText = "#000d6e";
|
|
346
|
+
export const DsComponentBadgeYellowColorBackground = "#fae052";
|
|
347
|
+
export const DsComponentBadgeGreyColorText = "#747474";
|
|
348
|
+
export const DsComponentBadgeGreyColorBackground = "#f0f0f0";
|
|
505
349
|
export const DsComponentButtonFamily =
|
|
506
350
|
'"BaloiseCreateHeadline", "Arial", "sans-serif"';
|
|
507
351
|
export const DsComponentButtonWeight = "700";
|
|
@@ -808,13 +652,13 @@ export const DsComponentCardOutlineWidth = 2;
|
|
|
808
652
|
export const DsComponentCloseRadius = 9999;
|
|
809
653
|
export const DsComponentCloseColorBackgroundBase = "#ffffff00";
|
|
810
654
|
export const DsComponentCloseColorBackgroundHover = "#0007391a";
|
|
811
|
-
export const DsComponentCloseColorBackgroundActive = "#
|
|
812
|
-
export const DsComponentCloseColorBackgroundInvertedHover = "#ffffff4d";
|
|
813
|
-
export const DsComponentCloseColorBackgroundInvertedActive = "#ffffff80";
|
|
655
|
+
export const DsComponentCloseColorBackgroundActive = "#00073933";
|
|
814
656
|
export const DsComponentCloseColorBackgroundDisabled = "#e0e0e0";
|
|
815
|
-
export const
|
|
816
|
-
export const
|
|
817
|
-
export const
|
|
657
|
+
export const DsComponentCloseIconColorBase = "#000d6e";
|
|
658
|
+
export const DsComponentCloseIconColorDisabled = "#747474";
|
|
659
|
+
export const DsComponentCloseInvertedColorBackgroundHover = "#ffffff4d";
|
|
660
|
+
export const DsComponentCloseInvertedColorBackgroundActive = "#ffffff80";
|
|
661
|
+
export const DsComponentCloseInvertedIconColorBase = "#ffffff";
|
|
818
662
|
export const DsComponentDateCalendarFamily =
|
|
819
663
|
'"BaloiseCreateText", "Arial", "sans-serif"';
|
|
820
664
|
export const DsComponentDateCalendarWeight = "700";
|
|
@@ -1262,11 +1106,11 @@ export const DsComponentNavbarLightButtonColorBorderActive = "#e5f1fe";
|
|
|
1262
1106
|
export const DsComponentNavbarLightFocusColorStart = "#ffffff";
|
|
1263
1107
|
export const DsComponentNavbarLightFocusColorEnd = "#6c2273";
|
|
1264
1108
|
export const DsComponentSnackbarRadius = 4;
|
|
1265
|
-
export const
|
|
1266
|
-
export const
|
|
1267
|
-
export const
|
|
1268
|
-
export const
|
|
1269
|
-
export const
|
|
1109
|
+
export const DsComponentSnackbarPrimaryColorBgBase = "#f0f0f0";
|
|
1110
|
+
export const DsComponentSnackbarPrimaryColorBorderBase = "#f0f0f0";
|
|
1111
|
+
export const DsComponentSnackbarPrimaryColorTextBase = "#000d6e";
|
|
1112
|
+
export const DsComponentSnackbarPrimaryColorProgressBarBase = "#000d6e";
|
|
1113
|
+
export const DsComponentSnackbarPrimaryColorProgressBgBase = "#b3b6d4";
|
|
1270
1114
|
export const DsComponentSnackbarSuccessColorBgBase = "#a1cfb3";
|
|
1271
1115
|
export const DsComponentSnackbarSuccessColorBorderBase = "#a1cfb3";
|
|
1272
1116
|
export const DsComponentSnackbarSuccessColorTextBase = "#000d6e";
|
|
@@ -1292,14 +1136,14 @@ export const DsComponentSpinnerCircleBorderWidth = 4;
|
|
|
1292
1136
|
export const DsComponentSpinnerCircleSize = 24;
|
|
1293
1137
|
export const DsComponentSpinnerCircleColorBackground = "#e0e0e0";
|
|
1294
1138
|
export const DsComponentSpinnerCircleColorProgress = "#000d6e";
|
|
1295
|
-
export const
|
|
1296
|
-
export const
|
|
1139
|
+
export const DsComponentSpinnerInvertedCircleColorBackground = "#ffffff";
|
|
1140
|
+
export const DsComponentSpinnerInvertedCircleColorProgress = "#000d6e";
|
|
1297
1141
|
export const DsComponentToastRadius = 4;
|
|
1298
|
-
export const
|
|
1299
|
-
export const
|
|
1300
|
-
export const
|
|
1301
|
-
export const
|
|
1302
|
-
export const
|
|
1142
|
+
export const DsComponentToastPrimaryColorBgBase = "#f0f0f0";
|
|
1143
|
+
export const DsComponentToastPrimaryColorBorderBase = "#f0f0f0";
|
|
1144
|
+
export const DsComponentToastPrimaryColorTextBase = "#000d6e";
|
|
1145
|
+
export const DsComponentToastPrimaryColorProgressBarBase = "#000d6e";
|
|
1146
|
+
export const DsComponentToastPrimaryColorProgressBgBase = "#b3b6d4";
|
|
1303
1147
|
export const DsComponentToastSuccessColorBgBase = "#a1cfb3";
|
|
1304
1148
|
export const DsComponentToastSuccessColorBorderBase = "#a1cfb3";
|
|
1305
1149
|
export const DsComponentToastSuccessColorTextBase = "#000d6e";
|
|
@@ -1378,8 +1222,8 @@ export const DsComponentTagYellowLightColorTextBase = "#000d6e";
|
|
|
1378
1222
|
export const DsComponentTagYellowLightColorBgBase = "#ffecbc";
|
|
1379
1223
|
export const DsComponentTagYellowDarkColorTextBase = "#ffffff";
|
|
1380
1224
|
export const DsComponentTagYellowDarkColorBgBase = "#b24a00";
|
|
1381
|
-
export const
|
|
1382
|
-
export const
|
|
1225
|
+
export const DsComponentTagBaseColorTextBase = "#000d6e";
|
|
1226
|
+
export const DsComponentTagBaseColorBgBase = "#e0e0e0";
|
|
1383
1227
|
export const DsComponentSegmentRadius = 4;
|
|
1384
1228
|
export const DsComponentSegmentBackground = "#f0f0f0";
|
|
1385
1229
|
export const DsComponentSegmentGap = 4;
|
|
@@ -1639,3 +1483,159 @@ export const DsComponentFileUploadDescriptionTextColorBase = "#656ea8";
|
|
|
1639
1483
|
export const DsComponentFileUploadDescriptionTextColorDanger = "#ea1800";
|
|
1640
1484
|
export const DsComponentFileUploadDescriptionTextColorSuccess = "#168741";
|
|
1641
1485
|
export const DsComponentFileUploadDescriptionTextColorWarning = "#b24a00";
|
|
1486
|
+
export const DsGlobalSizeBorder0 = 0;
|
|
1487
|
+
export const DsGlobalSizeBorder1 = 1;
|
|
1488
|
+
export const DsGlobalSizeBorder2 = 2;
|
|
1489
|
+
export const DsGlobalSizeBorder3 = 4;
|
|
1490
|
+
export const DsGlobalSizeRadius0 = 0;
|
|
1491
|
+
export const DsGlobalSizeRadius1 = 4;
|
|
1492
|
+
export const DsGlobalSizeRadius2 = 12;
|
|
1493
|
+
export const DsGlobalSizeRadius3 = 9999;
|
|
1494
|
+
export const DsGlobalSizeBreakpoint1 = 769;
|
|
1495
|
+
export const DsGlobalSizeBreakpoint2 = 1024;
|
|
1496
|
+
export const DsGlobalSizeBreakpoint3 = 1280;
|
|
1497
|
+
export const DsGlobalSizeBreakpoint4 = 1440;
|
|
1498
|
+
export const DsGlobalSizeBreakpoint5 = 1920;
|
|
1499
|
+
export const DsGlobalSizeContainer1 = 320;
|
|
1500
|
+
export const DsGlobalSizeContainer2 = 480;
|
|
1501
|
+
export const DsGlobalSizeContainer3 = 640;
|
|
1502
|
+
export const DsGlobalSizeContainer4 = 896;
|
|
1503
|
+
export const DsGlobalSizeContainer5 = 1496;
|
|
1504
|
+
export const DsGlobalSizeContainerFull = "100%";
|
|
1505
|
+
export const DsGlobalSizeSpace0 = 0;
|
|
1506
|
+
export const DsGlobalSizeSpace1 = 1;
|
|
1507
|
+
export const DsGlobalSizeSpace2 = 2;
|
|
1508
|
+
export const DsGlobalSizeSpace4 = 4;
|
|
1509
|
+
export const DsGlobalSizeSpace8 = 8;
|
|
1510
|
+
export const DsGlobalSizeSpace12 = 12;
|
|
1511
|
+
export const DsGlobalSizeSpace14 = 14;
|
|
1512
|
+
export const DsGlobalSizeSpace16 = 16;
|
|
1513
|
+
export const DsGlobalSizeSpace20 = 20;
|
|
1514
|
+
export const DsGlobalSizeSpace24 = 24;
|
|
1515
|
+
export const DsGlobalSizeSpace32 = 32;
|
|
1516
|
+
export const DsGlobalSizeSpace40 = 40;
|
|
1517
|
+
export const DsGlobalSizeSpace48 = 48;
|
|
1518
|
+
export const DsGlobalSizeSpace56 = 56;
|
|
1519
|
+
export const DsGlobalSizeSpace64 = 64;
|
|
1520
|
+
export const DsGlobalSizeSpace72 = 72;
|
|
1521
|
+
export const DsGlobalSizeSpace96 = 96;
|
|
1522
|
+
export const DsGlobalSizeSpace128 = 128;
|
|
1523
|
+
export const DsGlobalSizeSpaceAuto = "auto";
|
|
1524
|
+
export const DsGlobalColorWhite = "#ffffff";
|
|
1525
|
+
export const DsGlobalColorBlack = "#000000";
|
|
1526
|
+
export const DsGlobalColorNeutral = "#ffffff00";
|
|
1527
|
+
export const DsGlobalColorDanger1 = "#fce8e6";
|
|
1528
|
+
export const DsGlobalColorDanger2 = "#f7a299";
|
|
1529
|
+
export const DsGlobalColorDanger3 = "#f05d4d";
|
|
1530
|
+
export const DsGlobalColorDanger4 = "#ea1800";
|
|
1531
|
+
export const DsGlobalColorDanger5 = "#cb1501";
|
|
1532
|
+
export const DsGlobalColorDanger6 = "#a01100";
|
|
1533
|
+
export const DsGlobalColorWarning1 = "#fff9e8";
|
|
1534
|
+
export const DsGlobalColorWarning2 = "#ffe5a3";
|
|
1535
|
+
export const DsGlobalColorWarning3 = "#ffd25e";
|
|
1536
|
+
export const DsGlobalColorWarning4 = "#ffbe19";
|
|
1537
|
+
export const DsGlobalColorWarning5 = "#f99319";
|
|
1538
|
+
export const DsGlobalColorWarning6 = "#c97612";
|
|
1539
|
+
export const DsGlobalColorSuccess1 = "#e8f3ec";
|
|
1540
|
+
export const DsGlobalColorSuccess2 = "#a1cfb3";
|
|
1541
|
+
export const DsGlobalColorSuccess3 = "#5bab7a";
|
|
1542
|
+
export const DsGlobalColorSuccess4 = "#168741";
|
|
1543
|
+
export const DsGlobalColorSuccess5 = "#116b34";
|
|
1544
|
+
export const DsGlobalColorSuccess6 = "#0b5227";
|
|
1545
|
+
export const DsGlobalColorInfo1 = "#e8f1fb";
|
|
1546
|
+
export const DsGlobalColorInfo2 = "#a4c9ed";
|
|
1547
|
+
export const DsGlobalColorInfo3 = "#60a0e0";
|
|
1548
|
+
export const DsGlobalColorInfo4 = "#1c77d2";
|
|
1549
|
+
export const DsGlobalColorInfo5 = "#155ba3";
|
|
1550
|
+
export const DsGlobalColorInfo6 = "#0e457b";
|
|
1551
|
+
export const DsGlobalColorSky1 = "#e5f1fe";
|
|
1552
|
+
export const DsGlobalColorSky2 = "#a7d1fa";
|
|
1553
|
+
export const DsGlobalColorSky3 = "#56a7f5";
|
|
1554
|
+
export const DsGlobalColorSky4 = "#6672cc";
|
|
1555
|
+
export const DsGlobalColorSky5 = "#0014aa";
|
|
1556
|
+
export const DsGlobalColorSky6 = "#000a55";
|
|
1557
|
+
export const DsGlobalColorGrey0 = "#fafafa";
|
|
1558
|
+
export const DsGlobalColorGrey1 = "#f0f0f0";
|
|
1559
|
+
export const DsGlobalColorGrey2 = "#e0e0e0";
|
|
1560
|
+
export const DsGlobalColorGrey3 = "#d0d0d0";
|
|
1561
|
+
export const DsGlobalColorGrey4 = "#b6b6b6";
|
|
1562
|
+
export const DsGlobalColorGrey5 = "#747474";
|
|
1563
|
+
export const DsGlobalColorGrey6 = "#313131";
|
|
1564
|
+
export const DsGlobalColorYellow1 = "#fff9e8";
|
|
1565
|
+
export const DsGlobalColorYellow2 = "#ffecbc";
|
|
1566
|
+
export const DsGlobalColorYellow3 = "#fae052";
|
|
1567
|
+
export const DsGlobalColorYellow4 = "#ffbe19";
|
|
1568
|
+
export const DsGlobalColorYellow5 = "#fa9319";
|
|
1569
|
+
export const DsGlobalColorYellow6 = "#b24a00";
|
|
1570
|
+
export const DsGlobalColorRed1 = "#ffeef1";
|
|
1571
|
+
export const DsGlobalColorRed2 = "#ffd7d7";
|
|
1572
|
+
export const DsGlobalColorRed3 = "#ffaca6";
|
|
1573
|
+
export const DsGlobalColorRed4 = "#ff596f";
|
|
1574
|
+
export const DsGlobalColorRed5 = "#d9304c";
|
|
1575
|
+
export const DsGlobalColorRed6 = "#99172d";
|
|
1576
|
+
export const DsGlobalColorGreen1 = "#e9fbf7";
|
|
1577
|
+
export const DsGlobalColorGreen2 = "#cbf2ec";
|
|
1578
|
+
export const DsGlobalColorGreen3 = "#94e3d4";
|
|
1579
|
+
export const DsGlobalColorGreen4 = "#21d9ac";
|
|
1580
|
+
export const DsGlobalColorGreen5 = "#00b28f";
|
|
1581
|
+
export const DsGlobalColorGreen6 = "#1b5951";
|
|
1582
|
+
export const DsGlobalColorPurple1 = "#f9f3ff";
|
|
1583
|
+
export const DsGlobalColorPurple2 = "#e1d9ff";
|
|
1584
|
+
export const DsGlobalColorPurple3 = "#b8b2ff";
|
|
1585
|
+
export const DsGlobalColorPurple4 = "#be82fa";
|
|
1586
|
+
export const DsGlobalColorPurple5 = "#9f52cc";
|
|
1587
|
+
export const DsGlobalColorPurple6 = "#6c2273";
|
|
1588
|
+
export const DsGlobalColorPrimary1 = "#e5e7f0";
|
|
1589
|
+
export const DsGlobalColorPrimary2 = "#b3b6d4";
|
|
1590
|
+
export const DsGlobalColorPrimary3 = "#656ea8";
|
|
1591
|
+
export const DsGlobalColorPrimary4 = "#293485";
|
|
1592
|
+
export const DsGlobalColorPrimary5 = "#000d6e";
|
|
1593
|
+
export const DsGlobalColorPrimary6 = "#000739";
|
|
1594
|
+
export const DsGlobalFontShadow0 = "none";
|
|
1595
|
+
export const DsGlobalFontShadow1 =
|
|
1596
|
+
"0px 0px 4px rgba(0, 0, 0, 0.15), 0px 4px 12px rgba(0, 0, 0, 0.25), 0px 0px 80px rgba(0, 0, 0, 0.5)";
|
|
1597
|
+
export const DsGlobalFontSize0 = 0;
|
|
1598
|
+
export const DsGlobalFontSize12 = 12;
|
|
1599
|
+
export const DsGlobalFontSize14 = 14;
|
|
1600
|
+
export const DsGlobalFontSize16 = 16;
|
|
1601
|
+
export const DsGlobalFontSize18 = 18;
|
|
1602
|
+
export const DsGlobalFontSize20 = 20;
|
|
1603
|
+
export const DsGlobalFontSize24 = 24;
|
|
1604
|
+
export const DsGlobalFontSize28 = 28;
|
|
1605
|
+
export const DsGlobalFontSize32 = 32;
|
|
1606
|
+
export const DsGlobalFontSize40 = 40;
|
|
1607
|
+
export const DsGlobalFontSize48 = 48;
|
|
1608
|
+
export const DsGlobalFontSize80 = 80;
|
|
1609
|
+
export const DsGlobalFontSize176 = 176;
|
|
1610
|
+
export const DsGlobalFontFamilyHeading =
|
|
1611
|
+
'"BaloiseCreateHeadline", "Arial", "sans-serif"';
|
|
1612
|
+
export const DsGlobalFontFamilyBody =
|
|
1613
|
+
'"BaloiseCreateText", "Arial", "sans-serif"';
|
|
1614
|
+
export const DsGlobalFontWeight300 = "300";
|
|
1615
|
+
export const DsGlobalFontWeight400 = "400";
|
|
1616
|
+
export const DsGlobalFontWeight700 = "700";
|
|
1617
|
+
export const DsGlobalFontLineHeight1 = 1;
|
|
1618
|
+
export const DsGlobalFontLineHeight2 = 1.3;
|
|
1619
|
+
export const DsGlobalFontLineHeight3 = 1.5;
|
|
1620
|
+
export const DsGlobalFontLineHeight4 = 2;
|
|
1621
|
+
export const DsGlobalElevationShadow0 = "none";
|
|
1622
|
+
export const DsGlobalElevationShadow1 = "0 2px 5px 1px rgba(0, 7, 57, 0.12)";
|
|
1623
|
+
export const DsGlobalElevationShadow2 = "0 4px 4px 0 rgba(0, 7, 57, 0.15)";
|
|
1624
|
+
export const DsGlobalElevationShadow3 = "0 0 10px 0 rgba(0, 7, 57, 0.15)";
|
|
1625
|
+
export const DsGlobalElevationShadow4 = "0 0 30px 0 rgba(0, 7, 57, 0.15)";
|
|
1626
|
+
export const DsGlobalElevationZIndex100 = 100;
|
|
1627
|
+
export const DsGlobalElevationZIndex200 = 200;
|
|
1628
|
+
export const DsGlobalElevationZIndex300 = 300;
|
|
1629
|
+
export const DsGlobalElevationZIndex400 = 400;
|
|
1630
|
+
export const DsGlobalElevationZIndex1000 = 1000;
|
|
1631
|
+
export const DsGlobalElevationZIndex1100 = 1100;
|
|
1632
|
+
export const DsGlobalElevationZIndex1200 = 1200;
|
|
1633
|
+
export const DsGlobalElevationZIndex1300 = 1300;
|
|
1634
|
+
export const DsGlobalElevationZIndexBehindAll = -999999;
|
|
1635
|
+
export const DsGlobalElevationOpacity0 = 0;
|
|
1636
|
+
export const DsGlobalElevationOpacity30 = 0.3;
|
|
1637
|
+
export const DsGlobalElevationOpacity40 = 0.4;
|
|
1638
|
+
export const DsGlobalElevationOpacity50 = 0.5;
|
|
1639
|
+
export const DsGlobalElevationOpacity60 = 0.6;
|
|
1640
|
+
export const DsGlobalElevationOpacity80 = 0.8;
|
|
1641
|
+
export const DsGlobalElevationOpacity100 = 1;
|
|
@@ -5,7 +5,7 @@ const basePxFontSize = 16;
|
|
|
5
5
|
* `$value` differs from the base. Keeps the full hierarchy so Style
|
|
6
6
|
* Dictionary can still resolve references.
|
|
7
7
|
*/
|
|
8
|
-
function computeTokenDiff(base, brand) {
|
|
8
|
+
export function computeTokenDiff(base, brand) {
|
|
9
9
|
const result = {};
|
|
10
10
|
for (const [key, brandVal] of Object.entries(brand)) {
|
|
11
11
|
if (typeof brandVal !== 'object' || brandVal === null)
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { kebabCase } from 'change-case';
|
|
2
|
+
/**
|
|
3
|
+
* Turns a token's path into its final CSS custom property name, matching Style Dictionary's
|
|
4
|
+
* `css` transformGroup (`name/kebab`, which itself uses `change-case`'s `kebabCase`) followed by
|
|
5
|
+
* the `ds/css/name` transform (`transformers.ts`). Returns the bare name (no leading `--`), the
|
|
6
|
+
* same shape Style Dictionary expects from a `name`-type transform - the SD transform is a thin
|
|
7
|
+
* wrapper around this function, and `apps/toky`'s live preview imports it directly so both stay
|
|
8
|
+
* in sync (see ADR-0021).
|
|
9
|
+
*/
|
|
10
|
+
export const tokenNameToCssVar = (pathSegments, prefix = 'ds') => {
|
|
11
|
+
let tokenName = kebabCase([prefix, ...pathSegments].join(' '));
|
|
12
|
+
const isComponent = pathSegments.includes('🧩 Component');
|
|
13
|
+
if (isComponent) {
|
|
14
|
+
tokenName = tokenName.replace('-component', '');
|
|
15
|
+
}
|
|
16
|
+
// we use t-shirt sizes and need to make sure that 2xl becomes 2xl and not 2-xl
|
|
17
|
+
// check if token names has number followed by xl or xs and replace it with numberxl without dash
|
|
18
|
+
if (/-?([0-9]+)-(xl|xs)/.test(tokenName)) {
|
|
19
|
+
tokenName = tokenName.replace(/-?([0-9]+)-(xl|xs)/, '-$1$2');
|
|
20
|
+
}
|
|
21
|
+
// check that no name has double dash and replace it with single dash
|
|
22
|
+
if (tokenName.includes('--')) {
|
|
23
|
+
tokenName = tokenName.replace(/--+/g, '-');
|
|
24
|
+
}
|
|
25
|
+
return tokenName;
|
|
26
|
+
};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Public subpath (`@baloise/ds-tokens/css-preview`) for consumers outside the build pipeline —
|
|
3
|
+
* currently `apps/toky`'s live token preview — that need to turn a token path/resolved value into
|
|
4
|
+
* the same CSS the build actually produces, without duplicating the Style Dictionary transforms.
|
|
5
|
+
* See ADR-0021.
|
|
6
|
+
*/
|
|
7
|
+
export { tokenNameToCssVar } from './css-naming.js';
|
|
8
|
+
export { resolvedValueToCss } from './css-value.js';
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
import { tokenNameToCssVar } from './css-naming.js';
|
|
2
|
+
/**
|
|
3
|
+
* Mirrors the `ds/color/rgba` transform: DTCG color values already carry a `hex` field in this
|
|
4
|
+
* token set (see `tokens/Base.tokens.json`), so this only needs to add an `rgba()` wrapper when
|
|
5
|
+
* `alpha < 1`.
|
|
6
|
+
*/
|
|
7
|
+
export const colorValueToCss = (value) => {
|
|
8
|
+
if (typeof value !== 'object' || value === null || !('hex' in value)) {
|
|
9
|
+
return null;
|
|
10
|
+
}
|
|
11
|
+
const { hex, alpha } = value;
|
|
12
|
+
if (typeof hex !== 'string') {
|
|
13
|
+
return null;
|
|
14
|
+
}
|
|
15
|
+
if (typeof alpha === 'number' && alpha < 1) {
|
|
16
|
+
const stripped = hex.replace('#', '');
|
|
17
|
+
const r = parseInt(stripped.substring(0, 2), 16);
|
|
18
|
+
const g = parseInt(stripped.substring(2, 4), 16);
|
|
19
|
+
const b = parseInt(stripped.substring(4, 6), 16);
|
|
20
|
+
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
|
|
21
|
+
}
|
|
22
|
+
return hex;
|
|
23
|
+
};
|
|
24
|
+
const ROUND_TOKEN_NAME_MARKERS = ['line-height', 'lineheight', 'opacity'];
|
|
25
|
+
/**
|
|
26
|
+
* Mirrors `ds/size/round`. Case-insensitive because callers pass different name casings
|
|
27
|
+
* depending on the platform's name transform - kebab-case for CSS/SCSS (`ds/css/name`), PascalCase
|
|
28
|
+
* for JS (`ds/js/name`).
|
|
29
|
+
*/
|
|
30
|
+
export const roundNumberValue = (value, tokenName) => {
|
|
31
|
+
const lowerName = tokenName.toLowerCase();
|
|
32
|
+
if (ROUND_TOKEN_NAME_MARKERS.some(marker => lowerName.includes(marker))) {
|
|
33
|
+
return Math.round(value * 10) / 10;
|
|
34
|
+
}
|
|
35
|
+
return value;
|
|
36
|
+
};
|
|
37
|
+
const NUMBER_ONLY_PATH_MARKERS = [
|
|
38
|
+
'LineHeight',
|
|
39
|
+
'FontWeight',
|
|
40
|
+
'Opacity',
|
|
41
|
+
'🌫️ Opacity',
|
|
42
|
+
'ZIndex',
|
|
43
|
+
'Z-Index',
|
|
44
|
+
'🗂️ ZIndex',
|
|
45
|
+
'🗂️ Z-Index',
|
|
46
|
+
'Interaction',
|
|
47
|
+
'✨ Interaction',
|
|
48
|
+
];
|
|
49
|
+
const PIXEL_PATH_MARKERS = ['📐 Breakpoint', 'Breakpoint', '🗃️ Container', 'Container'];
|
|
50
|
+
/** Mirrors `ds/size/rem`: converts a px number into rem, unless the token's path says otherwise. */
|
|
51
|
+
export const numberValueToCssSize = (value, path) => {
|
|
52
|
+
if (`${value}`.endsWith('px') || `${value}`.endsWith('rem')) {
|
|
53
|
+
return value;
|
|
54
|
+
}
|
|
55
|
+
if (NUMBER_ONLY_PATH_MARKERS.some(marker => path.includes(marker))) {
|
|
56
|
+
return Math.round(value * 10) / 10;
|
|
57
|
+
}
|
|
58
|
+
if (PIXEL_PATH_MARKERS.some(marker => path.includes(marker))) {
|
|
59
|
+
return `${value}px`;
|
|
60
|
+
}
|
|
61
|
+
if (value === 9999) {
|
|
62
|
+
return `${value}px`;
|
|
63
|
+
}
|
|
64
|
+
return `${value / 16}rem`;
|
|
65
|
+
};
|
|
66
|
+
/**
|
|
67
|
+
* Turns a resolved DTCG token value into a CSS-ready string, for the live token preview
|
|
68
|
+
* (`apps/toky`) to send as a `--ds-*` custom property value. Mirrors the `ds/color/rgba` /
|
|
69
|
+
* `ds/size/round` / `ds/size/rem` Style Dictionary transforms via the functions above, so the
|
|
70
|
+
* preview never drifts from what the build actually produces (see ADR-0021). Returns `null` for
|
|
71
|
+
* value shapes it doesn't recognize, so the caller can skip that token rather than send garbage.
|
|
72
|
+
*/
|
|
73
|
+
export const resolvedValueToCss = (value, type, path) => {
|
|
74
|
+
if (type === 'color') {
|
|
75
|
+
return colorValueToCss(value);
|
|
76
|
+
}
|
|
77
|
+
if (type === 'number' && typeof value === 'number') {
|
|
78
|
+
const cssVarName = tokenNameToCssVar(path);
|
|
79
|
+
const rounded = roundNumberValue(value, cssVarName);
|
|
80
|
+
return `${numberValueToCssSize(rounded, path)}`;
|
|
81
|
+
}
|
|
82
|
+
if (type === 'string' && typeof value === 'string') {
|
|
83
|
+
return value;
|
|
84
|
+
}
|
|
85
|
+
return null;
|
|
86
|
+
};
|
|
@@ -100,7 +100,7 @@ export const registerCustomFormatters = (sd) => {
|
|
|
100
100
|
// `\n}\n` +
|
|
101
101
|
// '\n'
|
|
102
102
|
return (header +
|
|
103
|
-
':root {\n' +
|
|
103
|
+
':root, :host {\n' +
|
|
104
104
|
formattedVariables({
|
|
105
105
|
format: propertyFormatNames.css,
|
|
106
106
|
dictionary,
|
|
@@ -126,7 +126,7 @@ export const registerCustomFormatters = (sd) => {
|
|
|
126
126
|
'\n}\n\n' +
|
|
127
127
|
'/* Device tokens: Tablet */\n' +
|
|
128
128
|
`\n@media (min-width: 769px) {\n` +
|
|
129
|
-
':root {\n' +
|
|
129
|
+
':root, :host {\n' +
|
|
130
130
|
formattedVariables({
|
|
131
131
|
format: propertyFormatNames.css,
|
|
132
132
|
dictionary: deviceTabletDictionary,
|
|
@@ -137,7 +137,7 @@ export const registerCustomFormatters = (sd) => {
|
|
|
137
137
|
`\n}\n\n` +
|
|
138
138
|
'/* Device tokens: Desktop */\n' +
|
|
139
139
|
`\n@media (min-width: 1024px) {\n` +
|
|
140
|
-
':root {\n' +
|
|
140
|
+
':root, :host {\n' +
|
|
141
141
|
formattedVariables({
|
|
142
142
|
format: propertyFormatNames.css,
|
|
143
143
|
dictionary: deviceDesktopDictionary,
|