@loworbitstudio/visor-core 0.5.0 → 0.7.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.
package/dist/index.css CHANGED
@@ -5,4 +5,6 @@
5
5
  ============================================ */
6
6
 
7
7
  /* Full design token bundle */
8
+ @layer visor-primitives, visor-semantic, visor-adaptive, visor-bridge;
9
+
8
10
  @import './tokens.css';
@@ -3,7 +3,9 @@
3
3
  Generated by @loworbitstudio/visor-core
4
4
  DO NOT EDIT — run `npm run build` to regenerate
5
5
  ============================================ */
6
+ @layer visor-primitives, visor-semantic, visor-adaptive, visor-bridge;
6
7
 
8
+ @layer visor-primitives {
7
9
  /* --- Primitive: Colors --- */
8
10
  :root {
9
11
  --color-neutral-50: #f9fafb;
@@ -116,6 +118,7 @@
116
118
 
117
119
  /* --- Primitive: Font Sizes --- */
118
120
  :root {
121
+ --font-size-2xs: 0.6875rem; /* 11px */
119
122
  --font-size-xs: 0.75rem; /* 12px */
120
123
  --font-size-sm: 0.875rem; /* 14px */
121
124
  --font-size-base: 1rem; /* 16px */
@@ -214,3 +217,4 @@
214
217
  --motion-easing-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
215
218
  --motion-easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
216
219
  }
220
+ }
package/dist/semantic.css CHANGED
@@ -3,7 +3,9 @@
3
3
  Generated by @loworbitstudio/visor-core
4
4
  DO NOT EDIT — run `npm run build` to regenerate
5
5
  ============================================ */
6
+ @layer visor-primitives, visor-semantic, visor-adaptive, visor-bridge;
6
7
 
8
+ @layer visor-semantic {
7
9
  /* --- Semantic: Text --- */
8
10
  :root {
9
11
  --text-primary: var(--color-neutral-900);
@@ -45,6 +47,11 @@
45
47
  --surface-error-default: var(--color-error-500);
46
48
  --surface-info-subtle: var(--color-info-50);
47
49
  --surface-info-default: var(--color-info-500);
50
+ --surface-elev-0: var(--color-neutral-950);
51
+ --surface-elev-1: var(--color-neutral-900);
52
+ --surface-elev-2: var(--color-neutral-800);
53
+ --surface-elev-3: var(--color-neutral-700);
54
+ --surface-elev-4: var(--color-neutral-600);
48
55
  }
49
56
 
50
57
 
@@ -169,3 +176,4 @@
169
176
  --sidebar-ring: var(--color-primary-500);
170
177
  --sidebar-text-muted: var(--color-neutral-500);
171
178
  }
179
+ }
@@ -1,4 +1,6 @@
1
+ @layer visor-primitives, visor-semantic, visor-adaptive, visor-bridge;
1
2
 
