{"_id":"@cujuju/solidjs-glass","name":"@cujuju/solidjs-glass","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@cujuju/solidjs-glass","version":"0.1.0","description":"Glassmorphism surface system for SolidJS — .glass-panel / .glass-menu classes, a runtime-tunable menu-tint engine, and the MenuTintSection settings panel.","type":"module","main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","solid":"./src/index.ts","import":"./dist/index.js"},"./glass.css":"./src/glass.css","./menu-tint.css":"./src/menu-tint.css"},"sideEffects":["**/*.css"],"license":"MIT","author":{"name":"Cujuju"},"repository":{"type":"git","url":"git+https://github.com/Cujuju/solidjs-toolkit.git","directory":"packages/glass"},"homepage":"https://github.com/Cujuju/solidjs-toolkit/tree/main/packages/glass","bugs":{"url":"https://github.com/Cujuju/solidjs-toolkit/issues"},"keywords":["solidjs","glassmorphism","glass","backdrop-filter","menu-tint","theme"],"peerDependencies":{"solid-js":">=1.7.0"},"devDependencies":{"@solidjs/testing-library":"^0.8.0","@testing-library/jest-dom":"^6.9.1","jsdom":"^24.0.0","vite-plugin-solid":"^2.11.12","vitest":"^3.2.4"},"publishConfig":{"access":"public"},"scripts":{"test":"vitest run","test:watch":"vitest","build":"vite build"},"_id":"@cujuju/solidjs-glass@0.1.0","_integrity":"sha512-rrHA+liODJl7jKwy/hm+x/ldvqEoJI+rHeOSA1fC0XlrZCv41lqEXCb5bHccuRz5DcTKOVQrSw8tpWF9pLbxLQ==","_resolved":"C:\\Users\\shawn\\AppData\\Local\\Temp\\74897fd923852434b4697d66d0a851dd\\cujuju-solidjs-glass-0.1.0.tgz","_from":"file:cujuju-solidjs-glass-0.1.0.tgz","_nodeVersion":"25.8.2","_npmVersion":"11.12.1","dist":{"integrity":"sha512-rrHA+liODJl7jKwy/hm+x/ldvqEoJI+rHeOSA1fC0XlrZCv41lqEXCb5bHccuRz5DcTKOVQrSw8tpWF9pLbxLQ==","shasum":"3537ea0dc443a5b011a388b57e25b725f6e2ad1b","tarball":"https://registry.npmjs.org/@cujuju/solidjs-glass/-/solidjs-glass-0.1.0.tgz","fileCount":15,"unpackedSize":125455,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIF7nTkrd86AR+fNSZjP/WccCzFv40w7Z71DdSKy5rDgKAiB7asGBsYJD1wSJeKh7a77GPv0FnofsaCEmjPPC0r3oqg=="}]},"_npmUser":{"name":"cujuju","email":"cujuju@pm.me"},"directories":{},"maintainers":[{"name":"cujuju","email":"cujuju@pm.me"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/solidjs-glass_0.1.0_1779002501993_0.8495778363389708"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-17T07:21:41.868Z","0.1.0":"2026-05-17T07:21:42.159Z","modified":"2026-05-17T07:21:42.529Z"},"maintainers":[{"name":"cujuju","email":"cujuju@pm.me"}],"description":"Glassmorphism surface system for SolidJS — .glass-panel / .glass-menu classes, a runtime-tunable menu-tint engine, and the MenuTintSection settings panel.","homepage":"https://github.com/Cujuju/solidjs-toolkit/tree/main/packages/glass","keywords":["solidjs","glassmorphism","glass","backdrop-filter","menu-tint","theme"],"repository":{"type":"git","url":"git+https://github.com/Cujuju/solidjs-toolkit.git","directory":"packages/glass"},"author":{"name":"Cujuju"},"bugs":{"url":"https://github.com/Cujuju/solidjs-toolkit/issues"},"license":"MIT","readme":"# @cujuju/solidjs-glass\n\nGlassmorphism surface system for SolidJS:\n\n- **`.glass-panel` / `.glass-menu`** — two global surface classes plus\n  the design tokens that drive them.\n- **menu-tint engine** — pure functions that read/write/apply five\n  user-tunable knobs to the smoked-glass menu tint.\n- **`MenuTintSection`** — a drop-in settings panel exposing the knobs as\n  sliders + named presets with a live preview.\n\n## Install\n\n```sh\npnpm add @cujuju/solidjs-glass\n```\n\n## Surface classes\n\nImport the stylesheet once, then apply the class:\n\n```ts\nimport '@cujuju/solidjs-glass/glass.css';\n```\n\n```tsx\n<div class=\"glass-panel\">translucent content surface</div>\n<div class=\"glass-menu\">smoked-glass menu surface</div>\n```\n\nOr from a CSS Module: `composes: glass-menu from global;`.\n\nImporting anything from the package entry (`@cujuju/solidjs-glass`)\nalso registers `glass.css` as a side effect.\n\n### Host tokens\n\nToken defaults ship in `@layer cujuju-defaults`, so a host theme's\nunlayered definitions override them. The glass classes read only two\nhost tokens — both have layered fallbacks, so the package renders\nstandalone:\n\n| Token | Fallback |\n|-------|----------|\n| `--color-surface` | `#16213e` |\n| `--color-border` | `rgba(255,255,255,0.1)` |\n\n## Menu-tint engine\n\n```ts\nimport {\n  bootstrapMenuTintFromStorage,\n  applyMenuTintKnobs,\n  type MenuTintKnobs,\n} from '@cujuju/solidjs-glass';\n\n// Before the SolidJS root renders, so the first paint has the tint:\nbootstrapMenuTintFromStorage();\n```\n\nAll storage functions accept an optional `storageKey` (default\n`solidjs-glass:menuTintKnobs`). Pass your own to namespace it or to\npreserve values already stored under a host-specific key.\n\n## MenuTintSection\n\n```tsx\nimport { MenuTintSection } from '@cujuju/solidjs-glass';\n\n<MenuTintSection />\n// or pin the storage key:\n<MenuTintSection storageKey=\"myapp:menuTintKnobs\" />\n```\n\n`MenuTintSection` is a settings panel for a **themed host**. Beyond the\ntwo glass host tokens above it expects the host to define a standard\ntheme-token set: `--color-text`, `--color-text-secondary`,\n`--color-text-muted`, `--color-text-on-overlay`, `--color-surface`,\n`--color-surface-raised`, `--color-surface-hover`, `--color-border`,\n`--color-primary`, `--color-primary-alpha-20`, `--font-size-xs`,\n`--font-size-sm`, `--font-size-base`, `--font-size-md`, `--radius-xs`,\n`--radius-md`, `--radius-btn`, `--radius-xl`, `--height-btn`,\n`--transition-speed-fast`. Slider geometry tokens (`--cujuju-mt-*`) have\nbuilt-in defaults.\n\nThe component side-effect-imports its own stylesheets (`glass.css` +\n`menu-tint.css`).\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-363baad588f5d43cd3a4c3b4965a2c3a"}