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

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

@@ -1,5 +1,13 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-checkboxgroup .nut-checkbox-button {
-  background-color: var(--nutui-color-background, #f5f6fa);
+  background-color: var(--nutui-gray-3);
+}
+.nut-checkboxgroup-vertical {
+  display: flex;
+  flex-direction: column;
 }
 .nut-checkboxgroup-vertical .nut-checkbox {
   margin-bottom: 5px;
@@ -9,21 +17,27 @@
   justify-content: space-between;
 }
 .nut-checkboxgroup-vertical .nut-checkbox-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-checkboxgroup-horizontal {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
 }
 .nut-checkboxgroup-horizontal .nut-checkbox {
   display: inline-flex;
+  flex: 1;
   margin-right: 20px;
 }
 .nut-checkboxgroup-horizontal .nut-checkbox-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-checkboxgroup-list {
   width: 100%;
-  border-bottom: var(--nutui-checkbox-list-item-border, 1px solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
-  border-top: var(--nutui-checkbox-list-item-border, 1px solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
+  border-bottom: var(--nutui-checkbox-list-item-border, 1px solid var(--nutui-black-3));
+  border-top: var(--nutui-checkbox-list-item-border, 1px solid var(--nutui-black-3));
   padding: var(--nutui-checkbox-list-padding, 0 0 0 12px);
   background: var(--nutui-checkbox-list-background-color, #ffffff);
 }

package/dist/es/packages/checkboxgroup/style/style.harmony.css

@@ -1,5 +1,13 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-checkboxgroup .nut-checkbox-button {
-  background-color: #F7F8FC;
+  background-color: #f2f3f5;
+}
+.nut-checkboxgroup-vertical {
+  display: flex;
+  flex-direction: column;
 }
 .nut-checkboxgroup-vertical .nut-checkbox {
   margin-bottom: 5px;
@@ -9,16 +17,22 @@
   justify-content: space-between;
 }
 .nut-checkboxgroup-vertical .nut-checkbox-button-active {
-  border: 1px solid #FF0F23;
-  background-color: #FFEBF1;
+  border: 1px solid #ff0f23;
+  background-color: #ffebf1;
+}
+.nut-checkboxgroup-horizontal {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
 }
 .nut-checkboxgroup-horizontal .nut-checkbox {
   display: inline-flex;
+  flex: 1;
   margin-right: 20px;
 }
 .nut-checkboxgroup-horizontal .nut-checkbox-button-active {
-  border: 1px solid #FF0F23;
-  background-color: #FFEBF1;
+  border: 1px solid #ff0f23;
+  background-color: #ffebf1;
 }
 .nut-checkboxgroup-list {
   width: 100%;

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

@@ -26,7 +26,7 @@ export interface CircleProgressProps extends BasicComponent {
     strokeLinecap?: 'butt' | 'round' | 'square' | 'inherit'
     /**
     * 圆环进度条颜色，传入对象格式可以定义渐变色
-    * @default #FF0F23
+    * @default -
     */
     color?: Record<string, string> | string
     /**

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

@@ -1,12 +1,16 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-circleprogress {
   position: relative;
 }
 .nut-circleprogress-hover {
-  stroke: var(--nutui-circleprogress-primary-color, var(--nutui-color-primary, #ff0f23));
+  stroke: var(--nutui-circleprogress-primary-color, var(--nutui-brand-6));
   transition: stroke-dasharray 0.2s ease-in-out 0s, stroke 0.2s ease 0s;
 }
 .nut-circleprogress-path {
-  stroke: var(--nutui-circleprogress-path-color, var(--nutui-color-background, #f5f6fa));
+  stroke: var(--nutui-circleprogress-path-color, var(--nutui-gray-3));
 }
 .nut-circleprogress-text {
   position: absolute;
@@ -16,7 +20,7 @@
   width: 100%;
   transform: translateY(-50%);
   text-align: center;
-  color: var(--nutui-circleprogress-text-color, var(--nutui-color-title, #1a1a1a));
+  color: var(--nutui-circleprogress-text-color, var(--nutui-gray-7));
   font-size: var(--nutui-circleprogress-text-size, var(--nutui-font-size-l, 16px));
 }
 

package/dist/es/packages/circleprogress/style/style.harmony.css

@@ -1,12 +1,16 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-circleprogress {
   position: relative;
 }
 .nut-circleprogress-hover {
-  stroke: #FF0F23;
+  stroke: #ff0f23;
   transition: stroke-dasharray 0.2s ease-in-out 0s, stroke 0.2s ease 0s;
 }
 .nut-circleprogress-path {
-  stroke: #F7F8FC;
+  stroke: #f2f3f5;
 }
 .nut-circleprogress-text {
   position: absolute;
@@ -16,7 +20,7 @@
   width: 100%;
   transform: translateY(-50%);
   text-align: center;
-  color: #1A1A1A;
+  color: #1a1a1a;
   font-size: 16px;
 }
 

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-col {
   box-sizing: border-box;
   word-break: break-all;

package/dist/es/packages/col/style/style.harmony.css

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-col {
   box-sizing: border-box;
   word-break: break-all;
@@ -20,337 +24,337 @@
 }
 
 .nut-col-offset-1 {
-  margin-left: 4.1666667%;
+  margin-left: 4.166666666%;
 }
 
 [dir=rtl] .nut-col-offset-1,
 .nut-rtl .nut-col-offset-1 {
   margin-left: 0;
-  margin-right: 4.1666667%;
+  margin-right: 4.166666666%;
 }
 
 .nut-col-1 {
-  width: 4.1666667%;
+  width: 4.166666666%;
 }
 
 .nut-col-offset-2 {
-  margin-left: 8.3333333%;
+  margin-left: 8.333333332%;
 }
 
 [dir=rtl] .nut-col-offset-2,
 .nut-rtl .nut-col-offset-2 {
   margin-left: 0;
-  margin-right: 8.3333333%;
+  margin-right: 8.333333332%;
 }
 
 .nut-col-2 {
-  width: 8.3333333%;
+  width: 8.333333332%;
 }
 
 .nut-col-offset-3 {
-  margin-left: 12.5%;
+  margin-left: 12.499999998%;
 }
 
 [dir=rtl] .nut-col-offset-3,
 .nut-rtl .nut-col-offset-3 {
   margin-left: 0;
-  margin-right: 12.5%;
+  margin-right: 12.499999998%;
 }
 
 .nut-col-3 {
-  width: 12.5%;
+  width: 12.499999998%;
 }
 
 .nut-col-offset-4 {
-  margin-left: 16.6666667%;
+  margin-left: 16.666666664%;
 }
 
 [dir=rtl] .nut-col-offset-4,
 .nut-rtl .nut-col-offset-4 {
   margin-left: 0;
-  margin-right: 16.6666667%;
+  margin-right: 16.666666664%;
 }
 
 .nut-col-4 {
-  width: 16.6666667%;
+  width: 16.666666664%;
 }
 
 .nut-col-offset-5 {
-  margin-left: 20.8333333%;
+  margin-left: 20.83333333%;
 }
 
 [dir=rtl] .nut-col-offset-5,
 .nut-rtl .nut-col-offset-5 {
   margin-left: 0;
-  margin-right: 20.8333333%;
+  margin-right: 20.83333333%;
 }
 
 .nut-col-5 {
-  width: 20.8333333%;
+  width: 20.83333333%;
 }
 
 .nut-col-offset-6 {
-  margin-left: 25%;
+  margin-left: 24.999999996%;
 }
 
 [dir=rtl] .nut-col-offset-6,
 .nut-rtl .nut-col-offset-6 {
   margin-left: 0;
-  margin-right: 25%;
+  margin-right: 24.999999996%;
 }
 
 .nut-col-6 {
-  width: 25%;
+  width: 24.999999996%;
 }
 
 .nut-col-offset-7 {
-  margin-left: 29.1666667%;
+  margin-left: 29.166666662%;
 }
 
 [dir=rtl] .nut-col-offset-7,
 .nut-rtl .nut-col-offset-7 {
   margin-left: 0;
-  margin-right: 29.1666667%;
+  margin-right: 29.166666662%;
 }
 
 .nut-col-7 {
-  width: 29.1666667%;
+  width: 29.166666662%;
 }
 
 .nut-col-offset-8 {
-  margin-left: 33.3333333%;
+  margin-left: 33.333333328%;
 }
 
 [dir=rtl] .nut-col-offset-8,
 .nut-rtl .nut-col-offset-8 {
   margin-left: 0;
-  margin-right: 33.3333333%;
+  margin-right: 33.333333328%;
 }
 
 .nut-col-8 {
-  width: 33.3333333%;
+  width: 33.333333328%;
 }
 
 .nut-col-offset-9 {
-  margin-left: 37.5%;
+  margin-left: 37.499999994%;
 }
 
 [dir=rtl] .nut-col-offset-9,
 .nut-rtl .nut-col-offset-9 {
   margin-left: 0;
-  margin-right: 37.5%;
+  margin-right: 37.499999994%;
 }
 
 .nut-col-9 {
-  width: 37.5%;
+  width: 37.499999994%;
 }
 
 .nut-col-offset-10 {
-  margin-left: 41.6666667%;
+  margin-left: 41.66666666%;
 }
 
 [dir=rtl] .nut-col-offset-10,
 .nut-rtl .nut-col-offset-10 {
   margin-left: 0;
-  margin-right: 41.6666667%;
+  margin-right: 41.66666666%;
 }
 
 .nut-col-10 {
-  width: 41.6666667%;
+  width: 41.66666666%;
 }
 
 .nut-col-offset-11 {
-  margin-left: 45.8333333%;
+  margin-left: 45.833333326%;
 }
 
 [dir=rtl] .nut-col-offset-11,
 .nut-rtl .nut-col-offset-11 {
   margin-left: 0;
-  margin-right: 45.8333333%;
+  margin-right: 45.833333326%;
 }
 
 .nut-col-11 {
-  width: 45.8333333%;
+  width: 45.833333326%;
 }
 
 .nut-col-offset-12 {
-  margin-left: 50%;
+  margin-left: 49.999999992%;
 }
 
 [dir=rtl] .nut-col-offset-12,
 .nut-rtl .nut-col-offset-12 {
   margin-left: 0;
-  margin-right: 50%;
+  margin-right: 49.999999992%;
 }
 
 .nut-col-12 {
-  width: 50%;
+  width: 49.999999992%;
 }
 
 .nut-col-offset-13 {
-  margin-left: 54.1666667%;
+  margin-left: 54.166666658%;
 }
 
 [dir=rtl] .nut-col-offset-13,
 .nut-rtl .nut-col-offset-13 {
   margin-left: 0;
-  margin-right: 54.1666667%;
+  margin-right: 54.166666658%;
 }
 
 .nut-col-13 {
-  width: 54.1666667%;
+  width: 54.166666658%;
 }
 
 .nut-col-offset-14 {
-  margin-left: 58.3333333%;
+  margin-left: 58.333333324%;
 }
 
 [dir=rtl] .nut-col-offset-14,
 .nut-rtl .nut-col-offset-14 {
   margin-left: 0;
-  margin-right: 58.3333333%;
+  margin-right: 58.333333324%;
 }
 
 .nut-col-14 {
-  width: 58.3333333%;
+  width: 58.333333324%;
 }
 
 .nut-col-offset-15 {
-  margin-left: 62.5%;
+  margin-left: 62.49999999%;
 }
 
 [dir=rtl] .nut-col-offset-15,
 .nut-rtl .nut-col-offset-15 {
   margin-left: 0;
-  margin-right: 62.5%;
+  margin-right: 62.49999999%;
 }
 
 .nut-col-15 {
-  width: 62.5%;
+  width: 62.49999999%;
 }
 
 .nut-col-offset-16 {
-  margin-left: 66.6666667%;
+  margin-left: 66.666666656%;
 }
 
 [dir=rtl] .nut-col-offset-16,
 .nut-rtl .nut-col-offset-16 {
   margin-left: 0;
-  margin-right: 66.6666667%;
+  margin-right: 66.666666656%;
 }
 
 .nut-col-16 {
-  width: 66.6666667%;
+  width: 66.666666656%;
 }
 
 .nut-col-offset-17 {
-  margin-left: 70.8333333%;
+  margin-left: 70.833333322%;
 }
 
 [dir=rtl] .nut-col-offset-17,
 .nut-rtl .nut-col-offset-17 {
   margin-left: 0;
-  margin-right: 70.8333333%;
+  margin-right: 70.833333322%;
 }
 
 .nut-col-17 {
-  width: 70.8333333%;
+  width: 70.833333322%;
 }
 
 .nut-col-offset-18 {
-  margin-left: 75%;
+  margin-left: 74.999999988%;
 }
 
 [dir=rtl] .nut-col-offset-18,
 .nut-rtl .nut-col-offset-18 {
   margin-left: 0;
-  margin-right: 75%;
+  margin-right: 74.999999988%;
 }
 
 .nut-col-18 {
-  width: 75%;
+  width: 74.999999988%;
 }
 
 .nut-col-offset-19 {
-  margin-left: 79.1666667%;
+  margin-left: 79.166666654%;
 }
 
 [dir=rtl] .nut-col-offset-19,
 .nut-rtl .nut-col-offset-19 {
   margin-left: 0;
-  margin-right: 79.1666667%;
+  margin-right: 79.166666654%;
 }
 
 .nut-col-19 {
-  width: 79.1666667%;
+  width: 79.166666654%;
 }
 
 .nut-col-offset-20 {
-  margin-left: 83.3333333%;
+  margin-left: 83.33333332%;
 }
 
 [dir=rtl] .nut-col-offset-20,
 .nut-rtl .nut-col-offset-20 {
   margin-left: 0;
-  margin-right: 83.3333333%;
+  margin-right: 83.33333332%;
 }
 
 .nut-col-20 {
-  width: 83.3333333%;
+  width: 83.33333332%;
 }
 
 .nut-col-offset-21 {
-  margin-left: 87.5%;
+  margin-left: 87.499999986%;
 }
 
 [dir=rtl] .nut-col-offset-21,
 .nut-rtl .nut-col-offset-21 {
   margin-left: 0;
-  margin-right: 87.5%;
+  margin-right: 87.499999986%;
 }
 
 .nut-col-21 {
-  width: 87.5%;
+  width: 87.499999986%;
 }
 
 .nut-col-offset-22 {
-  margin-left: 91.6666667%;
+  margin-left: 91.666666652%;
 }
 
 [dir=rtl] .nut-col-offset-22,
 .nut-rtl .nut-col-offset-22 {
   margin-left: 0;
-  margin-right: 91.6666667%;
+  margin-right: 91.666666652%;
 }
 
 .nut-col-22 {
-  width: 91.6666667%;
+  width: 91.666666652%;
 }
 
 .nut-col-offset-23 {
-  margin-left: 95.8333333%;
+  margin-left: 95.833333318%;
 }
 
 [dir=rtl] .nut-col-offset-23,
 .nut-rtl .nut-col-offset-23 {
   margin-left: 0;
-  margin-right: 95.8333333%;
+  margin-right: 95.833333318%;
 }
 
 .nut-col-23 {
-  width: 95.8333333%;
+  width: 95.833333318%;
 }
 
 .nut-col-offset-24 {
-  margin-left: 100%;
+  margin-left: 99.999999984%;
 }
 
 [dir=rtl] .nut-col-offset-24,
 .nut-rtl .nut-col-offset-24 {
   margin-left: 0;
-  margin-right: 100%;
+  margin-right: 99.999999984%;
 }
 
 .nut-col-24 {
-  width: 100%;
+  width: 99.999999984%;
 }

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-collapse-item {
   position: relative;
 }
@@ -24,7 +28,7 @@
   padding: var(--nutui-collapse-item-padding, 13px 26px);
   font-size: var(--nutui-collapse-item-font-size, var(--nutui-font-size-base, 14px));
   line-height: var(--nutui-collapse-item-line-height, 24px);
-  background-color: var(--nutui-color-background-overlay, #ffffff);
+  background-color: var(--nutui-gray-1);
   box-sizing: border-box;
 }
 .nut-collapse-item-header::after {
@@ -35,12 +39,12 @@
   right: 16px;
   left: 16px;
   bottom: 0;
-  border-bottom: var(--nutui-collapse-item-header-border-bottom, 1px solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
+  border-bottom: var(--nutui-collapse-item-header-border-bottom, 1px solid var(--nutui-black-3));
   -webkit-transform: scaleY(0.5);
   transform: scaleY(0.5);
 }
 .nut-collapse-item-title {
-  color: var(--nutui-collapse-item-color, var(--nutui-color-title, #1a1a1a));
+  color: var(--nutui-collapse-item-color, var(--nutui-gray-7));
   display: flex;
   align-items: center;
 }
@@ -52,13 +56,13 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: var(--nutui-collapse-item-extra-color, var(--nutui-color-text, #505259));
+  color: var(--nutui-collapse-item-extra-color, var(--nutui-gray-6));
 }
 .nut-collapse-item-icon-box {
   display: flex;
   width: 24px;
   position: relative;
-  color: var(--nutui-color-text, #505259);
+  color: var(--nutui-gray-6);
 }
 .nut-collapse-item-icon {
   display: flex;
@@ -71,25 +75,25 @@
   transition: transform 0.3s;
 }
 .nut-collapse-item-header.disabled {
-  color: var(--nutui-collapse-item-disabled-color, var(--nutui-color-text-disabled, #c2c4cc));
+  color: var(--nutui-collapse-item-disabled-color, var(--nutui-gray-4));
 }
 .nut-collapse-item-header.disabled .nut-collapse-item-title {
-  color: var(--nutui-collapse-item-disabled-color, var(--nutui-color-text-disabled, #c2c4cc));
+  color: var(--nutui-collapse-item-disabled-color, var(--nutui-gray-4));
 }
 .nut-collapse-item-header.disabled .nut-collapse-item-icon {
-  color: var(--nutui-collapse-item-disabled-color, var(--nutui-color-text-disabled, #c2c4cc));
+  color: var(--nutui-collapse-item-disabled-color, var(--nutui-gray-4));
 }
 .nut-collapse-item-content {
   overflow: hidden;
   display: block;
-  color: var(--nutui-collapse-wrapper-content-color, var(--nutui-color-text, #505259));
+  color: var(--nutui-collapse-wrapper-content-color, var(--nutui-gray-6));
   font-size: var(--nutui-collapse-wrapper-content-font-size, var(--nutui-font-size-base, 14px));
   line-height: var(--nutui-collapse-wrapper-content-line-height, 1.5);
-  background-color: var(--nutui-collapse-wrapper-content-background-color, var(--nutui-color-background-overlay, #ffffff));
+  background-color: var(--nutui-collapse-wrapper-content-background-color, var(--nutui-gray-1));
   transition: all 0.3s linear;
 }
 .nut-collapse-item-content-text {
-  color: var(--nutui-collapse-wrapper-content-color, var(--nutui-color-text, #505259));
+  color: var(--nutui-collapse-wrapper-content-color, var(--nutui-gray-6));
   padding: var(--nutui-collapse-wrapper-content-padding, 12px 26px);
 }
 

package/dist/es/packages/collapse/style/style.harmony.css

@@ -0,0 +1,4 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */