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>
active-uix
dev 4 months ago
parent 1f39a5676b
commit cc37bdcebe

@ -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 = {

@ -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 ══════════════════════════════════════ -->

Loading…
Cancel
Save

Powered by TurnKey Linux.