@nadicodeai/design-system 10.1.0 → 12.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/AGENTS.md +1 -1
  2. package/DESIGN.md +381 -635
  3. package/GLOSSARY.md +22 -19
  4. package/README.md +41 -24
  5. package/data/reserved-agent-identifiers.json +1 -0
  6. package/dist/css/host.css +88 -102
  7. package/dist/css/index.css +154 -353
  8. package/dist/css/tokens.css +53 -100
  9. package/dist/tailwind/nadicode.tailwind.json +13 -33
  10. package/dist/tokens/nadicode.dtcg-resolved.json +1500 -2242
  11. package/dist/tokens/nadicode.dtcg.json +648 -1833
  12. package/package.json +6 -4
package/dist/css/index.css CHANGED
@@ -41,7 +41,6 @@
41
41
  /* src/css/tokens.generated.css */
42
42
  @layer tokens {
43
43
  :root {
44
- --nc-on-primary: oklch(1.0000 0.0000 0.00);
45
44
  --nc-action: oklch(0.1776 0.0000 0.00);
46
45
  --nc-action-foreground: oklch(1.0000 0.0000 0.00);
47
46
  --nc-action-hover: oklch(0.3012 0.0000 0.00);
@@ -54,16 +53,17 @@
54
53
  --nc-canvas-soft-2: oklch(0.9702 0.0000 0.00);
55
54
  --nc-material-workspace: oklch(0.9761 0.0000 0.00);
56
55
  --nc-material-solid: oklch(1.0000 0.0000 0.00);
56
+ --nc-material-resting: oklch(1.0000 0.0000 0.00);
57
+ --nc-material-raised: oklch(1.0000 0.0000 0.00);
58
+ --nc-material-floating: oklch(1.0000 0.0000 0.00);
59
+ --nc-material-modal: oklch(1.0000 0.0000 0.00);
57
60
  --nc-line: oklch(0.9219 0.0000 0.00);
58
61
  --nc-input: oklch(0.5624 0.0000 0.00);
59
- --nc-seam: oklch(0.8699 0.0000 0.00);
60
- --nc-cross: oklch(0.6830 0.0000 0.00);
61
62
  --nc-focus-ring: oklch(0.1776 0.0000 0.00);
62
63
  --nc-scrim: oklch(0.1776 0.0000 0.00);
63
64
  --nc-link: oklch(0.4815 0.1209 154.24);
64
65
  --nc-link-deep: oklch(0.3852 0.0953 154.99);
65
66
  --nc-link-bg-soft: oklch(0.9170 0.0519 161.77);
66
- --nc-accent: oklch(0.6824 0.2108 37.70);
67
67
  --nc-info: oklch(0.5005 0.2804 266.17);
68
68
  --nc-info-soft: oklch(0.9457 0.0259 276.40);
69
69
  --nc-info-deep: oklch(0.3197 0.1758 266.79);
@@ -76,8 +76,6 @@
76
76
  --nc-warning: oklch(0.8466 0.1678 84.63);
77
77
  --nc-warning-soft: oklch(0.9649 0.0461 90.87);
78
78
  --nc-warning-deep: oklch(0.4834 0.0995 82.44);
79
- --nc-selection-bg: oklch(0.1776 0.0000 0.00);
80
- --nc-selection-fg: oklch(0.9851 0.0000 0.00);
81
79
  --nc-navigation-selection-bg: oklch(0.9461 0.0000 0.00);
82
80
  --nc-navigation-selection-fg: oklch(0.1776 0.0000 0.00);
83
81
  --nc-navigation-selection-hover: oklch(0.9219 0.0000 0.00);
@@ -101,30 +99,25 @@
101
99
  --nc-chart-4: oklch(0.5688 0.1995 26.59);
102
100
  --nc-chart-5: oklch(0.6161 0.1062 208.85);
103
101
  --nc-chart-6: oklch(0.5015 0.1883 294.99);
104
- --nc-chart-seq-1: oklch(0.6998 0.1347 269.48);
105
- --nc-chart-seq-2: oklch(0.5724 0.1897 270.11);
106
- --nc-chart-seq-3: oklch(0.4725 0.2271 267.41);
107
- --nc-chart-seq-4: oklch(0.3989 0.1934 267.50);
108
- --nc-chart-seq-5: oklch(0.3270 0.1487 267.91);
109
- --nc-chart-div-warm: oklch(0.7592 0.1560 83.30);
110
- --nc-chart-div-mid: oklch(0.5278 0.0000 0.00);
111
- --nc-chart-div-cool: oklch(0.5923 0.2215 269.61);
112
102
  --nc-dark-canvas: oklch(0.0000 0.0000 0.00);
113
103
  --nc-dark-canvas-soft: oklch(0.1776 0.0000 0.00);
114
104
  --nc-dark-canvas-soft-2: oklch(0.2178 0.0000 0.00);
115
105
  --nc-dark-material-workspace: oklch(0.0000 0.0000 0.00);
116
106
  --nc-dark-material-solid: oklch(0.0000 0.0000 0.00);
107
+ --nc-dark-material-resting: oklch(0.1543 0.0000 0.00);
108
+ --nc-dark-material-raised: oklch(0.1822 0.0000 0.00);
109
+ --nc-dark-material-floating: oklch(0.2090 0.0000 0.00);
110
+ --nc-dark-material-modal: oklch(0.2264 0.0000 0.00);
117
111
  --nc-dark-ink: oklch(0.9461 0.0000 0.00);
118
112
  --nc-dark-body: oklch(0.8297 0.0000 0.00);
119
113
  --nc-dark-muted: oklch(0.6500 0.0000 0.00);
120
114
  --nc-dark-line: oklch(0.2686 0.0000 0.00);
121
115
  --nc-dark-input: oklch(0.5208 0.0000 0.00);
122
- --nc-dark-seam: oklch(0.2178 0.0000 0.00);
123
116
  --nc-dark-on-primary: oklch(0.1448 0.0000 0.00);
124
- --nc-dark-action: oklch(1.0000 0.0000 0.00);
117
+ --nc-dark-action: oklch(0.9461 0.0000 0.00);
125
118
  --nc-dark-action-foreground: oklch(0.1448 0.0000 0.00);
126
- --nc-dark-action-hover: oklch(0.9189 0.0000 0.00);
127
- --nc-dark-action-active: oklch(0.8761 0.0000 0.00);
119
+ --nc-dark-action-hover: oklch(0.8761 0.0000 0.00);
120
+ --nc-dark-action-active: oklch(0.8297 0.0000 0.00);
128
121
  --nc-dark-link: oklch(0.7661 0.1498 157.10);
129
122
  --nc-dark-link-deep: oklch(0.8524 0.0996 159.83);
130
123
  --nc-dark-link-bg-soft: oklch(0.2893 0.0697 156.32);
@@ -148,26 +141,15 @@
148
141
  --nc-dark-state-blocked: oklch(0.5688 0.1995 26.59);
149
142
  --nc-dark-state-complete: oklch(0.6415 0.1644 153.23);
150
143
  --nc-dark-logo-dot: oklch(0.5923 0.2215 269.61);
151
- --nc-dark-selection-bg: oklch(0.9461 0.0000 0.00);
152
- --nc-dark-selection-fg: oklch(0.1448 0.0000 0.00);
153
- --nc-dark-navigation-selection-bg: oklch(0.2178 0.0000 0.00);
144
+ --nc-dark-navigation-selection-bg: oklch(0.2393 0.0000 0.00);
154
145
  --nc-dark-navigation-selection-fg: oklch(0.9461 0.0000 0.00);
155
146
  --nc-dark-navigation-selection-hover: oklch(0.2686 0.0000 0.00);
156
- --nc-dark-cross: oklch(0.4495 0.0000 0.00);
157
147
  --nc-dark-chart-1: oklch(0.5923 0.2215 269.61);
158
148
  --nc-dark-chart-2: oklch(0.6415 0.1644 153.23);
159
149
  --nc-dark-chart-3: oklch(0.8939 0.1387 90.47);
160
150
  --nc-dark-chart-4: oklch(0.6627 0.1685 23.66);
161
151
  --nc-dark-chart-5: oklch(0.7820 0.1247 190.99);
162
152
  --nc-dark-chart-6: oklch(0.6297 0.1321 299.36);
163
- --nc-dark-chart-seq-1: oklch(0.5724 0.1897 270.11);
164
- --nc-dark-chart-seq-2: oklch(0.6998 0.1347 269.48);
165
- --nc-dark-chart-seq-3: oklch(0.8072 0.0884 269.44);
166
- --nc-dark-chart-seq-4: oklch(0.8877 0.0514 270.78);
167
- --nc-dark-chart-seq-5: oklch(0.9619 0.0179 272.31);
168
- --nc-dark-chart-div-warm: oklch(0.8939 0.1387 90.47);
169
- --nc-dark-chart-div-mid: oklch(0.9219 0.0000 0.00);
170
- --nc-dark-chart-div-cool: oklch(0.8222 0.0888 274.44);
171
153
  --nc-xxs: 4px;
172
154
  --nc-xs: 8px;
173
155
  --nc-sm: 12px;
@@ -195,8 +177,6 @@
195
177
  --nc-rounded-xl: 10px;
196
178
  --nc-rounded-2xl: 12px;
197
179
  --nc-rounded-3xl: 16px;
198
- --nc-rounded-pill-sm: 64px;
199
- --nc-rounded-pill: 100px;
200
180
  --nc-rounded-full: 9999px;
201
181
  --nc-type-display-xl-font-family:
202
182
  Geist,
@@ -321,38 +301,30 @@
321
301
  --nc-type-label-mono-line-height: 16px;
322
302
  --nc-type-label-mono-letter-spacing: 0px;
323
303
  --nc-material-scrim-opacity: 10%;
324
- --nc-material-glass-opacity: 76%;
325
- --nc-material-glass-saturation: 116%;
326
- --nc-material-glass-blur: 28px;
304
+ --nc-material-glass-opacity: 60%;
305
+ --nc-material-glass-saturation: 180%;
306
+ --nc-material-glass-blur: 20px;
327
307
  --nc-elevation-resting:
328
- 0px 17.54px 23.39px 0px rgb(0% 0% 0% / 0.04),
329
- 0px 9.4px 12.5px 0px rgb(0% 0% 0% / 0.03),
330
- 0px 5.25px 7px 0px rgb(0% 0% 0% / 0.02),
331
- 0px 2.79px 3.72px -2px rgb(0% 0% 0% / 0.01),
332
- 0px 1.16px 1.5px 0px rgb(0% 0% 0% / 0.01),
333
- 0px 0px 0px 1px rgb(0% 0% 0% / 0.05);
308
+ 0px 1px 2px 0px rgb(0% 0% 0% / 0.05),
309
+ 0px 2px 8px -2px rgb(0% 0% 0% / 0.06),
310
+ 0px 0px 0px 1px rgb(0% 0% 0% / 0.08);
334
311
  --nc-elevation-raised:
335
- 0px 25px 50px 0px rgb(0% 0% 0% / 0.05),
336
- 0px 12px 24px 0px rgb(0% 0% 0% / 0.04),
337
- 0px 6px 12px 0px rgb(0% 0% 0% / 0.03),
338
- 0px 3px 6px 0px rgb(0% 0% 0% / 0.02),
339
- 0px 1.5px 3px 0px rgb(0% 0% 0% / 0.02),
340
- 0px 0px 0px 1px rgb(0% 0% 0% / 0.05);
312
+ 0px 1px 2px 0px rgb(0% 0% 0% / 0.06),
313
+ 0px 6px 12px -4px rgb(0% 0% 0% / 0.08),
314
+ 0px 16px 32px -8px rgb(0% 0% 0% / 0.1),
315
+ 0px 0px 0px 1px rgb(0% 0% 0% / 0.08);
341
316
  --nc-elevation-floating:
342
- 0px 40px 80px 0px rgb(0% 0% 0% / 0.06),
343
- 0px 20px 40px 0px rgb(0% 0% 0% / 0.05),
344
- 0px 10px 20px 0px rgb(0% 0% 0% / 0.04),
345
- 0px 5px 10px 0px rgb(0% 0% 0% / 0.03),
346
- 0px 2px 4px 0px rgb(0% 0% 0% / 0.02),
347
- 0px 0px 0px 1px rgb(0% 0% 0% / 0.05);
317
+ inset 0px 1px 0px 0px rgb(100% 100% 100% / 0.75),
318
+ inset 0px 0px 0px 1px rgb(100% 100% 100% / 0.35),
319
+ 0px 2px 4px 0px rgb(0% 0% 0% / 0.06),
320
+ 0px 12px 24px -6px rgb(0% 0% 0% / 0.12),
321
+ 0px 32px 64px -16px rgb(0% 0% 0% / 0.16),
322
+ 0px 0px 0px 1px rgb(0% 0% 0% / 0.08);
348
323
  --nc-elevation-modal:
349
- 0px 60px 120px 0px rgb(0% 0% 0% / 0.07),
350
- 0px 30px 60px 0px rgb(0% 0% 0% / 0.06),
351
- 0px 15px 30px 0px rgb(0% 0% 0% / 0.05),
352
- 0px 7.5px 15px 0px rgb(0% 0% 0% / 0.04),
353
- 0px 3px 6px 0px rgb(0% 0% 0% / 0.03),
354
- 0px 0px 0px 1px rgb(0% 0% 0% / 0.05);
355
- --nc-duration-stagger: 60ms;
324
+ 0px 2px 4px 0px rgb(0% 0% 0% / 0.06),
325
+ 0px 24px 48px -12px rgb(0% 0% 0% / 0.18),
326
+ 0px 64px 128px -32px rgb(0% 0% 0% / 0.26),
327
+ 0px 0px 0px 1px rgb(0% 0% 0% / 0.08);
356
328
  --nc-duration-control: 100ms;
357
329
  --nc-duration-close: 140ms;
358
330
  --nc-duration-confirm: 180ms;
@@ -372,9 +344,6 @@
372
344
  --nc-gutter-desktop: 64px;
373
345
  --nc-section-step-mobile: 64px;
374
346
  --nc-section-step-desktop: 96px;
375
- --nc-filter-chip-gap: 6px;
376
- --nc-filter-chip-height: 28px;
377
- --nc-filter-chip-icon: 14px;
378
347
  }
379
348
  }
