diff --git a/README.md b/README.md index c87a19f..08b3841 100644 --- a/README.md +++ b/README.md @@ -8,6 +8,35 @@ `Style-Forge.Colors` is an atomic CSS palette generator based on the HSL color model. Generate exactly the colors you need — programmatically, interactively, or by name. Perfect for design systems, theming, and scalable UIs. +## šŸš€ Quick Start + +```bash +npx sf.color +``` + +or use the full name: + +```bash +npx style-forge.colors +``` + +## ✨ What you can do +* šŸŽØ Generate atomic HSL-based CSS color files +* āš™ļø Run fully in terminal — no JavaScript or framework required +* šŸ” Combine selected .css files into a palette +* šŸ“¦ Use in Tailwind, Vue, React, Svelte, or raw CSS + +## šŸŽØ Supported Input Formats + +| Format | Example Input | Example Output | +|--------|-------------------|--------------------------| +| `HSL` | `259 100 42` | `hsl(259, 100%, 42%)` | +| `RGB` | `120 200 255` | `rgb(120, 200, 255)` | +| `HEX` | `#FF00AA` | `#ff00aa` | + +You can use any of the above formats when generating a color CSS file. +The output includes a fully scoped, theme-aware CSS module for light, dark, and auto modes. + ## šŸŽÆ Modifier Suffixes Style-Forge Colors provides utility modifiers to fine-tune element behavior: diff --git a/generators/styleBlocks.js b/generators/styleBlocks.js index 43c4f85..85cf83e 100644 --- a/generators/styleBlocks.js +++ b/generators/styleBlocks.js @@ -25,7 +25,6 @@ export function generateSingleColorCSS(H, S, L) { lines.push(`${SELECTOR}, ${SELECTOR}\\:st { color: ${LUM}; background-color: ${HSL} }`) // Text - // lines.push(`${SELECTOR}\\:txt { color: hsl(${H}, ${S}%, ${L > 50 ? 10 : L}%) }`) lines.push(`${SELECTOR}\\:txt, ${SELECTOR}\\:txt\\:st, ${SELECTOR}\\:txt\\:rv { color: ${HSL} }`) lines.push('') @@ -33,7 +32,6 @@ export function generateSingleColorCSS(H, S, L) { // dark lines.push(`html[data-theme='dark'] ${SELECTOR}, html.dark ${SELECTOR} { color: ${TX_LUM_REV}; background-color: ${BG_LUM_REV} }`) lines.push(`html[data-theme='dark'] ${SELECTOR}\\:st, html.dark ${SELECTOR}\\:st { color: ${LUM}; background-color: ${HSL} }`) - // lines.push(`html[data-theme='dark'] ${SELECTOR}\\:txt, html.dark ${SELECTOR}\\:txt { color: hsl(${H}, ${S}%, ${L < 50 ? 100 - L : L}%) }`) lines.push(`html[data-theme='dark'] ${SELECTOR}\\:txt, html.dark ${SELECTOR}\\:txt { color: hsl(${H}, ${S}%, ${90}%) }`) lines.push(`html[data-theme='dark'] ${SELECTOR}\\:txt\\:st, html.dark ${SELECTOR}\\:txt\\:st { color: ${HSL} }`) lines.push(`html[data-theme='dark'] ${SELECTOR}\\:txt\\:rv, html.dark ${SELECTOR}\\:txt\\:rv { color: hsl(${H}, ${S}%, ${10}%) }`) @@ -44,7 +42,6 @@ export function generateSingleColorCSS(H, S, L) { lines.push(`@media (prefers-color-scheme: dark) {`) lines.push(` html[data-theme='auto'] ${SELECTOR}, html.auto ${SELECTOR} { color: ${TX_LUM_REV}; background-color: ${BG_LUM_REV} }`) lines.push(` html[data-theme='auto'] ${SELECTOR}\\:st, html.auto ${SELECTOR}\\:st { color: ${LUM}; background-color: ${HSL} }`) - // lines.push(` html[data-theme='auto'] ${SELECTOR}\\:txt, html.auto ${SELECTOR}\\:txt { color: hsl(${H}, ${S}%, ${L < 50 ? 100 - L : L}%) }`) lines.push(` html[data-theme='auto'] ${SELECTOR}\\:txt, html.auto ${SELECTOR}\\:txt { color: hsl(${H}, ${S}%, ${90}%) }`) lines.push(` html[data-theme='auto'] ${SELECTOR}\\:txt\\:st, html.auto ${SELECTOR}\\:txt\\:st { color: ${HSL} }`) lines.push(` html[data-theme='auto'] ${SELECTOR}\\:txt\\:rv, html.auto ${SELECTOR}\\:txt\\:rv { color: hsl(${H}, ${S}%, ${10}%) }`) diff --git a/main.js b/main.js index 5dac29f..1232e2c 100755 --- a/main.js +++ b/main.js @@ -33,7 +33,10 @@ async function main() { }, ]) - if (mode === 'Exit') process.exit(0) + if (mode === '🚪 Exit') { + console.log('\nšŸ‘‹ Bye!') + process.exit(0) + } let format = config.defaultFormat || 'HSL' diff --git a/package.json b/package.json index c222262..d37b358 100644 --- a/package.json +++ b/package.json @@ -1,10 +1,11 @@ { "name": "style-forge.colors", - "version": "2025.5.12", - "description": "Style-Forge Colors CLI: atomic HSL-based color palette generator and CSS module for scalable design systems.", + "version": "2025.5.13", + "description": "Style-Forge Colors: atomic HSL-based color palette generator and CSS module for scalable design systems.", "type": "module", "bin": { - "style-forge.colors": "./main.js" + "style-forge.colors": "./main.js", + "sf.colors": "./main.js" }, "repository": { "type": "git", @@ -15,16 +16,16 @@ "keywords": [ "style-forge", "colors", - "color palettes", + "color-palettes", "theme", - "HSL", - "CSS generator", - "frontend", - "design system", - "atomic CSS", - "CLI", - "UI", - "web design" + "hsl", + "css-generator", + "frontend-development", + "design-system", + "atomic-css", + "cli", + "web-design", + "ui" ], "dependencies": { "chalk": "^5.4.1",