{"_id":"@dsn-starter-kit/design-tokens","_rev":"12-d8760d26c8b16422f879145782e428ec","name":"@dsn-starter-kit/design-tokens","dist-tags":{"latest":"4.1.0"},"versions":{"1.0.0":{"name":"@dsn-starter-kit/design-tokens","version":"1.0.0","keywords":["design-tokens","design-system","style-dictionary"],"author":{"name":"Jeffrey Lauwers"},"license":"MIT","_id":"@dsn-starter-kit/design-tokens@1.0.0","maintainers":[{"name":"jeffreylauwers","email":"jeffreylauwers@gmail.com"}],"dist":{"shasum":"ac23666fd7a793e9e553169cf0f65dc943c7af81","tarball":"https://registry.npmjs.org/@dsn-starter-kit/design-tokens/-/design-tokens-1.0.0.tgz","fileCount":57,"integrity":"sha512-NmjALYjRKExITmoBQxrRE+toZLQ2hor8sTeYWTvbqo4mRbnS0QgLiStTp+zy3WMu8cq1y+ewSVjobf1KzCdudQ==","signatures":[{"sig":"MEUCIQDIU0Zd8dK477oZSehvpDcI7C5JgGMx5F8EczbuNldHSgIgaLThnuGM131mBProefkelxPQfsW6rwb5ZwProl1PFxk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":13393209},"main":"dist/js/tokens.js","type":"module","_from":"file:dsn-starter-kit-design-tokens-1.0.0.tgz","types":"dist/js/tokens.d.ts","exports":{".":{"types":"./dist/js/tokens.d.ts","import":"./dist/js/tokens.js","default":"./dist/js/tokens.js"},"./css":"./dist/css/variables.css","./dark":{"types":"./dist/js/tokens-dark.d.ts","import":"./dist/js/tokens-dark.js","default":"./dist/js/tokens-dark.js"},"./scss":"./dist/scss/_variables.scss","./css/dark":"./dist/css/variables-dark.css","./scss/dark":"./dist/scss/_variables-dark.scss","./css/dark-scoped":"./dist/css/variables-dark-scoped.css"},"scripts":{"build":"node src/config/build.js","clean":"rm -rf dist","watch":"node --watch-path=src src/config/build.js"},"_npmUser":{"name":"jeffreylauwers","email":"jeffreylauwers@gmail.com"},"_resolved":"/tmp/a50bb61c4c248b4cc12dca2705e51a96/dsn-starter-kit-design-tokens-1.0.0.tgz","_integrity":"sha512-NmjALYjRKExITmoBQxrRE+toZLQ2hor8sTeYWTvbqo4mRbnS0QgLiStTp+zy3WMu8cq1y+ewSVjobf1KzCdudQ==","_npmVersion":"10.8.2","description":"Design tokens for the design system","directories":{},"_nodeVersion":"20.20.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"style-dictionary":"^4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design-tokens_1.0.0_1778920479870_0.632663356398427","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@dsn-starter-kit/design-tokens","version":"1.0.1","keywords":["design-tokens","design-system","style-dictionary"],"author":{"name":"Jeffrey Lauwers"},"license":"MIT","_id":"@dsn-starter-kit/design-tokens@1.0.1","maintainers":[{"name":"jeffreylauwers","email":"jeffreylauwers@gmail.com"}],"dist":{"shasum":"8d4f241faf3ed8d9ed12e3074e788b4fff9cd858","tarball":"https://registry.npmjs.org/@dsn-starter-kit/design-tokens/-/design-tokens-1.0.1.tgz","fileCount":57,"integrity":"sha512-KDgQrIt7KvsK9tAYyOXHOnUuRWZCp0qG/nr3WoZJpem8UbBwyvk6Jjcn9TqZi64c3zG2gVFSGJXokp6nDsT8Kw==","signatures":[{"sig":"MEYCIQDv7UAv1OXTTcmTGZ8JMa4TsDOPgvL3jxCf5Zg4JFl8MgIhAPDKPQNjv2+85/UlLimUHcP3j/jEZxBwRbatPWal/jtM","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":13393209},"main":"dist/js/tokens.js","type":"module","_from":"file:dsn-starter-kit-design-tokens-1.0.1.tgz","types":"dist/js/tokens.d.ts","exports":{".":{"types":"./dist/js/tokens.d.ts","import":"./dist/js/tokens.js","default":"./dist/js/tokens.js"},"./css":"./dist/css/variables.css","./dark":{"types":"./dist/js/tokens-dark.d.ts","import":"./dist/js/tokens-dark.js","default":"./dist/js/tokens-dark.js"},"./scss":"./dist/scss/_variables.scss","./css/dark":"./dist/css/variables-dark.css","./scss/dark":"./dist/scss/_variables-dark.scss","./css/dark-scoped":"./dist/css/variables-dark-scoped.css"},"scripts":{"build":"node src/config/build.js","clean":"rm -rf dist","watch":"node --watch-path=src src/config/build.js"},"_npmUser":{"name":"jeffreylauwers","email":"jeffreylauwers@gmail.com"},"_resolved":"/tmp/8de2a8dae7e769b7edaef1963531a16a/dsn-starter-kit-design-tokens-1.0.1.tgz","_integrity":"sha512-KDgQrIt7KvsK9tAYyOXHOnUuRWZCp0qG/nr3WoZJpem8UbBwyvk6Jjcn9TqZi64c3zG2gVFSGJXokp6nDsT8Kw==","_npmVersion":"10.8.2","description":"Design tokens for the design system","directories":{},"_nodeVersion":"20.20.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"style-dictionary":"^4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design-tokens_1.0.1_1779016754813_0.07374782889736697","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@dsn-starter-kit/design-tokens","version":"1.0.2","keywords":["design-tokens","design-system","style-dictionary"],"author":{"name":"Jeffrey Lauwers"},"license":"MIT","_id":"@dsn-starter-kit/design-tokens@1.0.2","maintainers":[{"name":"jeffreylauwers","email":"jeffreylauwers@gmail.com"}],"dist":{"shasum":"f2959a4801bc2e1b6f7fbf162a9f5db5e371eed7","tarball":"https://registry.npmjs.org/@dsn-starter-kit/design-tokens/-/design-tokens-1.0.2.tgz","fileCount":57,"integrity":"sha512-WO6hMeaw5za+vEdZsoauxReV/0l3IEHcxSM30cMziddNdzOticPf0B9/DVrjyW1B/JJq1AWYTaZesWEnq1yhoA==","signatures":[{"sig":"MEUCIQDKMkqsmI3O/vc6ri7otfU8WVgH2W85mdA6lajNXwFDVAIgA3Ey0o5/7zkg/osr/vme8R5bgkKLp9bAX/sQyPSAAWY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":13479773},"main":"dist/js/tokens.js","type":"module","_from":"file:dsn-starter-kit-design-tokens-1.0.2.tgz","types":"dist/js/tokens.d.ts","exports":{".":{"types":"./dist/js/tokens.d.ts","import":"./dist/js/tokens.js","default":"./dist/js/tokens.js"},"./css":"./dist/css/variables.css","./dark":{"types":"./dist/js/tokens-dark.d.ts","import":"./dist/js/tokens-dark.js","default":"./dist/js/tokens-dark.js"},"./scss":"./dist/scss/_variables.scss","./css/dark":"./dist/css/variables-dark.css","./scss/dark":"./dist/scss/_variables-dark.scss","./css/dark-scoped":"./dist/css/variables-dark-scoped.css"},"scripts":{"build":"node src/config/build.js","clean":"rm -rf dist","watch":"node --watch-path=src src/config/build.js"},"_npmUser":{"name":"jeffreylauwers","email":"jeffreylauwers@gmail.com"},"_resolved":"/tmp/b87032137e6290a421bdd90a30102efc/dsn-starter-kit-design-tokens-1.0.2.tgz","_integrity":"sha512-WO6hMeaw5za+vEdZsoauxReV/0l3IEHcxSM30cMziddNdzOticPf0B9/DVrjyW1B/JJq1AWYTaZesWEnq1yhoA==","_npmVersion":"10.8.2","description":"Design tokens for the design system","directories":{},"_nodeVersion":"20.20.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"style-dictionary":"^4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design-tokens_1.0.2_1780579011794_0.1562439500561945","host":"s3://npm-registry-packages-npm-production"}},"2.0.0":{"name":"@dsn-starter-kit/design-tokens","version":"2.0.0","keywords":["design-tokens","design-system","style-dictionary"],"author":{"name":"Jeffrey Lauwers"},"license":"MIT","_id":"@dsn-starter-kit/design-tokens@2.0.0","maintainers":[{"name":"jeffreylauwers","email":"jeffreylauwers@gmail.com"}],"dist":{"shasum":"8db45f325d88e5b4db228758aea19c0b5492c102","tarball":"https://registry.npmjs.org/@dsn-starter-kit/design-tokens/-/design-tokens-2.0.0.tgz","fileCount":59,"integrity":"sha512-b3F4iO53HRMJKuqtwgjS93uX4Ja5ONpWxdkl2Rq7X8m7VW/cJf7gaQZDXHILPz7cpycghF56rmsgqm/lnKepdw==","signatures":[{"sig":"MEYCIQDLoASSN6GWgy/lB8f+HD3lZSqHffoJP2TTBhXW9lSr1AIhAMqa2p400fOf5l3OaiZvEVDbNnCy6TZ8nwgaFwZBR/mu","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":13827389},"main":"dist/js/tokens.js","type":"module","_from":"file:dsn-starter-kit-design-tokens-2.0.0.tgz","types":"dist/js/tokens.d.ts","exports":{".":{"types":"./dist/js/tokens.d.ts","import":"./dist/js/tokens.js","default":"./dist/js/tokens.js"},"./css":"./dist/css/variables.css","./dark":{"types":"./dist/js/tokens-dark.d.ts","import":"./dist/js/tokens-dark.js","default":"./dist/js/tokens-dark.js"},"./scss":"./dist/scss/_variables.scss","./css/dark":"./dist/css/variables-dark.css","./scss/dark":"./dist/scss/_variables-dark.scss","./css/dark-scoped":"./dist/css/variables-dark-scoped.css","./css/scoped/start-hero-image-light":"./dist/css/scoped/start-light-hero-image.css","./css/scoped/wireframe-hero-image-light":"./dist/css/scoped/wireframe-light-hero-image.css"},"scripts":{"build":"node src/config/build.js","clean":"rm -rf dist","watch":"node --watch-path=src src/config/build.js"},"_npmUser":{"name":"jeffreylauwers","email":"jeffreylauwers@gmail.com"},"_resolved":"/tmp/449dfe167182321a3d9da81e48487517/dsn-starter-kit-design-tokens-2.0.0.tgz","_integrity":"sha512-b3F4iO53HRMJKuqtwgjS93uX4Ja5ONpWxdkl2Rq7X8m7VW/cJf7gaQZDXHILPz7cpycghF56rmsgqm/lnKepdw==","_npmVersion":"10.8.2","description":"Design tokens for the design system","directories":{},"_nodeVersion":"20.20.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"style-dictionary":"^4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design-tokens_2.0.0_1783843595842_0.026295648832244556","host":"s3://npm-registry-packages-npm-production"}},"3.0.0":{"name":"@dsn-starter-kit/design-tokens","version":"3.0.0","keywords":["design-tokens","design-system","style-dictionary"],"author":{"name":"Jeffrey Lauwers"},"license":"MIT","_id":"@dsn-starter-kit/design-tokens@3.0.0","maintainers":[{"name":"jeffreylauwers","email":"jeffreylauwers@gmail.com"}],"dist":{"shasum":"6311dceadc68714d1954b1852b31e534d1cc42ef","tarball":"https://registry.npmjs.org/@dsn-starter-kit/design-tokens/-/design-tokens-3.0.0.tgz","fileCount":63,"integrity":"sha512-FZMNPJX5XxLj2N8pOsHq1jcTGq3UcmMnckQDHzxPZMVVgXFomY+QwXLaTlZHy+2mV66GN5BcKOvKzBnRnLkMIA==","signatures":[{"sig":"MEUCIER7mI3bxWcF+fkr3081gCrI30HUxiayh7bQNoX5rhU9AiEAnP4lA3UY3K+ENYaZVzisyTS9F+GcCqMhs/XHlQdm8Gk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":16843614},"main":"dist/js/tokens.cjs","type":"module","_from":"file:dsn-starter-kit-design-tokens-3.0.0.tgz","types":"dist/js/tokens.d.ts","module":"dist/js/tokens.js","exports":{".":{"import":{"types":"./dist/js/tokens.d.ts","default":"./dist/js/tokens.js"},"require":{"types":"./dist/js/tokens.d.cts","default":"./dist/js/tokens.cjs"}},"./css":"./dist/css/variables.css","./dark":{"import":{"types":"./dist/js/tokens-dark.d.ts","default":"./dist/js/tokens-dark.js"},"require":{"types":"./dist/js/tokens-dark.d.cts","default":"./dist/js/tokens-dark.cjs"}},"./scss":"./dist/scss/_variables.scss","./css/dark":"./dist/css/variables-dark.css","./scss/dark":"./dist/scss/_variables-dark.scss","./package.json":"./package.json","./css/dark-scoped":"./dist/css/variables-dark-scoped.css","./css/scoped/start-hero-image-light":"./dist/css/scoped/start-light-hero-image.css","./css/scoped/wireframe-hero-image-light":"./dist/css/scoped/wireframe-light-hero-image.css"},"scripts":{"build":"node src/config/build.js && tsdown","clean":"rm -rf dist","watch":"node --watch-path=src src/config/build.js","build:figma":"node src/config/build-figma.js"},"_npmUser":{"name":"jeffreylauwers","email":"jeffreylauwers@gmail.com"},"_resolved":"/tmp/78dbfeb2d5ce3098c2e6cfa56d063d6e/dsn-starter-kit-design-tokens-3.0.0.tgz","_integrity":"sha512-FZMNPJX5XxLj2N8pOsHq1jcTGq3UcmMnckQDHzxPZMVVgXFomY+QwXLaTlZHy+2mV66GN5BcKOvKzBnRnLkMIA==","_npmVersion":"11.17.0","description":"Design tokens for the design system","directories":{},"_nodeVersion":"24.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsdown":"^0.22.14","style-dictionary":"^4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design-tokens_3.0.0_1788175372026_0.10535149253955534","host":"s3://npm-registry-packages-npm-production"}},"3.1.0":{"name":"@dsn-starter-kit/design-tokens","version":"3.1.0","keywords":["design-tokens","design-system","style-dictionary"],"author":{"name":"Jeffrey Lauwers"},"license":"MIT","_id":"@dsn-starter-kit/design-tokens@3.1.0","maintainers":[{"name":"jeffreylauwers","email":"jeffreylauwers@gmail.com"}],"dist":{"shasum":"1a4a6976902547fbebb0bd1da6a3eac6357b9e72","tarball":"https://registry.npmjs.org/@dsn-starter-kit/design-tokens/-/design-tokens-3.1.0.tgz","fileCount":63,"integrity":"sha512-69TDmPWCbENardLHatzeIZ7OpoNjkcbDsms7D+BeVl/jBRVC9fDvpGpAHti468EfMURTQwF+6oftMNJvv4SNXQ==","signatures":[{"sig":"MEQCIHeIiMf5msm06qIjE2bdm5MBCJn+f/vbSGIHkewp4NBBAiBlMIMESv2lbWWDsnHwb8xu5gqrkyfWbV8wGAHQQsjC5w==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":16843638},"main":"dist/js/tokens.cjs","type":"module","_from":"file:dsn-starter-kit-design-tokens-3.1.0.tgz","types":"dist/js/tokens.d.ts","module":"dist/js/tokens.js","exports":{".":{"import":{"types":"./dist/js/tokens.d.ts","default":"./dist/js/tokens.js"},"require":{"types":"./dist/js/tokens.d.cts","default":"./dist/js/tokens.cjs"}},"./css":"./dist/css/variables.css","./dark":{"import":{"types":"./dist/js/tokens-dark.d.ts","default":"./dist/js/tokens-dark.js"},"require":{"types":"./dist/js/tokens-dark.d.cts","default":"./dist/js/tokens-dark.cjs"}},"./scss":"./dist/scss/_variables.scss","./css/dark":"./dist/css/variables-dark.css","./scss/dark":"./dist/scss/_variables-dark.scss","./package.json":"./package.json","./css/dark-scoped":"./dist/css/variables-dark-scoped.css","./css/scoped/start-hero-image-light":"./dist/css/scoped/start-light-hero-image.css","./css/scoped/wireframe-hero-image-light":"./dist/css/scoped/wireframe-light-hero-image.css"},"scripts":{"build":"node src/config/build.js && tsdown","clean":"rm -rf dist","watch":"node --watch-path=src src/config/build.js","build:figma":"node src/config/build-figma.js"},"_npmUser":{"name":"jeffreylauwers","email":"jeffreylauwers@gmail.com"},"_resolved":"/tmp/907c39dd0f6c366ce48c9fe7d3a4ffcf/dsn-starter-kit-design-tokens-3.1.0.tgz","_integrity":"sha512-69TDmPWCbENardLHatzeIZ7OpoNjkcbDsms7D+BeVl/jBRVC9fDvpGpAHti468EfMURTQwF+6oftMNJvv4SNXQ==","_npmVersion":"11.17.0","description":"Design tokens for the design system","directories":{},"sideEffects":false,"_nodeVersion":"24.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsdown":"^0.22.14","style-dictionary":"^4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design-tokens_3.1.0_1788183169263_0.22795080360896502","host":"s3://npm-registry-packages-npm-production"}},"3.2.0":{"name":"@dsn-starter-kit/design-tokens","version":"3.2.0","keywords":["design-tokens","design-system","style-dictionary"],"author":{"name":"Jeffrey Lauwers"},"license":"MIT","_id":"@dsn-starter-kit/design-tokens@3.2.0","maintainers":[{"name":"jeffreylauwers","email":"jeffreylauwers@gmail.com"}],"dist":{"shasum":"2cd7c708a6b3b978bd6d3a2c9b5940d3a574b665","tarball":"https://registry.npmjs.org/@dsn-starter-kit/design-tokens/-/design-tokens-3.2.0.tgz","fileCount":63,"integrity":"sha512-jZRSTA2f2MRrjE5N0s5VMrQUF8ns8FndHFYa1AZcxUiFw6eYkV7qjS9xSVE1W6bEj34Ek1/RLXFuFGMPBDVZDg==","signatures":[{"sig":"MEUCIHYsmAJRM554wX9dtILeSPu2QITxX1VJlkqTWWk/P7x1AiEAzbSdvPU1TZRPoFOBrVeXnd1m3SmSGnVlZLpeZLGfyPc=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":16843638},"main":"dist/js/tokens.cjs","type":"module","_from":"file:dsn-starter-kit-design-tokens-3.2.0.tgz","types":"dist/js/tokens.d.ts","module":"dist/js/tokens.js","exports":{".":{"import":{"types":"./dist/js/tokens.d.ts","default":"./dist/js/tokens.js"},"require":{"types":"./dist/js/tokens.d.cts","default":"./dist/js/tokens.cjs"}},"./css":"./dist/css/variables.css","./dark":{"import":{"types":"./dist/js/tokens-dark.d.ts","default":"./dist/js/tokens-dark.js"},"require":{"types":"./dist/js/tokens-dark.d.cts","default":"./dist/js/tokens-dark.cjs"}},"./scss":"./dist/scss/_variables.scss","./css/dark":"./dist/css/variables-dark.css","./scss/dark":"./dist/scss/_variables-dark.scss","./package.json":"./package.json","./css/dark-scoped":"./dist/css/variables-dark-scoped.css","./css/scoped/start-hero-image-light":"./dist/css/scoped/start-light-hero-image.css","./css/scoped/wireframe-hero-image-light":"./dist/css/scoped/wireframe-light-hero-image.css"},"scripts":{"build":"node src/config/build.js && tsdown","clean":"rm -rf dist","watch":"node --watch-path=src src/config/build.js","build:figma":"node src/config/build-figma.js"},"_npmUser":{"name":"jeffreylauwers","email":"jeffreylauwers@gmail.com"},"_resolved":"/tmp/b07c4782ed7ec70a500ea60847f013c1/dsn-starter-kit-design-tokens-3.2.0.tgz","_integrity":"sha512-jZRSTA2f2MRrjE5N0s5VMrQUF8ns8FndHFYa1AZcxUiFw6eYkV7qjS9xSVE1W6bEj34Ek1/RLXFuFGMPBDVZDg==","_npmVersion":"11.17.0","description":"Design tokens for the design system","directories":{},"sideEffects":false,"_nodeVersion":"24.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsdown":"^0.22.14","style-dictionary":"^4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design-tokens_3.2.0_1788201823153_0.9598855041819447","host":"s3://npm-registry-packages-npm-production"}},"3.3.0":{"name":"@dsn-starter-kit/design-tokens","version":"3.3.0","keywords":["design-tokens","design-system","style-dictionary"],"author":{"name":"Jeffrey Lauwers"},"license":"MIT","_id":"@dsn-starter-kit/design-tokens@3.3.0","maintainers":[{"name":"jeffreylauwers","email":"jeffreylauwers@gmail.com"}],"dist":{"shasum":"afdd5c2daa0a483cef2b3ea6119b04926fae7c20","tarball":"https://registry.npmjs.org/@dsn-starter-kit/design-tokens/-/design-tokens-3.3.0.tgz","fileCount":64,"integrity":"sha512-xVEpqVQLTTgr4Z5RlHN80w/tXELAXfmMx+7zITSlepmfcDr7YlJs10QVWmOvzR33p48H2NYjM2gokWvyi1Zuvg==","signatures":[{"sig":"MEUCIBGtVKeB5m8QpeEKzqTcH0xSPS2Zef0gDL16TwAOs3c3AiEAwPXKBc5zKSDvHSefH2OygcrWrT2/e5ISIbXbBi65sJQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":16844842},"main":"dist/js/tokens.cjs","type":"module","_from":"file:dsn-starter-kit-design-tokens-3.3.0.tgz","types":"dist/js/tokens.d.ts","module":"dist/js/tokens.js","exports":{".":{"import":{"types":"./dist/js/tokens.d.ts","default":"./dist/js/tokens.js"},"require":{"types":"./dist/js/tokens.d.cts","default":"./dist/js/tokens.cjs"}},"./css":{"types":"./css.d.ts","default":"./dist/css/variables.css"},"./dark":{"import":{"types":"./dist/js/tokens-dark.d.ts","default":"./dist/js/tokens-dark.js"},"require":{"types":"./dist/js/tokens-dark.d.cts","default":"./dist/js/tokens-dark.cjs"}},"./scss":{"types":"./css.d.ts","default":"./dist/scss/_variables.scss"},"./css/dark":{"types":"./css.d.ts","default":"./dist/css/variables-dark.css"},"./scss/dark":{"types":"./css.d.ts","default":"./dist/scss/_variables-dark.scss"},"./package.json":"./package.json","./css/dark-scoped":{"types":"./css.d.ts","default":"./dist/css/variables-dark-scoped.css"},"./css/scoped/start-hero-image-light":{"types":"./css.d.ts","default":"./dist/css/scoped/start-light-hero-image.css"},"./css/scoped/wireframe-hero-image-light":{"types":"./css.d.ts","default":"./dist/css/scoped/wireframe-light-hero-image.css"}},"scripts":{"build":"node src/config/build.js && tsdown","clean":"rm -rf dist","watch":"node --watch-path=src src/config/build.js","build:figma":"node src/config/build-figma.js"},"_npmUser":{"name":"jeffreylauwers","email":"jeffreylauwers@gmail.com"},"_resolved":"/tmp/ecb296cb3b2e39cf70812f3ae509082e/dsn-starter-kit-design-tokens-3.3.0.tgz","_integrity":"sha512-xVEpqVQLTTgr4Z5RlHN80w/tXELAXfmMx+7zITSlepmfcDr7YlJs10QVWmOvzR33p48H2NYjM2gokWvyi1Zuvg==","_npmVersion":"11.17.0","description":"Design tokens for the design system","directories":{},"sideEffects":["**/*.css","**/*.scss"],"_nodeVersion":"24.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsdown":"^0.22.14","style-dictionary":"^4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design-tokens_3.3.0_1788336173593_0.4639350962332818","host":"s3://npm-registry-packages-npm-production"}},"3.4.0":{"name":"@dsn-starter-kit/design-tokens","version":"3.4.0","keywords":["design-tokens","design-system","style-dictionary"],"author":{"name":"Jeffrey Lauwers"},"license":"MIT","_id":"@dsn-starter-kit/design-tokens@3.4.0","maintainers":[{"name":"jeffreylauwers","email":"jeffreylauwers@gmail.com"}],"dist":{"shasum":"8f4e137a1c3fa771ab8ade3710c94729c01263dc","tarball":"https://registry.npmjs.org/@dsn-starter-kit/design-tokens/-/design-tokens-3.4.0.tgz","fileCount":67,"integrity":"sha512-vspUtmTGav/FPPr/R8JSHCAZ+hB97i0aH3hsekt5hokMC5gMoO+nOaWkJqXBVjyPbcV//5kuryUst5R/RYUrCA==","signatures":[{"sig":"MEYCIQC4Vt10s1cFb6LOFI5yasxCEsxaY12qPlsoynNTHIlXaQIhAIiRPgtAtSQQDcNS58nKkuPdloS6d8pXaCol1GgoTZ1o","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":16911713},"main":"dist/js/tokens.cjs","type":"module","_from":"file:dsn-starter-kit-design-tokens-3.4.0.tgz","types":"dist/js/tokens.d.ts","module":"dist/js/tokens.js","exports":{".":{"import":{"types":"./dist/js/tokens.d.ts","default":"./dist/js/tokens.js"},"require":{"types":"./dist/js/tokens.d.cts","default":"./dist/js/tokens.cjs"}},"./css":{"types":"./css.d.ts","default":"./dist/css/variables.css"},"./dark":{"import":{"types":"./dist/js/tokens-dark.d.ts","default":"./dist/js/tokens-dark.js"},"require":{"types":"./dist/js/tokens-dark.d.cts","default":"./dist/js/tokens-dark.cjs"}},"./scss":{"types":"./css.d.ts","default":"./dist/scss/_variables.scss"},"./css/dark":{"types":"./css.d.ts","default":"./dist/css/variables-dark.css"},"./scss/dark":{"types":"./css.d.ts","default":"./dist/scss/_variables-dark.scss"},"./package.json":"./package.json","./css/dark-scoped":{"types":"./css.d.ts","default":"./dist/css/variables-dark-scoped.css"},"./css/scoped/start-dark":{"types":"./css.d.ts","default":"./dist/css/scoped/start-dark.css"},"./css/scoped/start-light":{"types":"./css.d.ts","default":"./dist/css/scoped/start-light.css"},"./css/scoped/wireframe-dark":{"types":"./css.d.ts","default":"./dist/css/scoped/wireframe-dark.css"},"./css/scoped/density-default":{"types":"./css.d.ts","default":"./dist/css/scoped/density-default.css"},"./css/scoped/wireframe-light":{"types":"./css.d.ts","default":"./dist/css/scoped/wireframe-light.css"},"./css/scoped/start-hero-image-light":{"types":"./css.d.ts","default":"./dist/css/scoped/start-light-hero-image.css"},"./css/scoped/density-information-dense":{"types":"./css.d.ts","default":"./dist/css/scoped/density-information-dense.css"},"./css/scoped/wireframe-hero-image-light":{"types":"./css.d.ts","default":"./dist/css/scoped/wireframe-light-hero-image.css"}},"scripts":{"build":"node src/config/build.js && tsdown","clean":"rm -rf dist","watch":"node --watch-path=src src/config/build.js","build:figma":"node src/config/build-figma.js"},"_npmUser":{"name":"jeffreylauwers","email":"jeffreylauwers@gmail.com"},"_resolved":"/tmp/5ec76346053f37691d693fcb06bc8a85/dsn-starter-kit-design-tokens-3.4.0.tgz","_integrity":"sha512-vspUtmTGav/FPPr/R8JSHCAZ+hB97i0aH3hsekt5hokMC5gMoO+nOaWkJqXBVjyPbcV//5kuryUst5R/RYUrCA==","_npmVersion":"11.17.0","description":"Design tokens for the design system","directories":{},"sideEffects":["**/*.css","**/*.scss"],"_nodeVersion":"24.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsdown":"^0.22.14","style-dictionary":"^4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design-tokens_3.4.0_1788340002536_0.6515083556938701","host":"s3://npm-registry-packages-npm-production"}},"3.5.0":{"name":"@dsn-starter-kit/design-tokens","version":"3.5.0","keywords":["design-tokens","design-system","style-dictionary"],"author":{"name":"Jeffrey Lauwers"},"license":"MIT","_id":"@dsn-starter-kit/design-tokens@3.5.0","maintainers":[{"name":"jeffreylauwers","email":"jeffreylauwers@gmail.com"}],"dist":{"shasum":"c39561ce9c8b5b977197083664306cd916e6869f","tarball":"https://registry.npmjs.org/@dsn-starter-kit/design-tokens/-/design-tokens-3.5.0.tgz","fileCount":67,"integrity":"sha512-mKDhbSe96gUovz/1qLFbt3Sq8PRKttDO3w1wxnvjKQfqb7QIkGGKZKkbdYwMjmquBi8djRXdnjdPGHDXbWIMNA==","signatures":[{"sig":"MEQCIEYAo4PeOsEq9Q/wyZaTrZZusCN6yzCR1SE5O7A1w0loAiB8+ntdAm9WfIvTJkntsg99/8idj8fJ1kXM/wfWgPJyuA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":16911713},"main":"dist/js/tokens.cjs","type":"module","_from":"file:dsn-starter-kit-design-tokens-3.5.0.tgz","types":"dist/js/tokens.d.ts","module":"dist/js/tokens.js","exports":{".":{"import":{"types":"./dist/js/tokens.d.ts","default":"./dist/js/tokens.js"},"require":{"types":"./dist/js/tokens.d.cts","default":"./dist/js/tokens.cjs"}},"./css":{"types":"./css.d.ts","default":"./dist/css/variables.css"},"./dark":{"import":{"types":"./dist/js/tokens-dark.d.ts","default":"./dist/js/tokens-dark.js"},"require":{"types":"./dist/js/tokens-dark.d.cts","default":"./dist/js/tokens-dark.cjs"}},"./scss":{"types":"./css.d.ts","default":"./dist/scss/_variables.scss"},"./css/dark":{"types":"./css.d.ts","default":"./dist/css/variables-dark.css"},"./scss/dark":{"types":"./css.d.ts","default":"./dist/scss/_variables-dark.scss"},"./package.json":"./package.json","./css/dark-scoped":{"types":"./css.d.ts","default":"./dist/css/variables-dark-scoped.css"},"./css/scoped/start-dark":{"types":"./css.d.ts","default":"./dist/css/scoped/start-dark.css"},"./css/scoped/start-light":{"types":"./css.d.ts","default":"./dist/css/scoped/start-light.css"},"./css/scoped/wireframe-dark":{"types":"./css.d.ts","default":"./dist/css/scoped/wireframe-dark.css"},"./css/scoped/density-default":{"types":"./css.d.ts","default":"./dist/css/scoped/density-default.css"},"./css/scoped/wireframe-light":{"types":"./css.d.ts","default":"./dist/css/scoped/wireframe-light.css"},"./css/scoped/start-hero-image-light":{"types":"./css.d.ts","default":"./dist/css/scoped/start-light-hero-image.css"},"./css/scoped/density-information-dense":{"types":"./css.d.ts","default":"./dist/css/scoped/density-information-dense.css"},"./css/scoped/wireframe-hero-image-light":{"types":"./css.d.ts","default":"./dist/css/scoped/wireframe-light-hero-image.css"}},"scripts":{"build":"node src/config/build.js && tsdown","clean":"rm -rf dist","watch":"node --watch-path=src src/config/build.js","build:figma":"node src/config/build-figma.js"},"_npmUser":{"name":"jeffreylauwers","email":"jeffreylauwers@gmail.com"},"_resolved":"/tmp/cf066764c99f037f0b8763885ff1267d/dsn-starter-kit-design-tokens-3.5.0.tgz","_integrity":"sha512-mKDhbSe96gUovz/1qLFbt3Sq8PRKttDO3w1wxnvjKQfqb7QIkGGKZKkbdYwMjmquBi8djRXdnjdPGHDXbWIMNA==","_npmVersion":"11.19.0","description":"Design tokens for the design system","directories":{},"sideEffects":["**/*.css","**/*.scss"],"_nodeVersion":"24.20.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsdown":"^0.22.14","style-dictionary":"^4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design-tokens_3.5.0_1788967150005_0.06490947967875216","host":"s3://npm-registry-packages-npm-production"}},"4.0.0":{"name":"@dsn-starter-kit/design-tokens","version":"4.0.0","keywords":["design-tokens","design-system","style-dictionary"],"author":{"name":"Jeffrey Lauwers"},"license":"MIT","_id":"@dsn-starter-kit/design-tokens@4.0.0","maintainers":[{"name":"jeffreylauwers","email":"jeffreylauwers@gmail.com"}],"dist":{"shasum":"ca067526645a35c6efd1cad7c78a626144e660b7","tarball":"https://registry.npmjs.org/@dsn-starter-kit/design-tokens/-/design-tokens-4.0.0.tgz","fileCount":67,"integrity":"sha512-o0RLq0pJg6xRzbpgG0ueO16Obgd6S+YIEYG2qlgARoJHfRTHNlJBuIuJUcGr4vIDJz8spl4lsJhn+QwQW9TA9w==","signatures":[{"sig":"MEYCIQDO1bgnWbsMcHEDwFXEOtsUJxmJw2nS9jmUMXA+Kf0ypQIhAO7b7tsU08G0A9fjNCxLd5WZlMYyUQtjTlZTDzUahrg5","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"sig":"MEYCIQDWwdRIg9nQyRCUNhp3U6jqGbGDp5ju4miLYRaDvWNw5gIhAJjZcrnabVz7ZcAsP/AiTE/QzPCseZ4gCVF5x9V1wsJt","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":17302179},"main":"dist/js/tokens.cjs","type":"module","_from":"file:dsn-starter-kit-design-tokens-4.0.0.tgz","types":"dist/js/tokens.d.ts","module":"dist/js/tokens.js","exports":{".":{"import":{"types":"./dist/js/tokens.d.ts","default":"./dist/js/tokens.js"},"require":{"types":"./dist/js/tokens.d.cts","default":"./dist/js/tokens.cjs"}},"./css":{"types":"./css.d.ts","default":"./dist/css/variables.css"},"./dark":{"import":{"types":"./dist/js/tokens-dark.d.ts","default":"./dist/js/tokens-dark.js"},"require":{"types":"./dist/js/tokens-dark.d.cts","default":"./dist/js/tokens-dark.cjs"}},"./scss":{"types":"./css.d.ts","default":"./dist/scss/_variables.scss"},"./css/dark":{"types":"./css.d.ts","default":"./dist/css/variables-dark.css"},"./scss/dark":{"types":"./css.d.ts","default":"./dist/scss/_variables-dark.scss"},"./package.json":"./package.json","./css/dark-scoped":{"types":"./css.d.ts","default":"./dist/css/variables-dark-scoped.css"},"./css/scoped/start-dark":{"types":"./css.d.ts","default":"./dist/css/scoped/start-dark.css"},"./css/scoped/start-light":{"types":"./css.d.ts","default":"./dist/css/scoped/start-light.css"},"./css/scoped/wireframe-dark":{"types":"./css.d.ts","default":"./dist/css/scoped/wireframe-dark.css"},"./css/scoped/density-default":{"types":"./css.d.ts","default":"./dist/css/scoped/density-default.css"},"./css/scoped/wireframe-light":{"types":"./css.d.ts","default":"./dist/css/scoped/wireframe-light.css"},"./css/scoped/start-hero-image-light":{"types":"./css.d.ts","default":"./dist/css/scoped/start-light-hero-image.css"},"./css/scoped/density-information-dense":{"types":"./css.d.ts","default":"./dist/css/scoped/density-information-dense.css"},"./css/scoped/wireframe-hero-image-light":{"types":"./css.d.ts","default":"./dist/css/scoped/wireframe-light-hero-image.css"}},"scripts":{"build":"node src/config/build.js && tsdown","clean":"rm -rf dist","watch":"node --watch-path=src src/config/build.js","build:figma":"node src/config/build-figma.js"},"_npmUser":{"name":"jeffreylauwers","email":"jeffreylauwers@gmail.com"},"_resolved":"/tmp/b5dd5b2bac5da87f89b5580a5cdf1ecf/dsn-starter-kit-design-tokens-4.0.0.tgz","_integrity":"sha512-o0RLq0pJg6xRzbpgG0ueO16Obgd6S+YIEYG2qlgARoJHfRTHNlJBuIuJUcGr4vIDJz8spl4lsJhn+QwQW9TA9w==","_npmVersion":"11.19.0","description":"Design tokens for the design system","directories":{},"sideEffects":["**/*.css","**/*.scss"],"_nodeVersion":"24.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsdown":"^0.22.14","style-dictionary":"^4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design-tokens_4.0.0_1790408790674_0.045252784784660216","host":"s3://npm-registry-packages-npm-production"}},"4.1.0":{"_id":"@dsn-starter-kit/design-tokens@4.1.0","dist":{"shasum":"79c30d9381a9bd6c0de21649e5452716075f0c75","tarball":"https://registry.npmjs.org/@dsn-starter-kit/design-tokens/-/design-tokens-4.1.0.tgz","fileCount":67,"integrity":"sha512-Rgr1mdAgiFX7HIZhMl5/NDwauqjFWwHk6KPaI0ZzAJSFoInIYfpS32fhfcYnR/V+1zgSw50pnwZqyVCrxMJL6g==","signatures":[{"sig":"MEUCIH4Q18An2fwIRFlwl+/dnokI9J6Hb2rPjE2oIWLoIxt2AiEA8FBN+DtJyvz9cbSvSvCbddu3GI2DSQo15Mt0uNVyXwY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDIWVYN7bXrfc6YMnFSCmbRWRG83u1nvnIAWuHrmm2WAgIgSYMBXOjMFplHH1deeoKMml2EB45Km/EWlZ1gDbnX3EA="}],"unpackedSize":17432150},"main":"dist/js/tokens.cjs","name":"@dsn-starter-kit/design-tokens","type":"module","_from":"file:dsn-starter-kit-design-tokens-4.1.0.tgz","types":"dist/js/tokens.d.ts","author":{"name":"Jeffrey Lauwers"},"module":"dist/js/tokens.js","exports":{".":{"import":{"types":"./dist/js/tokens.d.ts","default":"./dist/js/tokens.js"},"require":{"types":"./dist/js/tokens.d.cts","default":"./dist/js/tokens.cjs"}},"./css":{"types":"./css.d.ts","default":"./dist/css/variables.css"},"./dark":{"import":{"types":"./dist/js/tokens-dark.d.ts","default":"./dist/js/tokens-dark.js"},"require":{"types":"./dist/js/tokens-dark.d.cts","default":"./dist/js/tokens-dark.cjs"}},"./scss":{"types":"./css.d.ts","default":"./dist/scss/_variables.scss"},"./css/dark":{"types":"./css.d.ts","default":"./dist/css/variables-dark.css"},"./scss/dark":{"types":"./css.d.ts","default":"./dist/scss/_variables-dark.scss"},"./package.json":"./package.json","./css/dark-scoped":{"types":"./css.d.ts","default":"./dist/css/variables-dark-scoped.css"},"./css/scoped/start-dark":{"types":"./css.d.ts","default":"./dist/css/scoped/start-dark.css"},"./css/scoped/start-light":{"types":"./css.d.ts","default":"./dist/css/scoped/start-light.css"},"./css/scoped/wireframe-dark":{"types":"./css.d.ts","default":"./dist/css/scoped/wireframe-dark.css"},"./css/scoped/density-default":{"types":"./css.d.ts","default":"./dist/css/scoped/density-default.css"},"./css/scoped/wireframe-light":{"types":"./css.d.ts","default":"./dist/css/scoped/wireframe-light.css"},"./css/scoped/start-hero-image-light":{"types":"./css.d.ts","default":"./dist/css/scoped/start-light-hero-image.css"},"./css/scoped/density-information-dense":{"types":"./css.d.ts","default":"./dist/css/scoped/density-information-dense.css"},"./css/scoped/wireframe-hero-image-light":{"types":"./css.d.ts","default":"./dist/css/scoped/wireframe-light-hero-image.css"}},"license":"MIT","scripts":{"build":"node src/config/build.js && tsdown","clean":"rm -rf dist","watch":"node --watch-path=src src/config/build.js","build:figma":"node src/config/build-figma.js"},"version":"4.1.0","_npmUser":{"name":"jeffreylauwers","email":"jeffreylauwers@gmail.com"},"keywords":["design-tokens","design-system","style-dictionary"],"_resolved":"/tmp/44b7a9b3f1107f67581569d22604555a/dsn-starter-kit-design-tokens-4.1.0.tgz","_integrity":"sha512-Rgr1mdAgiFX7HIZhMl5/NDwauqjFWwHk6KPaI0ZzAJSFoInIYfpS32fhfcYnR/V+1zgSw50pnwZqyVCrxMJL6g==","_npmVersion":"11.19.0","description":"Design tokens for the design system","directories":{},"maintainers":[{"name":"jeffreylauwers","email":"jeffreylauwers@gmail.com"}],"sideEffects":["**/*.css","**/*.scss"],"_nodeVersion":"24.21.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsdown":"^0.22.14","style-dictionary":"^4.0.0"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/design-tokens_4.1.0_1790858640136_0.990134013090366"}}},"time":{"created":"2026-05-16T08:34:39.776Z","modified":"2026-10-01T12:44:00.470Z","1.0.0":"2026-05-16T08:34:40.115Z","1.0.1":"2026-05-17T11:19:14.976Z","1.0.2":"2026-06-04T13:16:52.000Z","2.0.0":"2026-07-12T08:06:36.009Z","3.0.0":"2026-08-31T11:22:52.224Z","3.1.0":"2026-08-31T13:32:49.517Z","3.2.0":"2026-08-31T18:43:43.343Z","3.3.0":"2026-09-02T08:02:53.747Z","3.4.0":"2026-09-02T09:06:42.765Z","3.5.0":"2026-09-09T15:19:10.234Z","4.0.0":"2026-09-26T07:46:30.854Z","4.1.0":"2026-10-01T12:44:00.307Z"},"author":{"name":"Jeffrey Lauwers"},"license":"MIT","keywords":["design-tokens","design-system","style-dictionary"],"description":"Design tokens for the design system","maintainers":[{"name":"jeffreylauwers","email":"jeffreylauwers@gmail.com"}],"readme":"# @dsn-starter-kit/design-tokens\n\nDesign tokens for the design system: the single source of truth for colors, typography, spacing, sizing, borders, shadows, and more.\n\n## Architecture\n\nTokens are organized in a **three-axis configuration model**:\n\n| Axis             | Values                         | Affects                                                  |\n| ---------------- | ------------------------------ | -------------------------------------------------------- |\n| **Theme**        | `start`, `wireframe`, ...      | All tokens (typography, spacing, borders, focus, colors) |\n| **Mode**         | `light`, `dark`                | Only color tokens                                        |\n| **Project Type** | `default`, `information-dense` | Only font-size tokens                                    |\n\nThis creates a matrix of configurations: **Theme × Mode × Project Type**.\n\n```\nstart-light-default\nstart-light-information-dense\nstart-dark-default\nstart-dark-information-dense\nwireframe-light-default\nwireframe-light-information-dense\nwireframe-dark-default\nwireframe-dark-information-dense\n```\n\n### Why Three Axes?\n\n- **Theme**: Defines the visual identity/branding. Different clients or products can have their own theme while sharing the same component library.\n- **Mode**: Light/dark color schemes. Users can switch modes without changing the theme.\n- **Project Type**: Typography density. Information-dense applications (dashboards, data tables) use fixed font sizes, while marketing sites use fluid typography.\n\n## Folder Structure\n\n```\nsrc/tokens/\n├── themes/\n│   ├── start/                    # Default theme\n│   │   ├── base.json             # Typography (excl font-size), spacing, sizing, borders, focus\n│   │   ├── colors-light.json     # Light mode colors\n│   │   └── colors-dark.json      # Dark mode colors\n│   └── wireframe/                # Wireframe/prototype theme\n│       ├── base.json             # System fonts, minimal borders\n│       ├── colors-light.json     # Grayscale palette\n│       └── colors-dark.json      # Inverted grayscale\n├── project-types/\n│   ├── default/\n│   │   └── typography.json       # Fluid clamp() font-sizes\n│   └── information-dense/\n│       └── typography.json       # Fixed font-sizes\n└── components/\n    └── form-control.json         # Component-level semantic tokens\n```\n\n## Token Categories\n\n### In Theme Base (`themes/*/base.json`)\n\n- **Typography**: Font families, weights, line heights\n- **Spacing**: 5 concepts (block, inline, text, column, row)\n- **Sizing**: Icon sizes (coupled to typography)\n- **Borders**: Radius and width values\n- **Focus States**: Accessible focus indicators\n- **Form Controls**: Structural tokens (spacing, borders)\n\n### In Theme Colors (`themes/*/colors-*.json`)\n\n- **Colors**: 10 semantic color sets with full state coverage\n  - Neutral, Accent 1-3, Action 1-2, Positive, Negative, Warning, Info\n  - Each with: bg, border, color × document, subtle, default, hover, active\n  - Plus inverse variants for dark backgrounds\n\n### In Project Type (`project-types/*/typography.json`)\n\n- **Font Sizes**: sm, md, lg, xl, 2xl, 3xl, 4xl\n  - `default`: Fluid sizes using `clamp()` for responsive scaling\n  - `information-dense`: Fixed rem sizes for data-heavy UIs\n\n## Installation\n\n```bash\npnpm add @dsn-starter-kit/design-tokens\n```\n\n## Usage\n\n### CSS Custom Properties\n\n```css\n/* Full configuration (recommended) */\n@import '@dsn-starter-kit/design-tokens/dist/css/start-light-default.css';\n\n/* Or use backward-compatible aliases */\n@import '@dsn-starter-kit/design-tokens/css'; /* → start-light-default */\n@import '@dsn-starter-kit/design-tokens/css/dark'; /* → start-dark-default */\n```\n\n### Available Configurations\n\n| Configuration                       | Description                                   |\n| ----------------------------------- | --------------------------------------------- |\n| `start-light-default`               | Start theme, light mode, fluid typography     |\n| `start-light-information-dense`     | Start theme, light mode, fixed typography     |\n| `start-dark-default`                | Start theme, dark mode, fluid typography      |\n| `start-dark-information-dense`      | Start theme, dark mode, fixed typography      |\n| `wireframe-light-default`           | Wireframe theme, light mode, fluid typography |\n| `wireframe-light-information-dense` | Wireframe theme, light mode, fixed typography |\n| `wireframe-dark-default`            | Wireframe theme, dark mode, fluid typography  |\n| `wireframe-dark-information-dense`  | Wireframe theme, dark mode, fixed typography  |\n\n### SCSS\n\n```scss\n@import '@dsn-starter-kit/design-tokens/dist/scss/start-light-default';\n\n/* Or backward-compatible */\n@import '@dsn-starter-kit/design-tokens/scss';\n```\n\n### JavaScript / TypeScript\n\n```ts\nimport tokens from '@dsn-starter-kit/design-tokens/dist/js/start-light-default';\n\n// Or backward-compatible\nimport tokens from '@dsn-starter-kit/design-tokens';\n```\n\n### Runtime Theme Switching\n\nFor applications that need to switch themes at runtime, import the full configuration CSS files dynamically:\n\n```ts\nfunction loadTheme(theme: string, mode: string, projectType: string) {\n  const configName = `${theme}-${mode}-${projectType}`;\n\n  // Remove existing theme stylesheet\n  document.querySelector('[data-dsn-theme]')?.remove();\n\n  // Load new configuration\n  const link = document.createElement('link');\n  link.rel = 'stylesheet';\n  link.href = `/path/to/design-tokens/dist/css/${configName}.css`;\n  link.setAttribute('data-dsn-theme', configName);\n  document.head.appendChild(link);\n}\n\n// Example: Switch to wireframe dark mode\nloadTheme('wireframe', 'dark', 'default');\n```\n\n## Output Formats\n\nBuilt with [Style Dictionary](https://amzn.github.io/style-dictionary/), tokens are exported as:\n\n| Format                 | Path Pattern                                   |\n| ---------------------- | ---------------------------------------------- |\n| CSS Custom Properties  | `dist/css/{theme}-{mode}-{projectType}.css`    |\n| SCSS Variables         | `dist/scss/_{theme}-{mode}-{projectType}.scss` |\n| JavaScript module      | `dist/js/{theme}-{mode}-{projectType}.js`      |\n| TypeScript definitions | `dist/js/{theme}-{mode}-{projectType}.d.ts`    |\n| JSON                   | `dist/json/{theme}-{mode}-{projectType}.json`  |\n\n### Backward Compatibility Aliases\n\nFor existing consumers, these aliases are maintained:\n\n| Alias                            | Points To                   |\n| -------------------------------- | --------------------------- |\n| `dist/css/variables.css`         | `start-light-default.css`   |\n| `dist/css/variables-dark.css`    | `start-dark-default.css`    |\n| `dist/scss/_variables.scss`      | `_start-light-default.scss` |\n| `dist/scss/_variables-dark.scss` | `_start-dark-default.scss`  |\n| `dist/js/tokens.js`              | `start-light-default.js`    |\n| `dist/js/tokens-dark.js`         | `start-dark-default.js`     |\n\n## Adding a New Theme\n\n1. Create a new folder under `src/tokens/themes/`:\n\n   ```\n   src/tokens/themes/my-theme/\n   ├── base.json\n   ├── colors-light.json\n   └── colors-dark.json\n   ```\n\n2. Copy an existing theme as a starting point:\n\n   ```bash\n   cp -r src/tokens/themes/start src/tokens/themes/my-theme\n   ```\n\n3. Update `src/config/config.js` to include your theme:\n\n   ```js\n   const themes = ['start', 'wireframe', 'my-theme'];\n   ```\n\n4. Customize the token values in your new theme files.\n\n5. Build:\n   ```bash\n   pnpm build\n   ```\n\n## Adding a New Project Type\n\n1. Create a new folder under `src/tokens/project-types/`:\n\n   ```\n   src/tokens/project-types/my-density/\n   └── typography.json\n   ```\n\n2. Define font-size tokens (must include all sizes: sm, md, lg, xl, 2xl, 3xl, 4xl):\n\n   ```json\n   {\n     \"dsn\": {\n       \"text\": {\n         \"font-size\": {\n           \"sm\": { \"value\": \"0.75rem\" },\n           \"md\": { \"value\": \"0.875rem\" },\n           ...\n         }\n       }\n     }\n   }\n   ```\n\n3. Update `src/config/config.js`:\n\n   ```js\n   const projectTypes = ['default', 'information-dense', 'my-density'];\n   ```\n\n4. Build.\n\n## Theme Comparison\n\n### Start Theme\n\n- **Font**: IBM Plex Sans / IBM Plex Mono\n- **Border radius**: 4px (sm), 8px (md), 16px (lg)\n- **Colors**: Full brand palette with blues, greens, reds, oranges\n- **Focus**: Yellow background with dashed outline (GOV.UK style)\n\n### Wireframe Theme\n\n- **Font**: System UI stack (system-ui, -apple-system, etc.)\n- **Border radius**: 2px (sm), 4px (md), 8px (lg): more minimal\n- **Colors**: Grayscale only: all semantic colors alias to neutral/accent-1\n- **Focus**: Blue outline (standard browser style)\n\n### Default vs Information-Dense\n\n| Size | Default (Fluid)                                  | Information-Dense (Fixed) |\n| ---- | ------------------------------------------------ | ------------------------- |\n| sm   | `clamp(0.875rem, 0.75rem + 0.25vw, 1.0625rem)`   | `0.875rem`                |\n| md   | `clamp(1rem, 0.875rem + 0.375vw, 1.28125rem)`    | `1rem`                    |\n| lg   | `clamp(1.25rem, 1.125rem + 0.375vw, 1.53125rem)` | `1.125rem`                |\n| xl   | `clamp(1.5rem, 1.25rem + 0.625vw, 1.9375rem)`    | `1.25rem`                 |\n| 2xl  | `clamp(2rem, 1.75rem + 0.75vw, 2.5625rem)`       | `1.5rem`                  |\n| 3xl  | `clamp(2.5rem, 2.125rem + 1.125vw, 3.3125rem)`   | `1.875rem`                |\n| 4xl  | `clamp(3rem, 2.5rem + 1.5vw, 4.125rem)`          | `2.25rem`                 |\n\n## Building\n\n```bash\npnpm --filter @dsn-starter-kit/design-tokens build\n```\n\n## Storybook Integration\n\nStorybook is configured with three toolbar controls:\n\n- **Theme**: Switch between Start and Wireframe\n- **Mode**: Switch between Light and Dark\n- **Density**: Switch between Default (Fluid) and Information Dense (Fixed)\n\nThe TokenTable component shows live computed CSS values that update when you change these settings.\n\n## License\n\nMIT\n","readmeFilename":"README.md"}