Initial commit

src/theme/additions/card/Card.js

@@ -0,0 +1,42 @@
+/*!
+
+=========================================================
+* Argon Dashboard Chakra PRO - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
+* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
+
+* Designed and Coded by Simmmple & Creative Tim
+
+=========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+*/
+import { mode } from '@chakra-ui/theme-tools';
+const Card = {
+  baseStyle: (props) => ({
+    p: "22px",
+    display: "flex",
+    flexDirection: "column",
+    width: "100%",
+    boxShadow: "0px 5px 14px rgba(0, 0, 0, 0.05)",
+    borderRadius: "20px",
+    position: "relative",
+    wordWrap: "break-word",
+    bg: mode('#ffffff', '#111C44')(props),
+    backgroundClip: "border-box", 
+  }),
+  variants: {
+    panel: (props) => ({
+      bg: props.colorMode === "dark" ? "#111C44" : "white",
+    }),
+  }, 
+};
+
+export const CardComponent = {
+  components: {
+    Card,
+  },
+};

src/theme/additions/layout/MainPanel.js

@@ -0,0 +1,49 @@
+/*!
+
+=========================================================
+* Argon Dashboard Chakra PRO - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
+* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
+
+* Designed and Coded by Simmmple & Creative Tim
+
+=========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+*/
+
+const MainPanel = {
+  baseStyle: {
+    float: "right",
+    maxWidth: "100%",
+    minHeight: "100vh",
+    height: "100%",
+    overflow: "auto",
+    position: "relative",
+    maxHeight: "100%",
+    transition: "all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1)",
+    transitionDuration: ".2s, .2s, .35s",
+    transitionProperty: "top, bottom, width",
+    transitionTimingFunction: "linear, linear, ease",
+  },
+  variants: {
+    main: (props) => ({
+      float: "right",
+    }),
+    rtl: (props) => ({
+      float: "left",
+    }),
+  },
+  defaultProps: {
+    variant: "main",
+  },
+};
+
+export const MainPanelComponent = {
+  components: {
+    MainPanel,
+  },
+};

src/theme/additions/layout/PanelContainer.js

@@ -0,0 +1,29 @@
+/*!
+
+=========================================================
+* Argon Dashboard Chakra PRO - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
+* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
+
+* Designed and Coded by Simmmple & Creative Tim
+
+=========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+*/
+
+const PanelContainer = {
+  baseStyle: {
+    padding: "30px 30px",
+    minHeight: "100vh",
+  },
+};
+
+export const PanelContainerComponent = {
+  components: {
+    PanelContainer,
+  },
+};

src/theme/additions/layout/PanelContent.js

@@ -0,0 +1,29 @@
+/*!
+
+=========================================================
+* Argon Dashboard Chakra PRO - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
+* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
+
+* Designed and Coded by Simmmple & Creative Tim
+
+=========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+*/
+
+const PanelContent = {
+  baseStyle: {
+    ms: "auto",
+    me: "auto",
+  },
+};
+
+export const PanelContentComponent = {
+  components: {
+    PanelContent,
+  },
+};

src/theme/components/badge.js

@@ -0,0 +1,32 @@
+/*!
+
+=========================================================
+* Argon Dashboard Chakra PRO - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
+* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
+
+* Designed and Coded by Simmmple & Creative Tim
+
+=========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+*/
+
+export const badgeStyles = {
+  components: {
+    Badge: {
+      sizes: {
+        md: {
+          width: "65px",
+          height: "25px",
+        },
+      },
+      baseStyle: {
+        textTransform: "capitalize",
+      },
+    },
+  },
+};

src/theme/components/button.js

@@ -0,0 +1,86 @@
+/*!
+
+=========================================================
+* Argon Dashboard Chakra PRO - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
+* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
+
+* Designed and Coded by Simmmple & Creative Tim
+
+=========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+*/
+
+import { mode } from "@chakra-ui/theme-tools";
+export const buttonStyles = {
+  components: {
+    Button: {
+      variants: {
+        primary: {
+          fontSize: "10px",
+          bg: "blue.400",
+          color: "#fff",
+          _hover: { bg: "blue.300" },
+          _focus: { bg: "blue.300" },
+          _active: { bg: "blue.300" },
+        },
+        navy: {
+          fontSize: "10px",
+          bg: "navy.900",
+          color: "#fff",
+          _hover: { bg: "navy.800" },
+          _focus: { bg: "navy.800" },
+          _active: { bg: "navy.800" },
+        },
+        "no-effects": {
+          _hover: {},
+          _active: {},
+          _focus: {},
+        },
+        danger: () => ({
+          color: "white",
+          bg: "red.500",
+          fontSize: "10px",
+          _hover: "red.400",
+          _focus: "red.400",
+          _active: "red.400",
+        }),
+        outlined: (props) => ({
+          color: mode("blue.400", "white")(props),
+          bg: "transparent",
+          fontSize: "10px",
+          border: "1px solid",
+          borderColor: { bg: mode("blue.400", "white")(props) },
+          _hover: { bg: mode("blue.50", "transparent")(props) },
+          _focus: { bg: mode("blue.50", "transparent")(props) },
+          _active: { bg: mode("blue.50", "transparent")(props) },
+        }),
+        dark: (props) => ({
+          color: "white",
+          bg: mode("gray.700", "blue.500")(props),
+          fontSize: "10px",
+          _hover: { bg: mode("gray.700", "blue.500")(props) },
+          _focus: { bg: mode("gray.700", "blue.600")(props) },
+          _active: { bg: mode("gray.700", "blue.400")(props) },
+        }),
+        light: (props) => ({
+          color: mode("gray.700", "gray.700")(props),
+          bg: mode("gray.100", "white")(props),
+          fontSize: "10px",
+          _hover: { bg: mode("gray.50", "white")(props) },
+          _focus: { bg: mode("gray.50", "white")(props) },
+          _active: { bg: mode("gray.50", "white")(props) },
+        }),
+      },
+      baseStyle: {
+        fontWeight: "bold",
+        borderRadius: "8px",
+        fontSize: "10px",
+      },
+    },
+  },
+};

