najm-kit 2.1.31 → 2.1.32
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/README.md +167 -168
- package/dist/index.d.ts +94 -31
- package/dist/index.mjs +5274 -3732
- package/dist/theme.css +343 -343
- package/package.json +4 -1
package/dist/theme.css
CHANGED
|
@@ -1,346 +1,346 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* najm-kit v4 theme entry. Consumers use:
|
|
3
|
-
*
|
|
4
|
-
* @import "tailwindcss";
|
|
5
|
-
* @import "najm-kit/theme.css";
|
|
6
|
-
*
|
|
7
|
-
* This file is the source of truth; the build copies it to dist/theme.css and
|
|
8
|
-
* appends the third-party (overlayscrollbars, phone) CSS so consumers get a
|
|
9
|
-
* single self-contained import. The `@source` below resolves relative to this
|
|
10
|
-
* file's location, so the consumer's Tailwind v4 build scans najm-kit's
|
|
11
|
-
* compiled components in dist (or the source dir when aliased in dev) for the
|
|
12
|
-
* utility classes they use.
|
|
13
|
-
*
|
|
14
|
-
* Token names follow the standard shadcn convention (no package prefix) so
|
|
15
|
-
* apps can theme najm-kit by pasting a shadcn / tweakcn theme block on top.
|
|
16
|
-
*/
|
|
17
|
-
@import "tw-animate-css";
|
|
18
|
-
|
|
19
|
-
@source "./";
|
|
20
|
-
|
|
21
|
-
@custom-variant dark (&:where(.dark, .dark *));
|
|
22
|
-
|
|
23
|
-
/* Classes built dynamically at runtime (borders.ts, BaseInput.tsx, responsive
|
|
24
|
-
helpers) never appear as literals the scanner can find, so safelist them. */
|
|
25
|
-
@source inline("{sm,md,lg}:{hidden,flex}");
|
|
26
|
-
@source inline("border-{black,white}");
|
|
27
|
-
@source inline("border-{gray,slate,zinc,neutral,stone,red,orange,amber,yellow,green,teal,blue,indigo,purple}{,-600}");
|
|
28
|
-
@source inline("najm-border najm-border-t najm-border-r najm-border-b najm-border-l");
|
|
29
|
-
|
|
30
|
-
/* NGrid / NGridItem build column and span classes dynamically. */
|
|
31
|
-
@source inline("grid-cols-{1,2,3,4,5,6,7,8,9,10,11,12}");
|
|
32
|
-
@source inline("{sm,md,lg,xl}:grid-cols-{1,2,3,4,5,6,7,8,9,10,11,12}");
|
|
33
|
-
@source inline("col-span-{1,2,3,4,5,6,7,8,9,10,11,12}");
|
|
34
|
-
@source inline("{sm,md,lg,xl}:col-span-{1,2,3,4,5,6,7,8,9,10,11,12}");
|
|
35
|
-
|
|
36
|
-
/* Map Tailwind's color theme to the runtime --* tokens. `inline` lets color
|
|
37
|
-
utilities resolve the semantic token at the themed element. Radius tokens
|
|
38
|
-
intentionally live in the non-inline block below so rounded-* utilities
|
|
39
|
-
keep referencing --radius-* and can be changed at runtime by
|
|
40
|
-
NajmThemeProvider's
|
|
41
|
-
@theme inline {
|
|
42
|
-
--color-background: var(--background);
|
|
43
|
-
--color-foreground: var(--foreground);
|
|
44
|
-
--color-card: var(--card);
|
|
45
|
-
--color-card-foreground: var(--card-foreground);
|
|
46
|
-
--color-popover: var(--popover);
|
|
47
|
-
--color-popover-foreground: var(--popover-foreground);
|
|
48
|
-
--color-primary: var(--primary);
|
|
49
|
-
--color-primary-foreground: var(--primary-foreground);
|
|
50
|
-
--color-secondary: var(--secondary);
|
|
51
|
-
--color-secondary-foreground: var(--secondary-foreground);
|
|
52
|
-
--color-tertiary: var(--tertiary);
|
|
53
|
-
--color-tertiary-foreground: var(--tertiary-foreground);
|
|
54
|
-
--color-muted: var(--muted);
|
|
55
|
-
--color-muted-foreground: var(--muted-foreground);
|
|
56
|
-
--color-accent: var(--accent);
|
|
57
|
-
--color-accent-foreground: var(--accent-foreground);
|
|
58
|
-
--color-neutral: var(--neutral);
|
|
59
|
-
--color-neutral-foreground: var(--neutral-foreground);
|
|
60
|
-
--color-info: var(--info);
|
|
61
|
-
--color-info-foreground: var(--info-foreground);
|
|
62
|
-
--color-success: var(--success);
|
|
63
|
-
--color-success-foreground: var(--success-foreground);
|
|
64
|
-
--color-warning: var(--warning);
|
|
65
|
-
--color-warning-foreground: var(--warning-foreground);
|
|
66
|
-
--color-destructive: var(--destructive);
|
|
67
|
-
--color-destructive-foreground: var(--destructive-foreground);
|
|
68
|
-
--color-border: var(--border);
|
|
69
|
-
--color-input: var(--input);
|
|
70
|
-
--color-ring: var(--ring);
|
|
71
|
-
|
|
72
|
-
--color-sidebar: var(--sidebar);
|
|
73
|
-
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
74
|
-
--color-sidebar-primary: var(--sidebar-primary);
|
|
75
|
-
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
76
|
-
--color-sidebar-accent: var(--sidebar-accent);
|
|
77
|
-
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
78
|
-
--color-sidebar-border: var(--sidebar-border);
|
|
79
|
-
--color-sidebar-ring: var(--sidebar-ring);
|
|
80
|
-
|
|
81
|
-
--color-chart-1: var(--chart-1);
|
|
82
|
-
--color-chart-2: var(--chart-2);
|
|
83
|
-
--color-chart-3: var(--chart-3);
|
|
84
|
-
--color-chart-4: var(--chart-4);
|
|
85
|
-
--color-chart-5: var(--chart-5);
|
|
86
|
-
|
|
87
|
-
--animate-indeterminate-progress: indeterminate-progress 2s ease-in-out infinite;
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
@theme {
|
|
91
|
-
--radius-xs: calc(var(--radius) - 4px);
|
|
92
|
-
--radius-sm: calc(var(--radius) - 4px);
|
|
93
|
-
--radius-md: calc(var(--radius) - 2px);
|
|
94
|
-
--radius-lg: var(--radius);
|
|
95
|
-
--radius-xl: calc(var(--radius) + 4px);
|
|
96
|
-
--radius-2xl: calc(var(--radius) + 8px);
|
|
97
|
-
--radius-3xl: calc(var(--radius) + 12px);
|
|
98
|
-
--radius-4xl: calc(var(--radius) + 16px);
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
@keyframes indeterminate-progress {
|
|
102
|
-
0% { transform: translateX(-100%); width: 40%; }
|
|
103
|
-
50% { transform: translateX(100%); width: 60%; }
|
|
104
|
-
100% { transform: translateX(200%); width: 40%; }
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
/* Typography variables emitted by NajmDesignProvider. */
|
|
108
|
-
[data-najm-design-vars] {
|
|
109
|
-
font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif
|
|
110
|
-
font-size: var(--font-size-base, 14px);
|
|
111
|
-
line-height: var(--line-height-base, 1.5);
|
|
112
|
-
letter-spacing: var(--letter-spacing-base, 0);
|
|
113
|
-
--text-xs: calc(var(--font-size-base, 14px) * 0.857142857 * var(--font-scale, 1));
|
|
114
|
-
--text-xs--line-height: var(--line-height-base, 1.5);
|
|
115
|
-
--text-sm: calc(var(--font-size-base, 14px) * var(--font-scale, 1));
|
|
116
|
-
--text-sm--line-height: var(--line-height-base, 1.5);
|
|
117
|
-
--text-base: calc(var(--font-size-base, 14px) * 1.142857143 * var(--font-scale, 1));
|
|
118
|
-
--text-base--line-height: var(--line-height-base, 1.5);
|
|
119
|
-
--text-lg: calc(var(--font-size-base, 14px) * 1.285714286 * var(--font-scale, 1));
|
|
120
|
-
--text-lg--line-height: var(--line-height-base, 1.5);
|
|
121
|
-
--text-xl: calc(var(--font-size-base, 14px) * 1.428571429 * var(--font-scale, 1));
|
|
122
|
-
--text-xl--line-height: var(--line-height-base, 1.5);
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
[data-najm-design-vars] :where(
|
|
126
|
-
h1,
|
|
127
|
-
h2,
|
|
128
|
-
h3,
|
|
129
|
-
h4,
|
|
130
|
-
h5,
|
|
131
|
-
h6,
|
|
132
|
-
[data-slot="card-title"],
|
|
133
|
-
[data-slot="dialog-title"],
|
|
134
|
-
[data-slot="sheet-title"]
|
|
135
|
-
) {
|
|
136
|
-
font-family: var(--font-heading, var(--font-sans, ui-sans-serif, system-ui, sans-serif
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
[data-najm-design-vars] :where(code, kbd, pre, samp) {
|
|
140
|
-
font-family: var(--font-mono, ui-monospace, monospace
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
/* Default token values (oklch). Override globally via :root / .dark, or per
|
|
144
|
-
subtree via <NajmThemeProvider>. */
|
|
145
|
-
:root {
|
|
146
|
-
--background: oklch(1 0 0);
|
|
147
|
-
--foreground: oklch(0.1445 0 0);
|
|
148
|
-
--card: oklch(1 0 0);
|
|
149
|
-
--card-foreground: oklch(0.1445 0 0);
|
|
150
|
-
--popover: oklch(1 0 0);
|
|
151
|
-
--popover-foreground: oklch(0.1445 0 0);
|
|
152
|
-
--primary: oklch(0.2228 0.0043 286.044);
|
|
153
|
-
--primary-foreground: oklch(0.9848 0 0);
|
|
154
|
-
--secondary: oklch(0.9703 0 0);
|
|
155
|
-
--secondary-foreground: oklch(0.2044 0 0);
|
|
156
|
-
--tertiary: oklch(0.9676 0.007 247.897);
|
|
157
|
-
--tertiary-foreground: oklch(0.3138 0.0453 249.447);
|
|
158
|
-
--muted: oklch(0.9703 0 0);
|
|
159
|
-
--muted-foreground: oklch(0.5555 0 0);
|
|
160
|
-
--accent: oklch(0.2747 0.006 286.001);
|
|
161
|
-
--accent-foreground: oklch(0.9848 0 0);
|
|
162
|
-
--neutral: oklch(0.556 0 0);
|
|
163
|
-
--neutral-foreground: oklch(0.9848 0 0);
|
|
164
|
-
--info: oklch(0.6231 0.1679 254.149);
|
|
165
|
-
--info-foreground: oklch(0.9848 0 0);
|
|
166
|
-
--success: oklch(0.696 0.17 162.48);
|
|
167
|
-
--success-foreground: oklch(0.1445 0 0);
|
|
168
|
-
--warning: oklch(0.769 0.188 70.08);
|
|
169
|
-
--warning-foreground: oklch(0.1445 0 0);
|
|
170
|
-
--destructive: oklch(0.6368 0.2078 25.326);
|
|
171
|
-
--destructive-foreground: oklch(0.9848 0 0);
|
|
172
|
-
--border: oklch(0.9219 0 0);
|
|
173
|
-
--input: oklch(0.9219 0 0);
|
|
174
|
-
--ring: oklch(0.2228 0.0043 286.044);
|
|
175
|
-
|
|
176
|
-
--sidebar: oklch(0.985 0 0);
|
|
177
|
-
--sidebar-foreground: oklch(0.1445 0 0);
|
|
178
|
-
--sidebar-primary: oklch(0.2228 0.0043 286.044);
|
|
179
|
-
--sidebar-primary-foreground: oklch(0.9848 0 0);
|
|
180
|
-
--sidebar-accent: oklch(0.9703 0 0);
|
|
181
|
-
--sidebar-accent-foreground: oklch(0.2044 0 0);
|
|
182
|
-
--sidebar-border: oklch(0.9219 0 0);
|
|
183
|
-
--sidebar-ring: oklch(0.2228 0.0043 286.044);
|
|
184
|
-
|
|
185
|
-
--chart-1: oklch(0.646 0.222 41.116);
|
|
186
|
-
--chart-2: oklch(0.6 0.118 184.704);
|
|
187
|
-
--chart-3: oklch(0.398 0.07 227.392);
|
|
188
|
-
--chart-4: oklch(0.828 0.189 84.429);
|
|
189
|
-
--chart-5: oklch(0.769 0.188 70.08);
|
|
190
|
-
|
|
191
|
-
--radius: 0.5rem;
|
|
192
|
-
--border-width: 1px;
|
|
193
|
-
}
|
|
194
|
-
|
|
195
|
-
.dark {
|
|
196
|
-
--background: oklch(0.1417 0.0044 285.819);
|
|
197
|
-
--foreground: oklch(0.9683 0.0014 286.375);
|
|
198
|
-
--card: oklch(0.1872 0.0066 285.748);
|
|
199
|
-
--card-foreground: oklch(0.9683 0.0014 286.375);
|
|
200
|
-
--popover: oklch(0.1872 0.0066 285.748);
|
|
201
|
-
--popover-foreground: oklch(0.9683 0.0014 286.375);
|
|
202
|
-
--primary: oklch(0.2228 0.0043 286.044);
|
|
203
|
-
--primary-foreground: oklch(0.9848 0 0);
|
|
204
|
-
--secondary: oklch(0.2313 0.007 285.839);
|
|
205
|
-
--secondary-foreground: oklch(0.9203 0.0034 286.332);
|
|
206
|
-
--tertiary: oklch(0.3138 0.0453 249.447);
|
|
207
|
-
--tertiary-foreground: oklch(0.8529 0.0324 248.208);
|
|
208
|
-
--muted: oklch(0.2313 0.007 285.839);
|
|
209
|
-
--muted-foreground: oklch(0.6255 0.0171 285.896);
|
|
210
|
-
--accent: oklch(0.2313 0.007 285.839);
|
|
211
|
-
--accent-foreground: oklch(0.9683 0.0014 286.375);
|
|
212
|
-
--neutral: oklch(0.7155 0 0);
|
|
213
|
-
--neutral-foreground: oklch(0.1445 0 0);
|
|
214
|
-
--info: oklch(0.6231 0.1679 254.149);
|
|
215
|
-
--info-foreground: oklch(0.9683 0.0014 286.375);
|
|
216
|
-
--success: oklch(0.696 0.17 162.48);
|
|
217
|
-
--success-foreground: oklch(0.1445 0 0);
|
|
218
|
-
--warning: oklch(0.769 0.188 70.08);
|
|
219
|
-
--warning-foreground: oklch(0.1445 0 0);
|
|
220
|
-
--destructive: oklch(0.6356 0.2082 25.378);
|
|
221
|
-
--destructive-foreground: oklch(1 0 0);
|
|
222
|
-
--border: oklch(0.262 0.0085 285.799);
|
|
223
|
-
--input: oklch(0.262 0.0085 285.799);
|
|
224
|
-
--ring: oklch(0.2228 0.0043 286.044);
|
|
225
|
-
|
|
226
|
-
--sidebar: oklch(0.205 0 0);
|
|
227
|
-
--sidebar-foreground: oklch(0.9683 0.0014 286.375);
|
|
228
|
-
--sidebar-primary: oklch(0.4865 0.2423 291.866);
|
|
229
|
-
--sidebar-primary-foreground: oklch(0.9848 0 0);
|
|
230
|
-
--sidebar-accent: oklch(0.2313 0.007 285.839);
|
|
231
|
-
--sidebar-accent-foreground: oklch(0.9683 0.0014 286.375);
|
|
232
|
-
--sidebar-border: oklch(0.262 0.0085 285.799);
|
|
233
|
-
--sidebar-ring: oklch(0.4865 0.2423 291.866);
|
|
234
|
-
|
|
235
|
-
--chart-1: oklch(0.488 0.243 264.376);
|
|
236
|
-
--chart-2: oklch(0.696 0.17 162.48);
|
|
237
|
-
--chart-3: oklch(0.769 0.188 70.08);
|
|
238
|
-
--chart-4: oklch(0.627 0.265 303.9);
|
|
239
|
-
--chart-5: oklch(0.645 0.246 16.439);
|
|
240
|
-
|
|
241
|
-
--radius: 0.5rem;
|
|
242
|
-
}
|
|
243
|
-
|
|
244
|
-
/* Browsers paint saved credentials with their own light autofill surface.
|
|
245
|
-
Keep it aligned with Najm's card-backed inputs; BaseInput owns the visible
|
|
246
|
-
radius, so flatten the nested native input to avoid a second inner outline. */
|
|
247
|
-
input:-webkit-autofill,
|
|
248
|
-
input:-webkit-autofill:hover,
|
|
249
|
-
input:-webkit-autofill:focus,
|
|
250
|
-
input:autofill {
|
|
251
|
-
-webkit-text-fill-color: var(--foreground);
|
|
252
|
-
caret-color: var(--foreground);
|
|
253
|
-
border-radius: 0;
|
|
254
|
-
-webkit-box-shadow: 0 0 0 1000px var(--card) inset;
|
|
255
|
-
box-shadow: 0 0 0 1000px var(--card) inset;
|
|
256
|
-
}
|
|
257
|
-
|
|
258
|
-
.najm-border {
|
|
259
|
-
border-style: solid;
|
|
260
|
-
border-width: var(--border-width);
|
|
261
|
-
}
|
|
262
|
-
|
|
263
|
-
.najm-border-t {
|
|
264
|
-
border-top-style: solid;
|
|
265
|
-
border-top-width: var(--border-width);
|
|
266
|
-
}
|
|
267
|
-
|
|
268
|
-
.najm-border-r {
|
|
269
|
-
border-right-style: solid;
|
|
270
|
-
border-right-width: var(--border-width);
|
|
271
|
-
}
|
|
272
|
-
|
|
273
|
-
.najm-border-b {
|
|
274
|
-
border-bottom-style: solid;
|
|
275
|
-
border-bottom-width: var(--border-width);
|
|
276
|
-
}
|
|
277
|
-
|
|
278
|
-
.najm-border-l {
|
|
279
|
-
border-left-style: solid;
|
|
280
|
-
border-left-width: var(--border-width);
|
|
281
|
-
}
|
|
282
|
-
|
|
283
|
-
[data-radix-popper-content-wrapper] {
|
|
284
|
-
z-index: 10000 !important;
|
|
285
|
-
}
|
|
286
|
-
|
|
287
|
-
/* Scrollable, but the scrollbar reserves no layout space (hidden in all
|
|
288
|
-
browsers). `overflow: overlay` was removed from Chrome (~v121) and now
|
|
289
|
-
behaves like `auto`, so hiding the bar is the only pure-CSS way to avoid
|
|
290
|
-
the reserved gutter. Scroll via wheel / trackpad / keyboard. */
|
|
291
|
-
.najm-overlay-scroll {
|
|
292
|
-
overflow: auto;
|
|
293
|
-
scrollbar-width: none; /* Firefox */
|
|
294
|
-
}
|
|
295
|
-
.najm-overlay-scroll::-webkit-scrollbar {
|
|
296
|
-
display: none; /* Chromium / Safari */
|
|
297
|
-
}
|
|
298
|
-
.najm-overlay-scroll-y {
|
|
299
|
-
overflow-y: auto;
|
|
300
|
-
scrollbar-width: none;
|
|
301
|
-
}
|
|
302
|
-
.najm-overlay-scroll-y::-webkit-scrollbar {
|
|
303
|
-
display: none;
|
|
304
|
-
}
|
|
305
|
-
.najm-overlay-scroll-x {
|
|
306
|
-
overflow-x: auto;
|
|
307
|
-
scrollbar-width: none;
|
|
308
|
-
}
|
|
309
|
-
.najm-overlay-scroll-x::-webkit-scrollbar {
|
|
310
|
-
display: none;
|
|
311
|
-
}
|
|
312
|
-
|
|
313
|
-
/* OverlayScrollbars theme used by the <NajmScroll> component — a thin,
|
|
314
|
-
translucent slate bar that floats over content with no reserved space.
|
|
315
|
-
Keep this selector more specific than OverlayScrollbars' appended
|
|
316
|
-
`.os-scrollbar` variable reset in dist/theme.css. */
|
|
317
|
-
.os-scrollbar.os-theme-najm {
|
|
318
|
-
z-index: 20;
|
|
319
|
-
--os-size: 10px;
|
|
320
|
-
--os-padding-perpendicular: 2px;
|
|
321
|
-
--os-padding-axis: 2px;
|
|
322
|
-
--os-track-bg: transparent;
|
|
323
|
-
--os-track-border-radius: 9999px;
|
|
324
|
-
--os-handle-border-radius: 9999px;
|
|
325
|
-
--os-handle-bg: rgba(100, 116, 139, 0.22);
|
|
326
|
-
--os-handle-bg-hover: rgba(100, 116, 139, 0.5);
|
|
327
|
-
--os-handle-bg-active: rgba(71, 85, 105, 0.62);
|
|
328
|
-
--os-handle-min-size: 33px;
|
|
329
|
-
--os-handle-perpendicular-size: 4px;
|
|
330
|
-
--os-handle-perpendicular-size-hover: 6px;
|
|
331
|
-
--os-handle-perpendicular-size-active: 6px;
|
|
332
|
-
}
|
|
333
|
-
|
|
334
|
-
.os-scrollbar.os-theme-najm:hover .os-scrollbar-handle {
|
|
335
|
-
background: var(--os-handle-bg-hover);
|
|
336
|
-
}
|
|
337
|
-
|
|
338
|
-
/* Darker, more subtle handle in dark mode */
|
|
339
|
-
.dark .os-scrollbar.os-theme-najm {
|
|
340
|
-
--os-handle-bg: rgba(113, 113, 122, 0.36);
|
|
341
|
-
--os-handle-bg-hover: rgba(161, 161, 170, 0.62);
|
|
342
|
-
--os-handle-bg-active: rgba(212, 212, 216, 0.72);
|
|
343
|
-
}
|
|
1
|
+
/*
|
|
2
|
+
* najm-kit v4 theme entry. Consumers use:
|
|
3
|
+
*
|
|
4
|
+
* @import "tailwindcss";
|
|
5
|
+
* @import "najm-kit/theme.css";
|
|
6
|
+
*
|
|
7
|
+
* This file is the source of truth; the build copies it to dist/theme.css and
|
|
8
|
+
* appends the third-party (overlayscrollbars, phone) CSS so consumers get a
|
|
9
|
+
* single self-contained import. The `@source` below resolves relative to this
|
|
10
|
+
* file's location, so the consumer's Tailwind v4 build scans najm-kit's
|
|
11
|
+
* compiled components in dist (or the source dir when aliased in dev) for the
|
|
12
|
+
* utility classes they use.
|
|
13
|
+
*
|
|
14
|
+
* Token names follow the standard shadcn convention (no package prefix) so
|
|
15
|
+
* apps can theme najm-kit by pasting a shadcn / tweakcn theme block on top.
|
|
16
|
+
*/
|
|
17
|
+
@import "tw-animate-css";
|
|
18
|
+
|
|
19
|
+
@source "./";
|
|
20
|
+
|
|
21
|
+
@custom-variant dark (&:where(.dark, .dark *));
|
|
22
|
+
|
|
23
|
+
/* Classes built dynamically at runtime (borders.ts, BaseInput.tsx, responsive
|
|
24
|
+
helpers) never appear as literals the scanner can find, so safelist them. */
|
|
25
|
+
@source inline("{sm,md,lg}:{hidden,flex}");
|
|
26
|
+
@source inline("border-{black,white}");
|
|
27
|
+
@source inline("border-{gray,slate,zinc,neutral,stone,red,orange,amber,yellow,green,teal,blue,indigo,purple}{,-600}");
|
|
28
|
+
@source inline("najm-border najm-border-t najm-border-r najm-border-b najm-border-l");
|
|
29
|
+
|
|
30
|
+
/* NGrid / NGridItem build column and span classes dynamically. */
|
|
31
|
+
@source inline("grid-cols-{1,2,3,4,5,6,7,8,9,10,11,12}");
|
|
32
|
+
@source inline("{sm,md,lg,xl}:grid-cols-{1,2,3,4,5,6,7,8,9,10,11,12}");
|
|
33
|
+
@source inline("col-span-{1,2,3,4,5,6,7,8,9,10,11,12}");
|
|
34
|
+
@source inline("{sm,md,lg,xl}:col-span-{1,2,3,4,5,6,7,8,9,10,11,12}");
|
|
35
|
+
|
|
36
|
+
/* Map Tailwind's color theme to the runtime --* tokens. `inline` lets color
|
|
37
|
+
utilities resolve the semantic token at the themed element. Radius tokens
|
|
38
|
+
intentionally live in the non-inline block below so rounded-* utilities
|
|
39
|
+
keep referencing --radius-* and can be changed at runtime by
|
|
40
|
+
NajmThemeProvider's radius setting. */
|
|
41
|
+
@theme inline {
|
|
42
|
+
--color-background: var(--background);
|
|
43
|
+
--color-foreground: var(--foreground);
|
|
44
|
+
--color-card: var(--card);
|
|
45
|
+
--color-card-foreground: var(--card-foreground);
|
|
46
|
+
--color-popover: var(--popover);
|
|
47
|
+
--color-popover-foreground: var(--popover-foreground);
|
|
48
|
+
--color-primary: var(--primary);
|
|
49
|
+
--color-primary-foreground: var(--primary-foreground);
|
|
50
|
+
--color-secondary: var(--secondary);
|
|
51
|
+
--color-secondary-foreground: var(--secondary-foreground);
|
|
52
|
+
--color-tertiary: var(--tertiary);
|
|
53
|
+
--color-tertiary-foreground: var(--tertiary-foreground);
|
|
54
|
+
--color-muted: var(--muted);
|
|
55
|
+
--color-muted-foreground: var(--muted-foreground);
|
|
56
|
+
--color-accent: var(--accent);
|
|
57
|
+
--color-accent-foreground: var(--accent-foreground);
|
|
58
|
+
--color-neutral: var(--neutral);
|
|
59
|
+
--color-neutral-foreground: var(--neutral-foreground);
|
|
60
|
+
--color-info: var(--info);
|
|
61
|
+
--color-info-foreground: var(--info-foreground);
|
|
62
|
+
--color-success: var(--success);
|
|
63
|
+
--color-success-foreground: var(--success-foreground);
|
|
64
|
+
--color-warning: var(--warning);
|
|
65
|
+
--color-warning-foreground: var(--warning-foreground);
|
|
66
|
+
--color-destructive: var(--destructive);
|
|
67
|
+
--color-destructive-foreground: var(--destructive-foreground);
|
|
68
|
+
--color-border: var(--border);
|
|
69
|
+
--color-input: var(--input);
|
|
70
|
+
--color-ring: var(--ring);
|
|
71
|
+
|
|
72
|
+
--color-sidebar: var(--sidebar);
|
|
73
|
+
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
74
|
+
--color-sidebar-primary: var(--sidebar-primary);
|
|
75
|
+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
76
|
+
--color-sidebar-accent: var(--sidebar-accent);
|
|
77
|
+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
78
|
+
--color-sidebar-border: var(--sidebar-border);
|
|
79
|
+
--color-sidebar-ring: var(--sidebar-ring);
|
|
80
|
+
|
|
81
|
+
--color-chart-1: var(--chart-1);
|
|
82
|
+
--color-chart-2: var(--chart-2);
|
|
83
|
+
--color-chart-3: var(--chart-3);
|
|
84
|
+
--color-chart-4: var(--chart-4);
|
|
85
|
+
--color-chart-5: var(--chart-5);
|
|
86
|
+
|
|
87
|
+
--animate-indeterminate-progress: indeterminate-progress 2s ease-in-out infinite;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
@theme {
|
|
91
|
+
--radius-xs: calc(var(--radius) - 4px);
|
|
92
|
+
--radius-sm: calc(var(--radius) - 4px);
|
|
93
|
+
--radius-md: calc(var(--radius) - 2px);
|
|
94
|
+
--radius-lg: var(--radius);
|
|
95
|
+
--radius-xl: calc(var(--radius) + 4px);
|
|
96
|
+
--radius-2xl: calc(var(--radius) + 8px);
|
|
97
|
+
--radius-3xl: calc(var(--radius) + 12px);
|
|
98
|
+
--radius-4xl: calc(var(--radius) + 16px);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
@keyframes indeterminate-progress {
|
|
102
|
+
0% { transform: translateX(-100%); width: 40%; }
|
|
103
|
+
50% { transform: translateX(100%); width: 60%; }
|
|
104
|
+
100% { transform: translateX(200%); width: 40%; }
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
/* Typography variables emitted by NajmDesignProvider. */
|
|
108
|
+
[data-najm-design-vars] {
|
|
109
|
+
font-family: var(--font-sans, ui-sans-serif), ui-sans-serif, system-ui, sans-serif;
|
|
110
|
+
font-size: var(--font-size-base, 14px);
|
|
111
|
+
line-height: var(--line-height-base, 1.5);
|
|
112
|
+
letter-spacing: var(--letter-spacing-base, 0);
|
|
113
|
+
--text-xs: calc(var(--font-size-base, 14px) * 0.857142857 * var(--font-scale, 1));
|
|
114
|
+
--text-xs--line-height: var(--line-height-base, 1.5);
|
|
115
|
+
--text-sm: calc(var(--font-size-base, 14px) * var(--font-scale, 1));
|
|
116
|
+
--text-sm--line-height: var(--line-height-base, 1.5);
|
|
117
|
+
--text-base: calc(var(--font-size-base, 14px) * 1.142857143 * var(--font-scale, 1));
|
|
118
|
+
--text-base--line-height: var(--line-height-base, 1.5);
|
|
119
|
+
--text-lg: calc(var(--font-size-base, 14px) * 1.285714286 * var(--font-scale, 1));
|
|
120
|
+
--text-lg--line-height: var(--line-height-base, 1.5);
|
|
121
|
+
--text-xl: calc(var(--font-size-base, 14px) * 1.428571429 * var(--font-scale, 1));
|
|
122
|
+
--text-xl--line-height: var(--line-height-base, 1.5);
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
[data-najm-design-vars] :where(
|
|
126
|
+
h1,
|
|
127
|
+
h2,
|
|
128
|
+
h3,
|
|
129
|
+
h4,
|
|
130
|
+
h5,
|
|
131
|
+
h6,
|
|
132
|
+
[data-slot="card-title"],
|
|
133
|
+
[data-slot="dialog-title"],
|
|
134
|
+
[data-slot="sheet-title"]
|
|
135
|
+
) {
|
|
136
|
+
font-family: var(--font-heading, var(--font-sans, ui-sans-serif)), var(--font-sans, ui-sans-serif), ui-sans-serif, system-ui, sans-serif;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
[data-najm-design-vars] :where(code, kbd, pre, samp) {
|
|
140
|
+
font-family: var(--font-mono, ui-monospace), ui-monospace, SFMono-Regular, Consolas, monospace;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
/* Default token values (oklch). Override globally via :root / .dark, or per
|
|
144
|
+
subtree via <NajmThemeProvider>. */
|
|
145
|
+
:root {
|
|
146
|
+
--background: oklch(1 0 0);
|
|
147
|
+
--foreground: oklch(0.1445 0 0);
|
|
148
|
+
--card: oklch(1 0 0);
|
|
149
|
+
--card-foreground: oklch(0.1445 0 0);
|
|
150
|
+
--popover: oklch(1 0 0);
|
|
151
|
+
--popover-foreground: oklch(0.1445 0 0);
|
|
152
|
+
--primary: oklch(0.2228 0.0043 286.044);
|
|
153
|
+
--primary-foreground: oklch(0.9848 0 0);
|
|
154
|
+
--secondary: oklch(0.9703 0 0);
|
|
155
|
+
--secondary-foreground: oklch(0.2044 0 0);
|
|
156
|
+
--tertiary: oklch(0.9676 0.007 247.897);
|
|
157
|
+
--tertiary-foreground: oklch(0.3138 0.0453 249.447);
|
|
158
|
+
--muted: oklch(0.9703 0 0);
|
|
159
|
+
--muted-foreground: oklch(0.5555 0 0);
|
|
160
|
+
--accent: oklch(0.2747 0.006 286.001);
|
|
161
|
+
--accent-foreground: oklch(0.9848 0 0);
|
|
162
|
+
--neutral: oklch(0.556 0 0);
|
|
163
|
+
--neutral-foreground: oklch(0.9848 0 0);
|
|
164
|
+
--info: oklch(0.6231 0.1679 254.149);
|
|
165
|
+
--info-foreground: oklch(0.9848 0 0);
|
|
166
|
+
--success: oklch(0.696 0.17 162.48);
|
|
167
|
+
--success-foreground: oklch(0.1445 0 0);
|
|
168
|
+
--warning: oklch(0.769 0.188 70.08);
|
|
169
|
+
--warning-foreground: oklch(0.1445 0 0);
|
|
170
|
+
--destructive: oklch(0.6368 0.2078 25.326);
|
|
171
|
+
--destructive-foreground: oklch(0.9848 0 0);
|
|
172
|
+
--border: oklch(0.9219 0 0);
|
|
173
|
+
--input: oklch(0.9219 0 0);
|
|
174
|
+
--ring: oklch(0.2228 0.0043 286.044);
|
|
175
|
+
|
|
176
|
+
--sidebar: oklch(0.985 0 0);
|
|
177
|
+
--sidebar-foreground: oklch(0.1445 0 0);
|
|
178
|
+
--sidebar-primary: oklch(0.2228 0.0043 286.044);
|
|
179
|
+
--sidebar-primary-foreground: oklch(0.9848 0 0);
|
|
180
|
+
--sidebar-accent: oklch(0.9703 0 0);
|
|
181
|
+
--sidebar-accent-foreground: oklch(0.2044 0 0);
|
|
182
|
+
--sidebar-border: oklch(0.9219 0 0);
|
|
183
|
+
--sidebar-ring: oklch(0.2228 0.0043 286.044);
|
|
184
|
+
|
|
185
|
+
--chart-1: oklch(0.646 0.222 41.116);
|
|
186
|
+
--chart-2: oklch(0.6 0.118 184.704);
|
|
187
|
+
--chart-3: oklch(0.398 0.07 227.392);
|
|
188
|
+
--chart-4: oklch(0.828 0.189 84.429);
|
|
189
|
+
--chart-5: oklch(0.769 0.188 70.08);
|
|
190
|
+
|
|
191
|
+
--radius: 0.5rem;
|
|
192
|
+
--border-width: 1px;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
.dark {
|
|
196
|
+
--background: oklch(0.1417 0.0044 285.819);
|
|
197
|
+
--foreground: oklch(0.9683 0.0014 286.375);
|
|
198
|
+
--card: oklch(0.1872 0.0066 285.748);
|
|
199
|
+
--card-foreground: oklch(0.9683 0.0014 286.375);
|
|
200
|
+
--popover: oklch(0.1872 0.0066 285.748);
|
|
201
|
+
--popover-foreground: oklch(0.9683 0.0014 286.375);
|
|
202
|
+
--primary: oklch(0.2228 0.0043 286.044);
|
|
203
|
+
--primary-foreground: oklch(0.9848 0 0);
|
|
204
|
+
--secondary: oklch(0.2313 0.007 285.839);
|
|
205
|
+
--secondary-foreground: oklch(0.9203 0.0034 286.332);
|
|
206
|
+
--tertiary: oklch(0.3138 0.0453 249.447);
|
|
207
|
+
--tertiary-foreground: oklch(0.8529 0.0324 248.208);
|
|
208
|
+
--muted: oklch(0.2313 0.007 285.839);
|
|
209
|
+
--muted-foreground: oklch(0.6255 0.0171 285.896);
|
|
210
|
+
--accent: oklch(0.2313 0.007 285.839);
|
|
211
|
+
--accent-foreground: oklch(0.9683 0.0014 286.375);
|
|
212
|
+
--neutral: oklch(0.7155 0 0);
|
|
213
|
+
--neutral-foreground: oklch(0.1445 0 0);
|
|
214
|
+
--info: oklch(0.6231 0.1679 254.149);
|
|
215
|
+
--info-foreground: oklch(0.9683 0.0014 286.375);
|
|
216
|
+
--success: oklch(0.696 0.17 162.48);
|
|
217
|
+
--success-foreground: oklch(0.1445 0 0);
|
|
218
|
+
--warning: oklch(0.769 0.188 70.08);
|
|
219
|
+
--warning-foreground: oklch(0.1445 0 0);
|
|
220
|
+
--destructive: oklch(0.6356 0.2082 25.378);
|
|
221
|
+
--destructive-foreground: oklch(1 0 0);
|
|
222
|
+
--border: oklch(0.262 0.0085 285.799);
|
|
223
|
+
--input: oklch(0.262 0.0085 285.799);
|
|
224
|
+
--ring: oklch(0.2228 0.0043 286.044);
|
|
225
|
+
|
|
226
|
+
--sidebar: oklch(0.205 0 0);
|
|
227
|
+
--sidebar-foreground: oklch(0.9683 0.0014 286.375);
|
|
228
|
+
--sidebar-primary: oklch(0.4865 0.2423 291.866);
|
|
229
|
+
--sidebar-primary-foreground: oklch(0.9848 0 0);
|
|
230
|
+
--sidebar-accent: oklch(0.2313 0.007 285.839);
|
|
231
|
+
--sidebar-accent-foreground: oklch(0.9683 0.0014 286.375);
|
|
232
|
+
--sidebar-border: oklch(0.262 0.0085 285.799);
|
|
233
|
+
--sidebar-ring: oklch(0.4865 0.2423 291.866);
|
|
234
|
+
|
|
235
|
+
--chart-1: oklch(0.488 0.243 264.376);
|
|
236
|
+
--chart-2: oklch(0.696 0.17 162.48);
|
|
237
|
+
--chart-3: oklch(0.769 0.188 70.08);
|
|
238
|
+
--chart-4: oklch(0.627 0.265 303.9);
|
|
239
|
+
--chart-5: oklch(0.645 0.246 16.439);
|
|
240
|
+
|
|
241
|
+
--radius: 0.5rem;
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
/* Browsers paint saved credentials with their own light autofill surface.
|
|
245
|
+
Keep it aligned with Najm's card-backed inputs; BaseInput owns the visible
|
|
246
|
+
radius, so flatten the nested native input to avoid a second inner outline. */
|
|
247
|
+
input:-webkit-autofill,
|
|
248
|
+
input:-webkit-autofill:hover,
|
|
249
|
+
input:-webkit-autofill:focus,
|
|
250
|
+
input:autofill {
|
|
251
|
+
-webkit-text-fill-color: var(--foreground);
|
|
252
|
+
caret-color: var(--foreground);
|
|
253
|
+
border-radius: 0;
|
|
254
|
+
-webkit-box-shadow: 0 0 0 1000px var(--card) inset;
|
|
255
|
+
box-shadow: 0 0 0 1000px var(--card) inset;
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
.najm-border {
|
|
259
|
+
border-style: solid;
|
|
260
|
+
border-width: var(--border-width);
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
.najm-border-t {
|
|
264
|
+
border-top-style: solid;
|
|
265
|
+
border-top-width: var(--border-width);
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
.najm-border-r {
|
|
269
|
+
border-right-style: solid;
|
|
270
|
+
border-right-width: var(--border-width);
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
.najm-border-b {
|
|
274
|
+
border-bottom-style: solid;
|
|
275
|
+
border-bottom-width: var(--border-width);
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
.najm-border-l {
|
|
279
|
+
border-left-style: solid;
|
|
280
|
+
border-left-width: var(--border-width);
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
[data-radix-popper-content-wrapper] {
|
|
284
|
+
z-index: 10000 !important;
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
/* Scrollable, but the scrollbar reserves no layout space (hidden in all
|
|
288
|
+
browsers). `overflow: overlay` was removed from Chrome (~v121) and now
|
|
289
|
+
behaves like `auto`, so hiding the bar is the only pure-CSS way to avoid
|
|
290
|
+
the reserved gutter. Scroll via wheel / trackpad / keyboard. */
|
|
291
|
+
.najm-overlay-scroll {
|
|
292
|
+
overflow: auto;
|
|
293
|
+
scrollbar-width: none; /* Firefox */
|
|
294
|
+
}
|
|
295
|
+
.najm-overlay-scroll::-webkit-scrollbar {
|
|
296
|
+
display: none; /* Chromium / Safari */
|
|
297
|
+
}
|
|
298
|
+
.najm-overlay-scroll-y {
|
|
299
|
+
overflow-y: auto;
|
|
300
|
+
scrollbar-width: none;
|
|
301
|
+
}
|
|
302
|
+
.najm-overlay-scroll-y::-webkit-scrollbar {
|
|
303
|
+
display: none;
|
|
304
|
+
}
|
|
305
|
+
.najm-overlay-scroll-x {
|
|
306
|
+
overflow-x: auto;
|
|
307
|
+
scrollbar-width: none;
|
|
308
|
+
}
|
|
309
|
+
.najm-overlay-scroll-x::-webkit-scrollbar {
|
|
310
|
+
display: none;
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
/* OverlayScrollbars theme used by the <NajmScroll> component — a thin,
|
|
314
|
+
translucent slate bar that floats over content with no reserved space.
|
|
315
|
+
Keep this selector more specific than OverlayScrollbars' appended
|
|
316
|
+
`.os-scrollbar` variable reset in dist/theme.css. */
|
|
317
|
+
.os-scrollbar.os-theme-najm {
|
|
318
|
+
z-index: 20;
|
|
319
|
+
--os-size: 10px;
|
|
320
|
+
--os-padding-perpendicular: 2px;
|
|
321
|
+
--os-padding-axis: 2px;
|
|
322
|
+
--os-track-bg: transparent;
|
|
323
|
+
--os-track-border-radius: 9999px;
|
|
324
|
+
--os-handle-border-radius: 9999px;
|
|
325
|
+
--os-handle-bg: rgba(100, 116, 139, 0.22);
|
|
326
|
+
--os-handle-bg-hover: rgba(100, 116, 139, 0.5);
|
|
327
|
+
--os-handle-bg-active: rgba(71, 85, 105, 0.62);
|
|
328
|
+
--os-handle-min-size: 33px;
|
|
329
|
+
--os-handle-perpendicular-size: 4px;
|
|
330
|
+
--os-handle-perpendicular-size-hover: 6px;
|
|
331
|
+
--os-handle-perpendicular-size-active: 6px;
|
|
332
|
+
}
|
|
333
|
+
|
|
334
|
+
.os-scrollbar.os-theme-najm:hover .os-scrollbar-handle {
|
|
335
|
+
background: var(--os-handle-bg-hover);
|
|
336
|
+
}
|
|
337
|
+
|
|
338
|
+
/* Darker, more subtle handle in dark mode */
|
|
339
|
+
.dark .os-scrollbar.os-theme-najm {
|
|
340
|
+
--os-handle-bg: rgba(113, 113, 122, 0.36);
|
|
341
|
+
--os-handle-bg-hover: rgba(161, 161, 170, 0.62);
|
|
342
|
+
--os-handle-bg-active: rgba(212, 212, 216, 0.72);
|
|
343
|
+
}
|
|
344
344
|
|
|
345
345
|
|
|
346
346
|
/* overlayscrollbars */
|