@swisspost/design-system-styles 10.3.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 (85) hide show
  1. package/basics.css +1 -1
  2. package/cargo-compact.css +1 -1
  3. package/cargo-default.css +1 -1
  4. package/cargo-tokens-compact.css +1 -1
  5. package/cargo-tokens-default.css +1 -1
  6. package/components/_index.scss +1 -0
  7. package/components/button.css +1 -1
  8. package/components/button.scss +17 -0
  9. package/components/chip.scss +1 -1
  10. package/components/dialog.css +1 -1
  11. package/components/dialog.scss +52 -42
  12. package/components/fonts.css +1 -1
  13. package/components/fonts.scss +33 -1
  14. package/components/footer/_post-footer.scss +6 -6
  15. package/components/form-input.css +1 -1
  16. package/components/form-input.scss +41 -29
  17. package/components/form-search-input.scss +1 -1
  18. package/components/form-select.scss +10 -16
  19. package/components/form-textarea.scss +2 -2
  20. package/components/header/_custom-properties.scss +33 -33
  21. package/components/header/_mixins.scss +9 -9
  22. package/components/header/_placeholders.scss +3 -3
  23. package/components/header/_post-header.scss +6 -12
  24. package/components/header/_post-megadropdown.scss +2 -2
  25. package/components/header/index.css +1 -1
  26. package/components/inline-notification.css +1 -0
  27. package/components/inline-notification.scss +63 -0
  28. package/components/list-check.scss +12 -12
  29. package/components/switch.css +1 -1
  30. package/components/switch.scss +10 -6
  31. package/components/tabs/_tab-title.scss +27 -32
  32. package/components/tabs/index.css +1 -1
  33. package/components/toast.css +1 -1
  34. package/components/toast.scss +1 -1
  35. package/components/validation.css +1 -1
  36. package/components/validation.scss +1 -0
  37. package/elements/anchor.css +1 -1
  38. package/elements/anchor.scss +4 -1
  39. package/icons/temp/constructionsitelightsystem-solid.css +4 -0
  40. package/icons/temp/constructionsitelightsystem.css +4 -0
  41. package/icons/temp/hotwork-solid.css +4 -0
  42. package/icons/temp/hotwork.css +4 -0
  43. package/icons/temp/mobilenotification-solid.css +4 -0
  44. package/icons/temp/mobilenotification.css +4 -0
  45. package/icons/temp/okr-solid.css +4 -0
  46. package/icons/temp/okr.css +4 -0
  47. package/icons/temp/postautoelectric-solid.css +4 -0
  48. package/icons/temp/postautoelectric.css +4 -0
  49. package/icons/temp/pricescountryinformation-solid.css +4 -0
  50. package/icons/temp/pricescountryinformation.css +4 -0
  51. package/icons/temp/specialtransport-solid.css +4 -0
  52. package/icons/temp/specialtransport.css +4 -0
  53. package/icons/temp/sustainablepower-solid.css +4 -0
  54. package/icons/temp/sustainablepower.css +4 -0
  55. package/icons/temp/transportmanagement-solid.css +4 -0
  56. package/icons/temp/transportmanagement.css +4 -0
  57. package/icons/temp/underconstruction-solid.css +4 -0
  58. package/icons/temp/underconstruction.css +4 -0
  59. package/layout/_containers.scss +1 -1
  60. package/layout/_section.scss +1 -1
  61. package/mixins/_button.scss +4 -11
  62. package/mixins/_forms.scss +3 -3
  63. package/mixins/_list.scss +5 -5
  64. package/mixins/_utilities.scss +25 -3
  65. package/package.json +6 -6
  66. package/post-compact.css +1 -1
  67. package/post-default.css +1 -1
  68. package/post-tokens-compact.css +1 -1
  69. package/post-tokens-default.css +1 -1
  70. package/tokens/temp/_appearance.scss +1 -1
  71. package/tokens/temp/_components.scss +104 -26
  72. package/tokens/temp/_core.scss +9 -1
  73. package/tokens/temp/_device.scss +55 -1
  74. package/tokens/temp/_elements.scss +1 -1
  75. package/tokens/temp/_helpers.scss +3 -1
  76. package/tokens/temp/_index.scss +1 -1
  77. package/tokens/temp/_palette.scss +5 -1
  78. package/tokens/temp/_scheme.scss +1 -1
  79. package/tokens/temp/_schemestatic.scss +1 -1
  80. package/tokens/temp/_theme.scss +16 -8
  81. package/tokens/temp/_utilities-formatted.scss +1 -1
  82. package/tokens/temp/_utilities.scss +1 -1
  83. package/utilities/_env-variables.scss +1 -1
  84. package/utilities/_variables.scss +36 -36
  85. package/variables/components/_notification.scss +10 -10
package/utilities/_env-variables.scss CHANGED
@@ -1 +1 @@
1
- $post-icon-version: '10.3.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
  );