@swisspost/design-system-styles 10.4.0 → 10.5.0

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 (48) hide show
  1. package/cargo-compact.css +1 -1
  2. package/cargo-default.css +1 -1
  3. package/cargo-tokens-compact.css +1 -1
  4. package/cargo-tokens-default.css +1 -1
  5. package/components/_index.scss +1 -0
  6. package/components/chip.scss +1 -1
  7. package/components/dialog.css +1 -1
  8. package/components/dialog.scss +3 -3
  9. package/components/fonts.css +1 -1
  10. package/components/fonts.scss +33 -1
  11. package/components/footer/_post-footer.scss +6 -6
  12. package/components/form-input.scss +14 -14
  13. package/components/form-search-input.scss +1 -1
  14. package/components/form-select.scss +10 -16
  15. package/components/form-textarea.scss +2 -2
  16. package/components/header/_custom-properties.scss +6 -6
  17. package/components/inline-notification.css +1 -0
  18. package/components/inline-notification.scss +63 -0
  19. package/components/list-check.scss +12 -12
  20. package/components/switch.scss +4 -4
  21. package/components/tabs/_tab-title.scss +16 -10
  22. package/components/toast.css +1 -1
  23. package/components/toast.scss +1 -1
  24. package/layout/_containers.scss +1 -1
  25. package/layout/_section.scss +1 -1
  26. package/mixins/_forms.scss +3 -3
  27. package/mixins/_list.scss +5 -5
  28. package/package.json +6 -6
  29. package/post-compact.css +1 -1
  30. package/post-default.css +1 -1
  31. package/post-tokens-compact.css +1 -1
  32. package/post-tokens-default.css +1 -1
  33. package/tokens/temp/_appearance.scss +1 -1
  34. package/tokens/temp/_components.scss +3 -3
  35. package/tokens/temp/_core.scss +1 -1
  36. package/tokens/temp/_device.scss +2 -2
  37. package/tokens/temp/_elements.scss +1 -1
  38. package/tokens/temp/_helpers.scss +1 -1
  39. package/tokens/temp/_index.scss +1 -1
  40. package/tokens/temp/_palette.scss +1 -1
  41. package/tokens/temp/_scheme.scss +1 -1
  42. package/tokens/temp/_schemestatic.scss +1 -1
  43. package/tokens/temp/_theme.scss +1 -1
  44. package/tokens/temp/_utilities-formatted.scss +1 -1
  45. package/tokens/temp/_utilities.scss +1 -1
  46. package/utilities/_env-variables.scss +1 -1
  47. package/utilities/_variables.scss +36 -36
  48. package/variables/components/_notification.scss +10 -10
package/tokens/temp/_appearance.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
- // Wed, 26 Aug 2026 12:21:46 GMT
4
+ // Thu, 10 Sep 2026 06:48:44 GMT
5
5
 
