{"_id":"@aybolit/bulma","_rev":"1-c1515f4a19b700829be93615dfe270de","name":"@aybolit/bulma","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@aybolit/bulma","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/bulma"},"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 Bulma is a set of the web components inspired by [Bulma](https://bulma.io) CSS framework.","bugs":{"url":"https://github.com/web-padawan/aybolit/issues"},"homepage":"https://github.com/web-padawan/aybolit#readme","_id":"@aybolit/bulma@0.1.0","_nodeVersion":"10.14.0","_npmVersion":"lerna/3.13.1/node@v10.14.0+x64 (darwin)","dist":{"integrity":"sha512-4SQVk5tycI0xYmDxQjnSFboc7helqJub5cJ9hptwXCpneYCBw8ynOjjbHr565p7OYy0cVclEjQaryliwHFAmAA==","shasum":"24dac2dbbf1a19f307336ee4195651f47d895727","tarball":"https://registry.npmjs.org/@aybolit/bulma/-/bulma-0.1.0.tgz","fileCount":16,"unpackedSize":168857,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJciBkACRA9TVsSAnZWagAAqRgQAKSjtoUopECQqgbgPVm2\nnXTomNWjHtHjRpVZkWWqRyilRzkNVUMcbBPlXKlVH515TDmSj0lr3KorSO6m\nglUYUM99K//fDCjDGhKws1n9HQjw04ZHYIJdm91rbIodhBo9sDazK99S5nbI\neTwdBQiZDP5J4yAdYz/tQDRqrbXNxqrvaahevJqFsUFkGGfAo/6ZGfMOX4+L\nVRFFrQR/AhoPEnGvSSMAUUGowpuZCqXihnKepKENqfo5HGQCeZXKrf9AWuqm\nCmFpD2mue9lQGRLVu70Oc4mM25mYy80zAmOfgyRVDoMHNXk+PMbRVffafEE8\nnLuBqdBcxI+04uXK7JBGjHKeJhHEuzR8VEhy2IuMu6ENqnW0FuR7VObQqyHv\nCx7e8THVt2GGxkcCNaGi+dNNzWshhIB4Sc9CT/Dnmpp8kSidHrRQc8u6yzbI\nlN1JwrulKgcxztuSb8oEjrN/ylqHDNOIzmEORbFHPlZQDXlYF9oC+GLhaqh6\n2es6tUD/JBlA9ZhMhNxOPftFMNrzbszhAcPB2ds7DoXwcBXqeLKxg8Ec1sdG\neJEgHwSrfs0a91JNFJeOm3mtlpFZIky5VgSuKxtRDOcLkGeP0nD+qWXjJDGY\nMEIg/hDadnZb+HytARlIAIPdfaxzfvGgto6CF+g7GKSwwf0JJBaqSwiVfpqa\nYrxg\r\n=14bN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD5mmihBzBu7p+IVIj9/3RpzFvnN3WdleJ5cq052CeiQQIhAMFyxL1sVOBCL8OyWiJq6VKAcfpBPMdXApyag/wdxZOR"}]},"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/bulma_0.1.0_1552423168051_0.8842140632088731"},"_hasShrinkwrap":false}},"time":{"created":"2019-03-12T20:39:27.768Z","0.1.0":"2019-03-12T20:39:28.371Z","modified":"2022-04-04T17:14:18.703Z"},"maintainers":[{"name":"web-padawan","email":"serguey.kulikov@gmail.com"}],"description":"Aybolit Bulma is a set of the web components inspired by [Bulma](https://bulma.io) CSS framework.","homepage":"https://github.com/web-padawan/aybolit#readme","repository":{"type":"git","url":"git+https://github.com/web-padawan/aybolit.git","directory":"packages/bulma"},"author":{"name":"Serhii Kulykov","email":"serguey.kulikov@gmail.com"},"bugs":{"url":"https://github.com/web-padawan/aybolit/issues"},"license":"MIT","readme":"# Aybolit Bulma\n\nAybolit Bulma is a set of the web components inspired by [Bulma](https://bulma.io) CSS framework.\n\n## Overview\n\nBulma framework and [Bulma-extensions](https://wikiki.github.io) are used as a base, but Aybolit does not preserve all the original CSS and makes certain adjustments. The main idea behind these changes is flexible theming support, with reasonable bundle size.\n\n## Installation\n\nAybolit Bulma is available as [npm package](https://www.npmjs.com/package/@aybolit/bulma):\n\n```sh\n# with npm\nnpm i @aybolit/bulma --save\n\n# with yarn\nyarn add @aybolit/bulma\n```\n\nImport either all or individual components:\n\n```js\n// all components\nimport '@aybolit/bulma';\n\n// button only\nimport { AbuButton } from '@aybolit/bulma';\n```\n\nYou can also use get Aybolit Bulma from the CDN:\n\n```html\n<script src=\"https://unpkg.com/@aybolit/bulma@latest?module\" type=\"module\"></script>\n```\n\n## Components\n\n- [x] [Button](https://bulma.io/documentation/elements/button/)\n  - [x] [Colors](https://bulma.io/documentation/elements/button/#colors)\n  - [x] [Sizes](https://bulma.io/documentation/elements/button/#sizes)\n  - [x] Outline style\n  - [x] Rounded style\n  - [ ] Fullwidth style - not currently supported.\n  - [ ] Inverted style - not currently supported.\n  - [ ] Loading state - not currently supported.\n  - [ ] Static state - not planned.\n- [x] [Checkbox](https://wikiki.github.io/form/checkradio/)\n  - [x] [Colors](https://wikiki.github.io/form/checkradio/#colors)\n  - [x] [Sizes](https://wikiki.github.io/form/checkradio/#sizes)\n  - [x] Filled style\n  - [ ] Rounded style - not planned.\n  - [ ] Block style - not planned.\n  - [ ] No-border style - not planned.\n- [x] [Progress](https://bulma.io/documentation/elements/progress/)\n  - [x] [Colors](https://bulma.io/documentation/elements/progress/#colors)\n  - [x] [Sizes](https://bulma.io/documentation/elements/progress/#sizes)\n  - [x] [Indeterminate](https://bulma.io/documentation/elements/progress/#indeterminate)\n- [x] [Range](https://wikiki.github.io/form/slider/)\n  - [x] [Colors](https://wikiki.github.io/form/slider/#colors)\n  - [x] [Sizes](https://wikiki.github.io/form/slider/#sizes)\n  - [x] Rounded style\n  - [ ] Vertical orientation - not currently supported.\n- [x] [Switch](https://wikiki.github.io/form/switch/)\n  - [x] [Colors](https://wikiki.github.io/form/switch/#colors)\n  - [x] [Sizes](https://wikiki.github.io/form/switch/#sizes)\n  - [x] Outlined style\n  - [x] Rounded style\n  - [ ] Thin style - not currently supported.\n\n## Examples\n\n```html\n<!-- Button -->\n<abu-button>Button</abu-button>\n<abu-button theme=\"primary\">Primary theme</abu-button>\n<abu-button size=\"small\">Small size</abu-button>\n<abu-button link=\"https://example.com\">Link</abu-button>\n\n<!-- Checkbox -->\n<abu-checkbox>Unchecked</abu-checkbox>\n<abu-checkbox checked>Checked</abu-checkbox>\n<abu-checkbox indeterminate>Indeterminate</abu-checkbox>\n\n<!-- Progress -->\n<abu-progress value=\"50\" max=\"100\"></abu-progress>\n\n<!-- Range -->\n<abu-range min=\"0\" max=\"10\" value=\"5\"></abu-range>\n\n<!-- Switch -->\n<abu-switch>Unchecked</abu-switch>\n<abu-switch checked>Checked</abu-switch>\n```\n\n## Theme Variants\n\nAll the components can be themed using `theme` attribute with one of the following values:\n\n- `primary`\n- `info`\n- `success`\n- `warning`\n- `danger`\n\nThe colors for each theme variant can be adjusted using custom CSS properties listed below.\n\n## Custom CSS Properties\n\nThe following custom CSS properties are available for styling.\n\n### General Theme\n\nChanging these properties affect all the components at the level of cascade where they are specified. Keep in mind that lightness level is used as base for automatic contrast adjustment, so changing it might affect e.g. buttons text color.\n\n| Property | Description | Fallback |\n|----------|-------------|----------|\n| `--abu-primary-h` | Primary color hue | 171 |\n| `--abu-primary-s` | Primary color saturation | 100 |\n| `--abu-primary-l` | Primary color lightness | 41 |\n| `--abu-info-h` | Info color hue | 204 |\n| `--abu-info-s` | Info color saturation | 86 |\n| `--abu-info-l` | Info color lightness | 48 |\n| `--abu-success-h` | Success color hue | 141 |\n| `--abu-success-s` | Success color saturation | 71 |\n| `--abu-success-l` | Success color lightness | 48 |\n| `--abu-warning-h` | Warning color hue | 48 |\n| `--abu-warning-s` | Warning color saturation | 100 |\n| `--abu-warning-l` | Warning color lightness | 67 |\n| `--abu-danger-h` | Danger color hue | 348 |\n| `--abu-danger-s` | Danger color saturation | 100 |\n| `--abu-danger-l` | Danger color lightness | 48 |\n\n### Individual Components\n\nThese properties expose certain colors not covered by general theme settings.\n\n| Component | Property | Description | Fallback |\n|-----------|----------|-------------|----------|\n| Button    | `--abu-button-bg-color` | Un-themed button background | #fff |\n| Button    | `--abu-button-border-color` | Un-themed button border color | #dbdbdb |\n| Button    | `--abu-button-color` | Un-themed button color | #363636 |\n| Button    | `--abu-button-active-border-color` | Un-themed active button border color | #4a4a4a |\n| Button    | `--abu-button-hover-border-color` | Un-themed hover button border color | #b5b5b5 |\n| Checkbox  | `--abu-checkbox-border-color` | Unchecked state border color | #dbdbdb |\n| Progress  | `--abu-progress-bar-color` | Progress bar color | #dbdbdb |\n| Progress  | `--abu-progress-value-color` | Un-themed progress value color | #4a4a4a |\n| Range     | `--abu-range-thumb-bg` | Thumb background | #fff |\n| Range     | `--abu-range-track-bg` | Track background | #b5b5b5 |\n| Switch    | `--abu-switch-thumb-bg` | Thumb background | #fff |\n| Switch    | `--abu-switch-track-bg` | Off state track background | #b5b5b5 |\n","readmeFilename":"README.md"}