blog-system-ui/index.css

Blog UI copier (shadcn-style) with features, admin, Supabase hooks.

@import 'tailwindcss';

@theme {
	--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-primary: hsl(var(--primary));
	--color-primary-foreground: hsl(var(--primary-foreground));
	--color-primary-hover: hsl(var(--primary-hover));

	--color-admin-bg: hsl(var(--admin-bg));
	--color-admin-sidebar: hsl(var(--admin-sidebar));
	--color-admin-sidebar-hover: hsl(var(--admin-sidebar-hover));
	--color-admin-accent: hsl(var(--admin-accent));

	--color-success: hsl(var(--success));
	--color-warning: hsl(var(--warning));
	--color-danger: hsl(var(--danger));
	--color-info: hsl(var(--info));

	--color-secondary: hsl(var(--secondary));
	--color-secondary-foreground: hsl(var(--secondary-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-destructive: hsl(var(--destructive));
	--color-destructive-foreground: hsl(var(--destructive-foreground));

	--color-border: hsl(var(--border));
	--color-input: hsl(var(--input));
	--color-ring: hsl(var(--ring));

	--color-sidebar-background: hsl(var(--sidebar-background));
	--color-sidebar-foreground: hsl(var(--sidebar-foreground));
	--color-sidebar-primary: hsl(var(--sidebar-primary));
	--color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
	--color-sidebar-accent: hsl(var(--sidebar-accent));
	--color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
	--color-sidebar-border: hsl(var(--sidebar-border));
	--color-sidebar-ring: hsl(var(--sidebar-ring));

	--transition-blog-transition: var(--blog-transition);

	--background-image-blog-gradient: var(--blog-gradient);
	--background-image-blog-gradient-subtle: var(--blog-gradient-subtle);
	--shadow-blog: var(--blog-shadow);
	--shadow-blog-hover: var(--blog-shadow-hover);

	--radius: var(--radius);
}

:root {
	--background: 255 255% 100%;
	--foreground: 222.2 84% 4.9%;

	--card: 255 255% 100%;
	--card-foreground: 222.2 84% 4.9%;

	--popover: 255 255% 100%;
	--popover-foreground: 222.2 84% 4.9%;

	/* Purple theme for admin dashboard */
	--primary: 263 85% 65%;
	--primary-foreground: 255 255% 100%;
	--primary-hover: 263 85% 60%;

	/* Admin specific colors */
	--admin-bg: 250 20% 98%;
	--admin-sidebar: 263 85% 65%;
	--admin-sidebar-hover: 263 85% 70%;
	--admin-accent: 280 100% 70%;

	/* Status colors */
	--success: 142 76% 36%;
	--warning: 38 92% 50%;
	--danger: 0 84% 60%;
	--info: 217 91% 60%;

	--secondary: 210 40% 96.1%;
	--secondary-foreground: 222.2 47.4% 11.2%;

	--muted: 210 40% 96.1%;
	--muted-foreground: 215.4 16.3% 46.9%;

	--accent: 210 40% 96.1%;
	--accent-foreground: 222.2 47.4% 11.2%;

	--destructive: 0 84.2% 60.2%;
	--destructive-foreground: 210 40% 98%;

	--border: 214.3 31.8% 90.4%;
	--input: 214.3 31.8% 91.4%;
	--ring: 222.2 84% 4.9%;

	--radius: 0.5rem;

	--sidebar-background: 0 0% 98%;

	--sidebar-foreground: 240 5.3% 26.1%;

	--sidebar-primary: 240 5.9% 10%;

	--sidebar-primary-foreground: 0 0% 98%;

	--sidebar-accent: 240 4.8% 95.9%;

	--sidebar-accent-foreground: 240 5.9% 10%;

	--sidebar-border: 220 13% 91%;

	--sidebar-ring: 217.2 91.2% 59.8%;

	--card: 250 100% 100%;
	--card-foreground: 240 15% 9%;

	--blog-shadow: 0 4px 20px -2px hsl(262 83% 58% / 0.1);
	--blog-shadow-hover: 0 8px 40px -4px hsl(262 83% 58% / 0.2);
	--blog-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	--blog-gradient: linear-gradient(
		135deg,
		hsl(262 83% 58%),
		hsl(272 91% 68%)
	);

	--blog-gradient-subtle: linear-gradient(
		180deg,
		hsl(250 100% 99%),
		hsl(250 60% 96%)
	);
	--blog-shadow: 0 4px 20px -2px hsl(262 83% 58% / 0.1);
	--blog-shadow-hover: 0 8px 40px -4px hsl(262 83% 58% / 0.2);
	--blog-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dark {
	--background: 222.2 84% 4.9%;
	--foreground: 210 40% 98%;

	--card: 222.2 84% 4.9%;
	--card-foreground: 210 40% 98%;

	--popover: 222.2 84% 4.9%;
	--popover-foreground: 210 40% 98%;

	--primary: 263 85% 65%;
	--primary-foreground: 255 255% 100%;
	--primary-hover: 263 85% 70%;

	--admin-bg: 222.2 84% 4.9%;
	--admin-sidebar: 263 85% 65%;
	--admin-sidebar-hover: 263 85% 70%;
	--admin-accent: 280 100% 70%;

	--secondary: 217.2 32.6% 17.5%;
	--secondary-foreground: 210 40% 98%;

	--muted: 217.2 32.6% 17.5%;
	--muted-foreground: 215 20.2% 65.1%;

	--accent: 217.2 32.6% 17.5%;
	--accent-foreground: 210 40% 98%;

	--destructive: 0 62.8% 30.6%;
	--destructive-foreground: 210 40% 98%;

	--card: 240 15% 9%;
	--card-foreground: 250 100% 98%;

	--border: 217.2 32.6% 17.5%;
	--input: 217.2 32.6% 17.5%;
	--ring: 212.7 26.8% 83.9%;
	--sidebar-background: 240 5.9% 10%;
	--sidebar-foreground: 240 4.8% 95.9%;
	--sidebar-primary: 224.3 76.3% 48%;
	--sidebar-primary-foreground: 0 0% 100%;
	--sidebar-accent: 240 3.7% 15.9%;
	--sidebar-accent-foreground: 240 4.8% 95.9%;
	--sidebar-border: 240 3.7% 15.9%;
	--sidebar-ring: 217.2 91.2% 59.8%;

	--blog-shadow: 0 4px 20px -2px hsl(272 91% 68% / 0.15);
	--blog-shadow-hover: 0 8px 40px -4px hsl(272 91% 68% / 0.25);
	--blog-gradient: linear-gradient(
		135deg,
		hsl(272 91% 68%),
		hsl(262 83% 58%)
	);
	--blog-gradient-subtle: linear-gradient(
		180deg,
		hsl(240 15% 7%),
		hsl(240 15% 12%)
	);
	--blog-shadow: 0 4px 20px -2px hsl(272 91% 68% / 0.15);
	--blog-shadow-hover: 0 8px 40px -4px hsl(272 91% 68% / 0.25);
}