mirror of https://github.com/block/buzz.git synced 2026-08-18 06:50:31 +02:00

Files

T

npub13fn4ahfnvaa2qwylvegdgeajqs0mph6v4qsw4jcqnw4mjh3hzh2quuucm5 9564cc8a38 feat(desktop): add Buzz light + dark themes with branded sidebar gradient

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>

2026-07-08 12:19:19 +01:00