@elsapiens/styles 0.1.0 → 0.1.5
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/app.css +503 -0
- package/dist/components.css +40 -37
- package/dist/index.css +31 -2
- package/dist/variables.css +3 -0
- package/package.json +5 -1
- package/tailwind-preset.js +70 -41
package/dist/app.css
ADDED
|
@@ -0,0 +1,503 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* elSapiens SDK - Application Styles
|
|
3
|
+
*
|
|
4
|
+
* This file provides the complete styling setup for elSapiens applications.
|
|
5
|
+
* Import this in your app's main CSS file before Tailwind directives.
|
|
6
|
+
*
|
|
7
|
+
* Usage:
|
|
8
|
+
* @import '@elsapiens/styles/app';
|
|
9
|
+
* @tailwind base;
|
|
10
|
+
* @tailwind components;
|
|
11
|
+
* @tailwind utilities;
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
/* Google Fonts - Inter for UI text, JetBrains Mono for code */
|
|
15
|
+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
|
|
16
|
+
|
|
17
|
+
/* Import SDK core styles - using package paths for compatibility when installed as dependency */
|
|
18
|
+
@import '@elsapiens/styles/variables';
|
|
19
|
+
@import '@elsapiens/styles/color-schemes';
|
|
20
|
+
@import '@elsapiens/styles/backgrounds';
|
|
21
|
+
|
|
22
|
+
/**
|
|
23
|
+
* Semantic Colors - Light Mode
|
|
24
|
+
* Maps semantic color tokens to the active color scheme (wisteria by default)
|
|
25
|
+
*/
|
|
26
|
+
@layer base {
|
|
27
|
+
:root {
|
|
28
|
+
/* Background and Foreground */
|
|
29
|
+
--background: 220 30% 98%;
|
|
30
|
+
--foreground: var(--wisteria-900);
|
|
31
|
+
--foreground-secondary: var(--wisteria-500);
|
|
32
|
+
|
|
33
|
+
/* Card */
|
|
34
|
+
--card: 0 0% 100%;
|
|
35
|
+
--card-foreground: var(--wisteria-900);
|
|
36
|
+
|
|
37
|
+
/* Popover */
|
|
38
|
+
--popover: 0 0% 100%;
|
|
39
|
+
--popover-foreground: var(--wisteria-900);
|
|
40
|
+
|
|
41
|
+
/* Primary */
|
|
42
|
+
--primary: var(--wisteria-500);
|
|
43
|
+
--primary-foreground: 0 0% 100%;
|
|
44
|
+
|
|
45
|
+
/* Secondary */
|
|
46
|
+
--secondary: var(--wisteria-100);
|
|
47
|
+
--secondary-foreground: var(--wisteria-800);
|
|
48
|
+
|
|
49
|
+
/* Muted */
|
|
50
|
+
--muted: var(--wisteria-100);
|
|
51
|
+
--muted-foreground: var(--wisteria-400);
|
|
52
|
+
|
|
53
|
+
/* Accent */
|
|
54
|
+
--accent: var(--wisteria-100);
|
|
55
|
+
--accent-foreground: var(--wisteria-800);
|
|
56
|
+
|
|
57
|
+
/* Destructive */
|
|
58
|
+
--destructive: 0 84% 60%;
|
|
59
|
+
--destructive-foreground: 0 0% 100%;
|
|
60
|
+
|
|
61
|
+
/* Border, Input, Ring */
|
|
62
|
+
--border: var(--wisteria-200);
|
|
63
|
+
--input: var(--wisteria-200);
|
|
64
|
+
--ring: var(--wisteria-500);
|
|
65
|
+
|
|
66
|
+
/* Border Radius */
|
|
67
|
+
--radius: 0.5rem;
|
|
68
|
+
|
|
69
|
+
/* Status colors */
|
|
70
|
+
--success: 142 71% 45%;
|
|
71
|
+
--warning: 38 92% 50%;
|
|
72
|
+
--error: 0 84% 60%;
|
|
73
|
+
--info: var(--wisteria-500);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
/**
|
|
77
|
+
* Semantic Colors - Dark Mode
|
|
78
|
+
*/
|
|
79
|
+
.dark {
|
|
80
|
+
--background: var(--wisteria-950);
|
|
81
|
+
--foreground: var(--wisteria-50);
|
|
82
|
+
--foreground-secondary: var(--wisteria-400);
|
|
83
|
+
|
|
84
|
+
--card: var(--wisteria-900);
|
|
85
|
+
--card-foreground: var(--wisteria-50);
|
|
86
|
+
|
|
87
|
+
--popover: var(--wisteria-900);
|
|
88
|
+
--popover-foreground: var(--wisteria-50);
|
|
89
|
+
|
|
90
|
+
--primary: var(--wisteria-400);
|
|
91
|
+
--primary-foreground: var(--wisteria-950);
|
|
92
|
+
|
|
93
|
+
--secondary: var(--wisteria-800);
|
|
94
|
+
--secondary-foreground: var(--wisteria-100);
|
|
95
|
+
|
|
96
|
+
--muted: var(--wisteria-800);
|
|
97
|
+
--muted-foreground: var(--wisteria-400);
|
|
98
|
+
|
|
99
|
+
--accent: var(--wisteria-800);
|
|
100
|
+
--accent-foreground: var(--wisteria-100);
|
|
101
|
+
|
|
102
|
+
--destructive: 0 62% 50%;
|
|
103
|
+
--destructive-foreground: 0 0% 100%;
|
|
104
|
+
|
|
105
|
+
--border: var(--wisteria-700);
|
|
106
|
+
--input: var(--wisteria-700);
|
|
107
|
+
--ring: var(--wisteria-400);
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
/**
|
|
112
|
+
* Application Base Styles
|
|
113
|
+
*/
|
|
114
|
+
@layer base {
|
|
115
|
+
* {
|
|
116
|
+
@apply border-border;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
html {
|
|
120
|
+
font-size: 16px;
|
|
121
|
+
-webkit-font-smoothing: antialiased;
|
|
122
|
+
-moz-osx-font-smoothing: grayscale;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
body {
|
|
126
|
+
@apply bg-background text-foreground;
|
|
127
|
+
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
|
128
|
+
line-height: 1.5;
|
|
129
|
+
height: 100vh;
|
|
130
|
+
overflow: hidden;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
#root {
|
|
134
|
+
height: 100%;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
/* Focus styles for accessibility */
|
|
138
|
+
:focus-visible {
|
|
139
|
+
@apply outline-none ring-2 ring-ring ring-offset-2 ring-offset-background;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
/* Monospace for numbers and code */
|
|
143
|
+
code, kbd, pre, samp, .font-mono {
|
|
144
|
+
font-family: 'JetBrains Mono', ui-monospace, monospace;
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
/**
|
|
149
|
+
* Application Component Styles
|
|
150
|
+
* These are convenience classes that use the wisteria color scheme directly
|
|
151
|
+
*/
|
|
152
|
+
@layer components {
|
|
153
|
+
/* Primary Button */
|
|
154
|
+
.btn-primary {
|
|
155
|
+
@apply bg-wisteria-500 text-white px-3 py-2 rounded-md font-medium
|
|
156
|
+
hover:bg-wisteria-600 active:bg-wisteria-700
|
|
157
|
+
focus-visible:ring-2 focus-visible:ring-wisteria-500 focus-visible:ring-offset-2
|
|
158
|
+
disabled:opacity-50 disabled:cursor-not-allowed
|
|
159
|
+
transition-colors duration-150;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
/* Secondary Button */
|
|
163
|
+
.btn-secondary {
|
|
164
|
+
@apply bg-wisteria-100 text-wisteria-800 px-3 py-2 rounded-md font-medium
|
|
165
|
+
hover:bg-wisteria-200 active:bg-wisteria-300
|
|
166
|
+
dark:bg-wisteria-800 dark:text-wisteria-100
|
|
167
|
+
dark:hover:bg-wisteria-700 dark:active:bg-wisteria-600
|
|
168
|
+
transition-colors duration-150;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
/* Ghost Button */
|
|
172
|
+
.btn-ghost {
|
|
173
|
+
@apply text-wisteria-600 px-3 py-2 rounded-md font-medium
|
|
174
|
+
hover:bg-wisteria-100 active:bg-wisteria-200
|
|
175
|
+
dark:text-wisteria-300 dark:hover:bg-wisteria-800
|
|
176
|
+
transition-colors duration-150;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
/* Card */
|
|
180
|
+
.card {
|
|
181
|
+
@apply bg-white dark:bg-wisteria-900 rounded-lg shadow-sm
|
|
182
|
+
border border-wisteria-200 dark:border-wisteria-700
|
|
183
|
+
overflow-hidden;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
/* Form Input */
|
|
187
|
+
.input {
|
|
188
|
+
@apply w-full px-3 py-2 rounded-md border border-wisteria-200
|
|
189
|
+
bg-white dark:bg-wisteria-900
|
|
190
|
+
text-wisteria-900 dark:text-wisteria-50
|
|
191
|
+
placeholder:text-wisteria-300 dark:placeholder:text-wisteria-500
|
|
192
|
+
focus:border-wisteria-500 focus:ring-1 focus:ring-wisteria-500
|
|
193
|
+
disabled:opacity-50 disabled:cursor-not-allowed
|
|
194
|
+
transition-colors duration-150;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
/* Label */
|
|
198
|
+
.label {
|
|
199
|
+
@apply block text-sm font-medium text-wisteria-800 dark:text-wisteria-200 mb-1;
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
/* Status Badges */
|
|
203
|
+
.badge {
|
|
204
|
+
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
.badge-draft {
|
|
208
|
+
@apply bg-wisteria-100 text-wisteria-700 dark:bg-wisteria-800 dark:text-wisteria-300;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
.badge-success {
|
|
212
|
+
@apply bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300;
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
.badge-warning {
|
|
216
|
+
@apply bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300;
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
.badge-error {
|
|
220
|
+
@apply bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300;
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
/* Skeleton */
|
|
224
|
+
.skeleton {
|
|
225
|
+
@apply bg-wisteria-200 dark:bg-wisteria-700 rounded animate-pulse;
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
/* Empty State */
|
|
229
|
+
.empty-state {
|
|
230
|
+
@apply flex flex-col items-center justify-center py-12 text-center;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
.empty-state-icon {
|
|
234
|
+
@apply w-16 h-16 text-wisteria-300 dark:text-wisteria-600 mb-4;
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
.empty-state-title {
|
|
238
|
+
@apply text-lg font-medium text-wisteria-700 dark:text-wisteria-300 mb-2;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
.empty-state-description {
|
|
242
|
+
@apply text-sm text-wisteria-500 dark:text-wisteria-400 max-w-sm;
|
|
243
|
+
}
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
/**
|
|
247
|
+
* Global Scrollbar Styling
|
|
248
|
+
* Thin scrollbar with theme-matching colors
|
|
249
|
+
*/
|
|
250
|
+
|
|
251
|
+
/* Firefox */
|
|
252
|
+
* {
|
|
253
|
+
scrollbar-width: thin;
|
|
254
|
+
scrollbar-color: hsl(var(--muted-foreground) / 0.4) transparent;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
.dark * {
|
|
258
|
+
scrollbar-color: hsl(var(--muted-foreground) / 0.5) transparent;
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
/* Chrome, Safari, Edge */
|
|
262
|
+
*::-webkit-scrollbar {
|
|
263
|
+
width: 6px;
|
|
264
|
+
height: 6px;
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
*::-webkit-scrollbar-track {
|
|
268
|
+
background: transparent;
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
*::-webkit-scrollbar-thumb {
|
|
272
|
+
background-color: hsl(var(--muted-foreground) / 0.3);
|
|
273
|
+
border-radius: 3px;
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
*::-webkit-scrollbar-thumb:hover {
|
|
277
|
+
background-color: hsl(var(--muted-foreground) / 0.5);
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
.dark *::-webkit-scrollbar-thumb {
|
|
281
|
+
background-color: hsl(var(--muted-foreground) / 0.4);
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
.dark *::-webkit-scrollbar-thumb:hover {
|
|
285
|
+
background-color: hsl(var(--muted-foreground) / 0.6);
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
*::-webkit-scrollbar-corner {
|
|
289
|
+
background: transparent;
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
/* Hide scrollbar but keep functionality */
|
|
293
|
+
@layer utilities {
|
|
294
|
+
.scrollbar-hide {
|
|
295
|
+
-ms-overflow-style: none;
|
|
296
|
+
scrollbar-width: none;
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
.scrollbar-hide::-webkit-scrollbar {
|
|
300
|
+
display: none;
|
|
301
|
+
}
|
|
302
|
+
}
|
|
303
|
+
|
|
304
|
+
/* Hide native scrollbar - for synced scroll containers (Summary, Table) */
|
|
305
|
+
.hide-native-scrollbar {
|
|
306
|
+
scrollbar-width: none !important;
|
|
307
|
+
-ms-overflow-style: none !important;
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
.hide-native-scrollbar::-webkit-scrollbar {
|
|
311
|
+
display: none !important;
|
|
312
|
+
width: 0 !important;
|
|
313
|
+
height: 0 !important;
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
/* Visible scrollbar for custom scrollbars */
|
|
317
|
+
.scrollbar-visible {
|
|
318
|
+
scrollbar-width: auto;
|
|
319
|
+
scrollbar-color: hsl(var(--border)) hsl(var(--muted) / 0.3);
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
.scrollbar-visible::-webkit-scrollbar {
|
|
323
|
+
width: 10px;
|
|
324
|
+
height: 10px;
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
.scrollbar-visible::-webkit-scrollbar-track {
|
|
328
|
+
background: hsl(var(--muted) / 0.3);
|
|
329
|
+
border-radius: 5px;
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
.scrollbar-visible::-webkit-scrollbar-thumb {
|
|
333
|
+
background-color: hsl(var(--border));
|
|
334
|
+
border-radius: 5px;
|
|
335
|
+
border: 2px solid hsl(var(--muted) / 0.3);
|
|
336
|
+
}
|
|
337
|
+
|
|
338
|
+
.scrollbar-visible::-webkit-scrollbar-thumb:hover {
|
|
339
|
+
background-color: hsl(var(--muted-foreground));
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
/**
|
|
343
|
+
* Adaptive Layout Spacing System
|
|
344
|
+
* Uses CSS variables that respond to data-spacing attribute on html element
|
|
345
|
+
*/
|
|
346
|
+
:root {
|
|
347
|
+
/* Default (normal) spacing values */
|
|
348
|
+
--el-layout-gap-xs: 0.25rem; /* 4px */
|
|
349
|
+
--el-layout-gap-sm: 0.5rem; /* 8px */
|
|
350
|
+
--el-layout-gap-md: 0.75rem; /* 12px */
|
|
351
|
+
--el-layout-gap-lg: 1rem; /* 16px */
|
|
352
|
+
--el-layout-gap-xl: 1.5rem; /* 24px */
|
|
353
|
+
--el-layout-gap-2xl: 2rem; /* 32px */
|
|
354
|
+
--el-field-grid-gap: 2.25rem; /* 36px - Between form fields in grid */
|
|
355
|
+
|
|
356
|
+
/* Component internal spacing */
|
|
357
|
+
--el-tabs-padding: 0.25rem; /* 4px - for switch/tabs pill container */
|
|
358
|
+
--el-tabs-gap: 0.25rem; /* 4px - gap between tabs/switches */
|
|
359
|
+
|
|
360
|
+
/* Layout dimensions */
|
|
361
|
+
--topbar-height: 48px;
|
|
362
|
+
--sidebar-width: 256px;
|
|
363
|
+
}
|
|
364
|
+
|
|
365
|
+
/* Compact spacing mode */
|
|
366
|
+
[data-spacing="compact"] {
|
|
367
|
+
--el-layout-gap-xs: 0.25rem;
|
|
368
|
+
--el-layout-gap-sm: 0.5rem;
|
|
369
|
+
--el-layout-gap-md: 0.75rem;
|
|
370
|
+
--el-layout-gap-lg: 1rem;
|
|
371
|
+
--el-layout-gap-xl: 1.5rem;
|
|
372
|
+
--el-layout-gap-2xl: 2rem;
|
|
373
|
+
--el-field-grid-gap: 1.5rem;
|
|
374
|
+
--el-tabs-padding: 0.25rem;
|
|
375
|
+
--el-tabs-gap: 0.25rem;
|
|
376
|
+
--topbar-height: 40px;
|
|
377
|
+
--sidebar-width: 200px;
|
|
378
|
+
}
|
|
379
|
+
|
|
380
|
+
/* Spacious spacing mode */
|
|
381
|
+
[data-spacing="spacious"] {
|
|
382
|
+
--el-layout-gap-xs: 0.5rem;
|
|
383
|
+
--el-layout-gap-sm: 0.75rem;
|
|
384
|
+
--el-layout-gap-md: 1rem;
|
|
385
|
+
--el-layout-gap-lg: 1.5rem;
|
|
386
|
+
--el-layout-gap-xl: 2rem;
|
|
387
|
+
--el-layout-gap-2xl: 3rem;
|
|
388
|
+
--el-field-grid-gap: 3rem;
|
|
389
|
+
--el-tabs-padding: 0.375rem;
|
|
390
|
+
--el-tabs-gap: 0.375rem;
|
|
391
|
+
--topbar-height: 56px;
|
|
392
|
+
--sidebar-width: 280px;
|
|
393
|
+
}
|
|
394
|
+
|
|
395
|
+
/**
|
|
396
|
+
* Gap utilities
|
|
397
|
+
*/
|
|
398
|
+
.el-gap-xs { gap: var(--el-layout-gap-xs); }
|
|
399
|
+
.el-gap-sm { gap: var(--el-layout-gap-sm); }
|
|
400
|
+
.el-gap-md { gap: var(--el-layout-gap-md); }
|
|
401
|
+
.el-gap-lg { gap: var(--el-layout-gap-lg); }
|
|
402
|
+
.el-gap-xl { gap: var(--el-layout-gap-xl); }
|
|
403
|
+
.el-gap-2xl { gap: var(--el-layout-gap-2xl); }
|
|
404
|
+
|
|
405
|
+
/**
|
|
406
|
+
* Padding utilities
|
|
407
|
+
*/
|
|
408
|
+
.el-p-xs { padding: var(--el-layout-gap-xs); }
|
|
409
|
+
.el-p-sm { padding: var(--el-layout-gap-sm); }
|
|
410
|
+
.el-p-md { padding: var(--el-layout-gap-md); }
|
|
411
|
+
.el-p-lg { padding: var(--el-layout-gap-lg); }
|
|
412
|
+
.el-p-xl { padding: var(--el-layout-gap-xl); }
|
|
413
|
+
.el-p-2xl { padding: var(--el-layout-gap-2xl); }
|
|
414
|
+
|
|
415
|
+
.el-px-xs { padding-left: var(--el-layout-gap-xs); padding-right: var(--el-layout-gap-xs); }
|
|
416
|
+
.el-px-sm { padding-left: var(--el-layout-gap-sm); padding-right: var(--el-layout-gap-sm); }
|
|
417
|
+
.el-px-md { padding-left: var(--el-layout-gap-md); padding-right: var(--el-layout-gap-md); }
|
|
418
|
+
.el-px-lg { padding-left: var(--el-layout-gap-lg); padding-right: var(--el-layout-gap-lg); }
|
|
419
|
+
.el-px-xl { padding-left: var(--el-layout-gap-xl); padding-right: var(--el-layout-gap-xl); }
|
|
420
|
+
.el-px-2xl { padding-left: var(--el-layout-gap-2xl); padding-right: var(--el-layout-gap-2xl); }
|
|
421
|
+
|
|
422
|
+
.el-py-xs { padding-top: var(--el-layout-gap-xs); padding-bottom: var(--el-layout-gap-xs); }
|
|
423
|
+
.el-py-sm { padding-top: var(--el-layout-gap-sm); padding-bottom: var(--el-layout-gap-sm); }
|
|
424
|
+
.el-py-md { padding-top: var(--el-layout-gap-md); padding-bottom: var(--el-layout-gap-md); }
|
|
425
|
+
.el-py-lg { padding-top: var(--el-layout-gap-lg); padding-bottom: var(--el-layout-gap-lg); }
|
|
426
|
+
.el-py-xl { padding-top: var(--el-layout-gap-xl); padding-bottom: var(--el-layout-gap-xl); }
|
|
427
|
+
.el-py-2xl { padding-top: var(--el-layout-gap-2xl); padding-bottom: var(--el-layout-gap-2xl); }
|
|
428
|
+
|
|
429
|
+
/**
|
|
430
|
+
* Space utilities (margin between children)
|
|
431
|
+
*/
|
|
432
|
+
.el-space-y-xs > * + * { margin-top: var(--el-layout-gap-xs); }
|
|
433
|
+
.el-space-y-sm > * + * { margin-top: var(--el-layout-gap-sm); }
|
|
434
|
+
.el-space-y-md > * + * { margin-top: var(--el-layout-gap-md); }
|
|
435
|
+
.el-space-y-lg > * + * { margin-top: var(--el-layout-gap-lg); }
|
|
436
|
+
.el-space-y-xl > * + * { margin-top: var(--el-layout-gap-xl); }
|
|
437
|
+
.el-space-y-2xl > * + * { margin-top: var(--el-layout-gap-2xl); }
|
|
438
|
+
|
|
439
|
+
.el-space-x-xs > * + * { margin-left: var(--el-layout-gap-xs); }
|
|
440
|
+
.el-space-x-sm > * + * { margin-left: var(--el-layout-gap-sm); }
|
|
441
|
+
.el-space-x-md > * + * { margin-left: var(--el-layout-gap-md); }
|
|
442
|
+
.el-space-x-lg > * + * { margin-left: var(--el-layout-gap-lg); }
|
|
443
|
+
.el-space-x-xl > * + * { margin-left: var(--el-layout-gap-xl); }
|
|
444
|
+
.el-space-x-2xl > * + * { margin-left: var(--el-layout-gap-2xl); }
|
|
445
|
+
|
|
446
|
+
/**
|
|
447
|
+
* Margin utilities
|
|
448
|
+
*/
|
|
449
|
+
.el-mt-xs { margin-top: var(--el-layout-gap-xs); }
|
|
450
|
+
.el-mt-sm { margin-top: var(--el-layout-gap-sm); }
|
|
451
|
+
.el-mt-md { margin-top: var(--el-layout-gap-md); }
|
|
452
|
+
.el-mt-lg { margin-top: var(--el-layout-gap-lg); }
|
|
453
|
+
.el-mt-xl { margin-top: var(--el-layout-gap-xl); }
|
|
454
|
+
.el-mt-2xl { margin-top: var(--el-layout-gap-2xl); }
|
|
455
|
+
|
|
456
|
+
.el-mb-xs { margin-bottom: var(--el-layout-gap-xs); }
|
|
457
|
+
.el-mb-sm { margin-bottom: var(--el-layout-gap-sm); }
|
|
458
|
+
.el-mb-md { margin-bottom: var(--el-layout-gap-md); }
|
|
459
|
+
.el-mb-lg { margin-bottom: var(--el-layout-gap-lg); }
|
|
460
|
+
.el-mb-xl { margin-bottom: var(--el-layout-gap-xl); }
|
|
461
|
+
.el-mb-2xl { margin-bottom: var(--el-layout-gap-2xl); }
|
|
462
|
+
|
|
463
|
+
/**
|
|
464
|
+
* Animations
|
|
465
|
+
*/
|
|
466
|
+
@keyframes slide-in {
|
|
467
|
+
from {
|
|
468
|
+
opacity: 0;
|
|
469
|
+
transform: translateX(100%);
|
|
470
|
+
}
|
|
471
|
+
to {
|
|
472
|
+
opacity: 1;
|
|
473
|
+
transform: translateX(0);
|
|
474
|
+
}
|
|
475
|
+
}
|
|
476
|
+
|
|
477
|
+
.animate-slide-in {
|
|
478
|
+
animation: slide-in 0.3s ease-out;
|
|
479
|
+
}
|
|
480
|
+
|
|
481
|
+
@keyframes fade-in {
|
|
482
|
+
from { opacity: 0; }
|
|
483
|
+
to { opacity: 1; }
|
|
484
|
+
}
|
|
485
|
+
|
|
486
|
+
.animate-fade-in {
|
|
487
|
+
animation: fade-in 0.2s ease-out;
|
|
488
|
+
}
|
|
489
|
+
|
|
490
|
+
@keyframes scale-in {
|
|
491
|
+
from {
|
|
492
|
+
opacity: 0;
|
|
493
|
+
transform: scale(0.95);
|
|
494
|
+
}
|
|
495
|
+
to {
|
|
496
|
+
opacity: 1;
|
|
497
|
+
transform: scale(1);
|
|
498
|
+
}
|
|
499
|
+
}
|
|
500
|
+
|
|
501
|
+
.animate-scale-in {
|
|
502
|
+
animation: scale-in 0.2s ease-out;
|
|
503
|
+
}
|
package/dist/components.css
CHANGED
|
@@ -401,24 +401,15 @@
|
|
|
401
401
|
inset-inline-end: 0;
|
|
402
402
|
display: flex;
|
|
403
403
|
align-items: center;
|
|
404
|
-
padding-inline-end:
|
|
405
|
-
}
|
|
406
|
-
|
|
407
|
-
/* Size variants for prefix/suffix */
|
|
408
|
-
.el-input-prefix-icon-sm {
|
|
409
|
-
padding-inline-start: 0;
|
|
410
|
-
}
|
|
411
|
-
|
|
412
|
-
.el-input-prefix-icon-lg {
|
|
413
|
-
padding-inline-start: 0;
|
|
404
|
+
padding-inline-end: 0;
|
|
414
405
|
}
|
|
415
406
|
|
|
416
407
|
.el-input-suffix-icon-sm {
|
|
417
|
-
padding-inline-end: var(--el-spacing-px-sm);
|
|
408
|
+
padding-inline-end: var(--el-spacing-px-sm, 0.5rem);
|
|
418
409
|
}
|
|
419
410
|
|
|
420
411
|
.el-input-suffix-icon-lg {
|
|
421
|
-
padding-inline-end: var(--el-spacing-px-lg);
|
|
412
|
+
padding-inline-end: var(--el-spacing-px-lg, 0.75rem);
|
|
422
413
|
}
|
|
423
414
|
|
|
424
415
|
/* Picker suffix icon - positioned at the extended edge of inputs with negative margins */
|
|
@@ -443,32 +434,33 @@
|
|
|
443
434
|
}
|
|
444
435
|
|
|
445
436
|
/* Input padding adjustments when using prefix/suffix icons */
|
|
437
|
+
/* Formula: icon-size + gap * 2 */
|
|
446
438
|
.el-input-has-prefix {
|
|
447
|
-
padding-inline-start: calc(var(--el-
|
|
439
|
+
padding-inline-start: calc(var(--el-icon-size-md, 1.25rem) + var(--el-spacing-px-md, 0.625rem) * 2);
|
|
448
440
|
}
|
|
449
441
|
|
|
450
442
|
.el-input-has-prefix-sm {
|
|
451
|
-
padding-inline-start: calc(var(--el-
|
|
443
|
+
padding-inline-start: calc(var(--el-icon-size-sm, 1rem) + var(--el-spacing-px-sm, 0.5rem) * 2);
|
|
452
444
|
}
|
|
453
445
|
|
|
454
446
|
.el-input-has-prefix-lg {
|
|
455
|
-
padding-inline-start: calc(var(--el-
|
|
447
|
+
padding-inline-start: calc(var(--el-icon-size-lg, 1.5rem) + var(--el-spacing-px-lg, 0.75rem) * 2);
|
|
456
448
|
}
|
|
457
449
|
|
|
458
450
|
.el-input-has-prefix-narrow {
|
|
459
|
-
padding-inline-start: calc(var(--el-spacing-px-md)
|
|
451
|
+
padding-inline-start: calc(0.75rem + var(--el-spacing-px-md, 0.625rem) * 2);
|
|
460
452
|
}
|
|
461
453
|
|
|
462
454
|
.el-input-has-suffix {
|
|
463
|
-
padding-inline-end: calc(var(--el-
|
|
455
|
+
padding-inline-end: calc(var(--el-icon-size-md, 1.25rem) + var(--el-spacing-px-md, 0.625rem) * 2);
|
|
464
456
|
}
|
|
465
457
|
|
|
466
458
|
.el-input-has-suffix-sm {
|
|
467
|
-
padding-inline-end: calc(var(--el-spacing-px-sm)
|
|
459
|
+
padding-inline-end: calc(var(--el-icon-size-sm, 1rem) + var(--el-spacing-px-sm, 0.5rem) * 2);
|
|
468
460
|
}
|
|
469
461
|
|
|
470
462
|
.el-input-has-suffix-lg {
|
|
471
|
-
padding-inline-end: calc(var(--el-
|
|
463
|
+
padding-inline-end: calc(var(--el-icon-size-lg, 1.5rem) + var(--el-spacing-px-lg, 0.75rem) * 2);
|
|
472
464
|
}
|
|
473
465
|
|
|
474
466
|
/* ============================================
|
|
@@ -622,15 +614,23 @@
|
|
|
622
614
|
.el-gap-field { gap: calc(var(--el-container-px, var(--el-spacing-px-md)) * 1.5); }
|
|
623
615
|
|
|
624
616
|
/* Buttons and inputs inside el-gap-field inside padding containers - extend to visual edge */
|
|
617
|
+
/* All inputs and buttons get negative margins for edge-to-edge layout */
|
|
625
618
|
[class*="el-p-"] .el-gap-field .el-btn,
|
|
626
619
|
[class*="el-p-"] .el-gap-field .el-input,
|
|
627
620
|
[class*="el-px-"] .el-gap-field .el-btn,
|
|
628
621
|
[class*="el-px-"] .el-gap-field .el-input {
|
|
629
|
-
padding-inline: calc(var(--el-container-px) * 0.5);
|
|
630
622
|
margin-inline: calc(var(--el-container-px) * -0.5);
|
|
631
623
|
}
|
|
632
624
|
|
|
633
|
-
/*
|
|
625
|
+
/* Padding override only for inputs WITHOUT prefix/suffix icons (they have their own padding) */
|
|
626
|
+
[class*="el-p-"] .el-gap-field .el-btn,
|
|
627
|
+
[class*="el-p-"] .el-gap-field .el-input:not(.el-input-has-prefix):not(.el-input-has-suffix):not(.el-input-has-prefix-sm):not(.el-input-has-prefix-lg):not(.el-input-has-suffix-sm):not(.el-input-has-suffix-lg):not(.el-input-has-prefix-narrow),
|
|
628
|
+
[class*="el-px-"] .el-gap-field .el-btn,
|
|
629
|
+
[class*="el-px-"] .el-gap-field .el-input:not(.el-input-has-prefix):not(.el-input-has-suffix):not(.el-input-has-prefix-sm):not(.el-input-has-prefix-lg):not(.el-input-has-suffix-sm):not(.el-input-has-suffix-lg):not(.el-input-has-prefix-narrow) {
|
|
630
|
+
padding-inline: calc(var(--el-container-px) * 0.5);
|
|
631
|
+
}
|
|
632
|
+
|
|
633
|
+
/* All inputs need width adjustment to override 100% from .el-input */
|
|
634
634
|
[class*="el-p-"] .el-gap-field .el-input,
|
|
635
635
|
[class*="el-px-"] .el-gap-field .el-input {
|
|
636
636
|
width: calc(100% + var(--el-container-px));
|
|
@@ -669,9 +669,24 @@
|
|
|
669
669
|
[class*="el-px-"] .el-tabs-list,
|
|
670
670
|
[class*="el-px-"] .el-filter-bar,
|
|
671
671
|
[class*="el-px-"] .el-info {
|
|
672
|
-
margin-inline: calc(var(--el-container-px) * -
|
|
673
|
-
padding-inline:
|
|
674
|
-
width: calc(100% + var(--el-container-px));
|
|
672
|
+
margin-inline: calc(var(--el-container-px) * -1);
|
|
673
|
+
padding-inline: var(--el-container-px);
|
|
674
|
+
width: calc(100% + var(--el-container-px) * 2);
|
|
675
|
+
}
|
|
676
|
+
|
|
677
|
+
/* Filter bar first/last in card - extends to card edges with rounded corners */
|
|
678
|
+
[class*="el-p-"] .el-filter-bar-first,
|
|
679
|
+
[class*="el-py-"] .el-filter-bar-first {
|
|
680
|
+
margin-top: calc(var(--el-container-px) * -1);
|
|
681
|
+
border-top-left-radius: var(--el-card-radius);
|
|
682
|
+
border-top-right-radius: var(--el-card-radius);
|
|
683
|
+
}
|
|
684
|
+
|
|
685
|
+
[class*="el-p-"] .el-filter-bar-last,
|
|
686
|
+
[class*="el-py-"] .el-filter-bar-last {
|
|
687
|
+
margin-bottom: calc(var(--el-container-px) * -1);
|
|
688
|
+
border-bottom-left-radius: var(--el-card-radius);
|
|
689
|
+
border-bottom-right-radius: var(--el-card-radius);
|
|
675
690
|
}
|
|
676
691
|
|
|
677
692
|
/* Components with visible borders - extend edge-to-edge, inner elements handle padding */
|
|
@@ -827,23 +842,11 @@
|
|
|
827
842
|
padding-inline: calc(var(--el-container-px) * 0.5);
|
|
828
843
|
}
|
|
829
844
|
|
|
830
|
-
/* Summary
|
|
831
|
-
.el-summary {
|
|
832
|
-
margin-inline: calc(var(--el-spacing-px-md) * -1);
|
|
833
|
-
width: calc(100% + var(--el-spacing-px-md) * 2);
|
|
834
|
-
}
|
|
835
|
-
|
|
836
|
-
/* Summary inner elements - default padding when not inside padding containers */
|
|
845
|
+
/* Summary inner elements - consistent padding */
|
|
837
846
|
.el-summary-item {
|
|
838
847
|
padding-inline: var(--el-spacing-px-md);
|
|
839
848
|
}
|
|
840
849
|
|
|
841
|
-
/* Summary inner elements - cascaded padding when inside padding containers */
|
|
842
|
-
[class*="el-p-"] .el-summary .el-summary-item,
|
|
843
|
-
[class*="el-px-"] .el-summary .el-summary-item {
|
|
844
|
-
padding-inline: calc(var(--el-container-px) * 0.5);
|
|
845
|
-
}
|
|
846
|
-
|
|
847
850
|
/* Textarea - cascaded styles when inside padding containers */
|
|
848
851
|
[class*="el-p-"] .el-textarea,
|
|
849
852
|
[class*="el-px-"] .el-textarea {
|
package/dist/index.css
CHANGED
|
@@ -643,7 +643,7 @@
|
|
|
643
643
|
.el-px-lg { padding-left: var(--el-layout-gap-lg); padding-right: var(--el-layout-gap-lg); --el-container-px: var(--el-layout-gap-lg); }
|
|
644
644
|
.el-px-xl { padding-left: var(--el-layout-gap-xl); padding-right: var(--el-layout-gap-xl); --el-container-px: var(--el-layout-gap-xl); }
|
|
645
645
|
|
|
646
|
-
/*
|
|
646
|
+
/* All buttons and inputs inside el-gap-field - negative margins for edge-to-edge layout */
|
|
647
647
|
.el-p-xs .el-gap-field .el-btn, .el-p-sm .el-gap-field .el-btn, .el-p-md .el-gap-field .el-btn,
|
|
648
648
|
.el-p-lg .el-gap-field .el-btn, .el-p-xl .el-gap-field .el-btn,
|
|
649
649
|
.el-p-section .el-gap-field .el-btn, .el-p-content .el-gap-field .el-btn,
|
|
@@ -654,10 +654,39 @@
|
|
|
654
654
|
.el-p-section .el-gap-field .el-input, .el-p-content .el-gap-field .el-input,
|
|
655
655
|
.el-px-xs .el-gap-field .el-input, .el-px-sm .el-gap-field .el-input, .el-px-md .el-gap-field .el-input,
|
|
656
656
|
.el-px-lg .el-gap-field .el-input, .el-px-xl .el-gap-field .el-input {
|
|
657
|
-
padding-inline: calc(var(--el-container-px) * 0.5);
|
|
658
657
|
margin-inline: calc(var(--el-container-px) * -0.5);
|
|
659
658
|
}
|
|
660
659
|
|
|
660
|
+
/* Padding override only for inputs WITHOUT prefix/suffix icons (they have their own padding) */
|
|
661
|
+
.el-p-xs .el-gap-field .el-btn, .el-p-sm .el-gap-field .el-btn, .el-p-md .el-gap-field .el-btn,
|
|
662
|
+
.el-p-lg .el-gap-field .el-btn, .el-p-xl .el-gap-field .el-btn,
|
|
663
|
+
.el-p-section .el-gap-field .el-btn, .el-p-content .el-gap-field .el-btn,
|
|
664
|
+
.el-px-xs .el-gap-field .el-btn, .el-px-sm .el-gap-field .el-btn, .el-px-md .el-gap-field .el-btn,
|
|
665
|
+
.el-px-lg .el-gap-field .el-btn, .el-px-xl .el-gap-field .el-btn,
|
|
666
|
+
.el-p-xs .el-gap-field .el-input:not([class*="el-input-has-prefix"]):not([class*="el-input-has-suffix"]),
|
|
667
|
+
.el-p-sm .el-gap-field .el-input:not([class*="el-input-has-prefix"]):not([class*="el-input-has-suffix"]),
|
|
668
|
+
.el-p-md .el-gap-field .el-input:not([class*="el-input-has-prefix"]):not([class*="el-input-has-suffix"]),
|
|
669
|
+
.el-p-lg .el-gap-field .el-input:not([class*="el-input-has-prefix"]):not([class*="el-input-has-suffix"]),
|
|
670
|
+
.el-p-xl .el-gap-field .el-input:not([class*="el-input-has-prefix"]):not([class*="el-input-has-suffix"]),
|
|
671
|
+
.el-p-section .el-gap-field .el-input:not([class*="el-input-has-prefix"]):not([class*="el-input-has-suffix"]),
|
|
672
|
+
.el-p-content .el-gap-field .el-input:not([class*="el-input-has-prefix"]):not([class*="el-input-has-suffix"]),
|
|
673
|
+
.el-px-xs .el-gap-field .el-input:not([class*="el-input-has-prefix"]):not([class*="el-input-has-suffix"]),
|
|
674
|
+
.el-px-sm .el-gap-field .el-input:not([class*="el-input-has-prefix"]):not([class*="el-input-has-suffix"]),
|
|
675
|
+
.el-px-md .el-gap-field .el-input:not([class*="el-input-has-prefix"]):not([class*="el-input-has-suffix"]),
|
|
676
|
+
.el-px-lg .el-gap-field .el-input:not([class*="el-input-has-prefix"]):not([class*="el-input-has-suffix"]),
|
|
677
|
+
.el-px-xl .el-gap-field .el-input:not([class*="el-input-has-prefix"]):not([class*="el-input-has-suffix"]) {
|
|
678
|
+
padding-inline: calc(var(--el-container-px) * 0.5);
|
|
679
|
+
}
|
|
680
|
+
|
|
681
|
+
/* All inputs need width adjustment to override 100% from .el-input */
|
|
682
|
+
.el-p-xs .el-gap-field .el-input, .el-p-sm .el-gap-field .el-input, .el-p-md .el-gap-field .el-input,
|
|
683
|
+
.el-p-lg .el-gap-field .el-input, .el-p-xl .el-gap-field .el-input,
|
|
684
|
+
.el-p-section .el-gap-field .el-input, .el-p-content .el-gap-field .el-input,
|
|
685
|
+
.el-px-xs .el-gap-field .el-input, .el-px-sm .el-gap-field .el-input, .el-px-md .el-gap-field .el-input,
|
|
686
|
+
.el-px-lg .el-gap-field .el-input, .el-px-xl .el-gap-field .el-input {
|
|
687
|
+
width: calc(100% + var(--el-container-px));
|
|
688
|
+
}
|
|
689
|
+
|
|
661
690
|
/* Padding Y (vertical) */
|
|
662
691
|
.el-py-xs { padding-top: var(--el-layout-gap-xs); padding-bottom: var(--el-layout-gap-xs); }
|
|
663
692
|
.el-py-sm { padding-top: var(--el-layout-gap-sm); padding-bottom: var(--el-layout-gap-sm); }
|
package/dist/variables.css
CHANGED
|
@@ -138,6 +138,7 @@
|
|
|
138
138
|
--card-padding-lg: 1.25rem;
|
|
139
139
|
--card-gap: 0.75rem;
|
|
140
140
|
--card-header-gap: 0.375rem;
|
|
141
|
+
--el-card-radius: var(--radius-lg);
|
|
141
142
|
|
|
142
143
|
/* Modal */
|
|
143
144
|
--modal-padding: 1.25rem;
|
|
@@ -369,6 +370,7 @@
|
|
|
369
370
|
--card-padding-lg: 1rem;
|
|
370
371
|
--card-gap: 0.5rem;
|
|
371
372
|
--card-header-gap: 0.25rem;
|
|
373
|
+
--el-card-radius: var(--radius-md);
|
|
372
374
|
|
|
373
375
|
--modal-padding: 0.875rem;
|
|
374
376
|
--modal-gap: 0.75rem;
|
|
@@ -583,6 +585,7 @@
|
|
|
583
585
|
--card-padding-lg: 2rem;
|
|
584
586
|
--card-gap: 1rem;
|
|
585
587
|
--card-header-gap: 0.5rem;
|
|
588
|
+
--el-card-radius: var(--radius-xl);
|
|
586
589
|
|
|
587
590
|
--modal-padding: 1.75rem;
|
|
588
591
|
--modal-gap: 1.25rem;
|
package/package.json
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elsapiens/styles",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.5",
|
|
4
4
|
"description": "CSS styles and Tailwind preset for elSapiens SDK",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "./dist/index.css",
|
|
8
8
|
"exports": {
|
|
9
9
|
".": "./dist/index.css",
|
|
10
|
+
"./app": "./dist/app.css",
|
|
10
11
|
"./variables": "./dist/variables.css",
|
|
11
12
|
"./components": "./dist/components.css",
|
|
12
13
|
"./color-schemes": "./dist/color-schemes.css",
|
|
@@ -18,6 +19,9 @@
|
|
|
18
19
|
"dist",
|
|
19
20
|
"tailwind-preset.js"
|
|
20
21
|
],
|
|
22
|
+
"publishConfig": {
|
|
23
|
+
"access": "public"
|
|
24
|
+
},
|
|
21
25
|
"devDependencies": {
|
|
22
26
|
"tailwindcss": "^3.4.1",
|
|
23
27
|
"tailwindcss-animate": "^1.0.7"
|
package/tailwind-preset.js
CHANGED
|
@@ -4,74 +4,103 @@ module.exports = {
|
|
|
4
4
|
theme: {
|
|
5
5
|
extend: {
|
|
6
6
|
colors: {
|
|
7
|
+
// Wisteria palette (changes with color scheme)
|
|
8
|
+
wisteria: {
|
|
9
|
+
50: 'hsl(var(--wisteria-50))',
|
|
10
|
+
100: 'hsl(var(--wisteria-100))',
|
|
11
|
+
200: 'hsl(var(--wisteria-200))',
|
|
12
|
+
300: 'hsl(var(--wisteria-300))',
|
|
13
|
+
400: 'hsl(var(--wisteria-400))',
|
|
14
|
+
500: 'hsl(var(--wisteria-500))',
|
|
15
|
+
600: 'hsl(var(--wisteria-600))',
|
|
16
|
+
700: 'hsl(var(--wisteria-700))',
|
|
17
|
+
800: 'hsl(var(--wisteria-800))',
|
|
18
|
+
850: 'hsl(var(--wisteria-850))',
|
|
19
|
+
900: 'hsl(var(--wisteria-900))',
|
|
20
|
+
950: 'hsl(var(--wisteria-950))',
|
|
21
|
+
},
|
|
22
|
+
// Neutral gray scale (never changes)
|
|
23
|
+
neutral: {
|
|
24
|
+
50: 'hsl(var(--neutral-50))',
|
|
25
|
+
100: 'hsl(var(--neutral-100))',
|
|
26
|
+
200: 'hsl(var(--neutral-200))',
|
|
27
|
+
300: 'hsl(var(--neutral-300))',
|
|
28
|
+
400: 'hsl(var(--neutral-400))',
|
|
29
|
+
500: 'hsl(var(--neutral-500))',
|
|
30
|
+
600: 'hsl(var(--neutral-600))',
|
|
31
|
+
700: 'hsl(var(--neutral-700))',
|
|
32
|
+
800: 'hsl(var(--neutral-800))',
|
|
33
|
+
900: 'hsl(var(--neutral-900))',
|
|
34
|
+
950: 'hsl(var(--neutral-950))',
|
|
35
|
+
},
|
|
7
36
|
// Primary - Wisteria Blue
|
|
8
37
|
primary: {
|
|
9
|
-
50: 'var(--
|
|
10
|
-
100: 'var(--
|
|
11
|
-
200: 'var(--
|
|
12
|
-
300: 'var(--
|
|
13
|
-
400: 'var(--
|
|
14
|
-
500: 'var(--
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
foreground: 'var(--primary-foreground)',
|
|
38
|
+
50: 'hsl(var(--wisteria-50))',
|
|
39
|
+
100: 'hsl(var(--wisteria-100))',
|
|
40
|
+
200: 'hsl(var(--wisteria-200))',
|
|
41
|
+
300: 'hsl(var(--wisteria-300))',
|
|
42
|
+
400: 'hsl(var(--wisteria-400))',
|
|
43
|
+
500: 'hsl(var(--wisteria-500))',
|
|
44
|
+
600: 'hsl(var(--wisteria-600))',
|
|
45
|
+
700: 'hsl(var(--wisteria-700))',
|
|
46
|
+
800: 'hsl(var(--wisteria-800))',
|
|
47
|
+
900: 'hsl(var(--wisteria-900))',
|
|
48
|
+
950: 'hsl(var(--wisteria-950))',
|
|
49
|
+
DEFAULT: 'hsl(var(--primary))',
|
|
50
|
+
foreground: 'hsl(var(--primary-foreground))',
|
|
22
51
|
},
|
|
23
52
|
// Semantic colors
|
|
24
|
-
background: 'var(--background)',
|
|
25
|
-
foreground: 'var(--foreground)',
|
|
53
|
+
background: 'hsl(var(--background))',
|
|
54
|
+
foreground: 'hsl(var(--foreground))',
|
|
26
55
|
card: {
|
|
27
|
-
DEFAULT: 'var(--card)',
|
|
28
|
-
foreground: 'var(--card-foreground)',
|
|
56
|
+
DEFAULT: 'hsl(var(--card))',
|
|
57
|
+
foreground: 'hsl(var(--card-foreground))',
|
|
29
58
|
},
|
|
30
59
|
popover: {
|
|
31
|
-
DEFAULT: 'var(--popover)',
|
|
32
|
-
foreground: 'var(--popover-foreground)',
|
|
60
|
+
DEFAULT: 'hsl(var(--popover))',
|
|
61
|
+
foreground: 'hsl(var(--popover-foreground))',
|
|
33
62
|
},
|
|
34
63
|
secondary: {
|
|
35
|
-
DEFAULT: 'var(--secondary)',
|
|
36
|
-
foreground: 'var(--secondary-foreground)',
|
|
64
|
+
DEFAULT: 'hsl(var(--secondary))',
|
|
65
|
+
foreground: 'hsl(var(--secondary-foreground))',
|
|
37
66
|
},
|
|
38
67
|
muted: {
|
|
39
|
-
DEFAULT: 'var(--muted)',
|
|
40
|
-
foreground: 'var(--muted-foreground)',
|
|
68
|
+
DEFAULT: 'hsl(var(--muted))',
|
|
69
|
+
foreground: 'hsl(var(--muted-foreground))',
|
|
41
70
|
},
|
|
42
71
|
accent: {
|
|
43
|
-
DEFAULT: 'var(--accent)',
|
|
44
|
-
foreground: 'var(--accent-foreground)',
|
|
72
|
+
DEFAULT: 'hsl(var(--accent))',
|
|
73
|
+
foreground: 'hsl(var(--accent-foreground))',
|
|
45
74
|
},
|
|
46
75
|
destructive: {
|
|
47
|
-
DEFAULT: 'var(--destructive)',
|
|
48
|
-
foreground: 'var(--destructive-foreground)',
|
|
76
|
+
DEFAULT: 'hsl(var(--destructive))',
|
|
77
|
+
foreground: 'hsl(var(--destructive-foreground))',
|
|
49
78
|
},
|
|
50
|
-
border: 'var(--border)',
|
|
51
|
-
input: 'var(--input)',
|
|
52
|
-
ring: 'var(--ring)',
|
|
79
|
+
border: 'hsl(var(--border))',
|
|
80
|
+
input: 'hsl(var(--input))',
|
|
81
|
+
ring: 'hsl(var(--ring))',
|
|
53
82
|
// Surfaces
|
|
54
83
|
surface: {
|
|
55
|
-
DEFAULT: 'var(--surface)',
|
|
56
|
-
elevated: 'var(--surface-elevated)',
|
|
57
|
-
sunken: 'var(--surface-sunken)',
|
|
84
|
+
DEFAULT: 'hsl(var(--surface))',
|
|
85
|
+
elevated: 'hsl(var(--surface-elevated))',
|
|
86
|
+
sunken: 'hsl(var(--surface-sunken))',
|
|
58
87
|
},
|
|
59
88
|
// Status colors
|
|
60
89
|
success: {
|
|
61
|
-
DEFAULT: 'var(--success)',
|
|
62
|
-
foreground: 'var(--success-foreground)',
|
|
90
|
+
DEFAULT: 'hsl(var(--success))',
|
|
91
|
+
foreground: 'hsl(var(--success-foreground))',
|
|
63
92
|
},
|
|
64
93
|
warning: {
|
|
65
|
-
DEFAULT: 'var(--warning)',
|
|
66
|
-
foreground: 'var(--warning-foreground)',
|
|
94
|
+
DEFAULT: 'hsl(var(--warning))',
|
|
95
|
+
foreground: 'hsl(var(--warning-foreground))',
|
|
67
96
|
},
|
|
68
97
|
error: {
|
|
69
|
-
DEFAULT: 'var(--error)',
|
|
70
|
-
foreground: 'var(--error-foreground)',
|
|
98
|
+
DEFAULT: 'hsl(var(--error))',
|
|
99
|
+
foreground: 'hsl(var(--error-foreground))',
|
|
71
100
|
},
|
|
72
101
|
info: {
|
|
73
|
-
DEFAULT: 'var(--info)',
|
|
74
|
-
foreground: 'var(--info-foreground)',
|
|
102
|
+
DEFAULT: 'hsl(var(--info))',
|
|
103
|
+
foreground: 'hsl(var(--info-foreground))',
|
|
75
104
|
},
|
|
76
105
|
},
|
|
77
106
|
borderRadius: {
|