Tokens for Tabs

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')};

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')};
+    background: ${dt('tabs.tablist.background')};
-    border: 1px solid ${dt('tabs.tab.list.border.color')};
+    border-style: solid;
-    border-width: 0 0 1px 0;
+    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;
+    width: ${dt('tabs.nav.button.width')};
-    transition: color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
+    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')};
+    z-index: 1;
-    outline-offset: ${dt('focus.ring.offset')};
+    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')};
+    z-index: 1;
-    outline-offset: -1px;
+    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')};
+    background: ${dt('tabs.tabpanel.background')};
-    color: ${dt('tabs.tab.panel.color')};
+    color: ${dt('tabs.tabpanel.color')};
-    padding: 0.875rem 1.125rem 1.125rem 1.125rem;
+    padding: ${dt('tabs.tabpanel.padding')};
+    outline: 0 none;
 }
 
 .p-tablist-active-bar {
     z-index: 1;
     display: block;
     position: absolute;
-    bottom: -1px;
+    bottom: ${dt('tabs.active.bar.bottom')};
-    height: 1px;
+    height: ${dt('tabs.active.bar.height')};
-    background-color: ${dt('tabs.tab.active.border.color')};
+    background: ${dt('tabs.active.bar.background')};
     transition: 250ms cubic-bezier(0.35, 0, 0.25, 1);
 }
 `;

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: {

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: {

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}'
             }
         }

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}'
             }
         }
     }