{"_id":"@digital-democracy-project/design-system","_rev":"3-6a7f44c7652a37db6953f3730935eaea","name":"@digital-democracy-project/design-system","dist-tags":{"latest":"0.3.0"},"versions":{"0.1.0":{"name":"@digital-democracy-project/design-system","version":"0.1.0","license":"UNLICENSED","_id":"@digital-democracy-project/design-system@0.1.0","maintainers":[{"name":"jkoul","email":"jeremy.koulish@digitaldemocracyproject.org"}],"homepage":"https://github.com/Digital-Democracy-Project/ddp-design-system#readme","bugs":{"url":"https://github.com/Digital-Democracy-Project/ddp-design-system/issues"},"dist":{"shasum":"aa29106063c4ce0777f8674d4e24790fe326a584","tarball":"https://registry.npmjs.org/@digital-democracy-project/design-system/-/design-system-0.1.0.tgz","fileCount":16,"integrity":"sha512-RxXcUklczMiA9n90Tf4tbKZjLq3Cpkdyni3nWSzA8+PhLe5vB4cFk4mi/l7Ux/mwHHy14HTvHDnSVlW0EeSSRw==","signatures":[{"sig":"MEUCIQCxkhRNeEAyJrqv+9y9E5oN9JDTUHo4gwH0K/arcoUKrgIgBGBvPdtIrf5BvpZp34pjVCajJyMMMr3XmqxAs67jJtM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":441690},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles":"./styles/index.scss","./styles.css":"./dist/style.css","./styles/tokens.css":"./styles/colors_and_type.css","./styles/tokens.json":"./styles/tokens.json"},"gitHead":"6b505a15e1d73adeae120239d7497d240a0be205","scripts":{"dev":"vite build --watch","build":"vite build","storybook":"storybook dev -p 6006","typecheck":"tsc --noEmit","build:check":"sass --no-source-map styles/index.scss /dev/null","build-storybook":"storybook build"},"_npmUser":{"name":"jkoul","email":"jeremy.koulish@digitaldemocracyproject.org"},"repository":{"url":"git+https://github.com/Digital-Democracy-Project/ddp-design-system.git","type":"git"},"_npmVersion":"11.4.2","description":"DDP design tokens, SCSS foundation, and React component library shared across Digital Democracy Project web products.","directories":{},"sideEffects":["*.css","*.scss"],"_nodeVersion":"24.3.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.77.0","vite":"^6.0.0","react":"^19.0.0","react-dom":"^19.0.0","storybook":"^9.0.0","typescript":"^5.6.0","@types/node":"^22.0.0","@types/react":"^19.0.0","vite-plugin-dts":"^4.3.0","@types/react-dom":"^19.0.0","vite-plugin-svgr":"^4.2.0","@vitejs/plugin-react":"^4.3.0","@storybook/react-vite":"^9.0.0"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design-system_0.1.0_1787013267812_0.7479447079756671","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@digital-democracy-project/design-system","version":"0.2.0","license":"UNLICENSED","_id":"@digital-democracy-project/design-system@0.2.0","maintainers":[{"name":"jkoul","email":"jeremy.koulish@digitaldemocracyproject.org"}],"homepage":"https://github.com/Digital-Democracy-Project/ddp-design-system#readme","bugs":{"url":"https://github.com/Digital-Democracy-Project/ddp-design-system/issues"},"dist":{"shasum":"344eec0ad84b829d6e8ebc3d65f900e90881fa1c","tarball":"https://registry.npmjs.org/@digital-democracy-project/design-system/-/design-system-0.2.0.tgz","fileCount":17,"integrity":"sha512-nz4sFTGiFrGR1kuFcibzSRJMDDSxGeNRaTBMhvs0ATPfAlz4xDyJRnjCyJNQJr4D9UA7RlEox2QRAAS+27h5iQ==","signatures":[{"sig":"MEUCIQDruJV50/gLx8mckzrePXyOVttHEzVJFYU6y3RDg6Mk9QIgYTIkWqFLU0vbTEiwS/KU7YhTS1IND2xxNRbmI72ok28=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":499660},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles":"./styles/index.scss","./styles.css":"./dist/style.css","./styles/tokens.css":"./styles/colors_and_type.css","./styles/tokens.json":"./styles/tokens.json"},"gitHead":"d54215fdff99082af93c71d44d3f384523512fc1","scripts":{"dev":"vite build --watch","build":"vite build","storybook":"storybook dev -p 6006","typecheck":"tsc --noEmit","build:check":"sass --no-source-map styles/index.scss /dev/null","build-storybook":"storybook build"},"_npmUser":{"name":"jkoul","email":"jeremy.koulish@digitaldemocracyproject.org"},"repository":{"url":"git+https://github.com/Digital-Democracy-Project/ddp-design-system.git","type":"git"},"_npmVersion":"11.4.2","description":"DDP design tokens, SCSS foundation, and React component library shared across Digital Democracy Project web products.","directories":{},"sideEffects":["*.css","*.scss"],"_nodeVersion":"24.3.0","dependencies":{"@floating-ui/react":"^0.27.20"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.77.0","vite":"^6.0.0","react":"^19.0.0","react-dom":"^19.0.0","storybook":"^9.0.0","typescript":"^5.6.0","@types/node":"^22.0.0","@types/react":"^19.0.0","vite-plugin-dts":"^4.3.0","@types/react-dom":"^19.0.0","vite-plugin-svgr":"^4.2.0","@vitejs/plugin-react":"^4.3.0","@storybook/react-vite":"^9.0.0"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design-system_0.2.0_1788289267442_0.6976294845436122","host":"s3://npm-registry-packages-npm-production"}},"0.3.0":{"_id":"@digital-democracy-project/design-system@0.3.0","bugs":{"url":"https://github.com/Digital-Democracy-Project/ddp-design-system/issues"},"dist":{"shasum":"4980d3595bc52601d7aeba9179045d91e539810c","tarball":"https://registry.npmjs.org/@digital-democracy-project/design-system/-/design-system-0.3.0.tgz","fileCount":18,"integrity":"sha512-2OT54Nco0u4HseKl4rLfY+i3zhL42bdV9F0VMVoF3c0dKnKjmpwuUh9Aub1e/0kytRH2iLlK6N0EZ1jTOYvPCQ==","signatures":[{"sig":"MEUCIQD3WcGo0QtbuV91gT55u0C5xeF8JTwMlCoHq2jUxaHQfwIgFYxEXqSKixQeFV5+qPVa+f9i9QJzFx7tWSbw6ajVG44=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDgdU2Tq+V3azkKaY6F6nVuLq3qCCy6xK7xPuAayhyMvgIgR7WWFs9lqf1FFC/57z0r8mFOaSDkUUPGB7uXsR2Q9aw="}],"unpackedSize":700344},"main":"./dist/index.cjs","name":"@digital-democracy-project/design-system","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles":"./styles/core/index.scss","./styles.css":"./dist/style.css","./styles/tokens.css":"./styles/colors_and_type.css","./styles/tokens.json":"./styles/tokens.json"},"gitHead":"fad1e5c373ac4ff8baf9f514af8269d893d8cc06","license":"UNLICENSED","scripts":{"dev":"vite build --watch","build":"vite build","storybook":"storybook dev -p 6006","typecheck":"tsc --noEmit","build:check":"sass --no-source-map styles/core/index.scss /dev/null","build-storybook":"storybook build"},"version":"0.3.0","_npmUser":{"name":"jkoul","email":"jeremy.koulish@digitaldemocracyproject.org"},"homepage":"https://github.com/Digital-Democracy-Project/ddp-design-system#readme","repository":{"url":"git+https://github.com/Digital-Democracy-Project/ddp-design-system.git","type":"git"},"_npmVersion":"11.4.2","description":"DDP design tokens, SCSS foundation, and React component library shared across Digital Democracy Project web products.","directories":{},"maintainers":[{"name":"jkoul","email":"jeremy.koulish@digitaldemocracyproject.org"}],"sideEffects":["*.css","*.scss"],"_nodeVersion":"24.3.0","dependencies":{"@floating-ui/react":"^0.27.20"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.77.0","vite":"^6.0.0","react":"^19.0.0","react-dom":"^19.0.0","storybook":"^9.0.0","typescript":"^5.6.0","@types/node":"^22.0.0","@types/react":"^19.0.0","vite-plugin-dts":"^4.3.0","@types/react-dom":"^19.0.0","vite-plugin-svgr":"^4.2.0","@vitejs/plugin-react":"^4.3.0","@storybook/react-vite":"^9.0.0"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/design-system_0.3.0_1789421181574_0.16630958589659905"}}},"time":{"created":"2026-08-18T00:34:27.699Z","modified":"2026-09-14T21:26:21.930Z","0.1.0":"2026-08-18T00:34:27.960Z","0.2.0":"2026-09-01T19:01:07.581Z","0.3.0":"2026-09-14T21:26:21.744Z"},"bugs":{"url":"https://github.com/Digital-Democracy-Project/ddp-design-system/issues"},"license":"UNLICENSED","homepage":"https://github.com/Digital-Democracy-Project/ddp-design-system#readme","repository":{"url":"git+https://github.com/Digital-Democracy-Project/ddp-design-system.git","type":"git"},"description":"DDP design tokens, SCSS foundation, and React component library shared across Digital Democracy Project web products.","maintainers":[{"name":"jkoul","email":"jeremy.koulish@digitaldemocracyproject.org"}],"readme":"# @digital-democracy-project/design-system\n\nDDP design tokens, SCSS foundation, and React component library shared across Digital Democracy Project web products.\n\n## Installation\n\n```bash\nnpm install @digital-democracy-project/design-system\n```\n\n## Usage\n\n```tsx\nimport { Button, Badge, Icon } from '@digital-democracy-project/design-system';\nimport '@digital-democracy-project/design-system/styles.css';\n\n<Button variant=\"primary\">Save</Button>\n<Badge tone=\"secondary\">New</Badge>\n<Icon name=\"check\" size=\"sm\" />\n```\n\nOne stylesheet import is all that's needed — `styles.css` ships both the token definitions (every `--ddp-*` custom property) and the compiled component CSS together, tokens first. In a Next.js App Router project, import it once in the root layout (global CSS can't be imported from nested pages). A token-only stylesheet is also available separately at `@digital-democracy-project/design-system/styles/tokens.css`, for non-component use.\n\nRaw Sass (tokens, mixins) is also available for consumers authoring their own components:\n\n```scss\n@use '@digital-democracy-project/design-system/styles' as *;\n.thing {\n  padding: space(3);\n  color: color('primary');\n}\n```\n\nSee each component's own README under `components/<Name>/` for its full prop reference.\n\n## Development roadmap\n\n_Temporary section — remove once the initial component library and consuming-app migration are far enough along that this reads as a finished package, not a work in progress._\n\n**Phase 1 — Core component library**\n\n- [x] Build Icon\n- [x] Build Button\n- [x] Build Badge/Pill\n- [x] Checkpoint: review Button + Badge together, lock in conventions\n- [x] Build IconButton (new, separate from Button — opinionated icon-only control)\n- [x] Build Text Input\n- [x] Build Checkbox\n- [x] Build ToggleButton (renamed from \"Toggle button/group\"; folds in an optional checkbox indicator, validated against `CheckboxItem`/`ToggleChip` in `ddp-scorecard-react` and the legislative-scorecard hi-fi mockup)\n- [x] Build MenuItem, Menu, DropdownMenu, Select (single-select only — see component READMEs for the multi-select deferral reasoning)\n- [x] Build SearchBar (composes TextInput + DropdownMenu + Menu; standalone mode for Select's own internal search field, combobox mode for suggestions)\n- [ ] Theming/visual refinements to `SearchBar` and `Select` — flagged during Storybook review, deliberately deferred to keep pace; not blocking\n- [x] Build Card (generic container — reprioritized ahead of ToggleSwitch, needed for upcoming page mockups)\n- [x] Build ClickableTile (single-element link/button surface, whole box including padding is the hit target — the answer to \"can the whole Card be a clickable link\")\n- [x] Build ToggleSwitch (the track-and-knob control, deliberately built last — reuses `Checkbox`'s real-input-driven structural pattern, not `ToggleButton`'s button-based one) — last v1 component done\n- [x] Introduce `SizeOptions` (shared `'sm' | 'md' | 'lg'` type in `components/shared/types.ts`), retrofitted into Button/Badge/Checkbox/Select/SearchBar/TextInput/ToggleButton/ToggleSwitch\n- [x] Eyebrow audit: added the missing `section-label` mixin/`.ddp .section-label` class (quieter field-label role `eyebrow` didn't cover) and the `SectionLabel` component; documented the `.ddp`-scoping requirement in `styles/README.md`\n- [ ] `SectionLabel`: allow the rendered element to be flexible (e.g. an `as`/polymorphic prop) — real usage will commonly want it as an actual `h*` tag, not always a `<span>`\n- [ ] Scope decision: `ddp-mapapp`-derived candidates (Accordion, Stat, Spinner, Slide-over, Drawer, Expandable text)\n\n**Phase 2 — Package/publish readiness**\n\n- [x] Claim npm scope\n- [x] `\"type\": \"module\"` in package.json\n- [x] First `npm publish` (`0.1.0`)\n- [x] Root README (this file)\n- [x] CSS distribution: merged into one stylesheet (tokens + components, tokens first)\n- [x] Delete Tier 4 legacy token aliases in `colors_and_type.css`\n- [ ] License field decision\n- [ ] Set up Changesets\n\n**Phase 3 — Keep the Claude Design project in sync** (parallel to Phase 1)\n\n- [x] Run `/design-sync` for current state (Icon, Button, Badge, tokens, fonts) — uploaded and verified\n- [ ] Re-sync after each new component lands\n- [ ] Retire superseded static previews as real components land\n- [ ] Decide fate of `ui_kits/*` and token-doc preview pages\n\n**Phase 4 — Migrate consuming apps**\n\n- [ ] `ddp-next`: replace Tailwind/ad hoc UI\n- [ ] `ddp-scorecard-react`: adapt at its own pace\n- [ ] `ddp-mapapp` → `ddp-next` page migration\n\n**Phase 5 — Deferred hygiene**\n\n- [ ] Tests (Vitest/RTL/axe)\n- [ ] Visual regression\n- [ ] CI\n- [ ] Lint/format tooling\n- [x] Convert component CSS from CSS Modules to manual BEM naming (`ddp-` prefix)\n- [ ] `stylelint` rule enforcing the `ddp-` prefix (pairs with lint/format tooling above)\n","readmeFilename":"README.md"}