dsh-theme-palette 1.5.1 → 1.5.3

package/CHANGELOG.md

@@ -13,6 +13,32 @@
   复核宿主源码发现它带 `includePrerelease`，结论相反。现在这条判断固化进脚本，不再靠手算
 - 该改动只影响本地发版工具，**不进 npm 包**（`files` 不含 `tools/`），故不升版本号
 
+### 1.5.3
+修：选中「自定义」后滚动条不跟随取色。
+
+- **根因**：`scrollbarTokens()` 收到的是 `SCHEMES` 里的**占位** scheme 对象
+  （`accentHue` 恒为 60），而真正按三色派生出的参数只在 `rampsFor()` 内部解引用。
+  于是画布/强调色都对，唯独滚动条永远停在暖橙。
+- **修法**：`buildTokens()` 开头统一解引用一次（`params = scheme.custom ? customScheme(readCustom()) : scheme`），
+  之后所有读 `scheme.*` 的地方改用 `params`；`scrollbarTokens(ramps, params, mode)` 也改传解析后的对象。
+- **防复发**：新增 `tools/check-custom.mjs` —— 断言三种强调色必须产出三种滚动条颜色，
+  且三组自选色的正文/次文/三级对比度仍在限内（现在输出
+  `#2f6fd0→#bfd6f9  #a9683e→#f2cbb3  #4f7a42→#c2ddbb`）。
+- 顺带：`tools/preview-settings.mjs` 支持 `PREVIEW_ACCENT`，可预览任意强调色的自定义面板。
+
+### 1.5.2
+设置页交互重排（用户反馈：自定义不该埋在「更多选项」里、取色看不到即时效果）：
+
+- **自定义配色提为一级区块**：选中「自定义」卡片后，面板直接出现在卡片网格下方，
+  不再需要展开「更多选项」
+- **取色实时生效**：同时接 `onInput`（拖动过程中）与 `onChange`（确认后），
+  一次 `buildTokens` 实测 **0.15 ms**，整页配色随取色实时变化，不需要"确认"动作
+- **色块放大**：`input[type=color]` 变成 44px 高的圆角色块（隐藏原生 swatch 边框），
+  下方显示字段名与十六进制值；三个色块一排，窄屏自动堆叠
+- **恢复默认**：面板右上角一键回到出厂三色
+- 修：预览渲染器不输出 `value`/`placeholder`/`readonly`，导致静态预览里色块是黑的、
+  导出码框是空的（真实应用不受影响）
+
 ### 1.5.1
 - `dsh.compatibility.profiles` 补 `web`：在 web profile 上实测 5 张卡片（含「自定义」）正常显示，
   与 desktop 一致；`dshOperations` 的 install/start 保持 `passed`，uninstall/rollback 仍如实 `unknown`

package/client.js

