pixelize-design-library 2.1.11 → 2.1.13

package/dist/Theme/Skyline/theme.js

@@ -0,0 +1,23 @@
+"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);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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 skyline = __assign(__assign({ colors: palette_1.default }, fonts_1.default), common_1.default);
+exports.default = (0, react_1.extendTheme)(__assign(__assign({}, skyline), { components: componentStyles_1.componentStyles }));

package/dist/Theme/common.d.ts

@@ -0,0 +1,166 @@
+declare const common: {
+    lineHeights: {
+        normal: string;
+        none: number;
+        shorter: number;
+        short: number;
+        base: number;
+        tall: number;
+        taller: string;
+        "3": string;
+        "4": string;
+        "5": string;
+        "6": string;
+        "7": string;
+        "8": string;
+        "9": string;
+        "10": string;
+    };
+    letterSpacings: {
+        tighter: string;
+        tight: string;
+        normal: string;
+        wide: string;
+        wider: string;
+        widest: string;
+    };
+    space: {
+        px: string;
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        12: string;
+        14: string;
+        16: string;
+        20: string;
+        24: string;
+        28: string;
+        32: string;
+        36: string;
+        40: string;
+        44: string;
+        48: string;
+        52: string;
+        56: string;
+        60: string;
+        64: string;
+        72: string;
+        80: string;
+        96: string;
+    };
+    sizes: {
+        full: string;
+        screenW: string;
+        screenH: string;
+        max: string;
+        min: string;
+        '3xs': string;
+        '2xs': string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+        '4xl': string;
+        '5xl': string;
+        '6xl': string;
+        '7xl': string;
+        '8xl': string;
+        container: {
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+        };
+        px: string;
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        12: string;
+        14: string;
+        16: string;
+        20: string;
+        24: string;
+        28: string;
+        32: string;
+        36: string;
+        40: string;
+        44: string;
+        48: string;
+        52: string;
+        56: string;
+        60: string;
+        64: string;
+        72: string;
+        80: string;
+        96: string;
+    };
+    breakpoints: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+    };
+    shadows: {
+        xs: string;
+        sm: string;
+        base: string;
+        md: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+        outline: string;
+        inner: string;
+        none: string;
+        darkLg: string;
+    };
+    radii: {
+        none: string;
+        sm: string;
+        base: string;
+        md: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+        "3xl": string;
+        full: string;
+    };
+    zIndices: {
+        hide: number;
+        auto: string;
+        base: number;
+        docked: number;
+        dropdown: number;
+        sticky: number;
+        banner: number;
+        overlay: number;
+        modal: number;
+        popover: number;
+        skipLink: number;
+        toast: number;
+        tooltip: number;
+    };
+    config: {
+        cssVarPrefix: string;
+    };
+};
+export default common;

package/dist/Theme/common.js

@@ -0,0 +1,101 @@
+"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);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var space_1 = __importDefault(require("./space"));
+var common = {
+    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_1.default,
+    sizes: __assign(__assign({}, space_1.default), { 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',
+    }
+};
+exports.default = common;

package/dist/Theme/componentStyles.d.ts

@@ -0,0 +1,7 @@
+export declare const componentStyles: {
+    Checkbox: import("@chakra-ui/theme").ComponentStyleConfig;
+    Input: import("@chakra-ui/theme").ComponentStyleConfig;
+    Button: import("@chakra-ui/theme").ComponentStyleConfig;
+    Select: import("@chakra-ui/theme").ComponentStyleConfig;
+    Tag: import("@chakra-ui/theme").ComponentStyleConfig;
+};

package/dist/Theme/componentStyles.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.componentStyles = void 0;
+var Button_styles_1 = require("../Components/Button/Button.styles");
+var Checkbox_styles_1 = require("../Components/Checkbox/Checkbox.styles");
+var TextInput_styles_1 = require("../Components/Input/TextInput.styles");
+var Select_styles_1 = require("../Components/Select/Select.styles");
+var Tag_styles_1 = require("../Components/Tag/Tag.styles");
+exports.componentStyles = {
+    Checkbox: Checkbox_styles_1.Checkbox,
+    Input: TextInput_styles_1.Input,
+    Button: Button_styles_1.Button,
+    Select: Select_styles_1.Select,
+    Tag: Tag_styles_1.Tag,
+};

package/dist/Theme/fonts.d.ts

@@ -0,0 +1,34 @@
+declare const fonts: {
+    fonts: {
+        body: string;
+        heading: string;
+        mono: string;
+    };
+    fontSizes: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+        "3xl": string;
+        "4xl": string;
+        "5xl": string;
+        "6xl": string;
+        "7xl": string;
+        "8xl": string;
+        "9xl": string;
+    };
+    fontWeights: {
+        hairline: number;
+        thin: number;
+        light: number;
+        normal: number;
+        medium: number;
+        semibold: number;
+        bold: number;
+        extrabold: number;
+        black: number;
+    };
+};
+export default fonts;

