Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Yash-Singh1 merged 1 commit into from
Oct 8, 2026
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 7 additions & 2 deletions apps/web/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -375,8 +375,13 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil

/* Paint find results without changing rendered markdown or copied text. */
::highlight(t3-thread-find) {
color: var(--app-theme-search-match-foreground, var(--color-foreground));
background-color: var(--app-theme-search-match-background, oklch(0.826487 0.157967 78.604 / 0.3));
color: var(--app-theme-search-match-foreground, oklch(0.216164 0.028283 77.423));
background-color: var(--app-theme-search-match-background, oklch(0.915 0.11 85));

@variant dark {
color: var(--app-theme-search-match-foreground, oklch(0.970151 0 0));
background-color: var(--app-theme-search-match-background, oklch(0.55 0.1 85));
}
}

::highlight(t3-thread-find-active) {
Expand Down
20 changes: 16 additions & 4 deletions apps/web/src/themePalette.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { describe, expect, it, vi } from "vite-plus/test";
import { converter } from "culori/fn";
import { BUILT_IN_THEMES } from "@t3tools/shared/themePalettes";

import {
Expand Down Expand Up @@ -91,7 +92,13 @@ describe("theme files", () => {
}
});

it("keeps built-in and standard search pairs readable and distinct", () => {
it("keeps built-in and standard search pairs readable and distinct from inline code", () => {
const toOklab = converter("oklab");
const distance = (first: string, second: string) => {
const a = toOklab(first)!;
const b = toOklab(second)!;
return Math.hypot(a.l - b.l, a.a - b.a, a.b - b.b);
};
const palettes = [
getStandardThemeColors("light"),
getStandardThemeColors("dark"),
Expand All @@ -104,9 +111,14 @@ describe("theme files", () => {
expect(
contrastRatio(colors.searchMatchActiveForeground, colors.searchMatchActiveBackground),
).toBeGreaterThanOrEqual(4.5);
expect(asHex(colors.searchMatchBackground)).not.toBe(
asHex(colors.searchMatchActiveBackground),
);
expect(
distance(colors.searchMatchBackground, colors.searchMatchActiveBackground),
).toBeGreaterThan(0.14);
// Check inline-code tints, code blocks, and user-message bubbles.
for (const background of [colors.muted, colors.messageSurface, colors.codeBackground]) {
expect(distance(colors.searchMatchBackground, background)).toBeGreaterThan(0.08);
expect(distance(colors.searchMatchActiveBackground, background)).toBeGreaterThan(0.08);
}
}
});

Expand Down
88 changes: 45 additions & 43 deletions packages/shared/src/themePalettes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,10 +131,12 @@ export type ThemeDefinition = Readonly<{
* pixels the user is already seeing. Alpha-bearing tokens are flattened over
* their real backdrops (canvas, or the sidebar for its rows) because theme
* colors are stored as opaque OKLCH tokens.
* Search uses amber across built-ins to separate matches from accent-tinted
* inline code. The current match uses a stronger gold with dark text.
*/
export const T3_CODE_LIGHT_THEME_COLORS: ThemeColors = {
searchMatchBackground: "#fce8c0",
searchMatchForeground: "#27272a",
searchMatchBackground: "#ffde8b",
searchMatchForeground: "#21180a",
searchMatchActiveBackground: "#eea52b",
searchMatchActiveForeground: "#21180a",
canvas: "#fcfcfc",
Expand Down Expand Up @@ -197,7 +199,7 @@ export const T3_CODE_LIGHT_THEME_COLORS: ThemeColors = {
};

export const T3_CODE_DARK_THEME_COLORS: ThemeColors = {
searchMatchBackground: "#533e16",
searchMatchBackground: "#8c6c1f",
searchMatchForeground: "#f5f5f5",
searchMatchActiveBackground: "#eea52b",
searchMatchActiveForeground: "#21180a",
Expand Down Expand Up @@ -308,10 +310,10 @@ export const T3_CHAT_THEME: ThemeDefinition = {
messageActionHover: "oklch(0.539042 0.197866 0.305)",
codeBackground: "oklch(0.953855 0.019695 315.668)",
codeForeground: "oklch(0.445128 0.13005 307.026)",
searchMatchBackground: "oklch(0.869588 0.06751 334.899)",
searchMatchForeground: "oklch(0.325698 0.116116 325.037)",
searchMatchActiveBackground: "oklch(0.591646 0.217985 0.584)",
searchMatchActiveForeground: "oklch(1 0 0)",
searchMatchBackground: "oklch(0.915 0.11 85)",
searchMatchForeground: "oklch(0.216164 0.028283 77.423)",
searchMatchActiveBackground: "oklch(0.774202 0.151946 74.331)",
searchMatchActiveForeground: "oklch(0.216164 0.028283 77.423)",
sidebar: "oklch(0.928886 0.031178 322.592)",
sidebarForeground: "oklch(0.396296 0.025134 285.196)",
sidebarMutedForeground: "oklch(0.494754 0.190937 354.544)",
Expand Down Expand Up @@ -372,10 +374,10 @@ export const T3_CHAT_THEME: ThemeDefinition = {
messageActionHover: "oklch(0.458754 0.184639 3.857)",
codeBackground: "oklch(0.22813 0.020366 307.469)",
codeForeground: "oklch(0.848703 0.064239 306.645)",
searchMatchBackground: "oklch(0.313674 0.030572 310.061)",
searchMatchForeground: "oklch(0.980735 0.004092 301.426)",
searchMatchActiveBackground: "oklch(0.460685 0.185347 4.099)",
searchMatchActiveForeground: "oklch(0.901233 0.057189 343.694)",
searchMatchBackground: "oklch(0.55 0.1 85)",
searchMatchForeground: "oklch(0.970151 0 0)",
searchMatchActiveBackground: "oklch(0.774202 0.151946 74.331)",
searchMatchActiveForeground: "oklch(0.216164 0.028283 77.423)",
sidebar: "oklch(0.185778 0.019368 322.159)",
sidebarForeground: "oklch(0.967434 0.001326 286.375)",
sidebarMutedForeground: "oklch(0.880303 0.03077 342.696)",
Expand Down Expand Up @@ -443,10 +445,10 @@ export const GROVE_THEME: ThemeDefinition = {
messageActionHover: "oklch(0.488753 0.096536 77.829)",
codeBackground: "oklch(0.955888 0.004783 158.391)",
codeForeground: "oklch(0.222003 0.03479 328.979)",
searchMatchBackground: "oklch(0.891377 0.026164 164.929)",
searchMatchForeground: "oklch(0.222003 0.03479 328.979)",
searchMatchActiveBackground: "oklch(0.523295 0.112292 158.089)",
searchMatchActiveForeground: "oklch(0.990339 0.008411 325.64)",
searchMatchBackground: "oklch(0.915 0.11 85)",
searchMatchForeground: "oklch(0.216164 0.028283 77.423)",
searchMatchActiveBackground: "oklch(0.774202 0.151946 74.331)",
searchMatchActiveForeground: "oklch(0.216164 0.028283 77.423)",
sidebar: "oklch(0.936464 0.014601 163.554)",
sidebarForeground: "oklch(0.222003 0.03479 328.979)",
sidebarMutedForeground: "oklch(0.515606 0.011938 318.897)",
Expand Down Expand Up @@ -507,10 +509,10 @@ export const GROVE_THEME: ThemeDefinition = {
messageActionHover: "oklch(0.815227 0.117902 84.21)",
codeBackground: "oklch(0.312979 0.018942 164.082)",
codeForeground: "oklch(0.990339 0.008411 325.64)",
searchMatchBackground: "oklch(0.464636 0.066083 158.72)",
searchMatchForeground: "oklch(0.990339 0.008411 325.64)",
searchMatchActiveBackground: "oklch(0.796228 0.133058 157.319)",
searchMatchActiveForeground: "oklch(0.222003 0.03479 328.979)",
searchMatchBackground: "oklch(0.55 0.1 85)",
searchMatchForeground: "oklch(0.970151 0 0)",
searchMatchActiveBackground: "oklch(0.774202 0.151946 74.331)",
searchMatchActiveForeground: "oklch(0.216164 0.028283 77.423)",
sidebar: "oklch(0.309925 0.032827 160.944)",
sidebarForeground: "oklch(0.990339 0.008411 325.64)",
sidebarMutedForeground: "oklch(0.711387 0.007643 175.89)",
Expand Down Expand Up @@ -578,10 +580,10 @@ export const OCEAN_THEME: ThemeDefinition = {
messageActionHover: "oklch(0.45151 0.074407 201.516)",
codeBackground: "oklch(0.957684 0.002906 253.68)",
codeForeground: "oklch(0.222003 0.03479 328.979)",
searchMatchBackground: "oklch(0.895373 0.023469 241.913)",
searchMatchForeground: "oklch(0.222003 0.03479 328.979)",
searchMatchActiveBackground: "oklch(0.536684 0.120219 247.01)",
searchMatchActiveForeground: "oklch(0.990339 0.008411 325.64)",
searchMatchBackground: "oklch(0.915 0.11 85)",
searchMatchForeground: "oklch(0.216164 0.028283 77.423)",
searchMatchActiveBackground: "oklch(0.774202 0.151946 74.331)",
searchMatchActiveForeground: "oklch(0.216164 0.028283 77.423)",
sidebar: "oklch(0.939254 0.01193 241.729)",
sidebarForeground: "oklch(0.222003 0.03479 328.979)",
sidebarMutedForeground: "oklch(0.517366 0.018944 311.433)",
Expand Down Expand Up @@ -642,10 +644,10 @@ export const OCEAN_THEME: ThemeDefinition = {
messageActionHover: "oklch(0.815308 0.096174 199.862)",
codeBackground: "oklch(0.29661 0.021883 251.968)",
codeForeground: "oklch(0.990339 0.008411 325.64)",
searchMatchBackground: "oklch(0.439946 0.0561 243.479)",
searchMatchForeground: "oklch(0.990339 0.008411 325.64)",
searchMatchActiveBackground: "oklch(0.758933 0.105833 241.548)",
searchMatchActiveForeground: "oklch(0.222003 0.03479 328.979)",
searchMatchBackground: "oklch(0.55 0.1 85)",
searchMatchForeground: "oklch(0.970151 0 0)",
searchMatchActiveBackground: "oklch(0.774202 0.151946 74.331)",
searchMatchActiveForeground: "oklch(0.216164 0.028283 77.423)",
sidebar: "oklch(0.290387 0.032043 247.274)",
sidebarForeground: "oklch(0.990339 0.008411 325.64)",
sidebarMutedForeground: "oklch(0.69099 0.01395 266.424)",
Expand Down Expand Up @@ -713,10 +715,10 @@ export const EMBER_THEME: ThemeDefinition = {
messageActionHover: "oklch(0.471223 0.145843 24.688)",
codeBackground: "oklch(0.959965 0.002668 47.512)",
codeForeground: "oklch(0.222003 0.03479 328.979)",
searchMatchBackground: "oklch(0.899296 0.022939 49.163)",
searchMatchForeground: "oklch(0.222003 0.03479 328.979)",
searchMatchActiveBackground: "oklch(0.552831 0.129438 44.656)",
searchMatchActiveForeground: "oklch(0.990339 0.008411 325.64)",
searchMatchBackground: "oklch(0.915 0.11 85)",
searchMatchForeground: "oklch(0.216164 0.028283 77.423)",
searchMatchActiveBackground: "oklch(0.774202 0.151946 74.331)",
searchMatchActiveForeground: "oklch(0.216164 0.028283 77.423)",
sidebar: "oklch(0.942267 0.01151 50.785)",
sidebarForeground: "oklch(0.222003 0.03479 328.979)",
sidebarMutedForeground: "oklch(0.519146 0.019214 343.427)",
Expand Down Expand Up @@ -777,10 +779,10 @@ export const EMBER_THEME: ThemeDefinition = {
messageActionHover: "oklch(0.775116 0.117953 29.014)",
codeBackground: "oklch(0.299662 0.017229 39.973)",
codeForeground: "oklch(0.990339 0.008411 325.64)",
searchMatchBackground: "oklch(0.442681 0.0608 50.795)",
searchMatchForeground: "oklch(0.990339 0.008411 325.64)",
searchMatchActiveBackground: "oklch(0.762174 0.124117 52.082)",
searchMatchActiveForeground: "oklch(0.222003 0.03479 328.979)",
searchMatchBackground: "oklch(0.55 0.1 85)",
searchMatchForeground: "oklch(0.970151 0 0)",
searchMatchActiveBackground: "oklch(0.774202 0.151946 74.331)",
searchMatchActiveForeground: "oklch(0.216164 0.028283 77.423)",
sidebar: "oklch(0.293349 0.029554 46.882)",
sidebarForeground: "oklch(0.990339 0.008411 325.64)",
sidebarMutedForeground: "oklch(0.691874 0.012538 24.638)",
Expand Down Expand Up @@ -848,10 +850,10 @@ export const IRIS_THEME: ThemeDefinition = {
messageActionHover: "oklch(0.471003 0.16748 340.687)",
codeBackground: "oklch(0.95997 0.004338 306.542)",
codeForeground: "oklch(0.222003 0.03479 328.979)",
searchMatchBackground: "oklch(0.897143 0.028558 299.758)",
searchMatchForeground: "oklch(0.222003 0.03479 328.979)",
searchMatchActiveBackground: "oklch(0.525348 0.15373 294.176)",
searchMatchActiveForeground: "oklch(0.990339 0.008411 325.64)",
searchMatchBackground: "oklch(0.915 0.11 85)",
searchMatchForeground: "oklch(0.216164 0.028283 77.423)",
searchMatchActiveBackground: "oklch(0.774202 0.151946 74.331)",
searchMatchActiveForeground: "oklch(0.216164 0.028283 77.423)",
sidebar: "oklch(0.941387 0.014687 300.474)",
sidebarForeground: "oklch(0.222003 0.03479 328.979)",
sidebarMutedForeground: "oklch(0.518417 0.023683 320.681)",
Expand Down Expand Up @@ -912,10 +914,10 @@ export const IRIS_THEME: ThemeDefinition = {
messageActionHover: "oklch(0.813537 0.114101 337.23)",
codeBackground: "oklch(0.281873 0.028308 295.193)",
codeForeground: "oklch(0.990339 0.008411 325.64)",
searchMatchBackground: "oklch(0.395417 0.085554 294.182)",
searchMatchForeground: "oklch(0.990339 0.008411 325.64)",
searchMatchActiveBackground: "oklch(0.671712 0.169136 293.929)",
searchMatchActiveForeground: "oklch(0.222003 0.03479 328.979)",
searchMatchBackground: "oklch(0.55 0.1 85)",
searchMatchForeground: "oklch(0.970151 0 0)",
searchMatchActiveBackground: "oklch(0.774202 0.151946 74.331)",
searchMatchActiveForeground: "oklch(0.216164 0.028283 77.423)",
sidebar: "oklch(0.266743 0.044689 294.138)",
sidebarForeground: "oklch(0.990339 0.008411 325.64)",
sidebarMutedForeground: "oklch(0.668773 0.021522 302.949)",
Expand Down
Loading