@tendaui/components - npm Package Compare versions

Comparing version 1.2.3 to 1.2.4

styles/components/popup/_vars.scss

+@use "../../_vars.scss" as *;
+// 颜色
+$popup-bg: $bg-color-container;
+$arrow-bg: $bg-color-container;
+$popup-text-color: $text-color-primary;
+
+// 间距
+$popup-padding: $comp-paddingTB-xs $comp-paddingLR-s;
+$popup-content-line-height: $text-line-height-base;
+$popup-arrow-width: 8px;
+$popup-arrow-height: 8px;
+$popup-content-arrow-spacer: $comp-margin-l;
+$popup-content-margin: $comp-margin-s;
+
+// 箭头位置偏移
+$popup-arrow-position: $popup-arrow-width;
+$popup-content-font-size: $font-size-base;
+
+// 阴影
+$popup-shadow: $shadow-2-inset;
+$popup-top-arrow-shadow: $shadow-inset-left, $shadow-inset-bottom;
+$popup-left-arrow-shadow: $shadow-inset-left, $shadow-inset-top;
+$popup-bottom-arrow-shadow: $shadow-inset-top, $shadow-inset-right;
+$popup-right-arrow-shadow: $shadow-inset-right, $shadow-inset-bottom;
+
+// 动画
+$popup-flow: "#{prefix}-popup--animation";
+$popup-flow-duration: $anim-duration-base;
+$popup-flow-fn: $anim-time-fn-ease-in;
+$popup-flow-transition-enter: opacity $popup-flow-duration linear;
+$popup-flow-transition-leave:
+  opacity $popup-flow-duration $anim-time-fn-ease-out,
+  visibility $popup-flow-duration $popup-flow-fn;

styles/components/radio/_vars.scss

+@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
+
+$radio-cls: "#{$prefix}-radio";
+$radio-button--cls: "#{$prefix}-radio-button";
+
+// 颜色
+$radio-border-color: $border-level-2-color;
+
+$radio-input-color: $bg-color-container;
+$radio-input-color-disabled: $bg-color-component-disabled;
+
+$radio-dot-color: $brand-color;
+$radio-dot-color-disabled: $bg-color-component-disabled;
+$radio-dot-color-disabled-checked: $text-color-disabled;
+
+$radio-label-color: $text-color-primary;
+
+$radio-button-border-color-default: $border-level-2-color;
+$radio-button-border-color-hover: $brand-color-hover;
+$radio-button-color-outline-hover: $brand-color-hover;
+$radio-button-border-color-checked: $brand-color;
+$radio-button-color-outline-checked: $brand-color;
+$radio-button-background-color-disabled: $bg-color-component-disabled;
+$radio-button-color-disabled: $text-color-disabled;
+$radio-button-background-color-outline-disabled-checked: $bg-color-specialcomponent;
+$radio-button-color-disabled-checked: $text-color-disabled;
+
+$radio-button-group-background-color-filled: $bg-color-component;
+$radio-button-color-filled: $text-color-secondary;
+$radio-button-color-filled-hover: $text-color-primary;
+$radio-button-color-default-filled-checked: $text-color-primary;
+$radio-button-color-primary-filled-checked: $text-color-anti;
+$radio-button-color-default-filled-disabled-checked: $text-color-disabled;
+$radio-button-background-color-default-filled-checked: $bg-color-container-select;
+$radio-button-background-color-primary-filled-checked: $brand-color;
+$radio-button-background-color-default-filled-disabled-checked: $bg-color-component-disabled;
+$radio-button-background-color-primary-filled-disabled-checked: $brand-color-disabled;
+
+// 尺寸
+$radio-size: 16px;
+$radio-dot-size: ($radio-size / 2);
+$radio-margin-right: $comp-margin-xxl;
+$radio-button-border-radius: $border-radius-small;
+$radio-outline-height-small: $comp-size-xs;
+$radio-outline-height-medium: $comp-size-m;
+$radio-outline-height-large: $comp-size-xl;
+$radio-height-small: calc($comp-size-xs - ($comp-paddingTB-xxs * 2));
+$radio-height-medium: calc($comp-size-m - ($comp-paddingTB-xxs * 2));
+$radio-height-large: calc($comp-size-xl - ($comp-paddingTB-xxs * 2));
+$radio-button-before-width: 1px;
+
+// 字号
+$radio-font: $font-body-medium;
+$radio-button-font-small: $font-body-small;
+$radio-button-font-medium: $font-body-medium;
+$radio-button-font-large: $font-body-large;
+
+// padding
+$radio-input-label-spacer: $comp-margin-s;
+$radio-button-padding-small: 0px $comp-paddingLR-s;
+$radio-button-padding-medium: $comp-paddingTB-xs $comp-paddingLR-l;
+$radio-button-padding-large: $comp-paddingTB-s $comp-paddingLR-xl;
+$radio-button-before-left: 0px;
+$radio-button-before-top: 50%;
+$radio-button-border: 1px solid;
+
+$radio-group-padding: $comp-paddingTB-xxs $comp-paddingLR-xxs;
+$radio-group-filled-bg-block-left: 2px;
+$radio-group-filled-bg-block-top: 2px;
+
+// 动画&过渡
+$radio-group-transition: all $anim-duration-base $anim-time-fn-easing;
+$radio-button-before-transition: translateY(-50%);
+$radio-button-transition: color $anim-duration-base $anim-time-fn-ease-out;
+$radio-input-transition: border $anim-duration-base $anim-time-fn-ease-out;
+
+// 透明
+$radio-opacity-transparent: 0; // 全透明
+
+// 边框
+$radio-input-border: 1px solid $radio-border-color;

package.json

 {
   "name": "@tendaui/components",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "description": "TendaUI React Components - Source code",
@@ -54,3 +54,3 @@ "main": "index.ts",
   ],
-  "gitHead": "338277cdfb9306a0bbee446d15d6c340c4f085d4"
+  "gitHead": "bdc34c68fc499513c8403e5645531f277d1c0dda"
 }

styles/_global.scss

@@ -1,6 +0,7 @@
-@import './_vars.scss';
+@use "./_vars.scss" as *;
+@use './_vars.scss' as *;
 
-@import './mixins/_scrollbar.scss';
+@use './mixins/_scrollbar.scss' as *;
 
