pixelize-design-library 2.1.11 → 2.1.13

package/dist/Theme/Dark/theme.js

@@ -0,0 +1,283 @@
+"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 = {
+    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
+};
+var darkTheme = (0, react_1.extendTheme)({
+    initialColorMode: "dark",
+    useSystemColorMode: false,
+    styles: {
+        global: function (props) { return ({
+            body: {
+                bg: (0, theme_tools_1.mode)("gray.100", "gray.900")(props),
+                color: (0, theme_tools_1.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",
+        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
+    },
+    sizes: __assign(__assign({}, 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,
+    },
+});
+exports.default = darkTheme;

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

@@ -0,0 +1,370 @@
+declare const palette: {
+    primary: {
+        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;
+        };
+    };
+    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;
+    white: string;
+    semantic: {
+        success: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        error: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        warning: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        info: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+    };
+    gray: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    red: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    orange: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    yellow: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    green: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    teal: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    blue: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    cyan: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    purple: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    pink: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        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;
+        tertiary: string;
+        quaternary: string;
+        light: string;
+        medium: string;
+        accent: string;
+        subtle: string;
+        muted: string;
+        neutral: string;
+        base: string;
+        tableHeader: 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;