@ -118,7 +118,9 @@
let seedHex = $state('#8e4ec6')
let builderVariant = $state< SchemeVariant > ('tonal')
let harmonizeIntents = $state(false)
// Subtle by default: intents lean toward the brand enough to feel cohesive but
// stay recognizable (red is still red). 0 = pure canonical. (M3 harmonize.)
let harmonizeAmount = $state(0.12)
// Per-role overrides the designer pinned (role → hex). Empty = fully derived.
let overrides = $state< Record < string , string > >({} )
@ -184,11 +186,12 @@
for (const { role , seed } of schemeSeeds) {
if (role !== 'neutralVariant') emitRole(parts, role, seed, bg)
}
if (harmonizeIntents ) {
if (harmonizeAmount > 0 ) {
for (const intent of INTENTS) {
if (intent === 'neutral') continue
const baseHex = activeScales[CANONICAL_INTENT_SCALES[intent]]?.['9']
if (baseHex) emitRole(parts, intent, harmonize(parseColor(baseHex), seedOklch, 0.22), bg)
if (baseHex)
emitRole(parts, intent, harmonize(parseColor(baseHex), seedOklch, harmonizeAmount), bg)
}
}
return parts.join(';')
@ -252,8 +255,9 @@
con su pick on-solid (APCA), y < strong > aplica el tema a TODA la página en vivo< / strong >
(override de < code > --primitive-{ '{role}' } -*</ code > en < code > .root</ code > → reproyecta toda
la jerarquía + el chrome neutral; en una app real sería < code > setCssVariables< / code > ). La
librería de 31 escalas y los 6 intents canónicos NO cambian — salvo que actives
< strong > harmonize intents< / strong > (los empuja hacia la temperatura del seed). Y puedes
librería de 31 escalas NO cambia. Los 6 intents se < strong > armonizan suavemente< / strong >
hacia la marca (slider; 0 = canónico puro) para que no se sientan desentonados, sin perder su
lectura — rojo sigue siendo rojo. Y puedes
< strong > fijar< / strong > cualquier rol con su propio color (el input de cada fila); los demás
se siguen derivando del seed.
< / p >
@ -276,8 +280,9 @@
{ /each }
< / div >
< label class = "builder-harmonize" >
< input type = "checkbox" bind:checked = { harmonizeIntents } / >
harmonize intents
< input type = "range" min = "0" max = "0.35" step = "0.01" bind:value = { harmonizeAmount } / >
< code > { harmonizeAmount === 0 ? 'canónico' : `$ { Math . round ( harmonizeAmount * 100 )} % ` } </ code >
< / label >
< / div >
< div class = "builder-out" >
@ -332,7 +337,9 @@
Escalas funcionales (1-2 fondos · 3-5 componente · 6-8 bordes · < strong > 9 sólido< / strong > ·
10 hover · 11-12 texto). El < strong > representativo< / strong > de cada escala es el
< strong > paso 9< / strong > . La paleta la trae el tema; el framework envía estas 31 (valores
Radix exactos, listos para autoría OKLCH).
Radix exactos, listos para autoría OKLCH). Es la < strong > librería fija< / strong > de
referencia — el seed del builder NO la cambia: deriva los < strong > roles< / strong > (arriba),
que son escalas generadas nuevas, no miembros de esta lista.
< / p >
< / div >
< div class = "palette" >
@ -829,6 +836,10 @@
color: var(--color-content-secondary);
cursor: pointer;
}
.builder-harmonize input[type='range'] {
max-inline-size: 120px;
accent-color: var(--color-primary-solid);
}
.role-pin {
display: inline-flex;
align-items: center;