omverse-ui 0.1.2 → 0.1.3
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/styles/index.css +372 -0
- package/package.json +3 -2
|
@@ -0,0 +1,372 @@
|
|
|
1
|
+
@import "tailwindcss";
|
|
2
|
+
|
|
3
|
+
/*
|
|
4
|
+
* ============================================================
|
|
5
|
+
* DESIGN TOKENS — src/styles/index.css
|
|
6
|
+
* ============================================================
|
|
7
|
+
*
|
|
8
|
+
* Three-tier token system:
|
|
9
|
+
*
|
|
10
|
+
* Tier 1 — Primitives → raw palette values (defined as CSS vars below)
|
|
11
|
+
* Tier 2 — Semantic → intent-based tokens (what components use)
|
|
12
|
+
* Tier 3 — Component → added per-component when needed
|
|
13
|
+
*
|
|
14
|
+
* All tokens inside @theme become Tailwind utility classes automatically.
|
|
15
|
+
* e.g. --color-primary → bg-primary, text-primary, border-primary
|
|
16
|
+
*
|
|
17
|
+
* Light theme = :root
|
|
18
|
+
* Dark theme = .dark class on <html>
|
|
19
|
+
* ============================================================
|
|
20
|
+
*/
|
|
21
|
+
|
|
22
|
+
/* ============================================================
|
|
23
|
+
TIER 1 — PRIMITIVE PALETTE
|
|
24
|
+
Never used directly in components. Referenced by Tier 2 only.
|
|
25
|
+
============================================================ */
|
|
26
|
+
|
|
27
|
+
:root {
|
|
28
|
+
/* Primary */
|
|
29
|
+
--primitive-primary-50: #EFF6FF;
|
|
30
|
+
--primitive-primary-100: #DBEAFE;
|
|
31
|
+
--primitive-primary-200: #BFDBFE;
|
|
32
|
+
--primitive-primary-300: #93C5FD;
|
|
33
|
+
--primitive-primary-400: #60A5FA;
|
|
34
|
+
--primitive-primary-500: #3B82F6;
|
|
35
|
+
--primitive-primary-600: #2563EB;
|
|
36
|
+
--primitive-primary-700: #1D4ED8;
|
|
37
|
+
--primitive-primary-800: #1E40AF;
|
|
38
|
+
--primitive-primary-900: #1E3A8A;
|
|
39
|
+
|
|
40
|
+
/* Secondary */
|
|
41
|
+
--primitive-secondary-50: #F5F3FF;
|
|
42
|
+
--primitive-secondary-100: #EDE9FE;
|
|
43
|
+
--primitive-secondary-200: #DDD6FE;
|
|
44
|
+
--primitive-secondary-300: #C4B5FD;
|
|
45
|
+
--primitive-secondary-400: #A78BFA;
|
|
46
|
+
--primitive-secondary-500: #8B5CF6;
|
|
47
|
+
--primitive-secondary-600: #7C3AED;
|
|
48
|
+
--primitive-secondary-700: #6D28D9;
|
|
49
|
+
--primitive-secondary-800: #5B21B6;
|
|
50
|
+
--primitive-secondary-900: #4C1D95;
|
|
51
|
+
|
|
52
|
+
/* Neutral */
|
|
53
|
+
--primitive-neutral-0: #FFFFFF;
|
|
54
|
+
--primitive-neutral-50: #F9FAFB;
|
|
55
|
+
--primitive-neutral-100: #F3F4F6;
|
|
56
|
+
--primitive-neutral-200: #E5E7EB;
|
|
57
|
+
--primitive-neutral-300: #D1D5DB;
|
|
58
|
+
--primitive-neutral-400: #9CA3AF;
|
|
59
|
+
--primitive-neutral-500: #6B7280;
|
|
60
|
+
--primitive-neutral-600: #4B5563;
|
|
61
|
+
--primitive-neutral-700: #374151;
|
|
62
|
+
--primitive-neutral-800: #1F2937;
|
|
63
|
+
--primitive-neutral-900: #111827;
|
|
64
|
+
--primitive-neutral-1000: #000000;
|
|
65
|
+
|
|
66
|
+
/* Success */
|
|
67
|
+
--primitive-success-50: #ECFDF5;
|
|
68
|
+
--primitive-success-100: #D1FAE5;
|
|
69
|
+
--primitive-success-200: #A7F3D0;
|
|
70
|
+
--primitive-success-300: #6EE7B7;
|
|
71
|
+
--primitive-success-400: #34D399;
|
|
72
|
+
--primitive-success-500: #10B981;
|
|
73
|
+
--primitive-success-600: #059669;
|
|
74
|
+
--primitive-success-700: #047857;
|
|
75
|
+
--primitive-success-800: #065F46;
|
|
76
|
+
--primitive-success-900: #064E3B;
|
|
77
|
+
|
|
78
|
+
/* Warning */
|
|
79
|
+
--primitive-warning-50: #FFFBEB;
|
|
80
|
+
--primitive-warning-100: #FEF3C7;
|
|
81
|
+
--primitive-warning-200: #FDE68A;
|
|
82
|
+
--primitive-warning-300: #FCD34D;
|
|
83
|
+
--primitive-warning-400: #FBBF24;
|
|
84
|
+
--primitive-warning-500: #F59E0B;
|
|
85
|
+
--primitive-warning-600: #D97706;
|
|
86
|
+
--primitive-warning-700: #B45309;
|
|
87
|
+
--primitive-warning-800: #92400E;
|
|
88
|
+
--primitive-warning-900: #78350F;
|
|
89
|
+
|
|
90
|
+
/* Error */
|
|
91
|
+
--primitive-error-50: #FEF2F2;
|
|
92
|
+
--primitive-error-100: #FEE2E2;
|
|
93
|
+
--primitive-error-200: #FECACA;
|
|
94
|
+
--primitive-error-300: #FCA5A5;
|
|
95
|
+
--primitive-error-400: #F87171;
|
|
96
|
+
--primitive-error-500: #EF4444;
|
|
97
|
+
--primitive-error-600: #DC2626;
|
|
98
|
+
--primitive-error-700: #B91C1C;
|
|
99
|
+
--primitive-error-800: #991B1B;
|
|
100
|
+
--primitive-error-900: #7F1D1D;
|
|
101
|
+
|
|
102
|
+
/* Info */
|
|
103
|
+
--primitive-info-50: #EFF6FF;
|
|
104
|
+
--primitive-info-100: #DBEAFE;
|
|
105
|
+
--primitive-info-500: #3B82F6;
|
|
106
|
+
--primitive-info-700: #1D4ED8;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
/* ============================================================
|
|
110
|
+
TIER 2 — SEMANTIC TOKENS + TAILWIND CLASSES
|
|
111
|
+
Mapped exactly from your Figma semantic token tables.
|
|
112
|
+
============================================================ */
|
|
113
|
+
|
|
114
|
+
@theme {
|
|
115
|
+
|
|
116
|
+
/* ---------- Primary (Brand) ---------- */
|
|
117
|
+
--color-primary: #2563EB; /* Primary/600 light */
|
|
118
|
+
--color-on-primary: #FFFFFF; /* Neutral/0 light */
|
|
119
|
+
--color-primary-container: #DBEAFE; /* Primary/100 light */
|
|
120
|
+
--color-on-primary-container: #1E3A8A; /* Primary/900 light */
|
|
121
|
+
|
|
122
|
+
/* ---------- Secondary ---------- */
|
|
123
|
+
--color-secondary: #7C3AED; /* Secondary/600 light */
|
|
124
|
+
--color-on-secondary: #FFFFFF; /* Neutral/0 light */
|
|
125
|
+
--color-secondary-container: #EDE9FE; /* Secondary/100 light */
|
|
126
|
+
--color-on-secondary-container: #4C1D95;/* Secondary/900 light */
|
|
127
|
+
/* M3 state layers: on-secondary-container blended into secondary-container at 8% / 12% */
|
|
128
|
+
--color-secondary-container-hover: #E0D9F6;
|
|
129
|
+
--color-secondary-container-active: #DAD1F1;
|
|
130
|
+
|
|
131
|
+
/* ---------- Surfaces ---------- */
|
|
132
|
+
--color-background: #FFFFFF; /* Neutral/0 light */
|
|
133
|
+
--color-surface: #F9FAFB; /* Neutral/50 light */
|
|
134
|
+
--color-surface-variant: #F3F4F6; /* Neutral/100 light */
|
|
135
|
+
--color-surface-container-low: #F3F4F6; /* Neutral/100 light */
|
|
136
|
+
--color-surface-container: #E5E7EB; /* Neutral/200 light */
|
|
137
|
+
--color-surface-container-high: #D1D5DB;/* Neutral/300 light */
|
|
138
|
+
|
|
139
|
+
/* ---------- Text ---------- */
|
|
140
|
+
--color-text-primary: #111827; /* Neutral/900 light */
|
|
141
|
+
--color-text-secondary: #4B5563; /* Neutral/600 light */
|
|
142
|
+
--color-text-disabled: #9CA3AF; /* Neutral/400 light */
|
|
143
|
+
--color-on-surface: #111827; /* alias → text-primary */
|
|
144
|
+
--color-on-surface-variant: #4B5563; /* alias → text-secondary */
|
|
145
|
+
|
|
146
|
+
/* ---------- Borders ---------- */
|
|
147
|
+
--color-border: #E5E7EB; /* Neutral/200 light */
|
|
148
|
+
--color-outline: #D1D5DB; /* Neutral/300 light */
|
|
149
|
+
--color-outline-variant: #E5E7EB; /* Neutral/200 light */
|
|
150
|
+
|
|
151
|
+
/* ---------- Feedback ---------- */
|
|
152
|
+
--color-success: #10B981; /* Success/500 light */
|
|
153
|
+
--color-on-success: #FFFFFF;
|
|
154
|
+
--color-success-container: #ECFDF5; /* Success/50 light */
|
|
155
|
+
--color-on-success-container: #064E3B; /* Success/900 light */
|
|
156
|
+
|
|
157
|
+
--color-warning: #F59E0B; /* Warning/500 light */
|
|
158
|
+
--color-on-warning: #FFFFFF;
|
|
159
|
+
--color-warning-container: #FFFBEB; /* Warning/50 light */
|
|
160
|
+
--color-on-warning-container: #78350F; /* Warning/900 light */
|
|
161
|
+
|
|
162
|
+
--color-error: #EF4444; /* Error/500 light */
|
|
163
|
+
--color-on-error: #FFFFFF;
|
|
164
|
+
--color-error-container: #FEF2F2; /* Error/50 light */
|
|
165
|
+
--color-on-error-container: #7F1D1D; /* Error/900 light */
|
|
166
|
+
|
|
167
|
+
--color-info: #3B82F6; /* Info/500 light */
|
|
168
|
+
--color-on-info: #FFFFFF;
|
|
169
|
+
--color-info-container: #EFF6FF; /* Info/50 light */
|
|
170
|
+
--color-on-info-container: #1E3A8A; /* Info/900 light */
|
|
171
|
+
|
|
172
|
+
/* ---------- Focus ring ---------- */
|
|
173
|
+
--color-ring: #2563EB; /* Primary/600 */
|
|
174
|
+
|
|
175
|
+
/* ---------- Radii ---------- */
|
|
176
|
+
--radius-none: 0px;
|
|
177
|
+
--radius-xs: 0.25rem; /* 4px */
|
|
178
|
+
--radius-sm: 0.5rem; /* 8px */
|
|
179
|
+
--radius-md: 0.75rem; /* 12px */
|
|
180
|
+
--radius-lg: 1rem; /* 16px */
|
|
181
|
+
--radius-xl: 1.5rem; /* 24px */
|
|
182
|
+
--radius-2xl: 2rem; /* 32px */
|
|
183
|
+
--radius-full: 9999px;
|
|
184
|
+
|
|
185
|
+
/* ---------- Typography ---------- */
|
|
186
|
+
--text-display-lg: 3.5625rem;
|
|
187
|
+
--text-display-lg--line-height: 4rem;
|
|
188
|
+
--text-display-lg--font-weight: 400;
|
|
189
|
+
|
|
190
|
+
--text-display-md: 2.8125rem;
|
|
191
|
+
--text-display-md--line-height: 3.25rem;
|
|
192
|
+
--text-display-md--font-weight: 400;
|
|
193
|
+
|
|
194
|
+
--text-display-sm: 2.25rem;
|
|
195
|
+
--text-display-sm--line-height: 2.75rem;
|
|
196
|
+
--text-display-sm--font-weight: 400;
|
|
197
|
+
|
|
198
|
+
--text-headline-lg: 2rem;
|
|
199
|
+
--text-headline-lg--line-height: 2.5rem;
|
|
200
|
+
--text-headline-lg--font-weight: 500;
|
|
201
|
+
|
|
202
|
+
--text-headline-md: 1.75rem;
|
|
203
|
+
--text-headline-md--line-height: 2.25rem;
|
|
204
|
+
--text-headline-md--font-weight: 500;
|
|
205
|
+
|
|
206
|
+
--text-headline-sm: 1.5rem;
|
|
207
|
+
--text-headline-sm--line-height: 2rem;
|
|
208
|
+
--text-headline-sm--font-weight: 500;
|
|
209
|
+
|
|
210
|
+
--text-title-lg: 1.375rem;
|
|
211
|
+
--text-title-lg--line-height: 1.75rem;
|
|
212
|
+
--text-title-lg--font-weight: 500;
|
|
213
|
+
|
|
214
|
+
--text-title-md: 1rem;
|
|
215
|
+
--text-title-md--line-height: 1.5rem;
|
|
216
|
+
--text-title-md--font-weight: 500;
|
|
217
|
+
|
|
218
|
+
--text-title-sm: 0.875rem;
|
|
219
|
+
--text-title-sm--line-height: 1.25rem;
|
|
220
|
+
--text-title-sm--font-weight: 500;
|
|
221
|
+
|
|
222
|
+
--text-body-lg: 1rem;
|
|
223
|
+
--text-body-lg--line-height: 1.5rem;
|
|
224
|
+
--text-body-lg--font-weight: 400;
|
|
225
|
+
|
|
226
|
+
--text-body-md: 0.875rem;
|
|
227
|
+
--text-body-md--line-height: 1.25rem;
|
|
228
|
+
--text-body-md--font-weight: 400;
|
|
229
|
+
|
|
230
|
+
--text-body-sm: 0.75rem;
|
|
231
|
+
--text-body-sm--line-height: 1rem;
|
|
232
|
+
--text-body-sm--font-weight: 400;
|
|
233
|
+
|
|
234
|
+
--text-label-lg: 0.875rem;
|
|
235
|
+
--text-label-lg--line-height: 1.25rem;
|
|
236
|
+
--text-label-lg--font-weight: 500;
|
|
237
|
+
|
|
238
|
+
--text-label-md: 0.75rem;
|
|
239
|
+
--text-label-md--line-height: 1rem;
|
|
240
|
+
--text-label-md--font-weight: 500;
|
|
241
|
+
|
|
242
|
+
--text-label-sm: 0.6875rem;
|
|
243
|
+
--text-label-sm--line-height: 1rem;
|
|
244
|
+
--text-label-sm--font-weight: 500;
|
|
245
|
+
|
|
246
|
+
/* ---------- Motion ---------- */
|
|
247
|
+
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
|
248
|
+
--ease-decelerate: cubic-bezier(0, 0, 0, 1);
|
|
249
|
+
--ease-accelerate: cubic-bezier(0.3, 0, 1, 1);
|
|
250
|
+
|
|
251
|
+
--duration-instant: 50ms;
|
|
252
|
+
--duration-short: 150ms;
|
|
253
|
+
--duration-medium: 250ms;
|
|
254
|
+
--duration-long: 400ms;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
/* ============================================================
|
|
258
|
+
DARK THEME
|
|
259
|
+
Overrides semantic tokens when .dark is on <html>.
|
|
260
|
+
Mapped exactly from your Figma dark column.
|
|
261
|
+
============================================================ */
|
|
262
|
+
|
|
263
|
+
@custom-variant dark (&:where(.dark, .dark *));
|
|
264
|
+
|
|
265
|
+
.dark {
|
|
266
|
+
/* Primary */
|
|
267
|
+
--color-primary: #60A5FA; /* Primary/400 dark */
|
|
268
|
+
--color-on-primary: #DBEAFE; /* Neutral/100 dark */
|
|
269
|
+
--color-primary-container: #1E40AF; /* Primary/800 dark */
|
|
270
|
+
--color-on-primary-container: #DBEAFE; /* Primary/100 dark */
|
|
271
|
+
|
|
272
|
+
/* Secondary */
|
|
273
|
+
--color-secondary: #A78BFA; /* Secondary/400 dark */
|
|
274
|
+
--color-on-secondary: #000000; /* Neutral/1000 dark */
|
|
275
|
+
--color-secondary-container: #5B21B6; /* Secondary/800 dark */
|
|
276
|
+
--color-on-secondary-container: #C4F5BD;
|
|
277
|
+
/* M3 state layers: #C4F5BD overlay blended into secondary-container (#5B21B6) at 8% / 12% */
|
|
278
|
+
--color-secondary-container-hover: #6332B7;
|
|
279
|
+
--color-secondary-container-active: #683AB7;
|
|
280
|
+
|
|
281
|
+
/* Surfaces */
|
|
282
|
+
--color-background: #111827; /* Neutral/900 dark */
|
|
283
|
+
--color-surface: #1F2937; /* Neutral/800 dark */
|
|
284
|
+
--color-surface-variant: #374151; /* Neutral/700 dark */
|
|
285
|
+
--color-surface-container-low: #374151;/* Neutral/700 dark */
|
|
286
|
+
--color-surface-container: #4B5563; /* Neutral/600 dark */
|
|
287
|
+
--color-surface-container-high: #6B7280;/* Neutral/500 dark */
|
|
288
|
+
|
|
289
|
+
/* Text */
|
|
290
|
+
--color-text-primary: #FFFFFF; /* Neutral/0 dark */
|
|
291
|
+
--color-text-secondary: #D1D5DB; /* Neutral/300 dark */
|
|
292
|
+
--color-text-disabled: #6B7280; /* Neutral/500 dark */
|
|
293
|
+
--color-on-surface: #FFFFFF;
|
|
294
|
+
--color-on-surface-variant: #D1D5DB;
|
|
295
|
+
|
|
296
|
+
/* Borders */
|
|
297
|
+
--color-border: #374151; /* Neutral/700 dark */
|
|
298
|
+
--color-outline: #4B5563; /* Neutral/600 dark */
|
|
299
|
+
--color-outline-variant: #374151; /* Neutral/700 dark */
|
|
300
|
+
|
|
301
|
+
/* Feedback */
|
|
302
|
+
--color-success: #34D399; /* Success/400 dark */
|
|
303
|
+
--color-success-container: #065F46; /* Success/800 dark */
|
|
304
|
+
--color-on-success-container: #D1FAE5;/* Success/100 dark */
|
|
305
|
+
|
|
306
|
+
--color-warning: #FBBF24; /* Warning/400 dark */
|
|
307
|
+
--color-warning-container: #92400E; /* Warning/800 dark */
|
|
308
|
+
--color-on-warning-container: #FEF3C7;/* Warning/100 dark */
|
|
309
|
+
|
|
310
|
+
--color-error: #F87171; /* Error/400 dark */
|
|
311
|
+
--color-error-container: #991B1B; /* Error/800 dark */
|
|
312
|
+
--color-on-error-container: #FEE2E2; /* Error/100 dark */
|
|
313
|
+
|
|
314
|
+
--color-info: #3B82F6; /* Info/500 dark - using 500 as base */
|
|
315
|
+
--color-info-container: #1E40AF; /* Info/800 approx dark */
|
|
316
|
+
--color-on-info-container: #DBEAFE; /* Info/100 dark */
|
|
317
|
+
|
|
318
|
+
/* Focus ring */
|
|
319
|
+
--color-ring: #60A5FA; /* Primary/400 dark */
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
/* ============================================================
|
|
323
|
+
BASE STYLES
|
|
324
|
+
============================================================ */
|
|
325
|
+
|
|
326
|
+
@keyframes toastProgress {
|
|
327
|
+
from { transform: scaleX(1); }
|
|
328
|
+
to { transform: scaleX(0); }
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
@keyframes circularSpin {
|
|
332
|
+
0% { transform: rotate(-90deg); }
|
|
333
|
+
100% { transform: rotate(270deg); }
|
|
334
|
+
}
|
|
335
|
+
@keyframes indeterminate {
|
|
336
|
+
0% { transform: translateX(-150%); }
|
|
337
|
+
100% { transform: translateX(400%); }
|
|
338
|
+
}
|
|
339
|
+
|
|
340
|
+
@keyframes stripes {
|
|
341
|
+
to { background-position: 28px 0; }
|
|
342
|
+
}
|
|
343
|
+
|
|
344
|
+
@layer base {
|
|
345
|
+
.tabs-scroll-hidden::-webkit-scrollbar {
|
|
346
|
+
display: none;
|
|
347
|
+
}
|
|
348
|
+
|
|
349
|
+
html {
|
|
350
|
+
background-color: var(--color-background);
|
|
351
|
+
color: var(--color-text-primary);
|
|
352
|
+
}
|
|
353
|
+
|
|
354
|
+
body {
|
|
355
|
+
background-color: var(--color-background);
|
|
356
|
+
color: var(--color-text-primary);
|
|
357
|
+
-webkit-font-smoothing: antialiased;
|
|
358
|
+
-moz-osx-font-smoothing: grayscale;
|
|
359
|
+
}
|
|
360
|
+
|
|
361
|
+
/* Respect reduced motion globally */
|
|
362
|
+
@media (prefers-reduced-motion: reduce) {
|
|
363
|
+
*,
|
|
364
|
+
*::before,
|
|
365
|
+
*::after {
|
|
366
|
+
animation-duration: 0.01ms !important;
|
|
367
|
+
animation-iteration-count: 1 !important;
|
|
368
|
+
transition-duration: 0.01ms !important;
|
|
369
|
+
scroll-behavior: auto !important;
|
|
370
|
+
}
|
|
371
|
+
}
|
|
372
|
+
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "omverse-ui",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.1.
|
|
4
|
+
"version": "0.1.3",
|
|
5
5
|
"description": "A modern React component library built with Tailwind v4, TypeScript and CVA",
|
|
6
6
|
"author": "Om",
|
|
7
7
|
"license": "MIT",
|
|
@@ -49,7 +49,8 @@
|
|
|
49
49
|
"import": "./dist/index.js",
|
|
50
50
|
"require": "./dist/index.cjs",
|
|
51
51
|
"default": "./dist/index.js"
|
|
52
|
-
}
|
|
52
|
+
},
|
|
53
|
+
"./styles": "./dist/styles/index.css"
|
|
53
54
|
},
|
|
54
55
|
"files": ["dist", "README.md"],
|
|
55
56
|
"sideEffects": false,
|