@swisspost/design-system-styles 9.0.0-next.2 → 9.0.0-next.21

package/elements/list-bullet.css

@@ -0,0 +1 @@
+@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}

package/elements/list-bullet.scss

@@ -0,0 +1,43 @@
+@use '../functions/tokens';
+@use '../tokens/elements';
+@use '../mixins/list' as list-mx;
+
+tokens.$default-map: elements.$post-listbullet;
+
+/* The chars used in suffix are spaces with different widths
+For more information, visit: https://www.fileformat.info/info/unicode/char/search.htm?q=space
+*/
+@counter-style post-bullet {
+  system: extends disc;
+  suffix: '\2007\2009\200a\200a';
+}
+
+ul {
+  list-style: post-bullet;
+  margin-block: tokens.get('list-bullet-margin-block');
+  padding-inline-start: calc(
+    #{tokens.get('list-bullet-item-icon-size')} + #{tokens.get('list-bullet-item-icon-gap-inline')}
+  );
+
+  > li {
+    &::marker {
+      line-height: 1;
+    }
+  }
+
+  &.list-bullet {
+    @include list-mx.list-bullet();
+  }
+
+  &.list-inline {
+    @include list-mx.list-inline();
+  }
+
+  &.list-revert {
+    @include list-mx.list-revert();
+  }
+
+  &.list-unstyled {
+    @include list-mx.list-unstyled();
+  }
+}

package/elements/list-description.css

@@ -0,0 +1 @@
+dl dd{margin:0}

package/elements/list-description.scss

@@ -0,0 +1,5 @@
+dl {
+  dd {
+    margin: 0;
+  }
+}

package/elements/list-number.css

@@ -0,0 +1 @@
+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}

package/elements/list-number.scss

@@ -0,0 +1,33 @@
+@use '../functions/tokens';
+@use '../tokens/elements';
+@use '../mixins/list';
+
+tokens.$default-map: elements.$post-listnumber;
+
+ol {
+  margin-block: tokens.get('list-number-item-gap-block');
+  padding-inline-end: tokens.get('list-number-item-gap-block');
+  padding-inline-start: calc(
+    tokens.get('list-number-item-icon-size') + tokens.get('list-number-item-icon-gap-inline')
+  );
+
+  ::marker {
+    font-weight: tokens.get('list-number-item-icon-font-weight');
+  }
+
+  &.list-number {
+    @include list.list-number();
+  }
+
+  &.list-inline {
+    @include list.list-inline();
+  }
+
+  &.list-revert {
+    @include list.list-revert();
+  }
+
+  &.list-unstyled {
+    @include list.list-unstyled();
+  }
+}

package/elements/paragraph.css

@@ -0,0 +1 @@
+p{margin-block:var(--post-device-spacing-margin-3)}p:first-child{margin-block-start:0}p:last-child{margin-block-end:0}

package/elements/paragraph.scss

@@ -0,0 +1,17 @@
+@use 'sass:map';
+@use '../functions/tokens';
+@use '../tokens/elements';
+
+tokens.$default-map: elements.$post-paragraph;
+
+p {
+  margin-block: tokens.get('paragraph-margin-block-start');
+
+  &:first-child {
+    margin-block-start: 0;
+  }
+
+  &:last-child {
+    margin-block-end: 0;
+  }
+}

package/elements/reset.css

@@ -1 +1 @@
-*,*::before,*::after{box-sizing:border-box}*{margin:0}body{-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}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}
+@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}

package/elements/reset.scss

