@vueless/storybook 1.2.10-beta.6 → 1.2.10-beta.8

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 (29) hide show
  1. package/.storybook-js/manager.js +5 -4
  2. package/.storybook-js/preview.js +13 -8
  3. package/.storybook-js/theme/theme.css +37 -0
  4. package/.storybook-js/theme/theme.js +30 -0
  5. package/.storybook-js/vite.config.js +1 -1
  6. package/.storybook-ts/manager.ts +5 -4
  7. package/.storybook-ts/preview.ts +13 -8
  8. package/.storybook-ts/theme/theme.css +38 -0
  9. package/.storybook-ts/theme/theme.ts +31 -0
  10. package/.storybook-ts/vite.config.ts +1 -1
  11. package/decorators/storyDarkModeDecorator.js +8 -7
  12. package/index.browser.js +5 -1
  13. package/index.d.ts +3 -2
  14. package/index.js +3 -0
  15. package/package.json +12 -10
  16. package/theme/getThemeDark.js +47 -0
  17. package/theme/getThemeLight.js +47 -0
  18. package/theme/getThemeLightPreview.js +42 -0
  19. package/theme/manager.css +200 -0
  20. package/{.storybook-ts/themes → theme}/preview.css +185 -146
  21. package/.storybook-js/themes/manager.css +0 -123
  22. package/.storybook-js/themes/preview.css +0 -608
  23. package/.storybook-js/themes/themeDark.js +0 -44
  24. package/.storybook-js/themes/themeLight.js +0 -44
  25. package/.storybook-js/themes/themeLightPreview.js +0 -40
  26. package/.storybook-ts/themes/manager.css +0 -123
  27. package/.storybook-ts/themes/themeDark.ts +0 -45
  28. package/.storybook-ts/themes/themeLight.ts +0 -45
  29. package/.storybook-ts/themes/themeLightPreview.ts +0 -41
package/{.storybook-ts/themes → theme}/preview.css RENAMED
@@ -14,72 +14,72 @@
14
14
  }
15
15
 
16
16
  ::-webkit-scrollbar-thumb {
17
- border-radius: 0.125rem; /* rounded-xs */
18
- transition: all 0.2s; /* transition */
17
+ border-radius: var(--rounded-sm);
18
+ transition: all 0.2s;
19
19
  }
20
20
 
21
21
  .light::-webkit-scrollbar-track,
22
22
  .light ::-webkit-scrollbar-track {
23
- background-color: #f9fafb; /* bg-gray-50 */
23
+ background-color: var(--neutral-50);
24
24
  }
25
25
 
26
26
  .light::-webkit-scrollbar-track:hover,
27
27
  .light ::-webkit-scrollbar-track:hover {
28
- background-color: #e5e7eb; /* hover:bg-gray-200 */
28
+ background-color: var(--neutral-200);
29
29
  }
30
30
 
31
31
  .light::-webkit-scrollbar-thumb,
32
32
  .light ::-webkit-scrollbar-thumb {
33
- background-color: #9ca3af; /* bg-gray-400 */
33
+ background-color: var(--neutral-400);
34
34
  }
35
35
 
36
36
  .light::-webkit-scrollbar-thumb:hover,
37
37
  .light ::-webkit-scrollbar-thumb:hover {
38
- background-color: #6b7280; /* hover:bg-gray-500 */
38
+ background-color: var(--neutral-500);
39
39
  }
40
40
 
41
41
  .dark::-webkit-scrollbar-track,
42
42
  .dark ::-webkit-scrollbar-track {
43
- background-color: #030712; /* bg-gray-950 */
43
+ background-color: var(--neutral-950);
44
44
  }
45
45
 
46
46
  .dark::-webkit-scrollbar-track:hover,
47
47
  .dark ::-webkit-scrollbar-track:hover {
48
- background-color: #1f2937; /* hover:bg-gray-800 */
48
+ background-color: var(--neutral-800);
49
49
  }
50
50
 
51
51
  .dark::-webkit-scrollbar-thumb,
52
52
  .dark ::-webkit-scrollbar-thumb {
53
- background-color: #4b5563; /* bg-gray-600 */
53
+ background-color: var(--neutral-600);
54
54
  }
55
55
 
56
56
  .dark::-webkit-scrollbar-thumb:hover,
57
57
  .dark ::-webkit-scrollbar-thumb:hover {
58
- background-color: #6b7280; /* hover:bg-gray-500 */
58
+ background-color: var(--neutral-500);
59
59
  }
