/* The palette — one accent per app, and the only place the hues are written. THIS FILE IS THE SINGLE SOURCE. Six apps, six atmospheres: the accent, the ink (a lighter tint, for accent-coloured text on dark), the soft tint, the hairline, the glow, and the two colours of the backdrop blobs the glass refracts. Switching app changes the colour of the marks and the colour of the light behind the glass, and nothing else: the glass, the type and the layout are identical in every app. It is CSS rather than JSON because the accent has to be right in the first painted frame — `data-app` is set on by an inline script before any fetch, and a palette that arrived with `apps.json` would flash you²-blue first. `apps.json` therefore carries no colours; it names this file. Two namespaces read it, and neither design system may tint the other, so the tokens here are deliberately neutral (`--app-*`) and each stylesheet maps them into its own names: * `styles.css` --app-* -> --accent*, --blob-* (the you² glass) * `_shell/shell.css` --app-* -> --y2-* (the sidebar, anywhere) GoodFood is the one mirror, and it is in another repository: its own `globals.css` restates the `nutrition` row in GoodFood's tokens, because GoodFood also has to look like itself when served directly on :5173 with no shell around it. That row and this one are kept the same by hand. Loaded by `index.html` (the SPA) and injected by `_shell/shell.js` (every mounted app), so every page of this origin has it. */ /* ------------------------------------------------------------------ dark */ html[data-app="you2"] { --app-accent: #7fb4ff; --app-accent-ink: #b5d2ff; --app-accent-soft: rgba(127, 180, 255, .14); --app-accent-line: rgba(127, 180, 255, .30); --app-accent-glow: rgba(127, 180, 255, .28); --app-accent-shine: 0 0 22px rgba(127, 180, 255, .34); --app-accent-mix: #9085e9; --app-on-accent: #06121f; --app-blob-a: rgba(57, 135, 229, .28); --app-blob-b: rgba(144, 133, 233, .22); --app-blob-c: rgba(25, 158, 112, .18); } html[data-app="nutrition"] { --app-accent: #5fd4c4; --app-accent-ink: #a3ece2; --app-accent-soft: rgba(95, 212, 196, .14); --app-accent-line: rgba(95, 212, 196, .30); --app-accent-glow: rgba(95, 212, 196, .28); --app-accent-shine: 0 0 22px rgba(95, 212, 196, .34); --app-accent-mix: #34d399; --app-on-accent: #06121f; --app-blob-a: rgba(43, 196, 212, .26); --app-blob-b: rgba(52, 211, 153, .18); --app-blob-c: rgba(14, 165, 183, .14); } html[data-app="habits"] { --app-accent: #f28bb0; --app-accent-ink: #f9c2d6; --app-accent-soft: rgba(242, 139, 176, .14); --app-accent-line: rgba(242, 139, 176, .30); --app-accent-glow: rgba(242, 139, 176, .28); --app-accent-shine: 0 0 22px rgba(242, 139, 176, .34); --app-accent-mix: #fb923c; --app-on-accent: #06121f; --app-blob-a: rgba(236, 72, 153, .22); --app-blob-b: rgba(251, 146, 60, .14); --app-blob-c: rgba(219, 39, 119, .12); } html[data-app="sleep"] { --app-accent: #a99bf0; --app-accent-ink: #cfc6f8; --app-accent-soft: rgba(169, 155, 240, .14); --app-accent-line: rgba(169, 155, 240, .30); --app-accent-glow: rgba(169, 155, 240, .28); --app-accent-shine: 0 0 22px rgba(169, 155, 240, .34); --app-accent-mix: #60a5fa; --app-on-accent: #06121f; --app-blob-a: rgba(139, 92, 246, .26); --app-blob-b: rgba(59, 130, 246, .16); --app-blob-c: rgba(99, 102, 241, .14); } /* Exercise and Home are the two accents that sit on top of a status colour. `--good` is #4ec98a and `--warn` is #f0b64a, and the table's first choices (#4fd18b, #f0b35c) were those two colours again to within a few points of one channel — ΔE*ab 4.7 and 9.2 — and a green "on target" chip beside a green accent read as one thing. The status colours are fixed, they mean something, so the accents moved instead: exercise's green turned toward lime (it is movement, not "on target") and home's amber went paler and warmer, which is nearer to sunlight anyway. Both are now ΔE > 30 from every status colour, and no accent is closer than 27 to one. The one tight place left is light-theme home against light-theme `--warn`: light amber has `--warn` on one side and `--danger` on the other and there is not much room between them; 16 is the best available and it is said out loud rather than hidden. */ html[data-app="exercise"] { --app-accent: #9fe36b; /* nudged from #4fd18b, off --good */ --app-accent-ink: #c9f0a8; --app-accent-soft: rgba(159, 227, 107, .14); --app-accent-line: rgba(159, 227, 107, .30); --app-accent-glow: rgba(159, 227, 107, .28); --app-accent-shine: 0 0 22px rgba(159, 227, 107, .34); --app-accent-mix: #a3e635; --app-on-accent: #06121f; --app-blob-a: rgba(34, 197, 94, .24); --app-blob-b: rgba(16, 185, 129, .16); --app-blob-c: rgba(5, 150, 105, .14); } html[data-app="home"] { --app-accent: #f9c79a; /* nudged from #f0b35c, off --warn */ --app-accent-ink: #fde0c4; --app-accent-soft: rgba(249, 199, 154, .14); --app-accent-line: rgba(249, 199, 154, .30); --app-accent-glow: rgba(249, 199, 154, .28); --app-accent-shine: 0 0 22px rgba(249, 199, 154, .34); --app-accent-mix: #fb7185; --app-on-accent: #06121f; --app-blob-a: rgba(245, 158, 11, .22); --app-blob-b: rgba(251, 113, 133, .12); --app-blob-c: rgba(217, 119, 6, .12); } /* ----------------------------------------------------------------- light The same six hues taken down to something that reads on a white field. The two nudges are kept: exercise stays teal-side of `--good` (#12855c) and home stays orange-side of `--warn` (#9a6a00). No glow in light — a glow on white is a smudge. */ html[data-app="you2"][data-theme="light"] { --app-accent: #3f6fbf; --app-accent-ink: #3f6fbf; --app-accent-soft: rgba(63, 111, 191, .13); --app-accent-line: rgba(63, 111, 191, .34); --app-accent-glow: rgba(63, 111, 191, .18); --app-accent-shine: none; --app-on-accent: #ffffff; --app-blob-a: rgba(42, 120, 214, .20); --app-blob-b: rgba(74, 58, 167, .12); --app-blob-c: rgba(27, 175, 122, .14); } html[data-app="nutrition"][data-theme="light"] { --app-accent: #0e8f86; --app-accent-ink: #0e8f86; --app-accent-soft: rgba(14, 143, 134, .13); --app-accent-line: rgba(14, 143, 134, .34); --app-accent-glow: rgba(14, 143, 134, .18); --app-accent-shine: none; --app-on-accent: #ffffff; --app-blob-a: rgba(20, 160, 175, .18); --app-blob-b: rgba(16, 160, 120, .12); --app-blob-c: rgba(14, 165, 183, .10); } html[data-app="habits"][data-theme="light"] { --app-accent: #b3567f; --app-accent-ink: #b3567f; --app-accent-soft: rgba(179, 86, 127, .13); --app-accent-line: rgba(179, 86, 127, .34); --app-accent-glow: rgba(179, 86, 127, .18); --app-accent-shine: none; --app-on-accent: #ffffff; --app-blob-a: rgba(219, 39, 119, .15); --app-blob-b: rgba(234, 118, 40, .10); --app-blob-c: rgba(190, 24, 93, .09); } html[data-app="sleep"][data-theme="light"] { --app-accent: #6a5cc0; --app-accent-ink: #6a5cc0; --app-accent-soft: rgba(106, 92, 192, .13); --app-accent-line: rgba(106, 92, 192, .34); --app-accent-glow: rgba(106, 92, 192, .18); --app-accent-shine: none; --app-on-accent: #ffffff; --app-blob-a: rgba(124, 80, 224, .18); --app-blob-b: rgba(59, 130, 246, .11); --app-blob-c: rgba(99, 102, 241, .10); } html[data-app="exercise"][data-theme="light"] { --app-accent: #5c9a1f; --app-accent-ink: #5c9a1f; --app-accent-soft: rgba(92, 154, 31, .13); --app-accent-line: rgba(92, 154, 31, .34); --app-accent-glow: rgba(92, 154, 31, .18); --app-accent-shine: none; --app-on-accent: #ffffff; --app-blob-a: rgba(26, 170, 94, .17); --app-blob-b: rgba(16, 185, 129, .11); --app-blob-c: rgba(5, 150, 105, .09); } html[data-app="home"][data-theme="light"] { --app-accent: #c4762a; --app-accent-ink: #c4762a; --app-accent-soft: rgba(196, 118, 42, .13); --app-accent-line: rgba(196, 118, 42, .34); --app-accent-glow: rgba(196, 118, 42, .18); --app-accent-shine: none; --app-on-accent: #ffffff; --app-blob-a: rgba(217, 119, 6, .15); --app-blob-b: rgba(244, 63, 94, .09); --app-blob-c: rgba(180, 83, 9, .09); } /* ------------------------------------------------------------------ dots Every app's dot at once, so the switcher can paint all six whichever app you are in. The dots are the dark accents: they are always on the dark glass of the sidebar, and in light they take the light accents. */ :root { --dot-you2: #7fb4ff; --dot-nutrition: #5fd4c4; --dot-habits: #f28bb0; --dot-sleep: #a99bf0; --dot-exercise: #9fe36b; --dot-home: #f9c79a; } html[data-theme="light"] { --dot-you2: #3f6fbf; --dot-nutrition: #0e8f86; --dot-habits: #b3567f; --dot-sleep: #6a5cc0; --dot-exercise: #5c9a1f; --dot-home: #c4762a; }