@momo-webplatform/mobase 0.0.15 → 0.0.16

package/publish/esm/mobase-tw-plugin/font-sizes/index.d.ts

@@ -0,0 +1,59 @@
+type FontSizeValue = [
+    fontSize: string,
+    configuration: {
+        lineHeight?: string;
+        letterSpacing?: string;
+        fontWeight?: string;
+    }
+];
+export type FontSizes = Record<string, FontSizeValue>;
+export declare const fontSizes: {
+    xxs: [string, {
+        lineHeight: string;
+    }];
+    xs: [string, {
+        lineHeight: string;
+    }];
+    sm: [string, {
+        lineHeight: string;
+    }];
+    base: [string, {
+        lineHeight: string;
+    }];
+    lg: [string, {
+        lineHeight: string;
+    }];
+    xl: [string, {
+        lineHeight: string;
+    }];
+    "2xl": [string, {
+        lineHeight: string;
+    }];
+    "3xl": [string, {
+        lineHeight: string;
+    }];
+    "4xl": [string, {
+        lineHeight: string;
+    }];
+    "5xl": [string, {
+        lineHeight: string;
+        letterSpacing: string;
+    }];
+    "6xl": [string, {
+        lineHeight: string;
+        letterSpacing: string;
+    }];
+    "7xl": [string, {
+        lineHeight: string;
+        letterSpacing: string;
+    }];
+    "8xl": [string, {
+        lineHeight: string;
+        letterSpacing: string;
+    }];
+    "9xl": [string, {
+        lineHeight: string;
+        letterSpacing: string;
+    }];
+};
+export {};

package/publish/esm/mobase-tw-plugin/font-sizes/index.js

@@ -0,0 +1,91 @@
+export const fontSizes = {
+    xxs: [
+        "0.625rem",
+        {
+            lineHeight: "1rem",
+        },
+    ],
+    xs: [
+        "0.75rem",
+        {
+            lineHeight: "1rem",
+        },
+    ],
+    sm: [
+        "0.875rem",
+        {
+            lineHeight: "1.25rem",
+        },
+    ],
+    base: [
+        "1rem",
+        {
+            lineHeight: "1.5rem",
+        },
+    ],
+    lg: [
+        "1.125rem",
+        {
+            lineHeight: "1.75rem",
+        },
+    ],
+    xl: [
+        "1.25rem",
+        {
+            lineHeight: "1.75rem",
+        },
+    ],
+    "2xl": [
+        "1.5rem",
+        {
+            lineHeight: "2rem",
+        },
+    ],
+    "3xl": [
+        "1.875rem",
+        {
+            lineHeight: "2.25rem",
+        },
+    ],
+    "4xl": [
+        "2.25rem",
+        {
+            lineHeight: "2.5rem",
+        },
+    ],
+    "5xl": [
+        "3rem",
+        {
+            lineHeight: "3.5rem",
+            letterSpacing: "-0.075rem",
+        },
+    ],
+    "6xl": [
+        "3.75rem",
+        {
+            lineHeight: "4.5rem",
+            letterSpacing: "-0.09375rem",
+        },
+    ],
+    "7xl": [
+        "4.5rem",
+        {
+            lineHeight: "5rem",
+            letterSpacing: "-0.1125rem",
+        },
+    ],
+    "8xl": [
+        "6rem",
+        {
+            lineHeight: "6.5rem",
+            letterSpacing: "-0.15rem",
+        },
+    ],
+    "9xl": [
+        "8rem",
+        {
+            lineHeight: "8rem",
+            letterSpacing: "-0.2rem",
+        },
+    ],
+};

package/publish/esm/mobase-tw-plugin/index.d.ts

@@ -0,0 +1 @@
+export { mobaseTW } from "./plugin";

package/publish/esm/mobase-tw-plugin/index.js

@@ -0,0 +1 @@
+export { mobaseTW } from "./plugin";

package/publish/esm/mobase-tw-plugin/plugin.d.ts

