@swisspost/design-system-tokens 9.0.0-next.4 → 9.0.0-next.5
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 +2 -0
- package/_channel.scss +1 -1
- package/_components.scss +71 -47
- package/_core.scss +5 -1
- package/_device.scss +7 -4
- package/_elements.scss +1 -1
- package/_helpers.scss +1 -1
- package/_index.scss +1 -1
- package/_palettes.scss +5 -5
- package/_scheme.scss +1 -1
- package/_theme.scss +1 -1
- package/_utilities.scss +1 -1
- package/package.json +1 -1
- package/tailwind/helpers.tailwind.js +1 -1
- package/tailwind/utilities.tailwind.js +1 -1
- package/tokens.json +492 -300
package/CHANGELOG.md
CHANGED
package/_channel.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, 18 Nov 2024 17:05:11 GMT
|
|
5
5
|
|
|
6
6
|
$post-edk: (
|
|
7
7
|
post-channel-sizing-interactive-height-filler: var(--post-core-dimension-24),
|
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, 18 Nov 2024 17:05:11 GMT
|
|
5
5
|
|
|
6
6
|
$post-accordion: (
|
|
7
7
|
post-accordion-header-padding-block-start-closed: var(--post-device-spacing-padding-19),
|
|
@@ -240,11 +240,11 @@ $post-container: (
|
|
|
240
240
|
post-grid-gutter-md: var(--post-core-dimension-16),
|
|
241
241
|
post-grid-gutter-sm: var(--post-core-dimension-16),
|
|
242
242
|
post-grid-gutter-xs: var(--post-core-dimension-16),
|
|
243
|
-
post-grid-
|
|
244
|
-
post-grid-
|
|
245
|
-
post-grid-
|
|
246
|
-
post-grid-
|
|
247
|
-
post-grid-
|
|
243
|
+
post-grid-padding-xl: var(--post-core-dimension-40),
|
|
244
|
+
post-grid-padding-lg: var(--post-core-dimension-40),
|
|
245
|
+
post-grid-padding-md: var(--post-core-dimension-40),
|
|
246
|
+
post-grid-padding-sm: var(--post-core-dimension-16),
|
|
247
|
+
post-grid-padding-xs: var(--post-core-dimension-16),
|
|
248
248
|
post-grid-max-width: var(--post-core-dimension-1280),
|
|
249
249
|
);
|
|
250
250
|
|
|
@@ -503,6 +503,15 @@ $post-radio-button: (
|
|
|
503
503
|
post-radio-button-label-padding-block: var(--post-device-spacing-padding-block-20),
|
|
504
504
|
);
|
|
505
505
|
|
|
506
|
+
$post-search-input: (
|
|
507
|
+
post-input-search-empty-padding-inline-end: var(--post-core-dimension-48),
|
|
508
|
+
post-input-search-filled-padding-inline-end: var(--post-core-dimension-80),
|
|
509
|
+
post-input-search-filled-gap-icon: var(--post-core-dimension-8),
|
|
510
|
+
post-input-search-label-empty-padding-inline-end: var(--post-core-dimension-50),
|
|
511
|
+
post-input-search-label-filled-padding-inline-end: var(--post-core-dimension-82),
|
|
512
|
+
post-input-search-icon-border-radius: var(--post-device-border-radius-focus),
|
|
513
|
+
);
|
|
514
|
+
|
|
506
515
|
$post-segmented-button: (
|
|
507
516
|
post-button-segmented-horizontal-border-radius: var(--post-device-border-radius-round),
|
|
508
517
|
post-button-segmented-vertical-border-radius: var(--post-device-border-radius-2),
|
|
@@ -526,33 +535,45 @@ $post-segmented-button: (
|
|
|
526
535
|
);
|
|
527
536
|
|
|
528
537
|
$post-select: (
|
|
529
|
-
post-select-enabled-bg: var(--post-scheme-color-interactive-primary-enabled-bg1),
|
|
530
|
-
post-select-enabled-fg: var(--post-scheme-color-interactive-primary-enabled-fg1),
|
|
531
|
-
post-select-hover-bg: var(--post-scheme-color-interactive-primary-hover-bg),
|
|
532
|
-
post-select-hover-fg: var(--post-scheme-color-interactive-primary-hover-fg1),
|
|
533
|
-
post-select-disabled-bg: var(--post-scheme-color-interactive-primary-disabled-bg),
|
|
534
|
-
post-select-disabled-fg: var(--post-scheme-color-interactive-primary-disabled-fg1),
|
|
535
|
-
post-select-selected-bg: var(--post-scheme-color-interactive-primary-selected-bg1),
|
|
536
|
-
post-select-selected-fg: var(--post-scheme-color-interactive-primary-selected-fg1),
|
|
537
|
-
post-select-
|
|
538
|
-
post-select-
|
|
539
|
-
post-select-
|
|
540
|
-
post-select-
|
|
541
|
-
post-select-
|
|
542
|
-
post-select-signal-
|
|
543
|
-
post-select-
|
|
544
|
-
post-select-
|
|
545
|
-
post-select-
|
|
546
|
-
post-select-
|
|
547
|
-
post-select-
|
|
548
|
-
post-select-padding-
|
|
549
|
-
post-select-
|
|
550
|
-
post-select-
|
|
551
|
-
post-select-padding-inline-text-assist: var(--post-device-spacing-padding-2),
|
|
552
|
-
post-select-icon-padding-droppdow-inner: var(--post-device-spacing-padding-15),
|
|
553
|
-
post-select-icon-signal: var(--post-device-sizing-notification-1),
|
|
538
|
+
post-select-color-enabled-bg: var(--post-scheme-color-interactive-primary-enabled-bg1),
|
|
539
|
+
post-select-color-enabled-fg: var(--post-scheme-color-interactive-primary-enabled-fg1),
|
|
540
|
+
post-select-color-hover-bg: var(--post-scheme-color-interactive-primary-hover-bg),
|
|
541
|
+
post-select-color-hover-fg: var(--post-scheme-color-interactive-primary-hover-fg1),
|
|
542
|
+
post-select-color-disabled-bg: var(--post-scheme-color-interactive-primary-disabled-bg),
|
|
543
|
+
post-select-color-disabled-fg: var(--post-scheme-color-interactive-primary-disabled-fg1),
|
|
544
|
+
post-select-color-selected-bg: var(--post-scheme-color-interactive-primary-selected-bg1),
|
|
545
|
+
post-select-color-selected-fg: var(--post-scheme-color-interactive-primary-selected-fg1),
|
|
546
|
+
post-select-color-helptext-fg: var(--post-scheme-color-interactive-primary-enabled-fg2),
|
|
547
|
+
post-select-color-enabled-border: var(--post-scheme-color-interactive-primary-enabled-stroke),
|
|
548
|
+
post-select-color-hover-border: var(--post-scheme-color-interactive-primary-hover-stroke),
|
|
549
|
+
post-select-color-disabled-border: var(--post-scheme-color-interactive-primary-disabled-stroke),
|
|
550
|
+
post-select-color-selected-border: var(--post-scheme-color-interactive-primary-selected-stroke1),
|
|
551
|
+
post-select-color-signal-error: var(--post-scheme-color-signal-error-dark),
|
|
552
|
+
post-select-color-signal-success: var(--post-scheme-color-signal-success-dark),
|
|
553
|
+
post-select-gap-inline-icon: var(--post-device-spacing-gap-1),
|
|
554
|
+
post-select-padding-block-assist: var(--post-device-spacing-padding-block-5),
|
|
555
|
+
post-select-padding-inline-start: var(--post-device-spacing-padding-inline-1),
|
|
556
|
+
post-select-padding-inline-end: var(--post-core-dimension-48),
|
|
557
|
+
post-select-padding-inline-assist: var(--post-device-spacing-padding-2),
|
|
558
|
+
post-select-sizing-icon: var(--post-device-sizing-notification-1),
|
|
559
|
+
post-select-sizing-height: var(--post-device-sizing-interactive-button-height-6),
|
|
554
560
|
post-select-border-radius: var(--post-device-border-radius-1),
|
|
555
561
|
post-select-border-width: var(--post-device-border-width-default),
|
|
562
|
+
post-select-border-style-default: var(--post-core-border-style-solid),
|
|
563
|
+
post-select-border-style-disabled: var(--post-core-border-style-dash),
|
|
564
|
+
post-select-empty-padding-block: var(--post-device-spacing-padding-block-1),
|
|
565
|
+
post-select-label-empty-padding-block-start: var(--post-device-spacing-padding-block-28),
|
|
566
|
+
post-select-label-empty-padding-inline-start: var(--post-device-spacing-padding-5),
|
|
567
|
+
post-select-label-empty-padding-inline-end: var(--post-core-dimension-50),
|
|
568
|
+
post-select-label-validated-padding-inline-end: var(--post-core-dimension-82),
|
|
569
|
+
post-select-label-filled-padding-block-start: var(--post-device-spacing-padding-block-30),
|
|
570
|
+
post-select-label-filled-font-size: var(--post-device-font-size-10),
|
|
571
|
+
post-select-validation-icon-position-inline-end: var(--post-device-position-3),
|
|
572
|
+
post-select-filled-padding-block-start: var(--post-device-spacing-padding-block-29),
|
|
573
|
+
post-select-filled-padding-block-end: var(--post-device-spacing-padding-block-3),
|
|
574
|
+
post-select-assist-font-size: var(--post-device-font-size-10),
|
|
575
|
+
post-select-validated-padding-inline-end: var(--post-core-dimension-80),
|
|
576
|
+
post-select-icon-position-inline-end: var(--post-device-position-2),
|
|
556
577
|
);
|
|
557
578
|
|
|
558
579
|
$post-snackbar: (
|
|
@@ -646,29 +667,31 @@ $post-text-area: (
|
|
|
646
667
|
post-textarea-hover-fg: var(--post-scheme-color-interactive-primary-hover-fg1),
|
|
647
668
|
post-textarea-disabled-bg: var(--post-scheme-color-interactive-primary-disabled-bg),
|
|
648
669
|
post-textarea-disabled-fg: var(--post-scheme-color-interactive-primary-disabled-fg1),
|
|
649
|
-
post-textarea-selected-bg: var(--post-scheme-color-interactive-primary-selected-bg1),
|
|
650
|
-
post-textarea-selected-fg: var(--post-scheme-color-interactive-primary-selected-fg1),
|
|
651
670
|
post-textarea-enabled-border: var(--post-scheme-color-interactive-primary-enabled-stroke),
|
|
652
671
|
post-textarea-hover-border: var(--post-scheme-color-interactive-primary-hover-stroke),
|
|
653
672
|
post-textarea-disabled-border: var(--post-scheme-color-interactive-primary-disabled-stroke),
|
|
654
|
-
post-textarea-
|
|
655
|
-
post-textarea-
|
|
656
|
-
post-textarea-
|
|
657
|
-
post-textarea-spacing-padding-block-textarea-top: var(--post-device-spacing-padding-8),
|
|
658
|
-
post-textarea-spacing-padding-inline-text-assist: var(--post-device-spacing-padding-2),
|
|
673
|
+
post-textarea-gap-inline: var(--post-device-spacing-gap-1),
|
|
674
|
+
post-textarea-padding-block-assist: var(--post-device-spacing-padding-block-5),
|
|
675
|
+
post-textarea-padding-block-textarea-top: var(--post-device-spacing-padding-8),
|
|
659
676
|
post-textarea-padding-block-empty: var(--post-device-spacing-padding-3),
|
|
660
|
-
post-textarea-padding-
|
|
661
|
-
post-textarea-padding-block-end-filled: var(--post-device-spacing-padding-3),
|
|
677
|
+
post-textarea-padding-inline-assist: var(--post-device-spacing-padding-2),
|
|
662
678
|
post-textarea-padding-inline-start: var(--post-device-spacing-padding-inline-1),
|
|
663
679
|
post-textarea-padding-inline-end: var(--post-device-spacing-padding-3),
|
|
680
|
+
post-textarea-filled-padding-block-start: var(--post-device-spacing-padding-block-26),
|
|
681
|
+
post-textarea-filled-padding-block-end: var(--post-device-spacing-padding-3),
|
|
664
682
|
post-textarea-sizing-icon: var(--post-device-sizing-notification-1),
|
|
683
|
+
post-textarea-sizing-min-height: var(--post-core-dimension-88),
|
|
665
684
|
post-textarea-border-radius: var(--post-device-border-radius-1),
|
|
666
685
|
post-textarea-border-style-enabled: var(--post-core-border-style-solid),
|
|
667
686
|
post-textarea-border-style-disabled: var(--post-core-border-style-dash),
|
|
668
687
|
post-textarea-border-width: var(--post-device-border-width-default),
|
|
669
|
-
post-textarea-label-padding-inline-start
|
|
670
|
-
post-textarea-label-padding-inline-end
|
|
671
|
-
post-textarea-label-padding-block-start
|
|
688
|
+
post-textarea-label-empty-padding-inline-start: var(--post-device-spacing-padding-5),
|
|
689
|
+
post-textarea-label-empty-padding-inline-end: var(--post-device-spacing-padding-inline-4),
|
|
690
|
+
post-textarea-label-empty-padding-block-start: var(--post-device-spacing-padding-block-27),
|
|
691
|
+
post-textarea-signal-error: var(--post-scheme-color-signal-error-dark),
|
|
692
|
+
post-textarea-signal-success: var(--post-scheme-color-signal-success-dark),
|
|
693
|
+
post-textarea-position-inline-end-resize: var(--post-core-dimension-6),
|
|
694
|
+
post-textarea-position-block-end-resize: var(--post-core-dimension-6),
|
|
672
695
|
);
|
|
673
696
|
|
|
674
697
|
$post-text-highlighted: (
|
|
@@ -698,6 +721,8 @@ $post-text-input: (
|
|
|
698
721
|
post-input-gap-inline-1: var(--post-device-spacing-gap-1),
|
|
699
722
|
post-input-gap-inline-2: var(--post-device-spacing-gap-inline-4),
|
|
700
723
|
post-input-padding-block-assist: var(--post-device-spacing-padding-block-5),
|
|
724
|
+
post-input-padding-block-start: var(--post-device-spacing-padding-block-29),
|
|
725
|
+
post-input-padding-block-end: var(--post-device-spacing-padding-block-3),
|
|
701
726
|
post-input-padding-inline-start: var(--post-device-spacing-padding-inline-1),
|
|
702
727
|
post-input-padding-inline-end: var(--post-device-spacing-padding-3),
|
|
703
728
|
post-input-padding-inline-assist: var(--post-device-spacing-padding-2),
|
|
@@ -707,17 +732,16 @@ $post-text-input: (
|
|
|
707
732
|
post-input-border-width: var(--post-device-border-width-default),
|
|
708
733
|
post-input-border-style-default: var(--post-core-border-style-solid),
|
|
709
734
|
post-input-border-style-disabled: var(--post-core-border-style-dash),
|
|
710
|
-
post-input-
|
|
735
|
+
post-input-standalone-padding-block: var(--post-device-spacing-padding-block-1),
|
|
711
736
|
post-input-label-empty-padding-block-start: var(--post-device-spacing-padding-block-28),
|
|
712
737
|
post-input-label-empty-padding-inline-start: var(--post-device-spacing-padding-5),
|
|
713
738
|
post-input-label-empty-padding-inline-end: var(--post-device-spacing-padding-inline-4),
|
|
714
|
-
post-input-label-validated-padding-inline-end: var(--post-core-dimension-
|
|
739
|
+
post-input-label-validated-padding-inline-end: var(--post-core-dimension-50),
|
|
715
740
|
post-input-label-filled-padding-block-start: var(--post-device-spacing-padding-block-30),
|
|
716
741
|
post-input-label-filled-font-size: var(--post-device-font-size-10),
|
|
717
742
|
post-input-validation-icon-position-inline-end: var(--post-device-position-2),
|
|
718
|
-
post-input-filled-padding-block-start: var(--post-device-spacing-padding-block-29),
|
|
719
|
-
post-input-filled-padding-block-end: var(--post-device-spacing-padding-block-3),
|
|
720
743
|
post-input-assist-font-size: var(--post-device-font-size-10),
|
|
744
|
+
post-input-validated-padding-inline-end: var(--post-core-dimension-48),
|
|
721
745
|
);
|
|
722
746
|
|
|
723
747
|
$post-toast: (
|
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, 18 Nov 2024 17:05:11 GMT
|
|
5
5
|
|
|
6
6
|
:root {
|
|
7
7
|
--post-core-color-brand-postyellow: #ffcc00;
|
|
@@ -82,12 +82,16 @@
|
|
|
82
82
|
--post-core-dimension-34: 34px;
|
|
83
83
|
--post-core-dimension-36: 36px;
|
|
84
84
|
--post-core-dimension-40: 40px;
|
|
85
|
+
--post-core-dimension-46: 46px;
|
|
85
86
|
--post-core-dimension-48: 48px;
|
|
87
|
+
--post-core-dimension-50: 50px;
|
|
86
88
|
--post-core-dimension-56: 56px;
|
|
87
89
|
--post-core-dimension-64: 64px;
|
|
88
90
|
--post-core-dimension-72: 72px;
|
|
89
91
|
--post-core-dimension-78: 78px;
|
|
90
92
|
--post-core-dimension-80: 80px;
|
|
93
|
+
--post-core-dimension-82: 82px;
|
|
94
|
+
--post-core-dimension-88: 88px;
|
|
91
95
|
--post-core-dimension-96: 96px;
|
|
92
96
|
--post-core-dimension-100: 100px;
|
|
93
97
|
--post-core-dimension-112: 112px;
|
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, 18 Nov 2024 17:05:11 GMT
|
|
5
5
|
|
|
6
6
|
$post-desktop: (
|
|
7
7
|
post-device-font-size-1: var(--post-core-font-size-40),
|
|
@@ -177,7 +177,8 @@ $post-desktop: (
|
|
|
177
177
|
post-device-grid-sizing-container-max-width: var(--post-core-dimension-1280),
|
|
178
178
|
post-device-grid-padding-inline-container: var(--post-core-dimension-40),
|
|
179
179
|
post-device-position-1: var(--post-core-dimension-32),
|
|
180
|
-
post-device-position-2: var(--post-core-dimension-
|
|
180
|
+
post-device-position-2: var(--post-core-dimension-14),
|
|
181
|
+
post-device-position-3: var(--post-core-dimension-46),
|
|
181
182
|
);
|
|
182
183
|
|
|
183
184
|
$post-tablet: (
|
|
@@ -354,7 +355,8 @@ $post-tablet: (
|
|
|
354
355
|
post-device-grid-sizing-container-max-width: var(--post-core-dimension-1280),
|
|
355
356
|
post-device-grid-padding-inline-container: var(--post-core-dimension-24),
|
|
356
357
|
post-device-position-1: var(--post-core-dimension-24),
|
|
357
|
-
post-device-position-2: var(--post-core-dimension-
|
|
358
|
+
post-device-position-2: var(--post-core-dimension-14),
|
|
359
|
+
post-device-position-3: var(--post-core-dimension-46),
|
|
358
360
|
);
|
|
359
361
|
|
|
360
362
|
$post-mobile: (
|
|
@@ -531,5 +533,6 @@ $post-mobile: (
|
|
|
531
533
|
post-device-grid-sizing-container-max-width: var(--post-core-dimension-1280),
|
|
532
534
|
post-device-grid-padding-inline-container: var(--post-core-dimension-16),
|
|
533
535
|
post-device-position-1: var(--post-core-dimension-16),
|
|
534
|
-
post-device-position-2: var(--post-core-dimension-
|
|
536
|
+
post-device-position-2: var(--post-core-dimension-14),
|
|
537
|
+
post-device-position-3: var(--post-core-dimension-46),
|
|
535
538
|
);
|
package/_elements.scss
CHANGED
package/_helpers.scss
CHANGED
package/_index.scss
CHANGED
package/_palettes.scss
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
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, 18 Nov 2024 17:05:11 GMT
|
|
5
5
|
|
|
6
6
|
$post-palettes: (
|
|
7
7
|
post-palettes-color-default-bg: var(--post-theme-color-palettes-default-bg),
|
|
8
8
|
post-palettes-color-default-fg: var(--post-theme-color-palettes-default-fg),
|
|
9
|
+
post-palettes-color-default-bg-scheme: var(--post-theme-palettes-bg-scheme-default),
|
|
9
10
|
post-palettes-color-alternate-bg: var(--post-theme-color-palettes-alternate-bg),
|
|
10
11
|
post-palettes-color-alternate-fg: var(--post-theme-color-palettes-alternate-fg),
|
|
12
|
+
post-palettes-color-alternate-bg-scheme: var(--post-theme-palettes-bg-scheme-alternate),
|
|
11
13
|
post-palettes-color-brand-bg: var(--post-theme-color-palettes-brand-bg),
|
|
12
14
|
post-palettes-color-brand-fg: var(--post-theme-color-palettes-brand-fg),
|
|
15
|
+
post-palettes-color-brand-bg-scheme: var(--post-theme-palettes-bg-scheme-brand),
|
|
13
16
|
post-palettes-color-accent-bg: var(--post-theme-color-palettes-accent-bg),
|
|
14
17
|
post-palettes-color-accent-fg: var(--post-theme-color-palettes-accent-fg),
|
|
15
|
-
post-
|
|
16
|
-
post-helper-color-alternate-bg-scheme: var(--post-theme-palettes-bg-scheme-alternate),
|
|
17
|
-
post-helper-color-brand-bg-scheme: var(--post-theme-palettes-bg-scheme-brand),
|
|
18
|
-
post-helper-color-accent-bg-scheme: var(--post-theme-palettes-bg-scheme-emphasis),
|
|
18
|
+
post-palettes-color-accent-bg-scheme: var(--post-theme-palettes-bg-scheme-emphasis),
|
|
19
19
|
);
|
package/_scheme.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, 18 Nov 2024 17:05:11 GMT
|
|
5
5
|
|
|
6
6
|
$post-light: (
|
|
7
7
|
post-scheme-color-signal-success-dark: var(--post-core-color-notification-green),
|
package/_theme.scss
CHANGED
package/_utilities.scss
CHANGED
package/package.json
CHANGED