@hummingbirdui/hummingbird/src/components/button.css

An open-source system designed for rapid development, without sacrificing the granular control of utility-first CSS.

@utility btn {
  @layer base {
    --btn-font-size: var(--input-btn-font-size);
    --btn-radius: var(--input-btn-radius);
    --btn-padding-x: var(--input-btn-padding-x);
    --btn-padding-y: var(--input-btn-padding-y);
    --btn-line-height: var(--input-btn-line-height);
    --btn-border-width: var(--input-btn-border-width);
    --btn-bg: var(--background-color-highlight);
    --btn-color: var(--text-color-default);
    --btn-font-weight: var(--font-weight-semibold);
    --btn-hover-bg: var(--color-hover);
    --btn-hover-color: var(--btn-color);
    --btn-border-color: transparent;
    --btn-disabled-border-color: transparent;
    --btn-disabled-bg: var(--color-disabled);
    --btn-disabled-color: var(--color-disabled-color);
    --btn-active-bg: var(--btn-hover-bg);
    --btn-active-color: var(--btn-color);
    --btn-width: unset;
    --btn-height: unset;

    @apply inline-flex items-center justify-center gap-1.5
    transition-[background] duration-200
    cursor-pointer
    no-underline
    bg-[var(--btn-bg)]
    text-[length:var(--btn-font-size)]
    font-[weight:var(--btn-font-weight)]
    rounded-[var(--btn-radius)]
    px-[var(--btn-padding-x)]
    py-[var(--btn-padding-y)]
    text-[var(--btn-color)]
    leading-[var(--btn-line-height)]
    min-w-4
    w-[var(--btn-width)]
    h-[var(--btn-height)]
    border-[length:var(--btn-border-width)]
    border-[var(--btn-border-color)]
    hover:bg-[var(--btn-hover-bg)]
    hover:text-[var(--btn-hover-color)];

    .btn-check + &:hover {
      @apply bg-[var(--btn-bg)];
    }

    @variant focus-visible {
      @apply outline-0 
      text-[var(--btn-hover-color)]
      bg-[var(--btn-hover-bg)]
      ring-4 ring-[--alpha(var(--btn-hover-bg)/50%)];
    }

    .btn-check:focus-visible + & {
      @apply outline-0
      ring-4 ring-[--alpha(var(--btn-hover-bg)/50%)];
    }

    .btn-check:checked + &,
    :not(.btn-check) + &:active,
    &:active,
    &.active,
    &.show {
      @apply bg-[var(--btn-active-bg)] text-[var(--btn-active-color)];
    }

    &:is(:disabled, [disabled], .disabled) {
      @apply pointer-events-none
      bg-[var(--btn-disabled-bg)]
      text-[var(--btn-disabled-color)]
      border-[var(--btn-disabled-border-color)];
    }
    + input[type='file'] {
      @apply hidden;
    }
    .input-group & {
      + input[type='file'] {
        @apply block;
      }
    }
  }
}

/* variant filled */
@utility btn-primary {
  @layer base {
    --btn-bg: var(--color-primary);
    --btn-color: var(--color-contrast);
    --btn-hover-bg: var(--color-primary-dark);
  }
}
@utility btn-secondary {
  @layer base {
    --btn-bg: var(--color-secondary);
    --btn-color: var(--color-contrast);
    --btn-hover-bg: var(--color-secondary-dark);
  }
}
@utility btn-info {
  @layer base {
    --btn-bg: var(--color-info);
    --btn-color: var(--color-contrast);
    --btn-hover-bg: var(--color-info-dark);
  }
}
@utility btn-success {
  @layer base {
    --btn-bg: var(--color-success);
    --btn-color: var(--color-contrast);
    --btn-hover-bg: var(--color-success-dark);
  }
}
@utility btn-warning {
  @layer base {
    --btn-bg: var(--color-warning);
    --btn-color: var(--color-contrast);
    --btn-hover-bg: var(--color-warning-dark);
  }
}
@utility btn-danger {
  @layer base {
    --btn-bg: var(--color-danger);
    --btn-color: var(--color-contrast);
    --btn-hover-bg: var(--color-danger-dark);
  }
}
@utility btn-neutral {
  @layer base {
    --btn-bg: var(--color-dark);
    --btn-color: var(--color-white);
    --btn-hover-bg: --alpha(var(--color-dark) / 80%);
  }
}

