Commit 0a7c662d39329eeb3cffe00d66a31f1a8241b3d7 | the-knife

apps/web/index.html+2-2

...	@@ -37,7 +37,7 @@	...	@@ -37,7 +37,7 @@
37	light: {	37	light: {
38	background: "#fdf7fd",	38	background: "#fdf7fd",
39	foreground: "#501854",	39	foreground: "#501854",
40	accent: "#e33f86",	40	accent: "#db2777",
41	chrome: "#fdf7fd",	41	chrome: "#fdf7fd",
42	},	42	},
43	dark: {	43	dark: {
...	@@ -54,7 +54,7 @@	...	@@ -54,7 +54,7 @@
54	light: {	54	light: {
55	background: "#fdf7fd",	55	background: "#fdf7fd",
56	foreground: "#501854",	56	foreground: "#501854",
57	accent: "#e33f86",	57	accent: "#db2777",
58	chrome: "#fdf7fd",	58	chrome: "#fdf7fd",
59	},	59	},
60	dark: {	60	dark: {

apps/web/src/components/chat/ModelPickerSidebar.tsx+1-1

...	@@ -29,7 +29,7 @@ const SELECTED_INDICATOR_CLASS =	...	@@ -29,7 +29,7 @@ const SELECTED_INDICATOR_CLASS =
29	"pointer-events-none absolute -right-1 top-1/2 z-10 h-5 w-0.75 -translate-y-1/2 rounded-l-full bg-primary";	29	"pointer-events-none absolute -right-1 top-1/2 z-10 h-5 w-0.75 -translate-y-1/2 rounded-l-full bg-primary";
30	const BADGE_BASE_CLASS =	30	const BADGE_BASE_CLASS =
31	"pointer-events-none absolute -right-0.5 top-0.5 z-10 flex size-3.5 items-center justify-center rounded-full bg-transparent shadow-sm ";	31	"pointer-events-none absolute -right-0.5 top-0.5 z-10 flex size-3.5 items-center justify-center rounded-full bg-transparent shadow-sm ";
32	const NEW_BADGE_CLASS = `${BADGE_BASE_CLASS} text-update `;	32	const NEW_BADGE_CLASS = `${BADGE_BASE_CLASS} text-update-foreground `;
33		33
34	/** Opens toward the rail so the list stays readable (not over the model names). */	34	/** Opens toward the rail so the list stays readable (not over the model names). */
35	const PICKER_TOOLTIP_SIDE = "left" as const;	35	const PICKER_TOOLTIP_SIDE = "left" as const;

apps/web/src/components/settings/ProviderInstanceCard.tsx+1-1

...	@@ -619,7 +619,7 @@ export function ProviderInstanceCard({	...	@@ -619,7 +619,7 @@ export function ProviderInstanceCard({
619	"size-5 rounded-sm p-0",	619	"size-5 rounded-sm p-0",
620	versionAdvisory.emphasis === "strong"	620	versionAdvisory.emphasis === "strong"
621	? "text-warning hover:text-warning"	621	? "text-warning hover:text-warning"
622	: "text-update hover:text-update",	622	: "text-update-foreground hover:text-update-foreground",
623	)}	623	)}
624	aria-label="Update available — view details"	624	aria-label="Update available — view details"
625	>	625	>

apps/web/src/components/settings/themeInspector.test.ts+3

 @@ -31,6 +31,9 @@ describe("changedThemePaintKinds", () => {
 describe("themeRoleFromUtilityClass", () => {
   it("maps semantic utilities to their actual palette role", () => {
     expect(themeRoleFromUtilityClass("text-foreground", "foreground")).toBe("text");
+    expect(themeRoleFromUtilityClass("text-muted-foreground", "foreground")).toBe(
+      "mutedForeground",
+    );
     expect(themeRoleFromUtilityClass("bg-primary/90", "background")).toBe("messageAction");
     expect(themeRoleFromUtilityClass("ring-ring", "border")).toBe("focus");
   });

apps/web/src/components/settings/themeInspector.ts+1-1

...	@@ -38,7 +38,7 @@ const THEME_UTILITY_ROLES: Readonly<Partial<Record<string, ThemeColorRole>>> = {	...	@@ -38,7 +38,7 @@ const THEME_UTILITY_ROLES: Readonly<Partial<Record<string, ThemeColorRole>>> = {
38	secondary: "secondary",	38	secondary: "secondary",
39	"secondary-foreground": "secondaryForeground",	39	"secondary-foreground": "secondaryForeground",
40	muted: "muted",	40	muted: "muted",
41	"muted-foreground": "textMuted",	41	"muted-foreground": "mutedForeground",
42	placeholder: "placeholder",	42	placeholder: "placeholder",
43	"secondary-label": "secondaryLabel",	43	"secondary-label": "secondaryLabel",
44	"icon-muted": "iconMuted",	44	"icon-muted": "iconMuted",

apps/web/src/index.css+5-5

apps/web/src/themePalette.test.ts+13-8

 @@ -113,6 +113,8 @@ describe("theme files", () => {
       expect(contrastRatio(colors.text, colors.canvas)).toBeGreaterThanOrEqual(7);
       expect(contrastRatio(colors.textMuted, colors.canvas)).toBeGreaterThanOrEqual(4.5);
       expect(contrastRatio(colors.textMuted, colors.canvas)).toBeLessThan(5.5);
+      expect(contrastRatio(colors.mutedForeground, colors.muted)).toBeGreaterThanOrEqual(4.5);
+      expect(contrastRatio(colors.placeholder, colors.surfaceRaised)).toBeGreaterThanOrEqual(4.5);
       expect(colors.secondaryLabel).toBe(colors.textMuted);
       expect(contrastRatio(colors.accentForeground, colors.accent)).toBeGreaterThanOrEqual(4.5);
       expect(
 @@ -169,7 +171,7 @@ describe("theme files", () => {
       colors: {
         canvas: "#07152f",
         accent: "#67c2ff",
-        placeholder: "#8f8699",
+        placeholder: "#968d9f",
       },
     });
   });
 @@ -315,9 +317,7 @@ describe("theme files", () => {
         4.5,
       );
       expect(contrastRatio(colors.sidebarForeground, colors.sidebar)).toBeGreaterThanOrEqual(4.5);
-      // The live light primary is intended for filled controls and clears the
+      expect(contrastRatio(colors.accentForeground, colors.accent)).toBeGreaterThanOrEqual(4.5);
-      // non-text UI-component threshold rather than normal-text AA.
-      expect(contrastRatio(colors.accentForeground, colors.accent)).toBeGreaterThanOrEqual(3);
     }
   });
 @@ -340,9 +340,7 @@ describe("theme files", () => {
             1,
           );
         }
-        expect(contrastRatio(colors!.accentForeground, colors!.accent)).toBeGreaterThanOrEqual(
+        expect(contrastRatio(colors!.accentForeground, colors!.accent)).toBeGreaterThanOrEqual(4.5);
-          theme === T3_CHAT_THEME ? 3 : 4.5,
-        );
         expect(
           contrastRatio(colors!.toolbarControlForeground, colors!.toolbarControl),
         ).toBeGreaterThanOrEqual(4.5);
 @@ -351,7 +349,14 @@ describe("theme files", () => {
         ).toBeGreaterThanOrEqual(4.5);
         expect(
           contrastRatio(colors!.messageActionForeground, colors!.messageAction),
-        ).toBeGreaterThanOrEqual(theme === T3_CHAT_THEME ? 3 : 4.5);
+        ).toBeGreaterThanOrEqual(4.5);
+        expect(
+          contrastRatio(colors!.messageActionForeground, colors!.messageActionHover),
+        ).toBeGreaterThanOrEqual(4.5);
+        expect(contrastRatio(colors!.mutedForeground, colors!.muted)).toBeGreaterThanOrEqual(4.5);
+        expect(contrastRatio(colors!.placeholder, colors!.surfaceRaised)).toBeGreaterThanOrEqual(
+          4.5,
+        );
       }
     }
   });

apps/web/src/themePalette.ts+25-18

 @@ -325,6 +325,7 @@ function legacyThemeMode(theme: ThemePreference): ThemeAppearance | null {
 // Measured from the live t3.chat default theme. Translucent chat surfaces are
 // flattened over --chat-background so this opaque palette reproduces the
 // pixels users see after T3 Chat's blur and noise layers are composited.
+// Foreground pairs deviate where necessary to keep normal text at WCAG AA.
 const T3_CHAT_LIGHT_COLORS: ThemeColors = {
   canvas: "#fdf7fd",
   // T3 Code's workspace header belongs to the chat panel, so keep it seamless
 @@ -346,31 +347,31 @@ const T3_CHAT_LIGHT_COLORS: ThemeColors = {
   border: "#eee1ed",
   input: "#e7c1dc",
   focus: "#db2777",
-  accent: "#e33f86",
+  accent: "#db2777",
   accentForeground: "#ffffff",
   secondary: "#f1c4e6",
   secondaryForeground: "#77347c",
   muted: "#eaa7cb",
-  mutedForeground: "#ac1668",
+  mutedForeground: "#8d1255",
-  placeholder: "#ad83b0",
+  placeholder: "#8b5f90",
   secondaryLabel: "#ac1668",
   iconMuted: "#ac1668",
   error: "#f7086c",
   errorForeground: "#9d174d",
   errorSurface: "#fde4f1",
   warning: "#f59e0b",
-  warningForeground: "#b45309",
+  warningForeground: "#b05109",
   warningSurface: "#fcf0ea",
-  update: "#e33f86",
+  update: "#db2777",
   updateForeground: "#ac1668",
   updateSurface: "#fadfef",
   accentSurface: "#f3e6f5",
   accentSurfaceForeground: "#454554",
   messageSurface: "#f7def2",
   messageForeground: "#492c61",
-  messageAction: "#e33f86",
+  messageAction: "#db2777",
   messageActionForeground: "#ffffff",
-  messageActionHover: "#d56698",
+  messageActionHover: "#c12269",
   // T3 Chat uses a light lavender code surface in light mode. Keeping the
   // dark plum pair here also leaked the dark palette into T3 Code's diffs.
   codeBackground: "#f5ecf9",
 @@ -422,7 +423,7 @@ const T3_CHAT_DARK_COLORS: ThemeColors = {
   secondaryForeground: "#d4c7e1",
   muted: "#423a45",
   mutedForeground: "#e7d0dd",
-  placeholder: "#8f8699",
+  placeholder: "#968d9f",
   secondaryLabel: "#e7d0dd",
   iconMuted: "#d4c7e1",
   error: "#9d174d",
 @@ -549,8 +550,8 @@ const T3_CODE_DARK_THEME_COLORS: ThemeColors = {
   textMuted: "#818181",
   border: "#191919",
   input: "#1e1e1e",
-  focus: "#366ffb",
+  focus: "#346bf1",
-  accent: "#366ffb",
+  accent: "#346bf1",
   accentForeground: "#ffffff",
   secondary: "#141414",
   secondaryForeground: "#f5f5f5",
 @@ -565,16 +566,16 @@ const T3_CODE_DARK_THEME_COLORS: ThemeColors = {
   warning: "#fe9a00",
   warningForeground: "#ffb900",
   warningSurface: "#312108",
-  update: "#366ffb",
+  update: "#346bf1",
   updateForeground: "#51a2ff",
-  updateSurface: "#121c35",
+  updateSurface: "#121b34",
   accentSurface: "#141414",
   accentSurfaceForeground: "#f5f5f5",
   messageSurface: "#141414",
   messageForeground: "#f5f5f5",
-  messageAction: "#366ffb",
+  messageAction: "#346bf1",
   messageActionForeground: "#ffffff",
-  messageActionHover: "#3265e3",
+  messageActionHover: "#3061d9",
   codeBackground: "#111111",
   codeForeground: "#f5f5f5",
   sidebar: "#000000",
 @@ -941,12 +942,14 @@ export function createVividThemeColors(
   const sidebarRgb = themeOklchToRgb(sidebar);
   const surface = surfaceAt(0.015);
   const surfaceRaised = surfaceAt(0.05);
+  const surfaceRaisedRgb = themeOklchToRgb(surfaceRaised);
   const surfaceOverlay = surfaceAt(0.075);
   const border = surfaceAt(dark ? 0.16 : 0.12, Math.min(0.07, accent.C * 0.35));
   const input = surfaceAt(dark ? 0.21 : 0.16, Math.min(0.08, accent.C * 0.4));
   const secondary = surfaceAt(dark ? 0.1 : 0.06, Math.min(0.09, accent.C * 0.5));
   const secondaryRgb = themeOklchToRgb(secondary);
   const muted = surfaceAt(dark ? 0.06 : 0.04, Math.min(0.06, accent.C * 0.35));
+  const mutedRgb = themeOklchToRgb(muted);
   const accentSurface = surfaceAt(dark ? 0.13 : 0.08, Math.min(0.11, accent.C * 0.55));
   const accentSurfaceRgb = themeOklchToRgb(accentSurface);
   const messageSurface = surfaceAt(dark ? 0.16 : 0.1, Math.min(0.13, accent.C * 0.6));
 @@ -958,6 +961,8 @@ export function createVividThemeColors(
     themeRgbToHexColor(
       themeOklchToRgb(solveOklchLightness(textBase, surfaceRgb, 4.6, dark ? "lighter" : "darker")),
     );
+  const mutedForeground = foregroundOn(mutedRgb);
+  const placeholder = foregroundOn(surfaceRaisedRgb);
   const actionHover: ThemeOklch = { ...action, L: action.L + (dark ? 0.06 : -0.06) };
 @@ -986,8 +991,8 @@ export function createVividThemeColors(
     secondary: hex(secondary),
     secondaryForeground: foregroundOn(secondaryRgb),
     muted: hex(muted),
-    mutedForeground: themeRgbToHexColor(textMutedRgb),
+    mutedForeground,
-    placeholder: themeRgbToHexColor(textMutedRgb),
+    placeholder,
     secondaryLabel: themeRgbToHexColor(textMutedRgb),
     iconMuted: themeRgbToHexColor(textMutedRgb),
     update: themeRgbToHexColor(accentRgb),
 @@ -1174,6 +1179,8 @@ export function createManagedThemeColors(
   const surfaceOverlay = mixThemeRgbColors(canvas, text, appearance === "dark" ? 0.18 : 0.06);
   const secondary = mixThemeRgbColors(canvas, accent, appearance === "dark" ? 0.2 : 0.08);
   const muted = mixThemeRgbColors(canvas, accent, appearance === "dark" ? 0.13 : 0.06);
+  const mutedForeground = readableThemeText(muted, text, 1, 4.6);
+  const placeholder = readableThemeText(surfaceRaised, text, 1, 4.6);
   const accentSurface = mixThemeRgbColors(canvas, accent, appearance === "dark" ? 0.3 : 0.14);
   const messageSurface = mixThemeRgbColors(canvas, accent, appearance === "dark" ? 0.36 : 0.18);
   const toolbarControl = mixThemeRgbColors(chrome, accent, appearance === "dark" ? 0.2 : 0.08);
 @@ -1244,8 +1251,8 @@ export function createManagedThemeColors(
     secondary: themeRgbToHexColor(secondary),
     secondaryForeground: themeRgbToHexColor(readableThemeForeground(secondary)),
     muted: themeRgbToHexColor(muted),
-    mutedForeground: themeRgbToHexColor(textMuted),
+    mutedForeground: themeRgbToHexColor(mutedForeground),
-    placeholder: themeRgbToHexColor(textMuted),
+    placeholder: themeRgbToHexColor(placeholder),
     secondaryLabel: themeRgbToHexColor(textMuted),
     iconMuted: themeRgbToHexColor(textMuted),
     accentSurface: themeRgbToHexColor(accentSurface),

author	Chris Deeming <chris@xenforo.com> 2026-08-10 17:06:55+01:00
committer	GitHub <noreply@github.com> 2026-08-10 12:06:55-04:00
log	0a7c662d39329eeb3cffe00d66a31f1a8241b3d7
tree	5c7080cb67e84ec872983324d950140f7a286d52
parent	b91a000a17ddb4937397151a0a39a07990ad6473
signature	Signed by PGP key B5690EEEBB952194

...	@@ -932,7 +932,7 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil	...	@@ -932,7 +932,7 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
932	--destructive: var(--error);	932	--destructive: var(--error);
933	--border: var(--color-zinc-200);	933	--border: var(--color-zinc-200);
934	--input: var(--color-zinc-300);	934	--input: var(--color-zinc-300);
935	--ring: oklch(0.488 0.217 264);	935	--ring: var(--primary);
936	--destructive-foreground: var(--error-foreground);	936	--destructive-foreground: var(--error-foreground);
937	--info: var(--color-blue-500);	937	--info: var(--color-blue-500);
938	--info-foreground: var(--color-blue-700);	938	--info-foreground: var(--color-blue-700);
...	@@ -976,7 +976,7 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil	...	@@ -976,7 +976,7 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
976	--card-foreground: var(--color-neutral-100);	976	--card-foreground: var(--color-neutral-100);
977	--popover: color-mix(in srgb, var(--background) 94%, var(--color-white));	977	--popover: color-mix(in srgb, var(--background) 94%, var(--color-white));
978	--popover-foreground: var(--color-neutral-100);	978	--popover-foreground: var(--color-neutral-100);
979	--primary: oklch(0.588 0.217 264);	979	--primary: oklch(0.571 0.21 264);
980	--primary-foreground: var(--color-white);	980	--primary-foreground: var(--color-white);
981	--secondary: --alpha(var(--color-white) / 4%);	981	--secondary: --alpha(var(--color-white) / 4%);
982	--secondary-foreground: var(--color-neutral-100);	982	--secondary-foreground: var(--color-neutral-100);
...	@@ -998,7 +998,7 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil	...	@@ -998,7 +998,7 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
998	--destructive: var(--error);	998	--destructive: var(--error);
999	--border: --alpha(var(--color-white) / 6%);	999	--border: --alpha(var(--color-white) / 6%);
1000	--input: --alpha(var(--color-white) / 8%);	1000	--input: --alpha(var(--color-white) / 8%);
1001	--ring: oklch(0.588 0.217 264);	1001	--ring: var(--primary);
1002	--destructive-foreground: var(--error-foreground);	1002	--destructive-foreground: var(--error-foreground);
1003	--info: var(--color-blue-500);	1003	--info: var(--color-blue-500);
1004	--info-foreground: var(--color-blue-400);	1004	--info-foreground: var(--color-blue-400);
...	@@ -1109,7 +1109,7 @@ html.dark[data-theme-id] {	...	@@ -1109,7 +1109,7 @@ html.dark[data-theme-id] {
1109	--secondary: var(--app-theme-secondary);	1109	--secondary: var(--app-theme-secondary);
1110	--secondary-foreground: var(--app-theme-secondary-foreground);	1110	--secondary-foreground: var(--app-theme-secondary-foreground);
1111	--muted: var(--app-theme-muted);	1111	--muted: var(--app-theme-muted);
1112	--muted-foreground: var(--app-theme-text-muted);	1112	--muted-foreground: var(--app-theme-muted-foreground);
1113	--placeholder: var(--app-theme-placeholder);	1113	--placeholder: var(--app-theme-placeholder);
1114	--secondary-label: var(--app-theme-secondary-label);	1114	--secondary-label: var(--app-theme-secondary-label);
1115	--icon-muted: var(--app-theme-icon-muted);	1115	--icon-muted: var(--app-theme-icon-muted);
...	@@ -1359,7 +1359,7 @@ html[data-theme-id] [data-app-sidebar] {	...	@@ -1359,7 +1359,7 @@ html[data-theme-id] [data-app-sidebar] {
1359	--accent: var(--app-theme-accent-surface);	1359	--accent: var(--app-theme-accent-surface);
1360	--accent-foreground: var(--app-theme-accent-surface-foreground);	1360	--accent-foreground: var(--app-theme-accent-surface-foreground);
1361	--muted: var(--app-theme-muted);	1361	--muted: var(--app-theme-muted);
1362	--muted-foreground: var(--app-theme-text-muted);	1362	--muted-foreground: var(--app-theme-muted-foreground);
1363	--border: var(--app-theme-border);	1363	--border: var(--app-theme-border);
1364	--input: var(--app-theme-input);	1364	--input: var(--app-theme-input);
1365	--sidebar: var(--app-theme-sidebar);	1365	--sidebar: var(--app-theme-sidebar);

fix(web): improve built-in theme contrast (#6000)