@swisspost/design-system-styles 10.3.0 → 10.4.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 (67) 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/button.css +1 -1
  7. package/components/button.scss +17 -0
  8. package/components/dialog.css +1 -1
  9. package/components/dialog.scss +51 -41
  10. package/components/form-input.css +1 -1
  11. package/components/form-input.scss +27 -15
  12. package/components/header/_custom-properties.scss +27 -27
  13. package/components/header/_mixins.scss +9 -9
  14. package/components/header/_placeholders.scss +3 -3
  15. package/components/header/_post-header.scss +6 -12
  16. package/components/header/_post-megadropdown.scss +2 -2
  17. package/components/header/index.css +1 -1
  18. package/components/switch.css +1 -1
  19. package/components/switch.scss +7 -3
  20. package/components/tabs/_tab-title.scss +13 -24
  21. package/components/tabs/index.css +1 -1
  22. package/components/toast.css +1 -1
  23. package/components/validation.css +1 -1
  24. package/components/validation.scss +1 -0
  25. package/elements/anchor.css +1 -1
  26. package/elements/anchor.scss +4 -1
  27. package/icons/temp/constructionsitelightsystem-solid.css +4 -0
  28. package/icons/temp/constructionsitelightsystem.css +4 -0
  29. package/icons/temp/hotwork-solid.css +4 -0
  30. package/icons/temp/hotwork.css +4 -0
  31. package/icons/temp/mobilenotification-solid.css +4 -0
  32. package/icons/temp/mobilenotification.css +4 -0
  33. package/icons/temp/okr-solid.css +4 -0
  34. package/icons/temp/okr.css +4 -0
  35. package/icons/temp/postautoelectric-solid.css +4 -0
  36. package/icons/temp/postautoelectric.css +4 -0
  37. package/icons/temp/pricescountryinformation-solid.css +4 -0
  38. package/icons/temp/pricescountryinformation.css +4 -0
  39. package/icons/temp/specialtransport-solid.css +4 -0
  40. package/icons/temp/specialtransport.css +4 -0
  41. package/icons/temp/sustainablepower-solid.css +4 -0
  42. package/icons/temp/sustainablepower.css +4 -0
  43. package/icons/temp/transportmanagement-solid.css +4 -0
  44. package/icons/temp/transportmanagement.css +4 -0
  45. package/icons/temp/underconstruction-solid.css +4 -0
  46. package/icons/temp/underconstruction.css +4 -0
  47. package/mixins/_button.scss +4 -11
  48. package/mixins/_utilities.scss +25 -3
  49. package/package.json +3 -3
  50. package/post-compact.css +1 -1
  51. package/post-default.css +1 -1
  52. package/post-tokens-compact.css +1 -1
  53. package/post-tokens-default.css +1 -1
  54. package/tokens/temp/_appearance.scss +1 -1
  55. package/tokens/temp/_components.scss +104 -26
  56. package/tokens/temp/_core.scss +9 -1
  57. package/tokens/temp/_device.scss +55 -1
  58. package/tokens/temp/_elements.scss +1 -1
  59. package/tokens/temp/_helpers.scss +3 -1
  60. package/tokens/temp/_index.scss +1 -1
  61. package/tokens/temp/_palette.scss +5 -1
  62. package/tokens/temp/_scheme.scss +1 -1
  63. package/tokens/temp/_schemestatic.scss +1 -1
  64. package/tokens/temp/_theme.scss +16 -8
  65. package/tokens/temp/_utilities-formatted.scss +1 -1
  66. package/tokens/temp/_utilities.scss +1 -1
  67. package/utilities/_env-variables.scss +1 -1
package/mixins/_button.scss CHANGED
@@ -63,19 +63,12 @@
63
63
  @include utilities.focus-style;
64
64
 
