@nextlyhq/ui 0.0.2-alpha.34 → 0.0.2-alpha.37

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 (9) hide show
  1. package/dist/index.cjs +190 -462
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +53 -146
  4. package/dist/index.d.ts +53 -146
  5. package/dist/index.mjs +190 -463
  6. package/dist/index.mjs.map +1 -1
  7. package/dist/styles.css +1 -1
  8. package/dist/theme.css +327 -179
  9. package/package.json +11 -8
package/dist/theme.css CHANGED
@@ -11,7 +11,7 @@
11
11
  * build so plugins get styled components with zero setup.
12
12
  *
13
13
  * Selectors are unscoped (`:root` / `.dark`); a consumer that embeds the UI in a
14
- * host page scopes them at build time (admin rewrites to `.adminapp`).
14
+ * host page scopes them at build time (admin rewrites to `.nextly-admin`).
15
15
  */
16
16
 
17
17
  /**
@@ -132,74 +132,142 @@
132
132
  * ============================================ */
133
133
 
134
134
  /* shadcn/ui semantic colors - reference CSS variables defined below */
135
- --color-border: var(--border);
136
- --color-border-subtle: var(--border-subtle);
137
- --color-border-strong: var(--border-strong);
138
- --color-input: var(--input);
139
- --color-ring: var(--ring);
140
- --color-background: var(--background);
141
- --color-foreground: var(--foreground);
142
-
143
- --color-primary: var(--primary);
144
- --color-primary-50: color-mix(in srgb, var(--primary), white 95%);
145
- --color-primary-100: color-mix(in srgb, var(--primary), white 90%);
146
- --color-primary-200: color-mix(in srgb, var(--primary), white 70%);
147
- --color-primary-300: color-mix(in srgb, var(--primary), white 50%);
148
- --color-primary-400: color-mix(in srgb, var(--primary), white 30%);
149
- --color-primary-500: var(--primary);
150
- --color-primary-600: color-mix(in srgb, var(--primary), black 10%);
151
- --color-primary-700: color-mix(in srgb, var(--primary), black 30%);
152
- --color-primary-800: color-mix(in srgb, var(--primary), black 50%);
153
- --color-primary-900: color-mix(in srgb, var(--primary), black 70%);
154
- --color-primary-950: color-mix(in srgb, var(--primary), black 85%);
155
- --color-primary-foreground: var(--primary-foreground);
156
-
157
- --color-secondary: var(--secondary);
158
- --color-secondary-foreground: var(--secondary-foreground);
159
-
160
- --color-destructive: var(--destructive);
161
- --color-destructive-foreground: var(--destructive-foreground);
162
-
163
- --color-success: var(--success);
164
- --color-success-foreground: var(--success-foreground);
165
-
166
- --color-warning: var(--warning);
167
- --color-warning-foreground: var(--warning-foreground);
168
-
169
- --color-muted: var(--muted);
170
- --color-muted-foreground: var(--muted-foreground);
171
-
172
- --color-accent: var(--accent);
173
- --color-accent-50: color-mix(in srgb, var(--accent), white 95%);
174
- --color-accent-100: color-mix(in srgb, var(--accent), white 90%);
175
- --color-accent-200: color-mix(in srgb, var(--accent), white 70%);
176
- --color-accent-300: color-mix(in srgb, var(--accent), white 50%);
177
- --color-accent-400: color-mix(in srgb, var(--accent), white 30%);
178
- --color-accent-500: var(--accent);
179
- --color-accent-600: color-mix(in srgb, var(--accent), black 10%);
180
- --color-accent-700: color-mix(in srgb, var(--accent), black 30%);
181
- --color-accent-800: color-mix(in srgb, var(--accent), black 50%);
182
- --color-accent-900: color-mix(in srgb, var(--accent), black 70%);
183
- --color-accent-950: color-mix(in srgb, var(--accent), black 85%);
184
- --color-accent-foreground: var(--accent-foreground);
185
-
186
- --color-card: var(--card);
187
- --color-card-foreground: var(--card-foreground);
188
-
189
- --color-popover: var(--popover);
190
- --color-popover-foreground: var(--popover-foreground);
135
+ --color-border: var(--nx-border);
136
+ --color-border-subtle: var(--nx-border-subtle);
137
+ --color-border-strong: var(--nx-border-strong);
138
+ --color-input: var(--nx-input);
139
+ --color-ring: var(--nx-ring);
140
+ --color-background: var(--nx-background);
141
+ --color-foreground: var(--nx-foreground);
142
+
143
+ --color-primary: var(--nx-primary);
144
+ --color-primary-50: color-mix(in srgb, var(--nx-primary), white 95%);
145
+ --color-primary-100: color-mix(in srgb, var(--nx-primary), white 90%);
146
+ --color-primary-200: color-mix(in srgb, var(--nx-primary), white 70%);
147
+ --color-primary-300: color-mix(in srgb, var(--nx-primary), white 50%);
148
+ --color-primary-400: color-mix(in srgb, var(--nx-primary), white 30%);
149
+ --color-primary-500: var(--nx-primary);
150
+ --color-primary-600: color-mix(in srgb, var(--nx-primary), black 10%);
151
+ --color-primary-700: color-mix(in srgb, var(--nx-primary), black 30%);
152
+ --color-primary-800: color-mix(in srgb, var(--nx-primary), black 50%);
153
+ --color-primary-900: color-mix(in srgb, var(--nx-primary), black 70%);
154
+ --color-primary-950: color-mix(in srgb, var(--nx-primary), black 85%);
155
+ --color-primary-foreground: var(--nx-primary-foreground);
156
+
157
+ --color-secondary: var(--nx-secondary);
158
+ --color-secondary-foreground: var(--nx-secondary-foreground);
159
+
160
+ /* Status scales, derived the same way as the primary scale above.
161
+ *
162
+ * A status role is one token; the scale is mixed from it, so retheming
163
+ * `--nx-success` moves every shade with it and they cannot drift apart. The
164
+ * shades exist because a status needs more than its solid colour: a tinted
165
+ * surface, a border on that surface, and text dark enough to read on it.
166
+ * Mixing toward white and black keeps 50 pale and 900 deep in both modes,
167
+ * which is what a `dark:` pair at the call site already assumes. */
168
+ --color-destructive: var(--nx-destructive);
169
+ --color-destructive-50: color-mix(in srgb, var(--nx-destructive), white 95%);
170
+ --color-destructive-100: color-mix(in srgb, var(--nx-destructive), white 90%);
171
+ --color-destructive-200: color-mix(in srgb, var(--nx-destructive), white 70%);
172
+ --color-destructive-300: color-mix(in srgb, var(--nx-destructive), white 50%);
173
+ --color-destructive-400: color-mix(in srgb, var(--nx-destructive), white 30%);
174
+ --color-destructive-500: var(--nx-destructive);
175
+ --color-destructive-600: color-mix(in srgb, var(--nx-destructive), black 10%);
176
+ --color-destructive-700: color-mix(in srgb, var(--nx-destructive), black 30%);
177
+ --color-destructive-800: color-mix(in srgb, var(--nx-destructive), black 50%);
178
+ --color-destructive-900: color-mix(in srgb, var(--nx-destructive), black 70%);
179
+ --color-destructive-950: color-mix(in srgb, var(--nx-destructive), black 85%);
180
+ /* Saturated fill for solid buttons; distinct from the text-tuned base so
181
+ * white on-color text stays AA in both modes. */
182
+ --color-destructive-solid: var(--nx-destructive-solid);
183
+ --color-destructive-foreground: var(--nx-destructive-foreground);
184
+
185
+ --color-success: var(--nx-success);
186
+ --color-success-50: color-mix(in srgb, var(--nx-success), white 95%);
187
+ --color-success-100: color-mix(in srgb, var(--nx-success), white 90%);
188
+ --color-success-200: color-mix(in srgb, var(--nx-success), white 70%);
189
+ --color-success-300: color-mix(in srgb, var(--nx-success), white 50%);
190
+ --color-success-400: color-mix(in srgb, var(--nx-success), white 30%);
191
+ --color-success-500: var(--nx-success);
192
+ --color-success-600: color-mix(in srgb, var(--nx-success), black 10%);
193
+ --color-success-700: color-mix(in srgb, var(--nx-success), black 30%);
194
+ --color-success-800: color-mix(in srgb, var(--nx-success), black 50%);
195
+ --color-success-900: color-mix(in srgb, var(--nx-success), black 70%);
196
+ --color-success-950: color-mix(in srgb, var(--nx-success), black 85%);
197
+ /* Saturated fill for solid usage; distinct from the text-tuned base. */
198
+ --color-success-solid: var(--nx-success-solid);
199
+ --color-success-foreground: var(--nx-success-foreground);
200
+
201
+ --color-warning: var(--nx-warning);
202
+ --color-warning-50: color-mix(in srgb, var(--nx-warning), white 95%);
203
+ --color-warning-100: color-mix(in srgb, var(--nx-warning), white 90%);
204
+ --color-warning-200: color-mix(in srgb, var(--nx-warning), white 70%);
205
+ --color-warning-300: color-mix(in srgb, var(--nx-warning), white 50%);
206
+ --color-warning-400: color-mix(in srgb, var(--nx-warning), white 30%);
207
+ --color-warning-500: var(--nx-warning);
208
+ --color-warning-600: color-mix(in srgb, var(--nx-warning), black 10%);
209
+ --color-warning-700: color-mix(in srgb, var(--nx-warning), black 30%);
210
+ --color-warning-800: color-mix(in srgb, var(--nx-warning), black 50%);
211
+ --color-warning-900: color-mix(in srgb, var(--nx-warning), black 70%);
212
+ --color-warning-950: color-mix(in srgb, var(--nx-warning), black 85%);
213
+ --color-warning-foreground: var(--nx-warning-foreground);
214
+
215
+ /* The editor's highlight mark. A token rather than a literal because it
216
+ * styles authored content, which an integrator restyles to their own site
217
+ * and which has to stay readable on a dark page. */
218
+ --color-highlight: var(--nx-highlight);
219
+ --color-highlight-foreground: var(--nx-highlight-foreground);
220
+
221
+ /* Syntax colors, so code tokens are styled the same way as everything else
222
+ * (text-code-keyword, bg-code-bg) instead of through bespoke CSS. */
223
+ --color-code-bg: var(--nx-code-bg);
224
+ --color-code-fg: var(--nx-code-fg);
225
+ --color-code-comment: var(--nx-code-comment);
226
+ --color-code-keyword: var(--nx-code-keyword);
227
+ --color-code-string: var(--nx-code-string);
228
+ --color-code-number: var(--nx-code-number);
229
+ --color-code-function: var(--nx-code-function);
230
+ --color-code-operator: var(--nx-code-operator);
231
+ --color-code-punctuation: var(--nx-code-punctuation);
232
+ --color-code-variable: var(--nx-code-variable);
233
+ --color-code-tag: var(--nx-code-tag);
234
+ --color-code-deleted: var(--nx-code-deleted);
235
+ --color-code-inserted: var(--nx-code-inserted);
236
+
237
+ --color-muted: var(--nx-muted);
238
+ --color-muted-foreground: var(--nx-muted-foreground);
239
+
240
+ --color-accent: var(--nx-accent);
241
+ --color-accent-50: color-mix(in srgb, var(--nx-accent), white 95%);
242
+ --color-accent-100: color-mix(in srgb, var(--nx-accent), white 90%);
243
+ --color-accent-200: color-mix(in srgb, var(--nx-accent), white 70%);
244
+ --color-accent-300: color-mix(in srgb, var(--nx-accent), white 50%);
245
+ --color-accent-400: color-mix(in srgb, var(--nx-accent), white 30%);
246
+ --color-accent-500: var(--nx-accent);
247
+ --color-accent-600: color-mix(in srgb, var(--nx-accent), black 10%);
248
+ --color-accent-700: color-mix(in srgb, var(--nx-accent), black 30%);
249
+ --color-accent-800: color-mix(in srgb, var(--nx-accent), black 50%);
250
+ --color-accent-900: color-mix(in srgb, var(--nx-accent), black 70%);
251
+ --color-accent-950: color-mix(in srgb, var(--nx-accent), black 85%);
252
+ --color-accent-foreground: var(--nx-accent-foreground);
253
+
254
+ --color-card: var(--nx-card);
255
+ --color-card-foreground: var(--nx-card-foreground);
256
+
257
+ --color-popover: var(--nx-popover);
258
+ --color-popover-foreground: var(--nx-popover-foreground);
191
259
 
