@harvest-profit/npk/src/Button/Button.module.css

NPK UI Design System

.ButtonGroup {
  --button-group-bg-color: var(--control-bg-color);
  --button-group-border-color: var(--control-border-color);
  --btn-group-control-size: calc(var(--control-size) - 2px);

  background-color: var(--button-group-bg-color);
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-self: flex-start;
  border-radius: var(--control-radius);
  border: 1px solid var(--button-group-border-color);

  /* variants */
  &[data-variant="danger"] {
    --btn-visual-color: var(--button-danger-fg-color);
    --btn-fg-color: var(--button-danger-fg-color);
    --btn-icon-color: var(--button-danger-fg-color);
    --btn-fg-color--disabled: rgb(from var(--button-danger-fg-color) r g b / 50%);
  }

  &[data-variant="primary"] {
    --btn-visual-color: var(--button-primary-fg-color);
    --btn-fg-color: var(--button-primary-fg-color);
    --btn-icon-color: var(--button-primary-fg-color);
    --btn-fg-color--disabled: var(--button-primary-fg-color);
    --btn-bg-color: var(--button-primary-bg-color);
    --btn-bg-color--hover: var(--button-primary-bg-color--hover);
    --btn-bg-color--active: var(--button-primary-bg-color--active);
    --btn-bg-color--disabled: var(--button-primary-bg-color--disabled);

    --button-group-bg-color: var(--button-primary-bg-color);
  }

  &[data-size="sm"] {
    --btn-group-control-size: calc(var(--control-small-size) - 2px);
    --control-font-size: var(--control-small-font-size);
    --control-gap: var(--control-small-gap);
    --control-padding: var(--control-small-padding);
  }

  &[data-size="lg"] {
    --btn-group-control-size: calc(var(--control-large-size) - 2px);
  }

  & > .Button {
    --btn-bg-color: var(--button-group-bg-color);
    --btn-border-color: transparent;
    --control-size: var(--btn-group-control-size);

    &:nth-child(n + 2 of .Button) {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    &:nth-last-child(n + 2 of .Button) {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      border-right: 1px solid var(--button-group-border-color);
    }
  }
}

.Button {
  font-family: inherit;
  &[data-elevated="true"] {
    --btn-bg-color: var(--button-white-bg-color);
    --btn-bg-color--hover: var(--button-white-bg-color--hover);
    --btn-bg-color--active: var(--button-white-bg-color--active);
    --btn-bg-color--disabled: var(--button-white-bg-color--disabled);

    box-shadow: 1px 2px 3px -3px rgba(0, 0, 0, .76), 0 1px 13px -10px rgba(0, 0, 0, .35);

    &[data-size="lg"] {
      border-color: transparent;
    }
  }

  &[data-invisible="true"] {
    --btn-bg-color: transparent;
    --btn-border-color: transparent;
    --btn-bg-color--hover: var(--button-invisible-bg-color--hover);
    --btn-bg-color--active: var(--button-invisible-bg-color--active);
    --btn-bg-color--disabled: var(--button-invisible-bg-color--disabled);
    --btn-border-color--disabled: transparent;

    &[data-variant="primary"] {
      --btn-visual-color: var(--button-primary-bg-color);
      --btn-fg-color: var(--button-primary-bg-color);
      --btn-fg-color--disabled: var(--button-primary-bg-color--disabled);
    }
  }

  /* variants */
  &[data-variant="danger"] {
    --btn-visual-color: var(--button-danger-fg-color);
    --btn-fg-color: var(--button-danger-fg-color);
    --btn-icon-color: var(--button-danger-fg-color);
    --btn-fg-color--disabled: rgb(from var(--button-danger-fg-color) r g b / 50%);
  }

  &[data-variant="primary"]:not([data-invisible="true"]),
  &[data-variant="avatar"] {
    --btn-visual-color: var(--button-primary-fg-color);
    --btn-fg-color: var(--button-primary-fg-color);
    --btn-icon-color: var(--button-primary-fg-color);
    --btn-fg-color--disabled: var(--button-primary-fg-color);
    --btn-bg-color: var(--button-primary-bg-color);
    --btn-bg-color--hover: var(--button-primary-bg-color--hover);
    --btn-bg-color--active: var(--button-primary-bg-color--active);
    --btn-bg-color--disabled: var(--button-primary-bg-color--disabled);
  }

  &[data-variant="avatar"] {
    border-radius: 100px;
    font-family: sans-serif;
    width: var(--control-size);
    min-width: auto;
    --control-padding: 0;
  }

  &[data-plain="true"] {
    width: 100%;
    border-radius: 0;
    --btn-font-weight: normal;

    [data-component="leadingVisual"] {
      opacity: 0;
    }

    &[data-active="true"] [data-component="leadingVisual"] {
      opacity: 1;
    }
  }
}