sparkdesign 0.0.1 → 0.1.10

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 (118) hide show
  1. package/README.md +188 -4
  2. package/dist/commands/add.js +93 -0
  3. package/dist/commands/diff.js +54 -0
  4. package/dist/commands/init.js +96 -0
  5. package/dist/commands/list.js +25 -0
  6. package/dist/index.js +37 -0
  7. package/dist/utils/config.js +53 -0
  8. package/dist/utils/registry.js +34 -0
  9. package/dist/utils/tokens.js +176 -0
  10. package/dist/utils/transform.js +19 -0
  11. package/package.json +33 -10
  12. package/registry/__tests__/basic/button.test.tsx +333 -0
  13. package/registry/__tests__/chat/markdown.test.tsx +387 -0
  14. package/registry/__tests__/chat/thinking-indicator.test.tsx +244 -0
  15. package/registry/__tests__/chat/tool-invocation-card.test.tsx +346 -0
  16. package/registry/basic/alert-dialog.tsx +180 -0
  17. package/registry/basic/avatar.tsx +120 -0
  18. package/registry/basic/button.tsx +100 -0
  19. package/registry/basic/collapse.tsx +94 -0
  20. package/registry/basic/collapsible-card.tsx +230 -0
  21. package/registry/basic/collapsible.tsx +21 -0
  22. package/registry/basic/dropdown-menu.tsx +254 -0
  23. package/registry/basic/icon-button.tsx +66 -0
  24. package/registry/basic/icons-inline.tsx +206 -0
  25. package/registry/basic/kbd.tsx +50 -0
  26. package/registry/basic/option-list.tsx +125 -0
  27. package/registry/basic/pagination.tsx +132 -0
  28. package/registry/basic/progress.tsx +42 -0
  29. package/registry/basic/radio-group.tsx +69 -0
  30. package/registry/basic/resizable.tsx +67 -0
  31. package/registry/basic/scrollbar.tsx +114 -0
  32. package/registry/basic/select.tsx +177 -0
  33. package/registry/basic/shimmering-text.tsx +115 -0
  34. package/registry/basic/sidebar-menu.tsx +177 -0
  35. package/registry/basic/skeleton.tsx +33 -0
  36. package/registry/basic/slider.tsx +55 -0
  37. package/registry/basic/sonner.tsx +104 -0
  38. package/registry/basic/spinner.tsx +17 -0
  39. package/registry/basic/switch.tsx +49 -0
  40. package/registry/basic/table.tsx +117 -0
  41. package/registry/basic/tabs.tsx +85 -0
  42. package/registry/basic/tag.tsx +161 -0
  43. package/registry/basic/theme-from-document.ts +10 -0
  44. package/registry/basic/toggle.tsx +223 -0
  45. package/registry/basic/tooltip.tsx +80 -0
  46. package/registry/basic/typography.tsx +201 -0
  47. package/registry/chat/ask-user-part.tsx +70 -0
  48. package/registry/chat/browser-action-part.tsx +166 -0
  49. package/registry/chat/chat-input/chat-input-folder-selector.tsx +185 -0
  50. package/registry/chat/chat-input/chat-input-model-switcher.tsx +131 -0
  51. package/registry/chat/chat-input/chat-input-textarea.tsx +67 -0
  52. package/registry/chat/chat-input/compound.tsx +334 -0
  53. package/registry/chat/chat-input/context.tsx +189 -0
  54. package/registry/chat/chat-input/folder-permission-dialog.tsx +61 -0
  55. package/registry/chat/chat-input/index.tsx +123 -0
  56. package/registry/chat/chat-input/types.ts +77 -0
  57. package/registry/chat/chat-input/useAutoResizeTextarea.ts +20 -0
  58. package/registry/chat/code-block-part.tsx +151 -0
  59. package/registry/chat/file-attachment.tsx +44 -0
  60. package/registry/chat/file-card.tsx +68 -0
  61. package/registry/chat/file-review-part.tsx +259 -0
  62. package/registry/chat/folder-button.tsx +169 -0
  63. package/registry/chat/generated-images-grid.tsx +56 -0
  64. package/registry/chat/generation-status-bar.tsx +72 -0
  65. package/registry/chat/hint-banner.tsx +165 -0
  66. package/registry/chat/image-attachment.tsx +166 -0
  67. package/registry/chat/image-generating.tsx +281 -0
  68. package/registry/chat/markdown.tsx +146 -0
  69. package/registry/chat/mermaid-part.tsx +90 -0
  70. package/registry/chat/permission-card.tsx +178 -0
  71. package/registry/chat/plan-part.tsx +168 -0
  72. package/registry/chat/queue-indicator.tsx +234 -0
  73. package/registry/chat/reasoning-step/compound.tsx +336 -0
  74. package/registry/chat/reasoning-step/context.tsx +114 -0
  75. package/registry/chat/reasoning-step/index.tsx +45 -0
  76. package/registry/chat/reasoning-step/types.ts +109 -0
  77. package/registry/chat/related-prompts.tsx +91 -0
  78. package/registry/chat/response/compound.tsx +210 -0
  79. package/registry/chat/response/context.tsx +200 -0
  80. package/registry/chat/response/index.tsx +87 -0
  81. package/registry/chat/response/types.ts +123 -0
  82. package/registry/chat/send-button.tsx +94 -0
  83. package/registry/chat/streaming-markdown-block.tsx +111 -0
  84. package/registry/chat/task-part.tsx +109 -0
  85. package/registry/chat/terminal-code-block-part.tsx +69 -0
  86. package/registry/chat/thinking-indicator.tsx +91 -0
  87. package/registry/chat/tool-invocation-card.tsx +132 -0
  88. package/registry/chat/user-message.tsx +38 -0
  89. package/registry/chat/user-question/UserQuestionCard.tsx +198 -0
  90. package/registry/chat/user-question/UserQuestionFooter.tsx +66 -0
  91. package/registry/chat/user-question/UserQuestionHeader.tsx +64 -0
  92. package/registry/chat/user-question/compound.tsx +324 -0
  93. package/registry/chat/user-question/context.tsx +456 -0
  94. package/registry/chat/user-question/index.tsx +95 -0
  95. package/registry/chat/user-question/types.ts +61 -0
  96. package/registry/chat/user-question/useUserQuestionKeyboard.ts +126 -0
  97. package/registry/chat/user-question/useUserQuestionState.ts +165 -0
  98. package/registry/chat/user-question-answer.tsx +62 -0
  99. package/registry/lib/file-icon-maps.ts +150 -0
  100. package/registry/lib/use-mermaid-render.ts +76 -0
  101. package/registry/lib/utils.ts +6 -0
  102. package/registry/meta.json +1 -0
  103. package/registry/tokens/index.css +31 -0
  104. package/registry/tokens/scale/computed.css +103 -0
  105. package/registry/tokens/scale/config.css +110 -0
  106. package/registry/tokens/scale/index.css +30 -0
  107. package/registry/tokens/scale/presets/compact.css +30 -0
  108. package/registry/tokens/scale/presets/dense.css +64 -0
  109. package/registry/tokens/scale/presets/sharp.css +40 -0
  110. package/registry/tokens/scale/presets/soft.css +16 -0
  111. package/registry/tokens/scale.css +13 -0
  112. package/registry/tokens/scrollbar-utility.css +35 -0
  113. package/registry/tokens/theme.css +633 -0
  114. package/registry/tokens/themes/dark-parchment.css +132 -0
  115. package/registry/tokens/themes/dark-qoder.css +132 -0
  116. package/registry/tokens/themes/light-parchment.css +123 -0
  117. package/registry/tokens/themes/light-qoder.css +131 -0
  118. package/index.js +0 -5
