@zendir/ui 0.4.1 → 0.6.0

package/dist/tokens/themes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"themes.js","names":[],"sources":["../../src/tokens/themes.ts"],"sourcesContent":["/**\n * @zendir/ui — Semantic themes (Layer 1).\n *\n * Each theme maps semantic roles (background, text, border, accent, status,\n * semantic, interactive) onto concrete values. The nebula theme is fully\n * palette-aligned — it references the Layer 0 primitives in\n * src/tokens/palettes. The astro / hybrid / purple-hue / transparent themes\n * predate the palette system and keep their original literal values until\n * design migrates them onto endorsed scales.\n *\n * Status colors are immutable across every theme — always `astroStatus`\n * (operator-grade severity must never shift with the visual theme).\n *\n * These definitions are consumed by two surfaces:\n *   • ThemeProvider (runtime) — resolves the active variant into CSS vars.\n *   • src/tokens/index.ts (build) — emits the static tokens.css stylesheet.\n * The shared token shapes live in ../react/theme/types so neither surface\n * has to pull in the other.\n */\n\nimport type {\n  ThemeTokensBase,\n  ThemeFocus,\n  ThemeAnimation,\n  LayoutTokens,\n} from \"../react/theme/types\";\nimport {\n  ultraviolet,\n  electricBlue,\n  zendirNeutral,\n  astroStatus,\n} from \"./palettes\";\nimport {\n  green as twGreen,\n  yellow as twYellow,\n  red as twRed,\n} from \"./palettes/tailwind\";\n\n// ============================================================================\n// Animation Tokens (Shared)\n// ============================================================================\n\nexport const animationTokens: ThemeAnimation = {\n  fast: \"all 150ms cubic-bezier(0.4, 0, 0.2, 1)\",\n  normal: \"all 250ms cubic-bezier(0.4, 0, 0.2, 1)\",\n  slow: \"all 400ms cubic-bezier(0.4, 0, 0.2, 1)\",\n  spring: \"all 300ms cubic-bezier(0.34, 1.56, 0.64, 1)\",\n  easing: {\n    default: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    in: \"ease-in\",\n    out: \"ease-out\",\n    inOut: \"ease-in-out\",\n  },\n  duration: {\n    instant: 0,\n    fast: 150,\n    normal: 250,\n    slow: 400,\n  },\n};\n\nexport const animationTokensReduced: ThemeAnimation = {\n  fast: \"all 0.01ms linear\",\n  normal: \"all 0.01ms linear\",\n  slow: \"all 0.01ms linear\",\n  spring: \"all 0.01ms linear\",\n  easing: animationTokens.easing,\n  duration: { instant: 0, fast: 0, normal: 0, slow: 0 },\n};\n\n// ============================================================================\n// Focus Tokens\n// ============================================================================\n\nexport const focusTokensDark: ThemeFocus = {\n  color: \"#4dacff\",\n  width: \"2px\",\n  offset: \"2px\",\n  ring: \"0 0 0 2px #4dacff\",\n  style: {\n    outline: \"2px solid #4dacff\",\n    outlineOffset: \"2px\",\n  },\n};\n\nexport const focusTokensLight: ThemeFocus = {\n  color: \"#0066cc\",\n  width: \"2px\",\n  offset: \"2px\",\n  ring: \"0 0 0 2px #0066cc\",\n  style: {\n    outline: \"2px solid #0066cc\",\n    outlineOffset: \"2px\",\n  },\n};\n\nexport const focusTokensPurpleHue: ThemeFocus = {\n  color: \"#8b5cf6\",\n  width: \"2px\",\n  offset: \"2px\",\n  ring: \"0 0 0 2px #8b5cf6\",\n  style: {\n    outline: \"2px solid #8b5cf6\",\n    outlineOffset: \"2px\",\n  },\n};\n\n// ============================================================================\n// Shadow Tokens\n// ============================================================================\n\nexport const shadowsDark = {\n  none: \"none\",\n  sm: \"0 1px 2px rgba(0, 0, 0, 0.3)\",\n  md: \"0 4px 8px rgba(0, 0, 0, 0.4)\",\n  lg: \"0 8px 16px rgba(0, 0, 0, 0.5)\",\n  xl: \"0 16px 32px rgba(0, 0, 0, 0.6)\",\n  glow: (color: string) => `0 0 20px ${color}40, 0 0 40px ${color}20`,\n};\n\nexport const shadowsLight = {\n  none: \"none\",\n  sm: \"0 1px 2px rgba(0, 0, 0, 0.1)\",\n  md: \"0 4px 8px rgba(0, 0, 0, 0.15)\",\n  lg: \"0 8px 16px rgba(0, 0, 0, 0.2)\",\n  xl: \"0 16px 32px rgba(0, 0, 0, 0.25)\",\n  glow: (color: string) => `0 0 20px ${color}30, 0 0 40px ${color}15`,\n};\n\n// ============================================================================\n// Layout Tokens (Shared)\n// Semantic layout spacing based on 4px grid. Shared across all themes.\n// ============================================================================\n\nexport const layoutTokens: LayoutTokens = {\n  card: {\n    padding: \"16px\", // 4 × 4px\n    gap: \"24px\", // 6 × 4px  — desktop grid gap (matches outer padding)\n    gapCompact: \"16px\", // 4 × 4px  — mobile grid gap\n    heading: {\n      iconSize: 18, // default card header icon (px) — matches ISS/Telemetry card header size\n      iconSizeCompact: 16, // compact (e.g. chart inline header)\n      titleFontSize: \"1rem\", // card titles (ISS, Telemetry, Mission) — reduced from 1.125rem\n      titleFontSizeChart: \"0.875rem\", // chart titles (Power Trends) — slightly smaller\n      titleFontWeight: 500,\n      gap: 8, // gap between icon and title (px)\n    },\n  },\n  section: {\n    headerPaddingBottom: \"8px\", // 2 × 4px\n    headerMarginBottom: \"0px\",\n    contentPaddingTop: \"8px\", // 2 × 4px\n  },\n  form: {\n    fieldGap: \"12px\", // 3 × 4px  — between stacked fields\n    inlineGap: \"12px\", // 3 × 4px  — between side-by-side fields\n    groupPadding: \"12px\", // 3 × 4px  — inside grouped containers\n    groupGap: \"12px\", // 3 × 4px  — within group items\n    labelGap: \"3px\", // label text ↔ tooltip icon\n  },\n  surface: {\n    padding: \"12px\", // 3 × 4px\n    borderRadius: \"12px\", // 3 × 4px\n    gap: \"8px\", // 2 × 4px\n  },\n};\n\n// ============================================================================\n// Astro UX Dark Theme\n// ============================================================================\n\nexport const astroThemeDark: ThemeTokensBase = {\n  colors: {\n    background: {\n      base: \"#101923\",\n      surface: \"#1b2d3e\",\n      elevated: \"#243b53\",\n      overlay: \"rgba(16, 25, 35, 0.95)\",\n    },\n    border: {\n      default: \"#2b659b\",\n      muted: \"#172635\",\n      focus: \"#4dacff\",\n    },\n    text: {\n      primary: \"#ffffff\",\n      secondary: \"#b7c5d3\",\n      tertiary: \"#8fa4b7\",\n      muted: \"#8fa4b7\",\n      inverse: \"#1b2d3e\",\n    },\n    status: { ...astroStatus },\n    semantic: {\n      success: \"#56f000\",\n      warning: \"#fce83a\",\n      error: \"#ff3838\",\n      info: \"#4dacff\",\n    },\n    accent: {\n      primary: \"#4dacff\",\n      secondary: \"#56f000\",\n      tertiary: \"#a371f7\",\n    },\n    interactive: {\n      default: \"#4dacff\",\n      hover: \"#92cbff\",\n      active: \"#0066cc\",\n      disabled: \"#6b7280\",\n    },\n  },\n  spacing: {\n    xxs: \"2px\",\n    xs: \"4px\",\n    sm: \"8px\",\n    smd: \"12px\",\n    md: \"16px\",\n    mdl: \"20px\",\n    lg: \"24px\",\n    xl: \"32px\",\n    xxl: \"48px\",\n  },\n  borderRadius: {\n    none: \"0\",\n    xs: \"1px\",\n    sm: \"2px\",\n    md: \"4px\",\n    lg: \"8px\",\n    xl: \"12px\",\n    full: \"9999px\",\n  },\n  elementSize: {\n    sm: \"28px\",\n    md: \"36px\",\n    lg: \"44px\",\n  },\n  typography: {\n    /**\n     * Font families per AstroUXDS specification\n     * @see https://www.astrouxds.com/foundations/typography/\n     */\n    fontFamily: {\n      /** Primary font: Roboto with comprehensive system fallbacks */\n      primary:\n        '\"Roboto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif',\n      /** Heading font: Roboto per AstroUXDS (matches primary). */\n      heading:\n        '\"Roboto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif',\n      /** Monospace font: Roboto Mono for data/code with system fallbacks */\n      mono: '\"Roboto Mono\", \"SF Mono\", \"Consolas\", \"Liberation Mono\", monospace',\n    },\n    // Astro UX Display Styles\n    // https://www.astrouxds.com/foundations/typography/\n    display: {\n      1: {\n        fontSize: \"3.75rem\",\n        fontWeight: 300,\n        letterSpacing: \"-0.5px\",\n        lineHeight: \"4.375rem\",\n      },\n      2: {\n        fontSize: \"3rem\",\n        fontWeight: 400,\n        letterSpacing: \"0\",\n        lineHeight: \"3.5rem\",\n      },\n    },\n    // Astro UX Heading Styles\n    heading: {\n      1: {\n        fontSize: \"2.125rem\",\n        fontWeight: 400,\n        letterSpacing: \"0.25px\",\n        lineHeight: \"2.5rem\",\n      },\n      \"1Bold\": {\n        fontSize: \"2.125rem\",\n        fontWeight: 700,\n        letterSpacing: \"0.25px\",\n        lineHeight: \"2rem\",\n      },\n      2: {\n        fontSize: \"1.5rem\",\n        fontWeight: 400,\n        letterSpacing: \"0\",\n        lineHeight: \"1.75rem\",\n      },\n      3: {\n        fontSize: \"1.25rem\",\n        fontWeight: 500,\n        letterSpacing: \"0.15px\",\n        lineHeight: \"1.5rem\",\n      },\n      4: {\n        fontSize: \"1.25rem\",\n        fontWeight: 300,\n        letterSpacing: \"0.15px\",\n        lineHeight: \"1.5rem\",\n      },\n      5: {\n        fontSize: \"1.125rem\",\n        fontWeight: 400,\n        letterSpacing: \"0\",\n        lineHeight: \"1.5rem\",\n      },\n      6: {\n        fontSize: \"1.125rem\",\n        fontWeight: 300,\n        letterSpacing: \"0\",\n        lineHeight: \"1.5rem\",\n      },\n    },\n    // Astro UX Body Styles\n    body: {\n      1: {\n        fontSize: \"1rem\",\n        fontWeight: 400,\n        letterSpacing: \"0.5px\",\n        lineHeight: \"1.5rem\",\n      },\n      \"1Bold\": {\n        fontSize: \"1rem\",\n        fontWeight: 700,\n        letterSpacing: \"0.5px\",\n        lineHeight: \"1.5rem\",\n      },\n      2: {\n        fontSize: \"0.875rem\",\n        fontWeight: 400,\n        letterSpacing: \"0.5px\",\n        lineHeight: \"1.25rem\",\n      },\n      \"2Bold\": {\n        fontSize: \"0.875rem\",\n        fontWeight: 700,\n        letterSpacing: \"0.5px\",\n        lineHeight: \"1.25rem\",\n      },\n      3: {\n        fontSize: \"0.75rem\",\n        fontWeight: 400,\n        letterSpacing: \"0\",\n        lineHeight: \"1rem\",\n      },\n      \"3Bold\": {\n        fontSize: \"0.75rem\",\n        fontWeight: 700,\n        letterSpacing: \"0\",\n        lineHeight: \"1rem\",\n      },\n    },\n    // Astro UX Control Body Styles\n    control: {\n      1: {\n        fontSize: \"1rem\",\n        fontWeight: 400,\n        letterSpacing: \"0.5px\",\n        lineHeight: \"1.25rem\",\n      },\n      \"1Bold\": {\n        fontSize: \"1rem\",\n        fontWeight: 700,\n        letterSpacing: \"0.5px\",\n        lineHeight: \"1.25rem\",\n      },\n    },\n    // Legacy convenience tokens (rem-based for Astro compliance)\n    // Note: Use Typography component for new code\n    fontSize: {\n      micro: \"0.5625rem\", // 9px - very tight spaces\n      xxs: \"0.625rem\", // 10px - compact labels (xs in old system)\n      xs: \"0.625rem\", // 10px - compact (kept for backward compatibility)\n      sm: \"0.75rem\", // 12px (Body 3)\n      base: \"0.875rem\", // 14px (Body 2)\n      md: \"0.875rem\", // 14px (Body 2)\n      lg: \"1rem\", // 16px (Body 1)\n      xl: \"1.25rem\", // 20px (Heading 3/4)\n      xxl: \"1.5rem\", // 24px (Heading 2)\n      xxxl: \"2.125rem\", // 34px (Heading 1)\n    },\n    /**\n     * Font weights per AstroUXDS specification\n     * Only 300, 400, 500, 700 are officially supported\n     * @see https://www.astrouxds.com/foundations/typography/\n     */\n    fontWeight: {\n      light: 300,\n      normal: 400,\n      medium: 500,\n      /** @deprecated Use medium (500) instead - Astro spec only supports 300, 400, 500, 700 */\n      semibold: 500, // Changed from 600 to 500 for Astro compliance\n      bold: 700,\n    },\n    lineHeight: {\n      tight: \"1.25rem\",\n      normal: \"1.5rem\",\n      relaxed: \"1.75rem\",\n    },\n    letterSpacing: {\n      tight: \"-0.5px\",\n      normal: \"0\",\n      wide: \"0.5px\",\n    },\n  },\n  shadows: shadowsDark,\n  animation: animationTokens,\n  focus: focusTokensDark,\n  layout: layoutTokens,\n};\n\n// ============================================================================\n// Astro UX Light Theme\n// ============================================================================\n\nexport const astroThemeLight: ThemeTokensBase = {\n  colors: {\n    background: {\n      base: \"#eaeef4\",\n      surface: \"#f5f8fc\",\n      elevated: \"#ffffff\",\n      overlay: \"rgba(234, 238, 244, 0.95)\",\n    },\n    border: {\n      default: \"#2b659b\",\n      muted: \"#d1d5db\",\n      focus: \"#0066cc\",\n    },\n    text: {\n      primary: \"#1b2d3e\",\n      secondary: \"#51667c\",\n      tertiary: \"#556a7c\", // WCAG AA: 4.81:1 on #eaeef4, 5.24:1 on #f5f8fc, 5.61:1 on #fff (was #8fa4b7 → 2.25:1 FAIL)\n      muted: \"#556a7c\", // WCAG AA compliant (was #8fa4b7)\n      inverse: \"#ffffff\",\n    },\n    status: { ...astroStatus },\n    semantic: {\n      success: \"#56f000\",\n      warning: \"#fce83a\",\n      error: \"#ff3838\",\n      info: \"#4dacff\",\n    },\n    accent: {\n      primary: \"#0066cc\",\n      secondary: \"#56f000\",\n      tertiary: \"#7c3aed\",\n    },\n    interactive: {\n      default: \"#0066cc\",\n      hover: \"#0052a3\",\n      active: \"#003d7a\",\n      disabled: \"#a4abb6\",\n    },\n  },\n  spacing: astroThemeDark.spacing,\n  borderRadius: astroThemeDark.borderRadius,\n  elementSize: astroThemeDark.elementSize,\n  typography: astroThemeDark.typography,\n  shadows: shadowsLight,\n  animation: animationTokens,\n  focus: focusTokensLight,\n  layout: layoutTokens,\n};\n\n// ============================================================================\n// Hybrid Theme (Zendir Background + Astro Status + Purple Accents)\n// Modern, award-winning design with Zendir purple personality\n// ============================================================================\n\nexport const hybridTheme: ThemeTokensBase = {\n  colors: {\n    background: {\n      base: \"#09090b\",\n      surface: \"rgba(24, 24, 27, 0.98)\",\n      elevated: \"rgba(39, 39, 42, 0.98)\",\n      overlay: \"rgba(0, 0, 0, 0.85)\",\n    },\n    border: {\n      default: \"rgba(139, 92, 246, 0.3)\", // Purple tint\n      muted: \"rgba(63, 63, 70, 0.5)\",\n      focus: \"#8b5cf6\", // Zendir purple\n    },\n    text: {\n      primary: \"#ffffff\",\n      secondary: \"#a1a1aa\",\n      tertiary: \"#8e8e96\", // WCAG AA: 6.12:1 on #09090b, 5.45:1 on #18181b, 4.58:1 on #27272a (was #71717a → 4.07:1 FAIL)\n      muted: \"#8e8e96\", // WCAG AA compliant (was #71717a)\n      inverse: \"#09090b\",\n    },\n    // Astro UXD Status Colors (unchanged for compliance)\n    status: { ...astroStatus },\n    semantic: {\n      success: \"#56f000\",\n      warning: \"#fce83a\",\n      error: \"#ff3838\",\n      info: \"#8b5cf6\", // Purple for info\n    },\n    // Zendir Purple Accent Palette\n    accent: {\n      primary: \"#8b5cf6\", // Vibrant purple\n      secondary: \"#a78bfa\", // Light purple\n      tertiary: \"#7c3aed\", // Deep purple\n    },\n    interactive: {\n      default: \"#8b5cf6\",\n      hover: \"#a78bfa\",\n      active: \"#7c3aed\",\n      disabled: \"#52525b\",\n    },\n  },\n  spacing: astroThemeDark.spacing,\n  borderRadius: {\n    none: \"0\",\n    xs: \"2px\",\n    sm: \"4px\",\n    md: \"6px\",\n    lg: \"10px\",\n    xl: \"14px\",\n    full: \"9999px\",\n  },\n  elementSize: astroThemeDark.elementSize,\n  typography: astroThemeDark.typography,\n  shadows: {\n    ...shadowsDark,\n    glow: (color: string) =>\n      `0 0 20px ${color}50, 0 0 40px ${color}25, 0 4px 12px ${color}20`,\n  },\n  animation: animationTokens,\n  focus: focusTokensPurpleHue,\n  layout: layoutTokens,\n};\n\n// ============================================================================\n// Purple-Hue Theme - Full Purple Personality\n// Award-winning dark theme with purple accents\n// ============================================================================\n\nexport const purpleHueTheme: ThemeTokensBase = {\n  colors: {\n    background: {\n      base: \"#0a0a0f\",\n      surface: \"rgba(18, 18, 28, 0.98)\",\n      elevated: \"rgba(28, 28, 42, 0.98)\",\n      overlay: \"rgba(0, 0, 0, 0.9)\",\n    },\n    border: {\n      default: \"rgba(139, 92, 246, 0.25)\",\n      muted: \"rgba(55, 48, 82, 0.5)\",\n      focus: \"#8b5cf6\",\n    },\n    text: {\n      primary: \"#fafafa\",\n      secondary: \"#a1a1aa\",\n      tertiary: \"#8e8e96\", // WCAG AA: 6.08:1 on #0a0a0f, 5.02:1 on elevated (was #71717a → 4.05:1 FAIL)\n      muted: \"#8e8e96\", // WCAG AA compliant (was #71717a)\n      inverse: \"#0a0a0f\",\n    },\n    // Astro UXD Status Colors (for compliance)\n    status: { ...astroStatus },\n    semantic: {\n      success: \"#56f000\",\n      warning: \"#fce83a\",\n      error: \"#ff3838\",\n      info: \"#a78bfa\",\n    },\n    // Zendir Purple Accent Palette\n    accent: {\n      primary: \"#8b5cf6\", // Vibrant purple\n      secondary: \"#a78bfa\", // Light purple\n      tertiary: \"#7c3aed\", // Deep purple\n    },\n    interactive: {\n      default: \"#8b5cf6\",\n      hover: \"#a78bfa\",\n      active: \"#7c3aed\",\n      disabled: \"#52525b\",\n    },\n  },\n  spacing: astroThemeDark.spacing,\n  borderRadius: {\n    none: \"0\",\n    xs: \"2px\",\n    sm: \"4px\",\n    md: \"6px\",\n    lg: \"10px\",\n    xl: \"14px\",\n    full: \"9999px\",\n  },\n  elementSize: astroThemeDark.elementSize,\n  // Same typography as hybrid (Astro UX font stack with full fallbacks) for consistent card font across themes\n  typography: astroThemeDark.typography,\n  shadows: {\n    ...shadowsDark,\n    glow: (color: string) =>\n      `0 0 25px ${color}60, 0 0 50px ${color}30, 0 4px 16px ${color}25`,\n  },\n  animation: animationTokens,\n  focus: {\n    ...focusTokensPurpleHue,\n  },\n  layout: layoutTokens,\n};\n\n// ============================================================================\n// Nebula Theme — palette-native dark theme.\n//\n// The first theme wired end-to-end onto the Layer 0 primitives: Prussian\n// Slate (zendirNeutral) surfaces + text, Ultraviolet accent/interactive,\n// Astro UXDS status, and Tailwind + Electric Blue semantic colors.\n// ============================================================================\n\n// The nebula surface spec defines two stops that sit between Neutral ramp\n// values (deeper than neutral-950 reads on OLED, between 900 and 800 for\n// elevation). They are part of the Nebula surface spec, not the ramp.\nconst nebulaBase = \"#070A18\"; // --bg\nconst nebulaElevated = \"#121B36\"; // --surface-2 / --border-subtle\n\nexport const nebulaTheme: ThemeTokensBase = {\n  colors: {\n    background: {\n      base: nebulaBase,\n      surface: zendirNeutral[900], // --surface-1\n      elevated: nebulaElevated,\n      overlay: \"rgba(7, 10, 24, 0.9)\", // nebulaBase @ 90%\n    },\n    border: {\n      default: zendirNeutral[800], // --border / --surface-3\n      muted: nebulaElevated, // --border-subtle\n      focus: ultraviolet[500],\n    },\n    text: {\n      primary: zendirNeutral[50], // --text\n      secondary: zendirNeutral[300], // --text-2\n      tertiary: zendirNeutral[400], // --text-3\n      muted: zendirNeutral[500], // --text-4\n      inverse: nebulaBase,\n    },\n    // Astro UXDS status colors — operator-grade severity, kept immutable.\n    status: { ...astroStatus },\n    semantic: {\n      success: twGreen[500],\n      warning: twYellow[500],\n      error: twRed[500],\n      info: electricBlue[500],\n    },\n    // Ultraviolet accent ramp.\n    accent: {\n      primary: ultraviolet[500],\n      secondary: ultraviolet[400],\n      tertiary: ultraviolet[600],\n    },\n    interactive: {\n      default: ultraviolet[500],\n      hover: ultraviolet[400],\n      active: ultraviolet[700],\n      disabled: zendirNeutral[600], // --text-5\n    },\n  },\n  spacing: astroThemeDark.spacing,\n  borderRadius: {\n    none: \"0\",\n    xs: \"2px\",\n    sm: \"4px\",\n    md: \"7px\",\n    lg: \"10px\",\n    xl: \"14px\",\n    full: \"9999px\",\n  },\n  elementSize: astroThemeDark.elementSize,\n  typography: astroThemeDark.typography,\n  shadows: {\n    ...shadowsDark,\n    glow: (color: string) =>\n      `0 0 25px ${color}60, 0 0 50px ${color}30, 0 4px 16px ${color}25`,\n  },\n  animation: animationTokens,\n  focus: {\n    ...focusTokensPurpleHue,\n  },\n  layout: layoutTokens,\n};\n\n// ============================================================================\n// Transparent Purple-Hue Theme - Glassmorphic Panels\n// Optimized for glass card overlays with transparent backgrounds\n// ============================================================================\n\nexport const transparentTheme: ThemeTokensBase = {\n  colors: {\n    background: {\n      // Highly transparent backgrounds for glass effect\n      base: \"rgba(8, 12, 20, 0.95)\",\n      surface: \"rgba(15, 20, 35, 0.85)\",\n      elevated: \"rgba(25, 35, 55, 0.80)\",\n      overlay: \"rgba(0, 0, 0, 0.75)\",\n    },\n    border: {\n      // Purple accent borders (Zendir brand)\n      default: \"rgba(139, 92, 246, 0.25)\",\n      muted: \"rgba(139, 92, 246, 0.15)\",\n      focus: \"#8b5cf6\",\n      // Thin faded card border with purple hint\n      fadedBoxShadow:\n        \"inset 0 1px 0 rgba(139, 92, 246, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.05), inset 1px 0 0 rgba(139, 92, 246, 0.06), inset -1px 0 0 rgba(139, 92, 246, 0.06)\",\n    },\n    text: {\n      primary: \"#f0f4f8\",\n      secondary: \"#94a3b8\",\n      tertiary: \"#7b8da1\", // WCAG AA: 5.71:1 on base, 5.34:1 on elevated (was #64748b → 3.66:1 FAIL)\n      muted: \"#7b8da1\", // WCAG AA compliant (was #64748b)\n      inverse: \"#0f172a\",\n    },\n    // Astro UXD Status Colors\n    status: { ...astroStatus },\n    semantic: {\n      success: \"#56f000\",\n      warning: \"#fce83a\",\n      error: \"#ff3838\",\n      info: \"#8b5cf6\",\n    },\n    // Purple accent (matching hybrid theme for consistency)\n    accent: {\n      primary: \"#8b5cf6\", // Vibrant purple\n      secondary: \"#a78bfa\", // Light purple\n      tertiary: \"#7c3aed\", // Deep purple\n    },\n    interactive: {\n      default: \"#8b5cf6\", // Purple for interactive elements\n      hover: \"#a78bfa\", // Light purple on hover\n      active: \"#7c3aed\", // Deep purple on active\n      disabled: \"#475569\",\n      // Purple-hue transparent backgrounds for buttons/inputs (transparent + transparent-bold)\n      transparentDefault: \"rgba(139, 92, 246, 0.12)\",\n      transparentHover: \"rgba(139, 92, 246, 0.32)\",\n      transparentInputBg: \"rgba(139, 92, 246, 0.08)\",\n    },\n  },\n  spacing: astroThemeDark.spacing,\n  borderRadius: {\n    none: \"0\",\n    xs: \"2px\",\n    sm: \"4px\",\n    md: \"8px\",\n    lg: \"12px\",\n    xl: \"16px\",\n    full: \"9999px\",\n  },\n  elementSize: astroThemeDark.elementSize,\n  // Same typography as hybrid for consistent card font across themes\n  typography: astroThemeDark.typography,\n  shadows: {\n    ...shadowsDark,\n    // Enhanced glow shadows for glass effect\n    glow: (color: string) =>\n      `0 0 30px ${color}50, 0 0 60px ${color}25, 0 4px 20px rgba(0,0,0,0.4)`,\n  },\n  animation: animationTokens,\n  focus: {\n    color: \"#8b5cf6\", // Purple focus ring\n    width: \"2px\",\n    offset: \"2px\",\n    ring: \"0 0 0 2px #8b5cf6\",\n    style: {\n      outline: \"2px solid #8b5cf6\",\n      outlineOffset: \"2px\",\n    },\n  },\n  layout: layoutTokens,\n};\n\n// ============================================================================\n// Transparent Minimal Theme - Ultra-clean glassmorphic panels\n// Extremely subtle borders, minimal visual noise, clean dark surfaces\n// ============================================================================\n\nexport const transparentMinimalTheme: ThemeTokensBase = {\n  colors: {\n    background: {\n      // Same as transparent theme\n      base: \"rgba(8, 12, 20, 0.95)\",\n      surface: \"rgba(15, 20, 35, 0.85)\",\n      elevated: \"rgba(25, 35, 55, 0.80)\",\n      overlay: \"rgba(0, 0, 0, 0.75)\",\n    },\n    border: {\n      // Accent-colored borders for minimal theme (Zendir purple)\n      default: \"rgba(139, 92, 246, 0.25)\",\n      muted: \"rgba(139, 92, 246, 0.15)\",\n      focus: \"#8b5cf6\",\n      // Subtle card border using accent color\n      fadedBoxShadow:\n        \"inset 0 1px 0 rgba(139, 92, 246, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.1), inset 1px 0 0 rgba(139, 92, 246, 0.05), inset -1px 0 0 rgba(139, 92, 246, 0.05)\",\n    },\n    text: {\n      primary: \"#f0f4f8\",\n      secondary: \"#94a3b8\",\n      tertiary: \"#7b8da1\", // WCAG AA: 5.71:1 on base, 5.34:1 on elevated (was #64748b → 3.66:1 FAIL)\n      muted: \"#7b8da1\", // WCAG AA compliant (was #64748b)\n      inverse: \"#0f172a\",\n    },\n    // Astro UXD Status Colors\n    status: { ...astroStatus },\n    semantic: {\n      success: \"#56f000\",\n      warning: \"#fce83a\",\n      error: \"#ff3838\",\n      info: \"#8b5cf6\",\n    },\n    // Purple accent (matching transparent theme for consistency)\n    accent: {\n      primary: \"#8b5cf6\", // Vibrant purple\n      secondary: \"#a78bfa\", // Light purple\n      tertiary: \"#7c3aed\", // Deep purple\n    },\n    interactive: {\n      default: \"#8b5cf6\", // Purple for interactive elements\n      hover: \"#a78bfa\", // Light purple on hover\n      active: \"#7c3aed\", // Deep purple on active\n      disabled: \"#475569\",\n      // Purple-hue transparent backgrounds for buttons/inputs (same as transparent theme)\n      transparentDefault: \"rgba(139, 92, 246, 0.12)\",\n      transparentHover: \"rgba(139, 92, 246, 0.32)\",\n      transparentInputBg: \"rgba(139, 92, 246, 0.08)\",\n    },\n  },\n  spacing: astroThemeDark.spacing,\n  borderRadius: {\n    none: \"0\",\n    xs: \"2px\",\n    sm: \"4px\",\n    md: \"8px\",\n    lg: \"12px\",\n    xl: \"16px\",\n    full: \"9999px\",\n  },\n  elementSize: astroThemeDark.elementSize,\n  // Same typography as hybrid for consistent card font across themes\n  typography: astroThemeDark.typography,\n  shadows: {\n    ...shadowsDark,\n    // Same glow as transparent theme\n    glow: (color: string) =>\n      `0 0 30px ${color}50, 0 0 60px ${color}25, 0 4px 20px rgba(0,0,0,0.4)`,\n  },\n  animation: animationTokens,\n  focus: {\n    color: \"#8b5cf6\", // Purple focus ring\n    width: \"2px\",\n    offset: \"2px\",\n    ring: \"0 0 0 2px #8b5cf6\",\n    style: {\n      outline: \"2px solid #8b5cf6\",\n      outlineOffset: \"2px\",\n    },\n  },\n  layout: layoutTokens,\n};\n"],"mappings":"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"}

