From eb556ddfce25fcf47cfb2db71c396af7aa9ce018 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Sat, 8 Nov 2025 10:36:26 +0100
Subject: [PATCH] feat: ensure all category components use consistent hex
 colors
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 components/converter/MainConverter.tsx | 14 ++++++++++----
 components/converter/SearchUnits.tsx   |  3 ++-
 components/ui/CommandPalette.tsx       |  5 +++--
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/components/converter/MainConverter.tsx b/components/converter/MainConverter.tsx
index ce5abd9..9143560 100644
--- a/components/converter/MainConverter.tsx
+++ b/components/converter/MainConverter.tsx
@@ -153,8 +153,12 @@ export default function MainConverter() {
                 style={{
                   backgroundColor:
                     selectedMeasure === measure
-                      ? `var(--color-${getCategoryColor(measure)})`
+                      ? getCategoryColorHex(measure)
                       : undefined,
+                  borderColor: selectedMeasure !== measure
+                    ? getCategoryColorHex(measure)
+                    : undefined,
+                  color: selectedMeasure === measure ? 'white' : undefined,
                 }}
               >
                 {formatMeasureName(measure)}
@@ -224,10 +228,12 @@ export default function MainConverter() {
           {/* Quick result */}
           {parseNumberInput(inputValue) !== null && (
             <div className="p-4 rounded-lg bg-accent/50 border-l-4" style={{
-              borderLeftColor: `var(--color-${getCategoryColor(selectedMeasure)})`,
+              borderLeftColor: getCategoryColorHex(selectedMeasure),
             }}>
               <div className="text-sm text-muted-foreground">Result</div>
-              <div className="text-3xl font-bold mt-1">
+              <div className="text-3xl font-bold mt-1" style={{
+                color: getCategoryColorHex(selectedMeasure),
+              }}>
                 {formatNumber(convertUnit(parseNumberInput(inputValue)!, selectedUnit, targetUnit))} {targetUnit}
               </div>
             </div>
@@ -268,7 +274,7 @@ export default function MainConverter() {
                   className="group relative p-4 rounded-lg border bg-card hover:bg-accent/50 transition-colors"
                   style={{
                     borderLeftWidth: '4px',
-                    borderLeftColor: `var(--color-${getCategoryColor(selectedMeasure)})`,
+                    borderLeftColor: getCategoryColorHex(selectedMeasure),
                   }}
                 >
                   {/* Favorite & Copy buttons */}
diff --git a/components/converter/SearchUnits.tsx b/components/converter/SearchUnits.tsx
index 4dadeee..1f08bd4 100644
--- a/components/converter/SearchUnits.tsx
+++ b/components/converter/SearchUnits.tsx
@@ -11,6 +11,7 @@ import {
   getUnitInfo,
   formatMeasureName,
   getCategoryColor,
+  getCategoryColorHex,
   type Measure,
   type UnitInfo,
 } from '@/lib/units';
@@ -182,7 +183,7 @@ export default function SearchUnits({ onSelectUnit }: SearchUnitsProps) {
               <div
                 className="w-3 h-3 rounded-full flex-shrink-0"
                 style={{
-                  backgroundColor: `var(--color-${getCategoryColor(result.measure)})`,
+                  backgroundColor: getCategoryColorHex(result.measure),
                 }}
               />
             </button>
diff --git a/components/ui/CommandPalette.tsx b/components/ui/CommandPalette.tsx
index 0a0899f..3bb33ee 100644
--- a/components/ui/CommandPalette.tsx
+++ b/components/ui/CommandPalette.tsx
@@ -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,
                         }}
                       />
                     ) : (