@tendaui/components 1.2.3 → 1.3.0

package/styles/components/input/_mixins.scss

@@ -1,116 +1,120 @@
-@import './_map.scss';
-
-@mixin input-base() {
-  border-width: 1px;
-  border-style: solid;
-  border-radius: $input-border-radius;
-  border-color: $input-border-color-default;
-  padding: $input-padding-default;
-  background-color: $input-bg-color-default;
-  outline: none;
-  color: $input-text-color-default;
-  font: $input-font;
-  width: 100%;
-  box-sizing: border-box;
-  transition: $input-inner-transition;
-  display: flex;
-  align-items: center;
-  overflow: hidden;
-
-  &:hover {
-    border-color: $input-border-color-default-hover;
-  }
-
-  &:focus {
-    z-index: 1;
-    border-color: $input-border-color-default-focus;
-    box-shadow: $input-box-shadow-focus;
-  }
-}
-
-@mixin input-readonly {
-  &.#{$prefix}-is-readonly {
-    color: $input-text-color-readonly;
-    background-color: $input-bg-color-readonly;
-
-    .#{$prefix}-input__inner {
-      cursor: $input-cursor-readonly;
-    }
-  }
-}
-
-@mixin input-disabled {
-  &.#{$prefix}-is-disabled {
-    color: $input-text-color-disabled;
-    background-color: $input-bg-color-disabled;
-
-    &:hover {
-      border-color: $input-border-color-default;
-    }
-
-    .#{$prefix}-input__inner {
-      cursor: not-allowed;
-      color: $input-text-color-disabled;
-      text-overflow: initial;
-
-      &::placeholder {
-        color: $input-text-color-disabled;
-      }
-    }
-
-    & > .#{$prefix}-input__prefix,
-    & > .#{$prefix}-input__suffix {
-      .t-icon {
-        color: $input-text-color-disabled;
-
-        &:hover {
-          color: $input-text-color-disabled;
-        }
-      }
-    }
-  }
-}
-
-// 状态样式：需要 map-get 或 #{} 来拼接变量名
-@mixin input-status($status) {
-  &.#{$prefix}-is-#{$status} {
-    border-color: #000;
-
-    &:focus,
-    &.#{$prefix}-input--focused {
-      box-shadow: 0 0 0 2px #000;
-    }
-
-    & > .#{$prefix}-input__extra {
-      color: #000;
-    }
-  }
-}
-
-@mixin input-fix-position($position) {
-  &.#{$prefix}-input--#{$position} {
-    & > .#{$prefix}-input__#{$position} {
-      z-index: 2;
-      height: 100%;
-      text-align: center;
-      display: flex;
-      align-items: center;
-    }
-
-    & > .#{$prefix}-input__#{$position}-icon {
-      font-size: $font-size-l;
-    }
-
-    &.#{$prefix}-size-s {
-      .#{$prefix}-input__#{$position}-icon {
-        font-size: $font-size-base;
-      }
-    }
-
-    &.#{$prefix}-size-l {
-      .#{$prefix}-input__#{$position}-icon {
-        font-size: $font-size-xl;
-      }
-    }
-  }
-}
+@use "../../_vars.scss" as *;
+@use "./_vars.scss" as *;
+@use "./_map.scss" as *;
+
+@mixin input-base() {
+  border-width: 1px;
+  border-style: solid;
+  border-radius: $input-border-radius;
+  border-color: $input-border-color-default;
+  padding: $input-padding-default;
+  background-color: $input-bg-color-default;
+  outline: none;
+  color: $input-text-color-default;
+  font: $input-font;
+  width: 100%;
+  box-sizing: border-box;
+  transition: $input-inner-transition;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+
+  &:hover {
+    border-color: $input-border-color-default-hover;
+  }
+
+  &:focus {
+    z-index: 1;
+    border-color: $input-border-color-default-focus;
+    box-shadow: $input-box-shadow-focus;
+  }
+}
+
+@mixin input-readonly {
+  &.#{$prefix}-is-readonly {
+    color: $input-text-color-readonly;
+    background-color: $input-bg-color-readonly;
+
+    .#{$prefix}-input__inner {
+      cursor: $input-cursor-readonly;
+    }
+  }
+}
+
+@mixin input-disabled {
+  &.#{$prefix}-is-disabled {
+    color: $input-text-color-disabled;
+    background-color: $input-bg-color-disabled;
+
+    &:hover {
+      border-color: $input-border-color-default;
+    }
+
+    .#{$prefix}-input__inner {
+      cursor: not-allowed;
+      color: $input-text-color-disabled;
+      text-overflow: initial;
+
+      &::placeholder {
+        color: $input-text-color-disabled;
+      }
+    }
+
+    & > .#{$prefix}-input__prefix,
+    & > .#{$prefix}-input__suffix {
+      .t-icon {
+        color: $input-text-color-disabled;
+
+        &:hover {
+          color: $input-text-color-disabled;
+        }
+      }
+    }
+  }
+}
+
+// 状态样式：使用 map-get 从映射中获取颜色值
+@mixin input-status($status) {
+  &.#{$prefix}-is-#{$status} {
+    border-color: map-get(map-get($input-color, border), $status);
+    &:hover {
+      border-color: map-get(map-get($input-color, border), $status);
+    }
+    &:focus,
+    &.#{$prefix}-input--focused {
+      box-shadow: 0 0 0 2px map-get(map-get($input-color, box-shadow), $status);
+    }
+
+    & > .#{$prefix}-input__extra {
+      color: map-get(map-get($input-color, extra), $status);
+    }
+  }
+}
+
+@mixin input-fix-position($position) {
+  &.#{$prefix}-input--#{$position} {
+    & > .#{$prefix}-input__#{$position} {
+      z-index: 2;
+      height: 100%;
+      text-align: center;
+      display: flex;
+      align-items: center;
+    }
+
+    & > .#{$prefix}-input__#{$position}-icon {
+      font-size: $font-size-l;
+    }
+
+    &.#{$prefix}-size-s {
+      .#{$prefix}-input__#{$position}-icon {
+        font-size: $font-size-base;
+      }
+    }
+
+    &.#{$prefix}-size-l {
+      .#{$prefix}-input__#{$position}-icon {
+        font-size: $font-size-xl;
+      }
+    }
+  }
+}