package/dist/tokens/tokens.css

@@ -1,8 +1,11 @@
 /**
  * @zendir/ui — CSS Design Tokens
  *
- * AUTO-GENERATED from src/tokens/index.ts. DO NOT EDIT BY HAND.
- * Regenerate with: npm run build:tokens
+ * SOURCE OF TRUTH — hand-maintained. Edit color/token values here.
+ * `npm run build:tokens` reads this file and regenerates the typed name
+ * constants in css-vars.ts (never the reverse). The scales here mirror the
+ * primitive palettes in src/tokens/palettes/*.ts (the TypeScript source for
+ * JS consumers and the ThemeProvider runtime); keep the two in sync by hand.
  *
  * Usage:
  *   @import '@zendir/ui/tokens/css';
@@ -36,13 +39,6 @@
   --zendir-status-standby-border: #285766;
   --zendir-status-off-border: #3c3e42;
 
-  /* ============================================================
-   * ACCENT COLORS
-   * ============================================================ */
-  --zendir-accent-primary: #4dacff;
-  --zendir-accent-secondary: #3d8ddb;
-  --zendir-accent-tertiary: #2e6eb3;
-
   /* ============================================================
    * SPACING
    * ============================================================ */
@@ -60,7 +56,7 @@
   --zendir-radius-sm: 2px;
   --zendir-radius-md: 4px;
   --zendir-radius-lg: 8px;