/* variant subtle */
@utility btn-subtle-primary {
  @layer base {
    --btn-bg: --alpha(var(--color-primary) / 15%);
    --btn-color: var(--color-primary-dark);
    --btn-hover-bg: --alpha(var(--color-primary) / 20%);
    --btn-disabled-bg: --alpha(var(--color-primary) / 15%);
  }
}
@utility btn-subtle-secondary {
  @layer base {
    --btn-bg: --alpha(var(--color-secondary) / 15%);
    --btn-color: var(--color-secondary-dark);
    --btn-hover-bg: --alpha(var(--color-secondary) / 20%);
    --btn-disabled-bg: --alpha(var(--color-secondary) / 15%);
  }
}
@utility btn-subtle-info {
  @layer base {
    --btn-bg: --alpha(var(--color-info) / 15%);
    --btn-color: var(--color-info-dark);
    --btn-hover-bg: --alpha(var(--color-info) / 20%);
    --btn-disabled-bg: --alpha(var(--color-info) / 15%);
  }
}
@utility btn-subtle-success {
  @layer base {
    --btn-bg: --alpha(var(--color-success) / 15%);
    --btn-color: var(--color-success-dark);
    --btn-hover-bg: --alpha(var(--color-success) / 20%);
    --btn-disabled-bg: --alpha(var(--color-success) / 15%);
  }
}
@utility btn-subtle-warning {
  @layer base {
    --btn-bg: --alpha(var(--color-warning) / 15%);
    --btn-color: var(--color-warning-dark);
    --btn-hover-bg: --alpha(var(--color-warning) / 20%);
    --btn-disabled-bg: --alpha(var(--color-warning) / 15%);
  }
}
@utility btn-subtle-danger {
  @layer base {
    --btn-bg: --alpha(var(--color-danger) / 15%);
    --btn-color: var(--color-danger-dark);
    --btn-hover-bg: --alpha(var(--color-danger) / 20%);
    --btn-disabled-bg: --alpha(var(--color-danger) / 15%);
  }
}
@utility btn-subtle-neutral {
  @layer base {
    --btn-bg: var(--background-color-muted);
    --btn-color: var(--text-color-emphasis);
    --btn-hover-bg: var(--background-color-highlight);
    --btn-disabled-bg: var(--background-color-muted);
  }
}

/* variant outline */
@utility btn-outline-primary {
  @layer base {
    --btn-bg: transparent;
    --btn-color: var(--color-primary);
    --btn-hover-bg: --alpha(var(--color-primary) / 12%);
    --btn-border-width: 1px;
    --btn-border-color: --alpha(var(--color-primary) / 50%);
    --btn-disabled-bg: transparent;
    --btn-disabled-border-color: var(--color-disabled);
  }
}
@utility btn-outline-secondary {
  @layer base {
    --btn-bg: transparent;
    --btn-color: var(--color-secondary);
    --btn-hover-bg: --alpha(var(--color-secondary) / 12%);
    --btn-border-width: 1px;
    --btn-border-color: --alpha(var(--color-secondary) / 50%);
    --btn-disabled-bg: transparent;
    --btn-disabled-border-color: var(--color-disabled);
  }
}
@utility btn-outline-info {
  @layer base {
    --btn-bg: transparent;
    --btn-color: var(--color-info);
    --btn-hover-bg: --alpha(var(--color-info) / 12%);
    --btn-border-width: 1px;
    --btn-border-color: --alpha(var(--color-info) / 50%);
    --btn-disabled-bg: transparent;
    --btn-disabled-border-color: var(--color-disabled);
  }
}
@utility btn-outline-success {
  @layer base {
    --btn-bg: transparent;
    --btn-color: var(--color-success);
    --btn-hover-bg: --alpha(var(--color-success) / 12%);
    --btn-border-width: 1px;
    --btn-border-color: --alpha(var(--color-success) / 50%);
    --btn-disabled-bg: transparent;
    --btn-disabled-border-color: var(--color-disabled);
  }
}
@utility btn-outline-warning {
  @layer base {
    --btn-bg: transparent;
    --btn-color: var(--color-warning);
    --btn-hover-bg: --alpha(var(--color-warning) / 12%);
    --btn-border-width: 1px;
    --btn-border-color: --alpha(var(--color-warning) / 50%);
    --btn-disabled-bg: transparent;
    --btn-disabled-border-color: var(--color-disabled);
  }
}
@utility btn-outline-danger {
  @layer base {
    --btn-bg: transparent;
    --btn-color: var(--color-danger);
    --btn-hover-bg: --alpha(var(--color-danger) / 12%);
    --btn-border-width: 1px;
    --btn-border-color: --alpha(var(--color-danger) / 50%);
    --btn-disabled-bg: transparent;
    --btn-disabled-border-color: var(--color-disabled);
  }
}
@utility btn-outline-neutral {
  @layer base {
    --btn-bg: transparent;
    --btn-color: var(--text-color-default);
    --btn-hover-bg: var(--color-hover);
    --btn-border-width: 1px;
    --btn-border-color: var(--background-color-emphasis);
    --btn-disabled-bg: transparent;
    --btn-disabled-border-color: var(--color-disabled);
  }
}

