@sdata/web-vue 1.6.0 → 1.7.0

package/es/tag/style/index.scss

@@ -0,0 +1,324 @@
+@use '@style/mixins/icon-hover.scss' as icon-hover;
+@use '@style/theme/index.scss' as theme;
+@use '@style/theme/index.scss' as global;
+@use 'sass:string';
+@use 'sass:map';
+@use '@style/theme/legacy-less-var.scss' as legacyLessVar;
+
+@forward '@components/tag/style/token.scss';
+
+@use '@style/mixins/index.scss' as *;
+@use '@components/tag/style/token.scss' as *;
+
+$tag-prefix-cls: string.unquote('#{theme.$prefix}-tag');
+
+$colors:
+  'red', 'orangered', 'orange', 'gold', 'lime', 'green', 'cyan', 'blue', 'sdblue', 'purple',
+  'pinkpurple', 'magenta';
+$__less-vars: (
+  'colors': $colors,
+  'prefix': theme.$prefix,
+  'sd-cssvars-prefix': global.$sd-cssvars-prefix,
+  'sd-theme-tag': global.$sd-theme-tag,
+  'tag-blue-color-bg': $tag-blue-color-bg,
+  'tag-blue-color-bg_hover': $tag-blue-color-bg_hover,
+  'tag-blue-color-border': $tag-blue-color-border,
+  'tag-blue-color-border_hover': $tag-blue-color-border_hover,
+  'tag-blue-color-icon-bg_hover': $tag-blue-color-icon-bg_hover,
+  'tag-border-radius': $tag-border-radius,
+  'tag-border-type': $tag-border-type,
+  'tag-border-width': $tag-border-width,
+  'tag-color-bg-not-checked_hover': $tag-color-bg-not-checked_hover,
+  'tag-custom-color-icon-bg_hover': $tag-custom-color-icon-bg_hover,
+  'tag-custom-color-text': $tag-custom-color-text,
+  'tag-cyan-color-bg': $tag-cyan-color-bg,
+  'tag-cyan-color-bg_hover': $tag-cyan-color-bg_hover,
+  'tag-cyan-color-border': $tag-cyan-color-border,
+  'tag-cyan-color-border_hover': $tag-cyan-color-border_hover,
+  'tag-cyan-color-icon-bg_hover': $tag-cyan-color-icon-bg_hover,
+  'tag-default-bordered-color-border': $tag-default-bordered-color-border,
+  'tag-default-color-bg': $tag-default-color-bg,
+  'tag-default-color-bg_hover': $tag-default-color-bg_hover,
+  'tag-default-color-border': $tag-default-color-border,
+  'tag-default-color-border_hover': $tag-default-color-border_hover,
+  'tag-default-color-icon': $tag-default-color-icon,
+  'tag-default-color-text': $tag-default-color-text,
+  'tag-gold-color-bg': $tag-gold-color-bg,
+  'tag-gold-color-bg_hover': $tag-gold-color-bg_hover,
+  'tag-gold-color-border': $tag-gold-color-border,
+  'tag-gold-color-border_hover': $tag-gold-color-border_hover,
+  'tag-gold-color-icon-bg_hover': $tag-gold-color-icon-bg_hover,
+  'tag-gray-color-bg': $tag-gray-color-bg,
+  'tag-gray-color-bg_hover': $tag-gray-color-bg_hover,
+  'tag-gray-color-border': $tag-gray-color-border,
+  'tag-gray-color-border_hover': $tag-gray-color-border_hover,
+  'tag-gray-color-icon-bg_hover': $tag-gray-color-icon-bg_hover,
+  'tag-green-color-bg': $tag-green-color-bg,
+  'tag-green-color-bg_hover': $tag-green-color-bg_hover,
+  'tag-green-color-border': $tag-green-color-border,
+  'tag-green-color-border_hover': $tag-green-color-border_hover,
+  'tag-green-color-icon-bg_hover': $tag-green-color-icon-bg_hover,
+  'tag-icon-margin-right': $tag-icon-margin-right,
+  'tag-lime-color-bg': $tag-lime-color-bg,
+  'tag-lime-color-bg_hover': $tag-lime-color-bg_hover,
+  'tag-lime-color-border': $tag-lime-color-border,
+  'tag-lime-color-border_hover': $tag-lime-color-border_hover,
+  'tag-lime-color-icon-bg_hover': $tag-lime-color-icon-bg_hover,
+  'tag-magenta-color-bg': $tag-magenta-color-bg,
+  'tag-magenta-color-bg_hover': $tag-magenta-color-bg_hover,
+  'tag-magenta-color-border': $tag-magenta-color-border,
+  'tag-magenta-color-border_hover': $tag-magenta-color-border_hover,
+  'tag-magenta-color-icon-bg_hover': $tag-magenta-color-icon-bg_hover,
+  'tag-orange-color-bg': $tag-orange-color-bg,
+  'tag-orange-color-bg_hover': $tag-orange-color-bg_hover,
+  'tag-orange-color-border': $tag-orange-color-border,
+  'tag-orange-color-border_hover': $tag-orange-color-border_hover,
+  'tag-orange-color-icon-bg_hover': $tag-orange-color-icon-bg_hover,
+  'tag-orangered-color-bg': $tag-orangered-color-bg,
+  'tag-orangered-color-bg_hover': $tag-orangered-color-bg_hover,
+  'tag-orangered-color-border': $tag-orangered-color-border,
+  'tag-orangered-color-border_hover': $tag-orangered-color-border_hover,
+  'tag-orangered-color-icon-bg_hover': $tag-orangered-color-icon-bg_hover,
+  'tag-padding-horizontal': $tag-padding-horizontal,
+  'tag-padding-vertical': $tag-padding-vertical,
+  'tag-pinkpurple-color-bg': $tag-pinkpurple-color-bg,
+  'tag-pinkpurple-color-bg_hover': $tag-pinkpurple-color-bg_hover,
+  'tag-pinkpurple-color-border': $tag-pinkpurple-color-border,
+  'tag-pinkpurple-color-border_hover': $tag-pinkpurple-color-border_hover,
+  'tag-pinkpurple-color-icon-bg_hover': $tag-pinkpurple-color-icon-bg_hover,
+  'tag-purple-color-bg': $tag-purple-color-bg,
+  'tag-purple-color-bg_hover': $tag-purple-color-bg_hover,
+  'tag-purple-color-border': $tag-purple-color-border,
+  'tag-purple-color-border_hover': $tag-purple-color-border_hover,
+  'tag-purple-color-icon-bg_hover': $tag-purple-color-icon-bg_hover,
+  'tag-red-color-bg': $tag-red-color-bg,
+  'tag-red-color-bg_hover': $tag-red-color-bg_hover,
+  'tag-red-color-border': $tag-red-color-border,
+  'tag-red-color-border_hover': $tag-red-color-border_hover,
+  'tag-red-color-icon-bg_hover': $tag-red-color-icon-bg_hover,
+  'tag-sdblue-color-bg': $tag-sdblue-color-bg,
+  'tag-sdblue-color-bg_hover': $tag-sdblue-color-bg_hover,
+  'tag-sdblue-color-border': $tag-sdblue-color-border,
+  'tag-sdblue-color-border_hover': $tag-sdblue-color-border_hover,
+  'tag-sdblue-color-icon-bg_hover': $tag-sdblue-color-icon-bg_hover,
+  'tag-size-default': $tag-size-default,
+  'tag-size-default-font-size': $tag-size-default-font-size,
+  'tag-size-large': $tag-size-large,
+  'tag-size-large-font-size': $tag-size-large-font-size,
+  'tag-size-medium': $tag-size-medium,
+  'tag-size-medium-font-size': $tag-size-medium-font-size,
+  'tag-size-small': $tag-size-small,
+  'tag-size-small-font-size': $tag-size-small-font-size,
+  'tag-text-font-weight': $tag-text-font-weight,
+  'transition-duration-1': theme.$transition-duration-1,
+  'transition-timing-function-linear': theme.$transition-timing-function-linear,
+  'tag-red-color-text': $tag-red-color-text,
+  'tag-orangered-color-text': $tag-orangered-color-text,
+  'tag-orange-color-text': $tag-orange-color-text,
+  'tag-gold-color-text': $tag-gold-color-text,
+  'tag-lime-color-text': $tag-lime-color-text,
+  'tag-green-color-text': $tag-green-color-text,
+  'tag-cyan-color-text': $tag-cyan-color-text,
+  'tag-blue-color-text': $tag-blue-color-text,
+  'tag-sdblue-color-text': $tag-sdblue-color-text,
+  'tag-purple-color-text': $tag-purple-color-text,
+  'tag-pinkpurple-color-text': $tag-pinkpurple-color-text,
+  'tag-magenta-color-text': $tag-magenta-color-text,
+  'tag-red-bordered-color-border': $tag-red-bordered-color-border,
+  'tag-red-color-icon': $tag-red-color-icon,
+  'tag-orangered-bordered-color-border': $tag-orangered-bordered-color-border,
+  'tag-orange-bordered-color-border': $tag-orange-bordered-color-border,
+  'tag-gold-bordered-color-border': $tag-gold-bordered-color-border,
+  'tag-lime-bordered-color-border': $tag-lime-bordered-color-border,
+  'tag-green-bordered-color-border': $tag-green-bordered-color-border,
+  'tag-cyan-bordered-color-border': $tag-cyan-bordered-color-border,
+  'tag-blue-bordered-color-border': $tag-blue-bordered-color-border,
+  'tag-sdblue-bordered-color-border': $tag-sdblue-bordered-color-border,
+  'tag-purple-bordered-color-border': $tag-purple-bordered-color-border,
+  'tag-pinkpurple-bordered-color-border': $tag-pinkpurple-bordered-color-border,
+  'tag-magenta-bordered-color-border': $tag-magenta-bordered-color-border,
+  'tag-orangered-color-icon': $tag-orangered-color-icon,
+  'tag-orange-color-icon': $tag-orange-color-icon,
+  'tag-gold-color-icon': $tag-gold-color-icon,
+  'tag-lime-color-icon': $tag-lime-color-icon,
+  'tag-green-color-icon': $tag-green-color-icon,
+  'tag-cyan-color-icon': $tag-cyan-color-icon,
+  'tag-blue-color-icon': $tag-blue-color-icon,
+  'tag-sdblue-color-icon': $tag-sdblue-color-icon,
+  'tag-purple-color-icon': $tag-purple-color-icon,
+  'tag-pinkpurple-color-icon': $tag-pinkpurple-color-icon,
+  'tag-magenta-color-icon': $tag-magenta-color-icon,
+);
+
+@function less-var($name, $fallback: null) {
+  @return legacyLessVar.get($__less-vars, $name, $fallback);
+}
+
+.#{$tag-prefix-cls} {
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  height: $tag-size-default;
+  padding: $tag-padding-vertical $tag-padding-horizontal;
+  color: $tag-default-color-text;
+  font-weight: $tag-text-font-weight;
+  font-size: $tag-size-default-font-size;
+  line-height: $tag-size-default - $tag-border-width * 2 - $tag-padding-vertical * 2;
+  vertical-align: middle;
+  border: $tag-border-width $tag-border-type transparent;
+  border-radius: $tag-border-radius;
+
+  @include text-ellipsis();
+  @include icon-hover.icon-hover($tag-prefix-cls, 12px, 16px);
+  @include icon-hover.icon-hover-bg($tag-prefix-cls, $tag-default-color-bg_hover);
+
+  &-checkable {
+    cursor: pointer;
+    transition: all theme.$transition-duration-1 theme.$transition-timing-function-linear;
+  }
+
+  &-checkable:hover {
+    background-color: $tag-color-bg-not-checked_hover;
+  }
+
+  &-checked {
+    background-color: $tag-default-color-bg;
+    border-color: $tag-default-color-border;
+  }
+
+  .#{$tag-prefix-cls}-checkable.#{$tag-prefix-cls}-checked:hover {
+    background-color: $tag-default-color-bg_hover;
+    border-color: $tag-default-color-border_hover;
+  }
+
+  &-bordered,
+  .#{$tag-prefix-cls}-checkable.#{$tag-prefix-cls}-checked.#{$tag-prefix-cls}-bordered:hover {
+    border-color: $tag-default-bordered-color-border;
+  }
+
+  // Size
+  &-size-small {
+    height: $tag-size-small;
+    font-size: $tag-size-small-font-size;
+    line-height: $tag-size-small - $tag-border-width * 2;
+  }
+
+  &-size-medium {
+    height: $tag-size-medium;
+    font-size: $tag-size-medium-font-size;
+    line-height: $tag-size-medium - $tag-border-width * 2;
+  }
+
+  &-size-large {
+    height: $tag-size-large;
+    font-size: $tag-size-large-font-size;
+    line-height: $tag-size-large - $tag-border-width * 2;
+  }
+
+  &-hide {
+    display: none;
+  }
+
+  &-loading {
+    cursor: default;
+    opacity: 0.8;
+  }
+
+  &-icon {
+    margin-right: $tag-icon-margin-right;
+    color: $tag-default-color-icon;
+  }
+
+  &-text {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  @each $value in $colors {
+    .#{$tag-prefix-cls}.#{$tag-prefix-cls}-checked.#{$tag-prefix-cls}-#{$value} {
+      color: less-var('tag-#{$value}-color-text');
+      background-color: less-var('tag-#{$value}-color-bg');
+      border: $tag-border-width $tag-border-type less-var('tag-#{$value}-color-border');
+
+      @include icon-hover.icon-hover-bg(
+        $tag-prefix-cls,
+        less-var('tag-#{$value}-color-icon-bg_hover')
+      );
+    }
+
+    .#{$tag-prefix-cls}-checkable.#{$tag-prefix-cls}-checked.#{$tag-prefix-cls}-#{$value}:hover {
+      background-color: less-var('tag-#{$value}-color-bg_hover');
+      border-color: less-var('tag-#{$value}-color-border_hover');
+    }
+
+    .#{$tag-prefix-cls}-checked.#{$tag-prefix-cls}-#{$value}.#{$tag-prefix-cls}-bordered,
+    .#{$tag-prefix-cls}-checked.#{$tag-prefix-cls}-#{$value}.#{$tag-prefix-cls}-bordered:hover {
+      border-color: less-var('tag-#{$value}-bordered-color-border');
+    }
+
+    .#{$tag-prefix-cls}.#{$tag-prefix-cls}-checked.#{$tag-prefix-cls}-#{$value} &-icon,
+    .#{$tag-prefix-cls}.#{$tag-prefix-cls}-checked.#{$tag-prefix-cls}-#{$value} &-close-btn,
+    .#{$tag-prefix-cls}.#{$tag-prefix-cls}-checked.#{$tag-prefix-cls}-#{$value} &-loading-icon {
+      color: less-var('tag-#{$value}-color-icon');
+    }
+  }
+
+  .#{$tag-prefix-cls}.#{$tag-prefix-cls}-custom-color {
+    color: $tag-custom-color-text;
+
+    @include icon-hover.icon-hover-bg($tag-prefix-cls, $tag-custom-color-icon-bg_hover);
+  }
+
+  & &-close-btn {
+    margin-left: 4px;
+    font-size: 12px;
+
+    > svg {
+      position: relative;
+    }
+  }
+
+  & &-loading-icon {
+    margin-left: 4px;
+    font-size: 12px;
+  }
+}
+
+#{global.$sd-theme-tag}[sd-theme='dark'] {
+  .#{$tag-prefix-cls}-checked {
+    color: rgb(255 255 255 / 90%);
+  }
+
+  @each $value in $colors {
+    .#{$tag-prefix-cls}-checked.#{$tag-prefix-cls}-#{$value} {
+      background-color: string.unquote('rgba(var(#{global.$sd-cssvars-prefix}-#{$value}-6), 0.2)');
+
+      @include icon-hover.icon-hover-bg(
+        $tag-prefix-cls,
+        string.unquote('rgba(var(#{global.$sd-cssvars-prefix}-#{$value}-6), 0.35)')
+      );
+    }
+
+    .#{$tag-prefix-cls}-checkable.#{$tag-prefix-cls}-checked.#{$tag-prefix-cls}-#{$value}:hover {
+      background-color: string.unquote('rgba(var(#{global.$sd-cssvars-prefix}-#{$value}-6), 0.35)');
+    }
+  }
+}
+
+.#{$tag-prefix-cls}-rtl {
+  direction: rtl;
+
+  .#{$tag-prefix-cls} {
+    &-icon {
+      margin-right: 0;
+      margin-left: $tag-icon-margin-right;
+    }
+
+    &-close-btn,
+    &-loading-icon {
+      margin-right: 4px;
+      margin-left: 0;
+    }
+  }
+}

