From 51d78715947493e1e6065e417f6fb13dddd8c93b Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sat, 11 May 2024 19:45:10 +0300
Subject: [PATCH] Tokens for Tabs

---
 components/lib/tabmenu/style/TabMenuStyle.js |  3 +-
 components/lib/tabs/style/TabsStyle.js       | 66 +++++++++++---------
 components/lib/themes/aura/tabmenu/index.js  |  1 -
 components/lib/themes/aura/tabs/index.js     | 41 ++++++++++--
 components/lib/themes/lara/tabmenu/index.js  |  5 +-
 components/lib/themes/lara/tabs/index.js     | 53 +++++++++++++---
 6 files changed, 121 insertions(+), 48 deletions(-)

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