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:
@@ -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,
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
|
||||
Reference in New Issue
Block a user