The token/active-pill/hover/search overrides in theme.css are scoped to
[data-testid="app-sidebar"], but on narrow viewports (<768px) the mobile
Sidebar branch spread that marker onto the Radix Sheet root, which renders
no DOM ancestor of the portaled SheetContent. So the offcanvas sidebar got
the Buzz gradient (fixed separately) but its selected rows and search box
still fell back to the normal accent/grey surfaces over the gradient.
Move the app-sidebar marker (and the rest of the forwarded props) onto
SheetContent so every existing [data-testid="app-sidebar"] rule reaches the
portaled sheet without duplicating selectors. Bump the sidebar.tsx file-size
override by 1 (vendored file already on the split-queue). Verified at a 480px
viewport: the sheet carries data-testid=app-sidebar, --sidebar-active resolves
to white, and the Buzz Dark gradient still applies.
Signed-off-by: npub13fn4ahfnvaa2qwylvegdgeajqs0mph6v4qsw4jcqnw4mjh3hzh2quuucm5 <8a675edd33677aa0389f6650d467b2041fb0df4ca820eacb009babb95e3715d4@sprout-oss.stage.blox.sqprod.co>
The previous scoping to \`.group/sidebar-wrapper\` correctly excluded unrelated
portals (persona dialog), but it also excluded the mobile/offcanvas sidebar:
on narrow viewports (<768px) the sidebar renders as a \`SheetContent\` inside a
\`SheetPortal\`, outside the shell wrapper, so Buzz/Buzz Dark fell back to the
flat grey \`--sidebar-background\`.
Add the portaled mobile sidebar surface as a second, precise gradient target
(\`[data-sidebar="sidebar"][data-mobile="true"].bg-sidebar\`) sharing the same
declaration block — without re-broadening to every \`.bg-sidebar\` in the
document. The pinned-header/footer repaint rules are scoped to
\`[data-testid="app-sidebar"]\` (a descendant that renders inside the sheet too),
so they already cover mobile.
Verified at a 480px viewport: opening the mobile sheet shows the Buzz Dark
gradient on the \`[data-mobile="true"]\` surface (background-image is the
gradient, background-color cleared). Desktop theme screenshot spec still
passes; desktop-check + tsc clean, no new biome warnings.
Fixes the Codex P2 review comment on PR #1630.
Signed-off-by: Fizz <8a675edd33677aa0389f6650d467b2041fb0df4ca820eacb009babb95e3715d4@sprout-oss.stage.blox.sqprod.co>
The gradient rule matched every \`.bg-sidebar\` element in the document, so it
leaked onto non-chrome surfaces that reuse the token — the persona catalog
dialog (a Radix dialog portaled to <body>, outside the app shell) and the
sidebar drag-overlay chips. Those got painted with the viewport-fixed sidebar
gradient instead of their normal panel/flat background.
- Scope the gradient selector to \`.group/sidebar-wrapper\` (the SidebarProvider
wrapper that contains the top chrome bar, sidebar column, and inset). The
persona dialog portals outside that subtree, so it keeps its own background.
- The drag-overlay pills render inside the wrapper but are transient floating
chips, not canvas surfaces, so a fixed gradient behind them shows an arbitrary
slice. Mark them \`data-buzz-flat\` and exclude that from the gradient rule.
Verified: theme screenshot spec passes (sidebar gradient unchanged across the
full canvas), desktop-check + tsc clean, no new biome warnings.
Fixes the Codex P2 review comment on PR #1630.
Signed-off-by: Fizz <8a675edd33677aa0389f6650d467b2041fb0df4ca820eacb009babb95e3715d4@sprout-oss.stage.blox.sqprod.co>
The Buzz theme overrode \`--sidebar-active\` / \`--sidebar-active-foreground\`
at :root to paint a white active pill in the nav. But those tokens back the
\`bg-sidebar-active\` / \`text-sidebar-active-foreground\` utilities, which are
also used by non-sidebar controls — the avatar edit buttons in
ProfileSettingsCard / AgentCreationPreview and the selected persona row in
PersonaCatalogDialog. Under Buzz Dark the root override set both background
and foreground to white, rendering those controls white-on-white.
Scope the two token overrides to \`[data-testid="app-sidebar"]\` so only the
sidebar nav inherits the white active tokens; non-sidebar controls fall back
to the normal accent-driven active colors. \`--buzz-hover-surface\` stays at
:root (harmless there; other Buzz sidebar rules reference it).
Verified: theme screenshot spec passes (Buzz Dark active pill unchanged),
desktop-check + tsc clean, no new biome warnings.
Fixes the Codex P2 review comment on PR #1630.
Signed-off-by: Fizz <8a675edd33677aa0389f6650d467b2041fb0df4ca820eacb009babb95e3715d4@sprout-oss.stage.blox.sqprod.co>
The Buzz aliases (buzz / buzz-dark) are not bundled Shiki themes — they
reuse the GitHub Light / GitHub Dark palettes. CodeBlock passed the raw
theme name straight to Shiki's loadTheme / codeToTokens, so under a Buzz
theme Shiki threw on the unknown name and fenced code blocks silently
fell back to unhighlighted plain text.
- theme-loader: add BUZZ_DARK_BASE_THEME and resolveShikiThemeName(), the
single source of truth mapping Buzz aliases to their real Shiki bundle
(buzz→github-light, buzz-dark→github-dark, identity otherwise).
- CodeBlock: resolve themeName through resolveShikiThemeName() once and use
the resolved name for every Shiki touchpoint (loadTheme, loadedThemes
tracking, codeToTokens, cache key, and both dependency arrays).
Fixes the Codex P2 review comment on PR #1630.
Signed-off-by: Fizz <8a675edd33677aa0389f6650d467b2041fb0df4ca820eacb009babb95e3715d4@sprout-oss.stage.blox.sqprod.co>
Introduce a first-party "Buzz" theme pair (Buzz / Buzz Dark) that reuses the
GitHub Light / GitHub Dark base palettes for every base color and adds a
branded gradient painted across the sidebar/nav canvas in place of the flat
grey.
- theme-loader: register `buzz` + `buzz-dark`, pair them in THEME_PAIRS, and
slot them first so they lead the System / Light / Dark picker categories.
Both borrow the github-light / github-dark Shiki bundles for syntax colors.
- ThemeProvider: toggle a `data-buzz-sidebar` attribute on <html> when a Buzz
theme is active (both the cached-FOUC path and the async apply path).
- theme.css: gradient fill for every `bg-sidebar` surface (header, sidebar
column, footer) anchored with `background-attachment: fixed` so they read as
one continuous ramp; white active pill (translucent tint on dark), and a
shared `--buzz-hover-surface` translucent-white token used by nav hover, the
search box, and the section "+" / "…" action buttons — replacing the GitHub
grey. All rules are scoped to `[data-buzz-sidebar]` so other themes are
untouched.
- Section action buttons pick up a `sidebar-section-action` marker class so the
Buzz hover override can target them without disturbing the shared Tailwind
class in other themes.
- ThemePreviewFrame: paint the gradient into the picker swatches (single and
System-preview tiles) via BUZZ_GRADIENT_STOPS so the tiles are honest.
Desktop-only (TS/React + CSS). `just ci` clean.
Signed-off-by: Fizz <8a675edd33677aa0389f6650d467b2041fb0df4ca820eacb009babb95e3715d4@sprout-oss.stage.blox.sqprod.co>
npub13fn4ahfnvaa2qwylvegdgeajqs0mph6v4qsw4jcqnw4mjh3hzh2quuucm5