@zendir/ui 0.4.1 → 0.6.0

package/dist/tokens/index.js

@@ -1,374 +1,289 @@
-const colors = {
-  // Status Colors (Dark Theme)
-  status: {
-    critical: "#ff3838",
-    serious: "#ffb302",
-    caution: "#fce83a",
-    normal: "#56f000",
-    standby: "#2dccff",
-    off: "#a4abb6"
-  },
-  // Status Colors (Light Theme - Fill)
-  statusLightFill: {
-    critical: "#ff2a04",
-    serious: "#ffaf3d",
-    caution: "#fad800",
-    normal: "#00e200",
-    standby: "#64d9ff",
-    off: "#7b8089"
-  },
-  // Status Colors (Light Theme - Border)
-  statusLightBorder: {
-    critical: "#661102",
-    serious: "#664618",
-    caution: "#645600",
-    normal: "#005a00",
-    standby: "#285766",
-    off: "#3c3e42"
-  },
-  // Background Colors
-  background: {
-    dark: {
-      base: "#101923",
-      surface: "#1b2d3e",
-      elevated: "#243647",
-      overlay: "rgba(0, 0, 0, 0.7)"
-    },
-    light: {
-      base: "#f5f6f9",
-      surface: "#ffffff",
-      elevated: "#ffffff",
-      overlay: "rgba(0, 0, 0, 0.5)"
-    }
-  },
-  // Text Colors
-  text: {
-    dark: {
-      primary: "#ffffff",
-      secondary: "#9ea7ad",
-      tertiary: "#6b7175",
-      muted: "#52595f"
-    },
-    light: {
-      primary: "#1b2d3e",
-      secondary: "#4c5a67",
-      tertiary: "#7a8891",
-      muted: "#a4adb5"
-    }
-  },
-  // Accent Colors
-  accent: {
-    primary: "#4dacff",
-    secondary: "#3d8ddb",
-    tertiary: "#2e6eb3"
-  },
-  // Border Colors
-  border: {
-    dark: {
-      default: "#3c4b5a",
-      muted: "#2b3d4e",
-      focus: "#4dacff"
-    },
-    light: {
-      default: "#c4c8cc",
-      muted: "#e1e4e8",
-      focus: "#4dacff"
-    }
-  }
-};
-const spacing = {
-  xxs: "2px",
-  xs: "4px",
-  sm: "8px",
-  smd: "12px",
-  md: "16px",
-  mdl: "20px",
-  lg: "24px",
-  xl: "32px",
-  xxl: "48px"
-};
-const borderRadius = {
-  none: "0",
-  xs: "1px",
-  sm: "2px",
-  md: "4px",
-  lg: "8px",
-  /**
-   * 12px. Sized for surfaces (Container, Card, SidePanel). Matches the
-   * value already in use across zendir-ui components and the operator's
-   * LandingPage. Was 16px in earlier docs — corrected here so the JS
-   * tokens and the auto-generated CSS variables agree.
-   */
-  xl: "12px",
-  full: "9999px"
-};
-const typography = {
-  fontFamily: {
-    /** Heading font: Sora (Zendir Brand Standard) */
-    heading: '"Sora", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif',
-    /** Primary font: Public Sans (Zendir Brand Standard) */
-    primary: '"Public Sans", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif',
-    /** Monospace font: Roboto Mono for data/code */
-    mono: '"Roboto Mono", "SF Mono", "Consolas", "Liberation Mono", monospace'
-  },
-  /**
-   * Convenience numeric scale used by ~300+ existing zendir-ui components
-   * via `tokens.typography.fontSize.*`. Density-tuned for data-rich UIs.
-   *
-   * For semantically-named typographic styles (display1/2, h1-h6, body1-3,
-   * control1) use the `display` / `heading` / `body` / `control` preset
-   * objects on `<ThemeProvider>` instead — those follow the canonical
-   * AstroUXDS scale.
-   */
-  fontSize: {
-    // Compact sizes for dense UIs (cards, badges, data labels)
-    micro: "0.5625rem",
-    // 9px - very tight spaces
-    xxs: "0.625rem",
-    // 10px - compact labels
-    xs: "0.625rem",
-    // 10px - compact (alias of xxs, kept for back-compat)
-    sm: "0.75rem",
-    // 12px - body 3
-    base: "0.875rem",
-    // 14px - body 2
-    md: "0.875rem",
-    // 14px - body 2 (alias of base)
-    lg: "1rem",
-    // 16px - body 1
-    xl: "1.25rem",
-    // 20px - heading 3/4
-    xxl: "1.5rem",
-    // 24px - heading 2
-    xxxl: "2.125rem",
-    // 34px - heading 1
-    display: "3.75rem"
-    // 60px - display 1
-  },
-  /**
-   * Font weights per AstroUXDS specification
-   * Only 300, 400, 500, 700 are officially supported
-   */
-  fontWeight: {
-    light: 300,
-    normal: 400,
-    regular: 400,
-    // Alias for normal
-    medium: 500,
-    bold: 700,
-    // DEPRECATED: semibold is not in Astro spec, use medium (500) instead
-    /** @deprecated Use medium (500) instead - Astro spec only supports 300, 400, 500, 700 */
-    semibold: 500
-  },
-  lineHeight: {
-    tight: 1.25,
-    normal: 1.5,
-    relaxed: 1.75
-  }
-};
-const shadows = {
-  none: "none",
-  sm: "0 1px 2px rgba(0, 0, 0, 0.3)",
-  md: "0 2px 8px rgba(0, 0, 0, 0.3)",
-  lg: "0 4px 16px rgba(0, 0, 0, 0.3)",
-  xl: "0 8px 32px rgba(0, 0, 0, 0.4)",
-  glow: "0 0 20px rgba(77, 172, 255, 0.4)"
-};
-const animation = {
-  fast: "150ms ease",
-  normal: "250ms ease",
-  slow: "400ms ease"
-};
+import { base, electricBlue, neutral, prussianBlue, ultraviolet, zendirScales, zendir_exports } from "./palettes/zendir.js";
+import { amber, astroScales, astroStatus, astroStatusLightBorder, astroStatusLightFill, astro_exports, cyan, green, red, yellow } from "./palettes/astro.js";
+import { tailwindScales, tailwind_exports } from "./palettes/tailwind.js";
+import { allPalettes } from "./palettes/index.js";
+import { astroThemeDark, astroThemeLight, hybridTheme, nebulaTheme, purpleHueTheme, transparentMinimalTheme, transparentTheme } from "./themes.js";
+import { animation, borderRadius, colors, shadows, spacing, typography } from "./core.js";
+//#region src/tokens/index.ts
+/**
+* Build a CSS rule body for the mode-invariant tokens (status, spacing,
+* radius, typography, shadows, animation). These don't change between
+* light/dark or across themes — they're shared.
+*/
 function buildInvariantBlock() {
-  return [
-    "  /* ============================================================",
-    "   * STATUS COLORS (Astro UX Compliant)",
-    "   * ============================================================ */",
-    `  --zendir-status-critical: ${colors.status.critical};`,
-    `  --zendir-status-serious: ${colors.status.serious};`,
-    `  --zendir-status-caution: ${colors.status.caution};`,
-    `  --zendir-status-normal: ${colors.status.normal};`,
-    `  --zendir-status-standby: ${colors.status.standby};`,
-    `  --zendir-status-off: ${colors.status.off};`,
-    "",
-    "  /* Light-theme status fill colors */",
-    `  --zendir-status-critical-light: ${colors.statusLightFill.critical};`,
-    `  --zendir-status-serious-light: ${colors.statusLightFill.serious};`,
-    `  --zendir-status-caution-light: ${colors.statusLightFill.caution};`,
-    `  --zendir-status-normal-light: ${colors.statusLightFill.normal};`,
-    `  --zendir-status-standby-light: ${colors.statusLightFill.standby};`,
-    `  --zendir-status-off-light: ${colors.statusLightFill.off};`,
-    "",
-    "  /* Light-theme status border colors */",
-    `  --zendir-status-critical-border: ${colors.statusLightBorder.critical};`,
-    `  --zendir-status-serious-border: ${colors.statusLightBorder.serious};`,
-    `  --zendir-status-caution-border: ${colors.statusLightBorder.caution};`,
-    `  --zendir-status-normal-border: ${colors.statusLightBorder.normal};`,
-    `  --zendir-status-standby-border: ${colors.statusLightBorder.standby};`,
-    `  --zendir-status-off-border: ${colors.statusLightBorder.off};`,
-    "",
-    "  /* ============================================================",
-    "   * ACCENT COLORS",
-    "   * ============================================================ */",
-    `  --zendir-accent-primary: ${colors.accent.primary};`,
-    `  --zendir-accent-secondary: ${colors.accent.secondary};`,
-    `  --zendir-accent-tertiary: ${colors.accent.tertiary};`,
-    "",
-    "  /* ============================================================",
-    "   * SPACING",
-    "   * ============================================================ */",
-    `  --zendir-spacing-xs: ${spacing.xs};`,
-    `  --zendir-spacing-sm: ${spacing.sm};`,
-    `  --zendir-spacing-md: ${spacing.md};`,
-    `  --zendir-spacing-lg: ${spacing.lg};`,
-    `  --zendir-spacing-xl: ${spacing.xl};`,
-    `  --zendir-spacing-xxl: ${spacing.xxl};`,
-    "",
-    "  /* ============================================================",
-    "   * BORDER RADIUS",
-    "   * ============================================================ */",
-    `  --zendir-radius-none: ${borderRadius.none};`,
-    `  --zendir-radius-sm: ${borderRadius.sm};`,
-    `  --zendir-radius-md: ${borderRadius.md};`,
-    `  --zendir-radius-lg: ${borderRadius.lg};`,
-    `  --zendir-radius-xl: ${borderRadius.xl};`,
-    `  --zendir-radius-full: ${borderRadius.full};`,
-    "",
-    "  /* ============================================================",
-    "   * TYPOGRAPHY",
-    "   * Public Sans leads body, Sora leads headings, Roboto is the",
-    "   * AstroUXDS-compliant fallback. OS-native fonts complete the chain.",
-    "   * @see https://www.astrouxds.com/foundations/typography/",
-    "   * ============================================================ */",
-    `  --zendir-font-primary: ${typography.fontFamily.primary};`,
-    `  --zendir-font-heading: ${typography.fontFamily.heading};`,
-    `  --zendir-font-mono: ${typography.fontFamily.mono};`,
-    "",
-    "  /* Font sizes (rem-based, AstroUXDS scale) */",
-    `  --zendir-font-size-micro: ${typography.fontSize.micro};`,
-    `  --zendir-font-size-xxs: ${typography.fontSize.xxs};`,
-    `  --zendir-font-size-xs: ${typography.fontSize.xs};`,
-    `  --zendir-font-size-sm: ${typography.fontSize.sm};`,
-    `  --zendir-font-size-base: ${typography.fontSize.base};`,
-    `  --zendir-font-size-md: ${typography.fontSize.md};`,
-    `  --zendir-font-size-lg: ${typography.fontSize.lg};`,
-    `  --zendir-font-size-xl: ${typography.fontSize.xl};`,
-    `  --zendir-font-size-xxl: ${typography.fontSize.xxl};`,
-    `  --zendir-font-size-xxxl: ${typography.fontSize.xxxl};`,
-    `  --zendir-font-size-display: ${typography.fontSize.display};`,
-    "",
-    "  /* Font weights — AstroUXDS supports only 300/400/500/700 */",
-    `  --zendir-font-weight-light: ${typography.fontWeight.light};`,
-    `  --zendir-font-weight-normal: ${typography.fontWeight.normal};`,
-    `  --zendir-font-weight-medium: ${typography.fontWeight.medium};`,
-    `  --zendir-font-weight-bold: ${typography.fontWeight.bold};`,
-    "",
-    "  /* Line heights */",
-    `  --zendir-line-height-tight: ${typography.lineHeight.tight};`,
-    `  --zendir-line-height-normal: ${typography.lineHeight.normal};`,
-    `  --zendir-line-height-relaxed: ${typography.lineHeight.relaxed};`,
-    "",
-    "  /* ============================================================",
-    "   * SHADOWS",
-    "   * ============================================================ */",
-    `  --zendir-shadow-none: ${shadows.none};`,
-    `  --zendir-shadow-sm: ${shadows.sm};`,
-    `  --zendir-shadow-md: ${shadows.md};`,
-    `  --zendir-shadow-lg: ${shadows.lg};`,
-    `  --zendir-shadow-xl: ${shadows.xl};`,
-    `  --zendir-shadow-glow: ${shadows.glow};`,
-    "",
-    "  /* ============================================================",
-    "   * ANIMATION",
-    "   * ============================================================ */",
-    `  --zendir-animation-fast: ${animation.fast};`,
-    `  --zendir-animation-normal: ${animation.normal};`,
-    `  --zendir-animation-slow: ${animation.slow};`
-  ].join("\n");
+	return [
+		"  /* ============================================================",
+		"   * STATUS COLORS (Astro UX Compliant)",
+		"   * ============================================================ */",
+		`  --zendir-status-critical: ${colors.status.critical};`,
+		`  --zendir-status-serious: ${colors.status.serious};`,
+		`  --zendir-status-caution: ${colors.status.caution};`,
+		`  --zendir-status-normal: ${colors.status.normal};`,
+		`  --zendir-status-standby: ${colors.status.standby};`,
+		`  --zendir-status-off: ${colors.status.off};`,
+		"",
+		"  /* Light-theme status fill colors */",
+		`  --zendir-status-critical-light: ${colors.statusLightFill.critical};`,
+		`  --zendir-status-serious-light: ${colors.statusLightFill.serious};`,
+		`  --zendir-status-caution-light: ${colors.statusLightFill.caution};`,
+		`  --zendir-status-normal-light: ${colors.statusLightFill.normal};`,
+		`  --zendir-status-standby-light: ${colors.statusLightFill.standby};`,
+		`  --zendir-status-off-light: ${colors.statusLightFill.off};`,
+		"",
+		"  /* Light-theme status border colors */",
+		`  --zendir-status-critical-border: ${colors.statusLightBorder.critical};`,
+		`  --zendir-status-serious-border: ${colors.statusLightBorder.serious};`,
+		`  --zendir-status-caution-border: ${colors.statusLightBorder.caution};`,
+		`  --zendir-status-normal-border: ${colors.statusLightBorder.normal};`,
+		`  --zendir-status-standby-border: ${colors.statusLightBorder.standby};`,
+		`  --zendir-status-off-border: ${colors.statusLightBorder.off};`,
+		"",
+		"  /* ============================================================",
+		"   * SPACING",
+		"   * ============================================================ */",
+		`  --zendir-spacing-xs: ${spacing.xs};`,
+		`  --zendir-spacing-sm: ${spacing.sm};`,
+		`  --zendir-spacing-md: ${spacing.md};`,
+		`  --zendir-spacing-lg: ${spacing.lg};`,
+		`  --zendir-spacing-xl: ${spacing.xl};`,
+		`  --zendir-spacing-xxl: ${spacing.xxl};`,
+		"",
+		"  /* ============================================================",
+		"   * BORDER RADIUS",
+		"   * ============================================================ */",
+		`  --zendir-radius-none: ${borderRadius.none};`,
+		`  --zendir-radius-sm: ${borderRadius.sm};`,
+		`  --zendir-radius-md: ${borderRadius.md};`,
+		`  --zendir-radius-lg: ${borderRadius.lg};`,
+		`  --zendir-radius-xl: ${borderRadius.xl};`,
+		`  --zendir-radius-full: ${borderRadius.full};`,
+		"",
+		"  /* ============================================================",
+		"   * TYPOGRAPHY",
+		"   * Public Sans leads body, Sora leads headings, Roboto is the",
+		"   * AstroUXDS-compliant fallback. OS-native fonts complete the chain.",
+		"   * @see https://www.astrouxds.com/foundations/typography/",
+		"   * ============================================================ */",
+		`  --zendir-font-primary: ${typography.fontFamily.primary};`,
+		`  --zendir-font-heading: ${typography.fontFamily.heading};`,
+		`  --zendir-font-mono: ${typography.fontFamily.mono};`,
+		"",
+		"  /* Font sizes (rem-based, AstroUXDS scale) */",
+		`  --zendir-font-size-micro: ${typography.fontSize.micro};`,
+		`  --zendir-font-size-xxs: ${typography.fontSize.xxs};`,
+		`  --zendir-font-size-xs: ${typography.fontSize.xs};`,
+		`  --zendir-font-size-sm: ${typography.fontSize.sm};`,
+		`  --zendir-font-size-base: ${typography.fontSize.base};`,
+		`  --zendir-font-size-md: ${typography.fontSize.md};`,
+		`  --zendir-font-size-lg: ${typography.fontSize.lg};`,
+		`  --zendir-font-size-xl: ${typography.fontSize.xl};`,
+		`  --zendir-font-size-xxl: ${typography.fontSize.xxl};`,
+		`  --zendir-font-size-xxxl: ${typography.fontSize.xxxl};`,
+		`  --zendir-font-size-display: ${typography.fontSize.display};`,
+		"",
+		"  /* Font weights — AstroUXDS supports only 300/400/500/700 */",
+		`  --zendir-font-weight-light: ${typography.fontWeight.light};`,
+		`  --zendir-font-weight-normal: ${typography.fontWeight.normal};`,
+		`  --zendir-font-weight-medium: ${typography.fontWeight.medium};`,
+		`  --zendir-font-weight-semibold: ${typography.fontWeight.semibold};`,
+		`  --zendir-font-weight-bold: ${typography.fontWeight.bold};`,
+		"",
+		"  /* Line heights */",
+		`  --zendir-line-height-tight: ${typography.lineHeight.tight};`,
+		`  --zendir-line-height-normal: ${typography.lineHeight.normal};`,
+		`  --zendir-line-height-relaxed: ${typography.lineHeight.relaxed};`,
+		"",
+		"  /* ============================================================",
+		"   * SHADOWS",
+		"   * ============================================================ */",
+		`  --zendir-shadow-none: ${shadows.none};`,
+		`  --zendir-shadow-sm: ${shadows.sm};`,
+		`  --zendir-shadow-md: ${shadows.md};`,
+		`  --zendir-shadow-lg: ${shadows.lg};`,
+		`  --zendir-shadow-xl: ${shadows.xl};`,
+		`  --zendir-shadow-glow: ${shadows.glow};`,
+		"",
+		"  /* ============================================================",
+		"   * ANIMATION",
+		"   * ============================================================ */",
+		`  --zendir-animation-fast: ${animation.fast};`,
+		`  --zendir-animation-normal: ${animation.normal};`,
+		`  --zendir-animation-slow: ${animation.slow};`
+	].join("\n");
 }
