feat(theme): retune the container scale to one geometric rhythm

apps/storybook/src/stories/components/overlay/popover/Popover.stories.js

@@ -409,7 +409,7 @@ const WIDTHS_TEMPLATE = `<div class="flex items-center gap-[var(--spacing-xxl)]
         <PopoverTitle>small</PopoverTitle>
         <PopoverClose />
       </PopoverHeader>
-      <div class="p-[var(--spacing-md)] text-body-sm text-[var(--text-default)]">Panel width is var(--container-xs) (320px).</div>
+      <div class="p-[var(--spacing-md)] text-body-sm text-[var(--text-default)]">Panel width is var(--container-xs) (348px).</div>
     </PopoverContent>
   </Popover>
 
@@ -422,7 +422,7 @@ const WIDTHS_TEMPLATE = `<div class="flex items-center gap-[var(--spacing-xxl)]
         <PopoverTitle>medium</PopoverTitle>
         <PopoverClose />
       </PopoverHeader>
-      <div class="p-[var(--spacing-md)] text-body-sm text-[var(--text-default)]">Panel width is var(--container-sm) (384px).</div>
+      <div class="p-[var(--spacing-md)] text-body-sm text-[var(--text-default)]">Panel width is var(--container-sm) (408px).</div>
     </PopoverContent>
   </Popover>
 
@@ -435,7 +435,7 @@ const WIDTHS_TEMPLATE = `<div class="flex items-center gap-[var(--spacing-xxl)]
         <PopoverTitle>large</PopoverTitle>
         <PopoverClose />
       </PopoverHeader>
-      <div class="p-[var(--spacing-md)] text-body-sm text-[var(--text-default)]">Panel width is var(--container-md) (448px).</div>
+      <div class="p-[var(--spacing-md)] text-body-sm text-[var(--text-default)]">Panel width is var(--container-md) (472px).</div>
     </PopoverContent>
   </Popover>
 </div>`
@@ -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) }
     }

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;

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;

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 }

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'
 }
 
 /**