3
+ @layer visor-adaptive {
2
4
  /* ── Section 1: Shared tokens (mode-independent) ── */
3
5
 
4
6
  /* --- Primitive: Colors --- */
@@ -12,62 +14,62 @@
12
14
  --color-white: #ffffff;
13
15
  --color-black: #000000;
14
16
  --color-primary-50: #f5f5f5;
15
- --color-primary-100: #f2f2f2;
16
- --color-primary-200: #ededed;
17
- --color-primary-300: #e6e6e6;
18
- --color-primary-400: #dcdcdc;
17
+ --color-primary-100: #e6e6e6;
18
+ --color-primary-200: #d1d1d1;
19
+ --color-primary-300: #b2b2b2;
20
+ --color-primary-400: #868686;
19
21
  --color-primary-500: #666666;
20
- --color-primary-600: #555555;
21
- --color-primary-700: #424242;
22
- --color-primary-800: #2e2e2e;
23
- --color-primary-900: #1b1b1b;
22
+ --color-primary-600: #4d4d4d;
23
+ --color-primary-700: #3c3c3c;
24
+ --color-primary-800: #2a2a2a;
25
+ --color-primary-900: #191919;
24
26
  --color-primary-950: #090909;
25
27
  --color-accent-50: #f5f5f5;
26
- --color-accent-100: #f2f2f2;
27
- --color-accent-200: #ededed;
28
- --color-accent-300: #e6e6e6;
29
- --color-accent-400: #dcdcdc;
28
+ --color-accent-100: #e6e6e6;
29
+ --color-accent-200: #d1d1d1;
30
+ --color-accent-300: #b2b2b2;
31
+ --color-accent-400: #868686;
30
32
  --color-accent-500: #666666;
31
- --color-accent-600: #555555;
32
- --color-accent-700: #424242;
33
- --color-accent-800: #2e2e2e;
34
- --color-accent-900: #1b1b1b;
33
+ --color-accent-600: #4d4d4d;
34
+ --color-accent-700: #3c3c3c;
35
+ --color-accent-800: #2a2a2a;
36
+ --color-accent-900: #191919;
35
37
  --color-accent-950: #090909;
36
38
  --color-neutral-50: #f5f5f5;
37
- --color-neutral-100: #f1f1f1;
38
- --color-neutral-200: #eaeaea;
39
- --color-neutral-300: #e0e0e0;
40
- --color-neutral-400: #d2d2d2;
39
+ --color-neutral-100: #e0e0e0;
40
+ --color-neutral-200: #c2c2c2;
41
+ --color-neutral-300: #979797;
42
+ --color-neutral-400: #5c5c5c;
41
43
  --color-neutral-500: #333333;
42
- --color-neutral-600: #555555;
43
- --color-neutral-700: #424242;
44
- --color-neutral-800: #2e2e2e;
45
- --color-neutral-900: #1b1b1b;
44
+ --color-neutral-600: #282828;
45
+ --color-neutral-700: #212121;
46
+ --color-neutral-800: #181818;
47
+ --color-neutral-900: #101011;
46
48
  --color-neutral-950: #090909;
47
49
  --color-success-50: #e8fbeb;
48
- --color-success-100: #defde3;
50
+ --color-success-100: #d8f7dc;
49
51
  --color-success-500: #22c55e;
50
- --color-success-600: #00672b;
51
- --color-success-700: #005120;
52
- --color-success-900: #002209;
52
+ --color-success-600: #019341;
53
+ --color-success-700: #017231;
54
+ --color-success-900: #002b0e;
53
55
  --color-warning-50: #fff3e6;
54
- --color-warning-100: #fff1e3;
56
+ --color-warning-100: #ffebd5;
55
57
  --color-warning-500: #f59e0b;
56
- --color-warning-600: #774a01;
57
- --color-warning-700: #5e3900;
58
- --color-warning-900: #281600;
58
+ --color-warning-600: #b77401;
59
+ --color-warning-700: #8d5800;
60
+ --color-warning-900: #361f00;
59
61
  --color-error-50: #fff2f0;
60
- --color-error-100: #ffefed;
62
+ --color-error-100: #ffe3e0;
61
63
  --color-error-500: #ef4444;
62
- --color-error-600: #a30016;
63
- --color-error-700: #81000f;
64
- --color-error-900: #3a0003;
64
+ --color-error-600: #c3041e;
65
+ --color-error-700: #990015;
66
+ --color-error-900: #410004;
65
67
  --color-info-50: #ecf7ff;
66
- --color-info-100: #e8f5ff;
68
+ --color-info-100: #daf0ff;
67
69
  --color-info-500: #0ea5e9;
68
- --color-info-600: #005c85;
69
- --color-info-700: #004869;
70
- --color-info-900: #001d2e;
70
+ --color-info-600: #017baf;
71
+ --color-info-700: #005f88;
72
+ --color-info-900: #002437;
71
73
  }
72
74
 
73
75
 
@@ -184,10 +186,10 @@
184
186
  --text-secondary: rgba(255, 255, 255, 0.70);
185
187
  --text-tertiary: rgba(255, 255, 255, 0.55);
186
188
  --text-disabled: rgba(255, 255, 255, 0.1);
187
- --text-inverse: #1b1b1b;
188
- --text-inverse-secondary: #424242;
189
- --text-link: #dcdcdc;
190
- --text-link-hover: #e6e6e6;
189
+ --text-inverse: #101011;
190
+ --text-inverse-secondary: #212121;
191
+ --text-link: #868686;
192
+ --text-link-hover: #b2b2b2;
191
193
  --text-success: #22c55e;
192
194
  --text-warning: #f59e0b;
193
195
  --text-error: #ef4444;
@@ -203,22 +205,27 @@
203
205
  --surface-subtle: rgba(255, 255, 255, 0.02);
