@medalsocial/meda/dist/styles/theme.css

Shared Meda UI shell and runtime package.

@import "./tokens.css";
@import "@xyflow/react/dist/style.css";

/* Tell Tailwind v4 to scan meda's compiled component output so utilities
   like `h-full`, `mt-auto`, `py-3.5`, and `bg-shell-rail` (used by IconRail,
   AppShellWorkspace, etc.) are generated even when the consumer app doesn't
   reference them itself. Without this, consumers see broken layout where
   meda components rely on classes the app doesn't otherwise use. Path is
   resolved relative to this CSS file at build time, so it points to the
   sibling component output regardless of where the package is installed. */
@source "../**/*.js";

@custom-variant dark (&:is(.dark *, [data-theme="dark"] *));

@layer base {
  :root {
    color-scheme: light;
    --auth-gradient-primary: var(--color-brand-500);
    --auth-gradient-secondary: var(--color-brand-700);
    --auth-gradient-base: var(--color-brand-800);
  }

  .dark,
  [data-theme="dark"] {
    color-scheme: dark;
  }
}

[data-vaul-drawer][data-state="open"] {
  will-change: auto;
}

@theme inline {
  /* Color primitives — exposed as Tailwind color scales */

  /* Brand (purple) — 11 stops */
  --color-brand-50: var(--color-brand-50);
  --color-brand-100: var(--color-brand-100);
  --color-brand-200: var(--color-brand-200);
  --color-brand-300: var(--color-brand-300);
  --color-brand-400: var(--color-brand-400);
  --color-brand-500: var(--color-brand-500);
  --color-brand-600: var(--color-brand-600);
  --color-brand-700: var(--color-brand-700);
  --color-brand-800: var(--color-brand-800);
  --color-brand-900: var(--color-brand-900);
  --color-brand-950: var(--color-brand-950);

  /* Neutral (zinc-aligned) — 11 stops */
  --color-neutral-50: var(--color-neutral-50);
  --color-neutral-100: var(--color-neutral-100);
  --color-neutral-200: var(--color-neutral-200);
  --color-neutral-300: var(--color-neutral-300);
  --color-neutral-400: var(--color-neutral-400);
  --color-neutral-500: var(--color-neutral-500);
  --color-neutral-600: var(--color-neutral-600);
  --color-neutral-700: var(--color-neutral-700);
  --color-neutral-800: var(--color-neutral-800);
  --color-neutral-900: var(--color-neutral-900);
  --color-neutral-950: var(--color-neutral-950);

  /* Error (rose) — 10 stops */
  --color-error-50: var(--color-error-50);
  --color-error-100: var(--color-error-100);
  --color-error-200: var(--color-error-200);
  --color-error-300: var(--color-error-300);
  --color-error-400: var(--color-error-400);
  --color-error-500: var(--color-error-500);
  --color-error-600: var(--color-error-600);
  --color-error-700: var(--color-error-700);
  --color-error-800: var(--color-error-800);
  --color-error-900: var(--color-error-900);

  /* Info (blue) — 10 stops */
  --color-info-50: var(--color-info-50);
  --color-info-100: var(--color-info-100);
  --color-info-200: var(--color-info-200);
  --color-info-300: var(--color-info-300);
  --color-info-400: var(--color-info-400);
  --color-info-500: var(--color-info-500);
  --color-info-600: var(--color-info-600);
  --color-info-700: var(--color-info-700);
  --color-info-800: var(--color-info-800);
  --color-info-900: var(--color-info-900);

  /* Success (teal) — 10 stops */
  --color-success-50: var(--color-success-50);
  --color-success-100: var(--color-success-100);
  --color-success-200: var(--color-success-200);
  --color-success-300: var(--color-success-300);
  --color-success-400: var(--color-success-400);
  --color-success-500: var(--color-success-500);
  --color-success-600: var(--color-success-600);
  --color-success-700: var(--color-success-700);
  --color-success-800: var(--color-success-800);
  --color-success-900: var(--color-success-900);

  /* Warning (amber) — 10 stops */
  --color-warning-50: var(--color-warning-50);
  --color-warning-100: var(--color-warning-100);
  --color-warning-200: var(--color-warning-200);
  --color-warning-300: var(--color-warning-300);
  --color-warning-400: var(--color-warning-400);
  --color-warning-500: var(--color-warning-500);
  --color-warning-600: var(--color-warning-600);
  --color-warning-700: var(--color-warning-700);
  --color-warning-800: var(--color-warning-800);
  --color-warning-900: var(--color-warning-900);

  /* shadcn semantic colors (mode-flipped at runtime via :root / .dark) */
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);

  /* Status semantic */
  --color-success: var(--success);
  --color-success-foreground: var(--success-foreground);
  --color-warning: var(--warning);
  --color-warning-foreground: var(--warning-foreground);
  --color-info: var(--info);
  --color-info-foreground: var(--info-foreground);
  --color-danger: var(--danger);

  /* Sidebar */
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

  /* Chart */
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);

  /* Shell semantic colors */
  --color-shell-header: var(--shell-header);
  --color-shell-rail: var(--shell-rail);
  --color-shell-context: var(--shell-context);
  --color-shell-main: var(--shell-main);
  --color-shell-panel: var(--shell-panel);
  --color-shell-border: var(--shell-border);

  /* Shell sizing → spacing scale */
  --spacing-shell-header: var(--shell-header-height);
  --spacing-shell-rail: var(--shell-rail-width);
  --spacing-shell-context: var(--shell-context-default);
  --spacing-shell-panel: var(--shell-panel-default);
  --spacing-shell-bottom-nav: var(--shell-bottom-nav-height);

  /* Font families — Geist + Geist Mono only (no Inter) */
  --font-sans: var(--font-family-sans);
  --font-mono: var(--font-family-mono);
}