@g4rcez/components 4.1.3 → 5.0.0

package/dist/src/styles/default-tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"default-tokens.d.ts","sourceRoot":"","sources":["../../../src/styles/default-tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;CAavB,CAAC;AAEX,eAAO,MAAM,oBAAoB;;;;;CAKvB,CAAC;AAEX,eAAO,MAAM,mBAAmB;;;;;;;;CAQtB,CAAC;AAEX,eAAO,MAAM,mBAAmB;;;;;CAKtB,CAAC;AAEX,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKhB,CAAC;AAEX,MAAM,MAAM,aAAa,GAAG,OAAO,aAAa,CAAC"}

package/dist/src/styles/default-tokens.js

@@ -0,0 +1,41 @@
+export const defaultSpacingTokens = {
+    base: "1rem",
+    hairline: "0.0625rem",
+    lg: "1.125rem",
+    sm: "0.75rem",
+    dialog: "20rem",
+    "field-height": "1.5rem",
+    "field-label": "0.875rem",
+    "input-height": "2.5rem",
+    "input-x": "0.5rem",
+    "input-y": "0.25rem",
+    "input-inline": "0.25rem",
+    "input-gap": "0.3rem",
+};
+export const defaultRoundedTokens = {
+    button: "0.55rem",
+    pill: "2rem",
+    card: "0.75rem",
+    full: "9999px",
+};
+export const defaultZIndexTokens = {
+    wizard: "50",
+    normal: "1",
+    navbar: "22",
+    calendar: "2",
+    overlay: "21",
+    tooltip: "20",
+    floating: "22",
+};
+export const defaultShadowTokens = {
+    "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)",
+};
+export const defaultTokens = {
+    spacing: defaultSpacingTokens,
+    rounded: defaultRoundedTokens,
+    zIndex: defaultZIndexTokens,
+    shadow: defaultShadowTokens,
+};

package/dist/src/styles/design-tokens.d.ts

@@ -0,0 +1,29 @@
+import { CSSProperties } from "react";
+import { DesignTokens, DesignTokensBuilder, DesignTokensParser, GeneralTokens, Token } from "./theme.types";
+export declare const parsers: {
+    hex: (v: string) => string;
+    raw: (v: string) => string;
+    hsl: (v: string) => `hsl(${string})`;
+    rgb: (v: string) => `rgb(${string})`;
+    z: (_: string, __: string, k: string) => `var(--z-${string})`;
+    hsla: (v: string) => `hsla(${string})`;
+    rgba: (v: string) => `rgba(${string})`;
+    cssVariable: (_: string, __: string, k: string) => `var(--${string})`;
+    formatWithVar: (format: string) => (_: string, __: string, v: string) => `${string}(var(--${string}), <alpha-value>)`;
+};
+export declare const reduceTokens: <T extends GeneralTokens>(colors: T, parse: DesignTokensBuilder, prefix?: string, append?: string) => Token[];
+export declare const createDesignTokens: <T extends GeneralTokens, Fn extends DesignTokensParser>(colors: T, parse: Fn, prefix?: string, append?: string) => T;
+export declare const createStyles: {
+    default: (tokens: Token[]) => string;
+    dark: (tokens: Token[]) => string;
+};
+type TokenParsersType = "colors" | "spacing" | "rounded" | "components" | "customTokens" | "zIndex";
+type TokenCustomParser = (t: Token) => Token;
+export type TokenRemap = Partial<Record<TokenParsersType, TokenCustomParser> & {
+    name: string;
+}>;
+export declare const createTheme: (theme: DesignTokens, name?: string) => string;
+export declare const createCssProperties: (theme: DesignTokens, map?: TokenRemap) => CSSProperties;
+export declare const createTokenStyles: (theme: DesignTokens, map?: TokenRemap) => string;
+export {};
+//# sourceMappingURL=design-tokens.d.ts.map