@@ -27,7 +27,7 @@ window.__ModuleLoader__.load({
     const React = require('react')
     const h = React.createElement
 
-    const PLUGIN_VERSION = '1.5.1'
+    const PLUGIN_VERSION = '1.5.3'
     const STORE_KEY = 'dsh-theme-palette.v1'
     const OVERRIDE_SOURCE = 'dsh-theme-palette'
 
@@ -703,9 +703,12 @@ window.__ModuleLoader__.load({
 
     function buildTokens(scheme, sidebarMode, textMode, rightbarMode, scrollMode, controlMode, mdMode, hcMode) {
       const hc = hcMode === true
-      const ramps = rampsFor(scheme, textMode || DEFAULT_TEXT, hc)
+      // 自定义配色必须先解引用：ramps 内部会派生参数，但 accent / scroll / control
+      // 这些直接读 params.accentHue、params.hue 的地方若拿到占位值，就会"不跟取色"
+      const params = scheme && scheme.custom === true ? customScheme(readCustom()) : scheme
+      const ramps = rampsFor(params, textMode || DEFAULT_TEXT, hc)
       const pairs = {}
-      if (!scheme.tinted) {
+      if (!params.tinted) {
         // 黑白：只输出「被求解改动过」的那几步 + 派生链接，不整条覆盖（保持宿主原貌）
         for (const step of ['400', '600', '700', '1000']) {
           pairs['--dsw-static-neutral-bluish-' + step] = { light: ramps.bluish[step], dark: ramps.bluish[step] }
@@ -719,7 +722,7 @@ window.__ModuleLoader__.load({
         pairs['--dsw-alias-button-primary-fill'] = { light: monoBtn, dark: ramps.bluish['1000'] }
       }
       // 其它配色：整条色阶 + 字面量别名覆盖。
-      if (scheme.tinted) {
+      if (params.tinted) {
         for (const [family, table] of Object.entries(ramps)) {
           for (const [step, value] of Object.entries(table)) {
             pairs['--dsw-static-' + (family === 'bluish' ? 'neutral-bluish-' : family + '-') + step] = {
@@ -731,13 +734,13 @@ window.__ModuleLoader__.load({
         const aliases = aliasOverrides(ramps, hc)
         for (const [name, pair] of Object.entries(aliases)) pairs[name] = pair
       }
-      const sidebar = sidebarTokens(ramps, sidebarMode, scheme.tinted)
+      const sidebar = sidebarTokens(ramps, sidebarMode, params.tinted)
       for (const [name, pair] of Object.entries(sidebar)) pairs[name] = pair
       // 右栏底色只给一个间接层：同左栏时直接引用左栏 token，跟随画布时引用画布 token。
       // 主按钮：浅色下宿主把 button-primary-fill 指到 state-error-primary（红），
       // 于是页面上有「红主按钮 + 强调色」两个主色。改成强调色，并压暗到按钮文字 ≥4.5。
       // 黑白配色在上面已经单独设过，这里跳过（它要按「更浅」档的画布兜底）。
-      if (scheme.tinted) {
+      if (params.tinted) {
         pairs['--dsw-alias-button-primary-fill'] = {
           light: darkenUntil(ramps.deepseek['500'], ramps.bluish['00'], 4.5),
           dark: ramps.deepseek['400'],
@@ -756,7 +759,7 @@ window.__ModuleLoader__.load({
         : 'var(--dsw-specific-sidebar-fill)'
       pairs['--dshtp-rightbar-fill'] = { light: rightbarFill, dark: rightbarFill }
       // Markdown 强调色：标题 = 正文色混 40% 强调色；加粗 = 混 20%（比标题弱一档）
-      if (scheme.tinted) {
+      if (params.tinted) {
         if (mdMode === 'off') {
           const inherit = { light: 'inherit', dark: 'inherit' }
           pairs['--dshtp-md-heading'] = inherit
@@ -790,7 +793,7 @@ window.__ModuleLoader__.load({
         light: mixHex(ramps.deepseek['500'], ramps.bluish['50'], 0.05),
         dark: mixHex(ramps.deepseek['400'], ramps.bluish['900'], 0.07),
       }
-      const scroll = scrollbarTokens(ramps, scheme, scrollMode)
+      const scroll = scrollbarTokens(ramps, params, scrollMode)
       for (const [name, pair] of Object.entries(scroll)) pairs[name] = pair
       // 开关/勾选/单选的共用支点：brand-primary 本来是近黑/近白，改成强调色。
       if (controlMode === 'accent') {
@@ -798,7 +801,7 @@ window.__ModuleLoader__.load({
       }
       // 黑白配色的浅色画布本身就是纯白，「更浅」无处可提 —— 改成把会话区压一档浅灰，
       // 侧栏保持纯白，同样得到区块层次（这是唯一需要动画布的情形）。
-      if (!scheme.tinted && sidebarMode === 'light') {
+      if (!params.tinted && sidebarMode === 'light') {
         pairs['--dsw-static-neutral-bluish-00'] = { light: '#fafafa', dark: BASE.bluish['00'] }
       }
       return pairs
@@ -903,7 +906,18 @@ body[data-ds-dark-theme] .dsh-tp-check{background:var(--t-accent-d);color:var(--
 .dsh-tp-input::placeholder{color:var(--dsw-alias-label-tertiary)}
 .dsh-tp-mini{font:inherit;font-size:12.5px;line-height:20px;padding:5px 12px;border-radius:8px;border:.5px solid var(--dsw-alias-border-l4);background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary);cursor:pointer}
 .dsh-tp-mini:hover{background:var(--dsw-alias-bg-layer-1)}
-.dsh-tp-color{width:28px;height:22px;padding:0;border:.5px solid var(--dsw-alias-border-l4);border-radius:6px;background:transparent;cursor:pointer}
+.dsh-tp-custom{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:14px;border:.5px solid var(--dsw-alias-border-l4);background:var(--dsw-alias-interactive-bg-hover)}
+.dsh-tp-custom-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
+.dsh-tp-custom-head b{font-size:13.5px;font-weight:500}
+.dsh-tp-swatches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
+@media (max-width:520px){.dsh-tp-swatches{grid-template-columns:1fr}}
+.dsh-tp-swatch{display:flex;flex-direction:column;gap:6px;cursor:pointer}
+.dsh-tp-color{width:100%;height:44px;padding:0;border:.5px solid var(--dsw-alias-border-l4);border-radius:10px;background:transparent;cursor:pointer}
+.dsh-tp-color::-webkit-color-swatch-wrapper{padding:3px}
+.dsh-tp-color::-webkit-color-swatch{border:none;border-radius:8px}
+.dsh-tp-swatch-name{font-size:12px;color:var(--dsw-alias-label-secondary)}
+.dsh-tp-hex{font:11.5px/1 ui-monospace,Consolas,monospace;color:var(--dsw-alias-label-tertiary)}
+.dsh-tp-custom-hint{margin:0;font-size:11.5px;line-height:17px;color:var(--dsw-alias-label-tertiary)}
 .dsh-tp-note{font-size:11.5px;color:var(--dsw-alias-label-tertiary)}
 .dsh-tp-status{margin:0;font-size:11.5px;line-height:18px;color:var(--dsw-alias-label-tertiary)}
 .dsh-tp-status.is-bad{color:var(--dsw-alias-state-error-primary)}
@@ -1190,6 +1204,7 @@ body[data-ds-dark-theme] .dsh-tp-check{background:var(--t-accent-d);color:var(--
         customHint: '取三个色的色相与色度；明度由引擎按明暗模式算，对比度仍由求解器兜底。',
         config: '配置',
         configHint: '导出这台机器的配色选择，或粘贴短码导入；导入会覆盖全部 8 项。',
+        reset: '恢复默认',
         copy: '复制',
         applyImport: '导入',
         copied: '已复制',
@@ -1233,6 +1248,7 @@ body[data-ds-dark-theme] .dsh-tp-check{background:var(--t-accent-d);color:var(--
         customHint: '取三個色的色相與色度；明度由引擎依明暗模式計算，對比度仍由求解器兜底。',
         config: '設定',
         configHint: '匯出這台機器的配色選擇，或貼上短碼匯入；匯入會覆蓋全部 8 項。',
+        reset: '恢復預設',
         copy: '複製',
         applyImport: '匯入',
         copied: '已複製',
@@ -1276,6 +1292,7 @@ body[data-ds-dark-theme] .dsh-tp-check{background:var(--t-accent-d);color:var(--
         customHint: 'Takes hue and chroma from three colours; lightness comes from the engine per mode and contrast is still solved.',
         config: 'Config',
         configHint: 'Export this machine’s choices, or paste a short code to import. Import overwrites all 8 settings.',
+        reset: 'Reset',
         copy: 'Copy',
         applyImport: 'Import',
         copied: 'Copied',
@@ -1319,6 +1336,7 @@ body[data-ds-dark-theme] .dsh-tp-check{background:var(--t-accent-d);color:var(--
         customHint: '3 色の色相と彩度だけを使います。明度はモードごとにエンジンが決め、コントラストは従来どおり求解します。',
         config: '設定の共有',
         configHint: 'この端末の配色設定を書き出す／短いコードを貼り付けて読み込みます（8 項目すべて上書き）。',
+        reset: 'リセット',
         copy: 'コピー',
         applyImport: '読み込み',
         copied: 'コピーしました',
@@ -1426,6 +1444,34 @@ body[data-ds-dark-theme] .dsh-tp-check{background:var(--t-accent-d);color:var(--
         control,
       )
 
+      const customColors = props.getCustomColors()
+      const customPanel = current === 'custom' && h(
+        'div',
+        { className: 'dsh-tp-custom' },
+        h('div', { className: 'dsh-tp-custom-head' },
+          h('b', null, txt.custom),
+          h('button', {
+            type: 'button',
+            className: 'dsh-tp-mini',
+            onClick: () => props.resetCustom(),
+          }, txt.reset)),
+        h('div', { className: 'dsh-tp-swatches' },
+          ['bg', 'text', 'accent'].map((field) => h('label', { key: field, className: 'dsh-tp-swatch' },
+            h('input', {
+              type: 'color',
+              className: 'dsh-tp-color',
+              value: customColors[field],
+              // input 是"拖动过程中"就触发，change 是"确认后"触发；两个都接，
+              // 拖动时实时看到整页变化，松手/确认后不会再跳一次
+              onInput: (e) => props.setCustomColor(field, e.target.value),
+              onChange: (e) => props.setCustomColor(field, e.target.value),
+              'aria-label': (lb.custom && lb.custom[field]) || field,
+            }),
+            h('span', { className: 'dsh-tp-swatch-name' }, (lb.custom && lb.custom[field]) || field),
+            h('code', { className: 'dsh-tp-hex' }, customColors[field])))),
+        h('p', { className: 'dsh-tp-custom-hint' }, txt.customHint),
+      )
+
       const card = (scheme) => {
         const picked = scheme.id === current
         const c = cardColors(scheme, textMode)
@@ -1462,6 +1508,7 @@ body[data-ds-dark-theme] .dsh-tp-check{background:var(--t-accent-d);color:var(--
           h('span', { className: 'dsh-tp-badge' }, 'v' + PLUGIN_VERSION)),
         h('p', { className: 'dsh-tp-sub' }, txt.hint),
         h('div', { className: 'dsh-tp-grid' }, SCHEMES.map(card)),
+        customPanel,
         row(txt.text, txt.textSub, seg(TEXT_MODES, textMode, props.setTextMode, lb.text)),
         row(txt.sidebar, txt.sidebarSub, seg(SIDEBAR_MODES, sidebarMode, props.setSidebarMode, lb.sidebar)),
         row(txt.rightbar, txt.rightbarSub, seg(RIGHTBAR_MODES, rightbarMode, props.setRightbarMode, lb.rightbar)),
@@ -1480,24 +1527,6 @@ body[data-ds-dark-theme] .dsh-tp-check{background:var(--t-accent-d);color:var(--
         advanced && h(
           'div',
           { className: 'dsh-tp-adv' },
-          current === 'custom' && h(
-            'div',
-            { style: { display: 'flex', flexDirection: 'column', gap: 6 } },
-            h('div', { style: { fontSize: 14, lineHeight: '22px' } }, txt.custom),
-            h('div', { style: { display: 'flex', gap: 10, flexWrap: 'wrap', alignItems: 'center' } },
-              ['bg', 'text', 'accent'].map((field) => h('label', {
-                key: field,
-                style: { display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 12.5, color: 'var(--dsw-alias-label-secondary)' },
-              },
-                h('input', {
-                  type: 'color',
-                  className: 'dsh-tp-color',
-                  value: props.getCustomColors()[field],
-                  onChange: (e) => props.setCustomColor(field, e.target.value),
-                }),
-                (lb.custom && lb.custom[field]) || field))),
-            h('p', { style: { margin: 0, fontSize: 12, lineHeight: '18px', color: 'var(--dsw-alias-label-tertiary)' } }, txt.customHint),
-          ),
           row(txt.lang, txt.langSub, seg(LANG_OPTIONS, langPref, props.setLangPref, lb.lang)),
           h(
             'div',
@@ -1820,6 +1849,11 @@ body[data-ds-dark-theme] .dsh-tp-check{background:var(--t-accent-d);color:var(--
           return true
         }
         const getCustomColors = () => readCustom()
+        const resetCustom = () => {
+          writeCustom(Object.assign({}, CUSTOM_DEFAULT))
+          applyAll('custom:reset')
+          emit()
+        }
         const setCustomColor = (field, hex) => {
           if (CUSTOM_FIELDS.indexOf(field) === -1) return
           if (typeof hex !== 'string' || !HEX_RE.test(hex)) return
@@ -1962,6 +1996,7 @@ body[data-ds-dark-theme] .dsh-tp-check{background:var(--t-accent-d);color:var(--
                 applyConfigCode,
                 getCustomColors,
                 setCustomColor,
+                resetCustom,
                 getLangPref,
                 getLocale,
                 subscribeLocale,

package/package.json

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