/* ---------------------------------------------------------------------------
El tema: lo que NO es la paleta.
Aqui no hay ni un color de paleta. Los trece colores base —superficies, tinta,
marca— viven en un archivo por paleta:
assets/css/theme-purple.css violeta. La que trae el sitio hoy.
assets/css/theme-orange.css el naranja original (se llamaba `ember`).
assets/css/theme-red.css carmin.
COMO SE CAMBIA DE PALETA
Se cambia el del tema en `index.html` y en `app/index.html`, que son
dos lineas y una por archivo. Nada mas: ninguna otra hoja nombra un color de
paleta, asi que el sitio entero —cabecera, tarjetas, reproductor y hasta los
rayos del fondo, que recortan `var(--brand)`— se re-tiñe solo.
Antes esto se hacia con `data-theme="ember"` en el y las dos paletas
conviviendo en este archivo. Con tres ya no: una paleta que no se usa es
ruido en el archivo que uno abre para entender los colores, y separadas se
comparan de verdad —se ve una al lado de la otra, sin bloques anidados—.
QUE VIVE AQUI, Y POR QUE
1. Los DERIVADOS de la marca: los baños translucidos de la cabecera, de la
seccion abierta en la lateral y de las tarjetas, y la luz de la portada.
Todos salen de `--brand` con `color-mix`, asi que siguen a la paleta que
este puesta sin repetirse en cada una. Antes eran `rgba()` con el naranja
escrito a mano en once sitios: cambiar de marca obligaba a cazarlos uno por
uno y siempre se escapaba alguno.
2. Los COLORES DE SIGNIFICADO FIJO: el dorado del aro del emblema, el azul de
los enlaces, los colores de estado y el papel de las ayudas. No
dependen de la paleta —y el porque de cada uno esta escrito abajo, junto al
color—, asi que las tres los comparten y se declaran una vez.
3. Los dos tokens de superficie de tarjeta, que es por donde `backdrop.css`
alcanza al reproductor dentro de su shadow root.
El blanco y el negro puros (los marcadores del reproductor, la veladura del
hover, las sombras) no estan ni aqui ni en las paletas: no son de ningun tema,
son opacidad sobre lo que haya debajo, y por eso se escriben en el sitio donde
se usan.
QUE TIENEN QUE CUMPLIR LAS TRES PALETAS
Comparten la escalera de claridad de los grises y solo giran el tono, asi que
los contrastes de estructura —tinta sobre fondo, gris secundario sobre tarjeta,
dorado sobre tarjeta— no cambian de una a otra: se mueven centesimas. Sobre
`--surface` opaco las tres dan 15,0–15,2:1 en tinta, 5,9–6,2:1 en gris
secundario y 10,7–11,0:1 en el dorado.
Lo unico que hay que volver a medir al inventar una paleta es `--brand`, porque
es el unico color de paleta que se usa como TEXTO, y ademas en los dos sitios
donde el fondo lo pone la tormenta: el nombre sobre el baño de la cabecera y
los encabezados de la tabla sobre la lamina translucida. Medido con el criterio
duro de esta casa —el pixel mas claro que alcanza un rayo DENTRO de la caja del
propio texto, con el texto ocultado para no medirse a si mismo—:
nombre/cabecera thead/lamina dorado/suelo
violeta 4,09:1 4,08:1 5,75:1
naranja 3,91:1 3,69:1 5,63:1
rojo 4,32:1 4,12:1 5,80:1
Tres cosas que hay que leer juntas. Una: el orden es siempre el mismo —rojo,
violeta, naranja—, asi que si la decision se toma por contraste, se toma sola.
Dos: los tres se quedan por DEBAJO del 4,5:1 de AA en esas dos parejas, y eso
no lo arregla la paleta: es la intensidad de la tormenta, que se decide en
`backdrop.css` (el velo del suelo y la densidad de la lamina). El dia que se
quiera cerrar ese hueco, se sube el velo o la lamina y las tres mejoran a la
vez. Tres: el criterio es deliberadamente pesimista —el pixel mas claro de la
caja, no el que de verdad toca cada letra—, asi que el numero real de lectura
es mejor que el de la tabla; sirve para COMPARAR, que es para lo que esta.
--------------------------------------------------------------------------- */
:root {
color-scheme: dark;
/* Donde muere el degradado de la portada, en el borde del cuadro. Es el fondo de
la pagina, salvo cuando hay tormenta detras: ahi `backdrop.css` lo vuelve
transparente para que el rayo asome por las orillas y el nucleo negro que
sostiene el emblema se quede intacto. Va aqui, y no en las paletas, porque no
es un color sino una decision: con que color cierra esa superficie. */
--cover-edge: var(--bg);
}
/* ====================================================================
LAS DOS SUPERFICIES DE UNA TARJETA, EN TOKEN
No son colores nuevos: sin tormenta valen exactamente `--surface` y
`--surface-2`, o sea lo mismo que antes de existir. Estan porque hay una
tarjeta a la que no se llega con un selector: el reproductor vive en su
propio shadow root, y de fuera solo cruzan esa frontera las variables. Asi
`backdrop.css` cambia AQUI la lamina translucida y el reproductor se
translucida junto con las demas tarjetas sin una regla propia ni una copia
de la hoja del fondo metida dentro del componente.
Las consume solo `player.css`. En `site.css` la translucidez se pinta por
selector —`.welcome-card`, `.ayuda`, `.ensayos`— porque a esas cajas si se
les llega desde fuera, y ahi el token no compraria nada.
==================================================================== */
:root {
/* La tarjeta: el fondo del reproductor. */
--card-surface: var(--surface);
/* Lo hundido DENTRO de ella: la barra de progreso, el panel del tono, el
fondo de los waveforms, el riel de la carga. */
--card-inset: var(--surface-2);
}
/* ====================================================================
DERIVADOS DE LA MARCA
Se calculan una sola vez, fuera de los bloques de tema, y por eso siguen al
color de marca que este puesto sin que haya que redeclararlos. `color-mix`
contra `transparent` en sRGB es exactamente el viejo `rgba(marca, α)`, solo
que aqui la opacidad esta separada del color y el color no esta repetido once
veces.
==================================================================== */
:root {
/* El baño de la cabecera, en dos paradas: mas cargada arriba, casi el fondo de
la pagina abajo, para que la franja se apoye sin recurrir a una sombra. Es la
misma receta con que se enciende la seccion abierta en la lateral, asi que la
franja de arriba y la pastilla encendida son el mismo color y no dos
parecidos, que es lo que se nota.
El peor caso de contraste es la parada de arriba: 4,8:1 con el nombre en
color de marca y 13,4:1 con el tagline en blanco. Los dos cumplen AA. */
--header-tint: color-mix(in srgb, var(--brand) 16%, transparent);
--header-tint-2: color-mix(in srgb, var(--brand) 6%, transparent);
/* La linea de abajo, del mismo color pero mas cargada: cierra la franja contra
el fondo casi negro sin el corte gris de `--line`. */
--header-line: color-mix(in srgb, var(--brand) 32%, transparent);
/* La seccion abierta de la lateral. */
--brand-wash: color-mix(in srgb, var(--brand) 14%, transparent);
/* La misma, un punto mas suave, para cuando la lateral se acuesta en pestañas:
ahi la pastilla es mucho mas ancha y con el mismo tinte pesa de mas. */
--brand-wash-soft: color-mix(in srgb, var(--brand) 10%, transparent);
/* El baño de las tarjetas: los encabezados de la tabla de ensayos y las
tarjetas de la bienvenida. Va un punto por debajo del de la cabecera (12 y 5
contra 16 y 6) por una razon de contraste, no de gusto: aqui el color cae
sobre el fondo de una tarjeta, que ya es mas claro que el de la pagina, asi
que con la misma opacidad el texto de marca se quedaba en 4,3:1 y perdia el
AA. Rebajado da 4,7:1, el mismo contraste con que el nombre se lee arriba. */
--card-tint: color-mix(in srgb, var(--brand) 12%, transparent);
--card-tint-2: color-mix(in srgb, var(--brand) 5%, transparent);
/* La luz calida detras del emblema en la portada, en dos paradas. */
--glow-near: color-mix(in srgb, var(--brand) 26%, transparent);
--glow-far: color-mix(in srgb, var(--brand) 10%, transparent);
/* La sombra de color del boton de entrar, en reposo y levantado. */
--brand-shadow: color-mix(in srgb, var(--brand) 75%, transparent);
--brand-shadow-hover: color-mix(in srgb, var(--brand) 90%, transparent);
}
/* ====================================================================
COLORES CON SIGNIFICADO FIJO
No dependen del tema: los dos comparten estos valores, y cambiarlos aqui los
cambia en los dos.
==================================================================== */
:root {
/* El dorado del aro del emblema, muestreado del propio archivo (pixel mas claro
del contorno). Encabeza lo que uno esta mirando —el titulo del reproductor,
«Proximos» y «Realizados» en los ensayos, la etiqueta de la portada— y es lo
que amarra la tipografia con el logo. Sale de una imagen, asi que no se
re-tiñe con el tema: si cambiara, dejaria de ser el color del aro. Y es
justamente lo que sostiene el emblema —que es calido— dentro de un sitio
morado: el dorado es de los dos.
10,9:1 sobre el fondo de las tarjetas. */
--gold: #eebf81;
/* Enlaces y transporte del reproductor. Se queda azul en los dos temas a
proposito: es el unico color frio del sistema y es lo que separa «esto se
puede pulsar» de «esto es la marca». Ademas es el color que el reproductor le
da a la guitarra, y un enlace y una pista de guitarra siendo del mismo azul
es justo la coherencia que se busca. 7,0:1 sobre las tarjetas. */
--accent: #4ea1ff;
/* Estado y pistas. Los tres son ademas colores de instrumento en el
reproductor, y por eso no se tocan: la voz es roja y la bateria ambar en toda
la aplicacion. El verde del tono esta elegido para NO confundirse con el azul
de la barra de progreso, que corre justo al lado. */
--danger: #e8615a;
--solo: #f0b429;
--pitch: #34c98a;
/* ---- Las tintas de la letra ----------------------------------------------
Las tres tintas de una hoja de acordes: la voz principal, el coro y los acordes.
Valen para las dos hojas que existen —la del reproductor y los ejemplos de las
ayuda—, y ese es el punto de que sean tokens: pintadas por separado, el
ayuda acaba explicando una hoja que ya no existe.
Fueron papel impreso —tinta negra y coros en azul sobre un hueso `#e6e2d9`— para
que la pantalla se leyera igual que el PDF que abria el boton. Ese PDF ya no
existe: la letra la pinta el sitio, sigue al control de tono y se lee DENTRO del
reproductor, asi que imitar una hoja dejo de ser fidelidad y paso a ser una isla
clara en medio de una pagina oscura.
Blanco puro y no `--text`: la letra es lo unico que se lee cantando, a un metro y
de reojo. `--text` es blanco tibio, para parrafos largos sin deslumbrar; aqui
interesa lo contrario, que la frase salte del fondo.
El coro en el color de MARCA y no en un azul fijo: cambia con el tema —carmin hoy,
violeta o naranja si se cambia el —, asi que la hoja se re-tine con todo lo
demas en vez de quedarse con un azul de otra epoca.
Aclarado un punto, y no puro. Medido con el criterio duro de esta casa —el pixel mas
claro que un rayo mete dentro del renglon, con el texto oculto para no medirse a si
mismo—:
marca pura 85% + blanco
rojo 5,88 6,80
violeta 5,62 6,83
naranja 5,29 6,18
Hoy la marca pura tambien pasaria AA, asi que el 85% no es lo que salva la lectura:
es margen. Y hace falta porque el numero depende de DONDE caiga el rayo, que cambia
con la cancion y con el scroll: en el peor sitio de la hoja —una veta de rayo cruzando
el renglon— la marca pura baja a ~3,0 y el 85% a 3,4. Ninguno de los dos cumple ahi, y
el que menos incumple es el aclarado.
Cuando la hoja vivia dentro de la tarjeta del reproductor, con su propio velo encima,
los mismos numeros eran 4,35 / 4,21 / 4,03 en puro contra 5,03 / 5,12 / 4,71 en
aclarado: ahi el 85% era lo que cruzaba AA, y de esa medicion salio. Sigue siendo el
color del tema —se aclara, no se destine— y al 78% ya se lava hacia el rosa sin ganar
nada que haga falta.
Los acordes en el AZUL DE LA GUITARRA, el mismo con que se pinta esa pista en la mesa
de mezcla de arriba (`#4ea1ff`, ver `STEM_TYPES` en el generador). Es el unico color de
la hoja que nombra un instrumento, y es el sitio donde eso significa algo: los acordes
son lo que se toca, y la guitarra es quien los toca. Antes iban en el dorado y chocaban
con el rotulo de la parte —dos cosas del mismo color, ocho rotulos contra treinta y
cinco lineas de acordes, y la hoja se leia como un muro dorado—; en azul cada uno vuelve
a lo suyo: el dorado encabeza, el azul se toca, el blanco se canta.
Coincide con `--accent`, y no se escribe `var(--accent)` a proposito: ese es el azul de
«esto se pulsa» —los enlaces— y un acorde no se pulsa. Que hoy valgan lo mismo es una
coincidencia comoda, no una dependencia; si el azul de los enlaces cambiara, los acordes
no tendrian por que moverse con el.
Medido igual que el coro, sobre la hoja y con la tormenta detras: la voz principal da
15,3:1 (naranja) a 15,8:1 (violeta), el azul de los acordes 5,73–5,91 y el rotulo de la
parte, en dorado, 5,73–5,96. Las cuatro tintas cumplen AA con el criterio de la casa; en
el peor sitio de la hoja —donde una veta de rayo cruza el renglon— la voz principal se
queda en 9,7 y el rotulo en 5,7, mientras coro y acordes bajan a 3,4 y 3,6. Ahi manda la
densidad de la tormenta y no estas tintas: es el mismo techo que la cabecera y el
`thead`, y esta explicado arriba. */
--lyric-ink: #ffffff;
--lyric-choir: color-mix(in srgb, var(--brand) 85%, #fff);
--lyric-chord: #4ea1ff;
}