fix(Autocomplete): fix placeholder color

gitsindonesia · Jun 9, 2023 · 3b4df77 · 3b4df77
1 parent dc1101a
commit 3b4df77
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 8 deletions.
diff --git a/packages/themes/src/morpheme/_autocomplete.dark.scss b/packages/themes/src/morpheme/_autocomplete.dark.scss
@@ -59,5 +59,8 @@
     // focus effect
     --v-input-effect-border-color: var(--color-primary-300);
     --v-input-effect-shadow-color: transparent;
+
+    // placeholder
+    --v-autocomplete-input-placeholder-color: var(--color-gray-true-500);
   }
 }
diff --git a/packages/themes/src/morpheme/_autocomplete.scss b/packages/themes/src/morpheme/_autocomplete.scss
@@ -61,6 +61,9 @@
   // focus effect
   --v-input-effect-border-color: var(--color-primary-300);
   --v-input-effect-shadow-color: var(--color-primary-100);
+
+  // placeholder
+  --v-autocomplete-input-placeholder-color: var(--color-gray-500);
 }
 
 .autocomplete {
@@ -144,6 +147,10 @@
     padding-right: 0.75rem;
     height: var(--v-autocomplete-input-height);
 
+    &::placeholder {
+      color: var(--v-autocomplete-input-placeholder-color);
+    }
+
     &--selected {
       --v-autocomplete-input-color: var(--v-autocomplete-input-selected-color);
     }
@@ -166,7 +173,15 @@
     &-button {
       color: var(--v-autocomplete-clearable-button-color);
       background-color: var(--v-autocomplete-clearable-button-bg-color);
-
+      margin-right: var(--size-spacing-1);
+      border-radius: var(--border-radius-full);
+      padding: 0;
+      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      transition-duration: 300ms;
+      width: var(--size-spacing-6);
+      height: var(--size-spacing-6);
+
       &:hover {
         --v-autocomplete-clearable-button-color: var(
           --v-autocomplete-clearable-button-hover-color
@@ -175,13 +190,6 @@
           --v-autocomplete-clearable-button-hover-bg-color
         );
       }
-
-      margin-right: var(--size-spacing-1);
-      border-radius: var(--border-radius-full);
-      padding: 0.25rem/* 4px */;
-      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-      transition-duration: 300ms;
     }
   }