From f3e123eb8d3fe4a7d96c4a8780881bde6cd3878c Mon Sep 17 00:00:00 2001 From: Void Date: Tue, 10 Nov 2026 04:22:58 +0000 Subject: [PATCH] auth: footerBand test pins the emitted tint to FOOTER_TINT and the footer ink to the plate's Work in progress: Libby's mutant list, the fresh-npm-ci full suite and the tsc count are not yet run on this head. Co-Authored-By: Claude Sonnet 5.5 --- src/app/pages/auth/footerBand.test.ts | 21 +++++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/src/app/pages/auth/footerBand.test.ts b/src/app/pages/auth/footerBand.test.ts index 97febbbb..f453f0bf 100644 --- a/src/app/pages/auth/footerBand.test.ts +++ b/src/app/pages/auth/footerBand.test.ts @@ -1,6 +1,7 @@ import { describe, expect, it } from 'vitest'; import zlib from 'zlib'; import { compile, processVanillaFile } from '@vanilla-extract/integration'; +import { FOOTER_TINT, SKY_PLATE_FALLBACK } from '../../features/scene/skyPlate'; import { AuthFooter } from './styles.css'; // The CSS styles.css.ts emits for the sign-in footer, read back from vanilla-extract's own compile. @@ -32,8 +33,24 @@ describe('the sign-in footer band, as emitted', () => { const [rule] = declarations(await emitted(), over); const fills = rule.filter((d) => d.startsWith('background-color:')); expect(fills).toHaveLength(2); - expect(fills[0]).toBe('background-color: var(--sky-bubble, #0d1a26)'); - expect(fills[1]).toContain('color-mix('); + expect(fills[0]).toBe(`background-color: var(--sky-bubble, ${SKY_PLATE_FALLBACK.fill})`); + }); + + it('tints with FOOTER_TINT of the plate fill, the amount skyTheme.test.ts checks the ink against', async () => { + const [rule] = declarations(await emitted(), over); + const fills = rule.filter((d) => d.startsWith('background-color:')); + expect(fills[1]).toBe( + `background-color: color-mix(in srgb, var(--sky-bubble, ${SKY_PLATE_FALLBACK.fill}) ${ + FOOTER_TINT * 100 + }%, transparent)` + ); + }); + + it("is inked with the plate's ink, on the footer and on its links", async () => { + const css = await emitted(); + const ink = `color: var(--sky-bubble-text, ${SKY_PLATE_FALLBACK.text})`; + expect(declarations(css, over)[0].filter((d) => d.startsWith('color:'))).toEqual([ink]); + expect(declarations(css, `${over} a`)).toEqual([[ink]]); }); it('blurs what is behind it by 12px, the radius of the chat bubbles', async () => { -- 2.47.3