/* @layer ui — 设计令牌。整个产品的地基。 * * 设计语言：包豪斯的几何与克制 × 苹果的材质与留白。 * 明确排除 Material：不用投影厚度堆层级、不用高饱和主色铺满、不用涟漪。 * * ================================================================ * 白，但要高级 —— 五条不可退让的原则（改任何颜色前先读完） * ================================================================ * * 1. 【地不是白的，纸才是白的】 * 页面底 --bg 是这套浅色里**最暗**的一级（#F4F5F8），内容面 --surface 才向 * 纯白爬（#FDFDFE），纯白 #ffffff 永远留空、谁都不占。 * 这是整套系统的发动机：把 #fff 当页面底，就没有比它更亮的东西了， * 抬升只能靠投影 —— 那正好是 Material 的做法，也正好是"公模感"的来源。 * 把底压到 96.5%，抬升就变成了**光**：一张纸被照亮，而不是一张纸被垫高。 * 参照系是 iOS 分组列表（#F2F2F7 的底 + 白卡），不是 Bootstrap 的白页。 * * 2. 【白必须有倾向，而且倾向来自品牌】 * 中性灰阶（#fff/#f9f9f9/#f0f0f0）没有身份，那是"没人调过色"的信号。 * 这里所有的面都长在 --paper-h 这一个色相上，饱和度极低（4~8/255 的色偏）。 * 关键在于：**纸的色相跟着强调色走**（见色板表）。所以群青主题的白是冷的、 * 朱红主题的白是暖的 —— 五套主题各有一种白，但结构完全一样。 * 换色板换的是情绪，不是软件。 * * 3. 【层级 = 等距的明度梯，不是投影的厚度】 * sunken #EAECF1 < hover #EFF0F5 < bg #F4F5F8 < surface-2 #F9F9FB < surface #FDFDFE * 五级，每级差 ~5/255。单独看每一级都"是白的"，叠在一起就有了秩序。 * 面上再加一道极小的上下渐变（1% 明度行程，约 4/255）—— * 看不出是渐变，但能感觉到光是从上面来的。这是"材质"和"色块"的分界线。 * * 4. 【发丝线是白色系统里唯一的排版工具，所以要分三级且倍差清晰】 * hairline 0.055 / border 0.105 / border-strong 0.20 —— 约 1:2:4。 * 倍差比绝对值更要紧：三级若挤在 1.5 倍以内，层级就糊成一团（"不高级"）， * 最重的一级若超过 0.25，界面就变成线框图（"脏"）。 * 线不用纯黑 alpha，用纸的色相压暗后再加 alpha —— 纯黑压在带色偏的白上会发浊。 * * 5. 【投影只表达"接触"，不表达"高度"；高度交给明度和边缘高光】 * 能被认出来是影子的影子就已经俗了。浅色下环境影不超过 0.10， * 模糊半径要长（36~72px）—— 长而淡是室内光，短而重是 Material。 * 真正让方块变成物体的是 --shadow-inset：顶边 1px 的白色内高光。 * * ================================================================ * 主题 = 色板(data-palette) × 明暗(data-theme)，两维正交 * ================================================================ * 颜色型令牌用原生 light-dark() 一处定义两套，浅深不可能再漂移； * 数值型令牌（--accent-l 等分量，组件里被直接 var() 引用）无法进 light-dark()， * 所以文件末尾保留了四条极短的深色规则，只覆盖数字。 * light-dark() 由 :root 的 color-scheme 驱动，data-theme 只需切 color-scheme。 */ :root { color-scheme: light dark; /* ============ 纸：色相跟着品牌走，饱和度低到只剩倾向 ============ */ --paper-h: 228; /* 纸的色相，色板覆盖 */ --paper-s: 24%; /* 纸的色偏强度，色板覆盖 */ /* 明度梯：等距五级。浅色下 bg 最暗、surface 最亮；深色下方向一致。 浅色的 S 随明度上升而放大，是为了在接近白点时补回被压缩的色度 —— 否则越亮的面越发灰，整套白就散了。 */ --bg: light-dark(hsl(var(--paper-h) var(--paper-s) 96.5%), hsl(var(--paper-h) 12% 8.2%)); --surface: light-dark(hsl(var(--paper-h) calc(var(--paper-s) * 1.6) 99.4%), hsl(var(--paper-h) 11% 12.4%)); --surface-2: light-dark(hsl(var(--paper-h) calc(var(--paper-s) * 1.15) 98%), hsl(var(--paper-h) 10% 15.6%)); --surface-hover: light-dark(hsl(var(--paper-h) calc(var(--paper-s) * 0.92) 94.8%), hsl(var(--paper-h) 10% 19.5%)); --surface-sunken: light-dark(hsl(var(--paper-h) calc(var(--paper-s) * 0.85) 93.2%), hsl(var(--paper-h) 13% 5.8%)); /* 极小的上下渐变：1% 明度行程。看不见，但摸得到。幅度大了就俗。 */ --surface-grad: linear-gradient(180deg, light-dark(hsl(var(--paper-h) calc(var(--paper-s) * 1.7) 99.7%), hsl(var(--paper-h) 11% 13.4%)) 0%, light-dark(hsl(var(--paper-h) calc(var(--paper-s) * 1.3) 98.6%), hsl(var(--paper-h) 11% 11.6%)) 100%); /* 半透明的抬升面：铺在任何底上都成立（弹层、按钮、浮起的卡） */ --raised-grad: linear-gradient(180deg, light-dark(rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.085)) 0%, light-dark(rgba(255, 255, 255, 0.70), rgba(255, 255, 255, 0.030)) 100%); /* 凹陷：上暗下亮，反过来的光 = 一口井 */ --sunken-grad: linear-gradient(180deg, light-dark(hsl(var(--paper-h) calc(var(--paper-s) * 0.9) 92.6%), hsl(var(--paper-h) 13% 5.2%)) 0%, light-dark(hsl(var(--paper-h) calc(var(--paper-s) * 0.95) 95%), hsl(var(--paper-h) 12% 7.4%)) 100%); /* ============ 线：三级，倍差 ~2×，用纸的色相而不是纯黑 ============ hairline 行与行之间的内部分隔，只是一次明度变化，不是"一条线" border 一个真实物体的边（卡、输入框、面板） border-strong 可交互物体的边（按钮、选中态、聚焦） */ --hairline: light-dark(hsl(var(--paper-h) 18% 32% / 0.055), hsl(var(--paper-h) 25% 82% / 0.085)); --border: light-dark(hsl(var(--paper-h) 18% 30% / 0.105), hsl(var(--paper-h) 22% 84% / 0.14)); --border-strong: light-dark(hsl(var(--paper-h) 20% 28% / 0.20), hsl(var(--paper-h) 20% 86% / 0.26)); --decorative-faint: light-dark(hsl(var(--paper-h) 18% 32% / 0.038), hsl(var(--paper-h) 25% 82% / 0.055)); /* ============ 墨：三级，近黑但有蓝魂，不用纯黑（纯黑压在带色偏的白上会硬） ============ 面的梯子讲"等距"，墨的梯子讲**两件事同时成立**： 1. 三级之间读得出层次 —— 相邻两级差 ~10 个 L*（面的梯子每级才 1.4）； 2. 三级**全部**过 WCAG AA 4.5:1 —— 包括第三级。 第二条不是可选项：全仓 122 处 --text-faint 里绝大多数是 10.5–13px 的**信息性** 文字（时间、计数、分组标签、空态、提示、占位符），不是装饰。旧值第三级只有 3.75:1（松绿色板压在槽上更低到 2.93），第二级在松绿色板下也只有 4.14 —— 也就是说"退到后面去"那两级其实是"看不清"。 取值是搜出来的，不是拍的：**五套色板 × 五级面 = 25 个组合，取最差的那一个** ≥ 4.5。为什么必须逐色板搜——HSL 的 L 不是感知明度，同一个 L=40% 在群青(H228) 是 41.0 L*、在松绿(H170) 是 45.3 L*，差了 4.3 个 L*，正好够把一个组合推下线。 实测最差组合：muted 6.56（松绿/槽）、faint 4.62（松绿/槽）； 深色最差 muted 7.31、faint 4.88（都在 --surface-hover 上，深色里最亮的面）。 层级没塌：ΔL* 浅色 21.7 / 9.4，深色 17.0 / 13.7（旧值是 32.3 / 10.4）—— 二三级之间那一步几乎原样保留，整体只是**整体压深了一档**。 */ --text: light-dark(hsl(var(--paper-h) 22% 12%), hsl(var(--paper-h) 18% 95%)); --text-muted: light-dark(hsl(var(--paper-h) 11% 31%), hsl(var(--paper-h) 9% 77%)); --text-faint: light-dark(hsl(var(--paper-h) 9% 40%), hsl(var(--paper-h) 8% 63%)); /* ============ 强调：颜料，不是荧光 ============ 群青 #2743BE —— 比通用 SaaS 蓝（#007AFF / #2563EB）更深、更偏紫、饱和更低。 这是"矿物颜料"和"屏幕蓝"的区别，也是最容易露出公模感的一个数字。 */ --accent-h: 229; --accent-s: 66%; --accent-l: 45%; --accent: hsl(var(--accent-h) var(--accent-s) var(--accent-l)); --accent-hover: hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) - 6%)); --accent-soft: light-dark(hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.10), hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.20)); --accent-line: light-dark(hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.24), hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.38)); --accent-text: light-dark(#fff, hsl(var(--accent-h) 45% 10%)); /* 强调色有两个工作：**面**（填充按钮、开关、选中底）和**字**。同一个明度不可能两样都对。 深色下 --accent 的 64% 是为"面"定的（再暗填充按钮就成一块黑）；当字用时它压在 --accent-soft 的选中底上只有 3.13–3.85:1，压在纸上也只有 4.06–4.44:1，全部不过 AA。 把 --accent 提亮到能当字用需要 76%+，那样填充按钮会淡成一枚荧光贴纸——违背"颜料， 不是荧光"。所以分成两支：面用 --accent，字用 --accent-ink。 浅色下压深 5%：--accent 本身压在纸上是够的（6.75–7.85:1），但它当字的时候 多半正落在 --accent-soft 的选中底上（标签、芯片、计划卡的眉题、选中的日期分段）， 那一层把地往强调色的方向拉了 10%，朱红色板在最深的槽上于是只剩 3.99:1。 压深 5% 之后，五套色板 × 五级面 × 「纸 / 淡强调底」两种地 = 50 个组合，最差 4.79:1。 深色则要**提亮**：64% 是为"面"定的，当字最差只有 3.13:1； 提到 78% 并把饱和留 0.8 倍（纯提亮会显得发白，降一点饱和才像"同一支颜料的淡色"）， 最差 5.10:1。 */ --accent-ink: light-dark(hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) - 5%)), hsl(var(--accent-h) calc(var(--accent-s) * 0.8) 78%)); /* 同色相内做明度位移，不跨色相 —— 跨色相就有"AI 生成图"的味道。 两端的行程必须分主题写，因为**压在渐变上的字在两套主题里是相反的**： 浅色下 --accent-text 是白的，最亮的那一端最危险；深色下它是近黑的，最暗的那一端最危险。 行程固定成 +8/−5 时实测（白字 / 近黑字压在该端点上，五套色板取最差）： 浅色 0% 端 L+8 → 3.99:1（赭石）、4.13（松绿）、4.14（朱红）—— 三套不过 AA； 深色 100% 端 L−5 → 3.54:1（群青）—— 不过 AA。 这两处都不是边角：--accent-grad 铺在**用户自己发的每一条消息**上 （.chat-message.is-user .chat-bubble，13.5px 正文），首行正落在 0% 端、末行落在 100% 端。 所以两端各自往"字的反方向"收： 浅色 +4 / −5 → 最差 4.72（朱红 0% 端）、白字在暗端只会更好； 深色 +8 / +1 → 最差 4.73（群青 100% 端），54% 的中点 4.94。 行程收窄之后仍然看得出是一道光，只是不再冲到"字读不出来"的那一格。 （brand.css 的色点预览就地重算了同一道渐变——自定义属性在声明处就被替换， 子元素改 --accent-l 不会重算——改这里必须同步改那边。） */ --accent-grad: linear-gradient(168deg, light-dark(hsl(var(--accent-h) calc(var(--accent-s) - 8%) calc(var(--accent-l) + 4%)), hsl(var(--accent-h) calc(var(--accent-s) - 8%) calc(var(--accent-l) + 8%))) 0%, hsl(var(--accent-h) var(--accent-s) var(--accent-l)) 54%, light-dark(hsl(calc(var(--accent-h) + 5) var(--accent-s) calc(var(--accent-l) - 5%)), hsl(calc(var(--accent-h) + 5) var(--accent-s) calc(var(--accent-l) + 1%))) 100%); /* 主按钮的落地感：一道接触影 + 一道很淡的同色环境影。不要更多。 */ --accent-glow: 0 1px 1px light-dark(hsl(var(--accent-h) 60% 30% / 0.20), rgba(0, 0, 0, 0.42)), 0 2px 8px light-dark(hsl(var(--accent-h) 60% 42% / 0.16), hsl(var(--accent-h) 60% 45% / 0.26)); /* ============ 包豪斯原色：日历分类与几何点缀 ============ 浅色一版是压过明度的颜料（黄尤其要压，纯黄在白底上必刺眼）； 深色一版提亮降饱和。 */ --bauhaus-red: light-dark(#c8382a, #ff6f5e); --bauhaus-blue: light-dark(#1b5fbe, #6e93ff); --bauhaus-yellow: light-dark(#c08812, #f0be4a); --danger: light-dark(#c3372a, #ff7a6b); --success: light-dark(#207552, #46c48c); /* 浅色的琥珀原为 #b4790a：当字用时最差只有 3.13:1（.chat-plan__warning / .ai__status.is-unverified / 月视图的回访条都在拿它当字）。压到 #8d5e07 后最差 4.75:1。 它同时还当圆点、描边、8% 的底——那三种用法只会因为更深而更清楚， 所以这里不需要像强调色那样再分出一支 -ink，直接把令牌本身压对。 深色一侧 #e8ae45 当字最差 6.72:1，不动。 */ --warning: light-dark(#8d5e07, #e8ae45); --today: light-dark(#c8382a, #ff6f5e); /* 状态色只负责语义，状态面仍然是一张纸。所有端统一用这三件套，避免一处整块 涂红、一处透明红、一处只有红字，造成同一个失败状态三种音量。 */ --danger-surface: color-mix(in srgb, var(--danger) 8%, var(--surface)); --danger-line: color-mix(in srgb, var(--danger) 30%, var(--border)); --danger-ink: var(--danger); --warning-surface: color-mix(in srgb, var(--warning) 9%, var(--surface)); --warning-line: color-mix(in srgb, var(--warning) 30%, var(--border)); --warning-ink: var(--warning); --success-surface: color-mix(in srgb, var(--success) 9%, var(--surface)); --success-line: color-mix(in srgb, var(--success) 28%, var(--border)); --success-ink: var(--success); /* 周末不是"灰一块"，是纸更深一点 —— 用纸的色相，别用中性灰 */ --weekend-tint: light-dark(hsl(var(--paper-h) 30% 38% / 0.045), hsl(var(--paper-h) 30% 80% / 0.032)); /* ============ 影：只表达接触，不表达高度 ============ 浅色下环境影 ≤ 0.10，模糊半径要长。长而淡 = 室内光；短而重 = Material。 */ --shadow-sm: 0 1px 1.5px light-dark(hsl(var(--paper-h) 24% 16% / 0.055), rgba(0, 0, 0, 0.5)); --shadow-md: 0 1px 2px light-dark(hsl(var(--paper-h) 24% 16% / 0.05), rgba(0, 0, 0, 0.45)), 0 4px 12px light-dark(hsl(var(--paper-h) 24% 16% / 0.055), rgba(0, 0, 0, 0.5)); --shadow-lg: 0 1px 3px light-dark(hsl(var(--paper-h) 24% 16% / 0.055), rgba(0, 0, 0, 0.5)), 0 10px 24px light-dark(hsl(var(--paper-h) 24% 16% / 0.07), rgba(0, 0, 0, 0.55)), 0 36px 72px light-dark(hsl(var(--paper-h) 24% 16% / 0.10), rgba(0, 0, 0, 0.6)); /* 顶边内高光：白色系统里把矩形变成物体的那一笔，成本为零，效果最大 */ --shadow-inset: inset 0 1px 0 light-dark(hsl(0 0% 100% / 0.85), hsl(0 0% 100% / 0.055)); /* ============ 圆角：偏小 = 精密仪器；偏大 = 亲切模板。这里选前者 ============ */ --radius-xs: 5px; --radius-sm: 8px; --radius: 11px; --radius-lg: 16px; --radius-xl: 22px; --radius-pill: 999px; /* 日历色标（chip 的点、日历列表的方块、编辑器的色点、详情卡的记号……）是一个 **家族**：尺寸 6~13px 不等，形状必须一样。此前八处各写各的绝对值 （2 / 2.5 / 3 / 3.5px，还有两处干脆写成 50% 的圆），一眼就是"几个人各画了一遍"。 圆角要跟着尺寸走，所以这一个用百分比——它是唯一一个不该是绝对值的圆角。 UI_PATTERNS §4 把「日程 = 实心方块记号」定成三个面的共同凭据，这里是它的形状来源。 （待办的空心方是另一个记号，圆角 2px 写死在 linkage.css，那是与 SwiftUI 小组件 对齐的契约值，不走这个令牌。） */ --mark-radius: 30%; /* ============ 字体与字阶 ============ */ --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", system-ui, sans-serif; --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", system-ui, sans-serif; --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace; /* 密集型生产力界面的小号端必须挤（11/12/13/13.5 是四个角色，不是四个尺寸）， 对比全部押在大号端：body → hero 拉到 3.4×，顶部三级按 ~1.5 的模数递进。 一屏只该有一个大字，但它得真的大 —— 这是"有设计感"最省力的一招。 */ --fs-micro: 11px; --fs-tiny: 12px; --fs-small: 13px; --fs-body: 13.5px; --fs-lead: 16px; --fs-title: 21px; --fs-display: 32px; --fs-hero: 46px; /* 字距：大字收紧、小字放开。这是苹果排版的核心手法，也是大字"像排过版"的原因。 */ --tracking-hero: -0.035em; --tracking-title: -0.021em; --tracking-body: -0.006em; /* 11px 的小字**不做大写**时也要放开一点，否则在 --fs-micro 上字挤成一团。 此前这一档没有令牌，于是同一个角色写出了 0.01 / 0.012 / 0.02em 三个值 （侧栏概览、桌面卡副行、层级分段、月视图徽标、日程视图的月名……）。 0.02em 是其中的多数派，收成一个名字。 */ --tracking-micro: 0.02em; --tracking-caps: 0.085em; /* ============ 动效：弹性但克制（回弹 18%，不是 35% —— 35% 是玩具） ============ */ --ease: cubic-bezier(0.32, 0.72, 0, 1); --ease-spring: cubic-bezier(0.34, 1.18, 0.64, 1); /* 四档时长。--dur-press 是"按下去"的那一下：它必须比 --dur-fast 还短， 否则手指抬起来的时候方块还在回弹。全仓 12 处 transform 都用它， 此前逐处写死 0.08s，还夹着 0.12 / 0.15 / 0.16 三个没有出处的数。 */ --dur-press: 0.08s; --dur-fast: 0.14s; --dur: 0.22s; --dur-slow: 0.36s; /* ============ 尺寸 ============ */ --header-h: 56px; /* 1200px 视口仍是原来的 248px；窗口缩放时连续跟随，在过窄/过宽处才触顶。 固定 248px 会让宽窗侧栏显得过细，也会让窄窗里的七列迷你月历被滚动条裁掉。 */ --sidebar-w: clamp(224px, 20.666vw, 320px); --reading-w: 42em; --touch-target: 44px; /* 软键盘从视口底部吃掉的高度。iOS 弹键盘时**不缩小** window.innerHeight， 而是把可视视口（visualViewport）整体顶上去 —— CSS 这边看不见任何变化， 钉在底部的东西（撰写卡、三面栏、提示条、弹层）会原样留在键盘底下。 所以它只能由 JS 量出来再写回来：app/ui/shell.js 与 app/ui/widget.js 各有一段 visualViewport 监听，把 innerHeight − (vv.height + vv.offsetTop) 写到这里。 令牌放在 themes.css 而不是 layout.css，因为 index.html 与 widget.html 都要用它， 而两页只共享 themes.css / brand.css 这两张表。 默认 0：桌面、不支持 visualViewport 的浏览器、以及键盘收起时， 所有读它的地方 calc 出来的结果与改动前**逐字节相同**。 */ --kb: 0px; --hour-h: 50px; --bar-h: 21px; --chip-h: 21px; --gap: 10px; } :root[data-density='compact'] { --hour-h: 39px; --bar-h: 18px; --chip-h: 18px; --gap: 6px; --header-h: 52px; --fs-body: 13px; --fs-hero: 38px; --fs-display: 27px; --fs-title: 19px; } /* ================================================================ 色板：换强调色，纸的色相跟着强调色走（约 1/10 的色度）。 所以每套色板都有自己的一种白 —— 而结构、层级、线的倍差完全不变。 五套主题是同一个产品的五种情绪，不是五个软件。 ================================================================ */ /* 默认（不写 data-palette）= 群青 ultramarine：H229 强调 / H228 冷白 #F4F5F8 */ /* 五套色板的 --accent-l 不是随手挑的深浅，它同时决定两件事，两件都要过线： · 主按钮：白字压在这块色上（--accent-text 浅色一侧是 #fff） ≥ 4.5:1 · 当字用：这块色压在自己那套纸的五级面上（--accent-ink） ≥ 4.5:1 实测五套里有两套不过： 赭石 42% —— 白字 3.81:1（"新建日程""关闭"这些主按钮上的字），当字 3.32:1 朱红 47% —— 白字 4.99 过，当字 4.26 不过（压在最深的槽上） 赭石压到 34%（5.42 / 4.72）、朱红压到 45%（5.35 / 4.56）。 压深也更合语言：令牌表原则里写着"黄尤其要压，纯黄在白底上必刺眼"， 赭石本来就该是一块土颜料，不是屏幕上的橙。 松绿 32%（5.53 / 4.81）、群青 45%（7.98 / 6.75）、墨 24%（11.49 / 9.81）不动。 */ :root[data-palette='vermilion'] { --accent-h: 10; --accent-s: 62%; --accent-l: 45%; --paper-h: 20; --paper-s: 26%; } :root[data-palette='ochre'] { --accent-h: 34; --accent-s: 68%; --accent-l: 34%; --paper-h: 38; --paper-s: 22%; } :root[data-palette='pine'] { --accent-h: 165; --accent-s: 42%; --accent-l: 32%; --paper-h: 170; --paper-s: 14%; } :root[data-palette='ink'] { --accent-h: 228; --accent-s: 12%; --accent-l: 24%; --paper-h: 225; --paper-s: 9%; } /* ================================================================ 明暗维度。 颜色已由上面的 light-dark() 一并定义好，这里只做两件事： 1. 把 color-scheme 切过去（light-dark() 的开关） 2. 覆盖那几个**数值型**分量 —— 组件里有 31 处直接 var(--accent-h/s/l) 自己合成颜色，数值进不了 light-dark()，只能这样。 顺序要求：色板在前、深色在后，同特异度时后者胜。 ================================================================ */ :root[data-theme='light'] { color-scheme: light; } :root[data-theme='dark'] { color-scheme: dark; } /* 都限定 screen：打印时纸永远是白的，深色的数值不该跟着上纸。 颜色型令牌由 base.css 的 `@media print { :root { color-scheme: light !important } }` 一次翻回浅色一侧；数值型的进不了 light-dark()，只能靠这里的 screen 把它们关在屏幕上。 不这么做，跟随系统深色的用户打印出来的强调色是 64% 的淡群青压在白纸上。 */ @media screen and (prefers-color-scheme: dark) { /* 暗底上强调色必须提亮，否则填充按钮会变成一块黑。饱和度保留色板自己的值， 这样五套色板在深色下仍然各有性格（旧版一刀切成 78% 把差异抹平了）。 */ :root:not([data-theme='light']) { --accent-l: 64%; } /* 墨色板在暗色下需要一个能看见的强调色，不能真用近黑 */ :root[data-palette='ink']:not([data-theme='light']) { --accent-s: 16%; --accent-l: 72%; } } @media screen { :root[data-theme='dark'] { --accent-l: 64%; } :root[data-theme='dark'][data-palette='ink'] { --accent-s: 16%; --accent-l: 72%; } }