/* * Terminal Workbench — design tokens (vendored) * Source: https://github.com/Real-Fruit-Snacks/terminal-workbench-design-system * * Dark is the default; light applies automatically via prefers-color-scheme, * or explicitly with data-theme="light" / data-theme="dark" on . */ /* ---------- Dark (default) ---------- */ :root, :root[data-theme="dark"] { color-scheme: dark; --twb-accent: #63f2ab; --twb-accent-alt: #6bdcff; --twb-warm: #f0c674; --twb-red: #ff6e7a; --twb-orange: #f7a35c; --twb-violet: #b78cff; --twb-bg-0: #090c0d; --twb-bg-1: #0e1214; --twb-bg-2: #13191c; --twb-bg-3: #182024; --twb-bg-4: #202a2f; --twb-border: #2a363d; --twb-border-strong: #39484f; --twb-text-normal: #dce4df; --twb-text-soft: #b4c3bd; --twb-text-muted: #879994; --twb-text-faint: #63736f; --twb-text-on-accent: #07100d; --twb-selection: #63f2ab33; --twb-tag-bg: #63f2ab21; --twb-tag-border: #63f2ab47; --twb-highlight: #f0c67438; --twb-focus-ring: #63f2ab2e; --twb-glow: 0 0 24px #63f2ab30; } /* ---------- Light (auto via system preference) ---------- */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; --twb-accent: #007a4d; --twb-accent-alt: #006f9e; --twb-warm: #a46600; --twb-red: #c8324c; --twb-orange: #b65800; --twb-violet: #7357b8; --twb-bg-0: #f5f7f4; --twb-bg-1: #edf2ee; --twb-bg-2: #e2eae5; --twb-bg-3: #d6e1db; --twb-bg-4: #c8d5cf; --twb-border: #bfcbc5; --twb-border-strong: #9daea7; --twb-text-normal: #17201d; --twb-text-soft: #34443f; --twb-text-muted: #60706a; --twb-text-faint: #81918a; --twb-text-on-accent: #f9fbf8; --twb-selection: #007a4d2b; --twb-tag-bg: #007a4d21; --twb-tag-border: #007a4d47; --twb-highlight: #a4660038; --twb-focus-ring: #007a4d2e; --twb-glow: 0 0 24px #007a4d24; } } /* ---------- Light (explicit opt-in) ---------- */ :root[data-theme="light"] { color-scheme: light; --twb-accent: #007a4d; --twb-accent-alt: #006f9e; --twb-warm: #a46600; --twb-red: #c8324c; --twb-orange: #b65800; --twb-violet: #7357b8; --twb-bg-0: #f5f7f4; --twb-bg-1: #edf2ee; --twb-bg-2: #e2eae5; --twb-bg-3: #d6e1db; --twb-bg-4: #c8d5cf; --twb-border: #bfcbc5; --twb-border-strong: #9daea7; --twb-text-normal: #17201d; --twb-text-soft: #34443f; --twb-text-muted: #60706a; --twb-text-faint: #81918a; --twb-text-on-accent: #f9fbf8; --twb-selection: #007a4d2b; --twb-tag-bg: #007a4d21; --twb-tag-border: #007a4d47; --twb-highlight: #a4660038; --twb-focus-ring: #007a4d2e; --twb-glow: 0 0 24px #007a4d24; } /* ---------- Mode-independent tokens ---------- */ :root { --twb-font-mono: "Berkeley Mono", "JetBrains Mono", "Cascadia Code", "IBM Plex Mono", SFMono-Regular, Consolas, monospace; --twb-font-ui: Inter, "SF Pro Text", "Segoe UI", system-ui, sans-serif; --twb-line-height: 1.7; --twb-line-height-tight: 1.45; --twb-radius-s: 4px; --twb-radius-m: 6px; --twb-radius-l: 8px; --twb-radius-pill: 999px; --twb-border-width: 1px; --twb-shadow-pane: 0 20px 60px rgba(0, 0, 0, 0.22); --twb-transition: 120ms ease; }