feat(tabs): update default styling enclosed

invoke-ai · May 17, 2024 · 8d0a37a · 8d0a37a
1 parent 66e7799
commit 8d0a37a
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 2 deletions.
diff --git 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
@@ -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',
   },
 });