diff --git a/components/lib/select/style/SelectStyle.js b/components/lib/select/style/SelectStyle.js index c6054dda5..bad2dc580 100644 --- a/components/lib/select/style/SelectStyle.js +++ b/components/lib/select/style/SelectStyle.js @@ -54,7 +54,7 @@ const theme = ({ dt }) => ` justify-content: center; flex-shrink: 0; background: transparent; - color: ${dt('select.toggle.color')}; + color: ${dt('select.dropdown.color')}; width: 2.5rem; border-top-right-radius: ${dt('rounded.base')}; border-bottom-right-radius: ${dt('rounded.base')}; @@ -141,8 +141,8 @@ input.p-select-label { cursor: auto; margin: 0; padding: 0.5rem 0.75rem; - background: ${dt('select.item.group.background')}; - color: ${dt('select.item.group.color')}; + background: ${dt('select.option.group.background')}; + color: ${dt('select.option.group.color')}; font-weight: 600; } @@ -164,7 +164,7 @@ input.p-select-label { margin: 2px 0; padding: 0.5rem 0.75rem; border: 0 none; - color: ${dt('select.item.color')}; + color: ${dt('select.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')}; @@ -179,18 +179,18 @@ input.p-select-label { } .p-select-option:not(.p-select-option-selected):not(.p-disabled).p-focus { - background: ${dt('select.item.focus.background')}; - color: ${dt('select.item.focus.color')}; + background: ${dt('select.option.focus.background')}; + color: ${dt('select.option.focus.color')}; } .p-select-option.p-select-option-selected { - background: ${dt('select.item.selected.background')}; - color: ${dt('select.item.selected.color')}; + background: ${dt('select.option.selected.background')}; + color: ${dt('select.option.selected.color')}; } .p-select-option.p-select-option-selected.p-focus { - background: ${dt('select.item.selected.focus.background')}; - color: ${dt('select.item.selected.focus.color')}; + background: ${dt('select.option.selected.focus.background')}; + color: ${dt('select.option.selected.focus.color')}; } .p-select-option-check-icon { diff --git a/components/lib/themes/aura/index.js b/components/lib/themes/aura/index.js index 1d965f8dd..2d50470da 100644 --- a/components/lib/themes/aura/index.js +++ b/components/lib/themes/aura/index.js @@ -220,7 +220,7 @@ export default { }, optionGroup: { background: '{surface.0}', - color: '{surface.500}' + color: '{text.muted.color}' } }, navigation: { @@ -320,7 +320,7 @@ export default { }, optionGroup: { background: '{surface.900}', - color: '{surface.400}' + color: '{text.muted.color}' } }, navigation: { diff --git a/components/lib/themes/aura/select/index.js b/components/lib/themes/aura/select/index.js index 2d3fe1e5f..e636df8cf 100644 --- a/components/lib/themes/aura/select/index.js +++ b/components/lib/themes/aura/select/index.js @@ -13,64 +13,31 @@ 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}' - }, - checkmark: { - color: '{surface.400}' - } - }, - 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}' - }, - checkmark: { - color: '{surface.400}' - } - } + 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}' + }, + checkmark: { + color: '{list.option.color}' } };