mirror of
https://github.com/stefanpejcic/openpanel
synced 2025-06-26 18:28:26 +00:00
fork refine
This commit is contained in:
101
packages/mui/src/theme/index.ts
Normal file
101
packages/mui/src/theme/index.ts
Normal file
@@ -0,0 +1,101 @@
|
||||
import type { Theme, ThemeOptions } from "@mui/material/styles";
|
||||
import { createTheme } from "@mui/material/styles";
|
||||
|
||||
import { lightPalette } from "./palette/lightPalette";
|
||||
import { darkPalette } from "./palette/darkPalette";
|
||||
import { typography } from "./typography";
|
||||
import { RefinePalettes } from "./palette";
|
||||
|
||||
const commonThemeProperties: ThemeOptions = {
|
||||
shape: {
|
||||
borderRadius: 6,
|
||||
},
|
||||
typography: {
|
||||
...typography,
|
||||
},
|
||||
};
|
||||
|
||||
const LightTheme = createTheme({
|
||||
...commonThemeProperties,
|
||||
palette: lightPalette,
|
||||
components: {
|
||||
MuiAppBar: {
|
||||
styleOverrides: {
|
||||
colorDefault: {
|
||||
backgroundColor: "#fff",
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiPaper: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
backgroundImage:
|
||||
"linear-gradient(rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0.01))",
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiTypography: {
|
||||
styleOverrides: {
|
||||
h5: {
|
||||
fontWeight: 800,
|
||||
lineHeight: "2rem",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const DarkTheme = createTheme({
|
||||
...commonThemeProperties,
|
||||
palette: darkPalette,
|
||||
components: {
|
||||
MuiPaper: {
|
||||
styleOverrides: {
|
||||
root: {
|
||||
backgroundImage:
|
||||
"linear-gradient(rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.025))",
|
||||
},
|
||||
},
|
||||
},
|
||||
MuiAppBar: {
|
||||
defaultProps: {
|
||||
color: "transparent",
|
||||
},
|
||||
},
|
||||
MuiTypography: {
|
||||
styleOverrides: {
|
||||
h5: {
|
||||
fontWeight: 800,
|
||||
lineHeight: "2rem",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const RefineThemes = Object.keys(RefinePalettes).reduce((acc, key) => {
|
||||
const paletteName = key as keyof typeof RefinePalettes;
|
||||
|
||||
return {
|
||||
...acc,
|
||||
[key]: createTheme({
|
||||
palette: {
|
||||
...RefinePalettes[paletteName],
|
||||
},
|
||||
components: {
|
||||
MuiButton: {
|
||||
styleOverrides: {
|
||||
root: ({ ownerState }) => ({
|
||||
...(ownerState.variant === "contained" &&
|
||||
ownerState.color === "primary" && {
|
||||
color: "#fff",
|
||||
}),
|
||||
}),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
};
|
||||
}, {}) as Record<keyof typeof RefinePalettes, Theme>;
|
||||
|
||||
export { LightTheme, DarkTheme, RefineThemes };
|
||||
39
packages/mui/src/theme/palette/darkPalette.ts
Normal file
39
packages/mui/src/theme/palette/darkPalette.ts
Normal file
@@ -0,0 +1,39 @@
|
||||
import type { PaletteOptions } from "@mui/material/styles";
|
||||
|
||||
export const darkPalette: PaletteOptions = {
|
||||
mode: "dark",
|
||||
primary: {
|
||||
main: "#67be23",
|
||||
contrastText: "#fff",
|
||||
},
|
||||
secondary: {
|
||||
main: "#2A132E",
|
||||
contrastText: "#fff",
|
||||
},
|
||||
background: {
|
||||
default: "#212121",
|
||||
paper: "#242424",
|
||||
},
|
||||
success: {
|
||||
main: "#67be23",
|
||||
contrastText: "#fff",
|
||||
},
|
||||
error: {
|
||||
main: "#ee2a1e",
|
||||
contrastText: "#fff",
|
||||
},
|
||||
warning: {
|
||||
main: "#fa8c16",
|
||||
contrastText: "#fff",
|
||||
},
|
||||
info: {
|
||||
main: "#1890ff",
|
||||
contrastText: "#fff",
|
||||
},
|
||||
divider: "rgba(0,0,0,0)",
|
||||
text: {
|
||||
primary: "#fff",
|
||||
secondary: "rgba(255,255,255,0.7)",
|
||||
disabled: "#d1d1d1",
|
||||
},
|
||||
};
|
||||
3
packages/mui/src/theme/palette/index.tsx
Normal file
3
packages/mui/src/theme/palette/index.tsx
Normal file
@@ -0,0 +1,3 @@
|
||||
export { darkPalette } from "./darkPalette";
|
||||
export { lightPalette } from "./lightPalette";
|
||||
export { RefinePalettes } from "./refinePalette";
|
||||
39
packages/mui/src/theme/palette/lightPalette.ts
Normal file
39
packages/mui/src/theme/palette/lightPalette.ts
Normal file
@@ -0,0 +1,39 @@
|
||||
import type { PaletteOptions } from "@mui/material/styles";
|
||||
|
||||
export const lightPalette: PaletteOptions = {
|
||||
mode: "light",
|
||||
primary: {
|
||||
main: "#67be23",
|
||||
contrastText: "#fff",
|
||||
},
|
||||
secondary: {
|
||||
main: "#2A132E",
|
||||
contrastText: "#fff",
|
||||
},
|
||||
background: {
|
||||
default: "#f0f0f0",
|
||||
paper: "#ffffff",
|
||||
},
|
||||
success: {
|
||||
main: "#67be23",
|
||||
contrastText: "#fff",
|
||||
},
|
||||
error: {
|
||||
main: "#fa541c",
|
||||
contrastText: "#fff",
|
||||
},
|
||||
warning: {
|
||||
main: "#fa8c16",
|
||||
contrastText: "#fff",
|
||||
},
|
||||
info: {
|
||||
main: "#0b82f0",
|
||||
contrastText: "#fff",
|
||||
},
|
||||
divider: "rgba(0,0,0,0)",
|
||||
text: {
|
||||
primary: "#626262",
|
||||
secondary: "#9f9f9f",
|
||||
disabled: "#c1c1c1",
|
||||
},
|
||||
};
|
||||
114
packages/mui/src/theme/palette/refinePalette.ts
Normal file
114
packages/mui/src/theme/palette/refinePalette.ts
Normal file
@@ -0,0 +1,114 @@
|
||||
export const RefinePalettes = {
|
||||
Blue: {
|
||||
mode: "light",
|
||||
primary: {
|
||||
main: "#1976D2",
|
||||
light: "#4791db",
|
||||
dark: "#115293",
|
||||
},
|
||||
},
|
||||
BlueDark: {
|
||||
mode: "dark",
|
||||
primary: {
|
||||
main: "#67b7f7",
|
||||
light: "#85c5f8",
|
||||
dark: "#4880ac",
|
||||
},
|
||||
},
|
||||
Purple: {
|
||||
mode: "light",
|
||||
primary: {
|
||||
main: "#7B1FA2",
|
||||
light: "#954bb4",
|
||||
dark: "#561571",
|
||||
},
|
||||
},
|
||||
PurpleDark: {
|
||||
mode: "dark",
|
||||
primary: {
|
||||
main: "#AB47BC",
|
||||
light: "#bb6bc9",
|
||||
dark: "#773183",
|
||||
},
|
||||
},
|
||||
Magenta: {
|
||||
mode: "light",
|
||||
primary: {
|
||||
main: "#C2185B",
|
||||
light: "#ce467b",
|
||||
dark: "#87103f",
|
||||
},
|
||||
},
|
||||
MagentaDark: {
|
||||
mode: "dark",
|
||||
primary: {
|
||||
main: "#EC407A",
|
||||
light: "#ef6694",
|
||||
dark: "#a52c55",
|
||||
},
|
||||
},
|
||||
Red: {
|
||||
mode: "light",
|
||||
primary: {
|
||||
main: "#D32F2F",
|
||||
light: "#db5858",
|
||||
dark: "#932020",
|
||||
},
|
||||
},
|
||||
RedDark: {
|
||||
mode: "dark",
|
||||
primary: {
|
||||
main: "#EF5350",
|
||||
light: "#f27573",
|
||||
dark: "#a73a38",
|
||||
},
|
||||
},
|
||||
Orange: {
|
||||
mode: "light",
|
||||
primary: {
|
||||
main: "#F57C00",
|
||||
light: "#f79633",
|
||||
dark: "#ab5600",
|
||||
},
|
||||
},
|
||||
OrangeDark: {
|
||||
mode: "dark",
|
||||
primary: {
|
||||
main: "#FFA726",
|
||||
light: "#ffb851",
|
||||
dark: "#b2741a",
|
||||
},
|
||||
},
|
||||
Yellow: {
|
||||
mode: "light",
|
||||
primary: {
|
||||
main: "#FFA000",
|
||||
light: "#ffb333",
|
||||
dark: "#b27000",
|
||||
},
|
||||
},
|
||||
YellowDark: {
|
||||
mode: "dark",
|
||||
primary: {
|
||||
main: "#FFCA28",
|
||||
light: "#ffd453",
|
||||
dark: "#E87040",
|
||||
},
|
||||
},
|
||||
Green: {
|
||||
mode: "light",
|
||||
primary: {
|
||||
main: "#689F38",
|
||||
light: "#86b25f",
|
||||
dark: "#486f27",
|
||||
},
|
||||
},
|
||||
GreenDark: {
|
||||
mode: "dark",
|
||||
primary: {
|
||||
main: "#9CCC65",
|
||||
light: "#afd683",
|
||||
dark: "#6d8e46",
|
||||
},
|
||||
},
|
||||
} as const;
|
||||
17
packages/mui/src/theme/typography.ts
Normal file
17
packages/mui/src/theme/typography.ts
Normal file
@@ -0,0 +1,17 @@
|
||||
import type { TypographyVariantsOptions } from "@mui/material/styles";
|
||||
|
||||
export const typography: TypographyVariantsOptions = {
|
||||
fontFamily: [
|
||||
"Montserrat",
|
||||
"-apple-system",
|
||||
"BlinkMacSystemFont",
|
||||
'"Segoe UI"',
|
||||
"Roboto",
|
||||
'"Helvetica Neue"',
|
||||
"Arial",
|
||||
"sans-serif",
|
||||
'"Apple Color Emoji"',
|
||||
'"Segoe UI Emoji"',
|
||||
'"Segoe UI Symbol"',
|
||||
].join(","),
|
||||
};
|
||||
Reference in New Issue
Block a user