From 050b063ba968d4c4657611293f3d3798f0fd02de Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Thu, 18 Jul 2024 11:12:40 +0200 Subject: [PATCH] feat: Remove fluidity from body text and spacing in Compact Mode (#1389) --- .../src/brand/ams/space.compact.tokens.json | 10 ++++----- .../src/brand/ams/text.compact.tokens.json | 14 ++++++------- .../tokens/src/brand/ams/text.tokens.json | 14 ++++++------- storybook/src/docs/space.docs.mdx | 20 +++++++++--------- storybook/src/docs/typography.docs.mdx | 21 ++++++++++--------- 5 files changed, 40 insertions(+), 39 deletions(-) diff --git a/proprietary/tokens/src/brand/ams/space.compact.tokens.json b/proprietary/tokens/src/brand/ams/space.compact.tokens.json index 302b8ec06b..0ed8e6686d 100644 --- 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 index 57134f0199..ebe9faa817 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.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 index 8fe55897d9..452b2148b5 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(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 index a1caac9b1f..e571fa4382 100644 --- 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 index 6efd08f983..bea8b5be0a 100644 --- 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: @@ -91,7 +92,7 @@ And the minimum: @@ -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