60
60
 
61
61
  @supports (-moz-appearance: none) {
62
62
  .light * {
63
63
  scrollbar-width: thin;
64
- scrollbar-color: #9ca3af #f9fafb; /* thumb color track color */
64
+ scrollbar-color: var(--neutral-400) var(--neutral-50);
65
65
  }
66
66
 
67
67
  .dark * {
68
68
  scrollbar-width: thin;
69
- scrollbar-color: #4b5563 #030712; /* thumb color track color */
69
+ scrollbar-color: var(--neutral-600) var(--neutral-950);
70
70
  }
71
71
  }
72
72
 
73
73
  html.dark {
74
- background-color: #030712; /* bg-gray-950 */
74
+ background-color: var(--neutral-950);
75
75
  }
76
76
 
77
77
  html.light {
78
- background-color: #f9fafb; /* bg-gray-50 */
78
+ background-color: var(--neutral-50);
79
79
  }
80
80
 
81
81
  html.vl-dark #storybook-root {
82
- background-color: #111827; /* bg-gray-900 */
82
+ background-color: var(--neutral-900);
83
83
  }
84
84
 
85
85
  .light .sbdocs .sbdocs-content > h1,
@@ -91,7 +91,7 @@ html.vl-dark #storybook-root {
91
91
  .light .sbdocs .sbdocs-content > p,
92
92
  .light .sbdocs .sbdocs-content > table th,
93
93
  .light .sbdocs .sbdocs-content > table td {
94
- color: #111827 !important; /* !text-gray-900 */
94
+ color: var(--neutral-900) !important;
95
95
  }
96
96
 
97
97
  .dark .sbdocs .sbdocs-content > h1,
@@ -103,7 +103,7 @@ html.vl-dark #storybook-root {
103
103
  .dark .sbdocs .sbdocs-content > p,
104
104
  .dark .sbdocs .sbdocs-content > table th,
105
105
  .dark .sbdocs .sbdocs-content > table td {
106
- color: #e5e7eb !important; /* !text-gray-200 */
106
+ color: var(--neutral-200) !important;
107
107
  }
108
108
 
109
109
  .sbdocs .sbdocs-content > table tr {
@@ -127,163 +127,163 @@ html.vl-dark #storybook-root {
127
127
  }
128
128
 
129
129
  .light .sbdocs .sbdocs-content > table th {
130
- background-color: #f3f4f6; /* bg-gray-100 */
131
- border-color: #e5e7eb; /* border-gray-200 */
130
+ background-color: var(--neutral-100);
131
+ border-color: var(--neutral-200);
132
132
  }
133
133
 
134
134
  .light .sbdocs .sbdocs-content > table td {
135
- background-color: #ffffff; /* bg-white */
136
- border-color: #e5e7eb; /* border-gray-200 */
135
+ background-color: var(--white);
136
+ border-color: var(--neutral-200);
137
137
  }
138
138
 
139
139
  .light .sbdocs .sbdocs-content > table {
140
- border-radius: 0.5rem; /* rounded-lg */
141
- outline: 1px solid #e5e7eb; /* outline-1 outline-gray-200 */
142
- overflow: hidden; /* overflow-hidden */
140
+ border-radius: var(--rounded-lg);
141
+ outline: 1px solid var(--neutral-200);
142
+ overflow: hidden;
143
143
  }
144
144
 
145
145
  .dark .sbdocs .sbdocs-content > table th {
146
- background-color: #1f2937; /* bg-gray-800 */
147
- border-color: #374151; /* border-gray-700 */
146
+ background-color: var(--neutral-800);
147
+ border-color: var(--neutral-700);
148
148
  }
149
149
 
150
150
  .dark .sbdocs .sbdocs-content > table td {
151
- background-color: #111827; /* bg-gray-900 */
152
- border-color: #374151; /* border-gray-700 */
151
+ background-color: var(--neutral-900);
152
+ border-color: var(--neutral-700);
153
153
  }
154
154
 
155
155
  .dark .sbdocs .sbdocs-content > table {
156
- border-radius: 0.5rem; /* rounded-lg */
157
- outline: 1px solid #374151; /* outline-1 outline-gray-700 */
158
- overflow: hidden; /* overflow-hidden */
156
+ border-radius: var(--rounded-lg);
157
+ outline: 1px solid var(--neutral-700);
158
+ overflow: hidden;
159
159
  }
160
160
 
161
161
  /* -------------------- Storybook preview skeleton -------------------- */
