/* ============================================================================ BLACKBRIAR THEME SYSTEM Cinematic console palette — inspired by Bourne / Matrix / Terminator. Two themes, each in dark + light. Portable design tokens. USAGE ----- 1. Load this file + the fonts (Share Tech Mono, IBM Plex Mono). 2. Put data attributes on any container (or ):
…
…
…
… 3. Reference tokens with var(--bb-*). Example: background: var(--bb-bg-1); color: var(--bb-fg); border: 1px solid var(--bb-line); box-shadow: 0 0 12px rgba(var(--bb-glow), .5); TOKEN ROLES ----------- --bb-bg-0 app canvas / deepest background --bb-bg-1 panel / surface --bb-bg-2 raised surface, headers --bb-line borders, dividers, grid --bb-fg primary text --bb-fg-dim muted / secondary text --bb-accent primary brand accent (interactive, highlights, focus) --bb-alert alert / danger accent (the "Terminator" red — warnings, hostiles) --bb-good success / secure state --bb-warn caution state --bb-bad error / critical (same hue family as alert) --bb-glow accent as "r,g,b" for rgba() glows & shadows --bb-font-display headings, system labels --bb-font-mono body / data / terminal text ============================================================================ */ /* Shared (fonts apply to every theme/mode) */ [data-bb-theme] { --bb-font-display: 'Share Tech Mono', ui-monospace, monospace; --bb-font-mono: 'IBM Plex Mono', ui-monospace, monospace; } /* --------------------------------------------------------------------------- THEME 1 — BLACKBRIAR (Bourne × Terminator: cold steel-blue + alert red) --------------------------------------------------------------------------- */ [data-bb-theme="blackbriar"][data-bb-mode="dark"] { --bb-bg-0: #06080d; --bb-bg-1: #0c1018; --bb-bg-2: #141d2a; --bb-line: #20293a; --bb-fg: #bccadb; --bb-fg-dim: #586a7e; --bb-accent: #4aa3ff; --bb-alert: #ff3b3b; --bb-good: #38d39a; --bb-warn: #ffb43d; --bb-bad: #ff3b3b; --bb-glow: 74, 163, 255; } [data-bb-theme="blackbriar"][data-bb-mode="light"] { --bb-bg-0: #d8dde6; --bb-bg-1: #e8ecf2; --bb-bg-2: #f3f6fa; --bb-line: #c0c9d6; --bb-fg: #141c28; --bb-fg-dim: #5e6a7c; --bb-accent: #135fc4; --bb-alert: #c01f1f; --bb-good: #1c8a5a; --bb-warn: #9a6f0c; --bb-bad: #c01f1f; --bb-glow: 19, 95, 196; } /* --------------------------------------------------------------------------- THEME 2 — BLACKBRIAR·G (Construct palette: phosphor green + alert red) Same console structure as BLACKBRIAR; primary accent swapped to Matrix green. The alert red is kept for hostiles/warnings (the Terminator duality). --------------------------------------------------------------------------- */ [data-bb-theme="blackbriar-g"][data-bb-mode="dark"] { --bb-bg-0: #050a07; --bb-bg-1: #0a1410; --bb-bg-2: #11231a; --bb-line: #1c3328; --bb-fg: #9fe6bf; --bb-fg-dim: #4f7d68; --bb-accent: #00ff66; --bb-alert: #ff3b3b; --bb-good: #00ff66; --bb-warn: #ffb43d; --bb-bad: #ff3b3b; --bb-glow: 0, 255, 102; } [data-bb-theme="blackbriar-g"][data-bb-mode="light"] { --bb-bg-0: #d8e2dc; --bb-bg-1: #e8f0ec; --bb-bg-2: #f3f9f6; --bb-line: #c0d4ca; --bb-fg: #0f2a1e; --bb-fg-dim: #4f7d68; --bb-accent: #07873a; --bb-alert: #c01f1f; --bb-good: #07873a; --bb-warn: #9a6f0c; --bb-bad: #c01f1f; --bb-glow: 7, 135, 58; } /* --------------------------------------------------------------------------- THEME 3 — BLACKBRIAR·R (Nuclear red: Terminator machine-vision) Aggressive all-red console. Primary accent IS the red; amber carries the caution/secondary signal so the screen still reads at a glance. --------------------------------------------------------------------------- */ [data-bb-theme="blackbriar-r"][data-bb-mode="dark"] { --bb-bg-0: #0a0202; --bb-bg-1: #170505; --bb-bg-2: #280b0b; --bb-line: #431414; --bb-fg: #ffb4b4; --bb-fg-dim: #8a3a3a; --bb-accent: #ff1f1f; --bb-alert: #ff7a2f; --bb-good: #ffb938; --bb-warn: #ff9d2f; --bb-bad: #ff1f1f; --bb-glow: 255, 31, 31; } [data-bb-theme="blackbriar-r"][data-bb-mode="light"] { --bb-bg-0: #ecd9d9; --bb-bg-1: #f5e7e7; --bb-bg-2: #fcf2f2; --bb-line: #dcb6b6; --bb-fg: #360606; --bb-fg-dim: #8c5252; --bb-accent: #cc0000; --bb-alert: #c25410; --bb-good: #9a6f0c; --bb-warn: #a85a00; --bb-bad: #cc0000; --bb-glow: 204, 0, 0; } /* --------------------------------------------------------------------------- THEME 4 — BLACKBRIAR·A (Amber CRT: classic monochrome terminal) --------------------------------------------------------------------------- */ [data-bb-theme="blackbriar-a"][data-bb-mode="dark"] { --bb-bg-0: #0a0600; --bb-bg-1: #160f02; --bb-bg-2: #251a05; --bb-line: #3f2c0c; --bb-fg: #ffcf8a; --bb-fg-dim: #8a6624; --bb-accent: #ffb000; --bb-alert: #ff4d2f; --bb-good: #ffd000; --bb-warn: #ff8a1f; --bb-bad: #ff4d2f; --bb-glow: 255, 176, 0; } [data-bb-theme="blackbriar-a"][data-bb-mode="light"] { --bb-bg-0: #ece3d2; --bb-bg-1: #f5efe2; --bb-bg-2: #fcf8f0; --bb-line: #dccba8; --bb-fg: #3a2a08; --bb-fg-dim: #8a7340; --bb-accent: #a86a00; --bb-alert: #c0341a; --bb-good: #8a6f0c; --bb-warn: #a85a00; --bb-bad: #c0341a; --bb-glow: 168, 106, 0; } /* --------------------------------------------------------------------------- THEME 5 — BLACKBRIAR·C (Ice cyan: cold surveillance) --------------------------------------------------------------------------- */ [data-bb-theme="blackbriar-c"][data-bb-mode="dark"] { --bb-bg-0: #02080a; --bb-bg-1: #051418; --bb-bg-2: #082329; --bb-line: #0d3b44; --bb-fg: #a6e9f5; --bb-fg-dim: #357d8a; --bb-accent: #00e5ff; --bb-alert: #ff4d6a; --bb-good: #2fffd0; --bb-warn: #7fe0ff; --bb-bad: #ff4d6a; --bb-glow: 0, 229, 255; } [data-bb-theme="blackbriar-c"][data-bb-mode="light"] { --bb-bg-0: #d6e4e8; --bb-bg-1: #e6f0f3; --bb-bg-2: #f2f9fb; --bb-line: #bcd6dd; --bb-fg: #06282f; --bb-fg-dim: #4d7a85; --bb-accent: #0a7a8c; --bb-alert: #c01f3b; --bb-good: #0a8a78; --bb-warn: #2b86a8; --bb-bad: #c01f3b; --bb-glow: 10, 122, 140; } /* --------------------------------------------------------------------------- THEME 6 — BLACKBRIAR·V (Violet night: intercept mode) --------------------------------------------------------------------------- */ [data-bb-theme="blackbriar-v"][data-bb-mode="dark"] { --bb-bg-0: #07040d; --bb-bg-1: #100a1c; --bb-bg-2: #1c1230; --bb-line: #2e1f4a; --bb-fg: #d4bcf5; --bb-fg-dim: #6a4f9c; --bb-accent: #b06bff; --bb-alert: #ff4d91; --bb-good: #5ad3ff; --bb-warn: #ffb43d; --bb-bad: #ff4d91; --bb-glow: 176, 107, 255; } [data-bb-theme="blackbriar-v"][data-bb-mode="light"] { --bb-bg-0: #e2dcec; --bb-bg-1: #ece7f3; --bb-bg-2: #f6f3fb; --bb-line: #cabddd; --bb-fg: #241338; --bb-fg-dim: #6a5a8a; --bb-accent: #6a2fc4; --bb-alert: #c01f6a; --bb-good: #2b6fa8; --bb-warn: #9a6f0c; --bb-bad: #c01f6a; --bb-glow: 106, 47, 196; } /* --------------------------------------------------------------------------- THEME 7 — BLACKBRIAR·W (Phosphor white: sterile monochrome) --------------------------------------------------------------------------- */ [data-bb-theme="blackbriar-w"][data-bb-mode="dark"] { --bb-bg-0: #050608; --bb-bg-1: #0d0f13; --bb-bg-2: #171a20; --bb-line: #262b34; --bb-fg: #dfe6f0; --bb-fg-dim: #6b7585; --bb-accent: #eef3fb; --bb-alert: #ff4d4d; --bb-good: #9fe6bf; --bb-warn: #ffcf6a; --bb-bad: #ff4d4d; --bb-glow: 238, 243, 251; } [data-bb-theme="blackbriar-w"][data-bb-mode="light"] { --bb-bg-0: #d4d8de; --bb-bg-1: #e6e9ee; --bb-bg-2: #f4f6f9; --bb-line: #bcc2cc; --bb-fg: #10141b; --bb-fg-dim: #5e6776; --bb-accent: #2a2f38; --bb-alert: #c01f1f; --bb-good: #1c8a5a; --bb-warn: #9a6f0c; --bb-bad: #c01f1f; --bb-glow: 42, 47, 56; }