package/styles/components/input/_vars.scss

@@ -1,134 +1,130 @@
-// 组件变量
-// 名称可按如下规则定义：
-// <component>-[type]-[attrtype]-<attr>-[status]
-
-// component:组件名，如button，
-// type: 组件类型，如 button 的次要按钮（line）
-// attrtype: 属性的具体应用场景。如颜色，用于背景（bg）、文本（text）、边框（border）等
-// attr: 属性名称，如color、height、radius等
-// status: 表示组件状态或尺寸，如 hover、disabled、s、l 等
-
-// 如：$button-line-bg-color-hover
-// 如：$button-line-height-s
-
-@import '../../_vars.scss';
-
-// 颜色
-$input-border-color-default: $border-level-2-color;
-$input-border-color-default-hover: $brand-color;
-$input-border-color-default-focus: $brand-color;
-$input-border-color-success: $success-color;
-$input-border-color-warning: $warning-color;
-$input-border-color-error: $error-color;
-
-$input-color: (
-  border: (
-    default: (
-      hover: $brand-color,
-      focus: $brand-color,
-    ),
-    success: $success-color,
-    warning: $warning-color,
-    error: $error-color,
-  ),
-  text: (
-    default: $text-color-primary,
-    success: $success-color,
-    warning: $warning-color,
-    error: $error-color,
-    readonly: $text-color-primary,
-    tips: $text-color-placeholder,
-    disabled: $text-color-disabled,
-  ),
-  bg-color: (
-    default: $text-color-placeholder,
-    readonly: $bg-color-specialcomponent,
-    disabled: $bg-color-component-disabled,
-  ),
-  extra: (
-    default: $text-color-placeholder,
-    success: $success-color,
-    warning: $warning-color,
-    error: $error-color,
-  ),
-  append: $bg-color-secondarycontainer-hover,
-  limit: $text-color-placeholder,
-  box-shadow: (
-    default: $brand-color-focus,
-    success: $success-color-focus,
-    warning: $warning-color-focus,
-    error: $error-color-focus,
-  ),
-);
-
-$input-text-color-success: $success-color;
-$input-text-color-warning: $warning-color;
-$input-text-color-error: $error-color;
-
-$input-text-color-default: $text-color-primary;
-$input-text-color-readonly: $text-color-primary;
-$input-text-color-disabled: $text-color-disabled;
-$input-text-color-tips: $text-color-placeholder;
-$input-placeholder-color: $text-color-placeholder;
-
-// input 输入框需要在浅色主题下有默认白色背景，而在暗色等其他主题下 transparent 适配背景色，因此不使用通用背景 token
-$input-bg-color-default: $bg-color-specialcomponent;
-$input-bg-color-readonly: $bg-color-specialcomponent;
-$input-bg-color-disabled: $bg-color-component-disabled;
-
-$input-extra-color-default: $text-color-placeholder;
-$input-extra-color-success: $success-color;
-$input-extra-color-warning: $warning-color;
-$input-extra-color-error: $error-color;
-
-$input-append-color: $bg-color-secondarycontainer-hover;
-
-$input-limit-color: $text-color-placeholder;
-
-// 位置
-$input-fix-position: $spacer;
-
-// 间距
-$input-padding-l: $comp-paddingTB-m $comp-paddingLR-m;
-$input-padding-default: 0 $comp-paddingLR-s;
-$input-margin-distance-default: $comp-margin-xxxl;
-$input-status-position-right: -24px;
-$input-group-first-child-margin-left: -1px;
-
-// 尺寸
-$input-height-s: $comp-size-xs;
-$input-height-default: $comp-size-m;
-$input-height-l: $comp-size-xl;
-$input-inner-icon-font-size: inherit;
-$input-tips-min-height: $text-line-height-s;
-
-// 图标
-$input-inner-prefix-icon-color: $text-color-placeholder;
-$input-inner-suffix-icon-color: $text-color-placeholder;
-$input-inner-suffix-icon-color-hover: $text-color-secondary;
-
-// 字号
-$input-font-l: $font-body-large;
-$input-font: $font-body-medium;
-$input-font-s: $font-body-small;
-$input-extra-font: $font-body-small;
-$input-tips-font: $font-body-small;
-
-// 边框
-$input-border-radius: $border-radius-default;
-
-// box
-$input-box-shadow-color-default-focus: $brand-color-focus;
-$input-box-shadow-color-success-focus: $success-color-focus;
-$input-box-shadow-color-warning-focus: $warning-color-focus;
-$input-box-shadow-color-error-focus: $error-color-focus;
-$input-box-shadow-focus: 0 0 0 2px $input-box-shadow-color-default-focus;
-
-// 动画
-$input-inner-transition:
-  border $anim-time-fn-easing $anim-duration-base,
-  box-shadow $anim-time-fn-easing $anim-duration-base,
-  background-color $anim-time-fn-easing $anim-duration-base;
-
-// 交互
-$input-cursor-readonly: pointer;
+@use "../../_vars.scss" as *;
+// 组件变量
+// 名称可按如下规则定义//
+// <component>-[type]-[attrtype]-<attr>-[status]
+
+// component:组件名，如button// type: 组件类型，如 button 的次要按钮（line// attrtype: 属性的具体应用场景。如颜色，用于背景（bg）、文本（text）、边框（border）等
+// attr: 属性名称，如color、height、radius// status: 表示组件状态或尺寸，如 hover、disabled、s、l
+
+// 如：$button-line-bg-color-hover
+// 如：$button-line-height-s
+
+// 颜色
+$input-border-color-default: $border-level-2-color;
+$input-border-color-default-hover: $brand-color;
+$input-border-color-default-focus: $brand-color;
+$input-border-color-success: $success-color;
+$input-border-color-warning: $warning-color;
+$input-border-color-error: $error-color;
+
+$input-color: (
+  border: (
+    default: (
+      hover: $brand-color,
+      focus: $brand-color
+    ),
+    success: $success-color,
+    warning: $warning-color,
+    error: $error-color
+  ),
+  text: (
+    default: $text-color-primary,
+    success: $success-color,
+    warning: $warning-color,
+    error: $error-color,
+    readonly: $text-color-primary,
+    tips: $text-color-placeholder,
+    disabled: $text-color-disabled
+  ),
+  bg-color: (
+    default: $text-color-placeholder,
+    readonly: $bg-color-specialcomponent,
+    disabled: $bg-color-component-disabled
+  ),
+  extra: (
+    default: $text-color-placeholder,
+    success: $success-color,
+    warning: $warning-color,
+    error: $error-color
+  ),
+  append: $bg-color-secondarycontainer-hover,
+  limit: $text-color-placeholder,
+  box-shadow: (
+    default: $brand-color-focus,
+    success: $success-color-focus,
+    warning: $warning-color-focus,
+    error: $error-color-focus
+  )
+);
+
+$input-text-color-success: $success-color;
+$input-text-color-warning: $warning-color;
+$input-text-color-error: $error-color;
+
+$input-text-color-default: $text-color-primary;
+$input-text-color-readonly: $text-color-primary;
+$input-text-color-disabled: $text-color-disabled;
+$input-text-color-tips: $text-color-placeholder;
+$input-placeholder-color: $text-color-placeholder;
+
+// input 输入框需要在浅色主题下有默认白色背景，而在暗色等其他主题下 transparent 适配背景色，因此不使用通用背景 token
+$input-bg-color-default: $bg-color-specialcomponent;
+$input-bg-color-readonly: $bg-color-specialcomponent;
+$input-bg-color-disabled: $bg-color-component-disabled;
+
+$input-extra-color-default: $text-color-placeholder;
+$input-extra-color-success: $success-color;
+$input-extra-color-warning: $warning-color;
+$input-extra-color-error: $error-color;
+
+$input-append-color: $bg-color-secondarycontainer-hover;
+
+$input-limit-color: $text-color-placeholder;
+
+// 位置
+$input-fix-position: $spacer;
+
+// 间距
+$input-padding-l: $comp-paddingTB-m $comp-paddingLR-m;
+$input-padding-default: 0 $comp-paddingLR-s;
+$input-margin-distance-default: $comp-margin-xxxl;
+$input-status-position-right: -24px;
+$input-group-first-child-margin-left: -1px;
+
+// 尺寸
+$input-height-s: $comp-size-xs;
+$input-height-default: $comp-size-m;
+$input-height-l: $comp-size-xl;
+$input-inner-icon-font-size: inherit;
+$input-tips-min-height: $text-line-height-s;
+
+// 图标
+$input-inner-prefix-icon-color: $text-color-placeholder;
+$input-inner-suffix-icon-color: $text-color-placeholder;
+$input-inner-suffix-icon-color-hover: $text-color-secondary;
+
+// 字号
+$input-font-l: $font-body-large;
+$input-font: $font-body-medium;
+$input-font-s: $font-body-small;
+$input-extra-font: $font-body-small;
+$input-tips-font: $font-body-small;
+
+// 边框
+$input-border-radius: $border-radius-default;
+
+// box
+$input-box-shadow-color-default-focus: $brand-color-focus;
+$input-box-shadow-color-success-focus: $success-color-focus;
+$input-box-shadow-color-warning-focus: $warning-color-focus;
+$input-box-shadow-color-error-focus: $error-color-focus;
+$input-box-shadow-focus: 0 0 0 2px $input-box-shadow-color-default-focus;
+
+// 动画
+$input-inner-transition:
+  border $anim-time-fn-easing $anim-duration-base,
+  box-shadow $anim-time-fn-easing $anim-duration-base,
+  background-color $anim-time-fn-easing $anim-duration-base;
+
+// 交互
+$input-cursor-readonly: pointer;