204
206
  --surface-muted: rgba(255, 255, 255, 0.04);
205
207
  --surface-overlay: #090909;
206
- --surface-interactive-default: #2e2e2e;
207
- --surface-interactive-hover: #424242;
208
- --surface-interactive-active: #555555;
209
- --surface-interactive-disabled: #2e2e2e;
210
- --surface-selected: #2e2e2e;
211
- --surface-accent-subtle: #1b1b1b;
208
+ --surface-interactive-default: #181818;
209
+ --surface-interactive-hover: #212121;
210
+ --surface-interactive-active: #282828;
211
+ --surface-interactive-disabled: #181818;
212
+ --surface-selected: #2a2a2a;
213
+ --surface-accent-subtle: #191919;
212
214
  --surface-accent-default: #666666;
213
- --surface-accent-strong: #dcdcdc;
214
- --surface-success-subtle: #002209;
215
+ --surface-accent-strong: #868686;
216
+ --surface-success-subtle: #002b0e;
215
217
  --surface-success-default: #22c55e;
216
- --surface-warning-subtle: #281600;
218
+ --surface-warning-subtle: #361f00;
217
219
  --surface-warning-default: #f59e0b;
218
- --surface-error-subtle: #3a0003;
220
+ --surface-error-subtle: #410004;
219
221
  --surface-error-default: #ef4444;
220
- --surface-info-subtle: #001d2e;
222
+ --surface-info-subtle: #002437;
221
223
  --surface-info-default: #0ea5e9;
224
+ --surface-elev-0: #090909;
225
+ --surface-elev-1: #101011;
226
+ --surface-elev-2: #181818;
227
+ --surface-elev-3: #212121;
228
+ --surface-elev-4: #282828;
222
229
  }
223
230
 
224
231
 
@@ -227,8 +234,8 @@
227
234
  --border-default: rgba(255, 255, 255, 0.06);
228
235
  --border-muted: rgba(255, 255, 255, 0.03);
229
236
  --border-strong: rgba(255, 255, 255, 0.1);
230
- --border-focus: #dcdcdc;
231
- --border-disabled: #2e2e2e;
237
+ --border-focus: #868686;
238
+ --border-disabled: #181818;
232
239
  --border-success: #22c55e;
233
240
  --border-warning: #f59e0b;
234
241
  --border-error: #ef4444;
@@ -239,19 +246,19 @@
239
246
  /* --- Adaptive: Interactive (dark) — manual toggle --- */
240
247
  .dark .blackout-theme {
241
248
  --interactive-primary-bg: #666666;
242
- --interactive-primary-bg-hover: #dcdcdc;
243
- --interactive-primary-bg-active: #e6e6e6;
249
+ --interactive-primary-bg-hover: #868686;
250
+ --interactive-primary-bg-active: #b2b2b2;
244
251
  --interactive-primary-text: #ffffff;
245
- --interactive-secondary-bg: #2e2e2e;
246
- --interactive-secondary-bg-hover: #424242;
247
- --interactive-secondary-bg-active: #555555;
252
+ --interactive-secondary-bg: #181818;
253
+ --interactive-secondary-bg-hover: #212121;
254
+ --interactive-secondary-bg-active: #282828;
248
255
  --interactive-secondary-text: #f5f5f5;
249
- --interactive-secondary-border: #555555;
256
+ --interactive-secondary-border: #282828;
250
257
  --interactive-destructive-bg: #ef4444;
251
- --interactive-destructive-bg-hover: #a30016;
258
+ --interactive-destructive-bg-hover: #c3041e;
252
259
  --interactive-destructive-text: #ffffff;
253
- --interactive-ghost-bg: #2e2e2e;
254
- --interactive-ghost-bg-hover: #424242;
260
+ --interactive-ghost-bg: #181818;
261
+ --interactive-ghost-bg-hover: #212121;
255
262
  }
256
263
 
257
264
 
@@ -262,10 +269,10 @@
262
269
  --text-secondary: rgba(255, 255, 255, 0.70);
263
270
  --text-tertiary: rgba(255, 255, 255, 0.55);
264
271
  --text-disabled: rgba(255, 255, 255, 0.1);
