@duro-app/ui 4.5.0 → 5.0.0

package/src/components/Select/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: {
@@ -23,7 +25,7 @@ export const styles = css.create({
     fontSize: typography.fontSizeSm,
     color: colors.text,
     backgroundColor: colors.bgCard,
-    borderWidth: 1,
+    borderWidth: borders.hairline,
     borderStyle: 'solid',
     borderColor: {
       default: colors.border,
@@ -64,15 +66,15 @@ export const styles = css.create({
     // ancestor with `overflow: hidden` / `transform` (notably 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,
-    minWidth: 120,
-    maxHeight: 280,
+    minWidth: sizes.labelMinW,
+    maxHeight: sizes.listMaxH,
     overflowY: 'auto',
     zIndex: 1050,
     // Re-enable pointer events: the portal mount is pointer-events: none.

package/src/components/SideNav/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: {
@@ -80,8 +82,8 @@ export const styles = css.create({
     display: 'flex',
     alignItems: 'center',
     gap: spacing.sm,
-    paddingTop: '6px',
-    paddingBottom: '6px',
+    paddingTop: microSpacing.px6,
+    paddingBottom: microSpacing.px6,
     paddingLeft: spacing.md,
     paddingRight: spacing.md,
     fontFamily: typography.fontFamily,
@@ -104,7 +106,7 @@ export const styles = css.create({
     textAlign: 'left' as const,
     outlineWidth: {
       default: 0,
-      ':focus-visible': 2,
+      ':focus-visible': borders.focusRing,
     },
     outlineStyle: {
       default: 'none',
@@ -125,7 +127,7 @@ export const styles = css.create({
     position: 'absolute',
     left: 0,
     top: '50%',
-    width: '3px',
+    width: sizes.navMarkerW,
     height: 0,
     transform: 'translateY(-50%)',
     borderTopRightRadius: radii.full,
@@ -136,15 +138,15 @@ export const styles = css.create({
     transitionTimingFunction: easing.standard,
   },
   markerActive: {
-    height: '18px',
+    height: sizes.navMarkerH,
   },
   itemIcon: {
     display: 'inline-flex',
     alignItems: 'center',
     justifyContent: 'center',
     flexShrink: 0,
-    width: '18px',
-    height: '18px',
+    width: sizes.indicator,
+    height: sizes.indicator,
   },
   itemLabel: {
     flexGrow: 1,

package/src/components/Spinner/Spinner.tsx

@@ -1,5 +1,6 @@
 import {html} from 'react-strict-dom'
 import {styles} from './styles.css'
+import {visuallyHidden} from '../../styles/visually-hidden.css'
 
 export type SpinnerSize = 'sm' | 'md' | 'lg'
 
@@ -18,7 +19,7 @@ export function Spinner({size = 'md', label = 'Loading'}: SpinnerProps) {
   return (
     <html.div role="status" style={styles.root}>
       <html.div style={[styles.spinner, sizeMap[size]]} aria-hidden />
-      <html.span style={styles.srOnly}>{label}</html.span>
+      <html.span style={[visuallyHidden.base, styles.srOnly]}>{label}</html.span>
     </html.div>
   )
 }

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

@@ -1,5 +1,8 @@
 import {css} from 'react-strict-dom'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
+import {easing} from '@duro-app/tokens/tokens/motion.css'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
 
 const spin = css.keyframes({
   '0%': {transform: 'rotate(0deg)'},
@@ -19,29 +22,26 @@ export const styles = css.create({
     borderTopColor: colors.accent,
     animationName: spin,
     animationDuration: '0.6s',
-    animationTimingFunction: 'linear',
+    animationTimingFunction: easing.linear,
     animationIterationCount: 'infinite',
   },
   sm: {
-    width: 16,
-    height: 16,
-    borderWidth: 2,
+    width: sizes.spinnerSm,
+    height: sizes.spinnerSm,
+    borderWidth: borders.strong,
   },
   md: {
-    width: 24,
-    height: 24,
-    borderWidth: 2,
+    width: sizes.spinnerMd,
+    height: sizes.spinnerMd,
+    borderWidth: borders.strong,
   },
   lg: {
-    width: 40,
-    height: 40,
-    borderWidth: 3,
+    width: sizes.spinnerLg,
+    height: sizes.spinnerLg,
+    borderWidth: borders.accent,
   },
+  // Layered on visuallyHidden.base.
   srOnly: {
-    position: 'absolute',
-    width: 1,
-    height: 1,
-    overflow: 'hidden',
     clip: 'rect(0, 0, 0, 0)',
   },
 })

package/src/components/Switch/Switch.tsx

@@ -3,6 +3,7 @@ import {html} from 'react-strict-dom'
 import {isNative} from '../../platform'
 import {useControllableValue} from '../../hooks/useControllableValue'
 import {styles} from './styles.css'
+import {visuallyHidden} from '../../styles/visually-hidden.css'
 
 interface SwitchProps {
   /** Controlled checked state. */
@@ -67,7 +68,7 @@ export function Switch({
           onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
             onCheckedChange?.(e.target.checked)
           }}
-          style={styles.input}
+          style={[visuallyHidden.base, styles.input]}
         />
       )}
       <html.button

package/src/components/Switch/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: {
@@ -20,8 +22,8 @@ export const styles = css.create({
   },
   track: {
     position: 'relative',
-    width: 36,
-    height: 20,
+    width: sizes.switchTrackW,
+    height: sizes.switchTrackH,
     borderRadius: radii.full,
     borderWidth: 0,
     padding: 0,
@@ -29,10 +31,10 @@ export const styles = css.create({
     transitionProperty: 'background-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,
     flexShrink: 0,
   },
   trackUnchecked: {
@@ -49,25 +51,23 @@ export const styles = css.create({
   },
   thumb: {
     position: 'absolute',
-    top: 2,
-    left: 2,
-    width: 16,
-    height: 16,
+    top: microSpacing.px2,
+    left: microSpacing.px2,
+    width: sizes.switchThumb,
+    height: sizes.switchThumb,
     borderRadius: radii.full,
-    backgroundColor: '#fff',
+    backgroundColor: colors.fixedLight,
     transitionProperty: 'transform',
     transitionDuration: duration.fast,
     transitionTimingFunction: easing.standard,
   },
   thumbChecked: {
-    transform: 'translateX(16px)',
+    // Travel: the track less the thumb and both insets.
+    transform: `translateX(calc(${sizes.switchTrackW} - ${sizes.switchThumb} - 2 * ${microSpacing.px2}))`,
   },
+  // 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` so the flex container applies; web keeps inline-flex.

package/src/components/Table/ColumnFilter.tsx

@@ -2,18 +2,19 @@ import type {Column} from '@tanstack/react-table'
 import {html} from 'react-strict-dom'
 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 {borders} from '@duro-app/tokens/tokens/borders.css'
 
 const styles = css.create({
   input: {
     width: '100%',
-    paddingTop: 2,
-    paddingBottom: 2,
+    paddingTop: microSpacing.px2,
+    paddingBottom: microSpacing.px2,
     paddingLeft: spacing.xs,
     paddingRight: spacing.xs,
     marginTop: spacing.xs,
-    borderWidth: 1,
+    borderWidth: borders.hairline,
     borderStyle: 'solid',
     borderColor: colors.border,
     borderRadius: radii.xs,

package/src/components/Table/FromTanstack.tsx

@@ -12,6 +12,7 @@ import {
 } from './Table'
 import {Pagination} from './Pagination'
 import {SortChip, type SortValue} from './SortChip'
+import type {Length} from '../../shared/length'
 
 // ColumnMeta is augmented in `./tanstack-augmentation` so the types
 // register independently of whether the consumer imports FromTanstack.
@@ -24,7 +25,7 @@ interface FromTanstackBaseProps<TData> {
   readonly responsive?: boolean
   /** Min width (px) each flexible column keeps before the table scrolls
    *  horizontally. Forwarded to Table.Root — see its `minColumnWidth`. */
-  readonly minColumnWidth?: number
+  readonly minColumnWidth?: Length
   /** Render a SortChip above the grid (stack-mode only). Options derive from
    *  columns where `column.getCanSort()` returns true. Wires value/onChange
    *  through the TanStack sorting state automatically. */

package/src/components/Table/Pagination.tsx

@@ -1,9 +1,11 @@
 import type {Table} from '@tanstack/react-table'
 import {html} from 'react-strict-dom'
 import {css} from 'react-strict-dom'
-import {spacing} from '@duro-app/tokens/tokens/spacing.css'
+import {radii, 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'
+import {duration} from '@duro-app/tokens/tokens/motion.css'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
 
 const styles = css.create({
   root: {
@@ -22,10 +24,10 @@ const styles = css.create({
     paddingBottom: spacing.xs,
     paddingLeft: spacing.sm,
     paddingRight: spacing.sm,
-    borderWidth: 1,
+    borderWidth: borders.hairline,
     borderStyle: 'solid',
     borderColor: colors.border,
-    borderRadius: 6,
+    borderRadius: radii.px6,
     backgroundColor: {
       default: 'transparent',
       ':hover': colors.bgCardHover,
@@ -34,7 +36,7 @@ const styles = css.create({
     fontSize: typography.fontSizeSm,
     cursor: 'pointer',
     transitionProperty: 'background-color',
-    transitionDuration: '150ms',
+    transitionDuration: duration.fast,
   },
   buttonDisabled: {
     opacity: 0.4,

package/src/components/Table/SortIndicator.tsx

@@ -2,18 +2,20 @@ import type {Column} from '@tanstack/react-table'
 import {html} from 'react-strict-dom'
 import {css} from 'react-strict-dom'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
+import {duration} from '@duro-app/tokens/tokens/motion.css'
+import {spacing} from '@duro-app/tokens/tokens/spacing.css'
 
 const styles = css.create({
   root: {
     display: 'inline-flex',
     alignItems: 'center',
-    marginLeft: 4,
+    marginLeft: spacing.xs,
     fontSize: 10,
     userSelect: 'none',
     // Hidden by default, shown on hover or when active
     opacity: 0,
     transitionProperty: 'opacity',
-    transitionDuration: '120ms',
+    transitionDuration: duration.quick,
   },
   active: {
     opacity: 1,

package/src/components/Table/Table.stories.tsx

@@ -22,12 +22,13 @@ import {
   getPaginationRowModel,
   type SortingState,
   type ColumnFiltersState,
-  type PaginationState,
 } from '@tanstack/react-table'
 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'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
 
 const meta: Meta = {
   title: 'Components/Table',
@@ -247,7 +248,6 @@ function CheckboxTableDemo() {
   const [selected, setSelected] = useState<Set<string>>(new Set())
 
   const allSelected = items.length > 0 && items.every((i) => selected.has(i.id))
-  const someSelected = items.some((i) => selected.has(i.id))
 
   const toggleAll = () => {
     if (allSelected) {
@@ -893,11 +893,11 @@ const responsiveStyles = css.create({
   resizable: {
     resize: 'horizontal',
     overflow: 'auto',
-    minWidth: '320px',
+    minWidth: sizes.panelSm,
     maxWidth: '100%',
-    width: '900px',
+    width: sizes.pageMd,
     padding: spacing.sm,
-    borderWidth: 1,
+    borderWidth: borders.hairline,
     borderStyle: 'dashed',
     borderColor: colors.border,
   },
@@ -1149,11 +1149,11 @@ export const SlotPropsOnRoot: Story = {
 const respStyles = css.create({
   // 8 columns × 120px floor = 960px min. At 800px the grid overflows → the
   // wrapper scrolls sideways, but it's still tabular (above 640).
-  scrollDense: {width: 800},
+  scrollDense: {width: sizes.pageMd},
   // Same table at 1120px: 960 < 1120, so it fits with no scrollbar.
-  roomy: {width: 1120},
+  roomy: {width: sizes.pageLg},
   // Below the 640px card breakpoint → cards.
-  phone: {width: 560},
+  phone: {width: sizes.pageSm},
 })
 
 const LONG_EMAIL = 'a-really-long-service-account.address@subdomain.example-company.com'

package/src/components/Table/Table.tsx

@@ -13,6 +13,7 @@ import {
 import {html} from 'react-strict-dom'
 import {styles} from './styles.css'
 import {devWarnOnce} from '../../shared/devWarnOnce'
+import {resolveLength, resolveTrack, type GridTrack, type Length} from '../../shared/length'
 
 // --- Types ---
 
@@ -95,7 +96,7 @@ function unwrapElementType(t: unknown): unknown {
 
 function extractColumnMeta(
   children: ReactNode,
-  minColumnWidth: number,
+  minColumnWidth: Length,
 ): {
   template: string
   compactTemplate: string
@@ -120,15 +121,17 @@ function extractColumnMeta(
         // That floor is what makes a dense table overflow its container
         // instead of crushing — Root's scroll wrapper then scrolls sideways.
         // Narrow columns (a checkbox) or naturally-wide ones (an actions
-        // cell) override this with an explicit `width` (e.g. '40px',
-        // 'max-content').
-        const width = props.width || `minmax(${minColumnWidth}px, 1fr)`
+        // cell) override this with an explicit `width` (e.g. a size token
+        // key, 'max-content').
+        const width = props.width
+          ? String(resolveTrack(props.width))
+          : `minmax(${resolveLength(minColumnWidth)}, 1fr)`
         widths.push(width)
         // `compactWidth` lets the consumer switch to a content-aware
         // layout in the compact band while staying evenly distributed
         // at desktop. Falls back to `width` so columns that don't opt
         // in keep one template across both breakpoints.
-        compactWidths.push(props.compactWidth || width)
+        compactWidths.push(props.compactWidth ? String(resolveTrack(props.compactWidth)) : width)
         const explicit = typeof props.label === 'string' ? props.label : undefined
         const fallback = extractText(props.children).trim()
         const label = explicit ?? fallback
@@ -214,13 +217,14 @@ interface RootProps {
   /** Opt out of responsive behavior (horizontal scroll + card breakpoint). Default true. */
   responsive?: boolean
   /**
-   * Minimum width (px) each flexible column keeps before the table scrolls
-   * horizontally rather than crushing its cells. Columns still share the row
-   * evenly (`minmax(<minColumnWidth>px, 1fr)`); this is only the floor. Raise
-   * it for roomier columns (more scrolling), lower it to fit more before
-   * scrolling. Columns with an explicit `width` are unaffected. Default 120.
+   * Minimum width each flexible column keeps before the table scrolls
+   * horizontally rather than crushing its cells: a size token key or a
+   * relative length. Columns still share the row evenly
+   * (`minmax(<minColumnWidth>, 1fr)`); this is only the floor. Raise it for
+   * roomier columns (more scrolling), lower it to fit more before scrolling.
+   * Columns with an explicit `width` are unaffected. Default `"labelMinW"`.
    */
-  minColumnWidth?: number
+  minColumnWidth?: Length
   /**
    * Optional sort UI rendered above the grid. Visible only in stack mode
    * (SortChip carries its own `display: none → inline-flex` rule). Typical
@@ -239,7 +243,7 @@ export function Root({
   variant = 'default',
   size = 'md',
   responsive = true,
-  minColumnWidth = 120,
+  minColumnWidth = 'labelMinW',
   sortChip,
   pagination,
 }: RootProps) {
@@ -438,17 +442,17 @@ export function HeaderCell({
 }: {
   children?: ReactNode
   /** Column width at default (wide) viewport. CSS grid-template-columns
-   *  track value — e.g. '40px', '2fr', 'max-content'. Defaults to
+   *  track value — e.g. `sizes` key `"iconButton"`, '2fr', 'max-content'. Defaults to
    *  'minmax(0, 1fr)' so each column shares the row evenly and is free
    *  to shrink below its content's intrinsic size. */
-  width?: string
+  width?: GridTrack
   /** Column width when the table's container drops into compact mode
    *  (≤720px container). Use this to switch to a content-aware layout
    *  at narrow widths — e.g. give a status badge `max-content` and the
    *  action column `minmax(0, 2fr)` so it absorbs the slack — while
    *  keeping evenly-distributed columns on wide screens. Defaults to the
    *  same value as `width`. */
-  compactWidth?: string
+  compactWidth?: GridTrack
   /** Stack-mode label string. Optional when children is a plain string — the
    *  text content is used as the label automatically. Required when children
    *  contain JSX (icon + text, sort indicator, etc.). */

package/src/components/Table/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 {duration, easing} from '@duro-app/tokens/tokens/motion.css'
 import {breakpoints} from '@duro-app/tokens/tokens/breakpoints.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
 
 // Container-query thresholds, from the shared breakpoint scale. `sm` (640px)
 // is the single "card up" line used across every table (Table + VirtualTable);
@@ -42,17 +44,17 @@ export const styles = css.create({
     cursor: 'pointer',
     outlineWidth: {
       default: 0,
-      ':focus-visible': 2,
+      ':focus-visible': borders.focusRing,
     },
     outlineStyle: 'solid',
     outlineColor: colors.accent,
-    outlineOffset: -2,
+    outlineOffset: `calc(-1 * ${borders.focusOffset})`,
   },
 
   // Root — the single grid container for the table itself
   root: {
     display: 'grid',
-    borderWidth: 1,
+    borderWidth: borders.hairline,
     borderStyle: 'solid',
     borderColor: colors.border,
     borderRadius: radii.md,
@@ -83,7 +85,7 @@ export const styles = css.create({
     // The card-list look needs the outer border to disappear in stack
     // mode — each row paints its own border.
     borderWidth: {
-      default: 1,
+      default: borders.hairline,
       [`@container (max-width: ${STACK_BP})`]: 0,
     },
     backgroundColor: {
@@ -129,7 +131,7 @@ export const styles = css.create({
       [`@container (max-width: ${STACK_BP})`]: '1fr',
     },
     borderBottomWidth: {
-      default: 1,
+      default: borders.hairline,
       [`@container (max-width: ${STACK_BP})`]: 0,
     },
     borderBottomStyle: 'solid',
@@ -313,7 +315,7 @@ export const styles = css.create({
   // Variant: bordered (cells get side borders). Suppressed in stack.
   borderedCell: {
     borderRightWidth: {
-      default: 1,
+      default: borders.hairline,
       [`@container (max-width: ${STACK_BP})`]: 0,
     },
     borderRightStyle: 'solid',
@@ -360,7 +362,7 @@ export const styles = css.create({
     position: 'absolute',
     top: 1,
     bottom: 1,
-    width: spacing.xl,
+    width: sizes.edgeFade,
     pointerEvents: 'none',
     opacity: 0,
     transitionProperty: 'opacity',

package/src/components/Tabs/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 {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: {
@@ -15,7 +17,7 @@ export const styles = css.create({
   list: {
     display: 'flex',
     flexDirection: 'row',
-    borderBottomWidth: 1,
+    borderBottomWidth: borders.hairline,
     borderBottomStyle: 'solid',
     borderBottomColor: colors.border,
     gap: spacing.xs,
@@ -25,7 +27,7 @@ export const styles = css.create({
   listVertical: {
     flexDirection: 'column',
     borderBottomWidth: 0,
-    borderRightWidth: 1,
+    borderRightWidth: borders.hairline,
     borderRightStyle: 'solid',
     borderRightColor: colors.border,
     gap: 0,
@@ -47,7 +49,7 @@ export const styles = css.create({
     },
     backgroundColor: 'transparent',
     borderWidth: 0,
-    borderBottomWidth: 2,
+    borderBottomWidth: borders.strong,
     borderBottomStyle: 'solid',
     borderBottomColor: 'transparent',
     cursor: 'pointer',
@@ -56,7 +58,7 @@ export const styles = css.create({
     transitionTimingFunction: easing.standard,
     outlineWidth: {
       default: 0,
-      ':focus-visible': 2,
+      ':focus-visible': borders.focusRing,
     },
     outlineStyle: {
       default: 'none',
@@ -68,13 +70,13 @@ export const styles = css.create({
     },
     outlineOffset: {
       default: 0,
-      ':focus-visible': -2,
+      ':focus-visible': `calc(-1 * ${borders.focusOffset})`,
     },
   },
   tabVertical: {
     justifyContent: 'flex-start',
     borderBottomWidth: 0,
-    borderRightWidth: 2,
+    borderRightWidth: borders.strong,
     borderRightStyle: 'solid',
     borderRightColor: 'transparent',
   },
@@ -105,12 +107,12 @@ export const styles = css.create({
   indicatorHorizontal: {
     bottom: -1,
     left: 0,
-    height: 2,
+    height: sizes.tabIndicator,
   },
   indicatorVertical: {
     right: -1,
     top: 0,
-    width: 2,
+    width: sizes.tabIndicator,
   },
   // Dynamic transform/size from the measured active tab (StyleX dynamic style:
   // simple identifier params only).

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

@@ -4,6 +4,8 @@ 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'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
 
 const meta: Meta<typeof Tag> = {
   title: 'Components/Tag',
@@ -53,8 +55,8 @@ const layoutStyles = css.create({
   stack: {display: 'flex', flexDirection: 'column', gap: spacing.md},
   // Narrow column that a long identifier tag would overflow without `wrap`.
   narrowCol: {
-    width: 120,
-    borderWidth: 1,
+    width: sizes.labelMinW,
+    borderWidth: borders.hairline,
     borderStyle: 'solid',
     borderColor: colors.border,
     padding: spacing.sm,