dnanocss 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Dnano
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,185 @@
+# dnanoCSS ⚡
+
+![Version](https://img.shields.io/badge/version-0.0.1-blue)
+![License](https://img.shields.io/badge/license-MIT-green)
+
+> A lightweight utility-first CSS engine powered by Vanilla JavaScript.
+
+dnanoCSS is a lightweight runtime utility-first CSS engine built with Vanilla JavaScript. It scans your DOM, parses utility classes, and dynamically generates real CSS without any build step or external dependency.
+
+## Why dnanoCSS?
+
+Most utility-first frameworks require build tools, configuration, or compilation steps.
+
+dnanoCSS explores a different approach:
+utility classes are interpreted directly in the browser at runtime using pure JavaScript.
+
+The goal of this project is to deeply understand:
+
+- DOM traversal
+- token parsing
+- dynamic CSS generation
+- runtime styling systems
+- utility-first architecture
+
+---
+
+## Features
+
+- **Stylesheet Injection** — Generates real CSS rules in a `<style>` tag (not inline styles)
+- **60+ Utilities** — Spacing, flexbox, colors, typography, borders, sizing, and more
+- **Color Palette** — 30+ named colors + semantic tokens (`primary`, `danger`, `success`)
+- **Responsive Breakpoints** — `dn-md-p-20` → `@media (min-width:768px)`
+- **Pseudo-States** — `dn-hover-bg-primary`, `dn-focus-border-blue`
+- **MutationObserver** — Auto-styles dynamically added DOM elements
+- **Modular Architecture** — `engine`, `parser`, `utilities`, `constants` separated cleanly
+
+---
+
+## Installation
+
+```bash
+npm install dnanocss
+```
+
+## Usage
+
+```js
+import "dnanocss";
+```
+
+## Environment Support
+
+dnanoCSS currently works best in modern ESM/bundler environments such as:
+
+- Vite
+- Webpack
+- Parcel
+- Next.js
+
+For direct browser usage without a bundler, use relative module imports or a future CDN build.
+
+## Quick Start
+
+```html
+<!-- 1. Add the script -->
+<script type="module" src="./index.js"></script>
+
+<!-- 2. Use utility classes -->
+<div class="dn-flex dn-items-center dn-justify-center dn-bg-primary dn-text-white dn-p-24 dn-rounded-12">
+  Hello dnanoCSS!
+</div>
+```
+
+---
+
+## Utility Reference
+
+### Spacing
+```
+dn-p-{n}    dn-pt-{n}   dn-pb-{n}   dn-pl-{n}   dn-pr-{n}
+dn-px-{n}   dn-py-{n}
+dn-m-{n}    dn-mt-{n}   dn-mb-{n}   dn-ml-{n}   dn-mr-{n}
+dn-mx-{n}   dn-my-{n}   dn-mx-auto
+```
+
+### Colors
+```
+dn-bg-{color}       dn-text-{color}      dn-border-{color}
+```
+Available: `black`, `white`, `primary`, `secondary`, `danger`, `success`, `warning`, `info`, `red`, `blue`, `green`, `purple`, `pink`, `teal`, `gray`, `gray-100`…`gray-900`, and more.
+
+### Typography
+```
+dn-fs-{n}           dn-fw-{weight}       dn-lh-{n}
+dn-text-center      dn-text-left         dn-text-right
+dn-uppercase        dn-lowercase         dn-capitalize
+dn-italic           dn-underline         dn-truncate
+```
+
+### Layout / Flexbox
+```
+dn-flex      dn-col       dn-grid      dn-block     dn-hidden
+dn-justify-center  dn-justify-between  dn-justify-evenly
+dn-items-center    dn-items-start      dn-items-end
+dn-gap-{n}   dn-wrap      dn-nowrap
+```
+
+### Borders
+```
+dn-border    dn-border-2   dn-border-4   dn-border-0
+dn-rounded-{n}
+```
+
+### Sizing
+```
+dn-w-{n}   dn-h-{n}   dn-w-full   dn-h-screen   dn-w-screen
+dn-max-w-{n}   dn-min-h-{n}
+```
+
+### Responsive
+Prefix any utility with a breakpoint:
+```
+dn-sm-p-20    →  @media (min-width: 640px)  { padding: 20px }
+dn-md-p-20    →  @media (min-width: 768px)  { padding: 20px }
+dn-lg-p-20    →  @media (min-width: 1024px) { padding: 20px }
+dn-xl-p-20    →  @media (min-width: 1280px) { padding: 20px }
+```
+
+### Pseudo-States
+```
+dn-hover-bg-primary     →  .dn-hover-bg-primary:hover { background-color: #2563eb }
+dn-focus-border-blue    →  .dn-focus-border-blue:focus { border-color: #3b82f6 }
+dn-active-text-white    →  .dn-active-text-white:active { color: #ffffff }
+```
+
+---
+
+## Architecture
+
+```txt
+dnanoCSS/
+├── index.js            Entry point, boots engine on DOMContentLoaded
+│
+├── demo/
+│   ├── index.html      Main demo page showcasing utilities and features
+│   ├── style.css       Demo-specific styles
+│   └── examples.html   Utility showcase
+│
+├── src/
+│   ├── engine.js       DOM scanner, style injector, MutationObserver
+│   ├── parser.js       Tokenizer — converts "dn-p-20" → { padding: "20px" }
+│   ├── utilities.js    All utility mappings
+│   └── constants.js    Colors, breakpoints, config
+│
+├── package.json
+├── README.md
+├── LICENSE
+└── .gitignore
+```
+
+### How the Engine Works
+
+1. **DOM Ready** — `DOMContentLoaded` fires, `initDnanoCSS()` is called
+2. **Scan** — Every element's `classList` is checked for `dn-` prefixed classes
+3. **Parse** — `parser.js` splits tokens, extracts breakpoints, pseudo-states, and values
+4. **Generate** — Valid CSS rule strings are built (`camelCase` → `kebab-case`)
+5. **Inject** — Rules are inserted into a single `<style id="dnano-styles">` tag
+6. **Observe** — `MutationObserver` handles new elements added dynamically
+
+---
+
+## Future Improvements
+
+- [ ] Dark mode variant (`dn-dark-bg-gray-900`)
+- [ ] CSS custom property output (`--dn-spacing-4: 16px`)
+- [ ] CLI extractor for static HTML → pure CSS file
+- [ ] Plugin system for custom utilities
+- [ ] Caching layer with localStorage for repeat visits
+- [ ] `!important` modifier (`dn-!p-0`)
+
+---
+
+## License
+
+MIT — free to use, modify, and extend.

package/index.js

@@ -0,0 +1,13 @@
+/**
+ * dnanoCSS — app.js
+ * Entry point. Boots the engine once the DOM is ready.
+ */
+
+import { initDnanoCSS } from "./src/engine.js";
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", initDnanoCSS);
+} else {
+  // DOM already ready (script loaded with defer / at end of body)
+  initDnanoCSS();
+}

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "dnanocss",
+  "version": "0.0.1",
+  "description": "> A lightweight utility-first CSS engine powered by Vanilla JavaScript.",
+  "main": "index.js",
+  "type": "module",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "files": [
+    "src",
+    "index.js",
+    "README.md",
+    "LICENSE"
+  ],
+  "keywords": [
+    "css",
+    "utility-css",
+    "runtime-css",
+    "css-framework",
+    "tailwindcss",
+    "utility-first"
+  ],
+  "author": "Dnyaneshwar More",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dnano-more/dnanocss"
+  },
+    "bugs": {
+    "url": "https://github.com/dnano-more/dnanocss/issues"
+  },
+  "homepage": "https://github.com/dnano-more/dnanocss#readme"
+}

