@higinio/design-mcp 0.1.1 → 0.2.1

package/assets/nocturna/tailwind.css

@@ -51,13 +51,13 @@
   --color-info-950: #0d1f2c;
 
   /* == Tipografía → font-display, font-body, font-mono == */
-  --font-display: "Space Grotesk", system-ui, sans-serif; /* solo h1–h3 y cifras hero */
+  --font-display: "Space Grotesk", system-ui, sans-serif; /* marca, lectura y cifras destacadas */
   --font-body: "Manrope", system-ui, sans-serif;
   --font-mono: "JetBrains Mono", 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 +119,46 @@
   --color-danger: var(--danger);
   --color-info: var(--info);
 }
+
+/* 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/nocturna/tokens.css

@@ -39,7 +39,10 @@
   --surface-2: var(--night-800);
   --surface-3: var(--night-700);
   --border: var(--night-500);
-  --border-strong: var(--night-600);
+  /* night-400, no night-600: en dark, oscurecer un borde lo DEBILITA (principio 2:
+     la elevación se comunica aclarando). n600 daba 1.46:1 vs los 1.97:1 del borde
+     normal — el énfasis se veía más flojo. n400 = 3.99:1 sobre surface-1. */
+  --border-strong: var(--night-400);
   --text-primary: var(--night-100);
   --text-secondary: var(--night-200);
   --text-muted: var(--night-300);
@@ -80,8 +83,8 @@
   --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px;
   --radius-xl: 24px; --radius-full: 9999px;
   --border-default: 1px solid var(--night-500);
-  --border-emphasis: 1px solid var(--night-600);
-  --focus-ring: 2px solid var(--accent-400);
+  --border-emphasis: 1px solid var(--night-400); /* ver --border-strong */
+  --focus-ring: 2px solid var(--focus-color);
   --focus-ring-offset: 2px;
 
   /* == Elevación (superficie + sombra + borde) == */
@@ -102,6 +105,77 @@
   --stagger-step: 30ms;
 
   color-scheme: dark;
+
+  --focus-color: var(--accent-400);
+  --border-hover: var(--night-400);
+  --outline-hover-bg: var(--surface-2);
+  --outline-active-bg: var(--surface-3);
+  --text-on-danger: var(--night-950);
+  --data-color: var(--accent-400);
+  --elevated-border: var(--night-600);
+  --card-border: var(--night-600);
+  --code-color: var(--accent-300);
+  --code-border: var(--night-700);
+  --table-header-bg: var(--night-900);
+  --row-border: var(--night-800);
+  --row-hover: var(--night-700);
+  --navbar-bg: rgba(1,2,3,.8);
+  --nav-active: var(--accent-400);
+  --sidebar-bg: var(--night-900);
+  --sidebar-active-bg: var(--indigo-800);
+  --sidebar-active-text: var(--night-50);
+  --sidebar-active-icon: var(--accent-400);
+  --switch-off: var(--night-600);
+  --tooltip-bg: var(--night-700);
+  --tooltip-border: var(--night-600);
+  --tooltip-text: var(--night-100);
+  --skeleton-base: var(--night-800);
+  --skeleton-sheen: var(--night-700);
+  --empty-icon: var(--indigo-400);
+
+  --action-bg: var(--accent);
+  --action-hover: var(--accent-hover);
+  --action-active: var(--accent-active);
+  --text-on-action: var(--text-on-accent);
+  --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;
+  --control-height-md: 44px;
+  --button-padding-md: 12px 20px;
+  --surface: var(--surface-1);
+  --surface-alt: var(--surface-2);
+  --accent: var(--accent-400);
+  --accent-hover: var(--accent-300);
+  --accent-active: var(--accent-500);
+  --text-display-fluid: clamp(2.5rem, 1.5rem + 3.4vw, 5rem);
+  --text-on-primary-solid: var(--link);
+  --weight-regular: 400;
+  --weight-medium: 500;
+  --weight-semibold: 600;
+  --weight-bold: 700;
+  --leading-base: 1.6;
+  --leading-lg: 1.55;
+  --gutter: 24px;
+  --gutter-mobile: 16px;
+
+  /* Series categóricas: orden estable; acompañar con etiqueta o forma. */
+  --chart-1: #52baed;
+  --chart-2: #a0587c;
+  --chart-3: #2aa79e;
+  --chart-4: #aa5849;
+  --chart-5: #67a369;
+  --chart-6: #946a1c;
+  --chart-7: #877cc3;
+  /* 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-6);
+
 }
 
 /* == Modo claro (variante) — alternar data-theme en <html> == */
@@ -111,7 +185,9 @@
   --surface-2: #ffffff;
   --surface-3: #eaf1f7;
   --border: #d8dfe8;
-  --border-strong: #b9c3d1;
+  /* border-strong NO se redefine en claro: night-400 (:root) cumple 1.4.11 en
+     AMBOS temas (3.26-3.99:1 en dark, 4.27-4.87:1 en light). #b9c3d1 daba
+     1.53-1.78:1, bajo el mínimo de 3:1 para UI. */
   --text-primary: #14171f;
   --text-secondary: #3d4354;
   --text-muted: var(--night-450); /* no night-400: ese caía a 4.27:1 sobre --surface-3 */
@@ -138,14 +214,52 @@
   --shadow-3: 0 12px 28px rgba(53,61,124,.14);
   --glow-accent: 0 0 0 1px rgba(82,186,237,.4), 0 4px 16px rgba(82,186,237,.25);
   color-scheme: light;
+
+  --focus-color: #186a94;
+  --border-hover: #5f6575;
+  --outline-hover-bg: #eaf1f7;
+  --outline-active-bg: #d8dfe8;
+  --text-on-danger: #ffffff;
+  --data-color: #186a94;
+  --elevated-border: #d8dfe8;
+  --card-border: #d8dfe8;
+  --code-color: #186a94;
+  --code-border: #d8dfe8;
+  --table-header-bg: #eaf1f7;
+  --row-border: #eaf1f7;
+  --row-hover: #f5f8fb;
+  --navbar-bg: rgba(255,255,255,.8);
+  --nav-active: #186a94;
+  --sidebar-bg: #ffffff;
+  --sidebar-active-bg: #e3f2fb;
+  --sidebar-active-text: #14171f;
+  --sidebar-active-icon: #1f87bb;
+  --switch-off: var(--control-border);
+  --tooltip-bg: #14171f;
+  --tooltip-border: #14171f;
+  --tooltip-text: #f6f7f9;
+  --skeleton-base: #eaf1f7;
+  --skeleton-sheen: #f5f8fb;
+  --ring-danger: 0 0 0 3px rgba(192,53,53,.2);
+
+  --selection-bg: var(--action-bg);
+  --selection-text: var(--text-on-action);
+
+  /* Series categóricas: orden estable; acompañar con etiqueta o forma. */
+  --chart-1: #186a94;
+  --chart-2: #853f63;
+  --chart-3: #129a92;
+  --chart-4: #8e4031;
+  --chart-5: #5b975e;
+  --chart-6: #8a600a;
+  --chart-7: #857bc1;
 }
 
 /* == 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;
   }
 }