@campxdev/react-blueprint 0.1.0

package/src/themes/commonTheme.ts

@@ -0,0 +1,443 @@
+import { Components } from "@mui/material";
+import { TypographyOptions } from "@mui/material/styles/createTypography";
+import { DarkColorTokens, LightColorTokens } from "./colorTokens";
+import { customCssBaseline } from "./customCssBaseline";
+
+declare module "@mui/material/Typography" {
+  interface TypographyPropsVariantOverrides {
+    label1: true;
+    label2: true;
+    subtitle3: true;
+  }
+}
+
+//   typography: {
+//     fontFamily: ["Heebo", "Poppins", "sans-serif"].join(","),
+//   },
+//   components: {
+//     MuiIconButton: {
+//       defaultProps: {
+//         disableRipple: true,
+//         disableFocusRipple: true,
+//         disableTouchRipple: true,
+//       },
+//       styleOverrides: {
+//         root: {
+//           borderRadius: "10px",
+//         },
+//       },
+//     },
+//     MuiButtonBase: {
+//       defaultProps: {},
+//       styleOverrides: {
+//         root: {},
+//       },
+//     },
+//     MuiButton: {
+//       defaultProps: {},
+//       styleOverrides: {
+//         root: {
+//           textTransform: "none",
+//           padding: "5px 30px ",
+//           maxHeight: "40px ",
+//           borderRadius: "5px ",
+//           boxShadow: "none ",
+//           fontSize: "14px ",
+//           fontFamily: "Poppins",
+//           fontWeight: 600,
+//           "&:hover": {
+//             boxShadow: "none ",
+//             "@media (hover: none )": {
+//               boxShadow: "none ",
+//             },
+//           },
+//           "&$focusVisible": {
+//             boxShadow: "none",
+//           },
+//           "&:active": {
+//             boxShadow: "none",
+//           },
+//           "&$disabled": { boxShadow: "none" },
+//         },
+//       },
+//     },
+//     MuiLink: {
+//       defaultProps: {
+//         underline: "none",
+//       },
+//     },
+//     MuiTextField: {
+//       defaultProps: {
+//         variant: "outlined",
+//         color: "primary",
+//         fullWidth: true,
+//       },
+//       styleOverrides: {
+//         root: {
+//           "& label": {
+//             display: "none",
+//           },
+//           "& legend": {
+//             "& span": {
+//               display: "none",
+//             },
+//           },
+//           minWidth: "350px",
+//         },
+//       },
+//     },
+//     MuiInputBase: {
+//       styleOverrides: {
+//         root: {
+//           fontSize: "16px !important",
+//           fontFamily: "Heebo !important",
+//           fontWeight: 300,
+//           color: "#FFFFFF",
+//           "&.Mui-disabled": {
+//             backgroundColor: "#F8F8F8",
+//             color: "#a0a0a0",
+//           },
+//         },
+//       },
+//     },
+//     MuiOutlinedInput: {
+//       styleOverrides: {
+//         root: {
+//           "& label": {
+//             display: "none",
+//           },
+//           "& legend": {
+//             "& span": {
+//               display: "none",
+//             },
+//           },
+//           "&.Mui-disabled": {
+//             backgroundColor: "#f0f0f0",
+//           },
+//           maxHeight: "40px",
+//           maxWidth: "400px",
+//         },
+//       },
+//     },
+//     MuiFormLabel: {
+//       styleOverrides: {
+//         root: {
+//           fontSize: "14px",
+//           color: "#959595",
+//         },
+//       },
+//     },
+//     MuiTypography: {
+//       styleOverrides: {
+//         h6: {
+//           fontSize: "24px",
+//           fontWeight: 800,
+//           fontFamily: "Poppins",
+//           color: LightColorTokens.text.primary,
+//         },
+//         subtitle1: {
+//           fontSize: "18px",
+//           fontWeight: 600,
+//           fontFamily: "Poppins",
+//           color: LightColorTokens.text.primary,
+//         },
+//         subtitle2: {
+//           fontSize: "16px",
+//           fontWeight: 600,
+//           fontFamily: "Poppins",
+//           color: LightColorTokens.text.primary,
+//         },
+//         subtitle3: {
+//           fontSize: "14px",
+//           fontWeight: 400,
+//           fontFamily: "Poppins",
+//           color: LightColorTokens.text.primary,
+//         },
+//         body1: {
+//           fontSize: "16px",
+//           fontWeight: 600,
+//           fontFamily: "Heebo",
+//           color: LightColorTokens.text.primary,
+//         },
+//         body2: {
+//           fontSize: "14px",
+//           fontWeight: 400,
+//           fontFamily: "Heebo",
+//           color: LightColorTokens.text.primary,
+//         },
+//         caption: {
+//           fontSize: "12px",
+//           fontWeight: 400,
+//           fontFamily: "Heebo",
+//           color: LightColorTokens.text.primary,
+//         },
+//         label1: {
+//           fontSize: "14px",
+//           fontWeight: 300,
+//           fontFamily: "Heebo",
+//           color: LightColorTokens.text.secondary,
+//         },
+//         label2: {
+//           fontSize: "14px",
+//           fontWeight: 300,
+//           fontFamily: "Poppins",
+//           color: LightColorTokens.text.secondary,
+//         },
+//       } as TypographyOptions,
+//     },
+//     MuiCssBaseline: {
+//       styleOverrides: customCssBaseline,
+//     },
+//   } as Components,
+// };
+export enum Theme {
+  LIGHT = "light",
+  DARK = "dark",
+}
+export const getCommonTheme = (mode: Theme) => {
+  const ColorTokens = mode == Theme.DARK ? DarkColorTokens : LightColorTokens;
+  return {
+    typography: {
+      fontFamily: ["Heebo", "Poppins", "sans-serif"].join(","),
+    },
+    components: {
+      MuiIconButton: {
+        defaultProps: {
+          disableRipple: true,
+          disableFocusRipple: true,
+          disableTouchRipple: true,
+        },
+        styleOverrides: {
+          root: {
+            borderRadius: "10px",
+          },
+        },
+      },
+      MuiMenu: {
+        styleOverrides: {
+          list: {
+            minWidth: "240px",
+            padding: 0,
+            "& li": {
+              borderBottom: "1212121A",
+              ":hover": {
+                backgroundColor: "rgba(0, 0, 0, 0.025)",
+              },
+            },
+            "& > :last-child": {
+              borderBottom: "none",
+              "& li": {
+                borderBottom: "none",
+              },
+            },
+          },
+          paper: {
+            borderRadius: "5px",
+            border: `1px solid ${ColorTokens.secondary.main}`,
+            marginTop: "10px",
+            boxShadow: "0px 5px 15px #0000001A",
+            "&::-webkit-scrollbar": {
+              width: "0.5em",
+              height: "0.5em",
+            },
+            "&::-webkit-scrollbar-thumb": {
+              backgroundColor: "rgba(0, 0, 0, 0.15)",
+              borderRadius: "3px",
+            },
+          },
+        },
+      },
+      MuiButton: {
+        defaultProps: {},
+        styleOverrides: {
+          root: {
+            textTransform: "none",
+            padding: "5px 30px ",
+            maxHeight: "40px ",
+            borderRadius: "5px ",
+            boxShadow: "none ",
+            fontSize: "14px ",
+            fontFamily: "Poppins",
+            fontWeight: 600,
+            "&:hover": {
+              boxShadow: "none ",
+              "@media (hover: none )": {
+                boxShadow: "none ",
+              },
+            },
+            "&$focusVisible": {
+              boxShadow: "none",
+            },
+            "&:active": {
+              boxShadow: "none",
+            },
+            "&$disabled": { boxShadow: "none" },
+          },
+        },
+      },
+      MuiTextField: {
+        defaultProps: {
+          variant: "outlined",
+          color: "primary",
+          fullWidth: true,
+        },
+        styleOverrides: {
+          root: {
+            "& label": {
+              display: "none",
+            },
+            "& legend": {
+              "& span": {
+                display: "none",
+              },
+            },
+            minWidth: "350px",
+          },
+        },
+      },
+      MuiSwitch: {
+        styleOverrides: {
+          root: {
+            width: 45,
+            height: 26,
+            padding: 0,
+            "& .MuiSwitch-switchBase": {
+              padding: 0,
+              margin: 2,
+              transitionDuration: "500ms",
+              "&.Mui-checked": {
+                transform: "translateX(18px)",
+                "& + .MuiSwitch-track": {
+                  backgroundColor: ColorTokens.grey.main,
+                  opacity: 1,
+                  border: 0,
+                },
+                "& .MuiSwitch-thumb": {
+                  boxSizing: "border-box",
+                  backgroundColor: ColorTokens.primary.main,
+                  width: 22,
+                  height: 22,
+                },
+                "&.Mui-disabled + .MuiSwitch-track": {
+                  opacity: 0.5,
+                },
+              },
+            },
+            "& .MuiSwitch-thumb": {
+              boxSizing: "border-box",
+              backgroundColor: ColorTokens.background.paper,
+              width: 22,
+              height: 22,
+            },
+            "& .MuiSwitch-track": {
+              borderRadius: 13,
+              backgroundColor: ColorTokens.grey.main,
+              opacity: 1,
+            },
+            "&.Mui-disabled + .MuiSwitch-track": {
+              opacity: 0.1,
+            },
+            "&.Mui-disabled + .MuiSwitch-thumb": {
+              opacity: 0.1,
+            },
+          },
+        },
+      },
+      MuiOutlinedInput: {
+        styleOverrides: {
+          root: {
+            "& label": {
+              display: "none",
+            },
+            "& legend": {
+              "& span": {
+                display: "none",
+              },
+            },
+            maxHeight: "40px",
+            maxWidth: "400px",
+            fontSize: "16px",
+            fontFamily: "Heebo",
+            fontWeight: 300,
+            color: ColorTokens.text.primary,
+          },
+        },
+      },
+      MuiLink: {
+        defaultProps: {
+          underline: "none",
+        },
+      },
+      MuiFormLabel: {
+        styleOverrides: {
+          root: {
+            fontSize: "14px",
+            color: "#959595",
+          },
+        },
+      },
+
+      MuiTypography: {
+        styleOverrides: {
+          h6: {
+            fontSize: "24px",
+            fontWeight: 800,
+            fontFamily: "Poppins",
+            color: ColorTokens.text.primary,
+          },
+          subtitle1: {
+            fontSize: "18px",
+            fontWeight: 600,
+            fontFamily: "Poppins",
+            color: ColorTokens.text.primary,
+          },
+          subtitle2: {
+            fontSize: "16px",
+            fontWeight: 600,
+            fontFamily: "Poppins",
+            color: ColorTokens.text.primary,
+          },
+          subtitle3: {
+            fontSize: "14px",
+            fontWeight: 400,
+            fontFamily: "Poppins",
+            color: ColorTokens.text.primary,
+          },
+          body1: {
+            fontSize: "16px",
+            fontWeight: 600,
+            fontFamily: "Heebo",
+            color: ColorTokens.text.primary,
+          },
+          body2: {
+            fontSize: "14px",
+            fontWeight: 400,
+            fontFamily: "Heebo",
+            color: ColorTokens.text.primary,
+          },
+          caption: {
+            fontSize: "12px",
+            fontWeight: 400,
+            fontFamily: "Heebo",
+            color: ColorTokens.text.secondary,
+          },
+          label1: {
+            fontSize: "14px",
+            fontWeight: 400,
+            fontFamily: "Heebo",
+            color: ColorTokens.text.secondary,
+          },
+          label2: {
+            fontSize: "12px",
+            fontWeight: 400,
+            fontFamily: "Poppins",
+            color: ColorTokens.text.secondary,
+          },
+        } as TypographyOptions,
+      },
+      MuiCssBaseline: {
+        styleOverrides: customCssBaseline,
+      },
+    } as Components,
+  };
+};

