@limpiolux/ui-styles 1.0.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.
- package/base.css +52 -0
- package/components.css +445 -0
- package/index.css +16 -0
- package/light.css +314 -0
- package/package.json +33 -0
- package/preset.js +41 -0
- package/theme.d.ts +5 -0
- package/theme.js +57 -0
- package/utilities.css +39 -0
package/base.css
ADDED
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Preventores UI — Base layer
|
|
3
|
+
* Design tokens (CSS custom properties), font import, body defaults, selection.
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
|
7
|
+
|
|
8
|
+
@layer base {
|
|
9
|
+
:root {
|
|
10
|
+
--color-zinc-50: 250 250 250;
|
|
11
|
+
--color-zinc-100: 244 244 245;
|
|
12
|
+
--color-zinc-200: 228 228 231;
|
|
13
|
+
--color-zinc-300: 212 212 216;
|
|
14
|
+
--color-zinc-400: 161 161 170;
|
|
15
|
+
--color-zinc-500: 113 113 122;
|
|
16
|
+
--color-zinc-600: 82 82 91;
|
|
17
|
+
--color-zinc-700: 63 63 70;
|
|
18
|
+
--color-zinc-800: 39 39 42;
|
|
19
|
+
--color-zinc-900: 24 24 27;
|
|
20
|
+
--color-zinc-950: 9 9 11;
|
|
21
|
+
--color-brand: 0 117 169;
|
|
22
|
+
--color-brand-strong: 0 96 138;
|
|
23
|
+
--color-brand-soft: 110 205 241;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.light {
|
|
27
|
+
--color-zinc-50: 9 9 11;
|
|
28
|
+
--color-zinc-100: 24 24 27;
|
|
29
|
+
--color-zinc-200: 39 39 42;
|
|
30
|
+
--color-zinc-300: 63 63 70;
|
|
31
|
+
--color-zinc-400: 82 82 91;
|
|
32
|
+
--color-zinc-500: 113 113 122;
|
|
33
|
+
--color-zinc-600: 161 161 170;
|
|
34
|
+
--color-zinc-700: 212 212 216;
|
|
35
|
+
--color-zinc-800: 228 228 231;
|
|
36
|
+
--color-zinc-900: 255 255 255;
|
|
37
|
+
--color-zinc-950: 244 244 245;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
body {
|
|
41
|
+
@apply bg-zinc-950 text-zinc-50 antialiased;
|
|
42
|
+
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
|
43
|
+
margin: 0;
|
|
44
|
+
min-height: 100vh;
|
|
45
|
+
-webkit-font-smoothing: antialiased;
|
|
46
|
+
-moz-osx-font-smoothing: grayscale;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
::selection {
|
|
50
|
+
background: rgba(var(--color-brand) / 0.28);
|
|
51
|
+
}
|
|
52
|
+
}
|
package/components.css
ADDED
|
@@ -0,0 +1,445 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Preventores UI — Component layer
|
|
3
|
+
* All reusable component classes: forms, buttons, accents, glass, navigation, etc.
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
@layer components {
|
|
7
|
+
|
|
8
|
+
/* ── Forms ── */
|
|
9
|
+
|
|
10
|
+
.form-input {
|
|
11
|
+
@apply w-full bg-zinc-900 border border-zinc-800 rounded-lg px-3 py-2.5 text-sm text-zinc-100
|
|
12
|
+
focus:ring-1 outline-none
|
|
13
|
+
transition-colors placeholder:text-zinc-600;
|
|
14
|
+
box-shadow: none;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.form-input:focus {
|
|
18
|
+
border-color: rgba(var(--color-brand) / 0.52);
|
|
19
|
+
box-shadow: 0 0 0 1px rgba(var(--color-brand) / 0.18);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.date-filter-input {
|
|
23
|
+
color-scheme: dark;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
/* ── Buttons ── */
|
|
27
|
+
|
|
28
|
+
.btn-primary {
|
|
29
|
+
@apply text-white font-medium py-2.5 px-4 rounded-lg
|
|
30
|
+
transition-colors active:scale-[0.98] flex items-center justify-center gap-2
|
|
31
|
+
disabled:opacity-50 disabled:cursor-not-allowed;
|
|
32
|
+
background: rgb(var(--color-brand));
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.btn-primary:hover {
|
|
36
|
+
background: rgb(var(--color-brand-strong));
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.btn-secondary {
|
|
40
|
+
@apply bg-zinc-800 hover:bg-zinc-700 text-zinc-200 font-medium py-2.5 px-4 rounded-lg
|
|
41
|
+
transition-colors border border-zinc-700 active:scale-[0.98]
|
|
42
|
+
flex items-center justify-center gap-2;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
/* ── Accent: Amber ── */
|
|
46
|
+
|
|
47
|
+
.accent-amber-text {
|
|
48
|
+
@apply text-amber-400;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.accent-amber-text-soft {
|
|
52
|
+
@apply text-amber-300;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.accent-amber-panel {
|
|
56
|
+
@apply border border-amber-500/30 bg-amber-500/10;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.accent-amber-chip {
|
|
60
|
+
@apply bg-amber-500/20 text-amber-400 border border-amber-500/30;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.accent-amber-chip-soft {
|
|
64
|
+
@apply bg-amber-500/10 text-amber-200 border border-amber-500/20;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.accent-amber-button {
|
|
68
|
+
@apply bg-amber-500 text-zinc-900 hover:bg-amber-400;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.accent-amber-outline {
|
|
72
|
+
@apply text-amber-400 border border-amber-500/40 hover:bg-amber-500/10;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.accent-amber-surface {
|
|
76
|
+
@apply border-amber-500/25 bg-amber-500/[0.05];
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.accent-amber-badge {
|
|
80
|
+
@apply border-amber-500/30 bg-amber-500/10 text-amber-300;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
/* ── Inspection cards ── */
|
|
84
|
+
|
|
85
|
+
.inspection-question-card {
|
|
86
|
+
box-shadow: 0 16px 40px -28px rgba(15, 23, 42, 0.9);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.inspection-section-card {
|
|
90
|
+
border-color: rgba(var(--color-brand) / 0.28);
|
|
91
|
+
background:
|
|
92
|
+
linear-gradient(180deg, rgba(var(--color-brand) / 0.14), rgba(var(--color-brand) / 0.06)),
|
|
93
|
+
rgba(24, 24, 27, 0.82);
|
|
94
|
+
box-shadow:
|
|
95
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.03),
|
|
96
|
+
0 18px 48px -30px rgba(0, 117, 169, 0.32);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.inspection-section-kicker {
|
|
100
|
+
color: rgb(var(--color-brand-soft));
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.inspection-section-title {
|
|
104
|
+
color: #f5f7fa;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
/* ── Segmented chips ── */
|
|
108
|
+
|
|
109
|
+
.segmented-chip {
|
|
110
|
+
@apply inline-flex items-center gap-3 rounded-2xl border px-3.5 py-2.5 text-left;
|
|
111
|
+
background: rgba(24, 24, 27, 0.82);
|
|
112
|
+
border-color: rgba(63, 63, 70, 0.9);
|
|
113
|
+
color: #e4e4e7;
|
|
114
|
+
transition:
|
|
115
|
+
transform 160ms ease,
|
|
116
|
+
background-color 160ms ease,
|
|
117
|
+
border-color 160ms ease,
|
|
118
|
+
color 160ms ease,
|
|
119
|
+
box-shadow 160ms ease;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.segmented-chip:hover {
|
|
123
|
+
transform: translateY(-1px);
|
|
124
|
+
background: rgba(39, 39, 42, 0.92);
|
|
125
|
+
border-color: rgba(82, 82, 91, 0.95);
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.segmented-chip-active-blue {
|
|
129
|
+
background: rgba(var(--color-brand) / 0.14);
|
|
130
|
+
border-color: rgba(var(--color-brand) / 0.42);
|
|
131
|
+
color: #ffffff;
|
|
132
|
+
box-shadow: 0 12px 28px -22px rgba(0, 117, 169, 0.45);
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.segmented-chip-active-emerald {
|
|
136
|
+
background: rgba(var(--color-brand) / 0.14);
|
|
137
|
+
border-color: rgba(var(--color-brand) / 0.42);
|
|
138
|
+
color: #ffffff;
|
|
139
|
+
box-shadow: 0 12px 28px -22px rgba(0, 117, 169, 0.42);
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.segmented-chip-dot {
|
|
143
|
+
@apply h-2.5 w-2.5 shrink-0 rounded-full;
|
|
144
|
+
background: #71717a;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.segmented-chip-title {
|
|
148
|
+
@apply text-sm font-semibold tracking-tight;
|
|
149
|
+
color: #e4e4e7;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.segmented-chip-meta {
|
|
153
|
+
@apply mt-0.5 text-xs;
|
|
154
|
+
color: #71717a;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.segmented-chip-count {
|
|
158
|
+
@apply inline-flex min-w-8 justify-center rounded-full px-2 py-0.5 text-[11px] font-semibold;
|
|
159
|
+
background: rgba(39, 39, 42, 0.95);
|
|
160
|
+
color: #d4d4d8;
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
/* ── Soft tabs ── */
|
|
164
|
+
|
|
165
|
+
.soft-tab {
|
|
166
|
+
@apply relative inline-flex items-center justify-center rounded-xl px-3.5 py-2 text-sm;
|
|
167
|
+
background: transparent;
|
|
168
|
+
border-color: transparent;
|
|
169
|
+
color: #a1a1aa;
|
|
170
|
+
transition:
|
|
171
|
+
transform 160ms ease,
|
|
172
|
+
background-color 160ms ease,
|
|
173
|
+
color 160ms ease,
|
|
174
|
+
box-shadow 160ms ease,
|
|
175
|
+
opacity 160ms ease;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.soft-tab:hover {
|
|
179
|
+
color: #e4e4e7;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
.soft-tab-active {
|
|
183
|
+
color: #ffffff;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
.soft-tab-track {
|
|
187
|
+
@apply relative inline-flex items-center gap-1 overflow-hidden rounded-2xl p-1;
|
|
188
|
+
border: 1px solid rgba(63, 63, 70, 0.78);
|
|
189
|
+
background:
|
|
190
|
+
linear-gradient(180deg, rgba(39, 39, 42, 0.28), rgba(24, 24, 27, 0.32)),
|
|
191
|
+
rgba(9, 9, 11, 0.52);
|
|
192
|
+
box-shadow:
|
|
193
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.03),
|
|
194
|
+
inset 0 2px 5px rgba(0, 0, 0, 0.16),
|
|
195
|
+
inset 0 10px 14px -10px rgba(0, 0, 0, 0.34),
|
|
196
|
+
inset 0 -1px 1px rgba(255, 255, 255, 0.02),
|
|
197
|
+
inset 0 0 0 1px rgba(0, 0, 0, 0.1),
|
|
198
|
+
0 18px 34px -28px rgba(0, 0, 0, 0.34);
|
|
199
|
+
backdrop-filter: blur(18px);
|
|
200
|
+
-webkit-backdrop-filter: blur(18px);
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
.soft-tab-slider {
|
|
204
|
+
@apply absolute inset-0 rounded-xl;
|
|
205
|
+
background: rgb(var(--color-brand));
|
|
206
|
+
border: 1px solid rgba(var(--color-brand-soft) / 0.2);
|
|
207
|
+
box-shadow: none;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
.soft-tab-label {
|
|
211
|
+
@apply relative z-10 font-medium tracking-tight;
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
/* ── Navigation ── */
|
|
215
|
+
|
|
216
|
+
.brand-nav-item {
|
|
217
|
+
@apply flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm font-medium transition-colors;
|
|
218
|
+
color: #a1a1aa;
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
.brand-nav-item:hover {
|
|
222
|
+
color: #e4e4e7;
|
|
223
|
+
background: rgba(39, 39, 42, 0.72);
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
.brand-nav-item-active {
|
|
227
|
+
color: #d7f1fb;
|
|
228
|
+
background: rgba(var(--color-brand) / 0.16);
|
|
229
|
+
box-shadow: inset 0 0 0 1px rgba(var(--color-brand) / 0.24);
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
/* ── Brand surfaces ── */
|
|
233
|
+
|
|
234
|
+
.brand-panel {
|
|
235
|
+
border-color: rgba(var(--color-brand) / 0.22);
|
|
236
|
+
background: rgba(var(--color-brand) / 0.08);
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
.brand-panel-soft {
|
|
240
|
+
border-color: rgba(var(--color-brand) / 0.18);
|
|
241
|
+
background: rgba(var(--color-brand) / 0.05);
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
.brand-text {
|
|
245
|
+
color: rgb(var(--color-brand-soft));
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
.brand-text-strong {
|
|
249
|
+
color: #d7f1fb;
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
.brand-chip {
|
|
253
|
+
border-color: rgba(var(--color-brand) / 0.24);
|
|
254
|
+
background: rgba(var(--color-brand) / 0.1);
|
|
255
|
+
color: #c6ecfb;
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
.brand-outline {
|
|
259
|
+
border-color: rgba(var(--color-brand) / 0.28);
|
|
260
|
+
color: #c6ecfb;
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
.brand-outline:hover {
|
|
264
|
+
background: rgba(var(--color-brand) / 0.08);
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
.brand-icon-surface {
|
|
268
|
+
background: rgba(var(--color-brand) / 0.12);
|
|
269
|
+
border-color: rgba(var(--color-brand) / 0.2);
|
|
270
|
+
color: rgb(var(--color-brand-soft));
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
.brand-fab {
|
|
274
|
+
border-color: rgba(var(--color-brand) / 0.35);
|
|
275
|
+
background: rgb(var(--color-brand));
|
|
276
|
+
color: white;
|
|
277
|
+
box-shadow: 0 18px 45px -18px rgba(0, 117, 169, 0.72);
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
.brand-fab:hover {
|
|
281
|
+
background: rgb(var(--color-brand-strong));
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
/* ── Glass toolbar ── */
|
|
285
|
+
|
|
286
|
+
.glass-toolbar {
|
|
287
|
+
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
288
|
+
background: linear-gradient(
|
|
289
|
+
135deg,
|
|
290
|
+
rgba(255, 255, 255, 0.06) 0%,
|
|
291
|
+
rgba(255, 255, 255, 0.02) 50%,
|
|
292
|
+
rgba(255, 255, 255, 0.04) 100%
|
|
293
|
+
);
|
|
294
|
+
box-shadow:
|
|
295
|
+
0 8px 32px -8px rgba(0, 0, 0, 0.3),
|
|
296
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.06);
|
|
297
|
+
backdrop-filter: blur(24px) saturate(1.5);
|
|
298
|
+
-webkit-backdrop-filter: blur(24px) saturate(1.5);
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
/* ── Modal glass ── */
|
|
302
|
+
|
|
303
|
+
.modal-glass {
|
|
304
|
+
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
305
|
+
background: linear-gradient(
|
|
306
|
+
160deg,
|
|
307
|
+
rgba(24, 24, 27, 0.88) 0%,
|
|
308
|
+
rgba(9, 9, 11, 0.92) 100%
|
|
309
|
+
);
|
|
310
|
+
box-shadow:
|
|
311
|
+
0 32px 64px -16px rgba(0, 0, 0, 0.5),
|
|
312
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.08),
|
|
313
|
+
inset 0 -1px 0 rgba(0, 0, 0, 0.1);
|
|
314
|
+
backdrop-filter: blur(40px) saturate(1.8);
|
|
315
|
+
-webkit-backdrop-filter: blur(40px) saturate(1.8);
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
/* ── KPI cards ── */
|
|
319
|
+
|
|
320
|
+
.kpi-card {
|
|
321
|
+
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
322
|
+
background: linear-gradient(
|
|
323
|
+
135deg,
|
|
324
|
+
rgba(255, 255, 255, 0.06) 0%,
|
|
325
|
+
rgba(255, 255, 255, 0.02) 50%,
|
|
326
|
+
rgba(255, 255, 255, 0.04) 100%
|
|
327
|
+
);
|
|
328
|
+
box-shadow:
|
|
329
|
+
0 8px 32px -8px rgba(0, 0, 0, 0.3),
|
|
330
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.06),
|
|
331
|
+
inset 0 -1px 0 rgba(0, 0, 0, 0.1);
|
|
332
|
+
backdrop-filter: blur(20px) saturate(1.4);
|
|
333
|
+
-webkit-backdrop-filter: blur(20px) saturate(1.4);
|
|
334
|
+
transition: border-color 200ms ease, box-shadow 200ms ease;
|
|
335
|
+
}
|
|
336
|
+
|
|
337
|
+
.kpi-card:hover {
|
|
338
|
+
border-color: rgba(255, 255, 255, 0.14);
|
|
339
|
+
box-shadow:
|
|
340
|
+
0 12px 40px -8px rgba(0, 0, 0, 0.35),
|
|
341
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.08),
|
|
342
|
+
inset 0 -1px 0 rgba(0, 0, 0, 0.1);
|
|
343
|
+
}
|
|
344
|
+
|
|
345
|
+
.kpi-icon-brand {
|
|
346
|
+
background: linear-gradient(180deg, rgba(var(--color-brand) / 0.96), rgba(var(--color-brand-strong) / 0.96));
|
|
347
|
+
color: white;
|
|
348
|
+
}
|
|
349
|
+
|
|
350
|
+
.kpi-icon-soft {
|
|
351
|
+
background: linear-gradient(180deg, rgba(var(--color-brand) / 0.84), rgba(var(--color-brand-strong) / 0.78));
|
|
352
|
+
color: white;
|
|
353
|
+
}
|
|
354
|
+
|
|
355
|
+
/* ── Liquid Glass System ── */
|
|
356
|
+
|
|
357
|
+
.liquid-glass {
|
|
358
|
+
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
359
|
+
background: linear-gradient(
|
|
360
|
+
135deg,
|
|
361
|
+
rgba(255, 255, 255, 0.07) 0%,
|
|
362
|
+
rgba(255, 255, 255, 0.02) 40%,
|
|
363
|
+
rgba(255, 255, 255, 0.05) 100%
|
|
364
|
+
);
|
|
365
|
+
box-shadow:
|
|
366
|
+
0 8px 32px -8px rgba(0, 0, 0, 0.28),
|
|
367
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.08),
|
|
368
|
+
inset 0 -1px 0 rgba(0, 0, 0, 0.08);
|
|
369
|
+
backdrop-filter: blur(24px) saturate(1.5);
|
|
370
|
+
-webkit-backdrop-filter: blur(24px) saturate(1.5);
|
|
371
|
+
transition:
|
|
372
|
+
border-color 220ms ease,
|
|
373
|
+
box-shadow 220ms ease,
|
|
374
|
+
background 220ms ease;
|
|
375
|
+
}
|
|
376
|
+
|
|
377
|
+
.liquid-glass:hover {
|
|
378
|
+
border-color: rgba(255, 255, 255, 0.16);
|
|
379
|
+
box-shadow:
|
|
380
|
+
0 12px 44px -8px rgba(0, 0, 0, 0.32),
|
|
381
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.1),
|
|
382
|
+
inset 0 -1px 0 rgba(0, 0, 0, 0.08);
|
|
383
|
+
}
|
|
384
|
+
|
|
385
|
+
.liquid-glass-strong {
|
|
386
|
+
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
387
|
+
background: linear-gradient(
|
|
388
|
+
145deg,
|
|
389
|
+
rgba(255, 255, 255, 0.1) 0%,
|
|
390
|
+
rgba(255, 255, 255, 0.03) 35%,
|
|
391
|
+
rgba(255, 255, 255, 0.06) 100%
|
|
392
|
+
);
|
|
393
|
+
box-shadow:
|
|
394
|
+
0 12px 48px -12px rgba(0, 0, 0, 0.35),
|
|
395
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.1),
|
|
396
|
+
inset 0 -1px 0 rgba(0, 0, 0, 0.1),
|
|
397
|
+
0 0 0 0.5px rgba(255, 255, 255, 0.05);
|
|
398
|
+
backdrop-filter: blur(32px) saturate(1.6);
|
|
399
|
+
-webkit-backdrop-filter: blur(32px) saturate(1.6);
|
|
400
|
+
}
|
|
401
|
+
|
|
402
|
+
.liquid-glass-sidebar {
|
|
403
|
+
border-right: 1px solid rgba(255, 255, 255, 0.08);
|
|
404
|
+
background: linear-gradient(
|
|
405
|
+
180deg,
|
|
406
|
+
rgba(255, 255, 255, 0.05) 0%,
|
|
407
|
+
rgba(255, 255, 255, 0.02) 50%,
|
|
408
|
+
rgba(255, 255, 255, 0.04) 100%
|
|
409
|
+
);
|
|
410
|
+
backdrop-filter: blur(28px) saturate(1.5);
|
|
411
|
+
-webkit-backdrop-filter: blur(28px) saturate(1.5);
|
|
412
|
+
}
|
|
413
|
+
|
|
414
|
+
.liquid-glass-brand {
|
|
415
|
+
border: 1px solid rgba(var(--color-brand) / 0.2);
|
|
416
|
+
background: linear-gradient(
|
|
417
|
+
135deg,
|
|
418
|
+
rgba(var(--color-brand) / 0.1) 0%,
|
|
419
|
+
rgba(var(--color-brand) / 0.03) 40%,
|
|
420
|
+
rgba(var(--color-brand) / 0.06) 100%
|
|
421
|
+
);
|
|
422
|
+
box-shadow:
|
|
423
|
+
0 8px 32px -8px rgba(0, 117, 169, 0.15),
|
|
424
|
+
inset 0 1px 0 rgba(var(--color-brand-soft) / 0.1),
|
|
425
|
+
inset 0 -1px 0 rgba(0, 0, 0, 0.08);
|
|
426
|
+
backdrop-filter: blur(24px) saturate(1.5);
|
|
427
|
+
-webkit-backdrop-filter: blur(24px) saturate(1.5);
|
|
428
|
+
}
|
|
429
|
+
|
|
430
|
+
.liquid-glass-modal {
|
|
431
|
+
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
432
|
+
background: linear-gradient(
|
|
433
|
+
160deg,
|
|
434
|
+
rgba(24, 24, 27, 0.88) 0%,
|
|
435
|
+
rgba(9, 9, 11, 0.92) 100%
|
|
436
|
+
);
|
|
437
|
+
box-shadow:
|
|
438
|
+
0 32px 64px -16px rgba(0, 0, 0, 0.5),
|
|
439
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.08),
|
|
440
|
+
inset 0 -1px 0 rgba(0, 0, 0, 0.1),
|
|
441
|
+
0 0 0 0.5px rgba(255, 255, 255, 0.04);
|
|
442
|
+
backdrop-filter: blur(40px) saturate(1.8);
|
|
443
|
+
-webkit-backdrop-filter: blur(40px) saturate(1.8);
|
|
444
|
+
}
|
|
445
|
+
}
|
package/index.css
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Preventores UI Styles — All-in-one import
|
|
3
|
+
*
|
|
4
|
+
* Usage:
|
|
5
|
+
* @import '@preventores/ui-styles';
|
|
6
|
+
*
|
|
7
|
+
* Or import layers individually:
|
|
8
|
+
* @import '@preventores/ui-styles/base';
|
|
9
|
+
* @import '@preventores/ui-styles/components';
|
|
10
|
+
* @import '@preventores/ui-styles/utilities';
|
|
11
|
+
*/
|
|
12
|
+
|
|
13
|
+
@import './base.css';
|
|
14
|
+
@import './components.css';
|
|
15
|
+
@import './light.css';
|
|
16
|
+
@import './utilities.css';
|
package/light.css
ADDED
|
@@ -0,0 +1,314 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Preventores UI — Light-mode overrides
|
|
3
|
+
* All .light class variants for component classes.
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
/* ── Amber accents ── */
|
|
7
|
+
|
|
8
|
+
.light .accent-amber-text {
|
|
9
|
+
color: #a16207;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.light .accent-amber-text-soft {
|
|
13
|
+
color: #92400e;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.light .accent-amber-panel {
|
|
17
|
+
background: rgba(245, 158, 11, 0.14);
|
|
18
|
+
border-color: rgba(180, 83, 9, 0.24);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.light .accent-amber-chip {
|
|
22
|
+
background: rgba(245, 158, 11, 0.16);
|
|
23
|
+
border-color: rgba(180, 83, 9, 0.22);
|
|
24
|
+
color: #92400e;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.light .accent-amber-chip-soft {
|
|
28
|
+
background: rgba(245, 158, 11, 0.12);
|
|
29
|
+
border-color: rgba(180, 83, 9, 0.2);
|
|
30
|
+
color: #78350f;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.light .accent-amber-button {
|
|
34
|
+
background: #d97706;
|
|
35
|
+
color: white;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.light .accent-amber-button:hover {
|
|
39
|
+
background: #b45309;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.light .accent-amber-outline {
|
|
43
|
+
color: #92400e;
|
|
44
|
+
border-color: rgba(180, 83, 9, 0.28);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.light .accent-amber-outline:hover {
|
|
48
|
+
background: rgba(245, 158, 11, 0.12);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.light .accent-amber-surface {
|
|
52
|
+
border-color: rgba(180, 83, 9, 0.24);
|
|
53
|
+
background: rgba(245, 158, 11, 0.11);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.light .accent-amber-badge {
|
|
57
|
+
border-color: rgba(180, 83, 9, 0.24);
|
|
58
|
+
background: rgba(245, 158, 11, 0.14);
|
|
59
|
+
color: #92400e;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
/* ── Inspection cards ── */
|
|
63
|
+
|
|
64
|
+
.light .inspection-question-card {
|
|
65
|
+
box-shadow: 0 14px 30px -24px rgba(15, 23, 42, 0.18);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.light .inspection-section-card {
|
|
69
|
+
border-color: rgba(var(--color-brand) / 0.22);
|
|
70
|
+
background:
|
|
71
|
+
linear-gradient(180deg, rgba(var(--color-brand) / 0.1), rgba(var(--color-brand) / 0.04)),
|
|
72
|
+
rgba(244, 244, 245, 0.92);
|
|
73
|
+
box-shadow:
|
|
74
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.45),
|
|
75
|
+
0 16px 30px -26px rgba(0, 117, 169, 0.12);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.light .inspection-section-kicker {
|
|
79
|
+
color: #0b6e9d;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.light .inspection-section-title {
|
|
83
|
+
color: #0f172a;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
/* ── Segmented chips ── */
|
|
87
|
+
|
|
88
|
+
.light .segmented-chip {
|
|
89
|
+
background: #ffffff;
|
|
90
|
+
border-color: rgba(212, 212, 216, 0.95);
|
|
91
|
+
color: #18181b;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.light .segmented-chip:hover {
|
|
95
|
+
background: #fafafa;
|
|
96
|
+
border-color: rgba(161, 161, 170, 0.7);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.light .segmented-chip-active-blue {
|
|
100
|
+
background: rgba(var(--color-brand) / 0.1);
|
|
101
|
+
border-color: rgba(var(--color-brand) / 0.38);
|
|
102
|
+
color: #083344;
|
|
103
|
+
box-shadow: 0 12px 24px -22px rgba(0, 117, 169, 0.28);
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.light .segmented-chip-active-emerald {
|
|
107
|
+
background: rgba(var(--color-brand) / 0.1);
|
|
108
|
+
border-color: rgba(var(--color-brand) / 0.38);
|
|
109
|
+
color: #083344;
|
|
110
|
+
box-shadow: 0 12px 24px -22px rgba(0, 117, 169, 0.24);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.light .segmented-chip-dot {
|
|
114
|
+
background: #a1a1aa;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.light .segmented-chip-title {
|
|
118
|
+
color: #18181b;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.light .segmented-chip-meta {
|
|
122
|
+
color: #71717a;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.light .segmented-chip-count {
|
|
126
|
+
background: #f4f4f5;
|
|
127
|
+
color: #52525b;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
/* ── Soft tabs ── */
|
|
131
|
+
|
|
132
|
+
.light .soft-tab {
|
|
133
|
+
color: #52525b;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.light .soft-tab:hover {
|
|
137
|
+
color: #18181b;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.light .soft-tab-active {
|
|
141
|
+
color: #ffffff;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.light .soft-tab-track {
|
|
145
|
+
border-color: rgba(212, 212, 216, 0.95);
|
|
146
|
+
background:
|
|
147
|
+
linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(244, 244, 245, 0.82)),
|
|
148
|
+
rgba(255, 255, 255, 0.72);
|
|
149
|
+
box-shadow:
|
|
150
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.72),
|
|
151
|
+
inset 0 2px 5px rgba(15, 23, 42, 0.06),
|
|
152
|
+
inset 0 10px 14px -10px rgba(15, 23, 42, 0.12),
|
|
153
|
+
inset 0 -1px 1px rgba(255, 255, 255, 0.4),
|
|
154
|
+
inset 0 0 0 1px rgba(15, 23, 42, 0.03),
|
|
155
|
+
0 18px 34px -30px rgba(15, 23, 42, 0.14);
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.light .soft-tab-slider {
|
|
159
|
+
border-color: rgba(var(--color-brand) / 0.16);
|
|
160
|
+
box-shadow: none;
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
/* ── Navigation ── */
|
|
164
|
+
|
|
165
|
+
.light .brand-nav-item {
|
|
166
|
+
color: #52525b;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
.light .brand-nav-item:hover {
|
|
170
|
+
color: #18181b;
|
|
171
|
+
background: #f4f4f5;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
.light .brand-nav-item-active {
|
|
175
|
+
color: #083344;
|
|
176
|
+
background: rgba(var(--color-brand) / 0.1);
|
|
177
|
+
box-shadow: inset 0 0 0 1px rgba(var(--color-brand) / 0.2);
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
/* ── Brand surfaces ── */
|
|
181
|
+
|
|
182
|
+
.light .brand-panel {
|
|
183
|
+
border-color: rgba(var(--color-brand) / 0.18);
|
|
184
|
+
background: rgba(var(--color-brand) / 0.08);
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
.light .brand-panel-soft {
|
|
188
|
+
border-color: rgba(var(--color-brand) / 0.14);
|
|
189
|
+
background: rgba(var(--color-brand) / 0.05);
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.light .brand-text {
|
|
193
|
+
color: rgb(var(--color-brand-strong));
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
.light .brand-text-strong {
|
|
197
|
+
color: rgb(var(--color-brand-strong));
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
.light .brand-chip {
|
|
201
|
+
border-color: rgba(var(--color-brand) / 0.22);
|
|
202
|
+
background: rgba(var(--color-brand) / 0.1);
|
|
203
|
+
color: rgb(var(--color-brand-strong));
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
.light .brand-outline {
|
|
207
|
+
border-color: rgba(var(--color-brand) / 0.24);
|
|
208
|
+
color: rgb(var(--color-brand-strong));
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
.light .brand-outline:hover {
|
|
212
|
+
background: rgba(var(--color-brand) / 0.08);
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
.light .brand-icon-surface {
|
|
216
|
+
background: rgba(var(--color-brand) / 0.1);
|
|
217
|
+
border-color: rgba(var(--color-brand) / 0.16);
|
|
218
|
+
color: rgb(var(--color-brand-strong));
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
/* ── Glass / KPI ── */
|
|
222
|
+
|
|
223
|
+
.light .glass-toolbar {
|
|
224
|
+
border-color: rgba(212, 212, 216, 0.88);
|
|
225
|
+
background: rgba(255, 255, 255, 0.78);
|
|
226
|
+
box-shadow: 0 20px 40px -30px rgba(15, 23, 42, 0.18);
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
.light .modal-glass {
|
|
230
|
+
border-color: rgba(212, 212, 216, 0.92);
|
|
231
|
+
background: rgba(255, 255, 255, 0.9);
|
|
232
|
+
box-shadow: 0 28px 50px -30px rgba(15, 23, 42, 0.22);
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
.light .kpi-card {
|
|
236
|
+
border-color: rgba(0, 0, 0, 0.08);
|
|
237
|
+
background: linear-gradient(
|
|
238
|
+
135deg,
|
|
239
|
+
rgba(255, 255, 255, 0.72) 0%,
|
|
240
|
+
rgba(255, 255, 255, 0.5) 50%,
|
|
241
|
+
rgba(255, 255, 255, 0.62) 100%
|
|
242
|
+
);
|
|
243
|
+
box-shadow:
|
|
244
|
+
0 8px 32px -8px rgba(15, 23, 42, 0.1),
|
|
245
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.8),
|
|
246
|
+
inset 0 -1px 0 rgba(0, 0, 0, 0.04);
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
.light .kpi-card:hover {
|
|
250
|
+
border-color: rgba(0, 0, 0, 0.12);
|
|
251
|
+
box-shadow:
|
|
252
|
+
0 12px 40px -8px rgba(15, 23, 42, 0.14),
|
|
253
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.9),
|
|
254
|
+
inset 0 -1px 0 rgba(0, 0, 0, 0.04);
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
/* ── Liquid Glass ── */
|
|
258
|
+
|
|
259
|
+
.light .liquid-glass,
|
|
260
|
+
.light .liquid-glass-strong {
|
|
261
|
+
border-color: rgba(0, 0, 0, 0.08);
|
|
262
|
+
background: linear-gradient(
|
|
263
|
+
135deg,
|
|
264
|
+
rgba(255, 255, 255, 0.72) 0%,
|
|
265
|
+
rgba(255, 255, 255, 0.45) 40%,
|
|
266
|
+
rgba(255, 255, 255, 0.58) 100%
|
|
267
|
+
);
|
|
268
|
+
box-shadow:
|
|
269
|
+
0 8px 32px -8px rgba(15, 23, 42, 0.1),
|
|
270
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.9),
|
|
271
|
+
inset 0 -1px 0 rgba(0, 0, 0, 0.03);
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
.light .liquid-glass:hover,
|
|
275
|
+
.light .liquid-glass-strong:hover {
|
|
276
|
+
border-color: rgba(0, 0, 0, 0.12);
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
.light .liquid-glass-sidebar {
|
|
280
|
+
border-right-color: rgba(0, 0, 0, 0.06);
|
|
281
|
+
background: linear-gradient(
|
|
282
|
+
180deg,
|
|
283
|
+
rgba(255, 255, 255, 0.78) 0%,
|
|
284
|
+
rgba(255, 255, 255, 0.55) 50%,
|
|
285
|
+
rgba(255, 255, 255, 0.65) 100%
|
|
286
|
+
);
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
.light .liquid-glass-brand {
|
|
290
|
+
border-color: rgba(var(--color-brand) / 0.16);
|
|
291
|
+
background: linear-gradient(
|
|
292
|
+
135deg,
|
|
293
|
+
rgba(var(--color-brand) / 0.08) 0%,
|
|
294
|
+
rgba(var(--color-brand) / 0.02) 40%,
|
|
295
|
+
rgba(var(--color-brand) / 0.05) 100%
|
|
296
|
+
);
|
|
297
|
+
box-shadow:
|
|
298
|
+
0 8px 32px -8px rgba(0, 117, 169, 0.08),
|
|
299
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.6),
|
|
300
|
+
inset 0 -1px 0 rgba(0, 0, 0, 0.03);
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
.light .liquid-glass-modal {
|
|
304
|
+
border-color: rgba(0, 0, 0, 0.08);
|
|
305
|
+
background: linear-gradient(
|
|
306
|
+
160deg,
|
|
307
|
+
rgba(255, 255, 255, 0.92) 0%,
|
|
308
|
+
rgba(244, 244, 245, 0.88) 100%
|
|
309
|
+
);
|
|
310
|
+
box-shadow:
|
|
311
|
+
0 32px 64px -16px rgba(15, 23, 42, 0.18),
|
|
312
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.9),
|
|
313
|
+
inset 0 -1px 0 rgba(0, 0, 0, 0.03);
|
|
314
|
+
}
|
package/package.json
ADDED
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@limpiolux/ui-styles",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "Shared design system — Preventores liquid glass theme with dark/light mode support",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"exports": {
|
|
7
|
+
".": "./index.css",
|
|
8
|
+
"./base.css": "./base.css",
|
|
9
|
+
"./components.css": "./components.css",
|
|
10
|
+
"./light.css": "./light.css",
|
|
11
|
+
"./utilities.css": "./utilities.css",
|
|
12
|
+
"./index.css": "./index.css",
|
|
13
|
+
"./preset": "./preset.js",
|
|
14
|
+
"./preset.js": "./preset.js",
|
|
15
|
+
"./theme": "./theme.js",
|
|
16
|
+
"./theme.js": "./theme.js"
|
|
17
|
+
},
|
|
18
|
+
"files": [
|
|
19
|
+
"*.css",
|
|
20
|
+
"*.js",
|
|
21
|
+
"*.d.ts"
|
|
22
|
+
],
|
|
23
|
+
"keywords": [
|
|
24
|
+
"tailwindcss",
|
|
25
|
+
"design-system",
|
|
26
|
+
"liquid-glass",
|
|
27
|
+
"preventores"
|
|
28
|
+
],
|
|
29
|
+
"license": "MIT",
|
|
30
|
+
"peerDependencies": {
|
|
31
|
+
"tailwindcss": ">=3.4.0"
|
|
32
|
+
}
|
|
33
|
+
}
|
package/preset.js
ADDED
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Preventores Tailwind CSS Preset
|
|
3
|
+
*
|
|
4
|
+
* Usage in tailwind.config.js:
|
|
5
|
+
* import preventoresPreset from '@preventores/ui-styles/preset'
|
|
6
|
+
* export default {
|
|
7
|
+
* presets: [preventoresPreset],
|
|
8
|
+
* content: [ ... ],
|
|
9
|
+
* }
|
|
10
|
+
*/
|
|
11
|
+
export default {
|
|
12
|
+
darkMode: 'class',
|
|
13
|
+
theme: {
|
|
14
|
+
extend: {
|
|
15
|
+
colors: {
|
|
16
|
+
zinc: {
|
|
17
|
+
50: 'rgb(var(--color-zinc-50) / <alpha-value>)',
|
|
18
|
+
100: 'rgb(var(--color-zinc-100) / <alpha-value>)',
|
|
19
|
+
200: 'rgb(var(--color-zinc-200) / <alpha-value>)',
|
|
20
|
+
300: 'rgb(var(--color-zinc-300) / <alpha-value>)',
|
|
21
|
+
400: 'rgb(var(--color-zinc-400) / <alpha-value>)',
|
|
22
|
+
500: 'rgb(var(--color-zinc-500) / <alpha-value>)',
|
|
23
|
+
600: 'rgb(var(--color-zinc-600) / <alpha-value>)',
|
|
24
|
+
700: 'rgb(var(--color-zinc-700) / <alpha-value>)',
|
|
25
|
+
800: 'rgb(var(--color-zinc-800) / <alpha-value>)',
|
|
26
|
+
900: 'rgb(var(--color-zinc-900) / <alpha-value>)',
|
|
27
|
+
950: 'rgb(var(--color-zinc-950) / <alpha-value>)',
|
|
28
|
+
},
|
|
29
|
+
brand: {
|
|
30
|
+
DEFAULT: 'rgb(var(--color-brand) / <alpha-value>)',
|
|
31
|
+
strong: 'rgb(var(--color-brand-strong) / <alpha-value>)',
|
|
32
|
+
soft: 'rgb(var(--color-brand-soft) / <alpha-value>)',
|
|
33
|
+
},
|
|
34
|
+
},
|
|
35
|
+
fontFamily: {
|
|
36
|
+
sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
|
|
37
|
+
},
|
|
38
|
+
},
|
|
39
|
+
},
|
|
40
|
+
plugins: [],
|
|
41
|
+
}
|
package/theme.d.ts
ADDED
package/theme.js
ADDED
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Preventores Theme Toggle Helper
|
|
3
|
+
*
|
|
4
|
+
* Usage:
|
|
5
|
+
* import { initTheme, toggleTheme, setTheme, getTheme } from '@preventores/ui-styles/theme'
|
|
6
|
+
*
|
|
7
|
+
* // On app start — restores saved preference
|
|
8
|
+
* initTheme()
|
|
9
|
+
*
|
|
10
|
+
* // Toggle between dark ↔ light
|
|
11
|
+
* toggleTheme()
|
|
12
|
+
*
|
|
13
|
+
* // Force a specific mode
|
|
14
|
+
* setTheme('light')
|
|
15
|
+
*/
|
|
16
|
+
|
|
17
|
+
const STORAGE_KEY = 'theme'
|
|
18
|
+
|
|
19
|
+
/** Returns the current theme: 'dark' | 'light' */
|
|
20
|
+
export function getTheme() {
|
|
21
|
+
if (typeof document === 'undefined') return 'dark'
|
|
22
|
+
return document.documentElement.classList.contains('light') ? 'light' : 'dark'
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
/** Apply theme class and persist to localStorage */
|
|
26
|
+
export function setTheme(mode) {
|
|
27
|
+
if (typeof document === 'undefined') return
|
|
28
|
+
if (mode === 'light') {
|
|
29
|
+
document.documentElement.classList.add('light')
|
|
30
|
+
} else {
|
|
31
|
+
document.documentElement.classList.remove('light')
|
|
32
|
+
}
|
|
33
|
+
try {
|
|
34
|
+
localStorage.setItem(STORAGE_KEY, mode)
|
|
35
|
+
} catch (_) {
|
|
36
|
+
// localStorage unavailable (SSR, privacy mode)
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
/** Toggle between dark and light */
|
|
41
|
+
export function toggleTheme() {
|
|
42
|
+
setTheme(getTheme() === 'dark' ? 'light' : 'dark')
|
|
43
|
+
return getTheme()
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
/** Restore saved theme on app boot (call once in your entry file) */
|
|
47
|
+
export function initTheme() {
|
|
48
|
+
if (typeof window === 'undefined') return
|
|
49
|
+
try {
|
|
50
|
+
const saved = localStorage.getItem(STORAGE_KEY)
|
|
51
|
+
if (saved === 'light') {
|
|
52
|
+
document.documentElement.classList.add('light')
|
|
53
|
+
}
|
|
54
|
+
} catch (_) {
|
|
55
|
+
// ignore
|
|
56
|
+
}
|
|
57
|
+
}
|
package/utilities.css
ADDED
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Preventores UI — Utility layer
|
|
3
|
+
* Custom scrollbar, date-input helpers.
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
@layer utilities {
|
|
7
|
+
::-webkit-scrollbar {
|
|
8
|
+
width: 6px;
|
|
9
|
+
height: 6px;
|
|
10
|
+
}
|
|
11
|
+
::-webkit-scrollbar-track {
|
|
12
|
+
@apply bg-transparent;
|
|
13
|
+
}
|
|
14
|
+
::-webkit-scrollbar-thumb {
|
|
15
|
+
@apply bg-zinc-800 rounded-full;
|
|
16
|
+
}
|
|
17
|
+
::-webkit-scrollbar-thumb:hover {
|
|
18
|
+
@apply bg-zinc-700;
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
/* ── Date inputs ── */
|
|
23
|
+
|
|
24
|
+
.date-filter-input::-webkit-calendar-picker-indicator {
|
|
25
|
+
cursor: pointer;
|
|
26
|
+
opacity: 0.72;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.date-filter-input::-webkit-datetime-edit,
|
|
30
|
+
.date-filter-input::-webkit-datetime-edit-text,
|
|
31
|
+
.date-filter-input::-webkit-datetime-edit-month-field,
|
|
32
|
+
.date-filter-input::-webkit-datetime-edit-day-field,
|
|
33
|
+
.date-filter-input::-webkit-datetime-edit-year-field {
|
|
34
|
+
color: rgb(var(--color-zinc-100));
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.light .date-filter-input {
|
|
38
|
+
color-scheme: light;
|
|
39
|
+
}
|