From a13352aa9eedc10553b03db780ac8cd6a2bdf4f4 Mon Sep 17 00:00:00 2001
From: dev <info@activething.com>
Date: Thu, 4 Jun 2026 22:00:55 +0200
Subject: [PATCH] fix(temas/color): guard seed color input + make white
 contrast swatches visible

- The seed <input type="color"> used bind:value; switch to value + guarded oninput
  so it can never receive "" (the recurring "specified value '' does not conform"
  warning, fired at hydration). Both color inputs are now guarded.
- The Roles "contrast" slot IS the on-solid text color: white for dark solids
  (most intents), dark only for light ones (risk). White swatches looked invisible
  on the light card; add a faint inset ring to .slots .sw so they read as white,
  not "no color". Behavior unchanged - only risk needs dark text (correct, APCA).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 web/routes/temas/color/+page.svelte | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/web/routes/temas/color/+page.svelte b/web/routes/temas/color/+page.svelte
index e366a7bc3..91e926eec 100644
--- a/web/routes/temas/color/+page.svelte
+++ b/web/routes/temas/color/+page.svelte
@@ -294,7 +294,13 @@
 			<div class="builder-controls">
 				<label class="builder-seed">
 					semilla
-					<input type="color" bind:value={seedHex} />
+					<input
+						type="color"
+						value={seedHex || '#8e4ec6'}
+						oninput={(e) => {
+							if (e.currentTarget.value) seedHex = e.currentTarget.value
+						}}
+					/>
 					<code>{seedHex}</code>
 				</label>
 				<div class="seg" role="group" aria-label="Variante">
@@ -749,6 +755,9 @@
 	}
 	.slots .sw {
 		block-size: 34px;
+		/* Faint ring so a WHITE contrast slot (on-solid text for dark solids) is
+		   visible against the light card instead of looking like "no color". */
+		box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-content-primary) 10%, transparent);
 	}
 	.slot-legend {
 		display: flex;