@d0nj/dsh-ui-custom 0.0.0-stage → 0.1.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/LICENSE +24 -0
- package/README.md +82 -2
- package/cordis.patch.yml +22 -0
- package/dist/client/client.js +1313 -0
- package/dist/client/index.d.ts +69 -0
- package/dist/client/index.js +324 -0
- package/dist/client/panel.d.ts +85 -0
- package/dist/client/panel.js +294 -0
- package/dist/index.d.ts +83 -0
- package/dist/index.js +143 -0
- package/dist/resolve.d.ts +116 -0
- package/dist/resolve.js +149 -0
- package/dist/spec.d.ts +101 -0
- package/dist/spec.js +509 -0
- package/icon.svg +15 -0
- package/locale/en.json +6 -0
- package/locale/zh.json +6 -0
- package/package.json +71 -3
package/dist/spec.js
ADDED
|
@@ -0,0 +1,509 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* The token catalog and the shipped presets.
|
|
3
|
+
*
|
|
4
|
+
* Every override must supply **both** palette modes. The theme runtime requires
|
|
5
|
+
* it (`ThemeTokenModes`), because a token defined for only one scheme goes
|
|
6
|
+
* illegible when the user flips to the other — so this module represents that
|
|
7
|
+
* requirement in the type rather than trusting each caller to remember it.
|
|
8
|
+
*
|
|
9
|
+
* @module @d0nj/dsh-ui-custom/spec
|
|
10
|
+
*/
|
|
11
|
+
/** Groups in display order, with their headings. */
|
|
12
|
+
export const TOKEN_GROUPS = [
|
|
13
|
+
{ id: 'surface', label: 'Surfaces' },
|
|
14
|
+
{ id: 'border', label: 'Borders' },
|
|
15
|
+
{ id: 'text', label: 'Text' },
|
|
16
|
+
{ id: 'accent', label: 'Accent' },
|
|
17
|
+
{ id: 'state', label: 'State colours' },
|
|
18
|
+
];
|
|
19
|
+
/**
|
|
20
|
+
* The documented alias tokens.
|
|
21
|
+
*
|
|
22
|
+
* These are the tokens the theme Inspect provider reports for this build, so the
|
|
23
|
+
* editor never offers a row that would silently do nothing.
|
|
24
|
+
*/
|
|
25
|
+
export const TOKEN_SPECS = [
|
|
26
|
+
{
|
|
27
|
+
name: '--dsw-alias-bg-base',
|
|
28
|
+
label: 'Base background',
|
|
29
|
+
group: 'surface',
|
|
30
|
+
kind: 'color',
|
|
31
|
+
description: 'Application base background.',
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
name: '--dsw-alias-bg-layer-1',
|
|
35
|
+
label: 'Raised surface',
|
|
36
|
+
group: 'surface',
|
|
37
|
+
kind: 'color',
|
|
38
|
+
description: 'Primary raised surface background.',
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
name: '--dsw-alias-bg-layer-2',
|
|
42
|
+
label: 'Nested surface',
|
|
43
|
+
group: 'surface',
|
|
44
|
+
kind: 'color',
|
|
45
|
+
description: 'Secondary nested surface background.',
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
name: '--dsw-alias-bg-overlay',
|
|
49
|
+
label: 'Overlay',
|
|
50
|
+
group: 'surface',
|
|
51
|
+
kind: 'color',
|
|
52
|
+
description: 'Overlay and popover background.',
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
name: '--dsw-specific-sidebar-fill',
|
|
56
|
+
label: 'Sidebar',
|
|
57
|
+
group: 'surface',
|
|
58
|
+
kind: 'color',
|
|
59
|
+
description: 'Sidebar column and title-row background.',
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
name: '--dsw-alias-border-l1',
|
|
63
|
+
label: 'Border, subtle',
|
|
64
|
+
group: 'border',
|
|
65
|
+
kind: 'color',
|
|
66
|
+
description: 'Primary subtle border.',
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
name: '--dsw-alias-border-l2',
|
|
70
|
+
label: 'Border, strong',
|
|
71
|
+
group: 'border',
|
|
72
|
+
kind: 'color',
|
|
73
|
+
description: 'Secondary stronger border.',
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
name: '--dsw-alias-label-primary',
|
|
77
|
+
label: 'Primary text',
|
|
78
|
+
group: 'text',
|
|
79
|
+
kind: 'color',
|
|
80
|
+
description: 'Primary text colour.',
|
|
81
|
+
},
|
|
82
|
+
{
|
|
83
|
+
name: '--dsw-alias-label-secondary',
|
|
84
|
+
label: 'Secondary text',
|
|
85
|
+
group: 'text',
|
|
86
|
+
kind: 'color',
|
|
87
|
+
description: 'Secondary text colour.',
|
|
88
|
+
},
|
|
89
|
+
{
|
|
90
|
+
name: '--dsw-alias-brand-primary',
|
|
91
|
+
label: 'Brand accent',
|
|
92
|
+
group: 'accent',
|
|
93
|
+
kind: 'color',
|
|
94
|
+
description: 'Primary brand accent.',
|
|
95
|
+
},
|
|
96
|
+
{
|
|
97
|
+
name: '--dsw-alias-state-error-primary',
|
|
98
|
+
label: 'Error',
|
|
99
|
+
group: 'state',
|
|
100
|
+
kind: 'color',
|
|
101
|
+
description: 'Primary error state colour.',
|
|
102
|
+
},
|
|
103
|
+
{
|
|
104
|
+
name: '--dsw-alias-state-success-primary',
|
|
105
|
+
label: 'Success',
|
|
106
|
+
group: 'state',
|
|
107
|
+
kind: 'color',
|
|
108
|
+
description: 'Primary success state colour.',
|
|
109
|
+
},
|
|
110
|
+
{
|
|
111
|
+
name: '--dsw-alias-state-warn-primary',
|
|
112
|
+
label: 'Warning',
|
|
113
|
+
group: 'state',
|
|
114
|
+
kind: 'color',
|
|
115
|
+
description: 'Primary warning state colour.',
|
|
116
|
+
},
|
|
117
|
+
{
|
|
118
|
+
name: '--dsw-alias-state-idle-primary',
|
|
119
|
+
label: 'Idle',
|
|
120
|
+
group: 'state',
|
|
121
|
+
kind: 'color',
|
|
122
|
+
description: 'Primary inactive state colour.',
|
|
123
|
+
},
|
|
124
|
+
];
|
|
125
|
+
/** Every documented token name, for validation. */
|
|
126
|
+
export const TOKEN_NAMES = TOKEN_SPECS.map((spec) => spec.name);
|
|
127
|
+
/**
|
|
128
|
+
* Look up one token's specification.
|
|
129
|
+
* @param name - CSS custom property name.
|
|
130
|
+
* @returns the specification, or `undefined` when the token is not documented.
|
|
131
|
+
*/
|
|
132
|
+
export function tokenSpec(name) {
|
|
133
|
+
return TOKEN_SPECS.find((spec) => spec.name === name);
|
|
134
|
+
}
|
|
135
|
+
/**
|
|
136
|
+
* Shipped presets.
|
|
137
|
+
*
|
|
138
|
+
* Each is a complete token set rather than a partial overlay, so selecting one
|
|
139
|
+
* gives a predictable result no matter what the generated base palette does.
|
|
140
|
+
* The colours are chosen to keep body text at or above WCAG AA contrast against
|
|
141
|
+
* their own surfaces, which the tests check.
|
|
142
|
+
*/
|
|
143
|
+
export const PRESETS = [
|
|
144
|
+
{
|
|
145
|
+
id: 'midnight',
|
|
146
|
+
label: 'Midnight',
|
|
147
|
+
description: 'Deep blue-black surfaces with a cool accent.',
|
|
148
|
+
colorScheme: 'dark',
|
|
149
|
+
tokens: {
|
|
150
|
+
'--dsw-alias-bg-base': { light: '#f4f6fb', dark: '#0b1020' },
|
|
151
|
+
'--dsw-alias-bg-layer-1': { light: '#ffffff', dark: '#141a2e' },
|
|
152
|
+
'--dsw-alias-bg-layer-2': { light: '#eef1f8', dark: '#1c2440' },
|
|
153
|
+
'--dsw-alias-bg-overlay': { light: '#ffffff', dark: '#1f2745' },
|
|
154
|
+
'--dsw-specific-sidebar-fill': { light: '#e9edf6', dark: '#080d1a' },
|
|
155
|
+
'--dsw-alias-border-l1': { light: '#d9dfec', dark: '#232c48' },
|
|
156
|
+
'--dsw-alias-border-l2': { light: '#c2cade', dark: '#33405f' },
|
|
157
|
+
'--dsw-alias-label-primary': { light: '#111827', dark: '#e8ecf7' },
|
|
158
|
+
'--dsw-alias-label-secondary': { light: '#4b5563', dark: '#9aa5bf' },
|
|
159
|
+
'--dsw-alias-brand-primary': { light: '#2563eb', dark: '#7aa2ff' },
|
|
160
|
+
'--dsw-alias-state-error-primary': { light: '#b91c1c', dark: '#ff8f8f' },
|
|
161
|
+
'--dsw-alias-state-success-primary': { light: '#047857', dark: '#5fd4a0' },
|
|
162
|
+
'--dsw-alias-state-warn-primary': { light: '#a16207', dark: '#f5c26b' },
|
|
163
|
+
'--dsw-alias-state-idle-primary': { light: '#6b7280', dark: '#8792ab' },
|
|
164
|
+
},
|
|
165
|
+
},
|
|
166
|
+
{
|
|
167
|
+
id: 'paper',
|
|
168
|
+
label: 'Paper',
|
|
169
|
+
description: 'Warm off-white surfaces with ink-black text.',
|
|
170
|
+
colorScheme: 'light',
|
|
171
|
+
tokens: {
|
|
172
|
+
'--dsw-alias-bg-base': { light: '#faf7f0', dark: '#17150f' },
|
|
173
|
+
'--dsw-alias-bg-layer-1': { light: '#fffdf8', dark: '#221f16' },
|
|
174
|
+
'--dsw-alias-bg-layer-2': { light: '#f3efe4', dark: '#2b2619' },
|
|
175
|
+
'--dsw-alias-bg-overlay': { light: '#fffdf8', dark: '#2f2a1c' },
|
|
176
|
+
'--dsw-specific-sidebar-fill': { light: '#f2ecdf', dark: '#12100a' },
|
|
177
|
+
'--dsw-alias-border-l1': { light: '#e2dcc9', dark: '#3a3323' },
|
|
178
|
+
'--dsw-alias-border-l2': { light: '#cfc7ad', dark: '#4d442e' },
|
|
179
|
+
'--dsw-alias-label-primary': { light: '#1c1a14', dark: '#f0ebdd' },
|
|
180
|
+
'--dsw-alias-label-secondary': { light: '#5c5545', dark: '#b3aa92' },
|
|
181
|
+
'--dsw-alias-brand-primary': { light: '#8a4b12', dark: '#e0a061' },
|
|
182
|
+
'--dsw-alias-state-error-primary': { light: '#9b1c1c', dark: '#f08a8a' },
|
|
183
|
+
'--dsw-alias-state-success-primary': { light: '#3f6212', dark: '#9fcb63' },
|
|
184
|
+
'--dsw-alias-state-warn-primary': { light: '#8a5a00', dark: '#e8c063' },
|
|
185
|
+
'--dsw-alias-state-idle-primary': { light: '#6f6757', dark: '#8e856f' },
|
|
186
|
+
},
|
|
187
|
+
},
|
|
188
|
+
{
|
|
189
|
+
id: 'high-contrast',
|
|
190
|
+
label: 'High contrast',
|
|
191
|
+
description: 'Maximum separation for low-vision use.',
|
|
192
|
+
colorScheme: 'dark',
|
|
193
|
+
tokens: {
|
|
194
|
+
'--dsw-alias-bg-base': { light: '#ffffff', dark: '#000000' },
|
|
195
|
+
'--dsw-alias-bg-layer-1': { light: '#ffffff', dark: '#0a0a0a' },
|
|
196
|
+
'--dsw-alias-bg-layer-2': { light: '#f2f2f2', dark: '#141414' },
|
|
197
|
+
'--dsw-alias-bg-overlay': { light: '#ffffff', dark: '#141414' },
|
|
198
|
+
'--dsw-specific-sidebar-fill': { light: '#ebebeb', dark: '#000000' },
|
|
199
|
+
'--dsw-alias-border-l1': { light: '#767676', dark: '#8a8a8a' },
|
|
200
|
+
'--dsw-alias-border-l2': { light: '#000000', dark: '#ffffff' },
|
|
201
|
+
'--dsw-alias-label-primary': { light: '#000000', dark: '#ffffff' },
|
|
202
|
+
'--dsw-alias-label-secondary': { light: '#3d3d3d', dark: '#d6d6d6' },
|
|
203
|
+
'--dsw-alias-brand-primary': { light: '#0033cc', dark: '#8fb0ff' },
|
|
204
|
+
'--dsw-alias-state-error-primary': { light: '#a10000', dark: '#ff9b9b' },
|
|
205
|
+
'--dsw-alias-state-success-primary': { light: '#005c2b', dark: '#7dffb0' },
|
|
206
|
+
'--dsw-alias-state-warn-primary': { light: '#6b4500', dark: '#ffd479' },
|
|
207
|
+
'--dsw-alias-state-idle-primary': { light: '#4a4a4a', dark: '#b8b8b8' },
|
|
208
|
+
},
|
|
209
|
+
},
|
|
210
|
+
{
|
|
211
|
+
// Palette: https://draculatheme.com — bg #282a36, fg #f8f8f2, comment #6272a4.
|
|
212
|
+
id: 'dracula',
|
|
213
|
+
label: 'Dracula',
|
|
214
|
+
description: 'The classic purple-on-charcoal editor theme.',
|
|
215
|
+
colorScheme: 'dark',
|
|
216
|
+
tokens: {
|
|
217
|
+
'--dsw-alias-bg-base': { light: '#fffbeb', dark: '#282a36' },
|
|
218
|
+
'--dsw-alias-bg-layer-1': { light: '#ffffff', dark: '#21222c' },
|
|
219
|
+
'--dsw-alias-bg-layer-2': { light: '#f2ecd9', dark: '#343746' },
|
|
220
|
+
'--dsw-alias-bg-overlay': { light: '#ffffff', dark: '#44475a' },
|
|
221
|
+
'--dsw-specific-sidebar-fill': { light: '#f2ecd9', dark: '#21222c' },
|
|
222
|
+
'--dsw-alias-border-l1': { light: '#dcd6c3', dark: '#44475a' },
|
|
223
|
+
'--dsw-alias-border-l2': { light: '#c4bda6', dark: '#6272a4' },
|
|
224
|
+
'--dsw-alias-label-primary': { light: '#1f1f1f', dark: '#f8f8f2' },
|
|
225
|
+
'--dsw-alias-label-secondary': { light: '#6c664b', dark: '#8693bd' },
|
|
226
|
+
'--dsw-alias-brand-primary': { light: '#644ac9', dark: '#bd93f9' },
|
|
227
|
+
'--dsw-alias-state-error-primary': { light: '#cb3a2a', dark: '#ff5555' },
|
|
228
|
+
'--dsw-alias-state-success-primary': { light: '#14710a', dark: '#50fa7b' },
|
|
229
|
+
'--dsw-alias-state-warn-primary': { light: '#846e15', dark: '#f1fa8c' },
|
|
230
|
+
'--dsw-alias-state-idle-primary': { light: '#6c664b', dark: '#6272a4' },
|
|
231
|
+
},
|
|
232
|
+
},
|
|
233
|
+
{
|
|
234
|
+
// Palette: https://www.nordtheme.com — nord0 #2e3440, nord4 #d8dee9, nord8 #88c0d0.
|
|
235
|
+
id: 'nord',
|
|
236
|
+
label: 'Nord',
|
|
237
|
+
description: 'Arctic, north-bluish, with muted frost accents.',
|
|
238
|
+
colorScheme: 'dark',
|
|
239
|
+
tokens: {
|
|
240
|
+
'--dsw-alias-bg-base': { light: '#eceff4', dark: '#2e3440' },
|
|
241
|
+
'--dsw-alias-bg-layer-1': { light: '#ffffff', dark: '#3b4252' },
|
|
242
|
+
'--dsw-alias-bg-layer-2': { light: '#e5e9f0', dark: '#434c5e' },
|
|
243
|
+
'--dsw-alias-bg-overlay': { light: '#ffffff', dark: '#4c566a' },
|
|
244
|
+
'--dsw-specific-sidebar-fill': { light: '#e5e9f0', dark: '#292e39' },
|
|
245
|
+
'--dsw-alias-border-l1': { light: '#d8dee9', dark: '#434c5e' },
|
|
246
|
+
'--dsw-alias-border-l2': { light: '#b8c2d1', dark: '#4c566a' },
|
|
247
|
+
'--dsw-alias-label-primary': { light: '#2e3440', dark: '#eceff4' },
|
|
248
|
+
'--dsw-alias-label-secondary': { light: '#4c566a', dark: '#a3adc0' },
|
|
249
|
+
'--dsw-alias-brand-primary': { light: '#5e81ac', dark: '#88c0d0' },
|
|
250
|
+
'--dsw-alias-state-error-primary': { light: '#a33f4a', dark: '#bf616a' },
|
|
251
|
+
'--dsw-alias-state-success-primary': { light: '#5a7d52', dark: '#a3be8c' },
|
|
252
|
+
'--dsw-alias-state-warn-primary': { light: '#8a6a2f', dark: '#ebcb8b' },
|
|
253
|
+
'--dsw-alias-state-idle-primary': { light: '#6d7b8c', dark: '#7b88a1' },
|
|
254
|
+
},
|
|
255
|
+
},
|
|
256
|
+
{
|
|
257
|
+
// Palette: https://github.com/catppuccin/palette — Mocha base #1e1e2e, text #cdd6f4, mauve #cba6f7.
|
|
258
|
+
id: 'catppuccin-mocha',
|
|
259
|
+
label: 'Catppuccin Mocha',
|
|
260
|
+
description: 'Soothing pastels on the darkest Catppuccin flavour.',
|
|
261
|
+
colorScheme: 'dark',
|
|
262
|
+
tokens: {
|
|
263
|
+
'--dsw-alias-bg-base': { light: '#eff1f5', dark: '#1e1e2e' },
|
|
264
|
+
'--dsw-alias-bg-layer-1': { light: '#ffffff', dark: '#181825' },
|
|
265
|
+
'--dsw-alias-bg-layer-2': { light: '#e6e9ef', dark: '#313244' },
|
|
266
|
+
'--dsw-alias-bg-overlay': { light: '#ffffff', dark: '#45475a' },
|
|
267
|
+
'--dsw-specific-sidebar-fill': { light: '#e6e9ef', dark: '#11111b' },
|
|
268
|
+
'--dsw-alias-border-l1': { light: '#ccd0da', dark: '#313244' },
|
|
269
|
+
'--dsw-alias-border-l2': { light: '#acb0be', dark: '#45475a' },
|
|
270
|
+
'--dsw-alias-label-primary': { light: '#4c4f69', dark: '#cdd6f4' },
|
|
271
|
+
'--dsw-alias-label-secondary': { light: '#6c6f85', dark: '#a6adc8' },
|
|
272
|
+
'--dsw-alias-brand-primary': { light: '#8839ef', dark: '#cba6f7' },
|
|
273
|
+
'--dsw-alias-state-error-primary': { light: '#d20f39', dark: '#f38ba8' },
|
|
274
|
+
'--dsw-alias-state-success-primary': { light: '#40a02b', dark: '#a6e3a1' },
|
|
275
|
+
'--dsw-alias-state-warn-primary': { light: '#df8e1d', dark: '#f9e2af' },
|
|
276
|
+
'--dsw-alias-state-idle-primary': { light: '#8c8fa1', dark: '#6c7086' },
|
|
277
|
+
},
|
|
278
|
+
},
|
|
279
|
+
{
|
|
280
|
+
// Palette: https://github.com/morhetz/gruvbox — dark0 #282828, fg1 #ebdbb2, orange #fe8019.
|
|
281
|
+
id: 'gruvbox',
|
|
282
|
+
label: 'Gruvbox',
|
|
283
|
+
description: 'Retro groove warmth with earthy amber accents.',
|
|
284
|
+
colorScheme: 'dark',
|
|
285
|
+
tokens: {
|
|
286
|
+
'--dsw-alias-bg-base': { light: '#fbf1c7', dark: '#282828' },
|
|
287
|
+
'--dsw-alias-bg-layer-1': { light: '#f9f5d7', dark: '#1d2021' },
|
|
288
|
+
'--dsw-alias-bg-layer-2': { light: '#f2e5bc', dark: '#3c3836' },
|
|
289
|
+
'--dsw-alias-bg-overlay': { light: '#f9f5d7', dark: '#504945' },
|
|
290
|
+
'--dsw-specific-sidebar-fill': { light: '#f2e5bc', dark: '#1d2021' },
|
|
291
|
+
'--dsw-alias-border-l1': { light: '#ebdbb2', dark: '#3c3836' },
|
|
292
|
+
'--dsw-alias-border-l2': { light: '#d5c4a1', dark: '#504945' },
|
|
293
|
+
'--dsw-alias-label-primary': { light: '#3c3836', dark: '#ebdbb2' },
|
|
294
|
+
'--dsw-alias-label-secondary': { light: '#665c54', dark: '#a89984' },
|
|
295
|
+
'--dsw-alias-brand-primary': { light: '#af3a03', dark: '#fe8019' },
|
|
296
|
+
'--dsw-alias-state-error-primary': { light: '#9d0006', dark: '#fb4934' },
|
|
297
|
+
'--dsw-alias-state-success-primary': { light: '#79740e', dark: '#b8bb26' },
|
|
298
|
+
'--dsw-alias-state-warn-primary': { light: '#b57614', dark: '#fabd2f' },
|
|
299
|
+
'--dsw-alias-state-idle-primary': { light: '#928374', dark: '#928374' },
|
|
300
|
+
},
|
|
301
|
+
},
|
|
302
|
+
{
|
|
303
|
+
// Palette: https://github.com/atom/one-dark-syntax — bg #282c34, fg #abb2bf, blue #61afef.
|
|
304
|
+
id: 'one-dark',
|
|
305
|
+
label: 'One Dark',
|
|
306
|
+
description: "Atom's iconic blue-on-graphite editor theme.",
|
|
307
|
+
colorScheme: 'dark',
|
|
308
|
+
tokens: {
|
|
309
|
+
'--dsw-alias-bg-base': { light: '#fafafa', dark: '#282c34' },
|
|
310
|
+
'--dsw-alias-bg-layer-1': { light: '#ffffff', dark: '#21252b' },
|
|
311
|
+
'--dsw-alias-bg-layer-2': { light: '#eaeaeb', dark: '#3e4451' },
|
|
312
|
+
'--dsw-alias-bg-overlay': { light: '#ffffff', dark: '#3e4451' },
|
|
313
|
+
'--dsw-specific-sidebar-fill': { light: '#eaeaeb', dark: '#21252b' },
|
|
314
|
+
'--dsw-alias-border-l1': { light: '#dbdbdc', dark: '#3e4451' },
|
|
315
|
+
'--dsw-alias-border-l2': { light: '#c0c0c2', dark: '#5c6370' },
|
|
316
|
+
'--dsw-alias-label-primary': { light: '#383a42', dark: '#abb2bf' },
|
|
317
|
+
'--dsw-alias-label-secondary': { light: '#696c77', dark: '#8b93a1' },
|
|
318
|
+
'--dsw-alias-brand-primary': { light: '#4078f2', dark: '#61afef' },
|
|
319
|
+
'--dsw-alias-state-error-primary': { light: '#e45649', dark: '#e06c75' },
|
|
320
|
+
'--dsw-alias-state-success-primary': { light: '#50a14f', dark: '#98c379' },
|
|
321
|
+
'--dsw-alias-state-warn-primary': { light: '#986801', dark: '#e5c07b' },
|
|
322
|
+
'--dsw-alias-state-idle-primary': { light: '#a0a1a7', dark: '#5c6370' },
|
|
323
|
+
},
|
|
324
|
+
},
|
|
325
|
+
{
|
|
326
|
+
// Palette: https://ethanschoonover.com/solarized — base03 #002b36, base0 #839496, blue #268bd2.
|
|
327
|
+
id: 'solarized',
|
|
328
|
+
label: 'Solarized Dark',
|
|
329
|
+
description: 'Precision low-contrast colours from Ethan Schoonover.',
|
|
330
|
+
colorScheme: 'dark',
|
|
331
|
+
tokens: {
|
|
332
|
+
'--dsw-alias-bg-base': { light: '#fdf6e3', dark: '#002b36' },
|
|
333
|
+
'--dsw-alias-bg-layer-1': { light: '#fffbf0', dark: '#073642' },
|
|
334
|
+
'--dsw-alias-bg-layer-2': { light: '#eee8d5', dark: '#0d4756' },
|
|
335
|
+
'--dsw-alias-bg-overlay': { light: '#fffbf0', dark: '#0d4756' },
|
|
336
|
+
'--dsw-specific-sidebar-fill': { light: '#eee8d5', dark: '#00252e' },
|
|
337
|
+
'--dsw-alias-border-l1': { light: '#ddd6c1', dark: '#0d4756' },
|
|
338
|
+
'--dsw-alias-border-l2': { light: '#c9c2ac', dark: '#586e75' },
|
|
339
|
+
'--dsw-alias-label-primary': { light: '#073642', dark: '#93a1a1' },
|
|
340
|
+
'--dsw-alias-label-secondary': { light: '#586e75', dark: '#839496' },
|
|
341
|
+
'--dsw-alias-brand-primary': { light: '#268bd2', dark: '#268bd2' },
|
|
342
|
+
'--dsw-alias-state-error-primary': { light: '#dc322f', dark: '#dc322f' },
|
|
343
|
+
'--dsw-alias-state-success-primary': { light: '#859900', dark: '#859900' },
|
|
344
|
+
'--dsw-alias-state-warn-primary': { light: '#b58900', dark: '#b58900' },
|
|
345
|
+
'--dsw-alias-state-idle-primary': { light: '#93a1a1', dark: '#586e75' },
|
|
346
|
+
},
|
|
347
|
+
},
|
|
348
|
+
{
|
|
349
|
+
// Palette: https://rosepinetheme.com — base #191724, text #e0def4, rose #ebbcba.
|
|
350
|
+
id: 'rose-pine',
|
|
351
|
+
label: 'Rosé Pine',
|
|
352
|
+
description: 'All natural pine, faux fur and a bit of Soho.',
|
|
353
|
+
colorScheme: 'dark',
|
|
354
|
+
tokens: {
|
|
355
|
+
'--dsw-alias-bg-base': { light: '#faf4ed', dark: '#191724' },
|
|
356
|
+
'--dsw-alias-bg-layer-1': { light: '#fffaf3', dark: '#1f1d2e' },
|
|
357
|
+
'--dsw-alias-bg-layer-2': { light: '#f2e9e1', dark: '#26233a' },
|
|
358
|
+
'--dsw-alias-bg-overlay': { light: '#fffaf3', dark: '#26233a' },
|
|
359
|
+
'--dsw-specific-sidebar-fill': { light: '#f2e9e1', dark: '#1f1d2e' },
|
|
360
|
+
'--dsw-alias-border-l1': { light: '#e5ded5', dark: '#26233a' },
|
|
361
|
+
'--dsw-alias-border-l2': { light: '#d3cbc2', dark: '#403d52' },
|
|
362
|
+
'--dsw-alias-label-primary': { light: '#575279', dark: '#e0def4' },
|
|
363
|
+
'--dsw-alias-label-secondary': { light: '#797593', dark: '#908caa' },
|
|
364
|
+
'--dsw-alias-brand-primary': { light: '#b4637a', dark: '#ebbcba' },
|
|
365
|
+
'--dsw-alias-state-error-primary': { light: '#b4637a', dark: '#eb6f92' },
|
|
366
|
+
'--dsw-alias-state-success-primary': { light: '#286983', dark: '#9ccfd8' },
|
|
367
|
+
'--dsw-alias-state-warn-primary': { light: '#ea9d34', dark: '#f6c177' },
|
|
368
|
+
'--dsw-alias-state-idle-primary': { light: '#9893a5', dark: '#6e6a86' },
|
|
369
|
+
},
|
|
370
|
+
},
|
|
371
|
+
{
|
|
372
|
+
// Palette: https://github.com/enkia/tokyo-night-vscode-theme — bg #1a1b26, fg #a9b1d6, blue #7aa2f7.
|
|
373
|
+
id: 'tokyo-night',
|
|
374
|
+
label: 'Tokyo Night',
|
|
375
|
+
description: 'A clean dark theme that celebrates downtown Tokyo at night.',
|
|
376
|
+
colorScheme: 'dark',
|
|
377
|
+
tokens: {
|
|
378
|
+
'--dsw-alias-bg-base': { light: '#e9e9ed', dark: '#1a1b26' },
|
|
379
|
+
'--dsw-alias-bg-layer-1': { light: '#f5f5f7', dark: '#16161e' },
|
|
380
|
+
'--dsw-alias-bg-layer-2': { light: '#dcdce3', dark: '#292e42' },
|
|
381
|
+
'--dsw-alias-bg-overlay': { light: '#f5f5f7', dark: '#292e42' },
|
|
382
|
+
'--dsw-specific-sidebar-fill': { light: '#dcdce3', dark: '#16161e' },
|
|
383
|
+
'--dsw-alias-border-l1': { light: '#d0d0d9', dark: '#292e42' },
|
|
384
|
+
'--dsw-alias-border-l2': { light: '#b6b8c4', dark: '#3b4261' },
|
|
385
|
+
'--dsw-alias-label-primary': { light: '#343b58', dark: '#a9b1d6' },
|
|
386
|
+
'--dsw-alias-label-secondary': { light: '#565f89', dark: '#7d86a4' },
|
|
387
|
+
'--dsw-alias-brand-primary': { light: '#34548a', dark: '#7aa2f7' },
|
|
388
|
+
'--dsw-alias-state-error-primary': { light: '#8c4351', dark: '#f7768e' },
|
|
389
|
+
'--dsw-alias-state-success-primary': { light: '#485e30', dark: '#9ece6a' },
|
|
390
|
+
'--dsw-alias-state-warn-primary': { light: '#8f5e15', dark: '#e0af68' },
|
|
391
|
+
'--dsw-alias-state-idle-primary': { light: '#9699a3', dark: '#565f89' },
|
|
392
|
+
},
|
|
393
|
+
},
|
|
394
|
+
{
|
|
395
|
+
// Palette: https://github.com/ayu-theme — ayu dark bg #0d1017, fg #bfbdb6, orange #ff8f40.
|
|
396
|
+
id: 'ayu-dark',
|
|
397
|
+
label: 'Ayu Dark',
|
|
398
|
+
description: 'Minimal dark theme with a bright amber accent.',
|
|
399
|
+
colorScheme: 'dark',
|
|
400
|
+
tokens: {
|
|
401
|
+
'--dsw-alias-bg-base': { light: '#fafafa', dark: '#0d1017' },
|
|
402
|
+
'--dsw-alias-bg-layer-1': { light: '#ffffff', dark: '#131721' },
|
|
403
|
+
'--dsw-alias-bg-layer-2': { light: '#f0f0ee', dark: '#1f2430' },
|
|
404
|
+
'--dsw-alias-bg-overlay': { light: '#ffffff', dark: '#1f2430' },
|
|
405
|
+
'--dsw-specific-sidebar-fill': { light: '#f0f0ee', dark: '#0b0e14' },
|
|
406
|
+
'--dsw-alias-border-l1': { light: '#e2e2de', dark: '#1f2430' },
|
|
407
|
+
'--dsw-alias-border-l2': { light: '#c9c9c4', dark: '#2d3343' },
|
|
408
|
+
'--dsw-alias-label-primary': { light: '#242936', dark: '#bfbdb6' },
|
|
409
|
+
'--dsw-alias-label-secondary': { light: '#5c6773', dark: '#8a95a1' },
|
|
410
|
+
'--dsw-alias-brand-primary': { light: '#e0882e', dark: '#ff8f40' },
|
|
411
|
+
'--dsw-alias-state-error-primary': { light: '#d95757', dark: '#f26d78' },
|
|
412
|
+
'--dsw-alias-state-success-primary': { light: '#6c9e4a', dark: '#aad94c' },
|
|
413
|
+
'--dsw-alias-state-warn-primary': { light: '#c28c1f', dark: '#e6b450' },
|
|
414
|
+
'--dsw-alias-state-idle-primary': { light: '#8a9199', dark: '#5c6773' },
|
|
415
|
+
},
|
|
416
|
+
},
|
|
417
|
+
{
|
|
418
|
+
// Palette: https://github.com/microsoft/vscode — GitHub Dark bg #0d1117, fg #c9d1d9, blue #58a6ff.
|
|
419
|
+
id: 'github-dark',
|
|
420
|
+
label: 'GitHub Dark',
|
|
421
|
+
description: 'The familiar GitHub interface palette.',
|
|
422
|
+
colorScheme: 'dark',
|
|
423
|
+
tokens: {
|
|
424
|
+
'--dsw-alias-bg-base': { light: '#ffffff', dark: '#0d1117' },
|
|
425
|
+
'--dsw-alias-bg-layer-1': { light: '#f6f8fa', dark: '#161b22' },
|
|
426
|
+
'--dsw-alias-bg-layer-2': { light: '#eaeef2', dark: '#21262d' },
|
|
427
|
+
'--dsw-alias-bg-overlay': { light: '#ffffff', dark: '#21262d' },
|
|
428
|
+
'--dsw-specific-sidebar-fill': { light: '#f6f8fa', dark: '#010409' },
|
|
429
|
+
'--dsw-alias-border-l1': { light: '#d0d7de', dark: '#30363d' },
|
|
430
|
+
'--dsw-alias-border-l2': { light: '#afb8c1', dark: '#484f58' },
|
|
431
|
+
'--dsw-alias-label-primary': { light: '#1f2328', dark: '#c9d1d9' },
|
|
432
|
+
'--dsw-alias-label-secondary': { light: '#656d76', dark: '#8b949e' },
|
|
433
|
+
'--dsw-alias-brand-primary': { light: '#0969da', dark: '#58a6ff' },
|
|
434
|
+
'--dsw-alias-state-error-primary': { light: '#cf222e', dark: '#f85149' },
|
|
435
|
+
'--dsw-alias-state-success-primary': { light: '#1a7f37', dark: '#3fb950' },
|
|
436
|
+
'--dsw-alias-state-warn-primary': { light: '#9a6700', dark: '#d29922' },
|
|
437
|
+
'--dsw-alias-state-idle-primary': { light: '#6e7781', dark: '#484f58' },
|
|
438
|
+
},
|
|
439
|
+
},
|
|
440
|
+
{
|
|
441
|
+
// Palette: https://github.com/Monokai/monokai — bg #272822, fg #f8f8f2, pink #f92672.
|
|
442
|
+
id: 'monokai',
|
|
443
|
+
label: 'Monokai',
|
|
444
|
+
description: 'The Sublime Text original, with its hot-pink accent.',
|
|
445
|
+
colorScheme: 'dark',
|
|
446
|
+
tokens: {
|
|
447
|
+
'--dsw-alias-bg-base': { light: '#fafaf5', dark: '#272822' },
|
|
448
|
+
'--dsw-alias-bg-layer-1': { light: '#ffffff', dark: '#1e1f1c' },
|
|
449
|
+
'--dsw-alias-bg-layer-2': { light: '#f0efe5', dark: '#3e3d32' },
|
|
450
|
+
'--dsw-alias-bg-overlay': { light: '#ffffff', dark: '#3e3d32' },
|
|
451
|
+
'--dsw-specific-sidebar-fill': { light: '#f0efe5', dark: '#1e1f1c' },
|
|
452
|
+
'--dsw-alias-border-l1': { light: '#e0dfd1', dark: '#3e3d32' },
|
|
453
|
+
'--dsw-alias-border-l2': { light: '#c6c5b3', dark: '#575744' },
|
|
454
|
+
'--dsw-alias-label-primary': { light: '#272822', dark: '#f8f8f2' },
|
|
455
|
+
'--dsw-alias-label-secondary': { light: '#75715e', dark: '#8a9199' },
|
|
456
|
+
'--dsw-alias-brand-primary': { light: '#c2185b', dark: '#f92672' },
|
|
457
|
+
'--dsw-alias-state-error-primary': { light: '#d13b2f', dark: '#f92672' },
|
|
458
|
+
'--dsw-alias-state-success-primary': { light: '#567f0e', dark: '#a6e22e' },
|
|
459
|
+
'--dsw-alias-state-warn-primary': { light: '#b07d1a', dark: '#e6db74' },
|
|
460
|
+
'--dsw-alias-state-idle-primary': { light: '#8d8b7c', dark: '#75715e' },
|
|
461
|
+
},
|
|
462
|
+
}, {
|
|
463
|
+
id: 'mono',
|
|
464
|
+
label: 'Mono',
|
|
465
|
+
description: 'Grayscale everywhere except state colours.',
|
|
466
|
+
colorScheme: 'dark',
|
|
467
|
+
tokens: {
|
|
468
|
+
'--dsw-alias-bg-base': { light: '#f5f5f5', dark: '#101010' },
|
|
469
|
+
'--dsw-alias-bg-layer-1': { light: '#ffffff', dark: '#1a1a1a' },
|
|
470
|
+
'--dsw-alias-bg-layer-2': { light: '#ececec', dark: '#242424' },
|
|
471
|
+
'--dsw-alias-bg-overlay': { light: '#ffffff', dark: '#282828' },
|
|
472
|
+
'--dsw-specific-sidebar-fill': { light: '#e8e8e8', dark: '#0a0a0a' },
|
|
473
|
+
'--dsw-alias-border-l1': { light: '#d4d4d4', dark: '#2e2e2e' },
|
|
474
|
+
'--dsw-alias-border-l2': { light: '#b0b0b0', dark: '#454545' },
|
|
475
|
+
'--dsw-alias-label-primary': { light: '#0a0a0a', dark: '#ededed' },
|
|
476
|
+
'--dsw-alias-label-secondary': { light: '#525252', dark: '#a3a3a3' },
|
|
477
|
+
'--dsw-alias-brand-primary': { light: '#262626', dark: '#d4d4d4' },
|
|
478
|
+
'--dsw-alias-state-error-primary': { light: '#b42318', dark: '#ff9184' },
|
|
479
|
+
'--dsw-alias-state-success-primary': { light: '#0a6b45', dark: '#6fd9a8' },
|
|
480
|
+
'--dsw-alias-state-warn-primary': { light: '#8a5c00', dark: '#e8bf6a' },
|
|
481
|
+
'--dsw-alias-state-idle-primary': { light: '#6b6b6b', dark: '#8f8f8f' },
|
|
482
|
+
},
|
|
483
|
+
},
|
|
484
|
+
];
|
|
485
|
+
/** Every preset id, for validation. */
|
|
486
|
+
export const PRESET_IDS = PRESETS.map((preset) => preset.id);
|
|
487
|
+
/**
|
|
488
|
+
* Look up one preset by id.
|
|
489
|
+
* @param id - preset id.
|
|
490
|
+
* @returns the preset, or `undefined` for an unknown or `none` id.
|
|
491
|
+
*/
|
|
492
|
+
export function findPreset(id) {
|
|
493
|
+
return PRESETS.find((preset) => preset.id === id);
|
|
494
|
+
}
|
|
495
|
+
/** The role names the theme runtime accepts for typography. */
|
|
496
|
+
export const FONT_ROLES = ['text', 'code', 'terminal'];
|
|
497
|
+
/** Accepted font-size range per role, mirroring the shipped Appearance rows. */
|
|
498
|
+
export const FONT_SIZE_RANGES = {
|
|
499
|
+
text: { min: 10, max: 22, fallback: 14 },
|
|
500
|
+
code: { min: 10, max: 16, fallback: 11 },
|
|
501
|
+
terminal: { min: 10, max: 20, fallback: 13 },
|
|
502
|
+
};
|
|
503
|
+
/** Density presets, expressed as a spacing multiplier applied to derived tokens. */
|
|
504
|
+
export const DENSITIES = ['compact', 'comfortable', 'spacious'];
|
|
505
|
+
/** Radius bounds in pixels. */
|
|
506
|
+
export const RADIUS_MIN = 0;
|
|
507
|
+
/** Upper radius bound in pixels. */
|
|
508
|
+
export const RADIUS_MAX = 24;
|
|
509
|
+
//# sourceMappingURL=spec.js.map
|
package/icon.svg
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Theme Studio">
|
|
2
|
+
<defs>
|
|
3
|
+
<linearGradient id="paint" x1="0" y1="0" x2="1" y2="1">
|
|
4
|
+
<stop offset="0" stop-color="#8b5cf6"/>
|
|
5
|
+
<stop offset="0.5" stop-color="#3f8cff"/>
|
|
6
|
+
<stop offset="1" stop-color="#22c7a9"/>
|
|
7
|
+
</linearGradient>
|
|
8
|
+
</defs>
|
|
9
|
+
<rect x="6" y="6" width="52" height="52" rx="12" fill="none" stroke="url(#paint)" stroke-width="2.6"/>
|
|
10
|
+
<path d="M32 16a16 16 0 1 0 0 32a16 16 0 1 0 0-32" fill="none" stroke="url(#paint)" stroke-width="2.2" opacity="0.55"/>
|
|
11
|
+
<circle cx="32" cy="32" r="6.5" fill="url(#paint)"/>
|
|
12
|
+
<circle cx="32" cy="14" r="3.6" fill="#8b5cf6"/>
|
|
13
|
+
<circle cx="48" cy="40" r="3.6" fill="#3f8cff"/>
|
|
14
|
+
<circle cx="16" cy="40" r="3.6" fill="#22c7a9"/>
|
|
15
|
+
</svg>
|
package/locale/en.json
ADDED
package/locale/zh.json
ADDED
package/package.json
CHANGED
|
@@ -1,6 +1,74 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@d0nj/dsh-ui-custom",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"
|
|
5
|
-
"
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "Theme, colour-token, typography and geometry customisation for the DeepSeek Harness Web UI, with presets and a live editor.",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"repository": {
|
|
7
|
+
"type": "git",
|
|
8
|
+
"url": "git+https://github.com/d0nj/dsh-plugins.git",
|
|
9
|
+
"directory": "packages/ui-custom"
|
|
10
|
+
},
|
|
11
|
+
"keywords": [
|
|
12
|
+
"dsh-plugin",
|
|
13
|
+
"deepseek-harness",
|
|
14
|
+
"cordis",
|
|
15
|
+
"theme",
|
|
16
|
+
"customization"
|
|
17
|
+
],
|
|
18
|
+
"publishConfig": {
|
|
19
|
+
"access": "public"
|
|
20
|
+
},
|
|
21
|
+
"type": "module",
|
|
22
|
+
"main": "dist/index.js",
|
|
23
|
+
"types": "dist/index.d.ts",
|
|
24
|
+
"exports": {
|
|
25
|
+
".": {
|
|
26
|
+
"types": "./dist/index.d.ts",
|
|
27
|
+
"default": "./dist/index.js"
|
|
28
|
+
},
|
|
29
|
+
"./client": "./dist/client/client.js",
|
|
30
|
+
"./locale/*.json": "./locale/*.json",
|
|
31
|
+
"./icon": "./icon.svg"
|
|
32
|
+
},
|
|
33
|
+
"files": [
|
|
34
|
+
"dist/**/*.js",
|
|
35
|
+
"dist/**/*.d.ts",
|
|
36
|
+
"dist/client/client.js",
|
|
37
|
+
"cordis.patch.yml",
|
|
38
|
+
"locale/*.json",
|
|
39
|
+
"icon.svg",
|
|
40
|
+
"README.md"
|
|
41
|
+
],
|
|
42
|
+
"dsh": {
|
|
43
|
+
"bundle": {
|
|
44
|
+
"patch": "./cordis.patch.yml"
|
|
45
|
+
},
|
|
46
|
+
"client": {
|
|
47
|
+
"platform": "web",
|
|
48
|
+
"immediately": true,
|
|
49
|
+
"inject": [
|
|
50
|
+
"@deepseek-ai/dsh-client-ui-theme",
|
|
51
|
+
"@deepseek-ai/dsh-client-ui-settings",
|
|
52
|
+
"@deepseek-ai/dsh-client-ui-slots"
|
|
53
|
+
]
|
|
54
|
+
}
|
|
55
|
+
},
|
|
56
|
+
"peerDependencies": {
|
|
57
|
+
"@deepseek-ai/cordis": "~4.0.5",
|
|
58
|
+
"@deepseek-ai/schemastery": "~3.18.5"
|
|
59
|
+
},
|
|
60
|
+
"devDependencies": {
|
|
61
|
+
"@deepseek-ai/cordis": "~4.0.5",
|
|
62
|
+
"@deepseek-ai/schemastery": "~3.18.5",
|
|
63
|
+
"@types/node": "^24.0.0",
|
|
64
|
+
"typescript": "^5.9.0"
|
|
65
|
+
},
|
|
66
|
+
"scripts": {
|
|
67
|
+
"build": "tsc -p tsconfig.build.json && node scripts/stamp-client.mjs",
|
|
68
|
+
"typecheck": "tsc -p tsconfig.test.json --noEmit",
|
|
69
|
+
"pretest": "tsc -p tsconfig.test.json",
|
|
70
|
+
"test": "node --test \"dist-test/**/*.test.js\"",
|
|
71
|
+
"check": "node --check dist/index.js && node --check dist/client/client.js && node --check dist/spec.js",
|
|
72
|
+
"clean": "node -e \"const fs=require('node:fs');for(const d of ['dist','dist-test'])fs.rmSync(d,{recursive:true,force:true})\""
|
|
73
|
+
}
|
|
6
74
|
}
|