@swisspost/design-system-styles 10.2.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 (88) 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/teaser.css +1 -1
  23. package/components/teaser.scss +2 -1
  24. package/components/toast.css +1 -1
  25. package/components/validation.css +1 -1
  26. package/components/validation.scss +1 -0
  27. package/elements/anchor.css +1 -1
  28. package/elements/anchor.scss +4 -1
  29. package/icons/temp/blocked-solid.css +4 -0
  30. package/icons/temp/blocked.css +4 -0
  31. package/icons/temp/cardreader.css +1 -1
  32. package/icons/temp/checkmarkwide-solid.css +4 -0
  33. package/icons/temp/checkmarkwide.css +4 -0
  34. package/icons/temp/combinedtransport-solid.css +4 -0
  35. package/icons/temp/combinedtransport.css +4 -0
  36. package/icons/temp/constructionsitelightsystem-solid.css +4 -0
  37. package/icons/temp/constructionsitelightsystem.css +4 -0
  38. package/icons/temp/danger-solid.css +1 -1
  39. package/icons/temp/danger.css +1 -1
  40. package/icons/temp/firealarmsystem-solid.css +4 -0
  41. package/icons/temp/firealarmsystem.css +4 -0
  42. package/icons/temp/hotwork-solid.css +4 -0
  43. package/icons/temp/hotwork.css +4 -0
  44. package/icons/temp/lung-solid.css +4 -0
  45. package/icons/temp/lung.css +4 -0
  46. package/icons/temp/mobilenotification-solid.css +4 -0
  47. package/icons/temp/mobilenotification.css +4 -0
  48. package/icons/temp/mountains-solid.css +4 -0
  49. package/icons/temp/mountains.css +4 -0
  50. package/icons/temp/okr-solid.css +4 -0
  51. package/icons/temp/okr.css +4 -0
  52. package/icons/temp/phishing-solid.css +4 -0
  53. package/icons/temp/phishing.css +4 -0
  54. package/icons/temp/phishingattempt-solid.css +4 -0
  55. package/icons/temp/phishingattempt.css +4 -0
  56. package/icons/temp/postautoelectric-solid.css +4 -0
  57. package/icons/temp/postautoelectric.css +4 -0
  58. package/icons/temp/pricescountryinformation-solid.css +4 -0
  59. package/icons/temp/pricescountryinformation.css +4 -0
  60. package/icons/temp/specialtransport-solid.css +4 -0
  61. package/icons/temp/specialtransport.css +4 -0
  62. package/icons/temp/sustainablepower-solid.css +4 -0
  63. package/icons/temp/sustainablepower.css +4 -0
  64. package/icons/temp/transportmanagement-solid.css +4 -0
  65. package/icons/temp/transportmanagement.css +4 -0
  66. package/icons/temp/underconstruction-solid.css +4 -0
  67. package/icons/temp/underconstruction.css +4 -0
  68. package/mixins/_button.scss +4 -11
  69. package/mixins/_utilities.scss +31 -3
  70. package/package.json +3 -3
  71. package/post-compact.css +1 -1
  72. package/post-default.css +1 -1
  73. package/post-tokens-compact.css +1 -1
  74. package/post-tokens-default.css +1 -1
  75. package/tokens/temp/_appearance.scss +1 -1
  76. package/tokens/temp/_components.scss +104 -26
  77. package/tokens/temp/_core.scss +9 -1
  78. package/tokens/temp/_device.scss +55 -1
  79. package/tokens/temp/_elements.scss +1 -1
  80. package/tokens/temp/_helpers.scss +3 -1
  81. package/tokens/temp/_index.scss +1 -1
  82. package/tokens/temp/_palette.scss +5 -1
  83. package/tokens/temp/_scheme.scss +1 -1
  84. package/tokens/temp/_schemestatic.scss +1 -1
  85. package/tokens/temp/_theme.scss +16 -8
  86. package/tokens/temp/_utilities-formatted.scss +1 -1
  87. package/tokens/temp/_utilities.scss +1 -1
  88. package/utilities/_env-variables.scss +1 -1