162
162
 
163
163
  .light .sb-preparing-docs,
164
164
  .light .sb-preparing-story {
165
- background-color: #f9fafb; /* bg-gray-50 */
165
+ background-color: var(--neutral-50);
166
166
  }
167
167
 
168
168
  .light .sb-previewBlock {
169
- background-color: #ffffff; /* bg-white */
170
- border-color: #e5e7eb; /* border-gray-200 */
171
- border-radius: 0.5rem; /* rounded-lg */
169
+ background-color: var(--white);
170
+ border-color: var(--neutral-200);
171
+ border-radius: var(--rounded-lg);
172
172
  box-shadow: none !important;
173
173
  }
174
174
 
175
175
  .light .sb-previewBlock_header {
176
- border-style: solid; /* border-solid */
177
- border-bottom-width: 1px; /* border-b */
178
- border-bottom-color: #e5e7eb !important; /* !border-b-gray-200 */
176
+ border-style: solid;
177
+ border-bottom-width: 1px;
178
+ border-bottom-color: var(--neutral-200) !important;
179
179
  box-shadow: none !important;
180
180
  }
181
181
 
182
182
  .light .sb-previewBlock_icon {
183
- background-color: #d1d5db; /* bg-gray-300 */
183
+ background-color: var(--neutral-300);
184
184
  }
185
185
 
186
186
  .light .sb-argstableBlock-body {
187
- border-radius: 0.125rem; /* rounded-sm */
187
+ border-radius: var(--rounded-sm);
188
188
  box-shadow: rgb(0 0 0 / 5%) 0 1px 3px 1px, rgb(0 0 0 / 4%) 0 0 0 1px;
189
189
  }
190
190
 
191
191
  .light .sb-argstableBlock-body td {
192
- background-color: #ffffff; /* bg-white */
193
- border-style: solid; /* border-solid */
194
- border-bottom-width: 1px; /* border-b */
195
- border-bottom-color: #e5e7eb !important; /* !border-b-gray-200 */
192
+ background-color: var(--white);
193
+ border-style: solid;
194
+ border-bottom-width: 1px;
195
+ border-bottom-color: var(--neutral-200) !important;
196
196
  }
197
197
 
198
198
  .light .sb-argstableBlock-body tr:last-child td {
199
- border-bottom-width: 0px; /* border-b-0 */
199
+ border-bottom-width: 0px;
200
200
  }
201
201
 
202
202
  .light .sb-argstableBlock span,
203
203
  .light .sb-argstableBlock button {
204
- background-color: #e5e7eb; /* bg-gray-200 */
204
+ background-color: var(--neutral-200);
205
205
  }
206
206
 
207
207
  .dark .sb-preparing-docs,
208
208
  .dark .sb-preparing-story {
209
- background-color: #030712; /* bg-gray-950 */
209
+ background-color: var(--neutral-950);
210
210
  }
211
211
 
212
212
  .dark .sb-previewBlock {
213
- background-color: #111827; /* bg-gray-900 */
214
- border-color: #1f2937; /* border-gray-800 */
215
- border-radius: 0.5rem; /* rounded-lg */
213
+ background-color: var(--neutral-900);
214
+ border-color: var(--neutral-800);
215
+ border-radius: var(--rounded-lg);
216
216
  box-shadow: none !important;
217
217
  }
218
218
 
219
219
  .dark .sb-previewBlock_header {
220
- border-style: solid; /* border-solid */
221
- border-bottom-width: 1px; /* border-b */
222
- border-bottom-color: #1f2937 !important; /* !border-b-gray-800 */
220
+ border-style: solid;
221
+ border-bottom-width: 1px;
222
+ border-bottom-color: var(--neutral-800) !important;
223
223
  box-shadow: none !important;
224
224
  }
225
225
 
226
226
  .dark .sb-previewBlock_icon {
227
- background-color: #374151; /* bg-gray-700 */
227
+ background-color: var(--neutral-700);
228
228
  }
229
229
 
230
230
  .dark .sb-argstableBlock-body {
231
- border-radius: 0.125rem; /* rounded-sm */
231
+ border-radius: var(--rounded-sm);
232
232
  box-shadow: rgb(255 255 255 / 10%) 0 1px 3px 1px, rgb(255 255 255 / 7%) 0 0 0 1px;
233
233
  }
234
234
 
