250 lines
7.0 KiB
CSS
250 lines
7.0 KiB
CSS
/* CSS Variables - Design Tokens */
|
|
|
|
:root {
|
|
/* ========== Typography ========== */
|
|
--font-family:
|
|
'Inter', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', -apple-system,
|
|
BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
|
|
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
|
--font-family-number:
|
|
'DIN Alternate', 'Bahnschrift', 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
|
|
--font-family-code:
|
|
'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
|
|
|
|
/* Font Sizes */
|
|
--font-size-xs: 12px;
|
|
--font-size-sm: 14px;
|
|
--font-size-base: 16px;
|
|
--font-size-lg: 18px;
|
|
--font-size-xl: 20px;
|
|
--font-size-2xl: 24px;
|
|
--font-size-3xl: 30px;
|
|
--font-size-4xl: 38px;
|
|
|
|
/* Line Heights */
|
|
--line-height-base: 1.5715;
|
|
--line-height-tight: 1.3;
|
|
--line-height-relaxed: 1.8;
|
|
|
|
/* Font Weights */
|
|
--font-weight-normal: 400;
|
|
--font-weight-medium: 500;
|
|
--font-weight-semibold: 600;
|
|
--font-weight-bold: 700;
|
|
|
|
/* ========== Spacing ========== */
|
|
--spacing-xs: 4px;
|
|
--spacing-sm: 8px;
|
|
--spacing-md: 16px;
|
|
--spacing-lg: 24px;
|
|
--spacing-xl: 32px;
|
|
--spacing-2xl: 48px;
|
|
--spacing-3xl: 64px;
|
|
|
|
/* ========== Border Radius ========== */
|
|
--radius-xs: 2px;
|
|
--radius-sm: 4px;
|
|
--radius-base: 8px;
|
|
--radius-lg: 14px;
|
|
--radius-xl: 20px;
|
|
--radius-full: 9999px;
|
|
|
|
/* ========== Animation Duration ========== */
|
|
--duration-fast: 0.1s;
|
|
--duration-base: 0.2s;
|
|
--duration-slow: 0.3s;
|
|
--duration-slower: 0.5s;
|
|
|
|
/* ========== Easing Functions ========== */
|
|
--ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
|
--ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
--ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
--ease-out-back: cubic-bezier(0.12, 0.4, 0.29, 1.46);
|
|
--ease-in-back: cubic-bezier(0.71, -0.46, 0.88, 0.6);
|
|
--ease-in-out-back: cubic-bezier(0.71, -0.46, 0.29, 1.46);
|
|
|
|
/* ========== Shadows (Diffused, Professional) ========== */
|
|
--shadow-1: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.04);
|
|
|
|
--shadow-2: 0 6px 20px rgba(15, 23, 42, 0.06);
|
|
|
|
--shadow-3: 0 12px 36px rgba(15, 23, 42, 0.08);
|
|
|
|
--shadow-card: 0 6px 24px rgba(15, 23, 42, 0.06);
|
|
--shadow-card-hover: 0 10px 32px rgba(15, 23, 42, 0.12);
|
|
--shadow-drawer: 0 8px 40px 0 rgba(0, 0, 0, 0.12);
|
|
--shadow-modal: 0 12px 48px 0 rgba(0, 0, 0, 0.15);
|
|
|
|
/* ========== Functional Colors ========== */
|
|
--color-success: #52c41a;
|
|
--color-success-bg: #f6ffed;
|
|
--color-success-border: #b7eb8f;
|
|
|
|
--color-warning: #faad14;
|
|
--color-warning-bg: #fffbe6;
|
|
--color-warning-border: #ffe58f;
|
|
|
|
--color-error: #ff4d4f;
|
|
--color-error-bg: #fff2f0;
|
|
--color-error-border: #ffccc7;
|
|
|
|
--color-info: #1890ff;
|
|
--color-info-bg: #e6f7ff;
|
|
--color-info-border: #91d5ff;
|
|
|
|
/* ========== Neutral Colors (Light Mode) ========== */
|
|
--color-text-primary: rgba(0, 0, 0, 0.85);
|
|
--color-text-secondary: rgba(0, 0, 0, 0.65);
|
|
--color-text-tertiary: rgba(0, 0, 0, 0.45);
|
|
--color-text-quaternary: rgba(0, 0, 0, 0.25);
|
|
|
|
--color-border: #d9d9d9;
|
|
--color-border-secondary: #f0f0f0;
|
|
|
|
--color-bg-container: #ffffff;
|
|
--color-bg-layout: #f5f7fa;
|
|
--color-bg-mask: rgba(0, 0, 0, 0.45);
|
|
|
|
/* Fill colors */
|
|
--color-fill-quaternary: #fafafa;
|
|
|
|
/* ========== Z-Index ========== */
|
|
--z-index-dropdown: 1050;
|
|
--z-index-modal: 1060;
|
|
--z-index-drawer: 1070;
|
|
--z-index-notification: 1080;
|
|
|
|
/* ========== Primary Colors (Default: Blue) ========== */
|
|
/* Provide defaults so styles work even before JS sets data-primary-color */
|
|
--color-primary-1: #e6f7ff;
|
|
--color-primary-2: #bae7ff;
|
|
--color-primary-3: #91d5ff;
|
|
--color-primary-4: #69c0ff;
|
|
--color-primary-5: #40a9ff;
|
|
--color-primary-6: #1890ff;
|
|
--color-primary-7: #096dd9;
|
|
--color-primary-8: #0050b3;
|
|
--color-primary-9: #003a8c;
|
|
--color-primary-10: #002766;
|
|
--color-primary: var(--color-primary-6);
|
|
}
|
|
|
|
/* ========== Primary Color Themes ========== */
|
|
|
|
/* Blue Theme (Default) */
|
|
:root[data-primary-color='blue'] {
|
|
--color-primary-1: #e6f7ff;
|
|
--color-primary-2: #bae7ff;
|
|
--color-primary-3: #91d5ff;
|
|
--color-primary-4: #69c0ff;
|
|
--color-primary-5: #40a9ff;
|
|
--color-primary-6: #1890ff;
|
|
--color-primary-7: #096dd9;
|
|
--color-primary-8: #0050b3;
|
|
--color-primary-9: #003a8c;
|
|
--color-primary-10: #002766;
|
|
--color-primary: var(--color-primary-6);
|
|
}
|
|
|
|
/* Green Theme */
|
|
:root[data-primary-color='green'] {
|
|
--color-primary-1: #f6ffed;
|
|
--color-primary-2: #d9f7be;
|
|
--color-primary-3: #b7eb8f;
|
|
--color-primary-4: #95de64;
|
|
--color-primary-5: #73d13d;
|
|
--color-primary-6: #52c41a;
|
|
--color-primary-7: #389e0d;
|
|
--color-primary-8: #237804;
|
|
--color-primary-9: #135200;
|
|
--color-primary-10: #092b00;
|
|
--color-primary: var(--color-primary-6);
|
|
}
|
|
|
|
/* Purple Theme */
|
|
:root[data-primary-color='purple'] {
|
|
--color-primary-1: #f9f0ff;
|
|
--color-primary-2: #efdbff;
|
|
--color-primary-3: #d3adf7;
|
|
--color-primary-4: #b37feb;
|
|
--color-primary-5: #9254de;
|
|
--color-primary-6: #722ed1;
|
|
--color-primary-7: #531dab;
|
|
--color-primary-8: #391085;
|
|
--color-primary-9: #22075e;
|
|
--color-primary-10: #120338;
|
|
--color-primary: var(--color-primary-6);
|
|
}
|
|
|
|
/* Red Theme */
|
|
:root[data-primary-color='red'] {
|
|
--color-primary-1: #fff1f0;
|
|
--color-primary-2: #ffccc7;
|
|
--color-primary-3: #ffa39e;
|
|
--color-primary-4: #ff7875;
|
|
--color-primary-5: #ff4d4f;
|
|
--color-primary-6: #f5222d;
|
|
--color-primary-7: #cf1322;
|
|
--color-primary-8: #a8071a;
|
|
--color-primary-9: #820014;
|
|
--color-primary-10: #5c0011;
|
|
--color-primary: var(--color-primary-6);
|
|
}
|
|
|
|
/* Orange Theme */
|
|
:root[data-primary-color='orange'] {
|
|
--color-primary-1: #fff7e6;
|
|
--color-primary-2: #ffe7ba;
|
|
--color-primary-3: #ffd591;
|
|
--color-primary-4: #ffc069;
|
|
--color-primary-5: #ffa940;
|
|
--color-primary-6: #fa8c16;
|
|
--color-primary-7: #d46b08;
|
|
--color-primary-8: #ad4e00;
|
|
--color-primary-9: #873800;
|
|
--color-primary-10: #612500;
|
|
--color-primary: var(--color-primary-6);
|
|
}
|
|
|
|
/* Cyan Theme */
|
|
:root[data-primary-color='cyan'] {
|
|
--color-primary-1: #e6fffb;
|
|
--color-primary-2: #b5f5ec;
|
|
--color-primary-3: #87e8de;
|
|
--color-primary-4: #5cdbd3;
|
|
--color-primary-5: #36cfc9;
|
|
--color-primary-6: #13c2c2;
|
|
--color-primary-7: #08979c;
|
|
--color-primary-8: #006d75;
|
|
--color-primary-9: #00474f;
|
|
--color-primary-10: #002329;
|
|
--color-primary: var(--color-primary-6);
|
|
}
|
|
|
|
/* ========== Dark Mode ========== */
|
|
:root.dark {
|
|
--color-text-primary: rgba(255, 255, 255, 0.85);
|
|
--color-text-secondary: rgba(255, 255, 255, 0.65);
|
|
--color-text-tertiary: rgba(255, 255, 255, 0.45);
|
|
--color-text-quaternary: rgba(255, 255, 255, 0.25);
|
|
|
|
--color-border: #434343;
|
|
--color-border-secondary: #303030;
|
|
|
|
--color-bg-container: #1f1f1f;
|
|
--color-bg-layout: #141414;
|
|
--color-bg-mask: rgba(0, 0, 0, 0.65);
|
|
|
|
/* Fill colors for dark mode */
|
|
--color-fill-quaternary: rgba(255, 255, 255, 0.08);
|
|
|
|
--shadow-card: 0 8px 28px rgba(0, 0, 0, 0.28);
|
|
--shadow-card-hover: 0 14px 36px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
/* ========== Gray Mode ========== */
|
|
html.gray-mode {
|
|
filter: grayscale(100%);
|
|
}
|