diff --git a/apps/web/src/index.css b/apps/web/src/index.css index f0374b2160a3..73e56caaf4e6 100644 --- a/apps/web/src/index.css +++ b/apps/web/src/index.css @@ -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) { diff --git a/apps/web/src/themePalette.test.ts b/apps/web/src/themePalette.test.ts index 02f9e0b90ce1..feede9b7ff1d 100644 --- a/apps/web/src/themePalette.test.ts +++ b/apps/web/src/themePalette.test.ts @@ -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 { @@ -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"), @@ -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); + } } }); diff --git a/packages/shared/src/themePalettes.ts b/packages/shared/src/themePalettes.ts index b0eccd1b1593..d6d7979de550 100644 --- a/packages/shared/src/themePalettes.ts +++ b/packages/shared/src/themePalettes.ts @@ -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", @@ -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", @@ -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)", @@ -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)", @@ -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)", @@ -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)", @@ -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)", @@ -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)", @@ -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)", @@ -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)", @@ -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)", @@ -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)",