7b4aa2f184
Two themes replace the navy GameCult theme. Every colour is a bark, leaf, soil or pigment albedo times the irradiance sun.js gives for a fixed moment (equinox noon and midnight, 45N). scripts/bake-sky.mjs writes src/sky/baked.ts: the terrain-free sky gradient used as the fallback background, folds tokens for panels and buttons, chat bubble colours, link and name colours. skyTokens.test.ts holds every text pairing to WCAG AA and fails if baked.ts is stale. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
29 lines
1.1 KiB
TypeScript
29 lines
1.1 KiB
TypeScript
import { globalStyle } from '@vanilla-extract/css';
|
|
import { baked } from './sky/baked';
|
|
|
|
// Fallback background and the colours folds has no token for. Everything is read from
|
|
// the bake (albedo x irradiance via sun.js); nothing here chooses a colour.
|
|
const skies = [
|
|
{ scope: 'body.midnight-sky', sky: baked.midnight, scheme: 'dark' },
|
|
{ scope: 'body.noonday-sky', sky: baked.noonday, scheme: 'light' },
|
|
] as const;
|
|
|
|
skies.forEach(({ scope, sky, scheme }) => {
|
|
const stops = sky.gradient.map(
|
|
(c, i) => `${c} ${Math.round((i / (sky.gradient.length - 1)) * 100)}%`
|
|
);
|
|
globalStyle(scope, {
|
|
colorScheme: scheme,
|
|
backgroundColor: sky.gradient[0],
|
|
backgroundImage: `linear-gradient(180deg, ${stops.join(', ')})`,
|
|
backgroundAttachment: 'fixed',
|
|
vars: {
|
|
'--tc-link': sky.link,
|
|
...Object.fromEntries(sky.userColors.map((c, i) => [`--mx-uc-${i + 1}`, c])),
|
|
'--sky-bubble': sky.bubbles.Other,
|
|
'--sky-bubble-text': sky.bubbles.OtherText,
|
|
'--sky-bubble-own': sky.bubbles.Own,
|
|
'--sky-bubble-own-text': sky.bubbles.OwnText,
|
|
},
|
|
});
|
|
});
|