From ba1e1d8296d9cf8cd851eca185dd89f7b51d5b4e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?= <alize.debray@post.ch>
Date: Wed, 20 Nov 2024 17:22:19 +0100
Subject: [PATCH 1/4] chore(styles): remove bootstrap grid

---
 packages/styles/src/basics.scss               |  1 -
 packages/styles/src/components/_index.scss    |  1 -
 packages/styles/src/components/grid.scss      | 48 -------------------
 packages/styles/src/layouts/portal/_grid.scss | 31 ------------
 .../styles/src/layouts/portal/_index.scss     |  1 -
 .../styles/src/themes/bootstrap/_grid.scss    |  2 -
 .../styles/tests/components/grid.test.scss    |  7 ---
 7 files changed, 91 deletions(-)
 delete mode 100644 packages/styles/src/components/grid.scss
 delete mode 100644 packages/styles/src/layouts/portal/_grid.scss
 delete mode 100644 packages/styles/src/themes/bootstrap/_grid.scss
 delete mode 100644 packages/styles/tests/components/grid.test.scss

diff --git a/packages/styles/src/basics.scss b/packages/styles/src/basics.scss
index ee23e7cb33..815c5d2f40 100644
--- a/packages/styles/src/basics.scss
+++ b/packages/styles/src/basics.scss
@@ -6,4 +6,3 @@
 
 @use 'components/elevation';
 @use 'components/sizing';
-@use 'components/grid';
diff --git a/packages/styles/src/components/_index.scss b/packages/styles/src/components/_index.scss
index 20fd7f3141..47e1caf663 100644
--- a/packages/styles/src/components/_index.scss
+++ b/packages/styles/src/components/_index.scss
@@ -24,7 +24,6 @@
 @use 'form-check';
 @use 'form-hint';
 @use 'forms';
-@use 'grid';
 @use 'icon-button';
 @use 'icon-close-button';
 @use 'lead';
diff --git a/packages/styles/src/components/grid.scss b/packages/styles/src/components/grid.scss
deleted file mode 100644
index 39500023c0..0000000000
--- a/packages/styles/src/components/grid.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-@forward './../variables/options';
-
-@use 'sass:map';
-
-@use './../themes/bootstrap/core' as *;
-@use './../themes/bootstrap/grid' as bg;
-
-@use './../variables/commons';
-@use './../variables/spacing';
-@use './../variables/grid';
-
-$gutter-x-cache: 0;
-
-@each $breakpoint in grid.$grid-breakpoints-list {
-  $gutter-x: map.get(grid.$grid-gutter-x, $breakpoint);
-
-  @if ($gutter-x-cache != $gutter-x) {
-    .row {
-      @if $breakpoint == 'xs' {
-        --bs-gutter-x: #{$gutter-x};
-      } @else {
-        @include media-breakpoint-up($breakpoint) {
-          --bs-gutter-x: #{$gutter-x};
-        }
-      }
-    }
-  }
-  $gutter-x-cache: $gutter-x;
-}
-
-// redefine gutter-utilities, to override the custom gutter-width above
-@each $infix in grid.$grid-breakpoints-list {
-  @each $postfix, $gutter in $gutters {
-    @if $infix == 'xs' {
-      .g-#{$postfix},
-      .gx-#{$postfix} {
-        --bs-gutter-x: #{$gutter};
-      }
-    } @else {
-      @include media-breakpoint-up($infix) {
-        .g-#{$infix}-#{$postfix},
-        .gx-#{$infix}-#{$postfix} {
-          --bs-gutter-x: #{$gutter};
-        }
-      }
-    }
-  }
-}
diff --git a/packages/styles/src/layouts/portal/_grid.scss b/packages/styles/src/layouts/portal/_grid.scss
deleted file mode 100644
index 6c9a82feb1..0000000000
--- a/packages/styles/src/layouts/portal/_grid.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-@use 'sass:map';
-
-@use './../../themes/bootstrap/core' as *;
-
-@use './../../variables/grid';
-@use './../../variables/commons';
-
-.container-fluid {
-  max-width: map.get(grid.$container-max-widths, xs);
-  padding-right: 0;
-  padding-left: 0;
-
-  &:not(.allow-overflow) {
-    overflow: hidden; // hides scrollbar
-  }
-}
-
-//deprecated
-// px-gutters class is used to manipulate border collapse in product-cards
-.row.px-gutters {
-  margin-right: -(commons.$border-width);
-  margin-bottom: -(commons.$border-width);
-  margin-left: 0;
-
-  > .col,
-  > [class*='col-'] {
-    padding-right: commons.$border-width;
-    padding-bottom: commons.$border-width;
-    padding-left: 0;
-  }
-}
diff --git a/packages/styles/src/layouts/portal/_index.scss b/packages/styles/src/layouts/portal/_index.scss
index 41ae37c888..c067e7178e 100644
--- a/packages/styles/src/layouts/portal/_index.scss
+++ b/packages/styles/src/layouts/portal/_index.scss
@@ -1,2 +1 @@
-@use './grid';
 @use './subnavigation';