-// 响应式断点 后面支持紧凑模式可以迁移过去
+// 响应式断�?后面支持紧凑模式可以迁移过去
 :root {
@@ -7,0 +8,0 @@ --td-screen-xs: #{$screen-xs};

styles/_vars.scss

@@ -82,11 +82,11 @@ // 公共前缀
 
-// 基础颜色的扩展 用于 hover / 聚焦 / 禁用 / 点击 等状态
-$brand-color-hover: var(--td-brand-color-hover); // hover态
+// 基础颜色的扩充用于 hover / 聚焦 / 禁用 / 点击 等状态
+$brand-color-hover: var(--td-brand-color-hover); // hover
 $brand-color-focus: var(--td-brand-color-focus); // focus态，包括鼠标和键盘
-$brand-color-active: var(--td-brand-color-active); // 点击态
-$brand-color-disabled: var(--td-brand-color-disabled); // 禁用态
-$brand-color-light: var(--td-brand-color-light); // 浅色的选中态
+$brand-color-active: var(--td-brand-color-active); // 点击
+$brand-color-disabled: var(--td-brand-color-disabled); // 禁用
+$brand-color-light: var(--td-brand-color-light); // 浅色的选中
 $brand-color-light-hover: var(--td-brand-color-light-hover);
 
-// 警告色扩展
+// 警告色扩充
 $warning-color-hover: var(--td-warning-color-hover);
@@ -99,3 +99,3 @@ $warning-color-focus: var(--td-warning-color-focus);
 
-// 失败/错误色扩展
+// 失败/错误色扩充
 $error-color-hover: var(--td-error-color-hover);
@@ -108,3 +108,3 @@ $error-color-focus: var(--td-error-color-focus);
 
-// 成功色扩展
+// 成功色扩充
 $success-color-hover: var(--td-success-color-hover);
@@ -122,3 +122,3 @@ $success-color-focus: var(--td-success-color-focus);
 
-// 背景色
+// 背景颜色
 $bg-color-page: var(--td-bg-color-page); // 色彩 - page
@@ -145,3 +145,3 @@ $bg-color-container: var(--td-bg-color-container); // 色彩 - 容器
 // TODO: 考虑是否在组件内部做判断，不增加额外变量
-// 特殊组件背景色，目前只用于 button、input 组件多主题场景，浅色主题下固定为白色，深色主题下为 transparent 适配背景颜色
+// 特殊组件背景色，目前只用button、input 组件多主题场景，浅色主题下固定为白色，深色主题下transparent 适配背景颜色
 $bg-color-specialcomponent: var(--td-bg-color-specialcomponent);
@@ -152,3 +152,3 @@
 $text-color-secondary: var(--td-text-color-secondary); // 色彩-文字-次要
-$text-color-placeholder: var(--td-text-color-placeholder); // 色彩-文字-占位符/说明
+$text-color-placeholder: var(--td-text-color-placeholder); // 色彩-文字-占位说明
 $text-color-disabled: var(--td-text-color-disabled); // 色彩-文字-禁用
@@ -168,10 +168,10 @@ $text-color-anti: var(--td-text-color-anti); // 色彩-文字-反色
 
-// 基础/下层 投影 hover 使用的组件包括：表格 /
+// 基础/下层 投影 hover 使用的组件包括：表格
 $shadow-1: var(--td-shadow-1);
-// 中层投影 下拉 使用的组件包括：下拉菜单 / 气泡确认框 / 选择器 /
+// 中层投影 下拉 使用的组件包括：下拉菜单 / 气泡确认 / 选择
 $shadow-2: var(--td-shadow-2);
-// 上层投影（警示/弹窗）使用的组件包括：全局提示 / 消息通知
+// 上层投影（警告/弹窗）使用的组件包括：全局提示 / 消息通知
 $shadow-3: var(--td-shadow-3);
 
-// 内投影 用于弹窗类组件（气泡确认框 / 全局提示 / 消息通知）的内描边
+// 内投影用于弹窗类组件（气泡确认 / 全局提示 / 消息通知）的内描影
 $shadow-inset-top: var(--td-shadow-inset-top);
@@ -217,3 +217,3 @@ $shadow-inset-right: var(--td-shadow-inset-right);
 
-// popup 弹出层整体边距 token
+// popup 弹出层整体边距token
 $pop-padding-s: var(--td-pop-padding-s);
@@ -263,8 +263,8 @@ $pop-padding-m: var(--td-pop-padding-m);
 $spacer-4: $spacer * 4; // 间距-32
-$spacer-5: $spacer * 5; // 间距-大-40
-$spacer-6: $spacer * 6; // 间距-大-48
-$spacer-7: $spacer * 7; // 间距-大-48
-$spacer-8: $spacer * 8; // 间距-大-48
-$spacer-9: $spacer * 9; // 间距-大-48
-$spacer-10: $spacer * 10; // 间距-大-80
+$spacer-5: $spacer * 5; // 间距-40
+$spacer-6: $spacer * 6; // 间距-48
+$spacer-7: $spacer * 7; // 间距-48
+$spacer-8: $spacer * 8; // 间距-48
+$spacer-9: $spacer * 9; // 间距-48
+$spacer-10: $spacer * 10; // 间距-80
 
@@ -314,3 +314,3 @@ $text-line-height-s: var(--td-line-height-body-small);
 $border-radius-round: var(--td-radius-round); // 圆角-999
-$border-radius-circle: var(--td-radius-circle); // 圆角-全圆角
+$border-radius-circle: var(--td-radius-circle); // 圆角-全圆
 
@@ -317,0 +317,0 @@ // 表单相关

styles/components/alert/_index.scss

 // 组件允许单个组件打包，因此默认引入公共基础样式
 
-@import '../../_vars.scss';
+@use "../../_vars.scss" as *;
 
-@import './_vars.scss';
+@use "./_vars.scss" as *;
 
-@import '../../mixins/_reset.scss';
+@use "../../mixins/_reset.scss" as reset;
 
 /* Alert */
 .#{$prefix}-alert {
-  @include reset;
+  @include reset.reset;
 
@@ -13,0 +13,0 @@ display: flex;

styles/components/alert/_vars.scss

@@ -0,1 +1,3 @@
+@use "../../_vars.scss" as *;
+
 $alert-success-bg-color: $success-color-focus;
@@ -37,4 +39,4 @@ $alert-info-bg-color: $brand-color-focus;
 $alert-close-margin-left: $comp-margin-l;
-$alert-close-padding: calc(($alert-line-height - $alert-close-size) / 2 ) 0;
+$alert-close-padding: calc(($alert-line-height - $alert-close-size) / 2) 0;
 $alert-description-margin-top: $comp-margin-s;
 $alert-collapse-margin-top: $comp-margin-s;

styles/components/badge/_index.scss

@@ -0,8 +1,9 @@
+@use "../../_vars.scss" as *;
 // 组件允许单个组件打包，因此默认引入公共基础样式.#{$prefix}
 
-@import '../../_vars.scss';
+@use '../../_vars.scss' as *;
 
-@import './_vars.scss';
+@use './_vars.scss' as *;
 
-@import '../../mixins/_reset.scss';
+@use '../../mixins/_reset.scss' as *;
 
@@ -9,0 +10,0 @@ // Badge

styles/components/badge/_vars.scss

@@ -0,1 +1,2 @@
+@use "../../_vars.scss" as *;
 $badge-text-color: $text-color-anti;
@@ -7,5 +8,5 @@ $badge-color: $error-color;
 $badge-height: $comp-size-xxs;
-// 小尺寸 circle/round 高度
+// 小尺寸circle/round 高度
 $badge-height-s: $comp-size-xxxs;
-// dot 宽/高
+// dot 大小
 $badge-dot-size: 6px;
@@ -12,0 +13,0 @@ // $badge-status-size: 6px;

styles/components/button/_index.scss

 @use "sass:map";
-@import "../../_vars.scss";
+@use "../../_vars.scss" as *;
 
-@import "./_vars.scss";
+@use "./_vars.scss" as *;
 
-@import "./_mixins.scss";
+@use "./_mixins.scss" as *;
 
-@import "../../mixins/_reset.scss";
+@use "../../mixins/_reset.scss" as *;
 
@@ -466,3 +466,3 @@ @function btn-color($theme, $state: default) {
 .#{$prefix}-button--ghost {
-  --ripple-color: @gray-color-10; // 幽灵按钮相当于按钮深色模式，因此固定为深色模式 token
+  --ripple-color: @gray-color-10; // 幽灵按钮相当于按钮深色模式，因此固定为深色模�?token
 }
@@ -469,0 +469,0 @@

styles/components/button/_mixins.scss

@@ -1,2 +0,3 @@
-@import './_vars.scss';
+@use "../../_vars.scss" as *;
+@use './_vars.scss' as *;
 
@@ -3,0 +4,0 @@ @mixin button() {

styles/components/button/_vars.scss

@@ -0,1 +1,2 @@
+@use "../../_vars.scss" as *;
 // 尺寸
@@ -2,0 +3,0 @@ $btn-height-s: $comp-size-xs;

styles/components/checkbox/_index.scss

 // 组件允许单个组件打包，因此默认引入公共基础样式
 
-@import "../../_vars.scss";
+@use "../../_vars.scss" as *;
 
-@import "./_var.scss";
+@use "./_var.scss" as *;
 
-@import "./_mixin.scss";
+@use "./_mixin.scss" as *;
 
-@import "../../mixins/_layout.scss";
+@use "../../mixins/_layout.scss" as *;
 
-@import "../../mixins/_reset.scss";
+@use "../../mixins/_reset.scss" as *;
 
-@import "../../mixins/_focus.scss";
+@use "../../mixins/_focus.scss" as *;
 
@@ -15,0 +15,0 @@ // <name> 替换为组件名

styles/components/checkbox/_var.scss

@@ -0,10 +1,11 @@
+@use "../../_vars.scss" as *;
 // 组件变量
-// 名称可按如下规则定义：
+// 名称可按如下规则定义//
 // <component>-[type]-[attrtype]-<attr>-[status]
 
-// component:组件名，如button，
-// type: 组件类型，如 button 的次要按钮（line）
+// component:组件名，如button//
+// type: 组件类型，如 button 的次要按钮（line//
 // attrtype: 属性的具体应用场景。如颜色，用于背景（bg）、文本（text）、边框（border）等
-// attr: 属性名称，如color、height、radius等
-// status: 表示组件状态或尺寸，如 hover、disabled、s、l 等
+// attr: 属性名称，如color、height、radius//
+// status: 表示组件状态或尺寸，如 hover、disabled、s、l
 
@@ -14,3 +15,3 @@ // 如：$button-line-bg-color-hover
 
-$checkbox-cls: '#{$prefix}-checkbox';
+$checkbox-cls: "#{$prefix}-checkbox";
 
@@ -43,5 +44,3 @@ // 颜色
 $checkbox-check-height: 9px;
-$checkbox-check-size: (
-  ($checkbox-check-width + $checkbox-check-height) / sqrt(2)
-);
+$checkbox-check-size: (($checkbox-check-width + $checkbox-check-height) / sqrt(2));
 $checkbox-check-left: 3px;
@@ -59,5 +58,5 @@
 
-// 组合复选框margin
+// 组合复选框间距
 $checkbox-group-gap: $spacer-2;
 // 单个复选框margin
 $checkbox-margin: inherit;

styles/components/color-picker/_index.scss

 // 组件允许单个组件打包，因此默认引入公共基础样式
 
-@import "../../_vars.scss";
+@use "../../_vars.scss" as *;
 
-@import "./_vars.scss";
+@use "./_vars.scss" as *;
 
-@import "./_mixins.scss";
+@use "./_mixins.scss" as *;
 
-@import "../../mixins/_reset.scss";
+@use "../../mixins/_reset.scss" as *;
 
@@ -581,3 +581,3 @@ .#{$prefix}-color-picker__panel {
 
-// 覆盖select-option 默认样式，使其更紧凑点
+// 覆盖select-option 默认样式，使其更紧凑
 .#{$prefix}-color-picker__select-options {
@@ -584,0 +584,0 @@ > .#{$prefix}-popup__content {

styles/components/color-picker/_vars.scss

@@ -0,11 +1,7 @@
+@use "../../_vars.scss" as *;
 // 组件变量
-// 名称可按如下规则定义：
-// <component>-[type]-[attrtype]-<attr>-[status]
+// 名称可按如下规则定义// <component>-[type]-[attrtype]-<attr>-[status]
 
-// component:组件名，如button，
-// type: 组件类型，如 button 的次要按钮（line）
-// attrtype: 属性的具体应用场景。如颜色，用于背景（bg）、文本（text）、边框（border）等
-// attr: 属性名称，如color、height、radius等
-// status: 表示组件状态或尺寸，如 hover、disabled、s、l 等
-
+// component:组件名，如button// type: 组件类型，如 button 的次要按钮（line// attrtype: 属性的具体应用场景。如颜色，用于背景（bg）、文本（text）、边框（border）等
+// attr: 属性名称，如color、height、radius// status: 表示组件状态或尺寸，如 hover、disabled、s、l
 // 如：$button-line-bg-color-hover
@@ -65,7 +61,6 @@ // 如：$button-line-height-s
 $color-picker-swatch-wrap-margin-left: ($color-picker-swatch-padding + $color-picker-swatch-border-size) * -1;
-// 右边往外伸出一点，让滚动条居外侧
+// 右边往外伸出一点，让滚动条居外
 $color-picker-swatch-wrap-margin-right: $color-picker-swatch-wrap-margin-left - 10px;
 $color-picker-swatch-wrap-margin: 0 $color-picker-swatch-wrap-margin-right 0 $color-picker-swatch-wrap-margin-left;
-$color-picker-swatch-max-rows: 4; // 最大显示行数
-
+$color-picker-swatch-max-rows: 4; // 最大显示行
 // shadow
@@ -76,3 +71,3 @@ $color-picker-panel-shadow: $shadow-2-inset;
 
-// 最大高度 = 行数 * (itemHeight + itemMarginTop)m;
+// 最大高度= 行数 * (itemHeight + itemMarginTop)m;
 $color-picker-swatch-rows-max-height: calc(
@@ -79,0 +74,0 @@ $color-picker-swatch-max-rows * calc($color-picker-swatch-height + $color-picker-swatch-row-gap)

styles/components/dialog/_animate.scss

@@ -1,6 +0,6 @@
-@import '../../_vars.scss';
-
+@use "../../_vars.scss" as *;
+@use "./_vars.scss" as *;
 .#{$prefix}-dialog-zoom {
   @keyframes tDialogZoomIn {
-    // 解决弹窗中带有动效的Icon不展示（如loading），初始scale为1可以展示正常
+    // 解决弹窗中带有动效的Icon不展示（如loading），初始scale可以展示正常
     0% {
@@ -86,4 +86,2 @@ opacity: 0;
   }
-
-
 }
@@ -90,0 +88,0 @@

styles/components/dialog/_index.scss

@@ -0,14 +1,15 @@
+@use "../../_vars.scss" as *;
 // 组件允许单个组件打包，因此默认引入公共基础样式
 
-@import '../../_vars.scss';
+@use '../../_vars.scss' as *;
 
-@import './_vars.scss';
+@use './_vars.scss' as *;
 
-@import './_animate.scss';
+@use './_animate.scss' as *;
 
-@import './_mixins.scss';
+@use './_mixins.scss' as *;
 
-@import '../../mixins/_reset.scss';
+@use '../../mixins/_reset.scss' as *;
 
-@import '../../mixins/_scrollbar.scss';
+@use '../../mixins/_scrollbar.scss' as *;
 
@@ -204,3 +205,3 @@ // <name> 替换为组件名
 
-  // modeless 点击穿透 即可以操作背景后的元素
+  // modeless 点击穿�?即可以操作背景后的元�?
   &.#{$prefix}-dialog__ctx--modeless {
@@ -241,3 +242,3 @@ pointer-events: none;
   }
-  // 遮罩层
+  // 遮罩�?
   .#{$prefix}-dialog__mask {
@@ -253,3 +254,3 @@ position: fixed;
   }
-  // wrap 滚动的显示层 固定为页面窗口大小
+  // wrap 滚动的显示层 固定为页面窗口大�?
   .#{$prefix}-dialog__wrap {
@@ -265,5 +266,5 @@ position: fixed;
   }
-  // 定位层 用于实现居中 或者距离顶部 定位
+  // 定位�?用于实现居中 或者距离顶�?定位
   .#{$prefix}-dialog__position {
-    // 因为内容会超出 使用flex布局
+    // 因为内容会超�?使用flex布局
     display: flex;
@@ -275,3 +276,3 @@ justify-content: center;
     position: relative;