@@ -1,3 +1,11 @@
+// Enable transitions to height: auto and the like
+// https://utilitybend.com/blog/added-to-my-css-reset-interpolate-size-the-quality-of-life-feature-we-all-wanted-at-some-point
+:root {
+  @supports (interpolate-size: allow-keywords) {
+    interpolate-size: allow-keywords;
+  }
+}
+
 /* === Source: Josh Comeau, https://www.joshwcomeau.com/css/custom-css-reset/ (adapted) === */
 
 /*
@@ -9,13 +17,6 @@
   box-sizing: border-box;
 }
 
-/*
-  Remove default margin
-*/
-* {
-  margin: 0;
-}
-
 /*
   Typographic tweaks!
   - Add accessible line-height
@@ -23,6 +24,7 @@
 */
 body {
   -webkit-font-smoothing: antialiased;
+  margin: 0;
 }
 
 /*
@@ -35,6 +37,7 @@ canvas,
 svg {
   display: block;
   max-width: 100%;
+  height: auto;
 }
 
 /*
@@ -152,3 +155,9 @@ legend {
 fieldset {
   border: 0;
 }
+
+input,
+select,
+textarea {
+  margin: 0;
+}

package/elements.css

@@ -0,0 +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)}

package/elements.scss

@@ -0,0 +1 @@
+@use './elements/index';

package/fonts.css

@@ -1 +1 @@
-@font-face{font-display:swap;font-family:"Swiss Post Sans v005";font-weight:900;src:url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-XBlk.woff2") format("woff2"),url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-XBlk.woff") format("woff")}@font-face{font-display:swap;font-family:"Swiss Post Sans v005";font-weight:900;font-style:italic;src:url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-XBlkIt.woff2") format("woff2"),url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-XBlkIt.woff") format("woff")}@font-face{font-display:swap;font-family:"Swiss Post Sans v005";font-weight:700;src:url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Bold.woff2") format("woff2"),url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Bold.woff") format("woff")}@font-face{font-display:swap;font-family:"Swiss Post Sans v005";font-weight:700;font-style:italic;src:url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-BdIt.woff2") format("woff2"),url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-BdIt.woff") format("woff")}@font-face{font-display:swap;font-family:"Swiss Post Sans v005";font-weight:400;src:url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Rg.woff2") format("woff2"),url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Rg.woff") format("woff")}@font-face{font-display:swap;font-family:"Swiss Post Sans v005";font-weight:400;font-style:italic;src:url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-It.woff2") format("woff2"),url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-It.woff") format("woff")}
+@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")}

package/functions/_breakpoint.scss

@@ -0,0 +1,26 @@
+@use 'sass:map';
+@use 'sass:list';
+@use '../variables/breakpoints';
+
+/**
+  Gets a breakpoint from the map based on the key
+*/
+@function min-width($key) {
+  @return map.get(breakpoints.$grid-breakpoints, $key);
+}
+
+/**
+  Gets a breakpoint infix
+*/
+@function infix($key) {
+  @return if(min-width($key) == 0, '', '-#{$key}');
+}
+
+/**
+* Gets the next breakpoint key
+*/
+@function next($key) {
+  $breakpoint-names: map.keys(breakpoints.$grid-breakpoints);
+  $n: list.index($breakpoint-names, $key);
+  @return if($n < list.length($breakpoint-names), list.nth($breakpoint-names, $n + 1), null);
+}

package/functions/_forms.scss

