dsh-theme-neumorph 1.0.3 → 1.0.5

package/README.md

@@ -35,9 +35,14 @@
 主题只动宿主自己画的界面，不碰第三方插件：
 
 - 宿主同时用着**两套** CSS Module 命名：预构建样式表是 `_<local>_<hash>_<line>`（`_card_7gxqk_107`），组件从 JS 注入的样式是 `<hash>_<local>`（`wSkVaW_card`）。所以一个类名要同时锚定两次——`[class$="_card"]` 与 `[class*="_card_"]`——只写一种就会有一半界面纹丝不动。
-- 子串锚定一定用下划线夹住（`[class*="_card_"]` 而不是 `[class*="_card"]`），否则会串到 `_cardContent_x_y` 这种更长的零件上，卡片的每一块又各得一层投影。
-- 每个类名锚定都带 `:not([class*="__"])`：宿主是**单**下划线，别人家的 BEM 是**双**下划线，这一条挡住的正是 `panel__card`。排除项（`button:not([class*="_row"])` 这类）不加，因为排除范围宽一点只会少上一条浮雕。
-- 裸标签只出现在两类地方：宿主的表单与代码面（`textarea`、`input`、`select`、`pre`），以及必须同时带宿主类名的控件（`button` / `[role="button"]` + `[class*="_"]`）。`span` 不被当成文字。
+- 凡是要**加**规则的地方，锚定的都是**完整的 local 名**，而且一定用下划线夹住（`[class*="_card_"]` 而不是 `[class*="_card"]`），否则会串到 `_cardContent_x_y`、`_labelChip` 这种更长的零件上，卡片的每一块又各得一层投影。只有**排除**项才允许宽泛的片段（`button:not([class*="_row"])` 这类），因为排除范围宽一点只会少上一条浮雕，不会多毁一块界面。
+- 每个类名锚定都带 `:not([class*="__"])`：宿主是**单**下划线，别人家的 BEM 是**双**下划线，这一条挡住的正是 `panel__card`。
+- 裸标签只出现在三处：宿主的表单与代码面（`textarea`、`input`、`select`、`pre`）、可编辑文本（`[contenteditable="true"]`），以及必须同时带宿主类名的控件（`button` / `[role="button"]` / `a` + `[class*="_"]`）。`span` 不被当成文字。
+- 悬在内容**之上**的控件必须不透明。主题里表面只有一个颜色，所以"透明"对躺在表面上的控件是对的，对浮在滚动正文之上的那颗"回到最新"圆钮就是错的——它的底来自 `--dsw-alias-button-floating-fill`，透明时消息会从圆钮里穿过去。`floating-fill` / `elevated-fill` 现在是表面色，`floating-hover` 与 `--dsw-alias-interactive-bg-hover-solid` 是一层浅色（后者是十处控件唯一的悬停反馈）。
+- 圆形的钮不给 12px 圆角：按钮形状规则用 `host()` 锚定把"回到最新"（34px）与附件删除（18px）两颗圆盘排除在外，而不是事后改回来——按钮选择器里每个 `:not()` 都加权重，后面再写一条压不过它。
+- 不强制按钮底色。主题里所有表面是同一个颜色，透明按钮本来就与表面齐平；而宿主有些控件是**功能填充**（附件删除键的圆盘用 `--dsw-alias-button-contrast-fill`、叉号用 `--dsw-alias-label-primary-inverted`），一旦被灌成表面色，叉号就在近白底上消失了。所以按钮只加圆角与浮雕，填充留给宿主。
+- 文本会被拍平，但表单控件不会：宿主的重命名输入框类名就叫 `ymsBma_name`，它在文字规则里必须被 `:not(input):not(textarea):not(select)` 放行，否则那块输入框看起来就是一行纯文本。
+- 不是每个 token 都是"板子"。引用竖线（`--dsw-alias-markdown-citation`）、幽灵按钮的选中态（`--dsw-alias-button-ghost-active-fill`）、行内代码（`--dsw-alias-markdown-inline-code`）是宿主的**信号**，置成 `transparent` 等于把它们删掉，所以它们保留一层浅色，而不是跟其他表面一起消失。
 - 文本框的焦点指示不用宿主的外扩轮廓（在软表面上像一圈多余的蓝边），改成画在框内侧的 1.5px 钢蓝内缘；`outline-offset: -2px` 与内凹阴影叠加而不是替换它。checkbox / radio / 原生控件完全不碰，宿主自己的焦点环留给它们。
 
 ## 目录结构
@@ -62,15 +67,15 @@
 
 - Client 半通过 `window.__ModuleLoader__.load({ id, factory })` 注册，`factory` 返回 `{ inject: ['theme'], apply(ctx) }`。
 - 所有副作用都包在 `ctx.effect()` 里并返回清理函数：样式表在 effect 内插入（effect 被拒就一张纸都不留），重复 apply 时先删掉自己上一张，停用时先移除样式表再撤销 token 覆盖层，界面立刻回到原生外观。