package/es/tag/style/token.scss

@@ -0,0 +1,181 @@
+@use '@style/theme/index.scss' as global;
+
+@forward '@style/theme/index.scss';
+@forward '@style/color/colors.scss' hide $sd-vars-prefix, $sd-cssvars-prefix;
+
+@use 'sass:string';
+@use '@style/theme/index.scss' as *;
+
+$tag-border-width: 1px;
+$tag-border-type: solid;
+$tag-padding-horizontal: 8px;
+$tag-padding-vertical: 0;
+$tag-icon-margin-right: global.$spacing-2;
+$tag-text-font-weight: global.$font-weight-500;
+$tag-border-radius: global.$radius-small;
+
+$tag-size-small: global.$size-5;
+$tag-size-default: global.$size-6;
+$tag-size-medium: global.$size-7;
+$tag-size-large: global.$size-8;
+
+$tag-size-small-font-size: 12px;
+$tag-size-default-font-size: 12px;
+$tag-size-medium-font-size: 14px;
+$tag-size-large-font-size: 14px;
+
+$tag-color-bg-not-checked_hover: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2'));
+
+$tag-custom-color-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-white'));
+$tag-custom-color-icon-bg_hover: rgb(255 255 255 / 20%);
+
+$tag-default-color-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2'));
+$tag-default-color-bg_hover: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-3'));
+$tag-default-color-icon: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
+$tag-default-color-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+$tag-default-color-border: global.$color-transparent;
+$tag-default-bordered-color-border: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-border-2')
+);
+$tag-default-color-border_hover: global.$color-transparent;
+
+$tag-red-color-bg: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-red-1')));
+$tag-red-color-bg_hover: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-red-2')));
+$tag-red-color-border: global.$color-transparent;
+$tag-red-bordered-color-border: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-red-6')));
+$tag-red-color-border_hover: global.$color-transparent;
+$tag-red-color-icon: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-red-6')));
+$tag-red-color-icon-bg_hover: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-red-2')));
+$tag-red-color-text: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-red-6')));
+
+$tag-orangered-color-bg: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-orangered-1')));
+$tag-orangered-color-bg_hover: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-orangered-2')));
+$tag-orangered-color-border: global.$color-transparent;
+$tag-orangered-bordered-color-border: rgb(
+  var(string.unquote('#{global.$sd-cssvars-prefix}-orangered-6'))
+);
+$tag-orangered-color-border_hover: global.$color-transparent;
+$tag-orangered-color-icon: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-orangered-6')));
+$tag-orangered-color-icon-bg_hover: rgb(
+  var(string.unquote('#{global.$sd-cssvars-prefix}-orangered-2'))
+);
+$tag-orangered-color-text: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-orangered-6')));
+
+$tag-orange-color-bg: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-orange-1')));
+$tag-orange-color-bg_hover: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-orange-2')));
+$tag-orange-color-border: global.$color-transparent;
+$tag-orange-bordered-color-border: rgb(
+  var(string.unquote('#{global.$sd-cssvars-prefix}-orange-6'))
+);
+$tag-orange-color-border_hover: global.$color-transparent;
+$tag-orange-color-icon: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-orange-6')));
+$tag-orange-color-icon-bg_hover: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-orange-2')));
+$tag-orange-color-text: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-orange-6')));
+
+$tag-gold-color-bg: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-gold-1')));
+$tag-gold-color-bg_hover: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-gold-3')));
+$tag-gold-color-border: global.$color-transparent;
+$tag-gold-bordered-color-border: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-gold-6')));
+$tag-gold-color-border_hover: global.$color-transparent;
+$tag-gold-color-icon: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-gold-6')));
+$tag-gold-color-icon-bg_hover: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-gold-2')));
+$tag-gold-color-text: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-gold-6')));
+
+$tag-lime-color-bg: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-lime-1')));
+$tag-lime-color-bg_hover: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-lime-2')));
+$tag-lime-color-border: global.$color-transparent;
+$tag-lime-bordered-color-border: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-lime-6')));
+$tag-lime-color-border_hover: global.$color-transparent;
+$tag-lime-color-icon: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-lime-6')));
+$tag-lime-color-icon-bg_hover: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-lime-2')));
+$tag-lime-color-text: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-lime-6')));
+
+$tag-green-color-bg: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-green-1')));
+$tag-green-color-bg_hover: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-green-2')));
+$tag-green-color-border: global.$color-transparent;
+$tag-green-bordered-color-border: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-green-6')));
+$tag-green-color-border_hover: global.$color-transparent;
+$tag-green-color-icon: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-green-6')));
+$tag-green-color-icon-bg_hover: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-green-2')));
+$tag-green-color-text: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-green-6')));
+
+$tag-cyan-color-bg: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-cyan-1')));
+$tag-cyan-color-bg_hover: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-cyan-2')));
+$tag-cyan-color-border: global.$color-transparent;
+$tag-cyan-bordered-color-border: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-cyan-6')));
+$tag-cyan-color-border_hover: global.$color-transparent;
+$tag-cyan-color-icon: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-cyan-6')));
+$tag-cyan-color-icon-bg_hover: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-cyan-2')));
+$tag-cyan-color-text: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-cyan-6')));
+
+$tag-blue-color-bg: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-blue-1')));
+$tag-blue-color-bg_hover: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-blue-2')));
+$tag-blue-color-border: global.$color-transparent;
+$tag-blue-bordered-color-border: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-blue-6')));
+$tag-blue-color-border_hover: global.$color-transparent;
+$tag-blue-color-icon: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-blue-6')));
+$tag-blue-color-icon-bg_hover: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-blue-2')));
+$tag-blue-color-text: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-blue-6')));
+
+$tag-sdblue-color-bg: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-sdblue-1')));
+$tag-sdblue-color-bg_hover: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-sdblue-2')));
+$tag-sdblue-color-border: global.$color-transparent;
+$tag-sdblue-bordered-color-border: rgb(
+  var(string.unquote('#{global.$sd-cssvars-prefix}-sdblue-6'))
+);
+$tag-sdblue-color-border_hover: global.$color-transparent;
+$tag-sdblue-color-icon: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-sdblue-6')));
+$tag-sdblue-color-icon-bg_hover: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-sdblue-2')));
+$tag-sdblue-color-text: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-sdblue-6')));
+
+$tag-purple-color-bg: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-purple-1')));
+$tag-purple-color-bg_hover: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-purple-2')));
+$tag-purple-color-border: global.$color-transparent;
+$tag-purple-bordered-color-border: rgb(
+  var(string.unquote('#{global.$sd-cssvars-prefix}-purple-6'))
+);
+$tag-purple-color-border_hover: global.$color-transparent;
+$tag-purple-color-icon: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-purple-6')));
+$tag-purple-color-icon-bg_hover: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-purple-2')));
+$tag-purple-color-text: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-purple-6')));
+
+$tag-pinkpurple-color-bg: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-pinkpurple-1')));
+$tag-pinkpurple-color-bg_hover: rgb(
+  var(string.unquote('#{global.$sd-cssvars-prefix}-pinkpurple-2'))
+);
+$tag-pinkpurple-color-border: global.$color-transparent;
+$tag-pinkpurple-bordered-color-border: rgb(
+  var(string.unquote('#{global.$sd-cssvars-prefix}-pinkpurple-6'))
+);
+$tag-pinkpurple-color-border_hover: global.$color-transparent;
+$tag-pinkpurple-color-icon: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-pinkpurple-6')));
+$tag-pinkpurple-color-icon-bg_hover: rgb(
+  var(string.unquote('#{global.$sd-cssvars-prefix}-pinkpurple-2'))
+);
+$tag-pinkpurple-color-text: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-pinkpurple-6')));
+
+$tag-magenta-color-bg: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-magenta-1')));
+$tag-magenta-color-bg_hover: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-magenta-2')));
+$tag-magenta-color-border: global.$color-transparent;
+$tag-magenta-bordered-color-border: rgb(
+  var(string.unquote('#{global.$sd-cssvars-prefix}-magenta-6'))
+);
+$tag-magenta-color-border_hover: global.$color-transparent;
+$tag-magenta-color-icon: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-magenta-6')));
+$tag-magenta-color-icon-bg_hover: rgb(
+  var(string.unquote('#{global.$sd-cssvars-prefix}-magenta-2'))
+);
+$tag-magenta-color-text: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-magenta-6')));
+
+$tag-gray-color-bg: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-gray-2')));
+$tag-gray-color-bg_hover: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-gray-3')));
+$tag-gray-color-border: global.$color-transparent;
+$tag-gray-bordered-color-border: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-gray-6')));
+$tag-gray-color-border_hover: global.$color-transparent;
+$tag-gray-color-icon: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-gray-6')));
+$tag-gray-color-icon-bg_hover: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-gray-3')));
+$tag-gray-color-text: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-gray-6')));
+
+// vue overwrite token
+$tag-size-medium: $tag-size-default;
+$tag-size-medium-font-size: $tag-size-default-font-size;

