u

code/base-project/base-vue/packages/ao-design/src/textarea/index.scss

@@ -1,4 +1,4 @@
-@use '../_styles/theme/index' as *;
+@use '../_styles/_variables.scss' as *;
 @use 'sass:color';
 
 $textarea-prefix: #{$prefix}-textarea;
@@ -23,20 +23,20 @@ $textarea-prefix: #{$prefix}-textarea;
     transition:
       all cubic-bezier(0.38, 0, 0.24, 1) 0.2s,
       height 0s;
-    border: $input-border;
+    border: 1px solid $border-outline-color;
     border-radius: $border-radius;
 
     &::placeholder {
-      color: $input-placeholder-color;
+      color: $text-color-placeholder;
     }
 
     &:hover {
-      border-color: $input-hover-border-color;
+      border-color: $brand-color;
     }
 
     &:focus-within {
-      border-color: $input-focus-border-color;
-      box-shadow: $input-focus-shadow;
+      border-color: $brand-color;
+      box-shadow: 0 0 0 2px $brand-color-focus;
     }
 
     &::-webkit-scrollbar {
@@ -58,19 +58,19 @@ $textarea-prefix: #{$prefix}-textarea;
   }
 
   .#{$textarea-prefix}-disabled {
-    background-color: $input-disabled-bg-color;
+    background-color: $bg-color-component-disabled;
     cursor: not-allowed;
-    color: $input-disabled-font-color;
+    color: $text-color-disabled;
 
     &:hover,
     &:focus-within {
-      border-color: $input-border-color;
+      border: $border-outline-color;
       box-shadow: none;
     }
   }
 
   .#{$textarea-prefix}-readonly {
-    background-color: $input-readonly-bg-color;
+    background-color: $bg-color-component-readonly;
   }
 
   .#{$textarea-prefix}-clear {
@@ -80,21 +80,21 @@ $textarea-prefix: #{$prefix}-textarea;
     transform: translateY(-50%);
     cursor: pointer;
 
-    width: $input-icon-wrapper-size;
-    height: $input-icon-wrapper-size;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
 
     display: flex;
     align-items: center;
     justify-content: center;
 
-    color: $input-affix-color;
+    color: $text-color-secondary;
     transition:
       color 0.2s,
       background-color 0.2s;
 
     &:hover {
-      background-color: $input-icon-hover-bg-color;
-      border-radius: 50%;
+      background-color: $bg-color-component-hover;
     }
   }
 
@@ -103,6 +103,6 @@ $textarea-prefix: #{$prefix}-textarea;
     right: 8px;
     bottom: 0px;
     font-size: 12px;
-    color: $input-affix-color;
+    color: $text-color-secondary;
   }
 }