{"_id":"@cognivo/tokens","name":"@cognivo/tokens","dist-tags":{"latest":"0.8.0"},"versions":{"0.8.0":{"name":"@cognivo/tokens","version":"0.8.0","description":"3-tier design token system (Style Dictionary v4) for Cognivo — 1,800+ tokens, theme-ready.","keywords":["cognivo","design-system","ui","components","design-tokens","style-dictionary"],"license":"MIT","author":{"name":"Cognivo"},"type":"module","main":"./dist/index.css","exports":{".":"./dist/index.css","./css":"./dist/index.css","./dist/index.css":"./dist/index.css","./manifest":{"types":"./dist/manifest.d.ts","import":"./dist/manifest-full.js"},"./manifest/runtime":{"types":"./dist/manifest.d.ts","import":"./dist/manifest-runtime.js"},"./manifest.json":"./dist/manifest.json"},"sideEffects":false,"repository":{"type":"git","url":"git+https://github.com/murisd/cognivo.git","directory":"packages/tokens"},"homepage":"https://cognivo.dev","bugs":{"url":"https://github.com/murisd/cognivo/issues"},"publishConfig":{"access":"public"},"devDependencies":{"style-dictionary":"^4.0.0"},"scripts":{"generate":"node generate-from-palette.cjs","build":"node build.js && node scripts/build-manifest.mjs && node scripts/validate-contrast.mjs","build:only":"node build.js","build:manifest":"node scripts/build-manifest.mjs","check:manifest":"node scripts/check-manifest-drift.mjs","test":"node --test __tests__/manifest-lib.test.mjs","validate:contrast":"node scripts/validate-contrast.mjs","dev":"node build.js --watch","clean":"rm -rf dist"},"_id":"@cognivo/tokens@0.8.0","_integrity":"sha512-MQSqID2h2wnz4Se/eboJdPVbaX2XuoNdkfiR1/FXCMiPhNv9EYZAuorR5Mz4oI5Z5Pkgk8ToNA7YoiYqohxavA==","_resolved":"/private/var/folders/ts/mj917p251k38v_z025z2d8ww0000gn/T/581f60d6c2137cbe1e4fc2408364ae5d/cognivo-tokens-0.8.0.tgz","_from":"file:cognivo-tokens-0.8.0.tgz","_nodeVersion":"25.8.0","_npmVersion":"11.11.0","dist":{"integrity":"sha512-MQSqID2h2wnz4Se/eboJdPVbaX2XuoNdkfiR1/FXCMiPhNv9EYZAuorR5Mz4oI5Z5Pkgk8ToNA7YoiYqohxavA==","shasum":"268c1b0077062bf56f60b6ce8b1e27e5f386aee9","tarball":"https://registry.npmjs.org/@cognivo/tokens/-/tokens-0.8.0.tgz","fileCount":8,"unpackedSize":1641929,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIDMbrK/C8uL9Jd6IFZDTZkbcCAGGfpJMFvi4QdD5lg9qAiAeRjwNCeGrJqZeEvj65putI8X8y4jrclyp/bFlOy4GDQ=="}]},"_npmUser":{"name":"muriloscigliano","email":"dev@murilo.design"},"directories":{},"maintainers":[{"name":"muriloscigliano","email":"dev@murilo.design"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/tokens_0.8.0_1782873677686_0.928237930232638"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-01T02:41:17.478Z","0.8.0":"2026-07-01T02:41:17.845Z","modified":"2026-07-01T02:41:18.070Z"},"maintainers":[{"name":"muriloscigliano","email":"dev@murilo.design"}],"description":"3-tier design token system (Style Dictionary v4) for Cognivo — 1,800+ tokens, theme-ready.","homepage":"https://cognivo.dev","keywords":["cognivo","design-system","ui","components","design-tokens","style-dictionary"],"repository":{"type":"git","url":"git+https://github.com/murisd/cognivo.git","directory":"packages/tokens"},"author":{"name":"Cognivo"},"bugs":{"url":"https://github.com/murisd/cognivo/issues"},"license":"MIT","readme":"# @cognivo/tokens\n\n1,800+ design tokens for the Cognivo AI component library. CSS custom properties with dark/light themes. W3C DTCG format.\n\n## Install\n\n```bash\npnpm add @cognivo/tokens\n```\n\n## Usage\n\n```css\n@import '@cognivo/tokens';\n\n.my-component {\n  background: var(--cg-color-surface-container-background);\n  padding: var(--cg-spacing-16);\n  color: var(--cg-color-surface-base-text);\n  border-radius: var(--cg-border-radius-150);\n  box-shadow: var(--cg-elevation-2);\n}\n```\n\n## Token Architecture\n\n### 3-Tier System\n\n| Tier | Purpose | Example |\n|------|---------|---------|\n| **Tier 1 (Primitive)** | Raw values | `--cg-gray-500`, `--cg-spacing-16`, `--cg-font-size-lg` |\n| **Tier 2 (Semantic)** | Design decisions | `--cg-color-action-primary-background-default`, `--cg-elevation-3` |\n| **Tier 3 (Component)** | Component-specific | `--cg-component-button-height-md`, `--cg-component-input-radius` |\n\nAll tokens use the `--cg-` prefix (Cognivo).\n\n### Token Categories\n\n| Category | Count | Examples |\n|----------|-------|---------|\n| **Color** | 200+ | Gray, blue, green, yellow, red, teal scales + brand + semantic |\n| **Spacing** | 17 | 0, 1, 2, 4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 56, 64, 80, 96px |\n| **Typography** | 30+ | 3 families, 10 sizes, 9 weights, 5 line-heights, 6 letter-spacings |\n| **Border** | 16 | 8 radii (4-99999px), 5 widths, 3 styles |\n| **Elevation** | 5 | `--cg-elevation-1` (subtle) through `--cg-elevation-5` (top-level) |\n| **Motion** | 12 | 5 durations (0-350ms), 5 easings + color easing + bounce |\n| **Interaction** | 2 | `--cg-interaction-press-scale`, `--cg-interaction-hover-lift` |\n| **AI States** | 50+ | Confidence, anomaly, thinking, insight, chart, glow, shimmer |\n| **Component** | 15+ | Button/input/card heights, radii, select/switch/pagination sizes |\n| **Surface** | 100+ | 20+ surface types with background, text, icon, border, divider |\n| **Layout** | 10+ | Container, modal, drawer sizes |\n\n## Elevation System\n\n5 levels for consistent depth hierarchy:\n\n```css\nbox-shadow: var(--cg-elevation-1); /* Cards, inputs (resting) */\nbox-shadow: var(--cg-elevation-2); /* Hover states, tooltips */\nbox-shadow: var(--cg-elevation-3); /* Dropdowns, popovers */\nbox-shadow: var(--cg-elevation-4); /* Modals */\nbox-shadow: var(--cg-elevation-5); /* Drawers, command palette */\n```\n\nDark mode uses slightly heavier shadows automatically.\n\n## Motion Tokens\n\n```css\n/* Duration scale */\n--cg-motion-duration-instant: 0ms;\n--cg-motion-duration-fast: 80ms;\n--cg-motion-duration-normal: 150ms;\n--cg-motion-duration-slow: 250ms;\n--cg-motion-duration-slower: 350ms;\n\n/* Easing functions */\n--cg-motion-easing-default: cubic-bezier(0.4, 0, 0.2, 1);   /* Standard */\n--cg-motion-easing-enter: cubic-bezier(0, 0, 0.2, 1);        /* Decelerate */\n--cg-motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);         /* Accelerate */\n--cg-motion-easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* Spring */\n--cg-motion-easing-color: cubic-bezier(0, 0, 0.58, 1);       /* Color/opacity */\n```\n\n## Dark Mode\n\n```html\n<html data-theme=\"dark\">\n  <!-- Dark theme active — only semantic layer changes -->\n</html>\n```\n\nThe primitive layer stays constant. Only the semantic layer swaps, so all component visuals update automatically.\n\n## Palette Generator\n\nSwap the entire theme by providing a new palette JSON:\n\n```bash\nnode generate-from-palette.cjs palettes/my-theme.json\npnpm build\n```\n\n## AI-Specific Tokens\n\n```css\n--cg-brand-ai-accent: #DFFF61;     /* Primary AI accent (lime-yellow) */\n--cg-brand-ai-highlight: #E2FF70;  /* Lighter for gradients */\n--cg-brand-ai-glow: #DFFF61;       /* Glow effects */\n--cg-ai-confidence-high-color       /* Confidence indicators */\n--cg-ai-anomaly-critical-color      /* Anomaly detection */\n--cg-ai-effect-shimmer-duration     /* Shimmer animation timing */\n```\n\n## Development\n\n```bash\npnpm build          # Build tokens → dist/index.css\npnpm generate       # Regenerate from palette JSON\npnpm dev            # Watch mode\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-7c0d1edc032a30bcbdbae5e33eb73a1f"}