-- 若宿主某天拒绝含 `--dsw-radius-*` 的 token 表，会自动退回只含颜色的 66 项重试；连重试也被拒时保留阴影层并告警，而不是把主题整个掀掉。
-- 样式规则用宿主类名锚定 CSS Module，哈希前缀与文件名随版本变化都不会失效。
+- 若宿主某天拒绝含 `--dsw-radius-*` 的 token 表，会退回只含颜色的 66 项重试一次；连重试也被拒时保留阴影层并告警，而不是把主题整个掀掉。这是一条防御路径——目前这版宿主只校验 token 值的形状（是否 `{ light, dark }`），不校验名字，所以实际上不会走到。
+- 颜色层之外的一切都用宿主类名锚定 CSS Module，哈希前缀与文件名随版本变化都不会失效；只有上面那几个裸标签例外。
 
 ## 开发
 
 不需要浏览器，也不需要安装依赖（`node --test` 自带）：
 
 ```bash
-npm test                    # 15 项断言：调色板、样式表结构、生命周期、卸载路径
+npm test                    # 19 项断言：调色板、样式表结构、生命周期、卸载路径
 npm run check               # 语法检查
 node scripts/verify-manifest.mjs   # 清单/打包自检
 npm run verify              # 以上全部
@@ -85,7 +90,10 @@ npm run verify              # 以上全部
 - 焦点环存在、画在框内、不吞掉内凹阴影、不碰 checkbox / radio，且全文没有一处 `outline: none`，
 - 样式表在 `ctx.effect` 内插入：宿主拒绝注册 effect 时一张纸都不留，
 - 连续 apply 两次只留下一张样式表，
-- 浮雕落在卡片、输入区大板、菜单/对话框与会话行上，且各用各的阴影级。
+- 浮雕落在卡片、输入区大板、菜单/对话框与会话行上，且各用各的阴影级；按钮、输入框、悬停态、发送胶囊各自保着圆角与阴影（只断言"字符串出现过"就够，因为这里保护的是"规则还在"），
+- 没有任何按钮规则会强制底色（附件删除键上的叉号就是这样变成隐形的），且对比度圆盘还留着自己的填充，
+- 信号类 token 不会被置成 `transparent`（引用竖线、幽灵按钮选中态、行内代码），
+- 宿主拒绝插入样式表时，那张表会被撤回、异常照旧抛出。
 
 ## 许可
 

package/client.js

@@ -64,26 +64,30 @@ window.__ModuleLoader__.load({
       '--dsw-alias-menu-group-header-fill': FLAT,
       '--dsw-specific-bubble': FLAT,
       '--dsw-specific-bubble-highlight': FLAT,
-      '--dsw-specific-sidebar-nav-item-active': FLAT,
+      '--dsw-specific-sidebar-nav-item-active': HOVER,
       '--dsw-specific-sidebar-nav-item-active-accent': FLAT,
 
-      // ---- button fills: the same colour, relief comes from the shadow -----
-      '--dsw-alias-button-elevated-fill': FLAT,
-      '--dsw-alias-button-floating-fill': FLAT,
-      '--dsw-alias-button-floating-hover': FLAT,
-      '--dsw-alias-button-ghost-active-fill': FLAT,
-      '--dsw-alias-button-ghost-active-hover': FLAT,
-      '--dsw-alias-button-primary-dimmed': FLAT,
+      // ---- button fills ----------------------------------------------------
+      // Ghost fills vanish (the relief carries them), but a button that floats
+      // over content must be opaque: the "jump to latest" disc is painted from
+      // floating-fill, and a transparent disc lets the transcript scroll through
+      // it. Hover states keep a shade, or pressing feels like nothing happened.
+      '--dsw-alias-button-elevated-fill': SURFACE,
+      '--dsw-alias-button-floating-fill': SURFACE,
+      '--dsw-alias-button-floating-hover': HOVER,
+      '--dsw-alias-button-ghost-active-fill': HOVER,
+      '--dsw-alias-button-ghost-active-hover': HOVER,
+      '--dsw-alias-fill-tsp-secondary': SURFACE,
       '--dsw-alias-button-contrast-fill': { light: '#3a4450', dark: '#c9d3de' },
-      '--dsw-alias-interactive-bg-hover-solid': FLAT,
+      '--dsw-alias-interactive-bg-hover-solid': HOVER,
 
       // ---- code and inline panels: recessed, not tinted --------------------
       '--dsw-alias-markdown-code-block': FLAT,
       '--dsw-alias-markdown-code-block-banner': FLAT,
-      '--dsw-alias-markdown-inline-code': FLAT,
+      '--dsw-alias-markdown-inline-code': HOVER,
       '--dsw-alias-markdown-code-segment-selected': FLAT,
       '--dsw-alias-markdown-code-segment-unselected': FLAT,
-      '--dsw-alias-markdown-citation': FLAT,
+      '--dsw-alias-markdown-citation': SCROLL_HOVER,
       '--dsw-alias-markdown-tag': FLAT,
       '--dsw-alias-markdown-placeholder': FLAT,
 
@@ -153,10 +157,6 @@ window.__ModuleLoader__.load({
      */
     const guard = (anchor) => `${anchor}:not([class*="__"])`;
 
-    /** Anchors on a free-form class fragment (`_title`, `_label`). */
-    const sub = (...fragments) =>
-      fragments.map((fragment) => guard(`[class*="${fragment}"]`)).join(',\n  ');
-
     /** Anchors on a complete local name, in both host conventions. */
     const host = (...locals) =>
       locals
@@ -198,10 +198,22 @@ body[data-ds-dark-theme] {
 /* ---- text is flat ------------------------------------------------------
    Text never carries a plate of its own: a label sits on the surface, it does
    not sit in a slightly different rectangle. Only host markup is touched, and
-   only by the name the host gives it (see the host/sub helpers above), so a plugin's
-   own elements are never repainted. Nothing here targets a bare tag: a span is
-   not text until the host says so. */
-body :is(${sub('_label', '_title', '_value', '_text', '_name', '_desc', '_caption', '_hint', '_meta', '_timestamp')}, ${host(
+   only by a complete local name (see the host helper above), so neither a
+   plugin's own elements nor a longer host part ('_labelChip') is repainted.
+   Form controls are excluded even when their local reads like text, because a
+   rename field named '_name' is still a field with a plate of its own. Nothing
+   here targets a bare tag: a span is not text until the host says so. */
+body :is(${host(
+  'label',
+  'title',
+  'value',
+  'text',
+  'name',
+  'desc',
+  'caption',
+  'hint',
+  'meta',
+  'timestamp',
   'itemLabel',
   'runStateLabel',
   'dockHintLabel',
@@ -215,24 +227,35 @@ body :is(${sub('_label', '_title', '_value', '_text', '_name', '_desc', '_captio
   'otherValue',
   'keywordValue',
   'popoverText',
-)}) {
+)}):not(input):not(textarea):not(select):not([contenteditable="true"]) {
   background-color: transparent !important;
   box-shadow: none !important;
 }
 
 /* ---- controls: soft, raised --------------------------------------------
-   Buttons are objects again: a filled shape with the same paired light and
-   shade as the surface around it. Full-width rows and every control that
+   Buttons are objects again: a shape with the same paired light and shade as
+   the surface around it. The fill is deliberately not forced: every surface in
+   this theme is one colour, so a transparent button already sits flush on it,
+   while a host control that paints a functional disc (the attachment remove
+   button uses '--dsw-alias-button-contrast-fill') must keep it or its glyph
+   becomes invisible. Full-width rows and every control that
    lives inside a menu, a tab strip or a picker are excluded, because a
    shadow under a row that spans the panel reads as a stray line, and a
    stack of them reads as alternating high and low. */
 ${BUTTON_SELECTOR} {
-  border-radius: 12px !important;
   border-color: transparent !important;
-  background-color: var(--dsw-alias-bg-base) !important;
   box-shadow: var(--qn-out-sm) !important;
 }
 
+/* The shape is a rounded rectangle, except where the host draws a ring: the
+   jump-to-latest disc is a 34px circle and the attachment remove disc an 18px
+   one, and a 12px corner turns either into a small rounded square. Their own
+   radius is left alone instead of being restored afterwards, because a later
+   rule here could not out-rank this one. */
+${BUTTON_SELECTOR}:not(:is(${host('toBottom')})):not(:is(${host('remove')})) {
+  border-radius: 12px !important;
+}
+
 ${BUTTON_SELECTOR}:hover:not(:disabled) {
   box-shadow: var(--qn-out) !important;
 }
@@ -338,9 +361,15 @@ body :where(
   outline-offset: -2px !important;
 }
 
+/* Buttons and links keep a ring outside the shape, where it cannot be confused
+   with the relief, but it is declared important so that every control in the
+   product shows the same theme accent: the host draws its own ring inside
+   component-scoped rules (a business-blue ring with a positive offset), and
+   without the flag half the interface would stay blue while the fields are
+   steel. */
 body :where(button, [role="button"], a):focus-visible {
-  outline: 2px solid var(--dsw-alias-brand-primary);
-  outline-offset: 2px;
+  outline: 2px solid var(--dsw-alias-brand-primary) !important;
+  outline-offset: 2px !important;
 }
 `;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-theme-neumorph",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "DSH 新拟态主题插件：冷灰表面、钢蓝强调、柔和阴影。",
   "license": "MIT",
   "author": "wcnmamrs",