342 lines
6.9 KiB
JavaScript
342 lines
6.9 KiB
JavaScript
import { lighten, darken } from "@mui/material/styles"; // CAIO_REVIEW
|
|
|
|
const typographyBase = 13;
|
|
|
|
/* TODO
|
|
Check for px in codebase. All font sizes should be in REM and should live here.
|
|
Rest should be checked on each case
|
|
*/
|
|
const typographyLevels = {
|
|
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`,
|
|
};
|
|
|
|
/* TODO Review color palette and semantic colors */
|
|
const paletteColors = {
|
|
white: "#FFFFFF",
|
|
gray50: "#FEFEFE",
|
|
gray60: "#FEFDFE",
|
|
gray70: "#FDFDFD",
|
|
gray80: "#FDFCFD",
|
|
gray90: "#FCFCFD",
|
|
gray100: "#F4F4F4",
|
|
gray150: "#EFEFEF",
|
|
gray200: "#E3E3E3",
|
|
gray300: "#A2A3A3",
|
|
gray500: "#838C99",
|
|
gray600: "#454546",
|
|
gray750: "#36363E",
|
|
gray800: "#2D2D33",
|
|
gray850: "#131315",
|
|
gray860: "#111113",
|
|
gray870: "#0F0F11",
|
|
gray880: "#0C0C0E",
|
|
gray890: "#09090B",
|
|
blueGray20: "#E8F0FE",
|
|
blueGray150: "#667085",
|
|
blueGray200: "#475467",
|
|
blueGray400: "#344054",
|
|
blueBlueWave: "#1570EF",
|
|
blue700: "#4E5BA6",
|
|
purple300: "#664EFF",
|
|
purple400: "#3A1BFF",
|
|
green50: "#D4F4E1",
|
|
green150: "#45BB7A",
|
|
green400: "#079455",
|
|
green500: "#07B467",
|
|
green800: "#1C4428",
|
|
green900: "#12261E",
|
|
red50: "#F9ECED",
|
|
red100: "#FBD1D1",
|
|
red200: "#F04438",
|
|
red300: "#D32F2F",
|
|
red700: "#542426",
|
|
red800: "#912018",
|
|
orange50: "#FEF8EA",
|
|
orange100: "#FFECBC",
|
|
orange300: "#FDB022",
|
|
orange400: "#FF9F00",
|
|
orange500: "#E88C30",
|
|
orange600: "#DC6803",
|
|
orange800: "#624711",
|
|
};
|
|
|
|
const semanticColors = {
|
|
unresolved: {
|
|
main: {
|
|
light: paletteColors.blue700,
|
|
dark: paletteColors.purple300,
|
|
},
|
|
light: {
|
|
light: paletteColors.blueGray20,
|
|
dark: paletteColors.purple400,
|
|
},
|
|
bg: {
|
|
light: paletteColors.gray100,
|
|
dark: paletteColors.gray100,
|
|
},
|
|
},
|
|
};
|
|
|
|
const newColors = {
|
|
offWhite: "#FEFEFE",
|
|
offBlack: "#131315",
|
|
gray10: "#F4F4FF",
|
|
gray100: "#F3F3F3",
|
|
gray200: "#EFEFEF",
|
|
gray500: "#A2A3A3",
|
|
gray900: "#1c1c1c",
|
|
blueGray50: "#E8F0FE",
|
|
blueGray500: "#475467",
|
|
blueGray600: "#344054",
|
|
blueGray800: "#1C2130",
|
|
blueGray900: "#515151",
|
|
blueBlueWave: "#1570EF",
|
|
lightBlueWave: "#CDE2FF",
|
|
/* I changed green 100 and green 700. Need to change red and warning as well, and refactor the object following the structure */
|
|
green100: "#67cd78",
|
|
green200: "#4B9B77",
|
|
green400: "#079455",
|
|
green700: "#026513",
|
|
orange100: "#FD8F22",
|
|
orange200: "#D69A5D",
|
|
orange600: "#9B734B",
|
|
orange700: "#884605",
|
|
red100: "#F27C7C",
|
|
red400: "#D92020",
|
|
red600: "#9B4B4B",
|
|
red700: "#980303",
|
|
};
|
|
|
|
/*
|
|
Structure:
|
|
main: background color
|
|
contrastText: color for main contrast text
|
|
contrastTextSecondary: if needed
|
|
contrastTextTertiary: if needed
|
|
lowContrast: if we need some low contrast for that color (for borders, and decorative elements). This should never be usend in text
|
|
|
|
*/
|
|
const newSemanticColors = {
|
|
accent: {
|
|
main: {
|
|
light: newColors.blueBlueWave,
|
|
dark: newColors.blueBlueWave,
|
|
},
|
|
light: {
|
|
light: lighten(newColors.blueBlueWave, 0.2), //CAIO_REVIEW
|
|
dark: lighten(newColors.blueBlueWave, 0.2), //CAIO_REVIEW
|
|
},
|
|
darker: {
|
|
// CAIO_REVIEW
|
|
light: darken(newColors.blueBlueWave, 0.2), // CAIO_REVIEW
|
|
dark: darken(newColors.blueBlueWave, 0.2), // CAIO_REVIEW
|
|
},
|
|
|
|
contrastText: {
|
|
light: newColors.offWhite,
|
|
dark: newColors.offWhite,
|
|
},
|
|
},
|
|
primary: {
|
|
main: {
|
|
light: newColors.offWhite,
|
|
dark: newColors.offBlack,
|
|
},
|
|
contrastText: {
|
|
light: newColors.blueGray800,
|
|
dark: newColors.blueGray50,
|
|
},
|
|
contrastTextSecondary: {
|
|
light: newColors.blueGray600,
|
|
dark: newColors.gray200,
|
|
},
|
|
contrastTextSecondaryDarkBg: {
|
|
light: newColors.gray200,
|
|
dark: newColors.gray200,
|
|
},
|
|
contrastTextTertiary: {
|
|
light: newColors.blueGray500,
|
|
dark: newColors.gray500,
|
|
},
|
|
contrastBorder: {
|
|
light: newColors.gray500,
|
|
dark: newColors.blueGray600,
|
|
},
|
|
contrastBorderDisabled: {
|
|
light: newColors.gray100,
|
|
dark: newColors.blueGray800,
|
|
},
|
|
lowContrast: {
|
|
light: newColors.gray200,
|
|
dark: newColors.blueGray600,
|
|
},
|
|
},
|
|
primaryBackground: {
|
|
main: {
|
|
light: newColors.gray10,
|
|
dark: "#000000",
|
|
},
|
|
},
|
|
secondary: {
|
|
main: {
|
|
light: newColors.gray200,
|
|
dark: "#313131" /* newColors.blueGray600 */,
|
|
},
|
|
light: {
|
|
light: newColors.lightBlueWave,
|
|
dark: newColors.lightBlueWave,
|
|
},
|
|
contrastText: {
|
|
light: newColors.blueGray600,
|
|
dark: newColors.gray200,
|
|
},
|
|
},
|
|
tertiary: {
|
|
main: {
|
|
light: newColors.gray100,
|
|
dark: newColors.blueGray800,
|
|
},
|
|
contrastText: {
|
|
light: newColors.blueGray800,
|
|
dark: newColors.gray100,
|
|
},
|
|
},
|
|
success: {
|
|
main: {
|
|
light: newColors.green700,
|
|
dark: newColors.green100,
|
|
},
|
|
contrastText: {
|
|
light: newColors.offWhite,
|
|
dark: newColors.offBlack,
|
|
},
|
|
lowContrast: {
|
|
light: newColors.green400,
|
|
dark: newColors.green200,
|
|
},
|
|
},
|
|
successSecondary: {
|
|
main: {
|
|
light: undefined,
|
|
dark: "#073C2D",
|
|
},
|
|
contrastText: {
|
|
light: undefined,
|
|
dark: "#34D399",
|
|
},
|
|
lowContrast: {
|
|
light: undefined,
|
|
dark: "#094434",
|
|
},
|
|
},
|
|
warning: {
|
|
main: {
|
|
light: newColors.orange700,
|
|
dark: newColors.orange200,
|
|
},
|
|
contrastText: {
|
|
light: newColors.offWhite,
|
|
dark: newColors.offBlack,
|
|
},
|
|
lowContrast: {
|
|
light: newColors.orange100,
|
|
dark: newColors.orange600,
|
|
},
|
|
},
|
|
/* Custom palette for PageSpeed warning box */
|
|
warningSecondary: {
|
|
main: {
|
|
light: paletteColors.orange50,
|
|
dark: paletteColors.orange800,
|
|
},
|
|
contrastText: {
|
|
light: paletteColors.orange600,
|
|
dark: paletteColors.orange100,
|
|
},
|
|
lowContrast: {
|
|
light: paletteColors.orange300,
|
|
dark: paletteColors.orange400,
|
|
},
|
|
},
|
|
error: {
|
|
main: {
|
|
light: newColors.red700,
|
|
dark: newColors.red100,
|
|
},
|
|
contrastText: {
|
|
light: newColors.offWhite,
|
|
dark: newColors.offBlack,
|
|
},
|
|
lowContrast: {
|
|
light: newColors.red400,
|
|
dark: newColors.red600,
|
|
},
|
|
},
|
|
|
|
/* These are temporary, just for everything not to break */
|
|
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,
|
|
},
|
|
},
|
|
|
|
map: {
|
|
main: {
|
|
light: newColors.offWhite,
|
|
dark: undefined,
|
|
},
|
|
lowContrast: {
|
|
light: newColors.gray200,
|
|
dark: undefined,
|
|
},
|
|
highContrast: {
|
|
light: newColors.gray500,
|
|
dark: undefined,
|
|
},
|
|
},
|
|
chatbot: {
|
|
background: {
|
|
light: newColors.gray200,
|
|
dark: "#112B2B",
|
|
},
|
|
textAccent: {
|
|
light: "#C084FC",
|
|
dark: "#C084FC",
|
|
},
|
|
},
|
|
alert: {
|
|
main: {
|
|
light: newColors.gray200,
|
|
dark: newColors.gray900,
|
|
},
|
|
contrastText: {
|
|
light: newColors.blueGray600,
|
|
dark: newColors.blueGray900,
|
|
},
|
|
},
|
|
};
|
|
|
|
export { typographyLevels, semanticColors as colors, newSemanticColors };
|