@swisspost/design-system-tokens 10.0.0-next.51 → 10.0.0-next.53
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/CHANGELOG.md +4 -0
- package/_channel.scss +1 -1
- package/_components.scss +55 -19
- package/_core.scss +2 -1
- package/_device.scss +40 -1
- package/_elements.scss +1 -1
- package/_helpers.scss +1 -1
- package/_index.scss +1 -1
- package/_palette.scss +1 -1
- package/_scheme.scss +1 -1
- package/_schemestatic.scss +1 -1
- package/_theme.scss +1 -1
- package/_utilities-formatted.scss +1 -1
- package/_utilities.scss +1 -1
- package/package.json +1 -1
- package/tailwind/helpers.tailwind.css +1 -1
- package/tailwind/helpers.tailwind.js +17 -0
- package/tailwind/utilities.tailwind.css +1 -1
- package/tailwind/utilities.tailwind.js +130 -0
- package/tokens.json +980 -149
package/CHANGELOG.md
CHANGED
package/_channel.scss
CHANGED
package/_components.scss
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit manually
|
|
3
3
|
// This file was generated by the swisspost/design-system-tokens package
|
|
4
|
-
//
|
|
4
|
+
// Wed, 05 Nov 2025 08:36:52 GMT
|
|
5
5
|
|
|
6
6
|
$post-accordion: (
|
|
7
7
|
post-accordion-header-padding-block-closed: var(--post-device-spacing-padding-19),
|
|
@@ -246,6 +246,14 @@ $post-checkbox: (
|
|
|
246
246
|
post-checkbox-border-style-default: var(--post-core-border-style-solid),
|
|
247
247
|
post-checkbox-border-style-disabled: var(--post-core-border-style-dash),
|
|
248
248
|
post-checkbox-label-padding-block: var(--post-device-spacing-padding-block-20),
|
|
249
|
+
post-checkbox-small-icon-size: var(--post-device-sizing-interactive-icon-size4),
|
|
250
|
+
post-checkbox-small-icon-padding: var(--post-device-spacing-padding-13),
|
|
251
|
+
post-checkbox-small-icon-container-padding: var(--post-device-spacing-padding-14),
|
|
252
|
+
post-checkbox-small-padding-block: var(--post-device-spacing-padding-21),
|
|
253
|
+
post-checkbox-small-label-padding-block: var(--post-device-spacing-padding-13),
|
|
254
|
+
post-checkbox-small-group-gap-block: var(--post-device-spacing-gap-9),
|
|
255
|
+
post-checkbox-small-group-items-gap-block: var(--post-device-spacing-gap-1),
|
|
256
|
+
post-checkbox-small-group-items-gap-inline: var(--post-device-spacing-gap-10),
|
|
249
257
|
);
|
|
250
258
|
|
|
251
259
|
$post-chip: (
|
|
@@ -532,6 +540,43 @@ $post-listcheck: (
|
|
|
532
540
|
post-list-check-color-text-fg: var(--post-scheme-color-interactive-primary-enabled-fg1),
|
|
533
541
|
);
|
|
534
542
|
|
|
543
|
+
$post-number-input: (
|
|
544
|
+
post-number-input-action-button-icon-size: var(--post-device-sizing-interactive-icon-size6),
|
|
545
|
+
post-number-input-action-button-padding-block: var(--post-device-spacing-padding-22),
|
|
546
|
+
post-number-input-action-button-padding-inline: var(--post-device-spacing-padding-23),
|
|
547
|
+
post-number-input-action-button-elevation: var(--post-device-elevation-100),
|
|
548
|
+
post-number-input-color-enabled-bg: var(--post-scheme-color-interactive-button-secondary-enabled-bg),
|
|
549
|
+
post-number-input-color-enabled-fg: var(--post-scheme-color-interactive-button-secondary-enabled-fg),
|
|
550
|
+
post-number-input-color-hover-bg: var(--post-scheme-color-interactive-button-secondary-hover-bg),
|
|
551
|
+
post-number-input-color-hover-fg: var(--post-scheme-color-interactive-button-secondary-hover-fg),
|
|
552
|
+
post-number-input-color-disabled-bg: var(--post-scheme-color-interactive-button-secondary-disabled-bg),
|
|
553
|
+
post-number-input-color-disabled-fg: var(--post-scheme-color-interactive-button-secondary-disabled-fg),
|
|
554
|
+
post-number-input-color-enabled-border: var(--post-scheme-color-interactive-button-secondary-enabled-stroke),
|
|
555
|
+
post-number-input-color-hover-border: var(--post-scheme-color-interactive-button-secondary-hover-stroke),
|
|
556
|
+
post-number-input-color-disabled-border: var(--post-scheme-color-interactive-button-secondary-disabled-stroke),
|
|
557
|
+
post-number-input-border-radius: var(--post-device-border-radius-1),
|
|
558
|
+
post-number-input-border-width: var(--post-device-border-width-default),
|
|
559
|
+
post-number-input-sizing-height: var(--post-device-sizing-interactive-button-height-6),
|
|
560
|
+
post-number-input-small-sizing-height: var(--post-device-sizing-interactive-button-height-5),
|
|
561
|
+
post-number-input-small-field-padding-block: var(--post-device-spacing-padding-24),
|
|
562
|
+
post-number-input-small-field-padding-inline: var(--post-device-spacing-padding-inline-1),
|
|
563
|
+
post-number-input-small-action-button-padding-inline: var(--post-device-spacing-padding-25),
|
|
564
|
+
post-number-input-small-action-button-padding-block: var(--post-device-spacing-padding-26),
|
|
565
|
+
post-number-input-small-validation-icon-padding-block: var(--post-device-spacing-padding-block-12),
|
|
566
|
+
post-number-input-validation-icon-size: var(--post-device-sizing-notification-1),
|
|
567
|
+
post-number-input-validation-icon-padding-block: var(--post-device-spacing-padding-27),
|
|
568
|
+
post-number-input-validation-icon-padding-inline-end: var(--post-device-spacing-padding-inline-1),
|
|
569
|
+
post-number-input-border-style-default: var(--post-core-border-style-solid),
|
|
570
|
+
post-number-input-border-style-disabled: var(--post-core-border-style-dash),
|
|
571
|
+
post-number-input-label-font-size: var(--post-device-font-size-10),
|
|
572
|
+
post-number-input-label-padding-block-start: var(--post-device-spacing-padding-block-3),
|
|
573
|
+
post-number-input-label-padding-inline-start: var(--post-device-spacing-padding-inline-1),
|
|
574
|
+
post-number-input-label-padding-inline-end: var(--post-device-spacing-padding-15),
|
|
575
|
+
post-number-input-field-padding-block-start: var(--post-device-spacing-padding-block-29),
|
|
576
|
+
post-number-input-field-padding-block-end: var(--post-device-spacing-padding-block-3),
|
|
577
|
+
post-number-input-field-padding-inline: var(--post-device-spacing-padding-inline-1),
|
|
578
|
+
);
|
|
579
|
+
|
|
535
580
|
$post-palettes: (
|
|
536
581
|
post-palettes-bg: var(--post-palette-color-bg),
|
|
537
582
|
post-palettes-fg: var(--post-palette-color-fg),
|
|
@@ -595,6 +640,15 @@ $post-radio-button: (
|
|
|
595
640
|
post-radio-button-padding-block-group: var(--post-device-spacing-padding-block-8),
|
|
596
641
|
post-radio-button-group-legend-font-size: var(--post-device-font-size-6),
|
|
597
642
|
post-radio-button-label-padding-block: var(--post-device-spacing-padding-block-20),
|
|
643
|
+
post-radio-button-small-icon-padding: var(--post-device-spacing-padding-13),
|
|
644
|
+
post-radio-button-small-icon-size: var(--post-device-sizing-interactive-icon-size4),
|
|
645
|
+
post-radio-button-small-icon-dot: var(--post-device-sizing-icon-8),
|
|
646
|
+
post-radio-button-small-icon-container-padding: var(--post-device-spacing-padding-14),
|
|
647
|
+
post-radio-button-small-padding-block: var(--post-device-spacing-padding-21),
|
|
648
|
+
post-radio-button-small-label-padding-block: var(--post-device-spacing-padding-13),
|
|
649
|
+
post-radio-button-small-group-gap-block: var(--post-device-spacing-gap-9),
|
|
650
|
+
post-radio-button-small-group-items-gap-block: var(--post-device-spacing-gap-1),
|
|
651
|
+
post-radio-button-small-group-items-gap-inline: var(--post-device-spacing-gap-10),
|
|
598
652
|
);
|
|
599
653
|
|
|
600
654
|
$post-search-input: (
|
|
@@ -697,24 +751,6 @@ $post-snackbar: (
|
|
|
697
751
|
post-snackbar-elevation: var(--post-device-elevation-300),
|
|
698
752
|
);
|
|
699
753
|
|
|
700
|
-
$post-spin-button: (
|
|
701
|
-
post-spin-button-large-action-button-icon-size: var(--post-core-dimension-32),
|
|
702
|
-
post-spin-button-large-action-button-padding-block: var(--post-core-dimension-14),
|
|
703
|
-
post-spin-button-large-action-button-padding-inline: var(--post-core-dimension-10),
|
|
704
|
-
post-spin-button-action-button-enabled-bg: var(--post-scheme-color-interactive-button-secondary-enabled-bg),
|
|
705
|
-
post-spin-button-action-button-enabled-fg: var(--post-scheme-color-interactive-button-secondary-enabled-fg),
|
|
706
|
-
post-spin-button-action-button-hover-bg: var(--post-scheme-color-interactive-button-secondary-hover-bg),
|
|
707
|
-
post-spin-button-action-button-hover-fg: var(--post-scheme-color-interactive-button-secondary-hover-fg),
|
|
708
|
-
post-spin-button-action-button-disabled-bg: var(--post-scheme-color-interactive-button-secondary-disabled-bg),
|
|
709
|
-
post-spin-button-action-button-disabled-fg: var(--post-scheme-color-interactive-button-secondary-disabled-fg),
|
|
710
|
-
post-spin-button-action-button-enabled-stroke: var(--post-scheme-color-interactive-button-secondary-enabled-stroke),
|
|
711
|
-
post-spin-button-action-button-hover-stroke: var(--post-scheme-color-interactive-button-secondary-hover-stroke),
|
|
712
|
-
post-spin-button-action-button-disabled-stroke: var(--post-scheme-color-interactive-button-secondary-disabled-stroke),
|
|
713
|
-
post-spin-button-action-button-border-radius: var(--post-device-border-radius-round),
|
|
714
|
-
post-spin-button-action-button-border-width: var(--post-device-border-width-default),
|
|
715
|
-
post-spin-button-action-button-elevation: var(--post-device-elevation-100),
|
|
716
|
-
);
|
|
717
|
-
|
|
718
754
|
$post-stepper: (
|
|
719
755
|
post-stepper-text-enabled-fg: var(--post-scheme-color-interactive-primary-enabled-fg1),
|
|
720
756
|
post-stepper-text-disabled-fg: var(--post-scheme-color-interactive-primary-disabled-fg1),
|
package/_core.scss
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit manually
|
|
3
3
|
// This file was generated by the swisspost/design-system-tokens package
|
|
4
|
-
//
|
|
4
|
+
// Wed, 05 Nov 2025 08:36:52 GMT
|
|
5
5
|
|
|
6
6
|
:root {
|
|
7
7
|
--post-core-color-brand-postyellow: #ffcc00;
|
|
@@ -116,6 +116,7 @@
|
|
|
116
116
|
--post-core-dimension-26-5: 26.5px;
|
|
117
117
|
--post-core-dimension-25-5: 25.5px;
|
|
118
118
|
--post-core-dimension-24-5: 24.5px;
|
|
119
|
+
--post-core-dimension-2-5: 2.5px;
|
|
119
120
|
--post-core-font-weight-400: 400;
|
|
120
121
|
--post-core-font-weight-700: 700;
|
|
121
122
|
--post-core-font-weight-900: 900;
|
package/_device.scss
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit manually
|
|
3
3
|
// This file was generated by the swisspost/design-system-tokens package
|
|
4
|
-
//
|
|
4
|
+
// Wed, 05 Nov 2025 08:36:52 GMT
|
|
5
5
|
|
|
6
6
|
$post-desktop: (
|
|
7
7
|
post-device-font-size-1: var(--post-core-font-size-40),
|
|
@@ -27,6 +27,8 @@ $post-desktop: (
|
|
|
27
27
|
post-device-spacing-gap-5: var(--post-core-dimension-24),
|
|
28
28
|
post-device-spacing-gap-6: var(--post-core-dimension-0),
|
|
29
29
|
post-device-spacing-gap-7: var(--post-core-dimension-16),
|
|
30
|
+
post-device-spacing-gap-9: var(--post-core-dimension-12),
|
|
31
|
+
post-device-spacing-gap-10: var(--post-core-dimension-24),
|
|
30
32
|
post-device-spacing-gap-block-1: var(--post-core-dimension-8),
|
|
31
33
|
post-device-spacing-gap-block-2: var(--post-core-dimension-16),
|
|
32
34
|
post-device-spacing-gap-block-3: var(--post-core-dimension-16),
|
|
@@ -54,12 +56,21 @@ $post-desktop: (
|
|
|
54
56
|
post-device-spacing-padding-10: var(--post-core-dimension-22),
|
|
55
57
|
post-device-spacing-padding-11: var(--post-core-dimension-14),
|
|
56
58
|
post-device-spacing-padding-12: var(--post-core-dimension-1),
|
|
59
|
+
post-device-spacing-padding-13: var(--post-core-dimension-0),
|
|
60
|
+
post-device-spacing-padding-14: var(--post-core-dimension-2-5),
|
|
57
61
|
post-device-spacing-padding-15: var(--post-core-dimension-8),
|
|
58
62
|
post-device-spacing-padding-16: var(--post-core-dimension-4),
|
|
59
63
|
post-device-spacing-padding-17: var(--post-core-dimension-16),
|
|
60
64
|
post-device-spacing-padding-18: var(--post-core-dimension-0),
|
|
61
65
|
post-device-spacing-padding-19: var(--post-core-dimension-16-5),
|
|
62
66
|
post-device-spacing-padding-20: var(--post-core-dimension-24),
|
|
67
|
+
post-device-spacing-padding-21: var(--post-core-dimension-1-5),
|
|
68
|
+
post-device-spacing-padding-22: var(--post-core-dimension-14),
|
|
69
|
+
post-device-spacing-padding-23: var(--post-core-dimension-11),
|
|
70
|
+
post-device-spacing-padding-24: var(--post-core-dimension-7),
|
|
71
|
+
post-device-spacing-padding-25: var(--post-core-dimension-7),
|
|
72
|
+
post-device-spacing-padding-26: var(--post-core-dimension-6),
|
|
73
|
+
post-device-spacing-padding-27: var(--post-core-dimension-18),
|
|
63
74
|
post-device-spacing-padding-inline-1: var(--post-core-dimension-14),
|
|
64
75
|
post-device-spacing-padding-inline-3: var(--post-core-dimension-16),
|
|
65
76
|
post-device-spacing-padding-inline-4: var(--post-core-dimension-12),
|
|
@@ -106,6 +117,7 @@ $post-desktop: (
|
|
|
106
117
|
post-device-sizing-interactive-icon-size3: var(--post-core-dimension-40),
|
|
107
118
|
post-device-sizing-interactive-icon-size4: var(--post-core-dimension-16),
|
|
108
119
|
post-device-sizing-interactive-icon-size5: var(--post-core-dimension-24),
|
|
120
|
+
post-device-sizing-interactive-icon-size6: var(--post-core-dimension-32),
|
|
109
121
|
post-device-sizing-interactive-stepper-indicator: var(--post-core-dimension-40),
|
|
110
122
|
post-device-sizing-interactive-button-height-1: var(--post-core-dimension-48),
|
|
111
123
|
post-device-sizing-interactive-button-height-2: var(--post-core-dimension-56),
|
|
@@ -130,6 +142,7 @@ $post-desktop: (
|
|
|
130
142
|
post-device-sizing-icon-1: var(--post-core-dimension-24),
|
|
131
143
|
post-device-sizing-icon-2: var(--post-core-dimension-30),
|
|
132
144
|
post-device-sizing-icon-3: var(--post-core-dimension-16),
|
|
145
|
+
post-device-sizing-icon-8: var(--post-core-dimension-8),
|
|
133
146
|
post-device-sizing-logo-1: var(--post-core-dimension-72),
|
|
134
147
|
post-device-sizing-content-height-1: var(--post-core-dimension-164),
|
|
135
148
|
post-device-sizing-content-height-2: var(--post-core-dimension-312),
|
|
@@ -184,6 +197,8 @@ $post-tablet: (
|
|
|
184
197
|
post-device-spacing-gap-5: var(--post-core-dimension-24),
|
|
185
198
|
post-device-spacing-gap-6: var(--post-core-dimension-0),
|
|
186
199
|
post-device-spacing-gap-7: var(--post-core-dimension-16),
|
|
200
|
+
post-device-spacing-gap-9: var(--post-core-dimension-12),
|
|
201
|
+
post-device-spacing-gap-10: var(--post-core-dimension-24),
|
|
187
202
|
post-device-spacing-gap-block-1: var(--post-core-dimension-4),
|
|
188
203
|
post-device-spacing-gap-block-2: var(--post-core-dimension-16),
|
|
189
204
|
post-device-spacing-gap-block-3: var(--post-core-dimension-8),
|
|
@@ -211,12 +226,21 @@ $post-tablet: (
|
|
|
211
226
|
post-device-spacing-padding-10: var(--post-core-dimension-22),
|
|
212
227
|
post-device-spacing-padding-11: var(--post-core-dimension-14),
|
|
213
228
|
post-device-spacing-padding-12: var(--post-core-dimension-1),
|
|
229
|
+
post-device-spacing-padding-13: var(--post-core-dimension-0),
|
|
230
|
+
post-device-spacing-padding-14: var(--post-core-dimension-2-5),
|
|
214
231
|
post-device-spacing-padding-15: var(--post-core-dimension-8),
|
|
215
232
|
post-device-spacing-padding-16: var(--post-core-dimension-4),
|
|
216
233
|
post-device-spacing-padding-17: var(--post-core-dimension-16),
|
|
217
234
|
post-device-spacing-padding-18: var(--post-core-dimension-0),
|
|
218
235
|
post-device-spacing-padding-19: var(--post-core-dimension-15),
|
|
219
236
|
post-device-spacing-padding-20: var(--post-core-dimension-24),
|
|
237
|
+
post-device-spacing-padding-21: var(--post-core-dimension-1-5),
|
|
238
|
+
post-device-spacing-padding-22: var(--post-core-dimension-10),
|
|
239
|
+
post-device-spacing-padding-23: var(--post-core-dimension-7),
|
|
240
|
+
post-device-spacing-padding-24: var(--post-core-dimension-6),
|
|
241
|
+
post-device-spacing-padding-25: var(--post-core-dimension-3),
|
|
242
|
+
post-device-spacing-padding-26: var(--post-core-dimension-2),
|
|
243
|
+
post-device-spacing-padding-27: var(--post-core-dimension-14),
|
|
220
244
|
post-device-spacing-padding-inline-1: var(--post-core-dimension-14),
|
|
221
245
|
post-device-spacing-padding-inline-3: var(--post-core-dimension-12),
|
|
222
246
|
post-device-spacing-padding-inline-4: var(--post-core-dimension-12),
|
|
@@ -263,6 +287,7 @@ $post-tablet: (
|
|
|
263
287
|
post-device-sizing-interactive-icon-size3: var(--post-core-dimension-40),
|
|
264
288
|
post-device-sizing-interactive-icon-size4: var(--post-core-dimension-16),
|
|
265
289
|
post-device-sizing-interactive-icon-size5: var(--post-core-dimension-20),
|
|
290
|
+
post-device-sizing-interactive-icon-size6: var(--post-core-dimension-32),
|
|
266
291
|
post-device-sizing-interactive-stepper-indicator: var(--post-core-dimension-32),
|
|
267
292
|
post-device-sizing-interactive-button-height-1: var(--post-core-dimension-40),
|
|
268
293
|
post-device-sizing-interactive-button-height-2: var(--post-core-dimension-48),
|
|
@@ -287,6 +312,7 @@ $post-tablet: (
|
|
|
287
312
|
post-device-sizing-icon-1: var(--post-core-dimension-16),
|
|
288
313
|
post-device-sizing-icon-2: var(--post-core-dimension-24),
|
|
289
314
|
post-device-sizing-icon-3: var(--post-core-dimension-14),
|
|
315
|
+
post-device-sizing-icon-8: var(--post-core-dimension-8),
|
|
290
316
|
post-device-sizing-logo-1: var(--post-core-dimension-64),
|
|
291
317
|
post-device-sizing-content-height-1: var(--post-core-dimension-180),
|
|
292
318
|
post-device-sizing-content-height-2: var(--post-core-dimension-240),
|
|
@@ -341,6 +367,8 @@ $post-mobile: (
|
|
|
341
367
|
post-device-spacing-gap-5: var(--post-core-dimension-8),
|
|
342
368
|
post-device-spacing-gap-6: var(--post-core-dimension-n2),
|
|
343
369
|
post-device-spacing-gap-7: var(--post-core-dimension-16),
|
|
370
|
+
post-device-spacing-gap-9: var(--post-core-dimension-10),
|
|
371
|
+
post-device-spacing-gap-10: var(--post-core-dimension-16),
|
|
344
372
|
post-device-spacing-gap-block-1: var(--post-core-dimension-4),
|
|
345
373
|
post-device-spacing-gap-block-2: var(--post-core-dimension-16),
|
|
346
374
|
post-device-spacing-gap-block-3: var(--post-core-dimension-8),
|
|
@@ -368,12 +396,21 @@ $post-mobile: (
|
|
|
368
396
|
post-device-spacing-padding-10: var(--post-core-dimension-14),
|
|
369
397
|
post-device-spacing-padding-11: var(--post-core-dimension-14),
|
|
370
398
|
post-device-spacing-padding-12: var(--post-core-dimension-1),
|
|
399
|
+
post-device-spacing-padding-13: var(--post-core-dimension-0),
|
|
400
|
+
post-device-spacing-padding-14: var(--post-core-dimension-2-5),
|
|
371
401
|
post-device-spacing-padding-15: var(--post-core-dimension-8),
|
|
372
402
|
post-device-spacing-padding-16: var(--post-core-dimension-2),
|
|
373
403
|
post-device-spacing-padding-17: var(--post-core-dimension-8),
|
|
374
404
|
post-device-spacing-padding-18: var(--post-core-dimension-4),
|
|
375
405
|
post-device-spacing-padding-19: var(--post-core-dimension-11),
|
|
376
406
|
post-device-spacing-padding-20: var(--post-core-dimension-16),
|
|
407
|
+
post-device-spacing-padding-21: var(--post-core-dimension-1-5),
|
|
408
|
+
post-device-spacing-padding-22: var(--post-core-dimension-10),
|
|
409
|
+
post-device-spacing-padding-23: var(--post-core-dimension-7),
|
|
410
|
+
post-device-spacing-padding-24: var(--post-core-dimension-7-5),
|
|
411
|
+
post-device-spacing-padding-25: var(--post-core-dimension-3),
|
|
412
|
+
post-device-spacing-padding-26: var(--post-core-dimension-2),
|
|
413
|
+
post-device-spacing-padding-27: var(--post-core-dimension-14),
|
|
377
414
|
post-device-spacing-padding-inline-1: var(--post-core-dimension-14),
|
|
378
415
|
post-device-spacing-padding-inline-3: var(--post-core-dimension-12),
|
|
379
416
|
post-device-spacing-padding-inline-4: var(--post-core-dimension-12),
|
|
@@ -420,6 +457,7 @@ $post-mobile: (
|
|
|
420
457
|
post-device-sizing-interactive-icon-size3: var(--post-core-dimension-40),
|
|
421
458
|
post-device-sizing-interactive-icon-size4: var(--post-core-dimension-16),
|
|
422
459
|
post-device-sizing-interactive-icon-size5: var(--post-core-dimension-16),
|
|
460
|
+
post-device-sizing-interactive-icon-size6: var(--post-core-dimension-32),
|
|
423
461
|
post-device-sizing-interactive-stepper-indicator: var(--post-core-dimension-32),
|
|
424
462
|
post-device-sizing-interactive-button-height-1: var(--post-core-dimension-32),
|
|
425
463
|
post-device-sizing-interactive-button-height-2: var(--post-core-dimension-40),
|
|
@@ -444,6 +482,7 @@ $post-mobile: (
|
|
|
444
482
|
post-device-sizing-icon-1: var(--post-core-dimension-12),
|
|
445
483
|
post-device-sizing-icon-2: var(--post-core-dimension-24),
|
|
446
484
|
post-device-sizing-icon-3: var(--post-core-dimension-12),
|
|
485
|
+
post-device-sizing-icon-8: var(--post-core-dimension-8),
|
|
447
486
|
post-device-sizing-logo-1: var(--post-core-dimension-56),
|
|
448
487
|
post-device-sizing-content-height-1: var(--post-core-dimension-180),
|
|
449
488
|
post-device-sizing-content-height-2: var(--post-core-dimension-188),
|
package/_elements.scss
CHANGED
package/_helpers.scss
CHANGED
package/_index.scss
CHANGED
package/_palette.scss
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit manually
|
|
3
3
|
// This file was generated by the swisspost/design-system-tokens package
|
|
4
|
-
//
|
|
4
|
+
// Wed, 05 Nov 2025 08:36:52 GMT
|
|
5
5
|
|
|
6
6
|
$post-default: (
|
|
7
7
|
post-palette-color-scheme: var(--post-theme-color-palettes-default-scheme),
|
package/_scheme.scss
CHANGED
package/_schemestatic.scss
CHANGED
package/_theme.scss
CHANGED
package/_utilities.scss
CHANGED
package/package.json
CHANGED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
|
|
2
|
+
// Do not edit manually
|
|
3
|
+
// This file was generated by the swisspost/design-system-tokens package
|
|
4
|
+
// Wed, 05 Nov 2025 08:36:52 GMT
|
|
5
|
+
|
|
6
|
+
export default {
|
|
7
|
+
focus: {
|
|
8
|
+
'outline': {
|
|
9
|
+
'offset': 'var(--post-device-spacing-padding-2)',
|
|
10
|
+
'color': 'var(--post-scheme-color-interactive-focus-stroke)',
|
|
11
|
+
'color-inverted': 'var(--post-scheme-color-interactive-focus-stroke-inverted)',
|
|
12
|
+
},
|
|
13
|
+
'outline-width': 'var(--post-device-border-width-focus)',
|
|
14
|
+
'border-style': 'var(--post-core-border-style-solid)',
|
|
15
|
+
'border-radius': 'var(--post-device-border-radius-focus)',
|
|
16
|
+
},
|
|
17
|
+
};
|
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
|
|
2
|
+
// Do not edit manually
|
|
3
|
+
// This file was generated by the swisspost/design-system-tokens package
|
|
4
|
+
// Wed, 05 Nov 2025 08:36:52 GMT
|
|
5
|
+
|
|
6
|
+
export default {
|
|
7
|
+
utility: {
|
|
8
|
+
'margin': {
|
|
9
|
+
0: 'var(--post-core-dimension-0)',
|
|
10
|
+
1: 'var(--post-core-dimension-1)',
|
|
11
|
+
2: 'var(--post-core-dimension-2)',
|
|
12
|
+
4: 'var(--post-core-dimension-4)',
|
|
13
|
+
6: 'var(--post-core-dimension-6)',
|
|
14
|
+
8: 'var(--post-core-dimension-8)',
|
|
15
|
+
12: 'var(--post-core-dimension-12)',
|
|
16
|
+
16: 'var(--post-core-dimension-16)',
|
|
17
|
+
24: 'var(--post-core-dimension-24)',
|
|
18
|
+
32: 'var(--post-core-dimension-32)',
|
|
19
|
+
40: 'var(--post-core-dimension-40)',
|
|
20
|
+
48: 'var(--post-core-dimension-48)',
|
|
21
|
+
56: 'var(--post-core-dimension-56)',
|
|
22
|
+
64: 'var(--post-core-dimension-64)',
|
|
23
|
+
72: 'var(--post-core-dimension-72)',
|
|
24
|
+
80: 'var(--post-core-dimension-80)',
|
|
25
|
+
88: 'var(--post-core-dimension-88)',
|
|
26
|
+
96: 'var(--post-core-dimension-96)',
|
|
27
|
+
104: 'var(--post-core-dimension-104)',
|
|
28
|
+
auto: 'auto',
|
|
29
|
+
},
|
|
30
|
+
'padding': {
|
|
31
|
+
0: 'var(--post-core-dimension-0)',
|
|
32
|
+
1: 'var(--post-core-dimension-1)',
|
|
33
|
+
2: 'var(--post-core-dimension-2)',
|
|
34
|
+
4: 'var(--post-core-dimension-4)',
|
|
35
|
+
6: 'var(--post-core-dimension-6)',
|
|
36
|
+
8: 'var(--post-core-dimension-8)',
|
|
37
|
+
12: 'var(--post-core-dimension-12)',
|
|
38
|
+
16: 'var(--post-core-dimension-16)',
|
|
39
|
+
24: 'var(--post-core-dimension-24)',
|
|
40
|
+
32: 'var(--post-core-dimension-32)',
|
|
41
|
+
40: 'var(--post-core-dimension-40)',
|
|
42
|
+
48: 'var(--post-core-dimension-48)',
|
|
43
|
+
56: 'var(--post-core-dimension-56)',
|
|
44
|
+
64: 'var(--post-core-dimension-64)',
|
|
45
|
+
72: 'var(--post-core-dimension-72)',
|
|
46
|
+
80: 'var(--post-core-dimension-80)',
|
|
47
|
+
88: 'var(--post-core-dimension-88)',
|
|
48
|
+
96: 'var(--post-core-dimension-96)',
|
|
49
|
+
104: 'var(--post-core-dimension-104)',
|
|
50
|
+
auto: 'auto',
|
|
51
|
+
},
|
|
52
|
+
'gap': {
|
|
53
|
+
0: 'var(--post-core-dimension-0)',
|
|
54
|
+
1: 'var(--post-core-dimension-1)',
|
|
55
|
+
2: 'var(--post-core-dimension-2)',
|
|
56
|
+
4: 'var(--post-core-dimension-4)',
|
|
57
|
+
6: 'var(--post-core-dimension-6)',
|
|
58
|
+
8: 'var(--post-core-dimension-8)',
|
|
59
|
+
12: 'var(--post-core-dimension-12)',
|
|
60
|
+
16: 'var(--post-core-dimension-16)',
|
|
61
|
+
24: 'var(--post-core-dimension-24)',
|
|
62
|
+
32: 'var(--post-core-dimension-32)',
|
|
63
|
+
40: 'var(--post-core-dimension-40)',
|
|
64
|
+
48: 'var(--post-core-dimension-48)',
|
|
65
|
+
56: 'var(--post-core-dimension-56)',
|
|
66
|
+
64: 'var(--post-core-dimension-64)',
|
|
67
|
+
72: 'var(--post-core-dimension-72)',
|
|
68
|
+
80: 'var(--post-core-dimension-80)',
|
|
69
|
+
88: 'var(--post-core-dimension-88)',
|
|
70
|
+
96: 'var(--post-core-dimension-96)',
|
|
71
|
+
104: 'var(--post-core-dimension-104)',
|
|
72
|
+
auto: 'auto',
|
|
73
|
+
},
|
|
74
|
+
'surface': {
|
|
75
|
+
default: 'var(--post-core-color-sandgrey-002)',
|
|
76
|
+
accent1: 'var(--post-core-color-brand-white)',
|
|
77
|
+
accent2: 'var(--post-core-color-sandgrey-006)',
|
|
78
|
+
accent3: 'var(--post-core-color-brand-postyellow)',
|
|
79
|
+
accent4: 'var(--post-core-color-sandgrey-080)',
|
|
80
|
+
},
|
|
81
|
+
'elevation': {
|
|
82
|
+
100: 'var(--post-device-elevation-100)',
|
|
83
|
+
200: 'var(--post-device-elevation-200)',
|
|
84
|
+
300: 'var(--post-device-elevation-300)',
|
|
85
|
+
400: 'var(--post-device-elevation-400)',
|
|
86
|
+
500: 'var(--post-device-elevation-500)',
|
|
87
|
+
},
|
|
88
|
+
'border-width': {
|
|
89
|
+
1: 'var(--post-core-dimension-1)',
|
|
90
|
+
2: 'var(--post-core-dimension-2)',
|
|
91
|
+
},
|
|
92
|
+
'border-radius': {
|
|
93
|
+
4: 'var(--post-core-dimension-4)',
|
|
94
|
+
8: 'var(--post-core-dimension-8)',
|
|
95
|
+
},
|
|
96
|
+
'border-default': {
|
|
97
|
+
width: 'var(--post-core-dimension-1)',
|
|
98
|
+
radius: 'var(--post-core-dimension-4)',
|
|
99
|
+
color: 'var(--post-scheme-color-surface-default-stroke)',
|
|
100
|
+
},
|
|
101
|
+
'font-weight': {
|
|
102
|
+
'regular': 'var(--post-core-font-weight-400)',
|
|
103
|
+
'bold': 'var(--post-core-font-weight-700)',
|
|
104
|
+
'black': 'var(--post-core-font-weight-900)',
|
|
105
|
+
'extra-black': 'var(--post-core-font-weight-950)',
|
|
106
|
+
},
|
|
107
|
+
'line-height': {
|
|
108
|
+
1: 'var(--post-core-line-height-100)',
|
|
109
|
+
sm: 'var(--post-core-line-height-120)',
|
|
110
|
+
lg: 'var(--post-core-line-height-150)',
|
|
111
|
+
},
|
|
112
|
+
'letter-spacing': {
|
|
113
|
+
none: 'var(--post-core-letter-spacing-none)',
|
|
114
|
+
default: 'var(--post-core-letter-spacing-default)',
|
|
115
|
+
},
|
|
116
|
+
'font-size': {
|
|
117
|
+
1: 'var(--post-device-font-size-1)',
|
|
118
|
+
2: 'var(--post-device-font-size-2)',
|
|
119
|
+
3: 'var(--post-device-font-size-3)',
|
|
120
|
+
4: 'var(--post-device-font-size-4)',
|
|
121
|
+
5: 'var(--post-device-font-size-5)',
|
|
122
|
+
6: 'var(--post-device-font-size-6)',
|
|
123
|
+
7: 'var(--post-device-font-size-7)',
|
|
124
|
+
8: 'var(--post-device-font-size-8)',
|
|
125
|
+
9: 'var(--post-device-font-size-9)',
|
|
126
|
+
10: 'var(--post-device-font-size-10)',
|
|
127
|
+
11: 'var(--post-device-font-size-11)',
|
|
128
|
+
},
|
|
129
|
+
},
|
|
130
|
+
};
|