// screens-brand.jsx — Branding. Vault's living style guide.
//
// WHAT THIS SCREEN IS FOR
// Every colour, radius, shadow and type step in Vault, on one page, rendered
// from the same source the app renders from. It is a mirror, not a copy: the
// swatches read their values out of the live document via VaultTheme.get(), and
// the component samples below are the real shared classes from theme.css. If a
// token changes in theme.css, this screen changes with it. If a screen stops
// matching this page, that screen is wrong.
//
// The catalogue (which tokens exist, how they group, what each is for) lives in
// lib-theme.js. Adding a token there and in theme.css is all it takes to appear
// here — there is no list in this file to keep in step.
//
// WHY IT IS READ-ONLY
// Editing tokens live would need a theme_tokens table, RLS, a write path and a
// resolution order against the stylesheet. That is worth building, but it is a
// different job from establishing the system, and an editable style guide with
// no system underneath it just moves the drift somewhere new. Read-only first.
(function () {
const { useState, useEffect } = React;
const T = () => window.VaultTheme || { GROUPS: [], SHAPE: [], ELEVATION: [], TYPE: [], WEIGHT: [] };
const A = (t, n, over) => (window.VaultAlpha ? window.VaultAlpha(t, n, over) : "transparent");
// A token's resolved value, re-read whenever the theme flips. data-theme is on
// , so a MutationObserver on the attribute is what makes this live.
function useThemeTick() {
const [tick, setTick] = useState(0);
useEffect(() => {
const el = document.documentElement;
const obs = new MutationObserver(() => setTick(t => t + 1));
obs.observe(el, { attributes: true, attributeFilter: ["data-theme", "data-density"] });
return () => obs.disconnect();
}, []);
return tick;
}
function Swatch({ token, note, tick }) {
const val = window.VaultTheme ? window.VaultTheme.get(token) : "";
const isAlpha = /rgba|color-mix/.test(val);
return (
{/* Checkerboard behind the chip so alpha tokens read as alpha. */}
{token}{note}{val}
);
}
function Card({ title, note, children }) {
return (
Every token Vault ships, read live from theme.css. Screens reference these; they do not declare
their own values. A hex literal in a screen file is a bug — it will not follow the theme.
Presence has no data source yet — it needs a heartbeat table and a writer. The states
render so the capability can be turned on without touching call sites. Nothing defaults
to Offline: claiming someone is offline with no source would be a lie.
The same classes drive real tables and the CSS-grid tables, so both render identically.
To add a token: declare it in theme.css with
its dark-mode counterpart, then add its name and description to the catalogue in
lib-theme.js. It appears here on its own.