@swisspost/design-system-tokens 10.0.0-next.54 → 10.0.0-next.56

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.
Files changed (20) hide show
  1. package/CHANGELOG.md +4 -1
  2. package/_channel.scss +1 -1
  3. package/_components.scss +129 -5
  4. package/_core.scss +3 -1
  5. package/_device.scss +25 -1
  6. package/_elements.scss +1 -1
  7. package/_helpers.scss +1 -1
  8. package/_index.scss +1 -1
  9. package/_palette.scss +1 -1
  10. package/_scheme.scss +3 -1
  11. package/_schemestatic.scss +1 -1
  12. package/_theme.scss +1 -1
  13. package/_utilities-formatted.scss +1 -1
  14. package/_utilities.scss +1 -1
  15. package/package.json +3 -3
  16. package/tailwind/helpers.tailwind.css +1 -1
  17. package/tailwind/helpers.tailwind.js +1 -1
  18. package/tailwind/utilities.tailwind.css +1 -1
  19. package/tailwind/utilities.tailwind.js +1 -1
  20. package/tokens.json +954 -504
package/CHANGELOG.md CHANGED
@@ -1,5 +1,9 @@
1
1
  # @swisspost/design-system-tokens
2
2
 
3
+ ## 10.0.0-next.56
4
+
5
+ ## 10.0.0-next.55
6
+
3
7
  ## 10.0.0-next.54
4
8
 
5
9
  ## 10.0.0-next.53
