/* * loom-tokens.css -- the Loom design-system token vocabulary. * * This is the SHARED CONTRACT every Loom package and project styles * against: a small, stable set of `--loom-*` CSS custom properties. * Packages (The Stacks, The Round Table, …) reference these tokens; a * project sets them once and every package inherits the look. * * The values below are the DEFAULT GRAYSCALE THEME -- a deliberately * neutral skin so anything ships looking coherent before a project does * any theming. It is the skin, not the standard: override any token by * redefining it under `:root` in your own stylesheet (loaded after this * one). The vocabulary (the token NAMES + meanings) is the standard and * is intended to stay small and stable; add project-specific tokens in * your own namespace, not here. * * Override example (a project's own theme.css, loaded after this file): * :root { --loom-accent: #3b82f6; --loom-accent-text: #fff; --loom-radius: 4px; } * * LIGHT THEME: a second, medium-light skin lives in the * `:root[data-theme="light"]` block at the bottom of this file. It is opt-in * and SELECTABLE — set `data-theme="light"` on to switch. The shared * runtime `loom-theme.js` manages a three-state preference (auto / light / * dark), persists it, and follows the OS when set to auto. Bare `:root` (no * attribute, or `data-theme="dark"`) is the medium-dark default. The light * block only overrides the tokens that genuinely differ; unlisted tokens * (fonts, radius) cascade from the default. Project overrides still belong in * your own stylesheet, loaded after this file. */ /* The Loom icon standard (.loom-icon, Tabler sprite). @import must precede the font-faces below; it pulls the icon rules in for every surface that loads the tokens. (Surfaces that don't load tokens point their own icon-CSS slot at loom-icons.css directly — see the-stacks.) */ @import "loom-icons.css"; /* ── Brand typography (self-hosted, OFL) ─────────────────────────────── System 1: Manrope = identity (wordmark + headings), Inter = communication (body + UI), JetBrains Mono = building (code). Self-hosted woff2 under fonts/ — no external CDN. font-display:swap so text paints immediately in the fallback and re-renders when the face loads. */ @font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/manrope-500.woff2') format('woff2')} @font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/manrope-600.woff2') format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-400.woff2') format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/inter-500.woff2') format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/inter-600.woff2') format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/inter-700.woff2') format('woff2')} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/jetbrains-mono-400.woff2') format('woff2')} :root { /* ── Surfaces ──────────────────────────────────────────────────── */ --loom-bg: #131314; /* page background (furthest back) */ --loom-surface: #1c1c1f; /* raised panels, cards, inputs */ --loom-line: #2e2e32; /* borders, dividers, hairlines */ /* ── Text ──────────────────────────────────────────────────────── */ --loom-text: #e8e8ea; /* primary text */ --loom-muted: #9a9aa0; /* secondary / de-emphasized text */ /* Deeper surfaces (raised levels above --loom-surface) + hover state. */ --loom-surface-2: #232327; /* nested panels, popovers, menus */ --loom-surface-hover:#2a2a2e; /* hover/active row background */ /* Text depth: --loom-faint is the dimmest (timestamps, hints). */ --loom-faint: #76767c; /* tertiary / faint text */ /* ── Brand / accent ────────────────────────────────────────────── */ /* --loom-accent is a neutral light-gray by default -- projects override it with their brand color. --loom-accent-text is the readable foreground used ON TOP of a filled accent (buttons, badges). --loom-info is the shared CHROMATIC accent (links, focus, primary action) -- a real blue so surfaces aren't forced to a gray accent. --loom-text-inverse is white text ON saturated colored fills. --loom-info-fill is a SEPARATE, deeper blue for info-colored FILLS that carry --loom-text-inverse (primary buttons, active nav): on the dark skin --loom-info is intentionally a lighter blue so LINKS read on the near-black page (AA), which leaves white-on-it at only 3.26:1 — so fills use this darker shade instead (white-on-it = 5.17:1, AA). On the light skin the two coincide (#2563eb), so light inherits this value. */ --loom-accent: #c8c8cc; --loom-accent-text: #131314; --loom-info: #4f8cf8; /* links, focus, primary chromatic accent */ --loom-info-text: #7fa9fc; /* lighter, for info text on dark */ --loom-info-fill: #2563eb; /* deeper blue for fills w/ white text */ --loom-info-rgb: 79, 140, 248; /* for rgba() glows/tints */ --loom-text-inverse: #ffffff; /* text on saturated fills */ /* ── Status ────────────────────────────────────────────────────── */ /* Intentionally muted-but-real hues: a status color rendered in gray defeats its purpose. Override to grays if you want a pure-mono UI. Each has a -text (lighter, for text on dark) + -rgb (for rgba() glows/tints/borders at arbitrary opacity). */ --loom-ok: #6fae7e; /* success / positive */ --loom-ok-text: #8fce9e; --loom-ok-rgb: 111, 174, 126; --loom-warn: #c7a76a; /* warning / caution */ --loom-warn-text: #dcc28a; --loom-warn-rgb: 199, 167, 106; --loom-err: #c77b7b; /* error / danger */ --loom-err-text: #e09a9a; --loom-err-rgb: 199, 123, 123; /* ── Feature accents ───────────────────────────────────────────── */ /* Promoted from The Round Table so any surface can use a small palette of distinct accents (rooms, type badges, references). Each has a -text + -rgb companion like the status colors. */ --loom-purple: #a855f7; --loom-purple-text: #c084fc; --loom-purple-rgb: 168, 85, 247; --loom-teal: #38bdf8; --loom-teal-text: #7dd3fc; --loom-teal-rgb: 56, 189, 248; --loom-indigo: #818cf8; --loom-indigo-text: #a5b4fc; --loom-indigo-rgb: 99, 102, 241; --loom-gold: #c7a76a; --loom-gold-text: #d8bd8a; --loom-gold-rgb: 201, 168, 124; /* ── Overlays / elevation ──────────────────────────────────────── */ /* Black scrims (modals, lightboxes, shadows) + white hover tints + a shadow-rgb for box-shadow composition. */ --loom-scrim: rgba(0, 0, 0, 0.6); /* modal/lightbox backdrop */ --loom-overlay-1: rgba(0, 0, 0, 0.3); /* light scrim / soft shadow */ --loom-overlay-2: rgba(0, 0, 0, 0.5); --loom-overlay-3: rgba(0, 0, 0, 0.8); /* heavy scrim */ --loom-hover: rgba(255, 255, 255, 0.05); /* hover tint */ --loom-hover-strong: rgba(255, 255, 255, 0.08); --loom-hover-rgb: 255, 255, 255; /* white-tint composition */ --loom-shadow-rgb: 0, 0, 0; /* rgba(var(--loom-shadow-rgb), .3) */ --loom-muted-rgb: 154, 154, 160; /* neutral grey tint/border */ /* ── Typography (System 1) ─────────────────────────────────────── */ /* --loom-font = body + UI (Inter); --loom-font-brand = wordmark + headings (Manrope); --loom-font-mono = code (JetBrains Mono). Each keeps a system fallback stack so an unstyled/offline load still reads well. */ --loom-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --loom-font-brand: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --loom-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; /* ── Shape ─────────────────────────────────────────────────────── */ --loom-radius: 8px; /* default corner radius */ } /* * ════════════════════════════════════════════════════════════════════ * LIGHT THEME — the medium-light skin (selectable; mirrors the default). * * Applied when is set (by loom-theme.js or the * inline FOUC stub). This is NOT a mechanical lightness flip: tokens whose * meaning is dark-specific are re-derived, not inverted — * • the `*-text` companions are the LIGHT-mode siblings (DARKER, for text * ON a light surface — the dark theme's were lighter, for text on dark); * • `--loom-hover*` flip from WHITE tints to BLACK tints (a white tint is * invisible on a light surface); * • `--loom-accent` inverts to a dark neutral so it still reads against * the page; status/feature hues are deepened for AA contrast on light. * Medium-light (bg #f3f3f4), deliberately NOT stark white — the mirror of * the default's medium-dark #131314. Only changed tokens appear here; the * rest (fonts, radius) cascade from :root above. * ════════════════════════════════════════════════════════════════════ */ :root[data-theme="light"] { /* ── Surfaces ──────────────────────────────────────────────────── */ --loom-bg: #f3f3f4; /* page background (furthest back) */ --loom-surface: #ffffff; /* raised panels, cards, inputs */ --loom-line: #d9d9dd; /* borders, dividers, hairlines */ /* ── Text ──────────────────────────────────────────────────────── */ --loom-text: #1b1b1e; /* primary text (near-black, not #000) */ --loom-muted: #5d5d64; /* secondary (≈6.5:1 on #fff) */ --loom-surface-2: #f7f7f9; /* nested panels, popovers, menus */ --loom-surface-hover:#ececef; /* hover/active row background */ --loom-faint: #74747b; /* tertiary / faint (≈4.6:1 on #fff) */ /* ── Brand / accent ────────────────────────────────────────────── */ /* Accent inverts to a dark neutral so it reads on a light page; its readable foreground flips to white. --loom-info deepens to a blue that hits AA on white; --loom-info-text is darker still (text on light). --loom-text-inverse stays white (it sits on saturated fills). */ --loom-accent: #3a3a3e; --loom-accent-text: #ffffff; --loom-info: #2563eb; /* links, focus, primary chromatic accent */ --loom-info-text: #1d4ed8; /* darker, for info text on light */ --loom-info-rgb: 37, 99, 235; --loom-text-inverse: #ffffff; /* ── Status ────────────────────────────────────────────────────── */ /* Deepened hues so the color reads as text on a light surface; the -text siblings are the on-light text shades, -rgb match the base. */ --loom-ok: #2e7d46; --loom-ok-text: #1f7a3d; --loom-ok-rgb: 46, 125, 70; --loom-warn: #9a6f15; --loom-warn-text: #845f10; --loom-warn-rgb: 154, 111, 21; --loom-err: #c0392b; --loom-err-text: #b32d20; --loom-err-rgb: 192, 57, 43; /* ── Feature accents ───────────────────────────────────────────── */ /* Deepened so each reads on a light surface; -text a touch darker. */ --loom-purple: #8b35d6; --loom-purple-text: #7c2fc0; --loom-purple-rgb: 139, 53, 214; --loom-teal: #0e7faf; --loom-teal-text: #0b6f9a; --loom-teal-rgb: 14, 127, 175; --loom-indigo: #4f55d6; --loom-indigo-text: #4348c0; --loom-indigo-rgb: 79, 85, 214; --loom-gold: #9a6f15; --loom-gold-text: #845f10; --loom-gold-rgb: 154, 111, 21; /* ── Overlays / elevation ──────────────────────────────────────── */ /* Scrims stay black (a dim over content). Hover tints flip WHITE→BLACK (a white tint is invisible on light); shadow-rgb stays black. */ --loom-scrim: rgba(0, 0, 0, 0.5); --loom-overlay-1: rgba(0, 0, 0, 0.12); --loom-overlay-2: rgba(0, 0, 0, 0.25); --loom-overlay-3: rgba(0, 0, 0, 0.45); --loom-hover: rgba(0, 0, 0, 0.04); --loom-hover-strong: rgba(0, 0, 0, 0.07); --loom-hover-rgb: 0, 0, 0; --loom-shadow-rgb: 0, 0, 0; --loom-muted-rgb: 93, 93, 100; }