@@ -0,0 +1,10 @@
+/**
+ * This Tailwind plugin is based and inspired on "tw-colors" and "NextUI".
+ *
+ * @see https://github.com/L-Blondy/tw-colors
+ * @see https://github.com/nextui-org/nextui
+ */
+export declare const mobaseTW: () => {
+    handler: import("tailwindcss/types/config").PluginCreator;
+    config?: Partial<import("tailwindcss/types/config").Config> | undefined;
+};

package/publish/esm/mobase-tw-plugin/plugin.js

@@ -0,0 +1,118 @@
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/**
+ * This Tailwind plugin is based and inspired on "tw-colors" and "NextUI".
+ *
+ * @see https://github.com/L-Blondy/tw-colors
+ * @see https://github.com/nextui-org/nextui
+ */
+import Color from "color";
+import plugin from "tailwindcss/plugin.js";
+import { utilities } from "./utilities";
+import { flattenThemeObject } from "./utils";
+import { colors as listColors } from "./colors";
+import { animations } from "./animations";
+import { boxShadows } from "./shadows";
+import { fontSizes } from "./font-sizes";
+const parsedColorsCache = {};
+const resolveConfig = () => {
+    const resolved = {
+        utilities: {},
+        colors: {},
+    };
+    const flatColors = flattenThemeObject(listColors);
+    const cssSelector = `:root`;
+    resolved.utilities[cssSelector] = {};
+    for (const [colorName, colorValue] of Object.entries(flatColors)) {
+        if (!colorValue)
+            return;
+        try {
+            const parsedColor = parsedColorsCache[colorValue] ||
+                Color(colorValue).hsl().round().array();
+            parsedColorsCache[colorValue] = parsedColor;
+            const [h, s, l, defaultAlphaValue] = parsedColor;
+            const colorVar = `--${colorName}`;
+            const opacityVar = `--${colorName}-opacity`;
+            // Set the css variable in "@layer utilities"
+            resolved.utilities[cssSelector][colorVar] = `${h} ${s}% ${l}%`;
+            // If an alpha value was provided in the color definition, store it in a css variable
+            if (typeof defaultAlphaValue === "number") {
+                resolved.utilities[cssSelector][opacityVar] =
+                    defaultAlphaValue.toFixed(2);
+            }
+            // set the dynamic color in tailwind config theme.colors
+            // opacityVariable va opacityValue ở đâu ra, đm nó
+            resolved.colors[colorName] = ({ opacityVariable, opacityValue }) => {
+                // if the opacity is set  with a slash (e.g. bg-primary/90), use the provided value
+                if (!isNaN(+opacityValue)) {
+                    return `hsl(var(${colorVar}) / ${opacityValue})`;
+                }
+                // if no opacityValue was provided (=it is not parsable to a number)
+                // the nextuiOpacityVariable (opacity defined in the color definition rgb(0, 0, 0, 0.5)) should have the priority
+                // over the tw class based opacity(e.g. "bg-opacity-90")
+                // This is how tailwind behaves as for v3.2.4
+                if (opacityVariable) {
+                    return `hsl(var(${colorVar}) / var(${opacityVar}, var(${opacityVariable})))`;
+                }
+                return `hsl(var(${colorVar}) / var(${opacityVar}, 1))`;
+            };
+        }
+        catch (error) {
+            // eslint-disable-next-line no-console
+            console.log("error", error?.message);
+        }
+    }
+    return resolved;
+};
+export const mobaseTW = () => {
+    const resolved = resolveConfig();
+    return plugin(({ addBase, addUtilities }) => {
+        addBase({
+            ":root": {
+                "font-smooth--webkit": "antialiased",
+            },
+            ...resolved?.utilities, //Xem lai cho nay, addBase
+        });
+        addUtilities({
+            // ...resolved?.utilities, //Xem lai cho nay, addBase
+            ...utilities,
+        });
+    }, 
+    // Extend the Tailwind config
+    {
+        theme: {
+            extend: {
+                colors: {
+                    ...listColors,
+                    ...resolved?.colors,
+                },
+                screens: {
+                    xs: "480px",
+                },
+                padding: {
+                    "2px": "calc(2px - var(--wg-border-width, 0px))",
+                    "4px": "calc(4px - var(--wg-border-width, 0px))",
+                    "6px": "calc(6px - var(--wg-border-width, 0px))",
+                    "8px": "calc(8px - var(--wg-border-width, 0px))",
+                    "12px": "calc(12px - var(--wg-border-width, 0px))",
+                    "14px": "14px",
+                    "16px": "calc(16px - var(--wg-border-width, 0px))",
+                },
+                outlineOffset: {
+                    3: "3px",
+                },
+                textUnderlineOffset: {
+                    3: "3px",
+                },
+                boxShadow: {
+                    ...boxShadows,
+                },
+                fontSize: {
+                    ...fontSizes,
+                },
+                ...animations
+            },
+        },
+    });
+};

