{"_id":"@deriv-web-design/tokens","_rev":"13-b24e4b5ccabbefaaa32dbb0828e1cd38","name":"@deriv-web-design/tokens","dist-tags":{"latest":"0.0.13"},"versions":{"0.0.1":{"name":"@deriv-web-design/tokens","version":"0.0.1","_id":"@deriv-web-design/tokens@0.0.1","maintainers":[{"name":"robin.saha","email":"robin@regentmarkets.com"}],"dist":{"shasum":"4ed9ad42dcc7d90a656ef9a1da17632e860a670f","tarball":"https://registry.npmjs.org/@deriv-web-design/tokens/-/tokens-0.0.1.tgz","fileCount":3,"integrity":"sha512-Sopui5eC+lpVomAd8XxM3hA4ZIofkGgXc1dAJDupd5CYr/glZY6QIvlRLVB7RLpG2gkxjcWtWj5QTcSpnh9kpw==","signatures":[{"sig":"MEYCIQDM/T10D3qp5GJ6P5vE9ezQX4qdJ0t4C8Q+2zihRHRJXAIhAOQ9WWcopivigUhFg7DZ7G8QKAYmPKD1PqKqr2A2SLcK","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":14454},"_from":"file:deriv-web-design-tokens-0.0.1.tgz","exports":{"./tokens.css":"./tokens.css"},"_npmUser":{"name":"robin.saha","email":"robin@regentmarkets.com"},"_resolved":"/tmp/2fa9b890384619a6a239f724513cce93/deriv-web-design-tokens-0.0.1.tgz","_integrity":"sha512-Sopui5eC+lpVomAd8XxM3hA4ZIofkGgXc1dAJDupd5CYr/glZY6QIvlRLVB7RLpG2gkxjcWtWj5QTcSpnh9kpw==","_npmVersion":"10.9.4","description":"Starter design tokens package for the Deriv design system.","directories":{},"_nodeVersion":"22.22.1","publishConfig":{"access":"public","registry":"https://registry.npmjs.org"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tokens_0.0.1_1773814536648_0.2887672972604285","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@deriv-web-design/tokens","version":"0.0.2","_id":"@deriv-web-design/tokens@0.0.2","maintainers":[{"name":"robin.saha","email":"robin@regentmarkets.com"}],"dist":{"shasum":"91aac8800b66999b10c03d01732d37ee554d82f2","tarball":"https://registry.npmjs.org/@deriv-web-design/tokens/-/tokens-0.0.2.tgz","fileCount":3,"integrity":"sha512-2bHGO30N0aJmJmN8vL3n6U2hdosSh5DeY3MNZG1mB4FSUqBgUFlekaWqigt9LrS00vBLfGEwLCu/XY0UnTHvOA==","signatures":[{"sig":"MEUCIQDjR/mk3C8HRd9zt6pl/W5dLlwWHwtHCTKdeo3lAPu+FgIgMQN4LHucPM83JGQCLZiCwI1lwtcyDSJPakObJaTmJjM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":17074},"_from":"file:deriv-web-design-tokens-0.0.2.tgz","exports":{"./tokens.css":"./tokens.css"},"_npmUser":{"name":"robin.saha","email":"robin@regentmarkets.com"},"_resolved":"/tmp/c98ad6306b0d5cf6d522b19c060c3bab/deriv-web-design-tokens-0.0.2.tgz","_integrity":"sha512-2bHGO30N0aJmJmN8vL3n6U2hdosSh5DeY3MNZG1mB4FSUqBgUFlekaWqigt9LrS00vBLfGEwLCu/XY0UnTHvOA==","_npmVersion":"10.9.4","description":"Design tokens for the Deriv Web Design System. A single CSS file with all design decisions — colours, spacing, typography, shadows, border radius, and breakpoints — as CSS custom properties.","directories":{},"_nodeVersion":"22.22.1","publishConfig":{"access":"public","registry":"https://registry.npmjs.org"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tokens_0.0.2_1773816342741_0.7809650523680003","host":"s3://npm-registry-packages-npm-production"}},"0.0.4":{"name":"@deriv-web-design/tokens","version":"0.0.4","_id":"@deriv-web-design/tokens@0.0.4","maintainers":[{"name":"robin.saha","email":"robin@regentmarkets.com"}],"dist":{"shasum":"e1a349b83c06932bae738762828ebd2f7d26448c","tarball":"https://registry.npmjs.org/@deriv-web-design/tokens/-/tokens-0.0.4.tgz","fileCount":3,"integrity":"sha512-E81UMZph64PT9vrdZUJxbk2KtrQc2rVzqyL4O2ih3lvgbsN9P+s/SBWM9hpIlzpE0XZK1jJMSkgJELLMEuapOw==","signatures":[{"sig":"MEUCIBtFMCXu3hrGRiS6vj2VZCKDPYihFPqFyz8eaUJPw5dhAiEA86ImlfACeh04tSe77xzA7JbagYq7dyuovK1RnEx8vjY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":21837},"exports":{"./tokens.css":"./tokens.css"},"gitHead":"1d28aea8316ca2d8b606ccb4c811fa2a38c29d1f","_npmUser":{"name":"robin.saha","email":"robin@regentmarkets.com"},"_npmVersion":"10.9.4","description":"Design tokens for the Deriv Web Design System. A single CSS file containing all design decisions — colours, spacing, typography, shadows, border radius, and breakpoints — as CSS custom properties.","directories":{},"_nodeVersion":"22.21.1","publishConfig":{"access":"public","registry":"https://registry.npmjs.org"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tokens_0.0.4_1774602829464_0.19141319598420425","host":"s3://npm-registry-packages-npm-production"}},"0.0.6":{"name":"@deriv-web-design/tokens","version":"0.0.6","_id":"@deriv-web-design/tokens@0.0.6","maintainers":[{"name":"robin.saha","email":"robin@regentmarkets.com"},{"name":"dinidu-deriv","email":"dinidu@regentmarkets.com"}],"dist":{"shasum":"77b91ada4cf11b02d9f8a97f1dd7cafc09e54d78","tarball":"https://registry.npmjs.org/@deriv-web-design/tokens/-/tokens-0.0.6.tgz","fileCount":3,"integrity":"sha512-+0naq95gBmBEoWuUhkedyIQSU06dHz6uWaclmzNgT5pqYvnwHlJVEQQPXTwumU0Ql5S0+bJptJ7JJ8neYILiBg==","signatures":[{"sig":"MEUCIG8AnsxkMeh0xBhVBIueQOWhhqqfdXinxz+pMHJQtxDjAiEAn9OO7AVkXaA0wb1gwTrkr/552ZZ/tQJZDMpFj02PwYI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":26739},"exports":{"./tokens.css":"./tokens.css"},"gitHead":"a8b46994104513f4edf15ce15c9217fd0bb2dcfe","_npmUser":{"name":"dinidu-deriv","email":"dinidu@regentmarkets.com"},"_npmVersion":"11.9.0","description":"Design tokens for the Deriv Web Design System. A single CSS file containing all design decisions — colours, spacing, typography, shadows, border radius, and breakpoints — as CSS custom properties.","directories":{},"_nodeVersion":"24.14.0","publishConfig":{"access":"public","registry":"https://registry.npmjs.org"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tokens_0.0.6_1775202780616_0.1608397111331703","host":"s3://npm-registry-packages-npm-production"}},"0.0.5":{"name":"@deriv-web-design/tokens","version":"0.0.5","_id":"@deriv-web-design/tokens@0.0.5","maintainers":[{"name":"robin.saha","email":"robin@regentmarkets.com"},{"name":"dinidu-deriv","email":"dinidu@regentmarkets.com"}],"dist":{"shasum":"c9eb12ca1ef8f4f47d5f2bdf8f0b5b25c503196c","tarball":"https://registry.npmjs.org/@deriv-web-design/tokens/-/tokens-0.0.5.tgz","fileCount":3,"integrity":"sha512-7/RpT7z7b8TGS6NUY1FeFM3/Jm03+gVHtrnm6JqozwKWPsm2jh0ffIk7a0HBcvmJTW2NyifZmGrYqLwYDHNMgQ==","signatures":[{"sig":"MEQCIAvAyXOlWW0XXIK3lPb98R2Q/2UbkSHE4ZfdGF3qO4OAAiA5rvpkjraWuyS97/KlT28oKjxfzt/oLxAPcH+YHktElQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":26738},"exports":{"./tokens.css":"./tokens.css"},"gitHead":"a8b46994104513f4edf15ce15c9217fd0bb2dcfe","_npmUser":{"name":"dinidu-deriv","email":"dinidu@regentmarkets.com"},"_npmVersion":"11.9.0","description":"Design tokens for the Deriv Web Design System. A single CSS file containing all design decisions — colours, spacing, typography, shadows, border radius, and breakpoints — as CSS custom properties.","directories":{},"_nodeVersion":"24.14.0","publishConfig":{"access":"public","registry":"https://registry.npmjs.org"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tokens_0.0.5_1775202847769_0.6544202458624797","host":"s3://npm-registry-packages-npm-production"}},"0.0.7":{"name":"@deriv-web-design/tokens","version":"0.0.7","_id":"@deriv-web-design/tokens@0.0.7","maintainers":[{"name":"robin.saha","email":"robin@regentmarkets.com"},{"name":"dinidu-deriv","email":"dinidu@regentmarkets.com"}],"dist":{"shasum":"87db58c1e5ad0391eedea36e2410ff046bb145f3","tarball":"https://registry.npmjs.org/@deriv-web-design/tokens/-/tokens-0.0.7.tgz","fileCount":3,"integrity":"sha512-Rra5aik+kDToJM0IwYs0e9441CFzx9+goO1w4mqKLKjPREzGZjNwbIThjDU6/mlh84ok7dsu1qgWaEyfvWmkFw==","signatures":[{"sig":"MEUCIAo4WWKQ3iVOmamPK8TiEZwTR6rnTMAB2a/srRKJmWooAiEAlaDxrS4vz5wL+R15GIM5CciYl8t0hKO4usGyZuaXrgw=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":26918},"exports":{"./tokens.css":"./tokens.css"},"gitHead":"31b5118662e71a3496c9d20b06b8ae938b680327","_npmUser":{"name":"dinidu-deriv","email":"dinidu@regentmarkets.com"},"_npmVersion":"11.9.0","description":"Design tokens for the Deriv Web Design System. A single CSS file containing all design decisions — colours, spacing, typography, shadows, border radius, and breakpoints — as CSS custom properties.","directories":{},"_nodeVersion":"24.14.0","publishConfig":{"access":"public","registry":"https://registry.npmjs.org"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tokens_0.0.7_1775824103764_0.280970045452537","host":"s3://npm-registry-packages-npm-production"}},"0.0.8":{"name":"@deriv-web-design/tokens","version":"0.0.8","_id":"@deriv-web-design/tokens@0.0.8","maintainers":[{"name":"robin.saha","email":"robin@regentmarkets.com"},{"name":"dinidu-deriv","email":"dinidu@regentmarkets.com"}],"dist":{"shasum":"150ac5b0f85a6faa5bf9ed5f401faa48df6a2988","tarball":"https://registry.npmjs.org/@deriv-web-design/tokens/-/tokens-0.0.8.tgz","fileCount":3,"integrity":"sha512-xdQC8QhEfb2v4e3NN+/QLg6CnAErNY6tYrOsvhaxA7ZCwLDwz/9JKaSNfHD6TKt/N2b9EI5BuJE2CTdX2km0Fg==","signatures":[{"sig":"MEUCIQC8Nk9HZunfVh97SuUB+3lZnueNLYHc2zWjJEwSKf3hcwIgSkQFRaNuJS/XPBCZSBie28D2Eb8UFnmEEgwS+FVwgdU=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":27507},"exports":{"./tokens.css":"./tokens.css"},"gitHead":"bc1007e3b931e671dafa11887f11d3b100794c61","_npmUser":{"name":"dinidu-deriv","email":"dinidu@regentmarkets.com"},"_npmVersion":"11.9.0","description":"Design tokens for the Deriv Web Design System. A single CSS file containing all design decisions — colours, spacing, typography, shadows, border radius, and breakpoints — as CSS custom properties.","directories":{},"_nodeVersion":"24.14.0","publishConfig":{"access":"public","registry":"https://registry.npmjs.org"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tokens_0.0.8_1776079351055_0.5520034842776769","host":"s3://npm-registry-packages-npm-production"}},"0.0.9":{"name":"@deriv-web-design/tokens","version":"0.0.9","_id":"@deriv-web-design/tokens@0.0.9","maintainers":[{"name":"robin.saha","email":"robin@regentmarkets.com"},{"name":"dinidu-deriv","email":"dinidu@regentmarkets.com"}],"dist":{"shasum":"b352679ca06c927f6f9f17d06842a4c85490bd62","tarball":"https://registry.npmjs.org/@deriv-web-design/tokens/-/tokens-0.0.9.tgz","fileCount":3,"integrity":"sha512-O8amujFMAr4O4yLefVQ/joYuQlpIlGtSsYdFJnfKnR2TtgwuKiTELZi8Kd+/hYxSYhgGDqsm/oEiT3VyFEpvrA==","signatures":[{"sig":"MEUCIQDCLB5hJO3IM4DYRoGLPg6OMWicZCMJPkD1yH9au/MiTQIgHI9BvFiRFEVQj7XHy8Gvsow0zj+pVvLMTPhF1EuW1Ww=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":28708},"exports":{"./tokens.css":"./tokens.css"},"gitHead":"feff534e480e8d991aed9c25ebade7d7ff8b3b8d","_npmUser":{"name":"dinidu-deriv","email":"dinidu@regentmarkets.com"},"_npmVersion":"11.9.0","description":"Design tokens for the Deriv Web Design System. A single CSS file containing all design decisions — colours, spacing, typography, shadows, border radius, and breakpoints — as CSS custom properties.","directories":{},"_nodeVersion":"24.14.0","publishConfig":{"access":"public","registry":"https://registry.npmjs.org"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tokens_0.0.9_1776174410833_0.8669452859549591","host":"s3://npm-registry-packages-npm-production"}},"0.0.10":{"name":"@deriv-web-design/tokens","version":"0.0.10","_id":"@deriv-web-design/tokens@0.0.10","maintainers":[{"name":"robin.saha","email":"robin@regentmarkets.com"},{"name":"dinidu-deriv","email":"dinidu@regentmarkets.com"}],"dist":{"shasum":"a341a1f08377b12b20c0de8323eb221d957e280f","tarball":"https://registry.npmjs.org/@deriv-web-design/tokens/-/tokens-0.0.10.tgz","fileCount":3,"integrity":"sha512-Uxc995ErNz31FH4v5uJVJwlCntAylLhRUMpB0Y+6hmFMdUuTJ+D9/d1F5rf39/NUK0h0GVx9X83Nd9T0evL9fQ==","signatures":[{"sig":"MEUCIFpBSqOQVzUOs8sME845UIZOoTriu4X4mcGtC1t2lQTfAiEAiGwZSvzhLSbyLyWnXGh5EW0rSXAdGf9LBfo9vRn2+j0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":28710},"exports":{"./tokens.css":"./tokens.css"},"gitHead":"4b1445d70561142ae25c977de90da0bf8dc00503","_npmUser":{"name":"dinidu-deriv","email":"dinidu@regentmarkets.com"},"_npmVersion":"11.9.0","description":"Design tokens for the Deriv Web Design System. A single CSS file containing all design decisions — colours, spacing, typography, shadows, border radius, and breakpoints — as CSS custom properties.","directories":{},"_nodeVersion":"24.14.0","publishConfig":{"access":"public","registry":"https://registry.npmjs.org"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tokens_0.0.10_1776407070341_0.16294722146087737","host":"s3://npm-registry-packages-npm-production"}},"0.0.11":{"name":"@deriv-web-design/tokens","version":"0.0.11","_id":"@deriv-web-design/tokens@0.0.11","maintainers":[{"name":"robin.saha","email":"robin@regentmarkets.com"},{"name":"dinidu-deriv","email":"dinidu@regentmarkets.com"}],"dist":{"shasum":"d4265d46a1f56b52d7e5626ec860569aa4920469","tarball":"https://registry.npmjs.org/@deriv-web-design/tokens/-/tokens-0.0.11.tgz","fileCount":3,"integrity":"sha512-x23CRWjj6LmbiTkIJ+76ECzDMF+NmgLlMBwg8Uh5LpVdxvEwS2GxNbFgas+Zvo+VRIN3WkL/gzkCcwQPJ9QCvw==","signatures":[{"sig":"MEQCIACkuEmIYILn4IV+jvpQQ/32mXWJnrR3sOOb1qI9YxtHAiBZ6efshZbhi9mWnLmdVJ6XZlNOws6Ov8881jJqkBJuAQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":28716},"exports":{"./tokens.css":"./tokens.css"},"gitHead":"0a9f1404c4ae2793c2122886c82641384dbb3499","_npmUser":{"name":"dinidu-deriv","email":"dinidu@regentmarkets.com"},"_npmVersion":"11.9.0","description":"Design tokens for the Deriv Web Design System. A single CSS file containing all design decisions — colours, spacing, typography, shadows, border radius, and breakpoints — as CSS custom properties.","directories":{},"_nodeVersion":"24.14.0","publishConfig":{"access":"public","registry":"https://registry.npmjs.org"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tokens_0.0.11_1776670465322_0.2314746188772896","host":"s3://npm-registry-packages-npm-production"}},"0.0.12":{"name":"@deriv-web-design/tokens","version":"0.0.12","_id":"@deriv-web-design/tokens@0.0.12","maintainers":[{"name":"robin.saha","email":"robin@regentmarkets.com"},{"name":"dinidu-deriv","email":"dinidu@regentmarkets.com"}],"dist":{"shasum":"0ad6fe2045278975f8559b345791ff26bbdf960c","tarball":"https://registry.npmjs.org/@deriv-web-design/tokens/-/tokens-0.0.12.tgz","fileCount":3,"integrity":"sha512-gVF55Yd6JgtExhUSVdyyrHMrbDynhpz0f6T2FEE6vETQ6862KQ4K2G6p5lJP9Tacgx+tvegEo/YNazjhmQ2QCg==","signatures":[{"sig":"MEQCIEHP9GQE1f916jBJ8kMDLjeK/TWDeh4hcOn5apz3JHHxAiAxRcaxCjhCoo3OQPHcTyCUYl30pasEQOQZOWnx8mqRWg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":26968},"_from":"file:deriv-web-design-tokens-0.0.12.tgz","exports":{"./tokens.css":"./tokens.css"},"scripts":{"build":"node build.mjs"},"_npmUser":{"name":"dinidu-deriv","email":"dinidu@regentmarkets.com"},"_resolved":"/private/var/folders/66/nkt6fq6j1hl07h9d_y155ztr0000gp/T/10c3c1c1a6c5d335cca310c71876f9ff/deriv-web-design-tokens-0.0.12.tgz","_integrity":"sha512-gVF55Yd6JgtExhUSVdyyrHMrbDynhpz0f6T2FEE6vETQ6862KQ4K2G6p5lJP9Tacgx+tvegEo/YNazjhmQ2QCg==","_npmVersion":"11.9.0","description":"Design tokens for the Deriv Web Design System. A single CSS file containing all design decisions — colours, spacing, typography, shadows, border radius, and breakpoints — as CSS custom properties.","directories":{},"_nodeVersion":"24.14.0","publishConfig":{"access":"public","registry":"https://registry.npmjs.org"},"_hasShrinkwrap":false,"devDependencies":{"style-dictionary":"^4.3.0"},"_npmOperationalInternal":{"tmp":"tmp/tokens_0.0.12_1781786635324_0.5953286540130651","host":"s3://npm-registry-packages-npm-production"}},"0.0.13":{"name":"@deriv-web-design/tokens","version":"0.0.13","exports":{"./tokens.css":"./tokens.css"},"devDependencies":{"style-dictionary":"^4.3.0"},"publishConfig":{"registry":"https://registry.npmjs.org","access":"public"},"scripts":{"build":"node build.mjs"},"_id":"@deriv-web-design/tokens@0.0.13","description":"Design tokens for the Deriv Web Design System. A single CSS file containing all design decisions — colours, spacing, typography, shadows, border radius, and breakpoints — as CSS custom properties.","_integrity":"sha512-Idsx61ujFy4vTXU7g9fXMiM5VMVW4rqWVqaAV7u4uqGJBaE9wAzjGPkf9tDsDREEl+PZ/i8NoCpukTD/k1T15w==","_resolved":"/private/var/folders/66/nkt6fq6j1hl07h9d_y155ztr0000gp/T/85cb7521f03cbb86d2a0cf8a7b222ebd/deriv-web-design-tokens-0.0.13.tgz","_from":"file:deriv-web-design-tokens-0.0.13.tgz","_nodeVersion":"24.14.0","_npmVersion":"11.9.0","dist":{"integrity":"sha512-Idsx61ujFy4vTXU7g9fXMiM5VMVW4rqWVqaAV7u4uqGJBaE9wAzjGPkf9tDsDREEl+PZ/i8NoCpukTD/k1T15w==","shasum":"5e1c97ca8581f3e4238cb13544fae675f5c784f0","tarball":"https://registry.npmjs.org/@deriv-web-design/tokens/-/tokens-0.0.13.tgz","fileCount":3,"unpackedSize":26999,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCaz2fT06SZUqx0OB/A01t9jpTY6cAHnd5GecMXLwywEAIhAI7TEL6WeumH/j9sBu5EDBmvWzxfIxCnQiNKDp6ifBsj"}]},"_npmUser":{"name":"dinidu-deriv","email":"dinidu@regentmarkets.com"},"directories":{},"maintainers":[{"name":"robin.saha","email":"robin@regentmarkets.com"},{"name":"dinidu-deriv","email":"dinidu@regentmarkets.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/tokens_0.0.13_1782116430716_0.7284801228725579"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-18T06:15:36.559Z","modified":"2026-06-22T08:20:31.066Z","0.0.1":"2026-03-18T06:15:36.812Z","0.0.2":"2026-03-18T06:45:42.902Z","0.0.4":"2026-03-27T09:13:49.595Z","0.0.6":"2026-04-03T07:53:00.765Z","0.0.5":"2026-04-03T07:54:07.898Z","0.0.7":"2026-04-10T12:28:23.903Z","0.0.8":"2026-04-13T11:22:31.190Z","0.0.9":"2026-04-14T13:46:50.973Z","0.0.10":"2026-04-17T06:24:30.497Z","0.0.11":"2026-04-20T07:34:25.461Z","0.0.12":"2026-06-18T12:43:55.462Z","0.0.13":"2026-06-22T08:20:30.862Z"},"description":"Design tokens for the Deriv Web Design System. A single CSS file containing all design decisions — colours, spacing, typography, shadows, border radius, and breakpoints — as CSS custom properties.","maintainers":[{"name":"robin.saha","email":"robin@regentmarkets.com"},{"name":"dinidu-deriv","email":"dinidu@regentmarkets.com"}],"readme":"# @deriv-web-design/tokens\n\nDesign tokens for the Deriv Web Design System. A single CSS file containing all design decisions — colours, spacing, typography, shadows, border radius, and breakpoints — as CSS custom properties.\n\n## Installation\n\n```bash\nnpm install @deriv-web-design/tokens\n```\n\n## Setup\n\nImport the tokens CSS file once in your app entry point:\n\n```js\nimport \"@deriv-web-design/tokens/tokens.css\";\n```\n\nAll tokens are then available as CSS variables throughout your application.\n\n## Usage\n\n```css\n.my-button {\n  background: var(--color-coral-700);\n  color: var(--color-slate-50);\n  padding: var(--spacing-8) var(--spacing-16);\n  border-radius: var(--radius-md);\n  font-size: var(--font-size-sm);\n  box-shadow: var(--shadow-sm);\n}\n```\n\n## Token Categories\n\n### Colors — Core Palette\nRaw palette values. **Do not use these directly in components** — use semantic tokens instead.\n\n```css\n/* Slate (neutral scale) */\nvar(--color-slate-50)      /* #ffffff */\nvar(--color-slate-75)      /* #f6f7f8 */\nvar(--color-slate-500)     /* #787d88 */\nvar(--color-slate-1200)    /* #181c25 */\nvar(--color-slate-1400)    /* #000000 */\n\n/* Coral (brand) */\nvar(--color-coral-700)     /* #ff444f */\nvar(--color-coral-800)     /* #e12e3a */\nvar(--color-coral-900)     /* #c41c28 */\n\n/* Emerald */\nvar(--color-emerald-500)   /* #4cd6c0 */\nvar(--color-emerald-600)   /* #00b39a */\nvar(--color-emerald-700)   /* #00a286 */\n\n/* Yellow */\nvar(--color-yellow-500)    /* #ffb84d */\nvar(--color-yellow-600)    /* #e4a700 */\n\n/* Blue */\nvar(--color-blue-500)      /* #4da6ff */\nvar(--color-blue-600)      /* #2f77ff */\n\n/* Cherry (danger) */\nvar(--color-cherry-700)    /* #dc0000 */\nvar(--color-cherry-800)    /* #f50032 */\nvar(--color-cherry-900)    /* #dc002c */\n\n/* Opacity utilities */\nvar(--color-opacity-slate-8)\nvar(--color-opacity-white-16)\nvar(--color-opacity-green-8)\nvar(--color-opacity-red-8)\n```\n\n### Colors — Semantic Tokens\nPurpose-driven tokens. **Always use these in components.**\n\n```css\n/* Button */\nvar(--button-primary-background)\nvar(--button-primary-text)\nvar(--button-secondary-background)\nvar(--button-secondary-border)\nvar(--button-ghost-background)\nvar(--button-danger-background)\nvar(--button-disabled-background)\n\n/* TextField */\nvar(--field-border-default)\nvar(--field-border-focus)\nvar(--field-border-fail-focus)\nvar(--field-border-success-focus)\nvar(--field-text-default)\nvar(--field-text-placeholder)\n\n/* Chip */\nvar(--chip-border-color)\nvar(--chip-selected-background)\nvar(--chip-selected-text)\n\n/* Accordion */\nvar(--accordion-divider-color)\nvar(--accordion-title-color)\n\n/* Breadcrumb */\nvar(--breadcrumb-text-color)\nvar(--breadcrumb-separator-color)\n\n/* Pagination */\nvar(--pagination-page-selected-bg)\nvar(--pagination-page-selected-text)\n```\n\n### Spacing\n8-point scale in `rem` units:\n\n```css\nvar(--spacing-0)    /* 0rem    — 0px   */\nvar(--spacing-2)    /* 0.125rem — 2px  */\nvar(--spacing-4)    /* 0.25rem — 4px   */\nvar(--spacing-8)    /* 0.5rem  — 8px   */\nvar(--spacing-12)   /* 0.75rem — 12px  */\nvar(--spacing-16)   /* 1rem    — 16px  */\nvar(--spacing-24)   /* 1.5rem  — 24px  */\nvar(--spacing-32)   /* 2rem    — 32px  */\nvar(--spacing-40)   /* 2.5rem  — 40px  */\nvar(--spacing-48)   /* 3rem    — 48px  */\nvar(--spacing-56)   /* 3.5rem  — 56px  */\nvar(--spacing-64)   /* 4rem    — 64px  */\nvar(--spacing-72)   /* 4.5rem  — 72px  */\nvar(--spacing-80)   /* 5rem    — 80px  */\nvar(--spacing-88)   /* 5.5rem  — 88px  */\nvar(--spacing-96)   /* 6rem    — 96px  */\nvar(--spacing-112)  /* 7rem    — 112px */\n```\n\n### Typography\nFont family: **Inter**. All sizes in `rem` for accessibility.\n\n```css\n/* Font sizes (mobile base, responsive for xl–5xl) */\nvar(--font-size-xs)    /* 0.75rem  — 12px */\nvar(--font-size-sm)    /* 0.875rem — 14px */\nvar(--font-size-md)    /* 1rem     — 16px */\nvar(--font-size-lg)    /* 1.125rem — 18px */\nvar(--font-size-xl)    /* 1.25rem  → 1.5rem → 1.75rem (mobile/tablet/desktop) */\nvar(--font-size-2xl)   /* 1.5rem   → 2rem  → 2.5rem  */\nvar(--font-size-3xl)   /* 2rem     → 2.5rem → 3rem   */\nvar(--font-size-4xl)   /* 2.5rem   → 3rem  → 3.5rem  */\nvar(--font-size-5xl)   /* 3rem     → 4rem  → 5rem    */\n\n/* Font weights */\nvar(--font-weight-regular)    /* 400 */\nvar(--font-weight-semi-bold)  /* 600 */\nvar(--font-weight-extra-bold) /* 800 */\n\n/* Line heights */\nvar(--line-height-tight)    /* 1.2  */\nvar(--line-height-snug)     /* 1.3  */\nvar(--line-height-normal)   /* 1.5  */\nvar(--line-height-relaxed)  /* 1.75 */\n```\n\n### Border Radius\n\n```css\nvar(--radius-none)   /* 0        */\nvar(--radius-xs)     /* 0.125rem — 2px  */\nvar(--radius-md)     /* 0.5rem   — 8px  */\nvar(--radius-xl)     /* 1rem     — 16px */\nvar(--radius-2xl)    /* 1.5rem   — 24px */\nvar(--radius-3xl)    /* 2rem     — 32px */\nvar(--radius-full)   /* 9999px   — pill */\n```\n\n### Shadows\n\n```css\nvar(--shadow-xs)   /* 0 1px 2px rgba(0,0,0,0.04)   */\nvar(--shadow-sm)   /* 0 1px 3px rgba(0,0,0,0.08)   */\nvar(--shadow-md)   /* 0 4px 8px rgba(0,0,0,0.12)   */\nvar(--shadow-lg)   /* 0 8px 16px rgba(0,0,0,0.16)  */\nvar(--shadow-xl)   /* 0 12px 24px rgba(0,0,0,0.20) */\n```\n\n### Breakpoints\nMobile-first with three breakpoints (`mobile` is the base — styles apply to all screens). Above `desktop`, styles stay the same.\n\n```css\n/* Mobile: base — applies to all screens (0px) */\n\n/* Tablet: 768px and above */\n@media (min-width: 768px) { ... }\n\n/* Desktop: 992px and above */\n@media (min-width: 992px) { ... }\n```\n\n## Using with @deriv-web-design/ui\n\nTokens are already bundled inside `@deriv-web-design/ui`. Only install this package separately if you are building custom components without the UI library.\n","readmeFilename":"README.md"}