mirror of
https://github.com/jhbruhn/respira.git
synced 2026-01-27 02:13:41 +00:00
fix: Improve theme color definitions and dark mode styling
- Fixed CSS variable format by wrapping HSL values in hsl() function - Removed double hsl() wrapping in @theme section (now uses var() directly) - Switched dark mode card background to OKLCH for better perceptual uniformity - Improved dark mode border visibility (17.5% → 37.5% lightness) - Improved dark mode input visibility (17.5% → 47.5% lightness) - Changed app background from gray-300 to gray-100 for cleaner appearance - Enhanced PatternCanvasPlaceholder to match PatternCanvas styling with icon and description These changes ensure shadcn components use colors correctly and improve overall dark mode readability. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Jan-Henrik Bruhn
parent
1820bcde77
commit
621de91bc8
3 changed files with 97 additions and 76 deletions
144
src/App.css
144
src/App.css
|
|
@ -8,53 +8,53 @@
|
|||
@layer base {
|
||||
:root {
|
||||
/* Background colors */
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 222.2 84% 4.9%;
|
||||
--background: hsl(0 0% 100%);
|
||||
--foreground: hsl(222.2 84% 4.9%);
|
||||
|
||||
/* Card colors */
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 222.2 84% 4.9%;
|
||||
--card: hsl(0 0% 100%);
|
||||
--card-foreground: hsl(222.2 84% 4.9%);
|
||||
|
||||
/* Popover colors */
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 222.2 84% 4.9%;
|
||||
--popover: hsl(0 0% 100%);
|
||||
--popover-foreground: hsl(222.2 84% 4.9%);
|
||||
|
||||
/* Primary - Blue (existing brand color) */
|
||||
--primary: 221.2 83.2% 53.3%; /* blue-600 */
|
||||
--primary-foreground: 210 40% 98%;
|
||||
--primary: hsl(221.2 83.2% 53.3%); /* blue-600 */
|
||||
--primary-foreground: hsl(210 40% 98%);
|
||||
|
||||
/* Secondary - Orange (existing secondary color) */
|
||||
--secondary: 24.6 95% 53.1%; /* orange-500 */
|
||||
--secondary-foreground: 60 9.1% 97.8%;
|
||||
--secondary: hsl(24.6 95% 53.1%); /* orange-500 */
|
||||
--secondary-foreground: hsl(60 9.1% 97.8%);
|
||||
|
||||
/* Muted colors */
|
||||
--muted: 210 40% 96.1%;
|
||||
--muted-foreground: 215.4 16.3% 46.9%;
|
||||
--muted: hsl(210 40% 96.1%);
|
||||
--muted-foreground: hsl(215.4 16.3% 46.9%);
|
||||
|
||||
/* Accent - Purple (existing accent color) */
|
||||
--accent: 262.1 83.3% 57.8%; /* purple-500 */
|
||||
--accent-foreground: 210 40% 98%;
|
||||
--accent: hsl(262.1 83.3% 57.8%); /* purple-500 */
|
||||
--accent-foreground: hsl(210 40% 98%);
|
||||
|
||||
/* Destructive - Red (existing danger color) */
|
||||
--destructive: 0 84.2% 60.2%; /* red-500 */
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--destructive: hsl(0 84.2% 60.2%); /* red-500 */
|
||||
--destructive-foreground: hsl(210 40% 98%);
|
||||
|
||||
/* Success - Green (existing success color) */
|
||||
--success: 142.1 76.2% 36.3%; /* green-600 */
|
||||
--success-foreground: 210 40% 98%;
|
||||
--success: hsl(142.1 76.2% 36.3%); /* green-600 */
|
||||
--success-foreground: hsl(210 40% 98%);
|
||||
|
||||
/* Warning - Amber (existing warning color) */
|
||||
--warning: 45.4 93.4% 47.5%; /* amber-500 */
|
||||
--warning-foreground: 60 9.1% 97.8%;
|
||||
--warning: hsl(45.4 93.4% 47.5%); /* amber-500 */
|
||||
--warning-foreground: hsl(60 9.1% 97.8%);
|
||||
|
||||
/* Info - Cyan (existing info color) */
|
||||
--info: 188.7 85.7% 53.3%; /* cyan-500 */
|
||||
--info-foreground: 210 40% 98%;
|
||||
--info: hsl(188.7 85.7% 53.3%); /* cyan-500 */
|
||||
--info-foreground: hsl(210 40% 98%);
|
||||
|
||||
/* Border and input */
|
||||
--border: 214.3 31.8% 91.4%;
|
||||
--input: 214.3 31.8% 91.4%;
|
||||
--ring: 221.2 83.2% 53.3%; /* matches primary */
|
||||
--border: hsl(214.3 31.8% 91.4%);
|
||||
--input: hsl(214.3 31.8% 91.4%);
|
||||
--ring: hsl(221.2 83.2% 53.3%); /* matches primary */
|
||||
|
||||
/* Radius */
|
||||
--radius: 0.5rem;
|
||||
|
|
@ -62,42 +62,43 @@
|
|||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: 222.2 84% 4.9%;
|
||||
--foreground: 210 40% 98%;
|
||||
--background: hsl(222.2 84% 4.9%);
|
||||
|
||||
--card: 222.2 84% 4.9%;
|
||||
--card-foreground: 210 40% 98%;
|
||||
--foreground: hsl(210 40% 98%);
|
||||
|
||||
--popover: 222.2 84% 4.9%;
|
||||
--popover-foreground: 210 40% 98%;
|
||||
--card: oklch(27.8% 0.033 256.848);
|
||||
--card-foreground: hsl(210 40% 98%);
|
||||
|
||||
--primary: 217.2 91.2% 59.8%; /* blue-500 lighter for dark */
|
||||
--primary-foreground: 210 40% 98%;
|
||||
--popover: hsl(222.2 84% 4.9%);
|
||||
--popover-foreground: hsl(210 40% 98%);
|
||||
|
||||
--secondary: 20.5 90.2% 48.2%; /* orange-600 for dark */
|
||||
--secondary-foreground: 210 40% 98%;
|
||||
--primary: hsl(217.2 91.2% 59.8%); /* blue-500 lighter for dark */
|
||||
--primary-foreground: hsl(210 40% 98%);
|
||||
|
||||
--muted: 217.2 32.6% 17.5%;
|
||||
--muted-foreground: 215 20.2% 65.1%;
|
||||
--secondary: hsl(20.5 90.2% 48.2%); /* orange-600 for dark */
|
||||
--secondary-foreground: hsl(210 40% 98%);
|
||||
|
||||
--accent: 263.4 70% 50.4%; /* purple-600 for dark */
|
||||
--accent-foreground: 210 40% 98%;
|
||||
--muted: hsl(217.2 32.6% 17.5%);
|
||||
--muted-foreground: hsl(215 20.2% 65.1%);
|
||||
|
||||
--destructive: 0 62.8% 30.6%; /* red-900 */
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--accent: hsl(263.4 70% 50.4%); /* purple-600 for dark */
|
||||
--accent-foreground: hsl(210 40% 98%);
|
||||
|
||||
--success: 142.1 70.6% 45.3%; /* green-500 for dark */
|
||||
--success-foreground: 210 40% 98%;
|
||||
--destructive: hsl(0 62.8% 30.6%); /* red-900 */
|
||||
--destructive-foreground: hsl(210 40% 98%);
|
||||
|
||||
--warning: 47.9 95.8% 53.1%; /* amber-400 for dark */
|
||||
--warning-foreground: 26 83.3% 14.1%;
|
||||
--success: hsl(142.1 70.6% 45.3%); /* green-500 for dark */
|
||||
--success-foreground: hsl(210 40% 98%);
|
||||
|
||||
--info: 188.7 85.7% 53.3%; /* cyan-500 */
|
||||
--info-foreground: 210 40% 98%;
|
||||
--warning: hsl(47.9 95.8% 53.1%); /* amber-400 for dark */
|
||||
--warning-foreground: hsl(26 83.3% 14.1%);
|
||||
|
||||
--border: 217.2 32.6% 17.5%;
|
||||
--input: 217.2 32.6% 17.5%;
|
||||
--ring: 224.3 76.3% 48%;
|
||||
--info: hsl(188.7 85.7% 53.3%); /* cyan-500 */
|
||||
--info-foreground: hsl(210 40% 98%);
|
||||
|
||||
--border: hsl(217.2 32.6% 37.5%);
|
||||
--input: hsl(217.2 32.6% 47.5%);
|
||||
--ring: hsl(224.3 76.3% 48%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -109,25 +110,25 @@
|
|||
|
||||
@theme {
|
||||
/* SHADCN/UI COLORS - For bg-primary, bg-destructive, etc. */
|
||||
--color-primary: hsl(var(--primary));
|
||||
--color-primary-foreground: hsl(var(--primary-foreground));
|
||||
--color-secondary: hsl(var(--secondary));
|
||||
--color-secondary-foreground: hsl(var(--secondary-foreground));
|
||||
--color-destructive: hsl(var(--destructive));
|
||||
--color-destructive-foreground: hsl(var(--destructive-foreground));
|
||||
--color-muted: hsl(var(--muted));
|
||||
--color-muted-foreground: hsl(var(--muted-foreground));
|
||||
--color-accent: hsl(var(--accent));
|
||||
--color-accent-foreground: hsl(var(--accent-foreground));
|
||||
--color-background: hsl(var(--background));
|
||||
--color-foreground: hsl(var(--foreground));
|
||||
--color-card: hsl(var(--card));
|
||||
--color-card-foreground: hsl(var(--card-foreground));
|
||||
--color-popover: hsl(var(--popover));
|
||||
--color-popover-foreground: hsl(var(--popover-foreground));
|
||||
--color-border: hsl(var(--border));
|
||||
--color-input: hsl(var(--input));
|
||||
--color-ring: hsl(var(--ring));
|
||||
--color-primary: var(--primary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-destructive-foreground: var(--destructive-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-card: var(--card);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-border: var(--border);
|
||||
--color-input: var(--input);
|
||||
--color-ring: var(--ring);
|
||||
|
||||
/* PRIMARY - Main brand color (references Blue) - For bg-primary-600 style classes */
|
||||
--color-primary-50: var(--color-blue-50);
|
||||
|
|
@ -227,7 +228,7 @@
|
|||
/* Canvas/Konva-specific colors for embroidery rendering */
|
||||
--color-canvas-grid: #e0e0e0;
|
||||
--color-canvas-origin: #888888;
|
||||
--color-canvas-hoop: #2196F3;
|
||||
--color-canvas-hoop: #2196f3;
|
||||
--color-canvas-bounds: #ff0000;
|
||||
--color-canvas-position: #ff0000;
|
||||
}
|
||||
|
|
@ -292,7 +293,8 @@
|
|||
|
||||
/* Pulse glow effect - uses primary-600 */
|
||||
@keyframes pulseGlow {
|
||||
0%, 100% {
|
||||
0%,
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 rgb(37 99 235 / 0.4); /* primary-600 with 40% opacity */
|
||||
}
|
||||
50% {
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@ function App() {
|
|||
}, [resumedPattern, resumeFileName, pesData, setPattern, setPatternOffset]);
|
||||
|
||||
return (
|
||||
<div className="h-screen flex flex-col bg-gray-300 dark:bg-gray-900 overflow-hidden">
|
||||
<div className="h-screen flex flex-col bg-gray-100 dark:bg-gray-900 overflow-hidden">
|
||||
<AppHeader />
|
||||
|
||||
<div className="flex-1 p-4 sm:p-5 lg:p-6 w-full overflow-y-auto lg:overflow-hidden flex flex-col">
|
||||
|
|
|
|||
|
|
@ -1,10 +1,29 @@
|
|||
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
|
||||
import {
|
||||
Card,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
} from "@/components/ui/card";
|
||||
import { PhotoIcon } from "@heroicons/react/24/solid";
|
||||
|
||||
export function PatternCanvasPlaceholder() {
|
||||
return (
|
||||
<Card className="p-0 gap-0 lg:h-full animate-fadeIn flex flex-col">
|
||||
<CardHeader className="p-6 pb-4 border-b-2 border-gray-300 dark:border-gray-600">
|
||||
<CardTitle className="text-base lg:text-lg">Pattern Preview</CardTitle>
|
||||
<Card
|
||||
className={`p-0 gap-0 lg:h-full flex flex-col border-l-4 border-gray-400 dark:border-gray-600`}
|
||||
>
|
||||
<CardHeader className="p-4 pb-3">
|
||||
<div className="flex items-start gap-3">
|
||||
<PhotoIcon
|
||||
className={`w-6 h-6 text-gray-600 dark:text-gray-400 flex-shrink-0 mt-0.5`}
|
||||
/>
|
||||
<div className="flex-1 min-w-0">
|
||||
<CardTitle className="text-sm">Pattern Preview</CardTitle>
|
||||
<CardDescription className="text-xs">
|
||||
No pattern loaded
|
||||
</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="p-6 flex-1 flex flex-col">
|
||||
<div className="h-[400px] sm:h-[500px] lg:flex-1 flex items-center justify-center bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-700 dark:to-gray-800 rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-600 relative overflow-hidden">
|
||||
|
|
|
|||
Loading…
Reference in a new issue