package/registry/tokens/theme.css ADDED
@@ -0,0 +1,633 @@
1
+ /* ============================================
2
+ 颜色主题系统 (data-theme)
3
+ ============================================
4
+
5
+ 使用方式:
6
+ - <body data-theme="light">
7
+ - <body data-theme="dark">
8
+ - <body data-theme="your-custom-theme">
9
+
10
+ 扩展新主题: 在此文件末尾添加 [data-theme="your-theme"] 规则
11
+ ============================================ */
12
+
13
+ /* ============================================
14
+ Theme: Light (亮色模式)
15
+ ============================================ */
16
+ :root,
17
+ [data-theme="light"] {
18
+ /* --- Primary --- */
19
+ --color-primary: #8EE5A1;
20
+ --color-primary-hover: #73CD94;
21
+ --color-primary-active: #5CB870;
22
+ --color-primary-bg: #F1FAF3;
23
+ --color-primary-bg-hover: #E6F7EC;
24
+ --color-primary-border: #CDEFD9;
25
+ --color-primary-border-hover: #B3E6C7;
26
+ --color-primary-text: #141414;
27
+ --color-primary-text-hover: #73CD94;
28
+ --color-primary-text-active: #5CB870;
29
+ --color-text-on-primary: #FDFDFD;
30
+
31
+ /* --- Text --- */
32
+ --color-text: #141414;
33
+ --color-text-secondary: #636261;
34
+ --color-text-tertiary: #838280;
35
+ --color-text-quaternary: #8E8C8B;
36
+ --color-text-base: #0F0D0C;
37
+
38
+ /* --- Border --- */
39
+ --color-border: #BCBBBA;
40
+ --color-border-secondary: #DDDDDD;
41
+ --color-border-tertiary: #E6E6E6;
42
+
43
+ /* --- Fill --- */
44
+ --color-fill: #DFDFDF;
45
+ --color-fill-secondary: #EFEFEF;
46
+ --color-fill-tertiary: #F9F9F9;
47
+ --color-fill-quaternary: #FCFCFC;
48
+ --color-fill-disable: #DAD9D8;
49
+
50
+ /* --- Background --- */
51
+ --color-bg-container: #FFFFFF;
52
+ --color-bg-elevated: #F9F9F9;
53
+ --color-bg-layout: #FDFDFD;
54
+ --color-bg-spotlight: #FAFAFA;
55
+ --color-bg-mask: rgba(0, 0, 0, 0.5);
56
+ /* PlanPart 点阵高亮遮罩渐变（随主题） */
57
+ --color-mask-shimmer-weak: rgba(0, 0, 0, 0.3);
58
+ --color-mask-shimmer-strong: rgba(0, 0, 0, 0.8);
59
+ --color-mask-shimmer-full: rgba(0, 0, 0, 1);
60
+ --color-bg-base: #FFFFFF;
61
+ --color-bg-highlight: #080807;
62
+ --color-bg-highlight-hover: #1a1a1a;
63
+
64
+ /* --- Semantic Colors --- */
65
+ --color-link: #5CB870;
66
+ --color-error: #FF4D4F;
67
+ --color-error-hover: #FF7875;
68
+ --color-error-bg: #FFF2F0;
69
+ --color-error-bg-hover: #FFE4E0;
70
+ --color-error-border: #FFCCC7;
71
+ --color-info: #0B83F1;
72
+ --color-info-hover: #5EBCFF;
73
+ --color-info-bg: #E6F7FF;
74
+ --color-info-bg-hover: #D0EFFF;
75
+ --color-info-border: #B0E3FF;
76
+ --color-success: #73CD94;
77
+ --color-success-hover: #8EE5A1;
78
+ --color-success-bg: #F1FAF3;
79
+ --color-success-bg-hover: #E6F7EC;
80
+ --color-success-border: #CDEFD9;
81
+ --color-warning: #FAAD14;
82
+ --color-warning-hover: #FFD666;
83
+ --color-warning-bg: #FFFBE6;
84
+ --color-warning-bg-hover: #FFF3CF;
85
+ --color-warning-border: #FFE5BF;
86
+
87
+ /* --- Accent Colors --- */
88
+ --color-pink: #EC4899;
89
+ --color-pink-bg: #F9E3F3;
90
+ --color-pink-bg-hover: #F5D4EB;
91
+ --color-purple: #615CED;
92
+ --color-purple-bg: #EBE9FF;
93
+ --color-purple-bg-hover: #DDDAFF;
94
+ --color-yellow: #FAC414;
95
+ --color-yellow-bg: #FFF3CF;
96
+ --color-yellow-bg-hover: #FFE9A8;
97
+ --color-orange: #FA8125;
98
+ --color-orange-bg: #FFEFDE;
99
+ --color-orange-bg-hover: #FFE3C7;
100
+ --color-teal: #14B8A6;
101
+ --color-teal-bg: #DEF7F1;
102
+ --color-teal-bg-hover: #CAF0E8;
103
+ --color-blue: #0090FF;
104
+ --color-blue-bg: #DEEDFF;
105
+ --color-blue-bg-hover: #C8E3FF;
106
+ --color-mauve: #8E8C99;
107
+ --color-mauve-bg: #F1F2F3;
108
+ --color-mauve-bg-hover: #E4E5E7;
109
+ --color-slate: #404040;
110
+ --color-slate-bg: #FAFAFA;
111
+ --color-slate-bg-hover: #EFEFEF;
112
+ --color-lavender: #B99DFF;
113
+ --color-lavender-bg: #ECE4FF;
114
+ --color-lavender-bg-hover: #E0D4FF;
115
+ --color-sage: #6BB394;
116
+ --color-sage-bg: #EFF3F2;
117
+ --color-sage-bg-hover: #E2EAE8;
118
+
119
+ /* --- Select 等组件 (input/ring/popover 等) --- */
120
+ --color-input: var(--color-border-tertiary);
121
+ --color-ring: var(--color-primary-border);
122
+ --color-popover: var(--color-bg-container);
123
+ --color-popover-foreground: var(--color-text);
124
+ --color-accent: var(--color-fill-secondary);
125
+ --color-accent-foreground: var(--color-text);
126
+ --color-muted: var(--color-fill-tertiary);
127
+ --color-muted-foreground: var(--color-text-secondary);
128
+ --color-background: var(--color-bg-base);
129
+
130
+ /* --- Diff --- */
131
+ --color-diff-insert: #A6DCBA;
132
+ --color-diff-insert-bg: #D9EBE0;
133
+ --color-diff-remove: #FC6B83;
134
+ --color-diff-remove-bg: #E3D1D5;
135
+ }
136
+
137
+ /* ============================================
138
+ Theme: Dark (暗色模式)
139
+ ============================================ */
140
+ [data-theme="dark"] {
141
+ /* --- Primary --- */
142
+ --color-primary: #8EE5A1;
143
+ --color-primary-hover: #9BE6B3;
144
+ --color-primary-active: #73CD94;
145
+ --color-primary-bg: #14261C;
146
+ --color-primary-bg-hover: #1A2E21;
147
+ --color-primary-border: #335942;
148
+ --color-primary-border-hover: #407354;
149
+ --color-primary-text: #8EE5A1;
150
+ --color-primary-text-hover: #9BE6B3;
151
+ --color-primary-text-active: #73CD94;
152
+ --color-text-on-primary: #0D0D0D;
153
+
154
+ /* --- Text --- */
155
+ --color-text: #FAF9F5;
156
+ --color-text-secondary: #9C9D9E;
157
+ --color-text-tertiary: #7C7D7F;
158
+ --color-text-quaternary: #717374;
159
+ --color-text-base: #F0F2F3;
160
+
161
+ /* --- Border --- */
162
+ --color-border: #404040;
163
+ --color-border-secondary: #2A2A2A;
164
+ --color-border-tertiary: #262626;
165
+
166
+ /* --- Fill --- */
167
+ --color-fill: #454545;
168
+ --color-fill-secondary: #363636;
169
+ --color-fill-tertiary: #1A1A1A;
170
+ --color-fill-quaternary: #1A1A1A;
171
+ --color-fill-disable: #525252;
172
+
173
+ /* --- Background --- */
174
+ --color-bg-container: #0D0D0D;
175
+ --color-bg-elevated: #080808;
176
+ --color-bg-layout: #050505;
177
+ --color-bg-spotlight: #080808;
178
+ --color-bg-mask: rgba(0, 0, 0, 0.7);
179
+ /* PlanPart 点阵高亮遮罩渐变（随主题） */
180
+ --color-mask-shimmer-weak: rgba(0, 0, 0, 0.3);
181
+ --color-mask-shimmer-strong: rgba(0, 0, 0, 0.8);
182
+ --color-mask-shimmer-full: rgba(0, 0, 0, 1);
183
+ --color-bg-base: #000000;
184
+ --color-bg-highlight: #d0d0d0;
185
+ --color-bg-highlight-hover: #e0e0e0;
186
+
187
+ /* --- Semantic Colors --- */
188
+ --color-link: #8EE5A1;
189
+ --color-error: #FF4D4F;
190
+ --color-error-hover: #FF7875;
191
+ --color-error-bg: #4A1A1B;
192
+ --color-error-bg-hover: #5C2224;
193
+ --color-error-border: #663338;
194
+ --color-info: #0B83F1;
195
+ --color-info-hover: #5EBCFF;
196
+ --color-info-bg: #19080E;
197
+ --color-info-bg-hover: #220A12;
198
+ --color-info-border: #4F1C0E;
199
+ --color-success: #73CD94;
200
+ --color-success-hover: #8EE5A1;
201
+ --color-success-bg: #14261C;
202
+ --color-success-bg-hover: #1A2E21;
203
+ --color-success-border: #335942;
204
+ --color-warning: #FAAD14;
205
+ --color-warning-hover: #FFD666;
206
+ --color-warning-bg: #4A4019;
207
+ --color-warning-bg-hover: #5C4E1F;
208
+ --color-warning-border: #664D19;
209
+
210
+ /* --- Accent Colors --- */
211
+ --color-pink: #EC4899;
212
+ --color-pink-bg: #4A1C31;
213
+ --color-pink-bg-hover: #5C2440;
214
+ --color-purple: #615CED;
215
+ --color-purple-bg: #14160E;
216
+ --color-purple-bg-hover: #1C1E14;
217
+ --color-yellow: #FAC414;
218
+ --color-yellow-bg: #4A4030;
219
+ --color-yellow-bg-hover: #5C5040;
220
+ --color-orange: #FA8125;
221
+ --color-orange-bg: #4A1021;
222
+ --color-orange-bg-hover: #5C1429;
223
+ --color-teal: #14B8A6;
224
+ --color-teal-bg: #21080E;
225
+ --color-teal-bg-hover: #2E0E14;
226
+ --color-blue: #0090FF;
227
+ --color-blue-bg: #21120E;
228
+ --color-blue-bg-hover: #2E1A14;
229
+ --color-mauve: #8E8C99;
230
+ --color-mauve-bg: #0E0D0C;
231
+ --color-mauve-bg-hover: #1A1818;
232
+ --color-slate: #363636;
233
+ --color-slate-bg: #1a1a1a;
234
+ --color-slate-bg-hover: #262626;
235
+ --color-lavender: #B99DFF;
236
+ --color-lavender-bg: #131B0E;
237
+ --color-lavender-bg-hover: #1C2614;
238
+ --color-sage: #6BB394;
239
+ --color-sage-bg: #100C0D;
240
+ --color-sage-bg-hover: #1A1418;
241
+
242
+ /* --- Select 等组件 (input/ring/popover 等) --- */
243
+ --color-input: var(--color-border-tertiary);
244
+ --color-ring: var(--color-primary-border);
245
+ --color-popover: var(--color-bg-container);
246
+ --color-popover-foreground: var(--color-text);
247
+ --color-accent: var(--color-fill-secondary);
248
+ --color-accent-foreground: var(--color-text);
249
+ --color-muted: var(--color-fill-tertiary);
250
+ --color-muted-foreground: var(--color-text-secondary);
251
+ --color-background: var(--color-bg-base);
252
+
253
+ /* --- Diff --- */
254
+ --color-diff-insert: #73CD94;
255
+ --color-diff-insert-bg: #14261C;
256
+ --color-diff-remove: #FC6B83;
257
+ --color-diff-remove-bg: #1C2E2A;
258
+ }
259
+
260
+ /* SendButton: dark 下 normal 状态使用 success 色（与 light 下 bg-bg-highlight 区分） */
261
+ [data-theme="dark"] .SendButton-send,
262
+ [data-theme="classic-dark"] .SendButton-send {
263
+ background-color: var(--color-success);
264
+ }
265
+ [data-theme="dark"] .SendButton-send:hover:not(:disabled),
266
+ [data-theme="classic-dark"] .SendButton-send:hover:not(:disabled) {
267
+ background-color: var(--color-success-hover);
268
+ }
269
+
270
+ /* ============================================
271
+ Theme: Light Parchment (羊皮纸亮色 - Figma 导入)
272
+ ============================================ */
273
+ [data-theme="light-parchment"] {
274
+ /* --- Primary --- */
275
+ --color-primary: #202116;
276
+ --color-primary-hover: #3D3930;
277
+ --color-primary-active: #3D3930;
278
+ --color-primary-bg: #F0EDE7;
279
+ --color-primary-bg-hover: #E8E4DC;
280
+ --color-primary-border: #D4CFC6;
281
+ --color-primary-border-hover: #C4BEB4;
282
+ --color-primary-text: #202116;
283
+ --color-primary-text-hover: #3D3930;
284
+ --color-primary-text-active: #3D3930;
285
+ --color-text-on-primary: #FAF9F6;
286
+
287
+ /* --- Text --- */
288
+ --color-text: #202116;
289
+ --color-text-secondary: #4A463C;
290
+ --color-text-tertiary: #6B665C;
291
+ --color-text-quaternary: #8A857A;
292
+ --color-text-base: #202116;
293
+
294
+ /* --- Border --- */
295
+ --color-border: #D4CFC6;
296
+ --color-border-secondary: #E5E1D9;
297
+ --color-border-tertiary: #EDE9E2;
298
+
299
+ /* --- Fill --- */
300
+ --color-fill: #F5F0E7;
301
+ --color-fill-secondary: #EDE8E0;
302
+ --color-fill-tertiary: #F7F4EF;
303
+ --color-fill-quaternary: #FAF9F6;
304
+ --color-fill-disable: #E0DCD4;
305
+
306
+ /* --- Background --- */
307
+ --color-bg-container: #FAF9F6;
308
+ --color-bg-elevated: #F7F4EF;
309
+ --color-bg-layout: #FDFCFA;
310
+ --color-bg-spotlight: #FAF9F6;
311
+ --color-bg-mask: rgba(0, 0, 0, 0.5);
312
+ /* PlanPart 点阵高亮遮罩渐变（随主题） */
313
+ --color-mask-shimmer-weak: rgba(0, 0, 0, 0.3);
314
+ --color-mask-shimmer-strong: rgba(0, 0, 0, 0.8);
315
+ --color-mask-shimmer-full: rgba(0, 0, 0, 1);
316
+ --color-bg-base: #FFFFFF;
317
+ --color-bg-highlight: #202116;
318
+ --color-bg-highlight-hover: #2D2A22;
319
+
320
+ /* --- Semantic Colors --- */
321
+ --color-link: #5B4A3A;
322
+ --color-error: #FF4D4F;
323
+ --color-error-hover: #FF7875;
324
+ --color-error-bg: #FFF2F0;
325
+ --color-error-bg-hover: #FFF1F0;
326
+ --color-error-border: #FFCCC7;
327
+ --color-info: #0B83F1;
328
+ --color-info-hover: #5EBCFF;
329
+ --color-info-bg: #E6F7FF;
330
+ --color-info-bg-hover: #D0EFFF;
331
+ --color-info-border: #B0E3FF;
332
+ --color-success: #5A7A5E;
333
+ --color-success-hover: #6B8F71;
334
+ --color-success-bg: #EEF2ED;
335
+ --color-success-bg-hover: #E4EBE2;
336
+ --color-success-border: #C5D4C4;
337
+ --color-warning: #FAAD14;
338
+ --color-warning-hover: #FFD666;
339
+ --color-warning-bg: #FFFBE6;
340
+ --color-warning-bg-hover: #FFF3CF;
341
+ --color-warning-border: #FFE5BF;
342
+
343
+ /* --- Accent Colors --- */
344
+ --color-pink: #EC4899;
345
+ --color-pink-bg: #F9E3F3;
346
+ --color-pink-bg-hover: #F5D4EB;
347
+ --color-purple: #615CED;
348
+ --color-purple-bg: #EBE9FF;
349
+ --color-purple-bg-hover: #DDDAFF;
350
+ --color-yellow: #FAC414;
351
+ --color-yellow-bg: #FFF3CF;
352
+ --color-yellow-bg-hover: #FFE9A8;
353
+ --color-orange: #FA8125;
354
+ --color-orange-bg: #FFEFDE;
355
+ --color-orange-bg-hover: #FFE3C7;
356
+ --color-teal: #14B8A6;
357
+ --color-teal-bg: #DEF7F1;
358
+ --color-teal-bg-hover: #CAF0E8;
359
+ --color-blue: #0090FF;
360
+ --color-blue-bg: #DEEDFF;
361
+ --color-blue-bg-hover: #C8E3FF;
362
+ --color-mauve: #8E8C99;
363
+ --color-mauve-bg: #F1F2F3;
364
+ --color-mauve-bg-hover: #E4E5E7;
365
+ --color-slate: #1E293B;
366
+ --color-slate-bg: #E2E8F0;
367
+ --color-slate-bg-hover: #EFEFEF;
368
+ --color-lavender: #B99DFF;
369
+ --color-lavender-bg: #ECE4FF;
370
+ --color-lavender-bg-hover: #E0D4FF;
371
+ --color-sage: #6BB394;
372
+ --color-sage-bg: #EFF3F2;
373
+ --color-sage-bg-hover: #E2EAE8;
374
+
375
+ /* --- Select 等组件 (input/ring/popover 等) --- */
376
+ --color-input: var(--color-border-tertiary);
377
+ --color-ring: var(--color-primary-border);
378
+ --color-popover: var(--color-bg-container);
379
+ --color-popover-foreground: var(--color-text);
380
+ --color-accent: var(--color-fill-secondary);
381
+ --color-accent-foreground: var(--color-text);
382
+ --color-muted: var(--color-fill-tertiary);
383
+ --color-muted-foreground: var(--color-text-secondary);
384
+ --color-background: var(--color-bg-base);
385
+
386
+ /* --- Diff --- */
387
+ --color-diff-insert: #A6DCBA;
388
+ --color-diff-insert-bg: #D9EBE0;
389
+ --color-diff-remove: #FC6B83;
390
+ --color-diff-remove-bg: #E3D1D5;
391
+ }
392
+
393
+ /* ============================================
394
+ 扩展主题模板
395
+ ============================================
396
+
397
+ 复制以下模板创建新主题:
398
+
399
+ [data-theme="your-theme-name"] {
400
+ --color-primary: #...;
401
+ --color-primary-hover: #...;
402
+ ... (覆盖需要的变量)
403
+ }
404
+
405
+ ============================================ */
406
+
407
+ /* ============================================
408
+ Tailwind v4 @theme 映射
409
+ ============================================ */
410
+ @custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *, [data-theme="dark-parchment"], [data-theme="dark-parchment"] *));
411
+
412
+ @theme {
413
+ /* Font */
414
+ --font-display: 'Inter var', system-ui, sans-serif;
415
+ /* Scale 映射：font-size 随 data-style 变化 */
416
+ --text-xs: var(--font-size-xs);
417
+ --text-xs--line-height: var(--font-size-xs--line-height);
418
+ --text-sm: var(--font-size-sm);
419
+ --text-sm--line-height: var(--font-size-sm--line-height);
420
+ --text-base: var(--font-size-base);
421
+ --text-base--line-height: var(--font-size-base--line-height);
422
+ --text-lg: var(--font-size-lg);
423
+ --text-lg--line-height: var(--font-size-lg--line-height);
424
+ --text-xl: var(--font-size-xl);
425
+ --text-xl--line-height: var(--font-size-xl--line-height);
426
+ --text-2xl: var(--font-size-2xl);
427
+ --text-2xl--line-height: var(--font-size-2xl--line-height);
428
+ --text-3xl: var(--font-size-3xl);
429
+ --text-3xl--line-height: var(--font-size-3xl--line-height);
430
+ --text-4xl: var(--font-size-4xl);
431
+ --text-4xl--line-height: var(--font-size-4xl--line-height);
432
+ --text-5xl: var(--font-size-5xl);
433
+ --text-5xl--line-height: var(--font-size-5xl--line-height);
434
+ --text-6xl: var(--font-size-6xl);
435
+ --text-6xl--line-height: var(--font-size-6xl--line-height);
436
+ /* Radius：随 data-style 变化，由 scale.css 提供 */
437
+ --radius: var(--radius-DEFAULT);
438
+ --radius-none: var(--radius-none);
439
+ --radius-sm: var(--radius-sm);
440
+ --radius-md: var(--radius-md);
441
+ --radius-lg: var(--radius-lg);
442
+ --radius-xl: var(--radius-xl);
443
+ --radius-2xl: var(--radius-2xl);
444
+ --radius-3xl: var(--radius-3xl);
445
+ --radius-full: var(--radius-full);
446
+ /* Spacing：随 data-style 变化，h-7/h-9/h-11 等由 scale.css 提供 */
447
+ --spacing-0: var(--spacing-0);
448
+ --spacing-px: var(--spacing-px);
449
+ --spacing-0\.5: var(--spacing-0\.5);
450
+ --spacing-1: var(--spacing-1);
451
+ --spacing-1\.5: var(--spacing-1\.5);
452
+ --spacing-2: var(--spacing-2);
453
+ --spacing-2\.5: var(--spacing-2\.5);
454
+ --spacing-3: var(--spacing-3);
455
+ --spacing-3\.5: var(--spacing-3\.5);
456
+ --spacing-4: var(--spacing-4);
457
+ --spacing-5: var(--spacing-5);
458
+ --spacing-6: var(--spacing-6);
459
+ --spacing-7: var(--spacing-7);
460
+ --spacing-8: var(--spacing-8);
461
+ --spacing-9: var(--spacing-9);
462
+ --spacing-10: var(--spacing-10);
463
+ --spacing-11: var(--spacing-11);
464
+ --spacing-12: var(--spacing-12);
465
+ --spacing-14: var(--spacing-14);
466
+ --spacing-16: var(--spacing-16);
467
+ --spacing-20: var(--spacing-20);
468
+ --spacing-24: var(--spacing-24);
469
+ --spacing-28: var(--spacing-28);
470
+ --spacing-32: var(--spacing-32);
471
+ --spacing-36: var(--spacing-36);
472
+ --spacing-40: var(--spacing-40);
473
+ --spacing-44: var(--spacing-44);
474
+ --spacing-48: var(--spacing-48);
475
+ --spacing-52: var(--spacing-52);
476
+ --spacing-56: var(--spacing-56);
477
+ --spacing-60: var(--spacing-60);
478
+ --spacing-64: var(--spacing-64);
479
+ --spacing-72: var(--spacing-72);
480
+ --spacing-80: var(--spacing-80);
481
+ --spacing-96: var(--spacing-96);
482
+ /* Primary */
483
+ --color-primary: var(--color-primary);
484
+ --color-primary-hover: var(--color-primary-hover);
485
+ --color-primary-active: var(--color-primary-active);
486
+ --color-primary-bg: var(--color-primary-bg);
487
+ --color-primary-bg-hover: var(--color-primary-bg-hover);
488
+ --color-primary-border: var(--color-primary-border);
489
+ --color-primary-border-hover: var(--color-primary-border-hover);
490
+ --color-primary-text: var(--color-primary-text);
491
+ --color-primary-text-hover: var(--color-primary-text-hover);
492
+ --color-primary-text-active: var(--color-primary-text-active);
493
+ --color-text-on-primary: var(--color-text-on-primary);
494
+
495
+ /* Text */
496
+ --color-text: var(--color-text);
497
+ --color-text-secondary: var(--color-text-secondary);
498
+ --color-text-tertiary: var(--color-text-tertiary);
499
+ --color-text-quaternary: var(--color-text-quaternary);
500
+ --color-text-base: var(--color-text-base);
501
+
502
+ /* Border */
503
+ --color-border: var(--color-border);
504
+ /* Select 等 - 映射到现有 token */
505
+ --color-input: var(--color-border-tertiary);
506
+ --color-ring: var(--color-primary-border);
507
+ --color-popover: var(--color-bg-container);
508
+ --color-popover-foreground: var(--color-text);
509
+ --color-accent: var(--color-fill-secondary);
510
+ --color-accent-foreground: var(--color-text);
511
+ --color-muted: var(--color-fill-tertiary);
512
+ --color-muted-foreground: var(--color-text-secondary);
513
+ --color-background: var(--color-bg-base);
514
+ --color-border-secondary: var(--color-border-secondary);
515
+ --color-border-tertiary: var(--color-border-tertiary);
516
+
517
+ /* Fill */
518
+ --color-fill: var(--color-fill);
519
+ --color-fill-secondary: var(--color-fill-secondary);
520
+ --color-fill-tertiary: var(--color-fill-tertiary);
521
+ --color-fill-quaternary: var(--color-fill-quaternary);
522
+ --color-fill-disable: var(--color-fill-disable);
523
+
524
+ /* Background */
525
+ --color-bg-container: var(--color-bg-container);
526
+ --color-bg-elevated: var(--color-bg-elevated);
527
+ --color-bg-layout: var(--color-bg-layout);
528
+ --color-bg-spotlight: var(--color-bg-spotlight);
529
+ --color-bg-mask: var(--color-bg-mask);
530
+ --color-bg-base: var(--color-bg-base);
531
+ --color-bg-highlight: var(--color-bg-highlight);
532
+ --color-bg-highlight-hover: var(--color-bg-highlight-hover);
533
+
534
+ /* Semantic */
535
+ --color-link: var(--color-link);
536
+ --color-error: var(--color-error);
537
+ --color-error-hover: var(--color-error-hover);
538
+ --color-error-bg: var(--color-error-bg);
539
+ --color-error-bg-hover: var(--color-error-bg-hover);
540
+ --color-error-border: var(--color-error-border);
541
+ --color-info: var(--color-info);
542
+ --color-info-hover: var(--color-info-hover);
543
+ --color-info-bg: var(--color-info-bg);
544
+ --color-info-bg-hover: var(--color-info-bg-hover);
545
+ --color-info-border: var(--color-info-border);
546
+ --color-success: var(--color-success);
547
+ --color-success-hover: var(--color-success-hover);
548
+ --color-success-bg: var(--color-success-bg);
549
+ --color-success-bg-hover: var(--color-success-bg-hover);
550
+ --color-success-border: var(--color-success-border);
551
+ --color-warning: var(--color-warning);
552
+ --color-warning-hover: var(--color-warning-hover);
553
+ --color-warning-bg: var(--color-warning-bg);
554
+ --color-warning-bg-hover: var(--color-warning-bg-hover);
555
+ --color-warning-border: var(--color-warning-border);
556
+
557
+ /* Accent */
558
+ --color-pink: var(--color-pink);
559
+ --color-pink-bg: var(--color-pink-bg);
560
+ --color-pink-bg-hover: var(--color-pink-bg-hover);
561
+ --color-purple: var(--color-purple);
562
+ --color-purple-bg: var(--color-purple-bg);
563
+ --color-purple-bg-hover: var(--color-purple-bg-hover);
564
+ --color-yellow: var(--color-yellow);
565
+ --color-yellow-bg: var(--color-yellow-bg);
566
+ --color-yellow-bg-hover: var(--color-yellow-bg-hover);
567
+ --color-orange: var(--color-orange);
568
+ --color-orange-bg: var(--color-orange-bg);
569
+ --color-orange-bg-hover: var(--color-orange-bg-hover);
570
+ --color-teal: var(--color-teal);
571
+ --color-teal-bg: var(--color-teal-bg);
572
+ --color-teal-bg-hover: var(--color-teal-bg-hover);
573
+ --color-blue: var(--color-blue);
574
+ --color-blue-bg: var(--color-blue-bg);
575
+ --color-blue-bg-hover: var(--color-blue-bg-hover);
576
+ --color-mauve: var(--color-mauve);
577
+ --color-mauve-bg: var(--color-mauve-bg);
578
+ --color-mauve-bg-hover: var(--color-mauve-bg-hover);
579
+ --color-slate: var(--color-slate);
580
+ --color-slate-bg: var(--color-slate-bg);
581
+ --color-slate-bg-hover: var(--color-slate-bg-hover);
582
+ --color-lavender: var(--color-lavender);
583
+ --color-lavender-bg: var(--color-lavender-bg);
584
+ --color-lavender-bg-hover: var(--color-lavender-bg-hover);
585
+ --color-sage: var(--color-sage);
586
+ --color-sage-bg: var(--color-sage-bg);
587
+ --color-sage-bg-hover: var(--color-sage-bg-hover);
588
+
589
+ /* Diff */
590
+ --color-diff-insert: var(--color-diff-insert);
591
+ --color-diff-insert-bg: var(--color-diff-insert-bg);
592
+ --color-diff-remove: var(--color-diff-remove);
593
+ --color-diff-remove-bg: var(--color-diff-remove-bg);
594
+
595
+ /* Accordion 展开/收起动画（Radix 提供 --radix-accordion-content-height） */
596
+ --animate-accordion-down: accordion-down 0.2s ease-out;
597
+ --animate-accordion-up: accordion-up 0.2s ease-out;
598
+ --animate-accordion-right: accordion-right 0.2s ease-out;
599
+ --animate-accordion-left: accordion-left 0.2s ease-out;
600
+ }
601
+
602
+ @keyframes accordion-down {
603
+ from {
604
+ height: 0;
605
+ }
606
+ to {
607
+ height: var(--radix-accordion-content-height);
608
+ }
609
+ }
610
+ @keyframes accordion-up {
611
+ from {
612
+ height: var(--radix-accordion-content-height);
613
+ }
614
+ to {
615
+ height: 0;
616
+ }
617
+ }
618
+ @keyframes accordion-right {
619
+ from {
620
+ width: 0;
621
+ }
622
+ to {
623
+ width: var(--radix-accordion-content-width);
624
+ }
625
+ }
626
+ @keyframes accordion-left {
627
+ from {
628
+ width: var(--radix-accordion-content-width);
629
+ }
630
+ to {
631
+ width: 0;
632
+ }
633
+ }