feat: Tabs support token (ant-design#44201)

ammar-knowledge · Aug 14, 2023 · 6de03ae · 6de03ae
1 parent 0a4463e
commit 6de03ae
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 0 deletions.
diff --git a/components/tabs/demo/component-token.tsx b/components/tabs/demo/component-token.tsx
@@ -22,6 +22,7 @@ const App: React.FC = () => (
           horizontalItemPaddingLG: `20px`,
           verticalItemPadding: `8px`,
           verticalItemMargin: `4px 0 0 0`,
+          itemColor: 'rgba(0,0,0,0.85)',
           itemSelectedColor: '#389e0d',
           itemHoverColor: '#d9f7be',
           itemActiveColor: '#b7eb8f',

diff --git a/components/tabs/style/index.ts b/components/tabs/style/index.ts
@@ -100,6 +100,11 @@ export interface ComponentToken {
    * @descEN Vertical margin of vertical tab item
    */
   verticalItemMargin: string;
+  /**
+   * @desc 标签文本颜色
+   * @descEN Text color of tab
+   */
+  itemColor: string;
   /**
    * @desc 标签激活态文本颜色
    * @descEN Text color of active tab
@@ -656,6 +661,7 @@ const genTabStyle: GenerateStyle<TabsToken, CSSObject> = (token: TabsToken) => {
     tabsHorizontalItemMargin,
     horizontalItemPadding,
     itemSelectedColor,
+    itemColor,
   } = token;
 
   const tabCls = `${componentCls}-tab`;
@@ -673,6 +679,7 @@ const genTabStyle: GenerateStyle<TabsToken, CSSObject> = (token: TabsToken) => {
       border: 0,
       outline: 'none',
       cursor: 'pointer',
+      color: itemColor,
       '&-btn, &-remove': {
         '&:focus:not(:focus-visible), &:active': {
           color: itemActiveColor,
@@ -1052,6 +1059,7 @@ export default genComponentStyleHook(
       horizontalItemPaddingLG: `${token.padding}px 0`,
       verticalItemPadding: `${token.paddingXS}px ${token.paddingLG}px`,
       verticalItemMargin: `${token.margin}px 0 0 0`,
+      itemColor: token.colorText,
       itemSelectedColor: token.colorPrimary,
       itemHoverColor: token.colorPrimaryHover,
       itemActiveColor: token.colorPrimaryActive,