@patreon/studio/module/components/Button/Button.module.css

Patreon Studio Design System

.root {
  align-items: center;
  background-color: var(--Button-backgroundColor);
  border: var(--Button-border);
  border-radius: var(--global-radius-md);
  box-shadow: var(--Button-boxShadow);
  box-sizing: border-box;
  color: var(--Button-foregroundColor);
  display: inline-flex;
  justify-content: center;
  outline-offset: 0;
  padding: var(--Button-padding);
  position: relative;
  text-decoration: none;
  transition: var(--global-transition-regular-easing) var(--global-transition-regular-duration);
}

.root:focus-visible {
    background-color: var(--Button-focusColor, var(--Button-backgroundHoverColor));
  }

.root:focus {
    border: var(--Button-border);
  }

.root:focus:not(:focus-visible) {
    border: var(--Button-borderHover);
    outline: none;
  }

.root[aria-disabled='true'] {
    opacity: var(--global-opacity-disabled);
  }

.root.isActive:hover {
      background-color: var(--Button-backgroundHoverColor);
      border: var(--Button-borderHover);
      box-shadow: var(--Button-boxShadowHover);
    }

.root.isActive:active {
      background-color: var(--Button-backgroundPressedColor);
      border: var(--Button-borderPressed);
    }

.root.isInactive {
    cursor: not-allowed
  }

.root.cornersPill {
    border-radius: var(--global-radius-pill);
  }

.root.hasDimensions {
    max-height: var(--Button-dimension);
    min-height: var(--Button-dimension);
  }

.root.hasDimensions.variantIconOnly {
      min-width: var(--Button-dimension);
    }

/* Fluid */
.fluidSet { width: 100%; }
.fluidUnset { width: auto; width: initial; }

/* Themes */
.themePrimary.isFilled {
    --Button-foregroundColor: var(--component-button-onAction-default);
    --Button-backgroundColor: var(--component-button-action-default);
    --Button-backgroundHoverColor: var(--component-button-action-hover);
    --Button-backgroundPressedColor: var(--component-button-action-pressed);
    --Button-border: var(--global-borderWidth-thin) solid transparent;
    --Button-borderHover: var(--global-borderWidth-thin) solid transparent;
    --Button-borderPressed: var(--global-borderWidth-thin) solid transparent;
  }
.themePrimary.isUnfilled {
    --Button-foregroundColor: var(--global-primary-action-default);
    --Button-backgroundColor: 'transparent';
    --Button-backgroundHoverColor: var(--global-primary-muted-hover);
    --Button-backgroundPressedColor: var(--global-primary-muted-pressed);
    --Button-border: var(--global-borderWidth-thin) solid transparent;
    --Button-borderHover: var(--global-borderWidth-thin) solid transparent;
    --Button-borderPressed: var(--global-borderWidth-thin) solid transparent;
    --Button-focusColor: var(--global-primary-muted-default);
  }

.themeSecondary.isFilled {
    --Button-foregroundColor: var(--global-primary-onMuted-default);
    --Button-backgroundColor: var(--global-secondary-action-default);
    --Button-backgroundHoverColor: var(--global-secondary-action-hover);
    --Button-backgroundPressedColor: var(--global-secondary-action-pressed);
    --Button-border: var(--global-borderWidth-thin) solid transparent;
    --Button-borderHover: var(--global-borderWidth-thin) solid transparent;
    --Button-borderPressed: var(--global-borderWidth-thin) solid transparent;
  }

.themeSecondary.isUnfilled {
    --Button-foregroundColor: var(--global-primary-onMuted-default);
    --Button-backgroundColor: 'transparent';
    --Button-backgroundHoverColor: var(--global-secondary-muted-hover);
    --Button-backgroundPressedColor: var(--global-secondary-muted-pressed);
    --Button-border: var(--global-borderWidth-thin) solid transparent;
    --Button-borderHover: var(--global-borderWidth-thin) solid transparent;
    --Button-borderPressed: var(--global-borderWidth-thin) solid transparent;
    --Button-focusColor: var(--global-secondary-muted-default);
  }

.themeTertiary.isFilled {
    --Button-foregroundColor: var(--global-content-regular-default);
    --Button-backgroundColor: 'transparent';
    --Button-backgroundHoverColor: 'transparent';
    --Button-backgroundPressedColor: 'transparent';
    --Button-border: var(--global-borderWidth-thin) solid var(--global-border-action-default);
    --Button-borderHover: var(--global-borderWidth-thin) solid var(--global-border-action-hover);
    --Button-borderPressed: var(--global-borderWidth-thin) solid var(--global-border-action-pressed);
  }

.themeTertiary.isUnfilled {
    --Button-foregroundColor: var(--global-content-muted-default);
    --Button-backgroundColor: 'transparent';
    --Button-backgroundHoverColor: var(--global-secondary-muted-hover);
    --Button-backgroundPressedColor: var(--global-secondary-muted-pressed);
    --Button-border: var(--global-borderWidth-thin) solid transparent;
    --Button-borderHover: var(--global-borderWidth-thin) solid transparent;
    --Button-borderPressed: var(--global-borderWidth-thin) solid transparent;
    --Button-focusColor: var(--global-secondary-muted-default);
  }

