Styling

StyleX

Tokens: src/tokens.stylex.js — colors, layout, compactLayout
Dark theme: src/themes.js → darkTheme (createTheme)
Modules under src/styles/*.js — ui, grid, planner, menus, editor, auth, landing, todos, print

Vite uses @stylexjs/unplugin with CSS layers (vite.config.js).

Inline script in index.html sets data-theme / theme-color early
theme-dom.js — bootDocumentTheme(), applyDocumentTheme(), StyleX dark class on <html>
After login, useTheme syncs with Instant settings.theme and localStorage

Print forces light theme temporarily. Dark palette CSS is screen-only.

File	Role
`src/app.css`	Box sizing, overflow clip, mobile scroll lock, body colors, print page margin
`src/styles/base-ui.css`	Base UI lifecycle transitions StyleX cannot target (popover, dialog, drawer, toast, scrollarea); reduced motion; hide overlays in print
`src/styles/palette.css`	Event colors via `data-color` CSS variables; light default (print-safe); dark under `html[data-theme='dark']`

Important layout vars: slotH, headH, gutW, colMin, font. Mobile layout token overrides are screen-only so print does not shrink.