diff --git a/packages/Core/src/theme/tabs.ts b/packages/Core/src/theme/tabs.ts index d51715061..b99e695e0 100644 --- 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 } panel: { horizontal: CSSObject vertical: CSSObject } - size: Record 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 index 2d5220d89..e61627fc9 100644 --- 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}; `