{"_id":"@bug-on/m3-tokens","_rev":"5-531d68ef8853db257a1f3c9cf3511902","name":"@bug-on/m3-tokens","dist-tags":{"latest":"1.2.2"},"versions":{"1.0.0":{"name":"@bug-on/m3-tokens","version":"1.0.0","keywords":["react","tailwind","material-design-3","md3","ui-library","components","bug-on"],"author":{"name":"Bug แป”n"},"license":"MIT","_id":"@bug-on/m3-tokens@1.0.0","maintainers":[{"name":"nguyentruongton","email":"tonhuyen2000@gmail.com"}],"homepage":"https://github.com/nguyentruongton/bug-on-md3-expressive#readme","bugs":{"url":"https://github.com/nguyentruongton/bug-on-md3-expressive/issues"},"dist":{"shasum":"d8d8cb435db920076c02d9a9c91f5e7086a359af","tarball":"https://registry.npmjs.org/@bug-on/m3-tokens/-/m3-tokens-1.0.0.tgz","fileCount":23,"integrity":"sha512-NirBz3NdWbXp0bCr7XO2ZSj46CkYqtkJn4Y45fgVk8UanMi/6RWzFam7AfVcvsHySCfvwNbS/1Acz1SK87P0UA==","signatures":[{"sig":"MEYCIQCsjv7pqwEEbzQSE6lpMDHVI2GXRY1hLYYpGBr/fzsNwwIhAMYhSgJOq1+HlMDw7CkBo1A3IU7vyp+8rzpMRFS2Hw4n","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":129015},"main":"./dist/index.js","_from":"file:bug-on-m3-tokens-1.0.0.tgz","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"import":{"types":"./dist/index.d.mts","default":"./dist/index.mjs"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.js"}},"./shape.css":{"types":"./dist/shape.css.d.ts","default":"./dist/shape.css"},"./colors.css":{"types":"./dist/colors.css.d.ts","default":"./dist/colors.css"}},"scripts":{"dev":"tsup --watch --onSuccess \"node scripts/copy-css.js\"","build":"tsup && node scripts/copy-css.js","clean":"rm -rf dist"},"_npmUser":{"name":"nguyentruongton","email":"tonhuyen2000@gmail.com"},"_resolved":"/private/var/folders/nk/r240kbwx10s3p96_yvg7vt780000gn/T/be7043497d55373df1dd52becaa4d94c/bug-on-m3-tokens-1.0.0.tgz","_integrity":"sha512-NirBz3NdWbXp0bCr7XO2ZSj46CkYqtkJn4Y45fgVk8UanMi/6RWzFam7AfVcvsHySCfvwNbS/1Acz1SK87P0UA==","repository":{"url":"git+https://github.com/nguyentruongton/bug-on-md3-expressive.git","type":"git","directory":"packages/tokens"},"_npmVersion":"11.12.1","description":"Material Design 3 Expressive design tokens","directories":{},"_nodeVersion":"25.9.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.4.0","react":"^19.0.0","react-dom":"^19.0.0","typescript":"5.8.3"},"peerDependencies":{},"_npmOperationalInternal":{"tmp":"tmp/m3-tokens_1.0.0_1784519220472_0.43060007732466277","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@bug-on/m3-tokens","version":"1.1.0","keywords":["react","tailwind","material-design-3","md3","ui-library","components","bug-on"],"author":{"name":"Bug On"},"license":"MIT","_id":"@bug-on/m3-tokens@1.1.0","maintainers":[{"name":"nguyentruongton","email":"tonhuyen2000@gmail.com"}],"homepage":"https://github.com/nguyentruongton/bug-on-md3-expressive#readme","bugs":{"url":"https://github.com/nguyentruongton/bug-on-md3-expressive/issues"},"dist":{"shasum":"5321a0067c5d2adb213348156dc81b690d4ecc82","tarball":"https://registry.npmjs.org/@bug-on/m3-tokens/-/m3-tokens-1.1.0.tgz","fileCount":23,"integrity":"sha512-1/G6f35YSA0+lbeLQi4OhKac4sEeG3Ishigc8yTSoZt7n3vy7iRvfnhDfOuFPe3c7UZJhONK275iq8SqPydXMw==","signatures":[{"sig":"MEQCIHCINQRwAmJG6Qv+VAQ9yepJ109SQwXjl3SxQ1q8S8TjAiAqC0fbdbfeEOuGpkZTMmxFWJbBCXsa/HGkqOczXOCG4A==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":129312},"main":"./dist/index.js","_from":"file:bug-on-m3-tokens-1.1.0.tgz","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"import":{"types":"./dist/index.d.mts","default":"./dist/index.mjs"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.js"}},"./shape.css":{"types":"./dist/shape.css.d.ts","default":"./dist/shape.css"},"./colors.css":{"types":"./dist/colors.css.d.ts","default":"./dist/colors.css"}},"scripts":{"dev":"tsup --watch --onSuccess \"node scripts/copy-css.js\"","build":"tsup && node scripts/copy-css.js","clean":"rm -rf dist"},"_npmUser":{"name":"nguyentruongton","email":"tonhuyen2000@gmail.com"},"_resolved":"/tmp/d2961a05c6710ebc0dcf0caa743698a2/bug-on-m3-tokens-1.1.0.tgz","_integrity":"sha512-1/G6f35YSA0+lbeLQi4OhKac4sEeG3Ishigc8yTSoZt7n3vy7iRvfnhDfOuFPe3c7UZJhONK275iq8SqPydXMw==","repository":{"url":"git+https://github.com/nguyentruongton/bug-on-md3-expressive.git","type":"git","directory":"packages/tokens"},"_npmVersion":"11.16.0","description":"Material Design 3 Expressive design tokens","directories":{},"_nodeVersion":"24.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.4.0","react":"^19.0.0","react-dom":"^19.0.0","typescript":"5.8.3"},"peerDependencies":{},"_npmOperationalInternal":{"tmp":"tmp/m3-tokens_1.1.0_1784530934118_0.793059956743897","host":"s3://npm-registry-packages-npm-production"}},"1.2.0":{"name":"@bug-on/m3-tokens","version":"1.2.0","keywords":["react","tailwind","material-design-3","md3","ui-library","components","bug-on"],"author":{"name":"Bug On"},"license":"MIT","_id":"@bug-on/m3-tokens@1.2.0","maintainers":[{"name":"nguyentruongton","email":"tonhuyen2000@gmail.com"}],"homepage":"https://github.com/nguyentruongton/bug-on-md3-expressive#readme","bugs":{"url":"https://github.com/nguyentruongton/bug-on-md3-expressive/issues"},"dist":{"shasum":"87a93f3b489c4d3444ae0ecaea0b586c89b81ce0","tarball":"https://registry.npmjs.org/@bug-on/m3-tokens/-/m3-tokens-1.2.0.tgz","fileCount":23,"integrity":"sha512-CEge425zUjKVMSa6crIPfj4RFvfW82BrNO2kFU3aKtijZSfUJ1eaopOg0/U01Z0Rrv/4kwxlCreMgp6CjAUpuA==","signatures":[{"sig":"MEUCIHKLpZskNyK1SLKpTIqWEpgnFZpfNfMSmCs9jyp05O7QAiEAkGSVyNksuSdu9WDNHqFJVTYhFtTc+jinX6YqZEiRRAk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":129923},"main":"./dist/index.js","_from":"file:bug-on-m3-tokens-1.2.0.tgz","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"import":{"types":"./dist/index.d.mts","default":"./dist/index.mjs"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.js"}},"./shape.css":{"types":"./dist/shape.css.d.ts","default":"./dist/shape.css"},"./colors.css":{"types":"./dist/colors.css.d.ts","default":"./dist/colors.css"}},"scripts":{"dev":"tsup --watch --onSuccess \"node scripts/copy-css.js\"","build":"tsup && node scripts/copy-css.js","clean":"rm -rf dist"},"_npmUser":{"name":"nguyentruongton","email":"tonhuyen2000@gmail.com"},"_resolved":"/tmp/4445477f1c3f9edf4bacbda403cb066b/bug-on-m3-tokens-1.2.0.tgz","_integrity":"sha512-CEge425zUjKVMSa6crIPfj4RFvfW82BrNO2kFU3aKtijZSfUJ1eaopOg0/U01Z0Rrv/4kwxlCreMgp6CjAUpuA==","repository":{"url":"git+https://github.com/nguyentruongton/bug-on-md3-expressive.git","type":"git","directory":"packages/tokens"},"_npmVersion":"11.16.0","description":"Material Design 3 Expressive design tokens","directories":{},"_nodeVersion":"24.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.4.0","react":"^19.0.0","react-dom":"^19.0.0","typescript":"5.8.3"},"peerDependencies":{},"_npmOperationalInternal":{"tmp":"tmp/m3-tokens_1.2.0_1784537687914_0.48453834800775897","host":"s3://npm-registry-packages-npm-production"}},"1.2.1":{"name":"@bug-on/m3-tokens","version":"1.2.1","keywords":["react","tailwind","material-design-3","md3","ui-library","components","bug-on"],"author":{"name":"Bug On"},"license":"MIT","_id":"@bug-on/m3-tokens@1.2.1","maintainers":[{"name":"nguyentruongton","email":"tonhuyen2000@gmail.com"}],"homepage":"https://github.com/nguyentruongton/bug-on-md3-expressive#readme","bugs":{"url":"https://github.com/nguyentruongton/bug-on-md3-expressive/issues"},"dist":{"shasum":"7d286be0066864b5fb8e1b1823f2b9d1ca7f8452","tarball":"https://registry.npmjs.org/@bug-on/m3-tokens/-/m3-tokens-1.2.1.tgz","fileCount":23,"integrity":"sha512-E3lu6UMx00qwmeNuVoEGoZHzd6SPuHjHdxySlrA3RajkiJp9ddbIesCTl/BjG5uir0S31o2jdOpUQWb0cS3jXw==","signatures":[{"sig":"MEYCIQDsN/ns/xBk2HYFkwtlFageKIc8NLA5FDui1ovaOqKpuQIhAN7Qctah7j3YoylyBLl7w4dSoGcF4i+u8rayoModc8NI","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":130362},"main":"./dist/index.js","_from":"file:bug-on-m3-tokens-1.2.1.tgz","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"import":{"types":"./dist/index.d.mts","default":"./dist/index.mjs"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.js"}},"./shape.css":{"types":"./dist/shape.css.d.ts","default":"./dist/shape.css"},"./colors.css":{"types":"./dist/colors.css.d.ts","default":"./dist/colors.css"}},"scripts":{"dev":"tsup --watch --onSuccess \"node scripts/copy-css.js\"","build":"tsup && node scripts/copy-css.js","clean":"rm -rf dist"},"_npmUser":{"name":"nguyentruongton","email":"tonhuyen2000@gmail.com"},"_resolved":"/tmp/77aa110b24f130ac8c18c2f0b9b2c1d5/bug-on-m3-tokens-1.2.1.tgz","_integrity":"sha512-E3lu6UMx00qwmeNuVoEGoZHzd6SPuHjHdxySlrA3RajkiJp9ddbIesCTl/BjG5uir0S31o2jdOpUQWb0cS3jXw==","repository":{"url":"git+https://github.com/nguyentruongton/bug-on-md3-expressive.git","type":"git","directory":"packages/tokens"},"_npmVersion":"11.16.0","description":"Material Design 3 Expressive design tokens","directories":{},"_nodeVersion":"24.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.4.0","react":"^19.0.0","react-dom":"^19.0.0","typescript":"5.8.3"},"peerDependencies":{},"_npmOperationalInternal":{"tmp":"tmp/m3-tokens_1.2.1_1785258724012_0.4651774388864611","host":"s3://npm-registry-packages-npm-production"}},"1.2.2":{"name":"@bug-on/m3-tokens","version":"1.2.2","description":"Material Design 3 Expressive design tokens","author":{"name":"Bug On"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/nguyentruongton/bug-on-md3-expressive.git","directory":"packages/tokens"},"keywords":["react","tailwind","material-design-3","md3","ui-library","components","bug-on"],"main":"./dist/index.js","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"import":{"types":"./dist/index.d.mts","default":"./dist/index.mjs"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.js"}},"./colors.css":{"types":"./dist/colors.css.d.ts","default":"./dist/colors.css"},"./shape.css":{"types":"./dist/shape.css.d.ts","default":"./dist/shape.css"}},"peerDependencies":{},"publishConfig":{"access":"public"},"devDependencies":{"react":"^19.0.0","react-dom":"^19.0.0","tsup":"^8.4.0","typescript":"5.8.3"},"scripts":{"build":"tsup && node scripts/copy-css.js","dev":"tsup --watch --onSuccess \"node scripts/copy-css.js\"","clean":"rm -rf dist"},"_id":"@bug-on/m3-tokens@1.2.2","bugs":{"url":"https://github.com/nguyentruongton/bug-on-md3-expressive/issues"},"homepage":"https://github.com/nguyentruongton/bug-on-md3-expressive#readme","_integrity":"sha512-tPM+YUmismFFhihNf4gmlBQb61E1f3TdNwOi26AoWQbM9vv+CoCsXIfjTfT73pQHzCTU+fJD7pVEvOV4QfxbTQ==","_resolved":"/tmp/eb09f2a5076e9d747e30301895011837/bug-on-m3-tokens-1.2.2.tgz","_from":"file:bug-on-m3-tokens-1.2.2.tgz","_nodeVersion":"24.19.0","_npmVersion":"11.17.0","dist":{"integrity":"sha512-tPM+YUmismFFhihNf4gmlBQb61E1f3TdNwOi26AoWQbM9vv+CoCsXIfjTfT73pQHzCTU+fJD7pVEvOV4QfxbTQ==","shasum":"222600e66a243a0a52cdebfa02e8130a954d1e8f","tarball":"https://registry.npmjs.org/@bug-on/m3-tokens/-/m3-tokens-1.2.2.tgz","fileCount":23,"unpackedSize":130584,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDejOzUyWatSMNW751LPn+e/xGhMiFhMN/SgUf4+LeZ/wIhAOEmVL/lKOda+FAimoQUPfpqpxdfwIDgLwcvRXGEfNGp"}]},"_npmUser":{"name":"nguyentruongton","email":"tonhuyen2000@gmail.com"},"directories":{},"maintainers":[{"name":"nguyentruongton","email":"tonhuyen2000@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/m3-tokens_1.2.2_1787114484085_0.11110864420337441"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-20T03:47:00.250Z","modified":"2026-08-19T04:41:24.451Z","1.0.0":"2026-07-20T03:47:00.601Z","1.1.0":"2026-07-20T07:02:14.245Z","1.2.0":"2026-07-20T08:54:48.042Z","1.2.1":"2026-07-28T17:12:04.201Z","1.2.2":"2026-08-19T04:41:24.221Z"},"bugs":{"url":"https://github.com/nguyentruongton/bug-on-md3-expressive/issues"},"author":{"name":"Bug On"},"license":"MIT","homepage":"https://github.com/nguyentruongton/bug-on-md3-expressive#readme","keywords":["react","tailwind","material-design-3","md3","ui-library","components","bug-on"],"repository":{"type":"git","url":"git+https://github.com/nguyentruongton/bug-on-md3-expressive.git","directory":"packages/tokens"},"description":"Material Design 3 Expressive design tokens","maintainers":[{"name":"nguyentruongton","email":"tonhuyen2000@gmail.com"}],"readme":"# @bug-on/m3-tokens\n\n[![npm version](https://img.shields.io/npm/v/@bug-on/m3-tokens.svg)](https://www.npmjs.com/package/@bug-on/m3-tokens)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\nCore Design Tokens for Material Design 3 Expressive published as pure **CSS Custom Properties** (CSS variables) and typed TypeScript token objects. Zero runtime dependencies, 100% framework agnostic.\n\n---\n\n## ๐Ÿ“ฆ Installation\n\n```bash\npnpm add @bug-on/m3-tokens\n# or\nnpm install @bug-on/m3-tokens\n```\n\n---\n\n## ๐Ÿ› ๏ธ Usage\n\n### 1. Direct CSS Variable Imports\n\nImport token stylesheets directly into your application's CSS entry point (`globals.css` or `index.css`):\n\n```css\n/* 1. Dynamic Material System Color Tokens */\n@import \"@bug-on/m3-tokens/colors.css\";\n\n/* 2. Expressive Shape & Corner Radius Tokens */\n@import \"@bug-on/m3-tokens/shape.css\";\n```\n\n### 2. TypeScript / JavaScript Design Tokens\n\nYou can also import typed token constants directly in your code for animations, canvas drawing, or custom token pipelines:\n\n```ts\nimport { \n motionEasing, \n motionDuration, \n motionSpring, \n shapeTokens \n} from \"@bug-on/m3-tokens\";\n\n// Example: Using motion spring tokens\nconst springConfig = motionSpring.fastSpatial;\n```\n\n> [!TIP]\n> **Recommended Pairings:**\n> - For **Tailwind CSS v4** projects: Pair with **`@bug-on/m3-tailwind`** to automatically compile these tokens into convenient utility classes (`bg-m3-primary`, `rounded-m3-large`).\n> - For **React** applications: Use **`@bug-on/m3-expressive`** which bundles these tokens, React UI components, and theme providers out of the box.\n\n---\n\n## ๐ŸŽจ CSS Custom Property Naming System\n\nCSS custom properties strictly conform to Google's official Material Design 3 specifications:\n\n| Token Category | CSS Custom Property Pattern | Example |\n| :--- | :--- | :--- |\n| **Color System** | `--md-sys-color-[role]` | `--md-sys-color-primary`, `--md-sys-color-surface-container` |\n| **Shape System** | `--md-sys-shape-corner-[size]` | `--md-sys-shape-corner-medium` (12px), `--md-sys-shape-corner-extra-large` (28px) |\n| **Typography** | `--md-sys-typescale-[scale]-[size]` | `--md-sys-typescale-headline-medium`, `--md-sys-typescale-body-large` |\n| **Motion & Easing** | `--md-sys-motion-easing-[style]` | `--md-sys-motion-easing-emphasized`, `--md-sys-motion-easing-standard` |\n| **Elevation** | `--md-sys-elevation-level-[0-5]` | `--md-sys-elevation-level-1`, `--md-sys-elevation-level-3` |\n\n---\n\n## ๐Ÿ“– Complete Documentation & References\n\nTo view the complete token reference tables and integration guides: \n๐Ÿ‘‰ **[Official Documentation & Live Demos](https://bug-on-md3.vercel.app)** \n๐Ÿ‘‰ **[GitHub Repository](https://github.com/nguyentruongton/bug-on-md3-expressive)**\n\n---\n\n## โš–๏ธ License\n\n[MIT](./LICENSE)\n\n","readmeFilename":"README.md"}