fix(Tabs): update gap small size

WTTJ · Oct 22, 2024 · 69cf0d6 · 69cf0d6
1 parent 3af9f68
commit 69cf0d6
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 13 deletions.
diff --git a/packages/Core/src/theme/tabs.ts b/packages/Core/src/theme/tabs.ts
@@ -16,12 +16,12 @@ export type ThemeTabs = {
     default: CSSObject
     disabled: CSSObject
     focus: CSSObject
+    size: Record<Size, CSSObject>
   }
   panel: {
     horizontal: CSSObject
     vertical: CSSObject
   }
-  size: Record<Size, CSSObject>
   tabsBorder: {
     horizontal: CSSObject
     vertical: CSSObject
@@ -44,7 +44,6 @@ export const getTabs = (theme: WuiTheme): ThemeTabs => {
       default: {
         color: colors['dark-700'],
         fontWeight: fontWeights.medium,
-        fontSize: fontSizes.md,
         textDecoration: 'none',
         lineHeight: lineHeights.md,
       },
@@ -57,6 +56,14 @@ export const getTabs = (theme: WuiTheme): ThemeTabs => {
       disabled: {
         color: colors['dark-400'],
       },
+      size: {
+        sm: {
+          fontSize: fontSizes.sm,
+        },
+        md: {
+          fontSize: fontSizes.md,
+        },
+      },
     },
     panel: {
       vertical: {
@@ -81,15 +88,6 @@ export const getTabs = (theme: WuiTheme): ThemeTabs => {
         width: borderWidths.md,
       },
     },
-    size: {
-      sm: {
-        marginRight: space.md,
-        fontSize: fontSizes.sm,
-      },
-      md: {
-        marginRight: space.xl,
-      },
-    },
     icon: {
       maxWidth: space.lg,
       maxHeight: space.lg,

diff --git a/packages/Tabs/src/styles.ts b/packages/Tabs/src/styles.ts
@@ -13,6 +13,7 @@ export const TabList = styled(Ariakit.TabList)<{ size: SizeOptions }>(
     overflow-x: auto;
     display: flex;
     border: 0;
+    gap: xl;
 
     &[aria-orientation='vertical'] {
       flex-direction: column;
@@ -21,8 +22,8 @@ export const TabList = styled(Ariakit.TabList)<{ size: SizeOptions }>(
 
     ${th('tabs.tabsBorder.horizontal')};
 
-    & > :not(:last-child) {
-      ${th(`tabs.size.${size}`)}
+    ${Tab} {
+      ${th(`tabs.item.size.${size}`)}
     }
     ${system};
   `