Refactored MultiSelect

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;
 }
 

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}'
+    dropdown: {
+        color: '{form.field.icon.color}'
     },
     overlay: {
-                background: '{surface.0}',
-                borderColor: '{surface.200}',
-                color: '{surface.700}'
+        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: '{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}'
-            }
-        }
+        color: '{form.field.icon.color}'
     }
 };