@tendaui/components 1.0.0

package/styles/components/button/_index.scss

@@ -0,0 +1,511 @@
+@use 'sass:map';
+@import '../../vars.scss';
+
+@import './_vars.scss';
+
+@import './_mixins.scss';
+
+@import '../../mixins/_reset.scss';
+
+@function btn-color($theme, $state: default) {
+  $theme-map: map.get($btn-colors, $theme);
+
+  @if $theme-map == null {
+    @error "Theme `#{$theme}` not found in $btn-colors map.";
+  }
+
+  @return map.get($theme-map, $state);
+}
+@mixin button-attr-color($theme, $attr, $ghost: false) {
+  &:hover,
+  &:focus-visible {
+    #{$attr}: btn-color($theme, hover);
+  }
+  @if $ghost == true {
+    &:active {
+      #{$attr}: btn-color($theme, active);
+    }
+  }
+
+  @if $ghost == true {
+    &.#{$prefix}-is-loading {
+      #{$attr}: btn-color($theme, 'default');
+    }
+  } @else {
+    &.#{$prefix}-is-loading {
+      #{$attr}: btn-color($theme, 'disabled');
+    }
+  }
+
+  @if $ghost == true {
+    #{$attr}: btn-color('ghost', 'disabled');
+    background-color: transparent;
+  } @else {
+    #{$attr}: btn-color($theme, disabled);
+  }
+
+  #{$attr}: btn-color($theme, default);
+}
+
+.#{$prefix}-button {
+  @include reset;
+  @include button;
+
+  text-decoration: none;
+
+  .#{$prefix}-button__text,
+  .t-icon {
+    position: relative;
+    z-index: 1;
+    display: inline-flex;
+  }
+
+  .t-icon {
+    font-size: $btn-icon-size-default;
+  }
+
+  .#{$prefix}-loading {
+    font-size: $btn-loading-size;
+  }
+
+  .t-icon + .#{$prefix}-button__text:not(:empty) {
+    margin-left: $btn-icon-text-margin-left;
+  }
+
+  .#{$prefix}-loading + .#{$prefix}-button__text:not(:empty) {
+    margin-left: $btn-icon-text-margin-left;
+  }
+
+  .#{$prefix}-button__suffix:not(:empty) {
+    display: inline-flex;
+    margin-left: $btn-icon-text-margin-left;
+  }
+
+  // 主要按钮
+  &--variant-base {
+    color: $btn-text-variant-base-color;
+    @include button-size(
+      $btn-height-default,
+      $btn-font-default,
+      $btn-icon-size-default,
+      $btn-padding-horizontal-default
+    );
+    @include button-attr-color('gray-bg', background-color);
+    @include button-attr-color('gray-bg', border-color);
+    @include button-attr-color('text-gray', color);
+
+    &.#{$prefix}-button--theme-primary {
+      color: $btn-text-variant-base-color;
+      @include button-attr-color('primary', background-color);
+      @include button-attr-color('primary', border-color);
+    }
+
+    &.#{$prefix}-button--theme-success {
+      color: $btn-text-variant-base-color;
+      @include button-attr-color('success', background-color);
+      @include button-attr-color('success', border-color);
+    }
+
+    &.#{$prefix}-button--theme-warning {
+      color: $btn-text-variant-base-color;
+      @include button-attr-color('warning', background-color);
+      @include button-attr-color('warning', border-color);
+    }
+
+    &.#{$prefix}-button--theme-danger {
+      color: $btn-text-variant-base-color;
+      @include button-attr-color('danger', background-color);
+      @include button-attr-color('danger', border-color);
+    }
+
+    &.#{$prefix}-button--ghost {
+      @include button-attr-color('primary', background-color, true);
+      @include button-attr-color('white-ghost', color, true);
+      @include button-attr-color('white-ghost', border-color, true);
+
+      &.#{$prefix}-button--theme-primary {
+        @include button-attr-color('primary', color, true);
+        @include button-attr-color('primary', border-color, true);
+      }
+
+      &.#{$prefix}-button--theme-success {
+        @include button-attr-color('success', color, true);
+        @include button-attr-color('success', border-color, true);
+      }
+
+      &.#{$prefix}-button--theme-warning {
+        @include button-attr-color('warning', color, true);
+        @include button-attr-color('warning', border-color, true);
+      }
+
+      &.#{$prefix}-button--theme-danger {
+        @include button-attr-color('danger', color, true);
+        @include button-attr-color('danger', border-color, true);
+      }
+    }
+
+    &.#{$prefix}-is-loading:not(&.#{$prefix}-button--ghost) {
+      &.#{$prefix}-button--theme-default {
+        color: btn-color(text, default);
+      }
+    }
+  }
+
+  // 次要按钮
+  &--variant-outline {
+    @include button-size(
+      $btn-height-default,
+      $btn-font-default,
+      $btn-icon-size-default,
+      $btn-padding-horizontal-default
+    );
+    @include button-attr-color('text', color);
+
+    @include button-attr-color('white-bg', background-color);
+    @include button-attr-color('border-gray', border-color);
+
+    &.#{$prefix}-button--theme-primary {
+      @include button-attr-color('primary', color);
+      @include button-attr-color('primary', border-color);
+    }
+
+    &.#{$prefix}-button--theme-success {
+      @include button-attr-color('success', color);
+      @include button-attr-color('success', border-color);
+    }
+
+    &.#{$prefix}-button--theme-warning {
+      @include button-attr-color('warning', color);
+      @include button-attr-color('warning', border-color);
+    }
+
+    &.#{$prefix}-button--theme-danger {
+      @include button-attr-color('danger', color);
+      @include button-attr-color('danger', border-color);
+    }
+
+    &.#{$prefix}-button--ghost {
+      @include button-attr-color('none', background-color, true);
+      @include button-attr-color('white-ghost', color, true);
+      @include button-attr-color('white-ghost', border-color, true);
+
+      &.#{$prefix}-button--theme-primary {
+        @include button-attr-color('primary', color, true);
+        @include button-attr-color('primary', border-color, true);
+      }
+
+      &.#{$prefix}-button--theme-success {
+        @include button-attr-color('success', color, true);
+        @include button-attr-color('success', border-color, true);
+      }
+
+      &.#{$prefix}-button--theme-warning {
+        @include button-attr-color('warning', color, true);
+        @include button-attr-color('warning', border-color, true);
+      }
+
+      &.#{$prefix}-button--theme-danger {
+        @include button-attr-color('danger', color, true);
+        @include button-attr-color('danger', border-color, true);
+      }
+    }
+
+    &.#{$prefix}-is-loading:not(&.#{$prefix}-button--ghost) {
+      color: btn-color(text, default);
+
+      &.#{$prefix}-button--theme-primary {
+        color: btn-color(primary, default);
+        background-color: btn-color(text-bg, default);
+      }
+
+      &.#{$prefix}-button--theme-success {
+        color: btn-color(success, default);
+        background-color: btn-color(text-bg, default);
+      }
+
+      &.#{$prefix}-button--theme-warning {
+        color: btn-color(warning, default);
+        background-color: btn-color(text-bg, default);
+      }
+
+      &.#{$prefix}-button--theme-danger {
+        color: btn-color(danger, default);
+        background-color: btn-color(text-bg, default);
+      }
+    }
+  }
+
+  // 虚线按钮
+  &--variant-dashed {
+    @include button-size(
+      $btn-height-default,
+      $btn-font-default,
+      $btn-icon-size-default,
+      $btn-padding-horizontal-default
+    );
+    @include button-attr-color(text, color);
+    @include button-attr-color(white-bg, background-color);
+    @include button-attr-color(border-gray, border-color);
+
+    border-style: dashed;
+
+    &.#{$prefix}-button--theme-primary {
+      @include button-attr-color('primary', color);
+      @include button-attr-color('primary', border-color);
+    }
+
+    &.#{$prefix}-button--theme-success {
+      @include button-attr-color('success', color);
+      @include button-attr-color('success', border-color);
+    }
+
+    &.#{$prefix}-button--theme-warning {
+      @include button-attr-color('warning', color);
+      @include button-attr-color('warning', border-color);
+    }
+
+    &.#{$prefix}-button--theme-danger {
+      @include button-attr-color('danger', color);
+      @include button-attr-color('danger', border-color);
+    }
+
+    &.#{$prefix}-button--ghost {
+      @include button-attr-color('none', background-color, true);
+      @include button-attr-color('white-ghost', color, true);
+      @include button-attr-color('white-ghost', border-color, true);
+
+      &.#{$prefix}-button--theme-primary {
+        @include button-attr-color('primary', color, true);
+        @include button-attr-color('primary', border-color, true);
+      }
+
+      &.#{$prefix}-button--theme-success {
+        @include button-attr-color('success', color, true);
+        @include button-attr-color('success', border-color, true);
+      }
+
+      &.#{$prefix}-button--theme-warning {
+        @include button-attr-color('warning', color, true);
+        @include button-attr-color('warning', border-color, true);
+      }
+
+      &.#{$prefix}-button--theme-danger {
+        @include button-attr-color('danger', color, true);
+        @include button-attr-color('danger', border-color, true);
+      }
+    }
+    &.#{$prefix}-is-loading:not(&.#{$prefix}-button--ghost) {
+      color: btn-color(text, default);
+
+      &.#{$prefix}-button--theme-primary {
+        color: btn-color(primary, default);
+        background-color: btn-color(text-bg, default);
+      }
+
+      &.#{$prefix}-button--theme-success {
+        color: btn-color(success, default);
+        background-color: btn-color(text-bg, default);
+      }
+
+      &.#{$prefix}-button--theme-warning {
+        color: btn-color(warning, default);
+        background-color: btn-color(text-bg, default);
+      }
+
+      &.#{$prefix}-button--theme-danger {
+        color: btn-color(danger, default);
+        background-color: btn-color(text-bg, default);
+      }
+    }
+  }
+
+  // 文字按钮
+  &--variant-text {
+    @include button-size(
+      $btn-height-default,
+      $btn-font-default,
+      $btn-icon-size-default,
+      $btn-padding-horizontal-default
+    );
+    @include button-attr-color('text-gray', color);
+    @include button-attr-color('text-bg', background-color);
+    @include button-attr-color('text-bg', border-color);
+
+    &.#{$prefix}-button--theme-primary {
+      @include button-attr-color('primary', color);
+    }
+
+    &.#{$prefix}-button--theme-success {
+      @include button-attr-color('success', color);
+    }
+
+    &.#{$prefix}-button--theme-warning {
+      @include button-attr-color('warning', color);
+    }
+
+    &.#{$prefix}-button--theme-danger {
+      @include button-attr-color('danger', color);
+    }
+
+    &.#{$prefix}-button--ghost {
+      background: none;
+
+      @include button-attr-color('white-ghost', color, true);
+
+      &.#{$prefix}-button--theme-primary {
+        @include button-attr-color('primary', color, true);
+      }
+
+      &.#{$prefix}-button--theme-success {
+        @include button-attr-color('success', color, true);
+      }
+
+      &.#{$prefix}-button--theme-warning {
+        @include button-attr-color('warning', color, true);
+      }
+
+      &.#{$prefix}-button--theme-danger {
+        @include button-attr-color('danger', color, true);
+      }
+    }
+
+    &.#{$prefix}-is-loading:not(&.#{$prefix}-button--ghost) {
+      color: btn-color(text, default);
+
+      &.#{$prefix}-button--theme-primary {
+        color: btn-color(primary, default);
+      }
+
+      &.#{$prefix}-button--theme-success {
+        color: btn-color(success, default);
+      }
+
+      &.#{$prefix}-button--theme-warning {
+        color: btn-color(warning, default);
+      }
+
+      &.#{$prefix}-button--theme-danger {
+        color: btn-color(danger, default);
+      }
+    }
+  }
+
+  &.#{$prefix}-is-loading,
+  &.#{$prefix}-is-disabled {
+    cursor: not-allowed;
+  }
+
+  &.#{$prefix}-size-s {
+    @include button-size(
+      $btn-height-s,
+      $btn-font-s,
+      $btn-icon-size-s,
+      $btn-padding-horizontal-s
+    );
+  }
+
+  &.#{$prefix}-size-l {
+    @include button-size(
+      $btn-height-l,
+      $btn-font-l,
+      $btn-icon-size-l,
+      $btn-padding-horizontal-l
+    );
+  }
+
+  &--shape-square {
+    width: $btn-height-default;
+    padding: 0;
+
+    &.#{$prefix}-size-s {
+      width: $btn-height-s;
+      padding: 0;
+    }
+
+    &.#{$prefix}-size-l {
+      width: $btn-height-l;
+      padding: 0;
+    }
+  }
+
+  &--shape-round {
+    border-radius: $border-radius-round;
+
+    &.#{$prefix}-size-s {
+      border-radius: $btn-shape-border-radius-s;
+    }
+
+    &.#{$prefix}-size-l {
+      border-radius: $btn-shape-border-radius-l;
+    }
+  }
+
+  &--shape-circle {
+    width: $btn-height-default;
+    padding: 0;
+    text-align: center;
+    border-radius: $btn-shape-border-radius-default;
+
+    .t-icon {
+      font-size: $btn-icon-size-default;
+    }
+
+    .#{$prefix}-loading {
+      font-size: $btn-loading-size;
+    }
+
+    &.#{$prefix}-size-s {
+      width: $btn-height-s;
+      border-radius: $btn-shape-border-radius-s;
+    }
+
+    &.#{$prefix}-size-l {
+      width: $btn-height-l;
+      padding: 0;
+      border-radius: $btn-shape-border-radius-l;
+    }
+  }
+
+  &.#{$prefix}-size-full-width {
+    display: flex;
+    width: 100%;
+  }
+}
+
+.#{$prefix}-button--ghost {
+  --ripple-color: @gray-color-10; // 幽灵按钮相当于按钮深色模式，因此固定为深色模式 token
+}
+
+.#{$prefix}-button:not(.#{$prefix}-is-disabled):not(.#{$prefix}-button--ghost) {
+  --ripple-color: btn-color(white-bg, active);
+}
+
+.#{$prefix}-button--variant-base:not(.#{$prefix}-is-disabled):not(
+    .#{$prefix}-button--ghost
+  ) {
+  --ripple-color: btn-color(gray-bg, active);
+}
+
+.#{$prefix}-button--variant-base.#{$prefix}-button--theme-primary:not(
+    .#{$prefix}-is-disabled
+  ):not(.#{$prefix}-button--ghost) {
+  --ripple-color: btn-color(primary, active);
+}
+
+.#{$prefix}-button--variant-base.#{$prefix}-button--theme-success:not(
+    .#{$prefix}-is-disabled
+  ):not(.#{$prefix}-button--ghost) {
+  --ripple-color: btn-color(success, default)-active;
+}
+
+.#{$prefix}-button--variant-base.#{$prefix}-button--theme-warning:not(
+    .#{$prefix}-is-disabled
+  ):not(.#{$prefix}-button--ghost) {
+  --ripple-color: btn-color(warning, active);
+}
+
+.#{$prefix}-button--variant-base.#{$prefix}-button--theme-danger:not(
+    .#{$prefix}-is-disabled
+  ):not(.#{$prefix}-button--ghost) {
+  --ripple-color: btn-color(danger, active);
+}

