/* * CoLateral - shared theme palettes. * ------------------------------------------------------------------------- * Single source of truth for the named editor-style themes used across the * whole product (dashboard, intro page, and standalone tools). Office Blue is the * default light appearance; Dracula preserves the original purple identity. Each block * overrides the CoLateral CSS variables (--bg, --s0..--s2, --bd, --bd2, * --tx..--tx3, --blue, --green, --amber, --red, --indigo, --steel) so any page that * uses those variables reskins to match the theme the user picked on the * dashboard. * * These values mirror the inline palettes in the app pages - keep the two * in sync when a theme is added, renamed, or recoloured. The applier in * src/scripts/apply-theme.js reads the saved theme and sets * `body[data-theme="…"]` / `body.light` so these rules take effect. * * Each block also carries html-scoped mirrors (`html.light`, * `html[data-theme="…"]`, and their `… body` descendants): the synchronous * boot script (tools/theme-boot.js) stamps the theme onto before * exists, so pages paint in the saved theme on the very first frame * instead of flashing their hardcoded dark defaults. * ------------------------------------------------------------------------- */ ::selection{background:#005a9e!important;color:#fff!important;text-shadow:none} ::-moz-selection{background:#005a9e!important;color:#fff!important;text-shadow:none} /* --tx3 was #637b94, which reads 4.38:1 on white and 3.85:1 on --s2 (#eaf1f8). It maps to --color-text-tertiary / --color-text-muted, so it paints helper text, units and table captions across the tool suite - all of it just under AA on the default light appearance. #576c83 clears 4.5:1 on every light surface here (4.75:1 on the deepest, --s2) without shifting the hue. */ body.light,html.light,html.light body{--bg:#f3f6fa;--s0:#fff;--s1:#f7f9fc;--s2:#eaf1f8;--bd:rgba(16,44,77,.12);--bd2:rgba(16,44,77,.22);--tx:#17253a;--tx2:#405b78;--tx3:#576c83;--blue:#0078d4;--green:#107c10;--amber:#ca5010;--red:#d13438;--indigo:#106ebe;color-scheme:light} /* CoLateral Dark. Previously this palette was implicit: pages hardcoded it in their own :root and "dark" meant "no theme applied". Now that every page bases itself on the light palette, dark has to be a real theme like the named ones below, or picking Dark would simply leave the page light. */ body[data-theme="dark"],html[data-theme="dark"],html[data-theme="dark"] body{--bg:#070c12;--s0:#0c1219;--s1:#111922;--s2:#16212e;--bd:rgba(255,255,255,.075);--bd2:rgba(255,255,255,.14);--tx:#dce7f0;--tx2:#8ca5bc;--tx3:#536b82;--blue:#4da6ff;--green:#1ed96b;--amber:#f0b429;--red:#f05050;--indigo:#7c5cff;color-scheme:dark} body[data-theme="absolutely"],html[data-theme="absolutely"],html[data-theme="absolutely"] body{--bg:#0a0a0f;--s0:#101018;--s1:#161620;--s2:#1e1e2a;--bd:rgba(255,255,255,.06);--bd2:rgba(255,255,255,.12);--tx:#e0dfe6;--tx2:#9896a8;--tx3:#6b6880;--blue:#8bc6fa;--green:#34d399;--amber:#fbbf24;--red:#f87171;--indigo:#818cf8} body[data-theme="codex"],html[data-theme="codex"],html[data-theme="codex"] body{--bg:#080810;--s0:#0e0e18;--s1:#141420;--s2:#1a1a28;--bd:rgba(255,255,255,.07);--bd2:rgba(255,255,255,.12);--tx:#e2e0ea;--tx2:#9492a6;--tx3:#686680;--blue:#6c8cff;--green:#4ade80;--amber:#fbbf24;--red:#ef4444;--indigo:#8bc6fa} body[data-theme="dracula"],html[data-theme="dracula"],html[data-theme="dracula"] body{--bg:#282a36;--s0:#21222c;--s1:#343746;--s2:#424450;--bd:rgba(255,255,255,.07);--bd2:rgba(255,255,255,.15);--tx:#f8f8f2;--tx2:#bcc2cd;--tx3:#6272a4;--blue:#bd93f9;--green:#50fa7b;--amber:#f1fa8c;--red:#ff5555;--indigo:#ff79c6} body[data-theme="catppuccin"],html[data-theme="catppuccin"],html[data-theme="catppuccin"] body{--bg:#1e1e2e;--s0:#181825;--s1:#313244;--s2:#45475a;--bd:rgba(255,255,255,.07);--bd2:rgba(255,255,255,.15);--tx:#cdd6f4;--tx2:#a6adc8;--tx3:#6c7086;--blue:#89b4fa;--green:#a6e3a1;--amber:#f9e2af;--red:#f38ba8;--indigo:#cba6f7} body[data-theme="nord"],html[data-theme="nord"],html[data-theme="nord"] body{--bg:#2e3440;--s0:#272c36;--s1:#3b4252;--s2:#434c5e;--bd:rgba(255,255,255,.07);--bd2:rgba(255,255,255,.15);--tx:#eceff4;--tx2:#d8dee9;--tx3:#7b88a1;--blue:#88c0d0;--green:#a3be8c;--amber:#ebcb8b;--red:#bf616a;--indigo:#b48ead} body[data-theme="tokyonight"],html[data-theme="tokyonight"],html[data-theme="tokyonight"] body{--bg:#1a1b26;--s0:#16161e;--s1:#24283b;--s2:#2f334d;--bd:rgba(255,255,255,.06);--bd2:rgba(255,255,255,.14);--tx:#c0caf5;--tx2:#9aa5ce;--tx3:#565f89;--blue:#7aa2f7;--green:#9ece6a;--amber:#e0af68;--red:#f7768e;--indigo:#bb9af7} body[data-theme="gruvbox"],html[data-theme="gruvbox"],html[data-theme="gruvbox"] body{--bg:#282828;--s0:#1d2021;--s1:#3c3836;--s2:#504945;--bd:rgba(255,255,255,.07);--bd2:rgba(255,255,255,.15);--tx:#ebdbb2;--tx2:#d5c4a1;--tx3:#928374;--blue:#83a598;--green:#b8bb26;--amber:#fabd2f;--red:#fb4934;--indigo:#d3869b} body[data-theme="everforest"],html[data-theme="everforest"],html[data-theme="everforest"] body{--bg:#2d353b;--s0:#272e33;--s1:#374247;--s2:#4f585e;--bd:rgba(255,255,255,.06);--bd2:rgba(255,255,255,.14);--tx:#d3c6aa;--tx2:#9da9a0;--tx3:#7a8478;--blue:#a7c080;--green:#83c092;--amber:#dbbc7f;--red:#e67e80;--indigo:#d699b6} body[data-theme="github"],html[data-theme="github"],html[data-theme="github"] body{--bg:#0d1117;--s0:#010409;--s1:#161b22;--s2:#21262d;--bd:rgba(255,255,255,.08);--bd2:rgba(255,255,255,.15);--tx:#e6edf3;--tx2:#7d8590;--tx3:#6e7681;--blue:#2f81f7;--green:#3fb950;--amber:#d29922;--red:#f85149;--indigo:#a371f7} body[data-theme="ayu"],html[data-theme="ayu"],html[data-theme="ayu"] body{--bg:#1f2430;--s0:#191e2a;--s1:#232834;--s2:#2d3441;--bd:rgba(255,255,255,.06);--bd2:rgba(255,255,255,.14);--tx:#cccac2;--tx2:#8a9199;--tx3:#5c6773;--blue:#5ccfe6;--green:#87d96c;--amber:#ffd173;--red:#ff6666;--indigo:#d4bfff} body[data-theme="onedark"],html[data-theme="onedark"],html[data-theme="onedark"] body{--bg:#282c34;--s0:#21252b;--s1:#2c313a;--s2:#3b4048;--bd:rgba(255,255,255,.07);--bd2:rgba(255,255,255,.15);--tx:#d7dae0;--tx2:#9097a3;--tx3:#5c6370;--blue:#61afef;--green:#98c379;--amber:#e5c07b;--red:#e06c75;--indigo:#c678dd} body[data-theme="monokai"],html[data-theme="monokai"],html[data-theme="monokai"] body{--bg:#272822;--s0:#1e1f1c;--s1:#3e3d32;--s2:#49483e;--bd:rgba(255,255,255,.07);--bd2:rgba(255,255,255,.15);--tx:#f8f8f2;--tx2:#cfcfc2;--tx3:#75715e;--blue:#66d9ef;--green:#a6e22e;--amber:#e6db74;--red:#f92672;--indigo:#ae81ff} body[data-theme="rosepine"],html[data-theme="rosepine"],html[data-theme="rosepine"] body{--bg:#191724;--s0:#1f1d2e;--s1:#26233a;--s2:#393552;--bd:rgba(255,255,255,.06);--bd2:rgba(255,255,255,.14);--tx:#e0def4;--tx2:#908caa;--tx3:#6e6a86;--blue:#c4a7e7;--green:#9ccfd8;--amber:#f6c177;--red:#eb6f92;--indigo:#ebbcba} body[data-theme="solarized"],html[data-theme="solarized"],html[data-theme="solarized"] body{--bg:#002b36;--s0:#073642;--s1:#0a3f4d;--s2:#0e4b5a;--bd:rgba(255,255,255,.07);--bd2:rgba(255,255,255,.15);--tx:#e5e3cf;--tx2:#93a1a1;--tx3:#586e75;--blue:#268bd2;--green:#859900;--amber:#b58900;--red:#dc322f;--indigo:#6c71c4} body[data-theme="linear"],html[data-theme="linear"],html[data-theme="linear"] body{--bg:#08090a;--s0:#0f1011;--s1:#1c1c1f;--s2:#232326;--bd:rgba(255,255,255,.07);--bd2:rgba(255,255,255,.15);--tx:#f7f8f8;--tx2:#8a8f98;--tx3:#62666d;--blue:#5e6ad2;--green:#4cb782;--amber:#f2c94c;--red:#eb5757;--indigo:#7b81e0} /* * Beam Buddy, the brand mark, follows the accent. * ------------------------------------------------------------------------- * The mark (src/components/brand/beamyMark.js, hand-copied into tools/topbar.js, * src/scripts/toolSidebar.js and index.html) paints every pixel through a * --beamy-mark-* variable with an Office Blue hex fallback. Nothing ever set * those variables, so on Dracula the wordmark's "Lateral" went purple while the * mascot beside it stayed blue. * * Deriving the whole sprite from --blue keeps him in step with the accent on * every theme, present and future, without a per-theme table. The ratios * reproduce the original Office Blue tones almost exactly when --blue is * #0078d4, so the default appearance is unchanged. The hat stays white - it is * a hard hat, not an accent - but its shaded face picks up the accent tint. * * Declared on html as well as body because tools/theme-boot.js stamps the theme * onto before exists; the body rule wins for anything inside it. */ html,body{ --beamy-mark-body:var(--blue,#0078d4); --beamy-mark-hi:color-mix(in srgb,var(--blue,#0078d4) 55%,#fff); --beamy-mark-shadow:color-mix(in srgb,var(--blue,#0078d4) 72%,#000); --beamy-mark-ink:color-mix(in srgb,var(--blue,#0078d4) 30%,#07131f); --beamy-mark-hat:#fff; --beamy-mark-hatsh:color-mix(in srgb,var(--blue,#0078d4) 30%,#fff); --beamy-mark-plate:color-mix(in srgb,var(--blue,#0078d4) 14%,transparent); } /* * Standard steel-member colour. * ------------------------------------------------------------------------- * Every tool that draws a steel member (column, beam, plate, angle, HSS) * paints it with this titanium gray via CLCanvasTheme.colors().steel so * steel looks the same across the whole suite. Dark themes share one value; * the light appearance uses a darker gray so members stay legible on white. */ body{--steel:#98a3b2} body.light{--steel:#64748b} /* * Readable text on an accent fill. * ------------------------------------------------------------------------- * Buttons that fill with --blue used to hardcode white text. That only holds * on the two palettes whose accent is dark enough to carry it: Office Blue * (#0078d4, 4.53:1) and Linear (#5e6ad2, 4.70:1). Every other theme - and the * default CoLateral Dark - uses a pastel accent where white lands between * 1.65:1 (Monokai) and 3.75:1 (GitHub), so a filled button read as a pale * smear rather than a label. * * The default is the theme's own background colour, i.e. a knockout label. * That clears AA against every pastel accent, from 5.05:1 on GitHub up to * 10.98:1 on Monokai, and needs no per-theme value. Light and Linear opt back * into white. Solarized is the one exception: its own --bg (#002b36) only * reaches 4.08:1 against #268bd2, so it takes a deeper ink. * * Use it as `color:var(--on-blue,#fff)` - the fallback keeps the old * behaviour on any page that has not loaded this file. */ body{--on-blue:var(--bg,#0c1219)} body.light,html.light,html.light body{--on-blue:#fff} body[data-theme="linear"],html[data-theme="linear"],html[data-theme="linear"] body{--on-blue:#fff} body[data-theme="solarized"],html[data-theme="solarized"],html[data-theme="solarized"] body{--on-blue:#001a21} /* * Tool-vocabulary alias layer. * ------------------------------------------------------------------------- * The blocks above only override the dashboard's short variable names * (--bg, --s0..--s2, --bd/--bd2, --tx..--tx3, --blue/--green/--amber/ * --red/--indigo). Most standalone tools - and the Tool UI Standard * (src/components/tool-standard/tool-styles.css) - paint with a *different* * vocabulary (--panel, --panel2, --line, --text, --muted, --accent, * --good/--pass, --bad/--fail, --warn, plus the longer --color-* names). * Because those names were never remapped, picking a theme only repainted * the page background while panels/text/accents stayed on each tool's * hardcoded dark palette - i.e. the tool appeared "stuck" on CoLateral Dark. * * The rule below re-expresses the tool vocabulary in terms of the active * palette so any tool using these names reskins automatically. It is scoped * to non-default themes (every selectable theme except CoLateral Dark) so * each tool keeps its own bespoke dark palette as the default look - only an * explicitly chosen theme triggers the remap. Fallbacks keep things sane if * a palette block omits a colour. */ body[data-theme]:not([data-theme="dark"]), html[data-theme]:not([data-theme="dark"]), html[data-theme]:not([data-theme="dark"]) body { /* surfaces */ --panel: var(--s1); --panel2: var(--s0); --panel-2: var(--s0); --panel3: var(--s2); --canvas: var(--bg); --canvas-bg: var(--bg); /* form-control surface (inputs / selects / textareas). Tools that used to hardcode a near-black field background reference this instead, with the old hex as the var() fallback, so the default CoLateral Dark look is unchanged and every selectable theme (light included) repaints fields. */ --field: var(--s0); /* lines / borders */ --line: var(--bd2); --line2: var(--bd); /* text */ --text: var(--tx); --muted: var(--tx2); --dim: var(--tx2); /* --subtle is a *surface* colour across the tool suite (input / button backgrounds in frame-analyser and the truss-frame designers) - every use in the repo is background:var(--subtle). Mapping it to a text colour painted form fields slate-dark in light themes, so alias it to a surface. */ --subtle: var(--s1); /* accents + status */ --accent: var(--blue); --good: var(--green); --ok: var(--green); --pass: var(--green); --bad: var(--red); --fail: var(--red); --warn: var(--amber); /* Tool UI Standard long names (--color-*) */ --color-bg: var(--bg); --color-surface-0: var(--s0); --color-surface-1: var(--s1); --color-surface-2: var(--s2); --color-surface-3: var(--s2); --color-border: var(--bd); --color-border-active: var(--bd2); --color-border-focus: var(--bd2); --color-text-primary: var(--tx); --color-text-secondary: var(--tx2); --color-text-tertiary: var(--tx3); --color-text-muted: var(--tx3); --color-primary: var(--blue); --color-success: var(--green); --color-warning: var(--amber); --color-error: var(--red); --color-info: var(--indigo); /* Structural Schematic Designer (steel-frame) vocabulary */ --topbar: var(--s0); --control-bg: var(--s1); --control-bg-2: var(--s1); --control-hover: var(--s2); --control-active: var(--s2); --floating-panel: var(--s0); --elevation-grid: var(--bd); --grid-major: var(--bd); --section-heading: var(--tx2); --advice-text: var(--tx); --column-stroke: var(--s0); --label-stroke: var(--s0); --accent-2: var(--amber); } /* * Marketing + public-site vocabulary alias layer. * ------------------------------------------------------------------------- * The standalone marketing / information pages (about, agents, security, * careers, customer-stories, tools, and every src/public page * such as community, contact, docs, privacy, terms, request-access, …) paint * with their own vocabulary: --ink (primary text), --quiet (tertiary text), * --paper/--paper2 (panels), --bg2 (deep surface), --line-strong (active * border), --blue2, and - on public.css - --surface/--surface-2/--blue-2. * Those names were never remapped, so picking a theme left these pages stuck * on the bespoke CoLateral Dark palette. * * The block below re-expresses that vocabulary in terms of the active palette * so a signed-in user's chosen theme reskins these pages too. It is gated on * a `data-site` marker (only pages opted in via ), so the * dashboard/tools are untouched. CoLateral Dark is included: the palette block * above already darkens --bg on these pages, so excluding dark from the remap * left the light-palette --ink (#182130) on a #070c12 canvas - near-black text * on near-black. Pages that never load themes.css keep the original look. */ body[data-site][data-theme] { /* text */ --ink: var(--tx); --muted: var(--tx2); --quiet: var(--tx3); /* surfaces */ --paper: var(--s1); --paper2: var(--s2); --bg2: var(--s0); --surface: var(--s1); --surface-2: var(--s0); /* lines / borders */ --line: var(--bd); --line-strong: var(--bd2); /* accents. --blue-ink is the deep link/eyebrow ink on public.css and legal.css; unmapped it stayed #005a9e navy on every dark canvas. */ --blue2: var(--blue); --blue-2: var(--blue); --blue-ink: var(--blue); } /* On the light appearance the accent (#0078d4) is only 4.03:1 on white, so the link ink keeps its deeper navy - the value --blue-ink was made for. */ body[data-site][data-theme="light"] { --blue-ink: #005a9e; /* repaint the page base (these pages bake dark gradient stops into body{background}, so override the shorthand to the themed surface) */ background: var(--bg); color: var(--ink); } /* Reskin the shared dark chrome (nav / footer / CTA banners) whose backgrounds are hardcoded rather than variable-driven. */ body[data-site][data-theme] .nav, body[data-site][data-theme] .public-nav, body[data-site][data-theme] .site-footer, body[data-site][data-theme] .footer { background: var(--s0); border-color: var(--bd); } /* The src/public footer sits on the shared canvas backdrop rather than a surface of its own, so it takes the border colour but keeps its transparency. */ body[data-site][data-theme] .public-footer { border-color: var(--bd); } body[data-site][data-theme] .cta { background: var(--s1); border-color: var(--bd); } /* Cards and panels on the src/public pages bake dark gradients into background shorthands; repaint them so light themes stay readable. */ body[data-site][data-theme] .card, body[data-site][data-theme] .form-panel, body[data-site][data-theme] .policy-panel, body[data-site][data-theme] .status-panel, body[data-site][data-theme] .roadmap-column { background: var(--s1); border-color: var(--bd); box-shadow: none; } /* The footer wordmark carries the logo lockup on every appearance: "Co" in ink, "Lateral" in the accent blue, matching the nav brand (.public-brand-word) and the mark itself. public.css already paints it that way from --ink / --blue, both of which the alias block above remaps per theme, so no override here. */ /* * Number inputs: hide the native up/down spinner arrows product-wide. * The arrows crowd the compact input fields and nudge values one step at a * time; engineers type exact values instead. Loaded on every tool page via * tools/topbar.js, so this removes the spinners across the whole tool suite. * (a page that does not load this file must carry the same rule inline.) */ input[type="number"] { -moz-appearance: textfield; appearance: textfield; } input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* * Interface scale. * ------------------------------------------------------------------------- * src/**\/*.css holds ~3600 px literals and one rem, so a rem retrofit is not * available. CSS `zoom` on the root scales every one of those literals at * once, including the canvas plane, and unlike `transform: scale()` it also * scales the layout viewport, so nothing overflows sideways. * * tools/theme-boot.js stamps the saved value onto synchronously so the * first paint is already at the chosen scale. Anything that converts client * coordinates into world coordinates must derive the effective scale from the * DOM (getBoundingClientRect().width / offsetWidth) rather than assuming 1; * see screenToWorld() in src/canvas/canvasWorkspace.js. */ :root{--cl-ui-scale:1} html{zoom:var(--cl-ui-scale)} /* * Focus ring. * ------------------------------------------------------------------------- * One visible ring for keyboard users on every page that loads this file. * --focus is a per-palette token so the ring keeps contrast against the * surface it lands on rather than disappearing into a dark accent. */ :root{--focus:#005a9e} body.light,html.light,html.light body{--focus:#005a9e} body[data-theme="dark"],html[data-theme="dark"],html[data-theme="dark"] body{--focus:#7cc0ff} body[data-theme="absolutely"],html[data-theme="absolutely"],html[data-theme="absolutely"] body{--focus:#8bc6fa} body[data-theme="codex"],html[data-theme="codex"],html[data-theme="codex"] body{--focus:#9db2ff} body[data-theme="dracula"],html[data-theme="dracula"],html[data-theme="dracula"] body{--focus:#d6b8ff} body[data-theme="catppuccin"],html[data-theme="catppuccin"],html[data-theme="catppuccin"] body{--focus:#a6c8ff} body[data-theme="nord"],html[data-theme="nord"],html[data-theme="nord"] body{--focus:#a3d4e2} body[data-theme="tokyonight"],html[data-theme="tokyonight"],html[data-theme="tokyonight"] body{--focus:#9cbcff} body[data-theme="gruvbox"],html[data-theme="gruvbox"],html[data-theme="gruvbox"] body{--focus:#a8c4b8} body[data-theme="everforest"],html[data-theme="everforest"],html[data-theme="everforest"] body{--focus:#c3dba0} body[data-theme="github"],html[data-theme="github"],html[data-theme="github"] body{--focus:#58a6ff} body[data-theme="ayu"],html[data-theme="ayu"],html[data-theme="ayu"] body{--focus:#8ae0f2} body[data-theme="onedark"],html[data-theme="onedark"],html[data-theme="onedark"] body{--focus:#8cc6f5} body[data-theme="monokai"],html[data-theme="monokai"],html[data-theme="monokai"] body{--focus:#9beaf7} body[data-theme="rosepine"],html[data-theme="rosepine"],html[data-theme="rosepine"] body{--focus:#d9c4f2} body[data-theme="solarized"],html[data-theme="solarized"],html[data-theme="solarized"] body{--focus:#57a8e0} body[data-theme="linear"],html[data-theme="linear"],html[data-theme="linear"] body{--focus:#8f98e8} :focus-visible{outline:2px solid var(--focus);outline-offset:2px} /* * Reduce motion. * ------------------------------------------------------------------------- * The Appearance pane offers System / Full motion / Reduced, stored in * colateralAi.displaySettings.v1 and stamped onto as data-motion by * tools/theme-boot.js before first paint. * * "Reduced" is enforced here, product-wide, rather than by editing the 56 * existing `prefers-reduced-motion` guards: those guards are spread across 15 * files including inline