valknar/kit-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: remove category colors from units app

Browse Source
This commit is contained in:
Sebastian Krüger
2026-02-25 18:24:15 +01:00
parent f28a2d1eab
commit 317a80dbad
5 changed files with 5 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
app/globals.css
View File

@@ -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;

24
components/units/MainConverter.tsx
View File

@@ -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
className="w-full"
style={{
borderLeft: `4px solid ${getCategoryColorHex(selectedMeasure)}`,
}}
>
<SelectTrigger className="w-full">
<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={{
borderLeftColor: getCategoryColorHex(selectedMeasure),
}}>
<div className="p-4 rounded-lg bg-accent/50 border-l-4 border-primary">
<div className="text-sm text-muted-foreground">Result</div>
<div className="text-3xl font-bold mt-1" style={{
color: getCategoryColorHex(selectedMeasure),
}}>
<div className="text-3xl font-bold mt-1 text-primary">
{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"
style={{
borderLeftWidth: '4px',
borderLeftColor: getCategoryColorHex(selectedMeasure),
}}
className="group relative p-4 rounded-lg border bg-card hover:bg-accent/50 transition-colors border-l-4 border-l-primary/30"
>
{/* Favorite & Copy buttons */}
<div className="absolute top-2 right-2 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">

8
components/units/SearchUnits.tsx
View File

@@ -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>

5
components/units/VisualComparison.tsx
View File

@@ -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 */}

68
lib/units/units.ts
View File

@@ -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
*/