package/publish/esm/mobase-tw-plugin/shadows/index.d.ts

@@ -0,0 +1,10 @@
+export declare const boxShadows: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    "2xl": string;
+    overlay: string;
+};
+export type BoxShadows = typeof boxShadows;

package/publish/esm/mobase-tw-plugin/shadows/index.js

@@ -0,0 +1,9 @@
+export const boxShadows = {
+    xs: "0 1px 2px 0 rgba(18, 18, 23, 0.05)",
+    sm: "0 1px 3px 0 rgba(18, 18, 23, 0.1), 0 1px 2px 0 rgba(18, 18, 23, 0.06)",
+    md: "0px 2px 4px -1px rgba(18, 18, 23, 0.06), 0px 4px 6px -1px rgba(18, 18, 23, 0.08)",
+    lg: "0px 4px 6px -2px rgba(18, 18, 23, 0.05), 0px 10px 15px -3px rgba(18, 18, 23, 0.08)",
+    xl: "0px 10px 10px -5px rgba(18, 18, 23, 0.04), 0px 20px 25px -5px rgba(18, 18, 23, 0.10)",
+    "2xl": "0px 25px 50px -20px rgba(18, 18, 23, 0.25)",
+    overlay: "0px 2px 4px 0px rgba(18, 18, 23, 0.04), 0px 5px 8px 0px rgba(18, 18, 23, 0.04), 0px 10px 18px 0px rgba(18, 18, 23, 0.03), 0px 24px 48px 0px rgba(18, 18, 23, 0.03), 0px 0px 0px 1px rgba(18, 18, 23, 0.10)",
+};

package/publish/esm/mobase-tw-plugin/utilities/custom.d.ts

@@ -0,0 +1,21 @@
+declare const _default: {
+    /**
+     * Custom utilities
+     */
+    ".leading-inherit": {
+        "line-height": string;
+    };
+    ".bg-img-inherit": {
+        "background-image": string;
+    };
+    ".bg-clip-inherit": {
+        "background-clip": string;
+    };
+    ".text-fill-inherit": {
+        "-webkit-text-fill-color": string;
+    };
+    ".tap-highlight-transparent": {
+        "-webkit-tap-highlight-color": string;
+    };
+};
+export default _default;

package/publish/esm/mobase-tw-plugin/utilities/custom.js

@@ -0,0 +1,20 @@
+export default {
+    /**
+     * Custom utilities
+     */
+    ".leading-inherit": {
+        "line-height": "inherit",
+    },
+    ".bg-img-inherit": {
+        "background-image": "inherit",
+    },
+    ".bg-clip-inherit": {
+        "background-clip": "inherit",
+    },
+    ".text-fill-inherit": {
+        "-webkit-text-fill-color": "inherit",
+    },
+    ".tap-highlight-transparent": {
+        "-webkit-tap-highlight-color": "transparent",
+    },
+};

package/publish/esm/mobase-tw-plugin/utilities/index.d.ts

