@tendaui/components 1.2.4 → 1.3.0

package/styles/components/button/_mixins.scss

@@ -1,40 +1,40 @@
-@use "../../_vars.scss" as *;
-@use './_vars.scss' as *;
-
-@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;
-  }
-}
+@use "../../_vars.scss" as *;
+@use './_vars.scss' as *;
+
+@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

@@ -1,121 +1,121 @@
-@use "../../_vars.scss" as *;
-// 尺寸
-$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, 0.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, 0.22);
+@use "../../_vars.scss" as *;
+// 尺寸
+$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, 0.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, 0.22);

package/styles/components/checkbox/_index.scss

@@ -1,158 +1,158 @@
-// 组件允许单个组件打包，因此默认引入公共基础样式
-
-@use "../../_vars.scss" as *;
-
-@use "./_var.scss" as *;
-
-@use "./_mixin.scss" as *;
-
-@use "../../mixins/_layout.scss" as *;
-
-@use "../../mixins/_reset.scss" as *;
-
-@use "../../mixins/_focus.scss" as *;
-
-// <name> 替换为组件名
-.#{$checkbox-cls}-group {
-  @include reset;
-
-  display: inline-flex;
-  flex-wrap: wrap;
-  gap: $checkbox-group-gap;
-}
-
-.#{$checkbox-cls} {
-  @include reset;
-
-  display: inline-flex;
-  align-items: center;
-  position: relative;
-  cursor: pointer;
-  color: $checkbox-label-color;
-
-  & + .#{$checkbox-cls} {
-    margin-left: $checkbox-margin;
-  }
-
-  &__former {
-    @include input-visually-hidden();
-  }
-
-  &__input {
-    position: relative;
-    display: inline-block;
-    width: $checkbox-size;
-    height: $checkbox-size;
-    vertical-align: middle;
-    border: 1px solid $checkbox-border-color;
-    border-radius: $checkbox-border-radius;
-    background-color: $checkbox-input-color;
-    box-sizing: border-box;
-    flex-shrink: 0;
-
-    &::after {
-      content: "";
-      position: absolute;
-      opacity: 0;
-      box-sizing: border-box;
-    }
-  }
-
-  &__label {
-    display: inline-block;
-    margin-left: $checkbox-input-label-spacer;
-    vertical-align: middle;
-    font: $checkbox-font;
-  }
-
-  &:hover {
-    .#{$checkbox-cls}__input {
-      border-color: $checkbox-border-color-hover;
-      transition: border-color $anim-duration-base linear;
-    }
-  }
-
-  &.#{$prefix}-is-checked {
-    .#{$checkbox-cls}__input {
-      border-color: $checkbox-border-color-checked;
-      background-color: $checkbox-input-color-checked;
-      transition: background-color $anim-duration-base $anim-time-fn-ease-in;
-
-      &::after {
-        opacity: 1;
-        top: (($checkbox-size) / 2 - 2px);
-        left: $checkbox-check-left;
-        width: $checkbox-check-width;
-        height: $checkbox-check-height;
-        border: 2px solid $checkbox-check-color;
-        border-radius: 0 0 1px;
-        border-top: 0;
-        border-left: 0;
-        transform: rotate(45deg) scale(1) translate(-50%, -50%);
-        background: transparent;
-      }
-    }
-  }
-
-  &.#{$prefix}-is-indeterminate {
-    .#{$checkbox-cls}__input {
-      border-color: $checkbox-input-color-indeterminate;
-      background-color: $checkbox-input-color-indeterminate;
-      transition: background-color $anim-duration-base $anim-time-fn-ease-in;
-
-      &::after {
-        opacity: 1;
-        width: $checkbox-indeterminate-width;
-        height: $checkbox-indeterminate-height;
-        left: -1px;
-        right: 0;
-        top: (($checkbox-size - 2 - $checkbox-indeterminate-height) * 0.5);
-        border: unset;
-        transform: scale(0.5);
-        background-color: $checkbox-indeterminate-color;
-      }
-    }
-  }
-
-  &.#{$prefix}-is-disabled {
-    cursor: not-allowed;
-
-    .#{$checkbox-cls}__label {
-      color: $checkbox-check-color-disabled;
-    }
-
-    .#{$checkbox-cls}__input {
-      background-color: $checkbox-input-color-disabled;
-    }
-
-    &:hover {
-      .#{$checkbox-cls}__input {
-        border-color: $checkbox-border-color;
-      }
-    }
-
-    &.#{$prefix}-is-checked {
-      .#{$checkbox-cls}__input {
-        border-color: $checkbox-border-color;
-
-        &::after {
-          border-color: $checkbox-check-icon-disabled-color;
-        }
-      }
-    }
-
-    &.#{$prefix}-is-indeterminate {
-      .#{$checkbox-cls}__input {
-        border-color: $checkbox-border-color;
-
-        &::after {
-          background-color: $checkbox-indeterminate-color-disabled;
-        }
-      }
-    }
-  }
-}
-
-.#{$prefix}-checkbox:focus-visible {
-  @include tab-focus-style-rect();
-}
+// 组件允许单个组件打包，因此默认引入公共基础样式
+
+@use "../../_vars.scss" as *;
+
+@use "./_var.scss" as *;
+
+@use "./_mixin.scss" as *;
+
+@use "../../mixins/_layout.scss" as *;
+
+@use "../../mixins/_reset.scss" as *;
+
+@use "../../mixins/_focus.scss" as *;
+
+// <name> 替换为组件名
+.#{$checkbox-cls}-group {
+  @include reset;
+
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: $checkbox-group-gap;
+}
+
+.#{$checkbox-cls} {
+  @include reset;
+
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  cursor: pointer;
+  color: $checkbox-label-color;
+
+  & + .#{$checkbox-cls} {
+    margin-left: $checkbox-margin;
+  }
+
+  &__former {
+    @include input-visually-hidden();
+  }
+
+  &__input {
+    position: relative;
+    display: inline-block;
+    width: $checkbox-size;
+    height: $checkbox-size;
+    vertical-align: middle;
+    border: 1px solid $checkbox-border-color;
+    border-radius: $checkbox-border-radius;
+    background-color: $checkbox-input-color;
+    box-sizing: border-box;
+    flex-shrink: 0;
+
+    &::after {
+      content: "";
+      position: absolute;
+      opacity: 0;
+      box-sizing: border-box;
+    }
+  }
+
+  &__label {
+    display: inline-block;
+    margin-left: $checkbox-input-label-spacer;
+    vertical-align: middle;
+    font: $checkbox-font;
+  }
+
+  &:hover {
+    .#{$checkbox-cls}__input {
+      border-color: $checkbox-border-color-hover;
+      transition: border-color $anim-duration-base linear;
+    }
+  }
+
+  &.#{$prefix}-is-checked {
+    .#{$checkbox-cls}__input {
+      border-color: $checkbox-border-color-checked;
+      background-color: $checkbox-input-color-checked;
+      transition: background-color $anim-duration-base $anim-time-fn-ease-in;
+
+      &::after {
+        opacity: 1;
+        top: (($checkbox-size) / 2 - 2px);
+        left: $checkbox-check-left;
+        width: $checkbox-check-width;
+        height: $checkbox-check-height;
+        border: 2px solid $checkbox-check-color;
+        border-radius: 0 0 1px;
+        border-top: 0;
+        border-left: 0;
+        transform: rotate(45deg) scale(1) translate(-50%, -50%);
+        background: transparent;
+      }
+    }
+  }
+
+  &.#{$prefix}-is-indeterminate {
+    .#{$checkbox-cls}__input {
+      border-color: $checkbox-input-color-indeterminate;
+      background-color: $checkbox-input-color-indeterminate;
+      transition: background-color $anim-duration-base $anim-time-fn-ease-in;
+
+      &::after {
+        opacity: 1;
+        width: $checkbox-indeterminate-width;
+        height: $checkbox-indeterminate-height;
+        left: -1px;
+        right: 0;
+        top: (($checkbox-size - 2 - $checkbox-indeterminate-height) * 0.5);
+        border: unset;
+        transform: scale(0.5);
+        background-color: $checkbox-indeterminate-color;
+      }
+    }
+  }
+
+  &.#{$prefix}-is-disabled {
+    cursor: not-allowed;
+
+    .#{$checkbox-cls}__label {
+      color: $checkbox-check-color-disabled;
+    }
+
+    .#{$checkbox-cls}__input {
+      background-color: $checkbox-input-color-disabled;
+    }
+
+    &:hover {
+      .#{$checkbox-cls}__input {
+        border-color: $checkbox-border-color;
+      }
+    }
+
+    &.#{$prefix}-is-checked {
+      .#{$checkbox-cls}__input {
+        border-color: $checkbox-border-color;
+
+        &::after {
+          border-color: $checkbox-check-icon-disabled-color;
+        }
+      }
+    }
+
+    &.#{$prefix}-is-indeterminate {
+      .#{$checkbox-cls}__input {
+        border-color: $checkbox-border-color;
+
+        &::after {
+          background-color: $checkbox-indeterminate-color-disabled;
+        }
+      }
+    }
+  }
+}
+
+.#{$prefix}-checkbox:focus-visible {
+  @include tab-focus-style-rect();
+}