fix(configprovide): delete active-color

src/packages/__VUE/configprovider/demo.vue

@@ -201,9 +201,8 @@ export default createDemo({
       }
     });
     let color = reactive({
-      primaryColor: 'green',
-      primaryColorEnd: 'green',
-      primaryColorActive: 'rgba(0,128,0,0.15)'
+      primaryColor: '#008000',
+      primaryColorEnd: '#008000'
       // rangeBgColor: 'rgba(25,137,250,0.15)',
       // rangeBarBgColor: '#0289fa',
       // rangeBarBtnBorder: '1px solid #0289fa'

src/packages/__VUE/configprovider/doc.en-US.md

@@ -132,7 +132,6 @@ Here are all the base variables:
 ```scss
   --nut-primary-color: #fa2c19;
   --nut-primary-color-end: #fa6419;
-  --nut-primary-color-active: rgba(250, 44, 25, 0.15);
   --nut-help-color: #f5f5f5;
   --nut-active-color: rgba(250, 44, 25, 0.15);
   --nut-title-color: #1a1a1a;

src/packages/__VUE/configprovider/doc.md

@@ -66,8 +66,6 @@ NutUI组件可以通过 [CSS 变量](https://developer.mozilla.org/zh-CN/docs/We
 :root {
     --nut-primary-color: #fa2c19;
     --nut-primary-color-end: #fa6419;
-    --nut-help-color: #f5f5f5;
-    --nut-active-color: rgba(250, 44, 25, 0.15);
 }
 ```
 
@@ -102,9 +100,8 @@ ConfigProvider 组件提供了覆盖 CSS 变量的能力，你需要在根节点
     setup() {
       const range = ref(30);
       const themeVars = {
-          primaryColor:'green',
-          primaryColorEnd:'green',
-          activeColor:'rgba(0,128,0,0.15)'
+          primaryColor:'#008000',
+          primaryColorEnd:'#008000',
       };
       // 当然，你也可以选择使用组件变量去替换，如果同时设置了基础变量和组件变量，组件变量会覆盖基础变量。
       //  const themeVars = {
@@ -127,6 +124,24 @@ ConfigProvider 组件提供了覆盖 CSS 变量的能力，你需要在根节点
 
 NutUI 中的 CSS 变量分为 **基础变量** 和 **组件变量**。组件变量会继承基础变量，因此在修改基础变量后，会影响所有相关的组件。
 
+#### 修改变量
+
+- 基础变量中的主色调需要您使用十六进制色值来进行覆盖，请勿使用类似于`red`,`green`来进行覆盖
+
+- 基础变量和组件变量都能通过 `:root 选择器`和 `ConfigProvider 组件`，推荐您使用`ConfigProvider 组件`来修改主色调，因为部分组件的变量激活色使用的是`rgba`属性，使用`:root 选择器`修改主色调会有部分组件变量不生效：
+```less
+// 如果您仍旧选择使用:root 选择器来进行修改主色调，您还需要修改以下8个组件变量色
+
+--nut-calendar-choose-color: rgba(primaryColor,0.09);
+--nut-range-bg-color: rgba(primaryColor,0.5);
+--nut-address-region-tab-line: linear-gradient(90deg, primaryColor 0%, rgba(primaryColor,0.15) 100%)  ; 
+--nut-radio-label-button-background: rgba(primaryColor,0.05);
+--nut-timeselect-timedetail-item-cur-bg-color: rgba(primaryColor,0.15);
+--nut-tabs-horizontal-tab-line-color: rgba(primaryColor,0.15);
+--nut-tabs-vertical-tab-line-color: linear-gradient(180deg, primaryColor 0%, rgba(primaryColor,0.15) 100%);
+--nut-sku-item-active-bg: rgba(primaryColor,0.15);
+```
+
 #### 变量列表
 
 下面是所有的基础变量：
@@ -134,7 +149,6 @@ NutUI 中的 CSS 变量分为 **基础变量** 和 **组件变量**。组件变
   // 主色调
   --nut-primary-color: #fa2c19;
   --nut-primary-color-end: #fa6419;
-  --nut-primary-color-active: rgba(250, 44, 25, 0.15);
   // 辅助色
   --nut-help-color: #f5f5f5;
   // 标题常规文字

src/packages/__VUE/configprovider/doc.taro.md

@@ -102,9 +102,8 @@ ConfigProvider 组件提供了覆盖 CSS 变量的能力，你需要在根节点
     setup() {
       const range = ref(30);
      const themeVars = {
-          primaryColor:'green',
-          primaryColorEnd:'green',
-          activeColor:'rgba(0,128,0,0.15)'
+          primaryColor:'#008000',
+          primaryColorEnd:'#008000',
       };
       // 当然，你也可以选择使用组件变量去替换，如果同时设置了基础变量和组件变量，组件变量会覆盖基础变量
       //  const themeVars = {
@@ -127,13 +126,28 @@ ConfigProvider 组件提供了覆盖 CSS 变量的能力，你需要在根节点
 
 NutUI 中的 CSS 变量分为 **基础变量** 和 **组件变量**。组件变量会继承基础变量，因此在修改基础变量后，会影响所有相关的组件。
 
+#### 修改变量
+- 基础变量中的主色调需要您使用十六进制色值来进行覆盖，请勿使用类似于`red`,`green`来进行覆盖
+- 基础变量和组件变量都能通过 `page`和 `ConfigProvider 组件`，推荐您使用`ConfigProvider 组件`来修改主色调，因为部分组件的变量激活色使用的是`rgba`属性，使用`page`修改主色调会有部分组件变量不生效：
+```less
+// 如果您仍旧选择使用 page 来进行修改主色调，您还需要修改以下8个组件变量色
+
+--nut-calendar-choose-color: rgba(primaryColor,0.09);
+--nut-range-bg-color: rgba(primaryColor,0.5);
+--nut-address-region-tab-line: linear-gradient(90deg, primaryColor 0%, rgba(primaryColor,0.15) 100%)  ; 
+--nut-radio-label-button-background: rgba(primaryColor,0.05);
+--nut-timeselect-timedetail-item-cur-bg-color: rgba(primaryColor,0.15);
+--nut-tabs-horizontal-tab-line-color: rgba(primaryColor,0.15);
+--nut-tabs-vertical-tab-line-color: linear-gradient(180deg, primaryColor 0%, rgba(primaryColor,0.15) 100%);
+--nut-sku-item-active-bg: rgba(primaryColor,0.15);
+```
+
 #### 变量列表
 
 下面是所有的基础变量：
 ```less
   --nut-primary-color: #fa2c19;
   --nut-primary-color-end: #fa6419;
-  --nut-primary-color-active: rgba(250, 44, 25, 0.15);
   // 辅助色
   --nut-help-color: #f5f5f5;
   // 标题常规文字

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

@@ -13,9 +13,48 @@ export default create({
       str = str.replace(str.charAt(0), str.charAt(0).toLocaleLowerCase());
       return str.replace(/([a-z])([A-Z])/g, (_, p1, p2) => p1 + '-' + p2.toLowerCase());
     };
+    const colorRgb = (str: string) => {
+      if (!str) return;
+      var sColor = str.toLowerCase();
+      //十六进制颜色值的正则表达式
+      var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
+      // 如果是16进制颜色
+      if (sColor && reg.test(sColor)) {
+        if (sColor.length === 4) {
+          var sColorNew = '#';
+          for (var i = 1; i < 4; i += 1) {
+            sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
+          }
+          sColor = sColorNew;
+        }
+        //处理六位的颜色值
+        var sColorChange = [];
+        for (var i = 1; i < 7; i += 2) {
+          sColorChange.push(parseInt('0x' + sColor.slice(i, i + 2)));
+        }
+        return sColorChange.join(',');
+      }
+      return null;
+    };
     const mapThemeVarsToCSSVars = (themeVars: Record<string, string>) => {
       if (!themeVars) return;
       const cssVars: Record<string, string> = {};
+      const primaryColor = props?.themeVars?.primaryColor;
+      // 为了处理一些组件的rgba透明颜色
+      if (primaryColor) {
+        cssVars[`--nut-calendar-choose-color`] = `rgba(${colorRgb(primaryColor)},0.09)`;
+        cssVars[`--nut-range-bg-color`] = `rgba(${colorRgb(primaryColor)},0.5)`;
+        cssVars[`--nut-address-region-tab-line`] = `linear-gradient(90deg, ${primaryColor} 0%, rgba(${colorRgb(
+          primaryColor
+        )},0.15) 100%)   `;
+        cssVars[`--nut-radio-label-button-background`] = `rgba(${colorRgb(primaryColor)},0.05)`;
+        cssVars[`--nut-timeselect-timedetail-item-cur-bg-color`] = `rgba(${colorRgb(primaryColor)},0.15)`;
+        cssVars[`--nut-tabs-horizontal-tab-line-color`] = `rgba(${colorRgb(primaryColor)},0.15)`;
+        cssVars[`--nut-tabs-vertical-tab-line-color`] = `linear-gradient(180deg, ${primaryColor} 0%, rgba(${colorRgb(
+          primaryColor
+        )},0.15) 100%)   `;
+        cssVars[`--nut-sku-item-active-bg`] = `rgba(${colorRgb(primaryColor)},0.15)`;
+      }
       Object.keys(themeVars).forEach((key) => {
         cssVars[`--nut-${kebabCase(key)}`] = themeVars[key];
       });

src/packages/__VUE/configprovider/index.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
 import { createComponent } from '@/packages/utils/create';
-import { h, PropType } from 'vue';
+import { h, nextTick, onMounted, PropType } from 'vue';
 const { componentName, create } = createComponent('config-provider');
 export default create({
   props: {
@@ -13,12 +13,53 @@ export default create({
       str = str.replace(str.charAt(0), str.charAt(0).toLocaleLowerCase());
       return str.replace(/([a-z])([A-Z])/g, (_, p1, p2) => p1 + '-' + p2.toLowerCase());
     };
+    const colorRgb = (str: string) => {
+      if (!str) return;
+      var sColor = str.toLowerCase();
+      //十六进制颜色值的正则表达式
+      var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
+      // 如果是16进制颜色
+      if (sColor && reg.test(sColor)) {
+        if (sColor.length === 4) {
+          var sColorNew = '#';
+          for (var i = 1; i < 4; i += 1) {
+            sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
+          }
+          sColor = sColorNew;
+        }
+        //处理六位的颜色值
+        var sColorChange = [];
+        for (var i = 1; i < 7; i += 2) {
+          sColorChange.push(parseInt('0x' + sColor.slice(i, i + 2)));
+        }
+        return sColorChange.join(',');
+      }
+      return null;
+    };
+
     const mapThemeVarsToCSSVars = (themeVars: Record<string, string>) => {
       if (!themeVars) return;
       const cssVars: Record<string, string> = {};
+      const primaryColor = props?.themeVars?.primaryColor;
+      // 为了处理一些组件的rgba透明颜色
+      if (primaryColor) {
+        cssVars[`--nut-calendar-choose-color`] = `rgba(${colorRgb(primaryColor)},0.09)`;
+        cssVars[`--nut-range-bg-color`] = `rgba(${colorRgb(primaryColor)},0.5)`;
+        cssVars[`--nut-address-region-tab-line`] = `linear-gradient(90deg, ${primaryColor} 0%, rgba(${colorRgb(
+          primaryColor
+        )},0.15) 100%)   `;
+        cssVars[`--nut-radio-label-button-background`] = `rgba(${colorRgb(primaryColor)},0.05)`;
+        cssVars[`--nut-timeselect-timedetail-item-cur-bg-color`] = `rgba(${colorRgb(primaryColor)},0.15)`;
+        cssVars[`--nut-tabs-horizontal-tab-line-color`] = `rgba(${colorRgb(primaryColor)},0.15)`;
+        cssVars[`--nut-tabs-vertical-tab-line-color`] = `linear-gradient(180deg, ${primaryColor} 0%, rgba(${colorRgb(
+          primaryColor
+        )},0.15) 100%)   `;
+        cssVars[`--nut-sku-item-active-bg`] = `rgba(${colorRgb(primaryColor)},0.15)`;
+      }
       Object.keys(themeVars).forEach((key) => {
         cssVars[`--nut-${kebabCase(key)}`] = themeVars[key];
       });
+
       return cssVars;
     };
     return () => {

src/packages/styles/theme-deafult.scss

@@ -2,7 +2,6 @@
 page {
   --nut-primary-color: #fa2c19;
   --nut-primary-color-end: #fa6419;
-  --nut-primary-color-active: rgba(250, 44, 25, 0.15);
   // 辅助色
   --nut-help-color: #f5f5f5;
 

src/packages/styles/variables.scss

@@ -3,7 +3,6 @@
 // 主色调
 $primary-color: var(--nut-primary-color, #fa2c19) !default;
 $primary-color-end: var(--nut-primary-color-end, #fa6419) !default;
-$primary-color-active: var(--nut-primary-color-active, rgba(250, 44, 25, 0.15)) !default;
 
 // 辅助色
 $help-color: var(--nut-help-color, #f5f5f5) !default;
@@ -333,7 +332,7 @@ $backtop-border-color: var(--nut-backtop-border-color, #e0e0e0) !default;
 
 // calendar
 $calendar-primary-color: var(--nut-calendar-primary-color, $primary-color) !default;
-$calendar-choose-color: var(--nut-calendar-choose-color, $primary-color-active) !default;
+$calendar-choose-color: var(--nut-calendar-choose-color, rgba(#fa2c19, 0.09)) !default;
 $calendar-choose-font-color: var(--nut-calendar-choose-font-color, $primary-color) !default;
 $calendar-base-color: var(--nut-calendar-base-color, #333333) !default;
 $calendar-disable-color: var(--nut-calendar-disable-color, #d1d0d0) !default;
@@ -407,7 +406,7 @@ $infiniteloading-bottom-color: var(--nut-infiniteloading-bottom-color, #c8c8c8)
 
 //range
 $range-tip-font-color: var(--nut-range-tip-font-color, #333333) !default;
-$range-bg-color: var(--nut-range-bg-color, $primary-color-active) !default;
+$range-bg-color: var(--nut-range-bg-color, rgba(#fa2c19, 0.5)) !default;
 $range-bg-color-tick: var(--nut-range-bg-color-tick, #fa958c) !default;
 $range-bar-bg-color: var(
   --nut-range-bar-bg-color,
@@ -427,7 +426,7 @@ $swiper-pagination-item-border-radius: var(--nut-swiper-pagination-item-border-r
 //address
 $address-region-tab-line: var(
   --nut-address-region-tab-line,
-  linear-gradient(90deg, $primary-color 0%, $primary-color-active 100%)
+  linear-gradient(90deg, $primary-color 0%, rgba(#fa2c19, 0.15) 100%)
 ) !default;
 $address-icon-color: var(--nut-address-icon-color, $primary-color) !default;
 $address-header-title-font-size: var(--nut-address-header-title-font-size, 18px) !default;
@@ -491,7 +490,7 @@ $radio-label-font-active-color: var(--nut-radio-label-font-active-color, $primar
 $radio-label-disable-color: var(--nut-radio-label-disable-color, #999) !default;
 $radio-icon-disable-color: var(--nut-radio-icon-disable-color, #d6d6d6) !default;
 $radio-label-button-border-color: var(--nut-radio-label-button-border-color, $primary-color) !default;
-$radio-label-button-background: var(--nut-radio-label-button-background, $primary-color-active) !default;
+$radio-label-button-background: var(--nut-radio-label-button-background, rgba(#fa2c19, 0.05)) !default;
 $radio-label-margin-left: var(--nut-radio-label-margin-left, 15px) !default;
 $radio-button-border-radius: var(--nut-radio-button-border-radius, 15px) !default;
 $radio-label-font-size: var(--nut-radio-label-font-size, 14px) !default;
@@ -551,7 +550,7 @@ $timeselect-timedetail-item-text-color: var(--nut-timeselect-timedetail-item-tex
 $timeselect-timedetail-item-text-font-size: var(--nut-timeselect-timedetail-item-text-font-size, $font-size-2) !default;
 $timeselect-timedetail-item-cur-bg-color: var(
   --nut-timeselect-timedetail-item-cur-bg-color,
-  $primary-color-active
+  rgba(#fa2c19, 0.15)
 ) !default;
 $timeselect-timedetail-item-cur-border: var(--nut-timeselect-timedetail-item-cur-border, $primary-color) !default;
 $timeselect-timedetail-item-cur-text-color: var(
@@ -666,14 +665,14 @@ $tabs-titles-item-active-color: var(--nut-tabs-titles-item-active-color, $title-
 $tabs-titles-background-color: var(--nut-tabs-titles-background-color, $help-color) !default;
 $tabs-horizontal-tab-line-color: var(
   --nut-tabs-horizontal-tab-line-color,
-  linear-gradient(90deg, $primary-color 0%, $primary-color-active 100%)
+  linear-gradient(90deg, $primary-color 0%, rgba(#fa2c19, 0.15) 100%)
 ) !default;
 $tabs-horizontal-titles-height: var(--nut-tabs-horizontal-titles-height, 46px) !default;
 $tabs-horizontal-titles-item-min-width: var(--nut-tabs-horizontal-titles-item-min-width, 50px) !default;
 $tabs-horizontal-titles-item-active-line-width: var(--nut-tabs-horizontal-titles-item-active-line-width, 40px) !default;
 $tabs-vertical-tab-line-color: var(
   --nut-tabs-vertical-tab-line-color,
-  linear-gradient(180deg, $primary-color 0%, $primary-color-active 100%)
+  linear-gradient(180deg, $primary-color 0%, rgba(#fa2c19, 0.15) 100%)
 ) !default;
 $tabs-vertical-titles-item-height: var(--nut-tabs-vertical-titles-item-height, 40px) !default;
 $tabs-vertical-titles-item-active-line-height: var(--nut-tabs-vertical-titles-item-active-line-height, 14px) !default;
@@ -791,7 +790,7 @@ $sku-opetate-bg-default: var(
   --nut-sku-opetate-bg-default,
   linear-gradient(90deg, $primary-color, $primary-color-end 100%)
 ) !default;
-$sku-item-active-bg: var(--nut-sku-item-active-bg, $primary-color-active) !default;
+$sku-item-active-bg: var(--nut-sku-item-active-bg, rgba(#fa2c19, 0.15)) !default;
 $sku-opetate-bg-buy: var(
   --nut-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%)