@nutui/nutui-react-taro 3.0.0-beta.3 → 3.0.0-beta.4

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

@@ -5,7 +5,7 @@
   flex-direction: column;
   align-items: center;
   width: $dialog-width;
-  max-height: 67%;
+  // max-height: 67%;
   min-height: $dialog-min-height;
   padding: $dialog-padding;
   box-sizing: border-box;
@@ -40,27 +40,30 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    top: $dialog-close-top;
     color: $dialog-close-color;
     .nut-icon {
-      font-size: 24px;
-      height: 24px;
-      width: 24px;
+      font-size: $dialog-close-width;
+      width: $dialog-close-width;
+      height: $dialog-close-height;
     }
 
     &-top-right {
+      top: $dialog-close-top;
       right: $dialog-close-right;
     }
 
     &-top-left {
+      top: $dialog-close-top;
       left: $dialog-close-left;
     }
 
     &-bottom {
-      top: initial;
       bottom: -56px;
       left: 50%;
-      transform: translate(-50%);
+      transform: translateY(-50%);
+      .nut-icon {
+        color: $dialog-close-color;
+      }
     }
 
     &:active {

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

@@ -1,7 +1,6 @@
 .nut-button {
   position: relative;
   display: flex;
-  display: inline-block;
   /* #ifdef rn harmony*/
   width: 80px;
   /* #endif */
@@ -16,14 +15,14 @@
   margin: 0;
   padding: 0;
   height: var(--nutui-button-default-height, 32px);
-  font-size: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14px));
+  font-size: var(--nutui-button-default-font-size, var(--nutui-font-size-s, 12px));
   font-weight: var(--nutui-button-default-font-weight, var(--nutui-font-weight, 400));
   text-align: center;
   cursor: pointer;
   transition: opacity 0.2s;
-  -webkit-appearance: none;
   user-select: none;
   touch-action: manipulation;
+  -webkit-appearance: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   color: var(--nutui-button-default-color, var(--nutui-color-title, #1a1a1a));
   background: var(--nutui-button-default-background-color, transparent);
@@ -72,9 +71,9 @@
   /* #endif */
 }
 .nut-button-wrap .nut-icon {
-  font-size: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14px));
-  width: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14px));
-  height: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14px));
+  font-size: var(--nutui-button-default-font-size, var(--nutui-font-size-s, 12px));
+  width: var(--nutui-button-default-font-size, var(--nutui-font-size-s, 12px));
+  height: var(--nutui-button-default-font-size, var(--nutui-font-size-s, 12px));
 }
 .nut-button-loading::before, .nut-button-disabled::before {
   display: none;
@@ -87,6 +86,18 @@
   width: var(--nutui-button-default-height, 32px);
   padding: 0;
 }
+.nut-button-round {
+  border-radius: var(--nutui-button-border-radius, 8px);
+}
+.nut-button-round-xlarge, .nut-button-round-large {
+  border-radius: var(--nutui-button-large-border-radius, 12px);
+}
+.nut-button-round-small {
+  border-radius: var(--nutui-button-small-border-radius, 8px);
+}
+.nut-button-round-mini {
+  border-radius: var(--nutui-button-mini-border-radius, 6px);
+}
 .nut-button-default {
   padding: var(--nutui-button-default-padding, 0px 12px);
   border-style: solid;
@@ -111,37 +122,52 @@
 .nut-button-xlarge {
   height: var(--nutui-button-xlarge-height, 48px);
   padding: var(--nutui-button-xlarge-padding, 0px 24px);
-  font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xxl, 24px));
+  font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
   font-weight: var(--nutui-button-large-font-weight, var(--nutui-font-weight-bold, 600));
