/* ============================================================================ Signature themes — chosen in Settings → Appearance, applied via data-theme on (see the window.sparkTheme bootstrap in App.razor). ---------------------------------------------------------------------------- The same 10 signature themes used across the TechBench apps (SmudReplay, Spark, QaToolKit, AppScanner, WebGuardrail). No data-theme = the dark :root default defined in app.css. Each block re-declares the app's own --sk-* tokens AND the core Bootstrap --bs-* variables, so custom and native Bootstrap surfaces re-theme together. Light-family themes also flip data-bs-theme to "light" (done in the bootstrap script, from SparkThemeCatalog) so Bootstrap's own components follow. Kept in its own file rather than appended to app.css: app.css is the token + base-layout sheet, and this is a swappable skin layer on top of it. Load order doesn't actually matter — html[data-theme="x"] (0,2,0) outranks :root (0,1,0) either way — but linking it after app.css keeps the intent obvious. TWO DELTAS from SmudReplay's copy of these blocks, both because TestFlow leans on tokens SmudReplay doesn't: 1. Light-family blocks override the four --sk-*-glow tokens plus --sk-queued and --sk-skipped. Those are tuned for the dark ground and read as muddy halos on white — and TestFlow uses them heavily (run-state pills, live telemetry, the run composer). Dark themes inherit them unchanged. 2. Light-family blocks soften --sk-shadow-* , which are 0.35–0.50 black. Adding a theme = one entry in SparkThemeCatalog.All + one block here. ============================================================================ */ /* ── Light — high-contrast white ───────────────────────────────────────── */ html[data-theme="light"] { --sk-bg-0: #f6f6f4; --sk-bg-1: #fbfbf9; --sk-bg-2: #ffffff; --sk-bg-3: #f0efea; --sk-bg-4: #e6e4dc; --sk-bg-elevated: #ffffff; --sk-border: #e4e2da; --sk-border-strong: #cfcdc4; --sk-divider: #e4e2da; --sk-border-accent: rgba(37,99,235,0.34); --sk-text: #1d1d1b; --sk-text-soft: #4a4944; --sk-text-muted: #6b6a64; --sk-text-faint: #82817a; --sk-text-inverse: #ffffff; --sk-accent: #2563eb; --sk-accent-soft: rgba(37,99,235,0.10); --sk-running: #2563eb; --sk-success: #1a7f37; --sk-error: #b3261e; --sk-warning: #9a6700; --sk-brand: #2563eb; --sk-running-glow: rgba(37,99,235,0.28); --sk-success-glow: rgba(26,127,55,0.22); --sk-error-glow: rgba(179,38,30,0.22); --sk-warning-glow: rgba(154,103,0,0.22); --sk-queued: #8a8880; --sk-skipped: #b0aea6; --sk-shadow-sm: 0 1px 2px rgba(0,0,0,0.08); --sk-shadow: 0 4px 12px rgba(0,0,0,0.10); --sk-shadow-lg: 0 10px 32px rgba(0,0,0,0.14); --bs-body-bg: #f6f6f4; --bs-body-bg-rgb: 246,246,244; --bs-body-color: #1d1d1b; --bs-body-color-rgb: 29,29,27; --bs-border-color: #e4e2da; --bs-emphasis-color: #000000; --bs-primary: #2563eb; --bs-primary-rgb: 37,99,235; --bs-secondary-bg: #ffffff; --bs-tertiary-bg: #f0efea; --bs-link-color: #2563eb; --bs-link-color-rgb: 37,99,235; --bs-link-hover-color: #1d4fd0; --bs-card-bg: #ffffff; --bs-card-color: #1d1d1b; } /* ── Midnight — deep indigo, violet accent ─────────────────────────────── */ html[data-theme="midnight"] { --sk-bg-0: #0b1020; --sk-bg-1: #0d1530; --sk-bg-2: #121a33; --sk-bg-3: #1a2547; --sk-bg-4: #1f2b50; --sk-bg-elevated: #22305a; --sk-border: #1f2b50; --sk-border-strong: #2a3a66; --sk-divider: #1f2b50; --sk-border-accent: rgba(139,123,255,0.34); --sk-text: #dfe6ff; --sk-text-soft: #b3bce6; --sk-text-muted: #9aa6d4; --sk-text-faint: #7f8bbd; --sk-text-inverse: #0b1020; --sk-accent: #8b7bff; --sk-accent-soft: rgba(139,123,255,0.14); --sk-running: #8b7bff; --sk-success: #5bd6a0; --sk-error: #ff7a90; --sk-warning: #e0b341; --sk-brand: #8b7bff; --sk-running-glow: rgba(139,123,255,0.45); --sk-success-glow: rgba(91,214,160,0.35); --sk-error-glow: rgba(255,122,144,0.40); --sk-warning-glow: rgba(224,179,65,0.35); --sk-queued: #6773a5; --sk-skipped: #4a5580; --bs-body-bg: #0b1020; --bs-body-bg-rgb: 11,16,32; --bs-body-color: #dfe6ff; --bs-body-color-rgb: 223,230,255; --bs-border-color: #2a3a66; --bs-emphasis-color: #ffffff; --bs-primary: #8b7bff; --bs-primary-rgb: 139,123,255; --bs-secondary-bg: #121a33; --bs-tertiary-bg: #1a2547; --bs-link-color: #9db4ff; --bs-link-color-rgb: 157,180,255; --bs-link-hover-color: #bccaff; --bs-card-bg: #121a33; --bs-card-color: #dfe6ff; } /* ── Pixel — cyberpunk neon (magenta + cyan), CRT scanlines ────────────── */ html[data-theme="pixel"] { --sk-bg-0: #0d0221; --sk-bg-1: #160a33; --sk-bg-2: #160a33; --sk-bg-3: #211347; --sk-bg-4: #2a1a52; --sk-bg-elevated: #2c1a5e; --sk-border: #34206a; --sk-border-strong: #4a2d8a; --sk-divider: #34206a; --sk-border-accent: rgba(255,42,109,0.34); --sk-text: #e8e0ff; --sk-text-soft: #b9a9e8; --sk-text-muted: #9b86d9; --sk-text-faint: #8272c0; --sk-text-inverse: #0d0221; --sk-accent: #ff2a6d; --sk-accent-soft: rgba(255,42,109,0.14); --sk-running: #05d9e8; --sk-success: #05d9e8; --sk-error: #ff3864; --sk-warning: #f9f871; --sk-brand: #ff2a6d; --sk-running-glow: rgba(5,217,232,0.45); --sk-success-glow: rgba(5,217,232,0.35); --sk-error-glow: rgba(255,56,100,0.40); --sk-warning-glow: rgba(249,248,113,0.35); --sk-queued: #7a68b8; --sk-skipped: #55479a; --bs-body-bg: #0d0221; --bs-body-bg-rgb: 13,2,33; --bs-body-color: #e8e0ff; --bs-body-color-rgb: 232,224,255; --bs-border-color: #4a2d8a; --bs-emphasis-color: #ffffff; --bs-primary: #ff2a6d; --bs-primary-rgb: 255,42,109; --bs-secondary-bg: #160a33; --bs-tertiary-bg: #211347; --bs-link-color: #05d9e8; --bs-link-color-rgb: 5,217,232; --bs-link-hover-color: #5fe9f3; --bs-card-bg: #160a33; --bs-card-color: #e8e0ff; } html[data-theme="pixel"] body { font-family: "Press Start 2P", "Courier New", monospace; font-size: 11px; line-height: 1.85; letter-spacing: 0.2px; -webkit-font-smoothing: none; } html[data-theme="pixel"] * { border-radius: 0 !important; } html[data-theme="pixel"] .btn, html[data-theme="pixel"] .card { box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.55) !important; } html[data-theme="pixel"] body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9998; background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.16) 0, rgba(0, 0, 0, 0.16) 1px, transparent 1px, transparent 3px); } /* ── 90s — Windows 95 teal desktop, silver bevels, Comic Sans ──────────── */ html[data-theme="win9x"] { --sk-bg-0: #008080; --sk-bg-1: #c0c0c0; --sk-bg-2: #c0c0c0; --sk-bg-3: #bdbdbd; --sk-bg-4: #d0d0d0; --sk-bg-elevated: #c0c0c0; --sk-border: #808080; --sk-border-strong: #5a5a5a; --sk-divider: #808080; --sk-border-accent: rgba(0,0,128,0.34); --sk-text: #000000; --sk-text-soft: #2b2b2b; --sk-text-muted: #2b2b2b; --sk-text-faint: #555555; --sk-text-inverse: #ffffff; --sk-accent: #000080; --sk-accent-soft: rgba(0,0,128,0.12); --sk-running: #000080; --sk-success: #007000; --sk-error: #c00000; --sk-warning: #7a6a00; --sk-brand: #000080; --sk-running-glow: rgba(0,0,128,0.25); --sk-success-glow: rgba(0,112,0,0.22); --sk-error-glow: rgba(192,0,0,0.22); --sk-warning-glow: rgba(122,106,0,0.22); --sk-queued: #606060; --sk-skipped: #909090; --sk-shadow-sm: none; --sk-shadow: none; --sk-shadow-lg: none; --bs-body-bg: #008080; --bs-body-bg-rgb: 0,128,128; --bs-body-color: #000000; --bs-body-color-rgb: 0,0,0; --bs-border-color: #808080; --bs-emphasis-color: #000000; --bs-primary: #000080; --bs-primary-rgb: 0,0,128; --bs-secondary-bg: #c0c0c0; --bs-tertiary-bg: #bdbdbd; --bs-link-color: #0000ff; --bs-link-color-rgb: 0,0,255; --bs-link-hover-color: #0000cc; --bs-card-bg: #c0c0c0; --bs-card-color: #000000; } html[data-theme="win9x"] body { font-family: "Comic Sans MS", "Trebuchet MS", Tahoma, sans-serif; } html[data-theme="win9x"] * { border-radius: 0 !important; } html[data-theme="win9x"] .btn, html[data-theme="win9x"] .card { border: 2px outset #dfdfdf !important; box-shadow: none !important; } html[data-theme="win9x"] .btn:active { border-style: inset !important; } html[data-theme="win9x"] a { text-decoration: underline; } /* ── Y2K — late-90s gradient kitsch ─────────────────────────────────────── */ html[data-theme="y2k"] { --sk-bg-0: #6f93dd; --sk-bg-1: #eef3fb; --sk-bg-2: #eef3fb; --sk-bg-3: #dbe6f8; --sk-bg-4: #cddcf3; --sk-bg-elevated: #ffffff; --sk-border: #9fb6dd; --sk-border-strong: #5f7fb8; --sk-divider: #9fb6dd; --sk-border-accent: rgba(26,95,208,0.34); --sk-text: #0a1a3a; --sk-text-soft: #38486a; --sk-text-muted: #38486a; --sk-text-faint: #5a6a8a; --sk-text-inverse: #ffffff; --sk-accent: #1a5fd0; --sk-accent-soft: rgba(26,95,208,0.12); --sk-running: #1a5fd0; --sk-success: #1a7f37; --sk-error: #c0271e; --sk-warning: #8a5a00; --sk-brand: #1a5fd0; --sk-running-glow: rgba(26,95,208,0.28); --sk-success-glow: rgba(26,127,55,0.22); --sk-error-glow: rgba(192,39,30,0.22); --sk-warning-glow: rgba(138,90,0,0.22); --sk-queued: #7a8aa8; --sk-skipped: #a3b0c6; --bs-body-bg: #6f93dd; --bs-body-bg-rgb: 111,147,221; --bs-body-color: #0a1a3a; --bs-body-color-rgb: 10,26,58; --bs-border-color: #5f7fb8; --bs-emphasis-color: #06122b; --bs-primary: #1a5fd0; --bs-primary-rgb: 26,95,208; --bs-secondary-bg: #eef3fb; --bs-tertiary-bg: #dbe6f8; --bs-link-color: #1a5fd0; --bs-link-color-rgb: 26,95,208; --bs-link-hover-color: #1550b8; --bs-card-bg: #eef3fb; --bs-card-color: #0a1a3a; } html[data-theme="y2k"] body { background: linear-gradient(180deg, #8fb0ec 0%, #4f74c8 100%) fixed; } html[data-theme="y2k"] .btn-primary { background: linear-gradient(180deg, #5a9bf0, #0d52c0); border: 1px solid #0a3d92; } html[data-theme="y2k"] .card { background: linear-gradient(180deg, #ffffff, #e3edfa); border: 1px solid #9fb6dd; } /* ── Kenney — friendly game-dev UI: chunky, rounded, pressable ─────────── */ html[data-theme="kenney"] { --sk-bg-0: #dce7f5; --sk-bg-1: #eef3fb; --sk-bg-2: #ffffff; --sk-bg-3: #eaf1fb; --sk-bg-4: #dde8f8; --sk-bg-elevated: #ffffff; --sk-border: #b6c8e4; --sk-border-strong: #9bb2d8; --sk-divider: #d6e2f2; --sk-border-accent: rgba(61,169,252,0.34); --sk-text: #2b3a55; --sk-text-soft: #5b6b86; --sk-text-muted: #5b6b86; --sk-text-faint: #7d8ba5; --sk-text-inverse: #ffffff; --sk-accent: #3da9fc; --sk-accent-soft: rgba(61,169,252,0.12); --sk-running: #2b95e8; --sk-success: #43b14a; --sk-error: #ff5c5c; --sk-warning: #ff9f1c; --sk-brand: #3da9fc; --sk-running-glow: rgba(43,149,232,0.28); --sk-success-glow: rgba(67,177,74,0.24); --sk-error-glow: rgba(255,92,92,0.26); --sk-warning-glow: rgba(255,159,28,0.26); --sk-queued: #8a98b2; --sk-skipped: #b0bcd0; --bs-body-bg: #dce7f5; --bs-body-bg-rgb: 220,231,245; --bs-body-color: #2b3a55; --bs-body-color-rgb: 43,58,85; --bs-border-color: #b6c8e4; --bs-emphasis-color: #1f2c44; --bs-primary: #3da9fc; --bs-primary-rgb: 61,169,252; --bs-secondary-bg: #ffffff; --bs-tertiary-bg: #eaf1fb; --bs-link-color: #2b95e8; --bs-link-color-rgb: 43,149,232; --bs-link-hover-color: #1f7fd0; --bs-card-bg: #ffffff; --bs-card-color: #2b3a55; } html[data-theme="kenney"] body { font-family: "Nunito", "Segoe UI", system-ui, sans-serif; } html[data-theme="kenney"] .card { border: 2px solid #b6c8e4 !important; border-radius: 14px !important; box-shadow: 0 4px 0 #c2d2ec !important; } html[data-theme="kenney"] .btn { border-radius: 12px !important; font-weight: 700; box-shadow: 0 4px 0 #c2d2ec; } html[data-theme="kenney"] .btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #c2d2ec; } /* ── XP — Windows XP "Luna": charcoal chrome, glossy blue accent ───────── */ html[data-theme="xp"] { --sk-bg-0: #24272b; --sk-bg-1: #2b3035; --sk-bg-2: #34393f; --sk-bg-3: #3f454c; --sk-bg-4: #454c53; --sk-bg-elevated: #4a5159; --sk-border: #3f454c; --sk-border-strong: #4e555d; --sk-divider: #3f454c; --sk-border-accent: rgba(47,134,214,0.34); --sk-text: #f3f5f7; --sk-text-soft: #cbd0d5; --sk-text-muted: #aeb4bb; --sk-text-faint: #949ba3; --sk-text-inverse: #24272b; --sk-accent: #2f86d6; --sk-accent-soft: rgba(47,134,214,0.14); --sk-running: #2f86d6; --sk-success: #36ab38; --sk-error: #dd2b2b; --sk-warning: #f2b50a; --sk-brand: #2f86d6; --sk-running-glow: rgba(47,134,214,0.45); --sk-success-glow: rgba(54,171,56,0.35); --sk-error-glow: rgba(221,43,43,0.40); --sk-warning-glow: rgba(242,181,10,0.35); --sk-queued: #7d858d; --sk-skipped: #5a6169; --bs-body-bg: #24272b; --bs-body-bg-rgb: 36,39,43; --bs-body-color: #f3f5f7; --bs-body-color-rgb: 243,245,247; --bs-border-color: #4e555d; --bs-emphasis-color: #ffffff; --bs-primary: #2f86d6; --bs-primary-rgb: 47,134,214; --bs-secondary-bg: #34393f; --bs-tertiary-bg: #3f454c; --bs-link-color: #6fb2ec; --bs-link-color-rgb: 111,178,236; --bs-link-hover-color: #92c6f2; --bs-card-bg: #34393f; --bs-card-color: #f3f5f7; } /* ── Real Defense — royal-blue brand on white (matches realdefen.se) ────── */ html[data-theme="realdefense"] { --sk-bg-0: #eef2f7; --sk-bg-1: #f4f7fb; --sk-bg-2: #ffffff; --sk-bg-3: #e3eaf3; --sk-bg-4: #d7e1ef; --sk-bg-elevated: #ffffff; --sk-border: #ccd7e6; --sk-border-strong: #b3c2d8; --sk-divider: #e1e8f1; --sk-border-accent: rgba(43,91,171,0.34); --sk-text: #0f2540; --sk-text-soft: #44566f; --sk-text-muted: #44566f; --sk-text-faint: #6d7c92; --sk-text-inverse: #ffffff; --sk-accent: #2b5bab; --sk-accent-soft: rgba(43,91,171,0.12); --sk-running: #2b5bab; --sk-success: #1a7f37; --sk-error: #cd3432; --sk-warning: #9a6700; --sk-brand: #2b5bab; --sk-running-glow: rgba(43,91,171,0.28); --sk-success-glow: rgba(26,127,55,0.22); --sk-error-glow: rgba(205,52,50,0.24); --sk-warning-glow: rgba(154,103,0,0.22); --sk-queued: #8494a8; --sk-skipped: #aab7c7; --sk-shadow-sm: 0 1px 2px rgba(15,37,64,0.08); --sk-shadow: 0 4px 12px rgba(15,37,64,0.10); --sk-shadow-lg: 0 10px 32px rgba(15,37,64,0.14); --bs-body-bg: #eef2f7; --bs-body-bg-rgb: 238,242,247; --bs-body-color: #0f2540; --bs-body-color-rgb: 15,37,64; --bs-border-color: #ccd7e6; --bs-emphasis-color: #08182c; --bs-primary: #2b5bab; --bs-primary-rgb: 43,91,171; --bs-secondary-bg: #f4f7fb; --bs-tertiary-bg: #e7eef7; --bs-link-color: #2b5bab; --bs-link-color-rgb: 43,91,171; --bs-link-hover-color: #21478a; --bs-card-bg: #ffffff; --bs-card-color: #0f2540; } /* ── iolo — clean white with iolo red (matches iolo.com) ───────────────── */ html[data-theme="iolo"] { --sk-bg-0: #f5f5f5; --sk-bg-1: #fafafa; --sk-bg-2: #ffffff; --sk-bg-3: #ececec; --sk-bg-4: #e2e2e2; --sk-bg-elevated: #ffffff; --sk-border: #dcdcdc; --sk-border-strong: #c8c8c8; --sk-divider: #ececec; --sk-border-accent: rgba(205,52,50,0.30); --sk-text: #1a1a1a; --sk-text-soft: #555555; --sk-text-muted: #555555; --sk-text-faint: #7a7a7a; --sk-text-inverse: #ffffff; --sk-accent: #cd3432; --sk-accent-soft: rgba(205,52,50,0.10); --sk-running: #cd3432; --sk-success: #1a7f37; --sk-error: #b3261e; --sk-warning: #9a6700; --sk-brand: #cd3432; --sk-running-glow: rgba(205,52,50,0.26); --sk-success-glow: rgba(26,127,55,0.22); --sk-error-glow: rgba(179,38,30,0.22); --sk-warning-glow: rgba(154,103,0,0.22); --sk-queued: #8f8f8f; --sk-skipped: #b5b5b5; --sk-shadow-sm: 0 1px 2px rgba(0,0,0,0.08); --sk-shadow: 0 4px 12px rgba(0,0,0,0.10); --sk-shadow-lg: 0 10px 32px rgba(0,0,0,0.14); --bs-body-bg: #f5f5f5; --bs-body-bg-rgb: 245,245,245; --bs-body-color: #1a1a1a; --bs-body-color-rgb: 26,26,26; --bs-border-color: #dcdcdc; --bs-emphasis-color: #000000; --bs-primary: #cd3432; --bs-primary-rgb: 205,52,50; --bs-secondary-bg: #fafafa; --bs-tertiary-bg: #f0f0f0; --bs-link-color: #cd3432; --bs-link-color-rgb: 205,52,50; --bs-link-hover-color: #a82a28; --bs-card-bg: #ffffff; --bs-card-color: #1a1a1a; } /* ============================================================================ Light-family repairs ---------------------------------------------------------------------------- Keyed on data-bs-theme rather than each theme id, so a new light theme picks these up for free. These cover the places TestFlow hardcodes dark values that no token can reach. ============================================================================ */ /* The signed-out splash hardcodes a dark navy gradient inline; re-ground it. */ html[data-bs-theme="light"] .page > main { background: var(--sk-bg-0); } /* Bootstrap's .text-muted resolves against its own secondary-color var, which stays dark-tuned; point it at our token so muted copy keeps its contrast. */ html[data-bs-theme="light"] .text-muted { color: var(--sk-text-muted) !important; } /* .badge.bg-light / .bg-dark are used as neutral chips in a few places and inv ert badly when the ground flips. Normalise both onto the surface tokens. */ html[data-bs-theme="light"] .badge.bg-dark { background-color: var(--sk-bg-4) !important; color: var(--sk-text) !important; } html[data-bs-theme="light"] .badge.bg-light { background-color: var(--sk-bg-3) !important; color: var(--sk-text) !important; }