From 4f8bb39d76d8bfb4012e50df46d5a7010785b8d6 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Wed, 5 Jun 2024 22:14:31 +0200
Subject: [PATCH 01/23] Fix typo in Grid Space value

---
 storybook/src/docs/space.docs.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/storybook/src/docs/space.docs.mdx b/storybook/src/docs/space.docs.mdx
index a80c326f18..ce98337a46 100644
--- a/storybook/src/docs/space.docs.mdx
+++ b/storybook/src/docs/space.docs.mdx
@@ -30,7 +30,7 @@ In Spacious Mode, the medium grid space grows from 16 to 56 pixels between windo
 |       **Small** |   8    |   12   |   16   |   20   |   24   |   28   |
 |      **Medium** | **16** | **24** | **32** | **40** | **48** | **56** |
 |       **Large** |   24   |   36   |   48   |   60   |   72   |   84   |
-| **Extra large** |   32   |   48   |   64   |   80   |   96   |  102   |
+| **Extra large** |   32   |   48   |   64   |   80   |   96   |  112   |
 
 #### Compact
 

From 852b5f03a6c77e90d3ad4e2793213b7d7d96451e Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Wed, 5 Jun 2024 22:14:51 +0200
Subject: [PATCH 02/23] Update values for Stack and Inside Space

---
 .../tokens/src/brand/ams/space.tokens.json    | 24 ++++++-----
 storybook/src/docs/space.docs.mdx             | 43 +++++++++++++------
 2 files changed, 43 insertions(+), 24 deletions(-)

diff --git a/proprietary/tokens/src/brand/ams/space.tokens.json b/proprietary/tokens/src/brand/ams/space.tokens.json
index 3912abf291..3bb62a8903 100644
--- a/proprietary/tokens/src/brand/ams/space.tokens.json
+++ b/proprietary/tokens/src/brand/ams/space.tokens.json
@@ -12,18 +12,22 @@
         "xl": { "value": "clamp(2rem, calc(6.25vw + 0.75rem), 7rem)" }
       },
       "inside": {
-        "xs": { "value": ".5rem" },
-        "sm": { "value": ".75rem" },
-        "md": { "value": "1rem" },
-        "lg": { "value": "1.5rem" },
-        "xl": { "value": "2rem" }
+        "2xs": { "value": "clamp(0.2813rem, 0.2578rem + 0.1172vi, 0.375rem)" },
+        "xs": { "value": "clamp(0.5625rem, 0.5156rem + 0.2344vi, 0.75rem)" },
+        "sm": { "value": "clamp(0.8438rem, 0.7734rem + 0.3516vi, 1.125rem)" },
+        "md": { "value": "clamp(1.125rem, 1.0313rem + 0.4688vi, 1.5rem)" },
+        "lg": { "value": "clamp(1.6875rem, 1.5469rem + 0.7031vi, 2.25rem)" },
+        "xl": { "value": "clamp(2.25rem, 2.0625rem + 0.9375vi, 3rem)" },
+        "2xl": { "value": "clamp(2.8125rem, 2.3906rem + 2.1094vi, 4.5rem)" }
       },
       "stack": {
-        "xs": { "value": ".5rem" },
-        "sm": { "value": ".75rem" },
-        "md": { "value": "1rem" },
-        "lg": { "value": "1.5rem" },
-        "xl": { "value": "2rem" }
+        "2xs": { "value": "clamp(0.2813rem, 0.2578rem + 0.1172vi, 0.375rem)" },
+        "xs": { "value": "clamp(0.5625rem, 0.5156rem + 0.2344vi, 0.75rem)" },
+        "sm": { "value": "clamp(0.8438rem, 0.7734rem + 0.3516vi, 1.125rem)" },
+        "md": { "value": "clamp(1.125rem, 1.0313rem + 0.4688vi, 1.5rem)" },
+        "lg": { "value": "clamp(1.6875rem, 1.5469rem + 0.7031vi, 2.25rem)" },
+        "xl": { "value": "clamp(2.25rem, 2.0625rem + 0.9375vi, 3rem)" },
+        "2xl": { "value": "clamp(2.8125rem, 2.3906rem + 2.1094vi, 4.5rem)" }
       }
     }
   }
diff --git a/storybook/src/docs/space.docs.mdx b/storybook/src/docs/space.docs.mdx
index ce98337a46..c4588f9875 100644
--- a/storybook/src/docs/space.docs.mdx
+++ b/storybook/src/docs/space.docs.mdx
@@ -140,20 +140,35 @@ In Compact Mode, the medium grid space grows from 16 to 40 pixels between window
 
 ## Stack Space
 
-This is the space between sets of components, for example between a list of cards, or next to an image.
-It is also used for combinations of components, like an icon accompanying a text, or a row of buttons.
-
-This type of space is static; it is the same for any window width.
-Five options are available.
-The medium size is 16 pixels wide in both Spacious and Compact Mode.
-
-|                 | Width |
-| --------------: | ----: |
-| **Extra small** |     8 |
-|       **Small** |    12 |
-|      **Medium** |    16 |
-|       **Large** |    24 |
-| **Extra large** |    32 |
+This is the space between components, e.g. between a list of cards, a row of buttons, or an icon and an accompanying text.
+
+This type of space is based on the font size – the medium space length equals the font size.
+Because our typography is fluid, this type of spacing is as well.
+Seven options are available.
+
+### Spacious
+
+|                        |       |    320 |   1600 |
+| ---------------------: | :---: | -----: | -----: |
+| **Double extra small** | `2xs` |    4.5 |      6 |
+|        **Extra small** | `xs`  |      9 |     12 |
+|              **Small** | `sm`  |   13.5 |     18 |
+|             **Medium** | `md`  | **18** | **24** |
+|              **Large** | `lg`  |     27 |     36 |
+|        **Extra large** | `xl`  |     36 |     48 |
+| **Double extra large** | `2xl` |     45 |     72 |
+
+### Compact
+
+|                        |       |    320 |   1600 |
+| ---------------------: | :---: | -----: | -----: |
+| **Double extra small** | `2xs` |    3.5 |    4.5 |
+|        **Extra small** | `xs`  |      7 |      9 |
+|              **Small** | `sm`  |   10.5 |   13.5 |
+|             **Medium** | `md`  | **14** | **18** |
+|              **Large** | `lg`  |     21 |     27 |
+|        **Extra large** | `xl`  |     28 |     36 |
+| **Double extra large** | `2xl` |     35 |     45 |
 
 ## Inside Space
 

From 89eae949e73ce9feb7ee2ff7fd97390a1a54998a Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Tue, 11 Jun 2024 14:32:57 +0200
Subject: [PATCH 03/23] Merge stack and inside space

---
 .../tokens/src/brand/ams/space.tokens.json    | 23 ++----
 .../src/components/ams/accordion.tokens.json  |  8 +-
 .../src/components/ams/alert.tokens.json      |  4 +-
 .../src/components/ams/badge.tokens.json      |  2 +-
 .../src/components/ams/button.tokens.json     |  4 +-
 .../src/components/ams/date-input.tokens.json |  4 +-
 .../ams/description-list.tokens.json          |  6 +-
 .../src/components/ams/field-set.tokens.json  |  4 +-
 .../src/components/ams/field.tokens.json      |  4 +-
 .../src/components/ams/file-input.tokens.json | 10 +--
 .../src/components/ams/header.tokens.json     |  2 +-
 .../src/components/ams/pagination.tokens.json |  2 +-
 .../tokens/src/components/ams/row.tokens.json | 10 +--
 .../components/ams/search-field.tokens.json   |  8 +-
 .../src/components/ams/select.tokens.json     |  6 +-
 .../src/components/ams/skip-link.tokens.json  |  4 +-
 .../ams/table-of-contents.tokens.json         |  8 +-
 .../src/components/ams/table.tokens.json      |  4 +-
 .../src/components/ams/text-input.tokens.json |  4 +-
 .../src/components/ams/time-input.tokens.json |  4 +-
 storybook/src/docs/space.docs.mdx             | 82 ++++++++-----------
 21 files changed, 88 insertions(+), 115 deletions(-)

diff --git a/proprietary/tokens/src/brand/ams/space.tokens.json b/proprietary/tokens/src/brand/ams/space.tokens.json
index 3bb62a8903..a22a7af789 100644
--- a/proprietary/tokens/src/brand/ams/space.tokens.json
+++ b/proprietary/tokens/src/brand/ams/space.tokens.json
@@ -1,6 +1,11 @@
 {
   "ams": {
     "space": {
+      "xs": { "value": "clamp(0.2813rem, 0.2578rem + 0.1172vi, 0.375rem)" },
+      "sm": { "value": "clamp(0.5625rem, 0.5156rem + 0.2344vi, 0.75rem)" },
+      "md": { "value": "clamp(1.125rem, 1.0313rem + 0.4688vi, 1.5rem)" },
+      "lg": { "value": "clamp(1.6875rem, 1.5469rem + 0.7031vi, 2.25rem)" },
+      "xl": { "value": "clamp(2.25rem, 2.0625rem + 0.9375vi, 3rem)" },
       "grid": {
         "xs": { "value": "clamp(0.25rem, calc(0.78125vw + 0.09375rem), 0.875rem)" },
         "sm": { "value": "clamp(0.5rem, calc(1.5625vw + 0.1875rem), 1.75rem)" },
@@ -10,24 +15,6 @@
         },
         "lg": { "value": "clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem)" },
         "xl": { "value": "clamp(2rem, calc(6.25vw + 0.75rem), 7rem)" }
-      },
-      "inside": {
-        "2xs": { "value": "clamp(0.2813rem, 0.2578rem + 0.1172vi, 0.375rem)" },
-        "xs": { "value": "clamp(0.5625rem, 0.5156rem + 0.2344vi, 0.75rem)" },
-        "sm": { "value": "clamp(0.8438rem, 0.7734rem + 0.3516vi, 1.125rem)" },
-        "md": { "value": "clamp(1.125rem, 1.0313rem + 0.4688vi, 1.5rem)" },
-        "lg": { "value": "clamp(1.6875rem, 1.5469rem + 0.7031vi, 2.25rem)" },
-        "xl": { "value": "clamp(2.25rem, 2.0625rem + 0.9375vi, 3rem)" },
-        "2xl": { "value": "clamp(2.8125rem, 2.3906rem + 2.1094vi, 4.5rem)" }
-      },
-      "stack": {
-        "2xs": { "value": "clamp(0.2813rem, 0.2578rem + 0.1172vi, 0.375rem)" },
-        "xs": { "value": "clamp(0.5625rem, 0.5156rem + 0.2344vi, 0.75rem)" },
-        "sm": { "value": "clamp(0.8438rem, 0.7734rem + 0.3516vi, 1.125rem)" },
-        "md": { "value": "clamp(1.125rem, 1.0313rem + 0.4688vi, 1.5rem)" },
-        "lg": { "value": "clamp(1.6875rem, 1.5469rem + 0.7031vi, 2.25rem)" },
-        "xl": { "value": "clamp(2.25rem, 2.0625rem + 0.9375vi, 3rem)" },
-        "2xl": { "value": "clamp(2.8125rem, 2.3906rem + 2.1094vi, 4.5rem)" }
       }
     }
   }
