refactor: remove category colors from units app

app/globals.css

@@ -28,32 +28,6 @@
   --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
 
-  /* Category colors for 23 unit types - Tailored to Tailwind 500 shades */
-  --color-category-angle: oklch(0.645 0.246 16.439); /* Rose 500 */
-  --color-category-apparent-power: oklch(0.606 0.25 273.428); /* Violet 500 */
-  --color-category-area: oklch(0.696 0.17 162.48); /* Emerald 500 */
-  --color-category-current: oklch(0.769 0.188 70.08); /* Amber 500 */
-  --color-category-digital: oklch(0.623 0.214 259.815); /* Blue 500 */
-  --color-category-each: oklch(0.539 0.047 258.337); /* Slate 500 */
-  --color-category-energy: oklch(0.769 0.188 70.08); /* Amber 500 */
-  --color-category-frequency: oklch(0.606 0.25 273.428); /* Violet 500 */
-  --color-category-illuminance: oklch(0.773 0.174 91.249); /* Yellow 500 */
-  --color-category-length: oklch(0.623 0.214 259.815); /* Blue 500 */
-  --color-category-mass: oklch(0.696 0.17 162.48); /* Emerald 500 */
-  --color-category-pace: oklch(0.704 0.14 182.503); /* Teal 500 */
-  --color-category-parts-per: oklch(0.707 0.022 261.325); /* Slate 400 */
-  --color-category-power: oklch(0.606 0.25 273.428); /* Violet 500 */
-  --color-category-pressure: oklch(0.585 0.233 277.117); /* Indigo 500 */
-  --color-category-reactive-energy: oklch(0.769 0.188 70.08); /* Amber 500 */
-  --color-category-reactive-power: oklch(0.606 0.25 273.428); /* Violet 500 */
-  --color-category-speed: oklch(0.704 0.14 182.503); /* Teal 500 */
-  --color-category-temperature: oklch(0.627 0.225 31.038); /* Red 500 */
-  --color-category-tempo: oklch(0.705 0.213 47.591); /* Orange 500 */
-  --color-category-time: oklch(0.585 0.233 277.117); /* Indigo 500 */
-  --color-category-voltage: oklch(0.769 0.188 70.08); /* Amber 500 */
-  --color-category-volume: oklch(0.696 0.17 162.48); /* Emerald 500 */
-  --color-category-volume-flow-rate: oklch(0.696 0.17 162.48); /* Emerald 500 */
-
   /* Custom animations */
   --animate-gradient: gradient 8s linear infinite;
   --animate-float: float 3s ease-in-out infinite;

components/units/MainConverter.tsx

@@ -21,8 +21,6 @@ import {
   convertToAll,
   convertUnit,
   formatMeasureName,
-  getCategoryColor,
-  getCategoryColorHex,
   type Measure,
   type ConversionResult,
 } from '@/lib/units/units';