265
- --text-inverse: #1b1b1b;
266
- --text-inverse-secondary: #424242;
267
- --text-link: #dcdcdc;
268
- --text-link-hover: #e6e6e6;
272
+ --text-inverse: #101011;
273
+ --text-inverse-secondary: #212121;
274
+ --text-link: #868686;
275
+ --text-link-hover: #b2b2b2;
269
276
  --text-success: #22c55e;
270
277
  --text-warning: #f59e0b;
271
278
  --text-error: #ef4444;
@@ -283,22 +290,27 @@
283
290
  --surface-subtle: rgba(255, 255, 255, 0.02);
284
291
  --surface-muted: rgba(255, 255, 255, 0.04);
285
292
  --surface-overlay: #090909;
286
- --surface-interactive-default: #2e2e2e;
287
- --surface-interactive-hover: #424242;
288
- --surface-interactive-active: #555555;
289
- --surface-interactive-disabled: #2e2e2e;
290
- --surface-selected: #2e2e2e;
291
- --surface-accent-subtle: #1b1b1b;
293
+ --surface-interactive-default: #181818;
294
+ --surface-interactive-hover: #212121;
295
+ --surface-interactive-active: #282828;
296
+ --surface-interactive-disabled: #181818;
297
+ --surface-selected: #2a2a2a;
298
+ --surface-accent-subtle: #191919;
292
299
  --surface-accent-default: #666666;
293
- --surface-accent-strong: #dcdcdc;
294
- --surface-success-subtle: #002209;
300
+ --surface-accent-strong: #868686;
301
+ --surface-success-subtle: #002b0e;
295
302
  --surface-success-default: #22c55e;
296
- --surface-warning-subtle: #281600;
303
+ --surface-warning-subtle: #361f00;
297
304
  --surface-warning-default: #f59e0b;
298
- --surface-error-subtle: #3a0003;
305
+ --surface-error-subtle: #410004;
299
306
  --surface-error-default: #ef4444;
300
- --surface-info-subtle: #001d2e;
307
+ --surface-info-subtle: #002437;
301
308
  --surface-info-default: #0ea5e9;
309
+ --surface-elev-0: #090909;
310
+ --surface-elev-1: #101011;
311
+ --surface-elev-2: #181818;
312
+ --surface-elev-3: #212121;
313
+ --surface-elev-4: #282828;
302
314
  }
303
315
  }
304
316
 
@@ -309,8 +321,8 @@
309
321
  --border-default: rgba(255, 255, 255, 0.06);
310
322
  --border-muted: rgba(255, 255, 255, 0.03);
311
323
  --border-strong: rgba(255, 255, 255, 0.1);
312
- --border-focus: #dcdcdc;
313
- --border-disabled: #2e2e2e;
324
+ --border-focus: #868686;
325
+ --border-disabled: #181818;
314
326
  --border-success: #22c55e;
315
327
  --border-warning: #f59e0b;
316
328
  --border-error: #ef4444;
@@ -323,19 +335,19 @@
323
335
  @media (prefers-color-scheme: dark) {
324
336
  .blackout-theme:not(.light) {
325
337
  --interactive-primary-bg: #666666;
326
- --interactive-primary-bg-hover: #dcdcdc;
327
- --interactive-primary-bg-active: #e6e6e6;
338
+ --interactive-primary-bg-hover: #868686;
339
+ --interactive-primary-bg-active: #b2b2b2;
328
340
  --interactive-primary-text: #ffffff;
329
- --interactive-secondary-bg: #2e2e2e;
330
- --interactive-secondary-bg-hover: #424242;
331
- --interactive-secondary-bg-active: #555555;
341
+ --interactive-secondary-bg: #181818;
342
+ --interactive-secondary-bg-hover: #212121;
343
+ --interactive-secondary-bg-active: #282828;
332
344
  --interactive-secondary-text: #f5f5f5;
333
- --interactive-secondary-border: #555555;
345
+ --interactive-secondary-border: #282828;
334
346
  --interactive-destructive-bg: #ef4444;
335
- --interactive-destructive-bg-hover: #a30016;
347
+ --interactive-destructive-bg-hover: #c3041e;
336
348
  --interactive-destructive-text: #ffffff;
337
- --interactive-ghost-bg: #2e2e2e;
338
- --interactive-ghost-bg-hover: #424242;
349
+ --interactive-ghost-bg: #181818;
350
+ --interactive-ghost-bg-hover: #212121;
339
351
  }
340
352
  }
