/* ============================================================================ * SurgeNode v2 :: sn-nexus-bridge.css * * FOUNDATIONAL. This file is not page styling. It repairs a defect that * appears the moment this theme ships its own css/custom.css, and it affects * every page in the theme, not just the client area. * * ---------------------------------------------------------------------------- * THE DEFECT * * nexus does not keep its design tokens in theme.min.css. It keeps 76 of them * in templates/nexus/css/custom.css, and its other stylesheets consume them. * assetPath resolves child first, so shipping templates/surgenode-v2/css/ * custom.css shadows nexus's copy and those 76 declarations never load. * * 38 of them are referenced by nexus stylesheets that this theme still uses. * Measured on this install: * * theme.min.css 367 broken var() references * invoice.min.css 30 * store.css 5 * oauth.css 3 * ---------------------------------- * TOTAL 405 * * A broken var() with no fallback makes the declaration invalid at computed * value time, so the property lands on its initial value. That is not a * cosmetic drift, it is invisible UI. Concrete cases, all on live pages: * * .status-fraud background-color: var(--bg-inverted) -> transparent * .status-suspended background-color: var(--yellow-300) -> transparent * .label-default background-color: var(--neutral) -> transparent * .label-danger background-color: var(--error) -> transparent * * and .label sets `color: #fff`, so every one of those renders as white text * on a transparent background. The status pill in the services list and the * invoices list simply disappears. .card-accent-gold loses its top rule and * .invoice-container loses its radius the same way. * * This is the same silent failure mode the theme.yaml comment describes for * missing templates, one layer down: nothing errors, nothing logs, the pixel * is just gone. * * ---------------------------------------------------------------------------- * THE FIX * * Re-declare exactly those 38 variables, mapped onto the frozen sn-tokens * palette. Two things follow from that: * * 1. The 405 references resolve again, so nexus chrome stops disappearing. * 2. They resolve to SurgeNode colours rather than nexus's light defaults, * so nexus's own components arrive on brand without per selector work. * This is the cheapest styling lever in the theme: one declaration here * repaints every rule downstream of it. * * This file declares only names that nexus already invented. It does not add * to the SurgeNode palette and it does not redeclare anything from the :root * block of sn-tokens.css, which stays frozen and stays the single source of * colour. Every value below is a reference to a token in that file. * * Load order: after sn-tokens.css, before page styling. * ==========================================================================*/ :root { /* --- Surfaces --------------------------------------------------------- nexus ramps these light to dark; SurgeNode ramps them dark to less dark. bg is the page ground, muted is a card, lifted is a raised row, accented is the highest surface. */ --bg: var(--ink-900); --bg-muted: var(--ink-850); --bg-lifted: var(--ink-800); --bg-accented: var(--ink-700); /* "inverted" means a surface that contrasts with the page. On nexus's light ground that meant a dark chip. Flipping it literally here would make it a LIGHT chip, and nexus pairs it with `.label { color: #fff }`, which would be white on near white. It is deliberately kept dark so the white text nexus hard codes stays legible, and --text-inverted is kept light to match. Correct pair, honest comment, no invisible text. */ --bg-inverted: var(--ink-700); --text-inverted: var(--ink-100); /* --- Hairlines -------------------------------------------------------- The design uses borders where nexus used shadows, so these matter more here than they did upstream. */ --border: var(--line); --border-muted: var(--line-soft); --border-lifted: var(--line-strong); --border-accented: var(--line-strong); /* --- Text ramp -------------------------------------------------------- */ --text: var(--ink-100); --text-accented: var(--ink-200); --text-lifted: var(--ink-300); --text-muted: var(--ink-400); /* nexus uses the grayscale ramp for high contrast text on the page ground. Inverted for a dark ground. */ --grayscale: var(--ink-100); --grayscale-lifted: var(--ink-200); --grayscale-accented: var(--ink-300); /* --- Neutral ---------------------------------------------------------- */ --neutral: var(--ink-400); --neutral-lifted: var(--ink-300); --neutral-accented: var(--ink-200); /* --- Semantic colour --------------------------------------------------- nexus's own -lifted / -accented variants step DARKER, which is correct on a white page and wrong on a black one. They step brighter here, using the same color-mix against the live token that sn-tokens.css uses for button hover, so a page inside a .theme- scope follows its own accent. */ --success: var(--mint); --success-lifted: color-mix(in srgb, var(--mint) 86%, #ffffff); --success-accented: color-mix(in srgb, var(--mint) 72%, #ffffff); --error: var(--danger); --error-lifted: color-mix(in srgb, var(--danger) 86%, #ffffff); --error-accented: color-mix(in srgb, var(--danger) 72%, #ffffff); --warning: var(--amber); --warning-lifted: color-mix(in srgb, var(--amber) 86%, #ffffff); --warning-accented: color-mix(in srgb, var(--amber) 72%, #ffffff); --info: var(--cobalt); --info-lifted: color-mix(in srgb, var(--cobalt) 86%, #ffffff); --info-accented: color-mix(in srgb, var(--cobalt) 72%, #ffffff); /* nexus's --notice is a violet (#7f22fe). The SurgeNode palette has no violet at :root, and inventing one is not this file's job, so notice collapses onto the accent. Flagged in the handover: if notice needs to be visually distinct from info, that is a new token and a decision. */ --notice: var(--cobalt); --notice-lifted: color-mix(in srgb, var(--cobalt) 86%, #ffffff); --notice-accented: color-mix(in srgb, var(--cobalt) 72%, #ffffff); /* --- Named hues nexus uses directly ------------------------------------ Mapped onto the nearest token rather than carried as literals. There is no teal in the palette; mint is the green and absorbs both. */ --yellow-200: var(--amber); --yellow-300: var(--amber); --emerald-300: var(--mint); --teal-300: var(--mint); --teal-400: var(--mint); --pink-400: var(--danger); /* --- Geometry ---------------------------------------------------------- nexus's roundings are 0.25 / 0.5 / 0.75rem. Mapped onto the soft radii so nexus components match SurgeNode components at every size. */ --rounding-sm: var(--r-sm); --rounding-md: var(--r-md); --rounding-lg: var(--r-lg); --letter-spacing: 0em; --disabled-opacity: 50%; }