65
65
  @include utilities.high-contrast-mode() {
66
+ border-width: 1px !important;
67
+ transition: none;
68
+
66
69
  &:is(button) {
67
70
  background-color: ButtonFace !important;
68
- border: 1px solid ButtonBorder !important;
69
- }
70
-
71
- &:not(:disabled, .disabled) {
72
- &:is(button):hover {
73
- background-color: Highlight !important;
74
-
75
- > post-icon {
76
- color: HighlightText !important;
77
- }
78
- }
71
+ border-color: ButtonBorder !important;
79
72
  }
80
73
  }
81
74
  }
package/mixins/_utilities.scss CHANGED
@@ -76,9 +76,12 @@
76
76
  outline: none !important;
77
77
  }
78
78
 
79
- @mixin focus-style($additional-selector: '') {
79
+ @mixin focus-style(
80
+ $additional-selector: '',
81
+ $outline-offset: tokens.get('focus-outline-offset', helpers.$post-focus)
82
+ ) {
80
83
  &#{$additional-selector} {
81
- outline-offset: tokens.get('focus-outline-offset', helpers.$post-focus) !important;
84
+ outline-offset: $outline-offset !important;
82
85
  outline: tokens.get('focus-outline-color', helpers.$post-focus) none
83
86
  tokens.get('focus-outline-width', helpers.$post-focus) !important;
84
87
  }
@@ -115,16 +118,35 @@
115
118
  }
116
119
  }
117
120
 
118
- @mixin focus-style-custom($additional-selector: '') {
121
+ @mixin focus-style-custom(
122
+ $additional-selector: '',
123
+ $outline-offset: tokens.get('focus-outline-offset', helpers.$post-focus),
124
+ $outline-color: tokens.get('focus-outline-color', helpers.$post-focus)
125
+ ) {
126
+ &#{$additional-selector} {
127
+ outline-offset: $outline-offset !important;
128
+ outline: $outline-color none tokens.get('focus-outline-width', helpers.$post-focus) !important;
129
+ }
130
+
119
131
  // :has(:focus-visible) mimic a focus-visible-within pseudo-class
120
132
  &:is(:focus-visible, :has(:focus-visible), .pretend-focus)#{$additional-selector} {
133
+ outline-style: tokens.get('focus-border-style', helpers.$post-focus) !important;
121
134
  @content;
135
+
136
+ @include high-contrast-mode() {
137
+ outline-color: Highlight !important;
138
+ }
122
139
  }
123
140
 
124
141
  // When a browser doesn't support :has, use focus-within as a fallback. This means that focus state is displayed on focus and not on focus-visible only (except some browsers like Safari).
125
142
  @supports not selector(:has(:focus-visible)) {
126
143
  &:is(:focus-visible, :focus-within, .pretend-focus)#{$additional-selector} {
144
+ outline-style: tokens.get('focus-border-style', helpers.$post-focus) !important;
127
145
  @content;
146
+
147
+ @include high-contrast-mode() {
148
+ outline-color: Highlight !important;
149
+ }
128
150
  }
129
151
  }
130
152
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@swisspost/design-system-styles",
3
- "version": "10.3.0",
3
+ "version": "10.4.0",
4
4
  "description": "Design System Styles for the Swiss Post web platform.",
5
5
  "author": "Swiss Post <design-system@post.ch>",
6
6
  "license": "Apache-2.0",
@@ -19,11 +19,11 @@
19
19
  },
20
20
  "dependencies": {
21
21
  "@popperjs/core": "2.11.8",
22
- "@swisspost/design-system-icons": "10.3.0",
22
+ "@swisspost/design-system-icons": "10.4.0",
23
23
  "gulp-sourcemaps": "3.0.0"
24
24
  },
25
25
  "devDependencies": {
26
- "@swisspost/design-system-tokens": "10.3.0",
26
+ "@swisspost/design-system-tokens": "10.4.0",
27
27
  "@types/node": "24.0.0",
28
28
  "autoprefixer": "10.5.0",
29
29
  "copyfiles": "2.4.1",