From 3b4df77f40434b5d6e473ac15d579214dd87394b Mon Sep 17 00:00:00 2001
From: Warsono <warsono16694@gmail.com>
Date: Fri, 9 Jun 2023 10:03:06 +0700
Subject: [PATCH] fix(Autocomplete): fix placeholder color

---
 .../src/morpheme/_autocomplete.dark.scss      |  3 +++
 .../themes/src/morpheme/_autocomplete.scss    | 24 ++++++++++++-------
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/packages/themes/src/morpheme/_autocomplete.dark.scss b/packages/themes/src/morpheme/_autocomplete.dark.scss
index 3ff3e26e0..d3c18534f 100644
--- 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
index aa58eaa43..769a0b3d5 100644
--- 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;
     }
   }