@morlay/dsh-client-ui-primitives 0.0.6 → 0.0.8

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 (76) hide show
  1. package/README.md +31 -6
  2. package/dist/client.d.mts +186 -11175
  3. package/dist/client.mjs +3730 -0
  4. package/locale/en.json +1 -1
  5. package/locale/zh.json +1 -1
  6. package/package.json +23 -34
  7. package/src/client/controls/Bubble.module.css +17 -0
  8. package/src/client/controls/Bubble.tsx +17 -0
  9. package/src/client/controls/Button.module.css +10 -0
  10. package/src/client/controls/Button.tsx +29 -0
  11. package/src/client/controls/DisclosureRow.module.css +22 -0
  12. package/src/client/controls/DisclosureRow.tsx +20 -0
  13. package/src/client/controls/IconButton.module.css +50 -0
  14. package/src/client/controls/IconButton.tsx +45 -0
  15. package/src/client/controls/ModelRouteList.module.css +100 -0
  16. package/src/client/controls/ModelRouteList.tsx +118 -0
  17. package/src/client/controls/MultilineField.module.css +26 -0
  18. package/src/client/controls/MultilineField.tsx +19 -0
  19. package/src/client/controls/SearchInput.module.css +11 -0
  20. package/src/client/controls/SearchInput.tsx +22 -0
  21. package/src/client/controls/SearchSelect.module.css +34 -0
  22. package/src/client/controls/SearchSelect.tsx +138 -0
  23. package/src/client/controls/SeatButton.module.css +53 -0
  24. package/src/client/controls/SeatButton.tsx +40 -0
  25. package/src/client/controls/Spinner.module.css +18 -0
  26. package/src/client/controls/Spinner.tsx +14 -0
  27. package/src/client/controls/Tabs.module.css +48 -0
  28. package/src/client/controls/Tabs.tsx +57 -0
  29. package/src/client/controls/TagInput.module.css +105 -0
  30. package/src/client/controls/TagInput.tsx +152 -0
  31. package/src/client/controls/TimeLabel.module.css +16 -0
  32. package/src/client/controls/TimeLabel.tsx +15 -0
  33. package/src/client/controls/VisuallyHidden.module.css +9 -0
  34. package/src/client/controls/VisuallyHidden.tsx +16 -0
  35. package/src/client/controls/classes.ts +7 -0
  36. package/src/client/controls/index.ts +30 -0
  37. package/src/client/controls/tags.ts +24 -0
  38. package/src/client/index.ts +17 -9
  39. package/src/client/layout/Row.tsx +86 -0
  40. package/src/client/layout/Stack.tsx +79 -0
  41. package/src/client/layout/Text.tsx +54 -0
  42. package/src/client/layout/index.ts +16 -0
  43. package/src/client/layout/layout.module.css +217 -0
  44. package/src/client/layout/scales.ts +91 -0
  45. package/src/client/schema-form/Editor.tsx +61 -70
  46. package/src/client/schema-form/SchemaForm.tsx +4 -4
  47. package/src/client/schema-form/TruncatedTooltip.tsx +60 -0
  48. package/src/client/schema-form/controller.ts +5 -2
  49. package/src/client/schema-form/geometry.ts +3 -0
  50. package/src/client/schema-form/index.ts +11 -0
  51. package/src/client/schema-form/schema-form.module.css +335 -0
  52. package/src/client/schema-form/testing/resize-observer-stub.ts +63 -0
  53. package/src/client/schema-form/value.tsx +18 -15
  54. package/src/client/settings-form/SettingsFieldRow.module.css +93 -0
  55. package/src/client/settings-form/SettingsFieldRow.tsx +103 -0
  56. package/src/client/settings-form/index.ts +5 -18
  57. package/src/css-modules.d.ts +6 -0
  58. package/dist/client.cjs +0 -17075
  59. package/dist/client.d.cts +0 -11656
  60. package/dist/index.d.cts +0 -5
  61. package/dist/reference-BX54bj6_.d.cts +0 -30
  62. package/src/client/schema-form/styles.ts +0 -298
  63. package/src/client/settings-form/SettingsForm.styles.ts +0 -58
  64. package/src/client/settings-form/SettingsForm.tsx +0 -68
  65. package/src/client/settings-form/fields.styles.ts +0 -158
  66. package/src/client/settings-form/fields.tsx +0 -184
  67. package/src/client/settings-form/form-model.ts +0 -339
  68. package/src/client/styling/css.ts +0 -27
  69. package/src/client/styling/focus.ts +0 -9
  70. package/src/client/styling/index.ts +0 -6
  71. package/src/client/styling/styled.tsx +0 -54
  72. package/src/client/styling/styling.ts +0 -137
  73. package/src/client/styling/token.ts +0 -275
  74. package/src/client/styling/toolkit.ts +0 -37
  75. package/src/client/theme.generated.ts +0 -833
  76. package/src/client/theme.ts +0 -5
