/* ───────────────────────────────────────────────────────────────────────── PER-APP THEMES — the `apps` cascade layer. Scope comes from , derived from the resolved URL namespace (metis_apps/metis/context_processors.py:theme_context), so a theme applies exactly where the app owns the page — and nowhere else. A person record opened from a Coherence conversation is platform data and renders in the platform accent; that seam is honest about ownership. ALLOWLIST — an app may set these, and nothing else: page-wide [data-app="x"] --color-accent, --color-accent-text own content [data-app="x"] main --color-decor, --font-display --app-backdrop (per page, §4.6) --font-ui is allowlisted for Coherence and Audax ONLY, by two explicit decisions recorded in specs/design-system.md §10 and §11. Both brands treat their body face as load-bearing rather than decorative, and both accepted the cost knowingly. Two is a list, not an open door: a third app wanting its own body face is a conversation about the type system, not a copy of one of those blocks. The allowlist in deploy/check_design_tokens.py is keyed by slug precisely so a third cannot appear quietly. The app's own content area is
. `[data-app-content]` is the same scope named explicitly, for the one case where the content area cannot be a
— the styleguide's preview canvas, which sits inside the shell's own
and so would never match the descendant selector. Without it the deep half of a theme is invisible in the tool built to review it. Never, by anyone: the type scale, the spacing scale, --font-mono, or any shape/radius/density token. Those are what keep the MetisApps one product rather than several sharing a login. --font-ui belongs on that list too, with the two recorded exceptions noted above. --color-accent and --color-accent-text must be set as a PAIR: everything else (hover, ring, tints) is color-mix()'d off the accent in tokens/semantic.css, but text contrast cannot be derived until contrast-color() is Baseline. See specs/design-system.md §4. Enforced by deploy/check_design_tokens.py. ───────────────────────────────────────────────────────────────────────── */ @layer apps { /* Coherence's, Gathering's and Audax's themes live with their apps (metis_apps//static//css/theme.css) because they draw on app-owned brand primitives; platform CSS referencing an app's tokens would point the dependency arrow upward. Apps whose theme needs only platform primitives stay here. Gathering sets no accent at all, deliberately. The platform's brand ramps were promoted out of The Gathering's own palette, so --olive-600 IS its brand hue and it inherits the right colour by doing nothing. It used to set --orange-500 here; orange is that brand's "at most one per page" ticket accent, not a second brand hue, and an app-wide orange spent that budget on every chip and focus ring at once. See gathering/css/theme.css. */ /* Outreach — the steel blue already used for outreach-network holons and the ambassador interest tag. */ [data-app="outreach"] { --color-accent: var(--cat-steel-600); --color-accent-text: var(--white); } /* ── Nav tints ───────────────────────────────────────────────────── An app's block in the sidenav carries its own colour so it is legible on the collapsed rail. Keyed on [data-app-group], NOT [data-app]: the rail renders on every page, so these apply wherever you are — that is the point. They reference each app's primitive directly rather than var(--color-accent), which outside the app's own routes would resolve to whatever page you happen to be on. Coherence's, Gathering's and Audax's tints live in their own nav.css, next to the brand primitives they draw on. */ [data-app-group="outreach"] { --app-nav-bg: color-mix(in oklab, var(--cat-steel-600) 8%, var(--white)); --app-nav-bg-hover: color-mix(in oklab, var(--cat-steel-600) 15%, var(--white)); --app-nav-item-active: color-mix(in oklab, var(--cat-steel-600) 24%, var(--white)); } /* ── Shell chrome re-asserts platform geometry ───────────────────── The sidenav picking up an app's accent on its active item is a wanted "where am I" cue. The sidenav changing *shape* per app is not — navigation must feel stable across apps, so chrome pins the platform radii regardless of what an app theme is doing on the page. */ .sidenav, .hijack-bar, .ext-version-banner { --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-full: 999px; --font-display: var(--font-ui); } }