🚀 Socket Launch Week Day 5:Introducing Repository Access Permissions and Custom Roles.Learn more →
Sign In

cli-hue-forge

Package Overview
Dependencies
Maintainers
1
Versions
2
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

cli-hue-forge

Generate OKLCH color shade ladders from CSS custom properties.

latest
Source
npmnpm
Version
1.0.1
Version published
Weekly downloads
5
-28.57%
Maintainers
1
Weekly downloads
 
Created
Source

🎨 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

Keywords

cli
css
color
oklch
theme
generator

FAQs

Package last updated on 23 Jul 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

Introducing Repository Access Permissions and Custom Roles

Product

Introducing Repository Access Permissions and Custom Roles

Socket now supports Custom Roles and Repository Access Permissions so organizations can control who can access specific repositories and actions.

By Joe Werle  -  Jun 19, 2026