@nutui/nutui-react-taro 3.0.0-beta.0 → 3.0.0-beta.10

package/dist/es/packages/switch/style/switch.scss

@@ -1,12 +1,13 @@
 .nut-switch {
   cursor: pointer;
-  display: flex;
+  position: relative;
+  display: inline-flex;
   flex-direction: row;
   align-items: center;
-  width: $switch-width;
+  min-width: $switch-width;
   height: $switch-height;
   line-height: $switch-line-height;
-  background-color: $switch-open-background-color;
+  background-color: $switch-active-background-color;
   border-radius: $switch-border-radius;
   background-size: 100% 100%;
   background-repeat: no-repeat;
@@ -14,64 +15,79 @@
   flex: 0 0 auto; // 防止被压缩
 
   &-button {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: center;
-    height: $switch-inside-height;
-    width: $switch-inside-width;
-    transform: $switch-inside-close-transform;
+    height: calc($switch-height - $switch-border-width * 2);
+    width: calc($switch-height - $switch-border-width * 2);
     border-radius: $switch-inside-border-radius;
     background: $color-primary-text;
-    transition: transform 0.3s;
-    box-shadow: $switch-button-box-shadow;
+    transition: left 0.3s linear;
+    box-shadow: $switch-inside-box-shadow;
     &-open {
-      transform: $switch-inside-open-transform;
+      left: calc(100% - $switch-height + $switch-border-width);
       &-rtl {
-        transform: var(--nutui-switch-inside-open-transform, translateX(-18px));
+        left: $switch-border-width;
       }
     }
     &-close {
-      transform: $switch-inside-close-transform;
+      left: $switch-border-width;
       &-rtl {
-        transform: var(--nutui-switch-inside-close-transform, translateX(-2px));
+        left: calc(100% - $switch-height + $switch-border-width);
       }
     }
   }
 
   &-close {
-    background-color: $switch-close-background-color;
+    background-color: $switch-inactive-background-color;
     &-line {
-      width: 12px;
+      width: calc(($switch-height - $switch-border-width * 2) / 2);
       height: 2px;
-      background: $switch-close-line-background-color;
+      background: $switch-inactive-line-background-color;
       border-radius: 2px;
     }
   }
 
-  &-disabled {
-    background-color: $switch-open-disabled-background-color;
-    &-close {
-      background-color: $switch-close-disabled-background-color;
-    }
-  }
-
   &-label {
-    color: $color-primary-text;
-    font-size: $font-size-small;
-
+    display: inline-flex;
+    align-items: center;
+    height: 100%;
+    white-space: nowrap;
+    color: $switch-label-text-color;
+    font-size: $switch-label-font-size;
+    .nut-icon {
+      color: $switch-label-text-color;
+    }
     &-open {
-      transform: translateX(-18px);
+      margin: 0 calc($switch-height - $switch-border-width + 3px) 0 7px;
       &-rtl {
-        transform: translateX(18px);
+        margin: 0 7px 0 calc($switch-height - $switch-border-width + 3px);
       }
     }
 
     &-close {
-      transform: translateX(18px);
+      margin: 0 7px 0 calc($switch-height - $switch-border-width + 3px);
       &-rtl {
-        transform: translateX(-18px);
+        margin: 0 calc($switch-height - $switch-border-width + 3px) 0 7px;
       }
     }
+
+    &-close-disabled {
+      color: $switch-inactive-disabled-label-text-color;
+      .nut-icon {
+        color: $switch-inactive-disabled-label-text-color;
+      }
+    }
+  }
+
+  &-disabled {
+    background-color: $switch-active-disabled-background-color;
+    &-close {
+      background-color: $switch-inactive-disabled-background-color;
+    }
   }
 }

package/dist/es/packages/switch/switch.d.ts

@@ -5,8 +5,8 @@ export interface SwitchProps extends BasicComponent {
     checked: boolean;
     defaultChecked: boolean;
     disabled: boolean;
-    activeText: string;
-    inactiveText: string;
+    activeText: React.ReactNode;
+    inactiveText: React.ReactNode;
     onChange: (val: boolean, event: React.MouseEvent<Element, MouseEvent> | ITouchEvent) => void;
 }
 export declare const Switch: FunctionComponent<Partial<SwitchProps>>;

package/dist/es/packages/switch/switch.js

