feat(styles): tokenize the grid (#4045)

.changeset/purple-impalas-own.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Updated the grid padding and gutters.

packages/internet-header/src/components/post-internet-breadcrumbs/post-internet-breadcrumbs.scss

@@ -1,6 +1,6 @@
 @use '@swisspost/design-system-styles/placeholders/color' as color-ph;
 @use '@swisspost/design-system-styles/components/button';
-@use '@swisspost/design-system-styles/components/grid';
+@use '@swisspost/design-system-styles/layout';
 @use '@swisspost/design-system-styles/components/spinner';
 @use '@swisspost/design-system-styles/variables/color';
 @use '@swisspost/design-system-styles/functions';

packages/internet-header/src/components/post-internet-footer/post-internet-footer.scss

@@ -1,4 +1,4 @@
-@use '@swisspost/design-system-styles/components/grid';
+@use '@swisspost/design-system-styles/layout';
 @use '@swisspost/design-system-styles/variables/color';
 @use '@swisspost/design-system-styles/placeholders/text';
 @use '@swisspost/design-system-styles/placeholders/color' as color-ph;

packages/internet-header/src/components/post-search/post-search.scss

@@ -2,7 +2,7 @@
 @use '@swisspost/design-system-styles/variables/color';
 @use '@swisspost/design-system-styles/components/forms';
 @use '@swisspost/design-system-styles/components/floating-label';
-@use '@swisspost/design-system-styles/components/grid';
+@use '@swisspost/design-system-styles/layout';
 @use '../../utils/utils.scss';
 @use '../../utils/mixins.scss';
 

packages/styles/src/basics.scss

@@ -6,4 +6,3 @@
 
 @use 'components/elevation';
 @use 'components/sizing';
-@use 'components/grid';

packages/styles/src/components/_index.scss

@@ -28,7 +28,6 @@
 @use 'switch';
 @use 'form-hint';
 @use 'forms';
-@use 'grid';
 @use 'icon-button';
 @use 'icon-close-button';
 @use 'lead';

packages/styles/src/functions/_breakpoint.scss

@@ -7,3 +7,10 @@
 @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}');
+}

packages/styles/src/layout/grid/_index.scss

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

packages/styles/src/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);
+            }
+          }
+        }
+      }
+    }
+  }
+}

packages/styles/src/layout/grid/_variables.scss

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

packages/styles/src/layout/index.scss

@@ -1 +1,2 @@
 @forward './containers';
+@forward './grid';

packages/styles/src/layouts/portal/_index.scss

@@ -1,2 +1 @@
-@use './grid';
 @use './subnavigation';