380
349
 
@@ -386,13 +355,15 @@
386
355
  --nc-canvas-soft-2: var(--nc-dark-canvas-soft-2);
387
356
  --nc-material-workspace: var(--nc-dark-material-workspace);
388
357
  --nc-material-solid: var(--nc-dark-material-solid);
358
+ --nc-material-resting: var(--nc-dark-material-resting);
359
+ --nc-material-raised: var(--nc-dark-material-raised);
360
+ --nc-material-floating: var(--nc-dark-material-floating);
361
+ --nc-material-modal: var(--nc-dark-material-modal);
389
362
  --nc-ink: var(--nc-dark-ink);
390
363
  --nc-body: var(--nc-dark-body);
391
364
  --nc-muted: var(--nc-dark-muted);
392
365
  --nc-line: var(--nc-dark-line);
393
366
  --nc-input: var(--nc-dark-input);
394
- --nc-seam: var(--nc-dark-seam);
395
- --nc-on-primary: var(--nc-dark-on-primary);
396
367
  --nc-action: var(--nc-dark-action);
397
368
  --nc-action-foreground: var(--nc-dark-action-foreground);
398
369
  --nc-action-hover: var(--nc-dark-action-hover);
@@ -420,54 +391,36 @@
420
391
  --nc-state-blocked: var(--nc-dark-state-blocked);
421
392
  --nc-state-complete: var(--nc-dark-state-complete);
422
393
  --nc-logo-dot: var(--nc-dark-logo-dot);
423
- --nc-selection-bg: var(--nc-dark-selection-bg);
424
- --nc-selection-fg: var(--nc-dark-selection-fg);
425
394
  --nc-navigation-selection-bg: var(--nc-dark-navigation-selection-bg);
426
395
  --nc-navigation-selection-fg: var(--nc-dark-navigation-selection-fg);
427
396
  --nc-navigation-selection-hover: var(--nc-dark-navigation-selection-hover);
428
- --nc-cross: var(--nc-dark-cross);
429
397
  --nc-chart-1: var(--nc-dark-chart-1);
430
398
  --nc-chart-2: var(--nc-dark-chart-2);
431
399
  --nc-chart-3: var(--nc-dark-chart-3);
432
400
  --nc-chart-4: var(--nc-dark-chart-4);
433
401
  --nc-chart-5: var(--nc-dark-chart-5);
434
402
  --nc-chart-6: var(--nc-dark-chart-6);
435
- --nc-chart-seq-1: var(--nc-dark-chart-seq-1);
436
- --nc-chart-seq-2: var(--nc-dark-chart-seq-2);
437
- --nc-chart-seq-3: var(--nc-dark-chart-seq-3);
438
- --nc-chart-seq-4: var(--nc-dark-chart-seq-4);
439
- --nc-chart-seq-5: var(--nc-dark-chart-seq-5);
440
- --nc-chart-div-warm: var(--nc-dark-chart-div-warm);
441
- --nc-chart-div-mid: var(--nc-dark-chart-div-mid);
442
- --nc-chart-div-cool: var(--nc-dark-chart-div-cool);
443
403
  --nc-elevation-resting:
444
- 0px 17.54px 23.39px 0px rgb(0% 0% 0% / 0.04),
445
- 0px 9.4px 12.5px 0px rgb(0% 0% 0% / 0.03),
446
- 0px 5.25px 7px 0px rgb(0% 0% 0% / 0.02),
447
- 0px 2.79px 3.72px -2px rgb(0% 0% 0% / 0.01),
448
- 0px 1.16px 1.5px 0px rgb(0% 0% 0% / 0.01),
449
- 0px 0px 0px 1px rgb(100% 100% 100% / 0.12);
404
+ inset 0px 1px 0px 0px rgb(100% 100% 100% / 0.05),
405
+ inset 0px 0px 0px 1px rgb(100% 100% 100% / 0.07),
406
+ 0px 1px 2px 0px rgb(0% 0% 0% / 0.6),
407
+ 0px 0px 0px 1px rgb(0% 0% 0% / 0.8);
450
408
  --nc-elevation-raised:
451
- 0px 25px 50px 0px rgb(0% 0% 0% / 0.05),
452
- 0px 12px 24px 0px rgb(0% 0% 0% / 0.04),
453
- 0px 6px 12px 0px rgb(0% 0% 0% / 0.03),
454
- 0px 3px 6px 0px rgb(0% 0% 0% / 0.02),
455
- 0px 1.5px 3px 0px rgb(0% 0% 0% / 0.02),
456
- 0px 0px 0px 1px rgb(100% 100% 100% / 0.16);
409
+ inset 0px 1px 0px 0px rgb(100% 100% 100% / 0.07),
410
+ inset 0px 0px 0px 1px rgb(100% 100% 100% / 0.09),
411
+ 0px 16px 32px -8px rgb(0% 0% 0% / 0.6),
412
+ 0px 0px 0px 1px rgb(0% 0% 0% / 0.8);
457
413
  --nc-elevation-floating:
458
- 0px 40px 80px 0px rgb(0% 0% 0% / 0.06),
459
- 0px 20px 40px 0px rgb(0% 0% 0% / 0.05),
460
- 0px 10px 20px 0px rgb(0% 0% 0% / 0.04),
461
- 0px 5px 10px 0px rgb(0% 0% 0% / 0.03),
462
- 0px 2px 4px 0px rgb(0% 0% 0% / 0.02),
463
- 0px 0px 0px 1px rgb(100% 100% 100% / 0.22);
414
+ inset 0px 1px 0px 0px rgb(100% 100% 100% / 0.09),
415
+ inset 0px 0px 0px 1px rgb(100% 100% 100% / 0.11),
416
+ 0px 12px 24px -6px rgb(0% 0% 0% / 0.6),
417
+ 0px 32px 64px -16px rgb(0% 0% 0% / 0.7),
418
+ 0px 0px 0px 1px rgb(0% 0% 0% / 0.8);
464
419
  --nc-elevation-modal:
465
- 0px 60px 120px 0px rgb(0% 0% 0% / 0.07),
466
- 0px 30px 60px 0px rgb(0% 0% 0% / 0.06),
467
- 0px 15px 30px 0px rgb(0% 0% 0% / 0.05),
468
- 0px 7.5px 15px 0px rgb(0% 0% 0% / 0.04),
469
- 0px 3px 6px 0px rgb(0% 0% 0% / 0.03),
470
- 0px 0px 0px 1px rgb(100% 100% 100% / 0.28);
420
+ inset 0px 1px 0px 0px rgb(100% 100% 100% / 0.11),
421
+ inset 0px 0px 0px 1px rgb(100% 100% 100% / 0.13),
422
+ 0px 64px 128px -32px rgb(0% 0% 0% / 0.8),
423
+ 0px 0px 0px 1px rgb(0% 0% 0% / 0.8);
471
424
  }
472
425
  }
473
426
 
@@ -498,6 +451,16 @@
498
451
  --warning-foreground: var(--nc-ink);
499
452
  --success: var(--nc-success);
500
453
  --success-foreground: var(--nc-ink);
454
+ --info: var(--nc-info);
455
+ --info-foreground: var(--nc-identity-white);
456
+ --destructive-soft: var(--nc-error-soft);
457
+ --destructive-soft-foreground: var(--nc-error-deep);
458
+ --warning-soft: var(--nc-warning-soft);
459
+ --warning-soft-foreground: var(--nc-warning-deep);
460
+ --success-soft: var(--nc-success-soft);
461
+ --success-soft-foreground: var(--nc-success-deep);
462
+ --info-soft: var(--nc-info-soft);
463
+ --info-soft-foreground: var(--nc-info-deep);
501
464
  --border: var(--nc-line);
502
465
  --input: var(--nc-input);
503
466
  --ring: var(--nc-focus-ring);
@@ -507,6 +470,9 @@
507
470
  --chart-3: var(--nc-chart-3);
508
471
  --chart-4: var(--nc-chart-4);
509
472
  --chart-5: var(--nc-chart-5);
473
+ --selection: var(--nc-navigation-selection-bg);
474
+ --selection-foreground: var(--nc-navigation-selection-fg);
475
+ --recessed: var(--nc-canvas-soft);
510
476
  --sidebar: var(--nc-canvas-soft);
511
477
  --sidebar-foreground: var(--nc-ink);
512
478
  --sidebar-primary: var(--nc-navigation-selection-bg);
@@ -542,6 +508,16 @@
542
508
  --warning-foreground: var(--nc-dark-on-primary);
543
509
  --success: var(--nc-dark-success);
544
510
  --success-foreground: var(--nc-dark-on-primary);
511
+ --info: var(--nc-dark-info);
512
+ --info-foreground: var(--nc-dark-on-primary);
513
+ --destructive-soft: var(--nc-dark-error-soft);
514
+ --destructive-soft-foreground: var(--nc-dark-error-deep);
515
+ --warning-soft: var(--nc-dark-warning-soft);
516
+ --warning-soft-foreground: var(--nc-dark-warning-deep);
517
+ --success-soft: var(--nc-dark-success-soft);
518
+ --success-soft-foreground: var(--nc-dark-success-deep);
519
+ --info-soft: var(--nc-dark-info-soft);
520
+ --info-soft-foreground: var(--nc-dark-info-deep);
545
521
  --border: var(--nc-dark-line);
546
522
  --input: var(--nc-dark-input);
547
523
  --ring: var(--nc-dark-focus-ring);
@@ -551,6 +527,9 @@
551
527
  --chart-3: var(--nc-dark-chart-3);
552
528
  --chart-4: var(--nc-dark-chart-4);
553
529
  --chart-5: var(--nc-dark-chart-5);
530
+ --selection: var(--nc-dark-navigation-selection-bg);
531
+ --selection-foreground: var(--nc-dark-navigation-selection-fg);
532
+ --recessed: var(--nc-dark-canvas);
554
533
  --sidebar: var(--nc-dark-canvas);
555
534
  --sidebar-foreground: var(--nc-dark-ink);
556
535
  --sidebar-primary: var(--nc-dark-navigation-selection-bg);
@@ -561,8 +540,8 @@
561
540
  --sidebar-border: var(--nc-dark-line);
562
541
  --sidebar-ring: var(--nc-dark-focus-ring);
563
542
  }
564
- @theme { --color-*: initial; --color-nc-on-primary: oklch(1.0000 0.0000 0.00); --color-nc-action: oklch(0.1776 0.0000 0.00); --color-nc-action-foreground: oklch(1.0000 0.0000 0.00); --color-nc-action-hover: oklch(0.3012 0.0000 0.00); --color-nc-action-active: oklch(0.0000 0.0000 0.00); --color-nc-ink: oklch(0.1776 0.0000 0.00); --color-nc-body: oklch(0.3867 0.0000 0.00); --color-nc-muted: oklch(0.5278 0.0000 0.00); --color-nc-canvas: oklch(1.0000 0.0000 0.00); --color-nc-canvas-soft: oklch(0.9851 0.0000 0.00); --color-nc-canvas-soft-2: oklch(0.9702 0.0000 0.00); --color-nc-material-workspace: oklch(0.9761 0.0000 0.00); --color-nc-material-solid: oklch(1.0000 0.0000 0.00); --color-nc-line: oklch(0.9219 0.0000 0.00); --color-nc-input: oklch(0.5624 0.0000 0.00); --color-nc-seam: oklch(0.8699 0.0000 0.00); --color-nc-cross: oklch(0.6830 0.0000 0.00); --color-nc-focus-ring: oklch(0.1776 0.0000 0.00); --color-nc-scrim: oklch(0.1776 0.0000 0.00); --color-nc-link: oklch(0.4815 0.1209 154.24); --color-nc-link-deep: oklch(0.3852 0.0953 154.99); --color-nc-link-bg-soft: oklch(0.9170 0.0519 161.77); --color-nc-accent: oklch(0.6824 0.2108 37.70); --color-nc-info: oklch(0.5005 0.2804 266.17); --color-nc-info-soft: oklch(0.9457 0.0259 276.40); --color-nc-info-deep: oklch(0.3197 0.1758 266.79); --color-nc-success: oklch(0.6415 0.1644 153.23); --color-nc-success-soft: oklch(0.9170 0.0519 161.77); --color-nc-success-deep: oklch(0.3852 0.0953 154.99); --color-nc-error: oklch(0.5688 0.1995 26.59); --color-nc-error-soft: oklch(0.9522 0.0207 17.52); --color-nc-error-deep: oklch(0.4235 0.1525 27.08); --color-nc-warning: oklch(0.8466 0.1678 84.63); --color-nc-warning-soft: oklch(0.9649 0.0461 90.87); --color-nc-warning-deep: oklch(0.4834 0.0995 82.44); --color-nc-selection-bg: oklch(0.1776 0.0000 0.00); --color-nc-selection-fg: oklch(0.9851 0.0000 0.00); --color-nc-navigation-selection-bg: oklch(0.9461 0.0000 0.00); --color-nc-navigation-selection-fg: oklch(0.1776 0.0000 0.00); --color-nc-navigation-selection-hover: oklch(0.9219 0.0000 0.00); --color-nc-state-ready: oklch(0.5278 0.0000 0.00); --color-nc-state-running: oklch(0.5005 0.2804 266.17); --color-nc-state-review: oklch(0.8466 0.1678 84.63); --color-nc-state-blocked: oklch(0.5688 0.1995 26.59); --color-nc-state-complete: oklch(0.6415 0.1644 153.23); --color-nc-identity-verde: oklch(0.6415 0.1644 153.23); --color-nc-identity-rosso: oklch(0.5688 0.1995 26.59); --color-nc-identity-arancio: oklch(0.6824 0.2108 37.70); --color-nc-identity-giallo: oklch(0.8466 0.1678 84.63); --color-nc-identity-cobalto: oklch(0.5005 0.2804 266.17); --color-nc-identity-azzurro: oklch(0.5618 0.2019 258.24); --color-nc-identity-ink: oklch(0.0000 0.0000 0.00); --color-nc-identity-white: oklch(1.0000 0.0000 0.00); --color-nc-logo-dot: oklch(0.5005 0.2804 266.17); --color-nc-chart-1: oklch(0.5005 0.2804 266.17); --color-nc-chart-2: oklch(0.6415 0.1644 153.23); --color-nc-chart-3: oklch(0.7638 0.1562 86.86); --color-nc-chart-4: oklch(0.5688 0.1995 26.59); --color-nc-chart-5: oklch(0.6161 0.1062 208.85); --color-nc-chart-6: oklch(0.5015 0.1883 294.99); --color-nc-chart-seq-1: oklch(0.6998 0.1347 269.48); --color-nc-chart-seq-2: oklch(0.5724 0.1897 270.11); --color-nc-chart-seq-3: oklch(0.4725 0.2271 267.41); --color-nc-chart-seq-4: oklch(0.3989 0.1934 267.50); --color-nc-chart-seq-5: oklch(0.3270 0.1487 267.91); --color-nc-chart-div-warm: oklch(0.7592 0.1560 83.30); --color-nc-chart-div-mid: oklch(0.5278 0.0000 0.00); --color-nc-chart-div-cool: oklch(0.5923 0.2215 269.61); --color-nc-dark-canvas: oklch(0.0000 0.0000 0.00); --color-nc-dark-canvas-soft: oklch(0.1776 0.0000 0.00); --color-nc-dark-canvas-soft-2: oklch(0.2178 0.0000 0.00); --color-nc-dark-material-workspace: oklch(0.0000 0.0000 0.00); --color-nc-dark-material-solid: oklch(0.0000 0.0000 0.00); --color-nc-dark-ink: oklch(0.9461 0.0000 0.00); --color-nc-dark-body: oklch(0.8297 0.0000 0.00); --color-nc-dark-muted: oklch(0.6500 0.0000 0.00); --color-nc-dark-line: oklch(0.2686 0.0000 0.00); --color-nc-dark-input: oklch(0.5208 0.0000 0.00); --color-nc-dark-seam: oklch(0.2178 0.0000 0.00); --color-nc-dark-on-primary: oklch(0.1448 0.0000 0.00); --color-nc-dark-action: oklch(1.0000 0.0000 0.00); --color-nc-dark-action-foreground: oklch(0.1448 0.0000 0.00); --color-nc-dark-action-hover: oklch(0.9189 0.0000 0.00); --color-nc-dark-action-active: oklch(0.8761 0.0000 0.00); --color-nc-dark-link: oklch(0.7661 0.1498 157.10); --color-nc-dark-link-deep: oklch(0.8524 0.0996 159.83); --color-nc-dark-link-bg-soft: oklch(0.2893 0.0697 156.32); --color-nc-dark-focus-ring: oklch(0.9461 0.0000 0.00); --color-nc-dark-scrim: oklch(0.9461 0.0000 0.00); --color-nc-dark-error: oklch(0.7955 0.0980 21.02); --color-nc-dark-error-soft: oklch(0.2296 0.0728 26.06); --color-nc-dark-error-deep: oklch(0.8856 0.0534 19.64); --color-nc-dark-warning: oklch(0.8939 0.1387 90.47); --color-nc-dark-warning-soft: oklch(0.3135 0.0643 85.04); --color-nc-dark-warning-deep: oklch(0.9320 0.0896 90.86); --color-nc-dark-info: oklch(0.7067 0.1528 272.08); --color-nc-dark-info-soft: oklch(0.2118 0.1033 268.28); --color-nc-dark-info-deep: oklch(0.8222 0.0888 274.44); --color-nc-dark-success: oklch(0.7019 0.1753 153.20); --color-nc-dark-success-soft: oklch(0.2893 0.0697 156.32); --color-nc-dark-success-deep: oklch(0.8524 0.0996 159.83); --color-nc-dark-state-ready: oklch(0.5624 0.0000 0.00); --color-nc-dark-state-running: oklch(0.5923 0.2215 269.61); --color-nc-dark-state-review: oklch(0.8466 0.1678 84.63); --color-nc-dark-state-blocked: oklch(0.5688 0.1995 26.59); --color-nc-dark-state-complete: oklch(0.6415 0.1644 153.23); --color-nc-dark-logo-dot: oklch(0.5923 0.2215 269.61); --color-nc-dark-selection-bg: oklch(0.9461 0.0000 0.00); --color-nc-dark-selection-fg: oklch(0.1448 0.0000 0.00); --color-nc-dark-navigation-selection-bg: oklch(0.2178 0.0000 0.00); --color-nc-dark-navigation-selection-fg: oklch(0.9461 0.0000 0.00); --color-nc-dark-navigation-selection-hover: oklch(0.2686 0.0000 0.00); --color-nc-dark-cross: oklch(0.4495 0.0000 0.00); --color-nc-dark-chart-1: oklch(0.5923 0.2215 269.61); --color-nc-dark-chart-2: oklch(0.6415 0.1644 153.23); --color-nc-dark-chart-3: oklch(0.8939 0.1387 90.47); --color-nc-dark-chart-4: oklch(0.6627 0.1685 23.66); --color-nc-dark-chart-5: oklch(0.7820 0.1247 190.99); --color-nc-dark-chart-6: oklch(0.6297 0.1321 299.36); --color-nc-dark-chart-seq-1: oklch(0.5724 0.1897 270.11); --color-nc-dark-chart-seq-2: oklch(0.6998 0.1347 269.48); --color-nc-dark-chart-seq-3: oklch(0.8072 0.0884 269.44); --color-nc-dark-chart-seq-4: oklch(0.8877 0.0514 270.78); --color-nc-dark-chart-seq-5: oklch(0.9619 0.0179 272.31); --color-nc-dark-chart-div-warm: oklch(0.8939 0.1387 90.47); --color-nc-dark-chart-div-mid: oklch(0.9219 0.0000 0.00); --color-nc-dark-chart-div-cool: oklch(0.8222 0.0888 274.44); --font-display-xl: Geist, Inter, system-ui, -apple-system, sans-serif; --font-display-lg: Geist, Inter, system-ui, -apple-system, sans-serif; --font-display-md: Geist, Inter, system-ui, -apple-system, sans-serif; --font-heading-lg: Geist, Inter, system-ui, -apple-system, sans-serif; --font-heading-md: Geist, Inter, system-ui, -apple-system, sans-serif; --font-heading-sm: Geist, Inter, system-ui, -apple-system, sans-serif; --font-body-lg: Geist, Inter, system-ui, -apple-system, sans-serif; --font-body-md: Geist, Inter, system-ui, -apple-system, sans-serif; --font-body-sm: Geist, Inter, system-ui, -apple-system, sans-serif; --font-caption: Geist, Inter, system-ui, -apple-system, sans-serif; --font-code: Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace; --font-label-mono: Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace; --text-display-xl: 72px; --text-display-xl--line-height: 74px; --leading-display-xl: 74px; --text-display-xl--letter-spacing: -2.52px; --tracking-display-xl: -2.52px; --text-display-xl--font-weight: 600; --font-weight-display-xl: 600; --text-display-lg: 52px; --text-display-lg--line-height: 54px; --leading-display-lg: 54px; --text-display-lg--letter-spacing: -1.5px; --tracking-display-lg: -1.5px; --text-display-lg--font-weight: 600; --font-weight-display-lg: 600; --text-display-md: 40px; --text-display-md--line-height: 42px; --leading-display-md: 42px; --text-display-md--letter-spacing: -1px; --tracking-display-md: -1px; --text-display-md--font-weight: 600; --font-weight-display-md: 600; --text-heading-lg: 30px; --text-heading-lg--line-height: 32px; --leading-heading-lg: 32px; --text-heading-lg--letter-spacing: 0px; --tracking-heading-lg: 0px; --text-heading-lg--font-weight: 600; --font-weight-heading-lg: 600; --text-heading-md: 24px; --text-heading-md--line-height: 32px; --leading-heading-md: 32px; --text-heading-md--letter-spacing: 0px; --tracking-heading-md: 0px; --text-heading-md--font-weight: 600; --font-weight-heading-md: 600; --text-heading-sm: 20px; --text-heading-sm--line-height: 28px; --leading-heading-sm: 28px; --text-heading-sm--letter-spacing: 0px; --tracking-heading-sm: 0px; --text-heading-sm--font-weight: 600; --font-weight-heading-sm: 600; --text-body-lg: 18px; --text-body-lg--line-height: 27px; --leading-body-lg: 27px; --text-body-lg--letter-spacing: 0px; --tracking-body-lg: 0px; --text-body-lg--font-weight: 400; --font-weight-body-lg: 400; --text-body-md: 16px; --text-body-md--line-height: 25px; --leading-body-md: 25px; --text-body-md--letter-spacing: 0px; --tracking-body-md: 0px; --text-body-md--font-weight: 400; --font-weight-body-md: 400; --text-body-sm: 14px; --text-body-sm--line-height: 20px; --leading-body-sm: 20px; --text-body-sm--letter-spacing: 0px; --tracking-body-sm: 0px; --text-body-sm--font-weight: 400; --font-weight-body-sm: 400; --text-caption: 12px; --text-caption--line-height: 16px; --leading-caption: 16px; --text-caption--letter-spacing: 0px; --tracking-caption: 0px; --text-caption--font-weight: 400; --font-weight-caption: 400; --text-code: 13px; --text-code--line-height: 20px; --leading-code: 20px; --text-code--letter-spacing: 0px; --tracking-code: 0px; --text-code--font-weight: 400; --font-weight-code: 400; --text-label-mono: 12px; --text-label-mono--line-height: 16px; --leading-label-mono: 16px; --text-label-mono--letter-spacing: 0px; --tracking-label-mono: 0px; --text-label-mono--font-weight: 500; --font-weight-label-mono: 500; --radius-none: 0px; --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 10px; --radius-2xl: 12px; --radius-3xl: 16px; --radius-pill-sm: 64px; --radius-pill: 100px; --radius-full: 9999px; --ease-nc-emphasized: cubic-bezier(0.3, 0.7, 0.2, 1); --ease-nc-out-strong: cubic-bezier(0.23, 1, 0.32, 1); --ease-nc-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1); --ease-nc-drawer: cubic-bezier(0.32, 0.72, 0, 1); --outline-width-focus: var(--spacing-nadicode-focus-outline-width); --outline-offset-focus: var(--spacing-nadicode-focus-outline-offset); --opacity-scrim: var(--nc-material-scrim-opacity); --spacing-nadicode-xxs: 4px; --spacing-nadicode-xs: 8px; --spacing-nadicode-sm: 12px; --spacing-nadicode-md: 16px; --spacing-nadicode-lg: 24px; --spacing-nadicode-xl: 32px; --spacing-nadicode-2xl: 40px; --spacing-nadicode-3xl: 48px; --spacing-nadicode-4xl: 64px; --spacing-nadicode-5xl: 96px; --spacing-nadicode-6xl: 128px; --spacing-nadicode-guide: 1px; --spacing-nadicode-icon-stroke: 1.5px; --spacing-nadicode-icon-stroke-sm: 1.25px; --spacing-nadicode-focus-outline-width: 2px; --spacing-nadicode-focus-outline-offset: 2px; --spacing-nadicode-control-height: 32px; --spacing-nadicode-control-padding-inline: 10px; --spacing-nadicode-touch-target: 44px; --spacing-nadicode-content-max: 1200px; --spacing-nadicode-gutter-mobile: 20px; --spacing-nadicode-gutter-tablet: 40px; --spacing-nadicode-gutter-desktop: 64px; --spacing-nadicode-section-step-mobile: 64px; --spacing-nadicode-section-step-desktop: 96px; --spacing-nadicode-filter-chip-gap: 6px; --spacing-nadicode-filter-chip-height: 28px; --spacing-nadicode-filter-chip-icon: 14px; --spacing-control-height: var(--spacing-nadicode-control-height); --spacing-control-padding-inline: var(--spacing-nadicode-control-padding-inline); --spacing-touch-target: var(--spacing-nadicode-touch-target); }
565
- @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-primary-hover: var(--primary-hover); --color-primary-active: var(--primary-active); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-placeholder: var(--placeholder); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-warning: var(--warning); --color-warning-foreground: var(--warning-foreground); --color-success: var(--success); --color-success-foreground: var(--success-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-scrim: var(--scrim); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-primary-hover: var(--sidebar-primary-hover); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); }
543
+ @theme { --color-*: initial; --color-nc-action: oklch(0.1776 0.0000 0.00); --color-nc-action-foreground: oklch(1.0000 0.0000 0.00); --color-nc-action-hover: oklch(0.3012 0.0000 0.00); --color-nc-action-active: oklch(0.0000 0.0000 0.00); --color-nc-ink: oklch(0.1776 0.0000 0.00); --color-nc-body: oklch(0.3867 0.0000 0.00); --color-nc-muted: oklch(0.5278 0.0000 0.00); --color-nc-canvas: oklch(1.0000 0.0000 0.00); --color-nc-canvas-soft: oklch(0.9851 0.0000 0.00); --color-nc-canvas-soft-2: oklch(0.9702 0.0000 0.00); --color-nc-material-workspace: oklch(0.9761 0.0000 0.00); --color-nc-material-solid: oklch(1.0000 0.0000 0.00); --color-nc-material-resting: oklch(1.0000 0.0000 0.00); --color-nc-material-raised: oklch(1.0000 0.0000 0.00); --color-nc-material-floating: oklch(1.0000 0.0000 0.00); --color-nc-material-modal: oklch(1.0000 0.0000 0.00); --color-nc-line: oklch(0.9219 0.0000 0.00); --color-nc-input: oklch(0.5624 0.0000 0.00); --color-nc-focus-ring: oklch(0.1776 0.0000 0.00); --color-nc-scrim: oklch(0.1776 0.0000 0.00); --color-nc-link: oklch(0.4815 0.1209 154.24); --color-nc-link-deep: oklch(0.3852 0.0953 154.99); --color-nc-link-bg-soft: oklch(0.9170 0.0519 161.77); --color-nc-info: oklch(0.5005 0.2804 266.17); --color-nc-info-soft: oklch(0.9457 0.0259 276.40); --color-nc-info-deep: oklch(0.3197 0.1758 266.79); --color-nc-success: oklch(0.6415 0.1644 153.23); --color-nc-success-soft: oklch(0.9170 0.0519 161.77); --color-nc-success-deep: oklch(0.3852 0.0953 154.99); --color-nc-error: oklch(0.5688 0.1995 26.59); --color-nc-error-soft: oklch(0.9522 0.0207 17.52); --color-nc-error-deep: oklch(0.4235 0.1525 27.08); --color-nc-warning: oklch(0.8466 0.1678 84.63); --color-nc-warning-soft: oklch(0.9649 0.0461 90.87); --color-nc-warning-deep: oklch(0.4834 0.0995 82.44); --color-nc-navigation-selection-bg: oklch(0.9461 0.0000 0.00); --color-nc-navigation-selection-fg: oklch(0.1776 0.0000 0.00); --color-nc-navigation-selection-hover: oklch(0.9219 0.0000 0.00); --color-nc-state-ready: oklch(0.5278 0.0000 0.00); --color-nc-state-running: oklch(0.5005 0.2804 266.17); --color-nc-state-review: oklch(0.8466 0.1678 84.63); --color-nc-state-blocked: oklch(0.5688 0.1995 26.59); --color-nc-state-complete: oklch(0.6415 0.1644 153.23); --color-nc-identity-verde: oklch(0.6415 0.1644 153.23); --color-nc-identity-rosso: oklch(0.5688 0.1995 26.59); --color-nc-identity-arancio: oklch(0.6824 0.2108 37.70); --color-nc-identity-giallo: oklch(0.8466 0.1678 84.63); --color-nc-identity-cobalto: oklch(0.5005 0.2804 266.17); --color-nc-identity-azzurro: oklch(0.5618 0.2019 258.24); --color-nc-identity-ink: oklch(0.0000 0.0000 0.00); --color-nc-identity-white: oklch(1.0000 0.0000 0.00); --color-nc-logo-dot: oklch(0.5005 0.2804 266.17); --color-nc-chart-1: oklch(0.5005 0.2804 266.17); --color-nc-chart-2: oklch(0.6415 0.1644 153.23); --color-nc-chart-3: oklch(0.7638 0.1562 86.86); --color-nc-chart-4: oklch(0.5688 0.1995 26.59); --color-nc-chart-5: oklch(0.6161 0.1062 208.85); --color-nc-chart-6: oklch(0.5015 0.1883 294.99); --color-nc-dark-canvas: oklch(0.0000 0.0000 0.00); --color-nc-dark-canvas-soft: oklch(0.1776 0.0000 0.00); --color-nc-dark-canvas-soft-2: oklch(0.2178 0.0000 0.00); --color-nc-dark-material-workspace: oklch(0.0000 0.0000 0.00); --color-nc-dark-material-solid: oklch(0.0000 0.0000 0.00); --color-nc-dark-material-resting: oklch(0.1543 0.0000 0.00); --color-nc-dark-material-raised: oklch(0.1822 0.0000 0.00); --color-nc-dark-material-floating: oklch(0.2090 0.0000 0.00); --color-nc-dark-material-modal: oklch(0.2264 0.0000 0.00); --color-nc-dark-ink: oklch(0.9461 0.0000 0.00); --color-nc-dark-body: oklch(0.8297 0.0000 0.00); --color-nc-dark-muted: oklch(0.6500 0.0000 0.00); --color-nc-dark-line: oklch(0.2686 0.0000 0.00); --color-nc-dark-input: oklch(0.5208 0.0000 0.00); --color-nc-dark-on-primary: oklch(0.1448 0.0000 0.00); --color-nc-dark-action: oklch(0.9461 0.0000 0.00); --color-nc-dark-action-foreground: oklch(0.1448 0.0000 0.00); --color-nc-dark-action-hover: oklch(0.8761 0.0000 0.00); --color-nc-dark-action-active: oklch(0.8297 0.0000 0.00); --color-nc-dark-link: oklch(0.7661 0.1498 157.10); --color-nc-dark-link-deep: oklch(0.8524 0.0996 159.83); --color-nc-dark-link-bg-soft: oklch(0.2893 0.0697 156.32); --color-nc-dark-focus-ring: oklch(0.9461 0.0000 0.00); --color-nc-dark-scrim: oklch(0.9461 0.0000 0.00); --color-nc-dark-error: oklch(0.7955 0.0980 21.02); --color-nc-dark-error-soft: oklch(0.2296 0.0728 26.06); --color-nc-dark-error-deep: oklch(0.8856 0.0534 19.64); --color-nc-dark-warning: oklch(0.8939 0.1387 90.47); --color-nc-dark-warning-soft: oklch(0.3135 0.0643 85.04); --color-nc-dark-warning-deep: oklch(0.9320 0.0896 90.86); --color-nc-dark-info: oklch(0.7067 0.1528 272.08); --color-nc-dark-info-soft: oklch(0.2118 0.1033 268.28); --color-nc-dark-info-deep: oklch(0.8222 0.0888 274.44); --color-nc-dark-success: oklch(0.7019 0.1753 153.20); --color-nc-dark-success-soft: oklch(0.2893 0.0697 156.32); --color-nc-dark-success-deep: oklch(0.8524 0.0996 159.83); --color-nc-dark-state-ready: oklch(0.5624 0.0000 0.00); --color-nc-dark-state-running: oklch(0.5923 0.2215 269.61); --color-nc-dark-state-review: oklch(0.8466 0.1678 84.63); --color-nc-dark-state-blocked: oklch(0.5688 0.1995 26.59); --color-nc-dark-state-complete: oklch(0.6415 0.1644 153.23); --color-nc-dark-logo-dot: oklch(0.5923 0.2215 269.61); --color-nc-dark-navigation-selection-bg: oklch(0.2393 0.0000 0.00); --color-nc-dark-navigation-selection-fg: oklch(0.9461 0.0000 0.00); --color-nc-dark-navigation-selection-hover: oklch(0.2686 0.0000 0.00); --color-nc-dark-chart-1: oklch(0.5923 0.2215 269.61); --color-nc-dark-chart-2: oklch(0.6415 0.1644 153.23); --color-nc-dark-chart-3: oklch(0.8939 0.1387 90.47); --color-nc-dark-chart-4: oklch(0.6627 0.1685 23.66); --color-nc-dark-chart-5: oklch(0.7820 0.1247 190.99); --color-nc-dark-chart-6: oklch(0.6297 0.1321 299.36); --font-display-xl: Geist, Inter, system-ui, -apple-system, sans-serif; --font-display-lg: Geist, Inter, system-ui, -apple-system, sans-serif; --font-display-md: Geist, Inter, system-ui, -apple-system, sans-serif; --font-heading-lg: Geist, Inter, system-ui, -apple-system, sans-serif; --font-heading-md: Geist, Inter, system-ui, -apple-system, sans-serif; --font-heading-sm: Geist, Inter, system-ui, -apple-system, sans-serif; --font-body-lg: Geist, Inter, system-ui, -apple-system, sans-serif; --font-body-md: Geist, Inter, system-ui, -apple-system, sans-serif; --font-body-sm: Geist, Inter, system-ui, -apple-system, sans-serif; --font-caption: Geist, Inter, system-ui, -apple-system, sans-serif; --font-code: Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace; --font-label-mono: Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace; --text-display-xl: 72px; --text-display-xl--line-height: 74px; --leading-display-xl: 74px; --text-display-xl--letter-spacing: -2.52px; --tracking-display-xl: -2.52px; --text-display-xl--font-weight: 600; --font-weight-display-xl: 600; --text-display-lg: 52px; --text-display-lg--line-height: 54px; --leading-display-lg: 54px; --text-display-lg--letter-spacing: -1.5px; --tracking-display-lg: -1.5px; --text-display-lg--font-weight: 600; --font-weight-display-lg: 600; --text-display-md: 40px; --text-display-md--line-height: 42px; --leading-display-md: 42px; --text-display-md--letter-spacing: -1px; --tracking-display-md: -1px; --text-display-md--font-weight: 600; --font-weight-display-md: 600; --text-heading-lg: 30px; --text-heading-lg--line-height: 32px; --leading-heading-lg: 32px; --text-heading-lg--letter-spacing: 0px; --tracking-heading-lg: 0px; --text-heading-lg--font-weight: 600; --font-weight-heading-lg: 600; --text-heading-md: 24px; --text-heading-md--line-height: 32px; --leading-heading-md: 32px; --text-heading-md--letter-spacing: 0px; --tracking-heading-md: 0px; --text-heading-md--font-weight: 600; --font-weight-heading-md: 600; --text-heading-sm: 20px; --text-heading-sm--line-height: 28px; --leading-heading-sm: 28px; --text-heading-sm--letter-spacing: 0px; --tracking-heading-sm: 0px; --text-heading-sm--font-weight: 600; --font-weight-heading-sm: 600; --text-body-lg: 18px; --text-body-lg--line-height: 27px; --leading-body-lg: 27px; --text-body-lg--letter-spacing: 0px; --tracking-body-lg: 0px; --text-body-lg--font-weight: 400; --font-weight-body-lg: 400; --text-body-md: 16px; --text-body-md--line-height: 25px; --leading-body-md: 25px; --text-body-md--letter-spacing: 0px; --tracking-body-md: 0px; --text-body-md--font-weight: 400; --font-weight-body-md: 400; --text-body-sm: 14px; --text-body-sm--line-height: 20px; --leading-body-sm: 20px; --text-body-sm--letter-spacing: 0px; --tracking-body-sm: 0px; --text-body-sm--font-weight: 400; --font-weight-body-sm: 400; --text-caption: 12px; --text-caption--line-height: 16px; --leading-caption: 16px; --text-caption--letter-spacing: 0px; --tracking-caption: 0px; --text-caption--font-weight: 400; --font-weight-caption: 400; --text-code: 13px; --text-code--line-height: 20px; --leading-code: 20px; --text-code--letter-spacing: 0px; --tracking-code: 0px; --text-code--font-weight: 400; --font-weight-code: 400; --text-label-mono: 12px; --text-label-mono--line-height: 16px; --leading-label-mono: 16px; --text-label-mono--letter-spacing: 0px; --tracking-label-mono: 0px; --text-label-mono--font-weight: 500; --font-weight-label-mono: 500; --radius-none: 0px; --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 10px; --radius-2xl: 12px; --radius-3xl: 16px; --radius-full: 9999px; --ease-nc-emphasized: cubic-bezier(0.3, 0.7, 0.2, 1); --ease-nc-out-strong: cubic-bezier(0.23, 1, 0.32, 1); --ease-nc-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1); --ease-nc-drawer: cubic-bezier(0.32, 0.72, 0, 1); --outline-width-focus: var(--spacing-nadicode-focus-outline-width); --outline-offset-focus: var(--spacing-nadicode-focus-outline-offset); --opacity-scrim: var(--nc-material-scrim-opacity); --spacing-nadicode-xxs: 4px; --spacing-nadicode-xs: 8px; --spacing-nadicode-sm: 12px; --spacing-nadicode-md: 16px; --spacing-nadicode-lg: 24px; --spacing-nadicode-xl: 32px; --spacing-nadicode-2xl: 40px; --spacing-nadicode-3xl: 48px; --spacing-nadicode-4xl: 64px; --spacing-nadicode-5xl: 96px; --spacing-nadicode-6xl: 128px; --spacing-nadicode-guide: 1px; --spacing-nadicode-icon-stroke: 1.5px; --spacing-nadicode-icon-stroke-sm: 1.25px; --spacing-nadicode-focus-outline-width: 2px; --spacing-nadicode-focus-outline-offset: 2px; --spacing-nadicode-control-height: 32px; --spacing-nadicode-control-padding-inline: 10px; --spacing-nadicode-touch-target: 44px; --spacing-nadicode-content-max: 1200px; --spacing-nadicode-gutter-mobile: 20px; --spacing-nadicode-gutter-tablet: 40px; --spacing-nadicode-gutter-desktop: 64px; --spacing-nadicode-section-step-mobile: 64px; --spacing-nadicode-section-step-desktop: 96px; --spacing-control-height: var(--spacing-nadicode-control-height); --spacing-control-padding-inline: var(--spacing-nadicode-control-padding-inline); --spacing-touch-target: var(--spacing-nadicode-touch-target); }
544
+ @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-primary-hover: var(--primary-hover); --color-primary-active: var(--primary-active); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-placeholder: var(--placeholder); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-warning: var(--warning); --color-warning-foreground: var(--warning-foreground); --color-success: var(--success); --color-success-foreground: var(--success-foreground); --color-info: var(--info); --color-info-foreground: var(--info-foreground); --color-destructive-soft: var(--destructive-soft); --color-destructive-soft-foreground: var(--destructive-soft-foreground); --color-warning-soft: var(--warning-soft); --color-warning-soft-foreground: var(--warning-soft-foreground); --color-success-soft: var(--success-soft); --color-success-soft-foreground: var(--success-soft-foreground); --color-info-soft: var(--info-soft); --color-info-soft-foreground: var(--info-soft-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-scrim: var(--scrim); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --color-selection: var(--selection); --color-selection-foreground: var(--selection-foreground); --color-recessed: var(--recessed); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-primary-hover: var(--sidebar-primary-hover); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); }
566
545
  }
567
546
 
568
547
  /* src/css/reset.css */
@@ -730,32 +709,10 @@
730
709
  transform: translateY(0);
731
710
  }
732
711
  }
733
- @keyframes nc-wait {
734
- from {
735
- transform: translateX(-100%);
736
- }
737
- to {
738
- transform: translateX(312.5%);
739
- }
740
- }
741
- @keyframes nc-wait-breathe {
742
- 0%, 100% {
743
- opacity: 0.35;
744
- }
745
- 50% {
746
- opacity: 1;
747
- }
748
- }
749
712
  .nc-anim-msg-in {
750
713
  animation: nc-msg-in var(--nc-duration-msg-in) var(--nc-ease-emphasized) both;
751
714
  animation-delay: var(--nc-anim-delay, 0ms);
752
715
  }
753
- .nc-anim-wait {
754
- block-size: 100%;
755
- inline-size: 32%;
756
- animation: nc-wait var(--nc-duration-wait) linear infinite;
757
- animation-delay: var(--nc-anim-delay, 0ms);
758
- }
759
716
  .nc-transition-paint {
760
717
  transition-property:
761
718
  background-color,
@@ -789,14 +746,42 @@
789
746
  opacity: 1;
790
747
  transform: none;
791
748
  }
749
+ .nc-transition-transform {
750
+ transition: none;
751
+ }
752
+ }
753
+ }
754
+
755
+ /* src/css/wait.css */
756
+ @layer motion {
757
+ @keyframes nc-wait {
758
+ from {
759
+ transform: translateX(-100%);
760
+ }
761
+ to {
762
+ transform: translateX(312.5%);
763
+ }
764
+ }
765
+ @keyframes nc-wait-breathe {
766
+ 0%, 100% {
767
+ opacity: 0.35;
768
+ }
769
+ 50% {
770
+ opacity: 1;
771
+ }
772
+ }
773
+ .nc-anim-wait {
774
+ block-size: 100%;
775
+ inline-size: 32%;
776
+ animation: nc-wait var(--nc-duration-wait) linear infinite;
777
+ animation-delay: var(--nc-anim-delay, 0ms);
778
+ }
779
+ @media (prefers-reduced-motion: reduce) {
792
780
  .nc-anim-wait {
793
781
  inline-size: 100%;
794
782
  transform: none;
795
783
  animation: nc-wait-breathe var(--nc-duration-wait) var(--nc-ease-in-out-strong) infinite;
796
784
  }
797
- .nc-transition-transform {
798
- transition: none;
799
- }
800
785
  }
801
786
  }
802
787
 
@@ -805,28 +790,6 @@
805
790
  .nc-dotted-field {
806
791
  background: radial-gradient(var(--nc-line) 0.8px, transparent 0.8px) 0 0 / 12px 12px, var(--nc-canvas);
807
792
  }
808
- .nc-artifact-surface {
809
- display: grid;
810
- gap: 12px;
811
- min-width: 0;
812
- border: var(--nc-guide) solid var(--nc-line);
813
- padding: 18px;
814
- background: radial-gradient(var(--nc-line) 0.8px, transparent 0.8px) 0 0 / 12px 12px, var(--nc-canvas);
815
- color: var(--nc-body);
816
- }
817
- .nc-artifact-bar {
818
- height: 10px;
819
- background: var(--nc-line);
820
- }
821
- .nc-artifact-bar:nth-of-type(1) {
822
- width: 76%;
823
- }
824
- .nc-artifact-bar:nth-of-type(2) {
825
- width: 56%;
826
- }
827
- .nc-artifact-bar:nth-of-type(3) {
828
- width: 38%;
829
- }
830
793
  .nc-icon {
831
794
  display: inline-flex;
832
795
  flex: none;
@@ -863,66 +826,6 @@
863
826
  .nc-icon svg :is(path, circle, ellipse, line, polyline, polygon, rect) {
864
827
  vector-effect: non-scaling-stroke;
865
828
  }
866
- .nc-badge-secondary {
867
- display: inline-flex;
868
- width: fit-content;
869
- align-items: center;
870
- justify-content: center;
871
- gap: 6px;
872
- border: var(--nc-guide) solid var(--nc-line);
873
- border-radius: var(--nc-rounded-full);
874
- padding: 1px 8px;
875
- background: var(--nc-canvas-soft);
876
- color: var(--nc-body);
877
- }
878
- .nc-filter-chip {
879
- display: inline-flex;
880
- width: fit-content;
881
- min-height: var(--nc-filter-chip-height);
882
- align-items: center;
883
- justify-content: center;
884
- gap: var(--nc-filter-chip-gap);
885
- border: var(--nc-guide) solid var(--nc-line);
886
- border-radius: var(--nc-rounded-sm);
887
- padding: 0 var(--nc-xs);
888
- background: var(--nc-canvas-soft);
889
- color: var(--nc-body);
890
- }
891
- .nc-filter-chip svg {
892
- width: var(--nc-filter-chip-icon);
893
- height: var(--nc-filter-chip-icon);
894
- flex: none;
895
- stroke: currentColor;
896
- stroke-width: var(--nc-icon-stroke);
897
- }
898
- .nc-filter-chip svg :is(path, circle, ellipse, line, polyline, polygon, rect) {
899
- vector-effect: non-scaling-stroke;
900
- }
901
- .nc-link-inline {
902
- color: var(--nc-link);
903
- text-decoration: underline;
904
- text-underline-offset: 2px;
905
- text-decoration-thickness: var(--nc-guide);
906
- transition:
907
- background-color var(--nc-duration-confirm) var(--nc-ease-out-strong),
908
- border-color var(--nc-duration-confirm) var(--nc-ease-out-strong),
909
- color var(--nc-duration-confirm) var(--nc-ease-out-strong),
910
- opacity var(--nc-duration-confirm) var(--nc-ease-out-strong);
911
- }
912
- @media (hover: hover) and (pointer: fine) {
913
- .nc-link-inline:hover {
914
- color: var(--nc-link-deep);
915
- }
916
- }
917
- .nc-link-inline:focus-visible {
918
- border-radius: var(--nc-rounded-md);
919
- }
920
- .nc-label-mono {
921
- display: block;
922
- margin: 0;
923
- color: var(--nc-muted);
924
- text-transform: uppercase;
925
- }
926
829
  }
