@swrve/core/src/button/styles.css

Core set of Swrve UI Components

.btn {
  @apply .inline-flex justify-center .items-center  .border .leading-button .px-4 .py-2 .rounded .font-bold .text-center .whitespace-no-wrap .select-none;
  transition: background 0.2s;
}

.btn:focus {
  outline: none;
}

.primary-btn {
  @apply .border-mountainGreen-100 .bg-mountainGreen-100 .text-cloudWhite;
}

.primary-btn:hover,
.primary-btn:focus {
  @apply .border-mountainGreen-120 .bg-mountainGreen-120;
}

.primary-light-btn {
  @apply .border-mountainGreen-10 .bg-mountainGreen-10 .text-mountainGreen-100;
}

.primary-light-btn:hover,
.primary-light-btn:focus {
  @apply .border-mountainGreen-20 .bg-mountainGreen-20;
}

.primary-outline-btn {
  @apply .border-mountainGreen-100 .text-mountainGreen-100;
}

.primary-outline-btn:hover,
.primary-outline-btn:focus {
  @apply .bg-mountainGreen-10;
}

.secondary-btn {
  @apply .border-gauloiseBlue-100 .bg-gauloiseBlue-100 .text-cloudWhite;
}

.secondary-btn:hover,
.secondary-btn:focus {
  @apply .border-gauloiseBlue-120 .bg-gauloiseBlue-120;
}

.secondary-light-btn {
  @apply .border-gauloiseBlue-10 .bg-gauloiseBlue-10 .text-gauloiseBlue-100;
}

.secondary-light-btn:hover,
.secondary-light-btn:focus {
  @apply .border-gauloiseBlue-20 .bg-gauloiseBlue-20;
}

.secondary-outline-btn {
  @apply .border-gauloiseBlue-100 .text-gauloiseBlue-100;
}

.secondary-outline-btn:hover,
.secondary-outline-btn:focus {
  @apply .bg-gauloiseBlue-10;
}

.neutral-btn {
  @apply .border-aquaHaze .bg-aquaHaze .text-regentGrey;
}

.neutral-btn:hover,
.neutral-btn:focus {
  @apply .border-porcelain .bg-porcelain;
}

.neutral-outline-btn {
  @apply .border-porcelain .text-regentGrey;
}

.neutral-outline-btn:hover,
.neutral-outline-btn:focus {
  @apply .border-gauloiseBlue-20 .bg-gauloiseBlue-10 .text-gauloiseBlue-100;
}

.selected-neutral-outline-btn {
  @apply .border-gauloiseBlue-100 .bg-gauloiseBlue-100 .text-cloudWhite;
}

.selected-neutral-outline-btn:hover,
.selected-neutral-outline-btn:focus {
  @apply .border-gauloiseBlue-100 .bg-gauloiseBlue-100 .text-cloudWhite;
}

.neutral-secondary-btn {
  @apply .border-porcelain  .font-normal .text-jungleBlack;
}

.neutral-secondary-btn:hover,
.neutral-secondary-btn:focus {
  @apply .border-secondary-20 .bg-secondary-10 .text-secondary-100;
}

.selected-neutral-secondary-btn {
  @apply .border-secondary-100 .bg-secondary-10 .text-secondary-100 .font-normal;
}

.selected-neutral-secondary-btn:hover,
.selected-neutral-secondary-btn:focus {
  @apply .border-secondary-120 .bg-secondary-10 .text-secondary-100;
}

.destructive-btn {
  @apply .border-radicalRed-100 .bg-radicalRed-100 .text-cloudWhite;
}

.destructive-btn:hover,
.destructive-btn:focus {
  @apply .border-radicalRed-120 .bg-radicalRed-120;
}

.dashed-btn {
  @apply .border-dashed .border-porcelain .text-regentGrey .bg-haze;
}

.dashed-btn:hover,
.dashed-btn:focus {
  @apply .bg-porcelain;
}