From feec112a2a1f450d086059f090f5dfa3baae21de Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sun, 5 May 2024 20:10:37 +0300
Subject: [PATCH] Refactored MultiSelect

---
 .../lib/multiselect/style/MultiSelectStyle.js | 20 ++---
 .../lib/themes/aura/multiselect/index.js      | 76 ++++++-------------
 2 files changed, 33 insertions(+), 63 deletions(-)

diff --git a/components/lib/multiselect/style/MultiSelectStyle.js b/components/lib/multiselect/style/MultiSelectStyle.js
index 7ba948431..279ac0705 100644
--- a/components/lib/multiselect/style/MultiSelectStyle.js
+++ b/components/lib/multiselect/style/MultiSelectStyle.js
@@ -46,7 +46,7 @@ const theme = ({ dt }) => `
     justify-content: center;
     flex-shrink: 0;
     background: transparent;
-    color: ${dt('multiselect.toggle.color')};
+    color: ${dt('multiselect.dropdown.color')};
     width: 2.5rem;
     border-top-right-radius: ${dt('rounded.base')};
     border-bottom-right-radius: ${dt('rounded.base')};
@@ -151,7 +151,7 @@ const theme = ({ dt }) => `
     margin: 2px 0;
     padding: 0.5rem 0.75rem;
     border: 0 none;
-    color: ${dt('multiselect.item.color')};
+    color: ${dt('multiselect.option.color')};
     background: transparent;
     transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
     border-radius: ${dt('rounded.sm')};
@@ -166,18 +166,18 @@ const theme = ({ dt }) => `
 }
 
 .p-multiselect-option:not(.p-multiselect-option-selected):not(.p-disabled).p-focus {
-    background: ${dt('multiselect.item.focus.background')};
-    color: ${dt('multiselect.item.focus.color')};
+    background: ${dt('multiselect.option.focus.background')};
+    color: ${dt('multiselect.option.focus.color')};
 }
 
 .p-multiselect-option.p-multiselect-option-selected {
-    background: ${dt('multiselect.item.selected.background')};
-    color: ${dt('multiselect.item.selected.color')};
+    background: ${dt('multiselect.option.selected.background')};
+    color: ${dt('multiselect.option.selected.color')};
 }
 
 .p-multiselect-option.p-multiselect-option-selected.p-focus {
-    background: ${dt('multiselect.item.selected.focus.background')};
-    color: ${dt('multiselect.item.selected.focus.color')};
+    background: ${dt('multiselect.option.selected.focus.background')};
+    color: ${dt('multiselect.option.selected.focus.color')};
 }
 
 .p-multiselect-option .p-checkbox {
@@ -188,8 +188,8 @@ const theme = ({ dt }) => `
     cursor: auto;
     margin: 0;
     padding: 0.5rem 0.75rem;
-    color: ${dt('multiselect.item.group.color')};
-    background: ${dt('multiselect.item.group.background')};
+    color: ${dt('multiselect.option.group.color')};
+    background: ${dt('multiselect.option.group.background')};
     font-weight: 600;
 }
 
diff --git a/components/lib/themes/aura/multiselect/index.js b/components/lib/themes/aura/multiselect/index.js
index 52810e44c..eeadcb602 100644
--- a/components/lib/themes/aura/multiselect/index.js
+++ b/components/lib/themes/aura/multiselect/index.js
@@ -13,58 +13,28 @@ export default {
         placeholderColor: '{form.field.placeholder.color}',
         boxShadow: '{form.field.box.shadow}'
     },
-    colorScheme: {
-        light: {
-            toggle: {
-                color: '{surface.400}'
-            },
-            overlay: {
-                background: '{surface.0}',
-                borderColor: '{surface.200}',
-                color: '{surface.700}'
-            },
-            filterIcon: {
-                color: '{surface.400}'
-            },
-            itemGroup: {
-                background: '{surface.0}',
-                color: '{surface.500}'
-            },
-            item: {
-                focusBackground: '{surface.100}',
-                selectedBackground: '{highlight.background}',
-                selectedFocusBackground: '{highlight.focus.background}',
-                color: '{surface.700}',
-                focusColor: '{surface.800}',
-                selectedColor: '{highlight.color}',
-                selectedFocusColor: '{highlight.focus.color}'
-            }
-        },
-        dark: {
-            toggle: {
-                color: '{surface.400}'
-            },
-            overlay: {
-                background: '{surface.900}',
-                borderColor: '{surface.700}',
-                color: '{surface.0}'
-            },
-            filterIcon: {
-                color: '{surface.400}'
-            },
-            itemGroup: {
-                background: '{surface.900}',
-                color: '{surface.400}'
-            },
-            item: {
-                focusBackground: '{surface.800}',
-                selectedBackground: '{highlight.background}',
-                selectedFocusBackground: '{highlight.focus.background}',
-                color: '{surface.0}',
-                focusColor: '{surface.0}',
-                selectedColor: '{highlight.color}',
-                selectedFocusColor: '{highlight.focus.color}'
-            }
-        }
+    dropdown: {
+        color: '{form.field.icon.color}'
+    },
+    overlay: {
+        background: '{overlay.select.background}',
+        borderColor: '{overlay.select.border.color}',
+        color: '{overlay.select.color}'
+    },
+    option: {
+        focusBackground: '{list.option.focus.background}',
+        selectedBackground: '{list.option.selected.background}',
+        selectedFocusBackground: '{list.option.selected.focus.background}',
+        color: '{list.option.color}',
+        focusColor: '{list.option.focus.color}',
+        selectedColor: '{list.option.selected.color}',
+        selectedFocusColor: '{list.option.selected.focus.color}'
+    },
+    optionGroup: {
+        background: '{list.option.group.background}',
+        color: '{list.option.group.color}'
+    },
+    filterIcon: {
+        color: '{form.field.icon.color}'
     }
 };