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

package/dist/cjs/packages/switch/style/style.css

@@ -1,71 +1,91 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-switch {
   cursor: pointer;
-  display: flex;
+  position: relative;
+  display: inline-flex;
   flex-direction: row;
   align-items: center;
-  width: var(--nutui-switch-width, 40px);
-  height: var(--nutui-switch-height, 24px);
-  line-height: var(--nutui-switch-line-height, 24px);
-  background-color: var(--nutui-switch-open-background-color, var(--nutui-color-primary, #ff0f23));
-  border-radius: var(--nutui-switch-border-radius, 8px);
+  min-width: var(--nutui-switch-width, 46px);
+  height: var(--nutui-switch-height, 28px);
+  line-height: var(--nutui-switch-line-height, 28px);
+  background-color: var(--nutui-switch-active-background-color, var(--nutui-brand-6));
+  border-radius: var(--nutui-switch-border-radius, 50px);
   background-size: 100% 100%;
   background-repeat: no-repeat;
   background-position: center center;
   flex: 0 0 auto;
 }
 .nut-switch-button {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  height: var(--nutui-switch-inside-height, 20px);
-  width: var(--nutui-switch-inside-width, 20px);
-  transform: var(--nutui-switch-inside-close-transform, translateX(2px));
-  border-radius: var(--nutui-switch-inside-border-radius, var(--nutui-radius-s, 6px));
-  background: var(--nutui-color-primary-text, #ffffff);
-  transition: transform 0.3s;
-  box-shadow: var(--nutui-switch-box-shadow, 0 0 transparent);
+  height: calc(var(--nutui-switch-height, 28px) - var(--nutui-switch-border-width, 2px) * 2);
+  width: calc(var(--nutui-switch-height, 28px) - var(--nutui-switch-border-width, 2px) * 2);
+  border-radius: var(--nutui-switch-inside-border-radius, 50%);
+  background: #ffffff;
+  transition: left 0.3s linear;
+  box-shadow: var(--nutui-switch-inside-box-shadow, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));
 }
 .nut-switch-button-open {
-  transform: var(--nutui-switch-inside-open-transform, translateX(18px));
+  left: calc(100% - var(--nutui-switch-height, 28px) + var(--nutui-switch-border-width, 2px));
 }
 .nut-switch-button-open-rtl {
-  transform: var(--nutui-switch-inside-open-transform, translateX(-18px));
+  left: var(--nutui-switch-border-width, 2px);
 }
 .nut-switch-button-close {
-  transform: var(--nutui-switch-inside-close-transform, translateX(2px));
+  left: var(--nutui-switch-border-width, 2px);
 }
 .nut-switch-button-close-rtl {
-  transform: var(--nutui-switch-inside-close-transform, translateX(-2px));
+  left: calc(100% - var(--nutui-switch-height, 28px) + var(--nutui-switch-border-width, 2px));
 }
 .nut-switch-close {
-  background-color: var(--nutui-switch-close-background-color, var(--nutui-color-text-disabled, #c2c4cc));
+  background-color: var(--nutui-switch-inactive-background-color, var(--nutui-gray-4));
 }
 .nut-switch-close-line {
-  width: 12px;
+  width: calc((var(--nutui-switch-height, 28px) - var(--nutui-switch-border-width, 2px) * 2) / 2);
   height: 2px;
-  background: var(--nutui-switch-close-line-background-color, #fff);
+  background: var(--nutui-switch-inactive-line-background-color, #ffffff);
   border-radius: 2px;
 }
-.nut-switch-disabled {
-  background-color: var(--nutui-switch-open-disabled-background-color, var(--nutui-color-primary-disabled-special, #ffadbe));
-}
-.nut-switch-disabled-close {
-  background-color: var(--nutui-switch-close-disabled-background-color, var(--nutui-color-background, #f5f6fa));
-}
 .nut-switch-label {
-  color: var(--nutui-color-primary-text, #ffffff);
-  font-size: var(--nutui-font-size-s, 12px);
+  display: inline-flex;
+  align-items: center;
+  height: 100%;
+  white-space: nowrap;
+  color: var(--nutui-switch-label-text-color, #ffffff);
+  font-size: var(--nutui-switch-label-font-size, var(--nutui-font-size-s, 12px));
+}
+.nut-switch-label .nut-icon {
+  color: var(--nutui-switch-label-text-color, #ffffff);
 }
 .nut-switch-label-open {
-  transform: translateX(-18px);
+  margin: 0 calc(var(--nutui-switch-height, 28px) - var(--nutui-switch-border-width, 2px) + 3px) 0 7px;
 }
 .nut-switch-label-open-rtl {
-  transform: translateX(18px);
+  margin: 0 7px 0 calc(var(--nutui-switch-height, 28px) - var(--nutui-switch-border-width, 2px) + 3px);
 }
 .nut-switch-label-close {
-  transform: translateX(18px);
+  margin: 0 7px 0 calc(var(--nutui-switch-height, 28px) - var(--nutui-switch-border-width, 2px) + 3px);
 }
 .nut-switch-label-close-rtl {
-  transform: translateX(-18px);
+  margin: 0 calc(var(--nutui-switch-height, 28px) - var(--nutui-switch-border-width, 2px) + 3px) 0 7px;
+}
+.nut-switch-label-close-disabled {
+  color: var(--nutui-switch-inactive-disabled-label-text-color, var(--nutui-gray-4));
+}
+.nut-switch-label-close-disabled .nut-icon {
+  color: var(--nutui-switch-inactive-disabled-label-text-color, var(--nutui-gray-4));
+}
+.nut-switch-disabled {
+  background-color: var(--nutui-switch-active-disabled-background-color, var(--nutui-brand-3));
+}
+.nut-switch-disabled-close {
+  background-color: var(--nutui-switch-inactive-disabled-background-color, var(--nutui-gray-3));
 }

package/dist/cjs/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-s;
-
+    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/cjs/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/cjs/packages/switch/switch.js

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

package/dist/cjs/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;
+  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));
+}
+.nut-badge-sup {
+  display: inline-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);
+  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));
-  font-weight: normal;
-  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));
-  min-width: var(--nutui-badge-min-width, 5px);
+  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-color-title, #1a1a1a));
+  color: var(--nutui-tabbar-inactive-color, var(--nutui-gray-7));
   height: 100%;
 }
 .nut-tabbar-item-icon-box {
@@ -89,13 +118,15 @@
   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;
+  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 {
@@ -105,13 +136,23 @@
   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-color-background-overlay, #ffffff);
+  background: var(--nutui-gray-1);
 }
 .nut-tabbar-wrap {
   width: 100%;

package/dist/cjs/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;
+  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));
+}
+.nut-badge-sup {
+  display: inline-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);
+  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));
-  font-weight: normal;
-  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));
-  min-width: var(--nutui-badge-min-width, 5px);
+  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-color-title, #1a1a1a));
+  color: var(--nutui-tabbar-inactive-color, var(--nutui-gray-7));
   height: 100%;
 }
 .nut-tabbar-item-icon-box {
@@ -89,13 +118,15 @@
   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;
+  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 {
@@ -105,11 +136,21 @@
   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*/
 }