dsh-theme-palette 1.6.0 → 1.8.0
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/CHANGELOG.md +43 -0
- package/README-es.md +123 -82
- package/README-hi.md +123 -82
- package/README-pt.md +123 -82
- package/README-zh.md +125 -83
- package/README.md +124 -83
- package/client.js +650 -93
- package/docs/DESIGN.md +14 -0
- package/package.json +6 -1
package/CHANGELOG.md
CHANGED
|
@@ -4,6 +4,49 @@
|
|
|
4
4
|
|
|
5
5
|
## 版本一览
|
|
6
6
|
|
|
7
|
+
### 1.8.0
|
|
8
|
+
依据 [竞品调研](../../_audit-theme-palette-20261023/竞品调研-2026-10-23.md) 的差距反哺:把工程严谨变成可见、可分享、可验证的东西(不改求解器)。
|
|
9
|
+
|
|
10
|
+
- **对比度矩阵**:设置页新增可折叠「对比度」区,4 个前景角色 × 7 个承载面的实测/目标/表面受限三态;
|
|
11
|
+
`CONTRAST_SURFACES` / `CONTRAST_ROLES` 成为唯一定义,`palette-dev.mjs` 改为消费同一份(消除两套口径)
|
|
12
|
+
- **「试试示例」**:导入区一键填入演示短码并触发预览;码由生产 `encodeConfig` 运行时生成,schema 演进自动跟随
|
|
13
|
+
- **五语 README 叙事**:新增 `## Pitfalls we hit`(1.7.0 的 5 条审计事故)与 `## Trade-offs`
|
|
14
|
+
(明确不做玻璃/壁纸/市场/AI 生色),标题逐字一致由脚本断言
|
|
15
|
+
- **五语 `## Sharing`**:放一条真实示例短码(生产编码器生成 + `decodeConfig` 往返自检),说明它包含三色
|
|
16
|
+
- **截图资产重建**:4 张(浅/深/自定义面板含解释性校正/高对比),`screenshots.json` 3→4
|
|
17
|
+
- **主题包导出(单向)**:`npm run packs` 导出 `dsh-dream-skin/pack` 格式 8 个包(4 配色 × 明暗,每包 90 tokens),
|
|
18
|
+
全部通过正文/画布对比度自检;**不实现导入**——导入会绕过对比度求解器
|
|
19
|
+
- 工具:`preview-settings` 支持 `--notice/--hc/--out`,透传 `id/scope/title/data-*`;
|
|
20
|
+
新增 `sample-code` / `insert-readme-sections` / `insert-readme-gallery` / `export-theme-pack`;
|
|
21
|
+
`check-ui` 扩到 69+ 断言(矩阵、示例码可解码、五语标题一致、单一 SURFACES 定义)
|
|
22
|
+
- 无存储键变更;无求解器行为变更
|
|
23
|
+
|
|
24
|
+
### 1.7.0
|
|
25
|
+
依据 2026-10-23 审计反哺(对 DSH 0.2.1-rc.2 实际 token 与承载面核实):
|
|
26
|
+
|
|
27
|
+
- **A01 极端强调色**:`accentL` 钳位到 0.30–0.64;链接求解器改为双向搜索并对 00/60/150 同时达标;
|
|
28
|
+
新增 `--dsw-alias-button-info-fill` 覆盖(与主按钮一样按白字 4.5 压暗),不再出现白底白链/白勾
|
|
29
|
+
- **A02 自定义色订阅**:`readCustom` 改为按存储内容缓存的冻结快照,新增 `subscribeCustom`;
|
|
30
|
+
取色/重置/导入会更换引用并触发重渲染,空闲时快照稳定(`useSyncExternalStore` 语义)
|
|
31
|
+
- **A03 分享完整**:`dshs1.` 短码新增 `x`(三色),旧码仍可导入并提示未含自定义色;
|
|
32
|
+
`applyConfigCode` 返回 `{ok,hasCustom}`,非法码不部分写入
|
|
33
|
+
- **A04 承载面求解**:深色正文(50)、次级(300)、caption(500)补上求解;目标按承载面可达上限
|
|
34
|
+
钳位(0.93 余量),`palette-dev` 打印「实际/目标/可达」并标注「表面上限」,不再虚报 12/15;
|
|
35
|
+
caption 注释里的 6.5:1 更正为实测值
|
|
36
|
+
- **A05 文字色相**:自定义文字色相进入 700/750/1000/50 档(此前只取色度)
|
|
37
|
+
- **A06 HEX 校验**:改为 draft + 提交,非法值显示 `aria-invalid` 与行内错误,Enter 提交、Esc 回滚
|
|
38
|
+
- **A07 键盘模型**:分段控件 roving tabindex + 方向键/Home/End
|
|
39
|
+
- **A08 标签结构**:自定义色改为 `role=group` + 色盘/HEX 两个独立 label
|
|
40
|
+
- **A09 健康检测**:探针比对期望值(支持 `#rgb/#rrggbb/rgb()/rgba()`),报 `mismatched`;mono 覆盖更多 token
|
|
41
|
+
- **A10 测试门**:`palette-dev.mjs` 改用生产 `floors()`,支持 `--hc`,硬失败退出码 1
|
|
42
|
+
- **A11 边界**:grid/swatches 改 `minmax(min(100%,N),1fr)`;说明 `_markdown_`/`.md-code-block`
|
|
43
|
+
在当前宿主构建 CSS 中仍存在(属契约风险而非失效);ramp 缓存上限 48
|
|
44
|
+
- **建议落地**:自定义面板新增**解释性校正**(强调色归一化 / 链接压暗,带实际对比度);
|
|
45
|
+
导入改为**先预览后确认**(预览不写存储);新增按版本一次的**升级提示**(`notice.v1`,不碰配色键;
|
|
46
|
+
仅升级前已有配置的用户可见);高对比从「更多选项」移到阅读区;新增 `tools/check-host-contract.mjs`
|
|
47
|
+
契约测试与 `tools/check-ui.mjs` 结构回归,并把它们接入 `npm run check` 与发版预检
|
|
48
|
+
- 新增 `tools/check-audit.mjs`:覆盖极端色、分享往返、文字色相、caption、深色正文可达上限、HC 卡层
|
|
49
|
+
|
|
7
50
|
### 未发版 · 发版预检补强
|
|
8
51
|
- `tools/release.mjs` 新增 **engines.dsh 兼容性预检**:按宿主 app-boot 的同一口径
|
|
9
52
|
(`semver.satisfies(v, range, { includePrerelease: true })`)计算,守住两条底线——
|
package/README-es.md
CHANGED
|
@@ -1,91 +1,132 @@
|
|
|
1
|
-
# dsh-theme-palette
|
|
2
|
-
|
|
3
|
-
[English](README.md) · [中文](README-zh.md) · [Español](README-es.md) · [Português](README-pt.md) · [हिन्दी](README-hi.md)
|
|
4
|
-
|
|
5
|
-
Paleta de tema para DeepSeek Harness (web y escritorio): **4 paletas × claro/oscuro**, dos ejes independientes.
|
|
6
|
-
|
|
7
|
-

