From cc37bdcebe577aed91a662525fd001b420c9b7c2 Mon Sep 17 00:00:00 2001
From: dev <info@activething.com>
Date: Thu, 4 Jun 2026 23:12:29 +0200
Subject: [PATCH] fix(color): base loss->plum + grafito override section uses
 real axes

Two quick correctness wins for the color system:

- themes/base.ts: `loss` was `purple` -- identical to primary=purple. Map to
  `plum` (canonical loss scale): a graver, more magenta violet. This closes
  the last role collision in the base theme (after tertiary -> indigo).

- temas/grafito: the "override por componente" section bound raw scale names
  (teal/amber/plum...) to Button.color, which only accepts the hierarchy
  override (primary|secondary|neutral). That was a type error AND visually
  inert (no [data-button][data-color="teal"] rule exists). Split into the two
  REAL color axes a component exposes: `color` (hierarchy) + `intent`
  (evaluative palette). Closes the last pre-existing svelte-check error.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/uix/eidos/lib/themes/base.ts      |  4 +++-
 web/routes/temas/grafito/+page.svelte | 16 +++++++++++++---
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/uix/eidos/lib/themes/base.ts b/src/uix/eidos/lib/themes/base.ts
index 69ff05286..d7e2bf312 100644
--- a/src/uix/eidos/lib/themes/base.ts
+++ b/src/uix/eidos/lib/themes/base.ts
@@ -32,7 +32,9 @@ export const THEME_BASE_COLOR_ROLES: ColorRoleMap = {
 	fulfill: 'green',
 	risk: 'orange',
 	threat: 'red',
-	loss: 'purple'
+	// `plum` (canonical loss) — distinct from primary=purple. (Was `purple`, which
+	// collided with primary. plum is a graver, more magenta violet.)
+	loss: 'plum'
 }
 
 export const THEME_BASE_LIGHT_COLOR_SCALES: ColorScales = {
diff --git a/web/routes/temas/grafito/+page.svelte b/web/routes/temas/grafito/+page.svelte
index 3bddb9c9b..3eb850210 100644
--- a/web/routes/temas/grafito/+page.svelte
+++ b/web/routes/temas/grafito/+page.svelte
@@ -90,7 +90,10 @@
 	const CHIP_VARIANTS = ['soft', 'solid', 'outline', 'ghost'] as const
 	const BADGE_COLORS = ['primary', 'neutral', 'affirm', 'fulfill', 'risk', 'threat', 'loss'] as const
 	// Override por componente: cualquier escala de la paleta.
-	const OVERRIDE_COLORS = ['indigo', 'jade', 'crimson', 'amber', 'teal', 'plum'] as const
+	// A component's color comes from two real axes (NOT arbitrary scale names):
+	// `color` = hierarchy override, `intent` = evaluative / semantic palette.
+	const HIERARCHY_OVERRIDES = ['primary', 'secondary', 'neutral'] as const
+	const INTENT_OVERRIDES = ['affirm', 'fulfill', 'risk', 'threat', 'loss'] as const
 
 	// ── Lectura de valores en runtime (precisión) ─────────────────────
 	let hex = $state<Record<string, string>>({})
@@ -355,12 +358,19 @@
 				<div data-spec-surface style="border-color: var(--color-border-strong); border-width: 2px"><span>border</span><code>strong</code></div>
 			</div>
 
-			<p data-spec-label>Override por componente · cualquier escala de la paleta</p>
+			<p data-spec-label>Override jerárquico · prop <code>color</code></p>
 			<div data-spec-cluster>
-				{#each OVERRIDE_COLORS as c}
+				{#each HIERARCHY_OVERRIDES as c}
 					<Button color={c} variant="soft">{c}</Button>
 				{/each}
 			</div>
+
+			<p data-spec-label>Color semántico · prop <code>intent</code></p>
+			<div data-spec-cluster>
+				{#each INTENT_OVERRIDES as it}
+					<Button intent={it} variant="soft">{it}</Button>
+				{/each}
+			</div>
 		</section>
 
 		<!-- ═══ 02 · Tipografía ══════════════════════════════════════ -->