@frontify/fondue/dist/components/Button/ButtonClasses.es.js

Design system of Frontify

import { ButtonEmphasis as o, ButtonStyle as t, ButtonRounding as n, ButtonSize as e } from "./ButtonTypes.es.js";
const i = "tw-group tw-border tw-box-box tw-relative tw-flex tw-items-center tw-justify-center tw-cursor-pointer tw-outline-none tw-font-body tw-font-medium ", u = "tw-not-allowed tw-pointer-events-none tw-border-transparent tw-text-box-disabled-inverse tw-bg-box-disabled ", g = {
  [n.Medium]: "tw-rounded",
  [n.Full]: "tw-rounded-full"
}, s = {
  [e.Small]: {
    default: "tw-px-2 tw-h-6 tw-text-body-small ",
    iconOnly: "tw-h-6 tw-w-6 "
  },
  [e.Medium]: {
    default: "tw-px-4 tw-h-9 tw-text-body-medium ",
    iconOnly: "tw-h-9 tw-w-9 "
  },
  [e.Large]: {
    default: "tw-px-6 tw-h-12 tw-text-body-large ",
    iconOnly: "tw-h-12 tw-w-12 "
  }
}, v = {
  [e.Small]: "tw--ml-0.5 tw-mr-1 ",
  [e.Medium]: "tw--ml-1 tw-mr-1.5 ",
  [e.Large]: "tw--ml-1 tw-mr-2 "
}, r = {
  [t.Default]: {
    button: "tw-border-transparent hover:tw-bg-button-background-hover hover:tw-border-button-border active:tw-bg-button-background-pressed ",
    icon: "tw-text-button-icon group-hover:tw-text-button-icon-hover group-active:tw-text-button-icon-pressed tw-leading-none ",
    text: "tw-text-button-text group-hover:tw-text-button-text-hover group-active:tw-text-button-text-pressed "
  },
  [t.Positive]: {
    button: "tw-border-transparent hover:tw-bg-button-positive-background-hover hover:tw-border-button-positive-border active:tw-bg-button-positive-background-pressed ",
    icon: "tw-text-button-strong-positive-icon group-hover:tw-text-button-strong-positive-icon-hovergroup-active:tw-text-button-strong-positive-icon-pressed tw-leading-none ",
    text: "tw-text-button-positive-text group-hover:tw-text-button-positive-text-hover group-active:tw-text-button-positive-text-pressed "
  },
  [t.Negative]: {
    button: "tw-border-transparent hover:tw-bg-button-negative-background-hover hover:tw-border-button-negative-border active:tw-bg-button-negative-background-pressed ",
    icon: "tw-text-button-negative-icon group-hover:tw-text-button-negative-icon-hovergroup-active:tw-text-button-negative-icon-pressed tw-leading-none ",
    text: "tw-text-button-negative-text group-hover:tw-text-button-negative-text-hovergroup-active:tw-text-button-negative-text-pressed "
  },
  [t.Danger]: {
    button: "tw-border-transparent hover:tw-bg-button-background-hover active:tw-bg-button-background-pressed ",
    icon: "tw-text-button-negative-icon group-hover:tw-text-button-negative-icon-hovergroup-active:tw-text-button-negative-icon-pressed tw-leading-none ",
    text: "tw-text-button-negative-icon group-hover:tw-text-button-negative-icon-hovergroup-active:tw-text-button-negative-icon-pressed "
  },
  [t.Loud]: {
    button: "tw-border-transparent hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed ",
    icon: "tw-text-box-selected-inverse group-hover:tw-text-box-selected-inverse-hovergroup-active:tw-text-box-selected-inverse-pressed tw-leading-none ",
    text: "tw-text-box-selected-inverse group-hover:tw-text-box-selected-inverse-hovergroup-active:tw-text-box-selected-inverse-pressed "
  }
}, w = {
  [o.Default]: {
    [t.Default]: {
      button: "tw-bg-button-background tw-border-button-border hover:tw-bg-button-background-hover active:tw-bg-button-background-pressed ",
      icon: "tw-text-button-icon group-hover:tw-text-button-icon-hover group-active:tw-text-button-icon-pressed tw-leading-none ",
      text: "tw-text-button-text group-hover:tw-text-button-text-hover group-active:tw-text-button-text-pressed "
    },
    [t.Positive]: {
      button: "tw-bg-button-positive-background tw-border-button-positive-border hover:tw-bg-button-positive-background-hover active:tw-bg-button-positive-background-pressed ",
      icon: "tw-text-button-positive-icon group-hover:tw-text-button-positive-icon-hover group-active:tw-text-button-positive-icon-pressed tw-leading-none ",
      text: "tw-text-button-positive-text group-hover:tw-text-button-positive-text-hover group-active:tw-text-button-positive-text-pressed "
    },
    [t.Negative]: {
      button: "tw-bg-button-negative-background tw-border-button-negative-border hover:tw-bg-button-negative-background-hover active:tw-bg-button-negative-background-pressed ",
      icon: "tw-text-button-negative-icon group-hover:tw-text-button-negative-icon-hovergroup-active:tw-text-button-negative-icon-pressed tw-leading-none ",
      text: "tw-text-button-negative-text group-hover:tw-text-button-negative-text-hovergroup-active:tw-text-button-negative-text-pressed "
    },
    [t.Danger]: {
      button: "tw-bg-button-background tw-border-button-border hover:tw-bg-button-background-hover active:tw-bg-button-background-pressed ",
      icon: "tw-text-button-negative-icon group-hover:tw-text-button-negative-icon-hovergroup-active:tw-text-button-negative-icon-pressed tw-leading-none ",
      text: "tw-text-button-negative-icon group-hover:tw-text-button-negative-icon-hovergroup-active:tw-text-button-negative-icon-pressed "
    },
    [t.Loud]: {
      button: "tw-bg-box-selected tw-border-button-border hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed ",
      icon: "tw-text-box-selected-inverse group-hover:tw-text-box-selected-inverse-hovergroup-active:tw-text-box-selected-inverse-pressed tw-leading-none ",
      text: "tw-text-box-selected-inverse group-hover:tw-text-box-selected-inverse-hovergroup-active:tw-text-box-selected-inverse-pressed "
    }
  },
  [o.Strong]: {
    [t.Default]: {
      button: "tw-bg-button-strong-background tw-border-button-strong-border hover:tw-bg-button-strong-background-hover active:tw-bg-button-strong-background-pressed ",
      icon: "tw-text-button-strong-icon group-hover:tw-text-button-strong-icon-hover group-active:tw-text-button-strong-icon-pressed tw-leading-none ",
      text: "tw-text-button-strong-icon group-hover:tw-text-button-strong-icon-hover group-active:tw-text-button-strong-text-pressed "
    },
    [t.Positive]: {
      button: "tw-bg-button-strong-positive-background tw-border-button-strong-positive-border hover:tw-bg-button-strong-positive-background-hover active:tw-bg-button-strong-positive-background-pressed ",
      icon: "tw-text-button-strong-positive-icon group-hover:tw-text-button-strong-positive-icon-hover group-active:tw-text-button-strong-positive-icon-pressed tw-leading-none ",
      text: "tw-text-button-strong-positive-text group-hover:tw-text-button-strong-positive-text-hover group-active:tw-text-button-strong-positive-text-pressed "
    },
    [t.Negative]: {
      button: "tw-bg-button-strong-negative-background tw-border-button-strong-negative-border hover:tw-bg-button-strong-negative-background-hover active:tw-bg-button-strong-negative-background-pressed ",
      icon: "tw-text-button-strong-negative-icon group-hover:tw-text-button-strong-negative-icon-hovergroup-active:tw-text-button-strong-negative-icon-pressed tw-leading-none ",
      text: "tw-text-button-strong-negative-text group-hover:tw-text-button-strong-negative-text-hovergroup-active:tw-text-button-strong-negative-text-pressed "
    },
    [t.Danger]: {
      button: "tw-bg-button-danger-background tw-border-button-danger-border hover:tw-bg-button-danger-background-hover active:tw-bg-button-danger-background-pressed ",
      icon: "tw-text-button-danger-icon group-hover:tw-text-button-danger-icon-hovergroup-active:tw-text-button-danger-icon-pressed tw-leading-none ",
      text: "tw-text-button-danger-text group-hover:tw-text-button-danger-text-hovergroup-active:tw-text-button-danger-text-pressed "
    },
    [t.Loud]: {
      button: "tw-bg-box-selected-strong tw-border-box-selected-strong hover:tw-bg-box-selected-strong-hover active:tw-bg-box-selected-strong-pressed ",
      icon: "tw-text-box-selected-strong-inverse group-hover:tw-text-box-selected-strong-inversegroup-active:tw-text-box-selected-strong-inverse tw-leading-none ",
      text: "tw-text-box-selected-strong-inverse group-hover:tw-text-box-selected-strong-inversegroup-active:tw-text-box-selected-strong-inverse "
    }
  },
  [o.Weak]: r
};
export {
  i as ButtonCommonClasses,
  u as ButtonDisabledClasses,
  g as ButtonRoundingClasses,
  s as ButtonSizeClasses,
  w as ButtonStyleClasses,
  v as IconSpacingClasses
};
//# sourceMappingURL=ButtonClasses.es.js.map