diff --git a/components/lib/tabmenu/style/TabMenuStyle.js b/components/lib/tabmenu/style/TabMenuStyle.js index d2bc556ac..b6631d316 100644 --- a/components/lib/tabmenu/style/TabMenuStyle.js +++ b/components/lib/tabmenu/style/TabMenuStyle.js @@ -32,8 +32,6 @@ const theme = ({ dt }) => ` color: ${dt('tabmenu.item.color')}; padding: ${dt('tabmenu.item.padding')}; font-weight: ${dt('tabmenu.item.font.weight')}; - border-top-right-radius: ${dt('tabmenu.item.border.radius')}; - border-top-left-radius: ${dt('tabmenu.item.border.radius')}; transition: background ${dt('transition.duration')}, border-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}; margin: ${dt('tabmenu.item.margin')}; outline-color: transparent; @@ -41,6 +39,7 @@ const theme = ({ dt }) => ` } .p-tabmenu-item-link:focus-visible { + z-index: 1; box-shadow: ${dt('tabmenu.item.focus.ring.shadow')}; outline: ${dt('tabmenu.item.focus.ring.width')} ${dt('tabmenu.item.focus.ring.style')} ${dt('tabmenu.item.focus.ring.color')}; outline-offset: ${dt('tabmenu.item.focus.ring.offset')}; diff --git a/components/lib/tabs/style/TabsStyle.js b/components/lib/tabs/style/TabsStyle.js index e229b43f2..bc85b64b9 100644 --- a/components/lib/tabs/style/TabsStyle.js +++ b/components/lib/tabs/style/TabsStyle.js @@ -29,9 +29,10 @@ const theme = ({ dt }) => ` .p-tablist-tab-list { position: relative; display: flex; - background: ${dt('tabs.tab.list.background')}; - border: 1px solid ${dt('tabs.tab.list.border.color')}; - border-width: 0 0 1px 0; + background: ${dt('tabs.tablist.background')}; + border-style: solid; + border-color: ${dt('tabs.tablist.border.color')}; + border-width: ${dt('tabs.tablist.border.width')}; } .p-tablist-nav-button { @@ -45,15 +46,18 @@ const theme = ({ dt }) => ` justify-content: center; background: ${dt('tabs.nav.button.background')}; color: ${dt('tabs.nav.button.color')}; - width: 2.5rem; - transition: color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; + width: ${dt('tabs.nav.button.width')}; + transition: color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}; box-shadow: ${dt('tabs.nav.button.shadow')}; + outline-color: transparent; cursor: pointer; } .p-tablist-nav-button:focus-visible { - outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; - outline-offset: ${dt('focus.ring.offset')}; + z-index: 1; + box-shadow: ${dt('tabs.nav.button.focus.ring.shadow')}; + outline: ${dt('tabs.nav.button.focus.ring.width')} ${dt('tabs.nav.button.focus.ring.style')} ${dt('tabs.nav.button.focus.ring.color')}; + outline-offset: ${dt('tabs.nav.button.focus.ring.offset')}; } .p-tablist-nav-button:hover { @@ -69,51 +73,55 @@ const theme = ({ dt }) => ` } .p-tab { - position: relative; - overflow: hidden; cursor: pointer; + user-select: none; + position: relative; border-style: solid; - border-width: 0 0 1px 0; - border-color: transparent transparent ${dt('tabs.tab.border.color')} transparent; - color: ${dt('tabs.tab.color')}; - background: ${dt('tabs.nav.background')}; - padding: 1rem 1.125rem; - font-weight: 600; - border-top-right-radius: ${dt('border.radius.md')}; - border-top-left-radius: ${dt('border.radius.md')}; - transition: color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; - margin: 0 0 -1px 0; - outline-color: transparent; - line-height: 1; white-space: nowrap; + background: ${dt('tabs.tab.background')}; + border-width: ${dt('tabs.tab.border.width')}; + border-color: ${dt('tabs.tab.border.color')}; + color: ${dt('tabs.tab.color')}; + padding: ${dt('tabs.tab.padding')}; + font-weight: ${dt('tabs.tab.font.weight')}; + transition: background ${dt('transition.duration')}, border-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}; + margin: ${dt('tabs.tab.margin')}; + outline-color: transparent; } .p-tab:not(.p-disabled):focus-visible { - outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; - outline-offset: -1px; + z-index: 1; + box-shadow: ${dt('tabs.tab.focus.ring.shadow')}; + outline: ${dt('tabs.tab.focus.ring.width')} ${dt('tabs.tab.focus.ring.style')} ${dt('tabs.tab.focus.ring.color')}; + outline-offset: ${dt('tabs.tab.focus.ring.offset')}; } .p-tab:not(.p-tab-active):not(.p-disabled):hover { + background: ${dt('tabs.tab.hover.background')}; + border-color: ${dt('tabs.tab.hover.border.color')}; color: ${dt('tabs.tab.hover.color')}; } .p-tab-active { + background: ${dt('tabs.tab.active.background')}; + border-color: ${dt('tabs.tab.active.border.color')}; color: ${dt('tabs.tab.active.color')}; } .p-tabpanels { - background: ${dt('tabs.tab.panel.background')}; - color: ${dt('tabs.tab.panel.color')}; - padding: 0.875rem 1.125rem 1.125rem 1.125rem; + background: ${dt('tabs.tabpanel.background')}; + color: ${dt('tabs.tabpanel.color')}; + padding: ${dt('tabs.tabpanel.padding')}; + outline: 0 none; } .p-tablist-active-bar { z-index: 1; display: block; position: absolute; - bottom: -1px; - height: 1px; - background-color: ${dt('tabs.tab.active.border.color')}; + bottom: ${dt('tabs.active.bar.bottom')}; + height: ${dt('tabs.active.bar.height')}; + background: ${dt('tabs.active.bar.background')}; transition: 250ms cubic-bezier(0.35, 0, 0.25, 1); } `; diff --git a/components/lib/themes/aura/tabmenu/index.js b/components/lib/themes/aura/tabmenu/index.js index 0879c0b25..9f0892a23 100644 --- a/components/lib/themes/aura/tabmenu/index.js +++ b/components/lib/themes/aura/tabmenu/index.js @@ -17,7 +17,6 @@ export default { activeColor: '{primary.color}', padding: '1rem 1.125rem', fontWeight: '600', - borderRadius: '{content.border.radius}', margin: '0 0 -1px 0', gap: '0.5rem', focusRing: { diff --git a/components/lib/themes/aura/tabs/index.js b/components/lib/themes/aura/tabs/index.js index 00024c7bb..27a9f707e 100644 --- a/components/lib/themes/aura/tabs/index.js +++ b/components/lib/themes/aura/tabs/index.js @@ -1,23 +1,54 @@ export default { - tabList: { + tablist: { + borderWidth: '0 0 1px 0', background: '{content.background}', borderColor: '{content.border.color}' }, tab: { + background: 'transparent', + hoverBackground: 'transparent', + activeBackground: 'transparent', + borderWidth: '0 0 1px 0', borderColor: '{content.border.color}', + hoverBorderColor: '{content.border.color}', activeBorderColor: '{primary.color}', color: '{text.muted.color}', hoverColor: '{text.color}', - activeColor: '{primary.color}' + activeColor: '{primary.color}', + padding: '1rem 1.125rem', + fontWeight: '600', + margin: '0 0 -1px 0', + gap: '0.5rem', + focusRing: { + width: '{focus.ring.width}', + style: '{focus.ring.style}', + color: '{focus.ring.color}', + offset: '{focus.ring.offset}', + shadow: '{focus.ring.shadow}' + } }, - tabPanel: { + tabpanel: { background: '{content.background}', - color: '{content.color}' + color: '{content.color}', + padding: '0.875rem 1.125rem 1.125rem 1.125rem' }, navButton: { background: '{content.background}', color: '{text.muted.color}', - hoverColor: '{text.color}' + hoverColor: '{text.color}', + width: '2.5rem', + focusRing: { + width: '{focus.ring.width}', + style: '{focus.ring.style}', + color: '{focus.ring.color}', + offset: '-1px', + shadow: '{focus.ring.shadow}' + } + }, + activeBar: { + height: '1px', + bottom: '-1px', + background: '{primary.color}' }, colorScheme: { light: { diff --git a/components/lib/themes/lara/tabmenu/index.js b/components/lib/themes/lara/tabmenu/index.js index b52c02775..9211ada28 100644 --- a/components/lib/themes/lara/tabmenu/index.js +++ b/components/lib/themes/lara/tabmenu/index.js @@ -14,7 +14,6 @@ export default { activeColor: '{primary.color}', padding: '1rem 1.25rem', fontWeight: '600', - borderRadius: '0', margin: '0', gap: '0.5rem', focusRing: { @@ -39,14 +38,14 @@ export default { light: { item: { background: '{surface.100}', - hoverBackground: '{surface.100}', + hoverBackground: '{surface.200}', activeBackground: '{surface.0}' } }, dark: { item: { background: '{surface.800}', - hoverBackground: '{surface.800}', + hoverBackground: '{surface.700}', activeBackground: '{surface.900}' } } diff --git a/components/lib/themes/lara/tabs/index.js b/components/lib/themes/lara/tabs/index.js index 00024c7bb..38b284ddb 100644 --- a/components/lib/themes/lara/tabs/index.js +++ b/components/lib/themes/lara/tabs/index.js @@ -1,33 +1,70 @@ export default { - tabList: { + tablist: { + borderWidth: '0', background: '{content.background}', borderColor: '{content.border.color}' }, tab: { - borderColor: '{content.border.color}', + borderWidth: '2px 0 0 0', + borderColor: 'transparent', + hoverBorderColor: 'transparent', activeBorderColor: '{primary.color}', color: '{text.muted.color}', hoverColor: '{text.color}', - activeColor: '{primary.color}' + activeColor: '{primary.color}', + padding: '1rem 1.25rem', + fontWeight: '600', + margin: '0', + focusRing: { + width: '{focus.ring.width}', + style: '{focus.ring.style}', + color: '{focus.ring.color}', + offset: '{focus.ring.offset}', + shadow: 'inset {focus.ring.shadow}' + } }, - tabPanel: { + tabpanel: { background: '{content.background}', - color: '{content.color}' + color: '{content.color}', + padding: '0.875rem 1.125rem 1.125rem 1.125rem' }, navButton: { background: '{content.background}', color: '{text.muted.color}', - hoverColor: '{text.color}' + hoverColor: '{text.color}', + width: '2.5rem', + focusRing: { + width: '{focus.ring.width}', + style: '{focus.ring.style}', + color: '{focus.ring.color}', + offset: '{focus.ring.offset}', + shadow: 'inset {focus.ring.shadow}' + } + }, + activeBar: { + height: '0', + bottom: '0', + background: 'transparent' }, colorScheme: { light: { navButton: { - boxShadow: '0px 0px 10px 50px rgba(255, 255, 255, 0.6)' + shadow: '0px 0px 10px 50px rgba(255, 255, 255, 0.6)' + }, + tab: { + background: '{surface.100}', + hoverBackground: '{surface.200}', + activeBackground: '{surface.0}' } }, dark: { navButton: { - boxShadow: '0px 0px 10px 50px color-mix(in srgb, {content.background}, transparent 50%)' + shadow: '0px 0px 10px 50px color-mix(in srgb, {content.background}, transparent 50%)' + }, + tab: { + background: '{surface.800}', + hoverBackground: '{surface.700}', + activeBackground: '{surface.900}' } } }