remarkbox/docs/tickets/16.md

50 lines
2.6 KiB
Markdown

# T16 — Themes must be self-contained; `common.css` is the built-in (embed) stylesheet
**Status:** open
**Priority:** medium
**Source:** fox directive 2026-05-12 (after chaostheory palette leaked into meta via `common.css`, fixed in `89679fd` + theme `37c496f`)
## Problem
Every base template — `base.j2`, `meta-base.j2`, `chaostheory-base.j2` — includes
`snippets/stylesheet-includes.j2`, which loads `/static/css/common.css`. So a meta
page and a chaostheory page both pull the same shared stylesheet. When `common.css`
carries palette or visual assumptions (as it did after `68ca0ef`), those bleed into
every theme. A meta page should load only meta CSS; a chaostheory page should load
only chaostheory CSS.
The intent: **`common.css` (+ `embed.css`) is the "built in" — the styling for embed
mode and unthemed namespaces (`base.j2`)**. Full themes are standalone (their base
templates already "extend nothing"); they should ship a complete stylesheet and not
piggyback on the built-in.
## Why it's not a one-line change
The themes are not currently self-contained. They depend on behavioral CSS in
`common.css`, e.g. chaostheory's `theme.css` notes *"Reply form inside node —
display:none owned by common.css"*. Ripping `common.css` out of the themed templates
today would break reply-form toggles, the burger/phone menu, alerts, node action
rows, etc.
## Plan
1. Inventory which `common.css` rules each theme actually relies on (behavioral:
`display:none` toggles, `.toggle-open`, burger menu, AJAX states; structural:
`.node`, `.remark-box-div`; visual: alerts, wells, `.question-mark-circle`).
2. Move the rules each theme needs into that theme's own CSS (`meta.css`,
`remarkbox-theme-chaostheory/theme.css`). Keep them theme-local.
3. Split `stylesheet-includes.j2` (or add a `theme_stylesheet_includes` block) so
`meta-base.j2` / `chaostheory-base.j2` load only `pygments.css`,
`dynamic-remarkbox.css`, the per-namespace stylesheet, and their own theme CSS —
not `common.css`.
4. `base.j2` keeps `common.css`; `common.css` + `embed.css` become the documented
"built-in / embed" stylesheet. Add a header comment to `common.css` saying so.
5. Regression-check: embed mode, default (unthemed) namespace, meta (meta.remarkbox.com,
faq.remarkbox.com), chaostheory (foxhop.net), light + dark mode, reply-form toggle,
burger menu, flash alerts, `?` help circles.
## Done when
Loading a meta page pulls zero chaostheory CSS and zero chaostheory-flavored rules
from `common.css`, and vice versa; embed/default still styled by `common.css`; all
regression points above verified.