@matteoaliano/forest-ui 0.2.11 → 0.3.0
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/README.md +123 -0
- package/dist/{chunk-6W3RIXXY.mjs → chunk-EULMNCHH.mjs} +935 -352
- package/dist/chunk-EULMNCHH.mjs.map +1 -0
- package/dist/{index-DJDmMb_c.d.mts → index-EkBIDmEu.d.mts} +11 -9
- package/dist/{index-DJDmMb_c.d.ts → index-EkBIDmEu.d.ts} +11 -9
- package/dist/index.d.mts +26 -10
- package/dist/index.d.ts +26 -10
- package/dist/index.js +1011 -370
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +71 -15
- package/dist/index.mjs.map +1 -1
- package/dist/theme.d.mts +1 -1
- package/dist/theme.d.ts +1 -1
- package/dist/theme.js +935 -351
- package/dist/theme.js.map +1 -1
- package/dist/theme.mjs +1 -1
- package/guidelines/FOREST_BE_GUIDELINES.md +1 -1
- package/guidelines/FOREST_FE_GUIDELINES.md +1 -1
- package/guidelines/FOREST_UI_GUIDELINES.md +1 -1
- package/package.json +12 -5
- package/dist/chunk-6W3RIXXY.mjs.map +0 -1
package/dist/index.js
CHANGED
|
@@ -21,6 +21,7 @@ var MuiTextField = require('@mui/material/TextField');
|
|
|
21
21
|
var InputAdornment = require('@mui/material/InputAdornment');
|
|
22
22
|
var IconButton = require('@mui/material/IconButton');
|
|
23
23
|
var utils = require('@mui/material/utils');
|
|
24
|
+
var material = require('@mui/material');
|
|
24
25
|
var MuiToggleButton = require('@mui/material/ToggleButton');
|
|
25
26
|
var MuiToggleButtonGroup = require('@mui/material/ToggleButtonGroup');
|
|
26
27
|
var DatePicker$1 = require('@mui/x-date-pickers/DatePicker');
|
|
@@ -81,9 +82,8 @@ var MuiStepLabel = require('@mui/material/StepLabel');
|
|
|
81
82
|
var MuiTabs = require('@mui/material/Tabs');
|
|
82
83
|
var MuiTab = require('@mui/material/Tab');
|
|
83
84
|
var MuiDrawer = require('@mui/material/Drawer');
|
|
84
|
-
var
|
|
85
|
+
var Box2 = require('@mui/material/Box');
|
|
85
86
|
var LineChart$1 = require('@mui/x-charts/LineChart');
|
|
86
|
-
var material = require('@mui/material');
|
|
87
87
|
var BarChart$1 = require('@mui/x-charts/BarChart');
|
|
88
88
|
var PieChart$1 = require('@mui/x-charts/PieChart');
|
|
89
89
|
|
|
@@ -163,7 +163,7 @@ var MuiStepLabel__default = /*#__PURE__*/_interopDefault(MuiStepLabel);
|
|
|
163
163
|
var MuiTabs__default = /*#__PURE__*/_interopDefault(MuiTabs);
|
|
164
164
|
var MuiTab__default = /*#__PURE__*/_interopDefault(MuiTab);
|
|
165
165
|
var MuiDrawer__default = /*#__PURE__*/_interopDefault(MuiDrawer);
|
|
166
|
-
var
|
|
166
|
+
var Box2__default = /*#__PURE__*/_interopDefault(Box2);
|
|
167
167
|
|
|
168
168
|
// src/provider/ForestProvider.tsx
|
|
169
169
|
|
|
@@ -692,65 +692,65 @@ var alpha = {
|
|
|
692
692
|
// src/theme/palette.ts
|
|
693
693
|
function buildPalette(tokens) {
|
|
694
694
|
var _a;
|
|
695
|
-
const { colors:
|
|
695
|
+
const { colors: colors5, text: text5, bg: bg5, fg: fg5, border: border5 } = tokens;
|
|
696
696
|
return {
|
|
697
697
|
primary: {
|
|
698
|
-
main:
|
|
699
|
-
light:
|
|
700
|
-
dark:
|
|
701
|
-
contrastText:
|
|
698
|
+
main: colors5.brand[600],
|
|
699
|
+
light: colors5.brand[400],
|
|
700
|
+
dark: colors5.brand[700],
|
|
701
|
+
contrastText: colors5.base.white
|
|
702
702
|
},
|
|
703
703
|
secondary: {
|
|
704
|
-
main:
|
|
705
|
-
light:
|
|
706
|
-
dark:
|
|
707
|
-
contrastText:
|
|
704
|
+
main: colors5.gray[600],
|
|
705
|
+
light: colors5.gray[400],
|
|
706
|
+
dark: colors5.gray[700],
|
|
707
|
+
contrastText: colors5.base.white
|
|
708
708
|
},
|
|
709
709
|
error: {
|
|
710
|
-
main:
|
|
711
|
-
light:
|
|
712
|
-
dark:
|
|
713
|
-
contrastText:
|
|
710
|
+
main: colors5.error[600],
|
|
711
|
+
light: colors5.error[300],
|
|
712
|
+
dark: colors5.error[700],
|
|
713
|
+
contrastText: colors5.base.white
|
|
714
714
|
},
|
|
715
715
|
warning: {
|
|
716
|
-
main:
|
|
717
|
-
light:
|
|
718
|
-
dark:
|
|
719
|
-
contrastText:
|
|
716
|
+
main: colors5.warning[600],
|
|
717
|
+
light: colors5.warning[300],
|
|
718
|
+
dark: colors5.warning[700],
|
|
719
|
+
contrastText: colors5.base.white
|
|
720
720
|
},
|
|
721
721
|
success: {
|
|
722
|
-
main:
|
|
723
|
-
light:
|
|
724
|
-
dark:
|
|
725
|
-
contrastText:
|
|
722
|
+
main: colors5.success[600],
|
|
723
|
+
light: colors5.success[300],
|
|
724
|
+
dark: colors5.success[700],
|
|
725
|
+
contrastText: colors5.base.white
|
|
726
726
|
},
|
|
727
727
|
info: {
|
|
728
|
-
main:
|
|
729
|
-
light:
|
|
730
|
-
dark:
|
|
731
|
-
contrastText:
|
|
728
|
+
main: colors5.blue[600],
|
|
729
|
+
light: colors5.blue[300],
|
|
730
|
+
dark: colors5.blue[700],
|
|
731
|
+
contrastText: colors5.base.white
|
|
732
732
|
},
|
|
733
733
|
background: {
|
|
734
|
-
default:
|
|
735
|
-
paper:
|
|
734
|
+
default: bg5.primary,
|
|
735
|
+
paper: bg5.secondary
|
|
736
736
|
},
|
|
737
737
|
text: {
|
|
738
|
-
primary:
|
|
739
|
-
secondary:
|
|
740
|
-
disabled:
|
|
738
|
+
primary: text5.primary,
|
|
739
|
+
secondary: text5.secondary,
|
|
740
|
+
disabled: text5.disabled
|
|
741
741
|
},
|
|
742
|
-
divider:
|
|
742
|
+
divider: border5.secondary,
|
|
743
743
|
action: {
|
|
744
|
-
active:
|
|
745
|
-
hover:
|
|
746
|
-
selected:
|
|
747
|
-
disabled:
|
|
748
|
-
disabledBackground:
|
|
744
|
+
active: fg5.tertiary,
|
|
745
|
+
hover: bg5.primaryHover,
|
|
746
|
+
selected: bg5.brandPrimary,
|
|
747
|
+
disabled: fg5.disabled,
|
|
748
|
+
disabledBackground: bg5.disabled
|
|
749
749
|
},
|
|
750
750
|
chart: (_a = tokens.chartColors) != null ? _a : chartColors
|
|
751
751
|
};
|
|
752
752
|
}
|
|
753
|
-
|
|
753
|
+
buildPalette({
|
|
754
754
|
colors,
|
|
755
755
|
text,
|
|
756
756
|
bg,
|
|
@@ -841,7 +841,7 @@ function buildTypography(tokens) {
|
|
|
841
841
|
}
|
|
842
842
|
};
|
|
843
843
|
}
|
|
844
|
-
|
|
844
|
+
buildTypography({
|
|
845
845
|
fontFamily,
|
|
846
846
|
display,
|
|
847
847
|
fontSize,
|
|
@@ -849,18 +849,78 @@ var typography = buildTypography({
|
|
|
849
849
|
fontWeight
|
|
850
850
|
});
|
|
851
851
|
|
|
852
|
+
// src/theme/shadows.ts
|
|
853
|
+
function buildShadows(tokens) {
|
|
854
|
+
const tokenShadows = tokens.shadows;
|
|
855
|
+
return [
|
|
856
|
+
"none",
|
|
857
|
+
// 0
|
|
858
|
+
tokenShadows.xs,
|
|
859
|
+
// 1
|
|
860
|
+
tokenShadows.sm,
|
|
861
|
+
// 2
|
|
862
|
+
tokenShadows.sm,
|
|
863
|
+
// 3
|
|
864
|
+
tokenShadows.md,
|
|
865
|
+
// 4
|
|
866
|
+
tokenShadows.md,
|
|
867
|
+
// 5
|
|
868
|
+
tokenShadows.md,
|
|
869
|
+
// 6
|
|
870
|
+
tokenShadows.lg,
|
|
871
|
+
// 7
|
|
872
|
+
tokenShadows.lg,
|
|
873
|
+
// 8
|
|
874
|
+
tokenShadows.lg,
|
|
875
|
+
// 9
|
|
876
|
+
tokenShadows.xl,
|
|
877
|
+
// 10
|
|
878
|
+
tokenShadows.xl,
|
|
879
|
+
// 11
|
|
880
|
+
tokenShadows.xl,
|
|
881
|
+
// 12
|
|
882
|
+
tokenShadows["2xl"],
|
|
883
|
+
// 13
|
|
884
|
+
tokenShadows["2xl"],
|
|
885
|
+
// 14
|
|
886
|
+
tokenShadows["2xl"],
|
|
887
|
+
// 15
|
|
888
|
+
tokenShadows["3xl"],
|
|
889
|
+
// 16
|
|
890
|
+
tokenShadows["3xl"],
|
|
891
|
+
// 17
|
|
892
|
+
tokenShadows["3xl"],
|
|
893
|
+
// 18
|
|
894
|
+
tokenShadows["3xl"],
|
|
895
|
+
// 19
|
|
896
|
+
tokenShadows["3xl"],
|
|
897
|
+
// 20
|
|
898
|
+
tokenShadows["3xl"],
|
|
899
|
+
// 21
|
|
900
|
+
tokenShadows["3xl"],
|
|
901
|
+
// 22
|
|
902
|
+
tokenShadows["3xl"],
|
|
903
|
+
// 23
|
|
904
|
+
tokenShadows["3xl"]
|
|
905
|
+
// 24
|
|
906
|
+
];
|
|
907
|
+
}
|
|
908
|
+
buildShadows({
|
|
909
|
+
shadows
|
|
910
|
+
});
|
|
911
|
+
|
|
852
912
|
// src/theme/components.ts
|
|
853
913
|
function buildComponents(tokens) {
|
|
854
914
|
const {
|
|
855
|
-
colors:
|
|
856
|
-
radius:
|
|
857
|
-
focusRings:
|
|
915
|
+
colors: colors5,
|
|
916
|
+
radius: radius5,
|
|
917
|
+
focusRings: focusRings5,
|
|
858
918
|
shadows: tokenShadows,
|
|
859
|
-
text:
|
|
860
|
-
bg:
|
|
861
|
-
fg:
|
|
862
|
-
border:
|
|
863
|
-
buttonColors:
|
|
919
|
+
text: text5,
|
|
920
|
+
bg: bg5,
|
|
921
|
+
fg: fg5,
|
|
922
|
+
border: border5,
|
|
923
|
+
buttonColors: buttonColors5
|
|
864
924
|
} = tokens;
|
|
865
925
|
return {
|
|
866
926
|
// ─── Button ─────────────────────────────────────────────────────
|
|
@@ -870,7 +930,7 @@ function buildComponents(tokens) {
|
|
|
870
930
|
},
|
|
871
931
|
styleOverrides: {
|
|
872
932
|
root: {
|
|
873
|
-
borderRadius:
|
|
933
|
+
borderRadius: radius5.md,
|
|
874
934
|
fontWeight: 600,
|
|
875
935
|
boxShadow: tokenShadows.xs,
|
|
876
936
|
height: 32,
|
|
@@ -878,36 +938,36 @@ function buildComponents(tokens) {
|
|
|
878
938
|
fontSize: 14,
|
|
879
939
|
lineHeight: "20px",
|
|
880
940
|
"&:focus-visible": {
|
|
881
|
-
boxShadow:
|
|
941
|
+
boxShadow: focusRings5.brandShadowXs
|
|
882
942
|
}
|
|
883
943
|
},
|
|
884
944
|
containedPrimary: {
|
|
885
|
-
backgroundColor:
|
|
945
|
+
backgroundColor: buttonColors5.primary.bg,
|
|
886
946
|
"&:hover": {
|
|
887
|
-
backgroundColor:
|
|
947
|
+
backgroundColor: buttonColors5.primary.bgHover
|
|
888
948
|
}
|
|
889
949
|
},
|
|
890
950
|
outlinedPrimary: {
|
|
891
|
-
borderColor:
|
|
892
|
-
color:
|
|
951
|
+
borderColor: buttonColors5.secondaryColor.border,
|
|
952
|
+
color: buttonColors5.secondaryColor.fg,
|
|
893
953
|
"&:hover": {
|
|
894
|
-
backgroundColor:
|
|
895
|
-
borderColor:
|
|
954
|
+
backgroundColor: buttonColors5.secondaryColor.bgHover,
|
|
955
|
+
borderColor: buttonColors5.secondaryColor.borderHover
|
|
896
956
|
}
|
|
897
957
|
},
|
|
898
958
|
outlinedSecondary: {
|
|
899
|
-
borderColor:
|
|
959
|
+
borderColor: buttonColors5.secondary.border,
|
|
900
960
|
"&:hover": {
|
|
901
|
-
borderColor:
|
|
961
|
+
borderColor: buttonColors5.secondary.borderHover
|
|
902
962
|
}
|
|
903
963
|
},
|
|
904
964
|
text: {
|
|
905
965
|
boxShadow: "none"
|
|
906
966
|
},
|
|
907
967
|
textPrimary: {
|
|
908
|
-
color:
|
|
968
|
+
color: buttonColors5.tertiaryColor.fg,
|
|
909
969
|
"&:hover": {
|
|
910
|
-
backgroundColor:
|
|
970
|
+
backgroundColor: buttonColors5.tertiaryColor.bgHover
|
|
911
971
|
}
|
|
912
972
|
}
|
|
913
973
|
}
|
|
@@ -919,11 +979,11 @@ function buildComponents(tokens) {
|
|
|
919
979
|
},
|
|
920
980
|
styleOverrides: {
|
|
921
981
|
root: {
|
|
922
|
-
borderRadius:
|
|
982
|
+
borderRadius: radius5.md
|
|
923
983
|
},
|
|
924
984
|
grouped: {
|
|
925
985
|
"&:not(:last-of-type)": {
|
|
926
|
-
borderRight: `1px solid ${
|
|
986
|
+
borderRight: `1px solid ${buttonColors5.primary.borderHover}`
|
|
927
987
|
}
|
|
928
988
|
}
|
|
929
989
|
}
|
|
@@ -937,13 +997,13 @@ function buildComponents(tokens) {
|
|
|
937
997
|
boxShadow: tokenShadows.lg
|
|
938
998
|
},
|
|
939
999
|
"&:focus-visible": {
|
|
940
|
-
boxShadow:
|
|
1000
|
+
boxShadow: focusRings5.brandShadowSm
|
|
941
1001
|
}
|
|
942
1002
|
},
|
|
943
1003
|
primary: {
|
|
944
|
-
backgroundColor:
|
|
1004
|
+
backgroundColor: buttonColors5.primary.bg,
|
|
945
1005
|
"&:hover": {
|
|
946
|
-
backgroundColor:
|
|
1006
|
+
backgroundColor: buttonColors5.primary.bgHover
|
|
947
1007
|
}
|
|
948
1008
|
}
|
|
949
1009
|
}
|
|
@@ -958,8 +1018,8 @@ function buildComponents(tokens) {
|
|
|
958
1018
|
styleOverrides: {
|
|
959
1019
|
input: {
|
|
960
1020
|
"&::placeholder": {
|
|
961
|
-
color:
|
|
962
|
-
WebkitTextFillColor:
|
|
1021
|
+
color: text5.placeholder,
|
|
1022
|
+
WebkitTextFillColor: text5.placeholder,
|
|
963
1023
|
fontWeight: 400,
|
|
964
1024
|
opacity: 1
|
|
965
1025
|
}
|
|
@@ -969,26 +1029,26 @@ function buildComponents(tokens) {
|
|
|
969
1029
|
MuiOutlinedInput: {
|
|
970
1030
|
styleOverrides: {
|
|
971
1031
|
root: {
|
|
972
|
-
borderRadius:
|
|
1032
|
+
borderRadius: radius5.md,
|
|
973
1033
|
boxShadow: tokenShadows.xs,
|
|
974
1034
|
"&:hover .MuiOutlinedInput-notchedOutline": {
|
|
975
|
-
borderColor:
|
|
1035
|
+
borderColor: border5.brand
|
|
976
1036
|
},
|
|
977
1037
|
"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
|
|
978
|
-
borderColor:
|
|
1038
|
+
borderColor: border5.brandSolid,
|
|
979
1039
|
borderWidth: 1,
|
|
980
1040
|
boxShadow: "none"
|
|
981
1041
|
},
|
|
982
1042
|
"&.Mui-error .MuiOutlinedInput-notchedOutline": {
|
|
983
|
-
borderColor:
|
|
1043
|
+
borderColor: border5.error
|
|
984
1044
|
},
|
|
985
1045
|
"&.Mui-error.Mui-focused .MuiOutlinedInput-notchedOutline": {
|
|
986
|
-
borderColor:
|
|
1046
|
+
borderColor: border5.errorSolid,
|
|
987
1047
|
boxShadow: "none"
|
|
988
1048
|
}
|
|
989
1049
|
},
|
|
990
1050
|
notchedOutline: {
|
|
991
|
-
borderColor:
|
|
1051
|
+
borderColor: border5.primary
|
|
992
1052
|
},
|
|
993
1053
|
input: {
|
|
994
1054
|
padding: "6px 12px",
|
|
@@ -1000,12 +1060,12 @@ function buildComponents(tokens) {
|
|
|
1000
1060
|
MuiFormLabel: {
|
|
1001
1061
|
styleOverrides: {
|
|
1002
1062
|
root: {
|
|
1003
|
-
color:
|
|
1063
|
+
color: text5.placeholder,
|
|
1004
1064
|
"&.Mui-focused": {
|
|
1005
|
-
color:
|
|
1065
|
+
color: text5.placeholder
|
|
1006
1066
|
},
|
|
1007
1067
|
"&.Mui-error": {
|
|
1008
|
-
color:
|
|
1068
|
+
color: text5.errorPrimary
|
|
1009
1069
|
}
|
|
1010
1070
|
}
|
|
1011
1071
|
}
|
|
@@ -1015,12 +1075,12 @@ function buildComponents(tokens) {
|
|
|
1015
1075
|
root: {
|
|
1016
1076
|
fontSize: 14,
|
|
1017
1077
|
fontWeight: 500,
|
|
1018
|
-
color:
|
|
1078
|
+
color: text5.placeholder,
|
|
1019
1079
|
"&.Mui-focused": {
|
|
1020
|
-
color:
|
|
1080
|
+
color: text5.placeholder
|
|
1021
1081
|
},
|
|
1022
1082
|
"&.Mui-error": {
|
|
1023
|
-
color:
|
|
1083
|
+
color: text5.errorPrimary
|
|
1024
1084
|
}
|
|
1025
1085
|
},
|
|
1026
1086
|
outlined: {
|
|
@@ -1039,7 +1099,7 @@ function buildComponents(tokens) {
|
|
|
1039
1099
|
marginTop: 6,
|
|
1040
1100
|
marginLeft: 0,
|
|
1041
1101
|
"&.Mui-error": {
|
|
1042
|
-
color:
|
|
1102
|
+
color: text5.errorPrimary
|
|
1043
1103
|
}
|
|
1044
1104
|
}
|
|
1045
1105
|
}
|
|
@@ -1069,18 +1129,18 @@ function buildComponents(tokens) {
|
|
|
1069
1129
|
}
|
|
1070
1130
|
},
|
|
1071
1131
|
icon: {
|
|
1072
|
-
color:
|
|
1132
|
+
color: text5.placeholder
|
|
1073
1133
|
}
|
|
1074
1134
|
}
|
|
1075
1135
|
},
|
|
1076
1136
|
MuiMenuItem: {
|
|
1077
1137
|
styleOverrides: {
|
|
1078
1138
|
root: {
|
|
1079
|
-
borderRadius:
|
|
1139
|
+
borderRadius: radius5.md,
|
|
1080
1140
|
padding: "6px 8px",
|
|
1081
1141
|
gap: 4,
|
|
1082
1142
|
"&:hover": {
|
|
1083
|
-
backgroundColor:
|
|
1143
|
+
backgroundColor: bg5.primaryHover
|
|
1084
1144
|
}
|
|
1085
1145
|
}
|
|
1086
1146
|
}
|
|
@@ -1089,9 +1149,9 @@ function buildComponents(tokens) {
|
|
|
1089
1149
|
MuiAutocomplete: {
|
|
1090
1150
|
styleOverrides: {
|
|
1091
1151
|
paper: {
|
|
1092
|
-
borderRadius:
|
|
1152
|
+
borderRadius: radius5.md,
|
|
1093
1153
|
boxShadow: tokenShadows.lg,
|
|
1094
|
-
border: `1px solid ${
|
|
1154
|
+
border: `1px solid ${border5.secondary}`,
|
|
1095
1155
|
marginTop: 4
|
|
1096
1156
|
},
|
|
1097
1157
|
inputRoot: {
|
|
@@ -1108,10 +1168,10 @@ function buildComponents(tokens) {
|
|
|
1108
1168
|
lineHeight: "20px",
|
|
1109
1169
|
padding: "6px 12px",
|
|
1110
1170
|
"&.Mui-focused": {
|
|
1111
|
-
backgroundColor:
|
|
1171
|
+
backgroundColor: bg5.primaryHover
|
|
1112
1172
|
},
|
|
1113
1173
|
'&[aria-selected="true"]': {
|
|
1114
|
-
backgroundColor:
|
|
1174
|
+
backgroundColor: bg5.brandPrimary
|
|
1115
1175
|
}
|
|
1116
1176
|
},
|
|
1117
1177
|
listbox: {
|
|
@@ -1126,28 +1186,28 @@ function buildComponents(tokens) {
|
|
|
1126
1186
|
},
|
|
1127
1187
|
styleOverrides: {
|
|
1128
1188
|
root: {
|
|
1129
|
-
color:
|
|
1130
|
-
borderRadius:
|
|
1189
|
+
color: border5.primary,
|
|
1190
|
+
borderRadius: radius5.xs,
|
|
1131
1191
|
padding: 0,
|
|
1132
1192
|
width: 20,
|
|
1133
1193
|
height: 20,
|
|
1134
1194
|
"&:hover": {
|
|
1135
1195
|
backgroundColor: "transparent",
|
|
1136
|
-
color:
|
|
1196
|
+
color: fg5.brandPrimary
|
|
1137
1197
|
},
|
|
1138
1198
|
"&.Mui-checked": {
|
|
1139
|
-
color:
|
|
1199
|
+
color: fg5.brandPrimary
|
|
1140
1200
|
},
|
|
1141
1201
|
"&.Mui-checked:hover": {
|
|
1142
|
-
color:
|
|
1202
|
+
color: colors5.brand[700]
|
|
1143
1203
|
},
|
|
1144
1204
|
"&.Mui-focusVisible": {
|
|
1145
1205
|
outline: "none",
|
|
1146
|
-
boxShadow:
|
|
1147
|
-
borderRadius:
|
|
1206
|
+
boxShadow: focusRings5.brand,
|
|
1207
|
+
borderRadius: radius5.xs
|
|
1148
1208
|
},
|
|
1149
1209
|
"&.Mui-disabled": {
|
|
1150
|
-
color:
|
|
1210
|
+
color: border5.primary
|
|
1151
1211
|
}
|
|
1152
1212
|
}
|
|
1153
1213
|
}
|
|
@@ -1159,25 +1219,25 @@ function buildComponents(tokens) {
|
|
|
1159
1219
|
},
|
|
1160
1220
|
styleOverrides: {
|
|
1161
1221
|
root: {
|
|
1162
|
-
color:
|
|
1222
|
+
color: border5.primary,
|
|
1163
1223
|
padding: 0,
|
|
1164
1224
|
"&:hover": {
|
|
1165
1225
|
backgroundColor: "transparent",
|
|
1166
|
-
color:
|
|
1226
|
+
color: fg5.brandPrimary
|
|
1167
1227
|
},
|
|
1168
1228
|
"&.Mui-checked": {
|
|
1169
|
-
color:
|
|
1229
|
+
color: fg5.brandPrimary
|
|
1170
1230
|
},
|
|
1171
1231
|
"&.Mui-checked:hover": {
|
|
1172
|
-
color:
|
|
1232
|
+
color: colors5.brand[700]
|
|
1173
1233
|
},
|
|
1174
1234
|
"&.Mui-focusVisible": {
|
|
1175
1235
|
outline: "none",
|
|
1176
|
-
boxShadow:
|
|
1177
|
-
borderRadius:
|
|
1236
|
+
boxShadow: focusRings5.brand,
|
|
1237
|
+
borderRadius: radius5.full
|
|
1178
1238
|
},
|
|
1179
1239
|
"&.Mui-disabled": {
|
|
1180
|
-
color:
|
|
1240
|
+
color: border5.primary
|
|
1181
1241
|
}
|
|
1182
1242
|
}
|
|
1183
1243
|
}
|
|
@@ -1197,20 +1257,20 @@ function buildComponents(tokens) {
|
|
|
1197
1257
|
padding: 2,
|
|
1198
1258
|
"&.Mui-checked": {
|
|
1199
1259
|
transform: "translateX(20px)",
|
|
1200
|
-
color:
|
|
1260
|
+
color: fg5.white,
|
|
1201
1261
|
"& + .MuiSwitch-track": {
|
|
1202
|
-
backgroundColor:
|
|
1262
|
+
backgroundColor: fg5.brandPrimary,
|
|
1203
1263
|
opacity: 1
|
|
1204
1264
|
}
|
|
1205
1265
|
},
|
|
1206
1266
|
"&.Mui-checked:hover + .MuiSwitch-track": {
|
|
1207
|
-
backgroundColor:
|
|
1267
|
+
backgroundColor: colors5.brand[700]
|
|
1208
1268
|
},
|
|
1209
1269
|
"&.Mui-focusVisible .MuiSwitch-thumb": {
|
|
1210
|
-
boxShadow:
|
|
1270
|
+
boxShadow: focusRings5.brand
|
|
1211
1271
|
},
|
|
1212
1272
|
"&.Mui-disabled .MuiSwitch-thumb": {
|
|
1213
|
-
color:
|
|
1273
|
+
color: bg5.disabled
|
|
1214
1274
|
},
|
|
1215
1275
|
"&.Mui-disabled + .MuiSwitch-track": {
|
|
1216
1276
|
opacity: 0.5
|
|
@@ -1222,8 +1282,8 @@ function buildComponents(tokens) {
|
|
|
1222
1282
|
boxShadow: "0px 1px 2px 0px #1018280d"
|
|
1223
1283
|
},
|
|
1224
1284
|
track: {
|
|
1225
|
-
borderRadius:
|
|
1226
|
-
backgroundColor:
|
|
1285
|
+
borderRadius: radius5.full,
|
|
1286
|
+
backgroundColor: border5.secondary,
|
|
1227
1287
|
opacity: 1
|
|
1228
1288
|
}
|
|
1229
1289
|
}
|
|
@@ -1232,8 +1292,8 @@ function buildComponents(tokens) {
|
|
|
1232
1292
|
MuiToggleButton: {
|
|
1233
1293
|
styleOverrides: {
|
|
1234
1294
|
root: {
|
|
1235
|
-
borderColor:
|
|
1236
|
-
color:
|
|
1295
|
+
borderColor: border5.primary,
|
|
1296
|
+
color: text5.secondary,
|
|
1237
1297
|
fontSize: 14,
|
|
1238
1298
|
fontWeight: 600,
|
|
1239
1299
|
lineHeight: "20px",
|
|
@@ -1241,19 +1301,19 @@ function buildComponents(tokens) {
|
|
|
1241
1301
|
padding: "6px 12px",
|
|
1242
1302
|
textTransform: "none",
|
|
1243
1303
|
"&:hover": {
|
|
1244
|
-
backgroundColor:
|
|
1245
|
-
borderColor:
|
|
1304
|
+
backgroundColor: bg5.primaryHover,
|
|
1305
|
+
borderColor: border5.primary
|
|
1246
1306
|
},
|
|
1247
1307
|
"&.Mui-selected": {
|
|
1248
|
-
backgroundColor:
|
|
1249
|
-
color:
|
|
1250
|
-
borderColor:
|
|
1308
|
+
backgroundColor: bg5.brandPrimary,
|
|
1309
|
+
color: buttonColors5.secondaryColor.fg,
|
|
1310
|
+
borderColor: border5.brandSolid,
|
|
1251
1311
|
"&:hover": {
|
|
1252
|
-
backgroundColor:
|
|
1312
|
+
backgroundColor: bg5.brandSecondary
|
|
1253
1313
|
}
|
|
1254
1314
|
},
|
|
1255
1315
|
"&:focus-visible": {
|
|
1256
|
-
boxShadow:
|
|
1316
|
+
boxShadow: focusRings5.brandShadowXs
|
|
1257
1317
|
}
|
|
1258
1318
|
}
|
|
1259
1319
|
}
|
|
@@ -1261,7 +1321,7 @@ function buildComponents(tokens) {
|
|
|
1261
1321
|
MuiToggleButtonGroup: {
|
|
1262
1322
|
styleOverrides: {
|
|
1263
1323
|
root: {
|
|
1264
|
-
borderRadius:
|
|
1324
|
+
borderRadius: radius5.md,
|
|
1265
1325
|
overflow: "hidden"
|
|
1266
1326
|
},
|
|
1267
1327
|
grouped: {
|
|
@@ -1270,12 +1330,12 @@ function buildComponents(tokens) {
|
|
|
1270
1330
|
marginLeft: -1
|
|
1271
1331
|
},
|
|
1272
1332
|
"&:first-of-type": {
|
|
1273
|
-
borderTopLeftRadius:
|
|
1274
|
-
borderBottomLeftRadius:
|
|
1333
|
+
borderTopLeftRadius: radius5.md,
|
|
1334
|
+
borderBottomLeftRadius: radius5.md
|
|
1275
1335
|
},
|
|
1276
1336
|
"&:last-of-type": {
|
|
1277
|
-
borderTopRightRadius:
|
|
1278
|
-
borderBottomRightRadius:
|
|
1337
|
+
borderTopRightRadius: radius5.md,
|
|
1338
|
+
borderBottomRightRadius: radius5.md
|
|
1279
1339
|
}
|
|
1280
1340
|
}
|
|
1281
1341
|
}
|
|
@@ -1284,8 +1344,8 @@ function buildComponents(tokens) {
|
|
|
1284
1344
|
MuiDrawer: {
|
|
1285
1345
|
styleOverrides: {
|
|
1286
1346
|
paper: {
|
|
1287
|
-
backgroundColor:
|
|
1288
|
-
borderRight: `1px solid ${
|
|
1347
|
+
backgroundColor: bg5.primary,
|
|
1348
|
+
borderRight: `1px solid ${border5.secondary}`
|
|
1289
1349
|
}
|
|
1290
1350
|
}
|
|
1291
1351
|
},
|
|
@@ -1296,9 +1356,9 @@ function buildComponents(tokens) {
|
|
|
1296
1356
|
},
|
|
1297
1357
|
styleOverrides: {
|
|
1298
1358
|
root: {
|
|
1299
|
-
borderRadius:
|
|
1300
|
-
border: `1px solid ${
|
|
1301
|
-
backgroundColor:
|
|
1359
|
+
borderRadius: radius5.xl,
|
|
1360
|
+
border: `1px solid ${border5.secondary}`,
|
|
1361
|
+
backgroundColor: bg5.primary,
|
|
1302
1362
|
boxShadow: tokenShadows.xs,
|
|
1303
1363
|
overflow: "hidden"
|
|
1304
1364
|
}
|
|
@@ -1345,35 +1405,35 @@ function buildComponents(tokens) {
|
|
|
1345
1405
|
backgroundImage: "none"
|
|
1346
1406
|
},
|
|
1347
1407
|
rounded: {
|
|
1348
|
-
borderRadius:
|
|
1408
|
+
borderRadius: radius5.lg
|
|
1349
1409
|
},
|
|
1350
1410
|
elevation1: {
|
|
1351
1411
|
boxShadow: tokenShadows.xs,
|
|
1352
|
-
border: `1px solid ${
|
|
1412
|
+
border: `1px solid ${border5.secondary}`
|
|
1353
1413
|
},
|
|
1354
1414
|
elevation2: {
|
|
1355
1415
|
boxShadow: tokenShadows.sm,
|
|
1356
|
-
border: `1px solid ${
|
|
1416
|
+
border: `1px solid ${border5.secondary}`
|
|
1357
1417
|
},
|
|
1358
1418
|
elevation3: {
|
|
1359
1419
|
boxShadow: tokenShadows.md,
|
|
1360
|
-
border: `1px solid ${
|
|
1420
|
+
border: `1px solid ${border5.secondary}`
|
|
1361
1421
|
},
|
|
1362
1422
|
elevation4: {
|
|
1363
1423
|
boxShadow: tokenShadows.lg,
|
|
1364
|
-
border: `1px solid ${
|
|
1424
|
+
border: `1px solid ${border5.secondary}`
|
|
1365
1425
|
},
|
|
1366
1426
|
elevation8: {
|
|
1367
1427
|
boxShadow: tokenShadows.xl,
|
|
1368
|
-
border: `1px solid ${
|
|
1428
|
+
border: `1px solid ${border5.secondary}`
|
|
1369
1429
|
},
|
|
1370
1430
|
elevation16: {
|
|
1371
1431
|
boxShadow: tokenShadows["2xl"],
|
|
1372
|
-
border: `1px solid ${
|
|
1432
|
+
border: `1px solid ${border5.secondary}`
|
|
1373
1433
|
},
|
|
1374
1434
|
elevation24: {
|
|
1375
1435
|
boxShadow: tokenShadows["3xl"],
|
|
1376
|
-
border: `1px solid ${
|
|
1436
|
+
border: `1px solid ${border5.secondary}`
|
|
1377
1437
|
}
|
|
1378
1438
|
}
|
|
1379
1439
|
},
|
|
@@ -1385,8 +1445,8 @@ function buildComponents(tokens) {
|
|
|
1385
1445
|
},
|
|
1386
1446
|
styleOverrides: {
|
|
1387
1447
|
root: {
|
|
1388
|
-
border: `1px solid ${
|
|
1389
|
-
borderRadius:
|
|
1448
|
+
border: `1px solid ${border5.secondary}`,
|
|
1449
|
+
borderRadius: radius5.lg,
|
|
1390
1450
|
"&:not(:last-child)": {
|
|
1391
1451
|
marginBottom: 8
|
|
1392
1452
|
},
|
|
@@ -1396,7 +1456,7 @@ function buildComponents(tokens) {
|
|
|
1396
1456
|
"&.Mui-expanded": {
|
|
1397
1457
|
margin: 0,
|
|
1398
1458
|
marginBottom: 8,
|
|
1399
|
-
borderRadius:
|
|
1459
|
+
borderRadius: radius5.lg
|
|
1400
1460
|
}
|
|
1401
1461
|
}
|
|
1402
1462
|
}
|
|
@@ -1408,7 +1468,7 @@ function buildComponents(tokens) {
|
|
|
1408
1468
|
minHeight: 56,
|
|
1409
1469
|
"&.Mui-expanded": {
|
|
1410
1470
|
minHeight: 56,
|
|
1411
|
-
borderBottom: `1px solid ${
|
|
1471
|
+
borderBottom: `1px solid ${border5.secondary}`
|
|
1412
1472
|
}
|
|
1413
1473
|
},
|
|
1414
1474
|
content: {
|
|
@@ -1434,8 +1494,8 @@ function buildComponents(tokens) {
|
|
|
1434
1494
|
},
|
|
1435
1495
|
styleOverrides: {
|
|
1436
1496
|
root: {
|
|
1437
|
-
borderBottom: `1px solid ${
|
|
1438
|
-
backgroundColor:
|
|
1497
|
+
borderBottom: `1px solid ${border5.secondary}`,
|
|
1498
|
+
backgroundColor: bg5.primary
|
|
1439
1499
|
}
|
|
1440
1500
|
}
|
|
1441
1501
|
},
|
|
@@ -1459,7 +1519,7 @@ function buildComponents(tokens) {
|
|
|
1459
1519
|
MuiChip: {
|
|
1460
1520
|
styleOverrides: {
|
|
1461
1521
|
root: {
|
|
1462
|
-
borderRadius:
|
|
1522
|
+
borderRadius: radius5.md
|
|
1463
1523
|
},
|
|
1464
1524
|
label: {
|
|
1465
1525
|
fontWeight: 500
|
|
@@ -1475,51 +1535,51 @@ function buildComponents(tokens) {
|
|
|
1475
1535
|
},
|
|
1476
1536
|
colorDefault: {
|
|
1477
1537
|
"&.MuiChip-filled": {
|
|
1478
|
-
backgroundColor:
|
|
1479
|
-
color:
|
|
1480
|
-
"& .MuiChip-deleteIcon": { color:
|
|
1538
|
+
backgroundColor: colors5.gray[50],
|
|
1539
|
+
color: colors5.gray[700],
|
|
1540
|
+
"& .MuiChip-deleteIcon": { color: colors5.gray[400] }
|
|
1481
1541
|
}
|
|
1482
1542
|
},
|
|
1483
1543
|
colorPrimary: {
|
|
1484
1544
|
"&.MuiChip-filled": {
|
|
1485
|
-
backgroundColor:
|
|
1486
|
-
color:
|
|
1487
|
-
"& .MuiChip-deleteIcon": { color:
|
|
1545
|
+
backgroundColor: colors5.brand[50],
|
|
1546
|
+
color: colors5.brand[700],
|
|
1547
|
+
"& .MuiChip-deleteIcon": { color: colors5.brand[400] }
|
|
1488
1548
|
}
|
|
1489
1549
|
},
|
|
1490
1550
|
colorSecondary: {
|
|
1491
1551
|
"&.MuiChip-filled": {
|
|
1492
|
-
backgroundColor:
|
|
1493
|
-
color:
|
|
1494
|
-
"& .MuiChip-deleteIcon": { color:
|
|
1552
|
+
backgroundColor: colors5.gray[50],
|
|
1553
|
+
color: colors5.gray[700],
|
|
1554
|
+
"& .MuiChip-deleteIcon": { color: colors5.gray[400] }
|
|
1495
1555
|
}
|
|
1496
1556
|
},
|
|
1497
1557
|
colorError: {
|
|
1498
1558
|
"&.MuiChip-filled": {
|
|
1499
|
-
backgroundColor:
|
|
1500
|
-
color:
|
|
1501
|
-
"& .MuiChip-deleteIcon": { color:
|
|
1559
|
+
backgroundColor: colors5.error[50],
|
|
1560
|
+
color: colors5.error[700],
|
|
1561
|
+
"& .MuiChip-deleteIcon": { color: colors5.error[400] }
|
|
1502
1562
|
}
|
|
1503
1563
|
},
|
|
1504
1564
|
colorWarning: {
|
|
1505
1565
|
"&.MuiChip-filled": {
|
|
1506
|
-
backgroundColor:
|
|
1507
|
-
color:
|
|
1508
|
-
"& .MuiChip-deleteIcon": { color:
|
|
1566
|
+
backgroundColor: colors5.warning[50],
|
|
1567
|
+
color: colors5.warning[700],
|
|
1568
|
+
"& .MuiChip-deleteIcon": { color: colors5.warning[400] }
|
|
1509
1569
|
}
|
|
1510
1570
|
},
|
|
1511
1571
|
colorSuccess: {
|
|
1512
1572
|
"&.MuiChip-filled": {
|
|
1513
|
-
backgroundColor:
|
|
1514
|
-
color:
|
|
1515
|
-
"& .MuiChip-deleteIcon": { color:
|
|
1573
|
+
backgroundColor: colors5.success[50],
|
|
1574
|
+
color: colors5.success[700],
|
|
1575
|
+
"& .MuiChip-deleteIcon": { color: colors5.success[400] }
|
|
1516
1576
|
}
|
|
1517
1577
|
},
|
|
1518
1578
|
colorInfo: {
|
|
1519
1579
|
"&.MuiChip-filled": {
|
|
1520
|
-
backgroundColor:
|
|
1521
|
-
color:
|
|
1522
|
-
"& .MuiChip-deleteIcon": { color:
|
|
1580
|
+
backgroundColor: colors5.blue[50],
|
|
1581
|
+
color: colors5.blue[700],
|
|
1582
|
+
"& .MuiChip-deleteIcon": { color: colors5.blue[400] }
|
|
1523
1583
|
}
|
|
1524
1584
|
}
|
|
1525
1585
|
}
|
|
@@ -1535,7 +1595,7 @@ function buildComponents(tokens) {
|
|
|
1535
1595
|
fontSize: 14,
|
|
1536
1596
|
lineHeight: "20px",
|
|
1537
1597
|
fontWeight: 500,
|
|
1538
|
-
color:
|
|
1598
|
+
color: text5.secondary
|
|
1539
1599
|
}
|
|
1540
1600
|
}
|
|
1541
1601
|
},
|
|
@@ -1551,29 +1611,29 @@ function buildComponents(tokens) {
|
|
|
1551
1611
|
MuiTableCell: {
|
|
1552
1612
|
styleOverrides: {
|
|
1553
1613
|
root: {
|
|
1554
|
-
borderBottom: `1px solid ${
|
|
1614
|
+
borderBottom: `1px solid ${border5.secondary}`,
|
|
1555
1615
|
padding: "16px 24px",
|
|
1556
1616
|
fontSize: 14,
|
|
1557
1617
|
lineHeight: "20px",
|
|
1558
|
-
color:
|
|
1618
|
+
color: fg5.tertiary
|
|
1559
1619
|
},
|
|
1560
1620
|
head: {
|
|
1561
|
-
backgroundColor:
|
|
1562
|
-
color:
|
|
1621
|
+
backgroundColor: bg5.secondary,
|
|
1622
|
+
color: fg5.tertiary,
|
|
1563
1623
|
fontWeight: 500,
|
|
1564
1624
|
fontSize: 12,
|
|
1565
1625
|
lineHeight: "18px"
|
|
1566
1626
|
},
|
|
1567
1627
|
body: {
|
|
1568
|
-
color:
|
|
1628
|
+
color: fg5.tertiary
|
|
1569
1629
|
}
|
|
1570
1630
|
}
|
|
1571
1631
|
},
|
|
1572
1632
|
MuiTableHead: {
|
|
1573
1633
|
styleOverrides: {
|
|
1574
1634
|
root: {
|
|
1575
|
-
backgroundColor:
|
|
1576
|
-
borderBottom: `1px solid ${
|
|
1635
|
+
backgroundColor: bg5.secondary,
|
|
1636
|
+
borderBottom: `1px solid ${border5.secondary}`
|
|
1577
1637
|
}
|
|
1578
1638
|
}
|
|
1579
1639
|
},
|
|
@@ -1584,12 +1644,12 @@ function buildComponents(tokens) {
|
|
|
1584
1644
|
border: 0
|
|
1585
1645
|
},
|
|
1586
1646
|
"&:hover": {
|
|
1587
|
-
backgroundColor:
|
|
1647
|
+
backgroundColor: bg5.primaryHover
|
|
1588
1648
|
},
|
|
1589
1649
|
"&.Mui-selected": {
|
|
1590
|
-
backgroundColor:
|
|
1650
|
+
backgroundColor: bg5.brandPrimary,
|
|
1591
1651
|
"&:hover": {
|
|
1592
|
-
backgroundColor:
|
|
1652
|
+
backgroundColor: bg5.brandPrimary
|
|
1593
1653
|
}
|
|
1594
1654
|
}
|
|
1595
1655
|
}
|
|
@@ -1598,8 +1658,8 @@ function buildComponents(tokens) {
|
|
|
1598
1658
|
MuiTableContainer: {
|
|
1599
1659
|
styleOverrides: {
|
|
1600
1660
|
root: {
|
|
1601
|
-
borderRadius:
|
|
1602
|
-
border: `1px solid ${
|
|
1661
|
+
borderRadius: radius5.xl,
|
|
1662
|
+
border: `1px solid ${border5.secondary}`,
|
|
1603
1663
|
boxShadow: "none"
|
|
1604
1664
|
}
|
|
1605
1665
|
}
|
|
@@ -1613,24 +1673,24 @@ function buildComponents(tokens) {
|
|
|
1613
1673
|
lineHeight: "18px",
|
|
1614
1674
|
minWidth: 20,
|
|
1615
1675
|
height: 20,
|
|
1616
|
-
borderRadius:
|
|
1676
|
+
borderRadius: radius5.full
|
|
1617
1677
|
},
|
|
1618
1678
|
colorPrimary: {
|
|
1619
|
-
backgroundColor:
|
|
1679
|
+
backgroundColor: bg5.brandSolid
|
|
1620
1680
|
},
|
|
1621
1681
|
colorError: {
|
|
1622
|
-
backgroundColor:
|
|
1682
|
+
backgroundColor: bg5.errorSolid
|
|
1623
1683
|
},
|
|
1624
1684
|
colorSuccess: {
|
|
1625
|
-
backgroundColor:
|
|
1685
|
+
backgroundColor: bg5.successSolid
|
|
1626
1686
|
},
|
|
1627
1687
|
colorWarning: {
|
|
1628
|
-
backgroundColor:
|
|
1688
|
+
backgroundColor: bg5.warningSolid
|
|
1629
1689
|
},
|
|
1630
1690
|
dot: {
|
|
1631
1691
|
minWidth: 8,
|
|
1632
1692
|
height: 8,
|
|
1633
|
-
borderRadius:
|
|
1693
|
+
borderRadius: radius5.full
|
|
1634
1694
|
}
|
|
1635
1695
|
}
|
|
1636
1696
|
},
|
|
@@ -1638,7 +1698,7 @@ function buildComponents(tokens) {
|
|
|
1638
1698
|
MuiDivider: {
|
|
1639
1699
|
styleOverrides: {
|
|
1640
1700
|
root: {
|
|
1641
|
-
borderColor:
|
|
1701
|
+
borderColor: border5.secondary
|
|
1642
1702
|
}
|
|
1643
1703
|
}
|
|
1644
1704
|
},
|
|
@@ -1653,16 +1713,16 @@ function buildComponents(tokens) {
|
|
|
1653
1713
|
MuiListItemButton: {
|
|
1654
1714
|
styleOverrides: {
|
|
1655
1715
|
root: {
|
|
1656
|
-
borderRadius:
|
|
1716
|
+
borderRadius: radius5.sm,
|
|
1657
1717
|
padding: "8px 12px",
|
|
1658
1718
|
"&:hover": {
|
|
1659
|
-
backgroundColor:
|
|
1719
|
+
backgroundColor: bg5.primaryHover
|
|
1660
1720
|
},
|
|
1661
1721
|
"&.Mui-selected": {
|
|
1662
|
-
backgroundColor:
|
|
1663
|
-
color:
|
|
1722
|
+
backgroundColor: bg5.brandPrimary,
|
|
1723
|
+
color: buttonColors5.secondaryColor.fg,
|
|
1664
1724
|
"&:hover": {
|
|
1665
|
-
backgroundColor:
|
|
1725
|
+
backgroundColor: bg5.brandSecondary
|
|
1666
1726
|
}
|
|
1667
1727
|
}
|
|
1668
1728
|
}
|
|
@@ -1672,7 +1732,7 @@ function buildComponents(tokens) {
|
|
|
1672
1732
|
styleOverrides: {
|
|
1673
1733
|
root: {
|
|
1674
1734
|
minWidth: 36,
|
|
1675
|
-
color:
|
|
1735
|
+
color: fg5.quaternary
|
|
1676
1736
|
}
|
|
1677
1737
|
}
|
|
1678
1738
|
},
|
|
@@ -1682,12 +1742,12 @@ function buildComponents(tokens) {
|
|
|
1682
1742
|
fontSize: 14,
|
|
1683
1743
|
lineHeight: "20px",
|
|
1684
1744
|
fontWeight: 500,
|
|
1685
|
-
color:
|
|
1745
|
+
color: text5.secondary
|
|
1686
1746
|
},
|
|
1687
1747
|
secondary: {
|
|
1688
1748
|
fontSize: 14,
|
|
1689
1749
|
lineHeight: "20px",
|
|
1690
|
-
color:
|
|
1750
|
+
color: text5.quaternary
|
|
1691
1751
|
}
|
|
1692
1752
|
}
|
|
1693
1753
|
},
|
|
@@ -1695,17 +1755,17 @@ function buildComponents(tokens) {
|
|
|
1695
1755
|
MuiTooltip: {
|
|
1696
1756
|
styleOverrides: {
|
|
1697
1757
|
tooltip: {
|
|
1698
|
-
backgroundColor:
|
|
1699
|
-
color:
|
|
1758
|
+
backgroundColor: bg5.primarySolid,
|
|
1759
|
+
color: text5.white,
|
|
1700
1760
|
fontSize: 12,
|
|
1701
1761
|
lineHeight: "18px",
|
|
1702
1762
|
fontWeight: 600,
|
|
1703
1763
|
padding: "8px 12px",
|
|
1704
|
-
borderRadius:
|
|
1764
|
+
borderRadius: radius5.md,
|
|
1705
1765
|
boxShadow: tokenShadows.lg
|
|
1706
1766
|
},
|
|
1707
1767
|
arrow: {
|
|
1708
|
-
color:
|
|
1768
|
+
color: bg5.primarySolid
|
|
1709
1769
|
}
|
|
1710
1770
|
}
|
|
1711
1771
|
},
|
|
@@ -1716,42 +1776,42 @@ function buildComponents(tokens) {
|
|
|
1716
1776
|
},
|
|
1717
1777
|
styleOverrides: {
|
|
1718
1778
|
root: {
|
|
1719
|
-
borderRadius:
|
|
1779
|
+
borderRadius: radius5.xl,
|
|
1720
1780
|
fontSize: 14,
|
|
1721
1781
|
lineHeight: "20px",
|
|
1722
1782
|
padding: "12px 16px",
|
|
1723
1783
|
alignItems: "center"
|
|
1724
1784
|
},
|
|
1725
1785
|
standardError: {
|
|
1726
|
-
backgroundColor:
|
|
1727
|
-
color:
|
|
1728
|
-
border: `1px solid ${
|
|
1786
|
+
backgroundColor: bg5.errorPrimary,
|
|
1787
|
+
color: colors5.error[700],
|
|
1788
|
+
border: `1px solid ${border5.error}`,
|
|
1729
1789
|
"& .MuiAlert-icon": {
|
|
1730
|
-
color:
|
|
1790
|
+
color: fg5.errorPrimary
|
|
1731
1791
|
}
|
|
1732
1792
|
},
|
|
1733
1793
|
standardWarning: {
|
|
1734
|
-
backgroundColor:
|
|
1735
|
-
color:
|
|
1736
|
-
border: `1px solid ${
|
|
1794
|
+
backgroundColor: bg5.warningPrimary,
|
|
1795
|
+
color: colors5.warning[700],
|
|
1796
|
+
border: `1px solid ${colors5.warning[300]}`,
|
|
1737
1797
|
"& .MuiAlert-icon": {
|
|
1738
|
-
color:
|
|
1798
|
+
color: fg5.warningPrimary
|
|
1739
1799
|
}
|
|
1740
1800
|
},
|
|
1741
1801
|
standardSuccess: {
|
|
1742
|
-
backgroundColor:
|
|
1743
|
-
color:
|
|
1744
|
-
border: `1px solid ${
|
|
1802
|
+
backgroundColor: bg5.successPrimary,
|
|
1803
|
+
color: colors5.success[700],
|
|
1804
|
+
border: `1px solid ${colors5.success[300]}`,
|
|
1745
1805
|
"& .MuiAlert-icon": {
|
|
1746
|
-
color:
|
|
1806
|
+
color: fg5.successPrimary
|
|
1747
1807
|
}
|
|
1748
1808
|
},
|
|
1749
1809
|
standardInfo: {
|
|
1750
|
-
backgroundColor:
|
|
1751
|
-
color:
|
|
1752
|
-
border: `1px solid ${
|
|
1810
|
+
backgroundColor: colors5.blue[50],
|
|
1811
|
+
color: colors5.blue[700],
|
|
1812
|
+
border: `1px solid ${colors5.blue[300]}`,
|
|
1753
1813
|
"& .MuiAlert-icon": {
|
|
1754
|
-
color:
|
|
1814
|
+
color: colors5.blue[600]
|
|
1755
1815
|
}
|
|
1756
1816
|
},
|
|
1757
1817
|
icon: {
|
|
@@ -1782,7 +1842,7 @@ function buildComponents(tokens) {
|
|
|
1782
1842
|
MuiDialog: {
|
|
1783
1843
|
styleOverrides: {
|
|
1784
1844
|
paper: {
|
|
1785
|
-
borderRadius:
|
|
1845
|
+
borderRadius: radius5.xl,
|
|
1786
1846
|
boxShadow: tokenShadows.xl,
|
|
1787
1847
|
padding: 0
|
|
1788
1848
|
}
|
|
@@ -1794,7 +1854,7 @@ function buildComponents(tokens) {
|
|
|
1794
1854
|
fontSize: 18,
|
|
1795
1855
|
lineHeight: "28px",
|
|
1796
1856
|
fontWeight: 600,
|
|
1797
|
-
color:
|
|
1857
|
+
color: text5.primary,
|
|
1798
1858
|
padding: "24px 24px 0"
|
|
1799
1859
|
}
|
|
1800
1860
|
}
|
|
@@ -1805,7 +1865,7 @@ function buildComponents(tokens) {
|
|
|
1805
1865
|
padding: "20px 24px",
|
|
1806
1866
|
fontSize: 14,
|
|
1807
1867
|
lineHeight: "20px",
|
|
1808
|
-
color:
|
|
1868
|
+
color: text5.tertiary
|
|
1809
1869
|
}
|
|
1810
1870
|
}
|
|
1811
1871
|
},
|
|
@@ -1821,27 +1881,27 @@ function buildComponents(tokens) {
|
|
|
1821
1881
|
MuiLinearProgress: {
|
|
1822
1882
|
styleOverrides: {
|
|
1823
1883
|
root: {
|
|
1824
|
-
borderRadius:
|
|
1884
|
+
borderRadius: radius5.full,
|
|
1825
1885
|
height: 8,
|
|
1826
|
-
backgroundColor:
|
|
1886
|
+
backgroundColor: border5.secondary
|
|
1827
1887
|
},
|
|
1828
1888
|
barColorPrimary: {
|
|
1829
|
-
backgroundColor:
|
|
1830
|
-
borderRadius:
|
|
1889
|
+
backgroundColor: fg5.brandPrimary,
|
|
1890
|
+
borderRadius: radius5.full
|
|
1831
1891
|
},
|
|
1832
1892
|
barColorSecondary: {
|
|
1833
|
-
backgroundColor:
|
|
1834
|
-
borderRadius:
|
|
1893
|
+
backgroundColor: bg5.secondarySolid,
|
|
1894
|
+
borderRadius: radius5.full
|
|
1835
1895
|
}
|
|
1836
1896
|
}
|
|
1837
1897
|
},
|
|
1838
1898
|
MuiCircularProgress: {
|
|
1839
1899
|
styleOverrides: {
|
|
1840
1900
|
colorPrimary: {
|
|
1841
|
-
color:
|
|
1901
|
+
color: fg5.brandPrimary
|
|
1842
1902
|
},
|
|
1843
1903
|
colorSecondary: {
|
|
1844
|
-
color:
|
|
1904
|
+
color: bg5.secondarySolid
|
|
1845
1905
|
}
|
|
1846
1906
|
}
|
|
1847
1907
|
},
|
|
@@ -1852,13 +1912,13 @@ function buildComponents(tokens) {
|
|
|
1852
1912
|
},
|
|
1853
1913
|
styleOverrides: {
|
|
1854
1914
|
root: {
|
|
1855
|
-
backgroundColor:
|
|
1915
|
+
backgroundColor: bg5.tertiary
|
|
1856
1916
|
},
|
|
1857
1917
|
rounded: {
|
|
1858
|
-
borderRadius:
|
|
1918
|
+
borderRadius: radius5.md
|
|
1859
1919
|
},
|
|
1860
1920
|
circular: {
|
|
1861
|
-
borderRadius:
|
|
1921
|
+
borderRadius: radius5.full
|
|
1862
1922
|
}
|
|
1863
1923
|
}
|
|
1864
1924
|
},
|
|
@@ -1866,9 +1926,9 @@ function buildComponents(tokens) {
|
|
|
1866
1926
|
MuiSnackbarContent: {
|
|
1867
1927
|
styleOverrides: {
|
|
1868
1928
|
root: {
|
|
1869
|
-
backgroundColor:
|
|
1870
|
-
color:
|
|
1871
|
-
borderRadius:
|
|
1929
|
+
backgroundColor: bg5.primarySolid,
|
|
1930
|
+
color: text5.white,
|
|
1931
|
+
borderRadius: radius5.xl,
|
|
1872
1932
|
boxShadow: tokenShadows.lg,
|
|
1873
1933
|
fontSize: 14,
|
|
1874
1934
|
lineHeight: "20px",
|
|
@@ -1902,21 +1962,21 @@ function buildComponents(tokens) {
|
|
|
1902
1962
|
MuiDataGrid: {
|
|
1903
1963
|
styleOverrides: {
|
|
1904
1964
|
root: {
|
|
1905
|
-
border: `1px solid ${
|
|
1906
|
-
borderRadius:
|
|
1965
|
+
border: `1px solid ${border5.secondary}`,
|
|
1966
|
+
borderRadius: radius5.xl,
|
|
1907
1967
|
fontFamily: "inherit",
|
|
1908
1968
|
"& .MuiDataGrid-withBorderColor": {
|
|
1909
|
-
borderColor:
|
|
1969
|
+
borderColor: border5.secondary
|
|
1910
1970
|
}
|
|
1911
1971
|
},
|
|
1912
1972
|
columnHeaders: {
|
|
1913
|
-
backgroundColor:
|
|
1973
|
+
backgroundColor: bg5.secondary
|
|
1914
1974
|
},
|
|
1915
1975
|
columnHeader: {
|
|
1916
1976
|
fontSize: 12,
|
|
1917
1977
|
lineHeight: "18px",
|
|
1918
1978
|
fontWeight: 500,
|
|
1919
|
-
color:
|
|
1979
|
+
color: fg5.tertiary,
|
|
1920
1980
|
"&:focus, &:focus-within": {
|
|
1921
1981
|
outline: "none"
|
|
1922
1982
|
}
|
|
@@ -1927,34 +1987,34 @@ function buildComponents(tokens) {
|
|
|
1927
1987
|
cell: {
|
|
1928
1988
|
fontSize: 14,
|
|
1929
1989
|
lineHeight: "20px",
|
|
1930
|
-
color:
|
|
1990
|
+
color: fg5.tertiary,
|
|
1931
1991
|
"&:focus, &:focus-within": {
|
|
1932
1992
|
outline: "none"
|
|
1933
1993
|
}
|
|
1934
1994
|
},
|
|
1935
1995
|
row: {
|
|
1936
1996
|
"&:hover": {
|
|
1937
|
-
backgroundColor:
|
|
1997
|
+
backgroundColor: bg5.primaryHover
|
|
1938
1998
|
},
|
|
1939
1999
|
"&.Mui-selected": {
|
|
1940
|
-
backgroundColor:
|
|
2000
|
+
backgroundColor: bg5.brandPrimary,
|
|
1941
2001
|
"&:hover": {
|
|
1942
|
-
backgroundColor:
|
|
2002
|
+
backgroundColor: bg5.brandPrimary
|
|
1943
2003
|
}
|
|
1944
2004
|
}
|
|
1945
2005
|
},
|
|
1946
2006
|
footerContainer: {
|
|
1947
|
-
borderTop: `1px solid ${
|
|
2007
|
+
borderTop: `1px solid ${border5.secondary}`
|
|
1948
2008
|
},
|
|
1949
2009
|
columnSeparator: {
|
|
1950
|
-
color:
|
|
2010
|
+
color: border5.secondary
|
|
1951
2011
|
}
|
|
1952
2012
|
}
|
|
1953
2013
|
}
|
|
1954
2014
|
}
|
|
1955
2015
|
};
|
|
1956
2016
|
}
|
|
1957
|
-
|
|
2017
|
+
buildComponents({
|
|
1958
2018
|
colors,
|
|
1959
2019
|
radius,
|
|
1960
2020
|
focusRings,
|
|
@@ -1965,65 +2025,7 @@ var components = buildComponents({
|
|
|
1965
2025
|
border,
|
|
1966
2026
|
buttonColors});
|
|
1967
2027
|
|
|
1968
|
-
// src/theme/
|
|
1969
|
-
function buildShadows(tokens) {
|
|
1970
|
-
const tokenShadows = tokens.shadows;
|
|
1971
|
-
return [
|
|
1972
|
-
"none",
|
|
1973
|
-
// 0
|
|
1974
|
-
tokenShadows.xs,
|
|
1975
|
-
// 1
|
|
1976
|
-
tokenShadows.sm,
|
|
1977
|
-
// 2
|
|
1978
|
-
tokenShadows.sm,
|
|
1979
|
-
// 3
|
|
1980
|
-
tokenShadows.md,
|
|
1981
|
-
// 4
|
|
1982
|
-
tokenShadows.md,
|
|
1983
|
-
// 5
|
|
1984
|
-
tokenShadows.md,
|
|
1985
|
-
// 6
|
|
1986
|
-
tokenShadows.lg,
|
|
1987
|
-
// 7
|
|
1988
|
-
tokenShadows.lg,
|
|
1989
|
-
// 8
|
|
1990
|
-
tokenShadows.lg,
|
|
1991
|
-
// 9
|
|
1992
|
-
tokenShadows.xl,
|
|
1993
|
-
// 10
|
|
1994
|
-
tokenShadows.xl,
|
|
1995
|
-
// 11
|
|
1996
|
-
tokenShadows.xl,
|
|
1997
|
-
// 12
|
|
1998
|
-
tokenShadows["2xl"],
|
|
1999
|
-
// 13
|
|
2000
|
-
tokenShadows["2xl"],
|
|
2001
|
-
// 14
|
|
2002
|
-
tokenShadows["2xl"],
|
|
2003
|
-
// 15
|
|
2004
|
-
tokenShadows["3xl"],
|
|
2005
|
-
// 16
|
|
2006
|
-
tokenShadows["3xl"],
|
|
2007
|
-
// 17
|
|
2008
|
-
tokenShadows["3xl"],
|
|
2009
|
-
// 18
|
|
2010
|
-
tokenShadows["3xl"],
|
|
2011
|
-
// 19
|
|
2012
|
-
tokenShadows["3xl"],
|
|
2013
|
-
// 20
|
|
2014
|
-
tokenShadows["3xl"],
|
|
2015
|
-
// 21
|
|
2016
|
-
tokenShadows["3xl"],
|
|
2017
|
-
// 22
|
|
2018
|
-
tokenShadows["3xl"],
|
|
2019
|
-
// 23
|
|
2020
|
-
tokenShadows["3xl"]
|
|
2021
|
-
// 24
|
|
2022
|
-
];
|
|
2023
|
-
}
|
|
2024
|
-
var shadows2 = buildShadows({
|
|
2025
|
-
shadows
|
|
2026
|
-
});
|
|
2028
|
+
// src/theme/buildTheme.ts
|
|
2027
2029
|
function buildThemeOptions(tokens) {
|
|
2028
2030
|
return {
|
|
2029
2031
|
palette: buildPalette(tokens),
|
|
@@ -2039,44 +2041,7 @@ function buildTheme(tokens) {
|
|
|
2039
2041
|
return styles.createTheme(buildThemeOptions(tokens));
|
|
2040
2042
|
}
|
|
2041
2043
|
|
|
2042
|
-
// src/theme/presets/forest.ts
|
|
2043
|
-
var forestPreset = {
|
|
2044
|
-
name: "forest",
|
|
2045
|
-
defaultVariant: "light",
|
|
2046
|
-
variants: {
|
|
2047
|
-
light: {
|
|
2048
|
-
tokens: {
|
|
2049
|
-
colors,
|
|
2050
|
-
spacing,
|
|
2051
|
-
radius,
|
|
2052
|
-
shadows,
|
|
2053
|
-
focusRings,
|
|
2054
|
-
fontFamily,
|
|
2055
|
-
fontSize,
|
|
2056
|
-
lineHeight,
|
|
2057
|
-
fontWeight,
|
|
2058
|
-
display,
|
|
2059
|
-
container,
|
|
2060
|
-
widths,
|
|
2061
|
-
text,
|
|
2062
|
-
bg,
|
|
2063
|
-
fg,
|
|
2064
|
-
border,
|
|
2065
|
-
buttonColors,
|
|
2066
|
-
avatarColors,
|
|
2067
|
-
breadcrumbColors,
|
|
2068
|
-
iconColors,
|
|
2069
|
-
navColors,
|
|
2070
|
-
sliderColors,
|
|
2071
|
-
toggleColors,
|
|
2072
|
-
chartColors,
|
|
2073
|
-
alpha
|
|
2074
|
-
}
|
|
2075
|
-
}
|
|
2076
|
-
}
|
|
2077
|
-
};
|
|
2078
|
-
|
|
2079
|
-
// src/theme/presets/alkemy-plus.ts
|
|
2044
|
+
// src/theme/presets/forest-external.ts
|
|
2080
2045
|
var colors2 = {
|
|
2081
2046
|
...colors,
|
|
2082
2047
|
/** Brand scale — black-based for primary actions */
|
|
@@ -2352,8 +2317,8 @@ var focusRings2 = {
|
|
|
2352
2317
|
error: "0px 0px 0px 4px #f044383d",
|
|
2353
2318
|
errorShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #f044383d"
|
|
2354
2319
|
};
|
|
2355
|
-
var
|
|
2356
|
-
name: "
|
|
2320
|
+
var forestExternalPreset = {
|
|
2321
|
+
name: "forest-external",
|
|
2357
2322
|
defaultVariant: "light",
|
|
2358
2323
|
variants: {
|
|
2359
2324
|
light: {
|
|
@@ -2388,10 +2353,635 @@ var alkemyPlusPreset = {
|
|
|
2388
2353
|
}
|
|
2389
2354
|
};
|
|
2390
2355
|
|
|
2356
|
+
// src/theme/presets/forest-agency.ts
|
|
2357
|
+
var colors3 = {
|
|
2358
|
+
...colors,
|
|
2359
|
+
/** Brand scale — black-based for primary actions */
|
|
2360
|
+
brand: {
|
|
2361
|
+
25: "#fafafa",
|
|
2362
|
+
50: "#f5f5f5",
|
|
2363
|
+
100: "#ebebeb",
|
|
2364
|
+
200: "#d6d6d6",
|
|
2365
|
+
300: "#b0b0b0",
|
|
2366
|
+
400: "#737373",
|
|
2367
|
+
500: "#404040",
|
|
2368
|
+
600: "#1a1a1a",
|
|
2369
|
+
700: "#0d0d0d",
|
|
2370
|
+
800: "#050505",
|
|
2371
|
+
900: "#000000",
|
|
2372
|
+
950: "#000000"
|
|
2373
|
+
},
|
|
2374
|
+
/** Warm-neutral gray scale */
|
|
2375
|
+
gray: {
|
|
2376
|
+
25: "#fdfcfc",
|
|
2377
|
+
50: "#faf9f8",
|
|
2378
|
+
100: "#f5f3f1",
|
|
2379
|
+
200: "#e8e5e3",
|
|
2380
|
+
300: "#d8d8dc",
|
|
2381
|
+
400: "#a0a0a6",
|
|
2382
|
+
500: "#71717a",
|
|
2383
|
+
600: "#52525b",
|
|
2384
|
+
700: "#3f3f46",
|
|
2385
|
+
800: "#27272a",
|
|
2386
|
+
900: "#18181b",
|
|
2387
|
+
950: "#09090b"
|
|
2388
|
+
}
|
|
2389
|
+
};
|
|
2390
|
+
var radius3 = {
|
|
2391
|
+
...radius,
|
|
2392
|
+
xxs: 1,
|
|
2393
|
+
xs: 2,
|
|
2394
|
+
sm: 3,
|
|
2395
|
+
md: 4,
|
|
2396
|
+
lg: 5,
|
|
2397
|
+
xl: 6,
|
|
2398
|
+
"2xl": 8,
|
|
2399
|
+
"3xl": 10,
|
|
2400
|
+
"4xl": 12
|
|
2401
|
+
};
|
|
2402
|
+
var text3 = {
|
|
2403
|
+
primary: colors3.gray[900],
|
|
2404
|
+
secondary: colors3.gray[700],
|
|
2405
|
+
secondaryHover: colors3.gray[800],
|
|
2406
|
+
tertiary: colors3.gray[600],
|
|
2407
|
+
tertiaryHover: colors3.gray[700],
|
|
2408
|
+
quaternary: colors3.gray[500],
|
|
2409
|
+
disabled: colors3.gray[500],
|
|
2410
|
+
placeholder: colors3.gray[500],
|
|
2411
|
+
placeholderSubtle: colors3.gray[300],
|
|
2412
|
+
white: colors3.base.white,
|
|
2413
|
+
brandPrimary: colors3.brand[900],
|
|
2414
|
+
brandSecondary: colors3.brand[700],
|
|
2415
|
+
brandTertiary: colors3.brand[600],
|
|
2416
|
+
brandTertiaryAlt: colors3.brand[600],
|
|
2417
|
+
primaryOnBrand: colors3.base.white,
|
|
2418
|
+
secondaryOnBrand: colors3.brand[200],
|
|
2419
|
+
tertiaryOnBrand: colors3.brand[200],
|
|
2420
|
+
quaternaryOnBrand: colors3.brand[300],
|
|
2421
|
+
errorPrimary: colors3.error[600],
|
|
2422
|
+
warningPrimary: colors3.warning[600],
|
|
2423
|
+
successPrimary: colors3.success[600]
|
|
2424
|
+
};
|
|
2425
|
+
var bg3 = {
|
|
2426
|
+
primary: colors3.gray[50],
|
|
2427
|
+
primaryAlt: colors3.gray[50],
|
|
2428
|
+
primaryHover: colors3.gray[100],
|
|
2429
|
+
primarySolid: colors3.gray[950],
|
|
2430
|
+
secondary: colors3.base.white,
|
|
2431
|
+
secondaryAlt: colors3.base.white,
|
|
2432
|
+
secondarySubtle: colors3.gray[25],
|
|
2433
|
+
secondaryHover: colors3.gray[50],
|
|
2434
|
+
secondarySolid: colors3.gray[600],
|
|
2435
|
+
tertiary: colors3.gray[100],
|
|
2436
|
+
quaternary: colors3.gray[200],
|
|
2437
|
+
active: colors3.gray[200],
|
|
2438
|
+
disabled: colors3.gray[100],
|
|
2439
|
+
disabledSubtle: colors3.gray[50],
|
|
2440
|
+
overlay: colors3.gray[950],
|
|
2441
|
+
brandPrimary: colors3.brand[50],
|
|
2442
|
+
brandPrimaryAlt: colors3.brand[50],
|
|
2443
|
+
brandSecondary: colors3.brand[100],
|
|
2444
|
+
brandSolid: colors3.brand[600],
|
|
2445
|
+
brandSolidHover: colors3.brand[700],
|
|
2446
|
+
brandSection: colors3.brand[800],
|
|
2447
|
+
brandSectionSubtle: colors3.brand[700],
|
|
2448
|
+
errorPrimary: colors3.error[50],
|
|
2449
|
+
errorSecondary: colors3.error[100],
|
|
2450
|
+
errorSolid: colors3.error[600],
|
|
2451
|
+
warningPrimary: colors3.warning[50],
|
|
2452
|
+
warningSecondary: colors3.warning[100],
|
|
2453
|
+
warningSolid: colors3.warning[600],
|
|
2454
|
+
successPrimary: colors3.success[50],
|
|
2455
|
+
successSecondary: colors3.success[100],
|
|
2456
|
+
successSolid: colors3.success[600]
|
|
2457
|
+
};
|
|
2458
|
+
var fg3 = {
|
|
2459
|
+
primary: colors3.gray[900],
|
|
2460
|
+
secondary: colors3.gray[700],
|
|
2461
|
+
secondaryHover: colors3.gray[800],
|
|
2462
|
+
tertiary: colors3.gray[600],
|
|
2463
|
+
tertiaryHover: colors3.gray[700],
|
|
2464
|
+
quaternary: colors3.gray[500],
|
|
2465
|
+
quaternaryHover: colors3.gray[600],
|
|
2466
|
+
quinary: colors3.gray[400],
|
|
2467
|
+
quinaryHover: colors3.gray[500],
|
|
2468
|
+
senary: colors3.gray[300],
|
|
2469
|
+
white: colors3.base.white,
|
|
2470
|
+
disabled: colors3.gray[400],
|
|
2471
|
+
disabledSubtle: colors3.gray[300],
|
|
2472
|
+
brandPrimary: colors3.brand[600],
|
|
2473
|
+
brandPrimaryAlt: colors3.brand[600],
|
|
2474
|
+
brandSecondary: colors3.brand[500],
|
|
2475
|
+
errorPrimary: colors3.error[600],
|
|
2476
|
+
errorSecondary: colors3.error[500],
|
|
2477
|
+
warningPrimary: colors3.warning[600],
|
|
2478
|
+
warningSecondary: colors3.warning[500],
|
|
2479
|
+
successPrimary: colors3.success[600],
|
|
2480
|
+
successSecondary: colors3.success[500]
|
|
2481
|
+
};
|
|
2482
|
+
var border3 = {
|
|
2483
|
+
primary: colors3.gray[300],
|
|
2484
|
+
secondary: colors3.gray[200],
|
|
2485
|
+
tertiary: colors3.gray[100],
|
|
2486
|
+
disabled: colors3.gray[300],
|
|
2487
|
+
disabledSubtle: colors3.gray[200],
|
|
2488
|
+
brand: colors3.brand[300],
|
|
2489
|
+
brandSolid: colors3.brand[600],
|
|
2490
|
+
brandSolidAlt: colors3.brand[600],
|
|
2491
|
+
error: colors3.error[300],
|
|
2492
|
+
errorSolid: colors3.error[600]
|
|
2493
|
+
};
|
|
2494
|
+
var buttonColors3 = {
|
|
2495
|
+
primary: {
|
|
2496
|
+
bg: colors3.brand[600],
|
|
2497
|
+
bgHover: colors3.brand[700],
|
|
2498
|
+
fg: colors3.base.white,
|
|
2499
|
+
fgHover: colors3.base.white,
|
|
2500
|
+
border: colors3.brand[600],
|
|
2501
|
+
borderHover: colors3.brand[700]
|
|
2502
|
+
},
|
|
2503
|
+
secondary: {
|
|
2504
|
+
bg: colors3.base.white,
|
|
2505
|
+
bgHover: colors3.gray[50],
|
|
2506
|
+
fg: colors3.gray[700],
|
|
2507
|
+
fgHover: colors3.gray[800],
|
|
2508
|
+
border: colors3.gray[300],
|
|
2509
|
+
borderHover: colors3.gray[300]
|
|
2510
|
+
},
|
|
2511
|
+
secondaryColor: {
|
|
2512
|
+
bg: colors3.base.white,
|
|
2513
|
+
bgHover: colors3.brand[50],
|
|
2514
|
+
fg: colors3.brand[700],
|
|
2515
|
+
fgHover: colors3.brand[800],
|
|
2516
|
+
border: colors3.brand[300],
|
|
2517
|
+
borderHover: colors3.brand[300]
|
|
2518
|
+
},
|
|
2519
|
+
tertiary: {
|
|
2520
|
+
fg: colors3.gray[600],
|
|
2521
|
+
fgHover: colors3.gray[700],
|
|
2522
|
+
bgHover: colors3.gray[50]
|
|
2523
|
+
},
|
|
2524
|
+
tertiaryColor: {
|
|
2525
|
+
fg: colors3.brand[700],
|
|
2526
|
+
fgHover: colors3.brand[800],
|
|
2527
|
+
bgHover: colors3.brand[50]
|
|
2528
|
+
},
|
|
2529
|
+
primaryError: {
|
|
2530
|
+
bg: colors3.error[600],
|
|
2531
|
+
bgHover: colors3.error[700],
|
|
2532
|
+
fg: colors3.base.white,
|
|
2533
|
+
fgHover: colors3.base.white,
|
|
2534
|
+
border: colors3.error[600],
|
|
2535
|
+
borderHover: colors3.error[700]
|
|
2536
|
+
},
|
|
2537
|
+
secondaryError: {
|
|
2538
|
+
bg: colors3.base.white,
|
|
2539
|
+
bgHover: colors3.error[50],
|
|
2540
|
+
fg: colors3.error[700],
|
|
2541
|
+
fgHover: colors3.error[800],
|
|
2542
|
+
border: colors3.error[300],
|
|
2543
|
+
borderHover: colors3.error[300]
|
|
2544
|
+
},
|
|
2545
|
+
tertiaryError: {
|
|
2546
|
+
fg: colors3.error[700],
|
|
2547
|
+
fgHover: colors3.error[800],
|
|
2548
|
+
bgHover: colors3.error[50]
|
|
2549
|
+
}
|
|
2550
|
+
};
|
|
2551
|
+
var avatarColors3 = {
|
|
2552
|
+
bg: colors3.gray[100],
|
|
2553
|
+
contrastBorder: "#00000014",
|
|
2554
|
+
profilePhotoBorder: colors3.base.white,
|
|
2555
|
+
focusBorder: "#a0a0a624"
|
|
2556
|
+
// gray[400] + 14% alpha
|
|
2557
|
+
};
|
|
2558
|
+
var breadcrumbColors3 = {
|
|
2559
|
+
fg: colors3.gray[600],
|
|
2560
|
+
fgHover: colors3.gray[700],
|
|
2561
|
+
bgHover: colors3.gray[50],
|
|
2562
|
+
brandBgHover: colors3.brand[50],
|
|
2563
|
+
brandFgHover: colors3.brand[700],
|
|
2564
|
+
iconFg: colors3.gray[500],
|
|
2565
|
+
iconFgHover: colors3.gray[700],
|
|
2566
|
+
brandIconFgHover: colors3.brand[700]
|
|
2567
|
+
};
|
|
2568
|
+
var iconColors3 = {
|
|
2569
|
+
fgBrand: colors3.brand[600],
|
|
2570
|
+
fgBrandOnBrand: colors3.brand[200],
|
|
2571
|
+
featuredModernBorder: colors3.gray[200],
|
|
2572
|
+
featuredLightFgBrand: colors3.brand[600],
|
|
2573
|
+
featuredLightFgGray: colors3.gray[500],
|
|
2574
|
+
featuredLightFgError: colors3.error[600],
|
|
2575
|
+
featuredLightFgWarning: colors3.warning[600],
|
|
2576
|
+
featuredLightFgSuccess: colors3.success[600],
|
|
2577
|
+
featuredDarkFgBrand: colors3.base.white,
|
|
2578
|
+
featuredDarkFgGray: colors3.base.white,
|
|
2579
|
+
featuredDarkFgError: colors3.base.white,
|
|
2580
|
+
featuredDarkFgWarning: colors3.base.white,
|
|
2581
|
+
featuredDarkFgSuccess: colors3.base.white
|
|
2582
|
+
};
|
|
2583
|
+
var navColors3 = {
|
|
2584
|
+
itemIconFg: colors3.gray[500],
|
|
2585
|
+
itemIconFgActive: colors3.gray[700],
|
|
2586
|
+
itemButtonIconFg: colors3.gray[500],
|
|
2587
|
+
itemButtonIconFgActive: colors3.gray[700]
|
|
2588
|
+
};
|
|
2589
|
+
var sliderColors3 = {
|
|
2590
|
+
handleBorder: colors3.brand[600],
|
|
2591
|
+
handleBg: colors3.base.white
|
|
2592
|
+
};
|
|
2593
|
+
var toggleColors3 = {
|
|
2594
|
+
buttonFgDisabled: colors3.gray[50]
|
|
2595
|
+
};
|
|
2596
|
+
var chartColors3 = {
|
|
2597
|
+
axisFg: colors3.gray[100],
|
|
2598
|
+
gridlineFg: colors3.gray[100],
|
|
2599
|
+
labelFg: colors3.gray[600],
|
|
2600
|
+
labelFgEmphasis: colors3.gray[700],
|
|
2601
|
+
bg: colors3.base.white,
|
|
2602
|
+
bgAlt: colors3.gray[50],
|
|
2603
|
+
tooltipBg: colors3.gray[950],
|
|
2604
|
+
tooltipFg: colors3.base.white,
|
|
2605
|
+
crosshairFg: colors3.gray[500],
|
|
2606
|
+
legendFg: text3.tertiary,
|
|
2607
|
+
series: [
|
|
2608
|
+
{ fg: colors3.violet[500], fgHover: colors3.violet[600], bg: colors3.violet[100], bgHover: colors3.violet[200] },
|
|
2609
|
+
{ fg: colors3.orangeDark[400], fgHover: colors3.orangeDark[500], bg: colors3.orangeDark[100], bgHover: colors3.orangeDark[200] },
|
|
2610
|
+
{ fg: colors3.teal[300], fgHover: colors3.teal[400], bg: colors3.teal[50], bgHover: colors3.teal[100] },
|
|
2611
|
+
{ fg: colors3.warning[400], fgHover: colors3.warning[500], bg: colors3.warning[100], bgHover: colors3.warning[200] },
|
|
2612
|
+
{ fg: colors3.rose[400], fgHover: colors3.rose[500], bg: colors3.rose[100], bgHover: colors3.rose[200] },
|
|
2613
|
+
{ fg: colors3.blueLight[400], fgHover: colors3.blueLight[500], bg: colors3.blueLight[100], bgHover: colors3.blueLight[200] },
|
|
2614
|
+
{ fg: colors3.orange[300], fgHover: colors3.orange[400], bg: colors3.orange[100], bgHover: colors3.orange[200] },
|
|
2615
|
+
{ fg: colors3.cyan[600], fgHover: colors3.cyan[700], bg: colors3.cyan[100], bgHover: colors3.cyan[200] },
|
|
2616
|
+
{ fg: colors3.green[500], fgHover: colors3.green[600], bg: colors3.green[100], bgHover: colors3.green[200] },
|
|
2617
|
+
{ fg: colors3.pink[400], fgHover: colors3.pink[500], bg: colors3.pink[100], bgHover: colors3.pink[200] },
|
|
2618
|
+
{ fg: colors3.fuchsia[400], fgHover: colors3.fuchsia[500], bg: colors3.fuchsia[100], bgHover: colors3.fuchsia[200] },
|
|
2619
|
+
{ fg: colors3.teal[600], fgHover: colors3.teal[700], bg: colors3.teal[100], bgHover: colors3.teal[200] }
|
|
2620
|
+
]
|
|
2621
|
+
};
|
|
2622
|
+
var focusRings3 = {
|
|
2623
|
+
brand: "0px 0px 0px 4px #4040403d",
|
|
2624
|
+
brandShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #4040403d",
|
|
2625
|
+
brandShadowSm: "0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #4040403d",
|
|
2626
|
+
gray: "0px 0px 0px 4px #a0a0a624",
|
|
2627
|
+
grayShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #a0a0a624",
|
|
2628
|
+
grayShadowSm: "0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #a0a0a624",
|
|
2629
|
+
error: "0px 0px 0px 4px #f044383d",
|
|
2630
|
+
errorShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #f044383d"
|
|
2631
|
+
};
|
|
2632
|
+
var forestAgencyPreset = {
|
|
2633
|
+
name: "forest-agency",
|
|
2634
|
+
defaultVariant: "light",
|
|
2635
|
+
variants: {
|
|
2636
|
+
light: {
|
|
2637
|
+
tokens: {
|
|
2638
|
+
colors: colors3,
|
|
2639
|
+
spacing,
|
|
2640
|
+
radius: radius3,
|
|
2641
|
+
shadows,
|
|
2642
|
+
focusRings: focusRings3,
|
|
2643
|
+
fontFamily: '"Aeonik", sans-serif',
|
|
2644
|
+
fontSize,
|
|
2645
|
+
lineHeight,
|
|
2646
|
+
fontWeight,
|
|
2647
|
+
display,
|
|
2648
|
+
container,
|
|
2649
|
+
widths,
|
|
2650
|
+
text: text3,
|
|
2651
|
+
bg: bg3,
|
|
2652
|
+
fg: fg3,
|
|
2653
|
+
border: border3,
|
|
2654
|
+
buttonColors: buttonColors3,
|
|
2655
|
+
avatarColors: avatarColors3,
|
|
2656
|
+
breadcrumbColors: breadcrumbColors3,
|
|
2657
|
+
iconColors: iconColors3,
|
|
2658
|
+
navColors: navColors3,
|
|
2659
|
+
sliderColors: sliderColors3,
|
|
2660
|
+
toggleColors: toggleColors3,
|
|
2661
|
+
chartColors: chartColors3,
|
|
2662
|
+
alpha
|
|
2663
|
+
}
|
|
2664
|
+
}
|
|
2665
|
+
}
|
|
2666
|
+
};
|
|
2667
|
+
|
|
2668
|
+
// src/theme/presets/forest-internal.ts
|
|
2669
|
+
var colors4 = {
|
|
2670
|
+
...colors,
|
|
2671
|
+
/** Brand scale — black-based for primary actions */
|
|
2672
|
+
brand: {
|
|
2673
|
+
25: "#fafafa",
|
|
2674
|
+
50: "#f5f5f5",
|
|
2675
|
+
100: "#ebebeb",
|
|
2676
|
+
200: "#d6d6d6",
|
|
2677
|
+
300: "#b0b0b0",
|
|
2678
|
+
400: "#737373",
|
|
2679
|
+
500: "#404040",
|
|
2680
|
+
600: "#1a1a1a",
|
|
2681
|
+
700: "#0d0d0d",
|
|
2682
|
+
800: "#050505",
|
|
2683
|
+
900: "#000000",
|
|
2684
|
+
950: "#000000"
|
|
2685
|
+
},
|
|
2686
|
+
/** Warm-neutral gray scale */
|
|
2687
|
+
gray: {
|
|
2688
|
+
25: "#fdfcfc",
|
|
2689
|
+
50: "#faf9f8",
|
|
2690
|
+
100: "#f5f3f1",
|
|
2691
|
+
200: "#e8e5e3",
|
|
2692
|
+
300: "#d8d8dc",
|
|
2693
|
+
400: "#a0a0a6",
|
|
2694
|
+
500: "#71717a",
|
|
2695
|
+
600: "#52525b",
|
|
2696
|
+
700: "#3f3f46",
|
|
2697
|
+
800: "#27272a",
|
|
2698
|
+
900: "#18181b",
|
|
2699
|
+
950: "#09090b"
|
|
2700
|
+
}
|
|
2701
|
+
};
|
|
2702
|
+
var radius4 = {
|
|
2703
|
+
...radius,
|
|
2704
|
+
xxs: 1,
|
|
2705
|
+
xs: 2,
|
|
2706
|
+
sm: 3,
|
|
2707
|
+
md: 4,
|
|
2708
|
+
lg: 5,
|
|
2709
|
+
xl: 6,
|
|
2710
|
+
"2xl": 8,
|
|
2711
|
+
"3xl": 10,
|
|
2712
|
+
"4xl": 12
|
|
2713
|
+
};
|
|
2714
|
+
var text4 = {
|
|
2715
|
+
primary: colors4.gray[900],
|
|
2716
|
+
secondary: colors4.gray[700],
|
|
2717
|
+
secondaryHover: colors4.gray[800],
|
|
2718
|
+
tertiary: colors4.gray[600],
|
|
2719
|
+
tertiaryHover: colors4.gray[700],
|
|
2720
|
+
quaternary: colors4.gray[500],
|
|
2721
|
+
disabled: colors4.gray[500],
|
|
2722
|
+
placeholder: colors4.gray[500],
|
|
2723
|
+
placeholderSubtle: colors4.gray[300],
|
|
2724
|
+
white: colors4.base.white,
|
|
2725
|
+
brandPrimary: colors4.brand[900],
|
|
2726
|
+
brandSecondary: colors4.brand[700],
|
|
2727
|
+
brandTertiary: colors4.brand[600],
|
|
2728
|
+
brandTertiaryAlt: colors4.brand[600],
|
|
2729
|
+
primaryOnBrand: colors4.base.white,
|
|
2730
|
+
secondaryOnBrand: colors4.brand[200],
|
|
2731
|
+
tertiaryOnBrand: colors4.brand[200],
|
|
2732
|
+
quaternaryOnBrand: colors4.brand[300],
|
|
2733
|
+
errorPrimary: colors4.error[600],
|
|
2734
|
+
warningPrimary: colors4.warning[600],
|
|
2735
|
+
successPrimary: colors4.success[600]
|
|
2736
|
+
};
|
|
2737
|
+
var bg4 = {
|
|
2738
|
+
primary: colors4.gray[50],
|
|
2739
|
+
primaryAlt: colors4.gray[50],
|
|
2740
|
+
primaryHover: colors4.gray[100],
|
|
2741
|
+
primarySolid: colors4.gray[950],
|
|
2742
|
+
secondary: colors4.base.white,
|
|
2743
|
+
secondaryAlt: colors4.base.white,
|
|
2744
|
+
secondarySubtle: colors4.gray[25],
|
|
2745
|
+
secondaryHover: colors4.gray[50],
|
|
2746
|
+
secondarySolid: colors4.gray[600],
|
|
2747
|
+
tertiary: colors4.gray[100],
|
|
2748
|
+
quaternary: colors4.gray[200],
|
|
2749
|
+
active: colors4.gray[200],
|
|
2750
|
+
disabled: colors4.gray[100],
|
|
2751
|
+
disabledSubtle: colors4.gray[50],
|
|
2752
|
+
overlay: colors4.gray[950],
|
|
2753
|
+
brandPrimary: colors4.brand[50],
|
|
2754
|
+
brandPrimaryAlt: colors4.brand[50],
|
|
2755
|
+
brandSecondary: colors4.brand[100],
|
|
2756
|
+
brandSolid: colors4.brand[600],
|
|
2757
|
+
brandSolidHover: colors4.brand[700],
|
|
2758
|
+
brandSection: colors4.brand[800],
|
|
2759
|
+
brandSectionSubtle: colors4.brand[700],
|
|
2760
|
+
errorPrimary: colors4.error[50],
|
|
2761
|
+
errorSecondary: colors4.error[100],
|
|
2762
|
+
errorSolid: colors4.error[600],
|
|
2763
|
+
warningPrimary: colors4.warning[50],
|
|
2764
|
+
warningSecondary: colors4.warning[100],
|
|
2765
|
+
warningSolid: colors4.warning[600],
|
|
2766
|
+
successPrimary: colors4.success[50],
|
|
2767
|
+
successSecondary: colors4.success[100],
|
|
2768
|
+
successSolid: colors4.success[600]
|
|
2769
|
+
};
|
|
2770
|
+
var fg4 = {
|
|
2771
|
+
primary: colors4.gray[900],
|
|
2772
|
+
secondary: colors4.gray[700],
|
|
2773
|
+
secondaryHover: colors4.gray[800],
|
|
2774
|
+
tertiary: colors4.gray[600],
|
|
2775
|
+
tertiaryHover: colors4.gray[700],
|
|
2776
|
+
quaternary: colors4.gray[500],
|
|
2777
|
+
quaternaryHover: colors4.gray[600],
|
|
2778
|
+
quinary: colors4.gray[400],
|
|
2779
|
+
quinaryHover: colors4.gray[500],
|
|
2780
|
+
senary: colors4.gray[300],
|
|
2781
|
+
white: colors4.base.white,
|
|
2782
|
+
disabled: colors4.gray[400],
|
|
2783
|
+
disabledSubtle: colors4.gray[300],
|
|
2784
|
+
brandPrimary: colors4.brand[600],
|
|
2785
|
+
brandPrimaryAlt: colors4.brand[600],
|
|
2786
|
+
brandSecondary: colors4.brand[500],
|
|
2787
|
+
errorPrimary: colors4.error[600],
|
|
2788
|
+
errorSecondary: colors4.error[500],
|
|
2789
|
+
warningPrimary: colors4.warning[600],
|
|
2790
|
+
warningSecondary: colors4.warning[500],
|
|
2791
|
+
successPrimary: colors4.success[600],
|
|
2792
|
+
successSecondary: colors4.success[500]
|
|
2793
|
+
};
|
|
2794
|
+
var border4 = {
|
|
2795
|
+
primary: colors4.gray[300],
|
|
2796
|
+
secondary: colors4.gray[200],
|
|
2797
|
+
tertiary: colors4.gray[100],
|
|
2798
|
+
disabled: colors4.gray[300],
|
|
2799
|
+
disabledSubtle: colors4.gray[200],
|
|
2800
|
+
brand: colors4.brand[300],
|
|
2801
|
+
brandSolid: colors4.brand[600],
|
|
2802
|
+
brandSolidAlt: colors4.brand[600],
|
|
2803
|
+
error: colors4.error[300],
|
|
2804
|
+
errorSolid: colors4.error[600]
|
|
2805
|
+
};
|
|
2806
|
+
var buttonColors4 = {
|
|
2807
|
+
primary: {
|
|
2808
|
+
bg: colors4.brand[600],
|
|
2809
|
+
bgHover: colors4.brand[700],
|
|
2810
|
+
fg: colors4.base.white,
|
|
2811
|
+
fgHover: colors4.base.white,
|
|
2812
|
+
border: colors4.brand[600],
|
|
2813
|
+
borderHover: colors4.brand[700]
|
|
2814
|
+
},
|
|
2815
|
+
secondary: {
|
|
2816
|
+
bg: colors4.base.white,
|
|
2817
|
+
bgHover: colors4.gray[50],
|
|
2818
|
+
fg: colors4.gray[700],
|
|
2819
|
+
fgHover: colors4.gray[800],
|
|
2820
|
+
border: colors4.gray[300],
|
|
2821
|
+
borderHover: colors4.gray[300]
|
|
2822
|
+
},
|
|
2823
|
+
secondaryColor: {
|
|
2824
|
+
bg: colors4.base.white,
|
|
2825
|
+
bgHover: colors4.brand[50],
|
|
2826
|
+
fg: colors4.brand[700],
|
|
2827
|
+
fgHover: colors4.brand[800],
|
|
2828
|
+
border: colors4.brand[300],
|
|
2829
|
+
borderHover: colors4.brand[300]
|
|
2830
|
+
},
|
|
2831
|
+
tertiary: {
|
|
2832
|
+
fg: colors4.gray[600],
|
|
2833
|
+
fgHover: colors4.gray[700],
|
|
2834
|
+
bgHover: colors4.gray[50]
|
|
2835
|
+
},
|
|
2836
|
+
tertiaryColor: {
|
|
2837
|
+
fg: colors4.brand[700],
|
|
2838
|
+
fgHover: colors4.brand[800],
|
|
2839
|
+
bgHover: colors4.brand[50]
|
|
2840
|
+
},
|
|
2841
|
+
primaryError: {
|
|
2842
|
+
bg: colors4.error[600],
|
|
2843
|
+
bgHover: colors4.error[700],
|
|
2844
|
+
fg: colors4.base.white,
|
|
2845
|
+
fgHover: colors4.base.white,
|
|
2846
|
+
border: colors4.error[600],
|
|
2847
|
+
borderHover: colors4.error[700]
|
|
2848
|
+
},
|
|
2849
|
+
secondaryError: {
|
|
2850
|
+
bg: colors4.base.white,
|
|
2851
|
+
bgHover: colors4.error[50],
|
|
2852
|
+
fg: colors4.error[700],
|
|
2853
|
+
fgHover: colors4.error[800],
|
|
2854
|
+
border: colors4.error[300],
|
|
2855
|
+
borderHover: colors4.error[300]
|
|
2856
|
+
},
|
|
2857
|
+
tertiaryError: {
|
|
2858
|
+
fg: colors4.error[700],
|
|
2859
|
+
fgHover: colors4.error[800],
|
|
2860
|
+
bgHover: colors4.error[50]
|
|
2861
|
+
}
|
|
2862
|
+
};
|
|
2863
|
+
var avatarColors4 = {
|
|
2864
|
+
bg: colors4.gray[100],
|
|
2865
|
+
contrastBorder: "#00000014",
|
|
2866
|
+
profilePhotoBorder: colors4.base.white,
|
|
2867
|
+
focusBorder: "#a0a0a624"
|
|
2868
|
+
// gray[400] + 14% alpha
|
|
2869
|
+
};
|
|
2870
|
+
var breadcrumbColors4 = {
|
|
2871
|
+
fg: colors4.gray[600],
|
|
2872
|
+
fgHover: colors4.gray[700],
|
|
2873
|
+
bgHover: colors4.gray[50],
|
|
2874
|
+
brandBgHover: colors4.brand[50],
|
|
2875
|
+
brandFgHover: colors4.brand[700],
|
|
2876
|
+
iconFg: colors4.gray[500],
|
|
2877
|
+
iconFgHover: colors4.gray[700],
|
|
2878
|
+
brandIconFgHover: colors4.brand[700]
|
|
2879
|
+
};
|
|
2880
|
+
var iconColors4 = {
|
|
2881
|
+
fgBrand: colors4.brand[600],
|
|
2882
|
+
fgBrandOnBrand: colors4.brand[200],
|
|
2883
|
+
featuredModernBorder: colors4.gray[200],
|
|
2884
|
+
featuredLightFgBrand: colors4.brand[600],
|
|
2885
|
+
featuredLightFgGray: colors4.gray[500],
|
|
2886
|
+
featuredLightFgError: colors4.error[600],
|
|
2887
|
+
featuredLightFgWarning: colors4.warning[600],
|
|
2888
|
+
featuredLightFgSuccess: colors4.success[600],
|
|
2889
|
+
featuredDarkFgBrand: colors4.base.white,
|
|
2890
|
+
featuredDarkFgGray: colors4.base.white,
|
|
2891
|
+
featuredDarkFgError: colors4.base.white,
|
|
2892
|
+
featuredDarkFgWarning: colors4.base.white,
|
|
2893
|
+
featuredDarkFgSuccess: colors4.base.white
|
|
2894
|
+
};
|
|
2895
|
+
var navColors4 = {
|
|
2896
|
+
itemIconFg: colors4.gray[500],
|
|
2897
|
+
itemIconFgActive: colors4.gray[700],
|
|
2898
|
+
itemButtonIconFg: colors4.gray[500],
|
|
2899
|
+
itemButtonIconFgActive: colors4.gray[700]
|
|
2900
|
+
};
|
|
2901
|
+
var sliderColors4 = {
|
|
2902
|
+
handleBorder: colors4.brand[600],
|
|
2903
|
+
handleBg: colors4.base.white
|
|
2904
|
+
};
|
|
2905
|
+
var toggleColors4 = {
|
|
2906
|
+
buttonFgDisabled: colors4.gray[50]
|
|
2907
|
+
};
|
|
2908
|
+
var chartColors4 = {
|
|
2909
|
+
axisFg: colors4.gray[100],
|
|
2910
|
+
gridlineFg: colors4.gray[100],
|
|
2911
|
+
labelFg: colors4.gray[600],
|
|
2912
|
+
labelFgEmphasis: colors4.gray[700],
|
|
2913
|
+
bg: colors4.base.white,
|
|
2914
|
+
bgAlt: colors4.gray[50],
|
|
2915
|
+
tooltipBg: colors4.gray[950],
|
|
2916
|
+
tooltipFg: colors4.base.white,
|
|
2917
|
+
crosshairFg: colors4.gray[500],
|
|
2918
|
+
legendFg: text4.tertiary,
|
|
2919
|
+
series: [
|
|
2920
|
+
{ fg: colors4.violet[500], fgHover: colors4.violet[600], bg: colors4.violet[100], bgHover: colors4.violet[200] },
|
|
2921
|
+
{ fg: colors4.orangeDark[400], fgHover: colors4.orangeDark[500], bg: colors4.orangeDark[100], bgHover: colors4.orangeDark[200] },
|
|
2922
|
+
{ fg: colors4.teal[300], fgHover: colors4.teal[400], bg: colors4.teal[50], bgHover: colors4.teal[100] },
|
|
2923
|
+
{ fg: colors4.warning[400], fgHover: colors4.warning[500], bg: colors4.warning[100], bgHover: colors4.warning[200] },
|
|
2924
|
+
{ fg: colors4.rose[400], fgHover: colors4.rose[500], bg: colors4.rose[100], bgHover: colors4.rose[200] },
|
|
2925
|
+
{ fg: colors4.blueLight[400], fgHover: colors4.blueLight[500], bg: colors4.blueLight[100], bgHover: colors4.blueLight[200] },
|
|
2926
|
+
{ fg: colors4.orange[300], fgHover: colors4.orange[400], bg: colors4.orange[100], bgHover: colors4.orange[200] },
|
|
2927
|
+
{ fg: colors4.cyan[600], fgHover: colors4.cyan[700], bg: colors4.cyan[100], bgHover: colors4.cyan[200] },
|
|
2928
|
+
{ fg: colors4.green[500], fgHover: colors4.green[600], bg: colors4.green[100], bgHover: colors4.green[200] },
|
|
2929
|
+
{ fg: colors4.pink[400], fgHover: colors4.pink[500], bg: colors4.pink[100], bgHover: colors4.pink[200] },
|
|
2930
|
+
{ fg: colors4.fuchsia[400], fgHover: colors4.fuchsia[500], bg: colors4.fuchsia[100], bgHover: colors4.fuchsia[200] },
|
|
2931
|
+
{ fg: colors4.teal[600], fgHover: colors4.teal[700], bg: colors4.teal[100], bgHover: colors4.teal[200] }
|
|
2932
|
+
]
|
|
2933
|
+
};
|
|
2934
|
+
var focusRings4 = {
|
|
2935
|
+
brand: "0px 0px 0px 4px #4040403d",
|
|
2936
|
+
brandShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #4040403d",
|
|
2937
|
+
brandShadowSm: "0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #4040403d",
|
|
2938
|
+
gray: "0px 0px 0px 4px #a0a0a624",
|
|
2939
|
+
grayShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #a0a0a624",
|
|
2940
|
+
grayShadowSm: "0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #a0a0a624",
|
|
2941
|
+
error: "0px 0px 0px 4px #f044383d",
|
|
2942
|
+
errorShadowXs: "0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #f044383d"
|
|
2943
|
+
};
|
|
2944
|
+
var forestInternalPreset = {
|
|
2945
|
+
name: "forest-internal",
|
|
2946
|
+
defaultVariant: "light",
|
|
2947
|
+
variants: {
|
|
2948
|
+
light: {
|
|
2949
|
+
tokens: {
|
|
2950
|
+
colors: colors4,
|
|
2951
|
+
spacing,
|
|
2952
|
+
radius: radius4,
|
|
2953
|
+
shadows,
|
|
2954
|
+
focusRings: focusRings4,
|
|
2955
|
+
fontFamily: '"Aeonik", sans-serif',
|
|
2956
|
+
fontSize,
|
|
2957
|
+
lineHeight,
|
|
2958
|
+
fontWeight,
|
|
2959
|
+
display,
|
|
2960
|
+
container,
|
|
2961
|
+
widths,
|
|
2962
|
+
text: text4,
|
|
2963
|
+
bg: bg4,
|
|
2964
|
+
fg: fg4,
|
|
2965
|
+
border: border4,
|
|
2966
|
+
buttonColors: buttonColors4,
|
|
2967
|
+
avatarColors: avatarColors4,
|
|
2968
|
+
breadcrumbColors: breadcrumbColors4,
|
|
2969
|
+
iconColors: iconColors4,
|
|
2970
|
+
navColors: navColors4,
|
|
2971
|
+
sliderColors: sliderColors4,
|
|
2972
|
+
toggleColors: toggleColors4,
|
|
2973
|
+
chartColors: chartColors4,
|
|
2974
|
+
alpha
|
|
2975
|
+
}
|
|
2976
|
+
}
|
|
2977
|
+
}
|
|
2978
|
+
};
|
|
2979
|
+
|
|
2391
2980
|
// src/theme/presets/index.ts
|
|
2392
2981
|
var presetRegistry = /* @__PURE__ */ new Map();
|
|
2393
|
-
presetRegistry.set(
|
|
2394
|
-
presetRegistry.set(
|
|
2982
|
+
presetRegistry.set(forestExternalPreset.name, forestExternalPreset);
|
|
2983
|
+
presetRegistry.set(forestAgencyPreset.name, forestAgencyPreset);
|
|
2984
|
+
presetRegistry.set(forestInternalPreset.name, forestInternalPreset);
|
|
2395
2985
|
function getPreset(name) {
|
|
2396
2986
|
return presetRegistry.get(name);
|
|
2397
2987
|
}
|
|
@@ -2403,16 +2993,9 @@ function getAvailablePresets() {
|
|
|
2403
2993
|
}
|
|
2404
2994
|
|
|
2405
2995
|
// src/theme/index.ts
|
|
2406
|
-
var
|
|
2407
|
-
|
|
2408
|
-
|
|
2409
|
-
components,
|
|
2410
|
-
shadows: shadows2,
|
|
2411
|
-
shape: {
|
|
2412
|
-
borderRadius: 8
|
|
2413
|
-
}
|
|
2414
|
-
};
|
|
2415
|
-
var forestTheme = styles.createTheme(forestThemeOptions);
|
|
2996
|
+
var agencyTokens = forestAgencyPreset.variants.light.tokens;
|
|
2997
|
+
var forestTheme = buildTheme(agencyTokens);
|
|
2998
|
+
var forestThemeOptions = buildThemeOptions(agencyTokens);
|
|
2416
2999
|
function ForestProvider({
|
|
2417
3000
|
children,
|
|
2418
3001
|
theme,
|
|
@@ -2592,6 +3175,62 @@ function Search({
|
|
|
2592
3175
|
}
|
|
2593
3176
|
);
|
|
2594
3177
|
}
|
|
3178
|
+
var sizeMap = {
|
|
3179
|
+
sm: 24,
|
|
3180
|
+
md: 32,
|
|
3181
|
+
lg: 48,
|
|
3182
|
+
xl: 64
|
|
3183
|
+
};
|
|
3184
|
+
var variantColors = {
|
|
3185
|
+
agency: "#1a1a1a",
|
|
3186
|
+
external: "#1a1a1a",
|
|
3187
|
+
internal: "#1a1a1a"
|
|
3188
|
+
};
|
|
3189
|
+
var Logo = React2.forwardRef(
|
|
3190
|
+
({ variant = "agency", size = "md", logomarkOnly = false, sx, ...props }, ref) => {
|
|
3191
|
+
const dimension = sizeMap[size];
|
|
3192
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3193
|
+
material.Box,
|
|
3194
|
+
{
|
|
3195
|
+
ref,
|
|
3196
|
+
component: "svg",
|
|
3197
|
+
viewBox: "0 0 64 64",
|
|
3198
|
+
sx: {
|
|
3199
|
+
width: dimension,
|
|
3200
|
+
height: dimension,
|
|
3201
|
+
display: "inline-flex",
|
|
3202
|
+
alignItems: "center",
|
|
3203
|
+
justifyContent: "center",
|
|
3204
|
+
...sx
|
|
3205
|
+
},
|
|
3206
|
+
...props,
|
|
3207
|
+
children: [
|
|
3208
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3209
|
+
"path",
|
|
3210
|
+
{
|
|
3211
|
+
d: "M32 4L8 28h12v28h8V28h12L32 4z",
|
|
3212
|
+
fill: variantColors[variant]
|
|
3213
|
+
}
|
|
3214
|
+
),
|
|
3215
|
+
!logomarkOnly && /* @__PURE__ */ jsxRuntime.jsx(
|
|
3216
|
+
"text",
|
|
3217
|
+
{
|
|
3218
|
+
x: "32",
|
|
3219
|
+
y: "60",
|
|
3220
|
+
textAnchor: "middle",
|
|
3221
|
+
fontSize: "10",
|
|
3222
|
+
fontWeight: "600",
|
|
3223
|
+
fill: variantColors[variant],
|
|
3224
|
+
fontFamily: "Aeonik, sans-serif",
|
|
3225
|
+
children: "Forest"
|
|
3226
|
+
}
|
|
3227
|
+
)
|
|
3228
|
+
]
|
|
3229
|
+
}
|
|
3230
|
+
);
|
|
3231
|
+
}
|
|
3232
|
+
);
|
|
3233
|
+
Logo.displayName = "Logo";
|
|
2595
3234
|
function ToggleButton(props) {
|
|
2596
3235
|
return /* @__PURE__ */ jsxRuntime.jsx(MuiToggleButton__default.default, { ...props });
|
|
2597
3236
|
}
|
|
@@ -2810,7 +3449,7 @@ function SidebarNav({
|
|
|
2810
3449
|
onMouseEnter: () => onOpenChange(true),
|
|
2811
3450
|
onMouseLeave: () => onOpenChange(false)
|
|
2812
3451
|
} : {};
|
|
2813
|
-
return /* @__PURE__ */ jsxRuntime.jsx(SidebarContext.Provider, { value: { open, collapsedWidth, expandedWidth }, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3452
|
+
return /* @__PURE__ */ jsxRuntime.jsx(SidebarContext.Provider, { value: { open, collapsedWidth, expandedWidth }, children: /* @__PURE__ */ jsxRuntime.jsxs(Box2__default.default, { sx: { position: "relative", width: layoutWidth, flexShrink: 0 }, children: [
|
|
2814
3453
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2815
3454
|
MuiDrawer__default.default,
|
|
2816
3455
|
{
|
|
@@ -2830,7 +3469,7 @@ function SidebarNav({
|
|
|
2830
3469
|
...sx
|
|
2831
3470
|
},
|
|
2832
3471
|
children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2833
|
-
|
|
3472
|
+
Box2__default.default,
|
|
2834
3473
|
{
|
|
2835
3474
|
sx: {
|
|
2836
3475
|
display: "flex",
|
|
@@ -2839,9 +3478,9 @@ function SidebarNav({
|
|
|
2839
3478
|
overflow: "hidden"
|
|
2840
3479
|
},
|
|
2841
3480
|
children: [
|
|
2842
|
-
header && /* @__PURE__ */ jsxRuntime.jsx(
|
|
2843
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2844
|
-
footer && /* @__PURE__ */ jsxRuntime.jsx(
|
|
3481
|
+
header && /* @__PURE__ */ jsxRuntime.jsx(Box2__default.default, { sx: { flexShrink: 0 }, children: header }),
|
|
3482
|
+
/* @__PURE__ */ jsxRuntime.jsx(Box2__default.default, { sx: { flexGrow: 1, overflowY: "auto", overflowX: "hidden" }, children }),
|
|
3483
|
+
footer && /* @__PURE__ */ jsxRuntime.jsx(Box2__default.default, { sx: { flexShrink: 0 }, children: footer })
|
|
2845
3484
|
]
|
|
2846
3485
|
}
|
|
2847
3486
|
)
|
|
@@ -2937,8 +3576,8 @@ function SidebarItem({
|
|
|
2937
3576
|
function useChartColors(count) {
|
|
2938
3577
|
const theme = styles.useTheme();
|
|
2939
3578
|
const chart = theme.palette.chart;
|
|
2940
|
-
const
|
|
2941
|
-
return
|
|
3579
|
+
const colors5 = chart.series.map((s) => s.fg);
|
|
3580
|
+
return colors5.slice(0, Math.min(count, colors5.length));
|
|
2942
3581
|
}
|
|
2943
3582
|
function formatDate(date) {
|
|
2944
3583
|
if (!date) return "";
|
|
@@ -3049,7 +3688,7 @@ function CustomTooltip(props) {
|
|
|
3049
3688
|
}
|
|
3050
3689
|
);
|
|
3051
3690
|
}
|
|
3052
|
-
function LineChart({ series, colors:
|
|
3691
|
+
function LineChart({ series, colors: colors5, ...props }) {
|
|
3053
3692
|
var _a, _b;
|
|
3054
3693
|
const theme = styles.useTheme();
|
|
3055
3694
|
const chart = theme.palette.chart;
|
|
@@ -3066,7 +3705,7 @@ function LineChart({ series, colors: colors3, ...props }) {
|
|
|
3066
3705
|
LineChart$1.LineChart,
|
|
3067
3706
|
{
|
|
3068
3707
|
series: modifiedSeries != null ? modifiedSeries : [],
|
|
3069
|
-
colors:
|
|
3708
|
+
colors: colors5 != null ? colors5 : seriesColors,
|
|
3070
3709
|
grid: { horizontal: true },
|
|
3071
3710
|
slots: {
|
|
3072
3711
|
axisContent: CustomTooltip
|
|
@@ -3130,12 +3769,12 @@ function LineChart({ series, colors: colors3, ...props }) {
|
|
|
3130
3769
|
}
|
|
3131
3770
|
);
|
|
3132
3771
|
}
|
|
3133
|
-
function BarChart({ series, colors:
|
|
3772
|
+
function BarChart({ series, colors: colors5, ...props }) {
|
|
3134
3773
|
var _a, _b;
|
|
3135
3774
|
const theme = styles.useTheme();
|
|
3136
3775
|
const chart = theme.palette.chart;
|
|
3137
3776
|
const seriesColors = useChartColors((_a = series == null ? void 0 : series.length) != null ? _a : 0);
|
|
3138
|
-
const resolvedColors =
|
|
3777
|
+
const resolvedColors = colors5 != null ? colors5 : seriesColors;
|
|
3139
3778
|
const modifiedSeries = series == null ? void 0 : series.map((s, idx) => {
|
|
3140
3779
|
var _a2;
|
|
3141
3780
|
const baseColor = s.color || resolvedColors[idx % resolvedColors.length];
|
|
@@ -3151,7 +3790,7 @@ function BarChart({ series, colors: colors3, ...props }) {
|
|
|
3151
3790
|
BarChart$1.BarChart,
|
|
3152
3791
|
{
|
|
3153
3792
|
series: modifiedSeries != null ? modifiedSeries : [],
|
|
3154
|
-
colors:
|
|
3793
|
+
colors: colors5 != null ? colors5 : seriesColors,
|
|
3155
3794
|
grid: { horizontal: true },
|
|
3156
3795
|
borderRadius: 4,
|
|
3157
3796
|
slots: {
|
|
@@ -3229,7 +3868,7 @@ function BarChart({ series, colors: colors3, ...props }) {
|
|
|
3229
3868
|
}
|
|
3230
3869
|
);
|
|
3231
3870
|
}
|
|
3232
|
-
function PieChart({ series, colors:
|
|
3871
|
+
function PieChart({ series, colors: colors5, ...props }) {
|
|
3233
3872
|
var _a, _b, _c, _d;
|
|
3234
3873
|
const theme = styles.useTheme();
|
|
3235
3874
|
const chart = theme.palette.chart;
|
|
@@ -3246,7 +3885,7 @@ function PieChart({ series, colors: colors3, ...props }) {
|
|
|
3246
3885
|
PieChart$1.PieChart,
|
|
3247
3886
|
{
|
|
3248
3887
|
series: modifiedSeries != null ? modifiedSeries : [],
|
|
3249
|
-
colors:
|
|
3888
|
+
colors: colors5 != null ? colors5 : seriesColors,
|
|
3250
3889
|
slotProps: {
|
|
3251
3890
|
legend: {
|
|
3252
3891
|
itemMarkWidth: 12,
|
|
@@ -3325,6 +3964,7 @@ exports.ListItemButton = ListItemButton;
|
|
|
3325
3964
|
exports.ListItemIcon = ListItemIcon;
|
|
3326
3965
|
exports.ListItemText = ListItemText;
|
|
3327
3966
|
exports.ListSubheader = ListSubheader;
|
|
3967
|
+
exports.Logo = Logo;
|
|
3328
3968
|
exports.Menu = Menu;
|
|
3329
3969
|
exports.MenuItem = MenuItem;
|
|
3330
3970
|
exports.MenuList = MenuList;
|
|
@@ -3360,7 +4000,6 @@ exports.ToggleButtonGroup = ToggleButtonGroup;
|
|
|
3360
4000
|
exports.Toolbar = Toolbar;
|
|
3361
4001
|
exports.Tooltip = Tooltip;
|
|
3362
4002
|
exports.Typography = Typography;
|
|
3363
|
-
exports.alkemyPlusPreset = alkemyPlusPreset;
|
|
3364
4003
|
exports.alpha = alpha;
|
|
3365
4004
|
exports.avatarColors = avatarColors;
|
|
3366
4005
|
exports.bg = bg;
|
|
@@ -3378,7 +4017,9 @@ exports.focusRings = focusRings;
|
|
|
3378
4017
|
exports.fontFamily = fontFamily;
|
|
3379
4018
|
exports.fontSize = fontSize;
|
|
3380
4019
|
exports.fontWeight = fontWeight;
|
|
3381
|
-
exports.
|
|
4020
|
+
exports.forestAgencyPreset = forestAgencyPreset;
|
|
4021
|
+
exports.forestExternalPreset = forestExternalPreset;
|
|
4022
|
+
exports.forestInternalPreset = forestInternalPreset;
|
|
3382
4023
|
exports.forestTheme = forestTheme;
|
|
3383
4024
|
exports.forestThemeOptions = forestThemeOptions;
|
|
3384
4025
|
exports.getAvailablePresets = getAvailablePresets;
|