| author |  Julius Marminge <julius0216@outlook.com> 2026-02-28 11:10:11-08:00 |
| committer |  Julius Marminge <jmarminge@gmail.com> 2026-02-28 15:17:03-08:00 |
| log | d052d481d8c953b8728d82d3f27b2bbd0d26ac79 |
| tree | b67ec8f647c373c11b7ae3f8e4d38f9236c2cc8c |
| parent | fcbb494af745e43642e7bcc97872419c35599de4 |
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 tone2 files changed, 53 insertions(+), 42 deletions(-)
apps
web
src
components
- index.css
apps/web/src/components/DiffPanel.tsx+47-2
| ... | ... | @@ -19,6 +19,47 @@ import { ToggleGroup, Toggle } from "./ui/toggle-group"; |
| 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) { |
| 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) { |
| 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) { |
| 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> |
apps/web/src/index.css+6-40
| ... | ... | @@ -331,47 +331,13 @@ label:has(> select#reasoning-effort) select { |
| 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 | } |