@campxdev/react-blueprint 0.1.0

package/src/stories/button.css

@@ -0,0 +1,30 @@
+.storybook-button {
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-weight: 700;
+  border: 0;
+  border-radius: 3em;
+  cursor: pointer;
+  display: inline-block;
+  line-height: 1;
+}
+.storybook-button--primary {
+  color: white;
+  background-color: #1ea7fd;
+}
+.storybook-button--secondary {
+  color: #333;
+  background-color: transparent;
+  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
+}
+.storybook-button--small {
+  font-size: 12px;
+  padding: 10px 16px;
+}
+.storybook-button--medium {
+  font-size: 14px;
+  padding: 11px 20px;
+}
+.storybook-button--large {
+  font-size: 16px;
+  padding: 12px 24px;
+}

package/src/stories/header.css

@@ -0,0 +1,32 @@
+.storybook-header {
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 15px 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.storybook-header svg {
+  display: inline-block;
+  vertical-align: top;
+}
+
+.storybook-header h1 {
+  font-weight: 700;
+  font-size: 20px;
+  line-height: 1;
+  margin: 6px 0 6px 10px;
+  display: inline-block;
+  vertical-align: top;
+}
+
+.storybook-header button + button {
+  margin-left: 10px;
+}
+
+.storybook-header .welcome {
+  color: #333;
+  font-size: 14px;
+  margin-right: 10px;
+}

package/src/stories/page.css

@@ -0,0 +1,69 @@
+.storybook-page {
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 24px;
+  padding: 48px 20px;
+  margin: 0 auto;
+  max-width: 600px;
+  color: #333;
+}
+
+.storybook-page h2 {
+  font-weight: 700;
+  font-size: 32px;
+  line-height: 1;
+  margin: 0 0 4px;
+  display: inline-block;
+  vertical-align: top;
+}
+
+.storybook-page p {
+  margin: 1em 0;
+}
+
+.storybook-page a {
+  text-decoration: none;
+  color: #1ea7fd;
+}
+
+.storybook-page ul {
+  padding-left: 30px;
+  margin: 1em 0;
+}
+
+.storybook-page li {
+  margin-bottom: 8px;
+}
+
+.storybook-page .tip {
+  display: inline-block;
+  border-radius: 1em;
+  font-size: 11px;
+  line-height: 12px;
+  font-weight: 700;
+  background: #e7fdd8;
+  color: #66bf3c;
+  padding: 4px 12px;
+  margin-right: 10px;
+  vertical-align: top;
+}
+
+.storybook-page .tip-wrapper {
+  font-size: 13px;
+  line-height: 20px;
+  margin-top: 40px;
+  margin-bottom: 40px;
+}
+
+.storybook-page .tip-wrapper svg {
+  display: inline-block;
+  height: 12px;
+  width: 12px;
+  margin-right: 4px;
+  vertical-align: top;
+  margin-top: 3px;
+}
+
+.storybook-page .tip-wrapper svg path {
+  fill: #1ea7fd;
+}

package/src/themes/MuiThemeProvider.tsx

@@ -0,0 +1,18 @@
+import { CssBaseline, ThemeProvider } from "@mui/material";
+import { ReactNode } from "react";
+import lightTheme from "./lightTheme";
+
+export default function MuiThemeProvider({
+  children,
+  theme,
+}: {
+  children: ReactNode;
+  theme?: any;
+}) {
+  return (
+    <ThemeProvider theme={theme ?? lightTheme}>
+      <CssBaseline />
+      {children}
+    </ThemeProvider>
+  );
+}

package/src/themes/colorTokens.stories.tsx

@@ -0,0 +1,71 @@
+// src/stories/ColorPalette.stories.jsx
+import React from "react";
+import { LightColorTokens, DarkColorTokens } from "./colorTokens";
+
+export default {
+  title: "Design System/Color Palette",
+  parameters: {
+    controls: { hideNoControlsWarning: true },
+  },
+};
+
+const ColorBox = ({ color, name }: { color: string; name: string }) => (
+  <div style={{ display: "flex", alignItems: "center", marginBottom: 20 }}>
+    <div
+      style={{
+        width: 60,
+        height: 60,
+        backgroundColor: color,
+        marginRight: 10,
+        border: "1px solid #ddd", // Slight border to distinguish white or light colors
+        borderRadius: 5,
+      }}
+    />
+    <div>
+      <div style={{ fontSize: 16, fontWeight: "bold" }}>{name}</div>
+      <div style={{ fontSize: 12 }}>{color}</div>
+    </div>
+  </div>
+);
+
+const PaletteDisplay = ({
+  themeName,
+  colorTokens,
+}: {
+  themeName: string;
+  colorTokens: any;
+}) => (
+  <div style={{ marginBottom: 40 }}>
+    <h3>{themeName} Theme</h3>
+    {Object.keys(colorTokens).map((group) => (
+      <div key={group}>
+        <h4>{group.toUpperCase()}</h4>
+        {Object.entries(colorTokens[group]).map(([name, color]) => (
+          <ColorBox
+            key={name}
+            name={`${group} ${name}`}
+            color={color as string}
+          />
+        ))}
+      </div>
+    ))}
+  </div>
+);
+
+export const ColorPalettes = () => (
+  <div
+    style={{
+      display: "grid",
+      gridTemplateColumns: "repeat(6, 1fr)",
+      gap: "20px",
+      padding: "20px",
+    }}
+  >
+    <div>
+      <PaletteDisplay themeName="Light" colorTokens={LightColorTokens} />
+    </div>
+    <div>
+      <PaletteDisplay themeName="Dark" colorTokens={DarkColorTokens} />
+    </div>
+  </div>
+);

package/src/themes/colorTokens.ts

@@ -0,0 +1,77 @@
+export const LightColorTokens = {
+  primary: {
+    main: "#323167",
+    light: "#5C5E8C",
+    dark: "#1F1E4A",
+  },
+  secondary: {
+    main: "#E0E0E7",
+    light: "#F0F0F5",
+    dark: "#CBCBD9",
+  },
+  background: {
+    default: "#F7F8FA",
+    paper: "#FFFFFF",
+  },
+  text: {
+    primary: "#121212",
+    secondary: "#595959",
+  },
+  success: {
+    main: "#88B053",
+  },
+  error: {
+    main: "F2353C",
+  },
+  warning: {
+    main: "ED9035",
+  },
+  info: {
+    main: "#4BAABE",
+  },
+  highlight: {
+    main: "#D4483E",
+  },
+  grey: {
+    main: "#F2F2F2",
+  },
+};
+
+export const DarkColorTokens = {
+  primary: {
+    main: "#9FA8DA",
+    light: "#C5CAE9",
+    dark: "#5C6BC0",
+  },
+  secondary: {
+    main: "#2F3151",
+    light: "#4B4D72",
+    dark: "#1C1D2F",
+  },
+  background: {
+    default: "#1D2127",
+    paper: "#161A1D",
+  },
+  text: {
+    primary: "#FFFFFF",
+    secondary: "#B9BBBB",
+  },
+  success: {
+    main: "#88B053",
+  },
+  error: {
+    main: "F2353C",
+  },
+  warning: {
+    main: "ED9035",
+  },
+  info: {
+    main: "#4BAABE",
+  },
+  highlight: {
+    main: "#D4483E",
+  },
+  grey: {
+    main: "#293640",
+  },
+};