-  --zendir-radius-xl: 12px;
+  --zendir-radius-xl: 16px;
   --zendir-radius-full: 9999px;
 
   /* ============================================================
@@ -69,27 +65,33 @@
    * AstroUXDS-compliant fallback. OS-native fonts complete the chain.
    * @see https://www.astrouxds.com/foundations/typography/
    * ============================================================ */
-  --zendir-font-primary: "Public Sans", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
-  --zendir-font-heading: "Sora", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
-  --zendir-font-mono: "Roboto Mono", "SF Mono", "Consolas", "Liberation Mono", monospace;
+  --zendir-font-primary:
+    "Public Sans", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI",
+    "Helvetica Neue", Arial, sans-serif;
+  --zendir-font-heading:
+    "Sora", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI",
+    "Helvetica Neue", Arial, sans-serif;
+  --zendir-font-mono:
+    "Roboto Mono", "SF Mono", "Consolas", "Liberation Mono", monospace;
 
   /* Font sizes (rem-based, AstroUXDS scale) */
   --zendir-font-size-micro: 0.5625rem;
   --zendir-font-size-xxs: 0.625rem;
-  --zendir-font-size-xs: 0.625rem;
-  --zendir-font-size-sm: 0.75rem;
-  --zendir-font-size-base: 0.875rem;
-  --zendir-font-size-md: 0.875rem;
-  --zendir-font-size-lg: 1rem;
-  --zendir-font-size-xl: 1.25rem;
-  --zendir-font-size-xxl: 1.5rem;
-  --zendir-font-size-xxxl: 2.125rem;
+  --zendir-font-size-xs: 0.75rem;
+  --zendir-font-size-sm: 0.875rem;
+  --zendir-font-size-base: 1rem;
+  --zendir-font-size-md: 1.125rem;
+  --zendir-font-size-lg: 1.25rem;
+  --zendir-font-size-xl: 1.5rem;
+  --zendir-font-size-xxl: 2.125rem;
+  --zendir-font-size-xxxl: 3rem;
   --zendir-font-size-display: 3.75rem;
 
   /* Font weights — AstroUXDS supports only 300/400/500/700 */
   --zendir-font-weight-light: 300;
   --zendir-font-weight-normal: 400;
   --zendir-font-weight-medium: 500;
