@higinio/design-mcp 0.1.1 → 0.2.1

package/assets/bruma/tailwind.css

@@ -0,0 +1,163 @@
+/* ============================================================
+   Bruma Lavanda — 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/bruma-lavanda/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: #e5e3f1; /* acento suave */
+  --color-primary-100: #d8d5ea;
+  --color-primary-200: #bdb9da;
+  --color-primary-300: #9d99c4; /* decorativo — nunca texto sobre niebla */
+  --color-primary-400: #7c78a8;
+  --color-primary-500: #5b578a; /* acento lavanda — controles, estados activos, focus; nunca fondo de áreas grandes */
+  --color-primary-600: #4d4979; /* --link: #4d4979;
+  --color-primary-800: #35334f;
+  --color-primary-900: #2c2b38; /* tinta de marca */
+
+  --color-neutral-0: #fbfbfd;
+  --color-neutral-50: #f2f1f6;
+  --color-neutral-100: #e9e8f0;
+  --color-neutral-200: #dedce8;
+  --color-neutral-300: #b8b6c8;
+  --color-neutral-400: #86849a;
+  --color-neutral-500: #5d5b6e;
+  --color-neutral-600: #48475a;
+  --color-neutral-700: #393846;
+  --color-neutral-800: #2c2b38;
+  --color-neutral-900: #1f1e28;
+
+  --color-success-500: #2f7a68; /* verde azulado, nunca el acento lavanda */
+  --color-success-100: #dcefe9;
+  --color-success-700: #235e50; /* texto AA sobre success-100 */
+  --color-warning-500: #b07f2a;
+  --color-warning-100: #f5ecd9;
+  --color-warning-700: #7a5716;
+  --color-danger-500: #b24c55;
+  --color-danger-100: #f6e3e5;
+  --color-danger-700: #8b3540;
+  --color-info-500: #4f7896;
+  --color-info-100: #e1eaf1;
+  --color-info-700: #3a5b74;
+
+  /* == Tipografía → font-display, font-body, font-mono == */
+  --font-display: "Bricolage Grotesque", system-ui, sans-serif; /* marca, lectura y cifras destacadas */
+  --font-body: "Atkinson Hyperlegible Next", system-ui, -apple-system, sans-serif;
+  --font-mono: "Atkinson Hyperlegible Mono", ui-monospace, monospace;
+
+  /* == Escala tipográfica (ratio 1.25) con line-heights emparejados == */
+  --text-xs: .75rem;      --text-xs--line-height: 1.5;
+  --text-sm: .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: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+
+  /* == Sombras mínimas (teñidas de tinta #2c2b38; la elevación va en el borde) → shadow-xs…xl == */
+  --shadow-xs: 0 1px 1px rgba(44,43,56,.04);
+  --shadow-sm: 0 1px 2px rgba(44,43,56,.06);
+  --shadow-md: 0 2px 6px rgba(44,43,56,.07), 0 1px 2px rgba(44,43,56,.04);
+  --shadow-lg: 0 8px 20px rgba(44,43,56,.09), 0 2px 6px rgba(44,43,56,.05);
+  --shadow-xl: 0 16px 36px rgba(44,43,56,.12);
+
+  /* == 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);
+}
+
+/* CONTRATOS COMPARTIDOS GENERADOS */
+@theme inline {
+  --color-surface: var(--surface);
+  --color-surface-alt: var(--surface-alt);
+  --color-action-bg: var(--action-bg);
+  --color-action-hover: var(--action-hover);
+  --color-action-active: var(--action-active);
+  --color-text-on-action: var(--text-on-action);
+  --color-control-border: var(--control-border);
+  --color-focus-color: var(--focus-color);
+  --color-placeholder: var(--placeholder);
+  --color-selection-bg: var(--selection-bg);
+  --color-selection-text: var(--selection-text);
+  --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);
+  --color-chart-6: var(--chart-6);
+  --color-chart-7: var(--chart-7);
+  --spacing-1: var(--space-1);
+  --spacing-2: var(--space-2);
+  --spacing-3: var(--space-3);
+  --spacing-4: var(--space-4);
+  --spacing-5: var(--space-5);
+  --spacing-6: var(--space-6);
+  --spacing-8: var(--space-8);
+  --spacing-10: var(--space-10);
+  --spacing-12: var(--space-12);
+  --spacing-16: var(--space-16);
+  --spacing-20: var(--space-20);
+  --spacing-24: var(--space-24);
+  --spacing-field-gap: var(--field-gap);
+  --spacing-heading-gap: var(--heading-gap);
+  --spacing-content-gap: var(--content-gap);
+  --spacing-card-content-gap: var(--card-content-gap);
+  --spacing-card-group-gap: var(--card-group-gap);
+  --spacing-form-gap: var(--form-gap);
+  --spacing-section-gap: var(--section-gap);
+  --text-display: var(--text-display-fluid);
+  --text-title-ui: var(--text-ui-title);
+}

