@sdata/web-vue 1.10.0 → 1.11.0

package/es/button/style/index.scss

@@ -2,306 +2,31 @@
 @use '@style/theme/index.scss' as global;
 @use 'sass:string';
 @use 'sass:map';
-@use '@style/theme/legacy-less-var.scss' as legacyLessVar;
+@use 'sass:meta';
+@use '@components/button/style/token.scss' as token;
 @use '@components/button/style/token.scss' as *;
 
 $btn-prefix-cls: string.unquote('#{theme.$prefix}-btn');
 
-$__less-vars: (
-  'btn-box-shadow-radius': $btn-box-shadow-radius,
-  'btn-color-box-shadow_danger': $btn-color-box-shadow_danger,
-  'btn-color-box-shadow_success': $btn-color-box-shadow_success,
-  'btn-color-box-shadow_warning': $btn-color-box-shadow_warning,
-  'btn-dashed-color-box-shadow': $btn-dashed-color-box-shadow,
-  'btn-dashed-color-bg': $btn-dashed-color-bg,
-  'btn-dashed-color-bg_active': $btn-dashed-color-bg_active,
-  'btn-dashed-color-bg_danger': $btn-dashed-color-bg_danger,
-  'btn-dashed-color-bg_danger_active': $btn-dashed-color-bg_danger_active,
-  'btn-dashed-color-bg_danger_disabled': $btn-dashed-color-bg_danger_disabled,
-  'btn-dashed-color-bg_danger_hover': $btn-dashed-color-bg_danger_hover,
-  'btn-dashed-color-bg_disabled': $btn-dashed-color-bg_disabled,
-  'btn-dashed-color-bg_hover': $btn-dashed-color-bg_hover,
-  'btn-dashed-color-bg_success': $btn-dashed-color-bg_success,
-  'btn-dashed-color-bg_success_active': $btn-dashed-color-bg_success_active,
-  'btn-dashed-color-bg_success_disabled': $btn-dashed-color-bg_success_disabled,
-  'btn-dashed-color-bg_success_hover': $btn-dashed-color-bg_success_hover,
-  'btn-dashed-color-bg_warning': $btn-dashed-color-bg_warning,
-  'btn-dashed-color-bg_warning_active': $btn-dashed-color-bg_warning_active,
-  'btn-dashed-color-bg_warning_disabled': $btn-dashed-color-bg_warning_disabled,
-  'btn-dashed-color-bg_warning_hover': $btn-dashed-color-bg_warning_hover,
-  'btn-dashed-color-border': $btn-dashed-color-border,
-  'btn-dashed-color-border_active': $btn-dashed-color-border_active,
-  'btn-dashed-color-border_danger': $btn-dashed-color-border_danger,
-  'btn-dashed-color-border_danger_active': $btn-dashed-color-border_danger_active,
-  'btn-dashed-color-border_danger_disabled': $btn-dashed-color-border_danger_disabled,
-  'btn-dashed-color-border_danger_hover': $btn-dashed-color-border_danger_hover,
-  'btn-dashed-color-border_disabled': $btn-dashed-color-border_disabled,
-  'btn-dashed-color-border_hover': $btn-dashed-color-border_hover,
-  'btn-dashed-color-border_success': $btn-dashed-color-border_success,
-  'btn-dashed-color-border_success_active': $btn-dashed-color-border_success_active,
-  'btn-dashed-color-border_success_disabled': $btn-dashed-color-border_success_disabled,
-  'btn-dashed-color-border_success_hover': $btn-dashed-color-border_success_hover,
-  'btn-dashed-color-border_warning': $btn-dashed-color-border_warning,
-  'btn-dashed-color-border_warning_active': $btn-dashed-color-border_warning_active,
-  'btn-dashed-color-border_warning_disabled': $btn-dashed-color-border_warning_disabled,
-  'btn-dashed-color-border_warning_hover': $btn-dashed-color-border_warning_hover,
-  'btn-dashed-color-text': $btn-dashed-color-text,
-  'btn-dashed-color-text_active': $btn-dashed-color-text_active,
-  'btn-dashed-color-text_danger': $btn-dashed-color-text_danger,
-  'btn-dashed-color-text_danger_active': $btn-dashed-color-text_danger_active,
-  'btn-dashed-color-text_danger_disabled': $btn-dashed-color-text_danger_disabled,
-  'btn-dashed-color-text_danger_hover': $btn-dashed-color-text_danger_hover,
-  'btn-dashed-color-text_disabled': $btn-dashed-color-text_disabled,
-  'btn-dashed-color-text_hover': $btn-dashed-color-text_hover,
-  'btn-dashed-color-text_success': $btn-dashed-color-text_success,
-  'btn-dashed-color-text_success_active': $btn-dashed-color-text_success_active,
-  'btn-dashed-color-text_success_disabled': $btn-dashed-color-text_success_disabled,
-  'btn-dashed-color-text_success_hover': $btn-dashed-color-text_success_hover,
-  'btn-dashed-color-text_warning': $btn-dashed-color-text_warning,
-  'btn-dashed-color-text_warning_active': $btn-dashed-color-text_warning_active,
-  'btn-dashed-color-text_warning_disabled': $btn-dashed-color-text_warning_disabled,
-  'btn-dashed-color-text_warning_hover': $btn-dashed-color-text_warning_hover,
-  'btn-dashed-border-style': $btn-dashed-border-style,
-  'btn-font-weight': $btn-font-weight,
-  'btn-outline-color-bg': $btn-outline-color-bg,
-  'btn-outline-color-box-shadow': $btn-outline-color-box-shadow,
-  'btn-outline-color-bg_active': $btn-outline-color-bg_active,
-  'btn-outline-color-bg_danger': $btn-outline-color-bg_danger,
-  'btn-outline-color-bg_danger_active': $btn-outline-color-bg_danger_active,
-  'btn-outline-color-bg_danger_disabled': $btn-outline-color-bg_danger_disabled,
-  'btn-outline-color-bg_danger_hover': $btn-outline-color-bg_danger_hover,
-  'btn-outline-color-bg_disabled': $btn-outline-color-bg_disabled,
-  'btn-outline-color-bg_hover': $btn-outline-color-bg_hover,
-  'btn-outline-color-bg_success': $btn-outline-color-bg_success,
-  'btn-outline-color-bg_success_active': $btn-outline-color-bg_success_active,
-  'btn-outline-color-bg_success_disabled': $btn-outline-color-bg_success_disabled,
-  'btn-outline-color-bg_success_hover': $btn-outline-color-bg_success_hover,
-  'btn-outline-color-bg_warning': $btn-outline-color-bg_warning,
-  'btn-outline-color-bg_warning_active': $btn-outline-color-bg_warning_active,
-  'btn-outline-color-bg_warning_disabled': $btn-outline-color-bg_warning_disabled,
-  'btn-outline-color-bg_warning_hover': $btn-outline-color-bg_warning_hover,
-  'btn-outline-color-border': $btn-outline-color-border,
-  'btn-outline-color-border_active': $btn-outline-color-border_active,
-  'btn-outline-color-border_danger': $btn-outline-color-border_danger,
-  'btn-outline-color-border_danger_active': $btn-outline-color-border_danger_active,
-  'btn-outline-color-border_danger_disabled': $btn-outline-color-border_danger_disabled,
-  'btn-outline-color-border_danger_hover': $btn-outline-color-border_danger_hover,
-  'btn-outline-color-border_disabled': $btn-outline-color-border_disabled,
-  'btn-outline-color-border_hover': $btn-outline-color-border_hover,
-  'btn-outline-color-border_success': $btn-outline-color-border_success,
-  'btn-outline-color-border_success_active': $btn-outline-color-border_success_active,
-  'btn-outline-color-border_success_disabled': $btn-outline-color-border_success_disabled,
-  'btn-outline-color-border_success_hover': $btn-outline-color-border_success_hover,
-  'btn-outline-color-border_warning': $btn-outline-color-border_warning,
-  'btn-outline-color-border_warning_active': $btn-outline-color-border_warning_active,
-  'btn-outline-color-border_warning_disabled': $btn-outline-color-border_warning_disabled,
-  'btn-outline-color-border_warning_hover': $btn-outline-color-border_warning_hover,
-  'btn-outline-color-text': $btn-outline-color-text,
-  'btn-outline-color-text_active': $btn-outline-color-text_active,
-  'btn-outline-color-text_danger': $btn-outline-color-text_danger,
-  'btn-outline-color-text_danger_active': $btn-outline-color-text_danger_active,
-  'btn-outline-color-text_danger_disabled': $btn-outline-color-text_danger_disabled,
-  'btn-outline-color-text_danger_hover': $btn-outline-color-text_danger_hover,
-  'btn-outline-color-text_disabled': $btn-outline-color-text_disabled,
-  'btn-outline-color-text_hover': $btn-outline-color-text_hover,
-  'btn-outline-color-text_success': $btn-outline-color-text_success,
-  'btn-outline-color-text_success_active': $btn-outline-color-text_success_active,
-  'btn-outline-color-text_success_disabled': $btn-outline-color-text_success_disabled,
-  'btn-outline-color-text_success_hover': $btn-outline-color-text_success_hover,
-  'btn-outline-color-text_warning': $btn-outline-color-text_warning,
-  'btn-outline-color-text_warning_active': $btn-outline-color-text_warning_active,
-  'btn-outline-color-text_warning_disabled': $btn-outline-color-text_warning_disabled,
-  'btn-outline-color-text_warning_hover': $btn-outline-color-text_warning_hover,
-  'btn-outline-border-style': $btn-outline-border-style,
-  'btn-primary-color-bg': $btn-primary-color-bg,
-  'btn-primary-color-box-shadow': $btn-primary-color-box-shadow,
-  'btn-primary-color-bg_active': $btn-primary-color-bg_active,
-  'btn-primary-color-bg_danger': $btn-primary-color-bg_danger,
-  'btn-primary-color-bg_danger_active': $btn-primary-color-bg_danger_active,
-  'btn-primary-color-bg_danger_disabled': $btn-primary-color-bg_danger_disabled,
-  'btn-primary-color-bg_danger_hover': $btn-primary-color-bg_danger_hover,
-  'btn-primary-color-bg_disabled': $btn-primary-color-bg_disabled,
-  'btn-primary-color-bg_hover': $btn-primary-color-bg_hover,
-  'btn-primary-color-bg_success': $btn-primary-color-bg_success,
-  'btn-primary-color-bg_success_active': $btn-primary-color-bg_success_active,
-  'btn-primary-color-bg_success_disabled': $btn-primary-color-bg_success_disabled,
-  'btn-primary-color-bg_success_hover': $btn-primary-color-bg_success_hover,
-  'btn-primary-color-bg_warning': $btn-primary-color-bg_warning,
-  'btn-primary-color-bg_warning_active': $btn-primary-color-bg_warning_active,
-  'btn-primary-color-bg_warning_disabled': $btn-primary-color-bg_warning_disabled,
-  'btn-primary-color-bg_warning_hover': $btn-primary-color-bg_warning_hover,
-  'btn-primary-color-border': $btn-primary-color-border,
-  'btn-primary-color-border_active': $btn-primary-color-border_active,
-  'btn-primary-color-border_danger': $btn-primary-color-border_danger,
-  'btn-primary-color-border_danger_active': $btn-primary-color-border_danger_active,
-  'btn-primary-color-border_danger_disabled': $btn-primary-color-border_danger_disabled,
-  'btn-primary-color-border_danger_hover': $btn-primary-color-border_danger_hover,
-  'btn-primary-color-border_disabled': $btn-primary-color-border_disabled,
-  'btn-primary-color-border_hover': $btn-primary-color-border_hover,
-  'btn-primary-color-border_success': $btn-primary-color-border_success,
-  'btn-primary-color-border_success_active': $btn-primary-color-border_success_active,
-  'btn-primary-color-border_success_disabled': $btn-primary-color-border_success_disabled,
-  'btn-primary-color-border_success_hover': $btn-primary-color-border_success_hover,
-  'btn-primary-color-border_warning': $btn-primary-color-border_warning,
-  'btn-primary-color-border_warning_active': $btn-primary-color-border_warning_active,
-  'btn-primary-color-border_warning_disabled': $btn-primary-color-border_warning_disabled,
-  'btn-primary-color-border_warning_hover': $btn-primary-color-border_warning_hover,
-  'btn-primary-color-text': $btn-primary-color-text,
-  'btn-primary-color-text_active': $btn-primary-color-text_active,
-  'btn-primary-color-text_danger': $btn-primary-color-text_danger,
-  'btn-primary-color-text_danger_active': $btn-primary-color-text_danger_active,
-  'btn-primary-color-text_danger_disabled': $btn-primary-color-text_danger_disabled,
-  'btn-primary-color-text_danger_hover': $btn-primary-color-text_danger_hover,
-  'btn-primary-color-text_disabled': $btn-primary-color-text_disabled,
-  'btn-primary-color-text_hover': $btn-primary-color-text_hover,
-  'btn-primary-color-text_success': $btn-primary-color-text_success,
-  'btn-primary-color-text_success_active': $btn-primary-color-text_success_active,
-  'btn-primary-color-text_success_disabled': $btn-primary-color-text_success_disabled,
-  'btn-primary-color-text_success_hover': $btn-primary-color-text_success_hover,
-  'btn-primary-color-text_warning': $btn-primary-color-text_warning,
-  'btn-primary-color-text_warning_active': $btn-primary-color-text_warning_active,
-  'btn-primary-color-text_warning_disabled': $btn-primary-color-text_warning_disabled,
-  'btn-primary-color-text_warning_hover': $btn-primary-color-text_warning_hover,
-  'btn-primary-border-style': $btn-primary-border-style,
-  'btn-secondary-color-bg': $btn-secondary-color-bg,
-  'btn-secondary-color-box-shadow': $btn-secondary-color-box-shadow,
-  'btn-secondary-color-bg_active': $btn-secondary-color-bg_active,
-  'btn-secondary-color-bg_danger': $btn-secondary-color-bg_danger,
-  'btn-secondary-color-bg_danger_active': $btn-secondary-color-bg_danger_active,
-  'btn-secondary-color-bg_danger_disabled': $btn-secondary-color-bg_danger_disabled,
-  'btn-secondary-color-bg_danger_hover': $btn-secondary-color-bg_danger_hover,
-  'btn-secondary-color-bg_disabled': $btn-secondary-color-bg_disabled,
-  'btn-secondary-color-bg_hover': $btn-secondary-color-bg_hover,
-  'btn-secondary-color-bg_success': $btn-secondary-color-bg_success,
-  'btn-secondary-color-bg_success_active': $btn-secondary-color-bg_success_active,
-  'btn-secondary-color-bg_success_disabled': $btn-secondary-color-bg_success_disabled,
-  'btn-secondary-color-bg_success_hover': $btn-secondary-color-bg_success_hover,
-  'btn-secondary-color-bg_warning': $btn-secondary-color-bg_warning,
-  'btn-secondary-color-bg_warning_active': $btn-secondary-color-bg_warning_active,
-  'btn-secondary-color-bg_warning_disabled': $btn-secondary-color-bg_warning_disabled,
-  'btn-secondary-color-bg_warning_hover': $btn-secondary-color-bg_warning_hover,
-  'btn-secondary-color-border': $btn-secondary-color-border,
-  'btn-secondary-color-border_active': $btn-secondary-color-border_active,
-  'btn-secondary-color-border_danger': $btn-secondary-color-border_danger,
-  'btn-secondary-color-border_danger_active': $btn-secondary-color-border_danger_active,
-  'btn-secondary-color-border_danger_disabled': $btn-secondary-color-border_danger_disabled,
-  'btn-secondary-color-border_danger_hover': $btn-secondary-color-border_danger_hover,
-  'btn-secondary-color-border_disabled': $btn-secondary-color-border_disabled,
-  'btn-secondary-color-border_hover': $btn-secondary-color-border_hover,
-  'btn-secondary-color-border_success': $btn-secondary-color-border_success,
-  'btn-secondary-color-border_success_active': $btn-secondary-color-border_success_active,
-  'btn-secondary-color-border_success_disabled': $btn-secondary-color-border_success_disabled,
-  'btn-secondary-color-border_success_hover': $btn-secondary-color-border_success_hover,
-  'btn-secondary-color-border_warning': $btn-secondary-color-border_warning,
-  'btn-secondary-color-border_warning_active': $btn-secondary-color-border_warning_active,
-  'btn-secondary-color-border_warning_disabled': $btn-secondary-color-border_warning_disabled,
-  'btn-secondary-color-border_warning_hover': $btn-secondary-color-border_warning_hover,
-  'btn-secondary-color-text': $btn-secondary-color-text,
-  'btn-secondary-color-text_active': $btn-secondary-color-text_active,
-  'btn-secondary-color-text_danger': $btn-secondary-color-text_danger,
-  'btn-secondary-color-text_danger_active': $btn-secondary-color-text_danger_active,
-  'btn-secondary-color-text_danger_disabled': $btn-secondary-color-text_danger_disabled,
-  'btn-secondary-color-text_danger_hover': $btn-secondary-color-text_danger_hover,
-  'btn-secondary-color-text_disabled': $btn-secondary-color-text_disabled,
-  'btn-secondary-color-text_hover': $btn-secondary-color-text_hover,
-  'btn-secondary-color-text_success': $btn-secondary-color-text_success,
-  'btn-secondary-color-text_success_active': $btn-secondary-color-text_success_active,
-  'btn-secondary-color-text_success_disabled': $btn-secondary-color-text_success_disabled,
-  'btn-secondary-color-text_success_hover': $btn-secondary-color-text_success_hover,
-  'btn-secondary-color-text_warning': $btn-secondary-color-text_warning,
-  'btn-secondary-color-text_warning_active': $btn-secondary-color-text_warning_active,
-  'btn-secondary-color-text_warning_disabled': $btn-secondary-color-text_warning_disabled,
-  'btn-secondary-color-text_warning_hover': $btn-secondary-color-text_warning_hover,
-  'btn-secondary-border-style': $btn-secondary-border-style,
-  'btn-size-mini-height': $btn-size-mini-height,
-  'btn-size-mini-padding-horizontal': $btn-size-mini-padding-horizontal,
-  'btn-size-mini-font-size': $btn-size-mini-font-size,
-  'btn-size-mini-icon-spacing': $btn-size-mini-icon-spacing,
-  'btn-size-mini-radius': $btn-size-mini-radius,
-  'btn-size-mini-icon-vertical-align': $btn-size-mini-icon-vertical-align,
-  'btn-size-small-height': $btn-size-small-height,
-  'btn-size-small-padding-horizontal': $btn-size-small-padding-horizontal,
-  'btn-size-small-font-size': $btn-size-small-font-size,
-  'btn-size-small-icon-spacing': $btn-size-small-icon-spacing,
-  'btn-size-small-radius': $btn-size-small-radius,
-  'btn-size-small-icon-vertical-align': $btn-size-small-icon-vertical-align,
-  'btn-size-medium-height': $btn-size-medium-height,
-  'btn-size-medium-padding-horizontal': $btn-size-medium-padding-horizontal,
-  'btn-size-medium-font-size': $btn-size-medium-font-size,
-  'btn-size-medium-icon-spacing': $btn-size-medium-icon-spacing,
-  'btn-size-medium-radius': $btn-size-medium-radius,
-  'btn-size-medium-icon-vertical-align': $btn-size-medium-icon-vertical-align,
-  'btn-size-large-height': $btn-size-large-height,
-  'btn-size-large-padding-horizontal': $btn-size-large-padding-horizontal,
-  'btn-size-large-font-size': $btn-size-large-font-size,
-  'btn-size-large-icon-spacing': $btn-size-large-icon-spacing,
-  'btn-size-large-radius': $btn-size-large-radius,
-  'btn-size-large-icon-vertical-align': $btn-size-large-icon-vertical-align,
-  'btn-size-default-border-width': $btn-size-default-border-width,
-  'btn-text-color-bg': $btn-text-color-bg,
-  'btn-text-color-box-shadow': $btn-text-color-box-shadow,
-  'btn-text-color-bg_active': $btn-text-color-bg_active,
-  'btn-text-color-bg_danger': $btn-text-color-bg_danger,
-  'btn-text-color-bg_danger_active': $btn-text-color-bg_danger_active,
-  'btn-text-color-bg_danger_disabled': $btn-text-color-bg_danger_disabled,
-  'btn-text-color-bg_danger_hover': $btn-text-color-bg_danger_hover,
-  'btn-text-color-bg_disabled': $btn-text-color-bg_disabled,
-  'btn-text-color-bg_hover': $btn-text-color-bg_hover,
-  'btn-text-color-bg_success': $btn-text-color-bg_success,
-  'btn-text-color-bg_success_active': $btn-text-color-bg_success_active,
-  'btn-text-color-bg_success_disabled': $btn-text-color-bg_success_disabled,
-  'btn-text-color-bg_success_hover': $btn-text-color-bg_success_hover,
-  'btn-text-color-bg_warning': $btn-text-color-bg_warning,
-  'btn-text-color-bg_warning_active': $btn-text-color-bg_warning_active,
-  'btn-text-color-bg_warning_disabled': $btn-text-color-bg_warning_disabled,
-  'btn-text-color-bg_warning_hover': $btn-text-color-bg_warning_hover,
-  'btn-text-color-border': $btn-text-color-border,
-  'btn-text-color-border_active': $btn-text-color-border_active,
-  'btn-text-color-border_danger': $btn-text-color-border_danger,
-  'btn-text-color-border_danger_active': $btn-text-color-border_danger_active,
-  'btn-text-color-border_danger_disabled': $btn-text-color-border_danger_disabled,
-  'btn-text-color-border_danger_hover': $btn-text-color-border_danger_hover,
-  'btn-text-color-border_disabled': $btn-text-color-border_disabled,
-  'btn-text-color-border_hover': $btn-text-color-border_hover,
-  'btn-text-color-border_success': $btn-text-color-border_success,
-  'btn-text-color-border_success_active': $btn-text-color-border_success_active,
-  'btn-text-color-border_success_disabled': $btn-text-color-border_success_disabled,
-  'btn-text-color-border_success_hover': $btn-text-color-border_success_hover,
-  'btn-text-color-border_warning': $btn-text-color-border_warning,
-  'btn-text-color-border_warning_active': $btn-text-color-border_warning_active,
-  'btn-text-color-border_warning_disabled': $btn-text-color-border_warning_disabled,
-  'btn-text-color-border_warning_hover': $btn-text-color-border_warning_hover,
-  'btn-text-color-text': $btn-text-color-text,
-  'btn-text-color-text_active': $btn-text-color-text_active,
-  'btn-text-color-text_danger': $btn-text-color-text_danger,
-  'btn-text-color-text_danger_active': $btn-text-color-text_danger_active,
-  'btn-text-color-text_danger_disabled': $btn-text-color-text_danger_disabled,
-  'btn-text-color-text_danger_hover': $btn-text-color-text_danger_hover,
-  'btn-text-color-text_disabled': $btn-text-color-text_disabled,
-  'btn-text-color-text_hover': $btn-text-color-text_hover,
-  'btn-text-color-text_success': $btn-text-color-text_success,
-  'btn-text-color-text_success_active': $btn-text-color-text_success_active,
-  'btn-text-color-text_success_disabled': $btn-text-color-text_success_disabled,
-  'btn-text-color-text_success_hover': $btn-text-color-text_success_hover,
-  'btn-text-color-text_warning': $btn-text-color-text_warning,
-  'btn-text-color-text_warning_active': $btn-text-color-text_warning_active,
-  'btn-text-color-text_warning_disabled': $btn-text-color-text_warning_disabled,
-  'btn-text-color-text_warning_hover': $btn-text-color-text_warning_hover,
-  'btn-text-border-style': $btn-text-border-style,
-  'line-height-base': theme.$line-height-base,
-  'prefix': theme.$prefix,
-  'radius-circle': global.$radius-circle,
+$token-var-aliases: (
   'size-mini': $btn-size-mini-height,
   'size-small': $btn-size-small-height,
   'size-medium': $btn-size-medium-height,
   'size-large': $btn-size-large-height,
-  'sd-cssvars-prefix': theme.$sd-cssvars-prefix,
-  'transition-duration-1': theme.$transition-duration-1,
-  'transition-timing-function-linear': theme.$transition-timing-function-linear,
 );
 
-@function less-var($name, $fallback: null) {
-  @return legacyLessVar.get($__less-vars, $name, $fallback);
+@function token-var($name, $fallback: null) {
+  $value: map.get($token-var-aliases, $name);
+
+  @if $value == null {
+    $value: map.get(meta.module-variables('token'), $name);
+  }
+
+  @if $value == null {
+    @return $fallback;
+  }
+
+  @return $value;
 }
 
 .#{$btn-prefix-cls} {
@@ -388,10 +113,10 @@ $__less-vars: (
 }
 
 @mixin btn-type-normal($type) {
-  color: less-var('btn-#{$type}-color-text');
-  background-color: less-var('btn-#{$type}-color-bg');
-  border: $btn-size-default-border-width less-var('btn-#{$type}-border-style')
-    less-var('btn-#{$type}-color-border');
+  color: token-var('btn-#{$type}-color-text');
+  background-color: token-var('btn-#{$type}-color-bg');
+  border: $btn-size-default-border-width token-var('btn-#{$type}-border-style')
+    token-var('btn-#{$type}-color-border');
 }
 
 @mixin btn-type($type) {
@@ -401,19 +126,19 @@ $__less-vars: (
     @include btn-type-normal($type);
 
     &:hover {
-      color: less-var('btn-#{$type}-color-text_hover');
-      background-color: less-var('btn-#{$type}-color-bg_hover');
-      border-color: less-var('btn-#{$type}-color-border_hover');
+      color: token-var('btn-#{$type}-color-text_hover');
+      background-color: token-var('btn-#{$type}-color-bg_hover');
+      border-color: token-var('btn-#{$type}-color-border_hover');
     }
 
     &:focus-visible {
-      box-shadow: 0 0 0 $btn-box-shadow-radius less-var('btn-#{$type}-color-box-shadow');
+      box-shadow: 0 0 0 $btn-box-shadow-radius token-var('btn-#{$type}-color-box-shadow');
     }
 
     &:active {
-      color: less-var('btn-#{$type}-color-text_active');
-      background-color: less-var('btn-#{$type}-color-bg_active');
-      border-color: less-var('btn-#{$type}-color-border_active');
+      color: token-var('btn-#{$type}-color-text_active');
+      background-color: token-var('btn-#{$type}-color-bg_active');
+      border-color: token-var('btn-#{$type}-color-border_active');
     }
 
     &.#{$btn-prefix-cls}-loading {
@@ -421,19 +146,19 @@ $__less-vars: (
     }
 
     &.#{$btn-prefix-cls}-disabled {
-      color: less-var('btn-#{$type}-color-text_disabled');
-      background-color: less-var('btn-#{$type}-color-bg_disabled');
-      border: $btn-size-default-border-width less-var('btn-#{$type}-border-style')
-        less-var('btn-#{$type}-color-border_disabled');
+      color: token-var('btn-#{$type}-color-text_disabled');
+      background-color: token-var('btn-#{$type}-color-bg_disabled');
+      border: $btn-size-default-border-width token-var('btn-#{$type}-border-style')
+        token-var('btn-#{$type}-color-border_disabled');
       cursor: not-allowed;
     }
   }
 }
 
 @mixin btn-status-normal($type, $status) {
-  color: less-var('btn-#{$type}-color-text_#{$status}');
-  background-color: less-var('btn-#{$type}-color-bg_#{$status}');
-  border-color: less-var('btn-#{$type}-color-border_#{$status}');
+  color: token-var('btn-#{$type}-color-text_#{$status}');
+  background-color: token-var('btn-#{$type}-color-bg_#{$status}');
+  border-color: token-var('btn-#{$type}-color-border_#{$status}');
 }
 
 @mixin btn-status($type, $status) {
@@ -441,19 +166,19 @@ $__less-vars: (
     @include btn-status-normal($type, $status);
 
     &:hover {
-      color: less-var('btn-#{$type}-color-text_#{$status}_hover');
-      background-color: less-var('btn-#{$type}-color-bg_#{$status}_hover');
-      border-color: less-var('btn-#{$type}-color-border_#{$status}_hover');
+      color: token-var('btn-#{$type}-color-text_#{$status}_hover');
+      background-color: token-var('btn-#{$type}-color-bg_#{$status}_hover');
+      border-color: token-var('btn-#{$type}-color-border_#{$status}_hover');
     }
 
     &:focus-visible {
-      box-shadow: 0 0 0 $btn-box-shadow-radius less-var('btn-color-box-shadow_#{$status}');
+      box-shadow: 0 0 0 $btn-box-shadow-radius token-var('btn-color-box-shadow_#{$status}');
     }
 
     &:active {
-      color: less-var('btn-#{$type}-color-text_#{$status}_active');
-      background-color: less-var('btn-#{$type}-color-bg_#{$status}_active');
-      border-color: less-var('btn-#{$type}-color-border_#{$status}_active');
+      color: token-var('btn-#{$type}-color-text_#{$status}_active');
+      background-color: token-var('btn-#{$type}-color-bg_#{$status}_active');
+      border-color: token-var('btn-#{$type}-color-border_#{$status}_active');
     }
 
     &.#{$btn-prefix-cls}-loading {
@@ -461,10 +186,10 @@ $__less-vars: (
     }
 
     &.#{$btn-prefix-cls}-disabled {
-      color: less-var('btn-#{$type}-color-text_#{$status}_disabled');
-      background-color: less-var('btn-#{$type}-color-bg_#{$status}_disabled');
-      border: $btn-size-default-border-width less-var('btn-#{$type}-border-style')
-        less-var('btn-#{$type}-color-border_#{$status}_disabled');
+      color: token-var('btn-#{$type}-color-text_#{$status}_disabled');
+      background-color: token-var('btn-#{$type}-color-bg_#{$status}_disabled');
+      border: $btn-size-default-border-width token-var('btn-#{$type}-border-style')
+        token-var('btn-#{$type}-color-border_#{$status}_disabled');
     }
   }
 }
@@ -477,41 +202,41 @@ $__less-vars: (
   $bss: string.unquote('btn-#{$size-type}-icon-spacing');
 
   .#{$btn-prefix-cls}-#{$size-type} {
-    height: less-var($size-height);
-    padding: 0 less-var($bsp);
-    font-size: less-var($bsf);
-    border-radius: less-var('btn-#{$size-type}-radius');
+    height: token-var($size-height);
+    padding: 0 token-var($bsp);
+    font-size: token-var($bsf);
+    border-radius: token-var('btn-#{$size-type}-radius');
 
     &:not(.#{$btn-prefix-cls}-only-icon) .#{$btn-prefix-cls}-icon {
-      margin-right: less-var('btn-#{$size-type}-icon-spacing');
+      margin-right: token-var('btn-#{$size-type}-icon-spacing');
     }
 
     svg {
-      vertical-align: less-var('btn-#{$size-type}-icon-vertical-align');
+      vertical-align: token-var('btn-#{$size-type}-icon-vertical-align');
     }
   }
 
   .#{$btn-prefix-cls}-#{$size-type}.#{$btn-prefix-cls}-loading-fixed-width.#{$btn-prefix-cls}-loading {
-    padding-right: less-var($bsp) - ((less-var($bsf) + less-var($bss)) * 0.5);
-    padding-left: less-var($bsp) - ((less-var($bsf) + less-var($bss)) * 0.5);
+    padding-right: token-var($bsp) - ((token-var($bsf) + token-var($bss)) * 0.5);
+    padding-left: token-var($bsp) - ((token-var($bsf) + token-var($bss)) * 0.5);
   }
 
   .#{$btn-prefix-cls}-#{$size-type}.#{$btn-prefix-cls}-only-icon {
-    width: less-var($size-type);
-    height: less-var($size-type);
+    width: token-var($size-type);
+    height: token-var($size-type);
     padding: 0;
   }
 
   .#{$btn-prefix-cls}-#{$size-type}.#{$btn-prefix-cls}-shape-circle {
-    width: less-var($size-type);
-    height: less-var($size-type);
+    width: token-var($size-type);
+    height: token-var($size-type);
     padding: 0;
     text-align: center;
     border-radius: global.$radius-circle;
   }
 
   .#{$btn-prefix-cls}-#{$size-type}.#{$btn-prefix-cls}-shape-round {
-    border-radius: calc(less-var($size-type) * 0.5);
+    border-radius: calc(token-var($size-type) * 0.5);
   }
 }
 

package/es/card/style/index.scss

@@ -2,55 +2,21 @@
 @use '@style/theme/index.scss' as global;
 @use 'sass:string';
 @use 'sass:map';
-@use '@style/theme/legacy-less-var.scss' as legacyLessVar;
+@use 'sass:meta';
 @use '@style/mixins/index.scss' as *;
+@use '@components/card/style/token.scss' as token;
 @use '@components/card/style/token.scss' as *;
 
 $card-prefix-cls: string.unquote('#{theme.$prefix}-card');
 
-$__less-vars: (
-  'card-border-radius': $card-border-radius,
-  'card-border-radius-no-border': $card-border-radius-no-border,
-  'card-border-width': $card-border-width,
-  'card-border-width-title-bottom': $card-border-width-title-bottom,
-  'card-color-action': $card-color-action,
-  'card-color-action_hover': $card-color-action_hover,
-  'card-color-bg': $card-color-bg,
-  'card-color-body': $card-color-body,
-  'card-color-border': $card-color-border,
-  'card-color-box-shadow': $card-color-box-shadow,
-  'card-color-box-shadow_dark': $card-color-box-shadow_dark,
-  'card-color-title': $card-color-title,
-  'card-color-title-extra': $card-color-title-extra,
-  'card-size-small-font-size': $card-size-small-font-size,
-  'card-size-small-height-title': $card-size-small-height-title,
-  'card-size-small-padding-vertical-title': $card-size-small-padding-vertical-title,
-  'card-size-small-padding-horizontal-title': $card-size-small-padding-horizontal-title,
-  'card-size-small-font-size-title': $card-size-small-font-size-title,
-  'card-size-small-font-size-title-extra': $card-size-small-font-size-title-extra,
-  'card-size-small-padding-vertical-body': $card-size-small-padding-vertical-body,
-  'card-size-small-padding-horizontal-body': $card-size-small-padding-horizontal-body,
-  'card-size-default-font-size': $card-size-default-font-size,
-  'card-size-default-height-title': $card-size-default-height-title,
-  'card-size-default-padding-vertical-title': $card-size-default-padding-vertical-title,
-  'card-size-default-padding-horizontal-title': $card-size-default-padding-horizontal-title,
-  'card-size-default-font-size-title': $card-size-default-font-size-title,
-  'card-size-default-font-size-title-extra': $card-size-default-font-size-title-extra,
-  'card-size-default-padding-vertical-body': $card-size-default-padding-vertical-body,
-  'card-size-default-padding-horizontal-body': $card-size-default-padding-horizontal-body,
-  'card-font-weight-title': $card-font-weight-title,
-  'card-margin-right-action-item': $card-margin-right-action-item,
-  'card-margin-top-meta-description': $card-margin-top-meta-description,
-  'card-margin-top-meta-footer': $card-margin-top-meta-footer,
-  'line-height-base': theme.$line-height-base,
-  'prefix': theme.$prefix,
-  'sd-theme-tag': global.$sd-theme-tag,
-  'transition-duration-2': theme.$transition-duration-2,
-  'transition-timing-function-linear': theme.$transition-timing-function-linear,
-);
-
-@function less-var($name, $fallback: null) {
-  @return legacyLessVar.get($__less-vars, $name, $fallback);
+@function token-var($name, $fallback: null) {
+  $value: map.get(meta.module-variables('token'), $name);
+
+  @if $value == null {
+    @return $fallback;
+  }
+
+  @return $value;
 }
 
 .#{$card-prefix-cls} {
@@ -233,26 +199,26 @@ $__less-vars: (
   // 不同尺寸
   @mixin size($name, $size) {
     &-size-#{$name} {
-      font-size: less-var('card-size-#{$size}-font-size');
+      font-size: token-var('card-size-#{$size}-font-size');
 
       .#{$card-prefix-cls}-header {
-        height: less-var('card-size-#{$size}-height-title');
-        padding: less-var('card-size-#{$size}-padding-vertical-title')
-          less-var('card-size-#{$size}-padding-horizontal-title');
+        height: token-var('card-size-#{$size}-height-title');
+        padding: token-var('card-size-#{$size}-padding-vertical-title')
+          token-var('card-size-#{$size}-padding-horizontal-title');
       }
 
       .#{$card-prefix-cls}-header-title,
       .#{$card-prefix-cls}-meta-title {
-        font-size: less-var('card-size-#{$size}-font-size-title');
+        font-size: token-var('card-size-#{$size}-font-size-title');
       }
 
       .#{$card-prefix-cls}-header-extra {
-        font-size: less-var('card-size-#{$size}-font-size-title-extra');
+        font-size: token-var('card-size-#{$size}-font-size-title-extra');
       }
 
       .#{$card-prefix-cls}-body {
