From 81fa370ec93425a4661f67858f2af506d0e69125 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= Date: Mon, 23 Feb 2026 08:03:55 +0100 Subject: [PATCH] style: update unit category colors to match Tailwind palette - Harmonize category colors with standard Tailwind CSS 500 shades - Use Rose, Violet, Emerald, Amber, Blue, and Indigo for grouping related units - Synchronize hex values in units.ts with OKLCH variables in globals.css --- app/globals.css | 50 +++++++++++++++++++++++----------------------- lib/units/units.ts | 48 ++++++++++++++++++++++---------------------- 2 files changed, 49 insertions(+), 49 deletions(-) diff --git a/app/globals.css b/app/globals.css index a549d0d..ba3ca3c 100644 --- a/app/globals.css +++ b/app/globals.css @@ -28,31 +28,31 @@ --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 */ - --color-category-angle: oklch(69.2% 0.154 237.7); - --color-category-apparent-power: oklch(64.8% 0.190 293.6); - --color-category-area: oklch(75.8% 0.159 70.5); - --color-category-current: oklch(75.8% 0.159 70.5); - --color-category-digital: oklch(72.3% 0.134 216.8); - --color-category-each: oklch(52.5% 0.033 257.5); - --color-category-energy: oklch(80.3% 0.162 97.3); - --color-category-frequency: oklch(66.8% 0.238 301.6); - --color-category-illuminance: oklch(78.3% 0.184 128.6); - --color-category-length: oklch(62.1% 0.214 255.5); - --color-category-mass: oklch(72.4% 0.159 165.1); - --color-category-pace: oklch(71.5% 0.145 192.2); - --color-category-parts-per: oklch(69.4% 0.224 350.3); - --color-category-power: oklch(62.8% 0.230 16.6); - --color-category-pressure: oklch(61.3% 0.218 281.3); - --color-category-reactive-energy: oklch(67.5% 0.276 320.6); - --color-category-reactive-power: oklch(74.5% 0.233 316.8); - --color-category-speed: oklch(72.4% 0.159 165.1); - --color-category-temperature: oklch(62.8% 0.257 29.2); - --color-category-tempo: oklch(70% 0.18 30); - --color-category-time: oklch(58.5% 0.238 293.1); - --color-category-voltage: oklch(75.5% 0.159 55.3); - --color-category-volume: oklch(64.8% 0.190 293.6); - --color-category-volume-flow-rate: oklch(77.9% 0.162 208.8); + /* 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; diff --git a/lib/units/units.ts b/lib/units/units.ts index fdc7546..57e6b7e 100644 --- a/lib/units/units.ts +++ b/lib/units/units.ts @@ -206,30 +206,30 @@ export function getCategoryColor(measure: Measure): string { */ export function getCategoryColorHex(measure: Measure): string { const colorMap: Record = { - angle: '#0EA5E9', - apparentPower: '#8B5CF6', - area: '#F59E0B', - current: '#F59E0B', - digital: '#06B6D4', - each: '#64748B', - energy: '#EAB308', - frequency: '#A855F7', - illuminance: '#84CC16', - length: '#3B82F6', - mass: '#10B981', - pace: '#14B8A6', - partsPer: '#EC4899', - power: '#F43F5E', - pressure: '#6366F1', - reactiveEnergy: '#D946EF', - reactivePower: '#E879F9', - speed: '#10B981', - temperature: '#EF4444', - tempo: '#F97316', // Orange for music/tempo - time: '#7C3AED', - voltage: '#FB923C', - volume: '#8B5CF6', - volumeFlowRate: '#22D3EE', + 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];