@@ -51,7 +55,6 @@
51
55
  ```
52
56
 
53
57
  Also renamed the following CSS custom properties:
54
-
55
58
  - `--post-current-palette-fg` → `--post-current-fg`
56
59
  - `--post-current-palette-bg` → `--post-current-bg` (by [@alizedebray](https://github.com/alizedebray) with [#5250](https://github.com/swisspost/design-system/pull/5250))
57
60
 
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, 10 Nov 2025 13:42:35 GMT
4
+ // Mon, 05 Jan 2026 08:23:21 GMT
5
5
 
6
6
  $post-edk: (
7
7
  keep: undefined,
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, 10 Nov 2025 13:42:35 GMT
4
+ // Mon, 05 Jan 2026 08:23:21 GMT
5
5
 
6
6
  $post-accordion: (
7
7
  post-accordion-header-padding-block-closed: var(--post-device-spacing-padding-19),
@@ -327,6 +327,80 @@ $post-container: (
327
327
  post-grid-max-width: var(--post-core-dimension-1280),
328
328
  );
329
329
 
330
+ $post-datepicker: (
331
+ post-datepicker-header-color-bg: var(--post-core-color-sandgrey-012),
332
+ post-datepicker-header-dropdown-color-enabled-fg: var(--post-scheme-color-interactive-button-tertiary-enabled-fg),
333
+ post-datepicker-header-dropdown-color-hovered-fg: var(--post-scheme-color-interactive-button-tertiary-hover-fg),
334
+ post-datepicker-header-dropdown-color-disabled-fg: var(--post-scheme-color-interactive-button-tertiary-disabled-fg),
335
+ post-datepicker-header-dropdown-color-disabled-border: var(--post-scheme-color-interactive-button-tertiary-disabled-stroke),
336
+ post-datepicker-header-dropdown-gap: var(--post-device-spacing-gap-3),
337
+ post-datepicker-header-dropdown-padding-inline-start: var(--post-device-spacing-padding-15),
338
+ post-datepicker-header-weekdays-color: var(--post-scheme-color-surface-brand-fg),
339
+ post-datepicker-header-weekdays-padding-block-start: var(--post-device-spacing-padding-13),
340
+ post-datepicker-header-weekdays-padding-block-end: var(--post-device-spacing-padding-5),
341
+ post-datepicker-header-weekdays-padding-inline: var(--post-device-spacing-padding-15),
342
+ post-datepicker-header-nav-padding: var(--post-device-spacing-padding-15),
343
+ post-datepicker-header-chevrons-gap: var(--post-device-spacing-gap-inline-4),
344
+ post-datepicker-grid-color-enabled-bg: var(--post-scheme-color-surface-accent1-bg),
345
+ post-datepicker-grid-day-cell-element-color-enabled-fg: var(--post-scheme-color-interactive-primary-enabled-fg1),
346
+ post-datepicker-grid-day-cell-element-color-hovered-bg: var(--post-scheme-color-interactive-primary-hover-bg2),
347
+ post-datepicker-grid-day-cell-element-color-hovered-fg: var(--post-scheme-color-interactive-primary-hover-fg3),
348
+ post-datepicker-grid-day-cell-element-color-disabled-fg: var(--post-scheme-color-interactive-primary-disabled-fg1),
349
+ post-datepicker-grid-day-cell-element-color-disabled-border: var(--post-scheme-color-interactive-primary-disabled-stroke),
350
+ post-datepicker-grid-day-cell-element-color-selected-bg: var(--post-scheme-color-interactive-primary-selected-bg4),
351
+ post-datepicker-grid-day-cell-element-color-selected-fg: var(--post-scheme-color-interactive-primary-selected-fg3),
352
+ post-datepicker-grid-day-cell-element-color-selected-border: var(--post-scheme-color-interactive-primary-selected-stroke1),
353
+ post-datepicker-grid-day-cell-element-current-color-enabled-border: var(--post-scheme-color-interactive-primary-enabled-stroke),
354
+ post-datepicker-grid-day-cell-element-current-color-hovered-fg: var(--post-scheme-color-interactive-primary-hover-fg1),
355
+ post-datepicker-grid-day-cell-element-current-color-hovered-border: var(--post-scheme-color-interactive-primary-hover-stroke),
356
+ post-datepicker-grid-day-cell-element-disabled-padding: var(--post-device-spacing-padding-12),
357
+ post-datepicker-grid-day-cell-size: var(--post-core-dimension-40),
358
+ post-datepicker-grid-day-range-in-range-container-color-selected-bg: var(--post-scheme-color-interactive-primary-selected-bg3),
359
+ post-datepicker-grid-day-range-in-range-container-color-selected-border: var(--post-scheme-color-interactive-primary-selected-stroke1),
360
+ post-datepicker-grid-day-range-in-range-container-border-radius: var(--post-device-border-radius-round),
361
+ post-datepicker-grid-day-range-in-range-container-border-width: var(--post-device-border-width-default),
362
+ post-datepicker-grid-month-cell-element-color-enabled-fg: var(--post-scheme-color-interactive-primary-enabled-fg1),
363
+ post-datepicker-grid-month-cell-element-color-hovered-bg: var(--post-scheme-color-interactive-primary-hover-bg2),
364
+ post-datepicker-grid-month-cell-element-color-hovered-fg: var(--post-scheme-color-interactive-primary-hover-fg3),
365
+ post-datepicker-grid-month-cell-element-color-disabled-fg: var(--post-scheme-color-interactive-primary-disabled-fg1),
366
+ post-datepicker-grid-month-cell-element-color-disabled-border: var(--post-scheme-color-interactive-primary-disabled-stroke),
367
+ post-datepicker-grid-month-cell-element-color-selected-bg: var(--post-scheme-color-interactive-primary-selected-bg4),
368
+ post-datepicker-grid-month-cell-element-color-selected-fg: var(--post-scheme-color-interactive-primary-selected-fg3),
369
+ post-datepicker-grid-month-cell-element-color-selected-border: var(--post-scheme-color-interactive-primary-selected-stroke1),
370
+ post-datepicker-grid-month-cell-element-current-color-enabled-border: var(--post-scheme-color-interactive-primary-enabled-stroke),
371
+ post-datepicker-grid-month-cell-element-current-color-hovered-fg: var(--post-scheme-color-interactive-primary-hover-fg1),
372
+ post-datepicker-grid-month-cell-element-current-color-hovered-border: var(--post-scheme-color-interactive-primary-hover-stroke),
373
+ post-datepicker-grid-month-cell-width: var(--post-core-dimension-64),
374
+ post-datepicker-grid-month-cell-height: var(--post-core-dimension-40),
375
+ post-datepicker-grid-month-gap-inline: var(--post-device-spacing-gap-inline-8),
376
+ post-datepicker-grid-year-cell-element-color-enabled-fg: var(--post-scheme-color-interactive-primary-enabled-fg1),
377
+ post-datepicker-grid-year-cell-element-color-hovered-bg: var(--post-scheme-color-interactive-primary-hover-bg2),
378
+ post-datepicker-grid-year-cell-element-color-hovered-fg: var(--post-scheme-color-interactive-primary-hover-fg3),
379
+ post-datepicker-grid-year-cell-element-color-disabled-fg: var(--post-scheme-color-interactive-primary-disabled-fg1),
380
+ post-datepicker-grid-year-cell-element-color-disabled-border: var(--post-scheme-color-interactive-primary-disabled-stroke),
381
+ post-datepicker-grid-year-cell-element-color-selected-bg: var(--post-scheme-color-interactive-primary-selected-bg4),
382
+ post-datepicker-grid-year-cell-element-color-selected-fg: var(--post-scheme-color-interactive-primary-selected-fg3),
383
+ post-datepicker-grid-year-cell-element-color-selected-border: var(--post-scheme-color-interactive-primary-selected-stroke1),
384
+ post-datepicker-grid-year-cell-element-current-color-enabled-border: var(--post-scheme-color-interactive-primary-enabled-stroke),
385
+ post-datepicker-grid-year-cell-element-current-color-hovered-fg: var(--post-scheme-color-interactive-primary-hover-fg1),
386
+ post-datepicker-grid-year-cell-element-current-color-hovered-border: var(--post-scheme-color-interactive-primary-hover-stroke),
387
+ post-datepicker-grid-year-cell-width: var(--post-core-dimension-64),
388
+ post-datepicker-grid-year-cell-height: var(--post-core-dimension-40),
389
+ post-datepicker-grid-year-gap-inline: var(--post-device-spacing-gap-inline-8),
390
+ post-datepicker-grid-min-height: var(--post-core-dimension-176),
391
+ post-datepicker-grid-padding: var(--post-device-spacing-padding-15),
392
+ post-datepicker-grid-cell-element-border-radius: var(--post-device-border-radius-round),
393
+ post-datepicker-width: var(--post-core-dimension-296),
394
+ post-datepicker-input-icons-gap-inline: var(--post-device-spacing-gap-inline-8),
395
+ post-datepicker-border-radius: var(--post-device-border-radius-1),
396
+ );
397
+
398
+ $post-divider: (
399
+ post-divider-border: var(--post-scheme-color-divider-border),
400
+ post-divider-margin-block: var(--post-device-spacing-padding-15),
401
+ post-divider-border-width: var(--post-device-border-width-default),
402
+ );
403
+
330
404
  $post-dropdown: (
331
405
  post-dropdown-multi-select-menu-category-title-padding-block-outer: var(--post-device-spacing-padding-block-14),
332
406
  post-dropdown-multi-select-menu-category-title-padding-block-inner: var(--post-device-spacing-padding-block-15),
@@ -577,6 +651,15 @@ $post-number-input: (
577
651
  post-number-input-field-padding-inline: var(--post-device-spacing-padding-inline-1),
578
652
  );
579
653
 
654
+ $post-overlay-element: (
655
+ post-overlay-element-arrow-size: var(--post-device-sizing-overlay-element-arrow),
656
+ post-overlay-element-arrow-border-radius: var(--post-device-border-radius-4),
657
+ post-overlay-element-arrow-border-width: var(--post-device-border-width-alternative1),
658
+ post-overlay-element-arrow-color-border: var(--post-scheme-color-surface-accent-fg),
659
+ post-overlay-element-arrow-color-bg: var(--post-scheme-color-surface-accent-bg),
660
+ post-overlay-element-elevation: var(--post-core-elevation-3),
661
+ );
662
+
580
663
  $post-palettes: (
581
664
  post-palettes-bg: var(--post-palette-color-bg),
582
665
  post-palettes-fg: var(--post-palette-color-fg),
@@ -646,6 +729,7 @@ $post-radio-button: (
646
729
  post-radio-button-small-icon-container-padding: var(--post-device-spacing-padding-14),
647
730
  post-radio-button-small-padding-block: var(--post-device-spacing-padding-21),
648
731
  post-radio-button-small-label-padding-block: var(--post-device-spacing-padding-13),
732
+ post-radio-button-small-label-font-size: var(--post-device-font-size-9),
649
733
  post-radio-button-small-group-gap-block: var(--post-device-spacing-gap-9),
650
734
  post-radio-button-small-group-items-gap-block: var(--post-device-spacing-gap-1),
651
735
  post-radio-button-small-group-items-gap-inline: var(--post-device-spacing-gap-10),
@@ -815,6 +899,41 @@ $post-switch: (
815
899
  post-switch-border-width: var(--post-device-border-width-alternative1),
816
900
  );
817
901
 
902
+ $post-tag: (
903
+ post-tag-neutral-color-fg: var(--post-scheme-color-surface-default-fg),
904
+ post-tag-neutral-color-border: var(--post-scheme-color-surface-default-fg),
905
+ post-tag-neutral-color-icon: var(--post-scheme-color-surface-default-fg),
906
+ post-tag-info-color-fg: var(--post-scheme-color-signal-neutral-dark),
907
+ post-tag-info-color-bg: var(--post-scheme-color-signal-information-light),
908
+ post-tag-info-color-border: var(--post-scheme-color-signal-information-dark),
909
+ post-tag-info-color-icon: var(--post-scheme-color-signal-information-dark),
910
+ post-tag-success-color-fg: var(--post-scheme-color-signal-neutral-dark),
911
+ post-tag-success-color-bg: var(--post-scheme-color-signal-success-light),
912
+ post-tag-success-color-border: var(--post-scheme-color-signal-success-dark),
913
+ post-tag-success-color-icon: var(--post-scheme-color-signal-success-dark),
914
+ post-tag-warning-color-fg: var(--post-scheme-color-signal-neutral-dark),
915
+ post-tag-warning-color-bg: var(--post-scheme-color-signal-warning-light),
916
+ post-tag-warning-color-border: var(--post-scheme-color-signal-warning-dark),
917
+ post-tag-warning-color-icon: var(--post-scheme-color-signal-warning-dark),
918
+ post-tag-error-color-fg: var(--post-scheme-color-signal-neutral-dark),
919
+ post-tag-error-color-bg: var(--post-scheme-color-signal-error-light),
920
+ post-tag-error-color-border: var(--post-scheme-color-signal-error-dark),
921
+ post-tag-error-color-icon: var(--post-scheme-color-signal-error-dark),
922
+ post-tag-border-radius: var(--post-device-border-radius-1),
923
+ post-tag-large-height: var(--post-device-sizing-interactive-tag-large-height),
924
+ post-tag-large-font-size: var(--post-device-font-size-8),
925
+ post-tag-large-padding-inline: var(--post-device-spacing-padding-15),
926
+ post-tag-large-gap-inline: var(--post-device-spacing-gap-3),
927
+ post-tag-large-icon-size: var(--post-device-sizing-interactive-tag-large-icon-size),
928
+ post-tag-small-height: var(--post-device-sizing-interactive-tag-small-height),
929
+ post-tag-small-font-size: var(--post-device-font-size-9),
930
+ post-tag-small-gap-inline: var(--post-device-spacing-gap-3),
931
+ post-tag-small-padding-inline: var(--post-device-spacing-padding-inline-12),
932
+ post-tag-small-icon-size: var(--post-device-sizing-interactive-tag-small-icon-size),
933
+ post-tag-border-width: var(--post-device-border-width-default),
934
+ post-tag-border-style: var(--post-core-border-style-solid),
935
+ );
936
+
818
937
  $post-teaser: (
819
938
  post-teaser-card-sm-image-height: var(--post-device-sizing-content-height-1),
820
939
  post-teaser-card-sm-section-content-padding: var(--post-device-spacing-padding-5),
@@ -948,10 +1067,15 @@ $post-toast: (
948
1067
  post-toast-elevation: var(--post-device-elevation-300),
949
1068
  );
950
1069
 
951
- $post-divider: (
952
- post-divider-border: var(--post-scheme-color-divider-border),
953
- post-divider-margin-block: var(--post-device-spacing-padding-15),
954
- post-divider-border-width: var(--post-device-border-width-default),
1070
+ $post-tooltip: (
1071
+ post-tooltip-padding-block: var(--post-device-spacing-padding-14),
1072
+ post-tooltip-padding-inline: var(--post-device-spacing-padding-15),
1073
+ post-tooltip-border-width: var(--post-device-border-width-alternative1),
1074
+ post-tooltip-color-border: var(--post-scheme-color-surface-accent-fg),
1075
+ post-tooltip-color-bg: var(--post-scheme-color-surface-accent-bg),
1076
+ post-tooltip-color-fg: var(--post-scheme-color-surface-accent-fg),
1077
+ post-tooltip-font-size: var(--post-device-font-size-9),
1078
+ post-tooltip-border-radius: var(--post-device-border-radius-1),
955
1079
  );
956
1080
 
957
1081
  $post-validation: (
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, 10 Nov 2025 13:42:35 GMT
4
+ // Mon, 05 Jan 2026 08:23:21 GMT
5
5
 
6
6
  :root {
7
7
  --post-core-color-brand-postyellow: #ffcc00;
@@ -97,9 +97,11 @@
97
97
  --post-core-dimension-104: 104px;
98
98
  --post-core-dimension-112: 112px;
99
99
  --post-core-dimension-164: 164px;
100
+ --post-core-dimension-176: 176px;
100
101
  --post-core-dimension-180: 180px;
101
102
  --post-core-dimension-188: 188px;
102
103
  --post-core-dimension-240: 240px;
104
+ --post-core-dimension-296: 296px;
103
105
  --post-core-dimension-312: 312px;
104
106
  --post-core-dimension-1280: 1280px;
105
107
  --post-core-dimension-5-5: 5.5px;
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, 10 Nov 2025 13:42:35 GMT
4
+ // Mon, 05 Jan 2026 08:23:21 GMT
5
5
 
6
6
  $post-desktop: (
7
7
  post-device-font-size-1: var(--post-core-font-size-40),
@@ -23,10 +23,12 @@ $post-desktop: (
23
23
  post-device-font-family-default: var(--post-core-font-family-swiss-post),
24
24
  post-device-spacing-gap-1: var(--post-core-dimension-8),
25
25
  post-device-spacing-gap-2: var(--post-core-dimension-2),
26
+ post-device-spacing-gap-3: var(--post-core-dimension-6),
26
27
  post-device-spacing-gap-4: var(--post-core-dimension-16),
27
28
  post-device-spacing-gap-5: var(--post-core-dimension-24),
28
29
  post-device-spacing-gap-6: var(--post-core-dimension-0),
29
30
  post-device-spacing-gap-7: var(--post-core-dimension-16),
31
+ post-device-spacing-gap-8: var(--post-core-dimension-8),
30
32
  post-device-spacing-gap-9: var(--post-core-dimension-12),
31
33
  post-device-spacing-gap-10: var(--post-core-dimension-24),
32
34
  post-device-spacing-gap-block-1: var(--post-core-dimension-8),
@@ -132,6 +134,10 @@ $post-desktop: (
132
134
  post-device-sizing-interactive-button-icon-5: var(--post-core-dimension-16),
133
135
  post-device-sizing-interactive-button-icon-6: var(--post-core-dimension-8),
134
136
  post-device-sizing-interactive-chip-height: var(--post-core-dimension-40),
137
+ post-device-sizing-interactive-tag-large-height: var(--post-core-dimension-32),
138
+ post-device-sizing-interactive-tag-large-icon-size: var(--post-core-dimension-18),
139
+ post-device-sizing-interactive-tag-small-height: var(--post-core-dimension-24),
140
+ post-device-sizing-interactive-tag-small-icon-size: var(--post-core-dimension-14),
135
141
  post-device-sizing-notification-1: var(--post-core-dimension-24),
136
142
  post-device-sizing-notification-2: var(--post-core-dimension-16),
137
143
  post-device-sizing-notification-3: var(--post-core-dimension-8),
@@ -146,9 +152,11 @@ $post-desktop: (
146
152
  post-device-sizing-logo-1: var(--post-core-dimension-72),
147
153
  post-device-sizing-content-height-1: var(--post-core-dimension-164),
148
154
  post-device-sizing-content-height-2: var(--post-core-dimension-312),
155
+ post-device-sizing-overlay-element-arrow: var(--post-core-dimension-8-5),
149
156
  post-device-border-radius-1: var(--post-core-dimension-4),
150
157
  post-device-border-radius-2: var(--post-core-dimension-8),
151
158
  post-device-border-radius-3: var(--post-core-dimension-16),
159
+ post-device-border-radius-4: var(--post-core-dimension-2),
152
160
  post-device-border-radius-round: var(--post-core-dimension-100),
153
161
  post-device-border-radius-focus: var(--post-core-dimension-4),
154
162
  post-device-font-weight-bold: var(--post-core-font-weight-700),
@@ -193,10 +201,12 @@ $post-tablet: (
193
201
  post-device-font-family-default: var(--post-core-font-family-swiss-post),
194
202
  post-device-spacing-gap-1: var(--post-core-dimension-8),
195
203
  post-device-spacing-gap-2: var(--post-core-dimension-2),
204
+ post-device-spacing-gap-3: var(--post-core-dimension-6),
196
205
  post-device-spacing-gap-4: var(--post-core-dimension-16),
197
206
  post-device-spacing-gap-5: var(--post-core-dimension-24),
198
207
  post-device-spacing-gap-6: var(--post-core-dimension-0),
199
208
  post-device-spacing-gap-7: var(--post-core-dimension-16),
209
+ post-device-spacing-gap-8: var(--post-core-dimension-8),
200
210
  post-device-spacing-gap-9: var(--post-core-dimension-12),
201
211
  post-device-spacing-gap-10: var(--post-core-dimension-24),
202
212
  post-device-spacing-gap-block-1: var(--post-core-dimension-4),
@@ -302,6 +312,10 @@ $post-tablet: (
302
312
  post-device-sizing-interactive-button-icon-5: var(--post-core-dimension-14),
303
313
  post-device-sizing-interactive-button-icon-6: var(--post-core-dimension-6),
304
314
  post-device-sizing-interactive-chip-height: var(--post-core-dimension-36),
315
+ post-device-sizing-interactive-tag-large-height: var(--post-core-dimension-32),
316
+ post-device-sizing-interactive-tag-large-icon-size: var(--post-core-dimension-18),
317
+ post-device-sizing-interactive-tag-small-height: var(--post-core-dimension-24),
318
+ post-device-sizing-interactive-tag-small-icon-size: var(--post-core-dimension-14),
305
319
  post-device-sizing-notification-1: var(--post-core-dimension-24),
306
320
  post-device-sizing-notification-2: var(--post-core-dimension-16),
307
321
  post-device-sizing-notification-3: var(--post-core-dimension-8),
@@ -316,9 +330,11 @@ $post-tablet: (
316
330
  post-device-sizing-logo-1: var(--post-core-dimension-64),
317
331
  post-device-sizing-content-height-1: var(--post-core-dimension-180),
318
332
  post-device-sizing-content-height-2: var(--post-core-dimension-240),
333
+ post-device-sizing-overlay-element-arrow: var(--post-core-dimension-8-5),
319
334
  post-device-border-radius-1: var(--post-core-dimension-4),
320
335
  post-device-border-radius-2: var(--post-core-dimension-8),
321
336
  post-device-border-radius-3: var(--post-core-dimension-16),
337
+ post-device-border-radius-4: var(--post-core-dimension-2),
322
338
  post-device-border-radius-round: var(--post-core-dimension-100),
323
339
  post-device-border-radius-focus: var(--post-core-dimension-4),
324
340
  post-device-font-weight-bold: var(--post-core-font-weight-700),
@@ -363,10 +379,12 @@ $post-mobile: (
363
379
  post-device-font-family-default: var(--post-core-font-family-swiss-post),
364
380
  post-device-spacing-gap-1: var(--post-core-dimension-8),
365
381
  post-device-spacing-gap-2: var(--post-core-dimension-2),
382
+ post-device-spacing-gap-3: var(--post-core-dimension-6),
366
383
  post-device-spacing-gap-4: var(--post-core-dimension-8),
367
384
  post-device-spacing-gap-5: var(--post-core-dimension-8),
368
385
  post-device-spacing-gap-6: var(--post-core-dimension-n2),
369
386
  post-device-spacing-gap-7: var(--post-core-dimension-16),
387
+ post-device-spacing-gap-8: var(--post-core-dimension-8),
370
388
  post-device-spacing-gap-9: var(--post-core-dimension-10),
371
389
  post-device-spacing-gap-10: var(--post-core-dimension-16),
372
390
  post-device-spacing-gap-block-1: var(--post-core-dimension-4),
@@ -472,6 +490,10 @@ $post-mobile: (
472
490
  post-device-sizing-interactive-button-icon-5: var(--post-core-dimension-14),
473
491
  post-device-sizing-interactive-button-icon-6: var(--post-core-dimension-6),
474
492
  post-device-sizing-interactive-chip-height: var(--post-core-dimension-32),
493
+ post-device-sizing-interactive-tag-large-height: var(--post-core-dimension-32),
494
+ post-device-sizing-interactive-tag-large-icon-size: var(--post-core-dimension-16),
495
+ post-device-sizing-interactive-tag-small-height: var(--post-core-dimension-24),
496
+ post-device-sizing-interactive-tag-small-icon-size: var(--post-core-dimension-14),
475
497
  post-device-sizing-notification-1: var(--post-core-dimension-24),
476
498
  post-device-sizing-notification-2: var(--post-core-dimension-16),
477
499
  post-device-sizing-notification-3: var(--post-core-dimension-16),
@@ -486,9 +508,11 @@ $post-mobile: (
486
508
  post-device-sizing-logo-1: var(--post-core-dimension-56),
487
509
  post-device-sizing-content-height-1: var(--post-core-dimension-180),
488
510
  post-device-sizing-content-height-2: var(--post-core-dimension-188),
511
+ post-device-sizing-overlay-element-arrow: var(--post-core-dimension-8-5),
489
512
  post-device-border-radius-1: var(--post-core-dimension-4),
490
513
  post-device-border-radius-2: var(--post-core-dimension-8),
491
514
  post-device-border-radius-3: var(--post-core-dimension-16),
515
+ post-device-border-radius-4: var(--post-core-dimension-2),
492
516
  post-device-border-radius-round: var(--post-core-dimension-100),
493
517
  post-device-border-radius-focus: var(--post-core-dimension-4),
494
518
  post-device-font-weight-bold: var(--post-core-font-weight-700),
package/_elements.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, 10 Nov 2025 13:42:35 GMT
4
+ // Mon, 05 Jan 2026 08:23:21 GMT
5
5
 
6
6
  $post-body: (
7
7
  post-body-color-bg: var(--post-theme-color-body-bg),
package/_helpers.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, 10 Nov 2025 13:42:35 GMT
4
+ // Mon, 05 Jan 2026 08:23:21 GMT
5
5
 
6
6
  $post-focus: (
7
7
  post-focus-outline-offset: var(--post-device-spacing-padding-2),
package/_index.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  // Do not edit manually
2
2
  // This file was generated by the swisspost/design-system-tokens package
3
- // Mon, 10 Nov 2025 13:42:35 GMT
3
+ // Mon, 05 Jan 2026 08:23:21 GMT
4
4
 
5
5
  @use './core';
6
6
  @forward './schemestatic';
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
- // Mon, 10 Nov 2025 13:42:35 GMT
4
+ // Mon, 05 Jan 2026 08:23:21 GMT
5
5
 
6
6
  $post-default: (
7
7
  post-palette-color-scheme: var(--post-theme-color-palettes-default-scheme),
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, 10 Nov 2025 13:42:35 GMT
4
+ // Mon, 05 Jan 2026 08:23:21 GMT
5
5
 
6
6
  $post-light: (
7
7
  post-scheme-color-body-bg: var(--post-core-color-sandgrey-002),
@@ -110,6 +110,7 @@ $post-light: (
110
110
  post-scheme-color-interactive-primary-selected-stroke4: var(--post-core-color-notification-green),
111
111
  post-scheme-color-interactive-primary-selected-stroke3: var(--post-core-color-brand-white),
112
112
  post-scheme-color-interactive-primary-selected-bg4: var(--post-core-color-sandgrey-100),
113
+ post-scheme-color-interactive-primary-selected-bg3: var(--post-core-color-brand-postyellow),
113
114
  post-scheme-color-interactive-notification-info-fg: var(--post-core-color-sandgrey-100),
114
115
  post-scheme-color-interactive-notification-info-bg: var(--post-scheme-color-signal-information-light),
115
116
  post-scheme-color-interactive-notification-info-icon: var(--post-scheme-color-signal-information-dark),
@@ -281,6 +282,7 @@ $post-dark: (
281
282
  post-scheme-color-interactive-primary-selected-stroke4: var(--post-core-color-notification-green-light),
282
283
  post-scheme-color-interactive-primary-selected-stroke3: var(--post-core-color-sandgrey-100),
283
284
  post-scheme-color-interactive-primary-selected-bg4: var(--post-core-color-brand-white),
285
+ post-scheme-color-interactive-primary-selected-bg3: var(--post-core-color-brand-postyellow),
284
286
  post-scheme-color-interactive-notification-info-fg: var(--post-core-color-sandgrey-100),
285
287
  post-scheme-color-interactive-notification-info-bg: var(--post-scheme-color-signal-information-light),
286
288
  post-scheme-color-interactive-notification-info-icon: var(--post-scheme-color-signal-information-dark),
package/_schemestatic.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, 10 Nov 2025 13:42:35 GMT
4
+ // Mon, 05 Jan 2026 08:23:21 GMT
5
5
 
6
6
  $post-light: (
7
7
  post-scheme-even: var(--post-core-bg-scheme-light),
package/_theme.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, 10 Nov 2025 13:42:35 GMT
4
+ // Mon, 05 Jan 2026 08:23:21 GMT
5
5
 
6
6
  $post-post: (
7
7
  post-theme-color-body-bg: var(--post-scheme-color-body-bg),
package/_utilities-formatted.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, 10 Nov 2025 13:42:35 GMT
4
+ // Mon, 05 Jan 2026 08:23:21 GMT
5
5
 
6
6
  $margin: (
7
7
  0: var(--post-core-dimension-0),
package/_utilities.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, 10 Nov 2025 13:42:35 GMT
4
+ // Mon, 05 Jan 2026 08:23:21 GMT
5
5
 
6
6
  $post-spacing: (
7
7
  post-utility-margin-0: var(--post-core-dimension-0),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@swisspost/design-system-tokens",
3
- "version": "10.0.0-next.54",
3
+ "version": "10.0.0-next.56",
4
4
  "description": "Design Tokens for the Swiss Post Design System.",
5
5
  "author": "Swiss Post <design-system@post.ch>",
6
6
  "license": "Apache-2.0",
@@ -22,13 +22,13 @@
22
22
  },
23
23
  "devDependencies": {
24
24
  "@eslint/js": "9.18.0",
25
- "@tokens-studio/sd-transforms": "1.2.9",
25
+ "@tokens-studio/sd-transforms": "2.0.2",
26
26
  "@types/node": "22.10.5",
27
27
  "copyfiles": "2.4.1",
28
28
  "eslint": "9.18.0",
29
29
  "globals": "16.0.0",
30
30
  "rimraf": "6.0.1",
31
- "style-dictionary": "4.3.0",
31
+ "style-dictionary": "5.1.1",
32
32
  "typescript": "5.8.3",
33
33
  "typescript-eslint": "8.20.0"
34
34
  },
package/tailwind/helpers.tailwind.css 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, 10 Nov 2025 13:42:35 GMT
4
+ * Mon, 05 Jan 2026 08:23:21 GMT
5
5
  */
6
6
 
7
7
 
package/tailwind/helpers.tailwind.js 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, 10 Nov 2025 13:42:35 GMT
4
+ // Mon, 05 Jan 2026 08:23:21 GMT
5
5
 
6
6
  export default {
7
7
  focus: {
package/tailwind/utilities.tailwind.css 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, 10 Nov 2025 13:42:35 GMT
4
+ * Mon, 05 Jan 2026 08:23:21 GMT
5
5
  */
6
6
 
7
7
 
package/tailwind/utilities.tailwind.js 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, 10 Nov 2025 13:42:35 GMT
4
+ // Mon, 05 Jan 2026 08:23:21 GMT
5
5
 
6
6
  export default {
7
7
  utility: {