Material menus

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: {

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')};
+}
+`
 };

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')};
+}
+`
 };

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')};
+}
+`
 };