src/theme/components/input.js

@@ -0,0 +1,132 @@
+import { mode } from "@chakra-ui/theme-tools";
+export const inputStyles = {
+  components: {
+    Input: {
+      baseStyle: {
+        field: {
+          fontWeight: 400,
+          borderRadius: "8px",
+        },
+      },
+
+      variants: {
+        main: (props) => ({
+          field: {
+            bg: mode("white", "navy.900")(props),
+            border: "1px solid",
+            borderColor: mode("gray.200", "transparent")(props),
+            _placeholder: { color: mode("gray.300", "gray.400")(props) },
+          },
+        }),
+        auth: (props) => ({
+          field: {
+            bg: mode("white", "navy.700")(props),
+            border: "1px solid",
+            borderColor: mode("gray.200", "transparent")(props),
+            _placeholder: { color: mode("gray.300", "gray.400")(props) },
+          },
+        }),
+        authSecondary: (props) => ({
+          field: {
+            bg: mode("white", "navy.800")(props),
+            border: "1px solid",
+            borderColor: mode("gray.200", "transparent")(props),
+            _placeholder: { color: mode("gray.300", "gray.400")(props) },
+          },
+        }),
+        search: (props) => ({
+          field: {
+            border: "none",
+            py: "11px",
+            borderRadius: "inherit",
+            _placeholder: { color: mode("gray.300", "gray.400")(props) },
+          },
+        }),
+      },
+    },
+    NumberInput: {
+      baseStyle: {
+        field: {
+          fontWeight: 400,
+        },
+      },
+
+      variants: {
+        main: (props) => ({
+          field: {
+            bg: mode("white", "navy.900")(props),
+            border: "1px solid",
+            borderColor: mode("gray.200", "transparent")(props),
+            _placeholder: { color: mode("gray.300", "gray.400")(props) },
+          },
+        }),
+        auth: (props) => ({
+          field: {
+            bg: mode("white", "navy.700")(props),
+            border: "1px solid",
+            borderColor: mode("gray.200", "transparent")(props),
+            _placeholder: { color: mode("gray.300", "gray.400")(props) },
+          },
+        }),
+        authSecondary: (props) => ({
+          field: {
+            bg: mode("white", "navy.800")(props),
+            border: "1px solid",
+            borderColor: mode("gray.200", "transparent")(props),
+            _placeholder: { color: mode("gray.300", "gray.400")(props) },
+          },
+        }),
+        search: (props) => ({
+          field: {
+            border: "none",
+            py: "11px",
+            borderRadius: "inherit",
+            _placeholder: { color: mode("gray.300", "gray.400")(props) },
+          },
+        }),
+      },
+    },
+    Select: {
+      baseStyle: {
+        field: {
+          fontWeight: 400,
+        },
+      },
+
+      variants: {
+        main: (props) => ({
+          field: {
+            bg: mode("white", "navy.900")(props),
+            border: "1px solid",
+            borderColor: mode("gray.200", "transparent")(props),
+            _placeholder: { color: mode("gray.300", "gray.400")(props) },
+          },
+        }),
+        auth: (props) => ({
+          field: {
+            bg: mode("white", "navy.700")(props),
+            border: "1px solid",
+            borderColor: mode("gray.200", "transparent")(props),
+            _placeholder: { color: mode("gray.300", "gray.400")(props) },
+          },
+        }),
+        authSecondary: (props) => ({
+          field: {
+            bg: mode("white", "navy.800")(props),
+            border: "1px solid",
+            borderColor: mode("gray.200", "transparent")(props),
+            _placeholder: { color: mode("gray.300", "gray.400")(props) },
+          },
+        }),
+        search: (props) => ({
+          field: {
+            border: "none",
+            py: "11px",
+            borderRadius: "inherit",
+            _placeholder: { color: mode("gray.300", "gray.400")(props) },
+          },
+        }),
+      },
+    },
+  },
+};