235
235
  .dark .sb-argstableBlock-body td {
236
- background-color: #111827; /* bg-gray-900 */
237
- border-style: solid; /* border-solid */
238
- border-bottom-width: 1px; /* border-b */
239
- border-bottom-color: #1f2937 !important; /* !border-b-gray-800 */
236
+ background-color: var(--neutral-900);
237
+ border-style: solid;
238
+ border-bottom-width: 1px;
239
+ border-bottom-color: var(--neutral-800) !important;
240
240
  }
241
241
 
242
242
  .dark .sb-argstableBlock-body tr:last-child td {
243
- border-bottom-width: 0px; /* border-b-0 */
243
+ border-bottom-width: 0px;
244
244
  }
245
245
 
246
246
  .dark .sb-argstableBlock span,
247
247
  .dark .sb-argstableBlock button {
248
- background-color: #374151; /* bg-gray-700 */
248
+ background-color: var(--neutral-700);
249
249
  }
250
250
 
251
251
  /* -------------------- All docs block -------------------- */
252
252
 
253
253
  .dark .sbdocs {
254
- background-color: #030712; /* bg-gray-950 */
254
+ background-color: var(--neutral-950);
255
255
  }
256
256
 
257
257
  /* -------------------- Main story -------------------- */
258
258
 
259
259
  .sb-anchor {
260
- margin-top: 0.5rem; /* mt-2 */
260
+ margin-top: 0.5rem;
261
261
  }
262
262
 
263
263
  .sb-anchor > p {
264
- margin-top: -0.5rem; /* mt-2 */
265
- margin-bottom: -0.5rem; /* -mt-2 */
264
+ margin-top: -0.5rem;
265
+ margin-bottom: -0.5rem;
266
266
  }
267
267
 
268
268
  .dark .sb-anchor > p > a {
269
- color: #4ade80; /* text-green-400 */
270
- text-decoration: underline dashed #4ade80;
269
+ color: var(--primary-400);
270
+ text-decoration: underline dashed var(--primary-400);
271
271
  }
272
272
 
273
273
  .light .sb-anchor > p > a {
274
- color: #16a34a; /* text-green-600 */
275
- text-decoration: underline dashed #16a34a;
274
+ color: var(--primary-600);
275
+ text-decoration: underline dashed var(--primary-600);
276
276
  }
277
277
 
278
278
  .sb-bar,
279
279
  .docs-story {
280
- background-color: #ffffff; /* bg-white */
280
+ background-color: var(--white);
281
281
  }
282
282
 
283
283
  .vl-dark .sb-bar,
284
284
  .vl-dark .docs-story,
285
285
  .vl-dark .docs-story + div {
286
- background-color: #111827 !important; /* !bg-gray-900 */
286
+ background-color: var(--neutral-900) !important;
287
287
  }
288
288
 
289
289
  /* prevents showing scrollbar in buttons stories */
@@ -292,36 +292,36 @@ html.vl-dark #storybook-root {
292
292
  }
293
293
 
294
294
  .sb-bar {
295
- border-width: 0; /* border-0 */
295
+ border-width: 0;
296
296
  }
297
297
 
298
298
  .dark .sb-bar {
299
- border-bottom: 1px solid #d1d5db; /* border-b border-gray-300 */
299
+ border-bottom: 1px solid var(--neutral-300);
300
300
  box-shadow: none !important;
301
301
  }
302
302
 
303
303
  .vl-dark .sb-bar {
304
- border-bottom: 1px solid #1f2937; /* border-b border-gray-800 */
304
+ border-bottom: 1px solid var(--neutral-800);
305
305
  box-shadow: none !important;
306
306
  }
307
307
 
308
308
  .sbdocs.sbdocs-preview .prismjs {
309
- border-top: 1px solid #374151; /* border-t border-t-gray-700 */
310
- background-color: #1f2937; /* bg-gray-800 */
309
+ border-top: 1px solid var(--neutral-700);
310
+ background-color: var(--neutral-800);
311
311
  }
312
312
 
313
313
  .vl-dark .docblock-code-toggle {
314
- background-color: #1f2937; /* bg-gray-800 */
315
- border-color: #1f2937; /* border-gray-800 */
316
- color: #9ca3af; /* text-gray-400 */
314
+ background-color: var(--neutral-800);
315
+ border-color: var(--neutral-800);
316
+ color: var(--neutral-400);
317
317
  }
318
318
 
319
319
  .vl-light .docblock-code-toggle {
320
- border: 1px solid #d1d5db !important; /* !border border-gray-300 */
320
+ border: 1px solid var(--neutral-300) !important;
321
321
  }
