mirror of
https://github.com/purrgrammer/grimoire.git
synced 2026-04-12 00:17:02 +02:00
53f29b9b63
* 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 * fix: increase dark mode tooltip lightness for better visibility Dark mode tooltips were too dark (17.5% lightness) against the very dark background (4.9% lightness), making the tooltip box hard to distinguish. Changes: - Increased dark mode tooltip lightness from 17.5% to 30% - This provides ~6:1 contrast ratio between tooltip and background - Tooltip box now clearly visible against dark background - Text contrast remains excellent (light text on medium-dark background) The tooltip now stands out properly while maintaining high text readability. * fix: improve ChatViewer group tooltip contrast in dark mode The group description tooltip in ChatViewer had poor contrast due to using `text-primary-foreground` color classes that conflicted with the new tooltip background colors. Issues fixed: 1. Description text using `text-primary-foreground/90` - replaced with `opacity-90` 2. Protocol button using `bg-primary-foreground/20` with `text-primary-foreground` (light-on-light, ~1.5:1 contrast) - now uses `bg-tooltip-foreground/20` 3. All other text using `text-primary-foreground` variants - replaced with `opacity-*` This allows the text to inherit the correct `text-tooltip-foreground` color from the TooltipContent component, ensuring proper contrast against the `bg-tooltip` background in all themes. Files modified: - src/components/ChatViewer.tsx: Updated tooltip text color classes --------- Co-authored-by: Claude <noreply@anthropic.com>