package/dist/Theme/fonts.js

@@ -0,0 +1,41 @@
+"use strict";
+// Supports weights 100-900
+// import "@fontsource-variable/inter";
+Object.defineProperty(exports, "__esModule", { value: true });
+var fonts = {
+    fonts: {
+        body: "Inter Variable, sans-serif",
+        heading: "Inter Variable, sans-serif",
+        mono: "Inter Variable, sans-serif",
+        // body: "Ubuntu Sans, serif",
+        // heading: "Ubuntu Sans, serif",
+        // mono: "Ubuntu Sans, 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,
+    },
+};
+exports.default = fonts;

package/dist/Theme/index.d.ts

@@ -0,0 +1,11 @@
+import lavender from "./Default/theme";
+import meadow from "./Meadow/theme";
+import radiant from "./Radiant/theme";
+import skyline from "./Skyline/theme";
+export { skyline, meadow, radiant, lavender };
+export declare const ThemesList: {
+    skyline: Record<string, any>;
+    meadow: Record<string, any>;
+    radiant: Record<string, any>;
+    lavender: Record<string, any>;
+};

package/dist/Theme/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemesList = exports.lavender = exports.radiant = exports.meadow = exports.skyline = void 0;
+var theme_1 = __importDefault(require("./Default/theme"));
+exports.lavender = theme_1.default;
+var theme_2 = __importDefault(require("./Meadow/theme"));
+exports.meadow = theme_2.default;
+var theme_3 = __importDefault(require("./Radiant/theme"));
+exports.radiant = theme_3.default;
+var theme_4 = __importDefault(require("./Skyline/theme"));
+exports.skyline = theme_4.default;
+exports.ThemesList = {
+    skyline: theme_4.default,
+    meadow: theme_2.default,
+    radiant: theme_3.default,
+    lavender: theme_1.default,
+};

package/dist/Theme/space.d.ts

@@ -0,0 +1,33 @@
+declare const space: {
+    px: string;
+    0: string;
+    1: string;
+    2: string;
+    3: string;
+    4: string;
+    5: string;
+    6: string;
+    7: string;
+    8: string;
+    9: string;
+    10: string;
+    12: string;
+    14: string;
+    16: string;
+    20: string;
+    24: string;
+    28: string;
+    32: string;
+    36: string;
+    40: string;
+    44: string;
+    48: string;
+    52: string;
+    56: string;
+    60: string;
+    64: string;
+    72: string;
+    80: string;
+    96: string;
+};
+export default space;

package/dist/Theme/space.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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
+};
+exports.default = space;

package/dist/Theme/theme.d.ts

@@ -0,0 +1,2 @@
+export type ThemeName = 'skyline' | 'midnight' | 'sunset' | 'lavender';
+export declare const themes: Record<ThemeName, string>;

package/dist/Theme/theme.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.themes = void 0;
+exports.themes = {
+    skyline: 'skyline',
+    midnight: 'midnight',
+    sunset: 'sunset',
+    lavender: 'lavender',
+};