322
322
 
323
323
  .vl-dark .docblock-code-toggle {
324
- border: 1px solid #374151 !important; /* !border border-gray-700 */
324
+ border: 1px solid var(--neutral-700) !important;
325
325
  }
326
326
 
327
327
  .docblock-code-toggle,
@@ -329,7 +329,7 @@ html.vl-dark #storybook-root {
329
329
  .docs-story > div > button,
330
330
  .docs-story + div > div > button {
331
331
  margin: 0 4px 4px 0 !important;
332
- border-radius: 8px !important;
332
+ border-radius: var(--rounded-lg) !important;
333
333
  box-shadow: none !important;
334
334
  }
335
335
 
@@ -341,17 +341,22 @@ html.vl-dark #storybook-root {
341
341
  }
342
342
 
343
343
  .sbdocs-preview {
344
- border-radius: 8px !important;
344
+ border-radius: var(--rounded-lg) !important;
345
345
  box-shadow: none !important;
346
346
  }
347
347
 
348
348
  .dark .sbdocs.sbdocs-preview,
349
349
  .vl-dark .sbdocs.sbdocs-preview {
350
- border-color: #1f2937; /* border-gray-800 */
350
+ border-color: var(--neutral-800);
351
351
  }
352
352
 
353
353
  /* -------------------- Args table -------------------- */
354
354
 
