From 317a80dbad154c9749a1e8f6fdb4867e54c5011e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= Date: Wed, 25 Feb 2026 18:24:15 +0100 Subject: [PATCH] refactor: remove category colors from units app --- app/globals.css | 26 ---------- components/units/MainConverter.tsx | 24 ++-------- components/units/SearchUnits.tsx | 8 ---- components/units/VisualComparison.tsx | 5 +- lib/units/units.ts | 68 --------------------------- 5 files changed, 5 insertions(+), 126 deletions(-) diff --git a/app/globals.css b/app/globals.css index 11fd235..5c3d16f 100644 --- a/app/globals.css +++ b/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; diff --git a/components/units/MainConverter.tsx b/components/units/MainConverter.tsx index a67bfa9..e367413 100644 --- a/components/units/MainConverter.tsx +++ b/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)} > - + @@ -223,13 +216,9 @@ export default function MainConverter() { {/* Quick result */} {parseNumberInput(inputValue) !== null && ( -
+
Result
-
+
{formatNumber(convertUnit(parseNumberInput(inputValue)!, selectedUnit, targetUnit))} {targetUnit}
@@ -256,7 +245,6 @@ export default function MainConverter() { {showVisualComparison ? ( ) : ( @@ -268,11 +256,7 @@ export default function MainConverter() { return (
{/* Favorite & Copy buttons */}
diff --git a/components/units/SearchUnits.tsx b/components/units/SearchUnits.tsx index 1a9c60a..540210d 100644 --- a/components/units/SearchUnits.tsx +++ b/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 {formatMeasureName(result.measure)}
-
))}
diff --git a/components/units/VisualComparison.tsx b/components/units/VisualComparison.tsx index b887b0e..0ab646e 100644 --- a/components/units/VisualComparison.tsx +++ b/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(null); @@ -282,12 +280,11 @@ export default function VisualComparison({ {/* Colored fill */}
{/* Percentage label overlay */} diff --git a/lib/units/units.ts b/lib/units/units.ts index 57e6b7e..5c5fccc 100644 --- a/lib/units/units.ts +++ b/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 = { - 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 = { - 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 */