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

feat(themes): Classic primary glow + visible context-meter track

Browse Source 
Add a warm orange glow (static rim + drop, gentle gated idle pulse) on the
primary action for BooCode Classic, matching Override's treatment but
calmer (no glitch). Also fix the context-meter ring on both warm themes:
its `stroke-muted` track ≈ the background, so only the fill showed — give
the track a faint warm stroke so the full ring reads.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
indifferentketchup
2026-06-03 14:54:19 +00:00
parent f5e71bf989
commit 5f4c7a9050
2 changed files with 54 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
apps/web/src/styles/themes/effects/boocode-classic-fx.css
View File

@@ -233,6 +233,37 @@ html.bc-anim-on.theme-boocode-classic .bc-card:hover {
transform: translateY(-1px);
}
/* ── Primary action: warm orange glow ─────────────────────────────────────
The default-variant Button (Send / primary confirm). Static orange rim + drop
glow always; a gentle idle pulse under the gate. box-shadow / transform only
→ never reflows. Calmer than Override (no glitch / colour split). */
.theme-boocode-classic [data-slot="button"][data-variant="default"] {
box-shadow:
0 0 0 1px color-mix(in srgb, var(--bc-orange) 45%, transparent),
var(--bc-glow-orange);
}
.theme-boocode-classic [data-slot="button"][data-variant="default"]:not([disabled]):hover {
box-shadow:
0 0 0 1px color-mix(in srgb, var(--bc-orange) 75%, transparent),
0 0 30px color-mix(in srgb, var(--bc-orange) 45%, transparent);
}
html.bc-anim-on.theme-boocode-classic [data-slot="button"][data-variant="default"] {
transition: box-shadow 220ms ease, transform 120ms ease;
animation: bc-glow-pulse 3.6s ease-in-out infinite;
}
html.bc-anim-on.theme-boocode-classic [data-slot="button"][data-variant="default"]:not([disabled]):active {
transform: translateY(0.5px) scale(0.985);
}
/* ── Context meter track ───────────────────────────────────────────────────
ContextMeter.tsx draws its track ring with `stroke-muted`; here --muted ≈ the
warm-black background so only the coloured fill arc shows. Give the track a
faint warm stroke (dimmer than the muted-foreground fill) so the full ring
reads. Scoped to the meter via its aria-label. */
.theme-boocode-classic [aria-label^="Context window"] circle.stroke-muted {
stroke: color-mix(in srgb, var(--muted-foreground) 45%, transparent);
}
/* ── Keyframes (global names, referenced only under the gate above) ───────── */
@keyframes bc-caret-blink {
0%, 49% { opacity: 1; }
@@ -242,6 +273,18 @@ html.bc-anim-on.theme-boocode-classic .bc-card:hover {
0% { transform: translateY(-100%); }
100% { transform: translateY(100%); }
}
@keyframes bc-glow-pulse {
0%, 100% {
box-shadow:
0 0 0 1px color-mix(in srgb, var(--bc-orange) 45%, transparent),
var(--bc-glow-orange);
}
50% {
box-shadow:
0 0 0 1px color-mix(in srgb, var(--bc-orange) 65%, transparent),
0 0 30px color-mix(in srgb, var(--bc-orange) 42%, transparent);
}
}
/* ── Reduced-motion belt-and-suspenders ───────────────────────────────────
bc-anim-on already excludes reduced-motion (ThemeFx), but if the class ever
@@ -258,8 +301,10 @@ html.bc-anim-on.theme-boocode-classic .bc-card:hover {
display: none;
}
.theme-boocode-classic [data-slot="card"],
.theme-boocode-classic .bc-card {
.theme-boocode-classic .bc-card,
.theme-boocode-classic [data-slot="button"][data-variant="default"] {
transition: none;
animation: none;
}
.theme-boocode-classic [data-slot="card"]:hover,
.theme-boocode-classic .bc-card:hover {

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

@@ -177,6 +177,14 @@ html.bc-anim-on.theme-boocode-override [data-slot="card"]:hover {
.theme-boocode-override .bg-sidebar {
box-shadow: inset -1px 0 0 0 color-mix(in srgb, var(--bco-cyan) 16%, transparent);
}
/* Context meter track: ContextMeter.tsx draws its track ring with `stroke-muted`,
which ≈ the warm-black background here, so only the fill arc shows. Give the
track a faint warm stroke (dimmer than the muted-foreground fill) so the full
ring reads. Scoped to the meter via its aria-label. */
.theme-boocode-override [aria-label^="Context window"] circle.stroke-muted {
stroke: color-mix(in srgb, var(--muted-foreground) 45%, transparent);
}
.theme-boocode-override [data-slot="input"]:focus-visible,
.theme-boocode-override [data-slot="button"]:focus-visible,
.theme-boocode-override [data-slot="textarea"]:focus-visible {