feat: add hero ui theme builder

theme-builder/.gitignore

@@ -0,0 +1 @@
+/node_modules

theme-builder/dark-gen.js

@@ -0,0 +1,22 @@
+const keyChecker = {
+  50: 950,
+  100: 900,
+  200: 800,
+  300: 700,
+  400: 600,
+  500: 500,
+  600: 400,
+  700: 300,
+  800: 200,
+  900: 100,
+  950: 50,
+};
+function darkGenerator(light) {
+  let dark = {};
+  Object.entries(light).forEach(([key, value]) => {
+    dark[keyChecker[key]] = value;
+  });
+  return dark;
+}
+
+module.exports = darkGenerator;

theme-builder/formatter-and-generator.js

@@ -0,0 +1,72 @@
+const shadesOf = require("./shades-gen");
+const darkGenerator = require("./dark-gen");
+
+function formatterAndGenerator({
+  defaultColor,
+  primaryColor,
+  secondaryColor,
+  successColor,
+  warningColor,
+  dangerColor,
+}) {
+  const lightColors = {
+    default: {
+      DEFAULT: defaultColor,
+      ...shadesOf(defaultColor),
+    },
+    primary: {
+      DEFAULT: primaryColor,
+      ...shadesOf(primaryColor),
+    },
+    secondary: {
+      DEFAULT: secondaryColor,
+      ...shadesOf(secondaryColor),
+    },
+    success: {
+      DEFAULT: successColor,
+      ...shadesOf(successColor),
+    },
+    warning: {
+      DEFAULT: warningColor,
+      ...shadesOf(warningColor),
+    },
+    danger: {
+      DEFAULT: dangerColor,
+      ...shadesOf(dangerColor),
+    },
+  };
+
+  const darkColors = {
+    default: {
+      DEFAULT: defaultColor,
+      ...darkGenerator(shadesOf(defaultColor)),
+    },
+    primary: {
+      DEFAULT: primaryColor,
+      ...darkGenerator(shadesOf(primaryColor)),
+    },
+    secondary: {
+      DEFAULT: secondaryColor,
+      ...darkGenerator(shadesOf(secondaryColor)),
+    },
+    success: {
+      DEFAULT: successColor,
+      ...darkGenerator(shadesOf(successColor)),
+    },
+    warning: {
+      DEFAULT: warningColor,
+      ...darkGenerator(shadesOf(warningColor)),
+    },
+    danger: {
+      DEFAULT: dangerColor,
+      ...darkGenerator(shadesOf(dangerColor)),
+    },
+  };
+
+  return {
+    light: lightColors,
+    dark: darkColors,
+  };
+}
+
+module.exports = formatterAndGenerator;

theme-builder/index.js

@@ -0,0 +1,60 @@
+const fs = require("fs");
+const prompt = require("prompt-sync")();
+const formatterAndGenerator = require("./formatter-and-generator");
+
+async function main() {
+  let themeNameInput = prompt("Enter theme name: ");
+  while (!themeNameInput) {
+    themeNameInput = prompt("Enter theme name: ");
+  }
+
+  let defaultColorInput = prompt("Enter default colors: ");
+  while (!defaultColorInput) {
+    defaultColorInput = prompt("Enter default colors: ");
+  }
+
+  let primaryColorInput = prompt("Enter primary HEX: ");
+  while (!primaryColorInput) {
+    primaryColorInput = prompt("Enter primary HEX: ");
+  }
+
+  let secondaryColorInput = prompt("Enter secondary HEX: ");
+  while (!secondaryColorInput) {
+    secondaryColorInput = prompt("Enter secondary HEX: ");
+  }
+
+  let successColorInput = prompt("Enter success HEX: ");
+  while (!successColorInput) {
+    successColorInput = prompt("Enter success HEX: ");
+  }
+
+  let warningColorInput = prompt("Enter warning HEX: ");
+  while (!warningColorInput) {
+    warningColorInput = prompt("Enter warning HEX: ");
+  }
+
+  let dangerColorInput = prompt("Enter danger HEX: ");
+  while (!dangerColorInput) {
+    dangerColorInput = prompt("Enter danger HEX: ");
+  }
+
+  const result = await formatterAndGenerator({
+    defaultColor: defaultColorInput,
+    primaryColor: primaryColorInput,
+    secondaryColor: secondaryColorInput,
+    successColor: successColorInput,
+    warningColor: warningColorInput,
+    dangerColor: dangerColorInput,
+  });
+
+  fs.writeFileSync(
+    `${themeNameInput}-light.json`,
+    JSON.stringify({ light: result.light })
+  );
+  fs.writeFileSync(
+    `${themeNameInput}-dark.json`,
+    JSON.stringify({ dark: result.dark })
+  );
+}
+
+main();

