pixelize-design-library 0.1.0

package/src/Theme/Dark/theme.ts

@@ -0,0 +1,278 @@
+import { extendTheme } from "@chakra-ui/react";
+import { mode } from "@chakra-ui/theme-tools";
+
+const space = {
+    px: "1px",
+    0: "0",
+    1: "0.25rem", // 4px
+    2: "0.5rem",  // 8px
+    3: "0.75rem", // 12px
+    4: "1rem",    // 16px
+    5: "1.25rem", // 20px
+    6: "1.5rem",  // 24px
+    7: "1.75rem", // 28px
+    8: "2rem",    // 32px
+    9: "2.25rem", // 36px
+    10: "2.5rem", // 40px
+    12: "3rem",   // 48px
+    14: "3.5rem", // 56px
+    16: "4rem",   // 64px
+    20: "5rem",   // 80px
+    24: "6rem",   // 96px
+    28: "7rem",   // 112px
+    32: "8rem",   // 128px
+    36: "9rem",   // 144px
+    40: "10rem",  // 160px
+    44: "11rem",  // 176px
+    48: "12rem",  // 192px
+    52: "13rem",  // 208px
+    56: "14rem",  // 224px
+    60: "15rem",  // 240px
+    64: "16rem",  // 256px
+    72: "18rem",  // 288px
+    80: "20rem",  // 320px
+    96: "24rem",  // 384px
+};
+
+const darkTheme = extendTheme({
+    initialColorMode: "dark",
+    useSystemColorMode: false,
+    styles: {
+        global: (props: any) => ({
+            body: {
+                bg: mode("gray.100", "gray.900")(props),
+                color: mode("gray.800", "whiteAlpha.900")(props),
+            },
+        }),
+    },
+    colors: {
+        transparent: "transparent",
+        black: "#000",
+        white: "#fff",
+        gray: {
+            50: "#f7fafc",
+            100: "#edf2f7",
+            200: "#e2e8f0",
+            300: "#cbd5e0",
+            400: "#a0aec0",
+            500: "#718096",
+            600: "#4a5568",
+            700: "#2d3748",
+            800: "#1a202c",
+            900: "#171923",
+        },
+        red: {
+            50: "#fff5f5",
+            100: "#fed7d7",
+            200: "#feb2b2",
+            300: "#fc8181",
+            400: "#f56565",
+            500: "#e53e3e",
+            600: "#c53030",
+            700: "#9b2c2c",
+            800: "#822727",
+            900: "#63171b",
+        },
+        orange: {
+            50: "#fffaf0",
+            100: "#feebc8",
+            200: "#fbd38d",
+            300: "#f6ad55",
+            400: "#ed8936",
+            500: "#dd6b20",
+            600: "#c05621",
+            700: "#9c4221",
+            800: "#7b341e",
+            900: "#652b19",
+        },
+        yellow: {
+            50: "#fffff0",
+            100: "#fefcbf",
+            200: "#faf089",
+            300: "#f6e05e",
+            400: "#ecc94b",
+            500: "#d69e2e",
+            600: "#b7791f",
+            700: "#975a16",
+            800: "#744210",
+            900: "#5f370e",
+        },
+        green: {
+            50: "#f0fff4",
+            100: "#c6f6d5",
+            200: "#9ae6b4",
+            300: "#68d391",
+            400: "#48bb78",
+            500: "#38a169",
+            600: "#2f855a",
+            700: "#276749",
+            800: "#22543d",
+            900: "#1c4532",
+        },
+        teal: {
+            50: "#e6fffa",
+            100: "#b2f5ea",
+            200: "#81e6d9",
+            300: "#4fd1c5",
+            400: "#38b2ac",
+            500: "#319795",
+            600: "#2c7a7b",
+            700: "#285e61",
+            800: "#234e52",
+            900: "#1d4044",
+        },
+        blue: {
+            50: "#ebf8ff",
+            100: "#bee3f8",
+            200: "#90cdf4",
+            300: "#63b3ed",
+            400: "#4299e1",
+            500: "#3182ce",
+            600: "#2b6cb0",
+            700: "#2c5282",
+            800: "#2a4365",
+            900: "#1a365d",
+        },
+        cyan: {
+            50: "#edfdfd",
+            100: "#c4f1f9",
+            200: "#9decf9",
+            300: "#76e4f7",
+            400: "#0bc5ea",
+            500: "#00b5d8",
+            600: "#00a3c4",
+            700: "#0987a0",
+            800: "#086f83",
+            900: "#065666",
+        },
+        purple: {
+            50: "#faf5ff",
+            100: "#e9d8fd",
+            200: "#d6bcfa",
+            300: "#b794f4",
+            400: "#9f7aea",
+            500: "#805ad5",
+            600: "#6b46c1",
+            700: "#553c9a",
+            800: "#44337a",
+            900: "#322659",
+        },
+        pink: {
+            50: "#fff5f7",
+            100: "#fed7e2",
+            200: "#fbb6ce",
+            300: "#f687b3",
+            400: "#ed64a6",
+            500: "#d53f8c",
+            600: "#b83280",
+            700: "#97266d",
+            800: "#702459",
+            900: "#521b41",
+        },
+    },
+    space: {
+        px: "1px",
+        0: "0",
+        1: "0.25rem", // 4px
+        2: "0.5rem",  // 8px
+        3: "0.75rem", // 12px
+        4: "1rem",    // 16px
+        5: "1.25rem", // 20px
+        6: "1.5rem",  // 24px
+        7: "1.75rem", // 28px
+        8: "2rem",    // 32px
+        9: "2.25rem", // 36px
+        10: "2.5rem", // 40px
+        12: "3rem",   // 48px
+        14: "3.5rem", // 56px
+        16: "4rem",   // 64px
+        20: "5rem",   // 80px
+        24: "6rem",   // 96px
+        28: "7rem",   // 112px
+        32: "8rem",   // 128px
+        36: "9rem",   // 144px
+        40: "10rem",  // 160px
+        44: "11rem",  // 176px
+        48: "12rem",  // 192px
+        52: "13rem",  // 208px
+        56: "14rem",  // 224px
+        60: "15rem",  // 240px
+        64: "16rem",  // 256px
+        72: "18rem",  // 288px
+        80: "20rem",  // 320px
+        96: "24rem",  // 384px
+    },
+    sizes: {
+        ...space,
+        full: "100%",
+        screenW: "100vw",
+        screenH: "100vh",
+    },
+    fonts: {
+        heading: "'Roboto', sans-serif",
+        body: "'Open Sans', sans-serif",
+    },
+    fontSizes: {
+        xs: "0.75rem",
+        sm: "0.875rem",
+        md: "1rem",
+        lg: "1.125rem",
+        xl: "1.25rem",
+        "2xl": "1.5rem",
+        "3xl": "1.875rem",
+        "4xl": "2.25rem",
+        "5xl": "3rem",
+        "6xl": "3.75rem",
+        "7xl": "4.5rem",
+        "8xl": "6rem",
+        "9xl": "8rem",
+    },
+    breakpoints: {
+        sm: "30em",
+        md: "48em",
+        lg: "62em",
+        xl: "80em",
+        "2xl": "96em",
+    },
+    shadows: {
+        xs: "0 0 0 1px rgba(0, 0, 0, 0.05)",
+        sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+        base: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
+        md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+        lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
+        xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
+        "2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+        outline: "0 0 0 3px rgba(66, 153, 225, 0.6)",
+        inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)",
+        none: "none",
+        "dark-lg": "rgba(0, 0, 0, 0.25) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -2px",
+    },
+    radii: {
+        none: "0",
+        sm: "0.125rem",
+        base: "0.25rem",
+        md: "0.375rem",
+        lg: "0.5rem",
+        xl: "0.75rem",
+        "2xl": "1rem",
+        "3xl": "1.5rem",
+        full: "9999px",
+    },
+    zIndices: {
+        hide: -1,
+        auto: "auto",
+        base: 0,
+        docked: 10,
+        dropdown: 1000,
+        sticky: 1100,
+        banner: 1200,
+        overlay: 1300,
+        modal: 1400,
+        popover: 1500,
+        skipLink: 1600,
+        toast: 1700,
+        tooltip: 1800,
+    },
+});
+
+export default darkTheme;

