@deepseek-ai/dsh-client-ui-theme 0.0.1-rc.1

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.
Files changed (21) hide show
  1. package/LICENSE +28 -0
  2. package/README.i18n.yaml +6 -0
  3. package/README.md +24 -0
  4. package/README.zh.md +24 -0
  5. package/lib/client.js +1126 -0
  6. package/lib/index.js +32 -0
  7. package/lib/invariant.js +25 -0
  8. package/lib/styles/base.css +15 -0
  9. package/lib/styles/design-platform.css +336 -0
  10. package/lib/styles/gradient-shadow-text.css +232 -0
  11. package/lib/styles/scrollbar.css +85 -0
  12. package/lib/styles/shiki.css +31 -0
  13. package/lib/types/client/AppearanceRow.d.ts +17 -0
  14. package/lib/types/client/index.d.ts +123 -0
  15. package/lib/types/client/locales.d.ts +18 -0
  16. package/lib/types/client/settings-contract.d.ts +8 -0
  17. package/lib/types/client/settings-store.d.ts +25 -0
  18. package/lib/types/index.d.ts +9 -0
  19. package/lib/types/invariant.d.ts +16 -0
  20. package/lib/types/theme-settings.d.ts +26 -0
  21. package/package.json +82 -0
package/lib/index.js ADDED
@@ -0,0 +1,32 @@
1
+ import { settingsNamespace } from "@deepseek-ai/dsh-settings";
2
+ import z from "@deepseek-ai/schemastery";
3
+ //#region lib/types/theme-settings.js
4
+ /** Theme preferences stored in the Host user-settings document. */
5
+ /** Built-in preferences accepted at the registry and settings boundaries. */
6
+ const THEME_PREFERENCES = [
7
+ "light",
8
+ "dark",
9
+ "system"
10
+ ];
11
+ /** Settings namespace owned by the theme plugin. */
12
+ const THEME_SETTINGS_NAMESPACE = "ui-theme";
13
+ /** Field carrying the selected built-in theme preference. */
14
+ const THEME_PREFERENCE_FIELD = "preference";
15
+ /** Default preference when the user-settings document has no override. */
16
+ const DEFAULT_PREFERENCE = "system";
17
+ /** Durable theme schema; also the wire envelope the browser scope validates against. */
18
+ const ThemeSettingsSchema = z.object({ [THEME_PREFERENCE_FIELD]: z.union([...THEME_PREFERENCES]).default(DEFAULT_PREFERENCE) });
19
+ //#endregion
20
+ //#region lib/types/index.js
21
+ /** Host registration for the browser theme preference. */
22
+ /**
23
+ * Register the durable theme section when a settings provider exists.
24
+ * @param ctx - Host context whose optional settings service owns the section.
25
+ */
26
+ function apply(ctx) {
27
+ ctx.inject(["settings"], (settingsCtx) => {
28
+ settingsCtx.settings.register(settingsNamespace(THEME_SETTINGS_NAMESPACE), ThemeSettingsSchema);
29
+ });
30
+ }
31
+ //#endregion
32
+ export { DEFAULT_PREFERENCE, THEME_PREFERENCES, THEME_PREFERENCE_FIELD, THEME_SETTINGS_NAMESPACE, apply };
package/lib/invariant.js ADDED
@@ -0,0 +1,25 @@
1
+ //#region lib/types/invariant.js
2
+ /**
3
+ * Package-owned invariant companion for `@deepseek-ai/dsh-client-ui-theme`.
4
+ * @module @deepseek-ai/dsh-client-ui-theme/invariant
5
+ */
6
+ const PACKAGE_NAME = "@deepseek-ai/dsh-client-ui-theme";
7
+ /** Cordis companion plugin name. */
8
+ const name = "client-ui-theme-invariant";
9
+ /** Service required before the companion can reserve package ownership. */
10
+ const inject = ["invariants"];
11
+ /**
12
+ * No runtime invariant: the settings scope validates and publishes the durable
13
+ * theme section, while the registry emits `theme/change` synchronously with
14
+ * its own mutations. Store/registry agreement is covered directly by this
15
+ * package's Host, scope, and service behavior specs.
16
+ */
17
+ const install = () => {};
18
+ /**
19
+ * Register this package's invariant companion.
20
+ * @param ctx - Cordis context carrying the invariant service.
21
+ * @returns the installed registration's disposer after setup succeeds.
22
+ */
23
+ const apply = (ctx) => Promise.resolve(ctx.invariants.register(PACKAGE_NAME, install));
24
+ //#endregion
25
+ export { apply, inject, name };
package/lib/styles/base.css ADDED
@@ -0,0 +1,15 @@
1
+ /* Base variables referenced by the token sheets and component CSS but defined
2
+ * upstream (deepsuite theme/global.css) — supplied here so the composite
3
+ * --dsw-font-* variables resolve and motion rides the upstream curve. Code
4
+ * font stack deliberately omits a bare `monospace` tail (Windows CJK falls
5
+ * back to SimSun otherwise). */
6
+ :root {
7
+ --dsw-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
8
+ 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
9
+ --ds-font-family-code: 'SF Mono', 'JetBrains Mono', 'Fira Code', Consolas,
10
+ 'Liberation Mono', Menlo, Courier, 'PingFang SC', 'Microsoft YaHei';
11
+ --ds-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
12
+ --ds-transition-duration: 0.2s;
13
+ --ds-transition-duration-fast: 0.1s;
14
+ --ds-transition-duration-slow: 0.3s;
15
+ }
package/lib/styles/design-platform.css ADDED
@@ -0,0 +1,336 @@
1
+ /* Figma font-weight 510 (an SF Pro variable-font weight) always renders as
2
+ font-weight: 500 in this UI — non-variable webfonts snap intermediate
3
+ weights unpredictably across platforms. */
4
+ body {
5
+ --dsw-static-amber-100: rgb(254, 245, 231);
6
+ --dsw-static-amber-400: rgb(247, 173, 49);
7
+ --dsw-static-amber-500: rgb(245, 158, 11);
8
+ --dsw-static-amber-600: rgb(221, 134, 41);
9
+ --dsw-static-amber-900: rgb(39, 36, 31);
10
+ --dsw-static-blue-100: rgb(219, 234, 254);
11
+ --dsw-static-blue-300: rgb(147, 197, 253);
12
+ --dsw-static-blue-400: rgb(96, 165, 250);
13
+ --dsw-static-blue-450: rgb(77, 147, 248);
14
+ --dsw-static-blue-500: rgb(59, 130, 246);
15
+ --dsw-static-blue-50: rgb(239, 246, 255);
16
+ --dsw-static-blue-50p: rgb(234, 243, 255);
17
+ --dsw-static-blue-600: rgb(37, 99, 235);
18
+ --dsw-static-blue-75: rgb(229, 240, 255);
19
+ --dsw-static-blue-800: rgb(30, 64, 175);
20
+ --dsw-static-blue-900: rgb(14, 48, 116);
21
+ --dsw-static-blue-950: rgb(23, 37, 84);
22
+ --dsw-static-deepseek-100: rgb(228, 237, 253);
23
+ --dsw-static-deepseek-200: rgb(211, 226, 255);
24
+ --dsw-static-deepseek-300: rgb(183, 200, 254);
25
+ --dsw-static-deepseek-400: rgb(103, 158, 254);
26
+ --dsw-static-deepseek-450: rgb(86, 134, 254);
27
+ --dsw-static-deepseek-500: rgb(65, 118, 230);
28
+ --dsw-static-deepseek-50: rgb(237, 243, 254);
29
+ --dsw-static-deepseek-600: rgb(72, 104, 178);
30
+ --dsw-static-deepseek-700-delete: rgb(47, 76, 143);
31
+ --dsw-static-deepseek-800: rgb(52, 65, 91);
32
+ --dsw-static-deepseek-900: rgb(40, 49, 66);
33
+ --dsw-static-green-100: rgb(230, 250, 237);
34
+ --dsw-static-green-400: rgb(78, 209, 126);
35
+ --dsw-static-green-500: rgb(34, 197, 94);
36
+ --dsw-static-green-900: rgb(35, 60, 44);
37
+ --dsw-static-neutral-00: rgb(255, 255, 255);
38
+ --dsw-static-neutral-1000: rgb(0, 0, 0);
39
+ --dsw-static-neutral-100: rgb(245, 245, 245);
40
+ --dsw-static-neutral-150: rgb(237, 237, 237);
41
+ --dsw-static-neutral-200: rgb(229, 229, 229);
42
+ --dsw-static-neutral-250: rgb(220, 220, 220);
43
+ --dsw-static-neutral-300: rgb(212, 212, 212);
44
+ --dsw-static-neutral-400: rgb(162, 164, 166);
45
+ --dsw-static-neutral-500: rgb(127, 130, 135);
46
+ --dsw-static-neutral-50: rgb(250, 250, 250);
47
+ --dsw-static-neutral-550: rgb(101, 103, 107);
48
+ --dsw-static-neutral-600: rgb(84, 85, 87);
49
+ --dsw-static-neutral-700: rgb(60, 60, 61);
50
+ --dsw-static-neutral-800: rgb(41, 41, 41);
51
+ --dsw-static-neutral-850: rgb(33, 33, 35);
52
+ --dsw-static-neutral-900: rgb(15, 15, 15);
53
+ --dsw-static-neutral-bluish-00: rgb(255, 255, 255);
54
+ --dsw-static-neutral-bluish-1000: rgb(15, 17, 21);
55
+ --dsw-static-neutral-bluish-100: rgb(235, 238, 242);
56
+ --dsw-static-neutral-bluish-150: rgb(233, 236, 242);
57
+ --dsw-static-neutral-bluish-200: rgb(225, 229, 238);
58
+ --dsw-static-neutral-bluish-300: rgb(207, 211, 214);
59
+ --dsw-static-neutral-bluish-400: rgb(173, 178, 184);
60
+ --dsw-static-neutral-bluish-500: rgb(151, 157, 166);
61
+ --dsw-static-neutral-bluish-50: rgb(249, 250, 251);
62
+ --dsw-static-neutral-bluish-600: rgb(129, 133, 140);
63
+ --dsw-static-neutral-bluish-60: rgb(245, 246, 247);
64
+ --dsw-static-neutral-bluish-700: rgb(97, 102, 107);
65
+ --dsw-static-neutral-bluish-750: rgb(67, 69, 74);
66
+ --dsw-static-neutral-bluish-75: rgb(241, 243, 245);
67
+ --dsw-static-neutral-bluish-800: rgb(53, 54, 56);
68
+ --dsw-static-neutral-bluish-850: rgb(44, 44, 46);
69
+ --dsw-static-neutral-bluish-875: rgb(35, 35, 36);
70
+ --dsw-static-neutral-bluish-900: rgb(27, 27, 28);
71
+ --dsw-static-neutral-bluish-950: rgb(21, 21, 23);
72
+ --dsw-static-red-100: rgb(254, 226, 226);
73
+ --dsw-static-red-400: rgb(242, 90, 90);
74
+ --dsw-static-red-500: rgb(239, 68, 68);
75
+ --dsw-static-red-50: rgb(254, 242, 242);
76
+ --dsw-static-red-600: rgb(236, 19, 19);
77
+ --dsw-static-red-900: rgb(87, 12, 12);
78
+ }
79
+
80
+ body[data-ds-dark-theme] {
81
+ --dsw-static-amber-100: rgb(254, 245, 231);
82
+ --dsw-static-amber-400: rgb(247, 173, 49);
83
+ --dsw-static-amber-500: rgb(245, 158, 11);
84
+ --dsw-static-amber-600: rgb(221, 134, 41);
85
+ --dsw-static-amber-900: rgb(39, 36, 31);
86
+ --dsw-static-blue-100: rgb(219, 234, 254);
87
+ --dsw-static-blue-300: rgb(147, 197, 253);
88
+ --dsw-static-blue-400: rgb(96, 165, 250);
89
+ --dsw-static-blue-450: rgb(77, 147, 248);
90
+ --dsw-static-blue-500: rgb(59, 130, 246);
91
+ --dsw-static-blue-50: rgb(239, 246, 255);
92
+ --dsw-static-blue-50p: rgb(234, 243, 255);
93
+ --dsw-static-blue-600: rgb(37, 99, 235);
94
+ --dsw-static-blue-75: rgb(229, 240, 255);
95
+ --dsw-static-blue-800: rgb(30, 64, 175);
96
+ --dsw-static-blue-900: rgb(14, 48, 116);
97
+ --dsw-static-blue-950: rgb(23, 37, 84);
98
+ --dsw-static-deepseek-100: rgb(228, 237, 253);
99
+ --dsw-static-deepseek-200: rgb(211, 226, 255);
100
+ --dsw-static-deepseek-300: rgb(183, 200, 254);
101
+ --dsw-static-deepseek-400: rgb(103, 158, 254);
102
+ --dsw-static-deepseek-450: rgb(86, 134, 254);
103
+ --dsw-static-deepseek-500: rgb(65, 118, 230);
104
+ --dsw-static-deepseek-50: rgb(237, 243, 254);
105
+ --dsw-static-deepseek-600: rgb(72, 104, 178);
106
+ --dsw-static-deepseek-700-delete: rgb(47, 76, 143);
107
+ --dsw-static-deepseek-800: rgb(52, 65, 91);
108
+ --dsw-static-deepseek-900: rgb(40, 49, 66);
109
+ --dsw-static-green-100: rgb(230, 250, 237);
110
+ --dsw-static-green-400: rgb(78, 209, 126);
111
+ --dsw-static-green-500: rgb(34, 197, 94);
112
+ --dsw-static-green-900: rgb(35, 60, 44);
113
+ --dsw-static-neutral-00: rgb(255, 255, 255);
114
+ --dsw-static-neutral-1000: rgb(0, 0, 0);
115
+ --dsw-static-neutral-100: rgb(245, 245, 245);
116
+ --dsw-static-neutral-150: rgb(237, 237, 237);
117
+ --dsw-static-neutral-200: rgb(229, 229, 229);
118
+ --dsw-static-neutral-250: rgb(220, 220, 220);
119
+ --dsw-static-neutral-300: rgb(212, 212, 212);
120
+ --dsw-static-neutral-400: rgb(162, 164, 166);
121
+ --dsw-static-neutral-500: rgb(127, 130, 135);
122
+ --dsw-static-neutral-50: rgb(250, 250, 250);
123
+ --dsw-static-neutral-550: rgb(101, 103, 107);
124
+ --dsw-static-neutral-600: rgb(84, 85, 87);
125
+ --dsw-static-neutral-700: rgb(60, 60, 61);
126
+ --dsw-static-neutral-800: rgb(41, 41, 41);
127
+ --dsw-static-neutral-850: rgb(33, 33, 35);
128
+ --dsw-static-neutral-900: rgb(15, 15, 15);
129
+ --dsw-static-neutral-bluish-00: rgb(255, 255, 255);
130
+ --dsw-static-neutral-bluish-1000: rgb(15, 17, 21);
131
+ --dsw-static-neutral-bluish-100: rgb(235, 238, 242);
132
+ --dsw-static-neutral-bluish-150: rgb(233, 236, 242);
133
+ --dsw-static-neutral-bluish-200: rgb(225, 229, 238);
134
+ --dsw-static-neutral-bluish-300: rgb(207, 211, 214);
135
+ --dsw-static-neutral-bluish-400: rgb(173, 178, 184);
136
+ --dsw-static-neutral-bluish-500: rgb(151, 157, 166);
137
+ --dsw-static-neutral-bluish-50: rgb(249, 250, 251);
138
+ --dsw-static-neutral-bluish-600: rgb(129, 133, 140);
139
+ --dsw-static-neutral-bluish-60: rgb(249, 250, 251);
140
+ --dsw-static-neutral-bluish-700: rgb(97, 102, 107);
141
+ --dsw-static-neutral-bluish-750: rgb(67, 69, 74);
142
+ --dsw-static-neutral-bluish-75: rgb(241, 243, 245);
143
+ --dsw-static-neutral-bluish-800: rgb(53, 54, 56);
144
+ --dsw-static-neutral-bluish-850: rgb(44, 44, 46);
145
+ --dsw-static-neutral-bluish-875: rgb(35, 35, 36);
146
+ --dsw-static-neutral-bluish-900: rgb(27, 27, 28);
147
+ --dsw-static-neutral-bluish-950: rgb(21, 21, 23);
148
+ --dsw-static-red-100: rgb(254, 226, 226);
149
+ --dsw-static-red-400: rgb(242, 90, 90);
150
+ --dsw-static-red-500: rgb(239, 68, 68);
151
+ --dsw-static-red-50: rgb(254, 242, 242);
152
+ --dsw-static-red-600: rgb(236, 19, 19);
153
+ --dsw-static-red-900: rgb(87, 12, 12);
154
+ }
155
+
156
+ body {
157
+ --dsw-alias-bg-base: var(--dsw-static-neutral-bluish-00);
158
+ --dsw-alias-bg-layer-1: var(--dsw-static-neutral-bluish-00);
159
+ --dsw-alias-bg-layer-2: var(--dsw-static-neutral-bluish-00);
160
+ --dsw-alias-bg-layer-3: var(--dsw-static-neutral-bluish-00);
161
+ --dsw-alias-bg-mask-1: rgba(0, 0, 0, 0.24);
162
+ --dsw-alias-bg-mask-2: rgba(0, 0, 0, 0.12);
163
+ --dsw-alias-bg-mask-3: rgba(0, 0, 0, 0.48);
164
+ --dsw-alias-bg-mask-photo: rgba(0, 0, 0, 0.88);
165
+ --dsw-alias-bg-module-platform: var(--dsw-static-neutral-bluish-60);
166
+ --dsw-alias-bg-multi-select: var(--dsw-static-neutral-bluish-60);
167
+ --dsw-alias-bg-overlay: var(--dsw-static-neutral-bluish-150);
168
+ --dsw-alias-bg-skeleton: rgba(0, 0, 0, 0.04);
169
+ --dsw-alias-border-inverted2: rgba(0, 0, 0, 0);
170
+ --dsw-alias-border-inverted: rgba(0, 0, 0, 0);
171
+ --dsw-alias-border-l1: rgba(0, 0, 0, 0.04);
172
+ --dsw-alias-border-l2-darkmode-thin: rgba(0, 0, 0, 0.1);
173
+ --dsw-alias-border-l2: rgba(0, 0, 0, 0.1);
174
+ --dsw-alias-border-l3: rgba(0, 0, 0, 0.12);
175
+ --dsw-alias-border-l4: rgba(0, 0, 0, 0.16);
176
+ --dsw-alias-brand-primary-invert: var(--dsw-static-neutral-bluish-1000);
177
+ --dsw-alias-brand-primary-new-colorprimary-new-color: rgb(65, 118, 230);
178
+ --dsw-alias-brand-primary: var(--dsw-static-neutral-bluish-1000);
179
+ --dsw-alias-brand-text: var(--dsw-static-neutral-bluish-1000);
180
+ --dsw-alias-button-contrast-fill: var(--dsw-static-neutral-bluish-700);
181
+ --dsw-alias-button-elevated-fill: var(--dsw-static-neutral-bluish-00);
182
+ --dsw-alias-button-floating-fill: var(--dsw-static-neutral-bluish-00);
183
+ --dsw-alias-button-floating-hover: var(--dsw-static-neutral-bluish-75);
184
+ --dsw-alias-button-ghost-active-border: var(--dsw-static-neutral-bluish-500);
185
+ --dsw-alias-button-ghost-active-fill: var(--dsw-static-neutral-bluish-100);
186
+ --dsw-alias-button-ghost-active-hover: var(--dsw-static-neutral-bluish-150);
187
+ --dsw-alias-button-info-fill: var(--dsw-static-deepseek-500);
188
+ --dsw-alias-button-info-hover: var(--dsw-static-deepseek-400);
189
+ --dsw-alias-button-primary-dimmed: var(--dsw-static-neutral-bluish-100);
190
+ --dsw-alias-button-primary-fill: var(--dsw-alias-brand-primary);
191
+ --dsw-alias-button-primary-hover: var(--dsw-static-neutral-bluish-750);
192
+ --dsw-alias-button-tool-bar-fill-invisible: rgba(31, 31, 31, 0.36);
193
+ --dsw-alias-button-tool-bar-fill: rgba(84, 85, 87, 0.5);
194
+ --dsw-alias-button-tool-bar-hover: rgba(84, 85, 87, 0.6);
195
+ --dsw-alias-interactive-bg-active: rgba(38, 49, 72, 0.1);
196
+ --dsw-alias-interactive-bg-hover-accent: rgba(38, 49, 72, 0.14);
197
+ --dsw-alias-interactive-bg-hover-danger: rgba(236, 19, 19, 0.05);
198
+ --dsw-alias-interactive-bg-hover-solid: var(--dsw-static-neutral-bluish-75);
199
+ --dsw-alias-interactive-bg-hover: rgba(38, 49, 72, 0.06);
200
+ --dsw-alias-label-caption: var(--dsw-static-neutral-bluish-400);
201
+ --dsw-alias-label-dimmed: var(--dsw-static-neutral-bluish-200);
202
+ --dsw-alias-label-primary-bluish: var(--dsw-static-blue-900);
203
+ --dsw-alias-label-primary-dimmed: var(--dsw-static-neutral-bluish-950);
204
+ --dsw-alias-label-primary-foreground: var(--dsw-static-neutral-bluish-00);
205
+ --dsw-alias-label-primary-inverted: var(--dsw-static-neutral-bluish-00);
206
+ --dsw-alias-label-primary: var(--dsw-static-neutral-bluish-1000);
207
+ --dsw-alias-label-secondary: var(--dsw-static-neutral-bluish-700);
208
+ --dsw-alias-label-tertiary: var(--dsw-static-neutral-bluish-600);
209
+ --dsw-alias-markdown-citation: var(--dsw-static-neutral-bluish-100);
210
+ --dsw-alias-markdown-code-block-banner: var(--dsw-static-neutral-bluish-50);
211
+ --dsw-alias-markdown-code-block: var(--dsw-static-neutral-bluish-50);
212
+ --dsw-alias-markdown-code-segment-selected: var(--dsw-static-neutral-bluish-00);
213
+ --dsw-alias-markdown-code-segment-unselected: var(--dsw-static-neutral-bluish-75);
214
+ --dsw-alias-markdown-inline-code: var(--dsw-static-neutral-bluish-100);
215
+ --dsw-alias-markdown-placeholder: var(--dsw-static-neutral-bluish-60);
216
+ --dsw-alias-markdown-tag: var(--dsw-static-neutral-bluish-75);
217
+ --dsw-alias-scrollbar-bg-l1: var(--dsw-static-neutral-200);
218
+ --dsw-alias-scrollbar-bg-l2: var(--dsw-static-neutral-200);
219
+ --dsw-alias-scrollbar-hover-l1: var(--dsw-static-neutral-300);
220
+ --dsw-alias-scrollbar-hover-l2: var(--dsw-static-neutral-300);
221
+ --dsw-alias-state-business-primary: var(--dsw-static-deepseek-500);
222
+ --dsw-alias-state-business-tertiary: var(--dsw-static-deepseek-100);
223
+ --dsw-alias-state-error-primary: var(--dsw-static-red-600);
224
+ --dsw-alias-state-error-secondary: var(--dsw-static-red-400);
225
+ --dsw-alias-state-success-primary: var(--dsw-static-green-500);
226
+ --dsw-alias-state-success-secondary: var(--dsw-static-green-400);
227
+ --dsw-alias-state-success-tertiary: var(--dsw-static-green-100);
228
+ --dsw-alias-state-warn-label: var(--dsw-static-amber-600);
229
+ --dsw-alias-state-warn-primary: var(--dsw-static-amber-500);
230
+ --dsw-alias-state-warn-secondary: var(--dsw-static-amber-400);
231
+ --dsw-alias-state-warn-tertiary: var(--dsw-static-amber-100);
232
+ --dsw-alias-toast-bg: var(--dsw-static-neutral-bluish-800);
233
+ --dsw-alias-tooltip-bg: var(--dsw-static-neutral-bluish-850);
234
+ --dsw-specific-bubble-highlight: var(--dsw-static-deepseek-200);
235
+ --dsw-specific-bubble: var(--dsw-static-deepseek-50);
236
+ --dsw-specific-input-major: var(--dsw-static-neutral-bluish-00);
237
+ --dsw-specific-login-input: var(--dsw-static-neutral-bluish-50);
238
+ --dsw-specific-menu: var(--dsw-alias-bg-layer-3);
239
+ --dsw-specific-selector: var(--dsw-static-neutral-bluish-60);
240
+ --dsw-specific-sidebar-fill: var(--dsw-static-neutral-bluish-50);
241
+ --dsw-specific-sidebar-nav-item-active-accent: var(--dsw-static-deepseek-100);
242
+ --dsw-specific-sidebar-nav-item-active: var(--dsw-static-neutral-bluish-100);
243
+ --dsw-specific-sidebar-nav-item-hover: var(--dsw-static-neutral-bluish-75);
244
+ --dsw-specific-tip: var(--dsw-static-neutral-bluish-60);
245
+ }
246
+
247
+ body[data-ds-dark-theme] {
248
+ --dsw-alias-bg-base: var(--dsw-static-neutral-bluish-950);
249
+ --dsw-alias-bg-layer-1: var(--dsw-static-neutral-bluish-875);
250
+ --dsw-alias-bg-layer-2: var(--dsw-static-neutral-bluish-850);
251
+ --dsw-alias-bg-layer-3: var(--dsw-static-neutral-bluish-800);
252
+ --dsw-alias-bg-mask-1: rgba(0, 0, 0, 0.5);
253
+ --dsw-alias-bg-mask-2: rgba(0, 0, 0, 0.2);
254
+ --dsw-alias-bg-mask-3: rgba(0, 0, 0, 0.48);
255
+ --dsw-alias-bg-mask-photo: rgba(0, 0, 0, 0.88);
256
+ --dsw-alias-bg-module-platform: var(--dsw-static-neutral-bluish-800);
257
+ --dsw-alias-bg-multi-select: var(--dsw-static-neutral-850);
258
+ --dsw-alias-bg-overlay: var(--dsw-static-neutral-bluish-700);
259
+ --dsw-alias-bg-skeleton: rgba(255, 255, 255, 0.08);
260
+ --dsw-alias-border-inverted2: rgba(255, 255, 255, 0.08);
261
+ --dsw-alias-border-inverted: rgba(255, 255, 255, 0.06);
262
+ --dsw-alias-border-l1: rgba(255, 255, 255, 0.06);
263
+ --dsw-alias-border-l2-darkmode-thin: rgba(255, 255, 255, 0.06);
264
+ --dsw-alias-border-l2: rgba(255, 255, 255, 0.12);
265
+ --dsw-alias-border-l3: rgba(255, 255, 255, 0.16);
266
+ --dsw-alias-border-l4: rgba(255, 255, 255, 0.2);
267
+ --dsw-alias-brand-primary-invert: var(--dsw-static-neutral-bluish-50);
268
+ --dsw-alias-brand-primary-new-colorprimary-new-color: var(--dsw-static-deepseek-450);
269
+ --dsw-alias-brand-primary: var(--dsw-static-neutral-bluish-50);
270
+ --dsw-alias-brand-text: var(--dsw-static-neutral-bluish-50);
271
+ --dsw-alias-button-contrast-fill: var(--dsw-static-neutral-bluish-50);
272
+ --dsw-alias-button-elevated-fill: var(--dsw-static-neutral-bluish-750);
273
+ --dsw-alias-button-floating-fill: var(--dsw-static-neutral-bluish-850);
274
+ --dsw-alias-button-floating-hover: var(--dsw-static-neutral-bluish-800);
275
+ --dsw-alias-button-ghost-active-border: var(--dsw-static-neutral-bluish-600);
276
+ --dsw-alias-button-ghost-active-fill: var(--dsw-static-neutral-bluish-750);
277
+ --dsw-alias-button-ghost-active-hover: var(--dsw-static-neutral-bluish-700);
278
+ --dsw-alias-button-info-fill: var(--dsw-static-deepseek-400);
279
+ --dsw-alias-button-info-hover: var(--dsw-static-deepseek-500);
280
+ --dsw-alias-button-primary-dimmed: var(--dsw-static-neutral-bluish-750);
281
+ --dsw-alias-button-primary-fill: var(--dsw-alias-brand-primary);
282
+ --dsw-alias-button-primary-hover: var(--dsw-static-neutral-bluish-100);
283
+ --dsw-alias-button-tool-bar-fill-invisible: rgba(31, 31, 31, 0.36);
284
+ --dsw-alias-button-tool-bar-fill: rgba(84, 85, 87, 0.5);
285
+ --dsw-alias-button-tool-bar-hover: rgba(84, 85, 87, 0.6);
286
+ --dsw-alias-interactive-bg-active: rgba(255, 255, 255, 0.14);
287
+ --dsw-alias-interactive-bg-hover-accent: rgba(255, 255, 255, 0.24);
288
+ --dsw-alias-interactive-bg-hover-danger: rgba(242, 90, 90, 0.15);
289
+ --dsw-alias-interactive-bg-hover-solid: var(--dsw-static-neutral-bluish-800);
290
+ --dsw-alias-interactive-bg-hover: rgba(255, 255, 255, 0.08);
291
+ --dsw-alias-label-caption: var(--dsw-static-neutral-bluish-600);
292
+ --dsw-alias-label-dimmed: var(--dsw-static-neutral-bluish-750);
293
+ --dsw-alias-label-primary-bluish: var(--dsw-static-neutral-bluish-50);
294
+ --dsw-alias-label-primary-dimmed: var(--dsw-static-neutral-bluish-100);
295
+ --dsw-alias-label-primary-foreground: var(--dsw-static-neutral-bluish-1000);
296
+ --dsw-alias-label-primary-inverted: var(--dsw-static-neutral-bluish-800);
297
+ --dsw-alias-label-primary: var(--dsw-static-neutral-bluish-50);
298
+ --dsw-alias-label-secondary: var(--dsw-static-neutral-bluish-300);
299
+ --dsw-alias-label-tertiary: var(--dsw-static-neutral-bluish-400);
300
+ --dsw-alias-markdown-citation: var(--dsw-static-neutral-bluish-800);
301
+ --dsw-alias-markdown-code-block-banner: var(--dsw-static-neutral-bluish-850);
302
+ --dsw-alias-markdown-code-block: var(--dsw-static-neutral-bluish-900);
303
+ --dsw-alias-markdown-code-segment-selected: var(--dsw-static-neutral-bluish-800);
304
+ --dsw-alias-markdown-code-segment-unselected: var(--dsw-static-neutral-bluish-900);
305
+ --dsw-alias-markdown-inline-code: var(--dsw-static-neutral-bluish-850);
306
+ --dsw-alias-markdown-placeholder: var(--dsw-static-neutral-bluish-850);
307
+ --dsw-alias-markdown-tag: var(--dsw-static-neutral-bluish-850);
308
+ --dsw-alias-scrollbar-bg-l1: var(--dsw-static-neutral-700);
309
+ --dsw-alias-scrollbar-bg-l2: var(--dsw-static-neutral-600);
310
+ --dsw-alias-scrollbar-hover-l1: var(--dsw-static-neutral-600);
311
+ --dsw-alias-scrollbar-hover-l2: var(--dsw-static-neutral-550);
312
+ --dsw-alias-state-business-primary: var(--dsw-static-deepseek-400);
313
+ --dsw-alias-state-business-tertiary: var(--dsw-static-deepseek-800);
314
+ --dsw-alias-state-error-primary: var(--dsw-static-red-400);
315
+ --dsw-alias-state-error-secondary: var(--dsw-static-red-400);
316
+ --dsw-alias-state-success-primary: var(--dsw-static-green-500);
317
+ --dsw-alias-state-success-secondary: var(--dsw-static-green-400);
318
+ --dsw-alias-state-success-tertiary: var(--dsw-static-green-900);
319
+ --dsw-alias-state-warn-label: var(--dsw-static-amber-600);
320
+ --dsw-alias-state-warn-primary: var(--dsw-static-amber-500);
321
+ --dsw-alias-state-warn-secondary: var(--dsw-static-amber-400);
322
+ --dsw-alias-state-warn-tertiary: var(--dsw-static-amber-900);
323
+ --dsw-alias-toast-bg: var(--dsw-static-neutral-bluish-750);
324
+ --dsw-alias-tooltip-bg: var(--dsw-static-neutral-bluish-750);
325
+ --dsw-specific-bubble-highlight: var(--dsw-static-neutral-bluish-750);
326
+ --dsw-specific-bubble: var(--dsw-static-neutral-bluish-850);
327
+ --dsw-specific-input-major: var(--dsw-static-neutral-bluish-850);
328
+ --dsw-specific-login-input: var(--dsw-static-neutral-bluish-900);
329
+ --dsw-specific-menu: var(--dsw-alias-bg-layer-3);
330
+ --dsw-specific-selector: var(--dsw-static-neutral-bluish-800);
331
+ --dsw-specific-sidebar-fill: var(--dsw-static-neutral-bluish-900);
332
+ --dsw-specific-sidebar-nav-item-active-accent: var(--dsw-static-neutral-bluish-800);
333
+ --dsw-specific-sidebar-nav-item-active: var(--dsw-static-neutral-bluish-750);
334
+ --dsw-specific-sidebar-nav-item-hover: var(--dsw-static-neutral-bluish-850);
335
+ --dsw-specific-tip: var(--dsw-static-neutral-bluish-800);
336
+ }
package/lib/styles/gradient-shadow-text.css ADDED
@@ -0,0 +1,232 @@
1
+ body {
2
+ --dsw-linear-gradient-think: linear-gradient(180deg, #fff 20.19%, rgba(255, 255, 255, 0) 100%);
3
+ --dsw-linear-think-select: linear-gradient(180deg, #f5f6f7 20.19%, rgba(245, 246, 247, 0) 100%);
4
+ /* 阴影 */
5
+ --dsw-shadow-lv1: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
6
+ --dsw-shadow-lv1-blur: 0 4px 12px 0 rgba(0, 0, 0, 0.02);
7
+ --dsw-shadow-lv2: 0 4px 12px 0 rgba(0, 0, 0, 0.02), 0 2px 8px 0 rgba(0, 0, 0, 0.04);
8
+ --dsw-shadow-lv3:
9
+ 0 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 4px 0 rgba(0, 0, 0, 0.02), 0 12px 32px 0 rgba(0, 0, 0, 0.08);
10
+ /* blur filter */
11
+ --dsw-mask-blur: blur(2px);
12
+ }
13
+
14
+ body[data-ds-dark-theme] {
15
+ --dsw-linear-gradient-think: linear-gradient(180deg, #151517 20.19%, rgba(21, 21, 23, 0) 100%);
16
+ --dsw-linear-think-select: linear-gradient(180deg, #232325 20.19%, rgba(35, 35, 37, 0) 100%);
17
+ }
18
+
19
+ /* ---------- 字体 ---------- */
20
+ /* 由 @deepseek-figma-plugin/custom-variable-name 插件导出 */
21
+ body {
22
+ --dsw-font-markdown-h1: 700 24px/34px var(--dsw-font-family);
23
+ --dsw-font-markdown-h1-font-family: var(--dsw-font-family);
24
+ --dsw-font-markdown-h1-font-weight: 700;
25
+ --dsw-font-markdown-h1-line-height: 34px;
26
+ --dsw-font-markdown-h1-font-size: 24px;
27
+ --dsw-font-markdown-h1-font-style: normal;
28
+
29
+ --dsw-font-markdown-h2: 700 22px/32px var(--dsw-font-family);
30
+ --dsw-font-markdown-h2-font-family: var(--dsw-font-family);
31
+ --dsw-font-markdown-h2-font-weight: 700;
32
+ --dsw-font-markdown-h2-line-height: 32px;
33
+ --dsw-font-markdown-h2-font-size: 22px;
34
+ --dsw-font-markdown-h2-font-style: normal;
35
+
36
+ --dsw-font-markdown-h3: 700 20px/30px var(--dsw-font-family);
37
+ --dsw-font-markdown-h3-font-family: var(--dsw-font-family);
38
+ --dsw-font-markdown-h3-font-weight: 700;
39
+ --dsw-font-markdown-h3-line-height: 30px;
40
+ --dsw-font-markdown-h3-font-size: 20px;
41
+ --dsw-font-markdown-h3-font-style: normal;
42
+
43
+ --dsw-font-markdown-h4: 600 16px/28px var(--dsw-font-family);
44
+ --dsw-font-markdown-h4-font-family: var(--dsw-font-family);
45
+ --dsw-font-markdown-h4-font-weight: 600;
46
+ --dsw-font-markdown-h4-line-height: 28px;
47
+ --dsw-font-markdown-h4-font-size: 16px;
48
+ --dsw-font-markdown-h4-font-style: normal;
49
+
50
+ --dsw-font-markdown-base: 16px/28px var(--dsw-font-family);
51
+ --dsw-font-markdown-base-font-family: var(--dsw-font-family);
52
+ --dsw-font-markdown-base-font-weight: 400;
53
+ --dsw-font-markdown-base-line-height: 28px;
54
+ --dsw-font-markdown-base-font-size: 16px;
55
+ --dsw-font-markdown-base-font-style: normal;
56
+
57
+ --dsw-font-markdown-base-strong: 600 16px/28px var(--dsw-font-family);
58
+ --dsw-font-markdown-base-strong-font-family: var(--dsw-font-family);
59
+ --dsw-font-markdown-base-strong-font-weight: 600;
60
+ --dsw-font-markdown-base-strong-line-height: 28px;
61
+ --dsw-font-markdown-base-strong-font-size: 16px;
62
+ --dsw-font-markdown-base-strong-font-style: normal;
63
+
64
+ --dsw-font-markdown-base-italic: italic 16px/28px var(--dsw-font-family);
65
+ --dsw-font-markdown-base-italic-font-family: var(--dsw-font-family);
66
+ --dsw-font-markdown-base-italic-font-weight: 400;
67
+ --dsw-font-markdown-base-italic-line-height: 28px;
68
+ --dsw-font-markdown-base-italic-font-size: 16px;
69
+ --dsw-font-markdown-base-italic-font-style: italic;
70
+
71
+ --dsw-font-markdown-base-strong-italic: italic 600 16px/28px var(--dsw-font-family);
72
+ --dsw-font-markdown-base-strong-italic-font-family: var(--dsw-font-family);
73
+ --dsw-font-markdown-base-strong-italic-font-weight: 600;
74
+ --dsw-font-markdown-base-strong-italic-line-height: 28px;
75
+ --dsw-font-markdown-base-strong-italic-font-size: 16px;
76
+ --dsw-font-markdown-base-strong-italic-font-style: italic;
77
+
78
+ --dsw-font-markdown-table: 15px/25px var(--dsw-font-family);
79
+ --dsw-font-markdown-table-font-family: var(--dsw-font-family);
80
+ --dsw-font-markdown-table-font-weight: 400;
81
+ --dsw-font-markdown-table-line-height: 25px;
82
+ --dsw-font-markdown-table-font-size: 15px;
83
+ --dsw-font-markdown-table-font-style: normal;
84
+
85
+ --dsw-font-markdown-table-head: 500 15px/25px var(--dsw-font-family);
86
+ --dsw-font-markdown-table-head-font-family: var(--dsw-font-family);
87
+ --dsw-font-markdown-table-head-font-weight: 500;
88
+ --dsw-font-markdown-table-head-line-height: 25px;
89
+ --dsw-font-markdown-table-head-font-size: 15px;
90
+ --dsw-font-markdown-table-head-font-style: normal;
91
+
92
+ --dsw-font-markdown-small: 14px/24px var(--dsw-font-family);
93
+ --dsw-font-markdown-small-font-family: var(--dsw-font-family);
94
+ --dsw-font-markdown-small-font-weight: 400;
95
+ --dsw-font-markdown-small-line-height: 24px;
96
+ --dsw-font-markdown-small-font-size: 14px;
97
+ --dsw-font-markdown-small-font-style: normal;
98
+
99
+ --dsw-font-markdown-small-strong: 600 14px/24px var(--dsw-font-family);
100
+ --dsw-font-markdown-small-strong-font-family: var(--dsw-font-family);
101
+ --dsw-font-markdown-small-strong-font-weight: 600;
102
+ --dsw-font-markdown-small-strong-line-height: 24px;
103
+ --dsw-font-markdown-small-strong-font-size: 14px;
104
+ --dsw-font-markdown-small-strong-font-style: normal;
105
+
106
+ --dsw-font-markdown-small-italic: italic 14px/24px var(--dsw-font-family);
107
+ --dsw-font-markdown-small-italic-font-family: var(--dsw-font-family);
108
+ --dsw-font-markdown-small-italic-font-weight: 400;
109
+ --dsw-font-markdown-small-italic-line-height: 24px;
110
+ --dsw-font-markdown-small-italic-font-size: 14px;
111
+ --dsw-font-markdown-small-italic-font-style: italic;
112
+
113
+ --dsw-font-markdown-small-strong-italic: italic 600 14px/24px var(--dsw-font-family);
114
+ --dsw-font-markdown-small-strong-italic-font-family: var(--dsw-font-family);
115
+ --dsw-font-markdown-small-strong-italic-font-weight: 600;
116
+ --dsw-font-markdown-small-strong-italic-line-height: 24px;
117
+ --dsw-font-markdown-small-strong-italic-font-size: 14px;
118
+ --dsw-font-markdown-small-strong-italic-font-style: italic;
119
+
120
+ --dsw-font-markdown-code: 14px/22px var(--ds-font-family-code);
121
+ --dsw-font-markdown-code-font-family: var(--ds-font-family-code);
122
+ --dsw-font-markdown-code-font-weight: 400;
123
+ --dsw-font-markdown-code-line-height: 22px;
124
+ --dsw-font-markdown-code-font-size: 14px;
125
+ --dsw-font-markdown-code-font-style: normal;
126
+
127
+ --dsw-font-markdown-code-block: 13px/22px var(--ds-font-family-code);
128
+ --dsw-font-markdown-code-block-font-family: var(--ds-font-family-code);
129
+ --dsw-font-markdown-code-block-font-weight: 400;
130
+ --dsw-font-markdown-code-block-line-height: 22px;
131
+ --dsw-font-markdown-code-block-font-size: 13px;
132
+ --dsw-font-markdown-code-block-font-style: normal;
133
+
134
+ /* 手工补充（非插件导出）：tool row 展开卡片内的小号 code 字体。 */
135
+ --dsw-font-markdown-code-block-small: 12px/18px var(--ds-font-family-code);
136
+ --dsw-font-markdown-code-block-small-font-family: var(--ds-font-family-code);
137
+ --dsw-font-markdown-code-block-small-font-weight: 400;
138
+ --dsw-font-markdown-code-block-small-line-height: 18px;
139
+ --dsw-font-markdown-code-block-small-font-size: 12px;
140
+ --dsw-font-markdown-code-block-small-font-style: normal;
141
+
142
+ --dsw-font-xl-24: 600 24px/32px var(--dsw-font-family);
143
+ --dsw-font-xl-24-font-family: var(--dsw-font-family);
144
+ --dsw-font-xl-24-font-weight: 600;
145
+ --dsw-font-xl-24-line-height: 32px;
146
+ --dsw-font-xl-24-font-size: 24px;
147
+ --dsw-font-xl-24-font-style: normal;
148
+
149
+ --dsw-font-l-20: 500 20px/28px var(--dsw-font-family);
150
+ --dsw-font-l-20-font-family: var(--dsw-font-family);
151
+ --dsw-font-l-20-font-weight: 500;
152
+ --dsw-font-l-20-line-height: 28px;
153
+ --dsw-font-l-20-font-size: 20px;
154
+ --dsw-font-l-20-font-style: normal;
155
+
156
+ --dsw-font-m-18: 500 16px/28px var(--dsw-font-family);
157
+ --dsw-font-m-18-font-family: var(--dsw-font-family);
158
+ --dsw-font-m-18-font-weight: 500;
159
+ --dsw-font-m-18-line-height: 28px;
160
+ --dsw-font-m-18-font-size: 16px;
161
+ --dsw-font-m-18-font-style: normal;
162
+
163
+ --dsw-font-base-16: 16px/24px var(--dsw-font-family);
164
+ --dsw-font-base-16-font-family: var(--dsw-font-family);
165
+ --dsw-font-base-16-font-weight: 400;
166
+ --dsw-font-base-16-line-height: 24px;
167
+ --dsw-font-base-16-font-size: 16px;
168
+ --dsw-font-base-16-font-style: normal;
169
+
170
+ --dsw-font-base-strong-16: 500 16px/24px var(--dsw-font-family);
171
+ --dsw-font-base-strong-16-font-family: var(--dsw-font-family);
172
+ --dsw-font-base-strong-16-font-weight: 500;
173
+ --dsw-font-base-strong-16-line-height: 24px;
174
+ --dsw-font-base-strong-16-font-size: 16px;
175
+ --dsw-font-base-strong-16-font-style: normal;
176
+
177
+ --dsw-font-s-14: 14px/22px var(--dsw-font-family);
178
+ --dsw-font-s-14-font-family: var(--dsw-font-family);
179
+ --dsw-font-s-14-font-weight: 400;
180
+ --dsw-font-s-14-line-height: 22px;
181
+ --dsw-font-s-14-font-size: 14px;
182
+ --dsw-font-s-14-font-style: normal;
183
+
184
+ --dsw-font-s-strong-14: 500 14px/22px var(--dsw-font-family);
185
+ --dsw-font-s-strong-14-font-family: var(--dsw-font-family);
186
+ --dsw-font-s-strong-14-font-weight: 500;
187
+ --dsw-font-s-strong-14-line-height: 22px;
188
+ --dsw-font-s-strong-14-font-size: 14px;
189
+ --dsw-font-s-strong-14-font-style: normal;
190
+
191
+ --dsw-font-xs-13: 13px/20px var(--dsw-font-family);
192
+ --dsw-font-xs-13-font-family: var(--dsw-font-family);
193
+ --dsw-font-xs-13-font-weight: 400;
194
+ --dsw-font-xs-13-line-height: 20px;
195
+ --dsw-font-xs-13-font-size: 13px;
196
+ --dsw-font-xs-13-font-style: normal;
197
+
198
+ --dsw-font-xs-strong-13: 500 13px/20px var(--dsw-font-family);
199
+ --dsw-font-xs-strong-13-font-family: var(--dsw-font-family);
200
+ --dsw-font-xs-strong-13-font-weight: 500;
201
+ --dsw-font-xs-strong-13-line-height: 20px;
202
+ --dsw-font-xs-strong-13-font-size: 13px;
203
+ --dsw-font-xs-strong-13-font-style: normal;
204
+
205
+ --dsw-font-xxs-12: 12px/18px var(--dsw-font-family);
206
+ --dsw-font-xxs-12-font-family: var(--dsw-font-family);
207
+ --dsw-font-xxs-12-font-weight: 400;
208
+ --dsw-font-xxs-12-line-height: 18px;
209
+ --dsw-font-xxs-12-font-size: 12px;
210
+ --dsw-font-xxs-12-font-style: normal;
211
+
212
+ --dsw-font-xxs-strong-12: 500 12px/18px var(--dsw-font-family);
213
+ --dsw-font-xxs-strong-12-font-family: var(--dsw-font-family);
214
+ --dsw-font-xxs-strong-12-font-weight: 500;
215
+ --dsw-font-xxs-strong-12-line-height: 18px;
216
+ --dsw-font-xxs-strong-12-font-size: 12px;
217
+ --dsw-font-xxs-strong-12-font-style: normal;
218
+
219
+ --dsw-font-xxxs-11: 11px/14px var(--dsw-font-family);
220
+ --dsw-font-xxxs-11-font-family: var(--dsw-font-family);
221
+ --dsw-font-xxxs-11-font-weight: 400;
222
+ --dsw-font-xxxs-11-line-height: 14px;
223
+ --dsw-font-xxxs-11-font-size: 11px;
224
+ --dsw-font-xxxs-11-font-style: normal;
225
+
226
+ --dsw-font-xxxs-strong-11: 500 11px/14px var(--dsw-font-family);
227
+ --dsw-font-xxxs-strong-11-font-family: var(--dsw-font-family);
228
+ --dsw-font-xxxs-strong-11-font-weight: 500;
229
+ --dsw-font-xxxs-strong-11-line-height: 14px;
230
+ --dsw-font-xxxs-strong-11-font-size: 11px;
231
+ --dsw-font-xxxs-strong-11-font-style: normal;
232
+ }