|
|
8
|
-
|
|
9
|
-
*Render estático con el ancho real del panel (564 px de contenido).*
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
- **
|
|
28
|
-
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
#
|
|
38
|
-
|
|
1
|
+
# dsh-theme-palette
|
|
2
|
+
|
|
3
|
+
[English](README.md) · [中文](README-zh.md) · [Español](README-es.md) · [Português](README-pt.md) · [हिन्दी](README-hi.md)
|
|
4
|
+
|
|
5
|
+
Paleta de tema para DeepSeek Harness (web y escritorio): **4 paletas × claro/oscuro**, dos ejes independientes.
|
|
6
|
+
|
|
7
|
+

|
|
8
|
+
|
|
9
|
+
*Render estático con el ancho real del panel (564 px de contenido).*
|
|
10
|
+
|
|
11
|
+
| Oscuro | Paleta personalizada | Alto contraste |
|
|
12
|
+
|---|---|---|
|
|
13
|
+
|  |  |  |
|
|
14
|
+
|
|
15
|
+
## Compatibility
|
|
16
|
+
|
|
17
|
+
| Superficie | Estado |
|
|
18
|
+
|---|---|
|
|
19
|
+
| Cliente DSH de escritorio / web | 0.2.x |
|
|
20
|
+
| Node.js | ≥ 20 |
|
|
21
|
+
| Cambios en el código del host | ninguno |
|
|
22
|
+
|
|
23
|
+
El plugin solo apila tokens de color mediante `ctx.theme.overrideTokens`; no registra un tema, no parchea el host y no toca la preferencia de apariencia.
|
|
24
|
+
|
|
25
|
+
## What it does
|
|
26
|
+
|
|
27
|
+
- **4 paletas** — Mono, Arena cálida, Índigo, Musgo — cada una adaptada de forma independiente a claro y oscuro;
|
|
28
|
+
- la escala se **recalcula** completa: reconstrucción OKLCH → croma por rol → **ajuste al gamut sRGB** → contraste resuelto sobre superficies reales;
|
|
29
|
+
- más de 27.000 referencias de token: texto, secundario, terciario, notas, enlaces, barras laterales, tarjetas, burbuja del usuario, botón primario, barras de desplazamiento, interruptores, títulos/negritas de Markdown, bloques de código;
|
|
30
|
+
- ajustable: intensidad del texto (3), profundidad de la barra lateral (3), panel derecho (2), énfasis de Markdown, barras de desplazamiento, color de interruptores;
|
|
31
|
+
- **autorreparable**: si el host descarta la capa de override, la paleta se vuelve a aplicar;
|
|
32
|
+
- interfaz en 简体中文 / 繁體中文 / English / 日本語 (sigue el idioma del host y se puede fijar).
|
|
33
|
+
|
|
34
|
+
## Install
|
|
35
|
+
|
|
36
|
+
```bash
|
|
37
|
+
# desde npm
|
|
38
|
+
cd ~/.dsh/profiles/desktop
|
|
39
|
+
pnpm add dsh-theme-palette
|
|
40
|
+
|
|
41
|
+
# o una versión concreta
|
|
42
|
+
pnpm add dsh-theme-palette@1.4.3
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
Desde el tarball del release de GitHub:
|
|
46
|
+
|
|
47
|
+
```bash
|
|
48
|
+
pnpm add "https://github.com/zuoyunlai/dsh-theme-palette/releases/download/v1.4.3/dsh-theme-palette-1.4.3.tgz"
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
Después **reinicia la interfaz**: un proceso en marcha conserva el módulo antiguo. Se abre en avatar → Ajustes → **Color theme**.
|
|
52
|
+
|
|
53
|
+
## Configuration
|
|
54
|
+
|
|
55
|
+
| Elemento | Opciones |
|
|
56
|
+
|---|---|
|
|
57
|
+
| Paleta | Mono · Arena cálida · Índigo · Musgo (las miniaturas siguen claro/oscuro) |
|
|
58
|
+
| Intensidad | Suave / Estándar / Fuerte — cuánto sigue el texto a la paleta |
|
|
59
|
+
| Superficies | Barra lateral (Más clara / Igual / Más oscura), panel derecho (Igual que la barra / Seguir el lienzo) |
|
|
60
|
+
| Más opciones | Idioma, énfasis de Markdown, barras de desplazamiento, interruptores |
|
|
61
|
+
|
|
62
|
+
Cada elección se aplica al instante y se guarda en `localStorage`. Claro/oscuro sigue en el control «Apariencia» del host.
|
|
63
|
+
|
|
64
|
+
## Palette engine
|
|
65
|
+
|
|
66
|
+
```
|
|
67
|
+
OKLCH(L, C, tono) ──► ajuste al gamut (búsqueda binaria en C) ──► hex sRGB
|
|
68
|
+
▲
|
|
69
|
+
└── croma por rol × intensidad, luego contraste sobre {lienzo, tarjeta, barra, superposición}
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
- los alias semánticos mantienen cadenas `var(--dsw-static-neutral-bluish-NN)`, así que todo lo que sigue a un token sigue a la paleta;
|
|
73
|
+
- superficies claras usan los pasos 00–300, las oscuras 800–950;
|
|
74
|
+
- los mínimos de texto se exigen en tiempo de construcción: cuerpo ≥ 12, secundario ≥ 6.1, terciario/enlace ≥ 4.6, texto en barra lateral ≥ 7, texto en burbuja ≥ 7;
|
|
75
|
+
- `node palette-dev.mjs` comprueba 432 combinaciones.
|
|
76
|
+
|
|
77
|
+
Las notas de diseño, el criterio por componente y las tablas de contraste están en [docs/DESIGN.md](docs/DESIGN.md). Historial: [CHANGELOG.md](CHANGELOG.md).
|
|
78
|
+
|
|
79
|
+
## Development
|
|
80
|
+
|
|
81
|
+
```bash
|
|
82
|
+
node palette-dev.mjs # informe de tokens de todas las paletas
|
|
83
|
+
node tools/sheet.mjs # tablero de paletas → tools/sheet.html
|
|
84
|
+
node tools/shoot-sheet.mjs # captura del tablero (Chrome headless)
|
|
85
|
+
node tools/compare.mjs --dir tools/out/<run> # comparar con la línea base
|
|
86
|
+
node tools/preview-settings.mjs --lang en # renderizar la página de ajustes
|
|
87
|
+
node tools/release.mjs --dry # preflight de publicación
|
|
88
|
+
node tools/release.mjs --tag # publicar en npm + tag
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
La regresión visual tiene dos capas: el tablero de paletas (sin autenticación) y la ventana real del escritorio vía CDP (`tools/shoot-desktop.mjs`, requiere `--remote-debugging-port`). Ver [tools/README.md](tools/README.md).
|
|
92
|
+
|
|
93
|
+
|
|
94
|
+
## Pitfalls we hit
|
|
95
|
+
|
|
96
|
+
Las cinco más sorprendentes de la auditoría de 1.7.0 — cada una la encontró un test, no mirando capturas.
|
|
97
|
+
|
|
98
|
+
- **Un acento blanco generaba un enlace blanco** (1.13:1). El solucionador de contraste solo avanzaba en una dirección, alejándose del fondo, así que un acento más claro que el fondo seguía yendo hacia el blanco.
|
|
99
|
+
- **Elegir un color cambiaba la página pero no el panel.** El componente se suscribía al id de paleta, que no cambia al cambiar un color; React comparó los snapshots, no vio diferencia y saltó el re-render.
|
|
100
|
+
- **Compartir una configuración no compartía los colores.** El código corto llevaba los modos pero no los tres colores personalizados, así que importar en otra máquina informaba éxito y conservaba los valores locales.
|
|
101
|
+
- **Las superficies modulares oscuras tienen un techo.** Aun el blanco puro llega solo a ~10.99:1 en la superficie más profunda, de modo que el objetivo 12:1 (15:1 en alto contraste) es físicamente inalcanzable ahí. Ajustamos al máximo alcanzable y lo etiquetamos.
|
|
102
|
+
- **Un selector que creíamos muerto estaba vivo.** La auditoría inicialmente lo reportó como roto; la prueba de contrato contra el CSS publicado demostró lo contrario. El hallazgo estaba equivocado, no el código.
|
|
103
|
+
|
|
104
|
+
## Sharing
|
|
105
|
+
|
|
106
|
+
Toda la configuración — incluidos los tres colores personalizados — viaja en un código corto. Pégalo en el cuadro de importación y pulsa Vista previa para ver qué cambiará antes de aplicar:
|
|
107
|
+
|
|
108
|
+
```text
|
|
109
|
+
dshs1.eyJ2IjoxLCJwIjoiY3VzdG9tIiwicyI6ImRlZXAiLCJ0IjoidGludGVkIiwiciI6InNpZGViYXIiLCJjIjoidGludGVkIiwiayI6ImFjY2VudCIsIm0iOiJvbiIsImgiOiJvZmYiLCJsIjoiemgtQ04iLCJ4Ijp7ImJnIjoiI2Y1ZWZlNiIsInRleHQiOiIjMWQxYTE3IiwiYWNjZW50IjoiIzNmNjZhMyJ9fQ
|
|
39
110
|
```
|
|
40
111
|
|
|
41
|
-
|
|
112
|
+
Este ejemplo real decodifica a:
|
|
42
113
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
Después **reinicia la interfaz**: un proceso en marcha conserva el módulo antiguo. Se abre en avatar → Ajustes → **Color theme**.
|
|
48
|
-
|
|
49
|
-
## Configuration
|
|
114
|
+
- paleta: custom · barra lateral: deep · texto: tinted · panel derecho: sidebar
|
|
115
|
+
- scrollbar: tinted · controles: accent · Markdown: on · alto contraste: off · idioma: zh-CN
|
|
116
|
+
- tres colores: `#f5efe6` (fondo) · `#1d1a17` (texto) · `#3f66a3` (acento)
|
|
50
117
|
|
|
51
|
-
|
|
52
|
-
|---|---|
|
|
53
|
-
| Paleta | Mono · Arena cálida · Índigo · Musgo (las miniaturas siguen claro/oscuro) |
|
|
54
|
-
| Intensidad | Suave / Estándar / Fuerte — cuánto sigue el texto a la paleta |
|
|
55
|
-
| Superficies | Barra lateral (Más clara / Igual / Más oscura), panel derecho (Igual que la barra / Seguir el lienzo) |
|
|
56
|
-
| Más opciones | Idioma, énfasis de Markdown, barras de desplazamiento, interruptores |
|
|
118
|
+
El código lo genera el codificador de producción y se auto-verifica ida y vuelta antes de entrar en este README — nunca se escribe a mano.
|
|
57
119
|
|
|
58
|
-
|
|
120
|
+
## Trade-offs
|
|
59
121
|
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
```
|
|
63
|
-
OKLCH(L, C, tono) ──► ajuste al gamut (búsqueda binaria en C) ──► hex sRGB
|
|
64
|
-
▲
|
|
65
|
-
└── croma por rol × intensidad, luego contraste sobre {lienzo, tarjeta, barra, superposición}
|
|
66
|
-
```
|
|
67
|
-
|
|
68
|
-
- los alias semánticos mantienen cadenas `var(--dsw-static-neutral-bluish-NN)`, así que todo lo que sigue a un token sigue a la paleta;
|
|
69
|
-
- superficies claras usan los pasos 00–300, las oscuras 800–950;
|
|
70
|
-
- los mínimos de texto se exigen en tiempo de construcción: cuerpo ≥ 12, secundario ≥ 6.1, terciario/enlace ≥ 4.6, texto en barra lateral ≥ 7, texto en burbuja ≥ 7;
|
|
71
|
-
- `node palette-dev.mjs` comprueba 432 combinaciones.
|
|
72
|
-
|
|
73
|
-
Las notas de diseño, el criterio por componente y las tablas de contraste están en [docs/DESIGN.md](docs/DESIGN.md). Historial: [CHANGELOG.md](CHANGELOG.md).
|
|
74
|
-
|
|
75
|
-
## Development
|
|
76
|
-
|
|
77
|
-
```bash
|
|
78
|
-
node palette-dev.mjs # informe de tokens de todas las paletas
|
|
79
|
-
node tools/sheet.mjs # tablero de paletas → tools/sheet.html
|
|
80
|
-
node tools/shoot-sheet.mjs # captura del tablero (Chrome headless)
|
|
81
|
-
node tools/compare.mjs --dir tools/out/<run> # comparar con la línea base
|
|
82
|
-
node tools/preview-settings.mjs --lang en # renderizar la página de ajustes
|
|
83
|
-
node tools/release.mjs --dry # preflight de publicación
|
|
84
|
-
node tools/release.mjs --tag # publicar en npm + tag
|
|
85
|
-
```
|
|
122
|
+
Otros plugins de tema aquí ofrecen cristal, fondos y animación. Decidimos no hacerlo:
|
|
86
123
|
|
|
87
|
-
|
|
124
|
+
- **Sin cristal ni fondos.** Esa carrera se gana con capturas; preferimos competir con pruebas.
|
|
125
|
+
- **Sin mercado de temas ni generación de color con IA.** Ambos introducen colores que no podemos garantizar; el solucionador de contraste es el activo.
|
|
126
|
+
- **Sin más paletas.** Cuatro preajustes más un generador de tres colores supera a diez elegidas a mano; el volumen no es la ventaja.
|
|
127
|
+
- **Sin promesas de "protección ocular".** Reportamos ratios medidos en las superficies donde el texto realmente cae y decimos "limitado por la superficie" cuando es todo lo que hay.
|
|
88
128
|
|
|
89
|
-
## License
|
|
90
129
|
|
|
91
|
-
|
|
130
|
+
## License
|
|
131
|
+
|
|
132
|
+
MIT © 2026 Zuoyunlai
|
package/README-hi.md
CHANGED
|
@@ -1,91 +1,132 @@
|
|
|
1
|
-
# dsh-theme-palette
|
|
2
|
-
|
|
3
|
-
[English](README.md) · [中文](README-zh.md) · [Español](README-es.md) · [Português](README-pt.md) · [हिन्दी](README-hi.md)
|
|
4
|
-
|
|
5
|
-
DeepSeek Harness (वेब और डेस्कटॉप) के लिए थीम पैलेट: **4 पैलेट × लाइट/डार्क**, दो स्वतंत्र अक्ष।
|
|
6
|
-
|
|
7
|
-

