From 4a53921cdc238f35870da4347187ec17b748b6b3 Mon Sep 17 00:00:00 2001 From: indifferentketchup Date: Wed, 3 Jun 2026 14:34:04 +0000 Subject: [PATCH] style(themes): recolor BooCode Override to the Classic warm palette MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Override now uses the BooCode Classic warm tokens (orange/amber/rust on warm near-black) instead of neon magenta/cyan/violet, with its neon-grid field, glitch, scanlines, and bloom recoloured to match — a hotter, glitchier Classic. Updates the NeonField canvas hues, the --bco-* effect vars, and the picker preview anchors. Co-Authored-By: Claude Opus 4.8 (1M context) --- apps/web/src/components/fx/NeonField.tsx | 8 +- apps/web/src/lib/theme.ts | 2 +- .../src/styles/themes/boocode-override.css | 80 +++++++++---------- .../themes/effects/boocode-override-fx.css | 18 +++-- 4 files changed, 57 insertions(+), 51 deletions(-) diff --git a/apps/web/src/components/fx/NeonField.tsx b/apps/web/src/components/fx/NeonField.tsx index 44e0d3b..efe6a34 100644 --- a/apps/web/src/components/fx/NeonField.tsx +++ b/apps/web/src/components/fx/NeonField.tsx @@ -26,9 +26,11 @@ const ROWS = 18; // horizontal floor lines const COLS = 17; // vertical lines (odd → one passes through the vanishing point) const HORIZON_FRAC = 0.42; // horizon height from the top -const CYAN = '0, 229, 255'; -const MAGENTA = '255, 45, 120'; -const VIOLET = '155, 93, 229'; +// Warm Classic palette (recoloured from the original neon). Names kept for +// minimal churn: CYAN now holds amber, MAGENTA orange, VIOLET rust. +const CYAN = '251, 191, 36'; // amber #fbbf24 +const MAGENTA = '249, 115, 22'; // orange #f97316 +const VIOLET = '194, 65, 12'; // rust #c2410c interface Mote { x: number; // 0..1 of width diff --git a/apps/web/src/lib/theme.ts b/apps/web/src/lib/theme.ts index 4c06136..d07b981 100644 --- a/apps/web/src/lib/theme.ts +++ b/apps/web/src/lib/theme.ts @@ -89,7 +89,7 @@ export const THEMES: readonly ThemeMeta[] = [ { id: 'boocode-classic', name: 'BooCode Classic', family: 'Futuristic', supportsDark: true, supportsLight: false, anchors: ['#0a0604', '#120a06', '#1a0e08', '#9a7a5a', '#f97316'] }, { id: 'boocode-override', name: 'BooCode Override', family: 'Futuristic', supportsDark: true, supportsLight: false, - anchors: ['#080b14', '#0d1120', '#0f1525', '#7a9dc2', '#ff2d78'] }, + anchors: ['#0a0604', '#120a06', '#1a0e08', '#9a7a5a', '#f97316'] }, ] as const; // BooCode 2.0: orange-on-black "BooCode Ember" is the out-of-the-box signature diff --git a/apps/web/src/styles/themes/boocode-override.css b/apps/web/src/styles/themes/boocode-override.css index 50a4795..55b357e 100644 --- a/apps/web/src/styles/themes/boocode-override.css +++ b/apps/web/src/styles/themes/boocode-override.css @@ -1,58 +1,58 @@ /* BooCode Override (id: boocode-override) — dark-only. - Full neon cyberpunk: magenta #ff2d78, cyan #00e5ff, violet #9b5de5 on - blue-black #080b14. Knowingly the least calm theme. + Uses the BooCode Classic WARM palette (orange #f97316 + amber #fbbf24 + rust + #c2410c on warm near-black #0a0604) — the same tokens as boocode-classic — + but keeps Override's heavier cyberpunk EFFECTS: the (now warm) neon-grid + horizon field, chromatic glitch, strong scanlines, and bloom. So it reads as + a hotter, glitchier Classic rather than a separate neon scheme. - Neon-field translucency trick (same shape as Classic, brighter field): the - NeonField canvas sits at z-0 behind the layout. To let it show *through* the - UI, is the opaque page backstop (#080b14), is transparent, and - the SURFACE tokens are overridden to SEMI-TRANSPARENT rgba so panels bleed the - neon grid through their gaps. Foreground / accent / border colours stay fully - opaque. Panel alphas are kept HIGH (0.86–0.94) because the neon field is much - brighter than the matrix rain — combined with the dimmed canvas (opacity in - NeonField) this keeps every panel/body text run at AA (see the contrast notes - in the role report). Neon is for accents/borders/glow — never body text. + Field translucency trick (same shape as Classic): the NeonField canvas sits at + z-0 behind the layout. To let it show *through* the UI, is the opaque + page backstop (#0a0604), is transparent, and the SURFACE tokens are + semi-transparent rgba so panels bleed the field through their gaps. Foreground + / accent / border colours stay fully opaque and at AA over the surfaces. The + field stays accent-only (grid/glow), never behind body text. - Anchors: #080b14 #0d1120 #0f1525 #8aa9cd #ff2d78 */ + Anchors: #0a0604 #120a06 #1a0e08 #9a7a5a #f97316 */ /* Light selector intentionally carries dark values — this theme is dark-only. supportsLight:false in theme.ts means applyTheme always adds the dark class; this base block is a non-broken fallback if the cascade ever runs without it. */ .theme-boocode-override, .theme-boocode-override.dark { - --background: rgba(8, 11, 20, 0.88); - --foreground: #cde0ff; - --card: rgba(15, 21, 37, 0.88); - --card-foreground: #cde0ff; - --popover: rgba(13, 17, 32, 0.94); - --popover-foreground: #cde0ff; - --primary: #ff2d78; - --primary-foreground: #080b14; - --secondary: rgba(26, 34, 64, 0.92); - --secondary-foreground: #cde0ff; - --muted: rgba(13, 17, 32, 0.90); - --muted-foreground: #8aa9cd; - --accent: #00e5ff; - --accent-foreground: #080b14; - --destructive: #f0556b; - --destructive-foreground: #ffffff; - --border: #243358; - --input: #243358; - --ring: #ff2d78; - --sidebar: rgba(13, 17, 32, 0.86); - --sidebar-foreground: #cde0ff; - --sidebar-primary: #ff2d78; - --sidebar-primary-foreground: #080b14; - --sidebar-accent: color-mix(in oklab, #ff2d78 16%, transparent); - --sidebar-accent-foreground: #cde0ff; - --sidebar-border: #243358; - --sidebar-ring: #ff2d78; + --background: rgba(10, 6, 4, 0.86); + --foreground: #f5e6d3; + --card: rgba(26, 14, 8, 0.82); + --card-foreground: #f5e6d3; + --popover: rgba(18, 10, 6, 0.82); + --popover-foreground: #f5e6d3; + --primary: #f97316; + --primary-foreground: #0a0604; + --secondary: rgba(36, 20, 8, 0.88); + --secondary-foreground: #f5e6d3; + --muted: rgba(18, 10, 6, 0.82); + --muted-foreground: #9a7a5a; + --accent: #f97316; + --accent-foreground: #0a0604; + --destructive: #dc2626; + --destructive-foreground: #f5e6d3; + --border: #3a1f0c; + --input: #4a2d14; + --ring: #f97316; + --sidebar: rgba(18, 10, 6, 0.82); + --sidebar-foreground: #f5e6d3; + --sidebar-primary: #f97316; + --sidebar-primary-foreground: #0a0604; + --sidebar-accent: color-mix(in oklab, #f97316 16%, transparent); + --sidebar-accent-foreground: #f5e6d3; + --sidebar-border: #3a1f0c; + --sidebar-ring: #f97316; } /* Opaque page backstop + transparent body so the fixed NeonField canvas (z-0) shows through every translucent surface above it. !important guards against any inline :root vars losing the cascade. */ html.theme-boocode-override { - background-color: #080b14 !important; + background-color: #0a0604 !important; } .theme-boocode-override body { background-color: transparent !important; diff --git a/apps/web/src/styles/themes/effects/boocode-override-fx.css b/apps/web/src/styles/themes/effects/boocode-override-fx.css index c5a49c0..8656849 100644 --- a/apps/web/src/styles/themes/effects/boocode-override-fx.css +++ b/apps/web/src/styles/themes/effects/boocode-override-fx.css @@ -1,6 +1,7 @@ /* BooCode Override — effects layer. Full neon cyberpunk: heavy bloom/glow, chromatic-glitch wordmark, glitch-on-hover, strong scanlines, neon border - pulses. Magenta #ff2d78 + cyan #00e5ff + violet #9b5de5 on blue-black. + pulses. Warm Classic palette: orange #f97316 + amber #fbbf24 + rust #c2410c on + warm near-black (recoloured from the original neon magenta/cyan/violet). Scoping contract (immutable, same as boocode-classic-fx.css): - EVERY rule is scoped under `.theme-boocode-override` so the other 22 themes @@ -22,15 +23,18 @@ chromatic glitch, the hover glitch jitter, and the idle neon pulse. AA: neon is used ONLY for accents/borders/glow and the (large display) - wordmark — never body text. Body/panel text keeps the light #cde0ff / - #8aa9cd tokens over the high-alpha translucent surfaces (see + wordmark — never body text. Body/panel text keeps the warm #f5e6d3 / + #9a7a5a tokens over the high-alpha translucent surfaces (see boocode-override.css). Glitch uses transform / text-shadow / clip-path only, so it never reflows layout. */ .theme-boocode-override { - --bco-magenta: #ff2d78; - --bco-cyan: #00e5ff; - --bco-violet: #9b5de5; + /* Warm Classic palette (recoloured from the original neon). Var names kept + for minimal churn: -magenta now holds orange (primary), -cyan amber + (accent), -violet rust (secondary glow). */ + --bco-magenta: #f97316; + --bco-cyan: #fbbf24; + --bco-violet: #c2410c; --bco-glow-magenta: 0 0 22px color-mix(in srgb, var(--bco-magenta) 42%, transparent); --bco-glow-cyan: 0 0 22px color-mix(in srgb, var(--bco-cyan) 38%, transparent); } @@ -107,7 +111,7 @@ html.bc-anim-on.theme-boocode-override .h-dvh.bg-background::after { font-family: 'Orbitron', var(--font-sans); font-weight: 800; letter-spacing: 0.08em; - color: #eafaff; + color: #fff4e6; text-shadow: 0 0 2px color-mix(in srgb, var(--bco-cyan) 80%, transparent), -0.02em 0 0 color-mix(in srgb, var(--bco-magenta) 70%, transparent),