u

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

@@ -1,4 +1,4 @@
-@use '../_styles/theme/index' as *;
+@use '../_styles/_variables.scss' as *;
 @use 'sass:color';
 
 $input-prefix: #{$prefix}-input;
@@ -24,7 +24,7 @@ $input-prefix: #{$prefix}-input;
   display: flex;
   align-items: center;
   width: 100%;
-  border: $input-border;
+  border: 1px solid $border-outline-color;
   border-radius: $border-radius;
 
   box-sizing: border-box;
@@ -48,17 +48,17 @@ $input-prefix: #{$prefix}-input;
     height: 100%;
 
     &::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;
   }
 
   .#{$input-prefix}-align {
@@ -90,29 +90,29 @@ $input-prefix: #{$prefix}-input;
   }
 
   &.#{$input-prefix}-disabled {
-    background-color: $input-disabled-bg-color;
+    background-color: $bg-color-component-disabled;
     cursor: not-allowed;
 
     .#{$input-prefix}-input {
-      color: $input-disabled-font-color;
+      color: $text-color-disabled;
     }
     .#{$input-prefix}-input::placeholder {
-      color: $input-disabled-font-color;
+      color: $text-color-disabled;
     }
     .#{$input-prefix}-prefix,
     .#{$input-prefix}-suffix {
-      color: $input-disabled-font-color;
+      color: $text-color-disabled;
     }
 
     &:hover,
     &:focus-within {
-      border-color: $input-border-color;
+      border: $border-outline-color;
       box-shadow: none;
     }
   }
 
   &.#{$input-prefix}-readonly {
-    background-color: $input-readonly-bg-color;
+    background-color: $bg-color-component-readonly;
   }
 
   .#{$input-prefix}-icon {
@@ -120,18 +120,17 @@ $input-prefix: #{$prefix}-input;
     transition:
       color 0.2s,
       background-color 0.2s;
-    color: $input-affix-color;
+    color: $text-color-secondary;
 
     display: inline-flex;
     align-items: center;
     justify-content: center;
-
-    width: $input-icon-wrapper-size;
-    height: $input-icon-wrapper-size;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
 
     &:hover {
-      background-color: $input-icon-hover-bg-color;
-      border-radius: 50%;
+      background-color: $bg-color-component-hover;
     }
   }
 
@@ -139,6 +138,6 @@ $input-prefix: #{$prefix}-input;
     flex-shrink: 0;
     margin-left: 4px;
     white-space: nowrap;
-    color: $input-affix-color;
+    color: $text-color-secondary;
   }
 }