{"_id":"@aybolit/white-label","_rev":"1-546fcef843988711e062eeec902344b9","name":"@aybolit/white-label","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@aybolit/white-label","version":"0.1.0","author":{"name":"Serhii Kulykov","email":"serguey.kulikov@gmail.com"},"license":"MIT","main":"src/index.js","publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/web-padawan/aybolit.git","directory":"packages/white-label"},"dependencies":{"@aybolit/core":"^0.1.0","lit-element":"^2.0.1"},"devDependencies":{"@pika/pack":"^0.3.0","@pika/plugin-build-web":"^0.3.0","@pika/plugin-bundle-web":"^0.3.0","@pika/plugin-standard-pkg":"^0.3.0"},"@pika/pack":{"pipeline":[["@pika/plugin-standard-pkg"],["@pika/plugin-build-web"],["@pika/plugin-bundle-web"]]},"scripts":{"dist":"pack build"},"gitHead":"991361f6365fce4319f736521597067d3714b28e","description":"Aybolit White Label is a set of the web components with bare minimum of styles.","bugs":{"url":"https://github.com/web-padawan/aybolit/issues"},"homepage":"https://github.com/web-padawan/aybolit#readme","_id":"@aybolit/white-label@0.1.0","_nodeVersion":"10.14.0","_npmVersion":"lerna/3.13.1/node@v10.14.0+x64 (darwin)","dist":{"integrity":"sha512-ZZ2ej+8gipWCbjV9fO+/eUlaJmYX5LyVewLnUkkBDSNhG0CxsDPcWUY4P1n3wckdxPaJrhrhesP1ivAdEd++aw==","shasum":"97b979b2f7f7f842fbc05a32621bb4aa0c4d13ed","tarball":"https://registry.npmjs.org/@aybolit/white-label/-/white-label-0.1.0.tgz","fileCount":15,"unpackedSize":129428,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJciBkACRA9TVsSAnZWagAAckMP/1Uei1xrBio0nCDRgU7+\nf+Jn20FdM5Xmf+dR9+04Z/ExIPaSzLaaTv2S4rT1HU9eVCh2fbZ5LOh6nT3P\nGbD2gscmisakyJbjBapL/KRsnDU4fTLmfNMMxFh2Z7LqV/XsaDpll9gwkOhK\n5M/s1WD54H/UN4O3NcyV1QOoT0isjg3PQUfKxXbXbCyK2TXrTIbD7VvdSWeA\n6vkHQSQuxJkKKfuAU45MuP47XN+yZx/DymCgqxTANzfExOCrsMeYGqb1RrzC\ntcXjrENaGCIsiFHpLhKjLJAXfoPr2MxjUpx4cLLOjf25HjR+zuL/Gwhli/en\nXfQ1yP4yHmHcsa1ziBBH/n/24fb1xbhH2xybnFrOcy3GForNTg428kQ0rBNe\nPS89DlywuF/pUJGoFsKNWINetc1tVhRDyjIgGj9o3clIXHiG8LdodxdV0zEf\nrGaGU05u/ElaMKmc4ST4iLswweVPgaUmsstP+EXORIQeQO88aK/UcaBkw4N8\nAUNL2uhVnUcgMX4p0ku0XqLVBPLIexNoR72xF/IOsyJ8W1IZ3zzk6UBPYtYz\nh9Ely6kqSFf1URO/zVsTUFuR6f4g/5VeHDTh+3Vf9Z8aBNO0EQm7mcgZJjRo\nfF/ONDi5IgyTTvI+BEWwHaK64R6ddNiZ5dTsI0rVXOwlnhtgC+SxIiORE2gS\nQhFa\r\n=Rkb7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICt2z2ELWZMexRWQyhcYh8+Nfhi7Lck/WKodLJibaEVwAiEA7NnqbR41lT6ZZwyblJCeu0LZZ7X5Uka+2JvZpL9OLnI="}]},"maintainers":[{"name":"web-padawan","email":"serguey.kulikov@gmail.com"}],"_npmUser":{"name":"web-padawan","email":"serguey.kulikov@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/white-label_0.1.0_1552423167795_0.4326077489765039"},"_hasShrinkwrap":false}},"time":{"created":"2019-03-12T20:39:27.566Z","0.1.0":"2019-03-12T20:39:27.927Z","modified":"2022-04-04T17:14:19.203Z"},"maintainers":[{"name":"web-padawan","email":"serguey.kulikov@gmail.com"}],"description":"Aybolit White Label is a set of the web components with bare minimum of styles.","homepage":"https://github.com/web-padawan/aybolit#readme","repository":{"type":"git","url":"git+https://github.com/web-padawan/aybolit.git","directory":"packages/white-label"},"author":{"name":"Serhii Kulykov","email":"serguey.kulikov@gmail.com"},"bugs":{"url":"https://github.com/web-padawan/aybolit/issues"},"license":"MIT","readme":"# Aybolit White Label\n\nAybolit White Label is a set of the web components with bare minimum of styles.\n\n## Overview\n\nAybolit White Label is opinionated library not based on any CSS framework. The idea behind it is to provide a meaningful set of default styles easy to extend and override. You might consider it a boilerplate for building your next  design system using Web Components. Unlike other Aybolit implementations, White Label doesn't provide any custom CSS properties.\n\n## Installation\n\nAybolit White Label is available as [npm package](https://www.npmjs.com/package/@aybolit/white-label):\n\n```sh\n# with npm\nnpm i @aybolit/white-label --save\n\n# with yarn\nyarn add @aybolit/white-label\n```\n\nImport either all or individual components:\n\n```js\n// all components\nimport '@aybolit/white-label';\n\n// button only\nimport { AbwButton } from '@aybolit/white-label';\n```\n\nYou can also use get Aybolit White Label from the CDN:\n\n```html\n<script src=\"https://unpkg.com/@aybolit/white-label@latest?module\" type=\"module\"></script>\n```\n\n## Components\n\n- [x] Button\n- [x] Checkbox\n- [x] Progress\n- [x] Range\n- [x] Switch\n\n## Examples\n\n```html\n<!-- Button -->\n<abw-button>Button</abw-button>\n<abw-button disabled>Disabled</abw-button>\n<abw-button link=\"https://example.com\">Link</abw-button>\n\n<!-- Checkbox -->\n<abw-checkbox>Unchecked</abw-checkbox>\n<abw-checkbox checked>Checked</abw-checkbox>\n<abw-checkbox indeterminate>Indeterminate</abw-checkbox>\n\n<!-- Progress (indeterminate) -->\n<abw-progress></abw-progress>\n\n<!-- Progress (determinate) -->\n<abw-progress value=\"50\" max=\"100\"></abw-progress>\n\n<!-- Range -->\n<abw-range min=\"0\" max=\"10\" value=\"5\"></abw-range>\n\n<!-- Switch -->\n<abw-switch>Unchecked</abw-switch>\n<abw-switch checked>Checked</abw-switch>\n```\n\n## Extending Components\n\nYou can extend and override white label component like this:\n\n```js\nimport { AbwButton } from '@aybolit/white-label';\nimport { css } from 'lit-element';\n\nclass CustomButton extends AbwButton {\n  static get styles() {\n    return [\n      /* white-label styles */\n      super.styles,\n      /* your own CSS */\n      css`\n        .button {\n          color: var(--my-button-color, #111);\n        }\n      `\n    ];\n  }\n}\n\ncustomElements.define('custom-button', CustomButton);\n```\n\n**Note:** white label components register themselves in global CustomElementRegistry via `customElements.define()`. If you want to avoid this, import the component styles only, and use them with the base class from [`@aybolit/core`](https://github.com/web-padawan/aybolit/tree/master/packages/core):\n\n```js\nimport { ButtonElement } from '@aybolit/core';\nimport { abwButtonStyles } from '@aybolit/white-label';\nimport { css } from 'lit-element';\n\nclass CustomButton extends ButtonElement {\n  static get styles() {\n    return [\n      /* core styles */\n      super.styles,\n      /* white-label styles */\n      abwButtonStyles,\n      /* your own CSS */\n      css`\n        .button {\n          color: var(--my-button-color, #111);\n        }\n      `\n    ];\n  }\n}\n\ncustomElements.define('custom-button', CustomButton);\n```\n","readmeFilename":"README.md"}