pixelize-design-library 2.1.18 → 2.1.20

package/{dist/Theme/Dark/theme.js → src/Theme/Dark/theme.ts}

@@ -1,60 +1,49 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = require("@chakra-ui/react");
-var theme_tools_1 = require("@chakra-ui/theme-tools");
-var space = {
+import { extendTheme } from "@chakra-ui/react";
+import { mode } from "@chakra-ui/theme-tools";
+
+const space = {
     px: "1px",
     0: "0",
-    1: "0.25rem",
-    2: "0.5rem",
-    3: "0.75rem",
-    4: "1rem",
-    5: "1.25rem",
-    6: "1.5rem",
-    7: "1.75rem",
-    8: "2rem",
-    9: "2.25rem",
-    10: "2.5rem",
-    12: "3rem",
-    14: "3.5rem",
-    16: "4rem",
-    20: "5rem",
-    24: "6rem",
-    28: "7rem",
-    32: "8rem",
-    36: "9rem",
-    40: "10rem",
-    44: "11rem",
-    48: "12rem",
-    52: "13rem",
-    56: "14rem",
-    60: "15rem",
-    64: "16rem",
-    72: "18rem",
-    80: "20rem",
-    96: "24rem", // 384px
+    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
 };
-var darkTheme = (0, react_1.extendTheme)({
+
+const darkTheme = extendTheme({
     initialColorMode: "dark",
     useSystemColorMode: false,
     styles: {
-        global: function (props) { return ({
+        global: (props: any) => ({
             body: {
-                bg: (0, theme_tools_1.mode)("gray.100", "gray.900")(props),
-                color: (0, theme_tools_1.mode)("gray.800", "whiteAlpha.900")(props),
+                bg: mode("gray.100", "gray.900")(props),
+                color: mode("gray.800", "whiteAlpha.900")(props),
             },
-        }); },
+        }),
     },
     colors: {
         transparent: "transparent",
@@ -184,36 +173,41 @@ var darkTheme = (0, react_1.extendTheme)({
     space: {
         px: "1px",
         0: "0",
-        1: "0.25rem",
-        2: "0.5rem",
-        3: "0.75rem",
-        4: "1rem",
-        5: "1.25rem",
-        6: "1.5rem",
-        7: "1.75rem",
-        8: "2rem",
-        9: "2.25rem",
-        10: "2.5rem",
-        12: "3rem",
-        14: "3.5rem",
-        16: "4rem",
-        20: "5rem",
-        24: "6rem",
-        28: "7rem",
-        32: "8rem",
-        36: "9rem",
-        40: "10rem",
-        44: "11rem",
-        48: "12rem",
-        52: "13rem",
-        56: "14rem",
-        60: "15rem",
-        64: "16rem",
-        72: "18rem",
-        80: "20rem",
-        96: "24rem", // 384px
+        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",
     },
-    sizes: __assign(__assign({}, space), { full: "100%", screenW: "100vw", screenH: "100vh" }),
     fonts: {
         heading: "'Roboto', sans-serif",
         body: "'Open Sans', sans-serif",
@@ -280,4 +274,5 @@ var darkTheme = (0, react_1.extendTheme)({
         tooltip: 1800,
     },
 });
-exports.default = darkTheme;
+
+export default darkTheme;

package/src/Theme/Default/palette.ts

@@ -0,0 +1,373 @@
+const palette = {
+  primary: {
+    50: "#f5edfc",
+    100: "#e0c8f7",
+    200: "#d1aef3",
+    300: "#bb89ee",
+    400: "#ae72ea",
+    500: "#9A4FE5", // primary shade
+    600: "#8c48d0",
+    700: "#6d38a3",
+    800: "#552v7e",
+    900: "#412160",
+    opacity: {
+      4: "#9A4FE50a",
+      8: "#9A4FE514",
+      16: "#9A4FE529",
+      24: "#9A4FE53d",
+      32: "#9A4FE552",
+      40: "#9A4FE566",
+      48: "#9A4FE57a",
+    }
+  },
+  secondary: {
+    50: "#e8e8e9",
+    100: "#b7b8bb",
+    200: "#94989b",
+    300: "#63666d",
+    400: "#454951",
+    500: "#161b25", // secondary shade
+    600: "#141922",
+    700: "#10131a",
+    800: "#0c0f14",
+    900: "#090b10",
+    opacity: {
+      4: "#161b250a",
+      8: "#161b2514",
+      16: "#161b2529",
+      24: "#161b253d",
+      32: "#161b2552",
+      40: "#161b2566",
+      48: "#161b257a",
+    }
+  },
+  tertiary: {
+    50: "#e8e8e9",
+    100: "#b7b8bb",
+    200: "#94989b",
+    300: "#63666d",
+    400: "#454951",
+    500: "#161b25", // tertiary shade
+    600: "#141922",
+    700: "#10131a",
+    800: "#0c0f14",
+    900: "#090b10",
+    opacity: {
+      4: "#161b250a",
+      8: "#161b2514",
+      16: "#161b2529",
+      24: "#161b253d",
+      32: "#161b2552",
+      40: "#161b2566",
+      48: "#161b257a",
+    }
+  },
+  transparent: "transparent",
+  black: "#000",
+  white: "#fff",
+  semantic: {
+    success: {
+      50: "#e9f8ef",
+      100: "#bbe9cc",
+      200: "#9adeb4",
+      300: "#6ccf92",
+      400: "#4fc67d",
+      500: "#23b85c", // Main success color
+      600: "#20a754",
+      700: "#198341",
+      800: "#136533",
+      900: "#0f4d27",
+    },
+    error: {
+      50: "#feedeb",
+      100: "#fbc6c2",
+      200: "#f9aaa4",
+      300: "#f6837b",
+      400: "#f56b61",
+      500: "#f2463a", // Main error color
+      600: "#dc4035",
+      700: "#ac3229",
+      800: "#852720",
+      900: "#661d18",
+    },
+    warning: {
+      50: "#fff4ef",
+      100: "#ffddce",
+      200: "#ffccb7",
+      300: "#ffb596",
+      400: "#ffa781",
+      500: "#Ff9162", // Main warning color
+      600: "#e88459",
+      700: "#b56746",
+      800: "#8c5036",
+      900: "#6b3d29",
+    },
+    info: {
+      50: "#eff9fc",
+      100: "#cdedf5",
+      200: "#b5e4f0",
+      300: "#94d7e9",
+      400: "#7fd0e5",
+      500: "#5FC4de", // Main info color
+      600: "#56b2ea",
+      700: "#438b9e",
+      800: "#346c78",
+      900: "#28525d",
+    },
+  },
+  gray: {
+    50: "#f7fafc",
+    100: "#edf2f7",
+    200: "#e2e8f0",
+    300: "#cbd5e0",
+    400: "#a0aec0",
+    500: "#718096",
+    600: "#4a5568",
+    700: "#2d3748",
+    800: "#1a202c",
+    900: "#171923",
+  },
+  red: {
+    50: "#feedeb",
+    100: "#fbc6c2",
+    200: "#f9aaa4",
+    300: "#f6837b",
+    400: "#f56b61",
+    500: "#f2463a", // Main error color
+    600: "#dc4035",
+    700: "#ac3229",
+    800: "#852720",
+    900: "#661d18",
+  },
+  orange: {
+    50: "#fff4ef",
+    100: "#ffddce",
+    200: "#ffccb7",
+    300: "#ffb596",
+    400: "#ffa781",
+    500: "#Ff9162", // Main warning color
+    600: "#e88459",
+    700: "#b56746",
+    800: "#8c5036",
+    900: "#6b3d29",
+  },
+  yellow: {
+    50: "#fefbec",
+    100: "#fdf1c5",
+    200: "#fbeba9",
+    300: "#fae281",
+    400: "#f9dc69",
+    500: "#f7d343",
+    600: "#e1c03d",
+    700: "#af9630",
+    800: "#887425",
+    900: "#68591c",
+  },
+  green: {
+    50: "#e9f8ef",
+    100: "#bbe9cc",
+    200: "#9adeb4",
+    300: "#6ccf92",
+    400: "#4fc67d",
+    500: "#23b85c", // Main success color
+    600: "#20a754",
+    700: "#198341",
+    800: "#136533",
+    900: "#0f4d27",
+  },
+  teal: {
+    50: "#eff9fc",
+    100: "#cdedf5",
+    200: "#b5e4f0",
+    300: "#94d7e9",
+    400: "#7fd0e5",
+    500: "#5FC4de", // Main info color
+    600: "#56b2ea",
+    700: "#438b9e",
+    800: "#346c78",
+    900: "#28525d",
+  },
+  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",
+  },
+  background: {
+    50: "#ffffff",
+    100: "#fefefe",
+    200: "#fdfdfd",
+    300: "#fcfcfc",
+    400: "#fcfcfc",
+    500: "#fbfbfb",
+    600: "#e4e4e4",
+    700: "#b2b2b2",
+    800: "#8a8a8a",
+    900: "#696969",
+  },
+  backgroundColor: {
+    main: "#f8f9fa",
+    secondary: "#f1f1f1",
+    tertiary: "#ececec",
+    quaternary: "#e2e6ea",
+    light: "#fafafa",
+    medium: "#eaeaea",
+    accent: "#e5e5e5",
+    subtle: "#f5f6f7",
+    muted: "#dfe3e6",
+    neutral: "#ebedef",
+    base: "#FBFBFB",
+    tableHeader: "#F6F6F6",
+  },
+  text: {
+    50: "#eeeff0",
+    100: "#cacccf",
+    200: "#b1b3b8",
+    300: "#8d9097",
+    400: "#777b83",
+    500: "#555a64",
+    600: "#4d525b",
+    700: "#3c4047",
+    800: "#2f3237",
+    900: "#24262a",
+  },
+  header: {
+    50: "#ecedec",
+    100: "#c5c6ca",
+    200: "#a9abb0",
+    300: "#81848c",
+    400: "#696b75",
+    500: "#434853",
+    600: "#3d424c",
+    700: "#30333b",
+    800: "#25282e",
+    900: "#1c1e23",
+  },
+  placeholder: {
+    50: "#f1f1f2",
+    100: "#d3d5d8",
+    200: "#bec0c5",
+    300: "#a0a3aa",
+    400: "#8d9199",
+    500: "#717680",
+    600: "#676b74",
+    700: "#50545b",
+    800: "#3e4146",
+    900: "#2f3236",
+  },
+  boxShadow: {
+    primary: "#9A52E247",
+    error: "#F2463A47",
+    default: "",
+  },
+  sidebar: {
+    background: {
+      50: "#e9eaf0",
+      100: "#d4d6e0",
+
+      200: "#212747",
+      300: "#7d84a2",
+      400: "#525b83",
+      500: "#161B32",
+      600: "#12162a",
+      700: "#0e1221",
+      800: "#0a0d19",
+      900: "#060911",
+    }
+
+  },
+  boxborder: {
+    50: "#fbfbfb",
+    100: "#f2f3f4",
+    200: "#ecedee",
+    300: "#e4e5e7",
+    400: "#dee0e2",
+    500: "#d6d8db",
+    600: "#c3c5c7",
+    700: "#98999b",
+    800: "#767778",
+    900: "#5a5b5c",
+  },
+  border: {
+    50: "#fdfdfd",
+    100: "#f8f8f8",
+    200: "#f4f4f4",
+    300: "#f0f0f0",
+    400: "#ededed",
+    500: "#e8e8e8",
+    600: "#d3d3d3",
+    700: "#a5a5a5",
+    800: "#808080",
+    900: "#616161",
+  },
+  table: {
+    hover: {
+      50: "#fefefe",
+      100: "#fcfcfc",
+      200: "#fbfbfb",
+      300: "#f9f9f9",
+      400: "#f8f8f8",
+      500: "#f6f6f6",
+      600: "#e0e0e0",
+      700: "#afafaf",
+      800: "#878787",
+      900: "#676767",
+    }
+  },
+  disabled: {
+    50: "#fcfcfc",
+    100: "#f7f7f7",
+    200: "#f3f3f3",
+    300: "#ededed",
+    400: "#e9e9e9",
+    500: "#e4e4e4",
+    600: "#cfcfcf",
+    700: "#a2a2a2",
+    800: "#7d7d7d",
+    900: "#606060",
+  }
+};
+
+export default palette;

package/src/Theme/Default/theme.ts

@@ -0,0 +1,16 @@
+import { extendTheme } from "@chakra-ui/react";
+import palette from "./palette";
+import { CustomThemeProps } from "../themeProps";
+import common from "../common";
+import fonts from "../fonts";
+import { componentStyles } from "../componentStyles";
+
+const lavender: CustomThemeProps = {
+  colors: palette,
+  ...fonts,
+  ...common,
+};
+export default extendTheme({
+  ...lavender,
+  components: componentStyles,
+});