fix(ConfigProvider): failed to set some basic theme vars (#12272)

* fix(ConfigProvider): failed to set some basic theme vars

* chore: add comments

packages/vant/src/config-provider/ConfigProvider.tsx

@@ -50,10 +50,16 @@ export const configProviderProps = {
 
 export type ConfigProviderProps = ExtractPropTypes<typeof configProviderProps>;
 
+/** map `gray1` to `gray-1` */
+function insertDash(str: string) {
+  return str.replace(/([a-zA-Z])(\d)/g, '$1-$2');
+}
+
 function mapThemeVarsToCSSVars(themeVars: Record<string, Numeric>) {
   const cssVars: Record<string, Numeric> = {};
   Object.keys(themeVars).forEach((key) => {
-    cssVars[`--van-${kebabCase(key)}`] = themeVars[key];
+    const formattedKey = insertDash(kebabCase(key));
+    cssVars[`--van-${formattedKey}`] = themeVars[key];
   });
   return cssVars;
 }

packages/vant/src/config-provider/test/index.spec.tsx

@@ -1,8 +1,8 @@
 import { ref } from 'vue';
-import { ConfigProvider } from '..';
+import { ConfigProvider, type ConfigProviderThemeVars } from '..';
 import { Icon } from '../../icon';
+import { Popup } from '../../popup';
 import { later, mount } from '../../../test';
-import Popup from '../../popup';
 
 test('should render tag prop correctly', () => {
   const wrapper = mount(ConfigProvider, {
@@ -60,6 +60,22 @@ test('should apply theme-vars-light in light mode', () => {
   );
 });
 
+test('should apply basic theme vars correctly', () => {
+  const wrapper = mount({
+    render() {
+      const themeVars: ConfigProviderThemeVars = {
+        gray1: '#111',
+        background2: 'red',
+      };
+      return <ConfigProvider themeVars={themeVars} />;
+    },
+  });
+
+  expect(wrapper.element.getAttribute('style')).toEqual(
+    '--van-gray-1: #111; --van-background-2: red;',
+  );
+});
+
 test('should apply theme-vars-dark in dark mode', () => {
   const wrapper = mount({
     render() {