GameCult/Ratatoskr
Watch
9
0
Fork
You've already forked Ratatoskr
 0
Code Issues Pull requests 2 Projects Releases Packages Wiki Activity Actions

Merge pull request 'scene: skyState test takes the worse of both sky ends' (#46) from nibu/sky-test-ratio into dev
Some checks failed
Rat dev preview / Build dev preview (push) Has been cancelled
Details

Browse source
This commit is contained in:
Void 2026-11-09 22:19:32 +00:00
commit a9a75fc6ff
1 changed files with 11 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/app/features/scene/skyState.test.ts
View file

@ -131,22 +131,26 @@ describe('skyBackdrop', () => {
});
});
// Login text and link, per theme, from the card variables in pages/auth/styles.css.ts (the
// fallback pair serves Light, Silver, Dark and Butter) and the sky themes' baked bubble text and
// link. Light ink is measured against the lightest sky it can sit on, dark ink against the darkest.
// Login text and link, per theme, from the card variables in pages/auth/styles.css.ts and the sky
// themes' baked bubble text and link. The Light/Silver/Dark/Butter row uses the ink those themes
// actually render: under data-scene the auth card text is var(--sky-bubble-text, #b7c7d9), not each
// theme's own OnContainer.
const inks = [
{ theme: 'Light/Silver/Dark/Butter', text: '#b7c7d9', link: '#99c7ff' },
{ theme: 'Midnight Sky', text: baked.midnight.bubbles.OtherText, link: baked.midnight.link },
{ theme: 'Noonday Sky', text: baked.noonday.bubbles.OtherText, link: baked.noonday.link },
];
// WCAG contrast of an ink against a backdrop of the given luminance, with the ink's polarity
// deciding which end of the sky is its worst case.
const ratio = (ink: string, b: SkyBackdrop) => {
// WCAG contrast of an ink against the sky it is worst on. The sky can show any luminance between
// its darkest and lightest, and contrast is lowest where the backdrop is closest to the ink: the
// ink's own luminance clamped into that range. An ink inside the range can land on a backdrop of
// exactly its own luminance (1.00); an ink outside it is worst on the nearer end.
const against = (ink: string, bg: number) => {
const li = luminance(ink);
const bg = li > 0.18 ? b.lightest : b.darkest;
const [hi, lo] = li > bg ? [li, bg] : [bg, li];
return (hi + 0.05) / (lo + 0.05);
};
const ratio = (ink: string, b: SkyBackdrop) =>
against(ink, Math.min(b.lightest, Math.max(b.darkest, luminance(ink))));
describe('login ink against the sky backdrop', () => {
const rows = SKY_STATES.flatMap((state) =>