-    // 设置最小距离顶部底部距离
+    // 设置最小距离顶部底部距�?
     padding: 48px 0;
@@ -282,3 +283,3 @@ box-sizing: border-box;
       align-items: flex-start;
-      // 这里top api实现 更改padding 因为子元素拖拽定位 如果使用子元素margin 拖拽时需要计算margin 比较麻烦
+      // 这里top api实现 更改padding 因为子元素拖拽定�?如果使用子元素margin 拖拽时需要计算margin 比较麻烦
       padding-top: $dialog-top-position-top;
@@ -293,3 +294,3 @@ }
   .#{$prefix}-dialog__position_fullscreen {
-    // 因为内容会超出 使用flex布局
+    // 因为内容会超�?使用flex布局
     display: flex;
@@ -296,0 +297,0 @@ justify-content: center;

styles/components/dialog/_vars.scss

@@ -0,1 +1,2 @@
+@use "../../_vars.scss" as *;
 $dialog-border-color: transparent;
@@ -53,3 +54,3 @@ $dialog-bg-color: $bg-color-container;
 $dialog-close-position-right: $spacer-3;
-// 此处不能使用20% 因为定位是paddingTop 所以20% 会根据屏幕宽度
+// 此处不能使用 20% 因为定位是 paddingTop，所以 20% 会根据屏幕宽度计算
 $dialog-top-position-top: 20vh;
@@ -56,0 +57,0 @@

styles/components/drawer/_index.scss

@@ -1,6 +0,6 @@
-@import "../../_vars.scss";
-@import "./_var.scss";
-@import "./_mixins.scss";
-@import "../../mixins/_reset.scss";
-@import "../../utilities/_tips.scss";
+@use "../../_vars.scss" as *;
+@use "./_var.scss" as *;
+@use "./_mixins.scss" as *;
+@use "../../mixins/_reset.scss" as *;
+@use "../../utilities/_tips.scss" as *;
 
@@ -7,0 +7,0 @@ .#{$prefix}-drawer {

styles/components/drawer/_var.scss

 /**
  * 颜色
  */
+@use "../../_vars.scss" as *;
+
 $dialog-box-shadow: $shadow-2;
@@ -5,0 +7,0 @@ $drawer-bg-color: $bg-color-container;

styles/components/fireworks/_index.scss

@@ -1,3 +0,3 @@
-@import "../../_vars.scss";
-@import "./_vars.scss";
+@use "../../_vars.scss" as *;
+@use "./_vars.scss" as *;
 
@@ -4,0 +4,0 @@ .#{$prefix}-fireworks {

styles/components/fireworks/_vars.scss

@@ -0,1 +1,2 @@
+@use "../../_vars.scss" as *;
 $fireworks-min-height: 260px !default;
@@ -2,0 +3,0 @@ $fireworks-spark-width: 2px !default;

styles/components/form/_index.scss

@@ -0,10 +1,11 @@
+@use "../../_vars.scss" as *;
 // 组件允许单个组件打包，因此默认引入公共基础样式
 
-@import '../../_vars.scss';
+@use '../../_vars.scss' as *;
 
-@import './_vars.scss';
+@use './_vars.scss' as *;
 
-@import './_mixins.scss';
+@use './_mixins.scss' as *;
 
-@import '../../mixins/_reset.scss';
+@use '../../mixins/_reset.scss' as *;
 
@@ -27,3 +28,3 @@ .#{$prefix}-form {
 
-    // 文档流撑开内容补足剩余的 4px
+    // 文档流撑开内容补足剩余�?4px
     &.#{$prefix}-form__item-with-help {
@@ -33,3 +34,3 @@ margin-bottom: $form-item-with-help-margin-bottom;
 
-    // 绝对定位布局需要重设底部间距
+    // 绝对定位布局需要重设底部间�?
     &.#{$prefix}-form__item-with-extra {
@@ -102,3 +103,3 @@ margin-bottom: $form-item-margin-bottom;
 
-    // formItem 嵌套情况无间距
+    // formItem 嵌套情况无间�?
     .#{$prefix}-form__item {
@@ -116,3 +117,3 @@ margin-bottom: 0;
   &__controls.#{$prefix}-form--success-border {
-    // 输入框状态
+    // 输入框状�?
     @include input-status(success);
@@ -176,4 +177,4 @@ }
 
-// 输入框状态
+// 输入框状�?
 @include input-status(warning);
 @include input-status(error);

styles/components/form/_mixins.scss

@@ -1,2 +0,4 @@
-@use 'sass:map';
+@use "sass:map";
+@use "../../_vars.scss" as *;
+@use "./_vars.scss" as *;
 
@@ -9,3 +11,3 @@ @mixin input-status($status) {
     .#{$prefix}-form__controls-content {
-      // TODO: 兼容目前未使用SelectInput重构的组件的样式 全部重构后可以都由input层控制状态变化
+      // TODO: 兼容目前未使用SelectInput重构的组件的样式 全部重构后可以都由input层控制状态变量
       .#{$prefix}-input,
@@ -20,4 +22,3 @@ .#{$prefix}-select,
         &--focused {
-          box-shadow: 0 0 0 2px
-            map.get(map.get($input-color, box-shadow), $status);
+          box-shadow: 0 0 0 2px map.get(map.get($input-color, box-shadow), $status);
         }
@@ -33,5 +34,3 @@
       .#{$prefix}-select {
-        > .#{$prefix}-select__right-icon:not(
-            .#{$prefix}-select__right-icon-clear
-          ) {
+        > .#{$prefix}-select__right-icon:not(.#{$prefix}-select__right-icon-clear) {
           color: map.get(map.get($input-color, border), $status);
@@ -56,4 +55,3 @@ }
         &.#{$prefix}-is-active {
-          box-shadow: 0 0 0 2px
-            map.get(map.get($input-color, box-shadow), $status);
+          box-shadow: 0 0 0 2px map.get(map.get($input-color, box-shadow), $status);
         }
@@ -60,0 +58,0 @@ }

styles/components/form/_vars.scss

@@ -0,10 +1,11 @@
+@use "../../_vars.scss" as *;
 // 组件变量
-// 名称可按如下规则定义：
+// 名称可按如下规则定义//
 // <component>-[type]-[attrtype]-<attr>-[status]
 
-// component:组件名，如button，
-// type: 组件类型，如 button 的次要按钮（line）
+// component:组件名，如button//
+// type: 组件类型，如 button 的次要按钮（line//
 // attrtype: 属性的具体应用场景。如颜色，用于背景（bg）、文本（text）、边框（border）等
-// attr: 属性名称，如color、height、radius等
-// status: 表示组件状态或尺寸，如 hover、disabled、s、l 等
+// attr: 属性名称，如color、height、radius//
+// status: 表示组件状态或尺寸，如 hover、disabled、s、l
 
@@ -33,3 +34,3 @@ // 如：$button-line-bg-color-hover
   success: $success-color,
-  extra: $text-color-placeholder,
+  extra: $text-color-placeholder
 );
@@ -67,7 +68,7 @@ // 间距
       hover: $brand-color,
-      focus: $brand-color,
+      focus: $brand-color
     ),
     success: $success-color,
     warning: $warning-color,
-    error: $error-color,
+    error: $error-color
   ),
@@ -81,3 +82,3 @@ text: (
     tips: $text-color-placeholder,
-    disabled: $text-color-disabled,
+    disabled: $text-color-disabled
   ),
@@ -87,3 +88,3 @@ bg-color: (
     readonly: $bg-color-specialcomponent,
-    disabled: $bg-color-component-disabled,
+    disabled: $bg-color-component-disabled
   ),
@@ -94,3 +95,3 @@ extra: (
     warning: $warning-color,
-    error: $error-color,
+    error: $error-color
   ),
@@ -103,4 +104,4 @@ append: $bg-color-secondarycontainer-hover,
     warning: $warning-color-focus,
-    error: $error-color-focus,
-  ),
+    error: $error-color-focus
+  )
 );

styles/components/input-number/_index.scss

 // 组件允许单个组件打包，因此默认引入公共基础样式
 
-@import "../../_vars.scss";
+@use "../../_vars.scss" as *;
 
-@import "./_vars.scss";
+@use "./_vars.scss" as *;
 
-@import "../../mixins/_reset.scss";
+@use "../../mixins/_reset.scss" as *;
 
@@ -42,71 +42,77 @@ $inputCls: "#{$prefix}-input";
 
-  // 输入框和右置内容之间需要间距
-  input + .#{$prefix}-input__suffix {
-    margin-left: $input-number-padding-horizontal-default;
-  }
+  // 输入框和右置内容之间需要间距  input + .#{$prefix}-input__suffix {
+  margin-left: $input-number-padding-horizontal-default;
+}
 
-  .#{$prefix}-input__prefix {
-    margin-right: $input-number-padding-horizontal-default;
+.#{$prefix}-input__prefix {
+  margin-right: $input-number-padding-horizontal-default;
+}
+
+.#{$inputCls} {
+  color: $input-number-inner-color;
+}
+
+// autoWidth适配
+.#{$inputNumberCls}--auto-width {
+  width: auto;
+
+  &.#{$prefix}-is-controls-right {
+    min-width: auto;
+    width: auto;
   }
 
-  .#{$inputCls} {
-    color: $input-number-inner-color;
+  .#{$prefix}-input__inner {
+    min-width: 42px;
   }
+}
 
-  // autoWidth适配
-  &.#{$inputNumberCls}--auto-width {
-    width: auto;
+.#{$inputNumberCls}__decrease,
+.#{$inputNumberCls}__increase {
+  width: $input-number-button-width;
+  height: $input-number-button-height;
+  position: absolute;
+  top: 0;
+  border: 1px solid $input-number-button-border-color;
+  box-sizing: border-box;
+  border-radius: $border-radius-default;
+  background-color: $input-number-button-bg-color;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1;
+  cursor: pointer;
+  // transition: all @anim-time-fn-easing @anim-duration-base;
 
-    &.#{$prefix}-is-controls-right {
-      min-width: auto;
-      width: auto;
-    }
+  &:hover {
+    color: $input-number-button-color-hover;
+    border-color: $input-number-button-color-hover;
 
-    .#{$prefix}-input__inner {
-      min-width: 42px;
+    .t-icon {
+      color: $input-number-button-color-hover;
     }
   }
 
-  & &__decrease,
-  & &__increase {
-    width: $input-number-button-width;
-    height: $input-number-button-height;
-    position: absolute;
-    top: 0;
-    border: 1px solid $input-number-button-border-color;
-    box-sizing: border-box;
-    border-radius: $border-radius-default;
-    background-color: $input-number-button-bg-color;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  &:active {
+    color: $input-number-button-color-hover;
+    background-color: $bg-color-container-hover;
+  }
+
+  .t-icon {
+    position: relative;
     z-index: 1;
-    cursor: pointer;
-    // transition: all @anim-time-fn-easing @anim-duration-base;
+    font-size: $input-number-font-size;
+    color: $text-color-secondary;
+  }
 
-    &:hover {
-      color: $input-number-button-color-hover;
-      border-color: $input-number-button-color-hover;
+  &.#{$prefix}-is-disabled {
+    color: $input-number-button-color-disabled;
+    cursor: no-drop;
+    background-color: $input-number-button-bg-color-disabled;
 
-      .t-icon {
-        color: $input-number-button-color-hover;
-      }
-    }
-
-    &:active {
-      color: $input-number-button-color-hover;
-      background-color: $bg-color-container-hover;
-    }
-
     .t-icon {
-      position: relative;
-      z-index: 1;
-      font-size: $input-number-font-size;
-      color: $text-color-secondary;
+      color: $input-number-button-color-disabled;
     }
 
-    &.#{$prefix}-is-disabled {
-      color: $input-number-button-color-disabled;
-      cursor: no-drop;
-      background-color: $input-number-button-bg-color-disabled;
+    &:hover {
+      border-color: $input-number-button-border-color;
 
@@ -116,24 +122,16 @@ .t-icon {
       }
+    }
 
-      &:hover {
-        border-color: $input-number-button-border-color;
-
-        .t-icon {
-          color: $input-number-button-color-disabled;
-        }
-      }
-
-      &::placeholder {
-        color: $input-number-inner-color-disabled;
-      }
+    &::placeholder {
+      color: $input-number-inner-color-disabled;
     }
   }
