{"_id":"@chandan632/leaf-css","_rev":"2-25171257054d933729e0fe8846b6760d","name":"@chandan632/leaf-css","dist-tags":{"latest":"1.2.0"},"versions":{"1.0.0":{"name":"@chandan632/leaf-css","version":"1.0.0","keywords":["css","utility","tailwind","framework","leaf-css"],"author":{"name":"Your Name"},"license":"MIT","_id":"@chandan632/leaf-css@1.0.0","maintainers":[{"name":"chandan632","email":"chandanrout737@gmail.com"}],"dist":{"shasum":"492c6efa32c6b8b3b12f8a26d862d217089dac07","tarball":"https://registry.npmjs.org/@chandan632/leaf-css/-/leaf-css-1.0.0.tgz","fileCount":5,"integrity":"sha512-7+QLs1d4Xtw9OVphan3slXMQQEIqEAB5YAP87I+SEPbhHXFKh6rU1rKtNMVnT0/2U7tBitL+lKckDmojN+RWug==","signatures":[{"sig":"MEQCIBgfDXPDz51SlKzWeFuLbHXGiPZGkfZbk4x/ELWqZXGvAiBxmIbHwsqOL/+l2PCvGm0MFNMuo9yVREXnK3u4zey7ZQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":54148},"main":"dist/leaf.js","type":"module","browser":"dist/leaf.min.js","gitHead":"fef109f5d95924ab165293030b2395372bc3ee7d","scripts":{"dev":"node build.js --watch","build":"node build.js"},"_npmUser":{"name":"chandan632","email":"chandanrout737@gmail.com"},"_npmVersion":"11.11.1","description":"A lightweight utility-first CSS engine","directories":{},"_nodeVersion":"22.13.0","_hasShrinkwrap":false,"devDependencies":{"esbuild":"^0.27.4"},"_npmOperationalInternal":{"tmp":"tmp/leaf-css_1.0.0_1774159108326_0.44737558864572824","host":"s3://npm-registry-packages-npm-production"}},"1.2.0":{"name":"@chandan632/leaf-css","version":"1.2.0","type":"module","description":"A lightweight utility-first CSS engine","main":"dist/leaf.js","browser":"dist/leaf.min.js","scripts":{"build":"node build.js","dev":"node build.js --watch"},"keywords":["css","utility","tailwind","framework","leaf-css"],"author":{"name":"Your Name"},"license":"MIT","devDependencies":{"esbuild":"^0.27.4"},"gitHead":"f829b973bc141cb328cc79d4c5753437afb7ca26","_id":"@chandan632/leaf-css@1.2.0","_nodeVersion":"22.13.0","_npmVersion":"11.11.1","dist":{"integrity":"sha512-iALKkDa+EwmL4GRrXWJhrvhO1HnAzF4MWljiapkW3RMJT3iw9XCl7vQm0cdLbpVNvhqZj9RSHS2hjfEYAcM3vA==","shasum":"6d2cd574dbffa095526307a544a468c630b00a49","tarball":"https://registry.npmjs.org/@chandan632/leaf-css/-/leaf-css-1.2.0.tgz","fileCount":5,"unpackedSize":132136,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCFTotbhuKR6/sSJ42YP9uDalg2T5PlwWlPgG9S0NulMQIgbOpbPixSYNEIDn2vSJQ6xQPLDNyfVwfaL8S7M4oujIQ="}]},"_npmUser":{"name":"chandan632","email":"chandanrout737@gmail.com"},"directories":{},"maintainers":[{"name":"chandan632","email":"chandanrout737@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/leaf-css_1.2.0_1774181156126_0.488085859602456"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-22T05:58:28.226Z","modified":"2026-03-22T12:05:56.417Z","1.0.0":"2026-03-22T05:58:28.465Z","1.2.0":"2026-03-22T12:05:56.291Z"},"author":{"name":"Your Name"},"license":"MIT","keywords":["css","utility","tailwind","framework","leaf-css"],"description":"A lightweight utility-first CSS engine","maintainers":[{"name":"chandan632","email":"chandanrout737@gmail.com"}],"readme":"<div align=\"center\">\n\n# 🍃 leaf-css\n\n**A lightweight utility-first CSS engine for the browser.**  \nWrite `leaf-*` class names — styles get injected automatically. No build step. No config. Just drop in a script tag.\n\n[![npm version](https://img.shields.io/npm/v/@chandan632/leaf-css)](https://www.npmjs.com/package/@chandan632/leaf-css)\n[![license](https://img.shields.io/npm/l/@chandan632/leaf-css)](https://github.com/chandan632/leaf-css/blob/main/LICENSE)\n[![CDN](https://img.shields.io/badge/CDN-jsDelivr-orange)](https://cdn.jsdelivr.net/npm/@chandan632/leaf-css/dist/leaf.min.js)\n\n[Live Demo](https://chandan632.github.io/leaf-css/) · [npm](https://www.npmjs.com/package/@chandan632/leaf-css) · [CDN](https://cdn.jsdelivr.net/npm/@chandan632/leaf-css/dist/leaf.min.js)\n\n</div>\n\n---\n\n## ✨ What is leaf-css?\n\nleaf-css scans your DOM for `leaf-*` class names and dynamically injects a real stylesheet into your page — similar to how Tailwind works, but with zero build tooling required.\n\n```html\n<!-- This is all you write -->\n<div class=\"leaf-flex leaf-p-4 leaf-bg-blue leaf-rounded-lg leaf-text-white\">\n  Hello leaf-css!\n</div>\n\n<!-- leaf-css automatically injects into <head> -->\n<style id=\"leaf-css-engine\">\n  .leaf-flex {\n    display: flex;\n  }\n  .leaf-p-4 {\n    padding: 16px;\n  }\n  .leaf-bg-blue {\n    background-color: #3b82f6;\n  }\n  .leaf-rounded-lg {\n    border-radius: 8px;\n  }\n  .leaf-text-white {\n    color: #ffffff;\n  }\n</style>\n```\n\n---\n\n## 🚀 Quick Start\n\n### Option 1 — CDN (recommended, no install)\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@chandan632/leaf-css/dist/leaf.min.js\"></script>\n```\n\nDrop this in your `<head>` and start using `leaf-*` classes immediately.\n\n### Option 2 — npm\n\n```bash\nnpm install @chandan632/leaf-css\n```\n\n```js\nimport \"@chandan632/leaf-css\";\n```\n\n### Option 3 — Configure before loading (optional theming)\n\n```html\n<script>\n  window.__leafConfig = {\n    colors: {\n      primary: \"#6366f1\",\n      secondary: \"#8b5cf6\",\n      brand: \"#ff6b6b\",\n      success: \"#10b981\",\n      warning: \"#f59e0b\",\n      danger: \"#ef4444\",\n    },\n    extend: {\n      spacing: { 13: \"52px\", 15: \"60px\" },\n      fontSizes: { hero: \"72px\", tiny: \"10px\" },\n    },\n  };\n</script>\n<script src=\"https://cdn.jsdelivr.net/npm/@chandan632/leaf-css/dist/leaf.min.js\"></script>\n```\n\n---\n\n## 🎨 Utilities\n\n### Spacing\n\n| Class          | CSS Output                                |\n| -------------- | ----------------------------------------- |\n| `leaf-p-4`     | `padding: 16px`                           |\n| `leaf-px-2`    | `padding-left: 8px; padding-right: 8px`   |\n| `leaf-py-3`    | `padding-top: 12px; padding-bottom: 12px` |\n| `leaf-mt-4`    | `margin-top: 16px`                        |\n| `leaf-mx-auto` | `margin-left: auto; margin-right: auto`   |\n\n### Colors\n\nFull palette includes: `red` `orange` `yellow` `lime` `green` `emerald` `teal` `cyan` `sky` `blue` `indigo` `violet` `purple` `fuchsia` `pink` `rose` `amber` — each with `light-*`, `dark-*`, and numeric `*-100` through `*-900` variants. Plus `gray`, `slate`, and `zinc` scales.\n\n| Class                | CSS Output                  |\n| -------------------- | --------------------------- |\n| `leaf-bg-blue`       | `background-color: #3b82f6` |\n| `leaf-bg-teal`       | `background-color: #14b8a6` |\n| `leaf-bg-indigo`     | `background-color: #6366f1` |\n| `leaf-bg-rose`       | `background-color: #f43f5e` |\n| `leaf-bg-light-blue` | `background-color: #7dd3fc` |\n| `leaf-bg-dark-blue`  | `background-color: #1d4ed8` |\n| `leaf-bg-blue-500`   | `background-color: #3b82f6` |\n| `leaf-bg-green-300`  | `background-color: #86efac` |\n| `leaf-text-gray-500` | `color: #6b7280`            |\n\n### Typography\n\n| Class                  | CSS Output                   |\n| ---------------------- | ---------------------------- |\n| `leaf-text-xs`         | `font-size: 12px`            |\n| `leaf-text-xl`         | `font-size: 20px`            |\n| `leaf-text-5xl`        | `font-size: 48px`            |\n| `leaf-font-bold`       | `font-weight: 700`           |\n| `leaf-font-semibold`   | `font-weight: 600`           |\n| `leaf-italic`          | `font-style: italic`         |\n| `leaf-uppercase`       | `text-transform: uppercase`  |\n| `leaf-underline`       | `text-decoration: underline` |\n| `leaf-tracking-wide`   | `letter-spacing: 0.025em`    |\n| `leaf-leading-relaxed` | `line-height: 1.625`         |\n\n### Borders & Radius\n\n| Class                | CSS Output                               |\n| -------------------- | ---------------------------------------- |\n| `leaf-border`        | `border: 1px solid`                      |\n| `leaf-border-2`      | `border-width: 2px; border-style: solid` |\n| `leaf-border-dashed` | `border-style: dashed`                   |\n| `leaf-border-dotted` | `border-style: dotted`                   |\n| `leaf-rounded-lg`    | `border-radius: 8px`                     |\n| `leaf-rounded-full`  | `border-radius: 9999px`                  |\n\n### Layout\n\n| Class                  | CSS Output                                         |\n| ---------------------- | -------------------------------------------------- |\n| `leaf-flex`            | `display: flex`                                    |\n| `leaf-grid`            | `display: grid`                                    |\n| `leaf-hidden`          | `display: none`                                    |\n| `leaf-items-center`    | `align-items: center`                              |\n| `leaf-justify-between` | `justify-content: space-between`                   |\n| `leaf-grid-cols-3`     | `grid-template-columns: repeat(3, minmax(0, 1fr))` |\n| `leaf-col-span-2`      | `grid-column: span 2 / span 2`                     |\n| `leaf-col-span-full`   | `grid-column: 1 / -1`                              |\n| `leaf-gap-4`           | `gap: 16px`                                        |\n| `leaf-w-full`          | `width: 100%`                                      |\n| `leaf-h-screen`        | `height: 100vh`                                    |\n\n### Effects\n\n| Class                 | CSS Output                          |\n| --------------------- | ----------------------------------- |\n| `leaf-shadow-sm`      | `box-shadow: 0 1px 2px ...`         |\n| `leaf-shadow-lg`      | `box-shadow: 0 10px 15px ...`       |\n| `leaf-opacity-50`     | `opacity: 0.5`                      |\n| `leaf-cursor-pointer` | `cursor: pointer`                   |\n| `leaf-transition`     | `transition: all 150ms ease-in-out` |\n| `leaf-select-none`    | `user-select: none`                 |\n\n### Animations & Transforms\n\n| Class                        | CSS Output                    |\n| ---------------------------- | ----------------------------- |\n| `leaf-animate-spin`          | spinning loader               |\n| `leaf-animate-pulse`         | skeleton/pulse effect         |\n| `leaf-animate-bounce`        | bouncing element              |\n| `leaf-animate-fade-in`       | fade in on load               |\n| `leaf-animate-slide-in-up`   | slide up on load              |\n| `leaf-animate-slide-in-left` | slide in from left            |\n| `leaf-animate-zoom-in`       | zoom in on load               |\n| `leaf-animate-wiggle`        | wiggle attention grabber      |\n| `leaf-scale-110`             | `transform: scale(1.1)`       |\n| `leaf-rotate-45`             | `transform: rotate(45deg)`    |\n| `leaf-translate-x-4`         | `transform: translateX(16px)` |\n| `leaf-duration-300`          | `transition-duration: 300ms`  |\n\n### Gradients\n\n| Class                    | CSS Output                              |\n| ------------------------ | --------------------------------------- |\n| `leaf-bg-gradient-to-r`  | `linear-gradient(to right, ...)`        |\n| `leaf-bg-gradient-to-br` | `linear-gradient(to bottom right, ...)` |\n| `leaf-from-blue`         | sets gradient start color               |\n| `leaf-via-purple`        | sets gradient middle color              |\n| `leaf-to-pink`           | sets gradient end color                 |\n\n```html\n<!-- Two color gradient -->\n<div class=\"leaf-bg-gradient-to-r leaf-from-blue leaf-to-purple\">...</div>\n\n<!-- Three color gradient -->\n<div class=\"leaf-bg-gradient-to-r leaf-from-red leaf-via-yellow leaf-to-green\">\n  ...\n</div>\n\n<!-- Gradient text -->\n<h1\n  class=\"leaf-bg-gradient-to-r leaf-from-primary leaf-to-secondary\"\n  style=\"-webkit-background-clip:text; -webkit-text-fill-color:transparent\"\n>\n  Gradient Text\n</h1>\n```\n\n---\n\n## 🌙 Dark Mode\n\nAutomatically follows system preference. Toggle manually with the `dark` class on `<html>`.\n\n```html\n<div\n  class=\"leaf-bg-white leaf-dark-bg-gray-900 leaf-text-black leaf-dark-text-white\"\n>\n  Adapts to system theme automatically\n</div>\n```\n\n```js\n// Manual toggle\ndocument.documentElement.classList.toggle(\"dark\");\n```\n\n---\n\n## 📱 Responsive Breakpoints\n\n```\nleaf-sm-*   → min-width: 640px\nleaf-md-*   → min-width: 768px\nleaf-lg-*   → min-width: 1024px\nleaf-xl-*   → min-width: 1280px\nleaf-2xl-*  → min-width: 1536px\n```\n\n```html\n<!-- Responsive text size -->\n<p class=\"leaf-text-sm leaf-md-text-xl leaf-lg-text-3xl\">Responsive text</p>\n\n<!-- Responsive layout -->\n<div class=\"leaf-flex leaf-flex-col leaf-md-flex-row leaf-gap-4\">\n  Stacked on mobile, row on tablet+\n</div>\n\n<!-- Responsive grid -->\n<div class=\"leaf-grid leaf-grid-cols-1 leaf-md-grid-cols-2 leaf-lg-grid-cols-4\">\n  ...\n</div>\n```\n\n---\n\n## 🎯 Pseudo-classes\n\n```html\n<!-- Hover -->\n<button class=\"leaf-bg-blue leaf-hover-bg-dark-blue leaf-text-white\">\n  Hover me\n</button>\n\n<!-- Focus -->\n<input class=\"leaf-border leaf-focus-border-primary\" placeholder=\"Focus me\" />\n\n<!-- Active -->\n<button class=\"leaf-bg-green leaf-active-bg-dark-green\">Hold to click</button>\n\n<!-- Combined with responsive -->\n<button class=\"leaf-bg-blue leaf-md-hover-bg-dark-blue\">\n  Hover only on md+\n</button>\n```\n\nSupported: `hover` · `focus` · `active` · `disabled` · `visited` · `checked` · `first-child` · `last-child` · `focus-within` · `focus-visible`\n\n---\n\n## 🔢 Arbitrary Values\n\nPass any CSS value directly using bracket syntax:\n\n```html\n<div class=\"leaf-p-[30px]\">custom padding</div>\n<div class=\"leaf-bg-[#ff6b6b]\">custom hex color</div>\n<div class=\"leaf-text-[#9333ea]\">custom text color</div>\n<div class=\"leaf-w-[320px]\">fixed width</div>\n<div class=\"leaf-w-[calc(100%-40px)]\">calc width</div>\n<div class=\"leaf-h-[50vh]\">viewport height</div>\n```\n\n---\n\n## ⚙️ configure()\n\nExtend the default palette with your own design tokens. Fully optional — defaults work out of the box without any configuration.\n\n```html\n<!-- Set BEFORE loading leaf.min.js -->\n<script>\n  window.__leafConfig = {\n    colors: {\n      primary: \"#6366f1\",\n      \"primary-dark\": \"#4f46e5\",\n      \"primary-light\": \"#a5b4fc\",\n      secondary: \"#8b5cf6\",\n      brand: \"#ff6b6b\",\n      success: \"#10b981\",\n      warning: \"#f59e0b\",\n      danger: \"#ef4444\",\n    },\n    extend: {\n      spacing: { 13: \"52px\", 15: \"60px\", 18: \"72px\" },\n      fontSizes: { hero: \"72px\", tiny: \"10px\" },\n    },\n  };\n</script>\n<script src=\"https://cdn.jsdelivr.net/npm/@chandan632/leaf-css/dist/leaf.min.js\"></script>\n```\n\nNow use your tokens as classes anywhere on the page:\n\n```html\n<div class=\"leaf-bg-primary leaf-hover-bg-primary-dark leaf-text-white\">\n  Uses your custom primary color\n</div>\n<p class=\"leaf-text-hero leaf-font-extrabold leaf-text-primary\">\n  Uses your custom font size\n</p>\n```\n\n| configure() option | What it does                                      |\n| ------------------ | ------------------------------------------------- |\n| `colors`           | Adds new color names to the palette               |\n| `extend.colors`    | Adds colors without replacing built-ins           |\n| `extend.spacing`   | Adds custom spacing keys e.g. `leaf-p-13`         |\n| `extend.fontSizes` | Adds custom font size names e.g. `leaf-text-hero` |\n| `spacing.base`     | Changes 1 unit from 4px to any value              |\n| `debug`            | Logs every class resolution to console            |\n\n---\n\n## 🛠️ How It Works\n\n1. You add `leaf-*` classes to any HTML element\n2. leaf-css scans the DOM on page load\n3. It parses each class name and resolves it to a CSS rule\n4. Rules are injected into a `<style id=\"leaf-css-engine\">` tag in `<head>`\n5. A `MutationObserver` watches for dynamically added elements — works with React, Vue, and any dynamic content\n\n---\n\n## 📦 Package Info\n\n|             |                                                                                |\n| ----------- | ------------------------------------------------------------------------------ |\n| **npm**     | [@chandan632/leaf-css](https://www.npmjs.com/package/@chandan632/leaf-css)     |\n| **CDN**     | [jsDelivr](https://cdn.jsdelivr.net/npm/@chandan632/leaf-css/dist/leaf.min.js) |\n| **Demo**    | [chandan632.github.io/leaf-css](https://chandan632.github.io/leaf-css/)        |\n| **License** | MIT                                                                            |\n\n---\n\n## 📄 License\n\nMIT © [chandan632](https://github.com/chandan632)\n","readmeFilename":"README.md"}