@@ -0,0 +1,4 @@
1
+ :root,
2
+ :host {
3
+ --post-icon-underconstruction-solid: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxzeW1ib2wgaWQ9ImktdW5kZXJjb25zdHJ1Y3Rpb24tc29saWQiPjxzeW1ib2wgaWQ9InMxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48cGF0aCBkPSJNMTYuMDQgMTYuMDEgMTEuOTEgMTBzLS4wMy0uMDItLjA0LS4wNGEuOS45IDAgMCAwLS4yNi0uMjNjLS4wNC0uMDItLjA5LS4wMi0uMTMtLjAzYS43LjcgMCAwIDAtLjI0LS4wNmMtLjA4IDAtLjE2LjAzLS4yNC4wNi0uMDQuMDEtLjA5LjAxLS4xMy4wM3EtLjE4LjA5LS4zLjI3bC0uNzcgMS4xMS0uNjEtLjc2LjU1LS42Nkw3LjYgNi40NmMtLjM3LS45MS0xLjE3LTEuNTUtMi4wOS0xLjU1aC0uN0wyIDEuNDdhLjc1Ljc1IDAgMCAwLTEuMDYtLjExYy0uMzIuMjYtLjM4LjczLS4xMSAxLjA1bDIuMzkgMi45N2MtLjQ3LjM4LS45MSAxLjA1LTEuMTYgMi4yMmwtLjQ2IDMuMDgtMS41NiA1LjMzaDMuMjVsLjU2LTEuMTcuMTYgMS4xN2gxMi4wNFptLTkuMjgtNC44OGMuMjUuMTguNTQuMjguODQuMjguMTUgMCAuMjktLjAzLjQzLS4wOGwuODYgMS4wNi0xLjY4IDIuNDEtLjQ1LTMuNjhaTTQuMzQgMi4zOEM0LjM0IDEuMDcgNS40LjAxIDYuNzEuMDFzMi4zNyAxLjA2IDIuMzcgMi4zNy0xLjA3IDIuMzctMi4zNyAyLjM3LTIuMzctMS4wNi0yLjM3LTIuMzciLz48L3N5bWJvbD48c3ltYm9sIGlkPSJzMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTI0LjAzIDI0LjAxIDE3Ljg0IDE1YTEgMSAwIDAgMC0uMjEtLjIzYy0uMDMtLjAzLS4wNy0uMDUtLjExLS4wNy0uMDUtLjAzLS4wOS0uMDctLjE0LS4wOXMtLjEtLjA0LS4xNC0uMDVhLjcuNyAwIDAgMC0uMTMtLjA1Yy0uMDUtLjAxLS4wOS0uMDEtLjE0LS4wMi0uMDUgMC0uMS0uMDItLjE1LS4wMnMtLjEuMDEtLjE0LjAyYy0uMDUgMC0uMSAwLS4xNC4wMi0uMDQgMC0uMDguMDMtLjEyLjA0LS4wNS4wMi0uMTEuMDMtLjE2LjA2LS4wNC4wMi0uMDguMDUtLjEyLjA4cy0uMDkuMDUtLjEzLjA5Yy0uMDUuMDUtLjEuMS0uMTUuMTYtLjAyLjAyLS4wNC4wNC0uMDYuMDdsLTEuMjkgMS44Ni0xLjI3LTEuNjUuODUtMS4wOC0zLjE1LTQuOTljLS41Mi0xLjM4LTEuNjUtMi4zNC0yLjk3LTIuMzRINi43OEwyLjQ0IDEuMTZhLjg3Ni44NzYgMCAxIDAtMS4zOSAxLjA3bDMuODkgNS4wNkM0LjE4IDcuOCAzLjQyIDguODMgMyAxMC44NGwtLjcxIDQuOTYtMi4yNiA4LjE5aDQuNDNsMS4xNi0yLjU3LjMyIDIuNTdoMy42MXYuMDJoMTQuNDdaTTkuNTggMTUuOXYtLjE3bC4wNy4wN2MuNC41Ljk3Ljc5IDEuNTYuOC4yNiAwIC41MS0uMDYuNzUtLjE3bDEuNSAxLjk1LTMuMDcgNC40Mi0uOC02Ljg5Wk02LjcyIDMuMTNDNi43MiAxLjQxIDguMTMgMCA5Ljg1IDBzMy4xMyAxLjQgMy4xMyAzLjEyLTEuNDEgMy4xMi0zLjEzIDMuMTItMy4xMy0xLjQtMy4xMy0zLjEyWiIvPjwvc3ltYm9sPjxzeW1ib2wgaWQ9InMzMiIgdmlld0JveD0iMCAwIDMyIDMyIj48cGF0aCBkPSJNMzIuMDEgMzIuMDEgMjMuNzggMjBhMS40IDEuNCAwIDAgMC0uMjgtLjMxYy0uMDMtLjAzLS4wNy0uMDUtLjExLS4wOC0uMDctLjA1LS4xNC0uMTEtLjIyLS4xNS0uMDUtLjAzLS4xMS0uMDQtLjE3LS4wNi0uMDctLjAyLS4xMy0uMDYtLjItLjA3LS4wNi0uMDEtLjEyLS4wMS0uMTgtLjAyLS4wNyAwLS4xMy0uMDItLjItLjAycy0uMTMuMDEtLjIuMDJjLS4wNiAwLS4xMiAwLS4xOC4wMi0uMDcuMDItLjEzLjA1LS4xOS4wN3MtLjEyLjA0LS4xNy4wNmMtLjA4LjA0LS4xNC4wOS0uMjEuMTQtLjA0LjAzLS4wOC4wNS0uMTIuMDgtLjEuMDktLjIuMTktLjI4LjMxbC0xLjY4IDIuNDMtMS42NS0yLjExIDEuMTktMS40Ny00Ljc4LTcuNDItLjAyLS4wMmMtLjk0LTEuNC0yLjQ2LTIuMjgtMy44OC0yLjI4SDguOTdMMi45IDEuMzlhMSAxIDAgMCAwLTEuNC0uMTcgMSAxIDAgMCAwLS4xNyAxLjRsNS40OSA3LjAxYy0xLjA3LjYzLTIuMTcgMS45Ny0yLjc2IDQuNzhsLS45OCA2LjczTDAgMzIuMDFoNS43bDEuODYtNC4wNC41MiA0LjA0SDMyWm0tMTguMTktMS41Ni0xLjA5LTkuMi4wNi0uNzcuNDIuNTJjLjUxLjYzIDEuMjMgMSAxLjk4IDEgLjM4IDAgLjc2LS4xIDEuMS0uMjhsMS45IDIuNDJ6TTguNjEgNC4xM2MwLTIuMjcgMS44NS00LjEyIDQuMTItNC4xMnM0LjExIDEuODUgNC4xMSA0LjEyUzE1IDguMjUgMTIuNzMgOC4yNSA4LjYyIDYuNCA4LjYyIDQuMTNaIi8+PC9zeW1ib2w+PHN5bWJvbCBpZD0iczQwIiB2aWV3Qm94PSIwIDAgNDAgNDAiPjxwYXRoIGQ9Ik00MC4wMiA0MC4wMiAyOS43MiAyNWMtLjEtLjE1LS4yMi0uMjgtLjM1LS4zOS0uMDQtLjAzLS4wOC0uMDUtLjEyLS4wOC0uMS0uMDctLjE5LS4xNS0uMy0uMi0uMDYtLjAzLS4xMy0uMDQtLjE5LS4wNy0uMDktLjAzLS4xOC0uMDgtLjI3LS4xLS4wNy0uMDItLjE0LS4wMi0uMjEtLjAyLS4wOS0uMDEtLjE4LS4wMy0uMjctLjAzLS4wOCAwLS4xNi4wMi0uMjUuMDMtLjA4IDAtLjE1IDAtLjIzLjAzLS4wNy4wMi0uMTQuMDUtLjIyLjA4cy0uMTYuMDUtLjI0LjA5LS4xNS4xLS4yMy4xNWMtLjA2LjA0LS4xMy4wNy0uMTguMTItLjEzLjExLS4yNC4yNC0uMzUuMzlsLTIuMiAzLjE4LTIuMTYtMi43NSAxLjUtMS44NS01Ljk2LTkuMjZzLS4wMSAwLS4wMi0uMDJjLTEuMTYtMS43My0zLjAzLTIuODEtNC43OC0yLjgxaC0xLjY3TDMuMzkgMS43Yy0uMzgtLjQ5LTEuMDktLjU4LTEuNTgtLjE5LS40OS4zOC0uNTcgMS4wOS0uMTkgMS41OGw3IDguOTNjLTEuMzUuNzQtMi43OCAyLjQtMy41NCA2TDMuODQgMjYuNS4wMiA0MC4wMWg2LjkxbDIuNS01LjQzLjcgNS40M2g1Ljc5em0tMjQuMy0xMy40MS4xLTEuMzIuNzQuOTJjLjYzLjc4IDEuNDggMS4yIDIuMzkgMS4yMS41IDAgLjk4LS4xNCAxLjQyLS4zOWwyLjQyIDMuMDktNS42OSA4LjItMS4zOS0xMS43MVpNMTAuOCA1LjA3YzAtMi43OCAyLjI3LTUuMDUgNS4wNS01LjA1czUuMDQgMi4yNiA1LjA0IDUuMDQtMi4yNiA1LjA0LTUuMDQgNS4wNC01LjA0LTIuMjYtNS4wNC01LjA0WiIvPjwvc3ltYm9sPjxzeW1ib2wgaWQ9InM0OCIgdmlld0JveD0iMCAwIDQ4IDQ4Ij48cGF0aCBkPSJNNDggNDguMDMgMzUuNjUgMzAuMDFjLS4xMi0uMTgtLjI2LS4zMy0uNDItLjQ3LS4wNS0uMDUtLjEyLS4wOC0uMTctLjEyLS4xMS0uMDgtLjIxLS4xNi0uMzItLjIyLS4wNy0uMDQtLjE2LS4wNi0uMjMtLjA5LS4xLS4wNC0uMjEtLjA5LS4zMS0uMTItLjA4LS4wMi0uMTYtLjAyLS4yNC0uMDMtLjExLS4wMi0uMjItLjA0LS4zNC0uMDQtLjEgMC0uMTkuMDItLjI5LjAzLS4wOS4wMS0uMTkuMDEtLjI4LjAzcy0uMTguMDctLjI3LjEtLjE5LjA2LS4yNy4xYy0uMDkuMDUtLjE3LjExLS4yNS4xNy0uMDguMDUtLjE3LjEtLjI0LjE2LS4xNS4xMy0uMjkuMjktLjQyLjQ2bC0yLjc0IDMuOTUtMi42Ni0zLjQgMS44MS0yLjI0LTcuMTUtMTEuMXMtLjAxIDAtLjAyLS4wMmMtMS4zNy0yLjA1LTMuNi0zLjM1LTUuNjctMy4zNWgtMi4wNkwzLjgzIDIuMDJjLS40Mi0uNTQtMS4yMS0uNjQtMS43NS0uMjFzLS42NCAxLjIxLS4yMSAxLjc2bDguNTIgMTAuODhjLTEuNjQuODQtMy40IDIuODEtNC4zMyA3LjIxTDQuNTYgMzEuOSAwIDQ4LjAzaDguMTJsMy4xNC02LjgyLjg4IDYuODJ6TTIwLjM2IDQ2LjJsLTEuNjgtMTQuMjMuMTQtMS44NyAxLjA2IDEuMzJjLjczLjkxIDEuNzMgMS40MSAyLjggMS40Mi42MiAwIDEuMi0uMTkgMS43NC0uNWwyLjk1IDMuNzYtNyAxMC4xWk0xMi45NyA2LjAxYzAtMy4zIDIuNjgtNS45OCA1Ljk3LTUuOThTMjQuOTEgMi43MSAyNC45MSA2cy0yLjY4IDUuOTctNS45NyA1Ljk3UzEyLjk3IDkuMjkgMTIuOTcgNloiLz48L3N5bWJvbD48c3ltYm9sIGlkPSJzNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCI+PHBhdGggZD0iTTY0LjAxIDY0LjAzIDQ3LjU0IDQwYTMgMyAwIDAgMC0uNTUtLjYyYy0uMDgtLjA3LS4xOC0uMTItLjI3LS4xOC0uMTMtLjA5LS4yNS0uMi0uMzktLjI3LS4xMS0uMDUtLjIyLS4wOC0uMzMtLjEyLS4xMy0uMDUtLjI2LS4xMS0uNC0uMTUtLjExLS4wMy0uMjMtLjAzLS4zNC0uMDQtLjE0LS4wMi0uMjgtLjA1LS40Mi0uMDVzLS4yOC4wMy0uNDIuMDVjLS4xMS4wMS0uMjMuMDEtLjM0LjA0LS4xNC4wMy0uMjcuMS0uNDEuMTUtLjExLjA0LS4yMi4wNy0uMzIuMTItLjE0LjA3LS4yNy4xOC0uNDEuMjctLjA4LjA2LS4xNy4xLS4yNS4xNy0uMi4xOC0uMzkuMzgtLjU2LjYybC0zLjkgNS42NC0zLjc4LTQuODMgMi40NS0zLjAzLTkuNDktMTQuNzVjLTEuNzktMi42OC00LjY5LTQuMzgtNy4zOS00LjM4aC0yLjkzTDQuNTIgMi41OWMtLjQ3LS42LTEuMzMtLjctMS45My0uMjNzLS43IDEuMzMtLjIzIDEuOTNsMTEuNjkgMTQuOTNjLTIuODMgMS4yNy00LjkyIDQuNTYtNS45OSA5LjY1TDYuMDUgNDIuNjYuMDEgNjQuMDNoMTAuMzNsNC41OS05Ljk4IDEuMjggOS45OHptLTM5LjU5LTIxLjMuMjQtMy4zMiAxLjkyIDIuMzhjLjkzIDEuMTUgMi4xOCAxLjc5IDMuNTIgMS43OS44NyAwIDEuNjktLjI3IDIuNDItLjc2TDM2LjU3IDQ4bC05Ljg2IDE0LjIzLTIuMzEtMTkuNDlaTTE3LjM2IDcuNzdjMC00LjI3IDMuNDYtNy43NCA3LjcyLTcuNzRzNy43MyAzLjQ3IDcuNzMgNy43NC0zLjQ3IDcuNzQtNy43MyA3Ljc0LTcuNzMtMy40Ny03LjczLTcuNzRaIi8+PC9zeW1ib2w+PHVzZSBzdHlsZT0iZGlzcGxheTogdmFyKC0tczE2LCBub25lKSIgaHJlZj0iI3MxNiIvPjx1c2Ugc3R5bGU9ImRpc3BsYXk6IHZhcigtLXMyNCwgbm9uZSkiIGhyZWY9IiNzMjQiLz48dXNlIHN0eWxlPSJkaXNwbGF5OiB2YXIoLS1zMzIsIG5vbmUpIiBocmVmPSIjczMyIi8+PHVzZSBzdHlsZT0iZGlzcGxheTogdmFyKC0tczQwLCBub25lKSIgaHJlZj0iI3M0MCIvPjx1c2Ugc3R5bGU9ImRpc3BsYXk6IHZhcigtLXM0OCwgbm9uZSkiIGhyZWY9IiNzNDgiLz48dXNlIHN0eWxlPSJkaXNwbGF5OiB2YXIoLS1zNjQsIG5vbmUpIiBocmVmPSIjczY0Ii8+PC9zeW1ib2w+PC9kZWZzPjxzdHlsZT5AbWVkaWEgKG1heC13aWR0aDogMjMuOThweCkge2d7LS1zMTY6YmxvY2s7fX1AbWVkaWEgKG1pbi13aWR0aDogMjRweCkgYW5kIChtYXgtd2lkdGg6IDMxLjk4cHgpIHtney0tczI0OmJsb2NrO319QG1lZGlhIChtaW4td2lkdGg6IDMycHgpIGFuZCAobWF4LXdpZHRoOiAzOS45OHB4KSB7Z3stLXMzMjpibG9jazt9fUBtZWRpYSAobWluLXdpZHRoOiA0MHB4KSBhbmQgKG1heC13aWR0aDogNDcuOThweCkge2d7LS1zNDA6YmxvY2s7fX1AbWVkaWEgKG1pbi13aWR0aDogNDhweCkgYW5kIChtYXgtd2lkdGg6IDYzLjk4cHgpIHtney0tczQ4OmJsb2NrO319QG1lZGlhIChtaW4td2lkdGg6IDY0cHgpIHtney0tczY0OmJsb2NrO319PC9zdHlsZT48Zz48dXNlIGhyZWY9IiNpLXVuZGVyY29uc3RydWN0aW9uLXNvbGlkIi8+PC9nPjwvc3ZnPg==");
4
+ }
@@ -0,0 +1,4 @@
1
+ :root,
2
+ :host {
3
+ --post-icon-underconstruction: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxzeW1ib2wgaWQ9ImktdW5kZXJjb25zdHJ1Y3Rpb24iPjxzeW1ib2wgaWQ9InMxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48cGF0aCBkPSJNMTYuMDMgMTYgMTEuOSA5Ljk5Yy0uMTYtLjI0LS40Mi0uMzYtLjY4LS4zNnMtLjUxLjEyLS42OC4zNWwtLjc3IDEuMTEtLjYxLS43Ni41NS0uNjYtMi4xNC0zLjIzQzcuMiA1LjUzIDYuNDEgNC45IDUuNDkgNC45aC0uN2wtMi44LTMuNDVhLjc1Ljc1IDAgMCAwLTEuMDYtLjExYy0uMzIuMjYtLjM4LjczLS4xMSAxLjA1bDIuMzkgMi45N2MtLjQ3LjM4LS45MSAxLjA1LTEuMTYgMi4yMmwtLjQ2IDMuMDhMLjAzIDE2aDMuMjVsLjU2LTEuMTdMNCAxNmgxMi4wNFptLTQuODItNC4zNSAxLjk2IDIuODVIOS4yM3pNNS4zIDE0LjQ5bC0uNTItMy45NWEuNzQuNzQgMCAwIDAtLjg0LS42NGMtLjQxLjA1LS43LjQzLS42NS44NGwuMTggMS4zNC0xLjE0IDIuNDFoLS4yOWwxLjAxLTMuNDZ2LS4wMmwuNDgtMy4xN2MuMDktLjQ0LjM4LTEuNDUuOTgtMS40NWguOTdjLjE5IDAgLjM3LjEyLjUxLjMxLjAyLjA3LjA0LjE0LjA4LjJsMS43NyAyLjY3LS4yNC4zLTEuODktMi4yOGEuNzYuNzYgMCAwIDAtMS4wNi0uMWMtLjMyLjI2LS4zNi43NC0uMSAxLjA2bC43NS45LS4xIDEuMzMuNDUgMy43MWgtLjM0Wm0xLjQ1LTMuMzdjLjI1LjE4LjU0LjI4Ljg0LjI4LjE1IDAgLjI5LS4wMy40My0uMDhsLjg2IDEuMDYtMS42OCAyLjQxLS40NS0zLjY4Wk02LjcgNC43M2MxLjMxIDAgMi4zNy0xLjA2IDIuMzctMi4zN1M4LjAxIDAgNi43IDAgNC4zMyAxLjA2IDQuMzMgMi4zNyA1LjM5IDQuNzQgNi43IDQuNzRabTAtMy4yM2MuNDggMCAuODcuMzkuODcuODZzLS4zOS44Ni0uODcuODYtLjg3LS4zOS0uODctLjg2LjM5LS44Ni44Ny0uODYiLz48L3N5bWJvbD48c3ltYm9sIGlkPSJzMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0ibTI0LjAzIDIzLjk5LTYuMTktOS4wMWMtLjI1LS4zNi0uNjMtLjU0LTEuMDItLjU0LS4zOCAwLS43Ny4xOC0xLjAyLjUzbC0xLjI5IDEuODYtMS4yNy0xLjY1Ljg1LTEuMDgtMy4xNS00Ljk5Yy0uNTItMS4zOC0xLjY1LTIuMzQtMi45Ny0yLjM0SDYuNzhMMi40NCAxLjE1YS44NzYuODc2IDAgMSAwLTEuMzkgMS4wN2wzLjg5IDUuMDZjLS43Ni41MS0xLjUyIDEuNTQtMS45NCAzLjU1bC0uNzEgNC45My0yLjI2IDguMjFoNC40M2wxLjE2LTIuNTguMzMgMi41OGgzLjYxdi4wMnptLTcuMjItNy4zOSAzLjg4IDUuNjVoLTcuODFsMy45Mi01LjY1Wm0tOS4zMyA1LjYyLS44NC02LjYzYS44NzguODc4IDAgMCAwLTEuNzQuMjJsLjI4IDIuMjUtMS44NyA0LjE2aC0uOTlsMS41OS01Ljc2Yy4wMy0uMDcuMDYtLjE0LjA4LS4yMmwuMDItLjEyLjAyLS4wOGgtLjAxbC43LTQuOTFjLjItLjk2LjctMi41OCAxLjc3LTIuNThoMS40OGMuMzggMCAuNzMuMjMgMSAuNTkuMDIuMTIuMDUuMjUuMTIuMzZsMi44NSA0LjUxLS41NS42OWMtLjA2LjA4LS4xMy4xMy0uMTguMTNzLS4xMi0uMDUtLjE4LS4xM2wtMi44OS0zLjY2YS44ODUuODg1IDAgMCAwLTEuMjMtLjE1Yy0uMzguMy0uNDUuODUtLjE1IDEuMjNsMS4yMyAxLjU1LS4xNiAyLjI1LjczIDYuM0g3LjQ5Wm0yLjEtNi4zM3YtLjE3bC4wNy4wN2MuNC41Ljk3Ljc5IDEuNTYuOC4yNiAwIC41MS0uMDYuNzUtLjE3bDEuNSAxLjk1LTMuMDcgNC40Mi0uOC02Ljg5Wm0uMjctOS42NWMxLjczIDAgMy4xMy0xLjQgMy4xMy0zLjEyUzExLjU4IDAgOS44NSAwIDYuNzIgMS40IDYuNzIgMy4xMnMxLjQxIDMuMTIgMy4xMyAzLjEybTAtNC41Yy43NiAwIDEuMzguNjIgMS4zOCAxLjM3YTEuMzggMS4zOCAwIDAgMS0yLjc2IDBjMC0uNzUuNjItMS4zNyAxLjM4LTEuMzciLz48L3N5bWJvbD48c3ltYm9sIGlkPSJzMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0ibTMyLjAxIDMxLjk5LTguMjMtMTIuMDFjLS4zMy0uNDgtLjg0LS43MS0xLjM2LS43MS0uNTEgMC0xLjAyLjI0LTEuMzUuNzFsLTEuNjggMi40My0xLjY1LTIuMTEgMS4xOS0xLjQ3LTQuNzgtNy40My0uMDItLjAyYy0uOTQtMS40LTIuNDYtMi4yOC0zLjg4LTIuMjhIOC45N0wyLjkgMS4zN2ExIDEgMCAwIDAtMS40LS4xNyAxIDEgMCAwIDAtLjE3IDEuNGw1LjQ5IDcuMDFjLTEuMDcuNjMtMi4xNyAxLjk3LTIuNzYgNC43OWwtLjk4IDYuNjlMMCAzMmg1LjdsMS44Ni00LjA2LjUyIDQuMDZIMzJabS05LjU5LTEwLjQ1IDUuOCA4LjQ1SDE2LjU2ek05Ljg1IDMwbC0xLjE4LTkuMTRjLS4wNy0uNTUtLjU2LS45Mi0xLjEyLS44Ni0uNTUuMDctLjkzLjU3LS44NiAxLjEybC40IDMuMDktMi42NiA1LjhIMi42NWwyLjI1LTcuOTdjLjA2LS4xLjEtLjIxLjEyLS4zNGwuMDMtLjE5LjAzLS4xMmgtLjAybC45Ny02LjY0Yy4yOS0xLjM2IDEuMDItMy42NSAyLjY2LTMuNjVoMS41NmMuODQgMCAxLjc4LjY0IDIuMzMgMS42di0uMDJsMy44OCA2LjAxLS44NCAxLjAzYy0uMTMuMTYtLjI4LjI1LS40My4yNS0uMTQgMC0uMy0uMDktLjQzLS4yNWwtMy45OS00Ljk2YTEuMDAyIDEuMDAyIDAgMSAwLTEuNTYgMS4yNmwxLjc0IDIuMTYtLjIzIDMuMUwxMS43NSAzMHptMi45NC05LjU0LjQyLjUyYy41MS42MyAxLjIzIDEgMS45OCAxIC4zOCAwIC43Ni0uMSAxLjEtLjI4bDEuOSAyLjQyLTQuMzcgNi4zMS0xLjA5LTkuMnptLS4wNi0xMi4yM2MyLjI3IDAgNC4xMS0xLjg1IDQuMTEtNC4xMlMxNSAwIDEyLjczIDAgOC42MiAxLjg1IDguNjIgNC4xMnMxLjg0IDQuMTIgNC4xMSA0LjEyWm0wLTYuMjNjMS4xNyAwIDIuMTEuOTUgMi4xMSAyLjEycy0uOTUgMi4xMi0yLjExIDIuMTItMi4xMS0uOTUtMi4xMS0yLjEyUzExLjU3IDIgMTIuNzMgMiIvPjwvc3ltYm9sPjxzeW1ib2wgaWQ9InM0MCIgdmlld0JveD0iMCAwIDQwIDQwIj48cGF0aCBkPSJtNDAuMDIgNDAuMDEtMTAuMy0xNS4wMmMtLjQxLS42LTEuMDUtLjg5LTEuNy0uODktLjY0IDAtMS4yOC4yOS0xLjY5Ljg5bC0yLjIgMy4xOC0yLjE2LTIuNzUgMS41LTEuODUtNS45Ni05LjI2cy0uMDEgMC0uMDItLjAyYy0xLjE2LTEuNzMtMy4wMy0yLjgxLTQuNzgtMi44MWgtMS42N0wzLjM5IDEuNjljLS4zOC0uNDktMS4wOS0uNTgtMS41OC0uMTktLjQ5LjM4LS41NyAxLjA5LS4xOSAxLjU4bDcgOC45M2MtMS4zNS43NC0yLjc4IDIuNC0zLjU0IDZsLTEuMjUgOC41N0wuMDIgNDBoNi45MWwyLjUtNS40Mi43IDUuNDJoNS43OXpNMjguMDMgMjYuNWw3LjcyIDExLjI2SDIwLjIyek0xMi4xMSAzNy43NWwtMS40OS0xMS42MmExLjEyIDEuMTIgMCAwIDAtMS4yNi0uOTdjLS42Mi4wOC0xLjA1LjY0LS45NyAxLjI2bC41MSAzLjk1LTMuNCA3LjM4SDNsMi45Ni0xMC40MmMuMDItLjA2LjA1LS4xMS4wNi0uMTd2LS4wOWwuMDQtLjFoLS4wMWwxLjI1LTguNTVjLjM3LTEuNzUgMS4zMS00LjY5IDMuNDctNC42OWgxLjk2YzEuMDkgMCAyLjMxLjgyIDMuMDMgMi4wNGwuMDItLjAyIDQuOTMgNy42Ni0xLjExIDEuMzdjLS4xOS4yNC0uNDIuMzctLjY0LjM3cy0uNDUtLjEzLS42NC0uMzdsLTUuMDItNi4yM2MtLjM5LS40OC0xLjEtLjU2LTEuNTgtLjE3cy0uNTYgMS4xLS4xNyAxLjU4bDIuMjIgMi43NS0uMjkgMy45MyAxLjMxIDExLjFoLTIuNjZabTMuNjEtMTEuMTYuMS0xLjMyLjc0LjkyYy42My43OCAxLjQ4IDEuMiAyLjM5IDEuMjEuNSAwIC45OC0uMTQgMS40Mi0uMzlsMi40MiAzLjA5LTUuNjkgOC4yLTEuMzktMTEuNzFabS4xMy0xNi40OWMyLjc4IDAgNS4wNC0yLjI2IDUuMDQtNS4wNFMxOC42My4wMSAxNS44NS4wMXMtNS4wNCAyLjI2LTUuMDQgNS4wNSAyLjI2IDUuMDQgNS4wNCA1LjA0bTAtNy44NGEyLjc5MSAyLjc5MSAwIDAgMSAwIDUuNTggMi43OTEgMi43OTEgMCAwIDEgMC01LjU4Ii8+PC9zeW1ib2w+PHN5bWJvbCBpZD0iczQ4IiB2aWV3Qm94PSIwIDAgNDggNDgiPjxwYXRoIGQ9Ik00OCA0OC4wMiAzNS42NSAzMGEyLjQ1IDIuNDUgMCAwIDAtMi4wMy0xLjA3Yy0uNzcgMC0xLjU0LjM1LTIuMDMgMS4wNmwtMi43NCAzLjk1LTIuNjYtMy40TDI4IDI4LjNsLTcuMTUtMTEuMXMtLjAxIDAtLjAyLS4wMmMtMS4zNy0yLjA1LTMuNi0zLjM1LTUuNjctMy4zNUgxMy4xTDMuODMgMmMtLjQyLS41NC0xLjIxLS42NC0xLjc1LS4yMVMxLjQ0IDMgMS44NyAzLjU1bDguNTIgMTAuODhjLTEuNjQuODQtMy40IDIuODEtNC4zMyA3LjIxTDQuNTMgMzIuMDkgMCA0OC4wMmg4LjEybDMuMTUtNi44MS44OCA2LjgxaDM1Ljg2Wk0zMy42MiAzMS40NWw5LjY0IDE0LjA2SDIzLjg3ek0xNC4zNSA0NS41MmwtMS44MS0xNC4xYy0uMDktLjY5LS43My0xLjE3LTEuNC0xLjA4LS42OS4wOS0xLjE3LjcyLTEuMDggMS40bC42MiA0LjgxLTQuMTQgOC45N0gzLjMybDMuNjctMTIuODd2LS4wMmwuMDktLjMzaC0uMDRsMS40OS0xMC4yMmMuNDUtMi4xNCAxLjYxLTUuNzQgNC4yOS01Ljc0aDIuMzZjMS4zMyAwIDIuODQuOTkgMy43MyAyLjQ4bC4wMi0uMDIgNiA5LjMyLTEuMzkgMS43MmMtLjI1LjMxLS41Ni40OC0uODYuNDhzLS42LS4xNy0uODYtLjQ4bC02LjA2LTcuNTJjLS40My0uNTQtMS4yMi0uNjItMS43Ni0uMTlzLS42MiAxLjIyLS4xOSAxLjc2bDIuNyAzLjM1LS4zNSA0Ljc4IDEuNiAxMy41aC0zLjQyWm00LjQ2LTE1LjQyIDEuMDYgMS4zMmMuNzMuOTEgMS43MyAxLjQxIDIuOCAxLjQyLjYyIDAgMS4yMS0uMTkgMS43NC0uNWwyLjk1IDMuNzYtNyAxMC4xLTEuNjgtMTQuMjMuMTQtMS44N1ptLjEzLTE4LjEzYzMuMjkgMCA1Ljk3LTIuNjggNS45Ny01Ljk3UzIyLjIzLjAyIDE4Ljk0LjAycy01Ljk3IDIuNjgtNS45NyA1Ljk3IDIuNjggNS45NyA1Ljk3IDUuOTdabTAtOS40NWMxLjkxIDAgMy40NyAxLjU2IDMuNDcgMy40N3MtMS41NiAzLjQ3LTMuNDcgMy40Ny0zLjQ3LTEuNTYtMy40Ny0zLjQ3IDEuNTYtMy40NyAzLjQ3LTMuNDciLz48L3N5bWJvbD48c3ltYm9sIGlkPSJzNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCI+PHBhdGggZD0iTTY0LjAxIDY0LjAyIDQ3LjU0IDM5Ljk5YTMuMjcgMy4yNyAwIDAgMC0yLjcxLTEuNDNjLTEuMDIgMC0yLjA1LjQ3LTIuNyAxLjQybC0zLjkgNS42NC0zLjc4LTQuODMgMi40NS0zLjAzLTkuNDktMTQuNzUtLjA3LS4wN2MtMS43OS0yLjY0LTQuNjUtNC4zMS03LjMyLTQuMzFoLTIuOTNMNC41MiAyLjU3Yy0uNDctLjYtMS4zMy0uNy0xLjkzLS4yM3MtLjcgMS4zMy0uMjMgMS45M2wxMS43IDE0LjkzYy0yLjgzIDEuMjctNC45MiA0LjU2LTUuOTkgOS42NUw2IDQzLjA1LjAxIDY0LjAxaDEwLjMzbDQuNi05Ljk0IDEuMjggOS45NGg0Ny44Wk00NC4zOSA0MS41NGMuMTMtLjE5LjMxLS4yMy40NC0uMjNzLjMxLjA0LjQ0LjIzbDEzLjUyIDE5LjcySDMwLjcybDEzLjY2LTE5LjcyWk0xOC42MyA2MS4yNmwtMi40Ny0xOS4yNWExLjM4IDEuMzggMCAwIDAtMS41NC0xLjE5Yy0uNzUuMS0xLjI4Ljc5LTEuMTkgMS41NGwuODQgNi41NS01LjY5IDEyLjM1SDMuNjVsNS4yMi0xOC4yOS0uMDktLjAzIDEuOTktMTMuNjFjLjYzLTIuOTggMi4yNS03Ljk3IDYuMDctNy45N2gzLjE3YzEuOTEgMCA0LjAxIDEuMzQgNS4yNiAzLjQxczguMjQgMTIuOCA4LjI0IDEyLjhsLTIuMDEgMi40OGMtLjQuNDktLjg5Ljc2LTEuMzkuNzZzLS45OS0uMjctMS4zOS0uNzdsLTguMTUtMTAuMTJjLS40OC0uNTktMS4zNC0uNjgtMS45My0uMjFzLS42OCAxLjM0LS4yMSAxLjkzbDMuNzEgNC42LS40OCA2LjUyIDIuMTkgMTguNDhoLTUuMjFabTUuNzktMTguNTQuMjQtMy4zMiAxLjkyIDIuMzhjLjkzIDEuMTUgMi4xOCAxLjc5IDMuNTIgMS43OS44NyAwIDEuNjktLjI3IDIuNDItLjc2bDQuMDUgNS4xOC05Ljg2IDE0LjI0LTIuMzEtMTkuNDlabS42Ni0yNy4yM2M0LjI2IDAgNy43My0zLjQ3IDcuNzMtNy43NFMyOS4zNC4wMiAyNS4wOC4wMnMtNy43MyAzLjQ3LTcuNzMgNy43NCAzLjQ3IDcuNzQgNy43MyA3Ljc0Wm0wLTEyLjcyYzIuNzQgMCA0Ljk4IDIuMjQgNC45OCA0Ljk4cy0yLjIzIDQuOTgtNC45OCA0Ljk4LTQuOTgtMi4yNC00Ljk4LTQuOTggMi4yMy00Ljk4IDQuOTgtNC45OCIvPjwvc3ltYm9sPjx1c2Ugc3R5bGU9ImRpc3BsYXk6IHZhcigtLXMxNiwgbm9uZSkiIGhyZWY9IiNzMTYiLz48dXNlIHN0eWxlPSJkaXNwbGF5OiB2YXIoLS1zMjQsIG5vbmUpIiBocmVmPSIjczI0Ii8+PHVzZSBzdHlsZT0iZGlzcGxheTogdmFyKC0tczMyLCBub25lKSIgaHJlZj0iI3MzMiIvPjx1c2Ugc3R5bGU9ImRpc3BsYXk6IHZhcigtLXM0MCwgbm9uZSkiIGhyZWY9IiNzNDAiLz48dXNlIHN0eWxlPSJkaXNwbGF5OiB2YXIoLS1zNDgsIG5vbmUpIiBocmVmPSIjczQ4Ii8+PHVzZSBzdHlsZT0iZGlzcGxheTogdmFyKC0tczY0LCBub25lKSIgaHJlZj0iI3M2NCIvPjwvc3ltYm9sPjwvZGVmcz48c3R5bGU+QG1lZGlhIChtYXgtd2lkdGg6IDIzLjk4cHgpIHtney0tczE2OmJsb2NrO319QG1lZGlhIChtaW4td2lkdGg6IDI0cHgpIGFuZCAobWF4LXdpZHRoOiAzMS45OHB4KSB7Z3stLXMyNDpibG9jazt9fUBtZWRpYSAobWluLXdpZHRoOiAzMnB4KSBhbmQgKG1heC13aWR0aDogMzkuOThweCkge2d7LS1zMzI6YmxvY2s7fX1AbWVkaWEgKG1pbi13aWR0aDogNDBweCkgYW5kIChtYXgtd2lkdGg6IDQ3Ljk4cHgpIHtney0tczQwOmJsb2NrO319QG1lZGlhIChtaW4td2lkdGg6IDQ4cHgpIGFuZCAobWF4LXdpZHRoOiA2My45OHB4KSB7Z3stLXM0ODpibG9jazt9fUBtZWRpYSAobWluLXdpZHRoOiA2NHB4KSB7Z3stLXM2NDpibG9jazt9fTwvc3R5bGU+PGc+PHVzZSBocmVmPSIjaS11bmRlcmNvbnN0cnVjdGlvbiIvPjwvZz48L3N2Zz4=");
4
+ }
@@ -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
  }
@@ -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
  }
@@ -155,3 +177,9 @@
155
177
  }
156
178
  }
157
179
  }
180
+
181
+ @mixin word-break() {
182
+ overflow-wrap: anywhere;
183
+ hyphens: auto;
184
+ line-break: strict;
185
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@swisspost/design-system-styles",
3
- "version": "10.2.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.2.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.2.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",