authorgravatar for julius0216@outlook.comJulius Marminge <julius0216@outlook.com> 2026-02-28 11:10:11-08:00
committergravatar for jmarminge@gmail.comJulius Marminge <jmarminge@gmail.com> 2026-02-28 15:17:03-08:00
logd052d481d8c953b8728d82d3f27b2bbd0d26ac79
treeb67ec8f647c373c11b7ae3f8e4d38f9236c2cc8c
parentfcbb494af745e43642e7bcc97872419c35599de4

Move diff theme overrides into DiffPanel unsafeCSS

- 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

2 files changed, 53 insertions(+), 42 deletions(-)

apps/web/src/components/DiffPanel.tsx+47-2
...@@ -19,6 +19,47 @@ import { ToggleGroup, Toggle } from "./ui/toggle-group";...@@ -19,6 +19,47 @@ import { ToggleGroup, Toggle } from "./ui/toggle-group";
19type DiffRenderMode = "stacked" | "split";19type DiffRenderMode = "stacked" | "split";
20type DiffThemeType = "light" | "dark";20type DiffThemeType = "light" | "dark";
2121
22const 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
22type RenderablePatch =63type RenderablePatch =
23 | {64 | {
24 kind: "files";65 kind: "files";
...@@ -422,7 +463,7 @@ export default function DiffPanel({ mode = "inline" }: DiffPanelProps) {...@@ -422,7 +463,7 @@ export default function DiffPanel({ mode = "inline" }: DiffPanelProps) {
422 return (463 return (
423 <div464 <div
424 className={cn(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 mode === "inline"467 mode === "inline"
427 ? "w-[42vw] min-w-[360px] max-w-[560px] shrink-0 border-l border-border"468 ? "w-[42vw] min-w-[360px] max-w-[560px] shrink-0 border-l border-border"
428 : "w-full",469 : "w-full",
...@@ -446,7 +487,10 @@ export default function DiffPanel({ mode = "inline" }: DiffPanelProps) {...@@ -446,7 +487,10 @@ export default function DiffPanel({ mode = "inline" }: DiffPanelProps) {
446 </div>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 {checkpointDiffError && !renderablePatch && (494 {checkpointDiffError && !renderablePatch && (
451 <div className="px-3">495 <div className="px-3">
452 <p className="mb-2 text-[11px] text-red-500/80">{checkpointDiffError}</p>496 <p className="mb-2 text-[11px] text-red-500/80">{checkpointDiffError}</p>
...@@ -487,6 +531,7 @@ export default function DiffPanel({ mode = "inline" }: DiffPanelProps) {...@@ -487,6 +531,7 @@ export default function DiffPanel({ mode = "inline" }: DiffPanelProps) {
487 lineDiffType: "none",531 lineDiffType: "none",
488 theme: resolveDiffThemeName(resolvedTheme),532 theme: resolveDiffThemeName(resolvedTheme),
489 themeType: resolvedTheme as DiffThemeType,533 themeType: resolvedTheme as DiffThemeType,
534 unsafeCSS: DIFF_PANEL_UNSAFE_CSS,
490 }}535 }}
491 />536 />
492 </div>537 </div>
apps/web/src/index.css+6-40
...@@ -331,47 +331,13 @@ label:has(> select#reasoning-effort) select {...@@ -331,47 +331,13 @@ label:has(> select#reasoning-effort) select {
331}331}
332332
333/* Diffs theme bridge (match diff surfaces to app palette) */333/* Diffs theme bridge (match diff surfaces to app palette) */
334.diff-render-surface [data-diffs-header],334.diff-panel-viewport {
335.diff-render-surface [data-diff],335 background: color-mix(in srgb, var(--background) 94%, var(--card));
336.diff-render-surface [data-file],336}
337.diff-render-surface [data-error-wrapper],337
338.diff-render-surface [data-virtualizer-buffer] {338.diff-render-file {
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] {
374 border: 1px solid var(--border);339 border: 1px solid var(--border);
375 border-radius: 0.5rem;340 border-radius: 0.5rem;
376 overflow: clip;341 overflow: clip;
342 background: color-mix(in srgb, var(--card) 92%, var(--background));
377}343}