192
260
  /* Sidebar semantic tokens */
193
- --color-sidebar: var(--sidebar-background);
194
- --color-sidebar-background: var(--sidebar-background);
195
- --color-sidebar-foreground: var(--sidebar-foreground);
196
- --color-sidebar-primary: var(--sidebar-primary);
197
- --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
198
- --color-sidebar-accent: var(--sidebar-accent);
199
- --color-sidebar-accent-background: var(--sidebar-accent);
200
- --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
201
- --color-sidebar-border: var(--sidebar-border);
202
- --color-sidebar-ring: var(--sidebar-ring);
261
+ --color-sidebar: var(--nx-sidebar-background);
262
+ --color-sidebar-background: var(--nx-sidebar-background);
263
+ --color-sidebar-foreground: var(--nx-sidebar-foreground);
264
+ --color-sidebar-primary: var(--nx-sidebar-primary);
265
+ --color-sidebar-primary-foreground: var(--nx-sidebar-primary-foreground);
266
+ --color-sidebar-accent: var(--nx-sidebar-accent);
267
+ --color-sidebar-accent-background: var(--nx-sidebar-accent);
268
+ --color-sidebar-accent-foreground: var(--nx-sidebar-accent-foreground);
269
+ --color-sidebar-border: var(--nx-sidebar-border);
270
+ --color-sidebar-ring: var(--nx-sidebar-ring);
203
271
 