+}
 
-  & &__decrease {
-    left: 0;
-  }
+.#{$inputNumberCls}__decrease {
+  left: 0;
+}
 
-  & &__increase {
-    right: -8px;
-  }
+.#{$inputNumberCls}__increase {
+  right: -8px;
 }
@@ -140,0 +138,0 @@

styles/components/input-number/_vars.scss

@@ -0,4 +1,4 @@
+@use "../../_vars.scss" as *;
 // 颜色
-// $input-number-border-color: $border-level-2-color; // 数字输入框边框颜色
-
+$input-number-border-color: $border-level-2-color; // 数字输入框边框颜色
 $input-number-inner-color: $text-color-primary; // 数字输入框文字颜色
@@ -10,9 +10,7 @@ $input-number-button-bg-color: transparent; // 数字输入框操作按钮背景颜色
 $input-number-button-color: $text-color-disabled; // 数字输入框操作按钮图标颜色
-
 $input-number-right-bg-color: $bg-color-container; // 右侧调整数字输入框背景颜色
 $input-number-right-button-border-color: $border-level-2-color; // 右侧调整数字输入框操作按钮边框颜色
-
 $input-number-border-color-hover: $brand-color-hover; // 数字输入框hover边框颜色
 $input-number-right-border-color-hover: $brand-color-hover; // 数字输入框操作按钮hover边框颜色
-$input-number-button-color-hover: $brand-color; // 数字输入框操作按钮hover字体色
+$input-number-button-color-hover: $brand-color; // 数字输入框操作按钮hover字体颜色
 $input-number-bg-color-disabled: $bg-color-component-disabled; // 数字输入区域disabled背景颜色
@@ -29,29 +27,22 @@ $input-number-inner-color-disabled: $text-color-disabled; // 数字输入区域disabled文字颜色
 // 尺寸
-$input-number-width-s: 120px; // 数字输入组件宽度 小
-$input-number-width: 144px; // 数字输入组件宽度 中
-$input-number-width-l: 168px; // 数字输入组件宽度 大
-
-$input-number-button-width-s: $comp-size-xs; // 数字输入框操作按钮宽度 小
-$input-number-button-width: $comp-size-m; // 数字输入框操作按钮的宽度 中
-$input-number-button-width-l: $comp-size-xl; // 数字输入框操作按钮宽度 大
-
-$input-number-button-height-s: $comp-size-xs; // 数字输入框操作按钮高度 小
-$input-number-button-height: $comp-size-m; // 数字输入框操作按钮的高度 中
-$input-number-button-height-l: $comp-size-xl; // 数字输入框操作按钮高度 大
-
-$input-number-inner-height-s: $comp-size-xs; // 数字输入框高度 小
-$input-number-inner-height: $comp-size-m; // 数字输入框高度 中
-$input-number-inner-height-l: $comp-size-xl; // 数字输入框高度 大
-
-$input-number-right-width-s: 88px; // 右侧调整数字输入组件宽度 小
-$input-number-right-width: 96px; // 右侧调整数字输入组件宽度 中
-$input-number-right-width-l: 120px; // 右侧调整数字输入组件宽度 大
-
-$input-number-right-button-width: $comp-size-m; // 右侧调整数字输入框操作按钮宽度 中
-$input-number-right-button-width-l: $comp-size-xl; // 右侧调整数字输入框操作按钮宽度 大
-
-$input-number-button-column-height-s: calc(calc($comp-size-xs / 2) - 2px); //  右侧调整数字操作按钮的高度 中
-$input-number-button-column-height: calc(calc($comp-size-m / 2) - 2px); //  右侧调整数字操作按钮的高度 中
-$input-number-button-column-height-l: calc(calc($comp-size-xl / 2) - 2px); //  右侧调整数字操作按钮的高度 大
-
+$input-number-width-s: 120px; // 数字输入组件宽度
+$input-number-width: 144px; // 数字输入组件宽度
+$input-number-width-l: 168px; // 数字输入组件宽度
+$input-number-button-width-s: $comp-size-xs; // 数字输入框操作按钮宽度
+$input-number-button-width: $comp-size-m; // 数字输入框操作按钮的宽度
+$input-number-button-width-l: $comp-size-xl; // 数字输入框操作按钮宽度
+$input-number-button-height-s: $comp-size-xs; // 数字输入框操作按钮高度
+$input-number-button-height: $comp-size-m; // 数字输入框操作按钮的高度
+$input-number-button-height-l: $comp-size-xl; // 数字输入框操作按钮高度
+$input-number-inner-height-s: $comp-size-xs; // 数字输入框高度
+$input-number-inner-height: $comp-size-m; // 数字输入框高度
+$input-number-inner-height-l: $comp-size-xl; // 数字输入框高度
+$input-number-right-width-s: 88px; // 右侧调整数字输入组件宽度
+$input-number-right-width: 96px; // 右侧调整数字输入组件宽度
+$input-number-right-width-l: 120px; // 右侧调整数字输入组件宽度
+$input-number-right-button-width: $comp-size-m; // 右侧调整数字输入框操作按钮宽度
+$input-number-right-button-width-l: $comp-size-xl; // 右侧调整数字输入框操作按钮宽度
+$input-number-button-column-height-s: calc(calc($comp-size-xs / 2) - 2px); //  右侧调整数字操作按钮的高度
+$input-number-button-column-height: calc(calc($comp-size-m / 2) - 2px); //  右侧调整数字操作按钮的高度
+$input-number-button-column-height-l: calc(calc($comp-size-xl / 2) - 2px); //  右侧调整数字操作按钮的高度
 $input-number-padding-horizontal-default: $comp-paddingLR-s;
@@ -58,0 +49,0 @@

styles/components/input/_index.scss

@@ -1,8 +0,9 @@
-@import './_vars.scss';
-@import './_mixins.scss';
-@import '../../mixins/_text.scss';
-@import './_map.scss';
+@use "../../_vars.scss" as *;
+@use './_vars.scss' as *;
+@use './_mixins.scss' as *;
+@use '../../mixins/_text.scss' as *;
+@use './_map.scss' as *;
 
-@import '../../mixins/_reset.scss';
-@import '../../utilities/_tips.scss';
+@use '../../mixins/_reset.scss' as *;
+@use '../../utilities/_tips.scss' as *;
 
@@ -70,3 +71,3 @@ .#{$prefix}-input {
 
-    // 隐藏Edge浏览器默认的密码框样式
+    // 隐藏Edge浏览器默认的密码框样�?
     &[type='password']::-ms-reveal {
@@ -88,3 +89,3 @@ display: none;
 
-  // 底部的额外消息
+  // 底部的额外消�?
   &__extra {
@@ -95,3 +96,3 @@ font: $input-extra-font;
 
-  // 输入框后面的状态图标
+  // 输入框后面的状态图�?
   &__status {
@@ -114,3 +115,3 @@ position: absolute;
 
-  // 输入框状态
+  // 输入框状�?
 
@@ -120,3 +121,3 @@ @include input-readonly;
 
-  // 输入框的前置、后置图标
+  // 输入框的前置、后置图�?
   @include input-fix-position(prefix);
@@ -131,3 +132,3 @@ @include input-fix-position(suffix);
 
-  // 输入框大小
+  // 输入框大�?
   &.#{$prefix}-size-l {
@@ -185,3 +186,3 @@ height: $input-height-l;
     .#{$prefix}-input__suffix {
-      // 特殊使用的 suffix icon
+      // 特殊使用�?suffix icon
       > .t-icon-time,
@@ -188,0 +189,0 @@ .t-icon-calendar {

styles/components/input/_mixins.scss

@@ -1,2 +0,4 @@
-@import './_map.scss';
+@use "../../_vars.scss" as *;
+@use "./_vars.scss" as *;
+@use "./_map.scss" as *;
 
@@ -74,3 +76,3 @@ @mixin input-base() {
 
-// 状态样式：需要 map-get 或 #{} 来拼接变量名
+// 状态样式：需使用map-get 和 #{} 来拼接变量名
 @mixin input-status($status) {
@@ -77,0 +79,0 @@ &.#{$prefix}-is-#{$status} {

styles/components/input/_vars.scss

@@ -0,10 +1,8 @@
+@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 等
+// component:组件名，如button// type: 组件类型，如 button 的次要按钮（line// attrtype: 属性的具体应用场景。如颜色，用于背景（bg）、文本（text）、边框（border）等
+// attr: 属性名称，如color、height、radius// status: 表示组件状态或尺寸，如 hover、disabled、s、l
 
@@ -14,4 +12,2 @@ // 如：$button-line-bg-color-hover
 
-@import '../../_vars.scss';
-
 // 颜色
@@ -29,7 +25,7 @@ $input-border-color-default: $border-level-2-color;
       hover: $brand-color,
-      focus: $brand-color,
+      focus: $brand-color
     ),
     success: $success-color,
     warning: $warning-color,
-    error: $error-color,
+    error: $error-color
   ),
@@ -43,3 +39,3 @@ text: (
     tips: $text-color-placeholder,
-    disabled: $text-color-disabled,
+    disabled: $text-color-disabled
   ),
@@ -49,3 +45,3 @@ bg-color: (
     readonly: $bg-color-specialcomponent,
-    disabled: $bg-color-component-disabled,
+    disabled: $bg-color-component-disabled
   ),
@@ -56,3 +52,3 @@ extra: (
     warning: $warning-color,
-    error: $error-color,
+    error: $error-color
   ),
@@ -65,4 +61,4 @@ append: $bg-color-secondarycontainer-hover,
     warning: $warning-color-focus,
-    error: $error-color-focus,
-  ),
+    error: $error-color-focus
+  )
 );
@@ -69,0 +65,0 @@

styles/components/ip-input/_index.scss

@@ -1,6 +0,6 @@
-@import "../../_vars.scss";
-@import "../input/_vars.scss";
-@import "../input/_mixins.scss";
-@import "../../mixins/_reset.scss";
-@import "../../utilities/_tips.scss";
+@use "../../_vars.scss" as *;
+@use "../input/_vars.scss" as *;
+@use "../input/_mixins.scss" as *;
+@use "../../mixins/_reset.scss" as *;
+@use "../../utilities/_tips.scss" as *;
 
@@ -68,3 +68,3 @@ .#{$prefix}-ip-input {
 
-      // 错误状态下的聚焦样式，优先级高于普通聚焦和 --focused 类
+      // 错误状态下的聚焦样式，优先级高于普通聚焦和 --focused
       &:focus {
@@ -75,3 +75,3 @@ border-color: $input-border-color-error !important;
 
-      // 当同时有 --error 和 --focused 类时，确保错误样式优先
+      // 当同时有 --error --focused 类时，确保错误样式优先
       &.#{$prefix}-ip-input__segment--focused {
@@ -279,5 +279,2 @@ border-color: $input-border-color-error !important;
   }
-
-  // 移除整个组件的 is-error 样式，因为每个段有自己的错误状态
-  // 错误状态通过 __segment--error 等类来控制
 }

