161 lines
4.1 KiB
CSS
161 lines
4.1 KiB
CSS
/* Theme Rules from docs/theme-rules.md - Light Theme Only */
|
|
|
|
/* Custom properties for the design system */
|
|
:root {
|
|
/* Primary - Purple gradient system */
|
|
--color-primary-50: #faf5ff;
|
|
--color-primary-100: #f3e8ff;
|
|
--color-primary-200: #e9d5ff;
|
|
--color-primary-300: #d8b4fe;
|
|
--color-primary-400: #c084fc;
|
|
--color-primary-500: #a855f7;
|
|
--color-primary-600: #9333ea;
|
|
--color-primary-700: #7e22ce;
|
|
--color-primary-800: #6b21a8;
|
|
--color-primary-900: #581c87;
|
|
|
|
/* Accent - Pink gradient */
|
|
--color-accent-400: #f472b6;
|
|
--color-accent-500: #ec4899;
|
|
--color-accent-600: #db2777;
|
|
|
|
/* Neutral - Slate system */
|
|
--color-neutral-50: #f8fafc;
|
|
--color-neutral-100: #f1f5f9;
|
|
--color-neutral-200: #e2e8f0;
|
|
--color-neutral-300: #cbd5e1;
|
|
--color-neutral-400: #94a3b8;
|
|
--color-neutral-500: #64748b;
|
|
--color-neutral-600: #475569;
|
|
--color-neutral-700: #334155;
|
|
--color-neutral-800: #1e293b;
|
|
--color-neutral-900: #0f172a;
|
|
|
|
/* Font families */
|
|
--font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
|
|
|
/* Spacing scale */
|
|
--space-1: 0.25rem; /* 4px */
|
|
--space-2: 0.5rem; /* 8px */
|
|
--space-3: 0.75rem; /* 12px */
|
|
--space-4: 1rem; /* 16px */
|
|
--space-5: 1.25rem; /* 20px */
|
|
--space-6: 1.5rem; /* 24px */
|
|
--space-8: 2rem; /* 32px */
|
|
--space-10: 2.5rem; /* 40px */
|
|
--space-12: 3rem; /* 48px */
|
|
}
|
|
|
|
/* Button components */
|
|
.btn-primary {
|
|
@apply bg-gradient-to-r from-purple-600 to-pink-600 text-white font-medium py-2 px-4 rounded-lg shadow-sm hover:shadow-md transition-all duration-200;
|
|
}
|
|
|
|
.btn-secondary {
|
|
@apply bg-white text-purple-600 border border-purple-200 font-medium py-2 px-4 rounded-lg hover:bg-purple-50 transition-colors duration-200;
|
|
}
|
|
|
|
.btn-destructive {
|
|
@apply bg-red-600 text-white font-medium py-2 px-4 rounded-lg shadow-sm hover:bg-red-700 transition-colors duration-200;
|
|
}
|
|
|
|
/* Card components */
|
|
.card {
|
|
@apply bg-white rounded-lg shadow-sm border border-neutral-200 p-6 hover:shadow-md transition-shadow duration-200;
|
|
}
|
|
|
|
.card-header {
|
|
@apply pb-4 border-b border-neutral-200 mb-4;
|
|
}
|
|
|
|
.card-body {
|
|
@apply space-y-4;
|
|
}
|
|
|
|
/* Form components */
|
|
.form-input {
|
|
@apply block w-full rounded-md border-neutral-300 shadow-sm focus:border-purple-500 focus:ring-purple-500 sm:text-sm;
|
|
}
|
|
|
|
.form-label {
|
|
@apply block text-sm font-medium text-neutral-700 mb-1;
|
|
}
|
|
|
|
.form-error {
|
|
@apply text-sm text-red-600 mt-1;
|
|
}
|
|
|
|
/* Navigation */
|
|
.nav-link {
|
|
@apply text-neutral-600 hover:text-purple-600 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200;
|
|
}
|
|
|
|
.nav-link-active {
|
|
@apply text-purple-600 bg-purple-50;
|
|
}
|
|
|
|
/* Layout utilities */
|
|
.container {
|
|
@apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
|
|
}
|
|
|
|
.grid-responsive {
|
|
@apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6;
|
|
}
|
|
|
|
.grid-cards {
|
|
@apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6;
|
|
}
|
|
|
|
/* Animation utilities */
|
|
.hover-lift {
|
|
@apply transition-transform duration-200 hover:-translate-y-1;
|
|
}
|
|
|
|
.hover-glow {
|
|
@apply transition-all duration-200 hover:shadow-lg hover:shadow-purple-500/25;
|
|
}
|
|
|
|
.focus-ring {
|
|
@apply focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2;
|
|
}
|
|
|
|
.transition-fast {
|
|
@apply transition-all duration-150 ease-in-out;
|
|
}
|
|
|
|
.transition-normal {
|
|
@apply transition-all duration-200 ease-in-out;
|
|
}
|
|
|
|
.transition-slow {
|
|
@apply transition-all duration-300 ease-in-out;
|
|
}
|
|
|
|
/* State utilities */
|
|
.disabled {
|
|
@apply opacity-50 cursor-not-allowed;
|
|
}
|
|
|
|
.animate-pulse-subtle {
|
|
@apply animate-pulse;
|
|
animation-duration: 3s;
|
|
}
|
|
|
|
.fade-in {
|
|
@apply animate-in fade-in-0 duration-500;
|
|
}
|
|
|
|
/* Accessibility utilities */
|
|
.focus-visible {
|
|
@apply focus:outline-none focus-visible:ring-2 focus-visible:ring-purple-500 focus-visible:ring-offset-2;
|
|
}
|
|
|
|
.text-primary {
|
|
@apply text-neutral-900;
|
|
}
|
|
|
|
.text-secondary {
|
|
@apply text-neutral-600;
|
|
} |