/* variant text */
@utility btn-text-primary {
  @layer base {
    --btn-bg: transparent;
    --btn-color: var(--color-primary);
    --btn-hover-bg: --alpha(var(--color-primary) / 12%);
    --btn-disabled-bg: transparent;
  }
}
@utility btn-text-secondary {
  @layer base {
    --btn-bg: transparent;
    --btn-color: var(--color-secondary);
    --btn-hover-bg: --alpha(var(--color-secondary) / 12%);
    --btn-disabled-bg: transparent;
  }
}
@utility btn-text-info {
  @layer base {
    --btn-bg: transparent;
    --btn-color: var(--color-info);
    --btn-hover-bg: --alpha(var(--color-info) / 12%);
    --btn-disabled-bg: transparent;
  }
}
@utility btn-text-success {
  @layer base {
    --btn-bg: transparent;
    --btn-color: var(--color-success);
    --btn-hover-bg: --alpha(var(--color-success) / 12%);
    --btn-disabled-bg: transparent;
  }
}
@utility btn-text-warning {
  @layer base {
    --btn-bg: transparent;
    --btn-color: var(--color-warning);
    --btn-hover-bg: --alpha(var(--color-warning) / 12%);
    --btn-disabled-bg: transparent;
  }
}
@utility btn-text-danger {
  @layer base {
    --btn-bg: transparent;
    --btn-color: var(--color-danger);
    --btn-hover-bg: --alpha(var(--color-danger) / 12%);
    --btn-disabled-bg: transparent;
  }
}
@utility btn-text-neutral {
  @layer base {
    --btn-bg: transparent;
    --btn-color: var(--text-color-default);
    --btn-hover-bg: var(--color-hover);
    --btn-disabled-bg: transparent;
  }
}

/* square button */
@utility btn-square {
  @layer base {
    --btn-width: 2.3125rem;
    --btn-height: 2.3125rem;
    --btn-padding-y: 0;
    --btn-padding-x: 0;
    &.btn-sm {
      --btn-width: 1.84375rem;
      --btn-height: 1.84375rem;
      --btn-padding-y: 0;
      --btn-padding-x: 0;
    }
    &.btn-lg {
      --btn-width: 2.75rem;
      --btn-height: 2.75rem;
      --btn-padding-y: 0;
      --btn-padding-x: 0;
    }
  }
}

/* circle button */
@utility btn-circle {
  @layer base {
    --btn-width: 2.3125rem;
    --btn-height: 2.3125rem;
    --btn-padding-y: 0;
    --btn-padding-x: 0;
    --btn-radius: calc(infinity * 1px);
    &.btn-sm {
      --btn-width: 1.84375rem;
      --btn-height: 1.84375rem;
      --btn-padding-y: 0;
      --btn-padding-x: 0;
      --btn-radius: calc(infinity * 1px);
    }
    &.btn-lg {
      --btn-width: 2.75rem;
      --btn-height: 2.75rem;
      --btn-padding-y: 0;
      --btn-padding-x: 0;
    }
  }
}

/* icon button */
@utility btn-icon {
  @layer base {
    --btn-bg: transparent;
    --btn-color: var(--color-active);
    --btn-hover-bg: --alpha(var(--color-active) / 4%);
    --btn-disabled-bg: transparent;
    --btn-padding-y: --spacing(2);
    --btn-padding-x: --spacing(2);
    --btn-radius: calc(infinity * 1px);

    &.btn-sm {
      --btn-padding-y: --spacing(1.25);
      --btn-padding-x: --spacing(1.25);
      --btn-radius: calc(infinity * 1px);
    }
    &.btn-lg {
      --btn-padding-y: --spacing(3);
      --btn-padding-x: --spacing(3);
    }
  }
}
@utility btn-icon-primary {
  @layer base {
    --btn-color: var(--color-primary);
    --btn-hover-bg: --alpha(var(--color-primary) / 4%);
  }
}
@utility btn-icon-secondary {
  @layer base {
    --btn-color: var(--color-secondary);
    --btn-hover-bg: --alpha(var(--color-secondary) / 4%);
  }
}
@utility btn-icon-info {
  @layer base {
    --btn-color: var(--color-info);
    --btn-hover-bg: --alpha(var(--color-info) / 4%);
  }
}
@utility btn-icon-success {
  @layer base {
    --btn-color: var(--color-success);
    --btn-hover-bg: --alpha(var(--color-success) / 4%);
  }
}
@utility btn-icon-warning {
  @layer base {
    --btn-color: var(--color-warning);
    --btn-hover-bg: --alpha(var(--color-warning) / 4%);
  }
}
@utility btn-icon-danger {
  @layer base {
    --btn-color: var(--color-danger);
    --btn-hover-bg: --alpha(var(--color-danger) / 4%);
  }
}

@utility btn-link {
  @layer base {
    --btn-font-weight: var(--font-weight-normal);
    --btn-color: var(--color-primary);
    --btn-bg: transparent;
    --btn-border-color: transparent;
    --btn-hover-color: var(--color-primary-dark);
    --btn-active-color: var(--color-primary-dark);
    --btn-disabled-color: var(--color-disabled);
    --btn-disabled-border-color: transparent;
    --btn-hover-bg: transparent;

    @apply underline;

    @variant focus-visible {
      @apply ring-[--alpha(var(--btn-color)/50%)];
    }
  }
}

@utility btn-sm {
  @layer base {
    --btn-padding-y: --spacing(1.25);
    --btn-padding-x: --spacing(2.5);
    --btn-radius: var(--radius-sm);
    --btn-line-height: 1.25;
  }
}
@utility btn-lg {
  @layer base {
    --btn-font-size: var(--text-base);
    --btn-padding-y: --spacing(2.25);
    --btn-padding-x: --spacing(5.5);
  }
}