@higinio/design-mcp 0.2.0 → 0.2.1

package/assets/bruma/tailwind.css

@@ -18,8 +18,7 @@
   --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: texto de links y ghost (AA ~8:1) */
-  --color-primary-700: #403d66;
+  --color-primary-600: #4d4979; /* --link: #4d4979;
   --color-primary-800: #35334f;
   --color-primary-900: #2c2b38; /* tinta de marca */
 
@@ -49,13 +48,13 @@
   --color-info-700: #3a5b74;
 
   /* == Tipografía → font-display, font-body, font-mono == */
-  --font-display: "Bricolage Grotesque", system-ui, sans-serif; /* solo h1–h2 y cifras hero */
-  --font-body: "Atkinson Hyperlegible Next", system-ui, sans-serif;
+  --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: 0.75rem;      --text-xs--line-height: 1.5;
-  --text-sm: 0.875rem;     --text-sm--line-height: 1.5;
+  --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;
@@ -119,3 +118,46 @@
   --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

@@ -99,6 +99,43 @@
   --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> ==
@@ -134,14 +171,33 @@
   --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) {
-  *, *::before, *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-    scroll-behavior: auto !important;
+  :root {
+    --duration-instant: 0ms; --duration-fast: 0ms; --duration-base: 0ms;
+    --duration-slow: 0ms; --duration-page: 0ms; --stagger-step: 0ms;
   }
 }