diff --git a/packages/themes/src/presets/material/accordion/index.js b/packages/themes/src/presets/material/accordion/index.js index ab00253a6..bca6584b7 100644 --- a/packages/themes/src/presets/material/accordion/index.js +++ b/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')}; -} - -.p-accordionpanel-active { - margin: 1rem 0; + margin-bottom: 0; } .p-accordionpanel:not(.p-disabled) .p-accordionheader:focus-visible { - background: ${dt('accordion.header.hover.background')}; - color: ${dt('accordion.header.hover.color')}; + background: ${dt('content.focus.background')}; } - - - ` }; diff --git a/packages/themes/src/presets/material/base/index.js b/packages/themes/src/presets/material/base/index.js index f3725a081..04b23c742 100644 --- a/packages/themes/src/presets/material/base/index.js +++ b/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}' diff --git a/packages/themes/src/presets/material/fieldset/index.js b/packages/themes/src/presets/material/fieldset/index.js index 12993c20d..a5cc9e9ac 100644 --- a/packages/themes/src/presets/material/fieldset/index.js +++ b/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}', - 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: { @@ -32,5 +32,11 @@ export default { }, content: { padding: '0' - } + }, + style: ({ dt }) => ` +.p-fieldset-toggle-button:focus-visible { + background: ${dt('content.focus.background')}; + +} +` }; diff --git a/packages/themes/src/presets/material/panel/index.js b/packages/themes/src/presets/material/panel/index.js index 472c0a1fe..616f60fd6 100644 --- a/packages/themes/src/presets/material/panel/index.js +++ b/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' } }; diff --git a/packages/themes/src/presets/material/scrollpanel/index.js b/packages/themes/src/presets/material/scrollpanel/index.js index b421048a1..16c0de142 100644 --- a/packages/themes/src/presets/material/scrollpanel/index.js +++ b/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}' } } } diff --git a/packages/themes/src/presets/material/stepper/index.js b/packages/themes/src/presets/material/stepper/index.js index 43f8bc2ba..7b50de571 100644 --- a/packages/themes/src/presets/material/stepper/index.js +++ b/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}', - 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' }, gap: '0.5rem' }, stepTitle: { color: '{text.muted.color}', - activeColor: '{primary.color}', + activeColor: '{text.color}', fontWeight: '500' }, stepNumber: { - background: '{content.background}', - activeBackground: '{content.background}', - borderColor: '{content.border.color}', - activeBorderColor: '{content.border.color}', - color: '{text.muted.color}', - activeColor: '{primary.color}', + activeBackground: '{primary.color}', + activeBorderColor: '{primary.color}', + activeColor: '{primary.contrast.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')}; +} +} +` }; diff --git a/packages/themes/src/presets/material/tabs/index.js b/packages/themes/src/presets/material/tabs/index.js index 82b7e09ff..dc27fd0fa 100644 --- a/packages/themes/src/presets/material/tabs/index.js +++ b/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}', - style: '{focus.ring.style}', - color: '{focus.ring.color}', - offset: '-1px', - shadow: '{focus.ring.shadow}' + width: '0', + style: 'none', + color: 'unset', + offset: '0', + 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}', - style: '{focus.ring.style}', - color: '{focus.ring.color}', - offset: '{focus.ring.offset}', - shadow: 'inset {focus.ring.shadow}' + width: '0', + style: 'none', + color: 'unset', + offset: '0', + 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}', - style: '{focus.ring.style}', - color: '{focus.ring.color}', - offset: '-1px', - shadow: '{focus.ring.shadow}' + width: '0', + style: 'none', + color: 'unset', + offset: '0', + shadow: 'none' } }, activeBar: { - height: '1px', + height: '2px', bottom: '-1px', background: '{primary.color}' }, - colorScheme: { - light: { - navButton: { - shadow: '0px 0px 10px 50px rgba(255, 255, 255, 0.6)' - } - }, - dark: { - navButton: { - shadow: '0px 0px 10px 50px color-mix(in srgb, {content.background}, transparent 50%)' - } - } - } + style: ({ dt }) => ` +.p-tab { + flex-grow: 1 +} + +.p-tabs-scrollable .p-tab { + flex-grow: 0 +} + +.p-tab:not(.p-disabled):focus-visible { + background: ${dt('content.focus.background')}; +} + +.p-tablist-nav-button:focus-visible { + background: ${dt('content.focus.background')}; +} +` }; diff --git a/packages/themes/src/presets/material/toolbar/index.js b/packages/themes/src/presets/material/toolbar/index.js index 44250dc43..9d4a96533 100644 --- a/packages/themes/src/presets/material/toolbar/index.js +++ b/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}' + } + } + } } };