{"_id":"@cumulus-ui/design-tokens","_rev":"7-166fbc3f0877cb59d91a6e2d927f676e","name":"@cumulus-ui/design-tokens","dist-tags":{"latest":"0.4.4"},"versions":{"0.1.0":{"name":"@cumulus-ui/design-tokens","version":"0.1.0","keywords":["cloudscape","design-tokens","css-custom-properties","dark-mode"],"license":"Apache-2.0","_id":"@cumulus-ui/design-tokens@0.1.0","maintainers":[{"name":"piotrekwitkowski","email":"piotrekwitkowski1@gmail.com"}],"dist":{"shasum":"aa170aa23d097e3c929504e1c51c5190e016957c","tarball":"https://registry.npmjs.org/@cumulus-ui/design-tokens/-/design-tokens-0.1.0.tgz","fileCount":5,"integrity":"sha512-Jyvhj3eqVMTtDI7mKFIbVFxAjwYEt+Nvh+scdJUfkQIQJERYo2wTG9FpfpHesgVNOoRd14aUtAFbFkxUiifjig==","signatures":[{"sig":"MEQCICom5eEDk+mVXZPG1h58WYEkVTQVgDUxu3fGZ+MngswLAiAmulpRtT3efWnXzFdNMqn1QQ35F9oYr+kR4QphV0BCdg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":104255},"main":"./index.js","type":"module","types":"./index.d.ts","exports":{".":{"types":"./index.d.ts","default":"./index.js"},"./tokens.css":"./tokens.css"},"gitHead":"66fe9fd0ff202d5539ec921a25dd59a44a162ebe","scripts":{"generate":"tsx scripts/generate.ts"},"_npmUser":{"name":"piotrekwitkowski","email":"piotrekwitkowski1@gmail.com"},"_npmVersion":"11.11.0","description":"CSS custom properties for Cumulus UI — light and dark mode tokens generated from Cloudscape Design System","directories":{},"_nodeVersion":"24.13.0","_hasShrinkwrap":false,"devDependencies":{"tsx":"^4.21.0","typescript":"~5.9.3","@cloudscape-design/design-tokens":"^3.0.78"},"_npmOperationalInternal":{"tmp":"tmp/design-tokens_0.1.0_1775574523031_0.006292369493981376","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@cumulus-ui/design-tokens","version":"0.2.0","keywords":["cloudscape","design-tokens","css-custom-properties","dark-mode"],"license":"Apache-2.0","_id":"@cumulus-ui/design-tokens@0.2.0","maintainers":[{"name":"piotrekwitkowski","email":"piotrekwitkowski1@gmail.com"}],"dist":{"shasum":"81bc9ffab5cbe424ab9fc6053d850b17855948ec","tarball":"https://registry.npmjs.org/@cumulus-ui/design-tokens/-/design-tokens-0.2.0.tgz","fileCount":6,"integrity":"sha512-FhIk7Bi0h+nEgEUW6tkYKgER2h0ZmZlSYifp2h0uhlj7Bh+tIVATlMPgZFn25VzJBUBTYjpJSEo2M2Nu2ey2iA==","signatures":[{"sig":"MEUCIB7WXCKX7f+vewRZtsKwSeOUJxjNOLYHga214GnO2jJUAiEA1rEztSY9bE6ZybGePKeW1AUOVYLrDOS78QmzSy6R3wQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":96332},"main":"./index.js","type":"module","types":"./index.d.ts","exports":{".":{"types":"./index.d.ts","default":"./index.js"},"./tokens.css":"./tokens.css"},"gitHead":"422ee8207f2ef9fb553f0759176cbce21fff94c1","scripts":{"generate":"tsx scripts/generate.ts"},"_npmUser":{"name":"piotrekwitkowski","email":"piotrekwitkowski1@gmail.com"},"_npmVersion":"11.11.0","description":"CSS custom properties for Cumulus UI — light and dark mode tokens generated from Cloudscape Design System","directories":{},"_nodeVersion":"24.13.0","_hasShrinkwrap":false,"devDependencies":{"tsx":"^4.21.0","typescript":"~5.9.3","@cloudscape-design/design-tokens":"^3.0.78"},"_npmOperationalInternal":{"tmp":"tmp/design-tokens_0.2.0_1775670459528_0.10611916146902134","host":"s3://npm-registry-packages-npm-production"}},"0.3.0":{"name":"@cumulus-ui/design-tokens","version":"0.3.0","keywords":["cloudscape","design-tokens","css-custom-properties","dark-mode"],"license":"Apache-2.0","_id":"@cumulus-ui/design-tokens@0.3.0","maintainers":[{"name":"piotrekwitkowski","email":"piotrekwitkowski1@gmail.com"}],"dist":{"shasum":"0be1d46193e3f809dead359e208d890bcb3d0f79","tarball":"https://registry.npmjs.org/@cumulus-ui/design-tokens/-/design-tokens-0.3.0.tgz","fileCount":6,"integrity":"sha512-I9TinjLpkdd48Y6tWyqy/CVSAH01tsEjlCUWdE7nJMDLfw9tb+Qr9wjxEKqVQAADJj/vCbc7r+lyPb0K1k5y5g==","signatures":[{"sig":"MEUCIQD6LwFJyY/hiPLQjPq655Rmqu6hWFuJPpMbQ+4YOFf5xwIgD90Ih1O9GMMU2C58kksbTJRaVY+Jf98al7QBkN2L8XY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":147187},"main":"./index.js","type":"module","types":"./index.d.ts","exports":{".":{"types":"./index.d.ts","default":"./index.js"},"./tokens.css":"./tokens.css"},"gitHead":"5aa17b7c678d82345604e0a73b9e3960d98d35e8","scripts":{"generate":"tsx scripts/generate.ts"},"_npmUser":{"name":"piotrekwitkowski","email":"piotrekwitkowski1@gmail.com"},"_npmVersion":"11.11.0","description":"CSS custom properties for Cumulus UI — light and dark mode tokens generated from Cloudscape Design System","directories":{},"_nodeVersion":"24.13.0","_hasShrinkwrap":false,"devDependencies":{"tsx":"^4.21.0","typescript":"~5.9.3","@cloudscape-design/design-tokens":"^3.0.78"},"_npmOperationalInternal":{"tmp":"tmp/design-tokens_0.3.0_1775696828828_0.8768276835113826","host":"s3://npm-registry-packages-npm-production"}},"0.3.1":{"name":"@cumulus-ui/design-tokens","version":"0.3.1","keywords":["cloudscape","design-tokens","css-custom-properties","dark-mode"],"license":"Apache-2.0","_id":"@cumulus-ui/design-tokens@0.3.1","maintainers":[{"name":"piotrekwitkowski","email":"piotrekwitkowski1@gmail.com"}],"dist":{"shasum":"bfb80285b9f3385a62daa5815e0406d55a396aac","tarball":"https://registry.npmjs.org/@cumulus-ui/design-tokens/-/design-tokens-0.3.1.tgz","fileCount":6,"integrity":"sha512-Vg0WmNvUwEZyzoWU5+O0oFDadkDZp0SDmaMyh3gyaYLDyBaBtwIV+z5J9dVJJdRlORhKL4Xe2XAAyHp05jfPfw==","signatures":[{"sig":"MEYCIQCNvAYAsMXp/UQRvm16UsSG7xoGD4Xp5AzX3dkGEBQ14QIhAIqq4rZasnPNHv8hbpgzBI1/VtBYPhgyxmWV8I2tR2iX","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":155596},"main":"./index.js","type":"module","types":"./index.d.ts","exports":{".":{"types":"./index.d.ts","default":"./index.js"},"./tokens.css":"./tokens.css"},"gitHead":"626e5e5d6e2e7c47bdbf2e3a6c915e15a7cb182d","scripts":{"generate":"tsx scripts/generate.ts"},"_npmUser":{"name":"piotrekwitkowski","email":"piotrekwitkowski1@gmail.com"},"_npmVersion":"11.11.0","description":"CSS custom properties for Cumulus UI — light and dark mode tokens generated from Cloudscape Design System","directories":{},"_nodeVersion":"24.13.0","_hasShrinkwrap":false,"devDependencies":{"tsx":"^4.21.0","typescript":"~5.9.3","@cloudscape-design/design-tokens":"^3.0.78"},"_npmOperationalInternal":{"tmp":"tmp/design-tokens_0.3.1_1775697376232_0.474334615975863","host":"s3://npm-registry-packages-npm-production"}},"0.3.3":{"name":"@cumulus-ui/design-tokens","version":"0.3.3","keywords":["cloudscape","design-tokens","css-custom-properties","dark-mode"],"license":"Apache-2.0","_id":"@cumulus-ui/design-tokens@0.3.3","maintainers":[{"name":"piotrekwitkowski","email":"piotrekwitkowski1@gmail.com"}],"homepage":"https://github.com/cumulus-ui/design-tokens#readme","bugs":{"url":"https://github.com/cumulus-ui/design-tokens/issues"},"dist":{"shasum":"ae3bc5d3d8e6e5980f428f0702e2d9242350ffec","tarball":"https://registry.npmjs.org/@cumulus-ui/design-tokens/-/design-tokens-0.3.3.tgz","fileCount":6,"integrity":"sha512-Wp1Xp3Fr1c9GlZpw/Gu7e/BTu/0coVqDb5Nc0LgtFr1BV2NSkXNqn0GJrNu1cFnMn85gs4A4nhSm0Lan9x7ZNw==","signatures":[{"sig":"MEUCIDF2fdQTB0Ls1vYBcgyZeDNiD/cpLogbE28g47kmrVazAiEAvk60n/bLpHa5+BVjOxPF0BVcPMtchyA8OzuvL+Hxp18=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@cumulus-ui%2fdesign-tokens@0.3.3","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":156707},"main":"./index.js","type":"module","types":"./index.d.ts","exports":{".":{"types":"./index.d.ts","default":"./index.js"},"./tokens.css":"./tokens.css"},"gitHead":"36a0790774d4171f8e0d4990937e77412de6ba14","scripts":{"generate":"tsx scripts/generate.ts"},"_npmUser":{"name":"piotrekwitkowski","email":"piotrekwitkowski1@gmail.com"},"repository":{"url":"git+https://github.com/cumulus-ui/design-tokens.git","type":"git"},"_npmVersion":"11.11.0","description":"CSS custom properties for Cumulus UI — light and dark mode tokens generated from Cloudscape Design System","directories":{},"_nodeVersion":"24.14.1","_hasShrinkwrap":false,"devDependencies":{"tsx":"^4.21.0","typescript":"~5.9.3","@cloudscape-design/design-tokens":"^3.0.78","@cloudscape-design/global-styles":"^1.0.57"},"_npmOperationalInternal":{"tmp":"tmp/design-tokens_0.3.3_1775762943209_0.4861183760226957","host":"s3://npm-registry-packages-npm-production"}},"0.4.3":{"name":"@cumulus-ui/design-tokens","version":"0.4.3","keywords":["cloudscape","design-tokens","css-custom-properties","dark-mode"],"license":"Apache-2.0","_id":"@cumulus-ui/design-tokens@0.4.3","maintainers":[{"name":"piotrekwitkowski","email":"piotrekwitkowski1@gmail.com"}],"homepage":"https://github.com/cumulus-ui/design-tokens#readme","bugs":{"url":"https://github.com/cumulus-ui/design-tokens/issues"},"dist":{"shasum":"b185e4cab3b654d2186063c755ce56562580dbdb","tarball":"https://registry.npmjs.org/@cumulus-ui/design-tokens/-/design-tokens-0.4.3.tgz","fileCount":6,"integrity":"sha512-m1qotAl+7wASn7y1lDERCWLtH7WhzQT+EZg4Zo/vKvOQ6GP8tfkqVUffBN1X3VNsSth42ovyyleFLRp6NrXpvQ==","signatures":[{"sig":"MEUCIFyPjUOOD077zsW7lQD2NkgDs70CMk7eTzDExk2HG8daAiEAgiQzrfpcFA9lfCIFIs+2h4y7WyNBbjLBE0V+pajlJkM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@cumulus-ui%2fdesign-tokens@0.4.3","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":154163},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"./tokens.css":"./dist/tokens.css"},"gitHead":"2d3f96284542a50f55100ed8f5f363c7d3fce868","scripts":{"generate":"tsx scripts/generate.ts","prepublishOnly":"tsx scripts/generate.ts"},"_npmUser":{"name":"piotrekwitkowski","email":"piotrekwitkowski1@gmail.com"},"repository":{"url":"git+https://github.com/cumulus-ui/design-tokens.git","type":"git"},"_npmVersion":"11.11.0","description":"CSS custom properties for Cumulus UI — light and dark mode tokens generated from Cloudscape Design System","directories":{},"_nodeVersion":"24.14.1","_hasShrinkwrap":false,"devDependencies":{"tsx":"^4.21.0","typescript":"~5.9.3","@cloudscape-design/components":"^3.0.1270","@cloudscape-design/design-tokens":"^3.0.78","@cloudscape-design/global-styles":"^1.0.57"},"_npmOperationalInternal":{"tmp":"tmp/design-tokens_0.4.3_1775764473443_0.9699085285746103","host":"s3://npm-registry-packages-npm-production"}},"0.4.4":{"name":"@cumulus-ui/design-tokens","version":"0.4.4","description":"CSS custom properties for Cumulus UI — light and dark mode tokens generated from Cloudscape Design System","type":"module","main":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"./tokens.css":"./dist/tokens.css"},"scripts":{"generate":"tsx scripts/generate.ts","test":"vitest run","prepublishOnly":"tsx scripts/generate.ts"},"keywords":["cloudscape","design-tokens","css-custom-properties","dark-mode"],"license":"Apache-2.0","repository":{"type":"git","url":"git+https://github.com/cumulus-ui/design-tokens.git"},"devDependencies":{"@cloudscape-design/components":"^3.0.1270","@cloudscape-design/design-tokens":"^3.0.78","@cloudscape-design/global-styles":"^1.0.57","tsx":"^4.21.0","typescript":"~5.9.3","vitest":"^4.1.4"},"gitHead":"30e1f60a43214bbcb92be0878cbbe94f5f88b912","_id":"@cumulus-ui/design-tokens@0.4.4","bugs":{"url":"https://github.com/cumulus-ui/design-tokens/issues"},"homepage":"https://github.com/cumulus-ui/design-tokens#readme","_nodeVersion":"24.14.1","_npmVersion":"11.11.0","dist":{"integrity":"sha512-VUj+tBsmW+nlrLkokUA3nKSRSZiZ0hYcM8WnigZgL4DibFiGm7Y5lxuzJ0VYBdG8jkN7HZNAkvxj1ODdwGeVxQ==","shasum":"95bd4503a494cadcd59bfe55ee37706a5ba459ea","tarball":"https://registry.npmjs.org/@cumulus-ui/design-tokens/-/design-tokens-0.4.4.tgz","fileCount":6,"unpackedSize":163442,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@cumulus-ui%2fdesign-tokens@0.4.4","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCNg+8KsWDLBA/0O4uGeOiM4VEScg9SOp2ckdIjXjA/WwIhAJmF0hIxeu136VqqCDFfsgDW30PsbMruOhgUBBujnFOF"}]},"_npmUser":{"name":"piotrekwitkowski","email":"piotrekwitkowski1@gmail.com"},"directories":{},"maintainers":[{"name":"piotrekwitkowski","email":"piotrekwitkowski1@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/design-tokens_0.4.4_1775765625362_0.8886183680998705"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-07T15:08:42.940Z","modified":"2026-04-09T20:13:45.824Z","0.1.0":"2026-04-07T15:08:43.182Z","0.2.0":"2026-04-08T17:47:39.705Z","0.3.0":"2026-04-09T01:07:08.995Z","0.3.1":"2026-04-09T01:16:16.378Z","0.3.3":"2026-04-09T19:29:03.357Z","0.4.3":"2026-04-09T19:54:33.646Z","0.4.4":"2026-04-09T20:13:45.516Z"},"bugs":{"url":"https://github.com/cumulus-ui/design-tokens/issues"},"license":"Apache-2.0","homepage":"https://github.com/cumulus-ui/design-tokens#readme","keywords":["cloudscape","design-tokens","css-custom-properties","dark-mode"],"repository":{"type":"git","url":"git+https://github.com/cumulus-ui/design-tokens.git"},"description":"CSS custom properties for Cumulus UI — light and dark mode tokens generated from Cloudscape Design System","maintainers":[{"name":"piotrekwitkowski","email":"piotrekwitkowski1@gmail.com"}],"readme":"# @cumulus-ui/design-tokens\n\nCSS custom properties for Cumulus UI — light and dark mode tokens generated from Cloudscape Design System.\n\n## Install\n\n```bash\nnpm install @cumulus-ui/design-tokens\n```\n\n## Usage\n\n### CSS\n\nLoad the token stylesheet once in your application entry point:\n\n```js\nimport '@cumulus-ui/design-tokens/tokens.css';\n```\n\nThen use tokens as CSS custom properties anywhere:\n\n```css\n.my-component {\n  color: var(--color-text-body-default);\n  background: var(--color-background-layout-main);\n  border-radius: var(--border-radius-container);\n}\n```\n\n### JavaScript / TypeScript\n\nFor inline styles or JS-driven styling, import named token constants:\n\n```js\nimport { colorTextBodyDefault, colorBackgroundLayoutMain } from '@cumulus-ui/design-tokens';\n\nelement.style.color = colorTextBodyDefault; // → \"var(--color-text-body-default)\"\n```\n\n### Dark mode\n\nTokens respond to the `.awsui-dark-mode` class on `<html>`:\n\n```js\n// Enable dark mode\ndocument.documentElement.classList.add('awsui-dark-mode');\n\n// Disable dark mode\ndocument.documentElement.classList.remove('awsui-dark-mode');\n```\n\nAll token values update automatically — no additional imports or class changes needed.\n\n## Token naming\n\nTokens follow the Cloudscape [CTI naming convention](https://cloudscape.design/foundation/visual-foundation/design-tokens/) (Category → Type → Item → State):\n\n```\n--color-background-button-primary-default\n  │       │         │       │       └─ state\n  │       │         │       └───────── sub-item\n  │       │         └───────────────── item\n  │       └─────────────────────────── type\n  └─────────────────────────────────── category\n```\n\n## Design decisions\n\n### No hashed variable names\n\nCloudscape uses content-hashed suffixes on CSS custom property names (e.g. `--color-text-body-default-vvtq8u`). The hash is an MD5 digest of the token's value set, designed to signal version changes and discourage direct CSS usage in their React ecosystem.\n\nCumulus strips these hashes. Our CSS properties use canonical token names directly:\n\n```css\n/* Cloudscape */\nvar(--color-text-body-default-vvtq8u, #0f141a)\n\n/* Cumulus */\nvar(--color-text-body-default, #0f141a)\n```\n\n**Why:** Hashed names provide collision avoidance and version signaling, but at the cost of developer experience. Every other web component design system (Shoelace, Spectrum, Carbon, Vaadin) uses clean, human-readable names. Since Cumulus owns both the token definitions and the component CSS, we can guarantee name-value consistency through our generation pipeline rather than encoding it in variable names. See the full rationale below.\n\n**What Cloudscape's hashes solve and how we address each:**\n\n| Cloudscape concern | Hash solution | Cumulus alternative |\n|---|---|---|\n| Value changes break silently | Hash changes → loud CSS failure | We regenerate tokens + components in the same release |\n| Direct CSS usage discouraged | Names are unmemorable | Direct CSS usage is encouraged — clean names are the API |\n| Multi-theme collision | Different hashes per theme | Not applicable; single-theme with light/dark mode |\n\n### No namespace prefix\n\nUnlike other design systems (`--sl-`, `--cds-`, `--spectrum-`), Cumulus tokens have no prefix. The CTI naming convention produces specific enough names (`--color-background-button-primary-default`) that collisions are impractical. If a prefix becomes necessary (e.g. for multi-system pages), it can be added to the generator with a one-line change.\n\n### No fallbacks in JS exports\n\nThe JavaScript token exports contain `var()` references without fallback values:\n\n```js\nexport const colorTextBodyDefault = \"var(--color-text-body-default)\";\n// NOT: \"var(--color-text-body-default, #0f141a)\"\n```\n\nThis is intentional. If `tokens.css` is not loaded, things should break visibly rather than silently rendering light-mode-only values. Component CSS retains inline fallbacks as a safety net for Shadow DOM isolation.\n\n## Regenerating\n\nTokens are auto-generated from `@cloudscape-design/design-tokens`:\n\n```bash\nnpm run generate\n```\n\nThis reads the upstream JSON (token names + light/dark values) and JS (to discover the token set), then outputs `tokens.css`, `index.js`, and `index.d.ts` with clean names.\n","readmeFilename":"README.md"}