204
272
  /* ============================================
205
273
  * TYPOGRAPHY (Tailwind v4.1)
@@ -348,13 +416,13 @@
348
416
  /* Custom Functional Shadows (Fixes build warnings from arbitrary values) */
349
417
  --shadow-inner-subtle: 0 -4px 6px -1px rgba(0, 0, 0, 0.05);
350
418
  --shadow-glow-success: 0 0 10px
351
- color-mix(in srgb, var(--success) 10%, transparent);
419
+ color-mix(in srgb, var(--nx-success) 10%, transparent);
352
420
  --shadow-glow-primary: 0 0 15px
353
- color-mix(in srgb, var(--primary) 50%, transparent);
421
+ color-mix(in srgb, var(--nx-primary) 50%, transparent);
354
422
  --shadow-elevation-primary: 0 8px 20px -8px
355
- color-mix(in srgb, var(--primary) 40%, transparent);
423
+ color-mix(in srgb, var(--nx-primary) 40%, transparent);
356
424
  --shadow-soft-primary: 0 8px 30px
357
- color-mix(in srgb, var(--primary) 6%, transparent);
425
+ color-mix(in srgb, var(--nx-primary) 6%, transparent);
358
426
  --shadow-neo: 4px 4px 0px 0px rgba(0, 0, 0, 0.1);
359
427
 