-        padding: less-var('card-size-#{$size}-padding-vertical-body')
-          less-var('card-size-#{$size}-padding-horizontal-body');
+        padding: token-var('card-size-#{$size}-padding-vertical-body')
+          token-var('card-size-#{$size}-padding-horizontal-body');
       }
     }
   }

package/es/carousel/index.d.ts

@@ -2,6 +2,7 @@ import type { App } from 'vue';
 import type { SDOptions } from '../_utils/types';
 import _Carousel from './carousel';
 import _CarouselItem from './carousel-item.vue';
+export type { CarouselArrowType, CarouselAutoPlayConfig, CarouselIndicatorPosition, CarouselIndicatorType, CarouselTriggerEvent, } from './interface';
 declare const Carousel: {
     new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
         current: {

package/es/cascader/cascader-panel.vue.d.ts

@@ -255,8 +255,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
 }>, {
     defaultValue: CascaderModelValue;
     options: CascaderOption[];
-    valueKey: string;
     multiple: boolean;
+    valueKey: string;
     expandTrigger: string;
     checkStrictly: boolean;
     pathMode: boolean;

package/es/cascader/cascader.vue.d.ts

@@ -499,11 +499,11 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     popupVisible: boolean;
     defaultPopupVisible: boolean;
     show: boolean;
+    separator: string;
+    multiple: boolean;
     allowClear: boolean;
     valueKey: string;
     inputValue: string;
-    multiple: boolean;
-    separator: string;
     defaultShow: boolean;
     expandTrigger: "hover" | "click";
     defaultInputValue: string;
@@ -1223,8 +1223,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         disabled: boolean;
         loading: boolean;
         showArrow: boolean;
-        allowClear: boolean;
         multiple: boolean;
+        allowClear: boolean;
         bordered: boolean;
         maxTagCount: number | "responsive";
         retainInputValue: boolean;