package/src/themes/customCssBaseline.ts

@@ -0,0 +1,39 @@
+import { heeboMedium, heeboSemiBold } from "../assets/fonts/heebo";
+import {
+  boldPoppins,
+  mediumPoppins,
+  semiboldPoppins,
+} from "../assets/fonts/poppins";
+
+export const customCssBaseline = `
+    @font-face {
+      font-family: Poppins;
+      src: url(${mediumPoppins}) format('truetype');
+      font-display: swap;
+      font-weight: 400;
+    }
+    @font-face {
+      font-family: Poppins;
+      src: url(${semiboldPoppins}) format('truetype');
+      font-display: swap;
+      font-weight: 600;
+    }
+    @font-face {
+      font-family: Poppins;
+      src: url(${boldPoppins}) format('truetype');
+      font-display: swap;
+      font-weight: 800;
+    }
+    @font-face {
+      font-family: Heebo;
+      src: url(${heeboMedium}) format('truetype');
+      font-display: swap;
+      font-weight: 400;
+    }
+    @font-face {
+      font-family: Heebo;
+      src: url(${heeboSemiBold}) format('truetype');
+      font-display: swap;
+      font-weight: 600;
+    }
+`;

package/src/themes/darkTheme.ts

@@ -0,0 +1,24 @@
+import { createTheme } from "@mui/material/styles";
+import { DarkColorTokens } from "./colorTokens";
+import { getCommonTheme, Theme } from "./commonTheme";
+
+const darkThemeColors = {};
+
+const darkTheme = createTheme({
+  palette: {
+    mode: "dark",
+    primary: DarkColorTokens.primary,
+    secondary: DarkColorTokens.secondary,
+    background: DarkColorTokens.background,
+    text: DarkColorTokens.text,
+    // highlight: {
+    //   main: "#D4483E", // Highlight color for dark mode
+    // },
+    // defaultProfileIcon: {
+    //   main: "#293640", // Default profile images and icons color for dark mode
+    // },
+  },
+  ...getCommonTheme(Theme.DARK),
+});
+
+export default darkTheme;

