styles/src/mixins/_button.scss

@use "sass:list";
@use 'var' as *;
@use 'function' as *;

@mixin button-plain($type, $modify) {
  $button-color-types: (
    '': (
      'text-color': (
        'color',
        $type,
      ),
      'border-color': (
        'color',
        $type,
        'light-7',
      ),
      'bg-color': (
        'color',
        $type,
        'light-7',
      ),
    ),
    'hover': (
      'text-color': (
        'color',
        $type,
      ),
      'border-color': (
        'color',
        $type,
        'light-8',
      ),
      'bg-color': (
        'color',
        $type,
        'light-8',
      )
    ),
    'active': (
      'text-color': (
        'color',
        $type,
      ),
      'border-color': (
        'color',
        $type,
        'light-7',
      ),
      'bg-color': (
        'color',
        $type,
        'light-7',
      ),
    ),
  );

  $button-color-types-primary: (
    '': (
      'text-color': (
        'button',
        'font-color',
        $type,
      ),
      'border-color': (
        'button',
        'bg-color',
        $type,
      ),
      'bg-color': (
        'button',
        'bg-color',
        $type,
      ),
    ),
    'hover': (
      'text-color': (
        'button',
        'hover',
        'font-color',
        $type,
      ),
      'border-color': (
        'button',
        'hover',
        'bg-color',
        $type
      ),
      'bg-color': (
        'button',
        'hover',
        'bg-color',
        $type
      ),
    ),
    'active': (
      'border-color': (
        'button',
        'active',
        'bg-color',
        $type,
      ),
      'bg-color': (
        'button',
        'active',
        'bg-color',
        $type,
      ),
    )
  );

  @if $type == 'primary' {
    @each $key, $typeMap in $button-color-types-primary {
      @each $typeColor, $list in $typeMap {
        @include css-var-from-global(('button', $key, $typeColor), list.append($list, $modify));
      }
    }

    &.is-disabled {
      &,
      &:hover,
      &:focus,
      &:active {
        color: getCssVar('button', 'disabled', 'font-color', $type, $modify);
        background-color: getCssVar('button', 'disabled', 'bg-color', $type, $modify);
        border-color: transparent
      }
    }
  } @else {
    @each $key, $typeMap in $button-color-types {
      @each $typeColor, $list in $typeMap {
        @include css-var-from-global(('button', $key, $typeColor), $list);
      }
    }

    &.is-disabled {
      &,
      &:hover,
      &:focus,
      &:active {
        color: getCssVar('color', $type, 'light-5');
        background-color: getCssVar('color', $type, 'light-9');
        border-color: transparent
      }
    }
  }
}

@mixin button-ghost($type) {
  $button-color-types: (
    '': (
      'text-color': (
        'color',
        $type,
      ),
      'border-color': (
        'color',
        $type,
      ),
    ),
    'hover': (
      'text-color': (
        'color',
        $type,
        'light-3'
      ),
      'border-color': (
        'color',
        $type,
        'light-3'
      ),
    ),
    'active': (
      'text-color': (
        'color',
        $type,
      ),
      'border-color': (
        'color',
        $type,
      ),
    ),
  );

  @each $key, $typeMap in $button-color-types {
    @each $typeColor, $list in $typeMap {
      @include css-var-from-global(('button', $key, $typeColor), $list);
    }
  }

  @if $type == 'primary' {
    &.is-disabled {
      &,
      &:hover,
      &:focus,
      &:active {
        color: getCssVar('button', 'disabled', 'font-color', $type, 'ghost');
        border-color: getCssVar('button', 'disabled', 'border-color', $type, 'ghost');
        background-color: transparent;
      }
    }
  } @else {
    &.is-disabled {
      &,
      &:hover,
      &:focus,
      &:active {
        color: getCssVar('color', $type, 'light-5');
        border-color: getCssVar('border-color', $type, 'light-5');
        background-color: transparent;
      }
    }
  }
}

@mixin button-variant($type) {
  $button-color-types: (
    '': (
      'text-color': (
        'color',
        'white',
      ),
      'border-color': (
        'color',
        $type,
      ),
      'bg-color': (
        'color',
        $type,
      ),
      'outline-color': (
        'color',
        $type,
        'light-5',
      ),
      'active-color': (
        'color',
        $type,
        'dark-2',
      ),
    ),
    'hover': (
      'text-color': (
        'color',
        'white',
      ),
      'link-text-color': (
        'color',
        $type,
        'light-5',
      ),
      'border-color': (
        'color',
        $type,
        'light-3',
      ),
      'bg-color': (
        'color',
        $type,
        'light-3',
      ),
    ),
    'active': (
      'border-color': (
        'color',
        $type,
        'dark-2',
      ),
      'bg-color': (
        'color',
        $type,
        'dark-2',
      ),
    ),
    'disabled': (
      'text-color': (
        'color',
        'white',
      ),
      'border-color': (
        'color',
        $type,
        'light-5',
      ),
      'bg-color': (
        'color',
        $type,
        'light-5',
      ),
    ),
  );

  $button-color-types-primary: (
    '': (
      'text-color': (
        'button',
        'font-color',
        $type,
      ),
      'border-color': (
        'button',
        'bg-color',
        $type,
      ),
      'bg-color': (
        'button',
        'bg-color',
        $type,
      ),
    ),
    'hover': (
      'text-color': (
        'button',
        'hover',
        'font-color',
        $type,
      ),
      'border-color': (
        'button',
        'hover',
        'bg-color',
        $type
      ),
      'bg-color': (
        'button',
        'hover',
        'bg-color',
        $type
      ),
    ),
    'active': (
      'border-color': (
        'button',
        'active',
        'bg-color',
        $type,
      ),
      'bg-color': (
        'button',
        'active',
        'bg-color',
        $type,
      ),
    ),
    'disabled': (
      'text-color': (
        'button',
        'disabled',
        'font-color',
        $type,
      ),
      'border-color': (
        'button',
        'disabled',
        'border-color',
        $type,
      ),
      'bg-color': (
        'button',
        'disabled',
        'bg-color',
        $type
      ),
    ),
  );

  @if $type == 'primary' {
    // 解决 border 和 background 设置相同透明度颜色，border 会叠加
    background-clip: padding-box;
    @each $key, $typeMap in $button-color-types-primary {
      @each $typeColor, $list in $typeMap {
        @include css-var-from-global(('button', $key, $typeColor), $list);
      }
    }
  } @else {
    @each $key, $typeMap in $button-color-types {
      @each $typeColor, $list in $typeMap {
        @include css-var-from-global(('button', $key, $typeColor), $list);
      }
    }
  }

  &.is-plain,
  &.is-text,
  &.is-link {
    @include button-plain($type, 'plain');
  }

  &.is-ghost {
    @include css-var-from-global(('button', 'bg-color'), ('color', 'white'));
    @include css-var-from-global(('button', 'hover', 'bg-color'), ('color', 'white'));
    @include css-var-from-global(('button', 'active', 'bg-color'), ('color', 'white'));
    @include button-ghost($type);
  }
}

@mixin button-size(
  $padding-vertical,
  $padding-horizontal,
  $font-size,
  $border-radius
) {
  padding: $padding-vertical $padding-horizontal;
  font-size: $font-size;
  border-radius: $border-radius;
  &.is-round {
    padding: $padding-vertical $padding-horizontal;
  }
}