TRX/Checkmate
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: passing ppalette to global theme, and starting color cleanup

Browse Source
This commit is contained in:
Caio Cabral committed 2024-11-12 19:10:48 -05:00
1 parent 841bf7b5ed
commit 2969ca3e35
5 files changed
+188 -189
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Client/src/Pages/Monitors/Home/StatusBox.jsx
+1 -1
View File
@@ -25,7 +25,7 @@ const StatusBox = ({ title, value }) => {
</Box>
);
} else if (title === "down") {
color = theme.palette.error.contrastText;
color = theme.palette.error.main;
icon = (
<Box sx={{ ...sharedStyles, transform: "rotate(180deg)", top: 5 }}>
<Arrow />
Client/src/Utils/Theme/constants.js
+14 -26
View File
@@ -8,18 +8,6 @@ const typographyLevels = {
xl: `${(typographyBase + 10) / 16}rem`,
};
/* This should not be here. Incorporate into color structure.
Is is being exported to globalStyle*/
const paletteLight = {
text: {
primary: "#1c2130",
secondary: "#344054",
tertiary: "#475467",
accent: "#838c99",
},
};
/* TODO Expand this */
const paletteColors = {
white: "#FFFFFF",
@@ -28,26 +16,26 @@ const paletteColors = {
gray70: "#FDFDFD",
gray80: "#FDFCFD",
gray90: "#FCFCFD",
gray95: "#FAFAFA",
gray97: "#F9FAFB",
/* gray95: "#FAFAFA",
gray97: "#F9FAFB", */
gray100: "#F4F4F4",
gray125: "#F2F4F7",
/* gray125: "#F2F4F7",
gray150: "#EAECF0",
gray180: "#E6E6E6",
gray180: "#E6E6E6", */
gray200: "#E3E3E3",
gray225: "#D6D9DD",
gray250: "#D0D5DD",
/* gray225: "#D6D9DD",
gray250: "#D0D5DD", */
gray300: "#A2A3A3",
gray350: "#A1A1AA",
gray450: "#8E8E8F",
/* gray350: "#A1A1AA",
gray450: "#8E8E8F", */
gray500: "#838C99",
gray600: "#454546",
gray750: "#36363E",
gray800: "#2D2D33",
gray815: "#27272A",
/* gray815: "#27272A",
gray830: "#262115",
gray835: "#18181a",
gray840: "#151518",
gray840: "#151518", */
gray850: "#131315",
gray860: "#111113",
gray870: "#0F0F11",
@@ -137,7 +125,7 @@ const semanticColors = {
},
contrastText: {
//TODO contrasttext semantically should be something that contrasts with the main
light: paletteColors.red200,
light: paletteColors.gray50,
dark: paletteColors.red50,
},
light: {
@@ -204,14 +192,14 @@ const semanticColors = {
dark: paletteColors.gray800,
},
accent: {
light: paletteColors.gray97,
light: paletteColors.gray100,
dark: paletteColors.gray835,
},
},
text: {
primary: {
light: paletteColors.blueGray900,
dark: paletteColors.gray95,
dark: paletteColors.gray100,
},
secondary: {
light: paletteColors.blueGray400,
@@ -271,4 +259,4 @@ const semanticColors = {
},
},
};
export { typographyLevels, paletteLight, semanticColors as colors };
export { typographyLevels, semanticColors as colors };
Client/src/Utils/Theme/darkTheme.js
+75 -73
View File
@@ -22,80 +22,82 @@ const {
other,
} = colors;
const darkTheme = createTheme({
...baseTheme,
palette: {
primary: { main: primary.main.dark },
secondary: { main: secondary.main.dark },
success: {
main: success.main.dark,
contrastText: success.contrastText.dark,
light: success.light.dark,
dark: success.dark.dark,
},
error: {
main: error.main.dark,
contrastText: error.contrastText.dark,
light: error.light.dark,
dark: error.dark.dark,
},
warning: {
main: warning.main.dark,
light: warning.light.dark,
contrastText: warning.contrastText.dark,
dark: warning.dark.dark,
},
/* From this part on, try to create semantic structure, not feature based structure */
percentage: {
uptimePoor: error.main.dark,
uptimeFair: warning.contrastText.dark,
uptimeGood: warning.main.dark /* Change for a success color? ?*/,
uptimeExcellent: success.contrastText.light,
},
unresolved: {
main: unresolved.main.dark,
light: unresolved.light.dark,
bg: unresolved.bg.dark,
},
divider: border.light.dark,
other: {
icon: text.secondary.dark,
line: border.light.dark,
fill: background.accent.dark,
grid: other.grid.dark,
autofill: secondary.main.dark,
},
gradient: {
color1,
color2,
color3,
color4,
color5,
},
text: {
primary: text.primary.dark,
secondary: text.secondary.dark,
tertiary: text.tertiary.dark,
accent: text.accent.dark,
},
background: {
main: background.main.dark,
alt: background.alt.dark,
fill: background.fill.dark,
accent: background.accent.dark,
},
border: {
light: border.light.dark,
dark: border.dark.dark,
},
info: {
text: text.primary.dark,
main: text.secondary.dark,
bg: background.main.dark,
light: background.main.dark,
border: border.light.dark,
},
const palette = {
primary: { main: primary.main.dark },
secondary: { main: secondary.main.dark },
success: {
main: success.main.dark,
contrastText: success.contrastText.dark,
light: success.light.dark,
dark: success.dark.dark,
},
error: {
main: error.main.dark,
contrastText: error.contrastText.dark,
light: error.light.dark,
dark: error.dark.dark,
},
warning: {
main: warning.main.dark,
light: warning.light.dark,
contrastText: warning.contrastText.dark,
dark: warning.dark.dark,
},
/* From this part on, try to create semantic structure, not feature based structure */
percentage: {
uptimePoor: error.main.dark,
uptimeFair: warning.contrastText.dark,
uptimeGood: warning.main.dark /* Change for a success color? ?*/,
uptimeExcellent: success.contrastText.light,
},
unresolved: {
main: unresolved.main.dark,
light: unresolved.light.dark,
bg: unresolved.bg.dark,
},
divider: border.light.dark,
other: {
icon: text.secondary.dark,
line: border.light.dark,
fill: background.accent.dark,
grid: other.grid.dark,
autofill: secondary.main.dark,
},
gradient: {
color1,
color2,
color3,
color4,
color5,
},
text: {
primary: text.primary.dark,
secondary: text.secondary.dark,
tertiary: text.tertiary.dark,
accent: text.accent.dark,
},
background: {
main: background.main.dark,
alt: background.alt.dark,
fill: background.fill.dark,
accent: background.accent.dark,
},
border: {
light: border.light.dark,
dark: border.dark.dark,
},
info: {
text: text.primary.dark,
main: text.secondary.dark,
bg: background.main.dark,
light: background.main.dark,
border: border.light.dark,
},
};
const darkTheme = createTheme({
palette,
...baseTheme(palette),
});
export default darkTheme;
Client/src/Utils/Theme/globalTheme.js
+17 -9
View File
@@ -1,4 +1,4 @@
import { paletteLight, typographyLevels } from "./constants";
import { typographyLevels } from "./constants";
const fontFamilyPrimary = '"Inter" , sans-serif';
// const fontFamilySecondary = '"Avenir", sans-serif';
@@ -7,28 +7,28 @@ const fontFamilyPrimary = '"Inter" , 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 baseTheme = {
const baseTheme = (palette) => ({
typography: {
fontFamily: fontFamilyPrimary,
fontSize: 14,
h1: {
fontSize: typographyLevels.xl,
color: paletteLight.text.primary,
color: palette.text.primary,
fontWeight: 500,
},
h2: {
fontSize: typographyLevels.l,
color: paletteLight.text.secondary,
color: palette.text.secondary,
fontWeight: 400,
},
body1: {
fontSize: typographyLevels.m,
color: paletteLight.text.tertiary,
color: palette.text.tertiary,
fontWeight: 400,
},
body2: {
fontSize: typographyLevels.s,
color: paletteLight.text.tertiary,
color: palette.text.tertiary,
fontWeight: 400,
},
},
@@ -36,16 +36,17 @@ const baseTheme = {
chart: {
header: {
fontWeight: 400,
fill: paletteLight.text.tertiary,
fill: palette.text.tertiary,
fontSize: typographyLevels.m,
},
subheader: {
fontWeight: 400,
fill: paletteLight.text.tertiary,
fill: palette.text.tertiary,
fontSize: typographyLevels.xs,
},
},
spacing: 2,
/* TODO All these should live inside of a component*/
components: {
MuiButton: {
defaultProps: {
@@ -79,6 +80,13 @@ const baseTheme = {
borderColor: theme.palette.border.light,
},
},
{
props: (props) => props.variant === "contained" && props.disabled,
style: {
backgroundColor: `${theme.palette.secondary.main} !important`,
color: `${theme.palette.secondary.contrastText} !important`,
},
},
],
fontWeight: 400,
borderRadius: 4,
@@ -207,6 +215,6 @@ const baseTheme = {
borderThick: 2,
boxShadow: shadow,
},
};
});
export { baseTheme };
Client/src/Utils/Theme/lightTheme.js
+81 -80
View File
@@ -3,12 +3,11 @@ import { baseTheme } from "./globalTheme";
import { colors } from "./constants";
/*
Take things from global theme
Next step: check if all here are being used.
Discuss colors with Gorkem and rest of the team
Check for Hex in code base
Check for px in codebase
*/
const {
@@ -31,84 +30,86 @@ const {
other,
} = colors;
const lightTheme = createTheme({
...baseTheme,
palette: {
primary: { main: primary.main.light },
secondary: {
main: secondary.main.light,
dark: secondary.dark.light,
contrastText: secondary.constrastText.light,
},
success: {
main: success.main.light,
contrastText: success.contrastText.light,
light: success.light.light,
dark: success.dark.light,
},
error: {
main: error.main.light,
contrastText: error.contrastText.light,
light: error.light.light,
dark: error.dark.light,
},
warning: {
main: warning.main.light,
light: warning.light.light,
contrastText: warning.contrastText.light,
dark: warning.dark.light,
},
/* From this part on, try to create semantic structure, not feature based structure */
percentage: {
uptimePoor: error.main.light,
uptimeFair: warning.contrastText.light,
uptimeGood: warning.main.light /* Change for a success color? */,
uptimeExcellent: success.contrastText.light,
},
unresolved: {
main: unresolved.main.light,
light: unresolved.light.light,
bg: unresolved.bg.light,
},
divider: border.light.light,
other: {
icon: other.icon.light,
line: other.line.light,
fill: secondary.dark.light,
grid: other.grid.light,
autofill: other.autofill.light,
},
gradient: {
color1,
color2,
color3,
color4,
color5,
},
text: {
primary: text.primary.light,
secondary: text.secondary.light,
tertiary: text.tertiary.light,
accent: text.accent.light,
},
background: {
main: background.main.light,
alt: background.alt.light,
fill: background.fill.light,
accent: background.accent.light,
},
border: {
light: border.light.light,
dark: border.dark.light,
},
info: {
text: text.primary.light,
main: text.tertiary.light,
bg: background.main.light,
light: background.main.light,
border: border.dark.light,
},
const palette = {
primary: { main: primary.main.light },
secondary: {
main: secondary.main.light,
dark: secondary.dark.light,
contrastText: secondary.constrastText.light,
},
success: {
main: success.main.light,
contrastText: success.contrastText.light,
light: success.light.light,
dark: success.dark.light,
},
error: {
main: error.main.light,
contrastText: error.contrastText.light,
light: error.light.light,
dark: error.dark.light,
},
warning: {
main: warning.main.light,
light: warning.light.light,
contrastText: warning.contrastText.light,
dark: warning.dark.light,
},
/* From this part on, try to create semantic structure, not feature based structure */
percentage: {
uptimePoor: error.main.light,
uptimeFair: warning.contrastText.light,
uptimeGood: warning.main.light /* Change for a success color? */,
uptimeExcellent: success.contrastText.light,
},
unresolved: {
main: unresolved.main.light,
light: unresolved.light.light,
bg: unresolved.bg.light,
},
divider: border.light.light,
other: {
icon: other.icon.light,
line: other.line.light,
fill: secondary.dark.light,
grid: other.grid.light,
autofill: other.autofill.light,
},
gradient: {
color1,
color2,
color3,
color4,
color5,
},
text: {
primary: text.primary.light,
secondary: text.secondary.light,
tertiary: text.tertiary.light,
accent: text.accent.light,
},
background: {
main: background.main.light,
alt: background.alt.light,
fill: background.fill.light,
accent: background.accent.light,
},
border: {
light: border.light.light,
dark: border.dark.light,
},
info: {
text: text.primary.light,
main: text.tertiary.light,
bg: background.main.light,
light: background.main.light,
border: border.dark.light,
},
};
const lightTheme = createTheme({
palette,
...baseTheme(palette),
});
export default lightTheme;