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