{"_id":"@beam-ui/design-tokens","_rev":"8-00bad49f7071a6de9498c9bf64d66de4","name":"@beam-ui/design-tokens","dist-tags":{"latest":"2.3.1"},"versions":{"1.0.0":{"name":"@beam-ui/design-tokens","version":"1.0.0","keywords":["design-tokens","design-system","tokens","css-variables","style-dictionary","beam-ui"],"author":{"name":"Beam UI Team"},"license":"MIT","_id":"@beam-ui/design-tokens@1.0.0","maintainers":[{"name":"leo_alekseev","email":"leo@tatari.tv"},{"name":"jordang-tatari","email":"jordan.gulbronson@tatari.tv"},{"name":"tatarian","email":"ian.mceachern@tatari.tv"}],"homepage":"https://github.com/tatari-tv/beam-ui/tree/main/design-tokens#readme","bugs":{"url":"https://github.com/tatari-tv/beam-ui/issues"},"dist":{"shasum":"5a9b019cb1a4d9d2d9b87307dcd7b0520ee96a37","tarball":"https://registry.npmjs.org/@beam-ui/design-tokens/-/design-tokens-1.0.0.tgz","fileCount":13,"integrity":"sha512-VN7kteQx21WV22JftWkftA3bZ67VgcczZHCy+36+oHxnjGAcP5egEnmQzgwqYNFxvrLGwl3VEMqHNWHMIT0tNQ==","signatures":[{"sig":"MEQCIGSsCWsqMI0sMNDPv2Hh2PxGlzs2HpnJ3M42lDtGIS/sAiBYIqs9mujB2I6kda7lvprOMUghUr65vso+YvC7qN9qkQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":87890},"main":"./build/base/tokens.es6.js","type":"module","module":"./build/base/tokens.es6.js","exports":{"./build/*":"./build/*"},"gitHead":"3d9e2afa85445180543962b56989b369679a33a1","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"node ./build.js","clean":"rm -rf build","release":"npm run build && changeset publish","version":"changeset version","changeset":"changeset","prepublishOnly":"npm run clean && npm run build"},"_npmUser":{"name":"leo_alekseev","email":"leo@tatari.tv"},"repository":{"url":"git+https://github.com/tatari-tv/beam-ui.git","type":"git","directory":"design-tokens"},"_npmVersion":"11.4.2","description":"A collection of design decisions and other artifacts for the Beam UI Design System","directories":{},"_nodeVersion":"24.4.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"@changesets/cli":"^2.29.7","style-dictionary":"^5.1.1"},"_npmOperationalInternal":{"tmp":"tmp/design-tokens_1.0.0_1761160015739_0.6241484349742805","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@beam-ui/design-tokens","version":"1.0.1","keywords":["design-tokens","design-system","tokens","css-variables","style-dictionary","beam-ui"],"author":{"name":"Beam UI Team"},"license":"MIT","_id":"@beam-ui/design-tokens@1.0.1","maintainers":[{"name":"leo_alekseev","email":"leo@tatari.tv"},{"name":"jordang-tatari","email":"jordan.gulbronson@tatari.tv"},{"name":"tatarian","email":"ian.mceachern@tatari.tv"}],"homepage":"https://github.com/tatari-tv/beam-ui/tree/main/design-tokens#readme","bugs":{"url":"https://github.com/tatari-tv/beam-ui/issues"},"dist":{"shasum":"de290dd72364e191d80f101d79b3ffda7cecd062","tarball":"https://registry.npmjs.org/@beam-ui/design-tokens/-/design-tokens-1.0.1.tgz","fileCount":13,"integrity":"sha512-F/Eg6bSGqFTSXIMPtsCJ33R0OVUgukPKYbCXK1bDbDRkq03wf5ByLeDeRq9ZUst7wrH6Z3B2EEvGhj111nvLKQ==","signatures":[{"sig":"MEYCIQD1kHGJ6JZfINFSr6plATs0rIhAY6ib3T5MK29UgOvqLwIhAOimkeIPZ2uZFdeQnvcLxOtDtIkKzs6IKdpsqqwz6egE","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":76188},"main":"./build/base/tokens.es6.js","type":"module","module":"./build/base/tokens.es6.js","exports":{"./build/*":"./build/*"},"gitHead":"eb92c20f1f079830629902b3928ab7ef4cdf8f95","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"node ./build.js","clean":"rm -rf build","release":"npm run build && changeset publish","version":"changeset version","changeset":"changeset","prepublishOnly":"npm run clean && npm run build"},"_npmUser":{"name":"leo_alekseev","email":"leo@tatari.tv"},"repository":{"url":"git+https://github.com/tatari-tv/beam-ui.git","type":"git","directory":"design-tokens"},"_npmVersion":"11.4.2","description":"A collection of design decisions and other artifacts for the Beam UI Design System","directories":{},"_nodeVersion":"24.4.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"@changesets/cli":"^2.29.7","style-dictionary":"^5.1.1"},"_npmOperationalInternal":{"tmp":"tmp/design-tokens_1.0.1_1761236196266_0.7758712035573956","host":"s3://npm-registry-packages-npm-production"}},"2.0.0":{"name":"@beam-ui/design-tokens","version":"2.0.0","keywords":["design-tokens","design-system","tokens","css-variables","style-dictionary","beam-ui"],"author":{"name":"Beam UI Team"},"license":"MIT","_id":"@beam-ui/design-tokens@2.0.0","maintainers":[{"name":"leo_alekseev","email":"leo@tatari.tv"},{"name":"jordang-tatari","email":"jordan.gulbronson@tatari.tv"},{"name":"tatarian","email":"ian.mceachern@tatari.tv"}],"homepage":"https://github.com/tatari-tv/beam-ui/tree/main/design-tokens#readme","bugs":{"url":"https://github.com/tatari-tv/beam-ui/issues"},"dist":{"shasum":"267bd33686407de977a637445070361ad0dc9378","tarball":"https://registry.npmjs.org/@beam-ui/design-tokens/-/design-tokens-2.0.0.tgz","fileCount":13,"integrity":"sha512-r9yyONWDsV2PgnUQ5gkfa0z/gLsUoLrknSWgstIDOJL7A+wvO7vYjDp5mPe4zzd4W5AGTe9hZLkvUpZ349JcLg==","signatures":[{"sig":"MEYCIQD0MzEGNKV7oAIr5Nddf9d6cHYwDG+W2pyLVdXsFMGU/wIhAPuGhwUjYgpoSofhdq3UUjg8ll/4ItA2DWaifJsEQERY","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":81573},"main":"./build/base/tokens.es6.js","type":"module","module":"./build/base/tokens.es6.js","exports":{"./build/*":"./build/*"},"gitHead":"c8982dc5c92d6ad80052650cb75ea1a3d85c9dd9","scripts":{"lint":"echo \"No-op\"","test":"echo \"Error: no test specified\" && exit 1","build":"node ./build.js","clean":"rm -rf build","release":"npm publish --access public","version":"changeset version","test:run":"echo \"No-op\"","create-tag":"node ../scripts/create-tag.js design-tokens","prerelease":"yarn clean && yarn build","create-tag:push":"yarn create-tag && git push origin $(git describe --tags --abbrev=0)"},"_npmUser":{"name":"leo_alekseev","email":"leo@tatari.tv"},"repository":{"url":"git+https://github.com/tatari-tv/beam-ui.git","type":"git","directory":"design-tokens"},"_npmVersion":"11.5.1","description":"A collection of design decisions and other artifacts for the Beam UI Design System","directories":{},"_nodeVersion":"24.5.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"@changesets/cli":"^2.29.7","style-dictionary":"^5.1.1"},"_npmOperationalInternal":{"tmp":"tmp/design-tokens_2.0.0_1769107899821_0.3949081379697399","host":"s3://npm-registry-packages-npm-production"}},"2.0.1":{"name":"@beam-ui/design-tokens","version":"2.0.1","keywords":["design-tokens","design-system","tokens","css-variables","style-dictionary","beam-ui"],"author":{"name":"Beam UI Team"},"license":"MIT","_id":"@beam-ui/design-tokens@2.0.1","maintainers":[{"name":"leo_alekseev","email":"leo@tatari.tv"},{"name":"jordang-tatari","email":"jordan.gulbronson@tatari.tv"},{"name":"tatarian","email":"ian.mceachern@tatari.tv"}],"homepage":"https://github.com/tatari-tv/beam-ui/tree/main/design-tokens#readme","bugs":{"url":"https://github.com/tatari-tv/beam-ui/issues"},"dist":{"shasum":"1168666c884707f85ebfe77b71b5340c0403b404","tarball":"https://registry.npmjs.org/@beam-ui/design-tokens/-/design-tokens-2.0.1.tgz","fileCount":13,"integrity":"sha512-J6VlghqFf30GPrkklSJxpEl+5OLDVY3n3WW//B/ThFI2n9sZ9Ka3f35Vx3Jn0xpq2QSyJk13sf8uElAG/47swg==","signatures":[{"sig":"MEQCIBQKHI2JVZSeJNIuQDusSgX8Zj1QOiD5sgkO5YpaJdogAiAvRVgqkb1yZtHlTNvUIR2WFrNaV6c+Yk7Ci17raRWeAA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":85126},"main":"./build/base/tokens.es6.js","type":"module","module":"./build/base/tokens.es6.js","exports":{"./build/*":"./build/*"},"gitHead":"e49f78bfe5ff3c8bd67b526501345ca36b0e890b","scripts":{"lint":"echo \"No-op\"","test":"echo \"Error: no test specified\" && exit 1","build":"node ./build.js","clean":"rm -rf build","release":"npm publish --access public","version":"changeset version","test:run":"echo \"No-op\"","changeset":"changeset","create-tag":"node ../scripts/create-tag.js design-tokens","prerelease":"yarn clean && yarn build","create-tag:push":"yarn create-tag && git push origin $(git describe --tags --abbrev=0)"},"_npmUser":{"name":"leo_alekseev","email":"leo@tatari.tv"},"repository":{"url":"git+https://github.com/tatari-tv/beam-ui.git","type":"git","directory":"design-tokens"},"_npmVersion":"11.5.1","description":"A collection of design decisions and other artifacts for the Beam UI Design System","directories":{},"_nodeVersion":"24.5.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"@changesets/cli":"^2.29.7","style-dictionary":"^5.1.1"},"_npmOperationalInternal":{"tmp":"tmp/design-tokens_2.0.1_1769642607504_0.8969277227448216","host":"s3://npm-registry-packages-npm-production"}},"2.1.0":{"name":"@beam-ui/design-tokens","version":"2.1.0","keywords":["design-tokens","design-system","tokens","css-variables","style-dictionary","beam-ui"],"author":{"name":"Beam UI Team"},"license":"MIT","_id":"@beam-ui/design-tokens@2.1.0","maintainers":[{"name":"leo_alekseev","email":"leo@tatari.tv"},{"name":"jordang-tatari","email":"jordan.gulbronson@tatari.tv"},{"name":"tatarian","email":"ian.mceachern@tatari.tv"}],"homepage":"https://github.com/tatari-tv/beam-ui/tree/main/design-tokens#readme","bugs":{"url":"https://github.com/tatari-tv/beam-ui/issues"},"dist":{"shasum":"38fae3b35b56814c752b6727841cf82307be98ee","tarball":"https://registry.npmjs.org/@beam-ui/design-tokens/-/design-tokens-2.1.0.tgz","fileCount":13,"integrity":"sha512-DDhK7pd4vMMx+sN1dZ5BqhBZvs6o0nRtwhqWbi8brjAON0iJ1Sla/oBNxU1ohfq0CWTeCGkMIZ/2UL+LFpSqUA==","signatures":[{"sig":"MEQCIEIGlD5rxnrY4OHYiI/0bX0mjt4KIWj1MhWjlf8d8ZqBAiB4VDRuJgwSi5ILA5iv5AvjG1tvw1/AUFN58ZkL0/AO/g==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":92024},"main":"./build/base/tokens.es6.js","type":"module","module":"./build/base/tokens.es6.js","exports":{"./build/*":"./build/*"},"gitHead":"32d836fd0b9ba206a8d71d7882f4523b3bcbcf9a","scripts":{"lint":"echo \"No-op\"","test":"echo \"Error: no test specified\" && exit 1","build":"node ./build.js","clean":"rm -rf build","release":"npm publish --access public","version":"changeset version","test:run":"echo \"No-op\"","changeset":"changeset","create-tag":"node ../scripts/create-tag.js design-tokens","prerelease":"yarn clean && yarn build","create-tag:push":"yarn create-tag && git push origin $(git describe --tags --abbrev=0)"},"_npmUser":{"name":"leo_alekseev","email":"leo@tatari.tv"},"repository":{"url":"git+https://github.com/tatari-tv/beam-ui.git","type":"git","directory":"design-tokens"},"_npmVersion":"11.5.1","description":"A collection of design decisions and other artifacts for the Beam UI Design System","directories":{},"_nodeVersion":"24.5.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"@changesets/cli":"^2.29.7","style-dictionary":"^5.1.1"},"_npmOperationalInternal":{"tmp":"tmp/design-tokens_2.1.0_1771888939357_0.874605455592872","host":"s3://npm-registry-packages-npm-production"}},"2.2.0":{"name":"@beam-ui/design-tokens","version":"2.2.0","keywords":["design-tokens","design-system","tokens","css-variables","style-dictionary","beam-ui"],"author":{"name":"Beam UI Team"},"license":"MIT","_id":"@beam-ui/design-tokens@2.2.0","maintainers":[{"name":"leo_alekseev","email":"leo@tatari.tv"},{"name":"jordang-tatari","email":"jordan.gulbronson@tatari.tv"},{"name":"tatarian","email":"ian.mceachern@tatari.tv"}],"homepage":"https://github.com/tatari-tv/beam-ui/tree/main/design-tokens#readme","bugs":{"url":"https://github.com/tatari-tv/beam-ui/issues"},"dist":{"shasum":"4c2a2fdd2dd82835e5f272382b4d7fd497e5e6cb","tarball":"https://registry.npmjs.org/@beam-ui/design-tokens/-/design-tokens-2.2.0.tgz","fileCount":13,"integrity":"sha512-UFphwf1gWsfk5fodmSlxDvvcYtMIiwJUV+4uXdrZzkUDQK70i9pXOKbvwxdI0Ea6qawP7HK2+HH6gZQwccIzbg==","signatures":[{"sig":"MEYCIQCS0nJQK5luxT/U4J9Bmwsd3OnucFgjSx3W0cMSA2WlKAIhAO9ZMVbDlAyr4Pttbx8jbSMdiq0yJHLcgyKXZyiuz2ot","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":96816},"main":"./build/base/tokens.es6.js","type":"module","module":"./build/base/tokens.es6.js","exports":{"./build/*":"./build/*"},"gitHead":"ca87ff5447445e649c326be3bccc4ce1d7b2f756","scripts":{"lint":"echo \"No-op\"","test":"echo \"Error: no test specified\" && exit 1","build":"node ./build.js","clean":"rm -rf build","release":"npm publish --access public","version":"changeset version","test:run":"echo \"No-op\"","changeset":"changeset","create-tag":"node ../scripts/create-tag.js design-tokens","prerelease":"yarn clean && yarn build","create-tag:push":"yarn create-tag && git push origin $(git describe --tags --abbrev=0)"},"_npmUser":{"name":"leo_alekseev","email":"leo@tatari.tv"},"repository":{"url":"git+https://github.com/tatari-tv/beam-ui.git","type":"git","directory":"design-tokens"},"_npmVersion":"11.5.1","description":"A collection of design decisions and other artifacts for the Beam UI Design System","directories":{},"_nodeVersion":"24.5.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"@changesets/cli":"^2.31.0","style-dictionary":"^5.4.4"},"_npmOperationalInternal":{"tmp":"tmp/design-tokens_2.2.0_1781285755075_0.7880545194895248","host":"s3://npm-registry-packages-npm-production"}},"2.3.0":{"name":"@beam-ui/design-tokens","version":"2.3.0","keywords":["design-tokens","design-system","tokens","css-variables","style-dictionary","beam-ui"],"author":{"name":"Beam UI Team"},"license":"MIT","_id":"@beam-ui/design-tokens@2.3.0","maintainers":[{"name":"leo_alekseev","email":"leo@tatari.tv"},{"name":"jordang-tatari","email":"jordan.gulbronson@tatari.tv"},{"name":"tatarian","email":"ian.mceachern@tatari.tv"}],"homepage":"https://github.com/tatari-tv/beam-ui/tree/main/design-tokens#readme","bugs":{"url":"https://github.com/tatari-tv/beam-ui/issues"},"dist":{"shasum":"fe08c80a99e0e18ce91190d54413413b37bc849d","tarball":"https://registry.npmjs.org/@beam-ui/design-tokens/-/design-tokens-2.3.0.tgz","fileCount":16,"integrity":"sha512-wivSQPQunJM7BAfzSP4k803ZlImAuJoXwAe2gaLHjzgzvPZOWTVZdNLycMcGKm1ggYb3zShR2/uB1Pfadop//Q==","signatures":[{"sig":"MEYCIQDwVqJhJA9P0ra9y6h+dAij7D5BJnMh+Wxp3z6lFF61/wIhALuCkqf54ebaDBtyKACLtv4upbN8KRxzW0/xuxCgbx9Y","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":132937},"main":"./build/base/tokens.es6.js","type":"module","module":"./build/base/tokens.es6.js","exports":{"./build/*":"./build/*","./tailwind":{"style":"./build/tailwind/theme.css","default":"./build/tailwind/theme.css"},"./tailwind/theme.json":"./build/tailwind/theme.json","./build/tailwind/theme-base.css":null},"gitHead":"327c3f10400a116f0438eedfdea4c240b85d5af8","scripts":{"lint":"echo \"No-op\"","test":"echo \"Error: no test specified\" && exit 1","build":"node ./build.js","clean":"rm -rf build","release":"npm publish --access public","version":"changeset version","test:run":"node --test src/formats/tailwind/__tests__/*.test.js","changeset":"changeset","create-tag":"node ../scripts/create-tag.js design-tokens","prerelease":"yarn clean && yarn build","create-tag:push":"yarn create-tag && git push origin $(git describe --tags --abbrev=0)","test:update-snapshots":"node --test --test-update-snapshots src/formats/tailwind/__tests__/*.test.js"},"_npmUser":{"name":"leo_alekseev","email":"leo@tatari.tv"},"repository":{"url":"git+https://github.com/tatari-tv/beam-ui.git","type":"git","directory":"design-tokens"},"_npmVersion":"11.5.1","description":"A collection of design decisions and other artifacts for the Beam UI Design System","directories":{},"_nodeVersion":"24.5.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"@changesets/cli":"^2.31.0","style-dictionary":"^5.4.4"},"peerDependencies":{"tailwindcss":"^4.0.0"},"peerDependenciesMeta":{"tailwindcss":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/design-tokens_2.3.0_1787870864034_0.4328118609819993","host":"s3://npm-registry-packages-npm-production"}},"2.3.1":{"name":"@beam-ui/design-tokens","version":"2.3.1","description":"A collection of design decisions and other artifacts for the Beam UI Design System","type":"module","main":"./build/base/tokens.es6.js","module":"./build/base/tokens.es6.js","exports":{"./build/tailwind/theme-base.css":null,"./build/*":"./build/*","./tailwind":{"style":"./build/tailwind/theme.css","default":"./build/tailwind/theme.css"},"./tailwind/theme.json":"./build/tailwind/theme.json"},"repository":{"type":"git","url":"git+https://github.com/tatari-tv/beam-ui.git","directory":"design-tokens"},"homepage":"https://github.com/tatari-tv/beam-ui/tree/main/design-tokens#readme","bugs":{"url":"https://github.com/tatari-tv/beam-ui/issues"},"keywords":["design-tokens","design-system","tokens","css-variables","style-dictionary","beam-ui"],"scripts":{"build":"node ./build.js","clean":"rm -rf build","changeset":"changeset","version":"changeset version","prerelease":"yarn clean && yarn build","release":"npm publish --access public","create-tag":"node ../scripts/create-tag.js design-tokens","create-tag:push":"yarn create-tag && git push origin $(git describe --tags --abbrev=0)","test":"echo \"Error: no test specified\" && exit 1","test:run":"node --test src/formats/tailwind/__tests__/*.test.js","test:update-snapshots":"node --test --test-update-snapshots src/formats/tailwind/__tests__/*.test.js","lint":"echo \"No-op\""},"author":{"name":"Beam UI Team"},"license":"MIT","publishConfig":{"access":"public"},"devDependencies":{"@changesets/cli":"^2.31.0","style-dictionary":"^5.4.4"},"peerDependencies":{"tailwindcss":"^4.0.0"},"peerDependenciesMeta":{"tailwindcss":{"optional":true}},"_id":"@beam-ui/design-tokens@2.3.1","gitHead":"6bea9b0ee114e8b5e8b5e748649b8a46b1fbc348","_nodeVersion":"24.5.0","_npmVersion":"11.5.1","dist":{"integrity":"sha512-9bYlGbjLz0dwg1P9tiwbSne9ZEKSgtx6E85lfGVoGp0flaS9Z24VDNvvcC6WBUMCj9a9jL3nvPG94eHv508JCA==","shasum":"756c6b2faab5915d086b0fd17fb080472c2d8049","tarball":"https://registry.npmjs.org/@beam-ui/design-tokens/-/design-tokens-2.3.1.tgz","fileCount":16,"unpackedSize":133452,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDeGcaZFQ03zt6tgup+p+82OR38UpXudpThGTUWyD84MAIhAKwzWssOoqv7BChcK4OAndvfnJYpkkkNSHkUE/XrbvlI"}]},"_npmUser":{"name":"leo_alekseev","email":"leo@tatari.tv"},"directories":{},"maintainers":[{"name":"leo_alekseev","email":"leo@tatari.tv"},{"name":"jordang-tatari","email":"jordan.gulbronson@tatari.tv"},{"name":"tatarian","email":"ian.mceachern@tatari.tv"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/design-tokens_2.3.1_1788539591877_0.4225222172258041"},"_hasShrinkwrap":false}},"time":{"created":"2025-10-22T19:06:55.635Z","modified":"2026-09-04T16:33:12.194Z","1.0.0":"2025-10-22T19:06:55.922Z","1.0.1":"2025-10-23T16:16:36.463Z","2.0.0":"2026-01-22T18:51:39.985Z","2.0.1":"2026-01-28T23:23:27.723Z","2.1.0":"2026-02-23T23:22:19.475Z","2.2.0":"2026-06-12T17:35:55.277Z","2.3.0":"2026-08-27T22:47:44.170Z","2.3.1":"2026-09-04T16:33:12.022Z"},"bugs":{"url":"https://github.com/tatari-tv/beam-ui/issues"},"author":{"name":"Beam UI Team"},"license":"MIT","homepage":"https://github.com/tatari-tv/beam-ui/tree/main/design-tokens#readme","keywords":["design-tokens","design-system","tokens","css-variables","style-dictionary","beam-ui"],"repository":{"type":"git","url":"git+https://github.com/tatari-tv/beam-ui.git","directory":"design-tokens"},"description":"A collection of design decisions and other artifacts for the Beam UI Design System","maintainers":[{"name":"leo_alekseev","email":"leo@tatari.tv"},{"name":"jordang-tatari","email":"jordan.gulbronson@tatari.tv"},{"name":"tatarian","email":"ian.mceachern@tatari.tv"}],"readme":"# Beam UI Design Tokens\n\nA centralized collection of design decisions and other artifacts for the Beam UI Design System.\n\n## Overview\n\nDesign tokens are the visual design atoms — specifically, they are named entities that store various design decisions. This package provides these tokens in multiple formats for consistent use across applications.\n\n## Installation\n\n### Option 1: npm/yarn\n\nFor applications with a build process:\n\n```bash\nnpm install @beam-ui/design-tokens\n# or\nyarn add @beam-ui/design-tokens\n```\n\n### Option 2: CDN via UNPKG or jsDelivr (Zero Configuration)\n\nFor server-side rendered HTML, static sites, or environments where build process is not available.\n\nThe package is available via CDN with all token formats accessible directly - **no build process needed**! (Works with both UNPKG and jsDelivr.)\n\n**Loading CSS Variables:**\n\n```html\n<!-- Import all token layers (recommended) -->\n<link rel=\"stylesheet\" href=\"https://unpkg.com/@beam-ui/design-tokens@latest/build/globals/variables.css\">\n<link rel=\"stylesheet\" href=\"https://unpkg.com/@beam-ui/design-tokens@latest/build/base/variables.css\">\n<link rel=\"stylesheet\" href=\"https://unpkg.com/@beam-ui/design-tokens@latest/build/semantic/variables.css\">\n\n<!-- or using jsDelivr -->\n<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@beam-ui/design-tokens@latest/build/globals/variables.css\">\n<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@beam-ui/design-tokens@latest/build/base/variables.css\">\n<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@beam-ui/design-tokens@latest/build/semantic/variables.css\">\n```\n\n**Loading JavaScript Tokens:**\n\n```html\n<script type=\"module\">\n  import { colorGrayBlack, spacingMedium } from 'https://unpkg.com/@beam-ui/design-tokens@latest/build/base/tokens.es6.js';\n  // or\n  import { buttonPrimaryBackground } from 'https://cdn.jsdelivr.net/npm/@beam-ui/design-tokens@latest/build/semantic/tokens.es6.js';\n</script>\n```\n\n**💡 Use Cases for CDN:**\n- Server-side templating (PHP, Ruby, Python, etc.)\n- Static HTML sites without build tools\n- Quick prototypes and demos\n- CodePen/JSFiddle examples\n- Documentation and tutorials\n\n**⚡ Performance Benefits:**\n- **Zero configuration** - no build process required\n- **Direct access** to all token formats (CSS, JS, JSON)\n- **Selective loading** - load only the token layers you need\n- **Minified and optimized** by the CDN\n\n**⚠️ For Production:** Pin to a specific version instead of using `@latest`:\n\n```html\n<!-- CSS Variables with pinned version -->\n<link rel=\"stylesheet\" href=\"https://unpkg.com/@beam-ui/design-tokens@2.3.1/build/globals/variables.css\">\n<link rel=\"stylesheet\" href=\"https://unpkg.com/@beam-ui/design-tokens@2.3.1/build/base/variables.css\">\n<link rel=\"stylesheet\" href=\"https://unpkg.com/@beam-ui/design-tokens@2.3.1/build/semantic/variables.css\">\n\n<!-- JavaScript with pinned version -->\n<script type=\"module\">\n  import { colorGrayBlack } from 'https://unpkg.com/@beam-ui/design-tokens@2.3.1/build/base/tokens.es6.js';\n  // or\n  import { colorGrayBlack } from 'https://cdn.jsdelivr.net/npm/@beam-ui/design-tokens@2.3.1/build/base/tokens.es6.js';\n</script>\n```\n\n## Available Output Formats\n\nAll tokens are available in three formats:\n- **CSS Variables** (`variables.css`) - CSS custom properties\n- **JavaScript ES6** (`tokens.es6.js`) - ES6 module exports\n- **JSON** (`tokens.json`) - Nested JSON structure\n- **Tailwind v4 theme** (`build/tailwind/theme.css`) - see [Using with Tailwind CSS v4](#using-with-tailwind-css-v4)\n- **Tailwind theme manifest** (`build/tailwind/theme.json`) - see [Tailwind theme manifest](#tailwind-theme-manifest)\n\n## Token Layers\n\nTokens are organized in three layers:\n\n- **`build/globals/`** - Global tokens (breakpoints, accessibility, etc.)\n- **`build/base/`** - Default base tokens (colors, fonts, spacing, etc.)\n- **`build/semantic/`** - Default semantic tokens (buttons, typography, etc.)\n\nBrand-specific tokens can be found at `build/{brand}/base/` and `build/{brand}/semantic/` if custom brands exist.\n\n## Usage\n\n### Using CSS Variables\n\n#### Important: Semantic Tokens Require Base and Global Tokens\n\n**Semantic CSS tokens reference base and global tokens using CSS custom properties (`var()`)**, which means you must import all token files in the correct order for semantic tokens to work correctly.\n\n#### Recommended Import Order\n\n```css\n/* Import in this order: */\n@import '@beam-ui/design-tokens/build/globals/variables.css';\n@import '@beam-ui/design-tokens/build/base/variables.css';\n@import '@beam-ui/design-tokens/build/semantic/variables.css';\n```\n\nOr in your HTML (with npm):\n```html\n<link rel=\"stylesheet\" href=\"node_modules/@beam-ui/design-tokens/build/globals/variables.css\">\n<link rel=\"stylesheet\" href=\"node_modules/@beam-ui/design-tokens/build/base/variables.css\">\n<link rel=\"stylesheet\" href=\"node_modules/@beam-ui/design-tokens/build/semantic/variables.css\">\n```\n\nOr in your HTML (with CDN):\n```html\n<link rel=\"stylesheet\" href=\"https://unpkg.com/@beam-ui/design-tokens@2.3.1/build/globals/variables.css\">\n<link rel=\"stylesheet\" href=\"https://unpkg.com/@beam-ui/design-tokens@2.3.1/build/base/variables.css\">\n<link rel=\"stylesheet\" href=\"https://unpkg.com/@beam-ui/design-tokens@2.3.1/build/semantic/variables.css\">\n```\n\n#### Why All Three Files Are Required\n\nTokens use `var()` references to maintain relationships across all layers:\n\n```css\n/* 1. Global tokens define shared values */\n:root {\n  --breakpoint-medium: 768px;\n  --a11y-min-touch-target: 40px;\n}\n\n/* 2. Base tokens define the actual brand values */\n:root {\n  --color-gray-black: hsl(0, 0%, 0%);\n  --color-gray-white: hsl(0, 0%, 100%);\n  --color-transparent: hsla(0, 0%, 0%, 0);\n  --font-size-medium: 1.6rem;\n}\n\n/* 3. Semantic tokens reference base and global tokens */\n:root {\n  --button-primary-background: var(--color-gray-black);\n  --button-primary-text: var(--color-gray-white);\n  --button-tertiary-border: var(--color-transparent);\n  --button-primary-font-size: var(--font-size-medium);\n  --button-size-sm-min-width: var(--a11y-min-touch-target);\n}\n```\n\n#### Benefits of This Approach\n\n- **Single source of truth** - Update base token values and all semantic tokens automatically reflect the change\n- **Smaller file sizes** - References are more efficient than duplicated values\n- **Runtime flexibility** - Override base tokens to theme entire components\n- **Maintainability** - Clear relationships between foundation and application layers\n\n#### Using Only Base Tokens\n\nIf you only need base tokens (colors, spacing, fonts) without semantic tokens, you can import just the base and global files:\n\n```css\n@import '@beam-ui/design-tokens/build/globals/variables.css';\n@import '@beam-ui/design-tokens/build/base/variables.css';\n\n.custom-button {\n  background-color: var(--color-gray-black);\n  padding: var(--spacing-medium);\n  font-size: var(--font-size-medium);\n  min-height: var(--a11y-min-touch-target);\n}\n```\n\n**Note:** Base tokens may reference global tokens (like accessibility values), so it's recommended to include globals even when not using semantic tokens.\n\n### Using JavaScript/TypeScript Tokens\n\nJavaScript and JSON formats output resolved values, so semantic tokens can be used independently:\n\n```javascript\n// Semantic tokens contain resolved values\nimport { buttonPrimaryBackground, buttonPrimaryText } from '@beam-ui/design-tokens/build/semantic/tokens.es6.js';\n\nconst button = {\n  backgroundColor: buttonPrimaryBackground, // \"hsl(0, 0%, 0%)\"\n  color: buttonPrimaryText // \"hsl(0, 0%, 100%)\"\n};\n```\n\n#### Importing Base Tokens\n\n```javascript\nimport { colorGrayBlack, fontSizeMedium, spacingLarge } from '@beam-ui/design-tokens/build/base/tokens.es6.js';\n\nconst styles = {\n  color: colorGrayBlack, // \"hsl(0, 0%, 0%)\"\n  fontSize: fontSizeMedium, // \"1.6rem\"\n  padding: spacingLarge // \"2.4rem\"\n};\n```\n\n#### Importing Global Tokens\n\n```javascript\nimport { breakpointMedium, a11yMinTouchTarget } from '@beam-ui/design-tokens/build/globals/tokens.es6.js';\n\nconst config = {\n  breakpoint: breakpointMedium, // \"768px\"\n  minTouchSize: a11yMinTouchTarget // \"40px\"\n};\n```\n\n### Using JSON Tokens\n\nJSON format provides a nested structure:\n\n```javascript\nimport tokens from '@beam-ui/design-tokens/build/semantic/tokens.json';\n\nconsole.log(tokens.button.primary.background); // \"hsl(0, 0%, 0%)\"\nconsole.log(tokens.color.background.primary); // \"hsl(0, 0%, 100%)\"\n```\n\n### Using with Tailwind CSS v4\n\nThis package ships a pre-built Tailwind v4 `@theme` file that exposes most\nBeam tokens as Tailwind utilities — colors, spacing, typography, breakpoints,\nand more. Requires `tailwindcss@^4.0.0`.\n\nImport it from your app's main CSS entry alongside Tailwind itself:\n\n```css\n/* app.css */\n@import \"tailwindcss\";\n@import \"@beam-ui/design-tokens/tailwind\";\n```\n\n**This import sets the global root font-size to `62.5%`** (10px, so `1rem =\n10px`) — required for Beam's rem-based tokens to resolve to their intended\npixel values. This is a side effect on `html`, not scoped to Beam's own\nutilities: Tailwind's `radius` and `container` namespaces aren't reset by\nthis theme (see [What gets exposed](#what-gets-exposed) below), so their\nbuilt-in rem-based defaults (`rounded-lg`, `max-w-7xl`, etc.) are still\npresent but render smaller than Tailwind's docs describe — scaled to the\n10px root instead of the browser's default 16px. If your app already sets\nits own root font-size, importing this theme will override it.\n\nThat single import is self-contained — it does **not** pull in\n`build/globals/`, `build/base/`, or `build/semantic/variables.css`. What it\nleaves out falls into two groups:\n\n- **No Tailwind equivalent at all**: the `a11y`, `button`, `focusRing`, and\n  `input` namespaces, meant for direct CSS consumption, not Tailwind\n  utilities (see [Using CSS Variables](#using-css-variables) above).\n- **Re-exposed under a different name**: Beam's original long breakpoint\n  names (`--breakpoint-medium`, etc. — the theme re-emits these as Tailwind's\n  short `--breakpoint-md`) and the individual `--typography-*` variables (the\n  theme re-emits these as `@utility type-*` composite classes, not raw\n  custom properties).\n\nIf you need any of the raw CSS variables above — or just prefer referencing\na variable directly in your own CSS instead of via a Tailwind utility —\nimport `build/globals/variables.css`, `build/base/variables.css`, and/or\n`build/semantic/variables.css` directly. `semantic/variables.css` is built\nwith token references intact (`var(--color-gray-500)`, etc.), so if you use\nit, also bring in `base/variables.css` (for color/spacing/etc. primitives)\nand `globals/variables.css` (for `a11y` primitives semantic tokens\nreference).\n\n#### What gets exposed\n\n| Beam token               | Tailwind class                                   |\n| ------------------------ | ------------------------------------------------ |\n| `color.surface.*`        | `bg-surface-*`, `text-surface-*`, …             |\n| `color.background.*`     | `bg-background-primary`, `bg-background-secondary`, … |\n| `color.text.*`           | `text-text-primary`, `text-text-link`, …         |\n| `color.border.*`         | `border-border-primary`, `border-border-focus`, … |\n| `spacing.x-large`        | `p-8`, `m-8`, `gap-8`, … (numeric Tailwind keys) |\n| `font.size.large`        | `text-lg`                                        |\n| `font.family.body`       | `font-sans`                                      |\n| `font.family.display`    | `font-display`                                   |\n| `border.radius.xx-small` | `rounded-sm`                                     |\n| `breakpoint.*`           | `sm:`, `md:`, `lg:`, `xl:`                       |\n| `typography.heading.100` | `type-heading-100`                               |\n\nThe following Tailwind namespaces are **fully reset** before Beam tokens are\nemitted, so consumers opt into Beam's design language rather than mixing with\nTailwind defaults: `--breakpoint-*`, `--color-*`, `--font-*`, `--font-weight-*`,\n`--text-*`, `--leading-*`, `--tracking-*`, `--spacing-*`, `--shadow-*`.\n\n`--radius-*` is **not** reset — Beam defines only one radius token\n(`border-radius-xx-small` → `rounded-sm`), so Tailwind's other radius defaults\n(`rounded-lg`, `rounded-xl`, etc.) remain available.\n\nResetting `--font-*` also clears Tailwind's `--font-mono` and `--font-serif`.\n`--font-sans` is re-declared from `font.family.body`; beam-ui has no custom\nmono or serif tokens, so `--font-mono` and `--font-serif` are restored to\nTailwind's own system font fallbacks rather than left unavailable.\n\n#### Brand support\n\nThe Tailwind theme is currently **brand-agnostic** — it is built from the\ndefault `globals` + `base` + `semantic` tokens only. Brand-specific overrides\nunder `build/{brand}/` are emitted as CSS variable files but do not yet\nproduce per-brand Tailwind themes. If you need brand-scoped Tailwind output,\nimport the brand's `variables.css` files after `@beam-ui/design-tokens/tailwind`\nor open an issue to request first-class support.\n\n#### Tailwind theme manifest\n\nAlongside `theme.css`, this package also emits `build/tailwind/theme.json` —\na machine-readable manifest of the Tailwind namespaces, keys, and `@utility`\nnames `theme.css` declares as class-matchable utilities. It exists for tools\nthat need to know Beam's Tailwind naming but can't read a Tailwind config\ndirectly, like a [`tailwind-merge`](https://github.com/dcastil/tailwind-merge)\nclass-conflict config: `tailwind-merge` is a standalone string matcher, so it\nneeds an explicit list of Beam's namespaces and keys rather than discovering\nthem from CSS.\n\nThe manifest deliberately excludes `breakpoint` — Beam's breakpoints drive\nTailwind responsive variants (`sm:`, `md:`, `lg:`, `xl:`, see\n[What gets exposed](#what-gets-exposed) above), not a class-conflict\nnamespace a tool like `tailwind-merge` needs to resolve.\n\n```js\n// Node ESM requires the JSON import attribute (Node ≥ 20.10); a bundler-based\n// consumer (webpack, esbuild, Vite, ...) can drop it and use a plain import.\nimport manifest from '@beam-ui/design-tokens/tailwind/theme.json' with { type: 'json' };\n\nmanifest.namespaces.spacing;\n// [\"1\", \"2\", \"4\", \"6\", \"8\", \"10\", \"12\"]\n\nmanifest.utilities;\n// [\"type-display-100\", \"type-heading-100\", ...]\n\nmanifest.nonUtilityNamespaces;\n// [\"border\", \"default\"]\n\nmanifest.resetNamespaces;\n// [\"color\", \"font\", \"font-weight\", \"text\", \"leading\", \"tracking\", \"spacing\", \"shadow\"]\n```\n\nShape:\n- `namespaces` — an object mapping each Tailwind theme namespace `theme.css`\n  declares (excluding `breakpoint`, see above) to its list of keys (e.g.\n  `namespaces.text` → `[\"xs\", \"sm\", ...]`).\n  A namespace whose bare form is itself a valid utility (e.g. the `shadow`\n  class from `--shadow`, not just `shadow-sm`) includes an empty-string key.\n- `utilities` — every `@utility` name `theme.css` declares (the `type-*`\n  typography composites).\n- `nonUtilityNamespaces` — namespaces present in `namespaces` that are\n  declared as CSS custom properties but don't correspond to a Tailwind\n  utility class (currently `border` and `default` — see\n  [What gets exposed](#what-gets-exposed) above, which has no row for either).\n- `resetNamespaces` — namespaces `namespaces` lists that Beam fully resets\n  (`--{ns}-*: initial;`) before emitting its own values, so their key list is\n  exhaustive. A **utility-bearing** namespace present in `namespaces` but\n  absent from `resetNamespaces` — currently just `radius` — is only\n  partially covered: Tailwind's own default keys (e.g. `rounded-lg`,\n  `rounded-xl`, `rounded-full`) are still live alongside whatever Beam adds,\n  so a `tailwind-merge` config built from `namespaces.radius` alone would\n  under-cover that group. `border` and `default` are also absent from\n  `resetNamespaces`, but for an unrelated reason: they're non-utility\n  namespaces (see `nonUtilityNamespaces` above), not partially-reset ones, so\n  the exhaustive-vs-partial distinction this field draws doesn't apply to\n  them at all.\n\nThe manifest is generated from `theme.css`'s own rendered output, so it can't\ndrift out of sync with it — this package's test suite asserts the two agree\non every namespace, key, and utility name. It deliberately does **not** ship\na ready-made `tailwind-merge` (or similar) config: Beam owns the Tailwind\nnaming, and each consumer owns its own opinion about how classes should\nconflict.\n\n### npm vs CDN: When to Use Each\n\n| Method | Best For | Setup | Performance |\n|--------|----------|-------|-------------|\n| **npm + Bundler** | Apps with build tools (React, Vue, etc.) | Bundler handles imports | Smaller final bundle (tree-shaking) |\n| **CDN** | Server-side templates, static sites | Zero config - direct file loading | No build process needed |\n\n## Token Reference\n\n### Global Tokens\n\n**Breakpoints**\n- `breakpoint-small`, `breakpoint-medium`, `breakpoint-large`, `breakpoint-x-large`\n\n**Accessibility**\n- `a11y-min-touch-target` - Minimum touch target size for interactive elements\n\n### Base Tokens\n\n**Colors**\n- Brand colors: `color-tatari-red`, `color-tatari-blue`, etc.\n- Gray scale: `color-gray-black`, `color-gray-800` through `color-gray-50`, `color-gray-white`\n- Color palettes: `color-red-*`, `color-blue-*`, `color-green-*`, etc. (100-700 scales)\n- Special: `color-transparent`, `color-overlay-dark`, `color-overlay-light`\n\n**Typography**\n- Font families: `font-family-inter`, `font-family-favorit`, `font-family-body`, `font-family-display`\n- Font weights: `font-weight-normal` (400), `font-weight-medium` (500)\n- Font sizes: `font-size-x-small` through `font-size-xxxx-large`\n- Line heights: `font-line-height-tight` through `font-line-height-loose`\n- Letter spacing: `font-letter-spacing-x-small` through `font-letter-spacing-x-large`\n\n**Spacing**\n- `spacing-x-small` through `spacing-xxx-large`\n\n**Borders**\n- Border radius: `border-radius-xx-small`\n- Border width: `border-width-thin`, `border-width-medium`\n\n**Shadows**\n- `shadow-50` through `shadow-600` — Subtle ambient shadows for cards, popovers, and surface depth (uniform black at 6% alpha). `shadow-50` uses a sub-pixel (`0.5px`) blur for a \"barely-there\" hint and may render inconsistently on low-DPR displays — choose `shadow-100` if a guaranteed-visible step is required.\n\n**Elevation**\n- `elevation-100` through `elevation-300` — Stronger composite shadows for raised surfaces such as modals, drawers, and floating panels (graduated alpha for stacked depth)\n\n#### Shadow & Elevation Usage Notes\n\nShadow and elevation tokens are **decorative**, not boundary-forming. Their alpha values (0.04–0.14) sit well below the WCAG 1.4.11 (Non-text Contrast) 3:1 threshold. If a surface's existence as an interactive element must be perceivable (form fields, focusable cards, popovers that overlap critical content), pair the shadow with an explicit `border` or background contrast — don't rely on the shadow alone.\n\n`box-shadow` is **stripped in Windows High Contrast Mode** (`forced-colors: active`). Surfaces whose boundary depends on shadow lose all visual separation in that mode. Pair shadow usage with a transparent border that becomes a system color under forced-colors:\n\n```css\n.card {\n  background-color: var(--color-surface-primary);\n  box-shadow: var(--shadow-200);\n  border: 0.1rem solid transparent;\n}\n\n@media (forced-colors: active) {\n  .card {\n    border-color: CanvasText;\n  }\n}\n\n.modal {\n  background-color: var(--color-surface-primary);\n  box-shadow: var(--elevation-300);\n  border: 0.1rem solid transparent;\n}\n\n@media (forced-colors: active) {\n  .modal {\n    border-color: CanvasText;\n  }\n}\n```\n\n### Semantic Tokens\n\n**Button Tokens**\n- Variants: `button-primary-*`, `button-secondary-*`, `button-tertiary-*`\n- Danger states: `button-danger-primary-*`, `button-danger-secondary-*`\n- States: `-background`, `-background-hover`, `-background-active`, `-background-disabled`\n- Text: `-text`, `-text-hover`, `-text-active`, `-text-disabled`\n- Border: `-border`, `-border-hover`, `-border-active`, `-border-disabled`\n- Sizes: `button-size-sm-*`, `button-size-md-*`, `button-size-lg-*`\n\n**Input Tokens**\n- Dimensions: `input-height`, `input-padding-inline`, `input-border-radius`, `input-border-width`, `input-border-width-focus`\n- Typography: `input-font-size`, `input-line-height`\n- Transition: `input-transition`\n- Background: `input-background`, `-hover`, `-error`, `-warning`, `-success`, `-focus`, `-readonly`, `-disabled`\n- Border (color): `input-border`, `-hover`, `-error`, `-warning`, `-success`, `-focus`, `-readonly`, `-disabled`\n- Text: `input-text`, `input-text-placeholder`, `input-text-disabled`\n- Icon: `input-icon-size`, `input-icon-color`, `input-icon-color-disabled`, `input-icon-gap`\n- Label: `input-label-font-size`, `input-label-color`, `input-label-gap`\n- Message: `input-message-font-size`, `input-message-gap`, `input-message-color-default`, `-error`, `-warning`, `-success`\n\n**Color Tokens**\n- Background: `color-background-primary`, `color-background-secondary`, etc.\n- Surface: `color-surface-primary`, `color-surface-hover`, etc.\n- Border: `color-border-primary`, `color-border-focus`, `color-border-readonly`, etc.\n- Text: `color-text-primary`, `color-text-link`, etc.\n- Icon: `color-icon-primary`, `color-icon-interactive`, etc.\n- Interactive states: `color-interactive-primary-default`, etc.\n- Status colors: `color-status-success-base`, `color-status-error-base`, etc.\n- Brand colors: `color-brand-primary-base`, `color-brand-secondary-base`, etc.\n\n**Typography Tokens**\n- Display: `typography-display-100-*` through `typography-display-500-*`\n- Headings: `typography-heading-100-*` through `typography-heading-500-*`\n- Body text: `typography-body-large-*`, `typography-body-base-*`, `typography-body-small-*` (each with `default` and `medium` variants)\n- Label: `typography-label-base-*`\n- Caption: `typography-caption-*`\n- Overline: `typography-overline-*`\n- Properties: `-font-family`, `-font-weight`, `-font-size`, `-line-height`, `-letter-spacing`, `-color`, `-inverse`\n\n**Focus Ring Tokens**\n- `focus-ring-width` - Width of the focus ring outline\n- `focus-ring-offset` - Distance between element and focus ring\n- `focus-ring-color` - Color of the focus ring\n- `focus-ring-transition` - Animation for focus ring appearance\n\n## Examples\n\n### Using Focus Ring Tokens for Accessibility (CSS)\n\n```css\n/* Import all required token files */\n@import '@beam-ui/design-tokens/build/globals/variables.css';\n@import '@beam-ui/design-tokens/build/base/variables.css';\n@import '@beam-ui/design-tokens/build/semantic/variables.css';\n\n.interactive-element {\n  /* Remove default browser focus outline */\n  outline: none;\n}\n\n.interactive-element:focus-visible {\n  /* Apply design system focus ring */\n  outline: var(--focus-ring-width) solid var(--focus-ring-color);\n  outline-offset: var(--focus-ring-offset);\n\n  @media (prefers-reduced-motion: no-preference) {\n    transition: var(--focus-ring-transition);\n  }\n}\n```\n\n### Complete Button Component (CSS)\n\n```css\n/* Import all required token files */\n@import '@beam-ui/design-tokens/build/globals/variables.css';\n@import '@beam-ui/design-tokens/build/base/variables.css';\n@import '@beam-ui/design-tokens/build/semantic/variables.css';\n\n.button-primary {\n  background-color: var(--button-primary-background);\n  color: var(--button-primary-text);\n  border: var(--button-primary-border-width) solid var(--button-primary-border);\n  border-radius: var(--button-primary-border-radius);\n  font-size: var(--button-primary-font-size);\n  line-height: var(--button-primary-line-height);\n  padding-inline: var(--button-size-md-padding-inline);\n  padding-block: var(--button-size-md-padding-block);\n  min-width: var(--button-size-md-min-width);\n}\n\n.button-primary:hover {\n  background-color: var(--button-primary-background-hover);\n  color: var(--button-primary-text-hover);\n  border-color: var(--button-primary-border-hover);\n}\n```\n\n### React Component with TypeScript\n\n```typescript\nimport {\n  buttonPrimaryBackground,\n  buttonPrimaryText,\n  buttonPrimaryBorderRadius,\n  buttonSizeMdPaddingInline,\n  buttonSizeMdPaddingBlock\n} from '@beam-ui/design-tokens/build/semantic/tokens.es6.js';\n\ninterface ButtonProps {\n  children: React.ReactNode;\n}\n\nexport const Button: React.FC<ButtonProps> = ({ children }) => {\n  return (\n    <button\n      style={{\n        backgroundColor: buttonPrimaryBackground,\n        color: buttonPrimaryText,\n        borderRadius: buttonPrimaryBorderRadius,\n        paddingInline: buttonSizeMdPaddingInline,\n        paddingBlock: buttonSizeMdPaddingBlock\n      }}\n    >\n      {children}\n    </button>\n  );\n};\n```\n\n## License\n\nMIT License - see [LICENSE](./LICENSE) file for details\n\n","readmeFilename":"README.md"}