927
830
 
928
831
  /* src/css/components/memory-item.css */
@@ -930,75 +833,29 @@
930
833
  .nc-memory-item {
931
834
  align-self: flex-start;
932
835
  display: flex;
933
- gap: 10px;
836
+ gap: var(--nc-xs);
934
837
  align-items: flex-start;
935
838
  width: fit-content;
936
839
  max-width: 92%;
937
- padding: 8px 12px;
840
+ padding: var(--nc-xs) var(--nc-sm);
938
841
  border: var(--nc-guide) solid var(--nc-line);
939
- border-radius: var(--nc-rounded-sm);
842
+ border-radius: var(--nc-rounded-md);
940
843
  background: var(--nc-canvas-soft);
941
844
  color: var(--nc-body);
942
- font-family:
943
- "Geist",
944
- "Inter",
945
- system-ui,
946
- -apple-system,
947
- "Segoe UI",
948
- sans-serif;
949
- font-size: 13px;
950
- line-height: 18px;
845
+ font-family: var(--nc-type-body-sm-font-family);
846
+ font-size: var(--nc-type-body-sm-font-size);
847
+ line-height: var(--nc-type-body-sm-line-height);
951
848
  }
952
849
  .nc-memory-item-label {
953
850
  flex: 0 0 auto;
954
851
  margin-top: 2px;
955
- font-family:
956
- "Geist Mono",
957
- ui-monospace,
958
- SFMono-Regular,
959
- Menlo,
960
- Monaco,
961
- monospace;
962
- font-size: 10px;
963
- font-weight: 600;
964
- line-height: 16px;
965
- color: var(--nc-muted);
852
+ font-family: var(--nc-type-label-mono-font-family);
853
+ font-size: var(--nc-type-label-mono-font-size);
854
+ font-weight: var(--nc-type-label-mono-font-weight);
855
+ line-height: var(--nc-type-label-mono-line-height);
856
+ letter-spacing: var(--nc-type-label-mono-letter-spacing);
857
+ color: var(--nc-body);
966
858
  text-transform: uppercase;
967
- letter-spacing: 0.06em;
968
- }
969
- }
970
-
971
- /* src/css/components/handoff-banner.css */
972
- @layer components {
973
- .nc-handoff-banner {
974
- align-self: stretch;
975
- display: flex;
976
- gap: 10px;
977
- align-items: center;
978
- padding: 8px 12px;
979
- border-left: 3px solid var(--nc-link);
980
- border-radius: var(--nc-rounded-md);
981
- background: var(--nc-link-bg-soft);
982
- color: var(--nc-link-deep);
983
- font-family:
984
- "Geist",
985
- "Inter",
986
- system-ui,
987
- -apple-system,
988
- "Segoe UI",
989
- sans-serif;
990
- font-size: 13px;
991
- font-weight: 500;
992
- line-height: 18px;
993
- }
994
- .nc-handoff-banner::before {
995
- content: "";
996
- flex: none;
997
- width: 16px;
998
- height: 16px;
999
- background-color: var(--nc-link);
1000
- -webkit-mask: url('data:image/svg+xml,<!-- @license lucide-static v1.47.0 - ISC -->%0A<svg%0A class="lucide lucide-arrow-right"%0A xmlns="http://www.w3.org/2000/svg"%0A width="24"%0A height="24"%0A viewBox="0 0 24 24"%0A fill="none"%0A stroke="currentColor"%0A stroke-width="1.5"%0A stroke-linecap="round"%0A stroke-linejoin="round"%0A>%0A <path vector-effect="non-scaling-stroke" d="M5 12h14" />%0A <path vector-effect="non-scaling-stroke" d="m12 5 7 7-7 7" />%0A</svg>%0A') center / contain no-repeat;
1001
- mask: url('data:image/svg+xml,<!-- @license lucide-static v1.47.0 - ISC -->%0A<svg%0A class="lucide lucide-arrow-right"%0A xmlns="http://www.w3.org/2000/svg"%0A width="24"%0A height="24"%0A viewBox="0 0 24 24"%0A fill="none"%0A stroke="currentColor"%0A stroke-width="1.5"%0A stroke-linecap="round"%0A stroke-linejoin="round"%0A>%0A <path vector-effect="non-scaling-stroke" d="M5 12h14" />%0A <path vector-effect="non-scaling-stroke" d="m12 5 7 7-7 7" />%0A</svg>%0A') center / contain no-repeat;
1002
859
  }
1003
860
  }
