@nutui/nutui-react 3.0.0-beta.7 → 3.0.0-beta.9

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

@@ -10,42 +10,61 @@
   align-items: baseline;
 }
 .nut-price-symbol, .nut-price-integer, .nut-price-decimal {
-  color: var(--nutui-color-primary, #ff0f23);
+  color: var(--nutui-price-color, var(--nutui-color-text-help));
+  font-family: "JD";
+  line-height: 1;
+}
+.nut-price-darkgray .nut-price-symbol, .nut-price-darkgray .nut-price-integer, .nut-price-darkgray .nut-price-decimal {
+  font-family: "JD-Bold";
+  color: var(--nutui-price-darkgray-color, var(--nutui-gray-7));
+}
+.nut-price-primary .nut-price-symbol, .nut-price-primary .nut-price-integer, .nut-price-primary .nut-price-decimal {
+  font-family: "JD-Bold";
+  color: var(--nutui-price-color, var(--nutui-brand-6));
 }
 .nut-price-symbol {
-  font-size: var(--nutui-price-symbol-medium-size, 14px);
-  padding-right: var(--nutui-price-symbol-padding-right, 1px);
+  padding-right: var(--nutui-price-symbol-padding-right, 0px);
+}
+.nut-price-symbol-xlarge {
+  font-size: var(--nutui-price-symbol-xlarge-size, 12px);
 }
 .nut-price-symbol-large {
-  font-size: var(--nutui-price-symbol-big-size, 18px);
+  font-size: var(--nutui-price-symbol-large-size, 12px);
+}
+.nut-price-symbol-normal {
+  font-size: var(--nutui-price-symbol-normal-size, 12px);
 }
 .nut-price-symbol-small {
-  font-size: var(--nutui-price-symbol-small-size, 10px);
+  font-size: var(--nutui-price-symbol-small-size, 12px);
 }
 .nut-price-symbol-rtl {
   padding-right: 0;
-  padding-left: var(--nutui-price-symbol-padding-right, 1px);
+  padding-left: var(--nutui-price-symbol-padding-right, 0px);
 }
-.nut-price-integer {
-  font-size: var(--nutui-price-integer-medium-size, 16px);
+.nut-price-integer-xlarge {
+  font-size: var(--nutui-price-integer-xlarge-size, 24px);
 }
 .nut-price-integer-large {
-  font-size: var(--nutui-price-integer-big-size, 24px);
+  font-size: var(--nutui-price-integer-large-size, 18px);
+}
+.nut-price-integer-normal {
+  font-size: var(--nutui-price-integer-normal-size, 16px);
 }
 .nut-price-integer-small {
   font-size: var(--nutui-price-integer-small-size, 12px);
 }
-.nut-price-decimal {
-  font-size: var(--nutui-price-decimal-medium-size, 14px);
+.nut-price-decimal-xlarge {
+  font-size: var(--nutui-price-decimal-xlarge-size, 12px);
 }
 .nut-price-decimal-large {
-  font-size: var(--nutui-price-decimal-big-size, 18px);
+  font-size: var(--nutui-price-decimal-large-size, 12px);
+}
+.nut-price-decimal-normal {
+  font-size: var(--nutui-price-decimal-normal-size, 12px);
 }
 .nut-price-decimal-small {
-  font-size: var(--nutui-price-decimal-small-size, 10px);
+  font-size: var(--nutui-price-decimal-small-size, 12px);
 }
 .nut-price-line {
-  text-decoration: line-through var(--nutui-price-line-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
-  font-size: var(--nutui-price-line-font-size, 12px);
-  color: var(--nutui-price-line-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
+  text-decoration: line-through var(--nutui-price-line-color, var(--nutui-color-text-help));
 }

package/dist/cjs/packages/price/types.d.ts

@@ -0,0 +1,13 @@
+import { BasicComponent } from "../../utils/typings";
+export type PriceSize = 'xlarge' | 'large' | 'normal' | 'small';
+export type PriceColor = 'primary' | 'gray' | 'darkgray';
+export interface PriceProps extends BasicComponent {
+    color: PriceColor;
+    price: number | string;
+    symbol: string;
+    digits: number;
+    thousands: boolean;
+    position: string;
+    size: PriceSize;
+    line: boolean;
+}

package/dist/cjs/packages/price/types.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

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

@@ -12,7 +12,7 @@
   flex: auto;
   border-radius: var(--nutui-progress-border-radius, 12px);
   height: var(--nutui-progress-height, 10px);
-  background: var(--nutui-progress-background, var(--nutui-color-background, #f5f6fa));
+  background: var(--nutui-progress-background, var(--nutui-gray-3));
 }
 .nut-progress-outer .nut-progress-active:before {
   content: "";
@@ -49,7 +49,7 @@
   align-items: center;
   height: 100%;
   width: 100%;
-  color: var(--nutui-progress-text-color, var(--nutui-color-primary-text, #ffffff));
+  color: var(--nutui-progress-text-color, #ffffff);
   padding: var(--nutui-progress-text-padding, 0 5px);
   border-radius: var(--nutui-progress-text-border-radius, 5px);
   font-size: var(--nutui-progress-text-font-size, 9px);

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

@@ -12,7 +12,7 @@
   bottom: 0;
   left: 0;
   width: 100%;
-  color: var(--nutui-color-title, #1a1a1a);
+  color: var(--nutui-gray-7);
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -24,7 +24,7 @@
   margin-bottom: 4px;
 }
 .nut-pulltorefresh-primary {
-  background: var(--nutui-pulltorefresh-color-primary, var(--nutui-color-primary, #ff0f23));
+  background: var(--nutui-pulltorefresh-color-primary, var(--nutui-brand-6));
 }
 .nut-pulltorefresh-primary-content {
   color: var(--nutui-white-12);

package/dist/cjs/packages/radio/style/radio.scss

@@ -37,9 +37,12 @@
   &-icon {
     &-checked {
       color: $color-primary;
+      box-shadow: 0px 2px 4px 0px #ff0f2333;
+      border-radius: 50%;
 
       &.nut-radio-icon-disabled {
         color: $color-primary-disabled-special;
+        box-shadow: none;
       }
     }
 

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

@@ -19,8 +19,8 @@
   border: 1px solid var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05));
 }
 .nut-radiogroup-vertical .nut-radio-button-active {
-  border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-color-primary, #ff0f23));
-  background-color: var(--nutui-color-primary-light-pressed, #ffebf1);
+  border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-brand-6));
+  background-color: var(--nutui-brand-1);
 }
 .nut-radiogroup-horizontal .nut-radio {
   display: inline-flex;
@@ -29,13 +29,13 @@
   border: 1px solid #ffffff;
 }
 .nut-radiogroup-horizontal .nut-radio-button-active {
-  border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-color-primary, #ff0f23));
-  background-color: var(--nutui-color-primary-light-pressed, #ffebf1);
+  border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-brand-6));
+  background-color: var(--nutui-brand-1);
 }
 .nut-radiogroup .nut-radio-button-active.nut-radio-button-disabled {
-  background: var(--nutui-color-text-disabled, #c2c4cc);
+  background: var(--nutui-gray-4);
   color: #ffffff;
-  border: 1px solid var(--nutui-color-text-disabled, #c2c4cc);
+  border: 1px solid var(--nutui-gray-4);
 }
 
 [dir=rtl] .nut-radiogroup .nut-radio,
@@ -63,25 +63,28 @@
 .nut-radio-label {
   margin-left: var(--nutui-radio-label-margin-left, 4px);
   font-size: var(--nutui-radio-label-font-size, var(--nutui-font-size-s, 12px));
-  color: var(--nutui-radio-label-color, var(--nutui-color-title, #1a1a1a));
+  color: var(--nutui-radio-label-color, var(--nutui-gray-7));
 }
 .nut-radio-label-disabled {
-  color: var(--nutui-radio-label-disable-color, var(--nutui-color-text-disabled, #c2c4cc));
+  color: var(--nutui-radio-label-disable-color, var(--nutui-gray-4));
 }
 .nut-radio-icon {
-  color: var(--nutui-color-text-disabled, #c2c4cc);
+  color: var(--nutui-gray-4);
   transition-duration: 0.3s;
   transition-property: color, border-color, background-color;
   font-size: var(--nutui-radio-icon-font-size, var(--nutui-font-size-l, 16px));
 }
 .nut-radio-icon-checked {
-  color: var(--nutui-color-primary, #ff0f23);
+  color: var(--nutui-brand-6);
+  box-shadow: 0px 2px 4px 0px rgba(255, 15, 35, 0.2);
+  border-radius: 50%;
 }
 .nut-radio-icon-checked.nut-radio-icon-disabled {
-  color: var(--nutui-color-primary-disabled-special, #ffadbe);
+  color: var(--nutui-brand-3);
+  box-shadow: none;
 }
 .nut-radio-icon-disabled {
-  color: var(--nutui-color-text-disabled, #c2c4cc);
+  color: var(--nutui-gray-4);
 }
 .nut-radio-button {
   display: inline-flex;
@@ -90,23 +93,23 @@
   font-size: var(--nutui-radio-button-font-size, var(--nutui-font-size-s, 12px));
   background: var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05));
   border-radius: var(--nutui-radio-button-border-radius, 15px);
-  color: var(--nutui-radio-label-color, var(--nutui-color-title, #1a1a1a));
+  color: var(--nutui-radio-label-color, var(--nutui-gray-7));
   box-sizing: border-box;
   border: 1px solid var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05));
 }
 .nut-radio-button-active {
-  background: var(--nutui-color-primary-light-pressed, #ffebf1);
-  color: var(--nutui-color-primary, #ff0f23);
-  border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-color-primary, #ff0f23));
+  background: var(--nutui-brand-1);
+  color: var(--nutui-brand-6);
+  border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-brand-6));
 }
 .nut-radio-button-disabled {
-  color: var(--nutui-color-text-disabled, #c2c4cc);
+  color: var(--nutui-gray-4);
   border: 1px solid var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05));
 }
 .nut-radio .nut-radio-button-active.nut-radio-button-disabled {
-  background: var(--nutui-color-text-disabled, #c2c4cc);
+  background: var(--nutui-gray-4);
   color: #ffffff;
-  border: 1px solid var(--nutui-color-text-disabled, #c2c4cc);
+  border: 1px solid var(--nutui-gray-4);
 }
 
 [dir=rtl] .nut-radio:last-child,

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

@@ -19,8 +19,8 @@
   border: 1px solid var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05));
 }
 .nut-radiogroup-vertical .nut-radio-button-active {
-  border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-color-primary, #ff0f23));
-  background-color: var(--nutui-color-primary-light-pressed, #ffebf1);
+  border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-brand-6));
+  background-color: var(--nutui-brand-1);
 }
 .nut-radiogroup-horizontal .nut-radio {
   display: inline-flex;
@@ -29,13 +29,13 @@
   border: 1px solid #ffffff;
 }
 .nut-radiogroup-horizontal .nut-radio-button-active {
-  border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-color-primary, #ff0f23));
-  background-color: var(--nutui-color-primary-light-pressed, #ffebf1);
+  border: var(--nutui-radio-button-active-border, 1px solid var(--nutui-brand-6));
+  background-color: var(--nutui-brand-1);
 }
 .nut-radiogroup .nut-radio-button-active.nut-radio-button-disabled {
-  background: var(--nutui-color-text-disabled, #c2c4cc);
+  background: var(--nutui-gray-4);
   color: #ffffff;
-  border: 1px solid var(--nutui-color-text-disabled, #c2c4cc);
+  border: 1px solid var(--nutui-gray-4);
 }
 
 [dir=rtl] .nut-radiogroup .nut-radio,

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

@@ -20,7 +20,7 @@
   position: relative;
   height: var(--nutui-range-height, 4px);
   margin: 0 var(--nutui-range-margin, 15px);
-  background-color: var(--nutui-range-inactive-color, var(--nutui-color-primary-light-pressed, #ffebf1));
+  background-color: var(--nutui-range-inactive-color, var(--nutui-brand-1));
   border-radius: 2px;
   flex: 1;
   cursor: pointer;
@@ -33,7 +33,7 @@
 }
 .nut-range-min, .nut-range-max {
   font-size: var(--nutui-font-size-s, 12px);
-  color: var(--nutui-range-color, var(--nutui-color-title, #1a1a1a));
+  color: var(--nutui-range-color, var(--nutui-gray-7));
   user-select: none;
 }
 .nut-range-bar {
@@ -43,7 +43,7 @@
   height: 100%;
   max-width: 100%;
   max-height: 100%;
-  background: var(--nutui-range-active-color, var(--nutui-color-primary, #ff0f23));
+  background: var(--nutui-range-active-color, var(--nutui-brand-6));
   border-radius: 2px;
   transition: all 0.2s;
 }
@@ -52,10 +52,10 @@
   display: flex;
   width: var(--nutui-range-button-width, 24px);
   height: var(--nutui-range-button-height, 24px);
-  background: var(--nutui-range-button-background, var(--nutui-color-primary-text, #ffffff));
+  background: var(--nutui-range-button-background, #ffffff);
   border-radius: 50%;
   box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
-  border: var(--nutui-range-button-border, 1px solid var(--nutui-color-primary, #ff0f23));
+  border: var(--nutui-range-button-border, 1px solid var(--nutui-brand-6));
   outline: none;
   align-items: center;
   top: 50%;
@@ -93,7 +93,7 @@
   justify-content: center;
   user-select: none;
   font-size: var(--nutui-font-size-s, 12px);
-  color: var(--nutui-range-color, var(--nutui-color-title, #1a1a1a));
+  color: var(--nutui-range-color, var(--nutui-gray-7));
   text-align: center;
   vertical-align: center;
   box-sizing: border-box;
@@ -137,10 +137,10 @@
   height: 11px;
   left: 0px;
   border-radius: 6px;
-  background: var(--nutui-range-inactive-color, var(--nutui-color-primary-light-pressed, #ffebf1));
+  background: var(--nutui-range-inactive-color, var(--nutui-brand-1));
 }
 .nut-range-tick-active {
-  background: var(--nutui-range-active-color, var(--nutui-color-primary, #ff0f23));
+  background: var(--nutui-range-active-color, var(--nutui-brand-6));
 }
 
 .nut-range-vertical-container {
@@ -203,10 +203,10 @@
   width: 10px;
   height: 10px;
   border-radius: 5px;
-  background: var(--nutui-range-inactive-color, var(--nutui-color-primary-light-pressed, #ffebf1));
+  background: var(--nutui-range-inactive-color, var(--nutui-brand-1));
 }
 .nut-range-vertical-tick-active {
-  background: var(--nutui-range-active-color, var(--nutui-color-primary, #ff0f23));
+  background: var(--nutui-range-active-color, var(--nutui-brand-6));
 }
 
 [dir=rtl] .nut-range-button-wrapper, [dir=rtl] .nut-range-button-wrapper-right,

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

@@ -59,10 +59,10 @@
   cursor: pointer;
 }
 .nut-rate-item-icon .nut-icon {
-  color: var(--nutui-rate-icon-color, var(--nutui-red-6, #ff3333));
+  color: var(--nutui-rate-icon-color, var(--nutui-red-6));
 }
 .nut-rate-item-icon-disabled .nut-icon {
-  color: var(--nutui-rate-icon-inactive-color, var(--nutui-gray-8, #dadce0));
+  color: var(--nutui-rate-icon-inactive-color, var(--nutui-gray-8));
 }
 .nut-rate-item-icon.nut-rate-item-icon.nut-rate-item-icon-half {
   position: absolute;
@@ -79,7 +79,7 @@
 .nut-rate-score {
   display: inline-flex;
   align-items: center;
-  color: var(--nutui-rate-font-color, var(--nutui-red-6, #ff3333));
+  color: var(--nutui-rate-font-color, var(--nutui-red-6));
   font-family: "JD";
   line-height: 1;
 }
@@ -96,7 +96,7 @@
   padding-left: calc(var(--nutui-rate-item-margin, 4px) / 2);
 }
 .nut-rate-score-disabled {
-  color: var(--nutui-rate-icon-inactive-color, var(--nutui-gray-8, #dadce0));
+  color: var(--nutui-rate-icon-inactive-color, var(--nutui-gray-8));
 }
 
 [dir=rtl] .nut-rate-item,

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

@@ -21,7 +21,7 @@
   width: var(--nutui-resultpage-width, 240px);
   margin-bottom: var(--nutui-resultpage-title-margin-bottom, 12px);
   font-size: var(--nutui-resultpage-title-font-size, var(--nutui-font-size-xl, 18px));
-  color: var(--nutui-resultpage-title-color, var(--nutui-color-title, #1a1a1a));
+  color: var(--nutui-resultpage-title-color, var(--nutui-gray-7));
   font-weight: var(--nutui-font-weight-bold, 600);
   text-align: center;
 }
@@ -29,7 +29,7 @@
   width: var(--nutui-resultpage-width, 240px);
   line-height: var(--nutui-resultpage-description-line-height, 20px);
   font-size: var(--nutui-resultpage-description-font-size, var(--nutui-font-size-base, 14px));
-  color: var(--nutui-resultpage-description-color, var(--nutui-color-text, #505259));
+  color: var(--nutui-resultpage-description-color, var(--nutui-gray-6));
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;

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

@@ -7,8 +7,8 @@
   align-items: center;
   width: var(--nutui-searchbar-width, 100%);
   padding: var(--nutui-searchbar-padding, 6px 16px);
-  background: var(--nutui-searchbar-background, var(--nutui-color-background, #f5f6fa));
-  color: var(--nutui-searchbar-color, var(--nutui-color-title, #1a1a1a));
+  background: var(--nutui-searchbar-background, var(--nutui-gray-3));
+  color: var(--nutui-searchbar-color, var(--nutui-gray-7));
   font-size: var(--nutui-searchbar-font-size, var(--nutui-font-size-base, 14px));
   box-sizing: border-box;
   justify-content: center;
@@ -20,7 +20,7 @@
   justify-content: center;
   padding: var(--nutui-searchbar-content-padding, 0 12px);
   height: var(--nutui-searchbar-input-height, 32px);
-  background: var(--nutui-searchbar-content-background, var(--nutui-color-background-overlay, #ffffff));
+  background: var(--nutui-searchbar-content-background, var(--nutui-gray-1));
   border-radius: var(--nutui-searchbar-content-border-radius, 4px);
 }
 .nut-searchbar-icon {
@@ -87,8 +87,8 @@
   width: 100%;
   padding: var(--nutui-searchbar-input-padding, 0 4px);
   font-size: var(--nutui-searchbar-font-size, var(--nutui-font-size-base, 14px));
-  color: var(--nutui-searchbar-input-text-color, var(--nutui-color-title, #1a1a1a));
-  caret-color: var(--nutui-searchbar-input-curror-color, var(--nutui-color-title, #1a1a1a));
+  color: var(--nutui-searchbar-input-text-color, var(--nutui-gray-7));
+  caret-color: var(--nutui-searchbar-input-curror-color, var(--nutui-gray-7));
   background: transparent;
   text-align: var(--nutui-searchbar-input-text-align, left);
 }

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

@@ -9,7 +9,7 @@
   padding: var(--nutui-segmented-padding, var(--nutui-spacing-xxxs, 2px));
   align-items: center;
   border-radius: var(--nutui-segmented-radius, var(--nutui-radius-xs, 4px));
-  background: var(--nutui-color-mask-part, rgba(0, 0, 0, 0.4));
+  background: var(--nutui-black-7);
   box-sizing: border-box;
 }
 
@@ -20,14 +20,14 @@
   justify-content: center;
   padding: var(--nutui-segmented-item-padding, 0 var(--nutui-spacing-xs, 6px));
   border-radius: var(--nutui-segmented-item-radius, var(--nutui-radius-xs, 4px));
-  color: var(--nutui-segmented-item-color, var(--nutui-color-primary-text, #ffffff));
+  color: var(--nutui-segmented-item-color, #ffffff);
   font-size: var(--nutui-segmented-item-fontsize, var(--nutui-font-size-s, 12px));
   line-height: 1;
   box-sizing: border-box;
 }
 
 .nut-segmented-item-active {
-  background: var(--nutui-segmented-active-background, var(--nutui-color-mask-part, rgba(0, 0, 0, 0.4)));
+  background: var(--nutui-segmented-active-background, var(--nutui-black-7));
 }
 
 .nut-segmented-icon {