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

Julius Marminge committed 8 months ago

Commit d052d481 parent fcbb4942 files · +53 −42Browse files

Showing the changes to apps (2 of 2 files). Show all

Unified · Split

2 files

apps/web/src/components/DiffPanel.tsx +47 −2
apps/web/src/index.css +6 −40

apps/web/src/components/DiffPanel.tsx+47−2

@@ -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>

apps/web/src/index.css+6−40

@@ -331,47 +331,13 @@ label:has(> select#reasoning-effort) select { · 330 unmodified lines
331	}	331	}
332		332
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	}