@momo-webplatform/mobase 0.0.21 → 0.0.23

package/publish/esm/mobase-tw-plugin/{foundation/font-sizes/index.d.ts → font-sizes.d.ts}

@@ -7,7 +7,7 @@ type FontSizeValue = [
     }
 ];
 export type FontSizes = Record<string, FontSizeValue>;
-export declare const fontSizes: {
+export declare function fontSizes(prefix: string): {
     xxs: [string, {
         lineHeight: string;
     }];

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

@@ -0,0 +1,94 @@
+export function fontSizes(prefix) {
+    const fontSizes = {
+        xxs: [
+            `var(--${prefix}-font-size-xxs)`,
+            {
+                lineHeight: "1rem",
+            },
+        ],
+        xs: [
+            `var(--${prefix}-font-size-xs)`,
+            {
+                lineHeight: "1rem",
+            },
+        ],
+        sm: [
+            `var(--${prefix}-font-size-sm)`,
+            {
+                lineHeight: "1.25rem",
+            },
+        ],
+        base: [
+            `var(--${prefix}-font-size-base)`,
+            {
+                lineHeight: "1.5rem",
+            },
+        ],
+        lg: [
+            `var(--${prefix}-font-size-lg)`,
+            {
+                lineHeight: "1.75rem",
+            },
+        ],
+        xl: [
+            `var(--${prefix}-font-size-xl)`,
+            {
+                lineHeight: "1.75rem",
+            },
+        ],
+        "2xl": [
+            `var(--${prefix}-font-size-2xl)`,
+            {
+                lineHeight: "2rem",
+            },
+        ],
+        "3xl": [
+            `var(--${prefix}-font-size-3xl)`,
+            {
+                lineHeight: "2.25rem",
+            },
+        ],
+        "4xl": [
+            `var(--${prefix}-font-size-4xl)`,
+            {
+                lineHeight: "2.5rem",
+            },
+        ],
+        "5xl": [
+            `var(--${prefix}-font-size-5xl)`,
+            {
+                lineHeight: "3.5rem",
+                letterSpacing: "-0.075rem",
+            },
+        ],
+        "6xl": [
+            `var(--${prefix}-font-size-6xl)`,
+            {
+                lineHeight: "4.5rem",
+                letterSpacing: "-0.09375rem",
+            },
+        ],
+        "7xl": [
+            `var(--${prefix}-font-size-7xl)`,
+            {
+                lineHeight: "5rem",
+                letterSpacing: "-0.1125rem",
+            },
+        ],
+        "8xl": [
+            `var(--${prefix}-font-size-8xl)`,
+            {
+                lineHeight: "6.5rem",
+                letterSpacing: "-0.15rem",
+            },
+        ],
+        "9xl": [
+            `var(--${prefix}-font-size-9xl)`,
+            {
+                lineHeight: "8rem",
+                letterSpacing: "-0.2rem",
+            },
+        ],
+    };
+    return fontSizes;
+}

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

@@ -0,0 +1,34 @@
+export declare const layout: {
+    "spacing-unit": number;
+    "disabled-opacity": number;
+    "font-size": {
+        xxs: string;
+        xs: string;
+        sm: string;
+        base: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+        "3xl": string;
+        "4xl": string;
+        "5xl": string;
+        "6xl": string;
+        "7xl": string;
+        "8xl": string;
+        "9xl": string;
+    };
+    radius: {
+        sm: string;
+        base: string;
+        md: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+        "3xl": string;
+    };
+    "box-shadow": {
+        small: string;
+        medium: string;
+        large: string;
+    };
+};

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

@@ -0,0 +1,34 @@
+export const layout = {
+    "spacing-unit": 4,
+    "disabled-opacity": 0.5, // Numeric values don't need quotes
+    "font-size": {
+        xxs: "0.625rem",
+        xs: "0.75rem",
+        sm: "0.875rem",
+        base: "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",
+    },
+    radius: {
+        sm: "0.125rem",
+        base: "0.25rem",
+        md: "0.375rem",
+        lg: "0.5rem",
+        xl: "0.75rem",
+        "2xl": "1rem",
+        "3xl": "1.5rem",
+    },
+    "box-shadow": {
+        small: "0px 0px 5px 0px rgb(0 0 0 / 0.02), 0px 2px 10px 0px rgb(0 0 0 / 0.06), 0px 0px 1px 0px rgb(0 0 0 / 0.3)",
+        medium: "0px 0px 15px 0px rgb(0 0 0 / 0.03), 0px 2px 30px 0px rgb(0 0 0 / 0.08), 0px 0px 1px 0px rgb(0 0 0 / 0.3)",
+        large: "0px 0px 30px 0px rgb(0 0 0 / 0.04), 0px 30px 60px 0px rgb(0 0 0 / 0.12), 0px 0px 1px 0px rgb(0 0 0 / 0.3)",
+    },
+};

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

@@ -10,27 +10,32 @@
 import Color from "color";
 import plugin from "tailwindcss/plugin.js";
 import { utilities } from "./utilities";
-import { flattenThemeObject } from "./utils";
-import { colors as listColors, fontSizes, boxShadows, animations, } from "./foundation";
-import forEach from "lodash.foreach";
-const parsedColorsCache = {};
-const resolveConfig = () => {
+import { flattenThemeObject } from "./utils/object";
+import { createSpacingUnits, generateSpacingScale } from "./utils/theme";
+import { colors as listColors } from "./colors";
+import { layout } from "./layout";
+import { animations } from "./animations";
+import { fontSizes } from "./font-sizes";
+import { radius } from "./radius";
+// import { animations } from "./animations";
+// import { fontSizes } from "./font-sizes";
+// import { radius } from "./radius";
+const resolveConfig = (prefix) => {
     const resolved = {
         utilities: {},
         colors: {},
     };
     const flatColors = flattenThemeObject(listColors);
+    const flatLayout = layout;
     const cssSelector = ":root";
     resolved.utilities[cssSelector] = {};
-    forEach(flatColors, (colorValue, colorName) => {
+    // Color
+    Object.entries(flatColors).forEach(([colorName, colorValue]) => {
         if (!colorValue)
             return;
         try {
-            const parsedColor = parsedColorsCache[colorValue] ||
-                Color(colorValue).rgb().round().array();
-            parsedColorsCache[colorValue] = parsedColor;
-            const [r, g, b] = parsedColor;
-            const colorVar = `--${colorName}`;
+            const [r, g, b] = Color(colorValue).rgb().array();
+            const colorVar = `--${prefix}-${colorName}`;
             // Set the css variable in "@layer utilities"
             resolved.utilities[cssSelector][colorVar] = `${r} ${g} ${b}`;
             resolved.colors[colorName] = `rgb(var(${colorVar}) / <alpha-value>)`;
@@ -40,10 +45,37 @@ const resolveConfig = () => {
             console.log("error", error?.message);
         }
     });
+    // Layout
+    Object.entries(flatLayout).forEach(([key, value]) => {
+        if (!value)
+            return;
+        const layoutVariablePrefix = `--${prefix}-${key}`;
+        if (typeof value === "object") {
+            Object.entries(value).forEach(([nestedKey, nestedValue]) => {
+                const nestedLayoutVariable = `${layoutVariablePrefix}-${nestedKey}`;
+                resolved.utilities[cssSelector][nestedLayoutVariable] = nestedValue;
+            });
+        }
+        else if (key === "spacing-unit") {
+            resolved.utilities[cssSelector][layoutVariablePrefix] = value;
+            const spacingScale = generateSpacingScale(Number(value));
+            Object.entries(spacingScale).forEach(([scaleKey, scaleValue]) => {
+                const spacingVariable = `${layoutVariablePrefix}-${scaleKey}`;
+                resolved.utilities[cssSelector][spacingVariable] = scaleValue;
+            });
+        }
+        else {
+            const formattedValue = layoutVariablePrefix.includes("opacity") && typeof value === "number"
+                ? value.toString().replace(/^0\./, ".")
+                : value;
+            resolved.utilities[cssSelector][layoutVariablePrefix] = formattedValue;
+        }
+    });
     return resolved;
 };
 export const mobaseTW = () => {
-    const resolved = resolveConfig();
+    const prefix = "mobase";
+    const resolved = resolveConfig(prefix);
     return plugin(({ addBase, addUtilities }) => {
         addBase({
             ":root": {
@@ -65,10 +97,22 @@ export const mobaseTW = () => {
                     ...resolved?.colors,
                 },
                 boxShadow: {
-                    ...boxShadows,
+                    small: `var(--${prefix}-box-shadow-small)`,
+                    medium: `var(--${prefix}-box-shadow-medium)`,
+                    large: `var(--${prefix}-box-shadow-large)`,
+                },
+                // fontSize: {
+                //   ...fontSizes,
+                // },
+                borderRadius: {
+                    ...radius(prefix),
                 },
                 fontSize: {
-                    ...fontSizes,
+                    ...fontSizes(prefix),
+                },
+                spacing: {
+                    unit: `var(--${prefix}-spacing-unit)`,
+                    ...createSpacingUnits(prefix),
                 },
                 ...animations,
             },

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

@@ -0,0 +1,9 @@
+export declare function radius(prefix: string): {
+    sm: string;
+    DEFAULT: string;
+    md: string;
+    lg: string;
+    xl: string;
+    "2xl": string;
+    "3xl": string;
+};

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

@@ -0,0 +1,12 @@
+export function radius(prefix) {
+    const radius = {
+        sm: `var(--${prefix}-radius-sm)`,
+        DEFAULT: `var(--${prefix}-radius-base)`,
+        md: `var(--${prefix}-radius-md)`,
+        lg: `var(--${prefix}-radius-lg)`,
+        xl: `var(--${prefix}-radius-xl)`,
+        "2xl": `var(--${prefix}-radius-2xl)`,
+        "3xl": `var(--${prefix}-radius-3xl)`,
+    };
+    return radius;
+}

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

@@ -0,0 +1,103 @@
+export interface BaseThemeUnit {
+    small?: string;
+    medium?: string;
+    large?: string;
+}
+export type FontThemeUnit = BaseThemeUnit & {
+    tiny?: string;
+};
+export declare const spacingScaleKeys: string[];
+export declare const mappedSpacingScaleKeys: string[];
+export type SpacingScaleKeys = (typeof spacingScaleKeys)[number];
+export type SpacingScale = Partial<Record<SpacingScaleKeys, string>>;
+export interface LayoutTheme {
+    /**
+     * Base unit token that defines a consistent spacing scale across the components.
+     *
+     * @default 4 (px)
+     */
+    spacingUnit?: number;
+    /**
+     * The default font size applied across the components.
+     *
+     * @default
+     * {
+     *    tiny: "0.75rem",
+     *    small: "0.875rem",
+     *    medium: "1rem",
+     *    large: "1.125rem",
+     *    DEFAULT: "1rem",
+     * }
+     */
+    fontSize?: FontThemeUnit;
+    /**
+     * The default line height applied across the components.
+     *
+     * @default
+     * {
+     *    tiny: "1rem",
+     *    small: "1.25rem",
+     *    medium: "1.5rem",
+     *    large: "1.75rem",
+     *    DEFAULT: "1.5rem",
+     * }
+     */
+    lineHeight?: FontThemeUnit;
+    /**
+     * The default radius applied across the components.
+     * we recommend to use `rem` units.
+     *
+     * @default
+     * {
+     *   small: "0.25rem",
+     *   medium: "0.5rem",
+     *   large: "0.75rem",
+     * }
+     */
+    radius?: BaseThemeUnit;
+    /**
+     * A number between 0 and 1 that is applied as opacity-[value] when the component is disabled.
+     *
+     * format: ".[value]"
+     *
+     * @default .5
+     */
+    disabledOpacity?: string | number;
+    /**
+     * A number between 0 and 1 that is applied as opacity-[value] when the component is hovered.
+     *
+     * format: ".[value]"
+     *
+     * @default .8
+     */
+    hoverOpacity?: string | number;
+    /**
+     * The default height applied to the divider component.
+     * we recommend to use `px` units.
+     *
+     * @default 1px
+     */
+    dividerWeight?: string;
+    /**
+     * The border width applied across the components.
+     * @default
+     * {
+     *    small: "1px",
+     *    medium: "2px",
+     *    large: "3px",
+     * }
+     *
+     */
+    borderWidth?: BaseThemeUnit;
+    /**
+     * The box shadow applied across the components.
+     *
+     * @default
+     * {
+     *   small: 0px 0px 5px 0px rgb(0 0 0 / 0.01), 0px 2px 10px 0px rgb(0 0 0 / 0.06),
+     *   medium: 0px 0px 15px 0px rgb(0 0 0 / 0.02), 0px 2px 30px 0px rgb(0 0 0 / 0.08),
+     *   large: 0px 0px 30px 0px rgb(0 0 0 / 0.03), 0px 30px 60px 0px rgb(0 0 0 / 0.12),
+     * }
+     */
+    boxShadow?: BaseThemeUnit;
+}

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

@@ -0,0 +1,51 @@
+export const spacingScaleKeys = [
+    "0",
+    "xs",
+    "sm",
+    "md",
+    "lg",
+    "xl",
+    "2xl",
+    "3xl",
+    "4xl",
+    "5xl",
+    "6xl",
+    "7xl",
+    "8xl",
+    "9xl",
+    "1",
+    "2",
+    "3",
+    "3.5",
+    "4",
+    "5",
+    "6",
+    "7",
+    "8",
+    "9",
+    "10",
+    "11",
+    "12",
+    "13",
+    "14",
+    "15",
+    "16",
+    "17",
+    "18",
+    "20",
+    "24",
+    "28",
+    "32",
+    "36",
+    "40",
+    "44",
+    "48",
+    "52",
+    "56",
+    "60",
+    "64",
+    "72",
+    "80",
+    "96",
+];
+export const mappedSpacingScaleKeys = spacingScaleKeys.map((key) => `unit-${key}`);

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

@@ -1,19 +1,5 @@
-/**
- * Determines if the theme is a base theme
- *
- * @param theme string
- * @returns "light" | "dark
- */
-export declare const isBaseTheme: (theme: string) => boolean;
-/**
- * Removes keys with "-DEFAULT" suffix from the given object and returns a new object.
- *
- * @param obj - The object to remove keys from.
- * @returns A new object with keys ending in "-DEFAULT" removed.
- */
-type TransformedKeys<T extends Record<string, unknown>> = {
-    [K in keyof T as K extends `${infer Prefix}-DEFAULT` ? Prefix : K]: T[K];
-};
+export declare function swapColorValues<T extends Object>(colors: T): {};
+export declare function removeDefaultKeys<T extends Object>(obj: T): {};
 /**
  *
  * Flatten theme object and remove default keys
@@ -21,5 +7,4 @@ type TransformedKeys<T extends Record<string, unknown>> = {
  * @param obj theme object
  * @returns object with flattened keys
  */
-export declare const flattenThemeObject: <T>(obj: T) => TransformedKeys<Record<string, unknown>>;
-export {};
+export declare const flattenThemeObject: <TTarget>(obj: TTarget) => {};

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

@@ -1,19 +1,36 @@
-import { flatten } from "flat";
-/**
- * Determines if the theme is a base theme
- *
- * @param theme string
- * @returns "light" | "dark
- */
-export const isBaseTheme = (theme) => theme === "light" || theme === "dark";
-const removeDefaultKeys = (obj) => {
+import flatten from "flat";
+export function swapColorValues(colors) {
+    const swappedColors = {};
+    const keys = Object.keys(colors);
+    const length = keys.length;
+    for (let i = 0; i < length / 2; i++) {
+        const key1 = keys[i];
+        const key2 = keys[length - 1 - i];
+        // @ts-ignore
+        swappedColors[key1] = colors[key2];
+        // @ts-ignore
+        swappedColors[key2] = colors[key1];
+    }
+    if (length % 2 !== 0) {
+        const middleKey = keys[Math.floor(length / 2)];
+        // @ts-ignore
+        swappedColors[middleKey] = colors[middleKey];
+    }
+    return swappedColors;
+}
+export function removeDefaultKeys(obj) {
     const newObj = {};
     for (const key in obj) {
-        const newKey = key.endsWith("-DEFAULT") ? key.replace("-DEFAULT", "") : key;
-        newObj[newKey] = obj[key];
+        if (key.endsWith("-DEFAULT")) {
+            // @ts-ignore
+            newObj[key.replace("-DEFAULT", "")] = obj[key];
+            continue;
+        }
+        // @ts-ignore
+        newObj[key] = obj[key];
     }
     return newObj;
-};
+}
 /**
  *
  * Flatten theme object and remove default keys
@@ -21,9 +38,7 @@ const removeDefaultKeys = (obj) => {
  * @param obj theme object
  * @returns object with flattened keys
  */
-export const flattenThemeObject = (obj) => removeDefaultKeys(
-// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
-flatten(obj, {
+export const flattenThemeObject = (obj) => removeDefaultKeys(flatten(obj, {
     safe: true,
     delimiter: "-",
 }));

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

@@ -0,0 +1,2 @@
+export declare const generateSpacingScale: (spacingUnit: number) => Partial<Record<string, string>>;
+export declare function createSpacingUnits(prefix: string): Record<string, string>;

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

@@ -0,0 +1,65 @@
+import { spacingScaleKeys } from "../types";
+/**
+ * Determines if the theme is a base theme
+ *
+ * @param theme string
+ * @returns "light" | "dark
+ */
+const ROOT_FONT_SIZE = 16;
+const baseScale = [
+    0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 18,
+];
+const extendedScale = [
+    20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 72, 80, 96,
+];
+export const generateSpacingScale = (spacingUnit) => {
+    const scaleLabels = {
+        xs: 2,
+        sm: 3,
+        md: 4,
+        lg: 5.5,
+        xl: 9,
+        "2xl": 12,
+        "3xl": 20,
+        "4xl": 30,
+        "5xl": 56,
+        "6xl": 72,
+        "7xl": 96,
+        "8xl": 128,
+        "9xl": 160,
+    };
+    const scale = { 0: "0px" };
+    Object.entries(scaleLabels).forEach(([label, multiplier]) => {
+        scale[label] = multiplier
+            ? `${(spacingUnit * multiplier) / ROOT_FONT_SIZE}rem`
+            : `${spacingUnit / ROOT_FONT_SIZE}rem`;
+    });
+    baseScale.forEach((i) => {
+        let key = `${i}`;
+        // if the key has decimal e.g 3.5 change it to "3-5" format
+        if (key.includes(".")) {
+            const [first, second] = key.split(".");
+            key = `${first}_${second}`;
+        }
+        scale[key] = `${(spacingUnit * i) / ROOT_FONT_SIZE}rem`;
+    });
+    extendedScale.forEach((i) => {
+        const key = `${i}`;
+        scale[key] = `${(spacingUnit * i) / ROOT_FONT_SIZE}rem`;
+    });
+    return scale;
+};
+export function createSpacingUnits(prefix) {
+    const result = spacingScaleKeys.reduce((acc, key) => {
+        let value = `var(--${prefix}-spacing-unit-${key})`;
+        if (key.includes(".")) {
+            const [first, second] = key.split(".");
+            value = `var(--${prefix}-spacing-unit-${first}_${second})`;
+        }
+        return {
+            ...acc,
+            [`${key}`]: value,
+        };
+    }, {});
+    return result;
+}