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

package/intranet.scss

@@ -1,6 +1,6 @@
-@forward './variables/options';
-
+@use 'layout';
 @use 'utilities';
 @use 'elements';
 @use 'components';
 @use 'components/intranet-header';
+@use 'helpers';

package/layout/_containers.scss

@@ -0,0 +1,32 @@
+@use 'sass:map';
+
+@use '../functions/tokens';
+@use '../mixins/media';
+@use '../tokens/components';
+@use '../variables/breakpoints';
+
+tokens.$default-map: components.$post-container;
+
+.container,
+.container-fluid {
+  width: 100%;
+  margin-inline: auto;
+
+  @each $breakpoint in map.keys(breakpoints.$grid-breakpoints) {
+    @include media.min($breakpoint) {
+      $gutter: tokens.get('grid-gutter-#{$breakpoint}');
+      $padding: tokens.get('grid-padding-#{$breakpoint}');
+
+      --post-grid-gutter-x: #{$gutter};
+
+      // The `.row` has a negative margin equal to half the gutter size.
+      // To prevent content from overflowing, the container needs to have
+      // a padding of at least half the gutter size to offset this negative margin.
+      padding-inline: max(#{$padding}, calc(0.5 * var(--post-grid-gutter-x)));
+    }
+  }
+}
+
+.container {
+  max-width: tokens.get('grid-max-width');
+}

package/layout/_section.scss

@@ -0,0 +1,133 @@
+@use 'sass:map';
+
+@use '../functions/tokens';
+@use '../mixins/media';
+@use '../tokens/components';
+@use '../variables/breakpoints';
+
+tokens.$default-map: components.$post-container;
+
+.section {
+  container: section / inline-size;
+  margin-inline: auto;
+  max-width: 1920px;
+
+  > .container {
+    --section-width: 100cqw;
+    --section-container-width: min(#{tokens.get('grid-max-width')}, var(--section-width));
+    --section-container-content-offset: calc(
+      (var(--section-width) - var(--section-container-width)) * 0.5 +
+        var(--section-container-padding)
+    );
+
+    @each $breakpoint in map.keys(breakpoints.$grid-breakpoints) {
+      @include media.min($breakpoint) {
+        --section-container-padding: #{tokens.get('grid-padding-#{$breakpoint}')};
+      }
+    }
+
+    @each $breakpoint in map.keys(breakpoints.$grid-breakpoints) {
+      @include media.min($breakpoint) {
+        @if $breakpoint == 'xs' {
+          .align-section-stretch,
+          .align-section-start,
+          .align-section-end,
+          .align-container-stretch,
+          .align-container-start,
+          .align-container-end {
+            display: block;
+            margin-inline: unset;
+            min-width: unset;
+            max-width: unset;
+            width: unset;
+          }
+
+          .align-section-none,
+          .align-container-none {
+            margin-inline: 0;
+            width: 100%;
+          }
+
+          .align-section-stretch {
+            margin-inline: calc(var(--section-container-content-offset) * -1);
+            width: var(--section-width);
+          }
+
+          .align-section-start {
+            margin-inline-start: calc(var(--section-container-content-offset) * -1);
+            width: calc(100% + var(--section-container-content-offset));
+          }
+
+          .align-section-end {
+            margin-inline-end: calc(var(--section-container-content-offset) * -1);
+            width: calc(100% + var(--section-container-content-offset));
+          }
+
+          .align-container-stretch {
+            margin-inline: calc(var(--section-container-padding) * -1);
+            width: var(--section-container-width);
+          }
+
+          .align-container-start {
+            margin-inline-start: calc(var(--section-container-padding) * -1);
+            width: calc(100% + var(--section-container-padding));
+          }
+
+          .align-container-end {
+            margin-inline-end: calc(var(--section-container-padding) * -1);
+            width: calc(100% + var(--section-container-padding));
+          }
+        } @else {
+          .align-section-#{$breakpoint}-stretch,
+          .align-section-#{$breakpoint}-start,
+          .align-section-#{$breakpoint}-end,
+          .align-container-#{$breakpoint}-stretch,
+          .align-container-#{$breakpoint}-start,
+          .align-container-#{$breakpoint}-end {
+            display: block;
+            margin-inline: unset;
+            min-width: unset;
+            max-width: unset;
+            width: unset;
+          }
+
+          .align-section-#{$breakpoint}-none,
+          .align-container-#{$breakpoint}-none {
+            margin-inline: 0;
+            width: 100%;
+          }
+
+          .align-section-#{$breakpoint}-stretch {
+            margin-inline: calc(var(--section-container-content-offset) * -1);
+            width: var(--section-width);
+          }
+
+          .align-section-#{$breakpoint}-start {
+            margin-inline-start: calc(var(--section-container-content-offset) * -1);
+            width: calc(100% + var(--section-container-content-offset));
+          }
+
+          .align-section-#{$breakpoint}-end {
+            margin-inline-end: calc(var(--section-container-content-offset) * -1);
+            width: calc(100% + var(--section-container-content-offset));
+          }
+
+          .align-container-#{$breakpoint}-stretch {
+            margin-inline: calc(var(--section-container-padding) * -1);
+            width: var(--section-container-width);
+          }
+
+          .align-container-#{$breakpoint}-start {
+            margin-inline-start: calc(var(--section-container-padding) * -1);
+            width: calc(100% + var(--section-container-padding));
+          }
+
+          .align-container-#{$breakpoint}-end {
+            margin-inline-end: calc(var(--section-container-padding) * -1);
+            width: calc(100% + var(--section-container-padding));
+          }
+        }
+      }
+    }
+  }
+}

