@spaced-out/ui-design-system/lib/components/Button/Button.module.css

Sense UI components library

@value (
  colorButtonFillPrimaryEnabled,
  colorButtonFillPrimaryHovered,
  colorButtonFillPrimaryPressed,

  colorButtonFillSecondaryEnabled,
  colorButtonFillSecondaryHovered,
  colorButtonFillSecondaryPressed,

  colorButtonFillTertiaryEnabled,
  colorButtonFillTertiaryHovered,
  colorButtonFillTertiaryPressed,

  colorButtonFillGhostEnabled,
  colorButtonFillGhostHovered,
  colorButtonFillGhostPressed,

  colorButtonFillDangerEnabled,
  colorButtonFillDangerHovered,
  colorButtonFillDangerPressed,

  colorFocusPrimary,
  colorFocusDanger,

  colorFillDisabled,

  colorTextPrimary,
  colorTextInversePrimary,
  colorTextClickable,
  colorTextDisabled,

  colorBorderSecondary,

  colorFillPrimary,
  colorInformation

) from '../../styles/variables/_color.css';

@value (
  size2,
  size42,
  size34,
  size110,
  sizeFluid
) from '../../styles/variables/_size.css';

@value (
  spaceNone,
  spaceSmall,
  spaceMedium,
  spaceXSmall
) from '../../styles/variables/_space.css';

@value (
  borderWidthPrimary,
  borderRadiusMedium,
  borderRadiusSmall,
  borderWidthNone,
  borderWidthTertiary
) from '../../styles/variables/_border.css';

button {
  background: none;
  border: none;
}

.button {
  composes: motionEaseInEaseOut from '../../styles/animation.module.css';
  position: relative;
  display: flex;
  flex-direction: row;
  padding: spaceNone spaceMedium;
  height: size42;
  text-align: left;
  justify-content: center;
  border-radius: borderRadiusMedium;
  align-items: center;
  outline: none;
  cursor: pointer;
  min-width: size110;
}

.buttonRow {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  column-gap: spaceXSmall;
}

.textContainer {
  display: flex;
  align-items: center;
}

.withIconLeft {
  padding: spaceNone spaceMedium spaceNone spaceSmall;
}

.withIconRight {
  padding: spaceNone spaceSmall spaceNone spaceMedium;
}

.onlyIcon {
  padding: spaceNone;
}

.withBothIcon {
  padding: spaceNone spaceSmall;
}

.onlyIcon > .buttonRow {
  column-gap: initial;
}

.medium {
  composes: buttonTextMedium from '../../styles/typography.module.css';
  height: size42;
}

.medium.onlyIcon {
  min-width: size42;
}

.small {
  composes: buttonTextSmall from '../../styles/typography.module.css';
  height: size34;
  border-radius: borderRadiusSmall;
}

.small.onlyIcon {
  min-width: size34;
}

.isFluid {
  width: sizeFluid;
}

.button:focus {
  box-shadow: borderWidthNone borderWidthNone borderWidthNone
    borderWidthTertiary colorFocusPrimary;
}

.primary {
  color: colorTextInversePrimary;
  background-color: colorButtonFillPrimaryEnabled;
}

.primary:hover {
  background-color: colorButtonFillPrimaryHovered;
}

.primary:active {
  background-color: colorButtonFillPrimaryPressed;
}

/* Currently Gradient Buttons don't support hover / active states */
.gradient {
  color: colorTextInversePrimary;
  background-image: linear-gradient(
    to right,
    colorFillPrimary,
    colorInformation
  );
}

.secondary {
  color: colorTextClickable;
  background-color: colorButtonFillSecondaryEnabled;
}

.secondary:hover {
  background-color: colorButtonFillSecondaryHovered;
}

.secondary:active {
  background-color: colorButtonFillSecondaryPressed;
}

.tertiary {
  color: colorTextPrimary;
  border: borderWidthPrimary solid colorBorderSecondary;
  background-color: colorButtonFillTertiaryEnabled;
}

.tertiary:hover {
  background-color: colorButtonFillTertiaryHovered;
}

.tertiary:active {
  background-color: colorButtonFillTertiaryPressed;
}

.ghost {
  color: colorTextPrimary;
  background-color: colorButtonFillGhostEnabled;
  padding: spaceNone spaceSmall;
}

.ghost.withIconLeft {
  padding: spaceNone spaceSmall spaceNone spaceXSmall;
}

.ghost.withIconRight {
  padding: spaceNone spaceXSmall spaceNone spaceSmall;
}

.ghost.onlyIcon {
  padding: spaceNone;
}

.ghost.withBothIcon {
  padding: spaceNone spaceXSmall;
}

.ghost:hover {
  background-color: colorButtonFillGhostHovered;
}

.ghost:active {
  background-color: colorButtonFillGhostPressed;
}

.danger {
  color: colorTextInversePrimary;
  background-color: colorButtonFillDangerEnabled;
}

.danger:hover {
  background-color: colorButtonFillDangerHovered;
}

.danger:active {
  background-color: colorButtonFillDangerPressed;
}

.danger:focus {
  box-shadow: borderWidthNone borderWidthNone borderWidthNone
    borderWidthTertiary colorFocusDanger;
}

.button.disabled {
  pointer-events: none;
  color: colorTextDisabled;
  background-color: colorFillDisabled;
  border: initial;
  background-image: initial;
}

.hidden {
  visibility: hidden;
}

.loader {
  composes: absoluteCenter from '../../styles/utils.module.css';
}