@higinio/design-mcp 0.1.1 → 0.2.0

package/assets/salvia/tailwind.css

@@ -0,0 +1,121 @@
+/* ============================================================
+   Salvia Serena — Tailwind CSS v4 (@theme)
+   Sistema de diseño de Higinio Sosa · light-first
+   Uso:  @import "tailwindcss";  y luego este archivo,
+   o copiar este contenido en tu CSS principal de Tailwind v4.
+   Requiere dist/salvia-serena/tokens.css para los aliases
+   semánticos con theme switch (o pega sus :root/[data-theme]).
+   ============================================================ */
+
+@import "tailwindcss";
+@import "./tokens.css"; /* primitivos + aliases + [data-theme="dark"] + fuentes */
+
+@theme {
+  /* == Colores primitivos → genera bg-primary-500, text-neutral-800, etc. == */
+  --color-primary-50: #e2eadf; /* acento suave */
+  --color-primary-100: #d4e0d1;
+  --color-primary-200: #b8cbb7;
+  --color-primary-300: #97b09e; /* decorativo — nunca texto sobre lino */
+  --color-primary-400: #73907c;
+  --color-primary-500: #4f6b58; /* acento salvia — botón primario, bordes, focus */
+  --color-primary-600: #435c4b; /* --link: texto de links y ghost (AA ~6:1) */
+  --color-primary-700: #384d3f;
+  --color-primary-800: #304236;
+  --color-primary-900: #2c3630; /* tinta de marca */
+
+  --color-neutral-0: #fbfaf6;
+  --color-neutral-50: #f3f2ec;
+  --color-neutral-100: #eae9e1;
+  --color-neutral-200: #dfe0d6;
+  --color-neutral-300: #b9beb4;
+  --color-neutral-400: #858d84;
+  --color-neutral-500: #5c675f;
+  --color-neutral-600: #47524b;
+  --color-neutral-700: #38423b;
+  --color-neutral-800: #2c3630;
+  --color-neutral-900: #1f2622;
+
+  --color-success-500: #2f7d6a; /* verde azulado, nunca el acento salvia */
+  --color-success-100: #dcefe8;
+  --color-success-700: #22604f; /* texto AA sobre success-100 */
+  --color-warning-500: #b8862f;
+  --color-warning-100: #f6ecd8;
+  --color-warning-700: #7e5a17;
+  --color-danger-500: #b5523f;
+  --color-danger-100: #f6e4df;
+  --color-danger-700: #8a3a2b;
+  --color-info-500: #5b7891;
+  --color-info-100: #e3eaf0;
+  --color-info-700: #3f5a70;
+
+  /* == Tipografía → font-display, font-body, font-mono == */
+  --font-display: "Lora", Georgia, serif;              /* solo h1–h2 y cifras hero */
+  --font-body: "Nunito Sans", system-ui, sans-serif;
+  --font-mono: "Source Code Pro", ui-monospace, monospace;
+
+  /* == Escala tipográfica (ratio 1.25) con line-heights emparejados == */
+  --text-xs: 0.75rem;      --text-xs--line-height: 1.5;
+  --text-sm: 0.875rem;     --text-sm--line-height: 1.5;
+  --text-base: 1rem;       --text-base--line-height: 1.6;
+  --text-lg: 1.125rem;     --text-lg--line-height: 1.55;
+  --text-xl: 1.25rem;      --text-xl--line-height: 1.4;
+  --text-2xl: 1.5625rem;   --text-2xl--line-height: 1.3;
+  --text-3xl: 1.9375rem;   --text-3xl--line-height: 1.25;
+  --text-4xl: 2.4375rem;   --text-4xl--line-height: 1.15;
+  --text-5xl: 3.0625rem;   --text-5xl--line-height: 1.1;
+
+  --tracking-display: -0.02em;
+  --tracking-label: 0.04em;
+
+  /* == Radios → rounded-sm/md/lg/xl == */
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 16px;
+  --radius-xl: 24px;
+
+  /* == Sombras (teñidas de tinta #2c3630) → shadow-xs…xl == */
+  --shadow-xs: 0 1px 2px rgba(44,54,48,.06);
+  --shadow-sm: 0 1px 3px rgba(44,54,48,.08), 0 1px 2px rgba(44,54,48,.05);
+  --shadow-md: 0 4px 8px rgba(44,54,48,.09), 0 2px 4px rgba(44,54,48,.05);
+  --shadow-lg: 0 12px 24px rgba(44,54,48,.12), 0 4px 8px rgba(44,54,48,.06);
+  --shadow-xl: 0 24px 48px rgba(44,54,48,.16);
+
+  /* == Easings → ease-out-brand, ease-in-brand, ease-in-out-brand, ease-spring == */
+  --ease-out-brand: cubic-bezier(0.2, 0, 0, 1);
+  --ease-in-brand: cubic-bezier(0.4, 0, 1, 1);
+  --ease-in-out-brand: cubic-bezier(0.65, 0, 0.35, 1); /* moverse de A a B en pantalla */
+  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
+  --stagger-step: 30ms;
+
+  /* Breakpoints: los default de Tailwind (sm 640 / md 768 / lg 1024 / xl 1280)
+     coinciden con el sistema — no se redefinen.
+     Espaciado: la escala default (múltiplos de 0.25rem = 4px) coincide con
+     la escala base 4px del sistema — no se redefine. */
+}
+
+/* == Capa semántica con theme switch (shadcn-style) ==
+   Genera utilidades que cambian solas con [data-theme="dark"]:
+   bg-background · bg-surface · bg-surface-alt · text-foreground ·
+   text-muted-foreground · text-disabled-foreground · border-border ·
+   border-border-strong · bg-accent · text-link · bg-accent-soft */
+@theme inline {
+  --color-background: var(--bg);
+  --color-surface: var(--surface);
+  --color-surface-alt: var(--surface-alt);
+  --color-foreground: var(--text-primary);
+  --color-secondary-foreground: var(--text-secondary);
+  --color-muted-foreground: var(--text-muted);
+  --color-disabled-foreground: var(--text-disabled);
+  --color-border: var(--border);
+  --color-border-strong: var(--border-strong);
+  --color-accent: var(--accent);
+  --color-accent-hover: var(--accent-hover);
+  --color-accent-active: var(--accent-active);
+  --color-accent-soft: var(--accent-soft);
+  --color-accent-foreground: var(--text-on-primary);
+  --color-link: var(--link);
+  --color-success: var(--success-500);
+  --color-warning: var(--warning-500);
+  --color-danger: var(--danger-500);
+  --color-info: var(--info-500);
+}

