@getflip/swirl-ai 0.492.0 → 0.492.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/agent/tokens.json +1218 -0
- package/package.json +3 -2
|
@@ -0,0 +1,1218 @@
|
|
|
1
|
+
{
|
|
2
|
+
"schemaVersion": 1,
|
|
3
|
+
"colors": [
|
|
4
|
+
{
|
|
5
|
+
"name": "background-default",
|
|
6
|
+
"valueLight": "rgba(255, 255, 255, 1)",
|
|
7
|
+
"valueDark": "rgba(25, 25, 25, 1)",
|
|
8
|
+
"tailwindNamespace": "colors",
|
|
9
|
+
"description": "Usually used for the page background and elements that should not elevate from the background."
|
|
10
|
+
},
|
|
11
|
+
{
|
|
12
|
+
"name": "background-hovered",
|
|
13
|
+
"valueLight": "rgba(242, 242, 242, 1)",
|
|
14
|
+
"valueDark": "rgba(35, 35, 35, 1)",
|
|
15
|
+
"tailwindNamespace": "colors",
|
|
16
|
+
"description": "Used if a component with “Background/Default” has a hovered state."
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
"name": "background-pressed",
|
|
20
|
+
"valueLight": "rgba(234, 234, 234, 1)",
|
|
21
|
+
"valueDark": "rgba(43, 43, 43, 1)",
|
|
22
|
+
"tailwindNamespace": "colors",
|
|
23
|
+
"description": "Used if a component with “Background/Default” has a pressed state."
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
"name": "surface-default",
|
|
27
|
+
"valueLight": "rgba(255, 255, 255, 1)",
|
|
28
|
+
"valueDark": "rgba(35, 35, 35, 1)",
|
|
29
|
+
"tailwindNamespace": "colors",
|
|
30
|
+
"description": "Usually used for containers that need to be elevated."
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
"name": "surface-hovered",
|
|
34
|
+
"valueLight": "rgba(242, 242, 242, 1)",
|
|
35
|
+
"valueDark": "rgba(43, 43, 43, 1)",
|
|
36
|
+
"tailwindNamespace": "colors",
|
|
37
|
+
"description": "Used if a component with “Surface/Default” has a hovered state."
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
"name": "surface-pressed",
|
|
41
|
+
"valueLight": "rgba(234, 234, 234, 1)",
|
|
42
|
+
"valueDark": "rgba(54, 54, 54, 1)",
|
|
43
|
+
"tailwindNamespace": "colors",
|
|
44
|
+
"description": "Used if a component with “Surface/Default” has a pressed state."
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"name": "surface-sunken-default",
|
|
48
|
+
"valueLight": "rgba(242, 242, 242, 1)",
|
|
49
|
+
"valueDark": "rgba(0, 0, 0, 1)",
|
|
50
|
+
"tailwindNamespace": "colors"
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"name": "surface-sunken-hovered",
|
|
54
|
+
"valueLight": "rgba(234, 234, 234, 1)",
|
|
55
|
+
"valueDark": "rgba(35, 35, 35, 1)",
|
|
56
|
+
"tailwindNamespace": "colors"
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"name": "surface-sunken-pressed",
|
|
60
|
+
"valueLight": "rgba(223, 223, 223, 1)",
|
|
61
|
+
"valueDark": "rgba(43, 43, 43, 1)",
|
|
62
|
+
"tailwindNamespace": "colors"
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"name": "surface-overlay-default",
|
|
66
|
+
"valueLight": "rgba(255, 255, 255, 1)",
|
|
67
|
+
"valueDark": "rgba(43, 43, 43, 1)",
|
|
68
|
+
"tailwindNamespace": "colors",
|
|
69
|
+
"description": "Usually used for containers that need to be more elevated."
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
"name": "surface-overlay-hovered",
|
|
73
|
+
"valueLight": "rgba(242, 242, 242, 1)",
|
|
74
|
+
"valueDark": "rgba(54, 54, 54, 1)",
|
|
75
|
+
"tailwindNamespace": "colors",
|
|
76
|
+
"description": "Used if a component with “Surface Overlay/Default” has a hovered state."
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
"name": "surface-overlay-pressed",
|
|
80
|
+
"valueLight": "rgba(234, 234, 234, 1)",
|
|
81
|
+
"valueDark": "rgba(63, 63, 63, 1)",
|
|
82
|
+
"tailwindNamespace": "colors",
|
|
83
|
+
"description": "Used if a component with “Surface Overlay/Default” has a pressed state."
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
"name": "surface-raised-default",
|
|
87
|
+
"valueLight": "rgba(0,0,0,0.06)",
|
|
88
|
+
"valueDark": "rgba(255,255,255,0.06)",
|
|
89
|
+
"tailwindNamespace": "colors",
|
|
90
|
+
"description": "Usually used for elements that need contrast on surfaces or background"
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
"name": "surface-raised-hovered",
|
|
94
|
+
"valueLight": "rgba(0,0,0,0.09)",
|
|
95
|
+
"valueDark": "rgba(255,255,255,0.09)",
|
|
96
|
+
"tailwindNamespace": "colors",
|
|
97
|
+
"description": "Used if a component with “On Surface/Default” has a hovered state."
|
|
98
|
+
},
|
|
99
|
+
{
|
|
100
|
+
"name": "surface-raised-pressed",
|
|
101
|
+
"valueLight": "rgba(0,0,0,0.12)",
|
|
102
|
+
"valueDark": "rgba(255,255,255,0.12)",
|
|
103
|
+
"tailwindNamespace": "colors",
|
|
104
|
+
"description": "Used if a component with “On Surface/Default” has a pressed state."
|
|
105
|
+
},
|
|
106
|
+
{
|
|
107
|
+
"name": "surface-raised-50-default",
|
|
108
|
+
"valueLight": "rgba(0,0,0,0.03)",
|
|
109
|
+
"valueDark": "rgba(255,255,255,0.03)",
|
|
110
|
+
"tailwindNamespace": "colors",
|
|
111
|
+
"description": "Usually used for elements that need contrast on surfaces or background with a 50% opacity"
|
|
112
|
+
},
|
|
113
|
+
{
|
|
114
|
+
"name": "surface-raised-50-hovered",
|
|
115
|
+
"valueLight": "rgba(0,0,0,0.06)",
|
|
116
|
+
"valueDark": "rgba(255,255,255,0.06)",
|
|
117
|
+
"tailwindNamespace": "colors",
|
|
118
|
+
"description": "Used if a component with `surface-raised-50` has a hovered state."
|
|
119
|
+
},
|
|
120
|
+
{
|
|
121
|
+
"name": "surface-raised-50-pressed",
|
|
122
|
+
"valueLight": "rgba(0,0,0,0.09)",
|
|
123
|
+
"valueDark": "rgba(255,255,255,0.09)",
|
|
124
|
+
"tailwindNamespace": "colors",
|
|
125
|
+
"description": "Used if a component with `surface-raised-50` has a pressed state."
|
|
126
|
+
},
|
|
127
|
+
{
|
|
128
|
+
"name": "surface-highlight-default",
|
|
129
|
+
"valueLight": "rgba(230, 238, 255, 1)",
|
|
130
|
+
"valueDark": "rgba(45, 71, 127, 1)",
|
|
131
|
+
"tailwindNamespace": "colors",
|
|
132
|
+
"description": "Usually used for containers that need to be highlighted."
|
|
133
|
+
},
|
|
134
|
+
{
|
|
135
|
+
"name": "surface-highlight-hovered",
|
|
136
|
+
"valueLight": "rgba(213, 226, 255, 1)",
|
|
137
|
+
"valueDark": "rgba(52, 80, 141, 1)",
|
|
138
|
+
"tailwindNamespace": "colors",
|
|
139
|
+
"description": "Used if a component with “Surface Highlight/Default” has a hovered state."
|
|
140
|
+
},
|
|
141
|
+
{
|
|
142
|
+
"name": "surface-highlight-pressed",
|
|
143
|
+
"valueLight": "rgba(190, 210, 255, 1)",
|
|
144
|
+
"valueDark": "rgba(64, 91, 151, 1)",
|
|
145
|
+
"tailwindNamespace": "colors",
|
|
146
|
+
"description": "Used if a component with “Surface Highlight/Default” has a pressed state."
|
|
147
|
+
},
|
|
148
|
+
{
|
|
149
|
+
"name": "on-surface-highlight-default",
|
|
150
|
+
"valueLight": "rgba(213, 226, 255, 1)",
|
|
151
|
+
"valueDark": "rgba(52, 80, 141, 1)",
|
|
152
|
+
"tailwindNamespace": "colors",
|
|
153
|
+
"description": "Used to place containers on “Surface Highlight/Default”."
|
|
154
|
+
},
|
|
155
|
+
{
|
|
156
|
+
"name": "surface-critical-default",
|
|
157
|
+
"valueLight": "rgba(213, 6, 54, 1)",
|
|
158
|
+
"valueDark": "rgba(228, 100, 100, 1)",
|
|
159
|
+
"tailwindNamespace": "colors",
|
|
160
|
+
"description": "Used as a background for critical surfaces."
|
|
161
|
+
},
|
|
162
|
+
{
|
|
163
|
+
"name": "surface-critical-subdued",
|
|
164
|
+
"valueLight": "rgba(252, 231, 237, 1)",
|
|
165
|
+
"valueDark": "rgba(56, 33, 38, 1)",
|
|
166
|
+
"tailwindNamespace": "colors",
|
|
167
|
+
"description": "Used for low prio critical background."
|
|
168
|
+
},
|
|
169
|
+
{
|
|
170
|
+
"name": "surface-warning-default",
|
|
171
|
+
"valueLight": "rgba(243, 183, 3, 1)",
|
|
172
|
+
"valueDark": "rgba(243, 183, 3, 1)",
|
|
173
|
+
"tailwindNamespace": "colors",
|
|
174
|
+
"description": "Used as a background for warning surfaces."
|
|
175
|
+
},
|
|
176
|
+
{
|
|
177
|
+
"name": "surface-warning-subdued",
|
|
178
|
+
"valueLight": "rgba(250, 241, 200, 1)",
|
|
179
|
+
"valueDark": "rgba(45, 39, 25, 1)",
|
|
180
|
+
"tailwindNamespace": "colors",
|
|
181
|
+
"description": "Used for low prio warning background."
|
|
182
|
+
},
|
|
183
|
+
{
|
|
184
|
+
"name": "surface-success-default",
|
|
185
|
+
"valueLight": "rgba(8, 129, 8, 1)",
|
|
186
|
+
"valueDark": "rgba(80, 164, 80, 1)",
|
|
187
|
+
"tailwindNamespace": "colors",
|
|
188
|
+
"description": "Used as a background for success surfaces."
|
|
189
|
+
},
|
|
190
|
+
{
|
|
191
|
+
"name": "surface-success-subdued",
|
|
192
|
+
"valueLight": "rgba(220, 247, 220, 1)",
|
|
193
|
+
"valueDark": "rgba(26, 44, 26, 1)",
|
|
194
|
+
"tailwindNamespace": "colors",
|
|
195
|
+
"description": "Used for low prio success background."
|
|
196
|
+
},
|
|
197
|
+
{
|
|
198
|
+
"name": "surface-info-default",
|
|
199
|
+
"valueLight": "rgba(20, 90, 245, 1)",
|
|
200
|
+
"valueDark": "rgba(100, 142, 233, 1)",
|
|
201
|
+
"tailwindNamespace": "colors",
|
|
202
|
+
"description": "Used as a background for info surfaces."
|
|
203
|
+
},
|
|
204
|
+
{
|
|
205
|
+
"name": "surface-info-subdued",
|
|
206
|
+
"valueLight": "rgba(230, 241, 255, 1)",
|
|
207
|
+
"valueDark": "rgba(33, 41, 58, 1)",
|
|
208
|
+
"tailwindNamespace": "colors",
|
|
209
|
+
"description": "Used for low prio info background."
|
|
210
|
+
},
|
|
211
|
+
{
|
|
212
|
+
"name": "surface-neutral-default",
|
|
213
|
+
"valueLight": "rgba(63, 63, 63, 1)",
|
|
214
|
+
"valueDark": "rgba(207, 207, 207, 1)",
|
|
215
|
+
"tailwindNamespace": "colors",
|
|
216
|
+
"description": "Used as a background for neutral surfaces."
|
|
217
|
+
},
|
|
218
|
+
{
|
|
219
|
+
"name": "surface-neutral-subdued",
|
|
220
|
+
"valueLight": "rgba(242, 242, 242, 1)",
|
|
221
|
+
"valueDark": "rgba(54, 54, 54, 1)",
|
|
222
|
+
"tailwindNamespace": "colors",
|
|
223
|
+
"description": "Used for low prio neutral background."
|
|
224
|
+
},
|
|
225
|
+
{
|
|
226
|
+
"name": "surface-on-image-default",
|
|
227
|
+
"valueLight": "rgba(0, 0, 0, 0.6)",
|
|
228
|
+
"valueDark": "rgba(0, 0, 0, 0.4)",
|
|
229
|
+
"tailwindNamespace": "colors",
|
|
230
|
+
"description": "Usually used for containers on images"
|
|
231
|
+
},
|
|
232
|
+
{
|
|
233
|
+
"name": "translucent-low-default",
|
|
234
|
+
"valueLight": "rgba(255,255,255,0.8)",
|
|
235
|
+
"valueDark": "rgba(43,43,43,0.8)",
|
|
236
|
+
"tailwindNamespace": "colors",
|
|
237
|
+
"description": "Used for surface with a backdrop blur and low transparency"
|
|
238
|
+
},
|
|
239
|
+
{
|
|
240
|
+
"name": "translucent-low-hovered",
|
|
241
|
+
"valueLight": "rgba(0,0,0,0.06)",
|
|
242
|
+
"valueDark": "rgba(255,255,255,0.06)",
|
|
243
|
+
"tailwindNamespace": "colors",
|
|
244
|
+
"description": "Used for hovers on translucent low"
|
|
245
|
+
},
|
|
246
|
+
{
|
|
247
|
+
"name": "translucent-low-pressed",
|
|
248
|
+
"valueLight": "rgba(0,0,0,0.09)",
|
|
249
|
+
"valueDark": "rgba(255,255,255,0.09)",
|
|
250
|
+
"tailwindNamespace": "colors",
|
|
251
|
+
"description": "Used for pressed state on translucent low"
|
|
252
|
+
},
|
|
253
|
+
{
|
|
254
|
+
"name": "translucent-medium-default",
|
|
255
|
+
"valueLight": "rgba(242,242,242,0.6)",
|
|
256
|
+
"valueDark": "rgba(43,43,43,0.6)",
|
|
257
|
+
"tailwindNamespace": "colors",
|
|
258
|
+
"description": "Used for surface with a backdrop blur and low transparency"
|
|
259
|
+
},
|
|
260
|
+
{
|
|
261
|
+
"name": "translucent-medium-hovered",
|
|
262
|
+
"valueLight": "rgba(255,255,255,0.8)",
|
|
263
|
+
"valueDark": "rgba(255,255,255,0.2)",
|
|
264
|
+
"tailwindNamespace": "colors",
|
|
265
|
+
"description": "Used for hovers on translucent medium"
|
|
266
|
+
},
|
|
267
|
+
{
|
|
268
|
+
"name": "translucent-medium-pressed",
|
|
269
|
+
"valueLight": "rgba(255,255,255,1)",
|
|
270
|
+
"valueDark": "rgba(255,255,255,0.3)",
|
|
271
|
+
"tailwindNamespace": "colors",
|
|
272
|
+
"description": "Used for hovers on translucent medium"
|
|
273
|
+
},
|
|
274
|
+
{
|
|
275
|
+
"name": "border-strong",
|
|
276
|
+
"valueLight": "rgba(0,0,0,0.2)",
|
|
277
|
+
"valueDark": "rgba(255,255,255,0.2)",
|
|
278
|
+
"tailwindNamespace": "colors",
|
|
279
|
+
"description": "Usually used for high emphasis borders."
|
|
280
|
+
},
|
|
281
|
+
{
|
|
282
|
+
"name": "border-default",
|
|
283
|
+
"valueLight": "rgba(0,0,0,0.12)",
|
|
284
|
+
"valueDark": "rgba(255,255,255,0.12)",
|
|
285
|
+
"tailwindNamespace": "colors",
|
|
286
|
+
"description": "Usually used for low emphasis borders and espacially divider elements."
|
|
287
|
+
},
|
|
288
|
+
{
|
|
289
|
+
"name": "border-highlight",
|
|
290
|
+
"valueLight": "rgba(0, 55, 175, 1)",
|
|
291
|
+
"valueDark": "rgba(109, 168, 251, 1)",
|
|
292
|
+
"tailwindNamespace": "colors",
|
|
293
|
+
"description": "Used as border color on containers that need to be highlighted (e.g. form fields)."
|
|
294
|
+
},
|
|
295
|
+
{
|
|
296
|
+
"name": "border-critical",
|
|
297
|
+
"valueLight": "rgba(213, 6, 54, 1)",
|
|
298
|
+
"valueDark": "rgba(228, 100, 100, 1)",
|
|
299
|
+
"tailwindNamespace": "colors",
|
|
300
|
+
"description": "Usally used as an border on critical components."
|
|
301
|
+
},
|
|
302
|
+
{
|
|
303
|
+
"name": "border-success",
|
|
304
|
+
"valueLight": "rgba(8, 129, 8, 1)",
|
|
305
|
+
"valueDark": "rgba(80, 164, 80, 1)",
|
|
306
|
+
"tailwindNamespace": "colors",
|
|
307
|
+
"description": "Usally used as an border on success components."
|
|
308
|
+
},
|
|
309
|
+
{
|
|
310
|
+
"name": "border-warning",
|
|
311
|
+
"valueLight": "rgba(147, 88, 6, 1)",
|
|
312
|
+
"valueDark": "rgba(243, 183, 3, 1)",
|
|
313
|
+
"tailwindNamespace": "colors",
|
|
314
|
+
"description": "Usally used as an border on warning components."
|
|
315
|
+
},
|
|
316
|
+
{
|
|
317
|
+
"name": "border-info",
|
|
318
|
+
"valueLight": "rgba(20, 90, 245, 1)",
|
|
319
|
+
"valueDark": "rgba(100, 142, 233, 1)",
|
|
320
|
+
"tailwindNamespace": "colors",
|
|
321
|
+
"description": "Usally used as an border on info components."
|
|
322
|
+
},
|
|
323
|
+
{
|
|
324
|
+
"name": "border-on-highlight",
|
|
325
|
+
"valueLight": "rgba(174, 201, 246, 1)",
|
|
326
|
+
"valueDark": "rgba(92, 118, 174, 1)",
|
|
327
|
+
"tailwindNamespace": "colors",
|
|
328
|
+
"description": "Used as border color on containers that have an highlight surface"
|
|
329
|
+
},
|
|
330
|
+
{
|
|
331
|
+
"name": "border-on-translucent",
|
|
332
|
+
"valueLight": "rgba(0,0,0,0.12)",
|
|
333
|
+
"valueDark": "rgba(255,255,255,0.12)",
|
|
334
|
+
"tailwindNamespace": "colors",
|
|
335
|
+
"description": "Used for borders on surfaces with a translucent effect"
|
|
336
|
+
},
|
|
337
|
+
{
|
|
338
|
+
"name": "border-translucent-outline",
|
|
339
|
+
"valueLight": "rgba(255,255,255,0.5)",
|
|
340
|
+
"valueDark": "rgba(255,255,255,0.1)",
|
|
341
|
+
"tailwindNamespace": "colors",
|
|
342
|
+
"description": "Used for outlinesof elements with a translucent effect"
|
|
343
|
+
},
|
|
344
|
+
{
|
|
345
|
+
"name": "text-default",
|
|
346
|
+
"valueLight": "rgba(25, 25, 25, 1)",
|
|
347
|
+
"valueDark": "rgba(242, 242, 242, 1)",
|
|
348
|
+
"tailwindNamespace": "colors",
|
|
349
|
+
"description": "Used for high emphasis text."
|
|
350
|
+
},
|
|
351
|
+
{
|
|
352
|
+
"name": "text-subdued",
|
|
353
|
+
"valueLight": "rgba(108, 108, 108, 1)",
|
|
354
|
+
"valueDark": "rgba(158, 158, 158, 1)",
|
|
355
|
+
"tailwindNamespace": "colors",
|
|
356
|
+
"description": "Used for low emphasis text."
|
|
357
|
+
},
|
|
358
|
+
{
|
|
359
|
+
"name": "text-disabled",
|
|
360
|
+
"valueLight": "rgba(0,0,0,0.2)",
|
|
361
|
+
"valueDark": "rgba(255,255,255,0.2)",
|
|
362
|
+
"tailwindNamespace": "colors",
|
|
363
|
+
"description": "Used if a text element is disabled."
|
|
364
|
+
},
|
|
365
|
+
{
|
|
366
|
+
"name": "text-dark",
|
|
367
|
+
"valueLight": "rgba(25, 25, 25, 1)",
|
|
368
|
+
"valueDark": "rgba(25, 25, 25, 1)",
|
|
369
|
+
"tailwindNamespace": "colors",
|
|
370
|
+
"description": "Used for low contrast decorative colors."
|
|
371
|
+
},
|
|
372
|
+
{
|
|
373
|
+
"name": "text-highlight",
|
|
374
|
+
"valueLight": "rgba(0, 55, 175, 1)",
|
|
375
|
+
"valueDark": "rgba(109, 168, 251, 1)",
|
|
376
|
+
"tailwindNamespace": "colors",
|
|
377
|
+
"description": "Used to highlight text."
|
|
378
|
+
},
|
|
379
|
+
{
|
|
380
|
+
"name": "text-critical",
|
|
381
|
+
"valueLight": "rgba(213, 6, 54, 1)",
|
|
382
|
+
"valueDark": "rgba(228, 100, 100, 1)",
|
|
383
|
+
"tailwindNamespace": "colors",
|
|
384
|
+
"description": "Used as critical text color"
|
|
385
|
+
},
|
|
386
|
+
{
|
|
387
|
+
"name": "text-success",
|
|
388
|
+
"valueLight": "rgba(8, 129, 8, 1)",
|
|
389
|
+
"valueDark": "rgba(80, 164, 80, 1)",
|
|
390
|
+
"tailwindNamespace": "colors",
|
|
391
|
+
"description": "Used as success text color"
|
|
392
|
+
},
|
|
393
|
+
{
|
|
394
|
+
"name": "text-warning",
|
|
395
|
+
"valueLight": "rgba(147, 88, 6, 1)",
|
|
396
|
+
"valueDark": "rgba(243, 183, 3, 1)",
|
|
397
|
+
"tailwindNamespace": "colors",
|
|
398
|
+
"description": "Used as warning text color"
|
|
399
|
+
},
|
|
400
|
+
{
|
|
401
|
+
"name": "text-info",
|
|
402
|
+
"valueLight": "rgba(20, 90, 245, 1)",
|
|
403
|
+
"valueDark": "rgba(100, 142, 233, 1)",
|
|
404
|
+
"tailwindNamespace": "colors",
|
|
405
|
+
"description": "Used as info text color"
|
|
406
|
+
},
|
|
407
|
+
{
|
|
408
|
+
"name": "text-on-action-primary",
|
|
409
|
+
"valueLight": "rgba(255, 255, 255, 1)",
|
|
410
|
+
"valueDark": "rgba(0, 0, 0, 1)",
|
|
411
|
+
"tailwindNamespace": "colors",
|
|
412
|
+
"description": "Used as a text color on containers with action primary color."
|
|
413
|
+
},
|
|
414
|
+
{
|
|
415
|
+
"name": "text-on-surface-highlight",
|
|
416
|
+
"valueLight": "rgba(23, 23, 23, 1)",
|
|
417
|
+
"valueDark": "rgba(242, 242, 242, 1)",
|
|
418
|
+
"tailwindNamespace": "colors",
|
|
419
|
+
"description": "Used as text color on containers with highlight color."
|
|
420
|
+
},
|
|
421
|
+
{
|
|
422
|
+
"name": "text-on-surface-highlight-subdued",
|
|
423
|
+
"valueLight": "rgba(106, 109, 116, 1)",
|
|
424
|
+
"valueDark": "rgba(150, 163, 191, 1)",
|
|
425
|
+
"tailwindNamespace": "colors",
|
|
426
|
+
"description": "Used as subdued text color on containers with highlight color."
|
|
427
|
+
},
|
|
428
|
+
{
|
|
429
|
+
"name": "text-on-status",
|
|
430
|
+
"valueLight": "rgba(255, 255, 255, 1)",
|
|
431
|
+
"valueDark": "rgba(0, 0, 0, 1)",
|
|
432
|
+
"tailwindNamespace": "colors",
|
|
433
|
+
"description": "Used as a text color on containers with a default status color except on warning."
|
|
434
|
+
},
|
|
435
|
+
{
|
|
436
|
+
"name": "text-on-image",
|
|
437
|
+
"valueLight": "rgba(255, 255, 255, 1)",
|
|
438
|
+
"valueDark": "rgba(255, 255, 255, 1)",
|
|
439
|
+
"tailwindNamespace": "colors",
|
|
440
|
+
"description": "Used as a text color on “Surface On Image/Default”."
|
|
441
|
+
},
|
|
442
|
+
{
|
|
443
|
+
"name": "icon-strong",
|
|
444
|
+
"valueLight": "rgba(25, 25, 25, 1)",
|
|
445
|
+
"valueDark": "rgba(242, 242, 242, 1)",
|
|
446
|
+
"tailwindNamespace": "colors",
|
|
447
|
+
"description": "Used for high emphasis icons."
|
|
448
|
+
},
|
|
449
|
+
{
|
|
450
|
+
"name": "icon-default",
|
|
451
|
+
"valueLight": "rgba(108, 108, 108, 1)",
|
|
452
|
+
"valueDark": "rgba(158, 158, 158, 1)",
|
|
453
|
+
"tailwindNamespace": "colors",
|
|
454
|
+
"description": "Used for low emphasis icons."
|
|
455
|
+
},
|
|
456
|
+
{
|
|
457
|
+
"name": "icon-disabled",
|
|
458
|
+
"valueLight": "rgba(0,0,0,0.2)",
|
|
459
|
+
"valueDark": "rgba(255,255,255,0.2)",
|
|
460
|
+
"tailwindNamespace": "colors",
|
|
461
|
+
"description": "Used if a icon element is disabled."
|
|
462
|
+
},
|
|
463
|
+
{
|
|
464
|
+
"name": "icon-dark",
|
|
465
|
+
"valueLight": "rgba(25, 25, 25, 1)",
|
|
466
|
+
"valueDark": "rgba(25, 25, 25, 1)",
|
|
467
|
+
"tailwindNamespace": "colors",
|
|
468
|
+
"description": "Used for low contrast decorative colors."
|
|
469
|
+
},
|
|
470
|
+
{
|
|
471
|
+
"name": "icon-highlight",
|
|
472
|
+
"valueLight": "rgba(0, 55, 175, 1)",
|
|
473
|
+
"valueDark": "rgba(109, 168, 251, 1)",
|
|
474
|
+
"tailwindNamespace": "colors",
|
|
475
|
+
"description": "Used to highlight icons."
|
|
476
|
+
},
|
|
477
|
+
{
|
|
478
|
+
"name": "icon-critical",
|
|
479
|
+
"valueLight": "rgba(213, 6, 54, 1)",
|
|
480
|
+
"valueDark": "rgba(228, 100, 100, 1)",
|
|
481
|
+
"tailwindNamespace": "colors",
|
|
482
|
+
"description": "Used as critical icon color"
|
|
483
|
+
},
|
|
484
|
+
{
|
|
485
|
+
"name": "icon-success",
|
|
486
|
+
"valueLight": "rgba(8, 129, 8, 1)",
|
|
487
|
+
"valueDark": "rgba(80, 164, 80, 1)",
|
|
488
|
+
"tailwindNamespace": "colors",
|
|
489
|
+
"description": "Used as success icon color"
|
|
490
|
+
},
|
|
491
|
+
{
|
|
492
|
+
"name": "icon-warning",
|
|
493
|
+
"valueLight": "rgba(147, 88, 6, 1)",
|
|
494
|
+
"valueDark": "rgba(243, 183, 3, 1)",
|
|
495
|
+
"tailwindNamespace": "colors",
|
|
496
|
+
"description": "Used as warning icon color"
|
|
497
|
+
},
|
|
498
|
+
{
|
|
499
|
+
"name": "icon-info",
|
|
500
|
+
"valueLight": "rgba(20, 90, 245, 1)",
|
|
501
|
+
"valueDark": "rgba(100, 142, 233, 1)",
|
|
502
|
+
"tailwindNamespace": "colors",
|
|
503
|
+
"description": "Used as info icon color"
|
|
504
|
+
},
|
|
505
|
+
{
|
|
506
|
+
"name": "icon-on-action-primary",
|
|
507
|
+
"valueLight": "rgba(255, 255, 255, 1)",
|
|
508
|
+
"valueDark": "rgba(0, 0, 0, 1)",
|
|
509
|
+
"tailwindNamespace": "colors",
|
|
510
|
+
"description": "Used as a icon color on containers with action primary color."
|
|
511
|
+
},
|
|
512
|
+
{
|
|
513
|
+
"name": "icon-on-surface-highlight",
|
|
514
|
+
"valueLight": "rgba(23, 23, 23, 1)",
|
|
515
|
+
"valueDark": "rgba(242, 242, 242, 1)",
|
|
516
|
+
"tailwindNamespace": "colors",
|
|
517
|
+
"description": "Used as icon color on containers with highlight color."
|
|
518
|
+
},
|
|
519
|
+
{
|
|
520
|
+
"name": "icon-on-surface-highlight-subdued",
|
|
521
|
+
"valueLight": "rgba(106, 109, 116, 1)",
|
|
522
|
+
"valueDark": "rgba(150, 163, 191, 1)",
|
|
523
|
+
"tailwindNamespace": "colors",
|
|
524
|
+
"description": "Used as subdued icon color on containers with highlight color."
|
|
525
|
+
},
|
|
526
|
+
{
|
|
527
|
+
"name": "icon-on-status",
|
|
528
|
+
"valueLight": "rgba(255, 255, 255, 1)",
|
|
529
|
+
"valueDark": "rgba(0, 0, 0, 1)",
|
|
530
|
+
"tailwindNamespace": "colors",
|
|
531
|
+
"description": "Used as a icon color on containers with a default status color except on warning."
|
|
532
|
+
},
|
|
533
|
+
{
|
|
534
|
+
"name": "icon-on-image",
|
|
535
|
+
"valueLight": "rgba(255, 255, 255, 1)",
|
|
536
|
+
"valueDark": "rgba(255, 255, 255, 1)",
|
|
537
|
+
"tailwindNamespace": "colors",
|
|
538
|
+
"description": "Used as a icon color on “Surface On Image/Default”."
|
|
539
|
+
},
|
|
540
|
+
{
|
|
541
|
+
"name": "action-primary-default",
|
|
542
|
+
"valueLight": "rgba(20, 90, 245, 1)",
|
|
543
|
+
"valueDark": "rgba(86, 143, 222, 1)",
|
|
544
|
+
"tailwindNamespace": "colors",
|
|
545
|
+
"description": "Used for containers that are high emphasis action elements."
|
|
546
|
+
},
|
|
547
|
+
{
|
|
548
|
+
"name": "action-primary-hovered",
|
|
549
|
+
"valueLight": "rgba(55, 115, 247, 1)",
|
|
550
|
+
"valueDark": "rgba(121, 164, 223, 1)",
|
|
551
|
+
"tailwindNamespace": "colors",
|
|
552
|
+
"description": "Used if a component with “Action Primary/Default” has a hovered state."
|
|
553
|
+
},
|
|
554
|
+
{
|
|
555
|
+
"name": "action-primary-pressed",
|
|
556
|
+
"valueLight": "rgba(91, 139, 248, 1)",
|
|
557
|
+
"valueDark": "rgba(150, 181, 224, 1)",
|
|
558
|
+
"tailwindNamespace": "colors",
|
|
559
|
+
"description": "Used if a component with “Action Primary/Default” has a pressed state."
|
|
560
|
+
},
|
|
561
|
+
{
|
|
562
|
+
"name": "action-primary-disabled",
|
|
563
|
+
"valueLight": "rgba(0,0,0,0.06)",
|
|
564
|
+
"valueDark": "rgba(43, 43, 43, 1)",
|
|
565
|
+
"tailwindNamespace": "colors",
|
|
566
|
+
"description": "Used if a component with “Action Primary/Default” has a disabled state."
|
|
567
|
+
},
|
|
568
|
+
{
|
|
569
|
+
"name": "action-critical-default",
|
|
570
|
+
"valueLight": "rgba(213, 6, 54, 1)",
|
|
571
|
+
"valueDark": "rgba(228, 100, 100, 1)",
|
|
572
|
+
"tailwindNamespace": "colors",
|
|
573
|
+
"description": "Used for containers that are critical and negative action elements."
|
|
574
|
+
},
|
|
575
|
+
{
|
|
576
|
+
"name": "action-critical-hovered",
|
|
577
|
+
"valueLight": "rgba(179, 39, 57, 1)",
|
|
578
|
+
"valueDark": "rgba(210, 123, 121, 1)",
|
|
579
|
+
"tailwindNamespace": "colors",
|
|
580
|
+
"description": "Used if a component with “Action Critical/Default” has a hovered state."
|
|
581
|
+
},
|
|
582
|
+
{
|
|
583
|
+
"name": "action-critical-pressed",
|
|
584
|
+
"valueLight": "rgba(159, 35, 52, 1)",
|
|
585
|
+
"valueDark": "rgba(215, 147, 145, 1)",
|
|
586
|
+
"tailwindNamespace": "colors",
|
|
587
|
+
"description": "Used if a component with “Action Critical/Default” has a pressed state."
|
|
588
|
+
},
|
|
589
|
+
{
|
|
590
|
+
"name": "action-critical-disabled",
|
|
591
|
+
"valueLight": "rgba(0,0,0,0.06)",
|
|
592
|
+
"valueDark": "rgba(43, 43, 43, 1)",
|
|
593
|
+
"tailwindNamespace": "colors",
|
|
594
|
+
"description": "Used if a component with “Action Primary/Default” has a disabled state."
|
|
595
|
+
},
|
|
596
|
+
{
|
|
597
|
+
"name": "action-neutral-default",
|
|
598
|
+
"valueLight": "rgba(0,0,0,0.06)",
|
|
599
|
+
"valueDark": "rgba(255,255,255,0.06)",
|
|
600
|
+
"tailwindNamespace": "colors",
|
|
601
|
+
"description": "Used for containers that are low emphasis action elements."
|
|
602
|
+
},
|
|
603
|
+
{
|
|
604
|
+
"name": "action-neutral-hovered",
|
|
605
|
+
"valueLight": "rgba(0,0,0,0.09)",
|
|
606
|
+
"valueDark": "rgba(255,255,255,0.09)",
|
|
607
|
+
"tailwindNamespace": "colors",
|
|
608
|
+
"description": "Used if a component with “Action Neutral/Default” has a hovered state."
|
|
609
|
+
},
|
|
610
|
+
{
|
|
611
|
+
"name": "action-neutral-pressed",
|
|
612
|
+
"valueLight": "rgba(0,0,0,0.12)",
|
|
613
|
+
"valueDark": "rgba(255,255,255,0.12)",
|
|
614
|
+
"tailwindNamespace": "colors",
|
|
615
|
+
"description": "Used if a component with “Action Neutral/Default” has a pressed state."
|
|
616
|
+
},
|
|
617
|
+
{
|
|
618
|
+
"name": "action-neutral-disabled",
|
|
619
|
+
"valueLight": "rgba(0,0,0,0.06)",
|
|
620
|
+
"valueDark": "rgba(255,255,255,0.06)",
|
|
621
|
+
"tailwindNamespace": "colors",
|
|
622
|
+
"description": "Used if a component with “Action Neutral/Default” has a disabled state."
|
|
623
|
+
},
|
|
624
|
+
{
|
|
625
|
+
"name": "interactive-primary-default",
|
|
626
|
+
"valueLight": "rgba(0, 61, 175, 1)",
|
|
627
|
+
"valueDark": "rgba(109, 168, 251, 1)",
|
|
628
|
+
"tailwindNamespace": "colors",
|
|
629
|
+
"description": "Used for icon and text that are high emphasis interactive elements."
|
|
630
|
+
},
|
|
631
|
+
{
|
|
632
|
+
"name": "interactive-primary-hovered",
|
|
633
|
+
"valueLight": "rgba(38, 85, 187, 1)",
|
|
634
|
+
"valueDark": "rgba(141, 188, 255, 1)",
|
|
635
|
+
"tailwindNamespace": "colors",
|
|
636
|
+
"description": "Used if a component with “Interactive Primary/Default” has a hovered state."
|
|
637
|
+
},
|
|
638
|
+
{
|
|
639
|
+
"name": "interactive-primary-pressed",
|
|
640
|
+
"valueLight": "rgba(77, 119, 199, 1)",
|
|
641
|
+
"valueDark": "rgba(182, 213, 255, 1)",
|
|
642
|
+
"tailwindNamespace": "colors",
|
|
643
|
+
"description": "Used if a component with “Interactive Primary/Default” has a pressed state."
|
|
644
|
+
},
|
|
645
|
+
{
|
|
646
|
+
"name": "interactive-primary-disabled",
|
|
647
|
+
"valueLight": "rgba(204, 205, 209, 1)",
|
|
648
|
+
"valueDark": "rgba(255,255,255,0.06)",
|
|
649
|
+
"tailwindNamespace": "colors",
|
|
650
|
+
"description": "Used if a component with “Interactive Primary/Default” has a disabled state."
|
|
651
|
+
},
|
|
652
|
+
{
|
|
653
|
+
"name": "interactive-critical-default",
|
|
654
|
+
"valueLight": "rgba(213, 6, 54, 1)",
|
|
655
|
+
"valueDark": "rgba(228, 100, 100, 1)",
|
|
656
|
+
"tailwindNamespace": "colors",
|
|
657
|
+
"description": "Used for icon and text that are critical or negative interactive elements."
|
|
658
|
+
},
|
|
659
|
+
{
|
|
660
|
+
"name": "interactive-critical-hovered",
|
|
661
|
+
"valueLight": "rgba(179, 39, 57, 1)",
|
|
662
|
+
"valueDark": "rgba(210, 123, 121, 1)",
|
|
663
|
+
"tailwindNamespace": "colors",
|
|
664
|
+
"description": "Used if a component with “Interactive Critical/Default” has a hovered state."
|
|
665
|
+
},
|
|
666
|
+
{
|
|
667
|
+
"name": "interactive-critical-pressed",
|
|
668
|
+
"valueLight": "rgba(159, 35, 52, 1)",
|
|
669
|
+
"valueDark": "rgba(215, 147, 145, 1)",
|
|
670
|
+
"tailwindNamespace": "colors",
|
|
671
|
+
"description": "Used if a component with “Interactive Critical/Default” has a pressed state."
|
|
672
|
+
},
|
|
673
|
+
{
|
|
674
|
+
"name": "interactive-critical-disabled",
|
|
675
|
+
"valueLight": "rgba(207, 207, 207, 1)",
|
|
676
|
+
"valueDark": "rgba(255,255,255,0.06)",
|
|
677
|
+
"tailwindNamespace": "colors",
|
|
678
|
+
"description": "Used if a component with “Interactive Critical/Default” has a disabled state."
|
|
679
|
+
},
|
|
680
|
+
{
|
|
681
|
+
"name": "interactive-neutral-default",
|
|
682
|
+
"valueLight": "rgba(0,0,0,0.6)",
|
|
683
|
+
"valueDark": "rgba(255,255,255,0.8)",
|
|
684
|
+
"tailwindNamespace": "colors",
|
|
685
|
+
"description": "Used for icon and text that are low emphasis interactive elements."
|
|
686
|
+
},
|
|
687
|
+
{
|
|
688
|
+
"name": "interactive-neutral-hovered",
|
|
689
|
+
"valueLight": "rgba(158, 158, 158, 1)",
|
|
690
|
+
"valueDark": "rgba(108, 108, 108, 1)",
|
|
691
|
+
"tailwindNamespace": "colors",
|
|
692
|
+
"description": "Used if a component with “Interactive Neutral/Default” has a hovered state."
|
|
693
|
+
},
|
|
694
|
+
{
|
|
695
|
+
"name": "interactive-neutral-pressed",
|
|
696
|
+
"valueLight": "rgba(158, 158, 158, 1)",
|
|
697
|
+
"valueDark": "rgba(108, 108, 108, 1)",
|
|
698
|
+
"tailwindNamespace": "colors",
|
|
699
|
+
"description": "Used if a component with “Interactive Neutral/Default” has a pressed state."
|
|
700
|
+
},
|
|
701
|
+
{
|
|
702
|
+
"name": "interactive-neutral-disabled",
|
|
703
|
+
"valueLight": "rgba(207, 207, 207, 1)",
|
|
704
|
+
"valueDark": "rgba(81, 81, 81, 1)",
|
|
705
|
+
"tailwindNamespace": "colors",
|
|
706
|
+
"description": "Used if a component with “Interactive Neutral/Default” has a disabled state."
|
|
707
|
+
},
|
|
708
|
+
{
|
|
709
|
+
"name": "focus-default",
|
|
710
|
+
"valueLight": "rgba(0, 55, 175, 1)",
|
|
711
|
+
"valueDark": "rgba(109, 168, 251, 1)",
|
|
712
|
+
"tailwindNamespace": "colors"
|
|
713
|
+
},
|
|
714
|
+
{
|
|
715
|
+
"name": "decorative-chilli-text",
|
|
716
|
+
"valueLight": "rgba(195, 28, 28, 1)",
|
|
717
|
+
"valueDark": "rgba(244, 120, 120, 1)",
|
|
718
|
+
"tailwindNamespace": "colors",
|
|
719
|
+
"description": "Used as a decorative color."
|
|
720
|
+
},
|
|
721
|
+
{
|
|
722
|
+
"name": "decorative-chilli-surface",
|
|
723
|
+
"valueLight": "rgba(195, 28, 28, 1)",
|
|
724
|
+
"valueDark": "rgba(244, 120, 120, 1)",
|
|
725
|
+
"tailwindNamespace": "colors",
|
|
726
|
+
"description": "Used as a decorative color."
|
|
727
|
+
},
|
|
728
|
+
{
|
|
729
|
+
"name": "decorative-chilli-surface-subdued",
|
|
730
|
+
"valueLight": "rgba(252, 231, 237, 1)",
|
|
731
|
+
"valueDark": "rgba(77, 45, 44, 1)",
|
|
732
|
+
"tailwindNamespace": "colors",
|
|
733
|
+
"description": "Used as a decorative color."
|
|
734
|
+
},
|
|
735
|
+
{
|
|
736
|
+
"name": "decorative-pumpkin-text",
|
|
737
|
+
"valueLight": "rgba(167, 76, 37, 1)",
|
|
738
|
+
"valueDark": "rgba(237, 153, 75, 1)",
|
|
739
|
+
"tailwindNamespace": "colors",
|
|
740
|
+
"description": "Used as a decorative color."
|
|
741
|
+
},
|
|
742
|
+
{
|
|
743
|
+
"name": "decorative-pumpkin-surface",
|
|
744
|
+
"valueLight": "rgba(245, 144, 49, 1)",
|
|
745
|
+
"valueDark": "rgba(237, 153, 75, 1)",
|
|
746
|
+
"tailwindNamespace": "colors",
|
|
747
|
+
"description": "Used as a decorative color."
|
|
748
|
+
},
|
|
749
|
+
{
|
|
750
|
+
"name": "decorative-pumpkin-surface-subdued",
|
|
751
|
+
"valueLight": "rgba(255, 227, 202, 1)",
|
|
752
|
+
"valueDark": "rgba(82, 56, 36, 1)",
|
|
753
|
+
"tailwindNamespace": "colors",
|
|
754
|
+
"description": "Used as a decorative color."
|
|
755
|
+
},
|
|
756
|
+
{
|
|
757
|
+
"name": "decorative-banana-text",
|
|
758
|
+
"valueLight": "rgba(154, 92, 0, 1)",
|
|
759
|
+
"valueDark": "rgba(209, 175, 41, 1)",
|
|
760
|
+
"tailwindNamespace": "colors",
|
|
761
|
+
"description": "Used as a decorative color."
|
|
762
|
+
},
|
|
763
|
+
{
|
|
764
|
+
"name": "decorative-banana-surface",
|
|
765
|
+
"valueLight": "rgba(234, 186, 42, 1)",
|
|
766
|
+
"valueDark": "rgba(209, 175, 41, 1)",
|
|
767
|
+
"tailwindNamespace": "colors",
|
|
768
|
+
"description": "Used as a decorative color."
|
|
769
|
+
},
|
|
770
|
+
{
|
|
771
|
+
"name": "decorative-banana-surface-subdued",
|
|
772
|
+
"valueLight": "rgba(250, 241, 200, 1)",
|
|
773
|
+
"valueDark": "rgba(77, 62, 30, 1)",
|
|
774
|
+
"tailwindNamespace": "colors",
|
|
775
|
+
"description": "Used as a decorative color."
|
|
776
|
+
},
|
|
777
|
+
{
|
|
778
|
+
"name": "decorative-radish-text",
|
|
779
|
+
"valueLight": "rgba(186, 29, 142, 1)",
|
|
780
|
+
"valueDark": "rgba(242, 120, 204, 1)",
|
|
781
|
+
"tailwindNamespace": "colors",
|
|
782
|
+
"description": "Used as a decorative color."
|
|
783
|
+
},
|
|
784
|
+
{
|
|
785
|
+
"name": "decorative-radish-surface",
|
|
786
|
+
"valueLight": "rgba(186, 29, 142, 1)",
|
|
787
|
+
"valueDark": "rgba(242, 120, 204, 1)",
|
|
788
|
+
"tailwindNamespace": "colors",
|
|
789
|
+
"description": "Used as a decorative color."
|
|
790
|
+
},
|
|
791
|
+
{
|
|
792
|
+
"name": "decorative-radish-surface-subdued",
|
|
793
|
+
"valueLight": "rgba(255, 221, 245, 1)",
|
|
794
|
+
"valueDark": "rgba(79, 48, 69, 1)",
|
|
795
|
+
"tailwindNamespace": "colors",
|
|
796
|
+
"description": "Used as a decorative color."
|
|
797
|
+
},
|
|
798
|
+
{
|
|
799
|
+
"name": "decorative-grape-text",
|
|
800
|
+
"valueLight": "rgba(130, 45, 164, 1)",
|
|
801
|
+
"valueDark": "rgba(214, 131, 251, 1)",
|
|
802
|
+
"tailwindNamespace": "colors",
|
|
803
|
+
"description": "Used as a decorative color."
|
|
804
|
+
},
|
|
805
|
+
{
|
|
806
|
+
"name": "decorative-grape-surface",
|
|
807
|
+
"valueLight": "rgba(130, 45, 164, 1)",
|
|
808
|
+
"valueDark": "rgba(214, 131, 251, 1)",
|
|
809
|
+
"tailwindNamespace": "colors",
|
|
810
|
+
"description": "Used as a decorative color."
|
|
811
|
+
},
|
|
812
|
+
{
|
|
813
|
+
"name": "decorative-grape-surface-subdued",
|
|
814
|
+
"valueLight": "rgba(233, 220, 255, 1)",
|
|
815
|
+
"valueDark": "rgba(75, 47, 98, 1)",
|
|
816
|
+
"tailwindNamespace": "colors",
|
|
817
|
+
"description": "Used as a decorative color."
|
|
818
|
+
},
|
|
819
|
+
{
|
|
820
|
+
"name": "decorative-kiwi-text",
|
|
821
|
+
"valueLight": "rgba(54, 119, 69, 1)",
|
|
822
|
+
"valueDark": "rgba(111, 200, 130, 1)",
|
|
823
|
+
"tailwindNamespace": "colors",
|
|
824
|
+
"description": "Used as a decorative color."
|
|
825
|
+
},
|
|
826
|
+
{
|
|
827
|
+
"name": "decorative-kiwi-surface",
|
|
828
|
+
"valueLight": "rgba(54, 119, 69, 1)",
|
|
829
|
+
"valueDark": "rgba(111, 200, 130, 1)",
|
|
830
|
+
"tailwindNamespace": "colors",
|
|
831
|
+
"description": "Used as a decorative color."
|
|
832
|
+
},
|
|
833
|
+
{
|
|
834
|
+
"name": "decorative-kiwi-surface-subdued",
|
|
835
|
+
"valueLight": "rgba(220, 247, 220, 1)",
|
|
836
|
+
"valueDark": "rgba(42, 70, 42, 1)",
|
|
837
|
+
"tailwindNamespace": "colors",
|
|
838
|
+
"description": "Used as a decorative color."
|
|
839
|
+
},
|
|
840
|
+
{
|
|
841
|
+
"name": "decorative-blueberry-text",
|
|
842
|
+
"valueLight": "rgba(63, 95, 167, 1)",
|
|
843
|
+
"valueDark": "rgba(122, 172, 240, 1)",
|
|
844
|
+
"tailwindNamespace": "colors",
|
|
845
|
+
"description": "Used as a decorative color."
|
|
846
|
+
},
|
|
847
|
+
{
|
|
848
|
+
"name": "decorative-blueberry-surface",
|
|
849
|
+
"valueLight": "rgba(63, 95, 167, 1)",
|
|
850
|
+
"valueDark": "rgba(122, 172, 240, 1)",
|
|
851
|
+
"tailwindNamespace": "colors",
|
|
852
|
+
"description": "Used as a decorative color."
|
|
853
|
+
},
|
|
854
|
+
{
|
|
855
|
+
"name": "decorative-blueberry-surface-subdued",
|
|
856
|
+
"valueLight": "rgba(230, 241, 255, 1)",
|
|
857
|
+
"valueDark": "rgba(41, 64, 91, 1)",
|
|
858
|
+
"tailwindNamespace": "colors",
|
|
859
|
+
"description": "Used as a decorative color."
|
|
860
|
+
},
|
|
861
|
+
{
|
|
862
|
+
"name": "state-hovered",
|
|
863
|
+
"valueLight": "rgba(0,0,0,0.06)",
|
|
864
|
+
"valueDark": "rgba(255,255,255,0.06)",
|
|
865
|
+
"tailwindNamespace": "colors",
|
|
866
|
+
"description": "Is used for general hovered states, e.g. list items"
|
|
867
|
+
},
|
|
868
|
+
{
|
|
869
|
+
"name": "state-pressed",
|
|
870
|
+
"valueLight": "rgba(0,0,0,0.09)",
|
|
871
|
+
"valueDark": "rgba(255,255,255,0.09)",
|
|
872
|
+
"tailwindNamespace": "colors",
|
|
873
|
+
"description": "Is used for general pressed states, e.g. list items"
|
|
874
|
+
}
|
|
875
|
+
],
|
|
876
|
+
"typography": [
|
|
877
|
+
{
|
|
878
|
+
"name": "font-size-xs",
|
|
879
|
+
"value": "0.75rem",
|
|
880
|
+
"tailwindNamespace": "fontSize"
|
|
881
|
+
},
|
|
882
|
+
{
|
|
883
|
+
"name": "font-size-sm",
|
|
884
|
+
"value": "0.875rem",
|
|
885
|
+
"tailwindNamespace": "fontSize",
|
|
886
|
+
"description": "Usually used for labels and captions"
|
|
887
|
+
},
|
|
888
|
+
{
|
|
889
|
+
"name": "font-size-base",
|
|
890
|
+
"value": "1rem",
|
|
891
|
+
"tailwindNamespace": "fontSize",
|
|
892
|
+
"description": "Usually used for the body, links and buttons "
|
|
893
|
+
},
|
|
894
|
+
{
|
|
895
|
+
"name": "font-size-lg",
|
|
896
|
+
"value": "1.125rem",
|
|
897
|
+
"tailwindNamespace": "fontSize",
|
|
898
|
+
"description": "Usually used as level 3 headline"
|
|
899
|
+
},
|
|
900
|
+
{
|
|
901
|
+
"name": "font-size-xl",
|
|
902
|
+
"value": "1.25rem",
|
|
903
|
+
"tailwindNamespace": "fontSize",
|
|
904
|
+
"description": "Usually used as level 2 headline"
|
|
905
|
+
},
|
|
906
|
+
{
|
|
907
|
+
"name": "font-size-2xl",
|
|
908
|
+
"value": "1.75rem",
|
|
909
|
+
"tailwindNamespace": "fontSize",
|
|
910
|
+
"description": "Usually used as main headline"
|
|
911
|
+
},
|
|
912
|
+
{
|
|
913
|
+
"name": "font-weight-normal",
|
|
914
|
+
"value": 400,
|
|
915
|
+
"tailwindNamespace": "fontWeight"
|
|
916
|
+
},
|
|
917
|
+
{
|
|
918
|
+
"name": "font-weight-medium",
|
|
919
|
+
"value": 500,
|
|
920
|
+
"tailwindNamespace": "fontWeight"
|
|
921
|
+
},
|
|
922
|
+
{
|
|
923
|
+
"name": "font-weight-semibold",
|
|
924
|
+
"value": 600,
|
|
925
|
+
"tailwindNamespace": "fontWeight"
|
|
926
|
+
},
|
|
927
|
+
{
|
|
928
|
+
"name": "font-weight-bold",
|
|
929
|
+
"value": 700,
|
|
930
|
+
"tailwindNamespace": "fontWeight"
|
|
931
|
+
},
|
|
932
|
+
{
|
|
933
|
+
"name": "line-height-xs",
|
|
934
|
+
"value": "1rem",
|
|
935
|
+
"tailwindNamespace": "lineHeight"
|
|
936
|
+
},
|
|
937
|
+
{
|
|
938
|
+
"name": "line-height-sm",
|
|
939
|
+
"value": "1.25rem",
|
|
940
|
+
"tailwindNamespace": "lineHeight"
|
|
941
|
+
},
|
|
942
|
+
{
|
|
943
|
+
"name": "line-height-base",
|
|
944
|
+
"value": "1.5rem",
|
|
945
|
+
"tailwindNamespace": "lineHeight"
|
|
946
|
+
},
|
|
947
|
+
{
|
|
948
|
+
"name": "line-height-lg",
|
|
949
|
+
"value": "1.5rem",
|
|
950
|
+
"tailwindNamespace": "lineHeight"
|
|
951
|
+
},
|
|
952
|
+
{
|
|
953
|
+
"name": "letter-spacing-normal",
|
|
954
|
+
"value": 0,
|
|
955
|
+
"tailwindNamespace": "letterSpacing"
|
|
956
|
+
},
|
|
957
|
+
{
|
|
958
|
+
"name": "decoration-underline",
|
|
959
|
+
"value": "underline"
|
|
960
|
+
},
|
|
961
|
+
{
|
|
962
|
+
"name": "decoration-none",
|
|
963
|
+
"value": "none"
|
|
964
|
+
},
|
|
965
|
+
{
|
|
966
|
+
"name": "font-family-text",
|
|
967
|
+
"value": "'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
|
|
968
|
+
"tailwindNamespace": "fontFamily"
|
|
969
|
+
},
|
|
970
|
+
{
|
|
971
|
+
"name": "font-family-code",
|
|
972
|
+
"value": "'Fira Mono', Courier, monospace",
|
|
973
|
+
"tailwindNamespace": "fontFamily"
|
|
974
|
+
},
|
|
975
|
+
{
|
|
976
|
+
"name": "font-family-text-japanese",
|
|
977
|
+
"value": "'Inter var experimental', 'Inter var', Hiragino Sans, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, Osaka, 'MS PGothic', sans-serif",
|
|
978
|
+
"tailwindNamespace": "fontFamily"
|
|
979
|
+
},
|
|
980
|
+
{
|
|
981
|
+
"name": "font-family-text-korean",
|
|
982
|
+
"value": "'Inter var experimental', 'Inter var', 'Microsoft JhengHei', 微軟正黑體, 'Microsoft JhengHei UI', 'Microsoft YaHei', 微軟雅黑, 宋体, SimSun, sans-serif",
|
|
983
|
+
"tailwindNamespace": "fontFamily"
|
|
984
|
+
},
|
|
985
|
+
{
|
|
986
|
+
"name": "font-family-text-chinese-traditional",
|
|
987
|
+
"value": "'Inter var experimental', 'Inter var', 'Microsoft JhengHei', 微軟正黑體, 'Microsoft JhengHei UI', 'Microsoft YaHei', 微軟雅黑, 宋体, SimSun, sans-serif",
|
|
988
|
+
"tailwindNamespace": "fontFamily"
|
|
989
|
+
},
|
|
990
|
+
{
|
|
991
|
+
"name": "font-family-text-chinese-simplified",
|
|
992
|
+
"value": "'Inter var experimental', 'Inter var', 'Microsoft YaHei New', 微软雅黑, 'Microsoft Yahei', 'Microsoft JhengHei', 宋体, SimSun, sans-serif",
|
|
993
|
+
"tailwindNamespace": "fontFamily"
|
|
994
|
+
},
|
|
995
|
+
{
|
|
996
|
+
"name": "font-family-text-arabic",
|
|
997
|
+
"value": "-apple-system, system-ui",
|
|
998
|
+
"tailwindNamespace": "fontFamily"
|
|
999
|
+
},
|
|
1000
|
+
{
|
|
1001
|
+
"name": "line-height-xl",
|
|
1002
|
+
"value": "1.75rem",
|
|
1003
|
+
"tailwindNamespace": "lineHeight"
|
|
1004
|
+
},
|
|
1005
|
+
{
|
|
1006
|
+
"name": "line-height-2xl",
|
|
1007
|
+
"value": "2.25rem",
|
|
1008
|
+
"tailwindNamespace": "lineHeight"
|
|
1009
|
+
}
|
|
1010
|
+
],
|
|
1011
|
+
"layout": [
|
|
1012
|
+
{
|
|
1013
|
+
"name": "border-radius-null",
|
|
1014
|
+
"value": 0,
|
|
1015
|
+
"tailwindNamespace": "borderRadius"
|
|
1016
|
+
},
|
|
1017
|
+
{
|
|
1018
|
+
"name": "border-radius-xs",
|
|
1019
|
+
"value": "0.125rem",
|
|
1020
|
+
"tailwindNamespace": "borderRadius"
|
|
1021
|
+
},
|
|
1022
|
+
{
|
|
1023
|
+
"name": "border-radius-s",
|
|
1024
|
+
"value": "0.25rem",
|
|
1025
|
+
"tailwindNamespace": "borderRadius"
|
|
1026
|
+
},
|
|
1027
|
+
{
|
|
1028
|
+
"name": "border-radius-sm",
|
|
1029
|
+
"value": "0.5rem",
|
|
1030
|
+
"tailwindNamespace": "borderRadius"
|
|
1031
|
+
},
|
|
1032
|
+
{
|
|
1033
|
+
"name": "border-radius-base",
|
|
1034
|
+
"value": "0.75rem",
|
|
1035
|
+
"tailwindNamespace": "borderRadius"
|
|
1036
|
+
},
|
|
1037
|
+
{
|
|
1038
|
+
"name": "border-radius-l",
|
|
1039
|
+
"value": "1rem",
|
|
1040
|
+
"tailwindNamespace": "borderRadius"
|
|
1041
|
+
},
|
|
1042
|
+
{
|
|
1043
|
+
"name": "border-radius-xl",
|
|
1044
|
+
"value": "1.25rem",
|
|
1045
|
+
"tailwindNamespace": "borderRadius"
|
|
1046
|
+
},
|
|
1047
|
+
{
|
|
1048
|
+
"name": "border-radius-full-round",
|
|
1049
|
+
"value": "6249.9375rem",
|
|
1050
|
+
"tailwindNamespace": "borderRadius"
|
|
1051
|
+
},
|
|
1052
|
+
{
|
|
1053
|
+
"name": "space-0",
|
|
1054
|
+
"value": 0,
|
|
1055
|
+
"tailwindNamespace": "spacing"
|
|
1056
|
+
},
|
|
1057
|
+
{
|
|
1058
|
+
"name": "space-2",
|
|
1059
|
+
"value": "0.125rem",
|
|
1060
|
+
"tailwindNamespace": "spacing"
|
|
1061
|
+
},
|
|
1062
|
+
{
|
|
1063
|
+
"name": "space-4",
|
|
1064
|
+
"value": "0.25rem",
|
|
1065
|
+
"tailwindNamespace": "spacing"
|
|
1066
|
+
},
|
|
1067
|
+
{
|
|
1068
|
+
"name": "space-8",
|
|
1069
|
+
"value": "0.5rem",
|
|
1070
|
+
"tailwindNamespace": "spacing"
|
|
1071
|
+
},
|
|
1072
|
+
{
|
|
1073
|
+
"name": "space-12",
|
|
1074
|
+
"value": "0.75rem",
|
|
1075
|
+
"tailwindNamespace": "spacing"
|
|
1076
|
+
},
|
|
1077
|
+
{
|
|
1078
|
+
"name": "space-16",
|
|
1079
|
+
"value": "1rem",
|
|
1080
|
+
"tailwindNamespace": "spacing"
|
|
1081
|
+
},
|
|
1082
|
+
{
|
|
1083
|
+
"name": "space-20",
|
|
1084
|
+
"value": "1.25rem",
|
|
1085
|
+
"tailwindNamespace": "spacing"
|
|
1086
|
+
},
|
|
1087
|
+
{
|
|
1088
|
+
"name": "space-24",
|
|
1089
|
+
"value": "1.5rem",
|
|
1090
|
+
"tailwindNamespace": "spacing"
|
|
1091
|
+
},
|
|
1092
|
+
{
|
|
1093
|
+
"name": "space-32",
|
|
1094
|
+
"value": "2rem",
|
|
1095
|
+
"tailwindNamespace": "spacing"
|
|
1096
|
+
},
|
|
1097
|
+
{
|
|
1098
|
+
"name": "space-40",
|
|
1099
|
+
"value": "2.5rem",
|
|
1100
|
+
"tailwindNamespace": "spacing"
|
|
1101
|
+
},
|
|
1102
|
+
{
|
|
1103
|
+
"name": "space-48",
|
|
1104
|
+
"value": "3rem",
|
|
1105
|
+
"tailwindNamespace": "spacing"
|
|
1106
|
+
},
|
|
1107
|
+
{
|
|
1108
|
+
"name": "space-64",
|
|
1109
|
+
"value": "4rem",
|
|
1110
|
+
"tailwindNamespace": "spacing"
|
|
1111
|
+
},
|
|
1112
|
+
{
|
|
1113
|
+
"name": "border-width-0",
|
|
1114
|
+
"value": 0,
|
|
1115
|
+
"tailwindNamespace": "borderWidth"
|
|
1116
|
+
},
|
|
1117
|
+
{
|
|
1118
|
+
"name": "border-width-default",
|
|
1119
|
+
"value": "0.0625rem",
|
|
1120
|
+
"tailwindNamespace": "borderWidth"
|
|
1121
|
+
},
|
|
1122
|
+
{
|
|
1123
|
+
"name": "z-0",
|
|
1124
|
+
"value": "0"
|
|
1125
|
+
},
|
|
1126
|
+
{
|
|
1127
|
+
"name": "z-10",
|
|
1128
|
+
"value": "10"
|
|
1129
|
+
},
|
|
1130
|
+
{
|
|
1131
|
+
"name": "z-20",
|
|
1132
|
+
"value": "20"
|
|
1133
|
+
},
|
|
1134
|
+
{
|
|
1135
|
+
"name": "z-30",
|
|
1136
|
+
"value": "30"
|
|
1137
|
+
},
|
|
1138
|
+
{
|
|
1139
|
+
"name": "z-40",
|
|
1140
|
+
"value": "40"
|
|
1141
|
+
},
|
|
1142
|
+
{
|
|
1143
|
+
"name": "z-50",
|
|
1144
|
+
"value": "50"
|
|
1145
|
+
},
|
|
1146
|
+
{
|
|
1147
|
+
"name": "z-auto",
|
|
1148
|
+
"value": "auto"
|
|
1149
|
+
},
|
|
1150
|
+
{
|
|
1151
|
+
"name": "blur-s",
|
|
1152
|
+
"value": "4px"
|
|
1153
|
+
},
|
|
1154
|
+
{
|
|
1155
|
+
"name": "blur-m",
|
|
1156
|
+
"value": "8px"
|
|
1157
|
+
},
|
|
1158
|
+
{
|
|
1159
|
+
"name": "blur-l",
|
|
1160
|
+
"value": "16px"
|
|
1161
|
+
},
|
|
1162
|
+
{
|
|
1163
|
+
"name": "shadow-level-1",
|
|
1164
|
+
"value": [
|
|
1165
|
+
{
|
|
1166
|
+
"color": "rgba(23,23,23,0.04)",
|
|
1167
|
+
"type": "dropShadow",
|
|
1168
|
+
"x": "0",
|
|
1169
|
+
"y": "4",
|
|
1170
|
+
"blur": "16",
|
|
1171
|
+
"spread": "0"
|
|
1172
|
+
},
|
|
1173
|
+
{
|
|
1174
|
+
"color": "rgba(23,23,23,0.04)",
|
|
1175
|
+
"type": "dropShadow",
|
|
1176
|
+
"x": "0",
|
|
1177
|
+
"y": "1",
|
|
1178
|
+
"blur": "4",
|
|
1179
|
+
"spread": "0"
|
|
1180
|
+
}
|
|
1181
|
+
]
|
|
1182
|
+
},
|
|
1183
|
+
{
|
|
1184
|
+
"name": "shadow-level-2",
|
|
1185
|
+
"value": [
|
|
1186
|
+
{
|
|
1187
|
+
"color": "rgba(23,23,23,0.2)",
|
|
1188
|
+
"type": "dropShadow",
|
|
1189
|
+
"x": "0",
|
|
1190
|
+
"y": "4",
|
|
1191
|
+
"blur": "12",
|
|
1192
|
+
"spread": "0"
|
|
1193
|
+
}
|
|
1194
|
+
]
|
|
1195
|
+
},
|
|
1196
|
+
{
|
|
1197
|
+
"name": "shadow-level-3",
|
|
1198
|
+
"value": [
|
|
1199
|
+
{
|
|
1200
|
+
"color": "rgba(23,23,23,0.12)",
|
|
1201
|
+
"type": "dropShadow",
|
|
1202
|
+
"x": "0",
|
|
1203
|
+
"y": "12",
|
|
1204
|
+
"blur": "32",
|
|
1205
|
+
"spread": "0"
|
|
1206
|
+
},
|
|
1207
|
+
{
|
|
1208
|
+
"color": "rgba(23,23,23,0.08)",
|
|
1209
|
+
"type": "dropShadow",
|
|
1210
|
+
"x": "0",
|
|
1211
|
+
"y": "4",
|
|
1212
|
+
"blur": "12",
|
|
1213
|
+
"spread": "0"
|
|
1214
|
+
}
|
|
1215
|
+
]
|
|
1216
|
+
}
|
|
1217
|
+
]
|
|
1218
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@getflip/swirl-ai",
|
|
3
|
-
"version": "0.492.
|
|
3
|
+
"version": "0.492.1",
|
|
4
4
|
"description": "Swirl Design System AI package with artifacts for AI agents",
|
|
5
5
|
"author": "Flip GmbH",
|
|
6
6
|
"repository": {
|
|
@@ -26,7 +26,8 @@
|
|
|
26
26
|
"lint": "tsc --noEmit"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
|
-
"@getflip/swirl-components": "0.492.
|
|
29
|
+
"@getflip/swirl-components": "0.492.1",
|
|
30
|
+
"@getflip/swirl-tokens": "2.14.2",
|
|
30
31
|
"@types/node": "25.3.0",
|
|
31
32
|
"tsx": "^4.7.0",
|
|
32
33
|
"typescript": "5.9.3"
|