+  border-radius: var(--nutui-radius-base, 8px);
+}
+.nut-button-xlarge .nut-button-text {
+  margin-left: var(--nutui-button-xlarge-text-icon-margin, 6px);
+}
+.nut-button-xlarge .nut-button-text-right {
+  margin-right: var(--nutui-button-xlarge-text-icon-margin, 6px);
 }
 .nut-button-xlarge .nut-icon {
-  font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xxl, 24px));
-  width: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xxl, 24px));
-  height: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xxl, 24px));
+  font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
+  width: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
+  height: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
 }
 .nut-button-xlarge-children {
-  font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xxl, 24px));
+  font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
   font-weight: var(--nutui-button-large-font-weight, var(--nutui-font-weight-bold, 600));
 }
 .nut-button-large {
   height: var(--nutui-button-large-height, 40px);
   padding: var(--nutui-button-large-padding, 0px 16px);
-  font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 16px));
+  font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-base, 14px));
   font-weight: var(--nutui-button-large-font-weight, var(--nutui-font-weight-bold, 600));
+  border-radius: var(--nutui-radius-base, 8px);
+}
+.nut-button-large .nut-button-text {
+  margin-left: var(--nutui-button-xlarge-text-icon-margin, 6px);
+}
+.nut-button-large .nut-button-text-right {
+  margin-right: var(--nutui-button-xlarge-text-icon-margin, 6px);
 }
 .nut-button-large .nut-icon {
-  font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 16px));
-  width: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 16px));
-  height: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 16px));
+  font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-base, 14px));
+  width: var(--nutui-button-large-font-size, var(--nutui-font-size-base, 14px));
+  height: var(--nutui-button-large-font-size, var(--nutui-font-size-base, 14px));
 }
 .nut-button-large-children {
-  font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 16px));
+  font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-base, 14px));
   font-weight: var(--nutui-button-large-font-weight, var(--nutui-font-weight-bold, 600));
 }
 .nut-button-small {
   height: var(--nutui-button-small-height, 28px);
   padding: var(--nutui-button-small-padding, 0px 8px);
   font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12px));
+  border-radius: var(--nutui-radius-s, 6px);
 }
 .nut-button-small .nut-icon {
   font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12px));
