fix: update placeholder color state

Author: suryakumara

src/components/Dropdown/Dropdown.stories.tsx

@@ -121,7 +121,7 @@ DarkMode.parameters = {
 export const Reset: Story<DropDownProps> = (args) => {
   const [selectedId, setSelectedId] = useState<string | undefined>();
   const handleUnselect = () => {
-    setSelectedId(undefined);
+    setSelectedId('');
   };
   return (
     <div>
@@ -144,7 +144,6 @@ export const Reset: Story<DropDownProps> = (args) => {
 Reset.args = {
   mode: 'dark',
   list,
-  selectedId: 'A001',
   placeholder: 'Please Select Item',
 };
 

src/components/Dropdown/Dropdown.tsx

@@ -22,17 +22,20 @@ const Root = styled(Box)(({ theme }) => ({
   backgroundColor: '#FFF',
   padding: '8px 0px 8px 16px',
   borderRadius: 4,
+  '&.dark': {
+    color: 'white',
+    backgroundColor: 'rgba(0, 0 ,0, 0.2)',
+  },
   '&.Dropdown-empty': {
     color: theme.color.secondary.$60,
+    '&.dark': {
+      color: theme.color.secondary.$80,
+    },
   },
   '&.Dropdown--disabled': {
     opacity: 0.3,
     pointerEvents: 'none',
   },
-  '&.dark': {
-    color: 'white',
-    backgroundColor: 'rgba(0, 0 ,0, 0.2)',
-  },
 }));
 
 const List = styled(Box)(({ theme }) => ({