diff --git a/web/routes/temas/color/+page.svelte b/web/routes/temas/color/+page.svelte new file mode 100644 index 000000000..fbb806ea1 --- /dev/null +++ b/web/routes/temas/color/+page.svelte @@ -0,0 +1,596 @@ + + + + Color · Eidos + + + + + +
+
+
+ Color + Eidos · paleta → roles → intents · motor uix.color +
+
+
+ + +
+
+
+ +
+

+ El color tiene tres capas: una paleta de 31 escalas + funcionales de 12 pasos (--scale-*), unos roles de jerarquía que + son alias de marca, y unos intents evaluativos que + auto-derivan de la paleta por convención del libro. Los componentes consumen los + 9 slots (--color-{'{role}'}-{'{slot}'}). El motor + uix.color (OKLCH · APCA · alpha compositing-inverse) decide lo perceptual — abajo, el + texto on-solid lo elige APCA en vivo. Todo se renderiza vía las custom properties + activas, así que cambia con el tema. +

+ + +
+
+ --scale-{name}-{1..12} +

La paleta (31 escalas · 12 pasos)

+

+ Escalas funcionales (1-2 fondos · 3-5 componente · 6-8 bordes · 9 sólido · + 10 hover · 11-12 texto). El representativo de cada escala es el + paso 9. La paleta la trae el tema; el framework envía estas 31 (valores + Radix exactos, listos para autoría OKLCH). +

+
+
+
+ +
+ {#each STEPS as s} + {s} + {/each} +
+
+ {#each SCALE_NAMES as name} +
+ {name} +
+ {#each STEPS as s} + + {/each} +
+
+ {/each} +
+
+ + +
+
+ --color-{role}-{slot} +

Roles canónicos (9 roles · 9 slots)

+

+ Los 3 roles de jerarquía (el tema los mapea a una escala) y los 6 + intents (auto-derivados: neutral→gray · affirm→teal · fulfill→green · + risk→amber · threat→red · loss→plum). Cada rol expone los 9 slots + (track · element · hover · active · border · solid · solid-hover · text · contrast). +

+
+ {#each GROUPS as group} +
+

{group.label} {group.note}

+ {#each group.roles as role} +
+ + {role} + {roleScale(role)} + +
+ {#each SLOTS as slot} + + {/each} +
+
+ {/each} +
+ {/each} +
+ {#each SLOTS as slot}{slotVar(slot)}{/each} +
+
+ + +
+
+ uix.color · pickOnSolid (APCA) +

Texto on-solid (elegido por APCA · en vivo)

+

+ El color del texto SOBRE el sólido (--color-{'{role}'}-contrast). El motor + prefiere blanco salvo que falle el suelo APCA (|Lc| < 60) o WCAG (< 3) + — entonces voltea a oscuro. El chip usa los tokens REALES; el pie muestra + el cálculo APCA en vivo. En el tema base solo risk (naranja) voltea. +

+
+
+ {#each COLOR_ROLES as role} + {@const info = onSolidInfo(role)} +
+ {role} + on-solid: {info.picked} · |Lc| {Math.abs(info.lc).toFixed(0)} · WCAG {info.wcag.toFixed(2)} +
+ {/each} +
+
+ + +
+
+ --color-{role}-surface · alpha +

Superficies tintadas (alpha compositing-inverse)

+

+ El tinte de la variante soft (--color-{'{role}'}-surface) es + translúcido (alpha derivado por inversión de composición), así que + compone sobre fondos no uniformes en vez de taparlos. Sobre las rayas se ve + el hue, no un bloque opaco. +

+
+
+ {#each COLOR_ROLES as role} + + {role} + + {/each} +
+
+ + +
+
+ --color-surface/content/border-* +

Chrome semántico (neutral · superficies / texto / bordes)

+

+ Los tokens neutrales que visten la UI: las superficies (fondos por + elevación), el texto por jerarquía y los bordes por fuerza. + Se invierten solos entre light y dark. +

+
+
+
+ surface + {#each SURFACES as s} +
+ {s} +
+ {/each} +
+
+ content + {#each CONTENTS as c} +
Aa · {c}
+ {/each} +
+
+ border + {#each BORDERS as b} +
{b}
+ {/each} +
+
+
+
+
+ + diff --git a/web/routes/temas/color/+page.ts b/web/routes/temas/color/+page.ts new file mode 100644 index 000000000..fdab8edc5 --- /dev/null +++ b/web/routes/temas/color/+page.ts @@ -0,0 +1,2 @@ +// Live demo of the Eidos color system — no static prerender. +export const prerender = false