From d14c37b5963cb6c6b9540cbcb169c50a35879e22 Mon Sep 17 00:00:00 2001
From: Hannah Issermann <hannah.issermann@orange.com>
Date: Mon, 7 Oct 2024 16:41:28 +0200
Subject: [PATCH] gutters

---
 scss/_maps.scss                                | 14 ++++++++++++--
 scss/_variables.scss                           |  2 +-
 scss/mixins/_grid.scss                         |  2 +-
 scss/tokens/_raw.scss                          |  4 ++--
 scss/tokens/_semantic.scss                     |  2 +-
 site/content/docs/0.0/examples/grid/index.html | 14 +++++++-------
 6 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/scss/_maps.scss b/scss/_maps.scss
index 9d18d0bf79..5c4557d351 100644
--- a/scss/_maps.scss
+++ b/scss/_maps.scss
@@ -184,8 +184,8 @@ $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null)
 // scss-docs-start grid-gutters
 $gutters: (
   2xs: $ouds-grid-2xs-column-gap, // 8
-  xs: $ouds-grid-xs-column-gap, // 8
-  sm: $ouds-grid-sm-column-gap, // 8
+  xs: $ouds-grid-xs-column-gap, // 16
+  sm: $ouds-grid-sm-column-gap, // 16
   md: $ouds-grid-md-column-gap, // 24
   lg: $ouds-grid-lg-column-gap, // 24
   xl: $ouds-grid-xl-column-gap, // 32
@@ -193,6 +193,16 @@ $gutters: (
   3xl: $ouds-grid-3xl-column-gap // 40
 ) !default;
 // scss-docs-end grid-gutters
+
+// scss-docs-start gutters
+$gutters-utilities: (
+  none: 0,
+  extra-short: 16px,
+  short: 24px,
+  large: 40px,
+) !default;
+// scss-docs-end gutters
+
 // End mod
 
 $alert-colors: map-remove($theme-colors, "primary", "secondary", "light", "dark") !default; // OUDS mod
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 8f5924d328..c03876a419 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -551,7 +551,7 @@ $paragraph-margin-bottom:   1rem !default;
 // OUDS mod
 // scss-docs-start grid-breakpoints
 $grid-breakpoints: (
-  2xs: $ouds-grid-2xs-min-width, // 0
+  2xs: 0,
   xs: $ouds-grid-xs-min-width, // 390
   sm: $ouds-grid-sm-min-width, // 480
   md: $ouds-grid-md-min-width, // 736
diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss
index 5f80394bd9..6369f8eb3e 100644
--- a/scss/mixins/_grid.scss
+++ b/scss/mixins/_grid.scss
@@ -126,7 +126,7 @@
       // Gutters
       //
       // Make use of `.g-*`, `.gx-*` or `.gy-*` utilities to change spacing between the columns.
-      @each $key, $value in $gutters {
+      @each $key, $value in $gutters-utilities {
         .g#{$infix}-#{$key},
         .gx#{$infix}-#{$key} {
           --#{$prefix}gutter-x: #{$value};
diff --git a/scss/tokens/_raw.scss b/scss/tokens/_raw.scss
index 36effd6ad1..648828e26b 100644
--- a/scss/tokens/_raw.scss
+++ b/scss/tokens/_raw.scss
@@ -78,7 +78,7 @@ $ouds-elevation-y-500:  12px !default;
 //$ouds-grid-width-700: 1680px !default;
 //$ouds-grid-width-800: 1920px !default;
 
-$ouds-grid-min-width-100: 0 !default; // 2xs
+//$ouds-grid-min-width-100: 1px !default; // 2xs
 $ouds-grid-min-width-200: 390px !default; // xs
 $ouds-grid-min-width-300: 480px !default; // sm
 $ouds-grid-min-width-400: 736px !default; // md
@@ -109,7 +109,7 @@ $ouds-grid-margin-1700: 80px !default;
 $ouds-grid-margin-2500: 112px !default;
 
 //$ouds-grid-column-gap-10: 1px !default;
-$ouds-grid-column-gap-100: 8px !default;
+$ouds-grid-column-gap-100: 16px !default;
 //$ouds-grid-column-gap-200: 16px !default;
 //$ouds-grid-column-gap-300: 20px !default;
 $ouds-grid-column-gap-400: 24px !default;
diff --git a/scss/tokens/_semantic.scss b/scss/tokens/_semantic.scss
index b85d696cc9..d7a68b484c 100644
--- a/scss/tokens/_semantic.scss
+++ b/scss/tokens/_semantic.scss
@@ -81,7 +81,7 @@ $ouds-elevation-y-sticky-navigation-scrolled: $ouds-elevation-y-300 !default;
 
 // scss-docs-start ouds-semantic-grid
 //$ouds-grid-2xs-width:         $ouds-grid-width-100 !default;
-$ouds-grid-2xs-min-width:     $ouds-grid-min-width-100 !default;
+//$ouds-grid-2xs-min-width:     $ouds-grid-min-width-100 !default;
 //$ouds-grid-2xs-max-width:     $ouds-grid-max-width-100 !default;
 $ouds-grid-2xs-margin:        $ouds-grid-margin-100 !default;
 $ouds-grid-2xs-column-gap:    $ouds-grid-column-gap-100 !default;
diff --git a/site/content/docs/0.0/examples/grid/index.html b/site/content/docs/0.0/examples/grid/index.html
index b3c655b5a4..8f0d7cb813 100644
--- a/site/content/docs/0.0/examples/grid/index.html
+++ b/site/content/docs/0.0/examples/grid/index.html
@@ -157,13 +157,13 @@ <h2 class="mt-4">Mixed: mobile, tablet, and desktop</h2>
 
     <h2 class="mt-4">Gutters</h2>
     <p>With <code>.gx-*</code> classes, the horizontal gutters can be adjusted.</p>
-    <div class="row row-cols-1 row-cols-md-3 gx-4 text-center">
-      <div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
-      <div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
-      <div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
-      <div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
-      <div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
-      <div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
+    <div class="row row-cols-1 row-cols-md-3 gx-short text-center">
+      <div class="col themed-grid-col"><code>.col</code> with <code>.gx-short</code> gutters</div>
+      <div class="col themed-grid-col"><code>.col</code> with <code>.gx-short</code> gutters</div>
+      <div class="col themed-grid-col"><code>.col</code> with <code>.gx-short</code> gutters</div>
+      <div class="col themed-grid-col"><code>.col</code> with <code>.gx-short</code> gutters</div>
+      <div class="col themed-grid-col"><code>.col</code> with <code>.gx-short</code> gutters</div>
+      <div class="col themed-grid-col"><code>.col</code> with <code>.gx-short</code> gutters</div>
     </div>
     <p class="mt-4">Use the <code>.gy-*</code> classes to control the vertical gutters.</p>
     <div class="row row-cols-1 row-cols-md-3 gy-4 text-center">