@nextlyhq/ui 0.0.2-alpha.34 → 0.0.2-alpha.35
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.cjs +101 -450
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +23 -130
- package/dist/index.d.ts +23 -130
- package/dist/index.mjs +104 -451
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +1 -1
- package/dist/theme.css +281 -167
- package/package.json +5 -5
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 `.
|
|
14
|
+
* host page scopes them at build time (admin rewrites to `.nextly-admin`).
|
|
15
15
|
*/
|
|
16
16
|
|
|
17
17
|
/**
|
|
@@ -132,74 +132,137 @@
|
|
|
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
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
--color-
|
|
170
|
-
--color-
|
|
171
|
-
|
|
172
|
-
--color-
|
|
173
|
-
--color-
|
|
174
|
-
--color-
|
|
175
|
-
--color-
|
|
176
|
-
--color-
|
|
177
|
-
--color-
|
|
178
|
-
--color-
|
|
179
|
-
--color-
|
|
180
|
-
--color-
|
|
181
|
-
|
|
182
|
-
--color-
|
|
183
|
-
--color-
|
|
184
|
-
--color-
|
|
185
|
-
|
|
186
|
-
--color-
|
|
187
|
-
--color-
|
|
188
|
-
|
|
189
|
-
--color-
|
|
190
|
-
--color-
|
|
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
|
+
--color-destructive-foreground: var(--nx-destructive-foreground);
|
|
181
|
+
|
|
182
|
+
--color-success: var(--nx-success);
|
|
183
|
+
--color-success-50: color-mix(in srgb, var(--nx-success), white 95%);
|
|
184
|
+
--color-success-100: color-mix(in srgb, var(--nx-success), white 90%);
|
|
185
|
+
--color-success-200: color-mix(in srgb, var(--nx-success), white 70%);
|
|
186
|
+
--color-success-300: color-mix(in srgb, var(--nx-success), white 50%);
|
|
187
|
+
--color-success-400: color-mix(in srgb, var(--nx-success), white 30%);
|
|
188
|
+
--color-success-500: var(--nx-success);
|
|
189
|
+
--color-success-600: color-mix(in srgb, var(--nx-success), black 10%);
|
|
190
|
+
--color-success-700: color-mix(in srgb, var(--nx-success), black 30%);
|
|
191
|
+
--color-success-800: color-mix(in srgb, var(--nx-success), black 50%);
|
|
192
|
+
--color-success-900: color-mix(in srgb, var(--nx-success), black 70%);
|
|
193
|
+
--color-success-950: color-mix(in srgb, var(--nx-success), black 85%);
|
|
194
|
+
--color-success-foreground: var(--nx-success-foreground);
|
|
195
|
+
|
|
196
|
+
--color-warning: var(--nx-warning);
|
|
197
|
+
--color-warning-50: color-mix(in srgb, var(--nx-warning), white 95%);
|
|
198
|
+
--color-warning-100: color-mix(in srgb, var(--nx-warning), white 90%);
|
|
199
|
+
--color-warning-200: color-mix(in srgb, var(--nx-warning), white 70%);
|
|
200
|
+
--color-warning-300: color-mix(in srgb, var(--nx-warning), white 50%);
|
|
201
|
+
--color-warning-400: color-mix(in srgb, var(--nx-warning), white 30%);
|
|
202
|
+
--color-warning-500: var(--nx-warning);
|
|
203
|
+
--color-warning-600: color-mix(in srgb, var(--nx-warning), black 10%);
|
|
204
|
+
--color-warning-700: color-mix(in srgb, var(--nx-warning), black 30%);
|
|
205
|
+
--color-warning-800: color-mix(in srgb, var(--nx-warning), black 50%);
|
|
206
|
+
--color-warning-900: color-mix(in srgb, var(--nx-warning), black 70%);
|
|
207
|
+
--color-warning-950: color-mix(in srgb, var(--nx-warning), black 85%);
|
|
208
|
+
--color-warning-foreground: var(--nx-warning-foreground);
|
|
209
|
+
|
|
210
|
+
/* The editor's highlight mark. A token rather than a literal because it
|
|
211
|
+
* styles authored content, which an integrator restyles to their own site
|
|
212
|
+
* and which has to stay readable on a dark page. */
|
|
213
|
+
--color-highlight: var(--nx-highlight);
|
|
214
|
+
--color-highlight-foreground: var(--nx-highlight-foreground);
|
|
215
|
+
|
|
216
|
+
/* Syntax colors, so code tokens are styled the same way as everything else
|
|
217
|
+
* (text-code-keyword, bg-code-bg) instead of through bespoke CSS. */
|
|
218
|
+
--color-code-bg: var(--nx-code-bg);
|
|
219
|
+
--color-code-fg: var(--nx-code-fg);
|
|
220
|
+
--color-code-comment: var(--nx-code-comment);
|
|
221
|
+
--color-code-keyword: var(--nx-code-keyword);
|
|
222
|
+
--color-code-string: var(--nx-code-string);
|
|
223
|
+
--color-code-number: var(--nx-code-number);
|
|
224
|
+
--color-code-function: var(--nx-code-function);
|
|
225
|
+
--color-code-operator: var(--nx-code-operator);
|
|
226
|
+
--color-code-punctuation: var(--nx-code-punctuation);
|
|
227
|
+
--color-code-variable: var(--nx-code-variable);
|
|
228
|
+
--color-code-tag: var(--nx-code-tag);
|
|
229
|
+
--color-code-deleted: var(--nx-code-deleted);
|
|
230
|
+
--color-code-inserted: var(--nx-code-inserted);
|
|
231
|
+
|
|
232
|
+
--color-muted: var(--nx-muted);
|
|
233
|
+
--color-muted-foreground: var(--nx-muted-foreground);
|
|
234
|
+
|
|
235
|
+
--color-accent: var(--nx-accent);
|
|
236
|
+
--color-accent-50: color-mix(in srgb, var(--nx-accent), white 95%);
|
|
237
|
+
--color-accent-100: color-mix(in srgb, var(--nx-accent), white 90%);
|
|
238
|
+
--color-accent-200: color-mix(in srgb, var(--nx-accent), white 70%);
|
|
239
|
+
--color-accent-300: color-mix(in srgb, var(--nx-accent), white 50%);
|
|
240
|
+
--color-accent-400: color-mix(in srgb, var(--nx-accent), white 30%);
|
|
241
|
+
--color-accent-500: var(--nx-accent);
|
|
242
|
+
--color-accent-600: color-mix(in srgb, var(--nx-accent), black 10%);
|
|
243
|
+
--color-accent-700: color-mix(in srgb, var(--nx-accent), black 30%);
|
|
244
|
+
--color-accent-800: color-mix(in srgb, var(--nx-accent), black 50%);
|
|
245
|
+
--color-accent-900: color-mix(in srgb, var(--nx-accent), black 70%);
|
|
246
|
+
--color-accent-950: color-mix(in srgb, var(--nx-accent), black 85%);
|
|
247
|
+
--color-accent-foreground: var(--nx-accent-foreground);
|
|
248
|
+
|
|
249
|
+
--color-card: var(--nx-card);
|
|
250
|
+
--color-card-foreground: var(--nx-card-foreground);
|
|
251
|
+
|
|
252
|
+
--color-popover: var(--nx-popover);
|
|
253
|
+
--color-popover-foreground: var(--nx-popover-foreground);
|
|
191
254
|
|
|
192
255
|
/* 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);
|
|
256
|
+
--color-sidebar: var(--nx-sidebar-background);
|
|
257
|
+
--color-sidebar-background: var(--nx-sidebar-background);
|
|
258
|
+
--color-sidebar-foreground: var(--nx-sidebar-foreground);
|
|
259
|
+
--color-sidebar-primary: var(--nx-sidebar-primary);
|
|
260
|
+
--color-sidebar-primary-foreground: var(--nx-sidebar-primary-foreground);
|
|
261
|
+
--color-sidebar-accent: var(--nx-sidebar-accent);
|
|
262
|
+
--color-sidebar-accent-background: var(--nx-sidebar-accent);
|
|
263
|
+
--color-sidebar-accent-foreground: var(--nx-sidebar-accent-foreground);
|
|
264
|
+
--color-sidebar-border: var(--nx-sidebar-border);
|
|
265
|
+
--color-sidebar-ring: var(--nx-sidebar-ring);
|
|
203
266
|
|
|
204
267
|
/* ============================================
|
|
205
268
|
* TYPOGRAPHY (Tailwind v4.1)
|
|
@@ -348,13 +411,13 @@
|
|
|
348
411
|
/* Custom Functional Shadows (Fixes build warnings from arbitrary values) */
|
|
349
412
|
--shadow-inner-subtle: 0 -4px 6px -1px rgba(0, 0, 0, 0.05);
|
|
350
413
|
--shadow-glow-success: 0 0 10px
|
|
351
|
-
color-mix(in srgb, var(--success) 10%, transparent);
|
|
414
|
+
color-mix(in srgb, var(--nx-success) 10%, transparent);
|
|
352
415
|
--shadow-glow-primary: 0 0 15px
|
|
353
|
-
color-mix(in srgb, var(--primary) 50%, transparent);
|
|
416
|
+
color-mix(in srgb, var(--nx-primary) 50%, transparent);
|
|
354
417
|
--shadow-elevation-primary: 0 8px 20px -8px
|
|
355
|
-
color-mix(in srgb, var(--primary) 40%, transparent);
|
|
418
|
+
color-mix(in srgb, var(--nx-primary) 40%, transparent);
|
|
356
419
|
--shadow-soft-primary: 0 8px 30px
|
|
357
|
-
color-mix(in srgb, var(--primary) 6%, transparent);
|
|
420
|
+
color-mix(in srgb, var(--nx-primary) 6%, transparent);
|
|
358
421
|
--shadow-neo: 4px 4px 0px 0px rgba(0, 0, 0, 0.1);
|
|
359
422
|
|
|
360
423
|
/* ============================================
|
|
@@ -409,13 +472,13 @@
|
|
|
409
472
|
100% {
|
|
410
473
|
transform: scale(0.97);
|
|
411
474
|
filter: drop-shadow(
|
|
412
|
-
0 0 10px color-mix(in srgb, var(--primary) 8%, transparent)
|
|
475
|
+
0 0 10px color-mix(in srgb, var(--nx-primary) 8%, transparent)
|
|
413
476
|
);
|
|
414
477
|
}
|
|
415
478
|
50% {
|
|
416
479
|
transform: scale(1.03);
|
|
417
480
|
filter: drop-shadow(
|
|
418
|
-
0 0 20px color-mix(in srgb, var(--primary) 22%, transparent)
|
|
481
|
+
0 0 20px color-mix(in srgb, var(--nx-primary) 22%, transparent)
|
|
419
482
|
);
|
|
420
483
|
}
|
|
421
484
|
}
|
|
@@ -526,79 +589,106 @@
|
|
|
526
589
|
|
|
527
590
|
:root {
|
|
528
591
|
/* Base colors - using Slate neutral scale */
|
|
529
|
-
--background: oklch(1 0 0);
|
|
592
|
+
--nx-background: oklch(1 0 0);
|
|
530
593
|
/* Pure white for weightless aesthetic */
|
|
531
|
-
--page-background: oklch(0.9818 0 0);
|
|
594
|
+
--nx-page-background: oklch(0.9818 0 0);
|
|
532
595
|
/* #f9f9f9 for page content area */
|
|
533
|
-
--foreground: oklch(0.2079 0.0399 265.73);
|
|
596
|
+
--nx-foreground: oklch(0.2079 0.0399 265.73);
|
|
534
597
|
/* slate-900 */
|
|
535
598
|
|
|
536
599
|
/* Component colors */
|
|
537
|
-
--card: oklch(1 0 0);
|
|
600
|
+
--nx-card: oklch(1 0 0);
|
|
538
601
|
/* pure white for cards to pop on off-white bg */
|
|
539
|
-
--card-foreground: oklch(0.2079 0.0399 265.73);
|
|
602
|
+
--nx-card-foreground: oklch(0.2079 0.0399 265.73);
|
|
540
603
|
/* slate-900 */
|
|
541
|
-
--popover: oklch(1 0 0);
|
|
604
|
+
--nx-popover: oklch(1 0 0);
|
|
542
605
|
/* white */
|
|
543
|
-
--popover-foreground: oklch(0.2079 0.0399 265.73);
|
|
606
|
+
--nx-popover-foreground: oklch(0.2079 0.0399 265.73);
|
|
544
607
|
/* slate-900 */
|
|
545
608
|
|
|
546
609
|
/* Brand colors - Blue-Cyan Professional Palette */
|
|
547
|
-
--primary: oklch(0 0 0);
|
|
610
|
+
--nx-primary: oklch(0 0 0);
|
|
548
611
|
/* Black for premium minimalist aesthetic */
|
|
549
|
-
--primary-foreground: oklch(1 0 0);
|
|
612
|
+
--nx-primary-foreground: oklch(1 0 0);
|
|
550
613
|
/* white */
|
|
551
614
|
|
|
552
615
|
/* Secondary colors - using slate-100 for subtle backgrounds */
|
|
553
|
-
--secondary: oklch(0.9684 0.0068 247.9);
|
|
616
|
+
--nx-secondary: oklch(0.9684 0.0068 247.9);
|
|
554
617
|
/* slate-100 */
|
|
555
|
-
--secondary-foreground: oklch(0.2079 0.0399 265.73);
|
|
618
|
+
--nx-secondary-foreground: oklch(0.2079 0.0399 265.73);
|
|
556
619
|
/* slate-900 */
|
|
557
620
|
|
|
558
621
|
/* Utility colors */
|
|
559
|
-
--muted: oklch(0.9696 0 0);
|
|
560
|
-
--muted-foreground: oklch(0.5547 0.0407 257.44);
|
|
622
|
+
--nx-muted: oklch(0.9696 0 0);
|
|
623
|
+
--nx-muted-foreground: oklch(0.5547 0.0407 257.44);
|
|
561
624
|
/* slate-500 */
|
|
562
|
-
--accent: oklch(0.5547 0.0407 257.44);
|
|
625
|
+
--nx-accent: oklch(0.5547 0.0407 257.44);
|
|
563
626
|
/* Slate-500 per user request #64748b */
|
|
564
|
-
--accent-foreground: oklch(1 0 0);
|
|
627
|
+
--nx-accent-foreground: oklch(1 0 0);
|
|
565
628
|
/* white */
|
|
566
629
|
|
|
567
630
|
/* State colors - WCAG 2.2 AA Compliant */
|
|
568
|
-
--destructive: oklch(0.6368 0.2078 25.33);
|
|
631
|
+
--nx-destructive: oklch(0.6368 0.2078 25.33);
|
|
569
632
|
/* red-500 (#ef4444) */
|
|
570
|
-
--destructive-foreground: oklch(1 0 0);
|
|
633
|
+
--nx-destructive-foreground: oklch(1 0 0);
|
|
571
634
|
/* white */
|
|
572
|
-
--success: oklch(0.6273 0.17 149.2);
|
|
635
|
+
--nx-success: oklch(0.6273 0.17 149.2);
|
|
573
636
|
/* green-600 (#16a34a) - AA compliant */
|
|
574
|
-
--success-foreground: oklch(1 0 0);
|
|
637
|
+
--nx-success-foreground: oklch(1 0 0);
|
|
575
638
|
/* white */
|
|
576
|
-
--warning: oklch(0.7686 0.1646 70.11);
|
|
639
|
+
--nx-warning: oklch(0.7686 0.1646 70.11);
|
|
577
640
|
/* amber-500 (#f59e0b) */
|
|
578
|
-
--warning-foreground: oklch(0.2079 0.0399 265.73);
|
|
641
|
+
--nx-warning-foreground: oklch(0.2079 0.0399 265.73);
|
|
579
642
|
/* slate-900 - REQUIRED for AA contrast (warning-500 on white = 3.4:1, fails AA) */
|
|
580
643
|
|
|
644
|
+
/* The highlighter mark in authored content. Kept a light yellow in both
|
|
645
|
+
* modes on purpose: it stands for a marker pen drawn over the text, and the
|
|
646
|
+
* pairing below is what keeps that readable rather than the page's own
|
|
647
|
+
* foreground, which would be white-on-yellow in dark mode. */
|
|
648
|
+
--nx-highlight: oklch(0.9297 0.1638 101.06);
|
|
649
|
+
/* yellow-200 */
|
|
650
|
+
--nx-highlight-foreground: oklch(0.2079 0.0399 265.73);
|
|
651
|
+
/* slate-900 — the mark keeps its own dark text, whatever the page does */
|
|
652
|
+
|
|
653
|
+
/* Syntax colors. The tokenizer reports what a token *is*; these decide how
|
|
654
|
+
* it looks, so a code block carries no colour of its own and renders from
|
|
655
|
+
* whichever mode is active. Kept muted against the monochrome chrome, and
|
|
656
|
+
* held above 4.5:1 on --nx-code-bg since code is small text. */
|
|
657
|
+
--nx-code-bg: oklch(0.9761 0.0035 247.86);
|
|
658
|
+
--nx-code-fg: oklch(0.2079 0.0399 265.73);
|
|
659
|
+
--nx-code-comment: oklch(0.5547 0.0407 257.44);
|
|
660
|
+
--nx-code-keyword: oklch(0.4882 0.2172 303.9);
|
|
661
|
+
--nx-code-string: oklch(0.4478 0.1189 152.1);
|
|
662
|
+
--nx-code-number: oklch(0.5106 0.1518 44.2);
|
|
663
|
+
--nx-code-function: oklch(0.4757 0.1444 254.6);
|
|
664
|
+
--nx-code-operator: oklch(0.4936 0.1418 8.4);
|
|
665
|
+
--nx-code-punctuation: oklch(0.5547 0.0407 257.44);
|
|
666
|
+
--nx-code-variable: oklch(0.4694 0.1173 62.3);
|
|
667
|
+
--nx-code-tag: oklch(0.5054 0.1905 27.5);
|
|
668
|
+
--nx-code-deleted: oklch(0.5054 0.1905 27.5);
|
|
669
|
+
--nx-code-inserted: oklch(0.4478 0.1189 152.1);
|
|
670
|
+
|
|
581
671
|
/* Element colors — 3-tier translucent border scale (monochrome).
|
|
582
|
-
* Was a single --border at 5% black (~1.05:1, effectively invisible).
|
|
672
|
+
* Was a single --nx-border at 5% black (~1.05:1, effectively invisible).
|
|
583
673
|
* subtle = decorative dividers/cards; default = tables/groups;
|
|
584
674
|
* 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(
|
|
675
|
+
--nx-border-subtle: oklch(0 0 0 / 0.08);
|
|
676
|
+
--nx-border: oklch(0 0 0 / 0.13);
|
|
677
|
+
--nx-border-strong: oklch(0 0 0 / 0.3);
|
|
678
|
+
--nx-input: oklch(
|
|
589
679
|
0.7384 0.0116 286.11
|
|
590
680
|
); /* zinc-400: stronger visible field border (was zinc-300, too faint) */
|
|
591
|
-
--ring: var(--primary);
|
|
681
|
+
--nx-ring: var(--nx-primary);
|
|
592
682
|
|
|
593
683
|
/* Chart colors for data visualization */
|
|
594
|
-
--chart-1: var(--primary);
|
|
595
|
-
--chart-2: oklch(0.7399 0.1277 209.34);
|
|
684
|
+
--nx-chart-1: var(--nx-primary);
|
|
685
|
+
--nx-chart-2: oklch(0.7399 0.1277 209.34);
|
|
596
686
|
/* cyan-500 */
|
|
597
|
-
--chart-3: oklch(0.6273 0.17 149.2);
|
|
687
|
+
--nx-chart-3: oklch(0.6273 0.17 149.2);
|
|
598
688
|
/* green-600 */
|
|
599
|
-
--chart-4: oklch(0.7686 0.1646 70.11);
|
|
689
|
+
--nx-chart-4: oklch(0.7686 0.1646 70.11);
|
|
600
690
|
/* amber-500 */
|
|
601
|
-
--chart-5: oklch(0.6368 0.2078 25.33);
|
|
691
|
+
--nx-chart-5: oklch(0.6368 0.2078 25.33);
|
|
602
692
|
/* red-500 */
|
|
603
693
|
|
|
604
694
|
/* Design tokens */
|
|
@@ -607,139 +697,163 @@
|
|
|
607
697
|
/* Control sizing — derived from a single height knob so control density
|
|
608
698
|
* scales from one place. Steps map to the control size variants:
|
|
609
699
|
* 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);
|
|
700
|
+
--nx-control-height: 2.5rem;
|
|
701
|
+
--nx-control-height-sm: calc(var(--nx-control-height) - 0.5rem);
|
|
702
|
+
--nx-control-height-md: calc(var(--nx-control-height) - 0.25rem);
|
|
703
|
+
--nx-control-height-lg: calc(var(--nx-control-height) + 0.25rem);
|
|
614
704
|
|
|
615
705
|
/* Focus ring colors */
|
|
616
|
-
--focus-ring: var(--primary);
|
|
617
|
-
--focus-ring-offset: oklch(1 0 0);
|
|
706
|
+
--nx-focus-ring: var(--nx-primary);
|
|
707
|
+
--nx-focus-ring-offset: oklch(1 0 0);
|
|
618
708
|
/* white */
|
|
619
709
|
|
|
620
710
|
/* Sidebar specific colors - using Slate scale */
|
|
621
|
-
--sidebar-background:
|
|
622
|
-
/*
|
|
623
|
-
--sidebar-foreground: oklch(0.372 0.0392 257.3);
|
|
711
|
+
--nx-sidebar-background: var(--nx-background);
|
|
712
|
+
/* flat with the content surface; nav is separated by borders, not fill */
|
|
713
|
+
--nx-sidebar-foreground: oklch(0.372 0.0392 257.3);
|
|
624
714
|
/* slate-700 */
|
|
625
|
-
--sidebar-primary: oklch(0.2079 0.0399 265.73);
|
|
715
|
+
--nx-sidebar-primary: oklch(0.2079 0.0399 265.73);
|
|
626
716
|
/* slate-900 */
|
|
627
|
-
--sidebar-primary-foreground: oklch(0.9838 0.0035 247.86);
|
|
717
|
+
--nx-sidebar-primary-foreground: oklch(0.9838 0.0035 247.86);
|
|
628
718
|
/* slate-50 */
|
|
629
|
-
--sidebar-accent: oklch(0.9684 0.0068 247.9);
|
|
719
|
+
--nx-sidebar-accent: oklch(0.9684 0.0068 247.9);
|
|
630
720
|
/* slate-100 */
|
|
631
|
-
--sidebar-accent-foreground: oklch(0.2079 0.0399 265.73);
|
|
721
|
+
--nx-sidebar-accent-foreground: oklch(0.2079 0.0399 265.73);
|
|
632
722
|
/* slate-900 */
|
|
633
|
-
--sidebar-border: oklch(0.929 0.0126 255.53);
|
|
723
|
+
--nx-sidebar-border: oklch(0.929 0.0126 255.53);
|
|
634
724
|
/* slate-200 */
|
|
635
|
-
--sidebar-ring: var(--primary);
|
|
725
|
+
--nx-sidebar-ring: var(--nx-primary);
|
|
636
726
|
|
|
637
727
|
/* Data table specific colors */
|
|
638
|
-
--table-row-hover: oklch(0.9848 0 0);
|
|
639
|
-
--table-row-selected: var(--primary);
|
|
640
|
-
--table-border: var(--border);
|
|
728
|
+
--nx-table-row-hover: oklch(0.9848 0 0);
|
|
729
|
+
--nx-table-row-selected: var(--nx-primary);
|
|
730
|
+
--nx-table-border: var(--nx-border);
|
|
641
731
|
}
|
|
642
732
|
|
|
643
733
|
/* Dark theme overrides when using class-based theming */
|
|
644
734
|
.dark {
|
|
645
735
|
/* Base colors - using Slate dark scale */
|
|
646
|
-
--background: oklch(0.1358 0.0163 262.71);
|
|
736
|
+
--nx-background: oklch(0.1358 0.0163 262.71);
|
|
647
737
|
/* ultra deep dark background (darker than slate-950) */
|
|
648
|
-
--page-background: oklch(0.1358 0.0163 262.71);
|
|
738
|
+
--nx-page-background: oklch(0.1358 0.0163 262.71);
|
|
649
739
|
/* Matches background in dark mode */
|
|
650
|
-
--foreground: oklch(0.9838 0.0035 247.86);
|
|
740
|
+
--nx-foreground: oklch(0.9838 0.0035 247.86);
|
|
651
741
|
/* slate-50 */
|
|
652
742
|
|
|
653
743
|
/* Component colors */
|
|
654
|
-
--card: oklch(0.1916 0.0228 266.36);
|
|
655
|
-
/* raised one tonal step above --background (222 47% 4%) so panels/cards
|
|
744
|
+
--nx-card: oklch(0.1916 0.0228 266.36);
|
|
745
|
+
/* raised one tonal step above --nx-background (222 47% 4%) so panels/cards
|
|
656
746
|
* read as distinct surfaces in dark mode instead of merging into the page */
|
|
657
|
-
--card-foreground: oklch(0.9838 0.0035 247.86);
|
|
747
|
+
--nx-card-foreground: oklch(0.9838 0.0035 247.86);
|
|
658
748
|
/* slate-50 */
|
|
659
|
-
--popover: oklch(0.369 0.0249 257.44);
|
|
749
|
+
--nx-popover: oklch(0.369 0.0249 257.44);
|
|
660
750
|
/* slate-800 */
|
|
661
|
-
--popover-foreground: oklch(0.9838 0.0035 247.86);
|
|
751
|
+
--nx-popover-foreground: oklch(0.9838 0.0035 247.86);
|
|
662
752
|
/* slate-50 */
|
|
663
753
|
|
|
664
754
|
/* 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);
|
|
755
|
+
--nx-primary: oklch(1 0 0); /* High contrast White for dark mode */
|
|
756
|
+
--nx-primary-foreground: oklch(0.2079 0.0399 265.73);
|
|
667
757
|
/* slate-900 */
|
|
668
758
|
|
|
669
759
|
/* Secondary colors - using slate-800 for dark backgrounds */
|
|
670
|
-
--secondary: oklch(0.28 0.0369 259.97);
|
|
760
|
+
--nx-secondary: oklch(0.28 0.0369 259.97);
|
|
671
761
|
/* slate-800 */
|
|
672
|
-
--secondary-foreground: oklch(0.9838 0.0035 247.86);
|
|
762
|
+
--nx-secondary-foreground: oklch(0.9838 0.0035 247.86);
|
|
673
763
|
/* slate-50 */
|
|
674
764
|
|
|
675
765
|
/* Utility colors */
|
|
676
|
-
--muted: oklch(0.28 0.0369 259.97);
|
|
766
|
+
--nx-muted: oklch(0.28 0.0369 259.97);
|
|
677
767
|
/* slate-800 */
|
|
678
|
-
--muted-foreground: oklch(0.7107 0.0351 256.79);
|
|
768
|
+
--nx-muted-foreground: oklch(0.7107 0.0351 256.79);
|
|
679
769
|
/* slate-400 */
|
|
680
|
-
--accent: oklch(
|
|
770
|
+
--nx-accent: oklch(
|
|
681
771
|
0.5547 0.0407 257.44
|
|
682
772
|
); /* Slate-500 per user request #64748b */
|
|
683
|
-
--accent-foreground: oklch(1 0 0);
|
|
773
|
+
--nx-accent-foreground: oklch(1 0 0);
|
|
684
774
|
/* white */
|
|
685
775
|
|
|
686
776
|
/* State colors - WCAG 2.2 AA Compliant (Dark Mode) */
|
|
687
|
-
--destructive: oklch(0.6368 0.2078 25.33);
|
|
777
|
+
--nx-destructive: oklch(0.6368 0.2078 25.33);
|
|
688
778
|
/* red-500 */
|
|
689
|
-
--destructive-foreground: oklch(1 0 0);
|
|
779
|
+
--nx-destructive-foreground: oklch(1 0 0);
|
|
690
780
|
/* white */
|
|
691
|
-
--success: oklch(0.7229 0.1921 149.58);
|
|
781
|
+
--nx-success: oklch(0.7229 0.1921 149.58);
|
|
692
782
|
/* green-500 - brighter for dark mode */
|
|
693
|
-
--success-foreground: oklch(1 0 0);
|
|
783
|
+
--nx-success-foreground: oklch(1 0 0);
|
|
694
784
|
/* white */
|
|
695
|
-
--warning: oklch(0.7686 0.1646 70.11);
|
|
785
|
+
--nx-warning: oklch(0.7686 0.1646 70.11);
|
|
696
786
|
/* amber-500 */
|
|
697
|
-
--warning-foreground: oklch(0.2079 0.0399 265.73);
|
|
787
|
+
--nx-warning-foreground: oklch(0.2079 0.0399 265.73);
|
|
698
788
|
/* slate-900 */
|
|
699
789
|
|
|
790
|
+
/* Dimmed so the mark reads as highlighted rather than as a lamp on a dark
|
|
791
|
+
* page, while its own foreground stays dark enough to read against it. */
|
|
792
|
+
--nx-highlight: oklch(0.8 0.1425 101.06);
|
|
793
|
+
/* yellow-300-ish, pulled back for the dark surface */
|
|
794
|
+
--nx-highlight-foreground: oklch(0.2079 0.0399 265.73);
|
|
795
|
+
/* slate-900 */
|
|
796
|
+
|
|
797
|
+
/* Syntax colors (dark). Lightened rather than reused from light mode: the
|
|
798
|
+
* light hues sit near 0.45-0.5 lightness and disappear on the dark surface.
|
|
799
|
+
* Chroma is pulled back slightly so they don't vibrate against it. */
|
|
800
|
+
--nx-code-bg: oklch(0.1916 0.0228 266.36);
|
|
801
|
+
--nx-code-fg: oklch(0.9838 0.0035 247.86);
|
|
802
|
+
--nx-code-comment: oklch(0.6626 0.0364 256.79);
|
|
803
|
+
--nx-code-keyword: oklch(0.7482 0.1235 303.9);
|
|
804
|
+
--nx-code-string: oklch(0.7654 0.1476 152.1);
|
|
805
|
+
--nx-code-number: oklch(0.7807 0.1189 44.2);
|
|
806
|
+
--nx-code-function: oklch(0.7365 0.1163 254.6);
|
|
807
|
+
--nx-code-operator: oklch(0.7549 0.1234 8.4);
|
|
808
|
+
--nx-code-punctuation: oklch(0.6626 0.0364 256.79);
|
|
809
|
+
--nx-code-variable: oklch(0.7938 0.1052 62.3);
|
|
810
|
+
--nx-code-tag: oklch(0.7118 0.1476 27.5);
|
|
811
|
+
--nx-code-deleted: oklch(0.7118 0.1476 27.5);
|
|
812
|
+
--nx-code-inserted: oklch(0.7654 0.1476 152.1);
|
|
813
|
+
|
|
700
814
|
/* Element colors — 3-tier translucent border scale (white-alpha for dark).
|
|
701
815
|
* Recomputed as white-over-dark alpha (not a flipped hex) so dividers read
|
|
702
816
|
* 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(
|
|
817
|
+
--nx-border-subtle: oklch(1 0 0 / 0.08);
|
|
818
|
+
--nx-border: oklch(1 0 0 / 0.13);
|
|
819
|
+
--nx-border-strong: oklch(1 0 0 / 0.34);
|
|
820
|
+
--nx-input: oklch(
|
|
707
821
|
0.4987 0.0128 285.92
|
|
708
822
|
); /* stronger visible field border (was zinc-700, too faint) */
|
|
709
|
-
--ring: var(--primary);
|
|
823
|
+
--nx-ring: var(--nx-primary);
|
|
710
824
|
|
|
711
825
|
/* Chart colors for data visualization (same as light mode) */
|
|
712
|
-
--chart-1: var(--primary);
|
|
713
|
-
--chart-2: oklch(0.7399 0.1277 209.34);
|
|
826
|
+
--nx-chart-1: var(--nx-primary);
|
|
827
|
+
--nx-chart-2: oklch(0.7399 0.1277 209.34);
|
|
714
828
|
/* cyan-500 */
|
|
715
|
-
--chart-3: oklch(0.7229 0.1921 149.58);
|
|
829
|
+
--nx-chart-3: oklch(0.7229 0.1921 149.58);
|
|
716
830
|
/* green-500 */
|
|
717
|
-
--chart-4: oklch(0.7686 0.1646 70.11);
|
|
831
|
+
--nx-chart-4: oklch(0.7686 0.1646 70.11);
|
|
718
832
|
/* amber-500 */
|
|
719
|
-
--chart-5: oklch(0.6368 0.2078 25.33);
|
|
833
|
+
--nx-chart-5: oklch(0.6368 0.2078 25.33);
|
|
720
834
|
/* red-500 */
|
|
721
835
|
|
|
722
836
|
/* Sidebar specific colors - dark mode */
|
|
723
|
-
--sidebar-background:
|
|
724
|
-
/*
|
|
725
|
-
--sidebar-foreground: oklch(0.9838 0.0035 247.86);
|
|
837
|
+
--nx-sidebar-background: var(--nx-background);
|
|
838
|
+
/* flat with the content surface; nav is separated by borders, not fill */
|
|
839
|
+
--nx-sidebar-foreground: oklch(0.9838 0.0035 247.86);
|
|
726
840
|
/* slate-50 */
|
|
727
|
-
--sidebar-primary: oklch(0.9838 0.0035 247.86);
|
|
841
|
+
--nx-sidebar-primary: oklch(0.9838 0.0035 247.86);
|
|
728
842
|
/* slate-50 */
|
|
729
|
-
--sidebar-primary-foreground: oklch(0.2079 0.0399 265.73);
|
|
843
|
+
--nx-sidebar-primary-foreground: oklch(0.2079 0.0399 265.73);
|
|
730
844
|
/* slate-900 */
|
|
731
|
-
--sidebar-accent: oklch(0.28 0.0369 259.97);
|
|
845
|
+
--nx-sidebar-accent: oklch(0.28 0.0369 259.97);
|
|
732
846
|
/* slate-800 */
|
|
733
|
-
--sidebar-accent-foreground: oklch(0.9838 0.0035 247.86);
|
|
847
|
+
--nx-sidebar-accent-foreground: oklch(0.9838 0.0035 247.86);
|
|
734
848
|
/* slate-50 */
|
|
735
|
-
--sidebar-border: oklch(0.2321 0.0129 257.43);
|
|
849
|
+
--nx-sidebar-border: oklch(0.2321 0.0129 257.43);
|
|
736
850
|
/* subtle slate-900 */
|
|
737
|
-
--sidebar-ring: var(--primary);
|
|
851
|
+
--nx-sidebar-ring: var(--nx-primary);
|
|
738
852
|
|
|
739
853
|
/* Data table specific colors - dark mode */
|
|
740
|
-
--table-row-hover: oklch(0.28 0.0369 259.97);
|
|
854
|
+
--nx-table-row-hover: oklch(0.28 0.0369 259.97);
|
|
741
855
|
/* slate-800 */
|
|
742
|
-
--table-row-selected: var(--primary);
|
|
743
|
-
--table-border: var(--border);
|
|
856
|
+
--nx-table-row-selected: var(--nx-primary);
|
|
857
|
+
--nx-table-border: var(--nx-border);
|
|
744
858
|
/* inherit the retuned white-alpha border (was a fixed faint slate) */
|
|
745
859
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nextlyhq/ui",
|
|
3
|
-
"version": "0.0.2-alpha.
|
|
3
|
+
"version": "0.0.2-alpha.35",
|
|
4
4
|
"description": "Nextly UI — Reusable React component library for Nextly plugins and custom admin UIs",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"keywords": [
|
|
@@ -43,9 +43,9 @@
|
|
|
43
43
|
"@vitejs/plugin-react": "^5.1.0",
|
|
44
44
|
"@vitest/coverage-v8": "^4.0.8",
|
|
45
45
|
"@vitest/ui": "^4.0.8",
|
|
46
|
-
"eslint": "^9.
|
|
47
|
-
"lucide-react": "^0.544.0",
|
|
46
|
+
"eslint": "^9.39.1",
|
|
48
47
|
"jsdom": "^27.1.0",
|
|
48
|
+
"lucide-react": "^0.544.0",
|
|
49
49
|
"react": "19.2.0",
|
|
50
50
|
"react-dom": "19.2.0",
|
|
51
51
|
"tailwindcss": "^4.3.2",
|
|
@@ -53,8 +53,8 @@
|
|
|
53
53
|
"typescript": "^5.9.3",
|
|
54
54
|
"vite-tsconfig-paths": "^5.1.4",
|
|
55
55
|
"vitest": "^4.0.8",
|
|
56
|
-
"@nextlyhq/eslint-config": "0.0.2-alpha.
|
|
57
|
-
"@nextlyhq/tsconfig": "0.0.2-alpha.
|
|
56
|
+
"@nextlyhq/eslint-config": "0.0.2-alpha.35",
|
|
57
|
+
"@nextlyhq/tsconfig": "0.0.2-alpha.35"
|
|
58
58
|
},
|
|
59
59
|
"dependencies": {
|
|
60
60
|
"@radix-ui/react-accordion": "^1.2.12",
|