feat: creating base for colors out from createTheme
This commit is contained in:
Caio Cabral committed
1 parent
d62f5952d5
commit
097b719159
8 files changed
+473
-436
No files matched your search
Generated
+172
-30
@@ -8,12 +8,13 @@
|
||||
"name": "client",
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"@emotion/react": "^11.11.4",
|
||||
"@emotion/styled": "^11.11.5",
|
||||
"6": "^0.0.1",
|
||||
"@emotion/react": "^11.13.3",
|
||||
"@emotion/styled": "^11.13.0",
|
||||
"@fontsource/roboto": "^5.0.13",
|
||||
"@mui/icons-material": "^5.15.17",
|
||||
"@mui/lab": "^5.0.0-alpha.170",
|
||||
"@mui/material": "^5.15.16",
|
||||
"@mui/material": "6.1",
|
||||
"@mui/x-charts": "^7.5.1",
|
||||
"@mui/x-data-grid": "7.22.1",
|
||||
"@mui/x-date-pickers": "7.22.1",
|
||||
@@ -304,9 +305,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/runtime": {
|
||||
"version": "7.25.9",
|
||||
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.9.tgz",
|
||||
"integrity": "sha512-4zpTHZ9Cm6L9L+uIqghQX8ZXg8HKFcjYO3qHoO8zTmRm6HQUJ8SSJ+KRvbMBZn0EGVlT4DRYeQ/6hjlyXBh+Kg==",
|
||||
"version": "7.26.0",
|
||||
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.0.tgz",
|
||||
"integrity": "sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"regenerator-runtime": "^0.14.0"
|
||||
@@ -1135,9 +1136,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@mui/core-downloads-tracker": {
|
||||
"version": "5.16.7",
|
||||
"resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.16.7.tgz",
|
||||
"integrity": "sha512-RtsCt4Geed2/v74sbihWzzRs+HsIQCfclHeORh5Ynu2fS4icIKozcSubwuG7vtzq2uW3fOR1zITSP84TNt2GoQ==",
|
||||
"version": "6.1.6",
|
||||
"resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.1.6.tgz",
|
||||
"integrity": "sha512-nz1SlR9TdBYYPz4qKoNasMPRiGb4PaIHFkzLzhju0YVYS5QSuFF2+n7CsiHMIDcHv3piPu/xDWI53ruhOqvZwQ==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
@@ -1212,26 +1213,26 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@mui/material": {
|
||||
"version": "5.16.7",
|
||||
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.16.7.tgz",
|
||||
"integrity": "sha512-cwwVQxBhK60OIOqZOVLFt55t01zmarKJiJUWbk0+8s/Ix5IaUzAShqlJchxsIQ4mSrWqgcKCCXKtIlG5H+/Jmg==",
|
||||
"version": "6.1.6",
|
||||
"resolved": "https://registry.npmjs.org/@mui/material/-/material-6.1.6.tgz",
|
||||
"integrity": "sha512-1yvejiQ/601l5AK3uIdUlAVElyCxoqKnl7QA+2oFB/2qYPWfRwDgavW/MoywS5Y2gZEslcJKhe0s2F3IthgFgw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.23.9",
|
||||
"@mui/core-downloads-tracker": "^5.16.7",
|
||||
"@mui/system": "^5.16.7",
|
||||
"@mui/types": "^7.2.15",
|
||||
"@mui/utils": "^5.16.6",
|
||||
"@babel/runtime": "^7.26.0",
|
||||
"@mui/core-downloads-tracker": "^6.1.6",
|
||||
"@mui/system": "^6.1.6",
|
||||
"@mui/types": "^7.2.19",
|
||||
"@mui/utils": "^6.1.6",
|
||||
"@popperjs/core": "^2.11.8",
|
||||
"@types/react-transition-group": "^4.4.10",
|
||||
"clsx": "^2.1.0",
|
||||
"@types/react-transition-group": "^4.4.11",
|
||||
"clsx": "^2.1.1",
|
||||
"csstype": "^3.1.3",
|
||||
"prop-types": "^15.8.1",
|
||||
"react-is": "^18.3.1",
|
||||
"react-transition-group": "^4.4.5"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12.0.0"
|
||||
"node": ">=14.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
@@ -1240,9 +1241,10 @@
|
||||
"peerDependencies": {
|
||||
"@emotion/react": "^11.5.0",
|
||||
"@emotion/styled": "^11.3.0",
|
||||
"@types/react": "^17.0.0 || ^18.0.0",
|
||||
"react": "^17.0.0 || ^18.0.0",
|
||||
"react-dom": "^17.0.0 || ^18.0.0"
|
||||
"@mui/material-pigment-css": "^6.1.6",
|
||||
"@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||
"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||
"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@emotion/react": {
|
||||
@@ -1251,6 +1253,140 @@
|
||||
"@emotion/styled": {
|
||||
"optional": true
|
||||
},
|
||||
"@mui/material-pigment-css": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@mui/material/node_modules/@mui/private-theming": {
|
||||
"version": "6.1.6",
|
||||
"resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.1.6.tgz",
|
||||
"integrity": "sha512-ioAiFckaD/fJSnTrUMWgjl9HYBWt7ixCh7zZw7gDZ+Tae7NuprNV6QJK95EidDT7K0GetR2rU3kAeIR61Myttw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.26.0",
|
||||
"@mui/utils": "^6.1.6",
|
||||
"prop-types": "^15.8.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/mui-org"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||
"react": "^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@mui/material/node_modules/@mui/styled-engine": {
|
||||
"version": "6.1.6",
|
||||
"resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.1.6.tgz",
|
||||
"integrity": "sha512-I+yS1cSuSvHnZDBO7e7VHxTWpj+R7XlSZvTC4lS/OIbUNJOMMSd3UDP6V2sfwzAdmdDNBi7NGCRv2SZ6O9hGDA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.26.0",
|
||||
"@emotion/cache": "^11.13.1",
|
||||
"@emotion/serialize": "^1.3.2",
|
||||
"@emotion/sheet": "^1.4.0",
|
||||
"csstype": "^3.1.3",
|
||||
"prop-types": "^15.8.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/mui-org"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@emotion/react": "^11.4.1",
|
||||
"@emotion/styled": "^11.3.0",
|
||||
"react": "^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@emotion/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@emotion/styled": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@mui/material/node_modules/@mui/system": {
|
||||
"version": "6.1.6",
|
||||
"resolved": "https://registry.npmjs.org/@mui/system/-/system-6.1.6.tgz",
|
||||
"integrity": "sha512-qOf1VUE9wK8syiB0BBCp82oNBAVPYdj4Trh+G1s+L+ImYiKlubWhhqlnvWt3xqMevR+D2h1CXzA1vhX2FvA+VQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.26.0",
|
||||
"@mui/private-theming": "^6.1.6",
|
||||
"@mui/styled-engine": "^6.1.6",
|
||||
"@mui/types": "^7.2.19",
|
||||
"@mui/utils": "^6.1.6",
|
||||
"clsx": "^2.1.1",
|
||||
"csstype": "^3.1.3",
|
||||
"prop-types": "^15.8.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/mui-org"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@emotion/react": "^11.5.0",
|
||||
"@emotion/styled": "^11.3.0",
|
||||
"@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||
"react": "^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@emotion/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@emotion/styled": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@mui/material/node_modules/@mui/utils": {
|
||||
"version": "6.1.6",
|
||||
"resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.1.6.tgz",
|
||||
"integrity": "sha512-sBS6D9mJECtELASLM+18WUcXF6RH3zNxBRFeyCRg8wad6NbyNrdxLuwK+Ikvc38sTZwBzAz691HmSofLqHd9sQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.26.0",
|
||||
"@mui/types": "^7.2.19",
|
||||
"@types/prop-types": "^15.7.13",
|
||||
"clsx": "^2.1.1",
|
||||
"prop-types": "^15.8.1",
|
||||
"react-is": "^18.3.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/mui-org"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||
"react": "^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
@@ -1356,12 +1492,12 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@mui/types": {
|
||||
"version": "7.2.15",
|
||||
"resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.15.tgz",
|
||||
"integrity": "sha512-nbo7yPhtKJkdf9kcVOF8JZHPZTmqXjJ/tI0bdWgHg5tp9AnIN4Y7f7wm9T+0SyGYJk76+GYZ8Q5XaTYAsUHN0Q==",
|
||||
"version": "7.2.19",
|
||||
"resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.19.tgz",
|
||||
"integrity": "sha512-6XpZEM/Q3epK9RN8ENoXuygnqUQxE+siN/6rGRi2iwJPgBUR25mphYQ9ZI87plGh58YoZ5pp40bFvKYOCDJ3tA==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"@types/react": "^17.0.0 || ^18.0.0"
|
||||
"@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
@@ -2350,9 +2486,9 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/prop-types": {
|
||||
"version": "15.7.12",
|
||||
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
|
||||
"integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==",
|
||||
"version": "15.7.13",
|
||||
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz",
|
||||
"integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/react": {
|
||||
@@ -2417,6 +2553,12 @@
|
||||
"vite": "^4.2.0 || ^5.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/6": {
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmjs.org/6/-/6-0.0.1.tgz",
|
||||
"integrity": "sha512-kMT8ZPwxbwjMM73Cpy+VbrcYILF5a7UbuziJBcMPCEG33XCw4h00XecvmBMUD2KFfugBolHUmoSzjyl7Wtzbeg==",
|
||||
"license": "mit"
|
||||
},
|
||||
"node_modules/acorn": {
|
||||
"version": "8.12.1",
|
||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
|
||||
|
||||
+4
-3
@@ -11,12 +11,13 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/react": "^11.11.4",
|
||||
"@emotion/styled": "^11.11.5",
|
||||
"6": "^0.0.1",
|
||||
"@emotion/react": "^11.13.3",
|
||||
"@emotion/styled": "^11.13.0",
|
||||
"@fontsource/roboto": "^5.0.13",
|
||||
"@mui/icons-material": "^5.15.17",
|
||||
"@mui/lab": "^5.0.0-alpha.170",
|
||||
"@mui/material": "^5.15.16",
|
||||
"@mui/material": "6.1",
|
||||
"@mui/x-charts": "^7.5.1",
|
||||
"@mui/x-data-grid": "7.22.1",
|
||||
"@mui/x-date-pickers": "7.22.1",
|
||||
|
||||
+12
-1
@@ -35,7 +35,7 @@ import withAdminProp from "./Components/HOC/withAdminProp";
|
||||
import { ThemeProvider } from "@emotion/react";
|
||||
import lightTheme from "./Utils/Theme/lightTheme";
|
||||
import darkTheme from "./Utils/Theme/darkTheme";
|
||||
import { CssBaseline } from "@mui/material";
|
||||
import { CssBaseline, GlobalStyles } from "@mui/material";
|
||||
import { getAppSettings } from "./Features/Settings/settingsSlice";
|
||||
import { logger } from "./Utils/Logger"; // Import the logger
|
||||
import { networkService } from "./main";
|
||||
@@ -68,8 +68,19 @@ function App() {
|
||||
}, []);
|
||||
|
||||
return (
|
||||
/* Extract Themeprovider, baseline and global styles to Styles */
|
||||
<ThemeProvider theme={mode === "light" ? lightTheme : darkTheme}>
|
||||
<CssBaseline />
|
||||
<GlobalStyles
|
||||
styles={({ palette }) => {
|
||||
return {
|
||||
body: {
|
||||
backgroundImage: `radial-gradient(circle, ${palette.gradient.color1}, ${palette.gradient.color2}, ${palette.gradient.color3}, ${palette.gradient.color4}, ${palette.gradient.color5})`,
|
||||
},
|
||||
};
|
||||
}}
|
||||
/>
|
||||
{/* Extract Routes to Routes */}
|
||||
<Routes>
|
||||
<Route
|
||||
exact
|
||||
|
||||
@@ -111,7 +111,7 @@ const BarChart = ({ checks = [] }) => {
|
||||
],
|
||||
sx: {
|
||||
"& .MuiTooltip-tooltip": {
|
||||
backgroundColor: theme.palette.background.main,
|
||||
backgroundColor: theme.palette.secondary.main,
|
||||
border: 1,
|
||||
borderColor: theme.palette.border.dark,
|
||||
borderRadius: theme.shape.borderRadius,
|
||||
|
||||
@@ -1,11 +1,14 @@
|
||||
const typographyBase = 14;
|
||||
const typographyLevels = {
|
||||
xs: ".625rem",
|
||||
s: ".75rem",
|
||||
m: ".875rem",
|
||||
l: "1rem",
|
||||
xl: "1.5rem",
|
||||
base: typographyBase,
|
||||
xs: `${(typographyBase - 4) / 16}rem`,
|
||||
s: `${(typographyBase - 2) / 16}rem`,
|
||||
m: `${typographyBase / 16}rem`,
|
||||
l: `${(typographyBase + 2) / 16}rem`,
|
||||
xl: `${(typographyBase + 10) / 16}rem`,
|
||||
};
|
||||
|
||||
/* This should not be here. INcorporate into color structure */
|
||||
const paletteLight = {
|
||||
text: {
|
||||
primary: "#1c2130",
|
||||
@@ -15,4 +18,64 @@ const paletteLight = {
|
||||
},
|
||||
};
|
||||
|
||||
export { typographyLevels, paletteLight };
|
||||
/* TODO Expand this */
|
||||
|
||||
const paletteColors = {
|
||||
white: "#FFFFFF",
|
||||
gray50: "#FEFEFE",
|
||||
gray60: "#FEFDFE",
|
||||
gray70: "#FDFDFD",
|
||||
gray80: "#FDFCFD",
|
||||
gray90: "#FCFCFD",
|
||||
gray850: "#131315",
|
||||
gray860: "#111113",
|
||||
gray870: "#0F0F11",
|
||||
gray880: "#0C0C0E",
|
||||
gray890: "#09090B",
|
||||
black: "#000000",
|
||||
};
|
||||
|
||||
/* TODO Export this as colors */
|
||||
/* primary: {
|
||||
main: {
|
||||
light:,
|
||||
dark:
|
||||
},
|
||||
light:{
|
||||
light:,
|
||||
dark:
|
||||
},
|
||||
dark:{
|
||||
light:,
|
||||
dark:
|
||||
},
|
||||
contrastText: {
|
||||
light:,
|
||||
dark:
|
||||
},
|
||||
} */
|
||||
const semanticColors = {
|
||||
gradient: {
|
||||
color1: {
|
||||
light: paletteColors.gray90,
|
||||
dark: paletteColors.gray890,
|
||||
},
|
||||
color2: {
|
||||
light: paletteColors.gray80,
|
||||
dark: paletteColors.gray880,
|
||||
},
|
||||
color3: {
|
||||
light: paletteColors.gray70,
|
||||
dark: paletteColors.gray870,
|
||||
},
|
||||
color4: {
|
||||
light: paletteColors.gray60,
|
||||
dark: paletteColors.gray860,
|
||||
},
|
||||
color5: {
|
||||
light: paletteColors.gray50,
|
||||
dark: paletteColors.gray850,
|
||||
},
|
||||
},
|
||||
};
|
||||
export { typographyLevels, paletteLight, semanticColors as colors };
|
||||
@@ -1,5 +1,6 @@
|
||||
import { createTheme } from "@mui/material";
|
||||
import { baseTheme } from "./globalTheme";
|
||||
import { colors } from "./constants";
|
||||
|
||||
const text = {
|
||||
primary: "#fafafa",
|
||||
@@ -16,35 +17,18 @@ const background = {
|
||||
};
|
||||
const border = { light: "#27272a", dark: "#36363e" };
|
||||
|
||||
/* const fontFamilyDefault =
|
||||
'"Inter","system-ui", "Avenir", "Helvetica", "Arial", sans-serif'; */
|
||||
const shadow =
|
||||
"0px 4px 24px -4px rgba(255, 255, 255, 0.03), 0px 3px 3px -3px rgba(255, 255, 255, 0.01)";
|
||||
const { gradient } = colors;
|
||||
/* const gradient = {
|
||||
color1: "#09090b",
|
||||
color2: "#0c0c0e",
|
||||
color3: "#0f0f11",
|
||||
color4: "#111113",
|
||||
color5: "#131315",
|
||||
}; */
|
||||
|
||||
const darkTheme = createTheme({
|
||||
...baseTheme,
|
||||
// typography: {
|
||||
// /* fontFamily: fontFamilyDefault, */
|
||||
// fontSize: 13,
|
||||
// h1: { fontSize: 22, color: text.primary, fontWeight: 500 },
|
||||
// h2: { fontSize: 16, color: text.secondary, fontWeight: 400 },
|
||||
// body1: { fontSize: 13, color: text.tertiary, fontWeight: 400 },
|
||||
// body2: { fontSize: 12, color: text.tertiary, fontWeight: 400 },
|
||||
// },
|
||||
chart: {
|
||||
header: {
|
||||
fontWeight: 400,
|
||||
fill: text.tertiary,
|
||||
fontSize: 11,
|
||||
},
|
||||
subheader: {
|
||||
fontWeight: 400,
|
||||
fill: text.tertiary,
|
||||
fontSize: 9,
|
||||
},
|
||||
},
|
||||
palette: {
|
||||
mode: "dark",
|
||||
primary: { main: "#1570ef" },
|
||||
secondary: { main: "#2D2D33" },
|
||||
text: text,
|
||||
@@ -57,6 +41,7 @@ const darkTheme = createTheme({
|
||||
light: background.main,
|
||||
border: border.light,
|
||||
},
|
||||
gradient,
|
||||
success: {
|
||||
text: "#079455",
|
||||
main: "#45bb7a",
|
||||
@@ -94,176 +79,6 @@ const darkTheme = createTheme({
|
||||
autofill: "#2d2d33",
|
||||
},
|
||||
},
|
||||
spacing: 2,
|
||||
components: {
|
||||
MuiCssBaseline: {
|
||||
styleOverrides: {
|
||||
body: {
|
||||
backgroundImage:
|
||||
"radial-gradient(circle, #09090b, #0c0c0e, #0f0f11, #111113, #131315, #131315, #131315, #131315, #111113, #0f0f11, #0c0c0e, #09090b)",
|
||||
lineHeight: "inherit",
|
||||
paddingLeft: "calc(100vw - 100%)",
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiButton: {
|
||||
defaultProps: {
|
||||
disableRipple: true,
|
||||
},
|
||||
styleOverrides: {
|
||||
root: ({ theme }) => ({
|
||||
variants: [
|
||||
{
|
||||
props: (props) => props.variant === "group",
|
||||
style: {
|
||||
color: theme.palette.secondary.contrastText,
|
||||
backgroundColor: theme.palette.background.main,
|
||||
border: 1,
|
||||
borderStyle: "solid",
|
||||
borderColor: theme.palette.border.light,
|
||||
},
|
||||
},
|
||||
{
|
||||
props: (props) => props.variant === "group" && props.filled === "true",
|
||||
style: {
|
||||
backgroundColor: theme.palette.secondary.main,
|
||||
},
|
||||
},
|
||||
{
|
||||
props: (props) =>
|
||||
props.variant === "contained" && props.color === "secondary",
|
||||
style: {
|
||||
border: 1,
|
||||
borderStyle: "solid",
|
||||
borderColor: theme.palette.border.dark,
|
||||
},
|
||||
},
|
||||
],
|
||||
fontWeight: 400,
|
||||
borderRadius: 4,
|
||||
boxShadow: "none",
|
||||
textTransform: "none",
|
||||
"&:focus": {
|
||||
outline: "none",
|
||||
},
|
||||
"&:hover": {
|
||||
boxShadow: "none",
|
||||
},
|
||||
}),
|
||||
},
|
||||
},
|
||||
MuiIconButton: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
padding: 4,
|
||||
transition: "none",
|
||||
"&:hover": {
|
||||
backgroundColor: border.light,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiPaper: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
marginTop: 4,
|
||||
padding: 0,
|
||||
border: 1,
|
||||
borderStyle: "solid",
|
||||
borderColor: border.light,
|
||||
borderRadius: 4,
|
||||
boxShadow: shadow,
|
||||
backgroundColor: background.main,
|
||||
backgroundImage: "none",
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiList: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
padding: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiListItemButton: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
transition: "none",
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiMenuItem: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
borderRadius: 4,
|
||||
backgroundColor: "inherit",
|
||||
padding: "4px 6px",
|
||||
color: text.secondary,
|
||||
fontSize: 13,
|
||||
margin: 2,
|
||||
minWidth: 100,
|
||||
"&:hover, &.Mui-selected, &.Mui-selected:hover, &.Mui-selected.Mui-focusVisible":
|
||||
{
|
||||
backgroundColor: background.fill,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiTableCell: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
borderBottomColor: border.light,
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiTableHead: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
backgroundColor: background.accent,
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiPagination: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
backgroundColor: background.main,
|
||||
border: 1,
|
||||
borderStyle: "solid",
|
||||
borderColor: border.light,
|
||||
"& button": {
|
||||
color: text.tertiary,
|
||||
borderRadius: 4,
|
||||
},
|
||||
"& li:first-of-type button, & li:last-of-type button": {
|
||||
border: 1,
|
||||
borderStyle: "solid",
|
||||
borderColor: border.light,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiPaginationItem: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
"&:not(.MuiPaginationItem-ellipsis):hover, &.Mui-selected": {
|
||||
backgroundColor: background.fill,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiSkeleton: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
backgroundColor: "#151518",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
shape: {
|
||||
borderRadius: 2,
|
||||
borderThick: 2,
|
||||
boxShadow: shadow,
|
||||
},
|
||||
});
|
||||
|
||||
export default darkTheme;
|
||||
@@ -3,10 +3,30 @@ import { paletteLight, typographyLevels } from "./constants";
|
||||
const fontFamilyPrimary = '"Inter" , sans-serif';
|
||||
// const fontFamilySecondary = '"Avenir", sans-serif';
|
||||
|
||||
const shadow =
|
||||
"0px 4px 24px -4px rgba(16, 24, 40, 0.08), 0px 3px 3px -3px rgba(16, 24, 40, 0.03)";
|
||||
|
||||
const background = {
|
||||
main: "#FFFFFF",
|
||||
alt: "#FCFCFD",
|
||||
fill: "#F4F4F4",
|
||||
accent: "#f9fafb",
|
||||
};
|
||||
|
||||
const border = { light: "#eaecf0", dark: "#d0d5dd" };
|
||||
|
||||
const text = {
|
||||
primary: "#1c2130",
|
||||
secondary: "#344054",
|
||||
tertiary: "#475467",
|
||||
accent: "#838c99",
|
||||
};
|
||||
|
||||
const baseTheme = {
|
||||
/* TODO colors should not live here */
|
||||
typography: {
|
||||
fontFamily: fontFamilyPrimary,
|
||||
fontSize: typographyLevels.m,
|
||||
fontSize: 14,
|
||||
h1: {
|
||||
fontSize: typographyLevels.xl,
|
||||
color: paletteLight.text.primary,
|
||||
@@ -28,6 +48,179 @@ const baseTheme = {
|
||||
fontWeight: 400,
|
||||
},
|
||||
},
|
||||
/* TODO take chart from here, it should live inside of the gauge, and get info from the theme */
|
||||
chart: {
|
||||
header: {
|
||||
fontWeight: 400,
|
||||
fill: paletteLight.text.tertiary,
|
||||
fontSize: typographyLevels.m,
|
||||
},
|
||||
subheader: {
|
||||
fontWeight: 400,
|
||||
fill: paletteLight.text.tertiary,
|
||||
fontSize: typographyLevels.xs,
|
||||
},
|
||||
},
|
||||
spacing: 2,
|
||||
components: {
|
||||
MuiButton: {
|
||||
defaultProps: {
|
||||
disableRipple: true,
|
||||
},
|
||||
styleOverrides: {
|
||||
root: ({ theme }) => ({
|
||||
variants: [
|
||||
{
|
||||
props: (props) => props.variant === "group",
|
||||
style: {
|
||||
color: theme.palette.secondary.contrastText,
|
||||
backgroundColor: theme.palette.background.main,
|
||||
border: 1,
|
||||
borderStyle: "solid",
|
||||
borderColor: theme.palette.border.light,
|
||||
},
|
||||
},
|
||||
{
|
||||
props: (props) => props.variant === "group" && props.filled === "true",
|
||||
style: {
|
||||
backgroundColor: theme.palette.secondary.main,
|
||||
},
|
||||
},
|
||||
{
|
||||
props: (props) =>
|
||||
props.variant === "contained" && props.color === "secondary",
|
||||
style: {
|
||||
border: 1,
|
||||
borderStyle: "solid",
|
||||
borderColor: theme.palette.border.light,
|
||||
},
|
||||
},
|
||||
],
|
||||
fontWeight: 400,
|
||||
borderRadius: 4,
|
||||
boxShadow: "none",
|
||||
textTransform: "none",
|
||||
"&:focus": {
|
||||
outline: "none",
|
||||
},
|
||||
"&:hover": {
|
||||
boxShadow: "none",
|
||||
},
|
||||
}),
|
||||
},
|
||||
},
|
||||
MuiIconButton: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
padding: 4,
|
||||
transition: "none",
|
||||
"&:hover": {
|
||||
backgroundColor: background.fill,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiPaper: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
marginTop: 4,
|
||||
padding: 0,
|
||||
border: 1,
|
||||
borderStyle: "solid",
|
||||
borderColor: border.light,
|
||||
borderRadius: 4,
|
||||
boxShadow: shadow,
|
||||
backgroundColor: background.main,
|
||||
backgroundImage: "none",
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiList: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
padding: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiListItemButton: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
transition: "none",
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiMenuItem: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
borderRadius: 4,
|
||||
backgroundColor: "inherit",
|
||||
padding: "4px 6px",
|
||||
color: text.secondary,
|
||||
fontSize: 13,
|
||||
margin: 2,
|
||||
minWidth: 100,
|
||||
"&:hover, &.Mui-selected, &.Mui-selected:hover, &.Mui-selected.Mui-focusVisible":
|
||||
{
|
||||
backgroundColor: background.fill,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiTableCell: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
borderBottomColor: border.light,
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiTableHead: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
backgroundColor: background.accent,
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiPagination: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
backgroundColor: background.main,
|
||||
border: 1,
|
||||
borderStyle: "solid",
|
||||
borderColor: border.light,
|
||||
"& button": {
|
||||
color: text.tertiary,
|
||||
borderRadius: 4,
|
||||
},
|
||||
"& li:first-of-type button, & li:last-of-type button": {
|
||||
border: 1,
|
||||
borderStyle: "solid",
|
||||
borderColor: border.light,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiPaginationItem: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
"&:not(.MuiPaginationItem-ellipsis):hover, &.Mui-selected": {
|
||||
backgroundColor: background.fill,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiSkeleton: {
|
||||
styleOverrides: {
|
||||
root: ({ theme }) => ({
|
||||
backgroundColor: theme.palette.unresolved.bg,
|
||||
}),
|
||||
},
|
||||
},
|
||||
},
|
||||
shape: {
|
||||
borderRadius: 2,
|
||||
borderThick: 2,
|
||||
boxShadow: shadow,
|
||||
},
|
||||
};
|
||||
|
||||
export { baseTheme };
|
||||
@@ -1,6 +1,6 @@
|
||||
import { createTheme } from "@mui/material";
|
||||
import { typographyLevels } from "./constants";
|
||||
import { baseTheme } from "./globalTheme";
|
||||
import { colors } from "./constants";
|
||||
|
||||
const text = {
|
||||
primary: "#1c2130",
|
||||
@@ -15,38 +15,19 @@ const background = {
|
||||
accent: "#f9fafb",
|
||||
};
|
||||
|
||||
const { gradient } = colors;
|
||||
/* const gradient = {
|
||||
color1: "#fcfcfd",
|
||||
color2: "#fdfcfd",
|
||||
color3: "#fdfdfd",
|
||||
color4: "#fefdfe",
|
||||
color5: "#fefefe",
|
||||
}; */
|
||||
|
||||
const border = { light: "#eaecf0", dark: "#d0d5dd" };
|
||||
|
||||
/* TODO stop using mui for fonts. Create text component based on emotion */
|
||||
|
||||
/* const fontFamilyDefault =
|
||||
'"Inter","system-ui", "Avenir", "Helvetica", "Arial", sans-serif'; */
|
||||
|
||||
const shadow =
|
||||
"0px 4px 24px -4px rgba(16, 24, 40, 0.08), 0px 3px 3px -3px rgba(16, 24, 40, 0.03)";
|
||||
|
||||
const lightTheme = createTheme({
|
||||
...baseTheme,
|
||||
// typography: {
|
||||
// /* fontFamily: fontFamilyDefault, */
|
||||
// fontSize: typographyLevels.m,
|
||||
// h1: { fontSize: typographyLevels.xl, color: text.primary, fontWeight: 500 },
|
||||
// h2: { fontSize: typographyLevels.l, color: text.secondary, fontWeight: 400 },
|
||||
// body1: { fontSize: typographyLevels.m, color: text.tertiary, fontWeight: 400 },
|
||||
// body2: { fontSize: typographyLevels.s, color: text.tertiary, fontWeight: 400 },
|
||||
// },
|
||||
chart: {
|
||||
header: {
|
||||
fontWeight: 400,
|
||||
fill: text.tertiary,
|
||||
fontSize: typographyLevels.m,
|
||||
},
|
||||
subheader: {
|
||||
fontWeight: 400,
|
||||
fill: text.tertiary,
|
||||
fontSize: typographyLevels.xs,
|
||||
},
|
||||
},
|
||||
palette: {
|
||||
primary: { main: "#1570EF" },
|
||||
secondary: { main: "#F4F4F4", dark: "#e3e3e3", contrastText: "#475467" },
|
||||
@@ -60,6 +41,7 @@ const lightTheme = createTheme({
|
||||
light: background.main,
|
||||
border: border.dark,
|
||||
},
|
||||
gradient,
|
||||
success: {
|
||||
text: "#079455",
|
||||
main: "#17b26a",
|
||||
@@ -96,176 +78,6 @@ const lightTheme = createTheme({
|
||||
autofill: "#e8f0fe",
|
||||
},
|
||||
},
|
||||
spacing: 2,
|
||||
components: {
|
||||
MuiCssBaseline: {
|
||||
styleOverrides: {
|
||||
body: {
|
||||
backgroundImage:
|
||||
"radial-gradient(circle, #fcfcfd, #fdfcfd, #fdfdfd, #fefdfe, #fefefe, #fefefe, #fefefe, #fefefe, #fefdfe, #fdfdfd, #fdfcfd, #fcfcfd)",
|
||||
lineHeight: "inherit",
|
||||
paddingLeft: "calc(100vw - 100%)",
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiButton: {
|
||||
defaultProps: {
|
||||
disableRipple: true,
|
||||
},
|
||||
styleOverrides: {
|
||||
root: ({ theme }) => ({
|
||||
variants: [
|
||||
{
|
||||
props: (props) => props.variant === "group",
|
||||
style: {
|
||||
color: theme.palette.secondary.contrastText,
|
||||
backgroundColor: theme.palette.background.main,
|
||||
border: 1,
|
||||
borderStyle: "solid",
|
||||
borderColor: theme.palette.border.light,
|
||||
},
|
||||
},
|
||||
{
|
||||
props: (props) => props.variant === "group" && props.filled === "true",
|
||||
style: {
|
||||
backgroundColor: theme.palette.secondary.main,
|
||||
},
|
||||
},
|
||||
{
|
||||
props: (props) =>
|
||||
props.variant === "contained" && props.color === "secondary",
|
||||
style: {
|
||||
border: 1,
|
||||
borderStyle: "solid",
|
||||
borderColor: theme.palette.border.light,
|
||||
},
|
||||
},
|
||||
],
|
||||
fontWeight: 400,
|
||||
borderRadius: 4,
|
||||
boxShadow: "none",
|
||||
textTransform: "none",
|
||||
"&:focus": {
|
||||
outline: "none",
|
||||
},
|
||||
"&:hover": {
|
||||
boxShadow: "none",
|
||||
},
|
||||
}),
|
||||
},
|
||||
},
|
||||
MuiIconButton: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
padding: 4,
|
||||
transition: "none",
|
||||
"&:hover": {
|
||||
backgroundColor: background.fill,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiPaper: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
marginTop: 4,
|
||||
padding: 0,
|
||||
border: 1,
|
||||
borderStyle: "solid",
|
||||
borderColor: border.light,
|
||||
borderRadius: 4,
|
||||
boxShadow: shadow,
|
||||
backgroundColor: background.main,
|
||||
backgroundImage: "none",
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiList: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
padding: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiListItemButton: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
transition: "none",
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiMenuItem: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
borderRadius: 4,
|
||||
backgroundColor: "inherit",
|
||||
padding: "4px 6px",
|
||||
color: text.secondary,
|
||||
fontSize: 13,
|
||||
margin: 2,
|
||||
minWidth: 100,
|
||||
"&:hover, &.Mui-selected, &.Mui-selected:hover, &.Mui-selected.Mui-focusVisible":
|
||||
{
|
||||
backgroundColor: background.fill,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiTableCell: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
borderBottomColor: border.light,
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiTableHead: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
backgroundColor: background.accent,
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiPagination: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
backgroundColor: background.main,
|
||||
border: 1,
|
||||
borderStyle: "solid",
|
||||
borderColor: border.light,
|
||||
"& button": {
|
||||
color: text.tertiary,
|
||||
borderRadius: 4,
|
||||
},
|
||||
"& li:first-of-type button, & li:last-of-type button": {
|
||||
border: 1,
|
||||
borderStyle: "solid",
|
||||
borderColor: border.light,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiPaginationItem: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
"&:not(.MuiPaginationItem-ellipsis):hover, &.Mui-selected": {
|
||||
backgroundColor: background.fill,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiSkeleton: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
backgroundColor: "#f2f4f7",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
shape: {
|
||||
borderRadius: 2,
|
||||
borderThick: 2,
|
||||
boxShadow: shadow,
|
||||
},
|
||||
});
|
||||
|
||||
export default lightTheme;
|
||||
Reference in new issue
Block a user