feat: Remove fluidity from body text and spacing in Compact Mode (#1389)

Amsterdam · Jul 18, 2024 · 050b063 · 050b063
1 parent 86d693c
commit 050b063
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 39 deletions.
diff --git a/proprietary/tokens/src/brand/ams/space.compact.tokens.json b/proprietary/tokens/src/brand/ams/space.compact.tokens.json
@@ -1,11 +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)" },
+      "xs": { "value": "0.25rem" },
+      "sm": { "value": "0.5rem" },
+      "md": { "value": "1rem" },
+      "lg": { "value": "1.5rem" },
+      "xl": { "value": "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/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.5768rem, 1.4299rem + 0.7346vw, 2.1645rem)" }
+          "font-size": { "value": "clamp(1.6105rem, calc(1.5626rem + 0.2394vw), 1.802rem)" }
         },
         "1": {
-          "font-size": { "value": "clamp(1.4016rem, 1.2883rem + 0.5665vw, 1.8547rem)" }
+          "font-size": { "value": "clamp(1.4641rem, calc(1.4297rem + 0.1721vw), 1.6018rem)" }
         },
         "2": {
-          "font-size": { "value": "clamp(1.2458rem, 1.16rem + 0.4293vw, 1.5893rem)" }
+          "font-size": { "value": "clamp(1.331rem, calc(1.3078rem + 0.116vw), 1.4238rem)" }
         },
         "3": {
-          "font-size": { "value": "clamp(1.1074rem, 1.0438rem + 0.3181vw, 1.3619rem)" }
+          "font-size": { "value": "clamp(1.21rem, calc(1.1961rem + 0.0695vw), 1.2656rem)" }
         },
         "4": {
-          "font-size": { "value": "clamp(0.9844rem, 0.9387rem + 0.2283vw, 1.167rem)" }
+          "font-size": { "value": "clamp(1.1rem, calc(1.0938rem + 0.0313vw), 1.125rem)" }
         },
         "5": {
-          "font-size": { "value": "clamp(0.875rem, 0.8438rem + 0.1563vw, 1rem)" }
+          "font-size": { "value": "1rem" }
         },
         "6": {
-          "font-size": { "value": "clamp(0.7778rem, 0.758rem + 0.0989vw, 0.8569rem)" }
+          "font-size": { "value": "clamp(0.8889rem, calc(0.9141rem + -0.0253vw), 0.9091rem)" }
         }
       }
     }

diff --git 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(1.895rem + 2.683vw), 4.578rem)" },
+          "font-size": { "value": "clamp(2.4316rem, calc(1.8951rem + 2.6826vw), 4.5776rem)" },
           "line-height": { "value": "1.15" }
         },
         "1": {
-          "font-size": { "value": "clamp(2.084rem, calc(1.69rem + 1.973vw), 3.662rem)" },
+          "font-size": { "value": "clamp(2.0842rem, calc(1.6897rem + 1.9724vw), 3.6621rem)" },
           "line-height": { "value": "1.2" }
         },
         "2": {
-          "font-size": { "value": "clamp(1.786rem, calc(1.5rem + 1.43vw), 2.93rem)" },
+          "font-size": { "value": "clamp(1.7865rem, calc(1.5007rem + 1.429vw), 2.9297rem)" },
           "line-height": { "value": "1.25" }
         },
         "3": {
-          "font-size": { "value": "clamp(1.531rem, calc(1.328rem + 1.016vw), 2.344rem)" },
+          "font-size": { "value": "clamp(1.5313rem, calc(1.3281rem + 1.0156vw), 2.3438rem)" },
           "line-height": { "value": "1.3" }
         },
         "4": {
-          "font-size": { "value": "clamp(1.313rem, calc(1.173rem + 0.703vw), 1.875rem)" },
+          "font-size": { "value": "clamp(1.3125rem, calc(1.1719rem + 0.7031vw), 1.875rem)" },
           "line-height": { "value": "1.5" }
         },
         "5": {
-          "font-size": { "value": "clamp(1.125rem, calc(1.031rem + 0.469vw), 1.5rem)" },
+          "font-size": { "value": "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)" },
           "line-height": { "value": "1.6" }
         },
         "6": {
-          "font-size": { "value": "clamp(0.964rem, calc(0.905rem + 0.295vw), 1.2rem)" },
+          "font-size": { "value": "clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem)" },
           "line-height": { "value": "1.6" }
         }
       }

