@g4rcez/components 3.0.0-0 → 3.0.1

package/dist/styles/dark.js

@@ -1,209 +0,0 @@
-import { rounded, spacing, zIndex } from "./common";
-export const DARK_THEME = {
-    name: "dark",
-    zIndex,
-    rounded,
-    spacing,
-    shadow: {
-        "shadow-notification": "1px 2px 2px 2px hsla(210, 15%, 20%,  0.15)",
-        "shadow-floating": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
-        "shadow-card": "0px 1px 1px 1px hsla(210, 25%, 20%,  0.1)",
-        "shadow-table": "0px 1px 1px 1px hsla(210, 25%, 20%,  0.1)",
-    },
-    colors: {
-        foreground: "hsla(210, 50%, 98%)",
-        background: "hsla(0, 0%, 9%)",
-        border: "hsla(240, 7%, 27%)",
-        muted: "hsla(210, 10%, 40%)",
-        disabled: "hsla(240, 4%, 33%)",
-        emphasis: {
-            foreground: "hsla(251, 91%, 95%)",
-            DEFAULT: "hsla(255, 92%, 76%)",
-            subtle: "hsla(252, 95%, 85%)",
-            hover: "hsla(262, 83%, 58%)",
-        },
-        primary: {
-            foreground: "hsla(210, 40%, 98%)",
-            DEFAULT: "hsla(200,98%,39%)",
-            subtle: "hsla(199, 95%, 87%)",
-            hover: "hsla(199, 97%, 40%)",
-        },
-        secondary: {
-            DEFAULT: "hsla(210, 32%, 70%)",
-            background: "hsla(210, 30%, 81%)",
-            subtle: "hsla(210, 27%, 88%)",
-            hover: "hsla(210, 10%, 58%)",
-            foreground: "hsla(210, 20%, 30%)",
-        },
-        info: {
-            DEFAULT: "hsla(219, 91%, 59%)",
-            subtle: "hsla(219, 93%, 77%)",
-            hover: "hsla(219, 83%, 41%)",
-            foreground: "hsla(210, 40%, 98%)",
-            notification: "hsla(219, 91%, 59%)",
-        },
-        warn: {
-            DEFAULT: "hsla(27, 96%, 61%)",
-            subtle: "hsla(45, 95%, 66%)",
-            hover: "hsla(21, 90%, 48%)",
-            foreground: "hsla(210, 40%, 98%)",
-            notification: "hsla(32, 65%, 75%)",
-        },
-        danger: {
-            DEFAULT: "hsla(358, 65%, 57%)",
-            subtle: "hsla(0, 94%, 81%)",
-            hover: "hsla(0, 82%, 47%)",
-            foreground: "hsla(210, 40%, 98%)",
-            notification: "hsla(358, 40%, 23%)",
-        },
-        success: {
-            DEFAULT: "hsla(160, 73%, 36%)",
-            subtle: "hsla(160, 75%, 75%)",
-            hover: "hsla(160, 91%, 27%)",
-            foreground: "hsla(160, 91%, 50%)",
-            notification: "hsla(160,90%,5%)",
-        },
-        input: {
-            border: "hsla(240, 4%, 25%)",
-            placeholder: "hsla(210, 24%, 71%)",
-            "mask-error": "hsla(0, 94%, 81%)",
-            "switch-bg": "hsla(0, 0%, 9%)",
-            switch: "hsla(0, 0%, 100%)",
-            slider: "hsla(0, 0%, 100%)",
-        },
-        card: {
-            muted: "hsla(0, 0%, 22%)",
-            border: "hsla(240, 7%, 20%)",
-            background: "hsla(0, 0%, 15%)",
-        },
-        floating: {
-            foreground: "hsla(210, 40%, 98%)",
-            background: "hsla(219, 15%, 12%)",
-            hover: "hsla(221, 10%, 22%)",
-            border: "hsla(240, 7%, 17%)",
-            overlay: "hsla(0, 0%, 0%)",
-        },
-        tooltip: {
-            foreground: "hsla(210, 40%, 98%)",
-            background: "hsla(221, 5%, 15%)",
-            hover: "hsla(221, 10%, 35%)",
-            border: "hsla(0, 0%, 19%)",
-            overlay: "hsla(0, 0%, 0%)",
-        },
-        table: {
-            header: "hsla(0, 0%, 12%)",
-            border: "hsla(240, 4%, 20%)",
-            background: "hsla(0, 0%, 15%)",
-        },
-        button: {
-            primary: {
-                text: "hsla(200,98%,60%)",
-                bg: "hsla(200,28%,19%)",
-            },
-            warn: {
-                text: "hsla(26,100%,67%)",
-                bg: "hsla(37,100%,15%)",
-            },
-            info: {
-                text: "hsla(200,80%,70%)",
-                bg: "hsla(206,66%,24%)",
-            },
-            success: {
-                text: "hsla(151,65%,54%)",
-                bg: "hsla(154,52%,19%)",
-            },
-            danger: {
-                text: "hsla(2,100%,90%)",
-                bg: "hsla(5,62%,23%)",
-            },
-            muted: {
-                text: "hsla(0, 100%, 100%)",
-                bg: "hsla(0, 0%, 12%)",
-            },
-            neutral: {
-                text: "hsla(200,98%,60%)",
-                bg: "hsla(200,28%,19%)",
-            },
-            secondary: {
-                text: "hsla(216,10%,90%)",
-                bg: "hsla(214,7%,19%)",
-            },
-        },
-        tag: {
-            primary: {
-                text: "hsla(200,98%,60%)",
-                bg: "hsla(200,28%,19%)",
-            },
-            warn: {
-                text: "hsla(26,100%,67%)",
-                bg: "hsla(37,100%,15%)",
-            },
-            info: {
-                text: "hsla(200,80%,70%)",
-                bg: "hsla(206,66%,24%)",
-            },
-            success: {
-                text: "hsla(151,65%,54%)",
-                bg: "hsla(154,52%,19%)",
-            },
-            danger: {
-                text: "hsla(2,100%,79%)",
-                bg: "hsla(5,62%,23%)",
-            },
-            neutral: {
-                text: "hsla(200,98%,60%)",
-                bg: "hsla(200,28%,19%)",
-            },
-            secondary: {
-                text: "hsla(216,10%,90%)",
-                bg: "hsla(214,7%,19%)",
-            },
-            muted: {
-                text: "hsla(0, 100%, 100%)",
-                bg: "hsla(0, 0%, 12%)",
-            },
-        },
-        alert: {
-            primary: {
-                text: "hsla(210,100%,72%)",
-                border: "hsla(212,69%,16%)",
-                bg: "hsla(215,42%,9%)",
-            },
-            warn: {
-                bg: "hsla(28,33%,9%)",
-                border: "hsla(29,65%,12%)",
-                text: "hsla(27,100%,78%)",
-            },
-            info: {
-                text: "hsla(253,100%,83%)",
-                bg: "hsla(263,28%,11%)",
-                border: "hsla(252,34%,51%)",
-            },
-            success: {
-                text: "hsla(144,79%,79%)",
-                bg: "hsla(153,20%,9%)",
-                border: "hsla(144,70%,14%)",
-            },
-            danger: {
-                text: "hsla(350,100%,91%)",
-                bg: "hsla(355,25%,15%)",
-                border: "hsla(355,25%,10%)",
-            },
-            neutral: {
-                text: "hsla(200,98%,60%)",
-                bg: "hsla(200,28%,19%)",
-                border: "hsla(200,90%,89%)",
-            },
-            secondary: {
-                text: "hsla(220,9%,94%)",
-                bg: "hsla(220,6%,10%)",
-                border: "hsla(214,7%,19%)",
-            },
-            muted: {
-                bg: "hsla(0, 0%, 12%)",
-                border: "hsla(0, 0%, 40%)",
-                text: "hsla(0, 100%, 100%)",
-            },
-        },
-    },
-};

