diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--default--dark-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--default--dark-tablet.png
index 9604963c6..0cd550d3d 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--default--dark-tablet.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--default--dark-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--default--light-desktop.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--default--light-desktop.png
index 9af3acc7c..9498bafdd 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--default--light-desktop.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--default--light-desktop.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--default--light-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--default--light-tablet.png
index 00bf4a8f0..d2bd3e193 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--default--light-tablet.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--default--light-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--default.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--default.png
index ec59bec75..82a5942a3 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--default.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--default.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--disabled--dark-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--disabled--dark-tablet.png
index 1ae69a0f4..b348126b5 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--disabled--dark-tablet.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--disabled--dark-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--disabled--light-desktop.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--disabled--light-desktop.png
index 21555042b..dddf3be33 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--disabled--light-desktop.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--disabled--light-desktop.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--disabled--light-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--disabled--light-tablet.png
index 8c9ed242e..51edab240 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--disabled--light-tablet.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--disabled--light-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--disabled.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--disabled.png
index 6ccab8240..a5bbd6717 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--disabled.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--disabled.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--loading--dark-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--loading--dark-tablet.png
index 20b712d1a..2859bab9a 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--loading--dark-tablet.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--loading--dark-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--loading--light-desktop.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--loading--light-desktop.png
index 765b84b50..9e897e1a0 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--loading--light-desktop.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--loading--light-desktop.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--loading--light-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--loading--light-tablet.png
index a7d10562c..eb08216fb 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--loading--light-tablet.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--loading--light-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--loading.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--loading.png
index 6a3f09149..a07fab7c3 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--loading.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-data-picklist--loading.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-calendar--with-presets--dark-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-calendar--with-presets--dark-mobile.png
index 6b55886df..d2137fd56 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-calendar--with-presets--dark-mobile.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-calendar--with-presets--dark-mobile.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-calendar--with-presets--dark-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-calendar--with-presets--dark-tablet.png
index b790674d8..54619b27c 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-calendar--with-presets--dark-tablet.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-calendar--with-presets--dark-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-calendar--with-presets--light-desktop.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-calendar--with-presets--light-desktop.png
index 55a131b01..de0f2334c 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-calendar--with-presets--light-desktop.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-calendar--with-presets--light-desktop.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-calendar--with-presets--light-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-calendar--with-presets--light-mobile.png
index aaed59f8c..c8a0e2920 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-calendar--with-presets--light-mobile.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-calendar--with-presets--light-mobile.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-calendar--with-presets--light-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-calendar--with-presets--light-tablet.png
index 55a131b01..de0f2334c 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-calendar--with-presets--light-tablet.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-calendar--with-presets--light-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-calendar--with-presets.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-calendar--with-presets.png
index b790674d8..54619b27c 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-calendar--with-presets.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-calendar--with-presets.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--default--dark-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--default--dark-tablet.png
index c189f0b4c..9b5b9a4b2 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--default--dark-tablet.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--default--dark-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--default--light-desktop.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--default--light-desktop.png
index 01c55da1a..6be598846 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--default--light-desktop.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--default--light-desktop.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--default--light-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--default--light-tablet.png
index da41577d7..03880980b 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--default--light-tablet.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--default--light-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--default.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--default.png
index ff528c0c3..cbf512461 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--default.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--default.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--disabled--dark-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--disabled--dark-tablet.png
index c75a86461..862eaf855 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--disabled--dark-tablet.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--disabled--dark-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--disabled--light-desktop.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--disabled--light-desktop.png
index ef7686b86..7580eca8c 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--disabled--light-desktop.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--disabled--light-desktop.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--disabled--light-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--disabled--light-tablet.png
index 80338ed8e..d9034eb64 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--disabled--light-tablet.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--disabled--light-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--disabled.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--disabled.png
index 4770d4557..b7a379e38 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--disabled.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--disabled.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--invalid--dark-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--invalid--dark-tablet.png
index 2a8bf71b4..ddb679702 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--invalid--dark-tablet.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--invalid--dark-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--invalid--light-desktop.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--invalid--light-desktop.png
index 2f541c48f..18dc2956a 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--invalid--light-desktop.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--invalid--light-desktop.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--invalid--light-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--invalid--light-tablet.png
index 5468d7004..c08a492e9 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--invalid--light-tablet.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--invalid--light-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--invalid.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--invalid.png
index cea6e3f3d..298e0507c 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--invalid.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--invalid.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--required--dark-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--required--dark-tablet.png
index 827eaf4f2..1c5c0c7d5 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--required--dark-tablet.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--required--dark-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--required--light-desktop.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--required--light-desktop.png
index a2d9fd684..5988f1400 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--required--light-desktop.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--required--light-desktop.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--required--light-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--required--light-tablet.png
index 46fa1a910..301b23303 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--required--light-tablet.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--required--light-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--required.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--required.png
index cbc9da7f2..c57079c33 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--required.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--required.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--resizable--dark-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--resizable--dark-tablet.png
index dcb5ee28e..13103532d 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--resizable--dark-tablet.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--resizable--dark-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--resizable--light-desktop.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--resizable--light-desktop.png
index ddeae5ad4..3b6cafb63 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--resizable--light-desktop.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--resizable--light-desktop.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--resizable--light-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--resizable--light-tablet.png
index 84a4ce27c..64034870d 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--resizable--light-tablet.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--resizable--light-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--resizable.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--resizable.png
index 198b51263..2640a6a92 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--resizable.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-textarea--resizable.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--default--dark-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--default--dark-tablet.png
index 9fcc990a0..5056ef470 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--default--dark-tablet.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--default--dark-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--default--light-desktop.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--default--light-desktop.png
index 91ea2cf7e..0719cb7b4 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--default--light-desktop.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--default--light-desktop.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--default--light-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--default--light-tablet.png
index 91ea2cf7e..0719cb7b4 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--default--light-tablet.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--default--light-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--default.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--default.png
index 9fcc990a0..5056ef470 100644
Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--default.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-layout-scrollarea--default.png differ
diff --git a/apps/storybook/src/stories/components/overlay/popover/Popover.stories.js b/apps/storybook/src/stories/components/overlay/popover/Popover.stories.js
index bcd93550d..9f08e54c1 100644
--- a/apps/storybook/src/stories/components/overlay/popover/Popover.stories.js
+++ b/apps/storybook/src/stories/components/overlay/popover/Popover.stories.js
@@ -409,7 +409,7 @@ const WIDTHS_TEMPLATE = `
+ Panel width is var(--container-xs) (348px).
@@ -422,7 +422,7 @@ const WIDTHS_TEMPLATE = `
+ Panel width is var(--container-sm) (408px).
@@ -435,7 +435,7 @@ const WIDTHS_TEMPLATE = `
+ Panel width is var(--container-md) (472px).
`
@@ -449,7 +449,7 @@ export const Widths = {
controls: { disable: true },
description: {
story:
- 'The `width` prop presets — click a trigger to open each: `small` (`var(--container-xs)`, 320px), `medium` (`var(--container-sm)`, 384px), and `large` (`var(--container-md)`, 448px). When `width` is omitted the panel sizes fluidly between `var(--container-3xs)` and `var(--container-xs)`.'
+ 'The `width` prop presets — click a trigger to open each: `small` (`var(--container-xs)`, 348px), `medium` (`var(--container-sm)`, 408px), and `large` (`var(--container-md)`, 472px). When `width` is omitted the panel sizes fluidly between `var(--container-3xs)` and `var(--container-xs)`.'
},
source: { code: toSfc(IMPORT, WIDTHS_TEMPLATE) }
}
diff --git a/packages/theme/dist/v4/globals.css b/packages/theme/dist/v4/globals.css
index 8d93fa5cf..4254962f1 100644
--- a/packages/theme/dist/v4/globals.css
+++ b/packages/theme/dist/v4/globals.css
@@ -422,18 +422,18 @@
--border-3: 3px;
--border-4: 4px;
--container-3xs: 256px;
- --container-2xs: 288px;
- --container-xs: 320px;
- --container-sm: 384px;
- --container-md: 448px;
- --container-lg: 512px;
- --container-xl: 576px;
- --container-2xl: 672px;
- --container-3xl: 768px;
- --container-4xl: 896px;
- --container-5xl: 1024px;
- --container-6xl: 1152px;
- --container-7xl: 1280px;
+ --container-2xs: 300px;
+ --container-xs: 348px;
+ --container-sm: 408px;
+ --container-md: 472px;
+ --container-lg: 552px;
+ --container-xl: 644px;
+ --container-2xl: 752px;
+ --container-3xl: 876px;
+ --container-4xl: 1024px;
+ --container-5xl: 1192px;
+ --container-6xl: 1388px;
+ --container-7xl: 1620px;
--height-2: 8px;
--height-3: 12px;
--height-4: 16px;
@@ -529,18 +529,18 @@
--spacing-80: 320px;
--spacing-96: 384px;
--width-3xs: 256px;
- --width-2xs: 288px;
- --width-xs: 320px;
- --width-sm: 384px;
- --width-md: 448px;
- --width-lg: 512px;
- --width-xl: 576px;
- --width-2xl: 672px;
- --width-3xl: 768px;
- --width-4xl: 896px;
- --width-5xl: 1024px;
- --width-6xl: 1152px;
- --width-7xl: 1280px;
+ --width-2xs: 300px;
+ --width-xs: 348px;
+ --width-sm: 408px;
+ --width-md: 472px;
+ --width-lg: 552px;
+ --width-xl: 644px;
+ --width-2xl: 752px;
+ --width-3xl: 876px;
+ --width-4xl: 1024px;
+ --width-5xl: 1192px;
+ --width-6xl: 1388px;
+ --width-7xl: 1620px;
--aspect-video: 16 / 9;
--shape-flat: 0;
--shape-card: 8px;
diff --git a/packages/theme/dist/v4/globals.scss b/packages/theme/dist/v4/globals.scss
index 8d93fa5cf..4254962f1 100644
--- a/packages/theme/dist/v4/globals.scss
+++ b/packages/theme/dist/v4/globals.scss
@@ -422,18 +422,18 @@
--border-3: 3px;
--border-4: 4px;
--container-3xs: 256px;
- --container-2xs: 288px;
- --container-xs: 320px;
- --container-sm: 384px;
- --container-md: 448px;
- --container-lg: 512px;
- --container-xl: 576px;
- --container-2xl: 672px;
- --container-3xl: 768px;
- --container-4xl: 896px;
- --container-5xl: 1024px;
- --container-6xl: 1152px;
- --container-7xl: 1280px;
+ --container-2xs: 300px;
+ --container-xs: 348px;
+ --container-sm: 408px;
+ --container-md: 472px;
+ --container-lg: 552px;
+ --container-xl: 644px;
+ --container-2xl: 752px;
+ --container-3xl: 876px;
+ --container-4xl: 1024px;
+ --container-5xl: 1192px;
+ --container-6xl: 1388px;
+ --container-7xl: 1620px;
--height-2: 8px;
--height-3: 12px;
--height-4: 16px;
@@ -529,18 +529,18 @@
--spacing-80: 320px;
--spacing-96: 384px;
--width-3xs: 256px;
- --width-2xs: 288px;
- --width-xs: 320px;
- --width-sm: 384px;
- --width-md: 448px;
- --width-lg: 512px;
- --width-xl: 576px;
- --width-2xl: 672px;
- --width-3xl: 768px;
- --width-4xl: 896px;
- --width-5xl: 1024px;
- --width-6xl: 1152px;
- --width-7xl: 1280px;
+ --width-2xs: 300px;
+ --width-xs: 348px;
+ --width-sm: 408px;
+ --width-md: 472px;
+ --width-lg: 552px;
+ --width-xl: 644px;
+ --width-2xl: 752px;
+ --width-3xl: 876px;
+ --width-4xl: 1024px;
+ --width-5xl: 1192px;
+ --width-6xl: 1388px;
+ --width-7xl: 1620px;
--aspect-video: 16 / 9;
--shape-flat: 0;
--shape-card: 8px;
diff --git a/packages/theme/src/tokens/primitives/shape/container.js b/packages/theme/src/tokens/primitives/shape/container.js
index 14255d9e5..e5cc6dc72 100644
--- a/packages/theme/src/tokens/primitives/shape/container.js
+++ b/packages/theme/src/tokens/primitives/shape/container.js
@@ -1,17 +1,34 @@
+/*
+ * Container widths — a geometric rhythm, not a hand-picked list.
+ *
+ * The scale is anchored at both ends: `3xs` stays 256px (the narrowest useful
+ * field/rail width) and `7xl` is 1620px (the widest page measure). The eleven
+ * slots between them are `256 × r^n` with r = (1620 / 256)^(1/12) ≈ 1.1662 —
+ * so every neighbouring pair sits at the same ~+16.6% apart and the whole set
+ * reads as one progression instead of two grids spliced together (the previous
+ * scale stepped +32, then +64, then +96, then +128).
+ *
+ * Values are rounded to the 4px grid; `7xl` keeps its exact anchor and `4xl`
+ * is nudged 4px to land on 1024 (2.6px off the ideal, and a landmark worth
+ * keeping). Ratio between neighbours therefore ranges 1.157–1.172.
+ *
+ * Rounding is 4px, not 8px, because 1620 is not a multiple of 8 — the anchor
+ * defines the grid, so a stricter grid could not reach it.
+ */
export const container = {
- '3xs': '256px',
- '2xs': '288px',
- xs: '320px',
- sm: '384px',
- md: '448px',
- lg: '512px',
- xl: '576px',
- '2xl': '672px',
- '3xl': '768px',
- '4xl': '896px',
- '5xl': '1024px',
- '6xl': '1152px',
- '7xl': '1280px'
+ '3xs': '256px', // ×1 — anchor
+ '2xs': '300px', // +44
+ xs: '348px', // +48
+ sm: '408px', // +60
+ md: '472px', // +64
+ lg: '552px', // +80
+ xl: '644px', // +92
+ '2xl': '752px', // +108
+ '3xl': '876px', // +124
+ '4xl': '1024px', // +148
+ '5xl': '1192px', // +168
+ '6xl': '1388px', // +196
+ '7xl': '1620px' // +232 — anchor
}
export default { container }
diff --git a/packages/webkit/src/components/overlay/drawer/presets/sizes.js b/packages/webkit/src/components/overlay/drawer/presets/sizes.js
index ee8b2b282..695873eee 100644
--- a/packages/webkit/src/components/overlay/drawer/presets/sizes.js
+++ b/packages/webkit/src/components/overlay/drawer/presets/sizes.js
@@ -8,10 +8,15 @@ export const drawerSizePixels = {
large: '1024px'
}
+/**
+ * Literal panel widths, deliberately not container tokens: an edge panel is
+ * sized against the viewport it covers, not against a reading measure, so it
+ * does not move when the container scale is retuned.
+ */
export const drawerSizeSummaries = {
- small: '384px (container-sm)',
- medium: '672px (container-2xl)',
- large: '1024px (container-5xl)'
+ small: '384px',
+ medium: '672px',
+ large: '1024px'
}
/**