@duro-app/ui 4.5.0 → 5.1.0

package/src/components/Checkbox/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: {
@@ -19,9 +21,9 @@ export const styles = css.create({
     cursor: 'not-allowed',
   },
   box: {
-    width: 18,
-    height: 18,
-    borderWidth: 1,
+    width: sizes.indicator,
+    height: sizes.indicator,
+    borderWidth: borders.hairline,
     borderStyle: 'solid',
     borderRadius: radii.xs,
     display: 'inline-flex',
@@ -47,12 +49,12 @@ export const styles = css.create({
   // rotated 45° into a tick. Pure CSS (RSD translates the transform string to
   // an RN transform), so no SVG / react-native-svg weight reaches web.
   checkmark: {
-    width: 5,
-    height: 9,
-    borderRightWidth: 2,
+    width: sizes.checkMarkW,
+    height: sizes.checkMarkH,
+    borderRightWidth: borders.strong,
     borderRightStyle: 'solid',
     borderRightColor: colors.accentContrast,
-    borderBottomWidth: 2,
+    borderBottomWidth: borders.strong,
     borderBottomStyle: 'solid',
     borderBottomColor: colors.accentContrast,
     transform: 'rotate(45deg)',
@@ -77,12 +79,9 @@ export const styles = css.create({
     backgroundColor: 'transparent',
     padding: 0,
   },
+  // Layered on visuallyHidden.base: a native input is also made transparent.
   input: {
-    position: 'absolute',
-    width: 1,
-    height: 1,
     opacity: 0,
-    overflow: 'hidden',
   },
   // RSD-native only honors display:'flex' (not 'inline-flex'). Layered on
   // native via `isNative` (on both .root and .box); web keeps inline-flex.

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

@@ -5,6 +5,7 @@ import {colors} from '@duro-app/tokens/tokens/colors.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'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
 
 const meta: Meta<typeof Cluster> = {
   title: 'Layout/Cluster',
@@ -41,7 +42,7 @@ const localStyles = css.create({
     whiteSpace: 'nowrap',
   },
   narrow: {
-    maxWidth: 300,
+    maxWidth: sizes.gridColMd,
   },
 })
 

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

@@ -1,14 +1,16 @@
 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 {sizes} from '@duro-app/tokens/tokens/sizes.css'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
 
 export const styles = css.create({
   base: {
-    width: 44,
-    height: 34,
-    padding: 2,
+    width: sizes.swatchW,
+    height: sizes.swatchH,
+    padding: microSpacing.px2,
     backgroundColor: colors.bg,
-    borderWidth: 1,
+    borderWidth: borders.hairline,
     borderStyle: 'solid',
     borderColor: {
       default: colors.border,
@@ -18,7 +20,7 @@ export const styles = css.create({
     cursor: 'pointer',
     outlineWidth: {
       default: 0,
-      ':focus-visible': 2,
+      ':focus-visible': borders.focusRing,
     },
     outlineStyle: {
       default: 'none',
@@ -28,7 +30,7 @@ export const styles = css.create({
       default: 'transparent',
       ':focus-visible': colors.accent,
     },
-    outlineOffset: 1,
+    outlineOffset: borders.focusOffsetSm,
   },
   invalid: {
     borderColor: colors.error,

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

@@ -2,6 +2,7 @@ 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 {duration, easing} from '@duro-app/tokens/tokens/motion.css'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
 
 export const styles = css.create({
   button: {
@@ -9,7 +10,7 @@ export const styles = css.create({
     alignItems: 'center',
     justifyContent: 'center',
     padding: spacing.sm,
-    borderWidth: 1,
+    borderWidth: borders.hairline,
     borderStyle: 'solid',
     borderColor: {
       default: colors.border,
@@ -25,9 +26,9 @@ export const styles = css.create({
     transitionProperty: 'background-color, border-color, color',
     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,
+    outlineOffset: borders.focusOffset,
   },
 })

package/src/components/Combobox/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: {
@@ -17,7 +19,7 @@ export const styles = css.create({
     paddingLeft: spacing.md,
     paddingRight: spacing.xs,
     backgroundColor: colors.bgCard,
-    borderWidth: 1,
+    borderWidth: borders.hairline,
     borderStyle: 'solid',
     borderColor: {
       default: colors.border,
@@ -71,14 +73,14 @@ export const styles = css.create({
     // ancestor with `overflow: hidden` or `transform` (e.g. inside a Dialog).
     position: 'fixed',
     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,
-    maxHeight: 200,
+    maxHeight: sizes.listMaxHSm,
     overflowY: 'auto',
     zIndex: 1050,
     // Re-enable pointer events: the portal mount is pointer-events: none so

package/src/components/DetailPanel/DetailPanel.stories.tsx

@@ -11,6 +11,8 @@ import {Inline} from '../Inline/Inline'
 import {Badge} from '../Badge/Badge'
 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'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
 
 const meta: Meta = {
   title: 'Components/DetailPanel',
@@ -22,8 +24,8 @@ type Story = StoryObj
 const layoutStyles = css.create({
   container: {
     display: 'flex',
-    height: 400,
-    borderWidth: 1,
+    height: sizes.dialogSm,
+    borderWidth: borders.hairline,
     borderStyle: 'solid',
     borderColor: colors.border,
   },
@@ -117,7 +119,7 @@ const tableStyles = css.create({
     paddingBottom: spacing.sm,
     paddingLeft: spacing.md,
     paddingRight: spacing.md,
-    borderBottomWidth: 1,
+    borderBottomWidth: borders.hairline,
     borderBottomStyle: 'solid',
     borderBottomColor: colors.border,
   },

package/src/components/DetailPanel/DetailPanel.tsx

@@ -17,7 +17,10 @@ import {styles} from './styles.css'
 
 const closeDurationMap = {
   instant: styles.closeDurationInstant,
+  minimal: styles.closeDurationMinimal,
+  quick: styles.closeDurationQuick,
   fast: styles.closeDurationFast,
+  brisk: styles.closeDurationBrisk,
   base: styles.closeDurationBase,
   slow: styles.closeDurationSlow,
 } as const satisfies Record<DurationToken, unknown>

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

@@ -1,8 +1,11 @@
 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 {radii, spacing} from '@duro-app/tokens/tokens/spacing.css'
 import {shadows} from '@duro-app/tokens/tokens/shadows.css'
 import {duration, easing} from '@duro-app/tokens/tokens/motion.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
+import {typography} from '@duro-app/tokens/tokens/typography.css'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
 
 // The "Apple ease" curves and the 280ms open live in the shared motion tokens
 // (easing.easeOut/easeIn, duration.slow). The close is duration.base, and the
@@ -62,7 +65,7 @@ export const styles = css.create({
     display: 'flex',
     flexDirection: 'column',
     backgroundColor: colors.bgCard,
-    borderLeftWidth: 1,
+    borderLeftWidth: borders.hairline,
     borderLeftStyle: 'solid',
     borderLeftColor: colors.border,
     boxShadow: shadows.sm,
@@ -70,8 +73,8 @@ export const styles = css.create({
   },
 
   // Content must maintain its target width even while wrapper is narrower
-  contentSm: {width: 360},
-  contentMd: {width: 480},
+  contentSm: {width: sizes.panelSm},
+  contentMd: {width: sizes.panelMd},
 
   // --- Content slide + fade animations ---
   slideIn: {
@@ -109,7 +112,10 @@ export const styles = css.create({
   // The closeAnimationDuration prop token drives both these and the unmount
   // timeout, so the exit animation can never race the unmount.
   closeDurationInstant: {animationDuration: duration.instant},
+  closeDurationMinimal: {animationDuration: duration.minimal},
+  closeDurationQuick: {animationDuration: duration.quick},
   closeDurationFast: {animationDuration: duration.fast},
+  closeDurationBrisk: {animationDuration: duration.brisk},
   closeDurationBase: {animationDuration: duration.base},
   closeDurationSlow: {animationDuration: duration.slow},
 
@@ -123,15 +129,15 @@ export const styles = css.create({
     paddingRight: spacing.lg,
     paddingBottom: spacing.lg,
     gap: spacing.md,
-    borderBottomWidth: 1,
+    borderBottomWidth: borders.hairline,
     borderBottomStyle: 'solid',
     borderBottomColor: colors.border,
   },
 
   // --- Title ---
   title: {
-    fontSize: 18,
-    fontWeight: 600,
+    fontSize: typography.fontSizeLg,
+    fontWeight: typography.fontWeightSemibold,
     lineHeight: 1.4,
     color: colors.text,
     margin: 0,
@@ -166,7 +172,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,
   },
@@ -176,9 +182,9 @@ export const styles = css.create({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    width: 32,
-    height: 32,
-    borderRadius: 8,
+    width: sizes.iconButton,
+    height: sizes.iconButton,
+    borderRadius: radii.sm,
     borderWidth: 0,
     backgroundColor: {
       default: 'transparent',

package/src/components/Dialog/Dialog.stories.tsx

@@ -12,6 +12,7 @@ import {Field} from '../Field/Field'
 import {Select} from '../Select/Select'
 import {spacing} from '@duro-app/tokens/tokens/spacing.css'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
 
 const meta: Meta = {
   title: 'Components/Dialog',
@@ -334,7 +335,7 @@ const barStyles = css.create({
   bar: {
     transform: 'translateZ(0)',
     padding: spacing.sm,
-    borderWidth: 1,
+    borderWidth: borders.hairline,
     borderStyle: 'solid',
     borderColor: colors.border,
   },

package/src/components/Dialog/Dialog.tsx

@@ -21,7 +21,10 @@ export type DialogSize = 'sm' | 'md' | 'lg'
 
 const closeDurationMap = {
   instant: styles.closeDurationInstant,
+  minimal: styles.closeDurationMinimal,
+  quick: styles.closeDurationQuick,
   fast: styles.closeDurationFast,
+  brisk: styles.closeDurationBrisk,
   base: styles.closeDurationBase,
   slow: styles.closeDurationSlow,
 } as const satisfies Record<DurationToken, unknown>

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

@@ -4,13 +4,15 @@ 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, 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({
   // --- Backdrop ---
   backdrop: {
     position: 'fixed',
     inset: 0,
-    backgroundColor: 'rgba(0, 0, 0, 0.4)',
+    backgroundColor: colors.scrim,
     zIndex: 1000,
     // Portaled into the ThemeProvider mount, which is pointer-events: none:
     // the backdrop must take clicks back (outside click dismisses).
@@ -62,7 +64,7 @@ export const styles = css.create({
     flexDirection: 'column',
     overflow: 'hidden',
     pointerEvents: 'auto',
-    borderWidth: 1,
+    borderWidth: borders.hairline,
     borderStyle: 'solid',
     borderColor: colors.border,
   },
@@ -103,14 +105,17 @@ export const styles = css.create({
   // The closeAnimationDuration prop token drives both these and the unmount
   // timeout, so the exit animation can never race the unmount.
   closeDurationInstant: {animationDuration: duration.instant},
+  closeDurationMinimal: {animationDuration: duration.minimal},
+  closeDurationQuick: {animationDuration: duration.quick},
   closeDurationFast: {animationDuration: duration.fast},
+  closeDurationBrisk: {animationDuration: duration.brisk},
   closeDurationBase: {animationDuration: duration.base},
   closeDurationSlow: {animationDuration: duration.slow},
 
   // --- Sizes ---
-  sm: {maxWidth: 400},
-  md: {maxWidth: 520},
-  lg: {maxWidth: 680},
+  sm: {maxWidth: sizes.dialogSm},
+  md: {maxWidth: sizes.dialogMd},
+  lg: {maxWidth: sizes.dialogLg},
 
   // --- Header ---
   header: {
@@ -163,7 +168,7 @@ export const styles = css.create({
     paddingLeft: spacing.lg,
     paddingRight: spacing.lg,
     paddingBottom: spacing.lg,
-    borderTopWidth: 1,
+    borderTopWidth: borders.hairline,
     borderTopStyle: 'solid',
     borderTopColor: colors.border,
   },
@@ -173,8 +178,8 @@ export const styles = css.create({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    width: 32,
-    height: 32,
+    width: sizes.iconButton,
+    height: sizes.iconButton,
     borderRadius: radii.sm,
     borderWidth: 0,
     backgroundColor: {
@@ -196,6 +201,6 @@ export const styles = css.create({
 
   // --- Reduced motion ---
   reducedMotion: {
-    animationDuration: '1ms',
+    animationDuration: duration.minimal,
   },
 })

package/src/components/DragDrop/DragDrop.stories.tsx

@@ -11,6 +11,7 @@ import {Tag} from '../Tag/Tag'
 import {Text} from '../Text/Text'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
 import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
 
 const meta: Meta<typeof DragDrop.Root> = {
   title: 'Interaction/DragDrop',
@@ -24,7 +25,7 @@ const localStyles = css.create({
   zone: {
     padding: spacing.md,
     minHeight: spacing.xxl,
-    borderWidth: 1,
+    borderWidth: borders.hairline,
     borderStyle: 'dashed',
     borderColor: colors.border,
     borderRadius: radii.sm,

package/src/components/DragDrop/DragDrop.tsx

@@ -11,6 +11,7 @@ import {
 import {html} from 'react-strict-dom'
 import {styles} from './styles.css'
 import {isNative} from '../../platform'
+import {visuallyHidden} from '../../styles/visually-hidden.css'
 
 // ---------------------------------------------------------------------------
 // DragDrop — move items between zones with one pointer, on mouse, pen and
@@ -358,7 +359,7 @@ function Root<T = unknown>({onDrop, announce, children}: DragDropRootProps<T>) {
           {drag.preview}
         </html.div>
       )}
-      <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>
     </RootContext.Provider>

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

@@ -52,11 +52,4 @@ export const styles = css.create({
     height,
     transform: `translate3d(${x}px, ${y}px, 0)`,
   }),
-  // Same visually-hidden recipe as TagGroup's live region.
-  liveRegion: {
-    position: 'absolute',
-    width: 1,
-    height: 1,
-    overflow: 'hidden',
-  },
 })

package/src/components/Drawer/Drawer.tsx

@@ -23,7 +23,10 @@ export type DrawerSize = 'sm' | 'md' | 'lg'
 
 const closeDurationMap = {
   instant: styles.closeDurationInstant,
+  minimal: styles.closeDurationMinimal,
+  quick: styles.closeDurationQuick,
   fast: styles.closeDurationFast,
+  brisk: styles.closeDurationBrisk,
   base: styles.closeDurationBase,
   slow: styles.closeDurationSlow,
 } as const satisfies Record<DurationToken, unknown>

package/src/components/Drawer/DrawerScroll.stories.tsx

@@ -5,7 +5,7 @@ import {Drawer} from './Drawer'
 import {ToggleGroup} from '../ToggleGroup/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'
 
 const meta: Meta = {
   title: 'Components/Drawer/Scroll',
@@ -282,11 +282,11 @@ export const CoarsePointerRows: Story = {
     await cdpSend('Emulation.setTouchEmulationEnabled', {enabled: true, maxTouchPoints: 1})
     await waitFor(() => expect(matchMedia('(pointer: coarse)').matches).toBe(true))
     const viewport = getViewport()
-    const expected = 3.5 * ROW_HEIGHT.coarse + 3 * 4 + 2 * 4
+    const expected = 3.5 * SIZES_PX.touchTarget + 3 * 4 + 2 * 4
     await waitFor(() => expect(Math.abs(viewport.clientHeight - expected)).toBeLessThanOrEqual(2))
     const toggle = viewport.querySelector('button')!.getBoundingClientRect()
-    // exact: Toggle's styles repeat ROW_HEIGHT, and a drift must fail here
-    await expect(Math.abs(toggle.height - ROW_HEIGHT.coarse)).toBeLessThanOrEqual(0.5)
-    await expect(toggle.width).toBeGreaterThanOrEqual(ROW_HEIGHT.coarse)
+    // exact: Toggle's styles read the same size tokens, and a drift must fail here
+    await expect(Math.abs(toggle.height - SIZES_PX.touchTarget)).toBeLessThanOrEqual(0.5)
+    await expect(toggle.width).toBeGreaterThanOrEqual(SIZES_PX.touchTarget)
   },
 }

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

@@ -4,13 +4,15 @@ 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, 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({
   // --- Backdrop ---
   backdrop: {
     position: 'fixed',
     inset: 0,
-    backgroundColor: 'rgba(0, 0, 0, 0.4)',
+    backgroundColor: colors.scrim,
     zIndex: 1000,
     // Portaled into the ThemeProvider mount, which is pointer-events: none:
     // the backdrop must take clicks back (outside click dismisses).
@@ -77,13 +79,13 @@ export const styles = css.create({
   panelHorizontal: {
     width: '100%',
     height: '100%',
-    borderLeftWidth: 1,
+    borderLeftWidth: borders.hairline,
     borderLeftStyle: 'solid',
     borderLeftColor: colors.border,
   },
   panelVertical: {
     width: '100%',
-    borderTopWidth: 1,
+    borderTopWidth: borders.hairline,
     borderTopStyle: 'solid',
     borderTopColor: colors.border,
     borderTopLeftRadius: radii.lg,
@@ -92,15 +94,15 @@ export const styles = css.create({
   },
   panelLeftBorder: {
     borderLeftWidth: 0,
-    borderRightWidth: 1,
+    borderRightWidth: borders.hairline,
     borderRightStyle: 'solid',
     borderRightColor: colors.border,
   },
 
   // --- Panel widths (horizontal anchors) ---
-  sm: {maxWidth: 360},
-  md: {maxWidth: 480},
-  lg: {maxWidth: 640},
+  sm: {maxWidth: sizes.panelSm},
+  md: {maxWidth: sizes.panelMd},
+  lg: {maxWidth: sizes.panelLg},
 
   // --- Slide animations: Right ---
   slideInRight: {
@@ -166,7 +168,10 @@ export const styles = css.create({
   // The closeAnimationDuration prop token drives both these and the unmount
   // timeout, so the exit animation can never race the unmount.
   closeDurationInstant: {animationDuration: duration.instant},
+  closeDurationMinimal: {animationDuration: duration.minimal},
+  closeDurationQuick: {animationDuration: duration.quick},
   closeDurationFast: {animationDuration: duration.fast},
+  closeDurationBrisk: {animationDuration: duration.brisk},
   closeDurationBase: {animationDuration: duration.base},
   closeDurationSlow: {animationDuration: duration.slow},
 
@@ -221,7 +226,7 @@ export const styles = css.create({
     paddingLeft: spacing.lg,
     paddingRight: spacing.lg,
     paddingBottom: spacing.lg,
-    borderTopWidth: 1,
+    borderTopWidth: borders.hairline,
     borderTopStyle: 'solid',
     borderTopColor: colors.border,
   },
@@ -231,8 +236,8 @@ export const styles = css.create({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    width: 32,
-    height: 32,
+    width: sizes.iconButton,
+    height: sizes.iconButton,
     borderRadius: radii.sm,
     borderWidth: 0,
     backgroundColor: {

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

@@ -11,6 +11,7 @@ import {Checkbox} from '../Checkbox/Checkbox'
 import {Stack} from '../Stack/Stack'
 import {Fieldset} from '../Fieldset/Fieldset'
 import {spacing} from '@duro-app/tokens/tokens/spacing.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
 
 const meta: Meta = {
   title: 'Components/Field',
@@ -70,8 +71,8 @@ export const WithError: Story = {
 }
 
 const stackStyles = css.create({
-  stack: {display: 'flex', flexDirection: 'column', gap: spacing.md, maxWidth: 400},
-  stackWide: {display: 'flex', flexDirection: 'column', gap: spacing.md, maxWidth: 600},
+  stack: {display: 'flex', flexDirection: 'column', gap: spacing.md, maxWidth: sizes.dialogSm},
+  stackWide: {display: 'flex', flexDirection: 'column', gap: spacing.md, maxWidth: sizes.pageSm},
 })
 
 export const FormExample: Story = {

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

@@ -2,6 +2,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 {typography} from '@duro-app/tokens/tokens/typography.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
 
 export const styles = css.create({
   root: {
@@ -21,7 +22,7 @@ export const styles = css.create({
     color: colors.text,
   },
   labelSide: {
-    minWidth: 120,
+    minWidth: sizes.labelMinW,
     paddingTop: spacing.sm,
     flexShrink: 0,
   },

package/src/components/Form/Form.stories.tsx

@@ -1,6 +1,6 @@
 import {useState} from 'react'
 import type {Meta, StoryObj} from '@storybook/react'
-import {expect, fn, userEvent, within} from 'storybook/test'
+import {expect, fn, userEvent} from 'storybook/test'
 import {css, html} from 'react-strict-dom'
 import {Schema} from 'effect'
 import {Form} from './Form'
@@ -9,6 +9,7 @@ import {Input} from '../Input/Input'
 import {Textarea} from '../Textarea/Textarea'
 import {Fieldset} from '../Fieldset/Fieldset'
 import {Button} from '../Button/Button'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
 
 const meta: Meta = {
   title: 'Components/Form',
@@ -48,8 +49,8 @@ const ProfileSchema = Schema.Struct({
 })
 
 const wrapStyles = css.create({
-  wrap: {maxWidth: 400},
-  wrapWide: {maxWidth: 600},
+  wrap: {maxWidth: sizes.dialogSm},
+  wrapWide: {maxWidth: sizes.pageSm},
 })
 
 // --- Stories ---

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

@@ -24,14 +24,14 @@ export const meta: ComponentMeta = {
       relationship: 'Grid layout="split" with a List and a Panel is the split-pane recipe',
     },
   ],
-  example: `// Split: list ≥ 240px beside a detail pane, one column below md
+  example: `// Split: list ≥ sizes.gridColSm (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">
+<Grid minColumnWidth="gridColMd" gap="md">
   <Card>A</Card>
   <Card>B</Card>
   <Card>C</Card>