360
428
  /* ============================================
@@ -409,13 +477,13 @@
409
477
  100% {
410
478
  transform: scale(0.97);
411
479
  filter: drop-shadow(
412
- 0 0 10px color-mix(in srgb, var(--primary) 8%, transparent)
480
+ 0 0 10px color-mix(in srgb, var(--nx-primary) 8%, transparent)
413
481
  );
414
482
  }
415
483
  50% {
416
484
  transform: scale(1.03);
417
485
  filter: drop-shadow(
418
- 0 0 20px color-mix(in srgb, var(--primary) 22%, transparent)
486
+ 0 0 20px color-mix(in srgb, var(--nx-primary) 22%, transparent)
419
487
  );
420
488
  }
421
489
  }
@@ -526,79 +594,119 @@
526
594
 
527
595
  :root {
528
596
  /* Base colors - using Slate neutral scale */
529
- --background: oklch(1 0 0);
597
+ --nx-background: oklch(1 0 0);
530
598
  /* Pure white for weightless aesthetic */
531
- --page-background: oklch(0.9818 0 0);
599
+ --nx-page-background: oklch(0.9818 0 0);
532
600
  /* #f9f9f9 for page content area */
533
- --foreground: oklch(0.2079 0.0399 265.73);
601
+ --nx-foreground: oklch(0.2079 0.0399 265.73);
534
602
  /* slate-900 */
535
603
 
536
604
  /* Component colors */
537
- --card: oklch(1 0 0);
605
+ --nx-card: oklch(1 0 0);
538
606
  /* pure white for cards to pop on off-white bg */
539
- --card-foreground: oklch(0.2079 0.0399 265.73);
607
+ --nx-card-foreground: oklch(0.2079 0.0399 265.73);
540
608
  /* slate-900 */
541
- --popover: oklch(1 0 0);
609
+ --nx-popover: oklch(1 0 0);
542
610
  /* white */
543
- --popover-foreground: oklch(0.2079 0.0399 265.73);
611
+ --nx-popover-foreground: oklch(0.2079 0.0399 265.73);
544
612
  /* slate-900 */
545
613
 
546
614
  /* Brand colors - Blue-Cyan Professional Palette */
547
- --primary: oklch(0 0 0);
615
+ --nx-primary: oklch(0 0 0);
548
616
  /* Black for premium minimalist aesthetic */
549
- --primary-foreground: oklch(1 0 0);
617
+ --nx-primary-foreground: oklch(1 0 0);
550
618
  /* white */
551
619
 
552
620
  /* Secondary colors - using slate-100 for subtle backgrounds */
553
- --secondary: oklch(0.9684 0.0068 247.9);
621
+ --nx-secondary: oklch(0.9684 0.0068 247.9);
554
622
  /* slate-100 */
555
- --secondary-foreground: oklch(0.2079 0.0399 265.73);
623
+ --nx-secondary-foreground: oklch(0.2079 0.0399 265.73);
556
624
  /* slate-900 */
557
625
 
558
626
  /* Utility colors */
559
- --muted: oklch(0.9696 0 0);
560
- --muted-foreground: oklch(0.5547 0.0407 257.44);
627
+ --nx-muted: oklch(0.9696 0 0);
628
+ /* Darkened so muted text clears WCAG 4.5:1 on the muted surface (was 4.35:1). */
629
+ --nx-muted-foreground: oklch(0.54 0.0407 257.44);
561
630
  /* slate-500 */
562
- --accent: oklch(0.5547 0.0407 257.44);
631
+ --nx-accent: oklch(0.5547 0.0407 257.44);
563
632
  /* Slate-500 per user request #64748b */
564
- --accent-foreground: oklch(1 0 0);
633
+ --nx-accent-foreground: oklch(1 0 0);
565
634
  /* white */
566
635
 
567
- /* State colors - WCAG 2.2 AA Compliant */
568
- --destructive: oklch(0.6368 0.2078 25.33);
569
- /* red-500 (#ef4444) */
570
- --destructive-foreground: oklch(1 0 0);
636
+ /* State colors - WCAG 2.2 AA Compliant.
637
+ * Each status has two roles kept as separate tokens, the industry-standard
638
+ * split (Radix/Primer): the base token is the readable TEXT color used by
639
+ * `text-destructive` and derived shades, and `-solid` is the saturated FILL
640
+ * used by buttons under white on-color text. One value cannot serve both in
641
+ * dark mode (a fill dark enough for white text is too dark to read as text
642
+ * on the page), so they diverge there. */
643
+ /* Darkened from red-500; renders as #d92c32, ~4.8:1 as text on white. */
644
+ --nx-destructive: oklch(0.5778 0.2078 25.33);
645
+ --nx-destructive-solid: oklch(0.5778 0.2078 25.33);
646
+ --nx-destructive-foreground: oklch(1 0 0);
571
647
  /* white */
572
- --success: oklch(0.6273 0.17 149.2);
573
- /* green-600 (#16a34a) - AA compliant */
574
- --success-foreground: oklch(1 0 0);
648
+ /* Darkened from green-600; renders as #00852c, ~4.8:1 as text on white. */
649
+ --nx-success: oklch(0.53 0.17 149.2);
650
+ --nx-success-solid: oklch(0.53 0.17 149.2);
651
+ --nx-success-foreground: oklch(1 0 0);
575
652
  /* white */
