dsh-theme-palette 1.8.1 → 1.8.3

package/CHANGELOG.md

@@ -4,6 +4,46 @@
 
 ## 版本一览
 
+### 1.8.3
+补齐 token 覆盖缺口（按宿主 118 个 alias/specific 做传递闭包统计：76% 跟随；余下 28 个逐项判断该不该跟）：
+
+- **深色菜单**：`--dsw-specific-menu` 宿主带字面量兜底（深 `#303136f0`），只改 `menu-surface-fill` 不够，
+  深色菜单仍是冷灰 → 现在按配色给（浅 50/深 850，alpha 0.94）
+- **品牌新色**：`--dsw-alias-brand-primary-new-…` 浅色写死 `#4176e6` 宿主蓝 → 两模式都归到强调色
+- **文件 diff 温度调和**：6 个 `file-diff-*` 保留绿/红语义，色相往配色拉 16–22°、压低饱和；
+  断言「新增仍是绿色系、删除仍是红色系」+ 正文对 diff 底 ≥4.5
+- **对比度矩阵加菜单面**：半透明面按画布合成后给出参考值，标 `※`（不计硬门），
+  UI 与 `palette-dev` 共用同一份 `CONTRAST_SURFACES`（含 token 面）
+- **诊断导出**：矩阵区新增「复制诊断」，输出 settings + 对比度矩阵 JSON，便于提 issue
+- **forced-colors**：核实我们改的都是 UA 强制色属性，系统高对比模式会自动接管，
+  因此**不加** `forced-color-adjust: none` 对抗（代码内已注明理由）
+- 契约测试补 `--dsw-specific-menu` / `--dsw-alias-brand-primary-new-…` / `--dsw-alias-file-diff-added-bg`
+- 明确不跟：`bg-mask-*`（遮罩）、`border-inverted*`（反色边框）、onboarding（一次性引导）——刻意保留宿主原值
+
+### 1.8.2
+**暖砂字体体系修正**（用户反馈“和其他两套不一样，尤其字体颜色”）：
+
+- **根因 1：深色正文字色度没有按色域归一**。`paperC` 是绝对值，×2.4 后暖砂请求 130%、靛蓝 166% 色域上限，
+  实际色度被裁成 0.0244 / 0.0115 / 0.0303——暖砂深正文几乎是靛蓝的两倍黄。现在三套统一 `paperC=0.0053`
+  （标准档实际 ≈0.0127），浅/深正文色度比降到 1.21 / 1.10
+- **根因 2：暖砂是唯一「深色面 60°、正文 84°」的双色相预置**。深色面橙棕、正文黄绿，色相分裂 24°；
+  现在 `paper` 角色跟随 `darkHue`，并把暖砂 `hue` 84→72、`darkHue` 60→66，全套色相收敛到 12° 内
+- 新增断言：深正文色相偏离 `darkHue` ≤12°、三套浅色正文色度比 ≤1.25、深色 ≤1.5
+- 新增 `tools/preview-typography.mjs`：三套 × 明暗并排渲染同一段文字，发版前目检
+
+语法高亮跟随配色（1.8.1 里“未做”的那条，前提已实测）：
+
+- **实测依据**：宿主渲染器用 Shiki 的 `css-variables` 模式（`class="shiki css-variables"`，
+  `style="background-color:var(--shiki-background)"`），token 颜色走 CSS 变量，
+  所以覆盖 `--shiki-token-*` 生效，不需要 `!important`
+- **色相策略**：从强调色相取 3 个色族（强调 / +150° 冷族 / -60° 暖族），
+  同族靠明度分常/表达；每个 token 对代码块底求解到 **≥4.6:1**，四族最小 ΔE **≥10**
+- 覆盖 9 类 token（keyword / function / constant / parameter / string / string-expression /
+  comment / punctuation / link）+ `--shiki-background` / `--shiki-foreground`
+- **md=off 时不输出**任何 shiki token，交回宿主原色
+- 新增 `tools/preview-code.mjs`：用生产 token 渲染一段真实代码，发版前肉眼确认
+- 断言：9 类 token 对比度 ≥4.6、四族 ΔE ≥10、shiki 背景与代码块一致、md=off 无输出
+
 ### 1.8.1
 Markdown 配色丰富化（非加色相，而是加层级 + 修代码块底）：
 

