From 7dcfb440e31dc8d0819c7db96d4aa5c0f0a520de Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Sun, 5 May 2024 18:33:04 +0300 Subject: [PATCH] Refactored AutoComplete design tokens --- .../autocomplete/style/AutoCompleteStyle.js | 24 ++--- .../lib/themes/aura/autocomplete/index.js | 93 ++++++------------- components/lib/themes/aura/index.js | 44 +++++++++ 3 files changed, 85 insertions(+), 76 deletions(-) diff --git a/components/lib/autocomplete/style/AutoCompleteStyle.js b/components/lib/autocomplete/style/AutoCompleteStyle.js index 2a188a2a0..022dff3bc 100644 --- a/components/lib/autocomplete/style/AutoCompleteStyle.js +++ b/components/lib/autocomplete/style/AutoCompleteStyle.js @@ -43,7 +43,7 @@ const theme = ({ dt }) => ` background: ${dt('autocomplete.dropdown.background')}; border: 1px solid ${dt('autocomplete.dropdown.border.color')}; border-left: 0 none; - background: ${dt('autocomplete.dropdown.background')}; + color: ${dt('autocomplete.dropdown.color')}; transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; outline-color: transparent; } @@ -51,13 +51,13 @@ const theme = ({ dt }) => ` .p-autocomplete-dropdown:not(:disabled):hover { background: ${dt('autocomplete.dropdown.hover.background')}; border-color: ${dt('autocomplete.dropdown.hover.border.color')}; - background: ${dt('autocomplete.dropdown.hover.background')}; + color: ${dt('autocomplete.dropdown.hover.color')}; } .p-autocomplete-dropdown:not(:disabled):active { background: ${dt('autocomplete.dropdown.active.background')}; border-color: ${dt('autocomplete.dropdown.active.border.color')}; - background: ${dt('autocomplete.dropdown.active.background')}; + color: ${dt('autocomplete.dropdown.active.color')}; } .p-autocomplete-dropdown:focus-visible { @@ -96,7 +96,7 @@ const theme = ({ dt }) => ` margin: 2px 0; padding: 0.5rem 0.75rem; border: 0 none; - color: ${dt('autocomplete.item.color')}; + color: ${dt('autocomplete.option.color')}; background: transparent; transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}; border-radius: ${dt('rounded.sm')}; @@ -111,25 +111,25 @@ const theme = ({ dt }) => ` } .p-autocomplete-option:not(.p-autocomplete-option-selected):not(.p-disabled).p-focus { - background: ${dt('autocomplete.item.focus.background')}; - color: ${dt('autocomplete.item.focus.color')}; + background: ${dt('autocomplete.option.focus.background')}; + color: ${dt('autocomplete.option.focus.color')}; } .p-autocomplete-option-selected { - background: ${dt('autocomplete.item.selected.background')}; - color: ${dt('autocomplete.item.selected.color')}; + background: ${dt('autocomplete.option.selected.background')}; + color: ${dt('autocomplete.option.selected.color')}; } .p-autocomplete-option-selected.p-focus { - background: ${dt('autocomplete.item.selected.focus.background')}; - color: ${dt('autocomplete.item.selected.focus.color')}; + background: ${dt('autocomplete.option.selected.focus.background')}; + color: ${dt('autocomplete.option.selected.focus.color')}; } .p-autocomplete-option-group { margin: 0; padding: 0.5rem 0.75rem; - color: ${dt('autocomplete.item.group.color')}; - background: ${dt('autocomplete.item.group.background')}; + color: ${dt('autocomplete.option.group.color')}; + background: ${dt('autocomplete.option.group.background')}; font-weight: 600; } diff --git a/components/lib/themes/aura/autocomplete/index.js b/components/lib/themes/aura/autocomplete/index.js index 1f16cef6b..720613cdf 100644 --- a/components/lib/themes/aura/autocomplete/index.js +++ b/components/lib/themes/aura/autocomplete/index.js @@ -13,69 +13,34 @@ export default { placeholderColor: '{form.field.placeholder.color}', boxShadow: '{form.field.box.shadow}' }, - colorScheme: { - light: { - overlay: { - background: '{surface.0}', - borderColor: '{surface.200}', - color: '{surface.700}' - }, - item: { - focusBackground: '{surface.100}', - selectedBackground: '{highlight.background}', - selectedFocusBackground: '{highlight.focus.background}', - color: '{surface.700}', - focusColor: '{surface.800}', - selectedColor: '{highlight.color}', - selectedFocusColor: '{highlight.focus.color}' - }, - itemGroup: { - background: '{surface.0}', - color: '{surface.500}' - }, - dropdown: { - width: '2.5rem', - background: '{surface.100}', - hoverBackground: '{surface.200}', - activeBackground: '{surface.300}', - borderColor: '{form.field.border.color}', - hoverBorderColor: '{form.field.border.color}', - activeBorderColor: '{form.field.border.color}', - color: '{surface.600}', - hoverColor: '{surface.700}', - activeColor: '{surface.800}' - } - }, - dark: { - overlay: { - background: '{surface.900}', - borderColor: '{surface.700}', - color: '{surface.0}' - }, - item: { - focusBackground: '{surface.800}', - selectedBackground: '{highlight.background}', - selectedFocusBackground: '{highlight.focus.background}', - color: '{surface.0}', - focusColor: '{surface.0}', - selectedColor: '{highlight.color}', - selectedFocusColor: '{highlight.focus.color}' - }, - itemGroup: { - background: '{surface.900}', - color: '{surface.400}' - }, - dropdown: { - background: '{surface.800}', - hoverBackground: '{surface.700}', - activeBackground: '{surface.600}', - borderColor: '{form.field.border.color}', - hoverBorderColor: '{form.field.border.color}', - activeBorderColor: '{form.field.border.color}', - color: '{surface.300}', - hoverColor: '{surface.200}', - activeColor: '{surface.100}' - } - } + 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}' + }, + dropdown: { + width: '2.5rem', + borderColor: '{form.field.border.color}', + hoverBorderColor: '{form.field.border.color}', + activeBorderColor: '{form.field.border.color}', + background: '{button.secondary.background}', + hoverBackground: '{button.secondary.hover.background}', + activeBackground: '{button.secondary.active.background}', + color: '{button.secondary.color}', + hoverColor: '{button.secondary.hover.color}', + activeColor: '{button.secondary.active.color}' } }; diff --git a/components/lib/themes/aura/index.js b/components/lib/themes/aura/index.js index 71d4ca7d1..d38078bb9 100644 --- a/components/lib/themes/aura/index.js +++ b/components/lib/themes/aura/index.js @@ -196,6 +196,28 @@ export default { color: '{text.color}', hoverColor: '{text.hover.color}' }, + overlay: { + select: { + background: '{surface.0}', + borderColor: '{surface.200}', + color: '{text.color}' + } + }, + list: { + option: { + focusBackground: '{surface.100}', + selectedBackground: '{highlight.background}', + selectedFocusBackground: '{highlight.focus.background}', + color: '{text.color}', + focusColor: '{text.hover.color}', + selectedColor: '{highlight.color}', + selectedFocusColor: '{highlight.focus.color}' + }, + optionGroup: { + background: '{surface.0}', + color: '{surface.500}' + } + }, navigation: { item: { hoverBackground: '{surface.100}', @@ -271,6 +293,28 @@ export default { color: '{text.color}', hoverColor: '{text.hover.color}' }, + overlay: { + select: { + background: '{surface.900}', + borderColor: '{surface.700}', + color: '{text.color}' + } + }, + list: { + option: { + focusBackground: '{surface.800}', + selectedBackground: '{highlight.background}', + selectedFocusBackground: '{highlight.focus.background}', + color: '{text.color}', + focusColor: '{text.hover.color}', + selectedColor: '{highlight.color}', + selectedFocusColor: '{highlight.focus.color}' + }, + optionGroup: { + background: '{surface.900}', + color: '{surface.400}' + } + }, navigation: { item: { hoverBackground: '{surface.800}',