From 3d17fd26f5a3ba225271839545179b404766894e Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Thu, 15 Feb 2024 12:49:48 +0100
Subject: [PATCH 01/14] Derive grid tokens from common spacing tokens

---
 packages/css/src/components/grid/grid.scss    | 24 +++++++++----------
 .../brand/amsterdam/space.compact.tokens.json |  5 +++-
 .../src/brand/amsterdam/space.tokens.json     |  5 +++-
 .../amsterdam/grid.compact.tokens.json        |  9 +------
 .../src/components/amsterdam/grid.tokens.json | 17 +++++++++----
 5 files changed, 33 insertions(+), 27 deletions(-)

diff --git a/packages/css/src/components/grid/grid.scss b/packages/css/src/components/grid/grid.scss
index 64939ac993..666c6bf01b 100644
--- a/packages/css/src/components/grid/grid.scss
+++ b/packages/css/src/components/grid/grid.scss
@@ -7,7 +7,7 @@
 
 .amsterdam-grid {
   display: grid;
-  gap: var(--amsterdam-grid-gap);
+  gap: var(--amsterdam-grid-gap-md);
   grid-template-columns: repeat(var(--amsterdam-grid-column-count), 1fr);
   padding-inline: var(--amsterdam-grid-padding-inline);
 
@@ -25,47 +25,47 @@
 }
 
 .amsterdam-grid--gap-vertical--small {
-  row-gap: calc(var(--amsterdam-grid-gap) / 2);
+  row-gap: var(--amsterdam-grid-gap-sm);
 }
 
 .amsterdam-grid--gap-vertical--large {
-  row-gap: calc(var(--amsterdam-grid-gap) * 2);
+  row-gap: var(--amsterdam-grid-gap-lg);
 }
 
 .amsterdam-grid--padding-bottom--small {
-  padding-block-end: calc(var(--amsterdam-grid-gap) / 2);
+  padding-block-end: var(--amsterdam-grid-padding-block-sm);
 }
 
 .amsterdam-grid--padding-bottom--medium {
-  padding-block-end: var(--amsterdam-grid-gap);
+  padding-block-end: var(--amsterdam-grid-padding-block-md);
 }
 
 .amsterdam-grid--padding-bottom--large {
-  padding-block-end: calc(var(--amsterdam-grid-gap) * 2);
+  padding-block-end: var(--amsterdam-grid-padding-block-lg);
 }
 
 .amsterdam-grid--padding-top--small {
-  padding-block-start: calc(var(--amsterdam-grid-gap) / 2);
+  padding-block-start: var(--amsterdam-grid-padding-block-sm);
 }
 
 .amsterdam-grid--padding-top--medium {
-  padding-block-start: var(--amsterdam-grid-gap);
+  padding-block-start: var(--amsterdam-grid-padding-block-md);
 }
 
 .amsterdam-grid--padding-top--large {
-  padding-block-start: calc(var(--amsterdam-grid-gap) * 2);
+  padding-block-start: var(--amsterdam-grid-padding-block-lg);
 }
 
 .amsterdam-grid--padding-vertical--small {
-  padding-block: calc(var(--amsterdam-grid-gap) / 2);
+  padding-block: var(--amsterdam-grid-padding-block-sm);
 }
 
 .amsterdam-grid--padding-vertical--medium {
-  padding-block: var(--amsterdam-grid-gap);
+  padding-block: var(--amsterdam-grid-padding-block-md);
 }
 
 .amsterdam-grid--padding-vertical--large {
-  padding-block: calc(var(--amsterdam-grid-gap) * 2);
+  padding-block: var(--amsterdam-grid-padding-block-lg);
 }
 
 .amsterdam-grid__cell--span-all {
diff --git a/proprietary/tokens/src/brand/amsterdam/space.compact.tokens.json b/proprietary/tokens/src/brand/amsterdam/space.compact.tokens.json
index dededef4d8..5e3c91a1dd 100644
--- a/proprietary/tokens/src/brand/amsterdam/space.compact.tokens.json
+++ b/proprietary/tokens/src/brand/amsterdam/space.compact.tokens.json
@@ -3,7 +3,10 @@
     "space": {
       "xs": { "value": "clamp(0.25rem, calc(0.390625vw - 0.015625rem), 0.625rem)" },
       "sm": { "value": "clamp(0.5rem, calc(0.78125vw - 0.03125rem), 1.25rem)" },
-      "md": { "value": "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)" },
+      "md": {
+        "value": "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)",
+        "comment": "Grows from 16px at 1088px wide to 40px at 2624px wide."
+      },
       "lg": { "value": "clamp(1.5rem, calc(2.34375vw - 0.09375rem), 3.75rem)" },
       "xl": { "value": "clamp(2rem, calc(3.125vw - 0.125rem), 5rem)" }
     }
diff --git a/proprietary/tokens/src/brand/amsterdam/space.tokens.json b/proprietary/tokens/src/brand/amsterdam/space.tokens.json
index e47eb6bc33..49aeff7dc9 100644
--- a/proprietary/tokens/src/brand/amsterdam/space.tokens.json
+++ b/proprietary/tokens/src/brand/amsterdam/space.tokens.json
@@ -3,7 +3,10 @@
     "space": {
       "xs": { "value": "clamp(0.25rem, calc(0.78125vw + 0.09375rem), 0.875rem)" },
       "sm": { "value": "clamp(0.5rem, calc(1.5625vw + 0.1875rem), 1.75rem)" },
-      "md": { "value": "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)" },
+      "md": {
+        "value": "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)",
+        "comment": "Grows from 16px at 320px wide to 56px at 1600px wide."
+      },
       "lg": { "value": "clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem)" },
       "xl": { "value": "clamp(2rem, calc(6.25vw + 0.75rem), 7rem)" }
     }
diff --git a/proprietary/tokens/src/components/amsterdam/grid.compact.tokens.json b/proprietary/tokens/src/components/amsterdam/grid.compact.tokens.json
index cc8e5b85e8..a3f4bba4cc 100644
--- a/proprietary/tokens/src/components/amsterdam/grid.compact.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/grid.compact.tokens.json
@@ -1,14 +1,7 @@
 {
   "amsterdam": {
     "grid": {
-      "gap": {
-        "value": "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)",
-        "comment": "Grows from 16px at 1088px wide to 40px at 2624px wide."
-      },
-      "padding-inline": {
-        "value": "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)",
-        "comment": "Equals the gap."
-      }
+      "padding-inline": { "value": "amsterdam.space.md" }
     }
   }
 }
diff --git a/proprietary/tokens/src/components/amsterdam/grid.tokens.json b/proprietary/tokens/src/components/amsterdam/grid.tokens.json
index a6ec7c33ac..f6d8019e1a 100644
--- a/proprietary/tokens/src/components/amsterdam/grid.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/grid.tokens.json
@@ -3,13 +3,20 @@
     "grid": {
       "column-count": { "value": "4" },
       "gap": {
-        "value": "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)",
-        "comment": "Grows from 16px at 320px wide to 56px at 1600px wide."
+        "xs": { "value": "amsterdam.space.xs" },
+        "sm": { "value": "amsterdam.space.sm" },
+        "md": { "value": "amsterdam.space.md" },
+        "lg": { "value": "amsterdam.space.lg" },
+        "xl": { "value": "amsterdam.space.xl" }
       },
-      "padding-inline": {
-        "value": "clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem)",
-        "comment": "Equals 1.5 times the gap."
+      "padding-block": {
+        "xs": { "value": "amsterdam.space.xs" },
+        "sm": { "value": "amsterdam.space.sm" },
+        "md": { "value": "amsterdam.space.md" },
+        "lg": { "value": "amsterdam.space.lg" },
+        "xl": { "value": "amsterdam.space.xl" }
       },
+      "padding-inline": { "value": "amsterdam.space.lg" },
       "medium": {
         "column-count": { "value": "8" }
       },

From 51a2772177696ec19b62ac574f8be8b5c744485d Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Thu, 15 Feb 2024 13:20:43 +0100
Subject: [PATCH 02/14] =?UTF-8?q?Use=20=E2=80=98gap=E2=80=99=20instead=20o?=
 =?UTF-8?q?f=20=E2=80=98white=20space=E2=80=99=20in=20grid=20docs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 storybook/storybook-docs/src/grid.stories.mdx | 60 +++++++++----------
 .../storybook-react/src/Grid/Grid.docs.mdx    |  2 +-
 2 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/storybook/storybook-docs/src/grid.stories.mdx b/storybook/storybook-docs/src/grid.stories.mdx
index 6e60643c52..a70fbeadd4 100644
--- a/storybook/storybook-docs/src/grid.stories.mdx
+++ b/storybook/storybook-docs/src/grid.stories.mdx
@@ -39,22 +39,22 @@ There are few options for background colour or borders.
 Typography and white space remain as tools to keep screens readable.
 For websites, the grid is quite spacious.
 
-The horizontal white space between columns is 16 pixels wide at a window width of 320 pixels or less.
-For every additional 256 pixels of width, the white space grows linearly by 8 pixels.
+The gap between columns is 16 pixels wide at a window width of 320 pixels or less.
+For every additional 256 pixels of width, it grows linearly by 8 pixels.
 (This amounts to 3 and 3/8 per cent of the screen width plus 6 pixels.)
 At a window width of 1600 pixels, it is 56 pixels.
-After that, the white space does not grow further.
+After that, the gap does not grow further.
 
-In wide windows, the white spaces become almost as wide as the columns.
+In wide windows, the gaps become almost as wide as the columns.
 This may seem unnatural, but it is not a problem.
-Elements often occupy multiple columns of the grid, including the intervening white spaces.
+Elements often occupy multiple columns of the grid, including the gaps in between.
 
 #### Compact
 
-For applications, so much white space is not necessary, even counterproductive.
+For applications, so much white space is unnecessary, even counterproductive.
 Therefore, there is also a compact theme for the grid.
 
-The minimum white space between columns is also 16 pixels here.
+The minimum gap between columns is also 16 pixels here.
 But it only starts growing from a window width of 1088 pixels.
 The increase is also slower: 4 pixels per 256 pixels of additional width.
 (This amounts to 1 and 9/16 per cent of the screen width minus 1 pixel.)
@@ -66,7 +66,7 @@ On both sides, the grid reserves margins of white space.
 
 #### Spacious
 
-The margin is 1½ times as wide as the space between columns.
+The margin is 1½ times as wide as the gap between columns.
 This provides enough space between the grid and the edges of the screen or window.
 
 Some elements, such as full-screen images and the page’s footer, can be positioned over these margins.
@@ -74,7 +74,7 @@ These are, therefore, slightly wider than the rest of the content.
 
 #### Compact
 
-In the compact theme, the margins outside the grid are as wide as the white spaces inside.
+In the compact theme, the margins outside the grid are as wide as the gaps inside of it.
 No elements are placed over these margins.
 
 ### Menu bar
@@ -106,24 +106,24 @@ In practice, these design choices result in the following dimensions in pixels.
 
 ### Widths per breakpoint
 
-The columns, white spaces, and margins have the following widths at the three breakpoints.
+The columns, gaps, and margins have the following widths at the three breakpoints.
 Again, between these widths, the widths grow continuously.
 
 #### Spacious
 
-| Breakpoint | From window width | Number of columns | Column width | White space width | Margin width | Grid width |
-| :--------- | ----------------: | ----------------: | -----------: | ----------------: | -----------: | ---------: |
-| narrow     |               320 |                 4 |           56 |                16 |           24 |        272 |
-| medium     |               576 |                 8 |           42 |                24 |           36 |        504 |
-| wide       |              1088 |                12 |           44 |                40 |           60 |        968 |
+| Breakpoint | From window width | Number of columns | Column width | Gap width | Margin width | Grid width |
+| :--------- | ----------------: | ----------------: | -----------: | --------: | -----------: | ---------: |
+| narrow     |               320 |                 4 |           56 |        16 |           24 |        272 |
+| medium     |               576 |                 8 |           42 |        24 |           36 |        504 |
+| wide       |              1088 |                12 |           44 |        40 |           60 |        968 |
 
 #### Compact
 
-| Breakpoint | From window width | Number of columns | Menu bar width | Column width | White space width | Margin width | Grid width |
-| :--------- | ----------------: | ----------------: | -------------: | -----------: | ----------------: | -----------: | ---------: |
-| narrow     |               320 |                 4 |              0 |           60 |                16 |           16 |        288 |
-| medium     |               576 |                 8 |              0 |           54 |                16 |           16 |        544 |
-| wide       |              1088 |                12 |            112 |           64 |                16 |           16 |        944 |
+| Breakpoint | From window width | Number of columns | Menu bar width | Column width | Gap width | Margin width | Grid width |
+| :--------- | ----------------: | ----------------: | -------------: | -----------: | --------: | -----------: | ---------: |
+| narrow     |               320 |                 4 |              0 |           60 |        16 |           16 |        288 |
+| medium     |               576 |                 8 |              0 |           54 |        16 |           16 |        544 |
+| wide       |              1088 |                12 |            112 |           64 |        16 |           16 |        944 |
 
 ### Not tied to devices
 
@@ -159,19 +159,19 @@ In these three situations, the dimensions are as follows.
 
 #### Spacious
 
-| Device Class | Reference Width | Number of columns | Column width | White space width | Margin width | Grid width |
-| :----------- | --------------: | ----------------: | -----------: | ----------------: | -----------: | ---------: |
-| phone        |             320 |                 4 |           56 |                16 |           24 |        272 |
-| tablet       |             832 |                 8 |           64 |                32 |           48 |        736 |
-| desktop      |            1600 |                12 |           68 |                56 |           84 |       1432 |
+| Device Class | Reference Width | Number of columns | Column width | Gap width | Margin width | Grid width |
+| :----------- | --------------: | ----------------: | -----------: | --------: | -----------: | ---------: |
+| phone        |             320 |                 4 |           56 |        16 |           24 |        272 |
+| tablet       |             832 |                 8 |           64 |        32 |           48 |        736 |
+| desktop      |            1600 |                12 |           68 |        56 |           84 |       1432 |
 
 #### Compact
 
-| Device Class | Reference Width | Number of columns | Menu bar width | Column width | White space width | Margin width | Grid width |
-| :----------- | --------------: | ----------------: | -------------: | -----------: | ----------------: | -----------: | ---------: |
-| phone        |             320 |                 4 |              0 |           60 |                16 |           16 |        288 |
-| tablet       |             832 |                 8 |              0 |           86 |                16 |           16 |        800 |
-| desktop      |            1600 |                12 |            112 |           98 |                24 |           24 |       1440 |
+| Device Class | Reference Width | Number of columns | Menu bar width | Column width | Gap width | Margin width | Grid width |
+| :----------- | --------------: | ----------------: | -------------: | -----------: | --------: | -----------: | ---------: |
+| phone        |             320 |                 4 |              0 |           60 |        16 |           16 |        288 |
+| tablet       |             832 |                 8 |              0 |           86 |        16 |           16 |        800 |
+| desktop      |            1600 |                12 |            112 |           98 |        24 |           24 |       1440 |
 
 ### Windows or screens
 
diff --git a/storybook/storybook-react/src/Grid/Grid.docs.mdx b/storybook/storybook-react/src/Grid/Grid.docs.mdx
index 1422e9c414..42a4c11dae 100644
--- a/storybook/storybook-react/src/Grid/Grid.docs.mdx
+++ b/storybook/storybook-react/src/Grid/Grid.docs.mdx
@@ -19,7 +19,7 @@ On narrow screens, you will see three rows of four columns; on medium-wide scree
 ### Vertical Margin
 
 Unlike the horizontal margins between columns, the vertical ones above and below are adjustable.
-The options `paddingVertical`, `paddingTop`, and `paddingBottom` add white space.
+The `paddingVertical`, `paddingTop`, and `paddingBottom` props add vertical white space above and below the grid.
 This is useful in a coloured area like [Footer](?path=/docs/react_containers-footer--docs) or [Spotlight](?path=/docs/react_containers-spotlight--docs) or between two consecutive grids.
 
 Specify a value of `medium` for vertical white space as wide as the horizontal.

From 918fe7f23397e2235c631a806d43d8b53c40d7d8 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Fri, 16 Feb 2024 10:43:21 +0100
Subject: [PATCH 03/14] Use column amounts to refer to grid variants

---
 storybook/storybook-docs/src/grid.stories.mdx | 26 +++++++++----------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/storybook/storybook-docs/src/grid.stories.mdx b/storybook/storybook-docs/src/grid.stories.mdx
index a70fbeadd4..3fc080a7ed 100644
--- a/storybook/storybook-docs/src/grid.stories.mdx
+++ b/storybook/storybook-docs/src/grid.stories.mdx
@@ -18,8 +18,6 @@ In windows up to 576 pixels wide, the grid has 4 columns.
 Up to a width of 1088 pixels, it has 8 columns.
 At that point and beyond, it has 12 columns.
 
-We refer to these three variants as the narrow, medium, and wide grid.
-
 The breakpoints are based on steps of 256 pixels, starting with a base of 64 pixels.
 So, 576 = 64 + 2 × 256 and 1088 = 64 + 4 × 256.
 
@@ -82,7 +80,7 @@ No elements are placed over these margins.
 In the wide grid, applications have a vertical menu bar on the left side.
 This is next to the grid, not inside, and has a fixed width of 112 pixels.
 
-The menu is placed horizontally below the header in the medium and narrow grids.
+The menu is placed horizontally below the header in the 4- and 8-column grids.
 In this context, the grid takes up the entire width of the window.
 
 ### Maximum width
@@ -96,7 +94,7 @@ The grid has this width in windows of at least 1600 pixels wide – the margins
 Applications often use the entire width of the window.
 
 There is no explicit minimum width.
-Even in windows narrower than 320 pixels, to the extent that they occur in practice,
+Even in windows narrower than 320 pixels, as far as they occur in practice,
 the grid continues to scale to the available width.
 For convenience, the width of 320 plays a role in the documentation.
 
@@ -111,19 +109,19 @@ Again, between these widths, the widths grow continuously.
 
 #### Spacious
 
-| Breakpoint | From window width | Number of columns | Column width | Gap width | Margin width | Grid width |
-| :--------- | ----------------: | ----------------: | -----------: | --------: | -----------: | ---------: |
-| narrow     |               320 |                 4 |           56 |        16 |           24 |        272 |
-| medium     |               576 |                 8 |           42 |        24 |           36 |        504 |
-| wide       |              1088 |                12 |           44 |        40 |           60 |        968 |
+| Grid       | Window width | Number of columns | Column width | White space width | Margin width | Grid width |
+| :--------- | -----------: | ----------------: | -----------: | ----------------: | -----------: | ---------: |
+| 4 columns  |          320 |                 4 |           56 |                16 |           24 |        272 |
+| 8 columns  |          576 |                 8 |           42 |                24 |           36 |        504 |
+| 12 columns |         1088 |                12 |           44 |                40 |           60 |        968 |
 
 #### Compact
 
-| Breakpoint | From window width | Number of columns | Menu bar width | Column width | Gap width | Margin width | Grid width |
-| :--------- | ----------------: | ----------------: | -------------: | -----------: | --------: | -----------: | ---------: |
-| narrow     |               320 |                 4 |              0 |           60 |        16 |           16 |        288 |
-| medium     |               576 |                 8 |              0 |           54 |        16 |           16 |        544 |
-| wide       |              1088 |                12 |            112 |           64 |        16 |           16 |        944 |
+| Grid       | Window width | Number of columns | Menu bar width | Column width | White space width | Margin width | Grid width |
+| :--------- | -----------: | ----------------: | -------------: | -----------: | ----------------: | -----------: | ---------: |
+| 4 columns  |          320 |                 4 |              0 |           60 |                16 |           16 |        288 |
+| 8 columns  |          576 |                 8 |              0 |           54 |                16 |           16 |        544 |
+| 12 columns |         1088 |                12 |            112 |           64 |                16 |           16 |        944 |
 
 ### Not tied to devices
 

From 1b633e6b717cd4536d1e6bae4343e79826911230 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Wed, 21 Feb 2024 16:37:18 +0100
Subject: [PATCH 04/14] Generate grid gap and padding classes through
 configuration

---
 packages/css/src/components/grid/grid.scss | 78 +++++++++++-----------
 1 file changed, 38 insertions(+), 40 deletions(-)

diff --git a/packages/css/src/components/grid/grid.scss b/packages/css/src/components/grid/grid.scss
index 666c6bf01b..98d6c93141 100644
--- a/packages/css/src/components/grid/grid.scss
+++ b/packages/css/src/components/grid/grid.scss
@@ -3,7 +3,33 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
+@use "sass:list";
+@use "sass:map";
 @import "../../common/breakpoint";
+@import "../../common/size";
+
+$amsterdam-grid-sizes: ();
+$amsterdam-grid-allowed-sizes: ("sm", "md", "lg");
+$amsterdam-grid-gap-classes: (
+  "gap-vertical": "row-gap",
+);
+$amsterdam-grid-padding-classes: (
+  "padding-bottom": "padding-block-end",
+  "padding-top": "padding-block-start",
+  "padding-vertical": "padding-block",
+);
+
+// Filter sizes to sm, md, lg
+@each $size, $label in $amsterdam-sizes {
+  @if list.index($amsterdam-grid-allowed-sizes, $size) {
+    $amsterdam-grid-sizes: map.merge(
+      $amsterdam-grid-sizes,
+      (
+        $size: $label,
+      )
+    );
+  }
+}
 
 .amsterdam-grid {
   display: grid;
@@ -24,48 +50,20 @@
   row-gap: initial;
 }
 
-.amsterdam-grid--gap-vertical--small {
-  row-gap: var(--amsterdam-grid-gap-sm);
-}
-
-.amsterdam-grid--gap-vertical--large {
-  row-gap: var(--amsterdam-grid-gap-lg);
-}
-
-.amsterdam-grid--padding-bottom--small {
-  padding-block-end: var(--amsterdam-grid-padding-block-sm);
-}
-
-.amsterdam-grid--padding-bottom--medium {
-  padding-block-end: var(--amsterdam-grid-padding-block-md);
-}
-
-.amsterdam-grid--padding-bottom--large {
-  padding-block-end: var(--amsterdam-grid-padding-block-lg);
-}
-
-.amsterdam-grid--padding-top--small {
-  padding-block-start: var(--amsterdam-grid-padding-block-sm);
-}
-
-.amsterdam-grid--padding-top--medium {
-  padding-block-start: var(--amsterdam-grid-padding-block-md);
-}
-
-.amsterdam-grid--padding-top--large {
-  padding-block-start: var(--amsterdam-grid-padding-block-lg);
-}
-
-.amsterdam-grid--padding-vertical--small {
-  padding-block: var(--amsterdam-grid-padding-block-sm);
-}
-
-.amsterdam-grid--padding-vertical--medium {
-  padding-block: var(--amsterdam-grid-padding-block-md);
+@each $class, $property in $amsterdam-grid-gap-classes {
+  @each $size, $label in $amsterdam-grid-sizes {
+    .amsterdam-grid--#{$class}--#{$label} {
+      #{$property}: var(--amsterdam-grid-gap-#{$size});
+    }
+  }
 }
 
-.amsterdam-grid--padding-vertical--large {
-  padding-block: var(--amsterdam-grid-padding-block-lg);
+@each $class, $property in $amsterdam-grid-padding-classes {
+  @each $size, $label in $amsterdam-grid-sizes {
+    .amsterdam-grid--#{$class}--#{$label} {
+      #{$property}: var(--amsterdam-grid-padding-block-#{$size});
+    }
+  }
 }
 
 .amsterdam-grid__cell--span-all {

From ec5e7d217195024d533f324bd1176e346e3c61dc Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Wed, 21 Feb 2024 17:23:33 +0100
Subject: [PATCH 05/14] Revert "Use column amounts to refer to grid variants"

This reverts commit 918fe7f23397e2235c631a806d43d8b53c40d7d8.
---
 storybook/storybook-docs/src/grid.stories.mdx | 26 ++++++++++---------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/storybook/storybook-docs/src/grid.stories.mdx b/storybook/storybook-docs/src/grid.stories.mdx
index 3fc080a7ed..a70fbeadd4 100644
--- a/storybook/storybook-docs/src/grid.stories.mdx
+++ b/storybook/storybook-docs/src/grid.stories.mdx
@@ -18,6 +18,8 @@ In windows up to 576 pixels wide, the grid has 4 columns.
 Up to a width of 1088 pixels, it has 8 columns.
 At that point and beyond, it has 12 columns.
 
+We refer to these three variants as the narrow, medium, and wide grid.
+
 The breakpoints are based on steps of 256 pixels, starting with a base of 64 pixels.
 So, 576 = 64 + 2 × 256 and 1088 = 64 + 4 × 256.
 
@@ -80,7 +82,7 @@ No elements are placed over these margins.
 In the wide grid, applications have a vertical menu bar on the left side.
 This is next to the grid, not inside, and has a fixed width of 112 pixels.
 
-The menu is placed horizontally below the header in the 4- and 8-column grids.
+The menu is placed horizontally below the header in the medium and narrow grids.
 In this context, the grid takes up the entire width of the window.
 
 ### Maximum width
@@ -94,7 +96,7 @@ The grid has this width in windows of at least 1600 pixels wide – the margins
 Applications often use the entire width of the window.
 
 There is no explicit minimum width.
-Even in windows narrower than 320 pixels, as far as they occur in practice,
+Even in windows narrower than 320 pixels, to the extent that they occur in practice,
 the grid continues to scale to the available width.
 For convenience, the width of 320 plays a role in the documentation.
 
@@ -109,19 +111,19 @@ Again, between these widths, the widths grow continuously.
 
 #### Spacious
 
-| Grid       | Window width | Number of columns | Column width | White space width | Margin width | Grid width |
-| :--------- | -----------: | ----------------: | -----------: | ----------------: | -----------: | ---------: |
-| 4 columns  |          320 |                 4 |           56 |                16 |           24 |        272 |
-| 8 columns  |          576 |                 8 |           42 |                24 |           36 |        504 |
-| 12 columns |         1088 |                12 |           44 |                40 |           60 |        968 |
+| Breakpoint | From window width | Number of columns | Column width | Gap width | Margin width | Grid width |
+| :--------- | ----------------: | ----------------: | -----------: | --------: | -----------: | ---------: |
+| narrow     |               320 |                 4 |           56 |        16 |           24 |        272 |
+| medium     |               576 |                 8 |           42 |        24 |           36 |        504 |
+| wide       |              1088 |                12 |           44 |        40 |           60 |        968 |
 
 #### Compact
 
-| Grid       | Window width | Number of columns | Menu bar width | Column width | White space width | Margin width | Grid width |
-| :--------- | -----------: | ----------------: | -------------: | -----------: | ----------------: | -----------: | ---------: |
-| 4 columns  |          320 |                 4 |              0 |           60 |                16 |           16 |        288 |
-| 8 columns  |          576 |                 8 |              0 |           54 |                16 |           16 |        544 |
-| 12 columns |         1088 |                12 |            112 |           64 |                16 |           16 |        944 |
+| Breakpoint | From window width | Number of columns | Menu bar width | Column width | Gap width | Margin width | Grid width |
+| :--------- | ----------------: | ----------------: | -------------: | -----------: | --------: | -----------: | ---------: |
+| narrow     |               320 |                 4 |              0 |           60 |        16 |           16 |        288 |
+| medium     |               576 |                 8 |              0 |           54 |        16 |           16 |        544 |
+| wide       |              1088 |                12 |            112 |           64 |        16 |           16 |        944 |
 
 ### Not tied to devices
 

From e3dc302dd19069f74f0850ea61a554ec06d7f05a Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Tue, 27 Feb 2024 12:38:06 +0100
Subject: [PATCH 06/14] Revert generating gap and margin classes

---
 packages/css/src/components/grid/grid.scss | 88 ++++++++++++----------
 1 file changed, 50 insertions(+), 38 deletions(-)

diff --git a/packages/css/src/components/grid/grid.scss b/packages/css/src/components/grid/grid.scss
index 50b33ade7c..98637ab09f 100644
--- a/packages/css/src/components/grid/grid.scss
+++ b/packages/css/src/components/grid/grid.scss
@@ -3,33 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-@use "sass:list";
-@use "sass:map";
 @import "../../common/breakpoint";
-@import "../../common/size";
-
-$amsterdam-grid-sizes: ();
-$amsterdam-grid-allowed-sizes: ("sm", "md", "lg");
-$amsterdam-grid-gap-classes: (
-  "gap-vertical": "row-gap",
-);
-$amsterdam-grid-padding-classes: (
-  "padding-bottom": "padding-block-end",
-  "padding-top": "padding-block-start",
-  "padding-vertical": "padding-block",
-);
-
-// Filter sizes to sm, md, lg
-@each $size, $label in $amsterdam-sizes {
-  @if list.index($amsterdam-grid-allowed-sizes, $size) {
-    $amsterdam-grid-sizes: map.merge(
-      $amsterdam-grid-sizes,
-      (
-        $size: $label,
-      )
-    );
-  }
-}
 
 .amsterdam-grid {
   display: grid;
@@ -46,26 +20,64 @@ $amsterdam-grid-padding-classes: (
   }
 }
 
+// Gap
+
 .amsterdam-grid--gap-vertical--none {
   row-gap: initial;
 }
 
-@each $class, $property in $amsterdam-grid-gap-classes {
-  @each $size, $label in $amsterdam-grid-sizes {
-    .amsterdam-grid--#{$class}--#{$label} {
-      #{$property}: var(--amsterdam-grid-gap-#{$size});
-    }
-  }
+.amsterdam-grid--gap-vertical--small {
+  row-gap: var(--amsterdam-grid-gap-sm);
 }
 
-@each $class, $property in $amsterdam-grid-padding-classes {
-  @each $size, $label in $amsterdam-grid-sizes {
-    .amsterdam-grid--#{$class}--#{$label} {
-      #{$property}: var(--amsterdam-grid-padding-block-#{$size});
-    }
-  }
+.amsterdam-grid--gap-vertical--medium {
+  row-gap: var(--amsterdam-grid-gap-md);
 }
 
+.amsterdam-grid--gap-vertical--large {
+  row-gap: var(--amsterdam-grid-gap-lg);
+}
+
+// Vertical padding
+
+.amsterdam-grid--padding-bottom--small {
+  padding-block-end: var(--amsterdam-grid-padding-block-sm);
+}
+
+.amsterdam-grid--padding-bottom--medium {
+  padding-block-end: var(--amsterdam-grid-padding-block-md);
+}
+
+.amsterdam-grid--padding-bottom--large {
+  padding-block-end: var(--amsterdam-grid-padding-block-lg);
+}
+
+.amsterdam-grid--padding-top--small {
+  padding-block-start: var(--amsterdam-grid-padding-block-sm);
+}
+
+.amsterdam-grid--padding-top--medium {
+  padding-block-start: var(--amsterdam-grid-padding-block-md);
+}
+
+.amsterdam-grid--padding-top--large {
+  padding-block-start: var(--amsterdam-grid-padding-block-lg);
+}
+
+.amsterdam-grid--padding-vertical--small {
+  padding-block: var(--amsterdam-grid-padding-block-sm);
+}
+
+.amsterdam-grid--padding-vertical--medium {
+  padding-block: var(--amsterdam-grid-padding-block-md);
+}
+
+.amsterdam-grid--padding-vertical--large {
+  padding-block: var(--amsterdam-grid-padding-block-lg);
+}
+
+// Cell span
+
 .amsterdam-grid__cell--span-all {
   grid-column: 1 / -1;
 }

From 8f8bdaf271be0b5fcff86bc29c937134d7da20bc Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Tue, 27 Feb 2024 14:32:12 +0100
Subject: [PATCH 07/14] Test all gap and margin classes

---
 packages/react/src/Grid/Grid.test.tsx | 84 ++++++++++++++++++++++-----
 packages/react/src/Grid/Grid.tsx      |  2 +-
 2 files changed, 70 insertions(+), 16 deletions(-)

diff --git a/packages/react/src/Grid/Grid.test.tsx b/packages/react/src/Grid/Grid.test.tsx
index 05a144ee71..6335789f76 100644
--- a/packages/react/src/Grid/Grid.test.tsx
+++ b/packages/react/src/Grid/Grid.test.tsx
@@ -1,63 +1,117 @@
 import { render } from '@testing-library/react'
 import { createRef } from 'react'
 import { Grid } from './Grid'
+import type { GridPaddingSize } from './Grid'
 import '@testing-library/jest-dom'
 
+const paddingSizes = ['small', 'medium', 'large']
+
 describe('Grid', () => {
   it('renders', () => {
     const { container } = render(<Grid />)
+
     const component = container.querySelector(':only-child')
+
     expect(component).toBeInTheDocument()
+
     expect(component).toBeVisible()
   })
 
   it('renders a design system BEM class name', () => {
     const { container } = render(<Grid />)
+
     const component = container.querySelector(':only-child')
+
     expect(component).toHaveClass('amsterdam-grid')
   })
 
   it('renders an additional class name', () => {
     const { container } = render(<Grid className="extra" />)
+
     const component = container.querySelector(':only-child')
+
     expect(component).toHaveClass('extra')
+
     expect(component).toHaveClass('amsterdam-grid')
   })
 
-  it('renders a medium vertical padding class name', () => {
-    const { container } = render(<Grid paddingVertical="medium" />)
-    const component = container.querySelector(':only-child')
-    expect(component).toHaveClass('amsterdam-grid--padding-vertical--medium')
-  })
+  it('renders the correct class name for a zero gap', () => {
+    const { container } = render(<Grid gapVertical="none" />)
 
-  it('renders a small top class name', () => {
-    const { container } = render(<Grid paddingTop="small" />)
     const component = container.querySelector(':only-child')
-    expect(component).toHaveClass('amsterdam-grid--padding-top--small')
+
+    expect(component).toHaveClass('amsterdam-grid--gap-vertical--none')
   })
 
-  it('renders a large bottom class name', () => {
-    const { container } = render(<Grid paddingBottom="large" />)
+  it(`renders the correct class name for a small gap`, () => {
+    const { container } = render(<Grid gapVertical="small" />)
+
     const component = container.querySelector(':only-child')
-    expect(component).toHaveClass('amsterdam-grid--padding-bottom--large')
+
+    expect(component).toHaveClass('amsterdam-grid--gap-vertical--small')
   })
 
-  it('renders a class name for a vertical gap', () => {
+  it(`renders the correct class name for a large gap`, () => {
     const { container } = render(<Grid gapVertical="large" />)
+
     const component = container.querySelector(':only-child')
+
     expect(component).toHaveClass('amsterdam-grid--gap-vertical--large')
   })
 
-  it('renders a class name for a vertical gap and a vertical padding', () => {
-    const { container } = render(<Grid gapVertical="small" paddingVertical="large" />)
+  it(`renders the correct class name for a small bottom padding`, () => {
+    const { container } = render(<Grid paddingBottom="small" />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toHaveClass('amsterdam-grid--padding-bottom--small')
+  })
+
+  it(`renders the correct class name for a small bottom padding`, () => {
+    const { container } = render(<Grid paddingBottom="small" />)
+
     const component = container.querySelector(':only-child')
-    expect(component).toHaveClass('amsterdam-grid--gap-vertical--small amsterdam-grid--padding-vertical--large')
+
+    expect(component).toHaveClass('amsterdam-grid--padding-bottom--small')
+  })
+
+  paddingSizes.forEach((size) => {
+    it(`renders the correct class name for a ${size} bottom padding`, () => {
+      const { container } = render(<Grid paddingBottom={size as GridPaddingSize} />)
+
+      const component = container.querySelector(':only-child')
+
+      expect(component).toHaveClass(`amsterdam-grid--padding-bottom--${size}`)
+    })
+  })
+
+  paddingSizes.forEach((size) => {
+    it(`renders the correct class name for a ${size} top padding`, () => {
+      const { container } = render(<Grid paddingTop={size as GridPaddingSize} />)
+
+      const component = container.querySelector(':only-child')
+
+      expect(component).toHaveClass(`amsterdam-grid--padding-top--${size}`)
+    })
+  })
+
+  paddingSizes.forEach((size) => {
+    it(`renders the correct class name for a ${size} vertical padding`, () => {
+      const { container } = render(<Grid paddingVertical={size as GridPaddingSize} />)
+
+      const component = container.querySelector(':only-child')
+
+      expect(component).toHaveClass(`amsterdam-grid--padding-vertical--${size}`)
+    })
   })
 
   it('supports ForwardRef in React', () => {
     const ref = createRef<HTMLDivElement>()
+
     const { container } = render(<Grid ref={ref} />)
+
     const component = container.querySelector(':only-child')
+
     expect(ref.current).toBe(component)
   })
 })
diff --git a/packages/react/src/Grid/Grid.tsx b/packages/react/src/Grid/Grid.tsx
index 2942a49d2c..0bd9ba9e17 100644
--- a/packages/react/src/Grid/Grid.tsx
+++ b/packages/react/src/Grid/Grid.tsx
@@ -16,7 +16,7 @@ export type GridColumnNumbers = {
   wide: GridColumnNumber
 }
 
-type GridPaddingSize = 'small' | 'medium' | 'large'
+export type GridPaddingSize = 'small' | 'medium' | 'large'
 
 type GridPaddingVerticalProp = {
   paddingBottom?: never

From ccf3478b47666a7563df78c6bdb2e68cd42e6ce3 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Tue, 27 Feb 2024 14:37:06 +0100
Subject: [PATCH 08/14] Fix interpolation for tokens

---
 .../amsterdam/grid.compact.tokens.json        |  2 +-
 .../src/components/amsterdam/grid.tokens.json | 22 +++++++++----------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/proprietary/tokens/src/components/amsterdam/grid.compact.tokens.json b/proprietary/tokens/src/components/amsterdam/grid.compact.tokens.json
index a3f4bba4cc..e73e5f975e 100644
--- a/proprietary/tokens/src/components/amsterdam/grid.compact.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/grid.compact.tokens.json
@@ -1,7 +1,7 @@
 {
   "amsterdam": {
     "grid": {
-      "padding-inline": { "value": "amsterdam.space.md" }
+      "padding-inline": { "value": "{amsterdam.space.md}" }
     }
   }
 }
diff --git a/proprietary/tokens/src/components/amsterdam/grid.tokens.json b/proprietary/tokens/src/components/amsterdam/grid.tokens.json
index f6d8019e1a..b7d285ba50 100644
--- a/proprietary/tokens/src/components/amsterdam/grid.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/grid.tokens.json
@@ -3,20 +3,20 @@
     "grid": {
       "column-count": { "value": "4" },
       "gap": {
-        "xs": { "value": "amsterdam.space.xs" },
-        "sm": { "value": "amsterdam.space.sm" },
-        "md": { "value": "amsterdam.space.md" },
-        "lg": { "value": "amsterdam.space.lg" },
-        "xl": { "value": "amsterdam.space.xl" }
+        "xs": { "value": "{amsterdam.space.xs}" },
+        "sm": { "value": "{amsterdam.space.sm}" },
+        "md": { "value": "{amsterdam.space.md}" },
+        "lg": { "value": "{amsterdam.space.lg}" },
+        "xl": { "value": "{amsterdam.space.xl}" }
       },
       "padding-block": {
-        "xs": { "value": "amsterdam.space.xs" },
-        "sm": { "value": "amsterdam.space.sm" },
-        "md": { "value": "amsterdam.space.md" },
-        "lg": { "value": "amsterdam.space.lg" },
-        "xl": { "value": "amsterdam.space.xl" }
+        "xs": { "value": "{amsterdam.space.xs}" },
+        "sm": { "value": "{amsterdam.space.sm}" },
+        "md": { "value": "{amsterdam.space.md}" },
+        "lg": { "value": "{amsterdam.space.lg}" },
+        "xl": { "value": "{amsterdam.space.xl}" }
       },
-      "padding-inline": { "value": "amsterdam.space.lg" },
+      "padding-inline": { "value": "{amsterdam.space.lg}" },
       "medium": {
         "column-count": { "value": "8" }
       },

From 973549abca880a568580b8a551a9b6c3993a721e Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Tue, 27 Feb 2024 22:18:04 +0100
Subject: [PATCH 09/14] Remove unneeded class

---
 packages/css/src/components/grid/grid.scss | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/css/src/components/grid/grid.scss b/packages/css/src/components/grid/grid.scss
index 98637ab09f..86b8f49e1b 100644
--- a/packages/css/src/components/grid/grid.scss
+++ b/packages/css/src/components/grid/grid.scss
@@ -30,10 +30,6 @@
   row-gap: var(--amsterdam-grid-gap-sm);
 }
 
-.amsterdam-grid--gap-vertical--medium {
-  row-gap: var(--amsterdam-grid-gap-md);
-}
-
 .amsterdam-grid--gap-vertical--large {
   row-gap: var(--amsterdam-grid-gap-lg);
 }

From 19cb6f213ca340d75d2b14c151c13bda6d58d158 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Tue, 27 Feb 2024 22:25:07 +0100
Subject: [PATCH 10/14] Reuse properties in padding classes

---
 packages/css/src/components/grid/grid.scss | 36 ++++++++--------------
 1 file changed, 12 insertions(+), 24 deletions(-)

diff --git a/packages/css/src/components/grid/grid.scss b/packages/css/src/components/grid/grid.scss
index 86b8f49e1b..eeb44f3ff7 100644
--- a/packages/css/src/components/grid/grid.scss
+++ b/packages/css/src/components/grid/grid.scss
@@ -20,8 +20,6 @@
   }
 }
 
-// Gap
-
 .amsterdam-grid--gap-vertical--none {
   row-gap: initial;
 }
@@ -34,46 +32,36 @@
   row-gap: var(--amsterdam-grid-gap-lg);
 }
 
-// Vertical padding
-
-.amsterdam-grid--padding-bottom--small {
+.amsterdam-grid--padding-bottom--small,
+.amsterdam-grid--padding-vertical--small {
   padding-block-end: var(--amsterdam-grid-padding-block-sm);
 }
 
-.amsterdam-grid--padding-bottom--medium {
+.amsterdam-grid--padding-bottom--medium,
+.amsterdam-grid--padding-vertical--medium {
   padding-block-end: var(--amsterdam-grid-padding-block-md);
 }
 
-.amsterdam-grid--padding-bottom--large {
+.amsterdam-grid--padding-bottom--large,
+.amsterdam-grid--padding-vertical--large {
   padding-block-end: var(--amsterdam-grid-padding-block-lg);
 }
 
-.amsterdam-grid--padding-top--small {
-  padding-block-start: var(--amsterdam-grid-padding-block-sm);
-}
-
-.amsterdam-grid--padding-top--medium {
-  padding-block-start: var(--amsterdam-grid-padding-block-md);
-}
-
-.amsterdam-grid--padding-top--large {
-  padding-block-start: var(--amsterdam-grid-padding-block-lg);
-}
-
+.amsterdam-grid--padding-top--small,
 .amsterdam-grid--padding-vertical--small {
-  padding-block: var(--amsterdam-grid-padding-block-sm);
+  padding-block-start: var(--amsterdam-grid-padding-block-sm);
 }
 
+.amsterdam-grid--padding-top--medium,
 .amsterdam-grid--padding-vertical--medium {
-  padding-block: var(--amsterdam-grid-padding-block-md);
+  padding-block-start: var(--amsterdam-grid-padding-block-md);
 }
 
+.amsterdam-grid--padding-top--large,
 .amsterdam-grid--padding-vertical--large {
-  padding-block: var(--amsterdam-grid-padding-block-lg);
+  padding-block-start: var(--amsterdam-grid-padding-block-lg);
 }
 
-// Cell span
-
 .amsterdam-grid__cell--span-all {
   grid-column: 1 / -1;
 }

From 9ce6e486dd79c1e18f18157c4fa856a903d2f22b Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Wed, 28 Feb 2024 10:45:38 +0100
Subject: [PATCH 11/14] Revert "Reuse properties in padding classes"

This reverts commit 19cb6f213ca340d75d2b14c151c13bda6d58d158.
---
 packages/css/src/components/grid/grid.scss | 36 ++++++++++++++--------
 1 file changed, 24 insertions(+), 12 deletions(-)

diff --git a/packages/css/src/components/grid/grid.scss b/packages/css/src/components/grid/grid.scss
index eeb44f3ff7..86b8f49e1b 100644
--- a/packages/css/src/components/grid/grid.scss
+++ b/packages/css/src/components/grid/grid.scss
@@ -20,6 +20,8 @@
   }
 }
 
+// Gap
+
 .amsterdam-grid--gap-vertical--none {
   row-gap: initial;
 }
@@ -32,36 +34,46 @@
   row-gap: var(--amsterdam-grid-gap-lg);
 }
 
-.amsterdam-grid--padding-bottom--small,
-.amsterdam-grid--padding-vertical--small {
+// Vertical padding
+
+.amsterdam-grid--padding-bottom--small {
   padding-block-end: var(--amsterdam-grid-padding-block-sm);
 }
 
-.amsterdam-grid--padding-bottom--medium,
-.amsterdam-grid--padding-vertical--medium {
+.amsterdam-grid--padding-bottom--medium {
   padding-block-end: var(--amsterdam-grid-padding-block-md);
 }
 
-.amsterdam-grid--padding-bottom--large,
-.amsterdam-grid--padding-vertical--large {
+.amsterdam-grid--padding-bottom--large {
   padding-block-end: var(--amsterdam-grid-padding-block-lg);
 }
 
-.amsterdam-grid--padding-top--small,
-.amsterdam-grid--padding-vertical--small {
+.amsterdam-grid--padding-top--small {
   padding-block-start: var(--amsterdam-grid-padding-block-sm);
 }
 
-.amsterdam-grid--padding-top--medium,
-.amsterdam-grid--padding-vertical--medium {
+.amsterdam-grid--padding-top--medium {
   padding-block-start: var(--amsterdam-grid-padding-block-md);
 }
 
-.amsterdam-grid--padding-top--large,
-.amsterdam-grid--padding-vertical--large {
+.amsterdam-grid--padding-top--large {
   padding-block-start: var(--amsterdam-grid-padding-block-lg);
 }
 
+.amsterdam-grid--padding-vertical--small {
+  padding-block: var(--amsterdam-grid-padding-block-sm);
+}
+
+.amsterdam-grid--padding-vertical--medium {
+  padding-block: var(--amsterdam-grid-padding-block-md);
+}
+
+.amsterdam-grid--padding-vertical--large {
+  padding-block: var(--amsterdam-grid-padding-block-lg);
+}
+
+// Cell span
+
 .amsterdam-grid__cell--span-all {
   grid-column: 1 / -1;
 }

From 3ff01f7fd3c2463e67b285f85c46e4a3ad0a777c Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Wed, 28 Feb 2024 11:09:50 +0100
Subject: [PATCH 12/14] =?UTF-8?q?Make=20explicit=20that=20column=20gap=20d?=
 =?UTF-8?q?oesn=E2=80=99t=20have=20multiple=20options?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/css/src/components/grid/grid.scss          | 13 ++++---------
 .../src/components/amsterdam/grid.tokens.json       |  7 ++++---
 .../src/components/amsterdam/header.tokens.json     |  5 ++++-
 .../src/components/amsterdam/mega-menu.tokens.json  | 10 ++++++++--
 4 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/packages/css/src/components/grid/grid.scss b/packages/css/src/components/grid/grid.scss
index 86b8f49e1b..56d1773427 100644
--- a/packages/css/src/components/grid/grid.scss
+++ b/packages/css/src/components/grid/grid.scss
@@ -6,10 +6,11 @@
 @import "../../common/breakpoint";
 
 .amsterdam-grid {
+  column-gap: var(--amsterdam-grid-column-gap);
   display: grid;
-  gap: var(--amsterdam-grid-gap-md);
   grid-template-columns: repeat(var(--amsterdam-grid-column-count), 1fr);
   padding-inline: var(--amsterdam-grid-padding-inline);
+  row-gap: var(--amsterdam-grid-row-gap-md);
 
   @media screen and (min-width: $amsterdam-breakpoint-medium) {
     grid-template-columns: repeat(var(--amsterdam-grid-medium-column-count), 1fr);
@@ -20,22 +21,18 @@
   }
 }
 
-// Gap
-
 .amsterdam-grid--gap-vertical--none {
   row-gap: initial;
 }
 
 .amsterdam-grid--gap-vertical--small {
-  row-gap: var(--amsterdam-grid-gap-sm);
+  row-gap: var(--amsterdam-grid-row-gap-sm);
 }
 
 .amsterdam-grid--gap-vertical--large {
-  row-gap: var(--amsterdam-grid-gap-lg);
+  row-gap: var(--amsterdam-grid-row-gap-lg);
 }
 
-// Vertical padding
-
 .amsterdam-grid--padding-bottom--small {
   padding-block-end: var(--amsterdam-grid-padding-block-sm);
 }
@@ -72,8 +69,6 @@
   padding-block: var(--amsterdam-grid-padding-block-lg);
 }
 
-// Cell span
-
 .amsterdam-grid__cell--span-all {
   grid-column: 1 / -1;
 }
diff --git a/proprietary/tokens/src/components/amsterdam/grid.tokens.json b/proprietary/tokens/src/components/amsterdam/grid.tokens.json
index b7d285ba50..cc09adf0bd 100644
--- a/proprietary/tokens/src/components/amsterdam/grid.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/grid.tokens.json
@@ -2,21 +2,22 @@
   "amsterdam": {
     "grid": {
       "column-count": { "value": "4" },
-      "gap": {
+      "column-gap": { "value": "{amsterdam.space.md}" },
+      "padding-block": {
         "xs": { "value": "{amsterdam.space.xs}" },
         "sm": { "value": "{amsterdam.space.sm}" },
         "md": { "value": "{amsterdam.space.md}" },
         "lg": { "value": "{amsterdam.space.lg}" },
         "xl": { "value": "{amsterdam.space.xl}" }
       },
-      "padding-block": {
+      "padding-inline": { "value": "{amsterdam.space.lg}" },
+      "row-gap": {
         "xs": { "value": "{amsterdam.space.xs}" },
         "sm": { "value": "{amsterdam.space.sm}" },
         "md": { "value": "{amsterdam.space.md}" },
         "lg": { "value": "{amsterdam.space.lg}" },
         "xl": { "value": "{amsterdam.space.xl}" }
       },
-      "padding-inline": { "value": "{amsterdam.space.lg}" },
       "medium": {
         "column-count": { "value": "8" }
       },
diff --git a/proprietary/tokens/src/components/amsterdam/header.tokens.json b/proprietary/tokens/src/components/amsterdam/header.tokens.json
index f45bb65980..7c4d4bfac9 100644
--- a/proprietary/tokens/src/components/amsterdam/header.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/header.tokens.json
@@ -1,7 +1,10 @@
 {
   "amsterdam": {
     "header": {
-      "column-gap": { "value": "{amsterdam.grid.gap}" }
+      "column-gap": {
+        "value": "{amsterdam.space.md}",
+        "comment": "Must have the same value as `amsterdam.grid.column-gap`."
+      }
     }
   }
 }
diff --git a/proprietary/tokens/src/components/amsterdam/mega-menu.tokens.json b/proprietary/tokens/src/components/amsterdam/mega-menu.tokens.json
index 88486b3e30..a739605b63 100644
--- a/proprietary/tokens/src/components/amsterdam/mega-menu.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/mega-menu.tokens.json
@@ -2,10 +2,16 @@
   "amsterdam": {
     "mega-menu": {
       "list-category": {
-        "column-gap": { "value": "{amsterdam.grid.gap}" },
+        "column-gap": {
+          "value": "{amsterdam.space.md}",
+          "comment": "Must have the same value as `amsterdam.grid.column-gap`."
+        },
         "column-width": { "value": "20rem" },
         "padding-block-start": { "value": "1rem" },
-        "padding-block-end": { "value": "{amsterdam.grid.gap}" }
+        "padding-block-end": {
+          "value": "{amsterdam.space.md}",
+          "comment": "Must have the same value as `amsterdam.grid.row-gap.md`."
+        }
       }
     }
   }

From e90f13a3eae598d8b62eb1416ab599c7492febff Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Wed, 28 Feb 2024 11:17:25 +0100
Subject: [PATCH 13/14] Remove unused options for row gap and vertical padding

---
 .../tokens/src/components/amsterdam/grid.tokens.json      | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/proprietary/tokens/src/components/amsterdam/grid.tokens.json b/proprietary/tokens/src/components/amsterdam/grid.tokens.json
index cc09adf0bd..2077aedf86 100644
--- a/proprietary/tokens/src/components/amsterdam/grid.tokens.json
+++ b/proprietary/tokens/src/components/amsterdam/grid.tokens.json
@@ -4,19 +4,15 @@
       "column-count": { "value": "4" },
       "column-gap": { "value": "{amsterdam.space.md}" },
       "padding-block": {
-        "xs": { "value": "{amsterdam.space.xs}" },
         "sm": { "value": "{amsterdam.space.sm}" },
         "md": { "value": "{amsterdam.space.md}" },
-        "lg": { "value": "{amsterdam.space.lg}" },
-        "xl": { "value": "{amsterdam.space.xl}" }
+        "lg": { "value": "{amsterdam.space.lg}" }
       },
       "padding-inline": { "value": "{amsterdam.space.lg}" },
       "row-gap": {
-        "xs": { "value": "{amsterdam.space.xs}" },
         "sm": { "value": "{amsterdam.space.sm}" },
         "md": { "value": "{amsterdam.space.md}" },
-        "lg": { "value": "{amsterdam.space.lg}" },
-        "xl": { "value": "{amsterdam.space.xl}" }
+        "lg": { "value": "{amsterdam.space.lg}" }
       },
       "medium": {
         "column-count": { "value": "8" }

From 0cdadf2aaaadfc8fe7b199135f9bd3015518f52e Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Wed, 28 Feb 2024 13:50:26 +0100
Subject: [PATCH 14/14] Remove duplicate tests

---
 packages/react/src/Grid/Grid.test.tsx | 16 ----------------
 1 file changed, 16 deletions(-)

diff --git a/packages/react/src/Grid/Grid.test.tsx b/packages/react/src/Grid/Grid.test.tsx
index 6335789f76..f59d1f4771 100644
--- a/packages/react/src/Grid/Grid.test.tsx
+++ b/packages/react/src/Grid/Grid.test.tsx
@@ -59,22 +59,6 @@ describe('Grid', () => {
     expect(component).toHaveClass('amsterdam-grid--gap-vertical--large')
   })
 
-  it(`renders the correct class name for a small bottom padding`, () => {
-    const { container } = render(<Grid paddingBottom="small" />)
-
-    const component = container.querySelector(':only-child')
-
-    expect(component).toHaveClass('amsterdam-grid--padding-bottom--small')
-  })
-
-  it(`renders the correct class name for a small bottom padding`, () => {
-    const { container } = render(<Grid paddingBottom="small" />)
-
-    const component = container.querySelector(':only-child')
-
-    expect(component).toHaveClass('amsterdam-grid--padding-bottom--small')
-  })
-
   paddingSizes.forEach((size) => {
     it(`renders the correct class name for a ${size} bottom padding`, () => {
       const { container } = render(<Grid paddingBottom={size as GridPaddingSize} />)