diff --git a/proprietary/tokens/src/components/ams/accordion.tokens.json b/proprietary/tokens/src/components/ams/accordion.tokens.json
index ce7bed268b..a3603f655b 100644
--- a/proprietary/tokens/src/components/ams/accordion.tokens.json
+++ b/proprietary/tokens/src/components/ams/accordion.tokens.json
@@ -1,15 +1,15 @@
 {
   "ams": {
     "accordion": {
-      "gap": { "value": "{ams.space.inside.xs}" },
+      "gap": { "value": "{ams.space.xs}" },
       "button": {
         "color": { "value": "{ams.color.primary-blue}" },
         "font-family": { "value": "{ams.text.font-family}" },
         "font-size": { "value": "{ams.text.level.5.font-size}" },
         "font-weight": { "value": "{ams.text.font-weight.bold}" },
-        "gap": { "value": "{ams.space.inside.md}" },
+        "gap": { "value": "{ams.space.md}" },
         "line-height": { "value": "{ams.text.level.5.line-height}" },
-        "padding-block": { "value": "{ams.space.inside.sm}" },
+        "padding-block": { "value": "{ams.space.sm}" },
         "padding-inline": { "value": "0" },
         "focus": {
           "outline-offset": { "value": "{ams.focus.outline-offset}" }
@@ -19,7 +19,7 @@
         }
       },
       "panel": {
-        "padding-block": { "value": "0 {ams.space.inside.md}" },
+        "padding-block": { "value": "0 {ams.space.md}" },
         "padding-inline": { "value": "0" }
       }
     }
diff --git a/proprietary/tokens/src/components/ams/alert.tokens.json b/proprietary/tokens/src/components/ams/alert.tokens.json
index 9ba890705c..caa68aa743 100644
--- a/proprietary/tokens/src/components/ams/alert.tokens.json
+++ b/proprietary/tokens/src/components/ams/alert.tokens.json
@@ -4,8 +4,8 @@
       "border-width": { "value": "{ams.border.width.xl}" },
       "border-style": { "value": "solid" },
       "gap": { "value": "1rem" },
-      "padding-block": { "value": "{ams.space.inside.md}" },
-      "padding-inline": { "value": "{ams.space.inside.lg}" },
+      "padding-block": { "value": "{ams.space.md}" },
+      "padding-inline": { "value": "{ams.space.lg}" },
       "error": {
         "border-color": { "value": "{ams.color.primary-red}" }
       },
diff --git a/proprietary/tokens/src/components/ams/badge.tokens.json b/proprietary/tokens/src/components/ams/badge.tokens.json
index 7054f6036f..c71242f4f8 100644
--- a/proprietary/tokens/src/components/ams/badge.tokens.json
+++ b/proprietary/tokens/src/components/ams/badge.tokens.json
@@ -5,7 +5,7 @@
       "font-size": { "value": "{ams.text.level.5.font-size}" },
       "font-weight": { "value": "{ams.text.font-weight.bold}" },
       "line-height": { "value": "{ams.text.level.5.line-height}" },
-      "padding-inline": { "value": "{ams.space.inside.xs}" },
+      "padding-inline": { "value": "{ams.space.xs}" },
       "black": {
         "background-color": { "value": "{ams.color.primary-black}" },
         "color": { "value": "{ams.color.primary-white}" }
diff --git a/proprietary/tokens/src/components/ams/button.tokens.json b/proprietary/tokens/src/components/ams/button.tokens.json
index 8a86ccfcd0..e3f48dd306 100644
--- a/proprietary/tokens/src/components/ams/button.tokens.json
+++ b/proprietary/tokens/src/components/ams/button.tokens.json
@@ -6,8 +6,8 @@
       "font-size": { "value": "{ams.text.level.5.font-size}" },
       "line-height": { "value": "{ams.text.level.5.line-height}" },
       "gap": { "value": "1rem" },
-      "padding-block": { "value": "{ams.space.inside.xs}" },
-      "padding-inline": { "value": "{ams.space.inside.md}" },
+      "padding-block": { "value": "{ams.space.xs}" },
+      "padding-inline": { "value": "{ams.space.md}" },
       "outline-offset": { "value": "{ams.focus.outline-offset}" },
       "disabled": {
         "cursor": { "value": "{ams.action.disabled.cursor}" }
diff --git a/proprietary/tokens/src/components/ams/date-input.tokens.json b/proprietary/tokens/src/components/ams/date-input.tokens.json
index d119b52a57..45ad83bdbd 100644
--- a/proprietary/tokens/src/components/ams/date-input.tokens.json
+++ b/proprietary/tokens/src/components/ams/date-input.tokens.json
@@ -9,8 +9,8 @@
       "font-weight": { "value": "{ams.text.font-weight.normal}" },
       "line-height": { "value": "{ams.text.level.5.line-height}" },
       "outline-offset": { "value": "{ams.focus.outline-offset}" },
-      "padding-block": { "value": "{ams.space.inside.xs}" },
-      "padding-inline": { "value": "{ams.space.inside.lg}" },
+      "padding-block": { "value": "{ams.space.xs}" },
+      "padding-inline": { "value": "{ams.space.lg}" },
       "calender-picker-indicator": {
         "background-image": {
           "value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23004699'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>\")"
diff --git a/proprietary/tokens/src/components/ams/description-list.tokens.json b/proprietary/tokens/src/components/ams/description-list.tokens.json
index 9248ca9d8a..89b00a6651 100644
--- a/proprietary/tokens/src/components/ams/description-list.tokens.json
+++ b/proprietary/tokens/src/components/ams/description-list.tokens.json
@@ -5,15 +5,15 @@
       "font-family": { "value": "{ams.text.font-family}" },
       "font-size": { "value": "{ams.text.level.5.font-size}" },
       "font-weight": { "value": "{ams.text.font-weight.normal}" },
-      "gap": { "value": "{ams.space.stack.md}" },
+      "gap": { "value": "{ams.space.md}" },
       "inverse-color": { "value": "{ams.color.primary-white}" },
       "line-height": { "value": "{ams.text.level.5.line-height}" },
       "row": {
-        "gap": { "value": "{ams.space.stack.md}" }
+        "gap": { "value": "{ams.space.md}" }
       },
       "details": {
         "font-weight": { "value": "{ams.text.font-weight.bold}" },
-        "padding-inline-start": { "value": "{ams.space.inside.xl}" }
+        "padding-inline-start": { "value": "{ams.space.xl}" }
       }
     }
   }
diff --git a/proprietary/tokens/src/components/ams/field-set.tokens.json b/proprietary/tokens/src/components/ams/field-set.tokens.json
index cd9e5e7393..f17007d35b 100644
--- a/proprietary/tokens/src/components/ams/field-set.tokens.json
+++ b/proprietary/tokens/src/components/ams/field-set.tokens.json
@@ -6,7 +6,7 @@
           "value": "{ams.border.width.lg} solid {ams.color.primary-red}"
         },
         "padding-inline-start": {
-          "value": "{ams.space.inside.md}"
+          "value": "{ams.space.md}"
         }
       },
       "legend": {
@@ -15,7 +15,7 @@
         "font-size": { "value": "{ams.text.level.4.font-size}" },
         "font-weight": { "value": "{ams.text.font-weight.bold}" },
         "line-height": { "value": "{ams.text.level.4.line-height}" },
-        "margin-block-end": { "value": "{ams.space.inside.md}" }
+        "margin-block-end": { "value": "{ams.space.md}" }
       }
     }
   }