package/styles/components/button/_mixins.scss

@@ -0,0 +1,39 @@
+@import './_vars.scss';
+
+@mixin button() {
+  position: relative;
+  z-index: 0;
+  overflow: hidden;
+  font-size: $btn-font-default;
+  outline: none;
+  border-width: $btn-border-width;
+  border-style: solid;
+  border-color: transparent;
+  background-color: transparent;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  white-space: nowrap;
+  border-radius: $btn-border-radius;
+  transition: all $anim-duration-base linear;
+  touch-action: manipulation;
+}
+
+@mixin button-size(
+  $btn-height,
+  $btn-font-size,
+  $btn-icon-size,
+  $padding-horizontal
+) {
+  height: $btn-height;
+  font: $btn-font-size;
+  padding-left: calc($padding-horizontal - $btn-border-width);
+  padding-right: calc($padding-horizontal - $btn-border-width);
+
+  .t-icon,
+  .#{$prefix}-loading {
+    font-size: $btn-icon-size;
+  }
+}

package/styles/components/button/_vars.scss

@@ -0,0 +1,122 @@
+// 尺寸
+$btn-height-s: $comp-size-xs;
+$btn-height-default: $comp-size-m;
+$btn-height-l: $comp-size-xl;
+
+// 圆角
+$btn-border-radius: $border-radius-default;
+$btn-shape-border-radius-s: calc($btn-height-s / 2);
+$btn-shape-border-radius-default: calc($btn-height-default / 2);
+$btn-shape-border-radius-l: calc($btn-height-l / 2);
+
+//字号
+$btn-font-s: $font-body-small;
+$btn-font-default: $font-body-medium;
+$btn-font-l: $font-body-large;
+
+// 图标大小
+$btn-icon-size-s: $font-size-base;
+$btn-icon-size-default: $font-size-l;
+$btn-icon-size-l: $font-size-xl;
+$btn-loading-size: $font-size-l;
+
+// 按钮中icon和文字的间距
+$btn-icon-text-margin-left: $spacer;
+
+// padding
+$btn-padding-horizontal-s: $comp-paddingLR-s;
+$btn-padding-horizontal-default: $comp-paddingLR-l;
+$btn-padding-horizontal-l: $comp-paddingLR-xl;
+
+$btn-border-width: 1px;
+
+$btn-colors: (
+  primary: (
+    default: $brand-color,
+    hover: $brand-color-hover,
+    active: $brand-color-active,
+    disabled: $brand-color-disabled
+  ),
+  success: (
+    default: $success-color,
+    hover: $success-color-hover,
+    active: $success-color-active,
+    disabled: $success-color-disabled
+  ),
+  warning: (
+    default: $warning-color,
+    hover: $warning-color-hover,
+    active: $warning-color-active,
+    disabled: $warning-color-disabled
+  ),
+  danger: (
+    default: $error-color,
+    hover: $error-color-hover,
+    active: $error-color-active,
+    disabled: $error-color-disabled
+  ),
+  white-bg: (
+    default: $bg-color-specialcomponent,
+    hover: $bg-color-specialcomponent,
+    active: $bg-color-container-active,
+    disabled: $bg-color-component-disabled
+  ),
+  white-ghost: (
+    default: $text-color-anti,
+    hover: $brand-color-hover,
+    active: $brand-color-active,
+    disabled: $border-level-2-color
+  ),
+  gray-bg: (
+    default: $bg-color-component,
+    hover: $bg-color-component-hover,
+    active: $bg-color-component-active,
+    disabled: $bg-color-component-disabled
+  ),
+  text-bg: (
+    default: transparent,
+    hover: $bg-color-container-hover,
+    active: $bg-color-container-active,
+    disabled: transparent
+  ),
+  border-gray: (
+    default: $border-level-2-color,
+    hover: $brand-color-hover,
+    active: $brand-color-active,
+    disabled: $border-level-2-color
+  ),
+  text: (
+    default: $text-color-primary,
+    hover: $brand-color-hover,
+    active: $brand-color-active,
+    disabled: $text-color-disabled
+  ),
+  text-gray: (
+    default: $text-color-primary,
+    hover: $text-color-primary,
+    active: $text-color-primary,
+    disabled: $text-color-disabled
+  ),
+  none:(
+    default: transparent,
+    hover: transparent,
+    active: transparent,
+    disabled: transparent
+  ),
+  "ghost":(
+    disabled:rgba(255, 255, 255, .22)
+  )
+);
+
+
+
+$btn-color-none: transparent;
+$btn-color-none-hover: transparent;
+$btn-color-none-active: transparent;
+$btn-color-none-disabled: transparent;
+
+// 文本
+$btn-text-variant-base-color: $text-color-anti;
+
+// 状态色 - disabled ghost
+$btn-color-ghost-disabled: rgba(255, 255, 255, .22);