@abumble/design-system 0.0.35 → 0.0.37
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/components/Banner/Banner.d.ts +5 -9
- package/dist/components/Banner/Banner.d.ts.map +1 -1
- package/dist/components/Banner/bannerType.d.ts +9 -0
- package/dist/components/Banner/bannerType.d.ts.map +1 -0
- package/dist/components/Banner/index.d.ts +2 -1
- package/dist/components/Banner/index.d.ts.map +1 -1
- package/dist/components/Banner.js +24 -24
- package/dist/components/Banner.js.map +1 -1
- package/dist/components/Sidebar/Sidebar.d.ts +32 -32
- package/dist/components/Sidebar/Sidebar.d.ts.map +1 -1
- package/dist/components/Sidebar.js +109 -92
- package/dist/components/Sidebar.js.map +1 -1
- package/dist/main.d.ts +1 -0
- package/dist/main.d.ts.map +1 -1
- package/package.json +6 -3
- package/src/styles.css +14 -152
- package/src/themes/linen.css +130 -0
- package/src/themes/steel.css +130 -0
package/package.json
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@abumble/design-system",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.37",
|
|
4
4
|
"files": [
|
|
5
5
|
"dist",
|
|
6
|
-
"src/styles.css"
|
|
6
|
+
"src/styles.css",
|
|
7
|
+
"src/themes"
|
|
7
8
|
],
|
|
8
9
|
"exports": {
|
|
9
10
|
".": {
|
|
@@ -166,7 +167,9 @@
|
|
|
166
167
|
"import": "./dist/use-mobile.js",
|
|
167
168
|
"types": "./dist/hooks/use-mobile.d.ts"
|
|
168
169
|
},
|
|
169
|
-
"./styles.css": "./src/styles.css"
|
|
170
|
+
"./styles.css": "./src/styles.css",
|
|
171
|
+
"./themes/linen.css": "./src/themes/linen.css",
|
|
172
|
+
"./themes/steel.css": "./src/themes/steel.css"
|
|
170
173
|
},
|
|
171
174
|
"scripts": {
|
|
172
175
|
"version": "npm run build",
|
package/src/styles.css
CHANGED
|
@@ -5,7 +5,6 @@
|
|
|
5
5
|
@tailwind components;
|
|
6
6
|
@tailwind utilities;
|
|
7
7
|
|
|
8
|
-
|
|
9
8
|
@custom-variant dark (&:is(.dark *));
|
|
10
9
|
|
|
11
10
|
@theme {
|
|
@@ -26,14 +25,12 @@
|
|
|
26
25
|
}
|
|
27
26
|
|
|
28
27
|
@layer base {
|
|
29
|
-
|
|
30
28
|
button:not(:disabled),
|
|
31
|
-
[role=
|
|
29
|
+
[role='button']:not(:disabled) {
|
|
32
30
|
cursor: pointer;
|
|
33
31
|
}
|
|
34
32
|
}
|
|
35
33
|
|
|
36
|
-
|
|
37
34
|
@keyframes rumble {
|
|
38
35
|
0% {
|
|
39
36
|
transform: translateY(0) rotate(0deg);
|
|
@@ -57,7 +54,6 @@
|
|
|
57
54
|
}
|
|
58
55
|
|
|
59
56
|
@keyframes slide-right-return {
|
|
60
|
-
|
|
61
57
|
0% {
|
|
62
58
|
transform: translateX(-50%) scaleX(1);
|
|
63
59
|
}
|
|
@@ -107,15 +103,15 @@
|
|
|
107
103
|
}
|
|
108
104
|
|
|
109
105
|
.sidebar-text {
|
|
110
|
-
@apply text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded px-2 text-xs font-medium
|
|
106
|
+
@apply text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded px-2 text-xs font-medium;
|
|
111
107
|
}
|
|
112
108
|
|
|
113
109
|
.code {
|
|
114
|
-
@apply text-sm px-1 bg-background rounded border-container
|
|
110
|
+
@apply text-sm px-1 bg-background rounded border-container;
|
|
115
111
|
}
|
|
116
112
|
|
|
117
113
|
.sidebar {
|
|
118
|
-
@apply text-sidebar-foreground
|
|
114
|
+
@apply text-sidebar-foreground;
|
|
119
115
|
}
|
|
120
116
|
|
|
121
117
|
.header {
|
|
@@ -123,19 +119,19 @@
|
|
|
123
119
|
}
|
|
124
120
|
|
|
125
121
|
.sub-heading {
|
|
126
|
-
@apply mt-8 mb-1 font-semibold text-gray-900
|
|
122
|
+
@apply mt-8 mb-1 font-semibold text-gray-900;
|
|
127
123
|
}
|
|
128
124
|
|
|
129
125
|
.p-text {
|
|
130
|
-
@apply leading-relaxed text-gray-900
|
|
126
|
+
@apply leading-relaxed text-gray-900;
|
|
131
127
|
}
|
|
132
128
|
|
|
133
129
|
.text-link {
|
|
134
|
-
@apply text-blue-600 hover:text-blue-800 visited:text-blue-900
|
|
130
|
+
@apply text-blue-600 hover:text-blue-800 visited:text-blue-900;
|
|
135
131
|
}
|
|
136
132
|
|
|
137
133
|
.nav-link {
|
|
138
|
-
@apply relative block px-3 py-2 transition text-gray-700 hover:text-gray-950
|
|
134
|
+
@apply relative block px-3 py-2 transition text-gray-700 hover:text-gray-950;
|
|
139
135
|
}
|
|
140
136
|
|
|
141
137
|
.nav-link:hover,
|
|
@@ -158,141 +154,7 @@ code {
|
|
|
158
154
|
source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
|
|
159
155
|
}
|
|
160
156
|
|
|
161
|
-
:
|
|
162
|
-
/* --- Light Theme (Linen & Slate - Minimal Warmth) --- */
|
|
163
|
-
--background: oklch(0.992 0.003 85);
|
|
164
|
-
/* Clean Linen White */
|
|
165
|
-
--foreground: oklch(0.2 0.01 85);
|
|
166
|
-
|
|
167
|
-
/* Surfaces (Tables, Cards, Buttons) - Frosted White */
|
|
168
|
-
--card: oklch(1 0 0 / 0.75);
|
|
169
|
-
--card-foreground: oklch(0.2 0.01 85);
|
|
170
|
-
|
|
171
|
-
--popover: oklch(1 0 0);
|
|
172
|
-
--popover-foreground: oklch(0.2 0.01 85);
|
|
173
|
-
|
|
174
|
-
/* Primary: Deep Warm Charcoal (Neutral & High Contrast) */
|
|
175
|
-
--primary: oklch(0.18 0.01 85);
|
|
176
|
-
--primary-foreground: oklch(1 0 0);
|
|
177
|
-
|
|
178
|
-
/* Button/Surface Colors: Pure White */
|
|
179
|
-
--secondary: oklch(1 0 0);
|
|
180
|
-
--secondary-foreground: oklch(0.18 0.01 85);
|
|
181
|
-
|
|
182
|
-
--muted: oklch(1 0 0);
|
|
183
|
-
--muted-foreground: oklch(0.5 0.01 85);
|
|
184
|
-
|
|
185
|
-
--accent: oklch(1 0 0);
|
|
186
|
-
--accent-foreground: oklch(0.18 0.01 85);
|
|
187
|
-
|
|
188
|
-
--destructive: oklch(0.55 0.15 25);
|
|
189
|
-
--destructive-foreground: oklch(1 0 0);
|
|
190
|
-
|
|
191
|
-
--border: oklch(0.94 0.005 85);
|
|
192
|
-
--input: oklch(0.94 0.005 85);
|
|
193
|
-
--ring: oklch(0.18 0.01 85 / 0.1);
|
|
194
|
-
|
|
195
|
-
--radius: 0.6rem;
|
|
196
|
-
|
|
197
|
-
/* Sidebar (Soft White) */
|
|
198
|
-
--sidebar: oklch(0.995 0.002 85);
|
|
199
|
-
--sidebar-foreground: oklch(0.2 0.01 85);
|
|
200
|
-
--sidebar-primary: oklch(0.18 0.01 85);
|
|
201
|
-
--sidebar-primary-foreground: oklch(1 0 0);
|
|
202
|
-
--sidebar-accent: oklch(0.97 0.01 85);
|
|
203
|
-
/* Slightly darker for active/hover state */
|
|
204
|
-
--sidebar-accent-foreground: oklch(0.18 0.01 85);
|
|
205
|
-
--sidebar-border: oklch(0.95 0.005 85);
|
|
206
|
-
|
|
207
|
-
/* Banners (Refined) */
|
|
208
|
-
--banner-info: oklch(0.94 0.02 240);
|
|
209
|
-
--banner-info-foreground: oklch(0.4 0.1 240);
|
|
210
|
-
--banner-info-border: oklch(0.85 0.05 240);
|
|
211
|
-
--banner-note: oklch(0.94 0.02 160);
|
|
212
|
-
--banner-note-foreground: oklch(0.35 0.1 160);
|
|
213
|
-
--banner-note-border: oklch(0.85 0.05 160);
|
|
214
|
-
--banner-warning: oklch(0.95 0.03 80);
|
|
215
|
-
--banner-warning-foreground: oklch(0.45 0.1 60);
|
|
216
|
-
--banner-warning-border: oklch(0.88 0.05 70);
|
|
217
|
-
--banner-alert: oklch(0.95 0.03 25);
|
|
218
|
-
--banner-alert-foreground: oklch(0.45 0.12 25);
|
|
219
|
-
--banner-alert-border: oklch(0.88 0.08 25);
|
|
220
|
-
|
|
221
|
-
/* Interactive Elements */
|
|
222
|
-
--badge-success: oklch(0.4 0.1 160);
|
|
223
|
-
--badge-success-foreground: oklch(1 0 0);
|
|
224
|
-
--checkbox-checked: oklch(0.15 0.01 60);
|
|
225
|
-
--checkbox-checked-foreground: oklch(1 0 0);
|
|
226
|
-
--checkbox-unchecked-bg: oklch(1 0 0);
|
|
227
|
-
--checkbox-unchecked-border: oklch(0.88 0.01 60);
|
|
228
|
-
}
|
|
229
|
-
|
|
230
|
-
.dark {
|
|
231
|
-
/* --- Dark Theme (Modern Slate & Glow) --- */
|
|
232
|
-
--background: oklch(0.18 0.015 260);
|
|
233
|
-
--foreground: oklch(0.985 0 0);
|
|
234
|
-
|
|
235
|
-
/* Card Elevation: Brighter than background */
|
|
236
|
-
--card: oklch(0.23 0.02 260 / 0.75);
|
|
237
|
-
--card-foreground: oklch(0.985 0 0);
|
|
238
|
-
|
|
239
|
-
--popover: oklch(0.21 0.015 260);
|
|
240
|
-
--popover-foreground: oklch(0.985 0 0);
|
|
241
|
-
|
|
242
|
-
/* Primary: Electric Cyan Glow */
|
|
243
|
-
--primary: oklch(0.9 0.1 220);
|
|
244
|
-
--primary-foreground: oklch(0.18 0.015 260);
|
|
245
|
-
|
|
246
|
-
--secondary: oklch(0.28 0.02 260);
|
|
247
|
-
--secondary-foreground: oklch(0.9 0.1 220);
|
|
248
|
-
|
|
249
|
-
--muted: oklch(0.28 0.02 260);
|
|
250
|
-
--muted-foreground: oklch(0.705 0.015 260);
|
|
251
|
-
|
|
252
|
-
--accent: oklch(0.28 0.02 260);
|
|
253
|
-
--accent-foreground: oklch(0.9 0.1 220);
|
|
254
|
-
|
|
255
|
-
--destructive: oklch(0.45 0.15 25);
|
|
256
|
-
--destructive-foreground: oklch(0.985 0 0);
|
|
257
|
-
|
|
258
|
-
--border: oklch(0.32 0.02 260);
|
|
259
|
-
--input: oklch(0.32 0.02 260);
|
|
260
|
-
--ring: oklch(0.9 0.1 220 / 0.3);
|
|
261
|
-
|
|
262
|
-
/* Sidebar (Dark) */
|
|
263
|
-
--sidebar: oklch(0.21 0.015 260);
|
|
264
|
-
--sidebar-foreground: oklch(0.985 0 0);
|
|
265
|
-
--sidebar-primary: oklch(0.9 0.1 220);
|
|
266
|
-
--sidebar-primary-foreground: oklch(0.18 0.015 260);
|
|
267
|
-
--sidebar-accent: oklch(0.28 0.02 260);
|
|
268
|
-
--sidebar-accent-foreground: oklch(0.985 0 0);
|
|
269
|
-
--sidebar-border: oklch(0.32 0.02 260);
|
|
270
|
-
|
|
271
|
-
/* Banners (Dark - Desaturated) */
|
|
272
|
-
--banner-info: oklch(0.274 0.079 260);
|
|
273
|
-
--banner-info-foreground: oklch(0.925 0.033 260);
|
|
274
|
-
--banner-info-border: oklch(0.488 0.2 260);
|
|
275
|
-
--banner-note: oklch(0.266 0.065 152);
|
|
276
|
-
--banner-note-foreground: oklch(0.962 0.044 156);
|
|
277
|
-
--banner-note-border: oklch(0.45 0.1 152);
|
|
278
|
-
--banner-warning: oklch(0.304 0.063 73);
|
|
279
|
-
--banner-warning-foreground: oklch(0.969 0.071 103);
|
|
280
|
-
--banner-warning-border: oklch(0.48 0.1 73);
|
|
281
|
-
--banner-alert: oklch(0.293 0.084 27);
|
|
282
|
-
--banner-alert-foreground: oklch(0.969 0.071 27);
|
|
283
|
-
--banner-alert-border: oklch(0.45 0.12 27);
|
|
284
|
-
|
|
285
|
-
/* Interactive Elements (Dark) */
|
|
286
|
-
--badge-success: oklch(0.48 0.15 150);
|
|
287
|
-
--badge-success-foreground: oklch(1 0 0);
|
|
288
|
-
--checkbox-checked: oklch(0.9 0.1 220);
|
|
289
|
-
--checkbox-checked-foreground: oklch(0.18 0.015 260);
|
|
290
|
-
--checkbox-unchecked-bg: oklch(0.25 0.01 260);
|
|
291
|
-
--checkbox-unchecked-border: oklch(0.4 0.01 260);
|
|
292
|
-
}
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
/* Banner: colors from styles.css tokens; type → info=blue, note=green, warning=yellow, alert=red */
|
|
157
|
+
/* Banner: colors from theme tokens; type → info=blue, note=green, warning=yellow, alert=red */
|
|
296
158
|
[data-banner-type] {
|
|
297
159
|
border-left-width: 4px;
|
|
298
160
|
border-left-style: solid;
|
|
@@ -300,25 +162,25 @@ code {
|
|
|
300
162
|
padding: 0.75rem;
|
|
301
163
|
}
|
|
302
164
|
|
|
303
|
-
[data-banner-type=
|
|
165
|
+
[data-banner-type='info'] {
|
|
304
166
|
background: var(--banner-info);
|
|
305
167
|
color: var(--banner-info-foreground);
|
|
306
168
|
border-left-color: var(--banner-info-border);
|
|
307
169
|
}
|
|
308
170
|
|
|
309
|
-
[data-banner-type=
|
|
171
|
+
[data-banner-type='note'] {
|
|
310
172
|
background: var(--banner-note);
|
|
311
173
|
color: var(--banner-note-foreground);
|
|
312
174
|
border-left-color: var(--banner-note-border);
|
|
313
175
|
}
|
|
314
176
|
|
|
315
|
-
[data-banner-type=
|
|
177
|
+
[data-banner-type='warning'] {
|
|
316
178
|
background: var(--banner-warning);
|
|
317
179
|
color: var(--banner-warning-foreground);
|
|
318
180
|
border-left-color: var(--banner-warning-border);
|
|
319
181
|
}
|
|
320
182
|
|
|
321
|
-
[data-banner-type=
|
|
183
|
+
[data-banner-type='alert'] {
|
|
322
184
|
background: var(--banner-alert);
|
|
323
185
|
color: var(--banner-alert-foreground);
|
|
324
186
|
border-left-color: var(--banner-alert-border);
|
|
@@ -371,4 +233,4 @@ code {
|
|
|
371
233
|
body {
|
|
372
234
|
@apply bg-background text-foreground;
|
|
373
235
|
}
|
|
374
|
-
}
|
|
236
|
+
}
|
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
/* --- Light Theme (Linen & Slate - Minimal Warmth) --- */
|
|
3
|
+
--background: oklch(0.992 0.003 85);
|
|
4
|
+
--foreground: oklch(0.2 0.01 85);
|
|
5
|
+
|
|
6
|
+
/* Surfaces (Tables, Cards, Buttons) - Frosted White */
|
|
7
|
+
--card: oklch(1 0 0 / 0.75);
|
|
8
|
+
--card-foreground: oklch(0.2 0.01 85);
|
|
9
|
+
|
|
10
|
+
--popover: oklch(1 0 0);
|
|
11
|
+
--popover-foreground: oklch(0.2 0.01 85);
|
|
12
|
+
|
|
13
|
+
/* Primary: Deep Warm Charcoal (Neutral & High Contrast) */
|
|
14
|
+
--primary: oklch(0.18 0.01 85);
|
|
15
|
+
--primary-foreground: oklch(1 0 0);
|
|
16
|
+
|
|
17
|
+
/* Button/Surface Colors: Pure White */
|
|
18
|
+
--secondary: oklch(1 0 0);
|
|
19
|
+
--secondary-foreground: oklch(0.18 0.01 85);
|
|
20
|
+
|
|
21
|
+
--muted: oklch(1 0 0);
|
|
22
|
+
--muted-foreground: oklch(0.5 0.01 85);
|
|
23
|
+
|
|
24
|
+
--accent: oklch(1 0 0);
|
|
25
|
+
--accent-foreground: oklch(0.18 0.01 85);
|
|
26
|
+
|
|
27
|
+
--destructive: oklch(0.55 0.15 25);
|
|
28
|
+
--destructive-foreground: oklch(1 0 0);
|
|
29
|
+
|
|
30
|
+
--border: oklch(0.94 0.005 85);
|
|
31
|
+
--input: oklch(0.94 0.005 85);
|
|
32
|
+
--ring: oklch(0.18 0.01 85 / 0.1);
|
|
33
|
+
|
|
34
|
+
--radius: 0.6rem;
|
|
35
|
+
|
|
36
|
+
/* Sidebar (Soft White) */
|
|
37
|
+
--sidebar: oklch(0.995 0.002 85);
|
|
38
|
+
--sidebar-foreground: oklch(0.2 0.01 85);
|
|
39
|
+
--sidebar-primary: oklch(0.18 0.01 85);
|
|
40
|
+
--sidebar-primary-foreground: oklch(1 0 0);
|
|
41
|
+
--sidebar-accent: oklch(0.97 0.01 85);
|
|
42
|
+
--sidebar-accent-foreground: oklch(0.18 0.01 85);
|
|
43
|
+
--sidebar-border: oklch(0.95 0.005 85);
|
|
44
|
+
|
|
45
|
+
/* Banners */
|
|
46
|
+
--banner-info: oklch(0.94 0.02 240);
|
|
47
|
+
--banner-info-foreground: oklch(0.4 0.1 240);
|
|
48
|
+
--banner-info-border: oklch(0.85 0.05 240);
|
|
49
|
+
--banner-note: oklch(0.94 0.02 160);
|
|
50
|
+
--banner-note-foreground: oklch(0.35 0.1 160);
|
|
51
|
+
--banner-note-border: oklch(0.85 0.05 160);
|
|
52
|
+
--banner-warning: oklch(0.95 0.03 80);
|
|
53
|
+
--banner-warning-foreground: oklch(0.45 0.1 60);
|
|
54
|
+
--banner-warning-border: oklch(0.88 0.05 70);
|
|
55
|
+
--banner-alert: oklch(0.95 0.03 25);
|
|
56
|
+
--banner-alert-foreground: oklch(0.45 0.12 25);
|
|
57
|
+
--banner-alert-border: oklch(0.88 0.08 25);
|
|
58
|
+
|
|
59
|
+
/* Interactive Elements */
|
|
60
|
+
--badge-success: oklch(0.4 0.1 160);
|
|
61
|
+
--badge-success-foreground: oklch(1 0 0);
|
|
62
|
+
--checkbox-checked: oklch(0.15 0.01 60);
|
|
63
|
+
--checkbox-checked-foreground: oklch(1 0 0);
|
|
64
|
+
--checkbox-unchecked-bg: oklch(1 0 0);
|
|
65
|
+
--checkbox-unchecked-border: oklch(0.88 0.01 60);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.dark {
|
|
69
|
+
/* --- Dark Theme (Warm Charcoal - Candlelit) --- */
|
|
70
|
+
--background: oklch(0.14 0.01 80);
|
|
71
|
+
--foreground: oklch(0.93 0.01 85);
|
|
72
|
+
|
|
73
|
+
/* Card Elevation: Warm lifted surface */
|
|
74
|
+
--card: oklch(0.19 0.012 80 / 0.75);
|
|
75
|
+
--card-foreground: oklch(0.93 0.01 85);
|
|
76
|
+
|
|
77
|
+
--popover: oklch(0.17 0.01 80);
|
|
78
|
+
--popover-foreground: oklch(0.93 0.01 85);
|
|
79
|
+
|
|
80
|
+
/* Primary: Warm Sand/Cream */
|
|
81
|
+
--primary: oklch(0.86 0.05 85);
|
|
82
|
+
--primary-foreground: oklch(0.14 0.01 80);
|
|
83
|
+
|
|
84
|
+
--secondary: oklch(0.24 0.01 80);
|
|
85
|
+
--secondary-foreground: oklch(0.86 0.05 85);
|
|
86
|
+
|
|
87
|
+
--muted: oklch(0.24 0.01 80);
|
|
88
|
+
--muted-foreground: oklch(0.60 0.01 85);
|
|
89
|
+
|
|
90
|
+
--accent: oklch(0.24 0.01 80);
|
|
91
|
+
--accent-foreground: oklch(0.86 0.05 85);
|
|
92
|
+
|
|
93
|
+
--destructive: oklch(0.48 0.15 25);
|
|
94
|
+
--destructive-foreground: oklch(0.93 0.01 85);
|
|
95
|
+
|
|
96
|
+
--border: oklch(0.28 0.01 80);
|
|
97
|
+
--input: oklch(0.28 0.01 80);
|
|
98
|
+
--ring: oklch(0.86 0.05 85 / 0.3);
|
|
99
|
+
|
|
100
|
+
/* Sidebar (Warm Dark) */
|
|
101
|
+
--sidebar: oklch(0.17 0.01 80);
|
|
102
|
+
--sidebar-foreground: oklch(0.93 0.01 85);
|
|
103
|
+
--sidebar-primary: oklch(0.86 0.05 85);
|
|
104
|
+
--sidebar-primary-foreground: oklch(0.14 0.01 80);
|
|
105
|
+
--sidebar-accent: oklch(0.23 0.01 80);
|
|
106
|
+
--sidebar-accent-foreground: oklch(0.93 0.01 85);
|
|
107
|
+
--sidebar-border: oklch(0.28 0.01 80);
|
|
108
|
+
|
|
109
|
+
/* Banners (Warm Dark) */
|
|
110
|
+
--banner-info: oklch(0.22 0.04 230);
|
|
111
|
+
--banner-info-foreground: oklch(0.88 0.05 230);
|
|
112
|
+
--banner-info-border: oklch(0.48 0.16 235);
|
|
113
|
+
--banner-note: oklch(0.22 0.04 155);
|
|
114
|
+
--banner-note-foreground: oklch(0.88 0.06 155);
|
|
115
|
+
--banner-note-border: oklch(0.44 0.1 155);
|
|
116
|
+
--banner-warning: oklch(0.26 0.06 70);
|
|
117
|
+
--banner-warning-foreground: oklch(0.92 0.1 80);
|
|
118
|
+
--banner-warning-border: oklch(0.65 0.2 75);
|
|
119
|
+
--banner-alert: oklch(0.23 0.05 25);
|
|
120
|
+
--banner-alert-foreground: oklch(0.9 0.06 25);
|
|
121
|
+
--banner-alert-border: oklch(0.44 0.14 25);
|
|
122
|
+
|
|
123
|
+
/* Interactive Elements (Warm Dark) */
|
|
124
|
+
--badge-success: oklch(0.44 0.12 150);
|
|
125
|
+
--badge-success-foreground: oklch(0.93 0.01 85);
|
|
126
|
+
--checkbox-checked: oklch(0.86 0.05 85);
|
|
127
|
+
--checkbox-checked-foreground: oklch(0.14 0.01 80);
|
|
128
|
+
--checkbox-unchecked-bg: oklch(0.22 0.01 80);
|
|
129
|
+
--checkbox-unchecked-border: oklch(0.35 0.01 80);
|
|
130
|
+
}
|
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
/* --- Light Theme (Metallic & Industrial - Brushed Steel) --- */
|
|
3
|
+
--background: oklch(0.95 0.005 250);
|
|
4
|
+
--foreground: oklch(0.2 0.02 250);
|
|
5
|
+
|
|
6
|
+
/* Surfaces - Aluminum Finish */
|
|
7
|
+
--card: oklch(0.98 0.005 250 / 0.85);
|
|
8
|
+
--card-foreground: oklch(0.2 0.02 250);
|
|
9
|
+
|
|
10
|
+
--popover: oklch(1 0 0);
|
|
11
|
+
--popover-foreground: oklch(0.2 0.02 250);
|
|
12
|
+
|
|
13
|
+
/* Primary: Industrial Blue */
|
|
14
|
+
--primary: oklch(0.3 0.05 250);
|
|
15
|
+
--primary-foreground: oklch(0.98 0.005 250);
|
|
16
|
+
|
|
17
|
+
/* Button/Surface Colors: Silver */
|
|
18
|
+
--secondary: oklch(0.97 0.005 250);
|
|
19
|
+
--secondary-foreground: oklch(0.3 0.05 250);
|
|
20
|
+
|
|
21
|
+
--muted: oklch(0.93 0.005 250);
|
|
22
|
+
--muted-foreground: oklch(0.5 0.02 250);
|
|
23
|
+
|
|
24
|
+
--accent: oklch(0.91 0.008 250);
|
|
25
|
+
--accent-foreground: oklch(0.3 0.05 250);
|
|
26
|
+
|
|
27
|
+
--destructive: oklch(0.55 0.15 25);
|
|
28
|
+
--destructive-foreground: oklch(1 0 0);
|
|
29
|
+
|
|
30
|
+
--border: oklch(0.88 0.005 250);
|
|
31
|
+
--input: oklch(0.88 0.005 250);
|
|
32
|
+
--ring: oklch(0.3 0.05 250 / 0.15);
|
|
33
|
+
|
|
34
|
+
--radius: 0.25rem; /* Sharper for robotic feel */
|
|
35
|
+
|
|
36
|
+
/* Sidebar (Cold Slate) */
|
|
37
|
+
--sidebar: oklch(0.97 0.005 250);
|
|
38
|
+
--sidebar-foreground: oklch(0.25 0.02 250);
|
|
39
|
+
--sidebar-primary: oklch(0.3 0.05 250);
|
|
40
|
+
--sidebar-primary-foreground: oklch(0.98 0.005 250);
|
|
41
|
+
--sidebar-accent: oklch(0.93 0.008 250);
|
|
42
|
+
--sidebar-accent-foreground: oklch(0.25 0.02 250);
|
|
43
|
+
--sidebar-border: oklch(0.9 0.005 250);
|
|
44
|
+
|
|
45
|
+
/* Banners (Metallic & Industrial) */
|
|
46
|
+
--banner-info: oklch(0.94 0.02 245);
|
|
47
|
+
--banner-info-foreground: oklch(0.24 0.09 245);
|
|
48
|
+
--banner-info-border: oklch(0.52 0.18 245);
|
|
49
|
+
--banner-note: oklch(0.94 0.02 162);
|
|
50
|
+
--banner-note-foreground: oklch(0.24 0.1 162);
|
|
51
|
+
--banner-note-border: oklch(0.48 0.16 162);
|
|
52
|
+
--banner-warning: oklch(0.95 0.04 78);
|
|
53
|
+
--banner-warning-foreground: oklch(0.34 0.13 62);
|
|
54
|
+
--banner-warning-border: oklch(0.62 0.18 72);
|
|
55
|
+
--banner-alert: oklch(0.95 0.03 22);
|
|
56
|
+
--banner-alert-foreground: oklch(0.34 0.14 22);
|
|
57
|
+
--banner-alert-border: oklch(0.52 0.2 22);
|
|
58
|
+
|
|
59
|
+
/* Interactive Elements */
|
|
60
|
+
--badge-success: oklch(0.35 0.1 160);
|
|
61
|
+
--badge-success-foreground: oklch(0.98 0.01 160);
|
|
62
|
+
--checkbox-checked: oklch(0.3 0.05 250);
|
|
63
|
+
--checkbox-checked-foreground: oklch(1 0 0);
|
|
64
|
+
--checkbox-unchecked-bg: oklch(1 0 0);
|
|
65
|
+
--checkbox-unchecked-border: oklch(0.85 0.01 250);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.dark {
|
|
69
|
+
/* --- Dark Theme (Modern Slate & Glow) --- */
|
|
70
|
+
--background: oklch(0.18 0.015 260);
|
|
71
|
+
--foreground: oklch(0.985 0 0);
|
|
72
|
+
|
|
73
|
+
/* Card Elevation: Brighter than background */
|
|
74
|
+
--card: oklch(0.23 0.02 260 / 0.75);
|
|
75
|
+
--card-foreground: oklch(0.985 0 0);
|
|
76
|
+
|
|
77
|
+
--popover: oklch(0.21 0.015 260);
|
|
78
|
+
--popover-foreground: oklch(0.985 0 0);
|
|
79
|
+
|
|
80
|
+
/* Primary: Electric Cyan Glow */
|
|
81
|
+
--primary: oklch(0.9 0.1 220);
|
|
82
|
+
--primary-foreground: oklch(0.18 0.015 260);
|
|
83
|
+
|
|
84
|
+
--secondary: oklch(0.28 0.02 260);
|
|
85
|
+
--secondary-foreground: oklch(0.9 0.1 220);
|
|
86
|
+
|
|
87
|
+
--muted: oklch(0.28 0.02 260);
|
|
88
|
+
--muted-foreground: oklch(0.705 0.015 260);
|
|
89
|
+
|
|
90
|
+
--accent: oklch(0.28 0.02 260);
|
|
91
|
+
--accent-foreground: oklch(0.9 0.1 220);
|
|
92
|
+
|
|
93
|
+
--destructive: oklch(0.45 0.15 25);
|
|
94
|
+
--destructive-foreground: oklch(0.985 0 0);
|
|
95
|
+
|
|
96
|
+
--border: oklch(0.32 0.02 260);
|
|
97
|
+
--input: oklch(0.32 0.02 260);
|
|
98
|
+
--ring: oklch(0.9 0.1 220 / 0.3);
|
|
99
|
+
|
|
100
|
+
/* Sidebar (Dark) */
|
|
101
|
+
--sidebar: oklch(0.21 0.015 260);
|
|
102
|
+
--sidebar-foreground: oklch(0.985 0 0);
|
|
103
|
+
--sidebar-primary: oklch(0.9 0.1 220);
|
|
104
|
+
--sidebar-primary-foreground: oklch(0.18 0.015 260);
|
|
105
|
+
--sidebar-accent: oklch(0.28 0.02 260);
|
|
106
|
+
--sidebar-accent-foreground: oklch(0.985 0 0);
|
|
107
|
+
--sidebar-border: oklch(0.32 0.02 260);
|
|
108
|
+
|
|
109
|
+
/* Banners (Dark - Desaturated) */
|
|
110
|
+
--banner-info: oklch(0.274 0.079 260);
|
|
111
|
+
--banner-info-foreground: oklch(0.925 0.033 260);
|
|
112
|
+
--banner-info-border: oklch(0.488 0.2 260);
|
|
113
|
+
--banner-note: oklch(0.266 0.065 152);
|
|
114
|
+
--banner-note-foreground: oklch(0.962 0.044 156);
|
|
115
|
+
--banner-note-border: oklch(0.45 0.1 152);
|
|
116
|
+
--banner-warning: oklch(0.55 0.22 100);
|
|
117
|
+
--banner-warning-foreground: oklch(0.99 0.15 102);
|
|
118
|
+
--banner-warning-border: oklch(0.75 0.25 100);
|
|
119
|
+
--banner-alert: oklch(0.293 0.084 27);
|
|
120
|
+
--banner-alert-foreground: oklch(0.969 0.071 27);
|
|
121
|
+
--banner-alert-border: oklch(0.45 0.12 27);
|
|
122
|
+
|
|
123
|
+
/* Interactive Elements (Dark) */
|
|
124
|
+
--badge-success: oklch(0.48 0.15 150);
|
|
125
|
+
--badge-success-foreground: oklch(1 0 0);
|
|
126
|
+
--checkbox-checked: oklch(0.9 0.1 220);
|
|
127
|
+
--checkbox-checked-foreground: oklch(0.18 0.015 260);
|
|
128
|
+
--checkbox-unchecked-bg: oklch(0.25 0.01 260);
|
|
129
|
+
--checkbox-unchecked-border: oklch(0.4 0.01 260);
|
|
130
|
+
}
|