vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Refactored AutoComplete design tokens

pull/5701/head
Cagatay Civici 2024-05-05 18:33:04 +03:00
parent c617766c77
commit 7dcfb440e3
3 changed files with 85 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
components/lib/autocomplete/style/AutoCompleteStyle.js
View File

@ -43,7 +43,7 @@ const theme = ({ dt }) => `
background: ${dt('autocomplete.dropdown.background')}; background: ${dt('autocomplete.dropdown.background')};
border: 1px solid ${dt('autocomplete.dropdown.border.color')}; border: 1px solid ${dt('autocomplete.dropdown.border.color')};
border-left: 0 none; 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')}; transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
outline-color: transparent; outline-color: transparent;
} }
@ -51,13 +51,13 @@ const theme = ({ dt }) => `
.p-autocomplete-dropdown:not(:disabled):hover { .p-autocomplete-dropdown:not(:disabled):hover {
background: ${dt('autocomplete.dropdown.hover.background')}; background: ${dt('autocomplete.dropdown.hover.background')};
border-color: ${dt('autocomplete.dropdown.hover.border.color')}; 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 { .p-autocomplete-dropdown:not(:disabled):active {
background: ${dt('autocomplete.dropdown.active.background')}; background: ${dt('autocomplete.dropdown.active.background')};
border-color: ${dt('autocomplete.dropdown.active.border.color')}; 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 { .p-autocomplete-dropdown:focus-visible {
@ -96,7 +96,7 @@ const theme = ({ dt }) => `
margin: 2px 0; margin: 2px 0;
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
border: 0 none; border: 0 none;
color: ${dt('autocomplete.item.color')}; color: ${dt('autocomplete.option.color')};
background: transparent; background: transparent;
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}; transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')};
border-radius: ${dt('rounded.sm')}; 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 { .p-autocomplete-option:not(.p-autocomplete-option-selected):not(.p-disabled).p-focus {
background: ${dt('autocomplete.item.focus.background')}; background: ${dt('autocomplete.option.focus.background')};
color: ${dt('autocomplete.item.focus.color')}; color: ${dt('autocomplete.option.focus.color')};
} }
.p-autocomplete-option-selected { .p-autocomplete-option-selected {
background: ${dt('autocomplete.item.selected.background')}; background: ${dt('autocomplete.option.selected.background')};
color: ${dt('autocomplete.item.selected.color')}; color: ${dt('autocomplete.option.selected.color')};
} }
.p-autocomplete-option-selected.p-focus { .p-autocomplete-option-selected.p-focus {
background: ${dt('autocomplete.item.selected.focus.background')}; background: ${dt('autocomplete.option.selected.focus.background')};
color: ${dt('autocomplete.item.selected.focus.color')}; color: ${dt('autocomplete.option.selected.focus.color')};
} }
.p-autocomplete-option-group { .p-autocomplete-option-group {
margin: 0; margin: 0;
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
color: ${dt('autocomplete.item.group.color')}; color: ${dt('autocomplete.option.group.color')};
background: ${dt('autocomplete.item.group.background')}; background: ${dt('autocomplete.option.group.background')};
font-weight: 600; font-weight: 600;
} }

75
components/lib/themes/aura/autocomplete/index.js
View File

@ -13,69 +13,34 @@ export default {
placeholderColor: '{form.field.placeholder.color}', placeholderColor: '{form.field.placeholder.color}',
boxShadow: '{form.field.box.shadow}' boxShadow: '{form.field.box.shadow}'
}, },
colorScheme: {
light: {
overlay: { overlay: {
background: '{surface.0}', background: '{overlay.select.background}',
borderColor: '{surface.200}', borderColor: '{overlay.select.border.color}',
color: '{surface.700}' color: '{overlay.select.color}'
}, },
item: { option: {
focusBackground: '{surface.100}', focusBackground: '{list.option.focus.background}',
selectedBackground: '{highlight.background}', selectedBackground: '{list.option.selected.background}',
selectedFocusBackground: '{highlight.focus.background}', selectedFocusBackground: '{list.option.selected.focus.background}',
color: '{surface.700}', color: '{list.option.color}',
focusColor: '{surface.800}', focusColor: '{list.option.focus.color}',
selectedColor: '{highlight.color}', selectedColor: '{list.option.selected.color}',
selectedFocusColor: '{highlight.focus.color}' selectedFocusColor: '{list.option.selected.focus.color}'
}, },
itemGroup: { optionGroup: {
background: '{surface.0}', background: '{list.option.group.background}',
color: '{surface.500}' color: '{list.option.group.color}'
}, },
dropdown: { dropdown: {
width: '2.5rem', width: '2.5rem',
background: '{surface.100}',
hoverBackground: '{surface.200}',
activeBackground: '{surface.300}',
borderColor: '{form.field.border.color}', borderColor: '{form.field.border.color}',
hoverBorderColor: '{form.field.border.color}', hoverBorderColor: '{form.field.border.color}',
activeBorderColor: '{form.field.border.color}', activeBorderColor: '{form.field.border.color}',
color: '{surface.600}', background: '{button.secondary.background}',
hoverColor: '{surface.700}', hoverBackground: '{button.secondary.hover.background}',
activeColor: '{surface.800}' activeBackground: '{button.secondary.active.background}',
} color: '{button.secondary.color}',
}, hoverColor: '{button.secondary.hover.color}',
dark: { activeColor: '{button.secondary.active.color}'
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}'
}
}
} }
}; };

44
components/lib/themes/aura/index.js
View File

@ -196,6 +196,28 @@ export default {
color: '{text.color}', color: '{text.color}',
hoverColor: '{text.hover.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: { navigation: {
item: { item: {
hoverBackground: '{surface.100}', hoverBackground: '{surface.100}',
@ -271,6 +293,28 @@ export default {
color: '{text.color}', color: '{text.color}',
hoverColor: '{text.hover.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: { navigation: {
item: { item: {
hoverBackground: '{surface.800}', hoverBackground: '{surface.800}',