diff --git a/components/lib/listbox/style/ListboxStyle.js b/components/lib/listbox/style/ListboxStyle.js index b4eccf8b1..d91ee9be1 100644 --- a/components/lib/listbox/style/ListboxStyle.js +++ b/components/lib/listbox/style/ListboxStyle.js @@ -68,7 +68,7 @@ const theme = ({ dt }) => ` padding: 0.5rem 0.75rem; border: 0 none; border-radius: ${dt('rounded.sm')}; - color: ${dt('listbox.item.color')}; + color: ${dt('listbox.option.color')}; 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')}; } @@ -81,31 +81,31 @@ const theme = ({ dt }) => ` } .p-listbox .p-listbox-list .p-listbox-option.p-listbox-option-selected { - background: ${dt('listbox.item.selected.background')}; - color: ${dt('listbox.item.selected.color')}; + background: ${dt('listbox.option.selected.background')}; + color: ${dt('listbox.option.selected.color')}; } .p-listbox:not(.p-disabled) .p-listbox-option.p-listbox-option-selected.p-focus { - background: ${dt('listbox.item.selected.focus.background')}; - color: ${dt('listbox.item.selected.focus.color')}; + background: ${dt('listbox.option.selected.focus.background')}; + color: ${dt('listbox.option.selected.focus.color')}; } .p-listbox:not(.p-disabled) .p-listbox-option:not(.p-listbox-option-selected):not(.p-disabled).p-focus { - background: ${dt('listbox.item.focus.background')}; - color: ${dt('listbox.item.focus.color')}; + background: ${dt('listbox.option.focus.background')}; + color: ${dt('listbox.option.focus.color')}; } .p-listbox:not(.p-disabled) .p-listbox-option:not(.p-listbox-option-selected):not(.p-disabled):hover { - background: ${dt('listbox.item.focus.background')}; - color: ${dt('listbox.item.focus.color')}; + background: ${dt('listbox.option.focus.background')}; + color: ${dt('listbox.option.focus.color')}; } .p-listbox-option-group { cursor: auto; margin: 0; padding: 0.5rem 0.75rem; - color: ${dt('listbox.item.group.color')}; - background: ${dt('listbox.item.group.background')}; + color: ${dt('listbox.option.group.color')}; + background: ${dt('listbox.option.group.background')}; font-weight: 600; } diff --git a/components/lib/themes/aura/listbox/index.js b/components/lib/themes/aura/listbox/index.js index 96bafe5d7..5ac90ddf8 100644 --- a/components/lib/themes/aura/listbox/index.js +++ b/components/lib/themes/aura/listbox/index.js @@ -10,42 +10,20 @@ export default { disabledColor: '{form.field.disabled.color}', boxShadow: '{form.field.box.shadow}' }, - colorScheme: { - light: { - 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: { - 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}' - } - } + 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}' } };