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 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

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,
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

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

@@ -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, <html> is the opaque page backstop (#080b14), <body> 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, <html> is the opaque
page backstop (#0a0604), <body> 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;

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,
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),