cli-hue-forge

v1.0.1

Published

a year ago

Generate OKLCH color shade ladders from CSS custom properties.

0High
0Medium
0Low

davig117

cli css color oklch theme generator shades

🎨 generate-shades-from-css

npm license issues node

Generate OKLCH color shade ladders from CSS custom properties for modern theming. 🌈

Designed for Tailwind CSS v4: This CLI generates an @theme { ... } block, which is the new convention for theming in Tailwind CSS v4. However, you can use the generated CSS variables in any CSS workflow, framework, or vanilla CSS as you like.

✨ Features

🔍 Parses CSS files for variables starting with --generate-color-...
🧩 Outputs a @theme block with OKLCH lightness steps for each color
🖥️ CLI tool with modern argument parsing and help
🎚️ Supports output as hex or OKLCH (oklch(...)) via a flag
🌗 Generates paired light-dark() variables for easy theming

📦 Installation

Using npm (recommended) 🚀

npm install -g cli-hue-forge

Using pnpm 🛠️

pnpm add -g cli-hue-forge

Local usage 🏗️

Clone or download this repo, then run:

pnpm install

⚡ Usage

Run without install (npx / pnpm dlx) 🚀

You can use the CLI without installing globally:

npx cli-hue-forge -i theme.css
# or
pnpm dlx cli-hue-forge -i theme.css

CLI 🖥️

hueforge --input <yourfile.css>

Or with the short flag:

hueforge -i <yourfile.css>

Options 📝

📂 -i, --input <file>: Path to the input CSS file (required)
🧪 -o, --oklch: Output colors as oklch(...) instead of hex
📄 -f, --file <output>: Output file (e.g. gen.css). If not set, prints to stdout.
❓ -h, --help: Show help message

Example 🧑‍💻

Suppose your CSS contains:

:root {
  --generate-color-primary: #e6b97a;
  --generate-color-accent: rgb(120, 200, 255);
}

Hex output (default) 🟪

hueforge -i theme.css

Output:

@theme {
  --color-primary-98: #fff6e9;
  --color-primary-95: #ffe9c7;
  ...
  --color-primary-98-10: light-dark(var(--color-primary-98), var(--color-primary-10));
  ...
}

Light/Dark Theme Setup 🌗

To enable the light-dark() functionality and apply your generated theme variables based on user preference, add the following snippet to your main CSS file. This toggles the data-theme attribute on <html> and sets the color-scheme property so built-in UI elements adapt correctly:

@layer base {
  html[data-theme="light"] {
    color-scheme: light;
  }
  html[data-theme="dark"] {
    color-scheme: dark;
  }
}

Output to file 💾

hueforge -i theme.css -f gen.css

This writes the generated CSS to gen.css.

After generating gen.css, you can import it into your project's CSS file(s) using:

@import "./gen.css";

This works with Tailwind CSS v4 and standard CSS workflows. 🐦

OKLCH output 🌈

hueforge -i theme.css --oklch

Output:

@theme {
  --color-primary-98: oklch(98.00% 0.0957 75.09);
  --color-primary-95: oklch(95.00% 0.0957 75.09);
  ...
  --color-primary-98-10: light-dark(var(--color-primary-98), var(--color-primary-10));
  ...
}

You can combine both flags: 🧃

hueforge -i theme.css --oklch -f gen.css

This writes OKLCH output to gen.css.

🤝 Contributing

Pull requests and issues are welcome! Please open an issue for bugs or feature requests. 🛠️

📄 License

MIT

💬 Support

For help or questions, open an issue at: 🆘 https://github.com/maxiviper117/cli-hue-forge/issues