@pablo-amberflo/ui-kit-test
Version:
Amberflo UI Kit
245 lines (243 loc) • 4.84 kB
JavaScript
import { createTheme } from "@mui/material/styles";
export const theme = createTheme({
palette: {
primary: {
main: "#1565c0",
light: "#1E88E5",
dark: "#0D47A1",
},
secondary: {
main: "#F9FBFF",
light: "#DAE9F8",
dark: "#75ACE4",
},
},
typography: {
fontFamily: "Nunito",
h1: {
fontSize: "32px",
fontWeight: 600,
fontStretch: "normal",
fontStyle: "normal",
lineHeight: 1.2,
letterSpacing: "-0.22px",
},
h2: {
fontSize: "28px",
fontWeight: 600,
fontStretch: "normal",
fontStyle: "normal",
lineHeight: 1.2,
letterSpacing: "-0.23px",
},
h3: {
fontSize: "24px",
fontWeight: 600,
fontStretch: "normal",
fontStyle: "normal",
lineHeight: 1.2,
letterSpacing: "normal",
},
h4: {
fontSize: "20px",
fontWeight: 600,
fontStretch: "normal",
fontStyle: "normal",
lineHeight: 1.2,
letterSpacing: "0.04px",
},
h5: {
fontSize: "20px",
fontWeight: "normal",
fontStretch: "normal",
fontStyle: "normal",
lineHeight: 1.2,
letterSpacing: "normal",
},
h6: {
fontSize: "17px",
fontWeight: 600,
fontStretch: "normal",
fontStyle: "normal",
lineHeight: 1.2,
letterSpacing: "-0.06px",
},
subtitle1: {
fontSize: "16px",
fontWeight: 600,
fontStretch: "normal",
fontStyle: "normal",
lineHeight: 1.75,
letterSpacing: "0.09px",
},
subtitle2: {
fontSize: "14px",
fontWeight: 600,
fontStretch: "normal",
fontStyle: "normal",
lineHeight: 1.43,
letterSpacing: "0.07px",
},
body1: {
fontSize: "16px",
fontWeight: "normal",
fontStretch: "normal",
fontStyle: "normal",
lineHeight: 1.5,
letterSpacing: "0.08px",
},
body2: {
fontSize: "14px",
fontWeight: "normal",
fontStretch: "normal",
fontStyle: "normal",
lineHeight: 1.43,
letterSpacing: "0.1px",
},
caption: {
fontSize: "12px",
fontWeight: "normal",
fontStretch: "normal",
fontStyle: "normal",
lineHeight: 1.66,
letterSpacing: "0.3px",
},
overline: {
fontSize: "12px",
fontWeight: "normal",
fontStretch: "normal",
fontStyle: "normal",
lineHeight: 2.58,
letterSpacing: "0.83px",
},
button: {
fontSize: "14px",
fontWeight: 600,
fontStretch: "normal",
fontStyle: "normal",
lineHeight: 1.71,
letterSpacing: "0.3px",
},
},
success: {
main: "#4caf50",
light: "#e6f4e6",
dark: "#388e3c",
},
warning: {
main: "#ff9800",
light: "#FFB74D",
lighter: "#ffe9c9",
dark: "#f57c00",
background: "#fffbf6",
},
error: {
main: "#f44336",
light: "#ffefef",
dark: "#d32f2f",
},
info: {
main: "#1565c0",
medium: "#1E88E5",
light: "#f9fbff",
},
neutral: {
main: "#808080",
medium: "#D0D0D1",
light: "#e0e0e0",
},
text: {
primary: "rgba(0,0,0,0.87)", //Use HEX code
secondary: "#808080",
disabled: "#b2b2b2",
light: "#ffffff",
informative: "#eeeeee", //Redefine or remove
link: "#1565c0",
dark: "#212121",
},
action: {
//Redefine colors
primary: "#1565c0",
secondary: "#5c8dd1",
active: "#dae9f8",
hover: "rgba(255,255,255,0.2)",
selected: "#1565c0",
loading: "#729CE4",
},
background: {
clear: {
main: "#f9f9fc",
light: "#ffffff",
dark: "#f6f6f6",
},
obscure: {
main: "#1b2430",
light: "#232f3e",
dark: "#121820",
},
modal: {
// Redefine
main: "#ffffff",
light: "#eeeeee",
darkOpacity: "rgba(0,0,0,0.5)",
},
table: {
highlight: "#f5fbff",
selected: "#f3f8fe",
},
pieChart: {
colors: [
"#5a6acf",
"#7483e3",
"#929ff5",
"#adb7f5",
"#c7ceff",
"#eeeeee",
],
},
},
dividers: {
main: "#cccccc",
dark: "#b2b2b2",
light: "#eee",
shadow: "rgba(0, 0, 0, 0.12)",
},
border: {
light: "#4791db",
main: "#e8e7ea",
dark: "#cccccc",
disabled: "#e0e0e0",
},
scrollBar: {
dark: "#808080",
borderRadius: "9px",
},
components: {
MuiTable: {
root: {
borderCollapse: "unset",
},
},
MuiTableCell: {
sizeSmall: {
padding: "1rem",
},
},
MuiSelect: {
root: {
padding: "6px",
},
iconOutlined: {
color: "black",
},
outlined: {
paddingLeft: "1rem",
},
},
MuiPaper: {
root: {
boxShadow: "none",
},
},
},
});