@swisspost/design-system-styles 9.0.0-next.30 → 9.0.0-next.32

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 (69) hide show
  1. package/basics.css +1 -1
  2. package/cargo-compact.css +7 -0
  3. package/{cargo-external.scss → cargo-compact.scss} +2 -2
  4. package/{cargo-external.css → cargo-default.css} +3 -3
  5. package/{cargo-internal.scss → cargo-default.scss} +2 -2
  6. package/{post-tokens-internal.css → cargo-tokens-compact.css} +1 -1
  7. package/{cargo-tokens-external.scss → cargo-tokens-compact.scss} +2 -2
  8. package/{cargo-tokens-internal.scss → cargo-tokens-default.scss} +2 -2
  9. package/components/card-control.css +1 -1
  10. package/components/card-control.scss +2 -1
  11. package/components/card.css +1 -1
  12. package/components/card.scss +4 -5
  13. package/components/form-input.css +1 -1
  14. package/components/form-input.scss +6 -13
  15. package/components/form-textarea.css +1 -1
  16. package/components/form-textarea.scss +4 -9
  17. package/components/header/_mixins.scss +1 -1
  18. package/components/header/index.css +1 -1
  19. package/components/header/index.scss +1 -4
  20. package/components/pagination.css +1 -1
  21. package/components/pagination.scss +2 -1
  22. package/components/popover.css +1 -1
  23. package/components/product-card.css +1 -1
  24. package/components/product-card.scss +1 -50
  25. package/components/stepper.css +1 -1
  26. package/components/stepper.scss +2 -2
  27. package/components/timepicker.css +1 -1
  28. package/components/timepicker.scss +2 -2
  29. package/elements/anchor.css +1 -1
  30. package/elements/anchor.scss +2 -2
  31. package/elements.css +1 -1
  32. package/index.css +3 -3
  33. package/intranet.css +3 -3
  34. package/mixins/_forms.scss +0 -14
  35. package/package.json +4 -4
  36. package/post-compact.css +7 -0
  37. package/{post-external.scss → post-compact.scss} +2 -2
  38. package/{post-external.css → post-default.css} +3 -3
  39. package/{post-internal.scss → post-default.scss} +2 -2
  40. package/{cargo-tokens-internal.css → post-tokens-compact.css} +1 -1
  41. package/{post-tokens-external.scss → post-tokens-compact.scss} +2 -2
  42. package/{post-tokens-internal.scss → post-tokens-default.scss} +2 -2
  43. package/templates/_not-defined.template.scss +2 -2
  44. package/tokens/_device-compact.scss +15 -0
  45. package/tokens/temp/_channel.scss +1 -1
  46. package/tokens/temp/_components.scss +1 -1
  47. package/tokens/temp/_core.scss +1 -1
  48. package/tokens/temp/_device.scss +1 -1
  49. package/tokens/temp/_elements.scss +1 -1
  50. package/tokens/temp/_helpers.scss +1 -1
  51. package/tokens/temp/_index.scss +1 -1
  52. package/tokens/temp/_palettes.scss +1 -1
  53. package/tokens/temp/_scheme.scss +1 -1
  54. package/tokens/temp/_theme.scss +1 -1
  55. package/tokens/temp/_utilities-formatted.scss +1 -1
  56. package/tokens/temp/_utilities.scss +1 -1
  57. package/tokens/temp/palettes/_cargo-dark.scss +1 -1
  58. package/tokens/temp/palettes/_cargo-light.scss +1 -1
  59. package/tokens/temp/palettes/_post-dark.scss +1 -1
  60. package/tokens/temp/palettes/_post-light.scss +1 -1
  61. package/utilities/_not-defined.scss +35 -35
  62. package/variables/_type.scss +1 -1
  63. package/cargo-internal.css +0 -7
  64. package/post-internal.css +0 -7
  65. /package/{cargo-tokens-external.css → cargo-tokens-default.css} +0 -0
  66. /package/{post-tokens-external.css → post-tokens-default.css} +0 -0
  67. /package/tokens/{_internal.scss → _appearance-compact.scss} +0 -0
  68. /package/tokens/{_external.scss → _appearance-default.scss} +0 -0
  69. /package/tokens/{_device.scss → _device-default.scss} +0 -0
