@matteoaliano/forest-ui 0.2.5 → 0.2.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{chunk-CQX6QWMF.mjs → chunk-3FSKMCSC.mjs} +570 -207
- package/dist/chunk-3FSKMCSC.mjs.map +1 -0
- package/dist/{index-lqHy9CQ4.d.mts → index-DoEC7Q1q.d.mts} +31 -21
- package/dist/{index-lqHy9CQ4.d.ts → index-DoEC7Q1q.d.ts} +31 -21
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +568 -204
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +2 -2
- package/dist/theme.d.mts +1 -1
- package/dist/theme.d.ts +1 -1
- package/dist/theme.js +568 -204
- package/dist/theme.js.map +1 -1
- package/dist/theme.mjs +1 -1
- package/fonts/aeonik/aeonik-bold.woff +0 -0
- package/fonts/aeonik/aeonik-bold.woff2 +0 -0
- package/fonts/aeonik/aeonik-medium.woff +0 -0
- package/fonts/aeonik/aeonik-medium.woff2 +0 -0
- package/fonts/aeonik/aeonik-regular.woff +0 -0
- package/fonts/aeonik/aeonik-regular.woff2 +0 -0
- package/fonts/aeonik/aeonik-semibold.woff +0 -0
- package/fonts/aeonik/aeonik-semibold.woff2 +0 -0
- package/fonts/aeonik/aeonik.css +42 -0
- package/guidelines/FOREST_AI_GUIDELINES.md +1 -1
- package/guidelines/FOREST_DEV_GUIDELINES.md +39 -8
- package/guidelines/themes/FOREST_THEME_ALKEMY_PLUS.md +139 -0
- package/guidelines/themes/FOREST_THEME_DEFAULT.md +1 -1
- package/package.json +5 -3
- package/dist/chunk-CQX6QWMF.mjs.map +0 -1
|
@@ -220,12 +220,12 @@ var text = {
|
|
|
220
220
|
var bg = {
|
|
221
221
|
primary: colors.gray[50],
|
|
222
222
|
primaryAlt: colors.gray[50],
|
|
223
|
-
primaryHover: colors.gray[
|
|
223
|
+
primaryHover: colors.gray[100],
|
|
224
224
|
primarySolid: colors.gray[950],
|
|
225
225
|
secondary: colors.base.white,
|
|
226
226
|
secondaryAlt: colors.base.white,
|
|
227
227
|
secondarySubtle: colors.gray[25],
|
|
228
|
-
secondaryHover: colors.gray[
|
|
228
|
+
secondaryHover: colors.gray[50],
|
|
229
229
|
secondarySolid: colors.gray[600],
|
|
230
230
|
tertiary: colors.gray[100],
|
|
231
231
|
quaternary: colors.gray[200],
|
|
@@ -436,60 +436,60 @@ var alpha = {
|
|
|
436
436
|
|
|
437
437
|
// src/theme/palette.ts
|
|
438
438
|
function buildPalette(tokens) {
|
|
439
|
-
const { colors:
|
|
439
|
+
const { colors: colors3, text: text3, bg: bg3, fg: fg3, border: border3 } = tokens;
|
|
440
440
|
return {
|
|
441
441
|
primary: {
|
|
442
|
-
main:
|
|
443
|
-
light:
|
|
444
|
-
dark:
|
|
445
|
-
contrastText:
|
|
442
|
+
main: colors3.brand[600],
|
|
443
|
+
light: colors3.brand[400],
|
|
444
|
+
dark: colors3.brand[700],
|
|
445
|
+
contrastText: colors3.base.white
|
|
446
446
|
},
|
|
447
447
|
secondary: {
|
|
448
|
-
main:
|
|
449
|
-
light:
|
|
450
|
-
dark:
|
|
451
|
-
contrastText:
|
|
448
|
+
main: colors3.gray[600],
|
|
449
|
+
light: colors3.gray[400],
|
|
450
|
+
dark: colors3.gray[700],
|
|
451
|
+
contrastText: colors3.base.white
|
|
452
452
|
},
|
|
453
453
|
error: {
|
|
454
|
-
main:
|
|
455
|
-
light:
|
|
456
|
-
dark:
|
|
457
|
-
contrastText:
|
|
454
|
+
main: colors3.error[600],
|
|
455
|
+
light: colors3.error[300],
|
|
456
|
+
dark: colors3.error[700],
|
|
457
|
+
contrastText: colors3.base.white
|
|
458
458
|
},
|
|
459
459
|
warning: {
|
|
460
|
-
main:
|
|
461
|
-
light:
|
|
462
|
-
dark:
|
|
463
|
-
contrastText:
|
|
460
|
+
main: colors3.warning[600],
|
|
461
|
+
light: colors3.warning[300],
|
|
462
|
+
dark: colors3.warning[700],
|
|
463
|
+
contrastText: colors3.base.white
|
|
464
464
|
},
|
|
465
465
|
success: {
|
|
466
|
-
main:
|
|
467
|
-
light:
|
|
468
|
-
dark:
|
|
469
|
-
contrastText:
|
|
466
|
+
main: colors3.success[600],
|
|
467
|
+
light: colors3.success[300],
|
|
468
|
+
dark: colors3.success[700],
|
|
469
|
+
contrastText: colors3.base.white
|
|
470
470
|
},
|
|
471
471
|
info: {
|
|
472
|
-
main:
|
|
473
|
-
light:
|
|
474
|
-
dark:
|
|
475
|
-
contrastText:
|
|
472
|
+
main: colors3.blue[600],
|
|
473
|
+
light: colors3.blue[300],
|
|
474
|
+
dark: colors3.blue[700],
|
|
475
|
+
contrastText: colors3.base.white
|
|
476
476
|
},
|
|
477
477
|
background: {
|
|
478
|
-
default:
|
|
479
|
-
paper:
|
|
478
|
+
default: bg3.primary,
|
|
479
|
+
paper: bg3.secondary
|
|
480
480
|
},
|
|
481
481
|
text: {
|
|
482
|
-
primary:
|
|
483
|
-
secondary:
|
|
484
|
-
disabled:
|
|
482
|
+
primary: text3.primary,
|
|
483
|
+
secondary: text3.secondary,
|
|
484
|
+
disabled: text3.disabled
|
|
485
485
|
},
|
|
486
|
-
divider:
|
|
486
|
+
divider: border3.secondary,
|
|
487
487
|
action: {
|
|
488
|
-
active:
|
|
489
|
-
hover:
|
|
490
|
-
selected:
|
|
491
|
-
disabled:
|
|
492
|
-
disabledBackground:
|
|
488
|
+
active: fg3.tertiary,
|
|
489
|
+
hover: bg3.primaryHover,
|
|
490
|
+
selected: bg3.brandPrimary,
|
|
491
|
+
disabled: fg3.disabled,
|
|
492
|
+
disabledBackground: bg3.disabled
|
|
493
493
|
}
|
|
494
494
|
};
|
|
495
495
|
}
|
|
@@ -594,15 +594,15 @@ var typography = buildTypography({
|
|
|
594
594
|
// src/theme/components.ts
|
|
595
595
|
function buildComponents(tokens) {
|
|
596
596
|
const {
|
|
597
|
-
colors:
|
|
597
|
+
colors: colors3,
|
|
598
598
|
radius: radius2,
|
|
599
|
-
focusRings:
|
|
599
|
+
focusRings: focusRings3,
|
|
600
600
|
shadows: tokenShadows,
|
|
601
|
-
text:
|
|
602
|
-
bg:
|
|
603
|
-
fg:
|
|
604
|
-
border:
|
|
605
|
-
buttonColors:
|
|
601
|
+
text: text3,
|
|
602
|
+
bg: bg3,
|
|
603
|
+
fg: fg3,
|
|
604
|
+
border: border3,
|
|
605
|
+
buttonColors: buttonColors3
|
|
606
606
|
} = tokens;
|
|
607
607
|
return {
|
|
608
608
|
// ─── Button ─────────────────────────────────────────────────────
|
|
@@ -620,36 +620,36 @@ function buildComponents(tokens) {
|
|
|
620
620
|
fontSize: 14,
|
|
621
621
|
lineHeight: "20px",
|
|
622
622
|
"&:focus-visible": {
|
|
623
|
-
boxShadow:
|
|
623
|
+
boxShadow: focusRings3.brandShadowXs
|
|
624
624
|
}
|
|
625
625
|
},
|
|
626
626
|
containedPrimary: {
|
|
627
|
-
backgroundColor:
|
|
627
|
+
backgroundColor: buttonColors3.primary.bg,
|
|
628
628
|
"&:hover": {
|
|
629
|
-
backgroundColor:
|
|
629
|
+
backgroundColor: buttonColors3.primary.bgHover
|
|
630
630
|
}
|
|
631
631
|
},
|
|
632
632
|
outlinedPrimary: {
|
|
633
|
-
borderColor:
|
|
634
|
-
color:
|
|
633
|
+
borderColor: buttonColors3.secondaryColor.border,
|
|
634
|
+
color: buttonColors3.secondaryColor.fg,
|
|
635
635
|
"&:hover": {
|
|
636
|
-
backgroundColor:
|
|
637
|
-
borderColor:
|
|
636
|
+
backgroundColor: buttonColors3.secondaryColor.bgHover,
|
|
637
|
+
borderColor: buttonColors3.secondaryColor.borderHover
|
|
638
638
|
}
|
|
639
639
|
},
|
|
640
640
|
outlinedSecondary: {
|
|
641
|
-
borderColor:
|
|
641
|
+
borderColor: buttonColors3.secondary.border,
|
|
642
642
|
"&:hover": {
|
|
643
|
-
borderColor:
|
|
643
|
+
borderColor: buttonColors3.secondary.borderHover
|
|
644
644
|
}
|
|
645
645
|
},
|
|
646
646
|
text: {
|
|
647
647
|
boxShadow: "none"
|
|
648
648
|
},
|
|
649
649
|
textPrimary: {
|
|
650
|
-
color:
|
|
650
|
+
color: buttonColors3.tertiaryColor.fg,
|
|
651
651
|
"&:hover": {
|
|
652
|
-
backgroundColor:
|
|
652
|
+
backgroundColor: buttonColors3.tertiaryColor.bgHover
|
|
653
653
|
}
|
|
654
654
|
}
|
|
655
655
|
}
|
|
@@ -665,7 +665,7 @@ function buildComponents(tokens) {
|
|
|
665
665
|
},
|
|
666
666
|
grouped: {
|
|
667
667
|
"&:not(:last-of-type)": {
|
|
668
|
-
borderRight: `1px solid ${
|
|
668
|
+
borderRight: `1px solid ${buttonColors3.primary.borderHover}`
|
|
669
669
|
}
|
|
670
670
|
}
|
|
671
671
|
}
|
|
@@ -679,13 +679,13 @@ function buildComponents(tokens) {
|
|
|
679
679
|
boxShadow: tokenShadows.lg
|
|
680
680
|
},
|
|
681
681
|
"&:focus-visible": {
|
|
682
|
-
boxShadow:
|
|
682
|
+
boxShadow: focusRings3.brandShadowSm
|
|
683
683
|
}
|
|
684
684
|
},
|
|
685
685
|
primary: {
|
|
686
|
-
backgroundColor:
|
|
686
|
+
backgroundColor: buttonColors3.primary.bg,
|
|
687
687
|
"&:hover": {
|
|
688
|
-
backgroundColor:
|
|
688
|
+
backgroundColor: buttonColors3.primary.bgHover
|
|
689
689
|
}
|
|
690
690
|
}
|
|
691
691
|
}
|
|
@@ -701,8 +701,8 @@ function buildComponents(tokens) {
|
|
|
701
701
|
styleOverrides: {
|
|
702
702
|
input: {
|
|
703
703
|
"&::placeholder": {
|
|
704
|
-
color:
|
|
705
|
-
WebkitTextFillColor:
|
|
704
|
+
color: text3.placeholder,
|
|
705
|
+
WebkitTextFillColor: text3.placeholder,
|
|
706
706
|
fontWeight: 400,
|
|
707
707
|
opacity: 1
|
|
708
708
|
}
|
|
@@ -715,23 +715,23 @@ function buildComponents(tokens) {
|
|
|
715
715
|
borderRadius: radius2.md,
|
|
716
716
|
boxShadow: tokenShadows.xs,
|
|
717
717
|
"&:hover .MuiOutlinedInput-notchedOutline": {
|
|
718
|
-
borderColor:
|
|
718
|
+
borderColor: border3.brand
|
|
719
719
|
},
|
|
720
720
|
"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
|
|
721
|
-
borderColor:
|
|
721
|
+
borderColor: border3.brandSolid,
|
|
722
722
|
borderWidth: 1,
|
|
723
723
|
boxShadow: "none"
|
|
724
724
|
},
|
|
725
725
|
"&.Mui-error .MuiOutlinedInput-notchedOutline": {
|
|
726
|
-
borderColor:
|
|
726
|
+
borderColor: border3.error
|
|
727
727
|
},
|
|
728
728
|
"&.Mui-error.Mui-focused .MuiOutlinedInput-notchedOutline": {
|
|
729
|
-
borderColor:
|
|
729
|
+
borderColor: border3.errorSolid,
|
|
730
730
|
boxShadow: "none"
|
|
731
731
|
}
|
|
732
732
|
},
|
|
733
733
|
notchedOutline: {
|
|
734
|
-
borderColor:
|
|
734
|
+
borderColor: border3.primary
|
|
735
735
|
},
|
|
736
736
|
input: {
|
|
737
737
|
padding: "10px 14px",
|
|
@@ -748,12 +748,12 @@ function buildComponents(tokens) {
|
|
|
748
748
|
MuiFormLabel: {
|
|
749
749
|
styleOverrides: {
|
|
750
750
|
root: {
|
|
751
|
-
color:
|
|
751
|
+
color: text3.placeholder,
|
|
752
752
|
"&.Mui-focused": {
|
|
753
|
-
color:
|
|
753
|
+
color: text3.placeholder
|
|
754
754
|
},
|
|
755
755
|
"&.Mui-error": {
|
|
756
|
-
color:
|
|
756
|
+
color: text3.errorPrimary
|
|
757
757
|
}
|
|
758
758
|
}
|
|
759
759
|
}
|
|
@@ -763,12 +763,23 @@ function buildComponents(tokens) {
|
|
|
763
763
|
root: {
|
|
764
764
|
fontSize: 14,
|
|
765
765
|
fontWeight: 500,
|
|
766
|
-
color:
|
|
766
|
+
color: text3.placeholder,
|
|
767
767
|
"&.Mui-focused": {
|
|
768
|
-
color:
|
|
768
|
+
color: text3.placeholder
|
|
769
769
|
},
|
|
770
770
|
"&.Mui-error": {
|
|
771
|
-
color:
|
|
771
|
+
color: text3.errorPrimary
|
|
772
|
+
}
|
|
773
|
+
},
|
|
774
|
+
outlined: {
|
|
775
|
+
// Align label with custom OutlinedInput padding (10px 14px)
|
|
776
|
+
transform: "translate(14px, 10px) scale(1)",
|
|
777
|
+
"&.MuiInputLabel-sizeSmall": {
|
|
778
|
+
// Align label with custom inputSizeSmall padding (8px 12px)
|
|
779
|
+
transform: "translate(12px, 8px) scale(1)"
|
|
780
|
+
},
|
|
781
|
+
"&.MuiInputLabel-shrink": {
|
|
782
|
+
transform: "translate(14px, -9px) scale(0.75)"
|
|
772
783
|
}
|
|
773
784
|
}
|
|
774
785
|
}
|
|
@@ -781,7 +792,7 @@ function buildComponents(tokens) {
|
|
|
781
792
|
marginTop: 6,
|
|
782
793
|
marginLeft: 0,
|
|
783
794
|
"&.Mui-error": {
|
|
784
|
-
color:
|
|
795
|
+
color: text3.errorPrimary
|
|
785
796
|
}
|
|
786
797
|
}
|
|
787
798
|
}
|
|
@@ -789,18 +800,36 @@ function buildComponents(tokens) {
|
|
|
789
800
|
// ─── Select ─────────────────────────────────────────────────────
|
|
790
801
|
MuiSelect: {
|
|
791
802
|
defaultProps: {
|
|
792
|
-
size: "small"
|
|
803
|
+
size: "small",
|
|
804
|
+
MenuProps: {
|
|
805
|
+
autoFocus: false
|
|
806
|
+
}
|
|
793
807
|
},
|
|
794
808
|
styleOverrides: {
|
|
795
809
|
select: {
|
|
810
|
+
display: "flex",
|
|
811
|
+
alignItems: "center",
|
|
796
812
|
"&.MuiSelect-select": {
|
|
813
|
+
minHeight: "20px",
|
|
797
814
|
"&[aria-placeholder], &:empty + .MuiSelect-nativeInput[value='']~&": {
|
|
798
|
-
color:
|
|
815
|
+
color: text3.placeholder
|
|
799
816
|
}
|
|
800
817
|
}
|
|
801
818
|
},
|
|
802
819
|
icon: {
|
|
803
|
-
color:
|
|
820
|
+
color: text3.placeholder
|
|
821
|
+
}
|
|
822
|
+
}
|
|
823
|
+
},
|
|
824
|
+
MuiMenuItem: {
|
|
825
|
+
styleOverrides: {
|
|
826
|
+
root: {
|
|
827
|
+
borderRadius: radius2.md,
|
|
828
|
+
padding: "6px 8px",
|
|
829
|
+
gap: 4,
|
|
830
|
+
"&:hover": {
|
|
831
|
+
backgroundColor: bg3.primaryHover
|
|
832
|
+
}
|
|
804
833
|
}
|
|
805
834
|
}
|
|
806
835
|
},
|
|
@@ -810,7 +839,7 @@ function buildComponents(tokens) {
|
|
|
810
839
|
paper: {
|
|
811
840
|
borderRadius: radius2.md,
|
|
812
841
|
boxShadow: tokenShadows.lg,
|
|
813
|
-
border: `1px solid ${
|
|
842
|
+
border: `1px solid ${border3.secondary}`,
|
|
814
843
|
marginTop: 4
|
|
815
844
|
},
|
|
816
845
|
option: {
|
|
@@ -818,10 +847,10 @@ function buildComponents(tokens) {
|
|
|
818
847
|
lineHeight: "24px",
|
|
819
848
|
padding: "10px 14px",
|
|
820
849
|
"&.Mui-focused": {
|
|
821
|
-
backgroundColor:
|
|
850
|
+
backgroundColor: bg3.primaryHover
|
|
822
851
|
},
|
|
823
852
|
'&[aria-selected="true"]': {
|
|
824
|
-
backgroundColor:
|
|
853
|
+
backgroundColor: bg3.brandPrimary
|
|
825
854
|
}
|
|
826
855
|
},
|
|
827
856
|
listbox: {
|
|
@@ -836,28 +865,28 @@ function buildComponents(tokens) {
|
|
|
836
865
|
},
|
|
837
866
|
styleOverrides: {
|
|
838
867
|
root: {
|
|
839
|
-
color:
|
|
868
|
+
color: border3.primary,
|
|
840
869
|
borderRadius: radius2.xs,
|
|
841
870
|
padding: 0,
|
|
842
871
|
width: 20,
|
|
843
872
|
height: 20,
|
|
844
873
|
"&:hover": {
|
|
845
874
|
backgroundColor: "transparent",
|
|
846
|
-
color:
|
|
875
|
+
color: fg3.brandPrimary
|
|
847
876
|
},
|
|
848
877
|
"&.Mui-checked": {
|
|
849
|
-
color:
|
|
878
|
+
color: fg3.brandPrimary
|
|
850
879
|
},
|
|
851
880
|
"&.Mui-checked:hover": {
|
|
852
|
-
color:
|
|
881
|
+
color: colors3.brand[700]
|
|
853
882
|
},
|
|
854
883
|
"&.Mui-focusVisible": {
|
|
855
884
|
outline: "none",
|
|
856
|
-
boxShadow:
|
|
885
|
+
boxShadow: focusRings3.brand,
|
|
857
886
|
borderRadius: radius2.xs
|
|
858
887
|
},
|
|
859
888
|
"&.Mui-disabled": {
|
|
860
|
-
color:
|
|
889
|
+
color: border3.primary
|
|
861
890
|
}
|
|
862
891
|
}
|
|
863
892
|
}
|
|
@@ -869,25 +898,25 @@ function buildComponents(tokens) {
|
|
|
869
898
|
},
|
|
870
899
|
styleOverrides: {
|
|
871
900
|
root: {
|
|
872
|
-
color:
|
|
901
|
+
color: border3.primary,
|
|
873
902
|
padding: 0,
|
|
874
903
|
"&:hover": {
|
|
875
904
|
backgroundColor: "transparent",
|
|
876
|
-
color:
|
|
905
|
+
color: fg3.brandPrimary
|
|
877
906
|
},
|
|
878
907
|
"&.Mui-checked": {
|
|
879
|
-
color:
|
|
908
|
+
color: fg3.brandPrimary
|
|
880
909
|
},
|
|
881
910
|
"&.Mui-checked:hover": {
|
|
882
|
-
color:
|
|
911
|
+
color: colors3.brand[700]
|
|
883
912
|
},
|
|
884
913
|
"&.Mui-focusVisible": {
|
|
885
914
|
outline: "none",
|
|
886
|
-
boxShadow:
|
|
915
|
+
boxShadow: focusRings3.brand,
|
|
887
916
|
borderRadius: radius2.full
|
|
888
917
|
},
|
|
889
918
|
"&.Mui-disabled": {
|
|
890
|
-
color:
|
|
919
|
+
color: border3.primary
|
|
891
920
|
}
|
|
892
921
|
}
|
|
893
922
|
}
|
|
@@ -907,20 +936,20 @@ function buildComponents(tokens) {
|
|
|
907
936
|
padding: 2,
|
|
908
937
|
"&.Mui-checked": {
|
|
909
938
|
transform: "translateX(20px)",
|
|
910
|
-
color:
|
|
939
|
+
color: fg3.white,
|
|
911
940
|
"& + .MuiSwitch-track": {
|
|
912
|
-
backgroundColor:
|
|
941
|
+
backgroundColor: fg3.brandPrimary,
|
|
913
942
|
opacity: 1
|
|
914
943
|
}
|
|
915
944
|
},
|
|
916
945
|
"&.Mui-checked:hover + .MuiSwitch-track": {
|
|
917
|
-
backgroundColor:
|
|
946
|
+
backgroundColor: colors3.brand[700]
|
|
918
947
|
},
|
|
919
948
|
"&.Mui-focusVisible .MuiSwitch-thumb": {
|
|
920
|
-
boxShadow:
|
|
949
|
+
boxShadow: focusRings3.brand
|
|
921
950
|
},
|
|
922
951
|
"&.Mui-disabled .MuiSwitch-thumb": {
|
|
923
|
-
color:
|
|
952
|
+
color: bg3.disabled
|
|
924
953
|
},
|
|
925
954
|
"&.Mui-disabled + .MuiSwitch-track": {
|
|
926
955
|
opacity: 0.5
|
|
@@ -933,7 +962,7 @@ function buildComponents(tokens) {
|
|
|
933
962
|
},
|
|
934
963
|
track: {
|
|
935
964
|
borderRadius: radius2.full,
|
|
936
|
-
backgroundColor:
|
|
965
|
+
backgroundColor: border3.secondary,
|
|
937
966
|
opacity: 1
|
|
938
967
|
}
|
|
939
968
|
}
|
|
@@ -942,8 +971,8 @@ function buildComponents(tokens) {
|
|
|
942
971
|
MuiToggleButton: {
|
|
943
972
|
styleOverrides: {
|
|
944
973
|
root: {
|
|
945
|
-
borderColor:
|
|
946
|
-
color:
|
|
974
|
+
borderColor: border3.primary,
|
|
975
|
+
color: text3.secondary,
|
|
947
976
|
fontSize: 14,
|
|
948
977
|
fontWeight: 600,
|
|
949
978
|
lineHeight: "20px",
|
|
@@ -951,19 +980,20 @@ function buildComponents(tokens) {
|
|
|
951
980
|
padding: "6px 12px",
|
|
952
981
|
textTransform: "none",
|
|
953
982
|
"&:hover": {
|
|
954
|
-
backgroundColor:
|
|
955
|
-
borderColor:
|
|
983
|
+
backgroundColor: bg3.primaryHover,
|
|
984
|
+
borderColor: border3.primary
|
|
956
985
|
},
|
|
957
986
|
"&.Mui-selected": {
|
|
958
|
-
backgroundColor:
|
|
959
|
-
color:
|
|
960
|
-
borderColor:
|
|
987
|
+
backgroundColor: bg3.brandPrimary,
|
|
988
|
+
color: buttonColors3.secondaryColor.fg,
|
|
989
|
+
borderColor: border3.brand,
|
|
990
|
+
boxShadow: `inset 0 0 0 1px ${border3.brandSolid}`,
|
|
961
991
|
"&:hover": {
|
|
962
|
-
backgroundColor:
|
|
992
|
+
backgroundColor: bg3.brandSecondary
|
|
963
993
|
}
|
|
964
994
|
},
|
|
965
995
|
"&:focus-visible": {
|
|
966
|
-
boxShadow:
|
|
996
|
+
boxShadow: focusRings3.brandShadowXs
|
|
967
997
|
}
|
|
968
998
|
}
|
|
969
999
|
}
|
|
@@ -979,6 +1009,9 @@ function buildComponents(tokens) {
|
|
|
979
1009
|
"&:not(:first-of-type)": {
|
|
980
1010
|
marginLeft: -1
|
|
981
1011
|
},
|
|
1012
|
+
"&.Mui-selected + &.Mui-selected": {
|
|
1013
|
+
boxShadow: `inset -1px 0 0 0 ${border3.brandSolid}, inset 0 1px 0 0 ${border3.brandSolid}, inset 0 -1px 0 0 ${border3.brandSolid}`
|
|
1014
|
+
},
|
|
982
1015
|
"&:first-of-type": {
|
|
983
1016
|
borderTopLeftRadius: radius2.md,
|
|
984
1017
|
borderBottomLeftRadius: radius2.md
|
|
@@ -998,8 +1031,8 @@ function buildComponents(tokens) {
|
|
|
998
1031
|
styleOverrides: {
|
|
999
1032
|
root: {
|
|
1000
1033
|
borderRadius: radius2.xl,
|
|
1001
|
-
border: `1px solid ${
|
|
1002
|
-
backgroundColor:
|
|
1034
|
+
border: `1px solid ${border3.secondary}`,
|
|
1035
|
+
backgroundColor: bg3.primary,
|
|
1003
1036
|
boxShadow: tokenShadows.xs,
|
|
1004
1037
|
overflow: "hidden"
|
|
1005
1038
|
}
|
|
@@ -1050,31 +1083,31 @@ function buildComponents(tokens) {
|
|
|
1050
1083
|
},
|
|
1051
1084
|
elevation1: {
|
|
1052
1085
|
boxShadow: tokenShadows.xs,
|
|
1053
|
-
border: `1px solid ${
|
|
1086
|
+
border: `1px solid ${border3.secondary}`
|
|
1054
1087
|
},
|
|
1055
1088
|
elevation2: {
|
|
1056
1089
|
boxShadow: tokenShadows.sm,
|
|
1057
|
-
border: `1px solid ${
|
|
1090
|
+
border: `1px solid ${border3.secondary}`
|
|
1058
1091
|
},
|
|
1059
1092
|
elevation3: {
|
|
1060
1093
|
boxShadow: tokenShadows.md,
|
|
1061
|
-
border: `1px solid ${
|
|
1094
|
+
border: `1px solid ${border3.secondary}`
|
|
1062
1095
|
},
|
|
1063
1096
|
elevation4: {
|
|
1064
1097
|
boxShadow: tokenShadows.lg,
|
|
1065
|
-
border: `1px solid ${
|
|
1098
|
+
border: `1px solid ${border3.secondary}`
|
|
1066
1099
|
},
|
|
1067
1100
|
elevation8: {
|
|
1068
1101
|
boxShadow: tokenShadows.xl,
|
|
1069
|
-
border: `1px solid ${
|
|
1102
|
+
border: `1px solid ${border3.secondary}`
|
|
1070
1103
|
},
|
|
1071
1104
|
elevation16: {
|
|
1072
1105
|
boxShadow: tokenShadows["2xl"],
|
|
1073
|
-
border: `1px solid ${
|
|
1106
|
+
border: `1px solid ${border3.secondary}`
|
|
1074
1107
|
},
|
|
1075
1108
|
elevation24: {
|
|
1076
1109
|
boxShadow: tokenShadows["3xl"],
|
|
1077
|
-
border: `1px solid ${
|
|
1110
|
+
border: `1px solid ${border3.secondary}`
|
|
1078
1111
|
}
|
|
1079
1112
|
}
|
|
1080
1113
|
},
|
|
@@ -1086,7 +1119,7 @@ function buildComponents(tokens) {
|
|
|
1086
1119
|
},
|
|
1087
1120
|
styleOverrides: {
|
|
1088
1121
|
root: {
|
|
1089
|
-
border: `1px solid ${
|
|
1122
|
+
border: `1px solid ${border3.secondary}`,
|
|
1090
1123
|
borderRadius: radius2.lg,
|
|
1091
1124
|
"&:not(:last-child)": {
|
|
1092
1125
|
marginBottom: 8
|
|
@@ -1109,7 +1142,7 @@ function buildComponents(tokens) {
|
|
|
1109
1142
|
minHeight: 56,
|
|
1110
1143
|
"&.Mui-expanded": {
|
|
1111
1144
|
minHeight: 56,
|
|
1112
|
-
borderBottom: `1px solid ${
|
|
1145
|
+
borderBottom: `1px solid ${border3.secondary}`
|
|
1113
1146
|
}
|
|
1114
1147
|
},
|
|
1115
1148
|
content: {
|
|
@@ -1135,8 +1168,8 @@ function buildComponents(tokens) {
|
|
|
1135
1168
|
},
|
|
1136
1169
|
styleOverrides: {
|
|
1137
1170
|
root: {
|
|
1138
|
-
borderBottom: `1px solid ${
|
|
1139
|
-
backgroundColor:
|
|
1171
|
+
borderBottom: `1px solid ${border3.secondary}`,
|
|
1172
|
+
backgroundColor: bg3.primary
|
|
1140
1173
|
}
|
|
1141
1174
|
}
|
|
1142
1175
|
},
|
|
@@ -1176,51 +1209,51 @@ function buildComponents(tokens) {
|
|
|
1176
1209
|
},
|
|
1177
1210
|
colorDefault: {
|
|
1178
1211
|
"&.MuiChip-filled": {
|
|
1179
|
-
backgroundColor:
|
|
1180
|
-
color:
|
|
1181
|
-
"& .MuiChip-deleteIcon": { color:
|
|
1212
|
+
backgroundColor: colors3.gray[50],
|
|
1213
|
+
color: colors3.gray[700],
|
|
1214
|
+
"& .MuiChip-deleteIcon": { color: colors3.gray[400] }
|
|
1182
1215
|
}
|
|
1183
1216
|
},
|
|
1184
1217
|
colorPrimary: {
|
|
1185
1218
|
"&.MuiChip-filled": {
|
|
1186
|
-
backgroundColor:
|
|
1187
|
-
color:
|
|
1188
|
-
"& .MuiChip-deleteIcon": { color:
|
|
1219
|
+
backgroundColor: colors3.brand[50],
|
|
1220
|
+
color: colors3.brand[700],
|
|
1221
|
+
"& .MuiChip-deleteIcon": { color: colors3.brand[400] }
|
|
1189
1222
|
}
|
|
1190
1223
|
},
|
|
1191
1224
|
colorSecondary: {
|
|
1192
1225
|
"&.MuiChip-filled": {
|
|
1193
|
-
backgroundColor:
|
|
1194
|
-
color:
|
|
1195
|
-
"& .MuiChip-deleteIcon": { color:
|
|
1226
|
+
backgroundColor: colors3.gray[50],
|
|
1227
|
+
color: colors3.gray[700],
|
|
1228
|
+
"& .MuiChip-deleteIcon": { color: colors3.gray[400] }
|
|
1196
1229
|
}
|
|
1197
1230
|
},
|
|
1198
1231
|
colorError: {
|
|
1199
1232
|
"&.MuiChip-filled": {
|
|
1200
|
-
backgroundColor:
|
|
1201
|
-
color:
|
|
1202
|
-
"& .MuiChip-deleteIcon": { color:
|
|
1233
|
+
backgroundColor: colors3.error[50],
|
|
1234
|
+
color: colors3.error[700],
|
|
1235
|
+
"& .MuiChip-deleteIcon": { color: colors3.error[400] }
|
|
1203
1236
|
}
|
|
1204
1237
|
},
|
|
1205
1238
|
colorWarning: {
|
|
1206
1239
|
"&.MuiChip-filled": {
|
|
1207
|
-
backgroundColor:
|
|
1208
|
-
color:
|
|
1209
|
-
"& .MuiChip-deleteIcon": { color:
|
|
1240
|
+
backgroundColor: colors3.warning[50],
|
|
1241
|
+
color: colors3.warning[700],
|
|
1242
|
+
"& .MuiChip-deleteIcon": { color: colors3.warning[400] }
|
|
1210
1243
|
}
|
|
1211
1244
|
},
|
|
1212
1245
|
colorSuccess: {
|
|
1213
1246
|
"&.MuiChip-filled": {
|
|
1214
|
-
backgroundColor:
|
|
1215
|
-
color:
|
|
1216
|
-
"& .MuiChip-deleteIcon": { color:
|
|
1247
|
+
backgroundColor: colors3.success[50],
|
|
1248
|
+
color: colors3.success[700],
|
|
1249
|
+
"& .MuiChip-deleteIcon": { color: colors3.success[400] }
|
|
1217
1250
|
}
|
|
1218
1251
|
},
|
|
1219
1252
|
colorInfo: {
|
|
1220
1253
|
"&.MuiChip-filled": {
|
|
1221
|
-
backgroundColor:
|
|
1222
|
-
color:
|
|
1223
|
-
"& .MuiChip-deleteIcon": { color:
|
|
1254
|
+
backgroundColor: colors3.blue[50],
|
|
1255
|
+
color: colors3.blue[700],
|
|
1256
|
+
"& .MuiChip-deleteIcon": { color: colors3.blue[400] }
|
|
1224
1257
|
}
|
|
1225
1258
|
}
|
|
1226
1259
|
}
|
|
@@ -1236,7 +1269,7 @@ function buildComponents(tokens) {
|
|
|
1236
1269
|
fontSize: 14,
|
|
1237
1270
|
lineHeight: "20px",
|
|
1238
1271
|
fontWeight: 500,
|
|
1239
|
-
color:
|
|
1272
|
+
color: text3.secondary
|
|
1240
1273
|
}
|
|
1241
1274
|
}
|
|
1242
1275
|
},
|
|
@@ -1252,29 +1285,29 @@ function buildComponents(tokens) {
|
|
|
1252
1285
|
MuiTableCell: {
|
|
1253
1286
|
styleOverrides: {
|
|
1254
1287
|
root: {
|
|
1255
|
-
borderBottom: `1px solid ${
|
|
1288
|
+
borderBottom: `1px solid ${border3.secondary}`,
|
|
1256
1289
|
padding: "16px 24px",
|
|
1257
1290
|
fontSize: 14,
|
|
1258
1291
|
lineHeight: "20px",
|
|
1259
|
-
color:
|
|
1292
|
+
color: fg3.tertiary
|
|
1260
1293
|
},
|
|
1261
1294
|
head: {
|
|
1262
|
-
backgroundColor:
|
|
1263
|
-
color:
|
|
1295
|
+
backgroundColor: bg3.secondary,
|
|
1296
|
+
color: fg3.tertiary,
|
|
1264
1297
|
fontWeight: 500,
|
|
1265
1298
|
fontSize: 12,
|
|
1266
1299
|
lineHeight: "18px"
|
|
1267
1300
|
},
|
|
1268
1301
|
body: {
|
|
1269
|
-
color:
|
|
1302
|
+
color: fg3.tertiary
|
|
1270
1303
|
}
|
|
1271
1304
|
}
|
|
1272
1305
|
},
|
|
1273
1306
|
MuiTableHead: {
|
|
1274
1307
|
styleOverrides: {
|
|
1275
1308
|
root: {
|
|
1276
|
-
backgroundColor:
|
|
1277
|
-
borderBottom: `1px solid ${
|
|
1309
|
+
backgroundColor: bg3.secondary,
|
|
1310
|
+
borderBottom: `1px solid ${border3.secondary}`
|
|
1278
1311
|
}
|
|
1279
1312
|
}
|
|
1280
1313
|
},
|
|
@@ -1285,12 +1318,12 @@ function buildComponents(tokens) {
|
|
|
1285
1318
|
border: 0
|
|
1286
1319
|
},
|
|
1287
1320
|
"&:hover": {
|
|
1288
|
-
backgroundColor:
|
|
1321
|
+
backgroundColor: bg3.primaryHover
|
|
1289
1322
|
},
|
|
1290
1323
|
"&.Mui-selected": {
|
|
1291
|
-
backgroundColor:
|
|
1324
|
+
backgroundColor: bg3.brandPrimary,
|
|
1292
1325
|
"&:hover": {
|
|
1293
|
-
backgroundColor:
|
|
1326
|
+
backgroundColor: bg3.brandPrimary
|
|
1294
1327
|
}
|
|
1295
1328
|
}
|
|
1296
1329
|
}
|
|
@@ -1300,7 +1333,7 @@ function buildComponents(tokens) {
|
|
|
1300
1333
|
styleOverrides: {
|
|
1301
1334
|
root: {
|
|
1302
1335
|
borderRadius: radius2.xl,
|
|
1303
|
-
border: `1px solid ${
|
|
1336
|
+
border: `1px solid ${border3.secondary}`,
|
|
1304
1337
|
boxShadow: "none"
|
|
1305
1338
|
}
|
|
1306
1339
|
}
|
|
@@ -1317,16 +1350,16 @@ function buildComponents(tokens) {
|
|
|
1317
1350
|
borderRadius: radius2.full
|
|
1318
1351
|
},
|
|
1319
1352
|
colorPrimary: {
|
|
1320
|
-
backgroundColor:
|
|
1353
|
+
backgroundColor: bg3.brandSolid
|
|
1321
1354
|
},
|
|
1322
1355
|
colorError: {
|
|
1323
|
-
backgroundColor:
|
|
1356
|
+
backgroundColor: bg3.errorSolid
|
|
1324
1357
|
},
|
|
1325
1358
|
colorSuccess: {
|
|
1326
|
-
backgroundColor:
|
|
1359
|
+
backgroundColor: bg3.successSolid
|
|
1327
1360
|
},
|
|
1328
1361
|
colorWarning: {
|
|
1329
|
-
backgroundColor:
|
|
1362
|
+
backgroundColor: bg3.warningSolid
|
|
1330
1363
|
},
|
|
1331
1364
|
dot: {
|
|
1332
1365
|
minWidth: 8,
|
|
@@ -1339,7 +1372,7 @@ function buildComponents(tokens) {
|
|
|
1339
1372
|
MuiDivider: {
|
|
1340
1373
|
styleOverrides: {
|
|
1341
1374
|
root: {
|
|
1342
|
-
borderColor:
|
|
1375
|
+
borderColor: border3.secondary
|
|
1343
1376
|
}
|
|
1344
1377
|
}
|
|
1345
1378
|
},
|
|
@@ -1357,13 +1390,13 @@ function buildComponents(tokens) {
|
|
|
1357
1390
|
borderRadius: radius2.sm,
|
|
1358
1391
|
padding: "8px 12px",
|
|
1359
1392
|
"&:hover": {
|
|
1360
|
-
backgroundColor:
|
|
1393
|
+
backgroundColor: bg3.primaryHover
|
|
1361
1394
|
},
|
|
1362
1395
|
"&.Mui-selected": {
|
|
1363
|
-
backgroundColor:
|
|
1364
|
-
color:
|
|
1396
|
+
backgroundColor: bg3.brandPrimary,
|
|
1397
|
+
color: buttonColors3.secondaryColor.fg,
|
|
1365
1398
|
"&:hover": {
|
|
1366
|
-
backgroundColor:
|
|
1399
|
+
backgroundColor: bg3.brandSecondary
|
|
1367
1400
|
}
|
|
1368
1401
|
}
|
|
1369
1402
|
}
|
|
@@ -1373,7 +1406,7 @@ function buildComponents(tokens) {
|
|
|
1373
1406
|
styleOverrides: {
|
|
1374
1407
|
root: {
|
|
1375
1408
|
minWidth: 36,
|
|
1376
|
-
color:
|
|
1409
|
+
color: fg3.quaternary
|
|
1377
1410
|
}
|
|
1378
1411
|
}
|
|
1379
1412
|
},
|
|
@@ -1383,12 +1416,12 @@ function buildComponents(tokens) {
|
|
|
1383
1416
|
fontSize: 14,
|
|
1384
1417
|
lineHeight: "20px",
|
|
1385
1418
|
fontWeight: 500,
|
|
1386
|
-
color:
|
|
1419
|
+
color: text3.secondary
|
|
1387
1420
|
},
|
|
1388
1421
|
secondary: {
|
|
1389
1422
|
fontSize: 14,
|
|
1390
1423
|
lineHeight: "20px",
|
|
1391
|
-
color:
|
|
1424
|
+
color: text3.quaternary
|
|
1392
1425
|
}
|
|
1393
1426
|
}
|
|
1394
1427
|
},
|
|
@@ -1396,8 +1429,8 @@ function buildComponents(tokens) {
|
|
|
1396
1429
|
MuiTooltip: {
|
|
1397
1430
|
styleOverrides: {
|
|
1398
1431
|
tooltip: {
|
|
1399
|
-
backgroundColor:
|
|
1400
|
-
color:
|
|
1432
|
+
backgroundColor: bg3.primarySolid,
|
|
1433
|
+
color: text3.white,
|
|
1401
1434
|
fontSize: 12,
|
|
1402
1435
|
lineHeight: "18px",
|
|
1403
1436
|
fontWeight: 600,
|
|
@@ -1406,7 +1439,7 @@ function buildComponents(tokens) {
|
|
|
1406
1439
|
boxShadow: tokenShadows.lg
|
|
1407
1440
|
},
|
|
1408
1441
|
arrow: {
|
|
1409
|
-
color:
|
|
1442
|
+
color: bg3.primarySolid
|
|
1410
1443
|
}
|
|
1411
1444
|
}
|
|
1412
1445
|
},
|
|
@@ -1424,35 +1457,35 @@ function buildComponents(tokens) {
|
|
|
1424
1457
|
alignItems: "center"
|
|
1425
1458
|
},
|
|
1426
1459
|
standardError: {
|
|
1427
|
-
backgroundColor:
|
|
1428
|
-
color:
|
|
1429
|
-
border: `1px solid ${
|
|
1460
|
+
backgroundColor: bg3.errorPrimary,
|
|
1461
|
+
color: colors3.error[700],
|
|
1462
|
+
border: `1px solid ${border3.error}`,
|
|
1430
1463
|
"& .MuiAlert-icon": {
|
|
1431
|
-
color:
|
|
1464
|
+
color: fg3.errorPrimary
|
|
1432
1465
|
}
|
|
1433
1466
|
},
|
|
1434
1467
|
standardWarning: {
|
|
1435
|
-
backgroundColor:
|
|
1436
|
-
color:
|
|
1437
|
-
border: `1px solid ${
|
|
1468
|
+
backgroundColor: bg3.warningPrimary,
|
|
1469
|
+
color: colors3.warning[700],
|
|
1470
|
+
border: `1px solid ${colors3.warning[300]}`,
|
|
1438
1471
|
"& .MuiAlert-icon": {
|
|
1439
|
-
color:
|
|
1472
|
+
color: fg3.warningPrimary
|
|
1440
1473
|
}
|
|
1441
1474
|
},
|
|
1442
1475
|
standardSuccess: {
|
|
1443
|
-
backgroundColor:
|
|
1444
|
-
color:
|
|
1445
|
-
border: `1px solid ${
|
|
1476
|
+
backgroundColor: bg3.successPrimary,
|
|
1477
|
+
color: colors3.success[700],
|
|
1478
|
+
border: `1px solid ${colors3.success[300]}`,
|
|
1446
1479
|
"& .MuiAlert-icon": {
|
|
1447
|
-
color:
|
|
1480
|
+
color: fg3.successPrimary
|
|
1448
1481
|
}
|
|
1449
1482
|
},
|
|
1450
1483
|
standardInfo: {
|
|
1451
|
-
backgroundColor:
|
|
1452
|
-
color:
|
|
1453
|
-
border: `1px solid ${
|
|
1484
|
+
backgroundColor: colors3.blue[50],
|
|
1485
|
+
color: colors3.blue[700],
|
|
1486
|
+
border: `1px solid ${colors3.blue[300]}`,
|
|
1454
1487
|
"& .MuiAlert-icon": {
|
|
1455
|
-
color:
|
|
1488
|
+
color: colors3.blue[600]
|
|
1456
1489
|
}
|
|
1457
1490
|
},
|
|
1458
1491
|
icon: {
|
|
@@ -1495,7 +1528,7 @@ function buildComponents(tokens) {
|
|
|
1495
1528
|
fontSize: 18,
|
|
1496
1529
|
lineHeight: "28px",
|
|
1497
1530
|
fontWeight: 600,
|
|
1498
|
-
color:
|
|
1531
|
+
color: text3.primary,
|
|
1499
1532
|
padding: "24px 24px 0"
|
|
1500
1533
|
}
|
|
1501
1534
|
}
|
|
@@ -1506,7 +1539,7 @@ function buildComponents(tokens) {
|
|
|
1506
1539
|
padding: "20px 24px",
|
|
1507
1540
|
fontSize: 14,
|
|
1508
1541
|
lineHeight: "20px",
|
|
1509
|
-
color:
|
|
1542
|
+
color: text3.tertiary
|
|
1510
1543
|
}
|
|
1511
1544
|
}
|
|
1512
1545
|
},
|
|
@@ -1524,14 +1557,14 @@ function buildComponents(tokens) {
|
|
|
1524
1557
|
root: {
|
|
1525
1558
|
borderRadius: radius2.full,
|
|
1526
1559
|
height: 8,
|
|
1527
|
-
backgroundColor:
|
|
1560
|
+
backgroundColor: border3.secondary
|
|
1528
1561
|
},
|
|
1529
1562
|
barColorPrimary: {
|
|
1530
|
-
backgroundColor:
|
|
1563
|
+
backgroundColor: fg3.brandPrimary,
|
|
1531
1564
|
borderRadius: radius2.full
|
|
1532
1565
|
},
|
|
1533
1566
|
barColorSecondary: {
|
|
1534
|
-
backgroundColor:
|
|
1567
|
+
backgroundColor: bg3.secondarySolid,
|
|
1535
1568
|
borderRadius: radius2.full
|
|
1536
1569
|
}
|
|
1537
1570
|
}
|
|
@@ -1539,10 +1572,10 @@ function buildComponents(tokens) {
|
|
|
1539
1572
|
MuiCircularProgress: {
|
|
1540
1573
|
styleOverrides: {
|
|
1541
1574
|
colorPrimary: {
|
|
1542
|
-
color:
|
|
1575
|
+
color: fg3.brandPrimary
|
|
1543
1576
|
},
|
|
1544
1577
|
colorSecondary: {
|
|
1545
|
-
color:
|
|
1578
|
+
color: bg3.secondarySolid
|
|
1546
1579
|
}
|
|
1547
1580
|
}
|
|
1548
1581
|
},
|
|
@@ -1553,7 +1586,7 @@ function buildComponents(tokens) {
|
|
|
1553
1586
|
},
|
|
1554
1587
|
styleOverrides: {
|
|
1555
1588
|
root: {
|
|
1556
|
-
backgroundColor:
|
|
1589
|
+
backgroundColor: bg3.tertiary
|
|
1557
1590
|
},
|
|
1558
1591
|
rounded: {
|
|
1559
1592
|
borderRadius: radius2.md
|
|
@@ -1567,8 +1600,8 @@ function buildComponents(tokens) {
|
|
|
1567
1600
|
MuiSnackbarContent: {
|
|
1568
1601
|
styleOverrides: {
|
|
1569
1602
|
root: {
|
|
1570
|
-
backgroundColor:
|
|
1571
|
-
color:
|
|
1603
|
+
backgroundColor: bg3.primarySolid,
|
|
1604
|
+
color: text3.white,
|
|
1572
1605
|
borderRadius: radius2.xl,
|
|
1573
1606
|
boxShadow: tokenShadows.lg,
|
|
1574
1607
|
fontSize: 14,
|
|
@@ -1603,21 +1636,21 @@ function buildComponents(tokens) {
|
|
|
1603
1636
|
MuiDataGrid: {
|
|
1604
1637
|
styleOverrides: {
|
|
1605
1638
|
root: {
|
|
1606
|
-
border: `1px solid ${
|
|
1639
|
+
border: `1px solid ${border3.secondary}`,
|
|
1607
1640
|
borderRadius: radius2.xl,
|
|
1608
1641
|
fontFamily: "inherit",
|
|
1609
1642
|
"& .MuiDataGrid-withBorderColor": {
|
|
1610
|
-
borderColor:
|
|
1643
|
+
borderColor: border3.secondary
|
|
1611
1644
|
}
|
|
1612
1645
|
},
|
|
1613
1646
|
columnHeaders: {
|
|
1614
|
-
backgroundColor:
|
|
1647
|
+
backgroundColor: bg3.secondary
|
|
1615
1648
|
},
|
|
1616
1649
|
columnHeader: {
|
|
1617
1650
|
fontSize: 12,
|
|
1618
1651
|
lineHeight: "18px",
|
|
1619
1652
|
fontWeight: 500,
|
|
1620
|
-
color:
|
|
1653
|
+
color: fg3.tertiary,
|
|
1621
1654
|
"&:focus, &:focus-within": {
|
|
1622
1655
|
outline: "none"
|
|
1623
1656
|
}
|
|
@@ -1628,27 +1661,27 @@ function buildComponents(tokens) {
|
|
|
1628
1661
|
cell: {
|
|
1629
1662
|
fontSize: 14,
|
|
1630
1663
|
lineHeight: "20px",
|
|
1631
|
-
color:
|
|
1664
|
+
color: fg3.tertiary,
|
|
1632
1665
|
"&:focus, &:focus-within": {
|
|
1633
1666
|
outline: "none"
|
|
1634
1667
|
}
|
|
1635
1668
|
},
|
|
1636
1669
|
row: {
|
|
1637
1670
|
"&:hover": {
|
|
1638
|
-
backgroundColor:
|
|
1671
|
+
backgroundColor: bg3.primaryHover
|
|
1639
1672
|
},
|
|
1640
1673
|
"&.Mui-selected": {
|
|
1641
|
-
backgroundColor:
|
|
1674
|
+
backgroundColor: bg3.brandPrimary,
|
|
1642
1675
|
"&:hover": {
|
|
1643
|
-
backgroundColor:
|
|
1676
|
+
backgroundColor: bg3.brandPrimary
|
|
1644
1677
|
}
|
|
1645
1678
|
}
|
|
1646
1679
|
},
|
|
1647
1680
|
footerContainer: {
|
|
1648
|
-
borderTop: `1px solid ${
|
|
1681
|
+
borderTop: `1px solid ${border3.secondary}`
|
|
1649
1682
|
},
|
|
1650
1683
|
columnSeparator: {
|
|
1651
|
-
color:
|
|
1684
|
+
color: border3.secondary
|
|
1652
1685
|
}
|
|
1653
1686
|
}
|
|
1654
1687
|
}
|
|
@@ -1777,9 +1810,339 @@ var forestPreset = {
|
|
|
1777
1810
|
}
|
|
1778
1811
|
};
|
|
1779
1812
|
|
|
1813
|
+
// src/theme/presets/alkemy-plus.ts
|
|
1814
|
+
var red = {
|
|
1815
|
+
50: "#fef2f2",
|
|
1816
|
+
100: "#fee2e2",
|
|
1817
|
+
200: "#fecaca",
|
|
1818
|
+
600: "#dc2626",
|
|
1819
|
+
700: "#b91c1c",
|
|
1820
|
+
800: "#991b1b",
|
|
1821
|
+
900: "#7f1d1d"};
|
|
1822
|
+
var colors2 = {
|
|
1823
|
+
base: {
|
|
1824
|
+
white: "#ffffff",
|
|
1825
|
+
black: "#000000",
|
|
1826
|
+
transparent: "#ffffff00"
|
|
1827
|
+
},
|
|
1828
|
+
/** Brand scale — black-based for primary actions */
|
|
1829
|
+
brand: {
|
|
1830
|
+
25: "#fafafa",
|
|
1831
|
+
50: "#f5f5f5",
|
|
1832
|
+
100: "#ebebeb",
|
|
1833
|
+
200: "#d6d6d6",
|
|
1834
|
+
300: "#b0b0b0",
|
|
1835
|
+
400: "#737373",
|
|
1836
|
+
500: "#404040",
|
|
1837
|
+
600: "#1a1a1a",
|
|
1838
|
+
700: "#0d0d0d",
|
|
1839
|
+
800: "#050505",
|
|
1840
|
+
900: "#000000",
|
|
1841
|
+
950: "#000000"
|
|
1842
|
+
},
|
|
1843
|
+
/** Warm-neutral gray scale */
|
|
1844
|
+
gray: {
|
|
1845
|
+
25: "#fdfcfc",
|
|
1846
|
+
50: "#faf9f8",
|
|
1847
|
+
100: "#f5f3f1",
|
|
1848
|
+
200: "#e8e5e3",
|
|
1849
|
+
300: "#d8d8dc",
|
|
1850
|
+
400: "#a0a0a6",
|
|
1851
|
+
500: "#71717a",
|
|
1852
|
+
600: "#52525b",
|
|
1853
|
+
700: "#3f3f46",
|
|
1854
|
+
800: "#27272a",
|
|
1855
|
+
900: "#18181b",
|
|
1856
|
+
950: "#09090b"
|
|
1857
|
+
},
|
|
1858
|
+
/** Error — forest defaults (standard UX red) */
|
|
1859
|
+
error: colors.error,
|
|
1860
|
+
/** Warning — orange/yellow tones from Alkemy+ palette */
|
|
1861
|
+
warning: {
|
|
1862
|
+
25: "#fffcf5",
|
|
1863
|
+
50: "#fff7ed",
|
|
1864
|
+
100: "#ffedd5",
|
|
1865
|
+
200: "#fed7aa",
|
|
1866
|
+
300: "#fdba74",
|
|
1867
|
+
400: "#fb923c",
|
|
1868
|
+
500: "#f08828",
|
|
1869
|
+
600: "#ea580c",
|
|
1870
|
+
700: "#c2410c",
|
|
1871
|
+
800: "#9a3412",
|
|
1872
|
+
900: "#7c2d12",
|
|
1873
|
+
950: "#431407"
|
|
1874
|
+
},
|
|
1875
|
+
/** Success — forest defaults (standard UX green) */
|
|
1876
|
+
success: colors.success,
|
|
1877
|
+
/** Blue (info) — forest defaults (standard UX) */
|
|
1878
|
+
blue: colors.blue
|
|
1879
|
+
};
|
|
1880
|
+
var text2 = {
|
|
1881
|
+
primary: colors2.gray[900],
|
|
1882
|
+
secondary: colors2.gray[700],
|
|
1883
|
+
secondaryHover: colors2.gray[800],
|
|
1884
|
+
tertiary: colors2.gray[600],
|
|
1885
|
+
tertiaryHover: colors2.gray[700],
|
|
1886
|
+
quaternary: colors2.gray[500],
|
|
1887
|
+
disabled: colors2.gray[500],
|
|
1888
|
+
placeholder: colors2.gray[500],
|
|
1889
|
+
placeholderSubtle: colors2.gray[300],
|
|
1890
|
+
white: colors2.base.white,
|
|
1891
|
+
brandPrimary: red[900],
|
|
1892
|
+
brandSecondary: red[700],
|
|
1893
|
+
brandTertiary: red[600],
|
|
1894
|
+
brandTertiaryAlt: red[600],
|
|
1895
|
+
primaryOnBrand: colors2.base.white,
|
|
1896
|
+
secondaryOnBrand: colors2.brand[200],
|
|
1897
|
+
tertiaryOnBrand: colors2.brand[200],
|
|
1898
|
+
quaternaryOnBrand: colors2.brand[300],
|
|
1899
|
+
errorPrimary: colors2.error[600],
|
|
1900
|
+
warningPrimary: colors2.warning[600],
|
|
1901
|
+
successPrimary: colors2.success[600]
|
|
1902
|
+
};
|
|
1903
|
+
var bg2 = {
|
|
1904
|
+
primary: colors2.gray[50],
|
|
1905
|
+
primaryAlt: colors2.gray[50],
|
|
1906
|
+
primaryHover: colors2.gray[50],
|
|
1907
|
+
primarySolid: colors2.gray[950],
|
|
1908
|
+
secondary: colors2.base.white,
|
|
1909
|
+
secondaryAlt: colors2.base.white,
|
|
1910
|
+
secondarySubtle: colors2.gray[25],
|
|
1911
|
+
secondaryHover: colors2.gray[100],
|
|
1912
|
+
secondarySolid: colors2.gray[600],
|
|
1913
|
+
tertiary: colors2.gray[100],
|
|
1914
|
+
quaternary: colors2.gray[200],
|
|
1915
|
+
active: colors2.gray[50],
|
|
1916
|
+
disabled: colors2.gray[100],
|
|
1917
|
+
disabledSubtle: colors2.gray[50],
|
|
1918
|
+
overlay: colors2.gray[950],
|
|
1919
|
+
brandPrimary: colors2.brand[100],
|
|
1920
|
+
brandPrimaryAlt: colors2.brand[100],
|
|
1921
|
+
brandSecondary: colors2.brand[200],
|
|
1922
|
+
brandSolid: colors2.brand[600],
|
|
1923
|
+
brandSolidHover: colors2.brand[700],
|
|
1924
|
+
brandSection: colors2.brand[800],
|
|
1925
|
+
brandSectionSubtle: colors2.brand[700],
|
|
1926
|
+
errorPrimary: colors2.error[50],
|
|
1927
|
+
errorSecondary: colors2.error[100],
|
|
1928
|
+
errorSolid: colors2.error[600],
|
|
1929
|
+
warningPrimary: colors2.warning[50],
|
|
1930
|
+
warningSecondary: colors2.warning[100],
|
|
1931
|
+
warningSolid: colors2.warning[600],
|
|
1932
|
+
successPrimary: colors2.success[50],
|
|
1933
|
+
successSecondary: colors2.success[100],
|
|
1934
|
+
successSolid: colors2.success[600]
|
|
1935
|
+
};
|
|
1936
|
+
var fg2 = {
|
|
1937
|
+
primary: colors2.gray[900],
|
|
1938
|
+
secondary: colors2.gray[700],
|
|
1939
|
+
secondaryHover: colors2.gray[800],
|
|
1940
|
+
tertiary: colors2.gray[600],
|
|
1941
|
+
tertiaryHover: colors2.gray[700],
|
|
1942
|
+
quaternary: colors2.gray[500],
|
|
1943
|
+
quaternaryHover: colors2.gray[600],
|
|
1944
|
+
quinary: colors2.gray[400],
|
|
1945
|
+
quinaryHover: colors2.gray[500],
|
|
1946
|
+
senary: colors2.gray[300],
|
|
1947
|
+
white: colors2.base.white,
|
|
1948
|
+
disabled: colors2.gray[400],
|
|
1949
|
+
disabledSubtle: colors2.gray[300],
|
|
1950
|
+
brandPrimary: colors2.brand[600],
|
|
1951
|
+
brandPrimaryAlt: colors2.brand[600],
|
|
1952
|
+
brandSecondary: colors2.brand[500],
|
|
1953
|
+
errorPrimary: colors2.error[600],
|
|
1954
|
+
errorSecondary: colors2.error[500],
|
|
1955
|
+
warningPrimary: colors2.warning[600],
|
|
1956
|
+
warningSecondary: colors2.warning[500],
|
|
1957
|
+
successPrimary: colors2.success[600],
|
|
1958
|
+
successSecondary: colors2.success[500]
|
|
1959
|
+
};
|
|
1960
|
+
var border2 = {
|
|
1961
|
+
primary: colors2.gray[300],
|
|
1962
|
+
secondary: colors2.gray[200],
|
|
1963
|
+
tertiary: colors2.gray[100],
|
|
1964
|
+
disabled: colors2.gray[300],
|
|
1965
|
+
disabledSubtle: colors2.gray[200],
|
|
1966
|
+
brand: colors2.brand[300],
|
|
1967
|
+
brandSolid: colors2.brand[600],
|
|
1968
|
+
brandSolidAlt: colors2.brand[600],
|
|
1969
|
+
error: colors2.error[300],
|
|
1970
|
+
errorSolid: colors2.error[600]
|
|
1971
|
+
};
|
|
1972
|
+
var buttonColors2 = {
|
|
1973
|
+
/** Primary buttons — black */
|
|
1974
|
+
primary: {
|
|
1975
|
+
bg: colors2.brand[600],
|
|
1976
|
+
bgHover: colors2.brand[700],
|
|
1977
|
+
fg: colors2.base.white,
|
|
1978
|
+
fgHover: colors2.base.white,
|
|
1979
|
+
border: colors2.brand[600],
|
|
1980
|
+
borderHover: colors2.brand[700]
|
|
1981
|
+
},
|
|
1982
|
+
secondary: {
|
|
1983
|
+
bg: colors2.base.white,
|
|
1984
|
+
bgHover: colors2.gray[50],
|
|
1985
|
+
fg: colors2.gray[700],
|
|
1986
|
+
fgHover: colors2.gray[800],
|
|
1987
|
+
border: colors2.gray[300],
|
|
1988
|
+
borderHover: colors2.gray[300]
|
|
1989
|
+
},
|
|
1990
|
+
/** Outlined accent buttons — dark */
|
|
1991
|
+
secondaryColor: {
|
|
1992
|
+
bg: colors2.base.white,
|
|
1993
|
+
bgHover: colors2.brand[50],
|
|
1994
|
+
fg: colors2.brand[700],
|
|
1995
|
+
fgHover: colors2.brand[800],
|
|
1996
|
+
border: colors2.brand[300],
|
|
1997
|
+
borderHover: colors2.brand[300]
|
|
1998
|
+
},
|
|
1999
|
+
tertiary: {
|
|
2000
|
+
fg: colors2.gray[600],
|
|
2001
|
+
fgHover: colors2.gray[700],
|
|
2002
|
+
bgHover: colors2.gray[50]
|
|
2003
|
+
},
|
|
2004
|
+
/** Text accent buttons — red */
|
|
2005
|
+
tertiaryColor: {
|
|
2006
|
+
fg: red[700],
|
|
2007
|
+
fgHover: red[800],
|
|
2008
|
+
bgHover: red[50]
|
|
2009
|
+
},
|
|
2010
|
+
primaryError: {
|
|
2011
|
+
bg: colors2.error[600],
|
|
2012
|
+
bgHover: colors2.error[700],
|
|
2013
|
+
fg: colors2.base.white,
|
|
2014
|
+
fgHover: colors2.base.white,
|
|
2015
|
+
border: colors2.error[600],
|
|
2016
|
+
borderHover: colors2.error[700]
|
|
2017
|
+
},
|
|
2018
|
+
secondaryError: {
|
|
2019
|
+
bg: colors2.base.white,
|
|
2020
|
+
bgHover: colors2.error[50],
|
|
2021
|
+
fg: colors2.error[700],
|
|
2022
|
+
fgHover: colors2.error[800],
|
|
2023
|
+
border: colors2.error[300],
|
|
2024
|
+
borderHover: colors2.error[300]
|
|
2025
|
+
},
|
|
2026
|
+
tertiaryError: {
|
|
2027
|
+
fg: colors2.error[700],
|
|
2028
|
+
fgHover: colors2.error[800],
|
|
2029
|
+
bgHover: colors2.error[50]
|
|
2030
|
+
}
|
|
2031
|
+
};
|
|
2032
|
+
var avatarColors2 = {
|
|
2033
|
+
bg: colors2.gray[100],
|
|
2034
|
+
contrastBorder: "#00000014",
|
|
2035
|
+
profilePhotoBorder: colors2.base.white,
|
|
2036
|
+
focusBorder: "#a0a0a624"
|
|
2037
|
+
};
|
|
2038
|
+
var breadcrumbColors2 = {
|
|
2039
|
+
fg: colors2.gray[600],
|
|
2040
|
+
fgHover: colors2.gray[700],
|
|
2041
|
+
bgHover: colors2.gray[50],
|
|
2042
|
+
brandBgHover: red[50],
|
|
2043
|
+
brandFgHover: red[700],
|
|
2044
|
+
iconFg: colors2.gray[500],
|
|
2045
|
+
iconFgHover: colors2.gray[700],
|
|
2046
|
+
brandIconFgHover: red[700]
|
|
2047
|
+
};
|
|
2048
|
+
var iconColors2 = {
|
|
2049
|
+
fgBrand: red[600],
|
|
2050
|
+
fgBrandOnBrand: red[200],
|
|
2051
|
+
featuredModernBorder: colors2.gray[200],
|
|
2052
|
+
featuredLightFgBrand: red[600],
|
|
2053
|
+
featuredLightFgGray: colors2.gray[500],
|
|
2054
|
+
featuredLightFgError: colors2.error[600],
|
|
2055
|
+
featuredLightFgWarning: colors2.warning[600],
|
|
2056
|
+
featuredLightFgSuccess: colors2.success[600],
|
|
2057
|
+
featuredDarkFgBrand: colors2.base.white,
|
|
2058
|
+
featuredDarkFgGray: colors2.base.white,
|
|
2059
|
+
featuredDarkFgError: colors2.base.white,
|
|
2060
|
+
featuredDarkFgWarning: colors2.base.white,
|
|
2061
|
+
featuredDarkFgSuccess: colors2.base.white
|
|
2062
|
+
};
|
|
2063
|
+
var navColors2 = {
|
|
2064
|
+
itemIconFg: colors2.gray[500],
|
|
2065
|
+
itemIconFgActive: colors2.gray[500],
|
|
2066
|
+
itemButtonIconFg: colors2.gray[500],
|
|
2067
|
+
itemButtonIconFgActive: colors2.gray[700]
|
|
2068
|
+
};
|
|
2069
|
+
var sliderColors2 = {
|
|
2070
|
+
handleBorder: red[600],
|
|
2071
|
+
handleBg: colors2.base.white
|
|
2072
|
+
};
|
|
2073
|
+
var toggleColors2 = {
|
|
2074
|
+
buttonFgDisabled: colors2.gray[50]
|
|
2075
|
+
};
|
|
2076
|
+
var chartColors2 = {
|
|
2077
|
+
axisFg: colors2.gray[200],
|
|
2078
|
+
gridlineFg: colors2.gray[100],
|
|
2079
|
+
labelFg: colors2.gray[600],
|
|
2080
|
+
labelFgEmphasis: colors2.gray[700],
|
|
2081
|
+
bg: colors2.base.white,
|
|
2082
|
+
bgAlt: colors2.gray[50],
|
|
2083
|
+
tooltipBg: colors2.gray[950],
|
|
2084
|
+
tooltipFg: colors2.base.white,
|
|
2085
|
+
crosshairFg: colors2.gray[500],
|
|
2086
|
+
legendFg: colors2.gray[700],
|
|
2087
|
+
series1Fg: colors2.brand[600],
|
|
2088
|
+
series1FgHover: colors2.brand[700],
|
|
2089
|
+
series1Bg: colors2.brand[100],
|
|
2090
|
+
series1BgHover: colors2.brand[200],
|
|
2091
|
+
series2Fg: red[600],
|
|
2092
|
+
series2FgHover: red[700],
|
|
2093
|
+
series2Bg: red[100],
|
|
2094
|
+
series2BgHover: red[200]
|
|
2095
|
+
};
|
|
2096
|
+
var focusRings2 = {
|
|
2097
|
+
brand: "0px 0px 0px 4px #f040403d",
|
|
2098
|
+
brandShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #f040403d",
|
|
2099
|
+
brandShadowSm: "0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #f040403d",
|
|
2100
|
+
gray: "0px 0px 0px 4px #a0a0a624",
|
|
2101
|
+
grayShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #a0a0a624",
|
|
2102
|
+
grayShadowSm: "0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #a0a0a624",
|
|
2103
|
+
error: "0px 0px 0px 4px #f044383d",
|
|
2104
|
+
errorShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #f044383d"
|
|
2105
|
+
};
|
|
2106
|
+
var alkemyPlusPreset = {
|
|
2107
|
+
name: "alkemy-plus",
|
|
2108
|
+
defaultVariant: "light",
|
|
2109
|
+
variants: {
|
|
2110
|
+
light: {
|
|
2111
|
+
tokens: {
|
|
2112
|
+
colors: colors2,
|
|
2113
|
+
spacing,
|
|
2114
|
+
radius,
|
|
2115
|
+
shadows,
|
|
2116
|
+
focusRings: focusRings2,
|
|
2117
|
+
fontFamily: '"Aeonik", sans-serif',
|
|
2118
|
+
fontSize,
|
|
2119
|
+
lineHeight,
|
|
2120
|
+
fontWeight,
|
|
2121
|
+
display,
|
|
2122
|
+
container,
|
|
2123
|
+
widths,
|
|
2124
|
+
text: text2,
|
|
2125
|
+
bg: bg2,
|
|
2126
|
+
fg: fg2,
|
|
2127
|
+
border: border2,
|
|
2128
|
+
buttonColors: buttonColors2,
|
|
2129
|
+
avatarColors: avatarColors2,
|
|
2130
|
+
breadcrumbColors: breadcrumbColors2,
|
|
2131
|
+
iconColors: iconColors2,
|
|
2132
|
+
navColors: navColors2,
|
|
2133
|
+
sliderColors: sliderColors2,
|
|
2134
|
+
toggleColors: toggleColors2,
|
|
2135
|
+
chartColors: chartColors2,
|
|
2136
|
+
alpha
|
|
2137
|
+
}
|
|
2138
|
+
}
|
|
2139
|
+
}
|
|
2140
|
+
};
|
|
2141
|
+
|
|
1780
2142
|
// src/theme/presets/index.ts
|
|
1781
2143
|
var presetRegistry = /* @__PURE__ */ new Map();
|
|
1782
2144
|
presetRegistry.set(forestPreset.name, forestPreset);
|
|
2145
|
+
presetRegistry.set(alkemyPlusPreset.name, alkemyPlusPreset);
|
|
1783
2146
|
function getPreset(name) {
|
|
1784
2147
|
return presetRegistry.get(name);
|
|
1785
2148
|
}
|
|
@@ -1802,6 +2165,6 @@ var forestThemeOptions = {
|
|
|
1802
2165
|
};
|
|
1803
2166
|
var forestTheme = createTheme(forestThemeOptions);
|
|
1804
2167
|
|
|
1805
|
-
export { alpha, avatarColors, bg, border, breadcrumbColors, buildTheme, buildThemeOptions, buttonColors, chartColors, colors, components, container, display, fg, focusRings, fontFamily, fontSize, fontWeight, forestPreset, forestTheme, forestThemeOptions, getAvailablePresets, getPreset, iconColors, lineHeight, navColors, palette, radius, registerPreset, shadows, shadows2, sliderColors, spacing, text, toggleColors, typography, widths };
|
|
1806
|
-
//# sourceMappingURL=chunk-
|
|
1807
|
-
//# sourceMappingURL=chunk-
|
|
2168
|
+
export { alkemyPlusPreset, alpha, avatarColors, bg, border, breadcrumbColors, buildTheme, buildThemeOptions, buttonColors, chartColors, colors, components, container, display, fg, focusRings, fontFamily, fontSize, fontWeight, forestPreset, forestTheme, forestThemeOptions, getAvailablePresets, getPreset, iconColors, lineHeight, navColors, palette, radius, registerPreset, shadows, shadows2, sliderColors, spacing, text, toggleColors, typography, widths };
|
|
2169
|
+
//# sourceMappingURL=chunk-3FSKMCSC.mjs.map
|
|
2170
|
+
//# sourceMappingURL=chunk-3FSKMCSC.mjs.map
|