@agentscope-ai/design 1.0.16 → 1.0.18

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 (63) hide show
  1. package/lib/antd/styles/button.style.js +13 -1
  2. package/lib/antd/styles/index.style.js +3 -1
  3. package/lib/antd/styles/tree.style.d.ts +6 -0
  4. package/lib/antd/styles/tree.style.js +18 -0
  5. package/lib/antd/themes/bailianDarkTheme.json +3 -1
  6. package/lib/antd/themes/bailianTheme.json +4 -2
  7. package/lib/antd/themes/carbonDarkTheme.json +3 -1
  8. package/lib/antd/themes/carbonTheme.json +3 -1
  9. package/lib/antd/themes/generateTheme.js +30 -29
  10. package/lib/components/commonComponents/Audio/Control.d.ts +53 -0
  11. package/lib/components/commonComponents/{Video → Audio}/Control.js +18 -15
  12. package/lib/components/commonComponents/Audio/Control.style.d.ts +1 -0
  13. package/lib/components/commonComponents/Audio/Control.style.js +14 -0
  14. package/lib/components/commonComponents/Audio/demo/demo1.d.ts +2 -0
  15. package/lib/components/commonComponents/Audio/demo/demo1.js +11 -0
  16. package/lib/components/commonComponents/Audio/index.d.ts +10 -0
  17. package/lib/components/commonComponents/Audio/index.js +164 -0
  18. package/lib/components/commonComponents/Audio/index.style.d.ts +1 -0
  19. package/lib/components/commonComponents/Audio/index.style.js +10 -0
  20. package/lib/components/commonComponents/Button/demo/demo1.js +7 -0
  21. package/lib/components/commonComponents/Button/index.js +2 -1
  22. package/lib/components/commonComponents/CollapsePanel/demo/demo1.js +6 -6
  23. package/lib/components/commonComponents/CollapsePanel/index.js +4 -4
  24. package/lib/components/commonComponents/EllipsisTip/index.d.ts +8 -1
  25. package/lib/components/commonComponents/EllipsisTip/index.js +33 -3
  26. package/lib/components/commonComponents/Empty/index.d.ts +6 -0
  27. package/lib/components/commonComponents/Empty/index.js +22 -7
  28. package/lib/components/commonComponents/Empty/index.style.js +1 -1
  29. package/lib/components/commonComponents/Pagination/index.js +33 -42
  30. package/lib/components/commonComponents/Pagination/index.style.js +1 -1
  31. package/lib/components/commonComponents/PromptsEditor/VarRender.js +1 -1
  32. package/lib/components/commonComponents/SliderSelector/index.d.ts +1 -1
  33. package/lib/components/commonComponents/SliderSelector/index.js +8 -4
  34. package/lib/components/commonComponents/Steps/index.js +2 -1
  35. package/lib/components/commonComponents/Steps/index.style.js +5 -1
  36. package/lib/components/commonComponents/Table/index.style.js +27 -1
  37. package/lib/components/commonComponents/Tabs/index.js +9 -8
  38. package/lib/components/commonComponents/Tooltip/demo/demo3.d.ts +3 -0
  39. package/lib/components/commonComponents/Tooltip/demo/demo3.js +25 -0
  40. package/lib/components/commonComponents/Tooltip/index.d.ts +7 -1
  41. package/lib/components/commonComponents/Tooltip/index.js +12 -1
  42. package/lib/components/commonComponents/Tooltip/index.style.js +1 -1
  43. package/lib/components/commonComponents/Video/index.d.ts +5 -6
  44. package/lib/components/commonComponents/Video/index.js +14 -9
  45. package/lib/components/commonComponents/Video/index.style.js +2 -4
  46. package/lib/components/mobileComponents/MobileDrawer/index.style.js +7 -1
  47. package/lib/index.d.ts +2 -1
  48. package/lib/index.js +1 -0
  49. package/lib/typings.d.ts +12 -0
  50. package/llms/all.llms.txt +889 -1772
  51. package/llms/components/commonComponents/Empty/index.zh-CN.llms.txt +1 -0
  52. package/llms/components/commonComponents/Tooltip/index.zh-CN.llms.txt +2 -1
  53. package/llms/index.llms.txt +47 -47
  54. package/package.json +4 -4
  55. package/scripts/mcp-docs-server.js +4 -4
  56. package/lib/components/commonComponents/Video/Control.d.ts +0 -19
  57. package/llms/docs/guide/fromAntd.zh-CN.llms.txt +0 -156
  58. package/llms/docs/guide/fromScratch.zh-CN.llms.txt +0 -83
  59. package/llms/docs/guide/iconfont.zh-CN.llms.txt +0 -69
  60. package/llms/docs/guide/overview.zh-CN.llms.txt +0 -51
  61. package/llms/docs/guide/theme.zh-CN.llms.txt +0 -61
  62. package/llms/docs/guide/tokens&variables.zh-CN.llms.txt +0 -425
  63. package/llms/docs/guide/vibe-coding.zh-CN.llms.txt +0 -29