@@ -1,833 +0,0 @@
1
- // 官方主题的 `--dsw-*` token 全集(400 个),由 packages/client/ui-primitives/scripts/gen-design-tokens.mts 生成,勿手改。
2
- //
3
- // 叶子是该变量的**默认值**(官方 light 主题里首次出现的定义):既是类型推导的来源,也可作 fallback。
4
- // `"$"` 键出现在「自身也是 token 的分支」上(命名体系里有 40 个短名同时是长名前缀的 token)。
5
- // 消费时只需树形状——`Token.vars()` 生成 `var(--dsw-…)`,不重新定义变量。
6
- // 漂移、往返与默认值完整性由 src/__tests__/design-tokens.spec.ts 守卫。
7
- export const designTokens = {
8
- alias: {
9
- bg: {
10
- base: "var(--dsw-static-neutral-bluish-00)",
11
- document: {
12
- preview: "var(--dsw-static-neutral-bluish-100)",
13
- selection: "color-mix(in srgb, var(--dsw-static-blue-500) 40%, transparent)",
14
- },
15
- layer: {
16
- "1": "var(--dsw-static-neutral-bluish-00)",
17
- "2": "var(--dsw-static-neutral-bluish-00)",
18
- "3": "var(--dsw-static-neutral-bluish-00)",
19
- },
20
- mask: {
21
- "1": "rgba(0, 0, 0, 0.24)",
22
- "2": "rgba(0, 0, 0, 0.12)",
23
- "3": "rgba(0, 0, 0, 0.48)",
24
- drop: "rgba(255, 255, 255, 0.7)",
25
- photo: "rgba(0, 0, 0, 0.88)",
26
- },
27
- module: {
28
- platform: "var(--dsw-static-neutral-bluish-60)",
29
- },
30
- multi: {
31
- select: "var(--dsw-static-neutral-bluish-60)",
32
- },
33
- overlay: "var(--dsw-static-neutral-bluish-150)",
34
- skeleton: "rgba(0, 0, 0, 0.04)",
35
- },
36
- border: {
37
- inverted: "rgba(0, 0, 0, 0)",
38
- inverted2: "rgba(0, 0, 0, 0)",
39
- l1: "rgba(0, 0, 0, 0.04)",
40
- l2: {
41
- $: "rgba(0, 0, 0, 0.1)",
42
- darkmode: {
43
- thin: "rgba(0, 0, 0, 0.1)",
44
- },
45
- },
46
- l3: "rgba(0, 0, 0, 0.12)",
47
- l4: "rgba(0, 0, 0, 0.16)",
48
- },
49
- brand: {
50
- primary: {
51
- $: "var(--dsw-static-neutral-bluish-1000)",
52
- invert: "var(--dsw-static-neutral-bluish-1000)",
53
- new: {
54
- colorprimary: {
55
- new: {
56
- color: "rgb(65, 118, 230)",
57
- },
58
- },
59
- },
60
- },
61
- text: "var(--dsw-static-neutral-bluish-1000)",
62
- },
63
- button: {
64
- contrast: {
65
- fill: "var(--dsw-static-neutral-bluish-700)",
66
- },
67
- elevated: {
68
- fill: "var(--dsw-static-neutral-bluish-00)",
69
- },
70
- floating: {
71
- fill: "var(--dsw-static-neutral-bluish-00)",
72
- hover: "var(--dsw-static-neutral-bluish-75)",
73
- },
74
- ghost: {
75
- active: {
76
- border: "var(--dsw-static-neutral-bluish-500)",
77
- fill: "var(--dsw-static-neutral-bluish-100)",
78
- hover: "var(--dsw-static-neutral-bluish-150)",
79
- },
80
- },
81
- info: {
82
- fill: "var(--dsw-static-deepseek-500)",
83
- hover: "var(--dsw-static-deepseek-400)",
84
- },
85
- primary: {
86
- dimmed: "var(--dsw-static-neutral-bluish-100)",
87
- fill: "var(--dsw-alias-brand-primary)",
88
- hover: "var(--dsw-static-neutral-bluish-750)",
89
- },
90
- tool: {
91
- bar: {
92
- fill: {
93
- $: "rgba(84, 85, 87, 0.5)",
94
- invisible: "rgba(31, 31, 31, 0.36)",
95
- },
96
- hover: "rgba(84, 85, 87, 0.6)",
97
- },
98
- },
99
- },
100
- code: {
101
- diff: {
102
- added: "var(--dsw-static-green-500-a08)",
103
- deleted: "var(--dsw-static-red-600-a08)",
104
- },
105
- },
106
- file: {
107
- diff: {
108
- added: {
109
- bg: "rgb(230, 244, 231)",
110
- gutter: "rgb(237, 247, 237)",
111
- marker: "rgb(1, 162, 65)",
112
- },
113
- deleted: {
114
- bg: "rgb(252, 230, 226)",
115
- gutter: "rgb(253, 236, 233)",
116
- marker: "rgb(186, 39, 35)",
117
- },
118
- },
119
- },
120
- interactive: {
121
- bg: {
122
- active: "rgba(38, 49, 72, 0.1)",
123
- hover: {
124
- $: "rgba(38, 49, 72, 0.06)",
125
- accent: "rgba(38, 49, 72, 0.14)",
126
- danger: "rgba(236, 19, 19, 0.05)",
127
- solid: "var(--dsw-static-neutral-bluish-75)",
128
- },
129
- },
130
- },
131
- label: {
132
- caption: "var(--dsw-static-neutral-bluish-400)",
133
- deep: {
134
- diving: {
135
- $: "color-mix(in srgb, var(--dsw-static-deepseek-500) 70%, var(--dsw-static-blue-950))",
136
- shimmer:
137
- "color-mix(in srgb, var(--dsw-static-deepseek-500) 30%, var(--dsw-static-blue-950))",
138
- },
139
- },
140
- dimmed: "var(--dsw-static-neutral-bluish-200)",
141
- document: {
142
- preview: "var(--dsw-static-neutral-bluish-700)",
143
- },
144
- primary: {
145
- $: "var(--dsw-static-neutral-bluish-1000)",
146
- bluish: "var(--dsw-static-blue-900)",
147
- dimmed: "var(--dsw-static-neutral-bluish-950)",
148
- foreground: "var(--dsw-static-neutral-bluish-00)",
149
- inverted: "var(--dsw-static-neutral-bluish-00)",
150
- },
151
- secondary: "var(--dsw-static-neutral-bluish-700)",
152
- shimmer: "color-mix(in srgb, var(--dsw-static-neutral-1000) 30%, transparent)",
153
- tertiary: "var(--dsw-static-neutral-bluish-600)",
154
- },
155
- link: "var(--dsw-static-deepseek-500)",
156
- markdown: {
157
- citation: "var(--dsw-static-neutral-bluish-100)",
158
- code: {
159
- block: {
160
- $: "var(--dsw-static-neutral-bluish-50)",
161
- banner: "var(--dsw-static-neutral-bluish-50)",
162
- },
163
- segment: {
164
- selected: "var(--dsw-static-neutral-bluish-00)",
165
- unselected: "var(--dsw-static-neutral-bluish-75)",
166
- },
167
- },
168
- inline: {
169
- code: "var(--dsw-static-neutral-50)",
170
- },
171
- placeholder: "var(--dsw-static-neutral-bluish-60)",
172
- tag: "var(--dsw-static-neutral-bluish-75)",
173
- },
174
- menu: {
175
- icon: "var(--dsw-static-neutral-bluish-800)",
176
- },
177
- onboarding: {
178
- accent: "rgb(57, 100, 254)",
179
- card: {
180
- fill: "color-mix(in srgb, var(--dsw-static-neutral-bluish-00) 80%, transparent)",
181
- },
182
- checkbox: {
183
- border: "color-mix(in srgb, var(--dsw-static-neutral-bluish-1000) 20%, transparent)",
184
- },
185
- secondary: {
186
- fill: "var(--dsw-static-neutral-bluish-00)",
187
- },
188
- },
189
- scrollbar: {
190
- bg: {
191
- l1: "var(--dsw-static-neutral-200)",
192
- l2: "var(--dsw-static-neutral-200)",
193
- },
194
- hover: {
195
- l1: "var(--dsw-static-neutral-300)",
196
- l2: "var(--dsw-static-neutral-300)",
197
- },
198
- },
199
- settings: {
200
- card: {
201
- fill: "var(--dsw-alias-bg-layer-2)",
202
- stroke: "var(--dsw-alias-border-l4)",
203
- },
204
- },
205
- state: {
206
- business: {
207
- primary: "var(--dsw-static-deepseek-500)",
208
- tertiary: "var(--dsw-static-deepseek-100)",
209
- },
210
- error: {
211
- primary: "var(--dsw-static-red-600)",
212
- secondary: "var(--dsw-static-red-400)",
213
- },
214
- idle: {
215
- primary: "var(--dsw-static-neutral-300)",
216
- },
217
- success: {
218
- primary: "var(--dsw-static-green-500)",
219
- secondary: "var(--dsw-static-green-400)",
220
- tertiary: "var(--dsw-static-green-100)",
221
- },
222
- warn: {
223
- label: "var(--dsw-static-amber-600)",
224
- primary: "var(--dsw-static-amber-500)",
225
- secondary: "var(--dsw-static-amber-400)",
226
- tertiary: "var(--dsw-static-amber-100)",
227
- },
228
- },
229
- switch: {
230
- thumb: "var(--dsw-static-neutral-bluish-00)",
231
- },
232
- toast: {
233
- bg: "var(--dsw-static-neutral-bluish-800)",
234
- label: "var(--dsw-static-neutral-bluish-00)",
235
- },
236
- tooltip: {
237
- bg: "var(--dsw-static-neutral-bluish-850)",
238
- key: {
239
- bg: "color-mix(in srgb, var(--dsw-alias-tooltip-bg), white 18%)",
240
- },
241
- },
242
- },
243
- corner: {
244
- shape: "superellipse(1.5)",
245
- },
246
- elevation: {
247
- panel:
248
- "var(--dsw-elevation-stroke), 0 3px 8px 0 rgba(0, 0, 0, 0.03), 0 0 16px 0 rgba(0, 0, 0, 0.02)",
249
- prominent:
250
- "var(--dsw-elevation-stroke), 0 3px 8px 0 rgba(0, 0, 0, 0.04), 0 0 20px 0 rgba(0, 0, 0, 0.05)",
251
- soft: "var(--dsw-elevation-stroke), 0 4px 16px 0 rgba(0, 0, 0, 0.03), 0 0 24px 0 rgba(0, 0, 0, 0.03)",
252
- stroke: {
253
- $: "0 0 0 0.5px var(--dsw-elevation-stroke-color)",
254
- color: "var(--dsw-alias-border-l4)",
255
- },
256
- },
257
- focus: {
258
- ring: {
259
- color: "transparent",
260
- width: "2px",
261
- },
262
- },
263
- font: {
264
- base: {
265
- "16": {
266
- $: "16px/24px var(--dsw-font-family)",
267
- font: {
268
- family: "var(--dsw-font-family)",
269
- size: "16px",
270
- style: "normal",
271
- weight: "400",
272
- },
273
- line: {
274
- height: "24px",
275
- },
276
- },
277
- strong: {
278
- "16": {
279
- $: "500 16px/24px var(--dsw-font-family)",
280
- font: {
281
- family: "var(--dsw-font-family)",
282
- size: "16px",
283
- style: "normal",
284
- weight: "500",
285
- },
286
- line: {
287
- height: "24px",
288
- },
289
- },
290
- },
291
- },
292
- family: {
293
- $: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',\n 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif",
294
- brand: "'Montserrat', var(--dsw-font-family)",
295
- },
296
- l: {
297
- "20": {
298
- $: "500 20px/28px var(--dsw-font-family)",
299
- font: {
300
- family: "var(--dsw-font-family)",
301
- size: "20px",
302
- style: "normal",
303
- weight: "500",
304
- },
305
- line: {
306
- height: "28px",
307
- },
308
- },
309
- },
310
- m: {
311
- "18": {
312
- $: "500 16px/28px var(--dsw-font-family)",
313
- font: {
314
- family: "var(--dsw-font-family)",
315
- size: "16px",
316
- style: "normal",
317
- weight: "500",
318
- },
319
- line: {
320
- height: "28px",
321
- },
322
- },
323
- },
324
- markdown: {
325
- base: {
326
- $: "var(--dsh-content-font-size, 14px) / calc(24px + var(--dsh-content-font-delta)) var(--dsw-font-family)",
327
- font: {
328
- family: "var(--dsw-font-family)",
329
- size: "var(--dsh-content-font-size, 14px)",
330
- style: "normal",
331
- weight: "400",
332
- },
333
- italic: {
334
- $: "italic var(--dsh-content-font-size, 14px) / calc(24px + var(--dsh-content-font-delta)) var(--dsw-font-family)",
335
- font: {
336
- family: "var(--dsw-font-family)",
337
- size: "var(--dsh-content-font-size, 14px)",
338
- style: "italic",
339
- weight: "400",
340
- },
341
- line: {
342
- height: "calc(24px + var(--dsh-content-font-delta))",
343
- },
344
- },
345
- line: {
346
- height: "calc(24px + var(--dsh-content-font-delta))",
347
- },
348
- strong: {
349
- $: "600 var(--dsh-content-font-size, 14px) / calc(24px + var(--dsh-content-font-delta)) var(--dsw-font-family)",
350
- font: {
351
- family: "var(--dsw-font-family)",
352
- size: "var(--dsh-content-font-size, 14px)",
353
- style: "normal",
354
- weight: "600",
355
- },
356
- italic: {
357
- $: "italic 600 var(--dsh-content-font-size, 14px) / calc(24px + var(--dsh-content-font-delta)) var(--dsw-font-family)",
358
- font: {
359
- family: "var(--dsw-font-family)",
360
- size: "var(--dsh-content-font-size, 14px)",
361
- style: "italic",
362
- weight: "600",
363
- },
364
- line: {
365
- height: "calc(24px + var(--dsh-content-font-delta))",
366
- },
367
- },
368
- line: {
369
- height: "calc(24px + var(--dsh-content-font-delta))",
370
- },
371
- },
372
- },
373
- code: {
374
- $: "12px/19px var(--ds-font-family-code)",
375
- block: {
376
- $: "11px/19px var(--ds-font-family-code)",
377
- font: {
378
- family: "var(--ds-font-family-code)",
379
- size: "11px",
380
- style: "normal",
381
- weight: "400",
382
- },
383
- line: {
384
- height: "19px",
385
- },
386
- small: {
387
- $: "11px/16px var(--ds-font-family-code)",
388
- font: {
389
- family: "var(--ds-font-family-code)",
390
- size: "11px",
391
- style: "normal",
392
- weight: "400",
393
- },
394
- line: {
395
- height: "16px",
396
- },
397
- },
398
- },
399
- font: {
400
- family: "var(--ds-font-family-code)",
401
- size: "12px",
402
- style: "normal",
403
- weight: "400",
404
- },
405
- line: {
406
- height: "19px",
407
- },
408
- },
409
- h1: {
410
- $: "700 calc(21px + var(--dsh-content-font-delta)) / calc(30px + var(--dsh-content-font-delta)) var(--dsw-font-family)",
411
- font: {
412
- family: "var(--dsw-font-family)",
413
- size: "calc(21px + var(--dsh-content-font-delta))",
414
- style: "normal",
415
- weight: "700",
416
- },
417
- line: {
418
- height: "calc(30px + var(--dsh-content-font-delta))",
419
- },
420
- },
421
- h2: {
422
- $: "700 calc(19px + var(--dsh-content-font-delta)) / calc(28px + var(--dsh-content-font-delta)) var(--dsw-font-family)",
423
- font: {
424
- family: "var(--dsw-font-family)",
425
- size: "calc(19px + var(--dsh-content-font-delta))",
426
- style: "normal",
427
- weight: "700",
428
- },
429
- line: {
430
- height: "calc(28px + var(--dsh-content-font-delta))",
431
- },
432
- },
433
- h3: {
434
- $: "700 calc(18px + var(--dsh-content-font-delta)) / calc(26px + var(--dsh-content-font-delta)) var(--dsw-font-family)",
435
- font: {
436
- family: "var(--dsw-font-family)",
437
- size: "calc(18px + var(--dsh-content-font-delta))",
438
- style: "normal",
439
- weight: "700",
440
- },
441
- line: {
442
- height: "calc(26px + var(--dsh-content-font-delta))",
443
- },
444
- },
445
- h4: {
446
- $: "600 var(--dsh-content-font-size, 14px) / calc(24px + var(--dsh-content-font-delta)) var(--dsw-font-family)",
447
- font: {
448
- family: "var(--dsw-font-family)",
449
- size: "var(--dsh-content-font-size, 14px)",
450
- style: "normal",
451
- weight: "600",
452
- },
453
- line: {
454
- height: "calc(24px + var(--dsh-content-font-delta))",
455
- },
456
- },
457
- small: {
458
- $: "12px/20px var(--dsw-font-family)",
459
- font: {
460
- family: "var(--dsw-font-family)",
461
- size: "12px",
462
- style: "normal",
463
- weight: "400",
464
- },
465
- italic: {
466
- $: "italic 12px/20px var(--dsw-font-family)",
467
- font: {
468
- family: "var(--dsw-font-family)",
469
- size: "12px",
470
- style: "italic",
471
- weight: "400",
472
- },
473
- line: {
474
- height: "20px",
475
- },
476
- },
477
- line: {
478
- height: "20px",
479
- },
480
- strong: {
481
- $: "600 12px/20px var(--dsw-font-family)",
482
- font: {
483
- family: "var(--dsw-font-family)",
484
- size: "12px",
485
- style: "normal",
486
- weight: "600",
487
- },
488
- italic: {
489
- $: "italic 600 12px/20px var(--dsw-font-family)",
490
- font: {
491
- family: "var(--dsw-font-family)",
492
- size: "12px",
493
- style: "italic",
494
- weight: "600",
495
- },
496
- line: {
497
- height: "20px",
498
- },
499
- },
500
- line: {
501
- height: "20px",
502
- },
503
- },
504
- },
505
- table: {
506
- $: "var(--dsh-content-font-size-secondary, 13px)/calc(22px + var(--dsh-content-font-delta-secondary, 0px)) var(--dsw-font-family)",
507
- font: {
508
- family: "var(--dsw-font-family)",
509
- size: "var(--dsh-content-font-size-secondary, 13px)",
510
- style: "normal",
511
- weight: "400",
512
- },
513
- head: {
514
- $: "500 var(--dsh-content-font-size-secondary, 13px)/calc(22px + var(--dsh-content-font-delta-secondary, 0px)) var(--dsw-font-family)",
515
- font: {
516
- family: "var(--dsw-font-family)",
517
- size: "var(--dsh-content-font-size-secondary, 13px)",
518
- style: "normal",
519
- weight: "500",
520
- },
521
- line: {
522
- height: "calc(22px + var(--dsh-content-font-delta-secondary, 0px))",
523
- },
524
- },
525
- line: {
526
- height: "calc(22px + var(--dsh-content-font-delta-secondary, 0px))",
527
- },
528
- },
529
- },
530
- s: {
531
- "14": {
532
- $: "14px/22px var(--dsw-font-family)",
533
- font: {
534
- family: "var(--dsw-font-family)",
535
- size: "14px",
536
- style: "normal",
537
- weight: "400",
538
- },
539
- line: {
540
- height: "22px",
541
- },
542
- },
543
- strong: {
544
- "14": {
545
- $: "500 14px/22px var(--dsw-font-family)",
546
- font: {
547
- family: "var(--dsw-font-family)",
548
- size: "14px",
549
- style: "normal",
550
- weight: "500",
551
- },
552
- line: {
553
- height: "22px",
554
- },
555
- },
556
- },
557
- },
558
- xl: {
559
- "24": {
560
- $: "600 24px/32px var(--dsw-font-family)",
561
- font: {
562
- family: "var(--dsw-font-family)",
563
- size: "24px",
564
- style: "normal",
565
- weight: "600",
566
- },
567
- line: {
568
- height: "32px",
569
- },
570
- },
571
- },
572
- xs: {
573
- "13": {
574
- $: "13px/20px var(--dsw-font-family)",
575
- font: {
576
- family: "var(--dsw-font-family)",
577
- size: "13px",
578
- style: "normal",
579
- weight: "400",
580
- },
581
- line: {
582
- height: "20px",
583
- },
584
- },
585
- strong: {
586
- "13": {
587
- $: "500 13px/20px var(--dsw-font-family)",
588
- font: {
589
- family: "var(--dsw-font-family)",
590
- size: "13px",
591
- style: "normal",
592
- weight: "500",
593
- },
594
- line: {
595
- height: "20px",
596
- },
597
- },
598
- },
599
- },
600
- xxs: {
601
- "12": {
602
- $: "12px/18px var(--dsw-font-family)",
603
- font: {
604
- family: "var(--dsw-font-family)",
605
- size: "12px",
606
- style: "normal",
607
- weight: "400",
608
- },
609
- line: {
610
- height: "18px",
611
- },
612
- },
613
- strong: {
614
- "12": {
615
- $: "500 12px/18px var(--dsw-font-family)",
616
- font: {
617
- family: "var(--dsw-font-family)",
618
- size: "12px",
619
- style: "normal",
620
- weight: "500",
621
- },
622
- line: {
623
- height: "18px",
624
- },
625
- },
626
- },
627
- },
628
- xxxs: {
629
- "11": {
630
- $: "11px/14px var(--dsw-font-family)",
631
- font: {
632
- family: "var(--dsw-font-family)",
633
- size: "11px",
634
- style: "normal",
635
- weight: "400",
636
- },
637
- line: {
638
- height: "14px",
639
- },
640
- },
641
- strong: {
642
- "11": {
643
- $: "500 11px/14px var(--dsw-font-family)",
644
- font: {
645
- family: "var(--dsw-font-family)",
646
- size: "11px",
647
- style: "normal",
648
- weight: "500",
649
- },
650
- line: {
651
- height: "14px",
652
- },
653
- },
654
- },
655
- },
656
- },
657
- gradient: {
658
- onboarding: {
659
- blue: {
660
- stops: "#3964fe 18.75%, #398efe 51.78%, #6dccff 86.252%, #3964fe",
661
- },
662
- cyan: {
663
- stops: "#0293b4 21.154%, #2dc8eb 50.954%, #aff0ff 85.326%, #0293b4",
664
- },
665
- violet: {
666
- stops: "#2a2fb6 33.102%, #8b76f6 50.954%, #c5c0ff 85.326%, #2a2fb6",
667
- },
668
- },
669
- },
670
- linear: {
671
- gradient: {
672
- think: "linear-gradient(180deg, #fff 20.19%, rgba(255, 255, 255, 0) 100%)",
673
- },
674
- think: {
675
- select: "linear-gradient(180deg, #f5f6f7 20.19%, rgba(245, 246, 247, 0) 100%)",
676
- },
677
- },
678
- mask: {
679
- blur: "none",
680
- },
681
- menu: {
682
- backdrop: {
683
- filter: "blur(40px) saturate(150%)",
684
- },
685
- surface: {
686
- fill: "rgba(248, 249, 250, 0.58)",
687
- },
688
- },
689
- radius: {
690
- lg: "16px",
691
- md: "12px",
692
- panel: "28px",
693
- sm: "8px",
694
- xl: "20px",
695
- xs: "4px",
696
- },
697
- shadow: {
698
- lv1: {
699
- $: "0 2px 4px 0 rgba(0, 0, 0, 0.05)",
700
- blur: "0 4px 12px 0 rgba(0, 0, 0, 0.02)",
701
- },
702
- lv2: "0 4px 12px 0 rgba(0, 0, 0, 0.02), 0 2px 8px 0 rgba(0, 0, 0, 0.04)",
703
- lv3: "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)",
704
- },
705
- specific: {
706
- bubble: {
707
- $: "var(--dsw-static-deepseek-50)",
708
- highlight: "var(--dsw-static-deepseek-200)",
709
- },
710
- input: {
711
- major: "var(--dsw-static-neutral-bluish-00)",
712
- },
713
- login: {
714
- input: "var(--dsw-static-neutral-bluish-50)",
715
- },
716
- menu: "var(--dsw-menu-surface-fill)",
717
- selector: "var(--dsw-static-neutral-bluish-60)",
718
- sidebar: {
719
- fill: "var(--dsw-static-neutral-bluish-50)",
720
- nav: {
721
- item: {
722
- active: {
723
- $: "var(--dsw-static-neutral-bluish-100)",
724
- accent: "var(--dsw-static-deepseek-100)",
725
- },
726
- hover: "var(--dsw-static-neutral-bluish-75)",
727
- },
728
- },
729
- },
730
- tip: "var(--dsw-static-neutral-bluish-60)",
731
- },
732
- static: {
733
- amber: {
734
- "100": "rgb(254, 245, 231)",
735
- "400": "rgb(247, 173, 49)",
736
- "500": "rgb(245, 158, 11)",
737
- "600": "rgb(221, 134, 41)",
738
- "900": "rgb(39, 36, 31)",
739
- },
740
- blue: {
741
- "50": "rgb(239, 246, 255)",
742
- "75": "rgb(229, 240, 255)",
743
- "100": "rgb(219, 234, 254)",
744
- "300": "rgb(147, 197, 253)",
745
- "400": "rgb(96, 165, 250)",
746
- "450": "rgb(77, 147, 248)",
747
- "500": "rgb(59, 130, 246)",
748
- "600": "rgb(37, 99, 235)",
749
- "800": "rgb(30, 64, 175)",
750
- "900": "rgb(14, 48, 116)",
751
- "950": "rgb(23, 37, 84)",
752
- "50p": "rgb(234, 243, 255)",
753
- },
754
- deepseek: {
755
- "50": "rgb(237, 243, 254)",
756
- "100": "rgb(228, 237, 253)",
757
- "200": "rgb(211, 226, 255)",
758
- "300": "rgb(183, 200, 254)",
759
- "400": "rgb(122, 170, 255)",
760
- "450": "rgb(86, 134, 254)",
761
- "500": "rgb(65, 118, 230)",
762
- "600": "rgb(72, 104, 178)",
763
- "700": {
764
- delete: "rgb(47, 76, 143)",
765
- },
766
- "800": "rgb(52, 65, 91)",
767
- "900": "rgb(40, 49, 66)",
768
- },
769
- green: {
770
- "100": "rgb(230, 250, 237)",
771
- "400": "rgb(78, 209, 126)",
772
- "500": {
773
- $: "rgb(34, 197, 94)",
774
- a08: "rgb(34 197 94 / 8%)",
775
- a12: "rgb(34 197 94 / 12%)",
776
- },
777
- "900": "rgb(35, 60, 44)",
778
- },
779
- neutral: {
780
- "50": "rgb(250, 250, 250)",
781
- "100": "rgb(245, 245, 245)",
782
- "150": "rgb(237, 237, 237)",
783
- "200": "rgb(229, 229, 229)",
784
- "250": "rgb(220, 220, 220)",
785
- "300": "rgb(212, 212, 212)",
786
- "400": "rgb(162, 164, 166)",
787
- "500": "rgb(127, 130, 135)",
788
- "550": "rgb(101, 103, 107)",
789
- "600": "rgb(84, 85, 87)",
790
- "700": "rgb(60, 60, 61)",
791
- "800": "rgb(41, 41, 41)",
792
- "850": "rgb(33, 33, 35)",
793
- "900": "rgb(15, 15, 15)",
794
- "1000": "rgb(0, 0, 0)",
795
- "00": "rgb(255, 255, 255)",
796
- bluish: {
797
- "50": "rgb(249, 250, 251)",
798
- "60": "rgb(245, 246, 247)",
799
- "75": "rgb(241, 243, 245)",
800
- "100": "rgb(235, 238, 242)",
801
- "150": "rgb(233, 236, 242)",
802
- "200": "rgb(225, 229, 238)",
803
- "300": "rgb(207, 211, 214)",
804
- "400": "rgb(173, 178, 184)",
805
- "500": "rgb(151, 157, 166)",
806
- "600": "rgb(129, 133, 140)",
807
- "700": "rgb(97, 102, 107)",
808
- "750": "rgb(67, 69, 74)",
809
- "800": "rgb(53, 54, 56)",
810
- "850": "rgb(44, 44, 46)",
811
- "875": "rgb(35, 35, 36)",
812
- "900": "rgb(27, 27, 28)",
813
- "950": "rgb(21, 21, 23)",
814
- "1000": "rgb(15, 17, 21)",
815
- "00": "rgb(255, 255, 255)",
816
- },
817
- },
818
- red: {
819
- "50": "rgb(254, 242, 242)",
820
- "100": "rgb(254, 226, 226)",
821
- "400": {
822
- $: "rgb(242, 90, 90)",
823
- a12: "rgb(242 90 90 / 12%)",
824
- },
825
- "500": "rgb(239, 68, 68)",
826
- "600": {
827
- $: "rgb(236, 19, 19)",
828
- a08: "rgb(236 19 19 / 8%)",
829
- },
830
- "900": "rgb(87, 12, 12)",
831
- },
832
- },
833
- } as const;