Desktop/stylesheets/components/Button.scss

// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only

@use 'sass:color';
@use '../mixins';
@use '../variables';

.module-Button {
  @include mixins.button-reset;
  & {
    border-radius: 4px;
    padding-block: 8px;
    padding-inline: 16px;
    text-align: center;
    -webkit-app-region: no-drag;
  }

  &:focus {
    outline: none;
    @include mixins.keyboard-mode {
      @include mixins.axo-focus-ring;
    }
  }

  @include mixins.disabled {
    cursor: not-allowed;
  }

  &--large {
    @include mixins.font-title-2;
    font-weight: bold;
  }

  &--medium {
    @include mixins.font-body-1-bold;
  }

  &--small {
    @include mixins.font-body-2;
    @include mixins.rounded-corners;
    padding-block: 6px;
    padding-inline: 12px;
  }

  &--primary {
    color: var(--axo-color-label-primary-oncolor);
    background: var(--axo-color-fill-accent);

    &:not([disabled]):active {
      background: var(--axo-color-fill-accent-pressed);
    }

    &[disabled],
    &--discouraged {
      color: var(--axo-color-label-disabled-oncolor);
    }
  }

  &--secondary {
    background: var(--axo-color-fill-secondary);
    color: var(--axo-color-label-primary);

    &:not([disabled]):active {
      background: var(--axo-color-fill-secondary-pressed);
    }

    &[disabled],
    &--discouraged {
      color: var(--axo-color-label-disabled-oncolor);
    }

    &--affirmative {
      color: var(--axo-color-label-accent);

      &[disabled],
      &--discouraged {
        color: var(--axo-color-label-accent-disabled);
      }
    }

    &--destructive {
      color: var(--axo-color-label-destructive);

      &[disabled],
      &--discouraged {
        color: var(--axo-color-label-destructive-disabled);
      }
    }
  }

  &--destructive {
    color: var(--axo-color-label-primary-oncolor);
    background: var(--axo-color-fill-destructive);

    &:not([disabled]):active {
      background: var(--axo-color-fill-destructive-pressed);
    }

    &[disabled],
    &--discouraged {
      color: var(--axo-color-label-disabled-oncolor);
    }
  }

  &--calling {
    color: var(--axo-color-label-primary-oncolor);
    background: var(--axo-color-fill-affirmative);

    &:not([disabled]):active {
      background: var(--axo-color-fill-affirmative-pressed);
    }

    &[disabled],
    &--discouraged {
      color: var(--axo-color-label-disabled-oncolor);
    }
  }

  &--system-message {
    background: var(--axo-color-fill-primary);
    color: var(--axo-color-label-accent);
    @include mixins.rounded-corners;

    &:not(:disabled, &--discouraged) {
      &:active {
        background: var(--axo-color-fill-primary-pressed);
      }
    }

    &:disabled,
    &--discouraged {
      color: var(--axo-color-label-accent-disabled);
    }

    &.module-Button--small {
      padding-top: 5px;
      padding-bottom: 5px;
      font-weight: 500;
    }
  }
}