release: version 2025.5.12

.gitignore

@@ -1,33 +1,21 @@
-generate/
-node_modules/
-
-npm-debug.log
-yarn-debug.log*
-yarn-error.log*
+*
 
+node_modules/
 .idea/
 .vscode/
 
-*.log
-*.tmp
-*.temp
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
-*.iml
-
 .DS_Store
-Thumbs.db
-
-dist/
-build/
-
-config.js
-secrets.json
-
-*.key
-*.pem
 
-.coverage
+!.editorconfig
+!CONTRIBUTING.md
+!LICENSE
+!main.js
+!package.json
+!README.md
+!yarn.lock
+
+!.github/
+!generators/
+!generators/**
+!utils/
+!utils/**

.npmignore

@@ -1,6 +1,12 @@
-!/package.json
-!/README.md
-!/src/**/*
-!/*.css
-
 *
+
+!main.js
+!package.json
+!README.md
+!LICENSE
+!CONTRIBUTING.md
+
+!generators/
+!generators/**
+!utils/
+!utils/**

README.md

@@ -6,7 +6,20 @@
 ![npm](https://img.shields.io/npm/dm/style-forge.colors)
 ![build](https://github.com/Style-Forge/colors/actions/workflows/release.yml/badge.svg)
 
-`Style-Forge.Colors` package provides a comprehensive and customizable set of color palettes for your web applications. It includes predefined color schemes and the ability to create your own custom palettes, ensuring consistent and visually appealing designs across your projects.
+`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.
+
+## 🎯 Modifier Suffixes
+
+Style-Forge Colors provides utility modifiers to fine-tune element behavior:
+
+| Suffix     | Meaning                             | Applies to |
+|------------|--------------------------------------|----------|
+| `:st`      | Static. Ignores theme-based changes. | `bg`, `txt` |
+| `:txt`     | Text color based on contrast logic.  | `txt` |
+| `:txt:st`  | Static text color.                   | `txt`    |
+| `:txt:rv`  | Reversed text (for strong contrast). | `txt`    |
+
+> Combine them like `.sf-c-180:100:50:txt:st` for consistent control across themes.
 
 ## Documentation
 
@@ -81,7 +94,7 @@ If you feel awesome and want to support us in a small way, please consider starr
     <td><a href="https://github.com/Style-Forge/colors" target="_blank">GitHub</a></td>
     <td><a href="https://npmjs.com/package/style-forge.colors" target="_blank">NPM</a></td>
     <td><img src="https://img.shields.io/npm/v/style-forge.colors" alt="npm"></td>
-    <td>Color palettes and styles for the project.</td>
+    <td>Atomic HSL-based color generator and palette engine.</td>
   </tr>
 </table>
 

generators/styleBlocks.js

@@ -0,0 +1,54 @@
+import { getLuminance, getContrastRatio } from '../utils/tools.js'
+import { HSLToRGB } from '../utils/convert.js'
+
+const blackLum = getLuminance(HSLToRGB([0, 0, 0]))
+
+export function generateSingleColorCSS(H, S, L) {
+  const baseLum = getLuminance(HSLToRGB([H, S, L]))
+  const contrast = getContrastRatio(blackLum, baseLum)
+  const textL = contrast > 7 ? 10 : 90
+  const textL_REV = contrast < 7 ? 10 : 90
+
+  const lines = []
+
+  const SELECTOR = `.sf-c-${H}\\:${S}\\:${L}`
+  const HSL = `hsl(${H}, ${S}%, ${L}%)`
+  const LUM = `hsl(${H}, ${S}%, ${textL}%)`
+
+  const TX_LUM_REV = `hsl(${H}, ${S}%, ${textL_REV}%)`
+  const BG_LUM_REV = `hsl(${H}, ${S}%, ${100 - L}%)`
+
+  // var
+  lines.push(`${SELECTOR}\\:var { --sf-c-${H}-${S}-${L}: ${H} ${S} ${L} }`)
+
+  // light
+  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('')
+
+  // 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}%) }`)
+
+  lines.push('')
+
+  // auto
+  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}%) }`)
+  lines.push(`}`)
+
+  return lines.join('\n')
+}