salman/igny8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

phase 1-3 css refactor

Browse Source
This commit is contained in:
Desktop
2025-11-14 15:04:47 +05:00
parent 9eee5168bb
commit 27465457d5
26 changed files with 818 additions and 429 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
frontend/src/styles/tokens.css Normal file
View File

@@ -0,0 +1,77 @@
/* ===================================================================
DESIGN TOKENS
===================================================================
Single source of truth for all design tokens (colors, gradients, shadows, etc.)
Used by both Tailwind @theme and legacy CSS classes.
🔒 DESIGN SYSTEM LOCKED - See DESIGN_SYSTEM.md for complete style guide
=================================================================== */
:root {
/* ===================================================================
PRIMARY BRAND COLORS
=================================================================== */
--color-primary: #0693e3; /* Primary brand blue - main CTA */
--color-primary-dark: #0472b8; /* Darkened for hover / active / gradient depth */
/* Success Green (cooler to match cyan) */
--color-success: #0bbf87; /* Teal-green for success states */
--color-success-dark: #08966b; /* Deeper teal-green for hover / active */
/* Amber / Warning (warmed up to complement cyan) */
--color-warning: #ff7a00; /* Vivid orange for highlight / warning */
--color-warning-dark: #cc5f00; /* Darker orange for hover / strong warning */
/* Danger / Destructive */
--color-danger: #ef4444;
--color-danger-dark: #d13333; /* Refreshed red with better contrast */
/* Purple */
--color-purple: #5d4ae3; /* Purple for highlighting / special emphasis */
--color-purple-dark: #3a2f94; /* Darker purple for hover / active */
/* ===================================================================
BACKGROUND COLORS
=================================================================== */
--color-navy: #0d1b2a; /* Sidebar background */
--color-navy-light: #142b3f; /* Slightly lighter navy, hover/active */
--color-surface: #f8fafc; /* Page background (soft gray-white) */
--color-panel: #ffffff; /* Cards / panel foreground */
--color-panel-alt: #f1f5f9; /* Sub-panel / hover card background */
/* ===================================================================
TEXT COLORS
=================================================================== */
--color-text: #555a68; /* main headings/body text */
--color-text-dim: #64748b; /* secondary/subtext */
--color-text-light: #e5eaf0; /* text on dark sidebar */
--color-stroke: #e2e8f0; /* table/grid borders and dividers */
/* ===================================================================
BORDER RADIUS
=================================================================== */
--radius-base: 6px;
/* ===================================================================
GRADIENTS
=================================================================== */
--gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
--gradient-success: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%);
--gradient-warning: linear-gradient(135deg, var(--color-warning) 0%, var(--color-warning-dark) 100%);
--gradient-danger: linear-gradient(135deg, var(--color-danger) 0%, var(--color-danger-dark) 100%);
--gradient-purple: linear-gradient(135deg, var(--color-purple) 0%, var(--color-purple-dark) 100%);
--gradient-panel: linear-gradient(180deg, var(--color-panel) 0%, var(--color-panel-alt) 100%);
}
/* ===================================================================
DARK MODE OVERRIDES
=================================================================== */
.dark {
--color-surface: #1f2937;
--color-panel: #1f2937;
--color-panel-alt: #111827;
--color-text: #e5eaf0;
--color-text-dim: #9ca3af;
--color-stroke: #374151;
}