phase 1-3 css refactor
This commit is contained in:
Desktop
@@ -1,6 +1,7 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap")
|
||||
layer(base);
|
||||
|
||||
@import "./tokens.css";
|
||||
@import "tailwindcss";
|
||||
|
||||
@layer base {
|
||||
|
||||
@@ -13,60 +13,37 @@
|
||||
=================================================================== */
|
||||
|
||||
/* === CSS CUSTOM PROPERTIES (Variables) === */
|
||||
:root {
|
||||
/* Primary Brand Colors */
|
||||
--igny8-blue: #0693e3; /* Rocket vivid cyan blue - primary brand & main CTA */
|
||||
--igny8-blue-dark: #0472b8; /* Darkened cyan for hover / active / gradient depth */
|
||||
|
||||
/* Success Green (cooler to match cyan) */
|
||||
--igny8-green: #0bbf87; /* Slightly cooler teal-green for success states */
|
||||
--igny8-green-dark: #08966b; /* Deeper teal-green for hover / active */
|
||||
|
||||
/* Amber / Warning (warmed up to complement cyan) */
|
||||
--igny8-amber: #ff7a00; /* Rocket's vivid orange for highlight / warning */
|
||||
--igny8-amber-dark: #cc5f00; /* Darker orange for hover / strong warning */
|
||||
|
||||
/* Danger / Destructive */
|
||||
--igny8-red: #ef4444;
|
||||
--igny8-red-dark: #d13333; /* Refreshed red with better contrast against cyan */
|
||||
|
||||
/* Purple */
|
||||
--igny8-purple: #5d4ae3; /* Purple for highlighting / special emphasis */
|
||||
--igny8-purple-dark: #3a2f94; /* Darker purple for hover / active */
|
||||
|
||||
/* Background Colors */
|
||||
--igny8-navy-bg: #0d1b2a; /* Sidebar background */
|
||||
--igny8-navy-bg-2: #142b3f; /* Slightly lighter navy, hover/active */
|
||||
--igny8-surface: #f8fafc; /* Page background (soft gray-white) */
|
||||
--igny8-panel: #ffffff; /* Cards / panel foreground */
|
||||
--igny8-panel-2: #f1f5f9; /* Sub-panel / hover card background */
|
||||
|
||||
/* Text Colors */
|
||||
--igny8-text: #555a68; /* main headings/body text */
|
||||
--igny8-text-dim: #64748b; /* secondary/subtext */
|
||||
--igny8-text-light: #e5eaf0; /* text on dark sidebar */
|
||||
--igny8-stroke: #e2e8f0; /* table/grid borders and dividers */
|
||||
|
||||
/* Border Radius */
|
||||
--igny8-radius: 6px;
|
||||
|
||||
/* Gradients */
|
||||
--igny8-gradient-blue: linear-gradient(135deg, var(--igny8-blue) 0%, var(--igny8-blue-dark) 100%);
|
||||
--igny8-gradient-success: linear-gradient(135deg, var(--igny8-green) 0%, var(--igny8-green-dark) 100%);
|
||||
--igny8-gradient-warning: linear-gradient(135deg, var(--igny8-amber) 0%, var(--igny8-amber-dark) 100%);
|
||||
--igny8-gradient-danger: linear-gradient(135deg, var(--igny8-red) 0%, var(--igny8-red-dark) 100%);
|
||||
--igny8-gradient-purple: linear-gradient(135deg, var(--igny8-purple) 0%, var(--igny8-purple-dark) 100%);
|
||||
--igny8-gradient-panel: linear-gradient(180deg, var(--igny8-panel) 0%, var(--igny8-panel-2) 100%);
|
||||
}
|
||||
/* Import tokens from centralized tokens.css */
|
||||
@import "./tokens.css";
|
||||
|
||||
/* Dark mode overrides (if needed) */
|
||||
.dark {
|
||||
--igny8-surface: #1f2937;
|
||||
--igny8-panel: #1f2937;
|
||||
--igny8-panel-2: #111827;
|
||||
--igny8-text: #e5eaf0;
|
||||
--igny8-text-dim: #9ca3af;
|
||||
--igny8-stroke: #374151;
|
||||
/* Legacy variable aliases for backward compatibility during migration */
|
||||
:root {
|
||||
--igny8-blue: var(--color-primary);
|
||||
--igny8-blue-dark: var(--color-primary-dark);
|
||||
--igny8-green: var(--color-success);
|
||||
--igny8-green-dark: var(--color-success-dark);
|
||||
--igny8-amber: var(--color-warning);
|
||||
--igny8-amber-dark: var(--color-warning-dark);
|
||||
--igny8-red: var(--color-danger);
|
||||
--igny8-red-dark: var(--color-danger-dark);
|
||||
--igny8-purple: var(--color-purple);
|
||||
--igny8-purple-dark: var(--color-purple-dark);
|
||||
--igny8-navy-bg: var(--color-navy);
|
||||
--igny8-navy-bg-2: var(--color-navy-light);
|
||||
--igny8-surface: var(--color-surface);
|
||||
--igny8-panel: var(--color-panel);
|
||||
--igny8-panel-2: var(--color-panel-alt);
|
||||
--igny8-text: var(--color-text);
|
||||
--igny8-text-dim: var(--color-text-dim);
|
||||
--igny8-text-light: var(--color-text-light);
|
||||
--igny8-stroke: var(--color-stroke);
|
||||
--igny8-radius: var(--radius-base);
|
||||
--igny8-gradient-blue: var(--gradient-primary);
|
||||
--igny8-gradient-success: var(--gradient-success);
|
||||
--igny8-gradient-warning: var(--gradient-warning);
|
||||
--igny8-gradient-danger: var(--gradient-danger);
|
||||
--igny8-gradient-purple: var(--gradient-purple);
|
||||
--igny8-gradient-panel: var(--gradient-panel);
|
||||
}
|
||||
|
||||
/* ===================================================================
|
||||
|
||||
77
frontend/src/styles/tokens.css
Normal file
77
frontend/src/styles/tokens.css
Normal 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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user