108 lines
3.1 KiB
CSS
108 lines
3.1 KiB
CSS
/* ============================================================
|
|
Genex Design System - CSS Design Tokens
|
|
|
|
紫色系科技风，干净清爽型
|
|
Primary: #6C5CE7 (创新/科技紫)
|
|
Target: React + Next.js Web管理前端
|
|
============================================================ */
|
|
|
|
:root {
|
|
/* ---- Primary Purple ---- */
|
|
--color-primary: #6C5CE7;
|
|
--color-primary-light: #9B8FFF;
|
|
--color-primary-dark: #4834D4;
|
|
--color-primary-surface: #F3F1FF;
|
|
--color-primary-container: #E8E5FF;
|
|
|
|
/* ---- Neutral ---- */
|
|
--color-gray-50: #F8F9FC;
|
|
--color-gray-100: #F1F3F8;
|
|
--color-gray-200: #E4E7F0;
|
|
--color-gray-300: #CDD2DE;
|
|
--color-gray-400: #A0A8BE;
|
|
--color-gray-500: #7A839E;
|
|
--color-gray-600: #5C6478;
|
|
--color-gray-700: #3D4459;
|
|
--color-gray-800: #262B3A;
|
|
--color-gray-900: #141723;
|
|
|
|
/* ---- Semantic ---- */
|
|
--color-success: #00C48C;
|
|
--color-success-light: #E6FAF3;
|
|
--color-warning: #FFAB2E;
|
|
--color-warning-light: #FFF7E6;
|
|
--color-error: #FF4757;
|
|
--color-error-light: #FFF0F0;
|
|
--color-info: #3B82F6;
|
|
--color-info-light: #EFF6FF;
|
|
|
|
/* ---- Background & Surface ---- */
|
|
--color-bg: #F8F9FC;
|
|
--color-surface: #FFFFFF;
|
|
--color-surface-variant: #F1F3F8;
|
|
|
|
/* ---- Text ---- */
|
|
--color-text-primary: #141723;
|
|
--color-text-secondary: #5C6478;
|
|
--color-text-tertiary: #A0A8BE;
|
|
--color-text-disabled: #CDD2DE;
|
|
--color-text-on-primary: #FFFFFF;
|
|
--color-text-link: #6C5CE7;
|
|
|
|
/* ---- Border ---- */
|
|
--color-border: #E4E7F0;
|
|
--color-border-light: #F1F3F8;
|
|
--color-border-focus: #6C5CE7;
|
|
|
|
/* ---- Credit Rating ---- */
|
|
--color-credit-aaa: #00C48C;
|
|
--color-credit-aa: #3B82F6;
|
|
--color-credit-a: #6C5CE7;
|
|
--color-credit-bbb: #FFAB2E;
|
|
--color-credit-bb: #FF6B6B;
|
|
|
|
/* ---- Typography ---- */
|
|
--font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
--font-family-mono: 'JetBrains Mono', 'Fira Code', monospace;
|
|
|
|
--text-display: 700 32px/1.2 var(--font-family);
|
|
--text-h1: 700 24px/1.3 var(--font-family);
|
|
--text-h2: 600 20px/1.35 var(--font-family);
|
|
--text-h3: 600 16px/1.4 var(--font-family);
|
|
--text-body-lg: 400 16px/1.5 var(--font-family);
|
|
--text-body: 400 14px/1.5 var(--font-family);
|
|
--text-body-sm: 400 12px/1.5 var(--font-family);
|
|
--text-label-lg: 600 16px/1.4 var(--font-family);
|
|
--text-label: 500 14px/1.4 var(--font-family);
|
|
--text-label-sm: 500 12px/1.4 var(--font-family);
|
|
--text-caption: 400 11px/1.4 var(--font-family);
|
|
|
|
/* ---- Spacing ---- */
|
|
--space-xs: 4px;
|
|
--space-sm: 8px;
|
|
--space-md: 12px;
|
|
--space-lg: 16px;
|
|
--space-xl: 20px;
|
|
--space-2xl: 24px;
|
|
--space-3xl: 32px;
|
|
--space-4xl: 40px;
|
|
|
|
/* ---- Border Radius ---- */
|
|
--radius-sm: 8px;
|
|
--radius-md: 12px;
|
|
--radius-lg: 16px;
|
|
--radius-xl: 20px;
|
|
--radius-full: 999px;
|
|
|
|
/* ---- Shadow ---- */
|
|
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
|
|
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
|
|
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);
|
|
--shadow-primary: 0 4px 16px rgba(108, 92, 231, 0.2);
|
|
|
|
/* ---- Sidebar ---- */
|
|
--sidebar-width: 260px;
|
|
--sidebar-collapsed-width: 72px;
|
|
--header-height: 64px;
|
|
}
|