mirror of
https://github.com/jhbruhn/respira.git
synced 2026-01-27 10:23:41 +00:00
ab9b22b9b8
- Define semantic color theme in App.css using @theme directive - Primary (blue), Success (green), Warning (amber), Danger (red) - Info (cyan), Accent (purple), Secondary (orange), Tertiary (teal) - Semantic colors reference Tailwind color variables via var() - Media query-based dark mode for canvas colors - Migrate all 16 components from direct Tailwind colors to semantic names - Create cssVariables.ts utility for Konva canvas color access - Update KonvaComponents to use CSS variables dynamically - Replace @apply with CSS variables in index.css for v4 compatibility - Remove unused designTokens.ts file - Improve light mode contrast with gray-300 app background - Adjust canvas and info box backgrounds to gray-200 Benefits: - Easy theme customization by updating App.css @theme block - Consistent semantic naming across all components - Proper dark mode support via media queries - No visual regressions, all colors maintained 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
89 lines
3.6 KiB
TypeScript
89 lines
3.6 KiB
TypeScript
interface SkeletonLoaderProps {
|
|
className?: string;
|
|
variant?: 'text' | 'rect' | 'circle';
|
|
}
|
|
|
|
export function SkeletonLoader({ className = '', variant = 'rect' }: SkeletonLoaderProps) {
|
|
const baseClasses = 'animate-pulse bg-gradient-to-r from-gray-200 via-gray-300 to-gray-200 dark:from-gray-700 dark:via-gray-600 dark:to-gray-700 bg-[length:200%_100%]';
|
|
|
|
const variantClasses = {
|
|
text: 'h-4 rounded',
|
|
rect: 'rounded-lg',
|
|
circle: 'rounded-full'
|
|
};
|
|
|
|
return (
|
|
<div className={`${baseClasses} ${variantClasses[variant]} ${className}`} />
|
|
);
|
|
}
|
|
|
|
export function PatternCanvasSkeleton() {
|
|
return (
|
|
<div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
|
|
<div className="flex items-center justify-between mb-4 pb-2 border-b-2 border-gray-300 dark:border-gray-600">
|
|
<SkeletonLoader className="h-7 w-40" variant="text" />
|
|
</div>
|
|
<div className="relative w-full h-[600px] border border-gray-300 dark:border-gray-600 rounded bg-gray-200 dark:bg-gray-900 overflow-hidden">
|
|
<div className="flex items-center justify-center h-full">
|
|
<div className="text-center space-y-4">
|
|
<div className="relative w-24 h-24 mx-auto">
|
|
<SkeletonLoader className="w-24 h-24" variant="circle" />
|
|
<div className="absolute inset-0 flex items-center justify-center">
|
|
<svg className="w-12 h-12 text-gray-400 dark:text-gray-500 animate-spin" fill="none" viewBox="0 0 24 24">
|
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<SkeletonLoader className="h-5 w-48 mx-auto" variant="text" />
|
|
<SkeletonLoader className="h-4 w-64 mx-auto" variant="text" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function PatternInfoSkeleton() {
|
|
return (
|
|
<div className="mt-4">
|
|
<SkeletonLoader className="h-6 w-40 mb-4" variant="text" />
|
|
<div className="bg-gray-200 dark:bg-gray-900 p-4 rounded-lg space-y-3">
|
|
{[1, 2, 3, 4].map((i) => (
|
|
<div key={i} className="flex justify-between">
|
|
<SkeletonLoader className="h-4 w-24" variant="text" />
|
|
<SkeletonLoader className="h-4 w-32" variant="text" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function MachineConnectionSkeleton() {
|
|
return (
|
|
<div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
|
|
<div className="flex items-center justify-between mb-4 pb-2 border-b-2 border-gray-300 dark:border-gray-600">
|
|
<SkeletonLoader className="h-7 w-48" variant="text" />
|
|
</div>
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<SkeletonLoader className="h-4 w-16" variant="text" />
|
|
<SkeletonLoader className="h-8 w-32 rounded-lg" />
|
|
</div>
|
|
<div className="bg-gray-200 dark:bg-gray-900 p-4 rounded-lg space-y-2">
|
|
<div className="flex justify-between">
|
|
<SkeletonLoader className="h-4 w-20" variant="text" />
|
|
<SkeletonLoader className="h-4 w-24" variant="text" />
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<SkeletonLoader className="h-4 w-24" variant="text" />
|
|
<SkeletonLoader className="h-4 w-32" variant="text" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|