package/src/constants.js

@@ -0,0 +1,63 @@
+/**
+ * dnanoCSS — constants.js
+ * Color palette, breakpoints, and global config.
+ */
+
+export const COLOR_PALETTE = {
+  // Basic
+  black:       "#0a0a0a",
+  white:       "#ffffff",
+  transparent: "transparent",
+
+  // Grays
+  gray:        "#6b7280",
+  "gray-100":  "#f3f4f6",
+  "gray-200":  "#e5e7eb",
+  "gray-300":  "#d1d5db",
+  "gray-400":  "#9ca3af",
+  "gray-500":  "#6b7280",
+  "gray-600":  "#4b5563",
+  "gray-700":  "#374151",
+  "gray-800":  "#1f2937",
+  "gray-900":  "#111827",
+
+  // Brand / Semantic
+  primary:  "#2563eb",
+  secondary:"#7c3aed",
+  success:  "#16a34a",
+  danger:   "#dc2626",
+  warning:  "#d97706",
+  info:     "#0891b2",
+
+  // Named colors
+  red:     "#ef4444",
+  orange:  "#f97316",
+  yellow:  "#eab308",
+  green:   "#22c55e",
+  teal:    "#14b8a6",
+  blue:    "#3b82f6",
+  indigo:  "#6366f1",
+  purple:  "#a855f7",
+  pink:    "#ec4899",
+  rose:    "#f43f5e",
+  sky:     "#0ea5e9",
+  lime:    "#84cc16",
+  amber:   "#f59e0b",
+  cyan:    "#06b6d4",
+  slate:   "#64748b",
+};
+
+export const BREAKPOINTS = {
+  sm:  640,
+  md:  768,
+  lg:  1024,
+  xl:  1280,
+  "2xl": 1536,
+};
+
+export const CONFIG = {
+  prefix:    "dn-",
+  unit:      "px",       // default numeric unit
+  remBase:   16,
+  styleTagId:"dnano-styles",
+};

