/* * src/styles/tokens.css — Design Tokens * 命名规范见 docs/04-技术规范.md § 2.5 * 色值锁定见 docs/06-UI交互规范.md § 四 * * 命名格式:--color--- * 组件域:form / table-row / table-header / ... * 作用:bg(背景)/ fg(前景/字体)/ border * 状态:edit / readonly / hover / selected(无状态时省略) * * 约束: * - 组件样式中只用 var(--color-xxx),禁止硬编码 hex / rgba * - 修改色值只改本文件,不允许在组件级覆盖 * - 新增 token 须先登记到 docs/06 § 4.1 / 4.2,再补到此处 */ :root { /* === 1. 全局调色板(与 Ant Design 主题对齐) === */ --color-primary: #1890ff; --color-success: #52c41a; --color-warning: #faad14; --color-error: #ff4d4f; --color-text: rgba(0, 0, 0, 0.85); --color-text-secondary: rgba(0, 0, 0, 0.45); --color-border: #d9d9d9; --color-bg-base: #f0f2f5; /* === 2. 组件级状态色(与 docs/06 § 4.2 一一对应) === */ /* form:输入框 / 备注框 / 时间框 / 下拉框共用 */ --color-form-bg-edit: #ffffff; --color-form-bg-readonly: #f1f2f8; --color-form-bg-hover: #f5f5f5; /* 仅下拉框使用 */ --color-form-fg: #000000; /* table */ --color-table-row-bg-selected: #86d5fb; --color-table-row-bg-hover: #fff7e6; --color-table-row-bg-readonly: #f1f2f8; /* = rgb(241, 242, 248) */ --color-table-row-fg: #000000; --color-table-header-bg: #f5f5f5; --color-table-header-fg: rgba(0, 0, 0, 0.85); /* = #000000D9 */ /* === 3. Prototype shell tokens === */ --color-topbar-bg: #1f1f23; --color-toolbar-bg: #2c2f36; --color-toolbar-text: #e6e7ea; --color-tab-active: #1e84e6; --color-tab-text: #9aa0a8; --color-field-bg-edit: #eaf3fe; --color-field-label-req: #f04848; --color-table-border: #e3e6eb; --color-table-row-alt: #f7f8fa; --color-filterbar-bg: #ffffff; --color-nav-overlay-bg: #2b3137; /* === 4. NavOverlay colors === */ --color-nav-sidebar-border: #1e2226; --color-nav-sidebar-active-bg: #34393f; --color-nav-col-header: #e8eaee; --color-nav-col-divider: #4a4f57; --color-nav-item-text: #cfd3da; --color-nav-item-star: #f3b526; /* === 5. Login hero === */ --color-login-hero-start: #1a4ea0; --color-login-hero-mid: #0a1d44; --color-login-hero-end: #050d20; --color-login-bg: #eaedf2; --color-login-border: #d8dce2; --color-login-brand: #e0a020; --color-login-text-muted: #666666; }