@duro-app/ui 2.0.1 → 3.1.0

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

@@ -1,5 +1,16 @@
 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 — measured on the split's OWN
+// container, not the viewport. A split nested in another split (a list/detail
+// board inside a nav/content shell) has far less room than the window: at a
+// 768px viewport the shell leaves ~408px for its content column, and a
+// viewport-keyed inner split would still open there and squeeze its detail
+// pane to ~150px. Container queries collapse each split on what it actually
+// has. defineConsts strings, inlined into the @container text at build time.
+const SPLIT_WIDE_BP = breakpoints.md // 280px rail + real content
+const SPLIT_BP = breakpoints.sm // 240px list + ≥ 384px detail
 
 export const styles = css.create({
   base: {
@@ -14,6 +25,34 @@ export const styles = css.create({
   autoFit: (minWidth: string) => ({
     gridTemplateColumns: `repeat(auto-fill, minmax(${minWidth}, 1fr))`,
   }),
+  // Hosts the @container query for a named layout. A container cannot query
+  // itself, so the grid sits inside this wrapper (the Table.rootContainer
+  // pattern). Only `layout` grids get it: counted and weighted grids keep
+  // their DOM exactly as before.
+  splitContainer: {
+    containerType: 'inline-size',
+  },
+  // Asymmetric list/detail splits: a bounded first column, the rest for the
+  // detail; one column when the container is narrower than the 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',
+      [`@container (min-width: ${SPLIT_BP})`]: 'minmax(240px, 1fr) minmax(0, 2fr)',
+    },
+  },
+  splitWide: {
+    gridTemplateColumns: {
+      default: '1fr',
+      [`@container (min-width: ${SPLIT_WIDE_BP})`]: 'minmax(280px, 1fr) minmax(0, 3fr)',
+    },
+  },
+  // Weighted columns: `[1, 2]` → `1fr 2fr` (see columns.ts).
+  template: (tracks: string) => ({
+    gridTemplateColumns: tracks,
+  }),
   gapXs: {gap: spacing.xs},
   gapSm: {gap: spacing.sm},
   gapMs: {gap: spacing.ms},
@@ -22,4 +61,50 @@ export const styles = css.create({
   gapXl: {gap: spacing.xl},
   gapXxl: {gap: spacing.xxl},
   gapXxxl: {gap: spacing.xxxl},
+
+  // --- native only (see NativeGrid in Grid.tsx) -----------------------------
+  // React Native honours `display: 'flex'` only, and RSD gives it web flex
+  // semantics, so the row direction is explicit.
+  nativeRow: {
+    display: 'flex',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'stretch',
+    // A definite width so percentage bases resolve in Yoga's measure pass;
+    // against an auto width the line breaks come out wrong and the container
+    // under-reports its height (verified on the iOS simulator).
+    width: '100%',
+  },
+  // border-box is explicit: react-strict-dom mirrors the web default
+  // (content-box) on native, which adds the gap padding on top of the basis
+  // and overflows the row so every cell wraps.
+  nativeCell: (basis: string) => ({
+    flexBasis: basis,
+    flexShrink: 0,
+    boxSizing: 'border-box',
+  }),
+  // Auto-fit approximation: start at the minimum width, grow to fill. flexGrow
+  // is fine here: this style is native-only, so RSD-web's forced flex-grow: 0
+  // never applies.
+  nativeMinCell: (minWidth: string) => ({
+    flexBasis: minWidth,
+    flexGrow: 1,
+    boxSizing: 'border-box',
+  }),
+  cellGapLeftXs: {paddingLeft: spacing.xs},
+  cellGapLeftSm: {paddingLeft: spacing.sm},
+  cellGapLeftMs: {paddingLeft: spacing.ms},
+  cellGapLeftMd: {paddingLeft: spacing.md},
+  cellGapLeftLg: {paddingLeft: spacing.lg},
+  cellGapLeftXl: {paddingLeft: spacing.xl},
+  cellGapLeftXxl: {paddingLeft: spacing.xxl},
+  cellGapLeftXxxl: {paddingLeft: spacing.xxxl},
+  cellGapTopXs: {paddingTop: spacing.xs},
+  cellGapTopSm: {paddingTop: spacing.sm},
+  cellGapTopMs: {paddingTop: spacing.ms},
+  cellGapTopMd: {paddingTop: spacing.md},
+  cellGapTopLg: {paddingTop: spacing.lg},
+  cellGapTopXl: {paddingTop: spacing.xl},
+  cellGapTopXxl: {paddingTop: spacing.xxl},
+  cellGapTopXxxl: {paddingTop: spacing.xxxl},
 })

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,
   },
 })

