/* * 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 dashboard.html - 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. * ------------------------------------------------------------------------- */ 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:#637b94;--blue:#0078d4;--green:#107c10;--amber:#ca5010;--red:#d13438;--indigo:#106ebe;color-scheme:light} 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} /* * 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} /* * 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 * BOTH a `data-site` marker (only pages opted in via ) and * a non-default theme, so the dashboard/tools are untouched and signed-out * visitors keep the original marketing look on CoLateral Dark. */ body[data-site][data-theme]:not([data-theme="dark"]) { /* 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 */ --blue2: var(--blue); --blue-2: var(--blue); /* 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]:not([data-theme="dark"]) .nav, body[data-site][data-theme]:not([data-theme="dark"]) .public-nav, body[data-site][data-theme]:not([data-theme="dark"]) .site-footer, body[data-site][data-theme]:not([data-theme="dark"]) .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]:not([data-theme="dark"]) .public-footer { border-color: var(--bd); } body[data-site][data-theme]:not([data-theme="dark"]) .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]:not([data-theme="dark"]) .card, body[data-site][data-theme]:not([data-theme="dark"]) .form-panel, body[data-site][data-theme]:not([data-theme="dark"]) .policy-panel, body[data-site][data-theme]:not([data-theme="dark"]) .status-panel, body[data-site][data-theme]:not([data-theme="dark"]) .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. * (dashboard.html does not load this file and carries 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; }