@duro-app/tokens 5.19.0 → 5.21.0

package/dist/index.js

@@ -10,7 +10,7 @@ const e = {
   md: 768,
   lg: 1024,
   xl: 1280
-}, a = {
+}, t = {
   bg: "var(--bg-xqkwqtp)",
   bgCard: "var(--bgCard-xj2l5r)",
   bgCardHover: "var(--bgCardHover-xlxk7vw)",
@@ -79,7 +79,7 @@ const e = {
   scrimStrong: "var(--scrimStrong-x1bj3i5v)",
   onScrimMuted: "var(--onScrimMuted-xqxo091)",
   __varGroupHash__: "xjvd03b"
-}, t = {
+}, a = {
   xs: "var(--xs-xxfyjsd)",
   sm: "var(--sm-xbh8y7f)",
   ms: "var(--ms-x13y09zs)",
@@ -336,13 +336,31 @@ const e = {
     "textTransform-kP9fke": "textTransform-xtvhhri",
     $$css: "tokens/type-presets.css.ts:50"
   },
+  overlineMd: {
+    "fontFamily-kMv6JI": "fontFamily-xce2pww",
+    "fontSize-kGuDYH": "fontSize-x1hn3ytp",
+    "lineHeight-kLWn49": "lineHeight-xzs5d81",
+    "fontWeight-k63SB2": "fontWeight-x1x12jc5",
+    "letterSpacing-kb6lSQ": "letterSpacing-x121swot",
+    "textTransform-kP9fke": "textTransform-xtvhhri",
+    $$css: "tokens/type-presets.css.ts:58"
+  },
+  overlineLg: {
+    "fontFamily-kMv6JI": "fontFamily-xce2pww",
+    "fontSize-kGuDYH": "fontSize-xfzcsg9",
+    "lineHeight-kLWn49": "lineHeight-x80sjjd",
+    "fontWeight-k63SB2": "fontWeight-x1x12jc5",
+    "letterSpacing-kb6lSQ": "letterSpacing-x121swot",
+    "textTransform-kP9fke": "textTransform-xtvhhri",
+    $$css: "tokens/type-presets.css.ts:66"
+  },
   headingSm: {
     "fontFamily-kMv6JI": "fontFamily-xce2pww",
     "fontSize-kGuDYH": "fontSize-xtv95mj",
     "lineHeight-kLWn49": "lineHeight-xyb71hx",
     "fontWeight-k63SB2": "fontWeight-x1x12jc5",
     "letterSpacing-kb6lSQ": "letterSpacing-xql2p2a",
-    $$css: "tokens/type-presets.css.ts:60"
+    $$css: "tokens/type-presets.css.ts:76"
   },
   headingMd: {
     "fontFamily-kMv6JI": "fontFamily-xce2pww",
@@ -350,7 +368,7 @@ const e = {
     "lineHeight-kLWn49": "lineHeight-x17ovj3u",
     "fontWeight-k63SB2": "fontWeight-x1x12jc5",
     "letterSpacing-kb6lSQ": "letterSpacing-xql2p2a",
-    $$css: "tokens/type-presets.css.ts:67"
+    $$css: "tokens/type-presets.css.ts:83"
   },
   headingLg: {
     "fontFamily-kMv6JI": "fontFamily-xce2pww",
@@ -358,7 +376,7 @@ const e = {
     "lineHeight-kLWn49": "lineHeight-x18micsl",
     "fontWeight-k63SB2": "fontWeight-xhkckuk",
     "letterSpacing-kb6lSQ": "letterSpacing-xql2p2a",
-    $$css: "tokens/type-presets.css.ts:74"
+    $$css: "tokens/type-presets.css.ts:90"
   },
   headingXl: {
     "fontFamily-kMv6JI": "fontFamily-xce2pww",
@@ -366,7 +384,7 @@ const e = {
     "lineHeight-kLWn49": "lineHeight-x1f79cfb",
     "fontWeight-k63SB2": "fontWeight-xhkckuk",
     "letterSpacing-kb6lSQ": "letterSpacing-xql2p2a",
-    $$css: "tokens/type-presets.css.ts:81"
+    $$css: "tokens/type-presets.css.ts:97"
   },
   displaySm: {
     "fontFamily-kMv6JI": "fontFamily-xce2pww",
@@ -374,7 +392,7 @@ const e = {
     "lineHeight-kLWn49": "lineHeight-x1u7k74",
     "fontWeight-k63SB2": "fontWeight-xhkckuk",
     "letterSpacing-kb6lSQ": "letterSpacing-xql2p2a",
-    $$css: "tokens/type-presets.css.ts:90"
+    $$css: "tokens/type-presets.css.ts:106"
   },
   displayMd: {
     "fontFamily-kMv6JI": "fontFamily-xce2pww",
@@ -382,7 +400,7 @@ const e = {
     "lineHeight-kLWn49": "lineHeight-x1uo3zyz",
     "fontWeight-k63SB2": "fontWeight-xhkckuk",
     "letterSpacing-kb6lSQ": "letterSpacing-xql2p2a",
-    $$css: "tokens/type-presets.css.ts:97"
+    $$css: "tokens/type-presets.css.ts:113"
   },
   displayLg: {
     "fontFamily-kMv6JI": "fontFamily-xce2pww",
@@ -390,7 +408,7 @@ const e = {
     "lineHeight-kLWn49": "lineHeight-x1159mfc",
     "fontWeight-k63SB2": "fontWeight-xhkckuk",
     "letterSpacing-kb6lSQ": "letterSpacing-xql2p2a",
-    $$css: "tokens/type-presets.css.ts:104"
+    $$css: "tokens/type-presets.css.ts:120"
   }
 }, h = {
   sm: "var(--sm-x17hhtln)",
@@ -407,17 +425,20 @@ const e = {
   brisk: "var(--brisk-xsyifss)",
   base: "var(--base-x13vs74m)",
   slow: "var(--slow-xtti36c)",
+  slower: "var(--slower-xh107jv)",
+  stagger: "var(--stagger-x1sxk607)",
   __varGroupHash__: "x8wiu4o"
 }, f = {
   standard: "var(--standard-xg4ngex)",
   linear: "var(--linear-x13iskbu)",
   easeOut: "var(--easeOut-x1dtgzac)",
   easeIn: "var(--easeIn-xxaysck)",
+  emphasized: "var(--emphasized-x108jlz4)",
   __varGroupHash__: "x1unb8zz"
-}, m = {
+}, k = {
   xjvd03b: "xoev3oz xjvd03b",
   $$css: !0
-}, k = {
+}, m = {
   x13v825q: "x1jk1o70 x13v825q",
   $$css: !0
 }, S = {
@@ -431,7 +452,7 @@ export {
   x as borders,
   e as breakpoints,
   r as breakpointsPx,
-  a as colors,
+  t as colors,
   d as duration,
   f as easing,
   v as effects,
@@ -439,13 +460,13 @@ export {
   S as highContrastTheme,
   s as layers,
   l as layoutSpacing,
-  k as lightShadows,
-  m as lightTheme,
+  m as lightShadows,
+  k as lightTheme,
   i as microSpacing,
   n as radii,
   h as shadows,
   o as sizes,
-  t as spacing,
+  a as spacing,
   p as typePresets,
   g as typeScale,
   c as typography

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/tokens/breakpoints.css.ts","../src/tokens/colors.css.ts","../src/tokens/spacing.css.ts","../src/tokens/sizes.css.ts","../src/tokens/borders.css.ts","../src/tokens/layers.css.ts","../src/tokens/effects.css.ts","../src/tokens/layout-spacing.css.ts","../src/tokens/typography.css.ts","../src/tokens/type-presets.css.ts","../src/tokens/shadows.css.ts","../src/tokens/motion.css.ts","../src/themes/light.css.ts","../src/themes/high-contrast.css.ts"],"sourcesContent":["import {css} from 'react-strict-dom'\n\n// Breakpoint scale — the widths at which responsive layouts change.\n//\n// These use `css.defineConsts` rather than `css.defineVars` because CSS media\n// and container queries cannot read custom properties: a query threshold has\n// to be a literal. `defineConsts` values are inlined into the query text at\n// build time by the StyleX babel plugin (that's their whole reason to exist),\n// so `@container (max-width: ${breakpoints.sm})` compiles to a real `640px`.\n//\n// For runtime JS comparisons (`containerWidth < breakpointsPx.sm`) use the\n// plain-number mirror below — defineConsts values are query strings, not\n// numbers. Keep the two in sync. Values follow the common Tailwind-aligned scale.\nexport const breakpoints = css.defineConsts({\n  /** Phones — dense tables card up below here. */\n  xs: '480px',\n  /** Large phone / small tablet. The default \"go to the mobile layout\" line. */\n  sm: '640px',\n  /** Tablet portrait. */\n  md: '768px',\n  /** Tablet landscape / small laptop. */\n  lg: '1024px',\n  /** Desktop. */\n  xl: '1280px',\n})\n\nexport const breakpointsPx = {\n  xs: 480,\n  sm: 640,\n  md: 768,\n  lg: 1024,\n  xl: 1280,\n} as const\n\nexport type Breakpoint = keyof typeof breakpointsPx\n","import {css} from 'react-strict-dom'\n\nexport const colors = css.defineVars({\n  // Backgrounds\n  bg: '#0f0f0f',\n  bgCard: '#1a1a1a',\n  bgCardHover: '#242424',\n\n  // Text\n  text: '#e5e5e5',\n  textMuted: '#b0b0b0',\n\n  // Accent\n  accent: '#6aaffc',\n  accentHover: '#93c5fd',\n  accentContrast: '#000000',\n\n  // Border\n  border: '#333333',\n\n  // Semantic — Error\n  error: '#f87171',\n  errorHover: '#fca5a5',\n  errorBg: 'rgba(248, 113, 113, 0.1)',\n  errorBorder: 'rgba(248, 113, 113, 0.3)',\n  errorText: '#fca5a5',\n  errorContrast: '#000000',\n\n  // Semantic — Success\n  success: '#22c55e',\n  successBg: 'rgba(34, 197, 94, 0.1)',\n  successBorder: 'rgba(34, 197, 94, 0.3)',\n  successText: '#86efac',\n\n  // Semantic — Warning\n  warning: '#fbbf24',\n  warningBg: 'rgba(251, 191, 36, 0.1)',\n  warningBorder: 'rgba(251, 191, 36, 0.3)',\n  warningText: '#fde68a',\n\n  // Semantic — Info (uses accent)\n  info: '#6aaffc',\n  infoBg: 'rgba(106, 175, 252, 0.1)',\n  infoBorder: 'rgba(106, 175, 252, 0.3)',\n  infoText: '#93c5fd',\n\n  // Highlight — a non-status accent (a category, an intent); no status meaning.\n  highlight: '#c084fc',\n  highlightBg: 'rgba(192, 132, 252, 0.1)',\n  highlightBorder: 'rgba(192, 132, 252, 0.3)',\n  highlightText: '#d8b4fe',\n\n  // Fixed overlays — the same in every theme (a scrim darkens whatever is\n  // under it; the inverse overlays sit on an accent surface).\n  scrim: 'rgba(0, 0, 0, 0.4)',\n  inverseFill: 'rgba(0, 0, 0, 0.10)',\n  inverseFillHover: 'rgba(0, 0, 0, 0.18)',\n  inverseBorder: 'rgba(0, 0, 0, 0.55)',\n  inverseBorderHover: 'rgba(0, 0, 0, 0.70)',\n  // A light that does not follow the theme (the Switch knob).\n  fixedLight: '#ffffff',\n  // The fixed black, the same in every theme (video letterbox).\n  fixedDark: '#000000',\n  // A fixed translucent white over content (the light counterpart of scrim).\n  overlayLight: 'rgba(255, 255, 255, 0.78)',\n  // The opposite tone of the theme: a surface that stands out from the page\n  // (toasts, coach marks), with its own text colour. Not the fixed inverse*\n  // overlays above, which sit on an accent fill.\n  contrastSurface: '#f5f5f5',\n  onContrastSurface: '#1a1a1a',\n  // A border on contrastSurface, at least 3:1 against it (non-text).\n  contrastBorder: 'rgba(0, 0, 0, 0.42)',\n  // Gap tokens (5.14, plan N0 C0 inventory). A recessed well below its surface: code, editor, input-like insets.\n  bgInset: '#0a0a0a',\n  // A surface lifted above its parent (a selected or floating card).\n  bgElevated: '#242424',\n  // Selected rows and selectable containers: the accent hue, stronger than activeBg.\n  bgSelected: 'rgba(106, 175, 252, 0.15)',\n  // Drawn over a pressed surface (not inverseFill, which sits on an accent fill).\n  pressOverlay: 'rgba(255, 255, 255, 0.08)',\n  // A touch ripple.\n  ripple: 'rgba(255, 255, 255, 0.12)',\n  // A hair of tint that separates grouped sections.\n  bgSectionTint: 'rgba(255, 255, 255, 0.03)',\n  // Low-emphasis hairlines, below border.\n  borderSubtle: '#242424',\n  // Higher-emphasis outlines, above border.\n  borderStrong: '#555555',\n  // The top-edge highlight on a bounded surface.\n  surfaceHighlight: 'rgba(255, 255, 255, 0.06)',\n  // The lowest-emphasis readable text, below textMuted (at least 4.5:1 on bg).\n  textSubtle: '#8a8a8a',\n  // Text of a disabled control (not required to meet contrast).\n  textDisabled: '#6b6b6b',\n  // A neutral status (inactive, unknown): the status family without a status meaning.\n  neutral: '#a3a3a3',\n  neutralBg: 'rgba(163, 163, 163, 0.1)',\n  neutralBorder: 'rgba(163, 163, 163, 0.3)',\n  neutralText: '#d4d4d4',\n  // The active choice: chips, toolbar pills, segmented options (the accent family).\n  active: '#6aaffc',\n  activeBg: 'rgba(106, 175, 252, 0.1)',\n  activeBorder: 'rgba(106, 175, 252, 0.3)',\n  activeText: '#93c5fd',\n  // A disabled primary fill, where opacity would show what is behind it.\n  accentDisabled: 'rgba(106, 175, 252, 0.4)',\n  // A segmented control's track, and its raised active segment.\n  segmentTrack: 'rgba(255, 255, 255, 0.06)',\n  segmentActive: '#333333',\n  // Lighter and heavier scrims beside scrim, and secondary text on one.\n  scrimSoft: 'rgba(0, 0, 0, 0.2)',\n  scrimStrong: 'rgba(0, 0, 0, 0.6)',\n  onScrimMuted: 'rgba(255, 255, 255, 0.72)',\n})\n","import {css} from 'react-strict-dom'\n\nexport const spacing = css.defineVars({\n  xs: '4px',\n  sm: '8px',\n  ms: '12px',\n  md: '16px',\n  lg: '24px',\n  xl: '32px',\n  xxl: '48px',\n  xxxl: '64px',\n})\n\n// Optical micro-steps below and between the spacing scale: a 1-6px nudge that\n// aligns a glyph or tightens a dense control. Not a layout choice, so not part\n// of SpacingToken (no `gap=\"px2\"`); prefer the scale.\nexport const microSpacing = css.defineVars({\n  px1: '1px',\n  px2: '2px',\n  px3: '3px',\n  px5: '5px',\n  px6: '6px',\n})\n\nexport const radii = css.defineVars({\n  xs: '4px',\n  px6: '6px',\n  sm: '8px',\n  md: '12px',\n  lg: '16px',\n  full: '9999px',\n})\n","import {css} from 'react-strict-dom'\n\nexport const sizes = css.defineVars({\n  touchTarget: '44px',\n  controlSm: '28px',\n  controlMd: '39px',\n  controlLg: '40px',\n  indicator: '18px',\n  indicatorDot: '8px',\n  checkMarkW: '5px',\n  checkMarkH: '9px',\n  switchTrackW: '36px',\n  switchTrackH: '20px',\n  switchThumb: '16px',\n  iconButton: '32px',\n  iconButtonSm: '28px',\n  spinnerSm: '16px',\n  spinnerMd: '24px',\n  spinnerLg: '40px',\n  glyphXs: '10px',\n  glyphSm: '12px',\n  glyphMd: '16px',\n  iconSm: '16px',\n  iconMd: '18px',\n  iconLg: '24px',\n  iconXl: '36px',\n  iconXxl: '48px',\n  // A small square thumbnail (a file/media row preview).\n  thumbSm: '40px',\n  // Minimum width of a media grid tile.\n  mediaTileMinW: '108px',\n  // Upper bound a glyph scales up to inside its tile.\n  glyphClampMax: '160px',\n  // Width of a mm:ss time readout, so digits do not shift the layout.\n  timeReadoutW: '74px',\n  navMarkerW: '3px',\n  navMarkerH: '18px',\n  divider: '1px',\n  tabIndicator: '2px',\n  edgeFade: '32px',\n  scrollbar: '8px',\n  swatchW: '44px',\n  swatchH: '34px',\n  labelMinW: '120px',\n  popupMinW: '160px',\n  listMaxH: '280px',\n  listMaxHSm: '200px',\n  dialogSm: '400px',\n  dialogMd: '520px',\n  dialogLg: '680px',\n  panelSm: '360px',\n  panelMd: '480px',\n  panelLg: '640px',\n  toastMaxW: '440px',\n  gridColSm: '240px',\n  gridColMd: '280px',\n  pageSm: '600px',\n  pageMd: '800px',\n  pageLg: '1200px',\n  sidebarW: '240px',\n  pageXs: '480px',\n  pageXl: '1440px',\n  asideW: '320px',\n  gridColXs: '200px',\n  fieldMinWSm: '80px',\n  fieldMinW: '160px',\n  popoverWSm: '240px',\n  popoverW: '320px',\n  popupMaxW: '280px',\n  meterH: '6px',\n  skeletonChipW: '96px',\n  dropZoneMinH: '128px',\n  canvasMinH: '480px',\n  editorMinH: '160px',\n  toolbarH: '36px',\n  embedW: '550px',\n  colorPickerW: '196px',\n  colorAreaH: '150px',\n  colorTrackH: '12px',\n  colorSwatch: '20px',\n  colorPreviewH: '22px',\n  handle: '16px',\n  chip: '24px',\n  placeholderMinH: '80px',\n  previewMaxH: '320px',\n  barH: '4px',\n  // Bottom-sheet grabber (Drawer snapPoints).\n  sheetGrabberW: '40px',\n  sheetGrabberH: '4px',\n  readoutW: '40px',\n  sliderW: '96px',\n  paletteMinW: '96px',\n  deviceBarW: '96px',\n  // Calendar grids: the time-label column and the day-header row.\n  timeGutterW: '64px',\n  dayHeaderH: '46px',\n  // Timeline: the row-label column beside the date track.\n  timelineLabelW: '180px',\n  // AppShell's bar below its collapse point: a touch-target Menu button\n  // between spacing.sm above and below, plus the hairline under it.\n  appBarH: '61px',\n  // Drag-ghost thumbnail: the small preview image that follows the pointer.\n  dragThumbW: '132px',\n  dragThumbH: '99px',\n})\n","import {css} from 'react-strict-dom'\n\nexport const borders = css.defineVars({\n  hairline: '1px',\n  strong: '2px',\n  accent: '3px',\n  focusRing: '2px',\n  focusOffset: '2px',\n  focusOffsetSm: '1px',\n})\n","import {css} from 'react-strict-dom'\nimport type {LayerToken} from '../keys'\n\n// The z-index scale. Values are unitless strings so `--duro-layer-*` exists\n// for plain CSS; React Native takes a number, so a native overlay reads the\n// numeric LAYERS map from `@duro-app/tokens/keys` instead.\n//\n// They only compete inside one stacking context. Dialog, Drawer, the popups\n// and the toast region all portal into the ThemeProvider mount (`portal`),\n// and this is the order they keep there.\n// StyleX types a var by its literal, so string values would type every layer\n// as a string, which `zIndex` (a number) refuses. Typing the literals as CSS\n// integers makes `zIndex: layers.popup` a number to TypeScript; the cast has\n// no runtime effect (StyleX and the drift check read straight through it).\ntype LayerValue = ReturnType<typeof css.types.integer<number>>\n\nexport const layers = css.defineVars({\n  // A focused or sticky part above its siblings (a joined group's focus ring,\n  // a scrollbar, a sticky table header).\n  raised: '1',\n  // Floating chrome over the page: Tooltip, ActionBar.\n  floating: '50',\n  // A floating surface that must cover another floating one, outside a modal:\n  // a link editor over a selection format bar. Pair it with `popoverRaised`\n  // and pick by `useInModal()` (a Popover does it with `raised`). It covers a\n  // sibling floating surface, never a modal.\n  floatingRaised: '60',\n  // A modal's backdrop.\n  overlay: '1000',\n  // A modal's panel (Dialog, Drawer).\n  modal: '1001',\n  // Chrome that sits on a modal-level surface, above that surface's own\n  // parts: a sheet's toolbar over its bottom bar. Still below a Popover.\n  modalRaised: '1002',\n  // A Popover inside a Dialog or Drawer: above that modal, below the popups\n  // (a Select, a Menu) and the Select click-catcher opened from inside it.\n  // Outside a modal a Popover is `floating`, so a modal opened later covers it.\n  popover: '1040',\n  // `floatingRaised` inside a Dialog or Drawer: over a Popover there, under\n  // a popup's click-catcher and the popup itself.\n  popoverRaised: '1041',\n  // A popup's click-catcher, under the popup itself.\n  popupBackdrop: '1049',\n  // Popups: Select, Listbox, Menu — above a modal or Popover they open from.\n  popup: '1050',\n  // The toast region: above popups and modals.\n  toast: '1060',\n  // The ThemeProvider portal mount that holds all of the above.\n  portal: '1100',\n} as unknown as Readonly<Record<LayerToken, LayerValue>>)\n","import {css} from 'react-strict-dom'\n\n// Visual effects. Not themed.\n//\n// overlayBlur: the blur behind a modal's backdrop (a command palette, a\n// lightbox). Apply it ONLY on the backdrop element itself: a backdropFilter\n// (or filter) on an ancestor becomes the containing block for every fixed\n// descendant, so a Dialog or Drawer opened inside it is positioned against\n// that ancestor instead of the viewport.\n//\n// surfaceBlur: a frosted surface over imagery (a pill or a chip on a photo).\n// The same warning holds: put it ONLY on that surface element itself, never on\n// a wrapper that holds a Dialog, a Drawer or any fixed descendant.\nexport const effects = css.defineVars({\n  overlayBlur: 'blur(2px)',\n  surfaceBlur: 'blur(6px)',\n})\n","import {css} from 'react-strict-dom'\n\nexport const layoutSpacing = css.defineVars({\n  // Vertical rhythm (stack gaps)\n  stackXs: '4px',\n  stackSm: '8px',\n  stackMd: '16px',\n  stackLg: '24px',\n  stackXl: '48px',\n\n  // Horizontal rhythm (inline gaps)\n  inlineXs: '4px',\n  inlineSm: '8px',\n  inlineMd: '16px',\n  inlineLg: '24px',\n\n  // Container insets\n  containerSm: '16px',\n  containerMd: '24px',\n  containerLg: '32px',\n})\n","import {css} from 'react-strict-dom'\n\nexport const typography = css.defineVars({\n  fontFamily:\n    '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif',\n  fontFamilyMono: '\"SF Mono\", \"Fira Code\", \"Fira Mono\", \"Roboto Mono\", \"Courier New\", monospace',\n  fontSizeXs: '0.75rem',\n  fontSizeSm: '0.875rem',\n  fontSizeMd: '1rem',\n  fontSizeLg: '1.125rem',\n  fontSizeXl: '1.25rem',\n  fontSizeHeading: '1.5rem',\n  fontWeightNormal: '400',\n  fontWeightMedium: '500',\n  fontWeightSemibold: '600',\n  fontWeightBold: '700',\n  lineHeight: '1.5',\n})\n\nexport const typeScale = css.defineVars({\n  // 9-step font size scale\n  fontSize1: '0.75rem', // 12px — captions, badges\n  fontSize2: '0.8125rem', // 13px — small UI\n  fontSize3: '0.875rem', // 14px — default UI (buttons, inputs)\n  fontSize4: '1rem', // 16px — body text\n  fontSize5: '1.125rem', // 18px — body-lg\n  fontSize6: '1.25rem', // 20px — subheading\n  fontSize7: '1.5rem', // 24px — heading-sm\n  fontSize8: '1.875rem', // 30px — heading-md\n  fontSize9: '2.25rem', // 36px — heading-lg\n\n  // Matched line-heights\n  lineHeight1: '1rem', // 16px\n  lineHeight2: '1.25rem', // 20px\n  lineHeight3: '1.25rem', // 20px\n  lineHeight4: '1.5rem', // 24px\n  lineHeight5: '1.5rem', // 24px\n  lineHeight6: '1.75rem', // 28px\n  lineHeight7: '2rem', // 32px\n  lineHeight8: '2.25rem', // 36px\n  lineHeight9: '2.75rem', // 44px\n\n  // Fluid display sizes\n  displaySm: 'clamp(2.25rem, 1.5rem + 2vw, 3rem)', // 36–48px\n  displayMd: 'clamp(2.75rem, 1.75rem + 2.5vw, 3.75rem)', // 44–60px\n  displayLg: 'clamp(3.5rem, 2rem + 3.5vw, 4.5rem)', // 56–72px\n\n  // Letter-spacing\n  letterSpacingTight: '-0.02em',\n  letterSpacingNormal: '0',\n  letterSpacingWide: '0.04em',\n})\n","import {css} from 'react-strict-dom'\nimport {typography, typeScale} from './typography.css'\n\nexport const typePresets = css.create({\n  // Body\n  bodySm: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize3,\n    lineHeight: typeScale.lineHeight3,\n    fontWeight: typography.fontWeightNormal,\n    letterSpacing: typeScale.letterSpacingNormal,\n  },\n  bodyMd: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize4,\n    lineHeight: typeScale.lineHeight4,\n    fontWeight: typography.fontWeightNormal,\n    letterSpacing: typeScale.letterSpacingNormal,\n  },\n  bodyLg: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize5,\n    lineHeight: typeScale.lineHeight5,\n    fontWeight: typography.fontWeightNormal,\n    letterSpacing: typeScale.letterSpacingNormal,\n  },\n\n  // UI\n  caption: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize1,\n    lineHeight: typeScale.lineHeight1,\n    fontWeight: typography.fontWeightNormal,\n    letterSpacing: typeScale.letterSpacingWide,\n  },\n  label: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize3,\n    lineHeight: typeScale.lineHeight3,\n    fontWeight: typography.fontWeightMedium,\n    letterSpacing: typeScale.letterSpacingNormal,\n  },\n  code: {\n    fontFamily: typography.fontFamilyMono,\n    fontSize: typeScale.fontSize3,\n    lineHeight: typeScale.lineHeight3,\n    fontWeight: typography.fontWeightNormal,\n    letterSpacing: typeScale.letterSpacingNormal,\n  },\n  overline: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize1,\n    lineHeight: typeScale.lineHeight1,\n    fontWeight: typography.fontWeightSemibold,\n    letterSpacing: typeScale.letterSpacingWide,\n    textTransform: 'uppercase' as const,\n  },\n\n  // Heading\n  headingSm: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize6,\n    lineHeight: typeScale.lineHeight6,\n    fontWeight: typography.fontWeightSemibold,\n    letterSpacing: typeScale.letterSpacingTight,\n  },\n  headingMd: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize7,\n    lineHeight: typeScale.lineHeight7,\n    fontWeight: typography.fontWeightSemibold,\n    letterSpacing: typeScale.letterSpacingTight,\n  },\n  headingLg: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize8,\n    lineHeight: typeScale.lineHeight8,\n    fontWeight: typography.fontWeightBold,\n    letterSpacing: typeScale.letterSpacingTight,\n  },\n  headingXl: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize9,\n    lineHeight: typeScale.lineHeight9,\n    fontWeight: typography.fontWeightBold,\n    letterSpacing: typeScale.letterSpacingTight,\n  },\n\n  // Display (fluid)\n  displaySm: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.displaySm,\n    lineHeight: 1.2,\n    fontWeight: typography.fontWeightBold,\n    letterSpacing: typeScale.letterSpacingTight,\n  },\n  displayMd: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.displayMd,\n    lineHeight: 1.15,\n    fontWeight: typography.fontWeightBold,\n    letterSpacing: typeScale.letterSpacingTight,\n  },\n  displayLg: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.displayLg,\n    lineHeight: 1.1,\n    fontWeight: typography.fontWeightBold,\n    letterSpacing: typeScale.letterSpacingTight,\n  },\n})\n","import {css} from 'react-strict-dom'\n\nexport const shadows = css.defineVars({\n  sm: '0 2px 4px rgba(0, 0, 0, 0.3)',\n  md: '0 4px 12px rgba(0, 0, 0, 0.4)',\n  lg: '0 8px 24px rgba(0, 0, 0, 0.5)',\n  // DragDrop's drop-target rings: borders.hairline in colors.border on every\n  // zone that can receive, borders.strong in colors.accent on the one under the\n  // pointer. Literal per theme (StyleX needs inline literals); the drift check\n  // rebuilds each from the palette. Not focus: focus stays on outlines.\n  dropReady: 'inset 0 0 0 1px #333333',\n  dropOver: 'inset 0 0 0 2px #6aaffc',\n})\n","import {css} from 'react-strict-dom'\n\n/**\n * Motion timing tokens.\n *\n * Values are harvested from what the system already uses — nothing invented:\n * - durations: 150ms is the de-facto transition (Button, Card, and ~30 other\n *   spots), 200ms the common overlay enter (Drawer), 280ms the larger panel\n *   enter (DetailPanel). `instant` is for explicit no-motion.\n *   `quick` (List hover, sort indicator) and `brisk` (Toast enter) are the\n *   two other values components used; `minimal` is the 1ms reduced-motion\n *   duration that still fires animationend.\n * - easings: `standard` is the default `ease` used throughout; `easeOut` /\n *   `easeIn` are the \"Apple ease\" curves already defined for DetailPanel.\n *   `linear` is the Spinner's constant rotation.\n *\n * Reduced motion is handled globally (the `@media (prefers-reduced-motion)`\n * rule in the reset neutralizes timing) plus per-component transform guards, so\n * these stay as plain timing values.\n */\nexport const duration = css.defineVars({\n  instant: '0ms',\n  // Non-zero so animationend still fires under reduced motion.\n  minimal: '1ms',\n  quick: '120ms',\n  fast: '150ms',\n  brisk: '160ms',\n  base: '200ms',\n  slow: '280ms',\n})\n\nexport const easing = css.defineVars({\n  standard: 'ease',\n  linear: 'linear',\n  easeOut: 'cubic-bezier(0.32, 0.72, 0, 1)',\n  easeIn: 'cubic-bezier(0.72, 0, 0.68, 0.28)',\n})\n","import {css} from 'react-strict-dom'\nimport {colors} from '../tokens/colors.css'\nimport {shadows} from '../tokens/shadows.css'\n\nexport const lightTheme = css.createTheme(colors, {\n  bg: '#ffffff',\n  bgCard: '#f5f5f5',\n  bgCardHover: '#ebebeb',\n  text: '#1a1a1a',\n  textMuted: '#4a4a4a',\n  accent: '#1e40af',\n  accentHover: '#1a3799',\n  accentContrast: '#ffffff',\n  border: '#d4d4d4',\n  error: '#991b1b',\n  errorHover: '#7f1d1d',\n  errorBg: 'rgba(153, 27, 27, 0.08)',\n  errorBorder: 'rgba(153, 27, 27, 0.3)',\n  errorText: '#7f1d1d',\n  errorContrast: '#ffffff',\n  success: '#166534',\n  successBg: 'rgba(22, 101, 52, 0.08)',\n  successBorder: 'rgba(22, 101, 52, 0.3)',\n  successText: '#14532d',\n  warning: '#92400e',\n  warningBg: 'rgba(146, 64, 14, 0.08)',\n  warningBorder: 'rgba(146, 64, 14, 0.3)',\n  warningText: '#78350f',\n  info: '#1e40af',\n  infoBg: 'rgba(30, 64, 175, 0.08)',\n  infoBorder: 'rgba(30, 64, 175, 0.3)',\n  infoText: '#1e40af',\n\n  // Highlight — a non-status accent (a category, an intent); no status meaning.\n  highlight: '#6b21a8',\n  highlightBg: 'rgba(107, 33, 168, 0.08)',\n  highlightBorder: 'rgba(107, 33, 168, 0.3)',\n  highlightText: '#581c87',\n  // Fixed overlays — the same in every theme (a scrim darkens whatever is\n  // under it; the inverse overlays sit on an accent surface).\n  scrim: 'rgba(0, 0, 0, 0.4)',\n  inverseFill: 'rgba(0, 0, 0, 0.10)',\n  inverseFillHover: 'rgba(0, 0, 0, 0.18)',\n  inverseBorder: 'rgba(0, 0, 0, 0.55)',\n  inverseBorderHover: 'rgba(0, 0, 0, 0.70)',\n  // A light that does not follow the theme (the Switch knob).\n  fixedLight: '#ffffff',\n  fixedDark: '#000000',\n  // A fixed translucent white over content (the light counterpart of scrim).\n  overlayLight: 'rgba(255, 255, 255, 0.78)',\n  // The opposite tone of the theme: a surface that stands out from the page\n  // (toasts, coach marks), with its own text colour. Not the fixed inverse*\n  // overlays above, which sit on an accent fill.\n  contrastSurface: '#1a1a1a',\n  onContrastSurface: '#e5e5e5',\n  // A border on contrastSurface, at least 3:1 against it (non-text).\n  contrastBorder: 'rgba(255, 255, 255, 0.33)',\n  bgInset: '#f0f0f0',\n  bgElevated: '#ffffff',\n  bgSelected: 'rgba(30, 64, 175, 0.12)',\n  pressOverlay: 'rgba(0, 0, 0, 0.08)',\n  ripple: 'rgba(0, 0, 0, 0.12)',\n  bgSectionTint: 'rgba(0, 0, 0, 0.03)',\n  borderSubtle: '#ebebeb',\n  borderStrong: '#a3a3a3',\n  surfaceHighlight: 'rgba(255, 255, 255, 0.7)',\n  textSubtle: '#6b6b6b',\n  textDisabled: '#a3a3a3',\n  neutral: '#525252',\n  neutralBg: 'rgba(82, 82, 82, 0.08)',\n  neutralBorder: 'rgba(82, 82, 82, 0.3)',\n  neutralText: '#404040',\n  active: '#1e40af',\n  activeBg: 'rgba(30, 64, 175, 0.08)',\n  activeBorder: 'rgba(30, 64, 175, 0.3)',\n  activeText: '#1e40af',\n  accentDisabled: 'rgba(30, 64, 175, 0.4)',\n  segmentTrack: 'rgba(0, 0, 0, 0.06)',\n  segmentActive: '#ffffff',\n  scrimSoft: 'rgba(0, 0, 0, 0.2)',\n  scrimStrong: 'rgba(0, 0, 0, 0.6)',\n  onScrimMuted: 'rgba(255, 255, 255, 0.72)',\n})\n\nexport const lightShadows = css.createTheme(shadows, {\n  sm: '0 2px 4px rgba(0, 0, 0, 0.08)',\n  md: '0 4px 12px rgba(0, 0, 0, 0.12)',\n  lg: '0 8px 24px rgba(0, 0, 0, 0.16)',\n  dropReady: 'inset 0 0 0 1px #d4d4d4',\n  dropOver: 'inset 0 0 0 2px #1e40af',\n})\n","import {css} from 'react-strict-dom'\nimport {colors} from '../tokens/colors.css'\nimport {shadows} from '../tokens/shadows.css'\n\nexport const highContrastTheme = css.createTheme(colors, {\n  bg: '#000000',\n  bgCard: '#111111',\n  bgCardHover: '#1a1a1a',\n  text: '#ffffff',\n  textMuted: '#b0b0b0',\n  accent: '#60a5fa',\n  accentHover: '#93c5fd',\n  accentContrast: '#000000',\n  border: '#555555',\n  error: '#f87171',\n  errorHover: '#fca5a5',\n  errorBg: 'rgba(248, 113, 113, 0.15)',\n  errorBorder: 'rgba(248, 113, 113, 0.5)',\n  errorText: '#fca5a5',\n  errorContrast: '#000000',\n  success: '#4ade80',\n  successBg: 'rgba(74, 222, 128, 0.15)',\n  successBorder: 'rgba(74, 222, 128, 0.5)',\n  successText: '#86efac',\n  warning: '#fcd34d',\n  warningBg: 'rgba(252, 211, 77, 0.15)',\n  warningBorder: 'rgba(252, 211, 77, 0.5)',\n  warningText: '#fef08a',\n  info: '#60a5fa',\n  infoBg: 'rgba(96, 165, 250, 0.15)',\n  infoBorder: 'rgba(96, 165, 250, 0.5)',\n  infoText: '#bfdbfe',\n\n  // Highlight — a non-status accent (a category, an intent); no status meaning.\n  highlight: '#d8b4fe',\n  highlightBg: 'rgba(216, 180, 254, 0.15)',\n  highlightBorder: 'rgba(216, 180, 254, 0.5)',\n  highlightText: '#e9d5ff',\n  // Fixed overlays — the same in every theme (a scrim darkens whatever is\n  // under it; the inverse overlays sit on an accent surface).\n  scrim: 'rgba(0, 0, 0, 0.4)',\n  inverseFill: 'rgba(0, 0, 0, 0.10)',\n  inverseFillHover: 'rgba(0, 0, 0, 0.18)',\n  inverseBorder: 'rgba(0, 0, 0, 0.55)',\n  inverseBorderHover: 'rgba(0, 0, 0, 0.70)',\n  // A light that does not follow the theme (the Switch knob).\n  fixedLight: '#ffffff',\n  fixedDark: '#000000',\n  // A fixed translucent white over content (the light counterpart of scrim).\n  overlayLight: 'rgba(255, 255, 255, 0.78)',\n  // The opposite tone of the theme: a surface that stands out from the page\n  // (toasts, coach marks), with its own text colour. Not the fixed inverse*\n  // overlays above, which sit on an accent fill.\n  contrastSurface: '#ffffff',\n  onContrastSurface: '#000000',\n  // A border on contrastSurface, at least 3:1 against it (non-text).\n  contrastBorder: 'rgba(0, 0, 0, 0.42)',\n  bgInset: '#0a0a0a',\n  bgElevated: '#1a1a1a',\n  bgSelected: 'rgba(96, 165, 250, 0.25)',\n  pressOverlay: 'rgba(255, 255, 255, 0.15)',\n  ripple: 'rgba(255, 255, 255, 0.2)',\n  bgSectionTint: 'rgba(255, 255, 255, 0.06)',\n  borderSubtle: '#333333',\n  borderStrong: '#888888',\n  surfaceHighlight: 'rgba(255, 255, 255, 0.15)',\n  textSubtle: '#a3a3a3',\n  textDisabled: '#808080',\n  neutral: '#d4d4d4',\n  neutralBg: 'rgba(212, 212, 212, 0.15)',\n  neutralBorder: 'rgba(212, 212, 212, 0.5)',\n  neutralText: '#e5e5e5',\n  active: '#60a5fa',\n  activeBg: 'rgba(96, 165, 250, 0.15)',\n  activeBorder: 'rgba(96, 165, 250, 0.5)',\n  activeText: '#bfdbfe',\n  accentDisabled: 'rgba(96, 165, 250, 0.5)',\n  segmentTrack: 'rgba(255, 255, 255, 0.12)',\n  segmentActive: '#333333',\n  scrimSoft: 'rgba(0, 0, 0, 0.3)',\n  scrimStrong: 'rgba(0, 0, 0, 0.7)',\n  onScrimMuted: 'rgba(255, 255, 255, 0.72)',\n})\n\nexport const highContrastShadows = css.createTheme(shadows, {\n  sm: '0 2px 4px rgba(0, 0, 0, 0.6)',\n  md: '0 4px 12px rgba(0, 0, 0, 0.7)',\n  lg: '0 8px 24px rgba(0, 0, 0, 0.8)',\n  dropReady: 'inset 0 0 0 1px #555555',\n  dropOver: 'inset 0 0 0 2px #60a5fa',\n})\n"],"names":["breakpoints","breakpointsPx","colors","spacing","microSpacing","radii","sizes","borders","layers","effects","layoutSpacing","typography","typeScale","typePresets","shadows","duration","easing","lightTheme","lightShadows","highContrastTheme","highContrastShadows"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../src/tokens/breakpoints.css.ts","../src/tokens/colors.css.ts","../src/tokens/spacing.css.ts","../src/tokens/sizes.css.ts","../src/tokens/borders.css.ts","../src/tokens/layers.css.ts","../src/tokens/effects.css.ts","../src/tokens/layout-spacing.css.ts","../src/tokens/typography.css.ts","../src/tokens/type-presets.css.ts","../src/tokens/shadows.css.ts","../src/tokens/motion.css.ts","../src/themes/light.css.ts","../src/themes/high-contrast.css.ts"],"sourcesContent":["import {css} from 'react-strict-dom'\n\n// Breakpoint scale — the widths at which responsive layouts change.\n//\n// These use `css.defineConsts` rather than `css.defineVars` because CSS media\n// and container queries cannot read custom properties: a query threshold has\n// to be a literal. `defineConsts` values are inlined into the query text at\n// build time by the StyleX babel plugin (that's their whole reason to exist),\n// so `@container (max-width: ${breakpoints.sm})` compiles to a real `640px`.\n//\n// For runtime JS comparisons (`containerWidth < breakpointsPx.sm`) use the\n// plain-number mirror below — defineConsts values are query strings, not\n// numbers. Keep the two in sync. Values follow the common Tailwind-aligned scale.\nexport const breakpoints = css.defineConsts({\n  /** Phones — dense tables card up below here. */\n  xs: '480px',\n  /** Large phone / small tablet. The default \"go to the mobile layout\" line. */\n  sm: '640px',\n  /** Tablet portrait. */\n  md: '768px',\n  /** Tablet landscape / small laptop. */\n  lg: '1024px',\n  /** Desktop. */\n  xl: '1280px',\n})\n\nexport const breakpointsPx = {\n  xs: 480,\n  sm: 640,\n  md: 768,\n  lg: 1024,\n  xl: 1280,\n} as const\n\nexport type Breakpoint = keyof typeof breakpointsPx\n","import {css} from 'react-strict-dom'\n\nexport const colors = css.defineVars({\n  // Backgrounds\n  bg: '#0f0f0f',\n  bgCard: '#1a1a1a',\n  bgCardHover: '#242424',\n\n  // Text\n  text: '#e5e5e5',\n  textMuted: '#b0b0b0',\n\n  // Accent\n  accent: '#6aaffc',\n  accentHover: '#93c5fd',\n  accentContrast: '#000000',\n\n  // Border\n  border: '#333333',\n\n  // Semantic — Error\n  error: '#f87171',\n  errorHover: '#fca5a5',\n  errorBg: 'rgba(248, 113, 113, 0.1)',\n  errorBorder: 'rgba(248, 113, 113, 0.3)',\n  errorText: '#fca5a5',\n  errorContrast: '#000000',\n\n  // Semantic — Success\n  success: '#22c55e',\n  successBg: 'rgba(34, 197, 94, 0.1)',\n  successBorder: 'rgba(34, 197, 94, 0.3)',\n  successText: '#86efac',\n\n  // Semantic — Warning\n  warning: '#fbbf24',\n  warningBg: 'rgba(251, 191, 36, 0.1)',\n  warningBorder: 'rgba(251, 191, 36, 0.3)',\n  warningText: '#fde68a',\n\n  // Semantic — Info (uses accent)\n  info: '#6aaffc',\n  infoBg: 'rgba(106, 175, 252, 0.1)',\n  infoBorder: 'rgba(106, 175, 252, 0.3)',\n  infoText: '#93c5fd',\n\n  // Highlight — a non-status accent (a category, an intent); no status meaning.\n  highlight: '#c084fc',\n  highlightBg: 'rgba(192, 132, 252, 0.1)',\n  highlightBorder: 'rgba(192, 132, 252, 0.3)',\n  highlightText: '#d8b4fe',\n\n  // Fixed overlays — the same in every theme (a scrim darkens whatever is\n  // under it; the inverse overlays sit on an accent surface).\n  scrim: 'rgba(0, 0, 0, 0.4)',\n  inverseFill: 'rgba(0, 0, 0, 0.10)',\n  inverseFillHover: 'rgba(0, 0, 0, 0.18)',\n  inverseBorder: 'rgba(0, 0, 0, 0.55)',\n  inverseBorderHover: 'rgba(0, 0, 0, 0.70)',\n  // A light that does not follow the theme (the Switch knob).\n  fixedLight: '#ffffff',\n  // The fixed black, the same in every theme (video letterbox).\n  fixedDark: '#000000',\n  // A fixed translucent white over content (the light counterpart of scrim).\n  overlayLight: 'rgba(255, 255, 255, 0.78)',\n  // The opposite tone of the theme: a surface that stands out from the page\n  // (toasts, coach marks), with its own text colour. Not the fixed inverse*\n  // overlays above, which sit on an accent fill.\n  contrastSurface: '#f5f5f5',\n  onContrastSurface: '#1a1a1a',\n  // A border on contrastSurface, at least 3:1 against it (non-text).\n  contrastBorder: 'rgba(0, 0, 0, 0.42)',\n  // Gap tokens (5.14, plan N0 C0 inventory). A recessed well below its surface: code, editor, input-like insets.\n  bgInset: '#0a0a0a',\n  // A surface lifted above its parent (a selected or floating card).\n  bgElevated: '#242424',\n  // Selected rows and selectable containers: the accent hue, stronger than activeBg.\n  bgSelected: 'rgba(106, 175, 252, 0.15)',\n  // Drawn over a pressed surface (not inverseFill, which sits on an accent fill).\n  pressOverlay: 'rgba(255, 255, 255, 0.08)',\n  // A touch ripple.\n  ripple: 'rgba(255, 255, 255, 0.12)',\n  // A hair of tint that separates grouped sections.\n  bgSectionTint: 'rgba(255, 255, 255, 0.03)',\n  // Low-emphasis hairlines, below border.\n  borderSubtle: '#242424',\n  // Higher-emphasis outlines, above border.\n  borderStrong: '#555555',\n  // The top-edge highlight on a bounded surface.\n  surfaceHighlight: 'rgba(255, 255, 255, 0.06)',\n  // The lowest-emphasis readable text, below textMuted (at least 4.5:1 on bg).\n  textSubtle: '#8a8a8a',\n  // Text of a disabled control (not required to meet contrast).\n  textDisabled: '#6b6b6b',\n  // A neutral status (inactive, unknown): the status family without a status meaning.\n  neutral: '#a3a3a3',\n  neutralBg: 'rgba(163, 163, 163, 0.1)',\n  neutralBorder: 'rgba(163, 163, 163, 0.3)',\n  neutralText: '#d4d4d4',\n  // The active choice: chips, toolbar pills, segmented options (the accent family).\n  active: '#6aaffc',\n  activeBg: 'rgba(106, 175, 252, 0.1)',\n  activeBorder: 'rgba(106, 175, 252, 0.3)',\n  activeText: '#93c5fd',\n  // A disabled primary fill, where opacity would show what is behind it.\n  accentDisabled: 'rgba(106, 175, 252, 0.4)',\n  // A segmented control's track, and its raised active segment.\n  segmentTrack: 'rgba(255, 255, 255, 0.06)',\n  segmentActive: '#333333',\n  // Lighter and heavier scrims beside scrim, and secondary text on one.\n  scrimSoft: 'rgba(0, 0, 0, 0.2)',\n  scrimStrong: 'rgba(0, 0, 0, 0.6)',\n  onScrimMuted: 'rgba(255, 255, 255, 0.72)',\n})\n","import {css} from 'react-strict-dom'\n\nexport const spacing = css.defineVars({\n  xs: '4px',\n  sm: '8px',\n  ms: '12px',\n  md: '16px',\n  lg: '24px',\n  xl: '32px',\n  xxl: '48px',\n  xxxl: '64px',\n})\n\n// Optical micro-steps below and between the spacing scale: a 1-6px nudge that\n// aligns a glyph or tightens a dense control. Not a layout choice, so not part\n// of SpacingToken (no `gap=\"px2\"`); prefer the scale.\nexport const microSpacing = css.defineVars({\n  px1: '1px',\n  px2: '2px',\n  px3: '3px',\n  px5: '5px',\n  px6: '6px',\n})\n\nexport const radii = css.defineVars({\n  xs: '4px',\n  px6: '6px',\n  sm: '8px',\n  md: '12px',\n  lg: '16px',\n  full: '9999px',\n})\n","import {css} from 'react-strict-dom'\n\nexport const sizes = css.defineVars({\n  touchTarget: '44px',\n  controlSm: '28px',\n  controlMd: '39px',\n  controlLg: '40px',\n  indicator: '18px',\n  indicatorDot: '8px',\n  checkMarkW: '5px',\n  checkMarkH: '9px',\n  switchTrackW: '36px',\n  switchTrackH: '20px',\n  switchThumb: '16px',\n  iconButton: '32px',\n  iconButtonSm: '28px',\n  spinnerSm: '16px',\n  spinnerMd: '24px',\n  spinnerLg: '40px',\n  glyphXs: '10px',\n  glyphSm: '12px',\n  glyphMd: '16px',\n  iconSm: '16px',\n  iconMd: '18px',\n  iconLg: '24px',\n  iconXl: '36px',\n  iconXxl: '48px',\n  // A small square thumbnail (a file/media row preview).\n  thumbSm: '40px',\n  // Minimum width of a media grid tile.\n  mediaTileMinW: '108px',\n  // Upper bound a glyph scales up to inside its tile.\n  glyphClampMax: '160px',\n  // Width of a mm:ss time readout, so digits do not shift the layout.\n  timeReadoutW: '74px',\n  navMarkerW: '3px',\n  navMarkerH: '18px',\n  divider: '1px',\n  tabIndicator: '2px',\n  edgeFade: '32px',\n  scrollbar: '8px',\n  swatchW: '44px',\n  swatchH: '34px',\n  labelMinW: '120px',\n  popupMinW: '160px',\n  listMaxH: '280px',\n  listMaxHSm: '200px',\n  dialogSm: '400px',\n  dialogMd: '520px',\n  dialogLg: '680px',\n  panelSm: '360px',\n  panelMd: '480px',\n  panelLg: '640px',\n  toastMaxW: '440px',\n  gridColSm: '240px',\n  gridColMd: '280px',\n  pageSm: '600px',\n  pageMd: '800px',\n  pageLg: '1200px',\n  sidebarW: '240px',\n  pageXs: '480px',\n  pageXl: '1440px',\n  asideW: '320px',\n  gridColXs: '200px',\n  fieldMinWSm: '80px',\n  fieldMinW: '160px',\n  popoverWSm: '240px',\n  popoverW: '320px',\n  popupMaxW: '280px',\n  meterH: '6px',\n  skeletonChipW: '96px',\n  dropZoneMinH: '128px',\n  canvasMinH: '480px',\n  editorMinH: '160px',\n  toolbarH: '36px',\n  embedW: '550px',\n  colorPickerW: '196px',\n  colorAreaH: '150px',\n  colorTrackH: '12px',\n  colorSwatch: '20px',\n  colorPreviewH: '22px',\n  handle: '16px',\n  chip: '24px',\n  placeholderMinH: '80px',\n  previewMaxH: '320px',\n  barH: '4px',\n  // Bottom-sheet grabber (Drawer snapPoints).\n  sheetGrabberW: '40px',\n  sheetGrabberH: '4px',\n  readoutW: '40px',\n  sliderW: '96px',\n  paletteMinW: '96px',\n  deviceBarW: '96px',\n  // Calendar grids: the time-label column and the day-header row.\n  timeGutterW: '64px',\n  dayHeaderH: '46px',\n  // Timeline: the row-label column beside the date track.\n  timelineLabelW: '180px',\n  // AppShell's bar below its collapse point: a touch-target Menu button\n  // between spacing.sm above and below, plus the hairline under it.\n  appBarH: '61px',\n  // Drag-ghost thumbnail: the small preview image that follows the pointer.\n  dragThumbW: '132px',\n  dragThumbH: '99px',\n})\n","import {css} from 'react-strict-dom'\n\nexport const borders = css.defineVars({\n  hairline: '1px',\n  strong: '2px',\n  accent: '3px',\n  focusRing: '2px',\n  focusOffset: '2px',\n  focusOffsetSm: '1px',\n})\n","import {css} from 'react-strict-dom'\nimport type {LayerToken} from '../keys'\n\n// The z-index scale. Values are unitless strings so `--duro-layer-*` exists\n// for plain CSS; React Native takes a number, so a native overlay reads the\n// numeric LAYERS map from `@duro-app/tokens/keys` instead.\n//\n// They only compete inside one stacking context. Dialog, Drawer, the popups\n// and the toast region all portal into the ThemeProvider mount (`portal`),\n// and this is the order they keep there.\n// StyleX types a var by its literal, so string values would type every layer\n// as a string, which `zIndex` (a number) refuses. Typing the literals as CSS\n// integers makes `zIndex: layers.popup` a number to TypeScript; the cast has\n// no runtime effect (StyleX and the drift check read straight through it).\ntype LayerValue = ReturnType<typeof css.types.integer<number>>\n\nexport const layers = css.defineVars({\n  // A focused or sticky part above its siblings (a joined group's focus ring,\n  // a scrollbar, a sticky table header).\n  raised: '1',\n  // Floating chrome over the page: Tooltip, ActionBar.\n  floating: '50',\n  // A floating surface that must cover another floating one, outside a modal:\n  // a link editor over a selection format bar. Pair it with `popoverRaised`\n  // and pick by `useInModal()` (a Popover does it with `raised`). It covers a\n  // sibling floating surface, never a modal.\n  floatingRaised: '60',\n  // A modal's backdrop.\n  overlay: '1000',\n  // A modal's panel (Dialog, Drawer).\n  modal: '1001',\n  // Chrome that sits on a modal-level surface, above that surface's own\n  // parts: a sheet's toolbar over its bottom bar. Still below a Popover.\n  modalRaised: '1002',\n  // A Popover inside a Dialog or Drawer: above that modal, below the popups\n  // (a Select, a Menu) and the Select click-catcher opened from inside it.\n  // Outside a modal a Popover is `floating`, so a modal opened later covers it.\n  popover: '1040',\n  // `floatingRaised` inside a Dialog or Drawer: over a Popover there, under\n  // a popup's click-catcher and the popup itself.\n  popoverRaised: '1041',\n  // A popup's click-catcher, under the popup itself.\n  popupBackdrop: '1049',\n  // Popups: Select, Listbox, Menu — above a modal or Popover they open from.\n  popup: '1050',\n  // The toast region: above popups and modals.\n  toast: '1060',\n  // The ThemeProvider portal mount that holds all of the above.\n  portal: '1100',\n} as unknown as Readonly<Record<LayerToken, LayerValue>>)\n","import {css} from 'react-strict-dom'\n\n// Visual effects. Not themed.\n//\n// overlayBlur: the blur behind a modal's backdrop (a command palette, a\n// lightbox). Apply it ONLY on the backdrop element itself: a backdropFilter\n// (or filter) on an ancestor becomes the containing block for every fixed\n// descendant, so a Dialog or Drawer opened inside it is positioned against\n// that ancestor instead of the viewport.\n//\n// surfaceBlur: a frosted surface over imagery (a pill or a chip on a photo).\n// The same warning holds: put it ONLY on that surface element itself, never on\n// a wrapper that holds a Dialog, a Drawer or any fixed descendant.\nexport const effects = css.defineVars({\n  overlayBlur: 'blur(2px)',\n  surfaceBlur: 'blur(6px)',\n})\n","import {css} from 'react-strict-dom'\n\nexport const layoutSpacing = css.defineVars({\n  // Vertical rhythm (stack gaps)\n  stackXs: '4px',\n  stackSm: '8px',\n  stackMd: '16px',\n  stackLg: '24px',\n  stackXl: '48px',\n\n  // Horizontal rhythm (inline gaps)\n  inlineXs: '4px',\n  inlineSm: '8px',\n  inlineMd: '16px',\n  inlineLg: '24px',\n\n  // Container insets\n  containerSm: '16px',\n  containerMd: '24px',\n  containerLg: '32px',\n})\n","import {css} from 'react-strict-dom'\n\nexport const typography = css.defineVars({\n  fontFamily:\n    '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif',\n  fontFamilyMono: '\"SF Mono\", \"Fira Code\", \"Fira Mono\", \"Roboto Mono\", \"Courier New\", monospace',\n  fontSizeXs: '0.75rem',\n  fontSizeSm: '0.875rem',\n  fontSizeMd: '1rem',\n  fontSizeLg: '1.125rem',\n  fontSizeXl: '1.25rem',\n  fontSizeHeading: '1.5rem',\n  fontWeightNormal: '400',\n  fontWeightMedium: '500',\n  fontWeightSemibold: '600',\n  fontWeightBold: '700',\n  lineHeight: '1.5',\n})\n\nexport const typeScale = css.defineVars({\n  // 9-step font size scale\n  fontSize1: '0.75rem', // 12px — captions, badges\n  fontSize2: '0.8125rem', // 13px — small UI\n  fontSize3: '0.875rem', // 14px — default UI (buttons, inputs)\n  fontSize4: '1rem', // 16px — body text\n  fontSize5: '1.125rem', // 18px — body-lg\n  fontSize6: '1.25rem', // 20px — subheading\n  fontSize7: '1.5rem', // 24px — heading-sm\n  fontSize8: '1.875rem', // 30px — heading-md\n  fontSize9: '2.25rem', // 36px — heading-lg\n\n  // Matched line-heights\n  lineHeight1: '1rem', // 16px\n  lineHeight2: '1.25rem', // 20px\n  lineHeight3: '1.25rem', // 20px\n  lineHeight4: '1.5rem', // 24px\n  lineHeight5: '1.5rem', // 24px\n  lineHeight6: '1.75rem', // 28px\n  lineHeight7: '2rem', // 32px\n  lineHeight8: '2.25rem', // 36px\n  lineHeight9: '2.75rem', // 44px\n\n  // Fluid display sizes\n  displaySm: 'clamp(2.25rem, 1.5rem + 2vw, 3rem)', // 36–48px\n  displayMd: 'clamp(2.75rem, 1.75rem + 2.5vw, 3.75rem)', // 44–60px\n  displayLg: 'clamp(3.5rem, 2rem + 3.5vw, 4.5rem)', // 56–72px\n\n  // Letter-spacing\n  letterSpacingTight: '-0.02em',\n  letterSpacingNormal: '0',\n  letterSpacingWide: '0.04em',\n})\n","import {css} from 'react-strict-dom'\nimport {typography, typeScale} from './typography.css'\n\nexport const typePresets = css.create({\n  // Body\n  bodySm: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize3,\n    lineHeight: typeScale.lineHeight3,\n    fontWeight: typography.fontWeightNormal,\n    letterSpacing: typeScale.letterSpacingNormal,\n  },\n  bodyMd: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize4,\n    lineHeight: typeScale.lineHeight4,\n    fontWeight: typography.fontWeightNormal,\n    letterSpacing: typeScale.letterSpacingNormal,\n  },\n  bodyLg: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize5,\n    lineHeight: typeScale.lineHeight5,\n    fontWeight: typography.fontWeightNormal,\n    letterSpacing: typeScale.letterSpacingNormal,\n  },\n\n  // UI\n  caption: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize1,\n    lineHeight: typeScale.lineHeight1,\n    fontWeight: typography.fontWeightNormal,\n    letterSpacing: typeScale.letterSpacingWide,\n  },\n  label: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize3,\n    lineHeight: typeScale.lineHeight3,\n    fontWeight: typography.fontWeightMedium,\n    letterSpacing: typeScale.letterSpacingNormal,\n  },\n  code: {\n    fontFamily: typography.fontFamilyMono,\n    fontSize: typeScale.fontSize3,\n    lineHeight: typeScale.lineHeight3,\n    fontWeight: typography.fontWeightNormal,\n    letterSpacing: typeScale.letterSpacingNormal,\n  },\n  overline: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize1,\n    lineHeight: typeScale.lineHeight1,\n    fontWeight: typography.fontWeightSemibold,\n    letterSpacing: typeScale.letterSpacingWide,\n    textTransform: 'uppercase' as const,\n  },\n  overlineMd: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize3,\n    lineHeight: typeScale.lineHeight3,\n    fontWeight: typography.fontWeightSemibold,\n    letterSpacing: typeScale.letterSpacingWide,\n    textTransform: 'uppercase' as const,\n  },\n  overlineLg: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize4,\n    lineHeight: typeScale.lineHeight4,\n    fontWeight: typography.fontWeightSemibold,\n    letterSpacing: typeScale.letterSpacingWide,\n    textTransform: 'uppercase' as const,\n  },\n\n  // Heading\n  headingSm: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize6,\n    lineHeight: typeScale.lineHeight6,\n    fontWeight: typography.fontWeightSemibold,\n    letterSpacing: typeScale.letterSpacingTight,\n  },\n  headingMd: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize7,\n    lineHeight: typeScale.lineHeight7,\n    fontWeight: typography.fontWeightSemibold,\n    letterSpacing: typeScale.letterSpacingTight,\n  },\n  headingLg: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize8,\n    lineHeight: typeScale.lineHeight8,\n    fontWeight: typography.fontWeightBold,\n    letterSpacing: typeScale.letterSpacingTight,\n  },\n  headingXl: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize9,\n    lineHeight: typeScale.lineHeight9,\n    fontWeight: typography.fontWeightBold,\n    letterSpacing: typeScale.letterSpacingTight,\n  },\n\n  // Display (fluid)\n  displaySm: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.displaySm,\n    lineHeight: 1.2,\n    fontWeight: typography.fontWeightBold,\n    letterSpacing: typeScale.letterSpacingTight,\n  },\n  displayMd: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.displayMd,\n    lineHeight: 1.15,\n    fontWeight: typography.fontWeightBold,\n    letterSpacing: typeScale.letterSpacingTight,\n  },\n  displayLg: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.displayLg,\n    lineHeight: 1.1,\n    fontWeight: typography.fontWeightBold,\n    letterSpacing: typeScale.letterSpacingTight,\n  },\n})\n","import {css} from 'react-strict-dom'\n\nexport const shadows = css.defineVars({\n  sm: '0 2px 4px rgba(0, 0, 0, 0.3)',\n  md: '0 4px 12px rgba(0, 0, 0, 0.4)',\n  lg: '0 8px 24px rgba(0, 0, 0, 0.5)',\n  // DragDrop's drop-target rings: borders.hairline in colors.border on every\n  // zone that can receive, borders.strong in colors.accent on the one under the\n  // pointer. Literal per theme (StyleX needs inline literals); the drift check\n  // rebuilds each from the palette. Not focus: focus stays on outlines.\n  dropReady: 'inset 0 0 0 1px #333333',\n  dropOver: 'inset 0 0 0 2px #6aaffc',\n})\n","import {css} from 'react-strict-dom'\n\n/**\n * Motion timing tokens.\n *\n * Values are harvested from what the system already uses — nothing invented:\n * - durations: 150ms is the de-facto transition (Button, Card, and ~30 other\n *   spots), 200ms the common overlay enter (Drawer), 280ms the larger panel\n *   enter (DetailPanel). `instant` is for explicit no-motion.\n *   `quick` (List hover, sort indicator) and `brisk` (Toast enter) are the\n *   two other values components used; `minimal` is the 1ms reduced-motion\n *   duration that still fires animationend.\n * - easings: `standard` is the default `ease` used throughout; `easeOut` /\n *   `easeIn` are the \"Apple ease\" curves already defined for DetailPanel.\n *   `linear` is the Spinner's constant rotation.\n *\n * - `slower` (300ms enter), `stagger` (100ms between staggered list items) and\n *   the `emphasized` easing come from the ui interface guide\n *   (packages/cli/skills/ui), which gave them no token; issue #120.\n *\n * Reduced motion is handled globally (the `@media (prefers-reduced-motion)`\n * rule in the reset neutralizes timing) plus per-component transform guards, so\n * these stay as plain timing values.\n */\nexport const duration = css.defineVars({\n  instant: '0ms',\n  // Non-zero so animationend still fires under reduced motion.\n  minimal: '1ms',\n  quick: '120ms',\n  fast: '150ms',\n  brisk: '160ms',\n  base: '200ms',\n  slow: '280ms',\n  slower: '300ms',\n  stagger: '100ms',\n})\n\nexport const easing = css.defineVars({\n  standard: 'ease',\n  linear: 'linear',\n  easeOut: 'cubic-bezier(0.32, 0.72, 0, 1)',\n  easeIn: 'cubic-bezier(0.72, 0, 0.68, 0.28)',\n  emphasized: 'cubic-bezier(0.2, 0, 0, 1)',\n})\n","import {css} from 'react-strict-dom'\nimport {colors} from '../tokens/colors.css'\nimport {shadows} from '../tokens/shadows.css'\n\nexport const lightTheme = css.createTheme(colors, {\n  bg: '#ffffff',\n  bgCard: '#f5f5f5',\n  bgCardHover: '#ebebeb',\n  text: '#1a1a1a',\n  textMuted: '#4a4a4a',\n  accent: '#1e40af',\n  accentHover: '#1a3799',\n  accentContrast: '#ffffff',\n  border: '#d4d4d4',\n  error: '#991b1b',\n  errorHover: '#7f1d1d',\n  errorBg: 'rgba(153, 27, 27, 0.08)',\n  errorBorder: 'rgba(153, 27, 27, 0.3)',\n  errorText: '#7f1d1d',\n  errorContrast: '#ffffff',\n  success: '#166534',\n  successBg: 'rgba(22, 101, 52, 0.08)',\n  successBorder: 'rgba(22, 101, 52, 0.3)',\n  successText: '#14532d',\n  warning: '#92400e',\n  warningBg: 'rgba(146, 64, 14, 0.08)',\n  warningBorder: 'rgba(146, 64, 14, 0.3)',\n  warningText: '#78350f',\n  info: '#1e40af',\n  infoBg: 'rgba(30, 64, 175, 0.08)',\n  infoBorder: 'rgba(30, 64, 175, 0.3)',\n  infoText: '#1e40af',\n\n  // Highlight — a non-status accent (a category, an intent); no status meaning.\n  highlight: '#6b21a8',\n  highlightBg: 'rgba(107, 33, 168, 0.08)',\n  highlightBorder: 'rgba(107, 33, 168, 0.3)',\n  highlightText: '#581c87',\n  // Fixed overlays — the same in every theme (a scrim darkens whatever is\n  // under it; the inverse overlays sit on an accent surface).\n  scrim: 'rgba(0, 0, 0, 0.4)',\n  inverseFill: 'rgba(0, 0, 0, 0.10)',\n  inverseFillHover: 'rgba(0, 0, 0, 0.18)',\n  inverseBorder: 'rgba(0, 0, 0, 0.55)',\n  inverseBorderHover: 'rgba(0, 0, 0, 0.70)',\n  // A light that does not follow the theme (the Switch knob).\n  fixedLight: '#ffffff',\n  fixedDark: '#000000',\n  // A fixed translucent white over content (the light counterpart of scrim).\n  overlayLight: 'rgba(255, 255, 255, 0.78)',\n  // The opposite tone of the theme: a surface that stands out from the page\n  // (toasts, coach marks), with its own text colour. Not the fixed inverse*\n  // overlays above, which sit on an accent fill.\n  contrastSurface: '#1a1a1a',\n  onContrastSurface: '#e5e5e5',\n  // A border on contrastSurface, at least 3:1 against it (non-text).\n  contrastBorder: 'rgba(255, 255, 255, 0.33)',\n  bgInset: '#f0f0f0',\n  bgElevated: '#ffffff',\n  bgSelected: 'rgba(30, 64, 175, 0.12)',\n  pressOverlay: 'rgba(0, 0, 0, 0.08)',\n  ripple: 'rgba(0, 0, 0, 0.12)',\n  bgSectionTint: 'rgba(0, 0, 0, 0.03)',\n  borderSubtle: '#ebebeb',\n  borderStrong: '#a3a3a3',\n  surfaceHighlight: 'rgba(255, 255, 255, 0.7)',\n  textSubtle: '#6b6b6b',\n  textDisabled: '#a3a3a3',\n  neutral: '#525252',\n  neutralBg: 'rgba(82, 82, 82, 0.08)',\n  neutralBorder: 'rgba(82, 82, 82, 0.3)',\n  neutralText: '#404040',\n  active: '#1e40af',\n  activeBg: 'rgba(30, 64, 175, 0.08)',\n  activeBorder: 'rgba(30, 64, 175, 0.3)',\n  activeText: '#1e40af',\n  accentDisabled: 'rgba(30, 64, 175, 0.4)',\n  segmentTrack: 'rgba(0, 0, 0, 0.06)',\n  segmentActive: '#ffffff',\n  scrimSoft: 'rgba(0, 0, 0, 0.2)',\n  scrimStrong: 'rgba(0, 0, 0, 0.6)',\n  onScrimMuted: 'rgba(255, 255, 255, 0.72)',\n})\n\nexport const lightShadows = css.createTheme(shadows, {\n  sm: '0 2px 4px rgba(0, 0, 0, 0.08)',\n  md: '0 4px 12px rgba(0, 0, 0, 0.12)',\n  lg: '0 8px 24px rgba(0, 0, 0, 0.16)',\n  dropReady: 'inset 0 0 0 1px #d4d4d4',\n  dropOver: 'inset 0 0 0 2px #1e40af',\n})\n","import {css} from 'react-strict-dom'\nimport {colors} from '../tokens/colors.css'\nimport {shadows} from '../tokens/shadows.css'\n\nexport const highContrastTheme = css.createTheme(colors, {\n  bg: '#000000',\n  bgCard: '#111111',\n  bgCardHover: '#1a1a1a',\n  text: '#ffffff',\n  textMuted: '#b0b0b0',\n  accent: '#60a5fa',\n  accentHover: '#93c5fd',\n  accentContrast: '#000000',\n  border: '#555555',\n  error: '#f87171',\n  errorHover: '#fca5a5',\n  errorBg: 'rgba(248, 113, 113, 0.15)',\n  errorBorder: 'rgba(248, 113, 113, 0.5)',\n  errorText: '#fca5a5',\n  errorContrast: '#000000',\n  success: '#4ade80',\n  successBg: 'rgba(74, 222, 128, 0.15)',\n  successBorder: 'rgba(74, 222, 128, 0.5)',\n  successText: '#86efac',\n  warning: '#fcd34d',\n  warningBg: 'rgba(252, 211, 77, 0.15)',\n  warningBorder: 'rgba(252, 211, 77, 0.5)',\n  warningText: '#fef08a',\n  info: '#60a5fa',\n  infoBg: 'rgba(96, 165, 250, 0.15)',\n  infoBorder: 'rgba(96, 165, 250, 0.5)',\n  infoText: '#bfdbfe',\n\n  // Highlight — a non-status accent (a category, an intent); no status meaning.\n  highlight: '#d8b4fe',\n  highlightBg: 'rgba(216, 180, 254, 0.15)',\n  highlightBorder: 'rgba(216, 180, 254, 0.5)',\n  highlightText: '#e9d5ff',\n  // Fixed overlays — the same in every theme (a scrim darkens whatever is\n  // under it; the inverse overlays sit on an accent surface).\n  scrim: 'rgba(0, 0, 0, 0.4)',\n  inverseFill: 'rgba(0, 0, 0, 0.10)',\n  inverseFillHover: 'rgba(0, 0, 0, 0.18)',\n  inverseBorder: 'rgba(0, 0, 0, 0.55)',\n  inverseBorderHover: 'rgba(0, 0, 0, 0.70)',\n  // A light that does not follow the theme (the Switch knob).\n  fixedLight: '#ffffff',\n  fixedDark: '#000000',\n  // A fixed translucent white over content (the light counterpart of scrim).\n  overlayLight: 'rgba(255, 255, 255, 0.78)',\n  // The opposite tone of the theme: a surface that stands out from the page\n  // (toasts, coach marks), with its own text colour. Not the fixed inverse*\n  // overlays above, which sit on an accent fill.\n  contrastSurface: '#ffffff',\n  onContrastSurface: '#000000',\n  // A border on contrastSurface, at least 3:1 against it (non-text).\n  contrastBorder: 'rgba(0, 0, 0, 0.42)',\n  bgInset: '#0a0a0a',\n  bgElevated: '#1a1a1a',\n  bgSelected: 'rgba(96, 165, 250, 0.25)',\n  pressOverlay: 'rgba(255, 255, 255, 0.15)',\n  ripple: 'rgba(255, 255, 255, 0.2)',\n  bgSectionTint: 'rgba(255, 255, 255, 0.06)',\n  borderSubtle: '#333333',\n  borderStrong: '#888888',\n  surfaceHighlight: 'rgba(255, 255, 255, 0.15)',\n  textSubtle: '#a3a3a3',\n  textDisabled: '#808080',\n  neutral: '#d4d4d4',\n  neutralBg: 'rgba(212, 212, 212, 0.15)',\n  neutralBorder: 'rgba(212, 212, 212, 0.5)',\n  neutralText: '#e5e5e5',\n  active: '#60a5fa',\n  activeBg: 'rgba(96, 165, 250, 0.15)',\n  activeBorder: 'rgba(96, 165, 250, 0.5)',\n  activeText: '#bfdbfe',\n  accentDisabled: 'rgba(96, 165, 250, 0.5)',\n  segmentTrack: 'rgba(255, 255, 255, 0.12)',\n  segmentActive: '#333333',\n  scrimSoft: 'rgba(0, 0, 0, 0.3)',\n  scrimStrong: 'rgba(0, 0, 0, 0.7)',\n  onScrimMuted: 'rgba(255, 255, 255, 0.72)',\n})\n\nexport const highContrastShadows = css.createTheme(shadows, {\n  sm: '0 2px 4px rgba(0, 0, 0, 0.6)',\n  md: '0 4px 12px rgba(0, 0, 0, 0.7)',\n  lg: '0 8px 24px rgba(0, 0, 0, 0.8)',\n  dropReady: 'inset 0 0 0 1px #555555',\n  dropOver: 'inset 0 0 0 2px #60a5fa',\n})\n"],"names":["breakpoints","breakpointsPx","colors","spacing","microSpacing","radii","sizes","borders","layers","effects","layoutSpacing","typography","typeScale","typePresets","shadows","duration","easing","lightTheme","lightShadows","highContrastTheme","highContrastShadows"],"mappings":"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"}

package/dist/keys.d.ts

@@ -40,8 +40,15 @@ export declare const DURATION_MS: {
     readonly brisk: 160;
     readonly base: 200;
     readonly slow: 280;
+    readonly slower: 300;
+    readonly stagger: 100;
 };
-export type DurationToken = keyof typeof DURATION_MS;
+/**
+ * The durations an overlay can exit with. `slower` and `stagger` (enter and
+ * list-step timings) have no exit animation in the components yet, so they
+ * stay out of this type until one needs them.
+ */
+export type DurationToken = Exclude<keyof typeof DURATION_MS, 'slower' | 'stagger'>;
 export declare const SIZE_KEYS: readonly ["touchTarget", "controlSm", "controlMd", "controlLg", "indicator", "indicatorDot", "checkMarkW", "checkMarkH", "switchTrackW", "switchTrackH", "switchThumb", "iconButton", "iconButtonSm", "spinnerSm", "spinnerMd", "spinnerLg", "glyphXs", "glyphSm", "glyphMd", "iconSm", "iconMd", "iconLg", "iconXl", "iconXxl", "thumbSm", "mediaTileMinW", "glyphClampMax", "timeReadoutW", "navMarkerW", "navMarkerH", "divider", "tabIndicator", "edgeFade", "scrollbar", "swatchW", "swatchH", "labelMinW", "popupMinW", "listMaxH", "listMaxHSm", "dialogSm", "dialogMd", "dialogLg", "panelSm", "panelMd", "panelLg", "toastMaxW", "gridColSm", "gridColMd", "pageSm", "pageMd", "pageLg", "sidebarW", "pageXs", "pageXl", "asideW", "gridColXs", "fieldMinWSm", "fieldMinW", "popoverWSm", "popoverW", "popupMaxW", "meterH", "skeletonChipW", "dropZoneMinH", "canvasMinH", "editorMinH", "toolbarH", "embedW", "colorPickerW", "colorAreaH", "colorTrackH", "colorSwatch", "colorPreviewH", "handle", "chip", "placeholderMinH", "previewMaxH", "barH", "sheetGrabberW", "sheetGrabberH", "readoutW", "sliderW", "paletteMinW", "deviceBarW", "timeGutterW", "dayHeaderH", "timelineLabelW", "appBarH", "dragThumbW", "dragThumbH"];
 export type SizeToken = (typeof SIZE_KEYS)[number];
 export declare const SIZES_PX: {
@@ -222,6 +229,7 @@ export declare const EASINGS: {
     readonly linear: "linear";
     readonly easeOut: "cubic-bezier(0.32, 0.72, 0, 1)";
     readonly easeIn: "cubic-bezier(0.72, 0, 0.68, 0.28)";
+    readonly emphasized: "cubic-bezier(0.2, 0, 0, 1)";
 };
 export type ColorToken = keyof RawColors;
 export type { Breakpoint } from './tokens/breakpoints.css.js';

package/dist/keys.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"keys.d.ts","sourceRoot":"","sources":["../src/keys.ts"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,UAAU,CAAA;AAEvC,eAAO,MAAM,YAAY,8DAA+D,CAAA;AACxF,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;AAGxD,eAAO,MAAM,UAAU;;;;;;;;;CASb,CAAA;AAGV,eAAO,MAAM,kBAAkB,8CAA+C,CAAA;AAC9E,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAA;AACnE,eAAO,MAAM,gBAAgB;;;;;;CAMnB,CAAA;AAEV,eAAO,MAAM,WAAW,kDAAmD,CAAA;AAC3E,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAGtD,eAAO,MAAM,QAAQ;;;;;;;CAOX,CAAA;AAEV,eAAO,MAAM,WAAW,sDAAuD,CAAA;AAC/E,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAGtD,eAAO,MAAM,WAAW;;;;;;;;CAQd,CAAA;AACV,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,WAAW,CAAA;AAEpD,eAAO,MAAM,SAAS,+qCA4FZ,CAAA;AACV,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAA;AAGlD,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4FX,CAAA;AAEV,eAAO,MAAM,WAAW,wFAOd,CAAA;AACV,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAGtD,eAAO,MAAM,UAAU;;;;;;;CAOb,CAAA;AAEV,eAAO,MAAM,UAAU,+JAab,CAAA;AACV,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAA;AAIpD,eAAO,MAAM,MAAM;;;;;;;;;;;;;CAaT,CAAA;AAEV,eAAO,MAAM,WAAW,yCAA0C,CAAA;AAClE,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAGtD,eAAO,MAAM,OAAO;;;CAGV,CAAA;AAKV,eAAO,MAAM,UAAU;;;;;;CAMb,CAAA;AACV,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,UAAU,CAAA;AAK9C,eAAO,MAAM,eAAe,yCAA0C,CAAA;AACtE,eAAO,MAAM,cAAc;;;;;;CAMjB,CAAA;AAGV,eAAO,MAAM,aAAa;;;;;;;CAOhB,CAAA;AAGV,eAAO,MAAM,YAAY;;;;;CAKf,CAAA;AAGV,eAAO,MAAM,wBAAwB;;;;;;;;;;CAU3B,CAAA;AAGV,eAAO,MAAM,OAAO;;;;;;CAMV,CAAA;AAGV,eAAO,MAAM,OAAO;;;;;CAKV,CAAA;AAEV,MAAM,MAAM,UAAU,GAAG,MAAM,SAAS,CAAA;AAExC,YAAY,EAAC,UAAU,EAAC,MAAM,6BAA6B,CAAA"}
+{"version":3,"file":"keys.d.ts","sourceRoot":"","sources":["../src/keys.ts"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,UAAU,CAAA;AAEvC,eAAO,MAAM,YAAY,8DAA+D,CAAA;AACxF,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;AAGxD,eAAO,MAAM,UAAU;;;;;;;;;CASb,CAAA;AAGV,eAAO,MAAM,kBAAkB,8CAA+C,CAAA;AAC9E,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAA;AACnE,eAAO,MAAM,gBAAgB;;;;;;CAMnB,CAAA;AAEV,eAAO,MAAM,WAAW,kDAAmD,CAAA;AAC3E,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAGtD,eAAO,MAAM,QAAQ;;;;;;;CAOX,CAAA;AAEV,eAAO,MAAM,WAAW,sDAAuD,CAAA;AAC/E,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAGtD,eAAO,MAAM,WAAW;;;;;;;;;;CAUd,CAAA;AACV;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG,OAAO,CAAC,MAAM,OAAO,WAAW,EAAE,QAAQ,GAAG,SAAS,CAAC,CAAA;AAEnF,eAAO,MAAM,SAAS,+qCA4FZ,CAAA;AACV,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAA;AAGlD,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4FX,CAAA;AAEV,eAAO,MAAM,WAAW,wFAOd,CAAA;AACV,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAGtD,eAAO,MAAM,UAAU;;;;;;;CAOb,CAAA;AAEV,eAAO,MAAM,UAAU,+JAab,CAAA;AACV,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAA;AAIpD,eAAO,MAAM,MAAM;;;;;;;;;;;;;CAaT,CAAA;AAEV,eAAO,MAAM,WAAW,yCAA0C,CAAA;AAClE,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAGtD,eAAO,MAAM,OAAO;;;CAGV,CAAA;AAKV,eAAO,MAAM,UAAU;;;;;;CAMb,CAAA;AACV,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,UAAU,CAAA;AAK9C,eAAO,MAAM,eAAe,yCAA0C,CAAA;AACtE,eAAO,MAAM,cAAc;;;;;;CAMjB,CAAA;AAGV,eAAO,MAAM,aAAa;;;;;;;CAOhB,CAAA;AAGV,eAAO,MAAM,YAAY;;;;;CAKf,CAAA;AAGV,eAAO,MAAM,wBAAwB;;;;;;;;;;CAU3B,CAAA;AAGV,eAAO,MAAM,OAAO;;;;;;CAMV,CAAA;AAGV,eAAO,MAAM,OAAO;;;;;;CAMV,CAAA;AAEV,MAAM,MAAM,UAAU,GAAG,MAAM,SAAS,CAAA;AAExC,YAAY,EAAC,UAAU,EAAC,MAAM,6BAA6B,CAAA"}

package/dist/mockup.css

@@ -282,9 +282,12 @@
   --duro-duration-minimal: 1ms;
   --duro-duration-quick: 120ms;
   --duro-duration-slow: 280ms;
+  --duro-duration-slower: 300ms;
+  --duro-duration-stagger: 100ms;
   /* easing */
   --duro-easing-ease-in: cubic-bezier(0.72, 0, 0.68, 0.28);
   --duro-easing-ease-out: cubic-bezier(0.32, 0.72, 0, 1);
+  --duro-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
   --duro-easing-linear: linear;
   --duro-easing-standard: ease;
   /* breakpoints */

package/dist/tokens/motion.css.d.ts

@@ -13,6 +13,10 @@ import { css } from 'react-strict-dom';
  *   `easeIn` are the "Apple ease" curves already defined for DetailPanel.
  *   `linear` is the Spinner's constant rotation.
  *
+ * - `slower` (300ms enter), `stagger` (100ms between staggered list items) and
+ *   the `emphasized` easing come from the ui interface guide
+ *   (packages/cli/skills/ui), which gave them no token; issue #120.
+ *
  * Reduced motion is handled globally (the `@media (prefers-reduced-motion)`
  * rule in the reset neutralizes timing) plus per-component transform guards, so
  * these stay as plain timing values.
@@ -25,11 +29,14 @@ export declare const duration: css.VarGroup<Readonly<{
     brisk: string;
     base: string;
     slow: string;
+    slower: string;
+    stagger: string;
 }>, symbol>;
 export declare const easing: css.VarGroup<Readonly<{
     standard: string;
     linear: string;
     easeOut: string;
     easeIn: string;
+    emphasized: string;
 }>, symbol>;
 //# sourceMappingURL=motion.css.d.ts.map

package/dist/tokens/motion.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"motion.css.d.ts","sourceRoot":"","sources":["../../src/tokens/motion.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAEpC;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,QAAQ;;;;;;;;WASnB,CAAA;AAEF,eAAO,MAAM,MAAM;;;;;WAKjB,CAAA"}
+{"version":3,"file":"motion.css.d.ts","sourceRoot":"","sources":["../../src/tokens/motion.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAEpC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,QAAQ;;;;;;;;;;WAWnB,CAAA;AAEF,eAAO,MAAM,MAAM;;;;;;WAMjB,CAAA"}

package/dist/tokens/type-presets.css.d.ts

@@ -50,6 +50,22 @@ export declare const typePresets: Readonly<{
         readonly letterSpacing: css.StyleXClassNameFor<"letterSpacing", string>;
         readonly textTransform: css.StyleXClassNameFor<"textTransform", "uppercase">;
     }>;
+    readonly overlineMd: Readonly<{
+        readonly fontFamily: css.StyleXClassNameFor<"fontFamily", string>;
+        readonly fontSize: css.StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: css.StyleXClassNameFor<"lineHeight", string>;
+        readonly fontWeight: css.StyleXClassNameFor<"fontWeight", string>;
+        readonly letterSpacing: css.StyleXClassNameFor<"letterSpacing", string>;
+        readonly textTransform: css.StyleXClassNameFor<"textTransform", "uppercase">;
+    }>;
+    readonly overlineLg: Readonly<{
+        readonly fontFamily: css.StyleXClassNameFor<"fontFamily", string>;
+        readonly fontSize: css.StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: css.StyleXClassNameFor<"lineHeight", string>;
+        readonly fontWeight: css.StyleXClassNameFor<"fontWeight", string>;
+        readonly letterSpacing: css.StyleXClassNameFor<"letterSpacing", string>;
+        readonly textTransform: css.StyleXClassNameFor<"textTransform", "uppercase">;
+    }>;
     readonly headingSm: Readonly<{
         readonly fontFamily: css.StyleXClassNameFor<"fontFamily", string>;
         readonly fontSize: css.StyleXClassNameFor<"fontSize", string>;

package/dist/tokens/type-presets.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"type-presets.css.d.ts","sourceRoot":"","sources":["../../src/tokens/type-presets.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAGpC,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2GtB,CAAA"}
+{"version":3,"file":"type-presets.css.d.ts","sourceRoot":"","sources":["../../src/tokens/type-presets.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAGpC,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2HtB,CAAA"}

package/dist/vars.css

@@ -283,9 +283,12 @@
   --duro-duration-minimal: var(--minimal-x39oeki);
   --duro-duration-quick: var(--quick-xmb6uht);
   --duro-duration-slow: var(--slow-xtti36c);
+  --duro-duration-slower: var(--slower-xh107jv);
+  --duro-duration-stagger: var(--stagger-x1sxk607);
   /* easing */
   --duro-easing-ease-in: var(--easeIn-xxaysck);
   --duro-easing-ease-out: var(--easeOut-x1dtgzac);
+  --duro-easing-emphasized: var(--emphasized-x108jlz4);
   --duro-easing-linear: var(--linear-x13iskbu);
   --duro-easing-standard: var(--standard-xg4ngex);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/tokens",
-  "version": "5.19.0",
+  "version": "5.21.0",
   "type": "module",
   "license": "MIT",
   "repository": {

package/src/keys.ts

@@ -67,8 +67,15 @@ export const DURATION_MS = {
   brisk: 160,
   base: 200,
   slow: 280,
+  slower: 300,
+  stagger: 100,
 } as const
-export type DurationToken = keyof typeof DURATION_MS
+/**
+ * The durations an overlay can exit with. `slower` and `stagger` (enter and
+ * list-step timings) have no exit animation in the components yet, so they
+ * stay out of this type until one needs them.
+ */
+export type DurationToken = Exclude<keyof typeof DURATION_MS, 'slower' | 'stagger'>
 
 export const SIZE_KEYS = [
   'touchTarget',
@@ -392,6 +399,7 @@ export const EASINGS = {
   linear: 'linear',
   easeOut: 'cubic-bezier(0.32, 0.72, 0, 1)',
   easeIn: 'cubic-bezier(0.72, 0, 0.68, 0.28)',
+  emphasized: 'cubic-bezier(0.2, 0, 0, 1)',
 } as const
 
 export type ColorToken = keyof RawColors

package/src/tokens/motion.css.ts

@@ -14,6 +14,10 @@ import {css} from 'react-strict-dom'
  *   `easeIn` are the "Apple ease" curves already defined for DetailPanel.
  *   `linear` is the Spinner's constant rotation.
  *
+ * - `slower` (300ms enter), `stagger` (100ms between staggered list items) and
+ *   the `emphasized` easing come from the ui interface guide
+ *   (packages/cli/skills/ui), which gave them no token; issue #120.
+ *
  * Reduced motion is handled globally (the `@media (prefers-reduced-motion)`
  * rule in the reset neutralizes timing) plus per-component transform guards, so
  * these stay as plain timing values.
@@ -27,6 +31,8 @@ export const duration = css.defineVars({
   brisk: '160ms',
   base: '200ms',
   slow: '280ms',
+  slower: '300ms',
+  stagger: '100ms',
 })
 
 export const easing = css.defineVars({
@@ -34,4 +40,5 @@ export const easing = css.defineVars({
   linear: 'linear',
   easeOut: 'cubic-bezier(0.32, 0.72, 0, 1)',
   easeIn: 'cubic-bezier(0.72, 0, 0.68, 0.28)',
+  emphasized: 'cubic-bezier(0.2, 0, 0, 1)',
 })

package/src/tokens/type-presets.css.ts

@@ -55,6 +55,22 @@ export const typePresets = css.create({
     letterSpacing: typeScale.letterSpacingWide,
     textTransform: 'uppercase' as const,
   },
+  overlineMd: {
+    fontFamily: typography.fontFamily,
+    fontSize: typeScale.fontSize3,
+    lineHeight: typeScale.lineHeight3,
+    fontWeight: typography.fontWeightSemibold,
+    letterSpacing: typeScale.letterSpacingWide,
+    textTransform: 'uppercase' as const,
+  },
+  overlineLg: {
+    fontFamily: typography.fontFamily,
+    fontSize: typeScale.fontSize4,
+    lineHeight: typeScale.lineHeight4,
+    fontWeight: typography.fontWeightSemibold,
+    letterSpacing: typeScale.letterSpacingWide,
+    textTransform: 'uppercase' as const,
+  },
 
   // Heading
   headingSm: {