{"_id":"@belalwaheed/octagon-mist","name":"@belalwaheed/octagon-mist","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@belalwaheed/octagon-mist","version":"1.0.0","description":"Framework-agnostic design system with Filter Octagon (dark) and Minimal Mist (light) themes — OKLCH color ramps, semantic tokens, and 8 output formats","type":"module","main":"./css/tokens.css","style":"./css/tokens.css","bin":{"octagon-mist":"bin/cli.mjs"},"exports":{".":"./css/tokens.css","./css":"./css/tokens.css","./tailwind/v4":"./tailwind/theme.v4.css","./tailwind/v3":"./tailwind/tailwind.config.js","./scss":"./scss/_variables.scss","./tokens/primitives":"./tokens/primitives.json","./tokens/semantic":"./tokens/semantic.json","./style-dictionary":"./style-dictionary/tokens.style-dictionary.json","./figma":"./figma/figma-variables.json"},"scripts":{"generate":"node scripts/generate-colors.mjs","build":"node scripts/build-outputs.mjs","preview":"node scripts/build-preview.mjs","all":"node scripts/generate-colors.mjs && node scripts/build-outputs.mjs && node scripts/build-preview.mjs","prepublishOnly":"npm run all"},"repository":{"type":"git","url":"git+https://github.com/BelalWaheed/octagon-mist.git"},"homepage":"https://github.com/BelalWaheed/octagon-mist#readme","bugs":{"url":"https://github.com/BelalWaheed/octagon-mist/issues"},"keywords":["design-system","design-tokens","css-variables","dark-theme","light-theme","monokai","filter-octagon","oklch","tailwind","scss","style-dictionary","figma","color-system"],"author":{"name":"BelalWaheed"},"license":"MIT","gitHead":"de323e8d9223b66980ac4cee27a168e2d56a34f0","_id":"@belalwaheed/octagon-mist@1.0.0","_nodeVersion":"26.4.0","_npmVersion":"11.17.0","dist":{"integrity":"sha512-e2m2P1Wu94nE3ljEHEHQnEJpxgUo9VijdQSoPNL3Rjn3GPPAiPqzCheIa6kiYAkyYRGcfYrWJeHhGa9UDzwEDw==","shasum":"78c2fd34445ec8ef96cf4ca7e97ffad627c082a3","tarball":"https://registry.npmjs.org/@belalwaheed/octagon-mist/-/octagon-mist-1.0.0.tgz","fileCount":12,"unpackedSize":163018,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIEHwrsgkaG2E2Ggh7o7+thu6t8okow8NqIGk6irHIoSaAiEAjbScKbsV1xAvR6pX0prwCfKCLmBNFPqNdaeu+Ws7WS8="}]},"_npmUser":{"name":"belalwaheed","email":"belwaheed@gmail.com"},"directories":{},"maintainers":[{"name":"belalwaheed","email":"belwaheed@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/octagon-mist_1.0.0_1785194235195_0.49361985389085494"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-27T23:17:15.047Z","1.0.0":"2026-07-27T23:17:15.359Z","modified":"2026-07-27T23:17:15.563Z"},"maintainers":[{"name":"belalwaheed","email":"belwaheed@gmail.com"}],"description":"Framework-agnostic design system with Filter Octagon (dark) and Minimal Mist (light) themes — OKLCH color ramps, semantic tokens, and 8 output formats","homepage":"https://github.com/BelalWaheed/octagon-mist#readme","keywords":["design-system","design-tokens","css-variables","dark-theme","light-theme","monokai","filter-octagon","oklch","tailwind","scss","style-dictionary","figma","color-system"],"repository":{"type":"git","url":"git+https://github.com/BelalWaheed/octagon-mist.git"},"author":{"name":"BelalWaheed"},"bugs":{"url":"https://github.com/BelalWaheed/octagon-mist/issues"},"license":"MIT","readme":"# Octagon Mist — Filter Octagon / Minimal Mist Design System\n\nA framework-agnostic design system with two themes that share one identity:\n\n- **Dark — Filter Octagon** — warm, rich, built for long coding sessions, in the spirit of Monokai Pro's Filter Octagon.\n- **Light — Minimal Mist** — clean, soft-white, calm-gray, low visual noise.\n\nEverything is generated from one source of truth, so CSS, Tailwind v3/v4, SCSS, Style Dictionary, and Figma Variables all stay in sync.\n\n## Install\n\n```bash\nnpm install @belalwaheed/octagon-mist\n```\n\n## Quick start\n\n### CSS / Vite / Webpack / Next.js\n\n```js\nimport '@belalwaheed/octagon-mist/css';\n```\n\n### Tailwind v4\n\n```css\n@import \"@belalwaheed/octagon-mist/tailwind/v4\";\n```\n\n### Tailwind v3\n\n```js\n// tailwind.config.js\nconst octagonMist = require('@belalwaheed/octagon-mist/tailwind/v3');\nmodule.exports = { presets: [octagonMist] };\n```\n\n### SCSS\n\n```scss\n@import \"@belalwaheed/octagon-mist/scss\";\n```\n\n### HTML (no bundler)\n\n```html\n<link rel=\"stylesheet\" href=\"node_modules/@belalwaheed/octagon-mist/css/tokens.css\">\n```\n\n### Theme switching\n\n```html\n<html data-theme=\"dark\"><!-- or data-theme=\"light\" --></html>\n```\n\nToggle at runtime with one line of JavaScript:\n\n```js\ndocument.documentElement.dataset.theme = 'light'; // or 'dark'\n```\n\n## npx CLI\n\nCopy `tokens.css` directly into any project:\n\n```bash\nnpx @belalwaheed/octagon-mist init              # copies to ./src/styles/tokens.css\nnpx @belalwaheed/octagon-mist init ./public/css  # copies to a custom folder\n```\n\n## File map\n\n```\noctagon-mist/\n├── README.md\n├── package.json\n├── bin/\n│   └── cli.mjs                    ← npx CLI tool\n├── docs/                          ← full spec, read 00 → 11 in order\n│   ├── 00-philosophy.md\n│   ├── 01-color-system.md\n│   ├── 02-typography.md\n│   ├── 03-spacing-layout.md\n│   ├── 04-radius-shadow-elevation.md\n│   ├── 05-components.md\n│   ├── 06-icons-motion.md\n│   ├── 07-markdown-syntax-highlighting.md\n│   ├── 08-accessibility.md\n│   ├── 09-multi-format-tokens.md\n│   ├── 10-app-examples.md\n│   └── 11-extras.md\n├── scripts/                       ← build pipeline\n│   ├── generate-colors.mjs        ← edit seed colors here, then re-run\n│   ├── build-outputs.mjs          ← generates all output formats\n│   └── build-preview.mjs          ← generates preview gallery\n├── tokens/\n│   ├── primitives.json            ← every color ramp, hex/rgb/hsl/oklch × 50–950\n│   └── semantic.json              ← light + dark mapping\n├── css/\n│   └── tokens.css                 ← CSS custom properties (drop-in, any framework)\n├── tailwind/\n│   ├── theme.v4.css               ← Tailwind v4 (@theme, CSS-first)\n│   └── tailwind.config.js         ← Tailwind v3\n├── scss/\n│   └── _variables.scss\n├── style-dictionary/\n│   └── tokens.style-dictionary.json\n├── figma/\n│   └── figma-variables.json\n└── preview/\n    └── index.html                 ← interactive component gallery, both themes\n```\n\n## Development\n\nRebuild everything from the seed colors:\n\n```bash\nnpm run all        # generate → build → preview\n```\n\nOr run each step individually:\n\n```bash\nnpm run generate   # regenerate tokens/primitives.json from OKLCH seeds\nnpm run build      # generate CSS, Tailwind, SCSS, Style Dictionary, Figma outputs\nnpm run preview    # generate preview/index.html\n```\n\n## Where to start reading\n\nRead `docs/00-philosophy.md` first — it explains the three-tier token architecture (primitive → semantic → component). Then `docs/01-color-system.md` and `docs/05-components.md` cover the two things you'll touch most often.\n\n## About the palette\n\nThe dark theme's seed colors were measured from a real Monokai Pro Filter Octagon export, not approximated. One color (Sapphire, used for `info`) is synthesized since Filter Octagon's native palette doesn't include a blue. Full reasoning is in `docs/01-color-system.md`.\n\nContrast for every text/background and button pairing was verified against the WCAG formula — see `docs/08-accessibility.md` for measured ratios.\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-9ed20e241b59ffe9553595e381462db0"}