Repository: team-video/knopf.css
Branch: main
Commit: abf247a6851f
Files: 11
Total size: 30.3 KB

Directory structure:
gitextract_u8gk6w6a/

├── .editorconfig
├── .gitignore
├── CHANGELOG.md
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE.md
├── README.md
├── knopf.css
├── package.json
└── stories/
    ├── index.stories.js
    └── playground.stories.js

================================================
FILE CONTENTS
================================================

================================================
FILE: .editorconfig
================================================
# editorconfig.org

root = true

[*]
charset = utf-8
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true


================================================
FILE: .gitignore
================================================
node_modules
npm-debug.log
.*
!.editorconfig
!.gitignore
!.storybook


================================================
FILE: CHANGELOG.md
================================================
# Changes to knopf.css

### 0.0.0 (August 20th, 2019)

- Initial release


================================================
FILE: CODE_OF_CONDUCT.md
================================================
# Contributor Covenant Code of Conduct

## Our Pledge

In the interest of fostering an open and welcoming environment, we as
contributors and maintainers pledge to making participation in our project and
our community a harassment-free experience for everyone, regardless of age, body
size, disability, ethnicity, sex characteristics, gender identity and expression,
level of experience, education, socio-economic status, nationality, personal
appearance, race, religion, or sexual identity and orientation.

## Our Standards

Examples of behavior that contributes to creating a positive environment
include:

* Using welcoming and inclusive language
* Being respectful of differing viewpoints and experiences
* Gracefully accepting constructive criticism
* Focusing on what is best for the community
* Showing empathy towards other community members

Examples of unacceptable behavior by participants include:

* The use of sexualized language or imagery and unwelcome sexual attention or
 advances
* Trolling, insulting/derogatory comments, and personal or political attacks
* Public or private harassment
* Publishing others' private information, such as a physical or electronic
 address, without explicit permission
* Other conduct which could reasonably be considered inappropriate in a
 professional setting

## Our Responsibilities

Project maintainers are responsible for clarifying the standards of acceptable
behavior and are expected to take appropriate and fair corrective action in
response to any instances of unacceptable behavior.

Project maintainers have the right and responsibility to remove, edit, or
reject comments, commits, code, wiki edits, issues, and other contributions
that are not aligned to this Code of Conduct, or to ban temporarily or
permanently any contributor for other behaviors that they deem inappropriate,
threatening, offensive, or harmful.

## Scope

This Code of Conduct applies both within project spaces and in public spaces
when an individual is representing the project or its community. Examples of
representing a project or community include using an official project e-mail
address, posting via an official social media account, or acting as an appointed
representative at an online or offline event. Representation of a project may be
further defined and clarified by project maintainers.

## Enforcement

Instances of abusive, harassing, or otherwise unacceptable behavior may be
reported by contacting the project team at me@adiaz.uy. All
complaints will be reviewed and investigated and will result in a response that
is deemed necessary and appropriate to the circumstances. The project team is
obligated to maintain confidentiality with regard to the reporter of an incident.
Further details of specific enforcement policies may be posted separately.

Project maintainers who do not follow or enforce the Code of Conduct in good
faith may face temporary or permanent repercussions as determined by other
members of the project's leadership.

## Attribution

This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html

[homepage]: https://www.contributor-covenant.org

For answers to common questions about this code of conduct, see
https://www.contributor-covenant.org/faq


================================================
FILE: CONTRIBUTING.md
================================================
# Contributing to knopf.css

Please review this document in order to make the contribution process easy and
effective for everyone involved.

Following these guidelines helps to communicate that you respect the time of
the developers managing and developing this project. In return, we will
reciprocate that respect in addressing your issues, patches, and features.

## Using the issue tracker

The issue tracker is the preferred channel for [bug reports](#bug-reports),
[feature requests](#feature-requests) and [pull
requests](#pull-requests), but please respect the following restrictions:

* Please **do not** use the issue tracker for personal support requests.
* Please **do not** derail or troll issues. Keep the discussion on topic and
  respect the opinions of others.

## Bug reports

A bug is a _demonstrable problem_ caused by the code in this repository.

1. **Use the GitHub issue search** to see if the issue has
   [already been reported].

2. **Check if the issue has been fixed** by trying to reproduce it using the
   latest `master` branch in the repository.

3. **Isolate the problem** to create a [live example] of a [reduced test case].

A good bug report shouldn’t leave others needing to chase you up for more
information. Please be as detailed as possible in your report. What is your
environment? What steps will reproduce the issue? What browser(s) and OS
experience the problem? What would you expect to be the outcome? All these
details will help people to fix any potential bugs.

Example:

> Short and descriptive example bug report title
>
> A summary of the issue and the browser/OS environment in which it occurs. If
> suitable, include the steps required to reproduce the bug.
>
> 1. This is the first step
> 2. This is the second step
> 3. Further steps, etc.
>
> `<url>` - a link to the reduced test case
>
> Any other information you want to share that is relevant to the issue being
> reported. This might include the lines of code that you have identified as
> causing the bug, and potential solutions (and your opinions on their
> merits).

## Feature requests

Feature requests are welcome. Take a moment to find out whether your idea fits
with the scope and aims of the project. It’s up to *you* to make a strong case
to convince the project’s developers of the merits of this feature. Please
provide as much detail and context as possible.

## Pull requests

Good pull requests - patches, improvements, new features - are a fantastic
help. They should remain focused in scope and avoid containing unrelated
commits.

**Please ask first** before embarking on any significant work, otherwise you
risk spending a lot of time working on something that the project’s developers
might not want to merge into the project.

Please adhere to the coding conventions used throughout a project (whitespace,
accurate comments, etc.) and any other requirements (such as test coverage).

Follow this process if you’d like your work considered for inclusion in the
project:

1. To begin: [fork this project], clone your fork, and add our upstream.
   ```bash
   # Clone your fork of the repo into the current directory
   git clone git@github.com:YOUR_USER/knopf.css.git

   # Navigate to the newly cloned directory
   cd knopf.css

   # Assign the original repo to a remote called "upstream"
   git remote add upstream git@github.com:team-video/knopf.css.git

   # Install the tools necessary for testing
   npm install
   ```

2. Create a branch for your feature or fix:
   ```bash
   # Move into a new branch for your feature
   git checkout -b feature/thing
   ```
   ```bash
   # Move into a new branch for your fix
   git checkout -b fix/something
   ```

3. If your code follows our practices, then push your feature branch:
   ```bash
   # Test current code
   npm test
   ```
   ```bash
   # Push the branch for your new feature
   git push origin feature/thing
   ```
   ```bash
   # Or, push the branch for your update
   git push origin update/something
   ```

   Be sure to add a test to the `test.html` file if appropriate, and test
   your change in all supported browsers.


Now [open a pull request] with a clear title and description. Remember,
by submitting a patch, you agree to allow the project owner to license your
work under the same license as that used by the project.

## Maintainers

If you have commit access, please follow this process for merging patches and
cutting new releases.

### Accepting patches

1. Check that a patch is within the scope and philosophy of the project.
2. Check that a patch has any necessary tests and a proper, descriptive commit
   message.
3. Test the patch locally.
4. Use GitHub’s merge button with caution or apply the patch locally, squashing
   any commits.

### Releasing a new version

1. Include all new functional changes in CHANGELOG.md.
2. Create an annotated tag for the version: `git tag -m "0.0.0" 0.0.0`.
3. Push the changes and tags to GitHub: `git push --tags origin master`
4. Update the `gh-pages` branch,
   1. Copy the latest knopf.css and test.html from the master branch into
      the root directory, the `latest` directory, and a new directory named
      after the new version: `0.0.0`.
   2. Update the knopf.css version and supported browsers in `index.html`.

### Semver strategy

[Semver](http://semver.org/) is a widely accepted method for deciding how
version numbers are incremented in a project. Versions are written as
MAJOR.MINOR.PATCH.

[already been reported]: https://github.com/team-video/knopf.css/issues
[fork this project]:     https://github.com/team-video/knopf.css/fork
[live example]:          https://codepen.io/pen
[open a pull request]:   https://help.github.com/articles/using-pull-requests/
[reduced test case]:     https://css-tricks.com/reduced-test-cases/


================================================
FILE: LICENSE.md
================================================
MIT License

Copyright (c) 2019-2020 team-video

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


================================================
FILE: README.md
================================================
# knopf.css

Modern, modular, extensible button system designed for both rapid prototyping and production-ready applications.

Made by [Frameable](https://frameableinc.com/), the team behind [Social hour](https://socialhour.com) and [Subtask](https://subtask.co).

## Installation

Just [download](http://knopf.dev/knopf.css.zip) and include the minified stylesheet on your website.</p>

```html
<link rel="stylesheet" href="/knopf.min.css">
```

You could also link to a CDN hosted file.

```html
<link rel="stylesheet" href="https://unpkg.com/knopf.css/knopf.min.css">
```

***

Otherwise, you can use your favorite package manager to install it as a dependency.

### Install with npm
```
npm install knopf.css
```

### Install with yarn
```
yarn add knopf.css
```

And then import it wherever you are importing your styles.
```node
import 'knopf.css'
```

## Usage

By 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.

### Override default values

All of the base values can be changed by overriding the custom properties at root:

```css
:root {
  --knopf-hue: 164;
  --knopf-saturation: 88%;
  --knopf-luminosity: 28%;
}
```

```html
<button class="knopf">
  Button
</button>
```

### Extend via modifier

You can also create your own class that sets new values for a particular instance:

```css
.negative {
  --knopf-hue: 356;
  --knopf-saturation: 57%;
  --knopf-luminosity: 51%;
}
```

```html
<button class="knopf negative">
  Button
</button>
```

### Leverage the cascade

As 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.

```css
.knopf.knopf {
  --knopf-raised-height: 6px;
  border-block-end-color: hsl(var(--knopf-hover-background-color));
  border-block-end-width: var(--knopf-raised-height);
  margin-block-start: calc(var(--knopf-raised-height) * -1);
}

.knopf.knopf:hover {
  --knopf-raised-height: 2px;
  border-block-end-color: hsl(var(--knopf-active-background-color));
}
```

```html
<button class="knopf large wide pill">
  Button
</button>
```

***

The same logic is applicable to all of the built-in modifiers, try out the [playground](https://knopf.dev/#Playground) to check them out.

I 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.

You can see the full test suite on [this pen](https://codepen.io/HiroAgustin/full/mdVRdVg).

## Contributing

Please read the [contribution guidelines](CONTRIBUTING.md) in order to make the contribution process easy and effective for everyone involved.


================================================
FILE: knopf.css
================================================
html {
  /* ==========================================================================
     Color
     ========================================================================== */

  --knopf-hue: 218;
  --knopf-saturation: 77%;
  --knopf-luminosity: 37%;

  /* ==========================================================================
     Sizes
     ========================================================================== */

  /* Font */
  --knopf-font-size-base: 1rem;
  --knopf-font-size-small: calc(var(--knopf-font-size-base) - 0.25rem);
  --knopf-font-size-large: calc(var(--knopf-font-size-base) + 0.2rem);
  --knopf-font-size-huge: calc(var(--knopf-font-size-base) + 0.5rem);

  /* Padding */
  --knopf-padding-base: 0.375rem;
  --knopf-padding-small: calc(var(--knopf-padding-base) - 0.125rem);
  --knopf-padding-large: calc(var(--knopf-padding-base) + 0.125rem);
  --knopf-padding-huge: calc(var(--knopf-padding-base) + 0.375rem);

  /* Icon */
  --knopf-icon-size-base: 1.125rem;
  --knopf-icon-size-small: calc(var(--knopf-icon-size-base) - 0.25rem);
  --knopf-icon-size-large: calc(var(--knopf-icon-size-base) + 0.375rem);
  --knopf-icon-size-huge: calc(var(--knopf-icon-size-base) + 0.625rem);

  /* ==========================================================================
     Initial
     ========================================================================== */

  /* Size */
  --knopf-font-size: var(--knopf-font-size-base);
  --knopf-padding: var(--knopf-padding-base);
  --knopf-icon-size: var(--knopf-icon-size-base);

  /* Border */
  --knopf-border-radius: 0.33em;
  --knopf-border-style: solid;
  --knopf-border-width: 1px;
  --knopf-border-alpha: 0%;

  /* Text */
  --knopf-font-family: inherit;
  --knopf-font-weight: 500;
  --knopf-line-height: 1.5;
  --knopf-align-items: center;
  --knopf-justify-content: center;
  --knopf-text-decoration-line: none;
  --knopf-text-decoration-color: currentColor;
  --knopf-text-transform: none;

  /* Flex */
  --knopf-display: inline-flex;
  --knopf-flex-direction: row;

  /* Group */
  --knopf-group-direction: row;

  /* Misc */
  --knopf-background-image: none;
  --knopf-box-shadow: none;
  --knopf-foreground-color: 0 0% 100%;
  --knopf--position: relative;
  --knopf-transition: all 150ms ease-in-out;
}

/* ==========================================================================
   Class
   ========================================================================== */

.knopf {
  /* Colors */
  --knopf-color: var(--knopf-hue) var(--knopf-saturation) var(--knopf-luminosity);

  /* Light */
  --knopf-color-light: var(--knopf-hue) var(--knopf-saturation) calc(var(--knopf-luminosity) + 10%);
  --knopf-color-lighter: var(--knopf-hue) var(--knopf-saturation) calc(var(--knopf-luminosity) + 15%);

  /* Dark */
  --knopf-color-dark: var(--knopf-hue) var(--knopf-saturation) calc(var(--knopf-luminosity) - 10%);
  --knopf-color-darker: var(--knopf-hue) var(--knopf-saturation) calc(var(--knopf-luminosity) - 15%);

  /* Spacing */
  --knopf-padding-block: var(--knopf-padding);
  --knopf-padding-inline: calc(var(--knopf-padding) * 2);

  /* Default */
  --knopf-background-alpha: 100%;
  --knopf-background-color: var(--knopf-color);
  --knopf-border-color: var(--knopf-color);
  --knopf-gradient-from: var(--knopf-color-light);
  --knopf-gradient-to: var(--knopf-color-dark);
  --knopf-text-color: var(--knopf-foreground-color);
  --knopf-text-alpha: 100%;

  /* Hover */
  --knopf-hover-background-alpha: 100%;
  --knopf-hover-background-color: var(--knopf-color-dark);
  --knopf-hover-border-color: var(--knopf-color-dark);
  --knopf-hover-gradient-from: var(--knopf-color-lighter);
  --knopf-hover-gradient-to: var(--knopf-color);
  --knopf-hover-text-color: var(--knopf-foreground-color);
  --knopf-hover-text-alpha: 100%;

  /* Active */
  --knopf-active-background-alpha: 100%;
  --knopf-active-background-color: var(--knopf-color-darker);
  --knopf-active-border-color: var(--knopf-color-darker);
  --knopf-active-gradient-from: var(--knopf-color-dark);
  --knopf-active-gradient-to: var(--knopf-color);
  --knopf-active-text-color: var(--knopf-foreground-color);
  --knopf-active-text-alpha: 100%;

  /* Properties */
  accent-color: hsl(var(--knopf-color));
  align-items: var(--knopf-align-items);
  background-color: var(--knopf-named-background-color, hsl(var(--knopf-background-color) / var(--knopf-background-alpha)));
  background-image: var(--knopf-background-image);
  background-origin: border-box;
  border-color: hsl(var(--knopf-border-color) / var(--knopf-border-alpha));
  border-radius: var(--knopf-border-radius);
  border-style: var(--knopf-border-style);
  border-width: var(--knopf-border-width);
  box-shadow: var(--knopf-box-shadow);
  box-sizing: border-box;
  color: hsl(var(--knopf-text-color) / var(--knopf-text-alpha));
  cursor: pointer;
  display: var(--knopf-display);
  flex-direction: var(--knopf-flex-direction);
  font-family: var(--knopf-font-family);
  font-size: var(--knopf-font-size, inherit);
  font-weight: var(--knopf-font-weight);
  line-height: var(--knopf-line-height);
  justify-content: var(--knopf-justify-content);
  padding-block: var(--knopf-padding-block);
  padding-inline: var(--knopf-padding-inline);
  position: var(--knopf--position);
  text-decoration-color: var(--knopf-text-decoration-color);
  text-decoration-line: var(--knopf-text-decoration-line);
  text-transform: var(--knopf-text-transform);
  transition: var(--knopf-transition);
}

/* ==========================================================================
   Types
   ========================================================================== */

.knopf.inverse {
  /* base */
  --knopf-background-alpha: 0%;
  --knopf-text-color: var(--knopf-color);

  /* hover */
  --knopf-hover-background-alpha: 100%;
  --knopf-hover-background-color: var(--knopf-color);
  --knopf-hover-text-color: var(--knopf-foreground-color);

  /* active */
  --knopf-active-background-alpha: 100%;
  --knopf-active-background-color: var(--knopf-color-dark);
  --knopf-active-text-color: var(--knopf-foreground-color);
}

.knopf.flat {
  /* base */
  --knopf-background-alpha: 0;
  --knopf-text-color: var(--knopf-color);

  /* hover */
  --knopf-hover-background-alpha: 15%;
  --knopf-hover-background-color: var(--knopf-color);
  --knopf-hover-text-color: var(--knopf-color-dark);

  /* active */
  --knopf-active-background-alpha: 25%;
  --knopf-active-background-color: var(--knopf-color);
  --knopf-active-text-color: var(--knopf-color-darker);
}

.knopf.pale {
  /* base */
  --knopf-background-alpha: 10%;
  --knopf-background-color: var(--knopf-color);
  --knopf-text-color: var(--knopf-color);

  /* hover */
  --knopf-hover-background-alpha: 20%;
  --knopf-hover-background-color: var(--knopf-color);
  --knopf-hover-text-color: var(--knopf-color-dark);

  /* active */
  --knopf-active-background-alpha: 30%;
  --knopf-active-background-color: var(--knopf-color);
  --knopf-active-text-color: var(--knopf-color-darker);
}

/* ==========================================================================
   States
   ========================================================================== */

/* Hover */
.knopf:hover {
  --knopf-background-alpha: var(--knopf-hover-background-alpha);
  --knopf-background-color: var(--knopf-hover-background-color);
  --knopf-border-color: var(--knopf-hover-border-color);
  --knopf-gradient-from: var(--knopf-hover-gradient-from);
  --knopf-gradient-to: var(--knopf-hover-gradient-to);
  --knopf-text-color: var(--knopf-hover-text-color);
  --knopf-text-decoration-color: var(--knopf-hover-text-decoration-color);
}

/* Active */
.knopf.active {
  --knopf-background-alpha: var(--knopf-active-background-alpha);
  --knopf-background-color: var(--knopf-active-background-color);
  --knopf-border-color: var(--knopf-active-border-color);
  --knopf-gradient-from: var(--knopf-active-gradient-from);
  --knopf-gradient-to: var(--knopf-active-gradient-to);
  --knopf-text-color: var(--knopf-active-text-color);
  --knopf-text-decoration-color: var(--knopf-active-text-decoration-color);
}

/* ==========================================================================
   Sizes
   ========================================================================== */

.knopf.small {
  --knopf-font-size: var(--knopf-font-size-small);
  --knopf-padding: var(--knopf-padding-small);
  --knopf-icon-size: var(--knopf-icon-size-small);
}

.knopf.large {
  --knopf-font-size: var(--knopf-font-size-large);
  --knopf-padding: var(--knopf-padding-large);
  --knopf-icon-size: var(--knopf-icon-size-large);
}

.knopf.huge {
  --knopf-font-size: var(--knopf-font-size-huge);
  --knopf-padding: var(--knopf-padding-huge);
  --knopf-icon-size: var(--knopf-icon-size-huge);
}

/* ==========================================================================
   Modifiers
   ========================================================================== */

.knopf:where(.traced, .outlined) {
  --knopf-border-color: var(--knopf-color);
}

.knopf.traced {
  --knopf-border-alpha: 33%;
}

.knopf.outlined {
  --knopf-border-alpha: 100%;
}

/* ==========================================================================
   Alignment
   ========================================================================== */

.knopf.block {
  --knopf-display: flex;

  width: 100%;
}

.knopf.start {
  --knopf-justify-content: flex-start;
}

.knopf.center {
  --knopf-justify-content: center;
}

.knopf.end {
  --knopf-justify-content: flex-end;
}

/* ==========================================================================
   Spacing
   ========================================================================== */

.knopf.even {
  --knopf-padding-inline: var(--knopf-padding);
}

.knopf.wide {
  --knopf-padding-inline: calc(var(--knopf-padding) * 3);
}

/* ==========================================================================
   Corners
   ========================================================================== */

.knopf.pill {
  --knopf-border-radius: 9999px;
}

.knopf.sharp {
  --knopf-border-radius: 0;
}

/* ==========================================================================
   Other
   ========================================================================== */

.knopf.gradient {
  --knopf-named-background-color: transparent;
  --knopf-background-image: linear-gradient(hsl(var(--knopf-gradient-from) / var(--knopf-background-alpha)), hsl(var(--knopf-gradient-to) / var(--knopf-background-alpha)));
}

.knopf.link {
  --knopf-border-width: 0;
  --knopf-border-radius: 0;
  --knopf-padding: 0;
  --knopf-font-size: null;

  /* Text decoration */
  --knopf-text-decoration-line: underline;
  --knopf-text-decoration-color: hsl(var(--knopf-color) / 40%);
  --knopf-hover-text-decoration-color: hsl(var(--knopf-color-dark));
  --knopf-active-text-decoration-color: hsl(var(--knopf-color-darker));

  /* base */
  --knopf-background-alpha: 0;
  --knopf-border-alpha: 0;
  --knopf-text-color: var(--knopf-color);

  /* hover */
  --knopf-hover-background-alpha: 0;
  --knopf-hover-border-alpha: 0;
  --knopf-hover-text-color: var(--knopf-color-dark);

  /* active */
  --knopf-active-background-alpha: 0;
  --knopf-active-border-alpha: 0;
  --knopf-active-text-color: var(--knopf-color-darker);
}

/* ==========================================================================
   Icon
   ========================================================================== */

.knopf > .icon {
  align-items: center;
  color: inherit;
  display: inline-flex;
  fill: currentColor;
  flex-shrink: 0;
  font-size: var(--knopf-icon-size);
  height: var(--knopf-icon-size);
  justify-content: center;
  width: var(--knopf-icon-size);
}

.knopf > .icon.small {
  --knopf-icon-size: var(--knopf-icon-size-small);
}

.knopf > .icon.base {
  --knopf-icon-size: var(--knopf-icon-size-base);
}

.knopf > .icon.large {
  --knopf-icon-size: var(--knopf-icon-size-large);
}

.knopf > .icon.huge {
  --knopf-icon-size: var(--knopf-icon-size-huge);
}

.knopf > .icon:first-child:not(:only-child) {
  margin-inline-start: calc(var(--knopf-padding-inline) * -0.25);
  margin-inline-end: calc(var(--knopf-padding-inline) * 0.5);
}

.knopf > .icon:last-child:not(:only-child) {
  margin-inline-start: calc(var(--knopf-padding-inline) * 0.5);
  margin-inline-end: calc(var(--knopf-padding-inline) * -0.25);
}


================================================
FILE: package.json
================================================
{
  "name": "knopf.css",
  "version": "1.1.2",
  "description": "Modern, modular, extensible button system designed for both rapid prototyping and production-ready applications",
  "author": {
    "name": "Frameable",
    "email": "tech@frameableinc.com",
    "url": "https://frameableinc.com/"
  },
  "contributors": [
    "Agustín Díaz <me@adiaz.uy> (https://adiaz.uy/)",
    "Abhi Bassi <hello@abhinavbassi.com> (http://abhinavbassi.com/)"
  ],
  "homepage": "https://knopf.dev/",
  "style": "knopf.css",
  "main": "knopf.css",
  "files": [
    "knopf.css",
    "knopf.min.css"
  ],
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/team-video/knopf.css.git"
  },
  "bugs": {
    "url": "https://github.com/team-video/knopf.css/issues"
  },
  "scripts": {
    "build": "uglifycss knopf.css > knopf.min.css",
    "lint": "stylelint knopf.css"
  },
  "keywords": [
    "knopf",
    "css",
    "css-framework",
    "utility-classes",
    "design-system",
    "ui-component"
  ],
  "devDependencies": {
    "stylelint": "^13.13.1",
    "stylelint-config-standard": "^22.0.0",
    "uglifycss": "0.0.29"
  },
  "stylelint": {
    "extends": "stylelint-config-standard",
    "rules": {
      "no-descending-specificity": null
    }
  }
}


================================================
FILE: stories/index.stories.js
================================================
import 'sanitize.css/typography.css'
import '../knopf.css'

export default {
  title: 'Test Suite',
}

export const State = () => `
  <button class="knopf" disabled>
    disabled
  </button>
  <button class="knopf">
    default
  </button>
  <button class="knopf active">
    active
  </button>
`

export const Type = () => `
  <button class="knopf inverse">
    inverse
  </button>
  <button class="knopf flat">
    flat
  </button>
  <button class="knopf pale">
    pale
  </button>
`

export const Spacing = () => `
  <button class="knopf even">
    even
  </button>
  <button class="knopf">
    regular
  </button>
  <button class="knopf wide">
    wide
  </button>
`

export const Corners = () => `
  <button class="knopf sharp">
    sharp
  </button>
  <button class="knopf">
    rounded
  </button>
  <button class="knopf pill">
    pill
  </button>
`

export const Size = () => `
  <button class="knopf small">
    small
  </button>
  <button class="knopf">
    base
  </button>
  <button class="knopf large">
    large
  </button>
  <button class="knopf huge">
    huge
  </button>
`

export const Link = () => `
  <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>
`


================================================
FILE: stories/playground.stories.js
================================================
import 'sanitize.css/typography.css'
import '../knopf.css'

export default {
  title: 'Playground',
  argTypes: {
    type: {
      defaultValue: 'default',
      control: {
        type: 'inline-radio',
        options: ['default', 'inverse', 'flat', 'pale'],
      },
    },
    misc: {
      control: {
        type: 'inline-check',
        options: ['link', 'gradient'],
      },
    },
    border: {
      defaultValue: 'none',
      control: {
        type: 'inline-radio',
        options: ['none', 'traced', 'outlined'],
      },
    },
    spacing: {
      defaultValue: 'regular',
      control: {
        type: 'inline-radio',
        options: ['even', 'regular', 'wide'],
      },
    },
    corners: {
      defaultValue: 'rounded',
      control: {
        type: 'inline-radio',
        options: ['pill', 'rounded', 'sharp'],
      },
    },
    size: {
      defaultValue: 'base',
      control: {
        type: 'inline-radio',
        options: ['small', 'base', 'large', 'huge'],
      },
    },
    isBlock: {
      control: 'boolean',
      defaultValue: false,
    },
    alignment: {
      defaultValue: 'center',
      control: {
        type: 'inline-radio',
        options: ['start', 'center', 'end'],
      },
    },
    label: {
      control: 'text',
      defaultValue: 'Knopf',
    },
    isActive: {
      control: 'boolean',
      defaultValue: false,
    },
    isDisabled: {
      control: 'boolean',
      defaultValue: false,
    },
    hue: {
      defaultValue: 218,
      control: {
        type: 'range',
        min: 0,
        max: 360,
      },
    },
    saturation: {
      defaultValue: 77,
      control: {
        type: 'range',
        min: 0,
        max: 100,
      },
    },
    luminosity: {
      defaultValue: 37,
      control: {
        type: 'range',
        min: 0,
        max: 100,
      },
    },
  },
}

export const button = ({ type, misc, border, spacing, corners, size, isBlock, alignment, label, isActive, isDisabled, hue, saturation, luminosity }) => {
  const classes = ['knopf'].concat(misc)

  if (type !== 'default') classes.push(type)
  if (border !== 'none') classes.push(border)
  if (spacing !== 'regular') classes.push(spacing)
  if (corners !== 'rounded') classes.push(corners)
  if (size !== 'base') classes.push(size)
  if (isBlock) classes.push('block')
  if (alignment !== 'center') classes.push(alignment)
  if (isActive) classes.push('active')

  const styles = [
    `--knopf-hue: ${hue};`,
    `--knopf-saturation: ${saturation}%;`,
    `--knopf-luminosity: ${luminosity}%;`,
  ]

  return `
    <button class="${classes.join(' ')}"${isDisabled ? ' disabled' : ''} style="${styles.join('')}">
      ${label}
    </button>
  `
}