@abumble/design-system 0.0.34 → 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 -147
- 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,136 +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 / 0.75);
|
|
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 / 0.75);
|
|
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-border: oklch(0.32 0.02 260);
|
|
268
|
-
|
|
269
|
-
/* Banners (Dark - Desaturated) */
|
|
270
|
-
--banner-info: oklch(0.274 0.079 260);
|
|
271
|
-
--banner-info-foreground: oklch(0.925 0.033 260);
|
|
272
|
-
--banner-info-border: oklch(0.488 0.2 260);
|
|
273
|
-
--banner-note: oklch(0.266 0.065 152);
|
|
274
|
-
--banner-note-foreground: oklch(0.962 0.044 156);
|
|
275
|
-
--banner-warning: oklch(0.304 0.063 73);
|
|
276
|
-
--banner-warning-foreground: oklch(0.969 0.071 103);
|
|
277
|
-
--banner-alert: oklch(0.293 0.084 27);
|
|
278
|
-
--banner-alert-foreground: oklch(0.969 0.071 27);
|
|
279
|
-
|
|
280
|
-
/* Interactive Elements (Dark) */
|
|
281
|
-
--badge-success: oklch(0.48 0.15 150);
|
|
282
|
-
--badge-success-foreground: oklch(1 0 0);
|
|
283
|
-
--checkbox-checked: oklch(0.9 0.1 220);
|
|
284
|
-
--checkbox-checked-foreground: oklch(0.18 0.015 260);
|
|
285
|
-
--checkbox-unchecked-bg: oklch(0.25 0.01 260);
|
|
286
|
-
--checkbox-unchecked-border: oklch(0.4 0.01 260);
|
|
287
|
-
}
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
/* 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 */
|
|
291
158
|
[data-banner-type] {
|
|
292
159
|
border-left-width: 4px;
|
|
293
160
|
border-left-style: solid;
|
|
@@ -295,25 +162,25 @@ code {
|
|
|
295
162
|
padding: 0.75rem;
|
|
296
163
|
}
|
|
297
164
|
|
|
298
|
-
[data-banner-type=
|
|
165
|
+
[data-banner-type='info'] {
|
|
299
166
|
background: var(--banner-info);
|
|
300
167
|
color: var(--banner-info-foreground);
|
|
301
168
|
border-left-color: var(--banner-info-border);
|
|
302
169
|
}
|
|
303
170
|
|
|
304
|
-
[data-banner-type=
|
|
171
|
+
[data-banner-type='note'] {
|
|
305
172
|
background: var(--banner-note);
|
|
306
173
|
color: var(--banner-note-foreground);
|
|
307
174
|
border-left-color: var(--banner-note-border);
|
|
308
175
|
}
|
|
309
176
|
|
|
310
|
-
[data-banner-type=
|
|
177
|
+
[data-banner-type='warning'] {
|
|
311
178
|
background: var(--banner-warning);
|
|
312
179
|
color: var(--banner-warning-foreground);
|
|
313
180
|
border-left-color: var(--banner-warning-border);
|
|
314
181
|
}
|
|
315
182
|
|
|
316
|
-
[data-banner-type=
|
|
183
|
+
[data-banner-type='alert'] {
|
|
317
184
|
background: var(--banner-alert);
|
|
318
185
|
color: var(--banner-alert-foreground);
|
|
319
186
|
border-left-color: var(--banner-alert-border);
|
|
@@ -366,4 +233,4 @@ code {
|
|
|
366
233
|
body {
|
|
367
234
|
@apply bg-background text-foreground;
|
|
368
235
|
}
|
|
369
|
-
}
|
|
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
|
+
}
|