@hirobius/design-system 0.8.1

package/dist/tokens.js

@@ -0,0 +1,693 @@
+const a = {
+  primitive: {
+    color: {
+      neutral: {
+        50: "#fafafa",
+        100: "#f5f5f5",
+        200: "#e5e5e5",
+        300: "#d4d4d4",
+        400: "#a3a3a3",
+        500: "#737373",
+        600: "#525252",
+        700: "#404040",
+        800: "#262626",
+        850: "#1a1a1a",
+        900: "#111111",
+        950: "#0a0a0a",
+        white: "#ffffff",
+        black: "#000000"
+      },
+      blue: {
+        50: "oklch(0.96 0.03 266.54)",
+        100: "oklch(0.92 0.04 266.54)",
+        200: "oklch(0.88 0.07 266.54)",
+        300: "oklch(0.70 0.2903 266.54)",
+        400: "oklch(0.65 0.2903 266.54)",
+        450: "oklch(0.56 0.29 266.60)",
+        500: "#1E2EFD",
+        600: "oklch(0.45 0.2903 266.54)",
+        700: "oklch(0.44 0.2903 266.54)",
+        800: "oklch(0.30 0.07 266.54)",
+        900: "oklch(0.22 0.05 266.54)"
+      },
+      red: {
+        50: "#fef2f2",
+        400: "#f87171",
+        700: "#b91c1c",
+        950: "#450a0a"
+      },
+      green: {
+        50: "#ecfdf5",
+        400: "#34d399",
+        700: "#047857",
+        950: "#022c22"
+      },
+      amber: {
+        50: "#fffbeb",
+        400: "#fbbf24",
+        800: "#92400e",
+        950: "#451a03"
+      },
+      stone: {
+        100: "#F5EFE7",
+        400: "#D0B492",
+        450: "#BC9D7E",
+        500: "#A8896A",
+        600: "#8B6F47",
+        700: "#75593A",
+        800: "#5C432A",
+        950: "#3A2E1F"
+      },
+      projectBrand: {
+        microsoftGameDev: {
+          100: "#E5E5FC",
+          500: "#6d31fb",
+          900: "oklch(0.22 0.16 304)"
+        }
+      }
+    },
+    space: {
+      0: "0px",
+      1: "4px",
+      2: "8px",
+      3: "12px",
+      4: "16px",
+      5: "20px",
+      6: "24px",
+      7: "28px",
+      8: "32px",
+      10: "40px",
+      12: "48px",
+      16: "64px",
+      20: "80px",
+      24: "96px",
+      32: "128px",
+      px1: "1px",
+      px2: "2px",
+      px6: "6px",
+      px10: "10px"
+    },
+    blur: {
+      8: "8px",
+      16: "16px"
+    },
+    radius: {
+      0: "0px",
+      2: "2px",
+      4: "4px",
+      8: "8px",
+      12: "12px",
+      full: "9999px"
+    },
+    typography: {
+      family: {
+        primary: ["Satoshi", "system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "sans-serif"],
+        display: ["Clash Display", "system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "sans-serif"],
+        mono: ["Geist Mono", "Courier New", "monospace"]
+      },
+      size: {
+        "2xs": "10px",
+        xs: "13px",
+        sm: "15px",
+        base: "17px",
+        lg: "20px",
+        xl: "24px",
+        "2xl": "30px",
+        "3xl": "36px",
+        "4xl": "48px",
+        "5xl": "80px",
+        "7xl": "72px"
+      },
+      weight: {
+        light: "300",
+        regular: "400",
+        medium: "500",
+        semibold: "600",
+        bold: "700"
+      },
+      lineHeight: {
+        compact: "0.95",
+        none: "1",
+        tight: "1.25",
+        snug: "1.375",
+        normal: "1.5",
+        relaxed: "1.625"
+      },
+      letterSpacing: {
+        tighter: "-0.02em",
+        tight: "-0.01em",
+        normal: "0em",
+        wide: "0.01em",
+        wider: "0.02em",
+        caps: "0.06em"
+      }
+    },
+    duration: {
+      instant: "100ms",
+      short: "150ms",
+      medium: "250ms",
+      long: "400ms"
+    },
+    easing: {
+      emphasized: "cubic-bezier(0.4, 0, 0.2, 1)",
+      decelerate: "cubic-bezier(0, 0, 0.2, 1)",
+      accelerate: "cubic-bezier(0.4, 0, 1, 1)",
+      elastic: "spring(300, 20, 1)"
+    },
+    shadow: {
+      color: "220 13% 18%"
+    },
+    breakpoint: {
+      xs: "375px",
+      sm: "640px",
+      md: "768px",
+      lg: "1024px",
+      xl: "1280px"
+    },
+    size: {
+      8: "8px",
+      10: "10px",
+      12: "12px",
+      16: "16px",
+      20: "20px",
+      24: "24px",
+      32: "32px",
+      40: "40px",
+      48: "48px",
+      64: "64px",
+      80: "80px",
+      96: "96px",
+      interactive: {
+        min: "44px"
+      },
+      width: {
+        96: "96px",
+        760: "760px",
+        1200: "1200px",
+        "50ch": "50ch"
+      }
+    },
+    grid: {
+      columns: {
+        1: "1",
+        2: "2",
+        3: "3"
+      }
+    },
+    zIndex: {
+      0: "0",
+      10: "10",
+      100: "100",
+      1e3: "1000"
+    },
+    borderWidth: {
+      xs: "1px",
+      sm: "2px",
+      md: "4px"
+    }
+  }
+}, i = {
+  primitive: {
+    breakpoint: {
+      xs: "var(--primitive-breakpoint-xs)",
+      sm: "var(--primitive-breakpoint-sm)",
+      md: "var(--primitive-breakpoint-md)",
+      lg: "var(--primitive-breakpoint-lg)",
+      xl: "var(--primitive-breakpoint-xl)"
+    }
+  },
+  semantic: {
+    layout: {
+      container: {
+        maxWidth: "var(--semantic-layout-container-maxWidth)"
+      },
+      content: {
+        maxWidth: "var(--semantic-layout-content-maxWidth)"
+      },
+      prose: {
+        maxWidth: "var(--semantic-layout-prose-maxWidth)"
+      },
+      section: {
+        paddingY: "var(--semantic-layout-section-paddingY)"
+      },
+      grid: {
+        gap: "var(--semantic-layout-grid-gap)"
+      }
+    },
+    typography: {
+      display: {
+        fontFamily: "var(--semantic-typography-display-font-family)",
+        fontSize: "var(--semantic-typography-display-font-size)",
+        fontWeight: "var(--semantic-typography-display-font-weight)",
+        letterSpacing: "var(--semantic-typography-display-letter-spacing)",
+        lineHeight: "var(--semantic-typography-display-line-height)"
+      },
+      h1: {
+        fontFamily: "var(--semantic-typography-h1-font-family)",
+        fontSize: "var(--semantic-typography-h1-font-size)",
+        fontWeight: "var(--semantic-typography-h1-font-weight)",
+        letterSpacing: "var(--semantic-typography-h1-letter-spacing)",
+        lineHeight: "var(--semantic-typography-h1-line-height)"
+      },
+      h2: {
+        fontFamily: "var(--semantic-typography-h2-font-family)",
+        fontSize: "var(--semantic-typography-h2-font-size)",
+        fontWeight: "var(--semantic-typography-h2-font-weight)",
+        letterSpacing: "var(--semantic-typography-h2-letter-spacing)",
+        lineHeight: "var(--semantic-typography-h2-line-height)"
+      },
+      h3: {
+        fontFamily: "var(--semantic-typography-h3-font-family)",
+        fontSize: "var(--semantic-typography-h3-font-size)",
+        fontWeight: "var(--semantic-typography-h3-font-weight)",
+        letterSpacing: "var(--semantic-typography-h3-letter-spacing)",
+        lineHeight: "var(--semantic-typography-h3-line-height)"
+      },
+      body: {
+        fontFamily: "var(--semantic-typography-body-font-family)",
+        fontSize: "var(--semantic-typography-body-font-size)",
+        fontWeight: "var(--semantic-typography-body-font-weight)",
+        letterSpacing: "var(--semantic-typography-body-letter-spacing)",
+        lineHeight: "var(--semantic-typography-body-line-height)",
+        maxWidth: "var(--semantic-typography-body-max-width)"
+      },
+      ui: {
+        fontFamily: "var(--semantic-typography-ui-font-family)",
+        fontSize: "var(--semantic-typography-ui-font-size)",
+        fontWeight: "var(--semantic-typography-ui-font-weight)",
+        letterSpacing: "var(--semantic-typography-ui-letter-spacing)",
+        lineHeight: "var(--semantic-typography-ui-line-height)",
+        maxWidth: "var(--semantic-typography-ui-max-width)"
+      },
+      eyebrow: {
+        fontFamily: "var(--semantic-typography-eyebrow-font-family)",
+        fontSize: "var(--semantic-typography-eyebrow-font-size)",
+        fontWeight: "var(--semantic-typography-eyebrow-font-weight)",
+        letterSpacing: "var(--semantic-typography-eyebrow-letter-spacing)",
+        lineHeight: "var(--semantic-typography-eyebrow-line-height)",
+        textTransform: "var(--semantic-typography-eyebrow-text-transform)"
+      },
+      mono: {
+        fontFamily: "var(--semantic-typography-mono-font-family)",
+        fontSize: "var(--semantic-typography-mono-font-size)",
+        fontWeight: "var(--semantic-typography-mono-font-weight)",
+        letterSpacing: "var(--semantic-typography-mono-letter-spacing)",
+        lineHeight: "var(--semantic-typography-mono-line-height)",
+        maxWidth: "var(--semantic-typography-mono-max-width)"
+      }
+    },
+    accent: {
+      rest: "var(--semantic-accent-rest)",
+      hover: "var(--semantic-accent-hover)",
+      pressed: "var(--semantic-accent-pressed)",
+      disabled: "var(--semantic-accent-disabled)",
+      subtle: "var(--semantic-accent-subtle)"
+    }
+  }
+};
+function c(r) {
+  const t = r ? "dark" : "light";
+  return {
+    // Backgrounds
+    bg: e.color.surface.page[t],
+    panelBg: e.color.surface.raised[t],
+    fill: "var(--semantic-color-surface-raised)",
+    hover: "var(--semantic-color-surface-accentSubtle)",
+    brandTint: "var(--semantic-color-surface-accentSubtle)",
+    // Content
+    content: {
+      primary: "var(--semantic-color-content-primary)",
+      secondary: "var(--semantic-color-content-secondary)",
+      subtle: "var(--semantic-color-content-secondary)",
+      faint: "var(--semantic-color-content-disabled)"
+    },
+    // Borders & dividers
+    border: "var(--semantic-color-border-default)",
+    rule: "var(--semantic-color-border-default)",
+    // Brand & semantic
+    accent: e.color.brand,
+    blueBar: r ? e.color.blue[400] : e.color.blue[300],
+    success: e.color.feedback.success[t],
+    danger: e.color.feedback.error[t],
+    warning: e.color.feedback.warning[t],
+    info: e.color.feedback.info[t]
+  };
+}
+const o = "var(--primitive-typography-family-primary)", n = "var(--primitive-typography-family-mono)", p = (r) => parseFloat(r) / 1e3, s = {
+  productive: {
+    duration: p(a.primitive.duration.short),
+    easing: [0, 0, 0.2, 1]
+  },
+  expressive: {
+    duration: p(a.primitive.duration.medium),
+    easing: { type: "spring", stiffness: 300, damping: 20, mass: 1 }
+  },
+  spatial: {
+    duration: p(a.primitive.duration.long),
+    easing: [0.4, 0, 0.2, 1]
+  },
+  exit: {
+    duration: p(a.primitive.duration.instant),
+    easing: [0.4, 0, 1, 1]
+  }
+}, e = {
+  // ── Colors ──────────────────────────────────────────────────────────────────
+  color: {
+    brand: "var(--primitive-color-blue-500)",
+    // primitive — use only where dark mode adaptation isn't needed (e.g. bg fills)
+    content: {
+      primary: "var(--semantic-color-content-primary)",
+      // semantic — main content and headings
+      secondary: "var(--semantic-color-content-secondary)",
+      // semantic — subdued content and captions
+      disabled: "var(--semantic-color-content-disabled)",
+      // semantic — disabled / placeholder content
+      inverse: "var(--semantic-color-content-inverse)",
+      // semantic — content on dark surfaces
+      accent: "var(--semantic-color-content-accent)",
+      // semantic — links and interactive content
+      onAccent: "var(--semantic-color-content-onAccent)"
+      // semantic — content on accent surfaces
+    },
+    brandPressed: "var(--primitive-color-blue-600)",
+    brandRGB: "30,46,253",
+    white: "var(--primitive-color-neutral-white)",
+    surface: {
+      page: { dark: "var(--semantic-color-surface-page)", light: "var(--semantic-color-surface-page)" },
+      raised: { dark: "var(--semantic-color-surface-raised)", light: "var(--semantic-color-surface-raised)" }
+    },
+    blue: {
+      50: "var(--primitive-color-blue-50)",
+      100: "var(--primitive-color-blue-100)",
+      200: "var(--primitive-color-blue-200)",
+      300: "var(--primitive-color-blue-300)",
+      400: "var(--primitive-color-blue-400)",
+      450: "var(--primitive-color-blue-450)",
+      500: "var(--primitive-color-blue-500)",
+      600: "var(--primitive-color-blue-600)",
+      700: "var(--primitive-color-blue-700)",
+      800: "var(--primitive-color-blue-800)",
+      900: "var(--primitive-color-blue-900)"
+    },
+    feedback: {
+      success: { dark: a.primitive.color.green[400], light: a.primitive.color.green[700] },
+      warning: { dark: a.primitive.color.amber[400], light: a.primitive.color.amber[800] },
+      error: { dark: a.primitive.color.red[400], light: a.primitive.color.red[700] },
+      info: { dark: a.primitive.color.blue[300], light: a.primitive.color.blue[500] }
+    }
+  },
+  // ── Typography ───────────────────────────────────────────────────────────────
+  fontFamily: o,
+  monoFamily: n,
+  fontSize: {
+    "2xs": "var(--primitive-typography-size-2xs)",
+    xs: "var(--primitive-typography-size-xs)",
+    sm: "var(--primitive-typography-size-sm)",
+    base: "var(--primitive-typography-size-base)",
+    lg: "var(--primitive-typography-size-lg)",
+    xl: "var(--primitive-typography-size-xl)",
+    "2xl": "var(--primitive-typography-size-2xl)",
+    "3xl": "var(--primitive-typography-size-3xl)",
+    "4xl": "var(--primitive-typography-size-4xl)",
+    "5xl": "var(--primitive-typography-size-5xl)"
+  },
+  fontWeight: {
+    regular: "var(--primitive-typography-weight-regular)",
+    medium: "var(--primitive-typography-weight-medium)",
+    semibold: "var(--primitive-typography-weight-semibold)",
+    bold: "var(--primitive-typography-weight-bold)"
+  },
+  lineHeight: {
+    compact: "var(--primitive-typography-lineHeight-compact)",
+    none: "var(--primitive-typography-lineHeight-none)",
+    tight: "var(--primitive-typography-lineHeight-tight)",
+    snug: "var(--primitive-typography-lineHeight-snug)",
+    normal: "var(--primitive-typography-lineHeight-normal)",
+    relaxed: "var(--primitive-typography-lineHeight-relaxed)"
+  },
+  letterSpacing: {
+    tighter: "var(--primitive-typography-letterSpacing-tighter)",
+    tight: "var(--primitive-typography-letterSpacing-tight)",
+    normal: "var(--primitive-typography-letterSpacing-normal)",
+    wide: "var(--primitive-typography-letterSpacing-wide)",
+    wider: "var(--primitive-typography-letterSpacing-wider)"
+  },
+  semantic: {
+    color: {
+      accent: {
+        rest: i.semantic.accent.rest,
+        hover: i.semantic.accent.hover,
+        pressed: i.semantic.accent.pressed,
+        subtle: i.semantic.accent.subtle,
+        disabled: i.semantic.accent.disabled
+      }
+    },
+    space: {
+      subgrid: {
+        gap: "var(--semantic-space-subgrid-gap)",
+        hairline: "var(--semantic-space-subgrid-hairline)",
+        xs: "var(--semantic-space-subgrid-xs)"
+      },
+      component: {
+        padding: "var(--semantic-space-component-padding)",
+        gap: "var(--semantic-space-component-gap)"
+      },
+      stack: {
+        gap: "var(--semantic-space-section-stack)"
+      },
+      layout: {
+        gutter: "var(--semantic-space-layout-gutter)",
+        gap: "var(--semantic-space-layout-gap)",
+        section: "var(--semantic-layout-section-paddingY)"
+      },
+      section: {
+        stack: "var(--semantic-space-section-stack)",
+        inset: "var(--semantic-space-section-inset)"
+      },
+      sidebar: {
+        indent: "var(--semantic-space-sidebar-indent)",
+        gap: "var(--semantic-space-sidebar-gap)",
+        sectionGap: "var(--semantic-space-sidebar-sectionGap)",
+        railPadding: "var(--semantic-space-sidebar-railPadding)"
+      }
+    },
+    typography: {
+      label: i.semantic.typography.ui,
+      labelDescriptive: i.semantic.typography.ui,
+      labelTechnical: i.semantic.typography.mono
+    }
+  },
+  // Each style object spreads directly into a React inline style prop.
+  // CSS vars resolve at paint time — no hardcoded pixel values.
+  typeStyles: {
+    // ── Canonical composites (Adrian directive 2026-05-04) ────────────────────
+    // 7 roles. body/ui/eyebrow/mono carry maxWidth: 60ch where appropriate.
+    // Eyebrow bakes text-transform: uppercase + caps tracking into the token —
+    // never re-apply textTransform inline. Casing changes are eyebrow-only.
+    display: i.semantic.typography.display,
+    h1: i.semantic.typography.h1,
+    h2: i.semantic.typography.h2,
+    h3: i.semantic.typography.h3,
+    body: i.semantic.typography.body,
+    ui: i.semantic.typography.ui,
+    eyebrow: i.semantic.typography.eyebrow,
+    mono: i.semantic.typography.mono,
+    // ── Migration aliases → canonical composites ──────────────────────────────
+    // Pre-2026-05-04 names map to the new roles. small → ui; caption → ui
+    // (sentence-case secondary text); the eyebrow-pattern callsites migrate
+    // explicitly to typeStyles.eyebrow as part of the ops-dashboard sweep.
+    small: i.semantic.typography.ui,
+    caption: i.semantic.typography.ui,
+    heading1: i.semantic.typography.h1,
+    heading2: i.semantic.typography.h2,
+    heading3: i.semantic.typography.h3,
+    technical: i.semantic.typography.mono,
+    badge: i.semantic.typography.eyebrow,
+    micro: i.semantic.typography.eyebrow,
+    displayXl: i.semantic.typography.display,
+    display1: i.semantic.typography.display,
+    display2: i.semantic.typography.h1,
+    headingHero: i.semantic.typography.h1,
+    headingSection: i.semantic.typography.h3,
+    title: i.semantic.typography.body,
+    body2: i.semantic.typography.body,
+    bodyLarge: i.semantic.typography.body,
+    bodySmall: i.semantic.typography.ui,
+    monoXs: i.semantic.typography.mono,
+    monoSm: i.semantic.typography.mono,
+    label: i.semantic.typography.ui,
+    labelDescriptive: i.semantic.typography.ui,
+    labelTechnical: i.semantic.typography.mono
+  },
+  // ── Icons ────────────────────────────────────────────────────────────────────
+  iconSize: {
+    small: "var(--primitive-typography-size-base)",
+    // 16px — default icon size
+    medium: "var(--primitive-typography-size-lg)",
+    // 20px — prominent icons
+    large: "var(--primitive-typography-size-xl)"
+    // 24px — hero / large empty states
+  },
+  // ── Density-aware spacing ────────────────────────────────────────────────────
+  // These vars respond to [data-density="compact"] on <html>.
+  // Use for component padding/gap that should tighten in compact mode.
+  // hds.space.px* for fixed measurements that never participate in density.
+  density: {
+    xs: "var(--hds-space-xs)",
+    // 4px comfortable / 2px compact
+    sm: "var(--hds-space-sm)",
+    // 8px comfortable / 6px compact
+    md: "var(--hds-space-md)",
+    // 16px comfortable / 12px compact
+    lg: "var(--hds-space-lg)",
+    // 24px comfortable / 20px compact
+    xl: "var(--hds-space-xl)",
+    // 32px comfortable / 24px compact
+    xl2: "var(--hds-space-2xl)",
+    // 48px comfortable / 40px compact
+    xl3: "var(--hds-space-3xl)",
+    // 64px comfortable / 48px compact
+    xl4: "var(--hds-space-4xl)"
+    // 80px comfortable / 64px compact
+  },
+  // ── Spacing ──────────────────────────────────────────────────────────────────
+  // CSS var strings — valid in any inline style property that accepts a length.
+  // Note: avoid interpolating these into template literal shorthand strings,
+  // e.g. `margin: \`0 0 ${hds.space.px20}\`` — use individual properties instead.
+  // For component spacing that adapts to density, use hds.density.* instead.
+  space: {
+    px1: "var(--primitive-space-px1)",
+    px2: "var(--primitive-space-px2)",
+    px4: "var(--primitive-space-1)",
+    px6: "var(--primitive-space-px6)",
+    px8: "var(--primitive-space-2)",
+    px10: "var(--primitive-space-px10)",
+    px12: "var(--primitive-space-3)",
+    px16: "var(--primitive-space-4)",
+    px20: "var(--primitive-space-5)",
+    px24: "var(--primitive-space-6)",
+    px28: "var(--primitive-space-7)",
+    px32: "var(--primitive-space-8)",
+    px40: "var(--primitive-space-10)",
+    px48: "var(--primitive-space-12)",
+    px64: "var(--primitive-space-16)",
+    px80: "var(--primitive-space-20)",
+    px96: "var(--primitive-space-24)",
+    px128: "var(--primitive-space-32)"
+  },
+  // ── Border width ─────────────────────────────────────────────────────────────
+  borderWidth: {
+    xs: "var(--primitive-borderWidth-xs)",
+    // 1px — standard hairline
+    sm: "var(--primitive-borderWidth-sm)",
+    // 2px — brand accent, selection ring
+    md: "var(--primitive-borderWidth-md)",
+    // 4px — indicator bar, callout border
+    default: "var(--semantic-borderWidth-default)",
+    emphasis: "var(--semantic-borderWidth-emphasis)"
+  },
+  // ── Border radius ────────────────────────────────────────────────────────────
+  borderRadius: {
+    0: "var(--primitive-radius-0)",
+    2: "var(--primitive-radius-2)",
+    4: "var(--primitive-radius-4)",
+    8: "var(--primitive-radius-8)",
+    full: "var(--primitive-radius-full)",
+    circle: "50%",
+    /** Named aliases for common radii — prefer these over numeric keys in new code. */
+    sm: "var(--primitive-radius-4)",
+    // 4px — tight: tags, badges, small chips
+    md: "var(--primitive-radius-8)",
+    // 8px — default: cards, panels, inputs
+    /** Global action radius — toggle one token to round all buttons, inputs, selects. */
+    action: "var(--semantic-radius-action)"
+  },
+  // ── Duration (CSS transition timing — use in transition: shorthand values) ──
+  duration: {
+    /** 100ms — binary toggles, instant dismissals */
+    instant: "var(--primitive-duration-instant)",
+    /** 150ms — micro-interactions, hover/focus/press (productive default) */
+    fast: "var(--primitive-duration-short)",
+    /** 250ms — entrances, teaching moments (expressive) */
+    normal: "var(--primitive-duration-medium)",
+    /** 400ms — spatial movement, page travel (slow / spatial) */
+    slow: "var(--primitive-duration-long)"
+  },
+  effect: {
+    blur: {
+      subtle: "var(--primitive-blur-8)",
+      lightboxBackdrop: "var(--component-lightbox-backdrop-blur)"
+    }
+  },
+  zIndex: {
+    base: "var(--primitive-zIndex-0)",
+    focus: "var(--primitive-zIndex-10)",
+    overlay: "var(--primitive-zIndex-100)",
+    modal: "var(--primitive-zIndex-1000)"
+  },
+  // ── Breakpoints (read-only reference values — use in JS checks and docs) ─────
+  breakpoints: {
+    xs: 375,
+    // iPhone mini baseline
+    sm: 640,
+    // Large phone / landscape — Tailwind sm
+    md: 768,
+    // Tablet / mobile boundary — Tailwind md
+    lg: 1024,
+    // Desktop — Tailwind lg
+    xl: 1280,
+    // Wide desktop — Tailwind xl
+    // CSS custom property names for use in @media queries
+    css: {
+      xs: i.primitive.breakpoint.xs,
+      sm: i.primitive.breakpoint.sm,
+      md: i.primitive.breakpoint.md,
+      lg: i.primitive.breakpoint.lg,
+      xl: i.primitive.breakpoint.xl
+    }
+  },
+  // ── Layout ───────────────────────────────────────────────────────────────────
+  layout: {
+    pageGutterH: "var(--semantic-layout-page-gutter-x)",
+    mobileGutterH: "var(--semantic-layout-page-gutter-x-mobile)",
+    sectionPad: "var(--semantic-layout-section-padding-y-shell)",
+    sectionPadSm: "var(--semantic-layout-section-padding-y-shell-tight)",
+    panelGap: "var(--semantic-layout-panel-gap)",
+    panelGapMob: "var(--semantic-layout-panel-gap-mobile)",
+    containerMaxWidth: i.semantic.layout.container.maxWidth,
+    contentMaxWidth: i.semantic.layout.content.maxWidth,
+    proseMaxWidth: i.semantic.layout.prose.maxWidth,
+    sectionPaddingY: i.semantic.layout.section.paddingY,
+    gridColumnGap: i.semantic.layout.grid.gap
+  },
+  size: {
+    8: "var(--primitive-size-8)",
+    10: "var(--primitive-size-10)",
+    12: "var(--primitive-size-12)",
+    16: "var(--primitive-size-16)",
+    20: "var(--primitive-size-20)",
+    24: "var(--primitive-size-24)",
+    32: "var(--primitive-size-32)",
+    40: "var(--primitive-size-40)",
+    48: "var(--primitive-size-48)",
+    64: "var(--primitive-size-64)",
+    80: "var(--primitive-size-80)",
+    96: "var(--primitive-size-96)",
+    interactive: {
+      min: "var(--primitive-size-interactive-min)"
+    },
+    width: {
+      96: "var(--primitive-size-width-96)",
+      760: "var(--primitive-size-width-760)",
+      1200: "var(--primitive-size-width-1200)",
+      "50ch": "var(--primitive-size-width-50ch)"
+    }
+  },
+  // ── Duration (seconds — Motion / CSS transition values) ──────────────────────
+  motion: s
+};
+export {
+  c as ct,
+  e as default,
+  a as tokenValues
+};