@m4l/graphics 0.0.19 → 0.0.20
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/index.js +5 -1
- package/dist/lib/theme/typography.d.ts +1 -2
- package/dist/lib/utils/getFontValue.d.ts +1 -1
- package/dist/theme/defaultThemeOptions.js +32 -0
- package/dist/theme/{index.js → overrides.js} +14 -319
- package/dist/theme/palette.js +133 -0
- package/dist/theme/shadows.js +65 -0
- package/dist/theme/typography.js +87 -0
- package/dist/utils/index.js +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -8,7 +8,8 @@ export { u as useIsMountedRef, a as useOffSetTop } from "./hooks/index.js";
|
|
|
8
8
|
export { u as useLocales } from "./hooks/useLocales/index.js";
|
|
9
9
|
export { u as useHostTheme } from "./hooks/useHostTheme/index.js";
|
|
10
10
|
export { Controller, useFormContext, useWatch } from "react-hook-form";
|
|
11
|
-
export { d as defaultThemeOptions
|
|
11
|
+
export { d as defaultThemeOptions } from "./theme/defaultThemeOptions.js";
|
|
12
|
+
export { f as fnComponentsOverrides } from "./theme/overrides.js";
|
|
12
13
|
import "@mui/material/styles";
|
|
13
14
|
import "@mui/material";
|
|
14
15
|
import "react/jsx-runtime";
|
|
@@ -22,4 +23,7 @@ import "./react-helmet-async-react-fast-compare.js";
|
|
|
22
23
|
import "./react-helmet-async-invariant.js";
|
|
23
24
|
import "./react-helmet-async-shallowequal.js";
|
|
24
25
|
import "@mui/material/useMediaQuery";
|
|
26
|
+
import "./theme/typography.js";
|
|
25
27
|
import "./utils/index.js";
|
|
28
|
+
import "./theme/palette.js";
|
|
29
|
+
import "./theme/shadows.js";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
declare const typography: {
|
|
1
|
+
export declare const typography: {
|
|
2
2
|
readonly fontFamily: "Public Sans, sans-serif";
|
|
3
3
|
readonly fontWeightRegular: 400;
|
|
4
4
|
readonly fontWeightMedium: 600;
|
|
@@ -130,4 +130,3 @@ declare const typography: {
|
|
|
130
130
|
readonly textTransform: "capitalize";
|
|
131
131
|
};
|
|
132
132
|
};
|
|
133
|
-
export default typography;
|
|
@@ -16,7 +16,7 @@ export declare function responsiveFontSizes({ sm, md, lg }: {
|
|
|
16
16
|
fontSize: string;
|
|
17
17
|
};
|
|
18
18
|
};
|
|
19
|
-
export
|
|
19
|
+
export declare function GetFontValue(variant: Variant): {
|
|
20
20
|
fontSize: number;
|
|
21
21
|
lineHeight: number;
|
|
22
22
|
fontWeight: import("csstype").Property.FontWeight | undefined;
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { alpha } from "@mui/material/styles";
|
|
2
|
+
import { t as typography } from "./typography.js";
|
|
3
|
+
import { p as palette, G as GREY } from "./palette.js";
|
|
4
|
+
import { s as shadows, c as customShadows } from "./shadows.js";
|
|
5
|
+
import { g as getColorPresets } from "../utils/index.js";
|
|
6
|
+
const defaultThemeOptions = {
|
|
7
|
+
typography,
|
|
8
|
+
shadows: shadows.light,
|
|
9
|
+
customShadows: {
|
|
10
|
+
...customShadows.light,
|
|
11
|
+
primary: `0 8px 16px 0 ${alpha(getColorPresets("default").main, 0.24)}`
|
|
12
|
+
},
|
|
13
|
+
palette: {
|
|
14
|
+
...palette.light,
|
|
15
|
+
primary: {
|
|
16
|
+
lighter: "#283829",
|
|
17
|
+
light: "#26372b",
|
|
18
|
+
main: "#00AB55",
|
|
19
|
+
dark: "#007B55",
|
|
20
|
+
darker: "#005249",
|
|
21
|
+
LightSelected: "#EBF9F1",
|
|
22
|
+
LightSelectedHover: "#D6F2E3",
|
|
23
|
+
DarkSelected: "#142827",
|
|
24
|
+
DarkSelectedHover: "#12342B"
|
|
25
|
+
},
|
|
26
|
+
text: { primary: GREY[800], secondary: GREY[700], disabled: GREY[500] },
|
|
27
|
+
secondary: {
|
|
28
|
+
main: "#34ac4e"
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
};
|
|
32
|
+
export { defaultThemeOptions as d };
|
|
@@ -1,310 +1,5 @@
|
|
|
1
|
-
import { alpha } from "@mui/material
|
|
2
|
-
import {
|
|
3
|
-
import { alpha as alpha$1 } from "@mui/material";
|
|
4
|
-
const FONT_PRIMARY = "Public Sans, sans-serif";
|
|
5
|
-
const typography = {
|
|
6
|
-
fontFamily: FONT_PRIMARY,
|
|
7
|
-
fontWeightRegular: 400,
|
|
8
|
-
fontWeightMedium: 600,
|
|
9
|
-
fontWeightBold: 700,
|
|
10
|
-
h1: {
|
|
11
|
-
fontWeight: 700,
|
|
12
|
-
lineHeight: 80 / 64,
|
|
13
|
-
fontSize: pxToRem(40),
|
|
14
|
-
letterSpacing: 2,
|
|
15
|
-
...responsiveFontSizes({ sm: 52, md: 58, lg: 64 })
|
|
16
|
-
},
|
|
17
|
-
h2: {
|
|
18
|
-
fontWeight: 700,
|
|
19
|
-
lineHeight: 64 / 48,
|
|
20
|
-
fontSize: pxToRem(32),
|
|
21
|
-
...responsiveFontSizes({ sm: 40, md: 44, lg: 48 })
|
|
22
|
-
},
|
|
23
|
-
h3: {
|
|
24
|
-
fontWeight: 700,
|
|
25
|
-
lineHeight: 1.5,
|
|
26
|
-
fontSize: pxToRem(24),
|
|
27
|
-
...responsiveFontSizes({ sm: 26, md: 30, lg: 32 })
|
|
28
|
-
},
|
|
29
|
-
h4: {
|
|
30
|
-
fontWeight: 700,
|
|
31
|
-
lineHeight: 1.5,
|
|
32
|
-
fontSize: pxToRem(20),
|
|
33
|
-
...responsiveFontSizes({ sm: 20, md: 24, lg: 24 })
|
|
34
|
-
},
|
|
35
|
-
h5: {
|
|
36
|
-
fontWeight: 700,
|
|
37
|
-
lineHeight: 1.5,
|
|
38
|
-
fontSize: pxToRem(18),
|
|
39
|
-
...responsiveFontSizes({ sm: 19, md: 20, lg: 20 })
|
|
40
|
-
},
|
|
41
|
-
h6: {
|
|
42
|
-
fontWeight: 700,
|
|
43
|
-
lineHeight: 28 / 18,
|
|
44
|
-
fontSize: pxToRem(17),
|
|
45
|
-
...responsiveFontSizes({ sm: 18, md: 18, lg: 18 })
|
|
46
|
-
},
|
|
47
|
-
subtitle1: {
|
|
48
|
-
fontWeight: 600,
|
|
49
|
-
lineHeight: 1.5,
|
|
50
|
-
fontSize: pxToRem(14)
|
|
51
|
-
},
|
|
52
|
-
subtitle2: {
|
|
53
|
-
fontWeight: 600,
|
|
54
|
-
lineHeight: 1.5,
|
|
55
|
-
fontSize: pxToRem(12)
|
|
56
|
-
},
|
|
57
|
-
body0: {
|
|
58
|
-
lineHeight: 1.5,
|
|
59
|
-
fontWeight: 400,
|
|
60
|
-
fontSize: pxToRem(16)
|
|
61
|
-
},
|
|
62
|
-
body1: {
|
|
63
|
-
lineHeight: 1.5,
|
|
64
|
-
fontWeight: 400,
|
|
65
|
-
fontSize: pxToRem(14)
|
|
66
|
-
},
|
|
67
|
-
body2: {
|
|
68
|
-
lineHeight: 1.5,
|
|
69
|
-
fontWeight: 400,
|
|
70
|
-
fontSize: pxToRem(12)
|
|
71
|
-
},
|
|
72
|
-
caption: {
|
|
73
|
-
lineHeight: 1.5,
|
|
74
|
-
fontSize: pxToRem(11)
|
|
75
|
-
},
|
|
76
|
-
overline: {
|
|
77
|
-
fontWeight: 700,
|
|
78
|
-
lineHeight: 1.5,
|
|
79
|
-
fontSize: pxToRem(12),
|
|
80
|
-
textTransform: "uppercase"
|
|
81
|
-
},
|
|
82
|
-
button: {
|
|
83
|
-
fontWeight: 700,
|
|
84
|
-
lineHeight: 24 / 14,
|
|
85
|
-
fontSize: pxToRem(14),
|
|
86
|
-
textTransform: "capitalize"
|
|
87
|
-
}
|
|
88
|
-
};
|
|
89
|
-
function createGradient(color1, color2) {
|
|
90
|
-
return `linear-gradient(to bottom, ${color1}, ${color2})`;
|
|
91
|
-
}
|
|
92
|
-
const PRIMARY = {
|
|
93
|
-
lighter: "#C8FACD",
|
|
94
|
-
light: "#5BE584",
|
|
95
|
-
main: "#00AB55",
|
|
96
|
-
dark: "#007B55",
|
|
97
|
-
darker: "#005249"
|
|
98
|
-
};
|
|
99
|
-
const SECONDARY = {
|
|
100
|
-
lighter: "#D6E4FF",
|
|
101
|
-
light: "#84A9FF",
|
|
102
|
-
main: "#3366FF",
|
|
103
|
-
dark: "#1939B7",
|
|
104
|
-
darker: "#091A7A"
|
|
105
|
-
};
|
|
106
|
-
const INFO = {
|
|
107
|
-
lighter: "#D0F2FF",
|
|
108
|
-
light: "#74CAFF",
|
|
109
|
-
main: "#1890FF",
|
|
110
|
-
dark: "#0C53B7",
|
|
111
|
-
darker: "#04297A"
|
|
112
|
-
};
|
|
113
|
-
const SUCCESS = {
|
|
114
|
-
lighter: "#E9FCD4",
|
|
115
|
-
light: "#AAF27F",
|
|
116
|
-
main: "#54D62C",
|
|
117
|
-
dark: "#229A16",
|
|
118
|
-
darker: "#08660D"
|
|
119
|
-
};
|
|
120
|
-
const WARNING = {
|
|
121
|
-
lighter: "#FFF7CD",
|
|
122
|
-
light: "#FFE16A",
|
|
123
|
-
main: "#FFC107",
|
|
124
|
-
dark: "#B78103",
|
|
125
|
-
darker: "#7A4F01"
|
|
126
|
-
};
|
|
127
|
-
const ERROR = {
|
|
128
|
-
lighter: "#FFE7D9",
|
|
129
|
-
light: "#FFA48D",
|
|
130
|
-
main: "#FF4842",
|
|
131
|
-
dark: "#B72136",
|
|
132
|
-
darker: "#7A0C2E"
|
|
133
|
-
};
|
|
134
|
-
const GREY = {
|
|
135
|
-
0: "#FFFFFF",
|
|
136
|
-
100: "#F9FAFB",
|
|
137
|
-
200: "#F4F6F8",
|
|
138
|
-
300: "#DFE3E8",
|
|
139
|
-
400: "#C4CDD5",
|
|
140
|
-
500: "#919EAB",
|
|
141
|
-
600: "#637381",
|
|
142
|
-
700: "#454F5B",
|
|
143
|
-
800: "#212B36",
|
|
144
|
-
900: "#161C24",
|
|
145
|
-
5008: alpha("#919EAB", 0.08),
|
|
146
|
-
50012: alpha("#919EAB", 0.12),
|
|
147
|
-
50016: alpha("#919EAB", 0.16),
|
|
148
|
-
50024: alpha("#919EAB", 0.24),
|
|
149
|
-
50032: alpha("#919EAB", 0.32),
|
|
150
|
-
50048: alpha("#919EAB", 0.48),
|
|
151
|
-
50056: alpha("#919EAB", 0.56),
|
|
152
|
-
50080: alpha("#919EAB", 0.8)
|
|
153
|
-
};
|
|
154
|
-
const GRADIENTS = {
|
|
155
|
-
primary: createGradient(PRIMARY.light, PRIMARY.main),
|
|
156
|
-
info: createGradient(INFO.light, INFO.main),
|
|
157
|
-
success: createGradient(SUCCESS.light, SUCCESS.main),
|
|
158
|
-
warning: createGradient(WARNING.light, WARNING.main),
|
|
159
|
-
error: createGradient(ERROR.light, ERROR.main)
|
|
160
|
-
};
|
|
161
|
-
const CHART_COLORS = {
|
|
162
|
-
violet: ["#826AF9", "#9E86FF", "#D0AEFF", "#F7D2FF"],
|
|
163
|
-
blue: ["#2D99FF", "#83CFFF", "#A5F3FF", "#CCFAFF"],
|
|
164
|
-
green: ["#2CD9C5", "#60F1C8", "#A4F7CC", "#C0F2DC"],
|
|
165
|
-
yellow: ["#FFE700", "#FFEF5A", "#FFF7AE", "#FFF3D6"],
|
|
166
|
-
red: ["#FF6C40", "#FF8F6D", "#FFBD98", "#FFF2D4"]
|
|
167
|
-
};
|
|
168
|
-
const COMMON = {
|
|
169
|
-
common: { black: "#000", white: "#fff" },
|
|
170
|
-
primary: { ...PRIMARY, contrastText: "#fff" },
|
|
171
|
-
secondary: { ...SECONDARY, contrastText: "#fff" },
|
|
172
|
-
info: { ...INFO, contrastText: "#fff" },
|
|
173
|
-
success: { ...SUCCESS, contrastText: GREY[800] },
|
|
174
|
-
warning: { ...WARNING, contrastText: GREY[800] },
|
|
175
|
-
error: { ...ERROR, contrastText: "#fff" },
|
|
176
|
-
grey: GREY,
|
|
177
|
-
gradients: GRADIENTS,
|
|
178
|
-
chart: CHART_COLORS,
|
|
179
|
-
divider: GREY[50024],
|
|
180
|
-
action: {
|
|
181
|
-
hover: GREY[5008],
|
|
182
|
-
selected: GREY[50016],
|
|
183
|
-
disabled: GREY[50080],
|
|
184
|
-
disabledBackground: GREY[50024],
|
|
185
|
-
focus: GREY[50024],
|
|
186
|
-
hoverOpacity: 0.08,
|
|
187
|
-
disabledOpacity: 0.48
|
|
188
|
-
}
|
|
189
|
-
};
|
|
190
|
-
const palette = {
|
|
191
|
-
light: {
|
|
192
|
-
...COMMON,
|
|
193
|
-
mode: "light",
|
|
194
|
-
text: { primary: GREY[800], secondary: GREY[700], disabled: GREY[500] },
|
|
195
|
-
background: {
|
|
196
|
-
paper: "#fff",
|
|
197
|
-
default: "#fff",
|
|
198
|
-
neutral: GREY[200],
|
|
199
|
-
autocomplete: GREY[100],
|
|
200
|
-
header: "#F6F7F9"
|
|
201
|
-
},
|
|
202
|
-
action: { active: GREY[600], ...COMMON.action },
|
|
203
|
-
grid: { sectionHeader: "#F6F7F9", divider: "#EDEFF2", rowHover: "#FAFBFC" }
|
|
204
|
-
},
|
|
205
|
-
dark: {
|
|
206
|
-
...COMMON,
|
|
207
|
-
mode: "dark",
|
|
208
|
-
text: { primary: "#fff", secondary: GREY[500], disabled: GREY[600] },
|
|
209
|
-
background: {
|
|
210
|
-
paper: GREY[800],
|
|
211
|
-
default: GREY[900],
|
|
212
|
-
neutral: GREY[50016],
|
|
213
|
-
autocomplete: GREY[800],
|
|
214
|
-
header: "#29313A"
|
|
215
|
-
},
|
|
216
|
-
action: { active: GREY[500], ...COMMON.action },
|
|
217
|
-
grid: { sectionHeader: "#29313A", divider: "#3E464F", rowHover: "#1F262F" }
|
|
218
|
-
}
|
|
219
|
-
};
|
|
220
|
-
const LIGHT_MODE = palette.light.grey[500];
|
|
221
|
-
const DARK_MODE = "#000000";
|
|
222
|
-
const createShadow = (color) => {
|
|
223
|
-
const transparent1 = alpha(color, 0.2);
|
|
224
|
-
const transparent2 = alpha(color, 0.14);
|
|
225
|
-
const transparent3 = alpha(color, 0.12);
|
|
226
|
-
return [
|
|
227
|
-
"none",
|
|
228
|
-
`0px 2px 1px -1px ${transparent1},0px 1px 1px 0px ${transparent2},0px 1px 3px 0px ${transparent3}`,
|
|
229
|
-
`0px 3px 1px -2px ${transparent1},0px 2px 2px 0px ${transparent2},0px 1px 5px 0px ${transparent3}`,
|
|
230
|
-
`0px 3px 3px -2px ${transparent1},0px 3px 4px 0px ${transparent2},0px 1px 8px 0px ${transparent3}`,
|
|
231
|
-
`0px 2px 4px -1px ${transparent1},0px 4px 5px 0px ${transparent2},0px 1px 10px 0px ${transparent3}`,
|
|
232
|
-
`0px 3px 5px -1px ${transparent1},0px 5px 8px 0px ${transparent2},0px 1px 14px 0px ${transparent3}`,
|
|
233
|
-
`0px 3px 5px -1px ${transparent1},0px 6px 10px 0px ${transparent2},0px 1px 18px 0px ${transparent3}`,
|
|
234
|
-
`0px 4px 5px -2px ${transparent1},0px 7px 10px 1px ${transparent2},0px 2px 16px 1px ${transparent3}`,
|
|
235
|
-
`0px 5px 5px -3px ${transparent1},0px 8px 10px 1px ${transparent2},0px 3px 14px 2px ${transparent3}`,
|
|
236
|
-
`0px 5px 6px -3px ${transparent1},0px 9px 12px 1px ${transparent2},0px 3px 16px 2px ${transparent3}`,
|
|
237
|
-
`0px 6px 6px -3px ${transparent1},0px 10px 14px 1px ${transparent2},0px 4px 18px 3px ${transparent3}`,
|
|
238
|
-
`0px 6px 7px -4px ${transparent1},0px 11px 15px 1px ${transparent2},0px 4px 20px 3px ${transparent3}`,
|
|
239
|
-
`0px 7px 8px -4px ${transparent1},0px 12px 17px 2px ${transparent2},0px 5px 22px 4px ${transparent3}`,
|
|
240
|
-
`0px 7px 8px -4px ${transparent1},0px 13px 19px 2px ${transparent2},0px 5px 24px 4px ${transparent3}`,
|
|
241
|
-
`0px 7px 9px -4px ${transparent1},0px 14px 21px 2px ${transparent2},0px 5px 26px 4px ${transparent3}`,
|
|
242
|
-
`0px 8px 9px -5px ${transparent1},0px 15px 22px 2px ${transparent2},0px 6px 28px 5px ${transparent3}`,
|
|
243
|
-
`0px 8px 10px -5px ${transparent1},0px 16px 24px 2px ${transparent2},0px 6px 30px 5px ${transparent3}`,
|
|
244
|
-
`0px 8px 11px -5px ${transparent1},0px 17px 26px 2px ${transparent2},0px 6px 32px 5px ${transparent3}`,
|
|
245
|
-
`0px 9px 11px -5px ${transparent1},0px 18px 28px 2px ${transparent2},0px 7px 34px 6px ${transparent3}`,
|
|
246
|
-
`0px 9px 12px -6px ${transparent1},0px 19px 29px 2px ${transparent2},0px 7px 36px 6px ${transparent3}`,
|
|
247
|
-
`0px 10px 13px -6px ${transparent1},0px 20px 31px 3px ${transparent2},0px 8px 38px 7px ${transparent3}`,
|
|
248
|
-
`0px 10px 13px -6px ${transparent1},0px 21px 33px 3px ${transparent2},0px 8px 40px 7px ${transparent3}`,
|
|
249
|
-
`0px 10px 14px -6px ${transparent1},0px 22px 35px 3px ${transparent2},0px 8px 42px 7px ${transparent3}`,
|
|
250
|
-
`0px 11px 14px -7px ${transparent1},0px 23px 36px 3px ${transparent2},0px 9px 44px 8px ${transparent3}`,
|
|
251
|
-
`0px 11px 15px -7px ${transparent1},0px 24px 38px 3px ${transparent2},0px 9px 46px 8px ${transparent3}`
|
|
252
|
-
];
|
|
253
|
-
};
|
|
254
|
-
const createCustomShadow = (color) => {
|
|
255
|
-
const transparent = alpha(color, 0.16);
|
|
256
|
-
return {
|
|
257
|
-
z1: `0 1px 2px 0 ${transparent}`,
|
|
258
|
-
z8: `0 8px 16px 0 ${transparent}`,
|
|
259
|
-
z12: `0 12px 24px -4px ${transparent}`,
|
|
260
|
-
z16: `0 16px 32px -4px ${transparent}`,
|
|
261
|
-
z20: `0 20px 40px -4px ${transparent}`,
|
|
262
|
-
z24: `0 24px 48px 0 ${transparent}`,
|
|
263
|
-
primary: `0 8px 16px 0 ${alpha(palette.light.primary.main, 0.24)}`,
|
|
264
|
-
info: `0 8px 16px 0 ${alpha(palette.light.info.main, 0.24)}`,
|
|
265
|
-
secondary: `0 8px 16px 0 ${alpha(palette.light.secondary.main, 0.24)}`,
|
|
266
|
-
success: `0 8px 16px 0 ${alpha(palette.light.success.main, 0.24)}`,
|
|
267
|
-
warning: `0 8px 16px 0 ${alpha(palette.light.warning.main, 0.24)}`,
|
|
268
|
-
error: `0 8px 16px 0 ${alpha(palette.light.error.main, 0.24)}`,
|
|
269
|
-
card: `0 0 2px 0 ${alpha(color, 0.2)}, 0 12px 24px -4px ${alpha(color, 0.12)}`,
|
|
270
|
-
dialog: `-40px 40px 80px -8px ${alpha(palette.light.common.black, 0.24)}`,
|
|
271
|
-
dropdown: `0 0 2px 0 ${alpha(color, 0.24)}, -20px 20px 40px -4px ${alpha(color, 0.24)}`
|
|
272
|
-
};
|
|
273
|
-
};
|
|
274
|
-
const customShadows = {
|
|
275
|
-
light: createCustomShadow(LIGHT_MODE),
|
|
276
|
-
dark: createCustomShadow(DARK_MODE)
|
|
277
|
-
};
|
|
278
|
-
const shadows = {
|
|
279
|
-
light: createShadow(LIGHT_MODE),
|
|
280
|
-
dark: createShadow(DARK_MODE)
|
|
281
|
-
};
|
|
282
|
-
const defaultThemeOptions = {
|
|
283
|
-
typography,
|
|
284
|
-
shadows: shadows.light,
|
|
285
|
-
customShadows: {
|
|
286
|
-
...customShadows.light,
|
|
287
|
-
primary: `0 8px 16px 0 ${alpha(getColorPresets("default").main, 0.24)}`
|
|
288
|
-
},
|
|
289
|
-
palette: {
|
|
290
|
-
...palette.light,
|
|
291
|
-
primary: {
|
|
292
|
-
lighter: "#283829",
|
|
293
|
-
light: "#26372b",
|
|
294
|
-
main: "#00AB55",
|
|
295
|
-
dark: "#007B55",
|
|
296
|
-
darker: "#005249",
|
|
297
|
-
LightSelected: "#EBF9F1",
|
|
298
|
-
LightSelectedHover: "#D6F2E3",
|
|
299
|
-
DarkSelected: "#142827",
|
|
300
|
-
DarkSelectedHover: "#12342B"
|
|
301
|
-
},
|
|
302
|
-
text: { primary: GREY[800], secondary: GREY[700], disabled: GREY[500] },
|
|
303
|
-
secondary: {
|
|
304
|
-
main: "#34ac4e"
|
|
305
|
-
}
|
|
306
|
-
}
|
|
307
|
-
};
|
|
1
|
+
import { alpha } from "@mui/material";
|
|
2
|
+
import { alpha as alpha$1 } from "@mui/material/styles";
|
|
308
3
|
function Avatar(theme) {
|
|
309
4
|
return {
|
|
310
5
|
MuiAvatar: {
|
|
@@ -837,10 +532,10 @@ function Drawer(theme) {
|
|
|
837
532
|
modal: {
|
|
838
533
|
'&[role="presentation"]': {
|
|
839
534
|
"& .MuiDrawer-paperAnchorLeft": {
|
|
840
|
-
boxShadow: `8px 24px 24px 12px ${alpha
|
|
535
|
+
boxShadow: `8px 24px 24px 12px ${alpha(theme.palette.grey[900], isLight ? 0.16 : 0.48)}`
|
|
841
536
|
},
|
|
842
537
|
"& .MuiDrawer-paperAnchorRight": {
|
|
843
|
-
boxShadow: `-8px 24px 24px 12px ${alpha
|
|
538
|
+
boxShadow: `-8px 24px 24px 12px ${alpha(theme.palette.grey[900], isLight ? 0.16 : 0.48)}`
|
|
844
539
|
}
|
|
845
540
|
}
|
|
846
541
|
}
|
|
@@ -1127,8 +822,8 @@ function Skeleton(theme) {
|
|
|
1127
822
|
};
|
|
1128
823
|
}
|
|
1129
824
|
function Backdrop(theme) {
|
|
1130
|
-
const varLow = alpha(theme.palette.grey[900], 0.48);
|
|
1131
|
-
const varHigh = alpha(theme.palette.grey[900], 1);
|
|
825
|
+
const varLow = alpha$1(theme.palette.grey[900], 0.48);
|
|
826
|
+
const varHigh = alpha$1(theme.palette.grey[900], 1);
|
|
1132
827
|
return {
|
|
1133
828
|
MuiBackdrop: {
|
|
1134
829
|
styleOverrides: {
|
|
@@ -1307,9 +1002,9 @@ function Pagination(theme) {
|
|
|
1307
1002
|
textPrimary: {
|
|
1308
1003
|
"&.Mui-selected": {
|
|
1309
1004
|
color: theme.palette.primary.main,
|
|
1310
|
-
backgroundColor: alpha(theme.palette.primary.main, 0.08),
|
|
1005
|
+
backgroundColor: alpha$1(theme.palette.primary.main, 0.08),
|
|
1311
1006
|
"&:hover, &.Mui-focusVisible": {
|
|
1312
|
-
backgroundColor: `${alpha(theme.palette.primary.main, 0.24)} !important`
|
|
1007
|
+
backgroundColor: `${alpha$1(theme.palette.primary.main, 0.24)} !important`
|
|
1313
1008
|
}
|
|
1314
1009
|
}
|
|
1315
1010
|
},
|
|
@@ -1318,8 +1013,8 @@ function Pagination(theme) {
|
|
|
1318
1013
|
},
|
|
1319
1014
|
outlinedPrimary: {
|
|
1320
1015
|
"&.Mui-selected": {
|
|
1321
|
-
backgroundColor: alpha(theme.palette.primary.main, 0.08),
|
|
1322
|
-
border: `1px solid ${alpha(theme.palette.primary.main, 0.24)}`
|
|
1016
|
+
backgroundColor: alpha$1(theme.palette.primary.main, 0.08),
|
|
1017
|
+
border: `1px solid ${alpha$1(theme.palette.primary.main, 0.24)}`
|
|
1323
1018
|
}
|
|
1324
1019
|
}
|
|
1325
1020
|
}
|
|
@@ -1454,11 +1149,11 @@ const style = (theme, color) => ({
|
|
|
1454
1149
|
props: { color },
|
|
1455
1150
|
style: {
|
|
1456
1151
|
"&:hover": {
|
|
1457
|
-
borderColor: alpha(theme.palette[color].main, 0.48),
|
|
1458
|
-
backgroundColor: alpha(theme.palette[color].main, theme.palette.action.hoverOpacity)
|
|
1152
|
+
borderColor: alpha$1(theme.palette[color].main, 0.48),
|
|
1153
|
+
backgroundColor: alpha$1(theme.palette[color].main, theme.palette.action.hoverOpacity)
|
|
1459
1154
|
},
|
|
1460
1155
|
"&.Mui-selected": {
|
|
1461
|
-
borderColor: alpha(theme.palette[color].main, 0.48)
|
|
1156
|
+
borderColor: alpha$1(theme.palette[color].main, 0.48)
|
|
1462
1157
|
}
|
|
1463
1158
|
}
|
|
1464
1159
|
});
|
|
@@ -1550,4 +1245,4 @@ function LoadingButton(theme) {
|
|
|
1550
1245
|
function fnComponentsOverrides(theme) {
|
|
1551
1246
|
return Object.assign(Fab(theme), Tabs(theme), Card(theme), Menu(theme), Link(theme), Input(theme), InputLabel(), Radio(theme), Badge(), List(theme), Table(theme), Paper(theme), Switch(theme), Button(theme), IconButton(theme), Dialog(theme), Avatar(theme), Slider(theme), Drawer(theme), Stepper(theme), Tooltip(theme), Popover(theme), SvgIcon(), Checkbox(theme), DataGrid(theme), Skeleton(theme), Timeline(theme), Backdrop(theme), Progress(theme), Accordion(theme), Typography(theme), Pagination(theme), ButtonGroup(theme), Breadcrumbs(theme), CssBaseline(), Autocomplete(theme), ControlLabel(theme), ToggleButton(theme), LoadingButton(theme));
|
|
1552
1247
|
}
|
|
1553
|
-
export {
|
|
1248
|
+
export { fnComponentsOverrides as f };
|
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
import { alpha } from "@mui/material/styles";
|
|
2
|
+
function createGradient(color1, color2) {
|
|
3
|
+
return `linear-gradient(to bottom, ${color1}, ${color2})`;
|
|
4
|
+
}
|
|
5
|
+
const PRIMARY = {
|
|
6
|
+
lighter: "#C8FACD",
|
|
7
|
+
light: "#5BE584",
|
|
8
|
+
main: "#00AB55",
|
|
9
|
+
dark: "#007B55",
|
|
10
|
+
darker: "#005249"
|
|
11
|
+
};
|
|
12
|
+
const SECONDARY = {
|
|
13
|
+
lighter: "#D6E4FF",
|
|
14
|
+
light: "#84A9FF",
|
|
15
|
+
main: "#3366FF",
|
|
16
|
+
dark: "#1939B7",
|
|
17
|
+
darker: "#091A7A"
|
|
18
|
+
};
|
|
19
|
+
const INFO = {
|
|
20
|
+
lighter: "#D0F2FF",
|
|
21
|
+
light: "#74CAFF",
|
|
22
|
+
main: "#1890FF",
|
|
23
|
+
dark: "#0C53B7",
|
|
24
|
+
darker: "#04297A"
|
|
25
|
+
};
|
|
26
|
+
const SUCCESS = {
|
|
27
|
+
lighter: "#E9FCD4",
|
|
28
|
+
light: "#AAF27F",
|
|
29
|
+
main: "#54D62C",
|
|
30
|
+
dark: "#229A16",
|
|
31
|
+
darker: "#08660D"
|
|
32
|
+
};
|
|
33
|
+
const WARNING = {
|
|
34
|
+
lighter: "#FFF7CD",
|
|
35
|
+
light: "#FFE16A",
|
|
36
|
+
main: "#FFC107",
|
|
37
|
+
dark: "#B78103",
|
|
38
|
+
darker: "#7A4F01"
|
|
39
|
+
};
|
|
40
|
+
const ERROR = {
|
|
41
|
+
lighter: "#FFE7D9",
|
|
42
|
+
light: "#FFA48D",
|
|
43
|
+
main: "#FF4842",
|
|
44
|
+
dark: "#B72136",
|
|
45
|
+
darker: "#7A0C2E"
|
|
46
|
+
};
|
|
47
|
+
const GREY = {
|
|
48
|
+
0: "#FFFFFF",
|
|
49
|
+
100: "#F9FAFB",
|
|
50
|
+
200: "#F4F6F8",
|
|
51
|
+
300: "#DFE3E8",
|
|
52
|
+
400: "#C4CDD5",
|
|
53
|
+
500: "#919EAB",
|
|
54
|
+
600: "#637381",
|
|
55
|
+
700: "#454F5B",
|
|
56
|
+
800: "#212B36",
|
|
57
|
+
900: "#161C24",
|
|
58
|
+
5008: alpha("#919EAB", 0.08),
|
|
59
|
+
50012: alpha("#919EAB", 0.12),
|
|
60
|
+
50016: alpha("#919EAB", 0.16),
|
|
61
|
+
50024: alpha("#919EAB", 0.24),
|
|
62
|
+
50032: alpha("#919EAB", 0.32),
|
|
63
|
+
50048: alpha("#919EAB", 0.48),
|
|
64
|
+
50056: alpha("#919EAB", 0.56),
|
|
65
|
+
50080: alpha("#919EAB", 0.8)
|
|
66
|
+
};
|
|
67
|
+
const GRADIENTS = {
|
|
68
|
+
primary: createGradient(PRIMARY.light, PRIMARY.main),
|
|
69
|
+
info: createGradient(INFO.light, INFO.main),
|
|
70
|
+
success: createGradient(SUCCESS.light, SUCCESS.main),
|
|
71
|
+
warning: createGradient(WARNING.light, WARNING.main),
|
|
72
|
+
error: createGradient(ERROR.light, ERROR.main)
|
|
73
|
+
};
|
|
74
|
+
const CHART_COLORS = {
|
|
75
|
+
violet: ["#826AF9", "#9E86FF", "#D0AEFF", "#F7D2FF"],
|
|
76
|
+
blue: ["#2D99FF", "#83CFFF", "#A5F3FF", "#CCFAFF"],
|
|
77
|
+
green: ["#2CD9C5", "#60F1C8", "#A4F7CC", "#C0F2DC"],
|
|
78
|
+
yellow: ["#FFE700", "#FFEF5A", "#FFF7AE", "#FFF3D6"],
|
|
79
|
+
red: ["#FF6C40", "#FF8F6D", "#FFBD98", "#FFF2D4"]
|
|
80
|
+
};
|
|
81
|
+
const COMMON = {
|
|
82
|
+
common: { black: "#000", white: "#fff" },
|
|
83
|
+
primary: { ...PRIMARY, contrastText: "#fff" },
|
|
84
|
+
secondary: { ...SECONDARY, contrastText: "#fff" },
|
|
85
|
+
info: { ...INFO, contrastText: "#fff" },
|
|
86
|
+
success: { ...SUCCESS, contrastText: GREY[800] },
|
|
87
|
+
warning: { ...WARNING, contrastText: GREY[800] },
|
|
88
|
+
error: { ...ERROR, contrastText: "#fff" },
|
|
89
|
+
grey: GREY,
|
|
90
|
+
gradients: GRADIENTS,
|
|
91
|
+
chart: CHART_COLORS,
|
|
92
|
+
divider: GREY[50024],
|
|
93
|
+
action: {
|
|
94
|
+
hover: GREY[5008],
|
|
95
|
+
selected: GREY[50016],
|
|
96
|
+
disabled: GREY[50080],
|
|
97
|
+
disabledBackground: GREY[50024],
|
|
98
|
+
focus: GREY[50024],
|
|
99
|
+
hoverOpacity: 0.08,
|
|
100
|
+
disabledOpacity: 0.48
|
|
101
|
+
}
|
|
102
|
+
};
|
|
103
|
+
const palette = {
|
|
104
|
+
light: {
|
|
105
|
+
...COMMON,
|
|
106
|
+
mode: "light",
|
|
107
|
+
text: { primary: GREY[800], secondary: GREY[700], disabled: GREY[500] },
|
|
108
|
+
background: {
|
|
109
|
+
paper: "#fff",
|
|
110
|
+
default: "#fff",
|
|
111
|
+
neutral: GREY[200],
|
|
112
|
+
autocomplete: GREY[100],
|
|
113
|
+
header: "#F6F7F9"
|
|
114
|
+
},
|
|
115
|
+
action: { active: GREY[600], ...COMMON.action },
|
|
116
|
+
grid: { sectionHeader: "#F6F7F9", divider: "#EDEFF2", rowHover: "#FAFBFC" }
|
|
117
|
+
},
|
|
118
|
+
dark: {
|
|
119
|
+
...COMMON,
|
|
120
|
+
mode: "dark",
|
|
121
|
+
text: { primary: "#fff", secondary: GREY[500], disabled: GREY[600] },
|
|
122
|
+
background: {
|
|
123
|
+
paper: GREY[800],
|
|
124
|
+
default: GREY[900],
|
|
125
|
+
neutral: GREY[50016],
|
|
126
|
+
autocomplete: GREY[800],
|
|
127
|
+
header: "#29313A"
|
|
128
|
+
},
|
|
129
|
+
action: { active: GREY[500], ...COMMON.action },
|
|
130
|
+
grid: { sectionHeader: "#29313A", divider: "#3E464F", rowHover: "#1F262F" }
|
|
131
|
+
}
|
|
132
|
+
};
|
|
133
|
+
export { GREY as G, palette as p };
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import { alpha } from "@mui/material/styles";
|
|
2
|
+
import { p as palette } from "./palette.js";
|
|
3
|
+
const LIGHT_MODE = palette.light.grey[500];
|
|
4
|
+
const DARK_MODE = "#000000";
|
|
5
|
+
const createShadow = (color) => {
|
|
6
|
+
const transparent1 = alpha(color, 0.2);
|
|
7
|
+
const transparent2 = alpha(color, 0.14);
|
|
8
|
+
const transparent3 = alpha(color, 0.12);
|
|
9
|
+
return [
|
|
10
|
+
"none",
|
|
11
|
+
`0px 2px 1px -1px ${transparent1},0px 1px 1px 0px ${transparent2},0px 1px 3px 0px ${transparent3}`,
|
|
12
|
+
`0px 3px 1px -2px ${transparent1},0px 2px 2px 0px ${transparent2},0px 1px 5px 0px ${transparent3}`,
|
|
13
|
+
`0px 3px 3px -2px ${transparent1},0px 3px 4px 0px ${transparent2},0px 1px 8px 0px ${transparent3}`,
|
|
14
|
+
`0px 2px 4px -1px ${transparent1},0px 4px 5px 0px ${transparent2},0px 1px 10px 0px ${transparent3}`,
|
|
15
|
+
`0px 3px 5px -1px ${transparent1},0px 5px 8px 0px ${transparent2},0px 1px 14px 0px ${transparent3}`,
|
|
16
|
+
`0px 3px 5px -1px ${transparent1},0px 6px 10px 0px ${transparent2},0px 1px 18px 0px ${transparent3}`,
|
|
17
|
+
`0px 4px 5px -2px ${transparent1},0px 7px 10px 1px ${transparent2},0px 2px 16px 1px ${transparent3}`,
|
|
18
|
+
`0px 5px 5px -3px ${transparent1},0px 8px 10px 1px ${transparent2},0px 3px 14px 2px ${transparent3}`,
|
|
19
|
+
`0px 5px 6px -3px ${transparent1},0px 9px 12px 1px ${transparent2},0px 3px 16px 2px ${transparent3}`,
|
|
20
|
+
`0px 6px 6px -3px ${transparent1},0px 10px 14px 1px ${transparent2},0px 4px 18px 3px ${transparent3}`,
|
|
21
|
+
`0px 6px 7px -4px ${transparent1},0px 11px 15px 1px ${transparent2},0px 4px 20px 3px ${transparent3}`,
|
|
22
|
+
`0px 7px 8px -4px ${transparent1},0px 12px 17px 2px ${transparent2},0px 5px 22px 4px ${transparent3}`,
|
|
23
|
+
`0px 7px 8px -4px ${transparent1},0px 13px 19px 2px ${transparent2},0px 5px 24px 4px ${transparent3}`,
|
|
24
|
+
`0px 7px 9px -4px ${transparent1},0px 14px 21px 2px ${transparent2},0px 5px 26px 4px ${transparent3}`,
|
|
25
|
+
`0px 8px 9px -5px ${transparent1},0px 15px 22px 2px ${transparent2},0px 6px 28px 5px ${transparent3}`,
|
|
26
|
+
`0px 8px 10px -5px ${transparent1},0px 16px 24px 2px ${transparent2},0px 6px 30px 5px ${transparent3}`,
|
|
27
|
+
`0px 8px 11px -5px ${transparent1},0px 17px 26px 2px ${transparent2},0px 6px 32px 5px ${transparent3}`,
|
|
28
|
+
`0px 9px 11px -5px ${transparent1},0px 18px 28px 2px ${transparent2},0px 7px 34px 6px ${transparent3}`,
|
|
29
|
+
`0px 9px 12px -6px ${transparent1},0px 19px 29px 2px ${transparent2},0px 7px 36px 6px ${transparent3}`,
|
|
30
|
+
`0px 10px 13px -6px ${transparent1},0px 20px 31px 3px ${transparent2},0px 8px 38px 7px ${transparent3}`,
|
|
31
|
+
`0px 10px 13px -6px ${transparent1},0px 21px 33px 3px ${transparent2},0px 8px 40px 7px ${transparent3}`,
|
|
32
|
+
`0px 10px 14px -6px ${transparent1},0px 22px 35px 3px ${transparent2},0px 8px 42px 7px ${transparent3}`,
|
|
33
|
+
`0px 11px 14px -7px ${transparent1},0px 23px 36px 3px ${transparent2},0px 9px 44px 8px ${transparent3}`,
|
|
34
|
+
`0px 11px 15px -7px ${transparent1},0px 24px 38px 3px ${transparent2},0px 9px 46px 8px ${transparent3}`
|
|
35
|
+
];
|
|
36
|
+
};
|
|
37
|
+
const createCustomShadow = (color) => {
|
|
38
|
+
const transparent = alpha(color, 0.16);
|
|
39
|
+
return {
|
|
40
|
+
z1: `0 1px 2px 0 ${transparent}`,
|
|
41
|
+
z8: `0 8px 16px 0 ${transparent}`,
|
|
42
|
+
z12: `0 12px 24px -4px ${transparent}`,
|
|
43
|
+
z16: `0 16px 32px -4px ${transparent}`,
|
|
44
|
+
z20: `0 20px 40px -4px ${transparent}`,
|
|
45
|
+
z24: `0 24px 48px 0 ${transparent}`,
|
|
46
|
+
primary: `0 8px 16px 0 ${alpha(palette.light.primary.main, 0.24)}`,
|
|
47
|
+
info: `0 8px 16px 0 ${alpha(palette.light.info.main, 0.24)}`,
|
|
48
|
+
secondary: `0 8px 16px 0 ${alpha(palette.light.secondary.main, 0.24)}`,
|
|
49
|
+
success: `0 8px 16px 0 ${alpha(palette.light.success.main, 0.24)}`,
|
|
50
|
+
warning: `0 8px 16px 0 ${alpha(palette.light.warning.main, 0.24)}`,
|
|
51
|
+
error: `0 8px 16px 0 ${alpha(palette.light.error.main, 0.24)}`,
|
|
52
|
+
card: `0 0 2px 0 ${alpha(color, 0.2)}, 0 12px 24px -4px ${alpha(color, 0.12)}`,
|
|
53
|
+
dialog: `-40px 40px 80px -8px ${alpha(palette.light.common.black, 0.24)}`,
|
|
54
|
+
dropdown: `0 0 2px 0 ${alpha(color, 0.24)}, -20px 20px 40px -4px ${alpha(color, 0.24)}`
|
|
55
|
+
};
|
|
56
|
+
};
|
|
57
|
+
const customShadows = {
|
|
58
|
+
light: createCustomShadow(LIGHT_MODE),
|
|
59
|
+
dark: createCustomShadow(DARK_MODE)
|
|
60
|
+
};
|
|
61
|
+
const shadows = {
|
|
62
|
+
light: createShadow(LIGHT_MODE),
|
|
63
|
+
dark: createShadow(DARK_MODE)
|
|
64
|
+
};
|
|
65
|
+
export { customShadows as c, shadows as s };
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
import { p as pxToRem, r as responsiveFontSizes } from "../utils/index.js";
|
|
2
|
+
const FONT_PRIMARY = "Public Sans, sans-serif";
|
|
3
|
+
const typography = {
|
|
4
|
+
fontFamily: FONT_PRIMARY,
|
|
5
|
+
fontWeightRegular: 400,
|
|
6
|
+
fontWeightMedium: 600,
|
|
7
|
+
fontWeightBold: 700,
|
|
8
|
+
h1: {
|
|
9
|
+
fontWeight: 700,
|
|
10
|
+
lineHeight: 80 / 64,
|
|
11
|
+
fontSize: pxToRem(40),
|
|
12
|
+
letterSpacing: 2,
|
|
13
|
+
...responsiveFontSizes({ sm: 52, md: 58, lg: 64 })
|
|
14
|
+
},
|
|
15
|
+
h2: {
|
|
16
|
+
fontWeight: 700,
|
|
17
|
+
lineHeight: 64 / 48,
|
|
18
|
+
fontSize: pxToRem(32),
|
|
19
|
+
...responsiveFontSizes({ sm: 40, md: 44, lg: 48 })
|
|
20
|
+
},
|
|
21
|
+
h3: {
|
|
22
|
+
fontWeight: 700,
|
|
23
|
+
lineHeight: 1.5,
|
|
24
|
+
fontSize: pxToRem(24),
|
|
25
|
+
...responsiveFontSizes({ sm: 26, md: 30, lg: 32 })
|
|
26
|
+
},
|
|
27
|
+
h4: {
|
|
28
|
+
fontWeight: 700,
|
|
29
|
+
lineHeight: 1.5,
|
|
30
|
+
fontSize: pxToRem(20),
|
|
31
|
+
...responsiveFontSizes({ sm: 20, md: 24, lg: 24 })
|
|
32
|
+
},
|
|
33
|
+
h5: {
|
|
34
|
+
fontWeight: 700,
|
|
35
|
+
lineHeight: 1.5,
|
|
36
|
+
fontSize: pxToRem(18),
|
|
37
|
+
...responsiveFontSizes({ sm: 19, md: 20, lg: 20 })
|
|
38
|
+
},
|
|
39
|
+
h6: {
|
|
40
|
+
fontWeight: 700,
|
|
41
|
+
lineHeight: 28 / 18,
|
|
42
|
+
fontSize: pxToRem(17),
|
|
43
|
+
...responsiveFontSizes({ sm: 18, md: 18, lg: 18 })
|
|
44
|
+
},
|
|
45
|
+
subtitle1: {
|
|
46
|
+
fontWeight: 600,
|
|
47
|
+
lineHeight: 1.5,
|
|
48
|
+
fontSize: pxToRem(14)
|
|
49
|
+
},
|
|
50
|
+
subtitle2: {
|
|
51
|
+
fontWeight: 600,
|
|
52
|
+
lineHeight: 1.5,
|
|
53
|
+
fontSize: pxToRem(12)
|
|
54
|
+
},
|
|
55
|
+
body0: {
|
|
56
|
+
lineHeight: 1.5,
|
|
57
|
+
fontWeight: 400,
|
|
58
|
+
fontSize: pxToRem(16)
|
|
59
|
+
},
|
|
60
|
+
body1: {
|
|
61
|
+
lineHeight: 1.5,
|
|
62
|
+
fontWeight: 400,
|
|
63
|
+
fontSize: pxToRem(14)
|
|
64
|
+
},
|
|
65
|
+
body2: {
|
|
66
|
+
lineHeight: 1.5,
|
|
67
|
+
fontWeight: 400,
|
|
68
|
+
fontSize: pxToRem(12)
|
|
69
|
+
},
|
|
70
|
+
caption: {
|
|
71
|
+
lineHeight: 1.5,
|
|
72
|
+
fontSize: pxToRem(11)
|
|
73
|
+
},
|
|
74
|
+
overline: {
|
|
75
|
+
fontWeight: 700,
|
|
76
|
+
lineHeight: 1.5,
|
|
77
|
+
fontSize: pxToRem(12),
|
|
78
|
+
textTransform: "uppercase"
|
|
79
|
+
},
|
|
80
|
+
button: {
|
|
81
|
+
fontWeight: 700,
|
|
82
|
+
lineHeight: 24 / 14,
|
|
83
|
+
fontSize: pxToRem(14),
|
|
84
|
+
textTransform: "capitalize"
|
|
85
|
+
}
|
|
86
|
+
};
|
|
87
|
+
export { typography as t };
|
package/dist/utils/index.js
CHANGED