3f81cb0e48
Add ChartContainer, ChartConfig, ChartTooltip, ChartTooltipContent primitives ported from ShadCN's chart pattern. Refactor all 3 chart locations (dashboard, funnels, uptime) to use CSS variable-driven theming instead of duplicated CHART_COLORS_LIGHT/DARK objects. - Add --chart-1 through --chart-5, --chart-grid, --chart-axis CSS vars - Remove duplicated color objects from 3 files (-223 lines) - Add accessibilityLayer to all charts - Rounded bar corners on funnel chart - Tooltips use Tailwind dark classes instead of imperative style props Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
69 lines
1.2 KiB
CSS
69 lines
1.2 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
:root {
|
|
/* * Semantic colors */
|
|
--color-success: #10B981;
|
|
--color-warning: #F59E0B;
|
|
--color-error: #EF4444;
|
|
|
|
/* * Chart colors */
|
|
--chart-1: #FD5E0F;
|
|
--chart-2: #3b82f6;
|
|
--chart-3: #22c55e;
|
|
--chart-4: #a855f7;
|
|
--chart-5: #f59e0b;
|
|
--chart-grid: #f5f5f5;
|
|
--chart-axis: #a3a3a3;
|
|
}
|
|
|
|
.dark {
|
|
--chart-1: #FD5E0F;
|
|
--chart-2: #60a5fa;
|
|
--chart-3: #4ade80;
|
|
--chart-4: #c084fc;
|
|
--chart-5: #fbbf24;
|
|
--chart-grid: #262626;
|
|
--chart-axis: #737373;
|
|
}
|
|
|
|
body {
|
|
@apply bg-ciphera-gradient bg-fixed;
|
|
}
|
|
|
|
.dark body {
|
|
@apply bg-ciphera-gradient-dark;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
/* * 3D Transform Utilities - Pulse-specific */
|
|
.perspective-1000 {
|
|
perspective: 1000px;
|
|
}
|
|
|
|
.rotate-x-12 {
|
|
transform: rotateX(12deg);
|
|
}
|
|
|
|
.rotate-x-0 {
|
|
transform: rotateX(0deg);
|
|
}
|
|
|
|
.transform-style-3d {
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
/* * Animations */
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0px); }
|
|
50% { transform: translateY(-20px); }
|
|
}
|
|
|
|
.animate-float {
|
|
animation: float 6s ease-in-out infinite;
|
|
}
|
|
}
|