{"_id":"@skyscanner/bpk-web","_rev":"30-38e74d6b3a810dd49dbc6ee598d68349","name":"@skyscanner/bpk-web","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@skyscanner/bpk-web","version":"1.0.0","author":{"name":"Backpack Design System","email":"backpack@skyscanner.net"},"license":"Apache-2.0","_id":"@skyscanner/bpk-web@1.0.0","maintainers":[{"name":"k0nserv","email":"h@tunius.se"},{"name":"georgegillams","email":"g@georgegillams.co.uk"},{"name":"shaundon","email":"shaundonnelly@gmail.com"},{"name":"jiri.mikulka","email":"jiri.mikulka@skyscanner.net"},{"name":"leanmazzu","email":"leanmazzu@gmail.com"},{"name":"ojcurt","email":"oliver.curtis@skyscanner.net"}],"homepage":"https://github.com/Skyscanner/backpack-foundations#readme","bugs":{"url":"https://github.com/Skyscanner/backpack-foundations/issues"},"dist":{"shasum":"da82ceadf8f9d931ec104d77e1b56f4be83ee9e1","tarball":"https://registry.npmjs.org/@skyscanner/bpk-web/-/bpk-web-1.0.0.tgz","fileCount":14,"integrity":"sha512-oNEJu0TaC893MStsc2jvIDItaaDsn4ydE/LRj5hlul+hn59QR11iNhMIy0d3dhcZF4cQ+rm90AmyX60wZzKWBA==","signatures":[{"sig":"MEQCIGMOhvrA7TywzcySOVxCOWEGRA1hXGhCzwsNtu82yzcVAiAqB3N+EJCNwyXrinzJe9XcpJLLOgE+GoyCjYERSvkgjA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":227220,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtiZUCRA9TVsSAnZWagAAO4UQAJGNy8EkJFkJ1gNccCne\ngLB7Q8fszmwhrz20uiiNCV1aQWJ0cPUmc7cyG+ibrkxNUsJ45/RxvYoSUpc1\nZ5r0e+T8sGBhfPfRexagEfGb3JgAnnO7WD9P7+6BObixsy86HHohQb3a1tm/\nkQFQWQoPSDYNN7E4/yq783v7EGF6RP0llPqq2R+1P8WLt/CNq1TDYQaYPefP\nOf/cccWB/riD1FwYXI7mFu1fd9rPOFwZjZDpdV/PD7SHbxm863vMgrda7FQb\ns+MhaTsuggfgk45EuDBWv91u/GQPjSXknZOAXHZxoSyWkBphN+nX8GDb438p\n9DH1xwlqEWo/qTjk/Aw2p/iZ8GWUVwZn+VuHu0UbHtj3UBVs5/ZEGndHAOgi\n8GmB7XrB4fXlgyTh2V/Ge7Q9cnD2cVmr7Xv/aQ3wxyKVTntaXV5JkCg57yjn\nRk9y4nRnGUO2FQOPnramx8X0CLPfa+dFpiPOlxisoaTz6vy7vsbcPn7mUtqU\nXpB2MEEieeddnlZVgnteocNu/xGf0tOAPghRmHbQfVVt6jEkwYmzoBtU3drn\nnb1r/07HuT3hEU+S7gBLdT/4WbD3UNtjbMyXmN+jNFTqtjOjhVF2US6i7wdt\nkGllurIGOWN8gB48tB6HaeXzUm7GuJapLWqojvdx1xukUVYN/cS08OgsffSS\n1PQQ\r\n=7gZk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"e6e7271054994f0def8921c92ba8fdbe4e570e8a","scripts":{"tokens":"gulp"},"_npmUser":{"name":"ojcurt","email":"oliver.curtis@skyscanner.net"},"deprecated":"This package is no longer the correct package due to confusion with naming, to use this package please install @skyscanner/bpk-foundations-web instead","repository":{"url":"git+ssh://git@github.com/Skyscanner/backpack-foundations.git","type":"git"},"_npmVersion":"lerna/3.15.0/node@v12.22.1+x64 (darwin)","description":"Common Backpack design tokens for colors, spacing, font, etc.","directories":{},"_nodeVersion":"12.22.1","dependencies":{"color":"^3.0.0","@skyscanner/bpk-common":"^1.0.0"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/bpk-web_1.0.0_1622550100366_0.4180669036113658","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@skyscanner/bpk-web","version":"1.0.1","author":{"name":"Backpack Design System","email":"backpack@skyscanner.net"},"license":"Apache-2.0","_id":"@skyscanner/bpk-web@1.0.1","maintainers":[{"name":"k0nserv","email":"h@tunius.se"},{"name":"georgegillams","email":"g@georgegillams.co.uk"},{"name":"shaundon","email":"shaundonnelly@gmail.com"},{"name":"jiri.mikulka","email":"jiri.mikulka@skyscanner.net"},{"name":"leanmazzu","email":"leanmazzu@gmail.com"},{"name":"ojcurt","email":"oliver.curtis@skyscanner.net"}],"homepage":"https://github.com/Skyscanner/backpack-foundations#readme","bugs":{"url":"https://github.com/Skyscanner/backpack-foundations/issues"},"dist":{"shasum":"fe40bcf51216bfde10d0580de18af16d90e64611","tarball":"https://registry.npmjs.org/@skyscanner/bpk-web/-/bpk-web-1.0.1.tgz","fileCount":14,"integrity":"sha512-atp7lAmy51rvaGxl5o+fpxGgWUbNqomretTG+eCKhnVzPfG+ngEeocxLuY5yvGQJYncJCJ/xuWObd2bQxU8MiA==","signatures":[{"sig":"MEUCIFozJNdVT/WZ183UqRU3qbjzK7I1akQhPCaOdJ4htjaIAiEArGWrEBSBP96jjoVkGt8+QZNDddH+Pu4ewrTD90TGytk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":224155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtjs8CRA9TVsSAnZWagAALc8P/i0W3TOoS0SgAkRVpyne\n/eB1vJe2bf0W3ivbav3MVTID+dJdZKk1fvuyY8AsFP4763xogBOL/qkRSo3y\nzbInX831p9AQse9XEXoXVlo2oOn6xzj0DRNQX3/StiyeXFzR6SXgk2l/mqiJ\nsh+4BHiAk7pAu+igFW+0YUsJGaj8ZbQ7mPrloYU4vPqlaO9sFdw7PnKxvih6\nzWPrMHggigE4YYwteBBAbtR7yN68eWo2Zu7/CuHsf/czUklhwn28Wt9vewLa\n6iNdyaf5+E3PMNHLyXgxcaW3Hzyt2RnmoCdZxMD8v7Am9ykKzfmmGkj2n20y\n/gJK0P/vMjapwdIbGSfHUJ10dyhSUI7adWwV3dRvfrcUK/thzC29bC835jiE\nqoGMT2PEqq9jyPj1Oe2wkkb5ZkVMyzQKbG1lK9+aWFTJsyJynLTHUBYR7AWq\nbvkXPw3dzCGti229H31gzdgrfSbeQUDNkw+GC5/iMpDr3n43ji+MVjgagMSG\nSHY+10BOgH2g+oHGIRik6JuRuGQfqBrnAo5X7MuRUBEGjGqOjJO7UzAHFK/S\nbS5/gHKVpiiVv2BkOJ+9we4P0rDjkiZ8BcllxX5wm3ZC/6iqZsQx3Iu+nbxC\nDgtlhhKnCLgeQ2JV/hiSym3NcihNYJXEYCAvw269/rDAQwvKbegGwD+2GMS6\ndVU/\r\n=XlMI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"a8f1c8725c72122b95a507a66fdc658a0169fd60","scripts":{"tokens":"gulp"},"_npmUser":{"name":"ojcurt","email":"oliver.curtis@skyscanner.net"},"deprecated":"This package is no longer the correct package due to confusion with naming, to use this package please install @skyscanner/bpk-foundations-web instead","repository":{"url":"git+ssh://git@github.com/Skyscanner/backpack-foundations.git","type":"git"},"_npmVersion":"lerna/3.15.0/node@v12.22.1+x64 (darwin)","description":"Common Backpack design tokens for colors, spacing, font, etc.","directories":{},"_nodeVersion":"12.22.1","dependencies":{"color":"^3.0.0","@skyscanner/bpk-common":"^1.0.0"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/bpk-web_1.0.1_1622555452173_0.23636973707110198","host":"s3://npm-registry-packages"}}},"time":{"created":"2021-06-01T12:21:40.151Z","modified":"2025-10-09T08:44:42.537Z","0.0.2":"2021-05-27T15:46:52.926Z","1.0.0":"2021-06-01T12:21:40.516Z","1.0.1":"2021-06-01T13:50:52.297Z"},"bugs":{"url":"https://github.com/Skyscanner/backpack-foundations/issues"},"author":{"name":"Backpack Design System","email":"backpack@skyscanner.net"},"license":"Apache-2.0","homepage":"https://github.com/Skyscanner/backpack-foundations#readme","repository":{"url":"git+ssh://git@github.com/Skyscanner/backpack-foundations.git","type":"git"},"description":"Common Backpack design tokens for colors, spacing, font, etc.","maintainers":[{"email":"oliver.curtis@skyscanner.net","name":"ojcurt"},{"email":"gert-jan.vercauteren@skyscanner.net","name":"gert-jan.vercauteren"},{"email":"backpack@skyscanner.net","name":"skyscanner-koalasquad"}],"readme":"# @skyscanner/bpk-web\n\n> Design tokens for colours, spacing, font, etc.\n\n## Installation\n\n```sh\nnpm install @skyscanner/bpk-web --save-dev\n```\n\n## Usage\n\n### Sass:\n\n```scss\n@import '~@skyscanner/bpk-web/tokens/base.default.scss';\n\n.my-selector {\n  padding: $bpk-spacing-base;\n}\n```\n\n### JavaScript (ES6 module):\n\nFor web:\n\n```js\n// Individual tokens\nimport { spacingBase } from '@skyscanner/bpk-web/tokens/base.es6';\n\nconsole.log(spacingBase);\n\n// Whole token categories\nimport { colors } from '@skyscanner/bpk-web/tokens/base.es6';\n\nconsole.log(colors.colorSkyGrayTint01);\n\n// All tokens\nimport * as tokens from '@skyscanner/bpk-web/tokens/base.es6';\n\nconsole.log(tokens);\n```\n\n### JavaScript (CommonJS):\n\n```js\n// Individual tokens\nimport { spacingBase } from '@skyscanner/bpk-web/tokens/base.common';\n\nconsole.log(spacingBase);\n\n// All tokens\nimport * as tokens from '@skyscanner/bpk-web/tokens/base.common';\n\nconsole.log(tokens);\n```\n\n## Transparency\n\nIt is possible to add opacity to Backpack color tokens as follows:\n\n```js\nimport { colorSkyBlue } from '@skyscanner/bpk-web/tokens/base.common';\nimport { setOpacity } from '@skyscanner/bpk-web';\n\nconst transparentBlue500 = setOpacity(colorSkyBlue, 0.7);\n\nconsole.log(transparentBlue500);\n```\n","readmeFilename":"README.md"}