@medalsocial/meda 2.8.1 → 3.2.0

package/dist/styles/bridge.css

@@ -0,0 +1,159 @@
+/* @medalsocial/meda/styles/bridge.css
+ *
+ * Tailwind v4 theme bridge ONLY: the `dark` custom variant plus the
+ * `@theme inline` mappings that turn meda's CSS custom properties into
+ * Tailwind utilities (`bg-primary`, `text-muted-foreground`, `bg-brand-500`,
+ * `bg-shell-rail`, ...). It defines NO token values and scans NO component
+ * output, so it costs nothing until a utility is actually generated.
+ *
+ * Use it directly when the consuming site brings its own shadcn-style
+ * semantic tokens (`--primary`, `--card`, `--muted`, ...) and meda parts
+ * should re-theme to them. Otherwise import `styles/base.css`, which layers
+ * meda's canonical token values on top of this bridge.
+ *
+ * Font families are intentionally NOT mapped here: `--font-sans` would point
+ * at meda's `--font-family-sans`, which a bring-your-own-tokens site does not
+ * define, silently dropping the page to the UA serif. base.css maps them.
+ */
+
+@custom-variant dark (&:is(.dark *, [data-theme="dark"] *));
+
+@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);
+}

package/dist/styles/calendar.css

@@ -0,0 +1,8 @@
+/* @medalsocial/meda/calendar/styles.css
+ *
+ * Generates only the Tailwind utilities used by `@medalsocial/meda/calendar`.
+ * Requires the theme bridge: import `@medalsocial/meda/styles/base.css`
+ * (meda tokens) or `@medalsocial/meda/styles/bridge.css` (your own tokens)
+ * once, before this file. Paths resolve relative to dist/styles/.
+ */
+@source "../calendar/**/*.js";

package/dist/styles/primitives.css

@@ -0,0 +1,10 @@
+/* @medalsocial/meda/primitives/styles.css
+ *
+ * Generates only the Tailwind utilities used by the foundation primitives
+ * (`@medalsocial/meda/primitives`). MarkdownView is excluded — it ships from
+ * its own subpath with optional peers. Requires the theme bridge: import
+ * `@medalsocial/meda/styles/base.css` or `.../styles/bridge.css` once,
+ * before this file. Paths resolve relative to dist/styles/.
+ */
+@source "../primitives/*.js";
+@source not "../primitives/markdown-view*.js";

package/dist/styles/theme.css

@@ -1,5 +1,15 @@
-@import "./tokens.css";
-@import "@xyflow/react/dist/style.css";
+/* @medalsocial/meda/styles.css — batteries-included entry.
+ *
+ * = styles/base.css (tokens + theme bridge + base layer)
+ * + every feature stylesheet (all meda component output is scanned)
+ * + the workflow-builder stylesheet (which carries @xyflow/react's CSS).
+ *
+ * Output is unchanged from the pre-split theme.css. Consumers that render
+ * only a few surfaces should use the lean entries instead — see README
+ * "Lean consumer setup".
+ */
+@import "./base.css";
+@import "./workflow-builder.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,
@@ -10,166 +20,6 @@
    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);
-}