@julingbase/jly-arco-design 0.0.2 → 0.0.4

package/lib/tag/style/token.less

@@ -1,171 +1,171 @@
-@import '../../style/theme/index.less';
-
-@tag-border-width: 1px;
-@tag-border-type: solid;
-@tag-padding-horizontal: 8px;
-@tag-padding-vertical: 0;
-@tag-icon-margin-right: @spacing-2;
-@tag-text-font-weight: @font-weight-500;
-@tag-border-radius: @radius-small;
-
-@tag-size-small: @size-5;
-@tag-size-default: @size-6;
-@tag-size-medium: @size-7;
-@tag-size-large: @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(~'@{arco-cssvars-prefix}-color-fill-2');
-
-@tag-custom-color-text: var(~'@{arco-cssvars-prefix}-color-white');
-@tag-custom-color-icon-bg_hover: rgba(255, 255, 255, 0.2);
-
-@tag-default-color-bg: var(~'@{arco-cssvars-prefix}-color-fill-2');
-@tag-default-color-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');
-@tag-default-color-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
-@tag-default-color-text: var(~'@{arco-cssvars-prefix}-color-text-1');
-@tag-default-color-border: @color-transparent;
-@tag-default-bordered-color-border: var(
-  ~'@{arco-cssvars-prefix}-color-border-2'
-);
-@tag-default-color-border_hover: @color-transparent;
-
-@tag-red-color-bg: rgb(var(~'@{arco-cssvars-prefix}-red-1'));
-@tag-red-color-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-red-2'));
-@tag-red-color-border: @color-transparent;
-@tag-red-bordered-color-border: rgb(var(~'@{arco-cssvars-prefix}-red-6'));
-@tag-red-color-border_hover: @color-transparent;
-@tag-red-color-icon: rgb(var(~'@{arco-cssvars-prefix}-red-6'));
-@tag-red-color-icon-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-red-2'));
-@tag-red-color-text: rgb(var(~'@{arco-cssvars-prefix}-red-6'));
-
-@tag-orangered-color-bg: rgb(var(~'@{arco-cssvars-prefix}-orangered-1'));
-@tag-orangered-color-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-orangered-2'));
-@tag-orangered-color-border: @color-transparent;
-@tag-orangered-bordered-color-border: rgb(
-  var(~'@{arco-cssvars-prefix}-orangered-6')
-);
-@tag-orangered-color-border_hover: @color-transparent;
-@tag-orangered-color-icon: rgb(var(~'@{arco-cssvars-prefix}-orangered-6'));
-@tag-orangered-color-icon-bg_hover: rgb(
-  var(~'@{arco-cssvars-prefix}-orangered-2')
-);
-@tag-orangered-color-text: rgb(var(~'@{arco-cssvars-prefix}-orangered-6'));
-
-@tag-orange-color-bg: rgb(var(~'@{arco-cssvars-prefix}-orange-1'));
-@tag-orange-color-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-orange-2'));
-@tag-orange-color-border: @color-transparent;
-@tag-orange-bordered-color-border: rgb(var(~'@{arco-cssvars-prefix}-orange-6'));
-@tag-orange-color-border_hover: @color-transparent;
-@tag-orange-color-icon: rgb(var(~'@{arco-cssvars-prefix}-orange-6'));
-@tag-orange-color-icon-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-orange-2'));
-@tag-orange-color-text: rgb(var(~'@{arco-cssvars-prefix}-orange-6'));
-
-@tag-gold-color-bg: rgb(var(~'@{arco-cssvars-prefix}-gold-1'));
-@tag-gold-color-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-gold-3'));
-@tag-gold-color-border: @color-transparent;
-@tag-gold-bordered-color-border: rgb(var(~'@{arco-cssvars-prefix}-gold-6'));
-@tag-gold-color-border_hover: @color-transparent;
-@tag-gold-color-icon: rgb(var(~'@{arco-cssvars-prefix}-gold-6'));
-@tag-gold-color-icon-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-gold-2'));
-@tag-gold-color-text: rgb(var(~'@{arco-cssvars-prefix}-gold-6'));
-
-@tag-lime-color-bg: rgb(var(~'@{arco-cssvars-prefix}-lime-1'));
-@tag-lime-color-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-lime-2'));
-@tag-lime-color-border: @color-transparent;
-@tag-lime-bordered-color-border: rgb(var(~'@{arco-cssvars-prefix}-lime-6'));
-@tag-lime-color-border_hover: @color-transparent;
-@tag-lime-color-icon: rgb(var(~'@{arco-cssvars-prefix}-lime-6'));
-@tag-lime-color-icon-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-lime-2'));
-@tag-lime-color-text: rgb(var(~'@{arco-cssvars-prefix}-lime-6'));
-
-@tag-green-color-bg: rgb(var(~'@{arco-cssvars-prefix}-green-1'));
-@tag-green-color-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-green-2'));
-@tag-green-color-border: @color-transparent;
-@tag-green-bordered-color-border: rgb(var(~'@{arco-cssvars-prefix}-green-6'));
-@tag-green-color-border_hover: @color-transparent;
-@tag-green-color-icon: rgb(var(~'@{arco-cssvars-prefix}-green-6'));
-@tag-green-color-icon-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-green-2'));
-@tag-green-color-text: rgb(var(~'@{arco-cssvars-prefix}-green-6'));
-
-@tag-cyan-color-bg: rgb(var(~'@{arco-cssvars-prefix}-cyan-1'));
-@tag-cyan-color-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-cyan-2'));
-@tag-cyan-color-border: @color-transparent;
-@tag-cyan-bordered-color-border: rgb(var(~'@{arco-cssvars-prefix}-cyan-6'));
-@tag-cyan-color-border_hover: @color-transparent;
-@tag-cyan-color-icon: rgb(var(~'@{arco-cssvars-prefix}-cyan-6'));
-@tag-cyan-color-icon-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-cyan-2'));
-@tag-cyan-color-text: rgb(var(~'@{arco-cssvars-prefix}-cyan-6'));
-
-@tag-blue-color-bg: rgb(var(~'@{arco-cssvars-prefix}-blue-1'));
-@tag-blue-color-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-blue-2'));
-@tag-blue-color-border: @color-transparent;
-@tag-blue-bordered-color-border: rgb(var(~'@{arco-cssvars-prefix}-blue-6'));
-@tag-blue-color-border_hover: @color-transparent;
-@tag-blue-color-icon: rgb(var(~'@{arco-cssvars-prefix}-blue-6'));
-@tag-blue-color-icon-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-blue-2'));
-@tag-blue-color-text: rgb(var(~'@{arco-cssvars-prefix}-blue-6'));
-
-@tag-arcoblue-color-bg: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-1'));
-@tag-arcoblue-color-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-2'));
-@tag-arcoblue-color-border: @color-transparent;
-@tag-arcoblue-bordered-color-border: rgb(
-  var(~'@{arco-cssvars-prefix}-arcoblue-6')
-);
-@tag-arcoblue-color-border_hover: @color-transparent;
-@tag-arcoblue-color-icon: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-6'));
-@tag-arcoblue-color-icon-bg_hover: rgb(
-  var(~'@{arco-cssvars-prefix}-arcoblue-2')
-);
-@tag-arcoblue-color-text: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-6'));
-
-@tag-purple-color-bg: rgb(var(~'@{arco-cssvars-prefix}-purple-1'));
-@tag-purple-color-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-purple-2'));
-@tag-purple-color-border: @color-transparent;
-@tag-purple-bordered-color-border: rgb(var(~'@{arco-cssvars-prefix}-purple-6'));
-@tag-purple-color-border_hover: @color-transparent;
-@tag-purple-color-icon: rgb(var(~'@{arco-cssvars-prefix}-purple-6'));
-@tag-purple-color-icon-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-purple-2'));
-@tag-purple-color-text: rgb(var(~'@{arco-cssvars-prefix}-purple-6'));
-
-@tag-pinkpurple-color-bg: rgb(var(~'@{arco-cssvars-prefix}-pinkpurple-1'));
-@tag-pinkpurple-color-bg_hover: rgb(
-  var(~'@{arco-cssvars-prefix}-pinkpurple-2')
-);
-@tag-pinkpurple-color-border: @color-transparent;
-@tag-pinkpurple-bordered-color-border: rgb(
-  var(~'@{arco-cssvars-prefix}-pinkpurple-6')
-);
-@tag-pinkpurple-color-border_hover: @color-transparent;
-@tag-pinkpurple-color-icon: rgb(var(~'@{arco-cssvars-prefix}-pinkpurple-6'));
-@tag-pinkpurple-color-icon-bg_hover: rgb(
-  var(~'@{arco-cssvars-prefix}-pinkpurple-2')
-);
-@tag-pinkpurple-color-text: rgb(var(~'@{arco-cssvars-prefix}-pinkpurple-6'));
-
-@tag-magenta-color-bg: rgb(var(~'@{arco-cssvars-prefix}-magenta-1'));
-@tag-magenta-color-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-magenta-2'));
-@tag-magenta-color-border: @color-transparent;
-@tag-magenta-bordered-color-border: rgb(
-  var(~'@{arco-cssvars-prefix}-magenta-6')
-);
-@tag-magenta-color-border_hover: @color-transparent;
-@tag-magenta-color-icon: rgb(var(~'@{arco-cssvars-prefix}-magenta-6'));
-@tag-magenta-color-icon-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-magenta-2'));
-@tag-magenta-color-text: rgb(var(~'@{arco-cssvars-prefix}-magenta-6'));
-
-@tag-gray-color-bg: rgb(var(~'@{arco-cssvars-prefix}-gray-2'));
-@tag-gray-color-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-gray-3'));
-@tag-gray-color-border: @color-transparent;
-@tag-gray-bordered-color-border: rgb(var(~'@{arco-cssvars-prefix}-gray-6'));
-@tag-gray-color-border_hover: @color-transparent;
-@tag-gray-color-icon: rgb(var(~'@{arco-cssvars-prefix}-gray-6'));
-@tag-gray-color-icon-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-gray-3'));
-@tag-gray-color-text: rgb(var(~'@{arco-cssvars-prefix}-gray-6'));
-
-// vue overwrite token
-@tag-size-medium: @tag-size-default;
-@tag-size-medium-font-size: @tag-size-default-font-size;
+@import '../../style/theme/index.less';
+
+@tag-border-width: 1px;
+@tag-border-type: solid;
+@tag-padding-horizontal: 8px;
+@tag-padding-vertical: 0;
+@tag-icon-margin-right: @spacing-2;
+@tag-text-font-weight: @font-weight-500;
+@tag-border-radius: @radius-small;
+
+@tag-size-small: @size-5;
+@tag-size-default: @size-6;
+@tag-size-medium: @size-7;
+@tag-size-large: @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(~'@{arco-cssvars-prefix}-color-fill-2');
+
+@tag-custom-color-text: var(~'@{arco-cssvars-prefix}-color-white');
+@tag-custom-color-icon-bg_hover: rgba(255, 255, 255, 0.2);
+
+@tag-default-color-bg: var(~'@{arco-cssvars-prefix}-color-fill-2');
+@tag-default-color-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');
+@tag-default-color-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
+@tag-default-color-text: var(~'@{arco-cssvars-prefix}-color-text-1');
+@tag-default-color-border: @color-transparent;
+@tag-default-bordered-color-border: var(
+  ~'@{arco-cssvars-prefix}-color-border-2'
+);
+@tag-default-color-border_hover: @color-transparent;
+
+@tag-red-color-bg: rgb(var(~'@{arco-cssvars-prefix}-red-1'));
+@tag-red-color-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-red-2'));
+@tag-red-color-border: @color-transparent;
+@tag-red-bordered-color-border: rgb(var(~'@{arco-cssvars-prefix}-red-6'));
+@tag-red-color-border_hover: @color-transparent;
+@tag-red-color-icon: rgb(var(~'@{arco-cssvars-prefix}-red-6'));
+@tag-red-color-icon-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-red-2'));
+@tag-red-color-text: rgb(var(~'@{arco-cssvars-prefix}-red-6'));
+
+@tag-orangered-color-bg: rgb(var(~'@{arco-cssvars-prefix}-orangered-1'));
+@tag-orangered-color-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-orangered-2'));
+@tag-orangered-color-border: @color-transparent;
+@tag-orangered-bordered-color-border: rgb(
+  var(~'@{arco-cssvars-prefix}-orangered-6')
+);
+@tag-orangered-color-border_hover: @color-transparent;
+@tag-orangered-color-icon: rgb(var(~'@{arco-cssvars-prefix}-orangered-6'));
+@tag-orangered-color-icon-bg_hover: rgb(
+  var(~'@{arco-cssvars-prefix}-orangered-2')
+);
+@tag-orangered-color-text: rgb(var(~'@{arco-cssvars-prefix}-orangered-6'));
+
+@tag-orange-color-bg: rgb(var(~'@{arco-cssvars-prefix}-orange-1'));
+@tag-orange-color-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-orange-2'));
+@tag-orange-color-border: @color-transparent;
+@tag-orange-bordered-color-border: rgb(var(~'@{arco-cssvars-prefix}-orange-6'));
+@tag-orange-color-border_hover: @color-transparent;
+@tag-orange-color-icon: rgb(var(~'@{arco-cssvars-prefix}-orange-6'));
+@tag-orange-color-icon-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-orange-2'));
+@tag-orange-color-text: rgb(var(~'@{arco-cssvars-prefix}-orange-6'));
+
+@tag-gold-color-bg: rgb(var(~'@{arco-cssvars-prefix}-gold-1'));
+@tag-gold-color-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-gold-3'));
+@tag-gold-color-border: @color-transparent;
+@tag-gold-bordered-color-border: rgb(var(~'@{arco-cssvars-prefix}-gold-6'));
+@tag-gold-color-border_hover: @color-transparent;
+@tag-gold-color-icon: rgb(var(~'@{arco-cssvars-prefix}-gold-6'));
+@tag-gold-color-icon-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-gold-2'));
+@tag-gold-color-text: rgb(var(~'@{arco-cssvars-prefix}-gold-6'));
+
+@tag-lime-color-bg: rgb(var(~'@{arco-cssvars-prefix}-lime-1'));
+@tag-lime-color-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-lime-2'));
+@tag-lime-color-border: @color-transparent;
+@tag-lime-bordered-color-border: rgb(var(~'@{arco-cssvars-prefix}-lime-6'));
+@tag-lime-color-border_hover: @color-transparent;
+@tag-lime-color-icon: rgb(var(~'@{arco-cssvars-prefix}-lime-6'));
+@tag-lime-color-icon-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-lime-2'));
+@tag-lime-color-text: rgb(var(~'@{arco-cssvars-prefix}-lime-6'));
+
+@tag-green-color-bg: rgb(var(~'@{arco-cssvars-prefix}-green-1'));
+@tag-green-color-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-green-2'));
+@tag-green-color-border: @color-transparent;
+@tag-green-bordered-color-border: rgb(var(~'@{arco-cssvars-prefix}-green-6'));
+@tag-green-color-border_hover: @color-transparent;
+@tag-green-color-icon: rgb(var(~'@{arco-cssvars-prefix}-green-6'));
+@tag-green-color-icon-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-green-2'));
+@tag-green-color-text: rgb(var(~'@{arco-cssvars-prefix}-green-6'));
+
+@tag-cyan-color-bg: rgb(var(~'@{arco-cssvars-prefix}-cyan-1'));
+@tag-cyan-color-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-cyan-2'));
+@tag-cyan-color-border: @color-transparent;
+@tag-cyan-bordered-color-border: rgb(var(~'@{arco-cssvars-prefix}-cyan-6'));
+@tag-cyan-color-border_hover: @color-transparent;
+@tag-cyan-color-icon: rgb(var(~'@{arco-cssvars-prefix}-cyan-6'));
+@tag-cyan-color-icon-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-cyan-2'));
+@tag-cyan-color-text: rgb(var(~'@{arco-cssvars-prefix}-cyan-6'));
+
+@tag-blue-color-bg: rgb(var(~'@{arco-cssvars-prefix}-blue-1'));
+@tag-blue-color-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-blue-2'));
+@tag-blue-color-border: @color-transparent;
+@tag-blue-bordered-color-border: rgb(var(~'@{arco-cssvars-prefix}-blue-6'));
+@tag-blue-color-border_hover: @color-transparent;
+@tag-blue-color-icon: rgb(var(~'@{arco-cssvars-prefix}-blue-6'));
+@tag-blue-color-icon-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-blue-2'));
+@tag-blue-color-text: rgb(var(~'@{arco-cssvars-prefix}-blue-6'));
+
+@tag-arcoblue-color-bg: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-1'));
+@tag-arcoblue-color-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-2'));
+@tag-arcoblue-color-border: @color-transparent;
+@tag-arcoblue-bordered-color-border: rgb(
+  var(~'@{arco-cssvars-prefix}-arcoblue-6')
+);
+@tag-arcoblue-color-border_hover: @color-transparent;
+@tag-arcoblue-color-icon: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-6'));
+@tag-arcoblue-color-icon-bg_hover: rgb(
+  var(~'@{arco-cssvars-prefix}-arcoblue-2')
+);
+@tag-arcoblue-color-text: rgb(var(~'@{arco-cssvars-prefix}-arcoblue-6'));
+
+@tag-purple-color-bg: rgb(var(~'@{arco-cssvars-prefix}-purple-1'));
+@tag-purple-color-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-purple-2'));
+@tag-purple-color-border: @color-transparent;
+@tag-purple-bordered-color-border: rgb(var(~'@{arco-cssvars-prefix}-purple-6'));
+@tag-purple-color-border_hover: @color-transparent;
+@tag-purple-color-icon: rgb(var(~'@{arco-cssvars-prefix}-purple-6'));
+@tag-purple-color-icon-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-purple-2'));
+@tag-purple-color-text: rgb(var(~'@{arco-cssvars-prefix}-purple-6'));
+
+@tag-pinkpurple-color-bg: rgb(var(~'@{arco-cssvars-prefix}-pinkpurple-1'));
+@tag-pinkpurple-color-bg_hover: rgb(
+  var(~'@{arco-cssvars-prefix}-pinkpurple-2')
+);
+@tag-pinkpurple-color-border: @color-transparent;
+@tag-pinkpurple-bordered-color-border: rgb(
+  var(~'@{arco-cssvars-prefix}-pinkpurple-6')
+);
+@tag-pinkpurple-color-border_hover: @color-transparent;
+@tag-pinkpurple-color-icon: rgb(var(~'@{arco-cssvars-prefix}-pinkpurple-6'));
+@tag-pinkpurple-color-icon-bg_hover: rgb(
+  var(~'@{arco-cssvars-prefix}-pinkpurple-2')
+);
+@tag-pinkpurple-color-text: rgb(var(~'@{arco-cssvars-prefix}-pinkpurple-6'));
+
+@tag-magenta-color-bg: rgb(var(~'@{arco-cssvars-prefix}-magenta-1'));
+@tag-magenta-color-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-magenta-2'));
+@tag-magenta-color-border: @color-transparent;
+@tag-magenta-bordered-color-border: rgb(
+  var(~'@{arco-cssvars-prefix}-magenta-6')
+);
+@tag-magenta-color-border_hover: @color-transparent;
+@tag-magenta-color-icon: rgb(var(~'@{arco-cssvars-prefix}-magenta-6'));
+@tag-magenta-color-icon-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-magenta-2'));
+@tag-magenta-color-text: rgb(var(~'@{arco-cssvars-prefix}-magenta-6'));
+
+@tag-gray-color-bg: rgb(var(~'@{arco-cssvars-prefix}-gray-2'));
+@tag-gray-color-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-gray-3'));
+@tag-gray-color-border: @color-transparent;
+@tag-gray-bordered-color-border: rgb(var(~'@{arco-cssvars-prefix}-gray-6'));
+@tag-gray-color-border_hover: @color-transparent;
+@tag-gray-color-icon: rgb(var(~'@{arco-cssvars-prefix}-gray-6'));
+@tag-gray-color-icon-bg_hover: rgb(var(~'@{arco-cssvars-prefix}-gray-3'));
+@tag-gray-color-text: rgb(var(~'@{arco-cssvars-prefix}-gray-6'));
+
+// vue overwrite token
+@tag-size-medium: @tag-size-default;
+@tag-size-medium-font-size: @tag-size-default-font-size;

