dsh-theme-neumorph 1.0.3 → 1.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +13 -7
- package/client.js +35 -18
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -35,9 +35,12 @@
|
|
|
35
35
|
主题只动宿主自己画的界面,不碰第三方插件:
|
|
36
36
|
|
|
37
37
|
- 宿主同时用着**两套** CSS Module 命名:预构建样式表是 `_<local>_<hash>_<line>`(`_card_7gxqk_107`),组件从 JS 注入的样式是 `<hash>_<local>`(`wSkVaW_card`)。所以一个类名要同时锚定两次——`[class$="_card"]` 与 `[class*="_card_"]`——只写一种就会有一半界面纹丝不动。
|
|
38
|
-
-
|
|
39
|
-
- 每个类名锚定都带 `:not([class*="__"])`:宿主是**单**下划线,别人家的 BEM 是**双**下划线,这一条挡住的正是 `panel__card
|
|
40
|
-
-
|
|
38
|
+
- 凡是要**加**规则的地方,锚定的都是**完整的 local 名**,而且一定用下划线夹住(`[class*="_card_"]` 而不是 `[class*="_card"]`),否则会串到 `_cardContent_x_y`、`_labelChip` 这种更长的零件上,卡片的每一块又各得一层投影。只有**排除**项才允许宽泛的片段(`button:not([class*="_row"])` 这类),因为排除范围宽一点只会少上一条浮雕,不会多毁一块界面。
|
|
39
|
+
- 每个类名锚定都带 `:not([class*="__"])`:宿主是**单**下划线,别人家的 BEM 是**双**下划线,这一条挡住的正是 `panel__card`。
|
|
40
|
+
- 裸标签只出现在三处:宿主的表单与代码面(`textarea`、`input`、`select`、`pre`)、可编辑文本(`[contenteditable="true"]`),以及必须同时带宿主类名的控件(`button` / `[role="button"]` / `a` + `[class*="_"]`)。`span` 不被当成文字。
|
|
41
|
+
- 不强制按钮底色。主题里所有表面是同一个颜色,透明按钮本来就与表面齐平;而宿主有些控件是**功能填充**(附件删除键的圆盘用 `--dsw-alias-button-contrast-fill`、叉号用 `--dsw-alias-label-primary-inverted`),一旦被灌成表面色,叉号就在近白底上消失了。所以按钮只加圆角与浮雕,填充留给宿主。
|
|
42
|
+
- 文本会被拍平,但表单控件不会:宿主的重命名输入框类名就叫 `ymsBma_name`,它在文字规则里必须被 `:not(input):not(textarea):not(select)` 放行,否则那块输入框看起来就是一行纯文本。
|
|
43
|
+
- 不是每个 token 都是"板子"。引用竖线(`--dsw-alias-markdown-citation`)、幽灵按钮的选中态(`--dsw-alias-button-ghost-active-fill`)、行内代码(`--dsw-alias-markdown-inline-code`)是宿主的**信号**,置成 `transparent` 等于把它们删掉,所以它们保留一层浅色,而不是跟其他表面一起消失。
|
|
41
44
|
- 文本框的焦点指示不用宿主的外扩轮廓(在软表面上像一圈多余的蓝边),改成画在框内侧的 1.5px 钢蓝内缘;`outline-offset: -2px` 与内凹阴影叠加而不是替换它。checkbox / radio / 原生控件完全不碰,宿主自己的焦点环留给它们。
|
|
42
45
|
|
|
43
46
|
## 目录结构
|
|
@@ -62,15 +65,15 @@
|
|
|
62
65
|
|
|
63
66
|
- Client 半通过 `window.__ModuleLoader__.load({ id, factory })` 注册,`factory` 返回 `{ inject: ['theme'], apply(ctx) }`。
|
|
64
67
|
- 所有副作用都包在 `ctx.effect()` 里并返回清理函数:样式表在 effect 内插入(effect 被拒就一张纸都不留),重复 apply 时先删掉自己上一张,停用时先移除样式表再撤销 token 覆盖层,界面立刻回到原生外观。
|
|
65
|
-
- 若宿主某天拒绝含 `--dsw-radius-*` 的 token
|
|
66
|
-
-
|
|
68
|
+
- 若宿主某天拒绝含 `--dsw-radius-*` 的 token 表,会退回只含颜色的 66 项重试一次;连重试也被拒时保留阴影层并告警,而不是把主题整个掀掉。这是一条防御路径——目前这版宿主只校验 token 值的形状(是否 `{ light, dark }`),不校验名字,所以实际上不会走到。
|
|
69
|
+
- 颜色层之外的一切都用宿主类名锚定 CSS Module,哈希前缀与文件名随版本变化都不会失效;只有上面那几个裸标签例外。
|
|
67
70
|
|
|
68
71
|
## 开发
|
|
69
72
|
|
|
70
73
|
不需要浏览器,也不需要安装依赖(`node --test` 自带):
|
|
71
74
|
|
|
72
75
|
```bash
|
|
73
|
-
npm test #
|
|
76
|
+
npm test # 19 项断言:调色板、样式表结构、生命周期、卸载路径
|
|
74
77
|
npm run check # 语法检查
|
|
75
78
|
node scripts/verify-manifest.mjs # 清单/打包自检
|
|
76
79
|
npm run verify # 以上全部
|
|
@@ -85,7 +88,10 @@ npm run verify # 以上全部
|
|
|
85
88
|
- 焦点环存在、画在框内、不吞掉内凹阴影、不碰 checkbox / radio,且全文没有一处 `outline: none`,
|
|
86
89
|
- 样式表在 `ctx.effect` 内插入:宿主拒绝注册 effect 时一张纸都不留,
|
|
87
90
|
- 连续 apply 两次只留下一张样式表,
|
|
88
|
-
-
|
|
91
|
+
- 浮雕落在卡片、输入区大板、菜单/对话框与会话行上,且各用各的阴影级;按钮、输入框、悬停态、发送胶囊各自保着圆角与阴影(只断言"字符串出现过"就够,因为这里保护的是"规则还在"),
|
|
92
|
+
- 没有任何按钮规则会强制底色(附件删除键上的叉号就是这样变成隐形的),且对比度圆盘还留着自己的填充,
|
|
93
|
+
- 信号类 token 不会被置成 `transparent`(引用竖线、幽灵按钮选中态、行内代码),
|
|
94
|
+
- 宿主拒绝插入样式表时,那张表会被撤回、异常照旧抛出。
|
|
89
95
|
|
|
90
96
|
## 许可
|
|
91
97
|
|
package/client.js
CHANGED
|
@@ -71,19 +71,19 @@ window.__ModuleLoader__.load({
|
|
|
71
71
|
'--dsw-alias-button-elevated-fill': FLAT,
|
|
72
72
|
'--dsw-alias-button-floating-fill': FLAT,
|
|
73
73
|
'--dsw-alias-button-floating-hover': FLAT,
|
|
74
|
-
'--dsw-alias-button-ghost-active-fill':
|
|
74
|
+
'--dsw-alias-button-ghost-active-fill': HOVER,
|
|
75
75
|
'--dsw-alias-button-ghost-active-hover': FLAT,
|
|
76
|
-
'--dsw-alias-
|
|
76
|
+
'--dsw-alias-fill-tsp-secondary': SURFACE,
|
|
77
77
|
'--dsw-alias-button-contrast-fill': { light: '#3a4450', dark: '#c9d3de' },
|
|
78
78
|
'--dsw-alias-interactive-bg-hover-solid': FLAT,
|
|
79
79
|
|
|
80
80
|
// ---- code and inline panels: recessed, not tinted --------------------
|
|
81
81
|
'--dsw-alias-markdown-code-block': FLAT,
|
|
82
82
|
'--dsw-alias-markdown-code-block-banner': FLAT,
|
|
83
|
-
'--dsw-alias-markdown-inline-code':
|
|
83
|
+
'--dsw-alias-markdown-inline-code': HOVER,
|
|
84
84
|
'--dsw-alias-markdown-code-segment-selected': FLAT,
|
|
85
85
|
'--dsw-alias-markdown-code-segment-unselected': FLAT,
|
|
86
|
-
'--dsw-alias-markdown-citation':
|
|
86
|
+
'--dsw-alias-markdown-citation': SCROLL_HOVER,
|
|
87
87
|
'--dsw-alias-markdown-tag': FLAT,
|
|
88
88
|
'--dsw-alias-markdown-placeholder': FLAT,
|
|
89
89
|
|
|
@@ -153,10 +153,6 @@ window.__ModuleLoader__.load({
|
|
|
153
153
|
*/
|
|
154
154
|
const guard = (anchor) => `${anchor}:not([class*="__"])`;
|
|
155
155
|
|
|
156
|
-
/** Anchors on a free-form class fragment (`_title`, `_label`). */
|
|
157
|
-
const sub = (...fragments) =>
|
|
158
|
-
fragments.map((fragment) => guard(`[class*="${fragment}"]`)).join(',\n ');
|
|
159
|
-
|
|
160
156
|
/** Anchors on a complete local name, in both host conventions. */
|
|
161
157
|
const host = (...locals) =>
|
|
162
158
|
locals
|
|
@@ -198,10 +194,22 @@ body[data-ds-dark-theme] {
|
|
|
198
194
|
/* ---- text is flat ------------------------------------------------------
|
|
199
195
|
Text never carries a plate of its own: a label sits on the surface, it does
|
|
200
196
|
not sit in a slightly different rectangle. Only host markup is touched, and
|
|
201
|
-
only by
|
|
202
|
-
own elements
|
|
203
|
-
|
|
204
|
-
|
|
197
|
+
only by a complete local name (see the host helper above), so neither a
|
|
198
|
+
plugin's own elements nor a longer host part ('_labelChip') is repainted.
|
|
199
|
+
Form controls are excluded even when their local reads like text, because a
|
|
200
|
+
rename field named '_name' is still a field with a plate of its own. Nothing
|
|
201
|
+
here targets a bare tag: a span is not text until the host says so. */
|
|
202
|
+
body :is(${host(
|
|
203
|
+
'label',
|
|
204
|
+
'title',
|
|
205
|
+
'value',
|
|
206
|
+
'text',
|
|
207
|
+
'name',
|
|
208
|
+
'desc',
|
|
209
|
+
'caption',
|
|
210
|
+
'hint',
|
|
211
|
+
'meta',
|
|
212
|
+
'timestamp',
|
|
205
213
|
'itemLabel',
|
|
206
214
|
'runStateLabel',
|
|
207
215
|
'dockHintLabel',
|
|
@@ -215,21 +223,24 @@ body :is(${sub('_label', '_title', '_value', '_text', '_name', '_desc', '_captio
|
|
|
215
223
|
'otherValue',
|
|
216
224
|
'keywordValue',
|
|
217
225
|
'popoverText',
|
|
218
|
-
)}) {
|
|
226
|
+
)}):not(input):not(textarea):not(select):not([contenteditable="true"]) {
|
|
219
227
|
background-color: transparent !important;
|
|
220
228
|
box-shadow: none !important;
|
|
221
229
|
}
|
|
222
230
|
|
|
223
231
|
/* ---- controls: soft, raised --------------------------------------------
|
|
224
|
-
Buttons are objects again: a
|
|
225
|
-
|
|
232
|
+
Buttons are objects again: a shape with the same paired light and shade as
|
|
233
|
+
the surface around it. The fill is deliberately not forced: every surface in
|
|
234
|
+
this theme is one colour, so a transparent button already sits flush on it,
|
|
235
|
+
while a host control that paints a functional disc (the attachment remove
|
|
236
|
+
button uses '--dsw-alias-button-contrast-fill') must keep it or its glyph
|
|
237
|
+
becomes invisible. Full-width rows and every control that
|
|
226
238
|
lives inside a menu, a tab strip or a picker are excluded, because a
|
|
227
239
|
shadow under a row that spans the panel reads as a stray line, and a
|
|
228
240
|
stack of them reads as alternating high and low. */
|
|
229
241
|
${BUTTON_SELECTOR} {
|
|
230
242
|
border-radius: 12px !important;
|
|
231
243
|
border-color: transparent !important;
|
|
232
|
-
background-color: var(--dsw-alias-bg-base) !important;
|
|
233
244
|
box-shadow: var(--qn-out-sm) !important;
|
|
234
245
|
}
|
|
235
246
|
|
|
@@ -338,9 +349,15 @@ body :where(
|
|
|
338
349
|
outline-offset: -2px !important;
|
|
339
350
|
}
|
|
340
351
|
|
|
352
|
+
/* Buttons and links keep a ring outside the shape, where it cannot be confused
|
|
353
|
+
with the relief, but it is declared important so that every control in the
|
|
354
|
+
product shows the same theme accent: the host draws its own ring inside
|
|
355
|
+
component-scoped rules (a business-blue ring with a positive offset), and
|
|
356
|
+
without the flag half the interface would stay blue while the fields are
|
|
357
|
+
steel. */
|
|
341
358
|
body :where(button, [role="button"], a):focus-visible {
|
|
342
|
-
outline: 2px solid var(--dsw-alias-brand-primary);
|
|
343
|
-
outline-offset: 2px;
|
|
359
|
+
outline: 2px solid var(--dsw-alias-brand-primary) !important;
|
|
360
|
+
outline-offset: 2px !important;
|
|
344
361
|
}
|
|
345
362
|
`;
|
|
346
363
|
|