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);
}