styles/components/layout/_index.scss

 // 组件允许单个组件打包，因此默认引入公共基础样式
 
-@import "../../_vars.scss";
+@use "../../_vars.scss" as *;
 
-@import "./_vars.scss";
+@use "./_vars.scss" as *;
 
-@import "./_mixin.scss";
+@use "./_mixin.scss" as *;
 
-@import "../../mixins/_reset.scss";
+@use "../../mixins/_reset.scss" as *;
 
@@ -11,0 +11,0 @@ .#{$prefix}-layout {

styles/components/layout/_vars.scss

@@ -0,11 +1,12 @@
+@use "../../_vars.scss" as *;
 // 颜色
-// layout字体色
+// layout字体
 $layout-color: $text-color-secondary;
-// layout背景色
+// layout背景
 $layout-bg-color: $bg-color-page;
-// header背景色
+// header背景
 $layout-header-bg-color: $bg-color-container;
-// sider背景色
+// sider背景
 $layout-sider-bg-color: $bg-color-container;
-// footer字体色
+// footer字体
 $layout-footer-color: $text-color-placeholder;
@@ -12,0 +13,0 @@

styles/components/layout/doc.scss

@@ -1,2 +0,2 @@
-@import "../../_vars.scss";
+@use "../../_vars.scss" as *;
 
@@ -3,0 +3,0 @@ .#{$prefix}-layout__content {

styles/components/list/_index.scss

@@ -1,10 +0,10 @@
-@import "../../_vars.scss";
+@use "../../_vars.scss" as *;
 
-@import "./_vars.scss";
+@use "./_vars.scss" as *;
 
-@import "../../mixins/_reset.scss";
+@use "../../mixins/_reset.scss" as *;
 
-@import "../../mixins//layout.scss";
+@use "../../mixins//layout.scss" as *;
 
-@import "../../mixins/scrollbar.scss";
+@use "../../mixins/scrollbar.scss" as *;
 .#{$prefix}-list {
@@ -11,0 +11,0 @@ @include reset();

styles/components/list/_vars.scss

@@ -0,1 +1,2 @@
+@use "../../_vars.scss" as *;
 // 颜色
@@ -2,0 +3,0 @@ $list-bg-color-default: $bg-color-container;

styles/components/loading/_index.scss

@@ -1,8 +0,9 @@
-@import '../../_vars.scss';
+@use "../../_vars.scss" as *;
+@use '../../_vars.scss' as *;
 
-@import './_vars.scss';
+@use './_vars.scss' as *;
 
-@import '../../utilities/_animation.scss';
+@use '../../utilities/_animation.scss' as *;
 
-@import '../../mixins/_reset.scss';
+@use '../../mixins/_reset.scss' as *;
 
@@ -9,0 +10,0 @@ .#{$prefix}-loading {

styles/components/loading/_vars.scss

@@ -0,10 +1,11 @@
+@use "../../_vars.scss" as *;
 // 组件变量
-// 名称可按如下规则定义：
+// 名称可按如下规则定义//
 // <component>-[type]-[attrtype]-<attr>-[status]
 
-// component:组件名，如button，
-// type: 组件类型，如 button 的次要按钮（line）
+// component:组件名，如button//
+// type: 组件类型，如 button 的次要按钮（line//
 // attrtype: 属性的具体应用场景。如颜色，用于背景（bg）、文本（text）、边框（border）等
-// attr: 属性名称，如color、height、radius等
-// status: 表示组件状态或尺寸，如 hover、disabled、s、l 等
+// attr: 属性名称，如color、height、radius//
+// status: 表示组件状态或尺寸，如 hover、disabled、s、l
 
@@ -11,0 +12,0 @@ // 如：$button-line-bg-color-hover

styles/components/notification/_index.scss

@@ -0,9 +1,10 @@
+@use "../../_vars.scss" as *;
 // 组件允许单个组件打包，因此默认引入公共基础样式
-@import '../../vars.scss';
+@use '../../vars.scss' as *;
 
-@import './_vars.scss';
+@use './_vars.scss' as *;
 
-@import './_mixins.scss';
+@use './_mixins.scss' as *;
 
-@import '../../mixins/_reset.scss';
+@use '../../mixins/_reset.scss' as *;
 
@@ -10,0 +11,0 @@ .#{$prefix}-notify {

styles/components/notification/_mixins.scss