@@ -1,3 +1,11 @@
+@use 'sass:map';
+
+@use './color';
+@use '../functions/tokens';
+@use '../functions/icons';
+@use '../functions/utilities';
+@use '../variables/components/forms';
+
 // Source: https://kovart.github.io/dashed-border-generator/ + added stroke-vector-effect
 @function get-background-svg-stroke(
   $type,
@@ -12,11 +20,46 @@
   @if ($type == 'circle') {
     $svg-additional-attributes: "rx='100' ry='100'";
   }
+  @if ($type == 'switch') {
+    $svg-additional-attributes: "rx='12' ry='12'";
+  }
   @if ($stroke-pathlength != 'initial') {
     $stroke-pathlength-attribute: " pathLength='" + $stroke-pathlength + "'";
   }
   @return "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%' height='100%' " +
-    $svg-additional-attributes + " fill='none' stroke='" + $color + "' stroke-width='" +
-    $stroke-width "' stroke-dasharray='" + $stroke-dasharray + "'" + $stroke-pathlength-attribute +
-    ' /%3e%3c/svg%3e';
+    $svg-additional-attributes + " fill='none' stroke='" + #{color.encode-uri-color($color)} + "' stroke-width='" +
+    $stroke-width "' stroke-dasharray='" + $stroke-dasharray + "'" + $stroke-pathlength-attribute + ' /%3e%3c/svg%3e';
+}
+
+@function select-arrow-icon($state: null, $mode: 'light') {
+  // Hardcoded colors because CSS variables cannot be used as fill color of background-image
+  $arrow-color-map: (
+    'enabled-light': #050400,
+    'enabled-dark': #fff,
+    'hover-light': #504f4b,
+    'hover-dark': #fff,
+    'selected-light': #050400,
+    'selected-dark': #fff,
+    'disabled-light': #696864,
+    'disabled-dark': #fff,
+    'enabled-hcm-light': #050400,
+    'enabled-hcm-dark': #fff,
+    'selected-hcm-dark': #fff,
+    'hover-hcm-dark': #fff,
+    'hover-hcm-light': #050400,
+  );
+
+  @if ($state) {
+    $state: url('#{icons.get-colored-svg-url('2052', map.get($arrow-color-map, '#{$state}-#{$mode}'))}');
+  }
+
+  @return $state;
+}
+
+@function success-icon($color: #107800) {
+  @return url('#{icons.get-colored-svg-url('success', $color)}');
+}
+
+@function warning-icon($color: #b20000) {
+  @return url('#{icons.get-colored-svg-url('warning', $color)}');
 }

package/functions/_icons.scss

@@ -61,9 +61,9 @@
 
   @if (map.has-key(icons.$svg-icon-map, #{$icon-name})) {
     $svg-url: map.get(icons.$svg-icon-map, #{$icon-name});
-  } @else if(map.has-key(icons.$svg-unofficial-icon-map, #{$icon-name})) {
+  } @else if(map.has-key(icons.$other-icons, #{$icon-name})) {
     $svg-url: icons.$svg-pre-path +
-      map.get(icons.$svg-unofficial-icon-map, #{$icon-name}) +
+      map.get(icons.$other-icons, #{$icon-name}) +
       icons.$svg-post-path;
   } @else {
     @error "Icon '#{$icon-name}' does not exist.";
@@ -75,15 +75,3 @@
 @function get-colored-svg-url($icon-name, $color) {
   @return add-fill-color(get-svg-url($icon-name), $color);
 }
-
-@function get-pre-colored-svg-url($icon-name) {
-  $path-definition: map.get(icons.$svg-pre-colored-icon-map, #{$icon-name});
-
-  @if (not map.has-key(icons.$svg-pre-colored-icon-map, #{$icon-name})) {
-    @error "Icon '#{$icon-name}' does not exist.";
-  }
-
-  $svg-url: icons.$svg-pre-path + $path-definition + icons.$svg-post-path;
-
-  @return $svg-url;
-}

package/helpers/_index.scss

@@ -0,0 +1,4 @@
+@use 'clearfix';
+@use 'visually-hidden';
+@use 'text-truncation';
+@use 'focus-ring';

package/helpers/clearfix.css

@@ -0,0 +1 @@
+.clearfix::after{content:"";display:block;clear:both}

package/helpers/clearfix.scss

@@ -0,0 +1,5 @@
+.clearfix::after {
+  content: '';
+  display: block;
+  clear: both;
+}

package/helpers/focus-ring.css

@@ -0,0 +1 @@
+.focus-ring{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}.focus-ring: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){.focus-ring:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.focus-ring: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){.focus-ring:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}

package/helpers/focus-ring.scss

@@ -0,0 +1,5 @@
+@use './../mixins/utilities';
+
+.focus-ring {
+  @include utilities.focus-style;
+}

package/helpers/text-truncation.css

@@ -0,0 +1 @@
+.text-truncate{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

package/helpers/text-truncation.scss

@@ -0,0 +1,5 @@
+.text-truncate {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

package/helpers/visually-hidden.css

@@ -0,0 +1 @@
+.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}

package/helpers/visually-hidden.scss

@@ -0,0 +1,5 @@
+@use './../mixins/utilities';
+
+.visually-hidden {
+  @include utilities.visuallyhidden;
+}