package/dist/src/styles/design-tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-tokens.d.ts","sourceRoot":"","sources":["../../../src/styles/design-tokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAE5G,eAAO,MAAM,OAAO;aACP,MAAM;aACN,MAAM;aACN,MAAM;aACN,MAAM;;cAEL,MAAM;cACN,MAAM;;4BAEQ,MAAM,SAAS,MAAM,MAAM,MAAM,KAAK,MAAM;CAC1B,CAAC;AAE/C,eAAO,MAAM,YAAY,GAAI,CAAC,SAAS,aAAa,EAAE,QAAQ,CAAC,EAAE,OAAO,mBAAmB,EAAE,SAAQ,MAAW,EAAE,SAAQ,MAAW,KAAG,KAAK,EAQnI,CAAC;AAEX,eAAO,MAAM,kBAAkB,GAAI,CAAC,SAAS,aAAa,EAAE,EAAE,SAAS,kBAAkB,EACrF,QAAQ,CAAC,EACT,OAAO,EAAE,EACT,SAAQ,MAAW,EACnB,SAAQ,MAAW,KACpB,CAWY,CAAC;AAmBhB,eAAO,MAAM,YAAY;sBACH,KAAK,EAAE;mBACV,KAAK,EAAE;CACzB,CAAC;AAEF,KAAK,gBAAgB,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,YAAY,GAAG,cAAc,GAAG,QAAQ,CAAC;AAEpG,KAAK,iBAAiB,GAAG,CAAC,CAAC,EAAE,KAAK,KAAK,KAAK,CAAC;AAE7C,MAAM,MAAM,UAAU,GAAG,OAAO,CAAC,MAAM,CAAC,gBAAgB,EAAE,iBAAiB,CAAC,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAyBjG,eAAO,MAAM,WAAW,GAAI,OAAO,YAAY,EAAE,OAAO,MAAM,WAIxD,CAAC;AAEP,eAAO,MAAM,mBAAmB,GAAI,OAAO,YAAY,EAAE,MAAM,UAAU,KAAG,aAG3E,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,OAAO,YAAY,EAAE,MAAM,UAAU,WAIjE,CAAC"}

package/dist/src/styles/design-tokens.js