576
- --warning: oklch(0.7686 0.1646 70.11);
577
- /* amber-500 (#f59e0b) */
578
- --warning-foreground: oklch(0.2079 0.0399 265.73);
653
+ /* Darkened from amber-500 so it reads as text on white at WCAG 4.5:1 (was
654
+ * 2.15:1); its light shades still tint badge/alert surfaces. */
655
+ --nx-warning: oklch(0.565 0.1646 70.11);
656
+ --nx-warning-foreground: oklch(0.2079 0.0399 265.73);
579
657
  /* slate-900 - REQUIRED for AA contrast (warning-500 on white = 3.4:1, fails AA) */
580
658
 
659
+ /* The highlighter mark in authored content. Kept a light yellow in both
660
+ * modes on purpose: it stands for a marker pen drawn over the text, and the
661
+ * pairing below is what keeps that readable rather than the page's own
662
+ * foreground, which would be white-on-yellow in dark mode. */
663
+ --nx-highlight: oklch(0.9297 0.1638 101.06);
664
+ /* yellow-200 */
665
+ --nx-highlight-foreground: oklch(0.2079 0.0399 265.73);
666
+ /* slate-900 — the mark keeps its own dark text, whatever the page does */
667
+
668
+ /* Syntax colors. The tokenizer reports what a token *is*; these decide how
669
+ * it looks, so a code block carries no colour of its own and renders from
670
+ * whichever mode is active. Kept muted against the monochrome chrome, and
671
+ * held above 4.5:1 on --nx-code-bg since code is small text. */
672
+ --nx-code-bg: oklch(0.9761 0.0035 247.86);
673
+ --nx-code-fg: oklch(0.2079 0.0399 265.73);
674
+ /* Darkened slightly to clear WCAG 4.5:1 on the code surface (was 4.44:1). */
675
+ --nx-code-comment: oklch(0.541 0.0407 257.44);
676
+ --nx-code-keyword: oklch(0.4882 0.2172 303.9);
677
+ --nx-code-string: oklch(0.4478 0.1189 152.1);
678
+ --nx-code-number: oklch(0.5106 0.1518 44.2);
679
+ --nx-code-function: oklch(0.4757 0.1444 254.6);
680
+ --nx-code-operator: oklch(0.4936 0.1418 8.4);
681
+ /* Darkened slightly to clear WCAG 4.5:1 on the code surface (was 4.44:1). */
682
+ --nx-code-punctuation: oklch(0.541 0.0407 257.44);
683
+ --nx-code-variable: oklch(0.4694 0.1173 62.3);
684
+ --nx-code-tag: oklch(0.5054 0.1905 27.5);
685
+ --nx-code-deleted: oklch(0.5054 0.1905 27.5);
686
+ --nx-code-inserted: oklch(0.4478 0.1189 152.1);
687
+
581
688
  /* Element colors — 3-tier translucent border scale (monochrome).
582
- * Was a single --border at 5% black (~1.05:1, effectively invisible).
689
+ * Was a single --nx-border at 5% black (~1.05:1, effectively invisible).
583
690
  * subtle = decorative dividers/cards; default = tables/groups;
584
691
  * strong = interactive control edges (inputs/checkbox) for prominence. */
585
- --border-subtle: oklch(0 0 0 / 0.08);
586
- --border: oklch(0 0 0 / 0.13);
587
- --border-strong: oklch(0 0 0 / 0.3);
588
- --input: oklch(
589
- 0.7384 0.0116 286.11
590
- ); /* zinc-400: stronger visible field border (was zinc-300, too faint) */
591
- --ring: var(--primary);
692
+ --nx-border-subtle: oklch(0 0 0 / 0.08);
693
+ /* Alpha raised so the composited border clears WCAG 3:1 on the page (was 1.35:1). */
694
+ --nx-border: oklch(0 0 0 / 0.445);
695
+ /* Alpha raised so the composited strong border clears WCAG 3:1 / ~4:1 (was 2.11:1). */
696
+ --nx-border-strong: oklch(0 0 0 / 0.502);
697
+ /* Darkened so the field border clears WCAG 3:1 on the page (was 2.32:1). */
698
+ --nx-input: oklch(0.6454 0.0116 286.11);
699
+ --nx-ring: var(--nx-primary);
592
700
 
593
701
  /* Chart colors for data visualization */
594
- --chart-1: var(--primary);
595
- --chart-2: oklch(0.7399 0.1277 209.34);
702
+ --nx-chart-1: var(--nx-primary);
703
+ --nx-chart-2: oklch(0.7399 0.1277 209.34);
596
704
  /* cyan-500 */
597
- --chart-3: oklch(0.6273 0.17 149.2);
705
+ --nx-chart-3: oklch(0.6273 0.17 149.2);
598
706
  /* green-600 */
599
- --chart-4: oklch(0.7686 0.1646 70.11);
707
+ --nx-chart-4: oklch(0.7686 0.1646 70.11);
600
708
  /* amber-500 */
601
- --chart-5: oklch(0.6368 0.2078 25.33);
709
+ --nx-chart-5: oklch(0.6368 0.2078 25.33);
602
710
  /* red-500 */