diff --git a/storybook/src/docs/space.docs.mdx b/storybook/src/docs/space.docs.mdx
@@ -16,12 +16,12 @@ Or at the 4 edges of a component: at the top, bottom, start, and end of its cont
 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.
 We offer 5 lengths.
 
 ### Spacious
 
-In Spacious Mode, the medium space grows from 18 to 24 pixels between window widths of 320 and 1600.
+Because our typography is fluid in Spacious Mode, spacing is as well.
+The medium space grows from 18 to 24 pixels between window widths of 320 and 1600.
 
 |                 |      |    320 |      832 |   1600 |
 | --------------: | :--: | -----: | -------: | -----: |
@@ -33,15 +33,15 @@ In Spacious Mode, the medium space grows from 18 to 24 pixels between window wid
 
 ### Compact
 
-In Compact Mode, the medium space grows from 14 to 16 pixels between window widths of 320 and 1600.
+In Compact Mode, the medium space is 16 pixels.
 
-|                 |      |    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 |
+|                 |      |        |
+| --------------: | :--: | -----: |
+| **Extra small** | `xs` |      4 |
+|       **Small** | `sm` |      8 |
+|      **Medium** | `md` | **16** |
+|       **Large** | `lg` |     24 |
+| **Extra large** | `xl` |     32 |
 
 ## Grid Space
 

diff --git a/storybook/src/docs/typography.docs.mdx b/storybook/src/docs/typography.docs.mdx
@@ -73,16 +73,17 @@ And the minimum:
 
 For applications, text that large would be counterproductive.
 That is why we have a compact theme for typography.
-In this theme, Text Level 5 grows from 14 to 16 pixels.
+Typography is not fluid in this theme.
+Text Level 5 is 16 pixels on both narrow and wide windows.
 
-Larger text levels grow with a factor of 7 ÷ 6 ≈ 1.167.
-Smaller text levels grow with a factor of 9 ÷ 8 = 1.125.
+Larger text levels grow with a factor of 9 ÷ 8 ≈ 1.125.
+Smaller text levels grow with a factor of 16 ÷ 15 = 1.067.
 
 The maximum text sizes for all levels in the compact theme:
 
 <Typeset
   fontFamily="Amsterdam Sans, Arial, sans-serif"
-  fontSizes={[34.6, 29.6, 25.4, 21.8, 18.7, 16, 13.7]}
+  fontSizes={[28.8, 25.6, 22.8, 20.3, 18, 16, 14.2]}
   fontWeight={400}
   sampleText="Jouw typograaf biedt mij zulke exquise schreven"
 />
@@ -91,7 +92,7 @@ And the minimum:
 
 <Typeset
   fontFamily="Amsterdam Sans, Arial, sans-serif"
-  fontSizes={[25.2, 22.4, 19.9, 17.7, 15.8, 14, 12.4]}
+  fontSizes={[22.1, 20.7, 19.4, 18.2, 17.1, 16, 15]}
   fontWeight={400}
   sampleText="Jouw typograaf biedt mij zulke exquise schreven"
 />
@@ -114,11 +115,11 @@ The text sizes at those points are as follows, rounded to 1 decimal place:
 
 #### Compact
 
-| Device Class | Design Width |    0 |    1 |    2 |    3 |    4 |    5 |    6 |
-| :----------- | ------------ | ---: | ---: | ---: | ---: | ---: | ---: | ---: |
-| Phone        | 320          | 25.2 | 22.4 | 19.9 | 17.7 | 15.8 |   14 | 12.4 |
-| Tablet       | 832          | 29.0 | 25.3 | 22.1 | 19.3 | 16.9 | 14.8 |   13 |
-| Desktop      | 1600         | 34.6 | 29.6 | 25.4 | 21.8 | 18.7 |   16 | 13.7 |
+| Device Class | Design Width |    0 |    1 |    2 |    3 |    4 |   5 |    6 |
+| :----------- | ------------ | ---: | ---: | ---: | ---: | ---: | --: | ---: |
+| Phone        | 320          | 22.1 | 20.7 | 19.4 | 18.2 | 17.1 |  16 |   15 |
+| Tablet       | 832          | 24.8 | 22.7 | 20.8 |   19 | 17.4 |  16 | 14.7 |
+| Desktop      | 1600         | 28.8 | 25.6 | 22.8 | 20.3 |   18 |  16 | 14.2 |
 
 ## Emphasis