diff --git a/packages/themes/src/presets/material/base/index.js b/packages/themes/src/presets/material/base/index.js index 04b23c742..0cff35dd2 100644 --- a/packages/themes/src/presets/material/base/index.js +++ b/packages/themes/src/presets/material/base/index.js @@ -73,14 +73,14 @@ export default { padding: '0.5rem 0', gap: '0', header: { - padding: '0.75rem 0.75rem' + padding: '0.75rem 1rem' }, option: { - padding: '0.75rem 0.75rem', + padding: '0.75rem 1rem', borderRadius: '{border.radius.none}' }, optionGroup: { - padding: '0.75rem 0.75rem', + padding: '0.75rem 1rem', fontWeight: '700' } }, @@ -96,12 +96,12 @@ export default { gap: '0' }, item: { - padding: '0.75rem 0.75rem', + padding: '0.75rem 1rem', borderRadius: '{border.radius.none}', gap: '0.5rem' }, submenuLabel: { - padding: '0.75rem 0.75rem', + padding: '0.75rem 1rem', fontWeight: '700' }, submenuIcon: { diff --git a/packages/themes/src/presets/material/megamenu/index.js b/packages/themes/src/presets/material/megamenu/index.js index 9eed7d4e0..1368c1f2d 100644 --- a/packages/themes/src/presets/material/megamenu/index.js +++ b/packages/themes/src/presets/material/megamenu/index.js @@ -63,16 +63,21 @@ export default { }, mobileButton: { borderRadius: '50%', - size: '1.75rem', + size: '2.5rem', color: '{text.muted.color}', hoverColor: '{text.muted.hover.color}', hoverBackground: '{content.hover.background}', focusRing: { - width: '{focus.ring.width}', - style: '{focus.ring.style}', - color: '{focus.ring.color}', - offset: '{focus.ring.offset}', - shadow: '{focus.ring.shadow}' + width: '0', + style: 'none', + color: 'unset', + offset: '0', + shadow: 'none' } - } + }, + style: ({ dt }) => ` +.p-megamenu-button:focus-visible { + background: ${dt('content.focus.background')}; +} +` }; diff --git a/packages/themes/src/presets/material/menubar/index.js b/packages/themes/src/presets/material/menubar/index.js index bebe867d0..9a9e70ec7 100644 --- a/packages/themes/src/presets/material/menubar/index.js +++ b/packages/themes/src/presets/material/menubar/index.js @@ -47,16 +47,21 @@ export default { }, mobileButton: { borderRadius: '50%', - size: '1.75rem', + size: '2.5rem', color: '{text.muted.color}', hoverColor: '{text.muted.hover.color}', hoverBackground: '{content.hover.background}', focusRing: { - width: '{focus.ring.width}', - style: '{focus.ring.style}', - color: '{focus.ring.color}', - offset: '{focus.ring.offset}', - shadow: '{focus.ring.shadow}' + width: '0', + style: 'none', + color: 'unset', + offset: '0', + shadow: 'none' } - } + }, + style: ({ dt }) => ` +.p-menubar-button:focus-visible { + background: ${dt('content.focus.background')}; +} +` }; diff --git a/packages/themes/src/presets/material/panelmenu/index.js b/packages/themes/src/presets/material/panelmenu/index.js index d304cf54c..4f58f5186 100644 --- a/packages/themes/src/presets/material/panelmenu/index.js +++ b/packages/themes/src/presets/material/panelmenu/index.js @@ -1,21 +1,21 @@ export default { root: { - gap: '0.5rem', + gap: '0', transitionDuration: '{transition.duration}' }, panel: { background: '{content.background}', borderColor: '{content.border.color}', - borderWidth: '1px', + borderWidth: '0', color: '{content.color}', - padding: '0.25rem 0.25rem', - borderRadius: '{content.border.radius}', + padding: '0', + borderRadius: '0', first: { - borderWidth: '1px', + borderWidth: '0', topBorderRadius: '{content.border.radius}' }, last: { - borderWidth: '1px', + borderWidth: '0', bottomBorderRadius: '{content.border.radius}' } }, @@ -37,5 +37,31 @@ export default { submenuIcon: { color: '{navigation.submenu.icon.color}', focusColor: '{navigation.submenu.icon.focus.color}' - } + }, + style: ({ dt }) => ` +.p-panelmenu-panel { + box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12); + transition: margin ${dt('panelmenu.transition.duration')}; +} + +.p-panelmenu-panel:has(.p-panelmenu-header-active) { + margin: 1rem 0; +} + +.p-panelmenu-panel:first-child { + border-top-left-radius: ${dt('content.border.radius')}; + border-top-right-radius: ${dt('content.border.radius')}; + margin-top: 0; +} + +.p-panelmenu-panel:last-child { + border-bottom-left-radius: ${dt('content.border.radius')}; + border-bottom-right-radius: ${dt('content.border.radius')}; + margin-bottom: 0; +} + +.p-accordionpanel:not(.p-disabled) .p-accordionheader:focus-visible { + background: ${dt('content.focus.background')}; +} +` };