chore: comp themes attr extract (#934)

src/packages/__VUE/address/index.scss

@@ -80,6 +80,7 @@
 
           .region-item-icon {
             margin-right: 6px;
+            color: $address-icon-color !important;
           }
         }
       }
@@ -115,6 +116,7 @@
           }
           .exist-item-icon {
             margin-right: 9px;
+            color: $address-icon-color !important;
           }
           span {
             display: inline-block;

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

@@ -56,7 +56,6 @@
                 class="region-item-icon"
                 type="self"
                 :name="selectedIcon"
-                color="#FA2C19"
                 size="13px"
                 v-if="selectedRegion[tabName[tabIndex]].id == item.id"
               ></nut-icon
@@ -104,7 +103,6 @@
                 class="exist-item-icon"
                 type="self"
                 :name="item.selectedAddress ? selectedIcon : defaultIcon"
-                :color="item.selectedAddress ? '#FA2C19' : ''"
                 size="13px"
               ></nut-icon>
               <div class="exist-item-info">

src/packages/__VUE/address/index.vue

@@ -50,7 +50,6 @@
                 class="region-item-icon"
                 type="self"
                 :name="selectedIcon"
-                color="#FA2C19"
                 size="13px"
                 v-if="selectedRegion[tabName[tabIndex]].id == item.id"
               ></nut-icon
@@ -98,7 +97,6 @@
                 class="exist-item-icon"
                 type="self"
                 :name="item.selectedAddress ? selectedIcon : defaultIcon"
-                :color="item.selectedAddress ? '#FA2C19' : ''"
                 size="13px"
               ></nut-icon>
               <div class="exist-item-info">

src/packages/__VUE/menu/index.scss

@@ -16,6 +16,10 @@
     color: $title-color;
     min-width: 0;
 
+    &.active {
+      color: $menu-item-active-text-color;
+    }
+
     &.disabled {
       color: $menu-item-disabled-color;
     }

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

@@ -5,7 +5,7 @@
         <view
           class="nut-menu__item"
           @click="!item.disabled && toggleItem(index)"
-          :class="{ disabled: item.disabled }"
+          :class="{ disabled: item.disabled, active: item.state.showPopup }"
           :style="{ color: item.state.showPopup ? activeColor : '' }"
         >
           <view class="nut-menu__title" :class="{ active: item.state.showPopup }">
@@ -27,7 +27,7 @@ export default create({
   props: {
     activeColor: {
       type: String,
-      default: '#FA2C19'
+      default: ''
     },
     overlay: {
       type: Boolean,

src/packages/__VUE/menu/index.vue

@@ -5,7 +5,7 @@
         <view
           class="nut-menu__item"
           @click="!item.disabled && toggleItem(index)"
-          :class="{ disabled: item.disabled }"
+          :class="{ disabled: item.disabled, active: item.state.showPopup }"
           :style="{ color: item.state.showPopup ? activeColor : '' }"
         >
           <view class="nut-menu__title" :class="{ active: item.state.showPopup }">
@@ -27,7 +27,7 @@ export default create({
   props: {
     activeColor: {
       type: String,
-      default: '#FA2C19'
+      default: ''
     },
     overlay: {
       type: Boolean,

src/packages/__VUE/menuitem/index.scss

@@ -1,6 +1,7 @@
 .nut-menu-item {
   .active {
     font-weight: 500;
+    color: $menu-item-active-text-color !important;
   }
 }
 

src/packages/__VUE/picker/index.scss

@@ -15,11 +15,7 @@
     z-index: 1;
     width: 100%;
     height: 100%;
-    background-image: linear-gradient(
-        180deg,
-        hsla(0, 0%, 100%, 0.9),
-        hsla(0, 0%, 100%, 0.4)
-      ),
+    background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.4)),
       linear-gradient(0deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.4));
     background-repeat: no-repeat;
     background-position: top, bottom;
@@ -44,7 +40,7 @@
     height: 100%;
   }
   &__left {
-    color: #fa2c19;
+    color: $picker-cancel-color;
     font-size: 16px;
   }
   &__button {

src/packages/__VUE/progress/demo.vue

@@ -10,12 +10,7 @@
     <h2>线形进度条-设置颜色高度</h2>
     <div>
       <nut-cell>
-        <nut-progress
-          percentage="30"
-          stroke-color=" rgba(250,44,25,0.47)"
-          stroke-width="20"
-          text-color="red"
-        />
+        <nut-progress percentage="30" stroke-color=" rgba(250,44,25,0.47)" stroke-width="20" text-color="red" />
       </nut-cell>
     </div>
     <h2>线形进度条-百分比不显示</h2>
@@ -39,16 +34,13 @@
     <h2>线形进度条-自定义尺寸(内置"small","base","large"三种规格)</h2>
     <div>
       <nut-cell>
-        <nut-progress percentage="30" :text-inside="true" size="small">
-        </nut-progress>
+        <nut-progress percentage="30" :text-inside="true" size="small"> </nut-progress>
       </nut-cell>
       <nut-cell>
-        <nut-progress percentage="50" :text-inside="true" size="base">
-        </nut-progress>
+        <nut-progress percentage="50" :text-inside="true" size="base"> </nut-progress>
       </nut-cell>
       <nut-cell>
-        <nut-progress percentage="70" :text-inside="true" size="large">
-        </nut-progress>
+        <nut-progress percentage="70" :text-inside="true" size="large"> </nut-progress>
       </nut-cell>
     </div>
     <h2>线形进度条-状态显示</h2>
@@ -61,11 +53,7 @@
         />
       </nut-cell>
       <nut-cell>
-        <nut-progress
-          percentage="50"
-          :stroke-width="strokeWidth"
-          status="icon"
-        />
+        <nut-progress percentage="50" :stroke-width="strokeWidth" status="icon" />
       </nut-cell>
       <nut-cell>
         <nut-progress
@@ -85,7 +73,7 @@
       </nut-cell>
       <nut-cell>
         <nut-button type="default" @click="setReduceVal">减少</nut-button>
-        <nut-button type="danger" @click="setAddVal">增加</nut-button>
+        <nut-button type="primary" @click="setAddVal">增加</nut-button>
       </nut-cell>
     </div>
   </div>

src/packages/__VUE/progress/index.scss

@@ -11,13 +11,7 @@
       width: 30%;
       height: 100%;
       border-radius: 12px;
-      background: linear-gradient(
-        268deg,
-        rgba(250, 44, 25, 1) 0%,
-        rgba(250, 63, 25, 1) 44.59259259%,
-        rgba(250, 89, 25, 1) 83.40740741%,
-        rgba(250, 100, 25, 1) 100%
-      );
+      background: $progress-inner-background-color;
       -webkit-transition: all 0.4s;
       transition: all 0.4s;
       position: relative;
@@ -89,7 +83,7 @@
   }
   .nut-progress-insidetext {
     padding: 3px 5px 3px 6px;
-    background: rgba(250, 44, 25, 1);
+    background: $progress-insidetext-background;
     border-radius: 5px;
     position: absolute;
     transition: all 0.4s;

src/packages/__VUE/sku/index.scss

@@ -65,7 +65,7 @@
           border: 1px solid rgba(242, 242, 242, 1);
 
           &.active {
-            background: rgba(252, 237, 235, 1);
+            background: $sku-item-active-bg;
             border: $sku-item-border;
             color: $primary-color;
           }

src/packages/__VUE/steps/demo.vue

@@ -8,9 +8,7 @@
         <nut-step title="步骤三">3</nut-step>
       </nut-steps>
       <div class="steps-button">
-        <nut-button type="danger" @click="handleStep('current1')"
-          >下一步</nut-button
-        >
+        <nut-button type="primary" @click="handleStep('current1')">下一步</nut-button>
       </div>
     </div>
     <h2>标题和描述信息</h2>
@@ -21,9 +19,7 @@
         <nut-step title="步骤三" content="步骤描述"></nut-step>
       </nut-steps>
       <div class="steps-button" style="margin-top: 10px">
-        <nut-button type="danger" @click="handleStep('current2')"
-          >下一步</nut-button
-        >
+        <nut-button type="primary" @click="handleStep('current2')">下一步</nut-button>
       </div>
     </div>
     <h2>自定义图标</h2>
@@ -37,27 +33,17 @@
     <h2>竖向步骤条</h2>
     <div class="steps-wrapper" style="height: 300px; padding: 15px 30px">
       <nut-steps direction="vertical" current="2">
-        <nut-step title="已完成" content="您的订单已经打包完成，商品已发出"
-          >1</nut-step
-        >
+        <nut-step title="已完成" content="您的订单已经打包完成，商品已发出">1</nut-step>
         <nut-step title="进行中" content="您的订单正在配送途中">2</nut-step>
-        <nut-step
-          title="未开始"
-          content="收货地址为：北京市经济技术开发区科创十一街18号院京东大厦"
-          >3</nut-step
-        >
+        <nut-step title="未开始" content="收货地址为：北京市经济技术开发区科创十一街18号院京东大厦">3</nut-step>
       </nut-steps>
     </div>
     <h2>竖向步骤条</h2>
     <div class="steps-wrapper" style="height: 300px; padding: 15px 40px">
       <nut-steps direction="vertical" progress-dot current="2">
-        <nut-step title="已完成" content="您的订单已经打包完成，商品已发出"
-          >1</nut-step
-        >
+        <nut-step title="已完成" content="您的订单已经打包完成，商品已发出">1</nut-step>
         <nut-step title="进行中" content="您的订单正在配送途中">2</nut-step>
-        <nut-step
-          title="未开始"
-          content="<p>收货地址为：</p><p>北京市经济技术开发区科创十一街18号院京东大厦</p>"
+        <nut-step title="未开始" content="<p>收货地址为：</p><p>北京市经济技术开发区科创十一街18号院京东大厦</p>"
           >3</nut-step
         >
       </nut-steps>

src/packages/styles/variables.scss

@@ -119,6 +119,9 @@ $uploader-picture-width: 100px !default;
 $uploader-picture-height: 100px !default;
 $uploader-background: #f7f8fa !default;
 
+// picker
+$picker-cancel-color: $primary-color !default;
+
 //input
 $input-border-bottom: #eaf0fb !default;
 $input-disabled-color: #c8c9cc !default;
@@ -148,7 +151,7 @@ $actionsheet-light-color: #f6f6f6 !default;
 //shortpassword
 $shortpassword-background-color: rgba(245, 245, 245, 1) !default;
 $shortpassword-border-color: #ddd !default;
-$shortpassword-error: rgba(242, 39, 12, 1) !default;
+$shortpassword-error: $primary-color !default;
 $shortpassword-forget: rgba(128, 128, 128, 1) !default;
 
 //large price
@@ -243,7 +246,8 @@ $rang-bg-color: rgba($primary-color, 0.5) !default;
 $rang-bar-bg-color: linear-gradient(135deg, $primary-color 0%, $primary-color-end 100%) !default;
 
 //address
-$address-region-tab-line: linear-gradient(90deg, #f5503a 0%, #fad1cb 100%) !default;
+$address-region-tab-line: linear-gradient(90deg, $primary-color 0%, rgba($primary-color, 0.15) 100%) !default;
+$address-icon-color: $primary-color !default;
 
 //steps
 $step-wait-bg-color: #959fb1 !default;
@@ -258,17 +262,17 @@ $checkbox-icon-disable-color: #d6d6d6 !default;
 
 //radio
 $radio-label-font-color: #1d1e1e !default;
-$radio-label-font-active-color: #f0250f !default;
+$radio-label-font-active-color: $primary-color !default;
 $radio-label-disable-color: #999 !default;
 $radio-icon-disable-color: #d6d6d6 !default;
-$radio-label-button-border-color: #f0250f !default;
-$radio-label-button-background: rgba(240, 37, 15, 0.05) !default;
+$radio-label-button-border-color: $primary-color !default;
+$radio-label-button-background: rgba($primary-color, 0.05) !default;
 
 //fixednav
 $fixednav-bg-color: $white !default;
 $fixednav-font-color: $black !default;
 $fixednav-index: 201 !default;
-$fixednav-btn-bg: linear-gradient(135deg, rgba(250, 25, 44, 1) 0%, rgba(250, 63, 25, 1) 100%) !default;
+$fixednav-btn-bg: linear-gradient(135deg, $primary-color 0%, $primary-color-end 100%) !default;
 
 // NoticeBar
 $noticebar-font-size: 14px !default;
@@ -293,9 +297,9 @@ $timedetail-item-bg-color: #f6f7f9 !default;
 $timedetail-item-border-radius: 5px !default;
 $timedetail-item-text-color: #333333 !default;
 $timedetail-item-text-font-size: $font-size-2 !default;
-$timedetail-item-cur-bg-color: #fef4f3 !default;
-$timedetail-item-cur-border: #f0250f !default;
-$timedetail-item-cur-text-color: #f0250f !default;
+$timedetail-item-cur-bg-color: rgba($primary-color, 0.15) !default;
+$timedetail-item-cur-border: $primary-color !default;
+$timedetail-item-cur-text-color: $primary-color !default;
 $timedetail-time-text-color: #999 !default;
 $timedetail-time-font-size: $font-size-1 !default;
 
@@ -329,17 +333,15 @@ $popover-border-bottom-color: rgba(229, 229, 229, 1) !default;
 $popover-primary-text-color: rgba(51, 51, 51, 1) !default;
 $popover-disable-color: rgba(154, 155, 157, 1) !default;
 
+//progress
+$progress-inner-background-color: linear-gradient(135deg, $primary-color 0%, $primary-color-end 100%) !default;
+$progress-insidetext-background: $primary-color !default;
+
 //pagination
 $pagination-color: $primary-color !default;
 $pagination-font-size: $font-size-2 !default;
 $pagination-item-border-color: #e4e7eb !default;
-$pagination-active-background-color: linear-gradient(
-  135deg,
-  rgba(250, 44, 25, 1) 0%,
-  rgba(250, 63, 25, 1) 44.59259259%,
-  rgba(250, 89, 25, 1) 83.40740741%,
-  rgba(250, 100, 25, 1) 100%
-) !default;
+$pagination-active-background-color: linear-gradient(135deg, $primary-color 0%, $primary-color-end 100%) !default;
 $pagination-disable-color: rgba(116, 116, 116, 0.31) !default;
 $pagination-disable-background-color: #f7f8fa !default;
 $pagination-item-border-width: 1px !default;
@@ -354,11 +356,11 @@ $tabs-titles-item-font-size: $font-size-2 !default;
 $tabs-titles-item-small-font-size: $font-size-1 !default;
 $tabs-titles-item-color: $title-color !default;
 $tabs-titles-background-color: $help-color !default;
-$tabs-horizontal-tab-line-color: linear-gradient(90deg, #f5503a 0%, #fad1cb 100%) !default;
+$tabs-horizontal-tab-line-color: linear-gradient(90deg, $primary-color 0%, rgba($primary-color, 0.15) 100%) !default;
 $tabs-horizontal-titles-height: 46px !default;
 $tabs-horizontal-titles-item-min-width: 50px !default;
 $tabs-horizontal-titles-item-active-line-width: 40px !default;
-$tabs-vertical-tab-line-color: linear-gradient(180deg, #f5503a 0%, #fad1cb 100%) !default;
+$tabs-vertical-tab-line-color: linear-gradient(180deg, $primary-color 0%, rgba($primary-color, 0.15) 100%) !default;
 $tabs-vertical-titles-item-height: 40px !default;
 $tabs-vertical-titles-item-active-line-height: 14px !default;
 $tabs-vertical-titles-width: 100px !default;
@@ -373,6 +375,7 @@ $indicator-border-size: $indicator-size + 2 !default;
 
 // menu
 $menu-bar-line-height: 46px !default;
+$menu-item-active-text-color: $primary-color !default;
 $menu-bar-border-bottom-color: #eaf0fb !default;
 $menu-bar-opened-z-index: 2001 !default;
 $menu-item-disabled-color: #969799 !default;
@@ -417,20 +420,16 @@ $form-item-required-color: $primary-color !default;
 $form-item-error-message-color: $primary-color !default;
 
 // sku
-$sku-item-border: 1px solid $primary-color;
-$sku-item-disable-line: line-through;
-$sku-opetate-bg-default: linear-gradient(
-  135deg,
-  rgba(242, 20, 12, 1) 0%,
-  rgba(242, 39, 12, 1) 70%,
-  rgba(242, 77, 12, 1) 100%
-);
+$sku-item-border: 1px solid $primary-color !default;
+$sku-item-disable-line: line-through !default;
+$sku-opetate-bg-default: linear-gradient(90deg, $primary-color, $primary-color-end 100%) !default;
+$sku-item-active-bg: rgba($primary-color, 0.15) !default;
 $sku-opetate-bg-buy: linear-gradient(
   135deg,
   rgba(255, 186, 13, 1) 0%,
   rgba(255, 195, 13, 1) 69%,
   rgba(255, 207, 13, 1) 100%
-);
+) !default;
 
 // card
 $card-font-size-0: $font-size-0;

src/sites/mobile-taro/vue/src/feedback/pages/progress/index.vue

@@ -10,12 +10,7 @@
     <h2>线形进度条-设置颜色高度</h2>
     <div>
       <nut-cell>
-        <nut-progress
-          percentage="30"
-          stroke-color=" rgba(250,44,25,0.47)"
-          stroke-width="20"
-          text-color="red"
-        />
+        <nut-progress percentage="30" stroke-color=" rgba(250,44,25,0.47)" stroke-width="20" text-color="red" />
       </nut-cell>
     </div>
     <h2>线形进度条-百分比不显示</h2>
@@ -42,8 +37,7 @@
         <nut-progress percentage="30" size="small"> </nut-progress>
       </nut-cell>
       <nut-cell>
-        <nut-progress percentage="50" :text-inside="true" size="base">
-        </nut-progress>
+        <nut-progress percentage="50" :text-inside="true" size="base"> </nut-progress>
       </nut-cell>
       <nut-cell>
         <nut-progress percentage="70" size="large"> </nut-progress>
@@ -59,11 +53,7 @@
         />
       </nut-cell>
       <nut-cell>
-        <nut-progress
-          percentage="50"
-          :stroke-width="strokeWidth"
-          status="wrong"
-        />
+        <nut-progress percentage="50" :stroke-width="strokeWidth" status="wrong" />
       </nut-cell>
       <nut-cell>
         <nut-progress
@@ -83,7 +73,7 @@
       </nut-cell>
       <nut-cell>
         <nut-button type="default" @click="setReduceVal">减少</nut-button>
-        <nut-button type="danger" @click="setAddVal">增加</nut-button>
+        <nut-button type="primary" @click="setAddVal">增加</nut-button>
       </nut-cell>
     </div>
   </div>

src/sites/mobile-taro/vue/src/feedback/pages/steps/index.vue

@@ -8,9 +8,7 @@
         <nut-step title="步骤三">3</nut-step>
       </nut-steps>
       <div class="steps-button">
-        <nut-button type="danger" @click="handleStep('current1')"
-          >下一步</nut-button
-        >
+        <nut-button type="primary" @click="handleStep('current1')">下一步</nut-button>
       </div>
     </div>
     <h2>标题和描述信息</h2>
@@ -21,9 +19,7 @@
         <nut-step title="步骤三" content="步骤描述"></nut-step>
       </nut-steps>
       <div class="steps-button" style="margin-top: 10px">
-        <nut-button type="danger" @click="handleStep('current2')"
-          >下一步</nut-button
-        >
+        <nut-button type="primary" @click="handleStep('current2')">下一步</nut-button>
       </div>
     </div>
     <h2>自定义图标</h2>
@@ -37,27 +33,17 @@
     <h2>竖向步骤条</h2>
     <div class="steps-wrapper" style="height: 300px; padding: 15px 30px">
       <nut-steps direction="vertical" current="2">
-        <nut-step title="已完成" content="您的订单已经打包完成，商品已发出"
-          >1</nut-step
-        >
+        <nut-step title="已完成" content="您的订单已经打包完成，商品已发出">1</nut-step>
         <nut-step title="进行中" content="您的订单正在配送途中">2</nut-step>
-        <nut-step
-          title="未开始"
-          content="收货地址为：北京市经济技术开发区科创十一街18号院京东大厦"
-          >3</nut-step
-        >
+        <nut-step title="未开始" content="收货地址为：北京市经济技术开发区科创十一街18号院京东大厦">3</nut-step>
       </nut-steps>
     </div>
     <h2>竖向步骤条</h2>
     <div class="steps-wrapper" style="height: 300px; padding: 15px 40px">
       <nut-steps direction="vertical" progress-dot current="2">
-        <nut-step title="已完成" content="您的订单已经打包完成，商品已发出"
-          >1</nut-step
-        >
+        <nut-step title="已完成" content="您的订单已经打包完成，商品已发出">1</nut-step>
         <nut-step title="进行中" content="您的订单正在配送途中">2</nut-step>
-        <nut-step
-          title="未开始"
-          content="<p>收货地址为：</p><p>北京市经济技术开发区科创十一街18号院京东大厦</p>"
+        <nut-step title="未开始" content="<p>收货地址为：</p><p>北京市经济技术开发区科创十一街18号院京东大厦</p>"
           >3</nut-step
         >
       </nut-steps>