+  --zendir-font-weight-semibold: 500;
   --zendir-font-weight-bold: 700;
 
   /* Line heights */
@@ -116,40 +118,416 @@
 }
 
 /* ============================================================
- * DARK THEME (default)
+ * PRIMITIVE PALETTES (Layer 0 — src/tokens/palettes)
+ * Raw scales; prefer the semantic tokens above for UI surfaces.
+ * ============================================================ */
+:root {
+  /* Zendir Colour System */
+  --zendir-eb-50: #eef2ff;
+  --zendir-eb-100: #e0e7ff;
+  --zendir-eb-200: #c4d2ff;
+  --zendir-eb-300: #9eb4ff;
+  --zendir-eb-400: #6f89ff;
+  --zendir-eb-500: #5061ff;
+  --zendir-eb-600: #3e3cff;
+  --zendir-eb-700: #352edf;
+  --zendir-eb-800: #2a2bb2;
+  --zendir-eb-900: #252e8a;
+  --zendir-eb-950: #151c50;
+  --zendir-pb-50: #eef2ff;
+  --zendir-pb-100: #dee7fe;
+  --zendir-pb-200: #c3d4fe;
+  --zendir-pb-300: #9bb6ff;
+  --zendir-pb-400: #698eff;
+  --zendir-pb-500: #466afc;
+  --zendir-pb-600: #2f4af0;
+  --zendir-pb-700: #263dd3;
+  --zendir-pb-800: #1b2da0;
+  --zendir-pb-900: #192b7a;
+  --zendir-pb-950: #0d1945;
+  --zendir-uv-50: #f5f3fd;
+  --zendir-uv-100: #eae6fa;
+  --zendir-uv-200: #d8cff9;
+  --zendir-uv-300: #c6b4ff;
+  --zendir-uv-400: #9d70ff;
+  --zendir-uv-500: #8744f3;
+  --zendir-uv-600: #7515e2;
+  --zendir-uv-700: #6600cd;
+  --zendir-uv-800: #5400ab;
+  --zendir-uv-900: #421182;
+  --zendir-uv-950: #251048;
+  --zendir-neutral-50: #f6f7fd;
+  --zendir-neutral-100: #edf2fc;
+  --zendir-neutral-200: #dde5f4;
+  --zendir-neutral-300: #c8d1e6;
+  --zendir-neutral-400: #8899bc;
+  --zendir-neutral-500: #596b8e;
+  --zendir-neutral-600: #445272;
+  --zendir-neutral-700: #303c58;
+  --zendir-neutral-800: #1b243d;
+  --zendir-neutral-900: #0d1429;
+  --zendir-neutral-950: #030414;
+
+  /* Astro UXDS status ramps */
+  --zendir-astro-red-400: #ff5f60;
+  --zendir-astro-red-500: #ff3838;
+  --zendir-astro-red-600: #ff2a04;
+  --zendir-astro-red-700: #c8102e;
+  --zendir-astro-red-800: #8b1703;
+  --zendir-astro-red-900: #661102;
+  --zendir-astro-amber-400: #ffcc57;
+  --zendir-astro-amber-500: #ffb302;
+  --zendir-astro-amber-600: #ffaf3d;
+  --zendir-astro-amber-700: #ff8c00;
+  --zendir-astro-amber-800: #975f0e;
+  --zendir-astro-amber-900: #664618;
+  --zendir-astro-yellow-400: #fded61;
+  --zendir-astro-yellow-500: #fce83a;
+  --zendir-astro-yellow-600: #fad800;
+  --zendir-astro-yellow-700: #c7ab00;
+  --zendir-astro-yellow-800: #917d01;
+  --zendir-astro-yellow-900: #645600;
+  --zendir-astro-green-400: #99f666;
+  --zendir-astro-green-500: #56f000;
+  --zendir-astro-green-600: #00e200;
+  --zendir-astro-green-700: #00ad23;
+  --zendir-astro-green-800: #007a33;
+  --zendir-astro-green-900: #005a00;
+  --zendir-astro-cyan-400: #5ce2ff;
+  --zendir-astro-cyan-500: #64d9ff;
+  --zendir-astro-cyan-600: #2dccff;
+  --zendir-astro-cyan-700: #20a9d5;
+  --zendir-astro-cyan-800: #35798e;
+  --zendir-astro-cyan-900: #285766;
+
+  /* Tailwind CSS v4.2 */
+  --zendir-tw-red-50: #fef2f2;
+  --zendir-tw-red-100: #ffe2e2;
+  --zendir-tw-red-200: #ffcaca;
+  --zendir-tw-red-300: #ffa3a4;
+  --zendir-tw-red-400: #ff6568;
+  --zendir-tw-red-500: #fb2c36;
+  --zendir-tw-red-600: #e40016;
+  --zendir-tw-red-700: #bf000f;
+  --zendir-tw-red-800: #9f0712;
+  --zendir-tw-red-900: #82181a;
+  --zendir-tw-red-950: #460809;
+  --zendir-tw-orange-50: #fff7ed;
+  --zendir-tw-orange-100: #ffedd5;
+  --zendir-tw-orange-200: #ffd7a8;
+  --zendir-tw-orange-300: #ffb970;
+  --zendir-tw-orange-400: #ff8b1f;
+  --zendir-tw-orange-500: #fc7100;
+  --zendir-tw-orange-600: #ec5600;
+  --zendir-tw-orange-700: #c43e00;
+  --zendir-tw-orange-800: #9f2d00;
+  --zendir-tw-orange-900: #7e2a0c;
+  --zendir-tw-orange-950: #441306;
+  --zendir-tw-yellow-50: #fefce8;
+  --zendir-tw-yellow-100: #fef9c2;
+  --zendir-tw-yellow-200: #fff085;
+  --zendir-tw-yellow-300: #ffe030;
+  --zendir-tw-yellow-400: #f7c900;
+  --zendir-tw-yellow-500: #eab300;
+  --zendir-tw-yellow-600: #ca8a00;
+  --zendir-tw-yellow-700: #a26200;
+  --zendir-tw-yellow-800: #874c00;
+  --zendir-tw-yellow-900: #733e0a;
+  --zendir-tw-yellow-950: #432004;
+  --zendir-tw-green-50: #f0fdf4;
+  --zendir-tw-green-100: #dcfce7;
+  --zendir-tw-green-200: #b9f8cf;
+  --zendir-tw-green-300: #7bf1a8;
+  --zendir-tw-green-400: #05df72;
+  --zendir-tw-green-500: #00c65a;
+  --zendir-tw-green-600: #00a447;
+  --zendir-tw-green-700: #00813a;
+  --zendir-tw-green-800: #016630;
+  --zendir-tw-green-900: #0d542b;
+  --zendir-tw-green-950: #032e15;
+  --zendir-tw-sky-50: #f0f9ff;
+  --zendir-tw-sky-100: #dff2fe;
+  --zendir-tw-sky-200: #b8e6fe;
+  --zendir-tw-sky-300: #78d4ff;
+  --zendir-tw-sky-400: #00bbfd;
+  --zendir-tw-sky-500: #00a5ea;
+  --zendir-tw-sky-600: #0084c7;
+  --zendir-tw-sky-700: #0069a2;
+  --zendir-tw-sky-800: #005986;
+  --zendir-tw-sky-900: #024a70;
+  --zendir-tw-sky-950: #052f4a;
+  --zendir-tw-blue-50: #eff6ff;
+  --zendir-tw-blue-100: #dbeafe;
+  --zendir-tw-blue-200: #bedbff;
+  --zendir-tw-blue-300: #91c5ff;
+  --zendir-tw-blue-400: #56a2ff;
+  --zendir-tw-blue-500: #3280ff;
+  --zendir-tw-blue-600: #155dfc;
+  --zendir-tw-blue-700: #1447e6;
+  --zendir-tw-blue-800: #193cb8;
+  --zendir-tw-blue-900: #1c398e;
+  --zendir-tw-blue-950: #162456;
+  --zendir-tw-indigo-50: #eef2ff;
+  --zendir-tw-indigo-100: #e0e7ff;
+  --zendir-tw-indigo-200: #c7d2ff;
+  --zendir-tw-indigo-300: #a4b4ff;
+  --zendir-tw-indigo-400: #7d87ff;
+  --zendir-tw-indigo-500: #6260ff;
+  --zendir-tw-indigo-600: #4f39f6;
+  --zendir-tw-indigo-700: #432dd7;
+  --zendir-tw-indigo-800: #372aac;
+  --zendir-tw-indigo-900: #312c85;
+  --zendir-tw-indigo-950: #1e1a4d;
+  --zendir-tw-purple-50: #faf5ff;
+  --zendir-tw-purple-100: #f3e8ff;
+  --zendir-tw-purple-200: #e9d5ff;
+  --zendir-tw-purple-300: #d8b4ff;
+  --zendir-tw-purple-400: #bf7eff;
+  --zendir-tw-purple-500: #ab4eff;
+  --zendir-tw-purple-600: #9810fa;
+  --zendir-tw-purple-700: #8200d9;
+  --zendir-tw-purple-800: #6e11b0;
+  --zendir-tw-purple-900: #59168b;
+  --zendir-tw-purple-950: #3c0366;
+  --zendir-tw-pink-50: #fdf2f8;
+  --zendir-tw-pink-100: #fce7f3;
+  --zendir-tw-pink-200: #fccee8;
+  --zendir-tw-pink-300: #fda5d5;
+  --zendir-tw-pink-400: #fb64b6;
+  --zendir-tw-pink-500: #f6339a;
+  --zendir-tw-pink-600: #e30076;
+  --zendir-tw-pink-700: #c2005c;
+  --zendir-tw-pink-800: #a2004c;
+  --zendir-tw-pink-900: #861043;
+  --zendir-tw-pink-950: #510424;
+  --zendir-tw-rose-50: #fff1f2;
+  --zendir-tw-rose-100: #ffe4e6;
+  --zendir-tw-rose-200: #ffccd3;
+  --zendir-tw-rose-300: #ffa3ae;
+  --zendir-tw-rose-400: #ff6880;
+  --zendir-tw-rose-500: #ff2357;
+  --zendir-tw-rose-600: #e60045;
+  --zendir-tw-rose-700: #c1003a;
+  --zendir-tw-rose-800: #a30037;
+  --zendir-tw-rose-900: #8b0836;
+  --zendir-tw-rose-950: #4d0218;
+  --zendir-tw-slate-50: #f8fafc;
+  --zendir-tw-slate-100: #f1f5f9;
+  --zendir-tw-slate-200: #e2e8f0;
+  --zendir-tw-slate-300: #cad5e2;
+  --zendir-tw-slate-400: #90a1b9;
+  --zendir-tw-slate-500: #62748e;
+  --zendir-tw-slate-600: #45556c;
+  --zendir-tw-slate-700: #314158;
+  --zendir-tw-slate-800: #1d293d;
+  --zendir-tw-slate-900: #0f172b;
+  --zendir-tw-slate-950: #020618;
+  --zendir-tw-neutral-50: #fafafa;
+  --zendir-tw-neutral-100: #f5f5f5;
+  --zendir-tw-neutral-200: #e5e5e5;
+  --zendir-tw-neutral-300: #d4d4d4;
+  --zendir-tw-neutral-400: #a1a1a1;
+  --zendir-tw-neutral-500: #737373;
+  --zendir-tw-neutral-600: #525252;
+  --zendir-tw-neutral-700: #404040;
+  --zendir-tw-neutral-800: #262626;
+  --zendir-tw-neutral-900: #171717;
+  --zendir-tw-neutral-950: #0a0a0a;
+}
+
+/* ============================================================
+ * ZEN (HYBRID) THEME (default)
  * ============================================================ */
 :root,
