@proyecto-viviana/ui 0.3.5 → 0.4.0

package/src/styles.css

@@ -1,450 +1,6 @@
-/*
- * Viviana UI Complete Styles (Theme + Components)
- *
- * WARNING: This file contains @theme which cannot be @imported in Tailwind v4.
- * Use components.css instead and copy the @theme block from theme.css.
- *
- * For proper usage, see theme.css documentation.
- */
-
-/* ===== THEME ===== */
-@theme {
-  /* Breakpoints */
-  --breakpoint-xxs: 320px;
-  --breakpoint-xs: 475px;
-
-  /* Background - Dark blue-gray */
-  --color-bg-100: #3B5260;
-  --color-bg-200: #293E4B;
-  --color-bg-300: #24313a;
-  --color-bg-400: #1D272E;
-  --color-bg-light: #515151;
-
-  /* Accent - Pink */
-  --color-accent: #DF5C9A;
-  --color-accent-200: #FFB2D7;
-  --color-accent-300: #FF88C0;
-  --color-accent-500: #DF5C9A;
-  --color-accent-highlight: #e2a2be;
-
-  /* Primary - Cyan/Blue */
-  --color-primary-100: #D9F2FF;
-  --color-primary-200: #D0E9F5;
-  --color-primary-300: #ADCCDC;
-  --color-primary-400: #B8DFFF;
-  --color-primary-500: #75ABC7;
-  --color-primary-600: #58748B;
-  --color-primary-700: #4F6D85;
-  --color-primary-800: #4C6477;
-
-  /* Success - Green */
-  --color-success-100: #E5FFF3;
-  --color-success-400: #C2FFC8;
-  --color-success-600: #559D87;
-
-  /* Warning - Yellow */
-  --color-warning-100: #FFFBE5;
-  --color-warning-400: #FFDD87;
-  --color-warning-600: #9D8D55;
-
-  /* Danger - Red */
-  --color-danger-100: #FFE5E5;
-  --color-danger-400: #FF8787;
-  --color-danger-600: #9D5555;
-
-  /* Cards */
-  --color-cards-bg: #373737;
-  --color-cards-bg-load: #484848;
-  --color-correct: #83f1a7;
-  --color-incorrect: #e74c3c;
-
-  /* Typography */
-  --font-sen: 'Sen', sans-serif;
-  --font-jost: 'Jost', sans-serif;
-  --font-sans: 'Sen', sans-serif;
-  --font-mono: 'JetBrains Mono', monospace;
-}
-
-/* ===== FONT UTILITIES ===== */
-.font-sen {
-  font-family: 'Sen', sans-serif;
-}
-
-.font-jost {
-  font-family: 'Jost', sans-serif;
-}
-
-/* ===== CUSTOM SHADOWS ===== */
-.drop-shadow-title-card {
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
-}
-
-.drop-shadow-logo {
-  filter: drop-shadow(0 0 10px rgba(223, 92, 154, 0.8));
-}
-
-.shadow-primary-chip {
-  box-shadow: 0 2px 8px rgba(79, 109, 133, 0.4);
-}
-
-/* ===== BUTTON COMPONENT ===== */
-.vui-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  padding: 0.5rem 1rem;
-  font-size: 1rem;
-  font-weight: 500;
-  border-radius: 0.5rem;
-  transition: all 0.2s ease;
-  cursor: pointer;
-  border: none;
-  outline: none;
-}
-
-.vui-button:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 2px var(--color-bg-400), 0 0 0 4px var(--color-accent-300);
-}
-
-.vui-button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.vui-button.is-pressed {
-  transform: scale(0.98);
-}
-
-/* Fill variants - pokeforos style */
-/* Primary = Pink accent (main CTA) */
-.vui-button--fill.vui-button--primary {
-  background: var(--color-accent);
-  color: white;
-}
-.vui-button--fill.vui-button--primary:hover:not(:disabled) {
-  background: var(--color-accent-300);
-}
-.vui-button--fill.vui-button--primary:active:not(:disabled) {
-  background: var(--color-accent-500);
-}
-
-/* Secondary = Cyan primary */
-.vui-button--fill.vui-button--secondary {
-  background: var(--color-primary-500);
-  color: white;
-}
-.vui-button--fill.vui-button--secondary:hover:not(:disabled) {
-  background: var(--color-primary-400);
-}
-.vui-button--fill.vui-button--secondary:active:not(:disabled) {
-  background: var(--color-primary-600);
-}
-
-/* Accent = Also pink (alias for primary look) */
-.vui-button--fill.vui-button--accent {
-  background: var(--color-accent);
-  color: white;
-}
-.vui-button--fill.vui-button--accent:hover:not(:disabled) {
-  background: var(--color-accent-300);
-}
-.vui-button--fill.vui-button--accent:active:not(:disabled) {
-  background: var(--color-accent-500);
-}
-
-/* Negative = Danger red */
-.vui-button--fill.vui-button--negative {
-  background: var(--color-danger-400);
-  color: white;
-}
-.vui-button--fill.vui-button--negative:hover:not(:disabled) {
-  background: var(--color-danger-600);
-}
-.vui-button--fill.vui-button--negative:active:not(:disabled) {
-  background: var(--color-danger-400);
-}
-
-/* Outline variants */
-.vui-button--outline.vui-button--primary {
-  border: 2px solid var(--color-accent);
-  color: var(--color-accent-200);
-  background: transparent;
-}
-.vui-button--outline.vui-button--primary:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--color-accent) 15%, transparent);
-}
-
-.vui-button--outline.vui-button--secondary {
-  border: 2px solid var(--color-primary-500);
-  color: var(--color-primary-300);
-  background: transparent;
-}
-.vui-button--outline.vui-button--secondary:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--color-primary-500) 15%, transparent);
-}
-
-.vui-button--outline.vui-button--accent {
-  border: 2px solid var(--color-accent);
-  color: var(--color-accent-200);
-  background: transparent;
-}
-.vui-button--outline.vui-button--accent:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--color-accent) 15%, transparent);
-}
-
-.vui-button--outline.vui-button--negative {
-  border: 2px solid var(--color-danger-400);
-  color: var(--color-danger-100);
-  background: transparent;
-}
-.vui-button--outline.vui-button--negative:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--color-danger-400) 15%, transparent);
-}
-
-/* ===== CHIP COMPONENT ===== */
-.vui-chip {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.125rem 0.5rem;
-  font-size: 0.75rem;
-  font-weight: 600;
-  border-radius: 9999px;
-  text-transform: uppercase;
-}
-
-.vui-chip--primary {
-  background: var(--color-primary-700);
-  color: var(--color-primary-100);
-  box-shadow: 0 2px 8px rgba(79, 109, 133, 0.4);
-}
-
-.vui-chip--accent {
-  background: var(--color-accent);
-  color: white;
-}
-
-.vui-chip--success {
-  background: var(--color-success-600);
-  color: var(--color-success-100);
-}
-
-.vui-chip--warning {
-  background: var(--color-warning-600);
-  color: var(--color-warning-100);
-}
-
-.vui-chip--danger {
-  background: var(--color-danger-600);
-  color: var(--color-danger-100);
-}
-
-/* ===== BADGE COMPONENT ===== */
-.vui-badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.25rem 0.75rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  border-radius: 0.375rem;
-}
-
-.vui-badge--primary {
-  background: var(--color-primary-700);
-  color: var(--color-primary-100);
-}
-
-.vui-badge--accent {
-  background: var(--color-accent);
-  color: white;
-}
-
-.vui-badge--success {
-  background: var(--color-success-600);
-  color: var(--color-success-100);
-}
-
-.vui-badge--warning {
-  background: var(--color-warning-600);
-  color: var(--color-warning-100);
-}
-
-.vui-badge--danger {
-  background: var(--color-danger-600);
-  color: var(--color-danger-100);
-}
-
-/* ===== ALERT COMPONENT ===== */
-.vui-alert {
-  display: flex;
-  align-items: flex-start;
-  gap: 0.75rem;
-  padding: 1rem;
-  border-radius: 0.5rem;
-  border-width: 1px;
-}
-
-.vui-alert--info {
-  background: color-mix(in srgb, var(--color-primary-700) 20%, transparent);
-  border-color: var(--color-primary-600);
-  color: var(--color-primary-200);
-}
-
-.vui-alert--success {
-  background: color-mix(in srgb, var(--color-success-600) 20%, transparent);
-  border-color: var(--color-success-600);
-  color: var(--color-success-100);
-}
-
-.vui-alert--warning {
-  background: color-mix(in srgb, var(--color-warning-600) 20%, transparent);
-  border-color: var(--color-warning-600);
-  color: var(--color-warning-100);
-}
-
-.vui-alert--error {
-  background: color-mix(in srgb, var(--color-danger-600) 20%, transparent);
-  border-color: var(--color-danger-400);
-  color: var(--color-danger-100);
-}
-
-/* ===== AVATAR COMPONENT ===== */
-.vui-avatar {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 9999px;
-  overflow: hidden;
-  background: var(--color-bg-300);
-  color: var(--color-primary-300);
-  font-weight: 600;
-}
-
-.vui-avatar--sm {
-  width: 2rem;
-  height: 2rem;
-  font-size: 0.75rem;
-}
-
-.vui-avatar--md {
-  width: 2.5rem;
-  height: 2.5rem;
-  font-size: 0.875rem;
-}
-
-.vui-avatar--lg {
-  width: 3rem;
-  height: 3rem;
-  font-size: 1rem;
-}
-
-.vui-avatar--xl {
-  width: 4rem;
-  height: 4rem;
-  font-size: 1.25rem;
-}
-
-/* ===== CARD COMPONENT ===== */
-.vui-card {
-  background: var(--color-bg-300);
-  border: 1px solid var(--color-primary-600);
-  border-radius: 0.75rem;
-  overflow: hidden;
-}
-
-.vui-card--accent-border {
-  border-bottom-color: var(--color-accent-500);
-}
-
-/* ===== GRADIENTS ===== */
-.hero-gradient {
-  background: linear-gradient(135deg, var(--color-bg-300) 0%, var(--color-bg-400) 100%);
-}
-
-.gradient-text {
-  background: linear-gradient(135deg, var(--color-primary-300), var(--color-accent-300));
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-
-/* ===== PROSE/DOCS ===== */
-.prose {
-  max-width: 65ch;
-}
-
-.prose h1 {
-  font-size: 2.25rem;
-  font-weight: 700;
-  margin-bottom: 1rem;
-  color: var(--color-primary-100);
-}
-
-.prose h2 {
-  font-size: 1.5rem;
-  font-weight: 600;
-  margin-top: 2rem;
-  margin-bottom: 0.75rem;
-  color: var(--color-primary-200);
-}
-
-.prose h3 {
-  font-size: 1.25rem;
-  font-weight: 600;
-  margin-top: 1.5rem;
-  margin-bottom: 0.5rem;
-  color: var(--color-primary-200);
-}
-
-.prose p {
-  margin-bottom: 1rem;
-  line-height: 1.75;
-  color: var(--color-primary-300);
-}
-
-.prose code {
-  background: var(--color-bg-300);
-  padding: 0.125rem 0.375rem;
-  border-radius: 0.25rem;
-  font-family: var(--font-mono);
-  font-size: 0.875em;
-  color: var(--color-accent-200);
-}
-
-.prose pre {
-  background: var(--color-bg-400);
-  color: var(--color-primary-100);
-  padding: 1rem;
-  border-radius: 0.5rem;
-  overflow-x: auto;
-  margin: 1rem 0;
-}
-
-.prose pre code {
-  background: transparent;
-  padding: 0;
-  color: inherit;
-}
-
-/* ===== SIDEBAR ===== */
-.sidebar-link {
-  display: block;
-  padding: 0.5rem 1rem;
-  border-radius: 0.375rem;
-  color: var(--color-primary-300);
-  transition: all 0.15s;
-}
-
-.sidebar-link:hover {
-  background: var(--color-bg-300);
-  color: var(--color-primary-100);
-}
-
-.sidebar-link.active {
-  background: var(--color-primary-700);
-  color: var(--color-primary-100);
-  font-weight: 500;
-}
+/* solid-spectrum's full atomic CSS (the umbrella base). viviana's own extracted
+   macro CSS for the migrated custom components is appended below at build time by
+   scripts/inline-macro-css.mjs — a relative @import to the macro-emitted file
+   isn't reliably followed when this package is consumed through its export map,
+   so we inline it (mirrors solid-spectrum, whose styles.css *is* its macro CSS). */
+@import "@proyecto-viviana/solid-spectrum/styles.css";

package/src/theme.css

@@ -1,101 +1,2 @@
-/*
- * Viviana UI Theme - Tailwind v4
- *
- * IMPORTANT: Due to Tailwind v4's @theme processing, the @theme block
- * should be COPIED into your app's CSS, not imported via @import.
- *
- * Usage:
- *
- * 1. Add fonts in HTML <head>:
- *    <link rel="preconnect" href="https://fonts.googleapis.com">
- *    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
- *    <link href="https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Sen:wght@400..800&display=swap" rel="stylesheet">
- *
- * 2. In your app's CSS:
- *    @import "tailwindcss";
- *
- *    @theme {
- *      // Copy the @theme block below into your CSS
- *    }
- *
- *    @import "proyecto-viviana-ui/components.css";
- */
-
-@theme {
-  /* Breakpoints */
-  --breakpoint-xxs: 320px;
-  --breakpoint-xs: 475px;
-
-  /* Background - Dark blue-gray */
-  --color-bg-100: #3B5260;
-  --color-bg-200: #293E4B;
-  --color-bg-300: #24313a;
-  --color-bg-400: #1D272E;
-  --color-bg-light: #515151;
-
-  /* Accent - Pink */
-  --color-accent: #DF5C9A;
-  --color-accent-200: #FFB2D7;
-  --color-accent-300: #FF88C0;
-  --color-accent-500: #DF5C9A;
-  --color-accent-highlight: #e2a2be;
-
-  /* Primary - Cyan/Blue */
-  --color-primary-100: #D9F2FF;
-  --color-primary-200: #D0E9F5;
-  --color-primary-300: #ADCCDC;
-  --color-primary-400: #B8DFFF;
-  --color-primary-500: #75ABC7;
-  --color-primary-600: #58748B;
-  --color-primary-700: #4F6D85;
-  --color-primary-800: #4C6477;
-
-  /* Success - Green */
-  --color-success-100: #E5FFF3;
-  --color-success-400: #C2FFC8;
-  --color-success-600: #559D87;
-
-  /* Warning - Yellow */
-  --color-warning-100: #FFFBE5;
-  --color-warning-400: #FFDD87;
-  --color-warning-600: #9D8D55;
-
-  /* Danger - Red */
-  --color-danger-100: #FFE5E5;
-  --color-danger-400: #FF8787;
-  --color-danger-600: #9D5555;
-
-  /* Cards */
-  --color-cards-bg: #373737;
-  --color-cards-bg-load: #484848;
-  --color-correct: #83f1a7;
-  --color-incorrect: #e74c3c;
-
-  /* Typography */
-  --font-sen: 'Sen', sans-serif;
-  --font-jost: 'Jost', sans-serif;
-  --font-sans: 'Sen', sans-serif;
-  --font-mono: 'JetBrains Mono', monospace;
-}
-
-/* Font utility classes */
-.font-sen {
-  font-family: 'Sen', sans-serif;
-}
-
-.font-jost {
-  font-family: 'Jost', sans-serif;
-}
-
-/* Custom drop shadows */
-.drop-shadow-title-card {
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
-}
-
-.drop-shadow-logo {
-  filter: drop-shadow(0 0 10px rgba(223, 92, 154, 0.8));
-}
-
-.shadow-primary-chip {
-  box-shadow: 0 2px 8px rgba(79, 109, 133, 0.4);
-}
+@import "@proyecto-viviana/solid-spectrum/theme.css";
+@import "./viviana-tokens.css";

package/src/vite.ts

@@ -0,0 +1,152 @@
+// The supported Vite macro preset for apps that author their own `style()` calls
+// against `@proyecto-viviana/ui/style`.
+//
+// Consuming the *pre-built* components needs no macro plugin — their style()
+// calls are already expanded in the published build. But an app that writes its
+// own macro calls must run the S2 style() macro at its own build. The bare
+// `unplugin-parcel-macros` plugin isn't enough under rolldown-vite: the macro
+// emits `import "macro-<hash>.css"` statements plus matching virtual CSS modules,
+// and rolldown doesn't honor the plugin's resolveId/load for those virtual ids
+// ("failed to resolve import macro-….css"). So we wrap it: cache each macro CSS
+// body as it's transformed, resolve/serve those ids ourselves (with a `.css`
+// extension so Vite's CSS pipeline bundles them), then strip the now-redundant JS
+// import. This is the single source of truth for that wrapper — apps import it
+// instead of copying it into their config.
+//
+// `unplugin-parcel-macros` is a peerDependency: every app that authors style()
+// already installs it, and it must be the app's instance (it runs at the app's
+// build), so we never bundle it.
+//
+// Usage (a dual-target app build, e.g. TanStack Start / solid-start):
+//
+//   import { defineConfig } from "vite";
+//   import solid from "vite-plugin-solid";
+//   import { vivianaMacros } from "@proyecto-viviana/ui/vite";
+//
+//   export default defineConfig({
+//     plugins: [vivianaMacros(), solid({ ssr: true })],
+//     // Keep our Solid packages out of the optimizer and bundle them into SSR:
+//     optimizeDeps: { exclude: ["@proyecto-viviana/ui", "@proyecto-viviana/solid-spectrum"] },
+//     ssr: { noExternal: ["@proyecto-viviana/ui", "@proyecto-viviana/solid-spectrum"] },
+//   });
+//
+// Plugin order: place `vivianaMacros()` before `vite-plugin-solid` (the macro
+// must expand style() before Solid compiles JSX), and before framework plugins
+// (TanStack Start / Cloudflare) that wrap the build. The macro plugin only
+// touches macro CSS resolution/loading and import stripping; the
+// `optimizeDeps.exclude` / `ssr.noExternal` of our Solid packages stays
+// app-owned (it depends on whether the app links sources or pre-built dists).
+import macros from "unplugin-parcel-macros";
+
+// A minimal structural view of the rolldown plugin that
+// `unplugin-parcel-macros` returns — only the hooks we wrap. Kept local (and
+// self-contained, with no rolldown/vite type imports) so the emitted
+// `dist/vite.d.ts` is portable: consumers don't need rolldown's types resolvable
+// to use the helper, and tsc can name the return type. `macros.rolldown()` is
+// typed `Plugin | Plugin[]`; we always get the single-plugin form.
+interface MacroPlugin {
+  name?: string;
+  transform?: (this: unknown, code: string, id: string) => unknown;
+  resolveId?: (this: unknown, id: string, importer?: string, options?: object) => unknown;
+  loadInclude?: (id: string) => boolean | void;
+  load?: (this: unknown, id: string) => unknown;
+  [key: string]: unknown;
+}
+
+const macroCssIdPattern = /^macro-[a-f0-9]+\.css$/;
+const macroCssImportPattern = /import\s+["']macro-[a-f0-9]+\.css["'];\n?/g;
+
+function getMacroCssFileName(id: string) {
+  const fileName = id.split("/").pop();
+  return fileName && macroCssIdPattern.test(fileName) ? fileName : null;
+}
+
+function removeMacroCssImports(code: string) {
+  return code.replace(macroCssImportPattern, "");
+}
+
+function getMacroCssContent(content: unknown) {
+  if (typeof content === "string") {
+    return content;
+  }
+
+  if (content && typeof content === "object" && "code" in content) {
+    const code = (content as { code: unknown }).code;
+    return typeof code === "string" ? code : null;
+  }
+
+  return null;
+}
+
+/**
+ * Returns the S2 style() macro plugin wrapped so its emitted CSS resolves and
+ * loads correctly under rolldown-vite. Place it before `vite-plugin-solid`.
+ */
+export function vivianaMacros(): MacroPlugin {
+  const plugin = macros.rolldown() as unknown as MacroPlugin;
+  const macroCssCache = new Map<string, string>();
+
+  const cacheMacroCss = (id: string, content: unknown) => {
+    const fileName = getMacroCssFileName(id);
+    const css = getMacroCssContent(content);
+    if (fileName && css != null) {
+      macroCssCache.set(fileName, css);
+    }
+    return css;
+  };
+
+  return {
+    ...plugin,
+    async transform(this: unknown, code: string, id: string) {
+      const result = await plugin.transform?.call(this, code, id);
+      const transformedCode =
+        typeof result === "string"
+          ? result
+          : result && typeof result === "object" && "code" in result
+            ? String(result.code)
+            : "";
+
+      for (const match of transformedCode.matchAll(/import\s+["'](macro-[a-f0-9]+\.css)["'];/g)) {
+        const content = await plugin.load?.call(this, match[1]);
+        cacheMacroCss(match[1], content);
+      }
+
+      return result;
+    },
+    async resolveId(this: unknown, id: string, importer?: string, options?: object) {
+      const resolved = await plugin.resolveId?.call(this, id, importer, options);
+      if (resolved) {
+        return resolved;
+      }
+      const fileName = getMacroCssFileName(id);
+      if (fileName && macroCssCache.has(fileName)) {
+        return fileName;
+      }
+      return resolved;
+    },
+    loadInclude(id: string) {
+      const fileName = getMacroCssFileName(id);
+      return (
+        (fileName != null && macroCssCache.has(fileName)) || (plugin.loadInclude?.(id) ?? false)
+      );
+    },
+    async load(this: unknown, id: string) {
+      if (plugin.loadInclude?.(id)) {
+        const content = await plugin.load?.call(this, id);
+        const css = cacheMacroCss(id, content);
+        if (css != null) {
+          return css;
+        }
+        return content;
+      }
+      const fileName = getMacroCssFileName(id);
+      if (fileName) {
+        return macroCssCache.get(fileName);
+      }
+      return null;
+    },
+    renderChunk(code: string) {
+      return removeMacroCssImports(code);
+    },
+  };
+}