From 7f450bc26013982f45f5925ebd966447b038c9cf Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 21 Jan 2026 21:11:35 +0000 Subject: [PATCH] fix: improve tooltip contrast across all themes CRITICAL FIX: Plan 9 theme had a catastrophic contrast failure where tooltip text (HSL 60, 100%, 96%) was nearly identical to the background (HSL 60, 100%, 94%), creating a ~1:1 contrast ratio that made tooltips completely unreadable. Changes: - Added dedicated `tooltip` and `tooltipForeground` colors to theme system - Updated all three built-in themes (dark, light, plan9) with proper colors - Modified tooltip component to use new colors instead of primary/primary-foreground - Added rounded corners and shadow to tooltips for better visual separation Theme-specific tooltip colors: - Dark theme: Dark blue-gray background (#217.2 32.6% 17.5%) with light text - Light theme: Very dark background (#222.2 47.4% 11.2%) with light text - Plan 9 theme: Dark blue (#220 50% 25%) with pale yellow text All tooltip colors now meet WCAG AA standards (4.5:1+ contrast ratio) and are clearly visible against their respective theme backgrounds. Files modified: - src/lib/themes/types.ts: Added tooltip color types - src/lib/themes/builtin/*.ts: Added tooltip colors to all themes - src/lib/themes/apply.ts: Apply tooltip CSS variables on theme change - src/index.css: Added tooltip CSS variables for light/dark themes - tailwind.config.js: Exposed tooltip colors as Tailwind utilities - src/components/ui/tooltip.tsx: Use new tooltip colors with improved styling --- src/components/ui/tooltip.tsx | 2 +- src/index.css | 8 ++++++++ src/lib/themes/apply.ts | 10 ++++++++++ src/lib/themes/builtin/dark.ts | 4 ++++ src/lib/themes/builtin/light.ts | 4 ++++ src/lib/themes/builtin/plan9.ts | 4 ++++ src/lib/themes/types.ts | 4 ++++ tailwind.config.js | 5 +++++ 8 files changed, 40 insertions(+), 1 deletion(-) diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx index 40aaf57..912178d 100644 --- a/src/components/ui/tooltip.tsx +++ b/src/components/ui/tooltip.tsx @@ -18,7 +18,7 @@ const TooltipContent = React.forwardRef< ref={ref} sideOffset={sideOffset} className={cn( - "z-50 overflow-hidden bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]", + "z-50 overflow-hidden rounded-md bg-tooltip px-3 py-1.5 text-xs text-tooltip-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]", className, )} {...props} diff --git a/src/index.css b/src/index.css index 76a9407..a4644e1 100644 --- a/src/index.css +++ b/src/index.css @@ -65,6 +65,10 @@ /* UI highlight (active user, self-references) */ --highlight: 25 90% 35%; + /* Tooltip colors */ + --tooltip: 222.2 47.4% 11.2%; + --tooltip-foreground: 210 40% 98%; + /* Syntax highlighting */ --syntax-comment: 215.4 16.3% 46.9%; --syntax-punctuation: 222.2 84% 30%; @@ -129,6 +133,10 @@ /* UI highlight (active user, self-references) */ --highlight: 27 96% 61%; + /* Tooltip colors */ + --tooltip: 217.2 32.6% 17.5%; + --tooltip-foreground: 210 40% 98%; + /* Syntax highlighting */ --syntax-comment: 215 20.2% 70%; --syntax-punctuation: 210 40% 70%; diff --git a/src/lib/themes/apply.ts b/src/lib/themes/apply.ts index 0900fb0..b79a176 100644 --- a/src/lib/themes/apply.ts +++ b/src/lib/themes/apply.ts @@ -60,6 +60,13 @@ export function applyTheme(theme: Theme): void { // UI highlight color root.style.setProperty("--highlight", theme.colors.highlight); + // Tooltip colors + root.style.setProperty("--tooltip", theme.colors.tooltip); + root.style.setProperty( + "--tooltip-foreground", + theme.colors.tooltipForeground, + ); + // Syntax highlighting root.style.setProperty("--syntax-comment", theme.syntax.comment); root.style.setProperty("--syntax-punctuation", theme.syntax.punctuation); @@ -125,6 +132,9 @@ export function getThemeVariables(): string[] { "--live", // UI highlight "--highlight", + // Tooltip + "--tooltip", + "--tooltip-foreground", // Syntax "--syntax-comment", "--syntax-punctuation", diff --git a/src/lib/themes/builtin/dark.ts b/src/lib/themes/builtin/dark.ts index 24f002c..e0f0498 100644 --- a/src/lib/themes/builtin/dark.ts +++ b/src/lib/themes/builtin/dark.ts @@ -49,6 +49,10 @@ export const darkTheme: Theme = { // UI highlight (active user, self-references) highlight: "27 96% 61%", // orange-400 (original color) + + // Tooltip colors (high contrast for visibility) + tooltip: "217.2 32.6% 17.5%", // Dark blue-gray (same as secondary) + tooltipForeground: "210 40% 98%", // Light (high contrast with dark tooltip) }, syntax: { diff --git a/src/lib/themes/builtin/light.ts b/src/lib/themes/builtin/light.ts index d109869..10b9fd8 100644 --- a/src/lib/themes/builtin/light.ts +++ b/src/lib/themes/builtin/light.ts @@ -49,6 +49,10 @@ export const lightTheme: Theme = { // UI highlight (darker for light background) highlight: "25 90% 35%", // Dark amber/brown + + // Tooltip colors (dark tooltip for visibility on light background) + tooltip: "222.2 47.4% 11.2%", // Very dark blue-gray (same as primary) + tooltipForeground: "210 40% 98%", // Light text }, syntax: { diff --git a/src/lib/themes/builtin/plan9.ts b/src/lib/themes/builtin/plan9.ts index 494daa7..6f985a1 100644 --- a/src/lib/themes/builtin/plan9.ts +++ b/src/lib/themes/builtin/plan9.ts @@ -63,6 +63,10 @@ export const plan9Theme: Theme = { // UI highlight (dark for contrast on pale yellow) highlight: "25 85% 30%", // Dark brown/amber + + // Tooltip colors (strong contrast against pale yellow background) + tooltip: "220 50% 25%", // Dark blue (darker than primary for tooltips) + tooltipForeground: "60 100% 97%", // Very pale yellow (matches popover) }, syntax: { diff --git a/src/lib/themes/types.ts b/src/lib/themes/types.ts index 08d3e1f..889d87e 100644 --- a/src/lib/themes/types.ts +++ b/src/lib/themes/types.ts @@ -66,6 +66,10 @@ export interface ThemeColors { // UI highlight color (for active user, self-references, etc.) highlight: HSLValue; + + // Tooltip colors (for proper contrast across all themes) + tooltip: HSLValue; + tooltipForeground: HSLValue; } /** Syntax highlighting colors for code blocks */ diff --git a/tailwind.config.js b/tailwind.config.js index 8b9d517..d4561a9 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -74,6 +74,11 @@ export default { live: "hsl(var(--live))", // UI highlight (active user, self-references) highlight: "hsl(var(--highlight))", + // Tooltip colors + tooltip: { + DEFAULT: "hsl(var(--tooltip))", + foreground: "hsl(var(--tooltip-foreground))", + }, }, }, },