diff --git a/components/lib/listbox/style/ListboxStyle.js b/components/lib/listbox/style/ListboxStyle.js index 20a4c1986..854026e5f 100644 --- a/components/lib/listbox/style/ListboxStyle.js +++ b/components/lib/listbox/style/ListboxStyle.js @@ -5,15 +5,17 @@ const theme = ({ dt }) => ` background: ${dt('listbox.background')}; color: ${dt('listbox.color')}; border: 1px solid ${dt('listbox.border.color')}; - border-radius: ${dt('border.radius.md')}; - 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('listbox.border.radius')}; + transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; outline-color: transparent; - box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + box-shadow: ${dt('listbox.shadow')}; } .p-listbox.p-focus { - outline: 0 none; border-color: ${dt('listbox.focus.border.color')}; + box-shadow: ${dt('listbox.focus.ring.shadow')}; + outline: ${dt('listbox.focus.ring.width')} ${dt('listbox.focus.ring.style')} ${dt('listbox.focus.ring.color')}; + outline-offset: ${dt('listbox.focus.ring.offset')}; } .p-listbox.p-disabled { @@ -26,10 +28,8 @@ const theme = ({ dt }) => ` border-color: ${dt('listbox.invalid.border.color')}; } -.p-listbox .p-listbox-header { - padding: 0.5rem 0.5rem 0 0.5rem; - border-bottom: 0 none; - margin: 0 0 0 0; +.p-listbox-header { + padding: ${dt('listbox.header.padding')}; } .p-listbox-filter-container { @@ -56,30 +56,24 @@ const theme = ({ dt }) => ` .p-listbox-list { list-style-type: none; margin: 0; - padding: 0.25rem 0.25rem; + padding: ${dt('listbox.list.padding')}; outline: 0 none; + display: flex; + flex-direction: column; + gap: ${dt('listbox.list.gap')}; } .p-listbox-option { cursor: pointer; position: relative; overflow: hidden; - margin: 2px 0; - padding: 0.5rem 0.75rem; + padding: ${dt('listbox.option.padding')}; border: 0 none; - border-radius: ${dt('border.radius.sm')}; + border-radius: ${dt('listbox.option.border.radius')}; 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')}; } -.p-listbox-option:first-child { - margin-top: 0; -} - -.p-listbox-option:last-child { - margin-bottom: 0; -} - .p-listbox .p-listbox-list .p-listbox-option.p-listbox-option-selected { background: ${dt('listbox.option.selected.background')}; color: ${dt('listbox.option.selected.color')}; @@ -101,17 +95,15 @@ const theme = ({ dt }) => ` } .p-listbox-option-group { - cursor: auto; margin: 0; - padding: 0.5rem 0.75rem; + padding: ${dt('listbox.option.group.padding')}; color: ${dt('listbox.option.group.color')}; background: ${dt('listbox.option.group.background')}; - font-weight: 600; + font-weight: ${dt('listbox.option.group.font.weight')}; } .p-listbox-empty-message { - padding: 0.5rem 0.75rem; - background: transparent; + padding: ${dt('listbox.option.padding')}; } `; diff --git a/components/lib/themes/aura/index.js b/components/lib/themes/aura/index.js index 42ab7504c..f3717631c 100644 --- a/components/lib/themes/aura/index.js +++ b/components/lib/themes/aura/index.js @@ -155,6 +155,9 @@ export default { list: { padding: '0.25rem 0.25rem', gap: '2px', + header: { + padding: '0.5rem 0.75rem 0 0.75rem' + }, option: { padding: '0.5rem 0.75rem', borderRadius: '4px' diff --git a/components/lib/themes/aura/listbox/index.js b/components/lib/themes/aura/listbox/index.js index adaa8b1aa..f19b93f7e 100644 --- a/components/lib/themes/aura/listbox/index.js +++ b/components/lib/themes/aura/listbox/index.js @@ -8,7 +8,22 @@ export default { invalidBorderColor: '{form.field.invalid.border.color}', color: '{form.field.color}', disabledColor: '{form.field.disabled.color}', - shadow: '{form.field.shadow}' + shadow: '{form.field.shadow}', + borderRadius: '{form.field.border.radius}', + focusRing: { + width: '{form.field.focus.ring.width}', + style: '{form.field.focus.ring.style}', + color: '{form.field.focus.ring.color}', + offset: '{form.field.focus.ring.offset}', + shadow: '{form.field.focus.ring.shadow}' + } + }, + list: { + padding: '{list.padding}', + gap: '{list.gap}' + }, + header: { + padding: '0.5rem 0.5rem 0 0.5rem' }, option: { focusBackground: '{list.option.focus.background}', @@ -17,11 +32,15 @@ export default { color: '{list.option.color}', focusColor: '{list.option.focus.color}', selectedColor: '{list.option.selected.color}', - selectedFocusColor: '{list.option.selected.focus.color}' + selectedFocusColor: '{list.option.selected.focus.color}', + padding: '{list.option.padding}', + borderRadius: '{list.option.border.radius}' }, optionGroup: { background: '{list.option.group.background}', - color: '{list.option.group.color}' + color: '{list.option.group.color}', + fontWeight: '{list.option.group.font.weight}', + padding: '{list.option.group.padding}' }, filterIcon: { color: '{form.field.icon.color}' diff --git a/components/lib/themes/lara/index.js b/components/lib/themes/lara/index.js index 361c01120..946ee69e5 100644 --- a/components/lib/themes/lara/index.js +++ b/components/lib/themes/lara/index.js @@ -154,12 +154,15 @@ export default { list: { padding: '0.5rem 0', gap: '0', + header: { + padding: '0.625rem 1rem 0 1rem' + }, option: { - padding: '0.625rem 0.75rem', + padding: '0.625rem 1rem', borderRadius: '0' }, optionGroup: { - padding: '0.625rem 0.75rem', + padding: '0.625rem 1rem', fontWeight: '600' } }, diff --git a/components/lib/themes/lara/listbox/index.js b/components/lib/themes/lara/listbox/index.js index adaa8b1aa..bc3bb5fef 100644 --- a/components/lib/themes/lara/listbox/index.js +++ b/components/lib/themes/lara/listbox/index.js @@ -8,7 +8,22 @@ export default { invalidBorderColor: '{form.field.invalid.border.color}', color: '{form.field.color}', disabledColor: '{form.field.disabled.color}', - shadow: '{form.field.shadow}' + shadow: '{form.field.shadow}', + borderRadius: '{form.field.border.radius}', + focusRing: { + width: '{form.field.focus.ring.width}', + style: '{form.field.focus.ring.style}', + color: '{form.field.focus.ring.color}', + offset: '{form.field.focus.ring.offset}', + shadow: '{form.field.focus.ring.shadow}' + } + }, + list: { + padding: '{list.padding}', + gap: '{list.gap}' + }, + header: { + padding: '{list.header.padding}' }, option: { focusBackground: '{list.option.focus.background}', @@ -17,11 +32,15 @@ export default { color: '{list.option.color}', focusColor: '{list.option.focus.color}', selectedColor: '{list.option.selected.color}', - selectedFocusColor: '{list.option.selected.focus.color}' + selectedFocusColor: '{list.option.selected.focus.color}', + padding: '{list.option.padding}', + borderRadius: '{list.option.border.radius}' }, optionGroup: { background: '{list.option.group.background}', - color: '{list.option.group.color}' + color: '{list.option.group.color}', + fontWeight: '{list.option.group.font.weight}', + padding: '{list.option.group.padding}' }, filterIcon: { color: '{form.field.icon.color}'