@@ -1,5 +1,5 @@
1
- @use '../tokens/elements';
2
1
  @use '../functions/tokens';
2
+ @use '../tokens/elements';
3
3
  @use '../mixins/utilities';
4
4
 
5
5
  tokens.$default-map: elements.$post-link;
@@ -8,7 +8,7 @@ a {
8
8
  -webkit-text-decoration: tokens.get('link-decoration');
9
9
  text-decoration: tokens.get('link-decoration');
10
10
  border-radius: tokens.get('link-border-radius');
11
- color: inherit;
11
+ color: tokens.get('body-color', elements.$post-body);
12
12
 
13
13
  &:hover {
14
14
  color: tokens.get('link-hover-fg');
package/elements.css CHANGED
@@ -1 +1 @@
1
- @supports(interpolate-size: allow-keywords){:root{interpolate-size:allow-keywords}}*,*::before,*::after{box-sizing:border-box}body{-webkit-font-smoothing:antialiased;margin:0}img,picture,video,canvas,svg{display:block;max-width:100%;height:auto}button,input,textarea,select{font:inherit}button:not(:disabled),[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled){cursor:pointer}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;hyphens:auto}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}code,kbd,samp{font-family:monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}table{caption-side:bottom;border-collapse:collapse}thead,tbody,tfoot,tr,td,th{border-color:inherit;border-style:solid;border-width:0}fieldset,legend{padding:0}fieldset{border:0}input,select,textarea{margin:0}@font-face{font-family:"Swiss Post Sans";font-weight:900;font-display:swap;src:url("https://fonts.post.ch/swiss-post-sans/v1/SwissPostSans-Black.woff2") format("woff2")}@font-face{font-family:"Swiss Post Sans";font-weight:700;font-display:swap;src:url("https://fonts.post.ch/swiss-post-sans/v1/SwissPostSans-Bold.woff2") format("woff2")}@font-face{font-family:"Swiss Post Sans";font-weight:400;font-display:swap;src:url("https://fonts.post.ch/swiss-post-sans/v1/SwissPostSans-Regular.woff2") format("woff2")}body{font-family:var(--post-device-font-family-default),-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--post-device-font-size-6);font-weight:var(--post-device-font-weight-regular);line-height:var(--post-device-line-height-content);letter-spacing:var(--post-core-letter-spacing-default);font-variant-numeric:proportional-nums;color:var(--post-scheme-color-surface-default-fg);min-height:100vh}a{-webkit-text-decoration:var(--post-core-text-decoration-underline);text-decoration:var(--post-core-text-decoration-underline);border-radius:var(--post-device-border-radius-focus);color:inherit}a:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}a{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}a:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){a:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){a:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){a:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){a,a:focus{color:LinkText !important}a:hover{text-decoration-thickness:2px}a:visited{color:VisitedText}}@counter-style post-bullet{system:extends disc;suffix:"    "}ul{list-style:post-bullet;margin-block:var(--post-device-spacing-padding-block-8);padding-inline-start:calc(var(--post-device-sizing-notification-icon-3) + var(--post-device-spacing-gap-inline-10))}ul>li::marker{line-height:1}ul.list-bullet{list-style:none;margin-block:var(--post-device-spacing-padding-block-8);padding-inline-start:calc(var(--post-device-sizing-notification-icon-3) + var(--post-device-spacing-gap-inline-10))}ul.list-bullet>li{margin:0;padding-inline:0;padding-block:var(--post-device-spacing-padding-block-6)}ul.list-bullet>li~li{margin-block-start:var(--post-device-spacing-gap-1)}ul.list-bullet>li::before{display:block;content:"";box-sizing:content-box;float:inline-start;margin-block-start:calc(var(--post-device-line-height-content)*.5em - var(--post-device-sizing-interactive-button-icon-6)*.5);margin-inline-start:calc(var(--post-device-sizing-notification-icon-3)*-0.5 + var(--post-device-sizing-interactive-button-icon-6)*-0.5 + var(--post-device-spacing-gap-inline-10)*-1);width:var(--post-device-sizing-interactive-button-icon-6);height:var(--post-device-sizing-interactive-button-icon-6);background-color:currentColor;border-radius:50%}ul.list-inline{all:unset;display:block;list-style:none;display:flex;flex-wrap:wrap;row-gap:var(--post-device-spacing-gap-1);column-gap:calc(var(--post-device-spacing-gap-inline-10)*2);margin-block:var(--post-device-spacing-padding-block-8)}ul.list-inline>li{all:unset;display:list-item}ul.list-inline>li~li{all:unset;display:list-item}ul.list-inline>li::before{all:unset}ul.list-revert{all:revert}ul.list-revert>li{all:revert}ul.list-revert>li~li{all:revert}ul.list-revert>li::before{all:revert}ul.list-unstyled{all:unset;display:block;list-style:none}ul.list-unstyled>li{all:unset;display:list-item}ul.list-unstyled>li~li{all:unset;display:list-item}ul.list-unstyled>li::before{all:unset}dl dd{margin:0}ol{margin-block:var(--post-device-spacing-gap-1);padding-inline-end:var(--post-device-spacing-gap-1);padding-inline-start:calc(var(--post-device-sizing-notification-icon-3) + var(--post-device-spacing-gap-inline-10))}ol ::marker{font-weight:var(--post-device-font-weight-bold)}ol.list-number{margin-block:var(--post-device-spacing-gap-1);padding-inline-end:var(--post-device-spacing-gap-1);padding-inline-start:calc(var(--post-device-sizing-notification-icon-3) + var(--post-device-spacing-gap-inline-10))}ol.list-number>li{margin-block-end:var(--post-device-spacing-padding-block-8);padding-inline-start:var(--post-device-spacing-gap-inline-10);padding-block:var(--post-device-spacing-padding-block-6)}ol.list-number>li:last-child{margin-block-end:0}ol.list-inline{all:unset;display:block;list-style:none;display:flex;flex-wrap:wrap;row-gap:var(--post-device-spacing-gap-1);column-gap:calc(var(--post-device-spacing-gap-inline-10)*2);margin-block:var(--post-device-spacing-padding-block-8)}ol.list-inline>li{all:unset;display:list-item}ol.list-inline>li~li{all:unset;display:list-item}ol.list-inline>li::before{all:unset}ol.list-revert{all:revert}ol.list-revert>li{all:revert}ol.list-revert>li~li{all:revert}ol.list-revert>li::before{all:revert}ol.list-unstyled{all:unset;display:block;list-style:none}ol.list-unstyled>li{all:unset;display:list-item}ol.list-unstyled>li~li{all:unset;display:list-item}ol.list-unstyled>li::before{all:unset}p{margin-block:var(--post-device-spacing-margin-3)}p:first-child{margin-block-start:0}p:last-child{margin-block-end:0}legend{margin-bottom:var(--post-core-dimension-16);font-weight:var(--post-device-font-weight-bold);line-height:var(--post-device-line-height-legend);width:100%}legend.large{font-size:var(--post-device-font-size-3);padding-block-start:var(--post-device-spacing-margin-1);padding-block-end:calc(var(--post-device-spacing-padding-17) - var(--post-device-border-width-default));margin-block-end:var(--post-device-spacing-margin-4);border-bottom:var(--post-device-border-width-default) var(--post-scheme-color-surface-default-stroke) var(--post-core-border-style-solid)}:is(h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6){line-height:var(--post-device-line-height-heading);font-weight:var(--post-device-font-weight-black)}:is(h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6):first-child{margin-block-start:0}:is(h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6):last-child{margin-block-end:0}h1,.h1{font-size:var(--post-device-font-size-1);margin-block-start:var(--post-device-spacing-margin-1);margin-block-end:var(--post-device-spacing-margin-2)}h2,.h2{font-size:var(--post-device-font-size-2);margin-block-start:var(--post-device-spacing-margin-1);margin-block-end:var(--post-device-spacing-margin-2)}h3,.h3{font-size:var(--post-device-font-size-3);margin-block-start:var(--post-device-spacing-margin-1);margin-block-end:var(--post-device-spacing-margin-3)}h4,.h4{font-size:var(--post-device-font-size-4);margin-block-start:var(--post-device-spacing-margin-1);margin-block-end:var(--post-device-spacing-margin-3)}h5,.h5{font-size:var(--post-device-font-size-5);margin-block-start:var(--post-device-spacing-margin-1);margin-block-end:var(--post-device-spacing-margin-3)}h6,.h6{font-size:var(--post-device-font-size-6);margin-block-start:var(--post-device-spacing-margin-1);margin-block-end:var(--post-device-spacing-margin-3)}
1
+ @supports(interpolate-size: allow-keywords){:root{interpolate-size:allow-keywords}}*,*::before,*::after{box-sizing:border-box}body{-webkit-font-smoothing:antialiased;margin:0}img,picture,video,canvas,svg{display:block;max-width:100%;height:auto}button,input,textarea,select{font:inherit}button:not(:disabled),[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled){cursor:pointer}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;hyphens:auto}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}code,kbd,samp{font-family:monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}table{caption-side:bottom;border-collapse:collapse}thead,tbody,tfoot,tr,td,th{border-color:inherit;border-style:solid;border-width:0}fieldset,legend{padding:0}fieldset{border:0}input,select,textarea{margin:0}@font-face{font-family:"Swiss Post Sans";font-weight:900;font-display:swap;src:url("https://fonts.post.ch/swiss-post-sans/v1/SwissPostSans-Black.woff2") format("woff2")}@font-face{font-family:"Swiss Post Sans";font-weight:700;font-display:swap;src:url("https://fonts.post.ch/swiss-post-sans/v1/SwissPostSans-Bold.woff2") format("woff2")}@font-face{font-family:"Swiss Post Sans";font-weight:400;font-display:swap;src:url("https://fonts.post.ch/swiss-post-sans/v1/SwissPostSans-Regular.woff2") format("woff2")}body{font-family:var(--post-device-font-family-default),-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--post-device-font-size-6);font-weight:var(--post-device-font-weight-regular);line-height:var(--post-device-line-height-content);letter-spacing:var(--post-core-letter-spacing-default);font-variant-numeric:proportional-nums;color:var(--post-scheme-color-surface-default-fg);min-height:100vh}a{-webkit-text-decoration:var(--post-core-text-decoration-underline);text-decoration:var(--post-core-text-decoration-underline);border-radius:var(--post-device-border-radius-focus);color:var(--post-scheme-color-surface-default-fg)}a:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}a{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}a:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){a:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){a:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){a:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){a,a:focus{color:LinkText !important}a:hover{text-decoration-thickness:2px}a:visited{color:VisitedText}}@counter-style post-bullet{system:extends disc;suffix:"    "}ul{list-style:post-bullet;margin-block:var(--post-device-spacing-padding-block-8);padding-inline-start:calc(var(--post-device-sizing-notification-icon-3) + var(--post-device-spacing-gap-inline-10))}ul>li::marker{line-height:1}ul.list-bullet{list-style:none;margin-block:var(--post-device-spacing-padding-block-8);padding-inline-start:calc(var(--post-device-sizing-notification-icon-3) + var(--post-device-spacing-gap-inline-10))}ul.list-bullet>li{margin:0;padding-inline:0;padding-block:var(--post-device-spacing-padding-block-6)}ul.list-bullet>li~li{margin-block-start:var(--post-device-spacing-gap-1)}ul.list-bullet>li::before{display:block;content:"";box-sizing:content-box;float:inline-start;margin-block-start:calc(var(--post-device-line-height-content)*.5em - var(--post-device-sizing-interactive-button-icon-6)*.5);margin-inline-start:calc(var(--post-device-sizing-notification-icon-3)*-0.5 + var(--post-device-sizing-interactive-button-icon-6)*-0.5 + var(--post-device-spacing-gap-inline-10)*-1);width:var(--post-device-sizing-interactive-button-icon-6);height:var(--post-device-sizing-interactive-button-icon-6);background-color:currentColor;border-radius:50%}ul.list-inline{all:unset;display:block;list-style:none;display:flex;flex-wrap:wrap;row-gap:var(--post-device-spacing-gap-1);column-gap:calc(var(--post-device-spacing-gap-inline-10)*2);margin-block:var(--post-device-spacing-padding-block-8)}ul.list-inline>li{all:unset;display:list-item}ul.list-inline>li~li{all:unset;display:list-item}ul.list-inline>li::before{all:unset}ul.list-revert{all:revert}ul.list-revert>li{all:revert}ul.list-revert>li~li{all:revert}ul.list-revert>li::before{all:revert}ul.list-unstyled{all:unset;display:block;list-style:none}ul.list-unstyled>li{all:unset;display:list-item}ul.list-unstyled>li~li{all:unset;display:list-item}ul.list-unstyled>li::before{all:unset}dl dd{margin:0}ol{margin-block:var(--post-device-spacing-gap-1);padding-inline-end:var(--post-device-spacing-gap-1);padding-inline-start:calc(var(--post-device-sizing-notification-icon-3) + var(--post-device-spacing-gap-inline-10))}ol ::marker{font-weight:var(--post-device-font-weight-bold)}ol.list-number{margin-block:var(--post-device-spacing-gap-1);padding-inline-end:var(--post-device-spacing-gap-1);padding-inline-start:calc(var(--post-device-sizing-notification-icon-3) + var(--post-device-spacing-gap-inline-10))}ol.list-number>li{margin-block-end:var(--post-device-spacing-padding-block-8);padding-inline-start:var(--post-device-spacing-gap-inline-10);padding-block:var(--post-device-spacing-padding-block-6)}ol.list-number>li:last-child{margin-block-end:0}ol.list-inline{all:unset;display:block;list-style:none;display:flex;flex-wrap:wrap;row-gap:var(--post-device-spacing-gap-1);column-gap:calc(var(--post-device-spacing-gap-inline-10)*2);margin-block:var(--post-device-spacing-padding-block-8)}ol.list-inline>li{all:unset;display:list-item}ol.list-inline>li~li{all:unset;display:list-item}ol.list-inline>li::before{all:unset}ol.list-revert{all:revert}ol.list-revert>li{all:revert}ol.list-revert>li~li{all:revert}ol.list-revert>li::before{all:revert}ol.list-unstyled{all:unset;display:block;list-style:none}ol.list-unstyled>li{all:unset;display:list-item}ol.list-unstyled>li~li{all:unset;display:list-item}ol.list-unstyled>li::before{all:unset}p{margin-block:var(--post-device-spacing-margin-3)}p:first-child{margin-block-start:0}p:last-child{margin-block-end:0}legend{margin-bottom:var(--post-core-dimension-16);font-weight:var(--post-device-font-weight-bold);line-height:var(--post-device-line-height-legend);width:100%}legend.large{font-size:var(--post-device-font-size-3);padding-block-start:var(--post-device-spacing-margin-1);padding-block-end:calc(var(--post-device-spacing-padding-17) - var(--post-device-border-width-default));margin-block-end:var(--post-device-spacing-margin-4);border-bottom:var(--post-device-border-width-default) var(--post-scheme-color-surface-default-stroke) var(--post-core-border-style-solid)}:is(h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6){line-height:var(--post-device-line-height-heading);font-weight:var(--post-device-font-weight-black)}:is(h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6):first-child{margin-block-start:0}:is(h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6):last-child{margin-block-end:0}h1,.h1{font-size:var(--post-device-font-size-1);margin-block-start:var(--post-device-spacing-margin-1);margin-block-end:var(--post-device-spacing-margin-2)}h2,.h2{font-size:var(--post-device-font-size-2);margin-block-start:var(--post-device-spacing-margin-1);margin-block-end:var(--post-device-spacing-margin-2)}h3,.h3{font-size:var(--post-device-font-size-3);margin-block-start:var(--post-device-spacing-margin-1);margin-block-end:var(--post-device-spacing-margin-3)}h4,.h4{font-size:var(--post-device-font-size-4);margin-block-start:var(--post-device-spacing-margin-1);margin-block-end:var(--post-device-spacing-margin-3)}h5,.h5{font-size:var(--post-device-font-size-5);margin-block-start:var(--post-device-spacing-margin-1);margin-block-end:var(--post-device-spacing-margin-3)}h6,.h6{font-size:var(--post-device-font-size-6);margin-block-start:var(--post-device-spacing-margin-1);margin-block-end:var(--post-device-spacing-margin-3)}