@clickhouse/click-ui 0.0.0

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 (151) hide show
  1. package/.eslintrc.cjs +32 -0
  2. package/.github/workflows/deployment.yml +34 -0
  3. package/.storybook/main.ts +18 -0
  4. package/.storybook/preview-head.html +4 -0
  5. package/.storybook/preview.tsx +67 -0
  6. package/README.md +11 -0
  7. package/app/.babelrc +27 -0
  8. package/app/.eslintrc.json +6 -0
  9. package/app/.storybook/main.ts +17 -0
  10. package/app/.storybook/preview.tsx +26 -0
  11. package/app/README.md +38 -0
  12. package/app/next.config.js +6 -0
  13. package/app/package-lock.json +28711 -0
  14. package/app/package.json +44 -0
  15. package/app/public/favicon.ico +0 -0
  16. package/app/public/next.svg +1 -0
  17. package/app/public/vercel.svg +1 -0
  18. package/app/src/assets/RightArrow/right-arrow.tsx +17 -0
  19. package/app/src/assets/S3Logo/s3-logo.tsx +31 -0
  20. package/app/src/assets/amazon_s3.svg +9 -0
  21. package/app/src/assets/arrow.svg +3 -0
  22. package/app/src/globals.d.ts +4 -0
  23. package/app/src/pages/_app.tsx +8 -0
  24. package/app/src/pages/_document.tsx +17 -0
  25. package/app/src/pages/api/hello.ts +13 -0
  26. package/app/src/pages/index.tsx +141 -0
  27. package/app/src/pages/label.tsx +27 -0
  28. package/app/src/stories/assets/code-brackets.svg +1 -0
  29. package/app/src/stories/assets/colors.svg +1 -0
  30. package/app/src/stories/assets/comments.svg +1 -0
  31. package/app/src/stories/assets/direction.svg +1 -0
  32. package/app/src/stories/assets/flow.svg +1 -0
  33. package/app/src/stories/assets/plugin.svg +1 -0
  34. package/app/src/stories/assets/repo.svg +1 -0
  35. package/app/src/stories/assets/stackalt.svg +1 -0
  36. package/app/src/styles/Home.module.css +235 -0
  37. package/app/src/styles/globals.css +111 -0
  38. package/app/src/styles/types.ts +1031 -0
  39. package/app/src/styles/variables.classic.css +16 -0
  40. package/app/src/styles/variables.classic.json +31 -0
  41. package/app/src/styles/variables.css +763 -0
  42. package/app/src/styles/variables.dark.css +135 -0
  43. package/app/src/styles/variables.dark.json +339 -0
  44. package/app/src/styles/variables.json +1029 -0
  45. package/app/src/styles/variables.light.css +203 -0
  46. package/app/src/styles/variables.light.json +478 -0
  47. package/app/tokens/themes/$metadata.json +9 -0
  48. package/app/tokens/themes/$themes.json +1 -0
  49. package/app/tokens/themes/classic.json +58 -0
  50. package/app/tokens/themes/component.json +868 -0
  51. package/app/tokens/themes/dark.json +937 -0
  52. package/app/tokens/themes/light.json +1380 -0
  53. package/app/tokens/themes/primitives.json +859 -0
  54. package/app/tsconfig.json +23 -0
  55. package/build-tokens.js +131 -0
  56. package/index.html +17 -0
  57. package/jest.config.ts +11 -0
  58. package/package.json +77 -0
  59. package/public/vite.svg +1 -0
  60. package/src/App.css +1 -0
  61. package/src/App.module.css +235 -0
  62. package/src/App.tsx +154 -0
  63. package/src/assets/RightArrow/RightArrow.tsx +17 -0
  64. package/src/assets/S3Logo/S3Logo.tsx +31 -0
  65. package/src/assets/react.svg +1 -0
  66. package/src/components/Accordion/Accordion.stories.tsx +78 -0
  67. package/src/components/Accordion/Accordion.test.tsx +46 -0
  68. package/src/components/Accordion/Accordion.tsx +118 -0
  69. package/src/components/Badge/Badge.stories.ts +14 -0
  70. package/src/components/Badge/Badge.test.tsx +11 -0
  71. package/src/components/Badge/Badge.tsx +24 -0
  72. package/src/components/BigStat/BigStat.stories.ts +15 -0
  73. package/src/components/BigStat/BigStat.tsx +37 -0
  74. package/src/components/Button/Button.stories.ts +82 -0
  75. package/src/components/Button/Button.test.tsx +32 -0
  76. package/src/components/Button/Button.tsx +97 -0
  77. package/src/components/ButtonGroup/ButtonGroup.stories.ts +14 -0
  78. package/src/components/ButtonGroup/ButtonGroup.tsx +78 -0
  79. package/src/components/Card/Card.stories.ts +19 -0
  80. package/src/components/Card/Card.tsx +107 -0
  81. package/src/components/FormField/FormField.stories.ts +14 -0
  82. package/src/components/FormField/FormField.tsx +22 -0
  83. package/src/components/Icon/Icon.stories.ts +46 -0
  84. package/src/components/Icon/Icon.tsx +90 -0
  85. package/src/components/Icon/types.ts +18 -0
  86. package/src/components/IconButton/IconButton.stories.ts +16 -0
  87. package/src/components/IconButton/IconButton.tsx +94 -0
  88. package/src/components/SidebarNavigationItem/SidebarNavigationItem.stories.tsx +28 -0
  89. package/src/components/SidebarNavigationItem/SidebarNavigationItem.tsx +112 -0
  90. package/src/components/Switch/Switch.stories.ts +14 -0
  91. package/src/components/Switch/Switch.tsx +106 -0
  92. package/src/components/Tabs/Tabs.stories.tsx +71 -0
  93. package/src/components/Tabs/Tabs.test.tsx +86 -0
  94. package/src/components/Tabs/Tabs.tsx +82 -0
  95. package/src/components/icons/ChatIcon.tsx +22 -0
  96. package/src/components/icons/ChevronDown.tsx +6 -0
  97. package/src/components/icons/ChevronRight.tsx +20 -0
  98. package/src/components/icons/DatabaseIcon.tsx +33 -0
  99. package/src/components/icons/FilterIcon.tsx +24 -0
  100. package/src/components/icons/Flags/EuropeanUnion.tsx +174 -0
  101. package/src/components/icons/Flags/Germany.tsx +25 -0
  102. package/src/components/icons/Flags/India.tsx +48 -0
  103. package/src/components/icons/Flags/Ireland.tsx +32 -0
  104. package/src/components/icons/Flags/Netherlands.tsx +29 -0
  105. package/src/components/icons/Flags/Singapore.tsx +43 -0
  106. package/src/components/icons/Flags/UnitedKingdom.tsx +32 -0
  107. package/src/components/icons/Flags/UnitedStates.tsx +26 -0
  108. package/src/components/icons/Flags/index.tsx +46 -0
  109. package/src/components/icons/HistoryIcon.tsx +28 -0
  110. package/src/components/icons/Icons.mdx +36 -0
  111. package/src/components/icons/InsertRowIcon.tsx +36 -0
  112. package/src/components/icons/SortAltIcon.tsx +24 -0
  113. package/src/components/icons/UserIcon.tsx +17 -0
  114. package/src/components/icons/UsersIcon.tsx +43 -0
  115. package/src/components/index.ts +14 -0
  116. package/src/components/types.ts +1 -0
  117. package/src/index.css +9 -0
  118. package/src/index.ts +2 -0
  119. package/src/main.tsx +11 -0
  120. package/src/stories/assets/code-brackets.svg +1 -0
  121. package/src/stories/assets/colors.svg +1 -0
  122. package/src/stories/assets/comments.svg +1 -0
  123. package/src/stories/assets/direction.svg +1 -0
  124. package/src/stories/assets/flow.svg +1 -0
  125. package/src/stories/assets/plugin.svg +1 -0
  126. package/src/stories/assets/repo.svg +1 -0
  127. package/src/stories/assets/stackalt.svg +1 -0
  128. package/src/styles/Home.module.css +235 -0
  129. package/src/styles/globals.css +111 -0
  130. package/src/styles/types.ts +1669 -0
  131. package/src/styles/variables.classic.css +16 -0
  132. package/src/styles/variables.classic.json +31 -0
  133. package/src/styles/variables.css +763 -0
  134. package/src/styles/variables.dark.css +135 -0
  135. package/src/styles/variables.dark.json +576 -0
  136. package/src/styles/variables.json +1667 -0
  137. package/src/styles/variables.light.css +203 -0
  138. package/src/styles/variables.light.json +789 -0
  139. package/src/theme/index.ts +22 -0
  140. package/src/theme/theme.tsx +28 -0
  141. package/src/vite-env.d.ts +1 -0
  142. package/tokens/themes/$metadata.json +9 -0
  143. package/tokens/themes/$themes.json +1 -0
  144. package/tokens/themes/classic.json +58 -0
  145. package/tokens/themes/component.json +1567 -0
  146. package/tokens/themes/dark.json +1450 -0
  147. package/tokens/themes/light.json +2059 -0
  148. package/tokens/themes/primitives.json +863 -0
  149. package/tsconfig.json +27 -0
  150. package/tsconfig.node.json +10 -0
  151. package/vite.config.ts +38 -0
