/* ══════════════════════════════════════════════════════════════ Hyperkey 设计令牌 — 唯一真值 ══════════════════════════════════════════════════════════════ 本文件是全站唯一允许出现颜色字面量的地方。 设计系统文档、官网、两个控制台都从这里取值，不得自带副本。 为什么必须只有一份：2026-08-13 实测，tenant-console 硬编码 706 处、 ops-console 282 处、CSS 变量引用 0 次，两端与设计系统只共享一个颜色（白色）。 两端之间重合的 47 个色是互相复制粘贴的巧合，任何一端改色另一端都不会跟。 色值只要写下来超过一次，迟早不同。 改动纪律：改颜色只改本文件。任何源文件里新增颜色字面量， 都用 node check-tokens.js 拦下来。 ══════════════════════════════════════════════════════════════ */ /* 亮色档的语义实色于 2026-08-14 各下调一档：原值是按「压纯白」选的， 而 badge / tag 的底是同色 12% 浅染，底一变暗对比就掉到 3.3–4.4，全部不达 4.5。 下调后在自己的浅染底上达标（绿 4.50 / 橙 4.57 / 红 4.53 / 主色 4.56）， 色差肉眼几乎不可见。 取值按**最差底色**定：浅染是半透明的，压在灰页底 #F7F8FA 上比压白卡上更暗， 所以按灰页底算才保证到处都过（绿 4.50 / 橙 4.50 / 红 4.53 / 主色 4.51 / 紫 4.52）。 */ [data-theme="light"]{ /* body 与 content 拉近——大灰底衬托小窗口是桌面语汇，Web 应该是内容直接铺满 */ --bg-body:#F7F8FA; --bg-window:#FFFFFF; --bg-content:#FFFFFF; --glass-bg-hover:rgba(0,122,255,0.05); --glass-bg-active:rgba(0,0,0,0.07); --glass-border:rgba(0,0,0,0.08); --glass-border-hover:rgba(0,0,0,0.14); --card-bg:rgba(255,255,255,0.70); --card-border:rgba(0,0,0,0.06); --card-inner-bg:rgba(255,255,255,0.58); --solid-bg:#FFFFFF; /* 密集区用实色，不透明 */ --input-bg:rgba(255,255,255,0.78); --input-border:rgba(0,0,0,0.10); --input-border-hover:rgba(0,0,0,0.18); --input-bg-focus:#FFFFFF; --grouped-bg:rgba(255,255,255,0.62); --grouped-row-border:rgba(0,0,0,0.06); --bg-sidebar:rgba(231,234,238,0.72); --bg-toolbar:rgba(246,247,249,0.90); --bg-popover:rgba(255,255,255,0.92); --bg-selected:rgba(0,122,255,0.12); --bg-overlay:rgba(0,0,0,0.32); --border-focus:rgba(0,122,255,0.45); --text-primary:#1D1D1F; --text-secondary:#6E6E73; --text-tertiary:#A1A1A6; --text-on-accent:#fff; /* --accent 用于填充（按钮底/色带/进度条）；作文字必须用 --accent-text。 #007AFF 对白 4.02——达 UI 组件门槛 3.0，但不达正文 4.5。 */ --accent:#007AFF; --accent-text:#0066D6; --accent-hover:#0065D9; --accent-subtle:rgba(0,122,255,0.10); --accent-line:rgba(0,122,255,0.22); --green:#17782E; --green-subtle:rgba(26,136,52,0.12); --red:#C7291E; --red-subtle:rgba(210,43,32,0.10); /* 红的文字档：亮档与填充同值；暗档单独提亮——照 accent/accent-text 的先例拆。 实算依据：#FF453A 压在暗档淡红底上只有 4.34（弹窗底 3.43），过不了正文 4.5； 橙绿两对都在 5+ 不拆。#FF857C 是最小达标值（普通底 5.76 / 弹窗底 4.54）。 填充（圆点/pips/边框）仍用 --red，图形门槛 3:1 本来就过。 */ --red-text:#C7291E; --code-err:#C0392B; --av-more-bg:#6E6E73; --orange:#975A00;--orange-subtle:rgba(171,102,0,0.12); --purple:#794ECC;--purple-subtle:rgba(123,79,207,0.11); --shadow-xs:0 1px 2px rgba(0,0,0,0.05); --shadow-md:0 4px 20px rgba(0,0,0,0.08); --shadow-lg:0 8px 40px rgba(0,0,0,0.11); --shadow-xl:0 20px 70px rgba(0,0,0,0.15); --toggle-off-bg:rgba(0,0,0,0.14); --toggle-knob-shadow:0 1px 4px rgba(0,0,0,0.16); --btn-border-subtle:rgba(0,0,0,0.09); --skel-a:rgba(0,0,0,0.06); --skel-b:rgba(0,0,0,0.17); /* 图表分类色板：折线/柱/环的多序列着色，只表示「第几类」。语义色（绿=好/红=坏） 不能拿来做分类——「第三根柱子是红的」会被读成告警，故单列一套。 取值沿 accent 起手依次拉开色相，与本档语义实色同值复用（1=accent 2=purple 3=green 4=orange 6=red），5 为新增青档补足六类。 图形类按 3:1 门槛压 --solid-bg #FFFFFF 实算：#007AFF 4.02 / #794ECC 5.56 / #17782E 5.58 / #975A00 5.56 / #0E7490 5.36 / #C7291E 5.58，全部达标。 */ --chart-1:#007AFF; --chart-2:#794ECC; --chart-3:#17782E; --chart-4:#975A00; --chart-5:#0E7490; --chart-6:#C7291E; } [data-theme="dark"]{ --bg-body:#0C0C0D; --bg-window:#1A1A1C; --bg-content:#1F1F22; --glass-bg-hover:rgba(255,255,255,0.09); --glass-bg-active:rgba(255,255,255,0.13); --glass-border:rgba(255,255,255,0.09); --glass-border-hover:rgba(255,255,255,0.16); --card-bg:rgba(255,255,255,0.045); --card-border:rgba(255,255,255,0.07); --card-inner-bg:rgba(255,255,255,0.055); --solid-bg:#1C1C1F; --input-bg:rgba(255,255,255,0.07); --input-border:rgba(255,255,255,0.11); --input-border-hover:rgba(255,255,255,0.18); --input-bg-focus:rgba(255,255,255,0.11); --grouped-bg:rgba(255,255,255,0.045); --grouped-row-border:rgba(255,255,255,0.05); --bg-sidebar:rgba(20,20,22,0.85); --bg-toolbar:rgba(28,28,31,0.92); --bg-popover:rgba(48,48,52,0.94); --bg-selected:rgba(0,122,255,0.24); --bg-overlay:rgba(0,0,0,0.55); --border-focus:rgba(0,122,255,0.6); --text-primary:rgba(255,255,255,0.92); --text-secondary:rgba(255,255,255,0.52); --text-tertiary:rgba(255,255,255,0.30); --text-on-accent:#fff; /* 暗底上 #007AFF 作文字只有 4.09，故 --accent-text 用提亮档 */ --accent:#007AFF; --accent-text:#2E93FF; --accent-hover:#2E93FF; --accent-subtle:rgba(0,122,255,0.16); --accent-line:rgba(0,122,255,0.34); --green:#30D158; --green-subtle:rgba(48,209,88,0.14); --red:#FF453A; --red-subtle:rgba(255,69,58,0.13); --red-text:#FF857C; --code-err:#FF8A80; --av-more-bg:#5C5C61; --orange:#FF9F0A;--orange-subtle:rgba(255,159,10,0.13); --purple:#BF5AF2;--purple-subtle:rgba(191,90,242,0.14); --shadow-xs:0 1px 2px rgba(0,0,0,0.3); --shadow-md:0 4px 20px rgba(0,0,0,0.35); --shadow-lg:0 8px 40px rgba(0,0,0,0.45); --shadow-xl:0 20px 70px rgba(0,0,0,0.55); --toggle-off-bg:rgba(255,255,255,0.17); --toggle-knob-shadow:0 2px 6px rgba(0,0,0,0.35); --btn-border-subtle:rgba(255,255,255,0.07); --skel-a:rgba(255,255,255,0.06); --skel-b:rgba(255,255,255,0.19); /* 图表分类色板暗档：亮档同款直接压 --solid-bg #1C1C1F 只有 3.05–3.17，贴着 3:1 门槛没有余量，故照 purple/green/orange/red 暗档先例取各自的提亮档。 实算（压 #1C1C1F）：#007AFF 4.23 / #BF5AF2 4.82 / #30D158 8.41 / #FF9F0A 8.27 / #32ADE6 6.68 / #FF453A 4.99，全部过 3:1。 1 不提亮：与 accent 填充先例一致（4.23 本就有余量，选中块/进度条同色）。 */ --chart-1:#007AFF; --chart-2:#BF5AF2; --chart-3:#30D158; --chart-4:#FF9F0A; --chart-5:#32ADE6; --chart-6:#FF453A; } :root{ /* 营销页反色块的底色。原先只作为 var(--ink-900,#0B0B0C) 的兜底值散落各处， 那等于没有定义——收进这里，兜底值随之取消。 */ --ink-900:#0B0B0C; /* 圆角整体收一档——20px 的大圆角是桌面 App 语汇，Web 控制台用 8–12 更准 */ --radius-2xs:2px; --radius-xs:4px; --radius-sm:6px; --radius-md:8px; --radius-lg:10px; --radius-xl:12px; --radius-2xl:14px; --radius-full:9999px; --fs-10:10px; --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-15:15px; --fs-17:17px; --fs-20:20px; --fs-24:24px; --fs-32:32px; --fs-44:44px; --fs-56:56px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px; --sp-20:80px; --font-sans:-apple-system,"SF Pro Display","SF Pro",BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif; --font-mono:"SF Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --dur:0.15s; --ease:cubic-bezier(.2,0,.2,1); /* ── 断点 ────────────────────────────────────────────────────── 值直接对齐 Ant Design，不自定义。两条理由： ① 序列本身合理——480/576/768/992/1200/1600 是业界最常用的一套， 自定义只会多出一份需要记忆的知识。 ② 控制台的复杂件（Table 的 scroll、Drawer 的宽度、Select 的下拉定位） 走 antd，它们内部吃的就是下面这套；CSS 另立一套（这里原本是 900px） 会出现「CSS 已塌、antd 组件还没塌」的错位区间——900–992 恰好是 笔记本最常见的窗口宽度。 （2026-08-17 校：此前注释写「控制台用 antd 的 Row/Col 与 useBreakpoint」， 实查两端源码并无使用，属未经核实的推断。复杂件 antd 化后 ① 是主要理由， ② 随 Table/Drawer/Select 的接入成立。） 真值来自 antd 自己：node -e 'require("antd").theme.getDesignToken({})' screenXS 480 / SM 576 / MD 768 / LG 992 / XL 1200 / XXL 1600 max 档取整数减一，与 antd responsiveObserver 的写法一致（xs 是 max-width:575px）。 ⚠️ 下面这些变量**不能**写进 @media 条件——CSS 变量在媒体查询里不解析， `@media (max-width: var(--bp-lg))` 会被整条丢弃且不报错。 所以 CSS 里仍写字面量，这里登记的作用是： ① 给 JS 读（getComputedStyle(root).getPropertyValue("--bp-lg")） ② 给校验脚本比对——CSS 里出现的断点字面量必须在这张表里 */ --bp-xs:480px; --bp-sm:576px; --bp-md:768px; --bp-lg:992px; --bp-xl:1200px; --bp-xxl:1600px; --bp-xs-max:479px; --bp-sm-max:575px; --bp-md-max:767px; --bp-lg-max:991px; --bp-xl-max:1199px; --bp-xxl-max:1599px; /* ── 第三方品牌色 ──────────────────────────────────────────── 外部品牌标识色（供应商首字标等），不是 Hyperkey 的色：真值在对方的 VI， 随对方品牌更新而更新，不参与主题换档——换了主题它也还得是那个品牌， 所以放 :root 不放亮暗档。不做对比度承诺，也不许拿去做我们自己的 UI。 */ --brand-anthropic:#c96442; --brand-openai:#10a37f; --brand-bailian:#615ced; --brand-google:#4285f4; --brand-deepseek:#4d6bfe; --brand-kimi:#131217; --brand-zhipu:#3859ff; /* 下面三个的取值取自各自官方图标资源里的 fill，不是取色器吸的 */ --brand-minimax:#e73562; --brand-meta:#0467df; --brand-mistral:#fa520f; } /* ── 移动端字阶：小号段整体上移一档 ───────────────────────────── 手机上 10–13px 的注记/表格/标签实读偏小（观看距离更近但物理字高更小）， 把字阶的小号端在 ≤767 抬一档，正文（15+）与标题不动。 改在令牌层：所有消费方一次生效，组件里不用逐处写移动字号。 */ @media (max-width: 767px){ :root{ --fs-10:12px; --fs-11:13px; --fs-12:14px; --fs-13:15px; } }