feat: ensure all category components use consistent hex colors

Update all category-related UI components to use getCategoryColorHex() function
instead of CSS variables for consistent color application across the app.

Changes:
- MainConverter: category buttons now use hex colors for background/border
- MainConverter: quick result display uses hex color for text and border
- MainConverter: result cards use hex color for left border
- CommandPalette: measure commands use hex colors for color indicators
- SearchUnits: category color dots use hex colors

This ensures all category colors are consistently applied using the same
hex color values defined in the OKLCH color palette.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-08 10:36:26 +01:00
parent 1943974908
commit eb556ddfce
3 changed files with 15 additions and 7 deletions

View File

@@ -7,6 +7,7 @@ import {
getAllMeasures,
formatMeasureName,
getCategoryColor,
getCategoryColorHex,
type Measure,
} from '@/lib/units';
import { getHistory, getFavorites } from '@/lib/storage';
@@ -60,7 +61,7 @@ export default function CommandPalette({
icon: Hash,
action: () => onSelectMeasure(measure),
keywords: ['convert', measure, formatMeasureName(measure).toLowerCase()],
color: getCategoryColor(measure),
color: getCategoryColorHex(measure),
}));
const allCommands = [...commands, ...measureCommands];
@@ -187,7 +188,7 @@ export default function CommandPalette({
<div
className="w-5 h-5 rounded flex-shrink-0"
style={{
backgroundColor: `var(--color-${command.color})`,
backgroundColor: command.color,
}}
/>
) : (