package/assets/salvia/tokens.css

@@ -0,0 +1,143 @@
+/* ============================================================
+   Salvia Serena — Design Tokens v1.0
+   Sistema de diseño de Higinio Sosa · light-first
+   Fuente de verdad: DESIGN-salvia-serena.md
+   Uso: importar ANTES de cualquier estilo propio.
+   Los componentes consumen SOLO aliases semánticos, nunca hex.
+   ============================================================ */
+
+@import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,600;0,700;1,600&family=Nunito+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Source+Code+Pro:wght@400;500&display=swap");
+
+:root {
+  /* == Primitivos: primario (Salvia) == */
+  --primary-50: #e2eadf; --primary-100: #d4e0d1; --primary-200: #b8cbb7;
+  --primary-300: #97b09e; --primary-400: #73907c; --primary-500: #4f6b58;
+  --primary-600: #435c4b; --primary-700: #384d3f; --primary-800: #304236;
+  --primary-900: #2c3630;
+
+  /* == Primitivos: neutrales (Lino) == */
+  --neutral-0: #fbfaf6; --neutral-50: #f3f2ec; --neutral-100: #eae9e1;
+  --neutral-200: #dfe0d6; --neutral-300: #b9beb4; --neutral-400: #858d84;
+  --neutral-500: #5c675f; --neutral-600: #47524b; --neutral-700: #38423b;
+  --neutral-800: #2c3630; --neutral-900: #1f2622;
+
+  /* == Primitivos: semánticos (ramp de 3: sólido / fondo / texto AA) ==
+     El éxito es verde azulado, lejos del acento salvia: el acento nunca comunica éxito. */
+  --success-500: #2f7d6a; --success-100: #dcefe8; --success-text: #22604f;
+  --warning-500: #b8862f; --warning-100: #f6ecd8; --warning-text: #7e5a17;
+  --danger-500: #b5523f;  --danger-100: #f6e4df;  --danger-text: #8a3a2b;
+  --info-500: #5b7891;    --info-100: #e3eaf0;    --info-text: #3f5a70;
+
+  /* == Aliases semánticos (los componentes consumen SOLO esto) == */
+  --bg: var(--neutral-50);
+  --surface: var(--neutral-0);
+  --surface-alt: var(--neutral-100);
+  --border: var(--neutral-200);
+  --border-strong: var(--neutral-400);
+  --text-primary: var(--neutral-800);
+  --text-secondary: var(--neutral-600);
+  --text-muted: var(--neutral-500);
+  --text-disabled: var(--neutral-400);
+  --text-on-primary: #ffffff;
+  --text-on-primary-solid: var(--primary-700);
+  --accent: var(--primary-500);
+  --accent-hover: var(--primary-600);
+  --accent-active: var(--primary-700);
+  --accent-soft: var(--primary-50);
+  --accent-soft-strong: var(--primary-100);
+  --link: var(--primary-600); /* AA 7.00:1 sobre --surface — texto de links y ghost */
+
+  /* == Tipografía == */
+  --font-display: "Lora", Georgia, serif;
+  --font-body: "Nunito Sans", system-ui, -apple-system, sans-serif;
+  --font-mono: "Source Code Pro", ui-monospace, monospace;
+  --text-xs: .75rem; --text-sm: .875rem; --text-base: 1rem; --text-lg: 1.125rem;
+  --text-xl: 1.25rem; --text-2xl: 1.5625rem; --text-3xl: 1.9375rem;
+  --text-4xl: 2.4375rem; --text-5xl: 3.0625rem;
+  --leading-xs: 1.5; --leading-sm: 1.5; --leading-base: 1.6; --leading-lg: 1.55;
+  --leading-xl: 1.4; --leading-2xl: 1.3; --leading-3xl: 1.25;
+  --leading-4xl: 1.15; --leading-5xl: 1.1;
+  --tracking-display: -0.02em; --tracking-body: 0; --tracking-label: 0.04em;
+  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;
+  --measure: 65ch;
+
+  /* == Espaciado (escala base 4px) == */
+  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
+  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
+  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
+  --card-padding: var(--space-6); --card-padding-mobile: var(--space-4);
+  --section-gap: var(--space-16); --form-gap: var(--space-5);
+  --button-padding-md: 12px 20px; --button-padding-sm: 8px 14px;
+  --control-height-sm: 36px; --control-height-md: 44px; --control-height-lg: 52px;
+  --gutter: 24px; --gutter-mobile: 16px;
+
+  /* == Radios, bordes y sombras (teñidas de tinta verde, nunca negro puro) == */
+  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px;
+  --radius-xl: 24px; --radius-full: 9999px;
+  --border-width: 1px;
+  --shadow-xs: 0 1px 2px rgba(44,54,48,.06);
+  --shadow-sm: 0 1px 3px rgba(44,54,48,.08), 0 1px 2px rgba(44,54,48,.05);
+  --shadow-md: 0 4px 8px rgba(44,54,48,.09), 0 2px 4px rgba(44,54,48,.05);
+  --shadow-lg: 0 12px 24px rgba(44,54,48,.12), 0 4px 8px rgba(44,54,48,.06);
+  --shadow-xl: 0 24px 48px rgba(44,54,48,.16);
+
+  /* == Focus == */
+  --ring: 0 0 0 3px rgba(79,107,88,.25);
+  --ring-color: rgba(79,107,88,.25);
+
+  /* == Motion (pausado: nada urge) == */
+  --duration-instant: 100ms; --duration-fast: 150ms; --duration-base: 220ms;
+  --duration-slow: 280ms; --duration-page: 340ms;
+  --ease-out: cubic-bezier(0.2, 0, 0, 1);
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* moverse de A a B en pantalla */
+  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
+  --stagger-step: 30ms;
+
+  color-scheme: light;
+}
+
+/* == Modo oscuro (variante) — alternar data-theme en <html> ==
+   Casi sin sombras: las capas se separan por superficie y borde, y solo
+   los overlays (lg/xl) conservan una sombra tenue. */
+[data-theme="dark"] {
+  --bg: #151a17;
+  --surface: #1d231f;
+  --surface-alt: #252c27;
+  --border: #2d3530;
+  --border-strong: #6f7b72;
+  --text-primary: #e3e8e2;
+  --text-secondary: #c4ccc5;
+  --text-muted: #a6b0a8;
+  --text-disabled: #79837b;
+  --accent: #9fc2a8;
+  --accent-hover: #b5d2bc;
+  --accent-active: #8ab295;
+  --accent-soft: #26332b;
+  --accent-soft-strong: #2f4035;
+  --text-on-primary: #151a17;
+  --text-on-primary-solid: #b5d2bc;
+  --link: #b5d2bc;
+  --success-500: #6cc3ac; --success-100: #14271f; --success-text: #8ad3bf;
+  --warning-500: #d9a94f; --warning-100: #2a2213; --warning-text: #e6c17e;
+  --danger-500: #d9806d;  --danger-100: #2c1814;  --danger-text: #e9a597;
+  --info-500: #8fb0c9;    --info-100: #18222b;    --info-text: #a9c4d8;
+  --ring: 0 0 0 3px rgba(159,194,168,.3);
+  --ring-color: rgba(159,194,168,.3);
+  --shadow-xs: none;
+  --shadow-sm: none;
+  --shadow-md: none;
+  --shadow-lg: 0 8px 24px rgba(8,10,9,.3);
+  --shadow-xl: 0 16px 32px rgba(8,10,9,.35);
+  color-scheme: dark;
+}
+
+/* == Accesibilidad del movimiento == */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}