@higinio/design-mcp 0.2.0 → 0.2.1

package/assets/celeste/tailwind.css

@@ -19,8 +19,7 @@
   --color-primary-400: #87a8c7;
   --color-primary-500: #7192ba; /* primario — rellenos/bordes/focus (UI 3:1) */
   --color-primary-600: #5d7ba3;
-  --color-primary-700: #4d6588; /* --link: texto de links y ghost (AA ~6:1) */
-  --color-primary-800: #40536e;
+  --color-primary-700: #4d6588; /* --link: #4d6588;
   --color-primary-900: #31343e; /* tinta de marca */
 
   --color-neutral-0: #ffffff;
@@ -49,13 +48,13 @@
   --color-info-700: #4d6588;
 
   /* == Tipografía → font-display, font-body, font-mono == */
-  --font-display: "Fraunces", Georgia, serif;          /* solo h1–h2 y cifras hero */
-  --font-body: "Public Sans", system-ui, sans-serif;
+  --font-display: "Fraunces", Georgia, serif;          /* marca, lectura y cifras destacadas */
+  --font-body: "Public Sans", system-ui, -apple-system, sans-serif;
   --font-mono: "IBM Plex 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/celeste/tokens.css

@@ -94,6 +94,43 @@
   --stagger-step: 30ms;
 
   color-scheme: light;
+
+  --overlay: rgba(49, 52, 62, .5);
+  --tooltip-bg: var(--neutral-900);
+  --tooltip-text: #ffffff;
+  --ring-danger: 0 0 0 3px rgba(192,77,77,.22);
+
+  --action-bg: var(--primary-700);
+  --action-hover: var(--primary-800);
+  --action-active: var(--primary-900);
+  --text-on-action: var(--text-on-primary);
+  --control-border: var(--neutral-400);
+  --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;
+  --focus-color: var(--accent);
+  --text-display-fluid: clamp(2.75rem, 1.7rem + 3vw, 4.75rem);
+  --border-hover: var(--neutral-500);
+  --text-on-danger: #ffffff;
+
+  /* Series categóricas: orden estable; acompañar con etiqueta o forma. */
+  --chart-1: #4a8cc1;
+  --chart-2: #853f63;
+  --chart-3: #129a92;
+  --chart-4: #8e4031;
+  --chart-5: #5b975e;
+  --chart-6: #8a600a;
+  --chart-7: #857bc1;
+  /* 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 oscuro (variante) — alternar data-theme en <html> == */
@@ -111,7 +148,7 @@
   --accent-hover: #a0c0d4;
   --accent-active: #7192ba;
   --accent-soft: rgba(113,146,186,.12);
-  --accent-soft-strong: rgba(113,146,186,.2);
+  --accent-soft-strong: rgba(113,146,186,.18);
   --text-on-primary: #16181e;
   --link: #a0c0d4;
   --success-500: #5cbf93; --success-100: #12291f; --success-text: #7fd4ae;
@@ -124,14 +161,38 @@
   --shadow-md: 0 4px 12px rgba(0,0,0,.45);
   --shadow-lg: 0 12px 32px rgba(0,0,0,.55);
   color-scheme: dark;
+
+  --text-on-primary-solid: #a0c0d4;
+  --overlay: rgba(0, 0, 0, .6);
+  --tooltip-bg: #e6e9ee;
+  --tooltip-text: #31343e;
+  --ring-danger: 0 0 0 3px rgba(224,119,119,.25);
+
+  --selection-bg: var(--action-bg);
+  --selection-text: var(--text-on-action);
+  --action-bg: var(--accent);
+  --action-hover: var(--accent-hover);
+  --action-active: var(--accent-active);
+  --control-border: var(--text-muted);
+  --border-hover: var(--text-secondary);
+  --text-on-danger: #16181e;
+  --focus-color: var(--accent);
+
+  /* Series categóricas: orden estable; acompañar con etiqueta o forma. */
+  --chart-1: #5798ce;
+  --chart-2: #a0587c;
+  --chart-3: #2aa79e;
+  --chart-4: #aa5849;
+  --chart-5: #67a369;
+  --chart-6: #946a1c;
+  --chart-7: #877cc3;
 }
 
 /* == 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;
   }
 }