From 8d0a37abc13eadf811f9d31abd8fc44f780c9438 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 17 May 2024 17:19:53 +1000
Subject: [PATCH] feat(tabs): update default styling enclosed

---
 lib/components/tabs/tabs.stories.tsx |  2 +-
 lib/theme/components/tabs.ts         | 22 +++++++++++++++++++++-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/lib/components/tabs/tabs.stories.tsx b/lib/components/tabs/tabs.stories.tsx
index e78dae0..bfb607a 100644
--- a/lib/components/tabs/tabs.stories.tsx
+++ b/lib/components/tabs/tabs.stories.tsx
@@ -10,7 +10,7 @@ const meta: Meta<typeof Tabs> = {
   component: Tabs,
   args: {
     colorScheme: 'base',
-    variant: 'collapse',
+    variant: 'enclosed',
   },
 };
 
diff --git a/lib/theme/components/tabs.ts b/lib/theme/components/tabs.ts
index cfc51ef..e700ee3 100644
--- a/lib/theme/components/tabs.ts
+++ b/lib/theme/components/tabs.ts
@@ -99,14 +99,34 @@ const collapse = definePartsStyle(() => ({
   },
 }));
 
+const enclosed = definePartsStyle(() => ({
+  tab: {
+    fontWeight: 'semibold',
+    fontSize: 'sm',
+    color: 'base.300',
+    _hover: {
+      color: 'base.100',
+    },
+    _selected: {
+      borderColor: 'base.800',
+      borderBottomColor: 'base.900',
+      color: 'invokeBlue.300',
+      _hover: {
+        color: 'invokeBlue.100',
+      },
+    },
+  },
+}));
+
 export const tabsTheme = defineMultiStyleConfig({
   variants: {
     line,
     appTabs,
     collapse,
+    enclosed,
   },
   defaultProps: {
-    variant: 'line',
+    variant: 'enclosed',
     colorScheme: 'blue',
   },
 });