@nebutra/theme 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/.turbo/turbo-build.log +177 -0
  2. package/.turbo/turbo-test.log +14 -0
  3. package/.turbo/turbo-typecheck.log +4 -0
  4. package/AGENTS.md +41 -0
  5. package/DESIGN.md +203 -0
  6. package/LICENSE +676 -0
  7. package/README.md +46 -0
  8. package/package.json +46 -0
  9. package/src/__tests__/theme-registry.test.ts +49 -0
  10. package/src/index.ts +20 -0
  11. package/src/registry.json +199 -0
  12. package/src/registry.ts +56 -0
  13. package/themes.css +386 -0
  14. package/tsconfig.json +10 -0
package/themes.css ADDED
@@ -0,0 +1,386 @@
1
+ /**
2
+ * @nebutra/theme — themes.generated.css
3
+ * AUTO-GENERATED from packages/design/design-tokens/tokens/themes/*.json — DO NOT EDIT.
4
+ *
5
+ * Multi-theme engine — CSS-only:
6
+ * :root neon (default theme)
7
+ * [data-theme="gradient"] Marketing/Growth
8
+ * [data-theme="dark-dense"] DevOps Dashboard
9
+ * [data-theme="minimal"] Blog/Portfolio
10
+ * [data-theme="vibrant"] Creative UI/UX
11
+ * [data-theme="ocean"] Community
12
+ *
13
+ * Integration:
14
+ * 1. Import this file in each app's globals.css AFTER @import "tailwindcss"
15
+ * 2. Configure next-themes with attribute="data-theme" defaultTheme="neon"
16
+ */
17
+
18
+ /* ─── neon theme ─── */
19
+ /**
20
+ * @nebutra/design-tokens — generated from W3C DTCG tokens.
21
+ * DO NOT EDIT — edit tokens/*.json and re-run `pnpm build`.
22
+ */
23
+
24
+ @theme {
25
+ --color-primary: oklch(0.452 0.313 264.1);
26
+ --color-primary-foreground: oklch(1 0 0);
27
+ --color-secondary: oklch(0.715 0.143 215.2);
28
+ --color-secondary-foreground: oklch(1 0 0);
29
+ --color-accent: oklch(0.714 0.203 264.1);
30
+ --color-accent-foreground: oklch(0.141 0.005 285.9);
31
+ --color-background: oklch(0.141 0.005 285.9);
32
+ --color-foreground: oklch(0.985 0 0);
33
+ --color-card: oklch(0.212 0.006 285.9);
34
+ --color-card-foreground: oklch(0.985 0 0);
35
+ --color-popover: oklch(0.212 0.006 285.9);
36
+ --color-popover-foreground: oklch(0.985 0 0);
37
+ --color-muted: oklch(0.274 0.006 286);
38
+ --color-muted-foreground: oklch(0.705 0.015 286);
39
+ --color-border: oklch(0.274 0.006 286);
40
+ --color-input: oklch(0.274 0.006 286);
41
+ --color-ring: oklch(0.452 0.313 264.1);
42
+ --color-destructive: oklch(0.577 0.245 27.3);
43
+ --color-destructive-foreground: oklch(1 0 0);
44
+ --color-success: oklch(0.723 0.219 149.6);
45
+ --color-success-foreground: oklch(1 0 0);
46
+ --color-warning: oklch(0.769 0.189 70.1);
47
+ --color-warning-foreground: oklch(0.141 0.005 285.9);
48
+ --color-info: oklch(0.623 0.214 259.1);
49
+ --color-info-foreground: oklch(1 0 0);
50
+ --color-primary-hover: color-mix(in oklch, oklch(0.452 0.313 264.1), white 15%);
51
+ --color-primary-active: color-mix(in oklch, oklch(0.452 0.313 264.1), black 10%);
52
+ --radius-sm: 0.25rem;
53
+ --radius-md: 0.375rem;
54
+ --radius-lg: 0.5rem;
55
+ --radius-xl: 0.75rem;
56
+ --radius-full: 9999px;
57
+ --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
58
+ --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
59
+ --font-heading: "Inter", ui-sans-serif, system-ui, sans-serif;
60
+ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.5);
61
+ --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5);
62
+ --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5);
63
+ --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.5);
64
+ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
65
+ --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
66
+ --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
67
+ }
68
+ /* ─── gradient theme ─── */
69
+ /**
70
+ * @nebutra/design-tokens — generated from W3C DTCG tokens.
71
+ * DO NOT EDIT — edit tokens/*.json and re-run `pnpm build`.
72
+ */
73
+
74
+ [data-theme="gradient"] {
75
+ --color-primary: oklch(0.546 0.245 262.9);
76
+ --color-primary-foreground: oklch(1 0 0);
77
+ --color-secondary: oklch(0.707 0.165 254.6);
78
+ --color-secondary-foreground: oklch(1 0 0);
79
+ --color-accent: oklch(0.623 0.214 259.1);
80
+ --color-accent-foreground: oklch(1 0 0);
81
+ --color-background: oklch(1 0 0);
82
+ --color-foreground: oklch(0.141 0.005 285.9);
83
+ --color-card: oklch(0.985 0 0);
84
+ --color-card-foreground: oklch(0.141 0.005 285.9);
85
+ --color-popover: oklch(1 0 0);
86
+ --color-popover-foreground: oklch(0.141 0.005 285.9);
87
+ --color-muted: oklch(0.967 0.001 286);
88
+ --color-muted-foreground: oklch(0.552 0.016 286);
89
+ --color-border: oklch(0.922 0.004 286);
90
+ --color-input: oklch(0.922 0.004 286);
91
+ --color-ring: oklch(0.546 0.245 262.9);
92
+ --color-primary-hover: color-mix(in oklch, oklch(0.546 0.245 262.9), black 10%);
93
+ --color-primary-active: color-mix(in oklch, oklch(0.546 0.245 262.9), black 20%);
94
+ --radius-sm: 0.375rem;
95
+ --radius-md: 0.5rem;
96
+ --radius-lg: 0.75rem;
97
+ --radius-xl: 1rem;
98
+ --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
99
+ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
100
+ --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
101
+ --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
102
+ --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
103
+ }
104
+ /* ─── dark-dense theme ─── */
105
+ /**
106
+ * @nebutra/design-tokens — generated from W3C DTCG tokens.
107
+ * DO NOT EDIT — edit tokens/*.json and re-run `pnpm build`.
108
+ */
109
+
110
+ [data-theme="dark-dense"] {
111
+ --color-primary: oklch(0.696 0.17 162.5);
112
+ --color-primary-foreground: oklch(1 0 0);
113
+ --color-secondary: oklch(0.527 0.154 163.2);
114
+ --color-secondary-foreground: oklch(1 0 0);
115
+ --color-accent: oklch(0.765 0.163 163.4);
116
+ --color-accent-foreground: oklch(0.141 0.005 285.9);
117
+ --color-background: oklch(0.112 0 0);
118
+ --color-foreground: oklch(0.985 0 0);
119
+ --color-card: oklch(0.162 0.004 285.9);
120
+ --color-card-foreground: oklch(0.985 0 0);
121
+ --color-popover: oklch(0.162 0.004 285.9);
122
+ --color-popover-foreground: oklch(0.985 0 0);
123
+ --color-muted: oklch(0.215 0.006 285.9);
124
+ --color-muted-foreground: oklch(0.705 0.015 286);
125
+ --color-border: oklch(0.215 0.006 285.9);
126
+ --color-input: oklch(0.215 0.006 285.9);
127
+ --color-ring: oklch(0.696 0.17 162.5);
128
+ --color-primary-hover: color-mix(in oklch, oklch(0.696 0.17 162.5), white 15%);
129
+ --color-primary-active: color-mix(in oklch, oklch(0.696 0.17 162.5), black 10%);
130
+ --radius-sm: 0.125rem;
131
+ --radius-md: 0.25rem;
132
+ --radius-lg: 0.25rem;
133
+ --radius-xl: 0.375rem;
134
+ --font-sans: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
135
+ --font-heading: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
136
+ }
137
+ /* ─── minimal theme ─── */
138
+ /**
139
+ * @nebutra/design-tokens — generated from W3C DTCG tokens.
140
+ * DO NOT EDIT — edit tokens/*.json and re-run `pnpm build`.
141
+ */
142
+
143
+ [data-theme="minimal"] {
144
+ --color-primary: oklch(0.21 0.006 285.9);
145
+ --color-primary-foreground: oklch(1 0 0);
146
+ --color-secondary: oklch(0.442 0.017 285.9);
147
+ --color-secondary-foreground: oklch(1 0 0);
148
+ --color-accent: oklch(0.552 0.016 286);
149
+ --color-accent-foreground: oklch(1 0 0);
150
+ --color-background: oklch(0.985 0 0);
151
+ --color-foreground: oklch(0.141 0.005 285.9);
152
+ --color-card: oklch(1 0 0);
153
+ --color-card-foreground: oklch(0.141 0.005 285.9);
154
+ --color-popover: oklch(1 0 0);
155
+ --color-popover-foreground: oklch(0.141 0.005 285.9);
156
+ --color-muted: oklch(0.967 0.001 286);
157
+ --color-muted-foreground: oklch(0.552 0.016 286);
158
+ --color-border: oklch(0.922 0.004 286);
159
+ --color-input: oklch(0.922 0.004 286);
160
+ --color-ring: oklch(0.21 0.006 285.9);
161
+ --color-primary-hover: color-mix(in oklch, oklch(0.21 0.006 285.9), white 20%);
162
+ --color-primary-active: color-mix(in oklch, oklch(0.21 0.006 285.9), white 10%);
163
+ --radius-sm: 0.25rem;
164
+ --radius-md: 0.375rem;
165
+ --radius-lg: 0.5rem;
166
+ --radius-xl: 0.75rem;
167
+ --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
168
+ --font-heading: "Playfair Display", ui-serif, Georgia, serif;
169
+ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.03);
170
+ --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.07);
171
+ --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.07);
172
+ --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.07);
173
+ }
174
+ /* ─── vibrant theme ─── */
175
+ /**
176
+ * @nebutra/design-tokens — generated from W3C DTCG tokens.
177
+ * DO NOT EDIT — edit tokens/*.json and re-run `pnpm build`.
178
+ */
179
+
180
+ [data-theme="vibrant"] {
181
+ --color-primary: oklch(0.705 0.213 47.6);
182
+ --color-primary-foreground: oklch(1 0 0);
183
+ --color-secondary: oklch(0.769 0.189 70.1);
184
+ --color-secondary-foreground: oklch(0.141 0.005 285.9);
185
+ --color-accent: oklch(0.645 0.246 16.4);
186
+ --color-accent-foreground: oklch(1 0 0);
187
+ --color-background: oklch(0.991 0.015 95.3);
188
+ --color-foreground: oklch(0.141 0.005 285.9);
189
+ --color-card: oklch(1 0 0);
190
+ --color-card-foreground: oklch(0.141 0.005 285.9);
191
+ --color-popover: oklch(1 0 0);
192
+ --color-popover-foreground: oklch(0.141 0.005 285.9);
193
+ --color-muted: oklch(0.967 0.012 90);
194
+ --color-muted-foreground: oklch(0.552 0.016 286);
195
+ --color-border: oklch(0.922 0.008 80);
196
+ --color-input: oklch(0.922 0.008 80);
197
+ --color-ring: oklch(0.705 0.213 47.6);
198
+ --color-primary-hover: color-mix(in oklch, oklch(0.705 0.213 47.6), black 10%);
199
+ --color-primary-active: color-mix(in oklch, oklch(0.705 0.213 47.6), black 20%);
200
+ --radius-sm: 0.75rem;
201
+ --radius-md: 1rem;
202
+ --radius-lg: 1.5rem;
203
+ --radius-xl: 9999px;
204
+ --font-sans: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
205
+ --font-heading: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
206
+ --shadow-sm: 0 1px 3px 0 rgb(249 115 22 / 0.1);
207
+ --shadow-md: 0 4px 6px -1px rgb(249 115 22 / 0.15);
208
+ --shadow-lg: 0 10px 15px -3px rgb(249 115 22 / 0.15);
209
+ --shadow-xl: 0 20px 25px -5px rgb(249 115 22 / 0.15);
210
+ }
211
+ /* ─── ocean theme ─── */
212
+ /**
213
+ * @nebutra/design-tokens — generated from W3C DTCG tokens.
214
+ * DO NOT EDIT — edit tokens/*.json and re-run `pnpm build`.
215
+ */
216
+
217
+ [data-theme="ocean"] {
218
+ --color-primary: oklch(0.609 0.126 199.8);
219
+ --color-primary-foreground: oklch(1 0 0);
220
+ --color-secondary: oklch(0.715 0.143 215.2);
221
+ --color-secondary-foreground: oklch(1 0 0);
222
+ --color-accent: oklch(0.777 0.152 181.9);
223
+ --color-accent-foreground: oklch(0.141 0.005 285.9);
224
+ --color-background: oklch(0.982 0.018 180.7);
225
+ --color-foreground: oklch(0.141 0.005 285.9);
226
+ --color-card: oklch(1 0 0);
227
+ --color-card-foreground: oklch(0.141 0.005 285.9);
228
+ --color-popover: oklch(1 0 0);
229
+ --color-popover-foreground: oklch(0.141 0.005 285.9);
230
+ --color-muted: oklch(0.953 0.024 184);
231
+ --color-muted-foreground: oklch(0.442 0.017 285.9);
232
+ --color-border: oklch(0.905 0.032 185);
233
+ --color-input: oklch(0.905 0.032 185);
234
+ --color-ring: oklch(0.609 0.126 199.8);
235
+ --color-primary-hover: color-mix(in oklch, oklch(0.609 0.126 199.8), black 10%);
236
+ --color-primary-active: color-mix(in oklch, oklch(0.609 0.126 199.8), black 20%);
237
+ --radius-sm: 0.375rem;
238
+ --radius-md: 0.5rem;
239
+ --radius-lg: 0.75rem;
240
+ --radius-xl: 1rem;
241
+ --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
242
+ --shadow-sm: 0 1px 2px 0 rgb(8 145 178 / 0.08);
243
+ --shadow-md: 0 4px 6px -1px rgb(8 145 178 / 0.12);
244
+ --shadow-lg: 0 10px 15px -3px rgb(8 145 178 / 0.12);
245
+ --shadow-xl: 0 20px 25px -5px rgb(8 145 178 / 0.12);
246
+ }
247
+ /* ─── Shared Keyframe Animations ─── */
248
+ /*
249
+ * These keyframes are shared across all apps that import this file.
250
+ * App-specific keyframes (marquee, shimmer-slide, accordion, etc.) stay in each app's globals.css.
251
+ */
252
+
253
+ @theme inline {
254
+ /* Loader / status animations */
255
+ @keyframes typing {
256
+ 0%,
257
+ 100% {
258
+ transform: translateY(0);
259
+ opacity: 0.5;
260
+ }
261
+ 50% {
262
+ transform: translateY(-2px);
263
+ opacity: 1;
264
+ }
265
+ }
266
+ @keyframes loading-dots {
267
+ 0%,
268
+ 100% {
269
+ opacity: 0;
270
+ }
271
+ 50% {
272
+ opacity: 1;
273
+ }
274
+ }
275
+ @keyframes wave {
276
+ 0%,
277
+ 100% {
278
+ transform: scaleY(1);
279
+ }
280
+ 50% {
281
+ transform: scaleY(0.6);
282
+ }
283
+ }
284
+ @keyframes blink {
285
+ 0%,
286
+ 100% {
287
+ opacity: 1;
288
+ }
289
+ 50% {
290
+ opacity: 0;
291
+ }
292
+ }
293
+ @keyframes text-blink {
294
+ 0%,
295
+ 100% {
296
+ color: var(--color-primary);
297
+ }
298
+ 50% {
299
+ color: var(--color-muted-foreground);
300
+ }
301
+ }
302
+ @keyframes bounce-dots {
303
+ 0%,
304
+ 100% {
305
+ transform: scale(0.8);
306
+ opacity: 0.5;
307
+ }
308
+ 50% {
309
+ transform: scale(1.2);
310
+ opacity: 1;
311
+ }
312
+ }
313
+ @keyframes thin-pulse {
314
+ 0%,
315
+ 100% {
316
+ transform: scale(0.95);
317
+ opacity: 0.8;
318
+ }
319
+ 50% {
320
+ transform: scale(1.05);
321
+ opacity: 0.4;
322
+ }
323
+ }
324
+ @keyframes pulse-dot {
325
+ 0%,
326
+ 100% {
327
+ transform: scale(1);
328
+ opacity: 0.8;
329
+ }
330
+ 50% {
331
+ transform: scale(1.5);
332
+ opacity: 1;
333
+ }
334
+ }
335
+ @keyframes wave-bars {
336
+ 0%,
337
+ 100% {
338
+ transform: scaleY(1);
339
+ opacity: 0.5;
340
+ }
341
+ 50% {
342
+ transform: scaleY(0.6);
343
+ opacity: 1;
344
+ }
345
+ }
346
+ @keyframes shimmer {
347
+ 0% {
348
+ background-position: 200% 50%;
349
+ }
350
+ 100% {
351
+ background-position: -200% 50%;
352
+ }
353
+ }
354
+ @keyframes spinner-fade {
355
+ 0% {
356
+ opacity: 0;
357
+ }
358
+ 100% {
359
+ opacity: 1;
360
+ }
361
+ }
362
+
363
+ /* SnippetStatus copy animations */
364
+ @keyframes snippet-fade-in {
365
+ from {
366
+ opacity: 0;
367
+ transform: scale(0.5);
368
+ }
369
+ to {
370
+ opacity: 1;
371
+ transform: scale(1);
372
+ }
373
+ }
374
+ @keyframes snippet-fade-out {
375
+ from {
376
+ opacity: 1;
377
+ transform: scale(1);
378
+ }
379
+ to {
380
+ opacity: 0;
381
+ transform: scale(0.5);
382
+ }
383
+ }
384
+ --animate-snippet-fade-in: snippet-fade-in 0.2s ease-out forwards;
385
+ --animate-snippet-fade-out: snippet-fade-out 0.2s ease-out forwards;
386
+ }
package/tsconfig.json ADDED
@@ -0,0 +1,10 @@
1
+ {
2
+ "extends": "../../../tsconfig.base.json",
3
+ "compilerOptions": {
4
+ "jsx": "react-jsx",
5
+ "outDir": "dist",
6
+ "rootDir": "src"
7
+ },
8
+ "include": ["src"],
9
+ "exclude": ["node_modules", "dist"]
10
+ }