fix(configprovide): change themeVars

jd/generate-nutui-taro-vue.cjs

@@ -19,7 +19,6 @@ config.nav.map((item) => {
     }
   });
 });
-let importCssVar = `import '../packages/styles/theme-deafult.scss';\n`;
 let installFunction = `function install(app: any) {
   const packages = [${packages.join(',')}];
   packages.forEach((item:any) => {
@@ -41,7 +40,6 @@ fs.outputFile(path.resolve(__dirname, '../src/packages/nutui.taro.vue.build.ts')
 });
 let fileStrDev = `${importStr}
 ${installFunction}
-${importCssVar}
 ${importScssStr}
 export { install, Locale, ${packages.join(',')}  };
 export default { install, version:'${packageConfig.version}', Locale};`;

jd/generate-nutui.cjs

@@ -16,7 +16,6 @@ config.nav.map((item) => {
     }
   });
 });
-let importCssVar = `import '../packages/styles/theme-deafult.scss';\n`;
 let installFunction = `function install(app: App) {
   const packages = [${packages.join(',')}];
   packages.forEach((item:any) => {
@@ -39,7 +38,6 @@ fs.outputFile(path.resolve(__dirname, '../src/packages/nutui.vue.build.ts'), fil
 
 let fileStrDev = `${importStr}
 ${installFunction}
-${importCssVar}
 ${importScssStr}
 export const testComponents = { ${packages.join(',')}};
 export { install, Locale, ${packages.join(',')}  };

src/packages/__VUE/configprovider/base.ts

@@ -1,42 +0,0 @@
-export const baseCSS = [
-  '--nut-primary-color',
-  '--nut-primary-color-end',
-  '--nut-help-color',
-  '--nut-active-color',
-  '--nut-title-color',
-  // 副标题
-  '--nut-title-color2',
-  // 次内容
-  '--nut-text-color',
-  // 特殊禁用色
-  '--nut-disable-color',
-  '--nut-white',
-  '--nut-black',
-  '--nut-required-color',
-
-  '--nut-dark-background',
-  '--nut-dark-background2',
-  '--nut-nut-dark-background3',
-  '--nut-nut-dark-background4',
-  '--nut-dark-background5',
-  '--nut-dark-background6',
-  '--nut-dark-background7',
-  '--nut-dark-color',
-  '--nut-dark-color2',
-  '--nut-dark-color3',
-  '--nut-dark-color-gray',
-  '--nut-dark-calendar-choose-color',
-  '--nut-font-family',
-  // Font
-  '--nut-font-size-0',
-  '--nut-font-size-1',
-  '--nut-font-size-2',
-  '--nut-font-size-3',
-  '--nut-font-size-4',
-  '--nut-font-weight-bold',
-
-  '--nut-font-size-small',
-  '--nut-font-size-base',
-  '--nut-font-size-large',
-  '--nut-line-height-base'
-];

src/packages/__VUE/configprovider/demo.vue

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

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

@@ -98,11 +98,17 @@ The ConfigProvider component provides the ability to override CSS variables. You
   export default {
     setup() {
       const range = ref(30);
-      const themeVars = {
-        rangeBgColor: 'rgba(25,137,250,0.15)',
-        rangeBarBgColor: '#0289fa',
-        rangeBarBtnBorder: '1px solid #0289fa'
+     const themeVars = {
+          primaryColor:'green',
+          primaryColorEnd:'green',
+          activeColor:'rgba(0,128,0,0.15)'
       };
+      // Of course, you can also choose to use component variables to replace. If both basic variables and component variables are set, the component variables will overwrite the basic variables
+      //  const themeVars = {
+      //   rangeBgColor: 'rgba(25,137,250,0.15)',
+      //   rangeBarBgColor: '#0289fa',
+      //   rangeBarBtnBorder: '1px solid #0289fa'
+      // };
 
       return { range, themeVars };
     }
@@ -126,6 +132,7 @@ 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

@@ -102,10 +102,16 @@ ConfigProvider 组件提供了覆盖 CSS 变量的能力，你需要在根节点
     setup() {
       const range = ref(30);
       const themeVars = {
-        rangeBgColor: 'rgba(25,137,250,0.15)',
-        rangeBarBgColor: '#0289fa',
-        rangeBarBtnBorder: '1px solid #0289fa'
+          primaryColor:'green',
+          primaryColorEnd:'green',
+          activeColor:'rgba(0,128,0,0.15)'
       };
+      // 当然，你也可以选择使用组件变量去替换，如果同时设置了基础变量和组件变量，组件变量会覆盖基础变量
+      //  const themeVars = {
+      //   rangeBgColor: 'rgba(25,137,250,0.15)',
+      //   rangeBarBgColor: '#0289fa',
+      //   rangeBarBtnBorder: '1px solid #0289fa'
+      // };
 
       return { range, themeVars };
     }
@@ -125,11 +131,12 @@ NutUI 中的 CSS 变量分为 **基础变量** 和 **组件变量**。组件变
 
 下面是所有的基础变量：
 ```less
+  // 主色调
   --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.taro.md

@@ -101,11 +101,17 @@ ConfigProvider 组件提供了覆盖 CSS 变量的能力，你需要在根节点
   export default {
     setup() {
       const range = ref(30);
-      const themeVars = {
-        rangeBgColor: 'rgba(25,137,250,0.15)',
-        rangeBarBgColor: '#0289fa',
-        rangeBarBtnBorder: '1px solid #0289fa'
+     const themeVars = {
+          primaryColor:'green',
+          primaryColorEnd:'green',
+          activeColor:'rgba(0,128,0,0.15)'
       };
+      // 当然，你也可以选择使用组件变量去替换，如果同时设置了基础变量和组件变量，组件变量会覆盖基础变量
+      //  const themeVars = {
+      //   rangeBgColor: 'rgba(25,137,250,0.15)',
+      //   rangeBarBgColor: '#0289fa',
+      //   rangeBarBtnBorder: '1px solid #0289fa'
+      // };
 
       return { range, themeVars };
     }
@@ -121,22 +127,15 @@ ConfigProvider 组件提供了覆盖 CSS 变量的能力，你需要在根节点
 
 NutUI 中的 CSS 变量分为 **基础变量** 和 **组件变量**。组件变量会继承基础变量，因此在修改基础变量后，会影响所有相关的组件。
 
-#### 修改变量
-
-由于 小程序 变量修改的原因，两者的修改方式有一定差异：
-
-- 基础变量只能通过 `page 选择器` 修改，不能通过 `ConfigProvider 组件` 修改。
-- 组件变量可以通过 `page 选择器` 和 `ConfigProvider 组件` 修改。
-
 #### 变量列表
 
 下面是所有的基础变量：
 ```less
   --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/index.vue

@@ -1,7 +1,6 @@
 <script lang="ts">
 import { createComponent } from '@/packages/utils/create';
 import { h, PropType } from 'vue';
-import { baseCSS } from './base';
 const { componentName, create } = createComponent('config-provider');
 export default /* @__PURE__ */ create({
   props: {
@@ -20,19 +19,6 @@ export default /* @__PURE__ */ create({
       Object.keys(themeVars).forEach((key) => {
         cssVars[`--nut-${kebabCase(key)}`] = themeVars[key];
       });
-      const base: Record<string, string> = {};
-      baseCSS.map((item: string, index) => {
-        Object.keys(cssVars).forEach((key) => {
-          if (key == item) {
-            base[key] = cssVars[key];
-          }
-        });
-      });
-      if (Object.keys(base).length != 0) {
-        Object.entries(base).forEach(([key, value]) => {
-          document.documentElement.style.setProperty(key, value);
-        });
-      }
       return cssVars;
     };
     return () => {

src/packages/styles/theme-deafult.scss

@@ -2,9 +2,10 @@
 page {
   --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;
   // 副标题
@@ -301,7 +302,7 @@ page {
 
   // calendar
   --nut-calendar-primary-color: var(--nut-primary-color);
-  --nut-calendar-choose-color: var(--nut-active-color);
+  --nut-calendar-choose-color: var(--nut-primary-color-active);
   --nut-calendar-choose-font-color: var(--nut-primary-color);
   --nut-calendar-base-color: #333333;
   --nut-calendar-disable-color: #d1d0d0;
@@ -367,7 +368,7 @@ page {
 
   //range
   --nut-range-tip-font-color: #333333;
-  --nut-range-bg-color: var(--nut-active-color);
+  --nut-range-bg-color: var(--nut-primary-color-active);
   --nut-range-bg-color-tick: #fa958c;
   --nut-range-bar-bg-color: linear-gradient(135deg, var(--nut-primary-color) 0%, var(--nut-primary-color-end) 100%);
   --nut-range-bar-btn-bg-color: var(--nut-white);
@@ -382,7 +383,11 @@ page {
   --nut-swiper-pagination-item-border-radius: 2px;
 
   //address
-  --nut-address-region-tab-line: linear-gradient(90deg, var(--nut-primary-color) 0%, var(--nut-active-color) 100%);
+  --nut-address-region-tab-line: linear-gradient(
+    90deg,
+    var(--nut-primary-color) 0%,
+    var(--nut-primary-color-active) 100%
+  );
   --nut-address-icon-color: var(--nut-primary-color);
   --nut-address-header-title-font-size: 18px;
   --nut-address-header-title-color: #262626;
@@ -445,7 +450,7 @@ page {
   --nut-radio-label-disable-color: #999;
   --nut-radio-icon-disable-color: #d6d6d6;
   --nut-radio-label-button-border-color: var(--nut-primary-color);
-  --nut-radio-label-button-background: var(--nut-active-color);
+  --nut-radio-label-button-background: var(--nut-primary-color-active);
   --nut-radio-label-margin-left: 15px;
   --nut-radio-button-border-radius: 15px;
   --nut-radio-label-font-size: 14px;
@@ -500,7 +505,7 @@ page {
   --nut-timeselect-timedetail-item-border-radius: 5px;
   --nut-timeselect-timedetail-item-text-color: #333333;
   --nut-timeselect-timedetail-item-text-font-size: var(--nut-font-size-2);
-  --nut-timeselect-timedetail-item-cur-bg-color: var(--nut-active-color);
+  --nut-timeselect-timedetail-item-cur-bg-color: var(--nut-primary-color-active);
   --nut-timeselect-timedetail-item-cur-border: var(--nut-primary-color);
   --nut-timeselect-timedetail-item-cur-text-color: var(--nut-primary-color);
   --nut-timeselect-timedetail-time-text-color: #999;
@@ -604,7 +609,7 @@ page {
   --nut-tabs-horizontal-tab-line-color: linear-gradient(
     90deg,
     var(--nut-primary-color) 0%,
-    var(--nut-active-color) 100%
+    var(--nut-primary-color-active) 100%
   );
   --nut-tabs-horizontal-titles-height: 46px;
   --nut-tabs-horizontal-titles-item-min-width: 50px;
@@ -612,7 +617,7 @@ page {
   --nut-tabs-vertical-tab-line-color: linear-gradient(
     180deg,
     var(--nut-primary-color) 0%,
-    var(--nut-active-color) 100%
+    var(--nut-primary-color-active) 100%
   );
   --nut-tabs-vertical-titles-item-height: 40px;
   --nut-tabs-vertical-titles-item-active-line-height: 14px;
@@ -729,7 +734,7 @@ page {
   --nut-sku-item-border: 1px solid var(--nut-primary-color);
   --nut-sku-item-disable-line: line-through;
   --nut-sku-opetate-bg-default: linear-gradient(90deg, var(--nut-primary-color), var(--nut-primary-color-end) 100%);
-  --nut-sku-item-active-bg: var(--nut-active-color);
+  --nut-sku-item-active-bg: var(--nut-primary-color-active);
   --nut-sku-opetate-bg-buy: linear-gradient(
     135deg,
     rgba(255, 186, 13, 1) 0%,

src/packages/styles/variables.scss

@@ -3,6 +3,7 @@
 // 主色调
 $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;
@@ -332,7 +333,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, rgba($primary-color, 0.15)) !default;
+$calendar-choose-color: var(--nut-calendar-choose-color, $primary-color-active) !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;
@@ -406,7 +407,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, rgba($primary-color, 0.15)) !default;
+$range-bg-color: var(--nut-range-bg-color, $primary-color-active) !default;
 $range-bg-color-tick: var(--nut-range-bg-color-tick, #fa958c) !default;
 $range-bar-bg-color: var(
   --nut-range-bar-bg-color,
@@ -426,7 +427,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%, rgba($primary-color, 0.15) 100%)
+  linear-gradient(90deg, $primary-color 0%, $primary-color-active 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;
@@ -490,7 +491,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, rgba($primary-color, 0.15)) !default;
+$radio-label-button-background: var(--nut-radio-label-button-background, $primary-color-active) !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;
@@ -550,7 +551,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,
-  rgba($primary-color, 0.15)
+  $primary-color-active
 ) !default;
 $timeselect-timedetail-item-cur-border: var(--nut-timeselect-timedetail-item-cur-border, $primary-color) !default;
 $timeselect-timedetail-item-cur-text-color: var(
@@ -665,14 +666,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%, rgba($primary-color, 0.15) 100%)
+  linear-gradient(90deg, $primary-color 0%, $primary-color-active 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%, rgba($primary-color, 0.15) 100%)
+  linear-gradient(180deg, $primary-color 0%, $primary-color-active 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;
@@ -790,7 +791,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, rgba($primary-color, 0.15)) !default;
+$sku-item-active-bg: var(--nut-sku-item-active-bg, $primary-color-active) !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%)

src/sites/mobile-taro/vue/src/basic/pages/configprovider/index.vue

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