Material Card and Accordion

packages/themes/src/presets/lara/card/index.js

@@ -3,7 +3,7 @@ export default {
         background: '{content.background}',
         borderRadius: '{border.radius.lg}',
         color: '{content.color}',
-        shadow: '0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12)'
+        shadow: '0 .125rem .25rem rgba(0,0,0,.075)'
     },
     body: {
         padding: '1.5rem',

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

@@ -3,34 +3,34 @@ export default {
         transitionDuration: '{transition.duration}'
     },
     panel: {
-        borderWidth: '0 0 1px 0',
+        borderWidth: '0',
         borderColor: '{content.border.color}'
     },
     header: {
         color: '{text.muted.color}',
         hoverColor: '{text.color}',
         activeColor: '{text.color}',
-        padding: '1.125rem',
+        padding: '1.25rem',
         fontWeight: '600',
         borderRadius: '0',
         borderWidth: '0',
         borderColor: '{content.border.color}',
         background: '{content.background}',
-        hoverBackground: '{content.background}',
+        hoverBackground: '{content.hover.background}',
         activeBackground: '{content.background}',
         activeHoverBackground: '{content.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'
         },
         toggleIcon: {
             color: '{text.muted.color}',
-            hoverColor: '{text.color}',
-            activeColor: '{text.color}',
-            activeHoverColor: '{text.color}'
+            hoverColor: '{text.muted.color}',
+            activeColor: '{text.muted.color}',
+            activeHoverColor: '{text.muted.color}'
         },
         first: {
             topBorderRadius: '{content.border.radius}',
@@ -46,6 +46,34 @@ export default {
         borderColor: '{content.border.color}',
         background: '{content.background}',
         color: '{text.color}',
-        padding: '0 1.125rem 1.125rem 1.125rem'
+        padding: '0 1.25rem 1.25rem 1.25rem'
+    },
+    style: ({ dt }) => `
+.p-accordionpanel {
+    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('accordion.transition.duration')};
 }
+
+.p-accordionpanel:first-child {
+    border-top-left-radius: ${dt('content.border.radius')};
+    border-top-right-radius: ${dt('content.border.radius')};
+}
+
+.p-accordionpanel:last-child {
+    border-bottom-left-radius: ${dt('content.border.radius')};
+    border-bottom-right-radius: ${dt('content.border.radius')};
+}
+
+.p-accordionpanel-active {
+    margin: 1rem 0;
+}
+
+.p-accordionpanel:not(.p-disabled) .p-accordionheader:focus-visible {
+    background: ${dt('accordion.header.hover.background')};
+    color: ${dt('accordion.header.hover.color')};
+}
+
+
+
+`
 };

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

@@ -1,13 +1,13 @@
 export default {
     root: {
         background: '{content.background}',
-        borderRadius: '{border.radius.xl}',
+        borderRadius: '{content.border.radius}',
         color: '{content.color}',
-        shadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)'
+        shadow: '0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12)'
     },
     body: {
-        padding: '1.25rem',
-        gap: '0.5rem'
+        padding: '1.5rem',
+        gap: '0.75rem'
     },
     caption: {
         gap: '0.5rem'