603
711
 
604
712
  /* Design tokens */
@@ -607,139 +715,179 @@
607
715
  /* Control sizing — derived from a single height knob so control density
608
716
  * scales from one place. Steps map to the control size variants:
609
717
  * sm 32px, md 36px, default 40px, lg 44px. */
610
- --control-height: 2.5rem;
611
- --control-height-sm: calc(var(--control-height) - 0.5rem);
612
- --control-height-md: calc(var(--control-height) - 0.25rem);
613
- --control-height-lg: calc(var(--control-height) + 0.25rem);
718
+ --nx-control-height: 2.5rem;
719
+ --nx-control-height-sm: calc(var(--nx-control-height) - 0.5rem);
720
+ --nx-control-height-md: calc(var(--nx-control-height) - 0.25rem);
721
+ --nx-control-height-lg: calc(var(--nx-control-height) + 0.25rem);
614
722
 
615
723
  /* Focus ring colors */
616
- --focus-ring: var(--primary);
617
- --focus-ring-offset: oklch(1 0 0);
724
+ --nx-focus-ring: var(--nx-primary);
725
+ --nx-focus-ring-offset: oklch(1 0 0);
618
726
  /* white */
619
727
 
620
728
  /* Sidebar specific colors - using Slate scale */
621
- --sidebar-background: oklch(1 0 0);
622
- /* Pure white for weightless aesthetic */
623
- --sidebar-foreground: oklch(0.372 0.0392 257.3);
729
+ --nx-sidebar-background: var(--nx-background);
730
+ /* flat with the content surface; nav is separated by borders, not fill */
731
+ --nx-sidebar-foreground: oklch(0.372 0.0392 257.3);
624
732
  /* slate-700 */
625
- --sidebar-primary: oklch(0.2079 0.0399 265.73);
733
+ --nx-sidebar-primary: oklch(0.2079 0.0399 265.73);
626
734
  /* slate-900 */
627
- --sidebar-primary-foreground: oklch(0.9838 0.0035 247.86);
735
+ --nx-sidebar-primary-foreground: oklch(0.9838 0.0035 247.86);
628
736
  /* slate-50 */
629
- --sidebar-accent: oklch(0.9684 0.0068 247.9);
737
+ --nx-sidebar-accent: oklch(0.9684 0.0068 247.9);
630
738
  /* slate-100 */
631
- --sidebar-accent-foreground: oklch(0.2079 0.0399 265.73);
739
+ --nx-sidebar-accent-foreground: oklch(0.2079 0.0399 265.73);
632
740
  /* slate-900 */
633
- --sidebar-border: oklch(0.929 0.0126 255.53);
741
+ /* Darkened so the sidebar border clears WCAG 3:1 on its surface (was 1.23:1). */
742
+ --nx-sidebar-border: oklch(0.6446 0.0126 255.53);
634
743
  /* slate-200 */
635
- --sidebar-ring: var(--primary);
744
+ --nx-sidebar-ring: var(--nx-primary);
636
745
 
637
746
  /* Data table specific colors */
638
- --table-row-hover: oklch(0.9848 0 0);
639
- --table-row-selected: var(--primary);
640
- --table-border: var(--border);
747
+ --nx-table-row-hover: oklch(0.9848 0 0);
748
+ --nx-table-row-selected: var(--nx-primary);
749
+ --nx-table-border: var(--nx-border);
641
750
  }
642
751
 
643
752
  /* Dark theme overrides when using class-based theming */