.themeCritical.isFilled {
    --Button-foregroundColor: var(--global-critical-onAction-default);
    --Button-backgroundColor: var(--global-critical-action-default);
    --Button-backgroundHoverColor: var(--global-critical-action-hover);
    --Button-backgroundPressedColor: var(--global-critical-action-pressed);
    --Button-border: var(--global-borderWidth-thin) solid transparent;
    --Button-borderHover: var(--global-borderWidth-thin) solid transparent;
    --Button-borderPressed: var(--global-borderWidth-thin) solid transparent;
  }

.themeCritical.isUnfilled {
    --Button-foregroundColor: var(--global-critical-action-default);
    --Button-backgroundColor: 'transparent';
    --Button-backgroundHoverColor: var(--global-critical-muted-default);
    --Button-backgroundPressedColor: var(--global-critical-muted-hover);
    --Button-border: var(--global-borderWidth-thin) solid transparent;
    --Button-borderHover: var(--global-borderWidth-thin) solid transparent;
    --Button-borderPressed: var(--global-borderWidth-thin) solid transparent;
  }

.themeFloating.isFilled {
    --Button-foregroundColor: var(--global-content-regular-default);
    --Button-backgroundColor: var(--global-bg-elevated-default);
    --Button-backgroundHoverColor: var(--global-bg-elevated-hover);
    --Button-backgroundPressedColor: var(--global-bg-elevated-pressed);
    --Button-border: var(--global-borderWidth-thin) solid transparent;
    --Button-borderHover: var(--global-borderWidth-thin) solid transparent;
    --Button-borderPressed: var(--global-borderWidth-thin) solid transparent;
    --Button-boxShadow: var(--global-boxShadow-mid);
  }

.themeFloating.isUnfilled {
    --Button-foregroundColor: var(--global-content-regular-default);
    --Button-backgroundColor: 'transparent';
    --Button-backgroundHoverColor: var(--global-bg-elevated-hover);
    --Button-backgroundPressedColor: var(--global-bg-elevated-pressed);
    --Button-border: var(--global-borderWidth-thin) solid transparent;
    --Button-borderHover: var(--global-borderWidth-thin) solid transparent;
    --Button-borderPressed: var(--global-borderWidth-thin) solid transparent;
    --Button-boxShadowHover: var(--global-boxShadow-mid);
  }

.themeInsetWhite.isFilled {
    --Button-foregroundColor: var(--global-constant-black-default);
    --Button-backgroundColor: var(--global-constant-white-default);
    --Button-backgroundHoverColor: var(--global-constant-white-hover);
    --Button-backgroundPressedColor: var(--global-constant-white-pressed);
    --Button-border: var(--global-borderWidth-thin) solid var(--global-constant-blackSubtle-default);
    --Button-borderHover: var(--global-borderWidth-thin) solid var(--global-constant-blackSubtle-hover);
    --Button-borderPressed: var(--global-borderWidth-thin) solid var(--global-constant-blackSubtle-pressed);
  }

.themeInsetWhite.isUnfilled {
    --Button-foregroundColor: var(--global-constant-white-default);
    --Button-backgroundColor: 'transparent';
    --Button-backgroundHoverColor: var(--global-constant-blackSubtle-hover);
    --Button-backgroundPressedColor: var(--global-constant-blackSubtle-pressed);
    --Button-border: var(--global-borderWidth-thin) solid var(--global-constant-blackSubtle-default);
    --Button-borderHover: var(--global-borderWidth-thin) solid var(--global-constant-blackSubtle-hover);
    --Button-borderPressed: var(--global-borderWidth-thin) solid var(--global-constant-blackSubtle-pressed);
  }

.themeInsetBlack.isFilled {
    --Button-foregroundColor: var(--global-constant-white-default);
    --Button-backgroundColor: var(--global-constant-blackMuted-default);
    --Button-backgroundHoverColor: var(--global-constant-blackMuted-hover);
    --Button-backgroundPressedColor: var(--global-constant-blackMuted-pressed);
    --Button-border: var(--global-borderWidth-thin) solid transparent;
    --Button-borderHover: var(--global-borderWidth-thin) solid transparent;
    --Button-borderPressed: var(--global-borderWidth-thin) solid transparent;
  }

.themeInsetBlack.isUnfilled {
    --Button-foregroundColor: var(--global-constant-white-default);
    --Button-backgroundColor: 'transparent';
    --Button-backgroundHoverColor: var(--global-constant-blackSubtle-hover);
    --Button-backgroundPressedColor: var(--global-constant-blackSubtle-pressed);
    --Button-border: var(--global-borderWidth-thin) solid transparent;
    --Button-borderHover: var(--global-borderWidth-thin) solid transparent;
    --Button-borderPressed: var(--global-borderWidth-thin) solid transparent;
  }

