/* ============================================================================ PER-ASSET PALETTES — swappable theme objects ---------------------------------------------------------------------------- Each asset page gets exactly ONE of these, applied at the page root as ``. Nothing else in the system changes between assets: neutrals, type scale, spacing, radii, shadows, motion curves and every component's structure are shared and live in tokens.css. THE THEME CONTRACT An asset theme defines these roles and nothing else. Adding asset 02 or 03 means adding one block below plus one content file — no component changes. --accent primary accent. MUST reach 4.5:1 on --canvas and on --tint, because it carries text. --accent-strong deeper accent for headings-on-accent and hover states. --accent-quiet lower-emphasis accent text. MUST reach 4.5:1 on canvas. --accent-contrast text colour placed ON a filled --accent surface. --support second voice: a cool/warm counterpart. Carries text, so 4.5:1 on --canvas required. --tint pale themed surface for banded sections. --tint-strong pale themed surface, one step up, for cards on tint. --fill-1 / --fill-2 decorative fills ONLY. Never text, never a meaning-bearing stroke. No contrast floor, because nothing depends on seeing them. --chart-a first chart series stroke. 3:1 on canvas required. --chart-b second chart series stroke. 3:1 on canvas required. --chart-band fill between the series. Decorative; the labels and strokes carry the meaning. Run `node tools/contrast.mjs` after any change. It is the source of every ratio quoted in CHOICES.md. ========================================================================= */ /* ---------------------------------------------------------------------------- ASSET 01 · FREIGHT OS Brand colours supplied by the client: #9FA1FF #B5BAFF #AEE2FF #D9F9DF All four are light pastels. None reaches 3:1 on white, so all four are classified as SURFACES AND FILLS. The tones that carry text and strokes are derived from the same hue axis (#9FA1FF is hsl(239 100% 81%)) by dropping lightness until AA is met — so the page reads as the supplied palette while remaining legible. -------------------------------------------------------------------------- */ [data-asset='freight-os'] { /* text-bearing, derived */ --accent: #3b3e9e; /* 8.87:1 on canvas · 7.83:1 on tint */ --accent-strong: #2a2c78; /* 12.14:1 on canvas · 10.72:1 on tint */ --accent-quiet: #5b5fc7; /* 5.38:1 on canvas · 4.75:1 on tint */ --accent-contrast: #ffffff; /* 8.87:1 on filled accent */ --support: #1d4e7a; /* 8.67:1 on canvas · 7.89:1 on sky */ /* supplied pastels, as surfaces */ --tint: #eef0ff; /* from #9FA1FF / #B5BAFF */ --tint-strong: #e4e7ff; --tint-alt: #eaf6ff; /* from #AEE2FF — the "support" band */ --tint-proof: #effbf2; /* from #D9F9DF — used once, see below */ /* supplied pastels, as decorative fills only */ --fill-1: #9fa1ff; --fill-2: #b5baff; --fill-3: #aee2ff; --fill-4: #d9f9df; /* chart series — separated by dash, weight and direct label as well as colour, so the graphic never depends on hue discrimination alone. */ --chart-a: #6b6b7b; /* 5.23:1 — incumbent, dashed, lighter */ --chart-b: #3b3e9e; /* 8.87:1 — platform, solid, heavier */ --chart-band: rgba(159, 161, 255, 0.22); /* Accents INSIDE the dark product panels. This is the one context where the supplied pastels carry text: #9FA1FF is 8.01:1 on the panel ground against 2.33:1 on the light canvas. */ --panel-accent: #9fa1ff; /* 8.01:1 on panel · 7.35:1 on raised */ --panel-accent-alt: #aee2ff;/* 13.43:1 on panel */ --panel-ok: #d9f9df; /* 16.49:1 on panel */ --panel-flag: #e9a238; /* 8.61:1 on panel · 1.92:1 from ok */ } /* ---------------------------------------------------------------------------- ASSET 02 · FREIGHTNEO — signal green. Not defined yet, deliberately. It needs its own contrast audit before it can ship, and inventing values here would put unvalidated colour in the system. To add one: copy the block above, replace the eleven role values, add the palette to PALETTE and PAIRS in tools/contrast.mjs, and run it. -------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------- ASSET 03 · HEXA OPS — blue on near-black ink, at the client's direction. ---------------------------------------------------------------------------- THE GROUND DOES NOT CHANGE. Neutrals, type, spacing, radii and motion are asset 01's, unmodified: canvas #0A0C12, ink #FFFFFF. Only the accent family moves, which is the whole contract of this file. WHY THIS SELECTOR IS TWO PARTS. The versioned precision stylesheets declare their accent on `.p-body-root` — a class, so specificity (0,1,0), and they load after this file. `[data-asset='hexa-ops'] .p-body-root` is (0,2,0) and wins on specificity rather than on load order, so a per-asset palette can never be silently overwritten by a stylesheet that happens to come later. Asset 01's lime is untouched and its selector is unchanged. THE ACCENT'S SECOND JOB. On this asset the accent is not only a CTA colour: it marks the TARGET bar in the four-bar chart, where white marks a MEASURED result. Those two must never be confused, so the separation between them is an audited pair in tools/contrast.mjs, not an impression. Fill treatment (solid / hatched / dashed) is the primary differentiator in that graphic; the colour separation is the backstop. Every ratio below is produced by `node tools/contrast.mjs`. -------------------------------------------------------------------------- */ [data-asset='hexa-ops'] .p-body-root { --accent: #4d9aff; /* 6.87 canvas · 6.63 sunken · 6.05 surface */ --accent-quiet: #2f86f5; /* 5.45 canvas · 5.25 sunken · 4.79 surface */ --accent-contrast: #0a0c12; /* 6.87 on a filled accent */ --accent-tint: rgba(77, 154, 255, 0.12); /* The chart roles. `--chart-measured` is the page ink, so a measured result is the plainest, most solid thing in the graphic and needs no colour to be understood. `--chart-unknown` carries the hatch of the empty bar; it is a non-text graphic tone and is audited as one. */ --chart-measured: #ffffff; /* 19.55 on canvas — solid fill */ --chart-target: #4d9aff; /* 6.87 on canvas — dashed outline + tint */ /* The unknown tone was #8A90A4, the page's own tertiary ink, and the audit rejected it: against the target blue it separated by only 1.12, under the 1.4 floor. Two treatments that must never be confused cannot sit that close even as a backstop, so it was dropped to #6E7688, which separates by 1.60 and still clears the graphic floor on both grounds it is drawn on. */ --chart-unknown: #6e7688; /* 4.29 canvas · 4.14 sunken — hatch and rule */ }