Skip to content

feat(differ): improve diff color contrast with per-side tinting#500

Merged
matt2e merged 2 commits intoblock:mainfrom
rnc505:robbyc/03-26-feat_differ_improve_diff_color_contrast_with_per-side_tinting
Mar 26, 2026
Merged

feat(differ): improve diff color contrast with per-side tinting#500
matt2e merged 2 commits intoblock:mainfrom
rnc505:robbyc/03-26-feat_differ_improve_diff_color_contrast_with_per-side_tinting

Conversation

@rnc505
Copy link
Copy Markdown
Collaborator

@rnc505 rnc505 commented Mar 26, 2026

Stack

This is PR 2/4 in a stack of Differ improvements:

  1. Graphite stack support (feat(differ): add Graphite stack support for scoped PR diffs #499)
  2. → Diff color contrast (this PR)
  3. Font sizing & titlebar fixes (feat(differ): fix font sizing, padding, and titlebar responsiveness #501)
  4. Keyboard shortcuts (feat(differ): add keyboard shortcuts for file navigation and font sizing #502)

Background

Diff line backgrounds in both Differ and Staged were using very low alpha values (4-8%), making added/removed lines nearly indistinguishable from unchanged context lines.

Overview of Changes

  • Wire per-pane CSS: before-pane uses --diff-removed-bg (red tint), after-pane uses --diff-added-bg (green tint) instead of both using neutral --diff-changed-bg
  • Bump alpha values: added/removed 0.08→0.15, changed 0.04→0.08 in Differ's static CSS
  • Update adaptive theme generator in Staged with matching alpha multipliers

Testing Performed

  • Visual inspection in both Differ and Staged apps
  • Verified contrast is visible without being distracting

Video testing (with all 4 from stack)

with gt installed without gt installed
Screen.Recording.2026-03-26.at.10.38.26.AM_compressed.mp4
Screen.Recording.2026-03-26.at.10.41.16.AM_compressed.mp4

Fixed the text overflow artifacts that you can see in the video

I just didn't want to rerecord
Screenshot 2026-03-26 at 11 20 05 AM
Screenshot 2026-03-26 at 11 20 00 AM
Screenshot 2026-03-26 at 11 19 57 AM


✨🤖 heavily assisted by AmpCode

Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 82da98451b

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

Comment on lines +797 to +799
let output = Command::new("gt")
.args(["state"])
.current_dir(repo)
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1 Badge Use a supported Graphite command for stack metadata

get_stack_info shells out to gt state and then parses stdout as JSON, but the current Graphite command reference’s full command list does not include a state subcommand (it exposes gt info, gt log, gt parent, etc.). In environments with the published CLI, this call exits non-zero and the function returns None, so stack mode is never detected/shown even when users are on a Graphite-managed branch.

Useful? React with 👍 / 👎.

@rnc505 rnc505 force-pushed the robbyc/03-26-feat_differ_improve_diff_color_contrast_with_per-side_tinting branch from 82da984 to 0c49fbc Compare March 26, 2026 20:34
rnc505 and others added 2 commits March 26, 2026 15:57
Add stack-aware diff mode that shows only the current branch's changes
instead of the entire branch diff from trunk. Detects Graphite stacks
via `gt state` and auto-selects stack mode when available.

- Add `get_stack_info` Tauri command that parses `gt state` JSON
- Add `StackInfo`/`StackBranchInfo` types and spec builders
- Add Stack dropdown with upstack/downstack branch navigation
- Navigate other stack branches without checkout (read-only refs)
- Show needs-restack warning indicator
- Graceful fallback: Stack button hidden when gt not installed

Co-authored-by: Amp <amp@ampcode.com>
Amp-Thread-ID: https://ampcode.com/threads/T-019d28f5-71eb-7256-af52-1b4c406e53a7
Diff backgrounds were nearly invisible at 4-8% alpha. Wire up the
existing but unused --diff-added-bg and --diff-removed-bg variables
to differentiate additions (green tint) from deletions (red tint).

- Wire per-pane CSS: before-pane uses --diff-removed-bg, after-pane
  uses --diff-added-bg instead of both using neutral --diff-changed-bg
- Bump alpha values: added/removed 0.08→0.15, changed 0.04→0.08
- Update adaptive theme generator with matching alpha multipliers
@rnc505 rnc505 force-pushed the robbyc/03-26-feat_differ_improve_diff_color_contrast_with_per-side_tinting branch from 0c49fbc to eb80430 Compare March 26, 2026 20:58
@matt2e matt2e merged commit 79caea1 into block:main Mar 26, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants