[
  {
    "path": ".editorconfig",
    "content": "# editorconfig.org\n\nroot = true\n\n[*]\ncharset = utf-8\nindent_size = 2\nindent_style = space\ninsert_final_newline = true\ntrim_trailing_whitespace = true\n"
  },
  {
    "path": ".gitignore",
    "content": "node_modules\nnpm-debug.log\n.*\n!.editorconfig\n!.gitignore\n!.storybook\n"
  },
  {
    "path": "CHANGELOG.md",
    "content": "# Changes to knopf.css\n\n### 0.0.0 (August 20th, 2019)\n\n- Initial release\n"
  },
  {
    "path": "CODE_OF_CONDUCT.md",
    "content": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nIn the interest of fostering an open and welcoming environment, we as\ncontributors and maintainers pledge to making participation in our project and\nour community a harassment-free experience for everyone, regardless of age, body\nsize, disability, ethnicity, sex characteristics, gender identity and expression,\nlevel of experience, education, socio-economic status, nationality, personal\nappearance, race, religion, or sexual identity and orientation.\n\n## Our Standards\n\nExamples of behavior that contributes to creating a positive environment\ninclude:\n\n* Using welcoming and inclusive language\n* Being respectful of differing viewpoints and experiences\n* Gracefully accepting constructive criticism\n* Focusing on what is best for the community\n* Showing empathy towards other community members\n\nExamples of unacceptable behavior by participants include:\n\n* The use of sexualized language or imagery and unwelcome sexual attention or\n advances\n* Trolling, insulting/derogatory comments, and personal or political attacks\n* Public or private harassment\n* Publishing others' private information, such as a physical or electronic\n address, without explicit permission\n* Other conduct which could reasonably be considered inappropriate in a\n professional setting\n\n## Our Responsibilities\n\nProject maintainers are responsible for clarifying the standards of acceptable\nbehavior and are expected to take appropriate and fair corrective action in\nresponse to any instances of unacceptable behavior.\n\nProject maintainers have the right and responsibility to remove, edit, or\nreject comments, commits, code, wiki edits, issues, and other contributions\nthat are not aligned to this Code of Conduct, or to ban temporarily or\npermanently any contributor for other behaviors that they deem inappropriate,\nthreatening, offensive, or harmful.\n\n## Scope\n\nThis Code of Conduct applies both within project spaces and in public spaces\nwhen an individual is representing the project or its community. Examples of\nrepresenting a project or community include using an official project e-mail\naddress, posting via an official social media account, or acting as an appointed\nrepresentative at an online or offline event. Representation of a project may be\nfurther defined and clarified by project maintainers.\n\n## Enforcement\n\nInstances of abusive, harassing, or otherwise unacceptable behavior may be\nreported by contacting the project team at me@adiaz.uy. All\ncomplaints will be reviewed and investigated and will result in a response that\nis deemed necessary and appropriate to the circumstances. The project team is\nobligated to maintain confidentiality with regard to the reporter of an incident.\nFurther details of specific enforcement policies may be posted separately.\n\nProject maintainers who do not follow or enforce the Code of Conduct in good\nfaith may face temporary or permanent repercussions as determined by other\nmembers of the project's leadership.\n\n## Attribution\n\nThis Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,\navailable at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html\n\n[homepage]: https://www.contributor-covenant.org\n\nFor answers to common questions about this code of conduct, see\nhttps://www.contributor-covenant.org/faq\n"
  },
  {
    "path": "CONTRIBUTING.md",
    "content": "# Contributing to knopf.css\n\nPlease review this document in order to make the contribution process easy and\neffective for everyone involved.\n\nFollowing these guidelines helps to communicate that you respect the time of\nthe developers managing and developing this project. In return, we will\nreciprocate that respect in addressing your issues, patches, and features.\n\n## Using the issue tracker\n\nThe issue tracker is the preferred channel for [bug reports](#bug-reports),\n[feature requests](#feature-requests) and [pull\nrequests](#pull-requests), but please respect the following restrictions:\n\n* Please **do not** use the issue tracker for personal support requests.\n* Please **do not** derail or troll issues. Keep the discussion on topic and\n  respect the opinions of others.\n\n## Bug reports\n\nA bug is a _demonstrable problem_ caused by the code in this repository.\n\n1. **Use the GitHub issue search** to see if the issue has\n   [already been reported].\n\n2. **Check if the issue has been fixed** by trying to reproduce it using the\n   latest `master` branch in the repository.\n\n3. **Isolate the problem** to create a [live example] of a [reduced test case].\n\nA good bug report shouldn’t leave others needing to chase you up for more\ninformation. Please be as detailed as possible in your report. What is your\nenvironment? What steps will reproduce the issue? What browser(s) and OS\nexperience the problem? What would you expect to be the outcome? All these\ndetails will help people to fix any potential bugs.\n\nExample:\n\n> Short and descriptive example bug report title\n>\n> A summary of the issue and the browser/OS environment in which it occurs. If\n> suitable, include the steps required to reproduce the bug.\n>\n> 1. This is the first step\n> 2. This is the second step\n> 3. Further steps, etc.\n>\n> `<url>` - a link to the reduced test case\n>\n> Any other information you want to share that is relevant to the issue being\n> reported. This might include the lines of code that you have identified as\n> causing the bug, and potential solutions (and your opinions on their\n> merits).\n\n## Feature requests\n\nFeature requests are welcome. Take a moment to find out whether your idea fits\nwith the scope and aims of the project. It’s up to *you* to make a strong case\nto convince the project’s developers of the merits of this feature. Please\nprovide as much detail and context as possible.\n\n## Pull requests\n\nGood pull requests - patches, improvements, new features - are a fantastic\nhelp. They should remain focused in scope and avoid containing unrelated\ncommits.\n\n**Please ask first** before embarking on any significant work, otherwise you\nrisk spending a lot of time working on something that the project’s developers\nmight not want to merge into the project.\n\nPlease adhere to the coding conventions used throughout a project (whitespace,\naccurate comments, etc.) and any other requirements (such as test coverage).\n\nFollow this process if you’d like your work considered for inclusion in the\nproject:\n\n1. To begin: [fork this project], clone your fork, and add our upstream.\n   ```bash\n   # Clone your fork of the repo into the current directory\n   git clone git@github.com:YOUR_USER/knopf.css.git\n\n   # Navigate to the newly cloned directory\n   cd knopf.css\n\n   # Assign the original repo to a remote called \"upstream\"\n   git remote add upstream git@github.com:team-video/knopf.css.git\n\n   # Install the tools necessary for testing\n   npm install\n   ```\n\n2. Create a branch for your feature or fix:\n   ```bash\n   # Move into a new branch for your feature\n   git checkout -b feature/thing\n   ```\n   ```bash\n   # Move into a new branch for your fix\n   git checkout -b fix/something\n   ```\n\n3. If your code follows our practices, then push your feature branch:\n   ```bash\n   # Test current code\n   npm test\n   ```\n   ```bash\n   # Push the branch for your new feature\n   git push origin feature/thing\n   ```\n   ```bash\n   # Or, push the branch for your update\n   git push origin update/something\n   ```\n\n   Be sure to add a test to the `test.html` file if appropriate, and test\n   your change in all supported browsers.\n\n\nNow [open a pull request] with a clear title and description. Remember,\nby submitting a patch, you agree to allow the project owner to license your\nwork under the same license as that used by the project.\n\n## Maintainers\n\nIf you have commit access, please follow this process for merging patches and\ncutting new releases.\n\n### Accepting patches\n\n1. Check that a patch is within the scope and philosophy of the project.\n2. Check that a patch has any necessary tests and a proper, descriptive commit\n   message.\n3. Test the patch locally.\n4. Use GitHub’s merge button with caution or apply the patch locally, squashing\n   any commits.\n\n### Releasing a new version\n\n1. Include all new functional changes in CHANGELOG.md.\n2. Create an annotated tag for the version: `git tag -m \"0.0.0\" 0.0.0`.\n3. Push the changes and tags to GitHub: `git push --tags origin master`\n4. Update the `gh-pages` branch,\n   1. Copy the latest knopf.css and test.html from the master branch into\n      the root directory, the `latest` directory, and a new directory named\n      after the new version: `0.0.0`.\n   2. Update the knopf.css version and supported browsers in `index.html`.\n\n### Semver strategy\n\n[Semver](http://semver.org/) is a widely accepted method for deciding how\nversion numbers are incremented in a project. Versions are written as\nMAJOR.MINOR.PATCH.\n\n[already been reported]: https://github.com/team-video/knopf.css/issues\n[fork this project]:     https://github.com/team-video/knopf.css/fork\n[live example]:          https://codepen.io/pen\n[open a pull request]:   https://help.github.com/articles/using-pull-requests/\n[reduced test case]:     https://css-tricks.com/reduced-test-cases/\n"
  },
  {
    "path": "LICENSE.md",
    "content": "MIT License\n\nCopyright (c) 2019-2020 team-video\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"
  },
  {
    "path": "README.md",
    "content": "# knopf.css\n\nModern, modular, extensible button system designed for both rapid prototyping and production-ready applications.\n\nMade by [Frameable](https://frameableinc.com/), the team behind [Social hour](https://socialhour.com) and [Subtask](https://subtask.co).\n\n## Installation\n\nJust [download](http://knopf.dev/knopf.css.zip) and include the minified stylesheet on your website.</p>\n\n```html\n<link rel=\"stylesheet\" href=\"/knopf.min.css\">\n```\n\nYou could also link to a CDN hosted file.\n\n```html\n<link rel=\"stylesheet\" href=\"https://unpkg.com/knopf.css/knopf.min.css\">\n```\n\n***\n\nOtherwise, you can use your favorite package manager to install it as a dependency.\n\n### Install with npm\n```\nnpm install knopf.css\n```\n\n### Install with yarn\n```\nyarn add knopf.css\n```\n\nAnd then import it wherever you are importing your styles.\n```node\nimport 'knopf.css'\n```\n\n## Usage\n\nBy including **knopf** you get a [bunch of goodies](https://codepen.io/HiroAgustin/full/mdVRdVg) out of the box; however, you should probably customize the styles to meet your design needs, and there are multiple ways of doing just that.\n\n### Override default values\n\nAll of the base values can be changed by overriding the custom properties at root:\n\n```css\n:root {\n  --knopf-hue: 164;\n  --knopf-saturation: 88%;\n  --knopf-luminosity: 28%;\n}\n```\n\n```html\n<button class=\"knopf\">\n  Button\n</button>\n```\n\n### Extend via modifier\n\nYou can also create your own class that sets new values for a particular instance:\n\n```css\n.negative {\n  --knopf-hue: 356;\n  --knopf-saturation: 57%;\n  --knopf-luminosity: 51%;\n}\n```\n\n```html\n<button class=\"knopf negative\">\n  Button\n</button>\n```\n\n### Leverage the cascade\n\nAs with any CSS library, you can override the base class to make it your own. This aproach still lets you take advantage of the existing properties, variables and modifiers.\n\n```css\n.knopf.knopf {\n  --knopf-raised-height: 6px;\n  border-block-end-color: hsl(var(--knopf-hover-background-color));\n  border-block-end-width: var(--knopf-raised-height);\n  margin-block-start: calc(var(--knopf-raised-height) * -1);\n}\n\n.knopf.knopf:hover {\n  --knopf-raised-height: 2px;\n  border-block-end-color: hsl(var(--knopf-active-background-color));\n}\n```\n\n```html\n<button class=\"knopf large wide pill\">\n  Button\n</button>\n```\n\n***\n\nThe same logic is applicable to all of the built-in modifiers, try out the [playground](https://knopf.dev/#Playground) to check them out.\n\nI would also suggest taking a look at the [source code](https://github.com/team-video/knopf.css/blob/main/knopf.css) for the full list of customizable custom properties.\n\nYou can see the full test suite on [this pen](https://codepen.io/HiroAgustin/full/mdVRdVg).\n\n## Contributing\n\nPlease read the [contribution guidelines](CONTRIBUTING.md) in order to make the contribution process easy and effective for everyone involved.\n"
  },
  {
    "path": "knopf.css",
    "content": "html {\n  /* ==========================================================================\n     Color\n     ========================================================================== */\n\n  --knopf-hue: 218;\n  --knopf-saturation: 77%;\n  --knopf-luminosity: 37%;\n\n  /* ==========================================================================\n     Sizes\n     ========================================================================== */\n\n  /* Font */\n  --knopf-font-size-base: 1rem;\n  --knopf-font-size-small: calc(var(--knopf-font-size-base) - 0.25rem);\n  --knopf-font-size-large: calc(var(--knopf-font-size-base) + 0.2rem);\n  --knopf-font-size-huge: calc(var(--knopf-font-size-base) + 0.5rem);\n\n  /* Padding */\n  --knopf-padding-base: 0.375rem;\n  --knopf-padding-small: calc(var(--knopf-padding-base) - 0.125rem);\n  --knopf-padding-large: calc(var(--knopf-padding-base) + 0.125rem);\n  --knopf-padding-huge: calc(var(--knopf-padding-base) + 0.375rem);\n\n  /* Icon */\n  --knopf-icon-size-base: 1.125rem;\n  --knopf-icon-size-small: calc(var(--knopf-icon-size-base) - 0.25rem);\n  --knopf-icon-size-large: calc(var(--knopf-icon-size-base) + 0.375rem);\n  --knopf-icon-size-huge: calc(var(--knopf-icon-size-base) + 0.625rem);\n\n  /* ==========================================================================\n     Initial\n     ========================================================================== */\n\n  /* Size */\n  --knopf-font-size: var(--knopf-font-size-base);\n  --knopf-padding: var(--knopf-padding-base);\n  --knopf-icon-size: var(--knopf-icon-size-base);\n\n  /* Border */\n  --knopf-border-radius: 0.33em;\n  --knopf-border-style: solid;\n  --knopf-border-width: 1px;\n  --knopf-border-alpha: 0%;\n\n  /* Text */\n  --knopf-font-family: inherit;\n  --knopf-font-weight: 500;\n  --knopf-line-height: 1.5;\n  --knopf-align-items: center;\n  --knopf-justify-content: center;\n  --knopf-text-decoration-line: none;\n  --knopf-text-decoration-color: currentColor;\n  --knopf-text-transform: none;\n\n  /* Flex */\n  --knopf-display: inline-flex;\n  --knopf-flex-direction: row;\n\n  /* Group */\n  --knopf-group-direction: row;\n\n  /* Misc */\n  --knopf-background-image: none;\n  --knopf-box-shadow: none;\n  --knopf-foreground-color: 0 0% 100%;\n  --knopf--position: relative;\n  --knopf-transition: all 150ms ease-in-out;\n}\n\n/* ==========================================================================\n   Class\n   ========================================================================== */\n\n.knopf {\n  /* Colors */\n  --knopf-color: var(--knopf-hue) var(--knopf-saturation) var(--knopf-luminosity);\n\n  /* Light */\n  --knopf-color-light: var(--knopf-hue) var(--knopf-saturation) calc(var(--knopf-luminosity) + 10%);\n  --knopf-color-lighter: var(--knopf-hue) var(--knopf-saturation) calc(var(--knopf-luminosity) + 15%);\n\n  /* Dark */\n  --knopf-color-dark: var(--knopf-hue) var(--knopf-saturation) calc(var(--knopf-luminosity) - 10%);\n  --knopf-color-darker: var(--knopf-hue) var(--knopf-saturation) calc(var(--knopf-luminosity) - 15%);\n\n  /* Spacing */\n  --knopf-padding-block: var(--knopf-padding);\n  --knopf-padding-inline: calc(var(--knopf-padding) * 2);\n\n  /* Default */\n  --knopf-background-alpha: 100%;\n  --knopf-background-color: var(--knopf-color);\n  --knopf-border-color: var(--knopf-color);\n  --knopf-gradient-from: var(--knopf-color-light);\n  --knopf-gradient-to: var(--knopf-color-dark);\n  --knopf-text-color: var(--knopf-foreground-color);\n  --knopf-text-alpha: 100%;\n\n  /* Hover */\n  --knopf-hover-background-alpha: 100%;\n  --knopf-hover-background-color: var(--knopf-color-dark);\n  --knopf-hover-border-color: var(--knopf-color-dark);\n  --knopf-hover-gradient-from: var(--knopf-color-lighter);\n  --knopf-hover-gradient-to: var(--knopf-color);\n  --knopf-hover-text-color: var(--knopf-foreground-color);\n  --knopf-hover-text-alpha: 100%;\n\n  /* Active */\n  --knopf-active-background-alpha: 100%;\n  --knopf-active-background-color: var(--knopf-color-darker);\n  --knopf-active-border-color: var(--knopf-color-darker);\n  --knopf-active-gradient-from: var(--knopf-color-dark);\n  --knopf-active-gradient-to: var(--knopf-color);\n  --knopf-active-text-color: var(--knopf-foreground-color);\n  --knopf-active-text-alpha: 100%;\n\n  /* Properties */\n  accent-color: hsl(var(--knopf-color));\n  align-items: var(--knopf-align-items);\n  background-color: var(--knopf-named-background-color, hsl(var(--knopf-background-color) / var(--knopf-background-alpha)));\n  background-image: var(--knopf-background-image);\n  background-origin: border-box;\n  border-color: hsl(var(--knopf-border-color) / var(--knopf-border-alpha));\n  border-radius: var(--knopf-border-radius);\n  border-style: var(--knopf-border-style);\n  border-width: var(--knopf-border-width);\n  box-shadow: var(--knopf-box-shadow);\n  box-sizing: border-box;\n  color: hsl(var(--knopf-text-color) / var(--knopf-text-alpha));\n  cursor: pointer;\n  display: var(--knopf-display);\n  flex-direction: var(--knopf-flex-direction);\n  font-family: var(--knopf-font-family);\n  font-size: var(--knopf-font-size, inherit);\n  font-weight: var(--knopf-font-weight);\n  line-height: var(--knopf-line-height);\n  justify-content: var(--knopf-justify-content);\n  padding-block: var(--knopf-padding-block);\n  padding-inline: var(--knopf-padding-inline);\n  position: var(--knopf--position);\n  text-decoration-color: var(--knopf-text-decoration-color);\n  text-decoration-line: var(--knopf-text-decoration-line);\n  text-transform: var(--knopf-text-transform);\n  transition: var(--knopf-transition);\n}\n\n/* ==========================================================================\n   Types\n   ========================================================================== */\n\n.knopf.inverse {\n  /* base */\n  --knopf-background-alpha: 0%;\n  --knopf-text-color: var(--knopf-color);\n\n  /* hover */\n  --knopf-hover-background-alpha: 100%;\n  --knopf-hover-background-color: var(--knopf-color);\n  --knopf-hover-text-color: var(--knopf-foreground-color);\n\n  /* active */\n  --knopf-active-background-alpha: 100%;\n  --knopf-active-background-color: var(--knopf-color-dark);\n  --knopf-active-text-color: var(--knopf-foreground-color);\n}\n\n.knopf.flat {\n  /* base */\n  --knopf-background-alpha: 0;\n  --knopf-text-color: var(--knopf-color);\n\n  /* hover */\n  --knopf-hover-background-alpha: 15%;\n  --knopf-hover-background-color: var(--knopf-color);\n  --knopf-hover-text-color: var(--knopf-color-dark);\n\n  /* active */\n  --knopf-active-background-alpha: 25%;\n  --knopf-active-background-color: var(--knopf-color);\n  --knopf-active-text-color: var(--knopf-color-darker);\n}\n\n.knopf.pale {\n  /* base */\n  --knopf-background-alpha: 10%;\n  --knopf-background-color: var(--knopf-color);\n  --knopf-text-color: var(--knopf-color);\n\n  /* hover */\n  --knopf-hover-background-alpha: 20%;\n  --knopf-hover-background-color: var(--knopf-color);\n  --knopf-hover-text-color: var(--knopf-color-dark);\n\n  /* active */\n  --knopf-active-background-alpha: 30%;\n  --knopf-active-background-color: var(--knopf-color);\n  --knopf-active-text-color: var(--knopf-color-darker);\n}\n\n/* ==========================================================================\n   States\n   ========================================================================== */\n\n/* Hover */\n.knopf:hover {\n  --knopf-background-alpha: var(--knopf-hover-background-alpha);\n  --knopf-background-color: var(--knopf-hover-background-color);\n  --knopf-border-color: var(--knopf-hover-border-color);\n  --knopf-gradient-from: var(--knopf-hover-gradient-from);\n  --knopf-gradient-to: var(--knopf-hover-gradient-to);\n  --knopf-text-color: var(--knopf-hover-text-color);\n  --knopf-text-decoration-color: var(--knopf-hover-text-decoration-color);\n}\n\n/* Active */\n.knopf.active {\n  --knopf-background-alpha: var(--knopf-active-background-alpha);\n  --knopf-background-color: var(--knopf-active-background-color);\n  --knopf-border-color: var(--knopf-active-border-color);\n  --knopf-gradient-from: var(--knopf-active-gradient-from);\n  --knopf-gradient-to: var(--knopf-active-gradient-to);\n  --knopf-text-color: var(--knopf-active-text-color);\n  --knopf-text-decoration-color: var(--knopf-active-text-decoration-color);\n}\n\n/* ==========================================================================\n   Sizes\n   ========================================================================== */\n\n.knopf.small {\n  --knopf-font-size: var(--knopf-font-size-small);\n  --knopf-padding: var(--knopf-padding-small);\n  --knopf-icon-size: var(--knopf-icon-size-small);\n}\n\n.knopf.large {\n  --knopf-font-size: var(--knopf-font-size-large);\n  --knopf-padding: var(--knopf-padding-large);\n  --knopf-icon-size: var(--knopf-icon-size-large);\n}\n\n.knopf.huge {\n  --knopf-font-size: var(--knopf-font-size-huge);\n  --knopf-padding: var(--knopf-padding-huge);\n  --knopf-icon-size: var(--knopf-icon-size-huge);\n}\n\n/* ==========================================================================\n   Modifiers\n   ========================================================================== */\n\n.knopf:where(.traced, .outlined) {\n  --knopf-border-color: var(--knopf-color);\n}\n\n.knopf.traced {\n  --knopf-border-alpha: 33%;\n}\n\n.knopf.outlined {\n  --knopf-border-alpha: 100%;\n}\n\n/* ==========================================================================\n   Alignment\n   ========================================================================== */\n\n.knopf.block {\n  --knopf-display: flex;\n\n  width: 100%;\n}\n\n.knopf.start {\n  --knopf-justify-content: flex-start;\n}\n\n.knopf.center {\n  --knopf-justify-content: center;\n}\n\n.knopf.end {\n  --knopf-justify-content: flex-end;\n}\n\n/* ==========================================================================\n   Spacing\n   ========================================================================== */\n\n.knopf.even {\n  --knopf-padding-inline: var(--knopf-padding);\n}\n\n.knopf.wide {\n  --knopf-padding-inline: calc(var(--knopf-padding) * 3);\n}\n\n/* ==========================================================================\n   Corners\n   ========================================================================== */\n\n.knopf.pill {\n  --knopf-border-radius: 9999px;\n}\n\n.knopf.sharp {\n  --knopf-border-radius: 0;\n}\n\n/* ==========================================================================\n   Other\n   ========================================================================== */\n\n.knopf.gradient {\n  --knopf-named-background-color: transparent;\n  --knopf-background-image: linear-gradient(hsl(var(--knopf-gradient-from) / var(--knopf-background-alpha)), hsl(var(--knopf-gradient-to) / var(--knopf-background-alpha)));\n}\n\n.knopf.link {\n  --knopf-border-width: 0;\n  --knopf-border-radius: 0;\n  --knopf-padding: 0;\n  --knopf-font-size: null;\n\n  /* Text decoration */\n  --knopf-text-decoration-line: underline;\n  --knopf-text-decoration-color: hsl(var(--knopf-color) / 40%);\n  --knopf-hover-text-decoration-color: hsl(var(--knopf-color-dark));\n  --knopf-active-text-decoration-color: hsl(var(--knopf-color-darker));\n\n  /* base */\n  --knopf-background-alpha: 0;\n  --knopf-border-alpha: 0;\n  --knopf-text-color: var(--knopf-color);\n\n  /* hover */\n  --knopf-hover-background-alpha: 0;\n  --knopf-hover-border-alpha: 0;\n  --knopf-hover-text-color: var(--knopf-color-dark);\n\n  /* active */\n  --knopf-active-background-alpha: 0;\n  --knopf-active-border-alpha: 0;\n  --knopf-active-text-color: var(--knopf-color-darker);\n}\n\n/* ==========================================================================\n   Icon\n   ========================================================================== */\n\n.knopf > .icon {\n  align-items: center;\n  color: inherit;\n  display: inline-flex;\n  fill: currentColor;\n  flex-shrink: 0;\n  font-size: var(--knopf-icon-size);\n  height: var(--knopf-icon-size);\n  justify-content: center;\n  width: var(--knopf-icon-size);\n}\n\n.knopf > .icon.small {\n  --knopf-icon-size: var(--knopf-icon-size-small);\n}\n\n.knopf > .icon.base {\n  --knopf-icon-size: var(--knopf-icon-size-base);\n}\n\n.knopf > .icon.large {\n  --knopf-icon-size: var(--knopf-icon-size-large);\n}\n\n.knopf > .icon.huge {\n  --knopf-icon-size: var(--knopf-icon-size-huge);\n}\n\n.knopf > .icon:first-child:not(:only-child) {\n  margin-inline-start: calc(var(--knopf-padding-inline) * -0.25);\n  margin-inline-end: calc(var(--knopf-padding-inline) * 0.5);\n}\n\n.knopf > .icon:last-child:not(:only-child) {\n  margin-inline-start: calc(var(--knopf-padding-inline) * 0.5);\n  margin-inline-end: calc(var(--knopf-padding-inline) * -0.25);\n}\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"knopf.css\",\n  \"version\": \"1.1.2\",\n  \"description\": \"Modern, modular, extensible button system designed for both rapid prototyping and production-ready applications\",\n  \"author\": {\n    \"name\": \"Frameable\",\n    \"email\": \"tech@frameableinc.com\",\n    \"url\": \"https://frameableinc.com/\"\n  },\n  \"contributors\": [\n    \"Agustín Díaz <me@adiaz.uy> (https://adiaz.uy/)\",\n    \"Abhi Bassi <hello@abhinavbassi.com> (http://abhinavbassi.com/)\"\n  ],\n  \"homepage\": \"https://knopf.dev/\",\n  \"style\": \"knopf.css\",\n  \"main\": \"knopf.css\",\n  \"files\": [\n    \"knopf.css\",\n    \"knopf.min.css\"\n  ],\n  \"license\": \"MIT\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/team-video/knopf.css.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/team-video/knopf.css/issues\"\n  },\n  \"scripts\": {\n    \"build\": \"uglifycss knopf.css > knopf.min.css\",\n    \"lint\": \"stylelint knopf.css\"\n  },\n  \"keywords\": [\n    \"knopf\",\n    \"css\",\n    \"css-framework\",\n    \"utility-classes\",\n    \"design-system\",\n    \"ui-component\"\n  ],\n  \"devDependencies\": {\n    \"stylelint\": \"^13.13.1\",\n    \"stylelint-config-standard\": \"^22.0.0\",\n    \"uglifycss\": \"0.0.29\"\n  },\n  \"stylelint\": {\n    \"extends\": \"stylelint-config-standard\",\n    \"rules\": {\n      \"no-descending-specificity\": null\n    }\n  }\n}\n"
  },
  {
    "path": "stories/index.stories.js",
    "content": "import 'sanitize.css/typography.css'\nimport '../knopf.css'\n\nexport default {\n  title: 'Test Suite',\n}\n\nexport const State = () => `\n  <button class=\"knopf\" disabled>\n    disabled\n  </button>\n  <button class=\"knopf\">\n    default\n  </button>\n  <button class=\"knopf active\">\n    active\n  </button>\n`\n\nexport const Type = () => `\n  <button class=\"knopf inverse\">\n    inverse\n  </button>\n  <button class=\"knopf flat\">\n    flat\n  </button>\n  <button class=\"knopf pale\">\n    pale\n  </button>\n`\n\nexport const Spacing = () => `\n  <button class=\"knopf even\">\n    even\n  </button>\n  <button class=\"knopf\">\n    regular\n  </button>\n  <button class=\"knopf wide\">\n    wide\n  </button>\n`\n\nexport const Corners = () => `\n  <button class=\"knopf sharp\">\n    sharp\n  </button>\n  <button class=\"knopf\">\n    rounded\n  </button>\n  <button class=\"knopf pill\">\n    pill\n  </button>\n`\n\nexport const Size = () => `\n  <button class=\"knopf small\">\n    small\n  </button>\n  <button class=\"knopf\">\n    base\n  </button>\n  <button class=\"knopf large\">\n    large\n  </button>\n  <button class=\"knopf huge\">\n    huge\n  </button>\n`\n\nexport const Link = () => `\n  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor <a class=\"knopf link\" href=\"#\">incididunt</a> ut labore et dolore magna aliqua.</p>\n`\n"
  },
  {
    "path": "stories/playground.stories.js",
    "content": "import 'sanitize.css/typography.css'\nimport '../knopf.css'\n\nexport default {\n  title: 'Playground',\n  argTypes: {\n    type: {\n      defaultValue: 'default',\n      control: {\n        type: 'inline-radio',\n        options: ['default', 'inverse', 'flat', 'pale'],\n      },\n    },\n    misc: {\n      control: {\n        type: 'inline-check',\n        options: ['link', 'gradient'],\n      },\n    },\n    border: {\n      defaultValue: 'none',\n      control: {\n        type: 'inline-radio',\n        options: ['none', 'traced', 'outlined'],\n      },\n    },\n    spacing: {\n      defaultValue: 'regular',\n      control: {\n        type: 'inline-radio',\n        options: ['even', 'regular', 'wide'],\n      },\n    },\n    corners: {\n      defaultValue: 'rounded',\n      control: {\n        type: 'inline-radio',\n        options: ['pill', 'rounded', 'sharp'],\n      },\n    },\n    size: {\n      defaultValue: 'base',\n      control: {\n        type: 'inline-radio',\n        options: ['small', 'base', 'large', 'huge'],\n      },\n    },\n    isBlock: {\n      control: 'boolean',\n      defaultValue: false,\n    },\n    alignment: {\n      defaultValue: 'center',\n      control: {\n        type: 'inline-radio',\n        options: ['start', 'center', 'end'],\n      },\n    },\n    label: {\n      control: 'text',\n      defaultValue: 'Knopf',\n    },\n    isActive: {\n      control: 'boolean',\n      defaultValue: false,\n    },\n    isDisabled: {\n      control: 'boolean',\n      defaultValue: false,\n    },\n    hue: {\n      defaultValue: 218,\n      control: {\n        type: 'range',\n        min: 0,\n        max: 360,\n      },\n    },\n    saturation: {\n      defaultValue: 77,\n      control: {\n        type: 'range',\n        min: 0,\n        max: 100,\n      },\n    },\n    luminosity: {\n      defaultValue: 37,\n      control: {\n        type: 'range',\n        min: 0,\n        max: 100,\n      },\n    },\n  },\n}\n\nexport const button = ({ type, misc, border, spacing, corners, size, isBlock, alignment, label, isActive, isDisabled, hue, saturation, luminosity }) => {\n  const classes = ['knopf'].concat(misc)\n\n  if (type !== 'default') classes.push(type)\n  if (border !== 'none') classes.push(border)\n  if (spacing !== 'regular') classes.push(spacing)\n  if (corners !== 'rounded') classes.push(corners)\n  if (size !== 'base') classes.push(size)\n  if (isBlock) classes.push('block')\n  if (alignment !== 'center') classes.push(alignment)\n  if (isActive) classes.push('active')\n\n  const styles = [\n    `--knopf-hue: ${hue};`,\n    `--knopf-saturation: ${saturation}%;`,\n    `--knopf-luminosity: ${luminosity}%;`,\n  ]\n\n  return `\n    <button class=\"${classes.join(' ')}\"${isDisabled ? ' disabled' : ''} style=\"${styles.join('')}\">\n      ${label}\n    </button>\n  `\n}\n"
  }
]