@@ -154,15 +180,16 @@
 .nut-button-mini {
   height: var(--nutui-button-mini-height, 24px);
   padding: var(--nutui-button-mini-padding, 0px 8px);
-  font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-s, 12px));
+  font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
+  border-radius: var(--nutui-radius-s, 6px);
 }
 .nut-button-mini .nut-icon {
-  font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-s, 12px));
-  width: var(--nutui-button-mini-font-size, var(--nutui-font-size-s, 12px));
-  height: var(--nutui-button-mini-font-size, var(--nutui-font-size-s, 12px));
+  font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
+  width: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
+  height: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
 }
 .nut-button-mini-children {
-  font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-s, 12px));
+  font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
 }
 .nut-button-primary {
   color: var(--nutui-button-primary-color, var(--nutui-color-primary-text, #ffffff));
@@ -173,7 +200,7 @@
   color: var(--nutui-button-primary-color, var(--nutui-color-primary-text, #ffffff));
 }
 .nut-button-primary-solid {
-  background: var(--nutui-color-primary, #ff0f23);
+  background: linear-gradient(90deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%);
   color: var(--nutui-button-primary-color, var(--nutui-color-primary-text, #ffffff));
   border-color: transparent;
 }
@@ -333,18 +360,6 @@
   cursor: default;
   opacity: 0.9;
 }
-.nut-button-round {
-  border-radius: var(--nutui-button-border-radius, 8px);
-}
-.nut-button-round-xlarge, .nut-button-round-large {
-  border-radius: var(--nutui-button-large-border-radius, 12px);
-}
-.nut-button-round-small {
-  border-radius: var(--nutui-button-small-border-radius, 8px);
-}
-.nut-button-round-mini {
-  border-radius: var(--nutui-button-mini-border-radius, 6px);
-}
 .nut-button-square {
   border-radius: var(--nutui-button-square-border-radius, 0);
 }
@@ -430,7 +445,6 @@
   flex-direction: column;
   align-items: center;
   width: var(--nutui-dialog-width, 295px);
-  max-height: 67%;
   min-height: var(--nutui-dialog-min-height, 124px);
   padding: var(--nutui-dialog-padding, 24px);
   box-sizing: border-box;
@@ -461,25 +475,28 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  top: var(--nutui-dialog-close-top, 16px);
   color: var(--nutui-dialog-close-color, #ffffff);
 }
 .nut-dialog-close .nut-icon {
-  font-size: 24px;
-  height: 24px;
-  width: 24px;
+  font-size: var(--nutui-dialog-close-width, 18px);
+  width: var(--nutui-dialog-close-width, 18px);
+  height: var(--nutui-dialog-close-height, 18px);
 }
 .nut-dialog-close-top-right {
+  top: var(--nutui-dialog-close-top, 16px);
   right: var(--nutui-dialog-close-right, 16px);
 }
 .nut-dialog-close-top-left {
+  top: var(--nutui-dialog-close-top, 16px);
   left: var(--nutui-dialog-close-left, 16px);
 }
 .nut-dialog-close-bottom {
-  top: initial;
   bottom: -56px;
   left: 50%;
-  transform: translate(-50%);
+  transform: translateY(-50%);
+}
+.nut-dialog-close-bottom .nut-icon {
+  color: var(--nutui-dialog-close-color, #ffffff);
 }
 .nut-dialog-close:active {
   opacity: 0.7;

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

@@ -39,7 +39,7 @@ export interface EllipsisProps extends BasicComponent {
     lineHeight: number | string
     width: number | string;
     /**
-    * 文本点击是触发
+    * 文本点击时触发
     * @default -
     */
     onClick: () => void

package/dist/es/packages/pagination/pagination.js

@@ -9,6 +9,7 @@ import { View } from "@tarojs/components";
 import { useConfig } from "../configprovider/index";
 import { usePropsValue } from "../../utils/use-props-value";
 import { ComponentDefaults } from "../../utils/typings";
+import addColorForHarmony from "../../utils/add-color-for-harmony";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     defaultValue: 1,
     mode: 'multi',
@@ -106,7 +107,7 @@ export var Pagination = function(props) {
         onClick: function(e) {
             return handleSelectPage(currentPage - 1);
         }
-    }, prev || locale.pagination.prev), mode === 'multi' && /*#__PURE__*/ React.createElement(View, {
+    }, addColorForHarmony(prev || locale.pagination.prev, currentPage === 1 ? '#c2c4cc' : '#ff0f23')), mode === 'multi' && /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, "-contain")
     }, pages.map(function(item, index) {
         return /*#__PURE__*/ React.createElement(View, {
@@ -125,7 +126,7 @@ export var Pagination = function(props) {
         onClick: function(e) {
             return handleSelectPage(currentPage + 1);
         }
-    }, next || locale.pagination.next)), mode === 'lite' && /*#__PURE__*/ React.createElement(View, {
+    }, addColorForHarmony(next || locale.pagination.next, currentPage >= pageCount ? '#c2c4cc' : '#ff0f23'))), mode === 'lite' && /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, "-lite")
     }, /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, "-lite-active")

package/dist/es/packages/progress/progress.js

@@ -44,7 +44,7 @@ export var Progress = function(props) {
     var _useState = _sliced_to_array(useState(percent), 2), displayPercent = _useState[0], setDispalyPercent = _useState[1];
     var stylesInner = {
         width: "".concat(displayPercent, "%"),
-        backgroundColor: color || '#FF0F23'
+        background: color || '#FF0F23'
     };
     if (strokeWidth) {
         stylesOuter.height = pxTransform(Number(strokeWidth));
@@ -137,11 +137,10 @@ export var Progress = function(props) {
         }
     }, []);
     var getTextStyle = function() {
-        var value = harmony() ? '93%' : '99%';
         return rtl ? {
-            right: value
+            right: '100%'
         } : {
-            left: value
+            left: '100%'
         };
     };
     var computeRight = function() {

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

@@ -29,7 +29,7 @@
     justify-content: center;
     transition: all 0.4s;
     border-radius: $progress-border-radius;
-    background-color: $progress-color;
+    background: $progress-color;
   }
 
   &-text {
@@ -39,7 +39,7 @@
     top: $progress-text-position-top;
     bottom: $progress-text-position-bottom;
     transition: all 0.4s;
-    // transform: translate(-50%);
+    transform: translate(-50%);
 
     &-inner {
       display: flex;

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

@@ -27,7 +27,7 @@
   justify-content: center;
   transition: all 0.4s;
   border-radius: var(--nutui-progress-border-radius, 12px);
-  background-color: var(--nutui-progress-color, #ff0f23);
+  background: var(--nutui-progress-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%));
 }
 .nut-progress-text {
   display: flex;
@@ -36,6 +36,7 @@
   top: var(--nutui-progress-text-position-top, -4px);
   bottom: var(--nutui-progress-text-position-bottom, -4px);
   transition: all 0.4s;
+  transform: translate(-50%);
 }
 .nut-progress-text-inner {
   display: flex;
@@ -49,7 +50,7 @@
   border-radius: var(--nutui-progress-text-border-radius, 5px);
   font-size: var(--nutui-progress-text-font-size, 9px);
   line-height: 1;
-  background: var(--nutui-progress-text-background, #ff0f23);
+  background: var(--nutui-progress-text-background, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%));
 }
 @keyframes progressActive {
   0% {

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

@@ -18,10 +18,10 @@
     display: flex;
     flex-shrink: 0;
     position: relative;
-    margin-right: $rate-item-margin;
+    margin-left: $rate-item-margin;
 
-    &:last-child {
-      margin-right: 0;
+    &:first-child {
+      margin-left: 0;
     }
 
     &-half {
@@ -39,11 +39,16 @@
 
     &-icon {
       display: flex;
-      color: $rate-icon-color;
       cursor: pointer;
 
+      .nut-icon {
+        color: $rate-icon-color;
+      }
+
       &-disabled {
-        color: $rate-icon-inactive-color;
+        .nut-icon {
+          color: $rate-icon-inactive-color;
+        }
       }
 
       &.nut-rate-item-icon.nut-rate-item-icon-half {

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

@@ -12,10 +12,10 @@
   display: flex;
   flex-shrink: 0;
   position: relative;
-  margin-right: var(--nutui-rate-item-margin, 14px);
+  margin-left: var(--nutui-rate-item-margin, 14px);
 }
-.nut-rate-item:last-child {
-  margin-right: 0;
+.nut-rate-item:first-child {
+  margin-left: 0;
 }
 .nut-rate-item-half {
   position: absolute;
@@ -30,10 +30,12 @@
 }
 .nut-rate-item-icon {
   display: flex;
-  color: var(--nutui-rate-icon-color, var(--nutui-color-primary, #ff0f23));
   cursor: pointer;
 }
-.nut-rate-item-icon-disabled {
+.nut-rate-item-icon .nut-icon {
+  color: var(--nutui-rate-icon-color, var(--nutui-color-primary, #ff0f23));
+}
+.nut-rate-item-icon-disabled .nut-icon {
   color: var(--nutui-rate-icon-inactive-color, var(--nutui-color-text-disabled, #c2c4cc));
 }
 .nut-rate-item-icon.nut-rate-item-icon.nut-rate-item-icon-half {

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

@@ -110,10 +110,20 @@
   color: var(--nutui-tabbar-active-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-tabbar-item-active .nut-tabbar-item-icon-box {
+  /* #ifdef harmony*/
+  color: var(--nutui-tabbar-active-color, var(--nutui-color-primary, #ff0f23));
+  /* #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-color-primary, #ff0f23));
+  /* #endif*/
+  /* #ifndef harmony*/
   color: inherit;
+  /* #endif*/
 }
 
 .nut-tabbar {

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 #0073ff
-    */
-    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/tabbaritem/style/style.css

@@ -110,8 +110,18 @@
   color: var(--nutui-tabbar-active-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-tabbar-item-active .nut-tabbar-item-icon-box {
+  /* #ifdef harmony*/
+  color: var(--nutui-tabbar-active-color, var(--nutui-color-primary, #ff0f23));
+  /* #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-color-primary, #ff0f23));
+  /* #endif*/
+  /* #ifndef harmony*/
   color: inherit;
+  /* #endif*/
 }

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

@@ -40,10 +40,20 @@
     color: $tabbar-active-color;
 
     .nut-tabbar-item-icon-box {
+      /* #ifdef harmony*/
+      color: $tabbar-active-color;
+      /* #endif*/
+      /* #ifndef harmony*/
       color: inherit;
+      /* #endif*/
 
       .nut-icon {
+        /* #ifdef harmony*/
+        color: $tabbar-active-color;
+        /* #endif*/
+        /* #ifndef harmony*/
         color: inherit;
+        /* #endif*/
       }
     }
   }

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

@@ -1,40 +1,12 @@
 import { FunctionComponent, ReactNode } from 'react';
 import { BasicComponent } from "../../utils/typings";
 export interface TabbarItemProps extends BasicComponent {
-    /**
-    * 标签页的标题
-    * @default -
-    */
-    title: ReactNode
-    /**
-    * 自定义图标
-    * @default -
-    */
-    icon: ReactNode
-    /**
-    * 徽标中显示的内容，支持数字、字符和自定义内容
-    * @default -
-    */
-    value: ReactNode
-    /**
-    * 徽标是否为小点
-    * @default false
-    */
-    dot: boolean
-    /**
-    * value 为数值时，最大值
-    * @default 99
-    */
-    max: number
-    /**
-    * 徽标的上下偏移量，支持单位设置，可设置为：5 等
-    * @default 0
-    */
-    top: string
-    /**
-    * 徽标的左右偏移量，支持单位设置，可设置为：5 等
-    * @default 0
-    */
-    right: string
+    title: ReactNode;
+    icon: ReactNode;
+    value: ReactNode;
+    dot: boolean;
+    max: number;
+    top: string;
+    right: string;
 }
 export declare const TabbarItem: FunctionComponent<Partial<TabbarItemProps>>;

package/dist/es/packages/tabbaritem/tabbaritem.js

@@ -8,6 +8,7 @@ import { View } from "@tarojs/components";
 import { ComponentDefaults } from "../../utils/typings";
 import Badge from "../badge/index";
 import TabbarContext from "../tabbar/context";
+import addColorForHarmony from "../../utils/add-color-for-harmony";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     title: '',
     icon: null,
@@ -55,9 +56,15 @@ export var TabbarItem = function(props) {
         }
     }, rest), icon ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Badge, badgeProps, /*#__PURE__*/ React.createElement(View, {
         className: boxPrefix
-    }, icon)), /*#__PURE__*/ React.createElement(View, {
-        className: titleClass
+    }, addColorForHarmony(icon, active ? ctx === null || ctx === void 0 ? void 0 : ctx.activeColor : ctx === null || ctx === void 0 ? void 0 : ctx.inactiveColor))), /*#__PURE__*/ React.createElement(View, {
+        className: titleClass,
+        style: {
+            color: active ? ctx === null || ctx === void 0 ? void 0 : ctx.activeColor : ctx === null || ctx === void 0 ? void 0 : ctx.inactiveColor
+        }
     }, title)) : /*#__PURE__*/ React.createElement(Badge, badgeProps, /*#__PURE__*/ React.createElement(View, {
-        className: titleClass
+        className: titleClass,
+        style: {
+            color: active ? ctx === null || ctx === void 0 ? void 0 : ctx.activeColor : ctx === null || ctx === void 0 ? void 0 : ctx.inactiveColor
+        }
     }, title)));
 };

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

@@ -13,6 +13,7 @@
 .nut-tag .nut-icon {
   vertical-align: middle;
   margin-left: 4px;
+  color: var(--nutui-tag-color, #ffffff);
 }
 .nut-tag-text {
   font-size: var(--nutui-tag-font-size, var(--nutui-font-size-xxs, 10px));

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

@@ -13,6 +13,7 @@
   .nut-icon {
     vertical-align: middle;
     margin-left: 4px;
+    color: $tag-color;
   }
 
   &-text {

package/dist/es/packages/toast/style/index.js

@@ -1 +1,2 @@
+import '../../overlay/style';
 import './toast.scss';