/* Sizes */
.sizeXs {
  --Button-dimension: 32px;
}
.sizeXs.variantLabelOnly,.sizeXs.variantLabelAndIcon,.sizeXs.variantDisclosureAndLabel,.sizeXs.variantIconAndDisclosureOnly,.sizeXs.variantIconLabelAndDisclosure { 
    --Button-padding: 0 8px;
  }

.sizeSm {
  --Button-dimension: 36px;
}

.sizeSm.variantLabelOnly { --Button-padding: 0 18px; }

.sizeSm.variantLabelAndIcon { --Button-padding: 0 18px 0 14px; }

.sizeSm.variantDisclosureAndLabel { --Button-padding: 0 14px 0 18px; }

.sizeSm.variantIconAndDisclosureOnly { --Button-padding: 0 8px; }

.sizeSm.variantIconLabelAndDisclosure { --Button-padding: 0 14px; }

.sizeMd {
  --Button-dimension: 44px;
}

.sizeMd.variantLabelOnly { --Button-padding: 0 20px; }

.sizeMd.variantLabelAndIcon { --Button-padding: 0 20px 0 18px; }

.sizeMd.variantDisclosureAndLabel { --Button-padding: 0 18px 0 20px; }

.sizeMd.variantIconAndDisclosureOnly { --Button-padding: 0 10px; }

.sizeMd.variantIconLabelAndDisclosure { --Button-padding: 0 18px; }

.sizeLg {
  --Button-dimension: 64px;
}

.sizeLg.variantLabelOnly { --Button-padding: 0 34px; }

.sizeLg.variantLabelAndIcon { --Button-padding: 0 34px 0 30px; }

.sizeLg.variantDisclosureAndLabel { --Button-padding: 0 30px 0 34px; }

.sizeLg.variantIconAndDisclosureOnly { --Button-padding: 0 20px; }

.sizeLg.variantIconLabelAndDisclosure { --Button-padding: 0 30px; }

/* Content container */
.contentContainer {
  align-items: center;
  -moz-column-gap: var(--global-space-x8);
       column-gap: var(--global-space-x8);
  display: flex;
  justify-content: center;
  margin: auto 0;
  padding: 0;
  visibility: visible;
}
.isLoading .contentContainer {
    visibility: hidden;
  }
.hasTextAlign .contentContainer {
    width: 100%;
  }

/* Label container */
.labelContainer {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  white-space: nowrap;
}
.hasTextAlign .labelContainer {
    flex-grow: 1;
  }
.textAlignLeft .labelContainer {
    align-items: flex-start;
  }
.textAlignRight .labelContainer {
    align-items: flex-end;
  }

/* Loading spinner */
.loadingWrapper {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}
@media (min-width: 588px) {

  .fluidSetBreakpointSm { width: 100%;
  }

  .fluidUnsetBreakpointSm { width: auto; width: initial;
  }
.sizeXs {
    --Button-dimension: 28px;
}

.sizeSm {
    --Button-dimension: 32px;
}
    .sizeSm.variantLabelOnly { --Button-padding: 0 16px; }
    .sizeSm.variantLabelAndIcon { --Button-padding: 0 16px 0 12px; }
    .sizeSm.variantDisclosureAndLabel { --Button-padding: 0 12px 0 16px; }
    .sizeSm.variantIconLabelAndDisclosure { --Button-padding: 0 12px; }

.sizeMd {
    --Button-dimension: 40px;
}
    .sizeMd.variantLabelAndIcon { --Button-padding: 0 20px 0 16px; }
    .sizeMd.variantDisclosureAndLabel { --Button-padding: 0 16px 0 20px; }
    .sizeMd.variantIconLabelAndDisclosure { --Button-padding: 0 16px; }

.sizeLg {
    --Button-dimension: 52px;
}
    .sizeLg.variantLabelOnly { --Button-padding: 0 24px; }
    .sizeLg.variantLabelAndIcon { --Button-padding: 0 24px 0 20px; }
    .sizeLg.variantDisclosureAndLabel { --Button-padding: 0 20px 0 24px; }
    .sizeLg.variantIconAndDisclosureOnly { --Button-padding: 0 14px; }
    .sizeLg.variantIconLabelAndDisclosure { --Button-padding: 0 20px; }
}
@media (min-width: 796px) {

  .fluidSetBreakpointMd { width: 100%;
  }

  .fluidUnsetBreakpointMd { width: auto; width: initial;
  }
}
@media (min-width: 978px) {

  .fluidSetBreakpointLg { width: 100%;
  }

  .fluidUnsetBreakpointLg { width: auto; width: initial;
  }
}
@media (min-width: 1280px) {

  .fluidSetBreakpointXl { width: 100%;
  }

  .fluidUnsetBreakpointXl { width: auto; width: initial;
  }
}
@media (min-width: 1440px) {

  .fluidSetBreakpointXxl { width: 100%;
  }

  .fluidUnsetBreakpointXxl { width: auto; width: initial;
  }
}