@@ -0,1 +1,2 @@
+@use "../../_vars.scss" as *;
 @mixin notification() {
@@ -2,0 +3,0 @@ font: $notification-font;

styles/components/notification/_vars.scss

@@ -0,10 +1,11 @@
+@use "../../_vars.scss" as *;
 // 组件变量
-// 名称可按如下规则定义：
+// 名称可按如下规则定义//
 // <component>-[type]-[attrtype]-<attr>-[status]
 
-// component:组件名，如button，
+// component: 组件名，如 button
 // type: 组件类型，如 button 的次要按钮（line）
 // attrtype: 属性的具体应用场景。如颜色，用于背景（bg）、文本（text）、边框（border）等
-// attr: 属性名称，如color、height、radius等
-// status: 表示组件状态或尺寸，如 hover、disabled、s、l 等
+// attr: 属性名称，如 color、height、radius
+// status: 表示组件状态或尺寸，如 hover、disabled、s、l
 
@@ -11,0 +12,0 @@ // 如：$button-line-bg-color-hover

styles/components/popup/_index.scss

@@ -1,13 +0,9 @@
-// 组件允许单个组件打包，因此默认引入公共基础样式
+@use "../../_vars.scss" as *;
+@use "./_vars.scss" as *;
+@use "./_mixin.scss" as *;
 
-@import '../../vars.scss';
+@use "../../mixins/_layout.scss" as *;
 
-@import './_var.scss';
+@use "../../mixins/_reset.scss" as *;
 
-@import './_mixin.scss';
-
-@import '../../mixins/_layout.scss';
-
-@import '../../mixins/_reset.scss';
-
 .#{$prefix}-popup {
@@ -41,3 +37,3 @@ @include reset;
     position: absolute;
-    content: '';
+    content: "";
     width: $popup-arrow-width;
@@ -44,0 +40,0 @@ height: $popup-arrow-height;

styles/components/popup/_mixin.scss

@@ -0,1 +1,3 @@
+@use "../../_vars.scss" as *;
+@use "./_vars.scss" as *;
 @mixin content-placement-top {
@@ -126,3 +128,3 @@ .#{$prefix}-popup[data-popper-placement^="top"] {
 
-@mixin  arrow-placement-right() {
+@mixin arrow-placement-right() {
   .#{$prefix}-popup[data-popper-placement^="right"] .#{$prefix}-popup__arrow {
@@ -149,3 +151,1 @@ left: calc(-#{$popup-arrow-width} / 2);
 }
-
-

styles/components/radio/_index.scss

@@ -0,9 +1,9 @@
+@use "../../_vars.scss" as *;
 // 组件允许单个组件打包，因此默认引入公共基础样式
 
-@import "../../vars.scss";
-@import "./_var.scss";
-@import "./_mixins.scss";
-@import "../../mixins/_reset.scss";
-@import "../../mixins/_scrollbar.scss";
-@import "../../mixins/_focus.scss";
+@use "./_vars.scss" as *;
+@use "./_mixins.scss" as *;
+@use "../../mixins/_reset.scss" as *;
+@use "../../mixins/_scrollbar.scss" as *;
+@use "../../mixins/_focus.scss" as *;
 
@@ -10,0 +10,0 @@ // <name> 替换为组件名

styles/components/select-input/_index.scss

@@ -1,5 +0,5 @@
-@import '../../vars.scss';
+@use '../../vars.scss' as *;
 
-@import './_var.scss';
+@use './_var.scss' as *;
 
-@import '../../mixins/_reset.scss';
+@use '../../mixins/_reset.scss' as *;

styles/components/select-input/_var.scss

@@ -0,3 +1,4 @@
+@use "../../_vars.scss" as *;
 $select-input-focus-bg: $bg-color-container-hover;
 $select-input-border-radius: $border-radius-default;
 $select-input-shadow: 0 0 0 2px $brand-color-focus;

styles/components/select/_index.scss

@@ -1,10 +0,11 @@
-@import '../../_vars.scss';
+@use "../../_vars.scss" as *;
+@use '../../_vars.scss' as *;
 
-@import './_var.scss';
+@use './_var.scss' as *;
 
-@import '../../mixins/_text.scss';
+@use '../../mixins/_text.scss' as *;
 
-@import '../../mixins/_reset.scss';
+@use '../../mixins/_reset.scss' as *;
 
-@import '../../mixins/_scrollbar.scss';
+@use '../../mixins/_scrollbar.scss' as *;
 
@@ -22,3 +23,3 @@ // select
     margin: $select-dropdown-margin;
-    padding: 0; // 展开动画 如果有padding会直接生长 需要移动到内部
+    padding: 0; // 展开动画 如果有padding会直接生�?需要移动到内部
     max-height: $select-dropdown-max-height;
@@ -249,3 +250,3 @@ overflow-y: auto;
 
-/** 规范 CSS 类名为 --hover */
+/** 规范 CSS 类名�?--hover */
 .#{$prefix}-select-option.#{$prefix}-select-option__hover,
@@ -252,0 +253,0 @@ .#{$prefix}-select-option.#{$prefix}-select-option--hover {

styles/components/select/_var.scss

@@ -0,1 +1,2 @@
+@use "../../_vars.scss" as *;
 // 颜色
@@ -49,4 +50,2 @@ $select-bg-color: $bg-color-specialcomponent;
 
-//透明度
-
 // padding
@@ -53,0 +52,0 @@ $select-option-padding-s: 0 $comp-paddingLR-s;

styles/components/slider/_index.scss

 // 组件允许单个组件打包，因此默认引入公共基础样式
 
-@import "../../_vars.scss";
+@use "../../_vars.scss" as *;
 
-@import "./_vars.scss";
+@use "./_vars.scss" as *;
 
-@import "./_mixins.scss";
+@use "./_mixins.scss" as *;
 
-@import "../../mixins/_reset.scss";
+@use "../../mixins/_reset.scss" as *;
 
@@ -11,0 +11,0 @@ .#{$prefix}-slider__input-container {

styles/components/slider/_vars.scss

@@ -0,9 +1,10 @@
+@use "../../_vars.scss" as *;
 $slider-background: $bg-color-secondarycomponent;
 $slider-background-current: $brand-color;
 $slider-text: $text-color-primary;
-$slider-control-bar-background: #fff; // 滑块背景色不随默认/深色模式切换改变，固定为白色，故不使用背景色 token
+$slider-control-bar-background: #fff; // 滑块背景色不随默认深色模式切换改变，固定为白色，故不使用背景色 token
 $slider-control-bar-border: $brand-color;
 
 $slider-background-hover: $bg-color-secondarycomponent-hover;
-$slider-control-bar-background-hover: $gray-color-1; // 滑块背景色不随默认/深色模式切换改变，hover 后颜色固定为 $gray-color-1
+$slider-control-bar-background-hover: $gray-color-1; // 滑块背景色不随默认深色模式切换改变，hover 后颜色固定为 $gray-color-1
 
@@ -10,0 +11,0 @@ $slider-background-disabled: $bg-color-component-disabled;

styles/components/switch/_index.scss

@@ -1,8 +0,9 @@
-@import '../../_vars.scss';
+@use "../../_vars.scss" as *;
+@use '../../_vars.scss' as *;
 
-@import './_vars.scss';
+@use './_vars.scss' as *;
 
-@import './_mixins.scss';
+@use './_mixins.scss' as *;
 
-@import '../../mixins/_reset.scss';
+@use '../../mixins/_reset.scss' as *;
 
@@ -9,0 +10,0 @@ .#{$prefix}-switch {

styles/components/switch/_vars.scss

@@ -0,1 +1,2 @@
+@use "../../_vars.scss" as *;
 
@@ -22,9 +23,9 @@ // 颜色
 
-$switch-min-width-l: calc($switch-height-l / .618);
-$switch-min-width-default: calc($switch-height-default / .618);
-$switch-min-width-s: calc($switch-height-s / .618);
+$switch-min-width-l: calc($switch-height-l / 0.618);
+$switch-min-width-default: calc($switch-height-default / 0.618);
+$switch-min-width-s: calc($switch-height-s / 0.618);
 
 //change uncheck handle size
 $switch-width-border-base: 5px;
-$switch-width-border-value: 1px; //公差值
+$switch-width-border-value: 1px; //公差
 
@@ -37,3 +38,3 @@ $switch-width-border-l: $switch-width-border-base;
 $switch-width-border-check-base: 3px;
-$switch-width-border-check-value: .5px; //公差值
+$switch-width-border-check-value: 0.5px; //公差
 
@@ -62,3 +63,4 @@ $switch-width-border-check-l: $switch-width-border-check-base;
 $switch-handle-transition: all $anim-duration-base $anim-time-fn-easing;
-$switch-content-transition: padding $anim-duration-base $anim-time-fn-easing,
+$switch-content-transition:
+  padding $anim-duration-base $anim-time-fn-easing,
   opacity $anim-duration-base linear;

styles/components/table/_index.scss

@@ -1,4 +0,5 @@
-@import "../../vars.scss";
-@import "../../mixins/_reset.scss";
-@import "./_var.scss";
+@use "../../_vars.scss" as *;
+@use "../../vars.scss" as *;
+@use "../../mixins/_reset.scss" as *;
+@use "./_var.scss" as *;
 
@@ -78,16 +79,13 @@ // 表格基础样式
 
-  // 当单元格启用省略时
-  &__cell--ellipsis {
-    overflow: hidden;
-    position: relative;
+  // 当单元格启用省略�?  &__cell--ellipsis {
+  overflow: hidden;
+  position: relative;
+  max-width: 100%;
+
+  // 确保内部内容不会超出
+  & > div {
+    width: 100%;
     max-width: 100%;
-
-    // 确保内部内容不会超出
-    & > div {
-      width: 100%;
-      max-width: 100%;
-      box-sizing: border-box;
-    }
+    box-sizing: border-box;
   }
-
   // 边框模式
@@ -110,7 +108,5 @@ &--bordered {
 
-  // 斑马纹
-  &--stripe {
-    tbody tr:nth-of-type(odd) {
-      background-color: $table-highlight-bg-color;
-    }
+  // 斑马�?  &--stripe {
+  tbody tr:nth-of-type(odd) {
+    background-color: $table-highlight-bg-color;
   }
@@ -155,4 +151,3 @@
 
-    // 固定布局下，省略文本需要特殊处理
-    td.#{$prefix}-table__cell--ellipsis,
+    // 固定布局下，省略文本需要特殊处�?    td.#{$prefix}-table__cell--ellipsis,
     th.#{$prefix}-table__cell--ellipsis {
@@ -181,8 +176,6 @@ overflow: hidden;
 
-  // 空数据
-  &__empty-row {
-    td {
-      padding: 0;
-      border: 0;
-    }
+  // 空数�?  &__empty-row {
+  td {
+    padding: 0;
+    border: 0;
   }
@@ -189,0 +182,0 @@

styles/components/table/_var.scss

@@ -0,3 +1,3 @@
+@use "../../_vars.scss" as *;
 // 表格变量
-// 参考 table_tdesign/style/table/_var.less
 
@@ -4,0 +4,0 @@ // Color

styles/components/tabs/_index.scss

@@ -1,5 +0,6 @@
-@import "../../vars.scss";
-@import "./vars.scss";
-@import "./_mixins.scss";
-@import "../../mixins/reset.scss";
+@use "../../_vars.scss" as *;
+@use "../../vars.scss" as *;
+@use "./vars.scss" as *;
+@use "./_mixins.scss" as *;
+@use "../../mixins/reset.scss" as *;
 
@@ -111,56 +112,56 @@ .#{$prefix}-tabs {
       // font-weight: 500;
-      text-shadow: $tab-btn-text-shadow-active; // 由于在wins上字体变粗时会扩大width的宽度，导致有抖动的问题；因此采用text-shadow来代替
-    }
+      text-shadow: $tab-btn-text-shadow-active; // 由于在wins上字体变粗时会扩大width的宽度，导致有抖动的问题；因此采用text-shadow来代�?    }
 
-    &.#{$prefix}-is-disabled {
-      color: $tab-default-text-disabled;
-      cursor: not-allowed;
-    }
+      &.#{$prefix}-is-disabled {
+        color: $tab-default-text-disabled;
+        cursor: not-allowed;
+      }
 
-    & > .remove-btn {
-      margin-left: $tab-btn-remove-btn-margin-left;
-      transition: $tab-btn-remove-btn-transition;
-      display: flex;
+      & > .remove-btn {
+        margin-left: $tab-btn-remove-btn-margin-left;
+        transition: $tab-btn-remove-btn-transition;
+        display: flex;
+      }
     }
-  }
-  &__content {
-    overflow: hidden;
-    position: relative;
-  }
-  &__bar {
-    position: absolute;
-    background-color: $tab-default-bar-bg-color;
-    z-index: 1;
-    transition: $tab-bar-transition;
-    border-radius: $border-radius-small;
-
-    &.#{$prefix}-is-top {
-      bottom: 0;
-      left: 0;
-      height: $tab-default-stroke-size;
+    &__content {
+      overflow: hidden;
+      position: relative;
     }
+    &__bar {
+      position: absolute;
+      background-color: $tab-default-bar-bg-color;
+      z-index: 1;
+      transition: $tab-bar-transition;
+      border-radius: $border-radius-small;
 
-    &.#{$prefix}-is-bottom {
-      top: 0;
-      left: 0;
-      height: $tab-default-stroke-size;
-    }
+      &.#{$prefix}-is-top {
+        bottom: 0;
+        left: 0;
+        height: $tab-default-stroke-size;
+      }
 
-    &.#{$prefix}-is-left {
-      top: 0;
-      right: 0;
-      width: $tab-default-stroke-size;
-    }
+      &.#{$prefix}-is-bottom {
+        top: 0;
+        left: 0;
+        height: $tab-default-stroke-size;
+      }
 
-    &.#{$prefix}-is-right {
-      top: 0;
-      left: 0;
-      width: $tab-default-stroke-size;
+      &.#{$prefix}-is-left {
+        top: 0;
+        right: 0;
+        width: $tab-default-stroke-size;
+      }
+
+      &.#{$prefix}-is-right {
+        top: 0;
+        left: 0;
+        width: $tab-default-stroke-size;
+      }
     }
   }
-}
-.#{$prefix}-tab-panel {
-  &.#{$prefix}-is-hidden {
-    display: none;
+  .#{$prefix}-tab-panel {
+    &.#{$prefix}-is-hidden {
+      display: none;
+    }
   }
 }

styles/components/tabs/_vars.scss

@@ -0,1 +1,2 @@
+@use "../../_vars.scss" as *;
 // 默认选项卡
@@ -59,3 +60,3 @@ $tab-default-bg: $bg-color-container;
 // 动画&过度
-$tab-nav-scroll-transform: translate(0); // 滚动栏滚动过度
+$tab-nav-scroll-transform: translate(0); // 滚动栏滚动动画
 $tab-btn-fade-transform-left: translateX(-50px); // 按钮过渡动画
@@ -62,0 +63,0 @@ $tab-btn-fade-transform-right: translateX(50px); // 按钮过渡动画

styles/components/tag-input/_index.scss

@@ -1,7 +0,8 @@
-@import '../../_vars.scss';
-@import './_vars.scss';
-@import '../../utilities/_animation.scss';
+@use "../../_vars.scss" as *;
+@use '../../_vars.scss' as *;
+@use './_vars.scss' as *;
+@use '../../utilities/_animation.scss' as *;
 
-@import '../../mixins/_reset.scss';
-@import '../../mixins/_scrollbar.scss';
+@use '../../mixins/_reset.scss' as *;
+@use '../../mixins/_scrollbar.scss' as *;
 
@@ -126,3 +127,3 @@ .#{$prefix}-tag-input {
 
-/** 换行模式避免标签和右侧图标重合，需保留图标宽度 22px 和左侧距离标签间距 8px */
+/** 换行模式避免标签和右侧图标重合，需保留图标宽度 22px 和左侧距离标签间�?8px */
 .#{$prefix}-tag-input--break-line.#{$prefix}-tag-input--with-tag:not(
@@ -143,3 +144,3 @@ .#{$prefix}-input--auto-width
 
-/** auto-width 模式，左右边距相同 */
+/** auto-width 模式，左右边距相�?*/
 .#{$prefix}-tag-input.#{$prefix}-input--auto-width {
@@ -151,3 +152,3 @@ .#{$prefix}-input {
 
-/** max-rows模式，限制最大高度 */
+/** max-rows模式，限制最大高�?*/
 .#{$prefix}-tag-input--max-rows {
@@ -154,0 +155,0 @@ .#{$prefix}-input {

styles/components/tag-input/_vars.scss

@@ -0,1 +1,2 @@
+@use "../../_vars.scss" as *;
 $tag-input-height-s: $comp-size-xs;
@@ -2,0 +3,0 @@ $tag-input-height-default: $comp-size-m;

styles/components/tag/_index.scss

@@ -1,4 +0,5 @@
-@import './_var.scss';
+@use "../../_vars.scss" as *;
+@use './_var.scss' as *;
 
-@import '../../mixins/reset.scss';
+@use '../../mixins/reset.scss' as *;
 
@@ -5,0 +6,0 @@ .#{$prefix}-tag {

styles/components/tag/_var.scss

@@ -0,3 +1,4 @@
+@use "../../_vars.scss" as *;
 // <component>-[type]-[attrtype]-<attr>-[status]
-@import '../../vars.scss';
+@use '../../vars.scss' as *;
 // checked [false - default; true - primary]
@@ -4,0 +5,0 @@ $tag-default-background-color: $bg-color-component;

styles/mixins/_focus.scss