341
353
 
@@ -349,13 +361,13 @@ html:not(.dark) .blackout-theme {
349
361
  --text-tertiary: rgba(255, 255, 255, 0.55);
350
362
  --text-disabled: rgba(255, 255, 255, 0.12);
351
363
  --text-inverse: #ffffff;
352
- --text-inverse-secondary: #eaeaea;
353
- --text-link: #555555;
354
- --text-link-hover: #424242;
355
- --text-success: #005120;
356
- --text-warning: #5e3900;
357
- --text-error: #81000f;
358
- --text-info: #004869;
364
+ --text-inverse-secondary: #c2c2c2;
365
+ --text-link: #4d4d4d;
366
+ --text-link-hover: #3c3c3c;
367
+ --text-success: #017231;
368
+ --text-warning: #8d5800;
369
+ --text-error: #990015;
370
+ --text-info: #005f88;
359
371
  }
360
372
 
361
373
 
@@ -366,15 +378,15 @@ html:not(.dark) .blackout-theme {
366
378
  --surface-popover: #141414;
367
379
  --surface-subtle: rgba(255, 255, 255, 0.02);
368
380
  --surface-muted: rgba(255, 255, 255, 0.05);
369
- --surface-overlay: #1b1b1b;
381
+ --surface-overlay: #101011;
370
382
  --surface-interactive-default: transparent;
371
383
  --surface-interactive-hover: rgba(255, 255, 255, 0.08);
372
384
  --surface-interactive-active: rgba(255, 255, 255, 0.12);
373
385
  --surface-interactive-disabled: rgba(255, 255, 255, 0.04);
374
- --surface-selected: #f2f2f2;
386
+ --surface-selected: #e6e6e6;
375
387
  --surface-accent-subtle: #f5f5f5;
376
388
  --surface-accent-default: #666666;
377
- --surface-accent-strong: #555555;
389
+ --surface-accent-strong: #4d4d4d;
378
390
  --surface-success-subtle: #e8fbeb;
379
391
  --surface-success-default: #22c55e;
380
392
  --surface-warning-subtle: #fff3e6;
@@ -383,6 +395,11 @@ html:not(.dark) .blackout-theme {
383
395
  --surface-error-default: #ef4444;
384
396
  --surface-info-subtle: #ecf7ff;
385
397
  --surface-info-default: #0ea5e9;
398
+ --surface-elev-0: #ffffff;
399
+ --surface-elev-1: #f5f5f5;
400
+ --surface-elev-2: #e0e0e0;
401
+ --surface-elev-3: #c2c2c2;
402
+ --surface-elev-4: #979797;
386
403
  }
387
404
 
388
405
 
@@ -392,7 +409,7 @@ html:not(.dark) .blackout-theme {
392
409
  --border-muted: rgba(255, 255, 255, 0.04);
393
410
  --border-strong: rgba(255, 255, 255, 0.12);
394
411
  --border-focus: #666666;
395
- --border-disabled: #f1f1f1;
412
+ --border-disabled: #e0e0e0;
396
413
  --border-success: #22c55e;
397
414
  --border-warning: #f59e0b;
398
415
  --border-error: #ef4444;
@@ -402,20 +419,20 @@ html:not(.dark) .blackout-theme {
402
419
 
403
420
  /* --- Adaptive: Interactive (light) --- */
404
421
  html:not(.dark) .blackout-theme {
405
- --interactive-primary-bg: #555555;
406
- --interactive-primary-bg-hover: #424242;
407
- --interactive-primary-bg-active: #2e2e2e;
422
+ --interactive-primary-bg: #4d4d4d;
423
+ --interactive-primary-bg-hover: #3c3c3c;
424
+ --interactive-primary-bg-active: #2a2a2a;
408
425
  --interactive-primary-text: #ffffff;
409
426
  --interactive-secondary-bg: #ffffff;
410
427
  --interactive-secondary-bg-hover: #f5f5f5;
411
- --interactive-secondary-bg-active: #f1f1f1;
412
- --interactive-secondary-text: #1b1b1b;
413
- --interactive-secondary-border: #e0e0e0;
414
- --interactive-destructive-bg: #a30016;
415
- --interactive-destructive-bg-hover: #81000f;
428
+ --interactive-secondary-bg-active: #e0e0e0;
429
+ --interactive-secondary-text: #101011;
430
+ --interactive-secondary-border: #979797;
431
+ --interactive-destructive-bg: #c3041e;
432
+ --interactive-destructive-bg-hover: #990015;
416
433
  --interactive-destructive-text: #ffffff;
417
434
  --interactive-ghost-bg: #ffffff;
418
- --interactive-ghost-bg-hover: #f1f1f1;
435
+ --interactive-ghost-bg-hover: #e0e0e0;
419
436
  }
420
437
 
421
438
 
@@ -436,7 +453,7 @@ html:not(.dark) .blackout-theme {
436
453
  --color-fd-secondary-foreground: rgba(255, 255, 255, 0.7);
437
454
  --color-fd-popover: #141414;
438
455
  --color-fd-popover-foreground: rgba(255, 255, 255, 0.7);
439
- --color-fd-ring: #dcdcdc;
456
+ --color-fd-ring: #868686;
440
457
  }
441
458
 
442
459
 
@@ -459,4 +476,4 @@ html:not(.dark) .blackout-theme {
459
476
  --color-fd-popover-foreground: rgba(255, 255, 255, 0.75);
460
477
  --color-fd-ring: #666666;
461
478
  }
462
-
479
+ }
@@ -3,7 +3,9 @@
3
3
  Generated by @loworbitstudio/visor-core
4
4
  DO NOT EDIT — run `npm run build` to regenerate
5
5
  ============================================ */
6
+ @layer visor-primitives, visor-semantic, visor-adaptive, visor-bridge;
6
7
 
8
+ @layer visor-adaptive {
7
9
  /* --- Adaptive: Text (dark) — manual toggle --- */
8
10
  .dark,
9
11
  .theme-dark,
@@ -49,6 +51,11 @@
49
51
  --surface-error-default: var(--color-error-500);
50
52
  --surface-info-subtle: var(--color-info-900);
51
53
  --surface-info-default: var(--color-info-500);
54
+ --surface-elev-0: var(--color-neutral-950);
55
+ --surface-elev-1: var(--color-neutral-900);
56
+ --surface-elev-2: var(--color-neutral-800);
57
+ --surface-elev-3: var(--color-neutral-700);
58
+ --surface-elev-4: var(--color-neutral-600);
52
59
  }
53
60
 
54
61
 
@@ -183,6 +190,11 @@
183
190
  --surface-error-default: var(--color-error-500);
184
191
  --surface-info-subtle: var(--color-info-900);
185
192
  --surface-info-default: var(--color-info-500);
193
+ --surface-elev-0: var(--color-neutral-950);
194
+ --surface-elev-1: var(--color-neutral-900);
195
+ --surface-elev-2: var(--color-neutral-800);
196
+ --surface-elev-3: var(--color-neutral-700);
197
+ --surface-elev-4: var(--color-neutral-600);
186
198
  }
187
199
  }
