[tabs] :less to cssinjs (#6288)

* update

* switch

* Style adjustment

* refactor(Card): less to cssinjs

* tabs: less to cssinjs 开发ing

* add function cssinjs

* Eliminate irrelevant code

* Eliminate irrelevant code 2

* update components

* Eliminate irrelevant input  code

components/style.ts

@@ -8,7 +8,7 @@ import './radio/style';
 // import './pagination/style';
 // import './avatar/style';
 // import './badge/style';
-import './tabs/style';
+//import './tabs/style';
 // import './input/style';
 // import './tooltip/style';
 // import './popover/style';

components/tabs/src/Tabs.tsx

@@ -28,7 +28,7 @@ import pick from 'lodash-es/pick';
 import PropTypes from '../../_util/vue-types';
 import type { MouseEventHandler } from '../../_util/EventInterface';
 import omit from '../../_util/omit';
-
+import useStyle from '../style';
 export type TabsType = 'line' | 'card' | 'editable-card';
 export type TabsPosition = 'top' | 'right' | 'bottom' | 'left';
 
@@ -155,6 +155,7 @@ const InternalTabs = defineComponent({
       '`tabBarExtraContent` slot is deprecated. Please use `rightExtra` slot instead.',
     );
     const { prefixCls, direction, size, rootPrefixCls } = useConfigInject('tabs', props);
+    const [wrapSSR, hashId] = useStyle(prefixCls);
     const rtl = computed(() => direction.value === 'rtl');
     const mergedAnimated = computed<AnimatedConfig>(() => {
       const { animated, tabPosition } = props;
@@ -297,7 +298,7 @@ const InternalTabs = defineComponent({
       }
       const pre = prefixCls.value;
 
-      return (
+      return wrapSSR(
         <div
           {...attrs}
           id={id}
@@ -305,6 +306,7 @@ const InternalTabs = defineComponent({
             pre,
             `${pre}-${mergedTabPosition.value}`,
             {
+              [hashId.value]: true,
               [`${pre}-${size.value}`]: size.value,
               [`${pre}-card`]: ['card', 'editable-card'].includes(type as string),
               [`${pre}-editable-card`]: type === 'editable-card',
@@ -322,7 +324,7 @@ const InternalTabs = defineComponent({
             {...sharedProps}
             animated={mergedAnimated.value}
           />
-        </div>
+        </div>,
       );
     };
   },

components/tabs/style/card.less

@@ -1,98 +0,0 @@
-@import '../../style/themes/index';
-@import '../../style/mixins/index';
-
-@tab-prefix-cls: ~'@{ant-prefix}-tabs';
-
-.@{tab-prefix-cls}-card {
-  > .@{tab-prefix-cls}-nav,
-  > div > .@{tab-prefix-cls}-nav {
-    .@{tab-prefix-cls}-tab {
-      margin: 0;
-      padding: @tabs-card-horizontal-padding;
-      background: @tabs-card-head-background;
-      border: @border-width-base @border-style-base @border-color-split;
-      transition: all @animation-duration-slow @ease-in-out;
-
-      &-active {
-        color: @tabs-card-active-color;
-        background: @component-background;
-      }
-    }
-
-    .@{tab-prefix-cls}-ink-bar {
-      visibility: hidden;
-    }
-  }
-
-  // ========================== Top & Bottom ==========================
-  &.@{tab-prefix-cls}-top,
-  &.@{tab-prefix-cls}-bottom {
-    > .@{tab-prefix-cls}-nav,
-    > div > .@{tab-prefix-cls}-nav {
-      .@{tab-prefix-cls}-tab + .@{tab-prefix-cls}-tab {
-        margin-left: @tabs-card-gutter;
-      }
-    }
-  }
-
-  &.@{tab-prefix-cls}-top {
-    > .@{tab-prefix-cls}-nav,
-    > div > .@{tab-prefix-cls}-nav {
-      .@{tab-prefix-cls}-tab {
-        border-radius: @border-radius-base @border-radius-base 0 0;
-
-        &-active {
-          border-bottom-color: @component-background;
-        }
-      }
-    }
-  }
-  &.@{tab-prefix-cls}-bottom {
-    > .@{tab-prefix-cls}-nav,
-    > div > .@{tab-prefix-cls}-nav {
-      .@{tab-prefix-cls}-tab {
-        border-radius: 0 0 @border-radius-base @border-radius-base;
-
-        &-active {
-          border-top-color: @component-background;
-        }
-      }
-    }
-  }
-
-  // ========================== Left & Right ==========================
-  &.@{tab-prefix-cls}-left,
-  &.@{tab-prefix-cls}-right {
-    > .@{tab-prefix-cls}-nav,
-    > div > .@{tab-prefix-cls}-nav {
-      .@{tab-prefix-cls}-tab + .@{tab-prefix-cls}-tab {
-        margin-top: @tabs-card-gutter;
-      }
-    }
-  }
-
-  &.@{tab-prefix-cls}-left {
-    > .@{tab-prefix-cls}-nav,
-    > div > .@{tab-prefix-cls}-nav {
-      .@{tab-prefix-cls}-tab {
-        border-radius: @border-radius-base 0 0 @border-radius-base;
-
-        &-active {
-          border-right-color: @component-background;
-        }
-      }
-    }
-  }
-  &.@{tab-prefix-cls}-right {
-    > .@{tab-prefix-cls}-nav,
-    > div > .@{tab-prefix-cls}-nav {
-      .@{tab-prefix-cls}-tab {
-        border-radius: 0 @border-radius-base @border-radius-base 0;
-
-        &-active {
-          border-left-color: @component-background;
-        }
-      }
-    }
-  }
-}

components/tabs/style/card.tsx

@@ -0,0 +1,101 @@
+import type { CSSObject } from '../../_util/cssinjs';
+
+export const tabsCardStyle:{tabsCardGutter:string}={
+  tabsCardGutter: '2px'
+}
+export const genTabscardStyle = (token): CSSObject => {
+  const { componentCls } = token;
+
+  return {
+    [` ${componentCls}-nav,
+     div > ${componentCls}-nav `]: {
+      [`${componentCls}-tab `]: {
+        margin: 0,
+        background: `${token.colorFillAlter}`,
+        padding: `${token.paddingXS}px ${token.padding}px`,
+        border:`${token.lineWidth}px ${token.colorBorder}   ${token.lineType} `, 
+        transition: `all ${token.motionDurationSlow} ${token.motionEaseInOut} `,
+
+        [`&-active `]: {
+          color: `  ${token.colorInfoActive}`,
+          background: `${token.colorBgContainer}`,
+        },
+      },
+
+      [`${componentCls}-ink-bar`]: {
+        visibility: `hidden`,
+      },
+    },
+
+    // ========================== Top & Bottom ==========================
+    [`&${componentCls}-top,
+    &${componentCls}-bottom`]: {
+      [`${componentCls}-nav,
+       div > ${componentCls}-nav `]: {
+        [` ${componentCls}-tab + ${componentCls}-tab `]: {
+          marginLeft: `${tabsCardStyle.tabsCardGutter} `,
+        },
+      },
+    },
+
+    [`&${componentCls}-top `]: {
+      [`${componentCls}-nav,
+       div > ${componentCls}-nav `]: {
+        [`${componentCls}-tab `]: {
+          borderRadius: ` ${token.radiusBase}px  ${token.radiusBase}px 0 0`,
+          [`&-active `]: {
+            borderBottomColor: `${token.colorBgContainer}`,
+          },
+        },
+      },
+    },
+    [`&${componentCls}-bottom`]: {
+      [`${componentCls}-nav,
+       div > ${componentCls}-nav`]: {
+        [` ${componentCls}-tab `]: {
+          borderRadius: `0 0 ${token.radiusBase}px ${token.radiusBase}px`,
+
+          [` &-active `]: {
+            borderTopColor:  `${token.colorBgContainer}`,
+          },
+        },
+      },
+    },
+
+    // ========================== Left & Right ==========================
+    [`&${componentCls}-left,
+    &${componentCls}-right`]: {
+      [`   ${componentCls}-nav,
+       div > ${componentCls}-nav `]: {
+        [`   ${componentCls}-tab + ${componentCls}-tab`]: {
+          marginTop: `${tabsCardStyle.tabsCardGutter}`,
+        },
+      },
+    },
+
+    [`&${componentCls}-left`]: {
+      [` > ${componentCls}-nav,
+      > div > ${componentCls}-nav`]: {
+        [` ${componentCls}-tab`]: {
+          borderRadius: `${token.radiusBase}px 0 0 ${token.radiusBase}px`,
+
+          [` &-active`]: {
+            borderRightColor: `${token.colorBgContainer}`,
+          },
+        },
+      },
+    },
+    [` &${componentCls}-right `]: {
+      [` ${componentCls}-nav,
+       div > ${componentCls}-nav `]: {
+        [`    ${componentCls}-tab `]: {
+          borderRadius: `0 ${token.radiusBase}px ${token.radiusBase}px 0`,
+
+          [`   &-active `]: {
+            borderLeftColor:`${token.colorBgContainer}`,
+          },
+        },
+      },
+    },
+  };
+};

components/tabs/style/dropdown.less

@@ -1,82 +0,0 @@
-@import '../../style/themes/index';
-@import '../../style/mixins/index';
-
-@tab-prefix-cls: ~'@{ant-prefix}-tabs';
-
-.@{tab-prefix-cls}-dropdown {
-  .reset-component();
-
-  position: absolute;
-  top: -9999px;
-  left: -9999px;
-  z-index: @zindex-dropdown;
-  display: block;
-
-  &-hidden {
-    display: none;
-  }
-
-  &-menu {
-    max-height: 200px;
-    margin: 0;
-    padding: @dropdown-edge-child-vertical-padding 0;
-    overflow-x: hidden;
-    overflow-y: auto;
-    text-align: left;
-    list-style-type: none;
-    background-color: @dropdown-menu-bg;
-    background-clip: padding-box;
-    border-radius: @border-radius-base;
-    outline: none;
-    box-shadow: @box-shadow-base;
-
-    &-item {
-      display: flex;
-      align-items: center;
-      min-width: 120px;
-      margin: 0;
-      padding: @dropdown-vertical-padding @control-padding-horizontal;
-      overflow: hidden;
-      color: @text-color;
-      font-weight: normal;
-      font-size: @dropdown-font-size;
-      line-height: @dropdown-line-height;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      cursor: pointer;
-      transition: all 0.3s;
-
-      > span {
-        flex: 1;
-        white-space: nowrap;
-      }
-
-      &-remove {
-        flex: none;
-        margin-left: @margin-sm;
-        color: @text-color-secondary;
-        font-size: @font-size-sm;
-        background: transparent;
-        border: 0;
-        cursor: pointer;
-
-        &:hover {
-          color: @tabs-hover-color;
-        }
-      }
-
-      &:hover {
-        background: @item-hover-bg;
-      }
-
-      &-disabled {
-        &,
-        &:hover {
-          color: @disabled-color;
-          background: transparent;
-          cursor: not-allowed;
-        }
-      }
-    }
-  }
-}

components/tabs/style/dropdown.tsx

@@ -0,0 +1,81 @@
+import type { CSSObject } from '../../_util/cssinjs';
+import { resetComponent, clearFix } from '../../_style';
+const dropdownStyle={
+    dropdownVerticalPadding:'5px',
+    itemHoverBg:'#f5f5f5',
+}
+export const genTabsDropdownStyle = (token): CSSObject => {  
+  return {
+    ...resetComponent(token),
+    position: `absolute`,
+    top: `-9999px`,
+    left: `-9999px`,
+    zIndex:`  ${token.zIndexPopupBase}`,
+    display: `block`,
+   [` &-hidden`] :{
+      display: `none`,
+    },
+  
+  [`  &-menu `]:{
+      maxHeight:' 200px',
+      margin: 0,
+      padding: `${token.padding}px 0`,
+      overflowx: 'hidden',
+      overflowY: 'auto',
+      textAlign: 'left',
+      listStyleType: 'none',
+      backgroundColor: ` ${token.colorBgBase}`,
+      backgroundClip: `padding-box`,
+      borderRadius: ` ${token.radiusBase}px`,
+      outline: `none`,
+      boxShadow: `${token.boxShadow}`,
+  
+      [`&-item`]: {
+        display: `flex`,
+        alignItems: `center`,
+        minWidth: `120px`,
+        margin: 0,
+        padding: `${dropdownStyle.dropdownVerticalPadding}  ${token.paddingSM}px`,
+        overflow: `hidden`,
+        color:` ${token.colorText}`,
+        fontWeight: `normal`,
+        fontSize:` ${token.fontSize}px`,
+        lineHeight: `${token.lineHeight} `,
+        whiteSpace: `nowrap`,
+        textOverflow: `ellipsis`,
+        cursor: `pointer`,
+        transition: `all 0.3s`,
+  
+       [` > span`] :{
+          flex: 1,
+          whiteSpace: `nowrap`,
+        },
+  
+       [` &-remove `]:{
+          flex: `none`,
+          marginLeft:` ${token.marginSM}px`,
+          color:`  ${token.colorTextSecondary}`,
+          fontSize: `${token.fontSizeSM}px`,
+          background: `transparent`,
+          border: 0,
+          cursor: `pointer`,
+         [` &:hover `]:{
+            color:`${token.colorInfoHover}`,
+        }
+        },
+  
+       [`&:hover `]:{
+          background:` ${dropdownStyle.itemHoverBg}`,
+        },
+  
+      [`  &-disabled `]:{
+        [`  &,
+          &:hover`]: {
+            color:` ${token.colorTextDisabled}`,
+            background: `transparent`,
+            cursor: `not-allowed`,
+          }
+        }
+      }
+    }
+  }}

components/tabs/style/index.less

@@ -1,223 +0,0 @@
-@import '../../style/themes/index';
-@import '../../style/mixins/index';
-@import './size';
-@import './rtl';
-@import './position';
-@import './dropdown';
-@import './card';
-
-@tab-prefix-cls: ~'@{ant-prefix}-tabs';
-
-.@{tab-prefix-cls} {
-  .reset-component();
-
-  display: flex;
-
-  // ========================== Navigation ==========================
-  > .@{tab-prefix-cls}-nav,
-  > div > .@{tab-prefix-cls}-nav {
-    position: relative;
-    display: flex;
-    flex: none;
-    align-items: center;
-
-    .@{tab-prefix-cls}-nav-wrap {
-      position: relative;
-      display: inline-block;
-      display: flex;
-      flex: auto;
-      align-self: stretch;
-      overflow: hidden;
-      white-space: nowrap;
-      transform: translate(0); // Fix chrome render bug
-
-      // >>>>> Ping shadow
-      &::before,
-      &::after {
-        position: absolute;
-        z-index: 1;
-        opacity: 0;
-        transition: opacity @animation-duration-slow;
-        content: '';
-        pointer-events: none;
-      }
-    }
-
-    .@{tab-prefix-cls}-nav-list {
-      position: relative;
-      display: flex;
-      transition: transform @animation-duration-slow;
-    }
-
-    // >>>>>>>> Operations
-    .@{tab-prefix-cls}-nav-operations {
-      display: flex;
-      align-self: stretch;
-
-      &-hidden {
-        position: absolute;
-        visibility: hidden;
-        pointer-events: none;
-      }
-    }
-
-    .@{tab-prefix-cls}-nav-more {
-      position: relative;
-      padding: @tabs-card-horizontal-padding;
-      background: transparent;
-      border: 0;
-
-      &::after {
-        position: absolute;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        height: 5px;
-        transform: translateY(100%);
-        content: '';
-      }
-    }
-
-    .@{tab-prefix-cls}-nav-add {
-      min-width: @tabs-card-height;
-      margin-left: @tabs-card-gutter;
-      padding: 0 @padding-xs;
-      background: @tabs-card-head-background;
-      border: @border-width-base @border-style-base @border-color-split;
-      border-radius: @border-radius-base @border-radius-base 0 0;
-      outline: none;
-      cursor: pointer;
-      transition: all @animation-duration-slow @ease-in-out;
-
-      &:hover {
-        color: @tabs-hover-color;
-      }
-
-      &:active,
-      &:focus {
-        color: @tabs-active-color;
-      }
-    }
-  }
-
-  &-extra-content {
-    flex: none;
-  }
-
-  &-centered {
-    > .@{tab-prefix-cls}-nav,
-    > div > .@{tab-prefix-cls}-nav {
-      .@{tab-prefix-cls}-nav-wrap {
-        &:not([class*='@{tab-prefix-cls}-nav-wrap-ping']) {
-          justify-content: center;
-        }
-      }
-    }
-  }
-
-  // ============================ InkBar ============================
-  &-ink-bar {
-    position: absolute;
-    background: @tabs-ink-bar-color;
-    pointer-events: none;
-  }
-
-  // ============================= Tabs =============================
-  &-tab {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    padding: @tabs-horizontal-padding;
-    font-size: @tabs-title-font-size;
-    background: transparent;
-    border: 0;
-    outline: none;
-    cursor: pointer;
-
-    &-btn,
-    &-remove {
-      &:focus,
-      &:active {
-        color: @tabs-active-color;
-      }
-    }
-
-    &-btn {
-      outline: none;
-      transition: all 0.3s;
-    }
-
-    &-remove {
-      flex: none;
-      margin-right: -@margin-xss;
-      margin-left: @margin-xs;
-      color: @text-color-secondary;
-      font-size: @font-size-sm;
-      background: transparent;
-      border: none;
-      outline: none;
-      cursor: pointer;
-      transition: all @animation-duration-slow;
-
-      &:hover {
-        color: @heading-color;
-      }
-    }
-
-    &:hover {
-      color: @tabs-hover-color;
-    }
-
-    &&-active &-btn {
-      color: @tabs-highlight-color;
-      text-shadow: 0 0 0.25px currentcolor;
-    }
-
-    &&-disabled {
-      color: @disabled-color;
-      cursor: not-allowed;
-    }
-
-    &&-disabled &-btn,
-    &&-disabled &-remove {
-      &:focus,
-      &:active {
-        color: @disabled-color;
-      }
-    }
-
-    & &-remove .@{iconfont-css-prefix} {
-      margin: 0;
-    }
-
-    .@{iconfont-css-prefix} {
-      margin-right: @margin-sm;
-    }
-  }
-
-  &-tab + &-tab {
-    margin: @tabs-horizontal-margin;
-  }
-
-  // =========================== TabPanes ===========================
-  &-content {
-    &-holder {
-      flex: auto;
-      min-width: 0;
-      min-height: 0;
-    }
-
-    display: flex;
-    width: 100%;
-
-    &-animated {
-      transition: margin @animation-duration-slow;
-    }
-  }
-
-  &-tabpane {
-    flex: none;
-    width: 100%;
-    outline: none;
-  }
-}

components/tabs/style/index.tsx

@@ -1,2 +1,258 @@
-import '../../style/index.less';
+// import '../../style/index.less';
-import './index.less';
+// import './index.less';
+import type { CSSObject } from '../../_util/cssinjs';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
+import { resetComponent, clearFix } from '../../_style';
+import Token from 'markdown-it/lib/token';
+import { genTabsPositionStyle } from './position';
+import { genTabsSizeStyle } from './size';
+import { genRtlStyle } from './rtl';
+import { genTabsDropdownStyle } from './dropdown';
+import { genTabscardStyle } from './card';
+import {tabsCardStyle } from './card'
+
+/** Component only token. Which will handle additional calculation of alias token */
+export interface ComponentToken {}
+interface tabsToken extends FullToken<'Tabs'> {
+  tabsCardHeight: string;
+  tabsCardGutter: string;
+  tabsHorizontalMarginRtl: string;
+}
+// ============================== Shared ==============================
+
+export const genTabsSmallStyle = (token: tabsToken): CSSObject => {
+  const { componentCls } = token;
+
+  return  {
+    [componentCls]: {
+      ...genTabsSizeStyle(token),
+      ...genTabsPositionStyle(token),
+      ...resetComponent(token),
+      display: 'flex',
+      // ========================== Navigation ==========================
+      [`&-card`]: {
+        ...genTabscardStyle(token),
+      },
+      [`&-rtl`]: {
+        ...genRtlStyle(token),
+      },
+      
+      [`&-dropdown`]: {
+        ...genTabsDropdownStyle(token),
+      },
+      [`${componentCls}-nav,
+         div > ${componentCls}-nav`]: {
+        position: 'relative',
+        display: 'flex',
+        flex: 'none',
+        alignItems: 'center',
+        [`${componentCls}-nav-wrap`]: {
+          position: 'relative',
+          display: 'flex',
+          flex: 'auto',
+          alignSelf: 'stretch',
+          overflow: 'hidden',
+          whiteSpace: 'nowrap',
+          transform: 'translate(0)', // Fix chrome render bug
+          // >>>>> Ping shadow
+          [`&::before ,
+            &::after `]: {
+            position: 'absolute',
+            zIndex: 1,
+            opacity: 0,
+            transition: `opacity ${token.motionDurationSlow}`,
+            content: '""',
+            pointerEvents: 'none',
+          },
+        },
+
+        [`${componentCls}-nav-list`]: {
+          position: 'relative',
+          display: 'flex',
+          transition: `transform  ${token.motionDurationSlow}`,
+        },
+
+        // >>>>>>>> Operations
+        [`${componentCls}-nav-operations`]: {
+          display: 'flex',
+          alignSelf: 'stretch',
+          [`&-hidden`]: {
+            position: 'absolute',
+            visibility: 'hidden',
+            pointerEvents: 'none',
+          },
+        },
+
+        [`${componentCls}-nav-more`]: {
+          position: 'relative',
+          padding: `${token.paddingXS}px ${token.padding}px`,
+          background: 'transparent',
+          border: 0,
+          [`&::after`]: {
+            position: 'absolute',
+            right: 0,
+            bottom: 0,
+            left: 0,
+            height: '5px',
+            transform: 'translateY(100%)',
+            content: '""',
+          },
+        },
+        [`${componentCls}-nav-add`]: {
+          minWidth: `${token.tabsCardHeight}`,
+          marginLeft: `${token.tabsCardGutter}`,
+          padding: `0 ${token.paddingXS}px `,
+          background: `${token.colorFillAlter}`,
+          border: `${token.lineWidth}px ${token.colorBorder}   ${token.lineType} `,
+          borderRadius: ` ${token.borderRadius}e ${token.borderRadius} 0 0`,
+          outline: 'none',
+          cursor: 'pointer',
+          transition: `all ${token.motionDurationSlow} ${token.motionEaseInOut} `,
+          [` &:hover `]: {
+            color: `${token.colorPrimaryActive}`,
+          },
+
+          [` &:active,
+            &:focus`]: {
+            color: `${token.colorPrimaryActive}`,
+          },
+        },
+      },
+
+      [`${componentCls}-extra-content `]: {
+        flex: 'none',
+      },
+      [`&-centered`]: {
+        [`${componentCls}-nav,
+           div > ${componentCls}-nav`]: {
+          [`${componentCls}-nav-wrap`]: {
+            [`&:not([class*='@:${componentCls}-nav-wrap-ping'])`]: {
+              justifyContent: 'center',
+            },
+          },
+        },
+      },
+
+      // ============================ InkBar ============================
+      [`${componentCls}-ink-bar`]: {
+        position: 'absolute',
+        background: `${token.colorPrimary}`,
+        pointerEvents: 'none',
+      },
+
+      // ============================= Tabs =============================
+      [`${componentCls}-tab `]: {
+        position: 'relative',
+        display: 'inline-flex',
+        alignItems: 'center',
+        padding: `${token.paddingSM}px 0`,
+        fontSize: `${token.fontSize}px`,
+        background: 'transparent',
+        border: 0,
+        outline: 'none',
+        cursor: 'pointer',
+
+        [`&-btn,
+          &-remove`]: {
+          [` &:focus,
+            &:active `]: {
+            color: `${token.colorInfoActive}`,
+          },
+        },
+
+        [` &-btn `]: {
+          outline: 'none',
+          transition: `all 0.3s`,
+        },
+
+        [`&-remove `]: {
+          flex: 'none',
+          marginRight: `-${token.marginXXS}px`,
+          marginLeft: `${tabsCardStyle.tabsCardGutter}`,
+          color: `${token.colorTextSecondary} `,
+          fontSize: ` ${token.fontSizeSM}px`,
+          background: 'transparent',
+          border: 'none',
+          outline: 'none',
+          cursor: 'pointer',
+          transition: `all ${token.motionDurationSlow} `,
+
+          [` &:hover `]: {
+            color: `${token.colorTextHeading} `,
+          },
+        },
+
+        [` &:hover `]: {
+          color: `${token.colorLinkHover}`,
+        },
+
+        [`${componentCls}-active &-btn `]: {
+          color: `${token.colorHighlight}`,
+          textShadow: '0 0 0.25px currentcolor',
+        },
+
+        [`&-disabled `]: {
+          color: `${token.colorTextDisabled}`,
+          cursor: 'not-allowed',
+        },
+
+        [`&-disabled &-btn,
+          &-disabled &-remove`]: {
+          [` &:focus,
+            &:active `]: {
+            color: `${token.colorTextDisabled}`,
+          },
+        },
+
+        [` &-remove ${token.iconCls}`]: {
+          margin: 0,
+        },
+
+        [` ${token.iconCls} `]: {
+          marginRight: `${token.marginSM}px`,
+        },
+      },
+
+      [`${componentCls}-tab + ${componentCls}-tab `]: {
+        margin: `${token.tabsHorizontalMarginRtl}`,
+      },
+
+      // =========================== TabPanes ===========================
+      [`${componentCls}-content`]: {
+        [`&-holder`]: {
+          flex: 'auto',
+          minWidth: 0,
+          minHeight: 0,
+          
+        },
+        display: 'flex',
+        width: '100%',
+        [`${componentCls}-animated`]: {
+          transition: `margin ${token.motionDurationSlow}`,
+        },
+      },
+
+      [` ${componentCls}-tabpane `]: {
+        flex: 'none',
+        width: ' 100%',
+        outline: 'none',
+      },
+    },
+  };
+
+};
+
+// ============================== Export ==============================
+export default genComponentStyleHook(
+  'Tabs',
+  token => {
+    const tabsToken = mergeToken<tabsToken>(token, {
+      tabsCardHeight: '40px',
+      tabsCardGutter: '5px',
+      tabsHorizontalMarginRtl: '0 0 0 32px',
+    });
+    return [genTabsSmallStyle(tabsToken)];
+  },
+  {},
+);

components/tabs/style/position.less

@@ -1,198 +0,0 @@
-@import '../../style/themes/index';
-@tab-prefix-cls: ~'@{ant-prefix}-tabs';
-
-.@{tab-prefix-cls} {
-  // ========================== Top & Bottom ==========================
-  &-top,
-  &-bottom {
-    flex-direction: column;
-
-    > .@{tab-prefix-cls}-nav,
-    > div > .@{tab-prefix-cls}-nav {
-      margin: @tabs-bar-margin;
-
-      &::before {
-        position: absolute;
-        right: 0;
-        left: 0;
-        border-bottom: @border-width-base @border-style-base @border-color-split;
-        content: '';
-      }
-
-      .@{tab-prefix-cls}-ink-bar {
-        height: 2px;
-
-        &-animated {
-          transition: width @animation-duration-slow, left @animation-duration-slow,
-            right @animation-duration-slow;
-        }
-      }
-
-      .@{tab-prefix-cls}-nav-wrap {
-        &::before,
-        &::after {
-          top: 0;
-          bottom: 0;
-          width: 30px;
-        }
-
-        &::before {
-          left: 0;
-          box-shadow: inset 10px 0 8px -8px fade(@shadow-color, 8%);
-        }
-
-        &::after {
-          right: 0;
-          box-shadow: inset -10px 0 8px -8px fade(@shadow-color, 8%);
-        }
-
-        &.@{tab-prefix-cls}-nav-wrap-ping-left::before {
-          opacity: 1;
-        }
-        &.@{tab-prefix-cls}-nav-wrap-ping-right::after {
-          opacity: 1;
-        }
-      }
-    }
-  }
-
-  &-top {
-    > .@{tab-prefix-cls}-nav,
-    > div > .@{tab-prefix-cls}-nav {
-      &::before {
-        bottom: 0;
-      }
-
-      .@{tab-prefix-cls}-ink-bar {
-        bottom: 0;
-      }
-    }
-  }
-
-  &-bottom {
-    > .@{tab-prefix-cls}-nav,
-    > div > .@{tab-prefix-cls}-nav {
-      order: 1;
-      margin-top: @margin-md;
-      margin-bottom: 0;
-
-      &::before {
-        top: 0;
-      }
-
-      .@{tab-prefix-cls}-ink-bar {
-        top: 0;
-      }
-    }
-
-    > .@{tab-prefix-cls}-content-holder,
-    > div > .@{tab-prefix-cls}-content-holder {
-      order: 0;
-    }
-  }
-
-  // ========================== Left & Right ==========================
-  &-left,
-  &-right {
-    > .@{tab-prefix-cls}-nav,
-    > div > .@{tab-prefix-cls}-nav {
-      flex-direction: column;
-      min-width: 50px;
-
-      // >>>>>>>>>>> Tab
-      .@{tab-prefix-cls}-tab {
-        padding: @tabs-vertical-padding;
-        text-align: center;
-      }
-
-      .@{tab-prefix-cls}-tab + .@{tab-prefix-cls}-tab {
-        margin: @tabs-vertical-margin;
-      }
-
-      // >>>>>>>>>>> Nav
-      .@{tab-prefix-cls}-nav-wrap {
-        flex-direction: column;
-
-        &::before,
-        &::after {
-          right: 0;
-          left: 0;
-          height: 30px;
-        }
-
-        &::before {
-          top: 0;
-          box-shadow: inset 0 10px 8px -8px fade(@shadow-color, 8%);
-        }
-
-        &::after {
-          bottom: 0;
-          box-shadow: inset 0 -10px 8px -8px fade(@shadow-color, 8%);
-        }
-
-        &.@{tab-prefix-cls}-nav-wrap-ping-top::before {
-          opacity: 1;
-        }
-        &.@{tab-prefix-cls}-nav-wrap-ping-bottom::after {
-          opacity: 1;
-        }
-      }
-
-      // >>>>>>>>>>> Ink Bar
-      .@{tab-prefix-cls}-ink-bar {
-        width: 2px;
-
-        &-animated {
-          transition: height @animation-duration-slow, top @animation-duration-slow;
-        }
-      }
-
-      .@{tab-prefix-cls}-nav-list,
-      .@{tab-prefix-cls}-nav-operations {
-        flex: 1 0 auto; // fix safari scroll problem
-        flex-direction: column;
-      }
-    }
-  }
-
-  &-left {
-    > .@{tab-prefix-cls}-nav,
-    > div > .@{tab-prefix-cls}-nav {
-      .@{tab-prefix-cls}-ink-bar {
-        right: 0;
-      }
-    }
-
-    > .@{tab-prefix-cls}-content-holder,
-    > div > .@{tab-prefix-cls}-content-holder {
-      margin-left: -@border-width-base;
-      border-left: @border-width-base @border-style-base @border-color-split;
-
-      > .@{tab-prefix-cls}-content > .@{tab-prefix-cls}-tabpane {
-        padding-left: @padding-lg;
-      }
-    }
-  }
-
-  &-right {
-    > .@{tab-prefix-cls}-nav,
-    > div > .@{tab-prefix-cls}-nav {
-      order: 1;
-
-      .@{tab-prefix-cls}-ink-bar {
-        left: 0;
-      }
-    }
-
-    > .@{tab-prefix-cls}-content-holder,
-    > div > .@{tab-prefix-cls}-content-holder {
-      order: 0;
-      margin-right: -@border-width-base;
-      border-right: @border-width-base @border-style-base @border-color-split;
-
-      > .@{tab-prefix-cls}-content > .@{tab-prefix-cls}-tabpane {
-        padding-right: @padding-lg;
-      }
-    }
-  }
-}

components/tabs/style/position.tsx

@@ -0,0 +1,191 @@
+import type { CSSObject } from '../../_util/cssinjs';
+
+export const genTabsPositionStyle = (token): CSSObject => {
+  const { componentCls } = token;
+
+  return {
+    [`&-top,
+        &-bottom`]: {
+      flexDirection: 'column',
+      [`${componentCls}-nav, div >${componentCls}-nav`]: {
+        margin: ` 0 0 ${token.margin}px `,
+        [`&::before`]: {
+          position: 'absolute',
+          right:0,
+          left: 0,
+          borderBottom: `${token.lineWidth}px ${token.colorBorder}   ${token.lineType} `,
+          content: '""',
+        },
+        [`${componentCls}-ink-bar`]: {
+          height: ' 2px',
+          [`&-animated`]: {
+            transition: `width ${token.motionDurationSlow} , left ${token.motionDurationSlow},
+                  right `,
+          },
+        },
+
+        [`${componentCls}-nav-wrap`]: {
+          [`&::before,
+          &::after`]: {
+            top: 0,
+            bottom: 0,
+            width:'30px',
+          },
+
+          [` &::before`]: {
+            left: 0,
+            boxShadow: `${token.boxShadowTabsOverflowBottom}`,
+          },
+
+          [` &::after`]: {
+            right: 0,
+            boxShadow: `${token.boxShadowTabsOverflowRight}`,
+          },
+
+          [`&${componentCls}-nav-wrap-ping-left::before`]: {
+            opacity: 1,
+          },
+          [`&${componentCls}-nav-wrap-ping-right::after`]: {
+            opacity: 1,
+          },
+        },
+      },
+    },
+
+    [`&-top`]: {
+      [`${componentCls}-nav,
+      div >${componentCls}-nav`]: {
+        [`&::before`]: {
+          bottom: 0,
+        },
+
+        [`${componentCls}-ink-bar`]: {
+          bottom: 0,
+        },
+      },
+    },
+
+    [`&-bottom`]: {
+
+      [`${componentCls}-nav,
+           div >${componentCls}-nav`]: {
+        order: 1,
+        marginTop: `  ${token.margin}px`,
+        marginBottom: 0,
+        [` &::before`]: {
+          top: 0,
+        },
+
+        [`${componentCls}-ink-bar`]: {
+          top: 0,
+        },
+      },
+
+      [`${componentCls}-content-holder,
+           div >${componentCls}-content-holder`]: {
+        order: 0,
+      },
+    },
+
+    // ========================== Left & Right ==========================
+    [`&-left,
+       &-right`]: {
+      [`${componentCls}-nav, div>${componentCls}-nav`]: {
+        flexDirection: 'column',
+        minWidth: '50px',
+        // >>>>>>>>>>> Tab
+        [`${componentCls}-tab`]: {
+          padding: ` ${token.padding}px`,
+          textAlign: 'center',
+        },
+
+        [`${componentCls}-tab + ${componentCls}-tab`]: {
+          margin: `  ${token.margin}px 0 0 0`,
+        },
+
+        // >>>>>>>>>>> Nav
+        [`${componentCls}-nav-wrap`]: {
+          flexDirection: 'column',
+          [`&::before,
+          &::after`]: {
+            right: 0,
+            left: 0,
+            height: '30px',
+          },
+
+          [`&::before`]: {
+            top: 0,
+            boxShadow: `${token.boxShadowTabsOverflowTop}`,
+          },
+
+          [`&::after`]: {
+            bottom: 0,
+            boxShadow: `${token.boxShadowTabsOverflowBottom}`,
+          },
+
+          [`&${componentCls}-nav-wrap-ping-top::before`]: {
+            opacity: 1,
+          },
+          [`&${componentCls}-nav-wrap-ping-bottom::after`]: {
+            opacity: 1,
+          },
+        },
+
+        // >>>>>>>>>>> Ink Bar
+        [`${componentCls}-ink-bar`]: {
+          width: `2px`,
+
+          [`&-animated`]: {
+            transition: `height ${token.motionDurationSlow}, top ${token.motionDurationSlow}`,
+          },
+        },
+
+        [`${componentCls}-nav-list,
+        ${componentCls}-nav-operations`]: {
+          // color: '#fff',
+          flex: `1 0 auto`, // fix safari scroll problem
+          flexDirection: `column`,
+        },
+      },
+    },
+
+    [`&-left`]: {
+      [`${componentCls}-nav,
+           div >${componentCls}-nav`]: {
+        [`${componentCls}-ink-bar`]: {
+          right: 0,
+        },
+      },
+
+      [`${componentCls}-content-holder,
+           div >&-content-holder`]: {
+        marginLeft: `-${token.lineWidth}px`,
+        borderLeft: `${token.lineWidth}px ${token.colorBorder}   ${token.lineType} `,
+        [` ${componentCls}-content > ${componentCls}-tabpane`]: {
+          paddingLeft: `${token.paddingLG}px`,
+        },
+      },
+    },
+
+    [`&-right`]: {
+      [` ${componentCls}-nav,
+           div >${componentCls}-nav`]: {
+           order: 1,
+
+        [`${componentCls}-ink-bar`]: {
+          left: 0,
+        },
+      },
+      [`${componentCls}-content-holder,
+           div >${componentCls}-content-holder`]: {
+        order: 0,
+        marginLeft: ` -${token.lineWidth}px`,
+        borderRight: `${token.lineWidth}px ${token.colorBorder}   ${token.lineType} `,
+
+        [`${componentCls}-content >${componentCls}-tabpane`]: {
+          paddingLeft: ` ${token.paddingLG}px`,
+        },
+      },
+    },
+  };
+};

components/tabs/style/rtl.less

@@ -1,86 +0,0 @@
-@import '../../style/themes/index';
-@import '../../style/mixins/index';
-
-@tab-prefix-cls: ~'@{ant-prefix}-tabs';
-
-.@{tab-prefix-cls} {
-  &-rtl {
-    direction: rtl;
-
-    .@{tab-prefix-cls}-nav {
-      .@{tab-prefix-cls}-tab {
-        margin: @tabs-horizontal-margin-rtl;
-
-        &:last-of-type {
-          margin-left: 0;
-        }
-
-        .@{iconfont-css-prefix} {
-          margin-right: 0;
-          margin-left: @margin-sm;
-        }
-
-        .@{tab-prefix-cls}-tab-remove {
-          margin-right: @margin-xs;
-          margin-left: -@margin-xss;
-
-          .@{iconfont-css-prefix} {
-            margin: 0;
-          }
-        }
-      }
-    }
-
-    &.@{tab-prefix-cls}-left {
-      > .@{tab-prefix-cls}-nav {
-        order: 1;
-      }
-      > .@{tab-prefix-cls}-content-holder {
-        order: 0;
-      }
-    }
-
-    &.@{tab-prefix-cls}-right {
-      > .@{tab-prefix-cls}-nav {
-        order: 0;
-      }
-      > .@{tab-prefix-cls}-content-holder {
-        order: 1;
-      }
-    }
-  }
-
-  // ====================== Card ======================
-  &-card {
-    &.@{tab-prefix-cls}-top,
-    &.@{tab-prefix-cls}-bottom {
-      > .@{tab-prefix-cls}-nav,
-      > div > .@{tab-prefix-cls}-nav {
-        .@{tab-prefix-cls}-tab + .@{tab-prefix-cls}-tab {
-          .@{tab-prefix-cls}-rtl& {
-            margin-right: @tabs-card-gutter;
-            margin-left: 0;
-          }
-        }
-        .@{tab-prefix-cls}-nav-add {
-          .@{tab-prefix-cls}-rtl& {
-            margin-right: @tabs-card-gutter;
-            margin-left: 0;
-          }
-        }
-      }
-    }
-  }
-}
-
-.@{tab-prefix-cls}-dropdown {
-  &-rtl {
-    direction: rtl;
-  }
-
-  &-menu-item {
-    .@{tab-prefix-cls}-dropdown-rtl & {
-      text-align: right;
-    }
-  }
-}

components/tabs/style/rtl.tsx

@@ -0,0 +1,83 @@
+import type { CSSObject } from '../../_util/cssinjs';
+import {tabsCardStyle } from './card'
+export const genRtlStyle = (token): CSSObject => {
+  const { componentCls } = token;
+
+  return {
+    [`&-rtl `]: {
+      direction: 'rtl',
+      [`${componentCls}-nav `]: {
+        [`  ${componentCls}-tab `]: {
+          margin: ` ${token.tabsHorizontalMarginRtl}`,
+
+          [`   &:last-of-type`]: {
+            marginLeft: 0,
+          },
+
+          [` ${token.iconCls}`]: {
+            marginRight: 0,
+            marginLeft: `${token.marginSM}`,
+          },
+
+          [` ${componentCls}-tab-remove `]: {
+            marginRight: `${token.marginXS}`,
+            marginLeft: `${token.marginXXS}`,
+            [` ${token.iconCls} ${token.ico}`]: {
+              margin: 0,
+            },
+          },
+        },
+      },
+
+      [`& ${componentCls}-left`]: {
+        [`${componentCls}-nav`]: {
+          order: 1,
+        },
+        [`${componentCls}-content-holder `]: {
+          order: 0,
+        },
+      },
+
+      [` & ${componentCls}-right `]: {
+        [`${componentCls}-nav `]: {
+          order: 0,
+        },
+        [`${componentCls}-content-holder`]: {
+          order: 1,
+        },
+      },
+    },
+
+    // ====================== Card ======================
+    [`&-card`]: {
+      [` & ${componentCls}-top,
+      & ${componentCls}-bottom`]: {
+        [` ${componentCls}-nav,
+         div >${componentCls}-nav `]: {
+          [` ${componentCls}-tab +${componentCls}-tab`]: {
+            [` ${componentCls}-rtl& `]: {
+              marginRight: `${tabsCardStyle.tabsCardGutter}`,
+              marginLeft: 0,
+            },
+          },
+          [` ${componentCls}-nav-add`]: {
+            [` ${componentCls}-rtl& `]: {
+              marginRight: `${tabsCardStyle.tabsCardGutter}`,
+              marginLeft: 0,
+            },
+          },
+        },
+      },
+    },
+    [` ${componentCls}-dropdown `]: {
+      [`  &-rtl `]: {
+        direction: 'rtl',
+      },
+      [` &-menu-item `]: {
+        [`${componentCls}-dropdown-rtl & `]: {
+          textAlign: 'right',
+        },
+      },
+    },
+  };
+};

components/tabs/style/size.less

@@ -1,42 +0,0 @@
-@import '../../style/themes/index';
-@import '../../style/mixins/index';
-
-@tab-prefix-cls: ~'@{ant-prefix}-tabs';
-
-.@{tab-prefix-cls} {
-  &-small {
-    > .@{tab-prefix-cls}-nav {
-      .@{tab-prefix-cls}-tab {
-        padding: @tabs-horizontal-padding-sm;
-        font-size: @tabs-title-font-size-sm;
-      }
-    }
-  }
-
-  &-large {
-    > .@{tab-prefix-cls}-nav {
-      .@{tab-prefix-cls}-tab {
-        padding: @tabs-horizontal-padding-lg;
-        font-size: @tabs-title-font-size-lg;
-      }
-    }
-  }
-
-  &-card {
-    &.@{tab-prefix-cls}-small {
-      > .@{tab-prefix-cls}-nav {
-        .@{tab-prefix-cls}-tab {
-          padding: @tabs-card-horizontal-padding-sm;
-        }
-      }
-    }
-
-    &.@{tab-prefix-cls}-large {
-      > .@{tab-prefix-cls}-nav {
-        .@{tab-prefix-cls}-tab {
-          padding: @tabs-card-horizontal-padding-lg;
-        }
-      }
-    }
-  }
-}

components/tabs/style/size.tsx

@@ -0,0 +1,43 @@
+import type { CSSObject } from '../../_util/cssinjs';
+
+export const genTabsSizeStyle = (token): CSSObject => {
+  const { componentCls } = token;
+
+  return {
+    [`&-small`]: {
+      [`${componentCls}-nav`]: {
+        [`${componentCls}-tab`]: {
+          padding: ` ${token.paddingXS}px 0`,
+          fontSize: ` ${token.fontSize}px`,
+        },
+      },
+    },
+
+    [`&-large`]: {
+      [`${componentCls}-nav `]: {
+        [`  ${componentCls}-tab`]: {
+          padding: ` ${token.paddingLG}px 0`,
+          fontSize: ` ${token.fontSizeLG}px`,
+        },
+      },
+    },
+
+    [`&-card `]: {
+      [`& ${componentCls}-small `]: {
+        [`${componentCls}-nav`]: {
+          [`    ${componentCls}-tab`]: {
+            padding: ` ${token.paddingSM}px`,
+          },
+        },
+      },
+
+      [`&-large`]: {
+        [` > ${componentCls}-nav `]: {
+          [`${componentCls}-tab`]: {
+            padding: ` ${token.paddingLG}px 0`,
+          },
+        },
+      },
+    },
+  };
+};

components/theme/interface/components.ts

@@ -38,7 +38,7 @@ import type { ComponentToken as SpaceComponentToken } from '../../space/style';
 import type { ComponentToken as SpinComponentToken } from '../../spin/style';
 import type { ComponentToken as StepsComponentToken } from '../../steps/style';
 import type { ComponentToken as TableComponentToken } from '../../table/style';
-// import type { ComponentToken as TabsComponentToken } from '../../tabs/style';
+import type { ComponentToken as TabsComponentToken } from '../../tabs/style';
 import type { ComponentToken as TagComponentToken } from '../../tag/style';
 import type { ComponentToken as TimelineComponentToken } from '../../timeline/style';
 import type { ComponentToken as TooltipComponentToken } from '../../tooltip/style';
@@ -101,7 +101,7 @@ export interface ComponentTokenMap {
   Typography?: TypographyComponentToken;
   Timeline?: TimelineComponentToken;
   Transfer?: TransferComponentToken;
-  //   Tabs?: TabsComponentToken;
+  Tabs?: TabsComponentToken;
   Calendar?: CalendarComponentToken;
   Steps?: StepsComponentToken;
   Menu?: MenuComponentToken;