@lindaui/tokens 0.2.2 → 0.3.1

package/llms.txt

@@ -79,6 +79,9 @@ Toggle with `document.documentElement.dataset.theme = "ocean"` + the `.dark` cla
 ## Exports & notes for agents
 
 - `@lindaui/tokens/css` → the compiled stylesheet (the only thing you import for runtime).
+- `@lindaui/tokens/theme.css` → the raw theme source (tokens + `@theme inline`). Only for
+  apps that run their own Tailwind pass and need the custom utilities to resolve there too;
+  normal consumers never import this.
 - `@lindaui/tokens/theme-template.css` → commented theme template to copy (not imported).
 - No JS entry point. `@lindaui/ui` and `@lindaui/blocks` declare this as a peer.
 - If a layout looks unstyled ("just text"), the consumer usually forgot the `/css` import.

package/package.json

@@ -1,9 +1,20 @@
 {
   "name": "@lindaui/tokens",
-  "version": "0.2.2",
+  "version": "0.3.1",
   "description": "Brand design tokens (OKLCH light/dark) + HeroUI v3 + Tailwind v4 compiled into a single CSS bundle.",
   "author": "Franco Carballar <francocarballar@gmail.com>",
   "license": "MIT",
+  "homepage": "https://github.com/francocarballar/lindaui#readme",
+  "bugs": {
+    "url": "https://github.com/francocarballar/lindaui/issues"
+  },
+  "keywords": [
+    "design-tokens",
+    "css",
+    "tailwindcss",
+    "oklch",
+    "theme"
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/francocarballar/lindaui.git",
@@ -15,19 +26,25 @@
   "type": "module",
   "exports": {
     "./css": "./dist/index.css",
-    "./theme-template.css": "./theme-template.css"
+    "./theme.css": "./src/theme.css",
+    "./theme-template.css": "./theme-template.css",
+    "./package.json": "./package.json"
   },
   "files": [
     "dist",
+    "src/theme.css",
     "LICENSE",
     "README.md",
     "llms.txt",
     "theme-template.css"
   ],
+  "sideEffects": [
+    "*.css"
+  ],
   "devDependencies": {
-    "tailwindcss": "^4.0.0",
-    "@tailwindcss/cli": "^4.0.0",
-    "@heroui/react": "^3.2.1"
+    "@heroui/react": "^3.2.6",
+    "@tailwindcss/cli": "^4.3.3",
+    "tailwindcss": "^4.3.3"
   },
   "scripts": {
     "build": "node scripts/build-css.mjs",

package/src/theme.css

@@ -0,0 +1,214 @@
+/* ============================================================
+   Design system — tema ThinkInformes (clínico/médico, teal).
+   Valores: poc_generator DESIGN.md (OKLCH; light en :root, dark en .dark).
+
+   ── TRES SISTEMAS DE NOMBRES (no mezclarlos) ──
+   A) CANÓNICOS (shadcn-style): única fuente de verdad de color. SOLO estos
+      cambian en dark. Ej: --background, --foreground, --primary, --card.
+   B) HeroUI v3 (CONTRATO — no renombrar): nombres que @heroui/styles LEE para
+      pintar sus componentes. Acá son refs a (A). Ej: --accent, --surface,
+      --default, --muted, --danger, --focus.
+   C) Utilities Tailwind (CONTRATO — no renombrar): los --color-* del bloque
+      @theme inline definen las clases bg-* / text-* / border-* que usan los
+      blocks. Ej: --color-primary → bg-primary; --color-muted-foreground →
+      text-muted-foreground.
+
+   ── COLISIONES DE NOMBRE (la fuente de confusión — leer) ──
+     --accent    = MARCA primaria teal (semántica HeroUI), NO el "accent" neutro
+                   de shadcn.
+     --default   = superficie/botón NEUTRO (== --secondary), NO el primario.
+     --muted     = TEXTO atenuado (== --muted-foreground), NO una superficie.
+                   La utility text-muted pinta ese gris (CardDescription, etc).
+     --secondary = superficie NEUTRA clara (utility bg-secondary). Su texto va
+                   con text-muted / text-muted-foreground.
+     --surface   = --card  ·  --overlay = --popover   (superficies, nombres HeroUI).
+   ============================================================ */
+
+:root {
+  /* ════════ A) CANÓNICOS (light) — fuente de verdad ════════ */
+
+  /* Superficies + texto base */
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --secondary: oklch(0.97 0 0); /* superficie neutra */
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted-foreground: oklch(0.556 0 0); /* texto atenuado */
+
+  /* Marca */
+  --primary: oklch(0.47 0.097 183); /* teal-700 #0F766E */
+  --primary-foreground: oklch(0.985 0 0);
+
+  /* Estado */
+  --destructive: oklch(0.577 0.245 27.325);
+  --success: oklch(0.59 0.163 148); /* green-600 */
+  --success-foreground: oklch(1 0 0);
+  --warning: oklch(0.56 0.14 58); /* amber-700 */
+  --warning-foreground: oklch(1 0 0);
+
+  /* Bordes / input / foco / radio */
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.47 0.097 183);
+  --radius: 0.625rem;
+
+  /* Visor PACS — oscuro SIEMPRE (también en light) */
+  --viewer-bg: oklch(0.22 0.027 214);
+  --viewer-foreground: oklch(0.88 0.012 220);
+  --viewer-border: oklch(0.3 0.025 214);
+
+  /* Paleta categórica de charts (anclada en la marca teal) */
+  --chart-1: oklch(0.55 0.12 183); /* teal (marca) */
+  --chart-2: oklch(0.6 0.12 220); /* azul */
+  --chart-3: oklch(0.65 0.14 150); /* verde */
+  --chart-4: oklch(0.72 0.15 80); /* ámbar */
+  --chart-5: oklch(0.62 0.19 25); /* coral */
+
+  /* ════════ B) HeroUI v3 (refs a A — CONTRATO, no renombrar) ════════
+     --background/--foreground/--border/--success/--warning/--radius comparten
+     nombre y significado con (A): HeroUI los lee directo, no se repiten acá. */
+  --surface: var(--card);
+  --surface-foreground: var(--card-foreground);
+  --overlay: var(--popover);
+  --overlay-foreground: var(--popover-foreground);
+  --accent: var(--primary); /* acción primaria = marca teal */
+  --accent-foreground: var(--primary-foreground);
+  --default: var(--secondary); /* superficie/botón neutro */
+  --default-foreground: var(--secondary-foreground);
+  --muted: var(--muted-foreground); /* texto atenuado / placeholder */
+  --danger: var(--destructive);
+  --danger-foreground: var(--primary-foreground);
+  --separator: var(--border);
+  --focus: var(--ring);
+
+  /* Campos de formulario (input/textarea/number/search/select/date...) — HeroUI
+     los LEE de estos --field-*. Son el ÚNICO punto de override de la superficie
+     de un field: los wrappers ergonómicos rechazan `className` a propósito
+     (caería en el wrapper RAC, no en el <input> → miss silencioso). Refs a los
+     canónicos → siguen la marca y el dark sale gratis. Un consumidor re-skina
+     todos los fields pisando estas vars (o los canónicos que referencian). */
+  --field-background: var(--background);
+  --field-foreground: var(--foreground);
+  --field-placeholder: var(--muted-foreground);
+  --field-border: var(--input);
+  --field-border-hover: var(--input);
+  --field-border-focus: var(--ring);
+  --field-focus: var(--ring);
+  --field-radius: var(--radius);
+
+  /* Variantes soft on-brand (HeroUI *-soft, ej. Button danger-soft) */
+  --accent-soft: color-mix(in oklch, var(--primary) 14%, var(--surface));
+  --accent-soft-foreground: var(--primary);
+  --danger-soft: color-mix(in oklch, var(--destructive) 14%, var(--surface));
+  --danger-soft-foreground: var(--destructive);
+  --success-soft: color-mix(in oklch, var(--success) 14%, var(--surface));
+  --success-soft-foreground: var(--success);
+  --warning-soft: color-mix(in oklch, var(--warning) 16%, var(--surface));
+  --warning-soft-foreground: var(--warning);
+}
+
+/* ════════ Dark: SOLO redefine los canónicos (A). Las refs HeroUI (B) siguen. ════════ */
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --primary: oklch(0.79 0.12 181); /* teal-400, más brillante en dark */
+  --primary-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --success: oklch(0.7 0.16 150);
+  --success-foreground: oklch(0.205 0 0);
+  --warning: oklch(0.75 0.14 70);
+  --warning-foreground: oklch(0.205 0 0);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.79 0.12 181);
+  /* viewer-* sin cambios: el visor queda oscuro en ambos modos */
+  /* charts: más brillantes para contraste sobre fondo oscuro */
+  --chart-1: oklch(0.7 0.13 183);
+  --chart-2: oklch(0.7 0.13 220);
+  --chart-3: oklch(0.72 0.15 150);
+  --chart-4: oklch(0.78 0.15 80);
+  --chart-5: oklch(0.7 0.18 25);
+}
+
+/* ════════ C) Utilities Tailwind (@theme inline — CONTRATO de clases) ════════
+   Cada --color-X habilita bg-X / text-X / border-X. HeroUI ya mapea las suyas
+   (background/foreground/surface/accent/default/muted/...) vía @heroui/styles;
+   acá agregamos las shadcn que el consumidor usa y HeroUI no expone igual. */
+@theme inline {
+  /* Marca / superficies / estado */
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-destructive: var(--destructive);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  /* Texto atenuado → text-muted-foreground.
+     NO declarar --color-muted: HeroUI ya lo usa para `text-muted` (= var(--muted)
+     = gris legible). Pisarlo con una superficie deja el texto invisible. Para
+     superficie neutra usar bg-secondary; texto secundario = text-muted/-foreground. */
+  --color-muted-foreground: var(--muted-foreground);
+
+  /* Visor: bg-viewer-bg / text-viewer-foreground / border-viewer-border
+     (mismos nombres que el source del poc → migra verbatim). */
+  --color-viewer-bg: var(--viewer-bg);
+  --color-viewer-foreground: var(--viewer-foreground);
+  --color-viewer-border: var(--viewer-border);
+
+  /* Charts: fill-chart-1 / stroke-chart-1 / bg-chart-1 ... (paleta categórica) */
+  --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);
+
+  /* Radius (escala DESIGN.md) */
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+
+  /* Tipografía (el consumidor inyecta --font-* vía next/font; fallbacks acá) */
+  --font-sans: var(--font-atkinson, var(--font-lato, ui-sans-serif, system-ui, sans-serif));
+  --font-mono: var(--font-geist-mono, ui-monospace, monospace);
+  --font-heading: var(--font-sans);
+}
+
+/* Base raíz 18px (público médico 60+); todo el escalado rem sube proporcional. */
+@layer base {
+  html {
+    font-size: 18px;
+  }
+}
+
+/* ════════ Animaciones de recording-overlay (idénticas al source poc_generator) ════════
+   El block @lindaui/blocks/recording-overlay consume estas animaciones POR NOMBRE:
+   ti-rec-pulse / ti-rec-blink como clases, ti-wf inline en el waveform (usa --wfmax),
+   ti-fade en el root. Sin estos @keyframes el overlay se renderiza estático (las
+   clases existen pero no hay animación). Van unlayered para no depender del escaneo
+   Tailwind (son CSS literal, no utilities). */
+@keyframes ti-rec-pulse { 0% { transform: scale(0.62); opacity: 0.7; } 100% { transform: scale(1.25); opacity: 0; } }
+@keyframes ti-rec-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
+@keyframes ti-wf { 0%, 100% { height: 4px; } 50% { height: var(--wfmax); } }
+@keyframes ti-fade { from { opacity: 0; } }
+.ti-rec-pulse { animation: ti-rec-pulse 1.8s ease-out infinite; }
+.ti-rec-blink { animation: ti-rec-blink 1.2s ease-in-out infinite; }
+.ti-fade { animation: ti-fade 0.25s ease both; }