diff --git a/e2e/navegacion.e2e.ts b/e2e/navegacion.e2e.ts index aeb2723..07aa5c5 100644 --- a/e2e/navegacion.e2e.ts +++ b/e2e/navegacion.e2e.ts @@ -41,6 +41,19 @@ test.describe('Navegación', () => { await expect(ultimo).toHaveAttribute('aria-label', /tema/); }); + test('el logo conserva el mismo metal al cambiar al tema claro', async ({ page }) => { + await page.goto('/'); + + const logo = page.locator('header .marca'); + const oroOscuro = await logo.evaluate((elemento) => getComputedStyle(elemento).backgroundImage); + + await page.getByRole('button', { name: 'Cambiar al tema claro' }).click(); + await expect(page.locator('html')).toHaveAttribute('data-tema', 'claro'); + + const oroClaro = await logo.evaluate((elemento) => getComputedStyle(elemento).backgroundImage); + expect(oroClaro).toBe(oroOscuro); + }); + test('la música se presenta por estilos', async ({ page }) => { await page.goto('/musica'); diff --git a/src/app.css b/src/app.css index 39824c1..6b6a490 100644 --- a/src/app.css +++ b/src/app.css @@ -38,7 +38,16 @@ * El oro. El plano de antes tiraba a amarillo; este baja de claridad y sube * de croma, que es lo que separa un metal de un color de rotulador. */ - --c-accent: oklch(0.8 0.145 84); + /* + * El metal de la marca no cambia con el tema. Los acentos funcionales sí + * pueden adaptarse al fondo claro, pero el logotipo conserva estas tres + * tintas exactas en ambos modos. + */ + --c-marca-oro: oklch(0.8 0.145 84); + --c-marca-oro-brillo: oklch(0.94 0.095 96); + --c-marca-oro-sombra: oklch(0.63 0.13 72); + + --c-accent: var(--c-marca-oro); --c-accent-text: oklch(0.16 0.042 264); /* * El dorado como superficie va aparte del dorado como texto, porque no @@ -47,10 +56,10 @@ * En el tema oscuro coinciden; en el claro no, y por eso existe la * distinción. */ - --c-accent-superficie: oklch(0.8 0.145 84); + --c-accent-superficie: var(--c-marca-oro); /* Los dos extremos del reflejo: la luz que lo cruza y la sombra del canto. */ - --c-accent-brillo: oklch(0.94 0.095 96); - --c-accent-sombra: oklch(0.63 0.13 72); + --c-accent-brillo: var(--c-marca-oro-brillo); + --c-accent-sombra: var(--c-marca-oro-sombra); /* * El verdemar: el tercer color de la paleta, para datos. @@ -118,16 +127,18 @@ ); /* - * El mismo metal, pero para recortarlo sobre unas letras. - * - * El dorado hace dos trabajos y no puede ser el mismo valor en los dos: de - * relleno tiene que ser claro para que encima se lea el marino, y escrito - * tiene que ser hondo para leerse sobre el fondo. Sobre marino las cinco - * paradas de `--oro` valen —la peor da 5,4 de contraste—, así que aquí es - * literalmente el mismo. En claro no: ahí el brillo se queda en 1,26 y la - * marca desaparece, y por eso el tema claro lo redefine. + * El metal propio del logotipo. Usa los colores fijos de marca en vez de los + * acentos funcionales del tema: cambiar el fondo no debe convertir el logo en + * otro dorado ni aplanar su banda de luz. */ - --oro-escrito: var(--oro); + --oro-escrito: linear-gradient( + 166deg, + var(--c-marca-oro-sombra) 0%, + var(--c-marca-oro) 24%, + var(--c-marca-oro-brillo) 46%, + var(--c-marca-oro) 64%, + var(--c-marca-oro-sombra) 100% + ); /* * Dos radios y no más, para que nada se vea de otra familia: @@ -225,27 +236,6 @@ --c-accent-brillo: oklch(0.9 0.1 92); --c-accent-sombra: oklch(0.6 0.12 74); - /* - * El oro escrito, sobre papel. - * - * Aquí la banda va al revés que en el botón: el punto más claro es el propio - * `--c-accent` y los extremos se oscurecen. Medido contra este fondo, el - * acento da 5,29 de contraste y las tres paradas del oro de relleno dan - * 1,26, 2,05 y 3,79 —las tres por debajo del mínimo—, así que un degradado - * que subiera del acento dejaría el centro de las letras ilegible. - * - * Sigue pareciendo metal porque lo que hace el efecto es la banda que cruza, - * no que llegue a brillar. - */ - --oro-escrito: linear-gradient( - 166deg, - color-mix(in oklab, var(--c-accent) 68%, black) 0%, - color-mix(in oklab, var(--c-accent) 84%, black) 24%, - var(--c-accent) 46%, - color-mix(in oklab, var(--c-accent) 84%, black) 64%, - color-mix(in oklab, var(--c-accent) 68%, black) 100% - ); - /* En claro se invierten: el dato pintado tiene que ser oscuro sobre papel. */ --c-dato: oklch(0.5 0.085 200); /* El mismo tono, un paso por debajo: «también se canta aquí», no otro dato. */ diff --git a/src/lib/components/Cabecera.svelte b/src/lib/components/Cabecera.svelte index fe7679a..560bb65 100644 --- a/src/lib/components/Cabecera.svelte +++ b/src/lib/components/Cabecera.svelte @@ -235,7 +235,7 @@ font-weight: 600; line-height: 1.15; letter-spacing: 0.01em; - color: var(--c-accent); + color: var(--c-marca-oro); text-decoration: none; }