@syscore/ui-library 1.3.4 → 1.3.6

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 (6) hide show
  1. package/client/components/ui/card.tsx +3 -1
  2. package/client/global.css +1053 -153
  3. package/client/storybook.css +0 -870
  4. package/dist/index.cjs.js +1 -1
  5. package/dist/index.es.js +2 -1
  6. package/package.json +1 -1
package/client/storybook.css CHANGED
@@ -1,873 +1,3 @@
1
- /** @import must precede all other statements */
2
- @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap")
3
- layer(base);
4
-
5
-
6
1
  @import "tailwindcss";
7
2
 
8
- @font-face {
9
- font-family: "Mazzard Soft M";
10
- src: url("/fonts/Mazzard-M/mazzardsoftm-black.otf");
11
- font-weight: 900;
12
- font-style: normal;
13
- font-display: swap;
14
- }
15
- @font-face {
16
- font-family: "Mazzard Soft M";
17
- src: url("/fonts/Mazzard-M/mazzardsoftm-blackitalic.otf");
18
- font-weight: 900;
19
- font-style: italic;
20
- font-display: swap;
21
- }
22
- @font-face {
23
- font-family: "Mazzard Soft M";
24
- src: url("/fonts/Mazzard-M/mazzardsoftm-extrabold.otf");
25
- font-weight: 800;
26
- font-style: normal;
27
- font-display: swap;
28
- }
29
- @font-face {
30
- font-family: "Mazzard Soft M";
31
- src: url("/fonts/Mazzard-M/mazzardsoftm-extrabolditalic.otf");
32
- font-weight: 800;
33
- font-style: italic;
34
- font-display: swap;
35
- }
36
- @font-face {
37
- font-family: "Mazzard Soft M";
38
- src: url("/fonts/Mazzard-M/mazzardsoftm-bold.otf");
39
- font-weight: 700;
40
- font-style: normal;
41
- font-display: swap;
42
- }
43
- @font-face {
44
- font-family: "Mazzard Soft M";
45
- src: url("/fonts/Mazzard-M/mazzardsoftm-bolditalic.otf");
46
- font-weight: 700;
47
- font-style: italic;
48
- font-display: swap;
49
- }
50
- @font-face {
51
- font-family: "Mazzard Soft M";
52
- src: url("/fonts/Mazzard-M/mazzardsoftm-semibold.otf");
53
- font-weight: 600;
54
- font-style: normal;
55
- font-display: swap;
56
- }
57
- @font-face {
58
- font-family: "Mazzard Soft M";
59
- src: url("/fonts/Mazzard-M/mazzardsoftm-semibolditalic.otf");
60
- font-weight: 600;
61
- font-style: italic;
62
- font-display: swap;
63
- }
64
- @font-face {
65
- font-family: "Mazzard Soft M";
66
- src: url("/fonts/Mazzard-M/mazzardsoftm-medium.otf");
67
- font-weight: 500;
68
- font-style: normal;
69
- font-display: swap;
70
- }
71
- @font-face {
72
- font-family: "Mazzard Soft M";
73
- src: url("/fonts/Mazzard-M/mazzardsoftm-mediumitalic.otf");
74
- font-weight: 500;
75
- font-style: italic;
76
- font-display: swap;
77
- }
78
- @font-face {
79
- font-family: "Mazzard Soft M";
80
- src: url("/fonts/Mazzard-M/mazzardsoftm-regular.otf");
81
- font-weight: 400;
82
- font-style: normal;
83
- font-display: swap;
84
- }
85
- @font-face {
86
- font-family: "Mazzard Soft M";
87
- src: url("/fonts/Mazzard-M/mazzardsoftm-italic.otf");
88
- font-weight: 400;
89
- font-style: italic;
90
- font-display: swap;
91
- }
92
- @font-face {
93
- font-family: "Mazzard Soft M";
94
- src: url("/fonts/Mazzard-M/mazzardsoftm-light.otf");
95
- font-weight: 300;
96
- font-style: normal;
97
- font-display: swap;
98
- }
99
- @font-face {
100
- font-family: "Mazzard Soft M";
101
- src: url("/fonts/Mazzard-M/mazzardsoftm-lightitalic.otf");
102
- font-weight: 300;
103
- font-style: italic;
104
- font-display: swap;
105
- }
106
- @font-face {
107
- font-family: "Mazzard Soft M";
108
- src: url("/fonts/Mazzard-M/mazzardsoftm-extralight.otf");
109
- font-weight: 200;
110
- font-style: normal;
111
- font-display: swap;
112
- }
113
- @font-face {
114
- font-family: "Mazzard Soft M";
115
- src: url("/fonts/Mazzard-M/mazzardsoftm-extralightitalic.otf");
116
- font-weight: 200;
117
- font-style: italic;
118
- font-display: swap;
119
- }
120
- @font-face {
121
- font-family: "Mazzard Soft M";
122
- src: url("/fonts/Mazzard-M/mazzardsoftm-thin.otf");
123
- font-weight: 100;
124
- font-style: normal;
125
- font-display: swap;
126
- }
127
- @font-face {
128
- font-family: "Mazzard Soft M";
129
- src: url("/fonts/Mazzard-M/mazzardsoftm-thinitalic.otf");
130
- font-weight: 100;
131
- font-style: italic;
132
- font-display: swap;
133
- }
134
-
135
- @font-face {
136
- font-family: "FtMade";
137
- src:
138
- url("/fonts/FT-Made/FTMade-Regular.woff2") format("woff2"),
139
- url("/fonts/FT-Made/FTMade-Regular.woff") format("woff"),
140
- url("/fonts/FT-Made/FTMade-Regular.otf") format("opentype"),
141
- url("/fonts/FT-Made/FTMade-Regular.ttf") format("truetype");
142
- font-weight: normal;
143
- font-style: normal;
144
- font-display: swap;
145
- }
146
-
147
- @plugin 'tailwindcss-animate';
148
-
149
- @custom-variant dark (&:is(.dark *));
150
-
151
- @utility container {
152
- margin-inline: auto;
153
- padding-inline: 2rem;
154
- @media (width >= --theme(--breakpoint-sm)) {
155
- max-width: none;
156
- }
157
- @media (width >= 1400px) {
158
- max-width: 1400px;
159
- }
160
- }
161
-
162
- @utility btn-primary-gradient {
163
- background-image:
164
- linear-gradient(
165
- 0deg,
166
- rgba(15, 116, 138, 0.6) 0%,
167
- rgba(15, 116, 138, 0.6) 100%
168
- ),
169
- linear-gradient(99deg, #41d5f6 3.39%, #3eecd1 57.86%, #66fcd9 112.32%);
170
- }
171
-
172
- @theme {
173
- --color-inherit: inherit;
174
- --color-current: currentColor;
175
- --color-transparent: transparent;
176
- --color-black: hsl(var(--black));
177
- --color-white: hsl(var(--white));
178
-
179
- --color-slate-50: hsl(var(--slate-50));
180
- --color-slate-100: hsl(var(--slate-100));
181
- --color-slate-200: hsl(var(--slate-200));
182
- --color-slate-300: hsl(var(--slate-300));
183
- --color-slate-400: hsl(var(--slate-400));
184
- --color-slate-500: hsl(var(--slate-500));
185
- --color-slate-600: hsl(var(--slate-600));
186
- --color-slate-700: hsl(var(--slate-700));
187
- --color-slate-800: hsl(var(--slate-800));
188
- --color-slate-900: hsl(var(--slate-900));
189
-
190
- --color-gray-50: hsl(var(--gray-50));
191
- --color-gray-100: hsl(var(--gray-100));
192
- --color-gray-200: hsl(var(--gray-200));
193
- --color-gray-300: hsl(var(--gray-300));
194
- --color-gray-400: hsl(var(--gray-400));
195
- --color-gray-500: hsl(var(--gray-500));
196
- --color-gray-600: hsl(var(--gray-600));
197
- --color-gray-700: hsl(var(--gray-700));
198
- --color-gray-800: hsl(var(--gray-800));
199
- --color-gray-900: hsl(var(--gray-900));
200
-
201
- --color-zinc-50: #fafafa;
202
- --color-zinc-100: #f4f4f5;
203
- --color-zinc-200: #e4e4e7;
204
- --color-zinc-300: #d4d4d8;
205
- --color-zinc-400: #a1a1aa;
206
- --color-zinc-500: #71717a;
207
- --color-zinc-600: #52525b;
208
- --color-zinc-700: #3f3f46;
209
- --color-zinc-800: #27272a;
210
- --color-zinc-900: #18181b;
211
- --color-zinc-950: #09090b;
212
-
213
- --color-neutral-50: #fafafa;
214
- --color-neutral-100: #f5f5f5;
215
- --color-neutral-200: #e5e5e5;
216
- --color-neutral-300: #d4d4d4;
217
- --color-neutral-400: #a3a3a3;
218
- --color-neutral-500: #737373;
219
- --color-neutral-600: #525252;
220
- --color-neutral-700: #404040;
221
- --color-neutral-800: #262626;
222
- --color-neutral-900: #171717;
223
- --color-neutral-950: #0a0a0a;
224
-
225
- --color-stone-50: #fafaf9;
226
- --color-stone-100: #f5f5f4;
227
- --color-stone-200: #e7e5e4;
228
- --color-stone-300: #d6d3d1;
229
- --color-stone-400: #a8a29e;
230
- --color-stone-500: #78716c;
231
- --color-stone-600: #57534e;
232
- --color-stone-700: #44403c;
233
- --color-stone-800: #292524;
234
- --color-stone-900: #1c1917;
235
- --color-stone-950: #0c0a09;
236
-
237
- --color-red-50: #fef2f2;
238
- --color-red-100: #fee2e2;
239
- --color-red-200: #fecaca;
240
- --color-red-300: #fca5a5;
241
- --color-red-400: #f87171;
242
- --color-red-500: #ef4444;
243
- --color-red-600: #dc2626;
244
- --color-red-700: #b91c1c;
245
- --color-red-800: #991b1b;
246
- --color-red-900: #7f1d1d;
247
- --color-red-950: #450a0a;
248
-
249
- --color-orange-50: #fff7ed;
250
- --color-orange-100: #ffedd5;
251
- --color-orange-200: #fed7aa;
252
- --color-orange-300: #fdba74;
253
- --color-orange-400: #fb923c;
254
- --color-orange-500: #f97316;
255
- --color-orange-600: #ea580c;
256
- --color-orange-700: #c2410c;
257
- --color-orange-800: #9a3412;
258
- --color-orange-900: #7c2d12;
259
- --color-orange-950: #431407;
260
-
261
- --color-amber-50: #fffbeb;
262
- --color-amber-100: #fef3c7;
263
- --color-amber-200: #fde68a;
264
- --color-amber-300: #fcd34d;
265
- --color-amber-400: #fbbf24;
266
- --color-amber-500: #f59e0b;
267
- --color-amber-600: #d97706;
268
- --color-amber-700: #b45309;
269
- --color-amber-800: #92400e;
270
- --color-amber-900: #78350f;
271
- --color-amber-950: #451a03;
272
-
273
- --color-yellow-50: #fefce8;
274
- --color-yellow-100: #fef9c3;
275
- --color-yellow-200: #fef08a;
276
- --color-yellow-300: #fde047;
277
- --color-yellow-400: #facc15;
278
- --color-yellow-500: #eab308;
279
- --color-yellow-600: #ca8a04;
280
- --color-yellow-700: #a16207;
281
- --color-yellow-800: #854d0e;
282
- --color-yellow-900: #713f12;
283
- --color-yellow-950: #422006;
284
-
285
- --color-lime-50: #f7fee7;
286
- --color-lime-100: #ecfccb;
287
- --color-lime-200: #d9f99d;
288
- --color-lime-300: #bef264;
289
- --color-lime-400: #a3e635;
290
- --color-lime-500: #84cc16;
291
- --color-lime-600: #65a30d;
292
- --color-lime-700: #4d7c0f;
293
- --color-lime-800: #3f6212;
294
- --color-lime-900: #365314;
295
- --color-lime-950: #1a2e05;
296
-
297
- --color-green-50: #f0fdf4;
298
- --color-green-100: #dcfce7;
299
- --color-green-200: #bbf7d0;
300
- --color-green-300: #86efac;
301
- --color-green-400: #4ade80;
302
- --color-green-500: #22c55e;
303
- --color-green-600: #16a34a;
304
- --color-green-700: #15803d;
305
- --color-green-800: #166534;
306
- --color-green-900: #14532d;
307
- --color-green-950: #052e16;
308
-
309
- --color-emerald-50: #ecfdf5;
310
- --color-emerald-100: #d1fae5;
311
- --color-emerald-200: #a7f3d0;
312
- --color-emerald-300: #6ee7b7;
313
- --color-emerald-400: #34d399;
314
- --color-emerald-500: #10b981;
315
- --color-emerald-600: #059669;
316
- --color-emerald-700: #047857;
317
- --color-emerald-800: #065f46;
318
- --color-emerald-900: #064e3b;
319
- --color-emerald-950: #022c22;
320
-
321
- --color-teal-50: #f0fdfa;
322
- --color-teal-100: #ccfbf1;
323
- --color-teal-200: #99f6e4;
324
- --color-teal-300: #5eead4;
325
- --color-teal-400: #2dd4bf;
326
- --color-teal-500: #14b8a6;
327
- --color-teal-600: #0d9488;
328
- --color-teal-700: #0f766e;
329
- --color-teal-800: #115e59;
330
- --color-teal-900: #134e4a;
331
- --color-teal-950: #042f2e;
332
-
333
- --color-cyan-50: hsl(var(--cyan-50));
334
- --color-cyan-100: hsl(var(--cyan-100));
335
- --color-cyan-200: hsl(var(--cyan-200));
336
- --color-cyan-300: hsl(var(--cyan-300));
337
- --color-cyan-400: hsl(var(--cyan-400));
338
- --color-cyan-500: hsl(var(--cyan-500));
339
- --color-cyan-600: hsl(var(--cyan-600));
340
- --color-cyan-700: hsl(var(--cyan-700));
341
- --color-cyan-800: hsl(var(--cyan-800));
342
- --color-cyan-dark: hsl(var(--cyan-dark));
343
- --color-cyan-gradient-from: hsl(var(--cyan-gradient-from));
344
- --color-cyan-gradient-via: hsl(var(--cyan-gradient-via));
345
- --color-cyan-gradient-to: hsl(var(--cyan-gradient-to));
346
-
347
- --color-sky-50: #f0f9ff;
348
- --color-sky-100: #e0f2fe;
349
- --color-sky-200: #bae6fd;
350
- --color-sky-300: #7dd3fc;
351
- --color-sky-400: #38bdf8;
352
- --color-sky-500: #0ea5e9;
353
- --color-sky-600: #0284c7;
354
- --color-sky-700: #0369a1;
355
- --color-sky-800: #075985;
356
- --color-sky-900: #0c4a6e;
357
- --color-sky-950: #082f49;
358
-
359
- --color-blue-50: hsl(var(--blue-50));
360
- --color-blue-100: hsl(var(--blue-100));
361
- --color-blue-200: hsl(var(--blue-200));
362
- --color-blue-300: hsl(var(--blue-300));
363
- --color-blue-400: hsl(var(--blue-400));
364
- --color-blue-500: hsl(var(--blue-500));
365
- --color-blue-600: hsl(var(--blue-600));
366
-
367
- --color-indigo-50: #eef2ff;
368
- --color-indigo-100: #e0e7ff;
369
- --color-indigo-200: #c7d2fe;
370
- --color-indigo-300: #a5b4fc;
371
- --color-indigo-400: #818cf8;
372
- --color-indigo-500: #6366f1;
373
- --color-indigo-600: #4f46e5;
374
- --color-indigo-700: #4338ca;
375
- --color-indigo-800: #3730a3;
376
- --color-indigo-900: #312e81;
377
- --color-indigo-950: #1e1b4b;
378
-
379
- --color-violet-100: hsl(var(--violet-100));
380
- --color-violet-200: hsl(var(--violet-200));
381
- --color-violet-500: hsl(var(--violet-500));
382
- --color-violet-600: hsl(var(--violet-600));
383
- --color-violet-700: hsl(var(--violet-700));
384
-
385
- --color-purple-50: #faf5ff;
386
- --color-purple-100: #f3e8ff;
387
- --color-purple-200: #e9d5ff;
388
- --color-purple-300: #d8b4fe;
389
- --color-purple-400: #c084fc;
390
- --color-purple-500: #a855f7;
391
- --color-purple-600: #9333ea;
392
- --color-purple-700: #7e22ce;
393
- --color-purple-800: #6b21a8;
394
- --color-purple-900: #581c87;
395
- --color-purple-950: #3b0764;
396
-
397
- --color-fuchsia-50: #fdf4ff;
398
- --color-fuchsia-100: #fae8ff;
399
- --color-fuchsia-200: #f5d0fe;
400
- --color-fuchsia-300: #f0abfc;
401
- --color-fuchsia-400: #e879f9;
402
- --color-fuchsia-500: #d946ef;
403
- --color-fuchsia-600: #c026d3;
404
- --color-fuchsia-700: #a21caf;
405
- --color-fuchsia-800: #86198f;
406
- --color-fuchsia-900: #701a75;
407
- --color-fuchsia-950: #4a044e;
408
-
409
- --color-pink-50: #fdf2f8;
410
- --color-pink-100: #fce7f3;
411
- --color-pink-200: #fbcfe8;
412
- --color-pink-300: #f9a8d4;
413
- --color-pink-400: #f472b6;
414
- --color-pink-500: #ec4899;
415
- --color-pink-600: #db2777;
416
- --color-pink-700: #be185d;
417
- --color-pink-800: #9d174d;
418
- --color-pink-900: #831843;
419
- --color-pink-950: #500724;
420
-
421
- --color-rose-50: #fff1f2;
422
- --color-rose-100: #ffe4e6;
423
- --color-rose-200: #fecdd3;
424
- --color-rose-300: #fda4af;
425
- --color-rose-400: #fb7185;
426
- --color-rose-500: #f43f5e;
427
- --color-rose-600: #e11d48;
428
- --color-rose-700: #be123c;
429
- --color-rose-800: #9f1239;
430
- --color-rose-900: #881337;
431
- --color-rose-950: #4c0519;
432
-
433
- --color-light-blue-50: #f0f9ff;
434
- --color-light-blue-100: #e0f2fe;
435
- --color-light-blue-200: #bae6fd;
436
- --color-light-blue-300: #7dd3fc;
437
- --color-light-blue-400: #38bdf8;
438
- --color-light-blue-500: #0ea5e9;
439
- --color-light-blue-600: #0284c7;
440
- --color-light-blue-700: #0369a1;
441
- --color-light-blue-800: #075985;
442
- --color-light-blue-900: #0c4a6e;
443
- --color-light-blue-950: #082f49;
444
-
445
- --color-warm-gray-50: #fafaf9;
446
- --color-warm-gray-100: #f5f5f4;
447
- --color-warm-gray-200: #e7e5e4;
448
- --color-warm-gray-300: #d6d3d1;
449
- --color-warm-gray-400: #a8a29e;
450
- --color-warm-gray-500: #78716c;
451
- --color-warm-gray-600: #57534e;
452
- --color-warm-gray-700: #44403c;
453
- --color-warm-gray-800: #292524;
454
- --color-warm-gray-900: #1c1917;
455
- --color-warm-gray-950: #0c0a09;
456
-
457
- --color-true-gray-50: #fafafa;
458
- --color-true-gray-100: #f5f5f5;
459
- --color-true-gray-200: #e5e5e5;
460
- --color-true-gray-300: #d4d4d4;
461
- --color-true-gray-400: #a3a3a3;
462
- --color-true-gray-500: #737373;
463
- --color-true-gray-600: #525252;
464
- --color-true-gray-700: #404040;
465
- --color-true-gray-800: #262626;
466
- --color-true-gray-900: #171717;
467
- --color-true-gray-950: #0a0a0a;
468
-
469
- --color-cool-gray-50: #f9fafb;
470
- --color-cool-gray-100: #f3f4f6;
471
- --color-cool-gray-200: #e5e7eb;
472
- --color-cool-gray-300: #d1d5db;
473
- --color-cool-gray-400: #9ca3af;
474
- --color-cool-gray-500: #6b7280;
475
- --color-cool-gray-600: #4b5563;
476
- --color-cool-gray-700: #374151;
477
- --color-cool-gray-800: #1f2937;
478
- --color-cool-gray-900: #111827;
479
- --color-cool-gray-950: #030712;
480
-
481
- --color-blue-gray-50: #f8fafc;
482
- --color-blue-gray-100: #f1f5f9;
483
- --color-blue-gray-200: #e2e8f0;
484
- --color-blue-gray-300: #cbd5e1;
485
- --color-blue-gray-400: #94a3b8;
486
- --color-blue-gray-500: #64748b;
487
- --color-blue-gray-600: #475569;
488
- --color-blue-gray-700: #334155;
489
- --color-blue-gray-800: #1e293b;
490
- --color-blue-gray-900: #0f172a;
491
- --color-blue-gray-950: #020617;
492
-
493
- --color-border: hsl(var(--border));
494
- --color-input: hsl(var(--input));
495
- --color-ring: hsl(var(--ring));
496
- --color-background: hsl(var(--background));
497
- --color-foreground: hsl(var(--foreground));
498
-
499
- --color-primary: hsl(var(--primary));
500
- --color-primary-foreground: hsl(var(--primary-foreground));
501
-
502
- --color-secondary: hsl(var(--secondary));
503
- --color-secondary-foreground: hsl(var(--secondary-foreground));
504
-
505
- --color-destructive: hsl(var(--destructive));
506
- --color-destructive-foreground: hsl(var(--destructive-foreground));
507
-
508
- --color-muted: hsl(var(--muted));
509
- --color-muted-foreground: hsl(var(--muted-foreground));
510
-
511
- --color-accent: hsl(var(--accent));
512
- --color-accent-foreground: hsl(var(--accent-foreground));
513
-
514
- --color-popover: hsl(var(--popover));
515
- --color-popover-foreground: hsl(var(--popover-foreground));
516
-
517
- --color-card: hsl(var(--card));
518
- --color-card-foreground: hsl(var(--card-foreground));
519
-
520
- --color-sidebar: hsl(var(--sidebar-background));
521
- --color-sidebar-foreground: hsl(var(--sidebar-foreground));
522
- --color-sidebar-primary: hsl(var(--sidebar-primary));
523
- --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
524
- --color-sidebar-accent: hsl(var(--sidebar-accent));
525
- --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
526
- --color-sidebar-border: hsl(var(--sidebar-border));
527
- --color-sidebar-ring: hsl(var(--sidebar-ring));
528
-
529
- --radius-lg: 12px;
530
- --radius-md: 8px;
531
- --radius-sm: 6px;
532
-
533
- /* Figma Design System Colors */
534
- --color-white: #fff;
535
- --color-black: #000;
536
-
537
- --color-gray-50: #f9f9fa;
538
- --color-gray-100: #eff1f2;
539
- --color-gray-200: #dedfe3;
540
- --color-gray-300: #cbcdd2;
541
- --color-gray-400: #9fa2ab;
542
- --color-gray-500: #71747d;
543
- --color-gray-600: #52545d;
544
- --color-gray-700: #3e4049;
545
- --color-gray-800: #282a31;
546
- --color-gray-900: #171820;
547
-
548
- --color-blue-50: #fbfdfe;
549
- --color-blue-100: #eff5fb;
550
- --color-blue-200: #cbe0f1;
551
- --color-blue-300: #a3c8e6;
552
- --color-blue-400: #72abd9;
553
- --color-blue-500: #3481c1;
554
- --color-blue-600: #2e74ad;
555
- --color-blue-700: #286495;
556
- --color-blue-800: #22547d;
557
- --color-blue-900: #183b58;
558
-
559
- --color-cyan-50: #fafeff;
560
- --color-cyan-100: #d6f4fb;
561
- --color-cyan-200: #95e2f4;
562
- --color-cyan-300: #39c9ea;
563
- --color-cyan-400: #18bde2;
564
- --color-cyan-500: #16adcf;
565
- --color-cyan-600: #149ebd;
566
- --color-cyan-700: #128ba6;
567
- --color-cyan-800: #0f748a;
568
- --color-cyan-900: #0a5161;
569
-
570
- --color-emerald-50: #fbfefe;
571
- --color-emerald-100: #e0fbf5;
572
- --color-emerald-200: #bcf6ea;
573
- --color-emerald-300: #8aefdb;
574
- --color-emerald-400: #50e7ca;
575
- --color-emerald-500: #1dd7b2;
576
- --color-emerald-600: #1bc5a3;
577
- --color-emerald-700: #17aa8d;
578
- --color-emerald-800: #138b73;
579
- --color-emerald-900: #0e6352;
580
-
581
- --color-plum-50: #fdfcfd;
582
- --color-plum-100: #f7f2f6;
583
- --color-plum-200: #f0e1ed;
584
- --color-plum-300: #e8cae1;
585
- --color-plum-400: #dcadd2;
586
- --color-plum-500: #bf78ae;
587
- --color-plum-600: #aa6a9b;
588
- --color-plum-700: #905c84;
589
- --color-plum-800: #7f5075;
590
- --color-plum-900: #633e5a;
591
-
592
- --color-coral-50: #fefcfb;
593
- --color-coral-100: #fcf4f2;
594
- --color-coral-200: #f8dfd8;
595
- --color-coral-300: #f4c9be;
596
- --color-coral-400: #f0aa99;
597
- --color-coral-500: #ed896f;
598
- --color-coral-600: #e67357;
599
- --color-coral-700: #dc5432;
600
- --color-coral-800: #bc4324;
601
- --color-coral-900: #81311d;
602
-
603
- --color-pink-50: #fefbfb;
604
- --color-pink-100: #fceeef;
605
- --color-pink-200: #f7d4d8;
606
- --color-pink-300: #f2b4bb;
607
- --color-pink-400: #efa4ad;
608
- --color-pink-500: #eb8e99;
609
- --color-pink-600: #e77481;
610
- --color-pink-700: #e25566;
611
- --color-pink-800: #c92e3f;
612
- --color-pink-900: #9d1b2a;
613
-
614
- --color-bronze-50: #fefdfb;
615
- --color-bronze-100: #fbf8f3;
616
- --color-bronze-200: #f8f1e8;
617
- --color-bronze-300: #f3e7d8;
618
- --color-bronze-400: #eedec9;
619
- --color-bronze-500: #e8d2b5;
620
- --color-bronze-600: #dcba8e;
621
- --color-bronze-700: #d0a367;
622
- --color-bronze-800: #bb833a;
623
- --color-bronze-900: #845d29;
624
-
625
- --color-silver-50: #fcfcfd;
626
- --color-silver-100: #f6f7f8;
627
- --color-silver-200: #edf0f2;
628
- --color-silver-300: #e2e5e9;
629
- --color-silver-400: #d6dbe0;
630
- --color-silver-500: #c8ced6;
631
- --color-silver-600: #bcc4cd;
632
- --color-silver-700: #a2adb9;
633
- --color-silver-800: #8190a1;
634
- --color-silver-900: #5c6a7b;
635
-
636
- --color-gold-50: #fefdfb;
637
- --color-gold-100: #fdfcf6;
638
- --color-gold-200: #f9f5e1;
639
- --color-gold-300: #f6efd0;
640
- --color-gold-400: #f2e8bb;
641
- --color-gold-500: #eee2aa;
642
- --color-gold-600: #eada94;
643
- --color-gold-700: #e5d27b;
644
- --color-gold-800: #cdae28;
645
- --color-gold-900: #917c1d;
646
-
647
- --color-platinum-50: #fcfcfd;
648
- --color-platinum-100: #f7f7f8;
649
- --color-platinum-200: #ececee;
650
- --color-platinum-300: #e2e1e5;
651
- --color-platinum-400: #d2d1d6;
652
- --color-platinum-500: #c6c5cc;
653
- --color-platinum-600: #b4b3bc;
654
- --color-platinum-700: #9f9da9;
655
- --color-platinum-800: #848291;
656
- --color-platinum-900: #5d5b67;
657
-
658
- --color-beige-50: #fdfcfc;
659
- --color-beige-100: #fbfaf9;
660
- --color-beige-200: #efeae6;
661
- --color-beige-300: #e2d7d0;
662
- --color-beige-400: #d2c2b6;
663
- --color-beige-500: #c1aa9a;
664
- --color-beige-600: #b59a87;
665
- --color-beige-700: #a5856e;
666
- --color-beige-800: #8b6c56;
667
- --color-beige-900: #685140;
668
-
669
- --color-mind: #0a5161;
670
- --color-community: #0f748a;
671
- --color-movement: #149ebd;
672
- --color-water: #39c9ea;
673
- --color-air: #87dff2;
674
-
675
- --color-btn-hover: #00000014;
676
-
677
- --color-light: #8aefdb;
678
- --color-thermalcomfort: #3eddbf;
679
- --color-nourishment: #17aa8d;
680
- --color-sound: #0c705c;
681
- --color-materials: #0a4f41;
682
-
683
- --color-healthsafety: #72abd9;
684
- --color-performance: #0f748a;
685
- --color-equity: #17aa8d;
686
- --color-coworking: #9a608c;
687
-
688
- --gradient-0: 99deg, #41d5f6 3.39%, #3eecd1 57.86%, #66fcd9 112.32%;
689
- --gradient-1: 58deg, #8aefdb 2.8%, #d4bace 41.67%, #cbe0f1 80.55%;
690
- --gradient-performance:
691
- 180deg, #1dd7b2 0%, #18bde2 50%, #bf78ae 75%, #e67357 100%;
692
-
693
- --blur-xs: 2px;
694
- --blur-sm: 4px;
695
- --blur-md: 8px;
696
- --blur-lg: 12px;
697
- --blur-xl: 20px;
698
-
699
- --shadow-xs: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
700
- --shadow-sm:
701
- 0 1px 3px 0 rgba(16, 24, 40, 0.1), 0 1px 2px -1px rgba(16, 24, 40, 0.1);
702
- --shadow-md:
703
- 0 4px 6px -1px rgba(16, 24, 40, 0.1), 0 2px 4px -2px rgba(16, 24, 40, 0.1);
704
- --shadow-lg:
705
- 0 10px 15px -3px rgba(16, 24, 40, 0.1), 0 4px 6px -4px rgba(16, 24, 40, 0.1);
706
- --shadow-xl:
707
- 0 20px 25px -5px rgba(16, 24, 40, 0.1),
708
- 0 8px 10px -6px rgba(16, 24, 40, 0.1);
709
- --shadow-2xl: 0 25px 50px -12px rgba(16, 24, 40, 0.25);
710
-
711
- --font-sans:
712
- "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
713
- "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
714
- --font-dm-sans:
715
- "DM Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
716
- "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
717
- --font-mazzard:
718
- "Mazzard Soft M", ui-serif, Georgia, Cambria, "Times New Roman", Times,
719
- serif;
720
- --font-ftmade:
721
- "FtMade", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
722
-
723
- --animate-accordion-down: accordion-down 0.2s ease-out;
724
- --animate-accordion-up: accordion-up 0.2s ease-out;
725
-
726
- @keyframes accordion-down {
727
- from {
728
- height: 0;
729
- }
730
- to {
731
- height: var(--radix-accordion-content-height);
732
- }
733
- }
734
- @keyframes accordion-up {
735
- from {
736
- height: var(--radix-accordion-content-height);
737
- }
738
- to {
739
- height: 0;
740
- }
741
- }
742
- }
743
-
744
- /*
745
- The default border color has changed to `currentcolor` in Tailwind CSS v4,
746
- so we've added these compatibility styles to make sure everything still
747
- looks the same as it did with Tailwind CSS v3.
748
-
749
- If we ever want to remove these styles, we need to add an explicit border
750
- color utility to any element that depends on these defaults.
751
- */
752
- @layer base {
753
- *,
754
- ::after,
755
- ::before,
756
- ::backdrop,
757
- ::file-selector-button {
758
- border-color: var(--color-gray-200, currentcolor);
759
- }
760
- }
761
-
762
- @layer base {
763
- /**
764
- * Tailwind CSS theme
765
- * tailwind.config.ts expects the following color variables to be expressed as HSL values.
766
- * A different format will require also updating the theme in tailwind.config.ts.
767
- */
768
- :root {
769
- --background: 0 0% 100%;
770
- --foreground: 230 15% 12%;
771
-
772
- --card: 0 0% 100%;
773
- --card-foreground: 230 15% 12%;
774
-
775
- --popover: 0 0% 100%;
776
- --popover-foreground: 230 15% 12%;
777
-
778
- --primary: 190 84% 29%;
779
- --primary-foreground: 210 40% 98%;
780
-
781
- --secondary: 252 100% 97%;
782
- --secondary-foreground: 255 35% 20%;
783
-
784
- --muted: 240 33% 98%;
785
- --muted-foreground: 230 12% 40%;
786
-
787
- --accent: 255 85% 55%;
788
- --accent-foreground: 210 40% 98%;
789
-
790
- --destructive: 0 72% 51%;
791
- --destructive-foreground: 210 40% 98%;
792
-
793
- --border: 240 13% 92%;
794
- --input: 240 13% 92%;
795
- --ring: 255 85% 55%;
796
-
797
- --radius: 0.625rem;
798
-
799
- /* Utility colors */
800
- --white: 0 0% 100%;
801
- --black: 0 0% 0%;
802
- --coolGrey-400: 225 7% 35%;
803
-
804
- --sidebar-background: 0 0% 98%;
805
- --sidebar-foreground: 240 5.3% 26.1%;
806
- --sidebar-primary: 240 5.9% 10%;
807
- --sidebar-primary-foreground: 0 0% 98%;
808
- --sidebar-accent: 240 4.8% 95.9%;
809
- --sidebar-accent-foreground: 240 5.9% 10%;
810
- --sidebar-border: 220 13% 91%;
811
- --sidebar-ring: 217.2 91.2% 59.8%;
812
- }
813
-
814
- .dark {
815
- --background: 230 15% 9%;
816
- --foreground: 210 40% 98%;
817
-
818
- --card: 230 15% 9%;
819
- --card-foreground: 210 40% 98%;
820
-
821
- --popover: 230 15% 9%;
822
- --popover-foreground: 210 40% 98%;
823
-
824
- --primary: 255 85% 66%;
825
- --primary-foreground: 232 25% 12%;
826
-
827
- --secondary: 240 16% 16%;
828
- --secondary-foreground: 210 40% 98%;
829
-
830
- --muted: 240 16% 16%;
831
- --muted-foreground: 215 20.2% 65.1%;
832
-
833
- --accent: 255 85% 66%;
834
- --accent-foreground: 232 25% 12%;
835
-
836
- --destructive: 0 62.8% 30.6%;
837
- --destructive-foreground: 210 40% 98%;
838
-
839
- --border: 240 14% 18%;
840
- --input: 240 14% 18%;
841
- --ring: 255 85% 66%;
842
- --sidebar-background: 240 5.9% 10%;
843
- --sidebar-foreground: 240 4.8% 95.9%;
844
- --sidebar-primary: 224.3 76.3% 48%;
845
- --sidebar-primary-foreground: 0 0% 100%;
846
- --sidebar-accent: 240 3.7% 15.9%;
847
- --sidebar-accent-foreground: 240 4.8% 95.9%;
848
- --sidebar-border: 240 3.7% 15.9%;
849
- --sidebar-ring: 217.2 91.2% 59.8%;
850
- }
851
- }
852
-
853
- @layer base {
854
- body {
855
- @apply bg-background text-foreground antialiased;
856
- font-feature-settings:
857
- "ss01" on,
858
- "ss03" on,
859
- "cv01" on;
860
- }
861
-
862
- .container-xl {
863
- @apply mx-auto max-w-[calc(1728px+64px)] w-full px-8;
864
- }
865
-
866
- .container-lg {
867
- @apply mx-auto max-w-[calc(1536px+64px)] w-full px-8;
868
- }
869
3
 
870
- .container-sm {
871
- @apply mx-auto max-w-[calc(1072px+64px)] w-full px-8;
872
- }
873
- }