- 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/web/src/components (1 of 2 files). Show all
Unified · Split
| @@ -19,6 +19,47 @@ import { ToggleGroup, Toggle } from "./ui/toggle-group"; · 18 unmodified lines | |||
| 19 | type DiffRenderMode = "stacked" | "split"; | 19 | type DiffRenderMode = "stacked" | "split"; |
| 20 | type DiffThemeType = "light" | "dark"; | 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 | type RenderablePatch = | 63 | type RenderablePatch = |
| 23 | | { | 64 | | { |
| 24 | kind: "files"; | 65 | kind: "files"; |
| @@ -422,7 +463,7 @@ export default function DiffPanel({ mode = "inline" }: DiffPanelProps) { · 397 unmodified lines | |||
| 422 | return ( | 463 | return ( |
| 423 | <div | 464 | <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) { · 17 unmodified lines | |||
| 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) { · 34 unmodified lines | |||
| 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> |