- Inject diff palette overrides via `unsafeCSS` in `DiffPanel` - Add `diff-panel-viewport` background and keep file container border/background styling in `index.css` - Switch panel root from `bg-card` to `bg-background` for consistent surface tone
Showing the changes to apps (2 of 2 files). Show all
Unified · Split
| @@ -19,6 +19,47 @@ import { ToggleGroup, Toggle } from "./ui/toggle-group"; · 18 unmodified lines | ||
| 19 | 19 | type DiffRenderMode = "stacked" | "split"; |
| 20 | 20 | type DiffThemeType = "light" | "dark"; |
| 21 | 21 | |
| 22 | +const DIFF_PANEL_UNSAFE_CSS = ` | |
| 23 | +[data-diffs-header], | |
| 24 | +[data-diff], | |
| 25 | +[data-file], | |
| 26 | +[data-error-wrapper], | |
| 27 | +[data-virtualizer-buffer] { | |
| 28 | + --diffs-bg: color-mix(in srgb, var(--card) 90%, var(--background)) !important; | |
| 29 | + --diffs-light-bg: color-mix(in srgb, var(--card) 90%, var(--background)) !important; | |
| 30 | + --diffs-dark-bg: color-mix(in srgb, var(--card) 90%, var(--background)) !important; | |
| 31 | + --diffs-token-light-bg: transparent; | |
| 32 | + --diffs-token-dark-bg: transparent; | |
| 33 | + | |
| 34 | + --diffs-bg-context-override: color-mix(in srgb, var(--background) 97%, var(--foreground)); | |
| 35 | + --diffs-bg-hover-override: color-mix(in srgb, var(--background) 94%, var(--foreground)); | |
| 36 | + --diffs-bg-separator-override: color-mix(in srgb, var(--background) 95%, var(--foreground)); | |
| 37 | + --diffs-bg-buffer-override: color-mix(in srgb, var(--background) 90%, var(--foreground)); | |
| 38 | + | |
| 39 | + --diffs-bg-addition-override: color-mix(in srgb, var(--background) 92%, var(--success)); | |
| 40 | + --diffs-bg-addition-number-override: color-mix(in srgb, var(--background) 88%, var(--success)); | |
| 41 | + --diffs-bg-addition-hover-override: color-mix(in srgb, var(--background) 85%, var(--success)); | |
| 42 | + --diffs-bg-addition-emphasis-override: color-mix(in srgb, var(--background) 80%, var(--success)); | |
| 43 | + | |
| 44 | + --diffs-bg-deletion-override: color-mix(in srgb, var(--background) 92%, var(--destructive)); | |
| 45 | + --diffs-bg-deletion-number-override: color-mix(in srgb, var(--background) 88%, var(--destructive)); | |
| 46 | + --diffs-bg-deletion-hover-override: color-mix(in srgb, var(--background) 85%, var(--destructive)); | |
| 47 | + --diffs-bg-deletion-emphasis-override: color-mix( | |
| 48 | + in srgb, | |
| 49 | + var(--background) 80%, | |
| 50 | + var(--destructive) | |
| 51 | + ); | |
| 52 | + | |
| 53 | + background-color: var(--diffs-bg) !important; | |
| 54 | +} | |
| 55 | + | |
| 56 | +[data-file-info] { | |
| 57 | + background-color: color-mix(in srgb, var(--card) 94%, var(--foreground)) !important; | |
| 58 | + border-block-color: var(--border) !important; | |
| 59 | + color: var(--foreground) !important; | |
| 60 | +} | |
| 61 | +`; | |
| 62 | + | |
| 22 | 63 | type RenderablePatch = |
| 23 | 64 | | { |
| 24 | 65 | kind: "files"; |
| @@ -422,7 +463,7 @@ export default function DiffPanel({ mode = "inline" }: DiffPanelProps) { · 397 unmodified lines | ||
| 422 | 463 | return ( |
| 423 | 464 | <div |
| 424 | 465 | className={cn( |
| 425 | − "flex h-full min-w-0 flex-col bg-card", | |
| 466 | + "flex h-full min-w-0 flex-col bg-background", | |
| 426 | 467 | mode === "inline" |
| 427 | 468 | ? "w-[42vw] min-w-[360px] max-w-[560px] shrink-0 border-l border-border" |
| 428 | 469 | : "w-full", |
| @@ -446,7 +487,10 @@ export default function DiffPanel({ mode = "inline" }: DiffPanelProps) { · 17 unmodified lines | ||
| 446 | 487 | </div> |
| 447 | 488 | ) : ( |
| 448 | 489 | <> |
| 449 | − <div ref={patchViewportRef} className="min-h-0 min-w-0 flex-1 overflow-hidden"> | |
| 490 | + <div | |
| 491 | + ref={patchViewportRef} | |
| 492 | + className="diff-panel-viewport min-h-0 min-w-0 flex-1 overflow-hidden" | |
| 493 | + > | |
| 450 | 494 | {checkpointDiffError && !renderablePatch && ( |
| 451 | 495 | <div className="px-3"> |
| 452 | 496 | <p className="mb-2 text-[11px] text-red-500/80">{checkpointDiffError}</p> |
| @@ -487,6 +531,7 @@ export default function DiffPanel({ mode = "inline" }: DiffPanelProps) { · 34 unmodified lines | ||
| 487 | 531 | lineDiffType: "none", |
| 488 | 532 | theme: resolveDiffThemeName(resolvedTheme), |
| 489 | 533 | themeType: resolvedTheme as DiffThemeType, |
| 534 | + unsafeCSS: DIFF_PANEL_UNSAFE_CSS, | |
| 490 | 535 | }} |
| 491 | 536 | /> |
| 492 | 537 | </div> |
| @@ -331,47 +331,13 @@ label:has(> select#reasoning-effort) select { · 330 unmodified lines | ||
| 331 | 331 | } |
| 332 | 332 | |
| 333 | 333 | /* Diffs theme bridge (match diff surfaces to app palette) */ |
| 334 | −.diff-render-surface [data-diffs-header], | |
| 335 | −.diff-render-surface [data-diff], | |
| 336 | −.diff-render-surface [data-file], | |
| 337 | −.diff-render-surface [data-error-wrapper], | |
| 338 | −.diff-render-surface [data-virtualizer-buffer] { | |
| 339 | − --diffs-light-bg: color-mix(in srgb, var(--card) 92%, var(--background)); | |
| 340 | − --diffs-dark-bg: color-mix(in srgb, var(--card) 92%, var(--background)); | |
| 341 | − | |
| 342 | − --diffs-bg-context-override: color-mix(in srgb, var(--background) 97%, var(--foreground)); | |
| 343 | − --diffs-bg-hover-override: color-mix(in srgb, var(--background) 94%, var(--foreground)); | |
| 344 | − --diffs-bg-separator-override: color-mix(in srgb, var(--background) 95%, var(--foreground)); | |
| 345 | − --diffs-bg-buffer-override: color-mix(in srgb, var(--background) 90%, var(--foreground)); | |
| 346 | − | |
| 347 | − --diffs-bg-addition-override: color-mix(in srgb, var(--background) 92%, var(--success)); | |
| 348 | − --diffs-bg-addition-number-override: color-mix(in srgb, var(--background) 88%, var(--success)); | |
| 349 | − --diffs-bg-addition-hover-override: color-mix(in srgb, var(--background) 85%, var(--success)); | |
| 350 | − --diffs-bg-addition-emphasis-override: color-mix(in srgb, var(--background) 80%, var(--success)); | |
| 351 | − | |
| 352 | − --diffs-bg-deletion-override: color-mix(in srgb, var(--background) 92%, var(--destructive)); | |
| 353 | − --diffs-bg-deletion-number-override: color-mix( | |
| 354 | − in srgb, | |
| 355 | − var(--background) 88%, | |
| 356 | − var(--destructive) | |
| 357 | − ); | |
| 358 | − --diffs-bg-deletion-hover-override: color-mix(in srgb, var(--background) 85%, var(--destructive)); | |
| 359 | − --diffs-bg-deletion-emphasis-override: color-mix( | |
| 360 | − in srgb, | |
| 361 | − var(--background) 80%, | |
| 362 | − var(--destructive) | |
| 363 | − ); | |
| 364 | −} | |
| 365 | − | |
| 366 | −.diff-render-surface [data-file-info] { | |
| 367 | − background-color: color-mix(in srgb, var(--card) 94%, var(--foreground)) !important; | |
| 368 | − border-block-color: var(--border) !important; | |
| 369 | − color: var(--foreground) !important; | |
| 370 | −} | |
| 371 | − | |
| 372 | −.diff-render-file [data-diff], | |
| 373 | −.diff-render-file [data-file] { | |
| 334 | +.diff-panel-viewport { | |
| 335 | + background: color-mix(in srgb, var(--background) 94%, var(--card)); | |
| 336 | +} | |
| 337 | + | |
| 338 | +.diff-render-file { | |
| 374 | 339 | border: 1px solid var(--border); |
| 375 | 340 | border-radius: 0.5rem; |
| 376 | 341 | overflow: clip; |
| 342 | + background: color-mix(in srgb, var(--card) 92%, var(--background)); | |
| 377 | 343 | } |