@removify/tailwind-preset 0.0.6 → 0.0.7

package/dist/{chunk-W4S5IMYJ.js → chunk-UJDFJG2Z.js}

@@ -1,4 +1,4 @@
-// src/index.ts
+// src/theme/colors.ts
 var colors = {
   inherit: "inherit",
   current: "currentColor",
@@ -108,26 +108,7 @@ var colors = {
     900: "#113C3E"
   }
 };
-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",
@@ -137,23 +137,6 @@ var colors = {
     900: "#113C3E"
   }
 };
-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-UJDFJG2Z.js";
 
 // src/cli.ts
 import { hideBin } from "yargs/helpers";

package/dist/index.cjs

@@ -22,9 +22,13 @@ var src_exports = {};
 __export(src_exports, {
   colors: () => colors,
   config: () => config,
-  default: () => src_default
+  default: () => src_default,
+  fontSizes: () => fontSizes,
+  shadows: () => shadows
 });
 module.exports = __toCommonJS(src_exports);
+
+// src/theme/colors.ts
 var colors = {
   inherit: "inherit",
   current: "currentColor",
@@ -134,25 +138,94 @@ var colors = {
     900: "#113C3E"
   }
 };
+
+// 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/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"
+  }]
+};
+
+// src/index.ts
+var theme = {
+  colors,
+  boxShadow: shadows,
+  fontSize: fontSizes
+};
 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
 });

package/dist/index.d.cts

@@ -110,7 +110,117 @@ declare const colors: {
         900: 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 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: "5rem";
+        letterSpacing: "-0.0625rem";
+    }];
+    display2: ["3.25rem", {
+        fontWeight: number;
+        lineHeight: "4.25rem";
+        letterSpacing: "-0.05rem";
+    }];
+    display3: ["2.75rem", {
+        fontWeight: number;
+        lineHeight: "3.625rem";
+        letterSpacing: "-0.0375rem";
+    }];
+    h1: ["3rem", {
+        fontWeight: number;
+        lineHeight: "3.75rem";
+        letterSpacing: "-0.0125rem";
+    }];
+    h2: ["2.5rem", {
+        fontWeight: number;
+        lineHeight: "3.25rem";
+        letterSpacing: "-0.0125rem";
+    }];
+    h3: ["2.25rem", {
+        fontWeight: number;
+        lineHeight: "3rem";
+        letterSpacing: "-0.0125rem";
+    }];
+    h4: ["2rem", {
+        fontWeight: number;
+        lineHeight: "2.625rem";
+        letterSpacing: "-0.0125rem";
+    }];
+    h5: ["1.5rem", {
+        fontWeight: number;
+        lineHeight: "2rem";
+        letterSpacing: "-0.0125rem";
+    }];
+    h6: ["1.25rem", {
+        fontWeight: number;
+        lineHeight: "1.625rem";
+        letterSpacing: "-0.0125rem";
+    }];
+};
+
+type ColorsNames = 'primary' | 'secondary' | 'green' | 'fuchsia' | 'indigo' | 'neutral' | 'orange' | '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;
+    overlay: 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;
+};
+
+type FontValue = `${number}px` | `${number}rem`;
+type FontSize = [FontValue, FontValue] | FontValue | [
+    FontValue,
+    {
+        lineHeight?: FontValue;
+        letterSpacing?: FontValue;
+        fontWeight?: number;
+    }
+];
+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;
+};
+
 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 };

package/dist/index.d.ts

@@ -110,7 +110,117 @@ declare const colors: {
         900: 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 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: "5rem";
+        letterSpacing: "-0.0625rem";
+    }];
+    display2: ["3.25rem", {
+        fontWeight: number;
+        lineHeight: "4.25rem";
+        letterSpacing: "-0.05rem";
+    }];
+    display3: ["2.75rem", {
+        fontWeight: number;
+        lineHeight: "3.625rem";
+        letterSpacing: "-0.0375rem";
+    }];
+    h1: ["3rem", {
+        fontWeight: number;
+        lineHeight: "3.75rem";
+        letterSpacing: "-0.0125rem";
+    }];
+    h2: ["2.5rem", {
+        fontWeight: number;
+        lineHeight: "3.25rem";
+        letterSpacing: "-0.0125rem";
+    }];
+    h3: ["2.25rem", {
+        fontWeight: number;
+        lineHeight: "3rem";
+        letterSpacing: "-0.0125rem";
+    }];
+    h4: ["2rem", {
+        fontWeight: number;
+        lineHeight: "2.625rem";
+        letterSpacing: "-0.0125rem";
+    }];
+    h5: ["1.5rem", {
+        fontWeight: number;
+        lineHeight: "2rem";
+        letterSpacing: "-0.0125rem";
+    }];
+    h6: ["1.25rem", {
+        fontWeight: number;
+        lineHeight: "1.625rem";
+        letterSpacing: "-0.0125rem";
+    }];
+};
+
+type ColorsNames = 'primary' | 'secondary' | 'green' | 'fuchsia' | 'indigo' | 'neutral' | 'orange' | '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;
+    overlay: 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;
+};
+
+type FontValue = `${number}px` | `${number}rem`;
+type FontSize = [FontValue, FontValue] | FontValue | [
+    FontValue,
+    {
+        lineHeight?: FontValue;
+        letterSpacing?: FontValue;
+        fontWeight?: number;
+    }
+];
+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;
+};
+
 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 };

package/dist/index.js

@@ -1,10 +1,94 @@
 import {
+  colors
+} from "./chunk-UJDFJG2Z.js";
+
+// 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/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"
+  }]
+};
+
+// src/index.ts
+var theme = {
   colors,
-  config,
-  src_default
-} from "./chunk-W4S5IMYJ.js";
+  boxShadow: shadows,
+  fontSize: fontSizes
+};
+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
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@removify/tailwind-preset",
   "type": "module",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "Tailwind CSS preset for Removify",
   "keywords": [
     "tailwind"
@@ -38,13 +38,14 @@
     "eslint-config-removify": "^1.2.11",
     "husky": "^8.0.3",
     "lint-staged": "^15.2.0",
+    "rimraf": "^5.0.5",
     "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"
+    "@removify/tailwind-preset": "0.0.7"
   },
   "lint-staged": {
     "**/*.{js,ts,vue,html}": [
@@ -53,7 +54,7 @@
   },
   "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",

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 {