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

Migrated to new token names and migrated autocomplete

pull/5507/head
Cagatay Civici 2024-03-25 11:57:37 +03:00
parent 1b2992ee93
commit 1881bc1502
6 changed files with 93 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
components/lib/themes/primeone/base/autocomplete/index.js
View File

@ -26,9 +26,41 @@ export default {
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
.p-autocomplete-dd .p-autocomplete-dropdown { .p-autocomplete-dropdown {
border-top-left-radius: 0; cursor: pointer;
border-bottom-left-radius: 0; display: inline-flex;
cursor: pointer;
user-select: none;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
width: ${dt('autocomplete.dropdown.width')};
border-top-right-radius: ${dt('rounded.base')};
border-bottom-right-radius: ${dt('rounded.base')};
background: ${dt('autocomplete.dropdown.background')};
border: 1px solid ${dt('autocomplete.dropdown.border.color')};
border-left: 0 none;
background: ${dt('autocomplete.dropdown.background')};
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
outline-color: transparent;
}
.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')};
}
.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')};
}
.p-autocomplete-dropdown:focus-visible {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('button.primary.background')};
outline-offset: ${dt('focus.ring.offset')};
} }
.p-autocomplete .p-autocomplete-panel { .p-autocomplete .p-autocomplete-panel {
@ -78,17 +110,17 @@ export default {
.p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus { .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus {
background: ${dt('autocomplete.item.focus.background')}; background: ${dt('autocomplete.item.focus.background')};
color: ${dt('autocomplete.item.focus.background')}; color: ${dt('autocomplete.item.focus.color')};
} }
.p-autocomplete-item.p-highlight { .p-autocomplete-item.p-highlight {
color: ${dt('autocomplete.item.selected.background')};
background: ${dt('autocomplete.item.selected.background')}; background: ${dt('autocomplete.item.selected.background')};
color: ${dt('autocomplete.item.selected.color')};
} }
.p-autocomplete-item.p-highlight.p-focus { .p-autocomplete-item.p-highlight.p-focus {
color: ${dt('autocomplete.item.selected.focus.background')};
background: ${dt('autocomplete.item.selected.focus.background')}; background: ${dt('autocomplete.item.selected.focus.background')};
color: ${dt('autocomplete.item.selected.focus.color')};
} }
.p-autocomplete-item-group { .p-autocomplete-item-group {
@ -112,7 +144,7 @@ export default {
gap: 0.25rem; gap: 0.25rem;
color: ${dt('autocomplete.input.multiple.color')}; color: ${dt('autocomplete.input.multiple.color')};
background: ${dt('autocomplete.input.multiple.background')}; background: ${dt('autocomplete.input.multiple.background')};
border: 1px solid ${dt('autocomplete.input.multiple.border.color')}); border: 1px solid ${dt('autocomplete.input.multiple.border.color')};
border-radius: ${dt('rounded.base')}; border-radius: ${dt('rounded.base')};
width: 100%; width: 100%;
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')};

37
components/lib/themes/primeone/presets/aura/autocomplete/index.js
View File

@ -29,15 +29,27 @@ export default {
item: { item: {
focusBackground: '{surface.100}', focusBackground: '{surface.100}',
selectedBackground: '{highlight.background}', selectedBackground: '{highlight.background}',
selectedFocusBackground: '{highlight.background.focus}', selectedFocusBackground: '{highlight.focus.background}',
color: '{surface.700}', color: '{surface.700}',
focusColor: '{surface.800}', focusColor: '{surface.800}',
selectedColor: '{highlight.text.color}', selectedColor: '{highlight.color}',
selectedFocusColor: '{highlight.text.color.focus}' selectedFocusColor: '{highlight.focus.color}'
}, },
itemGroup: { itemGroup: {
background: '{surface.0}', background: '{surface.0}',
color: '{surface.500}' 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: { dark: {
@ -55,15 +67,26 @@ export default {
item: { item: {
focusBackground: '{surface.800}', focusBackground: '{surface.800}',
selectedBackground: '{highlight.background}', selectedBackground: '{highlight.background}',
selectedFocusBackground: '{highlight.background.focus}', selectedFocusBackground: '{highlight.focus.background}',
color: '{surface.0}', color: '{surface.0}',
focusColor: '{surface.0}', focusColor: '{surface.0}',
selectedColor: '{highlight.text.color}', selectedColor: '{highlight.color}',
selectedFocusColor: '{highlight.text.color.focus}' selectedFocusColor: '{highlight.focus.color}'
}, },
itemGroup: { itemGroup: {
background: '{surface.0}', background: '{surface.900}',
color: '{surface.400}' 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}'
} }
} }
} }

12
components/lib/themes/primeone/presets/aura/calendar/index.js
View File

@ -34,7 +34,7 @@ export default {
selectedBackground: '{highlight.background}', selectedBackground: '{highlight.background}',
color: '{surface.700}', color: '{surface.700}',
hoverColor: '{surface.800}', hoverColor: '{surface.800}',
selectedColor: '{highlight.text.color}' selectedColor: '{highlight.color}'
}, },
today: { today: {
background: '{surface.200}', background: '{surface.200}',
@ -45,14 +45,14 @@ export default {
selectedBackground: '{highlight.background}', selectedBackground: '{highlight.background}',
color: '{surface.700}', color: '{surface.700}',
hoverColor: '{surface.800}', hoverColor: '{surface.800}',
selectedColor: '{highlight.text.color}' selectedColor: '{highlight.color}'
}, },
year: { year: {
hoverBackground: '{surface.100}', hoverBackground: '{surface.100}',
selectedBackground: '{highlight.background}', selectedBackground: '{highlight.background}',
color: '{surface.700}', color: '{surface.700}',
hoverColor: '{surface.800}', hoverColor: '{surface.800}',
selectedColor: '{highlight.text.color}' selectedColor: '{highlight.color}'
}, },
buttonbar: { buttonbar: {
borderColor: '{surface.200}' borderColor: '{surface.200}'
@ -100,7 +100,7 @@ export default {
selectedBackground: '{highlight.background}', selectedBackground: '{highlight.background}',
color: '{surface.0}', color: '{surface.0}',
hoverColor: '{surface.0}', hoverColor: '{surface.0}',
selectedColor: '{highlight.text.color}' selectedColor: '{highlight.color}'
}, },
today: { today: {
background: '{surface.700}', background: '{surface.700}',
@ -111,14 +111,14 @@ export default {
selectedBackground: '{highlight.background}', selectedBackground: '{highlight.background}',
color: '{surface.0}', color: '{surface.0}',
hoverColor: '{surface.0}', hoverColor: '{surface.0}',
selectedColor: '{highlight.text.color}' selectedColor: '{highlight.color}'
}, },
year: { year: {
hoverBackground: '{surface.800}', hoverBackground: '{surface.800}',
selectedBackground: '{highlight.background}', selectedBackground: '{highlight.background}',
color: '{surface.0}', color: '{surface.0}',
hoverColor: '{surface.0}', hoverColor: '{surface.0}',
selectedColor: '{highlight.text.color}' selectedColor: '{highlight.color}'
}, },
buttonbar: { buttonbar: {
borderColor: '{surface.700}' borderColor: '{surface.700}'

12
components/lib/themes/primeone/presets/aura/dropdown/index.js
View File

@ -33,11 +33,11 @@ export default {
item: { item: {
focusBackground: '{surface.100}', focusBackground: '{surface.100}',
selectedBackground: '{highlight.background}', selectedBackground: '{highlight.background}',
selectedBackgroundFocus: '{highlight.background.focus}', selectedBackgroundFocus: '{highlight.focus.background}',
color: '{surface.700}', color: '{surface.700}',
focusColor: '{surface.800}', focusColor: '{surface.800}',
selectedColor: '{highlight.text.color}', selectedColor: '{highlight.color}',
selectedFocusColor: '{highlight.text.color.focus}' selectedFocusColor: '{highlight.focus.color}'
}, },
checkmark: { checkmark: {
color: '{surface.400}' color: '{surface.400}'
@ -62,11 +62,11 @@ export default {
item: { item: {
focusBackground: '{surface.800}', focusBackground: '{surface.800}',
selectedBackground: '{highlight.background}', selectedBackground: '{highlight.background}',
selectedBackgroundFocus: '{highlight.background.focus}', selectedBackgroundFocus: '{highlight.focus.background}',
color: '{surface.0}', color: '{surface.0}',
focusColor: '{surface.0}', focusColor: '{surface.0}',
selectedColor: '{highlight.text.color}', selectedColor: '{highlight.color}',
selectedFocusColor: '{highlight.text.color.focus}' selectedFocusColor: '{highlight.focus.color}'
}, },
checkmark: { checkmark: {
color: '{surface.400}' color: '{surface.400}'

12
components/lib/themes/primeone/presets/aura/listbox/index.js
View File

@ -22,11 +22,11 @@ export default {
item: { item: {
focusBackground: '{surface.100}', focusBackground: '{surface.100}',
selectedBackground: '{highlight.background}', selectedBackground: '{highlight.background}',
selectedFocusBackground: '{highlight.background.focus}', selectedFocusBackground: '{highlight.focus.background}',
color: '{surface.700}', color: '{surface.700}',
focusColor: '{surface.800}', focusColor: '{surface.800}',
selectedColor: '{highlight.text.color}', selectedColor: '{highlight.color}',
selectedFocusColor: '{highlight.text.color.focus}' selectedFocusColor: '{highlight.focus.color}'
} }
}, },
dark: { dark: {
@ -40,11 +40,11 @@ export default {
item: { item: {
focusBackground: '{surface.800}', focusBackground: '{surface.800}',
selectedBackground: '{highlight.background}', selectedBackground: '{highlight.background}',
selectedFocusBackground: '{highlight.background.focus}', selectedFocusBackground: '{highlight.focus.background}',
color: '{surface.0}', color: '{surface.0}',
focusColor: '{surface.0}', focusColor: '{surface.0}',
selectedColor: '{highlight.text.color}', selectedColor: '{highlight.color}',
selectedFocusColor: '{highlight.text.color.focus}' selectedFocusColor: '{highlight.focus.color}'
} }
} }
} }

12
components/lib/themes/primeone/presets/aura/multiselect/index.js
View File

@ -33,11 +33,11 @@ export default {
item: { item: {
focusBackground: '{surface.100}', focusBackground: '{surface.100}',
selectedBackground: '{highlight.background}', selectedBackground: '{highlight.background}',
selectedFocusBackground: '{highlight.background.focus}', selectedFocusBackground: '{highlight.focus.background}',
color: '{surface.700}', color: '{surface.700}',
focusColor: '{surface.800}', focusColor: '{surface.800}',
selectedColor: '{highlight.text.color}', selectedColor: '{highlight.color}',
selectedFocusColor: '{highlight.text.color.focus}' selectedFocusColor: '{highlight.focus.color}'
}, },
chip: { chip: {
background: '{surface.100}', background: '{surface.100}',
@ -63,11 +63,11 @@ export default {
item: { item: {
focusBackground: '{surface.800}', focusBackground: '{surface.800}',
selectedBackground: '{highlight.background}', selectedBackground: '{highlight.background}',
selectedFocusBackground: '{highlight.background.focus}', selectedFocusBackground: '{highlight.focus.background}',
color: '{surface.0}', color: '{surface.0}',
focusColor: '{surface.0}', focusColor: '{surface.0}',
selectedColor: '{highlight.text.color}', selectedColor: '{highlight.color}',
selectedFocusColor: '{highlight.text.color.focus}' selectedFocusColor: '{highlight.focus.color}'
}, },
chip: { chip: {
background: '{surface.700}', background: '{surface.700}',