@swisspost/design-system-tokens 9.0.0-next.5 → 9.0.0-next.7

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 +8 -0
  2. package/_channel.scss +1 -1
  3. package/_components.scss +97 -106
  4. package/_core.scss +2 -12
  5. package/_device.scss +12 -117
  6. package/_elements.scss +5 -3
  7. package/_helpers.scss +1 -1
  8. package/_index.scss +1 -1
  9. package/_palettes.scss +1 -1
  10. package/_scheme.scss +33 -47
  11. package/_theme.scss +1 -1
  12. package/_utilities.scss +1 -1
  13. package/package.json +1 -1
  14. package/palettes/_cargo-dark.scss +19 -0
  15. package/palettes/_cargo-light.scss +19 -0
  16. package/palettes/_post-dark.scss +19 -0
  17. package/palettes/_post-light.scss +19 -0
  18. package/tailwind/helpers.tailwind.js +1 -1
  19. package/tailwind/utilities.tailwind.js +1 -1
  20. package/tokens.json +578 -1274
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @swisspost/design-system-tokens
2
2
 
3
+ ## 9.0.0-next.7
4
+
5
+ ## 9.0.0-next.6
6
+
7
+ ### Minor Changes
8
+
9
+ - Export new SASS maps for Post and Cargo palettes, directly linking to the raw color values for both light and dark color schemes. (by [@alizedebray](https://github.com/alizedebray) with [#3992](https://github.com/swisspost/design-system/pull/3992))
10
+
3
11
  ## 9.0.0-next.5
4
12
 
5
13
  ## 9.0.0-next.4
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, 18 Nov 2024 17:05:11 GMT
4
+ // Wed, 04 Dec 2024 07:43:08 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,16 +1,16 @@
1
1
 
2
2
  // Do not edit manually
3
3
  // This file was generated by the swisspost/design-system-tokens package
4
- // Mon, 18 Nov 2024 17:05:11 GMT
4
+ // Wed, 04 Dec 2024 07:43:08 GMT
5
5
 
6
6
  $post-accordion: (
7
- post-accordion-header-padding-block-start-closed: var(--post-device-spacing-padding-19),
8
- post-accordion-header-padding-block-end-closed: var(--post-device-spacing-padding-20),
7
+ post-accordion-header-padding-block-closed: var(--post-device-spacing-padding-19),
9
8
  post-accordion-header-padding-block-open: var(--post-device-spacing-padding-19),
10
9
  post-accordion-header-padding-inline: var(--post-device-spacing-padding-5),
11
10
  post-accordion-header-content-gap-inline: var(--post-device-spacing-gap-7),
12
11
  post-accordion-header-logo-size: var(--post-device-sizing-logo-1),
13
12
  post-accordion-header-font-size: var(--post-device-font-size-5),
13
+ post-accordion-header-border-open: var(--post-core-color-colorless),
14
14
  post-accordion-border-bottom-style: var(--post-core-border-style-solid),
15
15
  post-accordion-border-bottom-width: var(--post-device-border-width-default),
16
16
  post-accordion-border-top-style: var(--post-core-border-style-solid),
@@ -32,6 +32,15 @@ $post-app-store-badge: (
32
32
  post-app-store-border-radius: var(--post-device-border-radius-1),
33
33
  );
34
34
 
35
+ $post-assist: (
36
+ post-assist-gap: var(--post-device-spacing-gap-1),
37
+ post-assist-padding-block: var(--post-device-spacing-padding-block-5),
38
+ post-assist-padding-inline: var(--post-device-spacing-padding-2),
39
+ post-assist-font-size: var(--post-device-font-size-9),
40
+ post-assist-enabled-fg: var(--post-scheme-color-interactive-primary-enabled-fg1),
41
+ post-assist-disabled-fg: var(--post-scheme-color-interactive-primary-disabled-fg1),
42
+ );
43
+
35
44
  $post-avatar: (
36
45
  post-avatar-size: var(--post-device-sizing-interactive-icon-size3),
37
46
  post-avatar-enabled-bg: var(--post-scheme-color-interactive-primary-enabled-bg2),
@@ -200,15 +209,15 @@ $post-button: (
200
209
  );
201
210
 
202
211
  $post-checkbox: (
203
- post-checkbox-enabled-bg: var(--post-scheme-color-interactive-primary-enabled-bg1),
212
+ post-checkbox-enabled-bg: var(--post-scheme-color-interactive-primary-enabled-bg3),
204
213
  post-checkbox-enabled-fg: var(--post-scheme-color-interactive-primary-enabled-fg1),
205
- post-checkbox-hover-bg: var(--post-scheme-color-interactive-primary-hover-bg),
214
+ post-checkbox-hover-bg: var(--post-scheme-color-interactive-primary-hover-bg3),
206
215
  post-checkbox-hover-fg: var(--post-scheme-color-interactive-primary-hover-fg1),
207
- post-checkbox-disabled-bg: var(--post-scheme-color-interactive-primary-disabled-bg),
208
- post-checkbox-disabled-fg: var(--post-scheme-color-interactive-primary-disabled-fg1),
216
+ post-checkbox-disabled-bg: var(--post-scheme-color-interactive-primary-disabled-bg6),
217
+ post-checkbox-disabled-fg: var(--post-scheme-color-interactive-primary-disabled-fg4),
209
218
  post-checkbox-enabled-stroke: var(--post-scheme-color-interactive-primary-enabled-stroke),
210
219
  post-checkbox-hover-stroke: var(--post-scheme-color-interactive-primary-hover-stroke),
211
- post-checkbox-disabled-stroke: var(--post-scheme-color-interactive-primary-disabled-stroke),
220
+ post-checkbox-disabled-stroke: var(--post-scheme-color-interactive-primary-disabled-stroke4),
212
221
  post-checkbox-gap-block-group: var(--post-device-spacing-gap-4),
213
222
  post-checkbox-gap-inline-text-start: var(--post-device-spacing-gap-inline-12),
214
223
  post-checkbox-icon-border-width: var(--post-device-border-width-default),
@@ -273,6 +282,23 @@ $post-dropdown: (
273
282
  post-dropdown-multi-select-menu-elevation: var(--post-device-elevation-300),
274
283
  );
275
284
 
285
+ $post-floating-button: (
286
+ post-floating-button-position-right: var(--post-device-position-1),
287
+ post-floating-button-position-top: var(--post-device-position-1),
288
+ post-floating-button-enabled-fg: var(--post-scheme-color-interactive-button-secondary-enabled-fg),
289
+ post-floating-button-enabled-bg: var(--post-scheme-color-interactive-button-secondary-enabled-bg),
290
+ post-floating-button-enabled-border: var(--post-scheme-color-interactive-button-secondary-enabled-stroke),
291
+ post-floating-button-hover-fg: var(--post-scheme-color-interactive-button-secondary-hover-fg),
292
+ post-floating-button-hover-bg: var(--post-scheme-color-interactive-button-secondary-hover-bg),
293
+ post-floating-button-hover-border: var(--post-scheme-color-interactive-button-secondary-hover-stroke),
294
+ post-floating-button-size-outer: var(--post-device-sizing-interactive-button-height-2),
295
+ post-floating-button-size-icon: var(--post-device-sizing-interactive-button-icon-3),
296
+ post-floating-button-border-width: var(--post-device-border-width-default),
297
+ post-floating-button-border-radius-round: var(--post-device-border-radius-round),
298
+ post-floating-button-elevation: var(--post-device-elevation-300),
299
+ post-floating-button-translate-y: var(--post-core-dimension-112),
300
+ );
301
+
276
302
  $post-form-footer: (
277
303
  post-form-footer-border-block-start-width: var(--post-device-border-width-default),
278
304
  post-form-footer-border-block-start-style: var(--post-core-border-style-solid),
@@ -375,6 +401,7 @@ $post-inline-notification: (
375
401
  post-inline-color-error-fg: var(--post-scheme-color-interactive-notification-error-fg),
376
402
  post-inline-color-error-stroke: var(--post-scheme-color-interactive-notification-error-stroke),
377
403
  post-inline-color-error-icon: var(--post-scheme-color-interactive-notification-error-icon),
404
+ post-inline-elevation: var(--post-device-elevation-300),
378
405
  );
379
406
 
380
407
  $post-lead: (
@@ -402,50 +429,18 @@ $post-list: (
402
429
  post-list-bg: var(--post-scheme-color-surface-default-bg),
403
430
  );
404
431
 
405
- $post-list-simple: (
406
- post-list-simple-checks-sizing-icon: var(--post-device-sizing-icon-1),
407
- post-list-simple-checks-padding-icon: var(--post-device-spacing-padding-16),
408
- post-list-simple-checks-padding-text: var(--post-device-spacing-padding-block-6),
409
- post-list-simple-checks-padding-block-outer: var(--post-device-spacing-padding-5),
410
- post-list-simple-checks-gap-inline-text: var(--post-device-spacing-gap-inline-2),
411
- post-list-simple-checks-gap-block-text: var(--post-device-spacing-gap-block-3),
412
- post-list-simple-checks-icon-container-inline: var(--post-device-spacing-padding-4),
413
- post-list-simple-checks-icon-container-block: var(--post-device-spacing-padding-18),
414
- post-list-simple-bullets-spacing-padding-text: var(--post-device-spacing-padding-block-6),
415
- post-list-simple-bullets-spacing-gap-inline-text: var(--post-device-spacing-gap-inline-10),
416
- post-list-checks-color-icon-bg: var(--post-scheme-color-surface-accent-bg),
417
- post-list-checks-color-icon-fg: var(--post-scheme-color-surface-accent-fg),
418
- post-list-checks-color-text-fg: var(--post-scheme-color-interactive-primary-enabled-fg1),
419
- post-list-checks-margin-block: var(--post-device-spacing-padding-block-8),
420
- );
421
-
422
- $post-notifications: (
423
- post-infobox-sizing-icon: var(--post-device-sizing-notification-icon-4),
424
- post-infobox-spacing-gap-inline: var(--post-device-spacing-gap-4),
425
- post-clickable-spacing-padding-icon: var(--post-device-spacing-padding-2),
426
- post-interactive-spacing-gap-inline-icon-end: var(--post-device-spacing-gap-inline-4),
427
- post-interactive-spacing-gap-inline-error: var(--post-device-spacing-gap-inline-10),
428
- post-notification-banner-elevation: var(--post-device-elevation-500),
429
- post-notification-toast-elevation: var(--post-device-elevation-300),
430
- post-notification-snackbar-elevation: var(--post-device-elevation-300),
431
- post-notification-color-info-bg: var(--post-scheme-color-interactive-notification-info-bg),
432
- post-notification-color-info-fg: var(--post-scheme-color-interactive-notification-info-fg),
433
- post-notification-color-info-stroke: var(--post-scheme-color-interactive-notification-info-stroke),
434
- post-notification-color-info-icon: var(--post-scheme-color-interactive-notification-info-icon),
435
- post-notification-color-success-bg: var(--post-scheme-color-interactive-notification-success-bg),
436
- post-notification-color-success-fg: var(--post-scheme-color-interactive-notification-success-fg),
437
- post-notification-color-success-stroke: var(--post-scheme-color-interactive-notification-success-stroke),
438
- post-notification-color-success-icon: var(--post-scheme-color-interactive-notification-success-icon),
439
- post-notification-color-warning-bg: var(--post-scheme-color-interactive-notification-warning-bg),
440
- post-notification-color-warning-fg: var(--post-scheme-color-interactive-notification-warning-fg),
441
- post-notification-color-warning-stroke: var(--post-scheme-color-interactive-notification-warning-stroke),
442
- post-notification-color-warning-icon: var(--post-scheme-color-interactive-notification-warning-icon),
443
- post-notification-color-error-bg: var(--post-scheme-color-interactive-notification-error-bg),
444
- post-notification-color-error-fg: var(--post-scheme-color-interactive-notification-error-fg),
445
- post-notification-color-error-stroke: var(--post-scheme-color-interactive-notification-error-stroke),
446
- post-notification-color-error-icon: var(--post-scheme-color-interactive-notification-error-icon),
447
- post-notification-popup-elevation: var(--post-device-elevation-300),
448
- post-test: var(--post-core-color-notification-green),
432
+ $post-listcheck: (
433
+ post-list-check-sizing-icon: var(--post-device-sizing-icon-1),
434
+ post-list-check-padding-icon: var(--post-device-spacing-padding-16),
435
+ post-list-check-text-padding: var(--post-device-spacing-padding-block-6),
436
+ post-list-check-icon-gap-inline: var(--post-device-spacing-gap-inline-2),
437
+ post-list-check-icon-container-inline: var(--post-device-spacing-padding-4),
438
+ post-list-check-icon-container-block: var(--post-device-spacing-padding-18),
439
+ post-list-check-item-gap-block-text: var(--post-device-spacing-gap-block-3),
440
+ post-list-check-margin-block: var(--post-device-spacing-padding-block-8),
441
+ post-list-check-color-icon-bg: var(--post-scheme-color-surface-accent-bg),
442
+ post-list-check-color-icon-fg: var(--post-scheme-color-surface-accent-fg),
443
+ post-list-check-color-text-fg: var(--post-scheme-color-interactive-primary-enabled-fg1),
449
444
  );
450
445
 
451
446
  $post-popover: (
@@ -477,15 +472,15 @@ $post-popover: (
477
472
  );
478
473
 
479
474
  $post-radio-button: (
480
- post-radio-button-enabled-bg: var(--post-scheme-color-interactive-primary-enabled-bg1),
475
+ post-radio-button-enabled-bg: var(--post-scheme-color-interactive-primary-enabled-bg3),
481
476
  post-radio-button-enabled-fg: var(--post-scheme-color-interactive-primary-enabled-fg1),
482
- post-radio-button-hover-bg: var(--post-scheme-color-interactive-primary-hover-bg),
477
+ post-radio-button-hover-bg: var(--post-scheme-color-interactive-primary-hover-bg3),
483
478
  post-radio-button-hover-fg: var(--post-scheme-color-interactive-primary-hover-fg1),
484
- post-radio-button-disabled-bg: var(--post-scheme-color-interactive-primary-disabled-bg),
485
- post-radio-button-disabled-fg: var(--post-scheme-color-interactive-primary-disabled-fg1),
479
+ post-radio-button-disabled-bg: var(--post-scheme-color-interactive-primary-disabled-bg6),
480
+ post-radio-button-disabled-fg: var(--post-scheme-color-interactive-primary-disabled-fg4),
486
481
  post-radio-button-enabled-stroke: var(--post-scheme-color-interactive-primary-enabled-stroke),
487
482
  post-radio-button-hover-stroke: var(--post-scheme-color-interactive-primary-hover-stroke),
488
- post-radio-button-disabled-stroke: var(--post-scheme-color-interactive-primary-disabled-stroke),
483
+ post-radio-button-disabled-stroke: var(--post-scheme-color-interactive-primary-disabled-stroke4),
489
484
  post-radio-button-gap-block-group: var(--post-device-spacing-gap-4),
490
485
  post-radio-button-gap-inline-text-start: var(--post-device-spacing-gap-inline-12),
491
486
  post-radio-button-icon-padding-block-inner: var(--post-device-spacing-padding-1),
@@ -510,6 +505,7 @@ $post-search-input: (
510
505
  post-input-search-label-empty-padding-inline-end: var(--post-core-dimension-50),
511
506
  post-input-search-label-filled-padding-inline-end: var(--post-core-dimension-82),
512
507
  post-input-search-icon-border-radius: var(--post-device-border-radius-focus),
508
+ post-search-position-inline-end-icon: var(--post-core-dimension-14),
513
509
  );
514
510
 
515
511
  $post-segmented-button: (
@@ -552,6 +548,8 @@ $post-select: (
552
548
  post-select-color-signal-success: var(--post-scheme-color-signal-success-dark),
553
549
  post-select-gap-inline-icon: var(--post-device-spacing-gap-1),
554
550
  post-select-padding-block-assist: var(--post-device-spacing-padding-block-5),
551
+ post-select-padding-block-start: var(--post-device-spacing-padding-block-29),
552
+ post-select-padding-block-end: var(--post-device-spacing-padding-block-3),
555
553
  post-select-padding-inline-start: var(--post-device-spacing-padding-inline-1),
556
554
  post-select-padding-inline-end: var(--post-core-dimension-48),
557
555
  post-select-padding-inline-assist: var(--post-device-spacing-padding-2),
@@ -561,7 +559,7 @@ $post-select: (
561
559
  post-select-border-width: var(--post-device-border-width-default),
562
560
  post-select-border-style-default: var(--post-core-border-style-solid),
563
561
  post-select-border-style-disabled: var(--post-core-border-style-dash),
564
- post-select-empty-padding-block: var(--post-device-spacing-padding-block-1),
562
+ post-select-standalone-padding-block: var(--post-device-spacing-padding-block-1),
565
563
  post-select-label-empty-padding-block-start: var(--post-device-spacing-padding-block-28),
566
564
  post-select-label-empty-padding-inline-start: var(--post-device-spacing-padding-5),
567
565
  post-select-label-empty-padding-inline-end: var(--post-core-dimension-50),
@@ -569,8 +567,6 @@ $post-select: (
569
567
  post-select-label-filled-padding-block-start: var(--post-device-spacing-padding-block-30),
570
568
  post-select-label-filled-font-size: var(--post-device-font-size-10),
571
569
  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
570
  post-select-assist-font-size: var(--post-device-font-size-10),
575
571
  post-select-validated-padding-inline-end: var(--post-core-dimension-80),
576
572
  post-select-icon-position-inline-end: var(--post-device-position-2),
@@ -597,6 +593,7 @@ $post-snackbar: (
597
593
  post-snackbar-color-error-fg: var(--post-scheme-color-interactive-notification-error-fg),
598
594
  post-snackbar-color-error-stroke: var(--post-scheme-color-interactive-notification-error-stroke),
599
595
  post-snackbar-color-error-icon: var(--post-scheme-color-interactive-notification-error-icon),
596
+ post-snackbar-elevation: var(--post-device-elevation-300),
600
597
  );
601
598
 
602
599
  $post-stepper: (
@@ -629,9 +626,10 @@ $post-switch: (
629
626
  post-switch-text-enabled-fg: var(--post-scheme-color-interactive-primary-enabled-fg1),
630
627
  post-switch-text-disabled-fg: var(--post-scheme-color-interactive-primary-disabled-fg1),
631
628
  post-switch-text-selected-fg: var(--post-scheme-color-interactive-primary-selected-fg1),
632
- post-switch-icon-success: var(--post-scheme-color-signal-success-dark),
629
+ post-switch-icon-success: var(--post-scheme-color-interactive-primary-selected-bg2),
633
630
  post-switch-icon-disabled: var(--post-scheme-color-interactive-primary-disabled-fg1),
634
631
  post-switch-icon-hover: var(--post-scheme-color-interactive-primary-hover-fg1),
632
+ post-switch-icon-padding-container: var(--post-device-spacing-padding-block-18),
635
633
  post-switch-handle-enabled: var(--post-scheme-color-interactive-primary-enabled-fg3),
636
634
  post-switch-handle-selected: var(--post-scheme-color-interactive-primary-selected-fg3),
637
635
  post-switch-handle-selected-stroke: var(--post-scheme-color-interactive-primary-selected-stroke3),
@@ -646,7 +644,7 @@ $post-switch: (
646
644
  post-switch-element-selected-stroke: var(--post-scheme-color-interactive-primary-selected-stroke4),
647
645
  post-switch-element-hover-bg: var(--post-scheme-color-interactive-primary-hover-bg2),
648
646
  post-switch-element-hover-stroke: var(--post-scheme-color-interactive-primary-hover-stroke),
649
- post-switch-element-disabled-bg: var(--post-scheme-color-interactive-primary-disabled-bg3),
647
+ post-switch-element-disabled-bg: var(--post-scheme-color-interactive-primary-disabled-bg5),
650
648
  post-switch-element-disabled-stroke: var(--post-scheme-color-interactive-primary-disabled-stroke2),
651
649
  post-switch-element-width: var(--post-core-dimension-48),
652
650
  post-switch-element-height: var(--post-core-dimension-24),
@@ -661,37 +659,45 @@ $post-switch: (
661
659
  );
662
660
 
663
661
  $post-text-area: (
664
- post-textarea-enabled-bg: var(--post-scheme-color-interactive-primary-enabled-bg1),
665
- post-textarea-enabled-fg: var(--post-scheme-color-interactive-primary-enabled-fg1),
666
- post-textarea-hover-bg: var(--post-scheme-color-interactive-primary-hover-bg),
667
- post-textarea-hover-fg: var(--post-scheme-color-interactive-primary-hover-fg1),
668
- post-textarea-disabled-bg: var(--post-scheme-color-interactive-primary-disabled-bg),
669
- post-textarea-disabled-fg: var(--post-scheme-color-interactive-primary-disabled-fg1),
670
- post-textarea-enabled-border: var(--post-scheme-color-interactive-primary-enabled-stroke),
671
- post-textarea-hover-border: var(--post-scheme-color-interactive-primary-hover-stroke),
672
- post-textarea-disabled-border: var(--post-scheme-color-interactive-primary-disabled-stroke),
662
+ post-textarea-enabled-bg: var(--post-scheme-color-interactive-input-enabled-bg),
663
+ post-textarea-enabled-fg: var(--post-scheme-color-interactive-input-enabled-fg),
664
+ post-textarea-hover-bg: var(--post-scheme-color-interactive-input-hover-bg),
665
+ post-textarea-hover-fg: var(--post-scheme-color-interactive-input-hover-fg),
666
+ post-textarea-disabled-bg: var(--post-scheme-color-interactive-input-disabled-bg),
667
+ post-textarea-disabled-fg: var(--post-scheme-color-interactive-input-disabled-fg),
668
+ post-textarea-enabled-border: var(--post-scheme-color-interactive-input-enabled-border),
669
+ post-textarea-hover-border: var(--post-scheme-color-interactive-input-hover-border),
670
+ post-textarea-disabled-border: var(--post-scheme-color-interactive-input-disabled-border),
673
671
  post-textarea-gap-inline: var(--post-device-spacing-gap-1),
672
+ post-textarea-gap-assist: var(--post-device-spacing-gap-1),
673
+ post-textarea-padding-block-start: var(--post-device-spacing-padding-block-29),
674
+ post-textarea-padding-block-end: var(--post-device-spacing-padding-3),
674
675
  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),
676
- post-textarea-padding-block-empty: var(--post-device-spacing-padding-3),
677
676
  post-textarea-padding-inline-assist: var(--post-device-spacing-padding-2),
678
677
  post-textarea-padding-inline-start: var(--post-device-spacing-padding-inline-1),
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),
678
+ post-textarea-padding-inline-end: var(--post-core-dimension-26),
679
+ post-textarea-standalone-padding-block: var(--post-device-spacing-padding-3),
682
680
  post-textarea-sizing-icon: var(--post-device-sizing-notification-1),
683
681
  post-textarea-sizing-min-height: var(--post-core-dimension-88),
684
682
  post-textarea-border-radius: var(--post-device-border-radius-1),
685
683
  post-textarea-border-style-enabled: var(--post-core-border-style-solid),
686
684
  post-textarea-border-style-disabled: var(--post-core-border-style-dash),
687
685
  post-textarea-border-width: var(--post-device-border-width-default),
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),
686
+ post-textarea-label-padding-inline-start: var(--post-device-spacing-padding-5),
687
+ post-textarea-label-padding-inline-end: var(--post-core-dimension-28),
688
+ post-textarea-label-padding-block-start: var(--post-device-spacing-padding-block-27),
689
+ post-textarea-label-validated-padding-inline-end: var(--post-core-dimension-58),
690
+ post-textarea-label-filled-font-size: var(--post-device-font-size-10),
691
+ post-textarea-label-filled-padding-block-start: var(--post-device-spacing-padding-block-30),
691
692
  post-textarea-signal-error: var(--post-scheme-color-signal-error-dark),
692
693
  post-textarea-signal-success: var(--post-scheme-color-signal-success-dark),
693
694
  post-textarea-position-inline-end-resize: var(--post-core-dimension-6),
695
+ post-textarea-position-inline-end-validation: var(--post-core-dimension-28),
694
696
  post-textarea-position-block-end-resize: var(--post-core-dimension-6),
697
+ post-textarea-position-block-start-validation: var(--post-core-dimension-12),
698
+ post-textarea-assist-font-size: var(--post-device-font-size-9),
699
+ post-textarea-validated-padding-inline-end: var(--post-core-dimension-56),
700
+ post-textarea-placeholder-fg: var(--post-scheme-color-interactive-primary-enabled-fg2),
695
701
  );
696
702
 
697
703
  $post-text-highlighted: (
@@ -703,19 +709,19 @@ $post-text-highlighted: (
703
709
  );
704
710
 
705
711
  $post-text-input: (
706
- post-input-color-enabled-bg: var(--post-scheme-color-interactive-primary-enabled-bg1),
707
- post-input-color-enabled-fg: var(--post-scheme-color-interactive-primary-enabled-fg1),
708
- post-input-color-hover-bg: var(--post-scheme-color-interactive-primary-hover-bg),
709
- post-input-color-hover-fg: var(--post-scheme-color-interactive-primary-hover-fg1),
710
- post-input-color-disabled-bg: var(--post-scheme-color-interactive-primary-disabled-bg),
711
- post-input-color-disabled-fg: var(--post-scheme-color-interactive-primary-disabled-fg1),
712
+ post-input-color-enabled-bg: var(--post-scheme-color-interactive-input-enabled-bg),
713
+ post-input-color-enabled-fg: var(--post-scheme-color-interactive-input-enabled-fg),
714
+ post-input-color-hover-bg: var(--post-scheme-color-interactive-input-hover-bg),
715
+ post-input-color-hover-fg: var(--post-scheme-color-interactive-input-hover-fg),
716
+ post-input-color-disabled-bg: var(--post-scheme-color-interactive-input-disabled-bg),
717
+ post-input-color-disabled-fg: var(--post-scheme-color-interactive-input-disabled-fg),
712
718
  post-input-color-selected-bg: var(--post-scheme-color-interactive-primary-selected-bg1),
713
- post-input-color-selected-fg: var(--post-scheme-color-interactive-primary-selected-fg1),
719
+ post-input-color-selected-fg: var(--post-scheme-color-interactive-input-enabled-fg),
714
720
  post-input-color-helptext-fg: var(--post-scheme-color-interactive-primary-enabled-fg2),
715
- post-input-color-enabled-border: var(--post-scheme-color-interactive-primary-enabled-stroke),
716
- post-input-color-hover-border: var(--post-scheme-color-interactive-primary-hover-stroke),
717
- post-input-color-disabled-border: var(--post-scheme-color-interactive-primary-disabled-stroke),
718
- post-input-color-selected-border: var(--post-scheme-color-interactive-primary-selected-stroke1),
721
+ post-input-color-enabled-border: var(--post-scheme-color-interactive-input-enabled-border),
722
+ post-input-color-hover-border: var(--post-scheme-color-interactive-input-hover-border),
723
+ post-input-color-disabled-border: var(--post-scheme-color-interactive-input-disabled-border),
724
+ post-input-color-selected-border: var(--post-scheme-color-interactive-input-enabled-border),
719
725
  post-input-color-signal-error: var(--post-scheme-color-signal-error-dark),
720
726
  post-input-color-signal-success: var(--post-scheme-color-signal-success-dark),
721
727
  post-input-gap-inline-1: var(--post-device-spacing-gap-1),
@@ -768,22 +774,7 @@ $post-toast: (
768
774
  post-toast-color-error-fg: var(--post-scheme-color-interactive-notification-error-fg),
769
775
  post-toast-color-error-stroke: var(--post-scheme-color-interactive-notification-error-stroke),
770
776
  post-toast-color-error-icon: var(--post-scheme-color-interactive-notification-error-icon),
771
- );
772
-
773
- $post-floating-button: (
774
- post-floating-button-position-right: var(--post-device-grid-padding-inline-container),
775
- post-floating-button-position-top: var(--post-device-position-1),
776
- post-floating-button-enabled-fg: var(--post-scheme-color-interactive-button-secondary-enabled-fg),
777
- post-floating-button-enabled-bg: var(--post-scheme-color-interactive-button-secondary-enabled-bg),
778
- post-floating-button-enabled-border: var(--post-scheme-color-interactive-button-secondary-enabled-stroke),
779
- post-floating-button-hover-fg: var(--post-scheme-color-interactive-button-secondary-hover-fg),
780
- post-floating-button-hover-bg: var(--post-scheme-color-interactive-button-secondary-hover-bg),
781
- post-floating-button-hover-border: var(--post-scheme-color-interactive-button-secondary-hover-stroke),
782
- post-floating-button-size-outer: var(--post-device-sizing-interactive-button-height-2),
783
- post-floating-button-size-icon: var(--post-device-sizing-interactive-button-icon-3),
784
- post-floating-button-border-width: var(--post-device-border-width-default),
785
- post-floating-button-border-radius-round: var(--post-device-border-radius-round),
786
- post-floating-button-elevation: var(--post-device-elevation-300),
777
+ post-toast-elevation: var(--post-device-elevation-300),
787
778
  );
788
779
 
789
780
  $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, 18 Nov 2024 17:05:11 GMT
4
+ // Wed, 04 Dec 2024 07:43:08 GMT
5
5
 
6
6
  :root {
7
7
  --post-core-color-brand-postyellow: #ffcc00;
@@ -82,10 +82,10 @@
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;
86
85
  --post-core-dimension-48: 48px;
87
86
  --post-core-dimension-50: 50px;
88
87
  --post-core-dimension-56: 56px;
88
+ --post-core-dimension-58: 58px;
89
89
  --post-core-dimension-64: 64px;
90
90
  --post-core-dimension-72: 72px;
91
91
  --post-core-dimension-78: 78px;
@@ -110,7 +110,6 @@
110
110
  --post-core-dimension-26-5: 26.5px;
111
111
  --post-core-dimension-25-5: 25.5px;
112
112
  --post-core-dimension-24-5: 24.5px;
113
- --post-core-font-weight-300: 300;
114
113
  --post-core-font-weight-400: 400;
115
114
  --post-core-font-weight-500: 500;
116
115
  --post-core-font-weight-700: 700;
@@ -121,18 +120,13 @@
121
120
  --post-core-font-size-16: 16px;
122
121
  --post-core-font-size-18: 18px;
123
122
  --post-core-font-size-20: 20px;
124
- --post-core-font-size-22: 22px;
125
123
  --post-core-font-size-24: 24px;
126
- --post-core-font-size-26: 26px;
127
124
  --post-core-font-size-28: 28px;
128
- --post-core-font-size-30: 30px;
129
125
  --post-core-font-size-32: 32px;
130
- --post-core-font-size-34: 34px;
131
126
  --post-core-font-size-36: 36px;
132
127
  --post-core-font-size-40: 40px;
133
128
  --post-core-line-height-100: 1;
134
129
  --post-core-line-height-120: 1.2;
135
- --post-core-line-height-140: 1.4;
136
130
  --post-core-line-height-150: 1.5;
137
131
  --post-core-letter-spacing-default: 0.0012em;
138
132
  --post-core-letter-spacing-none: 0rem;
@@ -144,13 +138,9 @@
144
138
  --post-core-elevation-3: 0 4px 8px 0 rgba(0,0,0,0.16), 0 0 2px 0 rgba(0,0,0,0.16);
145
139
  --post-core-elevation-4: 0 8px 16px 0 rgba(0,0,0,0.16), 0 0 2px 0 rgba(0,0,0,0.16);
146
140
  --post-core-elevation-5: 0 14px 28px 0 rgba(0,0,0,0.24), 0 0 8px 0 rgba(0,0,0,0.24);
147
- --post-core-border-focus: var(--post-core-color-sandgrey-100) var(--post-core-dimension-2) solid;
148
- --post-core-border-disabled: var(--post-core-color-sandgrey-060) var(--post-core-dimension-2) dashed;
149
- --post-core-border-default: var(--post-core-color-sandgrey-100) var(--post-core-dimension-2) solid;
150
141
  --post-core-border-style-solid: solid;
151
142
  --post-core-border-style-dash: dashed;
152
143
  --post-core-text-decoration-underline: underline;
153
- --post-core-text-decoration-line-through: line-through;
154
144
  --post-core-text-decoration-none: none;
155
145
  --post-core-bg-scheme-light: light;
156
146
  --post-core-bg-scheme-dark: dark;