@abumble/design-system 0.0.35 → 0.0.38

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (44) hide show
  1. package/dist/components/BackLink/BackLink.d.ts.map +1 -1
  2. package/dist/components/Banner/Banner.d.ts +9 -11
  3. package/dist/components/Banner/Banner.d.ts.map +1 -1
  4. package/dist/components/Banner/bannerType.d.ts +9 -0
  5. package/dist/components/Banner/bannerType.d.ts.map +1 -0
  6. package/dist/components/Banner/index.d.ts +2 -1
  7. package/dist/components/Banner/index.d.ts.map +1 -1
  8. package/dist/components/Banner.js +35 -25
  9. package/dist/components/Banner.js.map +1 -1
  10. package/dist/components/BannerHeader.js +1 -1
  11. package/dist/components/Carousel/Carousel.d.ts.map +1 -1
  12. package/dist/components/Carousel.js +36 -36
  13. package/dist/components/Carousel.js.map +1 -1
  14. package/dist/components/Dialog.js +1 -1
  15. package/dist/components/PageHeader.js +1 -1
  16. package/dist/components/Sheet.js +1 -1
  17. package/dist/components/Sidebar/Sidebar.d.ts +32 -32
  18. package/dist/components/Sidebar/Sidebar.d.ts.map +1 -1
  19. package/dist/components/Sidebar.js +109 -92
  20. package/dist/components/Sidebar.js.map +1 -1
  21. package/dist/components/Tooltip/Tooltip.d.ts.map +1 -1
  22. package/dist/components/Tooltip.js +1 -1
  23. package/dist/components/UnderConstruction.js +1 -1
  24. package/dist/hooks/use-mobile.d.ts.map +1 -1
  25. package/dist/main.d.ts +1 -0
  26. package/dist/main.d.ts.map +1 -1
  27. package/dist/shared/BackLink.js +25 -19
  28. package/dist/shared/BackLink.js.map +1 -1
  29. package/dist/shared/Dialog.js +2 -2
  30. package/dist/shared/Empty.js +1 -1
  31. package/dist/shared/Empty.js.map +1 -1
  32. package/dist/shared/PageHeader.js +2 -2
  33. package/dist/shared/Sheet.js +11 -11
  34. package/dist/shared/Sheet.js.map +1 -1
  35. package/dist/shared/Skeleton.js +7 -7
  36. package/dist/shared/Skeleton.js.map +1 -1
  37. package/dist/shared/Tooltip.js +12 -12
  38. package/dist/shared/Tooltip.js.map +1 -1
  39. package/dist/shared/use-mobile.js +6 -4
  40. package/dist/shared/use-mobile.js.map +1 -1
  41. package/package.json +14 -11
  42. package/src/styles.css +14 -152
  43. package/src/themes/linen.css +261 -0
  44. package/src/themes/steel.css +261 -0