diff --git a/packages/styles/src/themes/bootstrap/_grid.scss b/packages/styles/src/themes/bootstrap/_grid.scss
deleted file mode 100644
index 1581478a7f..0000000000
--- a/packages/styles/src/themes/bootstrap/_grid.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@use './core' as *;
-@import 'bootstrap/scss/grid';
diff --git a/packages/styles/tests/components/grid.test.scss b/packages/styles/tests/components/grid.test.scss
deleted file mode 100644
index 9c7ba9a296..0000000000
--- a/packages/styles/tests/components/grid.test.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@use 'sass:map';
-@use 'sass:meta';
-@use 'tests/jest';
-@use 'src/components/grid';
-
-// Check if component forwards options
-@include jest.true(map.has-key(meta.module-variables('grid'), 'font-base-path'));

From 9a2662c5c887445b039f44e2748472609cab6eb6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?= <alize.debray@post.ch>
Date: Thu, 21 Nov 2024 17:57:27 +0100
Subject: [PATCH 2/4] feat(styles): add new grid styles

---
 .changeset/purple-impalas-own.md              |   5 +
 .../styles/src/functions/_breakpoint.scss     |   7 ++
 packages/styles/src/layout/grid/_index.scss   |  11 ++
 packages/styles/src/layout/grid/_mixins.scss  | 104 ++++++++++++++++++
 .../styles/src/layout/grid/_variables.scss    |   2 +
 packages/styles/src/layout/index.scss         |   1 +
 6 files changed, 130 insertions(+)
 create mode 100644 .changeset/purple-impalas-own.md
 create mode 100644 packages/styles/src/layout/grid/_index.scss
 create mode 100644 packages/styles/src/layout/grid/_mixins.scss
 create mode 100644 packages/styles/src/layout/grid/_variables.scss

diff --git a/.changeset/purple-impalas-own.md b/.changeset/purple-impalas-own.md
new file mode 100644
index 0000000000..15912af8ef
--- /dev/null
+++ b/.changeset/purple-impalas-own.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Updated the grid padding and gutters.
diff --git a/packages/styles/src/functions/_breakpoint.scss b/packages/styles/src/functions/_breakpoint.scss
index a11ed45ebd..0d409c7872 100644
--- a/packages/styles/src/functions/_breakpoint.scss
+++ b/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}');
+}
diff --git a/packages/styles/src/layout/grid/_index.scss b/packages/styles/src/layout/grid/_index.scss
new file mode 100644
index 0000000000..8115634fde
--- /dev/null
+++ b/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();
diff --git a/packages/styles/src/layout/grid/_mixins.scss b/packages/styles/src/layout/grid/_mixins.scss
new file mode 100644
index 0000000000..9a68d502c9
--- /dev/null
+++ b/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-block-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);
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/packages/styles/src/layout/grid/_variables.scss b/packages/styles/src/layout/grid/_variables.scss
new file mode 100644
index 0000000000..d81a28bb03
--- /dev/null
+++ b/packages/styles/src/layout/grid/_variables.scss
@@ -0,0 +1,2 @@
+$grid-columns: 12;
+$grid-row-columns: 6;
diff --git a/packages/styles/src/layout/index.scss b/packages/styles/src/layout/index.scss
index a4371585f3..bb962967a7 100644
--- a/packages/styles/src/layout/index.scss
+++ b/packages/styles/src/layout/index.scss
@@ -1 +1,2 @@
 @forward './containers';
+@forward './grid';

From 28b55bd431c2371638f41c8191609263e693dcc4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?= <alize.debray@post.ch>
Date: Thu, 21 Nov 2024 18:08:26 +0100
Subject: [PATCH 3/4] Update imports

---
 .../post-internet-breadcrumbs/post-internet-breadcrumbs.scss    | 2 +-
 .../components/post-internet-footer/post-internet-footer.scss   | 2 +-
 .../internet-header/src/components/post-search/post-search.scss | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/internet-header/src/components/post-internet-breadcrumbs/post-internet-breadcrumbs.scss b/packages/internet-header/src/components/post-internet-breadcrumbs/post-internet-breadcrumbs.scss
index f11a578735..c5c83fe36e 100644
--- a/packages/internet-header/src/components/post-internet-breadcrumbs/post-internet-breadcrumbs.scss
+++ b/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';
diff --git a/packages/internet-header/src/components/post-internet-footer/post-internet-footer.scss b/packages/internet-header/src/components/post-internet-footer/post-internet-footer.scss
index 521dc67631..598d9ec38e 100644
--- a/packages/internet-header/src/components/post-internet-footer/post-internet-footer.scss
+++ b/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;
diff --git a/packages/internet-header/src/components/post-search/post-search.scss b/packages/internet-header/src/components/post-search/post-search.scss
index 4bf64dd6fe..7d3227f1c1 100644
--- a/packages/internet-header/src/components/post-search/post-search.scss
+++ b/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';
 

From 5df125cce3562cc1360d2a48ba5a9554944b53b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?= <alize.debray@post.ch>
Date: Thu, 21 Nov 2024 18:41:48 +0100
Subject: [PATCH 4/4] Fix offset classes

---
 packages/styles/src/layout/grid/_mixins.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/styles/src/layout/grid/_mixins.scss b/packages/styles/src/layout/grid/_mixins.scss
index 9a68d502c9..21795a9d30 100644
--- a/packages/styles/src/layout/grid/_mixins.scss
+++ b/packages/styles/src/layout/grid/_mixins.scss
@@ -49,7 +49,7 @@
 
 @mixin make-col-offset($size) {
   $num: math.div($size, $grid-columns);
-  margin-block-start: if($num == 0, 0, math.percentage($num));
+  margin-inline-start: if($num == 0, 0, math.percentage($num));
 }
 
 @mixin row-cols($count) {