package/dist/styles/design-tokens.js

@@ -1,69 +0,0 @@
-export const parsers = {
-    hex: (v) => v,
-    raw: (v) => v,
-    hsl: (v) => `hsl(${v})`,
-    rgb: (v) => `rgb(${v})`,
-    z: (_, __, k) => `var(--z-${k})`,
-    hsla: (v) => `hsla(${v})`,
-    rgba: (v) => `rgba(${v})`,
-    cssVariable: (_, __, k) => `var(--${k})`,
-    formatWithVar: (format) => (_, __, v) => `${format}(var(--${v}), <alpha-value>)`,
-};
-export const reduceTokens = (colors, parse, prefix = "", append = "") => Object.entries(colors).reduce((acc, [key, value]) => {
-    const combine = append === "" ? `${prefix}${key}` : `${append}-${key}`;
-    if (typeof value === "string") {
-        const k = append === "" ? `${prefix}${key}` : key;
-        return acc.concat(parse(value, k, combine));
-    }
-    return acc.concat(reduceTokens(value, parse, prefix, combine));
-}, []);
-export const createDesignTokens = (colors, parse, prefix = "", append = "") => Object.entries(colors).reduce((acc, [key, value]) => {
-    const combine = append === "" ? `${prefix}${key}` : `${append}-${key}`;
-    if (typeof value === "string") {
-        const k = append === "" ? `${prefix}${key}` : key;
-        return { ...acc, [k]: parse(value, key, combine) };
-    }
-    return {
-        ...acc,
-        [key]: createDesignTokens(value, parse, prefix, combine),
-    };
-}, {});
-const modifiers = {
-    default: (variables) => `:root { ${variables} }`,
-    dark: (variables) => `html.dark {${variables}}`,
-};
-const createStyleContent = (tokens, modifiers) => {
-    const v = modifiers.value || ((_, s) => s);
-    const content = tokens.map((token) => `${token.key}: ${v(token.key, token.value)}`).join(";");
-    return modifiers.result(content);
-};
-export const createStyles = {
-    default: (tokens) => createStyleContent(tokens, { result: modifiers.default }),
-    dark: (tokens) => createStyleContent(tokens, { result: modifiers.dark }),
-};
-const fn = (p) => (value, _, key) => {
-    const r = { key: `--${key}`, value: `${value}` };
-    return p ? p(r) : r;
-};
-const zIndexParser = (t) => ({ key: t.key.replace(/^--/, "--z-"), value: t.value });
-const createTokens = (theme, map) => {
-    const colors = reduceTokens(theme.colors, fn(map?.colors));
-    const spacing = reduceTokens(theme.spacing, fn(map?.spacing));
-    const rounded = reduceTokens(theme.rounded, fn(map?.rounded));
-    const shadow = reduceTokens(theme.shadow, fn(map?.rounded));
-    const zIndex = reduceTokens(theme.zIndex, fn(map?.zIndex ?? zIndexParser));
-    const customTokens = theme.custom ? reduceTokens(theme.custom, fn(map?.customTokens)) : [];
-    return colors.concat(spacing, rounded, customTokens, zIndex, shadow);
-};
-export const createTheme = (theme, name) => createStyleContent(createTokens(theme), {
-    result: (variables) => `html${name ? `.${name}` : ""} {${variables}}`,
-    value: (_, v) => v.replace("hsla(", "").replace(")", ""),
-});
-export const createCssProperties = (theme, map) => {
-    const tokens = createTokens(theme, map);
-    return tokens.reduce((acc, el) => ({ ...acc, [el.key]: el.value }), {});
-};
-export const createTokenStyles = (theme, map) => createStyleContent(createTokens(theme, map), {
-    result: (variables) => `html${map?.name ? `.${map.name}` : ""} {${variables}}`,
-    value: (_, v) => v,
-});

