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
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -206,30 +206,30 @@ export function getCategoryColor(measure: Measure): string {
|
||||
*/
|
||||
export function getCategoryColorHex(measure: Measure): string {
|
||||
const colorMap: Record<Measure, string> = {
|
||||
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];
|
||||
|
||||
Reference in New Issue
Block a user