From 600c2016d0361ba69e2d8f38380e4c23164f42f0 Mon Sep 17 00:00:00 2001 From: Lakshmi Tanmay Date: Mon, 2 Nov 2026 04:26:15 +0530 Subject: [PATCH 1/3] fix(web): diff colors follow appearance contrast --- apps/web/src/lib/diffRendering.ts | 31 +++++++++++++++---------------- 1 file changed, 15 insertions(+), 16 deletions(-) diff --git a/apps/web/src/lib/diffRendering.ts b/apps/web/src/lib/diffRendering.ts index 2add48cad5724..576d22bbd3120 100644 --- a/apps/web/src/lib/diffRendering.ts +++ b/apps/web/src/lib/diffRendering.ts @@ -291,37 +291,36 @@ export const DIFF_SURFACE_THEME_UNSAFE_CSS = ` --diffs-bg-buffer-override: color-mix(in srgb, var(--code-background) 90%, var(--code-foreground)); --diffs-bg-addition-override: light-dark( - color-mix(in srgb, var(--code-background) 50%, var(--diff-addition)), - color-mix(in srgb, var(--code-background) 70%, var(--diff-addition)) + color-mix(in srgb, var(--code-background) calc(50% - var(--appearance-contrast-boost, 0%) / 4), var(--diff-addition)), + color-mix(in srgb, var(--code-background) calc(70% - var(--appearance-contrast-boost, 0%) / 4), var(--diff-addition)) ); --diffs-bg-addition-number-override: light-dark( - color-mix(in srgb, var(--code-background) 35%, var(--diff-addition)), - color-mix(in srgb, var(--code-background) 60%, var(--diff-addition)) + color-mix(in srgb, var(--code-background) calc(35% - var(--appearance-contrast-boost, 0%) / 4), var(--diff-addition)), + color-mix(in srgb, var(--code-background) calc(60% - var(--appearance-contrast-boost, 0%) / 4), var(--diff-addition)) ); --diffs-bg-addition-hover-override: color-mix(in srgb, var(--code-background) 85%, var(--diff-addition)); - --diffs-bg-addition-emphasis-override: color-mix( - in srgb, - var(--code-background) 80%, - var(--diff-addition) + /* Pierre resolves emphasis on the host, before the diff's overrides can inherit. */ + --diffs-bg-addition-emphasis: light-dark( + rgb(from var(--diffs-addition-base) r g b / calc(15% + var(--appearance-contrast-boost, 0%) / 4)), + rgb(from var(--diffs-addition-base) r g b / calc(20% + var(--appearance-contrast-boost, 0%) / 4)) ); --diffs-bg-deletion-override: light-dark( - color-mix(in srgb, var(--code-background) 50%, var(--diff-deletion)), - color-mix(in srgb, var(--code-background) 70%, var(--diff-deletion)) + color-mix(in srgb, var(--code-background) calc(50% - var(--appearance-contrast-boost, 0%) / 4), var(--diff-deletion)), + color-mix(in srgb, var(--code-background) calc(70% - var(--appearance-contrast-boost, 0%) / 4), var(--diff-deletion)) ); --diffs-bg-deletion-number-override: light-dark( - color-mix(in srgb, var(--code-background) 35%, var(--diff-deletion)), - color-mix(in srgb, var(--code-background) 60%, var(--diff-deletion)) + color-mix(in srgb, var(--code-background) calc(35% - var(--appearance-contrast-boost, 0%) / 4), var(--diff-deletion)), + color-mix(in srgb, var(--code-background) calc(60% - var(--appearance-contrast-boost, 0%) / 4), var(--diff-deletion)) ); --diffs-bg-deletion-hover-override: color-mix( in srgb, var(--code-background) 85%, var(--diff-deletion) ); - --diffs-bg-deletion-emphasis-override: color-mix( - in srgb, - var(--code-background) 80%, - var(--diff-deletion) + --diffs-bg-deletion-emphasis: light-dark( + rgb(from var(--diffs-deletion-base) r g b / calc(15% + var(--appearance-contrast-boost, 0%) / 4)), + rgb(from var(--diffs-deletion-base) r g b / calc(20% + var(--appearance-contrast-boost, 0%) / 4)) ); background-color: var(--diffs-bg) !important; From c03e759719f3af90d3b711f1d4ed0e22529bc9b8 Mon Sep 17 00:00:00 2001 From: maria-rcks Date: Tue, 3 Nov 2026 01:15:01 +0000 Subject: [PATCH 2/3] fix(web): preserve light diff word readability --- apps/web/src/lib/diffRendering.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/apps/web/src/lib/diffRendering.ts b/apps/web/src/lib/diffRendering.ts index 576d22bbd3120..3b3c03d236158 100644 --- a/apps/web/src/lib/diffRendering.ts +++ b/apps/web/src/lib/diffRendering.ts @@ -300,8 +300,9 @@ export const DIFF_SURFACE_THEME_UNSAFE_CSS = ` ); --diffs-bg-addition-hover-override: color-mix(in srgb, var(--code-background) 85%, var(--diff-addition)); /* Pierre resolves emphasis on the host, before the diff's overrides can inherit. */ + /* Light emphasis stays above t3-light's readable syntax luminance floor. */ --diffs-bg-addition-emphasis: light-dark( - rgb(from var(--diffs-addition-base) r g b / calc(15% + var(--appearance-contrast-boost, 0%) / 4)), + rgb(from var(--diffs-addition-base) r g b / calc(15% + var(--appearance-contrast-boost, 0%) / 50)), rgb(from var(--diffs-addition-base) r g b / calc(20% + var(--appearance-contrast-boost, 0%) / 4)) ); @@ -319,7 +320,7 @@ export const DIFF_SURFACE_THEME_UNSAFE_CSS = ` var(--diff-deletion) ); --diffs-bg-deletion-emphasis: light-dark( - rgb(from var(--diffs-deletion-base) r g b / calc(15% + var(--appearance-contrast-boost, 0%) / 4)), + rgb(from var(--diffs-deletion-base) r g b / calc(15% + var(--appearance-contrast-boost, 0%) / 50)), rgb(from var(--diffs-deletion-base) r g b / calc(20% + var(--appearance-contrast-boost, 0%) / 4)) ); From c40407a462d3b2235eed78c24a8243ce1c84d09b Mon Sep 17 00:00:00 2001 From: maria-rcks Date: Tue, 3 Nov 2026 01:20:29 +0000 Subject: [PATCH 3/3] fix(web): keep light diff emphasis within readable opacity --- apps/web/src/lib/diffRendering.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/web/src/lib/diffRendering.ts b/apps/web/src/lib/diffRendering.ts index 3b3c03d236158..fb306c3a45b75 100644 --- a/apps/web/src/lib/diffRendering.ts +++ b/apps/web/src/lib/diffRendering.ts @@ -302,7 +302,7 @@ export const DIFF_SURFACE_THEME_UNSAFE_CSS = ` /* Pierre resolves emphasis on the host, before the diff's overrides can inherit. */ /* Light emphasis stays above t3-light's readable syntax luminance floor. */ --diffs-bg-addition-emphasis: light-dark( - rgb(from var(--diffs-addition-base) r g b / calc(15% + var(--appearance-contrast-boost, 0%) / 50)), + rgb(from var(--diffs-addition-base) r g b / 15%), rgb(from var(--diffs-addition-base) r g b / calc(20% + var(--appearance-contrast-boost, 0%) / 4)) ); @@ -320,7 +320,7 @@ export const DIFF_SURFACE_THEME_UNSAFE_CSS = ` var(--diff-deletion) ); --diffs-bg-deletion-emphasis: light-dark( - rgb(from var(--diffs-deletion-base) r g b / calc(15% + var(--appearance-contrast-boost, 0%) / 50)), + rgb(from var(--diffs-deletion-base) r g b / 15%), rgb(from var(--diffs-deletion-base) r g b / calc(20% + var(--appearance-contrast-boost, 0%) / 4)) );