644
753
  .dark {
645
754
  /* Base colors - using Slate dark scale */
646
- --background: oklch(0.1358 0.0163 262.71);
755
+ --nx-background: oklch(0.1358 0.0163 262.71);
647
756
  /* ultra deep dark background (darker than slate-950) */
648
- --page-background: oklch(0.1358 0.0163 262.71);
757
+ --nx-page-background: oklch(0.1358 0.0163 262.71);
649
758
  /* Matches background in dark mode */
650
- --foreground: oklch(0.9838 0.0035 247.86);
759
+ --nx-foreground: oklch(0.9838 0.0035 247.86);
651
760
  /* slate-50 */
652
761
 
653
762
  /* Component colors */
654
- --card: oklch(0.1916 0.0228 266.36);
655
- /* raised one tonal step above --background (222 47% 4%) so panels/cards
763
+ --nx-card: oklch(0.1916 0.0228 266.36);
764
+ /* raised one tonal step above --nx-background (222 47% 4%) so panels/cards
656
765
  * read as distinct surfaces in dark mode instead of merging into the page */
657
- --card-foreground: oklch(0.9838 0.0035 247.86);
766
+ --nx-card-foreground: oklch(0.9838 0.0035 247.86);
658
767
  /* slate-50 */
659
- --popover: oklch(0.369 0.0249 257.44);
768
+ /* Darkened toward the card elevation so borders, inputs, and muted text
769
+ * placed on a popover clear their WCAG minimums (border was 2.85:1, input
770
+ * 1.73:1); the surface was too light for its own contents. */
771
+ --nx-popover: oklch(0.24 0.0249 257.44);
660
772
  /* slate-800 */
661
- --popover-foreground: oklch(0.9838 0.0035 247.86);
773
+ --nx-popover-foreground: oklch(0.9838 0.0035 247.86);
662
774
  /* slate-50 */
663
775
 
664
776
  /* Brand colors - Blue-Cyan Professional Palette (Dark Mode) */
665
- --primary: oklch(1 0 0); /* High contrast White for dark mode */
666
- --primary-foreground: oklch(0.2079 0.0399 265.73);
777
+ --nx-primary: oklch(1 0 0); /* High contrast White for dark mode */
778
+ --nx-primary-foreground: oklch(0.2079 0.0399 265.73);
667
779
  /* slate-900 */
668
780
 
669
781
  /* Secondary colors - using slate-800 for dark backgrounds */
670
- --secondary: oklch(0.28 0.0369 259.97);
782
+ --nx-secondary: oklch(0.28 0.0369 259.97);
671
783
  /* slate-800 */
672
- --secondary-foreground: oklch(0.9838 0.0035 247.86);
784
+ --nx-secondary-foreground: oklch(0.9838 0.0035 247.86);
673
785
  /* slate-50 */
674
786
 
675
787
  /* Utility colors */
676
- --muted: oklch(0.28 0.0369 259.97);
788
+ --nx-muted: oklch(0.28 0.0369 259.97);
677
789
  /* slate-800 */
678
- --muted-foreground: oklch(0.7107 0.0351 256.79);
790
+ --nx-muted-foreground: oklch(0.7107 0.0351 256.79);
679
791
  /* slate-400 */
680
- --accent: oklch(
792
+ --nx-accent: oklch(
681
793
  0.5547 0.0407 257.44
682
794
  ); /* Slate-500 per user request #64748b */
683
- --accent-foreground: oklch(1 0 0);
795
+ --nx-accent-foreground: oklch(1 0 0);
684
796
  /* white */
685
797
 
686
- /* State colors - WCAG 2.2 AA Compliant (Dark Mode) */
687
- --destructive: oklch(0.6368 0.2078 25.33);
688
- /* red-500 */
689
- --destructive-foreground: oklch(1 0 0);
798
+ /* State colors - WCAG 2.2 AA Compliant (Dark Mode).
799
+ * The base token is lightened from the fill color so it reads as text on the
800
+ * dark page at 4.5:1; `-solid` keeps the darker fill so white on-color text
801
+ * on buttons still clears 4.5:1. Warning is already light enough to read on
802
+ * dark, so its base is unchanged here. */
803
+ /* Lightened red so it reads as text at WCAG 4.5:1 on the dark page and on the
804
+ * lighter popover surface (was 4.17:1 on the page, 4.25:1 on a popover). */
805
+ --nx-destructive: oklch(0.65 0.2078 25.33);
806
+ /* Darker red fill so white on-color button text clears 4.5:1. */
807
+ --nx-destructive-solid: oklch(0.5778 0.2078 25.33);
808
+ --nx-destructive-foreground: oklch(1 0 0);
690
809
  /* white */
691
- --success: oklch(0.7229 0.1921 149.58);
692
- /* green-500 - brighter for dark mode */
693
- --success-foreground: oklch(1 0 0);
810
+ /* Lightened green so it reads as text at WCAG 4.5:1 on the dark page and on
811
+ * the lighter popover surface (was 4.17:1 on the page, 4.29:1 on a popover). */
812
+ --nx-success: oklch(0.6 0.1921 149.58);
813
+ /* Darker green fill so white on-color button text clears 4.5:1. */
814
+ --nx-success-solid: oklch(0.5225 0.1921 149.58);
815
+ --nx-success-foreground: oklch(1 0 0);
694
816
  /* white */
695
- --warning: oklch(0.7686 0.1646 70.11);
817
+ --nx-warning: oklch(0.7686 0.1646 70.11);
696
818
  /* amber-500 */
697
- --warning-foreground: oklch(0.2079 0.0399 265.73);
819
+ --nx-warning-foreground: oklch(0.2079 0.0399 265.73);
698
820
  /* slate-900 */
699
821
 
822
+ /* Dimmed so the mark reads as highlighted rather than as a lamp on a dark
823
+ * page, while its own foreground stays dark enough to read against it. */
824
+ --nx-highlight: oklch(0.8 0.1425 101.06);
825
+ /* yellow-300-ish, pulled back for the dark surface */
826
+ --nx-highlight-foreground: oklch(0.2079 0.0399 265.73);
827
+ /* slate-900 */
828
+
829
+ /* Syntax colors (dark). Lightened rather than reused from light mode: the
830
+ * light hues sit near 0.45-0.5 lightness and disappear on the dark surface.
831
+ * Chroma is pulled back slightly so they don't vibrate against it. */
832
+ --nx-code-bg: oklch(0.1916 0.0228 266.36);
833
+ --nx-code-fg: oklch(0.9838 0.0035 247.86);
834
+ --nx-code-comment: oklch(0.6626 0.0364 256.79);
835
+ --nx-code-keyword: oklch(0.7482 0.1235 303.9);
836
+ --nx-code-string: oklch(0.7654 0.1476 152.1);
837
+ --nx-code-number: oklch(0.7807 0.1189 44.2);
838
+ --nx-code-function: oklch(0.7365 0.1163 254.6);
839
+ --nx-code-operator: oklch(0.7549 0.1234 8.4);
840
+ --nx-code-punctuation: oklch(0.6626 0.0364 256.79);
841
+ --nx-code-variable: oklch(0.7938 0.1052 62.3);
842
+ --nx-code-tag: oklch(0.7118 0.1476 27.5);
843
+ --nx-code-deleted: oklch(0.7118 0.1476 27.5);
844
+ --nx-code-inserted: oklch(0.7654 0.1476 152.1);
845
+
700
846
  /* Element colors — 3-tier translucent border scale (white-alpha for dark).
701
847
  * Recomputed as white-over-dark alpha (not a flipped hex) so dividers read
702
848
  * on the deep background without glowing. Was ~1.2:1 (too faint). */
703
- --border-subtle: oklch(1 0 0 / 0.08);
704
- --border: oklch(1 0 0 / 0.13);
705
- --border-strong: oklch(1 0 0 / 0.34);
706
- --input: oklch(
707
- 0.4987 0.0128 285.92
708
- ); /* stronger visible field border (was zinc-700, too faint) */
709
- --ring: var(--primary);
849
+ --nx-border-subtle: oklch(1 0 0 / 0.08);
850
+ /* Alpha raised so the composited border clears WCAG 3:1 on the page (was 1.36:1). */
851
+ --nx-border: oklch(1 0 0 / 0.366);
852
+ /* Alpha raised so the composited strong border clears WCAG 3:1 / ~4:1 (was 3.00:1). */
853
+ --nx-border-strong: oklch(1 0 0 / 0.418);
854
+ /* Brightened so the field border clears WCAG 3:1 on the lighter popover
855
+ * surface as well as the page and card (was 1.73:1 on a popover). */
856
+ --nx-input: oklch(0.54 0.0128 285.92);
857
+ --nx-ring: var(--nx-primary);
710
858
 
711
859
  /* Chart colors for data visualization (same as light mode) */
712
- --chart-1: var(--primary);
713
- --chart-2: oklch(0.7399 0.1277 209.34);
860
+ --nx-chart-1: var(--nx-primary);
861
+ --nx-chart-2: oklch(0.7399 0.1277 209.34);
714
862
  /* cyan-500 */
715
- --chart-3: oklch(0.7229 0.1921 149.58);
863
+ --nx-chart-3: oklch(0.7229 0.1921 149.58);
716
864
  /* green-500 */
717
- --chart-4: oklch(0.7686 0.1646 70.11);
865
+ --nx-chart-4: oklch(0.7686 0.1646 70.11);
718
866
  /* amber-500 */
719
- --chart-5: oklch(0.6368 0.2078 25.33);
867
+ --nx-chart-5: oklch(0.6368 0.2078 25.33);
720
868
  /* red-500 */
721
869
 
722
870
  /* Sidebar specific colors - dark mode */
723
- --sidebar-background: oklch(0.2079 0.0399 265.73);
724
- /* slate-900 (#0f172a) - matches cards for consistent depth */
725
- --sidebar-foreground: oklch(0.9838 0.0035 247.86);
871
+ --nx-sidebar-background: var(--nx-background);
872
+ /* flat with the content surface; nav is separated by borders, not fill */
873
+ --nx-sidebar-foreground: oklch(0.9838 0.0035 247.86);
726
874
  /* slate-50 */
727
- --sidebar-primary: oklch(0.9838 0.0035 247.86);
875
+ --nx-sidebar-primary: oklch(0.9838 0.0035 247.86);
728
876
  /* slate-50 */
729
- --sidebar-primary-foreground: oklch(0.2079 0.0399 265.73);
877
+ --nx-sidebar-primary-foreground: oklch(0.2079 0.0399 265.73);
730
878
  /* slate-900 */
731
- --sidebar-accent: oklch(0.28 0.0369 259.97);
879
+ --nx-sidebar-accent: oklch(0.28 0.0369 259.97);
732
880
  /* slate-800 */
733
- --sidebar-accent-foreground: oklch(0.9838 0.0035 247.86);
881
+ --nx-sidebar-accent-foreground: oklch(0.9838 0.0035 247.86);
734
882
  /* slate-50 */
735
- --sidebar-border: oklch(0.2321 0.0129 257.43);
736
- /* subtle slate-900 */
737
- --sidebar-ring: var(--primary);
883
+ /* Lightened so the sidebar border clears WCAG 3:1 on its surface (was 1.19:1). */
884
+ --nx-sidebar-border: oklch(0.4975 0.0129 257.43);
885
+ --nx-sidebar-ring: var(--nx-primary);
738
886
 
739
887
  /* Data table specific colors - dark mode */
740
- --table-row-hover: oklch(0.28 0.0369 259.97);
888
+ --nx-table-row-hover: oklch(0.28 0.0369 259.97);
741
889
  /* slate-800 */
742
- --table-row-selected: var(--primary);
743
- --table-border: var(--border);
890
+ --nx-table-row-selected: var(--nx-primary);
891
+ --nx-table-border: var(--nx-border);
744
892
  /* inherit the retuned white-alpha border (was a fixed faint slate) */
745
893
  }