{"_id":"@canvas-homes/tokens","_rev":"3-f0b7aef019438f3afdbe776580990438","name":"@canvas-homes/tokens","dist-tags":{"latest":"0.3.0"},"versions":{"0.1.0":{"name":"@canvas-homes/tokens","version":"0.1.0","license":"UNLICENSED","_id":"@canvas-homes/tokens@0.1.0","maintainers":[{"name":"ankittrues","email":"ankit@truestate.in"}],"dist":{"shasum":"aa13987afc12bc25ffbe4da442b1bcc20520d1b3","tarball":"https://registry.npmjs.org/@canvas-homes/tokens/-/tokens-0.1.0.tgz","fileCount":18,"integrity":"sha512-oMTPoLegcSBsJudAkNVbQoKEvgX/26Whd6OEITzlw2NIt9BN1b79l4+orgOX4qdh4uRQZ4tbEvh0MwDISK5ofA==","signatures":[{"sig":"MEUCIC5ggaRzpdx5ZmxZI8tKpDQC2+w2Pf/Gr71yZFNUT6HQAiEA590cE94TL74dNxScBfanROrw8+8sBFV9Erv6ypB5TpI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":811339},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./styles/globals.css":"./styles/globals.css","./styles/components/chip.css":"./styles/components/chip.css","./styles/components/input.css":"./styles/components/input.css","./styles/components/radio.css":"./styles/components/radio.css","./styles/components/button.css":"./styles/components/button.css","./styles/components/filter.css":"./styles/components/filter.css","./styles/components/checkbox.css":"./styles/components/checkbox.css","./styles/components/dropdown.css":"./styles/components/dropdown.css","./styles/components/phone-input.css":"./styles/components/phone-input.css","./styles/components/button-group.css":"./styles/components/button-group.css"},"scripts":{"dev":"tsup --watch","build":"tsup","typecheck":"tsc --noEmit"},"_npmUser":{"name":"ankittrues","email":"ankit@truestate.in"},"_npmVersion":"11.12.1","description":"Design tokens for Canvas Homes — colors, typography, spacing, radius, border","directories":{},"sideEffects":false,"_nodeVersion":"25.9.0","_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","typescript":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/tokens_0.1.0_1778324583284_0.7089902551686442","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@canvas-homes/tokens","version":"0.2.0","license":"UNLICENSED","_id":"@canvas-homes/tokens@0.2.0","maintainers":[{"name":"ankittrues","email":"ankit@truestate.in"}],"dist":{"shasum":"598811153b207efdca4e4afc8f9c5e2b2c01ce3f","tarball":"https://registry.npmjs.org/@canvas-homes/tokens/-/tokens-0.2.0.tgz","fileCount":18,"integrity":"sha512-sWwsNXOo6H7OQyLwns/nHSjhJ+d7Z1M3QHC7UQOGubV6g6r4qPjfXByqkAUagwdagRPgz5nS1BUIfaAZrBDkhg==","signatures":[{"sig":"MEUCIQDSuwBeQrjjCoflV3nW4fgcio2BveKVKFS25I5Vhgnh7gIgYzsGy9xuT/hRvFNro6hJbe1NC6z0Cvsn+AzEWRA/Ps0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":835345},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./styles/globals.css":"./styles/globals.css","./styles/components/chip.css":"./styles/components/chip.css","./styles/components/input.css":"./styles/components/input.css","./styles/components/radio.css":"./styles/components/radio.css","./styles/components/button.css":"./styles/components/button.css","./styles/components/filter.css":"./styles/components/filter.css","./styles/components/checkbox.css":"./styles/components/checkbox.css","./styles/components/dropdown.css":"./styles/components/dropdown.css","./styles/components/phone-input.css":"./styles/components/phone-input.css","./styles/components/button-group.css":"./styles/components/button-group.css"},"scripts":{"dev":"tsup --watch","build":"tsup","typecheck":"tsc --noEmit"},"_npmUser":{"name":"ankittrues","email":"ankit@truestate.in"},"_npmVersion":"11.12.1","description":"Design tokens for Canvas Homes — colors, typography, spacing, radius, border","directories":{},"sideEffects":false,"_nodeVersion":"25.9.0","_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","react":"^18.0.0","react-dom":"^18.0.0","typescript":"^5.0.0","@types/react":"^18.0.0"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"_npmOperationalInternal":{"tmp":"tmp/tokens_0.2.0_1778325752513_0.7887939000065243","host":"s3://npm-registry-packages-npm-production"}},"0.3.0":{"name":"@canvas-homes/tokens","version":"0.3.0","description":"Design tokens for Canvas Homes — colors, typography, spacing, radius, border","main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./styles/globals.css":"./styles/globals.css","./styles/components/input.css":"./styles/components/input.css","./styles/components/phone-input.css":"./styles/components/phone-input.css","./styles/components/dropdown.css":"./styles/components/dropdown.css","./styles/components/button.css":"./styles/components/button.css","./styles/components/button-group.css":"./styles/components/button-group.css","./styles/components/radio.css":"./styles/components/radio.css","./styles/components/checkbox.css":"./styles/components/checkbox.css","./styles/components/chip.css":"./styles/components/chip.css","./styles/components/filter.css":"./styles/components/filter.css"},"scripts":{"build":"tsup","dev":"tsup --watch","typecheck":"tsc --noEmit"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"devDependencies":{"@types/react":"^18.0.0","react":"^18.0.0","react-dom":"^18.0.0","tsup":"^8.0.0","typescript":"^5.0.0"},"sideEffects":false,"license":"UNLICENSED","_id":"@canvas-homes/tokens@0.3.0","_nodeVersion":"25.9.0","_npmVersion":"11.12.1","dist":{"integrity":"sha512-oTX2llzfnI7jNqy/AoCfqj9AdMXlMkj/tPh5zS51ZK6IjsUu6mK1IqwVkyvI+GzHqzaPsMemXw86AvZvjABP+Q==","shasum":"3395ee6d45ef6b01fc0c4241fa278d6e861db04a","tarball":"https://registry.npmjs.org/@canvas-homes/tokens/-/tokens-0.3.0.tgz","fileCount":18,"unpackedSize":905134,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIGyJ9Btlv4x4Wghc32d7ZEs1/mGzkfs6PCjA8k8DbHgRAiEA6LvjQGA8LlCTx3pyeO7P+zUrTD32lOZcfeCz0yukP1I="}]},"_npmUser":{"name":"ankittrues","email":"ankit@truestate.in"},"directories":{},"maintainers":[{"name":"ankittrues","email":"ankit@truestate.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/tokens_0.3.0_1778326968991_0.6254805743402856"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-09T11:03:03.224Z","modified":"2026-05-09T11:42:49.336Z","0.1.0":"2026-05-09T11:03:03.474Z","0.2.0":"2026-05-09T11:22:32.680Z","0.3.0":"2026-05-09T11:42:49.232Z"},"license":"UNLICENSED","description":"Design tokens for Canvas Homes — colors, typography, spacing, radius, border","maintainers":[{"name":"ankittrues","email":"ankit@truestate.in"}],"readme":"# @canvas-homes/tokens\n\nDesign token package for Canvas Homes. Single source of truth for all colors, typography, spacing, radius, border, and component tokens — derived from Figma variables.\n\n---\n\n## Package info\n\n| Field    | Value                   |\n|----------|-------------------------|\n| Name     | `@canvas-homes/tokens`  |\n| Version  | `0.1.0`                 |\n| Build    | `tsup` (ESM + CJS + types) |\n| License  | UNLICENSED              |\n\n**Exports:**\n```\n@canvas-homes/tokens              → JS tokens (ESM/CJS)\n@canvas-homes/tokens/styles/globals.css\n@canvas-homes/tokens/styles/components/input.css\n@canvas-homes/tokens/styles/components/phone-input.css\n@canvas-homes/tokens/styles/components/dropdown.css\n```\n\n---\n\n## Folder structure\n\n```\nsrc/\n├── primitives/\n│   ├── colors.ts          Raw color palette (purple, pink, teal, orange, neutral,\n│   │                      yellow, green, red, blue — steps 50–1000)\n│   ├── scale.ts           Spacing scale (0–1000 → px values)\n│   └── typography.ts      fontFamily (Archivo / Manrope) + fontStyle names\n│\n├── responsive/\n│   └── typography.ts      typeScale — h1–h6, lg, pr, m, sm\n│                          × desktop / tablet / mobile { size, lineHeight }\n│\n├── semantic/\n│   ├── colors.ts          surface, text, icons, border — use-case aliases\n│   ├── border.ts          borderWidth tokens (none, sm, md, la)\n│   ├── radius.ts          borderRadius tokens (none, s, xs, m, l, xl, 2xl, chip, full)\n│   └── typography.ts      fontWeight + heading (Archivo) + body (Manrope)\n│                          each scale × each weight × each breakpoint\n│\n└── components/\n    ├── input/tokens.ts        Input: inputTokens + inputCssVars + inputClasses\n    ├── phone-input/tokens.ts  PhoneInput: phoneInputTokens + phoneInputCssVars + phoneInputClasses\n    └── dropdown/tokens.ts     Dropdown: dropdownTokens + dropdownCssVars + dropdownClasses\n\nstyles/\n├── globals.css            All CSS custom properties (auto-generated from Figma)\n└── components/\n    ├── input.css\n    ├── phone-input.css\n    └── dropdown.css\n```\n\n---\n\n## Token layers\n\n### 1 — Primitives\n\nRaw values. Never reference primitives directly in components — use semantic aliases.\n\n```ts\nimport { colors, scale, fontFamily, fontStyle } from '@canvas-homes/tokens';\n\ncolors.purple[800]   // '#6B21A8'\nscale[500]           // '16px'\nfontFamily.heading   // 'Archivo'\nfontFamily.body      // 'Manrope'\n```\n\n### 2 — Responsive typography\n\nType scale per breakpoint. Used internally by semantic/typography and component tokens.\n\n```ts\nimport { breakpoints, typeScale } from '@canvas-homes/tokens';\n\ntypeScale.h1.desktop   // { size: 60, lineHeight: 76 }\ntypeScale.h1.tablet    // { size: 48, lineHeight: 62 }\ntypeScale.h1.mobile    // { size: 36, lineHeight: 48 }\n\nbreakpoints.desktop    // 1440\nbreakpoints.tablet     // 720\nbreakpoints.mobile     // 390\n```\n\n**Scales:** `h1 h2 h3 h4 h5 h6 lg pr m sm`\n\n### 3 — Semantic: Colors\n\n```ts\nimport { surface, text, icons, border } from '@canvas-homes/tokens';\n\nsurface.primary        // '#6B21A8'  (purple-800)\nsurface.page           // '#FAFAFA'  (neutral-50)\ntext.heading           // '#262626'  (neutral-800)\ntext.muted             // '#737373'  (neutral-500)\nborder.danger          // '#BE123C'  (red-700)\nicons.default          // '#404040'  (neutral-700)\n```\n\n### 4 — Semantic: Typography\n\n```ts\nimport { fontWeight, heading, body } from '@canvas-homes/tokens';\n\n// fontWeight — string aliases for fontStyle primitives\nfontWeight.regular     // 'Regular'\nfontWeight.medium      // 'Medium'\nfontWeight.semiBold    // 'semibold'\nfontWeight.bold        // 'Bold'\nfontWeight.extraBold   // 'Extra bold'\n\n// heading — Archivo font family\nheading.h1.bold.desktop\n// { fontFamily: 'Archivo', fontWeight: 'Bold', fontSize: 60, lineHeight: 76 }\n\nheading.h2.semiBold.tablet\n// { fontFamily: 'Archivo', fontWeight: 'semibold', fontSize: 40, lineHeight: 52 }\n\n// body — Manrope font family (same structure)\nbody.pr.regular.mobile\n// { fontFamily: 'Manrope', fontWeight: 'Regular', fontSize: 16, lineHeight: 24 }\n```\n\n**Shape:** `heading | body → [h1–h6, lg, pr, m, sm] → [extraBold, bold, semiBold, medium, regular] → [desktop, tablet, mobile]`\n\n### 5 — Semantic: Spacing / Border / Radius\n\n```ts\nimport { borderRadius, borderWidth } from '@canvas-homes/tokens';\n\nborderRadius.m         // '8px'   (scale-300)\nborderRadius.full      // '999px' (scale-1000)\nborderWidth.sm         // '1px'   (scale-50)\nborderWidth.md         // '4px'   (scale-200)\n```\n\n### 6 — Component tokens\n\nEach component exports three objects:\n\n| Export | Purpose |\n|--------|---------|\n| `*Tokens` | Raw resolved values — for inline styles, JS logic |\n| `*CssVars` | CSS variable strings — for CSS-in-JS or style props |\n| `*Classes` | BEM class names — matching the companion `.css` file |\n\n**Input:**\n```ts\nimport { inputTokens, inputCssVars, inputClasses, INPUT_STATES } from '@canvas-homes/tokens';\n\ninputTokens.height           // 52\ninputTokens.border.radius    // '8px'\ninputCssVars.border.focused  // 'var(--border-selected)'\ninputClasses.box.error       // 'ch-input-box--error'\nINPUT_STATES                 // ['default', 'selected', 'filled', 'error', 'filled-error', 'disabled']\n```\n\n**PhoneInput:** same pattern — `PHONE_INPUT_STATES`, `phoneInputTokens`, `phoneInputCssVars`, `phoneInputClasses`\n\n**Dropdown:**\n```ts\nimport { dropdownTokens, dropdownCssVars, dropdownClasses, DROPDOWN_STATES, DROPDOWN_VARIANTS } from '@canvas-homes/tokens';\n\nDROPDOWN_STATES    // ['default', 'open', 'filled', 'error', 'disabled']\nDROPDOWN_VARIANTS  // ['default', 'type-2']\ndropdownTokens.chevron.size   // 20\ndropdownClasses.chevron.open  // 'ch-dropdown-chevron--open'\n```\n\n---\n\n## CSS custom properties\n\n`styles/globals.css` defines all tokens as CSS variables. Import once at the app root.\n\n```css\n/* ─── Primitive: Colors ─── */\n--color-purple-800: #6B21A8;\n--color-neutral-50: #FAFAFA;\n\n/* ─── Primitive: Scale ─── */\n--scale-500: 16px;\n\n/* ─── Primitive: Typography ─── */\n--font-heading: 'Archivo', sans-serif;\n--font-body: 'Manrope', sans-serif;\n\n/* ─── Semantic: Font Weight ─── */\n--font-weight-regular: 400;\n--font-weight-medium: 500;\n--font-weight-semibold: 600;\n--font-weight-bold: 700;\n\n/* ─── Semantic: Surface / Text / Icons / Border ─── */\n--surface-primary: var(--color-purple-800);\n--text-heading: var(--color-neutral-800);\n--border-danger: var(--color-red-700);\n\n/* ─── Semantic: Border Radius / Width ─── */\n--radius-m: var(--scale-300);\n--border-width-sm: var(--scale-50);\n\n/* ─── Semantic: Button ─── */\n--button-primary-bg: var(--color-purple-800);\n\n/* ─── Responsive: Typography ─── */\n--type-h1-size: 60px;          /* desktop default */\n--type-h1-line-height: 76px;\n```\n\nResponsive overrides:\n```css\n@media (max-width: 720px) { /* tablet */ }\n@media (max-width: 390px) { /* mobile */ }\n```\n\n---\n\n## Scripts\n\n```bash\nnpm run build       # tsup → dist/\nnpm run dev         # tsup --watch\nnpm run typecheck   # tsc --noEmit\n```\n\n---\n\n## What's done\n\n| Layer | Status |\n|-------|--------|\n| Primitive colors | Done |\n| Primitive scale | Done |\n| Primitive typography | Done |\n| Responsive typeScale | Done |\n| Semantic colors (surface/text/icons/border) | Done |\n| Semantic border width + radius | Done |\n| Semantic typography (fontWeight/heading/body) | Done |\n| CSS custom properties (globals.css) | Done |\n| Component: Input | Done |\n| Component: PhoneInput | Done |\n| Component: Dropdown | Done |\n\n## What's next\n\n| Layer | Status |\n|-------|--------|\n| Component: Button | Not started |\n| Component: Chip / Tag | Not started |\n| Component: Modal | Not started |\n| Semantic typography CSS vars (`--type-*` per weight) | Not started |\n| Build output / publish to local registry | Not started |\n","readmeFilename":"README.md"}