package/client.js

@@ -27,7 +27,7 @@ window.__ModuleLoader__.load({
     const React = require('react')
     const h = React.createElement
 
-    const PLUGIN_VERSION = '1.8.1'
+    const PLUGIN_VERSION = '1.8.3'
     const STORE_KEY = 'dsh-theme-palette.v1'
     const OVERRIDE_SOURCE = 'dsh-theme-palette'
 
@@ -107,22 +107,22 @@ window.__ModuleLoader__.load({
       { id: 'mono', label: '黑白', desc: '无色调 · 默认', tinted: false },
       {
         id: 'warm', label: '暖砂', desc: '米白 + 棕调', tinted: true,
-        hue: 84, darkHue: 60, lightC: 0.030, midC: 0.010, textC: 0.004,
-        darkC: 0.014, darkLift: 0.026, paperC: 0.014, // 深底 #1e1b14 L 0.223 / 30% 色域
+        hue: 72, darkHue: 66, lightC: 0.030, midC: 0.010, textC: 0.004,
+        darkC: 0.014, darkLift: 0.026, paperC: 0.0053, // 深正文按色域归一：×2.4 后 ≈0.0127
         accentHue: 60, accentC: 0.101, accentL: 0.58, // 标准色 #A9683E
         accentScale: 1.0,
       },
       {
         id: 'indigo', label: '靛蓝', desc: '冷白 + 蓝调', tinted: true,
         hue: 266, lightC: 0.020, midC: 0.010, textC: 0.004,
-        darkC: 0.028, darkLift: 0.032, paperC: 0.009, // 深底 #161c2a L 0.227 / 19% 色域
+        darkC: 0.028, darkLift: 0.032, paperC: 0.0053, // 同上：三套统一，避免被色域裁成两倍差
         accentHue: 259, accentC: 0.107, accentL: 0.5108, // 标准色 #3F66A3
         accentScale: 1.0,
       },
       {
         id: 'moss', label: '苔绿', desc: '浅灰绿 + 绿调', tinted: true,
         hue: 162, lightC: 0.016, midC: 0.010, textC: 0.004,
-        darkC: 0.015, darkLift: 0.042, paperC: 0.0125, // 深底 #1a211b L 0.239 / 24% 色域
+        darkC: 0.015, darkLift: 0.042, paperC: 0.0053, // 同上
         accentHue: 139, accentC: 0.096, accentL: 0.5335, // 标准色 #4F7A42
         accentScale: 1.0,
       },
@@ -240,6 +240,10 @@ window.__ModuleLoader__.load({
       { id: '875', mode: 'dark', scope: true },
       { id: '850', mode: 'dark', scope: true },
       { id: '800', mode: 'dark', scope: true },
+      // 菜单是半透明面，实际颜色取决于 backdrop；这里按"合成在画布上"给出参考值，
+      // 标 scope:false（不计硬门），并在 UI 用 ※ 注明依赖 backdrop
+      { id: 'menuL', label: 'menu', mode: 'light', scope: false, token: '--dsw-specific-menu' },
+      { id: 'menuD', label: 'menu', mode: 'dark', scope: false, token: '--dsw-specific-menu' },
     ]
     const CONTRAST_ROLES = [
       { id: 'main', step: { light: '1000', dark: '50' } },
@@ -437,6 +441,26 @@ window.__ModuleLoader__.load({
       return hex + Math.round(clamp(alpha, 0, 1) * 255).toString(16).padStart(2, '0')
     }
 
+    /** 8 位 hex（带 alpha）按「覆盖在 bg 上」合成为不透明色；不带 alpha 时原样返回。 */
+    function flatten(hex, bgHex) {
+      if (typeof hex !== 'string' || hex.length !== 9) return hex
+      const fg = hexToRgb(hex.slice(0, 7))
+      const bg = hexToRgb(bgHex)
+      const a = parseInt(hex.slice(7, 9), 16) / 255
+      return rgbToHex(fg.map((v, i) => v * a + bg[i] * (1 - a)))
+    }
+
+    /**
+     * 语义色温度调和：保留色相为主（绿仍是绿、红仍是红），只把色相往配色的暖/冷方向
+     * 拉一小段、并压低饱和度。用于 file diff 这种大面积色块——不能整块换成主题色，
+     * 那会让「新增/删除」失去语义。
+     */
+    function harmonize(hex, targetHue, pull, chromaScale) {
+      const [L, C, h] = toOklch(hex)
+      const dh = ((targetHue - h + 540) % 360) - 180
+      return fromOklch(L, C * chromaScale, h + dh * pull)
+    }
+
     /**
      * 区块底色微调：在 OKLab 里给亮度加 delta，同时按需削减色度。
      *
@@ -495,9 +519,10 @@ window.__ModuleLoader__.load({
         // 换成 60°（橙棕）才是咖啡色。浅色侧仍是 88°（米白）。
         // 文字档（含深色正文 paper）跟随「文字」这一项自己的色相；预设没有 textHue，行为不变。
         const tintRole = role === 'text' || role === 'paper'
+        // 深色角色（含深色正文 paper）统一走 darkHue，避免「深色面橙棕、正文黄绿」的双色相
         const hue = tintRole && scheme.textHue !== undefined
           ? scheme.textHue
-          : (role === 'dark' && scheme.darkHue !== undefined ? scheme.darkHue : scheme.hue)
+          : ((role === 'dark' || role === 'paper') && scheme.darkHue !== undefined ? scheme.darkHue : scheme.hue)
         bluish[step] = fromOklch(clamp(compressL(lifted), 0, 0.995), roleChroma(role, weight, scheme, scales), hue)
       }
       const neutral = {}
@@ -715,6 +740,17 @@ window.__ModuleLoader__.load({
           light: withAlpha(r.bluish['50'], 0.58),
           dark: withAlpha(r.bluish['750'], 0.45),
         },
+        // 宿主 `--dsw-specific-menu` 自带字面量兜底（浅 #f8f9faf0 / 深 #303136f0），
+        // 只改 menu-surface-fill 不够：深色菜单实际用的是它，会留着冷灰。这里一并对齐。
+        '--dsw-specific-menu': {
+          light: withAlpha(r.bluish['50'], 0.94),
+          dark: withAlpha(r.bluish['850'], 0.94),
+        },
+        // 浅色写死 #4176e6（宿主蓝），深色已引用 deepseek-450；两模式都归到强调色
+        '--dsw-alias-brand-primary-new-colorprimary-new-color': {
+          light: r.deepseek['500'],
+          dark: r.deepseek['400'],
+        },
         '--dsw-alias-menu-group-header-fill': {
           // 用 60 而不是 50：50 现在是「深色模式正文」的色度，拿去当浅色菜单头会偏艳
           light: withAlpha(r.bluish['60'], 0.94),
@@ -935,6 +971,63 @@ window.__ModuleLoader__.load({
         light: mixHex(ramps.deepseek['500'], ramps.bluish['50'], 0.05),
         dark: mixHex(ramps.deepseek['400'], ramps.bluish['900'], 0.07),
       }
+      /* ---- 文件 diff：宿主是固定冷绿/冷红的大面积色块，暖砂/苔绿下最显眼。
+       * 只做「温度调和」：保留绿=新增、红=删除的语义色相，往配色色相拉 16–22° 并压低饱和。 */
+      if (params.tinted) {
+        const diffHue = params.hue
+        const area = (hex) => harmonize(hex, diffHue, 0.16, 0.90)
+        const mark = (hex) => harmonize(hex, diffHue, 0.22, 0.95)
+        pairs['--dsw-alias-file-diff-added-bg'] = { light: area('#e6f4e7'), dark: area('#1f3124') }
+        pairs['--dsw-alias-file-diff-added-gutter'] = { light: area('#edf7ed'), dark: area('#132016') }
+        pairs['--dsw-alias-file-diff-added-marker'] = { light: mark('#01a241'), dark: mark('#41c977') }
+        pairs['--dsw-alias-file-diff-deleted-bg'] = { light: area('#fce6e2'), dark: area('#3c1f1b') }
+        pairs['--dsw-alias-file-diff-deleted-gutter'] = { light: area('#fdece9'), dark: area('#28130e') }
+        pairs['--dsw-alias-file-diff-deleted-marker'] = { light: mark('#ba2723'), dark: mark('#fa423e') }
+      }
+      /* ---- 语法高亮（1.8.2）----
+       * 宿主渲染器用 Shiki 的 `css-variables` 模式（className="shiki css-variables"，
+       * 样式走 var(--shiki-*)），所以覆盖这些变量有效，不需要 !important。
+       *
+       * 色相策略：不引入与配色无关的固定色，而是从强调色相出发取 3 个色族
+       * （强调 / +150° 的冷族 / -55° 的暖族），再用明度与色度拉开可辨度；
+       * 每个 token 都必须对代码块底达到 4.6:1，否则沿远离背景的方向调整明度。
+       */
+      if (params.tinted && mdMode === 'on') {
+        const baseHue = params.accentHue === undefined ? scheme.hue : params.accentHue
+        const pickL = (bg) => (contrast('#ffffff', bg) >= contrast('#000000', bg) ? 0.80 : 0.45)
+        const dirOf = (bg) => (contrast('#ffffff', bg) >= contrast('#000000', bg) ? 1 : -1)
+        const ink = (bg, hue, chroma, startL, target) => {
+          const dir = dirOf(bg)
+          let L = startL
+          for (let i = 0; i < 160; i++) {
+            const c = fromOklch(clamp(L, 0.02, 0.99), chroma, hue)
+            if (contrast(c, bg) >= target) return c
+            L += dir * 0.004
+          }
+          return fromOklch(clamp(L, 0.02, 0.99), chroma, hue)
+        }
+        // 每个色族自带目标对比度：同族靠明度分"常/表达"，异族靠色相差 55–150°
+        const families = {
+          keyword: [baseHue, 0.15, 4.6],
+          function: [baseHue + 70, 0.12, 5.0],
+          constant: [baseHue - 60, 0.13, 4.8],
+          parameter: [baseHue + 30, 0.10, 5.6],
+          string: [baseHue + 150, 0.10, 4.8],
+          'string-expression': [baseHue + 150, 0.085, 5.8],
+          comment: [baseHue, 0.015, 4.6],
+          punctuation: [baseHue, 0.02, 6.0],
+        }
+        for (const [name, [hue, chroma, target]] of Object.entries(families)) {
+          const key = '--shiki-token-' + name
+          pairs[key] = {
+            light: ink(codeFill.light, hue, chroma, pickL(codeFill.light), target),
+            dark: ink(codeFill.dark, hue, chroma, pickL(codeFill.dark), target),
+          }
+        }
+        pairs['--shiki-token-link'] = { light: lightLink(ramps, false), dark: ramps.deepseek['400'] }
+        pairs['--shiki-background'] = codeFill
+        pairs['--shiki-foreground'] = { light: ramps.bluish['1000'], dark: ramps.bluish['50'] }
+      }
       const scroll = scrollbarTokens(ramps, params, scrollMode)
       for (const [name, pair] of Object.entries(scroll)) pairs[name] = pair
       // 开关/勾选/单选的共用支点：brand-primary 本来是近黑/近白，改成强调色。
@@ -983,6 +1076,8 @@ window.__ModuleLoader__.load({
      * 命中 ui-layout 的 `data-rightbar-col`（稳定语义钩子，不是哈希类名）。
      * 全屏右栏时退回画布色 —— 那时右栏就是整块内容区，染成侧栏色会像只剩一条侧栏。
      */
+    // 说明：本插件不额外处理 forced-colors —— 我们改的 color/background-color/border-color
+    // 都在 UA 强制色列表内，系统高对比模式下会被自动接管，无需（也不应）用 forced-color-adjust 对抗。
     const RIGHTBAR_CSS = [
       '[data-rightbar-col]{background:var(--dshtp-rightbar-fill,var(--dsw-alias-bg-base))}',
       '[data-rightbar-fullscreen] [data-rightbar-col]{background:var(--dsw-alias-bg-base)}',
@@ -1429,6 +1524,7 @@ body[data-ds-dark-theme] .dsh-tp-check{background:var(--t-accent-d);color:var(--
         explainLink: '链接已为可读性压暗：{ratio}:1（目标 {target}:1）',
         preview: '预览',
         sample: '试试示例',
+        copyDiag: '复制诊断',
         contrast: '对比度',
         contrastSub: '实测 / 目标（按承载面；※ 不计硬门·△ 表面受限）',
         cMain: '正文',
@@ -1482,6 +1578,7 @@ body[data-ds-dark-theme] .dsh-tp-check{background:var(--t-accent-d);color:var(--
         explainLink: '連結已為可讀性壓暗：{ratio}:1（目標 {target}:1）',
         preview: '預覽',
         sample: '試試示例',
+        copyDiag: '複製診斷',
         contrast: '對比度',
         contrastSub: '實測 / 目標（依承載面；※ 不計硬門·△ 表面受限）',
         cMain: '正文',
@@ -1535,6 +1632,7 @@ body[data-ds-dark-theme] .dsh-tp-check{background:var(--t-accent-d);color:var(--
         explainLink: 'Link darkened for readability: {ratio}:1 (target {target}:1)',
         preview: 'Preview',
         sample: 'Try a sample',
+        copyDiag: 'Copy diagnostics',
         contrast: 'Contrast',
         contrastSub: 'measured / target per surface (※ not gated · △ surface-limited)',
         cMain: 'Body',
@@ -1588,6 +1686,7 @@ body[data-ds-dark-theme] .dsh-tp-check{background:var(--t-accent-d);color:var(--
         explainLink: 'リンクを可読性のため暗くしました：{ratio}:1（目標 {target}:1）',
         preview: 'プレビュー',
         sample: 'サンプルを試す',
+        copyDiag: '診断をコピー',
         contrast: 'コントラスト',
         contrastSub: '実測 / 目標（面ごと；※ 判定外・△ 面の上限）',
         cMain: '本文',
@@ -1690,6 +1789,7 @@ body[data-ds-dark-theme] .dsh-tp-check{background:var(--t-accent-d);color:var(--
       const [copyState, setCopyState] = React.useState(null)
       const [advanced, setAdvanced] = React.useState(false)
       const [matrixOpen, setMatrixOpen] = React.useState(false)
+      const [diagState, setDiagState] = React.useState(null)
       // 升级提示按版本只出现一次
       const noticePending = React.useSyncExternalStore(props.subscribeNotice, props.getNoticePending)
       // HEX 输入需要「草稿」态：非法值不能写进主题，但用户还在输入时也不该被立刻回滚。
@@ -1862,6 +1962,20 @@ body[data-ds-dark-theme] .dsh-tp-check{background:var(--t-accent-d);color:var(--
           onClick: () => setMatrixOpen(!matrixOpen),
         }, (matrixOpen ? '▾ ' : '▸ ') + txt.contrast),
         h('span', { className: 'dsh-tp-matrix-sub' }, txt.contrastSub),
+        h('div', { className: 'dsh-tp-field-row' },
+          h('button', {
+            type: 'button',
+            className: 'dsh-tp-mini',
+            onClick: async () => {
+              try {
+                if (!navigator.clipboard || typeof navigator.clipboard.writeText !== 'function') throw new Error('no clipboard')
+                await navigator.clipboard.writeText(JSON.stringify(props.getDiagnostics(), null, 2))
+                setDiagState('copied')
+              } catch (err) { setDiagState('fail') }
+            },
+          }, txt.copyDiag),
+          diagState && h('span', { className: 'dsh-tp-note', role: 'status', 'aria-live': 'polite' },
+            diagState === 'copied' ? txt.copied : txt.copyFail)),
         matrixOpen && (() => {
           const report = props.getContrastReport()
           return h(
@@ -1869,7 +1983,7 @@ body[data-ds-dark-theme] .dsh-tp-check{background:var(--t-accent-d);color:var(--
             { id: 'dsh-tp-matrix-body' },
             h('thead', null, h('tr', null,
               h('th', { scope: 'col' }, ''),
-              CONTRAST_SURFACES.map((sf) => h('th', { key: sf.id, scope: 'col' }, sf.id + (sf.scope === false ? '※' : ''))))),
+              CONTRAST_SURFACES.map((sf) => h('th', { key: sf.id, scope: 'col' }, (sf.label || sf.id) + (sf.scope === false ? '※' : ''))))),
             h('tbody', null, report.rows.map((row) => h('tr', { key: row.role },
               h('th', { scope: 'row' }, roleLabel[row.role] || row.role),
               row.cells.map((cell) => {
@@ -2078,7 +2192,7 @@ body[data-ds-dark-theme] .dsh-tp-check{background:var(--t-accent-d);color:var(--
 
     // 开发期接口：palette-dev.mjs 通过它拿到同一套引擎（避免「报表好看、上线不一样」）
     if (DEV_OPT_IN && typeof window !== 'undefined' && typeof window.__DSH_THEME_PALETTE_DEV__ === 'function') {
-      window.__DSH_THEME_PALETTE_DEV__({ buildTokens, SCHEMES, SIDEBAR_MODES, TEXT_MODES, RIGHTBAR_MODES, SCROLL_MODES, CONTROL_MODES, MD_MODES, HC_MODES, contrast, toOklch, rampsFor, floors, encodeConfig, decodeConfig, customScheme, readCustom, writeCustom, CONTRAST_SURFACES, CONTRAST_ROLES, settingsCss: SETTINGS_CSS, cardColors })
+      window.__DSH_THEME_PALETTE_DEV__({ buildTokens, SCHEMES, SIDEBAR_MODES, TEXT_MODES, RIGHTBAR_MODES, SCROLL_MODES, CONTROL_MODES, MD_MODES, HC_MODES, contrast, toOklch, fromOklch, flatten, rampsFor, floors, encodeConfig, decodeConfig, customScheme, readCustom, writeCustom, CONTRAST_SURFACES, CONTRAST_ROLES, settingsCss: SETTINGS_CSS, cardColors })
     }
 
     return {
@@ -2384,6 +2498,13 @@ body[data-ds-dark-theme] .dsh-tp-check{background:var(--t-accent-d);color:var(--
             linkTarget: floors(hc).link,
           }
         }
+        /** 诊断导出：把当前配色与对比度矩阵打成可粘贴的 JSON（提 issue 用）。 */
+        const getDiagnostics = () => ({
+          plugin: 'dsh-theme-palette',
+          version: PLUGIN_VERSION,
+          settings: { palette: current, sidebar: sidebarMode, text: textMode, rightbar: rightbarMode, scroll: scrollMode, control: controlMode, md: mdMode, hc: hcMode, lang: langPref },
+          report: getContrastReport(),
+        })
         const previewConfigCode = (code) => {
           const cfg = decodeConfig(code)
           return cfg ? { ok: true, config: cfg } : { ok: false }
@@ -2407,7 +2528,9 @@ body[data-ds-dark-theme] .dsh-tp-check{background:var(--t-accent-d);color:var(--
               const fgHex = role.id === 'link'
                 ? t['--dsw-alias-link'][sf.mode]
                 : t['--dsw-static-neutral-bluish-' + role.step[sf.mode]][sf.mode]
-              const bg = t['--dsw-static-neutral-bluish-' + sf.id][sf.mode]
+              const bg = sf.token
+                ? flatten(t[sf.token][sf.mode], t['--dsw-static-neutral-bluish-' + (sf.mode === 'light' ? '00' : '950')][sf.mode])
+                : t['--dsw-static-neutral-bluish-' + sf.id][sf.mode]
               const ratio = contrast(fgHex, bg)
               const claim = sf.mode === 'light' ? F[role.id] : (role.id === 'link' ? F.linkDark : F[role.id])
               const ceiling = contrast(sf.mode === 'light' ? '#000000' : '#ffffff', bg)
@@ -2582,6 +2705,7 @@ body[data-ds-dark-theme] .dsh-tp-check{background:var(--t-accent-d);color:var(--
                 previewConfigCode,
                 getSampleCode,
                 getContrastReport,
+                getDiagnostics,
                 subscribeNotice,
                 getNoticePending,
                 dismissNotice,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-theme-palette",
-  "version": "1.8.1",
+  "version": "1.8.3",
   "description": "DSH 主题配色：4 套配色 × 明暗两模式，OKLCH 色域安全重建 + 真实承载面对比度求解，可调强度与面板表面。",
   "type": "module",
   "main": "index.js",