355
+ .docblock-argstable {
356
+ border-collapse: separate;
357
+ border-spacing: 0;
358
+ }
359
+
355
360
  @media screen and (max-width: 600px) {
356
361
  div:has(> .docblock-argstable) {
357
362
  margin-bottom: 2.5rem !important;
@@ -365,26 +370,46 @@ html.vl-dark #storybook-root {
365
370
 
366
371
  .dark .docblock-argstable,
367
372
  .dark .docblock-argstable-head th {
368
- color: rgb(229, 231, 235) !important; /* text-gray-200 */
373
+ color: var(--neutral-200) !important;
369
374
  }
370
375
 
371
376
  .docblock-argstable-body {
372
- border-radius: 0.5rem; /* rounded-lg */
377
+ border-radius: var(--rounded-lg);
373
378
  filter: none !important;
374
379
  }
375
380
 
376
381
  .docblock-argstable-body tr td {
377
- border-radius: 0 !important; /* !rounded-none */
382
+ border-radius: 0 !important;
383
+ }
384
+
385
+ .docblock-argstable-body tr:first-child td:first-child {
386
+ border-top-left-radius: var(--rounded-lg) !important;
387
+ }
388
+
389
+ .docblock-argstable-body tr:first-child td:last-child {
390
+ border-top-right-radius: var(--rounded-lg) !important;
391
+ }
392
+
393
+ .docblock-argstable-body tr:last-child td:first-child {
394
+ border-bottom-left-radius: var(--rounded-lg) !important;
395
+ }
396
+
397
+ .docblock-argstable-body tr:last-child td:last-child {
398
+ border-bottom-right-radius: var(--rounded-lg) !important;
378
399
  }
379
400
 
380
401
  .docblock-argstable-body tr:not([title]) > td {
381
- background-color: #fff !important; /* bg-white */
402
+ background-color: var(--white) !important;
403
+ }
404
+
405
+ .light .docblock-argstable-body tr:first-child > td {
406
+ border-top: 1px solid var(--neutral-800) !important;
382
407
  }
383
408
 
384
409
  .dark .docblock-argstable-body tr > td {
385
- border-top: 1px solid rgb(31, 41, 55) !important;
386
- border-bottom: 1px solid rgb(31, 41, 55) !important; /* border-b border-gray-800 */
387
- background-color: rgb(17, 24, 39) !important; /* bg-gray-900 */
410
+ border-top: 0px solid transparent !important;
411
+ border-bottom: 1px solid var(--neutral-800) !important;
412
+ background-color: var(--neutral-900) !important;
388
413
  border-inline-start-style: solid;
389
414
  border-inline-start-width: 0;
390
415
  border-inline-end-style: solid;
@@ -393,21 +418,35 @@ html.vl-dark #storybook-root {
393
418
 
394
419
  .dark .docblock-argstable-body tr > td:first-child,
395
420
  .dark .docblock-argstable-body tr > td:last-child {
396
- border-inline-start-color: rgb(31, 41, 55) !important; /* border-s-gray-800 */
397
- border-inline-end-color: rgb(31, 41, 55) !important; /* border-s-gray-800 */
421
+ border-inline-start-color: var(--neutral-800) !important;
422
+ border-inline-end-color: var(--neutral-800) !important;
398
423
  }
399
424
 
400
425
  .dark .docblock-argstable-body {
401
- border-bottom: 1px solid rgb(31, 41, 55); /* border-b-gray-800 */
426
+ border-bottom: 1px solid var(--neutral-800);
402
427
  }
403
428
 
404
429
  .dark .docblock-argstable-body tr[title] > td {
405
- background-color: rgb(31, 41, 55) !important;
406
- color: rgb(156, 163, 175) !important; /* text-gray-400 */
430
+ background-color: var(--neutral-800) !important;
431
+ color: var(--neutral-400) !important;
407
432
  }
408
433
 
409
434
  .dark .docblock-argstable-body tr[title] > td svg {
410
- color: rgb(156, 163, 175) !important; /* text-gray-400 */
435
+ color: var(--neutral-400) !important;
436
+ }
437
+
438
+ .light .docblock-argstable-body tr:first-child > td {
439
+ border-top: 1px solid var(--neutral-200) !important;
440
+ }
441
+
442
+ .light .docblock-argstable-body tr > td {
443
+ border-top: 0px solid transparent !important;
444
+ border-bottom: 1px solid var(--neutral-200) !important;
445
+ background-color: var(--white) !important;
446
+ border-inline-start-style: solid;
447
+ border-inline-start-width: 0;
448
+ border-inline-end-style: solid;
449
+ border-inline-end-width: 0;
411
450
  }
412
451
 
413
452
  .light .sbdocs .sbdocs-content code,
@@ -416,9 +455,9 @@ html.vl-dark #storybook-root {
416
455
  .light .docblock-argstable-body tr > td:nth-child(2) > div > div > span[class],
417
456
  .light .docblock-argstable-body tr > td:nth-child(3) > div > span[class],
418
457
  .light .docblock-argstable-body tr > td:nth-child(3) > span[class] {
419
- background-color: rgb(243, 244, 246); /* bg-gray-100 */
420
- border-color: rgb(229, 231, 235); /* border-gray-200 */
421
- color: rgb(31, 41, 55); /* text-gray-800 */
458
+ background-color: var(--neutral-100);
459
+ border-color: var(--neutral-200);
460
+ color: var(--neutral-800);
422
461
  }
423
462
 
424
463
  .dark .rejt-value-node:hover .rejt-value,
@@ -428,21 +467,21 @@ html.vl-dark #storybook-root {
428
467
  .dark .docblock-argstable-body tr > td:nth-child(2) > div > div > span[class],
429
468
  .dark .docblock-argstable-body tr > td:nth-child(3) > div > span[class],
430
469
  .dark .docblock-argstable-body tr > td:nth-child(3) > span[class] {
431
- background-color: rgb(31, 41, 55) !important; /* bg-gray-800 */
432
- border-color: rgba(55, 65, 81, 0.5) !important; /* border-gray-700/50 */
433
- color: rgb(156, 163, 175); /* text-gray-400 */
434
- border-radius: 4px !important;
470
+ background-color: var(--neutral-800) !important;
471
+ border-color: var(--neutral-700) !important;
472
+ color: var(--neutral-400);
473
+ border-radius: var(--rounded-sm) !important;
435
474
  }
436
475
 
437
476
  .dark .sb-story code,
438
477
  .light .sb-story code {
439
478
  background-color: inherit !important;
440
479
  color: inherit !important;
441
- border-radius: 4px !important;
480
+ border-radius: var(--rounded-sm) !important;
442
481
  }
443
482
 
444
483
  .dark .docblock-argstable-body tr > td > div + div > span:not([class]) {
445
- color: rgb(156, 163, 175); /* text-gray-400 */
484
+ color: var(--neutral-400);
446
485
  }
447
486
 
448
487
  .dark .docblock-argstable-body tr > td .rejt-edit-form,
@@ -450,9 +489,9 @@ html.vl-dark #storybook-root {
450
489
  .dark .docblock-argstable-body tr > td textarea,
451
490
  .dark .docblock-argstable-body tr > td select,
452
491
  .dark .docblock-argstable-body tr > td:nth-child(4) button {
453
- color: rgb(229, 231, 235); /* text-gray-200 */
454
- background-color: rgb(31, 41, 55); /* bg-gray-800 */
455
- border: 1px solid rgba(55, 65, 81, 0.5); /* border-gray-700/50 */
492
+ color: var(--neutral-200);
493
+ background-color: var(--neutral-800);
494
+ border: 1px solid var(--neutral-700);
456
495
  font-size: 13px;
457
496
  box-shadow: none !important;
458
497
  color-scheme: dark;
@@ -463,7 +502,7 @@ html.vl-dark #storybook-root {
463
502
  .dark .docblock-argstable-body tr > td textarea:hover,
464
503
  .dark .docblock-argstable-body tr > td select:hover,
465
504
  .dark .docblock-argstable-body tr > td:nth-child(4) button:hover {
466
- border: 1px solid #4b5563; /* border-gray-600 */
505
+ border: 1px solid var(--neutral-600);
467
506
  }
468
507
 
469
508
  .dark .docblock-argstable-body tr > td .rejt-edit-form:focus,
@@ -471,7 +510,7 @@ html.vl-dark #storybook-root {
471
510
  .dark .docblock-argstable-body tr > td textarea:focus,
472
511
  .dark .docblock-argstable-body tr > td select:focus,
473
512
  .dark .docblock-argstable-body tr > td:nth-child(4) button:focus {
474
- border: 1px solid rgb(107, 114, 128); /* border-gray-500 */
513
+ border: 1px solid var(--neutral-500);
475
514
  }
476
515
 
477
516
  .docblock-argstable-body tr > td .rejt-add-value-node button {
@@ -483,7 +522,7 @@ html.vl-dark #storybook-root {
483
522
  }
484
523
 
485
524
  .light .docblock-argstable-body tr > td .rejt-add-value-node button[type="submit"] {
486
- background-color: #fff;
525
+ background-color: var(--white);
487
526
  }
488
527
 
489
528
  .light .docblock-argstable-body tr > td .rejt-edit-form,
@@ -491,8 +530,8 @@ html.vl-dark #storybook-root {
491
530
  .light .docblock-argstable-body tr > td textarea,
492
531
  .light .docblock-argstable-body tr > td select,
493
532
  .light .docblock-argstable-body tr > td:nth-child(4) button {
494
- color: rgb(17, 24, 39); /* text-gray-900 */
495
- border: 1px solid rgb(209, 213, 219); /* border-gray-300 */
533
+ color: var(--neutral-900);
534
+ border: 1px solid var(--neutral-300);
496
535
  font-size: 13px;
497
536
  box-shadow: none !important;
498
537
  }
@@ -502,7 +541,7 @@ html.vl-dark #storybook-root {
502
541
  .light .docblock-argstable-body tr > td textarea:hover,
503
542
  .light .docblock-argstable-body tr > td select:hover,
504
543
  .light .docblock-argstable-body tr > td:nth-child(4) button:hover {
505
- border: 1px solid rgb(156, 163, 175); /* border-gray-400 */
544
+ border: 1px solid var(--neutral-400);
506
545
  }
507
546
 
508
547
  .light .docblock-argstable-body tr > td .rejt-edit-form:focus,
@@ -510,99 +549,99 @@ html.vl-dark #storybook-root {
510
549
  .light .docblock-argstable-body tr > td textarea:focus,
511
550
  .light .docblock-argstable-body tr > td select:focus,
512
551
  .light .docblock-argstable-body tr > td:nth-child(4) button:focus {
513
- border: 1px solid rgb(107, 114, 128); /* border-gray-500 */
552
+ border: 1px solid var(--neutral-500);
514
553
  }
515
554
 
516
555
  .dark .docblock-argstable-body label[aria-disabled] {
517
- background-color: rgb(31, 41, 55); /* bg-gray-800 */
556
+ background-color: var(--neutral-800);
518
557
  }
519
558
 
520
559
  .dark .docblock-argstable-body label[aria-disabled] span {
521
- color: rgb(229, 231, 235); /* text-gray-200 */
560
+ color: var(--neutral-200);
522
561
  }
523
562
 
524
563
  .dark .docblock-argstable-body [type='checkbox'],
525
564
  .dark .docblock-argstable-body [type='radio'] {
526
- border: 1px solid rgb(55, 65, 81) !important; /* border-gray-700 */
565
+ border: 1px solid var(--neutral-700) !important;
527
566
  box-shadow: none !important;
528
567
  }
529
568
 
530
569
  .dark .docblock-argstable-body [type='radio']:checked {
531
- background-color: rgb(17, 24, 39); /* bg-gray-900 */
570
+ background-color: var(--neutral-900);
532
571
  }
533
572
 
534
573
  .light .docblock-argstable-body [type='radio']:checked {
535
- background-color: rgb(17, 24, 39) !important; /* bg-gray-900 */
574
+ background-color: var(--neutral-900) !important;
536
575
  }
537
576
 
538
577
  .docblock-argstable [type='checkbox']:focus,
539
578
  .docblock-argstable [type='radio']:focus {
540
- outline-color: rgb(209, 213, 219) !important; /* ring-gray-300 */
579
+ outline-color: var(--neutral-300) !important;
541
580
  }
542
581
 
543
582
  .dark .rejt-name,
544
583
  .dark .rejt-collapsed-text {
545
- color: rgb(156, 163, 175) !important; /* text-gray-400 */
584
+ color: var(--neutral-400) !important;
546
585
  }
547
586
 
548
587
  .dark .rejt-value {
549
- color: rgb(229, 231, 235) !important; /* text-gray-200 */
588
+ color: var(--neutral-200) !important;
550
589
  }
551
590
 
552
591
  /* -------------------- Code block and user markdown -------------------- */
553
592
 
554
593
  #storybook-docs h2 {
555
- margin-top: 2rem; /* mt-8 */
556
- margin-bottom: 1.5rem; /* mb-6 */
557
- padding-bottom: 0.5rem; /* pb-2 */
558
- font-weight: 700; /* font-bold */
594
+ margin-top: 2rem;
595
+ margin-bottom: 1.5rem;
596
+ padding-bottom: 0.5rem;
597
+ font-weight: 700;
559
598
  }
560
599
 
561
600
  .dark h2 {
562
- border-bottom-color: rgb(31, 41, 55); /* border-b-gray-800 */
601
+ border-bottom-color: var(--neutral-800);
563
602
  }
564
603
 
565
604
  .docblock-source {
566
- background-color: rgb(31, 41, 55) !important; /* !bg-gray-800 */
567
- border-color: rgb(31, 41, 55); /* border-gray-800 */
605
+ background-color: var(--neutral-800) !important;
606
+ border-color: var(--neutral-800);
568
607
  box-shadow: none !important;
569
- border-radius: 8px !important;
608
+ border-radius: var(--rounded-lg) !important;
570
609
  }
571
610
 
572
611
  .dark .docblock-source {
573
- background-color: rgb(17, 24, 39) !important; /* !bg-gray-900 */
574
- border-color: rgb(31, 41, 55) !important; /* !border-gray-800 */
612
+ background-color: var(--neutral-900) !important;
613
+ border-color: var(--neutral-800) !important;
575
614
  }
576
615
 
577
616
  .dark .docblock-source button {
578
- background-color: rgb(31, 41, 55); /* bg-gray-800 */
579
- border-color: rgb(31, 41, 55); /* border-gray-800 */
580
- color: rgb(156, 163, 175); /* text-gray-400 */
581
- border-top-left-radius: 0; /* rounded-tl-none */
617
+ background-color: var(--neutral-800);
618
+ border-color: var(--neutral-800);
619
+ color: var(--neutral-400);
620
+ border-top-left-radius: 0;
582
621
  }
583
622
 
584
623
  .dark a.sbdocs.sbdocs-a {
585
- color: #6b7280; /* text-gray-500 */
624
+ color: var(--neutral-500);
586
625
  }
587
626
 
588
627
  .light a.sbdocs.sbdocs-a {
589
- color: #6b7280; /* text-gray-500 */
628
+ color: var(--neutral-500);
590
629
  }
591
630
 
592
631
  .light a.sbdocs.sbdocs-a:hover,
593
- .dark a.sbdocs.sbdocs-a:hover{
594
- text-decoration: underline dashed #6b7280; /* text-gray-500 */
632
+ .dark a.sbdocs.sbdocs-a:hover {
633
+ text-decoration: underline dashed var(--neutral-500);
595
634
  text-underline-offset: 3px;
596
635
  }
597
636
 
598
637
  /* -------------------- Storybook story preview -------------------- */
599
638
 
600
639
  .vl-dark {
601
- min-height: 100%; /* min-h-full */
602
- background-color: rgb(17, 24, 39); /* bg-gray-900 */
640
+ min-height: 100%;
641
+ background-color: var(--neutral-900);
603
642
  }
604
643
 
605
644
  .vl-light {
606
- min-height: 100%; /* min-h-full */
607
- background-color: #ffffff; /* bg-white */
645
+ min-height: 100%;
646
+ background-color: var(--white);
608
647
  }