indifferentketchup/boocode
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(themes): recolor BooCode Override to the Classic warm palette

Browse Source 
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) <noreply@anthropic.com>
This commit is contained in:
indifferentketchup
2026-06-03 14:34:04 +00:00
parent fc4fbb0b7e
commit 4a53921cdc
4 changed files with 57 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
apps/web/src/components/fx/NeonField.tsx
View File

@@ -26,9 +26,11 @@ const ROWS = 18; // horizontal floor lines
const COLS = 17; // vertical lines (odd → one passes through the vanishing point) const COLS = 17; // vertical lines (odd → one passes through the vanishing point)
const HORIZON_FRAC = 0.42; // horizon height from the top const HORIZON_FRAC = 0.42; // horizon height from the top
const CYAN = '0, 229, 255'; // Warm Classic palette (recoloured from the original neon). Names kept for
const MAGENTA = '255, 45, 120'; // minimal churn: CYAN now holds amber, MAGENTA orange, VIOLET rust.
const VIOLET = '155, 93, 229'; const CYAN = '251, 191, 36'; // amber #fbbf24
const MAGENTA = '249, 115, 22'; // orange #f97316
const VIOLET = '194, 65, 12'; // rust #c2410c
interface Mote { interface Mote {
x: number; // 0..1 of width x: number; // 0..1 of width

2
apps/web/src/lib/theme.ts
View File

@@ -89,7 +89,7 @@ export const THEMES: readonly ThemeMeta[] = [
{ id: 'boocode-classic', name: 'BooCode Classic', family: 'Futuristic', supportsDark: true, supportsLight: false, { id: 'boocode-classic', name: 'BooCode Classic', family: 'Futuristic', supportsDark: true, supportsLight: false,
anchors: ['#0a0604', '#120a06', '#1a0e08', '#9a7a5a', '#f97316'] }, anchors: ['#0a0604', '#120a06', '#1a0e08', '#9a7a5a', '#f97316'] },
{ id: 'boocode-override', name: 'BooCode Override', family: 'Futuristic', supportsDark: true, supportsLight: false, { 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; ] as const;
// BooCode 2.0: orange-on-black "BooCode Ember" is the out-of-the-box signature // BooCode 2.0: orange-on-black "BooCode Ember" is the out-of-the-box signature

80
apps/web/src/styles/themes/boocode-override.css
View File

@@ -1,58 +1,58 @@
/* BooCode Override (id: boocode-override) — dark-only. /* BooCode Override (id: boocode-override) — dark-only.
Full neon cyberpunk: magenta #ff2d78, cyan #00e5ff, violet #9b5de5 on Uses the BooCode Classic WARM palette (orange #f97316 + amber #fbbf24 + rust
blue-black #080b14. Knowingly the least calm theme. #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 Field translucency trick (same shape as Classic): the NeonField canvas sits at
NeonField canvas sits at z-0 behind the layout. To let it show *through* the z-0 behind the layout. To let it show *through* the UI, <html> is the opaque
UI, <html> is the opaque page backstop (#080b14), <body> is transparent, and page backstop (#0a0604), <body> is transparent, and the SURFACE tokens are
the SURFACE tokens are overridden to SEMI-TRANSPARENT rgba so panels bleed the semi-transparent rgba so panels bleed the field through their gaps. Foreground
neon grid through their gaps. Foreground / accent / border colours stay fully / accent / border colours stay fully opaque and at AA over the surfaces. The
opaque. Panel alphas are kept HIGH (0.86–0.94) because the neon field is much field stays accent-only (grid/glow), never behind body text.
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.
Anchors: #080b14 #0d1120 #0f1525 #8aa9cd #ff2d78 */ Anchors: #0a0604 #120a06 #1a0e08 #9a7a5a #f97316 */
/* Light selector intentionally carries dark values — this theme is dark-only. /* Light selector intentionally carries dark values — this theme is dark-only.
supportsLight:false in theme.ts means applyTheme always adds the dark class; 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. */ this base block is a non-broken fallback if the cascade ever runs without it. */
.theme-boocode-override, .theme-boocode-override,
.theme-boocode-override.dark { .theme-boocode-override.dark {
--background: rgba(8, 11, 20, 0.88); --background: rgba(10, 6, 4, 0.86);
--foreground: #cde0ff; --foreground: #f5e6d3;
--card: rgba(15, 21, 37, 0.88); --card: rgba(26, 14, 8, 0.82);
--card-foreground: #cde0ff; --card-foreground: #f5e6d3;
--popover: rgba(13, 17, 32, 0.94); --popover: rgba(18, 10, 6, 0.82);
--popover-foreground: #cde0ff; --popover-foreground: #f5e6d3;
--primary: #ff2d78; --primary: #f97316;
--primary-foreground: #080b14; --primary-foreground: #0a0604;
--secondary: rgba(26, 34, 64, 0.92); --secondary: rgba(36, 20, 8, 0.88);
--secondary-foreground: #cde0ff; --secondary-foreground: #f5e6d3;
--muted: rgba(13, 17, 32, 0.90); --muted: rgba(18, 10, 6, 0.82);
--muted-foreground: #8aa9cd; --muted-foreground: #9a7a5a;
--accent: #00e5ff; --accent: #f97316;
--accent-foreground: #080b14; --accent-foreground: #0a0604;
--destructive: #f0556b; --destructive: #dc2626;
--destructive-foreground: #ffffff; --destructive-foreground: #f5e6d3;
--border: #243358; --border: #3a1f0c;
--input: #243358; --input: #4a2d14;
--ring: #ff2d78; --ring: #f97316;
--sidebar: rgba(13, 17, 32, 0.86); --sidebar: rgba(18, 10, 6, 0.82);
--sidebar-foreground: #cde0ff; --sidebar-foreground: #f5e6d3;
--sidebar-primary: #ff2d78; --sidebar-primary: #f97316;
--sidebar-primary-foreground: #080b14; --sidebar-primary-foreground: #0a0604;
--sidebar-accent: color-mix(in oklab, #ff2d78 16%, transparent); --sidebar-accent: color-mix(in oklab, #f97316 16%, transparent);
--sidebar-accent-foreground: #cde0ff; --sidebar-accent-foreground: #f5e6d3;
--sidebar-border: #243358; --sidebar-border: #3a1f0c;
--sidebar-ring: #ff2d78; --sidebar-ring: #f97316;
} }
/* Opaque page backstop + transparent body so the fixed NeonField canvas (z-0) /* Opaque page backstop + transparent body so the fixed NeonField canvas (z-0)
shows through every translucent surface above it. !important guards against shows through every translucent surface above it. !important guards against
any inline :root vars losing the cascade. */ any inline :root vars losing the cascade. */
html.theme-boocode-override { html.theme-boocode-override {
background-color: #080b14 !important; background-color: #0a0604 !important;
} }
.theme-boocode-override body { .theme-boocode-override body {
background-color: transparent !important; background-color: transparent !important;

18
apps/web/src/styles/themes/effects/boocode-override-fx.css
View File

@@ -1,6 +1,7 @@
/* BooCode Override — effects layer. Full neon cyberpunk: heavy bloom/glow, /* BooCode Override — effects layer. Full neon cyberpunk: heavy bloom/glow,
chromatic-glitch wordmark, glitch-on-hover, strong scanlines, neon border 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): Scoping contract (immutable, same as boocode-classic-fx.css):
- EVERY rule is scoped under `.theme-boocode-override` so the other 22 themes - 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. chromatic glitch, the hover glitch jitter, and the idle neon pulse.
AA: neon is used ONLY for accents/borders/glow and the (large display) AA: neon is used ONLY for accents/borders/glow and the (large display)
wordmark — never body text. Body/panel text keeps the light #cde0ff / wordmark — never body text. Body/panel text keeps the warm #f5e6d3 /
#8aa9cd tokens over the high-alpha translucent surfaces (see #9a7a5a tokens over the high-alpha translucent surfaces (see
boocode-override.css). Glitch uses transform / text-shadow / clip-path only, boocode-override.css). Glitch uses transform / text-shadow / clip-path only,
so it never reflows layout. */ so it never reflows layout. */
.theme-boocode-override { .theme-boocode-override {
--bco-magenta: #ff2d78; /* Warm Classic palette (recoloured from the original neon). Var names kept
--bco-cyan: #00e5ff; for minimal churn: -magenta now holds orange (primary), -cyan amber
--bco-violet: #9b5de5; (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-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); --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-family: 'Orbitron', var(--font-sans);
font-weight: 800; font-weight: 800;
letter-spacing: 0.08em; letter-spacing: 0.08em;
color: #eafaff; color: #fff4e6;
text-shadow: text-shadow:
0 0 2px color-mix(in srgb, var(--bco-cyan) 80%, transparent), 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), -0.02em 0 0 color-mix(in srgb, var(--bco-magenta) 70%, transparent),