Develop

apps/metamigo-frontend/app/_components/layout/themes.ts

@@ -0,0 +1,99 @@
+export const theme = {
+  spacing: () => 8,
+  palette: {
+    primary: {
+      main: "#337799",
+    },
+    secondary: {
+      light: "#5f5fc4",
+      main: "#283593",
+      dark: "#001064",
+      contrastText: "#fff",
+    },
+    background: {
+      default: "#fff",
+    },
+    getContrastText(color: string) {
+      return color === "#ffffff" ? "#000" : "#fff";
+    },
+  },
+  shape: {
+    borderRadius: 5,
+  },
+  breakpoints: {
+    up: (key: any) => `@media (min-width:${key})`,
+    down: (key: any) => `@media (max-width:${key})`,
+  },
+  transitions: {
+    create(props: any) {
+      return `all ${props.duration}ms ${props.easing}`;
+    },
+    easing: {
+      easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)",
+      easeOut: "cubic-bezier(0.0, 0, 0.2, 1)",
+      easeIn: "cubic-bezier(0.4, 0, 1, 1)",
+      sharp: "cubic-bezier(0.4, 0, 0.6, 1)",
+    },
+    duration: {
+      shortest: 150,
+      shorter: 200,
+      short: 250,
+      standard: 300,
+      complex: 375,
+      enteringScreen: 225,
+      leavingScreen: 195,
+    },
+  },
+  typography: {
+    h6: { fontSize: 16, fontWeight: 600, color: "#1bb1bb" },
+  },
+  overrides: {
+    RaMenuItemLink: {
+      root: {
+        borderLeft: "3px solid #fff",
+      },
+      active: {
+        borderLeft: "3px solid #ef7706",
+      },
+    },
+    MuiPaper: {
+      elevation1: {
+        boxShadow: "none",
+      },
+      root: {
+        border: "1px solid #e0e0e3",
+        backgroundClip: "padding-box",
+      },
+    },
+    MuiButton: {
+      contained: {
+        backgroundColor: "#fff",
+        color: "#4f3cc9",
+        boxShadow: "none",
+      },
+    },
+    MuiAppBar: {
+      colorSecondary: {
+        color: "#fff",
+        backgroundColor: "#337799",
+        border: 0,
+      },
+    },
+    MuiLinearProgress: {
+      colorPrimary: {
+        backgroundColor: "#f5f5f5",
+      },
+      barColorPrimary: {
+        backgroundColor: "#d7d7d7",
+      },
+    },
+    MuiFilledInput: {
+      root: {
+        backgroundColor: "rgba(0, 0, 0, 0.04)",
+        "&$disabled": {
+          backgroundColor: "rgba(0, 0, 0, 0.04)",
+        },
+      },
+    },
+  },
+};