@@ -131,12 +129,7 @@ export default function MainConverter() {
               value={selectedMeasure}
               onValueChange={(value) => setSelectedMeasure(value as Measure)}
             >
-              <SelectTrigger
+              <SelectTrigger className="w-full">
-                className="w-full"
-                style={{
-                  borderLeft: `4px solid ${getCategoryColorHex(selectedMeasure)}`,
-                }}
-              >
                 <SelectValue placeholder="Measure" />
               </SelectTrigger>
               <SelectContent>
@@ -223,13 +216,9 @@ export default function MainConverter() {
 
           {/* Quick result */}
           {parseNumberInput(inputValue) !== null && (
-            <div className="p-4 rounded-lg bg-accent/50 border-l-4" style={{
+            <div className="p-4 rounded-lg bg-accent/50 border-l-4 border-primary">
-              borderLeftColor: getCategoryColorHex(selectedMeasure),
-            }}>
               <div className="text-sm text-muted-foreground">Result</div>
-              <div className="text-3xl font-bold mt-1" style={{
+              <div className="text-3xl font-bold mt-1 text-primary">
-                color: getCategoryColorHex(selectedMeasure),
-              }}>
                 {formatNumber(convertUnit(parseNumberInput(inputValue)!, selectedUnit, targetUnit))} {targetUnit}
               </div>
             </div>
@@ -256,7 +245,6 @@ export default function MainConverter() {
           {showVisualComparison ? (
             <VisualComparison
               conversions={conversions}
-              color={getCategoryColorHex(selectedMeasure)}
               onValueChange={handleValueChange}
             />
           ) : (
@@ -268,11 +256,7 @@ export default function MainConverter() {
               return (
                 <div
                   key={conversion.unit}
-                  className="group relative p-4 rounded-lg border bg-card hover:bg-accent/50 transition-colors"
+                  className="group relative p-4 rounded-lg border bg-card hover:bg-accent/50 transition-colors border-l-4 border-l-primary/30"
-                  style={{
-                    borderLeftWidth: '4px',
-                    borderLeftColor: getCategoryColorHex(selectedMeasure),
-                  }}
                 >
                   {/* Favorite & Copy buttons */}
                   <div className="absolute top-2 right-2 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">

components/units/SearchUnits.tsx

@@ -10,8 +10,6 @@ import {
   getUnitsForMeasure,
   getUnitInfo,
   formatMeasureName,
-  getCategoryColor,
-  getCategoryColorHex,
   type Measure,
   type UnitInfo,
 } from '@/lib/units/units';
@@ -157,12 +155,6 @@ export default function SearchUnits({ onSelectUnit, className }: SearchUnitsProp
                   <span className="truncate">{formatMeasureName(result.measure)}</span>
                 </div>
               </div>
-              <div
-                className="w-3 h-3 rounded-full flex-shrink-0"
-                style={{
-                  backgroundColor: getCategoryColorHex(result.measure),
-                }}
-              />
             </button>
           ))}
         </div>

components/units/VisualComparison.tsx

@@ -6,13 +6,11 @@ import { formatNumber, cn } from '@/lib/utils';
 
 interface VisualComparisonProps {
   conversions: ConversionResult[];
-  color: string;
   onValueChange?: (value: number, unit: string, dragging: boolean) => void;
 }
 
 export default function VisualComparison({
   conversions,
-  color,
   onValueChange,
 }: VisualComparisonProps) {
   const [draggingUnit, setDraggingUnit] = useState<string | null>(null);
@@ -282,12 +280,11 @@ export default function VisualComparison({
               {/* Colored fill */}
               <div
                 className={cn(
-                  "absolute inset-y-0 left-0",
+                  "absolute inset-y-0 left-0 bg-primary",
                   draggingUnit ? "transition-none" : "transition-all duration-500 ease-out"
                 )}
                 style={{
                   width: `${displayPercentage}%`,
-                  backgroundColor: color,
                 }}
               />
               {/* Percentage label overlay */}

lib/units/units.ts

@@ -167,74 +167,6 @@ export function convertToAll(
   }
 }
 
-/**
- * Get category color for a measure (Tailwind class name)
- */
-export function getCategoryColor(measure: Measure): string {
-  const colorMap: Record<Measure, string> = {
-    angle: 'category-angle',
-    apparentPower: 'category-apparent-power',
-    area: 'category-area',
-    current: 'category-current',
-    digital: 'category-digital',
-    each: 'category-each',
-    energy: 'category-energy',
-    frequency: 'category-frequency',
-    illuminance: 'category-illuminance',
-    length: 'category-length',
-    mass: 'category-mass',
-    pace: 'category-pace',
-    partsPer: 'category-parts-per',
-    power: 'category-power',
-    pressure: 'category-pressure',
-    reactiveEnergy: 'category-reactive-energy',
-    reactivePower: 'category-reactive-power',
-    speed: 'category-speed',
-    temperature: 'category-temperature',
-    tempo: 'category-tempo',
-    time: 'category-time',
-    voltage: 'category-voltage',
-    volume: 'category-volume',
-    volumeFlowRate: 'category-volume-flow-rate',
-  };
-
-  return colorMap[measure];
-}
-
-/**
- * Get category color hex value for a measure
- */
-export function getCategoryColorHex(measure: Measure): string {
-  const colorMap: Record<Measure, string> = {
-    angle: '#f43f5e',          // Rose 500
-    apparentPower: '#8b5cf6',  // Violet 500
-    area: '#10b981',           // Emerald 500
-    current: '#f59e0b',        // Amber 500
-    digital: '#3b82f6',        // Blue 500
-    each: '#64748b',           // Slate 500
-    energy: '#f59e0b',         // Amber 500
-    frequency: '#8b5cf6',      // Violet 500
-    illuminance: '#eab308',    // Yellow 500
-    length: '#3b82f6',         // Blue 500
-    mass: '#10b981',           // Emerald 500
-    pace: '#14b8a6',           // Teal 500
-    partsPer: '#94a3b8',       // Slate 400
-    power: '#8b5cf6',          // Violet 500
-    pressure: '#6366f1',       // Indigo 500
-    reactiveEnergy: '#f59e0b', // Amber 500
-    reactivePower: '#8b5cf6',  // Violet 500
-    speed: '#14b8a6',          // Teal 500
-    temperature: '#ef4444',    // Red 500
-    tempo: '#f97316',          // Orange 500
-    time: '#6366f1',           // Indigo 500
-    voltage: '#f59e0b',        // Amber 500
-    volume: '#10b981',         // Emerald 500
-    volumeFlowRate: '#10b981', // Emerald 500
-  };
-
-  return colorMap[measure];
-}
-
 /**
  * Format measure name for display
  */