@@ -0,0 +1,73 @@
+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 components = theme.components ? reduceTokens(theme.components, fn(map?.components)) : [];
+    const customTokens = theme.custom ? reduceTokens(theme.custom, fn(map?.customTokens)) : [];
+    return colors.concat(spacing, rounded, components, 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/src/styles/light.d.ts

@@ -0,0 +1,3 @@
+import { DesignTokens } from "./theme.types";
+export declare const LIGHT_THEME: DesignTokens;
+//# sourceMappingURL=light.d.ts.map

package/dist/src/styles/light.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"light.d.ts","sourceRoot":"","sources":["../../../src/styles/light.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C,eAAO,MAAM,WAAW,EAAE,YAsNzB,CAAC"}

package/dist/src/styles/light.js

@@ -0,0 +1,217 @@
+import { rounded, spacing, zIndex } from "./common";
+import { components } from "./components";
+export const LIGHT_THEME = {
+    rounded,
+    spacing,
+    components,
+    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 transparent",
+        "shadow-table": "0px 1px 1px 1px hsla(210, 0%, 0%,  0.1)",
+    },
+    zIndex,
+    colors: {
+        foreground: "hsla(221, 15%, 23%)",
+        background: "hsla(0, 0%, 100%)",
+        border: "hsla(240, 6%, 90%)",
+        muted: {
+            DEFAULT: "hsla(240, 5%, 96%)",
+            foreground: "hsla(240, 4%, 46%)",
+            subtle: "hsla(240, 4%, 46%)",
+            hover: "hsla(240, 5%, 96%)",
+        },
+        disabled: "hsla(240, 5%, 96%)",
+        emphasis: {
+            foreground: "hsla(199, 89%, 28%)",
+            DEFAULT: "hsla(199, 89%, 96%)",
+            subtle: "hsla(199, 89%, 92%)",
+            hover: "hsla(199, 89%, 24%)",
+        },
+        primary: {
+            foreground: "hsla(240, 6%, 10%)",
+            DEFAULT: "hsla(201,49%,36%)",
+            subtle: "hsla(201,49%,28%)",
+            hover: "hsla(201,49%,22%)",
+        },
+        secondary: {
+            background: "hsla(240, 5%, 96%)",
+            DEFAULT: "hsla(240, 6%, 10%)",
+            subtle: "hsla(240, 5%, 96%)",
+            hover: "hsla(240, 6%, 15%)",
+            foreground: "hsla(0, 0%, 100%)",
+        },
+        info: {
+            DEFAULT: "hsla(199, 89%, 48%)",
+            subtle: "hsla(199, 89%, 96%)",
+            hover: "hsla(199, 89%, 40%)",
+            foreground: "hsla(0, 0%, 100%)",
+            notification: "hsla(199, 89%, 48%)",
+        },
+        danger: {
+            DEFAULT: "hsla(0, 84%, 60%)",
+            subtle: "hsla(0, 84%, 96%)",
+            hover: "hsla(0, 84%, 50%)",
+            foreground: "hsla(0, 0%, 100%)",
+            notification: "hsla(0, 84%, 60%)",
+        },
+        warn: {
+            DEFAULT: "hsla(38, 92%, 50%)",
+            subtle: "hsla(38, 92%, 96%)",
+            hover: "hsla(38, 92%, 45%)",
+            foreground: "hsla(0, 0%, 100%)",
+            notification: "hsla(38, 92%, 50%)",
+        },
+        success: {
+            DEFAULT: "hsla(142, 71%, 45%)",
+            subtle: "hsla(142, 71%, 96%)",
+            hover: "hsla(142, 71%, 40%)",
+            foreground: "hsla(0, 0%, 100%)",
+            notification: "hsla(142, 71%, 45%)",
+        },
+        ring: "hsla(201,49%,36%)",
+        input: {
+            border: "hsla(240, 6%, 90%)",
+            placeholder: "hsla(240, 4%, 46%)",
+            "mask-error": "hsla(0, 84%, 96%)",
+            "switch-bg": "hsla(240, 6%, 90%)",
+            switch: "hsla(0, 0%, 100%)",
+            slider: "hsla(199, 89%, 48%)",
+        },
+        card: {
+            muted: "hsla(240, 5%, 96%)",
+            border: "hsla(240, 6%, 90%)",
+            background: "hsla(0, 0%, 100%)",
+        },
+        floating: {
+            foreground: "hsla(240, 10%, 4%)",
+            background: "hsla(0, 0%, 100%)",
+            hover: "hsla(240, 5%, 96%)",
+            border: "hsla(240, 6%, 90%)",
+            overlay: "hsla(240, 10%, 4%)",
+        },
+        tooltip: {
+            foreground: "hsla(0, 0%, 100%)",
+            background: "hsla(240, 10%, 4%)",
+            hover: "hsla(240, 10%, 4%)",
+            border: "hsla(240, 10%, 4%)",
+            overlay: "hsla(0, 0%, 0%)",
+        },
+        table: {
+            header: "hsla(240, 5%, 96%)",
+            background: "hsla(0, 0%, 100%)",
+            border: "hsla(240, 6%, 90%)",
+        },
+        button: {
+            muted: {
+                bg: "hsla(240, 5%, 96%)",
+                text: "hsla(240, 6%, 10%)",
+            },
+            primary: {
+                text: "hsla(0, 0%, 100%)",
+                bg: "hsla(201,49%,36%)",
+            },
+            warn: {
+                bg: "hsla(38, 92%, 50%)",
+                text: "hsla(38, 92%, 15%)",
+            },
+            info: {
+                text: "hsla(0, 0%, 100%)",
+                bg: "hsla(199, 89%, 35%)",
+            },
+            success: {
+                text: "hsla(142, 71%, 15%)",
+                bg: "hsla(142, 71%, 45%)",
+            },
+            danger: {
+                text: "hsla(0, 0%, 100%)",
+                bg: "hsla(0, 72%, 42%)",
+            },
+            neutral: {
+                text: "hsla(240, 6%, 10%)",
+                bg: "hsla(240, 5%, 96%)",
+            },
+            secondary: {
+                text: "hsla(0, 0%, 100%)",
+                bg: "hsla(240, 6%, 10%)",
+            },
+        },
+        tag: {
+            muted: {
+                bg: "hsla(240, 5%, 96%)",
+                text: "hsla(240, 4%, 40%)",
+            },
+            primary: {
+                text: "hsla(199, 89%, 28%)",
+                bg: "hsla(199, 89%, 96%)",
+            },
+            warn: {
+                bg: "hsla(38, 92%, 96%)",
+                text: "hsla(38, 92%, 28%)",
+            },
+            info: {
+                text: "hsla(199, 89%, 30%)",
+                bg: "hsla(199, 89%, 96%)",
+            },
+            success: {
+                text: "hsla(142, 71%, 25%)",
+                bg: "hsla(142, 71%, 96%)",
+            },
+            danger: {
+                text: "hsla(0, 84%, 40%)",
+                bg: "hsla(0, 84%, 96%)",
+            },
+            neutral: {
+                text: "hsla(240, 6%, 10%)",
+                bg: "hsla(240, 5%, 96%)",
+            },
+            secondary: {
+                text: "hsla(0, 0%, 100%)",
+                bg: "hsla(240, 6%, 10%)",
+            },
+        },
+        alert: {
+            muted: {
+                bg: "hsla(240, 5%, 96%)",
+                text: "hsla(240, 6%, 10%)",
+                border: "hsla(240, 6%, 90%)",
+            },
+            primary: {
+                text: "hsla(199, 89%, 28%)",
+                border: "hsla(199, 89%, 90%)",
+                bg: "hsla(199, 89%, 98%)",
+            },
+            warn: {
+                bg: "hsla(38, 92%, 98%)",
+                text: "hsla(38, 92%, 28%)",
+                border: "hsla(38, 92%, 90%)",
+            },
+            info: {
+                text: "hsla(199, 89%, 30%)",
+                bg: "hsla(199, 89%, 98%)",
+                border: "hsla(199, 89%, 90%)",
+            },
+            success: {
+                text: "hsla(142, 71%, 30%)",
+                bg: "hsla(142, 71%, 98%)",
+                border: "hsla(142, 71%, 90%)",
+            },
+            danger: {
+                text: "hsla(0, 84%, 40%)",
+                bg: "hsla(0, 84%, 98%)",
+                border: "hsla(0, 84%, 90%)",
+            },
+            neutral: {
+                text: "hsla(240, 6%, 10%)",
+                bg: "hsla(240, 5%, 96%)",
+                border: "hsla(240, 6%, 90%)",
+            },
+            secondary: {
+                text: "hsla(0, 0%, 100%)",
+                bg: "hsla(240, 6%, 10%)",
+                border: "hsla(240, 6%, 10%)",
+            },
+        },
+    },
+};

package/dist/src/styles/theme.d.ts

@@ -0,0 +1,3 @@
+export declare const defaultDarkTheme: import("./theme.types").DesignTokens;
+export declare const defaultLightTheme: import("./theme.types").DesignTokens;
+//# sourceMappingURL=theme.d.ts.map

package/dist/src/styles/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/styles/theme.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,gBAAgB,sCAAa,CAAC;AAE3C,eAAO,MAAM,iBAAiB,sCAAc,CAAC"}

package/dist/src/styles/theme.js

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