package/src/components/StatusIcon/StatusIcon.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 {StatusIcon} from './StatusIcon'
+import {spacing} from '@duro-app/tokens/tokens/spacing.css'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
+import {typography} from '@duro-app/tokens/tokens/typography.css'
 
 const meta: Meta<typeof StatusIcon> = {
   title: 'Components/StatusIcon',
@@ -47,9 +50,13 @@ export const CustomSize: Story = {
 }
 
 const gridStyles = css.create({
-  grid: {display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))', gap: 24},
-  cell: {display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8},
-  label: {fontSize: '0.875rem', color: '#888'},
+  grid: {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
+    gap: spacing.lg,
+  },
+  cell: {display: 'flex', flexDirection: 'column', alignItems: 'center', gap: spacing.sm},
+  label: {fontSize: typography.fontSizeSm, color: colors.textMuted},
 })
 
 export const AllIcons: Story = {
@@ -66,7 +73,7 @@ export const AllIcons: Story = {
 }
 
 const rowStyles = css.create({
-  row: {display: 'flex', gap: 24, alignItems: 'center'},
+  row: {display: 'flex', gap: spacing.lg, alignItems: 'center'},
 })
 
 export const AllVariants: Story = {

package/src/components/Switch/Switch.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 {Switch} from './Switch'
+import {spacing} from '@duro-app/tokens/tokens/spacing.css'
 
 const meta: Meta<typeof Switch> = {
   title: 'Components/Switch',
@@ -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/Table/Table.stories.tsx

@@ -27,6 +27,7 @@ import {
 import {useDataTable} from './useDataTable'
 import {Combobox} from '../Combobox/Combobox'
 import {spacing} from '@duro-app/tokens/tokens/spacing.css'
+import {typography} from '@duro-app/tokens/tokens/typography.css'
 
 const meta: Meta = {
   title: 'Components/Table',
@@ -326,8 +327,12 @@ export const WithCheckboxes: Story = {
 }
 
 const storyStyles = css.create({
-  stack: {display: 'flex', flexDirection: 'column', gap: 24},
-  label: {color: colors.textMuted, fontSize: '0.875rem', fontWeight: 600},
+  stack: {display: 'flex', flexDirection: 'column', gap: spacing.lg},
+  label: {
+    color: colors.textMuted,
+    fontSize: typography.fontSizeSm,
+    fontWeight: typography.fontWeightSemibold,
+  },
 })
 
 export const AllVariants: Story = {

package/src/components/Tabs/Tabs.meta.ts

@@ -21,6 +21,11 @@ export const meta: ComponentMeta = {
       kind: 'contrast',
       relationship: 'Tabs switch content in-place; SideNav navigates between pages',
     },
+    {
+      component: 'admin-detail-page',
+      kind: 'composition',
+      relationship: 'Tabs as the facets of one record is the admin-detail-page recipe',
+    },
   ],
   example: `<Tabs.Root defaultValue="general">
   <Tabs.List>

package/src/components/Tag/Tag.stories.tsx

@@ -2,6 +2,8 @@ import type {Meta, StoryObj} from '@storybook/react'
 import {expect, fn} from 'storybook/test'
 import {css, html} from 'react-strict-dom'
 import {Tag} from './Tag'
+import {spacing} from '@duro-app/tokens/tokens/spacing.css'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
 
 const meta: Meta<typeof Tag> = {
   title: 'Components/Tag',
@@ -47,10 +49,16 @@ export const Small: Story = {
 }
 
 const layoutStyles = 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},
   // Narrow column that a long identifier tag would overflow without `wrap`.
-  narrowCol: {width: 120, borderWidth: 1, borderStyle: 'solid', borderColor: '#333', padding: 8},
+  narrowCol: {
+    width: 120,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: colors.border,
+    padding: spacing.sm,
+  },
 })
 
 const LONG_CAP = 'lldap.group.member.remove'

package/src/components/Textarea/Textarea.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 {Textarea} from './Textarea'
+import {spacing} from '@duro-app/tokens/tokens/spacing.css'
 
 const meta: Meta<typeof Textarea> = {
   title: 'Components/Textarea',
@@ -59,7 +60,7 @@ export const CustomRows: 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/ThemeProvider/ThemeProvider.stories.tsx

@@ -4,7 +4,7 @@ import {expect} from 'storybook/test'
 import {css, html} from 'react-strict-dom'
 import {ThemeProvider, type ThemeName} from './ThemeProvider'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
-import {radii} from '@duro-app/tokens/tokens/spacing.css'
+import {radii, spacing} from '@duro-app/tokens/tokens/spacing.css'
 import {typography} from '@duro-app/tokens/tokens/typography.css'
 import {shadows} from '@duro-app/tokens/tokens/shadows.css'
 
@@ -18,26 +18,26 @@ type Story = StoryObj<typeof ThemeProvider>
 
 const sampleStyles = css.create({
   container: {
-    padding: 24,
+    padding: spacing.lg,
     backgroundColor: colors.bg,
     color: colors.text,
     borderRadius: radii.md,
     fontFamily: typography.fontFamily,
   },
   card: {
-    padding: 16,
+    padding: spacing.md,
     backgroundColor: colors.bgCard,
     borderWidth: 1,
     borderStyle: 'solid',
     borderColor: colors.border,
     borderRadius: radii.md,
     boxShadow: shadows.md,
-    marginBottom: 12,
+    marginBottom: spacing.ms,
   },
   title: {
     fontSize: typography.fontSizeLg,
     fontWeight: typography.fontWeightSemibold,
-    marginBottom: 8,
+    marginBottom: spacing.sm,
   },
   muted: {
     color: colors.textMuted,
@@ -49,7 +49,7 @@ const sampleStyles = css.create({
   },
   row: {
     display: 'flex',
-    gap: 16,
+    gap: spacing.md,
     flexWrap: 'wrap',
   },
   swatch: {
@@ -126,7 +126,7 @@ export const HighContrast: Story = {
 const sideBySideStyles = css.create({
   wrapper: {
     display: 'flex',
-    gap: 24,
+    gap: spacing.lg,
     flexWrap: 'wrap',
   },
   column: {
@@ -136,8 +136,8 @@ const sideBySideStyles = css.create({
   label: {
     fontSize: typography.fontSizeSm,
     fontWeight: typography.fontWeightSemibold,
-    marginBottom: 8,
-    color: '#888',
+    marginBottom: spacing.sm,
+    color: colors.textMuted,
   },
 })
 

package/src/components/Toast/Toast.stories.tsx

@@ -2,10 +2,17 @@ import type {Meta, StoryObj} from '@storybook/react'
 import {expect, userEvent, waitFor} from 'storybook/test'
 import {css, html} from 'react-strict-dom'
 import {ToastProvider, useToast} from './ToastProvider'
+import {radii, spacing} from '@duro-app/tokens/tokens/spacing.css'
 
 const s = css.create({
-  row: {display: 'flex', flexDirection: 'row', gap: 8, flexWrap: 'wrap'},
-  btn: {padding: 8, borderRadius: 6, borderWidth: 1, borderStyle: 'solid', cursor: 'pointer'},
+  row: {display: 'flex', flexDirection: 'row', gap: spacing.sm, flexWrap: 'wrap'},
+  btn: {
+    padding: spacing.sm,
+    borderRadius: radii.sm,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    cursor: 'pointer',
+  },
 })
 
 function Triggers() {

package/src/components/Toggle/Toggle.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 {Toggle} from './Toggle'
+import {spacing} from '@duro-app/tokens/tokens/spacing.css'
 
 const meta: Meta<typeof Toggle> = {
   title: 'Components/Toggle',
@@ -59,7 +60,7 @@ export const Small: Story = {
 }
 
 const stackStyles = css.create({
-  stack: {display: 'flex', gap: 8},
+  stack: {display: 'flex', gap: spacing.sm},
 })
 
 export const AllVariants: Story = {

package/src/components/ToggleGroup/ToggleGroup.stories.tsx

@@ -3,6 +3,7 @@ import {expect, fn} from 'storybook/test'
 import {css, html} from 'react-strict-dom'
 import {ToggleGroup} from './ToggleGroup'
 import {Toggle} from '../Toggle/Toggle'
+import {spacing} from '@duro-app/tokens/tokens/spacing.css'
 
 const meta: Meta<typeof ToggleGroup> = {
   title: 'Components/ToggleGroup',
@@ -125,7 +126,7 @@ export const Vertical: Story = {
 }
 
 const stackStyles = css.create({
-  stack: {display: 'flex', flexDirection: 'column', gap: 16},
+  stack: {display: 'flex', flexDirection: 'column', gap: spacing.md},
 })
 
 export const AllVariants: Story = {

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -3,6 +3,7 @@ import {expect} from 'storybook/test'
 import {css, html} from 'react-strict-dom'
 import {Tooltip} from './Tooltip'
 import {Badge} from '../Badge/Badge'
+import {spacing} from '@duro-app/tokens/tokens/spacing.css'
 
 const meta: Meta = {
   title: 'Components/Tooltip',
@@ -31,8 +32,8 @@ const centerStyles = css.create({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    padding: 80,
-    gap: 24,
+    padding: spacing.xxxl,
+    gap: spacing.lg,
   },
 })