-function buildModeBlock(mode) {
-  const bg = colors.background[mode];
-  const txt = colors.text[mode];
-  const bdr = colors.border[mode];
-  return [
-    `  --zendir-bg-base: ${bg.base};`,
-    `  --zendir-bg-surface: ${bg.surface};`,
-    `  --zendir-bg-elevated: ${bg.elevated};`,
-    `  --zendir-bg-overlay: ${bg.overlay};`,
-    "",
-    `  --zendir-text-primary: ${txt.primary};`,
-    `  --zendir-text-secondary: ${txt.secondary};`,
-    `  --zendir-text-tertiary: ${txt.tertiary};`,
-    `  --zendir-text-muted: ${txt.muted};`,
-    "",
-    `  --zendir-border-default: ${bdr.default};`,
-    `  --zendir-border-muted: ${bdr.muted};`,
-    `  --zendir-border-focus: ${bdr.focus};`
-  ].join("\n");
+/** Build the mode-specific block (background + text + border + accent + semantic). */
+function buildModeBlock(theme) {
+	const bg = theme.colors.background;
+	const txt = theme.colors.text;
+	const bdr = theme.colors.border;
+	const accent = theme.colors.accent;
+	const semantic = theme.colors.semantic;
+	return [
+		`  --zendir-bg-base: ${bg.base};`,
+		`  --zendir-bg-surface: ${bg.surface};`,
+		`  --zendir-bg-elevated: ${bg.elevated};`,
+		`  --zendir-bg-overlay: ${bg.overlay};`,
+		"",
+		`  --zendir-text-primary: ${txt.primary};`,
+		`  --zendir-text-secondary: ${txt.secondary};`,
+		`  --zendir-text-tertiary: ${txt.tertiary};`,
+		`  --zendir-text-muted: ${txt.muted || txt.tertiary};`,
+		"",
+		`  --zendir-border-default: ${bdr.default};`,
+		`  --zendir-border-muted: ${bdr.muted};`,
+		`  --zendir-border-focus: ${bdr.focus};`,
+		"",
+		`  --zendir-accent-primary: ${accent.primary};`,
+		`  --zendir-accent-secondary: ${accent.secondary};`,
+		`  --zendir-accent-tertiary: ${accent.tertiary};`,
+		"",
+		`  --zendir-semantic-success: ${semantic.success};`,
+		`  --zendir-semantic-warning: ${semantic.warning};`,
+		`  --zendir-semantic-error: ${semantic.error};`,
+		`  --zendir-semantic-info: ${semantic.info};`
+	].join("\n");
 }
+/**
+* Emit every primitive palette stop as a CSS variable. Mode-invariant by
+* definition — primitives never change with theme. Naming:
+*   Zendir scales   --zendir-eb-500 / --zendir-pb-500 / --zendir-uv-500 /
+*                   --zendir-neutral-500
+*   Astro ramps     --zendir-astro-red-500 … --zendir-astro-cyan-900
+*   Tailwind v4.2   --zendir-tw-red-500 … --zendir-tw-neutral-950
+*/
+function buildPaletteBlock() {
+	const lines = [];
+	const emit = (prefix, scale) => {
+		for (const [stop, hex] of Object.entries(scale)) lines.push(`  --zendir-${prefix}-${stop}: ${hex};`);
+	};
+	lines.push("  /* Zendir Colour System */");
+	emit("eb", electricBlue);
+	emit("pb", prussianBlue);
+	emit("uv", ultraviolet);
+	emit("neutral", neutral);
+	lines.push("");
+	lines.push("  /* Astro UXDS status ramps */");
+	emit("astro-red", red);
+	emit("astro-amber", amber);
+	emit("astro-yellow", yellow);
+	emit("astro-green", green);
+	emit("astro-cyan", cyan);
+	lines.push("");
+	lines.push("  /* Tailwind CSS v4.2 */");
+	for (const [name, scale] of Object.entries(tailwindScales)) emit(`tw-${name.toLowerCase()}`, scale);
+	return lines.join("\n");
+}
+/**
+* Single-mode generator. Emits one `:root { … }` block with the
+* mode-invariant tokens AND the chosen mode's bg/text/border.
+*
+* Useful for runtime injection — `<style>` tags written by SSR helpers
+* that target a single mode. The full stylesheet generator below is what
+* ships to consumers.
+*/
 function generateCSSVariables(mode = "dark") {
-  return [
-    ":root {",
-    buildInvariantBlock(),
-    "",
-    `  /* ${mode === "dark" ? "Dark" : "Light"}-theme color overrides */`,
-    buildModeBlock(mode),
-    "}"
-  ].join("\n");
+	return [
+		":root {",
+		buildInvariantBlock(),
+		"",
+		`  /* ${mode === "dark" ? "Dark" : "Light"}-theme color overrides */`,
+		buildModeBlock(mode === "dark" ? hybridTheme : astroThemeLight),
+		"}"
+	].join("\n");
 }
+/**
+* Full stylesheet generator. Emits the complete tokens.css equivalent —
+* mode-invariant `:root` block, the primitive palette block, plus per-theme
+* `[data-theme="…"]` overrides. This is what scripts/build-tokens.ts writes
+* to src/tokens/tokens.css.
+*/
 function generateCSSStylesheet() {
-  return [
-    "/**",
-    " * @zendir/ui — CSS Design Tokens",
-    " *",
-    " * AUTO-GENERATED from src/tokens/index.ts. DO NOT EDIT BY HAND.",
-    " * Regenerate with: npm run build:tokens",
-    " *",
-    " * Usage:",
-    " *   @import '@zendir/ui/tokens/css';",
-    " *   .my-component { background: var(--zendir-bg-surface); }",
-    " */",
-    "",
-    ":root {",
-    buildInvariantBlock(),
-    "}",
-    "",
-    "/* ============================================================",
-    " * DARK THEME (default)",
-    " * ============================================================ */",
-    ":root,",
-    '[data-theme="dark"] {',
-    buildModeBlock("dark"),
-    "}",
-    "",
-    "/* ============================================================",
-    " * LIGHT THEME",
-    " * ============================================================ */",
-    '[data-theme="light"] {',
-    buildModeBlock("light"),
-    "}",
-    ""
-  ].join("\n");
+	return [
+		"/**",
+		" * @zendir/ui — CSS Design Tokens",
+		" *",
+		" * AUTO-GENERATED from src/tokens/index.ts. DO NOT EDIT BY HAND.",
+		" * Regenerate with: npm run build:tokens",
+		" *",
+		" * Usage:",
+		" *   @import '@zendir/ui/tokens/css';",
+		" *   .my-component { background: var(--zendir-bg-surface); }",
+		" */",
+		"",
+		":root {",
+		buildInvariantBlock(),
+		"}",
+		"",
+		"/* ============================================================",
+		" * PRIMITIVE PALETTES (Layer 0 — src/tokens/palettes)",
+		" * Raw scales; prefer the semantic tokens above for UI surfaces.",
+		" * ============================================================ */",
+		":root {",
+		buildPaletteBlock(),
+		"}",
+		"",
+		"/* ============================================================",
+		" * ZEN (HYBRID) THEME (default)",
+		" * ============================================================ */",
+		":root,",
+		"[data-theme=\"hybrid\"],",
+		"[data-theme=\"dark\"] {",
+		buildModeBlock(hybridTheme),
+		"}",
+		"",
+		"/* ============================================================",
+		" * ASTRO THEME",
+		" * ============================================================ */",
+		"[data-theme=\"astro\"] {",
+		buildModeBlock(astroThemeDark),
+		"}",
+		"",
+		"[data-theme=\"astro\"][data-mode=\"light\"],",
+		"[data-theme=\"hybrid\"][data-mode=\"light\"],",
+		"[data-theme=\"nebula\"][data-mode=\"light\"],",
+		"[data-theme=\"purple-hue\"][data-mode=\"light\"],",
+		"[data-theme=\"light\"] {",
+		buildModeBlock(astroThemeLight),
+		"}",
+		"",
+		"/* ============================================================",
+		" * NEBULA THEME",
+		" * ============================================================ */",
+		"[data-theme=\"nebula\"] {",
+		buildModeBlock(nebulaTheme),
+		"}",
+		"",
+		"/* ============================================================",
+		" * PURPLE HUE THEME",
+		" * ============================================================ */",
+		"[data-theme=\"purple-hue\"] {",
+		buildModeBlock(purpleHueTheme),
+		"}",
+		"",
+		"/* ============================================================",
+		" * TRANSPARENT THEMES",
+		" * ============================================================ */",
+		"[data-theme=\"transparent\"], [data-theme=\"transparent-bold\"] {",
+		buildModeBlock(transparentTheme),
+		"}",
+		"",
+		"[data-theme=\"transparent-minimal\"] {",
+		buildModeBlock(transparentMinimalTheme),
+		"}",
+		""
+	].join("\n");
 }
-const index = {
-  colors,
-  spacing,
-  borderRadius,
-  typography,
-  shadows,
-  animation,
-  generateCSSVariables,
-  generateCSSStylesheet
-};
-export {
-  animation,
-  borderRadius,
-  colors,
-  index as default,
-  generateCSSStylesheet,
-  generateCSSVariables,
-  shadows,
-  spacing,
-  typography
+var tokens_default = {
+	colors,
+	spacing,
+	borderRadius,
+	typography,
+	shadows,
+	animation,
+	generateCSSVariables,
+	generateCSSStylesheet
 };
-//# sourceMappingURL=index.js.map
+//#endregion
+export { allPalettes, animation, astroScales, astroStatus, astroStatusLightBorder, astroStatusLightFill, astro_exports as astroUxds, borderRadius, colors, tokens_default as default, electricBlue, generateCSSStylesheet, generateCSSVariables, prussianBlue, shadows, spacing, tailwind_exports as tailwind, tailwindScales, typography, ultraviolet, zendir_exports as zendir, base as zendirBase, neutral as zendirNeutral, zendirScales };
+
+//# sourceMappingURL=index.js.map