authorgravatar for saiansh2525@gmail.comYash Singh <saiansh2525@gmail.com> 2026-10-08 13:26:05-05:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-10-08 13:26:05-05:00
log62a5d3720f82f2dc3ace48fcb26c90c6e3976b50
treebc358c56e5c3c35ec056452f57f58c3930a0f006
parent07a8b9ece40bc20a5f84ce78d12f621518065863
signature Signed by PGP key B5690EEEBB952194

fix(web): distinguish thread search matches from code tints (#17263)

3 files changed, 68 insertions(+), 49 deletions(-)

apps/web/src/index.css+7-2
......@@ -375,8 +375,13 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
375375
376376/* Paint find results without changing rendered markdown or copied text. */
377377::highlight(t3-thread-find) {
378 color: var(--app-theme-search-match-foreground, var(--color-foreground));
379 background-color: var(--app-theme-search-match-background, oklch(0.826487 0.157967 78.604 / 0.3));
378 color: var(--app-theme-search-match-foreground, oklch(0.216164 0.028283 77.423));
379 background-color: var(--app-theme-search-match-background, oklch(0.915 0.11 85));
380
381 @variant dark {
382 color: var(--app-theme-search-match-foreground, oklch(0.970151 0 0));
383 background-color: var(--app-theme-search-match-background, oklch(0.55 0.1 85));
384 }
380385}
381386
382387::highlight(t3-thread-find-active) {
apps/web/src/themePalette.test.ts+16-4
......@@ -1,4 +1,5 @@
11import { describe, expect, it, vi } from "vite-plus/test";
2import { converter } from "culori/fn";
23import { BUILT_IN_THEMES } from "@t3tools/shared/themePalettes";
34
45import {
......@@ -91,7 +92,13 @@ describe("theme files", () => {
9192 }
9293 });
9394
94 it("keeps built-in and standard search pairs readable and distinct", () => {
95 it("keeps built-in and standard search pairs readable and distinct from inline code", () => {
96 const toOklab = converter("oklab");
97 const distance = (first: string, second: string) => {
98 const a = toOklab(first)!;
99 const b = toOklab(second)!;
100 return Math.hypot(a.l - b.l, a.a - b.a, a.b - b.b);
101 };
95102 const palettes = [
96103 getStandardThemeColors("light"),
97104 getStandardThemeColors("dark"),
......@@ -104,9 +111,14 @@ describe("theme files", () => {
104111 expect(
105112 contrastRatio(colors.searchMatchActiveForeground, colors.searchMatchActiveBackground),
106113 ).toBeGreaterThanOrEqual(4.5);
107 expect(asHex(colors.searchMatchBackground)).not.toBe(
108 asHex(colors.searchMatchActiveBackground),
109 );
114 expect(
115 distance(colors.searchMatchBackground, colors.searchMatchActiveBackground),
116 ).toBeGreaterThan(0.14);
117 // Check inline-code tints, code blocks, and user-message bubbles.
118 for (const background of [colors.muted, colors.messageSurface, colors.codeBackground]) {
119 expect(distance(colors.searchMatchBackground, background)).toBeGreaterThan(0.08);
120 expect(distance(colors.searchMatchActiveBackground, background)).toBeGreaterThan(0.08);
121 }
110122 }
111123 });
112124
packages/shared/src/themePalettes.ts+45-43
......@@ -131,10 +131,12 @@ export type ThemeDefinition = Readonly<{
131131 * pixels the user is already seeing. Alpha-bearing tokens are flattened over
132132 * their real backdrops (canvas, or the sidebar for its rows) because theme
133133 * colors are stored as opaque OKLCH tokens.
134 * Search uses amber across built-ins to separate matches from accent-tinted
135 * inline code. The current match uses a stronger gold with dark text.
134136 */
135137export const T3_CODE_LIGHT_THEME_COLORS: ThemeColors = {
136 searchMatchBackground: "#fce8c0",
137 searchMatchForeground: "#27272a",
138 searchMatchBackground: "#ffde8b",
139 searchMatchForeground: "#21180a",
138140 searchMatchActiveBackground: "#eea52b",
139141 searchMatchActiveForeground: "#21180a",
140142 canvas: "#fcfcfc",
......@@ -197,7 +199,7 @@ export const T3_CODE_LIGHT_THEME_COLORS: ThemeColors = {
197199};
198200
199201export const T3_CODE_DARK_THEME_COLORS: ThemeColors = {
200 searchMatchBackground: "#533e16",
202 searchMatchBackground: "#8c6c1f",
201203 searchMatchForeground: "#f5f5f5",
202204 searchMatchActiveBackground: "#eea52b",
203205 searchMatchActiveForeground: "#21180a",
......@@ -308,10 +310,10 @@ export const T3_CHAT_THEME: ThemeDefinition = {
308310 messageActionHover: "oklch(0.539042 0.197866 0.305)",
309311 codeBackground: "oklch(0.953855 0.019695 315.668)",
310312 codeForeground: "oklch(0.445128 0.13005 307.026)",
311 searchMatchBackground: "oklch(0.869588 0.06751 334.899)",
312 searchMatchForeground: "oklch(0.325698 0.116116 325.037)",
313 searchMatchActiveBackground: "oklch(0.591646 0.217985 0.584)",
314 searchMatchActiveForeground: "oklch(1 0 0)",
313 searchMatchBackground: "oklch(0.915 0.11 85)",
314 searchMatchForeground: "oklch(0.216164 0.028283 77.423)",
315 searchMatchActiveBackground: "oklch(0.774202 0.151946 74.331)",
316 searchMatchActiveForeground: "oklch(0.216164 0.028283 77.423)",
315317 sidebar: "oklch(0.928886 0.031178 322.592)",
316318 sidebarForeground: "oklch(0.396296 0.025134 285.196)",
317319 sidebarMutedForeground: "oklch(0.494754 0.190937 354.544)",
......@@ -372,10 +374,10 @@ export const T3_CHAT_THEME: ThemeDefinition = {
372374 messageActionHover: "oklch(0.458754 0.184639 3.857)",
373375 codeBackground: "oklch(0.22813 0.020366 307.469)",
374376 codeForeground: "oklch(0.848703 0.064239 306.645)",
375 searchMatchBackground: "oklch(0.313674 0.030572 310.061)",
376 searchMatchForeground: "oklch(0.980735 0.004092 301.426)",
377 searchMatchActiveBackground: "oklch(0.460685 0.185347 4.099)",
378 searchMatchActiveForeground: "oklch(0.901233 0.057189 343.694)",
377 searchMatchBackground: "oklch(0.55 0.1 85)",
378 searchMatchForeground: "oklch(0.970151 0 0)",
379 searchMatchActiveBackground: "oklch(0.774202 0.151946 74.331)",
380 searchMatchActiveForeground: "oklch(0.216164 0.028283 77.423)",
379381 sidebar: "oklch(0.185778 0.019368 322.159)",
380382 sidebarForeground: "oklch(0.967434 0.001326 286.375)",
381383 sidebarMutedForeground: "oklch(0.880303 0.03077 342.696)",
......@@ -443,10 +445,10 @@ export const GROVE_THEME: ThemeDefinition = {
443445 messageActionHover: "oklch(0.488753 0.096536 77.829)",
444446 codeBackground: "oklch(0.955888 0.004783 158.391)",
445447 codeForeground: "oklch(0.222003 0.03479 328.979)",
446 searchMatchBackground: "oklch(0.891377 0.026164 164.929)",
447 searchMatchForeground: "oklch(0.222003 0.03479 328.979)",
448 searchMatchActiveBackground: "oklch(0.523295 0.112292 158.089)",
449 searchMatchActiveForeground: "oklch(0.990339 0.008411 325.64)",
448 searchMatchBackground: "oklch(0.915 0.11 85)",
449 searchMatchForeground: "oklch(0.216164 0.028283 77.423)",
450 searchMatchActiveBackground: "oklch(0.774202 0.151946 74.331)",
451 searchMatchActiveForeground: "oklch(0.216164 0.028283 77.423)",
450452 sidebar: "oklch(0.936464 0.014601 163.554)",
451453 sidebarForeground: "oklch(0.222003 0.03479 328.979)",
452454 sidebarMutedForeground: "oklch(0.515606 0.011938 318.897)",
......@@ -507,10 +509,10 @@ export const GROVE_THEME: ThemeDefinition = {
507509 messageActionHover: "oklch(0.815227 0.117902 84.21)",
508510 codeBackground: "oklch(0.312979 0.018942 164.082)",
509511 codeForeground: "oklch(0.990339 0.008411 325.64)",
510 searchMatchBackground: "oklch(0.464636 0.066083 158.72)",
511 searchMatchForeground: "oklch(0.990339 0.008411 325.64)",
512 searchMatchActiveBackground: "oklch(0.796228 0.133058 157.319)",
513 searchMatchActiveForeground: "oklch(0.222003 0.03479 328.979)",
512 searchMatchBackground: "oklch(0.55 0.1 85)",
513 searchMatchForeground: "oklch(0.970151 0 0)",
514 searchMatchActiveBackground: "oklch(0.774202 0.151946 74.331)",
515 searchMatchActiveForeground: "oklch(0.216164 0.028283 77.423)",
514516 sidebar: "oklch(0.309925 0.032827 160.944)",
515517 sidebarForeground: "oklch(0.990339 0.008411 325.64)",
516518 sidebarMutedForeground: "oklch(0.711387 0.007643 175.89)",
......@@ -578,10 +580,10 @@ export const OCEAN_THEME: ThemeDefinition = {
578580 messageActionHover: "oklch(0.45151 0.074407 201.516)",
579581 codeBackground: "oklch(0.957684 0.002906 253.68)",
580582 codeForeground: "oklch(0.222003 0.03479 328.979)",
581 searchMatchBackground: "oklch(0.895373 0.023469 241.913)",
582 searchMatchForeground: "oklch(0.222003 0.03479 328.979)",
583 searchMatchActiveBackground: "oklch(0.536684 0.120219 247.01)",
584 searchMatchActiveForeground: "oklch(0.990339 0.008411 325.64)",
583 searchMatchBackground: "oklch(0.915 0.11 85)",
584 searchMatchForeground: "oklch(0.216164 0.028283 77.423)",
585 searchMatchActiveBackground: "oklch(0.774202 0.151946 74.331)",
586 searchMatchActiveForeground: "oklch(0.216164 0.028283 77.423)",
585587 sidebar: "oklch(0.939254 0.01193 241.729)",
586588 sidebarForeground: "oklch(0.222003 0.03479 328.979)",
587589 sidebarMutedForeground: "oklch(0.517366 0.018944 311.433)",
......@@ -642,10 +644,10 @@ export const OCEAN_THEME: ThemeDefinition = {
642644 messageActionHover: "oklch(0.815308 0.096174 199.862)",
643645 codeBackground: "oklch(0.29661 0.021883 251.968)",
644646 codeForeground: "oklch(0.990339 0.008411 325.64)",
645 searchMatchBackground: "oklch(0.439946 0.0561 243.479)",
646 searchMatchForeground: "oklch(0.990339 0.008411 325.64)",
647 searchMatchActiveBackground: "oklch(0.758933 0.105833 241.548)",
648 searchMatchActiveForeground: "oklch(0.222003 0.03479 328.979)",
647 searchMatchBackground: "oklch(0.55 0.1 85)",
648 searchMatchForeground: "oklch(0.970151 0 0)",
649 searchMatchActiveBackground: "oklch(0.774202 0.151946 74.331)",
650 searchMatchActiveForeground: "oklch(0.216164 0.028283 77.423)",
649651 sidebar: "oklch(0.290387 0.032043 247.274)",
650652 sidebarForeground: "oklch(0.990339 0.008411 325.64)",
651653 sidebarMutedForeground: "oklch(0.69099 0.01395 266.424)",
......@@ -713,10 +715,10 @@ export const EMBER_THEME: ThemeDefinition = {
713715 messageActionHover: "oklch(0.471223 0.145843 24.688)",
714716 codeBackground: "oklch(0.959965 0.002668 47.512)",
715717 codeForeground: "oklch(0.222003 0.03479 328.979)",
716 searchMatchBackground: "oklch(0.899296 0.022939 49.163)",
717 searchMatchForeground: "oklch(0.222003 0.03479 328.979)",
718 searchMatchActiveBackground: "oklch(0.552831 0.129438 44.656)",
719 searchMatchActiveForeground: "oklch(0.990339 0.008411 325.64)",
718 searchMatchBackground: "oklch(0.915 0.11 85)",
719 searchMatchForeground: "oklch(0.216164 0.028283 77.423)",
720 searchMatchActiveBackground: "oklch(0.774202 0.151946 74.331)",
721 searchMatchActiveForeground: "oklch(0.216164 0.028283 77.423)",
720722 sidebar: "oklch(0.942267 0.01151 50.785)",
721723 sidebarForeground: "oklch(0.222003 0.03479 328.979)",
722724 sidebarMutedForeground: "oklch(0.519146 0.019214 343.427)",
......@@ -777,10 +779,10 @@ export const EMBER_THEME: ThemeDefinition = {
777779 messageActionHover: "oklch(0.775116 0.117953 29.014)",
778780 codeBackground: "oklch(0.299662 0.017229 39.973)",
779781 codeForeground: "oklch(0.990339 0.008411 325.64)",
780 searchMatchBackground: "oklch(0.442681 0.0608 50.795)",
781 searchMatchForeground: "oklch(0.990339 0.008411 325.64)",
782 searchMatchActiveBackground: "oklch(0.762174 0.124117 52.082)",
783 searchMatchActiveForeground: "oklch(0.222003 0.03479 328.979)",
782 searchMatchBackground: "oklch(0.55 0.1 85)",
783 searchMatchForeground: "oklch(0.970151 0 0)",
784 searchMatchActiveBackground: "oklch(0.774202 0.151946 74.331)",
785 searchMatchActiveForeground: "oklch(0.216164 0.028283 77.423)",
784786 sidebar: "oklch(0.293349 0.029554 46.882)",
785787 sidebarForeground: "oklch(0.990339 0.008411 325.64)",
786788 sidebarMutedForeground: "oklch(0.691874 0.012538 24.638)",
......@@ -848,10 +850,10 @@ export const IRIS_THEME: ThemeDefinition = {
848850 messageActionHover: "oklch(0.471003 0.16748 340.687)",
849851 codeBackground: "oklch(0.95997 0.004338 306.542)",
850852 codeForeground: "oklch(0.222003 0.03479 328.979)",
851 searchMatchBackground: "oklch(0.897143 0.028558 299.758)",
852 searchMatchForeground: "oklch(0.222003 0.03479 328.979)",
853 searchMatchActiveBackground: "oklch(0.525348 0.15373 294.176)",
854 searchMatchActiveForeground: "oklch(0.990339 0.008411 325.64)",
853 searchMatchBackground: "oklch(0.915 0.11 85)",
854 searchMatchForeground: "oklch(0.216164 0.028283 77.423)",
855 searchMatchActiveBackground: "oklch(0.774202 0.151946 74.331)",
856 searchMatchActiveForeground: "oklch(0.216164 0.028283 77.423)",
855857 sidebar: "oklch(0.941387 0.014687 300.474)",
856858 sidebarForeground: "oklch(0.222003 0.03479 328.979)",
857859 sidebarMutedForeground: "oklch(0.518417 0.023683 320.681)",
......@@ -912,10 +914,10 @@ export const IRIS_THEME: ThemeDefinition = {
912914 messageActionHover: "oklch(0.813537 0.114101 337.23)",
913915 codeBackground: "oklch(0.281873 0.028308 295.193)",
914916 codeForeground: "oklch(0.990339 0.008411 325.64)",
915 searchMatchBackground: "oklch(0.395417 0.085554 294.182)",
916 searchMatchForeground: "oklch(0.990339 0.008411 325.64)",
917 searchMatchActiveBackground: "oklch(0.671712 0.169136 293.929)",
918 searchMatchActiveForeground: "oklch(0.222003 0.03479 328.979)",
917 searchMatchBackground: "oklch(0.55 0.1 85)",
918 searchMatchForeground: "oklch(0.970151 0 0)",
919 searchMatchActiveBackground: "oklch(0.774202 0.151946 74.331)",
920 searchMatchActiveForeground: "oklch(0.216164 0.028283 77.423)",
919921 sidebar: "oklch(0.266743 0.044689 294.138)",
920922 sidebarForeground: "oklch(0.990339 0.008411 325.64)",
921923 sidebarMutedForeground: "oklch(0.668773 0.021522 302.949)",