// ============================================================ // 设计令牌(Design Tokens)—— 蓝紫渐变主题 // 此处定义的颜色、圆角、阴影等令牌,需同步到: // 1. globals.css(Tailwind CSS 扩展,通过 @theme 指令) // 2. antd-theme.ts(Ant Design ConfigProvider 主题配置) // 修改时三处同步更新。 // ============================================================ // ---------- 品牌色(蓝紫渐变) ---------- export const colorPrimary = '#6366F1'; export const colorPrimaryLight = '#818CF8'; export const colorPrimaryDark = '#4F46E5'; export const colorSecondary = '#8B5CF6'; export const gradientStart = '#4F46E5'; export const gradientEnd = '#7C3AED'; export const gradientPrimary = `linear-gradient(135deg, ${gradientStart}, ${gradientEnd})`; export const gradientPrimaryHover = `linear-gradient(135deg, ${colorPrimary}, ${colorSecondary})`; // ---------- 功能色 ---------- export const colorSuccess = '#10B981'; export const colorWarning = '#F59E0B'; export const colorError = '#EF4444'; export const colorInfo = '#3B82F6'; // ---------- 中性色(亮色模式) ---------- export const colorTextBase = '#1E1B4B'; export const colorTextSecondary = '#6B7280'; export const colorTextTertiary = '#9CA3AF'; export const colorBgBase = '#FFFFFF'; export const colorBgContainer = '#F9FAFB'; export const colorBgElevated = '#FFFFFF'; export const colorBgLayout = '#F5F3FF'; export const colorBgSpotlight = '#F3F4F6'; /** 亮色模式 — 面板边框(稍明显) */ export const colorBorder = '#E2E0F0'; /** 亮色模式 — 内部分隔线(可见但不强烈) */ export const colorBorderSecondary = '#EEECF6'; // ---------- 中性色(暗色模式 — 融入品牌蓝紫调) ---------- /** 暗色模式 — 主文字 */ export const darkColorTextBase = '#E8E8FA'; /** 暗色模式 — 次要文字 */ export const darkColorTextSecondary = '#A0A8D8'; /** 暗色模式 — 辅助文字 */ export const darkColorTextTertiary = '#6E78B0'; /** 暗色模式 — 页面底色(深邃蓝黑) */ export const darkColorBgBase = '#080C24'; /** 暗色模式 — 卡片/面板背景(暗蓝紫) */ export const darkColorBgContainer = '#0F1340'; /** 暗色模式 — 悬浮层背景(微亮蓝紫) */ export const darkColorBgElevated = '#171B52'; /** 暗色模式 — 页面布局底层 */ export const darkColorBgLayout = '#050818'; /** 暗色模式 — 面板外框(蓝紫边框,可见但不刺眼) */ export const darkColorBorder = '#2A3278'; /** 暗色模式 — 内部分隔线(柔和蓝紫,常驻可见) */ export const darkColorBorderSecondary = '#1C2250'; // ---------- 圆角 ---------- export const borderRadiusBase = 8; export const borderRadiusLG = 12; export const borderRadiusSM = 6; export const borderRadiusXS = 4; // ---------- 阴影 ---------- export const boxShadowBase = '0 1px 3px 0 rgba(99, 102, 241, 0.08), 0 1px 2px -1px rgba(99, 102, 241, 0.08)'; export const boxShadowLG = '0 10px 15px -3px rgba(99, 102, 241, 0.1), 0 4px 6px -4px rgba(99, 102, 241, 0.1)'; // ---------- 字体 ---------- export const fontFamily = `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'PingFang SC', 'Microsoft YaHei', sans-serif`; export const fontFamilyCode = `'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, 'Courier New', monospace`; export const fontSizeBase = 14; export const fontSizeLG = 16; export const fontSizeSM = 12; export const fontSizeXL = 20; // ---------- 间距 ---------- export const spacingUnit = 4; export const spacingXS = 4; export const spacingSM = 8; export const spacingMD = 16; export const spacingLG = 24; export const spacingXL = 32; export const spacingXXL = 48; // ---------- 动画 ---------- export const transitionDuration = '0.2s'; export const transitionTimingFunction = 'cubic-bezier(0.4, 0, 0.2, 1)';