@removify/tailwind-preset 0.0.6 → 0.0.8

package/dist/{chunk-W4S5IMYJ.js → chunk-5LOSNWQT.js}

@@ -1,4 +1,4 @@
-// src/index.ts
+// src/theme/colors.ts
 var colors = {
   inherit: "inherit",
   current: "currentColor",
@@ -10,7 +10,6 @@ var colors = {
   special: "#686DF4",
   black: "#000000",
   white: "#FFFFFF",
-  overlay: "#00000080",
   primary: {
     50: "#E8F1F6",
     100: "#BED9E6",
@@ -106,28 +105,33 @@ var colors = {
     700: "#268085",
     800: "#1B5E62",
     900: "#113C3E"
+  },
+  red: {
+    50: "#FEEAE9",
+    100: "#FBC5C1",
+    200: "#F8A09A",
+    300: "#F47C74",
+    400: "#EF584E",
+    500: "#EA3529",
+    600: "#C32A20",
+    700: "#9B2018",
+    800: "#731610",
+    900: "#490D09"
+  },
+  amber: {
+    50: "#FFF9E8",
+    100: "#FFEEBF",
+    200: "#FFE397",
+    300: "#FFD770",
+    400: "#FECB4A",
+    500: "#FBBF24",
+    600: "#D19F1C",
+    700: "#A67E14",
+    800: "#795C0D",
+    900: "#4D3B08"
   }
 };
-function config(extend = false) {
-  if (extend) {
-    return {
-      theme: {
-        extend: {
-          colors
-        }
-      }
-    };
-  }
-  return {
-    theme: {
-      colors
-    }
-  };
-}
-var src_default = config();
 
 export {
-  colors,
-  config,
-  src_default
+  colors
 };

package/dist/cli.cjs

@@ -27,7 +27,7 @@ var import_helpers = require("yargs/helpers");
 var import_yargs = __toESM(require("yargs"), 1);
 var import_node_process = __toESM(require("process"), 1);
 
-// src/index.ts
+// src/theme/colors.ts
 var colors = {
   inherit: "inherit",
   current: "currentColor",
@@ -39,7 +39,6 @@ var colors = {
   special: "#686DF4",
   black: "#000000",
   white: "#FFFFFF",
-  overlay: "#00000080",
   primary: {
     50: "#E8F1F6",
     100: "#BED9E6",
@@ -135,25 +134,32 @@ var colors = {
     700: "#268085",
     800: "#1B5E62",
     900: "#113C3E"
+  },
+  red: {
+    50: "#FEEAE9",
+    100: "#FBC5C1",
+    200: "#F8A09A",
+    300: "#F47C74",
+    400: "#EF584E",
+    500: "#EA3529",
+    600: "#C32A20",
+    700: "#9B2018",
+    800: "#731610",
+    900: "#490D09"
+  },
+  amber: {
+    50: "#FFF9E8",
+    100: "#FFEEBF",
+    200: "#FFE397",
+    300: "#FFD770",
+    400: "#FECB4A",
+    500: "#FBBF24",
+    600: "#D19F1C",
+    700: "#A67E14",
+    800: "#795C0D",
+    900: "#4D3B08"
   }
 };
-function config(extend = false) {
-  if (extend) {
-    return {
-      theme: {
-        extend: {
-          colors
-        }
-      }
-    };
-  }
-  return {
-    theme: {
-      colors
-    }
-  };
-}
-var src_default = config();
 
 // src/cli.ts
 var css = String.raw;

package/dist/cli.js

@@ -1,6 +1,6 @@
 import {
   colors
-} from "./chunk-W4S5IMYJ.js";
+} from "./chunk-5LOSNWQT.js";
 
 // src/cli.ts
 import { hideBin } from "yargs/helpers";

package/dist/index.cjs

@@ -22,9 +22,15 @@ var src_exports = {};
 __export(src_exports, {
   colors: () => colors,
   config: () => config,
-  default: () => src_default
+  default: () => src_default,
+  fontSizes: () => fontSizes,
+  shadows: () => shadows,
+  theme: () => theme,
+  unocssTheme: () => unocssTheme
 });
 module.exports = __toCommonJS(src_exports);
+
+// src/theme/colors.ts
 var colors = {
   inherit: "inherit",
   current: "currentColor",
@@ -36,7 +42,6 @@ var colors = {
   special: "#686DF4",
   black: "#000000",
   white: "#FFFFFF",
-  overlay: "#00000080",
   primary: {
     50: "#E8F1F6",
     100: "#BED9E6",
@@ -132,27 +137,156 @@ var colors = {
     700: "#268085",
     800: "#1B5E62",
     900: "#113C3E"
+  },
+  red: {
+    50: "#FEEAE9",
+    100: "#FBC5C1",
+    200: "#F8A09A",
+    300: "#F47C74",
+    400: "#EF584E",
+    500: "#EA3529",
+    600: "#C32A20",
+    700: "#9B2018",
+    800: "#731610",
+    900: "#490D09"
+  },
+  amber: {
+    50: "#FFF9E8",
+    100: "#FFEEBF",
+    200: "#FFE397",
+    300: "#FFD770",
+    400: "#FECB4A",
+    500: "#FBBF24",
+    600: "#D19F1C",
+    700: "#A67E14",
+    800: "#795C0D",
+    900: "#4D3B08"
   }
 };
+
+// src/util/font.ts
+var import_string_ts = require("string-ts");
+
+// src/types/fontSize.ts
+function isDetailFont(value) {
+  return Array.isArray(value) && typeof value[1] === "object";
+}
+
+// src/util/font.ts
+var entries = Object.entries;
+function fontConfigKeysKebabCase(fontConfig) {
+  const result = {};
+  for (const [key, value] of entries(fontConfig)) {
+    if (value) {
+      if (isDetailFont(value)) {
+        const [size, detail] = value;
+        const kebabDetail = (0, import_string_ts.kebabKeys)(detail);
+        result[key] = [size, kebabDetail];
+      } else {
+        result[key] = value;
+      }
+    }
+  }
+  return result;
+}
+
+// src/theme/fontSize.ts
+var fontSizes = {
+  "2xs": ["0.6875rem", "1rem"],
+  "xs": ["0.75rem", "1rem"],
+  "sm": ["0.875rem", "1.25rem"],
+  "base": ["1rem", "1.5rem"],
+  "lg": ["1.25rem", "1.625rem"],
+  "display1": ["3.75rem", {
+    fontWeight: 700,
+    lineHeight: "5rem",
+    letterSpacing: "-0.0625rem"
+  }],
+  "display2": ["3.25rem", {
+    fontWeight: 700,
+    lineHeight: "4.25rem",
+    letterSpacing: "-0.05rem"
+  }],
+  "display3": ["2.75rem", {
+    fontWeight: 700,
+    lineHeight: "3.625rem",
+    letterSpacing: "-0.0375rem"
+  }],
+  "h1": ["3rem", {
+    fontWeight: 700,
+    lineHeight: "3.75rem",
+    letterSpacing: "-0.0125rem"
+  }],
+  "h2": ["2.5rem", {
+    fontWeight: 700,
+    lineHeight: "3.25rem",
+    letterSpacing: "-0.0125rem"
+  }],
+  "h3": ["2.25rem", {
+    fontWeight: 700,
+    lineHeight: "3rem",
+    letterSpacing: "-0.0125rem"
+  }],
+  "h4": ["2rem", {
+    fontWeight: 700,
+    lineHeight: "2.625rem",
+    letterSpacing: "-0.0125rem"
+  }],
+  "h5": ["1.5rem", {
+    fontWeight: 700,
+    lineHeight: "2rem",
+    letterSpacing: "-0.0125rem"
+  }],
+  "h6": ["1.25rem", {
+    fontWeight: 700,
+    lineHeight: "1.625rem",
+    letterSpacing: "-0.0125rem"
+  }]
+};
+var unocssFontSizes = fontConfigKeysKebabCase(fontSizes);
+
+// src/theme/shadows.ts
+var shadows = {
+  "elevation-0": "0 0 0 0 rgba(0, 0, 0, 0.10)",
+  "elevation-1": "0 1px 2px 0 rgba(0, 0, 0, 0.10)",
+  "elevation-2": "0 4px 8px 0 rgba(0, 0, 0, 0.10)",
+  "elevation-3": "0 6px 12px 0 rgba(0, 0, 0, 0.10)",
+  "elevation-4": "0 8px 16px 0 rgba(0, 0, 0, 0.10)",
+  "elevation-5": "0 12px 24px 0 rgba(0, 0, 0, 0.10)"
+};
+
+// src/theme/index.ts
+var theme = {
+  colors,
+  boxShadow: shadows,
+  fontSize: fontSizes
+};
+var unocssTheme = {
+  colors,
+  boxShadow: shadows,
+  fontSize: unocssFontSizes
+};
+
+// src/index.ts
 function config(extend = false) {
   if (extend) {
     return {
       theme: {
-        extend: {
-          colors
-        }
+        extend: theme
       }
     };
   }
   return {
-    theme: {
-      colors
-    }
+    theme
   };
 }
 var src_default = config();
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   colors,
-  config
+  config,
+  fontSizes,
+  shadows,
+  theme,
+  unocssTheme
 });

package/dist/index.d.cts

@@ -1,6 +1,52 @@
 import * as tailwindcss_types_config from 'tailwindcss/types/config';
 import { Config } from 'tailwindcss';
 
+/**
+ * Converts the given string from camel-case to kebab-case.
+ * @template T The string to convert the case.
+ * @see https://gist.github.com/albertms10/09f14ef7ebdc3ce0e95683c728616253
+ * @example
+ * type Kebab = CamelToKebab<'exampleVarName'>;
+ * // 'example-var-name'
+ */
+type CamelToKebab<S extends string> = S extends `${infer T}${infer U}` ? U extends Uncapitalize<U> ? `${Uncapitalize<T>}${CamelToKebab<U>}` : `${Uncapitalize<T>}-${CamelToKebab<U>}` : '';
+type CamelToKebabKeys<T> = {
+    [K in keyof T as K extends string ? CamelToKebab<K> : K]: T[K];
+};
+
+/**
+ * tailwindcss font-size configuration
+ * @see https://tailwindcss.com/docs/font-size
+ *
+ * @note For unocss, the keys are kebab-case
+ * @see https://github.com/unocss/unocss/issues/3663#issuecomment-2024909371
+ */
+
+interface FontSizeDetail {
+    lineHeight?: string;
+    letterSpacing?: string;
+    fontWeight?: number;
+}
+type FontValue = `${number}px` | `${number}rem`;
+type FontAndLineHeight = [FontValue, FontValue];
+type DetailFont = [
+    FontValue,
+    FontSizeDetail
+];
+type UnocssDetailFont = [FontValue, CamelToKebabKeys<FontSizeDetail>];
+type FontSize = FontAndLineHeight | FontValue | DetailFont;
+type UnocssFontSize = FontValue | FontAndLineHeight | UnocssDetailFont;
+type SizeKeys = `${number}xs` | 'xs' | 'sm' | 'base' | 'lg' | 'xl' | `${number}xl`;
+type HeadingKeys = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+type DisplayKeys = 'display1' | 'display2' | 'display3' | 'display4';
+type FontSizeKeys = SizeKeys | HeadingKeys | DisplayKeys;
+type FontSizes = {
+    [K in FontSizeKeys]?: FontSize;
+};
+type UnocssFontSizes = {
+    [K in FontSizeKeys]?: UnocssFontSize;
+};
+
 declare const colors: {
     inherit: "inherit";
     current: "currentColor";
@@ -12,7 +58,6 @@ declare const colors: {
     special: string;
     black: string;
     white: string;
-    overlay: string;
     primary: {
         50: string;
         100: string;
@@ -109,8 +154,269 @@ declare const colors: {
         800: string;
         900: string;
     };
+    red: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    amber: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+};
+
+declare const fontSizes: {
+    '2xs': ["0.6875rem", "1rem"];
+    xs: ["0.75rem", "1rem"];
+    sm: ["0.875rem", "1.25rem"];
+    base: ["1rem", "1.5rem"];
+    lg: ["1.25rem", "1.625rem"];
+    display1: ["3.75rem", {
+        fontWeight: number;
+        lineHeight: string;
+        letterSpacing: string;
+    }];
+    display2: ["3.25rem", {
+        fontWeight: number;
+        lineHeight: string;
+        letterSpacing: string;
+    }];
+    display3: ["2.75rem", {
+        fontWeight: number;
+        lineHeight: string;
+        letterSpacing: string;
+    }];
+    h1: ["3rem", {
+        fontWeight: number;
+        lineHeight: string;
+        letterSpacing: string;
+    }];
+    h2: ["2.5rem", {
+        fontWeight: number;
+        lineHeight: string;
+        letterSpacing: string;
+    }];
+    h3: ["2.25rem", {
+        fontWeight: number;
+        lineHeight: string;
+        letterSpacing: string;
+    }];
+    h4: ["2rem", {
+        fontWeight: number;
+        lineHeight: string;
+        letterSpacing: string;
+    }];
+    h5: ["1.5rem", {
+        fontWeight: number;
+        lineHeight: string;
+        letterSpacing: string;
+    }];
+    h6: ["1.25rem", {
+        fontWeight: number;
+        lineHeight: string;
+        letterSpacing: string;
+    }];
+};
+
+declare const shadows: {
+    'elevation-0': "0 0 0 0 rgba(0, 0, 0, 0.10)";
+    'elevation-1': "0 1px 2px 0 rgba(0, 0, 0, 0.10)";
+    'elevation-2': "0 4px 8px 0 rgba(0, 0, 0, 0.10)";
+    'elevation-3': "0 6px 12px 0 rgba(0, 0, 0, 0.10)";
+    'elevation-4': "0 8px 16px 0 rgba(0, 0, 0, 0.10)";
+    'elevation-5': "0 12px 24px 0 rgba(0, 0, 0, 0.10)";
+};
+
+declare const theme: Config['theme'];
+declare const unocssTheme: {
+    colors: {
+        inherit: "inherit";
+        current: "currentColor";
+        transparent: "transparent";
+        danger: string;
+        warning: string;
+        success: string;
+        info: string;
+        special: string;
+        black: string;
+        white: string;
+        primary: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        secondary: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        green: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        fuchsia: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        indigo: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        neutral: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        orange: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        seafoam: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        red: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        amber: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+    };
+    boxShadow: {
+        'elevation-0': "0 0 0 0 rgba(0, 0, 0, 0.10)";
+        'elevation-1': "0 1px 2px 0 rgba(0, 0, 0, 0.10)";
+        'elevation-2': "0 4px 8px 0 rgba(0, 0, 0, 0.10)";
+        'elevation-3': "0 6px 12px 0 rgba(0, 0, 0, 0.10)";
+        'elevation-4': "0 8px 16px 0 rgba(0, 0, 0, 0.10)";
+        'elevation-5': "0 12px 24px 0 rgba(0, 0, 0, 0.10)";
+    };
+    fontSize: UnocssFontSizes;
 };
+
+type ColorsNames = 'primary' | 'secondary' | 'green' | 'fuchsia' | 'indigo' | 'neutral' | 'orange' | 'red' | 'amber' | 'seafoam';
+type ColorsVariations = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
+interface MainColors {
+    black: string;
+    white: string;
+    inherit: 'inherit';
+    current: 'currentColor';
+    transparent: 'transparent';
+}
+interface DefaultColors {
+    danger: string;
+    warning: string;
+    success: string;
+    info: string;
+    special: string;
+}
+type Colors = DefaultColors & MainColors & Record<ColorsNames, {
+    [K in ColorsVariations]: string;
+}>;
+type ColorString = `${ColorsNames}-${ColorsVariations}` | keyof DefaultColors | keyof MainColors;
+
+type BorderSize = 0 | `${number}px`;
+type RgbValue = number;
+type Shadow = `${BorderSize} ${BorderSize} ${BorderSize} ${BorderSize} rgba(${RgbValue}, ${RgbValue}, ${RgbValue}, ${RgbValue})`;
+type ShadowSize = 0 | 1 | 2 | 3 | 4 | 5;
+type Shadows = {
+    [K in ShadowSize as `elevation-${K}`]?: Shadow;
+};
+
 declare function config(extend?: boolean): Partial<Config>;
 declare const _default: Partial<tailwindcss_types_config.Config>;
 
-export { colors, config, _default as default };
+export { type ColorString, type Colors, type FontSizes, type Shadows, colors, config, _default as default, fontSizes, shadows, theme, unocssTheme };

package/dist/index.d.ts

@@ -1,6 +1,52 @@
 import * as tailwindcss_types_config from 'tailwindcss/types/config';
 import { Config } from 'tailwindcss';
 
+/**
+ * Converts the given string from camel-case to kebab-case.
+ * @template T The string to convert the case.
+ * @see https://gist.github.com/albertms10/09f14ef7ebdc3ce0e95683c728616253
+ * @example
+ * type Kebab = CamelToKebab<'exampleVarName'>;
+ * // 'example-var-name'
+ */
+type CamelToKebab<S extends string> = S extends `${infer T}${infer U}` ? U extends Uncapitalize<U> ? `${Uncapitalize<T>}${CamelToKebab<U>}` : `${Uncapitalize<T>}-${CamelToKebab<U>}` : '';
+type CamelToKebabKeys<T> = {
+    [K in keyof T as K extends string ? CamelToKebab<K> : K]: T[K];
+};
+
+/**
+ * tailwindcss font-size configuration
+ * @see https://tailwindcss.com/docs/font-size
+ *
+ * @note For unocss, the keys are kebab-case
+ * @see https://github.com/unocss/unocss/issues/3663#issuecomment-2024909371
+ */
+
+interface FontSizeDetail {
+    lineHeight?: string;
+    letterSpacing?: string;
+    fontWeight?: number;
+}
+type FontValue = `${number}px` | `${number}rem`;
+type FontAndLineHeight = [FontValue, FontValue];
+type DetailFont = [
+    FontValue,
+    FontSizeDetail
+];
+type UnocssDetailFont = [FontValue, CamelToKebabKeys<FontSizeDetail>];
+type FontSize = FontAndLineHeight | FontValue | DetailFont;
+type UnocssFontSize = FontValue | FontAndLineHeight | UnocssDetailFont;
+type SizeKeys = `${number}xs` | 'xs' | 'sm' | 'base' | 'lg' | 'xl' | `${number}xl`;
+type HeadingKeys = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+type DisplayKeys = 'display1' | 'display2' | 'display3' | 'display4';
+type FontSizeKeys = SizeKeys | HeadingKeys | DisplayKeys;
+type FontSizes = {
+    [K in FontSizeKeys]?: FontSize;
+};
+type UnocssFontSizes = {
+    [K in FontSizeKeys]?: UnocssFontSize;
+};
+
 declare const colors: {
     inherit: "inherit";
     current: "currentColor";
@@ -12,7 +58,6 @@ declare const colors: {
     special: string;
     black: string;
     white: string;
-    overlay: string;
     primary: {
         50: string;
         100: string;
@@ -109,8 +154,269 @@ declare const colors: {
         800: string;
         900: string;
     };
+    red: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    amber: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+};
+
+declare const fontSizes: {
+    '2xs': ["0.6875rem", "1rem"];
+    xs: ["0.75rem", "1rem"];
+    sm: ["0.875rem", "1.25rem"];
+    base: ["1rem", "1.5rem"];
+    lg: ["1.25rem", "1.625rem"];
+    display1: ["3.75rem", {
+        fontWeight: number;
+        lineHeight: string;
+        letterSpacing: string;
+    }];
+    display2: ["3.25rem", {
+        fontWeight: number;
+        lineHeight: string;
+        letterSpacing: string;
+    }];
+    display3: ["2.75rem", {
+        fontWeight: number;
+        lineHeight: string;
+        letterSpacing: string;
+    }];
+    h1: ["3rem", {
+        fontWeight: number;
+        lineHeight: string;
+        letterSpacing: string;
+    }];
+    h2: ["2.5rem", {
+        fontWeight: number;
+        lineHeight: string;
+        letterSpacing: string;
+    }];
+    h3: ["2.25rem", {
+        fontWeight: number;
+        lineHeight: string;
+        letterSpacing: string;
+    }];
+    h4: ["2rem", {
+        fontWeight: number;
+        lineHeight: string;
+        letterSpacing: string;
+    }];
+    h5: ["1.5rem", {
+        fontWeight: number;
+        lineHeight: string;
+        letterSpacing: string;
+    }];
+    h6: ["1.25rem", {
+        fontWeight: number;
+        lineHeight: string;
+        letterSpacing: string;
+    }];
+};
+
+declare const shadows: {
+    'elevation-0': "0 0 0 0 rgba(0, 0, 0, 0.10)";
+    'elevation-1': "0 1px 2px 0 rgba(0, 0, 0, 0.10)";
+    'elevation-2': "0 4px 8px 0 rgba(0, 0, 0, 0.10)";
+    'elevation-3': "0 6px 12px 0 rgba(0, 0, 0, 0.10)";
+    'elevation-4': "0 8px 16px 0 rgba(0, 0, 0, 0.10)";
+    'elevation-5': "0 12px 24px 0 rgba(0, 0, 0, 0.10)";
+};
+
+declare const theme: Config['theme'];
+declare const unocssTheme: {
+    colors: {
+        inherit: "inherit";
+        current: "currentColor";
+        transparent: "transparent";
+        danger: string;
+        warning: string;
+        success: string;
+        info: string;
+        special: string;
+        black: string;
+        white: string;
+        primary: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        secondary: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        green: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        fuchsia: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        indigo: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        neutral: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        orange: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        seafoam: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        red: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        amber: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+    };
+    boxShadow: {
+        'elevation-0': "0 0 0 0 rgba(0, 0, 0, 0.10)";
+        'elevation-1': "0 1px 2px 0 rgba(0, 0, 0, 0.10)";
+        'elevation-2': "0 4px 8px 0 rgba(0, 0, 0, 0.10)";
+        'elevation-3': "0 6px 12px 0 rgba(0, 0, 0, 0.10)";
+        'elevation-4': "0 8px 16px 0 rgba(0, 0, 0, 0.10)";
+        'elevation-5': "0 12px 24px 0 rgba(0, 0, 0, 0.10)";
+    };
+    fontSize: UnocssFontSizes;
 };
+
+type ColorsNames = 'primary' | 'secondary' | 'green' | 'fuchsia' | 'indigo' | 'neutral' | 'orange' | 'red' | 'amber' | 'seafoam';
+type ColorsVariations = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
+interface MainColors {
+    black: string;
+    white: string;
+    inherit: 'inherit';
+    current: 'currentColor';
+    transparent: 'transparent';
+}
+interface DefaultColors {
+    danger: string;
+    warning: string;
+    success: string;
+    info: string;
+    special: string;
+}
+type Colors = DefaultColors & MainColors & Record<ColorsNames, {
+    [K in ColorsVariations]: string;
+}>;
+type ColorString = `${ColorsNames}-${ColorsVariations}` | keyof DefaultColors | keyof MainColors;
+
+type BorderSize = 0 | `${number}px`;
+type RgbValue = number;
+type Shadow = `${BorderSize} ${BorderSize} ${BorderSize} ${BorderSize} rgba(${RgbValue}, ${RgbValue}, ${RgbValue}, ${RgbValue})`;
+type ShadowSize = 0 | 1 | 2 | 3 | 4 | 5;
+type Shadows = {
+    [K in ShadowSize as `elevation-${K}`]?: Shadow;
+};
+
 declare function config(extend?: boolean): Partial<Config>;
 declare const _default: Partial<tailwindcss_types_config.Config>;
 
-export { colors, config, _default as default };
+export { type ColorString, type Colors, type FontSizes, type Shadows, colors, config, _default as default, fontSizes, shadows, theme, unocssTheme };

package/dist/index.js

@@ -1,10 +1,130 @@
 import {
+  colors
+} from "./chunk-5LOSNWQT.js";
+
+// src/util/font.ts
+import { kebabKeys } from "string-ts";
+
+// src/types/fontSize.ts
+function isDetailFont(value) {
+  return Array.isArray(value) && typeof value[1] === "object";
+}
+
+// src/util/font.ts
+var entries = Object.entries;
+function fontConfigKeysKebabCase(fontConfig) {
+  const result = {};
+  for (const [key, value] of entries(fontConfig)) {
+    if (value) {
+      if (isDetailFont(value)) {
+        const [size, detail] = value;
+        const kebabDetail = kebabKeys(detail);
+        result[key] = [size, kebabDetail];
+      } else {
+        result[key] = value;
+      }
+    }
+  }
+  return result;
+}
+
+// src/theme/fontSize.ts
+var fontSizes = {
+  "2xs": ["0.6875rem", "1rem"],
+  "xs": ["0.75rem", "1rem"],
+  "sm": ["0.875rem", "1.25rem"],
+  "base": ["1rem", "1.5rem"],
+  "lg": ["1.25rem", "1.625rem"],
+  "display1": ["3.75rem", {
+    fontWeight: 700,
+    lineHeight: "5rem",
+    letterSpacing: "-0.0625rem"
+  }],
+  "display2": ["3.25rem", {
+    fontWeight: 700,
+    lineHeight: "4.25rem",
+    letterSpacing: "-0.05rem"
+  }],
+  "display3": ["2.75rem", {
+    fontWeight: 700,
+    lineHeight: "3.625rem",
+    letterSpacing: "-0.0375rem"
+  }],
+  "h1": ["3rem", {
+    fontWeight: 700,
+    lineHeight: "3.75rem",
+    letterSpacing: "-0.0125rem"
+  }],
+  "h2": ["2.5rem", {
+    fontWeight: 700,
+    lineHeight: "3.25rem",
+    letterSpacing: "-0.0125rem"
+  }],
+  "h3": ["2.25rem", {
+    fontWeight: 700,
+    lineHeight: "3rem",
+    letterSpacing: "-0.0125rem"
+  }],
+  "h4": ["2rem", {
+    fontWeight: 700,
+    lineHeight: "2.625rem",
+    letterSpacing: "-0.0125rem"
+  }],
+  "h5": ["1.5rem", {
+    fontWeight: 700,
+    lineHeight: "2rem",
+    letterSpacing: "-0.0125rem"
+  }],
+  "h6": ["1.25rem", {
+    fontWeight: 700,
+    lineHeight: "1.625rem",
+    letterSpacing: "-0.0125rem"
+  }]
+};
+var unocssFontSizes = fontConfigKeysKebabCase(fontSizes);
+
+// src/theme/shadows.ts
+var shadows = {
+  "elevation-0": "0 0 0 0 rgba(0, 0, 0, 0.10)",
+  "elevation-1": "0 1px 2px 0 rgba(0, 0, 0, 0.10)",
+  "elevation-2": "0 4px 8px 0 rgba(0, 0, 0, 0.10)",
+  "elevation-3": "0 6px 12px 0 rgba(0, 0, 0, 0.10)",
+  "elevation-4": "0 8px 16px 0 rgba(0, 0, 0, 0.10)",
+  "elevation-5": "0 12px 24px 0 rgba(0, 0, 0, 0.10)"
+};
+
+// src/theme/index.ts
+var theme = {
   colors,
-  config,
-  src_default
-} from "./chunk-W4S5IMYJ.js";
+  boxShadow: shadows,
+  fontSize: fontSizes
+};
+var unocssTheme = {
+  colors,
+  boxShadow: shadows,
+  fontSize: unocssFontSizes
+};
+
+// src/index.ts
+function config(extend = false) {
+  if (extend) {
+    return {
+      theme: {
+        extend: theme
+      }
+    };
+  }
+  return {
+    theme
+  };
+}
+var src_default = config();
 export {
   colors,
   config,
-  src_default as default
+  src_default as default,
+  fontSizes,
+  shadows,
+  theme,
+  unocssTheme
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@removify/tailwind-preset",
   "type": "module",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "description": "Tailwind CSS preset for Removify",
   "keywords": [
     "tailwind"
@@ -26,25 +26,27 @@
     "tailwindcss": "^3.0.0"
   },
   "dependencies": {
+    "string-ts": "^2.1.0",
     "yargs": "17.7.2"
   },
   "devDependencies": {
-    "@commitlint/cli": "^18.6.0",
-    "@commitlint/config-conventional": "^18.6.0",
-    "@types/node": "^20.11.10",
+    "@commitlint/cli": "^19.2.1",
+    "@commitlint/config-conventional": "^19.1.0",
+    "@types/node": "^20.12.2",
     "@types/yargs": "^17.0.32",
-    "bumpp": "^9.3.0",
-    "eslint": "^8.56.0",
-    "eslint-config-removify": "^1.2.11",
-    "husky": "^8.0.3",
-    "lint-staged": "^15.2.0",
-    "tailwind-config-viewer": "^1.7.3",
-    "tailwindcss": "^3.4.1",
-    "tsup": "^8.0.1",
-    "tsx": "^4.7.0",
-    "typescript": "^5.3.3",
-    "vitest": "^1.2.2",
-    "@removify/tailwind-preset": "0.0.6"
+    "bumpp": "^9.4.0",
+    "eslint": "^8.57.0",
+    "eslint-config-removify": "^1.2.14",
+    "husky": "^9.0.11",
+    "lint-staged": "^15.2.2",
+    "rimraf": "^5.0.5",
+    "tailwind-config-viewer": "^2.0.1",
+    "tailwindcss": "^3.4.3",
+    "tsup": "^8.0.2",
+    "tsx": "^4.7.1",
+    "typescript": "^5.4.3",
+    "vitest": "^1.4.0",
+    "@removify/tailwind-preset": "0.0.8"
   },
   "lint-staged": {
     "**/*.{js,ts,vue,html}": [
@@ -53,15 +55,15 @@
   },
   "scripts": {
     "start": "tsx ./src/index.ts",
-    "build": "tsup src/index.ts src/cli.ts --format esm,cjs --clean --dts",
+    "build": "rimraf dist && tsup src/index.ts src/cli.ts --format esm,cjs --clean --dts",
     "watch": "tsup --format esm,cjs --watch",
     "dev": "tsx watch ./src/index.ts",
     "test": "vitest",
     "lint": "eslint .",
     "lint:fix": "eslint --fix .",
-    "husky:install": "husky install",
+    "husky:install": "husky",
     "release": "bumpp && pnpm publish --access=public",
-    "tailwind-config-viewer": "tailwind-config-viewer -o -c tailwind.config.cjs",
-    "tailwind-config-viewer:build": "tailwind-config-viewer export tailwind-dist -c tailwind.config.cjs"
+    "tailwind-config-viewer": "tailwind-config-viewer -o -c tailwind.config.js",
+    "tailwind-config-viewer:build": "tailwind-config-viewer export tailwind-dist -c tailwind.config.js"
   }
 }

package/readme.md

@@ -5,11 +5,11 @@ This is tailwind preset for removify.
 ## Usage
 
 ```bash
-npm install -D removify-tailwind-preset
+npm install -D @removify/tailwind-preset
 
-yarn add -D removify-tailwind-preset
+yarn add -D @removify/tailwind-preset
 
-pnpm add -D removify-tailwind-preset
+pnpm add -D @removify/tailwind-preset
 ```
 
 ### Use cli to generate tailwind v4 theme
@@ -22,7 +22,7 @@ npx @removify/tailwind-preset > src/style.css
 
 ```ts
 // tailwind.config.{t,j}s
-import removify from 'removify-tailwind-preset';
+import removify from '@removify/tailwind-preset';
 import type { Config } from 'tailwindcss';
 
 export default {