+[data-theme="hybrid"],
 [data-theme="dark"] {
+  --zendir-bg-base: #09090b;
+  --zendir-bg-surface: rgba(24, 24, 27, 0.98);
+  --zendir-bg-elevated: rgba(39, 39, 42, 0.98);
+  --zendir-bg-overlay: rgba(0, 0, 0, 0.85);
+
+  --zendir-text-primary: #ffffff;
+  --zendir-text-secondary: #a1a1aa;
+  --zendir-text-tertiary: #8e8e96;
+  --zendir-text-muted: #8e8e96;
+
+  --zendir-border-default: rgba(139, 92, 246, 0.3);
+  --zendir-border-muted: rgba(63, 63, 70, 0.5);
+  --zendir-border-focus: #8b5cf6;
+
+  --zendir-accent-primary: #8b5cf6;
+  --zendir-accent-secondary: #a78bfa;
+  --zendir-accent-tertiary: #7c3aed;
+
+  --zendir-semantic-success: #56f000;
+  --zendir-semantic-warning: #fce83a;
+  --zendir-semantic-error: #ff3838;
+  --zendir-semantic-info: #8b5cf6;
+}
+
+/* ============================================================
+ * ASTRO THEME
+ * ============================================================ */
+[data-theme="astro"] {
   --zendir-bg-base: #101923;
   --zendir-bg-surface: #1b2d3e;
-  --zendir-bg-elevated: #243647;
-  --zendir-bg-overlay: rgba(0, 0, 0, 0.7);
+  --zendir-bg-elevated: #243b53;
+  --zendir-bg-overlay: rgba(16, 25, 35, 0.95);
 
   --zendir-text-primary: #ffffff;
-  --zendir-text-secondary: #9ea7ad;
-  --zendir-text-tertiary: #6b7175;
-  --zendir-text-muted: #52595f;
+  --zendir-text-secondary: #b7c5d3;
+  --zendir-text-tertiary: #8fa4b7;
+  --zendir-text-muted: #8fa4b7;
 
-  --zendir-border-default: #3c4b5a;
-  --zendir-border-muted: #2b3d4e;
+  --zendir-border-default: #2b659b;
+  --zendir-border-muted: #172635;
   --zendir-border-focus: #4dacff;
+
+  --zendir-accent-primary: #4dacff;
+  --zendir-accent-secondary: #56f000;
+  --zendir-accent-tertiary: #a371f7;
+
+  --zendir-semantic-success: #56f000;
+  --zendir-semantic-warning: #fce83a;
+  --zendir-semantic-error: #ff3838;
+  --zendir-semantic-info: #4dacff;
 }
 
