upd: theme perf (#2096)

* upd: theme perf

* upd: input readonly

src/packages/__VUE/actionsheet/index.scss

@@ -55,6 +55,7 @@
     //   height: 24px;
     padding: $actionsheet-item-padding;
     line-height: $actionsheet-item-line-height;
+    font-weight: $actionsheet-item-font-weight;
     font-size: $actionsheet-item-font-size;
     color: $actionsheet-item-font-color;
     text-align: center;
@@ -64,6 +65,7 @@
   }
 
   .desc {
+    font-weight: normal;
     font-size: $actionsheet-item-desc-font-size;
     color: $actionsheet-item-desc-font-color;
     cursor: default;
@@ -71,6 +73,8 @@
 
   .subdesc {
     display: block;
+    line-height: $actionsheet-item-subdesc-line-height;
+    font-weight: normal;
     font-size: $actionsheet-item-subdesc-font-size;
     color: $actionsheet-item-subdesc-font-color;
   }

src/packages/__VUE/divider/index.scss

@@ -8,7 +8,7 @@
   &::before,
   &::after {
     content: '';
-    border: $divider-line-height solid currentColor;
+    border: $divider-line-height solid $divider-border-color;
     border-width: $divider-line-height 0 0;
     height: $divider-line-height;
     flex: 1;

src/packages/__VUE/input/demo.vue

@@ -25,8 +25,18 @@
     />
     <nut-input :label="translate('tel')" :placeholder="translate('telPlaceholder')" v-model="state.tel" type="tel" />
     <h2>{{ translate('title2') }}</h2>
-    <nut-input :label="translate('text')" :placeholder="translate('readonly')" v-model="state.readonly" readonly />
-    <nut-input :label="translate('text')" :placeholder="translate('disabled')" v-model="state.disabled" disabled />
+    <nut-input
+      :label="translate('text')"
+      :placeholder="translate('readonly')"
+      :modelValue="translate('readonly')"
+      readonly
+    />
+    <nut-input
+      :label="translate('text')"
+      :placeholder="translate('disabled')"
+      :modelValue="translate('disabled')"
+      disabled
+    />
 
     <h2>{{ translate('title3') }}</h2>
     <nut-input

src/packages/__VUE/input/index.scss

@@ -39,6 +39,10 @@ textarea {
     border-bottom: 1px solid $input-border-bottom;
   }
 
+  .input-text::placeholder {
+    color: $input-placeholder-color;
+  }
+
   .input-text,
   &__text--readonly {
     width: 90%;
@@ -58,6 +62,7 @@ textarea {
     overflow: hidden;
     margin-right: 6px;
     text-align: left;
+    color: $input-label-color;
     .label-string {
       // overflow: hidden;
       // white-space: nowrap;
@@ -143,6 +148,11 @@ textarea {
       -webkit-text-fill-color: $input-disabled-color;
     }
   }
+  &-readonly {
+    input {
+      color: $input-readonly-color;
+    }
+  }
   &-error,
   &-error::placeholder {
     color: $input-required-color;

src/packages/__VUE/input/index.taro.vue

@@ -297,6 +297,7 @@ export default create({
       return {
         [prefixCls]: true,
         center: props.center,
+        [`${prefixCls}-readonly`]: props.readonly,
         [`${prefixCls}-disabled`]: props.disabled,
         [`${prefixCls}-required`]: props.required,
         [`${prefixCls}-error`]: props.error,

src/packages/__VUE/input/index.vue

@@ -270,6 +270,7 @@ export default create({
       return {
         [prefixCls]: true,
         center: props.center,
+        [`${prefixCls}-readonly`]: props.readonly,
         [`${prefixCls}-disabled`]: props.disabled,
         [`${prefixCls}-required`]: props.required,
         [`${prefixCls}-error`]: props.error,

src/packages/__VUE/noticebar/demo.vue

@@ -2,6 +2,8 @@
   <div class="demo full">
     <h2>{{ translate('basic') }}</h2>
     <nut-noticebar :text="translate('text')"></nut-noticebar>
+    <p />
+    <nut-noticebar left-icon="close" :text="translate('text')"></nut-noticebar>
 
     <h2>{{ translate('scrollable') }}</h2>
     <nut-noticebar :text="translate('textShort')" :scrollable="true"> </nut-noticebar>

src/packages/__VUE/numberkeyboard/index.scss

@@ -57,7 +57,7 @@
       flex: 1;
       flex-basis: 33%;
       box-sizing: border-box;
-      padding: 0 6px 6px 0;
+      padding: $numberkeyboard-wrapper-padding;
 
       .key {
         display: flex;
@@ -69,6 +69,7 @@
         background-color: $numberkeyboard-key-background-color;
         color: $numberkeyboard-key-font-size-color;
         border-radius: $numberkeyboard-key-border-radius;
+        box-shadow: $numberkeyboard-key-box-shadow;
         cursor: pointer;
       }
 

src/packages/__VUE/step/index.scss

@@ -54,11 +54,13 @@
   &-title {
     display: block;
     margin-bottom: $steps-base-title-margin-bottom;
+    line-height: $steps-base-title-line-height;
     font-size: $steps-base-title-font-size;
     color: $steps-base-title-color;
   }
   &-content {
     display: block;
+    line-height: $steps-base-content-line-height;
     font-size: $steps-base-content-font-size;
     color: $steps-base-content-color;
   }
@@ -193,6 +195,16 @@
     padding: $steps-vertical-main-padding;
     text-align: left;
   }
+  .nut-step-title {
+    line-height: $steps-vertical-title-line-height;
+    font-size: $steps-vertical-title-font-size;
+  }
+  .nut-step-icon {
+    width: $steps-vertical-icon-width;
+    height: $steps-vertical-icon-height;
+    line-height: $steps-vertical-icon-line-height;
+    font-size: $steps-vertical-icon-font-size;
+  }
   &.nut-steps-dot {
     .nut-step-head {
       margin-top: 7px;

src/packages/__VUE/tabbar/demo.vue

@@ -9,6 +9,15 @@
       <nut-tabbar-item :tab-title="translate('title')" icon="cart"></nut-tabbar-item>
       <nut-tabbar-item :tab-title="translate('title')" icon="my"></nut-tabbar-item>
     </nut-tabbar>
+    <p></p>
+    <nut-tabbar @tab-switch="tabSwitch" size="24">
+      <nut-tabbar-item :tab-title="translate('title')" icon="home"></nut-tabbar-item>
+      <nut-tabbar-item :tab-title="translate('title')" icon="category"></nut-tabbar-item>
+      <nut-tabbar-item :tab-title="translate('title')" icon="find"></nut-tabbar-item>
+      <nut-tabbar-item :tab-title="translate('title')" icon="cart"></nut-tabbar-item>
+      <nut-tabbar-item :tab-title="translate('title')" icon="my"></nut-tabbar-item>
+    </nut-tabbar>
+
     <h2>{{ translate('byName') }}</h2>
 
     <nut-tabbar @tab-switch="tabSwitch" v-model:visible="activeName">

src/packages/styles/variables-jdb.scss

@@ -227,6 +227,7 @@ $cell-group-background-color: $white !default;
 $divider-margin: 16px 0 !default;
 $divider-text-font-size: $font-size-2 !default;
 $divider-text-color: #909ca4 !default;
+$divider-border-color: currentColor !default;
 $divider-line-height: 2px !default;
 $divider-before-margin-right: 16px !default;
 $divider-after-margin-left: 16px !default;
@@ -265,8 +266,11 @@ $picker-columns-item-color: $title-color !default;
 
 //input
 $input-padding: 10px 25px;
+$input-label-color: unset !default;
 $input-line-height: 24px;
 $input-border-bottom: #eaf0fb !default;
+$input-placeholder-color: unset !default;
+$input-readonly-color: unset !default;
 $input-disabled-color: #c8c9cc !default;
 $input-required-color: $required-color !default;
 $input-font-size: $font-size-2 !default;
@@ -301,9 +305,11 @@ $inputnumber-display: flex !default;
 // actionsheet
 $actionsheet-light-color: #f6f6f6 !default;
 $actionsheet-item-border-bottom: none !default;
+$actionsheet-item-font-weight: unset !default;
 $actionsheet-item-font-size: $font-size-2 !default;
 $actionsheet-item-desc-font-size: $font-size-2 !default;
 $actionsheet-item-desc-font-color: #999 !default;
+$actionsheet-item-subdesc-line-height: unset !default;
 $actionsheet-item-subdesc-font-size: $font-size-1 !default;
 $actionsheet-item-subdesc-font-color: #999 !default;
 $actionsheet-item-cancel-border-top: 1px solid $actionsheet-light-color !default;
@@ -337,6 +343,7 @@ $numberkeyboard-key-active-background-color: #ebedf0 !default;
 $numberkeyboard-key-height: 48px !default;
 $numberkeyboard-key-line-height: 1.5 !default;
 $numberkeyboard-key-border-radius: 8px !default;
+$numberkeyboard-key-box-shadow: unset !default;
 $numberkeyboard-key-font-size: 28px !default;
 $numberkeyboard-key-font-size-color: #333 !default;
 $numberkeyboard-key-finish-font-size: 16px !default;
@@ -509,15 +516,23 @@ $steps-base-icon-width: 25px !default;
 $steps-base-icon-height: 25px !default;
 $steps-base-icon-line-height: 25px !default;
 $steps-base-icon-font-size: 13px !default;
+$steps-base-title-line-height: unset !default;
 $steps-base-title-font-size: 14px !default;
 $steps-base-line-color: #909ca4 !default;
 $steps-base-title-color: #909ca4 !default;
 $steps-base-title-margin-bottom: 10px !default;
+$steps-base-content-line-height: unset !default;
 $steps-base-content-font-size: 14px !default;
 $steps-base-content-color: #666 !default;
 $steps-horizontal-padding: 0 !default;
 $steps-vertical-padding: 0 !default;
 $steps-vertical-main-padding: 0 0 0 6% !default;
+$steps-vertical-title-line-height: unset !default;
+$steps-vertical-title-font-size: $steps-base-title-font-size !default;
+$steps-vertical-icon-width: $steps-base-icon-width !default;
+$steps-vertical-icon-height: $steps-base-icon-height !default;
+$steps-vertical-icon-line-height: $steps-base-icon-line-height !default;
+$steps-vertical-icon-font-size: $steps-base-icon-font-size !default;
 
 $steps-wait-icon-bg-color: #959fb1 !default;
 $steps-wait-icon-color: $white !default;

src/packages/styles/variables-jddkh.scss

@@ -158,6 +158,7 @@ $cell-group-background-color: $white !default;
 $divider-margin: 16px 0 !default;
 $divider-text-font-size: $font-size-2 !default;
 $divider-text-color: #909ca4 !default;
+$divider-border-color: currentColor !default;
 $divider-line-height: 2px !default;
 $divider-before-margin-right: 16px !default;
 $divider-after-margin-left: 16px !default;
@@ -196,8 +197,11 @@ $picker-columns-item-color: $title-color !default;
 
 //input
 $input-padding: 10px 25px;
+$input-label-color: unset !default;
 $input-line-height: 24px;
 $input-border-bottom: #eaf0fb !default;
+$input-placeholder-color: unset !default;
+$input-readonly-color: unset !default;
 $input-disabled-color: #c8c9cc !default;
 $input-required-color: $required-color !default;
 $input-font-size: $font-size-2 !default;
@@ -232,9 +236,11 @@ $inputnumber-display: inline-flex !default;
 // actionsheet
 $actionsheet-light-color: #f6f6f6 !default;
 $actionsheet-item-border-bottom: none !default;
+$actionsheet-item-font-weight: unset !default;
 $actionsheet-item-font-size: $font-size-2 !default;
 $actionsheet-item-desc-font-size: $font-size-2 !default;
 $actionsheet-item-desc-font-color: #999 !default;
+$actionsheet-item-subdesc-line-height: unset !default;
 $actionsheet-item-subdesc-font-size: $font-size-1 !default;
 $actionsheet-item-subdesc-font-color: #999 !default;
 $actionsheet-item-cancel-border-top: 1px solid $actionsheet-light-color !default;
@@ -268,6 +274,7 @@ $numberkeyboard-key-active-background-color: #ebedf0 !default;
 $numberkeyboard-key-height: 48px !default;
 $numberkeyboard-key-line-height: 1.5 !default;
 $numberkeyboard-key-border-radius: 8px !default;
+$numberkeyboard-key-box-shadow: unset !default;
 $numberkeyboard-key-font-size: 28px !default;
 $numberkeyboard-key-font-size-color: #333 !default;
 $numberkeyboard-key-finish-font-size: 16px !default;
@@ -440,15 +447,23 @@ $steps-base-icon-width: 25px !default;
 $steps-base-icon-height: 25px !default;
 $steps-base-icon-line-height: 25px !default;
 $steps-base-icon-font-size: 13px !default;
+$steps-base-title-line-height: unset !default;
 $steps-base-title-font-size: 14px !default;
 $steps-base-line-color: #909ca4 !default;
 $steps-base-title-color: #909ca4 !default;
 $steps-base-title-margin-bottom: 10px !default;
+$steps-base-content-line-height: unset !default;
 $steps-base-content-font-size: 14px !default;
 $steps-base-content-color: #666 !default;
 $steps-horizontal-padding: 0 !default;
 $steps-vertical-padding: 0 !default;
 $steps-vertical-main-padding: 0 0 0 6% !default;
+$steps-vertical-title-line-height: unset !default;
+$steps-vertical-title-font-size: $steps-base-title-font-size !default;
+$steps-vertical-icon-width: $steps-base-icon-width !default;
+$steps-vertical-icon-height: $steps-base-icon-height !default;
+$steps-vertical-icon-line-height: $steps-base-icon-line-height !default;
+$steps-vertical-icon-font-size: $steps-base-icon-font-size !default;
 
 $steps-wait-icon-bg-color: #959fb1 !default;
 $steps-wait-icon-color: $white !default;

src/packages/styles/variables-jdt.scss

@@ -15,7 +15,7 @@ $text-color: #808080 !default;
 $disable-color: #cccccc !default;
 $white: #fff !default;
 $black: #000 !default;
-$required-color: #fa2c19 !default;
+$required-color: #f52f3e !default;
 
 $dark-background: #131313 !default;
 $dark-background2: #1b1b1b !default;
@@ -144,7 +144,8 @@ $cell-group-background-color: $white !default;
 
 $divider-margin: 16px 0 !default;
 $divider-text-font-size: 16px !default;
-$divider-text-color: rgba(0, 0, 0, 0.3) !default;
+$divider-text-color: rgba(0, 0, 0, 0.85) !default;
+$divider-border-color: rgba(0, 0, 0, 0.1) !default;
 $divider-line-height: 1px !default;
 $divider-before-margin-right: 10px !default;
 $divider-after-margin-left: 10px !default;
@@ -183,9 +184,12 @@ $picker-columns-item-color: $title-color !default;
 
 //input
 $input-padding: 14px 16px;
+$input-label-color: rgba(0, 0, 0, 0.65) !default;
 $input-line-height: 22px;
 $input-border-bottom: #eaf0fb !default;
-$input-disabled-color: #c8c9cc !default;
+$input-placeholder-color: rgba(0, 0, 0, 0.25) !default;
+$input-readonly-color: rgba(0, 0, 0, 0.85) !default;
+$input-disabled-color: rgba(0, 0, 0, 0.45) !default;
 $input-required-color: $required-color !default;
 $input-font-size: $font-size-2 !default;
 
@@ -218,9 +222,11 @@ $inputnumber-display: flex !default;
 // actionsheet
 $actionsheet-light-color: #f6f6f6 !default;
 $actionsheet-item-border-bottom: 1px solid rgba(0, 0, 0, 0.1) !default;
+$actionsheet-item-font-weight: bold !default;
 $actionsheet-item-font-size: $font-size-4 !default;
 $actionsheet-item-desc-font-size: 16px !default;
 $actionsheet-item-desc-font-color: rgba(0, 0, 0, 0.45) !default;
+$actionsheet-item-subdesc-line-height: 18px !default;
 $actionsheet-item-subdesc-font-size: $font-size-1 !default;
 $actionsheet-item-subdesc-font-color: rgba(0, 0, 0, 0.45) !default;
 $actionsheet-item-cancel-border-top: none !default;
@@ -251,11 +257,12 @@ $numberkeyboard-body-padding: 10px 5px 0 10px !default;
 $numberkeyboard-wrapper-padding: 0 5px 5px 0 !default;
 $numberkeyboard-key-background-color: #fff !default;
 $numberkeyboard-key-active-background-color: #ebedf0 !default;
-$numberkeyboard-key-height: 48px !default;
+$numberkeyboard-key-height: 50px !default;
 $numberkeyboard-key-line-height: 1.5 !default;
-$numberkeyboard-key-border-radius: 8px !default;
-$numberkeyboard-key-font-size: 28px !default;
-$numberkeyboard-key-font-size-color: #333 !default;
+$numberkeyboard-key-border-radius: 4px !default;
+$numberkeyboard-key-box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.15) !default;
+$numberkeyboard-key-font-size: 24px !default;
+$numberkeyboard-key-font-size-color: #262626 !default;
 $numberkeyboard-key-finish-font-size: 16px !default;
 $numberkeyboard-key-finish-font-size-color: #fff !default;
 $numberkeyboard-key-finish-background-color: #1989fa !default;
@@ -291,7 +298,7 @@ $avatar-normal-width: 40px !default;
 $avatar-normal-height: 40px !default;
 
 //switch
-$switch-close-bg-color: #ebebeb !default;
+$switch-close-bg-color: rgba(0, 0, 0, 0.25) !default;
 $switch-close--cline-bg-color: #f0f0f0 !default;
 $switch-width: 50px !default;
 $switch-height: 27px !default;
@@ -412,19 +419,27 @@ $address-region-item-font-size: $font-size-1 !default;
 $address-item-margin-right: 9px !default;
 
 //steps
-$steps-base-icon-width: 18px !default;
-$steps-base-icon-height: 18px !default;
-$steps-base-icon-line-height: 18px !default;
+$steps-base-icon-width: 20px !default;
+$steps-base-icon-height: 20px !default;
+$steps-base-icon-line-height: 20px !default;
 $steps-base-icon-font-size: 12px !default;
+$steps-base-title-line-height: 18px !default;
 $steps-base-title-font-size: 12px !default;
 $steps-base-line-color: #d9d9d9 !default;
 $steps-base-title-color: rgba(0, 0, 0, 0.85) !default;
 $steps-base-title-margin-bottom: 6px !default;
+$steps-base-content-line-height: 16px !default;
 $steps-base-content-font-size: 10px !default;
 $steps-base-content-color: rgba(0, 0, 0, 0.65) !default;
 $steps-horizontal-padding: 8px 0 !default;
 $steps-vertical-padding: 0 16px !default;
 $steps-vertical-main-padding: 0 0 0 19px !default;
+$steps-vertical-title-line-height: 24px !default;
+$steps-vertical-title-font-size: 16px !default;
+$steps-vertical-icon-width: 22px !default;
+$steps-vertical-icon-height: 22px !default;
+$steps-vertical-icon-line-height: 22px !default;
+$steps-vertical-icon-font-size: 12px !default;
 
 $steps-wait-icon-bg-color: #d9d9d9 !default;
 $steps-wait-icon-color: $white !default;
@@ -493,11 +508,11 @@ $fixednav-item-active-color: $primary-color !default;
 $noticebar-background: #f2f8ff !default;
 $noticebar-color: #2c68ff !default;
 $noticebar-font-size: 14px !default;
-$noticebar-height: 40px !default;
-$noticebar-line-height: 24px !default;
+$noticebar-height: 36px !default;
+$noticebar-line-height: 20px !default;
 $noticebar-left-icon-width: 16px !default;
 $noticebar-right-icon-width: 16px !default;
-$noticebar-box-padding: 0 16px !default;
+$noticebar-box-padding: 0 8px !default;
 $noticebar-wrapable-padding: 16px !default;
 $noticebar-lefticon-margin: 0px 8px 0 0 !default;
 $noticebar-righticon-margin: 0px 0 0 8px !default;
@@ -621,8 +636,8 @@ $tabs-titles-border-radius: 0 !default;
 $tabs-titles-item-large-font-size: $font-size-4 !default;
 $tabs-titles-item-font-size: $font-size-3 !default;
 $tabs-titles-item-small-font-size: $font-size-2 !default;
-$tabs-titles-item-color: rgba(0, 0, 0, 0.45) !default;
-$tabs-titles-item-active-color: $title-color !default;
+$tabs-titles-item-color: rgba(0, 0, 0, 0.25) !default;
+$tabs-titles-item-active-color: rgba(0, 0, 0, 0.85) !default;
 $tabs-titles-background-color: #fff !default;
 $tabs-horizontal-tab-line-color: $primary-color !default;
 $tabs-horizontal-titles-height: 50px !default;

src/packages/styles/variables.scss

@@ -158,6 +158,7 @@ $cell-group-background-color: $white !default;
 $divider-margin: 16px 0 !default;
 $divider-text-font-size: $font-size-2 !default;
 $divider-text-color: #909ca4 !default;
+$divider-border-color: currentColor !default;
 $divider-line-height: 2px !default;
 $divider-before-margin-right: 16px !default;
 $divider-after-margin-left: 16px !default;
@@ -196,8 +197,11 @@ $picker-columns-item-color: $title-color !default;
 
 //input
 $input-padding: 10px 25px;
+$input-label-color: unset !default;
 $input-line-height: 24px;
 $input-border-bottom: #eaf0fb !default;
+$input-placeholder-color: unset !default;
+$input-readonly-color: unset !default;
 $input-disabled-color: #c8c9cc !default;
 $input-required-color: $required-color !default;
 $input-font-size: $font-size-2 !default;
@@ -232,9 +236,11 @@ $inputnumber-display: flex !default;
 // actionsheet
 $actionsheet-light-color: #f6f6f6 !default;
 $actionsheet-item-border-bottom: none !default;
+$actionsheet-item-font-weight: unset !default;
 $actionsheet-item-font-size: $font-size-2 !default;
 $actionsheet-item-desc-font-size: $font-size-2 !default;
 $actionsheet-item-desc-font-color: #999 !default;
+$actionsheet-item-subdesc-line-height: unset !default;
 $actionsheet-item-subdesc-font-size: $font-size-1 !default;
 $actionsheet-item-subdesc-font-color: #999 !default;
 $actionsheet-item-cancel-border-top: 1px solid $actionsheet-light-color !default;
@@ -268,6 +274,7 @@ $numberkeyboard-key-active-background-color: #ebedf0 !default;
 $numberkeyboard-key-height: 48px !default;
 $numberkeyboard-key-line-height: 1.5 !default;
 $numberkeyboard-key-border-radius: 8px !default;
+$numberkeyboard-key-box-shadow: unset !default;
 $numberkeyboard-key-font-size: 28px !default;
 $numberkeyboard-key-font-size-color: #333 !default;
 $numberkeyboard-key-finish-font-size: 16px !default;
@@ -440,15 +447,23 @@ $steps-base-icon-width: 25px !default;
 $steps-base-icon-height: 25px !default;
 $steps-base-icon-line-height: 25px !default;
 $steps-base-icon-font-size: 13px !default;
+$steps-base-title-line-height: unset !default;
 $steps-base-title-font-size: 14px !default;
 $steps-base-line-color: #909ca4 !default;
 $steps-base-title-color: #909ca4 !default;
 $steps-base-title-margin-bottom: 10px !default;
+$steps-base-content-line-height: unset !default;
 $steps-base-content-font-size: 14px !default;
 $steps-base-content-color: #666 !default;
 $steps-horizontal-padding: 0 !default;
 $steps-vertical-padding: 0 !default;
 $steps-vertical-main-padding: 0 0 0 6% !default;
+$steps-vertical-title-line-height: unset !default;
+$steps-vertical-title-font-size: $steps-base-title-font-size !default;
+$steps-vertical-icon-width: $steps-base-icon-width !default;
+$steps-vertical-icon-height: $steps-base-icon-height !default;
+$steps-vertical-icon-line-height: $steps-base-icon-line-height !default;
+$steps-vertical-icon-font-size: $steps-base-icon-font-size !default;
 
 $steps-wait-icon-bg-color: #959fb1 !default;
 $steps-wait-icon-color: $white !default;