package/es/textarea/style/index.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /******** borderSize *******/
 /******** borderStyle *******/
 /******** radius *******/
@@ -22,6 +23,7 @@
 .sd-textarea-wrapper {
   display: inline-flex;
   box-sizing: border-box;
+  width: 100%;
   padding-right: 12px;
   padding-left: 12px;
   color: var(--color-text-1);
@@ -31,19 +33,12 @@
   border-radius: var(--border-radius-small);
   cursor: text;
   transition: color 0.1s cubic-bezier(0, 0, 1, 1), border-color 0.1s cubic-bezier(0, 0, 1, 1), background-color 0.1s cubic-bezier(0, 0, 1, 1);
-  position: relative;
-  display: inline-block;
-  width: 100%;
-  padding-right: 0;
-  padding-left: 0;
-  overflow: hidden;
 }
 .sd-textarea-wrapper:hover {
   background-color: var(--color-fill-3);
   border-color: transparent;
 }
-.sd-textarea-wrapper:focus-within,
-.sd-textarea-wrapper.sd-textarea-focus {
+.sd-textarea-wrapper:focus-within, .sd-textarea-wrapper.sd-textarea-focus {
   z-index: 1;
   background-color: var(--color-bg-2);
   border-color: rgb(var(--primary-6));
@@ -72,8 +67,7 @@
   background-color: var(--color-danger-light-2);
   border-color: transparent;
 }
-.sd-textarea-wrapper.sd-textarea-error:focus-within,
-.sd-textarea-wrapper.sd-textarea-error.sd-textarea-wrapper-focus {
+.sd-textarea-wrapper.sd-textarea-error:focus-within, .sd-textarea-wrapper.sd-textarea-error.sd-textarea-wrapper-focus {
   z-index: 1;
   background-color: var(--color-bg-2);
   border-color: rgb(var(--danger-6));
@@ -131,6 +125,14 @@
 .sd-textarea-wrapper:not(.sd-textarea-focus) .sd-textarea-icon-hover:hover::before {
   background-color: var(--color-fill-4);
 }
+.sd-textarea-wrapper {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  padding-right: 0;
+  padding-left: 0;
+  overflow: hidden;
+}
 .sd-textarea-wrapper .sd-textarea-word-limit {
   position: absolute;
   right: 10px;
@@ -158,11 +160,13 @@
   position: absolute;
   visibility: hidden;
 }
+
 .sd-textarea {
   width: 100%;
   padding-right: 0;
   padding-left: 0;
   color: inherit;
+  line-height: 1.5715;
   background: none;
   border: none;
   border-radius: 0;
@@ -170,15 +174,6 @@
   cursor: inherit;
   appearance: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  display: block;
-  box-sizing: border-box;
-  height: 100%;
-  min-height: 32px;
-  padding: 4px 12px;
-  font-size: 14px;
-  line-height: 1.5715;
-  vertical-align: top;
-  resize: vertical;
 }
 .sd-textarea::placeholder {
   color: var(--color-text-3);
@@ -189,3 +184,14 @@
 .sd-textarea[disabled] {
   -webkit-text-fill-color: var(--color-text-4);
 }
+.sd-textarea {
+  display: block;
+  box-sizing: border-box;
+  height: 100%;
+  min-height: 32px;
+  padding: 4px 12px;
+  font-size: 14px;
+  line-height: 1.5715;
+  vertical-align: top;
+  resize: vertical;
+}

package/es/textarea/style/index.d.ts

@@ -1,2 +1,2 @@
-import '../../style/index.less';
-import './index.less';
+import '../../style/index.scss';
+import './index.scss';

package/es/textarea/style/index.js

@@ -1,2 +1,2 @@
-import "../../style/index.less";
-import "./index.less";
+import "../../style/index.scss";
+import "./index.scss";

package/es/textarea/style/index.scss

@@ -0,0 +1,66 @@
+@use '@style/theme/index.scss' as theme;
+@use 'sass:string';
+@use '@components/input/style/token.scss' as *;
+@use '@components/input/style/input.scss' as *;
+
+$textarea-prefix-cls: string.unquote('#{theme.$prefix}-textarea');
+
+.#{$textarea-prefix-cls}-wrapper {
+  @include input-wrapper-style($textarea-prefix-cls);
+
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  padding-right: 0;
+  padding-left: 0;
+  overflow: hidden;
+
+  .#{$textarea-prefix-cls}-word-limit {
+    position: absolute;
+    right: $textarea-layout-tip-right;
+    bottom: $textarea-layout-tip-bottom;
+    color: $textarea-color-tip-text;
+    font-size: $textarea-font-tip-size;
+    user-select: none;
+  }
+
+  &.#{$textarea-prefix-cls}-scroll .#{$textarea-prefix-cls}-word-limit {
+    right: $textarea-layout-tip-right + 15px;
+  }
+
+  .#{$textarea-prefix-cls}-clear-btn {
+    position: absolute;
+    top: 50%;
+    right: $textarea-layout-tip-right;
+    transform: translateY(-50%);
+  }
+
+  &.#{$textarea-prefix-cls}-scroll .#{$textarea-prefix-cls}-clear-btn {
+    right: $textarea-layout-tip-right + 15px;
+  }
+
+  &:hover {
+    .#{$textarea-prefix-cls}-clear-btn {
+      display: block;
+    }
+  }
+
+  .#{$textarea-prefix-cls}-mirror {
+    position: absolute;
+    visibility: hidden;
+  }
+}
+
+.#{$textarea-prefix-cls} {
+  @include input-style();
+
+  display: block;
+  box-sizing: border-box;
+  height: 100%;
+  min-height: $textarea-size-min-height;
+  padding: $textarea-padding-vertical $textarea-padding-horizontal;
+  font-size: $textarea-font-size;
+  line-height: theme.$line-height-base;
+  vertical-align: top;
+  resize: vertical;
+}