{"_id":"design-system-utils","_rev":"34-551fcf5ade033184d849f5d2a5e038ab","name":"design-system-utils","description":"Design-system utils for working with JS-in-CSS","dist-tags":{"latest":"1.5.0","beta":"1.5.0-1"},"versions":{"0.0.1":{"name":"design-system-utils","version":"0.0.1","description":"Design-system utils for working with JS-in-CSS","main":"src/index.js","directories":{"example":"example"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"babel src -d dist","postinstall":"npm run build"},"keywords":["css-in-js","glamorous","styled-components","emotion","CSS"],"author":{"name":"Zander Martineau"},"license":"MIT","devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.6.0"},"dependencies":{"modularscale-js":"^3.0.1","object-get":"^2.1.0"},"gitHead":"463e5113a2094bf1dde1bfa529c1ed21bcd1bb15","_id":"design-system-utils@0.0.1","_npmVersion":"5.4.0","_nodeVersion":"8.3.0","_npmUser":{"name":"mrmartineau","email":"z@martineau.tv"},"dist":{"integrity":"sha512-DMpnJjfYblw46wRaRkoqCXrNOskTrrYDlT+9vlOCTXvWAOwfcaZ1A3Zfy6g2adEFqNWL3VSjtFsZZe1UIPlwJw==","shasum":"c9a1ac6c058aaa1dca5dec14754dd05604fde798","tarball":"https://registry.npmjs.org/design-system-utils/-/design-system-utils-0.0.1.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHXka+URy/dWEwxnL+4bk2gxdR9cBbjfBX0kP2/nwnxXAiBi7fEgKHariupQOMt3wUJwtqGdZksXIqQ+R2vrfMBJGA=="}]},"maintainers":[{"name":"mrmartineau","email":"z@martineau.tv"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-system-utils-0.0.1.tgz_1504516794420_0.8594629194121808"}},"0.0.2":{"name":"design-system-utils","version":"0.0.2","description":"Design-system utils for working with JS-in-CSS","main":"./cjs/index.js","module":"./esm/index.js","directories":{"example":"example"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"babel src -d cjs","prepublishOnly":"npm run build"},"keywords":["css-in-js","glamorous","styled-components","emotion","styled-jsx","CSS"],"author":{"name":"Zander Martineau"},"license":"MIT","devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.6.0"},"dependencies":{"modularscale-js":"^3.0.1","object-get":"^2.1.0"},"gitHead":"5952ff6b97d0f8718ba7571671fa075a6ffa9320","_id":"design-system-utils@0.0.2","_npmVersion":"5.4.2","_nodeVersion":"8.5.0","_npmUser":{"name":"mrmartineau","email":"z@martineau.tv"},"dist":{"integrity":"sha512-IEY/uCWJyXNX1nTWtEvr6tHgixg71lut1kArti4mxovd6xAPDkj5EJ4XS/yzJyiiqv31fLrMOxs+wqkL4inB7g==","shasum":"9b31f805e14275a8601141efcd273f58076ac579","tarball":"https://registry.npmjs.org/design-system-utils/-/design-system-utils-0.0.2.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCWXtBsCw2OMEQCQgjNrQzzVxMWC4xIu9vhvmFGzE6T4QIhANkfK8/84Ke7kvbxYyZ7rYmMfGPLfswa51RQ4Ds/T9RB"}]},"maintainers":[{"name":"mrmartineau","email":"z@martineau.tv"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-system-utils-0.0.2.tgz_1506145540595_0.1510619716718793"}},"0.1.0":{"name":"design-system-utils","version":"0.1.0","description":"Design-system utils for working with JS-in-CSS","main":"./cjs/index.js","module":"./esm/index.js","directories":{"example":"example"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"babel src -d cjs","prepublishOnly":"npm run build"},"keywords":["css-in-js","glamorous","styled-components","emotion","styled-jsx","CSS"],"author":{"name":"Zander Martineau"},"license":"MIT","devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.6.0"},"dependencies":{"modularscale-js":"^3.0.1","object-get":"^2.1.0"},"gitHead":"5952ff6b97d0f8718ba7571671fa075a6ffa9320","_id":"design-system-utils@0.1.0","_npmVersion":"5.4.2","_nodeVersion":"8.5.0","_npmUser":{"name":"mrmartineau","email":"z@martineau.tv"},"dist":{"integrity":"sha512-5Xz5ISmdOeAFzxLZWdC8wXG8cWtUCjGdVcQAN2Hy9dBPPpu+XHFzfkBgZ+GkGgXx/eviL52pjpyk8lvzdFu2pA==","shasum":"504b0006af6f5170b8b3dbeacfb4a8c97c9ccada","tarball":"https://registry.npmjs.org/design-system-utils/-/design-system-utils-0.1.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCr+F2RJePE0n9q87fwWZj2PdCx0LDfR08vbEGj8oOQlwIhAKV0vjvkxjhGaZqOeZKY3asDasmDm+v0887GoBK2AIaH"}]},"maintainers":[{"name":"mrmartineau","email":"z@martineau.tv"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-system-utils-0.1.0.tgz_1506321339335_0.9079041420482099"}},"0.2.0":{"name":"design-system-utils","version":"0.2.0","description":"Design-system utils for working with JS-in-CSS","main":"./cjs/index.js","module":"./src/index.js","directories":{"example":"example"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"babel src -d cjs","prepublishOnly":"npm run build"},"keywords":["css-in-js","glamorous","styled-components","emotion","styled-jsx","CSS"],"author":{"name":"Zander Martineau"},"license":"MIT","devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.6.0"},"dependencies":{"modularscale-js":"^3.0.1","object-get":"^2.1.0"},"gitHead":"16942b05552a65b45e74eea1bd8d34a304201a1a","_id":"design-system-utils@0.2.0","_npmVersion":"5.4.2","_nodeVersion":"8.5.0","_npmUser":{"name":"mrmartineau","email":"z@martineau.tv"},"dist":{"integrity":"sha512-dZkKzvrwrMNsBU2i8zuyG88FGXeJuURTGhlIroTEtSIqhsjRfpyxUM+J/UPppj8dlSXKi12pIEwhtuCVoj7Nwg==","shasum":"a93e03c7007ce89cf695d91ebf5097f7f788c90b","tarball":"https://registry.npmjs.org/design-system-utils/-/design-system-utils-0.2.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBsiGrrkE3Nb6j3BIeNTiX3PpDK5L1xKfCVcmnbiQH3lAiADyWx5FKhxjjPMhBM+AHs4SzjFvo0cE70OJAsEhwkE2Q=="}]},"maintainers":[{"name":"mrmartineau","email":"z@martineau.tv"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-system-utils-0.2.0.tgz_1507450019105_0.7397740769665688"}},"0.2.1":{"name":"design-system-utils","version":"0.2.1","description":"Design-system utils for working with JS-in-CSS","main":"./cjs/index.js","module":"./src/index.js","directories":{"example":"example"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"babel src -d cjs","prepublishOnly":"npm run build"},"keywords":["css-in-js","glamorous","styled-components","emotion","styled-jsx","CSS"],"author":{"name":"Zander Martineau"},"license":"MIT","devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.6.0"},"dependencies":{"modularscale-js":"^3.0.1","object-get":"^2.1.0"},"gitHead":"16942b05552a65b45e74eea1bd8d34a304201a1a","_id":"design-system-utils@0.2.1","_npmVersion":"5.4.2","_nodeVersion":"8.5.0","_npmUser":{"name":"mrmartineau","email":"z@martineau.tv"},"dist":{"integrity":"sha512-mpMGu97q/eCmLenr6VveNOje3m/bTy+yUHtyL2WVfzdeCx0cTezAU+E3xdo3H6zL4xzCymhDuOxKlIDCY2ychg==","shasum":"af409522d8c8c4632c3345a9f808380c45efc294","tarball":"https://registry.npmjs.org/design-system-utils/-/design-system-utils-0.2.1.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFEM00SxZIGfR5ZjQlkLsZcbDutHDyGlL1V30Dt8iHyiAiEAsDdcsccaFtNkBgkMHEslUs7LM6m6ySkbpkqQb5CH76Y="}]},"maintainers":[{"name":"mrmartineau","email":"z@martineau.tv"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-system-utils-0.2.1.tgz_1507450754605_0.6005989445839077"}},"0.3.0":{"name":"design-system-utils","version":"0.3.0","description":"Design-system utils for working with JS-in-CSS","main":"./cjs/index.js","module":"./src/index.js","directories":{"example":"example"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"babel src -d cjs","prepublishOnly":"npm run build"},"keywords":["css-in-js","glamorous","styled-components","emotion","styled-jsx","CSS"],"author":{"name":"Zander Martineau"},"license":"MIT","devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.6.0"},"dependencies":{"modularscale-js":"^3.0.1","object-get":"^2.1.0"},"gitHead":"c05a2f1de9ae8f431b2b9398c2fcb51c9831e5fd","_id":"design-system-utils@0.3.0","_npmVersion":"5.4.2","_nodeVersion":"8.5.0","_npmUser":{"name":"mrmartineau","email":"z@martineau.tv"},"dist":{"integrity":"sha512-qayWVAYXHAPR7jZBhcWJewUYQivLuCOP2ib5fCrb+tN91VXEKqiHEZtVZWWtGDojkuU1romTjQo3S/9yapUQ6A==","shasum":"389d42babc4c2ca1249dedb961799c3a342a6b3d","tarball":"https://registry.npmjs.org/design-system-utils/-/design-system-utils-0.3.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFL79FSS0rpMLGEvRIsG/Hyzb6dzWIeWhWIh70o3+dEtAiARsRs8Dm7CqY/FKxxYg8eKckbqgMIcnprOIE7ah/cLug=="}]},"maintainers":[{"name":"mrmartineau","email":"z@martineau.tv"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-system-utils-0.3.0.tgz_1509266924855_0.0634923093020916"}},"0.4.0":{"name":"design-system-utils","version":"0.4.0","description":"Design-system utils for working with JS-in-CSS","main":"./cjs/index.js","module":"./src/index.js","directories":{"example":"example"},"scripts":{"test":"jest","test:watch":"jest --watch","test:coverage":"jest --coverage","build":"babel src -d cjs","prepublishOnly":"npm run build","format:js":"prettier --config .prettierrc --write '{src,example}/**/*.js'","lint:js":"standard","precommit":"lint-staged"},"keywords":["css-in-js","glamorous","styled-components","emotion","styled-jsx","CSS"],"author":{"name":"Zander Martineau"},"license":"MIT","devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.6.0","husky":"^0.14.3","jest":"^21.2.1","lint-staged":"^4.3.0","prettier":"^1.7.4","standard":"^10.0.3"},"dependencies":{"modularscale-js":"^3.0.1","object-get":"^2.1.0"},"lint-staged":{"linters":{"**/*.js":["format:js","test","git add"]}},"standard":{"globals":["expect","test"]},"gitHead":"5af818cbe25a3a73ec71cd9c96b199dce8e46274","_id":"design-system-utils@0.4.0","_npmVersion":"5.5.1","_nodeVersion":"9.0.0","_npmUser":{"name":"mrmartineau","email":"z@martineau.tv"},"dist":{"integrity":"sha512-mAXgDZ4Lf2VhlukinzVqs7J/kbv+wkaKj8d8vVbrYs8/96yGf/uFgnMTSfSC8I5VgHvBuTR1TicrHxZOaG1zqg==","shasum":"e364dfa7aa907ec3c1cc96c6f148bf74358c29ad","tarball":"https://registry.npmjs.org/design-system-utils/-/design-system-utils-0.4.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFmb1px32XW5vNMy79CcD/4LMIMZ8cAaVkqEb7DXlmHOAiEAh3t11g2JnwKAD2BduaXZDq/Q0T+czKLJmXil4LjiMtM="}]},"maintainers":[{"name":"mrmartineau","email":"z@martineau.tv"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-system-utils-0.4.0.tgz_1509665536972_0.0483326013199985"}},"0.5.0":{"name":"design-system-utils","version":"0.5.0","description":"Design-system utils for working with JS-in-CSS","main":"./cjs/index.js","module":"./src/index.js","directories":{"example":"example"},"size-limit":[{"path":"cjs/index.js","limit":"1.5 KB"}],"scripts":{"size":"size-limit","test":"jest","test:watch":"jest --watch","test:coverage":"jest --coverage","build":"babel src -d cjs","prepublishOnly":"npm run build","format:js":"prettier --config .prettierrc --write '{src,example}/**/*.js'","lint:js":"standard","precommit":"lint-staged"},"keywords":["css-in-js","glamorous","styled-components","emotion","styled-jsx","CSS"],"author":{"name":"Zander Martineau"},"license":"MIT","devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.6.0","husky":"^0.14.3","jest":"^21.2.1","lint-staged":"^4.3.0","prettier":"^1.7.4","size-limit":"^0.12.1","standard":"^10.0.3"},"dependencies":{"modularscale-js":"^3.0.1","object-get":"^2.1.0"},"lint-staged":{"linters":{"**/*.js":["format:js","test","git add"]}},"standard":{"globals":["expect","test"]},"gitHead":"70304ea4a27bcae6ce35fcb4a2ca2a47efc86f1f","_id":"design-system-utils@0.5.0","_npmVersion":"5.5.1","_nodeVersion":"9.0.0","_npmUser":{"name":"mrmartineau","email":"z@martineau.tv"},"dist":{"integrity":"sha512-qUCYDC6eg+3iKuPYPCDVkjKYvEpsWe7ga1h27QiHU91XJLbab69quH1D808o9oWF1FKm73qXKDV7bO2n00LcyQ==","shasum":"a20ced06b1e098ae8f78f3b1fec3124259b08daa","tarball":"https://registry.npmjs.org/design-system-utils/-/design-system-utils-0.5.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC9O7WUBzAUUbu4VGQYSTcYuCbC1TPogc3hiSQ2D6JPNgIgeWxqERvhC2dwT+pmfdCMX8rpNOHt9o5dllKyM+Bv6V8="}]},"maintainers":[{"name":"mrmartineau","email":"z@martineau.tv"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-system-utils-0.5.0.tgz_1509892351355_0.8848474738188088"}},"0.6.0":{"name":"design-system-utils","version":"0.6.0","description":"Design-system utils for working with JS-in-CSS","main":"./cjs/index.js","module":"./src/index.js","directories":{"example":"example"},"size-limit":[{"path":"cjs/index.js","limit":"1.5 KB"}],"scripts":{"presize":"npm run build","size":"size-limit","test":"jest","test:watch":"jest --watch","test:coverage":"jest --coverage","build":"babel src -d cjs","prepublishOnly":"npm run build","format:js":"prettier --config .prettierrc --write '{src,example}/**/*.js'","lint:js":"standard","precommit":"lint-staged"},"keywords":["css-in-js","glamorous","styled-components","emotion","styled-jsx","CSS"],"author":{"name":"Zander Martineau"},"license":"MIT","devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.6.0","husky":"^0.14.3","jest":"^21.2.1","lint-staged":"^4.3.0","prettier":"^1.7.4","size-limit":"^0.12.1","standard":"^10.0.3"},"dependencies":{"modularscale-js":"^3.0.1","object-get":"^2.1.0"},"lint-staged":{"linters":{"**/*.js":["format:js","test","git add"]}},"standard":{"globals":["expect","test"]},"gitHead":"8d0a147eba1009aea2cf8e1125c94b22e768adf1","_id":"design-system-utils@0.6.0","_npmVersion":"5.5.1","_nodeVersion":"9.0.0","_npmUser":{"name":"mrmartineau","email":"z@martineau.tv"},"dist":{"integrity":"sha512-r9tYQiiGJr9H54TdtwNIHJU0+ElOOYU8RgilMMEcFCRim6k/ljLUfQpAYmVZI4kWR2bTlTOoOFlLqEEh9jRyTQ==","shasum":"8be0aa59504cf5cd59d091b3072c04eb80b7be4e","tarball":"https://registry.npmjs.org/design-system-utils/-/design-system-utils-0.6.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE91RHnk5GdkxM2DGPROBmU1fM8o0Iouhs6fKTPNPX7iAiA0T+R1z3JZzTekWo/BR6Iy1dJ9Lxf6yzVHZCeCrWCelw=="}]},"maintainers":[{"name":"mrmartineau","email":"z@martineau.tv"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-system-utils-0.6.0.tgz_1509898502736_0.3253045780584216"}},"0.7.0":{"name":"design-system-utils","version":"0.7.0","description":"Design-system utils for working with JS-in-CSS","main":"./cjs/index.js","module":"./src/index.js","directories":{"example":"example"},"size-limit":[{"path":"cjs/index.js","limit":"1.5 KB"}],"scripts":{"presize":"npm run build","size":"size-limit","test":"jest --verbose","test:watch":"jest --watch","test:coverage":"jest --coverage","build":"babel src -d cjs","prepublishOnly":"npm run build","format:js":"prettier --config .prettierrc --write '{src,example}/**/*.js'","lint:js":"standard","precommit":"lint-staged"},"keywords":["css-in-js","glamorous","styled-components","emotion","styled-jsx","CSS"],"author":{"name":"Zander Martineau"},"license":"MIT","devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.6.0","husky":"^0.14.3","jest":"^21.2.1","lint-staged":"^4.3.0","prettier":"^1.7.4","size-limit":"^0.12.1","standard":"^10.0.3"},"dependencies":{"modularscale-js":"^3.0.1","object-get":"^2.1.0"},"lint-staged":{"linters":{"**/*.js":["format:js","test","git add"]}},"standard":{"globals":["expect","test"]},"gitHead":"cc718e962265c35175a267cc3de927dd53c1150e","_id":"design-system-utils@0.7.0","_npmVersion":"5.5.1","_nodeVersion":"8.9.0","_npmUser":{"name":"mrmartineau","email":"z@martineau.tv"},"dist":{"integrity":"sha512-aKGAeuiI5F3lq/NXYDlgkdYHDaB9uOn5e0T+qCegmbxKSHT60koV72eCFKNyTTwjUQxivN1nJdw43c0tz/il/Q==","shasum":"a83678c4dbe6b7f7a93f1791ebb88b312e058611","tarball":"https://registry.npmjs.org/design-system-utils/-/design-system-utils-0.7.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD10+peO+N3kcHVyOhAVJa4KtYe8bi0HQC/ybjpcc76UgIhAPnseb2A/r88y5yNf9BYg2zUbqwvR+yy1wLveXjcJbtV"}]},"maintainers":[{"name":"mrmartineau","email":"z@martineau.tv"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-system-utils-0.7.0.tgz_1509928657917_0.869470851495862"}},"0.8.0":{"name":"design-system-utils","version":"0.8.0","description":"Design-system utils for working with JS-in-CSS","main":"./cjs/index.js","module":"./src/index.js","directories":{"example":"example"},"size-limit":[{"path":"cjs/index.js","limit":"1.5 KB"}],"scripts":{"presize":"npm run build","size":"size-limit","test":"jest --verbose","test:watch":"jest --watch","test:coverage":"jest --coverage","build":"babel src -d cjs","prepublishOnly":"npm run build","format:js":"prettier --config .prettierrc --write '{src,example}/**/*.js'","lint:js":"standard","precommit":"lint-staged"},"keywords":["css-in-js","glamorous","styled-components","emotion","styled-jsx","CSS"],"author":{"name":"Zander Martineau"},"license":"MIT","devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.6.0","husky":"^0.14.3","jest":"^21.2.1","lint-staged":"^4.3.0","prettier":"^1.8.2","size-limit":"^0.13.1","standard":"^10.0.3"},"dependencies":{"modularscale-js":"^3.0.1","object-get":"^2.1.0"},"lint-staged":{"linters":{"**/*.js":["format:js","test","git add"]}},"standard":{"globals":["expect","test"]},"jest":{"coveragePathIgnorePatterns":["./cjs"]},"gitHead":"135c27d7ed25138024238012383682f18cbbf975","_id":"design-system-utils@0.8.0","_npmVersion":"5.5.1","_nodeVersion":"8.9.0","_npmUser":{"name":"mrmartineau","email":"z@martineau.tv"},"dist":{"integrity":"sha512-9yx3PaZ+NDS7nW9VysAbwlitOb9pP0wkuWbaUZPJBim7pTgnjD6FIxGECvKLwTeThMUtqPv8JEq6RTXekJwcFw==","shasum":"bc04adcbfb23d025e46b49b38e26b89875c4f272","tarball":"https://registry.npmjs.org/design-system-utils/-/design-system-utils-0.8.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBSdwds8x822B0/xfUFY++zelIl8SWoF6GcZElUNn+8IAiAZEiSPH5QstV9PG2ICeY9KpQyYcNH5T2juZiwUKoZodQ=="}]},"maintainers":[{"name":"mrmartineau","email":"z@martineau.tv"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-system-utils-0.8.0.tgz_1510268294513_0.08485991391353309"}},"0.9.0":{"name":"design-system-utils","version":"0.9.0","description":"Design-system utils for working with JS-in-CSS","main":"./cjs/index.js","module":"./src/index.js","types":"./src/index.d.ts","repository":{"type":"git","url":"git+https://github.com/mrmartineau/design-system-utils.git"},"directories":{"example":"example"},"size-limit":[{"path":"cjs/index.js","limit":"1.5 KB"}],"scripts":{"presize":"npm run build","size":"size-limit","test":"jest --verbose","test:watch":"jest --watch","test:coverage":"jest --coverage","build":"babel src -d cjs","prepublishOnly":"npm run build","format:js":"prettier --config .prettierrc --write '{src,example}/**/*.js'","lint:js":"standard","precommit":"lint-staged"},"keywords":["css-in-js","glamorous","styled-components","emotion","styled-jsx","CSS"],"author":{"name":"Zander Martineau"},"license":"MIT","devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.6.0","husky":"^0.14.3","jest":"^21.2.1","lint-staged":"^4.3.0","prettier":"^1.8.2","size-limit":"^0.13.1","standard":"^10.0.3"},"dependencies":{"modularscale-js":"^3.0.1","object-get":"^2.1.0"},"lint-staged":{"linters":{"**/*.js":["format:js","test","git add"]}},"standard":{"globals":["expect","test"]},"jest":{"coveragePathIgnorePatterns":["./cjs"]},"gitHead":"64685273e85d0901b314030438da893807359d6a","bugs":{"url":"https://github.com/mrmartineau/design-system-utils/issues"},"homepage":"https://github.com/mrmartineau/design-system-utils#readme","_id":"design-system-utils@0.9.0","_npmVersion":"5.5.1","_nodeVersion":"8.9.0","_npmUser":{"name":"mrmartineau","email":"z@martineau.tv"},"dist":{"integrity":"sha512-XyP3HJEVTLNAZsk0q6MTZoh7g05OvdnlnOFBWcHOceijLYzcHu2yqgH6cRFXmRrmcrDoFD1z5gJlB0iQfVuJSA==","shasum":"10f9e1b8e0c6bcbea81d13067f881b99d8c03100","tarball":"https://registry.npmjs.org/design-system-utils/-/design-system-utils-0.9.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCnI5GuUO4/R7BB1k/kFdEcI2YCblMOlPt311HxEo+VwQIhANcCsQGu9IyjJAkzlpKatrDf5UV4vUV1c9/cG267T6pk"}]},"maintainers":[{"name":"mrmartineau","email":"z@martineau.tv"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-system-utils-0.9.0.tgz_1510874967863_0.3430523572023958"}},"0.10.0":{"name":"design-system-utils","version":"0.10.0","description":"Design-system utils for working with JS-in-CSS","main":"./cjs/index.js","module":"./src/index.js","browser":"./cjs/index.js","types":"./src/index.d.ts","repository":{"type":"git","url":"git+https://github.com/mrmartineau/design-system-utils.git"},"directories":{"example":"example"},"size-limit":[{"path":"cjs/index.js","limit":"1.5 KB"}],"scripts":{"presize":"npm run build","size":"size-limit","test":"jest --verbose","test:watch":"jest --watch","test:coverage":"jest --coverage","build":"babel src -d cjs","prepublishOnly":"npm run build","format:js":"prettier --config .prettierrc --write '{src,example}/**/*.js'","lint:js":"standard","precommit":"lint-staged"},"keywords":["css-in-js","glamorous","styled-components","emotion","styled-jsx","CSS"],"author":{"name":"Zander Martineau"},"license":"MIT","devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.6.0","husky":"^0.14.3","jest":"^21.2.1","lint-staged":"^4.3.0","prettier":"^1.8.2","size-limit":"^0.13.2","standard":"^10.0.3"},"dependencies":{"modularscale-js":"^3.0.1","object-get":"^2.1.0"},"lint-staged":{"linters":{"**/*.js":["format:js","test","git add"]}},"standard":{"globals":["expect","test"]},"jest":{"coveragePathIgnorePatterns":["./cjs"]},"gitHead":"bc0db96fa5019aad2f1b3b48d09a4cd82e6f22ef","bugs":{"url":"https://github.com/mrmartineau/design-system-utils/issues"},"homepage":"https://github.com/mrmartineau/design-system-utils#readme","_id":"design-system-utils@0.10.0","_npmVersion":"5.4.2","_nodeVersion":"8.5.0","_npmUser":{"name":"mrmartineau","email":"z@martineau.tv"},"dist":{"integrity":"sha512-UTi4DPtuU+JXVma1R1mUtx9+afE/S3wFoQwMCQZreLx1mD98qMNNJkLNd7BvxIytDS3YFKpXCSQeP+hC14NwHw==","shasum":"114404f1be9243bfa2fef526cd6a713bfb5285b9","tarball":"https://registry.npmjs.org/design-system-utils/-/design-system-utils-0.10.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDot7d6BlmnDIrbRw1Xk2mxPrGR100shAMCNrtgtLpEzQIhAL09CIGPoLsPICW26Bo8NFygWF15ypW856l+pBv9dzGJ"}]},"maintainers":[{"name":"mrmartineau","email":"z@martineau.tv"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-system-utils-0.10.0.tgz_1511533495596_0.6425755035597831"}},"0.11.0":{"name":"design-system-utils","version":"0.11.0","description":"Design-system utils for working with JS-in-CSS","main":"./cjs/index.js","module":"./src/index.js","browser":"./cjs/index.js","types":"./src/index.d.ts","repository":{"type":"git","url":"git+https://github.com/mrmartineau/design-system-utils.git"},"directories":{"example":"example"},"size-limit":[{"path":"cjs/index.js","limit":"1.5 KB"}],"scripts":{"presize":"npm run build","size":"size-limit","test":"jest --verbose","test:watch":"jest --watch","test:coverage":"jest --coverage","build":"babel src -d cjs","prepublishOnly":"npm run build","format:js":"prettier --config .prettierrc --write '{src,example}/**/*.js'","lint:js":"standard","precommit":"lint-staged"},"keywords":["css-in-js","glamorous","styled-components","emotion","styled-jsx","CSS"],"author":{"name":"Zander Martineau"},"license":"MIT","devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.6.0","husky":"^0.14.3","jest":"^21.2.1","lint-staged":"^4.3.0","prettier":"^1.9.1","size-limit":"^0.13.2","standard":"^10.0.3"},"dependencies":{"modularscale-js":"^3.0.1","object-get":"^2.1.0"},"lint-staged":{"linters":{"**/*.js":["format:js","test","git add"]}},"standard":{"globals":["expect","test"]},"jest":{"coveragePathIgnorePatterns":["./cjs"]},"gitHead":"90b1692e66dab1017700f06a27c625063cf4e8f1","bugs":{"url":"https://github.com/mrmartineau/design-system-utils/issues"},"homepage":"https://github.com/mrmartineau/design-system-utils#readme","_id":"design-system-utils@0.11.0","_npmVersion":"5.4.2","_nodeVersion":"8.5.0","_npmUser":{"name":"mrmartineau","email":"z@martineau.tv"},"dist":{"integrity":"sha512-q7ZaVTlXW7XbyBvRFQP2ExqXsLL4/npCN0mQ/E6fFJgv46UM7bfOeAepKa1h9GZ9Te1m2TKrdCRIN0FR7fttsg==","shasum":"60d21e9bf6474749bab20838ac675e9f4813e964","tarball":"https://registry.npmjs.org/design-system-utils/-/design-system-utils-0.11.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDt7h1gzStyXGUY1kxg880PwhLJJ3v9D3dOJyAKK5o0RwIhAOKWFC0Dy2rQcSJuqBuQ0YIvB9cBCZUxAvqcrfYDl8An"}]},"maintainers":[{"name":"mrmartineau","email":"z@martineau.tv"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-system-utils-0.11.0.tgz_1513098896294_0.7640749397687614"}},"0.11.1":{"name":"design-system-utils","version":"0.11.1","description":"Design-system utils for working with JS-in-CSS","main":"./cjs/index.js","module":"./src/index.js","browser":"./cjs/index.js","types":"./src/index.d.ts","repository":{"type":"git","url":"git+https://github.com/mrmartineau/design-system-utils.git"},"directories":{"example":"example"},"size-limit":[{"path":"cjs/index.js","limit":"1.5 KB"}],"scripts":{"presize":"npm run build","size":"size-limit","test":"jest --verbose","test:watch":"jest --watch","test:coverage":"jest --coverage","build":"babel src -d cjs","prepublishOnly":"npm run build","format:js":"prettier --config .prettierrc --write '{src,example}/**/*.js'","lint:js":"standard","precommit":"lint-staged"},"keywords":["css-in-js","glamorous","styled-components","emotion","styled-jsx","CSS"],"author":{"name":"Zander Martineau"},"license":"MIT","devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.6.0","husky":"^0.14.3","jest":"^21.2.1","lint-staged":"^4.3.0","prettier":"^1.9.1","size-limit":"^0.13.2","standard":"^10.0.3"},"dependencies":{"modularscale-js":"^3.0.1","object-get":"^2.1.0"},"lint-staged":{"linters":{"**/*.js":["format:js","test","git add"]}},"standard":{"globals":["expect","test"]},"jest":{"coveragePathIgnorePatterns":["./cjs"]},"gitHead":"69b88c8f464f68c033277459b1c7170dd39020bf","bugs":{"url":"https://github.com/mrmartineau/design-system-utils/issues"},"homepage":"https://github.com/mrmartineau/design-system-utils#readme","_id":"design-system-utils@0.11.1","_npmVersion":"5.4.2","_nodeVersion":"8.5.0","_npmUser":{"name":"mrmartineau","email":"z@martineau.tv"},"dist":{"integrity":"sha512-tWaxBxY9aybOoSZcdkIKne55eiuGq28l23R+uxXvFpyLLYHMDWh8bOPsX1WQ4k+l+dM8QWyUpam/jj6RLq4oVA==","shasum":"87b05dbf9d135ce59e06e399280320168e18b54b","tarball":"https://registry.npmjs.org/design-system-utils/-/design-system-utils-0.11.1.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDZ92oqi4g3yLTJ736WzTGtPy9bOKNWbXoECx+hzLMaLgIgaLrQFKN8a5NiXU8mN/LRAvYPu7bDfnLp6bPWaLrIVTo="}]},"maintainers":[{"name":"mrmartineau","email":"z@martineau.tv"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-system-utils-0.11.1.tgz_1513099309990_0.5237262255977839"}},"0.11.2":{"name":"design-system-utils","version":"0.11.2","description":"Design-system utils for working with JS-in-CSS","main":"./cjs/index.js","module":"./src/index.js","browser":"./cjs/index.js","types":"./src/index.d.ts","repository":{"type":"git","url":"git+https://github.com/mrmartineau/design-system-utils.git"},"directories":{"example":"example"},"size-limit":[{"path":"cjs/index.js","limit":"1.5 KB"}],"scripts":{"presize":"npm run build","size":"size-limit","test":"jest --verbose","test:watch":"jest --watch","test:coverage":"jest --coverage","build":"babel src -d cjs","prepublishOnly":"npm run build","format:js":"prettier --config .prettierrc --write '{src,example}/**/*.js'","lint:js":"standard","precommit":"lint-staged"},"keywords":["css-in-js","glamorous","styled-components","emotion","styled-jsx","CSS"],"author":{"name":"Zander Martineau"},"license":"MIT","devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.6.0","husky":"^0.14.3","jest":"^21.2.1","lint-staged":"^4.3.0","prettier":"^1.9.2","size-limit":"^0.13.2","standard":"^10.0.3"},"dependencies":{"modularscale-js":"^3.0.1","object-get":"^2.1.0"},"lint-staged":{"linters":{"**/*.js":["format:js","test","git add"]}},"standard":{"globals":["expect","test"]},"jest":{"coveragePathIgnorePatterns":["./cjs"]},"gitHead":"0a9e5c6fc60ab8af2ee692df27c126c4f095b5e0","bugs":{"url":"https://github.com/mrmartineau/design-system-utils/issues"},"homepage":"https://github.com/mrmartineau/design-system-utils#readme","_id":"design-system-utils@0.11.2","_npmVersion":"5.6.0","_nodeVersion":"8.9.0","_npmUser":{"name":"mrmartineau","email":"z@martineau.tv"},"dist":{"integrity":"sha512-W3P4KH8kGfMn4cfhXoJzBQv7Tuk91H7KYcTCm9xS1Rz75evcFjIr7Ryjk7Nr2RRGOfn75dyZzEuFFiJGbwhLXA==","shasum":"dcac6330890031582a5012b8eb58dfdd6894c17f","tarball":"https://registry.npmjs.org/design-system-utils/-/design-system-utils-0.11.2.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCkex01Ddt2TEBxMfulaeWca2VZa5m14HAlPOdzV1cb9gIgRcBSBDqAIwYOIN5elCS1F8V3aE9+Mx9MgR12hTn7Tkw="}]},"maintainers":[{"name":"mrmartineau","email":"z@martineau.tv"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-system-utils-0.11.2.tgz_1517956191564_0.9659766394179314"}},"0.11.3":{"name":"design-system-utils","version":"0.11.3","description":"Design-system utils for working with JS-in-CSS","main":"./cjs/index.js","module":"./src/index.js","browser":"./cjs/index.js","types":"./src/index.d.ts","repository":{"type":"git","url":"git+https://github.com/mrmartineau/design-system-utils.git"},"directories":{"example":"example"},"size-limit":[{"path":"cjs/index.js","limit":"1.5 KB"}],"scripts":{"presize":"npm run build","size":"size-limit","test":"jest --verbose","test:watch":"jest --watch","test:coverage":"jest --coverage","build":"babel src -d cjs","prepublishOnly":"npm run build","format:js":"prettier --config .prettierrc --write '{src,example}/**/*.js'","lint:js":"standard","precommit":"lint-staged"},"keywords":["css-in-js","glamorous","styled-components","emotion","styled-jsx","CSS"],"author":{"name":"Zander Martineau"},"license":"MIT","devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.6.0","husky":"^0.14.3","jest":"^21.2.1","lint-staged":"^4.3.0","prettier":"^1.9.2","size-limit":"^0.13.2","standard":"^10.0.3"},"dependencies":{"modularscale-js":"^3.0.1","object-get":"^2.1.0"},"lint-staged":{"linters":{"**/*.js":["format:js","test","git add"]}},"standard":{"globals":["expect","test"]},"jest":{"coveragePathIgnorePatterns":["./cjs"]},"gitHead":"97175a9c053d11a952598369e261c7ede24e14dd","bugs":{"url":"https://github.com/mrmartineau/design-system-utils/issues"},"homepage":"https://github.com/mrmartineau/design-system-utils#readme","_id":"design-system-utils@0.11.3","_npmVersion":"5.6.0","_nodeVersion":"9.4.0","_npmUser":{"name":"mrmartineau","email":"z@martineau.tv"},"dist":{"integrity":"sha512-NuE72v/t045npYFLa5f77owJbkALUfeAHRqS7Dn2TvJOcaG9/EMcRwdscL37aSRrYwO1OOTQHsPHbKhtQBZbyg==","shasum":"4a9135fd933162f6d7cc6ad2de83ae146e6ac86d","tarball":"https://registry.npmjs.org/design-system-utils/-/design-system-utils-0.11.3.tgz","fileCount":56,"unpackedSize":363602,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCxfeaVLTZy+JzOiSUfPDbaemlQykCcyC2a9OLtjUycmQIhANcFemP1IfYacUBy/7IxcRtzA1dsUrrPr7urPQs8ZNIw"}]},"maintainers":[{"name":"mrmartineau","email":"z@martineau.tv"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-system-utils_0.11.3_1518790249124_0.9821771155103063"},"_hasShrinkwrap":false},"0.12.0":{"name":"design-system-utils","version":"0.12.0","description":"Design-system utils for working with JS-in-CSS","main":"./cjs/index.js","module":"./src/index.js","browser":"./cjs/index.js","types":"./src/index.d.ts","repository":{"type":"git","url":"https://github.com/mrmartineau/design-system-utils"},"size-limit":[{"path":"cjs/index.js","limit":"1.5 KB"}],"scripts":{"presize":"npm run build","size":"size-limit","test":"jest --verbose","test:watch":"jest --watch","test:coverage":"jest --coverage","build":"babel src -d cjs --ignore spec.js,test.js,testData","prepublishOnly":"npm run build","format:js":"prettier --config .prettierrc --write '{src,example}/**/*.js'","lint:js":"standard"},"keywords":["css-in-js","glamorous","styled-components","emotion","styled-jsx","CSS"],"author":{"name":"Zander Martineau"},"license":"MIT","devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.6.0","jest":"^22.4.2","prettier":"^1.11.1","size-limit":"^0.15.2","standard":"^11.0.0"},"dependencies":{"modularscale-js":"^3.0.1","object-get":"^2.1.0"},"standard":{"globals":["expect","test"]},"jest":{"coveragePathIgnorePatterns":["./cjs"]},"licenseText":"MIT License\n\nCopyright (c) 2017 Zander Martineau\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","_id":"design-system-utils@0.12.0","dist":{"shasum":"751c0dc1d8d71e471a8407380e2b2a1c0a3b3ed9","tarball":"https://registry.npmjs.org/design-system-utils/-/design-system-utils-0.12.0.tgz","fileCount":66,"unpackedSize":233858,"integrity":"sha512-RVmgYVYyjOqhiqcF94QCfSPWK4AY0Ei+sqIMugArH76TBJti/tO+RayqW3lewG5Uz3+TwRerpwZv4qLWhVDHWw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEBkoozQ7kFF3Zg97VxwWmEpz0rlmep8QgK9vIUdv5zKAiEAtC/GlI1E71WMq4v73rLXgT0CXcSiFpGsTSdHEVi4EgI="}]},"maintainers":[{"name":"mrmartineau","email":"z@martineau.tv"}],"_npmUser":{"name":"mrmartineau","email":"z@martineau.tv"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-system-utils_0.12.0_1520072397625_0.7416528342159936"},"_hasShrinkwrap":false},"0.12.1":{"name":"design-system-utils","version":"0.12.1","description":"Design-system utils for working with JS-in-CSS","main":"./cjs/index.js","module":"./src/index.js","browser":"./cjs/index.js","types":"./src/index.d.ts","repository":{"type":"git","url":"https://github.com/mrmartineau/design-system-utils"},"size-limit":[{"path":"cjs/index.js","limit":"1 KB"}],"scripts":{"presize":"npm run build","size":"size-limit","test":"jest --verbose","test:watch":"jest --watch","test:coverage":"jest --coverage","build":"babel src -d cjs --ignore spec.js,test.js,testData","prepublishOnly":"npm run build","format:js":"prettier --config .prettierrc --write '{src,example}/**/*.js'","lint:js":"standard"},"keywords":["css-in-js","glamorous","styled-components","emotion","styled-jsx","CSS"],"author":{"name":"Zander Martineau"},"license":"MIT","devDependencies":{"babel-cli":"^6.26.0","babel-preset-env":"^1.6.0","jest":"^22.4.2","prettier":"^1.11.1","size-limit":"^0.15.2","standard":"^11.0.0"},"dependencies":{"modularscale-js":"^3.0.1","object-get":"^2.1.0"},"standard":{"globals":["expect","test"]},"jest":{"coveragePathIgnorePatterns":["./cjs"]},"licenseText":"MIT License\n\nCopyright (c) 2017 Zander Martineau\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","_id":"design-system-utils@0.12.1","dist":{"shasum":"1c5f975472ee971ae331b6162c8208070092d137","tarball":"https://registry.npmjs.org/design-system-utils/-/design-system-utils-0.12.1.tgz","fileCount":66,"unpackedSize":233855,"integrity":"sha512-fOfmBdvIjqwaCMm1n6KvbFG+ZnnMeDxyJKLcU6RfMVkSVyOpUSjH9V9vioO6OKRU2rZ8LKgX/7LC/cfa06wFrw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHTeGSjy9mzt25acFGZfFO9+a2fx5geHpAX6WbLyWN1OAiEAsmLJ+QIOAxOpPQejxJeBKsIPw+MS+a1GhGTeidqEIxo="}]},"maintainers":[{"name":"mrmartineau","email":"z@martineau.tv"}],"_npmUser":{"name":"mrmartineau","email":"z@martineau.tv"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-system-utils_0.12.1_1523055547615_0.39036084226017187"},"_hasShrinkwrap":false},"1.0.0":{"name":"design-system-utils","version":"1.0.0","description":"Design-system utils for working with JS-in-CSS","main":"./cjs/index.js","module":"./src/index.js","browser":"./cjs/index.js","types":"./src/index.d.ts","repository":{"type":"git","url":"git+https://github.com/mrmartineau/design-system-utils.git"},"directories":{"example":"example"},"size-limit":[{"path":"cjs/index.js","limit":"1 KB"}],"scripts":{"presize":"npm run build","size":"size-limit","test":"jest --verbose","test:watch":"jest --watch","test:coverage":"jest --coverage","build":"babel src -d cjs --ignore spec.js,test.js,testData","prepublishOnly":"npm run build","prelint:js":"npm run format:all","lint:js":"eslint ./src/**/*.js","format:all":"prettier --write '{src,example}/**/*'"},"keywords":["css-in-js","glamorous","styled-components","emotion","styled-jsx","CSS"],"author":{"name":"Zander Martineau"},"license":"MIT","devDependencies":{"babel-cli":"^6.26.0","babel-eslint":"^8.2.3","babel-preset-env":"^1.7.0","eslint":"^4.19.1","eslint-config-prettier":"^2.9.0","eslint-plugin-prettier":"^2.6.0","jest":"^23.0.1","prettier":"^1.13.2","size-limit":"^0.18.1"},"dependencies":{"object-get":"^2.1.0"},"gitHead":"c94d0a5941beb538d600f415b4ac9c8f595b8fbe","bugs":{"url":"https://github.com/mrmartineau/design-system-utils/issues"},"homepage":"https://github.com/mrmartineau/design-system-utils#readme","_id":"design-system-utils@1.0.0","_npmVersion":"6.1.0","_nodeVersion":"9.9.0","_npmUser":{"name":"mrmartineau","email":"z@martineau.tv"},"dist":{"integrity":"sha512-HCZALnCK4x7RoccmAbA+Vghgc4p4P6EULh94cCXgDswSjgDiOebb3bWD4KLlQkxpT8r4RasW7HMkz1o6yVaMaA==","shasum":"94338e2a3f303f703f6d6317125213560cf7b752","tarball":"https://registry.npmjs.org/design-system-utils/-/design-system-utils-1.0.0.tgz","fileCount":54,"unpackedSize":452689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbFlFuCRA9TVsSAnZWagAAQeMP/3RVutFP70TywGMejN18\nL0MAzchLnz/9jWkw8NK9S4fHy/H0lrYUOiBw1XceJYOR7PiJKsCRJepDl+q1\nVoXgwVZZAmfhRuDIqrtGwkbpny/EPxxXm6IV9sXYiQkZMT8+G7w6nb/pkoSG\nujNDrXo0ytd110LSQjsotDjFJr2pMez6yorjSaxh8IkFZ1NzFekToSpy4rYN\nLZMjdyghXi3gyagV+ApTCL7mgGbKmuQjPQ3nMC7sa71XDnmnpkcZwT8gTOXC\nnyk6Ap4G7HwAo3N1lAUgb6VXu5VbmyI2TFwvwCczLM8eOA/xiNyWc9YqZLuZ\n4J0F9hLYZeo1istffpx/DOGbgNOlYaoFZ0HZLotr9lDytK0C1SCAFXnF3M9u\nesIDnFs45q9UgJPQffNfZdcrGfO8lA9ZveEliJHIqrJhE0zZJLh4lFPqelUC\nVxb/pgZOWc3/i2npUozo9irHHTBOVmLEuXSeIqoePpVZNHRq3TQwYcSSK8Gv\ncDCtPPa+gMn6dgi4NU3z9n52plr9PmDZf8E6DB0tE0rlAhS6FRjsWfe5BVLR\ncyHuoXvTzDgQNNszpTWIfvzhBil3ZcRy/9eiXaakYqQH7uR7P2Jezo9lBBK0\nLZbRWW/VXKKrOd8oq5F26Ro8CnNczCgVijV4oL8wNc7JDAYnvp/3359xNGNo\nCNZr\r\n=Kpe4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC85jiYOP3TclsSHenTYdSO1ayXpGBkO2muwQ4s1rih7gIhAOx7ZhTbh3UDBYg1Q+mHhaLKjeCSMy2VjcWuTogkLtRP"}]},"maintainers":[{"name":"mrmartineau","email":"z@martineau.tv"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-system-utils_1.0.0_1528189292789_0.503453680809357"},"_hasShrinkwrap":false},"1.0.1":{"name":"design-system-utils","version":"1.0.1","description":"Design-system utils for working with JS-in-CSS","main":"./cjs/index.js","module":"./src/index.js","browser":"./cjs/index.js","types":"./src/index.d.ts","repository":{"type":"git","url":"https://github.com/mrmartineau/design-system-utils"},"size-limit":[{"path":"cjs/index.js","limit":"1 KB"}],"scripts":{"presize":"npm run build","size":"size-limit","test":"jest --verbose","test:watch":"jest --watch","test:coverage":"jest --coverage","build":"babel src -d cjs --ignore spec.js,test.js,testData","prepublishOnly":"npm run build","prelint:js":"npm run format:all","lint:js":"eslint ./src/**/*.js","format:all":"prettier --write '{src,example}/**/*'"},"keywords":["css-in-js","glamorous","styled-components","emotion","styled-jsx","CSS"],"author":{"name":"Zander Martineau"},"license":"MIT","devDependencies":{"babel-cli":"^6.26.0","babel-eslint":"^8.2.3","babel-preset-env":"^1.7.0","eslint":"^4.19.1","eslint-config-prettier":"^2.9.0","eslint-plugin-prettier":"^2.6.0","jest":"^23.0.1","prettier":"^1.13.2","size-limit":"^0.18.1"},"dependencies":{"object-get":"^2.1.0"},"licenseText":"MIT License\n\nCopyright (c) 2017 Zander Martineau\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","_id":"design-system-utils@1.0.1","dist":{"shasum":"d6e306537806fdb45e900d05630d6fefe9905f7f","tarball":"https://registry.npmjs.org/design-system-utils/-/design-system-utils-1.0.1.tgz","fileCount":66,"unpackedSize":225619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbFtd3CRA9TVsSAnZWagAACbEP/2ikaKqhJ3JNJ1PrMqsc\nP1qHsRNmC/JtfUycOR6kFLpUkZfO4ayin3q2HQs6j25vhNcRrwbykBfAXPpD\nwXFuY9FUZUPxo9PVadRF2nhhiw+rr7PLTuUnFGUemGapFJ3nCWg1AhwUaB4m\nJbI+Lro1ON84NnklJq1pKblD830EgY2m1Ish7ToIUM45wZj2ggxabwfjrg95\nAX9WytX2hS8COJFsaMuTGnuyOaoCDxZO11YwaLKU4tizW1U8EyCWOI8KeegX\naa43vV0laMLFJU9/9U+X2bIjUJin1EIPYid5ZUikHxLWJlYeW6N6Ft1U8KQ2\nRBxQap/DQ49GYr1fqmyhUwWCZGnEV6Nts13kUzYcIB7h6GjWH2e9JD+YFgE8\nT3YUzvz787J7DrB0M6rPg1ARWtS/l1HJna2TXHpwc987ATXCz7eTTQ1OdOco\nBwaE7vNyBqM9FgPiwr8Cz1H7o9aTF+Okcum64UFVqTE5nEH1LNv5hkKIB2MD\nbEL4KHtmoePo8+oj+YL5DgtPsSoRXTRmDsuebJVynZcffXK+PBy0FTTGbPnX\nSKFk4aaZG46eXck+PV3tB7dwJJudxZg2eYCCPj/j/iK4kEmo9lmJ431AdP4b\nRrJAACZuMy5spo1nve3MZc/HvNnPg7a5CeVKjl26RR37uusGUy7T4FQtJHdA\nBhF9\r\n=Q/U6\r\n-----END PGP SIGNATURE-----\r\n","integrity":"sha512-imALo+53+0Nj6y9+HJj5VjYtgy+dNFQXyA8a2FgwHPN7hmJ70yg1qtIFFB5ltzad/802CfccEHgD5feB/jPXgw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCcyDEJR0fAEhVDDeP6OdttbT32lkY+HKIbV2+okJWZnAIgApd3E2r36EPFLuputNQWwVHeKJ/4hK2Qqot9sbxmpXk="}]},"maintainers":[{"name":"mrmartineau","email":"z@martineau.tv"}],"_npmUser":{"name":"mrmartineau","email":"z@martineau.tv"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-system-utils_1.0.1_1528223606031_0.8205501070753052"},"_hasShrinkwrap":false},"1.1.0":{"name":"design-system-utils","version":"1.1.0","description":"Design-system utils for working with JS-in-CSS","main":"./cjs/index.js","module":"./src/index.js","browser":"./cjs/index.js","types":"./src/index.d.ts","repository":{"type":"git","url":"git+https://github.com/mrmartineau/design-system-utils.git"},"directories":{"example":"example"},"size-limit":[{"path":"cjs/index.js","limit":"1 KB"}],"scripts":{"presize":"npm run build","size":"size-limit","test":"jest --verbose","test:watch":"jest --watch","test:coverage":"jest --coverage","build":"babel src -d cjs --ignore spec.js,test.js,testData","prepublishOnly":"npm run build","prelint:js":"npm run format:all","lint:js":"eslint ./src/**/*.js","format:all":"prettier --write '{src,example}/**/*'"},"keywords":["css-in-js","glamorous","styled-components","emotion","styled-jsx","CSS"],"author":{"name":"Zander Martineau"},"license":"MIT","devDependencies":{"babel-cli":"^6.26.0","babel-eslint":"^8.2.3","babel-preset-env":"^1.7.0","eslint":"^4.19.1","eslint-config-prettier":"^2.9.0","eslint-plugin-prettier":"^2.6.0","jest":"^23.0.1","prettier":"^1.13.2","size-limit":"^0.18.1"},"dependencies":{"object-get":"^2.1.0"},"gitHead":"fe2acb4e1b2e2dfd30a02ca3dbcc2faf31b30b8d","bugs":{"url":"https://github.com/mrmartineau/design-system-utils/issues"},"homepage":"https://github.com/mrmartineau/design-system-utils#readme","_id":"design-system-utils@1.1.0","_npmVersion":"6.0.0","_nodeVersion":"10.10.0","_npmUser":{"name":"mrmartineau","email":"z@martineau.tv"},"dist":{"integrity":"sha512-WFI4/6Qu6vN37iSDYddKYqDHFHv0nqrONrGcqs3S+6RRx+ktLe+YNz1Yuh4i5ZgpGcorpwNYb4463RzTIeQ8uA==","shasum":"ce28d347ed96a10e6755f5f961d7f9661c80beeb","tarball":"https://registry.npmjs.org/design-system-utils/-/design-system-utils-1.1.0.tgz","fileCount":55,"unpackedSize":463440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbrJ0NCRA9TVsSAnZWagAALtwP/2SkFIgWsRkss5XrPPMc\nNfZDdTJDXmgKLZY+nI0DkjriMZalSYnHi6VscLlHrOaqSPYLHJ6EV5tg8Vpg\n4QsGeDO8/MtGtwKGNidrctUxilUL9KAGErjR1oIHpDjDY4samh5NChFwv0FQ\nZ39XOktBCoylpAJ5Jjv89jL9/Xo2KCeOIcJ6d1OaDO2jbXZY4QsQELiXFOZX\nKJW2QiSMmPpVb4pB7/DcnYaGHWt5mIMj2NILLAQs566wH8+4I4VZMILo0m12\nB3ej22zBcBPtMEj3q/gD6k1jXK1UcezWJPS25EY1VZmd9QQQMWmXJDVXCcs7\nG1RWGcsixHY+W6JMhMFwyJ5qDh/D968ndZ5Gkrj1DwT+PFyihTQlogu8Bmap\nuzGsDBoyOQqMz/OqbS0svoVopiaJJl2uq76vV3PdXl5YKO+VuqWr4Q9hlNxO\nq9ayCxxFBciEt0G+0FvsKlCqb7DMAkebN/5zTzkdUvC8jiQpLDlooIvTHfxq\noSItvFD78cyrjIJTWiRl3mPfRk6aidixdmeVfMdYJ9JV+n2SjFFUUkQOPJqW\nsQMaooXkHqrbxrMxgIvvdLpqBChv9ewnSzIJnXJalxWLF0pRL/yhe8b6cn1s\n4pAha40CPO4HO1LouJ2pjnBtDgVD5DgLFCmf/4o5dVS9KB3X8WgVGm+/ecof\nenPo\r\n=wRvZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC3gw7gGeKmD9cLUCuYaPBg+URxgNLtZcJ6E8wJSOMSMQIhAItSHBTc+5jXdhobt/FbyausFmrjMVuKzpgCtYoOIt64"}]},"maintainers":[{"name":"mrmartineau","email":"z@martineau.tv"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-system-utils_1.1.0_1538039052402_0.05837347667993753"},"_hasShrinkwrap":false},"1.1.1":{"name":"design-system-utils","version":"1.1.1","description":"Design-system utils for working with JS-in-CSS","main":"./cjs/index.js","module":"./src/index.js","browser":"./cjs/index.js","types":"./src/index.d.ts","repository":{"type":"git","url":"git+https://github.com/mrmartineau/design-system-utils.git"},"directories":{"example":"example"},"size-limit":[{"path":"cjs/index.js","limit":"1 KB"}],"scripts":{"presize":"npm run build","size":"size-limit","test":"jest --verbose","test:watch":"jest --watch","test:coverage":"jest --coverage","build":"babel src -d cjs --ignore spec.js,test.js,testData","prepublishOnly":"npm run build","prelint:js":"npm run format:all","lint:js":"eslint ./src/**/*.js","format:all":"prettier --write '{src,example}/**/*'"},"keywords":["css-in-js","glamorous","styled-components","emotion","styled-jsx","CSS"],"author":{"name":"Zander Martineau"},"license":"MIT","devDependencies":{"babel-cli":"^6.26.0","babel-eslint":"^8.2.3","babel-preset-env":"^1.7.0","eslint":"^4.19.1","eslint-config-prettier":"^2.9.0","eslint-plugin-prettier":"^2.6.0","jest":"^23.0.1","prettier":"^1.13.2","size-limit":"^0.18.1"},"dependencies":{"object-get":"^2.1.0"},"gitHead":"53ddb1df20b7f9d1e191ec69452319fce07cfa3c","bugs":{"url":"https://github.com/mrmartineau/design-system-utils/issues"},"homepage":"https://github.com/mrmartineau/design-system-utils#readme","_id":"design-system-utils@1.1.1","_npmVersion":"6.0.0","_nodeVersion":"10.10.0","_npmUser":{"name":"mrmartineau","email":"z@martineau.tv"},"dist":{"integrity":"sha512-StSZXew2MW5unRv/A7qiLZMDNEn6Y1DN0dhcWdOhyKJGaYeAjqotLQ/vSlZJ14ZXwyBxAJLsVh/fKyyh0IcJdw==","shasum":"dbbbd6cf6e11dbd41d77ea8204c6a8e7cdb2dbb7","tarball":"https://registry.npmjs.org/design-system-utils/-/design-system-utils-1.1.1.tgz","fileCount":55,"unpackedSize":463519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbrNf4CRA9TVsSAnZWagAAKeQQAIYgJh3Kr1UYTAtVEgmc\nhJvgjriYlxZlwncQy6gIFOrBDYdiyX4oAk6N/5IW/tK/zkqiu6vDzdtoZGUh\nrX40+04P3TkN5bIo7TFgps+AZ+GmfuncrINFwkshVU9qlC9Lp3Fu/fEHHoqn\njUKCkBn1adI7iZTjtBdqqbGNgIRPr6b+af1m7NeUCACYVYo8ybyQLUdJCAKl\nprZ8SBrJAmtcOE27XQ686TXkCm/aj63/u4ZJDMFstC3WiHheU+Eypu4kiQPp\n+9HdSioBiTJbGvwkQ70LzhooY5z6anM08ONAzENoobWrA2WlJWfTgg4AdaK7\nBWEINL1rl/ZvNdFLqsCIQgxC3f+T51ltgthnAd2oCC+kuIGXrUs2ow8h4sj6\nGRUVKJtyR2cOzxqp2P6P8ETIEOmmL7Kc7AIaNK+9qmPmNCjKGBWtbcG4EmBD\n4uhdbiLP9mmWrCSyC2eOj4JlbpYu+qzHAycfhYS8qw5orza4AhjRK7NCeId8\nGd2RbimBdRAuBHRauvBZCxxVI9Nk+U7j3bM8f8s6BFva9JC7Du5S2Q7RYykE\nreNA+C4TIZx+FvIjeo4hvhGso6poz3Cj44p6gi61DAgQ8I5fSGhrO+Y8DOdU\nhjyY/OtmwPTStCVxIlCpOL7eFulLhDkkK3giykS4JPU6Hdp2E2oSNe8y5GOC\nAS1X\r\n=IVf6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCRx6kNyAKgYLPIIsW/YshzWmIlz0POSIvbLRMoQ0XR1AIhAOU7ANkgDSvwNI9I1ERMv/tPZxt8PPb/ozbvy4jyUbG3"}]},"maintainers":[{"name":"mrmartineau","email":"z@martineau.tv"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-system-utils_1.1.1_1538054135485_0.004562149718931208"},"_hasShrinkwrap":false},"1.2.0":{"name":"design-system-utils","version":"1.2.0","description":"Design-system utils for working with JS-in-CSS","main":"cjs/index.js","browser":"cjs/index.js","module":"es/index.js","source":"./src/index.ts","types":"cjs/index.d.ts","repository":{"type":"git","url":"git+https://github.com/mrmartineau/design-system-utils.git"},"directories":{"example":"example"},"size-limit":[{"path":"cjs/index.js","limit":"1 KB"},{"path":"es/index.js","limit":"1 KB"}],"scripts":{"presize":"npm run build","size":"size-limit","test":"jest","test:watch":"jest --watch","test:coverage":"jest --coverage","build":"NODE_ENV=production rollup -c","watch":"rollup -c -w","prepublishOnly":"npm run build","prelint":"npm run format:all","lint":"tslint ./src/**/*.ts","format:all":"prettier --write '{src,example}/**/*'"},"keywords":["css-in-js","glamorous","styled-components","emotion","styled-jsx","CSS"],"author":{"name":"Zander Martineau"},"license":"MIT","dependencies":{"object-get":"^2.1.0"},"devDependencies":{"@types/jest":"^23.3.5","jest":"^23.6.0","microbundle":"^0.6.0","prettier":"^1.14.3","rollup":"^0.66.6","rollup-plugin-auto-external":"^2.0.0","rollup-plugin-babel":"^4.0.3","rollup-plugin-buble":"^0.19.4","rollup-plugin-bundle-size":"^1.0.2","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-terser":"^3.0.0","rollup-plugin-typescript2":"^0.17.1","rollup-plugin-uglify":"^6.0.0","size-limit":"^0.20.1","ts-jest":"^23.10.4","tslint":"^5.11.0","tslint-config-prettier":"^1.15.0","tslint-plugin-prettier":"^2.0.0","typescript":"3.1.3"},"gitHead":"5f0221bbdc034164a08eb2498ffc9ee159a60903","bugs":{"url":"https://github.com/mrmartineau/design-system-utils/issues"},"homepage":"https://github.com/mrmartineau/design-system-utils#readme","_id":"design-system-utils@1.2.0","_npmVersion":"6.0.0","_nodeVersion":"10.10.0","_npmUser":{"name":"mrmartineau","email":"z@martineau.tv"},"dist":{"integrity":"sha512-iWUDe/ZO9YqyiIJxc+x+gBqX9Z5wC5eC9Brjsek53Z+dIlrlskpJSt5j4DFV3p9/tA9hW2YyB8taxGAdszpNJQ==","shasum":"2d3d8e4868a7c51218605fe769e31ed842895e6b","tarball":"https://registry.npmjs.org/design-system-utils/-/design-system-utils-1.2.0.tgz","fileCount":17,"unpackedSize":68844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbxcz8CRA9TVsSAnZWagAAd4kQAKT57Q1mfNpBcgfa1VQt\nIOkEWVKCNgrghvrJyMauGNGsM+ubkRoNyWsvhtIK17bD4l4JOkh/TdFZ/P6e\nJgV03bAVIR7Pv+i4X7OdfxVe4kWHRdi0EbP4d2UGyww50mHOqr4v1ZjWzVXN\nZfUOPH3cmUGyrQXbHThUTxWY2wFSWphWDxvx4wIddddUbZYjbV9Ze61MgcPA\nnGnqr7/iAxqoOhkV3iq8g8o5l4SvtqhMnGKkQaij2C1wXZfDl+PHdDO4J4zS\nbAdqqwpQA2l8x1CcFXgnyUdnipANld68WFTQy49Pfu8OGkV86WODeZjBdGtE\nDKvQkZycAhw+lHhapRApjI03inw1SGDcHt+VamKBqgHGkdh1Hqk8At8K4JrM\noyp+jqDJWceANoQqONfKlCsukPWq1GJ9lYVWxGn4YAw9YEGwxlQ7i9l5GWIZ\nN2XELPVtFvy4gDaf13nrlE6t1ImTL7w+xk7+mQSmaM5XbXxnpsMvl/aI7Wiv\nsk2FXXAq7jhMTX7RIXwPjLuEr+ftbucjriWaPW+1j48LWa1uTDclmwxBVgmb\n6MBGg0L1sCJ7mHRiK/dlXTbo6D1eOAYUO7Y6S+P6POur82s74S9PSYgXC02E\n/Hwnb3bd4Klf46aLnQ52WSIQvykLf8pjgSZTSEeHI2l4qvwo9WBap1VHSdbB\nE2/k\r\n=QFbB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEMICv9Gbz5d4nXZciBgHoVxh4hETafE0pazO2HQnJsaAiEA/rE7v4/zmwCEUIFwzk+rIY2COOIfZaoI83crObOni9s="}]},"maintainers":[{"name":"mrmartineau","email":"z@martineau.tv"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-system-utils_1.2.0_1539689723526_0.27884255366826083"},"_hasShrinkwrap":false},"1.5.0-0":{"name":"design-system-utils","version":"1.5.0-0","description":"Design-system utils for working with JS-in-CSS","main":"build/cjs.js","browser":"build/umd.js","module":"build/es.js","types":"build/index.d.ts","repository":{"type":"git","url":"https://github.com/mrmartineau/design-system-utils"},"size-limit":[{"path":"build/cjs.js","limit":"1 KB"},{"path":"build/es.js","limit":"1 KB"}],"scripts":{"presize":"npm run build","size":"size-limit","test":"jest","test:watch":"jest --watch","test:coverage":"jest --coverage","build":"NODE_ENV=production rollup -c","watch":"rollup -c -w","prepublishOnly":"npm run build","prelint":"npm run format:all","lint":"tslint ./src/**/*.ts","format:all":"prettier --write '{src,example}/**/*'"},"keywords":["css-in-js","glamorous","styled-components","emotion","styled-jsx","CSS"],"author":{"name":"Zander Martineau"},"license":"MIT","dependencies":{"@ngard/tiny-get":"^1.0.1"},"devDependencies":{"@types/jest":"^23.3.13","@types/prettier":"^1.15.2","@types/rollup":"^0.54.0","@types/typescript":"^2.0.0","jest":"^23.6.0","prettier":"^1.15.3","rollup":"^1.1.0","rollup-plugin-auto-external":"^2.0.0","rollup-plugin-buble":"^0.19.6","rollup-plugin-bundle-size":"^1.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-node-resolve":"^4.0.0","rollup-plugin-terser":"^4.0.2","rollup-plugin-typescript2":"^0.19.2","rollup-plugin-uglify":"^6.0.1","size-limit":"^0.21.1","ts-jest":"^23.10.5","tslint":"^5.12.1","tslint-config-prettier":"^1.17.0","tslint-plugin-prettier":"^2.0.1","typescript":"3.2.4"},"readmeFilename":"readme.md","readme":"<h1 align=\"center\">\n  👩‍🎨 <br/>\n  Design System Utils\n\n[![npm](https://img.shields.io/npm/v/design-system-utils.svg?style=flat-square)](https://www.npmjs.com/package/design-system-utils)\n[![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/design-system-utils.svg?style=flat-square)](https://www.npmjs.com/package/design-system-utils) [![Travis CI Build](https://img.shields.io/travis/mrmartineau/design-system-utils.svg?style=flat-square)](https://travis-ci.org/mrmartineau/design-system-utils)\n![](https://img.shields.io/badge/licence-MIT-blue.svg?style=flat-square)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)\n\n</h1>\n\nDesign System Utils is a micro framework that standardises your design-system tokens & provides helpful utility functions to access it’s information. It can be used with [styled-components](https://styled-components.com), [emotion](https://emotion.sh), [glamorous](https://glamorous.rocks/) or any other [CSS-in-JS framework](https://css-in-js-playground.com/).\n\n<details>\n  <summary>Table of contents</summary>\n\n- [Install](#install)\n- [Usage](#usage)\n  - [Setting up your design system](#setting-up-your-design-system)\n  - [Initialise the design system framework](#initialise-the-design-system-framework)\n  - [Accessing the design system data in your app](#accessing-the-design-system-data-in-your-app)\n- [Options](#options)\n- [API methods](#api-methods)\n  - [`tokens.get()` - Get any value from the design tokens](#tokensget---get-any-value-from-the-design-tokens)\n  - [`tokens.fontSize()` or `tokens.fs()` - Get font-size values](#tokensfontsize-or-tokensfs---get-font-size-values)\n  - [Color palette](#color-palette)\n    - [`tokens.color()` - Get color palette values](#tokenscolor---get-color-palette-values)\n    - [`tokens.brand()` - Get brand palette values](#tokensbrand---get-brand-palette-values)\n  - [`tokens.bp()` - Get responsive breakpoint values](#tokensbp---get-responsive-breakpoint-values)\n  - [`tokens.z()` - Get `z-index` values](#tokensz---get-z-index-values)\n  - [`tokens.spacing()` or `tokens.space()` - Get spacing values](#tokensspacing-or-tokensspace---get-spacing-values)\n  - [Calculations](#calculations)\n- [Usage with Typescript](#usage-with-typescript)\n- [Demo & examples](#demo--examples)\n\n</details>\n\n## Install\n\n```sh\nyarn add design-system-utils\n\n# or\n\nnpm install --save design-system-utils\n```\n\n### Size\n\n```\n$ size-limit\n\n  cjs/index.js\n  Package size: 814 B\n  Size limit:   1 KB\n\n  es/index.js\n  Package size: 806 B\n  Size limit:   1 KB\n\n  With all dependencies, minified and gzipped\n```\n\n## Usage\n\nFirst create your design system file, this contains all your design tokens that your app or site will use; things like font-sizes, color palette, spacing etc (kind of like a Sass/Less variables file).\n\nFor example you can create a top-level directory named `tokens`, `theme` or `designsystem`, and add an index.js inside, like so:\n\n```\n./tokens\n└── index.js\n```\n\nA simple version of a tokens file with Design System Utils:\n\n```js\n// ./tokens/index.js\nimport DesignSystem from 'design-system-utils'\n\n// your design tokens object goes here, see below for further details\nconst designTokens = {...}\n\nexport default new DesignSystem(designTokens)\n```\n\n### Setting up your design system\n\nThe \"shape\" and structure of your design tokens object **_can_** actually be anything you want, however, if you want to make use of the shortcut/helper methods like `tokens.fontSize|bp|z|color|brand|spacing` etc, there is a particular shape that your data will need to follow, see below:\n\n(🤔 the below code snippet includes some psuedo types for the values that occur in the different parts of the tokens object)\n\n```js\n{\n  type: {\n    // this should be set as a px value if you have `options.fontSizeUnit` set\n    // to 'rem' or 'em' so that the lib can convert the values properly\n    baseFontSize: '' // string,\n\n    // used with `tokens.fs('size')` or `tokens.fontSize('size')`\n    sizes: {\n      key: '' // <number | string>,\n    },\n  },\n\n  // Color palette\n  // Each object needs to have the same shape\n  // Each color object needs a `base` value to be the default\n  // Have as many color objects as you like\n  colors: {\n    // Used with `ds.color('colorName')`\n    colorPalette: {\n      colorName: {\n        base: '' // <string>, // base is the default\n      },\n    },\n\n    // Used with `ds.brand('colorName)`\n    brand: {\n      colorName: '' // <string>, base is the default\n    }\n  },\n\n  // Breakpoints\n  // Used with `ds.bp()`\n  // Keys can be anything you like\n  // Have as many breakpoints as you like\n  // Values can be use any unit you like\n  breakpoints: {\n    key: '' // <number | string>,\n  },\n\n  // Z-index\n  // Used with `ds.z()`\n  zIndex: {\n    key: 10 // <number>\n  },\n\n  // Spacing\n  // Used with `ds.spacing()` or `ds.space()`\n  spacing: {\n    scale: [] // <array>[<number | string>, ...], <object>\n  },\n}\n```\n\nBelow is an excerpt from the example design-system. See a more complete version in the [`/example`](example/myDesignSystem.js) directory or some that are used in the design-system-utils tests: [1](https://github.com/mrmartineau/design-system-utils/blob/master/src/testData/ds1.js) & [2](https://github.com/mrmartineau/design-system-utils/blob/master/src/testData/ds1.js).\n\n```js\nconst designTokens = {\n  type: {\n    baseFontSize: '20px',\n\n    sizes: {\n      xs: '16px',\n      s: '20px',\n      base: '30px',\n      m: '36px',\n      l: '42px',\n      xl: '50px',\n      xxl: '58px',\n    },\n\n    fontFamily: {\n      system:\n        '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\"',\n      sans: '\"Helvetica Neue\", Helvetica, Arial, sans-serif',\n      serif: 'Georgia, \"Times New Roman\", Times, serif',\n      mono: 'Menlo, Monaco, \"Courier New\", monospace',\n    },\n\n    lineHeight: {\n      headings: 1.1,\n    },\n\n    fontWeight: {\n      normal: 300, // Useful to set here if using anything other than `normal`\n      bold: 'bold', // Useful to set here when bold webfonts come as 400 font-weight.\n      headings: 'bold', // instead of browser default, bold\n    },\n  },\n}\n```\n\n### Initialise the design system framework\n\n```js\n// myDesignSystem.js\nimport DesignSystem from 'design-system'\nconst designTokens = {...}\nexport default new DesignSystem(designTokens)\n```\n\n## Accessing the design system data in your app\n\nTo access your design system, you just need to `import` it to the current file, like so:\n\n```js\nimport tokens from './tokens' // assuming you exported `default` from your design system file\n```\n\nHere is a very simple component using [styled-components](https://styled-components.com) and some values from the tokens, you should be able to see how easy it is to pull information from the design system.\n\n```js\n// Example using styled-components\nimport styled from 'styled-component'\nimport tokens from './tokens'\n\nexport const Box = styled.div`\n  font-family: ${tokens.get('type.fontFamilyBase')};\n  background-color: ${tokens.brand('primary')};\n  margin: ${tokens.space(2)} 0;\n`\n```\n\n## Options\n\nThere is only one option that can be passed to your design system class, it relates to font-sizing:\n\n```js\n// Use default options. do not convert the font-sizes to rems or ems\nexport default new DesignSystem(myDesignSystem)\n\n// OR: with custom options\nexport default new DesignSystem(myDesignSystem, {\n  // this is used to convert your `type.sizes` values from one unit to another\n  // e.g. to convert all `px` sizes  to `rem`, set this option:\n  fontSizeUnit: 'rem',\n  // this means you can define values using px and use rems in your app\n})\n```\n\n## API methods\n\n### `tokens.get()` - Get any value from the design tokens\n\nThe `tokens.get()` function can be used to get any value from the design-system. Use object dot notation to find the value you need from your design system object.\n\n```js\n// with the system setup, as above\ntokens.get('lineHeight.headings') // 1.1\n```\n\nThere are a few more helper methods to make finding certain values more simple.\n\n### `tokens.fontSize()` or `tokens.fs()` - Get font-size values\n\nThe `tokens.fontSize()` method is a short-hand for the `tokens.get()` method. It can be used to get a value from the `type.sizes` object.\n\nThe `type.sizes` object’s values can be formatted in a few ways:\n\n- as a string with any unit of measurement, e.g. `s: '13px'` / `px`, `rem` or `em`\n- as a template string using another function to calculate font-sizes, for example a modular-scale, e.g. `${ms(0, modularscale)}px`. **Note: this uses an external package, [modularscale-js](https://github.com/modularscale/modularscale-js)**\n\n```js\n// define some values// type.sizes object\nsizes: {\n  xs: '16px',\n  s: '20px',\n  base: '30px',\n  m: '36px',\n  l: '42px',\n  xl: '50px',\n  xxl: '58px',\n},\n\n// retrieve some values\ntokens.fontSize('xl')\ntokens.fs('xl') // `tokens.fs()` is a short-hand alias for `tokens.fontSize()`\ntokens.fs('xl', true) // return font-size in px regardless of `option.fontSizeUnit` value\n```\n\n#### Modular scale\n\n**Note: v0.x.x had modular scale functionality built-in, in v1.x.x, this has been removed to reduce file-size for those that don't need a modular scale.**\n\nTo make use of a modular scale, there are a few things that need to be done:\n\n- install a modular scale converter package, like [modularscale-js](https://github.com/modularscale/modularscale-js)\n- define your modular scale options outside of your design-system object\n- add the modular scale values to the `type.sizes` object\n\n```js\nconst modularscale = {\n  base: [30],\n  ratio: 1.5,\n}\n\n// design system\n...\nsizes: {\n  xs: `${ms(-2, modularscale)}px`,\n  s: `${ms(-1, modularscale)}px`,\n}\n...\n```\n\nTesting and remembering the values from your modular scale can be tricky, there are two options that can be used, either:\n\n- visit [modularscale.com](https://modularscale.com) and enter your settings, you can then view all the type sizes on the scale you specified\n- or, add the below snippet to your code to print out the values of your scale:\n\n```js\nconst sizes = tokens.get('type.sizes')\nObject.keys(sizes).forEach(item => {\n  console.log(item, ':', sizes[item]) // e.g. `base : 20px`\n})\n```\n\n### Color palette\n\nThere are two possible ways to access color information: the color palette and the brand colors.\n\nThe color palette is intended to contain all the colors (and their shades) that your app will use, and the brand palette _should_ contain the specific colors that your brand uses.\n\nTwo methods can be used to retrieve the values, these are: `tokens.color()` and `tokens.brand()`, below is what the data looks like for them:\n\n```js\ncolors: {\n  // With a color palette like this:\n  colorPalette: {\n    bright: {\n      base: '#F9FAFB',\n      dark: '#F4F6F8',\n      darker: '#DFE4E8',\n    },\n\n    dark: {\n      base: '#212B35',\n      light: '#454F5B',\n      lighter: '#637381',\n    },\n  },\n\n  // With a brand palette like this:\n  brand: {\n    red: '#e82219',\n    deeporange: '#ff7200',\n    orange: '#ff9500',\n    green: '#c4d000',\n    teal: '#1aa5c8',\n    navy: '#0052da',\n  }\n},\n```\n\n#### `tokens.color()` - Get color palette values\n\nThe `tokens.color()` function gets values from the `colorPalette` object. It assumes every color has a `base` property and other properties for different shades of the same color.\nThis is a short-hand for the `tokens.get()` function.\n\n```js\n// Get values like this:\ntokens.color('bright') // #F9FAFB - the `base` key is the default, so it is not needed\ntokens.color('bright', 'dark')\n```\n\n#### `tokens.brand()` - Get brand palette values\n\nThe `tokens.brand()` function gets values from the `colors.brand` object.\nThis is a short-hand for the `tokens.get()` function.\n\n```js\n// Get brand values like this:\ntokens.brand('orange')\ntokens.brand('pink')\ntokens.brand('primary.blue') // it is possible to nest this object as much as you like\n```\n\n### `tokens.bp()` - Get responsive breakpoint values\n\nThe `tokens.bp()` method is a short-hand for the `tokens.get()` method. It can be used to get a breakpoint from the `breakpoints` object.\n\n```js\ntokens.bp('m')\n```\n\n### `tokens.z()` - Get `z-index` values\n\nThe `tokens.z()` method is a short-hand for the `tokens.get()` method. It can be used to get a breakpoint from the `zIndex` object.\n\n```js\ntokens.z('low')\n```\n\n### `tokens.spacing()` or `tokens.space()` - Get spacing values\n\nThe `tokens.spacing()` method returns a value from your `spacing.scale` definition. **The spacing data could either be an array, or an object.**\n\n- If an array, it takes an `index` (number) for that array e.g. `tokens.space(2)`. This variant adds `px` to the end of the string, this will be deprecated in v2.0.0.\n- If an object, it takes a `key` (string) for the item in that object e.g. `tokens.space('m')`\n\n#### Array example:\n\n```js\nscale: [0, 8, 16, 24, 32, 40]\n\ntokens.spacing(2) // '16px'\n// Note: `tokens.space(2)` can also be used\n```\n\n#### Object example:\n\n```js\nscale: {\n  s: '10rem',\n  m: '100rem',\n  l: '1000rem',\n}\n\ntokens.spacing('m') // '100rem'\n// Note: `tokens.space('m')` can also be used\n```\n\n### Calculations\n\nThe framework currently provides a few calculation functions, `multiply`, `toPx` and `pxTo`:\n\n#### `tokens.multiply()`\n\n```js\ntokens.multiply(10, 2) // 20\n\n// you can pass in another value from the system\ntokens.multiply(tokens.get('spacing.baseline'), 2)\n\n// or just use the key from the system\n// the initial value will always be run through `parseFloat()`\ntokens.multiply('spacing.baseline', 2)\n```\n\n#### `pxTo()`\n\nConverts `px` to `rem` or `em`\n\n```js\nimport { pxTo } from 'design-system-utils'\n// pxTo(fontSize, baseFontSize, unit - 'rem'/'em')\npxTo(12, 20, 'rem') // 0.6rem\npxTo(12, 20, 'em') // 0.6em\n```\n\n#### `toPx()`\n\nConverts `rem` or `em` value to `px`\n\n```js\nimport { toPx } from 'design-system-utils'\n// toPx(fontSize, baseFontSize)\ntoPx('1.875rem', 16) // 30px\ntoPx('1.875em', 16) // 30px\n```\n\n#### `parseUnit()`\n\nParses a number and unit string, and returns the unit used\n\n```js\nimport { parseUnit } from 'design-system-utils'\nparseUnit('1.875rem') // 'rem'\nparseUnit('18px') // 'px'\n```\n\n## Usage with Typescript\n\nTypescript types and interfaces should be imported as named imports. Below is an example where a new item (`baseline`) is added to the `spacing` object.\n\n```ts\nimport DesignSystem, { System, SystemOptions, SystemSpacing } from '../index'\n\ninterface MySystemSpacing extends SystemSpacing {\n  baseline: number\n}\n\ninterface MySystem extends System {\n  spacing: MySystemSpacing\n}\n\nconst Tokens: MySystem = {\n  ...\n  ...\n\n  spacing: {\n    scale: [0, 8, 16, 24, 32, 40],\n    baseline: 20,\n  },\n}\n\nexport default new DesignSystem<MySystem, SystemOptions>(Tokens)\n```\n\n## Demo & examples\n\nI created a demo on [codesandbox.io](https://codesandbox.io/s/6wrp94x7kk), it includes examples of using the design-system utils with [emotion](https://emotion.sh/), [styled-components](https://www.styled-components.com/) and [glamorous](https://glamorous.rocks). There is also a basic example [here](example/).\n\n## Licence\n\nMIT &copy; [Zander Martineau](https://zander.wtf)\n","licenseText":"MIT License\n\nCopyright (c) 2017 Zander Martineau\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","_id":"design-system-utils@1.5.0-0","dist":{"shasum":"ebfb2f579b4ac5870862994b7be3f5a91af13843","integrity":"sha512-pmlpJYDHdERLikXL6nilOcq0gz4m01mAbznCcnHPEE3pZ7/HkGpPQGa3HJGmu6x+O/t/cAR9tCreZzeZbZUL/Q==","tarball":"https://registry.npmjs.org/design-system-utils/-/design-system-utils-1.5.0-0.tgz","fileCount":21,"unpackedSize":79164,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcRrjfCRA9TVsSAnZWagAAaI4P/1Cm0VaBsgwcYgtu+ZoM\nc86a5ujNXWxzug9o9ECQqq0Sgn55cVi4P1+05T3ywYe7EFoNVhLLXy63Olp6\nvuCwoA4biMlytuwTo/jcLcMXxL9wfyvLuoro5awLvAf1WxKIlFSwrn70u5jZ\nRgD7vLxsqXeSiGSPRhZ2iSD8Bw8nUWpD9NHp1XmqlB7hLFmV/AxP+bHFxDie\nDWDMJVPo1TyGLnh+qBdCf4izIAfdFgoAtegawF7qGqoj8wxnIJEHqjn2rjML\nWDpUkEh2KdeVkShCemqef1BlfV1VdX7JjJUu/TUrbyjNgAcgJoUav3fr8JgJ\nYQPx0xJME+33/ks2hgJk3hDKUYVeLIF6uOaG2Rpm5mN516EOxzOywY/WWMXZ\n4gADOomsbf+DGPMrKje4HEeKWjEU++YXWfyN0CvUJ98/2RQhJoJbcR3Z4DVg\nmdiQ9VmNm0Y1vv35CPJ7EpmvGHQsLWVnUgqm4TwHEt0Dz5lZken3WoQFZvHY\ndePceTYb9LfSn2R89lYj3X4g6k8FGqNVVDtyzrM2I7malQ6GdgMMpE1GAfGo\nC8Cu+XecDE/tuVWP+2X9ktVXsULK63Z4c+zwFdEFRDoLWDQIMan+SfLG75rV\nS1IY2mfE7kTcW7vuxCTsetn6Xc/IBxmD+X+2d5pN38GAivDXZRlMMYtE/8R+\njIjz\r\n=K/NL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFOiRW/IsJFRTcm7ChpaAtNBPbUkVIdwAx03gG4vWV3RAiEAkDBXDrfr9yk3/HkpNI9nOCczoVU4PhSxAX4dxG6er3U="}]},"maintainers":[{"name":"mrmartineau","email":"z@martineau.tv"}],"_npmUser":{"name":"mrmartineau","email":"z@martineau.tv"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-system-utils_1.5.0-0_1548138719111_0.6865942207740012"},"_hasShrinkwrap":false},"1.3.0":{"name":"design-system-utils","version":"1.3.0","description":"Design-system utils for working with JS-in-CSS","main":"build/cjs.js","browser":"build/umd.js","module":"build/es.js","types":"build/index.d.ts","repository":{"type":"git","url":"git+https://github.com/mrmartineau/design-system-utils.git"},"directories":{"example":"example"},"size-limit":[{"path":"build/cjs.js","limit":"1 KB"},{"path":"build/es.js","limit":"1 KB"}],"scripts":{"presize":"npm run build","size":"size-limit","test":"jest","test:watch":"jest --watch","test:coverage":"jest --coverage","build":"NODE_ENV=production rollup -c","watch":"rollup -c -w","prepublishOnly":"npm run build","prelint":"npm run format:all","lint":"tslint ./src/**/*.ts","format:all":"prettier --write '{src,example}/**/*'"},"keywords":["css-in-js","glamorous","styled-components","emotion","styled-jsx","CSS"],"author":{"name":"Zander Martineau"},"license":"MIT","dependencies":{"@ngard/tiny-get":"^1.0.1"},"devDependencies":{"@types/jest":"^23.3.13","@types/prettier":"^1.15.2","@types/rollup":"^0.54.0","@types/typescript":"^2.0.0","jest":"^23.6.0","prettier":"^1.15.3","rollup":"^1.1.0","rollup-plugin-auto-external":"^2.0.0","rollup-plugin-buble":"^0.19.6","rollup-plugin-bundle-size":"^1.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-node-resolve":"^4.0.0","rollup-plugin-terser":"^4.0.2","rollup-plugin-typescript2":"^0.19.2","rollup-plugin-uglify":"^6.0.1","size-limit":"^0.21.1","ts-jest":"^23.10.5","tslint":"^5.12.1","tslint-config-prettier":"^1.17.0","tslint-plugin-prettier":"^2.0.1","typescript":"3.2.4"},"gitHead":"73f334f55cd97f3d8c101e360ad0fb0a1c60effe","bugs":{"url":"https://github.com/mrmartineau/design-system-utils/issues"},"homepage":"https://github.com/mrmartineau/design-system-utils#readme","_id":"design-system-utils@1.3.0","_npmVersion":"6.0.0","_nodeVersion":"11.6.0","_npmUser":{"name":"mrmartineau","email":"z@martineau.tv"},"dist":{"integrity":"sha512-fPmmS/cTFWIJP42hKyzTGdaw/JIbM2mzwjwcyxT8AHQ9OsTGAdfRORJnG2gfrMhKoAmDvqBsCo664lk4bIyvLw==","shasum":"c03a67ce7d843c3d125bbd51ce2ab2752af196c1","tarball":"https://registry.npmjs.org/design-system-utils/-/design-system-utils-1.3.0.tgz","fileCount":17,"unpackedSize":79162,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcSuI4CRA9TVsSAnZWagAA4zIQAJisB2u+lSnSGlYLpOCD\nbNZ2ZnrmjYxuFT/bRRc4KHbVPUrkbaDlvNDoexigLRRZr1pHCw6ySgnjhllM\nG8E5wuwKVs9AnCrvAVzCdGaaxHrTsDeQjHXKt23FfuxuhO51tXEs/QFMxwv8\n88h2nWy+252OTxCHz2GZIfGEzz1YMTm+qQ0buWaFRYL+blIm/57boEHT0rAu\nmn95mmoUCUXdm0iSgLEGpL917vw1xPiG5/Z/CGK3PzcHh3uIxYLpArdUtqbh\nvHkeYPYelan++rmogqXnJkg6aPthud7ekr5eVs0xrxAh8TNdiorUAUzulCzy\npK+UcfCHsY5mobhlcadjvH/zz5yI5w2/VCeXmh+SDJxC5Ugd08OAAZmoIpmx\nNCtO455cUuhcCo4SHy424D1GeOuYJGuwJzRXxSgSCT6KTxH1kYKxAWMpWPcz\nHqAYXQTvurlCsM1OmHABJDK/XYMBSlfykg2lbm2aORGrjKSkL1I5YvoDfDut\nJkhodtuLTsnXcQpWmuJgslbvjcgzN2zfaKBWKqBxVXowUG2RdJ7MSLEa/JaA\nKGDClqaRqt+7S1zYte4nmsYTZVlrONtbTz+RovYGZ2LA7tuKguIdOTvY5rQ9\n0XVXHhXfXXWtlF6konJw4ZWCVqrHOuqMNbDdFNPWX+Qdz2YyvB6Wv0FEdH3d\num8R\r\n=0nQ7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCJyMmVLULcUCjzHm5ZriiZSfvzrX07a+sMduvvH9TYPwIgQHOFUqp+aCnyFQ2DwTFLs6bhf3/wk2DTB97USzinJKY="}]},"maintainers":[{"name":"mrmartineau","email":"z@martineau.tv"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-system-utils_1.3.0_1548411447816_0.8805456205348736"},"_hasShrinkwrap":false},"1.3.1":{"name":"design-system-utils","version":"1.3.1","description":"Design-system utils for working with JS-in-CSS","main":"build/cjs.js","module":"build/es.js","types":"build/index.d.ts","repository":{"type":"git","url":"https://github.com/mrmartineau/design-system-utils"},"size-limit":[{"path":"build/cjs.js","limit":"1 KB"},{"path":"build/es.js","limit":"1 KB"}],"scripts":{"presize":"npm run build","size":"size-limit","test":"jest","test:watch":"jest --watch","test:coverage":"jest --coverage","build":"NODE_ENV=production rollup -c","watch":"rollup -c -w","prepublishOnly":"npm run build","prelint":"npm run format:all","lint":"tslint ./src/**/*.ts","format:all":"prettier --write '{src,example}/**/*'"},"keywords":["css-in-js","glamorous","styled-components","emotion","styled-jsx","CSS"],"author":{"name":"Zander Martineau"},"license":"MIT","dependencies":{"@ngard/tiny-get":"^1.0.1"},"devDependencies":{"@types/jest":"^23.3.13","@types/prettier":"^1.15.2","@types/rollup":"^0.54.0","@types/typescript":"^2.0.0","jest":"^23.6.0","prettier":"^1.15.3","rollup":"^1.1.0","rollup-plugin-auto-external":"^2.0.0","rollup-plugin-buble":"^0.19.6","rollup-plugin-bundle-size":"^1.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-node-resolve":"^4.0.0","rollup-plugin-terser":"^4.0.2","rollup-plugin-typescript2":"^0.19.2","rollup-plugin-uglify":"^6.0.1","size-limit":"^0.21.1","ts-jest":"^23.10.5","tslint":"^5.12.1","tslint-config-prettier":"^1.17.0","tslint-plugin-prettier":"^2.0.1","typescript":"3.2.4"},"licenseText":"MIT License\n\nCopyright (c) 2017 Zander Martineau\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","_id":"design-system-utils@1.3.1","dist":{"shasum":"029e331cbfcdf887456d9e836d0f0c9e9bb53928","integrity":"sha512-3reYd6GvfMnKCXjvYEUUM+wsg//yrZKEj+yWw1WGA3piV4HKmEnG/+j/GQyi2EpHudFyDIXpnyoYvlIVPkgZTA==","tarball":"https://registry.npmjs.org/design-system-utils/-/design-system-utils-1.3.1.tgz","fileCount":19,"unpackedSize":67426,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcWYW4CRA9TVsSAnZWagAAtvcQAJKwwHtXqlmWjlh3ni4a\nMC2sqJTvqsV5ZlWpo1kmGO73s8FJU2Dv1vuvo0Ll2eLqaQ6iazP6ggjh2fdR\nCnbn6XOkOA16hJGiNyf3sIho5WTg/3gU8euieSildZOfC4TbJvqku49O9yfL\nAVJbqskPQ5LwVi9RmunCufsySJb0LoqcARGQ2NwLXhD4rFpPvzSrtGmNCsD0\novmBqP/ToeguBpy087Fa3DucKPvGfbmaLLFF9kIUIamkh+hDEajg/wW4fGuh\nWg/vgBU9Csrw99Rl1Egsd3l1BKx6BxINn8S/E10JMEnggX2N0bL63VhJWEHl\ni+epr7yuK+ToA4FTwiJLtfAVUz/vIa4jCrGRYD1slyiOiES0z7e8JtyensyP\najhyfN1aFsos24GGEoNZyoLdsGv2Naivz7+ZOC5rizSOnN7AG9zWoaaefBbp\n70nkbUwk1MgF5eFrIsCRc3246UuQvyTEIIU4KbX08tj4XS74i2kJorUZUI9S\n8IwRGx2Q2CzKLDzy6/588JGZpkD5cEoX70ho06v5gGpN/ZRejiaymvaLKjLZ\nVsMXzMTVBqojCdIO57kQ+OQ4V7vV4NzNgmqxOBLlBLmS+QNauHL6OJcTABEC\n/Jn7LEseKteI3RKaNzQXG1iVNGkVaJ2T+Ns04fgXN/hGNpwmmDjzh1BXIJ91\ndshG\r\n=jHkn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDDnpYWDT5rJt639RrkOzaxXzdujr6oeQqVys2tX1xxtwIgQYQYSe5/red4hHAFbdbupuXS298aAm/edGXp6LhSqX8="}]},"maintainers":[{"name":"mrmartineau","email":"z@martineau.tv"}],"_npmUser":{"name":"mrmartineau","email":"z@martineau.tv"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-system-utils_1.3.1_1549370807812_0.45139015053520004"},"_hasShrinkwrap":false},"1.4.0":{"name":"design-system-utils","version":"1.4.0","description":"Design-system utils for working with JS-in-CSS","main":"build/cjs.js","module":"build/es.js","types":"build/index.d.ts","repository":{"type":"git","url":"https://github.com/mrmartineau/design-system-utils"},"size-limit":[{"path":"build/cjs.js","limit":"1 KB"},{"path":"build/es.js","limit":"1 KB"}],"scripts":{"presize":"npm run build","size":"size-limit","test":"jest","test:watch":"jest --watch","test:coverage":"jest --coverage","build":"NODE_ENV=production rollup -c","watch":"rollup -c -w","prepublishOnly":"npm run build","prelint":"npm run format:all","lint":"tslint ./src/**/*.ts","format:all":"prettier --write '{src,example}/**/*'"},"keywords":["css-in-js","glamorous","styled-components","emotion","styled-jsx","CSS"],"author":{"name":"Zander Martineau"},"license":"MIT","dependencies":{"@ngard/tiny-get":"^1.0.1"},"devDependencies":{"@types/jest":"^24.0.9","@types/prettier":"^1.16.1","@types/rollup":"^0.54.0","@types/typescript":"^2.0.0","jest":"^24.1.0","prettier":"^1.16.4","rollup":"^1.3.1","rollup-plugin-auto-external":"^2.0.0","rollup-plugin-buble":"^0.19.6","rollup-plugin-bundle-size":"^1.0.3","rollup-plugin-commonjs":"^9.2.1","rollup-plugin-node-resolve":"^4.0.1","rollup-plugin-terser":"^4.0.4","rollup-plugin-typescript2":"^0.19.3","rollup-plugin-uglify":"^6.0.2","size-limit":"^0.21.1","ts-jest":"^24.0.0","tslint":"^5.13.0","tslint-config-prettier":"^1.18.0","tslint-plugin-prettier":"^2.0.1","typescript":"3.3.3333"},"licenseText":"MIT License\n\nCopyright (c) 2017 Zander Martineau\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","_id":"design-system-utils@1.4.0","dist":{"shasum":"a995a97bbe7b35b50aaa25f0bcd087257906e359","integrity":"sha512-/kmN9HVHLYy9piIhf4aHGuEXIgnfbhJRHCPM2I0KZ0FbmyQRyhdrMo65Drpe2n9leN0ZfEzMb4We87OLVLxE/w==","tarball":"https://registry.npmjs.org/design-system-utils/-/design-system-utils-1.4.0.tgz","fileCount":19,"unpackedSize":69103,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcdqZLCRA9TVsSAnZWagAAHW8P/jC0g/Kg0Z6vfraqhc/a\nbPiIdUiZ4vv6PrulPni59e2ezbo8CyXcjDcORPBgGr8rwt+dmZwE8qoVVLqE\nYSMb/tNkdUwbob0gpq7fSc7l4qurwHFR5bBOaalImtpZIAoQ+jBCVhbUfKoA\nA7/TPgVKE6xXtWfRiQpDthPywa3+RqFGrSneGFeUfa6gOoWrYaympTftzpBA\npN8bzTpaiBiZQL31CRohCddZ3f4xSeJ5fNHDpLxSnjQE6/bKAxVGqGAu5xVS\nnZz5Vc6bIYP4vtJPIRY54qODTBbKEitjnySiAabLj59wm0whqjyPsa7CuFUV\nyGTlUcTyNty+Wt4P27cM+S16zjprgvxrSaIMDgdY1JxerNe/BKfryyzN9JCK\n2h/RcHvBS+RKsUsa7nKZZazlBN7nfN+2rtXvD//fmGX4964/MjORWa+Vyb+I\nEhvB/qsryOXpjp2X27WzRGUPrzQs+mgjUqgwhVgwFY/+/f7pp30+E+GaUy1j\nWMbNYrzolnK4yQJNosvsBcCofrw7acDFnROy4meXQw/fVYUQgvH0V2UEVJwQ\nKjCtH3jrVJ24S1BhcOWy7N9VhEfJgD1ebKNGhBqqjE/EAt2dHNGbGwZXJ0Se\nI+f1WOCFCCh+UeV+F4VwlGfa9GyWxIYOeuawtsoIgVGHvasGe1dLn8jaQliD\nkal/\r\n=VM8t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCYR56pbxFEySK98A/CYRYrqeaqaep8oCAIzHBnvM6sLgIhAPWxPvc+XU9f1guYWxlB1PoyYBBVwVBXxGeW1JAiW5by"}]},"maintainers":[{"name":"mrmartineau","email":"z@martineau.tv"}],"_npmUser":{"name":"mrmartineau","email":"z@martineau.tv"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-system-utils_1.4.0_1551279690661_0.5482547333641528"},"_hasShrinkwrap":false},"1.5.0-1":{"name":"design-system-utils","version":"1.5.0-1","description":"Design-system utils for working with JS-in-CSS","main":"build/cjs.js","module":"build/es.js","types":"build/index.d.ts","repository":{"type":"git","url":"https://github.com/mrmartineau/design-system-utils"},"size-limit":[{"path":"build/cjs.js","limit":"1 KB"},{"path":"build/es.js","limit":"1 KB"}],"scripts":{"presize":"npm run build","size":"size-limit","test":"jest","test:watch":"jest --watch","test:coverage":"jest --coverage","build":"NODE_ENV=production rollup -c","watch":"rollup -c -w","prepublishOnly":"npm run build","prelint":"npm run format:all","lint":"tslint ./src/**/*.ts","format:all":"prettier --write '{src,example}/**/*'"},"keywords":["css-in-js","glamorous","styled-components","emotion","styled-jsx","CSS"],"author":{"name":"Zander Martineau"},"license":"MIT","dependencies":{"@ngard/tiny-get":"^1.0.1","dset":"^2.0.1"},"devDependencies":{"@types/jest":"^24.0.9","@types/prettier":"^1.16.1","@types/rollup":"^0.54.0","@types/typescript":"^2.0.0","jest":"^24.1.0","prettier":"^1.16.4","rollup":"^1.3.1","rollup-plugin-auto-external":"^2.0.0","rollup-plugin-buble":"^0.19.6","rollup-plugin-bundle-size":"^1.0.3","rollup-plugin-commonjs":"^9.2.1","rollup-plugin-node-resolve":"^4.0.1","rollup-plugin-terser":"^4.0.4","rollup-plugin-typescript2":"^0.19.3","rollup-plugin-uglify":"^6.0.2","size-limit":"^0.21.1","ts-jest":"^24.0.0","tslint":"^5.13.0","tslint-config-prettier":"^1.18.0","tslint-plugin-prettier":"^2.0.1","typescript":"3.3.3333"},"readmeFilename":"readme.md","readme":"<h1 align=\"center\">\n  👩‍🎨 <br/>\n  Design System Utils\n\n[![npm](https://img.shields.io/npm/v/design-system-utils.svg?style=flat-square)](https://www.npmjs.com/package/design-system-utils)\n[![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/design-system-utils.svg?style=flat-square)](https://www.npmjs.com/package/design-system-utils) [![Travis CI Build](https://img.shields.io/travis/mrmartineau/design-system-utils.svg?style=flat-square)](https://travis-ci.org/mrmartineau/design-system-utils)\n![](https://img.shields.io/badge/licence-MIT-blue.svg?style=flat-square)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)\n\n</h1>\n\nDesign System Utils is a micro framework that standardises your design-system tokens & provides helpful utility functions to access it’s information. It can be used with [styled-components](https://styled-components.com), [emotion](https://emotion.sh), [glamorous](https://glamorous.rocks/) or any other [CSS-in-JS framework](https://css-in-js-playground.com/).\n\n<details>\n  <summary>Table of contents</summary>\n\n- [Install](#install)\n- [Usage](#usage)\n  - [Setting up your design system](#setting-up-your-design-system)\n  - [Initialise the design system framework](#initialise-the-design-system-framework)\n  - [Accessing the design system data in your app](#accessing-the-design-system-data-in-your-app)\n- [Options](#options)\n- [API methods](#api-methods)\n  - [`tokens.get()` - Get any value from the design tokens](#tokensget---get-any-value-from-the-design-tokens)\n  - [`tokens.fontSize()` or `tokens.fs()` - Get font-size values](#tokensfontsize-or-tokensfs---get-font-size-values)\n  - [Color palette](#color-palette)\n    - [`tokens.color()` - Get color palette values](#tokenscolor---get-color-palette-values)\n    - [`tokens.brand()` - Get brand palette values](#tokensbrand---get-brand-palette-values)\n  - [`tokens.bp()` - Get responsive breakpoint values](#tokensbp---get-responsive-breakpoint-values)\n  - [`tokens.z()` - Get `z-index` values](#tokensz---get-z-index-values)\n  - [`tokens.spacing()` or `tokens.space()` - Get spacing values](#tokensspacing-or-tokensspace---get-spacing-values)\n  - [Calculations](#calculations)\n- [Usage with Typescript](#usage-with-typescript)\n- [Demo & examples](#demo--examples)\n\n</details>\n\n## Install\n\n```sh\nyarn add design-system-utils\n\n# or\n\nnpm install --save design-system-utils\n```\n\n### Size\n\n```\n$ size-limit\n\n  cjs/index.js\n  Package size: 814 B\n  Size limit:   1 KB\n\n  es/index.js\n  Package size: 806 B\n  Size limit:   1 KB\n\n  With all dependencies, minified and gzipped\n```\n\n## Usage\n\nFirst create your design system file, this contains all your design tokens that your app or site will use; things like font-sizes, color palette, spacing etc (kind of like a Sass/Less variables file).\n\nFor example you can create a top-level directory named `tokens`, `theme` or `designsystem`, and add an index.js inside, like so:\n\n```\n./tokens\n└── index.js\n```\n\nA simple version of a tokens file with Design System Utils:\n\n```js\n// ./tokens/index.js\nimport DesignSystem from 'design-system-utils'\n\n// your design tokens object goes here, see below for further details\nconst designTokens = {...}\n\nexport default new DesignSystem(designTokens)\n```\n\n### Setting up your design system\n\nThe \"shape\" and structure of your design tokens object **_can_** actually be anything you want, however, if you want to make use of the shortcut/helper methods like `tokens.fontSize|bp|z|color|brand|spacing` etc, there is a particular shape that your data will need to follow, see below:\n\n(🤔 the below code snippet includes some psuedo types for the values that occur in the different parts of the tokens object)\n\n```js\n{\n  type: {\n    // this should be set as a px value if you have `options.fontSizeUnit` set\n    // to 'rem' or 'em' so that the lib can convert the values properly\n    baseFontSize: '' // string,\n\n    // used with `tokens.fs('size')` or `tokens.fontSize('size')`\n    sizes: {\n      key: '' // <number | string>,\n    },\n  },\n\n  // Color palette\n  // Each object needs to have the same shape\n  // Each color object needs a `base` value to be the default\n  // Have as many color objects as you like\n  colors: {\n    // Used with `ds.color('colorName')`\n    colorPalette: {\n      colorName: {\n        base: '' // <string>, // base is the default\n      },\n    },\n\n    // Used with `ds.brand('colorName)`\n    brand: {\n      colorName: '' // <string>, base is the default\n    }\n  },\n\n  // Breakpoints\n  // Used with `ds.bp()`\n  // Keys can be anything you like\n  // Have as many breakpoints as you like\n  // Values can be use any unit you like\n  breakpoints: {\n    key: '' // <number | string>,\n  },\n\n  // Z-index\n  // Used with `ds.z()`\n  zIndex: {\n    key: 10 // <number>\n  },\n\n  // Spacing\n  // Used with `ds.spacing()` or `ds.space()`\n  spacing: {\n    scale: [] // <array>[<number | string>, ...], <object>\n  },\n}\n```\n\nBelow is an excerpt from the example design-system. See a more complete version in the [`/example`](example/myDesignSystem.js) directory or some that are used in the design-system-utils tests: [1](https://github.com/mrmartineau/design-system-utils/blob/master/src/testData/ds1.js) & [2](https://github.com/mrmartineau/design-system-utils/blob/master/src/testData/ds1.js).\n\n```js\nconst designTokens = {\n  type: {\n    baseFontSize: '20px',\n\n    sizes: {\n      xs: '16px',\n      s: '20px',\n      base: '30px',\n      m: '36px',\n      l: '42px',\n      xl: '50px',\n      xxl: '58px',\n    },\n\n    fontFamily: {\n      system:\n        '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\"',\n      sans: '\"Helvetica Neue\", Helvetica, Arial, sans-serif',\n      serif: 'Georgia, \"Times New Roman\", Times, serif',\n      mono: 'Menlo, Monaco, \"Courier New\", monospace',\n    },\n\n    lineHeight: {\n      headings: 1.1,\n    },\n\n    fontWeight: {\n      normal: 300, // Useful to set here if using anything other than `normal`\n      bold: 'bold', // Useful to set here when bold webfonts come as 400 font-weight.\n      headings: 'bold', // instead of browser default, bold\n    },\n  },\n}\n```\n\n### Initialise the design system framework\n\n```js\n// myDesignSystem.js\nimport DesignSystem from 'design-system'\nconst designTokens = {...}\nexport default new DesignSystem(designTokens)\n```\n\n## Accessing the design system data in your app\n\nTo access your design system, you just need to `import` it to the current file, like so:\n\n```js\nimport tokens from './tokens' // assuming you exported `default` from your design system file\n```\n\nHere is a very simple component using [styled-components](https://styled-components.com) and some values from the tokens, you should be able to see how easy it is to pull information from the design system.\n\n```js\n// Example using styled-components\nimport styled from 'styled-component'\nimport tokens from './tokens'\n\nexport const Box = styled.div`\n  font-family: ${tokens.get('type.fontFamilyBase')};\n  background-color: ${tokens.brand('primary')};\n  margin: ${tokens.space(2)} 0;\n`\n```\n\n## Options\n\nThere is only one option that can be passed to your design system class, it relates to font-sizing:\n\n```js\n// Use default options. do not convert the font-sizes to rems or ems\nexport default new DesignSystem(myDesignSystem)\n\n// OR: with custom options\nexport default new DesignSystem(myDesignSystem, {\n  // this is used to convert your `type.sizes` values from one unit to another\n  // e.g. to convert all `px` sizes  to `rem`, set this option:\n  fontSizeUnit: 'rem',\n  // this means you can define values using px and use rems in your app\n})\n```\n\n## API methods\n\n### `tokens.get()` - Get any value from the design tokens\n\nThe `tokens.get()` function can be used to get any value from the design-system. Use object dot notation to find the value you need from your design system object.\n\n```js\n// with the system setup, as above\ntokens.get('lineHeight.headings') // 1.1\n```\n\nThere are a few more helper methods to make finding certain values more simple.\n\n### `tokens.fontSize()` or `tokens.fs()` - Get font-size values\n\nThe `tokens.fontSize()` method is a short-hand for the `tokens.get()` method. It can be used to get a value from the `type.sizes` object.\n\nThe `type.sizes` object’s values can be formatted in a few ways:\n\n- as a string with any unit of measurement, e.g. `s: '13px'` / `px`, `rem` or `em`\n- as a template string using another function to calculate font-sizes, for example a modular-scale, e.g. `${ms(0, modularscale)}px`. **Note: this uses an external package, [modularscale-js](https://github.com/modularscale/modularscale-js)**\n\n```js\n// define some values// type.sizes object\nsizes: {\n  xs: '16px',\n  s: '20px',\n  base: '30px',\n  m: '36px',\n  l: '42px',\n  xl: '50px',\n  xxl: '58px',\n},\n\n// retrieve some values\ntokens.fontSize('xl')\ntokens.fs('xl') // `tokens.fs()` is a short-hand alias for `tokens.fontSize()`\ntokens.fs('xl', true) // return font-size in px regardless of `option.fontSizeUnit` value\n```\n\n#### Modular scale\n\n**Note: v0.x.x had modular scale functionality built-in, in v1.x.x, this has been removed to reduce file-size for those that don't need a modular scale.**\n\nTo make use of a modular scale, there are a few things that need to be done:\n\n- install a modular scale converter package, like [modularscale-js](https://github.com/modularscale/modularscale-js)\n- define your modular scale options outside of your design-system object\n- add the modular scale values to the `type.sizes` object\n\n```js\nconst modularscale = {\n  base: [30],\n  ratio: 1.5,\n}\n\n// design system\n...\nsizes: {\n  xs: `${ms(-2, modularscale)}px`,\n  s: `${ms(-1, modularscale)}px`,\n}\n...\n```\n\nTesting and remembering the values from your modular scale can be tricky, there are two options that can be used, either:\n\n- visit [modularscale.com](https://modularscale.com) and enter your settings, you can then view all the type sizes on the scale you specified\n- or, add the below snippet to your code to print out the values of your scale:\n\n```js\nconst sizes = tokens.get('type.sizes')\nObject.keys(sizes).forEach(item => {\n  console.log(item, ':', sizes[item]) // e.g. `base : 20px`\n})\n```\n\n### Color palette\n\nThere are two possible ways to access color information: the color palette and the brand colors.\n\nThe color palette is intended to contain all the colors (and their shades) that your app will use, and the brand palette _should_ contain the specific colors that your brand uses.\n\nTwo methods can be used to retrieve the values, these are: `tokens.color()` and `tokens.brand()`, below is what the data looks like for them:\n\n```js\ncolors: {\n  // With a color palette like this:\n  colorPalette: {\n    bright: {\n      base: '#F9FAFB',\n      dark: '#F4F6F8',\n      darker: '#DFE4E8',\n    },\n\n    dark: {\n      base: '#212B35',\n      light: '#454F5B',\n      lighter: '#637381',\n    },\n  },\n\n  // With a brand palette like this:\n  brand: {\n    red: '#e82219',\n    deeporange: '#ff7200',\n    orange: '#ff9500',\n    green: '#c4d000',\n    teal: '#1aa5c8',\n    navy: '#0052da',\n  }\n},\n```\n\n#### `tokens.color()` - Get color palette values\n\nThe `tokens.color()` function gets values from the `colorPalette` object. It assumes every color has a `base` property and other properties for different shades of the same color.\nThis is a short-hand for the `tokens.get()` function.\n\n```js\n// Get values like this:\ntokens.color('bright') // #F9FAFB - the `base` key is the default, so it is not needed\ntokens.color('bright', 'dark')\ntokens.color('background.extra.dark') // Accepts a path (in this case the second `variant` argument is ignored)\n```\n\n#### `tokens.brand()` - Get brand palette values\n\nThe `tokens.brand()` function gets values from the `colors.brand` object.\nThis is a short-hand for the `tokens.get()` function.\n\n```js\n// Get brand values like this:\ntokens.brand('orange')\ntokens.brand('pink')\ntokens.brand('primary.blue') // it is possible to nest this object as much as you like\n```\n\n### `tokens.bp()` - Get responsive breakpoint values\n\nThe `tokens.bp()` method is a short-hand for the `tokens.get()` method. It can be used to get a breakpoint from the `breakpoints` object.\n\n```js\ntokens.bp('m')\n```\n\n### `tokens.z()` - Get `z-index` values\n\nThe `tokens.z()` method is a short-hand for the `tokens.get()` method. It can be used to get a breakpoint from the `zIndex` object.\n\n```js\ntokens.z('low')\n```\n\n### `tokens.spacing()` or `tokens.space()` - Get spacing values\n\nThe `tokens.spacing()` method returns a value from your `spacing.scale` definition. **The spacing data could either be an array, or an object.**\n\n- If an array, it takes an `index` (number) for that array e.g. `tokens.space(2)`. This variant adds `px` to the end of the string, this will be deprecated in v2.0.0.\n- If an object, it takes a `key` (string) for the item in that object e.g. `tokens.space('m')`\n\n#### Array example:\n\n```js\nscale: [0, 8, 16, 24, 32, 40]\n\ntokens.spacing(2) // '16px'\n// Note: `tokens.space(2)` can also be used\n```\n\n#### Object example:\n\n```js\nscale: {\n  s: '10rem',\n  m: '100rem',\n  l: '1000rem',\n}\n\ntokens.spacing('m') // '100rem'\n// Note: `tokens.space('m')` can also be used\n```\n\n### Calculations\n\nThe framework currently provides a few calculation functions, `multiply`, `toPx` and `pxTo`:\n\n#### `tokens.multiply()`\n\n```js\ntokens.multiply(10, 2) // 20\n\n// you can pass in another value from the system\ntokens.multiply(tokens.get('spacing.baseline'), 2)\n\n// or just use the key from the system\n// the initial value will always be run through `parseFloat()`\ntokens.multiply('spacing.baseline', 2)\n```\n\n#### `pxTo()`\n\nConverts `px` to `rem` or `em`\n\n```js\nimport { pxTo } from 'design-system-utils'\n// pxTo(fontSize, baseFontSize, unit - 'rem'/'em')\npxTo(12, 20, 'rem') // 0.6rem\npxTo(12, 20, 'em') // 0.6em\n```\n\n#### `toPx()`\n\nConverts `rem` or `em` value to `px`\n\n```js\nimport { toPx } from 'design-system-utils'\n// toPx(fontSize, baseFontSize)\ntoPx('1.875rem', 16) // 30px\ntoPx('1.875em', 16) // 30px\n```\n\n#### `parseUnit()`\n\nParses a number and unit string, and returns the unit used\n\n```js\nimport { parseUnit } from 'design-system-utils'\nparseUnit('1.875rem') // 'rem'\nparseUnit('18px') // 'px'\n```\n\n## Usage with Typescript\n\nTypescript types and interfaces should be imported as named imports. Below is an example where a new item (`baseline`) is added to the `spacing` object.\n\n```ts\nimport DesignSystem, { System, SystemOptions, SystemSpacing } from '../index'\n\ninterface MySystemSpacing extends SystemSpacing {\n  baseline: number\n}\n\ninterface MySystem extends System {\n  spacing: MySystemSpacing\n}\n\nconst Tokens: MySystem = {\n  ...\n  ...\n\n  spacing: {\n    scale: [0, 8, 16, 24, 32, 40],\n    baseline: 20,\n  },\n}\n\nexport default new DesignSystem<MySystem, SystemOptions>(Tokens)\n```\n\n## Demo & examples\n\nI created a demo on [codesandbox.io](https://codesandbox.io/s/6wrp94x7kk), it includes examples of using the design-system utils with [emotion](https://emotion.sh/), [styled-components](https://www.styled-components.com/) and [glamorous](https://glamorous.rocks). There is also a basic example [here](example/).\n\n## Licence\n\nMIT &copy; [Zander Martineau](https://zander.wtf)\n","licenseText":"MIT License\n\nCopyright (c) 2017 Zander Martineau\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","_id":"design-system-utils@1.5.0-1","dist":{"shasum":"60e6f46a96978da3dc192ff0d4c6b1d2492f059c","integrity":"sha512-ogcOdbkAcM4jr7SW/HOSwOXYIJp5gnhu89lvQkL3acw1yPZrl+jv4JewlICkPHfCJDYI7BPfK6JxzamQMiZxnQ==","tarball":"https://registry.npmjs.org/design-system-utils/-/design-system-utils-1.5.0-1.tgz","fileCount":19,"unpackedSize":70836,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJceu0HCRA9TVsSAnZWagAACYMP/1p5clSYZRW515rT1tk9\nTOY7PAxDK+/uqL/5FDXqqMay5y89QUO3GRZomFlGCzCH1e+y8lPX6CGhPJcb\nq2+NrDew4UM//WP2By3xu9pexLtAUPvZFH2bEVYGfZghfhbwKZ4HCojTvHXd\nt+PLh0Ef4Mk1J97tFv38y/oskw3bsc+u5RODy0Fwvpd0nIHS94q3I37CFcBr\nVyWh3gWzdrhfo478ZKzsE8/XjCNd3WyMTrvgpdkiiFaH67mwiW1LXNpUkAOO\n6CLYSWPVkmZgD1eSD0YqxybQ+cckjDLIiaF6oBOXpnrY1QHhjL5XvtEyd5Uy\nc1rtfeD/Rmn28xXibwllmc0usfBICa3xG/sz0/Tx1ucP9NH7XfLaepCcs8Yk\n08+acItnV/xths1skoh7eE/RR7wETknJCl05+A66b2b9wSOQSPh2O7cKVEUr\nVUeeFn1omtesCE0l+Nnhlo5kJLequMID3D3sPWlLidSYD9hS/sul/T0EOEzb\nLMrhvB+ehc0CLJThO9glQ/vhX7x2cfopeN2G2AVzsG59dgKwj+VM4RRY/dfK\nGrk3OrnZTZ+BYdUtNNy0KCIAQuee7Qb1dWFQeH3vwk0wxQPYG8oHqlY24NBT\naF7tiYE+qhshKyM8rFTLbxSB9RQ32lNIf2rVz3mxQSSHRFbnuXiFMdqXuDEB\n9Lz/\r\n=Avip\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFvbYC11BBvCo/j/ZR2uUhEJy33ZPvhz8jXoGfYJsoNkAiEAtTYM7wqsUsmrYfzNm15s6WW4tjH2r3sjFarRvZkebS8="}]},"maintainers":[{"name":"mrmartineau","email":"z@martineau.tv"}],"_npmUser":{"name":"mrmartineau","email":"z@martineau.tv"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-system-utils_1.5.0-1_1551559943157_0.27084762655834926"},"_hasShrinkwrap":false},"1.5.0":{"name":"design-system-utils","version":"1.5.0","description":"Design-system utils for working with JS-in-CSS","main":"build/cjs.js","module":"build/es.js","types":"build/index.d.ts","repository":{"type":"git","url":"https://github.com/mrmartineau/design-system-utils"},"size-limit":[{"path":"build/cjs.js","limit":"1 KB"},{"path":"build/es.js","limit":"1 KB"}],"scripts":{"presize":"npm run build","size":"size-limit","test":"jest","test:watch":"jest --watch","test:coverage":"jest --coverage","build":"NODE_ENV=production rollup -c","watch":"rollup -c -w","prepublishOnly":"npm run build","prelint":"npm run format:all","lint":"tslint ./src/**/*.ts","format:all":"prettier --write '{src,example}/**/*'"},"keywords":["css-in-js","glamorous","styled-components","emotion","styled-jsx","CSS"],"author":{"name":"Zander Martineau"},"license":"MIT","dependencies":{"@ngard/tiny-get":"^1.0.1","dset":"^2.0.1"},"devDependencies":{"@types/jest":"^24.0.9","@types/prettier":"^1.16.1","@types/rollup":"^0.54.0","@types/typescript":"^2.0.0","jest":"^24.1.0","prettier":"^1.16.4","rollup":"^1.3.1","rollup-plugin-auto-external":"^2.0.0","rollup-plugin-buble":"^0.19.6","rollup-plugin-bundle-size":"^1.0.3","rollup-plugin-commonjs":"^9.2.1","rollup-plugin-node-resolve":"^4.0.1","rollup-plugin-terser":"^4.0.4","rollup-plugin-typescript2":"^0.19.3","rollup-plugin-uglify":"^6.0.2","size-limit":"^0.21.1","ts-jest":"^24.0.0","tslint":"^5.13.0","tslint-config-prettier":"^1.18.0","tslint-plugin-prettier":"^2.0.1","typescript":"3.3.3333"},"licenseText":"MIT License\n\nCopyright (c) 2017 Zander Martineau\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","_id":"design-system-utils@1.5.0","dist":{"shasum":"c2699aa31c4a2b752f8edf98ae0118b82c72653d","integrity":"sha512-L/ERBzMJHV0uH9+Q8xzowqaqJEp23p7a2pUhpOYA7zNV9TmD7Q7AzW2+/8QA0mP8deVQHcJdSse0bbalzt8tyQ==","tarball":"https://registry.npmjs.org/design-system-utils/-/design-system-utils-1.5.0.tgz","fileCount":19,"unpackedSize":72938,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcewk8CRA9TVsSAnZWagAAz5MQAI5pJopIODCQE6wSTAZw\nzoQHmbgbiDMb/RBL+Y6r/riNpeM9EiHqQPhAeD0f2OUAHIA4i00v1z+Ot7TA\nAbui5KfZKcE4XMFNaBxpWYHKbw9282qxThDHgrAhwnzSgga0OycAuwmZSklb\nTMQ+yJKdmKX0MaDHRqeRprvVQs5ndKLeKtEF3AHf3x/zRAt1rRZxt4SELjbN\npF5x8OBUCd5x51aNPBQWfItQZ1RYSDEc8BsnW3aIvZEhzZWGCVXW4sONO0iU\nrZjR/jZ8kwMPsNE2Q3bp8Ci7iKd4JxJsjcubvmTjI55QXy62nVFi34KbboUw\n0dW+J8wfPhACoV/bmXTgO1rHRyfRo061zpns/Nvdaug+l+oQ28VBpu9GIB88\noKng/cNnG8FIH0GbasCOxgeBEzW34Jq01poPecH5GIqigLCj7T95kKKV3PVE\n7Xs3nkW/LfmGIKQZPG81u6W2TPBuqdnUNFijRNDSJFmT5VdewAO5UsMdJbl1\n3iUvHH44VatU7NARho7t6Q1/TsFwhgrnHheKjq8+6hXQ4b1eXG6eBnJGucU3\n283nBHkU/B9yh7BqRy6nYNTcL4THP7iAKIR13LMbEa66eTvZTf/ebCuwIddK\nbPVHwrP1o1NM7rWzF9xQq79ZQJHp5ju2bIcfbGDLZtHp5RelQe/Qz7r+UE6F\ntUOj\r\n=sMTu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCK3SvAYe/Cq2wBcTYZqSACYcfNfsfUsBvgfu6/0nmk3gIgA9JQSZdtFTaDCNSf199CbP8Z7pC0y0m/YvcK+aC//tY="}]},"maintainers":[{"name":"mrmartineau","email":"z@martineau.tv"}],"_npmUser":{"name":"mrmartineau","email":"z@martineau.tv"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-system-utils_1.5.0_1551567163194_0.644718130028783"},"_hasShrinkwrap":false}},"readme":"<h1 align=\"center\">\n  👩‍🎨 <br/>\n  Design System Utils\n\n[![npm](https://img.shields.io/npm/v/design-system-utils.svg?style=flat-square)](https://www.npmjs.com/package/design-system-utils)\n[![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/design-system-utils.svg?style=flat-square)](https://www.npmjs.com/package/design-system-utils) [![Travis CI Build](https://img.shields.io/travis/mrmartineau/design-system-utils.svg?style=flat-square)](https://travis-ci.org/mrmartineau/design-system-utils)\n![](https://img.shields.io/badge/licence-MIT-blue.svg?style=flat-square)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)\n\n</h1>\n\nDesign System Utils is a micro framework that standardises your design-system tokens & provides helpful utility functions to access the information. It can be used with [styled-components](https://styled-components.com), [emotion](https://emotion.sh), [glamorous](https://glamorous.rocks/) or any other [CSS-in-JS framework](https://css-in-js-playground.com/).\n\n## Install\n\n```sh\nyarn add design-system-utils\n\n# or\n\nnpm install --save design-system-utils\n```\n\n### Size\n\n```\n$ size-limit\n\n  build/cjs.js\n  Package size: 814 B\n  Size limit:   1 KB\n\n  es/index.js\n  Package size: 806 B\n  Size limit:   1 KB\n\n  With all dependencies, minified and gzipped\n```\n\n<details>\n  <summary>🤓 Table of contents</summary>\n\n<!-- START doctoc generated TOC please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->\n\n\n- [Usage](#usage)\n  - [Setup](#setup)\n  - [Initialise the design system framework](#initialise-the-design-system-framework)\n- [Accessing the design system data in your app](#accessing-the-design-system-data-in-your%C2%A0app)\n- [Options](#options)\n- [Basic API methods](#basic-api-methods)\n  - [`tokens.get()` - Get a token value](#tokensget---get-a-token-value)\n  - [`tokens.set()` - Set a token value](#tokensset---set-a-token-value)\n- [API helper methods](#api-helper-methods)\n  - [`tokens.fontSize()` or `tokens.fs()` - Get font-size values](#tokensfontsize-or-tokensfs---get-font-size-values)\n    - [Modular scale](#modular-scale)\n  - [Color palette](#color-palette)\n    - [`tokens.color()` - Get color palette values](#tokenscolor---get-color-palette-values)\n    - [`tokens.brand()` - Get brand palette values](#tokensbrand---get-brand-palette-values)\n  - [`tokens.bp()` - Get responsive breakpoint values](#tokensbp---get-responsive-breakpoint-values)\n  - [`tokens.z()` - Get `z-index` values](#tokensz---get-z-index-values)\n  - [`tokens.spacing()` or `tokens.space()` - Get spacing values](#tokensspacing-or-tokensspace---get-spacing-values)\n    - [Array example:](#array-example)\n    - [Object example:](#object-example)\n  - [Calculations](#calculations)\n    - [`tokens.multiply()`](#tokensmultiply)\n    - [`pxTo()`](#pxto)\n    - [`toPx()`](#topx)\n    - [`parseUnit()`](#parseunit)\n- [Usage with Typescript](#usage-with-typescript)\n- [Demo & examples](#demo--examples)\n- [Licence](#licence)\n\n<!-- END doctoc generated TOC please keep comment here to allow auto update -->\n\n</details>\n\n## Usage\n\nFirst create your design system file, this contains all your design tokens that your app or site will use; things like font-sizes, color palette, spacing etc (kind of like a Sass/Less variables file).\n\nFor example you can create a top-level directory named `tokens`, `theme` or `designsystem`, and add an index.js inside, like so:\n\n```\n./tokens\n└── index.js\n```\n\nA simple version of a tokens file with Design System Utils:\n\n```js\n// ./tokens/index.js\nimport DesignSystem from 'design-system-utils'\n\n// your design tokens object goes here, see below for further details\nconst designTokens = {...}\n\nexport default new DesignSystem(designTokens)\n```\n\n### Setup\n\nThe \"shape\" and structure of your design tokens object **_can_** actually be anything you want, however, if you want to make use of the shortcut/helper methods like `tokens.fontSize|bp|z|color|brand|spacing` etc, there is a particular shape that your data will need to follow, see below:\n\n(🤔 the below code snippet includes some psuedo types for the values that occur in the different parts of the tokens object)\n\n```js\n{\n  type: {\n    // this should be set as a px value if you have `options.fontSizeUnit` set\n    // to 'rem' or 'em' so that the lib can convert the values properly\n    baseFontSize: '' // string,\n\n    // used with `tokens.fs('size')` or `tokens.fontSize('size')`\n    sizes: {\n      key: '' // <number | string>,\n    },\n  },\n\n  // Color palette\n  // Each object needs to have the same shape\n  // Each color object needs a `base` value to be the default\n  // Have as many color objects as you like\n  colors: {\n    // Used with `ds.color('colorName')`\n    colorPalette: {\n      colorName: {\n        base: '' // <string>, // base is the default\n      },\n    },\n\n    // Used with `ds.brand('colorName)`\n    brand: {\n      colorName: '' // <string>, base is the default\n    }\n  },\n\n  // Breakpoints\n  // Used with `ds.bp()`\n  // Keys can be anything you like\n  // Have as many breakpoints as you like\n  // Values can be use any unit you like\n  breakpoints: {\n    key: '' // <number | string>,\n  },\n\n  // Z-index\n  // Used with `ds.z()`\n  zIndex: {\n    key: 10 // <number>\n  },\n\n  // Spacing\n  // Used with `ds.spacing()` or `ds.space()`\n  spacing: {\n    scale: [] // <array>[<number | string>, ...], <object>\n  },\n}\n```\n\nBelow is an excerpt from the example design-system. See a more complete version in the [`/example`](example/myDesignSystem.js) directory or some that are used in the design-system-utils tests: [1](https://github.com/mrmartineau/design-system-utils/blob/master/src/testData/ds1.js) & [2](https://github.com/mrmartineau/design-system-utils/blob/master/src/testData/ds1.js).\n\n```js\nconst designTokens = {\n  type: {\n    baseFontSize: '20px',\n\n    sizes: {\n      xs: '16px',\n      s: '20px',\n      base: '30px',\n      m: '36px',\n      l: '42px',\n      xl: '50px',\n      xxl: '58px',\n    },\n\n    fontFamily: {\n      system:\n        '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Fira Sans\", \"Droid Sans\"',\n      sans: '\"Helvetica Neue\", Helvetica, Arial, sans-serif',\n      serif: 'Georgia, \"Times New Roman\", Times, serif',\n      mono: 'Menlo, Monaco, \"Courier New\", monospace',\n    },\n\n    lineHeight: {\n      headings: 1.1,\n    },\n\n    fontWeight: {\n      normal: 300, // Useful to set here if using anything other than `normal`\n      bold: 'bold', // Useful to set here when bold webfonts come as 400 font-weight.\n      headings: 'bold', // instead of browser default, bold\n    },\n  },\n}\n```\n\n### Initialise the design system framework\n\n```js\n// myDesignSystem.js\nimport DesignSystem from 'design-system'\nconst designTokens = {...}\nexport default new DesignSystem(designTokens)\n```\n\n## Accessing the design system data in your app\n\nTo access your design system, you just need to `import` it to the current file, like so:\n\n```js\nimport tokens from './tokens' // assuming you exported `default` from your design system file\n```\n\nHere is a very simple component using [styled-components](https://styled-components.com) and some values from the tokens, you should be able to see how easy it is to pull information from the design system.\n\n```js\n// Example using styled-components\nimport styled from 'styled-component'\nimport tokens from './tokens'\n\nexport const Box = styled.div`\n  font-family: ${tokens.get('type.fontFamilyBase')};\n  background-color: ${tokens.brand('primary')};\n  margin: ${tokens.space(2)} 0;\n`\n```\n\n## Options\n\nThere is only one option that can be passed to your design system class, it relates to font-sizing:\n\n```js\n// Use default options. do not convert the font-sizes to rems or ems\nexport default new DesignSystem(myDesignSystem)\n\n// OR: with custom options\nexport default new DesignSystem(myDesignSystem, {\n  // this is used to convert your `type.sizes` values from one unit to another\n  // e.g. to convert all `px` sizes  to `rem`, set this option:\n  fontSizeUnit: 'rem',\n  // this means you can define values using px and use rems in your app\n})\n```\n\n## Basic API methods\n\n### `tokens.get()` - Get a token value\n\nThe `tokens.get()` function can be used to get any value from the design-system. Use object dot notation to find the value you need from your design system object.\n\n```js\n// with the system setup, as above\ntokens.get('lineHeight.headings') // 1.1\ntokens.get('a.really.deeply.nested.value')\n```\n\n### `tokens.set()` - Set a token value\n\nThe `tokens.set()` function can be used to set tokens values. This means you can overwrite existing items, or create new items that are specific to your application.\n\nLike the `.get()` method, use object dot notation to find the value you need from your design system object.\n\nThis method uses [dset](https://github.com/lukeed/dset#usage) under the hood, so please read the docs there for more info.\n\n```js\n// with the system setup, as above\ntokens.set('forms.inputBackground', '#fff')\n\n// then use it later like so:\ntokens.get('forms.inputBackground')\n```\n\n## API helper methods\n\nThe helper methods make getting values _much_ more simple.\n\n- [`tokens.fontSize()` or `tokens.fs()`](#tokensfontsize-or-tokensfs---get-font-size-values) - Get font-size values\n- [`tokens.color()`](#tokenscolor---get-color-palette-values) - Get color palette values\n- [`tokens.brand()`](#tokensbrand---get-brand-palette-values) - Get brand palette values\n- [`tokens.bp()`](#tokensbp---get-responsive-breakpoint-values) - Get responsive breakpoint values\n- [`tokens.z()`](#tokensz---get-z-index-values) - Get `z-index` values\n- [`tokens.spacing()` or `tokens.space()`](#tokensspacing-or-tokensspace---get-spacing-values) - Get spacing values\n\n### `tokens.fontSize()` or `tokens.fs()` - Get font-size values\n\nThe `tokens.fontSize()` method is a short-hand for the `tokens.get()` method. It can be used to get a value from the `type.sizes` object.\n\nThe `type.sizes` object’s values can be formatted in a few ways:\n\n- as a string with any unit of measurement, e.g. `s: '13px'` / `px`, `rem` or `em`\n- as a template string using another function to calculate font-sizes, for example a modular-scale, e.g. `${ms(0, modularscale)}px`. **Note: this uses an external package, [modularscale-js](https://github.com/modularscale/modularscale-js)**\n\n```js\n// define some values// type.sizes object\nsizes: {\n  xs: '16px',\n  s: '20px',\n  base: '30px',\n  m: '36px',\n  l: '42px',\n  xl: '50px',\n  xxl: '58px',\n},\n\n// retrieve some values\ntokens.fontSize('xl')\ntokens.fs('xl') // `tokens.fs()` is a short-hand alias for `tokens.fontSize()`\ntokens.fs('xl', true) // return font-size in px regardless of `option.fontSizeUnit` value\n```\n\n#### Modular scale\n\n**Note: v0.x.x had modular scale functionality built-in, in v1.x.x, this has been removed to reduce file-size for those that don't need a modular scale.**\n\nTo make use of a modular scale, there are a few things that need to be done:\n\n- install a modular scale converter package, like [modularscale-js](https://github.com/modularscale/modularscale-js)\n- define your modular scale options outside of your design-system object\n- add the modular scale values to the `type.sizes` object\n\n```js\nconst modularscale = {\n  base: [30],\n  ratio: 1.5,\n}\n\n// design system\n...\nsizes: {\n  xs: `${ms(-2, modularscale)}px`,\n  s: `${ms(-1, modularscale)}px`,\n}\n...\n```\n\nTesting and remembering the values from your modular scale can be tricky, there are two options that can be used, either:\n\n- visit [modularscale.com](https://modularscale.com) and enter your settings, you can then view all the type sizes on the scale you specified\n- or, add the below snippet to your code to print out the values of your scale:\n\n```js\nconst sizes = tokens.get('type.sizes')\nObject.keys(sizes).forEach(item => {\n  console.log(item, ':', sizes[item]) // e.g. `base : 20px`\n})\n```\n\n### Color palette\n\nThere are two possible ways to access color information: the color palette and the brand colors.\n\nThe color palette is intended to contain all the colors (and their shades) that your app will use, and the brand palette _should_ contain the specific colors that your brand uses.\n\nTwo methods can be used to retrieve the values, these are: `tokens.color()` and `tokens.brand()`, below is what the data looks like for them:\n\n```js\ncolors: {\n  // With a color palette like this:\n  colorPalette: {\n    bright: {\n      base: '#F9FAFB',\n      dark: '#F4F6F8',\n      darker: '#DFE4E8',\n    },\n\n    dark: {\n      base: '#212B35',\n      light: '#454F5B',\n      lighter: '#637381',\n    },\n  },\n\n  // With a brand palette like this:\n  brand: {\n    red: '#e82219',\n    deeporange: '#ff7200',\n    orange: '#ff9500',\n    green: '#c4d000',\n    teal: '#1aa5c8',\n    navy: '#0052da',\n  }\n},\n```\n\n#### `tokens.color()` - Get color palette values\n\nThe `tokens.color()` function gets values from the `colorPalette` object. It assumes every color has a `base` property and other properties for different shades of the same color.\nThis is a short-hand for the `tokens.get()` function.\n\n```js\n// Get values like this:\ntokens.color('bright') // #F9FAFB - the `base` key is the default, so it is not needed\ntokens.color('bright', 'dark')\ntokens.color('background.extra.dark') // Accepts a path (in this case the second `variant` argument is ignored)\n```\n\n#### `tokens.brand()` - Get brand palette values\n\nThe `tokens.brand()` function gets values from the `colors.brand` object.\nThis is a short-hand for the `tokens.get()` function.\n\n```js\n// Get brand values like this:\ntokens.brand('orange')\ntokens.brand('pink')\ntokens.brand('primary.blue') // it is possible to nest this object as much as you like\n```\n\n### `tokens.bp()` - Get responsive breakpoint values\n\nThe `tokens.bp()` method is a short-hand for the `tokens.get()` method. It can be used to get a breakpoint from the `breakpoints` object.\n\n```js\ntokens.bp('m')\n```\n\n### `tokens.z()` - Get `z-index` values\n\nThe `tokens.z()` method is a short-hand for the `tokens.get()` method. It can be used to get a breakpoint from the `zIndex` object.\n\n```js\ntokens.z('low')\n```\n\n### `tokens.spacing()` or `tokens.space()` - Get spacing values\n\nThe `tokens.spacing()` method returns a value from your `spacing.scale` definition. **The spacing data could either be an array, or an object.**\n\n- If an array, it takes an `index` (number) for that array e.g. `tokens.space(2)`. This variant adds `px` to the end of the string, this will be deprecated in v2.0.0.\n- If an object, it takes a `key` (string) for the item in that object e.g. `tokens.space('m')`\n\n#### Array example:\n\n```js\nscale: [0, 8, 16, 24, 32, 40]\n\ntokens.spacing(2) // '16px'\n// Note: `tokens.space(2)` can also be used\n```\n\n#### Object example:\n\n```js\nscale: {\n  s: '10rem',\n  m: '100rem',\n  l: '1000rem',\n}\n\ntokens.spacing('m') // '100rem'\n// Note: `tokens.space('m')` can also be used\n```\n\n### Calculations\n\nThe framework currently provides a few calculation functions, `multiply`, `toPx` and `pxTo`:\n\n#### `tokens.multiply()`\n\n```js\ntokens.multiply(10, 2) // 20\n\n// you can pass in another value from the system\ntokens.multiply(tokens.get('spacing.baseline'), 2)\n\n// or just use the key from the system\n// the initial value will always be run through `parseFloat()`\ntokens.multiply('spacing.baseline', 2)\n```\n\n#### `pxTo()`\n\nConverts `px` to `rem` or `em`\n\n```js\nimport { pxTo } from 'design-system-utils'\n// pxTo(fontSize, baseFontSize, unit - 'rem'/'em')\npxTo(12, 20, 'rem') // 0.6rem\npxTo(12, 20, 'em') // 0.6em\n```\n\n#### `toPx()`\n\nConverts `rem` or `em` value to `px`\n\n```js\nimport { toPx } from 'design-system-utils'\n// toPx(fontSize, baseFontSize)\ntoPx('1.875rem', 16) // 30px\ntoPx('1.875em', 16) // 30px\n```\n\n#### `parseUnit()`\n\nParses a number and unit string, and returns the unit used\n\n```js\nimport { parseUnit } from 'design-system-utils'\nparseUnit('1.875rem') // 'rem'\nparseUnit('18px') // 'px'\n```\n\n## Usage with Typescript\n\nTypescript types and interfaces should be imported as named imports.\n\nSee all the type definitions in the [types.ts](https://github.com/mrmartineau/design-system-utils/blob/master/src/types.ts) file. Here are all the exported types that can be extended:\n\n```\n{\n  System,\n  SystemOptions,\n  SystemBreakpoints,\n  SystemZIndex,\n  SystemFontSizes,\n  SystemSpacing,\n  SystemScale,\n  SystemColorPalette,\n  SystemBrandPalette,\n  SystemType,\n  SystemOptionalKey,\n}\n```\n\nBelow is an example where a new item (`baseline`) is added to the `spacing` object.\n\n```ts\nimport DesignSystem, { System, SystemOptions, SystemSpacing } from '../index'\n\ninterface MySystemSpacing extends SystemSpacing {\n  baseline: number\n}\n\ninterface MySystem extends System {\n  spacing: MySystemSpacing\n}\n\nconst Tokens: MySystem = {\n  ...\n  ...\n\n  spacing: {\n    scale: [0, 8, 16, 24, 32, 40],\n    baseline: 20,\n  },\n}\n\nexport default new DesignSystem<MySystem, SystemOptions>(Tokens)\n```\n\n## Demo & examples\n\nI created a demo on [codesandbox.io](https://codesandbox.io/s/6wrp94x7kk), it includes examples of using the design-system utils with [emotion](https://emotion.sh/), [styled-components](https://www.styled-components.com/) and [glamorous](https://glamorous.rocks). There is also a basic example [here](example/).\n\n## Licence\n\nMIT &copy; [Zander Martineau](https://zander.wtf)\n","maintainers":[{"name":"mrmartineau","email":"z@martineau.tv"}],"time":{"modified":"2022-06-15T01:39:10.548Z","created":"2017-09-04T09:19:55.418Z","0.0.1":"2017-09-04T09:19:55.418Z","0.0.2":"2017-09-23T05:45:41.598Z","0.1.0":"2017-09-25T06:35:40.288Z","0.2.0":"2017-10-08T08:07:00.091Z","0.2.1":"2017-10-08T08:19:15.724Z","0.3.0":"2017-10-29T08:48:45.927Z","0.4.0":"2017-11-02T23:32:17.050Z","0.5.0":"2017-11-05T14:32:32.478Z","0.6.0":"2017-11-05T16:15:04.136Z","0.7.0":"2017-11-06T00:37:39.163Z","0.8.0":"2017-11-09T22:58:15.669Z","0.9.0":"2017-11-16T23:29:29.114Z","0.10.0":"2017-11-24T14:24:56.781Z","0.11.0":"2017-12-12T17:14:57.616Z","0.11.1":"2017-12-12T17:21:51.119Z","0.11.2":"2018-02-06T22:29:52.796Z","0.11.3":"2018-02-16T14:10:49.176Z","0.12.0":"2018-03-03T10:19:57.789Z","0.12.1":"2018-04-06T22:59:07.735Z","1.0.0":"2018-06-05T09:01:32.859Z","1.0.1":"2018-06-05T18:33:26.167Z","1.1.0":"2018-09-27T09:04:12.575Z","1.1.1":"2018-09-27T13:15:35.730Z","1.2.0":"2018-10-16T11:35:23.659Z","1.5.0-0":"2019-01-22T06:31:59.279Z","1.3.0":"2019-01-25T10:17:27.964Z","1.3.1":"2019-02-05T12:46:47.933Z","1.4.0":"2019-02-27T15:01:30.828Z","1.5.0-1":"2019-03-02T20:52:23.322Z","1.5.0":"2019-03-02T22:52:43.392Z"},"keywords":["css-in-js","glamorous","styled-components","emotion","styled-jsx","CSS"],"author":{"name":"Zander Martineau"},"license":"MIT","readmeFilename":"readme.md","users":{"mrmartineau":true},"repository":{"type":"git","url":"https://github.com/mrmartineau/design-system-utils"}}