/* memex theme — Catppuccin * https://catppuccin.com/palette/ * * Two layers: * 1. Raw palette (--ctp-*) — verbatim Catppuccin hex values, dark * (Mocha) by default and re-bound to light (Latte) under either * a `prefers-color-scheme: light` media query (when the operator * hasn't overridden) OR an explicit `data-theme="light"` on * (when they have). * 2. Semantic mapping (--mx-*) — what the rest of memex.css consumes. * Mapped once on :root using the raw tokens, so the light/dark * switch happens entirely in the raw palette layer. * * Three states the operator's `surface.theme` setting drives via the * attribute: * - "system" → media query picks: Mocha on dark OS, Latte on light. * - "dark" → :root's Mocha tokens win; media query is scoped away. * - "light" → explicit Latte block wins, OS preference ignored. * * Adding a third theme (Frappé, Macchiato): copy the raw block under * a different [data-theme] selector and re-bind the --ctp-* tokens. * The --mx-* mapping doesn't need to change. */ :root { color-scheme: light dark; /* ---------- Catppuccin Mocha palette (dark — default) ---------- */ --ctp-rosewater: #f5e0dc; --ctp-flamingo: #f2cdcd; --ctp-pink: #f5c2e7; --ctp-mauve: #cba6f7; --ctp-red: #f38ba8; --ctp-maroon: #eba0ac; --ctp-peach: #fab387; --ctp-yellow: #f9e2af; --ctp-green: #a6e3a1; --ctp-teal: #94e2d5; --ctp-sky: #89dceb; --ctp-sapphire: #74c7ec; --ctp-blue: #89b4fa; --ctp-lavender: #b4befe; --ctp-text: #cdd6f4; --ctp-subtext1: #bac2de; --ctp-subtext0: #a6adc8; --ctp-overlay2: #9399b2; --ctp-overlay1: #7f849c; --ctp-overlay0: #6c7086; --ctp-surface2: #585b70; --ctp-surface1: #45475a; --ctp-surface0: #313244; --ctp-base: #1e1e2e; --ctp-mantle: #181825; --ctp-crust: #11111b; /* ---------- Semantic mapping ---------- */ /* Canvas + elevation. Mantle is the recessed page background; cards sit on Base (slightly lighter, so they read as raised); inset chips and quote blocks go a tier brighter on Surface0. */ --mx-bg: var(--ctp-mantle); --mx-surface: var(--ctp-base); --mx-surface-muted: var(--ctp-surface0); --mx-border: var(--ctp-surface1); --mx-border-strong: var(--ctp-surface2); --mx-text: var(--ctp-text); --mx-text-muted: var(--ctp-subtext0); /* Primary accent — buttons, focus rings, links. */ --mx-focus: var(--ctp-blue); /* Foreground shown on top of --mx-focus (e.g. primary-button text). Catppuccin accents are light, so on-accent text must be dark. */ --mx-on-accent: var(--ctp-crust); /* Type lozenges — categorical, distinct hue families. */ --mx-task: var(--ctp-sapphire); --mx-reference: var(--ctp-green); --mx-idea: var(--ctp-yellow); --mx-untyped: var(--ctp-overlay1); --mx-draft: var(--ctp-peach); --mx-note: var(--ctp-mauve); --mx-system: var(--ctp-red); --mx-system-soft: color-mix(in srgb, var(--ctp-red) 18%, var(--ctp-mantle)); /* Work / life context — binary distinction. Blue/amber per operator's deuteranomaly preference (avoids green/red as the sole discriminator). */ --mx-context-work-active: var(--ctp-blue); --mx-context-life-active: var(--ctp-peach); --mx-context-active-text: var(--ctp-crust); --mx-shadow: 0 1px 2px rgba(0, 0, 0, 0.32); } /* ---------- Milkdown Crepe editor ---------- * Crepe defines its own --crepe-color-* tokens on `.milkdown` with a * hardcoded dark Material palette. CSS custom-property resolution: a * variable set directly on an element wins over one inherited from * :root, regardless of equal specificity. So our overrides MUST live * on `.milkdown` (not `:root`) to take effect inside the editor — and * because theme.css loads after editor.bundle.css, the same-specificity * source-order tiebreak goes to us. * * Binding to --mx-* / --ctp-* means the editor automatically follows * whichever palette the data-theme + prefers-color-scheme layer has * resolved at the surrounding element. */ .milkdown { --crepe-color-background: var(--mx-surface); --crepe-color-on-background: var(--mx-text); --crepe-color-surface: var(--mx-bg); --crepe-color-surface-low: var(--mx-surface-muted); --crepe-color-on-surface: var(--mx-text); --crepe-color-on-surface-variant: var(--mx-text-muted); --crepe-color-outline: var(--mx-border-strong); --crepe-color-primary: var(--mx-focus); --crepe-color-secondary: var(--mx-surface-muted); --crepe-color-on-secondary: var(--mx-text); --crepe-color-inverse: var(--mx-text); --crepe-color-on-inverse: var(--mx-bg); --crepe-color-inline-code: var(--ctp-flamingo); --crepe-color-error: var(--mx-system); --crepe-color-hover: var(--mx-surface-muted); --crepe-color-selected: color-mix(in srgb, var(--mx-focus) 28%, transparent); --crepe-color-inline-area: var(--mx-surface-muted); } /* ---------- Light mode (Catppuccin Latte) ---------- * Two activation paths share the same palette body: * 1. OS-driven: `prefers-color-scheme: light` matches AND the * operator hasn't set an explicit theme override (data-theme * defaults to "system" via app/web/router.py:_theme_preference). * 2. Operator-driven: data-theme="light" forces Latte regardless of * OS preference. * * The body is repeated rather than aliased via custom-property * indirection because CSS can't conditionally re-bind a token AND * shadow it via a higher-specificity rule cleanly. The repetition is * one block; future palette tweaks need only land in both. */ @media (prefers-color-scheme: light) { :root[data-theme="system"] { --ctp-rosewater: #dc8a78; --ctp-flamingo: #dd7878; --ctp-pink: #ea76cb; --ctp-mauve: #8839ef; --ctp-red: #d20f39; --ctp-maroon: #e64553; --ctp-peach: #fe640b; --ctp-yellow: #df8e1d; --ctp-green: #40a02b; --ctp-teal: #179299; --ctp-sky: #04a5e5; --ctp-sapphire: #209fb5; --ctp-blue: #1e66f5; --ctp-lavender: #7287fd; --ctp-text: #4c4f69; --ctp-subtext1: #5c5f77; --ctp-subtext0: #6c6f85; --ctp-overlay2: #7c7f93; --ctp-overlay1: #8c8fa1; --ctp-overlay0: #9ca0b0; --ctp-surface2: #acb0be; --ctp-surface1: #bcc0cc; --ctp-surface0: #ccd0da; --ctp-base: #eff1f5; --ctp-mantle: #e6e9ef; --ctp-crust: #dce0e8; --mx-on-accent: var(--ctp-base); --mx-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); } } :root[data-theme="light"] { --ctp-rosewater: #dc8a78; --ctp-flamingo: #dd7878; --ctp-pink: #ea76cb; --ctp-mauve: #8839ef; --ctp-red: #d20f39; --ctp-maroon: #e64553; --ctp-peach: #fe640b; --ctp-yellow: #df8e1d; --ctp-green: #40a02b; --ctp-teal: #179299; --ctp-sky: #04a5e5; --ctp-sapphire: #209fb5; --ctp-blue: #1e66f5; --ctp-lavender: #7287fd; --ctp-text: #4c4f69; --ctp-subtext1: #5c5f77; --ctp-subtext0: #6c6f85; --ctp-overlay2: #7c7f93; --ctp-overlay1: #8c8fa1; --ctp-overlay0: #9ca0b0; --ctp-surface2: #acb0be; --ctp-surface1: #bcc0cc; --ctp-surface0: #ccd0da; --ctp-base: #eff1f5; --ctp-mantle: #e6e9ef; --ctp-crust: #dce0e8; /* On-accent foreground flips: Catppuccin Latte's accents are * saturated mid-tone hues; on-accent text should be the light * canvas color so a blue button reads white-on-blue, not * dark-on-blue. Mocha's accents are pale so its on-accent stays * the dark crust. */ --mx-on-accent: var(--ctp-base); /* Shadows want more alpha on a light canvas so they read. */ --mx-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); /* Match `color-scheme` to the explicit override so native form * controls (scrollbar, date pickers) follow the chosen palette. */ color-scheme: light; } /* Explicit dark override: lock color-scheme down so the OS doesn't * paint native controls as light when prefers-color-scheme: light. */ :root[data-theme="dark"] { color-scheme: dark; }