package/src/Theme/Default/theme.ts

@@ -0,0 +1,301 @@
+import { extendTheme } from "@chakra-ui/react";
+
+const space = {
+    px: "1px",
+    0: "0",
+    1: "0.25rem", // 4px
+    2: "0.5rem",  // 8px
+    3: "0.75rem", // 12px
+    4: "1rem",    // 16px
+    5: "1.25rem", // 20px
+    6: "1.5rem",  // 24px
+    7: "1.75rem", // 28px
+    8: "2rem",    // 32px
+    9: "2.25rem", // 36px
+    10: "2.5rem", // 40px
+    12: "3rem",   // 48px
+    14: "3.5rem", // 56px
+    16: "4rem",   // 64px
+    20: "5rem",   // 80px
+    24: "6rem",   // 96px
+    28: "7rem",   // 112px
+    32: "8rem",   // 128px
+    36: "9rem",   // 144px
+    40: "10rem",  // 160px
+    44: "11rem",  // 176px
+    48: "12rem",  // 192px
+    52: "13rem",  // 208px
+    56: "14rem",  // 224px
+    60: "15rem",  // 240px
+    64: "16rem",  // 256px
+    72: "18rem",  // 288px
+    80: "20rem",  // 320px
+    96: "24rem",  // 384px
+};
+
+const theme = extendTheme({
+    colors: {
+        transparent: "transparent",
+        black: "#000",
+        white: "#fff",
+        gray: {
+            50: "#f7fafc",
+            100: "#edf2f7",
+            200: "#e2e8f0",
+            300: "#cbd5e0",
+            400: "#a0aec0",
+            500: "#718096",
+            600: "#4a5568",
+            700: "#2d3748",
+            800: "#1a202c",
+            900: "#171923",
+        },
+        red: {
+            50: "#fff5f5",
+            100: "#fed7d7",
+            200: "#feb2b2",
+            300: "#fc8181",
+            400: "#f56565",
+            500: "#e53e3e",
+            600: "#c53030",
+            700: "#9b2c2c",
+            800: "#822727",
+            900: "#63171b",
+        },
+        orange: {
+            50: "#fffaf0",
+            100: "#feebc8",
+            200: "#fbd38d",
+            300: "#f6ad55",
+            400: "#ed8936",
+            500: "#dd6b20",
+            600: "#c05621",
+            700: "#9c4221",
+            800: "#7b341e",
+            900: "#652b19",
+        },
+        yellow: {
+            50: "#fffff0",
+            100: "#fefcbf",
+            200: "#faf089",
+            300: "#f6e05e",
+            400: "#ecc94b",
+            500: "#d69e2e",
+            600: "#b7791f",
+            700: "#975a16",
+            800: "#744210",
+            900: "#5f370e",
+        },
+        green: {
+            50: "#f0fff4",
+            100: "#c6f6d5",
+            200: "#9ae6b4",
+            300: "#68d391",
+            400: "#48bb78",
+            500: "#38a169",
+            600: "#2f855a",
+            700: "#276749",
+            800: "#22543d",
+            900: "#1c4532",
+        },
+        teal: {
+            50: "#e6fffa",
+            100: "#b2f5ea",
+            200: "#81e6d9",
+            300: "#4fd1c5",
+            400: "#38b2ac",
+            500: "#319795",
+            600: "#2c7a7b",
+            700: "#285e61",
+            800: "#234e52",
+            900: "#1d4044",
+        },
+        blue: {
+            50: "#ebf8ff",
+            100: "#bee3f8",
+            200: "#90cdf4",
+            300: "#63b3ed",
+            400: "#4299e1",
+            500: "#3182ce",
+            600: "#2b6cb0",
+            700: "#2c5282",
+            800: "#2a4365",
+            900: "#1a365d",
+        },
+        cyan: {
+            50: "#edfdfd",
+            100: "#c4f1f9",
+            200: "#9decf9",
+            300: "#76e4f7",
+            400: "#0bc5ea",
+            500: "#00b5d8",
+            600: "#00a3c4",
+            700: "#0987a0",
+            800: "#086f83",
+            900: "#065666",
+        },
+        purple: {
+            50: "#faf5ff",
+            100: "#e9d8fd",
+            200: "#d6bcfa",
+            300: "#b794f4",
+            400: "#9f7aea",
+            500: "#805ad5",
+            600: "#6b46c1",
+            700: "#553c9a",
+            800: "#44337a",
+            900: "#322659",
+        },
+        pink: {
+            50: "#fff5f7",
+            100: "#fed7e2",
+            200: "#fbb6ce",
+            300: "#f687b3",
+            400: "#ed64a6",
+            500: "#d53f8c",
+            600: "#b83280",
+            700: "#97266d",
+            800: "#702459",
+            900: "#521b41",
+        },
+    },
+    fonts: {
+        body: "system-ui, sans-serif",
+        heading: "Georgia, serif",
+        mono: "Menlo, monospace",
+    },
+    fontSizes: {
+        xs: "0.75rem",
+        sm: "0.875rem",
+        md: "1rem",
+        lg: "1.125rem",
+        xl: "1.25rem",
+        "2xl": "1.5rem",
+        "3xl": "1.875rem",
+        "4xl": "2.25rem",
+        "5xl": "3rem",
+        "6xl": "3.75rem",
+        "7xl": "4.5rem",
+        "8xl": "6rem",
+        "9xl": "8rem",
+    },
+    fontWeights: {
+        hairline: 100,
+        thin: 200,
+        light: 300,
+        normal: 400,
+        medium: 500,
+        semibold: 600,
+        bold: 700,
+        extrabold: 800,
+        black: 900,
+    },
+    lineHeights: {
+        normal: "normal",
+        none: 1,
+        shorter: 1.25,
+        short: 1.375,
+        base: 1.5,
+        tall: 1.625,
+        taller: "2",
+        "3": ".75rem",
+        "4": "1rem",
+        "5": "1.25rem",
+        "6": "1.5rem",
+        "7": "1.75rem",
+        "8": "2rem",
+        "9": "2.25rem",
+        "10": "2.5rem",
+    },
+    letterSpacings: {
+        tighter: "-0.05em",
+        tight: "-0.025em",
+        normal: "0",
+        wide: "0.025em",
+        wider: "0.05em",
+        widest: "0.1em",
+    },
+    space: space,
+    sizes: {
+        ...space,
+        full: "100%",
+        screenW: "100vw",
+        screenH: "100vh",
+        max: 'max-content',
+        min: 'min-content',
+        '3xs': '14rem',
+        '2xs': '16rem',
+        xs: '20rem',
+        sm: '24rem',
+        md: '28rem',
+        lg: '32rem',
+        xl: '36rem',
+        '2xl': '42rem',
+        '3xl': '48rem',
+        '4xl': '56rem',
+        '5xl': '64rem',
+        '6xl': '72rem',
+        '7xl': '80rem',
+        '8xl': '90rem',
+        container: {
+            sm: '640px',
+            md: '768px',
+            lg: '1024px',
+            xl: '1280px',
+        },
+    },
+    breakpoints: {
+        sm: "30em",
+        md: "48em",
+        lg: "62em",
+        xl: "80em",
+        "2xl": "96em",
+    },
+    shadows: {
+        xs: "0 0 0 1px rgba(0, 0, 0, 0.05)",
+        sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+        base: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
+        md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+        lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
+        xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
+        "2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+        outline: "0 0 0 3px rgba(66, 153, 225, 0.6)",
+        inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)",
+        none: "none",
+        darkLg: "0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.5)",
+    },
+    radii: {
+        none: "0",
+        sm: "0.125rem",
+        base: "0.25rem",
+        md: "0.375rem",
+        lg: "0.5rem",
+        xl: "0.75rem",
+        "2xl": "1rem",
+        "3xl": "1.5rem",
+        full: "9999px",
+    },
+    zIndices: {
+        hide: -1,
+        auto: "auto",
+        base: 0,
+        docked: 10,
+        dropdown: 1000,
+        sticky: 1100,
+        banner: 1200,
+        overlay: 1300,
+        modal: 1400,
+        popover: 1500,
+        skipLink: 1600,
+        toast: 1700,
+        tooltip: 1800,
+    },
+    config: {
+        cssVarPrefix: 'ck',
+    },
+    components: {
+        // Component style overrides go here
+    },
+});
+
+export default theme;

package/src/Theme/index.ts

@@ -0,0 +1,4 @@
+import theme from "./Default/theme";
+import darkTheme from "./Dark/theme";
+
+export { theme as defaultTheme, darkTheme };

package/src/bootstrap.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import ToasterProvider from "./Components/Toaster/Toaster";
+
+const root = ReactDOM.createRoot(document.getElementById("root")!);
+root.render(
+    <React.StrictMode>
+        <ToasterProvider>
+            <App />
+        </ToasterProvider>
+    </React.StrictMode>
+)

package/src/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import { ChakraProvider, ColorModeScript } from '@chakra-ui/react';
+import ToasterProvider from './Components/Toaster/Toaster';
+// import { darkTheme } from './Theme';
+import theme from './Theme/Default/theme';
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+//console.log(darkTheme);
+root.render(
+  <React.StrictMode>
+    <ChakraProvider theme={theme}>
+      <ColorModeScript initialColorMode={"dark"} />
+      <ToasterProvider>
+        <App />
+      </ToasterProvider>
+    </ChakraProvider>
+  </React.StrictMode>
+);