diff --git a/packages/themes/src/presets/lara/card/index.js b/packages/themes/src/presets/lara/card/index.js index 2b2b07c5f..f0aafe819 100644 --- a/packages/themes/src/presets/lara/card/index.js +++ b/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', diff --git a/packages/themes/src/presets/material/accordion/index.js b/packages/themes/src/presets/material/accordion/index.js index 55a30c7a1..ab00253a6 100644 --- a/packages/themes/src/presets/material/accordion/index.js +++ b/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')}; +} + + + +` }; diff --git a/packages/themes/src/presets/material/card/index.js b/packages/themes/src/presets/material/card/index.js index 8cd21a927..6b60e13e2 100644 --- a/packages/themes/src/presets/material/card/index.js +++ b/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'