package/src/themes/index.ts

@@ -0,0 +1,4 @@
+import lightTheme from "./lightTheme";
+import darkTheme from "./darkTheme";
+
+export { lightTheme, darkTheme };

package/src/themes/lightTheme.ts

@@ -0,0 +1,22 @@
+import { createTheme } from "@mui/material/styles";
+import { LightColorTokens } from "./colorTokens";
+import { Theme, getCommonTheme } from "./commonTheme";
+
+const lightTheme = createTheme({
+  palette: {
+    mode: "light",
+    primary: LightColorTokens.primary,
+    secondary: LightColorTokens.secondary,
+    background: LightColorTokens.background,
+    text: LightColorTokens.text,
+    // highlight: {
+    //   main: "#D4483E", // Highlight color
+    // },
+    // defaultProfileIcon: {
+    //   main: "#BDD6E8", // Default profile images and icons color
+    // },
+  },
+  ...getCommonTheme(Theme.LIGHT),
+});
+
+export default lightTheme;

package/src/themes/typography.stories.tsx

@@ -0,0 +1,79 @@
+// src/stories/Typography.stories.jsx
+import { Stack } from "@mui/material";
+import Typography from "../components/Typography/Typography";
+// Update path as necessary
+
+export default {
+  title: "Design System/Typography",
+  component: Typography,
+};
+
+const TypographyDisplay = ({
+  variant,
+  fontInfo,
+  text,
+}: {
+  variant: any;
+  fontInfo: { family: string; weight: string; size: string };
+  text: string;
+}) => (
+  <div style={{ marginBottom: 20 }}>
+    <Typography variant={variant} style={{ margin: "10px 0" }}>
+      {text}
+    </Typography>
+    <div style={{ fontSize: "12px", color: "#666" }}>
+      Font: {fontInfo.family}, Weight: {fontInfo.weight}, FontSize:{" "}
+      {fontInfo.size}
+    </div>
+  </div>
+);
+
+export const TypographyStyles = () => (
+  <Stack>
+    <TypographyDisplay
+      variant="h6"
+      fontInfo={{ family: "Poppins", weight: "800", size: "24px" }}
+      text="Heading 6 (h6) - Lorem ipsum dolor sit."
+    />
+    <TypographyDisplay
+      variant="subtitle1"
+      fontInfo={{ family: "Poppins", weight: "600", size: "18px" }}
+      text="Subtitle 1 (subtitle1) - Lorem ipsum dolor sit."
+    />
+    <TypographyDisplay
+      variant="subtitle2"
+      fontInfo={{ family: "Poppins", weight: "600", size: "16px" }}
+      text="Subtitle 2 (subtitle2) - Lorem ipsum dolor sit."
+    />
+    <TypographyDisplay
+      variant="subtitle1"
+      fontInfo={{ family: "Poppins", weight: "400", size: "14px" }}
+      text="Subtitle 3 (subtitle3) - Lorem ipsum dolor sit."
+    />
+    <TypographyDisplay
+      variant="body1"
+      fontInfo={{ family: "Heebo", weight: "600", size: "16px" }}
+      text="Body 1 (body1) - Lorem ipsum dolor sit."
+    />
+    <TypographyDisplay
+      variant="body2"
+      fontInfo={{ family: "Heebo", weight: "400", size: "14px" }}
+      text="Body 2 (body2) - Lorem ipsum dolor sit."
+    />
+    <TypographyDisplay
+      variant="caption"
+      fontInfo={{ family: "Heebo", weight: "400", size: "12px" }}
+      text="Caption (caption) - Lorem ipsum dolor sit."
+    />
+    <TypographyDisplay
+      variant={"label1" as any}
+      fontInfo={{ family: "Heebo", weight: "300", size: "14px" }}
+      text="Label 1 (label1) - Lorem ipsum dolor sit."
+    />
+    <TypographyDisplay
+      variant={"label2" as any}
+      fontInfo={{ family: "Poppins", weight: "300", size: "14px" }}
+      text="Label 2 (label2) - Lorem ipsum dolor sit."
+    />
+  </Stack>
+);