@duro-app/ui 4.5.0 → 5.1.0

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

@@ -8,6 +8,7 @@ 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'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
 
 const meta: Meta<typeof Grid> = {
   title: 'Layout/Grid',
@@ -45,7 +46,7 @@ const localStyles = css.create({
   },
   frame: (width: number) => ({
     width,
-    borderWidth: 1,
+    borderWidth: borders.hairline,
     borderStyle: 'dashed',
     borderColor: colors.border,
   }),
@@ -74,7 +75,7 @@ export const FixedColumns: Story = {
 
 export const AutoFit: Story = {
   render: () => (
-    <Grid gap="md" minColumnWidth="200px">
+    <Grid gap="md" minColumnWidth="gridColSm">
       <Cell>Card A</Cell>
       <Cell>Card B</Cell>
       <Cell>Card C</Cell>

package/src/components/Grid/Grid.tsx

@@ -4,6 +4,7 @@ import {styles} from './styles.css'
 import {isNative} from '../../platform'
 import {cellBasis, cellPosition, columnWeights, gridTemplate, type GridColumns} from './columns'
 import type {SpacingToken} from '@duro-app/tokens/keys'
+import {resolveLength, type Length} from '../../shared/length'
 
 export type GridLayout = 'split' | 'split-wide'
 
@@ -13,10 +14,11 @@ interface GridProps {
    *  two-thirds split. Weights are the portable form of a track list — a CSS
    *  template string would be silently ignored on native. */
   columns?: GridColumns
-  /** Responsive auto-fit: as many columns of at least this width as fit.
-   *  Wins over `columns` when both are set. On native this approximates to
-   *  cells of that minimum width that grow and wrap. */
-  minColumnWidth?: string
+  /** Responsive auto-fit: as many columns of at least this width as fit — a
+   *  size token key (`"gridColMd"`) or a relative length. Wins over `columns`
+   *  when both are set. On native this approximates to cells of that minimum
+   *  width that grow and wrap. */
+  minColumnWidth?: Length
   /**
    * A named responsive layout. `split` is list/detail (1:2, list ≥ 240px),
    * `split-wide` is nav/content (1:3, nav ≥ 280px). Each collapses to one
@@ -101,7 +103,7 @@ export function Grid({gap = 'md', columns, minColumnWidth, layout, children}: Gr
   const columnStyle = layout
     ? layoutMap[layout]
     : minColumnWidth
-      ? styles.autoFit(minColumnWidth)
+      ? styles.autoFit(resolveLength(minColumnWidth))
       : typeof columns === 'number'
         ? columnsMap[columns]
         : columns
@@ -136,7 +138,7 @@ function NativeGrid({gap = 'md', columns, minColumnWidth, children}: GridProps)
     return (
       <html.div style={[styles.nativeRow, gapMap[gap]]}>
         {items.map((child, index) => (
-          <html.div key={index} style={styles.nativeMinCell(minColumnWidth)}>
+          <html.div key={index} style={styles.nativeMinCell(resolveLength(minColumnWidth))}>
             {child}
           </html.div>
         ))}

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

@@ -1,6 +1,7 @@
 import {css} from 'react-strict-dom'
 import {spacing} from '@duro-app/tokens/tokens/spacing.css'
 import {breakpoints} from '@duro-app/tokens/tokens/breakpoints.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.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
@@ -22,7 +23,7 @@ export const styles = css.create({
   col4: {gridTemplateColumns: 'repeat(4, 1fr)'},
   col5: {gridTemplateColumns: 'repeat(5, 1fr)'},
   col6: {gridTemplateColumns: 'repeat(6, 1fr)'},
-  autoFit: (minWidth: string) => ({
+  autoFit: (minWidth: string | number) => ({
     gridTemplateColumns: `repeat(auto-fill, minmax(${minWidth}, 1fr))`,
   }),
   // Hosts the @container query for a named layout. A container cannot query
@@ -40,13 +41,13 @@ export const styles = css.create({
   split: {
     gridTemplateColumns: {
       default: '1fr',
-      [`@container (min-width: ${SPLIT_BP})`]: 'minmax(240px, 1fr) minmax(0, 2fr)',
+      [`@container (min-width: ${SPLIT_BP})`]: `minmax(${sizes.gridColSm}, 1fr) minmax(0, 2fr)`,
     },
   },
   splitWide: {
     gridTemplateColumns: {
       default: '1fr',
-      [`@container (min-width: ${SPLIT_WIDE_BP})`]: 'minmax(280px, 1fr) minmax(0, 3fr)',
+      [`@container (min-width: ${SPLIT_WIDE_BP})`]: `minmax(${sizes.gridColMd}, 1fr) minmax(0, 3fr)`,
     },
   },
   // Weighted columns: `[1, 2]` → `1fr 2fr` (see columns.ts).
@@ -86,7 +87,7 @@ export const styles = css.create({
   // 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) => ({
+  nativeMinCell: (minWidth: string | number) => ({
     flexBasis: minWidth,
     flexGrow: 1,
     boxSizing: 'border-box',

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

@@ -3,6 +3,7 @@ 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'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
 
 const meta: Meta<typeof Input> = {
   title: 'Components/Input',
@@ -83,7 +84,7 @@ export const Disabled: 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/Input/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,
     transitionProperty: 'border-color',
@@ -24,7 +25,7 @@ export const styles = css.create({
     transitionTimingFunction: easing.standard,
     outlineWidth: {
       default: 0,
-      ':focus-visible': 2,
+      ':focus-visible': borders.focusRing,
     },
     outlineStyle: {
       default: 'none',
@@ -36,7 +37,7 @@ export const styles = css.create({
     },
     outlineOffset: {
       default: 0,
-      ':focus-visible': 1,
+      ':focus-visible': borders.focusOffsetSm,
     },
   },
   default: {

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

@@ -5,6 +5,7 @@ import {InputGroup} from './InputGroup'
 import {Input} from '../Input/Input'
 import {Icon} from '../Icon/Icon'
 import {spacing} from '@duro-app/tokens/tokens/spacing.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
 
 const meta: Meta = {
   title: 'Components/InputGroup',
@@ -115,8 +116,8 @@ export const StandaloneInput: Story = {
 }
 
 const layoutStyles = css.create({
-  container: {maxWidth: 400},
-  stack: {display: 'flex', flexDirection: 'column', gap: spacing.md, maxWidth: 400},
+  container: {maxWidth: sizes.dialogSm},
+  stack: {display: 'flex', flexDirection: 'column', gap: spacing.md, maxWidth: sizes.dialogSm},
 })
 
 export const AllVariants: Story = {

package/src/components/InputGroup/InputGroup.tsx

@@ -4,6 +4,7 @@ import {css, html} from 'react-strict-dom'
 import {isNative} from '../../platform'
 import {InputGroupContext} from './InputGroupContext'
 import {styles} from './styles.css'
+import {resolveLength, type Length} from '../../shared/length'
 
 // --- Root ---
 interface RootProps {
@@ -29,8 +30,9 @@ interface AddonProps {
   position?: 'start' | 'end'
   onClick?: () => void
   disabled?: boolean
-  /** Optional minimum width to prevent layout shift (e.g. Copy → Copied!) */
-  minWidth?: number | string
+  /** Optional minimum width to prevent layout shift (e.g. Copy → Copied!): a
+   *  size token key or a relative length. */
+  minWidth?: Length
   children: ReactNode
 }
 
@@ -42,7 +44,7 @@ function Addon({position = 'end', onClick, disabled, minWidth, children}: AddonP
     positionStyle,
     onClick && !disabled && styles.addonClickable,
     disabled && styles.addonDisabled,
-    minWidth != null && dynamicStyles.minWidth(minWidth),
+    minWidth != null && dynamicStyles.minWidth(resolveLength(minWidth)),
   ]
 
   if (onClick) {

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

@@ -3,12 +3,13 @@ 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({
   wrapper: {
     display: 'flex',
     alignItems: 'stretch',
-    borderWidth: 1,
+    borderWidth: borders.hairline,
     borderStyle: 'solid',
     borderColor: {
       default: colors.border,
@@ -35,12 +36,12 @@ export const styles = css.create({
     borderWidth: 0,
   },
   addonStart: {
-    borderRightWidth: 1,
+    borderRightWidth: borders.hairline,
     borderRightStyle: 'solid',
     borderRightColor: colors.border,
   },
   addonEnd: {
-    borderLeftWidth: 1,
+    borderLeftWidth: borders.hairline,
     borderLeftStyle: 'solid',
     borderLeftColor: colors.border,
   },

package/src/components/LinkButton/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: {
@@ -46,7 +47,7 @@ export const styles = css.create({
       default: 'transparent',
       ':hover': colors.bgCardHover,
     },
-    borderWidth: 1,
+    borderWidth: borders.hairline,
     borderStyle: 'solid',
     borderColor: colors.border,
     color: colors.textMuted,

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

@@ -8,6 +8,8 @@ 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'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
 
 const meta: Meta = {
   title: 'Components/List',
@@ -73,8 +75,8 @@ export const Default: Story = {
 
 const narrowContainer = css.create({
   box: {
-    maxWidth: 360,
-    borderWidth: 1,
+    maxWidth: sizes.panelSm,
+    borderWidth: borders.hairline,
     borderStyle: 'solid',
     borderColor: colors.border,
     borderRadius: radii.sm,

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

@@ -1,7 +1,9 @@
 import {css} from 'react-strict-dom'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
-import {spacing} from '@duro-app/tokens/tokens/spacing.css'
+import {microSpacing, spacing} from '@duro-app/tokens/tokens/spacing.css'
 import {typography} from '@duro-app/tokens/tokens/typography.css'
+import {duration} from '@duro-app/tokens/tokens/motion.css'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
 
 export const styles = css.create({
   // --- Root ---
@@ -21,7 +23,7 @@ export const styles = css.create({
     paddingBottom: spacing.sm,
     paddingLeft: spacing.ms,
     paddingRight: spacing.ms,
-    borderBottomWidth: 1,
+    borderBottomWidth: borders.hairline,
     borderBottomStyle: 'solid',
     borderBottomColor: colors.border,
     backgroundColor: {
@@ -29,7 +31,7 @@ export const styles = css.create({
       ':hover': colors.bgCardHover,
     },
     transitionProperty: 'background-color',
-    transitionDuration: '120ms',
+    transitionDuration: duration.quick,
     cursor: 'default',
   },
   itemSelected: {
@@ -51,7 +53,7 @@ export const styles = css.create({
     flex: 1,
     display: 'flex',
     flexDirection: 'column',
-    gap: 2,
+    gap: microSpacing.px2,
     minWidth: 0,
   },
 

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

@@ -4,6 +4,8 @@ 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 {duration} 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: {
@@ -25,7 +27,7 @@ export const styles = css.create({
       default: 'transparent',
       ':hover': colors.bgCardHover,
     },
-    borderWidth: 1,
+    borderWidth: borders.hairline,
     borderStyle: 'solid',
     borderColor: colors.border,
     borderRadius: radii.sm,
@@ -47,14 +49,14 @@ export const styles = css.create({
     left: 0,
     marginTop: spacing.xs,
     backgroundColor: colors.bgCard,
-    borderWidth: 1,
+    borderWidth: borders.hairline,
     borderStyle: 'solid',
     borderColor: colors.border,
     borderRadius: radii.sm,
     boxShadow: shadows.md,
     paddingTop: spacing.xs,
     paddingBottom: spacing.xs,
-    minWidth: 160,
+    minWidth: sizes.popupMinW,
     zIndex: 50,
   },
   popupEnd: {
@@ -84,7 +86,7 @@ export const styles = css.create({
     height: 0,
     marginTop: spacing.xs,
     marginBottom: spacing.xs,
-    borderTopWidth: 1,
+    borderTopWidth: borders.hairline,
     borderTopStyle: 'solid',
     borderTopColor: colors.border,
   },

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

@@ -1,6 +1,7 @@
 import {css} from 'react-strict-dom'
 import {layoutSpacing} from '@duro-app/tokens/tokens/layout-spacing.css'
 import {spacing} from '@duro-app/tokens/tokens/spacing.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
 
 export const styles = css.create({
   root: {
@@ -12,9 +13,9 @@ export const styles = css.create({
     marginRight: 'auto',
   },
   // Max-width presets
-  maxSm: {maxWidth: 600},
-  maxMd: {maxWidth: 800},
-  maxLg: {maxWidth: 1200},
+  maxSm: {maxWidth: sizes.pageSm},
+  maxMd: {maxWidth: sizes.pageMd},
+  maxLg: {maxWidth: sizes.pageLg},
   // Horizontal padding
   padSm: {paddingLeft: layoutSpacing.containerSm, paddingRight: layoutSpacing.containerSm},
   padMd: {paddingLeft: layoutSpacing.containerMd, paddingRight: layoutSpacing.containerMd},

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

@@ -1,6 +1,7 @@
 import {css} from 'react-strict-dom'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
 import {spacing} from '@duro-app/tokens/tokens/spacing.css'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
 
 export const styles = css.create({
   root: {
@@ -9,7 +10,7 @@ export const styles = css.create({
     backgroundColor: colors.bgCard,
   },
   bordered: {
-    borderWidth: 1,
+    borderWidth: borders.hairline,
     borderStyle: 'solid',
     borderColor: colors.border,
   },
@@ -23,7 +24,7 @@ export const styles = css.create({
     paddingRight: spacing.lg,
     paddingBottom: spacing.lg,
     gap: spacing.md,
-    borderBottomWidth: 1,
+    borderBottomWidth: borders.hairline,
     borderBottomStyle: 'solid',
     borderBottomColor: colors.border,
   },
@@ -53,7 +54,7 @@ export const styles = css.create({
     paddingBottom: spacing.md,
     paddingLeft: spacing.lg,
     paddingRight: spacing.lg,
-    borderTopWidth: 1,
+    borderTopWidth: borders.hairline,
     borderTopStyle: 'solid',
     borderTopColor: colors.border,
   },

package/src/components/Popover/Popover.stories.tsx

@@ -10,6 +10,8 @@ import {Field} from '../Field/Field'
 import {Input} from '../Input/Input'
 import {Select} from '../Select/Select'
 import {Stack} from '../Stack/Stack'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
 
 const meta: Meta = {
   title: 'Components/Popover',
@@ -24,8 +26,8 @@ const page = () => within(document.body)
 const styles = css.create({
   stage: {
     position: 'relative',
-    height: 320,
-    borderWidth: 1,
+    height: sizes.panelSm,
+    borderWidth: borders.hairline,
     borderStyle: 'dashed',
     borderColor: colors.border,
     padding: spacing.md,
@@ -34,9 +36,9 @@ const styles = css.create({
     position: 'absolute',
     top: 120,
     left: 160,
-    width: 120,
+    width: sizes.labelMinW,
     padding: spacing.sm,
-    borderWidth: 1,
+    borderWidth: borders.hairline,
     borderStyle: 'solid',
     borderColor: colors.accent,
   },

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

@@ -4,6 +4,7 @@ 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 {duration} from '@duro-app/tokens/tokens/motion.css'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
 
 export const styles = css.create({
   trigger: {
@@ -21,7 +22,7 @@ export const styles = css.create({
       default: 'transparent',
       ':hover': colors.bgCardHover,
     },
-    borderWidth: 1,
+    borderWidth: borders.hairline,
     borderStyle: 'solid',
     borderColor: colors.border,
     borderRadius: radii.sm,
@@ -35,7 +36,7 @@ export const styles = css.create({
     left: 0,
     boxSizing: 'border-box',
     backgroundColor: colors.bgCard,
-    borderWidth: 1,
+    borderWidth: borders.hairline,
     borderStyle: 'solid',
     borderColor: colors.border,
     borderRadius: radii.sm,

package/src/components/RadioGroup/RadioGroup.tsx

@@ -3,6 +3,7 @@ import {html} from 'react-strict-dom'
 import {useControllableValue} from '../../hooks/useControllableValue'
 import {styles} from './styles.css'
 import {useFieldGroupLabelling} from '../Field/FieldContext'
+import {visuallyHidden} from '../../styles/visually-hidden.css'
 
 // --- Context ---
 
@@ -100,7 +101,7 @@ function Item({value, disabled: itemDisabled = false, children}: ItemProps) {
         checked={isChecked}
         disabled={isDisabled}
         onChange={() => onSelect(value)}
-        style={styles.input}
+        style={[visuallyHidden.base, styles.input]}
       />
       <html.span
         style={[styles.circle, isChecked ? styles.circleChecked : styles.circleUnchecked]}

package/src/components/RadioGroup/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: {
@@ -27,9 +29,9 @@ export const styles = css.create({
     cursor: 'not-allowed',
   },
   circle: {
-    width: 18,
-    height: 18,
-    borderWidth: 1,
+    width: sizes.indicator,
+    height: sizes.indicator,
+    borderWidth: borders.hairline,
     borderStyle: 'solid',
     borderRadius: radii.full,
     display: 'inline-flex',
@@ -52,16 +54,13 @@ export const styles = css.create({
     borderColor: colors.accent,
   },
   dot: {
-    width: 8,
-    height: 8,
+    width: sizes.indicatorDot,
+    height: sizes.indicatorDot,
     borderRadius: radii.full,
     backgroundColor: colors.accent,
   },
+  // Layered on visuallyHidden.base: a native input is also made transparent.
   input: {
-    position: 'absolute',
-    width: 1,
-    height: 1,
     opacity: 0,
-    overflow: 'hidden',
   },
 })

package/src/components/ScrollArea/ScrollArea.meta.ts

@@ -15,7 +15,7 @@ export const meta: ComponentMeta = {
     required: ['Root', 'Viewport', 'Content', 'Scrollbar', 'Thumb'],
   },
   example: `<ScrollArea.Root>
-  <ScrollArea.Viewport maxHeight={300}>
+  <ScrollArea.Viewport maxHeight="listMaxH">
     <ScrollArea.Content>
       {/* Long content here */}
     </ScrollArea.Content>

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

@@ -5,6 +5,8 @@ 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'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
 
 const meta: Meta = {
   title: 'Components/ScrollArea',
@@ -15,8 +17,8 @@ type Story = StoryObj
 
 const demoStyles = css.create({
   container: {
-    width: 300,
-    borderWidth: 1,
+    width: sizes.gridColMd,
+    borderWidth: borders.hairline,
     borderStyle: 'solid',
     borderColor: colors.border,
     borderRadius: radii.sm,
@@ -26,7 +28,7 @@ const demoStyles = css.create({
     paddingBottom: spacing.ms,
     paddingLeft: spacing.md,
     paddingRight: spacing.md,
-    borderBottomWidth: 1,
+    borderBottomWidth: borders.hairline,
     borderBottomStyle: 'solid',
     borderBottomColor: colors.bgCard,
     fontSize: typography.fontSizeSm,
@@ -40,7 +42,7 @@ export const Default: Story = {
   render: () => (
     <html.div style={demoStyles.container}>
       <ScrollArea.Root>
-        <ScrollArea.Viewport maxHeight={300}>
+        <ScrollArea.Viewport maxHeight="listMaxH">
           <ScrollArea.Content>
             {items.map((item) => (
               <html.div key={item} style={demoStyles.item}>
@@ -66,7 +68,7 @@ export const ShortContent: Story = {
   render: () => (
     <html.div style={demoStyles.container}>
       <ScrollArea.Root>
-        <ScrollArea.Viewport maxHeight={300}>
+        <ScrollArea.Viewport maxHeight="listMaxH">
           <ScrollArea.Content>
             <html.div style={demoStyles.item}>Only one item</html.div>
             <html.div style={demoStyles.item}>Two items</html.div>

package/src/components/ScrollArea/ScrollArea.tsx

@@ -3,6 +3,7 @@ import {html} from 'react-strict-dom'
 import {styles} from './styles.css'
 import {ScrollAreaContext, useScrollArea} from './ScrollAreaContext'
 import {useScrollAreaRoot} from './useScrollAreaRoot'
+import {resolveLength, type Length} from '../../shared/length'
 
 // --- Root ---
 
@@ -24,7 +25,7 @@ function Root({children}: RootProps) {
 
 interface ViewportProps {
   children: ReactNode
-  maxHeight?: number | string
+  maxHeight?: Length
   /** Extra styles for the viewport (e.g. a pointer-aware max height). */
   style?: ComponentProps<typeof html.div>['style']
   /** A roving-focus group owns the keyboard: drop the viewport's own tab stop
@@ -43,7 +44,11 @@ function Viewport({children, maxHeight, style, rovingOwner = false}: ViewportPro
       tabIndex={rovingOwner ? undefined : 0}
       role={rovingOwner ? undefined : 'region'}
       aria-label={rovingOwner ? undefined : 'Scrollable content'}
-      style={[styles.viewport, maxHeight != null && styles.viewportMaxHeight(maxHeight), style]}
+      style={[
+        styles.viewport,
+        maxHeight != null && styles.viewportMaxHeight(resolveLength(maxHeight)),
+        style,
+      ]}
     >
       {children}
     </html.div>

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

@@ -1,7 +1,8 @@
 import {css} from 'react-strict-dom'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
-import {radii} from '@duro-app/tokens/tokens/spacing.css'
+import {microSpacing, radii} from '@duro-app/tokens/tokens/spacing.css'
 import {duration, easing} from '@duro-app/tokens/tokens/motion.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
 
 export const styles = css.create({
   root: {
@@ -34,21 +35,21 @@ export const styles = css.create({
     top: 0,
     right: 0,
     bottom: 0,
-    width: 8,
+    width: sizes.scrollbar,
     flexDirection: 'column',
-    paddingTop: 2,
-    paddingBottom: 2,
-    paddingRight: 2,
+    paddingTop: microSpacing.px2,
+    paddingBottom: microSpacing.px2,
+    paddingRight: microSpacing.px2,
   },
   scrollbarHorizontal: {
     left: 0,
     right: 0,
     bottom: 0,
-    height: 8,
+    height: sizes.scrollbar,
     flexDirection: 'row',
-    paddingLeft: 2,
-    paddingRight: 2,
-    paddingBottom: 2,
+    paddingLeft: microSpacing.px2,
+    paddingRight: microSpacing.px2,
+    paddingBottom: microSpacing.px2,
   },
   scrollbarHidden: {
     opacity: 0,