{"_id":"@ash2k5/cinematic-ds","_rev":"2-9cb012004b2fb7e06da24dcc394c9fb1","name":"@ash2k5/cinematic-ds","dist-tags":{"latest":"0.2.0"},"versions":{"0.2.0":{"name":"@ash2k5/cinematic-ds","version":"0.2.0","license":"MIT","_id":"@ash2k5/cinematic-ds@0.2.0","maintainers":[{"name":"ash2k5","email":"ashwinsit98@gmail.com"}],"homepage":"https://github.com/ash2k5/design-system#readme","bugs":{"url":"https://github.com/ash2k5/design-system/issues"},"dist":{"shasum":"9f59aee78cb93f73ec25958666227f22a6d13d50","tarball":"https://registry.npmjs.org/@ash2k5/cinematic-ds/-/cinematic-ds-0.2.0.tgz","fileCount":13,"integrity":"sha512-L5VmfoGYf18Kum6tSycbvs0oCmEBqYhYTRUkMbGsU35Tb/6b5v6mYmFs84UweP9vX4U1YYCZsrxfGfUXW77tVQ==","signatures":[{"sig":"MEQCIARx12g2w5+uYPv1uEoHSN7LkLmGERBhhKuQJb8eg/n7AiBVOVa9xWxIjEMugb52a8m+OP4JL/apWr1o3eMJh/kB/Q==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":77503},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./fonts.css":"./dist/fonts.css","./preset.css":"./dist/preset.css","./tokens.css":"./dist/tokens.css","./recipes.css":"./dist/recipes.css","./theme-toggle.js":"./dist/theme-toggle.js"},"gitHead":"ef212004ad7566e3dd3867218394b0576909d4db","scripts":{"dev":"npm --workspace styleguide run dev","build":"npm run build:tokens && npm run build:lib","build:lib":"tsup && node scripts/add-use-client.mjs","styleguide":"npm --workspace styleguide run dev","build:tokens":"node scripts/build-tokens.mjs","prepublishOnly":"npm run build","styleguide:build":"npm run build && npm --workspace styleguide run build","styleguide:start":"npm --workspace styleguide run start"},"_npmUser":{"name":"ash2k5","email":"ashwinsit98@gmail.com"},"repository":{"url":"git+https://github.com/ash2k5/design-system.git","type":"git"},"workspaces":["styleguide"],"_npmVersion":"11.13.0","description":"Cinematic Editorial design system: tokens, theming, fonts, and React components.","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"24.16.0","dependencies":{"clsx":"^2.1.1","cmdk":"^1.1.1","lucide-react":"^0.469.0","tailwind-merge":"^3.0.1","@radix-ui/react-slot":"^1.1.2","@radix-ui/react-tabs":"^1.1.3","@radix-ui/react-label":"^2.1.2","@radix-ui/react-dialog":"^1.1.6","@radix-ui/react-select":"^2.1.6","@radix-ui/react-popover":"^1.1.6","@radix-ui/react-tooltip":"^1.1.8","class-variance-authority":"^0.7.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.3.5","react":"^19.0.0","react-dom":"^19.0.0","typescript":"^5.7.2","@types/react":"^19.0.0","@types/react-dom":"^19.0.0"},"peerDependencies":{"react":">=18","react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/cinematic-ds_0.2.0_1781489094682_0.23987240175800761","host":"s3://npm-registry-packages-npm-production"},"deprecated":"renamed to @ash2k5/ui"}},"time":{"created":"2026-06-15T02:04:54.477Z","modified":"2026-06-17T23:47:08.528Z","0.2.0":"2026-06-15T02:04:54.828Z"},"bugs":{"url":"https://github.com/ash2k5/design-system/issues"},"license":"MIT","homepage":"https://github.com/ash2k5/design-system#readme","repository":{"url":"git+https://github.com/ash2k5/design-system.git","type":"git"},"description":"Cinematic Editorial design system: tokens, theming, fonts, and React components.","maintainers":[{"name":"ash2k5","email":"ashwinsit98@gmail.com"}],"readme":"# @ash2k5/cinematic-ds\r\n\r\nCinematic Editorial design system — the single source of truth for tokens, theming, fonts, and\r\nReact components. Warm gallery-white + near-black themes, Bodoni Moda paired with Inter, sharp 0px\r\nglassmorphism, aurora-gradient + grain atmosphere (no photography).\r\n\r\nCanonical token values live in `tokens/tokens.mjs` and are derived from the reference spec in\r\n`~/repos/reference/Design system/`. Run `npm run build` to regenerate the `dist/` CSS after editing.\r\n\r\n## Install\r\n\r\n```bash\r\nnpm install @ash2k5/cinematic-ds\r\n```\r\n\r\nPublished to the public npm registry. Used by the [Book ML](https://github.com/ash2k5/book-ml-recommender)\r\nand [CampusPathFinder](https://github.com/ash2k5/UC_CampusPathFinder) frontends.\r\n\r\n## What ships\r\n\r\n| File                      | Purpose                                                                                        |\r\n| ------------------------- | ---------------------------------------------------------------------------------------------- |\r\n| `dist/tokens.css`         | CSS variables: `:root` (light) + `[data-theme=\"dark\"]` (dark). The base layer.                 |\r\n| `dist/preset.css`         | Tailwind v4 `@theme` mapping (imports tokens.css). For Next/Tailwind apps.                     |\r\n| `dist/fonts.css`          | Google Fonts for the base pair (Bodoni Moda + Inter).                                          |\r\n| `dist/recipes.css`        | Framework-agnostic classes: type scale, glass, aurora/grain, grid, primitives, a11y fallbacks. |\r\n| `dist/theme-toggle.js`    | Theme control (`initTheme`, `toggleTheme`, `THEME_INIT_SNIPPET`).                              |\r\n| `dist/index.js` + `.d.ts` | React component library (ESM, `\"use client\"`). Radix + CVA, typed.                             |\r\n\r\n## Components\r\n\r\nReact components built on Radix primitives + CVA, themed to the system, every state in both themes:\r\n\r\n- **Primitives:** `Button`, `Input`, `Textarea`, `Label`, `Badge`, `Card`, `ThemeToggle`.\r\n- **Composite (Radix):** `Select`, `Combobox`, `Dialog`, `Popover`, `Tooltip`, `Tabs`, `List`, `Metric` (+ `Sparkline`).\r\n- **Layout / nav:** `AuroraBackground`, `Container`, `Grid`, `Masthead`, `Sidebar`.\r\n- **Theme helpers:** `useTheme`, `getTheme`, `setTheme`, `themeInitScript`.\r\n\r\n```tsx\r\nimport { Button, Card, ThemeToggle } from \"@ash2k5/cinematic-ds\";\r\n```\r\n\r\nFor Tailwind to generate the utilities the components use, add the package to your CSS sources:\r\n\r\n```css\r\n@source \"../node_modules/@ash2k5/cinematic-ds/dist\";\r\n```\r\n\r\nThe styleguide (`styleguide/`, a Next.js app) renders every component in both themes and is the visual\r\nsource of truth.\r\n\r\n## Consume per stack\r\n\r\n**Next.js + Tailwind v4** (`app/globals.css`):\r\n\r\n```css\r\n@import \"tailwindcss\";\r\n@import \"@ash2k5/cinematic-ds/preset.css\"; /* tokens + Tailwind @theme */\r\n@import \"@ash2k5/cinematic-ds/recipes.css\";\r\n@import \"./theme.css\"; /* this app's override layer */\r\n```\r\n\r\nThen `bg-surface text-on-surface font-display gap-section-gap` utilities resolve to the tokens and\r\nswap automatically with `data-theme`. Load fonts via `next/font` or import `fonts.css`.\r\n\r\n**Flask / FastAPI / any HTML**: link `fonts.css`, `tokens.css`, `recipes.css`, add `class=\"ds-root\"`\r\nto `<body>`, and inline `THEME_INIT_SNIPPET` in `<head>`.\r\n\r\n## Per-app identity (base + override)\r\n\r\nEach app keeps a small `theme.css` that re-declares only the tokens it wants to diverge on — imported\r\nafter the base, so the package stays the shared core and apps fine-tune without forking:\r\n\r\n```css\r\n:root {\r\n  --primary: #1a3a8f;\r\n  --font-display: \"Playfair Display\", serif;\r\n}\r\n[data-theme=\"dark\"] {\r\n  --primary: #aac4ff;\r\n}\r\n```\r\n\r\n## Theme toggle (no flash)\r\n\r\nInline `THEME_INIT_SNIPPET` in `<head>` before stylesheets; wire a button to `toggleTheme()`. Choice\r\npersists in `localStorage` (`ds-theme`); first visit follows `prefers-color-scheme`.\r\n\r\n## Develop\r\n\r\n```bash\r\nnpm install          # installs the package + the styleguide workspace\r\nnpm run build        # build tokens (dist/*.css) + the component library (dist/index.js)\r\nnpm run styleguide   # run the Next.js styleguide dev server\r\nnpm run styleguide:build  # build the library, then a production styleguide build\r\n```\r\n","readmeFilename":"README.md"}