diff --git a/proprietary/tokens/src/components/ams/field.tokens.json b/proprietary/tokens/src/components/ams/field.tokens.json
index 350ba5caad..f89e02b317 100644
--- a/proprietary/tokens/src/components/ams/field.tokens.json
+++ b/proprietary/tokens/src/components/ams/field.tokens.json
@@ -2,14 +2,14 @@
   "ams": {
     "field": {
       "gap": {
-        "value": "{ams.space.stack.sm}"
+        "value": "{ams.space.sm}"
       },
       "invalid": {
         "border-inline-start": {
           "value": "{ams.border.width.lg} solid {ams.color.primary-red}"
         },
         "padding-inline-start": {
-          "value": "{ams.space.inside.md}"
+          "value": "{ams.space.md}"
         }
       }
     }
diff --git a/proprietary/tokens/src/components/ams/file-input.tokens.json b/proprietary/tokens/src/components/ams/file-input.tokens.json
index b0f31f9437..3a18d01e7f 100644
--- a/proprietary/tokens/src/components/ams/file-input.tokens.json
+++ b/proprietary/tokens/src/components/ams/file-input.tokens.json
@@ -10,8 +10,8 @@
       "font-weight": { "value": "{ams.text.font-weight.normal}" },
       "line-height": { "value": "{ams.text.level.5.line-height}" },
       "outline-offset": { "value": "{ams.focus.outline-offset}" },
-      "padding-block": { "value": "{ams.space.inside.md}" },
-      "padding-inline": { "value": "{ams.space.inside.md}" },
+      "padding-block": { "value": "{ams.space.md}" },
+      "padding-inline": { "value": "{ams.space.md}" },
       "disabled": {
         "color": { "value": "{ams.color.neutral-grey2}" },
         "cursor": { "value": "{ams.action.disabled.cursor}" }
@@ -21,9 +21,9 @@
         "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-blue}" },
         "color": { "value": "{ams.color.primary-blue}" },
         "cursor": { "value": "{ams.action.activate.cursor}" },
-        "margin-inline-end": { "value": "{ams.space.inside.md}" },
-        "padding-block": { "value": "{ams.space.inside.xs}" },
-        "padding-inline": { "value": "{ams.space.inside.md}" },
+        "margin-inline-end": { "value": "{ams.space.md}" },
+        "padding-block": { "value": "{ams.space.xs}" },
+        "padding-inline": { "value": "{ams.space.md}" },
         "hover": {
           "box-shadow": { "value": "inset 0 0 0 {ams.border.width.lg} {ams.color.dark-blue}" },
           "color": { "value": "{ams.color.dark-blue}" }
diff --git a/proprietary/tokens/src/components/ams/header.tokens.json b/proprietary/tokens/src/components/ams/header.tokens.json
index f344570fa3..fe4f70d283 100644
--- a/proprietary/tokens/src/components/ams/header.tokens.json
+++ b/proprietary/tokens/src/components/ams/header.tokens.json
@@ -5,7 +5,7 @@
         "value": "{ams.space.grid.md}",
         "comment": "Must have the same value as `ams.grid.column-gap`."
       },
-      "padding-block": { "value": "{ams.space.inside.md}" },
+      "padding-block": { "value": "{ams.space.md}" },
       "logo-link": {
         "outline-offset": { "value": "{ams.focus.outline-offset}" }
       }
diff --git a/proprietary/tokens/src/components/ams/pagination.tokens.json b/proprietary/tokens/src/components/ams/pagination.tokens.json
index ca6dcdc2f3..cfdcd54e05 100644
--- a/proprietary/tokens/src/components/ams/pagination.tokens.json
+++ b/proprietary/tokens/src/components/ams/pagination.tokens.json
@@ -8,7 +8,7 @@
       "line-height": { "value": "{ams.text.level.5.line-height}" },
       "button": {
         "outline-offset": { "value": "{ams.focus.outline-offset}" },
-        "padding-inline": { "value": "{ams.space.inside.sm}" },
+        "padding-inline": { "value": "{ams.space.sm}" },
         "text-decoration-line": { "value": "{ams.link-appearance.subtle.text-decoration-line}" },
         "text-decoration-thickness": { "value": "{ams.link-appearance.text-decoration-thickness}" },
         "text-underline-offset": { "value": "{ams.link-appearance.text-underline-offset}" },
diff --git a/proprietary/tokens/src/components/ams/row.tokens.json b/proprietary/tokens/src/components/ams/row.tokens.json
index f445a0ccd5..cde8f2fa62 100644
--- a/proprietary/tokens/src/components/ams/row.tokens.json
+++ b/proprietary/tokens/src/components/ams/row.tokens.json
@@ -2,11 +2,11 @@
   "ams": {
     "row": {
       "gap": {
-        "xs": { "value": "{ams.space.stack.xs}" },
-        "sm": { "value": "{ams.space.stack.sm}" },
-        "md": { "value": "{ams.space.stack.md}" },
-        "lg": { "value": "{ams.space.stack.lg}" },
-        "xl": { "value": "{ams.space.stack.xl}" }
+        "xs": { "value": "{ams.space.xs}" },
+        "sm": { "value": "{ams.space.sm}" },
+        "md": { "value": "{ams.space.md}" },
+        "lg": { "value": "{ams.space.lg}" },
+        "xl": { "value": "{ams.space.xl}" }
       }
     }
   }
diff --git a/proprietary/tokens/src/components/ams/search-field.tokens.json b/proprietary/tokens/src/components/ams/search-field.tokens.json
index 8634875c9d..1051715da8 100644
--- a/proprietary/tokens/src/components/ams/search-field.tokens.json
+++ b/proprietary/tokens/src/components/ams/search-field.tokens.json
@@ -5,8 +5,8 @@
         "background-color": { "value": "{ams.color.primary-blue}" },
         "color": { "value": "{ams.color.primary-white}" },
         "outline-offset": { "value": "{ams.focus.outline-offset}" },
-        "padding-block": { "value": "{ams.space.inside.xs}" },
-        "padding-inline": { "value": "{ams.space.inside.xs}" },
+        "padding-block": { "value": "{ams.space.xs}" },
+        "padding-inline": { "value": "{ams.space.xs}" },
         "hover": {
           "background-color": { "value": "{ams.color.dark-blue}" }
         }
@@ -22,8 +22,8 @@
         "font-weight": { "value": "{ams.text.font-weight.normal}" },
         "line-height": { "value": "{ams.text.level.5.line-height}" },
         "outline-offset": { "value": "{ams.focus.outline-offset}" },
-        "padding-block": { "value": "{ams.space.inside.xs}" },
-        "padding-inline": { "value": "{ams.space.inside.md}" },
+        "padding-block": { "value": "{ams.space.xs}" },
+        "padding-inline": { "value": "{ams.space.md}" },
         "cancel-button": {
           "background-image": {
             "value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23004699' fill-rule='evenodd' d='M29.333 5.47 26.53 2.668 16 13.187 5.47 2.666 2.668 5.47 13.187 16 2.666 26.53l2.804 2.803L16 18.813l10.53 10.52 2.803-2.804L18.813 16z'/></svg>\")"
diff --git a/proprietary/tokens/src/components/ams/select.tokens.json b/proprietary/tokens/src/components/ams/select.tokens.json
index ad865ff720..707cca4c66 100644
--- a/proprietary/tokens/src/components/ams/select.tokens.json
+++ b/proprietary/tokens/src/components/ams/select.tokens.json
@@ -5,7 +5,7 @@
       "background-image": {
         "value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23004699' fill-rule='evenodd' d='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>\")"
       },
-      "background-position": { "value": "right {ams.space.inside.md} center" },
+      "background-position": { "value": "right {ams.space.md} center" },
       "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.primary-black}" },
       "color": { "value": "{ams.color.primary-black}" },
       "font-family": { "value": "{ams.text.font-family}" },
@@ -13,8 +13,8 @@
       "font-weight": { "value": "{ams.text.font-weight.normal}" },
       "line-height": { "value": "{ams.text.level.5.line-height}" },
       "outline-offset": { "value": "{ams.focus.outline-offset}" },
-      "padding-block": { "value": "{ams.space.inside.xs}" },
-      "padding-inline": { "value": "{ams.space.inside.md} calc(2 * {ams.space.inside.md} + 1em)" },
+      "padding-block": { "value": "{ams.space.xs}" },
+      "padding-inline": { "value": "{ams.space.md} calc(2 * {ams.space.md} + 1em)" },
       "disabled": {
         "background-image": {
           "value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23BEBEBE' fill-rule='evenodd' d='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>\")"
diff --git a/proprietary/tokens/src/components/ams/skip-link.tokens.json b/proprietary/tokens/src/components/ams/skip-link.tokens.json
index d33b8276ff..d93891d1c6 100644
--- a/proprietary/tokens/src/components/ams/skip-link.tokens.json
+++ b/proprietary/tokens/src/components/ams/skip-link.tokens.json
@@ -8,8 +8,8 @@
       "font-weight": { "value": "{ams.text.font-weight.normal}" },
       "line-height": { "value": "{ams.text.level.6.line-height}" },
       "outline-offset": { "value": "{ams.focus.outline-offset}" },
-      "padding-block": { "value": "{ams.space.inside.xs}" },
-      "padding-inline": { "value": "{ams.space.inside.md}" },
+      "padding-block": { "value": "{ams.space.xs}" },
+      "padding-inline": { "value": "{ams.space.md}" },
       "hover": {
         "background-color": { "value": "{ams.color.dark-blue}" }
       }
diff --git a/proprietary/tokens/src/components/ams/table-of-contents.tokens.json b/proprietary/tokens/src/components/ams/table-of-contents.tokens.json
index 9329766bb0..a285dfd6d9 100644
--- a/proprietary/tokens/src/components/ams/table-of-contents.tokens.json
+++ b/proprietary/tokens/src/components/ams/table-of-contents.tokens.json
@@ -4,7 +4,7 @@
       "font-family": { "value": "{ams.text.font-family}" },
       "font-size": { "value": "{ams.text.level.5.font-size}" },
       "font-weight": { "value": "{ams.text.font-weight.normal}" },
-      "gap": { "value": "{ams.space.inside.md}" },
+      "gap": { "value": "{ams.space.md}" },
       "line-height": { "value": "{ams.text.level.5.line-height}" },
       "link": {
         "color": { "value": "{ams.link-appearance.color}" },
@@ -18,10 +18,10 @@
         }
       },
       "list": {
-        "gap": { "value": "{ams.space.inside.md}" },
+        "gap": { "value": "{ams.space.md}" },
         "list": {
-          "padding-block-start": { "value": "{ams.space.inside.md}" },
-          "padding-inline-start": { "value": "{ams.space.inside.lg}" }
+          "padding-block-start": { "value": "{ams.space.md}" },
+          "padding-inline-start": { "value": "{ams.space.lg}" }
         }
       },
       "heading": {
diff --git a/proprietary/tokens/src/components/ams/table.tokens.json b/proprietary/tokens/src/components/ams/table.tokens.json
index 535723394b..d5e1cee2c2 100644
--- a/proprietary/tokens/src/components/ams/table.tokens.json
+++ b/proprietary/tokens/src/components/ams/table.tokens.json
@@ -11,8 +11,8 @@
       },
       "cell": {
         "border-block-end": { "value": "{ams.border.width.sm} solid {ams.color.neutral-grey1}" },
-        "padding-block": { "value": "{ams.space.inside.md}" },
-        "padding-inline": { "value": "{ams.space.inside.md}" }
+        "padding-block": { "value": "{ams.space.md}" },
+        "padding-inline": { "value": "{ams.space.md}" }
       },
       "header-cell": {
         "font-weight": { "value": "{ams.text.font-weight.bold}" }
diff --git a/proprietary/tokens/src/components/ams/text-input.tokens.json b/proprietary/tokens/src/components/ams/text-input.tokens.json
index b043d4166c..7b77548c66 100644
--- a/proprietary/tokens/src/components/ams/text-input.tokens.json
+++ b/proprietary/tokens/src/components/ams/text-input.tokens.json
@@ -9,8 +9,8 @@
       "font-weight": { "value": "{ams.text.font-weight.normal}" },
       "line-height": { "value": "{ams.text.level.5.line-height}" },
       "outline-offset": { "value": "{ams.focus.outline-offset}" },
-      "padding-block": { "value": "{ams.space.inside.xs}" },
-      "padding-inline": { "value": "{ams.space.inside.md}" },
+      "padding-block": { "value": "{ams.space.xs}" },
+      "padding-inline": { "value": "{ams.space.md}" },
       "disabled": {
         "background-color": { "value": "{ams.color.primary-white}" },
         "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.neutral-grey2}" },
diff --git a/proprietary/tokens/src/components/ams/time-input.tokens.json b/proprietary/tokens/src/components/ams/time-input.tokens.json
index 0c3c0a0433..4ab1129db0 100644
--- a/proprietary/tokens/src/components/ams/time-input.tokens.json
+++ b/proprietary/tokens/src/components/ams/time-input.tokens.json
@@ -9,8 +9,8 @@
       "font-weight": { "value": "{ams.text.font-weight.normal}" },
       "line-height": { "value": "{ams.text.level.5.line-height}" },
       "outline-offset": { "value": "{ams.focus.outline-offset}" },
-      "padding-block": { "value": "{ams.space.inside.xs}" },
-      "padding-inline": { "value": "{ams.space.inside.md}" },
+      "padding-block": { "value": "{ams.space.xs}" },
+      "padding-inline": { "value": "{ams.space.md}" },
       "calender-picker-indicator": {
         "background-image": {
           "value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23004699'><path d='M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16A16 16 0 0 0 16 0zm.9 28v-2h-2v1.9A11.8 11.8 0 0 1 4.1 17H6v-2H4.1A11.8 11.8 0 0 1 15 4.1V6h2V4.1A11.8 11.8 0 0 1 27.9 15H26v2h1.9a11.9 11.9 0 0 1-11 11zm.1-13h4v2h-6V9h2v6z'/></svg>\")"
diff --git a/storybook/src/docs/space.docs.mdx b/storybook/src/docs/space.docs.mdx
index c4588f9875..2f32018683 100644
--- a/storybook/src/docs/space.docs.mdx
+++ b/storybook/src/docs/space.docs.mdx
@@ -6,7 +6,40 @@ import { Meta } from "@storybook/blocks";
 
 # Space
 
-We distinguish 4 types of white space: Grid, Stack, Inside, and Type.
+We distinguish 3 types of white space: Component, Grid, and Type.
+
+## Component Space
+
+This is the space between components, e.g. between a list of cards, a row of buttons, or an icon and an accompanying text.
+
+Or at the four edges of a component: at the top, bottom, start, and end of its containing box,
+as used for buttons and input fields, and for larger components with a coloured background or border.
+
+This type of space is based on the font size – the medium space length equals the font size.
+Because our typography is fluid, this type of spacing is as well.
+Five options are available.
+
+### Spacious
+
+|                        |       |    320 |   1600 |
+| ---------------------: | :---: | -----: | -----: |
+| **Double extra small** | `2xs` |    4.5 |      6 |
+|        **Extra small** | `xs`  |      9 |     12 |
+|             **Medium** | `md`  | **18** | **24** |
+|              **Large** | `lg`  |     27 |     36 |
+|        **Extra large** | `xl`  |     36 |     48 |
+
+### Compact
+
+|                        |       |    320 |   1600 |
+| ---------------------: | :---: | -----: | -----: |
+| **Double extra small** | `2xs` |    3.5 |    4.5 |
+|        **Extra small** | `xs`  |      7 |      9 |
+|              **Small** | `sm`  |   10.5 |   13.5 |
+|             **Medium** | `md`  | **14** | **18** |
+|              **Large** | `lg`  |     21 |     27 |
+|        **Extra large** | `xl`  |     28 |     36 |
+| **Double extra large** | `2xl` |     35 |     45 |
 
 ## Grid Space
 
@@ -138,53 +171,6 @@ In Compact Mode, the medium grid space grows from 16 to 40 pixels between window
   </tbody>
 </table>
 
-## Stack Space
-
-This is the space between components, e.g. between a list of cards, a row of buttons, or an icon and an accompanying text.
-
-This type of space is based on the font size – the medium space length equals the font size.
-Because our typography is fluid, this type of spacing is as well.
-Seven options are available.
-
-### Spacious
-
-|                        |       |    320 |   1600 |
-| ---------------------: | :---: | -----: | -----: |
-| **Double extra small** | `2xs` |    4.5 |      6 |
-|        **Extra small** | `xs`  |      9 |     12 |
-|              **Small** | `sm`  |   13.5 |     18 |
-|             **Medium** | `md`  | **18** | **24** |
-|              **Large** | `lg`  |     27 |     36 |
-|        **Extra large** | `xl`  |     36 |     48 |
-| **Double extra large** | `2xl` |     45 |     72 |
-
-### Compact
-
-|                        |       |    320 |   1600 |
-| ---------------------: | :---: | -----: | -----: |
-| **Double extra small** | `2xs` |    3.5 |    4.5 |
-|        **Extra small** | `xs`  |      7 |      9 |
-|              **Small** | `sm`  |   10.5 |   13.5 |
-|             **Medium** | `md`  | **14** | **18** |
-|              **Large** | `lg`  |     21 |     27 |
-|        **Extra large** | `xl`  |     28 |     36 |
-| **Double extra large** | `2xl` |     35 |     45 |
-
-## Inside Space
-
-This is the space at the four edges of a component: at the top, bottom, start, and end of its containing box.
-It is used for buttons and input fields, and for larger components with a coloured background or border.
-
-The medium size is 16 pixels wide in both Spacious and Compact Mode.
-
-|                 | Width |
-| --------------: | ----: |
-| **Extra small** |     8 |
-|       **Small** |    12 |
-|      **Medium** |    16 |
-|       **Large** |    24 |
-| **Extra large** |    32 |
-
 ## Type Space
 
 This is the vertical space between text components like headings, paragraphs, and lists.

From a245787b434cc800978e8e2f83d4d287dfb9b616 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Tue, 18 Jun 2024 10:24:03 +0200
Subject: [PATCH 04/23] Specify static units before dynamic ones

---
 .../tokens/src/brand/ams/space.tokens.json    | 20 +++++++++----------
 .../src/brand/ams/text.compact.tokens.json    | 14 ++++++-------
 .../tokens/src/brand/ams/text.tokens.json     | 14 ++++++-------
 storybook/src/docs/space.docs.mdx             |  1 +
 4 files changed, 25 insertions(+), 24 deletions(-)

diff --git a/proprietary/tokens/src/brand/ams/space.tokens.json b/proprietary/tokens/src/brand/ams/space.tokens.json
index a22a7af789..6c6b142942 100644
--- a/proprietary/tokens/src/brand/ams/space.tokens.json
+++ b/proprietary/tokens/src/brand/ams/space.tokens.json
@@ -1,20 +1,20 @@
 {
   "ams": {
     "space": {
-      "xs": { "value": "clamp(0.2813rem, 0.2578rem + 0.1172vi, 0.375rem)" },
-      "sm": { "value": "clamp(0.5625rem, 0.5156rem + 0.2344vi, 0.75rem)" },
-      "md": { "value": "clamp(1.125rem, 1.0313rem + 0.4688vi, 1.5rem)" },
-      "lg": { "value": "clamp(1.6875rem, 1.5469rem + 0.7031vi, 2.25rem)" },
-      "xl": { "value": "clamp(2.25rem, 2.0625rem + 0.9375vi, 3rem)" },
+      "xs": { "value": "clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem)" },
+      "sm": { "value": "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)" },
+      "md": { "value": "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)" },
+      "lg": { "value": "clamp(1.6875rem, 1.5469rem + 0.7031vw, 2.25rem)" },
+      "xl": { "value": "clamp(2.25rem, 2.0625rem + 0.9375vw, 3rem)" },
       "grid": {
-        "xs": { "value": "clamp(0.25rem, calc(0.78125vw + 0.09375rem), 0.875rem)" },
-        "sm": { "value": "clamp(0.5rem, calc(1.5625vw + 0.1875rem), 1.75rem)" },
+        "xs": { "value": "clamp(0.25rem, calc(0.09375rem + 0.78125vw), 0.875rem)" },
+        "sm": { "value": "clamp(0.5rem, calc(0.1875rem + 1.5625vw), 1.75rem)" },
         "md": {
-          "value": "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)",
+          "value": "clamp(1rem, calc(0.375rem + 3.125vw), 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)" }
+        "lg": { "value": "clamp(1.5rem, calc(0.5625rem + 4.6875vw), 5.25rem)" },
+        "xl": { "value": "clamp(2rem, calc(0.75rem + 6.25vw), 7rem)" }
       }
     }
   }
diff --git a/proprietary/tokens/src/brand/ams/text.compact.tokens.json b/proprietary/tokens/src/brand/ams/text.compact.tokens.json
index 894c645542..8c040a2d2b 100644
--- a/proprietary/tokens/src/brand/ams/text.compact.tokens.json
+++ b/proprietary/tokens/src/brand/ams/text.compact.tokens.json
@@ -3,25 +3,25 @@
     "text": {
       "level": {
         "0": {
-          "font-size": { "value": "clamp(1.891rem, calc(1.927vw + 1.506rem), 3.433rem)" }
+          "font-size": { "value": "clamp(1.891rem, calc(1.506rem + 1.927vw), 3.433rem)" }
         },
         "1": {
-          "font-size": { "value": "clamp(1.621rem, calc(1.408vw + 1.34rem), 2.747rem)" }
+          "font-size": { "value": "clamp(1.621rem, calc(1.34rem + 1.408vw), 2.747rem)" }
         },
         "2": {
-          "font-size": { "value": "clamp(1.389rem, calc(1.01vw + 1.187rem), 2.197rem)" }
+          "font-size": { "value": "clamp(1.389rem, calc(1.187rem + 1.01vw), 2.197rem)" }
         },
         "3": {
-          "font-size": { "value": "clamp(1.191rem, calc(0.709vw + 1.049rem), 1.758rem)" }
+          "font-size": { "value": "clamp(1.191rem, calc(1.049rem + 0.709vw), 1.758rem)" }
         },
         "4": {
-          "font-size": { "value": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)" }
+          "font-size": { "value": "clamp(1.021rem, calc(0.925rem + 0.481vw), 1.406rem)" }
         },
         "5": {
-          "font-size": { "value": "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)" }
+          "font-size": { "value": "clamp(0.875rem, calc(0.813rem + 0.313vw), 1.125rem)" }
         },
         "6": {
-          "font-size": { "value": "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)" }
+          "font-size": { "value": "clamp(0.75rem, calc(0.713rem + 0.188vw), 0.9rem)" }
         }
       }
     }
diff --git a/proprietary/tokens/src/brand/ams/text.tokens.json b/proprietary/tokens/src/brand/ams/text.tokens.json
index 7a1149331c..8fe55897d9 100644
--- a/proprietary/tokens/src/brand/ams/text.tokens.json
+++ b/proprietary/tokens/src/brand/ams/text.tokens.json
@@ -8,31 +8,31 @@
       },
       "level": {
         "0": {
-          "font-size": { "value": "clamp(2.432rem, calc(2.683vw + 1.895rem), 4.578rem)" },
+          "font-size": { "value": "clamp(2.432rem, calc(1.895rem + 2.683vw), 4.578rem)" },
           "line-height": { "value": "1.15" }
         },
         "1": {
-          "font-size": { "value": "clamp(2.084rem, calc(1.973vw + 1.69rem), 3.662rem)" },
+          "font-size": { "value": "clamp(2.084rem, calc(1.69rem + 1.973vw), 3.662rem)" },
           "line-height": { "value": "1.2" }
         },
         "2": {
-          "font-size": { "value": "clamp(1.786rem, calc(1.43vw + 1.5rem), 2.93rem)" },
+          "font-size": { "value": "clamp(1.786rem, calc(1.5rem + 1.43vw), 2.93rem)" },
           "line-height": { "value": "1.25" }
         },
         "3": {
-          "font-size": { "value": "clamp(1.531rem, calc(1.016vw + 1.328rem), 2.344rem)" },
+          "font-size": { "value": "clamp(1.531rem, calc(1.328rem + 1.016vw), 2.344rem)" },
           "line-height": { "value": "1.3" }
         },
         "4": {
-          "font-size": { "value": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)" },
+          "font-size": { "value": "clamp(1.313rem, calc(1.173rem + 0.703vw), 1.875rem)" },
           "line-height": { "value": "1.5" }
         },
         "5": {
-          "font-size": { "value": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)" },
+          "font-size": { "value": "clamp(1.125rem, calc(1.031rem + 0.469vw), 1.5rem)" },
           "line-height": { "value": "1.6" }
         },
         "6": {
-          "font-size": { "value": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)" },
+          "font-size": { "value": "clamp(0.964rem, calc(0.905rem + 0.295vw), 1.2rem)" },
           "line-height": { "value": "1.6" }
         }
       }
diff --git a/storybook/src/docs/space.docs.mdx b/storybook/src/docs/space.docs.mdx
index 2f32018683..72b66323d6 100644
--- a/storybook/src/docs/space.docs.mdx
+++ b/storybook/src/docs/space.docs.mdx
@@ -181,3 +181,4 @@ More information on this type of space will follow.
 
 We use pixels in our documentation on sizes to convey a more accurate mental image.
 In code, sizes are defined in relative units (like `rem`, `em`, `ex`, `vw`, `vh`, and `ch`) to make components more flexible and accessible.
+MDN offers a good overview on these [CSS values and units](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Values_and_Units).

From 97e837ef4ad809b4db1f411c03b4dd9474972973 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Wed, 19 Jun 2024 01:56:36 +0200
Subject: [PATCH 05/23] Make paddings, margins and gaps consistent everywhere

---
 packages/css/src/components/breadcrumb/breadcrumb.scss |  6 +++---
 packages/css/src/components/card/card.scss             |  4 ++--
 packages/css/src/components/checkbox/checkbox.scss     |  2 +-
 packages/css/src/components/pagination/pagination.scss |  2 +-
 packages/css/src/components/radio/radio.scss           |  2 +-
 .../tokens/src/components/ams/accordion.tokens.json    |  6 +++---
 .../tokens/src/components/ams/alert.tokens.json        |  4 ++--
 .../tokens/src/components/ams/avatar.tokens.json       |  4 ++--
 .../tokens/src/components/ams/breadcrumb.tokens.json   |  5 ++++-
 .../tokens/src/components/ams/button.tokens.json       |  6 +++---
 proprietary/tokens/src/components/ams/card.tokens.json |  4 ++++
 .../tokens/src/components/ams/checkbox.tokens.json     |  1 +
 .../tokens/src/components/ams/date-input.tokens.json   |  4 ++--
 .../src/components/ams/description-list.tokens.json    |  6 +++---
 .../tokens/src/components/ams/dialog.tokens.json       | 10 +++++-----
 .../tokens/src/components/ams/file-input.tokens.json   |  2 +-
 .../tokens/src/components/ams/link-list.tokens.json    |  4 ++--
 .../tokens/src/components/ams/mega-menu.tokens.json    |  2 +-
 .../tokens/src/components/ams/ordered-list.tokens.json |  2 +-
 .../tokens/src/components/ams/page-menu.tokens.json    |  2 +-
 .../tokens/src/components/ams/pagination.tokens.json   |  1 +
 .../tokens/src/components/ams/radio.tokens.json        |  1 +
 .../tokens/src/components/ams/search-field.tokens.json |  6 +++---
 .../tokens/src/components/ams/select.tokens.json       |  2 +-
 .../tokens/src/components/ams/skip-link.tokens.json    |  4 ++--
 .../src/components/ams/table-of-contents.tokens.json   |  4 ++--
 .../tokens/src/components/ams/table.tokens.json        |  2 +-
 proprietary/tokens/src/components/ams/tabs.tokens.json |  4 ++--
 .../tokens/src/components/ams/text-area.tokens.json    |  4 ++--
 .../tokens/src/components/ams/text-input.tokens.json   |  2 +-
 .../tokens/src/components/ams/time-input.tokens.json   |  2 +-
 .../src/components/ams/unordered-list.tokens.json      |  2 +-
 32 files changed, 61 insertions(+), 51 deletions(-)

diff --git a/packages/css/src/components/breadcrumb/breadcrumb.scss b/packages/css/src/components/breadcrumb/breadcrumb.scss
index 1a43f4ffd6..664573d90d 100644
--- a/packages/css/src/components/breadcrumb/breadcrumb.scss
+++ b/packages/css/src/components/breadcrumb/breadcrumb.scss
@@ -33,11 +33,11 @@
 .ams-breadcrumb__item:not(:last-child)::after {
   background-image: var(--ams-breadcrumb-separator-background-image);
   background-repeat: no-repeat;
-  block-size: 1ex;
+  block-size: var(--ams-breadcrumb-separator-block-size);
   content: "";
   display: inline-block;
-  inline-size: 1ex;
-  margin-inline: 0.5rem;
+  inline-size: var(--ams-breadcrumb-separator-inline-size);
+  margin-inline: var(--ams-breadcrumb-separator-margin-inline);
 }
 
 .ams-breadcrumb__link {
diff --git a/packages/css/src/components/card/card.scss b/packages/css/src/components/card/card.scss
index bb9e7e11d6..cb705a76a8 100644
--- a/packages/css/src/components/card/card.scss
+++ b/packages/css/src/components/card/card.scss
@@ -5,7 +5,7 @@
 
 .ams-card {
   display: grid;
-  gap: 0.5rem;
+  gap: var(--ams-card-gap);
   outline-offset: var(--ams-card-outline-offset);
   position: relative;
   touch-action: manipulation;
@@ -40,7 +40,7 @@
 .ams-card__heading-group {
   display: flex;
   flex-direction: column-reverse;
-  gap: 0.5rem;
+  gap: var(--ams-card-hgroup-gap);
 }
 
 .ams-card__link {
diff --git a/packages/css/src/components/checkbox/checkbox.scss b/packages/css/src/components/checkbox/checkbox.scss
index c05ba3e980..66faab7d79 100644
--- a/packages/css/src/components/checkbox/checkbox.scss
+++ b/packages/css/src/components/checkbox/checkbox.scss
@@ -40,7 +40,7 @@
   font-family: var(--ams-checkbox-font-family);
   font-size: var(--ams-checkbox-font-size);
   font-weight: var(--ams-checkbox-font-weight);
-  gap: 0.5rem;
+  gap: var(--ams-checkbox-gap);
   line-height: var(--ams-checkbox-line-height);
   outline-offset: var(--ams-checkbox-outline-offset);
 
diff --git a/packages/css/src/components/pagination/pagination.scss b/packages/css/src/components/pagination/pagination.scss
index be46cfa012..e3da274b77 100644
--- a/packages/css/src/components/pagination/pagination.scss
+++ b/packages/css/src/components/pagination/pagination.scss
@@ -37,7 +37,7 @@
 
   cursor: pointer;
   display: flex;
-  gap: 0.5rem;
+  gap: var(--ams-pagination-button-gap);
   outline-offset: var(--ams-pagination-button-outline-offset);
   padding-inline: var(--ams-pagination-button-padding-inline);
   text-decoration-line: var(--ams-pagination-button-text-decoration-line);
diff --git a/packages/css/src/components/radio/radio.scss b/packages/css/src/components/radio/radio.scss
index 54667dd758..69ff49b374 100644
--- a/packages/css/src/components/radio/radio.scss
+++ b/packages/css/src/components/radio/radio.scss
@@ -41,7 +41,7 @@
   font-family: var(--ams-radio-font-family);
   font-size: var(--ams-radio-font-size);
   font-weight: var(--ams-radio-font-weight);
-  gap: 0.5rem;
+  gap: var(--ams-radio-gap);
   line-height: var(--ams-radio-line-height);
   outline-offset: var(--ams-radio-outline-offset);
 
diff --git a/proprietary/tokens/src/components/ams/accordion.tokens.json b/proprietary/tokens/src/components/ams/accordion.tokens.json
index a3603f655b..97677d9a27 100644
--- a/proprietary/tokens/src/components/ams/accordion.tokens.json
+++ b/proprietary/tokens/src/components/ams/accordion.tokens.json
@@ -1,13 +1,13 @@
 {
   "ams": {
     "accordion": {
-      "gap": { "value": "{ams.space.xs}" },
+      "gap": { "value": "{ams.space.md}" },
       "button": {
         "color": { "value": "{ams.color.primary-blue}" },
         "font-family": { "value": "{ams.text.font-family}" },
         "font-size": { "value": "{ams.text.level.5.font-size}" },
         "font-weight": { "value": "{ams.text.font-weight.bold}" },
-        "gap": { "value": "{ams.space.md}" },
+        "gap": { "value": "{ams.space.sm}" },
         "line-height": { "value": "{ams.text.level.5.line-height}" },
         "padding-block": { "value": "{ams.space.sm}" },
         "padding-inline": { "value": "0" },
@@ -19,7 +19,7 @@
         }
       },
       "panel": {
-        "padding-block": { "value": "0 {ams.space.md}" },
+        "padding-block": { "value": "0" },
         "padding-inline": { "value": "0" }
       }
     }
diff --git a/proprietary/tokens/src/components/ams/alert.tokens.json b/proprietary/tokens/src/components/ams/alert.tokens.json
index caa68aa743..6ee8ac4458 100644
--- a/proprietary/tokens/src/components/ams/alert.tokens.json
+++ b/proprietary/tokens/src/components/ams/alert.tokens.json
@@ -3,8 +3,8 @@
     "alert": {
       "border-width": { "value": "{ams.border.width.xl}" },
       "border-style": { "value": "solid" },
-      "gap": { "value": "1rem" },
-      "padding-block": { "value": "{ams.space.md}" },
+      "gap": { "value": "{ams.space.sm}" },
+      "padding-block": { "value": "{ams.space.lg}" },
       "padding-inline": { "value": "{ams.space.lg}" },
       "error": {
         "border-color": { "value": "{ams.color.primary-red}" }
diff --git a/proprietary/tokens/src/components/ams/avatar.tokens.json b/proprietary/tokens/src/components/ams/avatar.tokens.json
index 5f0a76ece8..1d9688a5a7 100644
--- a/proprietary/tokens/src/components/ams/avatar.tokens.json
+++ b/proprietary/tokens/src/components/ams/avatar.tokens.json
@@ -6,8 +6,8 @@
       "font-size": { "value": "{ams.text.level.6.font-size}" },
       "font-weight": { "value": "{ams.text.font-weight.normal}" },
       "line-height": { "value": "{ams.text.level.6.line-height}" },
-      "padding-block": { "value": "0.25rem" },
-      "padding-inline": { "value": "0.25rem" },
+      "padding-block": { "value": "{ams.space.xs}" },
+      "padding-inline": { "value": "{ams.space.xs}" },
       "black": {
         "background-color": { "value": "{ams.color.primary-black}" },
         "color": { "value": "{ams.color.primary-white}" }
diff --git a/proprietary/tokens/src/components/ams/breadcrumb.tokens.json b/proprietary/tokens/src/components/ams/breadcrumb.tokens.json
index 145aef4413..bb6c679685 100644
--- a/proprietary/tokens/src/components/ams/breadcrumb.tokens.json
+++ b/proprietary/tokens/src/components/ams/breadcrumb.tokens.json
@@ -8,7 +8,10 @@
       "separator": {
         "background-image": {
           "value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23000000' fill-rule='evenodd' d='m9.757 32-2.9-2.91L19.937 16 6.857 2.91 9.757 0l16 16z'/></svg>\")"
-        }
+        },
+        "block-size": { "value": "1ex" },
+        "inline-size": { "value": "1ex" },
+        "margin-inline": { "value": "{ams.space.xs}" }
       },
       "link": {
         "color": { "value": "{ams.link-appearance.color}" },
diff --git a/proprietary/tokens/src/components/ams/button.tokens.json b/proprietary/tokens/src/components/ams/button.tokens.json
index e3f48dd306..fcd5bf6c14 100644
--- a/proprietary/tokens/src/components/ams/button.tokens.json
+++ b/proprietary/tokens/src/components/ams/button.tokens.json
@@ -5,10 +5,10 @@
       "font-family": { "value": "{ams.text.font-family}" },
       "font-size": { "value": "{ams.text.level.5.font-size}" },
       "line-height": { "value": "{ams.text.level.5.line-height}" },
-      "gap": { "value": "1rem" },
-      "padding-block": { "value": "{ams.space.xs}" },
-      "padding-inline": { "value": "{ams.space.md}" },
+      "gap": { "value": "{ams.space.sm}" },
       "outline-offset": { "value": "{ams.focus.outline-offset}" },
+      "padding-block": { "value": "{ams.space.sm}" },
+      "padding-inline": { "value": "{ams.space.lg}" },
       "disabled": {
         "cursor": { "value": "{ams.action.disabled.cursor}" }
       },
diff --git a/proprietary/tokens/src/components/ams/card.tokens.json b/proprietary/tokens/src/components/ams/card.tokens.json
index 1e5c2adc13..f47a3aec71 100644
--- a/proprietary/tokens/src/components/ams/card.tokens.json
+++ b/proprietary/tokens/src/components/ams/card.tokens.json
@@ -1,6 +1,10 @@
 {
   "ams": {
     "card": {
+      "gap": { "value": "{ams.space.sm}" },
+      "hgroup": {
+        "gap": { "value": "{ams.space.sm}" }
+      },
       "link": {
         "color": { "value": "{ams.link-appearance.color}" },
         "text-decoration-line": { "value": "{ams.link-appearance.subtle.text-decoration-line}" },
diff --git a/proprietary/tokens/src/components/ams/checkbox.tokens.json b/proprietary/tokens/src/components/ams/checkbox.tokens.json
index 260bc1fc1d..688378f65e 100644
--- a/proprietary/tokens/src/components/ams/checkbox.tokens.json
+++ b/proprietary/tokens/src/components/ams/checkbox.tokens.json
@@ -5,6 +5,7 @@
       "font-family": { "value": "{ams.text.font-family}" },
       "font-size": { "value": "{ams.text.level.5.font-size}" },
       "font-weight": { "value": "{ams.text.font-weight.normal}" },
+      "gap": { "value": "{ams.space.sm}" },
       "line-height": { "value": "{ams.text.level.5.line-height}" },
       "outline-offset": { "value": "{ams.focus.outline-offset}" },
       "checkmark": {
diff --git a/proprietary/tokens/src/components/ams/date-input.tokens.json b/proprietary/tokens/src/components/ams/date-input.tokens.json
index 45ad83bdbd..c461d819ed 100644
--- a/proprietary/tokens/src/components/ams/date-input.tokens.json
+++ b/proprietary/tokens/src/components/ams/date-input.tokens.json
@@ -9,8 +9,8 @@
       "font-weight": { "value": "{ams.text.font-weight.normal}" },
       "line-height": { "value": "{ams.text.level.5.line-height}" },
       "outline-offset": { "value": "{ams.focus.outline-offset}" },
-      "padding-block": { "value": "{ams.space.xs}" },
-      "padding-inline": { "value": "{ams.space.lg}" },
+      "padding-block": { "value": "{ams.space.sm}" },
+      "padding-inline": { "value": "{ams.space.md}" },
       "calender-picker-indicator": {
         "background-image": {
           "value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23004699'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>\")"
diff --git a/proprietary/tokens/src/components/ams/description-list.tokens.json b/proprietary/tokens/src/components/ams/description-list.tokens.json
index 89b00a6651..a50d5519c8 100644
--- a/proprietary/tokens/src/components/ams/description-list.tokens.json
+++ b/proprietary/tokens/src/components/ams/description-list.tokens.json
@@ -5,15 +5,15 @@
       "font-family": { "value": "{ams.text.font-family}" },
       "font-size": { "value": "{ams.text.level.5.font-size}" },
       "font-weight": { "value": "{ams.text.font-weight.normal}" },
-      "gap": { "value": "{ams.space.md}" },
+      "gap": { "value": "{ams.space.sm}" },
       "inverse-color": { "value": "{ams.color.primary-white}" },
       "line-height": { "value": "{ams.text.level.5.line-height}" },
       "row": {
-        "gap": { "value": "{ams.space.md}" }
+        "gap": { "value": "{ams.space.sm}" }
       },
       "details": {
         "font-weight": { "value": "{ams.text.font-weight.bold}" },
-        "padding-inline-start": { "value": "{ams.space.xl}" }
+        "padding-inline-start": { "value": "{ams.space.lg}" }
       }
     }
   }
diff --git a/proprietary/tokens/src/components/ams/dialog.tokens.json b/proprietary/tokens/src/components/ams/dialog.tokens.json
index 61d9ec9b0d..c291fded0b 100644
--- a/proprietary/tokens/src/components/ams/dialog.tokens.json
+++ b/proprietary/tokens/src/components/ams/dialog.tokens.json
@@ -5,16 +5,16 @@
       "border": { "value": "0" },
       "max-inline-size": { "value": "min(87.69vw, 45rem)" },
       "form": {
-        "gap": { "value": "1.5rem" },
-        "padding-block": { "value": "clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem)" },
-        "padding-inline": { "value": "clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem)" },
+        "gap": { "value": "{ams.space.md}" },
+        "padding-block": { "value": "{ams.space.grid.md}" },
+        "padding-inline": { "value": "{ams.space.grid.lg}" },
         "max-block-size": { "value": "75vh" }
       },
       "header": {
-        "gap": { "value": "1rem" }
+        "gap": { "value": "{ams.space.md}" }
       },
       "footer": {
-        "gap": { "value": "1rem" }
+        "gap": { "value": "{ams.space.md}" }
       }
     }
   }
diff --git a/proprietary/tokens/src/components/ams/file-input.tokens.json b/proprietary/tokens/src/components/ams/file-input.tokens.json
index 3a18d01e7f..c33573e612 100644
--- a/proprietary/tokens/src/components/ams/file-input.tokens.json
+++ b/proprietary/tokens/src/components/ams/file-input.tokens.json
@@ -22,7 +22,7 @@
         "color": { "value": "{ams.color.primary-blue}" },
         "cursor": { "value": "{ams.action.activate.cursor}" },
         "margin-inline-end": { "value": "{ams.space.md}" },
-        "padding-block": { "value": "{ams.space.xs}" },
+        "padding-block": { "value": "{ams.space.sm}" },
         "padding-inline": { "value": "{ams.space.md}" },
         "hover": {
           "box-shadow": { "value": "inset 0 0 0 {ams.border.width.lg} {ams.color.dark-blue}" },
diff --git a/proprietary/tokens/src/components/ams/link-list.tokens.json b/proprietary/tokens/src/components/ams/link-list.tokens.json
index 4ee797a87c..49a289ed6e 100644
--- a/proprietary/tokens/src/components/ams/link-list.tokens.json
+++ b/proprietary/tokens/src/components/ams/link-list.tokens.json
@@ -1,13 +1,13 @@
 {
   "ams": {
     "link-list": {
-      "gap": { "value": "0.5em" },
+      "gap": { "value": "{ams.space.sm}" },
       "link": {
         "color": { "value": "{ams.link-appearance.color}" },
         "font-family": { "value": "{ams.text.font-family}" },
         "font-size": { "value": "{ams.text.level.5.font-size}" },
         "font-weight": { "value": "{ams.text.font-weight.normal}" },
-        "gap": { "value": "0.5em" },
+        "gap": { "value": "{ams.space.sm}" },
         "line-height": { "value": "{ams.text.level.5.line-height}" },
         "outline-offset": { "value": "{ams.focus.outline-offset}" },
         "text-decoration-line": { "value": "{ams.link-appearance.subtle.text-decoration-line}" },
diff --git a/proprietary/tokens/src/components/ams/mega-menu.tokens.json b/proprietary/tokens/src/components/ams/mega-menu.tokens.json
index 846a666daa..da54e5b0d4 100644
--- a/proprietary/tokens/src/components/ams/mega-menu.tokens.json
+++ b/proprietary/tokens/src/components/ams/mega-menu.tokens.json
@@ -7,7 +7,7 @@
           "comment": "Must have the same value as `ams.grid.column-gap`."
         },
         "column-width": { "value": "20rem" },
-        "padding-block-start": { "value": "1rem" },
+        "padding-block-start": { "value": "{ams.space.md}" },
         "padding-block-end": {
           "value": "{ams.space.grid.md}",
           "comment": "Must have the same value as `ams.grid.row-gap.md`."
diff --git a/proprietary/tokens/src/components/ams/ordered-list.tokens.json b/proprietary/tokens/src/components/ams/ordered-list.tokens.json
index 0df97055e0..b57faf22a9 100644
--- a/proprietary/tokens/src/components/ams/ordered-list.tokens.json
+++ b/proprietary/tokens/src/components/ams/ordered-list.tokens.json
@@ -5,7 +5,7 @@
       "font-family": { "value": "{ams.text.font-family}" },
       "font-size": { "value": "{ams.text.level.5.font-size}" },
       "font-weight": { "value": "{ams.text.font-weight.normal}" },
-      "gap": { "value": "0.75rem" },
+      "gap": { "value": "{ams.space.sm}" },
       "inverse-color": { "value": "{ams.color.primary-white}" },
       "line-height": { "value": "{ams.text.level.5.line-height}" },
       "list-style-type": { "value": "decimal" },
diff --git a/proprietary/tokens/src/components/ams/page-menu.tokens.json b/proprietary/tokens/src/components/ams/page-menu.tokens.json
index efbb7b9f29..0fa9a7ccbf 100644
--- a/proprietary/tokens/src/components/ams/page-menu.tokens.json
+++ b/proprietary/tokens/src/components/ams/page-menu.tokens.json
@@ -8,7 +8,7 @@
         "font-family": { "value": "{ams.text.font-family}" },
         "font-size": { "value": "{ams.text.level.6.font-size}" },
         "font-weight": { "value": "{ams.text.font-weight.normal}" },
-        "gap": { "value": "0.5rem" },
+        "gap": { "value": "{ams.space.sm}" },
         "line-height": { "value": "{ams.text.level.6.line-height}" },
         "outline-offset": { "value": "{ams.focus.outline-offset}" },
         "text-decoration-line": { "value": "{ams.link-appearance.subtle.text-decoration-line}" },
diff --git a/proprietary/tokens/src/components/ams/pagination.tokens.json b/proprietary/tokens/src/components/ams/pagination.tokens.json
index cfdcd54e05..41582d48d9 100644
--- a/proprietary/tokens/src/components/ams/pagination.tokens.json
+++ b/proprietary/tokens/src/components/ams/pagination.tokens.json
@@ -7,6 +7,7 @@
       "font-weight": { "value": "{ams.text.font-weight.normal}" },
       "line-height": { "value": "{ams.text.level.5.line-height}" },
       "button": {
+        "gap": { "value": "{ams.space.xs}" },
         "outline-offset": { "value": "{ams.focus.outline-offset}" },
         "padding-inline": { "value": "{ams.space.sm}" },
         "text-decoration-line": { "value": "{ams.link-appearance.subtle.text-decoration-line}" },
diff --git a/proprietary/tokens/src/components/ams/radio.tokens.json b/proprietary/tokens/src/components/ams/radio.tokens.json
index d65f0ed386..f704b39a77 100644
--- a/proprietary/tokens/src/components/ams/radio.tokens.json
+++ b/proprietary/tokens/src/components/ams/radio.tokens.json
@@ -5,6 +5,7 @@
       "font-family": { "value": "{ams.text.font-family}" },
       "font-size": { "value": "{ams.text.level.5.font-size}" },
       "font-weight": { "value": "{ams.text.font-weight.normal}" },
+      "gap": { "value": "{ams.space.sm}" },
       "line-height": { "value": "{ams.text.level.5.line-height}" },
       "outline-offset": { "value": "{ams.focus.outline-offset}" },
       "circle": {
diff --git a/proprietary/tokens/src/components/ams/search-field.tokens.json b/proprietary/tokens/src/components/ams/search-field.tokens.json
index 1051715da8..50f85b6977 100644
--- a/proprietary/tokens/src/components/ams/search-field.tokens.json
+++ b/proprietary/tokens/src/components/ams/search-field.tokens.json
@@ -5,8 +5,8 @@
         "background-color": { "value": "{ams.color.primary-blue}" },
         "color": { "value": "{ams.color.primary-white}" },
         "outline-offset": { "value": "{ams.focus.outline-offset}" },
-        "padding-block": { "value": "{ams.space.xs}" },
-        "padding-inline": { "value": "{ams.space.xs}" },
+        "padding-block": { "value": "{ams.space.sm}" },
+        "padding-inline": { "value": "{ams.space.sm}" },
         "hover": {
           "background-color": { "value": "{ams.color.dark-blue}" }
         }
@@ -22,7 +22,7 @@
         "font-weight": { "value": "{ams.text.font-weight.normal}" },
         "line-height": { "value": "{ams.text.level.5.line-height}" },
         "outline-offset": { "value": "{ams.focus.outline-offset}" },
-        "padding-block": { "value": "{ams.space.xs}" },
+        "padding-block": { "value": "{ams.space.sm}" },
         "padding-inline": { "value": "{ams.space.md}" },
         "cancel-button": {
           "background-image": {
diff --git a/proprietary/tokens/src/components/ams/select.tokens.json b/proprietary/tokens/src/components/ams/select.tokens.json
index 707cca4c66..e25fd3d1e8 100644
--- a/proprietary/tokens/src/components/ams/select.tokens.json
+++ b/proprietary/tokens/src/components/ams/select.tokens.json
@@ -13,7 +13,7 @@
       "font-weight": { "value": "{ams.text.font-weight.normal}" },
       "line-height": { "value": "{ams.text.level.5.line-height}" },
       "outline-offset": { "value": "{ams.focus.outline-offset}" },
-      "padding-block": { "value": "{ams.space.xs}" },
+      "padding-block": { "value": "{ams.space.sm}" },
       "padding-inline": { "value": "{ams.space.md} calc(2 * {ams.space.md} + 1em)" },
       "disabled": {
         "background-image": {
diff --git a/proprietary/tokens/src/components/ams/skip-link.tokens.json b/proprietary/tokens/src/components/ams/skip-link.tokens.json
index d93891d1c6..5c0a179fe0 100644
--- a/proprietary/tokens/src/components/ams/skip-link.tokens.json
+++ b/proprietary/tokens/src/components/ams/skip-link.tokens.json
@@ -8,8 +8,8 @@
       "font-weight": { "value": "{ams.text.font-weight.normal}" },
       "line-height": { "value": "{ams.text.level.6.line-height}" },
       "outline-offset": { "value": "{ams.focus.outline-offset}" },
-      "padding-block": { "value": "{ams.space.xs}" },
-      "padding-inline": { "value": "{ams.space.md}" },
+      "padding-block": { "value": "{ams.space.md}" },
+      "padding-inline": { "value": "{ams.space.lg}" },
       "hover": {
         "background-color": { "value": "{ams.color.dark-blue}" }
       }
diff --git a/proprietary/tokens/src/components/ams/table-of-contents.tokens.json b/proprietary/tokens/src/components/ams/table-of-contents.tokens.json
index a285dfd6d9..3940de65be 100644
--- a/proprietary/tokens/src/components/ams/table-of-contents.tokens.json
+++ b/proprietary/tokens/src/components/ams/table-of-contents.tokens.json
@@ -18,9 +18,9 @@
         }
       },
       "list": {
-        "gap": { "value": "{ams.space.md}" },
+        "gap": { "value": "{ams.space.sm}" },
         "list": {
-          "padding-block-start": { "value": "{ams.space.md}" },
+          "padding-block-start": { "value": "{ams.space.sm}" },
           "padding-inline-start": { "value": "{ams.space.lg}" }
         }
       },
diff --git a/proprietary/tokens/src/components/ams/table.tokens.json b/proprietary/tokens/src/components/ams/table.tokens.json
index d5e1cee2c2..c40b925c69 100644
--- a/proprietary/tokens/src/components/ams/table.tokens.json
+++ b/proprietary/tokens/src/components/ams/table.tokens.json
@@ -11,7 +11,7 @@
       },
       "cell": {
         "border-block-end": { "value": "{ams.border.width.sm} solid {ams.color.neutral-grey1}" },
-        "padding-block": { "value": "{ams.space.md}" },
+        "padding-block": { "value": "{ams.space.sm}" },
         "padding-inline": { "value": "{ams.space.md}" }
       },
       "header-cell": {
diff --git a/proprietary/tokens/src/components/ams/tabs.tokens.json b/proprietary/tokens/src/components/ams/tabs.tokens.json
index 83adfb5694..d4e98c9d3f 100644
--- a/proprietary/tokens/src/components/ams/tabs.tokens.json
+++ b/proprietary/tokens/src/components/ams/tabs.tokens.json
@@ -13,8 +13,8 @@
         "font-weight": { "value": "{ams.text.font-weight.normal}" },
         "line-height": { "value": "{ams.text.level.5.line-height}" },
         "outline-offset": { "value": "-0.25rem" },
-        "padding-block": { "value": ".5rem" },
-        "padding-inline": { "value": "1rem" },
+        "padding-block": { "value": "{ams.space.sm}" },
+        "padding-inline": { "value": "{ams.space.lg}" },
         "hover": {
           "color": { "value": "{ams.color.dark-blue}" },
           "box-shadow": { "value": "inset 0 -0.125rem 0 0 {ams.color.dark-blue}" }
diff --git a/proprietary/tokens/src/components/ams/text-area.tokens.json b/proprietary/tokens/src/components/ams/text-area.tokens.json
index fc9b9e488b..e0b0cb4f7f 100644
--- a/proprietary/tokens/src/components/ams/text-area.tokens.json
+++ b/proprietary/tokens/src/components/ams/text-area.tokens.json
@@ -12,8 +12,8 @@
         "value": "calc({ams.text.level.5.line-height} * 1em + 2 * {ams.text-area.padding-block})"
       },
       "outline-offset": { "value": "{ams.focus.outline-offset}" },
-      "padding-block": { "value": "0.5rem" },
-      "padding-inline": { "value": "1rem" },
+      "padding-block": { "value": "{ams.space.sm}" },
+      "padding-inline": { "value": "{ams.space.md}" },
       "disabled": {
         "background-color": { "value": "{ams.color.primary-white}" },
         "box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.neutral-grey2}" },
diff --git a/proprietary/tokens/src/components/ams/text-input.tokens.json b/proprietary/tokens/src/components/ams/text-input.tokens.json
index 7b77548c66..0e1a5d2401 100644
--- a/proprietary/tokens/src/components/ams/text-input.tokens.json
+++ b/proprietary/tokens/src/components/ams/text-input.tokens.json
@@ -9,7 +9,7 @@
       "font-weight": { "value": "{ams.text.font-weight.normal}" },
       "line-height": { "value": "{ams.text.level.5.line-height}" },
       "outline-offset": { "value": "{ams.focus.outline-offset}" },
-      "padding-block": { "value": "{ams.space.xs}" },
+      "padding-block": { "value": "{ams.space.sm}" },
       "padding-inline": { "value": "{ams.space.md}" },
       "disabled": {
         "background-color": { "value": "{ams.color.primary-white}" },
diff --git a/proprietary/tokens/src/components/ams/time-input.tokens.json b/proprietary/tokens/src/components/ams/time-input.tokens.json
index 4ab1129db0..8ea09f43f5 100644
--- a/proprietary/tokens/src/components/ams/time-input.tokens.json
+++ b/proprietary/tokens/src/components/ams/time-input.tokens.json
@@ -9,7 +9,7 @@
       "font-weight": { "value": "{ams.text.font-weight.normal}" },
       "line-height": { "value": "{ams.text.level.5.line-height}" },
       "outline-offset": { "value": "{ams.focus.outline-offset}" },
-      "padding-block": { "value": "{ams.space.xs}" },
+      "padding-block": { "value": "{ams.space.sm}" },
       "padding-inline": { "value": "{ams.space.md}" },
       "calender-picker-indicator": {
         "background-image": {
diff --git a/proprietary/tokens/src/components/ams/unordered-list.tokens.json b/proprietary/tokens/src/components/ams/unordered-list.tokens.json
index 2a93e6813a..03edcfac90 100644
--- a/proprietary/tokens/src/components/ams/unordered-list.tokens.json
+++ b/proprietary/tokens/src/components/ams/unordered-list.tokens.json
@@ -5,7 +5,7 @@
       "font-family": { "value": "{ams.text.font-family}" },
       "font-size": { "value": "{ams.text.level.5.font-size}" },
       "font-weight": { "value": "{ams.text.font-weight.normal}" },
-      "gap": { "value": "0.75rem" },
+      "gap": { "value": "{ams.space.sm}" },
       "inverse-color": { "value": "{ams.color.primary-white}" },
       "line-height": { "value": "{ams.text.level.5.line-height}" },
       "list-style-type": { "value": "'\\2022'" },

From 7d55e33e3b94ef10f902111682c661bd942fe952 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Wed, 19 Jun 2024 01:57:13 +0200
Subject: [PATCH 06/23] Add space between Alert Heading and Body

---
 packages/css/src/components/alert/alert.scss            | 3 +++
 proprietary/tokens/src/components/ams/alert.tokens.json | 3 +++
 2 files changed, 6 insertions(+)

diff --git a/packages/css/src/components/alert/alert.scss b/packages/css/src/components/alert/alert.scss
index ad2e6f2f1d..47d4d0a207 100644
--- a/packages/css/src/components/alert/alert.scss
+++ b/packages/css/src/components/alert/alert.scss
@@ -16,7 +16,10 @@
 }
 
 .ams-alert__content {
+  display: flex;
   flex: auto;
+  flex-direction: column;
+  gap: var(--ams-alert-content-gap);
 }
 
 .ams-alert--error {
diff --git a/proprietary/tokens/src/components/ams/alert.tokens.json b/proprietary/tokens/src/components/ams/alert.tokens.json
index 6ee8ac4458..934d01bad2 100644
--- a/proprietary/tokens/src/components/ams/alert.tokens.json
+++ b/proprietary/tokens/src/components/ams/alert.tokens.json
@@ -23,6 +23,9 @@
         "hover": {
           "fill": { "value": "{ams.color.primary-blue}" }
         }
+      },
+      "content": {
+        "gap": { "value": "{ams.space.sm}" }
       }
     }
   }

From ddb9ecf750ec0b1241bab5c9e6803800a5e2d851 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Wed, 19 Jun 2024 01:57:30 +0200
Subject: [PATCH 07/23] Remove font fallback

---
 packages/css/src/components/breadcrumb/breadcrumb.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/css/src/components/breadcrumb/breadcrumb.scss b/packages/css/src/components/breadcrumb/breadcrumb.scss
index 664573d90d..562d86fa78 100644
--- a/packages/css/src/components/breadcrumb/breadcrumb.scss
+++ b/packages/css/src/components/breadcrumb/breadcrumb.scss
@@ -12,7 +12,7 @@
 }
 
 .ams-breadcrumb {
-  font-family: var(--ams-breadcrumb-font-family, inherit);
+  font-family: var(--ams-breadcrumb-font-family);
   font-size: var(--ams-breadcrumb-font-size);
   font-weight: var(--ams-breadcrumb-font-weight);
   line-height: var(--ams-breadcrumb-line-height);

From 0c10e72497a7da8ea99d4df189dbefa8bb6615c3 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Wed, 19 Jun 2024 01:58:15 +0200
Subject: [PATCH 08/23] Add token for gap between Tab List and Panel

---
 packages/css/src/components/tabs/tabs.scss             | 5 +++++
 proprietary/tokens/src/components/ams/tabs.tokens.json | 1 +
 storybook/src/components/Tabs/Tabs.stories.tsx         | 6 ++----
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/css/src/components/tabs/tabs.scss b/packages/css/src/components/tabs/tabs.scss
index 29913fe2b4..5013182b03 100644
--- a/packages/css/src/components/tabs/tabs.scss
+++ b/packages/css/src/components/tabs/tabs.scss
@@ -10,6 +10,11 @@
   border: 0;
 }
 
+.ams-tabs {
+  display: grid;
+  gap: var(--ams-tabs-gap);
+}
+
 .ams-tabs__list {
   background-color: var(--ams-tabs-list-background-color);
   border-block-end: var(--ams-tabs-list-border-block-end);
diff --git a/proprietary/tokens/src/components/ams/tabs.tokens.json b/proprietary/tokens/src/components/ams/tabs.tokens.json
index d4e98c9d3f..2ac7cb206c 100644
--- a/proprietary/tokens/src/components/ams/tabs.tokens.json
+++ b/proprietary/tokens/src/components/ams/tabs.tokens.json
@@ -1,6 +1,7 @@
 {
   "ams": {
     "tabs": {
+      "gap": { "value": "{ams.space.md}" },
       "list": {
         "background-color": { "value": "{ams.color.primary-white}" },
         "border-block-end": { "value": "{ams.border.width.md} solid {ams.color.primary-blue}" }
diff --git a/storybook/src/components/Tabs/Tabs.stories.tsx b/storybook/src/components/Tabs/Tabs.stories.tsx
index 445be865c3..2de40dfc88 100644
--- a/storybook/src/components/Tabs/Tabs.stories.tsx
+++ b/storybook/src/components/Tabs/Tabs.stories.tsx
@@ -52,10 +52,8 @@ const defaultTabs = [
   ...(() =>
     tabsContent.map((content, index) => (
       <Tabs.Panel tab={index} key={content.label}>
-        <div style={{ paddingTop: '2rem' }}>
-          <Heading level={3}>{content.label}</Heading>
-          <Paragraph>{content.body}</Paragraph>
-        </div>
+        <Heading level={3}>{content.label}</Heading>
+        <Paragraph>{content.body}</Paragraph>
       </Tabs.Panel>
     )))(),
 ]

From c3b9f02beb064eccc120fb782332c58534274f74 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Wed, 19 Jun 2024 01:58:34 +0200
Subject: [PATCH 09/23] Fix JSON indentation

---
 .../tokens/src/components/ams/field-set.tokens.json  |  8 ++------
 .../tokens/src/components/ams/field.tokens.json      | 12 +++---------
 2 files changed, 5 insertions(+), 15 deletions(-)

diff --git a/proprietary/tokens/src/components/ams/field-set.tokens.json b/proprietary/tokens/src/components/ams/field-set.tokens.json
index f17007d35b..68b16401dc 100644
--- a/proprietary/tokens/src/components/ams/field-set.tokens.json
+++ b/proprietary/tokens/src/components/ams/field-set.tokens.json
@@ -2,12 +2,8 @@
   "ams": {
     "field-set": {
       "invalid": {
-        "border-inline-start": {
-          "value": "{ams.border.width.lg} solid {ams.color.primary-red}"
-        },
-        "padding-inline-start": {
-          "value": "{ams.space.md}"
-        }
+        "border-inline-start": { "value": "{ams.border.width.lg} solid {ams.color.primary-red}" },
+        "padding-inline-start": { "value": "{ams.space.md}" }
       },
       "legend": {
         "color": { "value": "{ams.color.primary-black}" },
diff --git a/proprietary/tokens/src/components/ams/field.tokens.json b/proprietary/tokens/src/components/ams/field.tokens.json
index f89e02b317..85fed8fc14 100644
--- a/proprietary/tokens/src/components/ams/field.tokens.json
+++ b/proprietary/tokens/src/components/ams/field.tokens.json
@@ -1,16 +1,10 @@
 {
   "ams": {
     "field": {
-      "gap": {
-        "value": "{ams.space.sm}"
-      },
+      "gap": { "value": "{ams.space.sm}" },
       "invalid": {
-        "border-inline-start": {
-          "value": "{ams.border.width.lg} solid {ams.color.primary-red}"
-        },
-        "padding-inline-start": {
-          "value": "{ams.space.md}"
-        }
+        "border-inline-start": { "value": "{ams.border.width.lg} solid {ams.color.primary-red}" },
+        "padding-inline-start": { "value": "{ams.space.md}" }
       }
     }
   }

From d531d885f488234e0ce6a56df80c464a8f273cfd Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Wed, 19 Jun 2024 01:58:58 +0200
Subject: [PATCH 10/23] Use Grid Space for vertical padding of Header

---
 proprietary/tokens/src/components/ams/header.tokens.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/proprietary/tokens/src/components/ams/header.tokens.json b/proprietary/tokens/src/components/ams/header.tokens.json
index fe4f70d283..7ae0ad681f 100644
--- a/proprietary/tokens/src/components/ams/header.tokens.json
+++ b/proprietary/tokens/src/components/ams/header.tokens.json
@@ -5,7 +5,7 @@
         "value": "{ams.space.grid.md}",
         "comment": "Must have the same value as `ams.grid.column-gap`."
       },
-      "padding-block": { "value": "{ams.space.md}" },
+      "padding-block": { "value": "{ams.space.grid.sm}" },
       "logo-link": {
         "outline-offset": { "value": "{ams.focus.outline-offset}" }
       }

From 431612543b84aca0ea826d42a064287925172302 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Wed, 19 Jun 2024 01:59:27 +0200
Subject: [PATCH 11/23] Randomize texts for Accordion Headings

---
 .../Accordion/Accordion.stories.tsx           | 23 +++++++++++--------
 .../src/components/shared/exampleContent.ts   | 12 ++++++++++
 2 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/storybook/src/components/Accordion/Accordion.stories.tsx b/storybook/src/components/Accordion/Accordion.stories.tsx
index bcac2737da..654460aaa1 100644
--- a/storybook/src/components/Accordion/Accordion.stories.tsx
+++ b/storybook/src/components/Accordion/Accordion.stories.tsx
@@ -5,8 +5,11 @@
 
 import { Accordion, Paragraph } from '@amsterdam/design-system-react/src'
 import { Meta, StoryObj } from '@storybook/react'
-import { exampleParagraph } from '../shared/exampleContent'
+import { exampleAccordionHeading, exampleParagraph } from '../shared/exampleContent'
 
+const heading1 = exampleAccordionHeading()
+const heading2 = exampleAccordionHeading()
+const heading3 = exampleAccordionHeading()
 const paragraph1 = exampleParagraph()
 const paragraph2 = exampleParagraph()
 const paragraph3 = exampleParagraph()
@@ -26,13 +29,13 @@ type Story = StoryObj<typeof meta>
 export const Default: Story = {
   args: {
     children: [
-      <Accordion.Section key={1} label="Eerste sectie">
+      <Accordion.Section key={1} label={heading1}>
         <Paragraph>{paragraph1}</Paragraph>
       </Accordion.Section>,
-      <Accordion.Section key={2} label="Tweede sectie">
+      <Accordion.Section key={2} label={heading2}>
         <Paragraph>{paragraph2}</Paragraph>
       </Accordion.Section>,
-      <Accordion.Section key={3} label="Derde sectie">
+      <Accordion.Section key={3} label={heading3}>
         <Paragraph>{paragraph3}</Paragraph>
       </Accordion.Section>,
     ],
@@ -42,13 +45,13 @@ export const Default: Story = {
 export const ExpandedByDefault: Story = {
   args: {
     children: [
-      <Accordion.Section key={1} label="Eerste sectie">
+      <Accordion.Section key={1} label={heading1}>
         <Paragraph>{paragraph1}</Paragraph>
       </Accordion.Section>,
-      <Accordion.Section key={2} label="Tweede sectie" expanded>
+      <Accordion.Section key={2} label={heading2} expanded>
         <Paragraph>{paragraph2}</Paragraph>
       </Accordion.Section>,
-      <Accordion.Section key={3} label="Derde sectie">
+      <Accordion.Section key={3} label={heading3}>
         <Paragraph>{paragraph3}</Paragraph>
       </Accordion.Section>,
     ],
@@ -59,13 +62,13 @@ export const TooManyLandmarks: Story = {
   args: {
     sectionAs: 'div',
     children: [
-      <Accordion.Section key={1} label="Eerste sectie">
+      <Accordion.Section key={1} label={heading1}>
         <Paragraph>{paragraph1}</Paragraph>
       </Accordion.Section>,
-      <Accordion.Section key={2} label="Tweede sectie">
+      <Accordion.Section key={2} label={heading2}>
         <Paragraph>{paragraph2}</Paragraph>
       </Accordion.Section>,
-      <Accordion.Section key={3} label="Derde sectie">
+      <Accordion.Section key={3} label={heading3}>
         <Paragraph>{paragraph3}</Paragraph>
       </Accordion.Section>,
     ],
diff --git a/storybook/src/components/shared/exampleContent.ts b/storybook/src/components/shared/exampleContent.ts
index 0420e1a774..244a405d70 100644
--- a/storybook/src/components/shared/exampleContent.ts
+++ b/storybook/src/components/shared/exampleContent.ts
@@ -7,6 +7,18 @@ const pickRandomItem = (list: Array<string>): string => list[Math.floor(Math.ran
 
 const pickRandomList = (list: Array<Array<string>>): Array<string> => list[Math.floor(Math.random() * list.length)]
 
+export const exampleAccordionHeading = () =>
+  pickRandomItem([
+    'Dit grof afval halen we niet op',
+    'Dit grof afval halen we op',
+    'Downloads en documenten',
+    'Lees de voorwaarden',
+    'Publicaties en nieuwsberichten',
+    'Verhuizing doorgeven bij stadsloket',
+    'Verhuizing doorgeven per post',
+    'Voorgaande versies van ramingen',
+  ])
+
 export const exampleHeading = () =>
   pickRandomItem([
     'Meer plekken voor kunst en cultuur, verspreid over de stad',

From d9d9452bc7bea67ba5a250657872c2ecd84cc74d Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Wed, 19 Jun 2024 01:59:42 +0200
Subject: [PATCH 12/23] Make explicit that wrapping button labels are fine

---
 storybook/src/components/Button/Button.docs.mdx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/storybook/src/components/Button/Button.docs.mdx b/storybook/src/components/Button/Button.docs.mdx
index 20c06ebb0b..0789fe8ec7 100644
--- a/storybook/src/components/Button/Button.docs.mdx
+++ b/storybook/src/components/Button/Button.docs.mdx
@@ -47,5 +47,6 @@ Keep in mind that the label may occasionally wrap over multiple lines:
 a shorter text might be unavailable,
 two buttons could sit next to each other on a narrow screen,
 or the user has configured a large font on their device.
+This is fine.
 
 <Canvas of={ButtonStories.TextWrapping} />

From 23ba9738eb4040ca6f60208481297202c0ed0ae0 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Wed, 19 Jun 2024 16:10:59 +0200
Subject: [PATCH 13/23] Replace some local lengths with tokens

---
 packages/css/src/components/dialog/dialog.scss                  | 2 +-
 packages/css/src/components/file-input/file-input.scss          | 2 +-
 packages/css/src/components/top-task-link/top-task-link.scss    | 2 +-
 proprietary/tokens/src/components/ams/top-task-link.tokens.json | 1 +
 4 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/css/src/components/dialog/dialog.scss b/packages/css/src/components/dialog/dialog.scss
index 6eba94626f..fef6b25620 100644
--- a/packages/css/src/components/dialog/dialog.scss
+++ b/packages/css/src/components/dialog/dialog.scss
@@ -31,7 +31,7 @@
 
 .ams-dialog__article {
   display: grid;
-  gap: 1.5rem; /* Until we have a consistent way of spacing text elements */
+  gap: var(--ams-space-md); /* Until we have a consistent way of spacing text elements */
   max-block-size: 100%; /* safari */
   overflow-y: auto;
   overscroll-behavior-y: contain;
diff --git a/packages/css/src/components/file-input/file-input.scss b/packages/css/src/components/file-input/file-input.scss
index 77bad81d63..cb90f64ad9 100644
--- a/packages/css/src/components/file-input/file-input.scss
+++ b/packages/css/src/components/file-input/file-input.scss
@@ -21,7 +21,7 @@
   font-weight: var(--ams-file-input-font-weight);
   line-height: var(--ams-file-input-line-height);
   max-inline-size: calc(100% - var(--ams-file-input-padding-inline) * 2);
-  outline-offset: 0.25rem; // Double the default focus outline offset to compensate for the dashed border
+  outline-offset: calc(var(--ams-focus-outline-offset) * 2); // Compensate for the dashed border
   padding-block: var(--ams-file-input-padding-block);
   padding-inline: var(--ams-file-input-padding-inline);
   touch-action: manipulation;
diff --git a/packages/css/src/components/top-task-link/top-task-link.scss b/packages/css/src/components/top-task-link/top-task-link.scss
index 4273309604..24a7ddc23d 100644
--- a/packages/css/src/components/top-task-link/top-task-link.scss
+++ b/packages/css/src/components/top-task-link/top-task-link.scss
@@ -10,7 +10,7 @@
   break-inside: avoid;
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: var(--ams-top-task-link-gap);
   outline-offset: var(--ams-top-task-link-outline-offset);
   text-decoration: none;
 }
diff --git a/proprietary/tokens/src/components/ams/top-task-link.tokens.json b/proprietary/tokens/src/components/ams/top-task-link.tokens.json
index 6794bdb940..9dd4bd5fcb 100644
--- a/proprietary/tokens/src/components/ams/top-task-link.tokens.json
+++ b/proprietary/tokens/src/components/ams/top-task-link.tokens.json
@@ -1,6 +1,7 @@
 {
   "ams": {
     "top-task-link": {
+      "gap": { "value": "{ams.space.sm}" },
       "description": {
         "color": { "value": "{ams.color.primary-black}" },
         "font-family": { "value": "{ams.text.font-family}" },

From 640eb548c5957454de9f643d8ea9b9108609534a Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Fri, 21 Jun 2024 14:41:12 +0200
Subject: [PATCH 14/23] Fix spacious token docs, remove compact for now

---
 storybook/src/docs/space.docs.mdx | 28 +++++++---------------------
 1 file changed, 7 insertions(+), 21 deletions(-)

diff --git a/storybook/src/docs/space.docs.mdx b/storybook/src/docs/space.docs.mdx
index 72b66323d6..8cc0cb3865 100644
--- a/storybook/src/docs/space.docs.mdx
+++ b/storybook/src/docs/space.docs.mdx
@@ -19,27 +19,13 @@ This type of space is based on the font size – the medium space length equals
 Because our typography is fluid, this type of spacing is as well.
 Five options are available.
 
-### Spacious
-
-|                        |       |    320 |   1600 |
-| ---------------------: | :---: | -----: | -----: |
-| **Double extra small** | `2xs` |    4.5 |      6 |
-|        **Extra small** | `xs`  |      9 |     12 |
-|             **Medium** | `md`  | **18** | **24** |
-|              **Large** | `lg`  |     27 |     36 |
-|        **Extra large** | `xl`  |     36 |     48 |
-
-### Compact
-
-|                        |       |    320 |   1600 |
-| ---------------------: | :---: | -----: | -----: |
-| **Double extra small** | `2xs` |    3.5 |    4.5 |
-|        **Extra small** | `xs`  |      7 |      9 |
-|              **Small** | `sm`  |   10.5 |   13.5 |
-|             **Medium** | `md`  | **14** | **18** |
-|              **Large** | `lg`  |     21 |     27 |
-|        **Extra large** | `xl`  |     28 |     36 |
-| **Double extra large** | `2xl` |     35 |     45 |
+|                 |      |    320 |   1600 |
+| --------------: | :--: | -----: | -----: |
+| **Extra small** | `xs` |    4.5 |      6 |
+|       **small** | `xs` |      9 |     12 |
+|      **Medium** | `md` | **18** | **24** |
+|       **Large** | `lg` |     27 |     36 |
+| **Extra large** | `xl` |     36 |     48 |
 
 ## Grid Space
 

From 92ddabe60f0b334d64dc97679c082e4353393345 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Sun, 23 Jun 2024 12:34:51 +0200
Subject: [PATCH 15/23] Improve token name for card heading group

---
 packages/css/src/components/card/card.scss             | 2 +-
 proprietary/tokens/src/components/ams/card.tokens.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/css/src/components/card/card.scss b/packages/css/src/components/card/card.scss
index cb705a76a8..881b457ab9 100644
--- a/packages/css/src/components/card/card.scss
+++ b/packages/css/src/components/card/card.scss
@@ -40,7 +40,7 @@
 .ams-card__heading-group {
   display: flex;
   flex-direction: column-reverse;
-  gap: var(--ams-card-hgroup-gap);
+  gap: var(--ams-card-heading-group-gap);
 }
 
 .ams-card__link {
diff --git a/proprietary/tokens/src/components/ams/card.tokens.json b/proprietary/tokens/src/components/ams/card.tokens.json
index f47a3aec71..32063dc21b 100644
--- a/proprietary/tokens/src/components/ams/card.tokens.json
+++ b/proprietary/tokens/src/components/ams/card.tokens.json
@@ -2,7 +2,7 @@
   "ams": {
     "card": {
       "gap": { "value": "{ams.space.sm}" },
-      "hgroup": {
+      "heading-group": {
         "gap": { "value": "{ams.space.sm}" }
       },
       "link": {

From e8faf03c34bc643784c38fb222bfb0b62c81821f Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Sun, 23 Jun 2024 12:36:29 +0200
Subject: [PATCH 16/23] Fix function name

---
 storybook/src/components/shared/exampleContent.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/storybook/src/components/shared/exampleContent.ts b/storybook/src/components/shared/exampleContent.ts
index 4a164a84b4..d393822c56 100644
--- a/storybook/src/components/shared/exampleContent.ts
+++ b/storybook/src/components/shared/exampleContent.ts
@@ -6,7 +6,7 @@
 const pickRandomContent = <T>(list: Array<T>): T => list[Math.floor(Math.random() * list.length)]
 
 export const exampleAccordionHeading = () =>
-  pickRandomItem([
+  pickRandomContent([
     'Dit grof afval halen we niet op',
     'Dit grof afval halen we op',
     'Downloads en documenten',

From 527cf6124f5964a607a82d47afa9870ec99e3c43 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Mon, 24 Jun 2024 19:31:06 +0200
Subject: [PATCH 17/23] Force Spacious Mode for website examples

---
 storybook/src/pages/amsterdam/article/Article.stories.tsx | 1 +
 storybook/src/pages/amsterdam/home/Home.stories.tsx       | 1 +
 2 files changed, 2 insertions(+)

diff --git a/storybook/src/pages/amsterdam/article/Article.stories.tsx b/storybook/src/pages/amsterdam/article/Article.stories.tsx
index 502e365d2d..9efc51dbe6 100644
--- a/storybook/src/pages/amsterdam/article/Article.stories.tsx
+++ b/storybook/src/pages/amsterdam/article/Article.stories.tsx
@@ -30,6 +30,7 @@ const meta = {
   },
   parameters: {
     layout: 'fullscreen',
+    themes: { themeOverride: 'Spacious' },
   },
 } satisfies Meta<typeof Article>
 
diff --git a/storybook/src/pages/amsterdam/home/Home.stories.tsx b/storybook/src/pages/amsterdam/home/Home.stories.tsx
index 547ac65d83..df643ad05c 100644
--- a/storybook/src/pages/amsterdam/home/Home.stories.tsx
+++ b/storybook/src/pages/amsterdam/home/Home.stories.tsx
@@ -22,6 +22,7 @@ const meta = {
   },
   parameters: {
     layout: 'fullscreen',
+    themes: { themeOverride: 'Spacious' },
   },
 } satisfies Meta<typeof Home>
 

From dd0c871e55595c97a093ec724fddbfa108b44fc1 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Thu, 27 Jun 2024 16:35:52 +0200
Subject: [PATCH 18/23] Apply suggestions from code review

Co-authored-by: Aram <37216945+alimpens@users.noreply.github.com>
---
 storybook/src/docs/space.docs.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/storybook/src/docs/space.docs.mdx b/storybook/src/docs/space.docs.mdx
index 8cc0cb3865..1c6a44eb72 100644
--- a/storybook/src/docs/space.docs.mdx
+++ b/storybook/src/docs/space.docs.mdx
@@ -15,7 +15,7 @@ This is the space between components, e.g. between a list of cards, a row of but
 Or at the four edges of a component: at the top, bottom, start, and end of its containing box,
 as used for buttons and input fields, and for larger components with a coloured background or border.
 
-This type of space is based on the font size – the medium space length equals the font size.
+This type of space is based on the font size – the medium space length equals the default Paragraph font size.
 Because our typography is fluid, this type of spacing is as well.
 Five options are available.
 

From 5400b93805602a35672de3ea041b585ec90b1394 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Fri, 28 Jun 2024 11:42:02 +0200
Subject: [PATCH 19/23] Set vertical padding in Alert to medium

---
 proprietary/tokens/src/components/ams/alert.tokens.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/proprietary/tokens/src/components/ams/alert.tokens.json b/proprietary/tokens/src/components/ams/alert.tokens.json
index 934d01bad2..fbf8f1b138 100644
--- a/proprietary/tokens/src/components/ams/alert.tokens.json
+++ b/proprietary/tokens/src/components/ams/alert.tokens.json
@@ -4,7 +4,7 @@
       "border-width": { "value": "{ams.border.width.xl}" },
       "border-style": { "value": "solid" },
       "gap": { "value": "{ams.space.sm}" },
-      "padding-block": { "value": "{ams.space.lg}" },
+      "padding-block": { "value": "{ams.space.md}" },
       "padding-inline": { "value": "{ams.space.lg}" },
       "error": {
         "border-color": { "value": "{ams.color.primary-red}" }

From 9912dbb662504f8b92a2859327bbe9e14858bbed Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Fri, 28 Jun 2024 11:42:56 +0200
Subject: [PATCH 20/23] Use component space for Header padding

---
 proprietary/tokens/src/components/ams/header.tokens.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/proprietary/tokens/src/components/ams/header.tokens.json b/proprietary/tokens/src/components/ams/header.tokens.json
index 7ae0ad681f..fe4f70d283 100644
--- a/proprietary/tokens/src/components/ams/header.tokens.json
+++ b/proprietary/tokens/src/components/ams/header.tokens.json
@@ -5,7 +5,7 @@
         "value": "{ams.space.grid.md}",
         "comment": "Must have the same value as `ams.grid.column-gap`."
       },
-      "padding-block": { "value": "{ams.space.grid.sm}" },
+      "padding-block": { "value": "{ams.space.md}" },
       "logo-link": {
         "outline-offset": { "value": "{ams.focus.outline-offset}" }
       }

From 0d18c3bef18243e8aff88cbd08a037478c08cfa9 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Fri, 28 Jun 2024 11:44:31 +0200
Subject: [PATCH 21/23] Use small and medium padding in button-like components

---
 proprietary/tokens/src/components/ams/button.tokens.json    | 2 +-
 proprietary/tokens/src/components/ams/skip-link.tokens.json | 4 ++--
 proprietary/tokens/src/components/ams/tabs.tokens.json      | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/proprietary/tokens/src/components/ams/button.tokens.json b/proprietary/tokens/src/components/ams/button.tokens.json
index fcd5bf6c14..539e76c228 100644
--- a/proprietary/tokens/src/components/ams/button.tokens.json
+++ b/proprietary/tokens/src/components/ams/button.tokens.json
@@ -8,7 +8,7 @@
       "gap": { "value": "{ams.space.sm}" },
       "outline-offset": { "value": "{ams.focus.outline-offset}" },
       "padding-block": { "value": "{ams.space.sm}" },
-      "padding-inline": { "value": "{ams.space.lg}" },
+      "padding-inline": { "value": "{ams.space.md}" },
       "disabled": {
         "cursor": { "value": "{ams.action.disabled.cursor}" }
       },
diff --git a/proprietary/tokens/src/components/ams/skip-link.tokens.json b/proprietary/tokens/src/components/ams/skip-link.tokens.json
index 5c0a179fe0..66cfb48aee 100644
--- a/proprietary/tokens/src/components/ams/skip-link.tokens.json
+++ b/proprietary/tokens/src/components/ams/skip-link.tokens.json
@@ -8,8 +8,8 @@
       "font-weight": { "value": "{ams.text.font-weight.normal}" },
       "line-height": { "value": "{ams.text.level.6.line-height}" },
       "outline-offset": { "value": "{ams.focus.outline-offset}" },
-      "padding-block": { "value": "{ams.space.md}" },
-      "padding-inline": { "value": "{ams.space.lg}" },
+      "padding-block": { "value": "{ams.space.sm}" },
+      "padding-inline": { "value": "{ams.space.md}" },
       "hover": {
         "background-color": { "value": "{ams.color.dark-blue}" }
       }
diff --git a/proprietary/tokens/src/components/ams/tabs.tokens.json b/proprietary/tokens/src/components/ams/tabs.tokens.json
index 2ac7cb206c..552439c2a5 100644
--- a/proprietary/tokens/src/components/ams/tabs.tokens.json
+++ b/proprietary/tokens/src/components/ams/tabs.tokens.json
@@ -15,7 +15,7 @@
         "line-height": { "value": "{ams.text.level.5.line-height}" },
         "outline-offset": { "value": "-0.25rem" },
         "padding-block": { "value": "{ams.space.sm}" },
-        "padding-inline": { "value": "{ams.space.lg}" },
+        "padding-inline": { "value": "{ams.space.md}" },
         "hover": {
           "color": { "value": "{ams.color.dark-blue}" },
           "box-shadow": { "value": "inset 0 -0.125rem 0 0 {ams.color.dark-blue}" }

From 7af86c2cde11014115b0a9f2b45fdcf52edf3836 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Fri, 28 Jun 2024 11:53:25 +0200
Subject: [PATCH 22/23] Adhere to editorial guide when writing numbers

---
 storybook/src/docs/grid.docs.mdx  | 25 ++++++++++++-------------
 storybook/src/docs/space.docs.mdx |  4 ++--
 2 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/storybook/src/docs/grid.docs.mdx b/storybook/src/docs/grid.docs.mdx
index f035e17b01..476c99825c 100644
--- a/storybook/src/docs/grid.docs.mdx
+++ b/storybook/src/docs/grid.docs.mdx
@@ -11,7 +11,7 @@ All elements on a page are placed on this grid.
 
 ## Design
 
-### Four, eight, or twelve columns
+### 4, 8, or 12 columns
 
 The grid divides the screen into columns of equal width.
 The wider the window, the more columns.
@@ -20,7 +20,7 @@ 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.
+We refer to these 3 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.
@@ -36,8 +36,8 @@ The desired layout differs significantly between the two.
 
 #### Spacious
 
-The online corporate identity had been designed for simplicity.
-There are few options for background colour or borders.
+The online corporate identity has been designed for simplicity.
+Not many options exist for background colour or borders.
 Typography and white space remain as tools to keep screens readable.
 For websites, the grid is quite spacious.
 
@@ -108,7 +108,7 @@ In practice, these design choices result in the following dimensions in pixels.
 
 ### Widths per breakpoint
 
-The columns, gaps, and margins have the following widths at the three breakpoints.
+The columns, gaps, and margins have the following widths at the 3 breakpoints.
 Again, between these widths, the widths grow continuously.
 
 #### Spacious
@@ -137,13 +137,12 @@ but instead, make them responsive to the variety of screens they will appear on.
 Of course, we have experimented and tested this.
 We’ve ultimately chosen values that work well visually.
 
-For the same reason, we do not refer to the three grid breakpoints as "mobile, tablet, and desktop" but as "for narrow, medium, and wide" screens or windows.
+For the same reason, we do not refer to the three grid breakpoints as “mobile, tablet, and desktop” but as “for narrow, medium, and wide” screens or windows.
 
 If you want a bit more guidance,
 assume that phones in portrait mode and split-screen windows on tablets use the 4-column grid,
 phones in landscape mode and tablets in portrait use the 8-column grid,
-and tablets in landscape mode,
-laptops, and larger screens use the 12-column grid.
+and tablets in landscape mode, laptops, and larger screens use the 12-column grid.
 The exact number of pixels is not important.
 
 ### Reference widths for designers
@@ -152,12 +151,12 @@ Nice, all that flexibility.
 However, when designing a screen, it is still necessary to choose a specific canvas.
 You want to determine how each design behaves on a desktop, a tablet, or a mobile phone.
 
-Therefore, in Figma, we work with three reference widths.
-On those widths, we develop the screen’s design for those three classes of devices.
+Therefore, in Figma, we work with 3 reference widths.
+On those widths, we develop the screen’s design for the 3 classes of devices.
 We know that, in reality, there is much more variation, but we have to draw the line somewhere.
 You can find these grids in the Figma Library under ‘Grid styles’.
 
-In these three situations, the dimensions are as follows.
+In these 3 situations, the dimensions are as follows.
 
 #### Spacious
 
@@ -184,8 +183,8 @@ It is good to be aware of this.
 On a computer screen, the browser window is not necessarily maximized; it can be narrower than the screen.
 Responsive design logically assumes the width of the browser window.
 
-On phones and tablets, the two often coincide.
-Tablets can allow placing two (windows of) apps side by side on the screen.
+On phones and tablets, both concepts often coincide,
+although tablets allow placing two (windows of) apps side by side on the screen.
 
 ## Relationship with text
 
diff --git a/storybook/src/docs/space.docs.mdx b/storybook/src/docs/space.docs.mdx
index 1c6a44eb72..4ea3e97aae 100644
--- a/storybook/src/docs/space.docs.mdx
+++ b/storybook/src/docs/space.docs.mdx
@@ -12,12 +12,12 @@ We distinguish 3 types of white space: Component, Grid, and Type.
 
 This is the space between components, e.g. between a list of cards, a row of buttons, or an icon and an accompanying text.
 
-Or at the four edges of a component: at the top, bottom, start, and end of its containing box,
+Or at the 4 edges of a component: at the top, bottom, start, and end of its containing box,
 as used for buttons and input fields, and for larger components with a coloured background or border.
 
 This type of space is based on the font size – the medium space length equals the default Paragraph font size.
 Because our typography is fluid, this type of spacing is as well.
-Five options are available.
+We offer 5 lenghts.
 
 |                 |      |    320 |   1600 |
 | --------------: | :--: | -----: | -----: |

From 88dd0d52ecad1b204f699c8bdfcd342362248157 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Fri, 28 Jun 2024 12:54:30 +0200
Subject: [PATCH 23/23] Apply suggestions from code review

Co-authored-by: Aram <37216945+alimpens@users.noreply.github.com>
---
 storybook/src/docs/grid.docs.mdx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/storybook/src/docs/grid.docs.mdx b/storybook/src/docs/grid.docs.mdx
index 476c99825c..62398ab152 100644
--- a/storybook/src/docs/grid.docs.mdx
+++ b/storybook/src/docs/grid.docs.mdx
@@ -137,7 +137,7 @@ but instead, make them responsive to the variety of screens they will appear on.
 Of course, we have experimented and tested this.
 We’ve ultimately chosen values that work well visually.
 
-For the same reason, we do not refer to the three grid breakpoints as “mobile, tablet, and desktop” but as “for narrow, medium, and wide” screens or windows.
+For the same reason, we do not refer to the 3 grid breakpoints as “mobile, tablet, and desktop” but as “for narrow, medium, and wide” screens or windows.
 
 If you want a bit more guidance,
 assume that phones in portrait mode and split-screen windows on tablets use the 4-column grid,
@@ -184,7 +184,7 @@ On a computer screen, the browser window is not necessarily maximized; it can be
 Responsive design logically assumes the width of the browser window.
 
 On phones and tablets, both concepts often coincide,
-although tablets allow placing two (windows of) apps side by side on the screen.
+although tablets allow placing 2 (windows of) apps side by side on the screen.
 
 ## Relationship with text