package/lib/textarea/style/index.less

@@ -1,64 +1,64 @@
-@import '../../input/style/token.less';
-@import '../../input/style/input.less';
-
-@textarea-prefix-cls: ~'@{prefix}-textarea';
-
-.@{textarea-prefix-cls}-wrapper {
-  .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} {
-  .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: @line-height-base;
-  vertical-align: top;
-  resize: vertical;
-}
+@import '../../input/style/token.less';
+@import '../../input/style/input.less';
+
+@textarea-prefix-cls: ~'@{prefix}-textarea';
+
+.@{textarea-prefix-cls}-wrapper {
+  .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} {
+  .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: @line-height-base;
+  vertical-align: top;
+  resize: vertical;
+}

package/lib/time-picker/style/index.less

@@ -1,94 +1,94 @@
-@import './token.less';
-
-@time-picker-prefix-cls: ~'@{prefix}-timepicker';
-
-.@{time-picker-prefix-cls} {
-  position: relative;
-  display: flex;
-  box-sizing: border-box;
-  padding: 0;
-
-  &-container {
-    overflow: hidden;
-    background-color: var(~'@{arco-cssvars-prefix}-color-bg-popup');
-    border: 1px solid @timepicker-color-border;
-    border-radius: @timepicker-wrapper-border-radius;
-    box-shadow: @popup-box-shadow-base;
-  }
-
-  &-column {
-    box-sizing: border-box;
-    width: @timepicker-column-width;
-    height: @timepicker-column-height;
-    overflow: hidden;
-
-    &:not(:last-child) {
-      border-right: 1px solid @timepicker-color-border;
-    }
-
-    &:hover {
-      overflow-y: auto;
-    }
-
-    ul {
-      box-sizing: border-box;
-      margin: 0;
-      padding: 0;
-      list-style: none;
-
-      &::after {
-        display: block;
-        width: 100%;
-        height: @timepicker-column-height - @timepicker-cell-height -
-          @timepicker-cell-spacing * 2;
-        content: '';
-      }
-    }
-  }
-
-  &-cell {
-    padding: @timepicker-cell-spacing 0;
-    color: @timepicker-color-text-cell;
-    font-weight: @timepicker-font-weight-cell;
-    cursor: pointer;
-
-    &-inner {
-      height: @timepicker-cell-height;
-      padding-left: 24px;
-      font-size: 14px;
-      line-height: @timepicker-cell-height;
-    }
-
-    &:not(&-selected):not(&-disabled):hover &-inner {
-      background-color: @timepicker-color-bg-cell_hover;
-    }
-  }
-
-  &-cell-selected &-cell-inner {
-    font-weight: @timepicker-font-weight-cell_active;
-    background-color: @timepicker-color-bg-cell_active;
-  }
-
-  &-cell-disabled {
-    color: @timepicker-color-text-cell_disabled;
-    cursor: not-allowed;
-  }
-
-  &-footer-extra-wrapper {
-    padding: 8px;
-    color: var(~'@{arco-cssvars-prefix}-color-text-1');
-    font-size: @font-size-body-1;
-    border-top: 1px solid @timepicker-color-border;
-  }
-
-  &-footer-btn-wrapper {
-    display: flex;
-    justify-content: space-between;
-    padding: 8px;
-    border-top: 1px solid @timepicker-color-border;
-
-    & :only-child {
-      margin-left: auto;
-    }
-  }
-}
+@import './token.less';
+
+@time-picker-prefix-cls: ~'@{prefix}-timepicker';
+
+.@{time-picker-prefix-cls} {
+  position: relative;
+  display: flex;
+  box-sizing: border-box;
+  padding: 0;
+
+  &-container {
+    overflow: hidden;
+    background-color: var(~'@{arco-cssvars-prefix}-color-bg-popup');
+    border: 1px solid @timepicker-color-border;
+    border-radius: @timepicker-wrapper-border-radius;
+    box-shadow: @popup-box-shadow-base;
+  }
+
+  &-column {
+    box-sizing: border-box;
+    width: @timepicker-column-width;
+    height: @timepicker-column-height;
+    overflow: hidden;
+
+    &:not(:last-child) {
+      border-right: 1px solid @timepicker-color-border;
+    }
+
+    &:hover {
+      overflow-y: auto;
+    }
+
+    ul {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+
+      &::after {
+        display: block;
+        width: 100%;
+        height: @timepicker-column-height - @timepicker-cell-height -
+          @timepicker-cell-spacing * 2;
+        content: '';
+      }
+    }
+  }
+
+  &-cell {
+    padding: @timepicker-cell-spacing 0;
+    color: @timepicker-color-text-cell;
+    font-weight: @timepicker-font-weight-cell;
+    cursor: pointer;
+
+    &-inner {
+      height: @timepicker-cell-height;
+      padding-left: 24px;
+      font-size: 14px;
+      line-height: @timepicker-cell-height;
+    }
+
+    &:not(&-selected):not(&-disabled):hover &-inner {
+      background-color: @timepicker-color-bg-cell_hover;
+    }
+  }
+
+  &-cell-selected &-cell-inner {
+    font-weight: @timepicker-font-weight-cell_active;
+    background-color: @timepicker-color-bg-cell_active;
+  }
+
+  &-cell-disabled {
+    color: @timepicker-color-text-cell_disabled;
+    cursor: not-allowed;
+  }
+
+  &-footer-extra-wrapper {
+    padding: 8px;
+    color: var(~'@{arco-cssvars-prefix}-color-text-1');
+    font-size: @font-size-body-1;
+    border-top: 1px solid @timepicker-color-border;
+  }
+
+  &-footer-btn-wrapper {
+    display: flex;
+    justify-content: space-between;
+    padding: 8px;
+    border-top: 1px solid @timepicker-color-border;
+
+    & :only-child {
+      margin-left: auto;
+    }
+  }
+}