8f2f18edf7
- Add comprehensive design token system (colors, typography, spacing) - Create 12 new UI components with Radix UI primitives - Add layout components (PageShell, StatsCard, EmptyState, DataTable) - Polish all pages with new component library - Improve accessibility with WCAG 2.1 compliance - Add dark mode support with semantic color tokens - Update 947 tests to match new UI patterns Closes #409
269 lines
7.5 KiB
CSS
269 lines
7.5 KiB
CSS
@import "tailwindcss";
|
|
@config "../tailwind.config.js";
|
|
|
|
@layer utilities {
|
|
@keyframes slide-in {
|
|
from {
|
|
transform: translateX(100%);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.animate-slide-in {
|
|
animation: slide-in 0.3s ease-out;
|
|
}
|
|
|
|
@keyframes bob-boat {
|
|
0%, 100% {
|
|
transform: translateY(-3px);
|
|
}
|
|
50% {
|
|
transform: translateY(3px);
|
|
}
|
|
}
|
|
|
|
.animate-bob-boat {
|
|
animation: bob-boat 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes pulse-glow {
|
|
0%, 100% {
|
|
opacity: 0.6;
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
transform: scale(1.05);
|
|
}
|
|
}
|
|
|
|
.animate-pulse-glow {
|
|
animation: pulse-glow 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes rotate-head {
|
|
0%, 100% {
|
|
transform: rotate(-10deg);
|
|
}
|
|
50% {
|
|
transform: rotate(10deg);
|
|
}
|
|
}
|
|
|
|
.animate-rotate-head {
|
|
animation: rotate-head 3s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes spin-y {
|
|
0% {
|
|
transform: rotateY(0deg);
|
|
}
|
|
100% {
|
|
transform: rotateY(360deg);
|
|
}
|
|
}
|
|
|
|
.animate-spin-y {
|
|
animation: spin-y 2s linear infinite;
|
|
}
|
|
}
|
|
|
|
/* ========================================
|
|
* DESIGN TOKENS - CSS Custom Properties
|
|
* ======================================== */
|
|
|
|
:root {
|
|
/* ========================================
|
|
* BRAND COLORS (RGB format for alpha support)
|
|
* ======================================== */
|
|
--color-brand-50: 239 246 255; /* #eff6ff */
|
|
--color-brand-100: 219 234 254; /* #dbeafe */
|
|
--color-brand-200: 191 219 254; /* #bfdbfe */
|
|
--color-brand-300: 147 197 253; /* #93c5fd */
|
|
--color-brand-400: 96 165 250; /* #60a5fa */
|
|
--color-brand-500: 59 130 246; /* #3b82f6 - Primary */
|
|
--color-brand-600: 37 99 235; /* #2563eb */
|
|
--color-brand-700: 29 78 216; /* #1d4ed8 */
|
|
--color-brand-800: 30 64 175; /* #1e40af */
|
|
--color-brand-900: 30 58 138; /* #1e3a8a */
|
|
--color-brand-950: 23 37 84; /* #172554 */
|
|
|
|
/* ========================================
|
|
* SEMANTIC SURFACE COLORS - Dark Mode Default
|
|
* ======================================== */
|
|
--color-bg-base: 15 23 42; /* slate-900 */
|
|
--color-bg-subtle: 30 41 59; /* slate-800 */
|
|
--color-bg-muted: 51 65 85; /* slate-700 */
|
|
--color-bg-elevated: 30 41 59; /* slate-800 */
|
|
--color-bg-overlay: 2 6 23; /* slate-950 */
|
|
|
|
/* ========================================
|
|
* BORDER COLORS
|
|
* ======================================== */
|
|
--color-border-default: 51 65 85; /* slate-700 */
|
|
--color-border-muted: 30 41 59; /* slate-800 */
|
|
--color-border-strong: 71 85 105; /* slate-600 */
|
|
|
|
/* ========================================
|
|
* TEXT COLORS
|
|
* ======================================== */
|
|
--color-text-primary: 248 250 252; /* slate-50 */
|
|
--color-text-secondary: 203 213 225; /* slate-300 */
|
|
--color-text-muted: 148 163 184; /* slate-400 */
|
|
--color-text-inverted: 15 23 42; /* slate-900 */
|
|
|
|
/* ========================================
|
|
* STATE COLORS
|
|
* ======================================== */
|
|
--color-success: 34 197 94; /* green-500 */
|
|
--color-success-muted: 20 83 45; /* green-900 */
|
|
--color-warning: 234 179 8; /* yellow-500 */
|
|
--color-warning-muted: 113 63 18; /* yellow-900 */
|
|
--color-error: 239 68 68; /* red-500 */
|
|
--color-error-muted: 127 29 29; /* red-900 */
|
|
--color-info: 59 130 246; /* blue-500 */
|
|
--color-info-muted: 30 58 138; /* blue-900 */
|
|
|
|
/* ========================================
|
|
* TYPOGRAPHY
|
|
* ======================================== */
|
|
--font-sans: 'Inter', system-ui, -apple-system, sans-serif;
|
|
--font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
|
|
|
|
/* Type Scale (rem) */
|
|
--text-xs: 0.75rem; /* 12px */
|
|
--text-sm: 0.875rem; /* 14px */
|
|
--text-base: 1rem; /* 16px */
|
|
--text-lg: 1.125rem; /* 18px */
|
|
--text-xl: 1.25rem; /* 20px */
|
|
--text-2xl: 1.5rem; /* 24px */
|
|
--text-3xl: 1.875rem; /* 30px */
|
|
--text-4xl: 2.25rem; /* 36px */
|
|
|
|
/* Line Heights */
|
|
--leading-tight: 1.25;
|
|
--leading-normal: 1.5;
|
|
--leading-relaxed: 1.75;
|
|
|
|
/* Font Weights */
|
|
--font-normal: 400;
|
|
--font-medium: 500;
|
|
--font-semibold: 600;
|
|
--font-bold: 700;
|
|
|
|
/* ========================================
|
|
* SPACING & LAYOUT
|
|
* ======================================== */
|
|
--space-0: 0;
|
|
--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 */
|
|
--space-16: 4rem; /* 64px */
|
|
|
|
/* Container */
|
|
--container-sm: 640px;
|
|
--container-md: 768px;
|
|
--container-lg: 1024px;
|
|
--container-xl: 1280px;
|
|
--container-2xl: 1536px;
|
|
|
|
/* Page Gutters */
|
|
--page-gutter: var(--space-6);
|
|
--page-gutter-lg: var(--space-8);
|
|
|
|
/* ========================================
|
|
* EFFECTS
|
|
* ======================================== */
|
|
/* Border Radius */
|
|
--radius-sm: 0.25rem; /* 4px */
|
|
--radius-md: 0.375rem; /* 6px */
|
|
--radius-lg: 0.5rem; /* 8px */
|
|
--radius-xl: 0.75rem; /* 12px */
|
|
--radius-2xl: 1rem; /* 16px */
|
|
--radius-full: 9999px;
|
|
|
|
/* Shadows */
|
|
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
|
|
|
/* Transitions */
|
|
--transition-fast: 150ms;
|
|
--transition-normal: 200ms;
|
|
--transition-slow: 300ms;
|
|
--ease-default: cubic-bezier(0.4, 0, 0.2, 1);
|
|
--ease-in: cubic-bezier(0.4, 0, 1, 1);
|
|
--ease-out: cubic-bezier(0, 0, 0.2, 1);
|
|
|
|
/* Focus Ring */
|
|
--ring-width: 2px;
|
|
--ring-offset: 2px;
|
|
--ring-color: var(--color-brand-500);
|
|
|
|
/* ========================================
|
|
* LEGACY ROOT STYLES (preserved)
|
|
* ======================================== */
|
|
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
|
line-height: 1.5;
|
|
font-weight: 400;
|
|
|
|
color-scheme: dark;
|
|
color: rgba(255, 255, 255, 0.87);
|
|
background-color: #0f172a;
|
|
|
|
font-synthesis: none;
|
|
text-rendering: optimizeLegibility;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
/* ========================================
|
|
* LIGHT MODE OVERRIDES
|
|
* ======================================== */
|
|
.light {
|
|
/* Surfaces */
|
|
--color-bg-base: 248 250 252; /* slate-50 */
|
|
--color-bg-subtle: 241 245 249; /* slate-100 */
|
|
--color-bg-muted: 226 232 240; /* slate-200 */
|
|
--color-bg-elevated: 255 255 255; /* white */
|
|
--color-bg-overlay: 15 23 42; /* slate-900 */
|
|
|
|
/* Borders */
|
|
--color-border-default: 226 232 240; /* slate-200 */
|
|
--color-border-muted: 241 245 249; /* slate-100 */
|
|
--color-border-strong: 203 213 225; /* slate-300 */
|
|
|
|
/* Text */
|
|
--color-text-primary: 15 23 42; /* slate-900 */
|
|
--color-text-secondary: 71 85 105; /* slate-600 */
|
|
--color-text-muted: 148 163 184; /* slate-400 */
|
|
--color-text-inverted: 255 255 255; /* white */
|
|
|
|
/* States - Light mode muted variants */
|
|
--color-success-muted: 220 252 231; /* green-100 */
|
|
--color-warning-muted: 254 249 195; /* yellow-100 */
|
|
--color-error-muted: 254 226 226; /* red-100 */
|
|
--color-info-muted: 219 234 254; /* blue-100 */
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
min-width: 320px;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
#root {
|
|
min-height: 100vh;
|
|
}
|