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...@@ -375,8 +375,13 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
375375
376/* Paint find results without changing rendered markdown or copied text. */376/* Paint find results without changing rendered markdown or copied text. */
377::highlight(t3-thread-find) {377::highlight(t3-thread-find) {
378 color: var(--app-theme-search-match-foreground, var(--color-foreground));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.826487 0.157967 78.604 / 0.3));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 }
380}385}
381386
382::highlight(t3-thread-find-active) {387::highlight(t3-thread-find-active) {
apps/web/src/themePalette.test.ts+16-4
...@@ -1,4 +1,5 @@...@@ -1,4 +1,5 @@
1import { describe, expect, it, vi } from "vite-plus/test";1import { describe, expect, it, vi } from "vite-plus/test";
2import { converter } from "culori/fn";
2import { BUILT_IN_THEMES } from "@t3tools/shared/themePalettes";3import { BUILT_IN_THEMES } from "@t3tools/shared/themePalettes";
34
4import {5import {
...@@ -91,7 +92,13 @@ describe("theme files", () => {...@@ -91,7 +92,13 @@ describe("theme files", () => {
91 }92 }
92 });93 });
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 };
95 const palettes = [102 const palettes = [
96 getStandardThemeColors("light"),103 getStandardThemeColors("light"),
97 getStandardThemeColors("dark"),104 getStandardThemeColors("dark"),
...@@ -104,9 +111,14 @@ describe("theme files", () => {...@@ -104,9 +111,14 @@ describe("theme files", () => {
104 expect(111 expect(
105 contrastRatio(colors.searchMatchActiveForeground, colors.searchMatchActiveBackground),112 contrastRatio(colors.searchMatchActiveForeground, colors.searchMatchActiveBackground),
106 ).toBeGreaterThanOrEqual(4.5);113 ).toBeGreaterThanOrEqual(4.5);
107 expect(asHex(colors.searchMatchBackground)).not.toBe(114 expect(
108 asHex(colors.searchMatchActiveBackground),115 distance(colors.searchMatchBackground, colors.searchMatchActiveBackground),
109 );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 }
110 }122 }
111 });123 });
112124
packages/shared/src/themePalettes.ts+45-43
...@@ -131,10 +131,12 @@ export type ThemeDefinition = Readonly<{...@@ -131,10 +131,12 @@ export type ThemeDefinition = Readonly<{
131 * pixels the user is already seeing. Alpha-bearing tokens are flattened over131 * pixels the user is already seeing. Alpha-bearing tokens are flattened over
132 * their real backdrops (canvas, or the sidebar for its rows) because theme132 * their real backdrops (canvas, or the sidebar for its rows) because theme
133 * colors are stored as opaque OKLCH tokens.133 * 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.
134 */136 */
135export const T3_CODE_LIGHT_THEME_COLORS: ThemeColors = {137export const T3_CODE_LIGHT_THEME_COLORS: ThemeColors = {
136 searchMatchBackground: "#fce8c0",138 searchMatchBackground: "#ffde8b",
137 searchMatchForeground: "#27272a",139 searchMatchForeground: "#21180a",
138 searchMatchActiveBackground: "#eea52b",140 searchMatchActiveBackground: "#eea52b",
139 searchMatchActiveForeground: "#21180a",141 searchMatchActiveForeground: "#21180a",
140 canvas: "#fcfcfc",142 canvas: "#fcfcfc",
...@@ -197,7 +199,7 @@ export const T3_CODE_LIGHT_THEME_COLORS: ThemeColors = {...@@ -197,7 +199,7 @@ export const T3_CODE_LIGHT_THEME_COLORS: ThemeColors = {
197};199};
198200
199export const T3_CODE_DARK_THEME_COLORS: ThemeColors = {201export const T3_CODE_DARK_THEME_COLORS: ThemeColors = {
200 searchMatchBackground: "#533e16",202 searchMatchBackground: "#8c6c1f",
201 searchMatchForeground: "#f5f5f5",203 searchMatchForeground: "#f5f5f5",
202 searchMatchActiveBackground: "#eea52b",204 searchMatchActiveBackground: "#eea52b",
203 searchMatchActiveForeground: "#21180a",205 searchMatchActiveForeground: "#21180a",
...@@ -308,10 +310,10 @@ export const T3_CHAT_THEME: ThemeDefinition = {...@@ -308,10 +310,10 @@ export const T3_CHAT_THEME: ThemeDefinition = {
308 messageActionHover: "oklch(0.539042 0.197866 0.305)",310 messageActionHover: "oklch(0.539042 0.197866 0.305)",
309 codeBackground: "oklch(0.953855 0.019695 315.668)",311 codeBackground: "oklch(0.953855 0.019695 315.668)",
310 codeForeground: "oklch(0.445128 0.13005 307.026)",312 codeForeground: "oklch(0.445128 0.13005 307.026)",
311 searchMatchBackground: "oklch(0.869588 0.06751 334.899)",313 searchMatchBackground: "oklch(0.915 0.11 85)",
312 searchMatchForeground: "oklch(0.325698 0.116116 325.037)",314 searchMatchForeground: "oklch(0.216164 0.028283 77.423)",
313 searchMatchActiveBackground: "oklch(0.591646 0.217985 0.584)",315 searchMatchActiveBackground: "oklch(0.774202 0.151946 74.331)",
314 searchMatchActiveForeground: "oklch(1 0 0)",316 searchMatchActiveForeground: "oklch(0.216164 0.028283 77.423)",
315 sidebar: "oklch(0.928886 0.031178 322.592)",317 sidebar: "oklch(0.928886 0.031178 322.592)",
316 sidebarForeground: "oklch(0.396296 0.025134 285.196)",318 sidebarForeground: "oklch(0.396296 0.025134 285.196)",
317 sidebarMutedForeground: "oklch(0.494754 0.190937 354.544)",319 sidebarMutedForeground: "oklch(0.494754 0.190937 354.544)",
...@@ -372,10 +374,10 @@ export const T3_CHAT_THEME: ThemeDefinition = {...@@ -372,10 +374,10 @@ export const T3_CHAT_THEME: ThemeDefinition = {
372 messageActionHover: "oklch(0.458754 0.184639 3.857)",374 messageActionHover: "oklch(0.458754 0.184639 3.857)",
373 codeBackground: "oklch(0.22813 0.020366 307.469)",375 codeBackground: "oklch(0.22813 0.020366 307.469)",
374 codeForeground: "oklch(0.848703 0.064239 306.645)",376 codeForeground: "oklch(0.848703 0.064239 306.645)",
375 searchMatchBackground: "oklch(0.313674 0.030572 310.061)",377 searchMatchBackground: "oklch(0.55 0.1 85)",
376 searchMatchForeground: "oklch(0.980735 0.004092 301.426)",378 searchMatchForeground: "oklch(0.970151 0 0)",
377 searchMatchActiveBackground: "oklch(0.460685 0.185347 4.099)",379 searchMatchActiveBackground: "oklch(0.774202 0.151946 74.331)",
378 searchMatchActiveForeground: "oklch(0.901233 0.057189 343.694)",380 searchMatchActiveForeground: "oklch(0.216164 0.028283 77.423)",
379 sidebar: "oklch(0.185778 0.019368 322.159)",381 sidebar: "oklch(0.185778 0.019368 322.159)",
380 sidebarForeground: "oklch(0.967434 0.001326 286.375)",382 sidebarForeground: "oklch(0.967434 0.001326 286.375)",
381 sidebarMutedForeground: "oklch(0.880303 0.03077 342.696)",383 sidebarMutedForeground: "oklch(0.880303 0.03077 342.696)",
...@@ -443,10 +445,10 @@ export const GROVE_THEME: ThemeDefinition = {...@@ -443,10 +445,10 @@ export const GROVE_THEME: ThemeDefinition = {
443 messageActionHover: "oklch(0.488753 0.096536 77.829)",445 messageActionHover: "oklch(0.488753 0.096536 77.829)",
444 codeBackground: "oklch(0.955888 0.004783 158.391)",446 codeBackground: "oklch(0.955888 0.004783 158.391)",
445 codeForeground: "oklch(0.222003 0.03479 328.979)",447 codeForeground: "oklch(0.222003 0.03479 328.979)",
446 searchMatchBackground: "oklch(0.891377 0.026164 164.929)",448 searchMatchBackground: "oklch(0.915 0.11 85)",
447 searchMatchForeground: "oklch(0.222003 0.03479 328.979)",449 searchMatchForeground: "oklch(0.216164 0.028283 77.423)",
448 searchMatchActiveBackground: "oklch(0.523295 0.112292 158.089)",450 searchMatchActiveBackground: "oklch(0.774202 0.151946 74.331)",
449 searchMatchActiveForeground: "oklch(0.990339 0.008411 325.64)",451 searchMatchActiveForeground: "oklch(0.216164 0.028283 77.423)",
450 sidebar: "oklch(0.936464 0.014601 163.554)",452 sidebar: "oklch(0.936464 0.014601 163.554)",
451 sidebarForeground: "oklch(0.222003 0.03479 328.979)",453 sidebarForeground: "oklch(0.222003 0.03479 328.979)",
452 sidebarMutedForeground: "oklch(0.515606 0.011938 318.897)",454 sidebarMutedForeground: "oklch(0.515606 0.011938 318.897)",
...@@ -507,10 +509,10 @@ export const GROVE_THEME: ThemeDefinition = {...@@ -507,10 +509,10 @@ export const GROVE_THEME: ThemeDefinition = {
507 messageActionHover: "oklch(0.815227 0.117902 84.21)",509 messageActionHover: "oklch(0.815227 0.117902 84.21)",
508 codeBackground: "oklch(0.312979 0.018942 164.082)",510 codeBackground: "oklch(0.312979 0.018942 164.082)",
509 codeForeground: "oklch(0.990339 0.008411 325.64)",511 codeForeground: "oklch(0.990339 0.008411 325.64)",
510 searchMatchBackground: "oklch(0.464636 0.066083 158.72)",512 searchMatchBackground: "oklch(0.55 0.1 85)",
511 searchMatchForeground: "oklch(0.990339 0.008411 325.64)",513 searchMatchForeground: "oklch(0.970151 0 0)",
512 searchMatchActiveBackground: "oklch(0.796228 0.133058 157.319)",514 searchMatchActiveBackground: "oklch(0.774202 0.151946 74.331)",
513 searchMatchActiveForeground: "oklch(0.222003 0.03479 328.979)",515 searchMatchActiveForeground: "oklch(0.216164 0.028283 77.423)",
514 sidebar: "oklch(0.309925 0.032827 160.944)",516 sidebar: "oklch(0.309925 0.032827 160.944)",
515 sidebarForeground: "oklch(0.990339 0.008411 325.64)",517 sidebarForeground: "oklch(0.990339 0.008411 325.64)",
516 sidebarMutedForeground: "oklch(0.711387 0.007643 175.89)",518 sidebarMutedForeground: "oklch(0.711387 0.007643 175.89)",
...@@ -578,10 +580,10 @@ export const OCEAN_THEME: ThemeDefinition = {...@@ -578,10 +580,10 @@ export const OCEAN_THEME: ThemeDefinition = {
578 messageActionHover: "oklch(0.45151 0.074407 201.516)",580 messageActionHover: "oklch(0.45151 0.074407 201.516)",
579 codeBackground: "oklch(0.957684 0.002906 253.68)",581 codeBackground: "oklch(0.957684 0.002906 253.68)",
580 codeForeground: "oklch(0.222003 0.03479 328.979)",582 codeForeground: "oklch(0.222003 0.03479 328.979)",
581 searchMatchBackground: "oklch(0.895373 0.023469 241.913)",583 searchMatchBackground: "oklch(0.915 0.11 85)",
582 searchMatchForeground: "oklch(0.222003 0.03479 328.979)",584 searchMatchForeground: "oklch(0.216164 0.028283 77.423)",
583 searchMatchActiveBackground: "oklch(0.536684 0.120219 247.01)",585 searchMatchActiveBackground: "oklch(0.774202 0.151946 74.331)",
584 searchMatchActiveForeground: "oklch(0.990339 0.008411 325.64)",586 searchMatchActiveForeground: "oklch(0.216164 0.028283 77.423)",
585 sidebar: "oklch(0.939254 0.01193 241.729)",587 sidebar: "oklch(0.939254 0.01193 241.729)",
586 sidebarForeground: "oklch(0.222003 0.03479 328.979)",588 sidebarForeground: "oklch(0.222003 0.03479 328.979)",
587 sidebarMutedForeground: "oklch(0.517366 0.018944 311.433)",589 sidebarMutedForeground: "oklch(0.517366 0.018944 311.433)",
...@@ -642,10 +644,10 @@ export const OCEAN_THEME: ThemeDefinition = {...@@ -642,10 +644,10 @@ export const OCEAN_THEME: ThemeDefinition = {
642 messageActionHover: "oklch(0.815308 0.096174 199.862)",644 messageActionHover: "oklch(0.815308 0.096174 199.862)",
643 codeBackground: "oklch(0.29661 0.021883 251.968)",645 codeBackground: "oklch(0.29661 0.021883 251.968)",
644 codeForeground: "oklch(0.990339 0.008411 325.64)",646 codeForeground: "oklch(0.990339 0.008411 325.64)",
645 searchMatchBackground: "oklch(0.439946 0.0561 243.479)",647 searchMatchBackground: "oklch(0.55 0.1 85)",
646 searchMatchForeground: "oklch(0.990339 0.008411 325.64)",648 searchMatchForeground: "oklch(0.970151 0 0)",
647 searchMatchActiveBackground: "oklch(0.758933 0.105833 241.548)",649 searchMatchActiveBackground: "oklch(0.774202 0.151946 74.331)",
648 searchMatchActiveForeground: "oklch(0.222003 0.03479 328.979)",650 searchMatchActiveForeground: "oklch(0.216164 0.028283 77.423)",
649 sidebar: "oklch(0.290387 0.032043 247.274)",651 sidebar: "oklch(0.290387 0.032043 247.274)",
650 sidebarForeground: "oklch(0.990339 0.008411 325.64)",652 sidebarForeground: "oklch(0.990339 0.008411 325.64)",
651 sidebarMutedForeground: "oklch(0.69099 0.01395 266.424)",653 sidebarMutedForeground: "oklch(0.69099 0.01395 266.424)",
...@@ -713,10 +715,10 @@ export const EMBER_THEME: ThemeDefinition = {...@@ -713,10 +715,10 @@ export const EMBER_THEME: ThemeDefinition = {
713 messageActionHover: "oklch(0.471223 0.145843 24.688)",715 messageActionHover: "oklch(0.471223 0.145843 24.688)",
714 codeBackground: "oklch(0.959965 0.002668 47.512)",716 codeBackground: "oklch(0.959965 0.002668 47.512)",
715 codeForeground: "oklch(0.222003 0.03479 328.979)",717 codeForeground: "oklch(0.222003 0.03479 328.979)",
716 searchMatchBackground: "oklch(0.899296 0.022939 49.163)",718 searchMatchBackground: "oklch(0.915 0.11 85)",
717 searchMatchForeground: "oklch(0.222003 0.03479 328.979)",719 searchMatchForeground: "oklch(0.216164 0.028283 77.423)",
718 searchMatchActiveBackground: "oklch(0.552831 0.129438 44.656)",720 searchMatchActiveBackground: "oklch(0.774202 0.151946 74.331)",
719 searchMatchActiveForeground: "oklch(0.990339 0.008411 325.64)",721 searchMatchActiveForeground: "oklch(0.216164 0.028283 77.423)",
720 sidebar: "oklch(0.942267 0.01151 50.785)",722 sidebar: "oklch(0.942267 0.01151 50.785)",
721 sidebarForeground: "oklch(0.222003 0.03479 328.979)",723 sidebarForeground: "oklch(0.222003 0.03479 328.979)",
722 sidebarMutedForeground: "oklch(0.519146 0.019214 343.427)",724 sidebarMutedForeground: "oklch(0.519146 0.019214 343.427)",
...@@ -777,10 +779,10 @@ export const EMBER_THEME: ThemeDefinition = {...@@ -777,10 +779,10 @@ export const EMBER_THEME: ThemeDefinition = {
777 messageActionHover: "oklch(0.775116 0.117953 29.014)",779 messageActionHover: "oklch(0.775116 0.117953 29.014)",
778 codeBackground: "oklch(0.299662 0.017229 39.973)",780 codeBackground: "oklch(0.299662 0.017229 39.973)",
779 codeForeground: "oklch(0.990339 0.008411 325.64)",781 codeForeground: "oklch(0.990339 0.008411 325.64)",
780 searchMatchBackground: "oklch(0.442681 0.0608 50.795)",782 searchMatchBackground: "oklch(0.55 0.1 85)",
781 searchMatchForeground: "oklch(0.990339 0.008411 325.64)",783 searchMatchForeground: "oklch(0.970151 0 0)",
782 searchMatchActiveBackground: "oklch(0.762174 0.124117 52.082)",784 searchMatchActiveBackground: "oklch(0.774202 0.151946 74.331)",
783 searchMatchActiveForeground: "oklch(0.222003 0.03479 328.979)",785 searchMatchActiveForeground: "oklch(0.216164 0.028283 77.423)",
784 sidebar: "oklch(0.293349 0.029554 46.882)",786 sidebar: "oklch(0.293349 0.029554 46.882)",
785 sidebarForeground: "oklch(0.990339 0.008411 325.64)",787 sidebarForeground: "oklch(0.990339 0.008411 325.64)",
786 sidebarMutedForeground: "oklch(0.691874 0.012538 24.638)",788 sidebarMutedForeground: "oklch(0.691874 0.012538 24.638)",
...@@ -848,10 +850,10 @@ export const IRIS_THEME: ThemeDefinition = {...@@ -848,10 +850,10 @@ export const IRIS_THEME: ThemeDefinition = {
848 messageActionHover: "oklch(0.471003 0.16748 340.687)",850 messageActionHover: "oklch(0.471003 0.16748 340.687)",
849 codeBackground: "oklch(0.95997 0.004338 306.542)",851 codeBackground: "oklch(0.95997 0.004338 306.542)",
850 codeForeground: "oklch(0.222003 0.03479 328.979)",852 codeForeground: "oklch(0.222003 0.03479 328.979)",
851 searchMatchBackground: "oklch(0.897143 0.028558 299.758)",853 searchMatchBackground: "oklch(0.915 0.11 85)",
852 searchMatchForeground: "oklch(0.222003 0.03479 328.979)",854 searchMatchForeground: "oklch(0.216164 0.028283 77.423)",
853 searchMatchActiveBackground: "oklch(0.525348 0.15373 294.176)",855 searchMatchActiveBackground: "oklch(0.774202 0.151946 74.331)",
854 searchMatchActiveForeground: "oklch(0.990339 0.008411 325.64)",856 searchMatchActiveForeground: "oklch(0.216164 0.028283 77.423)",
855 sidebar: "oklch(0.941387 0.014687 300.474)",857 sidebar: "oklch(0.941387 0.014687 300.474)",
856 sidebarForeground: "oklch(0.222003 0.03479 328.979)",858 sidebarForeground: "oklch(0.222003 0.03479 328.979)",
857 sidebarMutedForeground: "oklch(0.518417 0.023683 320.681)",859 sidebarMutedForeground: "oklch(0.518417 0.023683 320.681)",
...@@ -912,10 +914,10 @@ export const IRIS_THEME: ThemeDefinition = {...@@ -912,10 +914,10 @@ export const IRIS_THEME: ThemeDefinition = {
912 messageActionHover: "oklch(0.813537 0.114101 337.23)",914 messageActionHover: "oklch(0.813537 0.114101 337.23)",
913 codeBackground: "oklch(0.281873 0.028308 295.193)",915 codeBackground: "oklch(0.281873 0.028308 295.193)",
914 codeForeground: "oklch(0.990339 0.008411 325.64)",916 codeForeground: "oklch(0.990339 0.008411 325.64)",
915 searchMatchBackground: "oklch(0.395417 0.085554 294.182)",917 searchMatchBackground: "oklch(0.55 0.1 85)",
916 searchMatchForeground: "oklch(0.990339 0.008411 325.64)",918 searchMatchForeground: "oklch(0.970151 0 0)",
917 searchMatchActiveBackground: "oklch(0.671712 0.169136 293.929)",919 searchMatchActiveBackground: "oklch(0.774202 0.151946 74.331)",
918 searchMatchActiveForeground: "oklch(0.222003 0.03479 328.979)",920 searchMatchActiveForeground: "oklch(0.216164 0.028283 77.423)",
919 sidebar: "oklch(0.266743 0.044689 294.138)",921 sidebar: "oklch(0.266743 0.044689 294.138)",
920 sidebarForeground: "oklch(0.990339 0.008411 325.64)",922 sidebarForeground: "oklch(0.990339 0.008411 325.64)",
921 sidebarMutedForeground: "oklch(0.668773 0.021522 302.949)",923 sidebarMutedForeground: "oklch(0.668773 0.021522 302.949)",