188
200
 
@@ -272,3 +284,4 @@
272
284
  --sidebar-text-muted: var(--color-neutral-400);
273
285
  }
274
286
  }
287
+ }
@@ -3,7 +3,9 @@
3
3
  Generated by @loworbitstudio/visor-core
4
4
  DO NOT EDIT — run `npm run build` to regenerate
5
5
  ============================================ */
6
+ @layer visor-primitives, visor-semantic, visor-adaptive, visor-bridge;
6
7
 
8
+ @layer visor-adaptive {
7
9
  /* --- Adaptive: Text (light) --- */
8
10
  :root {
9
11
  --text-primary: var(--color-neutral-900);
@@ -45,6 +47,11 @@
45
47
  --surface-error-default: var(--color-error-500);
46
48
  --surface-info-subtle: var(--color-info-50);
47
49
  --surface-info-default: var(--color-info-500);
50
+ --surface-elev-0: var(--color-white);
51
+ --surface-elev-1: var(--color-neutral-50);
52
+ --surface-elev-2: var(--color-neutral-100);
53
+ --surface-elev-3: var(--color-neutral-200);
54
+ --surface-elev-4: var(--color-neutral-300);
48
55
  }
49
56
 
50
57
 
@@ -121,3 +128,4 @@
121
128
  --sidebar-ring: var(--color-primary-500);
122
129
  --sidebar-text-muted: var(--color-neutral-500);
123
130
  }
131
+ }