@@ -0,0 +1,111 @@
+export declare const utilities: {
+    ".scrollbar-hide": {
+        "-ms-overflow-style": string;
+        "scrollbar-width": string;
+        "&::-webkit-scrollbar": {
+            display: string;
+        };
+    };
+    ".scrollbar-default": {
+        "-ms-overflow-style": string;
+        "scrollbar-width": string;
+        "&::-webkit-scrollbar": {
+            display: string;
+        };
+    };
+    ".transition-all": {
+        "transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+    ".transition-background": {
+        "transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+    ".transition": {
+        "transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+    ".transition-colors": {
+        "transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+    ".transition-opacity": {
+        "transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+    ".transition-colors-opacity": {
+        "transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+    ".transition-width": {
+        "transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+    ".transition-height": {
+        "transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+    ".transition-size": {
+        "transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+    ".transition-left": {
+        "transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+    ".transition-shadow": {
+        "transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+    ".transition-transform": {
+        "transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+    ".transition-transform-opacity": {
+        "transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+    ".transition-transform-background": {
+        "transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+    ".transition-transform-colors": {
+        " transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+    ".transition-transform-colors-opacity": {
+        " transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+    ".leading-inherit": {
+        "line-height": string;
+    };
+    ".bg-img-inherit": {
+        "background-image": string;
+    };
+    ".bg-clip-inherit": {
+        "background-clip": string;
+    };
+    ".text-fill-inherit": {
+        "-webkit-text-fill-color": string;
+    };
+    ".tap-highlight-transparent": {
+        "-webkit-tap-highlight-color": string;
+    };
+};

package/publish/esm/mobase-tw-plugin/utilities/index.js

@@ -0,0 +1,8 @@
+import transition from "./transition";
+import custom from "./custom";
+import scrollbarHide from "./scrollbar-hide";
+export const utilities = {
+    ...custom,
+    ...transition,
+    ...scrollbarHide,
+};

package/publish/esm/mobase-tw-plugin/utilities/scrollbar-hide.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Credits to: https://github.com/reslear/tailwind-scrollbar-hide/tree/main
+ */
+declare const _default: {
+    /**
+     * Scroll Hide
+     */
+    ".scrollbar-hide": {
+        "-ms-overflow-style": string;
+        "scrollbar-width": string;
+        "&::-webkit-scrollbar": {
+            display: string;
+        };
+    };
+    ".scrollbar-default": {
+        "-ms-overflow-style": string;
+        "scrollbar-width": string;
+        "&::-webkit-scrollbar": {
+            display: string;
+        };
+    };
+};
+export default _default;

package/publish/esm/mobase-tw-plugin/utilities/scrollbar-hide.js

@@ -0,0 +1,28 @@
+/**
+ * Credits to: https://github.com/reslear/tailwind-scrollbar-hide/tree/main
+ */
+export default {
+    /**
+     * Scroll Hide
+     */
+    ".scrollbar-hide": {
+        /* IE and Edge */
+        "-ms-overflow-style": "none",
+        /* Firefox */
+        "scrollbar-width": "none",
+        /* Safari and Chrome */
+        "&::-webkit-scrollbar": {
+            display: "none",
+        },
+    },
+    ".scrollbar-default": {
+        /* IE and Edge */
+        "-ms-overflow-style": "auto",
+        /* Firefox */
+        "scrollbar-width": "auto",
+        /* Safari and Chrome */
+        "&::-webkit-scrollbar": {
+            display: "block",
+        },
+    },
+};

package/publish/esm/mobase-tw-plugin/utilities/transition.d.ts

@@ -0,0 +1,86 @@
+declare const _default: {
+    /**
+     * Transition utilities
+     */
+    ".transition-all": {
+        "transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+    ".transition-background": {
+        "transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+    ".transition": {
+        "transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+    ".transition-colors": {
+        "transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+    ".transition-opacity": {
+        "transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+    ".transition-colors-opacity": {
+        "transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+    ".transition-width": {
+        "transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+    ".transition-height": {
+        "transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+    ".transition-size": {
+        "transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+    ".transition-left": {
+        "transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+    ".transition-shadow": {
+        "transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+    ".transition-transform": {
+        "transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+    ".transition-transform-opacity": {
+        "transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+    ".transition-transform-background": {
+        "transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+    ".transition-transform-colors": {
+        " transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+    ".transition-transform-colors-opacity": {
+        " transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+};
+export default _default;