@@ -63,16 +63,8 @@ export var Switch = function(props) {
         ])
     }, !value && !activeText && /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, "-close-line")
-    }), activeText && /*#__PURE__*/ React.createElement(View, {
-        className: classNames([
-            [
-                "".concat(classPrefix, "-label")
-            ],
-            [
-                value ? "".concat(classPrefix, "-label-open") : "".concat(classPrefix, "-label-close")
-            ],
-            (_obj1 = {}, _define_property(_obj1, "".concat(classPrefix, "-label-open-rtl"), rtl && value), _define_property(_obj1, "".concat(classPrefix, "-button-close-rtl"), rtl && !value), _obj1)
-        ])
-    }, value ? activeText : inactiveText)));
+    })), activeText && /*#__PURE__*/ React.createElement(View, {
+        className: classNames("".concat(classPrefix, "-label"), (_obj1 = {}, _define_property(_obj1, "".concat(classPrefix, "-label-open"), value), _define_property(_obj1, "".concat(classPrefix, "-label-close"), !value), _define_property(_obj1, "".concat(classPrefix, "-label-open-rtl"), rtl && value), _define_property(_obj1, "".concat(classPrefix, "-label-close-rtl"), rtl && !value), _define_property(_obj1, "".concat(classPrefix, "-label-close-disabled"), disabled && !value), _obj1))
+    }, value ? activeText : inactiveText));
 };
 Switch.displayName = 'NutSwitch';

package/dist/es/packages/tabbar/style/style.css

@@ -1,73 +1,102 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-badge {
   position: relative;
-  display: inline-block;
+  display: inline-flex;
+  width: auto;
 }
 .nut-badge-icon {
-  position: absolute;
   display: flex;
   justify-content: center;
   align-items: center;
-  background: var(--nutui-badge-background-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%));
-  top: -10%;
-  right: -15%;
-  padding: var(--nutui-badge-icon-padding, 3px);
+  background: var(--nutui-badge-background-color, var(--nutui-brand-6));
+  padding: var(--nutui-badge-icon-padding, 2px);
   text-align: center;
