/* ===================================================================== * Sello Design Tokens v2 — 嘉欣架构方案 B4 * * 单一真相源 —— 所有 CSS 变量集中定义。 * 其他文件只引用 var(--sello-*)，不定义新变量。 * * 设计原则： * 1. --sello-* 前缀统一，IDE 自动补全一致 * 2. :root 暗色主题 / [data-theme="light"] 亮色主题，切换不碰组件 * 3. z-index 十层体系 —— 7-29 语言选择器事故的血脉教训 * 4. 渐进迁移：本文件新建，不覆盖 v1/v3 tokens * * v2.0 · 2026-07-30 · 嘉欣 * ===================================================================== */ /* ===================================================================== * 1. 色彩色阶（8 组 × 10 档） * ===================================================================== */ :root { /* ---- 1a. Primary 主色（靛蓝 → 青蓝） ---- */ --sello-color-primary-50: rgba(99, 102, 241, 0.04); --sello-color-primary-100: rgba(99, 102, 241, 0.08); --sello-color-primary-200: rgba(99, 102, 241, 0.15); --sello-color-primary-300: rgba(129, 140, 248, 0.30); --sello-color-primary-400: rgba(129, 140, 248, 0.50); --sello-color-primary: #818cf8; --sello-color-primary-600: #6366f1; --sello-color-primary-700: #4f46e5; --sello-color-primary-800: rgba(79, 70, 229, 0.60); --sello-color-primary-900: rgba(79, 70, 229, 0.30); /* ---- 1b. Accent 强调色（青蓝系） ---- */ --sello-color-accent-400: #22d3ee; --sello-color-accent: #06b6d4; --sello-color-accent-600: #0891b2; /* 8-22 朱茵补（嘉欣裁决：色阶补 700 档）：批量结果成功色，原 #0e7490 等值 */ --sello-color-accent-700: #0e7490; /* ---- 1c. Success 成功色（绿） ---- */ --sello-color-success-50: rgba(34, 197, 94, 0.04); --sello-color-success-100: rgba(34, 197, 94, 0.08); --sello-color-success-200: rgba(34, 197, 94, 0.15); --sello-color-success: #22c55e; --sello-color-success-600: #16a34a; /* ---- 1d. Error 错误色（红） ---- */ --sello-color-error-50: rgba(239, 68, 68, 0.04); --sello-color-error-100: rgba(239, 68, 68, 0.08); --sello-color-error-200: rgba(239, 68, 68, 0.15); --sello-color-error: #ef4444; --sello-color-error-600: #dc2626; /* ---- 1e. Warning 警告色（琥珀） ---- */ --sello-color-warning-50: rgba(245, 158, 11, 0.04); --sello-color-warning-100: rgba(245, 158, 11, 0.08); --sello-color-warning: #f59e0b; /* ---- 1f. Neutral — 文字 ---- */ --sello-color-text-primary: #e8e8ed; --sello-color-text-secondary: rgba(232, 232, 237, 0.55); --sello-color-text-disabled: rgba(232, 232, 237, 0.35); --sello-color-text-muted: rgba(232, 232, 237, 0.45); --sello-color-text-inverse: #0f0f1a; /* ---- 1g. Neutral — 背景 ---- */ --sello-color-bg: #020208; --sello-color-bg-page: #020208; --sello-color-bg-card: rgba(255, 255, 255, 0.028); --sello-color-bg-input: rgba(255, 255, 255, 0.05); --sello-color-bg-hover: rgba(255, 255, 255, 0.04); --sello-color-bg-glass: rgba(15, 23, 42, 0.85); --sello-color-bg-glass-heavy: rgba(15, 23, 42, 0.95); /* 8-22 朱茵补（嘉欣裁决：不透明浮层色品类）：自绘下拉/强制兑底块背景，原 #16181d 等值 */ --sello-color-bg-solid: #16181d; /* ---- 1h. Neutral — 边框 ---- */ --sello-color-border: rgba(255, 255, 255, 0.14); --sello-color-border-hover: rgba(255, 255, 255, 0.15); --sello-color-border-focus: rgba(129, 140, 248, 0.12); --sello-color-border-strong: rgba(255, 255, 255, 0.20); /* ---- 1i. Glass 玻璃态 ---- */ --sello-glass-bg: rgba(255, 255, 255, 0.03); --sello-glass-border: rgba(255, 255, 255, 0.06); /* ---- 1j. 语义别名（只做映射，不定义新值） ---- */ --sello-color-primary-hover: var(--sello-color-primary-300); --sello-color-primary-soft: var(--sello-color-primary-100); --sello-color-error-soft: var(--sello-color-error-100); --sello-color-error-border: var(--sello-color-error-200); --sello-color-success-soft: var(--sello-color-success-100); --sello-color-success-border: var(--sello-color-success-200); } /* ===================================================================== * 1k. 亮色主题覆盖 * 只覆盖与暗色差异显著的变量，其余继承。 * 切换方式： * ===================================================================== */ [data-theme="light"] { --sello-color-bg: #f5f5f7; --sello-color-bg-page: #f5f5f7; --sello-color-bg-card: #ffffff; --sello-color-bg-input: #ffffff; --sello-color-bg-hover: rgba(0, 0, 0, 0.04); --sello-color-bg-glass: rgba(255, 255, 255, 0.85); --sello-color-bg-glass-heavy: rgba(255, 255, 255, 0.95); /* 8-22 朱茵补（嘉欣裁决）：亮色主题不透明浮层色 */ --sello-color-bg-solid: #ffffff; --sello-color-text-primary: #0f0f1a; --sello-color-text-secondary: rgba(15, 15, 26, 0.55); --sello-color-text-disabled: rgba(15, 15, 26, 0.35); --sello-color-text-muted: rgba(15, 15, 26, 0.45); --sello-color-text-inverse: #e8e8ed; --sello-color-border: rgba(0, 0, 0, 0.10); --sello-color-border-hover: rgba(0, 0, 0, 0.12); --sello-color-border-focus: rgba(99, 102, 241, 0.12); --sello-color-border-strong: rgba(0, 0, 0, 0.16); --sello-glass-bg: rgba(255, 255, 255, 0.60); --sello-glass-border: rgba(0, 0, 0, 0.06); } /* ===================================================================== * 2. 间距栅格（4px 基准） * 新增间距从表中选取，禁止自定义值 * ===================================================================== */ :root { --sello-space-3xs: 1px; --sello-space-2xs: 2px; --sello-space-xs: 4px; --sello-space-sm: 8px; --sello-space-md: 16px; --sello-space-lg: 24px; --sello-space-xl: 32px; --sello-space-2xl: 40px; --sello-space-3xl: 48px; --sello-space-4xl: 64px; } /* ===================================================================== * 3. 圆角体系 * 与间距栅格 4px 基准对齐 * ===================================================================== */ :root { --sello-radius-sm: 4px; --sello-radius-md: 8px; --sello-radius-lg: 12px; --sello-radius-xl: 16px; --sello-radius-full: 9999px; } /* ===================================================================== * 4. 阴影层级 * ===================================================================== */ :root { --sello-shadow-none: none; --sello-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.15); --sello-shadow-md: 0 8px 32px rgba(0, 0, 0, 0.30); --sello-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.40); --sello-shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.50); --sello-shadow-focus: 0 0 0 3px rgba(129, 140, 248, 0.06); } [data-theme="light"] { --sello-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06); --sello-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.10); --sello-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.15); --sello-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.20); --sello-shadow-focus: 0 0 0 3px rgba(99, 102, 241, 0.12); } /* ===================================================================== * 5. 字体体系 * ===================================================================== */ :root { /* 字族 */ --sello-font-brand: 'Bruno Ace SC', sans-serif; --sello-font-heading: 'Manrope', 'Plus Jakarta Sans', 'PingFang SC', sans-serif; --sello-font-body: 'Plus Jakarta Sans', 'PingFang SC', 'Microsoft YaHei', sans-serif; --sello-font-mono: 'JetBrains Mono', 'Fira Code', monospace; /* 字号 */ --sello-font-size-xs: 10px; --sello-font-size-sm: 11px; --sello-font-size-base: 13px; --sello-font-size-md: 14px; --sello-font-size-lg: 16px; --sello-font-size-xl: 20px; --sello-font-size-2xl: 24px; --sello-font-size-3xl: 28px; /* 字重 */ --sello-font-weight-normal: 400; --sello-font-weight-medium: 500; --sello-font-weight-semibold: 600; --sello-font-weight-bold: 700; /* 行高 */ --sello-line-height-tight: 1.25; --sello-line-height-normal: 1.5; --sello-line-height-relaxed: 1.75; } /* ===================================================================== * 6. z-index 十层体系 🔴 * * 7-29 语言选择器事故的血脉教训： * 代码逻辑正确 ≠ 用户可操作到达。 * CSS 架构规范必须包含 z-index 层级表，这是 UI 架构的血脉。 * * 原则： * 1. 所有页面只引用 var(--sello-z-*)，禁止裸数字 * 2. 同一区间内的元素按 DOM 顺序自然层叠 * 3. 跨层级交互由变量保证 * 4. 新增层级必须先论证，不可在中间插值 * * 🚫 999 / 1000 / 1001 / 9999 / 10000 / 99999 — v1 遗产，永久禁止 * ===================================================================== */ :root { --sello-z-base: 0; /* 层 0 · 默认文档流 */ --sello-z-content: 1; /* 层 1 · 内容区 */ --sello-z-dropdown: 100; /* 层 2 · 下拉菜单、语言选择器、自动补全 */ --sello-z-sticky: 200; /* 层 3 · 粘性表头、固定导航 */ --sello-z-sidebar: 300; /* 层 4 · 侧边栏、抽屉 */ --sello-z-overlay: 400; /* 层 5 · 遮罩层（modal/lightbox 底层背景） */ --sello-z-modal: 500; /* 层 6 · 弹窗、对话框 */ --sello-z-lightbox: 600; /* 层 7 · 图片灯箱、全屏预览 */ --sello-z-toast: 700; /* 层 8 · Toast 通知、全局消息 */ --sello-z-tooltip: 800; /* 层 9 · 工具提示（最顶层，预留） */ } /* ===================================================================== * 7. 过渡动画 * ===================================================================== */ :root { --sello-transition-fast: 0.15s ease; --sello-transition: 0.2s ease; --sello-transition-slow: 0.3s ease; --sello-transition-modal: 0.25s cubic-bezier(0.4, 0, 0.2, 1); } /* ===================================================================== * 8. 断点（移动优先） * ===================================================================== */ :root { --sello-breakpoint-sm: 480px; --sello-breakpoint-md: 768px; --sello-breakpoint-lg: 1024px; --sello-breakpoint-xl: 1280px; } /* ===================================================================== * 9. 页面宽度约束 * ===================================================================== */ :root { --sello-max-width-auth: 400px; --sello-max-width-content: 720px; --sello-max-width-page: 1200px; } /* ===================================================================== * 10. 杂项 * ===================================================================== */ :root { --sello-blur: 16px; --sello-blur-heavy: 24px; } /* ===================================================================== * 11. 表单栅格（08-26 UI 重做 v1：4px 漂移教训的根治） * 表单行 label 宽/控件宽/行距统一，页面禁止裸 px 值 * ===================================================================== */ :root { --sello-form-label-w: 110px; /* 表单 label 列宽 */ --sello-form-label-gap: 6px; /* label ↔ 控件 */ --sello-form-gap: 12px; /* 控件垂直间距 */ --sello-form-row-gap: 16px; /* 表单行间距 */ } /* ===================================================================== * 12. 控件尺寸档位（sm/md/lg，与组件五态配套） * ===================================================================== */ :root { --sello-size-sm-h: 34px; --sello-size-md-h: 40px; --sello-size-lg-h: 44px; --sello-size-sm-radius: var(--sello-radius-sm); --sello-size-md-radius: var(--sello-radius-md); --sello-size-lg-radius: var(--sello-radius-md); } /* ===================================================================== * 13. 焦点态（统一 focus ring，8-17 焦点闪烁/蓝紫刺眼教训） * ===================================================================== */ :root { --sello-focus-ring-width: 2px; --sello-focus-ring-offset: 1px; --sello-focus-ring-color: rgba(129, 140, 248, 0.55); --sello-focus-ring: 0 0 0 var(--sello-focus-ring-width) var(--sello-focus-ring-color); } [data-theme="light"] { --sello-focus-ring-color: rgba(99, 102, 241, 0.45); }