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

style: update unit category colors to match Tailwind palette

Browse Source 
- 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:
Sebastian Krüger
2026-02-23 08:03:55 +01:00
parent d767f9714c
commit 81fa370ec9
2 changed files with 49 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
app/globals.css
View File

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