Theme the diff panel from app theme tokens (Layer 1)#286
Merged
Conversation
The @pierre/diffs renderer drew its surface, gutter, line numbers, and +/- row tints from fixed light/dark defaults (white/black bg, generic green/red), so the diff panel ignored built-in palettes and custom CLI stylesheets. Bridge the library's `--diffs-*` CSS variable inputs to the existing app theme tokens (`--background`, `--foreground`, `--diff-added`, `--diff-removed`) in theme.css. Line numbers, context tints, separators, and the +/- row fills all derive from bg/fg inside the library, so bridging those four inputs per mode is enough. Because palettes and the custom stylesheet already override those app tokens, the diff panel (and the shared file preview) now follow every theme with no per-palette work. Syntax-highlighting token colors are unchanged — still the library's pierre-light/pierre-dark Shiki palette (that's a separate follow-up). Adds a Ladle story (GitDiffCard.stories.tsx) with a palette picker rendering a sample patch in light and dark side by side. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
The diff panel renders with
@pierre/diffs, which drew its surface, gutter, line numbers, and +/- row tints from fixed light/dark defaults (white/black background, generic green/red). So the diff panel ignored the built-in palettes and the custom CLI stylesheet entirely.This bridges the library's
--diffs-*CSS variable inputs to the existing app theme tokens intheme.css:@pierre/diffsinput--diffs-{light,dark}-bg--background--diffs-{light,dark}(line fg)--foreground--diffs-{light,dark}-addition-color--diff-added--diffs-{light,dark}-deletion-color--diff-removedLine numbers, context tints, separators, and the +/- row fills all derive from bg/fg inside the library, so bridging those four inputs per mode is enough. Because the built-in palettes and the custom stylesheet already override those app tokens, the diff panel — and the shared file preview, which uses the same
--diffs-*path — now follow every theme with no per-palette work.Light/dark inputs are declared in both the
:root, .lightand.darkblocks because custom-propertyvar()substitution resolves at the declaring element; declaring only on:rootwould bake the light value and inherit it into.dark.Scope / follow-up
Syntax-highlighting token colors (keywords/strings/comments) are unchanged — still the library's fixed
pierre-light/pierre-darkShiki palette. Theming those is a larger follow-up (a CSS-variables Shiki theme mapped to--ansi-*, registered in the diff worker).Preview
Adds a Ladle story
GitDiffCard.stories.tsxwith a palette picker rendering a sample patch in light and dark side by side. Verified visually across palettes (Catppuccin, Gruvbox) — surfaces, gutters, line numbers, +/- tints, and the stat tallies all retint to the active palette.Tests
turbo run typecheck --filter=@bb/app✅theme.test.ts(17 tests) ✅ — new tokens usevar(), so they're invisible to the neutral-ramp and oklch-transparency guards.🤖 Generated with Claude Code