@duro-app/ui 2.0.0 → 3.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/ui",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -64,7 +64,7 @@
   },
   "dependencies": {
     "@tanstack/react-virtual": "^3.14.6",
-    "@duro-app/tokens": "^2.0.0"
+    "@duro-app/tokens": "^3.0.0"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.28.0",

package/src/components/ActionBar/ActionBar.stories.tsx

@@ -6,6 +6,8 @@ import {ActionBar} from './ActionBar'
 import {Button} from '../Button/Button'
 import {Checkbox} from '../Checkbox/Checkbox'
 import {Table} from '../Table/Table'
+import {spacing} from '@duro-app/tokens/tokens/spacing.css'
+import {typography} from '@duro-app/tokens/tokens/typography.css'
 
 interface ActionBarStoryArgs {
   onClearSelection: () => void
@@ -40,16 +42,16 @@ const storyStyles = css.create({
   wrapper: {
     display: 'flex',
     flexDirection: 'column',
-    gap: 32,
-    padding: 24,
+    gap: spacing.xl,
+    padding: spacing.lg,
   },
   label: {
-    fontSize: '0.75rem',
-    fontWeight: 600,
+    fontSize: typography.fontSizeXs,
+    fontWeight: typography.fontWeightSemibold,
     textTransform: 'uppercase' as const,
     letterSpacing: '0.05em',
     opacity: 0.6,
-    marginBottom: 8,
+    marginBottom: spacing.sm,
   },
 })
 

package/src/components/Alert/Alert.stories.tsx

@@ -2,6 +2,7 @@ import type {Meta, StoryObj} from '@storybook/react'
 import {expect} from 'storybook/test'
 import {css, html} from 'react-strict-dom'
 import {Alert} from './Alert'
+import {spacing} from '@duro-app/tokens/tokens/spacing.css'
 
 const meta: Meta<typeof Alert> = {
   title: 'Components/Alert',
@@ -57,7 +58,7 @@ export const NoIcon: Story = {
 }
 
 const stackStyles = css.create({
-  stack: {display: 'flex', flexDirection: 'column', gap: 12},
+  stack: {display: 'flex', flexDirection: 'column', gap: spacing.ms},
 })
 
 export const AllVariants: Story = {

package/src/components/Badge/Badge.stories.tsx

@@ -2,6 +2,7 @@ import type {Meta, StoryObj} from '@storybook/react'
 import {expect} from 'storybook/test'
 import {css, html} from 'react-strict-dom'
 import {Badge} from './Badge'
+import {spacing} from '@duro-app/tokens/tokens/spacing.css'
 
 const meta: Meta<typeof Badge> = {
   title: 'Components/Badge',
@@ -52,8 +53,8 @@ export const Small: Story = {
 }
 
 const stackStyles = css.create({
-  row: {display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap'},
-  stack: {display: 'flex', flexDirection: 'column', gap: 16},
+  row: {display: 'flex', alignItems: 'center', gap: spacing.sm, flexWrap: 'wrap'},
+  stack: {display: 'flex', flexDirection: 'column', gap: spacing.md},
 })
 
 export const AllVariants: Story = {

package/src/components/Button/Button.stories.tsx

@@ -2,6 +2,7 @@ import type {Meta, StoryObj} from '@storybook/react'
 import {expect, fn} from 'storybook/test'
 import {css, html} from 'react-strict-dom'
 import {Button} from './Button'
+import {spacing} from '@duro-app/tokens/tokens/spacing.css'
 
 const meta: Meta<typeof Button> = {
   title: 'Components/Button',
@@ -83,8 +84,8 @@ export const Disabled: Story = {
 }
 
 const rowStyles = css.create({
-  row: {display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap'},
-  stack: {display: 'flex', flexDirection: 'column', gap: 16},
+  row: {display: 'flex', gap: spacing.ms, alignItems: 'center', flexWrap: 'wrap'},
+  stack: {display: 'flex', flexDirection: 'column', gap: spacing.md},
 })
 
 export const AllVariants: Story = {

package/src/components/Callout/Callout.stories.tsx

@@ -2,6 +2,7 @@ import type {Meta, StoryObj} from '@storybook/react'
 import {expect} from 'storybook/test'
 import {css, html} from 'react-strict-dom'
 import {Callout} from './Callout'
+import {spacing} from '@duro-app/tokens/tokens/spacing.css'
 
 const meta: Meta<typeof Callout> = {
   title: 'Components/Callout',
@@ -82,7 +83,7 @@ export const NoIcon: Story = {
 }
 
 const stackStyles = css.create({
-  stack: {display: 'flex', flexDirection: 'column', gap: 12},
+  stack: {display: 'flex', flexDirection: 'column', gap: spacing.ms},
 })
 
 export const AllVariants: Story = {

package/src/components/Card/Card.stories.tsx

@@ -3,6 +3,8 @@ import {expect} from 'storybook/test'
 import {css, html} from 'react-strict-dom'
 import {Card} from './Card'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
+import {typography} from '@duro-app/tokens/tokens/typography.css'
+import {spacing} from '@duro-app/tokens/tokens/spacing.css'
 
 const meta: Meta<typeof Card> = {
   title: 'Components/Card',
@@ -85,10 +87,10 @@ const gridStyles = css.create({
   grid: {
     display: 'grid',
     gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
-    gap: 16,
+    gap: spacing.md,
   },
-  stack: {display: 'flex', flexDirection: 'column', gap: 16},
-  muted: {color: colors.textMuted, fontSize: '0.875rem'},
+  stack: {display: 'flex', flexDirection: 'column', gap: spacing.md},
+  muted: {color: colors.textMuted, fontSize: typography.fontSizeSm},
 })
 
 export const AllVariants: Story = {

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -2,6 +2,7 @@ import type {Meta, StoryObj} from '@storybook/react'
 import {expect, fn} from 'storybook/test'
 import {css, html} from 'react-strict-dom'
 import {Checkbox} from './Checkbox'
+import {spacing} from '@duro-app/tokens/tokens/spacing.css'
 
 const meta: Meta<typeof Checkbox> = {
   title: 'Components/Checkbox',
@@ -67,7 +68,7 @@ export const WithoutLabel: Story = {
 }
 
 const stackStyles = css.create({
-  stack: {display: 'flex', flexDirection: 'column', gap: 12},
+  stack: {display: 'flex', flexDirection: 'column', gap: spacing.ms},
 })
 
 export const AllVariants: Story = {

package/src/components/Cluster/Cluster.stories.tsx

@@ -2,8 +2,9 @@ import type {Meta, StoryObj} from '@storybook/react'
 import {css, html} from 'react-strict-dom'
 import {Cluster} from './Cluster'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
-import {spacing} from '@duro-app/tokens/tokens/spacing.css'
+import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
 import {SPACING_KEYS} from '@duro-app/tokens/keys'
+import {typography} from '@duro-app/tokens/tokens/typography.css'
 
 const meta: Meta<typeof Cluster> = {
   title: 'Layout/Cluster',
@@ -35,8 +36,8 @@ const localStyles = css.create({
     paddingBottom: spacing.xs,
     paddingLeft: spacing.sm,
     paddingRight: spacing.sm,
-    borderRadius: 12,
-    fontSize: '0.75rem',
+    borderRadius: radii.md,
+    fontSize: typography.fontSizeXs,
     whiteSpace: 'nowrap',
   },
   narrow: {

package/src/components/ColorMode/ColorMode.stories.tsx

@@ -2,6 +2,7 @@ import type {Meta, StoryObj} from '@storybook/react'
 import {expect, fn} from 'storybook/test'
 import {css, html} from 'react-strict-dom'
 import {ColorModeProvider, ColorModeToggle, useColorMode} from './ColorMode'
+import {spacing} from '@duro-app/tokens/tokens/spacing.css'
 
 const meta: Meta<typeof ColorModeToggle> = {
   title: 'Components/ColorMode',
@@ -58,7 +59,7 @@ export const AllModes: Story = {
 }
 
 const readout = css.create({
-  row: {display: 'flex', alignItems: 'center', gap: 12},
+  row: {display: 'flex', alignItems: 'center', gap: spacing.ms},
 })
 
 function Readout() {

package/src/components/Field/Field.stories.tsx

@@ -3,6 +3,7 @@ import {expect} from 'storybook/test'
 import {css, html} from 'react-strict-dom'
 import {Field} from './Field'
 import {Input} from '../Input/Input'
+import {spacing} from '@duro-app/tokens/tokens/spacing.css'
 
 const meta: Meta = {
   title: 'Components/Field',
@@ -62,8 +63,8 @@ export const WithError: Story = {
 }
 
 const stackStyles = css.create({
-  stack: {display: 'flex', flexDirection: 'column', gap: 16, maxWidth: 400},
-  stackWide: {display: 'flex', flexDirection: 'column', gap: 16, maxWidth: 600},
+  stack: {display: 'flex', flexDirection: 'column', gap: spacing.md, maxWidth: 400},
+  stackWide: {display: 'flex', flexDirection: 'column', gap: spacing.md, maxWidth: 600},
 })
 
 export const FormExample: Story = {

package/src/components/Grid/Grid.meta.ts

@@ -2,10 +2,11 @@ import type {ComponentMeta} from '../component-meta'
 
 export const meta: ComponentMeta = {
   description:
-    'CSS grid layout. Supports fixed column count (1-6) or responsive auto-fit via minColumnWidth.',
+    'CSS grid layout. Fixed column count (1-6), responsive auto-fit via minColumnWidth, or a named split layout (list/detail, nav/content) that collapses below the md breakpoint.',
   whenToUse: [
     'Card grids, dashboard layouts, multi-column forms',
     'Responsive layouts that should auto-adjust column count',
+    'A list/detail or nav/content screen — layout="split" | "split-wide", never a hand-rolled gridTemplateColumns with its own @media',
   ],
   whenNotToUse: [
     'Single-column vertical layout — use Stack',
@@ -17,8 +18,19 @@ export const meta: ComponentMeta = {
       kind: 'contrast',
       relationship: 'Grid for multi-column layouts; Stack for a single vertical column',
     },
+    {
+      component: 'split-pane',
+      kind: 'composition',
+      relationship: 'Grid layout="split" with a List and a Panel is the split-pane recipe',
+    },
   ],
-  example: `// Responsive: columns auto-fit based on min width
+  example: `// Split: list ≥ 240px beside a detail pane, one column below md
+<Grid layout="split" gap="lg">
+  <List.Root>…</List.Root>
+  <Panel.Root>…</Panel.Root>
+</Grid>
+
+// Responsive: columns auto-fit based on min width
 <Grid minColumnWidth="280px" gap="md">
   <Card>A</Card>
   <Card>B</Card>

package/src/components/Grid/Grid.stories.tsx

@@ -3,9 +3,10 @@ import {css, html} from 'react-strict-dom'
 import {Grid} from './Grid'
 import {Stack} from '../Stack/Stack'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
-import {spacing} from '@duro-app/tokens/tokens/spacing.css'
+import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
 import {SPACING_KEYS} from '@duro-app/tokens/keys'
 import {useContainerQuery} from '../../hooks/useContainerQuery'
+import {typography} from '@duro-app/tokens/tokens/typography.css'
 
 const meta: Meta<typeof Grid> = {
   title: 'Layout/Grid',
@@ -20,6 +21,7 @@ const meta: Meta<typeof Grid> = {
       options: [1, 2, 3, 4, 5, 6],
     },
     minColumnWidth: {control: 'text'},
+    layout: {control: 'select', options: [undefined, 'split', 'split-wide']},
   },
 }
 
@@ -31,12 +33,12 @@ const localStyles = css.create({
     backgroundColor: colors.accent,
     color: colors.accentContrast,
     padding: spacing.md,
-    borderRadius: 4,
+    borderRadius: radii.xs,
     textAlign: 'center',
-    fontSize: '0.875rem',
+    fontSize: typography.fontSizeSm,
   },
   label: {
-    fontSize: '0.75rem',
+    fontSize: typography.fontSizeXs,
     color: colors.textMuted,
   },
 })
@@ -83,6 +85,24 @@ export const TwoColumns: Story = {
   ),
 }
 
+export const Split: Story = {
+  render: () => (
+    <Stack gap="sm">
+      <html.span style={localStyles.label}>
+        layout=&quot;split&quot; — list ≥ 240px beside the detail, one column below md
+      </html.span>
+      <Grid layout="split" gap="lg">
+        <Cell>list</Cell>
+        <Cell>detail</Cell>
+      </Grid>
+      <Grid layout="split-wide" gap="lg">
+        <Cell>nav</Cell>
+        <Cell>content</Cell>
+      </Grid>
+    </Stack>
+  ),
+}
+
 export const WithContainerQuery: Story = {
   render: function Render() {
     const {ref, size} = useContainerQuery<HTMLDivElement>()

package/src/components/Grid/Grid.tsx

@@ -3,10 +3,18 @@ import {html} from 'react-strict-dom'
 import {styles} from './styles.css'
 import type {SpacingToken} from '@duro-app/tokens/keys'
 
+export type GridLayout = 'split' | 'split-wide'
+
 interface GridProps {
   gap?: SpacingToken
   columns?: 1 | 2 | 3 | 4 | 5 | 6
   minColumnWidth?: string
+  /**
+   * A named responsive layout. `split` is list/detail (1:2, list ≥ 240px),
+   * `split-wide` is nav/content (1:3, nav ≥ 280px); both collapse to one
+   * column below the `md` breakpoint. Wins over `columns` / `minColumnWidth`.
+   */
+  layout?: GridLayout
   children: ReactNode
 }
 
@@ -30,12 +38,19 @@ const columnsMap = {
   6: styles.col6,
 } as const
 
-export function Grid({gap = 'md', columns, minColumnWidth, children}: GridProps) {
-  const columnStyle = minColumnWidth
-    ? styles.autoFit(minColumnWidth)
-    : columns
-      ? columnsMap[columns]
-      : undefined
+const layoutMap = {
+  split: styles.split,
+  'split-wide': styles.splitWide,
+} as const satisfies Record<GridLayout, unknown>
+
+export function Grid({gap = 'md', columns, minColumnWidth, layout, children}: GridProps) {
+  const columnStyle = layout
+    ? layoutMap[layout]
+    : minColumnWidth
+      ? styles.autoFit(minColumnWidth)
+      : columns
+        ? columnsMap[columns]
+        : undefined
 
   return <html.div style={[styles.base, gapMap[gap], columnStyle]}>{children}</html.div>
 }

package/src/components/Grid/styles.css.ts

@@ -1,5 +1,10 @@
 import {css} from 'react-strict-dom'
 import {spacing} from '@duro-app/tokens/tokens/spacing.css'
+import {breakpoints} from '@duro-app/tokens/tokens/breakpoints.css'
+
+// Where a split collapses to one column. A defineConsts string, inlined into
+// the @media text at build time.
+const SPLIT_BP = breakpoints.md
 
 export const styles = css.create({
   base: {
@@ -14,6 +19,22 @@ export const styles = css.create({
   autoFit: (minWidth: string) => ({
     gridTemplateColumns: `repeat(auto-fill, minmax(${minWidth}, 1fr))`,
   }),
+  // Asymmetric list/detail splits: a bounded first column, the rest for the
+  // detail; one column below the md breakpoint. Static entries rather than a
+  // parameter because the pair (widths + collapse point) is the design
+  // decision — a screen picks a split, it does not tune one.
+  split: {
+    gridTemplateColumns: {
+      default: '1fr',
+      [`@media (min-width: ${SPLIT_BP})`]: 'minmax(240px, 1fr) minmax(0, 2fr)',
+    },
+  },
+  splitWide: {
+    gridTemplateColumns: {
+      default: '1fr',
+      [`@media (min-width: ${SPLIT_BP})`]: 'minmax(280px, 1fr) minmax(0, 3fr)',
+    },
+  },
   gapXs: {gap: spacing.xs},
   gapSm: {gap: spacing.sm},
   gapMs: {gap: spacing.ms},

package/src/components/Inline/Inline.stories.tsx

@@ -2,8 +2,9 @@ import type {Meta, StoryObj} from '@storybook/react'
 import {css, html} from 'react-strict-dom'
 import {Inline} from './Inline'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
-import {spacing} from '@duro-app/tokens/tokens/spacing.css'
+import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
 import {SPACING_KEYS} from '@duro-app/tokens/keys'
+import {typography} from '@duro-app/tokens/tokens/typography.css'
 
 const meta: Meta<typeof Inline> = {
   title: 'Layout/Inline',
@@ -32,12 +33,12 @@ const localStyles = css.create({
     backgroundColor: colors.accent,
     color: colors.accentContrast,
     padding: spacing.sm,
-    borderRadius: 4,
+    borderRadius: radii.xs,
     textAlign: 'center',
-    fontSize: '0.875rem',
+    fontSize: typography.fontSizeSm,
   },
   iconLg: {
-    fontSize: '1.25rem',
+    fontSize: typography.fontSizeXl,
   },
 })
 

package/src/components/Input/Input.stories.tsx

@@ -2,6 +2,7 @@ import type {Meta, StoryObj} from '@storybook/react'
 import {expect, fn} from 'storybook/test'
 import {css, html} from 'react-strict-dom'
 import {Input} from './Input'
+import {spacing} from '@duro-app/tokens/tokens/spacing.css'
 
 const meta: Meta<typeof Input> = {
   title: 'Components/Input',
@@ -66,7 +67,7 @@ export const Disabled: Story = {
 }
 
 const stackStyles = css.create({
-  stack: {display: 'flex', flexDirection: 'column', gap: 12, maxWidth: 320},
+  stack: {display: 'flex', flexDirection: 'column', gap: spacing.ms, maxWidth: 320},
 })
 
 export const AllVariants: Story = {

package/src/components/InputGroup/InputGroup.stories.tsx

@@ -3,6 +3,7 @@ import {expect, fn} from 'storybook/test'
 import {css, html} from 'react-strict-dom'
 import {InputGroup} from './InputGroup'
 import {Input} from '../Input/Input'
+import {spacing} from '@duro-app/tokens/tokens/spacing.css'
 
 const meta: Meta = {
   title: 'Components/InputGroup',
@@ -94,7 +95,7 @@ export const StandaloneInput: Story = {
 
 const layoutStyles = css.create({
   container: {maxWidth: 400},
-  stack: {display: 'flex', flexDirection: 'column', gap: 16, maxWidth: 400},
+  stack: {display: 'flex', flexDirection: 'column', gap: spacing.md, maxWidth: 400},
 })
 
 export const AllVariants: Story = {

package/src/components/LinkButton/LinkButton.stories.tsx

@@ -2,6 +2,7 @@ import type {Meta, StoryObj} from '@storybook/react'
 import {expect} from 'storybook/test'
 import {css, html} from 'react-strict-dom'
 import {LinkButton} from './LinkButton'
+import {spacing} from '@duro-app/tokens/tokens/spacing.css'
 
 const meta: Meta<typeof LinkButton> = {
   title: 'Components/LinkButton',
@@ -61,8 +62,8 @@ export const ExternalLink: Story = {
 }
 
 const rowStyles = css.create({
-  row: {display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap'},
-  stack: {display: 'flex', flexDirection: 'column', gap: 16},
+  row: {display: 'flex', gap: spacing.ms, alignItems: 'center', flexWrap: 'wrap'},
+  stack: {display: 'flex', flexDirection: 'column', gap: spacing.md},
 })
 
 export const AllVariants: Story = {

package/src/components/List/List.stories.tsx

@@ -7,6 +7,7 @@ import {Badge} from '../Badge/Badge'
 import {Button} from '../Button/Button'
 import {Checkbox} from '../Checkbox/Checkbox'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
+import {radii} from '@duro-app/tokens/tokens/spacing.css'
 
 const meta: Meta = {
   title: 'Components/List',
@@ -76,7 +77,7 @@ const narrowContainer = css.create({
     borderWidth: 1,
     borderStyle: 'solid',
     borderColor: colors.border,
-    borderRadius: 8,
+    borderRadius: radii.sm,
     overflow: 'hidden',
   },
 })

package/src/components/PageShell/PageShell.meta.ts

@@ -9,7 +9,7 @@ export const meta: ComponentMeta = {
   ],
   whenNotToUse: [
     'Nested section layouts — use Stack or Card',
-    'Sidebar layouts — combine with SideNav manually',
+    'Sidebar layouts — start from the page-with-sidenav recipe (PageShell + Grid layout="split-wide" + SideNav)',
   ],
   relatedTo: [
     {
@@ -18,6 +18,17 @@ export const meta: ComponentMeta = {
       relationship: 'Use Stack for content within PageShell',
     },
     {component: 'SideNav', kind: 'composition', relationship: 'Often placed alongside PageShell'},
+    {
+      component: 'page-with-sidenav',
+      kind: 'composition',
+      relationship:
+        'PageShell with a SideNav rail is the page-with-sidenav recipe — copy it, do not lay it out by hand',
+    },
+    {
+      component: 'admin-detail-page',
+      kind: 'composition',
+      relationship: 'PageShell with a record heading and Tabs is the admin-detail-page recipe',
+    },
   ],
   example: `<PageShell maxWidth="lg" padding="md" header={<Heading level={1}>Dashboard</Heading>}>
   <Stack gap="lg">

package/src/components/ScrollArea/ScrollArea.stories.tsx

@@ -2,6 +2,9 @@ import type {Meta, StoryObj} from '@storybook/react'
 import {expect} from 'storybook/test'
 import {css, html} from 'react-strict-dom'
 import {ScrollArea} from './ScrollArea'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
+import {typography} from '@duro-app/tokens/tokens/typography.css'
+import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
 
 const meta: Meta = {
   title: 'Components/ScrollArea',
@@ -15,19 +18,19 @@ const demoStyles = css.create({
     width: 300,
     borderWidth: 1,
     borderStyle: 'solid',
-    borderColor: '#333333',
-    borderRadius: 8,
+    borderColor: colors.border,
+    borderRadius: radii.sm,
   },
   item: {
-    paddingTop: 12,
-    paddingBottom: 12,
-    paddingLeft: 16,
-    paddingRight: 16,
+    paddingTop: spacing.ms,
+    paddingBottom: spacing.ms,
+    paddingLeft: spacing.md,
+    paddingRight: spacing.md,
     borderBottomWidth: 1,
     borderBottomStyle: 'solid',
-    borderBottomColor: '#1a1a1a',
-    fontSize: 14,
-    color: '#e5e5e5',
+    borderBottomColor: colors.bgCard,
+    fontSize: typography.fontSizeSm,
+    color: colors.text,
   },
 })
 

package/src/components/SideNav/SideNav.meta.ts

@@ -26,6 +26,11 @@ export const meta: ComponentMeta = {
       relationship: 'Tabs switch content in-place; SideNav navigates pages',
     },
     {component: 'PageShell', kind: 'composition', relationship: 'Often placed alongside PageShell'},
+    {
+      component: 'page-with-sidenav',
+      kind: 'composition',
+      relationship: 'SideNav beside routed content is the page-with-sidenav recipe',
+    },
   ],
   example: `<SideNav.Root defaultValue="identities">
   {/* Default: always-open sections. Nothing is a click away from being seen. */}

package/src/components/Spinner/Spinner.stories.tsx

@@ -2,6 +2,7 @@ import type {Meta, StoryObj} from '@storybook/react'
 import {expect} from 'storybook/test'
 import {css, html} from 'react-strict-dom'
 import {Spinner} from './Spinner'
+import {spacing} from '@duro-app/tokens/tokens/spacing.css'
 
 const meta: Meta<typeof Spinner> = {
   title: 'Components/Spinner',
@@ -41,7 +42,7 @@ export const CustomLabel: Story = {
 }
 
 const rowStyles = css.create({
-  row: {display: 'flex', gap: 24, alignItems: 'center'},
+  row: {display: 'flex', gap: spacing.lg, alignItems: 'center'},
 })
 
 export const AllSizes: Story = {

package/src/components/Stack/Stack.stories.tsx

@@ -2,8 +2,9 @@ import type {Meta, StoryObj} from '@storybook/react'
 import {css, html} from 'react-strict-dom'
 import {Stack} from './Stack'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
-import {spacing} from '@duro-app/tokens/tokens/spacing.css'
+import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
 import {SPACING_KEYS} from '@duro-app/tokens/keys'
+import {typography} from '@duro-app/tokens/tokens/typography.css'
 
 const meta: Meta<typeof Stack> = {
   title: 'Layout/Stack',
@@ -28,12 +29,12 @@ const localStyles = css.create({
     backgroundColor: colors.accent,
     color: colors.accentContrast,
     padding: spacing.sm,
-    borderRadius: 4,
+    borderRadius: radii.xs,
     textAlign: 'center',
-    fontSize: '0.875rem',
+    fontSize: typography.fontSizeSm,
   },
   label: {
-    fontSize: '0.75rem',
+    fontSize: typography.fontSizeXs,
     color: colors.textMuted,
   },
 })