@@ -1,425 +0,0 @@
1
-
2
-
3
- # Tokens
4
-
5
- 除了来自 [antd](https://ant.design/theme-editor) 的固有 tokens 之外,Spark Design 在原有基础上扩展了更多变量。完整的 token 示例如下所示:
6
-
7
- <div><span style="display: inline-block; width: 12px; height: 12px; background-color: #615CED;"></span> purpleTheme</div>
8
-
9
- ```json
10
- {
11
- "borderRadiusXS": 2,
12
- "borderRadiusSM": 4,
13
- "borderRadius": 6,
14
- "borderRadiusLG": 8,
15
- "borderRadiusXL": 12,
16
- "borderRadiusFull": 999,
17
- "wireframe": false,
18
- "colorPrimaryBg": "#F2F0FF",
19
- "colorPrimaryBgHover": "#F2F0FF",
20
- "colorPrimaryBorder": "#E2DEFF",
21
- "colorPrimaryBorderHover": "#BCB5FF",
22
- "colorPrimaryHover": "#9189FA",
23
- "colorPrimary": "#615CED",
24
- "colorPrimaryActive": "#4444C7",
25
- "colorPrimaryTextHover": "#9189FA",
26
- "colorPrimaryText": "#615CED",
27
- "colorPrimaryTextActive": "#4444C7",
28
- "colorTextBase": "#26244c",
29
- "colorBgBase": "#FFFFFF",
30
- "colorText": "rgba(38, 36, 76, 0.88)",
31
- "colorTextSecondary": "rgba(38, 36, 76, 0.65)",
32
- "colorTextTertiary": "rgba(38, 36, 76, 0.45)",
33
- "colorTextQuaternary": "rgba(38, 36, 76, 0.25)",
34
- "colorBorder": "#cdd0dc",
35
- "colorBorderSecondary": "#e6e8ee",
36
- "colorFill": "#cdd0dc5c",
37
- "colorFillSecondary": "#cdd0dc33",
38
- "colorFillTertiary": "#cdd0dc26",
39
- "colorFillQuaternary": "#cdd0dc1a",
40
- "colorBgContainer": "#FFFFFF",
41
- "colorBgElevated": "#FFFFFF",
42
- "colorBgLayout": "#f9fafd",
43
- "colorBgSpotlight": "rgba(38, 36, 76, 0.85)",
44
- "colorBgMask": "rgba(20, 19, 39, 0.45)",
45
- "colorInfo": "#0B83F1",
46
- "colorInfoHover": "#5EBCFF",
47
- "colorInfoBorder": "#87D1FF",
48
- "colorInfoText": "#0B83F1",
49
- "colorInfoBg": "#E6F7FF",
50
- "colorInfoBgHover": "#B0E3FF",
51
- "colorInfoBorderHover": "#5EBCFF",
52
- "colorSuccess": "#5BB98B",
53
- "colorSuccessHover": "#ABD4BE",
54
- "colorSuccessBg": "#EBFAF0",
55
- "colorSuccessBgHover": "#DFEDE4",
56
- "colorSuccessBorder": "#D3E0D9",
57
- "colorSuccessBorderHover": "#ABD4BE",
58
- "colorWarning": "#FAAD14",
59
- "colorWarningHover": "#FFD666",
60
- "colorWarningBg": "#FFFBE6",
61
- "colorWarningBgHover": "#FFF1B8",
62
- "colorWarningBorder": "#FFE58F",
63
- "colorWarningBorderHover": "#FFD666",
64
- "colorError": "#FF4D4F",
65
- "colorErrorHover": "#FF7875",
66
- "colorErrorBg": "#FFF2F0",
67
- "colorErrorBgHover": "#FFF1F0",
68
- "colorErrorBorder": "#FFCCC7",
69
- "colorErrorBorderHover": "#FFA39E",
70
- "colorLink": "#615CED",
71
- "boxShadow": "0px 4px 6px 0px rgba(0, 0, 0, 0.08)",
72
- "boxShadowSecondary": "0px 12px 24px -16px rgba(0, 0, 0, 0.06),0px 8px 40px 0px rgba(0, 0, 0, 0.12),0px 0px 1px 0px rgba(0, 0, 0, 0.04)",
73
- "colorTextWhite": "#fff",
74
- "colorFillDisable": "#DBDAE7",
75
- "colorPurple": "#615CED",
76
- "colorPurpleHover": "#8080FF",
77
- "colorPurpleBg": "rgba(226, 222, 255, 0.8)",
78
- "colorPink": "#EC4899",
79
- "colorPinkHover": "#E593BC",
80
- "colorPinkBg": "rgba(251, 220, 239, 0.8)",
81
- "colorYellow": "#EAB308",
82
- "colorYellowHover": "#F1D372",
83
- "colorYellowBg": "rgba(255, 250, 184, 0.8)",
84
- "colorOrange": "#FA8125",
85
- "colorOrangeHover": "#E88C45",
86
- "colorOrangeBg": "rgba(255, 232, 201, 0.8)",
87
- "colorTeal": "#14B8A6",
88
- "colorTealHover": "#5FB3A9",
89
- "colorTealBg": "rgba(200, 244, 233, 0.8)",
90
- "colorBlue": "#0090FF",
91
- "colorBlueHover": "#72BCF5",
92
- "colorBlueBg": "rgba(194, 229, 255, 0.8)",
93
- "colorMauve": "#8E8C99",
94
- "colorMauveHover": "#C0BFC8",
95
- "colorMauveBg": "rgba(239, 240, 243, 0.8)",
96
- "colorSlate": "#1E293B",
97
- "colorSlateHover": "#475569",
98
- "colorSlateBg": "#E2E8F0",
99
- "colorLavender": "#A77BFF",
100
- "colorLavenderHover": "#BB99FF",
101
- "colorLavenderBg": "rgba(226, 212, 255, 0.8)",
102
-
103
- "boxShadowTertiary": "0px 12px 32px -16px rgba(0, 0, 0, 0.24),0px 12px 60px 0px rgba(0, 0, 0, 0.12),0px 0px 1px 0px rgba(0, 0, 0, 0.04)",
104
- "boxShadowTertiaryLeft": "-12px 0px 32px -16px rgba(0, 0, 0, 0.24),-12px 0px 60px 0px rgba(0, 0, 0, 0.12),0px 0px 1px 0px rgba(0, 0, 0, 0.04)",
105
- "boxShadowInput": "0px 12px 24px -16px rgba(54, 54, 73, 0.04),0px 12px 40px 0px rgba(51, 51, 71, 0.08),0px 0px 1px 0px rgba(44, 44, 54, 0.02)"
106
- }
107
- ```
108
-
109
- <div><span style="display: inline-block; width: 12px; height: 12px; background-color: #5551CC;"></span> purpleDarkTheme(暗色模式)</div>
110
-
111
- ```json
112
- {
113
- "borderRadiusXS": 2,
114
- "borderRadiusSM": 4,
115
- "borderRadius": 6,
116
- "borderRadiusLG": 8,
117
- "borderRadiusXL": 12,
118
- "borderRadiusFull": 999,
119
- "wireframe": false,
120
- "colorPrimaryBg": "#202041",
121
- "colorPrimaryBgHover": "#202041",
122
- "colorPrimaryBorder": "#2B2A55",
123
- "colorPrimaryBorderHover": "#373476",
124
- "colorPrimaryHover": "#857DE3",
125
- "colorPrimary": "#5551CC",
126
- "colorPrimaryActive": "#4643A1",
127
- "colorPrimaryTextHover": "#857DE3",
128
- "colorPrimaryText": "#5551CC",
129
- "colorPrimaryTextActive": "#4643A1",
130
- "colorTextBase": "#E7E7ED",
131
- "colorBgBase": "#000000",
132
- "colorText": "rgba(231, 231, 237, 0.88)",
133
- "colorTextSecondary": "rgba(231, 231, 237, 0.65)",
134
- "colorTextTertiary": "rgba(231, 231, 237, 0.45)",
135
- "colorTextQuaternary": "rgba(231, 231, 237, 0.25)",
136
- "colorBorder": "rgba(71, 71, 97, 0.8)",
137
- "colorBorderSecondary": "rgba(56, 56, 76, 0.8)",
138
- "colorFill": "rgba(231, 231, 237, 0.18)",
139
- "colorFillSecondary": "rgba(231, 231, 237, 0.12)",
140
- "colorFillTertiary": "rgba(231, 231, 237, 0.08)",
141
- "colorFillQuaternary": "rgba(231, 231, 237, 0.04)",
142
- "colorBgContainer": "#0F0F14",
143
- "colorBgElevated": "#0F0F14",
144
- "colorBgLayout": "#0F0F14",
145
- "colorBgSpotlight": "rgba(71, 71, 97, 0.85)",
146
- "colorBgMask": "rgba(5, 5, 8, 0.8)",
147
- "colorInfo": "#0B83F1",
148
- "colorInfoHover": "rgba(42, 114, 165, 1)",
149
- "colorInfoBorder": "rgba(135, 209, 255, 0.2)",
150
- "colorInfoText": "#0B83F1",
151
- "colorInfoBg": "rgba(27, 73, 115, 0.25)",
152
- "colorInfoBgHover": "rgba(27, 73, 115, 0.32)",
153
- "colorInfoBorderHover": "rgba(94, 188, 255, 0.2)",
154
- "colorSuccess": "#5BB98B",
155
- "colorSuccessHover": "rgba(87, 141, 112, 1)",
156
- "colorSuccessBg": "rgba(0, 50, 26, 0.25)",
157
- "colorSuccessBgHover": "rgba(0, 50, 26, 0.32)",
158
- "colorSuccessBorder": "rgba(211, 224, 217, 0.2)",
159
- "colorSuccessBorderHover": "rgba(171, 212, 190, 0.2)",
160
- "colorWarning": "#FAAD14",
161
- "colorWarningHover": "rgba(170, 136, 43, 1)",
162
- "colorWarningBg": "rgba(129, 116, 49, 0.25)",
163
- "colorWarningBgHover": "rgba(129, 116, 49, 0.32)",
164
- "colorWarningBorder": "rgba(255, 229, 143, 0.2)",
165
- "colorWarningBorderHover": "rgba(255, 214, 102, 0.2)",
166
- "colorError": "#FF4D4F",
167
- "colorErrorHover": "rgba(165, 50, 48, 1)",
168
- "colorErrorBg": "rgba(129, 46, 46, 0.25)",
169
- "colorErrorBgHover": "rgba(129, 46, 46, 0.32)",
170
- "colorErrorBorder": "rgba(255, 204, 199, 0.2)",
171
- "colorErrorBorderHover": "rgba(255, 163, 158, 0.2)",
172
- "colorLink": "#5551CC",
173
- "boxShadow": "0px 4px 6px 0px rgba(255, 255, 255, 0.08)",
174
- "boxShadowSecondary": "0px 12px 24px -16px rgba(255, 255, 255, 0.04),0px 8px 40px 0px rgba(255, 255, 255, 0.06),0px 0px 1px 0px rgba(255, 255, 255, 0.02)",
175
- "colorTextWhite": "#fff",
176
- "colorFillDisable": "#8D8C98",
177
- "colorPurple": "#5551CC",
178
- "colorPurpleHover": "#8383F0",
179
- "colorPurpleBg": "rgba(226, 222, 255, 0.2)",
180
- "colorPink": "#EC4899",
181
- "colorPinkHover": "#E494BC",
182
- "colorPinkBg": "rgba(251, 220, 239, 0.2)",
183
- "colorYellow": "#EAB308",
184
- "colorYellowHover": "#DBBE62",
185
- "colorYellowBg": "rgba(255, 250, 184, 0.2)",
186
- "colorOrange": "#FA8125",
187
- "colorOrangeHover": "#F7A25F",
188
- "colorOrangeBg": "rgba(255, 232, 201, 0.2)",
189
- "colorTeal": "#14B8A6",
190
- "colorTealHover": "#7BC7BE",
191
- "colorTealBg": "rgba(200, 244, 233, 0.2)",
192
- "colorBlue": "#0090FF",
193
- "colorBlueHover": "#83BFED",
194
- "colorBlueBg": "rgba(194, 229, 255, 0.2)",
195
- "colorMauve": "#8E8C99",
196
- "colorMauveHover": "#BBB8CA",
197
- "colorMauveBg": "rgba(239, 240, 243, 0.2)",
198
- "colorSlate": "#2C3A50",
199
- "colorSlateHover": "#354252",
200
- "colorSlateBg": "#232B36",
201
- "colorLavender": "#A77BFF",
202
- "colorLavenderHover": "#BFA5F3",
203
- "colorLavenderBg": "rgba(150, 143, 167, 0.48)",
204
-
205
- "boxShadowTertiary": "0px 12px 32px -16px rgba(255, 255, 255, 0.16),0px 12px 60px 0px rgba(255, 255, 255, 0.08),0px 0px 1px 0px rgba(255, 255, 255, 0.02)",
206
- "boxShadowTertiaryLeft": "-12px 0px 32px -16px rgba(255, 255, 255, 0.16),-12px 0px 60px 0px rgba(255, 255, 255, 0.08),0px 0px 1px 0px rgba(255, 255, 255, 0.02);",
207
- "boxShadowInput": "0px 12px 24px -16px rgba(255, 255, 255, 0.08),0px 12px 40px 0px rgba(255, 255, 255, 0.16),0px 0px 1px 0px rgba(255, 255, 255, 0.04)"
208
- }
209
-
210
- ```
211
-
212
- <div><span style="display: inline-block; width: 12px; height: 12px; background-color: rgba(26, 26, 29, 1);"></span> carbonTheme</div>
213
-
214
- ```json
215
- {
216
- "borderRadiusXS": 2,
217
- "borderRadiusSM": 4,
218
- "borderRadius": 6,
219
- "borderRadiusLG": 8,
220
- "borderRadiusXL": 12,
221
- "borderRadiusFull": 999,
222
- "wireframe": false,
223
- "colorPrimaryBg": "rgba(244, 244, 247, 1)",
224
- "colorPrimaryBgHover": "rgba(239, 239, 244, 1)",
225
- "colorPrimaryBorder": "rgba(62, 63, 66, 1)",
226
- "colorPrimaryBorderHover": "rgba(130, 132, 137, 1)",
227
- "colorPrimaryHover": "rgba(38, 38, 41, 1)",
228
- "colorPrimary": "rgba(26, 26, 29, 1)",
229
- "colorPrimaryActive": "rgba(0, 0, 0, 1)",
230
- "colorPrimaryTextHover": "rgba(38, 38, 41, 1)",
231
- "colorPrimaryText": "rgba(26, 26, 29, 1)",
232
- "colorPrimaryTextActive": "rgba(0, 0, 0, 1)",
233
- "colorTextBase": "rgba(26, 26, 29, 1)",
234
- "colorBgBase": "rgba(255, 255, 255, 1)",
235
- "colorText": "rgba(26, 26, 29, 0.88)",
236
- "colorTextSecondary": "rgba(26, 26, 29, 0.65)",
237
- "colorTextTertiary": "rgba(26, 26, 29, 0.45)",
238
- "colorTextQuaternary": "rgba(26, 26, 29, 0.25)",
239
- "colorBorder": "rgba(187, 187, 193, 1)",
240
- "colorBorderSecondary": "rgba(234, 234, 234, 1)",
241
- "colorFill": "rgba(0, 0, 43, 0.06)",
242
- "colorFillSecondary": "rgba(0, 0, 85, 0.03)",
243
- "colorFillTertiary": "rgba(205, 208, 220, 0.15)",
244
- "colorFillQuaternary": "rgba(205, 208, 220, 0.1)",
245
- "colorBgContainer": "rgba(255, 255, 255, 1)",
246
- "colorBgElevated": "rgba(255, 255, 255, 1)",
247
- "colorBgLayout": "rgba(250, 250, 251, 1)",
248
- "colorBgSpotlight": "rgba(26, 26, 29, 0.85)",
249
- "colorBgMask": "rgba(0, 0, 0, 0.45)",
250
- "colorInfo": "rgba(11, 131, 241, 1)",
251
- "colorInfoHover": "rgba(94, 188, 255, 1)",
252
- "colorInfoBorder": "rgba(135, 209, 255, 1)",
253
- "colorInfoText": "rgba(11, 131, 241, 1)",
254
- "colorInfoBg": "rgba(230, 247, 255, 1)",
255
- "colorInfoBgHover": "rgba(176, 227, 255, 1)",
256
- "colorInfoBorderHover": "rgba(94, 188, 255, 1)",
257
- "colorSuccess": "rgba(91, 185, 139, 1)",
258
- "colorSuccessHover": "rgba(171, 212, 190, 1)",
259
- "colorSuccessBg": "rgba(235, 250, 240, 1)",
260
- "colorSuccessBgHover": "rgba(223, 237, 228, 1)",
261
- "colorSuccessBorder": "rgba(211, 224, 217, 1)",
262
- "colorSuccessBorderHover": "rgba(171, 212, 190, 1)",
263
- "colorWarning": "rgba(250, 173, 20, 1)",
264
- "colorWarningHover": "rgba(255, 214, 102, 1)",
265
- "colorWarningBg": "rgba(255, 251, 230, 1)",
266
- "colorWarningBgHover": "rgba(255, 241, 184, 1)",
267
- "colorWarningBorder": "rgba(255, 229, 143, 1)",
268
- "colorWarningBorderHover": "rgba(255, 214, 102, 1)",
269
- "colorError": "rgba(255, 77, 79, 1)",
270
- "colorErrorHover": "rgba(255, 120, 117, 1)",
271
- "colorErrorBg": "rgba(255, 242, 240, 1)",
272
- "colorErrorBgHover": "rgba(255, 241, 240, 1)",
273
- "colorErrorBorder": "rgba(255, 204, 199, 1)",
274
- "colorErrorBorderHover": "rgba(255, 163, 158, 1)",
275
- "colorLink": "rgba(0, 77, 255, 1)",
276
- "boxShadow": "0px 4px 6px 0px rgba(0, 0, 0, 0.08)",
277
- "boxShadowSecondary": "0px 12px 24px -16px rgba(0, 0, 0, 0.06),0px 8px 40px 0px rgba(0, 0, 0, 0.12),0px 0px 1px 0px rgba(0, 0, 0, 0.04)",
278
- "colorTextWhite": "rgba(255, 255, 255, 1)",
279
- "colorFillDisable": "rgba(232, 232, 235, 1)",
280
- "colorPurple": "rgba(97, 92, 237, 1)",
281
- "colorPurpleHover": "#8080FF",
282
- "colorPurpleBg": "rgba(226, 222, 255, 0.8)",
283
- "colorPink": "rgba(236, 72, 153, 1)",
284
- "colorPinkHover": "#E593BC",
285
- "colorPinkBg": "rgba(251, 220, 239, 0.8)",
286
- "colorYellow": "rgba(234, 179, 8, 1)",
287
- "colorYellowHover": "#F1D372",
288
- "colorYellowBg": "rgba(255, 250, 184, 0.8)",
289
- "colorOrange": "rgba(250, 129, 37, 1)",
290
- "colorOrangeHover": "#E88C45",
291
- "colorOrangeBg": "rgba(255, 232, 201, 0.8)",
292
- "colorTeal": "rgba(20, 184, 166, 1)",
293
- "colorTealHover": "#5FB3A9",
294
- "colorTealBg": "rgba(200, 244, 233, 0.8)",
295
- "colorBlue": "rgba(0, 144, 255, 1)",
296
- "colorBlueHover": "#72BCF5",
297
- "colorBlueBg": "rgba(194, 229, 255, 0.8)",
298
- "colorMauve": "rgba(142, 140, 153, 1)",
299
- "colorMauveHover": "#C0BFC8",
300
- "colorMauveBg": "rgba(239, 240, 243, 0.8)",
301
- "colorSlate": "#2C3A50",
302
- "colorSlateHover": "#354252",
303
- "colorSlateBg": "#232B36",
304
- "boxShadowTertiary": "0px 12px 32px -16px rgba(0, 0, 0, 0.24),0px 12px 60px 0px rgba(0, 0, 0, 0.12),0px 0px 1px 0px rgba(0, 0, 0, 0.04)",
305
- "boxShadowTertiaryLeft": "-12px 0px 32px -16px rgba(0, 0, 0, 0.24),-12px 0px 60px 0px rgba(0, 0, 0, 0.12),0px 0px 1px 0px rgba(0, 0, 0, 0.04)",
306
- "boxShadowInput": "0px 12px 24px -16px rgba(54, 54, 73, 0.04),0px 12px 40px 0px rgba(51, 51, 71, 0.08),0px 0px 1px 0px rgba(44, 44, 54, 0.02)"
307
- }
308
-
309
- ```
310
-
311
- <div><span style="display: inline-block; width: 12px; height: 12px; background-color: rgba(26, 26, 29, 1);"></span> carbonDarkTheme</div>
312
-
313
- ```json
314
- {
315
- "borderRadiusXS": 2,
316
- "borderRadiusSM": 4,
317
- "borderRadius": 6,
318
- "borderRadiusLG": 8,
319
- "borderRadiusXL": 12,
320
- "borderRadiusFull": 999,
321
- "wireframe": false,
322
- "colorPrimaryBg": "#181818",
323
- "colorPrimaryBgHover": "#2E2E2E",
324
- "colorPrimaryBorder": "#323232",
325
- "colorPrimaryBorderHover": "#2C2C2C",
326
- "colorPrimaryHover": "#DFDFDF",
327
- "colorPrimary": "#E4E4E4",
328
- "colorPrimaryActive": "#7E7E7E",
329
- "colorPrimaryTextHover": "#909090",
330
- "colorPrimaryText": "#676767",
331
- "colorPrimaryTextActive": "#959595",
332
- "colorTextBase": "#E7E7ED",
333
- "colorBgBase": "#0A0A0B",
334
- "colorText": "#E7E7EDC7",
335
- "colorTextSecondary": "#E7E7EDA6",
336
- "colorTextTertiary": "#E7E7ED73",
337
- "colorTextQuaternary": "#E7E7ED40",
338
- "colorBorder": "#5B5B5BCC",
339
- "colorBorderSecondary": "#323232CC",
340
- "colorFill": "#E7E7ED2E",
341
- "colorFillSecondary": "#E7E7ED1F",
342
- "colorFillTertiary": "#E7E7ED14",
343
- "colorFillQuaternary": "#E7E7ED0A",
344
- "colorBgContainer": "#121212",
345
- "colorBgElevated": "#212121",
346
- "colorBgLayout": "#141414",
347
- "colorBgSpotlight": "#525252D9",
348
- "colorBgMask": "#050508CC",
349
- "colorInfo": "#0B83F1",
350
- "colorInfoHover": "#5EBCFF",
351
- "colorInfoBorder": "#3990C9",
352
- "colorInfoText": "#0B83F1",
353
- "colorInfoBg": "#112233",
354
- "colorInfoBgHover": "#264866",
355
- "colorInfoBorderHover": "#5EBCFF",
356
- "colorSuccess": "#5BB98B",
357
- "colorSuccessHover": "#74A47C",
358
- "colorSuccessBg": "#293631",
359
- "colorSuccessBgHover": "#3F5147",
360
- "colorSuccessBorder": "#73A377",
361
- "colorSuccessBorderHover": "#ABD4BE",
362
- "colorWarning": "#FAAD14",
363
- "colorWarningHover": "#FF8C28",
364
- "colorWarningBg": "#2D231A",
365
- "colorWarningBgHover": "#4D3B23",
366
- "colorWarningBorder": "#FFA628",
367
- "colorWarningBorderHover": "#FFD666",
368
- "colorError": "#FF4D4F",
369
- "colorErrorHover": "#EE654E",
370
- "colorErrorBg": "#2B0B08",
371
- "colorErrorBgHover": "#4A2A28",
372
- "colorErrorBorder": "#EE5B4E",
373
- "colorErrorBorderHover": "#FFA39E",
374
- "colorLink": "#4D7DFF",
375
- "boxShadow": "0px 4px 6px 0px rgba(255, 255, 255, 0.08)",
376
- "boxShadowSecondary": "0px 12px 24px -16px rgba(255, 255, 255, 0.06),0px 8px 40px 0px rgba(255, 255, 255, 0.12),0px 0px 1px 0px rgba(255, 255, 255, 0.04)",
377
- "colorTextWhite": "#FFFFFF",
378
- "colorFillDisable": "#898989",
379
- "colorPurple": "#615CED",
380
- "colorPurpleHover": "#8383F0",
381
- "colorPurpleBg": "#6964877A",
382
- "colorPink": "#EC4899",
383
- "colorPinkHover": "#E494BC",
384
- "colorPinkBg": "#53424D7A",
385
- "colorYellow": "#EAB308",
386
- "colorYellowHover": "#DBBE62",
387
- "colorYellowBg": "#9585527A",
388
- "colorOrange": "#FA8125",
389
- "colorOrangeHover": "#F7A25F",
390
- "colorOrangeBg": "#6F58417A",
391
- "colorTeal": "#14B8A6",
392
- "colorTealHover": "#7BC7BE",
393
- "colorTealBg": "#4658547A",
394
- "colorBlue": "#0090FF",
395
- "colorBlueHover": "#83BFED",
396
- "colorBlueBg": "#5E76897A",
397
- "colorMauve": "#8E8C99",
398
- "colorMauveHover": "#BBB8CA",
399
- "colorMauveBg": "#5859647A",
400
- "colorSlate": "#2C3A50",
401
- "colorSlateHover": "#354252",
402
- "colorSlateBg": "#232B36",
403
- "colorLavender": "#A77BFF",
404
- "colorLavenderHover": "#BFA5F3",
405
- "colorLavenderBg": "rgba(150, 143, 167, 0.48)",
406
-
407
- "boxShadowTertiary": "0px 12px 32px -16px rgba(255, 255, 255, 0.24),0px 12px 60px 0px rgba(255, 255, 255, 0.12),0px 0px 1px 0px rgba(255, 255, 255, 0.04)",
408
- "boxShadowTertiaryLeft": "-12px 0px 32px -16px rgba(255, 255, 255, 0.24),-12px 0px 60px 0px rgba(255, 255, 255, 0.12),0px 0px 1px 0px rgba(255, 255, 255, 0.04)",
409
- "boxShadowInput": "0px 12px 24px -16px rgba(255, 255, 255, 0.08),0px 12px 40px 0px rgba(255, 255, 255, 0.16),0px 0px 1px 0px rgba(255, 255, 255, 0.04)",
410
- "colorTextBlack": "#000000"
411
- }
412
- ```
413
-
414
- # CSS 变量
415
-
416
- Spark Design 默认启用 cssVar 模式,因此您可以利用 从 token 派生出的 CSS 变量来构建自己的样式。
417
-
418
-
419
- ```less
420
- .example {
421
- background: var(--sps-color-bg-base);
422
- color: var(--sps-color-pink);
423
- }
424
- // 提示:您可以将 'sps' 替换为您自己的前缀
425
- ```
@@ -1,29 +0,0 @@
1
-
2
-
3
- # Vibe 编程
4
-
5
- ## LLMs.txt
6
-
7
- 为了让 Cursor 和 Claude Code 等工具理解 Spark Design,我们支持 LLMs.txt 文件,使 Spark Design 的文档可供大型语言模型使用。
8
-
9
-
10
- - [index.llms.txt](https://g.alicdn.com/code/npm/@ali/agentscope-ai-design/4.7.2/docs-dist/llms/index.llms.txt):主要的 LLMs.txt 索引文件
11
- - [all.llms.txt](https://g.alicdn.com/code/npm/@ali/agentscope-ai-design/4.7.2/docs-dist/llms/all.llms.txt):Spark Design 的完整文档
12
-
13
- 在 Cursor 中使用 @Docs 功能将 LLMs.txt 文件包含在您的项目中。[了解更多](https://docs.cursor.com/en/context/@-symbols/@-docs)
14
-
15
- ## D2C
16
-
17
- 在前端使用 Alibaba Cloud Spark Design、设计稿使用 Spark Design 套件的前提下,通过 masterGo 视觉稿生成代码可以做到以下几点:
18
-
19
-
20
- - 准确识别 icon
21
- - 使用标准 css token
22
- - 无需测量间距、圆角等数据,AI 直接还原布局(90%以上概率准确生成)
23
- - 使用标准组件还原页面,大部分标准组件可一次性正确生成,无需二次调整
24
-
25
- <div>
26
- <video style="width: 100%" controls src="https://cloud.video.taobao.com/vod/PrrYzvYJkoDlbJwoL8Ei1Bo_60LrKAROCojWxB_EAYs.mp4" />
27
- </div>
28
-
29
- 我们会在不久的将来开放 masterGo 的设计套件和 rules,帮助您高效率还原视觉稿