@swisspost/design-system-tokens 9.0.0-next.8 → 10.0.0-next.37
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 +71 -0
- package/_channel.scss +3 -3
- package/_components.scss +90 -23
- package/_core.scss +21 -18
- package/_device.scss +16 -1
- package/_elements.scss +1 -1
- package/_helpers.scss +1 -1
- package/_index.scss +2 -1
- package/_palette.scss +56 -0
- package/_palettes.scss +3 -3
- package/_scheme.scss +37 -15
- package/_theme.scss +17 -3
- package/_utilities-formatted.scss +136 -0
- package/_utilities.scss +41 -58
- package/package.json +20 -14
- package/palettes/_cargo-dark.scss +1 -1
- package/palettes/_cargo-light.scss +1 -1
- package/palettes/_post-dark.scss +1 -1
- package/palettes/_post-light.scss +2 -2
- package/tailwind/helpers.tailwind.js +1 -1
- package/tailwind/utilities.tailwind.js +44 -59
- package/tokens.json +1527 -630
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,76 @@
|
|
|
1
1
|
# @swisspost/design-system-tokens
|
|
2
2
|
|
|
3
|
+
## 10.0.0-next.37
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Added a function to transform font sizes from px to rem. (by [@leagrdv](https://github.com/leagrdv) with [#5321](https://github.com/swisspost/design-system/pull/5321))
|
|
8
|
+
|
|
9
|
+
## 9.0.0-next.36
|
|
10
|
+
|
|
11
|
+
## 9.0.0-next.35
|
|
12
|
+
|
|
13
|
+
## 9.0.0-next.34
|
|
14
|
+
|
|
15
|
+
## 9.0.0-next.33
|
|
16
|
+
|
|
17
|
+
## 9.0.0-next.32
|
|
18
|
+
|
|
19
|
+
## 9.0.0-next.31
|
|
20
|
+
|
|
21
|
+
## 9.0.0-next.30
|
|
22
|
+
|
|
23
|
+
## 9.0.0-next.29
|
|
24
|
+
|
|
25
|
+
## 9.0.0-next.28
|
|
26
|
+
|
|
27
|
+
## 9.0.0-next.27
|
|
28
|
+
|
|
29
|
+
## 9.0.0-next.26
|
|
30
|
+
|
|
31
|
+
## 9.0.0-next.25
|
|
32
|
+
|
|
33
|
+
## 9.0.0-next.24
|
|
34
|
+
|
|
35
|
+
## 9.0.0-next.23
|
|
36
|
+
|
|
37
|
+
## 9.0.0-next.22
|
|
38
|
+
|
|
39
|
+
## 9.0.0-next.21
|
|
40
|
+
|
|
41
|
+
## 9.0.0-next.20
|
|
42
|
+
|
|
43
|
+
## 9.0.0-next.19
|
|
44
|
+
|
|
45
|
+
### Minor Changes
|
|
46
|
+
|
|
47
|
+
- Added a new output that includes utility tokens as Sass maps, enabling direct iteration to generate utility classes. (by [@alizedebray](https://github.com/alizedebray) with [#4613](https://github.com/swisspost/design-system/pull/4613))
|
|
48
|
+
|
|
49
|
+
## 9.0.0-next.18
|
|
50
|
+
|
|
51
|
+
## 9.0.0-next.17
|
|
52
|
+
|
|
53
|
+
## 9.0.0-next.16
|
|
54
|
+
|
|
55
|
+
## 9.0.0-next.15
|
|
56
|
+
|
|
57
|
+
## 9.0.0-next.14
|
|
58
|
+
|
|
59
|
+
### Patch Changes
|
|
60
|
+
|
|
61
|
+
- Added a transform function to avoid unitless zero values for specific token types (like `dimension`, etc.), which allows us to use these tokens also in css `calc()` functions. Because `<number-token>`s are always interpreted as `<number>`s or `<integer>`s, "unitless 0" `<length>`s aren’t supported in calc().
|
|
62
|
+
Source: https://drafts.csswg.org/css-values-3/#calc-type-checking (by [@oliverschuerch](https://github.com/oliverschuerch) with [#4534](https://github.com/swisspost/design-system/pull/4534))
|
|
63
|
+
|
|
64
|
+
## 9.0.0-next.13
|
|
65
|
+
|
|
66
|
+
## 9.0.0-next.12
|
|
67
|
+
|
|
68
|
+
## 9.0.0-next.11
|
|
69
|
+
|
|
70
|
+
## 9.0.0-next.10
|
|
71
|
+
|
|
72
|
+
## 9.0.0-next.9
|
|
73
|
+
|
|
3
74
|
## 9.0.0-next.8
|
|
4
75
|
|
|
5
76
|
## 9.0.0-next.7
|
package/_channel.scss
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit manually
|
|
3
3
|
// This file was generated by the swisspost/design-system-tokens package
|
|
4
|
-
// Mon,
|
|
4
|
+
// Mon, 12 May 2025 10:18:55 GMT
|
|
5
5
|
|
|
6
6
|
$post-edk: (
|
|
7
|
-
|
|
7
|
+
keep: undefined,
|
|
8
8
|
);
|
|
9
9
|
|
|
10
10
|
$post-idk: (
|
|
11
|
-
|
|
11
|
+
keep: undefined,
|
|
12
12
|
);
|
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
|
-
// Mon,
|
|
4
|
+
// Mon, 12 May 2025 10:18:55 GMT
|
|
5
5
|
|
|
6
6
|
$post-accordion: (
|
|
7
7
|
post-accordion-header-padding-block-closed: var(--post-device-spacing-padding-19),
|
|
@@ -56,9 +56,9 @@ $post-avatar: (
|
|
|
56
56
|
);
|
|
57
57
|
|
|
58
58
|
$post-badge: (
|
|
59
|
-
post-badge-bg: var(--post-scheme-color-
|
|
60
|
-
post-badge-fg: var(--post-scheme-color-
|
|
61
|
-
post-badge-stroke: var(--post-scheme-color-
|
|
59
|
+
post-badge-bg: var(--post-scheme-color-badge-bg),
|
|
60
|
+
post-badge-fg: var(--post-scheme-color-badge-fg),
|
|
61
|
+
post-badge-stroke: var(--post-scheme-color-badge-stroke),
|
|
62
62
|
post-badge-height-l: var(--post-device-sizing-notification-1),
|
|
63
63
|
post-badge-height-m: var(--post-device-sizing-notification-2),
|
|
64
64
|
post-badge-height-s: var(--post-device-sizing-notification-3),
|
|
@@ -127,7 +127,7 @@ $post-breadcrumb: (
|
|
|
127
127
|
post-breadcrumb-link-enabled-text-decoration: var(--post-core-text-decoration-none),
|
|
128
128
|
post-breadcrumb-link-hover-text-decoration: var(--post-core-text-decoration-underline),
|
|
129
129
|
post-breadcrumb-link-selected-text-decoration: var(--post-core-text-decoration-none),
|
|
130
|
-
post-
|
|
130
|
+
post-breadcrumb-icon-size: var(--post-core-dimension-24),
|
|
131
131
|
);
|
|
132
132
|
|
|
133
133
|
$post-button: (
|
|
@@ -209,6 +209,16 @@ $post-button: (
|
|
|
209
209
|
post-button-border-style-disabled: var(--post-core-border-style-dash),
|
|
210
210
|
);
|
|
211
211
|
|
|
212
|
+
$post-cards: (
|
|
213
|
+
post-card-border-radius: var(--post-device-border-radius-2),
|
|
214
|
+
post-card-interactive-elevation: var(--post-device-elevation-200),
|
|
215
|
+
post-card-non-interactive-stroke: var(--post-scheme-color-interactive-primary-enabled-stroke4),
|
|
216
|
+
post-card-enabled-bg1: var(--post-theme-color-palettes-alternate-bg),
|
|
217
|
+
post-card-enabled-bg2: var(--post-theme-color-palettes-default-bg),
|
|
218
|
+
post-card-hover-bg: var(--post-scheme-color-interactive-card-hover-bg),
|
|
219
|
+
post-card-hover-fg: var(--post-scheme-color-interactive-card-hover-fg),
|
|
220
|
+
);
|
|
221
|
+
|
|
212
222
|
$post-checkbox: (
|
|
213
223
|
post-checkbox-enabled-bg: var(--post-scheme-color-interactive-primary-enabled-bg3),
|
|
214
224
|
post-checkbox-enabled-fg: var(--post-scheme-color-interactive-primary-enabled-fg1),
|
|
@@ -281,11 +291,34 @@ $post-dropdown: (
|
|
|
281
291
|
post-dropdown-multi-select-menu-padding-block: var(--post-device-spacing-padding-block-8),
|
|
282
292
|
post-dropdown-multi-select-menu-border-radius: var(--post-device-border-radius-1),
|
|
283
293
|
post-dropdown-multi-select-menu-elevation: var(--post-device-elevation-300),
|
|
294
|
+
post-dropdown-single-select-menu-list-item-icon-spacing-height-outer: var(--post-device-sizing-icon-2),
|
|
295
|
+
post-dropdown-single-select-menu-list-item-icon-size: var(--post-device-sizing-interactive-icon-size),
|
|
296
|
+
post-dropdown-single-select-menu-list-item-padding-inline-start: var(--post-device-spacing-padding-5),
|
|
297
|
+
post-dropdown-single-select-menu-list-item-padding-inline-end: var(--post-device-spacing-padding-inline-4),
|
|
298
|
+
post-dropdown-single-select-menu-list-item-padding-block-start: var(--post-device-spacing-padding-block-16),
|
|
299
|
+
post-dropdown-single-select-menu-list-item-padding-block-end: var(--post-device-spacing-padding-block-17),
|
|
300
|
+
post-dropdown-single-select-menu-list-item-gap-inline-text-start: var(--post-device-spacing-gap-4),
|
|
301
|
+
post-dropdown-single-select-menu-list-item-enabled-fg: var(--post-scheme-color-interactive-primary-enabled-fg1),
|
|
302
|
+
post-dropdown-single-select-menu-list-item-hover-fg: var(--post-scheme-color-interactive-primary-hover-fg1),
|
|
303
|
+
post-dropdown-single-select-menu-list-item-enabled-bg: var(--post-scheme-color-interactive-primary-enabled-bg1),
|
|
304
|
+
post-dropdown-single-select-menu-list-item-hover-bg: var(--post-scheme-color-interactive-primary-hover-bg),
|
|
305
|
+
post-dropdown-single-select-menu-list-item-hover-stroke: var(--post-scheme-color-interactive-primary-hover-stroke),
|
|
306
|
+
post-dropdown-single-select-menu-list-item-enabled-stroke: var(--post-scheme-color-interactive-primary-enabled-stroke3),
|
|
307
|
+
post-dropdown-single-select-menu-list-item-border-width-bottom: var(--post-device-border-width-alternative2),
|
|
308
|
+
post-dropdown-single-select-menu-category-title-padding-block-outer: var(--post-device-spacing-padding-block-14),
|
|
309
|
+
post-dropdown-single-select-menu-category-title-padding-block-inner: var(--post-device-spacing-padding-block-15),
|
|
310
|
+
post-dropdown-single-select-menu-category-title-padding-inline-inner: var(--post-device-spacing-padding-inline-3),
|
|
311
|
+
post-dropdown-single-select-menu-category-title-stroke: var(--post-scheme-color-interactive-primary-enabled-stroke),
|
|
312
|
+
post-dropdown-single-select-menu-category-title-enabled-fg: var(--post-scheme-color-interactive-primary-enabled-fg1),
|
|
313
|
+
post-dropdown-single-select-menu-category-title-font-weight: var(--post-device-font-weight-bold),
|
|
314
|
+
post-dropdown-single-select-menu-padding-block: var(--post-device-spacing-padding-block-8),
|
|
315
|
+
post-dropdown-single-select-menu-border-radius: var(--post-device-border-radius-1),
|
|
316
|
+
post-dropdown-single-select-menu-elevation: var(--post-device-elevation-300),
|
|
284
317
|
);
|
|
285
318
|
|
|
286
319
|
$post-floating-button: (
|
|
287
320
|
post-floating-button-position-right: var(--post-device-position-1),
|
|
288
|
-
post-floating-button-position-top: var(--post-device-position-
|
|
321
|
+
post-floating-button-position-top: var(--post-device-position-4),
|
|
289
322
|
post-floating-button-enabled-fg: var(--post-scheme-color-interactive-button-secondary-enabled-fg),
|
|
290
323
|
post-floating-button-enabled-bg: var(--post-scheme-color-interactive-button-secondary-enabled-bg),
|
|
291
324
|
post-floating-button-enabled-border: var(--post-scheme-color-interactive-button-secondary-enabled-stroke),
|
|
@@ -453,7 +486,7 @@ $post-popover: (
|
|
|
453
486
|
post-popover-link-padding-block: var(--post-device-spacing-padding-block-9),
|
|
454
487
|
post-popover-link-enabled-fg: var(--post-scheme-color-surface-accent-fg),
|
|
455
488
|
post-popover-link-selected-fg: var(--post-scheme-color-surface-accent-fg),
|
|
456
|
-
post-popover-link-hover-fg: var(--post-scheme-color-
|
|
489
|
+
post-popover-link-hover-fg: var(--post-scheme-color-popover-hover),
|
|
457
490
|
post-popover-link-font-weight: var(--post-device-font-weight-bold),
|
|
458
491
|
post-popover-link-font-size: var(--post-device-font-size-7),
|
|
459
492
|
post-popover-icon-enabled-fg: var(--post-scheme-color-surface-accent1-fg),
|
|
@@ -464,7 +497,7 @@ $post-popover: (
|
|
|
464
497
|
post-popover-surface-border-radius: var(--post-device-border-radius-1),
|
|
465
498
|
post-popover-surface-padding-block: var(--post-device-spacing-padding-5),
|
|
466
499
|
post-popover-surface-padding-inline-start: var(--post-device-spacing-padding-5),
|
|
467
|
-
post-popover-surface-padding-inline-end: var(--post-
|
|
500
|
+
post-popover-surface-padding-inline-end: var(--post-core-dimension-4),
|
|
468
501
|
post-popover-surface-gap-inline: var(--post-device-spacing-gap-inline-4),
|
|
469
502
|
post-popover-text-selected-fg: var(--post-scheme-color-surface-accent-fg),
|
|
470
503
|
post-popover-elevation: var(--post-device-elevation-300),
|
|
@@ -532,19 +565,19 @@ $post-segmented-button: (
|
|
|
532
565
|
);
|
|
533
566
|
|
|
534
567
|
$post-select: (
|
|
535
|
-
post-select-color-enabled-bg: var(--post-scheme-color-interactive-
|
|
536
|
-
post-select-color-enabled-fg: var(--post-scheme-color-interactive-
|
|
537
|
-
post-select-color-hover-bg: var(--post-scheme-color-interactive-
|
|
538
|
-
post-select-color-hover-fg: var(--post-scheme-color-interactive-
|
|
539
|
-
post-select-color-disabled-bg: var(--post-scheme-color-interactive-
|
|
540
|
-
post-select-color-disabled-fg: var(--post-scheme-color-interactive-
|
|
541
|
-
post-select-color-selected-bg: var(--post-scheme-color-interactive-
|
|
542
|
-
post-select-color-selected-fg: var(--post-scheme-color-interactive-
|
|
568
|
+
post-select-color-enabled-bg: var(--post-scheme-color-interactive-input-enabled-bg),
|
|
569
|
+
post-select-color-enabled-fg: var(--post-scheme-color-interactive-input-enabled-fg),
|
|
570
|
+
post-select-color-hover-bg: var(--post-scheme-color-interactive-input-hover-bg),
|
|
571
|
+
post-select-color-hover-fg: var(--post-scheme-color-interactive-input-hover-fg),
|
|
572
|
+
post-select-color-disabled-bg: var(--post-scheme-color-interactive-input-disabled-bg),
|
|
573
|
+
post-select-color-disabled-fg: var(--post-scheme-color-interactive-input-disabled-fg),
|
|
574
|
+
post-select-color-selected-bg: var(--post-scheme-color-interactive-input-enabled-bg),
|
|
575
|
+
post-select-color-selected-fg: var(--post-scheme-color-interactive-input-enabled-fg),
|
|
543
576
|
post-select-color-helptext-fg: var(--post-scheme-color-interactive-primary-enabled-fg2),
|
|
544
|
-
post-select-color-enabled-border: var(--post-scheme-color-interactive-
|
|
545
|
-
post-select-color-hover-border: var(--post-scheme-color-interactive-
|
|
546
|
-
post-select-color-disabled-border: var(--post-scheme-color-interactive-
|
|
547
|
-
post-select-color-selected-border: var(--post-scheme-color-interactive-
|
|
577
|
+
post-select-color-enabled-border: var(--post-scheme-color-interactive-input-enabled-border),
|
|
578
|
+
post-select-color-hover-border: var(--post-scheme-color-interactive-input-hover-border),
|
|
579
|
+
post-select-color-disabled-border: var(--post-scheme-color-interactive-input-disabled-border),
|
|
580
|
+
post-select-color-selected-border: var(--post-scheme-color-interactive-input-enabled-border),
|
|
548
581
|
post-select-color-signal-error: var(--post-scheme-color-signal-error-dark),
|
|
549
582
|
post-select-color-signal-success: var(--post-scheme-color-signal-success-dark),
|
|
550
583
|
post-select-gap-inline-icon: var(--post-device-spacing-gap-1),
|
|
@@ -597,6 +630,24 @@ $post-snackbar: (
|
|
|
597
630
|
post-snackbar-elevation: var(--post-device-elevation-300),
|
|
598
631
|
);
|
|
599
632
|
|
|
633
|
+
$post-spin-button: (
|
|
634
|
+
post-spin-button-large-action-button-icon-size: var(--post-core-dimension-32),
|
|
635
|
+
post-spin-button-large-action-button-padding-block: var(--post-core-dimension-14),
|
|
636
|
+
post-spin-button-large-action-button-padding-inline: var(--post-core-dimension-10),
|
|
637
|
+
post-spin-button-action-button-enabled-bg: var(--post-scheme-color-interactive-button-secondary-enabled-bg),
|
|
638
|
+
post-spin-button-action-button-enabled-fg: var(--post-scheme-color-interactive-button-secondary-enabled-fg),
|
|
639
|
+
post-spin-button-action-button-hover-bg: var(--post-scheme-color-interactive-button-secondary-hover-bg),
|
|
640
|
+
post-spin-button-action-button-hover-fg: var(--post-scheme-color-interactive-button-secondary-hover-fg),
|
|
641
|
+
post-spin-button-action-button-disabled-bg: var(--post-scheme-color-interactive-button-secondary-disabled-bg),
|
|
642
|
+
post-spin-button-action-button-disabled-fg: var(--post-scheme-color-interactive-button-secondary-disabled-fg),
|
|
643
|
+
post-spin-button-action-button-enabled-stroke: var(--post-scheme-color-interactive-button-secondary-enabled-stroke),
|
|
644
|
+
post-spin-button-action-button-hover-stroke: var(--post-scheme-color-interactive-button-secondary-hover-stroke),
|
|
645
|
+
post-spin-button-action-button-disabled-stroke: var(--post-scheme-color-interactive-button-secondary-disabled-stroke),
|
|
646
|
+
post-spin-button-action-button-border-radius: var(--post-device-border-radius-round),
|
|
647
|
+
post-spin-button-action-button-border-width: var(--post-device-border-width-default),
|
|
648
|
+
post-spin-button-action-button-elevation: var(--post-device-elevation-100),
|
|
649
|
+
);
|
|
650
|
+
|
|
600
651
|
$post-stepper: (
|
|
601
652
|
post-stepper-text-enabled-fg: var(--post-scheme-color-interactive-primary-enabled-fg1),
|
|
602
653
|
post-stepper-text-disabled-fg: var(--post-scheme-color-interactive-primary-disabled-fg1),
|
|
@@ -652,6 +703,7 @@ $post-switch: (
|
|
|
652
703
|
post-switch-element-handle: var(--post-core-dimension-18),
|
|
653
704
|
post-switch-gap-inline-text: var(--post-device-spacing-gap-inline-3),
|
|
654
705
|
post-switch-padding-block-text: var(--post-device-spacing-padding-block-7),
|
|
706
|
+
post-switch-padding-block-container-text: var(--post-device-spacing-padding-block-9),
|
|
655
707
|
post-switch-padding-inline-handle: var(--post-core-dimension-4),
|
|
656
708
|
post-switch-border-radius-round: var(--post-device-border-radius-round),
|
|
657
709
|
post-switch-border-style-disabled: var(--post-core-border-style-dash),
|
|
@@ -659,6 +711,20 @@ $post-switch: (
|
|
|
659
711
|
post-switch-border-width: var(--post-device-border-width-alternative1),
|
|
660
712
|
);
|
|
661
713
|
|
|
714
|
+
$post-teaser: (
|
|
715
|
+
post-teaser-card-sm-image-height: var(--post-device-sizing-content-height-1),
|
|
716
|
+
post-teaser-card-sm-section-content-padding: var(--post-device-spacing-padding-5),
|
|
717
|
+
post-teaser-card-sm-section-content-gap: var(--post-device-spacing-gap-7),
|
|
718
|
+
post-teaser-card-sm-heading-font-size: var(--post-device-font-size-5),
|
|
719
|
+
post-teaser-card-sm-content-gap: var(--post-core-dimension-6),
|
|
720
|
+
post-teaser-card-lg-image-height: var(--post-device-sizing-content-height-2),
|
|
721
|
+
post-teaser-card-lg-section-content-padding: var(--post-device-spacing-padding-20),
|
|
722
|
+
post-teaser-card-lg-section-content-gap: var(--post-core-dimension-24),
|
|
723
|
+
post-teaser-card-lg-heading-font-size: var(--post-device-font-size-4),
|
|
724
|
+
post-teaser-card-lg-content-gap: var(--post-device-spacing-gap-block-3),
|
|
725
|
+
post-teaser-card-content-enabled-fg: var(--post-scheme-color-interactive-primary-enabled-fg1),
|
|
726
|
+
);
|
|
727
|
+
|
|
662
728
|
$post-text-area: (
|
|
663
729
|
post-textarea-enabled-bg: var(--post-scheme-color-interactive-input-enabled-bg),
|
|
664
730
|
post-textarea-enabled-fg: var(--post-scheme-color-interactive-input-enabled-fg),
|
|
@@ -780,9 +846,10 @@ $post-toast: (
|
|
|
780
846
|
|
|
781
847
|
$post-validation: (
|
|
782
848
|
post-validation-group-gap-inline: var(--post-device-spacing-gap-inline-10),
|
|
783
|
-
post-validation-group-
|
|
784
|
-
post-validation-group-icon-
|
|
785
|
-
post-validation-group-icon-
|
|
849
|
+
post-validation-group-icon-size: var(--post-device-sizing-interactive-icon-size4),
|
|
850
|
+
post-validation-group-icon-block-start: var(--post-core-dimension-2),
|
|
851
|
+
post-validation-group-icon-block-end: var(--post-core-dimension-3),
|
|
852
|
+
post-validation-group-padding-inline-start: var(--post-core-dimension-4),
|
|
786
853
|
post-validation-error: var(--post-scheme-color-signal-error-solo),
|
|
787
854
|
post-validation-success: var(--post-scheme-color-signal-success-solo),
|
|
788
855
|
post-validation-input-padding-block: var(--post-device-spacing-padding-block-5),
|
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
|
-
// Mon,
|
|
4
|
+
// Mon, 12 May 2025 10:18:55 GMT
|
|
5
5
|
|
|
6
6
|
:root {
|
|
7
7
|
--post-core-color-brand-postyellow: #ffcc00;
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
--post-core-color-colorless: rgba(255, 255, 255, 0);
|
|
52
52
|
--post-core-color-cargo-green: #00411c;
|
|
53
53
|
--post-core-color-cargo-blue: #aadcff;
|
|
54
|
-
--post-core-dimension-0:
|
|
54
|
+
--post-core-dimension-0: 0px;
|
|
55
55
|
--post-core-dimension-1: 1px;
|
|
56
56
|
--post-core-dimension-2: 2px;
|
|
57
57
|
--post-core-dimension-3: 3px;
|
|
@@ -94,7 +94,13 @@
|
|
|
94
94
|
--post-core-dimension-88: 88px;
|
|
95
95
|
--post-core-dimension-96: 96px;
|
|
96
96
|
--post-core-dimension-100: 100px;
|
|
97
|
+
--post-core-dimension-104: 104px;
|
|
97
98
|
--post-core-dimension-112: 112px;
|
|
99
|
+
--post-core-dimension-164: 164px;
|
|
100
|
+
--post-core-dimension-180: 180px;
|
|
101
|
+
--post-core-dimension-188: 188px;
|
|
102
|
+
--post-core-dimension-240: 240px;
|
|
103
|
+
--post-core-dimension-312: 312px;
|
|
98
104
|
--post-core-dimension-1280: 1280px;
|
|
99
105
|
--post-core-dimension-5-5: 5.5px;
|
|
100
106
|
--post-core-dimension-6-5: 6.5px;
|
|
@@ -111,28 +117,25 @@
|
|
|
111
117
|
--post-core-dimension-25-5: 25.5px;
|
|
112
118
|
--post-core-dimension-24-5: 24.5px;
|
|
113
119
|
--post-core-font-weight-400: 400;
|
|
114
|
-
--post-core-font-weight-500: 500;
|
|
115
120
|
--post-core-font-weight-700: 700;
|
|
116
121
|
--post-core-font-weight-900: 900;
|
|
117
|
-
--post-core-font-size-10:
|
|
118
|
-
--post-core-font-size-12:
|
|
119
|
-
--post-core-font-size-14:
|
|
120
|
-
--post-core-font-size-16:
|
|
121
|
-
--post-core-font-size-18:
|
|
122
|
-
--post-core-font-size-20:
|
|
123
|
-
--post-core-font-size-24:
|
|
124
|
-
--post-core-font-size-28:
|
|
125
|
-
--post-core-font-size-32:
|
|
126
|
-
--post-core-font-size-36:
|
|
127
|
-
--post-core-font-size-40:
|
|
122
|
+
--post-core-font-size-10: 0.625rem;
|
|
123
|
+
--post-core-font-size-12: 0.75rem;
|
|
124
|
+
--post-core-font-size-14: 0.875rem;
|
|
125
|
+
--post-core-font-size-16: 1rem;
|
|
126
|
+
--post-core-font-size-18: 1.125rem;
|
|
127
|
+
--post-core-font-size-20: 1.25rem;
|
|
128
|
+
--post-core-font-size-24: 1.5rem;
|
|
129
|
+
--post-core-font-size-28: 1.75rem;
|
|
130
|
+
--post-core-font-size-32: 2rem;
|
|
131
|
+
--post-core-font-size-36: 2.25rem;
|
|
132
|
+
--post-core-font-size-40: 2.5rem;
|
|
128
133
|
--post-core-line-height-100: 1;
|
|
129
134
|
--post-core-line-height-120: 1.2;
|
|
130
135
|
--post-core-line-height-150: 1.5;
|
|
131
136
|
--post-core-letter-spacing-default: 0.0012em;
|
|
132
|
-
--post-core-letter-spacing-none:
|
|
133
|
-
--post-core-font-family-
|
|
134
|
-
--post-core-font-family-swiss-post: 'Swiss Post Sans v005';
|
|
135
|
-
--post-core-font-family-caveat: Caveat;
|
|
137
|
+
--post-core-letter-spacing-none: 0px;
|
|
138
|
+
--post-core-font-family-swiss-post: 'Swiss Post Sans';
|
|
136
139
|
--post-core-elevation-1: 0 1px 2px 0 rgba(0,0,0,0.16), 0 0 2px 0 rgba(0,0,0,0.16);
|
|
137
140
|
--post-core-elevation-2: 0 2px 4px 0 rgba(0,0,0,0.16), 0 0 2px 0 rgba(0,0,0,0.16);
|
|
138
141
|
--post-core-elevation-3: 0 4px 8px 0 rgba(0,0,0,0.16), 0 0 2px 0 rgba(0,0,0,0.16);
|
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
|
-
// Mon,
|
|
4
|
+
// Mon, 12 May 2025 10:18:55 GMT
|
|
5
5
|
|
|
6
6
|
$post-desktop: (
|
|
7
7
|
post-device-font-size-1: var(--post-core-font-size-40),
|
|
@@ -57,6 +57,7 @@ $post-desktop: (
|
|
|
57
57
|
post-device-spacing-padding-17: var(--post-core-dimension-16),
|
|
58
58
|
post-device-spacing-padding-18: var(--post-core-dimension-0),
|
|
59
59
|
post-device-spacing-padding-19: var(--post-core-dimension-16-5),
|
|
60
|
+
post-device-spacing-padding-20: var(--post-core-dimension-24),
|
|
60
61
|
post-device-spacing-padding-inline-1: var(--post-core-dimension-14),
|
|
61
62
|
post-device-spacing-padding-inline-3: var(--post-core-dimension-16),
|
|
62
63
|
post-device-spacing-padding-inline-4: var(--post-core-dimension-12),
|
|
@@ -122,8 +123,11 @@ $post-desktop: (
|
|
|
122
123
|
post-device-sizing-icon-2: var(--post-core-dimension-30),
|
|
123
124
|
post-device-sizing-icon-3: var(--post-core-dimension-16),
|
|
124
125
|
post-device-sizing-logo-1: var(--post-core-dimension-72),
|
|
126
|
+
post-device-sizing-content-height-1: var(--post-core-dimension-164),
|
|
127
|
+
post-device-sizing-content-height-2: var(--post-core-dimension-312),
|
|
125
128
|
post-device-border-radius-1: var(--post-core-dimension-4),
|
|
126
129
|
post-device-border-radius-2: var(--post-core-dimension-8),
|
|
130
|
+
post-device-border-radius-3: var(--post-core-dimension-16),
|
|
127
131
|
post-device-border-radius-round: var(--post-core-dimension-100),
|
|
128
132
|
post-device-border-radius-focus: var(--post-core-dimension-4),
|
|
129
133
|
post-device-font-weight-bold: var(--post-core-font-weight-700),
|
|
@@ -144,6 +148,7 @@ $post-desktop: (
|
|
|
144
148
|
post-device-position-1: var(--post-core-dimension-40),
|
|
145
149
|
post-device-position-2: var(--post-core-dimension-16),
|
|
146
150
|
post-device-position-3: var(--post-core-dimension-48),
|
|
151
|
+
post-device-position-4: var(--post-core-dimension-32),
|
|
147
152
|
);
|
|
148
153
|
|
|
149
154
|
$post-tablet: (
|
|
@@ -200,6 +205,7 @@ $post-tablet: (
|
|
|
200
205
|
post-device-spacing-padding-17: var(--post-core-dimension-16),
|
|
201
206
|
post-device-spacing-padding-18: var(--post-core-dimension-0),
|
|
202
207
|
post-device-spacing-padding-19: var(--post-core-dimension-15),
|
|
208
|
+
post-device-spacing-padding-20: var(--post-core-dimension-24),
|
|
203
209
|
post-device-spacing-padding-inline-1: var(--post-core-dimension-14),
|
|
204
210
|
post-device-spacing-padding-inline-3: var(--post-core-dimension-12),
|
|
205
211
|
post-device-spacing-padding-inline-4: var(--post-core-dimension-12),
|
|
@@ -265,8 +271,11 @@ $post-tablet: (
|
|
|
265
271
|
post-device-sizing-icon-2: var(--post-core-dimension-24),
|
|
266
272
|
post-device-sizing-icon-3: var(--post-core-dimension-14),
|
|
267
273
|
post-device-sizing-logo-1: var(--post-core-dimension-64),
|
|
274
|
+
post-device-sizing-content-height-1: var(--post-core-dimension-180),
|
|
275
|
+
post-device-sizing-content-height-2: var(--post-core-dimension-240),
|
|
268
276
|
post-device-border-radius-1: var(--post-core-dimension-4),
|
|
269
277
|
post-device-border-radius-2: var(--post-core-dimension-8),
|
|
278
|
+
post-device-border-radius-3: var(--post-core-dimension-16),
|
|
270
279
|
post-device-border-radius-round: var(--post-core-dimension-100),
|
|
271
280
|
post-device-border-radius-focus: var(--post-core-dimension-4),
|
|
272
281
|
post-device-font-weight-bold: var(--post-core-font-weight-700),
|
|
@@ -287,6 +296,7 @@ $post-tablet: (
|
|
|
287
296
|
post-device-position-1: var(--post-core-dimension-40),
|
|
288
297
|
post-device-position-2: var(--post-core-dimension-16),
|
|
289
298
|
post-device-position-3: var(--post-core-dimension-48),
|
|
299
|
+
post-device-position-4: var(--post-core-dimension-24),
|
|
290
300
|
);
|
|
291
301
|
|
|
292
302
|
$post-mobile: (
|
|
@@ -343,6 +353,7 @@ $post-mobile: (
|
|
|
343
353
|
post-device-spacing-padding-17: var(--post-core-dimension-8),
|
|
344
354
|
post-device-spacing-padding-18: var(--post-core-dimension-4),
|
|
345
355
|
post-device-spacing-padding-19: var(--post-core-dimension-11),
|
|
356
|
+
post-device-spacing-padding-20: var(--post-core-dimension-16),
|
|
346
357
|
post-device-spacing-padding-inline-1: var(--post-core-dimension-14),
|
|
347
358
|
post-device-spacing-padding-inline-3: var(--post-core-dimension-12),
|
|
348
359
|
post-device-spacing-padding-inline-4: var(--post-core-dimension-12),
|
|
@@ -408,8 +419,11 @@ $post-mobile: (
|
|
|
408
419
|
post-device-sizing-icon-2: var(--post-core-dimension-24),
|
|
409
420
|
post-device-sizing-icon-3: var(--post-core-dimension-12),
|
|
410
421
|
post-device-sizing-logo-1: var(--post-core-dimension-56),
|
|
422
|
+
post-device-sizing-content-height-1: var(--post-core-dimension-180),
|
|
423
|
+
post-device-sizing-content-height-2: var(--post-core-dimension-188),
|
|
411
424
|
post-device-border-radius-1: var(--post-core-dimension-4),
|
|
412
425
|
post-device-border-radius-2: var(--post-core-dimension-8),
|
|
426
|
+
post-device-border-radius-3: var(--post-core-dimension-16),
|
|
413
427
|
post-device-border-radius-round: var(--post-core-dimension-100),
|
|
414
428
|
post-device-border-radius-focus: var(--post-core-dimension-4),
|
|
415
429
|
post-device-font-weight-bold: var(--post-core-font-weight-700),
|
|
@@ -430,4 +444,5 @@ $post-mobile: (
|
|
|
430
444
|
post-device-position-1: var(--post-core-dimension-16),
|
|
431
445
|
post-device-position-2: var(--post-core-dimension-16),
|
|
432
446
|
post-device-position-3: var(--post-core-dimension-48),
|
|
447
|
+
post-device-position-4: var(--post-core-dimension-16),
|
|
433
448
|
);
|
package/_elements.scss
CHANGED
package/_helpers.scss
CHANGED
package/_index.scss
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
// Do not edit manually
|
|
2
2
|
// This file was generated by the swisspost/design-system-tokens package
|
|
3
|
-
// Mon,
|
|
3
|
+
// Mon, 12 May 2025 10:18:55 GMT
|
|
4
4
|
|
|
5
5
|
@use './core';
|
|
6
6
|
@forward './scheme';
|
|
7
7
|
@forward './device';
|
|
8
8
|
@forward './channel';
|
|
9
|
+
@forward './palette';
|
|
9
10
|
@forward './theme';
|
|
10
11
|
@forward './elements';
|
|
11
12
|
@forward './components';
|
package/_palette.scss
ADDED
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
|
|
2
|
+
// Do not edit manually
|
|
3
|
+
// This file was generated by the swisspost/design-system-tokens package
|
|
4
|
+
// Mon, 12 May 2025 10:18:55 GMT
|
|
5
|
+
|
|
6
|
+
$post-default: (
|
|
7
|
+
post-palette-color-post-bg: var(--post-scheme-color-surface-default-bg),
|
|
8
|
+
post-palette-color-post-fg: var(--post-scheme-color-surface-default-fg),
|
|
9
|
+
post-palette-color-post-secondary: var(--post-scheme-color-surface-default-fg),
|
|
10
|
+
post-palette-color-post-secondary-bg: var(--post-scheme-color-surface-alternate-bg),
|
|
11
|
+
post-palette-color-post-bg-scheme: var(--post-scheme-accent-bg-scheme-1),
|
|
12
|
+
post-palette-color-cargo-bg: var(--post-cargo-scheme-color-surface-default-bg),
|
|
13
|
+
post-palette-color-cargo-fg: var(--post-cargo-scheme-color-surface-default-fg),
|
|
14
|
+
post-palette-color-cargo-secondary: var(--post-cargo-scheme-color-surface-default-fg),
|
|
15
|
+
post-palette-color-cargo-secondary-bg: var(--post-cargo-scheme-color-surface-alternate-bg),
|
|
16
|
+
post-palette-color-cargo-bg-scheme: var(--post-scheme-accent-bg-scheme-1),
|
|
17
|
+
);
|
|
18
|
+
|
|
19
|
+
$post-alternate: (
|
|
20
|
+
post-palette-color-post-bg: var(--post-scheme-color-surface-alternate-bg),
|
|
21
|
+
post-palette-color-post-fg: var(--post-scheme-color-surface-alternate-fg),
|
|
22
|
+
post-palette-color-post-secondary: var(--post-scheme-color-surface-alternate-fg),
|
|
23
|
+
post-palette-color-post-secondary-bg: var(--post-scheme-color-surface-default-bg),
|
|
24
|
+
post-palette-color-post-bg-scheme: var(--post-scheme-accent-bg-scheme-1),
|
|
25
|
+
post-palette-color-cargo-bg: var(--post-cargo-scheme-color-surface-alternate-bg),
|
|
26
|
+
post-palette-color-cargo-fg: var(--post-cargo-scheme-color-surface-alternate-fg),
|
|
27
|
+
post-palette-color-cargo-secondary: var(--post-cargo-scheme-color-surface-alternate-fg),
|
|
28
|
+
post-palette-color-cargo-secondary-bg: var(--post-cargo-scheme-color-surface-default-bg),
|
|
29
|
+
post-palette-color-cargo-bg-scheme: var(--post-scheme-accent-bg-scheme-1),
|
|
30
|
+
);
|
|
31
|
+
|
|
32
|
+
$post-accent: (
|
|
33
|
+
post-palette-color-post-bg: var(--post-scheme-color-surface-accent-bg),
|
|
34
|
+
post-palette-color-post-fg: var(--post-scheme-color-surface-accent-fg),
|
|
35
|
+
post-palette-color-post-secondary: var(--post-scheme-color-surface-accent-fg-accent),
|
|
36
|
+
post-palette-color-post-secondary-bg: var(--post-scheme-color-surface-accent-secondary-bg),
|
|
37
|
+
post-palette-color-post-bg-scheme: var(--post-scheme-accent-bg-scheme-3),
|
|
38
|
+
post-palette-color-cargo-bg: var(--post-cargo-scheme-color-surface-accent-bg),
|
|
39
|
+
post-palette-color-cargo-fg: var(--post-cargo-scheme-color-surface-accent-fg),
|
|
40
|
+
post-palette-color-cargo-secondary: var(--post-cargo-scheme-color-surface-accent-fg-accent),
|
|
41
|
+
post-palette-color-cargo-secondary-bg: var(--post-cargo-scheme-color-surface-accent-secondary-bg),
|
|
42
|
+
post-palette-color-cargo-bg-scheme: var(--post-scheme-accent-bg-scheme-4),
|
|
43
|
+
);
|
|
44
|
+
|
|
45
|
+
$post-brand: (
|
|
46
|
+
post-palette-color-post-bg: var(--post-scheme-color-surface-brand-bg),
|
|
47
|
+
post-palette-color-post-fg: var(--post-scheme-color-surface-brand-fg),
|
|
48
|
+
post-palette-color-post-secondary: var(--post-scheme-color-surface-brand-fg-accent),
|
|
49
|
+
post-palette-color-post-secondary-bg: var(--post-scheme-color-surface-brand-secondary-bg),
|
|
50
|
+
post-palette-color-post-bg-scheme: var(--post-scheme-accent-bg-scheme-4),
|
|
51
|
+
post-palette-color-cargo-bg: var(--post-cargo-scheme-color-surface-brand-bg),
|
|
52
|
+
post-palette-color-cargo-fg: var(--post-cargo-scheme-color-surface-brand-fg),
|
|
53
|
+
post-palette-color-cargo-secondary: var(--post-cargo-scheme-color-surface-brand-fg-accent),
|
|
54
|
+
post-palette-color-cargo-secondary-bg: var(--post-cargo-scheme-color-surface-brand-secondary-bg),
|
|
55
|
+
post-palette-color-cargo-bg-scheme: var(--post-scheme-accent-bg-scheme-3),
|
|
56
|
+
);
|
package/_palettes.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
|
-
// Mon,
|
|
4
|
+
// Mon, 12 May 2025 10:18:55 GMT
|
|
5
5
|
|
|
6
6
|
$post-palettes: (
|
|
7
7
|
post-palettes-color-default-bg: var(--post-theme-color-palettes-default-bg),
|
|
@@ -11,9 +11,9 @@ $post-palettes: (
|
|
|
11
11
|
post-palettes-color-alternate-fg: var(--post-theme-color-palettes-alternate-fg),
|
|
12
12
|
post-palettes-color-alternate-bg-scheme: var(--post-theme-palettes-bg-scheme-alternate),
|
|
13
13
|
post-palettes-color-brand-bg: var(--post-theme-color-palettes-brand-bg),
|
|
14
|
-
post-palettes-color-brand-fg: var(--post-theme-color-palettes-brand-fg),
|
|
14
|
+
post-palettes-color-brand-fg: var(--post-theme-color-palettes-brand-fg-accent),
|
|
15
15
|
post-palettes-color-brand-bg-scheme: var(--post-theme-palettes-bg-scheme-brand),
|
|
16
16
|
post-palettes-color-accent-bg: var(--post-theme-color-palettes-accent-bg),
|
|
17
|
-
post-palettes-color-accent-fg: var(--post-theme-color-palettes-accent-fg),
|
|
17
|
+
post-palettes-color-accent-fg: var(--post-theme-color-palettes-accent-fg-accent),
|
|
18
18
|
post-palettes-color-accent-bg-scheme: var(--post-theme-palettes-bg-scheme-emphasis),
|
|
19
19
|
);
|