pixelize-design-library 1.1.93 → 1.1.95

package/dist/Theme/Default/palette.js

@@ -2,68 +2,119 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var palette = {
     primary: {
-        50: "#ecddfb",
-        100: "#d6b7f6",
-        200: "#be8ef0",
-        300: "#aa6ae9",
-        400: "#944cde",
+        50: "#f5edfc",
+        100: "#e0c8f7",
+        200: "#d1aef3",
+        300: "#bb89ee",
+        400: "#ae72ea",
         500: "#9A4FE5",
-        600: "#8b48d8",
-        700: "#7a3ccc",
-        800: "#6933b2",
-        900: "#59299a",
+        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",
+        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",
+        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: "#e9fdf1",
-            100: "#c8f7d8",
-            200: "#a5f1bd",
-            300: "#84e7a2",
-            400: "#60d987",
-            500: "#23B85C",
-            600: "#1dbb51",
-            700: "#189946",
-            800: "#14753a",
-            900: "#0f5b2f",
+            50: "#e9f8ef",
+            100: "#bbe9cc",
+            200: "#9adeb4",
+            300: "#6ccf92",
+            400: "#4fc67d",
+            500: "#23b85c",
+            600: "#20a754",
+            700: "#198341",
+            800: "#136533",
+            900: "#0f4d27",
         },
         error: {
-            50: "#fff5f2",
-            100: "#fee8e1",
-            200: "#fdd0c8",
-            300: "#fca9a0",
-            400: "#f9897c",
-            500: "#F2463A",
-            600: "#c32e23",
-            700: "#a6261d",
-            800: "#8a1f18",
-            900: "#701812",
+            50: "#feedeb",
+            100: "#fbc6c2",
+            200: "#f9aaa4",
+            300: "#f6837b",
+            400: "#f56b61",
+            500: "#f2463a",
+            600: "#dc4035",
+            700: "#ac3229",
+            800: "#852720",
+            900: "#661d18",
         },
         warning: {
-            50: "#fffaf5",
-            100: "#fff0e0",
-            200: "#fedcc0",
-            300: "#fec59e",
-            400: "#fdaf7c",
-            500: "#FB8F3D",
-            600: "#db6d1e",
-            700: "#b75d18",
-            800: "#924c13",
-            900: "#6e3b0e",
+            50: "#fff4ef",
+            100: "#ffddce",
+            200: "#ffccb7",
+            300: "#ffb596",
+            400: "#ffa781",
+            500: "#Ff9162",
+            600: "#e88459",
+            700: "#b56746",
+            800: "#8c5036",
+            900: "#6b3d29",
         },
         info: {
-            50: "#f1fcfe",
-            100: "#dcf6fb",
-            200: "#c0ecf7",
-            300: "#9eddef",
-            400: "#7fd0e6",
-            500: "#5FC4DE",
-            600: "#3bbfd2",
-            700: "#309db0",
-            800: "#257d8d",
-            900: "#1a5d6c",
+            50: "#eff9fc",
+            100: "#cdedf5",
+            200: "#b5e4f0",
+            300: "#94d7e9",
+            400: "#7fd0e5",
+            500: "#5FC4de",
+            600: "#56b2ea",
+            700: "#438b9e",
+            800: "#346c78",
+            900: "#28525d",
         },
     },
     gray: {
@@ -79,64 +130,64 @@ var palette = {
         900: "#171923",
     },
     red: {
-        50: "#fff5f5",
-        100: "#fed7d7",
-        200: "#feb2b2",
-        300: "#fc8181",
-        400: "#f56565",
-        500: "#e53e3e",
-        600: "#c53030",
-        700: "#9b2c2c",
-        800: "#822727",
-        900: "#63171b",
+        50: "#feedeb",
+        100: "#fbc6c2",
+        200: "#f9aaa4",
+        300: "#f6837b",
+        400: "#f56b61",
+        500: "#f2463a",
+        600: "#dc4035",
+        700: "#ac3229",
+        800: "#852720",
+        900: "#661d18",
     },
     orange: {
-        50: "#fffaf0",
-        100: "#feebc8",
-        200: "#fbd38d",
-        300: "#f6ad55",
-        400: "#ed8936",
-        500: "#dd6b20",
-        600: "#c05621",
-        700: "#9c4221",
-        800: "#7b341e",
-        900: "#652b19",
+        50: "#fff4ef",
+        100: "#ffddce",
+        200: "#ffccb7",
+        300: "#ffb596",
+        400: "#ffa781",
+        500: "#Ff9162",
+        600: "#e88459",
+        700: "#b56746",
+        800: "#8c5036",
+        900: "#6b3d29",
     },
     yellow: {
-        50: "#fffff0",
-        100: "#fefcbf",
-        200: "#faf089",
-        300: "#f6e05e",
-        400: "#ecc94b",
-        500: "#d69e2e",
-        600: "#b7791f",
-        700: "#975a16",
-        800: "#744210",
-        900: "#5f370e",
+        50: "#fefbec",
+        100: "#fdf1c5",
+        200: "#fbeba9",
+        300: "#fae281",
+        400: "#f9dc69",
+        500: "#f7d343",
+        600: "#e1c03d",
+        700: "#af9630",
+        800: "#887425",
+        900: "#68591c",
     },
     green: {
-        50: "#f0fff4",
-        100: "#c6f6d5",
-        200: "#9ae6b4",
-        300: "#68d391",
-        400: "#48bb78",
-        500: "#38a169",
-        600: "#2f855a",
-        700: "#276749",
-        800: "#22543d",
-        900: "#1c4532",
+        50: "#e9f8ef",
+        100: "#bbe9cc",
+        200: "#9adeb4",
+        300: "#6ccf92",
+        400: "#4fc67d",
+        500: "#23b85c",
+        600: "#20a754",
+        700: "#198341",
+        800: "#136533",
+        900: "#0f4d27",
     },
     teal: {
-        50: "#e6fffa",
-        100: "#b2f5ea",
-        200: "#81e6d9",
-        300: "#4fd1c5",
-        400: "#38b2ac",
-        500: "#319795",
-        600: "#2c7a7b",
-        700: "#285e61",
-        800: "#234e52",
-        900: "#1d4044",
+        50: "#eff9fc",
+        100: "#cdedf5",
+        200: "#b5e4f0",
+        300: "#94d7e9",
+        400: "#7fd0e5",
+        500: "#5FC4de",
+        600: "#56b2ea",
+        700: "#438b9e",
+        800: "#346c78",
+        900: "#28525d",
     },
     blue: {
         50: "#ebf8ff",
@@ -186,6 +237,18 @@ var palette = {
         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",
@@ -201,14 +264,109 @@ var palette = {
         tableHeader: "#F6F6F6",
     },
     text: {
-        heading: "#161B25",
-        body: "#555A64",
-        subtle: "#434853",
-        input: "#717680", // input default
+        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: {
-        default: "#D6D8DB",
-        light: "#E8E8E8",
+        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",
+    }
 };
 exports.default = palette;

package/dist/Theme/Default/theme.js

@@ -18,5 +18,6 @@ var react_1 = require("@chakra-ui/react");
 var palette_1 = __importDefault(require("./palette"));
 var common_1 = __importDefault(require("../common"));
 var fonts_1 = __importDefault(require("../fonts"));
+var componentStyles_1 = require("../componentStyles");
 var lavender = __assign(__assign({ colors: palette_1.default }, fonts_1.default), common_1.default);
-exports.default = (0, react_1.extendTheme)(lavender);
+exports.default = (0, react_1.extendTheme)(__assign(__assign({}, lavender), { components: componentStyles_1.componentStyles }));

package/dist/Theme/Meadow/palette.d.ts

@@ -10,6 +10,57 @@ declare const palette: {
         700: string;
         800: string;
         900: string;
+        opacity: {
+            4: string;
+            8: string;
+            16: string;
+            24: string;
+            32: string;
+            40: string;
+            48: string;
+        };
+    };
+    secondary: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        opacity: {
+            4: string;
+            8: string;
+            16: string;
+            24: string;
+            32: string;
+            40: string;
+            48: string;
+        };
+    };
+    tertiary: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        opacity: {
+            4: string;
+            8: string;
+            16: string;
+            24: string;
+            32: string;
+            40: string;
+            48: string;
+        };
     };
     transparent: string;
     black: string;
@@ -184,6 +235,18 @@ declare const palette: {
         800: string;
         900: string;
     };
+    background: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
     backgroundColor: {
         main: string;
         secondary: string;
@@ -196,5 +259,110 @@ declare const palette: {
         muted: string;
         neutral: string;
     };
+    text: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    header: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    placeholder: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    boxShadow: {
+        primary: string;
+        error: string;
+        default: string;
+    };
+    sidebar: {
+        background: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+    };
+    boxborder: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    border: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    table: {
+        hover: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+    };
+    disabled: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
 };
 export default palette;