package/dist/styles/light.js

@@ -1,209 +0,0 @@
-import { rounded, spacing, zIndex } from "./common";
-export const LIGHT_THEME = {
-    rounded,
-    spacing,
-    name: "light",
-    shadow: {
-        "shadow-notification": "1px 2px 2px 2px hsla(210, 25%, 40%, 0.15)",
-        "shadow-floating": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
-        "shadow-card": "0px 1px 2px 1px hsla(210, 25%, 20%, 0.1)",
-        "shadow-table": "0px 1px 1px 1px hsla(210, 0%, 0%,  0.1)",
-    },
-    zIndex,
-    colors: {
-        foreground: "hsla(217, 15%, 30%)",
-        background: "hsla(210, 40%, 98%)",
-        border: "hsla(210, 25%, 88%)",
-        muted: "hsla(210, 30%, 86%)",
-        disabled: "hsla(240, 10%, 78%)",
-        emphasis: {
-            foreground: "hsla(251,91%,95%)",
-            DEFAULT: "hsla(255,92%,76%)",
-            subtle: "hsla(252,95%,85%)",
-            hover: "hsla(262,83%,58%)",
-        },
-        primary: {
-            foreground: "hsla(210, 40%, 98%)",
-            DEFAULT: "hsla(199, 89%, 54%)",
-            subtle: "hsla(199, 95%, 87%)",
-            hover: "hsla(199, 97%, 40%)",
-        },
-        secondary: {
-            background: "hsla(210, 25%, 35%)",
-            DEFAULT: "hsla(210, 25%, 45%)",
-            subtle: "hsla(207, 29%, 39%)",
-            hover: "hsla(210, 21%, 67%)",
-            foreground: "hsla(210, 40%, 98%)",
-        },
-        info: {
-            DEFAULT: "hsla(219, 91%, 59%)",
-            subtle: "hsla(219, 70%, 90%)",
-            hover: "hsla(219, 83%, 41%)",
-            foreground: "hsla(210, 34%, 96%)",
-            notification: "hsla(219, 91%, 59%)",
-        },
-        danger: {
-            DEFAULT: "hsla(0, 82%, 63%)",
-            subtle: "hsla(0, 96%, 95%)",
-            hover: "hsla(0, 82%, 47%)",
-            foreground: "hsla(210, 34%, 96%)",
-            notification: "hsla(0, 100%, 87%)",
-        },
-        warn: {
-            DEFAULT: "hsla(27, 100%, 70%)",
-            subtle: "hsla(45, 95%, 80%)",
-            hover: "hsla(29, 85%, 50%)",
-            foreground: "hsla(210, 34%, 96%)",
-            notification: "hsla(27, 85%, 92%)",
-        },
-        success: {
-            DEFAULT: "hsla(160, 73%, 36%)",
-            subtle: "hsla(160, 75%, 90%)",
-            hover: "hsla(160, 91%, 27%)",
-            foreground: "hsla(160, 91%, 17%)",
-            notification: "hsla(160, 75%, 80%)",
-        },
-        input: {
-            border: "hsla(218, 22%, 85%)",
-            placeholder: "hsla(210, 24%, 71%)",
-            "mask-error": "hsla(0, 94%, 81%)",
-            "switch-bg": "hsla(0, 0%, 45%)",
-            switch: "hsla(0, 0%, 100%)",
-            slider: "hsla(0, 0%, 100%)",
-        },
-        card: {
-            muted: "hsla(210, 25%, 94%)",
-            border: "hsla(210, 25%, 95%)",
-            background: "hsla(0, 0%, 100%)",
-        },
-        floating: {
-            foreground: "hsla(217, 15%, 20%)",
-            background: "hsla(0, 0%, 100%)",
-            hover: "hsla(0, 0%, 92%)",
-            border: "hsla(210, 25%, 88%)",
-            overlay: "hsla(0, 0%, 0%)",
-        },
-        tooltip: {
-            foreground: "hsla(217, 15%, 20%)",
-            background: "hsla(210, 25%, 98%)",
-            hover: "hsla(210, 25%, 92%)",
-            border: "hsla(200, 1%, 80%)",
-            overlay: "hsla(0, 0%, 0%)",
-        },
-        table: {
-            header: "hsla(210, 20%, 98%)",
-            background: "hsla(0, 0%, 100%)",
-            border: "hsla(210, 20%, 92%)",
-        },
-        button: {
-            muted: {
-                bg: "hsla(210, 30%, 86%)",
-                text: "hsla(210, 10%, 15%)",
-            },
-            primary: {
-                text: "hsla(0, 0%, 100%)",
-                bg: "hsla(207,96%,48%)",
-            },
-            warn: {
-                bg: "hsla(26,90%,60%)",
-                text: "hsla(0, 0%, 100%)",
-            },
-            info: {
-                text: "hsla(0, 0%, 100%)",
-                bg: "hsla(210,60%,60%)",
-            },
-            success: {
-                text: "hsla(0, 0%, 100%)",
-                bg: "hsla(152,56%,39%)",
-            },
-            danger: {
-                text: "hsla(0, 0%, 100%)",
-                bg: "hsla(10,78%,54%)",
-            },
-            neutral: {
-                text: "hsla(200,98%,60%)",
-                bg: "hsla(200,28%,19%)",
-            },
-            secondary: {
-                text: "hsla(216,10%,90%)",
-                bg: "hsla(214,7%,19%)",
-            },
-        },
-        tag: {
-            muted: {
-                bg: "hsla(210, 30%, 92%)",
-                text: "hsla(210, 10%, 25%)",
-            },
-            primary: {
-                text: "hsla(0, 0%, 100%)",
-                bg: "hsla(207,70%,55%)",
-            },
-            warn: {
-                bg: "hsla(30,100%,82%)",
-                text: "hsla(23,100%,40%)",
-            },
-            info: {
-                text: "hsla(196,100%,20%)",
-                bg: "hsla(197,65%,80%)",
-            },
-            success: {
-                text: "hsla(154,52%,19%)",
-                bg: "hsla(152,56%,80%)",
-            },
-            danger: {
-                text: "hsla(10,82%,45%)",
-                bg: "hsla(359,94%,92%)",
-            },
-            neutral: {
-                text: "hsla(200,98%,60%)",
-                bg: "hsla(200,28%,19%)",
-            },
-            secondary: {
-                text: "hsla(216,10%,90%)",
-                bg: "hsla(214,7%,19%)",
-            },
-        },
-        alert: {
-            muted: {
-                bg: "hsla(210, 30%, 86%)",
-                text: "hsla(210, 30%, 86%)",
-                border: "hsla(210, 10%, 70%)",
-            },
-            primary: {
-                text: "hsla(206,70%,50%)",
-                border: "hsla(206,90%,89%)",
-                bg: "hsla(205,92%,95%)",
-            },
-            warn: {
-                bg: "hsla(23,100%,96%)",
-                text: "hsla(23,93%,53%)",
-                border: "hsla(33,100%,85%)",
-            },
-            info: {
-                text: "hsla(252,56%,57%)",
-                bg: "hsla(256,100%,95%)",
-                border: "hsla(252,76%,84%)",
-            },
-            success: {
-                text: "hsla(152,56%,39%)",
-                bg: "hsla(139,47%,93%)",
-                border: "hsla(152,58%,78%)",
-            },
-            danger: {
-                text: "hsla(358,69%,55%)",
-                bg: "hsla(357,90%,96%)",
-                border: "hsla(359,100%,90%)",
-            },
-            neutral: {
-                text: "hsla(200,98%,60%)",
-                bg: "hsla(200,28%,19%)",
-                border: "hsla(200,90%,89%)",
-            },
-            secondary: {
-                text: "hsla(216,10%,10%)",
-                bg: "hsla(214,7%,92%)",
-                border: "hsla(216,22%,78%)",
-            },
-        },
-    },
-};

package/dist/styles/theme.js

@@ -1,4 +0,0 @@
-import { DARK_THEME } from "./dark";
-import { LIGHT_THEME } from "./light";
-export const defaultDarkTheme = DARK_THEME;
-export const defaultLightTheme = LIGHT_THEME;

package/dist/styles/theme.types.js

@@ -1 +0,0 @@
-export {};

package/dist/types.js

@@ -1 +0,0 @@
-export {};