@agentscope-ai/design 1.0.17 → 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.
@@ -1,433 +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": "rgba(97, 92, 237, 0.08)",
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
-
74
- "colorTextWhite": "#ffffff",
75
- "colorTextOnPrimary": "#ffffff",
76
- "colorFillDisable": "#DBDAE7",
77
- "colorPurple": "#615CED",
78
- "colorPurpleHover": "#8080FF",
79
- "colorPurpleBg": "rgba(226, 222, 255, 0.8)",
80
- "colorPink": "#EC4899",
81
- "colorPinkHover": "#E593BC",
82
- "colorPinkBg": "rgba(251, 220, 239, 0.8)",
83
- "colorYellow": "#EAB308",
84
- "colorYellowHover": "#F1D372",
85
- "colorYellowBg": "rgba(255, 250, 184, 0.8)",
86
- "colorOrange": "#FA8125",
87
- "colorOrangeHover": "#E88C45",
88
- "colorOrangeBg": "rgba(255, 232, 201, 0.8)",
89
- "colorTeal": "#14B8A6",
90
- "colorTealHover": "#5FB3A9",
91
- "colorTealBg": "rgba(200, 244, 233, 0.8)",
92
- "colorBlue": "#0090FF",
93
- "colorBlueHover": "#72BCF5",
94
- "colorBlueBg": "rgba(194, 229, 255, 0.8)",
95
- "colorMauve": "#8E8C99",
96
- "colorMauveHover": "#C0BFC8",
97
- "colorMauveBg": "rgba(239, 240, 243, 0.8)",
98
- "colorSlate": "#1E293B",
99
- "colorSlateHover": "#475569",
100
- "colorSlateBg": "#E2E8F0",
101
- "colorLavender": "#A77BFF",
102
- "colorLavenderHover": "#BB99FF",
103
- "colorLavenderBg": "rgba(226, 212, 255, 0.8)",
104
-
105
- "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)",
106
- "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)",
107
- "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)"
108
- }
109
- ```
110
-
111
- <div><span style="display: inline-block; width: 12px; height: 12px; background-color: #5551CC;"></span> purpleDarkTheme(暗色模式)</div>
112
-
113
- ```json
114
- {
115
- "borderRadiusXS": 2,
116
- "borderRadiusSM": 4,
117
- "borderRadius": 6,
118
- "borderRadiusLG": 8,
119
- "borderRadiusXL": 12,
120
- "borderRadiusFull": 999,
121
- "wireframe": false,
122
- "colorPrimaryBg": "#202041",
123
- "colorPrimaryBgHover": "#202041",
124
- "colorPrimaryBorder": "#2B2A55",
125
- "colorPrimaryBorderHover": "#373476",
126
- "colorPrimaryHover": "#857DE3",
127
- "colorPrimary": "#5551CC",
128
- "colorPrimaryActive": "#4643A1",
129
- "colorPrimaryTextHover": "#857DE3",
130
- "colorPrimaryText": "#5551CC",
131
- "colorPrimaryTextActive": "#4643A1",
132
- "colorTextBase": "#E7E7ED",
133
- "colorBgBase": "#000000",
134
- "colorText": "rgba(231, 231, 237, 0.88)",
135
- "colorTextSecondary": "rgba(231, 231, 237, 0.65)",
136
- "colorTextTertiary": "rgba(231, 231, 237, 0.45)",
137
- "colorTextQuaternary": "rgba(231, 231, 237, 0.25)",
138
- "colorBorder": "rgba(71, 71, 97, 0.8)",
139
- "colorBorderSecondary": "rgba(56, 56, 76, 0.8)",
140
- "colorFill": "rgba(231, 231, 237, 0.18)",
141
- "colorFillSecondary": "rgba(231, 231, 237, 0.12)",
142
- "colorFillTertiary": "rgba(231, 231, 237, 0.08)",
143
- "colorFillQuaternary": "rgba(231, 231, 237, 0.04)",
144
- "colorBgContainer": "#0F0F14",
145
- "colorBgElevated": "#0F0F14",
146
- "colorBgLayout": "#0F0F14",
147
- "colorBgSpotlight": "rgba(71, 71, 97, 0.85)",
148
- "colorBgMask": "rgba(5, 5, 8, 0.8)",
149
- "colorInfo": "#0B83F1",
150
- "colorInfoHover": "rgba(42, 114, 165, 1)",
151
- "colorInfoBorder": "rgba(135, 209, 255, 0.2)",
152
- "colorInfoText": "#0B83F1",
153
- "colorInfoBg": "rgba(27, 73, 115, 0.25)",
154
- "colorInfoBgHover": "rgba(27, 73, 115, 0.32)",
155
- "colorInfoBorderHover": "rgba(94, 188, 255, 0.2)",
156
- "colorSuccess": "#5BB98B",
157
- "colorSuccessHover": "rgba(87, 141, 112, 1)",
158
- "colorSuccessBg": "rgba(0, 50, 26, 0.25)",
159
- "colorSuccessBgHover": "rgba(0, 50, 26, 0.32)",
160
- "colorSuccessBorder": "rgba(211, 224, 217, 0.2)",
161
- "colorSuccessBorderHover": "rgba(171, 212, 190, 0.2)",
162
- "colorWarning": "#FAAD14",
163
- "colorWarningHover": "rgba(170, 136, 43, 1)",
164
- "colorWarningBg": "rgba(129, 116, 49, 0.25)",
165
- "colorWarningBgHover": "rgba(129, 116, 49, 0.32)",
166
- "colorWarningBorder": "rgba(255, 229, 143, 0.2)",
167
- "colorWarningBorderHover": "rgba(255, 214, 102, 0.2)",
168
- "colorError": "#FF4D4F",
169
- "colorErrorHover": "rgba(165, 50, 48, 1)",
170
- "colorErrorBg": "rgba(129, 46, 46, 0.25)",
171
- "colorErrorBgHover": "rgba(129, 46, 46, 0.32)",
172
- "colorErrorBorder": "rgba(255, 204, 199, 0.2)",
173
- "colorErrorBorderHover": "rgba(255, 163, 158, 0.2)",
174
- "colorLink": "#5551CC",
175
- "boxShadow": "0px 4px 6px 0px rgba(255, 255, 255, 0.08)",
176
- "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)",
177
-
178
- "colorTextWhite": "#fff",
179
- "colorTextOnPrimary": "#fff",
180
- "colorFillDisable": "#8D8C98",
181
- "colorPurple": "#5551CC",
182
- "colorPurpleHover": "#8383F0",
183
- "colorPurpleBg": "rgba(226, 222, 255, 0.2)",
184
- "colorPink": "#EC4899",
185
- "colorPinkHover": "#E494BC",
186
- "colorPinkBg": "rgba(251, 220, 239, 0.2)",
187
- "colorYellow": "#EAB308",
188
- "colorYellowHover": "#DBBE62",
189
- "colorYellowBg": "rgba(255, 250, 184, 0.2)",
190
- "colorOrange": "#FA8125",
191
- "colorOrangeHover": "#F7A25F",
192
- "colorOrangeBg": "rgba(255, 232, 201, 0.2)",
193
- "colorTeal": "#14B8A6",
194
- "colorTealHover": "#7BC7BE",
195
- "colorTealBg": "rgba(200, 244, 233, 0.2)",
196
- "colorBlue": "#0090FF",
197
- "colorBlueHover": "#83BFED",
198
- "colorBlueBg": "rgba(194, 229, 255, 0.2)",
199
- "colorMauve": "#8E8C99",
200
- "colorMauveHover": "#BBB8CA",
201
- "colorMauveBg": "rgba(239, 240, 243, 0.2)",
202
- "colorSlate": "#2C3A50",
203
- "colorSlateHover": "#354252",
204
- "colorSlateBg": "#232B36",
205
- "colorLavender": "#A77BFF",
206
- "colorLavenderHover": "#BFA5F3",
207
- "colorLavenderBg": "rgba(150, 143, 167, 0.48)",
208
-
209
- "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)",
210
- "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);",
211
- "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)"
212
- }
213
-
214
- ```
215
-
216
- <div><span style="display: inline-block; width: 12px; height: 12px; background-color: rgba(26, 26, 29, 1);"></span> carbonTheme</div>
217
-
218
- ```json
219
- {
220
- "borderRadiusXS": 2,
221
- "borderRadiusSM": 4,
222
- "borderRadius": 6,
223
- "borderRadiusLG": 8,
224
- "borderRadiusXL": 12,
225
- "borderRadiusFull": 999,
226
- "wireframe": false,
227
- "colorPrimaryBg": "rgba(244, 244, 247, 1)",
228
- "colorPrimaryBgHover": "rgba(239, 239, 244, 1)",
229
- "colorPrimaryBorder": "rgba(62, 63, 66, 1)",
230
- "colorPrimaryBorderHover": "rgba(130, 132, 137, 1)",
231
- "colorPrimaryHover": "rgba(38, 38, 41, 1)",
232
- "colorPrimary": "rgba(26, 26, 29, 1)",
233
- "colorPrimaryActive": "rgba(0, 0, 0, 1)",
234
- "colorPrimaryTextHover": "rgba(38, 38, 41, 1)",
235
- "colorPrimaryText": "rgba(26, 26, 29, 1)",
236
- "colorPrimaryTextActive": "rgba(0, 0, 0, 1)",
237
- "colorTextBase": "rgba(26, 26, 29, 1)",
238
- "colorBgBase": "rgba(255, 255, 255, 1)",
239
- "colorText": "rgba(26, 26, 29, 0.88)",
240
- "colorTextSecondary": "rgba(26, 26, 29, 0.65)",
241
- "colorTextTertiary": "rgba(26, 26, 29, 0.45)",
242
- "colorTextQuaternary": "rgba(26, 26, 29, 0.25)",
243
- "colorBorder": "rgba(187, 187, 193, 1)",
244
- "colorBorderSecondary": "rgba(234, 234, 234, 1)",
245
- "colorFill": "rgba(0, 0, 43, 0.06)",
246
- "colorFillSecondary": "rgba(0, 0, 85, 0.03)",
247
- "colorFillTertiary": "rgba(205, 208, 220, 0.15)",
248
- "colorFillQuaternary": "rgba(205, 208, 220, 0.1)",
249
- "colorBgContainer": "rgba(255, 255, 255, 1)",
250
- "colorBgElevated": "rgba(255, 255, 255, 1)",
251
- "colorBgLayout": "rgba(250, 250, 251, 1)",
252
- "colorBgSpotlight": "rgba(26, 26, 29, 0.85)",
253
- "colorBgMask": "rgba(0, 0, 0, 0.45)",
254
- "colorInfo": "rgba(11, 131, 241, 1)",
255
- "colorInfoHover": "rgba(94, 188, 255, 1)",
256
- "colorInfoBorder": "rgba(135, 209, 255, 1)",
257
- "colorInfoText": "rgba(11, 131, 241, 1)",
258
- "colorInfoBg": "rgba(230, 247, 255, 1)",
259
- "colorInfoBgHover": "rgba(176, 227, 255, 1)",
260
- "colorInfoBorderHover": "rgba(94, 188, 255, 1)",
261
- "colorSuccess": "rgba(91, 185, 139, 1)",
262
- "colorSuccessHover": "rgba(171, 212, 190, 1)",
263
- "colorSuccessBg": "rgba(235, 250, 240, 1)",
264
- "colorSuccessBgHover": "rgba(223, 237, 228, 1)",
265
- "colorSuccessBorder": "rgba(211, 224, 217, 1)",
266
- "colorSuccessBorderHover": "rgba(171, 212, 190, 1)",
267
- "colorWarning": "rgba(250, 173, 20, 1)",
268
- "colorWarningHover": "rgba(255, 214, 102, 1)",
269
- "colorWarningBg": "rgba(255, 251, 230, 1)",
270
- "colorWarningBgHover": "rgba(255, 241, 184, 1)",
271
- "colorWarningBorder": "rgba(255, 229, 143, 1)",
272
- "colorWarningBorderHover": "rgba(255, 214, 102, 1)",
273
- "colorError": "rgba(255, 77, 79, 1)",
274
- "colorErrorHover": "rgba(255, 120, 117, 1)",
275
- "colorErrorBg": "rgba(255, 242, 240, 1)",
276
- "colorErrorBgHover": "rgba(255, 241, 240, 1)",
277
- "colorErrorBorder": "rgba(255, 204, 199, 1)",
278
- "colorErrorBorderHover": "rgba(255, 163, 158, 1)",
279
- "colorLink": "rgba(0, 77, 255, 1)",
280
- "boxShadow": "0px 4px 6px 0px rgba(0, 0, 0, 0.08)",
281
- "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)",
282
-
283
- "colorTextWhite": "#ffffff",
284
- "colorTextOnPrimary": "#ffffff",
285
- "colorFillDisable": "rgba(232, 232, 235, 1)",
286
- "colorPurple": "rgba(97, 92, 237, 1)",
287
- "colorPurpleHover": "#8080FF",
288
- "colorPurpleBg": "rgba(226, 222, 255, 0.8)",
289
- "colorPink": "rgba(236, 72, 153, 1)",
290
- "colorPinkHover": "#E593BC",
291
- "colorPinkBg": "rgba(251, 220, 239, 0.8)",
292
- "colorYellow": "rgba(234, 179, 8, 1)",
293
- "colorYellowHover": "#F1D372",
294
- "colorYellowBg": "rgba(255, 250, 184, 0.8)",
295
- "colorOrange": "rgba(250, 129, 37, 1)",
296
- "colorOrangeHover": "#E88C45",
297
- "colorOrangeBg": "rgba(255, 232, 201, 0.8)",
298
- "colorTeal": "rgba(20, 184, 166, 1)",
299
- "colorTealHover": "#5FB3A9",
300
- "colorTealBg": "rgba(200, 244, 233, 0.8)",
301
- "colorBlue": "rgba(0, 144, 255, 1)",
302
- "colorBlueHover": "#72BCF5",
303
- "colorBlueBg": "rgba(194, 229, 255, 0.8)",
304
- "colorMauve": "rgba(142, 140, 153, 1)",
305
- "colorMauveHover": "#C0BFC8",
306
- "colorMauveBg": "rgba(239, 240, 243, 0.8)",
307
- "colorSlate": "#2C3A50",
308
- "colorSlateHover": "#354252",
309
- "colorSlateBg": "#232B36",
310
- "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)",
311
- "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)",
312
- "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)"
313
- }
314
-
315
- ```
316
-
317
- <div><span style="display: inline-block; width: 12px; height: 12px; background-color: rgba(26, 26, 29, 1);"></span> carbonDarkTheme</div>
318
-
319
- ```json
320
- {
321
- "borderRadiusXS": 2,
322
- "borderRadiusSM": 4,
323
- "borderRadius": 6,
324
- "borderRadiusLG": 8,
325
- "borderRadiusXL": 12,
326
- "borderRadiusFull": 999,
327
- "wireframe": false,
328
- "colorPrimaryBg": "#181818",
329
- "colorPrimaryBgHover": "#2E2E2E",
330
- "colorPrimaryBorder": "#323232",
331
- "colorPrimaryBorderHover": "#2C2C2C",
332
- "colorPrimaryHover": "#DFDFDF",
333
- "colorPrimary": "#E4E4E4",
334
- "colorPrimaryActive": "#7E7E7E",
335
- "colorPrimaryTextHover": "#909090",
336
- "colorPrimaryText": "#676767",
337
- "colorPrimaryTextActive": "#959595",
338
- "colorTextBase": "#E7E7ED",
339
- "colorBgBase": "#0A0A0B",
340
- "colorText": "#E7E7EDC7",
341
- "colorTextSecondary": "#E7E7EDA6",
342
- "colorTextTertiary": "#E7E7ED73",
343
- "colorTextQuaternary": "#E7E7ED40",
344
- "colorBorder": "#5B5B5BCC",
345
- "colorBorderSecondary": "#323232CC",
346
- "colorFill": "#E7E7ED2E",
347
- "colorFillSecondary": "#E7E7ED1F",
348
- "colorFillTertiary": "#E7E7ED14",
349
- "colorFillQuaternary": "#E7E7ED0A",
350
- "colorBgContainer": "#121212",
351
- "colorBgElevated": "#212121",
352
- "colorBgLayout": "#141414",
353
- "colorBgSpotlight": "#525252D9",
354
- "colorBgMask": "#050508CC",
355
- "colorInfo": "#0B83F1",
356
- "colorInfoHover": "#5EBCFF",
357
- "colorInfoBorder": "#3990C9",
358
- "colorInfoText": "#0B83F1",
359
- "colorInfoBg": "#112233",
360
- "colorInfoBgHover": "#264866",
361
- "colorInfoBorderHover": "#5EBCFF",
362
- "colorSuccess": "#5BB98B",
363
- "colorSuccessHover": "#74A47C",
364
- "colorSuccessBg": "#293631",
365
- "colorSuccessBgHover": "#3F5147",
366
- "colorSuccessBorder": "#73A377",
367
- "colorSuccessBorderHover": "#ABD4BE",
368
- "colorWarning": "#FAAD14",
369
- "colorWarningHover": "#FF8C28",
370
- "colorWarningBg": "#2D231A",
371
- "colorWarningBgHover": "#4D3B23",
372
- "colorWarningBorder": "#FFA628",
373
- "colorWarningBorderHover": "#FFD666",
374
- "colorError": "#FF4D4F",
375
- "colorErrorHover": "#EE654E",
376
- "colorErrorBg": "#2B0B08",
377
- "colorErrorBgHover": "#4A2A28",
378
- "colorErrorBorder": "#EE5B4E",
379
- "colorErrorBorderHover": "#FFA39E",
380
- "colorLink": "#4D7DFF",
381
- "boxShadow": "0px 4px 6px 0px rgba(255, 255, 255, 0.08)",
382
- "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)",
383
-
384
- "colorTextWhite": "#ffffff",
385
- "colorTextOnPrimary": "#000000",
386
- "colorFillDisable": "#898989",
387
- "colorPurple": "#615CED",
388
- "colorPurpleHover": "#8383F0",
389
- "colorPurpleBg": "#6964877A",
390
- "colorPink": "#EC4899",
391
- "colorPinkHover": "#E494BC",
392
- "colorPinkBg": "#53424D7A",
393
- "colorYellow": "#EAB308",
394
- "colorYellowHover": "#DBBE62",
395
- "colorYellowBg": "#9585527A",
396
- "colorOrange": "#FA8125",
397
- "colorOrangeHover": "#F7A25F",
398
- "colorOrangeBg": "#6F58417A",
399
- "colorTeal": "#14B8A6",
400
- "colorTealHover": "#7BC7BE",
401
- "colorTealBg": "#4658547A",
402
- "colorBlue": "#0090FF",
403
- "colorBlueHover": "#83BFED",
404
- "colorBlueBg": "#5E76897A",
405
- "colorMauve": "#8E8C99",
406
- "colorMauveHover": "#BBB8CA",
407
- "colorMauveBg": "#5859647A",
408
- "colorSlate": "#2C3A50",
409
- "colorSlateHover": "#354252",
410
- "colorSlateBg": "#232B36",
411
- "colorLavender": "#A77BFF",
412
- "colorLavenderHover": "#BFA5F3",
413
- "colorLavenderBg": "rgba(150, 143, 167, 0.48)",
414
-
415
- "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)",
416
- "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)",
417
- "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)",
418
- "colorTextBlack": "#000000"
419
- }
420
- ```
421
-
422
- # CSS 变量
423
-
424
- Spark Design 默认启用 cssVar 模式,因此您可以利用 从 token 派生出的 CSS 变量来构建自己的样式。
425
-
426
-
427
- ```less
428
- .example {
429
- background: var(--sps-color-bg-base);
430
- color: var(--sps-color-pink);
431
- }
432
- // 提示:您可以将 'sps' 替换为您自己的前缀
433
- ```
@@ -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,帮助您高效率还原视觉稿