1004
861
 
@@ -1007,28 +864,23 @@
1007
864
  .nc-usage-meter {
1008
865
  display: flex;
1009
866
  flex-direction: column;
1010
- gap: 8px;
1011
- padding: 4px 8px;
1012
- border-radius: var(--nc-rounded-sm);
1013
- background: var(--nc-canvas);
867
+ gap: var(--nc-xs);
868
+ padding: var(--nc-xxs) var(--nc-xs);
869
+ border-radius: var(--nc-rounded-md);
870
+ background: transparent;
1014
871
  color: var(--nc-body);
1015
- font-family:
1016
- "Geist Mono",
1017
- ui-monospace,
1018
- SFMono-Regular,
1019
- Menlo,
1020
- Monaco,
1021
- monospace;
1022
- font-size: 11px;
1023
- line-height: 16px;
872
+ font-family: var(--nc-type-label-mono-font-family);
873
+ font-size: var(--nc-type-label-mono-font-size);
874
+ font-weight: var(--nc-type-label-mono-font-weight);
875
+ line-height: var(--nc-type-label-mono-line-height);
876
+ letter-spacing: var(--nc-type-label-mono-letter-spacing);
1024
877
  }
1025
878
  .nc-usage-meter-meta {
1026
879
  display: flex;
1027
880
  align-items: center;
1028
- gap: 10px;
1029
- color: var(--nc-muted);
881
+ gap: var(--nc-xs);
882
+ color: var(--nc-body);
1030
883
  text-transform: uppercase;
1031
- letter-spacing: 0.04em;
1032
884
  white-space: nowrap;
1033
885
  }
1034
886
  .nc-usage-meter-sep {
@@ -1069,19 +921,14 @@
1069
921
  flex-direction: column;
1070
922
  position: relative;
1071
923
  padding: 0;
1072
- background: var(--nc-canvas);
924
+ background: transparent;
1073
925
  color: var(--nc-ink);
1074
- font-family:
1075
- "Geist",
1076
- "Inter",
1077
- system-ui,
1078
- -apple-system,
1079
- "Segoe UI",
1080
- sans-serif;
1081
- font-size: 14px;
1082
- line-height: 20px;
926
+ font-family: var(--nc-type-body-sm-font-family);
927
+ font-size: var(--nc-type-body-sm-font-size);
928
+ line-height: var(--nc-type-body-sm-line-height);
1083
929
  --nc-run-timeline-rail: 22px;
1084
930
  --nc-run-timeline-node: 11px;
931
+ --nc-run-timeline-gap: var(--nc-sm);
1085
932
  }
1086
933
  .nc-run-timeline::before {
1087
934
  content: "";
@@ -1096,9 +943,9 @@
1096
943
  .nc-run-timeline-step {
1097
944
  position: relative;
1098
945
  display: flex;
1099
- gap: 14px;
946
+ gap: var(--nc-run-timeline-gap);
1100
947
  align-items: flex-start;
1101
- padding: 8px 0;
948
+ padding: var(--nc-xs) 0;
1102
949
  }
1103
950
  .nc-run-timeline-node {
1104
951
  position: relative;
@@ -1107,11 +954,11 @@
1107
954
  width: var(--nc-run-timeline-node);
1108
955
  height: var(--nc-run-timeline-node);
1109
956
  margin-top: 4px;
1110
- margin-left: calc(var(--nc-run-timeline-rail) - (var(--nc-run-timeline-node) / 2) - 14px - var(--nc-run-timeline-node));
957
+ margin-left: calc(var(--nc-run-timeline-rail) - (var(--nc-run-timeline-node) / 2) - var(--nc-run-timeline-gap) - var(--nc-run-timeline-node));
1111
958
  border-radius: var(--nc-rounded-full);
1112
- background: var(--nc-canvas);
959
+ background: var(--card, var(--nc-canvas));
1113
960
  box-shadow: 0 0 0 var(--nc-guide) var(--nc-line);
1114
- color: var(--nc-muted);
961
+ color: var(--nc-body);
1115
962
  }
1116
963
  .nc-run-timeline-node::before {
1117
964
  content: "";
@@ -1129,20 +976,14 @@
1129
976
  .nc-run-timeline-label {
1130
977
  display: flex;
1131
978
  align-items: baseline;
1132
- gap: 8px;
1133
- font-family:
1134
- "Geist Mono",
1135
- ui-monospace,
1136
- SFMono-Regular,
1137
- Menlo,
1138
- Monaco,
1139
- monospace;
1140
- font-size: 11px;
1141
- font-weight: 500;
1142
- line-height: 16px;
1143
- color: var(--nc-muted);
979
+ gap: var(--nc-xs);
980
+ font-family: var(--nc-type-label-mono-font-family);
981
+ font-size: var(--nc-type-label-mono-font-size);
982
+ font-weight: var(--nc-type-label-mono-font-weight);
983
+ line-height: var(--nc-type-label-mono-line-height);
984
+ letter-spacing: var(--nc-type-label-mono-letter-spacing);
985
+ color: var(--nc-body);
1144
986
  text-transform: uppercase;
1145
- letter-spacing: 0.04em;
1146
987
  }
1147
988
  .nc-run-timeline-title {
1148
989
  font-weight: 500;
@@ -1150,49 +991,9 @@
1150
991
  }
1151
992
  .nc-run-timeline-detail {
1152
993
  margin-top: 2px;
1153
- font-size: 13px;
1154
- line-height: 18px;
1155
- color: var(--nc-body);
1156
- }
1157
- }
1158
-
1159
- /* src/css/components/image.css */
1160
- @layer components {
1161
- .nc-image {
1162
- --nc-image-ratio: 4 / 3;
1163
- position: relative;
1164
- margin: 0;
1165
- display: grid;
1166
- grid-template-rows: auto;
1167
- width: 100%;
1168
- overflow: hidden;
1169
- background: var(--nc-canvas-soft);
1170
- }
1171
- .nc-image[data-frame=true] {
1172
- border: var(--nc-guide) solid var(--nc-line);
1173
- }
1174
- .nc-image-media {
1175
- display: block;
1176
- width: 100%;
1177
- height: auto;
1178
- aspect-ratio: var(--nc-image-ratio);
1179
- object-fit: cover;
1180
- }
1181
- .nc-image-tag {
1182
- position: absolute;
1183
- top: 8px;
1184
- left: 8px;
1185
- padding: 2px 6px;
1186
- border: var(--nc-guide) solid var(--nc-line);
1187
- background: var(--nc-canvas);
1188
- color: var(--nc-ink);
1189
- text-transform: uppercase;
1190
- }
1191
- .nc-image-caption {
1192
- margin: 0;
1193
- padding: 8px 12px;
994
+ font-size: var(--nc-type-caption-font-size);
995
+ line-height: var(--nc-type-caption-line-height);
1194
996
  color: var(--nc-body);
1195
- background: var(--nc-canvas);
1196
997
  }
1197
998
  }
1198
999