|
|
8
|
-
|
|
9
|
-
*पैनल की वास्तविक चौड़ाई (564px सामग्री) पर स्थिर रेंडर।*
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
-
|
|
28
|
-
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
#
|
|
38
|
-
|
|
1
|
+
# dsh-theme-palette
|
|
2
|
+
|
|
3
|
+
[English](README.md) · [中文](README-zh.md) · [Español](README-es.md) · [Português](README-pt.md) · [हिन्दी](README-hi.md)
|
|
4
|
+
|
|
5
|
+
DeepSeek Harness (वेब और डेस्कटॉप) के लिए थीम पैलेट: **4 पैलेट × लाइट/डार्क**, दो स्वतंत्र अक्ष।
|
|
6
|
+
|
|
7
|
+

|
|
8
|
+
|
|
9
|
+
*पैनल की वास्तविक चौड़ाई (564px सामग्री) पर स्थिर रेंडर।*
|
|
10
|
+
|
|
11
|
+
| डार्क | कस्टम पैलेट | उच्च कंट्रास्ट |
|
|
12
|
+
|---|---|---|
|
|
13
|
+
|  |  |  |
|
|
14
|
+
|
|
15
|
+
## Compatibility
|
|
16
|
+
|
|
17
|
+
| सतह | स्थिति |
|
|
18
|
+
|---|---|
|
|
19
|
+
| DSH डेस्कटॉप / वेब क्लाइंट | 0.2.x |
|
|
20
|
+
| Node.js | ≥ 20 |
|
|
21
|
+
| होस्ट सोर्स में बदलाव | कोई नहीं |
|
|
22
|
+
|
|
23
|
+
प्लगइन केवल `ctx.theme.overrideTokens` से रंग टोकन की एक परत जोड़ता है; यह नया थीम पंजीकृत नहीं करता, होस्ट को पैच नहीं करता और अपीयरेंस सेटिंग नहीं बदलता।
|
|
24
|
+
|
|
25
|
+
## What it does
|
|
26
|
+
|
|
27
|
+
- **4 पैलेट** — मोनो, वार्म सैंड, इंडिगो, मॉस — हर एक लाइट और डार्क दोनों के लिए अलग से अनुकूलित;
|
|
28
|
+
- पूरी रैंप **दोबारा गणना** होती है, बदली नहीं जाती: OKLCH पुनर्निर्माण → भूमिका-आधारित क्रोमा → **sRGB गैमट क्लैंप** → वास्तविक सतहों पर कंट्रास्ट हल;
|
|
29
|
+
- 27,000+ टोकन संदर्भ शामिल: मुख्य टेक्स्ट, द्वितीयक, तृतीयक, कैप्शन, लिंक, साइडबार, कार्ड, उपयोगकर्ता बबल, प्राइमरी बटन, स्क्रॉलबार, स्विच, Markdown शीर्षक/बोल्ड, कोड ब्लॉक;
|
|
30
|
+
- समायोज्य: टेक्स्ट की तीव्रता (3), साइडबार की गहराई (3), दायाँ पैनल (2), Markdown ज़ोर, स्क्रॉलबार, स्विच का रंग;
|
|
31
|
+
- **स्व-उपचार**: यदि होस्ट ओवरराइड परत हटा दे, पैलेट फिर से लगा दी जाती है;
|
|
32
|
+
- इंटरफ़ेस 简体中文 / 繁體中文 / English / 日本語 में (होस्ट की भाषा का पालन करता है, हाथ से भी चुना जा सकता है)।
|
|
33
|
+
|
|
34
|
+
## Install
|
|
35
|
+
|
|
36
|
+
```bash
|
|
37
|
+
# npm से
|
|
38
|
+
cd ~/.dsh/profiles/desktop
|
|
39
|
+
pnpm add dsh-theme-palette
|
|
40
|
+
|
|
41
|
+
# या कोई विशेष संस्करण
|
|
42
|
+
pnpm add dsh-theme-palette@1.4.3
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
GitHub रिलीज़ के tarball से:
|
|
46
|
+
|
|
47
|
+
```bash
|
|
48
|
+
pnpm add "https://github.com/zuoyunlai/dsh-theme-palette/releases/download/v1.4.3/dsh-theme-palette-1.4.3.tgz"
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
इसके बाद **GUI को फिर से शुरू करें** — चल रहा प्रोसेस पुराना मॉड्यूल रखता है। खोलें: अवतार → सेटिंग्स → **Color theme**।
|
|
52
|
+
|
|
53
|
+
## Configuration
|
|
54
|
+
|
|
55
|
+
| विकल्प | विकल्प |
|
|
56
|
+
|---|---|
|
|
57
|
+
| पैलेट | मोनो · वार्म सैंड · इंडिगो · मॉस (थंबनेल लाइट/डार्क का पालन करते हैं) |
|
|
58
|
+
| तीव्रता | शांत / मानक / गहरा — टेक्स्ट पैलेट का कितना पालन करे |
|
|
59
|
+
| सतहें | साइडबार (हल्का / समान / गहरा), दायाँ पैनल (साइडबार जैसा / कैनवास जैसा) |
|
|
60
|
+
| और विकल्प | भाषा, Markdown ज़ोर, स्क्रॉलबार, स्विच/चेक |
|
|
61
|
+
|
|
62
|
+
हर चुनाव तुरंत लागू होता है और `localStorage` में सहेजा जाता है। लाइट/डार्क होस्ट की «अपीयरेंस» सेटिंग में ही रहता है।
|
|
63
|
+
|
|
64
|
+
## Palette engine
|
|
65
|
+
|
|
66
|
+
```
|
|
67
|
+
OKLCH(L, C, ह्यू) ──► गैमट क्लैंप (C पर बाइनरी खोज) ──► sRGB हेक्स
|
|
68
|
+
▲
|
|
69
|
+
└── भूमिका क्रोमा × तीव्रता, फिर {कैनवास, कार्ड, साइडबार, ओवरले} पर कंट्रास्ट
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
- सेमांटिक एलियस `var(--dsw-static-neutral-bluish-NN)` श्रृंखलाएँ बनाए रखते हैं, इसलिए जो भी टोकन का पालन करता है वह पैलेट का भी करता है;
|
|
73
|
+
- लाइट सतहें स्टेप 00–300, डार्क सतहें 800–950;
|
|
74
|
+
- टेक्स्ट की न्यूनतम सीमा बनाते समय लागू: मुख्य ≥ 12, द्वितीयक ≥ 6.1, तृतीयक/लिंक ≥ 4.6, साइडबार में ≥ 7, बबल में ≥ 7;
|
|
75
|
+
- `node palette-dev.mjs` 432 संयोजन जाँचता है।
|
|
76
|
+
|
|
77
|
+
डिज़ाइन नोट्स, घटक-वार तर्क और कंट्रास्ट तालिकाएँ [docs/DESIGN.md](docs/DESIGN.md) में। इतिहास: [CHANGELOG.md](CHANGELOG.md)।
|
|
78
|
+
|
|
79
|
+
## Development
|
|
80
|
+
|
|
81
|
+
```bash
|
|
82
|
+
node palette-dev.mjs # सभी पैलेट का टोकन रिपोर्ट
|
|
83
|
+
node tools/sheet.mjs # पैलेट बोर्ड → tools/sheet.html
|
|
84
|
+
node tools/shoot-sheet.mjs # बोर्ड का स्क्रीनशॉट (हेडलेस Chrome)
|
|
85
|
+
node tools/compare.mjs --dir tools/out/<run> # बेसलाइन से तुलना
|
|
86
|
+
node tools/preview-settings.mjs --lang en # सेटिंग्स पेज रेंडर करें
|
|
87
|
+
node tools/release.mjs --dry # रिलीज़ प्रीफ़्लाइट
|
|
88
|
+
node tools/release.mjs --tag # npm पर प्रकाशित + टैग
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
स्क्रीनशॉट रिग्रेशन की दो परतें हैं: पैलेट बोर्ड (बिना लॉगिन) और CDP से असली डेस्कटॉप विंडो (`tools/shoot-desktop.mjs`, `--remote-debugging-port` चाहिए)। देखें [tools/README.md](tools/README.md)।
|
|
92
|
+
|
|
93
|
+
|
|
94
|
+
## Pitfalls we hit
|
|
95
|
+
|
|
96
|
+
1.7.0 ऑडिट में सबसे चौंकाने वाली पाँच बातें — हर एक टेस्ट से निकली, स्क्रीनशॉट देखकर नहीं।
|
|
97
|
+
|
|
98
|
+
- **सफ़ेद एक्सेंट से सफ़ेद लिंक बनता था** (1.13:1)। कॉन्ट्रास्ट सॉल्वर केवल एक ही दिशा में चलता था — बैकग्राउंड से दूर — इसलिए बैकग्राउंड से हल्का एक्सेंट सफ़ेद की ओर ही बढ़ता गया।
|
|
99
|
+
- **रंग बदलने पर पेज बदला, पैनल नहीं।** कंपोनेंट पैलेट id पर सब्सक्राइब था, जो रंग बदलने पर नहीं बदलता; React ने स्नैपशॉट की तुलना की, अंतर न मिला, और री-रेंडर छोड़ दिया।
|
|
100
|
+
- **कॉन्फ़िगरेशन साझा हुआ, रंग नहीं।** शॉर्ट कोड में मोड्स तो थे पर तीन कस्टम रंग नहीं, इसलिए दूसरी मशीन पर इम्पोर्ट सफल बताता और स्थानीय मान रख लेता था।
|
|
101
|
+
- **गहरे मॉड्यूल सतहों की एक सीमा है।** सबसे गहरी सतह पर शुद्ध सफ़ेद भी केवल ~10.99:1 तक पहुँचता है, इसलिए 12:1 (उच्च-कंट्रास्ट 15:1) वहाँ भौतिक रूप से असंभव है। अब हम उस सतह की अधिकतम प्राप्य सीमा तक समायोजित करके "सतह-सीमित" चिह्नित करते हैं।
|
|
102
|
+
- **एक चयनकर्ता जिसे हम मृत समझते थे, वह जीवित था।** ऑडिट ने शुरू में उसे टूटा बताया; शिप की गई CSS के विरुद्ध कॉन्ट्रैक्ट टेस्ट ने विपरीत साबित किया। गलती निष्कर्ष में थी, कोड में नहीं।
|
|
103
|
+
|
|
104
|
+
## Sharing
|
|
105
|
+
|
|
106
|
+
पूरी कॉन्फ़िगरेशन — तीन कस्टम रंगों समेत — एक ही शॉर्ट कोड में जाती है। इम्पोर्ट बॉक्स में पेस्ट करें और प्रीव्यू दबाएँ — लागू करने से पहले देखें कि क्या बदलेगा:
|
|
107
|
+
|
|
108
|
+
```text
|
|
109
|
+
dshs1.eyJ2IjoxLCJwIjoiY3VzdG9tIiwicyI6ImRlZXAiLCJ0IjoidGludGVkIiwiciI6InNpZGViYXIiLCJjIjoidGludGVkIiwiayI6ImFjY2VudCIsIm0iOiJvbiIsImgiOiJvZmYiLCJsIjoiemgtQ04iLCJ4Ijp7ImJnIjoiI2Y1ZWZlNiIsInRleHQiOiIjMWQxYTE3IiwiYWNjZW50IjoiIzNmNjZhMyJ9fQ
|
|
39
110
|
```
|
|
40
111
|
|
|
41
|
-
|
|
112
|
+
यह वास्तविक उदाहरण इसमें डिकोड होता है:
|
|
42
113
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
इसके बाद **GUI को फिर से शुरू करें** — चल रहा प्रोसेस पुराना मॉड्यूल रखता है। खोलें: अवतार → सेटिंग्स → **Color theme**।
|
|
48
|
-
|
|
49
|
-
## Configuration
|
|
114
|
+
- पैलेट: custom · साइडबार: deep · टेक्स्ट: tinted · दायाँ पैनल: sidebar
|
|
115
|
+
- स्क्रॉलबार: tinted · नियंत्रण: accent · Markdown: on · उच्च-कंट्रास्ट: off · भाषा: zh-CN
|
|
116
|
+
- तीन रंग: `#f5efe6` (फ़ॉन्ड) · `#1d1a17` (टेक्स्ट) · `#3f66a3` (एक्सेंट)
|
|
50
117
|
|
|
51
|
-
|
|
52
|
-
|---|---|
|
|
53
|
-
| पैलेट | मोनो · वार्म सैंड · इंडिगो · मॉस (थंबनेल लाइट/डार्क का पालन करते हैं) |
|
|
54
|
-
| तीव्रता | शांत / मानक / गहरा — टेक्स्ट पैलेट का कितना पालन करे |
|
|
55
|
-
| सतहें | साइडबार (हल्का / समान / गहरा), दायाँ पैनल (साइडबार जैसा / कैनवास जैसा) |
|
|
56
|
-
| और विकल्प | भाषा, Markdown ज़ोर, स्क्रॉलबार, स्विच/चेक |
|
|
118
|
+
कोड उत्पादन एनकोडर से बनता है और इस README में जाने से पहले आगे-पीछे आत्म-जाँचा जाता है — कभी हाथ से नहीं लिखा जाता।
|
|
57
119
|
|
|
58
|
-
|
|
120
|
+
## Trade-offs
|
|
59
121
|
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
```
|
|
63
|
-
OKLCH(L, C, ह्यू) ──► गैमट क्लैंप (C पर बाइनरी खोज) ──► sRGB हेक्स
|
|
64
|
-
▲
|
|
65
|
-
└── भूमिका क्रोमा × तीव्रता, फिर {कैनवास, कार्ड, साइडबार, ओवरले} पर कंट्रास्ट
|
|
66
|
-
```
|
|
67
|
-
|
|
68
|
-
- सेमांटिक एलियस `var(--dsw-static-neutral-bluish-NN)` श्रृंखलाएँ बनाए रखते हैं, इसलिए जो भी टोकन का पालन करता है वह पैलेट का भी करता है;
|
|
69
|
-
- लाइट सतहें स्टेप 00–300, डार्क सतहें 800–950;
|
|
70
|
-
- टेक्स्ट की न्यूनतम सीमा बनाते समय लागू: मुख्य ≥ 12, द्वितीयक ≥ 6.1, तृतीयक/लिंक ≥ 4.6, साइडबार में ≥ 7, बबल में ≥ 7;
|
|
71
|
-
- `node palette-dev.mjs` 432 संयोजन जाँचता है।
|
|
72
|
-
|
|
73
|
-
डिज़ाइन नोट्स, घटक-वार तर्क और कंट्रास्ट तालिकाएँ [docs/DESIGN.md](docs/DESIGN.md) में। इतिहास: [CHANGELOG.md](CHANGELOG.md)।
|
|
74
|
-
|
|
75
|
-
## Development
|
|
76
|
-
|
|
77
|
-
```bash
|
|
78
|
-
node palette-dev.mjs # सभी पैलेट का टोकन रिपोर्ट
|
|
79
|
-
node tools/sheet.mjs # पैलेट बोर्ड → tools/sheet.html
|
|
80
|
-
node tools/shoot-sheet.mjs # बोर्ड का स्क्रीनशॉट (हेडलेस Chrome)
|
|
81
|
-
node tools/compare.mjs --dir tools/out/<run> # बेसलाइन से तुलना
|
|
82
|
-
node tools/preview-settings.mjs --lang en # सेटिंग्स पेज रेंडर करें
|
|
83
|
-
node tools/release.mjs --dry # रिलीज़ प्रीफ़्लाइट
|
|
84
|
-
node tools/release.mjs --tag # npm पर प्रकाशित + टैग
|
|
85
|
-
```
|
|
122
|
+
यहाँ के अन्य थीम प्लगइन ग्लास, वॉलपेपर और एनिमेशन देते हैं। हम जानबूझकर नहीं करते:
|
|
86
123
|
|
|
87
|
-
|
|
124
|
+
- **न ग्लास, न वॉलपेपर।** वे स्क्रीनशॉट से जीतते हैं; हम प्रमाण से जीतना चाहते हैं।
|
|
125
|
+
- **न थीम मार्केट, न AI रंग सृजन।** दोनों ऐसे रंग लाते हैं जिन्हें हम गारंटी नहीं दे सकते; कॉन्ट्रास्ट सॉल्वर ही संपत्ति है।
|
|
126
|
+
- **और पैलेट नहीं।** चार प्रीसेट + तीन-रंग जनरेटर, हाथ से चुने दस से बेहतर है; मात्रा बढ़ाना फ़ायदा नहीं।
|
|
127
|
+
- **न आँखों की सुरक्षा के वादे।** हम उसी सतह पर मापे अनुपात बताते हैं जहाँ टेक्स्ट वास्तव में बैठता है, और जहाँ यही ऊपरी सीमा हो वहाँ "सतह-सीमित" कहते हैं।
|
|
88
128
|
|
|
89
|
-
## License
|
|
90
129
|
|
|
91
|
-
|
|
130
|
+
## License
|
|
131
|
+
|
|
132
|
+
MIT © 2026 Zuoyunlai
|