package/src/engine.js

@@ -0,0 +1,187 @@
+/**
+ * dnanoCSS — engine.js
+ * Runtime engine: scans the DOM, generates CSS rules, injects a <style> tag.
+ * Supports hover/focus/active pseudo-states and responsive breakpoints.
+ */
+
+import { parseClass } from "./parser.js";
+import { BREAKPOINTS, CONFIG } from "./constants.js";
+
+// ────────────────────────────────────────────────────────────────────
+// Internal state
+// ────────────────────────────────────────────────────────────────────
+/** Set of class strings already processed → avoids duplicate rules */
+const processedClasses = new Set();
+
+/** The injected <style> element */
+let styleTag = null;
+
+// ────────────────────────────────────────────────────────────────────
+// Public API
+// ────────────────────────────────────────────────────────────────────
+
+/**
+ * Bootstrap the engine.
+ * Call once; re-calling is safe (idempotent).
+ */
+export function initDnanoCSS() {
+  ensureStyleTag();
+  scanAndGenerate(document.documentElement);
+  attachMutationObserver();
+  console.info(`[dnanoCSS] ✓ Engine initialised. ${processedClasses.size} class(es) processed.`);
+}
+
+/**
+ * Manually process a container element (useful after dynamic content loads).
+ * @param {Element} root
+ */
+export function processDnano(root = document.documentElement) {
+  scanAndGenerate(root);
+}
+
+// ────────────────────────────────────────────────────────────────────
+// Style-tag management
+// ────────────────────────────────────────────────────────────────────
+
+function ensureStyleTag() {
+  if (styleTag) return;
+  styleTag = document.getElementById(CONFIG.styleTagId);
+  if (!styleTag) {
+    styleTag = document.createElement("style");
+    styleTag.id = CONFIG.styleTagId;
+    styleTag.setAttribute("data-dnano", "true");
+    document.head.appendChild(styleTag);
+  }
+}
+
+/**
+ * Append a raw CSS rule string to the style tag.
+ */
+function injectRule(rule) {
+  styleTag.sheet
+    ? styleTag.sheet.insertRule(rule, styleTag.sheet.cssRules.length)
+    : (styleTag.textContent += rule + "\n");
+}
+
+// ────────────────────────────────────────────────────────────────────
+// DOM scanning
+// ────────────────────────────────────────────────────────────────────
+
+function scanAndGenerate(root) {
+  const elements = root.querySelectorAll
+    ? [root, ...root.querySelectorAll("*")]
+    : [root];
+
+  for (const el of elements) {
+    for (const cls of el.classList) {
+      if (!cls.startsWith(CONFIG.prefix)) continue;
+      if (processedClasses.has(cls))       continue;
+
+      const result = parseClass(cls);
+      if (!result) continue;
+
+      generateRule(cls, result);
+      processedClasses.add(cls);
+    }
+  }
+}
+
+// ────────────────────────────────────────────────────────────────────
+// CSS rule generation
+// ────────────────────────────────────────────────────────────────────
+
+/**
+ * Turn a parsed result into one or more CSS rule strings and inject them.
+ *
+ * @param {string} cls       - Original class name, e.g. "dn-hover-bg-red"
+ * @param {{ styles: Object, pseudo?: string, breakpoint?: string }} result
+ */
+function generateRule(cls, { styles, pseudo, breakpoint }) {
+  const selector = buildSelector(cls, pseudo);
+  const declarations = stylesToDeclarations(styles);
+
+  if (!declarations) return;
+
+  const rule = `${selector} { ${declarations} }`;
+
+  if (breakpoint) {
+    const bp = BREAKPOINTS[breakpoint];
+    if (bp) {
+      injectRule(`@media (min-width: ${bp}px) { ${rule} }`);
+    }
+  } else {
+    injectRule(rule);
+  }
+}
+
+/**
+ * Build the CSS selector for a class, with optional pseudo-state.
+ *
+ * Escapes special characters (colon, slash, dot) in class names for
+ * valid CSS selector strings.
+ */
+function buildSelector(cls, pseudo) {
+  const escaped = escapeCssClass(cls);
+  if (!pseudo) return `.${escaped}`;
+
+  const pseudoMap = {
+    hover:       ":hover",
+    focus:       ":focus",
+    active:      ":active",
+    disabled:    ":disabled",
+    placeholder: "::placeholder",
+  };
+
+  const pseudoStr = pseudoMap[pseudo] || `:${pseudo}`;
+  return `.${escaped}${pseudoStr}`;
+}
+
+/**
+ * Escape characters that are special in CSS selectors.
+ */
+function escapeCssClass(cls) {
+  return cls.replace(/[./:[\]()#!,@*+~=^$|?{}\\]/g, (c) => `\\${c}`);
+}
+
+/**
+ * Convert a styles object  { paddingTop: "20px", ... }
+ * into a declaration string  "padding-top: 20px; ..."
+ */
+function stylesToDeclarations(styles) {
+  return Object.entries(styles)
+    .map(([prop, val]) => `${camelToKebab(prop)}: ${val}`)
+    .join("; ");
+}
+
+/** paddingTop → padding-top */
+function camelToKebab(str) {
+  return str.replace(/([A-Z])/g, (m) => `-${m.toLowerCase()}`);
+}
+
+// ────────────────────────────────────────────────────────────────────
+// MutationObserver — auto-process dynamically added nodes
+// ────────────────────────────────────────────────────────────────────
+
+function attachMutationObserver() {
+  const observer = new MutationObserver((mutations) => {
+    let needsScan = false;
+    for (const mutation of mutations) {
+      if (mutation.type === "childList" && mutation.addedNodes.length) {
+        needsScan = true;
+        break;
+      }
+      if (mutation.type === "attributes" && mutation.attributeName === "class") {
+        needsScan = true;
+        break;
+      }
+    }
+    if (needsScan) scanAndGenerate(document.documentElement);
+  });
+
+  observer.observe(document.documentElement, {
+    childList:  true,
+    subtree:    true,
+    attributes: true,
+    attributeFilter: ["class"],
+  });
+}

package/src/parser.js

@@ -0,0 +1,137 @@
+/**
+ * dnanoCSS — parser.js
+ * Parses a single "dn-*" class string into one or more CSS declarations.
+ *
+ * Returns:  Array<{ property: string, value: string }>
+ * or        null if the class is not recognised.
+ */
+
+import { NUMERIC_MAP, KEYWORD_MAP, buildColorRule } from "./utilities.js";
+import { CONFIG } from "./constants.js";
+
+// Color-prefix tokens that take a color name as their last segment.
+const COLOR_PREFIXES = new Set(["bg", "text", "border", "outline", "shadow", "decoration"]);
+
+// Responsive prefix tokens  (sm, md, lg, xl, 2xl)
+const BREAKPOINT_PREFIXES = new Set(["sm", "md", "lg", "xl", "2xl"]);
+
+// Pseudo-state prefixes
+const PSEUDO_PREFIXES = new Set(["hover", "focus", "active", "disabled", "placeholder"]);
+
+/**
+ * Main parse function.
+ *
+ * @param {string} cls  - e.g. "dn-p-20", "dn-bg-primary", "dn-flex"
+ * @returns {{ styles: Object, pseudo?: string, breakpoint?: string } | null}
+ */
+export function parseClass(cls) {
+  if (!cls.startsWith(CONFIG.prefix)) return null;
+
+  // Strip the "dn-" prefix
+  let token = cls.slice(CONFIG.prefix.length); // e.g. "p-20" | "hover-bg-red" | "md-p-20"
+
+  let pseudo     = null;
+  let breakpoint = null;
+
+  // ── Extract optional breakpoint prefix ──────────────────────────
+  const firstDash = token.indexOf("-");
+  if (firstDash !== -1) {
+    const maybeBreak = token.slice(0, firstDash);
+    if (BREAKPOINT_PREFIXES.has(maybeBreak)) {
+      breakpoint = maybeBreak;
+      token = token.slice(firstDash + 1);
+    }
+  }
+
+  // ── Extract optional pseudo-state prefix ────────────────────────
+  const firstDash2 = token.indexOf("-");
+  if (firstDash2 !== -1) {
+    const maybePseudo = token.slice(0, firstDash2);
+    if (PSEUDO_PREFIXES.has(maybePseudo)) {
+      pseudo = maybePseudo;
+      token = token.slice(firstDash2 + 1);
+    }
+  }
+
+  // ── Try resolving the (possibly shortened) token ─────────────────
+  const styles = resolveToken(token);
+  if (!styles) return null;
+
+  return { styles, pseudo, breakpoint };
+}
+
+/**
+ * Resolves a token (with prefix stripped) into a styles object.
+ * Returns null if unrecognised.
+ *
+ * @param {string} token  e.g. "p-20" | "bg-primary" | "flex"
+ * @returns {Object|null}
+ */
+function resolveToken(token) {
+  // ── 1. Keyword / toggle utilities  (exact match first) ──────────
+  if (KEYWORD_MAP[token]) {
+    return { ...KEYWORD_MAP[token] };
+  }
+
+  // ── Need to split on dashes from here on ────────────────────────
+  // We must split carefully because tokens like "gap-x-4" or "border-t" exist.
+  // Strategy: try progressively longer "key" prefixes.
+  const parts = token.split("-");
+
+  // ── 2. Color utilities  (dn-bg-{color}, dn-text-{color} …) ──────
+  if (parts.length >= 2 && COLOR_PREFIXES.has(parts[0])) {
+    // colorName is everything after the first segment
+    const colorName = parts.slice(1).join("-");
+    const rule = buildColorRule(parts[0], colorName);
+    if (rule) return rule;
+  }
+
+  // ── 3. Numeric utilities  (dn-p-20, dn-fs-18, dn-rounded-10 …) ──
+  // Walk from longest key prefix to shortest to handle "gap-x", "min-w" etc.
+  for (let len = parts.length - 1; len >= 1; len--) {
+    const key   = parts.slice(0, len).join("-");
+    const rawVal = parts.slice(len).join("-");
+
+    if (NUMERIC_MAP[key] !== undefined && rawVal !== "") {
+      const cssValue = buildNumericValue(rawVal);
+      const propOrArr = NUMERIC_MAP[key];
+
+      if (Array.isArray(propOrArr)) {
+        const styles = {};
+        propOrArr.forEach(p => { styles[p] = cssValue; });
+        return styles;
+      }
+      return { [propOrArr]: cssValue };
+    }
+  }
+
+  return null; // unrecognised
+}
+
+/**
+ * Convert a raw string value into a proper CSS value.
+ *   "20"      → "20px"
+ *   "1.5"     → "1.5px"  (if non-zero decimal → keep as rem? No, keep simple.)
+ *   "full"    → "100%"
+ *   "screen"  → "100vw"  (used rarely)
+ *   "auto"    → "auto"
+ *   anything else → as-is
+ */
+function buildNumericValue(raw) {
+  if (raw === "auto")    return "auto";
+  if (raw === "full")    return "100%";
+  if (raw === "screen")  return "100vw";
+  if (raw === "none")    return "none";
+  if (raw === "px")      return "1px";
+
+  // Pure number → add px
+  if (/^\d+(\.\d+)?$/.test(raw)) return `${raw}${CONFIG.unit}`;
+
+  // Fraction  e.g. "1/2" → 50%
+  const fracMatch = raw.match(/^(\d+)\/(\d+)$/);
+  if (fracMatch) {
+    return `${((+fracMatch[1] / +fracMatch[2]) * 100).toFixed(4)}%`;
+  }
+
+  return raw; // raw string (e.g. "bold", "center", hex colors)
+}

package/src/utilities.js

@@ -0,0 +1,199 @@
+/**
+ * dnanoCSS — utilities.js
+ * Maps utility tokens → CSS property names and special handlers.
+ */
+
+import { COLOR_PALETTE } from "./constants.js";
+
+// ------------------------------------------------------------------
+// 1. Numeric utilities  (dn-{key}-{number})
+//    value is auto-converted to px unless unit is specified.
+// ------------------------------------------------------------------
+export const NUMERIC_MAP = {
+  // Spacing
+  p:   "padding",
+  pt:  "paddingTop",
+  pb:  "paddingBottom",
+  pl:  "paddingLeft",
+  pr:  "paddingRight",
+  px:  ["paddingLeft", "paddingRight"],
+  py:  ["paddingTop",  "paddingBottom"],
+
+  m:   "margin",
+  mt:  "marginTop",
+  mb:  "marginBottom",
+  ml:  "marginLeft",
+  mr:  "marginRight",
+  mx:  ["marginLeft",  "marginRight"],
+  my:  ["marginTop",   "marginBottom"],
+
+  // Sizing
+  w:   "width",
+  h:   "height",
+  "min-w": "minWidth",
+  "min-h": "minHeight",
+  "max-w": "maxWidth",
+  "max-h": "maxHeight",
+
+  // Typography
+  fs:  "fontSize",
+  lh:  "lineHeight",
+  ls:  "letterSpacing",
+
+  // Border
+  rounded:  "borderRadius",
+  "border-w": "borderWidth",
+
+  // Flex / Grid
+  gap:    "gap",
+  "gap-x":"columnGap",
+  "gap-y":"rowGap",
+
+  // Z-index / Opacity
+  z:       "zIndex",
+  opacity: "opacity",
+
+  // Misc
+  top:    "top",
+  right:  "right",
+  bottom: "bottom",
+  left:   "left",
+};
+
+// ------------------------------------------------------------------
+// 2. Keyword / toggle utilities  (dn-{keyword})
+// ------------------------------------------------------------------
+export const KEYWORD_MAP = {
+  // Display
+  flex:         { display: "flex" },
+  "inline-flex":{ display: "inline-flex" },
+  grid:         { display: "grid" },
+  block:        { display: "block" },
+  "inline-block":{ display: "inline-block" },
+  inline:       { display: "inline" },
+  hidden:       { display: "none" },
+
+  // Flex Direction
+  row:          { flexDirection: "row" },
+  "row-reverse":{ flexDirection: "row-reverse" },
+  col:          { flexDirection: "column" },
+  "col-reverse":{ flexDirection: "column-reverse" },
+
+  // Flex Wrap
+  wrap:         { flexWrap: "wrap" },
+  nowrap:       { flexWrap: "nowrap" },
+
+  // Justify Content
+  "justify-start":   { justifyContent: "flex-start" },
+  "justify-end":     { justifyContent: "flex-end" },
+  "justify-center":  { justifyContent: "center" },
+  "justify-between": { justifyContent: "space-between" },
+  "justify-around":  { justifyContent: "space-around" },
+  "justify-evenly":  { justifyContent: "space-evenly" },
+
+  // Align Items
+  "items-start":    { alignItems: "flex-start" },
+  "items-end":      { alignItems: "flex-end" },
+  "items-center":   { alignItems: "center" },
+  "items-baseline": { alignItems: "baseline" },
+  "items-stretch":  { alignItems: "stretch" },
+
+  // Align Self
+  "self-start":    { alignSelf: "flex-start" },
+  "self-end":      { alignSelf: "flex-end" },
+  "self-center":   { alignSelf: "center" },
+  "self-stretch":  { alignSelf: "stretch" },
+
+  // Position
+  relative: { position: "relative" },
+  absolute: { position: "absolute" },
+  fixed:    { position: "fixed" },
+  sticky:   { position: "sticky" },
+
+  // Overflow
+  "overflow-hidden": { overflow: "hidden" },
+  "overflow-auto":   { overflow: "auto" },
+  "overflow-scroll": { overflow: "scroll" },
+  "overflow-visible":{ overflow: "visible" },
+
+  // Text Alignment
+  "text-left":    { textAlign: "left" },
+  "text-center":  { textAlign: "center" },
+  "text-right":   { textAlign: "right" },
+  "text-justify": { textAlign: "justify" },
+
+  // Font Weight
+  "fw-thin":      { fontWeight: "100" },
+  "fw-light":     { fontWeight: "300" },
+  "fw-normal":    { fontWeight: "400" },
+  "fw-medium":    { fontWeight: "500" },
+  "fw-semibold":  { fontWeight: "600" },
+  "fw-bold":      { fontWeight: "700" },
+  "fw-extrabold": { fontWeight: "800" },
+  "fw-black":     { fontWeight: "900" },
+
+  // Font Style
+  italic:      { fontStyle: "italic" },
+  "not-italic":{ fontStyle: "normal" },
+
+  // Text Decoration
+  underline:    { textDecoration: "underline" },
+  "line-through":{ textDecoration: "line-through" },
+  "no-underline":{ textDecoration: "none" },
+
+  // Text Transform
+  uppercase:   { textTransform: "uppercase" },
+  lowercase:   { textTransform: "lowercase" },
+  capitalize:  { textTransform: "capitalize" },
+
+  // Border
+  border:       { border: "1px solid currentColor" },
+  "border-2":   { border: "2px solid currentColor" },
+  "border-4":   { border: "4px solid currentColor" },
+  "border-0":   { border: "none" },
+  "border-t":   { borderTop: "1px solid currentColor" },
+  "border-b":   { borderBottom: "1px solid currentColor" },
+  "border-l":   { borderLeft: "1px solid currentColor" },
+  "border-r":   { borderRight: "1px solid currentColor" },
+
+  // Cursor
+  "cursor-pointer": { cursor: "pointer" },
+  "cursor-default": { cursor: "default" },
+  "cursor-not-allowed": { cursor: "not-allowed" },
+
+  // Misc
+  "w-full":    { width: "100%" },
+  "h-full":    { height: "100%" },
+  "w-screen":  { width: "100vw" },
+  "h-screen":  { height: "100vh" },
+  "m-auto":    { margin: "auto" },
+  "mx-auto":   { marginLeft: "auto", marginRight: "auto" },
+  "box-border":{ boxSizing: "border-box" },
+  "box-content":{ boxSizing: "content-box" },
+  "select-none":{ userSelect: "none" },
+  "pointer-events-none": { pointerEvents: "none" },
+  "truncate":  { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+  "sr-only":   { position: "absolute", width: "1px", height: "1px", padding: "0", margin: "-1px", overflow: "hidden", clip: "rect(0,0,0,0)", whiteSpace: "nowrap", borderWidth: "0" },
+};
+
+// ------------------------------------------------------------------
+// 3. Color utilities  (dn-bg-{color}  dn-text-{color}  dn-border-{color})
+// ------------------------------------------------------------------
+export function resolveColor(name) {
+  return COLOR_PALETTE[name] || name; // fallback: use raw value (e.g. hex)
+}
+
+export function buildColorRule(prefix, colorName) {
+  const value = resolveColor(colorName);
+  if (!value) return null;
+
+  switch (prefix) {
+    case "bg":         return { backgroundColor: value };
+    case "text":       return { color: value };
+    case "border":     return { borderColor: value };
+    case "outline":    return { outlineColor: value };
+    case "shadow":     return { boxShadow: `0 2px 8px ${value}` };
+    case "decoration": return { textDecorationColor: value };
+    default:           return null;
+  }
+}