package/src/themes/steel.css ADDED
@@ -0,0 +1,261 @@
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
+ [data-theme="steel"] {
69
+ /* --- Light Theme (Metallic & Industrial - Brushed Steel) --- */
70
+ --background: oklch(0.95 0.005 250);
71
+ --foreground: oklch(0.2 0.02 250);
72
+
73
+ /* Surfaces - Aluminum Finish */
74
+ --card: oklch(0.98 0.005 250 / 0.85);
75
+ --card-foreground: oklch(0.2 0.02 250);
76
+
77
+ --popover: oklch(1 0 0);
78
+ --popover-foreground: oklch(0.2 0.02 250);
79
+
80
+ /* Primary: Industrial Blue */
81
+ --primary: oklch(0.3 0.05 250);
82
+ --primary-foreground: oklch(0.98 0.005 250);
83
+
84
+ /* Button/Surface Colors: Silver */
85
+ --secondary: oklch(0.97 0.005 250);
86
+ --secondary-foreground: oklch(0.3 0.05 250);
87
+
88
+ --muted: oklch(0.93 0.005 250);
89
+ --muted-foreground: oklch(0.5 0.02 250);
90
+
91
+ --accent: oklch(0.91 0.008 250);
92
+ --accent-foreground: oklch(0.3 0.05 250);
93
+
94
+ --destructive: oklch(0.55 0.15 25);
95
+ --destructive-foreground: oklch(1 0 0);
96
+
97
+ --border: oklch(0.88 0.005 250);
98
+ --input: oklch(0.88 0.005 250);
99
+ --ring: oklch(0.3 0.05 250 / 0.15);
100
+
101
+ --radius: 0.25rem; /* Sharper for robotic feel */
102
+
103
+ /* Sidebar (Cold Slate) */
104
+ --sidebar: oklch(0.97 0.005 250);
105
+ --sidebar-foreground: oklch(0.25 0.02 250);
106
+ --sidebar-primary: oklch(0.3 0.05 250);
107
+ --sidebar-primary-foreground: oklch(0.98 0.005 250);
108
+ --sidebar-accent: oklch(0.93 0.008 250);
109
+ --sidebar-accent-foreground: oklch(0.25 0.02 250);
110
+ --sidebar-border: oklch(0.9 0.005 250);
111
+
112
+ /* Banners (Metallic & Industrial) */
113
+ --banner-info: oklch(0.94 0.02 245);
114
+ --banner-info-foreground: oklch(0.24 0.09 245);
115
+ --banner-info-border: oklch(0.52 0.18 245);
116
+ --banner-note: oklch(0.94 0.02 162);
117
+ --banner-note-foreground: oklch(0.24 0.1 162);
118
+ --banner-note-border: oklch(0.48 0.16 162);
119
+ --banner-warning: oklch(0.95 0.04 78);
120
+ --banner-warning-foreground: oklch(0.34 0.13 62);
121
+ --banner-warning-border: oklch(0.62 0.18 72);
122
+ --banner-alert: oklch(0.95 0.03 22);
123
+ --banner-alert-foreground: oklch(0.34 0.14 22);
124
+ --banner-alert-border: oklch(0.52 0.2 22);
125
+
126
+ /* Interactive Elements */
127
+ --badge-success: oklch(0.35 0.1 160);
128
+ --badge-success-foreground: oklch(0.98 0.01 160);
129
+ --checkbox-checked: oklch(0.3 0.05 250);
130
+ --checkbox-checked-foreground: oklch(1 0 0);
131
+ --checkbox-unchecked-bg: oklch(1 0 0);
132
+ --checkbox-unchecked-border: oklch(0.85 0.01 250);
133
+ }
134
+
135
+ .dark {
136
+ /* --- Dark Theme (Modern Slate & Glow) --- */
137
+ --background: oklch(0.18 0.015 260);
138
+ --foreground: oklch(0.985 0 0);
139
+
140
+ /* Card Elevation: Brighter than background */
141
+ --card: oklch(0.23 0.02 260 / 0.75);
142
+ --card-foreground: oklch(0.985 0 0);
143
+
144
+ --popover: oklch(0.21 0.015 260);
145
+ --popover-foreground: oklch(0.985 0 0);
146
+
147
+ /* Primary: Electric Cyan Glow */
148
+ --primary: oklch(0.9 0.1 220);
149
+ --primary-foreground: oklch(0.18 0.015 260);
150
+
151
+ --secondary: oklch(0.28 0.02 260);
152
+ --secondary-foreground: oklch(0.9 0.1 220);
153
+
154
+ --muted: oklch(0.28 0.02 260);
155
+ --muted-foreground: oklch(0.705 0.015 260);
156
+
157
+ --accent: oklch(0.28 0.02 260);
158
+ --accent-foreground: oklch(0.9 0.1 220);
159
+
160
+ --destructive: oklch(0.45 0.15 25);
161
+ --destructive-foreground: oklch(0.985 0 0);
162
+
163
+ --border: oklch(0.32 0.02 260);
164
+ --input: oklch(0.32 0.02 260);
165
+ --ring: oklch(0.9 0.1 220 / 0.3);
166
+
167
+ /* Sidebar (Dark) */
168
+ --sidebar: oklch(0.21 0.015 260);
169
+ --sidebar-foreground: oklch(0.985 0 0);
170
+ --sidebar-primary: oklch(0.9 0.1 220);
171
+ --sidebar-primary-foreground: oklch(0.18 0.015 260);
172
+ --sidebar-accent: oklch(0.28 0.02 260);
173
+ --sidebar-accent-foreground: oklch(0.985 0 0);
174
+ --sidebar-border: oklch(0.32 0.02 260);
175
+
176
+ /* Banners (Dark - Desaturated) */
177
+ --banner-info: oklch(0.274 0.079 260);
178
+ --banner-info-foreground: oklch(0.925 0.033 260);
179
+ --banner-info-border: oklch(0.488 0.2 260);
180
+ --banner-note: oklch(0.266 0.065 152);
181
+ --banner-note-foreground: oklch(0.962 0.044 156);
182
+ --banner-note-border: oklch(0.45 0.1 152);
183
+ --banner-warning: oklch(0.55 0.22 100);
184
+ --banner-warning-foreground: oklch(0.99 0.15 102);
185
+ --banner-warning-border: oklch(0.75 0.25 100);
186
+ --banner-alert: oklch(0.293 0.084 27);
187
+ --banner-alert-foreground: oklch(0.969 0.071 27);
188
+ --banner-alert-border: oklch(0.45 0.12 27);
189
+
190
+ /* Interactive Elements (Dark) */
191
+ --badge-success: oklch(0.48 0.15 150);
192
+ --badge-success-foreground: oklch(1 0 0);
193
+ --checkbox-checked: oklch(0.9 0.1 220);
194
+ --checkbox-checked-foreground: oklch(0.18 0.015 260);
195
+ --checkbox-unchecked-bg: oklch(0.25 0.01 260);
196
+ --checkbox-unchecked-border: oklch(0.4 0.01 260);
197
+ }
198
+
199
+ [data-theme="steel"].dark {
200
+ /* --- Dark Theme (Modern Slate & Glow) --- */
201
+ --background: oklch(0.18 0.015 260);
202
+ --foreground: oklch(0.985 0 0);
203
+
204
+ /* Card Elevation: Brighter than background */
205
+ --card: oklch(0.23 0.02 260 / 0.75);
206
+ --card-foreground: oklch(0.985 0 0);
207
+
208
+ --popover: oklch(0.21 0.015 260);
209
+ --popover-foreground: oklch(0.985 0 0);
210
+
211
+ /* Primary: Electric Cyan Glow */
212
+ --primary: oklch(0.9 0.1 220);
213
+ --primary-foreground: oklch(0.18 0.015 260);
214
+
215
+ --secondary: oklch(0.28 0.02 260);
216
+ --secondary-foreground: oklch(0.9 0.1 220);
217
+
218
+ --muted: oklch(0.28 0.02 260);
219
+ --muted-foreground: oklch(0.705 0.015 260);
220
+
221
+ --accent: oklch(0.28 0.02 260);
222
+ --accent-foreground: oklch(0.9 0.1 220);
223
+
224
+ --destructive: oklch(0.45 0.15 25);
225
+ --destructive-foreground: oklch(0.985 0 0);
226
+
227
+ --border: oklch(0.32 0.02 260);
228
+ --input: oklch(0.32 0.02 260);
229
+ --ring: oklch(0.9 0.1 220 / 0.3);
230
+
231
+ /* Sidebar (Dark) */
232
+ --sidebar: oklch(0.21 0.015 260);
233
+ --sidebar-foreground: oklch(0.985 0 0);
234
+ --sidebar-primary: oklch(0.9 0.1 220);
235
+ --sidebar-primary-foreground: oklch(0.18 0.015 260);
236
+ --sidebar-accent: oklch(0.28 0.02 260);
237
+ --sidebar-accent-foreground: oklch(0.985 0 0);
238
+ --sidebar-border: oklch(0.32 0.02 260);
239
+
240
+ /* Banners (Dark - Desaturated) */
241
+ --banner-info: oklch(0.274 0.079 260);
242
+ --banner-info-foreground: oklch(0.925 0.033 260);
243
+ --banner-info-border: oklch(0.488 0.2 260);
244
+ --banner-note: oklch(0.266 0.065 152);
245
+ --banner-note-foreground: oklch(0.962 0.044 156);
246
+ --banner-note-border: oklch(0.45 0.1 152);
247
+ --banner-warning: oklch(0.55 0.22 100);
248
+ --banner-warning-foreground: oklch(0.99 0.15 102);
249
+ --banner-warning-border: oklch(0.75 0.25 100);
250
+ --banner-alert: oklch(0.293 0.084 27);
251
+ --banner-alert-foreground: oklch(0.969 0.071 27);
252
+ --banner-alert-border: oklch(0.45 0.12 27);
253
+
254
+ /* Interactive Elements (Dark) */
255
+ --badge-success: oklch(0.48 0.15 150);
256
+ --badge-success-foreground: oklch(1 0 0);
257
+ --checkbox-checked: oklch(0.9 0.1 220);
258
+ --checkbox-checked-foreground: oklch(0.18 0.015 260);
259
+ --checkbox-unchecked-bg: oklch(0.25 0.01 260);
260
+ --checkbox-unchecked-border: oklch(0.4 0.01 260);
261
+ }