Material panels

packages/themes/src/presets/material/accordion/index.js

@@ -7,7 +7,7 @@ export default {
         borderColor: '{content.border.color}'
     },
     header: {
-        color: '{text.muted.color}',
+        color: '{text.color}',
         hoverColor: '{text.color}',
         activeColor: '{text.color}',
         padding: '1.25rem',
@@ -54,26 +54,24 @@ export default {
     transition: margin ${dt('accordion.transition.duration')};
 }
 
+.p-accordionpanel-active {
+    margin: 1rem 0;
+}
+
 .p-accordionpanel:first-child {
     border-top-left-radius: ${dt('content.border.radius')};
     border-top-right-radius: ${dt('content.border.radius')};
+    margin-top: 0;
 }
 
 .p-accordionpanel:last-child {
     border-bottom-left-radius: ${dt('content.border.radius')};
     border-bottom-right-radius: ${dt('content.border.radius')};
-}
+    margin-bottom: 0;
-
-.p-accordionpanel-active {
-    margin: 1rem 0;
 }
 
 .p-accordionpanel:not(.p-disabled) .p-accordionheader:focus-visible {
-    background: ${dt('accordion.header.hover.background')};
+    background: ${dt('content.focus.background')};
-    color: ${dt('accordion.header.hover.color')};
 }
-
-
-
 `
 };

packages/themes/src/presets/material/base/index.js

@@ -188,6 +188,7 @@ export default {
                 content: {
                     background: '{surface.0}',
                     hoverBackground: '{surface.100}',
+                    focusBackground: '{surface.200}',
                     borderColor: '{surface.300}',
                     color: '{text.color}',
                     hoverColor: '{text.hover.color}'

packages/themes/src/presets/material/fieldset/index.js

@@ -4,7 +4,7 @@ export default {
         borderColor: '{content.border.color}',
         borderRadius: '{content.border.radius}',
         color: '{content.color}',
-        padding: '0 1.125rem 1.125rem 1.125rem',
+        padding: '0 1.25rem 1.25rem 1.25rem',
         transitionDuration: '{transition.duration}'
     },
     legend: {
@@ -15,15 +15,15 @@ export default {
         borderRadius: '{content.border.radius}',
         borderWidth: '1px',
         borderColor: 'transparent',
-        padding: '0.5rem 0.75rem',
+        padding: '0.75rem 1rem',
         gap: '0.5rem',
         fontWeight: '600',
         focusRing: {
-            width: '{focus.ring.width}',
+            width: '0',
-            style: '{focus.ring.style}',
+            style: 'none',
-            color: '{focus.ring.color}',
+            color: 'unset',
-            offset: '{focus.ring.offset}',
+            offset: '0',
-            shadow: '{focus.ring.shadow}'
+            shadow: 'none'
         }
     },
     toggleIcon: {
@@ -32,5 +32,11 @@ export default {
     },
     content: {
         padding: '0'
-    }
+    },
+    style: ({ dt }) => `
+.p-fieldset-toggle-button:focus-visible {
+    background: ${dt('content.focus.background')};
+
+}
+`
 };

packages/themes/src/presets/material/panel/index.js

@@ -8,21 +8,21 @@ export default {
     header: {
         background: 'transparent',
         color: '{text.color}',
-        padding: '1.125rem',
+        padding: '1.25rem',
         borderColor: '{content.border.color}',
         borderWidth: '0',
         borderRadius: '0'
     },
     toggleableHeader: {
-        padding: '0.375rem 1.125rem'
+        padding: '0.5rem 1.25rem'
     },
     title: {
         fontWeight: '600'
     },
     content: {
-        padding: '0 1.125rem 1.125rem 1.125rem'
+        padding: '0 1.25rem 1.25rem 1.25rem'
     },
     footer: {
-        padding: '0 1.125rem 1.125rem 1.125rem'
+        padding: '0 1.25rem 1.25rem 1.25rem'
     }
 };

packages/themes/src/presets/material/scrollpanel/index.js

@@ -16,12 +16,12 @@ export default {
     colorScheme: {
         light: {
             bar: {
-                background: '{surface.100}'
+                background: '{surface.200}'
             }
         },
         dark: {
             bar: {
-                background: '{surface.800}'
+                background: '{surface.700}'
             }
         }
     }

packages/themes/src/presets/material/stepper/index.js

@@ -13,34 +13,31 @@ export default {
         gap: '1rem'
     },
     stepHeader: {
-        padding: '0',
+        padding: '0.75rem 1rem',
         borderRadius: '{content.border.radius}',
         focusRing: {
-            width: '{focus.ring.width}',
+            width: '0',
-            style: '{focus.ring.style}',
+            style: 'none',
-            color: '{focus.ring.color}',
+            color: 'unset',
-            offset: '{focus.ring.offset}',
+            offset: '0',
-            shadow: '{focus.ring.shadow}'
+            shadow: 'none'
         },
         gap: '0.5rem'
     },
     stepTitle: {
         color: '{text.muted.color}',
-        activeColor: '{primary.color}',
+        activeColor: '{text.color}',
         fontWeight: '500'
     },
     stepNumber: {
-        background: '{content.background}',
+        activeBackground: '{primary.color}',
-        activeBackground: '{content.background}',
+        activeBorderColor: '{primary.color}',
-        borderColor: '{content.border.color}',
+        activeColor: '{primary.contrast.color}',
-        activeBorderColor: '{content.border.color}',
-        color: '{text.muted.color}',
-        activeColor: '{primary.color}',
         size: '2rem',
         fontSize: '1.143rem',
         fontWeight: '500',
         borderRadius: '50%',
-        shadow: '0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12)'
+        shadow: 'none'
     },
     steppanels: {
         padding: '0.875rem 0.5rem 1.125rem 0.5rem'
@@ -49,5 +46,21 @@ export default {
         background: '{content.background}',
         color: '{content.color}',
         padding: '0 0 0 1rem'
+    },
+    colorScheme: {
+        light: {
+            stepNumber: {
+                background: '{surface.400}',
+                borderColor: '{surface.400}',
+                color: '{surface.0}'
             }
+        },
+        dark: {}
+    },
+    style: ({ dt }) => `
+.p-step-header:focus-visible {
+    background: ${dt('content.focus.background')};
+}
+}
+`
 };

packages/themes/src/presets/material/tabs/index.js

@@ -9,67 +9,73 @@ export default {
     },
     tab: {
         background: 'transparent',
-        hoverBackground: 'transparent',
+        hoverBackground: '{content.hover.background}',
         activeBackground: 'transparent',
         borderWidth: '0 0 1px 0',
         borderColor: '{content.border.color}',
         hoverBorderColor: '{content.border.color}',
         activeBorderColor: '{primary.color}',
-        color: '{text.muted.color}',
+        color: '{text.color}',
         hoverColor: '{text.color}',
         activeColor: '{primary.color}',
-        padding: '1rem 1.125rem',
+        padding: '1rem 1.25rem',
         fontWeight: '600',
         margin: '0 0 -1px 0',
         gap: '0.5rem',
         focusRing: {
-            width: '{focus.ring.width}',
+            width: '0',
-            style: '{focus.ring.style}',
+            style: 'none',
-            color: '{focus.ring.color}',
+            color: 'unset',
-            offset: '-1px',
+            offset: '0',
-            shadow: '{focus.ring.shadow}'
+            shadow: 'none'
         }
     },
     tabpanel: {
         background: '{content.background}',
         color: '{content.color}',
-        padding: '0.875rem 1.125rem 1.125rem 1.125rem',
+        padding: '1.25rem 1.25rem 1.25rem 1.25rem',
         focusRing: {
-            width: '{focus.ring.width}',
+            width: '0',
-            style: '{focus.ring.style}',
+            style: 'none',
-            color: '{focus.ring.color}',
+            color: 'unset',
-            offset: '{focus.ring.offset}',
+            offset: '0',
-            shadow: 'inset {focus.ring.shadow}'
+            shadow: 'none'
         }
     },
     navButton: {
         background: '{content.background}',
         color: '{text.muted.color}',
         hoverColor: '{text.color}',
-        width: '2.5rem',
+        width: '3rem',
+        shadow: 'none',
         focusRing: {
-            width: '{focus.ring.width}',
+            width: '0',
-            style: '{focus.ring.style}',
+            style: 'none',
-            color: '{focus.ring.color}',
+            color: 'unset',
-            offset: '-1px',
+            offset: '0',
-            shadow: '{focus.ring.shadow}'
+            shadow: 'none'
         }
     },
     activeBar: {
-        height: '1px',
+        height: '2px',
         bottom: '-1px',
         background: '{primary.color}'
     },
-    colorScheme: {
+    style: ({ dt }) => `
-        light: {
+.p-tab {
-            navButton: {
+    flex-grow: 1
-                shadow: '0px 0px 10px 50px rgba(255, 255, 255, 0.6)'
+}
-            }
+
-        },
+.p-tabs-scrollable .p-tab {
-        dark: {
+    flex-grow: 0
-            navButton: {
+}
-                shadow: '0px 0px 10px 50px color-mix(in srgb, {content.background}, transparent 50%)'
+
-            }
+.p-tab:not(.p-disabled):focus-visible {
-        }
+    background: ${dt('content.focus.background')};
-    }
+}
+
+.p-tablist-nav-button:focus-visible {
+    background: ${dt('content.focus.background')};
+}
+`
 };

packages/themes/src/presets/material/toolbar/index.js

@@ -1,10 +1,24 @@
 export default {
     root: {
-        background: '{content.background}',
-        borderColor: '{content.border.color}',
-        borderRadius: '{content.border.radius}',
         color: '{content.color}',
+        borderRadius: '{content.border.radius}',
         gap: '0.5rem',
-        padding: '0.75rem'
+        padding: '1rem'
+    },
+    colorScheme: {
+        light: {
+            root: {
+                background: '{surface.100}',
+                borderColor: '{surface.100}'
+            }
+        },
+        dark: {
+            root: {
+                root: {
+                    background: '{surface.800}',
+                    borderColor: '{surface.800}'
+                }
+            }
+        }
     }
 };