{"_id":"@aruidev/md-juice","_rev":"13-9f4bd9dee1c4fcc22484f64e623a6201","name":"@aruidev/md-juice","dist-tags":{"latest":"1.0.0"},"versions":{"0.3.1":{"name":"@aruidev/md-juice","version":"0.3.1","keywords":["markdown","css","theme","styles"],"author":{"name":"aruidev"},"license":"MIT","_id":"@aruidev/md-juice@0.3.1","maintainers":[{"name":"aruidev","email":"echo.aruidev@gmail.com"}],"homepage":"https://github.com/aruidev/md-juice#readme","bugs":{"url":"https://github.com/aruidev/md-juice/issues"},"dist":{"shasum":"a61f34e45b78f72a9aed0e776ccf2d92da57b274","tarball":"https://registry.npmjs.org/@aruidev/md-juice/-/md-juice-0.3.1.tgz","fileCount":7,"integrity":"sha512-+T71CXsZ6fIHvmvqVAzj3xLI2iD4SEMNvLaVq7BFrILtgJYAcwfmBoGH/rEuQlHhBYfMUV1n700BxRk3otl+wQ==","signatures":[{"sig":"MEUCIQCs+VX/P/NB99ZhesFIHjl9Hj02SK8cAAHh2BOLBaKc/QIgD/xoeUX0LKoN9XHeZFqWFwsbtr5qt2Xx4tZoNUUSoYE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":33107},"main":"index.cjs","style":"md-juice.css","unpkg":"md-juice.css","module":"index.js","engines":{"node":">=14"},"exports":{".":{"style":"./md-juice.css","import":"./index.js","default":"./index.js","require":"./index.cjs"},"./md-juice.css":"./md-juice.css"},"gitHead":"a13877f813ef1d1ed9a26da783aba3a843bdf82f","scripts":{"test":"echo \"No tests\" && exit 0","build":"echo \"No build step\"","prepare":"npm run build","prepublishOnly":"node -e \"console.log('Ensure CSS is built if needed')\""},"_npmUser":{"name":"aruidev","email":"echo.aruidev@gmail.com"},"repository":{"url":"git+https://github.com/aruidev/md-juice.git","type":"git"},"_npmVersion":"11.5.1","description":"Lightweight, tokenized CSS stylesheet for styling Markdown HTML output","directories":{},"sideEffects":["*.css"],"_nodeVersion":"22.13.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/md-juice_0.3.1_1757359366475_0.7903754138222867","host":"s3://npm-registry-packages-npm-production"},"deprecated":"This package has moved to 'md-juice'"},"0.3.2":{"name":"@aruidev/md-juice","version":"0.3.2","keywords":["markdown","css","theme","styles"],"author":{"name":"aruidev"},"license":"MIT","_id":"@aruidev/md-juice@0.3.2","maintainers":[{"name":"aruidev","email":"echo.aruidev@gmail.com"}],"homepage":"https://github.com/aruidev/md-juice#readme","bugs":{"url":"https://github.com/aruidev/md-juice/issues"},"dist":{"shasum":"7039716aaac566e27b3021ede2896a4080f9ad2f","tarball":"https://registry.npmjs.org/@aruidev/md-juice/-/md-juice-0.3.2.tgz","fileCount":7,"integrity":"sha512-QH04sBljwgHTgp+EC9QN6WIwN8ETDTiXfRHzg42zqL3ASta/yPFI2vyRO7Gz+umNiPrg55t9iGL7t4aorbuFIQ==","signatures":[{"sig":"MEUCIBRDu/shmQHSdMQ6obWSPNLTxQZywt8nKMAsKoqrNPrwAiEAk0fkD85hoYRuai0hEA1ZefxCYrIvRfYNLBzfYEUscf8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":33651},"main":"index.cjs","style":"md-juice.css","unpkg":"md-juice.css","module":"index.js","engines":{"node":">=14"},"exports":{".":{"style":"./md-juice.css","import":"./index.js","default":"./index.js","require":"./index.cjs"},"./md-juice.css":"./md-juice.css"},"gitHead":"7abb95867441f190cede1d4f2615a4d23a584d2c","scripts":{"test":"echo \"No tests\" && exit 0","build":"echo \"No build step\"","prepare":"npm run build","prepublishOnly":"node -e \"console.log('Ensure CSS is built if needed')\""},"_npmUser":{"name":"aruidev","email":"echo.aruidev@gmail.com"},"repository":{"url":"git+https://github.com/aruidev/md-juice.git","type":"git"},"_npmVersion":"11.4.2","description":"Lightweight, tokenized CSS stylesheet for styling Markdown HTML output","directories":{},"sideEffects":["*.css"],"_nodeVersion":"22.16.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/md-juice_0.3.2_1757556746878_0.48848412043170386","host":"s3://npm-registry-packages-npm-production"},"deprecated":"This package has moved to 'md-juice'"},"0.3.3":{"name":"@aruidev/md-juice","version":"0.3.3","keywords":["markdown","css","theme","styles"],"author":{"name":"aruidev"},"license":"MIT","_id":"@aruidev/md-juice@0.3.3","maintainers":[{"name":"aruidev","email":"echo.aruidev@gmail.com"}],"homepage":"https://github.com/aruidev/md-juice#readme","bugs":{"url":"https://github.com/aruidev/md-juice/issues"},"dist":{"shasum":"affc3c0a5c76642348080df52c2c51ab03ca2a15","tarball":"https://registry.npmjs.org/@aruidev/md-juice/-/md-juice-0.3.3.tgz","fileCount":7,"integrity":"sha512-yiA96f2BWxaJDdPNUwJ6EJnF2a27x8gfKfdeD4G5ikU+cha0Iha9iqt19LszSlt4ODKQtPkHGaKE8jEdx0L8AQ==","signatures":[{"sig":"MEYCIQCb82Kil+NftJ0KUhHsLq7GMdCoQRQNxy94OaQ0FQLdnQIhANj8dHlywhjUCn1vf1TuCvZAXAqmgtLGU39ooqYkE2wa","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":33838},"main":"index.cjs","style":"md-juice.css","unpkg":"md-juice.css","module":"index.js","engines":{"node":">=14"},"exports":{".":{"style":"./md-juice.css","import":"./index.js","default":"./index.js","require":"./index.cjs"},"./md-juice.css":"./md-juice.css"},"gitHead":"2607dcdd9fd5432b9aa90351269f7f67586d2ae9","scripts":{"test":"echo \"No tests\" && exit 0","build":"echo \"No build step\"","prepare":"npm run build","prepublishOnly":"node -e \"console.log('Ensure CSS is built if needed')\""},"_npmUser":{"name":"aruidev","email":"echo.aruidev@gmail.com"},"repository":{"url":"git+https://github.com/aruidev/md-juice.git","type":"git"},"_npmVersion":"11.4.2","description":"Lightweight, tokenized CSS stylesheet for styling Markdown HTML output","directories":{},"sideEffects":["*.css"],"_nodeVersion":"22.16.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/md-juice_0.3.3_1758205796181_0.1820121678023261","host":"s3://npm-registry-packages-npm-production"},"deprecated":"This package has moved to 'md-juice'"},"1.0.0":{"name":"@aruidev/md-juice","version":"1.0.0","keywords":["markdown","css","theme","styles"],"author":{"name":"aruidev"},"license":"MIT","_id":"@aruidev/md-juice@1.0.0","maintainers":[{"name":"aruidev","email":"echo.aruidev@gmail.com"}],"homepage":"https://github.com/aruidev/md-juice#readme","bugs":{"url":"https://github.com/aruidev/md-juice/issues"},"dist":{"shasum":"6925e3ed98c235aede9b0b6e1fe2e6bcf56a9e9f","tarball":"https://registry.npmjs.org/@aruidev/md-juice/-/md-juice-1.0.0.tgz","fileCount":7,"integrity":"sha512-MXp1eZAl6jPlEreOMA322y9vCMjSFfwmnEeMKKhhat4hrcJ891aWiPaSzI22TG/pueQXSuLdc7AAgCMHjuiWPw==","signatures":[{"sig":"MEUCICfhw1954Tb2pgIC1aQE8rWLlMMDaQ/l9iI2grwX2tH9AiEAhnzEMM/Dcm3fyHXxCKb3p+aGHm2h+Y0mtrf70FobwsY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":30491},"main":"index.cjs","style":"md-juice.css","unpkg":"md-juice.css","module":"index.js","engines":{"node":">=14"},"exports":{".":{"style":"./md-juice.css","import":"./index.js","default":"./index.js","require":"./index.cjs"},"./md-juice.css":"./md-juice.css"},"gitHead":"b9d98fff4daf2048076d2009efe73e4bd4894ff3","scripts":{"test":"echo \"No tests\" && exit 0","build":"echo \"No build step\"","prepare":"npm run build","prepublishOnly":"node -e \"console.log('Ensure CSS is built if needed')\""},"_npmUser":{"name":"aruidev","email":"echo.aruidev@gmail.com"},"repository":{"url":"git+https://github.com/aruidev/md-juice.git","type":"git"},"_npmVersion":"11.4.2","description":"Lightweight, customizable CSS stylesheet for styling Markdown HTML output","directories":{},"sideEffects":["*.css"],"_nodeVersion":"22.16.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/md-juice_1.0.0_1763469703251_0.8238531877247277","host":"s3://npm-registry-packages-npm-production"},"deprecated":"This package has moved to 'md-juice'"}},"time":{"created":"2025-09-03T09:16:21.562Z","modified":"2026-07-14T16:04:58.996Z","0.1.0":"2025-09-03T09:16:21.887Z","0.1.1":"2025-09-03T09:27:08.416Z","0.2.0":"2025-09-08T14:54:14.433Z","0.3.0":"2025-09-08T18:35:48.765Z","0.3.1":"2025-09-08T19:22:46.666Z","0.3.2":"2025-09-11T02:12:27.077Z","0.3.3":"2025-09-18T14:29:56.376Z","1.0.0":"2025-11-18T12:41:43.428Z"},"bugs":{"url":"https://github.com/aruidev/md-juice/issues"},"author":{"name":"aruidev"},"license":"MIT","homepage":"https://github.com/aruidev/md-juice#readme","keywords":["markdown","css","theme","styles"],"repository":{"url":"git+https://github.com/aruidev/md-juice.git","type":"git"},"description":"Lightweight, customizable CSS stylesheet for styling Markdown HTML output","maintainers":[{"name":"aruidev","email":"echo.aruidev@gmail.com"}],"readme":"# MD-Juice\r\n\r\n## Overview\r\n\r\n**A drop-in CSS theme for rendered Markdown HTML**.  \r\nWorks with any framework, any renderer, or plain HTML. Two layers of customization let you theme quickly, fine-tune individual elements, or simply keep the default GitHub-like look.\r\n\r\n<table>\r\n  <tr>\r\n    <td><img alt=\"Captura de pantalla 2025-09-18 162047\" src=\"https://github.com/user-attachments/assets/7a4a6bdf-eb28-411a-b657-ddb86a91f75d\" alt=\"md-juice demo (light)\" width=400 />\r\n\r\n</td>\r\n    <td><img alt=\"Captura de pantalla 2025-09-18 162102\" src=\"https://github.com/user-attachments/assets/b2b7a6e1-fc14-4906-8e1f-7aece68d3e34\" alt=\"md-juice demo (dark)\" width=400 />\r\n\r\n</td>\r\n  </tr>\r\n</table>\r\n\r\n## Table of Contents\r\n\r\n- [Why md-juice?](#why-md-juice)\r\n- [Installation](#installation)\r\n- [Basic Usage](#basic-usage)\r\n- [Theming](#theming)\r\n- [Transitions](#transitions)\r\n- [Tailwind Compatibility](#tailwind-compatibility)\r\n- [Syntax Highlighting](#syntax-highlighting)\r\n\r\n\r\n## Why MD-Juice?\r\n\r\nQuickly style Markdown HTML with **conflict-free, framework-agnostic CSS**. \r\n\r\n**Use cases:** Docs, blogs, wikis, notes apps, README previews, static sites  \r\n**Key benefits:** Fast theming, framework-agnostic, conflict-free styling  \r\n**Features:** GitHub-like default style, zero JS, built-in light/dark themes\r\n\r\n## Getting Started\r\n\r\n### Installation\r\n\r\nTo get started, install MD-Juice:  \r\n\r\n```bash\r\nnpm install @aruidev/md-juice\r\n```\r\n\r\n### Basic setup\r\n\r\n#### Import Styles  \r\nImport the MD-Juice CSS to your global styles.\r\n\r\n```css\r\n@import '@aruidev/md-juice';\r\n```\r\n\r\n### Basic usage\r\n\r\n#### Quick example  \r\n\r\nThese high-level tokens control the overall look and feel:\r\n\r\n```css\r\n.md-juice {\r\n  --juice-color-bg: #fefefe;\r\n  --juice-color-text: #2d2a3e;\r\n}\r\n```\r\n\r\n### Dark Mode Support  \r\nAdd dark mode variants in the same CSS file:  \r\n\r\n```css\r\n.md-juice[data-theme=\"dark\"] {\r\n  --juice-color-bg: #1a1625;\r\n  --juice-color-text: #e4e2f0;\r\n}\r\n```  \r\n\r\n## Theming\r\n\r\n### Layer 1 – Fast tokens (`--juice-*`)\r\n\r\nThese high-level tokens control the overall look and feel.  \r\nSet these to theme quickly.\r\n\r\n| Token | Light default | Dark default | Role |\r\n|-------|---------------|--------------|------|\r\n| `--juice-color-bg` | `#ffffff` | `#0d1117` | Base background |\r\n| `--juice-color-bg-alt` | `#f6f8fa` | `#010409` | Secondary surface (tables, panels) |\r\n| `--juice-color-text` | `#1f2328` | `#c9d1d9` | Primary text |\r\n| `--juice-color-text-secondary` | `#59636e` | `#8b949e` | Muted text |\r\n| `--juice-color-border` | `#d1d9e0` | `rgba(110,118,129,0.40)` | Borders / rules |\r\n| `--juice-color-interactive` | `#0969da` | `#58a6ff` | Links & accent base |\r\n| `--juice-color-accent` | `var(--juice-color-interactive)` | `var(--juice-color-interactive)` | Focus / accent alias |\r\n| `--juice-color-surface-code` | `var(--juice-color-bg-alt)` | `var(--juice-color-bg-alt)` | Code blocks & inline code |\r\n\r\n#### Typography & layout primitives\r\n\r\n| Token | Default | Maps to granular | Purpose |\r\n|------|---------|------------------|---------|\r\n| `--juice-font-family-base` | system stack | `--mdj-font-family` | Base text font stack |\r\n| `--juice-font-family-monospace` | monospace stack | `--mdj-monospace` | Code / monospace font stack |\r\n| `--juice-font-size-base` | `16px` | `--mdj-font-size` | Root font size (affects rem) |\r\n| `--juice-line-height-base` | `1.5` | `--mdj-line-height` | Global line height |\r\n| `--juice-radius-base` | `6px` | `--mdj-radius` | Shared corner radius (code, kbd, etc.) |\r\n| `--juice-transition` | `150ms` | `--mdj-transition` | Theme transition duration |\r\n| `--juice-transition-timing` | `cubic-bezier(0.4, 0, 0.2, 1)` | `--mdj-transition-timing` | Theme transition timing |\r\n\r\n---\r\n\r\n### Layer 2 – Granular tokens (`--mdj-*`)\r\n\r\nOverride **only** when a specific surface must differ from the fast mapping. \r\n\r\n| Token | Default (maps from fast layer) | Description |\r\n|-------|--------------------------------|-------------|\r\n| `--mdj-background-color` | `--juice-color-bg` | Page / main background |\r\n| `--mdj-background-secondary-color` | `--juice-color-bg-alt` | Alt surface |\r\n| `--mdj-text-primary-color` | `--juice-color-text` | Main text |\r\n| `--mdj-text-secondary-color` | `--juice-color-text-secondary` | Muted text |\r\n| `--mdj-border-color` | `--juice-color-border` | Borders & dividers |\r\n| `--mdj-link-color` | `--juice-color-interactive` | Links |\r\n| `--mdj-accent-color` | `--juice-color-accent` | Accent & focus |\r\n| `--mdj-code-bg` | `--juice-color-surface-code` | Code block / inline background |\r\n| `--mdj-kbd-bg` | `--juice-color-surface-code` | `<kbd>` background |\r\n| `--mdj-kbd-border` | `--juice-color-border` | `<kbd>` border |\r\n| `--mdj-mark-bg` | `--juice-color-bg-alt` | `<mark>` highlight |\r\n| `--mdj-table-th-bg` | `--juice-color-bg-alt` | Table header |\r\n| `--mdj-table-tr-bg` | `--juice-color-bg` | Table rows |\r\n| `--mdj-font-family` | system stack | Base font |\r\n| `--mdj-monospace` | monospace stack | Code font |\r\n| `--mdj-font-size` | `16px` | Root font size |\r\n| `--mdj-line-height` | `1.5` | Base line height |\r\n| `--mdj-radius` | `6px` | Radius (pre/code/kbd) |\r\n| `--mdj-hr-height` | `1px` | Rule thickness |\r\n| `--mdj-focus-outline` | `2px solid var(--mdj-accent-color)` | Focus style |\r\n| `--mdj-muted-bg` | `transparent` | Reserved token |\r\n| `--mdj-transition` | `150ms` | Theme transition speed |\r\n| `--mdj-syntax-*` | fixed colors | Minimal syntax hues |\r\n\r\n### Transitions\r\n\r\nBy default MD-Juice uses Tailwind's default transition values (`150ms` + `cubic-bezier(0.4,0,0.2,1)`) so it visually blends into projects already using Tailwind.\r\n\r\nIf the rest of your app (e.g. layout, buttons) uses a different speed/easing and you notice a mismatch, just override after loading the stylesheet.\r\n\r\nSet `--juice-transition` and `--juice-transition-timing` to match your app:\r\n\r\n```css\r\n.md-juice { --juice-transition: 200ms; }\r\n.md-juice { --juice-transition-timing: ease-in-out; }\r\n```\r\n\r\n#### Disable transitions:\r\n\r\nYou can also disable transitions completely:\r\n\r\n```css\r\n.md-juice { --juice-transition: 0ms; }\r\n```\r\n\r\n### Tailwind compatibility\r\n\r\n- Works side-by-side with Tailwind.  \r\n- MD-Juice styles only the markdown body inside a .md-juice scope.  \r\n- Load it after Tailwind if you want MD-Juice to take precedence for Markdown.  \r\n\r\n### Syntax highlighting\r\n\r\n- MD-Juice provides only minimal syntax tokens.\r\n- For full dynamic language highlighting, use a syntax highlighter alongside MD-Juice.\r\n- You can still override individual `--mdj-syntax-*` for custom hues.\r\n\r\n---\r\n\r\nEnjoy rapid theming. Issues & PRs welcome.\r\n\r\n\r\n","readmeFilename":"readme.md"}