feat: Decrease space length in Compact Mode (#1307)

Amsterdam · Jun 28, 2024 · 27af2a6 · 27af2a6
1 parent 991efda
commit 27af2a6
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 9 deletions.
diff --git a/proprietary/tokens/src/brand/ams/space.compact.tokens.json b/proprietary/tokens/src/brand/ams/space.compact.tokens.json
@@ -1,6 +1,11 @@
 {
   "ams": {
     "space": {
+      "xs": { "value": "clamp(0.2188rem, 0.2109rem + 0.0391vw, 0.25rem)" },
+      "sm": { "value": "clamp(0.4375rem, 0.4219rem + 0.0781vw, 0.5rem)" },
+      "md": { "value": "clamp(0.875rem, 0.8438rem + 0.1563vw, 1rem)" },
+      "lg": { "value": "clamp(1.3125rem, 1.2656rem + 0.2344vw, 1.5rem)" },
+      "xl": { "value": "clamp(1.75rem, 1.6875rem + 0.3125vw, 2rem)" },
       "grid": {
         "xs": { "value": "clamp(0.25rem, calc(0.390625vw - 0.015625rem), 0.625rem)" },
         "sm": { "value": "clamp(0.5rem, calc(0.78125vw - 0.03125rem), 1.25rem)" },

diff --git a/storybook/src/docs/space.docs.mdx b/storybook/src/docs/space.docs.mdx
@@ -17,15 +17,31 @@ as used for buttons and input fields, and for larger components with a coloured
 
 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.
-We offer 5 lenghts.
-
-|                 |      |    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 |
+We offer 5 lengths.
+
+### Spacious
+
+In Spacious Mode, the medium space grows from 18 to 24 pixels between window widths of 320 and 1600.
+
+|                 |      |    320 |      832 |   1600 |
+| --------------: | :--: | -----: | -------: | -----: |
+| **Extra small** | `xs` |    4.5 |      5.1 |      6 |
+|       **Small** | `sm` |      9 |      8.3 |     12 |
+|      **Medium** | `md` | **18** | **16.5** | **24** |
+|       **Large** | `lg` |     27 |     24.9 |     36 |
+| **Extra large** | `xl` |     36 |     33.2 |     48 |
+
+### Compact
+
+In Compact Mode, the medium space grows from 14 to 16 pixels between window widths of 320 and 1600.
+
+|                 |      |    320 |      832 |   1600 |
+| --------------: | :--: | -----: | -------: | -----: |
+| **Extra small** | `xs` |    3.5 |      3.7 |      4 |
+|       **Small** | `sm` |      7 |      6.8 |      8 |
+|      **Medium** | `md` | **14** | **13.5** | **16** |
+|       **Large** | `lg` |     21 |     20.3 |     24 |
+| **Extra large** | `xl` |     28 |     27.1 |     32 |
 
 ## Grid Space