-/* ============================================================
- * LIGHT THEME
- * ============================================================ */
+[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"] {
-  --zendir-bg-base: #f5f6f9;
-  --zendir-bg-surface: #ffffff;
+  --zendir-bg-base: #eaeef4;
+  --zendir-bg-surface: #f5f8fc;
   --zendir-bg-elevated: #ffffff;
-  --zendir-bg-overlay: rgba(0, 0, 0, 0.5);
+  --zendir-bg-overlay: rgba(234, 238, 244, 0.95);
 
   --zendir-text-primary: #1b2d3e;
-  --zendir-text-secondary: #4c5a67;
-  --zendir-text-tertiary: #7a8891;
-  --zendir-text-muted: #a4adb5;
+  --zendir-text-secondary: #51667c;
+  --zendir-text-tertiary: #556a7c;
+  --zendir-text-muted: #556a7c;
 
-  --zendir-border-default: #c4c8cc;
-  --zendir-border-muted: #e1e4e8;
-  --zendir-border-focus: #4dacff;
+  --zendir-border-default: #2b659b;
+  --zendir-border-muted: #d1d5db;
+  --zendir-border-focus: #0066cc;
+
+  --zendir-accent-primary: #0066cc;
+  --zendir-accent-secondary: #56f000;
+  --zendir-accent-tertiary: #7c3aed;
+
+  --zendir-semantic-success: #56f000;
+  --zendir-semantic-warning: #fce83a;
+  --zendir-semantic-error: #ff3838;
+  --zendir-semantic-info: #4dacff;
+}
+
+/* ============================================================
+ * NEBULA THEME
+ * ============================================================ */
+[data-theme="nebula"] {
+  --zendir-bg-base: #070a18;
+  --zendir-bg-surface: #0d1429;
+  --zendir-bg-elevated: #121b36;
+  --zendir-bg-overlay: rgba(7, 10, 24, 0.9);
+
+  --zendir-text-primary: #f6f7fd;
+  --zendir-text-secondary: #c8d1e6;
+  --zendir-text-tertiary: #8899bc;
+  --zendir-text-muted: #596b8e;
+
+  --zendir-border-default: #1b243d;
+  --zendir-border-muted: #121b36;
+  --zendir-border-focus: #8744f3;
+
+  --zendir-accent-primary: #8744f3;
+  --zendir-accent-secondary: #9d70ff;
+  --zendir-accent-tertiary: #7515e2;
+
+  --zendir-semantic-success: #00c65a;
+  --zendir-semantic-warning: #eab300;
+  --zendir-semantic-error: #fb2c36;
+  --zendir-semantic-info: #5061ff;
+}
+
+/* ============================================================
+ * PURPLE HUE THEME
+ * ============================================================ */
+[data-theme="purple-hue"] {
+  --zendir-bg-base: #0a0a0f;
+  --zendir-bg-surface: rgba(18, 18, 28, 0.98);
+  --zendir-bg-elevated: rgba(28, 28, 42, 0.98);
+  --zendir-bg-overlay: rgba(0, 0, 0, 0.9);
+
+  --zendir-text-primary: #fafafa;
+  --zendir-text-secondary: #a1a1aa;
+  --zendir-text-tertiary: #8e8e96;
+  --zendir-text-muted: #8e8e96;
+
+  --zendir-border-default: rgba(139, 92, 246, 0.25);
+  --zendir-border-muted: rgba(55, 48, 82, 0.5);
+  --zendir-border-focus: #8b5cf6;
+
+  --zendir-accent-primary: #8b5cf6;
+  --zendir-accent-secondary: #a78bfa;
+  --zendir-accent-tertiary: #7c3aed;
+
+  --zendir-semantic-success: #56f000;
+  --zendir-semantic-warning: #fce83a;
+  --zendir-semantic-error: #ff3838;
+  --zendir-semantic-info: #a78bfa;
+}
+
+/* ============================================================
+ * TRANSPARENT THEMES
+ * ============================================================ */
+[data-theme="transparent"],
+[data-theme="transparent-bold"] {
+  --zendir-bg-base: rgba(8, 12, 20, 0.95);
+  --zendir-bg-surface: rgba(15, 20, 35, 0.85);
+  --zendir-bg-elevated: rgba(25, 35, 55, 0.8);
+  --zendir-bg-overlay: rgba(0, 0, 0, 0.75);
+
+  --zendir-text-primary: #f0f4f8;
+  --zendir-text-secondary: #94a3b8;
+  --zendir-text-tertiary: #7b8da1;
+  --zendir-text-muted: #7b8da1;
+
+  --zendir-border-default: rgba(139, 92, 246, 0.25);
+  --zendir-border-muted: rgba(139, 92, 246, 0.15);
+  --zendir-border-focus: #8b5cf6;
+
+  --zendir-accent-primary: #8b5cf6;
+  --zendir-accent-secondary: #a78bfa;
+  --zendir-accent-tertiary: #7c3aed;
+
+  --zendir-semantic-success: #56f000;
+  --zendir-semantic-warning: #fce83a;
+  --zendir-semantic-error: #ff3838;
+  --zendir-semantic-info: #8b5cf6;
+}
+
+[data-theme="transparent-minimal"] {
+  --zendir-bg-base: rgba(8, 12, 20, 0.95);
+  --zendir-bg-surface: rgba(15, 20, 35, 0.85);
+  --zendir-bg-elevated: rgba(25, 35, 55, 0.8);
+  --zendir-bg-overlay: rgba(0, 0, 0, 0.75);
+
+  --zendir-text-primary: #f0f4f8;
+  --zendir-text-secondary: #94a3b8;
+  --zendir-text-tertiary: #7b8da1;
+  --zendir-text-muted: #7b8da1;
+
+  --zendir-border-default: rgba(139, 92, 246, 0.25);
+  --zendir-border-muted: rgba(139, 92, 246, 0.15);
+  --zendir-border-focus: #8b5cf6;
+
+  --zendir-accent-primary: #8b5cf6;
+  --zendir-accent-secondary: #a78bfa;
+  --zendir-accent-tertiary: #7c3aed;
+
+  --zendir-semantic-success: #56f000;
+  --zendir-semantic-warning: #fce83a;
+  --zendir-semantic-error: #ff3838;
+  --zendir-semantic-info: #8b5cf6;
 }

package/dist/types/index.d.ts

@@ -13,9 +13,9 @@ export interface AnomalyStatus {
  * Severity uses AstroUXDS terminology: caution, serious, critical
  */
 export interface Anomaly {
-    type: 'gyroscope' | 'star_tracker' | 'power' | 'communication' | 'thermal' | 'propulsion';
+    type: "gyroscope" | "star_tracker" | "power" | "communication" | "thermal" | "propulsion";
     /** Severity level (AstroUXDS: caution/serious/critical) */
-    severity: 'caution' | 'serious' | 'critical';
+    severity: "caution" | "serious" | "critical";
     timestamp: string;
     description: string;
     subsystem?: string;