/* ===================================================================== 交石后台 · 全局设计变量（Design Tokens） --------------------------------------------------------------------- 版本 : v1.3（2026-09-20 起生效）+ 增量 v1.6 ~ v1.10（2026-09-21 ~ 09-22） 依据 : docs/UI改版实施方案-基于Figma.md §3.5（Figma 节点实测） v1.3：深色语义值全部按 Figma 现行设计稿（主稿页 91 画板）的 节点 fills/strokes 重采（采样基准见下方 Layer 2 段注释）； 浅色值仍为预留、未打磨。 增量 v1.6（2026-09-21）：新增「内容页 / 步骤流程」语义一组 （Figma 数字人制作 132:10412~132:11410），纯新增、未改既有值。 增量 v1.8（2026-09-21）：新增「生成中等待弹窗」语义一组 5 个 （Figma 视频创意官 461:1129「视频生成中状态」），纯新增、未改既有值。 规范 : docs/UI变量使用规范.md —— 改本文件前必须先读，新增/修改变量 必须同步更新规范文档的《变量总表》和《变更记录》。 执行 : docs/UI重构方案建议.md（唯一执行主文档，任务 UI-0101/0102/0107） --------------------------------------------------------------------- 架构（两层，禁止跨层引用）： Layer 1 基础 Token（调色板原始值，主题无关） —— 仅允许被 Layer 2 引用，业务代码禁止直接使用 Layer 2 语义 Token（按用途命名，随主题切换） —— 业务代码（CSS/内联样式/JS 动态样式）只允许引用这一层 --------------------------------------------------------------------- 主题约定： :root = 深色值（当前默认主题，未接入同步脚本的内容页 iframe 自动落到深色，避免换壳期间出现白页） [data-theme="light"] = 浅色值（预留，变量已定义、未打磨验收） 切换方式：只改 ，禁止 JS 遍历节点换 class。 --------------------------------------------------------------------- 无障碍基线（实测对比度，改色值前先复算，不要凭感觉调）： 白字 / --brand-500 #ED6C00 ........ 3.11:1 仅满足大字号 AA （≥24px 常规 或 ≥18.66px 粗体） 白字 / --brand-600 #D95F00 ........ 3.76:1 同上，仅大字号 白字 / --brand-700 #B85400 ........ 4.88:1 满足正文 AA 白字 / --brand-300 #F59A4C ........ 2.19:1 ✗ 禁止：填充态 hover 不得变亮 白字 / --danger-500 #F05252 ....... 3.48:1 仅大字号 AA（填充按钮文字需注意） --color-warning #F6B84A / 白底 .... 1.77:1 ✗ 禁止当浅色主题文字色 结论（硬约束）： 1. 主色填充按钮文字不得小于 24px 常规 / 18.66px 粗体；若必须用 14px 文字， 填充改用 --color-brand-strong（白字 4.88:1）。 2. 填充态 hover / active 一律用 --color-brand-fill-hover / -active（变深）。 3. 浅色主题下状态文字一律用 --color-*-text，不得直接用 --color-success 等填充色。 ===================================================================== */ /* ===================================================================== Layer 1 · 基础 Token（调色板） ===================================================================== */ :root { /* —— 品牌色（Figma 实测，全站唯一主色来源） —— */ --brand-300: #F59A4C; /* 主色浅端：深色主题 hover / Hero 渐变过渡 */ --brand-500: #ED6C00; /* 主色：取代旧 #fa5c00，全站唯一 */ --brand-600: #D95F00; /* 主色深端：填充态 hover（推导值） */ --brand-700: #B85400; /* 无障碍主色端：白字叠该色 4.88:1，满足 AA 正文 */ /* —— 功能色（v1.3 全部按 Figma 现行设计稿实测重采） —— 来源：#36D399（工作台算力卡/状态标签）、#F26B6B（作品库操作图标/危险文字）、 #F6B84A（营销智能体「需及时处理」/算力充值「处理中」）、#599EFF（作品库标签）。 注意：旧值 #FF5722 / #FFB800 / #1E9FFF 在现行设计稿中已无任何引用。 */ --success-500: #36D399; --success-700: #1F8F66; /* 深色端（浅色主题用，Figma 实测保留） */ --danger-500: #F05252; /* 危险填充（「确认删除」按钮实测） */ --danger-600: #F26B6B; /* 危险文字/图标（叠卡片底 5.39:1，满足 AA 正文） */ --warning-500: #F6B84A; /* 警示（叠卡片底 9.03:1） */ --info-500: #599EFF; /* 信息（叠卡片底 5.90:1） */ /* —— 会员套餐主题色（Figma「会员升级弹窗」132:12916 实测） —— 三档套餐各带独立主题色，用于卡片顶条 / 赠品条底 / 主按钮 / hover 描边。 仅服务套餐卡，不参与主品牌色体系（不得用它替换 --brand-*）。 */ --plan-basic-500: #FF8A00; /* 基础版（橙） */ --plan-marketing-500: #FF5A4F; /* 营销版（红） */ --plan-business-500: #8C38FF; /* 经营版（紫） */ } /* ===================================================================== Layer 2 · 语义 Token —— 深色（当前默认主题） --------------------------------------------------------------------- v1.3：全部按 Figma 现行设计稿（主稿页 91 画板）节点 fills/strokes 重采。 采样基准（工作台 132:9317 / 视频脚本库 212:441 / 作品库 232:441 / 营销智能体 347:634 / 会员弹窗 132:12916）： 页面底 #0A1019 · 侧栏 #252B33 · 顶栏 #131922 · 卡片 #1C222C 浮层/表格容器 #131922 · 行悬停 #252B33 · 次级底 #111821 壳层描边 #272D36 · 内容描边 #31373F ===================================================================== */ :root { /* —— 背景色 —— */ --color-bg-page: #0A1019; /* 页面底（Main/Content 实测） */ --color-bg-deep: #111821; /* 次级底：表格行/输入底/标签底（实测） */ --color-bg-card: #1C222C; /* 卡片底（Quick/Compute/Recent 实测） */ --color-bg-elevated: #131922; /* 悬浮层：弹窗/下拉/浮层（Create Modal 实测） */ --color-bg-hover: #2E353F; /* 行/项/菜单悬停底（推导：介于侧栏 #252B33 与描边 #31373F 之间） */ --color-bg-mask: rgba(0, 0, 0, .68); /* 弹窗遮罩（Overlay 实测 op=0.68） */ /* —— Figma v1.3 壳层/工作台实测色（主稿页现行节点） —— */ --color-bg-sidebar: #252B33; /* Sidebar（实测） */ --color-bg-topbar: #131922; /* Topbar（实测） */ --color-bg-container: #131922; /* 页面内大容器：内容主容器/表格容器/作品卡（实测） */ --color-bg-workbench-card: #1C222C; /* 算力卡/快捷卡/最近作品面板（实测） */ --color-bg-table-header: #242A33; /* 表头（作品库 Table Header 实测） */ --color-bg-row-alt: #111821; /* 斑马纹行（作品库 Row 实测） */ --color-bg-row-hover: #1C222C; /* 表格行悬停（作品库 Row 850 实测） */ --color-border-shell: #272D36; /* 壳层分隔线（Sidebar/Topbar 描边实测） */ --color-text-heading: #EEF2F7; /* 工作台卡片标题 */ --color-text-muted: #9BA3B2; /* 工作台辅助说明 */ --color-text-hero: #F7F9FC; /* Hero 主标题 */ --color-text-body: #E6EDF7; /* 内容页正文/表格文本（作品库实测） */ --color-text-nav: #A7AFBC; /* 侧栏导航项（实测） */ --color-text-nav-group: #7D8794; /* 侧栏分组标题（实测） */ --color-success-workbench: #35C981; /* 工作台剩余比例文字 */ --color-accent-blue: #4A90FF; /* 工作台快捷卡图标 */ --color-accent-purple: #B47CFF; /* 工作台快捷卡图标 */ --color-accent-gold: #F3A43B; /* 工作台快捷卡图标 */ --color-accent-magenta: #CD45EF; /* 顶栏「升级会员」渐变【右】端（Figma start 在 x=1.0） */ --color-accent-indigo: #624FE8; /* 顶栏「升级会员」渐变【左】端（Figma end 在 x=0.0） */ --color-success-soft-strong: rgba(54, 211, 153, .28); /* 算力充值按钮描边（实测 op=0.28） */ /* —— 会员套餐主题语义（Figma 132:12916 实测）—— soft = 主题色 op.12（赠品条底）；text = 叠 #1C222C 卡底的可读文字色。 注意：营销 / 经营两档的 text 比 fill 浅（保证叠卡底可读），不是同一个值。 */ --color-plan-basic: var(--plan-basic-500); --color-plan-basic-soft: rgba(255, 138, 0, .12); --color-plan-basic-text: #FF8A00; --color-plan-marketing: var(--plan-marketing-500); --color-plan-marketing-soft: rgba(255, 90, 79, .12); --color-plan-marketing-text: #FF8172; --color-plan-business: var(--plan-business-500); --color-plan-business-soft: rgba(140, 56, 255, .12); --color-plan-business-text: #CFACFF; /* —— 内容页 / 步骤流程（Figma 数字人制作 132:10412~132:11410 实测）—— 内容页灰阶比工作台「亮一档」，不要与工作台那组 --color-text-muted 混用。 */ --color-text-content-title: #F2F5F9; /* 页面标题 / 卡片标题 */ --color-text-content-sub: #7D8796; /* 卡片副标题 / 说明文字 */ --color-text-content-body: #E5E9EF; /* 结果正文 */ --color-text-content-value: #D9DEE6; /* 输入框 / 下拉已选值 */ --color-text-content-placeholder: #C9D0DA; /* 输入占位 */ --color-text-content-hint: #667080; /* 字数计数等极弱提示 */ --color-field-bg: var(--color-bg-elevated); /* 输入 / 结果框底 #131922 */ --color-field-border: #303A49; /* 输入框 / 下拉描边 */ /* —— 步骤条状态（Figma 132:10412 Stepper 实测）—— */ --color-step-label-active: var(--color-text-content-title); /* 当前步标签（#F2F5F9） */ --color-step-label-idle: #8C96A5; /* 未开始步标签 */ --color-step-num-idle: #7D8796; /* 未开始步序号 */ --color-step-progress: #F59A4C; /* 「进行中」副状态 */ /* —— 音色行 / 行内动作按钮（Figma 132:10639「02 声音合成」实测）—— ⚠ 两点与常见做法不同，别"顺手规范化"： 1) 行内按钮是**实色浅底**（#252B33），不是描边按钮，也没有边框； 2) 选中行底是**实色** #1A1715（比卡底 #1C222C 更暗且偏暖）， 不是主题色 op.12 叠加 —— 用 --color-bg-selected 会偏亮偏橙。 */ --color-bg-voice-row-selected: #1A1715; /* 选中音色行底（实色） */ --color-bg-voice-action: #252B33; /* 行内次按钮底（试听 / 选择） */ --color-bg-voice-action-picked: #2A2018; /* 行内「已选」按钮底（暖色实底） */ --color-text-voice-action: #C7CFDA; /* 行内次按钮文字 */ --color-text-voice-picked: #F59A4C; /* 「已选」按钮文字 */ /* —— 字幕与音乐（Figma 132:11170「04 字幕与音乐」实测）—— */ --color-bg-caption-sample: #0A0E14; /* 预览内字幕样例条底（比页面底更黑一档） */ --color-text-block-title: #E9EDF3; /* 包装区块标题（字幕 / 背景音乐），比卡标题低半档 */ /* —— 第4步弹窗暖色件（Figma 132:11884 / 132:12209 实测）—— 选中预设卡 / 提示条 / 已添加素材行的暖底 #281C14，及其上的奶油色提示文字 */ --color-bg-warm-pick: #281C14; --color-text-on-warm: #E7C7A8; /* —— 确认发布（Figma 132:11410「05 确认发布」实测）—— 右卡检查清单：✓ 条目文字 #C8D0DB（比输入值略灰一档）， 警示条目 #F2C49E（暖色弱化，不用 --color-warning #F6B84A —— 设计稿更偏橙粉）； 「更换账号」「话题标签」等暖色强调文字 #F59A4C， ⚠ 与 --color-step-progress / --color-text-voice-picked 同值但语义不同，故单列。 */ --color-text-check-item: #C8D0DB; /* 「发布前检查」清单条目文字 */ --color-text-check-warn: #F2C49E; /* 清单警示条目（发布后将对外可见） */ --color-text-accent-warm: #F59A4C; /* 暖色强调文字：更换账号 / 话题标签 */ /* —— 生成中等待弹窗（Figma 461:1129「视频创意官｜视频生成中状态」实测）—— ⚠ 这一层比 --color-bg-elevated(#131922) 更暗（#10161F）：它叠在遮罩之上， 设计稿刻意压暗以突出橙色进度与图标，**别与普通弹窗底混用**。 ⚠ 标题/图标橙 #FA800F 不是 --color-brand(#ED6C00)：设计稿把「进行中」强调色 提亮了一档（叠 #10161F 约 4.1:1，仅够粗体/大字号），单独出 token。 */ --color-surface-modal-deep: #10161F; /* 模态弹窗底（压在遮罩上） */ --color-border-modal-deep: #334052; /* 模态弹窗描边 */ --color-bg-progress-track: #212B3B; /* 进度条轨道底 */ --color-bg-btn-quiet: #212B3B; /* 弹窗内「取消生成」按钮底 */ --color-progress-accent: #FA800F; /* 生成中标题 / 星芒图标橙 */ /* —— 视频创意官「AI 视频创作」卡内控件（Figma 181:530 主稿页实测）—— 设计稿这页的卡内控件比内容页通用输入框**再深一档**。先说明哪些是复用、 哪些才新增，避免下次"看着像又补一套"： · 设置卡底 #121720 ≈ --color-bg-container #131922（Δ≤2，复用） · 预览卡底 #191E27 ≈ --color-bg-card #1C222C（Δ≤5，复用） · 卡外次按钮/发布账号底 #131821 ≈ --color-bg-elevated #131922（Δ1，复用） · 卡/卡外描边 #27303D / #292E38 / #252D38 ≈ --color-border-shell #272D36（复用） · 上传区描边 #344252 ≈ --color-border-strong #354052（Δ≤2，复用） 真正只有 4 种角色是新的，单列于下： ⚠ 卡内输入底 #0D121A 与 --color-field-bg(#131922) 差 6~8 阶；它是"卡内的卡"， 底比卡再暗一档才立得住，别合并掉。 */ --color-field-bg-deep: #0D121A; /* 卡内输入框 / 选项按钮底（深于 --color-field-bg） */ --color-field-border-deep: #293342; /* 卡内输入框 / 选项按钮描边 */ --color-surface-upload: #0F141B; /* 上传区外框底 */ --color-surface-warning-deep: #2E1A0E; /* 警示条底 / 专家级模型选中底（暖色实底） */ /* 分段控件（模式切换 pill 条）未选中项底 #252B33 —— 与 --color-bg-sidebar 值相同， 但语义是「内容区分段控件」，侧栏底调色时不该连带改动，故单列一个语义位。 轨道底 #1C222C 与选中项 #ED6C00 分别复用 --color-bg-card / --color-brand。 */ --color-bg-segment: #252B33; /* 分段控件未选中项底 */ /* —— 描边 / 分隔 —— */ --color-border: #31373F; /* 常规描边（内容区实测） */ --color-border-strong: #354052; /* 强描边/次按钮描边（实测） */ /* —— 文本色 —— */ --color-text-primary: #FFFFFF; /* 主文本 */ --color-text-secondary: #A7AFBC; /* 次要文本（实测最主要灰） */ --color-text-tertiary: #717986; /* 弱文本/图标（实测） */ --color-text-disabled: #5F6875; /* 禁用态文本（实测禁用输入框） */ --color-text-inverse: #FFFFFF; /* 品牌色/深色底上的文本 */ /* —— 品牌语义 —— */ --color-brand: var(--brand-500); /* 主操作、高亮、选中 */ --color-brand-hover: var(--brand-300); /* 文字/图标/描边 hover（叠卡片底 7.31:1） */ --color-brand-soft: rgba(237, 108, 0, .20); /* 主色弱底：图标容器/选中态底（Figma fill op=0.20） */ --color-brand-strong: var(--brand-700); /* 需承载 14px 白字的主色填充（白字 4.88:1） */ /* —— 品牌填充态 —— ⚠ 填充按钮 hover/active 必须变深而非变亮： 白字叠 --brand-300 仅 2.19:1，变亮会让按钮文字在 hover 瞬间不可读。 */ --color-on-brand: #FFFFFF; /* 主色填充上的文字/图标（3.11:1，见下方说明） */ --color-brand-fill: var(--brand-500); --color-brand-fill-hover: var(--brand-600); /* 白字 3.76:1 */ --color-brand-fill-active: var(--brand-700); /* 白字 4.88:1 */ /* —— 交互态底色 —— */ --color-bg-active: #202B3A; /* 按下/激活行底（营销智能体实测） */ --color-bg-selected: rgba(237, 108, 0, .12); /* 选中项底（侧栏 NavItem 实测 op=0.12） */ --color-bg-disabled: #1A1F29; /* 禁用控件底 */ --color-bg-control: #252B33; /* 控件默认底：图标按钮 / 分页按钮（销冠谈单改版实测） */ /* —— 描边交互态 —— */ --color-border-hover: #425063; /* 次按钮描边（数字人 Flow Actions 实测） */ --color-border-focus: var(--brand-500); --color-border-disabled: #1F2630; /* —— 焦点环（键盘可达性，禁止 outline:none 不给替代） —— */ --color-focus-ring: rgba(237, 108, 0, .45); /* —— 功能语义（v1.3 全部按 Figma 现行实测；旧占位值已废弃） —— */ --color-success: var(--success-500); --color-success-soft: rgba(54, 211, 153, .15); /* 算力充值按钮 fill op=0.10~0.28，取中间值 */ --color-danger: var(--danger-500); --color-danger-soft: rgba(242, 107, 107, .15); --color-warning: var(--warning-500); --color-warning-soft: rgba(246, 184, 74, .15); --color-info: var(--info-500); --color-info-soft: rgba(89, 158, 255, .15); /* —— 状态文字（叠卡片底实测均 ≥5.3:1，满足 AA 正文） —— */ --color-success-text: var(--success-500); --color-danger-text: var(--danger-600); /* #F26B6B 5.39:1（#F05252 仅 4.06:1，不够） */ --color-warning-text: var(--warning-500); --color-info-text: var(--info-500); /* —— 骨架屏 / 空态 / 加载 —— */ --color-skeleton-base: #1A2230; --color-skeleton-highlight: #232D3D; --color-empty-icon: #3A4452; /* 空态插图/大图标描边 */ --color-loading-mask: rgba(9, 12, 18, .72); /* 局部加载遮罩 */ /* —— 滚动条 —— */ --color-scrollbar-track: transparent; --color-scrollbar-thumb: #2A3341; --color-scrollbar-thumb-hover:#3A4552; /* —— 阴影（深色；弹窗实测 DROP_SHADOW 0 24 64 rgba(0,0,0,.45)） —— */ --shadow-card: 0 2px 8px rgba(0, 0, 0, .35); /* 卡片投影 */ --shadow-pop: 0 24px 64px rgba(0, 0, 0, .45); /* 弹窗/浮层投影（Figma 实测） */ } /* ===================================================================== Layer 2 · 语义 Token —— 浅色（预留：值已定义，未打磨验收） 只覆盖随主题变化的变量；字体/圆角/间距等主题无关变量见下方公共段。 ===================================================================== */ [data-theme="light"] { /* —— 背景色 —— */ --color-bg-page: #F2F5F9; /* 实测 */ --color-bg-deep: #ECF0F5; /* 推导 */ --color-bg-card: #FFFFFF; /* 实测 */ --color-bg-elevated: #FFFFFF; /* 实测 */ --color-bg-hover: #F5F7FA; /* 推导 */ --color-bg-mask: rgba(15, 23, 35, .45); /* 推导 */ /* —— 描边 / 分隔 —— */ --color-border: #DDE3EC; /* 实测 */ --color-border-strong: #C9D2DE; /* 推导 */ /* —— v1.3 新增语义（浅色预留值，未打磨） —— */ --color-bg-sidebar: #FFFFFF; /* 浅色侧栏 */ --color-bg-topbar: #FFFFFF; /* 浅色顶栏 */ --color-bg-container: #FFFFFF; /* 内容容器 */ --color-bg-workbench-card:#FFFFFF; /* 工作台卡片 */ --color-bg-table-header: #F5F7FA; /* 表头 */ --color-bg-row-alt: #F7F9FC; /* 斑马纹行 */ --color-bg-row-hover: #F0F3F8; /* 表格行悬停 */ --color-border-shell: #E5E9F0; /* 壳层分隔线 */ --color-text-body: #2B3342; /* 内容页正文 */ --color-text-nav: #4A5566; /* 侧栏导航项 */ --color-text-nav-group: #8A93A2; /* 侧栏分组标题 */ --color-success-soft-strong: rgba(31, 143, 102, .30); --color-accent-magenta: #CD45EF; --color-accent-indigo: #624FE8; /* —— 会员套餐主题语义（浅色预留）—— 套餐色本身是饱和色，深浅通用；浅底上 text 直接用 fill 色即可满足对比度。 */ --color-plan-basic: var(--plan-basic-500); --color-plan-basic-soft: rgba(255, 138, 0, .12); --color-plan-basic-text: #FF8A00; --color-plan-marketing: var(--plan-marketing-500); --color-plan-marketing-soft: rgba(255, 90, 79, .12); --color-plan-marketing-text: #FF5A4F; --color-plan-business: var(--plan-business-500); --color-plan-business-soft: rgba(140, 56, 255, .12); --color-plan-business-text: #8C38FF; /* —— 内容页 / 步骤流程（浅色预留值，未打磨）—— */ --color-text-content-title: #1A2233; --color-text-content-sub: #6B7480; --color-text-content-body: #2B3342; --color-text-content-value: #3A4453; --color-text-content-placeholder: #9AA3B0; --color-text-content-hint: #8A93A2; --color-field-bg: #F7F9FC; --color-field-border: #DDE3EC; /* —— 步骤条状态（浅色预留）—— */ --color-step-label-active: #1A2233; --color-step-label-idle: #8A93A2; --color-step-num-idle: #8A93A2; --color-step-progress: #C25A00; /* 浅底用主色深端保对比度 */ /* —— 音色行 / 行内动作按钮（浅色预留）—— */ --color-bg-voice-row-selected: #FFF4E8; --color-bg-voice-action: #EFF2F6; --color-bg-voice-action-picked: #FFF1E5; --color-text-voice-action: #4A5566; --color-text-voice-picked: #C25A00; /* —— 字幕与音乐（浅色预留）—— */ --color-bg-caption-sample: #1A2233; --color-text-block-title: #24303F; /* —— 生成中等待弹窗（浅色预留：白底 + 浅轨，橙色仍走主色深端） —— */ --color-surface-modal-deep: #FFFFFF; --color-border-modal-deep: #E2E8F0; --color-bg-progress-track: #EDF1F6; --color-bg-btn-quiet: #F1F4F8; --color-progress-accent: #C25A00; /* —— 视频创意官「AI 视频创作」卡内控件（浅色预留） —— */ --color-field-bg-deep: #F7F9FC; --color-field-border-deep: #DDE3EC; --color-surface-upload: #F7F9FC; --color-surface-warning-deep: #FFF4E8; --color-bg-segment: #FFFFFF; /* 分段控件未选中项底（浅色下用白，压灰轨道） */ /* —— 文本色 —— */ --color-text-primary: #1A2233; /* 推导：深蓝灰，不用纯黑 */ --color-text-secondary: #5A6472; /* 推导 */ --color-text-tertiary: #8A93A2; /* 推导 */ --color-text-disabled: #A3ABB8; /* 禁用文字（2.31:1，WCAG 1.4.3 对禁用控件不作要求） */ --color-text-inverse: #FFFFFF; /* —— 品牌语义（浅色主题 hover 变深） —— */ --color-brand-hover: var(--brand-600); --color-brand-soft: #FFF1E5; /* 取代旧渐变起点 #fff0e0 */ --color-brand-strong: var(--brand-700); /* 叠白底 4.88:1，浅色主题下正文用主色必须用它 */ /* —— 第4步弹窗暖色件（浅色对应值，随 --color-brand-soft 一族推导） —— */ --color-bg-warm-pick: #FFF1E5; --color-text-on-warm: #8A5423; /* —— 品牌填充态（与深色一致：hover/active 变深） —— */ --color-brand-fill-hover: var(--brand-600); --color-brand-fill-active: var(--brand-700); /* —— 交互态底色 —— */ --color-bg-active: #E4E9F0; --color-bg-selected: #FFF1E5; --color-bg-disabled: #F2F4F7; --color-bg-control: #EFF2F6; /* 控件默认底：图标按钮 / 分页按钮 */ /* —— 描边交互态 —— */ --color-border-hover: #B6C0CE; --color-border-disabled: #E6EAF0; /* —— 焦点环 —— */ --color-focus-ring: rgba(237, 108, 0, .35); /* —— 功能语义（浅底上用深端保对比度） —— */ --color-success: var(--success-700); --color-success-soft: rgba(31, 143, 102, .12); --color-danger-soft: rgba(242, 107, 107, .10); --color-warning-soft: rgba(246, 184, 74, .12); --color-info-soft: rgba(89, 158, 255, .10); /* —— 状态文字（浅底必须单独压深，实测均 ≥5.2:1 满足 AA 正文）—— 填充色 --color-warning #F6B84A 叠白底仅 1.77:1，禁止直接当文字色。 */ --color-success-text: #17724F; /* 5.91:1 */ --color-danger-text: #C33C10; /* 5.28:1 */ --color-warning-text: #8A6100; /* 5.54:1 */ --color-info-text: #0B6FBF; /* 5.20:1 */ /* —— 骨架屏 / 空态 / 加载 —— */ --color-skeleton-base: #EDF0F5; --color-skeleton-highlight: #F7F9FC; --color-empty-icon: #C6CDD8; --color-loading-mask: rgba(255, 255, 255, .72); /* —— 滚动条 —— */ --color-scrollbar-thumb: #C9D2DE; --color-scrollbar-thumb-hover:#B0BAC8; /* —— 阴影（浅色） —— */ --shadow-card: 0 2px 8px rgba(23, 35, 53, .06); --shadow-pop: 0 12px 32px rgba(23, 35, 53, .12); } /* ===================================================================== 主题无关 Token（深浅两套共用） ===================================================================== */ :root { /* —— 功能色：不随主题变化的「物理要求」色 —— */ /* 二维码/条形码承载面：必须纯白才能被识别，深色主题下也不得变暗， 故独立成语义 token，避免在业务 CSS 里硬编码 #fff（规范 R1）。 */ --color-surface-qr: #FFFFFF; /* —— 字体（已拍板：系统字体，不引入任何外部字体文件） —— */ --font-sans: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", "Noto Sans SC", sans-serif; --font-mono: "SFMono-Regular", Consolas, "Courier New", monospace; /* 预留 */ /* —— 字号（px，档位收敛自 Figma 实测频次） —— */ --fs-xs: 12px; /* 辅助说明/标签 */ --fs-sm: 13px; /* 次要正文/表格辅助 */ --fs-base: 14px; /* 正文/表格默认（最主流，1202 处） */ --fs-md: 15px; /* 卡片正文 */ --fs-lg: 16px; /* 卡片标题/小节标题 */ --fs-xl: 18px; /* 页内区块标题 */ --fs-2xl: 20px; /* 页面副标题/数值 */ --fs-3xl: 24px; /* 页面主标题/仪表盘数值 */ --fs-4xl: 28px; /* 弹窗主标题（会员升级弹窗实测） */ --fs-display: 32px; /* 工作台 Hero 主标题 / 弹窗关闭图标 */ --fs-5xl: 40px; /* 超大数字：套餐价格（会员升级弹窗实测） */ /* —— 字重（三档，禁用其他值） —— */ --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; /* —— 行高（预留） —— */ --lh-tight: 1.2; --lh-base: 1.5; --lh-loose: 1.7; /* —— 圆角（5 档，实测 10/14/16 已并入相邻档） —— */ --r-sm: 6px; /* 标签/角标/小控件 */ --r-md: 8px; /* 输入框/按钮/小卡片 */ --r-lg: 12px; /* 卡片/弹窗默认（官方基准圆角） */ --r-xl: 18px; /* 大弹窗/Hero 区 */ --r-full: 999px; /* 胶囊/圆形 */ /* —— 间距（官方基准 8px；变量数字 × 4 = px 值） —— */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; /* —— 控件尺寸 —— */ --btn-h: 44px; /* 关键/主操作按钮最小高度（设计师硬要求） */ --btn-h-sm: 36px; /* 次要按钮/表格内按钮（预留推导值） */ --btn-h-lg: 54px; /* 大号主 CTA：套餐卡「立即开通」（Figma 132:12936 实测） */ --input-h: 40px; /* 输入控件高度（预留推导值，layui 默认 38） */ /* —— 焦点环几何 —— ⚠ 禁止只写 outline:none；去掉浏览器默认焦点框必须用 box-shadow: 0 0 0 var(--focus-ring-w) var(--color-focus-ring) 补回。 */ --focus-ring-w: 2px; --focus-ring-offset: 2px; /* —— 骨架布局（新壳尺寸，Figma 实测） —— */ --layout-sidebar-w: 240px; /* 侧边栏宽（展开态） */ --layout-sidebar-w-mini: 64px; /* 侧边栏宽（折叠态） */ --layout-topbar-h: 72px; /* 顶栏高 */ --layout-brand-h: 64px; /* Figma Sidebar Brand：上6 + 内容32 + 下8 */ --layout-menu-item-h: 32px; /* Figma 一级菜单项高度 */ --layout-menu-pad-x: 8px; /* Figma 菜单项左右内边距 */ --layout-menu-outer-left: 24px; /* Figma 菜单项距侧栏左侧 */ --layout-menu-outer-right: 22px; /* Figma 菜单项距侧栏右侧 */ --layout-brand-pad-left: 32px; /* 菜单外侧24px + 链接内侧8px，与菜单图标对齐 */ --layout-menu-gap-y: 8px; /* 一级菜单项上下间距 */ --topbar-control-h: 38px; /* Figma 顶栏控件高度 */ --layout-user-h: 56px; /* 侧栏用户区高 */ --layout-content-max: 1440px; /* 内容区最大宽度（预留） */ --layout-sidebar-padding: 16px; /* Figma Sidebar 内边距 */ --layout-content-padding: 24px; /* Figma Content 内边距 */ --layout-content-gap: 20px; /* Figma Content 区块间距 */ --layout-main-w: 1200px; /* Figma Main 宽度 */ --layout-content-inner-w: 1152px; /* Main - 两侧 24px */ /* —— 工作台 Figma 节点 96:196 几何 —— */ --workbench-hero-h: 160px; --workbench-hero-main-w: 688px; --workbench-hero-side-w: 444px; --workbench-hero-gap: 20px; --workbench-quick-card-h: 114px; --workbench-quick-card-pad: 16px; --workbench-card-gap: 12px; --workbench-banner-h: 177px; --workbench-lower-h: 231px; --workbench-recent-thumb-h: 118px; --fs-workbench-balance: 30px; /* 页签条几何沿用 layuimini 现有 35px + 2px 边框，本期只改视觉不改几何， Token 化排在 P3，避免同时改动 7 处 calc 高度计算。 */ /* —— z-index 层级 —— ⚠ layui layer 弹层自 19891014 起；自研浮层一律低于该值， 除非明确要盖过 layui 弹窗（此时必须注释说明原因）。 */ --z-sticky: 100; /* 吸顶元素 */ --z-affix: 200; /* 固定侧栏内浮出控件 */ --z-dropdown: 1000; /* 下拉菜单/选择面板 */ --z-drawer: 5000; /* 抽屉 */ /* —— 动效（预留：后续统一 hover/展开过渡节奏） —— */ --transition-fast: 120ms; --transition-base: 200ms; --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1); }