GLobal Styling part 1
This commit is contained in:
IGNY8 VPS (Salman)
@@ -8,6 +8,8 @@
|
||||
🔒 STYLE LOCKED - All colors, spacing, and components must use
|
||||
these tokens. See DESIGN_SYSTEM.md for usage guidelines.
|
||||
|
||||
⚠️ ONLY 6 HEX VALUES IN ENTIRE SYSTEM - Everything else derived!
|
||||
|
||||
Last Updated: 2026-01-01
|
||||
=================================================================== */
|
||||
|
||||
@@ -16,135 +18,70 @@
|
||||
|
||||
|
||||
/* ===================================================================
|
||||
SECTION 1: DESIGN TOKENS (CSS VARIABLES)
|
||||
THE 6 PRIMARY COLOR TOKENS - ONLY HEX VALUES ALLOWED HERE
|
||||
===================================================================
|
||||
All other colors in the system MUST derive from these 6 using color-mix().
|
||||
This enables dynamic theming - change these 6 = entire app updates.
|
||||
=================================================================== */
|
||||
|
||||
:root {
|
||||
/* -----------------------------------------------------------------
|
||||
1.1 PRIMARY BRAND COLORS
|
||||
----------------------------------------------------------------- */
|
||||
|
||||
/* Primary Blue - Electric & Confident */
|
||||
--color-primary: #0077B6;
|
||||
--color-primary-dark: #005A8C;
|
||||
--color-primary-light: #00A8E8;
|
||||
--color-primary-subtle: #E0F4FF;
|
||||
|
||||
/* Success - Fresh Mint Teal */
|
||||
--color-success: #00B894;
|
||||
--color-success-dark: #009676;
|
||||
--color-success-light: #55EFC4;
|
||||
--color-success-subtle: #E0FFF7;
|
||||
|
||||
/* Warning - Bold Amber */
|
||||
--color-warning: #F59E0B;
|
||||
--color-warning-dark: #D97706;
|
||||
--color-warning-light: #FCD34D;
|
||||
--color-warning-subtle: #FFF8E6;
|
||||
|
||||
/* Danger/Error - Vivid Red */
|
||||
--color-danger: #DC2626;
|
||||
--color-danger-dark: #B91C1C;
|
||||
--color-danger-light: #F87171;
|
||||
--color-danger-subtle: #FEE8E8;
|
||||
|
||||
/* Purple - Electric Violet (Premium/Special) */
|
||||
--color-purple: #7C3AED;
|
||||
--color-purple-dark: #5B21B6;
|
||||
--color-purple-light: #A78BFA;
|
||||
--color-purple-subtle: #F3EEFF;
|
||||
/* ===== THE ONLY 6 HEX VALUES IN THE ENTIRE SYSTEM ===== */
|
||||
--color-primary: #2C7AA1; /* Brand Blue - main CTA, links, primary actions */
|
||||
--color-success: #2CA18E; /* Success Green - confirmations, positive states */
|
||||
--color-warning: #D9A12C; /* Warning Amber - alerts, cautions */
|
||||
--color-danger: #A12C40; /* Danger Red - errors, destructive actions */
|
||||
--color-purple: #2C40A1; /* Purple - premium features, special emphasis */
|
||||
--color-gray-base: #667085; /* Gray Base - neutral text, borders, backgrounds */
|
||||
|
||||
/* -----------------------------------------------------------------
|
||||
1.2 ACCENT COLORS (Charts, Tags, Highlights)
|
||||
----------------------------------------------------------------- */
|
||||
/* ===================================================================
|
||||
DERIVED COLORS - All computed from the 6 primaries above
|
||||
=================================================================== */
|
||||
|
||||
/* Coral */
|
||||
--color-coral: #FF6B6B;
|
||||
--color-coral-dark: #EE5A5A;
|
||||
--color-coral-subtle: #FFF0F0;
|
||||
/* Primary Variants (derived from --color-primary) */
|
||||
--color-primary-dark: color-mix(in srgb, var(--color-primary) 75%, black);
|
||||
--color-primary-light: color-mix(in srgb, var(--color-primary) 60%, white);
|
||||
--color-primary-subtle: color-mix(in srgb, var(--color-primary) 10%, white);
|
||||
|
||||
/* Cyan */
|
||||
--color-cyan: #06B6D4;
|
||||
--color-cyan-dark: #0891B2;
|
||||
--color-cyan-subtle: #E0FCFF;
|
||||
/* Success Variants (derived from --color-success) */
|
||||
--color-success-dark: color-mix(in srgb, var(--color-success) 75%, black);
|
||||
--color-success-light: color-mix(in srgb, var(--color-success) 60%, white);
|
||||
--color-success-subtle: color-mix(in srgb, var(--color-success) 10%, white);
|
||||
|
||||
/* Indigo */
|
||||
--color-indigo: #4F46E5;
|
||||
--color-indigo-dark: #4338CA;
|
||||
--color-indigo-subtle: #EEF2FF;
|
||||
/* Warning Variants (derived from --color-warning) */
|
||||
--color-warning-dark: color-mix(in srgb, var(--color-warning) 75%, black);
|
||||
--color-warning-light: color-mix(in srgb, var(--color-warning) 60%, white);
|
||||
--color-warning-subtle: color-mix(in srgb, var(--color-warning) 10%, white);
|
||||
|
||||
/* Rose */
|
||||
--color-rose: #F43F5E;
|
||||
--color-rose-dark: #E11D48;
|
||||
--color-rose-subtle: #FFF1F3;
|
||||
/* Danger Variants (derived from --color-danger) */
|
||||
--color-danger-dark: color-mix(in srgb, var(--color-danger) 75%, black);
|
||||
--color-danger-light: color-mix(in srgb, var(--color-danger) 60%, white);
|
||||
--color-danger-subtle: color-mix(in srgb, var(--color-danger) 10%, white);
|
||||
|
||||
/* Emerald */
|
||||
--color-emerald: #10B981;
|
||||
--color-emerald-dark: #059669;
|
||||
--color-emerald-subtle: #ECFDF5;
|
||||
|
||||
/* Orange */
|
||||
--color-orange: #F97316;
|
||||
--color-orange-dark: #EA580C;
|
||||
--color-orange-subtle: #FFF7ED;
|
||||
/* Purple Variants (derived from --color-purple) */
|
||||
--color-purple-dark: color-mix(in srgb, var(--color-purple) 75%, black);
|
||||
--color-purple-light: color-mix(in srgb, var(--color-purple) 60%, white);
|
||||
--color-purple-subtle: color-mix(in srgb, var(--color-purple) 10%, white);
|
||||
|
||||
/* -----------------------------------------------------------------
|
||||
1.3 SURFACE & BACKGROUND COLORS
|
||||
----------------------------------------------------------------- */
|
||||
|
||||
/* Sidebar */
|
||||
--color-navy: #0F172A;
|
||||
--color-navy-light: #1E293B;
|
||||
--color-navy-lighter: #334155;
|
||||
|
||||
/* Page Backgrounds */
|
||||
--color-surface: #F8FAFC;
|
||||
--color-surface-alt: #F1F5F9;
|
||||
|
||||
/* Cards & Panels */
|
||||
/* ===================================================================
|
||||
BACKGROUND COLORS (derived from primaries)
|
||||
=================================================================== */
|
||||
--color-navy: color-mix(in srgb, var(--color-gray-base) 25%, black);
|
||||
--color-navy-light: color-mix(in srgb, var(--color-gray-base) 35%, black);
|
||||
--color-surface: color-mix(in srgb, var(--color-gray-base) 3%, white);
|
||||
--color-panel: #FFFFFF;
|
||||
--color-panel-alt: #F8FAFC;
|
||||
--color-panel-hover: #F1F5F9;
|
||||
--color-panel-alt: color-mix(in srgb, var(--color-gray-base) 8%, white);
|
||||
|
||||
/* Elevated Surfaces */
|
||||
--color-elevated: #FFFFFF;
|
||||
--color-overlay: rgba(15, 23, 42, 0.5);
|
||||
/* ===================================================================
|
||||
TEXT COLORS (derived from gray-base)
|
||||
=================================================================== */
|
||||
--color-text: color-mix(in srgb, var(--color-gray-base) 30%, black);
|
||||
--color-text-dim: var(--color-gray-base);
|
||||
--color-text-light: color-mix(in srgb, var(--color-gray-base) 15%, white);
|
||||
--color-stroke: color-mix(in srgb, var(--color-gray-base) 25%, white);
|
||||
|
||||
/* -----------------------------------------------------------------
|
||||
1.4 TEXT COLORS
|
||||
----------------------------------------------------------------- */
|
||||
|
||||
--color-text: #0F172A;
|
||||
--color-text-secondary: #475569;
|
||||
--color-text-tertiary: #94A3B8;
|
||||
--color-text-inverse: #FFFFFF;
|
||||
--color-text-light: #E2E8F0;
|
||||
--color-text-link: #0077B6;
|
||||
--color-text-link-hover: #005A8C;
|
||||
|
||||
/* -----------------------------------------------------------------
|
||||
1.5 BORDER & STROKE COLORS
|
||||
----------------------------------------------------------------- */
|
||||
|
||||
--color-stroke: #E2E8F0;
|
||||
--color-stroke-light: #F1F5F9;
|
||||
--color-stroke-dark: #CBD5E1;
|
||||
--color-stroke-focus: #0077B6;
|
||||
|
||||
/* -----------------------------------------------------------------
|
||||
1.6 INTERACTIVE STATES
|
||||
----------------------------------------------------------------- */
|
||||
|
||||
--color-hover: rgba(0, 119, 182, 0.08);
|
||||
--color-active: rgba(0, 119, 182, 0.12);
|
||||
--color-selected: rgba(0, 119, 182, 0.16);
|
||||
--color-disabled: #94A3B8;
|
||||
--color-disabled-bg: #F1F5F9;
|
||||
|
||||
/* -----------------------------------------------------------------
|
||||
1.7 BORDER RADIUS
|
||||
----------------------------------------------------------------- */
|
||||
|
||||
/* ===================================================================
|
||||
BORDER RADIUS
|
||||
=================================================================== */
|
||||
--radius-xs: 4px;
|
||||
--radius-sm: 6px;
|
||||
--radius-base: 8px;
|
||||
@@ -153,209 +90,51 @@
|
||||
--radius-xl: 16px;
|
||||
--radius-2xl: 20px;
|
||||
--radius-full: 9999px;
|
||||
|
||||
/* ===================================================================
|
||||
GRADIENTS (using CSS variables, not hex)
|
||||
=================================================================== */
|
||||
--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%);
|
||||
|
||||
/* -----------------------------------------------------------------
|
||||
1.8 SHADOWS
|
||||
----------------------------------------------------------------- */
|
||||
|
||||
--shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
|
||||
--shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
|
||||
--shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -1px rgba(15, 23, 42, 0.04);
|
||||
--shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -2px rgba(15, 23, 42, 0.04);
|
||||
--shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.10), 0 10px 10px -5px rgba(15, 23, 42, 0.04);
|
||||
--shadow-glow-primary: 0 0 20px rgba(0, 119, 182, 0.3);
|
||||
--shadow-glow-success: 0 0 20px rgba(0, 184, 148, 0.3);
|
||||
--shadow-glow-purple: 0 0 20px rgba(124, 58, 237, 0.3);
|
||||
|
||||
/* -----------------------------------------------------------------
|
||||
1.9 GRADIENTS
|
||||
----------------------------------------------------------------- */
|
||||
|
||||
--gradient-primary: linear-gradient(135deg, #00A8E8 0%, #0077B6 50%, #005A8C 100%);
|
||||
--gradient-primary-soft: linear-gradient(135deg, #E0F4FF 0%, #B8E4FF 100%);
|
||||
--gradient-success: linear-gradient(135deg, #55EFC4 0%, #00B894 50%, #009676 100%);
|
||||
--gradient-success-soft: linear-gradient(135deg, #E0FFF7 0%, #B8F5E8 100%);
|
||||
--gradient-warning: linear-gradient(135deg, #FCD34D 0%, #F59E0B 50%, #D97706 100%);
|
||||
--gradient-warning-soft: linear-gradient(135deg, #FFF8E6 0%, #FFEDB8 100%);
|
||||
--gradient-danger: linear-gradient(135deg, #F87171 0%, #DC2626 50%, #B91C1C 100%);
|
||||
--gradient-danger-soft: linear-gradient(135deg, #FEE8E8 0%, #FECACA 100%);
|
||||
--gradient-purple: linear-gradient(135deg, #A78BFA 0%, #7C3AED 50%, #5B21B6 100%);
|
||||
--gradient-purple-soft: linear-gradient(135deg, #F3EEFF 0%, #E4D8FF 100%);
|
||||
--gradient-hero: linear-gradient(135deg, #0077B6 0%, #7C3AED 100%);
|
||||
--gradient-premium: linear-gradient(135deg, #F59E0B 0%, #F97316 50%, #DC2626 100%);
|
||||
--gradient-ocean: linear-gradient(135deg, #06B6D4 0%, #0077B6 50%, #4F46E5 100%);
|
||||
--gradient-forest: linear-gradient(135deg, #10B981 0%, #00B894 50%, #06B6D4 100%);
|
||||
--gradient-panel: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
|
||||
--gradient-sidebar: linear-gradient(180deg, #1E293B 0%, #0F172A 100%);
|
||||
|
||||
/* -----------------------------------------------------------------
|
||||
1.10 CHART COLORS (Data Visualization)
|
||||
----------------------------------------------------------------- */
|
||||
|
||||
--chart-1: #0077B6;
|
||||
--chart-2: #00B894;
|
||||
--chart-3: #7C3AED;
|
||||
--chart-4: #F59E0B;
|
||||
--chart-5: #F43F5E;
|
||||
--chart-6: #06B6D4;
|
||||
--chart-7: #10B981;
|
||||
--chart-8: #F97316;
|
||||
|
||||
/* -----------------------------------------------------------------
|
||||
1.11 BADGE PRESETS
|
||||
----------------------------------------------------------------- */
|
||||
|
||||
--badge-info-bg: var(--color-primary-subtle);
|
||||
--badge-info-text: var(--color-primary-dark);
|
||||
--badge-info-border: var(--color-primary-light);
|
||||
|
||||
--badge-success-bg: var(--color-success-subtle);
|
||||
--badge-success-text: var(--color-success-dark);
|
||||
--badge-success-border: var(--color-success-light);
|
||||
|
||||
--badge-warning-bg: var(--color-warning-subtle);
|
||||
--badge-warning-text: var(--color-warning-dark);
|
||||
--badge-warning-border: var(--color-warning-light);
|
||||
|
||||
--badge-danger-bg: var(--color-danger-subtle);
|
||||
--badge-danger-text: var(--color-danger-dark);
|
||||
--badge-danger-border: var(--color-danger-light);
|
||||
|
||||
--badge-purple-bg: var(--color-purple-subtle);
|
||||
--badge-purple-text: var(--color-purple-dark);
|
||||
--badge-purple-border: var(--color-purple-light);
|
||||
|
||||
--badge-neutral-bg: #F1F5F9;
|
||||
--badge-neutral-text: #475569;
|
||||
--badge-neutral-border: #CBD5E1;
|
||||
/* ===================================================================
|
||||
SHADOWS (using rgba with consistent opacity)
|
||||
=================================================================== */
|
||||
--shadow-xs: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
|
||||
--shadow-sm: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
|
||||
--shadow-md: 0px 4px 8px -2px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.06);
|
||||
--shadow-lg: 0px 12px 16px -4px rgba(0, 0, 0, 0.08), 0px 4px 6px -2px rgba(0, 0, 0, 0.03);
|
||||
--shadow-xl: 0px 20px 24px -4px rgba(0, 0, 0, 0.08), 0px 8px 8px -4px rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
|
||||
/* ===================================================================
|
||||
SECTION 2: DARK MODE OVERRIDES
|
||||
DARK MODE OVERRIDES (all derived from primaries)
|
||||
=================================================================== */
|
||||
|
||||
.dark {
|
||||
/* Backgrounds */
|
||||
--color-surface: #0F172A;
|
||||
--color-surface-alt: #1E293B;
|
||||
--color-panel: #1E293B;
|
||||
--color-panel-alt: #334155;
|
||||
--color-panel-hover: #334155;
|
||||
--color-elevated: #334155;
|
||||
--color-overlay: rgba(0, 0, 0, 0.7);
|
||||
/* Backgrounds - derived from gray-base */
|
||||
--color-surface: color-mix(in srgb, var(--color-gray-base) 20%, black);
|
||||
--color-panel: color-mix(in srgb, var(--color-gray-base) 30%, black);
|
||||
--color-panel-alt: color-mix(in srgb, var(--color-gray-base) 15%, black);
|
||||
|
||||
/* Text */
|
||||
--color-text: #F1F5F9;
|
||||
--color-text-secondary: #CBD5E1;
|
||||
--color-text-tertiary: #64748B;
|
||||
--color-text-link: #00A8E8;
|
||||
--color-text-link-hover: #38BDF8;
|
||||
/* Text - derived from gray-base */
|
||||
--color-text: color-mix(in srgb, var(--color-gray-base) 10%, white);
|
||||
--color-text-dim: color-mix(in srgb, var(--color-gray-base) 40%, white);
|
||||
--color-stroke: color-mix(in srgb, var(--color-gray-base) 50%, black);
|
||||
|
||||
/* Borders */
|
||||
--color-stroke: #334155;
|
||||
--color-stroke-light: #1E293B;
|
||||
--color-stroke-dark: #475569;
|
||||
--color-stroke-focus: #00A8E8;
|
||||
|
||||
/* Interactive States */
|
||||
--color-hover: rgba(0, 168, 232, 0.12);
|
||||
--color-active: rgba(0, 168, 232, 0.18);
|
||||
--color-selected: rgba(0, 168, 232, 0.24);
|
||||
--color-disabled: #64748B;
|
||||
--color-disabled-bg: #1E293B;
|
||||
|
||||
/* Primary Colors (brighter for dark mode) */
|
||||
--color-primary: #00A8E8;
|
||||
--color-primary-dark: #0077B6;
|
||||
--color-primary-light: #38BDF8;
|
||||
--color-primary-subtle: rgba(0, 168, 232, 0.15);
|
||||
|
||||
--color-success: #34D399;
|
||||
--color-success-dark: #10B981;
|
||||
--color-success-light: #6EE7B7;
|
||||
--color-success-subtle: rgba(52, 211, 153, 0.15);
|
||||
|
||||
--color-warning: #FBBF24;
|
||||
--color-warning-dark: #F59E0B;
|
||||
--color-warning-light: #FDE68A;
|
||||
--color-warning-subtle: rgba(251, 191, 36, 0.15);
|
||||
|
||||
--color-danger: #F87171;
|
||||
--color-danger-dark: #EF4444;
|
||||
--color-danger-light: #FCA5A5;
|
||||
--color-danger-subtle: rgba(248, 113, 113, 0.15);
|
||||
|
||||
--color-purple: #A78BFA;
|
||||
--color-purple-dark: #8B5CF6;
|
||||
--color-purple-light: #C4B5FD;
|
||||
--color-purple-subtle: rgba(167, 139, 250, 0.15);
|
||||
|
||||
/* Accents (brighter) */
|
||||
--color-coral: #FCA5A5;
|
||||
--color-coral-dark: #F87171;
|
||||
--color-coral-subtle: rgba(252, 165, 165, 0.15);
|
||||
|
||||
--color-cyan: #22D3EE;
|
||||
--color-cyan-dark: #06B6D4;
|
||||
--color-cyan-subtle: rgba(34, 211, 238, 0.15);
|
||||
|
||||
--color-indigo: #818CF8;
|
||||
--color-indigo-dark: #6366F1;
|
||||
--color-indigo-subtle: rgba(129, 140, 248, 0.15);
|
||||
|
||||
/* Gradients */
|
||||
--gradient-panel: linear-gradient(180deg, #1E293B 0%, #0F172A 100%);
|
||||
--gradient-sidebar: linear-gradient(180deg, #0F172A 0%, #020617 100%);
|
||||
--gradient-primary-soft: linear-gradient(135deg, rgba(0, 168, 232, 0.2) 0%, rgba(0, 119, 182, 0.1) 100%);
|
||||
|
||||
/* Shadows */
|
||||
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
|
||||
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
|
||||
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
|
||||
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
|
||||
--shadow-glow-primary: 0 0 30px rgba(0, 168, 232, 0.4);
|
||||
--shadow-glow-success: 0 0 30px rgba(52, 211, 153, 0.4);
|
||||
--shadow-glow-purple: 0 0 30px rgba(167, 139, 250, 0.4);
|
||||
|
||||
/* Chart Colors */
|
||||
--chart-1: #38BDF8;
|
||||
--chart-2: #34D399;
|
||||
--chart-3: #A78BFA;
|
||||
--chart-4: #FBBF24;
|
||||
--chart-5: #FB7185;
|
||||
--chart-6: #22D3EE;
|
||||
--chart-7: #6EE7B7;
|
||||
--chart-8: #FB923C;
|
||||
|
||||
/* Badges */
|
||||
--badge-info-bg: rgba(0, 168, 232, 0.15);
|
||||
--badge-info-text: #38BDF8;
|
||||
--badge-info-border: rgba(0, 168, 232, 0.3);
|
||||
|
||||
--badge-success-bg: rgba(52, 211, 153, 0.15);
|
||||
--badge-success-text: #34D399;
|
||||
--badge-success-border: rgba(52, 211, 153, 0.3);
|
||||
|
||||
--badge-warning-bg: rgba(251, 191, 36, 0.15);
|
||||
--badge-warning-text: #FBBF24;
|
||||
--badge-warning-border: rgba(251, 191, 36, 0.3);
|
||||
|
||||
--badge-danger-bg: rgba(248, 113, 113, 0.15);
|
||||
--badge-danger-text: #F87171;
|
||||
--badge-danger-border: rgba(248, 113, 113, 0.3);
|
||||
|
||||
--badge-purple-bg: rgba(167, 139, 250, 0.15);
|
||||
--badge-purple-text: #A78BFA;
|
||||
--badge-purple-border: rgba(167, 139, 250, 0.3);
|
||||
|
||||
--badge-neutral-bg: #334155;
|
||||
--badge-neutral-text: #CBD5E1;
|
||||
--badge-neutral-border: #475569;
|
||||
/* Shadows for dark mode */
|
||||
--shadow-xs: 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
|
||||
--shadow-sm: 0px 1px 3px 0px rgba(0, 0, 0, 0.4), 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
|
||||
--shadow-md: 0px 4px 8px -2px rgba(0, 0, 0, 0.4), 0px 2px 4px -2px rgba(0, 0, 0, 0.2);
|
||||
--shadow-lg: 0px 12px 16px -4px rgba(0, 0, 0, 0.4), 0px 4px 6px -2px rgba(0, 0, 0, 0.2);
|
||||
--shadow-xl: 0px 20px 24px -4px rgba(0, 0, 0, 0.5), 0px 8px 8px -4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ===================================================================
|
||||
SECTION 3: TAILWIND CONFIGURATION
|
||||
=================================================================== */
|
||||
@@ -421,7 +200,9 @@
|
||||
--breakpoint-2xl: 1536px;
|
||||
--breakpoint-3xl: 2000px;
|
||||
|
||||
/* Typography */
|
||||
/* -----------------------------------------------------------------
|
||||
TYPOGRAPHY
|
||||
----------------------------------------------------------------- */
|
||||
--text-title-2xl: 72px;
|
||||
--text-title-2xl--line-height: 90px;
|
||||
--text-title-xl: 60px;
|
||||
@@ -439,13 +220,17 @@
|
||||
--text-theme-xs: 12px;
|
||||
--text-theme-xs--line-height: 18px;
|
||||
|
||||
/* Base Colors */
|
||||
/* -----------------------------------------------------------------
|
||||
BASE COLORS
|
||||
----------------------------------------------------------------- */
|
||||
--color-current: currentColor;
|
||||
--color-transparent: transparent;
|
||||
--color-white: #ffffff;
|
||||
--color-black: #101828;
|
||||
--color-black: color-mix(in srgb, var(--color-gray-base) 15%, black);
|
||||
|
||||
/* Brand Color Scale (Tailwind integration) */
|
||||
/* -----------------------------------------------------------------
|
||||
BRAND COLOR SCALE (ALL derived from --color-primary)
|
||||
----------------------------------------------------------------- */
|
||||
--color-brand-25: color-mix(in srgb, var(--color-primary) 3%, white);
|
||||
--color-brand-50: color-mix(in srgb, var(--color-primary) 8%, white);
|
||||
--color-brand-100: color-mix(in srgb, var(--color-primary) 15%, white);
|
||||
@@ -453,28 +238,32 @@
|
||||
--color-brand-300: color-mix(in srgb, var(--color-primary) 40%, white);
|
||||
--color-brand-400: color-mix(in srgb, var(--color-primary) 60%, white);
|
||||
--color-brand-500: var(--color-primary);
|
||||
--color-brand-600: var(--color-primary-dark);
|
||||
--color-brand-700: color-mix(in srgb, var(--color-primary-dark) 85%, black);
|
||||
--color-brand-800: color-mix(in srgb, var(--color-primary-dark) 70%, black);
|
||||
--color-brand-900: color-mix(in srgb, var(--color-primary-dark) 55%, black);
|
||||
--color-brand-950: color-mix(in srgb, var(--color-primary-dark) 35%, black);
|
||||
--color-brand-600: color-mix(in srgb, var(--color-primary) 85%, black);
|
||||
--color-brand-700: color-mix(in srgb, var(--color-primary) 70%, black);
|
||||
--color-brand-800: color-mix(in srgb, var(--color-primary) 55%, black);
|
||||
--color-brand-900: color-mix(in srgb, var(--color-primary) 40%, black);
|
||||
--color-brand-950: color-mix(in srgb, var(--color-primary) 25%, black);
|
||||
|
||||
/* Gray Scale */
|
||||
--color-gray-25: #fcfcfd;
|
||||
--color-gray-50: #f9fafb;
|
||||
--color-gray-100: #f2f4f7;
|
||||
--color-gray-200: #e4e7ec;
|
||||
--color-gray-300: #d0d5dd;
|
||||
--color-gray-400: #98a2b3;
|
||||
--color-gray-500: #667085;
|
||||
--color-gray-600: #475467;
|
||||
--color-gray-700: #344054;
|
||||
--color-gray-800: #1d2939;
|
||||
--color-gray-900: #101828;
|
||||
--color-gray-950: #0c111d;
|
||||
--color-gray-dark: #1a2231;
|
||||
/* -----------------------------------------------------------------
|
||||
GRAY SCALE (ALL derived from --color-gray-base)
|
||||
----------------------------------------------------------------- */
|
||||
--color-gray-25: color-mix(in srgb, var(--color-gray-base) 2%, white);
|
||||
--color-gray-50: color-mix(in srgb, var(--color-gray-base) 4%, white);
|
||||
--color-gray-100: color-mix(in srgb, var(--color-gray-base) 8%, white);
|
||||
--color-gray-200: color-mix(in srgb, var(--color-gray-base) 15%, white);
|
||||
--color-gray-300: color-mix(in srgb, var(--color-gray-base) 25%, white);
|
||||
--color-gray-400: color-mix(in srgb, var(--color-gray-base) 50%, white);
|
||||
--color-gray-500: var(--color-gray-base);
|
||||
--color-gray-600: color-mix(in srgb, var(--color-gray-base) 85%, black);
|
||||
--color-gray-700: color-mix(in srgb, var(--color-gray-base) 70%, black);
|
||||
--color-gray-800: color-mix(in srgb, var(--color-gray-base) 55%, black);
|
||||
--color-gray-900: color-mix(in srgb, var(--color-gray-base) 40%, black);
|
||||
--color-gray-950: color-mix(in srgb, var(--color-gray-base) 25%, black);
|
||||
--color-gray-dark: color-mix(in srgb, var(--color-gray-base) 30%, black);
|
||||
|
||||
/* Success Scale */
|
||||
/* -----------------------------------------------------------------
|
||||
SUCCESS SCALE (ALL derived from --color-success)
|
||||
----------------------------------------------------------------- */
|
||||
--color-success-25: color-mix(in srgb, var(--color-success) 2%, white);
|
||||
--color-success-50: color-mix(in srgb, var(--color-success) 6%, white);
|
||||
--color-success-100: color-mix(in srgb, var(--color-success) 15%, white);
|
||||
@@ -482,13 +271,15 @@
|
||||
--color-success-300: color-mix(in srgb, var(--color-success) 50%, white);
|
||||
--color-success-400: color-mix(in srgb, var(--color-success) 75%, white);
|
||||
--color-success-500: var(--color-success);
|
||||
--color-success-600: var(--color-success-dark);
|
||||
--color-success-700: color-mix(in srgb, var(--color-success-dark) 85%, black);
|
||||
--color-success-800: color-mix(in srgb, var(--color-success-dark) 65%, black);
|
||||
--color-success-900: color-mix(in srgb, var(--color-success-dark) 50%, black);
|
||||
--color-success-950: color-mix(in srgb, var(--color-success-dark) 35%, black);
|
||||
--color-success-600: color-mix(in srgb, var(--color-success) 85%, black);
|
||||
--color-success-700: color-mix(in srgb, var(--color-success) 70%, black);
|
||||
--color-success-800: color-mix(in srgb, var(--color-success) 55%, black);
|
||||
--color-success-900: color-mix(in srgb, var(--color-success) 40%, black);
|
||||
--color-success-950: color-mix(in srgb, var(--color-success) 25%, black);
|
||||
|
||||
/* Error Scale */
|
||||
/* -----------------------------------------------------------------
|
||||
ERROR SCALE (ALL derived from --color-danger)
|
||||
----------------------------------------------------------------- */
|
||||
--color-error-25: color-mix(in srgb, var(--color-danger) 2%, white);
|
||||
--color-error-50: color-mix(in srgb, var(--color-danger) 5%, white);
|
||||
--color-error-100: color-mix(in srgb, var(--color-danger) 10%, white);
|
||||
@@ -496,13 +287,15 @@
|
||||
--color-error-300: color-mix(in srgb, var(--color-danger) 40%, white);
|
||||
--color-error-400: color-mix(in srgb, var(--color-danger) 65%, white);
|
||||
--color-error-500: var(--color-danger);
|
||||
--color-error-600: var(--color-danger-dark);
|
||||
--color-error-700: color-mix(in srgb, var(--color-danger-dark) 80%, black);
|
||||
--color-error-800: color-mix(in srgb, var(--color-danger-dark) 65%, black);
|
||||
--color-error-900: color-mix(in srgb, var(--color-danger-dark) 50%, black);
|
||||
--color-error-950: color-mix(in srgb, var(--color-danger-dark) 30%, black);
|
||||
--color-error-600: color-mix(in srgb, var(--color-danger) 85%, black);
|
||||
--color-error-700: color-mix(in srgb, var(--color-danger) 70%, black);
|
||||
--color-error-800: color-mix(in srgb, var(--color-danger) 55%, black);
|
||||
--color-error-900: color-mix(in srgb, var(--color-danger) 40%, black);
|
||||
--color-error-950: color-mix(in srgb, var(--color-danger) 25%, black);
|
||||
|
||||
/* Warning Scale */
|
||||
/* -----------------------------------------------------------------
|
||||
WARNING SCALE (ALL derived from --color-warning)
|
||||
----------------------------------------------------------------- */
|
||||
--color-warning-25: color-mix(in srgb, var(--color-warning) 2%, white);
|
||||
--color-warning-50: color-mix(in srgb, var(--color-warning) 4%, white);
|
||||
--color-warning-100: color-mix(in srgb, var(--color-warning) 10%, white);
|
||||
@@ -510,13 +303,15 @@
|
||||
--color-warning-300: color-mix(in srgb, var(--color-warning) 40%, white);
|
||||
--color-warning-400: color-mix(in srgb, var(--color-warning) 65%, white);
|
||||
--color-warning-500: var(--color-warning);
|
||||
--color-warning-600: var(--color-warning-dark);
|
||||
--color-warning-700: color-mix(in srgb, var(--color-warning-dark) 80%, black);
|
||||
--color-warning-800: color-mix(in srgb, var(--color-warning-dark) 65%, black);
|
||||
--color-warning-900: color-mix(in srgb, var(--color-warning-dark) 50%, black);
|
||||
--color-warning-950: color-mix(in srgb, var(--color-warning-dark) 30%, black);
|
||||
--color-warning-600: color-mix(in srgb, var(--color-warning) 85%, black);
|
||||
--color-warning-700: color-mix(in srgb, var(--color-warning) 70%, black);
|
||||
--color-warning-800: color-mix(in srgb, var(--color-warning) 55%, black);
|
||||
--color-warning-900: color-mix(in srgb, var(--color-warning) 40%, black);
|
||||
--color-warning-950: color-mix(in srgb, var(--color-warning) 25%, black);
|
||||
|
||||
/* Purple Scale */
|
||||
/* -----------------------------------------------------------------
|
||||
PURPLE SCALE (ALL derived from --color-purple)
|
||||
----------------------------------------------------------------- */
|
||||
--color-purple-25: color-mix(in srgb, var(--color-purple) 2%, white);
|
||||
--color-purple-50: color-mix(in srgb, var(--color-purple) 8%, white);
|
||||
--color-purple-100: color-mix(in srgb, var(--color-purple) 15%, white);
|
||||
@@ -524,32 +319,38 @@
|
||||
--color-purple-300: color-mix(in srgb, var(--color-purple) 40%, white);
|
||||
--color-purple-400: color-mix(in srgb, var(--color-purple) 60%, white);
|
||||
--color-purple-500: var(--color-purple);
|
||||
--color-purple-600: var(--color-purple-dark);
|
||||
--color-purple-700: color-mix(in srgb, var(--color-purple-dark) 85%, black);
|
||||
--color-purple-800: color-mix(in srgb, var(--color-purple-dark) 70%, black);
|
||||
--color-purple-900: color-mix(in srgb, var(--color-purple-dark) 55%, black);
|
||||
--color-purple-950: color-mix(in srgb, var(--color-purple-dark) 35%, black);
|
||||
--color-purple-600: color-mix(in srgb, var(--color-purple) 85%, black);
|
||||
--color-purple-700: color-mix(in srgb, var(--color-purple) 70%, black);
|
||||
--color-purple-800: color-mix(in srgb, var(--color-purple) 55%, black);
|
||||
--color-purple-900: color-mix(in srgb, var(--color-purple) 40%, black);
|
||||
--color-purple-950: color-mix(in srgb, var(--color-purple) 25%, black);
|
||||
|
||||
/* Blue-Light Scale (Info) */
|
||||
--color-blue-light-25: #f0faff;
|
||||
--color-blue-light-50: #e0f4ff;
|
||||
--color-blue-light-100: #bae6fd;
|
||||
--color-blue-light-200: #7dd3fc;
|
||||
--color-blue-light-300: #38bdf8;
|
||||
--color-blue-light-400: #0ea5e9;
|
||||
--color-blue-light-500: #0284c7;
|
||||
--color-blue-light-600: #0369a1;
|
||||
--color-blue-light-700: #075985;
|
||||
/* -----------------------------------------------------------------
|
||||
INFO/BLUE-LIGHT SCALE (derived from --color-primary for consistency)
|
||||
----------------------------------------------------------------- */
|
||||
--color-blue-light-25: color-mix(in srgb, var(--color-primary) 2%, white);
|
||||
--color-blue-light-50: color-mix(in srgb, var(--color-primary) 5%, white);
|
||||
--color-blue-light-100: color-mix(in srgb, var(--color-primary) 12%, white);
|
||||
--color-blue-light-200: color-mix(in srgb, var(--color-primary) 25%, white);
|
||||
--color-blue-light-300: color-mix(in srgb, var(--color-primary) 45%, white);
|
||||
--color-blue-light-400: color-mix(in srgb, var(--color-primary) 70%, white);
|
||||
--color-blue-light-500: color-mix(in srgb, var(--color-primary) 90%, white);
|
||||
--color-blue-light-600: var(--color-primary);
|
||||
--color-blue-light-700: color-mix(in srgb, var(--color-primary) 85%, black);
|
||||
|
||||
/* Shadows */
|
||||
--shadow-theme-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
|
||||
--shadow-theme-sm: 0px 1px 3px 0px rgba(16, 24, 40, 0.1), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);
|
||||
--shadow-theme-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
|
||||
--shadow-theme-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
|
||||
--shadow-theme-xl: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);
|
||||
/* -----------------------------------------------------------------
|
||||
SHADOWS (Tailwind integration)
|
||||
----------------------------------------------------------------- */
|
||||
--shadow-theme-xs: var(--shadow-xs);
|
||||
--shadow-theme-sm: var(--shadow-sm);
|
||||
--shadow-theme-md: var(--shadow-md);
|
||||
--shadow-theme-lg: var(--shadow-lg);
|
||||
--shadow-theme-xl: var(--shadow-xl);
|
||||
--drop-shadow-4xl: 0 35px 35px rgba(0, 0, 0, 0.25), 0 45px 65px rgba(0, 0, 0, 0.15);
|
||||
|
||||
/* Z-Index */
|
||||
/* -----------------------------------------------------------------
|
||||
Z-INDEX
|
||||
----------------------------------------------------------------- */
|
||||
--z-index-1: 1;
|
||||
--z-index-9: 9;
|
||||
--z-index-99: 99;
|
||||
@@ -682,31 +483,33 @@
|
||||
|
||||
/* Compact Table Headers */
|
||||
.igny8-table-compact th {
|
||||
padding: 12px 16px !important;
|
||||
font-size: 14px !important;
|
||||
padding: 8px 12px !important;
|
||||
font-size: 13px !important;
|
||||
font-weight: 600 !important;
|
||||
color: var(--color-gray-600) !important;
|
||||
color: var(--color-text-dim) !important;
|
||||
text-align: left !important;
|
||||
background-color: var(--color-gray-50) !important;
|
||||
border-bottom: 2px solid var(--color-gray-200) !important;
|
||||
background-color: var(--color-surface) !important;
|
||||
border-bottom: 2px solid var(--color-stroke) !important;
|
||||
text-transform: capitalize;
|
||||
letter-spacing: 0.3px;
|
||||
line-height: 1.3 !important;
|
||||
}
|
||||
|
||||
.dark .igny8-table-compact th {
|
||||
color: var(--color-gray-200) !important;
|
||||
background-color: rgba(15, 23, 42, 0.5) !important;
|
||||
border-bottom-color: rgba(255, 255, 255, 0.1) !important;
|
||||
color: var(--color-text-dim) !important;
|
||||
background-color: var(--color-panel-alt) !important;
|
||||
border-bottom-color: var(--color-stroke) !important;
|
||||
}
|
||||
|
||||
.igny8-table-compact td {
|
||||
padding: 8px 12px !important;
|
||||
font-size: 14px !important;
|
||||
border-bottom: 1px solid var(--color-gray-200) !important;
|
||||
padding: 6px 10px !important;
|
||||
font-size: 13px !important;
|
||||
line-height: 1.3 !important;
|
||||
border-bottom: 1px solid var(--color-stroke) !important;
|
||||
}
|
||||
|
||||
.dark .igny8-table-compact td {
|
||||
border-bottom-color: rgba(255, 255, 255, 0.05) !important;
|
||||
border-bottom-color: var(--color-stroke) !important;
|
||||
}
|
||||
|
||||
.igny8-table-compact th.text-center,
|
||||
@@ -786,13 +589,13 @@
|
||||
gap: 6px;
|
||||
padding: 6px 12px;
|
||||
background: transparent;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 6px 3px rgba(0, 0, 0, 0.08);
|
||||
border-radius: var(--radius-sm);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.dark .igny8-header-metrics {
|
||||
background: transparent;
|
||||
box-shadow: 0 2px 6px 3px rgba(0, 0, 0, 0.08);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.igny8-header-metric {
|
||||
@@ -804,12 +607,12 @@
|
||||
.igny8-header-metric-separator {
|
||||
width: 1px;
|
||||
height: 16px;
|
||||
background: rgb(203 213 225);
|
||||
background: var(--color-stroke);
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.dark .igny8-header-metric-separator {
|
||||
background: rgb(148 163 184);
|
||||
background: var(--color-stroke);
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
@@ -818,17 +621,17 @@
|
||||
font-weight: 500;
|
||||
text-transform: capitalize;
|
||||
letter-spacing: 0.3px;
|
||||
color: rgb(100 116 139);
|
||||
color: var(--color-text-dim);
|
||||
}
|
||||
|
||||
.dark .igny8-header-metric-label {
|
||||
color: rgb(148 163 184);
|
||||
color: var(--color-text-dim);
|
||||
}
|
||||
|
||||
.igny8-header-metric-value {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: rgb(30 41 59);
|
||||
color: var(--color-text);
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
@@ -837,7 +640,7 @@
|
||||
}
|
||||
|
||||
.dark .igny8-header-metric-value {
|
||||
color: white;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.igny8-header-metric-accent {
|
||||
|
||||
Reference in New Issue
Block a user