package/assets/bruma/tokens.css

@@ -0,0 +1,203 @@
+/* ============================================================
+   Bruma Lavanda — Design Tokens v1.0
+   Sistema de diseño de Higinio Sosa · light-first
+   Fuente de verdad: DESIGN-bruma-lavanda.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=Bricolage+Grotesque:wght@600;700&family=Atkinson+Hyperlegible+Next:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Atkinson+Hyperlegible+Mono:wght@400;500&display=swap");
+
+:root {
+  /* == Primitivos: primario (Lavanda) ==
+     Lavanda apagada, nunca violeta saturado. El acento no rellena áreas grandes:
+     solo controles, estados activos y anillos de foco. */
+  --primary-50: #e5e3f1; --primary-100: #d8d5ea; --primary-200: #bdb9da;
+  --primary-300: #9d99c4; --primary-400: #7c78a8; --primary-500: #5b578a;
+  --primary-600: #4d4979; --primary-700: #403d66; --primary-800: #35334f;
+  --primary-900: #2c2b38;
+
+  /* == Primitivos: neutrales (Niebla) == */
+  --neutral-0: #fbfbfd; --neutral-50: #f2f1f6; --neutral-100: #e9e8f0;
+  --neutral-200: #dedce8; --neutral-300: #b8b6c8; --neutral-400: #86849a;
+  --neutral-500: #5d5b6e; --neutral-600: #48475a; --neutral-700: #393846;
+  --neutral-800: #2c2b38; --neutral-900: #1f1e28;
+
+  /* == Primitivos: semánticos (ramp de 3: sólido / fondo / texto AA) ==
+     El éxito es verde azulado, lejos del acento lavanda: el acento nunca comunica éxito. */
+  --success-500: #2f7a68; --success-100: #dcefe9; --success-text: #235e50;
+  --warning-500: #b07f2a; --warning-100: #f5ecd9; --warning-text: #7a5716;
+  --danger-500: #b24c55;  --danger-100: #f6e3e5;  --danger-text: #8b3540;
+  --info-500: #4f7896;    --info-100: #e1eaf1;    --info-text: #3a5b74;
+
+  /* == 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.98:1 sobre --surface — texto de links y ghost */
+
+  /* == Tipografía == */
+  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
+  --font-body: "Atkinson Hyperlegible Next", system-ui, -apple-system, sans-serif;
+  --font-mono: "Atkinson Hyperlegible Mono", 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; densidad algo compacta) == */
+  --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-5); --card-padding-mobile: var(--space-4);
+  --section-gap: var(--space-12); --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 ==
+     La elevación se apoya en el borde; las sombras son mínimas y van
+     teñidas de la tinta, nunca negro puro. */
+  --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px;
+  --radius-xl: 16px; --radius-full: 9999px;
+  --border-width: 1px;
+  --shadow-xs: 0 1px 1px rgba(44,43,56,.04);
+  --shadow-sm: 0 1px 2px rgba(44,43,56,.06);
+  --shadow-md: 0 2px 6px rgba(44,43,56,.07), 0 1px 2px rgba(44,43,56,.04);
+  --shadow-lg: 0 8px 20px rgba(44,43,56,.09), 0 2px 6px rgba(44,43,56,.05);
+  --shadow-xl: 0 16px 36px rgba(44,43,56,.12);
+
+  /* == Focus == */
+  --ring: 0 0 0 3px rgba(91,87,138,.25);
+  --ring-color: rgba(91,87,138,.25);
+
+  /* == Motion (corto y preciso) == */
+  --duration-instant: 100ms; --duration-fast: 140ms; --duration-base: 180ms;
+  --duration-slow: 240ms; --duration-page: 300ms;
+  --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;
+
+  --overlay: rgba(31, 30, 40, .5);
+  --tooltip-bg: var(--neutral-900);
+  --tooltip-text: var(--neutral-0);
+  --focus-color: var(--accent);
+  --text-on-danger: var(--neutral-0);
+  --border-hover: var(--neutral-500);
+  --ring-danger: 0 0 0 3px rgba(178,76,85,.22);
+
+  --action-bg: var(--accent);
+  --action-hover: var(--accent-hover);
+  --action-active: var(--accent-active);
+  --text-on-action: var(--text-on-primary);
+  --control-border: var(--border-strong);
+  --placeholder: var(--text-muted);
+  --selection-bg: var(--action-bg);
+  --selection-text: var(--text-on-action);
+  --font-ui-heading: var(--font-body);
+  --text-ui-title: 2rem;
+  --touch-target: 44px;
+  --text-display-fluid: clamp(2.5rem, 1.8rem + 2.2vw, 4.25rem);
+
+  /* Series categóricas: orden estable; acompañar con etiqueta o forma. */
+  --chart-1: #857bc1;
+  --chart-2: #8a600a;
+  --chart-3: #4a8cc1;
+  --chart-4: #853f63;
+  --chart-5: #129a92;
+  --chart-6: #8e4031;
+  --chart-7: #5b975e;
+  /* Ritmo de contenido y formularios. */
+  --field-gap: 6px;
+  --heading-gap: var(--space-2);
+  --content-gap: var(--space-4);
+  --card-content-gap: var(--space-4);
+  --card-group-gap: var(--space-5);
+
+}
+
+/* == Modo oscuro (variante) — alternar data-theme en <html> ==
+   Sin sombras en las capas: se separan por superficie y borde, y solo
+   los overlays (lg/xl) conservan una sombra tenue. */
+[data-theme="dark"] {
+  --bg: #16151c;
+  --surface: #1f1e27;
+  --surface-alt: #27262f;
+  --border: #2f2d3a;
+  --border-strong: #747189;
+  --text-primary: #e7e6ef;
+  --text-secondary: #c9c7d6;
+  --text-muted: #aaa8bb;
+  --text-disabled: #7b7990;
+  --accent: #b0acdc;
+  --accent-hover: #c4c1e6;
+  --accent-active: #9d98cf;
+  --accent-soft: #2b2940;
+  --accent-soft-strong: #36334f;
+  --text-on-primary: #16151c;
+  --text-on-primary-solid: #c4c1e6;
+  --link: #c4c1e6;
+  --success-500: #6cc1ad; --success-100: #13261f; --success-text: #8bd1c0;
+  --warning-500: #d6a752; --warning-100: #29220f; --warning-text: #e4c07f;
+  --danger-500: #e08890;  --danger-100: #2c171a;  --danger-text: #eba4ab;
+  --info-500: #8daecb;    --info-100: #172129;    --info-text: #a8c3da;
+  --ring: 0 0 0 3px rgba(176,172,220,.3);
+  --ring-color: rgba(176,172,220,.3);
+  --shadow-xs: none;
+  --shadow-sm: none;
+  --shadow-md: none;
+  --shadow-lg: 0 8px 20px rgba(8,8,12,.28);
+  --shadow-xl: 0 16px 32px rgba(8,8,12,.32);
+  color-scheme: dark;
+
+  --overlay: rgba(0, 0, 0, .6);
+  --tooltip-bg: #e7e6ef;
+  --tooltip-text: #1f1e28;
+  --focus-color: var(--accent);
+  --text-on-danger: #16151c;
+  --border-hover: #aaa8bb;
+  --ring-danger: 0 0 0 3px rgba(224,136,144,.25);
+
+  --selection-bg: var(--action-bg);
+  --selection-text: var(--text-on-action);
+
+  /* Series categóricas: orden estable; acompañar con etiqueta o forma. */
+  --chart-1: #877cc3;
+  --chart-2: #946a1c;
+  --chart-3: #5798ce;
+  --chart-4: #a0587c;
+  --chart-5: #2aa79e;
+  --chart-6: #aa5849;
+  --chart-7: #67a369;
+}
+
+/* == Accesibilidad del movimiento == */
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --duration-instant: 0ms; --duration-fast: 0ms; --duration-base: 0ms;
+    --duration-slow: 0ms; --duration-page: 0ms; --stagger-step: 0ms;
+  }
+}