-  border: var(--nutui-badge-border, 0px solid var(--nutui-color-primary-text, #ffffff));
-  border-radius: var(--nutui-badge-border-radius, var(--nutui-badge-height, 14px));
   z-index: var(--nutui-badge-z-index, 1);
 }
 .nut-badge-icon .nut-icon {
-  width: var(--nutui-badge-icon-size, 12px);
-  height: var(--nutui-badge-icon-size, 12px);
-  font-size: var(--nutui-badge-icon-size, 12px);
+  width: var(--nutui-badge-icon-size, 10px);
+  height: var(--nutui-badge-icon-size, 10px);
+  font-size: var(--nutui-badge-icon-size, 10px);
 }
-.nut-badge-sup {
-  height: var(--nutui-badge-height, 14px);
+.nut-badge-sup, .nut-badge-icon {
+  border-radius: var(--nutui-badge-border-radius, var(--nutui-badge-height, 14px));
+}
+.nut-badge-sup::after, .nut-badge-icon::after {
+  content: "";
   position: absolute;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: var(--nutui-badge-background-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%));
-  color: var(--nutui-badge-color, #fff);
-  padding: var(--nutui-badge-padding, 0 4px);
-  font-size: var(--nutui-badge-font-size, var(--nutui-font-size-1, 10px));
-  font-weight: normal;
-  text-align: center;
-  border: var(--nutui-badge-border, 0px solid var(--nutui-color-primary-text, #ffffff));
+  top: -50%;
+  bottom: -50%;
+  left: -50%;
+  right: -50%;
+  transform: scale(0.5);
+  border: var(--nutui-badge-border, 1px solid #ffffff);
   border-radius: var(--nutui-badge-border-radius, var(--nutui-badge-height, 14px));
-  min-width: var(--nutui-badge-min-width, 5px);
+}
+.nut-badge-sup {
+  display: inline-flex;
+  justify-content: center;
+  height: var(--nutui-badge-height, 14px);
+  min-width: var(--nutui-badge-min-width, 6px);
+  padding: var(--nutui-badge-padding, 1px 4px);
+  box-sizing: border-box;
+  color: var(--nutui-badge-color, #ffffff);
+  font-size: var(--nutui-badge-font-size, var(--nutui-font-size-xxs, 10px));
+  line-height: 12px;
   white-space: nowrap;
+  font-weight: normal;
+  vertical-align: middle;
+  background: var(--nutui-badge-background-color, var(--nutui-brand-6));
   z-index: 1;
 }
+.nut-badge-number {
+  font-family: "JD";
+  /* #ifdef harmony */
+  line-height: 12px;
+  /* #endif */
+  /* #ifndef harmony */
+  line-height: 13px;
+  /* #endif */
+}
 .nut-badge-one {
   height: var(--nutui-badge-height, 14px);
   width: var(--nutui-badge-height, 14px);
-  padding: 0;
 }
 .nut-badge-content {
-  transform: var(--nutui-badge-content-transform, translateY(-50%) translateX(100%));
+  position: absolute;
+  transform: var(--nutui-badge-content-transform, translate(50%, -50%));
 }
 .nut-badge-dot {
-  width: var(--nutui-badge-dot-width, 7px);
-  height: var(--nutui-badge-dot-width, 7px);
-  border: var(--nutui-badge-dot-border, 0px solid var(--nutui-color-primary-text, #ffffff));
-  border-radius: var(--nutui-badge-dot-width, 7px);
   padding: 0;
+  border-radius: 50%;
 }
-.nut-badge-outline .nut-badge-content {
-  background: var(--nutui-color-primary-text, #ffffff);
-  border: 1px solid var(--nutui-color-primary, #ff0f23);
-  color: var(--nutui-color-primary, #ff0f23);
+.nut-badge-dot::after {
+  border: var(--nutui-badge-dot-border, 1px solid #ffffff);
+  border-radius: 50%;
 }
-
-[dir=rtl] .nut-badge-icon,
-.nut-rtl .nut-badge-icon {
-  right: auto;
-  left: -15%;
+.nut-badge-dot-normal {
+  min-width: var(--nutui-badge-dot-width, 6px);
+  width: var(--nutui-badge-dot-width, 6px);
+  height: var(--nutui-badge-dot-width, 6px);
+}
+.nut-badge-dot-small {
+  min-width: var(--nutui-badge-dot-width, 4px);
+  width: var(--nutui-badge-dot-width, 4px);
+  height: var(--nutui-badge-dot-width, 4px);
+}
+.nut-badge-dot-large {
+  min-width: var(--nutui-badge-dot-width, 8px);
+  width: var(--nutui-badge-dot-width, 8px);
+  height: var(--nutui-badge-dot-width, 8px);
+}
+.nut-badge-outline {
+  background: #ffffff;
+  color: var(--nutui-badge-outline-color, var(--nutui-brand-6));
 }
-[dir=rtl] .nut-badge-content,
-.nut-rtl .nut-badge-content {
-  transform: var(--nutui-badge-content-transform, translateY(-50%) translateX(-100%));
+.nut-badge-outline::after {
+  border: var(--nutui-badge-outline-border, 1px solid var(--nutui-brand-6));
 }
 
 .nut-tabbar-item {
@@ -78,7 +107,7 @@
   flex: 1;
   text-align: center;
   text-decoration: none;
-  color: var(--nutui-tabbar-inactive-color, var(--nutui-gray-7, #1a1a1a));
+  color: var(--nutui-tabbar-inactive-color, var(--nutui-gray-7));
   height: 100%;
 }
 .nut-tabbar-item-icon-box {
@@ -89,29 +118,41 @@
   position: relative;
 }
 .nut-tabbar-item-icon-box .nut-icon {
-  width: 24px;
-  height: 24px;
-  font-size: 24px;
+  width: 22px;
+  height: 22px;
+  font-size: 22px;
 }
 .nut-tabbar-item-icon-box-nav {
   display: block;
-  font-size: var(--nutui-tabbar-text-font-size, var(--nutui-font-size-1, 10px));
+  color: var(--nutui-gray-6);
+  font-size: var(--nutui-tabbar-text-font-size, var(--nutui-font-size-xs, 11px));
+  line-height: var(--nutui-tabbar-text-font-size, var(--nutui-font-size-xs, 11px));
   margin-top: var(--nutui-tabbar-text-margin-top, 3px);
 }
 .nut-tabbar-item-icon-box-large {
-  font-size: var(--nutui-tabbar-text-large-font-size, var(--nutui-font-size-4, 16px));
+  font-size: var(--nutui-tabbar-text-large-font-size, var(--nutui-font-size-l, 16px));
   margin-top: 0;
   line-height: var(--nutui-tabbar-text-line-height, 20px);
   font-weight: var(--nutui-tabbar-text-large-font-weight, var(--nutui-font-weight, 400));
 }
 .nut-tabbar-item-active {
-  color: var(--nutui-tabbar-active-color, var(--nutui-color-primary, #ff0f23));
+  color: var(--nutui-tabbar-active-color, var(--nutui-brand-6));
 }
 .nut-tabbar-item-active .nut-tabbar-item-icon-box {
+  /* #ifdef harmony*/
+  color: var(--nutui-tabbar-active-color, var(--nutui-brand-6));
+  /* #endif*/
+  /* #ifndef harmony*/
   color: inherit;
+  /* #endif*/
 }
 .nut-tabbar-item-active .nut-tabbar-item-icon-box .nut-icon {
+  /* #ifdef harmony*/
+  color: var(--nutui-tabbar-active-color, var(--nutui-brand-6));
+  /* #endif*/
+  /* #ifndef harmony*/
   color: inherit;
+  /* #endif*/
 }
 
 .nut-tabbar {
@@ -125,7 +166,7 @@
   justify-content: center;
   align-items: center;
   box-sizing: border-box;
-  background: var(--nutui-gray-1, #ffffff);
+  background: var(--nutui-gray-1);
 }
 .nut-tabbar-wrap {
   width: 100%;

package/dist/es/packages/tabbar/tabbar.d.ts

@@ -2,41 +2,13 @@ import { FunctionComponent } from 'react';
 import { BasicComponent } from "../../utils/typings";
 import TabbarItem from "../tabbaritem/index";
 export interface TabbarProps extends BasicComponent {
-    /**
-    * 默认选中的标签的索引值
-    * @default 0
-    */
-    defaultValue: number
-    /**
-    * 选中的标签的索引值
-    * @default -
-    */
-    value?: number
-    /**
-    * 是否固定在页面底部，为 true 时默认开启 safeArea
-    * @default false
-    */
-    fixed: boolean
-    /**
-    * icon未激活的颜色
-    * @default #7d7e80
-    */
-    inactiveColor: string
-    /**
-    * icon激活的颜色
-    * @default #1989fa
-    */
-    activeColor: string
-    /**
-    * 是否开启iphone系列全面屏底部安全区适配
-    * @default false
-    */
-    safeArea: boolean
-    /**
-    * 切换页签时触发事件
-    * @default -
-    */
-    onSwitch: (value: number) => void
+    defaultValue: number;
+    value?: number;
+    fixed: boolean;
+    inactiveColor: string;
+    activeColor: string;
+    safeArea: boolean;
+    onSwitch: (value: number) => void;
 }
 export declare const Tabbar: FunctionComponent<Partial<TabbarProps>> & {
     Item: typeof TabbarItem;

package/dist/es/packages/tabbar/tabbar.js

@@ -4,6 +4,7 @@ import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import React from "react";
 import classNames from "classnames";
+import { View } from "@tarojs/components";
 import { ComponentDefaults } from "../../utils/typings";
 import { usePropsValue } from "../../utils/use-props-value";
 import TabbarItem from "../tabbaritem/index";
@@ -25,10 +26,10 @@ export var Tabbar = function(props) {
         finalValue: 0,
         onChange: onSwitch
     }), 2), selectIndex = _usePropsValue[0], setSelectIndex = _usePropsValue[1];
-    return /*#__PURE__*/ React.createElement("div", {
+    return /*#__PURE__*/ React.createElement(View, {
         className: classNames(classPrefix, _define_property({}, "".concat(classPrefix, "-fixed"), fixed), className),
         style: style
-    }, /*#__PURE__*/ React.createElement("div", {
+    }, /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, "-wrap")
     }, /*#__PURE__*/ React.createElement(TabbarContext.Provider, {
         value: {
@@ -42,7 +43,7 @@ export var Tabbar = function(props) {
         return /*#__PURE__*/ React.cloneElement(child, _object_spread_props(_object_spread({}, child.props), {
             index: index
         }));
-    }))), (fixed || safeArea) && /*#__PURE__*/ React.createElement("div", {
+    }))), (fixed || safeArea) && /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, "-safe-area")
     }));
 };

package/dist/es/packages/tabbaritem/style/style.css

@@ -1,73 +1,102 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-badge {
   position: relative;
-  display: inline-block;
+  display: inline-flex;
+  width: auto;
 }
 .nut-badge-icon {
-  position: absolute;
   display: flex;
   justify-content: center;
   align-items: center;
-  background: var(--nutui-badge-background-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%));
-  top: -10%;
-  right: -15%;
-  padding: var(--nutui-badge-icon-padding, 3px);
+  background: var(--nutui-badge-background-color, var(--nutui-brand-6));
+  padding: var(--nutui-badge-icon-padding, 2px);
   text-align: center;
-  border: var(--nutui-badge-border, 0px solid var(--nutui-color-primary-text, #ffffff));
-  border-radius: var(--nutui-badge-border-radius, var(--nutui-badge-height, 14px));
   z-index: var(--nutui-badge-z-index, 1);
 }
 .nut-badge-icon .nut-icon {
-  width: var(--nutui-badge-icon-size, 12px);
-  height: var(--nutui-badge-icon-size, 12px);
-  font-size: var(--nutui-badge-icon-size, 12px);
+  width: var(--nutui-badge-icon-size, 10px);
+  height: var(--nutui-badge-icon-size, 10px);
+  font-size: var(--nutui-badge-icon-size, 10px);
 }
-.nut-badge-sup {
-  height: var(--nutui-badge-height, 14px);
+.nut-badge-sup, .nut-badge-icon {
+  border-radius: var(--nutui-badge-border-radius, var(--nutui-badge-height, 14px));
+}
+.nut-badge-sup::after, .nut-badge-icon::after {
+  content: "";
   position: absolute;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: var(--nutui-badge-background-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%));
-  color: var(--nutui-badge-color, #fff);
-  padding: var(--nutui-badge-padding, 0 4px);
-  font-size: var(--nutui-badge-font-size, var(--nutui-font-size-1, 10px));
-  font-weight: normal;
-  text-align: center;
-  border: var(--nutui-badge-border, 0px solid var(--nutui-color-primary-text, #ffffff));
+  top: -50%;
+  bottom: -50%;
+  left: -50%;
+  right: -50%;
+  transform: scale(0.5);
+  border: var(--nutui-badge-border, 1px solid #ffffff);
   border-radius: var(--nutui-badge-border-radius, var(--nutui-badge-height, 14px));
-  min-width: var(--nutui-badge-min-width, 5px);
+}
+.nut-badge-sup {
+  display: inline-flex;
+  justify-content: center;
+  height: var(--nutui-badge-height, 14px);
+  min-width: var(--nutui-badge-min-width, 6px);
+  padding: var(--nutui-badge-padding, 1px 4px);
+  box-sizing: border-box;
+  color: var(--nutui-badge-color, #ffffff);
+  font-size: var(--nutui-badge-font-size, var(--nutui-font-size-xxs, 10px));
+  line-height: 12px;
   white-space: nowrap;
+  font-weight: normal;
+  vertical-align: middle;
+  background: var(--nutui-badge-background-color, var(--nutui-brand-6));
   z-index: 1;
 }
+.nut-badge-number {
+  font-family: "JD";
+  /* #ifdef harmony */
+  line-height: 12px;
+  /* #endif */
+  /* #ifndef harmony */
+  line-height: 13px;
+  /* #endif */
+}
 .nut-badge-one {
   height: var(--nutui-badge-height, 14px);
   width: var(--nutui-badge-height, 14px);
-  padding: 0;
 }
 .nut-badge-content {
-  transform: var(--nutui-badge-content-transform, translateY(-50%) translateX(100%));
+  position: absolute;
+  transform: var(--nutui-badge-content-transform, translate(50%, -50%));
 }
 .nut-badge-dot {
-  width: var(--nutui-badge-dot-width, 7px);
-  height: var(--nutui-badge-dot-width, 7px);
-  border: var(--nutui-badge-dot-border, 0px solid var(--nutui-color-primary-text, #ffffff));
-  border-radius: var(--nutui-badge-dot-width, 7px);
   padding: 0;
+  border-radius: 50%;
 }
-.nut-badge-outline .nut-badge-content {
-  background: var(--nutui-color-primary-text, #ffffff);
-  border: 1px solid var(--nutui-color-primary, #ff0f23);
-  color: var(--nutui-color-primary, #ff0f23);
+.nut-badge-dot::after {
+  border: var(--nutui-badge-dot-border, 1px solid #ffffff);
+  border-radius: 50%;
 }
-
-[dir=rtl] .nut-badge-icon,
-.nut-rtl .nut-badge-icon {
-  right: auto;
-  left: -15%;
+.nut-badge-dot-normal {
+  min-width: var(--nutui-badge-dot-width, 6px);
+  width: var(--nutui-badge-dot-width, 6px);
+  height: var(--nutui-badge-dot-width, 6px);
+}
+.nut-badge-dot-small {
+  min-width: var(--nutui-badge-dot-width, 4px);
+  width: var(--nutui-badge-dot-width, 4px);
+  height: var(--nutui-badge-dot-width, 4px);
+}
+.nut-badge-dot-large {
+  min-width: var(--nutui-badge-dot-width, 8px);
+  width: var(--nutui-badge-dot-width, 8px);
+  height: var(--nutui-badge-dot-width, 8px);
+}
+.nut-badge-outline {
+  background: #ffffff;
+  color: var(--nutui-badge-outline-color, var(--nutui-brand-6));
 }
-[dir=rtl] .nut-badge-content,
-.nut-rtl .nut-badge-content {
-  transform: var(--nutui-badge-content-transform, translateY(-50%) translateX(-100%));
+.nut-badge-outline::after {
+  border: var(--nutui-badge-outline-border, 1px solid var(--nutui-brand-6));
 }
 
 .nut-tabbar-item {
@@ -78,7 +107,7 @@
   flex: 1;
   text-align: center;
   text-decoration: none;
-  color: var(--nutui-tabbar-inactive-color, var(--nutui-gray-7, #1a1a1a));
+  color: var(--nutui-tabbar-inactive-color, var(--nutui-gray-7));
   height: 100%;
 }
 .nut-tabbar-item-icon-box {
@@ -89,27 +118,39 @@
   position: relative;
 }
 .nut-tabbar-item-icon-box .nut-icon {
-  width: 24px;
-  height: 24px;
-  font-size: 24px;
+  width: 22px;
+  height: 22px;
+  font-size: 22px;
 }
 .nut-tabbar-item-icon-box-nav {
   display: block;
-  font-size: var(--nutui-tabbar-text-font-size, var(--nutui-font-size-1, 10px));
+  color: var(--nutui-gray-6);
+  font-size: var(--nutui-tabbar-text-font-size, var(--nutui-font-size-xs, 11px));
+  line-height: var(--nutui-tabbar-text-font-size, var(--nutui-font-size-xs, 11px));
   margin-top: var(--nutui-tabbar-text-margin-top, 3px);
 }
 .nut-tabbar-item-icon-box-large {
-  font-size: var(--nutui-tabbar-text-large-font-size, var(--nutui-font-size-4, 16px));
+  font-size: var(--nutui-tabbar-text-large-font-size, var(--nutui-font-size-l, 16px));
   margin-top: 0;
   line-height: var(--nutui-tabbar-text-line-height, 20px);
   font-weight: var(--nutui-tabbar-text-large-font-weight, var(--nutui-font-weight, 400));
 }
 .nut-tabbar-item-active {
-  color: var(--nutui-tabbar-active-color, var(--nutui-color-primary, #ff0f23));
+  color: var(--nutui-tabbar-active-color, var(--nutui-brand-6));
 }
 .nut-tabbar-item-active .nut-tabbar-item-icon-box {
+  /* #ifdef harmony*/
+  color: var(--nutui-tabbar-active-color, var(--nutui-brand-6));
+  /* #endif*/
+  /* #ifndef harmony*/
   color: inherit;
+  /* #endif*/
 }
 .nut-tabbar-item-active .nut-tabbar-item-icon-box .nut-icon {
+  /* #ifdef harmony*/
+  color: var(--nutui-tabbar-active-color, var(--nutui-brand-6));
+  /* #endif*/
+  /* #ifndef harmony*/
   color: inherit;
+  /* #endif*/
 }