package/tokens/themes/light.json ADDED
@@ -0,0 +1,2059 @@
1
+ {
2
+ "click": {
3
+ "global": {
4
+ "color": {
5
+ "stroke": {
6
+ "default": {
7
+ "value": "{palette.slate.100}",
8
+ "type": "color",
9
+ "increased": {
10
+ "value": "#cccdcf",
11
+ "type": "color"
12
+ },
13
+ "muted": {
14
+ "value": "#e6e7e9",
15
+ "type": "color"
16
+ }
17
+ },
18
+ "muted": {
19
+ "value": "{palette.slate.100}",
20
+ "type": "color",
21
+ "increased": {
22
+ "value": "#cccdcf",
23
+ "type": "color"
24
+ },
25
+ "muted": {
26
+ "value": "#e6e7e9",
27
+ "type": "color"
28
+ }
29
+ },
30
+ "intense": {
31
+ "value": "{palette.slate.300}",
32
+ "type": "color",
33
+ "increased": {
34
+ "value": "#cccdcf",
35
+ "type": "color"
36
+ },
37
+ "muted": {
38
+ "value": "#e6e7e9",
39
+ "type": "color"
40
+ }
41
+ }
42
+ },
43
+ "accent": {
44
+ "default": {
45
+ "value": "{palette.neutral.900}",
46
+ "type": "color"
47
+ }
48
+ },
49
+ "background": {
50
+ "default": {
51
+ "value": "{palette.neutral.0}",
52
+ "type": "color"
53
+ },
54
+ "muted": {
55
+ "value": "{palette.slate.50}",
56
+ "type": "color"
57
+ }
58
+ },
59
+ "text": {
60
+ "default": {
61
+ "value": "{palette.slate.900}",
62
+ "type": "color"
63
+ },
64
+ "muted": {
65
+ "value": "{palette.slate.600}",
66
+ "type": "color"
67
+ },
68
+ "link": {
69
+ "default": {
70
+ "value": "{palette.info.400}",
71
+ "type": "color"
72
+ },
73
+ "hover": {
74
+ "value": "{palette.info.600}",
75
+ "type": "color"
76
+ }
77
+ }
78
+ },
79
+ "outline": {
80
+ "default": {
81
+ "value": "{palette.info.400}",
82
+ "type": "color"
83
+ }
84
+ }
85
+ }
86
+ },
87
+ "accordion": {
88
+ "color": {
89
+ "label": {
90
+ "default": {
91
+ "value": "{click.global.color.text.default}",
92
+ "type": "color"
93
+ },
94
+ "hover": {
95
+ "value": "{click.global.color.text.default}",
96
+ "type": "color",
97
+ "$extensions": {
98
+ "studio.tokens": {
99
+ "modify": {
100
+ "type": "lighten",
101
+ "value": "0.075",
102
+ "space": "lch"
103
+ }
104
+ }
105
+ }
106
+ },
107
+ "active": {
108
+ "value": "{click.global.color.text.default}",
109
+ "type": "color"
110
+ }
111
+ },
112
+ "icon": {
113
+ "default": {
114
+ "value": "{click.accordion.color.label.default}",
115
+ "type": "color"
116
+ },
117
+ "hover": {
118
+ "value": "{click.accordion.color.label.default}",
119
+ "type": "color",
120
+ "$extensions": {
121
+ "studio.tokens": {
122
+ "modify": {
123
+ "type": "lighten",
124
+ "value": "0.075",
125
+ "space": "lch"
126
+ }
127
+ }
128
+ }
129
+ },
130
+ "active": {
131
+ "value": "{click.accordion.color.label.default}",
132
+ "type": "color"
133
+ }
134
+ }
135
+ }
136
+ },
137
+ "alert": {
138
+ "color": {
139
+ "background": {
140
+ "default": {
141
+ "value": "{click.global.color.background.default}",
142
+ "type": "color"
143
+ },
144
+ "success": {
145
+ "value": "{click.feedback.color.success.background}",
146
+ "type": "color"
147
+ },
148
+ "neutral": {
149
+ "value": "{click.feedback.color.neutral.background}",
150
+ "type": "color"
151
+ },
152
+ "danger": {
153
+ "value": "{click.feedback.color.danger.background}",
154
+ "type": "color"
155
+ },
156
+ "warning": {
157
+ "value": "{click.feedback.color.warning.background}",
158
+ "type": "color"
159
+ },
160
+ "info": {
161
+ "value": "{click.feedback.color.info.background}",
162
+ "type": "color"
163
+ }
164
+ },
165
+ "text": {
166
+ "default": {
167
+ "value": "{click.global.color.text.muted}",
168
+ "type": "color"
169
+ },
170
+ "success": {
171
+ "value": "{click.feedback.color.success.foreground}",
172
+ "type": "color"
173
+ },
174
+ "neutral": {
175
+ "value": "{click.feedback.color.neutral.foreground}",
176
+ "type": "color"
177
+ },
178
+ "danger": {
179
+ "value": "{click.feedback.color.danger.foreground}",
180
+ "type": "color"
181
+ },
182
+ "warning": {
183
+ "value": "{click.feedback.color.warning.foreground}",
184
+ "type": "color"
185
+ },
186
+ "info": {
187
+ "value": "{click.feedback.color.info.foreground}",
188
+ "type": "color"
189
+ }
190
+ },
191
+ "iconBackground": {
192
+ "default": {
193
+ "value": "{click.global.color.background.default}",
194
+ "type": "color"
195
+ },
196
+ "success": {
197
+ "value": "{click.feedback.color.success.background}",
198
+ "type": "color",
199
+ "$extensions": {
200
+ "studio.tokens": {
201
+ "modify": {
202
+ "type": "darken",
203
+ "value": "0.03",
204
+ "space": "lch"
205
+ }
206
+ }
207
+ }
208
+ },
209
+ "neutral": {
210
+ "value": "{click.feedback.color.neutral.background}",
211
+ "type": "color",
212
+ "$extensions": {
213
+ "studio.tokens": {
214
+ "modify": {
215
+ "type": "darken",
216
+ "value": "0.03",
217
+ "space": "lch"
218
+ }
219
+ }
220
+ }
221
+ },
222
+ "danger": {
223
+ "value": "{click.feedback.color.danger.background}",
224
+ "type": "color",
225
+ "$extensions": {
226
+ "studio.tokens": {
227
+ "modify": {
228
+ "type": "darken",
229
+ "value": "0.03",
230
+ "space": "lch"
231
+ }
232
+ }
233
+ }
234
+ },
235
+ "warning": {
236
+ "value": "{click.alert.color.background.warning}",
237
+ "type": "color",
238
+ "$extensions": {
239
+ "studio.tokens": {
240
+ "modify": {
241
+ "type": "darken",
242
+ "value": "0.03",
243
+ "space": "lch"
244
+ }
245
+ }
246
+ }
247
+ },
248
+ "info": {
249
+ "value": "{click.alert.color.background.info}",
250
+ "type": "color",
251
+ "$extensions": {
252
+ "studio.tokens": {
253
+ "modify": {
254
+ "type": "darken",
255
+ "value": "0.03",
256
+ "space": "lch"
257
+ }
258
+ }
259
+ }
260
+ }
261
+ },
262
+ "iconForeground": {
263
+ "default": {
264
+ "value": "{click.global.color.text.muted}",
265
+ "type": "color"
266
+ },
267
+ "success": {
268
+ "value": "{click.feedback.color.success.foreground}",
269
+ "type": "color",
270
+ "$extensions": {
271
+ "studio.tokens": {
272
+ "modify": {
273
+ "type": "alpha",
274
+ "value": "0.75",
275
+ "space": "lch"
276
+ }
277
+ }
278
+ }
279
+ },
280
+ "neutral": {
281
+ "value": "{click.feedback.color.neutral.foreground}",
282
+ "type": "color",
283
+ "$extensions": {
284
+ "studio.tokens": {
285
+ "modify": {
286
+ "type": "alpha",
287
+ "value": "0.75",
288
+ "space": "lch"
289
+ }
290
+ }
291
+ }
292
+ },
293
+ "danger": {
294
+ "value": "{click.feedback.color.danger.foreground}",
295
+ "type": "color",
296
+ "$extensions": {
297
+ "studio.tokens": {
298
+ "modify": {
299
+ "type": "alpha",
300
+ "value": "0.75",
301
+ "space": "lch"
302
+ }
303
+ }
304
+ }
305
+ },
306
+ "warning": {
307
+ "value": "{click.feedback.color.warning.foreground}",
308
+ "type": "color",
309
+ "$extensions": {
310
+ "studio.tokens": {
311
+ "modify": {
312
+ "type": "alpha",
313
+ "value": "0.75",
314
+ "space": "lch"
315
+ }
316
+ }
317
+ }
318
+ },
319
+ "info": {
320
+ "value": "{click.alert.color.text.info}",
321
+ "type": "color",
322
+ "$extensions": {
323
+ "studio.tokens": {
324
+ "modify": {
325
+ "type": "alpha",
326
+ "value": "0.75",
327
+ "space": "lch"
328
+ }
329
+ }
330
+ }
331
+ }
332
+ }
333
+ }
334
+ },
335
+ "badge": {
336
+ "color": {
337
+ "background": {
338
+ "default": {
339
+ "value": "{click.global.color.background.default}",
340
+ "type": "color"
341
+ },
342
+ "success": {
343
+ "value": "{click.feedback.color.success.background}",
344
+ "type": "color"
345
+ },
346
+ "neutral": {
347
+ "value": "{click.feedback.color.neutral.background}",
348
+ "type": "color"
349
+ },
350
+ "danger": {
351
+ "value": "{click.feedback.color.danger.background}",
352
+ "type": "color"
353
+ },
354
+ "disabled": {
355
+ "value": "{click.card.color.background.disabled}",
356
+ "type": "color"
357
+ }
358
+ },
359
+ "text": {
360
+ "default": {
361
+ "value": "{click.global.color.text.muted}",
362
+ "type": "color"
363
+ },
364
+ "success": {
365
+ "value": "{click.feedback.color.success.foreground}",
366
+ "type": "color"
367
+ },
368
+ "neutral": {
369
+ "value": "{click.feedback.color.neutral.foreground}",
370
+ "type": "color"
371
+ },
372
+ "danger": {
373
+ "value": "{click.feedback.color.danger.foreground}",
374
+ "type": "color"
375
+ },
376
+ "disabled": {
377
+ "value": "{click.button.basic.color.disabled.text.default}",
378
+ "type": "color"
379
+ }
380
+ },
381
+ "stroke": {
382
+ "default": {
383
+ "value": "{click.global.color.stroke.default}",
384
+ "type": "color"
385
+ },
386
+ "success": {
387
+ "value": "{click.feedback.color.success.background}",
388
+ "type": "color"
389
+ },
390
+ "neutral": {
391
+ "value": "{click.feedback.color.neutral.background}",
392
+ "type": "color"
393
+ },
394
+ "danger": {
395
+ "value": "{click.feedback.color.danger.background}",
396
+ "type": "color"
397
+ },
398
+ "disabled": {
399
+ "value": "{click.card.color.stroke.disabled}",
400
+ "type": "color",
401
+ "$extensions": {
402
+ "studio.tokens": {
403
+ "modify": {
404
+ "type": "darken",
405
+ "value": "0.05",
406
+ "space": "lch"
407
+ }
408
+ }
409
+ }
410
+ }
411
+ }
412
+ }
413
+ },
414
+ "big-stat": {
415
+ "color": {
416
+ "stroke": {
417
+ "default": {
418
+ "value": "{click.global.color.stroke.default}",
419
+ "type": "color"
420
+ }
421
+ },
422
+ "background": {
423
+ "default": {
424
+ "value": "{click.global.color.background.default}",
425
+ "type": "color"
426
+ }
427
+ },
428
+ "label": {
429
+ "default": {
430
+ "value": "{click.global.color.text.muted}",
431
+ "type": "color"
432
+ }
433
+ },
434
+ "large-value": {
435
+ "default": {
436
+ "value": "{click.global.color.text.default}",
437
+ "type": "color"
438
+ }
439
+ }
440
+ }
441
+ },
442
+ "button": {
443
+ "basic": {
444
+ "color": {
445
+ "primary": {
446
+ "background": {
447
+ "default": {
448
+ "value": "{palette.slate.800}",
449
+ "type": "color"
450
+ },
451
+ "hover": {
452
+ "value": "{palette.slate.700}",
453
+ "type": "color"
454
+ },
455
+ "active": {
456
+ "value": "{palette.slate.900}",
457
+ "type": "color"
458
+ }
459
+ },
460
+ "stroke": {
461
+ "default": {
462
+ "value": "{click.button.basic.color.primary.background.default}",
463
+ "type": "color"
464
+ },
465
+ "hover": {
466
+ "value": "{click.button.basic.color.primary.background.hover}",
467
+ "type": "color"
468
+ },
469
+ "active": {
470
+ "value": "{click.button.basic.color.primary.background.active}",
471
+ "type": "color"
472
+ }
473
+ },
474
+ "text": {
475
+ "default": {
476
+ "value": "{palette.neutral.0}",
477
+ "type": "color"
478
+ }
479
+ }
480
+ },
481
+ "secondary": {
482
+ "background": {
483
+ "default": {
484
+ "value": "{palette.utility.transparent}",
485
+ "type": "color"
486
+ },
487
+ "hover": {
488
+ "value": "{click.global.color.background.muted}",
489
+ "type": "color"
490
+ },
491
+ "active": {
492
+ "value": "{click.button.basic.color.secondary.background.hover}",
493
+ "type": "color",
494
+ "$extensions": {
495
+ "studio.tokens": {
496
+ "modify": {
497
+ "type": "darken",
498
+ "value": "0.02",
499
+ "space": "lch"
500
+ }
501
+ }
502
+ }
503
+ }
504
+ },
505
+ "stroke": {
506
+ "default": {
507
+ "value": "{click.global.color.stroke.default}",
508
+ "type": "color"
509
+ },
510
+ "hover": {
511
+ "value": "{palette.slate.100}",
512
+ "type": "color"
513
+ },
514
+ "active": {
515
+ "value": "{palette.slate.200}",
516
+ "type": "color"
517
+ }
518
+ },
519
+ "text": {
520
+ "default": {
521
+ "value": "{click.global.color.text.default}",
522
+ "type": "color"
523
+ }
524
+ }
525
+ },
526
+ "disabled": {
527
+ "background": {
528
+ "default": {
529
+ "value": "{palette.neutral.200}",
530
+ "type": "color"
531
+ }
532
+ },
533
+ "text": {
534
+ "default": {
535
+ "value": "{palette.neutral.400}",
536
+ "type": "color"
537
+ }
538
+ }
539
+ },
540
+ "danger": {
541
+ "background": {
542
+ "default": {
543
+ "value": "{click.feedback.color.danger.background}",
544
+ "type": "color"
545
+ },
546
+ "hover": {
547
+ "value": "{palette.danger.200}",
548
+ "type": "color"
549
+ },
550
+ "active": {
551
+ "value": "{palette.danger.100}",
552
+ "type": "color"
553
+ }
554
+ },
555
+ "text": {
556
+ "default": {
557
+ "value": "{click.feedback.color.danger.foreground}",
558
+ "type": "color"
559
+ }
560
+ }
561
+ }
562
+ }
563
+ },
564
+ "group": {
565
+ "color": {
566
+ "background": {
567
+ "default": {
568
+ "value": "{palette.neutral.0}",
569
+ "type": "color"
570
+ },
571
+ "hover": {
572
+ "value": "{click.button.basic.color.secondary.background.hover}",
573
+ "type": "color"
574
+ },
575
+ "active": {
576
+ "value": "{click.button.basic.color.secondary.background.active}",
577
+ "type": "color"
578
+ },
579
+ "panel": {
580
+ "value": "{click.button.group.color.background.default}",
581
+ "type": "color"
582
+ }
583
+ },
584
+ "text": {
585
+ "default": {
586
+ "value": "{palette.slate.900}",
587
+ "type": "color"
588
+ },
589
+ "hover": {
590
+ "value": "{click.button.group.color.text.default}",
591
+ "type": "color"
592
+ },
593
+ "active": {
594
+ "value": "{palette.neutral.900}",
595
+ "type": "color"
596
+ }
597
+ },
598
+ "stroke": {
599
+ "panel": {
600
+ "value": "{click.global.color.stroke.default}",
601
+ "type": "color"
602
+ }
603
+ }
604
+ }
605
+ },
606
+ "split": {
607
+ "primary": {
608
+ "stroke": {
609
+ "default": {
610
+ "value": "{click.button.basic.color.primary.background.default}",
611
+ "type": "color",
612
+ "$extensions": {
613
+ "studio.tokens": {
614
+ "modify": {
615
+ "type": "lighten",
616
+ "value": "0.05",
617
+ "space": "lch"
618
+ }
619
+ }
620
+ }
621
+ },
622
+ "active": {
623
+ "value": "{click.button.basic.color.primary.background.default}",
624
+ "type": "color",
625
+ "$extensions": {
626
+ "studio.tokens": {
627
+ "modify": {
628
+ "type": "darken",
629
+ "value": "0.15",
630
+ "space": "lch"
631
+ }
632
+ }
633
+ }
634
+ },
635
+ "hover": {
636
+ "value": "{click.button.split.primary.background.action.hover}",
637
+ "type": "color",
638
+ "$extensions": {
639
+ "studio.tokens": {
640
+ "modify": {
641
+ "type": "lighten",
642
+ "value": "0.1",
643
+ "space": "lch"
644
+ }
645
+ }
646
+ }
647
+ }
648
+ },
649
+ "background": {
650
+ "main": {
651
+ "default": {
652
+ "value": "{click.button.basic.color.primary.background.default}",
653
+ "type": "color",
654
+ "$extensions": {
655
+ "studio.tokens": {
656
+ "modify": {
657
+ "type": "darken",
658
+ "value": "0.085",
659
+ "space": "lch"
660
+ }
661
+ }
662
+ }
663
+ },
664
+ "hover": {
665
+ "value": "{click.button.basic.color.primary.background.hover}",
666
+ "type": "color",
667
+ "$extensions": {
668
+ "studio.tokens": {
669
+ "modify": {
670
+ "type": "darken",
671
+ "value": "0.085",
672
+ "space": "lch"
673
+ }
674
+ }
675
+ }
676
+ },
677
+ "active": {
678
+ "value": "{click.button.basic.color.primary.background.active}",
679
+ "type": "color",
680
+ "$extensions": {
681
+ "studio.tokens": {
682
+ "modify": {
683
+ "type": "darken",
684
+ "value": "0.085",
685
+ "space": "lch"
686
+ }
687
+ }
688
+ }
689
+ }
690
+ },
691
+ "action": {
692
+ "default": {
693
+ "value": "{palette.slate.900}",
694
+ "type": "color"
695
+ },
696
+ "hover": {
697
+ "value": "{click.button.split.primary.background.main.hover}",
698
+ "type": "color",
699
+ "$extensions": {
700
+ "studio.tokens": {
701
+ "modify": {
702
+ "type": "darken",
703
+ "value": "0.05",
704
+ "space": "lch"
705
+ }
706
+ }
707
+ }
708
+ },
709
+ "active": {
710
+ "value": "{palette.slate.900}",
711
+ "type": "color",
712
+ "$extensions": {
713
+ "studio.tokens": {
714
+ "modify": {
715
+ "type": "darken",
716
+ "value": "0.5",
717
+ "space": "lch"
718
+ }
719
+ }
720
+ }
721
+ }
722
+ }
723
+ },
724
+ "text": {
725
+ "default": {
726
+ "value": "{click.button.basic.color.primary.text.default}",
727
+ "type": "color"
728
+ }
729
+ }
730
+ }
731
+ },
732
+ "iconButton": {
733
+ "color": {
734
+ "primary": {
735
+ "background": {
736
+ "default": {
737
+ "value": "{palette.utility.transparent}",
738
+ "type": "color"
739
+ },
740
+ "hover": {
741
+ "value": "{click.global.color.background.muted}",
742
+ "type": "color"
743
+ },
744
+ "active": {
745
+ "value": "{click.global.color.background.muted}",
746
+ "type": "color",
747
+ "$extensions": {
748
+ "studio.tokens": {
749
+ "modify": {
750
+ "type": "darken",
751
+ "value": "0.1",
752
+ "space": "srgb"
753
+ }
754
+ }
755
+ }
756
+ }
757
+ },
758
+ "stroke": {
759
+ "default": {
760
+ "value": "{click.button.iconButton.color.primary.background.default}",
761
+ "type": "color"
762
+ },
763
+ "hover": {
764
+ "value": "{click.button.iconButton.color.primary.background.hover}",
765
+ "type": "color"
766
+ },
767
+ "active": {
768
+ "value": "{click.button.iconButton.color.primary.background.active}",
769
+ "type": "color"
770
+ }
771
+ },
772
+ "text": {
773
+ "default": {
774
+ "value": "{click.global.color.text.default}",
775
+ "type": "color"
776
+ },
777
+ "hover": {
778
+ "value": "{click.global.color.text.default}",
779
+ "type": "color"
780
+ },
781
+ "active": {
782
+ "value": "{click.global.color.text.default}",
783
+ "type": "color"
784
+ }
785
+ }
786
+ },
787
+ "secondary": {
788
+ "background": {
789
+ "default": {
790
+ "value": "{click.button.basic.color.primary.background.default}",
791
+ "type": "color"
792
+ },
793
+ "hover": {
794
+ "value": "{click.button.basic.color.primary.background.hover}",
795
+ "type": "color"
796
+ },
797
+ "active": {
798
+ "value": "{click.button.basic.color.primary.background.active}",
799
+ "type": "color",
800
+ "$extensions": {
801
+ "studio.tokens": {
802
+ "modify": {
803
+ "type": "darken",
804
+ "value": "0.05",
805
+ "space": "lch"
806
+ }
807
+ }
808
+ }
809
+ }
810
+ },
811
+ "stroke": {
812
+ "default": {
813
+ "value": "{click.button.iconButton.color.primary.background.default}",
814
+ "type": "color"
815
+ },
816
+ "hover": {
817
+ "value": "{click.button.iconButton.color.secondary.background.hover}",
818
+ "type": "color"
819
+ },
820
+ "active": {
821
+ "value": "{click.button.iconButton.color.secondary.background.active}",
822
+ "type": "color"
823
+ }
824
+ },
825
+ "text": {
826
+ "default": {
827
+ "value": "{click.button.basic.color.primary.text.default}",
828
+ "type": "color"
829
+ },
830
+ "hover": {
831
+ "value": "{click.button.basic.color.primary.text.default}",
832
+ "type": "color"
833
+ },
834
+ "active": {
835
+ "value": "{click.button.basic.color.primary.text.default}",
836
+ "type": "color"
837
+ }
838
+ }
839
+ },
840
+ "disabled": {
841
+ "background": {
842
+ "default": {
843
+ "value": "{palette.neutral.200}",
844
+ "type": "color"
845
+ }
846
+ },
847
+ "text": {
848
+ "default": {
849
+ "value": "{palette.neutral.400}",
850
+ "type": "color"
851
+ }
852
+ }
853
+ },
854
+ "danger": {
855
+ "background": {
856
+ "default": {
857
+ "value": "{click.feedback.color.danger.background}",
858
+ "type": "color"
859
+ },
860
+ "hover": {
861
+ "value": "{palette.danger.200}",
862
+ "type": "color"
863
+ },
864
+ "active": {
865
+ "value": "{palette.danger.100}",
866
+ "type": "color"
867
+ }
868
+ },
869
+ "text": {
870
+ "default": {
871
+ "value": "{click.feedback.color.danger.foreground}",
872
+ "type": "color"
873
+ }
874
+ }
875
+ }
876
+ }
877
+ },
878
+ "alignedLeft": {
879
+ "color": {
880
+ "background": {
881
+ "default": {
882
+ "value": "{palette.utility.transparent}",
883
+ "type": "color"
884
+ },
885
+ "hover": {
886
+ "value": "{click.global.color.background.muted}",
887
+ "type": "color"
888
+ },
889
+ "active": {
890
+ "value": "{click.button.basic.color.secondary.background.hover}",
891
+ "type": "color",
892
+ "$extensions": {
893
+ "studio.tokens": {
894
+ "modify": {
895
+ "type": "darken",
896
+ "value": "0.02",
897
+ "space": "lch"
898
+ }
899
+ }
900
+ }
901
+ }
902
+ },
903
+ "stroke": {
904
+ "default": {
905
+ "value": "{click.global.color.stroke.default}",
906
+ "type": "color"
907
+ },
908
+ "hover": {
909
+ "value": "{palette.slate.100}",
910
+ "type": "color"
911
+ },
912
+ "active": {
913
+ "value": "{palette.slate.200}",
914
+ "type": "color"
915
+ }
916
+ },
917
+ "text": {
918
+ "default": {
919
+ "value": "{click.global.color.text.default}",
920
+ "type": "color"
921
+ },
922
+ "hover": {
923
+ "value": "{click.button.alignedLeft.color.text.default}",
924
+ "type": "color"
925
+ },
926
+ "active": {
927
+ "value": "{click.button.alignedLeft.color.text.default}",
928
+ "type": "color"
929
+ }
930
+ }
931
+ }
932
+ }
933
+ },
934
+ "card": {
935
+ "color": {
936
+ "background": {
937
+ "default": {
938
+ "value": "{click.global.color.background.default}",
939
+ "type": "color"
940
+ },
941
+ "hover": {
942
+ "value": "{click.global.color.background.muted}",
943
+ "type": "color"
944
+ },
945
+ "active": {
946
+ "value": "{click.global.color.background.muted}",
947
+ "type": "color",
948
+ "$extensions": {
949
+ "studio.tokens": {
950
+ "modify": {
951
+ "type": "darken",
952
+ "value": "0.05",
953
+ "space": "lch"
954
+ }
955
+ }
956
+ }
957
+ },
958
+ "disabled": {
959
+ "value": "{click.button.basic.color.disabled.background.default}",
960
+ "type": "color"
961
+ }
962
+ },
963
+ "title": {
964
+ "default": {
965
+ "value": "{click.global.color.text.default}",
966
+ "type": "color"
967
+ },
968
+ "hover": {
969
+ "value": "{click.global.color.text.default}",
970
+ "type": "color"
971
+ },
972
+ "active": {
973
+ "value": "{click.global.color.text.default}",
974
+ "type": "color"
975
+ },
976
+ "disabled": {
977
+ "value": "{click.button.basic.color.disabled.text.default}",
978
+ "type": "color"
979
+ }
980
+ },
981
+ "description": {
982
+ "default": {
983
+ "value": "{click.global.color.text.muted}",
984
+ "type": "color"
985
+ },
986
+ "hover": {
987
+ "value": "{click.global.color.text.muted}",
988
+ "type": "color"
989
+ },
990
+ "active": {
991
+ "value": "{click.global.color.text.muted}",
992
+ "type": "color"
993
+ },
994
+ "disabled": {
995
+ "value": "{click.card.color.title.disabled}",
996
+ "type": "color"
997
+ }
998
+ },
999
+ "link": {
1000
+ "default": {
1001
+ "value": "{click.global.color.text.default}",
1002
+ "type": "color"
1003
+ },
1004
+ "hover": {
1005
+ "value": "{click.global.color.text.link.default}",
1006
+ "type": "color"
1007
+ },
1008
+ "active": {
1009
+ "value": "{click.global.color.text.default}",
1010
+ "type": "color"
1011
+ },
1012
+ "disabled": {
1013
+ "value": "{click.card.color.title.disabled}",
1014
+ "type": "color"
1015
+ }
1016
+ },
1017
+ "stroke": {
1018
+ "default": {
1019
+ "value": "{click.global.color.stroke.default}",
1020
+ "type": "color"
1021
+ },
1022
+ "hover": {
1023
+ "value": "{click.global.color.stroke.default}",
1024
+ "type": "color"
1025
+ },
1026
+ "active": {
1027
+ "value": "{click.global.color.stroke.default}",
1028
+ "type": "color",
1029
+ "$extensions": {
1030
+ "studio.tokens": {
1031
+ "modify": {
1032
+ "type": "darken",
1033
+ "value": "0.05",
1034
+ "space": "lch"
1035
+ }
1036
+ }
1037
+ }
1038
+ },
1039
+ "disabled": {
1040
+ "value": "{click.field.color.stroke.disabled}",
1041
+ "type": "color"
1042
+ }
1043
+ }
1044
+ }
1045
+ },
1046
+ "checkbox": {
1047
+ "color": {
1048
+ "background": {
1049
+ "default": {
1050
+ "value": "{palette.slate.50}",
1051
+ "type": "color"
1052
+ },
1053
+ "active": {
1054
+ "value": "{palette.slate.900}",
1055
+ "type": "color"
1056
+ },
1057
+ "disabled-checked": {
1058
+ "value": "{palette.neutral.200}",
1059
+ "type": "color"
1060
+ },
1061
+ "disabled-unchecked": {
1062
+ "value": "{palette.neutral.200}",
1063
+ "type": "color"
1064
+ }
1065
+ },
1066
+ "stroke": {
1067
+ "default": {
1068
+ "value": "{click.global.color.stroke.intense}",
1069
+ "type": "color"
1070
+ },
1071
+ "active": {
1072
+ "value": "{click.checkbox.color.background.active}",
1073
+ "type": "color"
1074
+ },
1075
+ "disabled": {
1076
+ "value": "{palette.neutral.300}",
1077
+ "type": "color"
1078
+ }
1079
+ },
1080
+ "check": {
1081
+ "default": {
1082
+ "value": "{palette.neutral.0}",
1083
+ "type": "color"
1084
+ },
1085
+ "active": {
1086
+ "value": "{palette.neutral.0}",
1087
+ "type": "color"
1088
+ },
1089
+ "disabled": {
1090
+ "value": "{palette.neutral.400}",
1091
+ "type": "color"
1092
+ }
1093
+ },
1094
+ "label": {
1095
+ "default": {
1096
+ "value": "{click.global.color.text.default}",
1097
+ "type": "color"
1098
+ },
1099
+ "active": {
1100
+ "value": "{click.global.color.text.default}",
1101
+ "type": "color"
1102
+ },
1103
+ "disabled": {
1104
+ "value": "#a0a0a0",
1105
+ "type": "color"
1106
+ }
1107
+ }
1108
+ }
1109
+ },
1110
+ "codeblock": {
1111
+ "darkMode": {
1112
+ "color": {
1113
+ "background": {
1114
+ "default": {
1115
+ "value": "{palette.neutral.725}",
1116
+ "type": "color"
1117
+ }
1118
+ },
1119
+ "text": {
1120
+ "default": {
1121
+ "value": "{palette.neutral.0}",
1122
+ "type": "color"
1123
+ }
1124
+ },
1125
+ "numbers": {
1126
+ "default": {
1127
+ "value": "{palette.neutral.300}",
1128
+ "type": "color"
1129
+ }
1130
+ },
1131
+ "button": {
1132
+ "background": {
1133
+ "default": {
1134
+ "value": "{click.codeblock.darkMode.color.background.default}",
1135
+ "type": "color"
1136
+ },
1137
+ "hover": {
1138
+ "value": "{palette.slate.700}",
1139
+ "type": "color"
1140
+ }
1141
+ },
1142
+ "foreground": {
1143
+ "default": {
1144
+ "value": "{palette.neutral.0}",
1145
+ "type": "color"
1146
+ }
1147
+ }
1148
+ },
1149
+ "stroke": {
1150
+ "default": {
1151
+ "value": "{click.codeblock.darkMode.color.background.default}",
1152
+ "type": "color"
1153
+ }
1154
+ }
1155
+ }
1156
+ },
1157
+ "lightMode": {
1158
+ "color": {
1159
+ "background": {
1160
+ "default": {
1161
+ "value": "{palette.slate.50}",
1162
+ "type": "color"
1163
+ }
1164
+ },
1165
+ "text": {
1166
+ "default": {
1167
+ "value": "{palette.neutral.725}",
1168
+ "type": "color"
1169
+ }
1170
+ },
1171
+ "numbers": {
1172
+ "default": {
1173
+ "value": "{palette.neutral.500}",
1174
+ "type": "color"
1175
+ }
1176
+ },
1177
+ "button": {
1178
+ "background": {
1179
+ "default": {
1180
+ "value": "{click.codeblock.lightMode.color.background.default}",
1181
+ "type": "color"
1182
+ },
1183
+ "hover": {
1184
+ "value": "{palette.slate.700}",
1185
+ "type": "color"
1186
+ }
1187
+ },
1188
+ "foreground": {
1189
+ "default": {
1190
+ "value": "{palette.neutral.400}",
1191
+ "type": "color"
1192
+ }
1193
+ }
1194
+ },
1195
+ "stroke": {
1196
+ "default": {
1197
+ "value": "{click.codeblock.darkMode.color.background.default}",
1198
+ "type": "color"
1199
+ }
1200
+ }
1201
+ }
1202
+ }
1203
+ },
1204
+ "codeInline": {
1205
+ "color": {
1206
+ "background": {
1207
+ "default": {
1208
+ "value": "{click.global.color.background.muted}",
1209
+ "type": "color"
1210
+ }
1211
+ },
1212
+ "text": {
1213
+ "default": {
1214
+ "value": "{click.global.color.text.default}",
1215
+ "type": "color"
1216
+ }
1217
+ },
1218
+ "stroke": {
1219
+ "default": {
1220
+ "value": "{click.global.color.stroke.default}",
1221
+ "type": "color"
1222
+ }
1223
+ }
1224
+ }
1225
+ },
1226
+ "contextMenu": {
1227
+ "color": {
1228
+ "text": {
1229
+ "default": {
1230
+ "value": "{click.global.color.text.default}",
1231
+ "type": "color"
1232
+ },
1233
+ "hover": {
1234
+ "value": "{click.global.color.text.default}",
1235
+ "type": "color"
1236
+ },
1237
+ "active": {
1238
+ "value": "{click.global.color.text.default}",
1239
+ "type": "color"
1240
+ },
1241
+ "disabled": {
1242
+ "value": "{palette.neutral.300}",
1243
+ "type": "color"
1244
+ },
1245
+ "muted": {
1246
+ "value": "{click.global.color.text.muted}",
1247
+ "type": "color"
1248
+ }
1249
+ },
1250
+ "background": {
1251
+ "default": {
1252
+ "value": "{click.popover.color.background.default}",
1253
+ "type": "color"
1254
+ },
1255
+ "hover": {
1256
+ "value": "{click.global.color.background.muted}",
1257
+ "type": "color"
1258
+ },
1259
+ "active": {
1260
+ "value": "{click.contextMenu.color.background.hover}",
1261
+ "type": "color"
1262
+ }
1263
+ }
1264
+ },
1265
+ "stroke": {
1266
+ "default": {
1267
+ "value": "{click.global.color.stroke.default}",
1268
+ "type": "color"
1269
+ }
1270
+ },
1271
+ "button": {
1272
+ "background": {
1273
+ "default": {
1274
+ "value": "{click.global.color.background.muted}",
1275
+ "type": "color"
1276
+ }
1277
+ },
1278
+ "label": {
1279
+ "default": {
1280
+ "value": "{click.global.color.text.default}",
1281
+ "type": "color"
1282
+ }
1283
+ },
1284
+ "stroke": {
1285
+ "default": {
1286
+ "value": "{click.global.color.stroke.default}",
1287
+ "type": "color"
1288
+ }
1289
+ }
1290
+ }
1291
+ },
1292
+ "feedback": {
1293
+ "color": {
1294
+ "info": {
1295
+ "background": {
1296
+ "value": "{palette.info.50}",
1297
+ "type": "color"
1298
+ },
1299
+ "foreground": {
1300
+ "value": "{palette.info.400}",
1301
+ "type": "color"
1302
+ }
1303
+ },
1304
+ "success": {
1305
+ "background": {
1306
+ "value": "{palette.success.50}",
1307
+ "type": "color"
1308
+ },
1309
+ "foreground": {
1310
+ "value": "{palette.success.600}",
1311
+ "type": "color"
1312
+ }
1313
+ },
1314
+ "warning": {
1315
+ "background": {
1316
+ "value": "{palette.warning.50}",
1317
+ "type": "color"
1318
+ },
1319
+ "foreground": {
1320
+ "value": "{palette.warning.700}",
1321
+ "type": "color"
1322
+ }
1323
+ },
1324
+ "danger": {
1325
+ "background": {
1326
+ "value": "{palette.danger.50}",
1327
+ "type": "color"
1328
+ },
1329
+ "foreground": {
1330
+ "value": "{palette.danger.600}",
1331
+ "type": "color"
1332
+ }
1333
+ },
1334
+ "neutral": {
1335
+ "background": {
1336
+ "value": "{palette.slate.100}",
1337
+ "type": "color"
1338
+ },
1339
+ "foreground": {
1340
+ "value": "{palette.slate.700}",
1341
+ "type": "color"
1342
+ },
1343
+ "stroke": {
1344
+ "value": "{click.global.color.stroke.default}",
1345
+ "type": "color"
1346
+ }
1347
+ }
1348
+ }
1349
+ },
1350
+ "field": {
1351
+ "color": {
1352
+ "background": {
1353
+ "default": {
1354
+ "value": "{click.global.color.background.muted}",
1355
+ "type": "color"
1356
+ },
1357
+ "hover": {
1358
+ "value": "{click.global.color.background.muted}",
1359
+ "type": "color"
1360
+ },
1361
+ "active": {
1362
+ "value": "{click.global.color.background.default}",
1363
+ "type": "color"
1364
+ },
1365
+ "disabled": {
1366
+ "value": "{palette.neutral.200}",
1367
+ "type": "color"
1368
+ }
1369
+ },
1370
+ "text": {
1371
+ "default": {
1372
+ "value": "{palette.slate.800}",
1373
+ "type": "color"
1374
+ },
1375
+ "hover": {
1376
+ "value": "{click.field.color.text.default}",
1377
+ "type": "color"
1378
+ },
1379
+ "active": {
1380
+ "value": "{click.global.color.text.default}",
1381
+ "type": "color"
1382
+ },
1383
+ "disabled": {
1384
+ "value": "{palette.neutral.400}",
1385
+ "type": "color"
1386
+ },
1387
+ "error": {
1388
+ "value": "{click.feedback.color.danger.foreground}",
1389
+ "type": "color"
1390
+ }
1391
+ },
1392
+ "stroke": {
1393
+ "default": {
1394
+ "value": "{click.global.color.stroke.default}",
1395
+ "type": "color"
1396
+ },
1397
+ "hover": {
1398
+ "value": "{palette.slate.200}",
1399
+ "type": "color"
1400
+ },
1401
+ "active": {
1402
+ "value": "{click.field.color.text.active}",
1403
+ "type": "color"
1404
+ },
1405
+ "disabled": {
1406
+ "value": "{palette.neutral.200}",
1407
+ "type": "color"
1408
+ },
1409
+ "error": {
1410
+ "value": "{click.feedback.color.danger.foreground}",
1411
+ "type": "color"
1412
+ }
1413
+ },
1414
+ "label": {
1415
+ "default": {
1416
+ "value": "{palette.slate.600}",
1417
+ "type": "color"
1418
+ },
1419
+ "active": {
1420
+ "value": "{click.field.color.text.active}",
1421
+ "type": "color"
1422
+ },
1423
+ "disabled": {
1424
+ "value": "{click.field.color.text.disabled}",
1425
+ "type": "color"
1426
+ },
1427
+ "error": {
1428
+ "value": "{click.feedback.color.danger.foreground}",
1429
+ "type": "color"
1430
+ }
1431
+ },
1432
+ "placeholder": {
1433
+ "default": {
1434
+ "value": "{click.global.color.text.muted}",
1435
+ "type": "color"
1436
+ }
1437
+ },
1438
+ "format": {
1439
+ "default": {
1440
+ "value": "{click.field.color.placeholder.default}",
1441
+ "type": "color",
1442
+ "$extensions": {
1443
+ "studio.tokens": {
1444
+ "modify": {
1445
+ "type": "lighten",
1446
+ "value": "0.2",
1447
+ "space": "lch"
1448
+ }
1449
+ }
1450
+ }
1451
+ },
1452
+ "hover": {
1453
+ "value": "{click.field.color.format.default}",
1454
+ "type": "color",
1455
+ "$extensions": {}
1456
+ },
1457
+ "active": {
1458
+ "value": "{click.field.color.format.default}",
1459
+ "type": "color",
1460
+ "$extensions": {}
1461
+ },
1462
+ "disabled": {
1463
+ "value": "{click.field.color.text.disabled}",
1464
+ "type": "color",
1465
+ "$extensions": {}
1466
+ },
1467
+ "error": {
1468
+ "value": "{click.field.color.format.default}",
1469
+ "type": "color",
1470
+ "$extensions": {}
1471
+ }
1472
+ }
1473
+ }
1474
+ },
1475
+ "grid": {
1476
+ "color": {
1477
+ "background": {
1478
+ "header": {
1479
+ "default": {
1480
+ "value": "{click.global.color.background.muted}",
1481
+ "type": "color",
1482
+ "$extensions": {
1483
+ "studio.tokens": {
1484
+ "modify": {
1485
+ "type": "alpha",
1486
+ "value": "0.7",
1487
+ "space": "lch"
1488
+ }
1489
+ }
1490
+ }
1491
+ }
1492
+ },
1493
+ "row": {
1494
+ "default": {
1495
+ "value": "{click.global.color.background.default}",
1496
+ "type": "color"
1497
+ }
1498
+ }
1499
+ },
1500
+ "text": {
1501
+ "header": {
1502
+ "default": {
1503
+ "value": "{click.global.color.text.muted}",
1504
+ "type": "color"
1505
+ }
1506
+ },
1507
+ "row": {
1508
+ "default": {
1509
+ "value": "{click.global.color.text.default}",
1510
+ "type": "color"
1511
+ }
1512
+ }
1513
+ },
1514
+ "stroke": {
1515
+ "cell": {
1516
+ "stroke": {
1517
+ "value": "{click.global.color.stroke.default}",
1518
+ "type": "color"
1519
+ }
1520
+ }
1521
+ }
1522
+ }
1523
+ },
1524
+ "image": {
1525
+ "color": {
1526
+ "stroke": {
1527
+ "value": "{click.global.color.text.default}",
1528
+ "type": "color"
1529
+ }
1530
+ }
1531
+ },
1532
+ "popover": {
1533
+ "color": {
1534
+ "background": {
1535
+ "default": {
1536
+ "value": "{click.global.color.background.default}",
1537
+ "type": "color"
1538
+ }
1539
+ }
1540
+ }
1541
+ },
1542
+ "sidebar": {
1543
+ "main": {
1544
+ "color": {
1545
+ "background": {
1546
+ "default": {
1547
+ "value": "{click.global.color.background.default}",
1548
+ "type": "color"
1549
+ }
1550
+ },
1551
+ "text": {
1552
+ "default": {
1553
+ "value": "{click.global.color.text.default}",
1554
+ "type": "color"
1555
+ },
1556
+ "muted": {
1557
+ "value": "{click.global.color.text.muted}",
1558
+ "type": "color"
1559
+ }
1560
+ },
1561
+ "stroke": {
1562
+ "default": {
1563
+ "value": "{click.global.color.stroke.default}",
1564
+ "type": "color"
1565
+ }
1566
+ }
1567
+ }
1568
+ },
1569
+ "navigation": {
1570
+ "item": {
1571
+ "color": {
1572
+ "background": {
1573
+ "default": {
1574
+ "value": "{palette.utility.transparent}",
1575
+ "type": "color"
1576
+ },
1577
+ "hover": {
1578
+ "value": "{palette.slate.100}",
1579
+ "type": "color",
1580
+ "$extensions": {
1581
+ "studio.tokens": {
1582
+ "modify": {
1583
+ "type": "alpha",
1584
+ "value": "0.6",
1585
+ "space": "lch"
1586
+ }
1587
+ }
1588
+ }
1589
+ },
1590
+ "active": {
1591
+ "value": "{palette.slate.100}",
1592
+ "type": "color"
1593
+ }
1594
+ },
1595
+ "text": {
1596
+ "default": {
1597
+ "value": "{click.global.color.text.default}",
1598
+ "type": "color"
1599
+ },
1600
+ "hover": {
1601
+ "value": "{click.global.color.text.default}",
1602
+ "type": "color"
1603
+ },
1604
+ "active": {
1605
+ "value": "{click.global.color.text.default}",
1606
+ "type": "color"
1607
+ },
1608
+ "muted": {
1609
+ "value": "{click.global.color.text.muted}",
1610
+ "type": "color"
1611
+ }
1612
+ },
1613
+ "icon": {
1614
+ "default": {
1615
+ "value": "{click.global.color.text.muted}",
1616
+ "type": "color"
1617
+ }
1618
+ }
1619
+ }
1620
+ },
1621
+ "title": {
1622
+ "color": {
1623
+ "default": {
1624
+ "value": "{click.global.color.text.muted}",
1625
+ "type": "color"
1626
+ },
1627
+ "hover": {
1628
+ "value": "{click.global.color.text.muted}",
1629
+ "type": "color"
1630
+ },
1631
+ "active": {
1632
+ "value": "{click.global.color.text.muted}",
1633
+ "type": "color"
1634
+ }
1635
+ }
1636
+ },
1637
+ "subItem": {
1638
+ "color": {
1639
+ "text": {
1640
+ "default": {
1641
+ "value": "{click.global.color.text.muted}",
1642
+ "type": "color"
1643
+ },
1644
+ "hover": {
1645
+ "value": "{click.sidebar.navigation.subItem.color.text.active}",
1646
+ "type": "color"
1647
+ },
1648
+ "active": {
1649
+ "value": "{click.global.color.text.default}",
1650
+ "type": "color"
1651
+ }
1652
+ },
1653
+ "background": {
1654
+ "default": {
1655
+ "value": "{palette.utility.transparent}",
1656
+ "type": "color"
1657
+ },
1658
+ "hover": {
1659
+ "value": "{click.sidebar.navigation.item.color.background.hover}",
1660
+ "type": "color"
1661
+ },
1662
+ "active": {
1663
+ "value": "{palette.utility.transparent}",
1664
+ "type": "color"
1665
+ }
1666
+ }
1667
+ }
1668
+ }
1669
+ },
1670
+ "sqlSidebar": {
1671
+ "color": {
1672
+ "background": {
1673
+ "default": {
1674
+ "value": "{click.global.color.background.muted}",
1675
+ "type": "color"
1676
+ }
1677
+ },
1678
+ "stroke": {
1679
+ "default": {
1680
+ "value": "{click.global.color.stroke.default}",
1681
+ "type": "color"
1682
+ }
1683
+ }
1684
+ }
1685
+ }
1686
+ },
1687
+ "switch": {
1688
+ "color": {
1689
+ "background": {
1690
+ "default": {
1691
+ "value": "{palette.slate.200}",
1692
+ "type": "color"
1693
+ },
1694
+ "active": {
1695
+ "value": "{palette.neutral.900}",
1696
+ "type": "color"
1697
+ },
1698
+ "disabled": {
1699
+ "value": "{palette.neutral.200}",
1700
+ "type": "color"
1701
+ }
1702
+ },
1703
+ "stroke": {
1704
+ "default": {
1705
+ "value": "{click.switch.color.background.default}",
1706
+ "type": "color"
1707
+ },
1708
+ "active": {
1709
+ "value": "{click.checkbox.color.background.active}",
1710
+ "type": "color"
1711
+ },
1712
+ "disabled": {
1713
+ "value": "{click.switch.color.background.disabled}",
1714
+ "type": "color"
1715
+ }
1716
+ },
1717
+ "indicator": {
1718
+ "default": {
1719
+ "value": "{click.switch.color.indicator.active}",
1720
+ "type": "color"
1721
+ },
1722
+ "active": {
1723
+ "value": "{palette.neutral.0}",
1724
+ "type": "color"
1725
+ },
1726
+ "disabled": {
1727
+ "value": "{palette.neutral.400}",
1728
+ "type": "color"
1729
+ }
1730
+ }
1731
+ }
1732
+ },
1733
+ "table": {
1734
+ "header": {
1735
+ "color": {
1736
+ "background": {
1737
+ "default": {
1738
+ "value": "{click.global.color.background.muted}",
1739
+ "type": "color"
1740
+ }
1741
+ },
1742
+ "title": {
1743
+ "default": {
1744
+ "value": "{click.global.color.text.default}",
1745
+ "type": "color"
1746
+ }
1747
+ },
1748
+ "icon": {
1749
+ "default": {
1750
+ "value": "{click.image.color.stroke}",
1751
+ "type": "color"
1752
+ }
1753
+ },
1754
+ "checkbox": {
1755
+ "background": {
1756
+ "default": {
1757
+ "value": "{palette.slate.200}",
1758
+ "type": "color"
1759
+ }
1760
+ },
1761
+ "border": {
1762
+ "default": {
1763
+ "value": "{palette.slate.500}",
1764
+ "type": "color"
1765
+ }
1766
+ }
1767
+ }
1768
+ }
1769
+ },
1770
+ "row": {
1771
+ "color": {
1772
+ "background": {
1773
+ "default": {
1774
+ "value": "{click.global.color.background.default}",
1775
+ "type": "color"
1776
+ },
1777
+ "hover": {
1778
+ "value": "{palette.info.50}",
1779
+ "type": "color"
1780
+ },
1781
+ "active": {
1782
+ "value": "{click.table.row.color.background.hover}",
1783
+ "type": "color"
1784
+ }
1785
+ },
1786
+ "stroke": {
1787
+ "default": {
1788
+ "value": "{click.global.color.stroke.default}",
1789
+ "type": "color"
1790
+ }
1791
+ },
1792
+ "text": {
1793
+ "default": {
1794
+ "value": "{click.global.color.text.default}",
1795
+ "type": "color"
1796
+ }
1797
+ },
1798
+ "link": {
1799
+ "default": {
1800
+ "value": "{click.global.color.text.link.default}",
1801
+ "type": "color"
1802
+ }
1803
+ },
1804
+ "label": {
1805
+ "default": {
1806
+ "value": "{click.field.color.label.default}",
1807
+ "type": "color"
1808
+ }
1809
+ }
1810
+ }
1811
+ },
1812
+ "global": {
1813
+ "color": {
1814
+ "stroke": {
1815
+ "default": {
1816
+ "value": "{click.table.row.color.stroke.default}",
1817
+ "type": "color"
1818
+ }
1819
+ },
1820
+ "background": {
1821
+ "default": {
1822
+ "value": "{click.global.color.background.default}",
1823
+ "type": "color"
1824
+ }
1825
+ }
1826
+ }
1827
+ }
1828
+ },
1829
+ "tabs": {
1830
+ "basic": {
1831
+ "color": {
1832
+ "background": {
1833
+ "default": {
1834
+ "value": "{palette.utility.transparent}",
1835
+ "type": "color"
1836
+ },
1837
+ "hover": {
1838
+ "value": "{click.global.color.background.muted}",
1839
+ "type": "color"
1840
+ },
1841
+ "active": {
1842
+ "value": "{palette.utility.transparent}",
1843
+ "type": "color"
1844
+ }
1845
+ },
1846
+ "text": {
1847
+ "default": {
1848
+ "value": "{click.global.color.text.muted}",
1849
+ "type": "color"
1850
+ },
1851
+ "hover": {
1852
+ "value": "{click.global.color.text.default}",
1853
+ "type": "color"
1854
+ },
1855
+ "active": {
1856
+ "value": "{click.tabs.basic.color.text.hover}",
1857
+ "type": "color"
1858
+ }
1859
+ },
1860
+ "stroke": {
1861
+ "default": {
1862
+ "value": "{click.tabs.basic.color.background.default}",
1863
+ "type": "color"
1864
+ },
1865
+ "hover": {
1866
+ "value": "{palette.utility.transparent}",
1867
+ "type": "color"
1868
+ },
1869
+ "active": {
1870
+ "value": "{click.global.color.accent.default}",
1871
+ "type": "color"
1872
+ }
1873
+ },
1874
+ "global": {
1875
+ "default": {
1876
+ "value": "{click.global.color.stroke.default}",
1877
+ "type": "color"
1878
+ }
1879
+ }
1880
+ }
1881
+ },
1882
+ "file-tabs": {
1883
+ "color": {
1884
+ "background": {
1885
+ "default": {
1886
+ "value": "{click.global.color.background.muted}",
1887
+ "type": "color"
1888
+ },
1889
+ "hover": {
1890
+ "value": "{click.global.color.background.default}",
1891
+ "type": "color"
1892
+ },
1893
+ "active": {
1894
+ "value": "{click.tabs.file-tabs.color.background.hover}",
1895
+ "type": "color"
1896
+ }
1897
+ },
1898
+ "text": {
1899
+ "default": {
1900
+ "value": "{click.global.color.text.muted}",
1901
+ "type": "color"
1902
+ },
1903
+ "hover": {
1904
+ "value": "{click.global.color.text.default}",
1905
+ "type": "color"
1906
+ },
1907
+ "active": {
1908
+ "value": "{click.global.color.text.default}",
1909
+ "type": "color"
1910
+ }
1911
+ },
1912
+ "stroke": {
1913
+ "default": {
1914
+ "value": "{click.global.color.stroke.default}",
1915
+ "type": "color"
1916
+ },
1917
+ "hover": {
1918
+ "value": "{click.global.color.stroke.default}",
1919
+ "type": "color"
1920
+ },
1921
+ "active": {
1922
+ "value": "{click.global.color.stroke.default}",
1923
+ "type": "color"
1924
+ }
1925
+ }
1926
+ }
1927
+ }
1928
+ },
1929
+ "tooltip": {
1930
+ "color": {
1931
+ "background": {
1932
+ "default": {
1933
+ "value": "{palette.neutral.800}",
1934
+ "type": "color",
1935
+ "$extensions": {
1936
+ "studio.tokens": {
1937
+ "modify": {
1938
+ "type": "alpha",
1939
+ "value": "0.8",
1940
+ "space": "lch"
1941
+ }
1942
+ }
1943
+ }
1944
+ }
1945
+ },
1946
+ "label": {
1947
+ "default": {
1948
+ "value": "{palette.neutral.0}",
1949
+ "type": "color"
1950
+ }
1951
+ }
1952
+ }
1953
+ },
1954
+ "stepperVertical": {
1955
+ "icon": {
1956
+ "background": {
1957
+ "default": {
1958
+ "value": "{palette.slate.900}",
1959
+ "type": "color"
1960
+ },
1961
+ "incomplete": {
1962
+ "value": "{palette.slate.100}",
1963
+ "type": "color"
1964
+ },
1965
+ "complete": {
1966
+ "value": "{click.stepperVertical.connector.background.default}",
1967
+ "type": "color"
1968
+ }
1969
+ },
1970
+ "foreground": {
1971
+ "default": {
1972
+ "value": "{palette.neutral.0}",
1973
+ "type": "color"
1974
+ },
1975
+ "incomplete": {
1976
+ "value": "{click.stepperVertical.connector.background.default}",
1977
+ "type": "color"
1978
+ },
1979
+ "complete": {
1980
+ "value": "{click.stepperVertical.icon.foreground.default}",
1981
+ "type": "color"
1982
+ }
1983
+ },
1984
+ "stroke": {
1985
+ "default": {
1986
+ "value": "{click.stepperVertical.icon.foreground.default}",
1987
+ "type": "color"
1988
+ },
1989
+ "incomplete": {
1990
+ "value": "{palette.utility.transparent}",
1991
+ "type": "color"
1992
+ },
1993
+ "complete": {
1994
+ "value": "{palette.utility.transparent}",
1995
+ "type": "color"
1996
+ }
1997
+ }
1998
+ },
1999
+ "connector": {
2000
+ "background": {
2001
+ "default": {
2002
+ "value": "{click.stepperVertical.icon.background.default}",
2003
+ "type": "color"
2004
+ },
2005
+ "incomplete": {
2006
+ "value": "{click.stepperVertical.icon.background.incomplete}",
2007
+ "type": "color"
2008
+ },
2009
+ "complete": {
2010
+ "value": "{click.stepperVertical.icon.background.default}",
2011
+ "type": "color"
2012
+ }
2013
+ }
2014
+ }
2015
+ },
2016
+ "avatar": {
2017
+ "color": {
2018
+ "background": {
2019
+ "default": {
2020
+ "value": "{palette.slate.600}",
2021
+ "type": "color"
2022
+ },
2023
+ "hover": {
2024
+ "value": "{palette.slate.400}",
2025
+ "type": "color"
2026
+ },
2027
+ "active": {
2028
+ "value": "{click.avatar.color.background.hover}",
2029
+ "type": "color"
2030
+ }
2031
+ },
2032
+ "text": {
2033
+ "default": {
2034
+ "value": "{palette.neutral.0}",
2035
+ "type": "color"
2036
+ },
2037
+ "hover": {
2038
+ "value": "{click.avatar.color.text.default}",
2039
+ "type": "color"
2040
+ },
2041
+ "active": {
2042
+ "value": "{click.avatar.color.text.default}",
2043
+ "type": "color"
2044
+ }
2045
+ }
2046
+ }
2047
+ },
2048
+ "separator": {
2049
+ "color": {
2050
+ "stroke": {
2051
+ "default": {
2052
+ "value": "{click.global.color.stroke.default}",
2053
+ "type": "color"
2054
+ }
2055
+ }
2056
+ }
2057
+ }
2058
+ }
2059
+ }