mirror of
https://github.com/lukaszraczylo/gohoarder.git
synced 2026-10-13 00:48:26 +00:00
lukaszraczylo
70d6c8988a
Switch to the @tailwindcss/vite plugin and the @import entry. Load the existing config with @config and keep class-based dark mode through a custom variant. Remove the postcss config and its autoprefixer dependency, which v4 no longer needs.
84 lines
2.3 KiB
CSS
84 lines
2.3 KiB
CSS
@import '@fortawesome/fontawesome-free/css/all.min.css';
|
|
|
|
@import 'tailwindcss';
|
|
@config '../../tailwind.config.js';
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
@layer base {
|
|
:root {
|
|
/* Tailwind slate-50 for background */
|
|
--background: 210 40% 98%;
|
|
/* Tailwind slate-900 for foreground */
|
|
--foreground: 222 47% 11%;
|
|
/* White for cards */
|
|
--card: 0 0% 100%;
|
|
--card-foreground: 222 47% 11%;
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 222 47% 11%;
|
|
/* Tailwind slate-700 for primary */
|
|
--primary: 215 25% 27%;
|
|
--primary-foreground: 0 0% 100%;
|
|
/* Tailwind slate-100 for secondary */
|
|
--secondary: 210 40% 96%;
|
|
--secondary-foreground: 222 47% 11%;
|
|
/* Tailwind slate-100 for muted */
|
|
--muted: 210 40% 96%;
|
|
/* Tailwind slate-500 for muted-foreground */
|
|
--muted-foreground: 215 20% 65%;
|
|
--accent: 210 40% 96%;
|
|
--accent-foreground: 222 47% 11%;
|
|
/* Tailwind red-500 for destructive */
|
|
--destructive: 0 84% 60%;
|
|
--destructive-foreground: 0 0% 98%;
|
|
/* Tailwind slate-200 for border */
|
|
--border: 214 32% 91%;
|
|
--input: 214 32% 91%;
|
|
/* Tailwind slate-700 for ring */
|
|
--ring: 215 25% 27%;
|
|
/* Chart colors using Tailwind palette with slate base */
|
|
--chart-1: 215 25% 27%;
|
|
--chart-2: 200 98% 39%;
|
|
--chart-3: 142 71% 45%;
|
|
--chart-4: 25 95% 53%;
|
|
--chart-5: 262 83% 58%;
|
|
--radius: 0.75rem;
|
|
}
|
|
|
|
.dark {
|
|
--background: 222 47% 11%;
|
|
--foreground: 210 40% 98%;
|
|
--card: 222 47% 11%;
|
|
--card-foreground: 210 40% 98%;
|
|
--popover: 222 47% 11%;
|
|
--popover-foreground: 210 40% 98%;
|
|
--primary: 200 98% 39%;
|
|
--primary-foreground: 0 0% 100%;
|
|
--secondary: 217 33% 17%;
|
|
--secondary-foreground: 210 40% 98%;
|
|
--muted: 217 33% 17%;
|
|
--muted-foreground: 215 20% 65%;
|
|
--accent: 217 33% 17%;
|
|
--accent-foreground: 210 40% 98%;
|
|
--destructive: 0 84% 60%;
|
|
--destructive-foreground: 0 0% 98%;
|
|
--border: 217 33% 17%;
|
|
--input: 217 33% 17%;
|
|
--ring: 200 98% 39%;
|
|
--chart-1: 200 98% 39%;
|
|
--chart-2: 142 71% 45%;
|
|
--chart-3: 262 83% 58%;
|
|
--chart-4: 25 95% 53%;
|
|
--chart-5: 340 82% 52%;
|
|
}
|
|
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
}
|
|
}
|
|
|
|
/* Custom component styles have been replaced with shadcn-vue components */
|