@matteoaliano/forest-ui 0.2.0 → 0.2.1

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.
@@ -1,1302 +0,0 @@
1
- import { createTheme } from '@mui/material/styles';
2
-
3
- // src/theme/index.ts
4
-
5
- // src/theme/tokens.ts
6
- var colors = {
7
- base: {
8
- white: "#ffffff",
9
- black: "#000000",
10
- transparent: "#ffffff00"
11
- },
12
- brand: {
13
- 25: "#fcfaff",
14
- 50: "#f9f5ff",
15
- 100: "#f4ebff",
16
- 200: "#e9d7fe",
17
- 300: "#d6bbfb",
18
- 400: "#b692f6",
19
- 500: "#9e77ed",
20
- 600: "#7f56d9",
21
- 700: "#6941c6",
22
- 800: "#53389e",
23
- 900: "#42307d",
24
- 950: "#2c1c5f"
25
- },
26
- gray: {
27
- 25: "#fcfcfd",
28
- 50: "#f9fafb",
29
- 100: "#f2f4f7",
30
- 200: "#eaecf0",
31
- 300: "#d0d5dd",
32
- 400: "#98a2b3",
33
- 500: "#667085",
34
- 600: "#475467",
35
- 700: "#344054",
36
- 800: "#182230",
37
- 900: "#101828",
38
- 950: "#0c111d"
39
- },
40
- error: {
41
- 25: "#fffbfa",
42
- 50: "#fef3f2",
43
- 100: "#fee4e2",
44
- 200: "#fecdca",
45
- 300: "#fda29b",
46
- 400: "#f97066",
47
- 500: "#f04438",
48
- 600: "#d92d20",
49
- 700: "#b42318",
50
- 800: "#912018",
51
- 900: "#7a271a",
52
- 950: "#55160c"
53
- },
54
- warning: {
55
- 25: "#fffcf5",
56
- 50: "#fffaeb",
57
- 100: "#fef0c7",
58
- 200: "#fedf89",
59
- 300: "#fec84b",
60
- 400: "#fdb022",
61
- 500: "#f79009",
62
- 600: "#dc6803",
63
- 700: "#b54708",
64
- 800: "#93370d",
65
- 900: "#7a2e0e",
66
- 950: "#4e1d09"
67
- },
68
- success: {
69
- 25: "#f6fef9",
70
- 50: "#ecfdf3",
71
- 100: "#dcfae6",
72
- 200: "#abefc6",
73
- 300: "#75e0a7",
74
- 400: "#47cd89",
75
- 500: "#17b26a",
76
- 600: "#079455",
77
- 700: "#067647",
78
- 800: "#085d3a",
79
- 900: "#074d31",
80
- 950: "#053321"
81
- },
82
- blue: {
83
- 25: "#f5faff",
84
- 50: "#eff8ff",
85
- 100: "#d1e9ff",
86
- 200: "#b2ddff",
87
- 300: "#84caff",
88
- 400: "#53b1fd",
89
- 500: "#2e90fa",
90
- 600: "#1570ef",
91
- 700: "#175cd3",
92
- 800: "#1849a9",
93
- 900: "#194185",
94
- 950: "#102a56"
95
- }
96
- };
97
- var spacing = {
98
- none: 0,
99
- xxs: 2,
100
- xs: 4,
101
- sm: 6,
102
- md: 8,
103
- lg: 12,
104
- xl: 16,
105
- "2xl": 20,
106
- "3xl": 24,
107
- "4xl": 32,
108
- "5xl": 40,
109
- "6xl": 48,
110
- "7xl": 64,
111
- "8xl": 80,
112
- "9xl": 96,
113
- "10xl": 128,
114
- "11xl": 160
115
- };
116
- var radius = {
117
- none: 0,
118
- xxs: 2,
119
- xs: 4,
120
- sm: 6,
121
- md: 8,
122
- lg: 10,
123
- xl: 12,
124
- "2xl": 16,
125
- "3xl": 20,
126
- "4xl": 24,
127
- full: 9999
128
- };
129
- var shadows = {
130
- xs: "0px 1px 2px 0px #1018280d",
131
- sm: "0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f",
132
- md: "0px 4px 8px -2px #1018281a, 0px 2px 4px -2px #1018280f",
133
- lg: "0px 12px 16px -4px #10182814, 0px 4px 6px -2px #10182808",
134
- xl: "0px 20px 24px -4px #10182814, 0px 8px 8px -4px #10182808",
135
- "2xl": "0px 24px 48px -12px #1018282e",
136
- "3xl": "0px 32px 64px -12px #10182824"
137
- };
138
- var focusRings = {
139
- brand: "0px 0px 0px 4px #9e77ed3d",
140
- brandShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #9e77ed3d",
141
- brandShadowSm: "0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #9e77ed3d",
142
- gray: "0px 0px 0px 4px #98a2b324",
143
- grayShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #98a2b324",
144
- grayShadowSm: "0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #98a2b324",
145
- error: "0px 0px 0px 4px #f044383d",
146
- errorShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #f044383d"
147
- };
148
- var fontFamily = '"Poppins", sans-serif';
149
- var fontSize = {
150
- xxs: 11,
151
- xs: 12,
152
- sm: 14,
153
- md: 16,
154
- lg: 18,
155
- xl: 20
156
- };
157
- var lineHeight = {
158
- xxs: "16px",
159
- xs: "18px",
160
- sm: "20px",
161
- md: "24px",
162
- lg: "28px",
163
- xl: "30px"
164
- };
165
- var fontWeight = {
166
- regular: 400,
167
- medium: 500,
168
- semibold: 600,
169
- bold: 700
170
- };
171
- var display = {
172
- "2xl": { fontSize: 72, lineHeight: "90px", letterSpacing: "-0.02em" },
173
- xl: { fontSize: 60, lineHeight: "72px", letterSpacing: "-0.02em" },
174
- lg: { fontSize: 48, lineHeight: "60px", letterSpacing: "-0.02em" },
175
- md: { fontSize: 36, lineHeight: "44px", letterSpacing: "-0.02em" },
176
- sm: { fontSize: 30, lineHeight: "38px" },
177
- xs: { fontSize: 24, lineHeight: "32px" }
178
- };
179
- var container = {
180
- maxWidthDesktop: 1280,
181
- paddingDesktop: 32,
182
- paddingMobile: 16
183
- };
184
- var widths = {
185
- xxs: 320,
186
- xs: 384,
187
- sm: 480,
188
- md: 560,
189
- lg: 640,
190
- xl: 768,
191
- "2xl": 1024,
192
- "3xl": 1280,
193
- "4xl": 1440,
194
- "5xl": 1600,
195
- "6xl": 1920
196
- };
197
-
198
- // src/theme/palette.ts
199
- var palette = {
200
- primary: {
201
- main: colors.brand[600],
202
- light: colors.brand[400],
203
- dark: colors.brand[700],
204
- contrastText: colors.base.white
205
- },
206
- secondary: {
207
- main: colors.gray[600],
208
- light: colors.gray[400],
209
- dark: colors.gray[700],
210
- contrastText: colors.base.white
211
- },
212
- error: {
213
- main: colors.error[600],
214
- light: colors.error[300],
215
- dark: colors.error[700],
216
- contrastText: colors.base.white
217
- },
218
- warning: {
219
- main: colors.warning[600],
220
- light: colors.warning[300],
221
- dark: colors.warning[700],
222
- contrastText: colors.base.white
223
- },
224
- success: {
225
- main: colors.success[600],
226
- light: colors.success[300],
227
- dark: colors.success[700],
228
- contrastText: colors.base.white
229
- },
230
- info: {
231
- main: colors.blue[600],
232
- light: colors.blue[300],
233
- dark: colors.blue[700],
234
- contrastText: colors.base.white
235
- },
236
- background: {
237
- default: colors.base.white,
238
- paper: colors.base.white
239
- },
240
- text: {
241
- primary: colors.gray[900],
242
- secondary: colors.gray[700],
243
- disabled: colors.gray[500]
244
- },
245
- divider: colors.gray[200],
246
- action: {
247
- active: colors.gray[600],
248
- hover: colors.gray[50],
249
- selected: colors.brand[50],
250
- disabled: colors.gray[400],
251
- disabledBackground: colors.gray[100]
252
- }
253
- };
254
-
255
- // src/theme/typography.ts
256
- var typography = {
257
- fontFamily,
258
- fontWeightRegular: fontWeight.regular,
259
- fontWeightMedium: fontWeight.medium,
260
- fontWeightBold: fontWeight.bold,
261
- // Display styles → MUI headings
262
- h1: {
263
- fontSize: display.xl.fontSize,
264
- lineHeight: display.xl.lineHeight,
265
- letterSpacing: display.xl.letterSpacing,
266
- fontWeight: fontWeight.semibold
267
- },
268
- h2: {
269
- fontSize: display.lg.fontSize,
270
- lineHeight: display.lg.lineHeight,
271
- letterSpacing: display.lg.letterSpacing,
272
- fontWeight: fontWeight.semibold
273
- },
274
- h3: {
275
- fontSize: display.md.fontSize,
276
- lineHeight: display.md.lineHeight,
277
- letterSpacing: display.md.letterSpacing,
278
- fontWeight: fontWeight.semibold
279
- },
280
- h4: {
281
- fontSize: display.sm.fontSize,
282
- lineHeight: display.sm.lineHeight,
283
- fontWeight: fontWeight.semibold
284
- },
285
- h5: {
286
- fontSize: display.xs.fontSize,
287
- lineHeight: display.xs.lineHeight,
288
- fontWeight: fontWeight.semibold
289
- },
290
- h6: {
291
- fontSize: fontSize.xl,
292
- lineHeight: lineHeight.xl,
293
- fontWeight: fontWeight.semibold
294
- },
295
- subtitle1: {
296
- fontSize: fontSize.lg,
297
- lineHeight: lineHeight.lg,
298
- fontWeight: fontWeight.medium
299
- },
300
- subtitle2: {
301
- fontSize: fontSize.md,
302
- lineHeight: lineHeight.md,
303
- fontWeight: fontWeight.medium
304
- },
305
- body1: {
306
- fontSize: fontSize.md,
307
- lineHeight: lineHeight.md,
308
- fontWeight: fontWeight.regular
309
- },
310
- body2: {
311
- fontSize: fontSize.sm,
312
- lineHeight: lineHeight.sm,
313
- fontWeight: fontWeight.regular
314
- },
315
- caption: {
316
- fontSize: fontSize.xs,
317
- lineHeight: lineHeight.xs,
318
- fontWeight: fontWeight.regular
319
- },
320
- overline: {
321
- fontSize: fontSize.xxs,
322
- lineHeight: lineHeight.xxs,
323
- fontWeight: fontWeight.medium,
324
- textTransform: "uppercase",
325
- letterSpacing: "0.08em"
326
- },
327
- button: {
328
- fontSize: fontSize.sm,
329
- lineHeight: lineHeight.sm,
330
- fontWeight: fontWeight.semibold,
331
- textTransform: "none"
332
- }
333
- };
334
-
335
- // src/theme/components.ts
336
- var components = {
337
- // ─── Button ─────────────────────────────────────────────────────
338
- MuiButton: {
339
- defaultProps: {
340
- disableElevation: true
341
- },
342
- styleOverrides: {
343
- root: {
344
- borderRadius: radius.md,
345
- fontWeight: 600,
346
- "&:focus-visible": {
347
- boxShadow: focusRings.brandShadowXs
348
- }
349
- },
350
- sizeLarge: {
351
- padding: "12px 20px",
352
- fontSize: 16,
353
- lineHeight: "24px"
354
- },
355
- sizeMedium: {
356
- padding: "10px 16px",
357
- fontSize: 14,
358
- lineHeight: "20px"
359
- },
360
- sizeSmall: {
361
- padding: "8px 14px",
362
- fontSize: 14,
363
- lineHeight: "20px"
364
- },
365
- containedPrimary: {
366
- backgroundColor: colors.brand[600],
367
- "&:hover": {
368
- backgroundColor: colors.brand[700]
369
- }
370
- },
371
- outlinedPrimary: {
372
- borderColor: colors.brand[300],
373
- color: colors.brand[700],
374
- "&:hover": {
375
- backgroundColor: colors.brand[50],
376
- borderColor: colors.brand[300]
377
- }
378
- },
379
- textPrimary: {
380
- color: colors.brand[700],
381
- "&:hover": {
382
- backgroundColor: colors.brand[50]
383
- }
384
- }
385
- }
386
- },
387
- // ─── Button Group ───────────────────────────────────────────────
388
- MuiButtonGroup: {
389
- defaultProps: {
390
- disableElevation: true
391
- },
392
- styleOverrides: {
393
- root: {
394
- borderRadius: radius.md
395
- },
396
- grouped: {
397
- "&:not(:last-of-type)": {
398
- borderRight: `1px solid ${colors.brand[700]}`
399
- }
400
- }
401
- }
402
- },
403
- // ─── FAB ────────────────────────────────────────────────────────
404
- MuiFab: {
405
- styleOverrides: {
406
- root: {
407
- boxShadow: shadows.md,
408
- "&:hover": {
409
- boxShadow: shadows.lg
410
- },
411
- "&:focus-visible": {
412
- boxShadow: focusRings.brandShadowSm
413
- }
414
- },
415
- primary: {
416
- backgroundColor: colors.brand[600],
417
- "&:hover": {
418
- backgroundColor: colors.brand[700]
419
- }
420
- }
421
- }
422
- },
423
- // ─── TextField / Input ──────────────────────────────────────────
424
- MuiTextField: {
425
- defaultProps: {
426
- variant: "outlined",
427
- size: "small"
428
- }
429
- },
430
- MuiOutlinedInput: {
431
- styleOverrides: {
432
- root: {
433
- borderRadius: radius.md,
434
- "&:hover .MuiOutlinedInput-notchedOutline": {
435
- borderColor: colors.brand[300]
436
- },
437
- "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
438
- borderColor: colors.brand[600],
439
- borderWidth: 1,
440
- boxShadow: focusRings.brand
441
- },
442
- "&.Mui-error .MuiOutlinedInput-notchedOutline": {
443
- borderColor: colors.error[300]
444
- },
445
- "&.Mui-error.Mui-focused .MuiOutlinedInput-notchedOutline": {
446
- borderColor: colors.error[600],
447
- boxShadow: focusRings.error
448
- }
449
- },
450
- notchedOutline: {
451
- borderColor: colors.gray[300]
452
- },
453
- input: {
454
- padding: "10px 14px",
455
- fontSize: 16,
456
- lineHeight: "24px",
457
- "&::placeholder": {
458
- color: colors.gray[500],
459
- opacity: 1
460
- }
461
- },
462
- inputSizeSmall: {
463
- padding: "8px 12px",
464
- fontSize: 14,
465
- lineHeight: "20px"
466
- }
467
- }
468
- },
469
- MuiInputLabel: {
470
- styleOverrides: {
471
- root: {
472
- fontSize: 14,
473
- fontWeight: 500,
474
- color: colors.gray[700],
475
- "&.Mui-focused": {
476
- color: colors.gray[700]
477
- },
478
- "&.Mui-error": {
479
- color: colors.error[600]
480
- }
481
- }
482
- }
483
- },
484
- MuiFormHelperText: {
485
- styleOverrides: {
486
- root: {
487
- fontSize: 14,
488
- lineHeight: "20px",
489
- marginTop: 6,
490
- marginLeft: 0,
491
- "&.Mui-error": {
492
- color: colors.error[600]
493
- }
494
- }
495
- }
496
- },
497
- // ─── Select ─────────────────────────────────────────────────────
498
- MuiSelect: {
499
- defaultProps: {
500
- size: "small"
501
- },
502
- styleOverrides: {
503
- icon: {
504
- color: colors.gray[500]
505
- }
506
- }
507
- },
508
- // ─── Autocomplete ───────────────────────────────────────────────
509
- MuiAutocomplete: {
510
- styleOverrides: {
511
- paper: {
512
- borderRadius: radius.md,
513
- boxShadow: shadows.lg,
514
- border: `1px solid ${colors.gray[200]}`,
515
- marginTop: 4
516
- },
517
- option: {
518
- fontSize: 16,
519
- lineHeight: "24px",
520
- padding: "10px 14px",
521
- "&.Mui-focused": {
522
- backgroundColor: colors.gray[50]
523
- },
524
- '&[aria-selected="true"]': {
525
- backgroundColor: colors.brand[50]
526
- }
527
- },
528
- listbox: {
529
- padding: 4
530
- }
531
- }
532
- },
533
- // ─── Checkbox ───────────────────────────────────────────────────
534
- MuiCheckbox: {
535
- defaultProps: {
536
- disableRipple: true
537
- },
538
- styleOverrides: {
539
- root: {
540
- color: colors.gray[300],
541
- borderRadius: radius.xs,
542
- padding: 0,
543
- width: 20,
544
- height: 20,
545
- "&:hover": {
546
- backgroundColor: "transparent",
547
- color: colors.brand[600]
548
- },
549
- "&.Mui-checked": {
550
- color: colors.brand[600]
551
- },
552
- "&.Mui-checked:hover": {
553
- color: colors.brand[700]
554
- },
555
- "&.Mui-focusVisible": {
556
- outline: "none",
557
- boxShadow: focusRings.brand,
558
- borderRadius: radius.xs
559
- },
560
- "&.Mui-disabled": {
561
- color: colors.gray[300]
562
- }
563
- }
564
- }
565
- },
566
- // ─── Radio ──────────────────────────────────────────────────────
567
- MuiRadio: {
568
- defaultProps: {
569
- disableRipple: true
570
- },
571
- styleOverrides: {
572
- root: {
573
- color: colors.gray[300],
574
- padding: 0,
575
- "&:hover": {
576
- backgroundColor: "transparent",
577
- color: colors.brand[600]
578
- },
579
- "&.Mui-checked": {
580
- color: colors.brand[600]
581
- },
582
- "&.Mui-checked:hover": {
583
- color: colors.brand[700]
584
- },
585
- "&.Mui-focusVisible": {
586
- outline: "none",
587
- boxShadow: focusRings.brand,
588
- borderRadius: radius.full
589
- },
590
- "&.Mui-disabled": {
591
- color: colors.gray[300]
592
- }
593
- }
594
- }
595
- },
596
- // ─── Switch ─────────────────────────────────────────────────────
597
- MuiSwitch: {
598
- defaultProps: {
599
- disableRipple: true
600
- },
601
- styleOverrides: {
602
- root: {
603
- width: 44,
604
- height: 24,
605
- padding: 0
606
- },
607
- switchBase: {
608
- padding: 2,
609
- "&.Mui-checked": {
610
- transform: "translateX(20px)",
611
- color: colors.base.white,
612
- "& + .MuiSwitch-track": {
613
- backgroundColor: colors.brand[600],
614
- opacity: 1
615
- }
616
- },
617
- "&.Mui-checked:hover + .MuiSwitch-track": {
618
- backgroundColor: colors.brand[700]
619
- },
620
- "&.Mui-focusVisible .MuiSwitch-thumb": {
621
- boxShadow: focusRings.brand
622
- },
623
- "&.Mui-disabled .MuiSwitch-thumb": {
624
- color: colors.gray[100]
625
- },
626
- "&.Mui-disabled + .MuiSwitch-track": {
627
- opacity: 0.5
628
- }
629
- },
630
- thumb: {
631
- width: 20,
632
- height: 20,
633
- boxShadow: "0px 1px 2px 0px #1018280d"
634
- },
635
- track: {
636
- borderRadius: radius.full,
637
- backgroundColor: colors.gray[200],
638
- opacity: 1
639
- }
640
- }
641
- },
642
- // ─── Toggle Button ─────────────────────────────────────────────
643
- MuiToggleButton: {
644
- styleOverrides: {
645
- root: {
646
- borderRadius: radius.md,
647
- borderColor: colors.gray[300],
648
- color: colors.gray[700],
649
- fontSize: 14,
650
- fontWeight: 600,
651
- lineHeight: "20px",
652
- padding: "8px 14px",
653
- textTransform: "none",
654
- "&:hover": {
655
- backgroundColor: colors.gray[50]
656
- },
657
- "&.Mui-selected": {
658
- backgroundColor: colors.brand[50],
659
- color: colors.brand[700],
660
- borderColor: colors.brand[300],
661
- "&:hover": {
662
- backgroundColor: colors.brand[100]
663
- }
664
- },
665
- "&:focus-visible": {
666
- boxShadow: focusRings.brandShadowXs
667
- }
668
- }
669
- }
670
- },
671
- MuiToggleButtonGroup: {
672
- styleOverrides: {
673
- root: {
674
- borderRadius: radius.md
675
- },
676
- grouped: {
677
- "&:not(:first-of-type)": {
678
- borderRadius: radius.md,
679
- marginLeft: -1
680
- },
681
- "&:first-of-type": {
682
- borderRadius: radius.md
683
- }
684
- }
685
- }
686
- },
687
- // ─── Card ───────────────────────────────────────────────────────
688
- MuiCard: {
689
- defaultProps: {
690
- elevation: 0
691
- },
692
- styleOverrides: {
693
- root: {
694
- borderRadius: radius.xl,
695
- border: `1px solid ${colors.gray[200]}`,
696
- backgroundColor: colors.base.white,
697
- overflow: "hidden"
698
- }
699
- }
700
- },
701
- MuiCardContent: {
702
- styleOverrides: {
703
- root: {
704
- padding: "24px",
705
- "&:last-child": {
706
- paddingBottom: "24px"
707
- }
708
- }
709
- }
710
- },
711
- MuiCardHeader: {
712
- styleOverrides: {
713
- root: {
714
- padding: "24px 24px 0 24px"
715
- },
716
- title: {
717
- fontSize: 18,
718
- fontWeight: 600,
719
- lineHeight: "28px"
720
- },
721
- subheader: {
722
- fontSize: 14,
723
- lineHeight: "20px",
724
- marginTop: 4
725
- },
726
- action: {
727
- marginTop: -4,
728
- marginRight: -4
729
- }
730
- }
731
- },
732
- // ─── Paper ──────────────────────────────────────────────────────
733
- MuiPaper: {
734
- defaultProps: {
735
- elevation: 0
736
- },
737
- styleOverrides: {
738
- root: {
739
- backgroundImage: "none"
740
- },
741
- rounded: {
742
- borderRadius: radius.lg
743
- },
744
- elevation1: {
745
- boxShadow: shadows.xs,
746
- border: `1px solid ${colors.gray[200]}`
747
- },
748
- elevation2: {
749
- boxShadow: shadows.sm,
750
- border: `1px solid ${colors.gray[200]}`
751
- },
752
- elevation3: {
753
- boxShadow: shadows.md,
754
- border: `1px solid ${colors.gray[200]}`
755
- },
756
- elevation4: {
757
- boxShadow: shadows.lg,
758
- border: `1px solid ${colors.gray[200]}`
759
- },
760
- elevation8: {
761
- boxShadow: shadows.xl,
762
- border: `1px solid ${colors.gray[200]}`
763
- },
764
- elevation16: {
765
- boxShadow: shadows["2xl"],
766
- border: `1px solid ${colors.gray[200]}`
767
- },
768
- elevation24: {
769
- boxShadow: shadows["3xl"],
770
- border: `1px solid ${colors.gray[200]}`
771
- }
772
- }
773
- },
774
- // ─── Accordion ──────────────────────────────────────────────────
775
- MuiAccordion: {
776
- defaultProps: {
777
- disableGutters: true,
778
- elevation: 0
779
- },
780
- styleOverrides: {
781
- root: {
782
- border: `1px solid ${colors.gray[200]}`,
783
- borderRadius: radius.lg,
784
- "&:not(:last-child)": {
785
- marginBottom: 8
786
- },
787
- "&:before": {
788
- display: "none"
789
- },
790
- "&.Mui-expanded": {
791
- margin: 0,
792
- marginBottom: 8,
793
- borderRadius: radius.lg
794
- }
795
- }
796
- }
797
- },
798
- MuiAccordionSummary: {
799
- styleOverrides: {
800
- root: {
801
- padding: "0 24px",
802
- minHeight: 56,
803
- "&.Mui-expanded": {
804
- minHeight: 56,
805
- borderBottom: `1px solid ${colors.gray[200]}`
806
- }
807
- },
808
- content: {
809
- margin: "12px 0",
810
- "&.Mui-expanded": {
811
- margin: "12px 0"
812
- }
813
- }
814
- }
815
- },
816
- MuiAccordionDetails: {
817
- styleOverrides: {
818
- root: {
819
- padding: "24px"
820
- }
821
- }
822
- },
823
- // ─── AppBar ─────────────────────────────────────────────────────
824
- MuiAppBar: {
825
- defaultProps: {
826
- elevation: 0,
827
- color: "transparent"
828
- },
829
- styleOverrides: {
830
- root: {
831
- borderBottom: `1px solid ${colors.gray[200]}`,
832
- backgroundColor: colors.base.white
833
- }
834
- }
835
- },
836
- MuiToolbar: {
837
- styleOverrides: {
838
- root: {
839
- minHeight: 64,
840
- "@media (min-width: 600px)": {
841
- minHeight: 64
842
- }
843
- },
844
- dense: {
845
- minHeight: 48,
846
- "@media (min-width: 600px)": {
847
- minHeight: 48
848
- }
849
- }
850
- }
851
- },
852
- // ─── Chip ───────────────────────────────────────────────────────
853
- MuiChip: {
854
- styleOverrides: {
855
- root: {
856
- borderRadius: radius.md,
857
- fontWeight: 500,
858
- fontSize: 14
859
- }
860
- }
861
- },
862
- // ─── Form Control / Label ───────────────────────────────────────
863
- MuiFormControlLabel: {
864
- styleOverrides: {
865
- root: {
866
- marginLeft: 0,
867
- gap: 8
868
- },
869
- label: {
870
- fontSize: 14,
871
- lineHeight: "20px",
872
- fontWeight: 500,
873
- color: colors.gray[700]
874
- }
875
- }
876
- },
877
- // ─── Table ───────────────────────────────────────────────────────
878
- MuiTable: {
879
- styleOverrides: {
880
- root: {
881
- borderCollapse: "separate",
882
- borderSpacing: 0
883
- }
884
- }
885
- },
886
- MuiTableCell: {
887
- styleOverrides: {
888
- root: {
889
- borderBottom: `1px solid ${colors.gray[200]}`,
890
- padding: "16px 24px",
891
- fontSize: 14,
892
- lineHeight: "20px",
893
- color: colors.gray[600]
894
- },
895
- head: {
896
- backgroundColor: colors.gray[50],
897
- color: colors.gray[600],
898
- fontWeight: 500,
899
- fontSize: 12,
900
- lineHeight: "18px"
901
- },
902
- body: {
903
- color: colors.gray[600]
904
- }
905
- }
906
- },
907
- MuiTableHead: {
908
- styleOverrides: {
909
- root: {
910
- backgroundColor: colors.gray[50],
911
- borderBottom: `1px solid ${colors.gray[200]}`
912
- }
913
- }
914
- },
915
- MuiTableRow: {
916
- styleOverrides: {
917
- root: {
918
- "&:last-child td, &:last-child th": {
919
- border: 0
920
- },
921
- "&:hover": {
922
- backgroundColor: colors.gray[50]
923
- },
924
- "&.Mui-selected": {
925
- backgroundColor: colors.brand[50],
926
- "&:hover": {
927
- backgroundColor: colors.brand[50]
928
- }
929
- }
930
- }
931
- }
932
- },
933
- MuiTableContainer: {
934
- styleOverrides: {
935
- root: {
936
- borderRadius: radius.xl,
937
- border: `1px solid ${colors.gray[200]}`,
938
- boxShadow: "none"
939
- }
940
- }
941
- },
942
- // ─── Badge ──────────────────────────────────────────────────────
943
- MuiBadge: {
944
- styleOverrides: {
945
- standard: {
946
- fontWeight: 500,
947
- fontSize: 12,
948
- lineHeight: "18px",
949
- minWidth: 20,
950
- height: 20,
951
- borderRadius: radius.full
952
- },
953
- colorPrimary: {
954
- backgroundColor: colors.brand[600]
955
- },
956
- colorError: {
957
- backgroundColor: colors.error[600]
958
- },
959
- colorSuccess: {
960
- backgroundColor: colors.success[600]
961
- },
962
- colorWarning: {
963
- backgroundColor: colors.warning[600]
964
- },
965
- dot: {
966
- minWidth: 8,
967
- height: 8,
968
- borderRadius: radius.full
969
- }
970
- }
971
- },
972
- // ─── Divider ────────────────────────────────────────────────────
973
- MuiDivider: {
974
- styleOverrides: {
975
- root: {
976
- borderColor: colors.gray[200]
977
- }
978
- }
979
- },
980
- // ─── List ───────────────────────────────────────────────────────
981
- MuiList: {
982
- styleOverrides: {
983
- root: {
984
- padding: 4
985
- }
986
- }
987
- },
988
- MuiListItemButton: {
989
- styleOverrides: {
990
- root: {
991
- borderRadius: radius.sm,
992
- padding: "8px 12px",
993
- "&:hover": {
994
- backgroundColor: colors.gray[50]
995
- },
996
- "&.Mui-selected": {
997
- backgroundColor: colors.brand[50],
998
- color: colors.brand[700],
999
- "&:hover": {
1000
- backgroundColor: colors.brand[100]
1001
- }
1002
- }
1003
- }
1004
- }
1005
- },
1006
- MuiListItemIcon: {
1007
- styleOverrides: {
1008
- root: {
1009
- minWidth: 36,
1010
- color: colors.gray[500]
1011
- }
1012
- }
1013
- },
1014
- MuiListItemText: {
1015
- styleOverrides: {
1016
- primary: {
1017
- fontSize: 14,
1018
- lineHeight: "20px",
1019
- fontWeight: 500,
1020
- color: colors.gray[700]
1021
- },
1022
- secondary: {
1023
- fontSize: 14,
1024
- lineHeight: "20px",
1025
- color: colors.gray[500]
1026
- }
1027
- }
1028
- },
1029
- // ─── Tooltip ────────────────────────────────────────────────────
1030
- MuiTooltip: {
1031
- styleOverrides: {
1032
- tooltip: {
1033
- backgroundColor: colors.gray[900],
1034
- color: colors.base.white,
1035
- fontSize: 12,
1036
- lineHeight: "18px",
1037
- fontWeight: 600,
1038
- padding: "8px 12px",
1039
- borderRadius: radius.md,
1040
- boxShadow: shadows.lg
1041
- },
1042
- arrow: {
1043
- color: colors.gray[900]
1044
- }
1045
- }
1046
- },
1047
- // ─── Alert ──────────────────────────────────────────────────────
1048
- MuiAlert: {
1049
- defaultProps: {
1050
- variant: "standard"
1051
- },
1052
- styleOverrides: {
1053
- root: {
1054
- borderRadius: radius.xl,
1055
- fontSize: 14,
1056
- lineHeight: "20px",
1057
- padding: "12px 16px"
1058
- },
1059
- standardError: {
1060
- backgroundColor: colors.error[50],
1061
- color: colors.error[700],
1062
- border: `1px solid ${colors.error[300]}`,
1063
- "& .MuiAlert-icon": {
1064
- color: colors.error[600]
1065
- }
1066
- },
1067
- standardWarning: {
1068
- backgroundColor: colors.warning[50],
1069
- color: colors.warning[700],
1070
- border: `1px solid ${colors.warning[300]}`,
1071
- "& .MuiAlert-icon": {
1072
- color: colors.warning[600]
1073
- }
1074
- },
1075
- standardSuccess: {
1076
- backgroundColor: colors.success[50],
1077
- color: colors.success[700],
1078
- border: `1px solid ${colors.success[300]}`,
1079
- "& .MuiAlert-icon": {
1080
- color: colors.success[600]
1081
- }
1082
- },
1083
- standardInfo: {
1084
- backgroundColor: colors.blue[50],
1085
- color: colors.blue[700],
1086
- border: `1px solid ${colors.blue[300]}`,
1087
- "& .MuiAlert-icon": {
1088
- color: colors.blue[600]
1089
- }
1090
- },
1091
- icon: {
1092
- padding: "2px 0"
1093
- }
1094
- }
1095
- },
1096
- MuiAlertTitle: {
1097
- styleOverrides: {
1098
- root: {
1099
- fontWeight: 600,
1100
- fontSize: 14,
1101
- lineHeight: "20px",
1102
- marginBottom: 4
1103
- }
1104
- }
1105
- },
1106
- // ─── Backdrop ───────────────────────────────────────────────────
1107
- MuiBackdrop: {
1108
- styleOverrides: {
1109
- root: {
1110
- backgroundColor: "rgba(16, 24, 40, 0.7)"
1111
- }
1112
- }
1113
- },
1114
- // ─── Dialog ─────────────────────────────────────────────────────
1115
- MuiDialog: {
1116
- styleOverrides: {
1117
- paper: {
1118
- borderRadius: radius.xl,
1119
- boxShadow: shadows.xl,
1120
- padding: 0
1121
- }
1122
- }
1123
- },
1124
- MuiDialogTitle: {
1125
- styleOverrides: {
1126
- root: {
1127
- fontSize: 18,
1128
- lineHeight: "28px",
1129
- fontWeight: 600,
1130
- color: colors.gray[900],
1131
- padding: "24px 24px 0"
1132
- }
1133
- }
1134
- },
1135
- MuiDialogContent: {
1136
- styleOverrides: {
1137
- root: {
1138
- padding: "20px 24px",
1139
- fontSize: 14,
1140
- lineHeight: "20px",
1141
- color: colors.gray[600]
1142
- }
1143
- }
1144
- },
1145
- MuiDialogActions: {
1146
- styleOverrides: {
1147
- root: {
1148
- padding: "0 24px 24px",
1149
- gap: 12
1150
- }
1151
- }
1152
- },
1153
- // ─── Progress ───────────────────────────────────────────────────
1154
- MuiLinearProgress: {
1155
- styleOverrides: {
1156
- root: {
1157
- borderRadius: radius.full,
1158
- height: 8,
1159
- backgroundColor: colors.gray[200]
1160
- },
1161
- barColorPrimary: {
1162
- backgroundColor: colors.brand[600],
1163
- borderRadius: radius.full
1164
- },
1165
- barColorSecondary: {
1166
- backgroundColor: colors.gray[600],
1167
- borderRadius: radius.full
1168
- }
1169
- }
1170
- },
1171
- MuiCircularProgress: {
1172
- styleOverrides: {
1173
- colorPrimary: {
1174
- color: colors.brand[600]
1175
- },
1176
- colorSecondary: {
1177
- color: colors.gray[600]
1178
- }
1179
- }
1180
- },
1181
- // ─── Skeleton ───────────────────────────────────────────────────
1182
- MuiSkeleton: {
1183
- defaultProps: {
1184
- animation: "wave"
1185
- },
1186
- styleOverrides: {
1187
- root: {
1188
- backgroundColor: colors.gray[100]
1189
- },
1190
- rounded: {
1191
- borderRadius: radius.md
1192
- },
1193
- circular: {
1194
- borderRadius: radius.full
1195
- }
1196
- }
1197
- },
1198
- // ─── Snackbar ───────────────────────────────────────────────────
1199
- MuiSnackbarContent: {
1200
- styleOverrides: {
1201
- root: {
1202
- backgroundColor: colors.gray[900],
1203
- color: colors.base.white,
1204
- borderRadius: radius.xl,
1205
- boxShadow: shadows.lg,
1206
- fontSize: 14,
1207
- lineHeight: "20px",
1208
- fontWeight: 500,
1209
- padding: "6px 16px"
1210
- }
1211
- }
1212
- },
1213
- // ─── Typography ─────────────────────────────────────────────────
1214
- MuiTypography: {
1215
- defaultProps: {
1216
- variantMapping: {
1217
- h1: "h1",
1218
- h2: "h2",
1219
- h3: "h3",
1220
- h4: "h4",
1221
- h5: "h5",
1222
- h6: "h6",
1223
- subtitle1: "p",
1224
- subtitle2: "p",
1225
- body1: "p",
1226
- body2: "p",
1227
- caption: "span",
1228
- overline: "span"
1229
- }
1230
- }
1231
- }
1232
- };
1233
-
1234
- // src/theme/shadows.ts
1235
- var shadows2 = [
1236
- "none",
1237
- // 0
1238
- shadows.xs,
1239
- // 1
1240
- shadows.sm,
1241
- // 2
1242
- shadows.sm,
1243
- // 3
1244
- shadows.md,
1245
- // 4
1246
- shadows.md,
1247
- // 5
1248
- shadows.md,
1249
- // 6
1250
- shadows.lg,
1251
- // 7
1252
- shadows.lg,
1253
- // 8
1254
- shadows.lg,
1255
- // 9
1256
- shadows.xl,
1257
- // 10
1258
- shadows.xl,
1259
- // 11
1260
- shadows.xl,
1261
- // 12
1262
- shadows["2xl"],
1263
- // 13
1264
- shadows["2xl"],
1265
- // 14
1266
- shadows["2xl"],
1267
- // 15
1268
- shadows["3xl"],
1269
- // 16
1270
- shadows["3xl"],
1271
- // 17
1272
- shadows["3xl"],
1273
- // 18
1274
- shadows["3xl"],
1275
- // 19
1276
- shadows["3xl"],
1277
- // 20
1278
- shadows["3xl"],
1279
- // 21
1280
- shadows["3xl"],
1281
- // 22
1282
- shadows["3xl"],
1283
- // 23
1284
- shadows["3xl"]
1285
- // 24
1286
- ];
1287
-
1288
- // src/theme/index.ts
1289
- var forestThemeOptions = {
1290
- palette,
1291
- typography,
1292
- components,
1293
- shadows: shadows2,
1294
- shape: {
1295
- borderRadius: 8
1296
- }
1297
- };
1298
- var forestTheme = createTheme(forestThemeOptions);
1299
-
1300
- export { colors, components, container, display, focusRings, fontFamily, fontSize, fontWeight, forestTheme, forestThemeOptions, lineHeight, palette, radius, shadows, shadows2, spacing, typography, widths };
1301
- //# sourceMappingURL=chunk-2HGULC2Q.mjs.map
1302
- //# sourceMappingURL=chunk-2HGULC2Q.mjs.map