/* ============================================================================ atopile · design tokens ---------------------------------------------------------------------------- The single source of truth for color, type, space, and elevation across every atopile surface — the IDE, the Hive, the website, the iOS app. ONE skin — the forked Darcula — in TWO modes: dark (default) and light (opt-in, set data-theme="light" on ). Navy is retired. There is no separate marketing theme; "register" (warmth of copy + display font) is a voice axis, not a skin. Import this, then build with the variables. Don't hard-code a hex that already lives here. A value you can't find is a design conversation, not a one-off literal. See ./index.html for the reasoning behind every number. ============================================================================ */ :root { /* ---- The orange — one brand color, used sparingly --------------------- * * Orange is INK, never atmosphere: no glow, no halo, no tinted wash. If * it's orange it's a deliberate mark (text, a 1px line, a fill). Collapsed * duplicates — do NOT add a fourth: #FF6B35, #FF7142, #E04510. */ --orange: #F95015; /* canonical. buttons, accents, the mark */ --orange-hover: #FF6A33; /* hover / lighter on dark */ --orange-press: #D94410; /* pressed state only — NOT a second accent */ /* ===== DARK skin — the forked-Darcula greys (the default) ============== * * Straight from apps/ide/host/themes/atopile-dark-color-theme.json. */ --bg: #1F1F1F; /* page / shell — sidebars, status bar */ --bg-2: #2B2B2B; /* panel / editor pane — cards, code, raised */ --line: #363636; /* hover, current-line highlight */ --border: #3B3B3B; /* hairlines, dividers */ --border-deep: #141414; /* strong dividers */ --fg: #D4D4D4; /* primary body text */ --fg-2: #BBBBBB; /* secondary text */ --muted: #8A8A8A; /* descriptions */ --subtle: #606366; /* captions, line numbers, disabled */ --ink: #FFFFFF; /* headings / brightest text */ --field: #5A5A5A; /* input borders */ --code-bg: rgba(0,0,0,0.28); /* inline-code chip */ /* ---- Status / semantic (Darcula-derived; = the syntax palette) -------- * * One meaning per color — a warning reads the same in the UI as in code. */ --red: #FF6B68; /* error / destructive */ --green: #629755; /* success / added */ --yellow: #FFC66D; /* highlight / changed */ --blue: #6897BB; /* info / numbers */ --purple: #9876AA; /* members / secondary accent */ /* ---- Editor / syntax — ALWAYS the shipped "atopile Dark" -------------- * * Literal greys; the editor stays dark even when the UI is in light mode. * * Darcula syntax kept verbatim; orange leaks in only for ato's own words. */ --editor-bg: #2B2B2B; --editor-chrome: #1F1F1F; --editor-line: #363636; --editor-fg: #D4D4D4; --syntax-comment: #808080; /* italic */ --syntax-keyword: #CC7832; /* import, module, new, if (bold) */ --syntax-ato: #F95015; /* trait, #pragma, the `::` separator (bold) */ --syntax-string: #6A8759; --syntax-number: #6897BB; /* numbers + units (5V, 3.3V, 10kohm) */ --syntax-type: #FFC66D; /* module names, types, functions */ --syntax-member: #9876AA; /* .properties, .members */ /* ---- Type ------------------------------------------------------------- * * JetBrains Mono is the SPINE — on every surface, always for code/data, * * and the full UI face wherever the engineering register rules (the IDE * * webviews, this handbook). Barlow is the friendlier display sans for the * * marketing register only. Which display sans (Barlow / Space Grotesk / * * Inter) is still being settled — see index.html §04. */ --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --font-body: var(--font-mono); /* primary face = mono */ --font-display: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; /* Type scale (px). Display sizes are for marketing headlines only. */ --fs-caption: 12px; --fs-sm: 13px; --fs-body: 14px; --fs-lead: 17px; --fs-h3: 20px; --fs-h2: 26px; --fs-display: 42px; /* ---- Space (the 3 · 6 · 10 · 14 · 20 scale) --------------------------- */ --space-xs: 3px; --space-sm: 6px; --space-md: 10px; --space-lg: 14px; --space-xl: 20px; --space-2xl: 34px; --space-3xl: 56px; /* ---- Radius (small. atopile is not a rounded brand) ------------------- */ --radius-sm: 3px; --radius-md: 5px; --radius-lg: 6px; --radius-pill: 999px; /* badges only — prefer ordered lists over pills */ /* ---- Elevation (sparing, never glossy) -------------------------------- */ --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.40); --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.50); /* ---- Motion (quick, never showy) -------------------------------------- */ --ease: cubic-bezier(0.2, 0, 0, 1); --dur-fast: 0.10s; --dur-normal: 0.15s; } /* ===== LIGHT skin — IntelliJ Light (the Darcula fork's daylight twin) ====== Opt-in: set data-theme="light" on . Dark is the default; light exists because some users insist — fully supported, mildly judged. ONLY THE GREYS FLIP. The accent (--orange) and the status colors (--red, --green, --yellow, --blue, --purple) are identical in both modes — they're not redefined here, so they inherit the dark values above. The editor / syntax tokens also never change: the editor always shows "atopile Dark". */ :root[data-theme="light"] { --bg: #F7F8FA; --bg-2: #FFFFFF; --line: #ECEDF1; --border: #D4D7E0; --border-deep: #B8BCC8; --fg: #1F1F1F; --fg-2: #393B40; --muted: #6C707E; --subtle: #9AA0AE; --ink: #141414; /* neutral near-black — no navy tint */ --field: #C9CCD6; --code-bg: #2B2B2B; /* inline code stays a dark chip, like the editor */ --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.10); --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.14); }