@@ -0,1 +1,2 @@
+@use "../_vars.scss" as *;
 @mixin tab-focus-style-rect() {
@@ -2,0 +3,0 @@ &:focus-visible {

styles/mixins/_reset.scss

@@ -1,2 +0,3 @@
-@import '../_vars.scss';
+@use "../_vars.scss" as *;
+@use '../_vars.scss' as *;
 
@@ -3,0 +4,0 @@ @mixin reset {

styles/mixins/_scrollbar.scss

@@ -1,4 +0,5 @@
-@import '../vars.scss';
+@use "../_vars.scss" as *;
+@use "../vars.scss" as *;
 
-// 滚动条样式 mixin
+// 滚动条样式mixin
 @mixin scrollbar($size: 6px, $borderSize: 0px) {
@@ -24,3 +25,3 @@ // Safari/Chrome 中滚动条样式设置
 
-// 隐藏滚动条 mixin
+// 隐藏滚动条mixin
 @mixin hideScrollbar {
@@ -27,0 +28,0 @@ /* Chrome / Safari */

styles/mixins/_text.scss

@@ -0,1 +1,3 @@
+@use "../_vars.scss" as *;
+
 // 变量定义
@@ -7,3 +9,3 @@ $tips-text-default: $text-color-placeholder;
 
-// 建议维护一个 map，方便按状态取值
+// 建议维护一个map，方便按状态取值
 $tips-text-colors: (
@@ -13,3 +15,3 @@ default: $tips-text-default,
   warning: $tips-text-warning,
-  success: $tips-text-success,
+  success: $tips-text-success
 );
@@ -49,3 +51,3 @@
   warning: $tips-text-warning,
-  error: $tips-text-error,
+  error: $tips-text-error
 );

styles/themes/_dark.scss

@@ -1,2 +0,2 @@
-:root[theme-mode='dark'] {
+:root[theme-mode="dark"] {
   --td-brand-color-1: #1b2f51;
@@ -73,11 +73,11 @@ --td-brand-color-2: #173463;
 
-  // 基础颜色的扩展 用于 hover / 聚焦 / 禁用 / 点击 等状态
-  --td-brand-color-hover: var(--td-brand-color-7); // hover态
+  // 基础颜色的扩充用于 hover / 聚焦 / 禁用 / 点击 等状态
+  --td-brand-color-hover: var(--td-brand-color-7); // hover
   --td-brand-color-focus: var(--td-brand-color-2); // focus态，包括鼠标和键盘
-  --td-brand-color-active: var(--td-brand-color-9); // 点击态
-  --td-brand-color-disabled: var(--td-brand-color-3); // 禁用态
-  --td-brand-color-light: var(--td-brand-color-1); // 浅色的选中态
+  --td-brand-color-active: var(--td-brand-color-9); // 点击
+  --td-brand-color-disabled: var(--td-brand-color-3); // 禁用
+  --td-brand-color-light: var(--td-brand-color-1); // 浅色的选中
   --td-brand-color-light-hover: var(--td-brand-color-2);
 
-  // 警告色扩展
+  // 警告色扩充
   --td-warning-color-hover: var(--td-warning-color-4);
@@ -90,3 +90,3 @@ --td-warning-color-focus: var(--td-warning-color-2);
 
-  // 失败/错误色扩展
+  // 失败/错误色扩充
   --td-error-color-hover: var(--td-error-color-5);
@@ -99,3 +99,3 @@ --td-error-color-focus: var(--td-error-color-2);
 
-  // 成功色扩展
+  // 成功色扩充
   --td-success-color-hover: var(--td-success-color-4);
@@ -113,36 +113,20 @@ --td-success-color-focus: var(--td-success-color-2);
 
-  // 背景色
+  // 背景颜色
   --td-bg-color-page: var(--td-gray-color-14); // 色彩 - page
   --td-bg-color-container: var(--td-gray-color-13); // 色彩 - 容器
   --td-bg-color-container-hover: var(--td-gray-color-12); // 色彩 - 容器 - hover
-  --td-bg-color-container-active: var(
-    --td-gray-color-10
-  ); // 色彩 - 容器 - active
-  --td-bg-color-container-select: var(
-    --td-gray-color-9
-  ); // 色彩 - 容器 - select
+  --td-bg-color-container-active: var(--td-gray-color-10); // 色彩 - 容器 - active
+  --td-bg-color-container-select: var(--td-gray-color-9); // 色彩 - 容器 - select
   --td-bg-color-secondarycontainer: var(--td-gray-color-12); // 色彩 - 次级容器
-  --td-bg-color-secondarycontainer-hover: var(
-    --td-gray-color-11
-  ); // 色彩 - 次级容器 - hover
-  --td-bg-color-secondarycontainer-active: var(
-    --td-gray-color-9
-  ); // 色彩 - 次级容器 - active
+  --td-bg-color-secondarycontainer-hover: var(--td-gray-color-11); // 色彩 - 次级容器 - hover
+  --td-bg-color-secondarycontainer-active: var(--td-gray-color-9); // 色彩 - 次级容器 - active
   --td-bg-color-component: var(--td-gray-color-11); // 色彩  - 组件
   --td-bg-color-component-hover: var(--td-gray-color-10); // 色彩 - 组件 - hover
-  --td-bg-color-component-active: var(
-    --td-gray-color-9
-  ); // 色彩 - 组件 - active
+  --td-bg-color-component-active: var(--td-gray-color-9); // 色彩 - 组件 - active
   --td-bg-color-secondarycomponent: var(--td-gray-color-10); // 色彩 - 次级组件
-  --td-bg-color-secondarycomponent-hover: var(
-    --td-gray-color-9
-  ); // 色彩 - 次级组件 - hover
-  --td-bg-color-secondarycomponent-active: var(
-    --td-gray-color-8
-  ); // 色彩 - 次级组件 - active
-  --td-bg-color-component-disabled: var(
-    --td-gray-color-12
-  ); // 色彩 - 组件 - disabled
+  --td-bg-color-secondarycomponent-hover: var(--td-gray-color-9); // 色彩 - 次级组件 - hover
+  --td-bg-color-secondarycomponent-active: var(--td-gray-color-8); // 色彩 - 次级组件 - active
+  --td-bg-color-component-disabled: var(--td-gray-color-12); // 色彩 - 组件 - disabled
 
-  // 特殊组件背景色，目前只用于 button、input 组件多主题场景，浅色主题下固定为白色，深色主题下为 transparent 适配背景颜色
+  // 特殊组件背景色，目前只用button、input 组件多主题场景，浅色主题下固定为白色，深色主题下transparent 适配背景颜色
   --td-bg-color-specialcomponent: transparent;
@@ -153,3 +137,3 @@
   --td-text-color-secondary: var(--td-font-white-2); // 色彩-文字-次要
-  --td-text-color-placeholder: var(--td-font-white-3); // 色彩-文字-占位符/说明
+  --td-text-color-placeholder: var(--td-font-white-3); // 色彩-文字-占位说明
   --td-text-color-disabled: var(--td-font-white-4); // 色彩-文字-禁用
@@ -168,15 +152,9 @@ --td-text-color-anti: #fff; // 色彩-文字-反色
 
-  // 基础/下层 投影 hover 使用的组件包括：表格 /
-  --td-shadow-1:
-    0 4px 6px rgba(0, 0, 0, 6%), 0 1px 10px rgba(0, 0, 0, 8%),
-    0 2px 4px rgba(0, 0, 0, 12%);
-  // 中层投影 下拉 使用的组件包括：下拉菜单 / 气泡确认框 / 选择器 /
-  --td-shadow-2:
-    0 8px 10px rgba(0, 0, 0, 12%), 0 3px 14px rgba(0, 0, 0, 10%),
-    0 5px 5px rgba(0, 0, 0, 16%);
-  // 上层投影（警示/弹窗）使用的组件包括：全局提示 / 消息通知
-  --td-shadow-3:
-    0 16px 24px rgba(0, 0, 0, 14%), 0 6px 30px rgba(0, 0, 0, 12%),
-    0 8px 10px rgba(0, 0, 0, 20%);
-  // 内投影 用于弹窗类组件（气泡确认框 / 全局提示 / 消息通知）的内描边
+  // 基础/下层 投影 hover 使用的组件包括：表格
+  --td-shadow-1: 0 4px 6px rgba(0, 0, 0, 6%), 0 1px 10px rgba(0, 0, 0, 8%), 0 2px 4px rgba(0, 0, 0, 12%);
+  // 中层投影 下拉 使用的组件包括：下拉菜单 / 气泡确认 / 选择
+  --td-shadow-2: 0 8px 10px rgba(0, 0, 0, 12%), 0 3px 14px rgba(0, 0, 0, 10%), 0 5px 5px rgba(0, 0, 0, 16%);
+  // 上层投影（警告/弹窗）使用的组件包括：全局提示 / 消息通知
+  --td-shadow-3: 0 16px 24px rgba(0, 0, 0, 14%), 0 6px 30px rgba(0, 0, 0, 12%), 0 8px 10px rgba(0, 0, 0, 20%);
+  // 内投影用于弹窗类组件（气泡确认 / 全局提示 / 消息通知）的内描影
 
@@ -183,0 +161,0 @@ --td-shadow-inset-top: inset 0 0.5px 0 #5e5e5e;

styles/themes/_index.scss

@@ -1,5 +0,5 @@
-@import './_light.scss';
-@import './_dark.scss';
-@import './size.scss';
-@import './radius.scss';
-@import './_font.scss';
+@use './_light.scss' as *;
+@use './_dark.scss' as *;
+@use './size.scss' as *;
+@use './radius.scss' as *;
+@use './_font.scss' as *;

styles/themes/_light.scss

 :root,
-:root[theme-mode='light'] {
+:root[theme-mode="light"] {
   --td-brand-color-1: #f2f3ff;
@@ -74,11 +74,11 @@ --td-brand-color-2: #d9e1ff;
 
-  // 基础颜色的扩展 用于 hover / 聚焦 / 禁用 / 点击 等状态
-  --td-brand-color-hover: var(--td-brand-color-6); // hover态
+  // 基础颜色的扩充用于 hover / 聚焦 / 禁用 / 点击 等状态
+  --td-brand-color-hover: var(--td-brand-color-6); // hover
   --td-brand-color-focus: var(--td-brand-color-2); // focus态，包括鼠标和键盘
-  --td-brand-color-active: var(--td-brand-color-8); // 点击态
-  --td-brand-color-disabled: var(--td-brand-color-3); // 禁用态
-  --td-brand-color-light: var(--td-brand-color-1); // 浅色的选中态
+  --td-brand-color-active: var(--td-brand-color-8); // 点击
+  --td-brand-color-disabled: var(--td-brand-color-3); // 禁用
+  --td-brand-color-light: var(--td-brand-color-1); // 浅色的选中
   --td-brand-color-light-hover: var(--td-brand-color-2);
 
-  // 警告色扩展
+  // 警告色扩充
   --td-warning-color-hover: var(--td-warning-color-4);
@@ -91,3 +91,3 @@ --td-warning-color-focus: var(--td-warning-color-2);
 
-  // 失败/错误色扩展
+  // 失败/错误色扩充
   --td-error-color-hover: var(--td-error-color-5);
@@ -100,3 +100,3 @@ --td-error-color-focus: var(--td-error-color-2);
 
-  // 成功色扩展
+  // 成功色扩充
   --td-success-color-hover: var(--td-success-color-4);
@@ -114,34 +114,20 @@ --td-success-color-focus: var(--td-success-color-2);
 
-  // 背景色
+  // 背景颜色
   --td-bg-color-page: var(--td-gray-color-2); // 色彩 - page
   --td-bg-color-container: #fff; // 色彩 - 容器
   --td-bg-color-container-hover: var(--td-gray-color-1); // 色彩 - 容器 - hover
-  --td-bg-color-container-active: var(
-    --td-gray-color-3
-  ); // 色彩 - 容器 - active
+  --td-bg-color-container-active: var(--td-gray-color-3); // 色彩 - 容器 - active
   --td-bg-color-container-select: #fff; // 色彩 - 容器 - select
   --td-bg-color-secondarycontainer: var(--td-gray-color-1); // 色彩 - 次级容器
-  --td-bg-color-secondarycontainer-hover: var(
-    --td-gray-color-2
-  ); // 色彩 - 次级容器 - hover
-  --td-bg-color-secondarycontainer-active: var(
-    --td-gray-color-4
-  ); // 色彩 - 次级容器 - active
+  --td-bg-color-secondarycontainer-hover: var(--td-gray-color-2); // 色彩 - 次级容器 - hover
+  --td-bg-color-secondarycontainer-active: var(--td-gray-color-4); // 色彩 - 次级容器 - active
   --td-bg-color-component: var(--td-gray-color-3); // 色彩 - 组件
   --td-bg-color-component-hover: var(--td-gray-color-4); // 色彩 - 组件 - hover
-  --td-bg-color-component-active: var(
-    --td-gray-color-6
-  ); // 色彩 - 组件 - active
+  --td-bg-color-component-active: var(--td-gray-color-6); // 色彩 - 组件 - active
   --td-bg-color-secondarycomponent: var(--td-gray-color-4); // 色彩 - 次级组件
-  --td-bg-color-secondarycomponent-hover: var(
-    --td-gray-color-5
-  ); // 色彩 - 次级组件 - hover
-  --td-bg-color-secondarycomponent-active: var(
-    --td-gray-color-6
-  ); // 色彩 - 次级组件 - active
-  --td-bg-color-component-disabled: var(
-    --td-gray-color-2
-  ); // 色彩 - 组件 - disabled
+  --td-bg-color-secondarycomponent-hover: var(--td-gray-color-5); // 色彩 - 次级组件 - hover
+  --td-bg-color-secondarycomponent-active: var(--td-gray-color-6); // 色彩 - 次级组件 - active
+  --td-bg-color-component-disabled: var(--td-gray-color-2); // 色彩 - 组件 - disabled
 
-  // 特殊组件背景色，目前只用于 button、input 组件多主题场景，浅色主题下固定为白色，深色主题下为 transparent 适配背景颜色
+  // 特殊组件背景色，目前只用button、input 组件多主题场景，浅色主题下固定为白色，深色主题下transparent 适配背景颜色
   --td-bg-color-specialcomponent: #fff;
@@ -152,3 +138,3 @@
   --td-text-color-secondary: var(--td-font-gray-2); // 色彩-文字-次要
-  --td-text-color-placeholder: var(--td-font-gray-3); // 色彩-文字-占位符/说明
+  --td-text-color-placeholder: var(--td-font-gray-3); // 色彩-文字-占位说明
   --td-text-color-disabled: var(--td-font-gray-4); // 色彩-文字-禁用
@@ -167,16 +153,10 @@ --td-text-color-anti: #fff; // 色彩-文字-反色
 
-  // 基础/下层 投影 hover 使用的组件包括：表格 /
-  --td-shadow-1:
-    0 1px 10px rgba(0, 0, 0, 5%), 0 4px 5px rgba(0, 0, 0, 8%),
-    0 2px 4px -1px rgba(0, 0, 0, 12%);
-  // 中层投影 下拉 使用的组件包括：下拉菜单 / 气泡确认框 / 选择器 /
-  --td-shadow-2:
-    0 3px 14px 2px rgba(0, 0, 0, 5%), 0 8px 10px 1px rgba(0, 0, 0, 6%),
-    0 5px 5px -3px rgba(0, 0, 0, 10%);
-  // 上层投影（警示/弹窗）使用的组件包括：全局提示 / 消息通知
-  --td-shadow-3:
-    0 6px 30px 5px rgba(0, 0, 0, 5%), 0 16px 24px 2px rgba(0, 0, 0, 4%),
-    0 8px 10px -5px rgba(0, 0, 0, 8%);
+  // 基础/下层 投影 hover 使用的组件包括：表格
+  --td-shadow-1: 0 1px 10px rgba(0, 0, 0, 5%), 0 4px 5px rgba(0, 0, 0, 8%), 0 2px 4px -1px rgba(0, 0, 0, 12%);
+  // 中层投影 下拉 使用的组件包括：下拉菜单 / 气泡确认 / 选择
+  --td-shadow-2: 0 3px 14px 2px rgba(0, 0, 0, 5%), 0 8px 10px 1px rgba(0, 0, 0, 6%), 0 5px 5px -3px rgba(0, 0, 0, 10%);
+  // 上层投影（警告/弹窗）使用的组件包括：全局提示 / 消息通知
+  --td-shadow-3: 0 6px 30px 5px rgba(0, 0, 0, 5%), 0 16px 24px 2px rgba(0, 0, 0, 4%), 0 8px 10px -5px rgba(0, 0, 0, 8%);
 
-  // 内投影 用于弹窗类组件（气泡确认框 / 全局提示 / 消息通知）的内描边
+  // 内投影用于弹窗类组件（气泡确认 / 全局提示 / 消息通知）的内描影
   --td-shadow-inset-top: inset 0 0.5px 0 #dcdcdc;
@@ -183,0 +163,0 @@ --td-shadow-inset-right: inset 0.5px 0 0 #dcdcdc;

styles/themes/_size.scss

@@ -33,3 +33,3 @@ // size/margin/padding相关 token
 
-  //全局 popup 弹出层整体边距 token
+  //全局 popup 弹出层整体边距token
   --td-pop-padding-s: var(--td-size-2);
@@ -36,0 +36,0 @@ --td-pop-padding-m: var(--td-size-3);

styles/utilities/_animation.scss

@@ -1,2 +0,3 @@
-@import '../_vars.scss';
+@use "../_vars.scss" as *;
+@use "../_vars.scss" as *;
 
@@ -3,0 +4,0 @@ @keyframes t-fade-in {

styles/utilities/_tips.scss

@@ -1,2 +0,3 @@
-@import '../mixins/_text.scss';
+@use "../_vars.scss" as *;
+@use "../mixins/_text.scss" as *;
 .#{$prefix}-tips {
@@ -3,0 +4,0 @@ font-size: $font-size-s;

styles/components/popup/_var.scss

-// 颜色
-$popup-bg: $bg-color-container;
-$arrow-bg: $bg-color-container;
-$popup-text-color: $text-color-primary;
-
-// 间距
-$popup-padding: $comp-paddingTB-xs $comp-paddingLR-s;
-$popup-content-line-height: $text-line-height-base;
-$popup-arrow-width: 8px;
-$popup-arrow-height: 8px;
-$popup-content-arrow-spacer: $comp-margin-l;
-$popup-content-margin: $comp-margin-s;
-
-// 箭头位置偏移量
-$popup-arrow-position: $popup-arrow-width;
-$popup-content-font-size: $font-size-base;
-
-// 阴影
-$popup-shadow: $shadow-2-inset;
-$popup-top-arrow-shadow: $shadow-inset-left, $shadow-inset-bottom;
-$popup-left-arrow-shadow: $shadow-inset-left, $shadow-inset-top;
-$popup-bottom-arrow-shadow: $shadow-inset-top, $shadow-inset-right;
-$popup-right-arrow-shadow: $shadow-inset-right, $shadow-inset-bottom;
-
-// 动画
-$popup-flow: "#{prefix}-popup--animation";
-$popup-flow-duration: $anim-duration-base;
-$popup-flow-fn: $anim-time-fn-ease-in;
-$popup-flow-transition-enter: opacity $popup-flow-duration linear;
-$popup-flow-transition-leave: opacity $popup-flow-duration $anim-time-fn-ease-out,
-  visibility $popup-flow-duration $popup-flow-fn;

styles/components/radio/_var.scss

-// 组件变量
-// 名称可按如下规则定义：
-// <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
-
-$radio-cls: "#{$prefix}-radio";
-$radio-button--cls: "#{$prefix}-radio-button";
-
-// 颜色
-$radio-border-color: $border-level-2-color;
-
-$radio-input-color: $bg-color-container;
-$radio-input-color-disabled: $bg-color-component-disabled;
-
-$radio-dot-color: $brand-color;
-$radio-dot-color-disabled: $bg-color-component-disabled;
-$radio-dot-color-disabled-checked: $text-color-disabled;
-
-$radio-label-color: $text-color-primary;
-
-$radio-button-border-color-default: $border-level-2-color;
-$radio-button-border-color-hover: $brand-color-hover;
-$radio-button-color-outline-hover: $brand-color-hover;
-$radio-button-border-color-checked: $brand-color;
-$radio-button-color-outline-checked: $brand-color;
-$radio-button-background-color-disabled: $bg-color-component-disabled;
-$radio-button-color-disabled: $text-color-disabled;
-$radio-button-background-color-outline-disabled-checked: $bg-color-specialcomponent;
-$radio-button-color-disabled-checked: $text-color-disabled;
-
-$radio-button-group-background-color-filled: $bg-color-component;
-$radio-button-color-filled: $text-color-secondary;
-$radio-button-color-filled-hover: $text-color-primary;
-$radio-button-color-default-filled-checked: $text-color-primary;
-$radio-button-color-primary-filled-checked: $text-color-anti;
-$radio-button-color-default-filled-disabled-checked: $text-color-disabled;
-$radio-button-background-color-default-filled-checked: $bg-color-container-select;
-$radio-button-background-color-primary-filled-checked: $brand-color;
-$radio-button-background-color-default-filled-disabled-checked: $bg-color-component-disabled;
-$radio-button-background-color-primary-filled-disabled-checked: $brand-color-disabled;
-
-// 尺寸
-$radio-size: 16px;
-$radio-dot-size: ($radio-size / 2);
-$radio-margin-right: $comp-margin-xxl;
-$radio-button-border-radius: $border-radius-small;
-$radio-outline-height-small: $comp-size-xs;
-$radio-outline-height-medium: $comp-size-m;
-$radio-outline-height-large: $comp-size-xl;
-$radio-height-small: calc($comp-size-xs - ($comp-paddingTB-xxs * 2));
-$radio-height-medium: calc($comp-size-m - ($comp-paddingTB-xxs * 2));
-$radio-height-large: calc($comp-size-xl - ($comp-paddingTB-xxs * 2));
-$radio-button-before-width: 1px;
-
-// 字号
-$radio-font: $font-body-medium;
-$radio-button-font-small: $font-body-small;
-$radio-button-font-medium: $font-body-medium;
-$radio-button-font-large: $font-body-large;
-
-// padding
-$radio-input-label-spacer: $comp-margin-s;
-$radio-button-padding-small: 0px $comp-paddingLR-s;
-$radio-button-padding-medium: $comp-paddingTB-xs $comp-paddingLR-l;
-$radio-button-padding-large: $comp-paddingTB-s $comp-paddingLR-xl;
-$radio-button-before-left: 0px;
-$radio-button-before-top: 50%;
-$radio-button-border: 1px solid;
-
-$radio-group-padding: $comp-paddingTB-xxs $comp-paddingLR-xxs;
-$radio-group-filled-bg-block-left: 2px;
-$radio-group-filled-bg-block-top: 2px;
-
-// 动画&过渡
-$radio-group-transition: all $anim-duration-base $anim-time-fn-easing;
-$radio-button-before-transition: translateY(-50%);
-$radio-button-transition: color $anim-duration-base $anim-time-fn-ease-out;
-$radio-input-transition: border $anim-duration-base $anim-time-fn-ease-out;
-
-// 透明度
-$radio-opacity-transparent: 0; // 全透明
-
-// 边框
-$radio-input-border: 1px solid $radio-border-color;

No alert changes

Improved metrics

Total package byte prevSize

1029473

0.08%

No dependency changes