fix(configprovide): variable does not take effect

src/packages/__VUE/configprovider/base.ts

@@ -0,0 +1,42 @@
+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/common.ts

@@ -1,34 +0,0 @@
-import { h, PropType } from 'vue';
-export const component = {
-  props: {
-    theme: { type: String, default: '' },
-    themeVars: { type: Object, default: () => {} },
-    tag: { type: String as PropType<keyof HTMLElementTagNameMap>, default: 'div' }
-  },
-  setup(props: any, { slots }: any) {
-    const kebabCase = (str: string): string => {
-      str = str.replace(str.charAt(0), str.charAt(0).toLocaleLowerCase());
-      return str.replace(/([a-z])([A-Z])/g, (_, p1, p2) => p1 + '-' + p2.toLowerCase());
-    };
-    const mapThemeVarsToCSSVars = (themeVars: Record<string, string>) => {
-      if (!themeVars) return;
-      const cssVars: Record<string, string> = {};
-      Object.keys(themeVars).forEach((key) => {
-        cssVars[`--nut-${kebabCase(key)}`] = themeVars[key];
-      });
-      return cssVars;
-    };
-    console.log(mapThemeVarsToCSSVars(props.themeVars));
-
-    return () => {
-      return h(
-        props.tag,
-        {
-          class: `nut-theme-${props.theme}`,
-          style: mapThemeVarsToCSSVars(props.themeVars)
-        },
-        slots.default?.()
-      );
-    };
-  }
-};

src/packages/__VUE/configprovider/demo.vue

@@ -200,12 +200,12 @@ export default createDemo({
         }
       }
     });
-
-    const themeVars = {
+    let color = reactive({
       rangeBgColor: 'rgba(25,137,250,0.15)',
       rangeBarBgColor: '#0289fa',
       rangeBarBtnBorder: '1px solid #0289fa'
-    };
+    });
+    const themeVars = color;
     return {
       formData2,
       addressModule,

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

@@ -119,12 +119,6 @@ The ConfigProvider component provides the ability to override CSS variables. You
 
 CSS variables in NutUI are divided into **basic variable** and **component variable**. Component variables inherit the base variable, so after modifying the base variable, it will affect all related components.
 
-### modify variable
-
-Due to the CSS variable inheritance mechanism, the modification methods of the two are somewhat different:
-
-- Base variables can only be modified by the `:root selector`, not by the `ConfigProvider component`.
-- Component variables can be modified via `:root selector` and `ConfigProvider component`.
 
 ### variable list
 

src/packages/__VUE/configprovider/doc.md

@@ -121,13 +121,6 @@ ConfigProvider 组件提供了覆盖 CSS 变量的能力，你需要在根节点
 
 NutUI 中的 CSS 变量分为 **基础变量** 和 **组件变量**。组件变量会继承基础变量，因此在修改基础变量后，会影响所有相关的组件。
 
-#### 修改变量
-
-由于 CSS 变量继承机制的原因，两者的修改方式有一定差异：
-
-- 基础变量只能通过 `:root 选择器` 修改，不能通过 `ConfigProvider 组件` 修改。
-- 组件变量可以通过 `:root 选择器` 和 `ConfigProvider 组件` 修改。
-
 #### 变量列表
 
 下面是所有的基础变量：

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

@@ -123,7 +123,7 @@ NutUI 中的 CSS 变量分为 **基础变量** 和 **组件变量**。组件变
 
 #### 修改变量
 
-由于 CSS 变量继承机制的原因，两者的修改方式有一定差异：
+由于 小程序 变量修改的原因，两者的修改方式有一定差异：
 
 - 基础变量只能通过 `page 选择器` 修改，不能通过 `ConfigProvider 组件` 修改。
 - 组件变量可以通过 `page 选择器` 和 `ConfigProvider 组件` 修改。

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

@@ -1,6 +1,36 @@
 <script lang="ts">
 import { createComponent } from '@/packages/utils/create';
+import { h, PropType } from 'vue';
 const { componentName, create } = createComponent('config-provider');
-import { component } from './common';
-export default /* @__PURE__ */ create(component);
+export default /* @__PURE__ */ create({
+  props: {
+    theme: { type: String, default: '' },
+    themeVars: { type: Object, default: () => {} },
+    tag: { type: String as PropType<keyof HTMLElementTagNameMap>, default: 'div' }
+  },
+  setup(props: any, { slots }: any) {
+    const kebabCase = (str: string): string => {
+      str = str.replace(str.charAt(0), str.charAt(0).toLocaleLowerCase());
+      return str.replace(/([a-z])([A-Z])/g, (_, p1, p2) => p1 + '-' + p2.toLowerCase());
+    };
+    const mapThemeVarsToCSSVars = (themeVars: Record<string, string>) => {
+      if (!themeVars) return;
+      const cssVars: Record<string, string> = {};
+      Object.keys(themeVars).forEach((key) => {
+        cssVars[`--nut-${kebabCase(key)}`] = themeVars[key];
+      });
+      return cssVars;
+    };
+    return () => {
+      return h(
+        props.tag,
+        {
+          class: `nut-theme-${props.theme}`,
+          style: mapThemeVarsToCSSVars(props.themeVars)
+        },
+        slots.default?.()
+      );
+    };
+  }
+});
 </script>

src/packages/__VUE/configprovider/index.vue

@@ -1,6 +1,50 @@
 <script lang="ts">
 import { createComponent } from '@/packages/utils/create';
+import { h, PropType } from 'vue';
+import { baseCSS } from './base';
 const { componentName, create } = createComponent('config-provider');
-import { component } from './common';
-export default /* @__PURE__ */ create(component);
+export default /* @__PURE__ */ create({
+  props: {
+    theme: { type: String, default: '' },
+    themeVars: { type: Object, default: () => {} },
+    tag: { type: String as PropType<keyof HTMLElementTagNameMap>, default: 'div' }
+  },
+  setup(props: any, { slots }: any) {
+    const kebabCase = (str: string): string => {
+      str = str.replace(str.charAt(0), str.charAt(0).toLocaleLowerCase());
+      return str.replace(/([a-z])([A-Z])/g, (_, p1, p2) => p1 + '-' + p2.toLowerCase());
+    };
+    const mapThemeVarsToCSSVars = (themeVars: Record<string, string>) => {
+      if (!themeVars) return;
+      const cssVars: Record<string, string> = {};
+      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 () => {
+      return h(
+        props.tag,
+        {
+          class: `nut-theme-${props.theme}`,
+          style: mapThemeVarsToCSSVars(props.themeVars)
+        },
+        slots.default?.()
+      );
+    };
+  }
+});
 </script>

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

@@ -58,6 +58,14 @@
         </nut-form-item>
       </nut-form>
     </nut-config-provider>
+    <h2>动态主题</h2>
+    <nut-config-provider :theme-vars="themeVars">
+      <nut-form>
+        <nut-form-item label="滑块">
+          <nut-range hidden-tag v-model="formData2.range"></nut-range>
+        </nut-form-item>
+      </nut-form>
+    </nut-config-provider>
   </div>
 </template>
 <script lang="ts">
@@ -134,12 +142,19 @@ export default {
         }
       }
     });
+    let color = reactive({
+      rangeBgColor: 'rgba(25,137,250,0.15)',
+      rangeBarBgColor: 'green',
+      rangeBarBtnBorder: '1px solid #0289fa'
+    });
+    const themeVars = color;
 
     return {
       formData2,
       addressModule,
       switchChecked,
       switchChange,
+      themeVars,
       theme
     };
   }