@duro-app/ui 4.5.0 → 5.0.0

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

@@ -1,7 +1,8 @@
 import {css} from 'react-strict-dom'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
-import {spacing, 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 {borders} from '@duro-app/tokens/tokens/borders.css'
 
 export const styles = css.create({
   base: {
@@ -11,15 +12,15 @@ export const styles = css.create({
     fontFamily: typography.fontFamily,
     fontWeight: typography.fontWeightNormal,
     lineHeight: 1,
-    borderRadius: 4,
+    borderRadius: radii.xs,
     whiteSpace: 'nowrap',
     minWidth: 0,
-    borderWidth: 1,
+    borderWidth: borders.hairline,
     borderStyle: 'solid',
     borderColor: colors.border,
     outlineWidth: {
       default: 0,
-      ':focus-visible': 2,
+      ':focus-visible': borders.focusRing,
     },
     outlineStyle: {
       default: 'none',
@@ -31,7 +32,7 @@ export const styles = css.create({
     },
     outlineOffset: {
       default: 0,
-      ':focus-visible': 1,
+      ':focus-visible': borders.focusOffsetSm,
     },
   },
   sizeMd: {

package/src/components/TagGroup/TagGroup.tsx

@@ -13,6 +13,7 @@ import {useControllableValue} from '../../hooks/useControllableValue'
 import {useFieldContext} from '../Field/FieldContext'
 import {TagGroupContext, type TagGroupContextValue} from './TagGroupContext'
 import {styles} from './styles.css'
+import {visuallyHidden} from '../../styles/visually-hidden.css'
 
 // ---------------------------------------------------------------------------
 // Local context accessor (non-throwing, returns null)
@@ -149,7 +150,7 @@ function Root({
         {name && values.map((v) => <html.input key={v} type="hidden" name={name} value={v} />)}
 
         {/* Live region for screen reader announcements */}
-        <html.div role="status" aria-live="polite" aria-atomic style={styles.liveRegion}>
+        <html.div role="status" aria-live="polite" aria-atomic style={visuallyHidden.base}>
           {announcement}
         </html.div>
       </html.div>

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

@@ -3,6 +3,8 @@ import {colors} from '@duro-app/tokens/tokens/colors.css'
 import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
 import {typography} from '@duro-app/tokens/tokens/typography.css'
 import {duration, easing} from '@duro-app/tokens/tokens/motion.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
 
 export const styles = css.create({
   root: {
@@ -31,7 +33,7 @@ export const styles = css.create({
   },
   input: {
     width: '100%',
-    borderWidth: 1,
+    borderWidth: borders.hairline,
     borderStyle: 'solid',
     borderColor: {
       default: colors.border,
@@ -47,13 +49,13 @@ export const styles = css.create({
     paddingBottom: spacing.sm,
     paddingLeft: spacing.sm,
     paddingRight: spacing.sm,
-    minHeight: 40,
+    minHeight: sizes.controlLg,
     transitionProperty: 'border-color',
     transitionDuration: duration.fast,
     transitionTimingFunction: easing.standard,
     outlineWidth: {
       default: 0,
-      ':focus': 2,
+      ':focus': borders.focusRing,
     },
     outlineStyle: {
       default: 'none',
@@ -65,7 +67,7 @@ export const styles = css.create({
     },
     outlineOffset: {
       default: 0,
-      ':focus': 1,
+      ':focus': borders.focusOffsetSm,
     },
     boxSizing: 'border-box',
   },
@@ -75,10 +77,4 @@ export const styles = css.create({
       ':focus': colors.error,
     },
   },
-  liveRegion: {
-    position: 'absolute',
-    width: 1,
-    height: 1,
-    overflow: 'hidden',
-  },
 })

package/src/components/Textarea/Textarea.stories.tsx

@@ -3,6 +3,7 @@ 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'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
 
 const meta: Meta<typeof Textarea> = {
   title: 'Components/Textarea',
@@ -76,7 +77,7 @@ export const CustomRows: Story = {
 }
 
 const stackStyles = css.create({
-  stack: {display: 'flex', flexDirection: 'column', gap: spacing.ms, maxWidth: 320},
+  stack: {display: 'flex', flexDirection: 'column', gap: spacing.ms, maxWidth: sizes.panelSm},
 })
 
 export const AllVariants: Story = {

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

@@ -3,6 +3,7 @@ import {colors} from '@duro-app/tokens/tokens/colors.css'
 import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
 import {typography} from '@duro-app/tokens/tokens/typography.css'
 import {duration, easing} from '@duro-app/tokens/tokens/motion.css'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
 
 export const styles = css.create({
   base: {
@@ -16,7 +17,7 @@ export const styles = css.create({
     lineHeight: typography.lineHeight,
     color: colors.text,
     backgroundColor: colors.bg,
-    borderWidth: 1,
+    borderWidth: borders.hairline,
     borderStyle: 'solid',
     borderRadius: radii.sm,
     resize: 'vertical' as const,
@@ -25,7 +26,7 @@ export const styles = css.create({
     transitionTimingFunction: easing.standard,
     outlineWidth: {
       default: 0,
-      ':focus-visible': 2,
+      ':focus-visible': borders.focusRing,
     },
     outlineStyle: {
       default: 'none',
@@ -37,7 +38,7 @@ export const styles = css.create({
     },
     outlineOffset: {
       default: 0,
-      ':focus-visible': 1,
+      ':focus-visible': borders.focusOffsetSm,
     },
   },
   default: {

package/src/components/ThemeProvider/ThemeProvider.stories.tsx

@@ -7,6 +7,8 @@ import {colors} from '@duro-app/tokens/tokens/colors.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'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
 
 const meta: Meta<typeof ThemeProvider> = {
   title: 'Theme/ThemeProvider',
@@ -27,7 +29,7 @@ const sampleStyles = css.create({
   card: {
     padding: spacing.md,
     backgroundColor: colors.bgCard,
-    borderWidth: 1,
+    borderWidth: borders.hairline,
     borderStyle: 'solid',
     borderColor: colors.border,
     borderRadius: radii.md,
@@ -53,10 +55,10 @@ const sampleStyles = css.create({
     flexWrap: 'wrap',
   },
   swatch: {
-    width: 48,
-    height: 48,
+    width: sizes.iconXxl,
+    height: sizes.iconXxl,
     borderRadius: radii.sm,
-    borderWidth: 1,
+    borderWidth: borders.hairline,
     borderStyle: 'solid',
     borderColor: colors.border,
   },
@@ -131,7 +133,7 @@ const sideBySideStyles = css.create({
   },
   column: {
     flex: 1,
-    minWidth: 280,
+    minWidth: sizes.gridColMd,
   },
   label: {
     fontSize: typography.fontSizeSm,

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

@@ -3,13 +3,14 @@ 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'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
 
 const s = css.create({
   row: {display: 'flex', flexDirection: 'row', gap: spacing.sm, flexWrap: 'wrap'},
   btn: {
     padding: spacing.sm,
     borderRadius: radii.sm,
-    borderWidth: 1,
+    borderWidth: borders.hairline,
     borderStyle: 'solid',
     cursor: 'pointer',
   },

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

@@ -1,9 +1,11 @@
 import {css} from 'react-strict-dom'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
-import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
+import {microSpacing, 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'
-import {easing} from '@duro-app/tokens/tokens/motion.css'
+import {duration, easing} from '@duro-app/tokens/tokens/motion.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
 
 const enter = css.keyframes({
   from: {opacity: 0, transform: 'translateY(10px)'},
@@ -31,17 +33,17 @@ export const styles = css.create({
     pointerEvents: 'auto',
     boxSizing: 'border-box',
     width: '100%',
-    maxWidth: 440,
+    maxWidth: sizes.toastMaxW,
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'flex-start',
     gap: spacing.sm,
     padding: spacing.md,
     borderRadius: radii.sm,
-    borderWidth: 1,
+    borderWidth: borders.hairline,
     borderStyle: 'solid',
     borderColor: colors.border,
-    borderLeftWidth: 3,
+    borderLeftWidth: borders.accent,
     backgroundColor: colors.bgCard,
     boxShadow: shadows.lg,
     color: colors.text,
@@ -51,7 +53,7 @@ export const styles = css.create({
       default: enter,
       '@media (prefers-reduced-motion: reduce)': 'none',
     },
-    animationDuration: '160ms',
+    animationDuration: duration.brisk,
     animationTimingFunction: easing.easeOut,
   },
   success: {borderLeftColor: colors.successBorder},
@@ -63,7 +65,7 @@ export const styles = css.create({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    paddingTop: 1,
+    paddingTop: microSpacing.px1,
   },
   iconSuccess: {color: colors.successText},
   iconError: {color: colors.errorText},
@@ -74,14 +76,14 @@ export const styles = css.create({
     minWidth: 0,
     display: 'flex',
     flexDirection: 'column',
-    gap: 2,
+    gap: microSpacing.px2,
   },
   message: {
     color: colors.text,
   },
   action: {
     alignSelf: 'flex-start',
-    marginTop: 2,
+    marginTop: microSpacing.px2,
     padding: 0,
     borderWidth: 0,
     backgroundColor: 'transparent',
@@ -91,9 +93,9 @@ export const styles = css.create({
     textDecorationLine: 'underline',
     cursor: 'pointer',
     outlineStyle: {default: 'none', ':focus-visible': 'solid'},
-    outlineWidth: 2,
+    outlineWidth: borders.focusRing,
     outlineColor: colors.accent,
-    outlineOffset: 2,
+    outlineOffset: borders.focusOffset,
     borderRadius: radii.sm,
   },
   closeBtn: {
@@ -101,7 +103,7 @@ export const styles = css.create({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    padding: 2,
+    padding: microSpacing.px2,
     marginTop: -1,
     borderWidth: 0,
     backgroundColor: 'transparent',
@@ -109,8 +111,8 @@ export const styles = css.create({
     cursor: 'pointer',
     borderRadius: radii.sm,
     outlineStyle: {default: 'none', ':focus-visible': 'solid'},
-    outlineWidth: 2,
+    outlineWidth: borders.focusRing,
     outlineColor: colors.accent,
-    outlineOffset: 1,
+    outlineOffset: borders.focusOffsetSm,
   },
 })

package/src/components/Toggle/Toggle.meta.ts

@@ -2,7 +2,7 @@ import type {ComponentMeta} from '../component-meta'
 
 export const meta: ComponentMeta = {
   description:
-    'Toggle button with pressed/unpressed state. Works standalone or within ToggleGroup for multi/single selection. Under a coarse pointer (touch) every Toggle is at least 44×44px; in a wrapping ToggleGroup each keeps its own border and a fixed row height.',
+    'Toggle button with pressed/unpressed state. Works standalone or within ToggleGroup for multi/single selection. Under a coarse pointer (touch) every Toggle is at least sizes.touchTarget (44px) square; in a wrapping ToggleGroup each keeps its own border and a fixed row height.',
   whenToUse: [
     'Toolbar buttons that toggle on/off (bold, italic, grid view)',
     'Within ToggleGroup for selecting from visible options',

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

@@ -3,13 +3,15 @@ import {colors} from '@duro-app/tokens/tokens/colors.css'
 import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
 import {typography} from '@duro-app/tokens/tokens/typography.css'
 import {duration, easing} from '@duro-app/tokens/tokens/motion.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
 
 export const styles = css.create({
   base: {
     display: 'inline-flex',
     alignItems: 'center',
     justifyContent: 'center',
-    borderWidth: 1,
+    borderWidth: borders.hairline,
     borderStyle: 'solid',
     cursor: 'pointer',
     fontFamily: typography.fontFamily,
@@ -17,12 +19,12 @@ export const styles = css.create({
     transitionProperty: 'background-color, border-color, color, opacity',
     transitionDuration: duration.fast,
     transitionTimingFunction: easing.standard,
-    outlineWidth: {default: 0, ':focus-visible': 2},
+    outlineWidth: {default: 0, ':focus-visible': borders.focusRing},
     outlineStyle: 'solid',
     outlineColor: colors.accent,
-    outlineOffset: 2,
-    minWidth: {default: null, '@media (pointer: coarse)': 44},
-    minHeight: {default: null, '@media (pointer: coarse)': 44},
+    outlineOffset: borders.focusOffset,
+    minWidth: {default: null, '@media (pointer: coarse)': sizes.touchTarget},
+    minHeight: {default: null, '@media (pointer: coarse)': sizes.touchTarget},
   },
   sizeDefault: {
     padding: `${spacing.sm} ${spacing.md}`,
@@ -36,15 +38,15 @@ export const styles = css.create({
     borderRadius: radii.sm,
     gap: spacing.xs,
   },
-  // wrapped toggles: a fixed block size per size, 44px under a coarse pointer.
-  // Must equal ROW_HEIGHT in ./rowHeight (StyleX cannot import it here).
+  // wrapped toggles: a fixed block size per size, the touch target under a
+  // coarse pointer. ToggleGroup's maxRows arithmetic reads the same tokens.
   wrappedDefault: {
     boxSizing: 'border-box',
-    height: {default: 39, '@media (pointer: coarse)': 44},
+    height: {default: sizes.controlMd, '@media (pointer: coarse)': sizes.touchTarget},
   },
   wrappedSmall: {
     boxSizing: 'border-box',
-    height: {default: 28, '@media (pointer: coarse)': 44},
+    height: {default: sizes.controlSm, '@media (pointer: coarse)': sizes.touchTarget},
   },
   unpressed: {
     backgroundColor: {
@@ -68,7 +70,7 @@ export const styles = css.create({
   grouped: {
     borderWidth: 0,
     borderRadius: 0,
-    borderRightWidth: 1,
+    borderRightWidth: borders.hairline,
     borderRightStyle: 'solid',
     // Override any borderColor set by pressed state — dividers always use border token
     borderColor: colors.border,

package/src/components/ToggleGroup/ToggleGroup.meta.ts

@@ -6,7 +6,7 @@ export const meta: ComponentMeta = {
   whenToUse: [
     'Visible option set where user picks one or more (view mode, filter categories)',
     'Segmented control pattern',
-    'A visible grid of icon choices: wrap + maxRows (rows scroll past maxRows, one tab stop with arrow keys, 44px touch targets)',
+    'A visible grid of icon choices: wrap + maxRows (rows scroll past maxRows, one tab stop with arrow keys, sizes.touchTarget (44px) touch targets)',
   ],
   whenNotToUse: [
     'Dropdown selection — use Select',

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

@@ -4,8 +4,9 @@ import {css, html} from 'react-strict-dom'
 import {ToggleGroup} from './ToggleGroup'
 import {Toggle} from '../Toggle/Toggle'
 import {Icon, type IconName} from '../Icon'
-import {ROW_HEIGHT} from '../Toggle/rowHeight'
+import {SIZES_PX} from '@duro-app/tokens/keys'
 import {spacing} from '@duro-app/tokens/tokens/spacing.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
 
 const meta: Meta<typeof ToggleGroup> = {
   title: 'Components/ToggleGroup',
@@ -207,7 +208,7 @@ const ICON_NAMES: IconName[] = [
 ]
 
 const iconStyles = css.create({
-  frame: {width: 320},
+  frame: {width: sizes.panelSm},
 })
 
 function IconChoices({
@@ -268,10 +269,10 @@ export const FiveIcons: Story = {
   render: () => <IconChoices names={ICON_NAMES.slice(0, 5)} pressed={ICON_NAMES[0]} />,
   play: async ({canvas}) => {
     const group = canvas.getByRole('toolbar')
-    await expect(group.getBoundingClientRect().height).toBe(ROW_HEIGHT.small)
-    // exact: Toggle's styles repeat ROW_HEIGHT, and a drift must fail here
+    await expect(group.getBoundingClientRect().height).toBe(SIZES_PX.controlSm)
+    // exact: Toggle's styles read the same size tokens, and a drift must fail here
     const toggle = canvas.getAllByRole('button')[0].getBoundingClientRect()
-    await expect(Math.abs(toggle.height - ROW_HEIGHT.small)).toBeLessThanOrEqual(0.5)
+    await expect(Math.abs(toggle.height - SIZES_PX.controlSm)).toBeLessThanOrEqual(0.5)
   },
 }
 
@@ -311,6 +312,6 @@ export const DefaultSizeRows: Story = {
   ),
   play: async ({canvas}) => {
     const toggle = canvas.getAllByRole('button')[0].getBoundingClientRect()
-    await expect(Math.abs(toggle.height - ROW_HEIGHT.default)).toBeLessThanOrEqual(0.5)
+    await expect(Math.abs(toggle.height - SIZES_PX.controlMd)).toBeLessThanOrEqual(0.5)
   },
 }

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

@@ -1,13 +1,14 @@
 import {css} from 'react-strict-dom'
-import {ROW_HEIGHT} from '../Toggle/rowHeight'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
 import {radii, spacing} from '@duro-app/tokens/tokens/spacing.css'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
 
 export const styles = css.create({
   root: {
     display: 'inline-flex',
     borderRadius: radii.sm,
-    borderWidth: 1,
+    borderWidth: borders.hairline,
     borderStyle: 'solid',
     borderColor: colors.border,
     overflow: 'hidden',
@@ -30,14 +31,14 @@ export const styles = css.create({
   // sizes itself (max, not fixed). Row heights match the wrapped Toggles.
   maxRowsSmall: (rows: number) => ({
     maxHeight: {
-      default: `calc((${rows} + 0.5) * ${ROW_HEIGHT.small}px + ${rows} * ${spacing.xs} + 2 * ${spacing.xs})`,
-      '@media (pointer: coarse)': `calc((${rows} + 0.5) * ${ROW_HEIGHT.coarse}px + ${rows} * ${spacing.xs} + 2 * ${spacing.xs})`,
+      default: `calc((${rows} + 0.5) * ${sizes.controlSm} + ${rows} * ${spacing.xs} + 2 * ${spacing.xs})`,
+      '@media (pointer: coarse)': `calc((${rows} + 0.5) * ${sizes.touchTarget} + ${rows} * ${spacing.xs} + 2 * ${spacing.xs})`,
     },
   }),
   maxRowsDefault: (rows: number) => ({
     maxHeight: {
-      default: `calc((${rows} + 0.5) * ${ROW_HEIGHT.default}px + ${rows} * ${spacing.xs} + 2 * ${spacing.xs})`,
-      '@media (pointer: coarse)': `calc((${rows} + 0.5) * ${ROW_HEIGHT.coarse}px + ${rows} * ${spacing.xs} + 2 * ${spacing.xs})`,
+      default: `calc((${rows} + 0.5) * ${sizes.controlMd} + ${rows} * ${spacing.xs} + 2 * ${spacing.xs})`,
+      '@media (pointer: coarse)': `calc((${rows} + 0.5) * ${sizes.touchTarget} + ${rows} * ${spacing.xs} + 2 * ${spacing.xs})`,
     },
   }),
   vertical: {

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

@@ -3,6 +3,7 @@ import {colors} from '@duro-app/tokens/tokens/colors.css'
 import {spacing, radii} 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'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
 
 export const styles = css.create({
   root: {
@@ -22,7 +23,7 @@ export const styles = css.create({
     fontSize: typography.fontSizeXs,
     lineHeight: typography.lineHeight,
     borderRadius: radii.sm,
-    borderWidth: 1,
+    borderWidth: borders.hairline,
     borderStyle: 'solid',
     borderColor: colors.border,
     boxShadow: shadows.md,

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

@@ -1,8 +1,10 @@
 import {css} from 'react-strict-dom'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
-import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
+import {microSpacing, radii, spacing} from '@duro-app/tokens/tokens/spacing.css'
 import {typography} from '@duro-app/tokens/tokens/typography.css'
 import {duration, easing} from '@duro-app/tokens/tokens/motion.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
 
 export const styles = css.create({
   root: {
@@ -32,8 +34,8 @@ export const styles = css.create({
     display: 'flex',
     alignItems: 'center',
     gap: spacing.xs,
-    paddingTop: '5px',
-    paddingBottom: '5px',
+    paddingTop: microSpacing.px5,
+    paddingBottom: microSpacing.px5,
     paddingRight: spacing.sm,
     fontFamily: typography.fontFamily,
     fontSize: typography.fontSizeSm,
@@ -53,10 +55,10 @@ export const styles = css.create({
     paddingLeft: `calc(${spacing.sm} + ${Math.max(0, level - 1)} * ${spacing.lg})`,
   }),
   rowFocused: {
-    outlineWidth: 2,
+    outlineWidth: borders.focusRing,
     outlineStyle: 'solid',
     outlineColor: colors.accent,
-    outlineOffset: -2,
+    outlineOffset: `calc(-1 * ${borders.focusOffset})`,
   },
   rowSelected: {
     color: colors.accent,
@@ -67,7 +69,7 @@ export const styles = css.create({
     display: 'inline-flex',
     alignItems: 'center',
     justifyContent: 'center',
-    width: spacing.md,
+    width: sizes.glyphMd,
     flexShrink: 0,
     color: colors.textMuted,
     transitionProperty: 'transform',

package/src/components/VirtualTable/VirtualTable.stories.tsx

@@ -3,10 +3,11 @@ import {expect, fn, waitFor} from 'storybook/test'
 import {createColumnHelper} from '@tanstack/react-table'
 import {css, html} from 'react-strict-dom'
 import {VirtualTable} from './VirtualTable'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
 
 const storyStyles = css.create({
   // Phone-width wrapper: below VirtualTable's 640px stackBelow default.
-  narrow: {width: 400},
+  narrow: {width: sizes.dialogSm},
 })
 
 interface Item {
@@ -49,7 +50,7 @@ export const SmallList: Story = {
 export const Virtualized: Story = {
   args: {
     data: makeData(500),
-    maxHeight: 300,
+    maxHeight: 'listMaxH',
     rangeLabel: ({from, to, total}) => `${from}-${to} of ${total}`,
     onVisiblePageChange: fn(),
   },
@@ -69,7 +70,7 @@ export const Virtualized: Story = {
 export const ScrollReportsPage: Story = {
   args: {
     data: makeData(500),
-    maxHeight: 300,
+    maxHeight: 'listMaxH',
     pageSize: 50,
     rangeLabel: ({page, pages}) => `page ${page}/${pages}`,
     onVisiblePageChange: fn(),

package/src/components/VirtualTable/VirtualTable.tsx

@@ -13,6 +13,8 @@ import {
 import {useVirtualizer} from '@tanstack/react-virtual'
 import {breakpointsPx, type Breakpoint} from '@duro-app/tokens/tokens/breakpoints.css'
 import {styles} from './styles.css'
+import {SIZES_PX} from '@duro-app/tokens/keys'
+import {resolveLength, type Length} from '../../shared/length'
 
 // Measure + commit before paint on the client; no-op-safe on the server.
 const useIsoLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect
@@ -56,7 +58,7 @@ interface VirtualTableProps<TData> {
   /** Estimated row height for the virtualizer. Default 44. */
   estimateRowHeight?: number
   /** Max height of the scroll viewport once virtualized. Default '70vh'. */
-  maxHeight?: number | string
+  maxHeight?: Length
   /** Render every row (no windowing) at or below this count. Default 150. */
   virtualizeThreshold?: number
   /**
@@ -94,7 +96,7 @@ export function VirtualTable<TData>({
   onVisiblePageChange,
   rangeLabel,
   pageSize = 50,
-  estimateRowHeight = 44,
+  estimateRowHeight = SIZES_PX.touchTarget,
   maxHeight = '70vh',
   virtualizeThreshold = 150,
   stackBelow = 'sm',
@@ -288,7 +290,7 @@ export function VirtualTable<TData>({
         role="table"
         style={[
           stacked ? styles.stackScroll : styles.scroll,
-          virtualize && styles.scrollMax(maxHeight),
+          virtualize && styles.scrollMax(resolveLength(maxHeight)),
         ]}
       >
         {stacked ? null : (