/* =================================================================== * common.css · 全局基础 + 主题变量 * ------------------------------------------------------------------ * 仅包含：reset + 字体 + 设计变量（含多主题）+ 响应式断点变量 * 组件级样式一律由 JS 组件通过 Component.defineStyles 注入（不再使用独立 CSS 文件） * * 主题切换分两个独立维度： * 1) —— 明暗（亮 / 暗） * 2) —— 主色系（金蝶轻分析 BI） * 两者正交：任意明暗 × 任意主色均可组合。 * 不写 data-color 时，:root 默认主色 = eyecare（兜底，向后兼容）。 * 不写 data-theme 时，:root 默认明暗 = light。 * ★主题色改动唯一入口：本文件（common.css）。组件 CSS 严禁出现硬编码 hex 色， * 所有背景/文本/边框/主色都必须引用下面的语义变量。改主题只需 * [a] 调整本文件中已有 [data-color][data-theme] 块的变量值 * 或 [b] 复制底部"新增主题色模板"新加一块 * 不需要碰 docs.css 或组件 JS（它们只引用变量，不含色值） */ /* 字体声明（本地自托管，详见 ./fonts.css） */ @import url('./fonts.css'); /* 注：组件样式由 Component.defineStyles 在 JS 文件加载时注入到 ， 不再使用独立的 layout.css / form.css / view.css 文件。 */ /* ============================================================ * 主题语义变量映射表（全场唯一源） * ------------------------------------------------------------ * 所有组件 CSS 仅引用以下语义变量，不直接读色值。主题切换只动本文件。 * * 【页面层】 * --ys-color-bg 页面 body 底色（护眼灰蓝） * --ys-color-bg-soft hover / 邻近背景（极浅蓝底 eef3ff） * --ys-color-menu-active 左侧导航 / 当前选中背景 * * 【surface 层】 * --ys-color-surface 卡片 / 输入框 / 按钮 / 下拉面板 / checkbox 方框 * 纯白（亮色）或深面（暗色），统一"组合浮起来"的层级感 * * 【文字】 * --ys-color-text 主文字（无纯黑灼伤） * --ys-color-text-muted 次要文字 * --ys-color-placeholder placeholder * * 【边框】 * --ys-color-border 普通边框 * --ys-color-border-hover hover 边框 * --ys-color-border-light checkbox/radio 未选中边框 * * 【主色族】 * --ys-color-primary 主色 * --ys-color-primary-hover / -active / -rgb / -gradient* * --ys-color-on-primary 主色背景上的文字色 * （卡片阴影直接写 hex rgba，无需中间变量） * --ys-color-highlight-rgb inset 高光（一般 255,255,255） * * 【语义色】danger / success / warn / info * 软化处理：亮色用柔和玫瑰红/草本绿/暖琥珀；暗色进一步降饱和 * * 【演示】--ys-color-demo-1~4 demo 页彩色盒子背景 * ============================================================ */ /* ============================================================ * 主题变量 · 明暗维度（light / dark 两档，无 cyber） * ------------------------------------------------------------ * 商务护眼三原则（落地规范）: * 1. 文字不纯黑(#000)/纯白(#FFF)，对比度压到 7:1 ~ 10:1 * 2. 辅助色（danger/success/warn）做"粉化"处理 * 3. 卡片阴影用 8 位 hex 直接写（#RRGGBBAA），跟随主色调 * * [data-theme] 块定义各明暗档的语义色 * [data-color] 块定义各主色主题的背景/文本/主色等 * ============================================================ */ [data-theme="light"] { --ys-color-demo-1 : #f4f7fb; --ys-color-demo-2 : #f7f9f6; --ys-color-demo-3 : #f9fafd; --ys-color-demo-4 : #f8fafc; --ys-color-danger : #e53e3e; --ys-color-danger-hover : #c53030; --ys-color-danger-active : #9b2c2c; --ys-color-danger-rgb : 229, 62, 62; --ys-color-danger-soft : rgba(229, 62, 62, .10); --ys-color-success : #38a169; --ys-color-success-rgb : 56, 161, 105; --ys-color-success-soft : rgba(56, 161, 105, .12); --ys-color-warn : #dd9b22; --ys-color-warn-rgb : 221, 155, 34; --ys-color-warn-soft : rgba(221, 155, 34, .14); --ys-color-info : #3b82c4; --ys-color-info-rgb : 59, 130, 196; --ys-color-info-soft : rgba(59, 130, 196, .12); } [data-theme="dark"] { --ys-color-demo-1 : #161b22; --ys-color-demo-2 : #1c2320; --ys-color-demo-3 : #141226; --ys-color-demo-4 : #1e293b; --ys-color-danger : #f56565; --ys-color-danger-hover : #fc8181; --ys-color-danger-active : #c53030; --ys-color-danger-rgb : 245, 101, 101; --ys-color-danger-soft : rgba(245, 101, 101, .16); --ys-color-success : #48bb78; --ys-color-success-rgb : 72, 187, 120; --ys-color-success-soft : rgba(72, 187, 120, .18); --ys-color-warn : #ed8936; --ys-color-warn-rgb : 237, 137, 54; --ys-color-warn-soft : rgba(237, 137, 54, .18); --ys-color-info : #63b3ed; --ys-color-info-rgb : 99, 179, 237; --ys-color-info-soft : rgba(99, 179, 237, .18); } /* ============================================================ * 编辑标记色（accent · v2 新增） * ------------------------------------------------------------ * 报刊编辑感的关键装饰色：用于 Tag / 状态标记 / 关键数字 / 空状态。 * 与主题正交：eyecare 主题下同样可叠加使用，不改变主色基调。 * - accent-1 墨绿 · 成功/正向标记 · 报刊"重要更正"色 * - accent-2 酒红 · 警示/重要标记 · 报刊"独家"标记色 * - accent-3 琥珀 · 提示/引导标记 · 报刊"重点"色 * - accent-4 群青 · 信息/次级标记 · 报刊"短评"色 * ============================================================ */ :root, [data-color="eyecare"][data-theme="light"] { --ys-accent-1 : #0f4c3a; /* 墨绿 */ --ys-accent-1-soft : rgba(15, 76, 58, .10); --ys-accent-2 : #a8324a; /* 酒红 */ --ys-accent-2-soft : rgba(168, 50, 74, .10); --ys-accent-3 : #b8860b; /* 暗金 */ --ys-accent-3-soft : rgba(184, 134, 11, .12); --ys-accent-4 : #1e3a8a; /* 群青 */ --ys-accent-4-soft : rgba(30, 58, 138, .10); } [data-color="eyecare"][data-theme="dark"] { --ys-accent-1 : #4fd1a8; /* 墨绿提亮 */ --ys-accent-1-soft : rgba(79, 209, 168, .16); --ys-accent-2 : #f56585; /* 酒红提亮 */ --ys-accent-2-soft : rgba(245, 101, 133, .16); --ys-accent-3 : #ecc94b; /* 暗金提亮 */ --ys-accent-3-soft : rgba(236, 201, 75, .18); --ys-accent-4 : #818cf8; /* 群青提亮 */ --ys-accent-4-soft : rgba(129, 140, 248, .18); } /* ============================================================ * 阴影分级（v2 新增 · 报刊编辑感 4 档） * ------------------------------------------------------------ * 用法：var(--ys-shadow-1) / var(--ys-shadow-2) / var(--ys-shadow-3) / var(--ys-shadow-4) * - shadow-1 微弱（input 浮起） * - shadow-2 轻量（card 默认） * - shadow-3 中等（card hover / dropdown） * - shadow-4 戏剧（modal / popover） * 阴影色跟随主色：rgba(var(--ys-color-primary-rgb), .xx) * ============================================================ */ [data-theme="light"] { --ys-shadow-1: 0 1px 1px rgba(31, 35, 41, .04); --ys-shadow-2: 0 1px 2px rgba(31, 35, 41, .06); --ys-shadow-3: 0 4px 12px -2px rgba(31, 35, 41, .10), 0 2px 4px rgba(31, 35, 41, .04); --ys-shadow-4: 0 20px 40px -8px rgba(31, 35, 41, .18), 0 8px 16px -4px rgba(31, 35, 41, .08); } [data-theme="dark"] { --ys-shadow-1: 0 1px 1px rgba(0, 0, 0, .24); --ys-shadow-2: 0 1px 2px rgba(0, 0, 0, .36); --ys-shadow-3: 0 4px 12px -2px rgba(0, 0, 0, .48), 0 2px 4px rgba(0, 0, 0, .32); --ys-shadow-4: 0 20px 40px -8px rgba(0, 0, 0, .64), 0 8px 16px -4px rgba(0, 0, 0, .40); } /* ============================================================ * 圆角分级（v2 新增 · 报刊编辑感 4 档 · 避免一刀切） * ------------------------------------------------------------ * - radius-xs 2px 标签 / 状态点 * - radius-sm 4px input / button（紧凑、实用） * - radius-md 6px card / page（平衡） * - radius-lg 12px modal / 空状态（戏剧） * ============================================================ */ :root { --ys-radius-xs : 2px; --ys-radius-sm : 4px; --ys-radius-md : 6px; --ys-radius-lg : 12px; } /* ============================================================ * 主题变量 · 颜色维度（仅 1 套 · 护眼蓝 / Kingdee Blue） * ------------------------------------------------------------ * data-color="eyecare" * 每套含 2 组合（light + dark），独立定义完整变量 * :root 默认 = eyecare（兜底） * ============================================================ */ /* ===================================================== * 主题：护眼蓝（基于金蝶轻分析 BI 官方标准 · #1A66FF） * 轻分析标志性数据蓝：hover 提亮版（#4785FF），active 最深（#0047D6） * ===================================================== */ :root, [data-color="eyecare"][data-theme="light"] { /* —— 文字（报表标题/核心指标用深石墨灰，代替纯黑）—— */ --ys-color-text : #1f2329; --ys-color-text-muted : #4e5969; --ys-color-placeholder : #c9cdd4; --ys-color-bg-soft-hover : #e1ecff; /* v2: 浅蓝 hover（比 bg-soft 略深一档） */ --ys-color-paper : #f5f3ed; /* v3: 印张色（报刊"栏目底纹"暖米色） */ --ys-color-paper-hover : #ebe8e0; /* v3: 印张色 hover（比 paper 略深） */ /* —— 层级：画布 / 图表卡片表面 / hover —— */ --ys-color-bg : #f4f6f9; /* 轻分析画布 · 带微冷调的浅灰 */ --ys-color-surface : #ffffff; /* 图表卡片/组件容器，纯白 */ --ys-color-bg-soft : #edf3ff; /* 次要按钮/菜单选中 · 极浅蓝 */ --ys-color-menu-active : #edf3ff; /* 左侧导航激活态 · 跟 bg-soft 一致 */ /* —— 边框 —— */ --ys-color-border : #e1e6eb; --ys-color-border-hover : #c5cdd5; --ys-color-border-light : #d6dce2; /* —— 主色：金蝶轻分析 BI 标志性蓝（清透、现代，极具数据感）—— */ --ys-color-primary : #2563eb; /* 主色 */ --ys-color-primary-hover : #4f8bff; /* 悬浮提亮版（BI 现代风格） */ --ys-color-primary-active: #1d4ed8; /* 激活最深 */ --ys-color-primary-rgb : 37, 99, 235; --ys-color-on-primary : #ffffff; --ys-color-on-primary-rgb: 255, 255, 255; --ys-color-highlight-rgb : 255, 255, 255; --ys-color-primary-soft : rgba(37, 99, 235, .10); } [data-color="eyecare"][data-theme="dark"] { /* —— 文字 —— */ --ys-color-text : #e5e6eb; --ys-color-text-muted : #86909c; --ys-color-placeholder : #4e5969; --ys-color-bg-soft-hover : #2a3a5c; /* v2: 暗色 hover 略浅一档 */ --ys-color-paper : #1f2530; /* v3: 暗色"印张色"（比 surface 略深一档） */ --ys-color-paper-hover : #262d3a; /* v3: 暗色 paper hover（比 paper 略深） */ /* —— 层级 —— */ --ys-color-bg : #0f131c; --ys-color-surface : #1b2030; --ys-color-bg-soft : #1f2940; --ys-color-menu-active : #1f2940; /* —— 边框 —— */ --ys-color-border : #2e3340; --ys-color-border-hover : #4a4f5c; --ys-color-border-light : #232832; /* —— 主色提亮（暗背景下醒目，同金蝶 BI）—— */ --ys-color-primary : #4f8bff; --ys-color-primary-hover : #6ba0ff; --ys-color-primary-active: #2563eb; --ys-color-primary-rgb : 79, 139, 255; --ys-color-on-primary : #ffffff; --ys-color-on-primary-rgb: 255, 255, 255; --ys-color-highlight-rgb : 255, 255, 255; --ys-color-primary-soft : rgba(79, 139, 255, .18); } /* ============================================================ * ★ 新增主题色模板（复制本块，改 key 和色值即可） * ------------------------------------------------------------ * 1) 将 "yourkey" 改为英文 key（如 royal/green/purple 等） * 2) 修改以下变量里的色值（明暗各 21 个变量） * 3) 同时在以下文件更新白名单（全部仅这些地方）： * - js/demo/index.js COLORS / COLOR_LABELS * - pages/demo.html VALID_COLORS * 组件级 CSS 一行都不用改。 * ============================================================ * * [data-color="yourkey"][data-theme="light"] { * --ys-color-text : #xxxxxx; * --ys-color-text-muted : #xxxxxx; * --ys-color-placeholder : #xxxxxx; * --ys-color-bg : #xxxxxx; * --ys-color-surface : #xxxxxx; * --ys-color-bg-soft : #xxxxxx; * --ys-color-menu-active : #xxxxxx; * --ys-color-border : #xxxxxx; * --ys-color-border-hover : #xxxxxx; * --ys-color-border-light : #xxxxxx; * --ys-color-primary : #xxxxxx; * --ys-color-primary-hover : #xxxxxx; * --ys-color-primary-active: #xxxxxx; * --ys-color-primary-rgb : r, g, b; * --ys-color-on-primary : #xxxxxx; * --ys-color-on-primary-rgb: r, g, b; * （卡片阴影直接写 hex rgba，无需中间变量） * --ys-color-highlight-rgb : 255, 255, 255; * } * [data-color="yourkey"][data-theme="dark"] { /* 同上 21 个变量，亮色版改成暗色版 */ } */ /* ============================================================ * 中性变量（不随主题变化）+ 响应式断点 * ============================================================ */ :root { /* 字体栈：本地 Inter 优先，命中不到时退化到系统中文字体 完整栈定义见 ./fonts.css，本变量通过 var() 引用保持单一来源 */ --ys-font : var(--ys-font-sans); --ys-font-code : var(--ys-font-mono); /* v2 新增：display 字体（衬线）· 标题专用 实际字体栈已在 fonts.css 中定义，此处仅做别名引用 */ } /* ============================================================ * 全局排版（v2 新增 · 报刊编辑感） * ------------------------------------------------------------ * 收紧字距 + 明确字号层级，避免 AI 风格"千篇一律的 14px"。 * - letter-spacing: -0.01em 微收紧，标题更"印刷" * - font-feature-settings 启用 OpenType 数字等宽 * ============================================================ */ body { font-feature-settings: "tnum" 1, "cv11" 1; /* tabular-nums 数字等宽 */ letter-spacing : -0.005em; /* 全局微收紧（不感知） */ } /* ============================================================ * Reset * ============================================================ */ * { box-sizing: border-box; } html, body { margin : 0; padding: 0; height : 100%; overflow: hidden; /* 外层不滚动，内部叠加独立滚动 */ font-family: var(--ys-font); color : var(--ys-color-text); background : var(--ys-color-bg); font-size : 14px; line-height: 1.6; transition: background-color .25s cubic-bezier(.4, 0, .2, 1), color .25s cubic-bezier(.4, 0, .2, 1); } @media (max-width: 768px) { html, body { font-size: 13px; } } /* app 根点默认铺满 body，让 ys-page height:100% 传递生效 */ #app { height: 100%; }