6
6
  $post-default: (
7
7
  keep: undefined,
package/tokens/temp/_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
- // Wed, 26 Aug 2026 12:21:46 GMT
4
+ // Thu, 10 Sep 2026 06:48:44 GMT
5
5
 
6
6
  $post-accordion: (
7
7
  post-accordion-header-padding-block-closed: var(--post-device-spacing-padding-19),
@@ -1014,7 +1014,7 @@ $post-side-navigation: (
1014
1014
  post-side-nav-large-nav-element-font-size: var(--post-device-font-size-6),
1015
1015
  post-side-nav-large-section-title-padding-inline: var(--post-device-spacing-padding-5),
1016
1016
  post-side-nav-large-section-title-padding-block-start: var(--post-device-spacing-padding-53),
1017
- post-side-nav-large-section-title-padding-block-end: var(--post-device-spacing-padding-30),
1017
+ post-side-nav-large-section-title-padding-block-end: var(--post-device-spacing-padding-32),
1018
1018
  post-side-nav-large-section-title-font-size: var(--post-device-font-size-7),
1019
1019
  post-side-nav-large-iconic-nav-element-lvl-2-padding-inline-start: var(--post-device-spacing-padding-55),
1020
1020
  post-side-nav-large-iconic-nav-element-lvl-3-padding-inline-start: var(--post-device-spacing-padding-56),
@@ -1038,7 +1038,7 @@ $post-side-navigation: (
1038
1038
  post-side-nav-small-nav-element-font-size: var(--post-device-font-size-7),
1039
1039
  post-side-nav-small-section-title-padding-inline: var(--post-device-spacing-padding-inline-4),
1040
1040
  post-side-nav-small-section-title-padding-block-start: var(--post-core-dimension-15),
1041
- post-side-nav-small-section-title-padding-block-end: var(--post-device-spacing-padding-30),
1041
+ post-side-nav-small-section-title-padding-block-end: var(--post-device-spacing-padding-32),
1042
1042
  post-side-nav-small-section-title-font-size: var(--post-device-font-size-9),
1043
1043
  post-side-nav-small-iconic-nav-element-lvl-2-padding-inline-start: var(--post-core-dimension-48),
1044
1044
  post-side-nav-small-iconic-nav-element-lvl-3-padding-inline-start: var(--post-core-dimension-60),
package/tokens/temp/_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
- // Wed, 26 Aug 2026 12:21:46 GMT
4
+ // Thu, 10 Sep 2026 06:48:44 GMT
5
5
 
6
6
  :root {
7
7
  --post-core-color-brand-postyellow: #ffcc00;
package/tokens/temp/_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
- // Wed, 26 Aug 2026 12:21:46 GMT
4
+ // Thu, 10 Sep 2026 06:48:44 GMT
5
5
 
6
6
  $post-desktop: (
7
7
  post-device-font-size-1: var(--post-core-font-size-40),
@@ -598,7 +598,7 @@ $post-mobile: (
598
598
  post-device-spacing-padding-48: var(--post-core-dimension-28),
599
599
  post-device-spacing-padding-49: var(--post-core-dimension-12),
600
600
  post-device-spacing-padding-50: var(--post-core-dimension-11),
601
- post-device-spacing-padding-51: var(--post-core-dimension-8-5),
601
+ post-device-spacing-padding-51: var(--post-core-dimension-9-5),
602
602
  post-device-spacing-padding-52: var(--post-core-dimension-8-5),
603
603
  post-device-spacing-padding-53: var(--post-core-dimension-15),
604
604
  post-device-spacing-padding-54: var(--post-core-dimension-2-5),
package/tokens/temp/_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
- // Wed, 26 Aug 2026 12:21:46 GMT
4
+ // Thu, 10 Sep 2026 06:48:44 GMT
5
5
 
6
6
  $post-body: (
7
7
  post-body-color-bg: var(--post-theme-color-body-bg),
package/tokens/temp/_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
- // Wed, 26 Aug 2026 12:21:46 GMT
4
+ // Thu, 10 Sep 2026 06:48:44 GMT
5
5
 
6
6
  $post-focus: (
7
7
  post-focus-outline-offset: var(--post-device-spacing-padding-2),
package/tokens/temp/_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
- // Wed, 26 Aug 2026 12:21:46 GMT
3
+ // Thu, 10 Sep 2026 06:48:44 GMT
4
4
 
5
5
  @use './core';
6
6
  @forward './schemestatic';
package/tokens/temp/_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
- // Wed, 26 Aug 2026 12:21:46 GMT
4
+ // Thu, 10 Sep 2026 06:48:44 GMT
5
5
 
6
6
  $post-default: (
7
7
  post-palette-color-scheme: var(--post-theme-color-palettes-default-scheme),
package/tokens/temp/_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
- // Wed, 26 Aug 2026 12:21:46 GMT
4
+ // Thu, 10 Sep 2026 06:48:44 GMT
5
5
 
6
6
  $post-light: (
7
7
  post-scheme-color-body-bg: var(--post-core-color-sandgrey-002),
package/tokens/temp/_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
- // Wed, 26 Aug 2026 12:21:46 GMT
4
+ // Thu, 10 Sep 2026 06:48:44 GMT
5
5
 
6
6
  $post-light: (
7
7
  post-scheme-even: var(--post-core-bg-scheme-light),
package/tokens/temp/_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
- // Wed, 26 Aug 2026 12:21:46 GMT
4
+ // Thu, 10 Sep 2026 06:48:44 GMT
5
5
 
6
6
  $post-post: (
7
7
  post-theme-color-body-bg: var(--post-scheme-color-body-bg),
package/tokens/temp/_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
- // Wed, 26 Aug 2026 12:21:46 GMT
4
+ // Thu, 10 Sep 2026 06:48:44 GMT
5
5
 
6
6
  $margin: (
7
7
  0: var(--post-core-dimension-0),
package/tokens/temp/_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
- // Wed, 26 Aug 2026 12:21:46 GMT
4
+ // Thu, 10 Sep 2026 06:48:44 GMT
5
5
 
6
6
  $post-spacing: (
7
7
  post-utility-margin-0: var(--post-core-dimension-0),
package/utilities/_env-variables.scss CHANGED
@@ -1 +1 @@
1
- $post-icon-version: '10.4.0';
1
+ $post-icon-version: '10.5.0';
package/utilities/_variables.scss CHANGED
@@ -36,7 +36,7 @@ $utilities: (
36
36
  class: border,
37
37
  values: (
38
38
  null: var(--post-border-width, map.get(utilities_formatted.$border-default, width)) solid
39
- map.get(utilities_formatted.$border-default, color),
39
+ map.get(utilities_formatted.$border-default, color),
40
40
  0: 0,
41
41
  ),
42
42
  ),
@@ -45,7 +45,7 @@ $utilities: (
45
45
  class: border-top,
46
46
  values: (
47
47
  null: var(--post-border-width, map.get(utilities_formatted.$border-default, width)) solid
48
- map.get(utilities_formatted.$border-default, color),
48
+ map.get(utilities_formatted.$border-default, color),
49
49
  0: 0,
50
50
  ),
51
51
  ),
@@ -54,7 +54,7 @@ $utilities: (
54
54
  class: border-end,
55
55
  values: (
56
56
  null: var(--post-border-width, map.get(utilities_formatted.$border-default, width)) solid
57
- map.get(utilities_formatted.$border-default, color),
57
+ map.get(utilities_formatted.$border-default, color),
58
58
  0: 0,
59
59
  ),
60
60
  ),
@@ -63,7 +63,7 @@ $utilities: (
63
63
  class: border-bottom,
64
64
  values: (
65
65
  null: var(--post-border-width, map.get(utilities_formatted.$border-default, width)) solid
66
- map.get(utilities_formatted.$border-default, color),
66
+ map.get(utilities_formatted.$border-default, color),
67
67
  0: 0,
68
68
  ),
69
69
  ),
@@ -72,7 +72,7 @@ $utilities: (
72
72
  class: border-start,
73
73
  values: (
74
74
  null: var(--post-border-width, map.get(utilities_formatted.$border-default, width)) solid
75
- map.get(utilities_formatted.$border-default, color),
75
+ map.get(utilities_formatted.$border-default, color),
76
76
  0: 0,
77
77
  ),
78
78
  ),
@@ -86,56 +86,56 @@ $utilities: (
86
86
  property: border-radius,
87
87
  class: rounded,
88
88
  values: map.merge(
89
- utilities_formatted.$border-radius,
90
- (
91
- pill: 50rem,
92
- circle: 50%,
93
- )
94
- ),
89
+ utilities_formatted.$border-radius,
90
+ (
91
+ pill: 50rem,
92
+ circle: 50%,
93
+ )
94
+ ),
95
95
  ),
96
96
  'rounded-top': (
97
97
  property: border-start-start-radius border-start-end-radius,
98
98
  class: rounded-top,
99
99
  values: map.merge(
100
- utilities_formatted.$border-radius,
101
- (
102
- pill: 50rem,
103
- circle: 50%,
104
- )
105
- ),
100
+ utilities_formatted.$border-radius,
101
+ (
102
+ pill: 50rem,
103
+ circle: 50%,
104
+ )
105
+ ),
106
106
  ),
107
107
  'rounded-end': (
108
108
  property: border-start-end-radius border-end-end-radius,
109
109
  class: rounded-end,
110
110
  values: map.merge(
111
- utilities_formatted.$border-radius,
112
- (
113
- pill: 50rem,
114
- circle: 50%,
115
- )
116
- ),
111
+ utilities_formatted.$border-radius,
112
+ (
113
+ pill: 50rem,
114
+ circle: 50%,
115
+ )
116
+ ),
117
117
  ),
118
118
  'rounded-bottom': (
119
119
  property: border-end-end-radius border-end-start-radius,
120
120
  class: rounded-bottom,
121
121
  values: map.merge(
122
- utilities_formatted.$border-radius,
123
- (
124
- pill: 50rem,
125
- circle: 50%,
126
- )
127
- ),
122
+ utilities_formatted.$border-radius,
123
+ (
124
+ pill: 50rem,
125
+ circle: 50%,
126
+ )
127
+ ),
128
128
  ),
129
129
  'rounded-start': (
130
130
  property: border-end-start-radius border-start-start-radius,
131
131
  class: rounded-start,
132
132
  values: map.merge(
133
- utilities_formatted.$border-radius,
134
- (
135
- pill: 50rem,
136
- circle: 50%,
137
- )
138
- ),
133
+ utilities_formatted.$border-radius,
134
+ (
135
+ pill: 50rem,
136
+ circle: 50%,
137
+ )
138
+ ),
139
139
  ),
140
140
  'grid-gutter-x': (
141
141
  responsive: true,
@@ -420,7 +420,7 @@ $utilities: (
420
420
  property: display,
421
421
  class: d,
422
422
  values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex
423
- none,
423
+ none,
424
424
  ),
425
425
  'position': (
426
426
  property: position,
package/variables/components/_notification.scss CHANGED
@@ -43,9 +43,9 @@ $notification-hr-margin-block-map: map.merge(
43
43
  $notification-hr-margin-block-map,
44
44
  (
45
45
  'banner': tokens.get('utility-gap-8', utilities.$post-spacing)
46
- tokens.get('utility-gap-12', utilities.$post-spacing),
46
+ tokens.get('utility-gap-12', utilities.$post-spacing),
47
47
  'toast': tokens.get('utility-gap-4', utilities.$post-spacing)
48
- tokens.get('utility-gap-12', utilities.$post-spacing),
48
+ tokens.get('utility-gap-12', utilities.$post-spacing),
49
49
  )
50
50
  );
51
51
 
@@ -72,16 +72,16 @@ $notification-variants: list.join(
72
72
  $notification-variants,
73
73
  (
74
74
  'info' tokens.get('banner-info-bg') var(--post-signal-icon-info)
75
- tokens.get('banner-info-border-color') tokens.get('banner-info-icon-color')
76
- tokens.get('post-banner-info-bg-scheme'),
75
+ tokens.get('banner-info-border-color') tokens.get('banner-info-icon-color')
76
+ tokens.get('post-banner-info-bg-scheme'),
77
77
  'success' tokens.get('banner-success-bg') var(--post-signal-icon-success)
78
- tokens.get('banner-success-border-color') tokens.get('banner-success-icon-color')
79
- tokens.get('post-banner-success-bg-scheme'),
78
+ tokens.get('banner-success-border-color') tokens.get('banner-success-icon-color')
79
+ tokens.get('post-banner-success-bg-scheme'),
80
80
  'warning' tokens.get('banner-warning-bg') var(--post-signal-icon-warning)
81
- tokens.get('banner-warning-border-color') tokens.get('banner-warning-icon-color')
82
- tokens.get('post-banner-warning-bg-scheme'),
81
+ tokens.get('banner-warning-border-color') tokens.get('banner-warning-icon-color')
82
+ tokens.get('post-banner-warning-bg-scheme'),
83
83
  'error' tokens.get('banner-error-bg') var(--post-signal-icon-error)
84
- tokens.get('banner-error-border-color') tokens.get('banner-error-icon-color')
85
- tokens.get('post-banner-error-bg-scheme')
84
+ tokens.get('banner-error-border-color') tokens.get('banner-error-icon-color')
85
+ tokens.get('post-banner-error-bg-scheme')
86
86
  )
87
87
  );