src/theme/components/link.js

@@ -0,0 +1,33 @@
+/*!
+
+=========================================================
+* Argon Dashboard Chakra PRO - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
+* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
+
+* Designed and Coded by Simmmple & Creative Tim
+
+=========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+*/
+
+export const linkStyles = {
+  components: {
+    Link: {
+      // 3. We can add a new visual variant
+      decoration: "none",
+      baseStyle: {
+        _hover: {
+          textDecoration: "none",
+        },
+        _focus: {
+          boxShadow: "none",
+        },
+      },
+    },
+  },
+};

src/theme/foundations/breakpoints.js

@@ -0,0 +1,27 @@
+/*!
+
+=========================================================
+* Argon Dashboard Chakra PRO - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
+* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
+
+* Designed and Coded by Simmmple & Creative Tim
+
+=========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+*/
+
+// 1. Import the utilities
+import { createBreakpoints } from "@chakra-ui/theme-tools";
+// 2. Update the breakpoints as key-value pairs
+export const breakpoints = createBreakpoints({
+  sm: "320px",
+  md: "768px",
+  lg: "960px",
+  xl: "1200px",
+  "2xl": "1600px",
+});

src/theme/index.js

@@ -0,0 +1 @@
+export { default } from './theme';

src/theme/styles.js

@@ -0,0 +1,82 @@
+/*!
+
+=========================================================
+* Argon Dashboard Chakra PRO - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
+* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
+
+* Designed and Coded by Simmmple & Creative Tim
+
+=========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+*/
+
+import { mode } from "@chakra-ui/theme-tools";
+
+export const globalStyles = {
+  colors: {
+    gray: {
+      700: "#1f2733",
+    },
+    navy: {
+      50: "#d0dcfb",
+      100: "#aac0fe",
+      200: "#a3b9f8",
+      300: "#728fea",
+      400: "#3652ba",
+      500: "#1b3bbb",
+      600: "#24388a",
+      600: "#24388a",
+      700: "#1b254b",
+      800: "#111c44",
+      900: "#0b1437",
+    },
+    // Brainwave深色主题色彩系统
+    brainwave: {
+      // 渐变色系
+      purple: "#AC6AFF",
+      orange: "#FFC876", 
+      red: "#FF776F",
+      green: "#7ADB78",
+      blue: "#858DFF",
+      pink: "#FF98E2",
+      // 中性色系 (n)
+      white: "#FFFFFF",
+      n1: "#FFFFFF",
+      n2: "#CAC6DD", 
+      n3: "#ADA8C3",
+      n4: "#757185",
+      n5: "#3F3A52",
+      n6: "#252134",
+      n7: "#15131D",
+      n8: "#0E0C15",
+      // 描边色
+      stroke: "#26242C",
+    },
+    // 快捷访问色彩
+    brand: {
+      primary: "#AC6AFF",
+      secondary: "#FFC876",
+      accent: "#7ADB78",
+      dark: "#0E0C15",
+      darkLight: "#15131D",
+      darkMedium: "#252134",
+    },
+  },
+  styles: {
+    global: (props) => ({
+      body: {
+        overflowX: "hidden",
+        bg: mode("gray.50", "#1B254B")(props),
+        fontFamily: "Helvetica, sans-serif",
+      },
+      html: {
+        fontFamily: "Helvetica, sans-serif",
+      },
+    }),
+  },
+};

src/theme/theme.js

@@ -0,0 +1,41 @@
+/*!
+
+=========================================================
+* Argon Dashboard Chakra PRO - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro
+* Copyright 2022 Creative Tim (https://www.creative-tim.com/)
+
+* Designed and Coded by Simmmple & Creative Tim
+
+=========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+*/
+
+import { extendTheme } from "@chakra-ui/react";
+import { globalStyles } from "./styles";
+import { breakpoints } from "./foundations/breakpoints";
+import { buttonStyles } from "./components/button";
+import { badgeStyles } from "./components/badge";
+import { linkStyles } from "./components/link";
+import { inputStyles } from "./components/input";
+import { CardComponent } from "./additions/card/Card";
+import { MainPanelComponent } from "./additions/layout/MainPanel";
+import { PanelContentComponent } from "./additions/layout/PanelContent";
+import { PanelContainerComponent } from "./additions/layout/PanelContainer";
+// import { mode } from "@chakra-ui/theme-tools";
+export default extendTheme(
+  { breakpoints }, // Breakpoints
+  globalStyles,
+  buttonStyles, // Button styles
+  badgeStyles, // Badge styles
+  linkStyles, // Link styles
+  inputStyles, // Input styles
+  CardComponent, // Card component
+  MainPanelComponent, // Main Panel component
+  PanelContentComponent, // Panel Content component
+  PanelContainerComponent // Panel Container component
+);