package/layout/grid/_index.scss

@@ -0,0 +1,11 @@
+@use './mixins' as *;
+
+.row {
+  @include make-row();
+
+  > * {
+    @include make-col-ready();
+  }
+}
+
+@include make-grid-columns();

package/layout/grid/_mixins.scss

@@ -0,0 +1,104 @@
+@use 'sass:map';
+@use 'sass:math';
+
+@use '../../functions/breakpoint';
+@use '../../functions/tokens';
+@use '../../mixins/media';
+@use '../../tokens/components';
+@use '../../variables/breakpoints';
+
+@use './variables' as *;
+
+@mixin make-row() {
+  display: flex;
+  flex-wrap: wrap;
+
+  margin-block-start: calc(-1 * var(--post-grid-gutter-y));
+  margin-inline: calc(-0.5 * var(--post-grid-gutter-x));
+
+  --post-grid-gutter-y: 0;
+  @each $breakpoint in map.keys(breakpoints.$grid-breakpoints) {
+    @include media.min($breakpoint) {
+      --post-grid-gutter-x: #{tokens.get('grid-gutter-#{$breakpoint}', components.$post-container)};
+    }
+  }
+}
+
+@mixin make-col-ready() {
+  flex-shrink: 0;
+  width: 100%;
+  max-width: 100%;
+  padding-inline: calc(var(--post-grid-gutter-x) * 0.5);
+  margin-block-start: var(--post-grid-gutter-y);
+}
+
+@mixin make-col($size: false) {
+  @if $size {
+    flex: 0 0 auto;
+    width: math.percentage(math.div($size, $grid-columns));
+  } @else {
+    flex: 1 1 0;
+    max-width: 100%;
+  }
+}
+
+@mixin make-col-auto() {
+  flex: 0 0 auto;
+  width: auto;
+}
+
+@mixin make-col-offset($size) {
+  $num: math.div($size, $grid-columns);
+  margin-inline-start: if($num == 0, 0, math.percentage($num));
+}
+
+@mixin row-cols($count) {
+  > * {
+    flex: 0 0 auto;
+    width: math.percentage(math.div(1, $count));
+  }
+}
+
+@mixin make-grid-columns() {
+  @each $breakpoint in map.keys(breakpoints.$grid-breakpoints) {
+    $infix: breakpoint.infix($breakpoint);
+
+    @include media.min($breakpoint) {
+      .col#{$infix} {
+        flex: 1 0 0%;
+      }
+
+      .row-cols#{$infix}-auto > * {
+        @include make-col-auto();
+      }
+
+      @if $grid-row-columns > 0 {
+        @for $i from 1 through $grid-row-columns {
+          .row-cols#{$infix}-#{$i} {
+            @include row-cols($i);
+          }
+        }
+      }
+
+      .col#{$infix}-auto {
+        @include make-col-auto();
+      }
+
+      @if $grid-columns > 0 {
+        @for $i from 1 through $grid-columns {
+          .col#{$infix}-#{$i} {
+            @include make-col($i);
+          }
+        }
+
+        @for $i from 0 through ($grid-columns - 1) {
+          @if not($infix == '' and $i == 0) {
+            .offset#{$infix}-#{$i} {
+              @include make-col-offset($i);
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/layout/grid/_variables.scss

@@ -0,0 +1,2 @@
+$grid-columns: 12;
+$grid-row-columns: 6;

package/layout/index.css

@@ -0,0 +1 @@
+.section{container:section/inline-size;margin-inline:auto;max-width:1920px}.section>.container{--section-width: 100cqw;--section-container-width: min(var(--post-core-dimension-1280), var(--section-width));--section-container-content-offset: calc( (var(--section-width) - var(--section-container-width)) * 0.5 + var(--section-container-padding) );--section-container-padding: var(--post-core-dimension-16)}@media screen and (min-width: 600px){.section>.container{--section-container-padding: var(--post-core-dimension-16)}}@media screen and (min-width: 780px){.section>.container{--section-container-padding: var(--post-core-dimension-40)}}@media screen and (min-width: 1024px){.section>.container{--section-container-padding: var(--post-core-dimension-40)}}@media screen and (min-width: 1280px){.section>.container{--section-container-padding: var(--post-core-dimension-40)}}.section>.container .align-section-stretch,.section>.container .align-section-start,.section>.container .align-section-end,.section>.container .align-container-stretch,.section>.container .align-container-start,.section>.container .align-container-end{display:block;margin-inline:unset;min-width:unset;max-width:unset;width:unset}.section>.container .align-section-none,.section>.container .align-container-none{margin-inline:0;width:100%}.section>.container .align-section-stretch{margin-inline:calc(var(--section-container-content-offset)*-1);width:var(--section-width)}.section>.container .align-section-start{margin-inline-start:calc(var(--section-container-content-offset)*-1);width:calc(100% + var(--section-container-content-offset))}.section>.container .align-section-end{margin-inline-end:calc(var(--section-container-content-offset)*-1);width:calc(100% + var(--section-container-content-offset))}.section>.container .align-container-stretch{margin-inline:calc(var(--section-container-padding)*-1);width:var(--section-container-width)}.section>.container .align-container-start{margin-inline-start:calc(var(--section-container-padding)*-1);width:calc(100% + var(--section-container-padding))}.section>.container .align-container-end{margin-inline-end:calc(var(--section-container-padding)*-1);width:calc(100% + var(--section-container-padding))}@media screen and (min-width: 600px){.section>.container .align-section-sm-stretch,.section>.container .align-section-sm-start,.section>.container .align-section-sm-end,.section>.container .align-container-sm-stretch,.section>.container .align-container-sm-start,.section>.container .align-container-sm-end{display:block;margin-inline:unset;min-width:unset;max-width:unset;width:unset}.section>.container .align-section-sm-none,.section>.container .align-container-sm-none{margin-inline:0;width:100%}.section>.container .align-section-sm-stretch{margin-inline:calc(var(--section-container-content-offset)*-1);width:var(--section-width)}.section>.container .align-section-sm-start{margin-inline-start:calc(var(--section-container-content-offset)*-1);width:calc(100% + var(--section-container-content-offset))}.section>.container .align-section-sm-end{margin-inline-end:calc(var(--section-container-content-offset)*-1);width:calc(100% + var(--section-container-content-offset))}.section>.container .align-container-sm-stretch{margin-inline:calc(var(--section-container-padding)*-1);width:var(--section-container-width)}.section>.container .align-container-sm-start{margin-inline-start:calc(var(--section-container-padding)*-1);width:calc(100% + var(--section-container-padding))}.section>.container .align-container-sm-end{margin-inline-end:calc(var(--section-container-padding)*-1);width:calc(100% + var(--section-container-padding))}}@media screen and (min-width: 780px){.section>.container .align-section-md-stretch,.section>.container .align-section-md-start,.section>.container .align-section-md-end,.section>.container .align-container-md-stretch,.section>.container .align-container-md-start,.section>.container .align-container-md-end{display:block;margin-inline:unset;min-width:unset;max-width:unset;width:unset}.section>.container .align-section-md-none,.section>.container .align-container-md-none{margin-inline:0;width:100%}.section>.container .align-section-md-stretch{margin-inline:calc(var(--section-container-content-offset)*-1);width:var(--section-width)}.section>.container .align-section-md-start{margin-inline-start:calc(var(--section-container-content-offset)*-1);width:calc(100% + var(--section-container-content-offset))}.section>.container .align-section-md-end{margin-inline-end:calc(var(--section-container-content-offset)*-1);width:calc(100% + var(--section-container-content-offset))}.section>.container .align-container-md-stretch{margin-inline:calc(var(--section-container-padding)*-1);width:var(--section-container-width)}.section>.container .align-container-md-start{margin-inline-start:calc(var(--section-container-padding)*-1);width:calc(100% + var(--section-container-padding))}.section>.container .align-container-md-end{margin-inline-end:calc(var(--section-container-padding)*-1);width:calc(100% + var(--section-container-padding))}}@media screen and (min-width: 1024px){.section>.container .align-section-lg-stretch,.section>.container .align-section-lg-start,.section>.container .align-section-lg-end,.section>.container .align-container-lg-stretch,.section>.container .align-container-lg-start,.section>.container .align-container-lg-end{display:block;margin-inline:unset;min-width:unset;max-width:unset;width:unset}.section>.container .align-section-lg-none,.section>.container .align-container-lg-none{margin-inline:0;width:100%}.section>.container .align-section-lg-stretch{margin-inline:calc(var(--section-container-content-offset)*-1);width:var(--section-width)}.section>.container .align-section-lg-start{margin-inline-start:calc(var(--section-container-content-offset)*-1);width:calc(100% + var(--section-container-content-offset))}.section>.container .align-section-lg-end{margin-inline-end:calc(var(--section-container-content-offset)*-1);width:calc(100% + var(--section-container-content-offset))}.section>.container .align-container-lg-stretch{margin-inline:calc(var(--section-container-padding)*-1);width:var(--section-container-width)}.section>.container .align-container-lg-start{margin-inline-start:calc(var(--section-container-padding)*-1);width:calc(100% + var(--section-container-padding))}.section>.container .align-container-lg-end{margin-inline-end:calc(var(--section-container-padding)*-1);width:calc(100% + var(--section-container-padding))}}@media screen and (min-width: 1280px){.section>.container .align-section-xl-stretch,.section>.container .align-section-xl-start,.section>.container .align-section-xl-end,.section>.container .align-container-xl-stretch,.section>.container .align-container-xl-start,.section>.container .align-container-xl-end{display:block;margin-inline:unset;min-width:unset;max-width:unset;width:unset}.section>.container .align-section-xl-none,.section>.container .align-container-xl-none{margin-inline:0;width:100%}.section>.container .align-section-xl-stretch{margin-inline:calc(var(--section-container-content-offset)*-1);width:var(--section-width)}.section>.container .align-section-xl-start{margin-inline-start:calc(var(--section-container-content-offset)*-1);width:calc(100% + var(--section-container-content-offset))}.section>.container .align-section-xl-end{margin-inline-end:calc(var(--section-container-content-offset)*-1);width:calc(100% + var(--section-container-content-offset))}.section>.container .align-container-xl-stretch{margin-inline:calc(var(--section-container-padding)*-1);width:var(--section-container-width)}.section>.container .align-container-xl-start{margin-inline-start:calc(var(--section-container-padding)*-1);width:calc(100% + var(--section-container-padding))}.section>.container .align-container-xl-end{margin-inline-end:calc(var(--section-container-padding)*-1);width:calc(100% + var(--section-container-padding))}}.container,.container-fluid{width:100%;margin-inline:auto;--post-grid-gutter-x: var(--post-core-dimension-16);padding-inline:max(var(--post-core-dimension-16),.5*var(--post-grid-gutter-x))}@media screen and (min-width: 600px){.container,.container-fluid{--post-grid-gutter-x: var(--post-core-dimension-16);padding-inline:max(var(--post-core-dimension-16),.5*var(--post-grid-gutter-x))}}@media screen and (min-width: 780px){.container,.container-fluid{--post-grid-gutter-x: var(--post-core-dimension-16);padding-inline:max(var(--post-core-dimension-40),.5*var(--post-grid-gutter-x))}}@media screen and (min-width: 1024px){.container,.container-fluid{--post-grid-gutter-x: var(--post-core-dimension-24);padding-inline:max(var(--post-core-dimension-40),.5*var(--post-grid-gutter-x))}}@media screen and (min-width: 1280px){.container,.container-fluid{--post-grid-gutter-x: var(--post-core-dimension-24);padding-inline:max(var(--post-core-dimension-40),.5*var(--post-grid-gutter-x))}}.container{max-width:var(--post-core-dimension-1280)}.row{display:flex;flex-wrap:wrap;margin-block-start:calc(-1*var(--post-grid-gutter-y));margin-inline:calc(-0.5*var(--post-grid-gutter-x));--post-grid-gutter-y: 0;--post-grid-gutter-x: var(--post-core-dimension-16)}@media screen and (min-width: 600px){.row{--post-grid-gutter-x: var(--post-core-dimension-16)}}@media screen and (min-width: 780px){.row{--post-grid-gutter-x: var(--post-core-dimension-16)}}@media screen and (min-width: 1024px){.row{--post-grid-gutter-x: var(--post-core-dimension-24)}}@media screen and (min-width: 1280px){.row{--post-grid-gutter-x: var(--post-core-dimension-24)}}.row>*{flex-shrink:0;width:100%;max-width:100%;padding-inline:calc(var(--post-grid-gutter-x)*.5);margin-block-start:var(--post-grid-gutter-y)}.col{flex:1 0 0%}.row-cols-auto>*{flex:0 0 auto;width:auto}.row-cols-1>*{flex:0 0 auto;width:100%}.row-cols-2>*{flex:0 0 auto;width:50%}.row-cols-3>*{flex:0 0 auto;width:33.3333333333%}.row-cols-4>*{flex:0 0 auto;width:25%}.row-cols-5>*{flex:0 0 auto;width:20%}.row-cols-6>*{flex:0 0 auto;width:16.6666666667%}.col-auto{flex:0 0 auto;width:auto}.col-1{flex:0 0 auto;width:8.3333333333%}.col-2{flex:0 0 auto;width:16.6666666667%}.col-3{flex:0 0 auto;width:25%}.col-4{flex:0 0 auto;width:33.3333333333%}.col-5{flex:0 0 auto;width:41.6666666667%}.col-6{flex:0 0 auto;width:50%}.col-7{flex:0 0 auto;width:58.3333333333%}.col-8{flex:0 0 auto;width:66.6666666667%}.col-9{flex:0 0 auto;width:75%}.col-10{flex:0 0 auto;width:83.3333333333%}.col-11{flex:0 0 auto;width:91.6666666667%}.col-12{flex:0 0 auto;width:100%}.offset-1{margin-inline-start:8.3333333333%}.offset-2{margin-inline-start:16.6666666667%}.offset-3{margin-inline-start:25%}.offset-4{margin-inline-start:33.3333333333%}.offset-5{margin-inline-start:41.6666666667%}.offset-6{margin-inline-start:50%}.offset-7{margin-inline-start:58.3333333333%}.offset-8{margin-inline-start:66.6666666667%}.offset-9{margin-inline-start:75%}.offset-10{margin-inline-start:83.3333333333%}.offset-11{margin-inline-start:91.6666666667%}@media screen and (min-width: 600px){.col-sm{flex:1 0 0%}.row-cols-sm-auto>*{flex:0 0 auto;width:auto}.row-cols-sm-1>*{flex:0 0 auto;width:100%}.row-cols-sm-2>*{flex:0 0 auto;width:50%}.row-cols-sm-3>*{flex:0 0 auto;width:33.3333333333%}.row-cols-sm-4>*{flex:0 0 auto;width:25%}.row-cols-sm-5>*{flex:0 0 auto;width:20%}.row-cols-sm-6>*{flex:0 0 auto;width:16.6666666667%}.col-sm-auto{flex:0 0 auto;width:auto}.col-sm-1{flex:0 0 auto;width:8.3333333333%}.col-sm-2{flex:0 0 auto;width:16.6666666667%}.col-sm-3{flex:0 0 auto;width:25%}.col-sm-4{flex:0 0 auto;width:33.3333333333%}.col-sm-5{flex:0 0 auto;width:41.6666666667%}.col-sm-6{flex:0 0 auto;width:50%}.col-sm-7{flex:0 0 auto;width:58.3333333333%}.col-sm-8{flex:0 0 auto;width:66.6666666667%}.col-sm-9{flex:0 0 auto;width:75%}.col-sm-10{flex:0 0 auto;width:83.3333333333%}.col-sm-11{flex:0 0 auto;width:91.6666666667%}.col-sm-12{flex:0 0 auto;width:100%}.offset-sm-0{margin-inline-start:0}.offset-sm-1{margin-inline-start:8.3333333333%}.offset-sm-2{margin-inline-start:16.6666666667%}.offset-sm-3{margin-inline-start:25%}.offset-sm-4{margin-inline-start:33.3333333333%}.offset-sm-5{margin-inline-start:41.6666666667%}.offset-sm-6{margin-inline-start:50%}.offset-sm-7{margin-inline-start:58.3333333333%}.offset-sm-8{margin-inline-start:66.6666666667%}.offset-sm-9{margin-inline-start:75%}.offset-sm-10{margin-inline-start:83.3333333333%}.offset-sm-11{margin-inline-start:91.6666666667%}}@media screen and (min-width: 780px){.col-md{flex:1 0 0%}.row-cols-md-auto>*{flex:0 0 auto;width:auto}.row-cols-md-1>*{flex:0 0 auto;width:100%}.row-cols-md-2>*{flex:0 0 auto;width:50%}.row-cols-md-3>*{flex:0 0 auto;width:33.3333333333%}.row-cols-md-4>*{flex:0 0 auto;width:25%}.row-cols-md-5>*{flex:0 0 auto;width:20%}.row-cols-md-6>*{flex:0 0 auto;width:16.6666666667%}.col-md-auto{flex:0 0 auto;width:auto}.col-md-1{flex:0 0 auto;width:8.3333333333%}.col-md-2{flex:0 0 auto;width:16.6666666667%}.col-md-3{flex:0 0 auto;width:25%}.col-md-4{flex:0 0 auto;width:33.3333333333%}.col-md-5{flex:0 0 auto;width:41.6666666667%}.col-md-6{flex:0 0 auto;width:50%}.col-md-7{flex:0 0 auto;width:58.3333333333%}.col-md-8{flex:0 0 auto;width:66.6666666667%}.col-md-9{flex:0 0 auto;width:75%}.col-md-10{flex:0 0 auto;width:83.3333333333%}.col-md-11{flex:0 0 auto;width:91.6666666667%}.col-md-12{flex:0 0 auto;width:100%}.offset-md-0{margin-inline-start:0}.offset-md-1{margin-inline-start:8.3333333333%}.offset-md-2{margin-inline-start:16.6666666667%}.offset-md-3{margin-inline-start:25%}.offset-md-4{margin-inline-start:33.3333333333%}.offset-md-5{margin-inline-start:41.6666666667%}.offset-md-6{margin-inline-start:50%}.offset-md-7{margin-inline-start:58.3333333333%}.offset-md-8{margin-inline-start:66.6666666667%}.offset-md-9{margin-inline-start:75%}.offset-md-10{margin-inline-start:83.3333333333%}.offset-md-11{margin-inline-start:91.6666666667%}}@media screen and (min-width: 1024px){.col-lg{flex:1 0 0%}.row-cols-lg-auto>*{flex:0 0 auto;width:auto}.row-cols-lg-1>*{flex:0 0 auto;width:100%}.row-cols-lg-2>*{flex:0 0 auto;width:50%}.row-cols-lg-3>*{flex:0 0 auto;width:33.3333333333%}.row-cols-lg-4>*{flex:0 0 auto;width:25%}.row-cols-lg-5>*{flex:0 0 auto;width:20%}.row-cols-lg-6>*{flex:0 0 auto;width:16.6666666667%}.col-lg-auto{flex:0 0 auto;width:auto}.col-lg-1{flex:0 0 auto;width:8.3333333333%}.col-lg-2{flex:0 0 auto;width:16.6666666667%}.col-lg-3{flex:0 0 auto;width:25%}.col-lg-4{flex:0 0 auto;width:33.3333333333%}.col-lg-5{flex:0 0 auto;width:41.6666666667%}.col-lg-6{flex:0 0 auto;width:50%}.col-lg-7{flex:0 0 auto;width:58.3333333333%}.col-lg-8{flex:0 0 auto;width:66.6666666667%}.col-lg-9{flex:0 0 auto;width:75%}.col-lg-10{flex:0 0 auto;width:83.3333333333%}.col-lg-11{flex:0 0 auto;width:91.6666666667%}.col-lg-12{flex:0 0 auto;width:100%}.offset-lg-0{margin-inline-start:0}.offset-lg-1{margin-inline-start:8.3333333333%}.offset-lg-2{margin-inline-start:16.6666666667%}.offset-lg-3{margin-inline-start:25%}.offset-lg-4{margin-inline-start:33.3333333333%}.offset-lg-5{margin-inline-start:41.6666666667%}.offset-lg-6{margin-inline-start:50%}.offset-lg-7{margin-inline-start:58.3333333333%}.offset-lg-8{margin-inline-start:66.6666666667%}.offset-lg-9{margin-inline-start:75%}.offset-lg-10{margin-inline-start:83.3333333333%}.offset-lg-11{margin-inline-start:91.6666666667%}}@media screen and (min-width: 1280px){.col-xl{flex:1 0 0%}.row-cols-xl-auto>*{flex:0 0 auto;width:auto}.row-cols-xl-1>*{flex:0 0 auto;width:100%}.row-cols-xl-2>*{flex:0 0 auto;width:50%}.row-cols-xl-3>*{flex:0 0 auto;width:33.3333333333%}.row-cols-xl-4>*{flex:0 0 auto;width:25%}.row-cols-xl-5>*{flex:0 0 auto;width:20%}.row-cols-xl-6>*{flex:0 0 auto;width:16.6666666667%}.col-xl-auto{flex:0 0 auto;width:auto}.col-xl-1{flex:0 0 auto;width:8.3333333333%}.col-xl-2{flex:0 0 auto;width:16.6666666667%}.col-xl-3{flex:0 0 auto;width:25%}.col-xl-4{flex:0 0 auto;width:33.3333333333%}.col-xl-5{flex:0 0 auto;width:41.6666666667%}.col-xl-6{flex:0 0 auto;width:50%}.col-xl-7{flex:0 0 auto;width:58.3333333333%}.col-xl-8{flex:0 0 auto;width:66.6666666667%}.col-xl-9{flex:0 0 auto;width:75%}.col-xl-10{flex:0 0 auto;width:83.3333333333%}.col-xl-11{flex:0 0 auto;width:91.6666666667%}.col-xl-12{flex:0 0 auto;width:100%}.offset-xl-0{margin-inline-start:0}.offset-xl-1{margin-inline-start:8.3333333333%}.offset-xl-2{margin-inline-start:16.6666666667%}.offset-xl-3{margin-inline-start:25%}.offset-xl-4{margin-inline-start:33.3333333333%}.offset-xl-5{margin-inline-start:41.6666666667%}.offset-xl-6{margin-inline-start:50%}.offset-xl-7{margin-inline-start:58.3333333333%}.offset-xl-8{margin-inline-start:66.6666666667%}.offset-xl-9{margin-inline-start:75%}.offset-xl-10{margin-inline-start:83.3333333333%}.offset-xl-11{margin-inline-start:91.6666666667%}}

package/layout/index.scss

@@ -0,0 +1,3 @@
+@forward './section';
+@forward './containers';
+@forward './grid';

package/mixins/_button.scss

@@ -6,43 +6,47 @@
 @use './../variables/color' as color-var;
 @use './../functions/contrast' as contrast-fn;
 @use 'utilities';
+@use './../mixins/color' as color-mx;
+@use '../functions/tokens';
+@use '../tokens/components';
+
+tokens.$default-map: components.$post-button;
 
 @mixin reset-button {
   padding: 0;
   overflow: visible;
   border: 0;
   background: none;
-  color: inherit;
+  color: tokens.get('button-secondary-enabled-fg', components.$post-button);
   font: inherit;
   -webkit-user-select: none;
           user-select: none;
   appearance: button; // for input
+
+  @include utilities.high-contrast-mode() {
+    background-color: ButtonFace !important;
+
+    &:hover {
+      background-color: Highlight !important;
+    }
+  }
 }
 
 @mixin button-size($size: md) {
   min-height: map.get(button.$btn-height-map, $size);
-  font-size: map.get(button.$btn-font-size-map, $size);
   gap: map.get(button.$btn-gap-x-map, $size);
+  padding: 0 map.get(button.$btn-padding-x-map, $size);
 
-  &:where(:not(.btn-link, .btn-tertiary)) {
-    padding: 0 map.get(button.$btn-padding-x-map, $size);
-  }
-
-  > .pi,
   > post-icon {
     width: map.get(button.$btn-icon-size-map, $size);
     height: map.get(button.$btn-icon-size-map, $size);
   }
 }
 
-@mixin icon-button($size: md) {
-  // Padding for icon buttons is (button-height - font-size) / 2
-  $icon-size: map.get(button.$btn-icon-size-map, $size);
-  $button-height: map.get(button.$btn-height-map, $size);
-  $padding-y: ($button-height - $icon-size) * 0.5 - button.$input-btn-focus-width;
-  min-width: $button-height;
-  padding-right: $padding-y;
-  padding-left: $padding-y;
+@mixin button-variant-def($type, $color) {
+  border-color: tokens.get('button-#{$color}-#{$type}-stroke');
+  background-color: tokens.get('button-#{$color}-#{$type}-bg');
+  color: tokens.get('button-#{$color}-#{$type}-fg');
 }
 
 @mixin button-color-variant($name, $color) {

package/mixins/_form-checks.scss

@@ -6,7 +6,7 @@
   border-color: $color;
 
   ~ .form-check-label {
-    color: var(--post-contrast-color);
+    color: color.$black;
   }
 }
 

package/mixins/_forms.scss

@@ -1,12 +1,12 @@
-@use './../variables/color';
-@use './../variables/type';
-@use './../variables/components/form-validation';
+@use 'sass:map';
 @use './../variables/components/forms';
-@use './../variables/components/tooltips';
 @use './../mixins/utilities';
+@use './../functions/icons';
+@use './../functions/forms' as forms-fx;
+@use './../functions/utilities' as utilities-fx;
+@use './../variables/color';
 
 // Placeholder in input fields
-
 @mixin placeholder() {
   &::placeholder {
     @content;
@@ -20,33 +20,6 @@
   /* stylelint-enable */
 }
 
-@mixin icon-placement {
-  padding-right: form-validation.$form-feedback-icon-offset +
-    form-validation.$form-feedback-icon-size;
-  background-repeat: no-repeat;
-  background-position: calc(100% - #{form-validation.$form-feedback-icon-offset}) center;
-}
-
-@mixin form-rg {
-  padding: forms.$input-padding-y-rg forms.$input-padding-x-rg;
-  font-size: type.$font-size-regular;
-  line-height: forms.$input-line-height-rg;
-}
-
-@mixin form-sm {
-  font-size: type.$font-size-14;
-  line-height: forms.$input-line-height-sm;
-  min-height: forms.$input-height-sm;
-  padding-block: forms.$input-padding-y-sm;
-  padding-inline: forms.$input-padding-x-sm;
-}
-
-@mixin form-lg {
-  font-size: type.$font-size-16 !important;
-  line-height: forms.$input-line-height-lg;
-  min-height: forms.$input-height-lg;
-}
-
 /* Deprecated use the one in utilities.scss */
 @mixin focus-outline {
   outline: none;
@@ -54,7 +27,43 @@
 
   /* Compatibility with button-group */
   &:is(:focus-visible, :focus-within, .pretend-focus) {
-    outline: forms.$input-focus-outline-thickness solid var(--post-contrast-color);
+    outline: forms.$input-focus-outline-thickness solid color.$black;
     @content;
   }
 }
+
+// Used on form elements to set the correct colored validation icon
+@mixin validation-icons() {
+  &.is-valid:not(:disabled) {
+    background-image: forms-fx.success-icon();
+
+    @include utilities.high-contrast-mode-dark() {
+      background-image: forms-fx.success-icon(#e0e0e0);
+    }
+
+    @include utilities.high-contrast-mode-light() {
+      background-image: forms-fx.success-icon(#333);
+    }
+  }
+
+  &.is-invalid:not(:disabled) {
+    background-image: forms-fx.warning-icon();
+
+    @include utilities.high-contrast-mode-dark() {
+      background-image: forms-fx.warning-icon(#e0e0e0);
+    }
+
+    @include utilities.high-contrast-mode-light() {
+      background-image: forms-fx.warning-icon(#333);
+    }
+  }
+}
+
+@mixin textarea-resizer-svg($color) {
+  &::-webkit-resizer {
+    $clean-color: utilities-fx.replace('#{$color}', '#', '%23');
+    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none"%3E%3Cg clip-path="url(%23clip0_7846_3191)"%3E%3Cpath d="M6.5 18H9.5V21H6.5V18Z" fill="#{$clean-color}"/%3E%3Cpath d="M12.5 18H15.5V21H12.5V18Z" fill="#{$clean-color}"/%3E%3Cpath d="M12.5 12H15.5V15H12.5V12Z" fill="#{$clean-color}"/%3E%3Cpath d="M18.5 12H21.5V15H18.5V12Z" fill="#{$clean-color}"/%3E%3Cpath d="M18.5 6H21.5V9H18.5V6Z" fill="#{$clean-color}"/%3E%3Cpath d="M18.5 18H21.5V21H18.5V18Z" fill="#{$clean-color}"/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id="clip0_7846_3191"%3E%3Crect width="24" height="24" fill="white" transform="translate(0.5)"/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E');
+    background-repeat: no-repeat;
+    background-size: 100%;
+  }
+}

package/mixins/_icon-button.scss

@@ -0,0 +1,27 @@
+@use 'sass:map';
+@use 'sass:color';
+
+@use '../functions/tokens';
+@use '../tokens/components';
+
+tokens.$default-map: components.$post-icon-button;
+
+@mixin icon-button($size: md) {
+  $size-map: (
+    'sm': 'small',
+    'md': 'medium',
+    'lg': 'large',
+  );
+  $actual-size: map.get($size-map, $size);
+  padding: 0;
+  width: tokens.get('icon-button-#{$actual-size}-outer');
+  height: tokens.get('icon-button-#{$actual-size}-outer');
+  min-height: 0;
+  vertical-align: text-bottom;
+
+  > post-icon {
+    display: block;
+    width: tokens.get('icon-button-#{$actual-size}-icon');
+    height: tokens.get('icon-button-#{$actual-size}-icon');
+  }
+}

package/mixins/_icons.scss

@@ -8,43 +8,33 @@
 @use './../mixins/utilities';
 
 @mixin icon($name) {
-  -webkit-mask-image: url('#{icon-fn.get-svg-url($name)}');
-          mask-image: url('#{icon-fn.get-svg-url($name)}');
+  mask-image: url('#{icon-fn.get-svg-url($name)}');
   background-color: currentColor;
   color: currentColor; // Required in this case with usage of forced-color-adjust: preserve-parent-color
   forced-color-adjust: preserve-parent-color;
 }
 
-@mixin remove-icon() {
-  -webkit-mask-image: none;
-          mask-image: none;
-}
-
-// DEPRECATED
-@mixin pi($name, $color: color.$black) {
-  $type: meta.type-of($color);
-  $final-color: $color;
-
-  @if ($type != color) {
-    $final-color: map.get(color.$background-colors, $color);
-
-    @if (not $final-color) {
-      @error "Error in Mixin 'pi(name, color?)'. Color '#{$color}' is not available. Please choose one of the following: #{map.keys(color.$background-colors)}.";
-    }
-  }
-  border-color: $final-color;
-  background-image: url('#{icon-fn.get-colored-svg-url($name, $final-color)}');
-
-  // set icon to white on hcm
-  @include utilities.high-contrast-mode() {
-    @if ($final-color == color.$black) {
-      filter: invert(100%);
-    } @else {
-      background-image: url('#{icon-fn.get-colored-svg-url($name, color.$white)}');
-    }
-  }
+@mixin post-icon(
+  $base: 'https://unpkg.com/@swisspost/design-system-icons/public/post-icons',
+  $name,
+  $color: inherit
+) {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  background-color: currentColor;
+  color: $color;
+  /* stylelint-disable-next-line property-no-vendor-prefix */
+  mask-image: url('#{$base}/#{$name}.svg');
+  /* stylelint-disable-next-line property-no-vendor-prefix */
+  mask-position: center center;
+  /* stylelint-disable-next-line property-no-vendor-prefix */
+  mask-repeat: no-repeat;
+  /* stylelint-disable-next-line property-no-vendor-prefix */
+  mask-size: 100%;
 }
 
-@mixin pi-pre($name) {
-  background-image: url('#{icon-fn.get-pre-colored-svg-url($name)}');
+@mixin remove-icon() {
+  mask-image: none;
 }

package/mixins/_index.scss

@@ -2,12 +2,13 @@
 @forward 'button';
 @forward 'chip';
 @forward 'color';
-@forward 'focus';
 @forward 'form-checks';
 @forward 'forms';
+@forward 'icon-button';
 @forward 'icons';
+@forward 'list';
+@forward 'media';
 @forward 'notification';
 @forward 'scroll-shadows';
-@forward 'size';
 @forward 'type';
 @forward 'utilities';

package/mixins/_layout.scss

@@ -0,0 +1,26 @@
+@use './media';
+
+@mixin responsive-actions {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  @include media.min(md) {
+    flex-direction: row-reverse;
+
+    > .btn {
+      margin-right: auto;
+    }
+  }
+
+  &-primary-actions {
+    display: flex;
+    flex-direction: column;
+    @content;
+
+    @include media.min(md) {
+      flex-direction: row-reverse;
+      margin-left: auto;
+    }
+  }
+}