theme-builder/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "hero-theme-builder",
+  "version": "1.0.0",
+  "description": "CLI to generate HeroUI-compatible themes for Tailwind CSS. Light/dark JSON from color inputs. By alimor.ir",
+  "main": "index.js",
+  "scripts": {
+    "start": "node index.js",
+    "dev": "nodemon index.js"
+  },
+  "author": {
+    "name": "Ali Mortazavi",
+    "email": "[email protected]",
+    "url": "https://github.com/alimortazavi-pr"
+  },
+  "keywords": [
+    "heroui",
+    "tailwind",
+    "theme-generator",
+    "cli",
+    "node.js",
+    "react",
+    "next.js",
+    "colors"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "prompt-sync": "^4.2.0"
+  },
+  "devDependencies": {
+    "nodemon": "^3.0.1"
+  },
+  "engines": {
+    "node": ">=14.0.0"
+  }
+}

theme-builder/readme.md

@@ -0,0 +1,18 @@
+Installation
+
+Clone your repo: git clone https://github.com/alimortazavi-pr/nextui-theme-builder.git
+cd into folder.
+npm install (adds prompt-sync for inputs; I skipped nodemon for now—dev it raw).
+
+Usage
+Run npm start. Prompts:
+
+Theme name: e.g., "myheroapp"
+Default colors: e.g., "white black" (light bg/text, dark bg/text)
+Primary HEX: e.g., "#3b82f6" (blue)
+Secondary HEX: e.g., "#6b7280"
+Success HEX: e.g., "#10b981"
+Warning HEX: e.g., "#f59e0b"
+Danger HEX: e.g., "#ef4444"
+
+Outputs: myheroapp-light.json and myheroapp-dark.json. Each has the theme object. Import to tailwind.config.js:

theme-builder/shades-gen.js

@@ -0,0 +1,71 @@
+function shadesOf(hex) {
+  const baseColor = hexToRgbArray(hex);
+  const black = [0, 0, 0];
+  const white = [255, 255, 255];
+
+  let shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+
+  let result = {};
+
+  for (let shade of shades) {
+    const originalShade = shade;
+
+    if (shade === 500) {
+      result[shade] = hex;
+      continue;
+    }
+
+    let isDarkShade = shade > 500;
+    if (isDarkShade) shade -= 500;
+
+    const percentage = shade / 500;
+    const startColor = isDarkShade ? black : baseColor;
+    const endColor = isDarkShade ? baseColor : white;
+
+    result[originalShade] = getColor(percentage, startColor, endColor);
+  }
+
+  return result;
+}
+
+function hexToRgbArray(hex) {
+  const originalHex = hex;
+
+  hex = hex.replace("#", "");
+  if (hex.length === 3) hex = hex + hex;
+
+  const r = hex.substring(0, 2);
+  const g = hex.substring(2, 4);
+  const b = hex.substring(4, 6);
+
+  const rgb = [r, g, b].map((channel) => {
+    try {
+      channel = parseInt(channel, 16);
+      if (channel < 0 || channel > 255) throw new Error();
+      return channel;
+    } catch {
+      throw new Error(`Invalid hex color provided: ${originalHex}`);
+    }
+  });
+
+  return rgb;
+}
+
+function getColor(percentage, start, end) {
+  const rgb = end.map((channel, index) => {
+    return Math.round(channel + percentage * (start[index] - channel));
+  });
+
+  const hex =
+    "#" +
+    rgb
+      .map((channel) => {
+        const component = channel.toString(16);
+        if (component.length === 1) return "0" + component;
+        return component;
+      })
+      .join("");
+  return hex;
+}
+
+module.exports = shadesOf;