drwily/petal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Phase 14: bedtime nag + night mode (dark theme + falling stars)

Browse Source 
Companion warmth:
- ENCOURAGEMENTS grown 5->10; new BEDTIME lines (warm/playful, zh-first)
- useCompanion heartbeat gains a bedtime branch (>=11pm, while actively
  writing) gated by a 30min cooldown; new 'bedtime' BubbleTone paces it

Night mode (auto at ~11pm, local clock):
- lib/night.ts centralizes isBedtime() + the window, shared with the nag
- useNightMode toggles a `petal-night` class on <html>; index.css re-points
  only the palette tokens, so every Tailwind color utility flips via var()
  with no component edits (600ms dusk fade; print stays white)
- PetalFall gains a `night` prop: chunky cartoon power stars (makeCartoonStar,
  5 candy colors) mixed ~70/30 with twinkle sparkles; each star spins at its
  own rate (~0.5-2.2 rad/s, random direction), falls straight down, shimmers

Verified: go vet/test, tsc, vitest 51/51, vite build; real-browser
screenshots/video (clock mocked to 23:30).

Claude-Session: https://claude.ai/code/session_016Yr6jELuRc7hyzYLccQKZd
This commit is contained in:
prosolis
2026-06-26 15:10:36 -07:00
parent aebdc2679a
commit 9576340391
8 changed files with 303 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
web/src/index.css
View File

@@ -37,6 +37,23 @@
--shadow-soft: 0 4px 20px rgba(180, 130, 160, 0.12);
}
/* Night mode — toggled by adding `petal-night` to <html> (useNightMode) once the
clock passes ~11pm. We only re-point the palette tokens; every Tailwind color
utility reads them via var(), so the whole UI shifts to a calm, dim, moonlit
theme without touching component markup. Pastel accent/type colors are kept —
they read beautifully on the dark plum ground. Falling petals become stars. */
html.petal-night {
--color-bg: #14111E; /* deep night plum-indigo */
--color-surface: #211C30; /* raised panels */
--color-surface-alt: #2A2440; /* alt surface / hover wash */
--color-border: #38304E; /* dim lavender border */
--color-plum: #ECE3F2; /* ink → soft moonlit lavender-white */
--color-muted: #9F93B8; /* muted lavender-grey, lifted for contrast */
--color-accent: #E8A0BF; /* rose still primary — pops on dark */
--color-accent-hover: #F2B7D2;/* lighter on hover against the dark */
--shadow-soft: 0 6px 28px rgba(0, 0, 0, 0.45);
}
html, body, #root {
height: 100%;
}
@@ -47,6 +64,8 @@ body {
color: var(--color-plum);
font-family: var(--font-ui);
-webkit-font-smoothing: antialiased;
/* Gentle dusk/dawn fade when night mode flips. */
transition: background 600ms ease, color 600ms ease;
}
/* Gentle, consistent motion across interactive elements */