chore: update branches in GitHub actions

.github/workflows/deploy-v4-site.yml

@@ -2,7 +2,7 @@ name: Deploy V4 Site
 
 on:
   push:
-    branches: [next]
+    branches: [dev]
     paths:
       - 'packages/vant/docs/**'
 

.github/workflows/sync-gitee.yml

@@ -2,7 +2,7 @@ name: Sync to Gitee
 
 on:
   push:
-    branches: [dev, 2.x, gh-pages]
+    branches: [dev, 2.x, 3.x, gh-pages]
 
   workflow_dispatch:
 

packages/vant-cli/site/common/style/vars.less

@@ -1,4 +1,4 @@
-:root {
+body {
   // colors
   --van-doc-black: #000;
   --van-doc-white: #fff;

packages/vant-cli/site/desktop/components/Header.vue

@@ -138,8 +138,8 @@ export default {
     currentTheme: {
       handler(newVal, oldVal) {
         window.localStorage.setItem('vantTheme', newVal);
-        document.documentElement.classList.remove(`van-doc-theme-${oldVal}`);
-        document.documentElement.classList.add(`van-doc-theme-${newVal}`);
+        document.body.classList.remove(`van-doc-theme-${oldVal}`);
+        document.body.classList.add(`van-doc-theme-${newVal}`);
         syncThemeToChild(newVal);
       },
       immediate: true,

packages/vant-cli/site/mobile/App.vue

@@ -24,15 +24,12 @@ export default {
     watch(
       theme,
       (newVal, oldVal) => {
-        document.documentElement.classList.remove(`van-doc-theme-${oldVal}`);
-        document.documentElement.classList.add(`van-doc-theme-${newVal}`);
+        document.body.classList.remove(`van-doc-theme-${oldVal}`);
+        document.body.classList.add(`van-doc-theme-${newVal}`);
 
         const { darkModeClass } = config.site;
         if (darkModeClass) {
-          document.documentElement.classList.toggle(
-            darkModeClass,
-            newVal === 'dark'
-          );
+          document.body.classList.toggle(darkModeClass, newVal === 'dark');
         }
       },
       { immediate: true }
@@ -46,7 +43,6 @@ export default {
 
 body {
   min-width: 100vw;
-  background-color: inherit;
 }
 
 .van-doc-theme-light {

packages/vant-popperjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vant/popperjs",
-  "version": "1.3.0",
+  "version": "1.2.1",
   "description": "Pre-compiled popperjs core",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.mjs",
@@ -36,8 +36,10 @@
   "bugs": "https://github.com/vant-ui/vant/issues",
   "author": "chenjiahan",
   "license": "MIT",
+  "dependencies": {
+    "@popperjs/core": "^2.11.6"
+  },
   "devDependencies": {
-    "@popperjs/core": "^2.11.6",
     "esbuild": "^0.14.54",
     "release-it": "^15.4.1",
     "typescript": "^4.8.2"

packages/vant-popperjs/src/index.ts

@@ -1,6 +1,6 @@
 import { createPopper } from '@popperjs/core/lib/popper-lite';
 import offsetModifier from '@popperjs/core/lib/modifiers/offset';
-import type { Instance } from '@popperjs/core';
+import type { Instance, Placement } from '@popperjs/core';
 
 export { createPopper, offsetModifier };
-export type { Instance };
+export type { Instance, Placement };

packages/vant/.stylelintignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+lib
+*.tsx

packages/vant/docs/markdown/changelog.en-US.md

@@ -19,35 +19,6 @@ Vant follows [Semantic Versioning 2.0.0](https://semver.org/lang/zh-CN/).
 
 ## Details
 
-### [v4.0.0-rc.2](https://github.com/vant-ui/vant/compare/v4.0.0-rc.1...v4.0.0-rc.2)
-
-`2022-09-11`
-
-**Breaking Changes**
-
-- attach css variables to :root element [#11026](https://github.com/vant-ui/vant/issues/11026)
-
-**Bug Fixes**
-
-- Dialog: incorrect transform behavior [#11028](https://github.com/vant-ui/vant/issues/11028)
-- Empty: fix opacity in dark mode [#11027](https://github.com/vant-ui/vant/issues/11027)
-
-### [v4.0.0-rc.1](https://github.com/vant-ui/vant/compare/v4.0.0-rc.0...v4.0.0-rc.1)
-
-`2022-09-10`
-
-**Feature**
-
-- export props of all components [#11024](https://github.com/vant-ui/vant/issues/11024)
-- Dialog: message-align can be justify [#11014](https://github.com/vant-ui/vant/issues/11014)
-- Image: add block prop [#11022](https://github.com/vant-ui/vant/issues/11022)
-- Toast: add message slot [#11018](https://github.com/vant-ui/vant/issues/11018)
-
-**Bug Fixes**
-
-- Picker: failed to update value in some cases [#11009](https://github.com/vant-ui/vant/issues/11009)
-- Locale: avoid getting unexpected value [#11010](https://github.com/vant-ui/vant/issues/11010)
-
 ### [v4.0.0-rc.0](https://github.com/vant-ui/vant/compare/v3.6.2...v4.0.0-rc.0)
 
 `2022-09-04`

packages/vant/docs/markdown/changelog.zh-CN.md

@@ -19,35 +19,6 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
 
 ## 更新内容
 
-### [v4.0.0-rc.2](https://github.com/vant-ui/vant/compare/v4.0.0-rc.1...v4.0.0-rc.2)
-
-`2022-09-11`
-
-**Breaking Changes**
-
-- 调整了所有 CSS 变量的挂载位置，由 `body` 节点调整回 `:root` 节点，调整后与 Vant v3 版本保持一致，以便于 v3 项目更平滑地升级到 v4 版本。 [#11026](https://github.com/vant-ui/vant/issues/11026)
-
-**Bug Fixes**
-
-- Dialog: 修复过渡动画异常的问题 [#11028](https://github.com/vant-ui/vant/issues/11028)
-- Empty: 修复深色模式下亮度过高的问题 [#11027](https://github.com/vant-ui/vant/issues/11027)
-
-### [v4.0.0-rc.1](https://github.com/vant-ui/vant/compare/v4.0.0-rc.0...v4.0.0-rc.1)
-
-`2022-09-10`
-
-**Feature**
-
-- 导出所有组件的 props，方便进行二次封装 [#11024](https://github.com/vant-ui/vant/issues/11024)
-- Dialog: message-align 属性支持设置为 justify [#11014](https://github.com/vant-ui/vant/issues/11014)
-- Image: 新增 block 属性 [#11022](https://github.com/vant-ui/vant/issues/11022)
-- Toast: 新增 message 插槽 [#11018](https://github.com/vant-ui/vant/issues/11018)
-
-**Bug Fixes**
-
-- Picker: 修复部分情况下未正确更新选中值的问题 [#11009](https://github.com/vant-ui/vant/issues/11009)
-- Locale: 修复读取 i18n 文案时可能获取到 JS 原生方法的问题 [#11010](https://github.com/vant-ui/vant/issues/11010)
-
 ### [v4.0.0-rc.0](https://github.com/vant-ui/vant/compare/v3.6.2...v4.0.0-rc.0)
 
 `2022-09-04`

packages/vant/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vant",
-  "version": "4.0.0-rc.3",
+  "version": "4.0.0-rc.0",
   "description": "Mobile UI Components built on Vue",
   "main": "lib/vant.cjs.js",
   "module": "es/index.mjs",

packages/vant/src/action-bar-button/index.less

@@ -1,4 +1,4 @@
-:root {
+body {
   --van-action-bar-button-height: 40px;
   --van-action-bar-button-warning-color: var(--van-gradient-orange);
   --van-action-bar-button-danger-color: var(--van-gradient-red);

packages/vant/src/action-bar-button/index.ts

@@ -5,7 +5,6 @@ export const ActionBarButton = withInstall(_ActionBarButton);
 export default ActionBarButton;
 export { actionBarButtonProps } from './ActionBarButton';
 export type { ActionBarButtonProps } from './ActionBarButton';
-export type { ActionBarButtonThemeVars } from './types';
 
 declare module 'vue' {
   export interface GlobalComponents {

packages/vant/src/action-bar-button/types.ts

@@ -1,5 +0,0 @@
-export type ActionBarButtonThemeVars = {
-  actionBarButtonHeight?: string;
-  actionBarButtonWarningColor?: string;
-  actionBarButtonDangerColor?: string;
-};

packages/vant/src/action-bar-icon/index.less

@@ -1,4 +1,4 @@
-:root {
+body {
   --van-action-bar-icon-width: 48px;
   --van-action-bar-icon-height: 100%;
   --van-action-bar-icon-color: var(--van-text-color);

packages/vant/src/action-bar-icon/index.ts

@@ -5,7 +5,6 @@ export const ActionBarIcon = withInstall(_ActionBarIcon);
 export default ActionBarIcon;
 export { actionBarIconProps } from './ActionBarIcon';
 export type { ActionBarIconProps } from './ActionBarIcon';
-export type { ActionBarIconThemeVars } from './types';
 
 declare module 'vue' {
   export interface GlobalComponents {

packages/vant/src/action-bar-icon/types.ts

@@ -1,10 +0,0 @@
-export type ActionBarIconThemeVars = {
-  actionBarIconWidth?: string;
-  actionBarIconHeight?: string;
-  actionBarIconColor?: string;
-  actionBarIconSize?: string;
-  actionBarIconFontSize?: string;
-  actionBarIconActiveColor?: string;
-  actionBarIconTextColor?: string;
-  actionBarIconBackground?: string;
-};

packages/vant/src/action-bar/index.less

@@ -1,4 +1,4 @@
-:root {
+body {
   --van-action-bar-background: var(--van-background-2);
   --van-action-bar-height: 50px;
 }

packages/vant/src/action-bar/index.ts

@@ -5,7 +5,6 @@ export const ActionBar = withInstall(_ActionBar);
 export default ActionBar;
 export { actionBarProps } from './ActionBar';
 export type { ActionBarProps } from './ActionBar';
-export type { ActionBarThemeVars } from './types';
 
 declare module 'vue' {
   export interface GlobalComponents {

packages/vant/src/action-bar/types.ts

@@ -1,4 +0,0 @@
-export type ActionBarThemeVars = {
-  actionBarBackground?: string;
-  actionBarHeight?: string;
-};

packages/vant/src/action-sheet/README.md

@@ -179,7 +179,6 @@ export default {
 | closeable | Whether to show close icon | _boolean_ | `true` |
 | close-icon | Close icon name | _string_ | `cross` |
 | duration | Transition duration, unit second | _number \| string_ | `0.3` |
-| z-index | Set the z-index to a fixed value | _number \| string_ | `2000+` |
 | round | Whether to show round corner | _boolean_ | `true` |
 | overlay | Whether to show overlay | _boolean_ | `true` |
 | overlay-class | Custom overlay class | _string \| Array \| object_ | - |

packages/vant/src/action-sheet/README.zh-CN.md

@@ -189,7 +189,6 @@ export default {
 | closeable | 是否显示关闭图标 | _boolean_ | `true` |
 | close-icon | 关闭图标名称或图片链接，等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | `cross` |
 | duration | 动画时长，单位秒，设置为 0 可以禁用动画 | _number \| string_ | `0.3` |
-| z-index | 将面板的 z-index 层级设置为一个固定值 | _number \| string_ | `2000+` |
 | round | 是否显示圆角 | _boolean_ | `true` |
 | overlay | 是否显示遮罩层 | _boolean_ | `true` |
 | overlay-class | 自定义遮罩层类名 | _string \| Array \| object_ | - |

packages/vant/src/action-sheet/index.less

@@ -1,6 +1,6 @@
 @import '../style/mixins/hairline';
 
-:root {
+body {
   --van-action-sheet-max-height: 80%;
   --van-action-sheet-header-height: 48px;
   --van-action-sheet-header-font-size: var(--van-font-size-lg);

packages/vant/src/action-sheet/index.ts

@@ -5,7 +5,6 @@ export const ActionSheet = withInstall(_ActionSheet);
 export default ActionSheet;
 export { actionSheetProps } from './ActionSheet';
 export type { ActionSheetProps, ActionSheetAction } from './ActionSheet';
-export type { ActionSheetThemeVars } from './types';
 
 declare module 'vue' {
   export interface GlobalComponents {

packages/vant/src/action-sheet/types.ts

@@ -1,23 +0,0 @@
-export type ActionSheetThemeVars = {
-  actionSheetMaxHeight?: string;
-  actionSheetHeaderHeight?: string;
-  actionSheetHeaderFontSize?: string;
-  actionSheetDescriptionColor?: string;
-  actionSheetDescriptionFontSize?: string;
-  actionSheetDescriptionLineHeight?: number | string;
-  actionSheetItemBackground?: string;
-  actionSheetItemFontSize?: string;
-  actionSheetItemLineHeight?: number | string;
-  actionSheetItemTextColor?: string;
-  actionSheetItemDisabledTextColor?: string;
-  actionSheetSubnameColor?: string;
-  actionSheetSubnameFontSize?: string;
-  actionSheetSubnameLineHeight?: number | string;
-  actionSheetCloseIconSize?: string;
-  actionSheetCloseIconColor?: string;
-  actionSheetCloseIconPadding?: string;
-  actionSheetCancelTextColor?: string;
-  actionSheetCancelPaddingTop?: string;
-  actionSheetCancelPaddingColor?: string;
-  actionSheetLoadingIconSize?: string;
-};

packages/vant/src/address-edit/index.less

@@ -1,4 +1,4 @@
-:root {
+body {
   --van-address-edit-padding: var(--van-padding-sm);
   --van-address-edit-buttons-padding: var(--van-padding-xl)
     var(--van-padding-base);

packages/vant/src/address-edit/index.ts

@@ -8,7 +8,6 @@ export type { AddressEditProps };
 export type {
   AddressEditInfo,
   AddressEditInstance,
-  AddressEditThemeVars,
   AddressEditSearchItem,
 } from './types';
 

packages/vant/src/address-edit/types.ts

@@ -27,10 +27,3 @@ export type AddressEditInstance = ComponentPublicInstance<
   AddressEditProps,
   AddressEditExpose
 >;
-
-export type AddressEditThemeVars = {
-  addressEditPadding?: string;
-  addressEditButtonsPadding?: string;
-  addressEditButtonMarginBottom?: string;
-  addressEditButtonFontSize?: string;
-};

packages/vant/src/address-list/index.less

@@ -1,4 +1,4 @@
-:root {
+body {
   --van-address-list-padding: var(--van-padding-sm) var(--van-padding-sm) 80px;
   --van-address-list-disabled-text-color: var(--van-text-color-2);
   --van-address-list-disabled-text-padding: calc(var(--van-padding-base) * 5) 0;

packages/vant/src/address-list/index.ts

@@ -6,7 +6,6 @@ export default AddressList;
 export { addressListProps } from './AddressList';
 export type { AddressListProps } from './AddressList';
 export type { AddressListAddress } from './AddressListItem';
-export type { AddressListThemeVars } from './types';
 
 declare module 'vue' {
   export interface GlobalComponents {

packages/vant/src/address-list/types.ts

@@ -1,15 +0,0 @@
-export type AddressListThemeVars = {
-  addressListPadding?: string;
-  addressListDisabledTextColor?: string;
-  addressListDisabledTextPadding?: string;
-  addressListDisabledTextFontSize?: string;
-  addressListDisabledTextLineHeight?: number | string;
-  addressListAddButtonZIndex?: number | string;
-  addressListItemPadding?: string;
-  addressListItemTextColor?: string;
-  addressListItemDisabledTextColor?: string;
-  addressListItemFontSize?: string;
-  addressListItemLineHeight?: number | string;
-  addressListRadioColor?: string;
-  addressListEditIconSize?: string;
-};

packages/vant/src/badge/index.less

@@ -1,4 +1,4 @@
-:root {
+body {
   --van-badge-size: 16px;
   --van-badge-color: var(--van-white);
   --van-badge-padding: 0 3px;

packages/vant/src/badge/index.ts

@@ -5,7 +5,6 @@ export const Badge = withInstall(_Badge);
 export default Badge;
 export { badgeProps } from './Badge';
 export type { BadgeProps, BadgePosition } from './Badge';
-export type { BadgeThemeVars } from './types';
 
 declare module 'vue' {
   export interface GlobalComponents {

packages/vant/src/badge/types.ts

@@ -1,12 +0,0 @@
-export type BadgeThemeVars = {
-  badgeSize?: string;
-  badgeColor?: string;
-  badgePadding?: string;
-  badgeFontSize?: string;
-  badgeFontWeight?: string;
-  badgeBorderWidth?: string;
-  badgeBackground?: string;
-  badgeDotColor?: string;
-  badgeDotSize?: string;
-  badgeFont?: string;
-};

packages/vant/src/button/index.less

@@ -1,4 +1,4 @@
-:root {
+body {
   --van-button-mini-height: 24px;
   --van-button-mini-padding: 0 var(--van-padding-base);
   --van-button-mini-font-size: var(--van-font-size-xs);

packages/vant/src/button/index.ts

@@ -8,7 +8,6 @@ export type { ButtonProps } from './Button';
 export type {
   ButtonType,
   ButtonSize,
-  ButtonThemeVars,
   ButtonNativeType,
   ButtonIconPosition,
 } from './types';

packages/vant/src/button/types.ts

@@ -12,40 +12,3 @@ export type ButtonSize = 'large' | 'normal' | 'small' | 'mini';
 export type ButtonNativeType = NonNullable<ButtonHTMLAttributes['type']>;
 
 export type ButtonIconPosition = 'left' | 'right';
-
-export type ButtonThemeVars = {
-  buttonMiniHeight?: string;
-  buttonMiniPadding?: string;
-  buttonMiniFontSize?: string;
-  buttonSmallHeight?: string;
-  buttonSmallPadding?: string;
-  buttonSmallFontSize?: string;
-  buttonNormalPadding?: string;
-  buttonNormalFontSize?: string;
-  buttonLargeHeight?: string;
-  buttonDefaultHeight?: string;
-  buttonDefaultLineHeight?: number | string;
-  buttonDefaultFontSize?: string;
-  buttonDefaultColor?: string;
-  buttonDefaultBackground?: string;
-  buttonDefaultBorderColor?: string;
-  buttonPrimaryColor?: string;
-  buttonPrimaryBackground?: string;
-  buttonPrimaryBorderColor?: string;
-  buttonSuccessColor?: string;
-  buttonSuccessBackground?: string;
-  buttonSuccessBorderColor?: string;
-  buttonDangerColor?: string;
-  buttonDangerBackground?: string;
-  buttonDangerBorderColor?: string;
-  buttonWarningColor?: string;
-  buttonWarningBackground?: string;
-  buttonWarningBorderColor?: string;
-  buttonBorderWidth?: string;
-  buttonRadius?: string;
-  buttonRoundRadius?: string;
-  buttonPlainBackground?: string;
-  buttonDisabledOpacity?: number | string;
-  buttonIconSize?: string;
-  buttonLoadingIconSize?: string;
-};

packages/vant/src/calendar/index.less

@@ -1,4 +1,4 @@
-:root {
+body {
   --van-calendar-background: var(--van-background-2);
   --van-calendar-popup-height: 80%;
   --van-calendar-header-shadow: 0 2px 10px rgba(125, 126, 128, 0.16);

packages/vant/src/calendar/index.ts

@@ -10,7 +10,6 @@ export type {
   CalendarDayItem,
   CalendarDayType,
   CalendarInstance,
-  CalendarThemeVars,
 } from './types';
 
 declare module 'vue' {

packages/vant/src/calendar/types.ts

@@ -48,32 +48,3 @@ export type CalendarMonthInstance = ComponentPublicInstance<
     disabledDays: Ref<ComputedRef<CalendarDayItem[]>>;
   }
 >;
-
-export type CalendarThemeVars = {
-  calendarBackground?: string;
-  calendarPopupHeight?: string;
-  calendarHeaderShadow?: string;
-  calendarHeaderTitleHeight?: string;
-  calendarHeaderTitleFontSize?: string;
-  calendarHeaderSubtitleFontSize?: string;
-  calendarWeekdaysHeight?: string;
-  calendarWeekdaysFontSize?: string;
-  calendarMonthTitleFontSize?: string;
-  calendarMonthMarkColor?: string;
-  calendarMonthMarkFontSize?: string;
-  calendarDayHeight?: string;
-  calendarDayFontSize?: string;
-  calendarDayMarginBottom?: string;
-  calendarRangeEdgeColor?: string;
-  calendarRangeEdgeBackground?: string;
-  calendarRangeMiddleColor?: string;
-  calendarRangeMiddleBackgroundOpacity?: number | string;
-  calendarSelectedDaySize?: string;
-  calendarSelectedDayColor?: string;
-  calendarInfoFontSize?: string;
-  calendarInfoLineHeight?: number | string;
-  calendarSelectedDayBackground?: string;
-  calendarDayDisabledColor?: string;
-  calendarConfirmButtonHeight?: string;
-  calendarConfirmButtonMargin?: string;
-};

packages/vant/src/card/index.less

@@ -1,4 +1,4 @@
-:root {
+body {
   --van-card-padding: var(--van-padding-xs) var(--van-padding-md);
   --van-card-font-size: var(--van-font-size-sm);
   --van-card-text-color: var(--van-text-color);

packages/vant/src/card/index.ts

@@ -5,7 +5,6 @@ export const Card = withInstall(_Card);
 export default Card;
 export { cardProps } from './Card';
 export type { CardProps } from './Card';
-export type { CardThemeVars } from './types';
 
 declare module 'vue' {
   export interface GlobalComponents {

packages/vant/src/card/types.ts

@@ -1,18 +0,0 @@
-export type CardThemeVars = {
-  cardPadding?: string;
-  cardFontSize?: string;
-  cardTextColor?: string;
-  cardBackground?: string;
-  cardThumbSize?: string;
-  cardThumbRadius?: string;
-  cardTitleLineHeight?: number | string;
-  cardDescColor?: string;
-  cardDescLineHeight?: number | string;
-  cardPriceColor?: string;
-  cardOriginPriceColor?: string;
-  cardNumColor?: string;
-  cardOriginPriceFontSize?: string;
-  cardPriceFontSize?: string;
-  cardPriceIntegerFontSize?: string;
-  cardPriceFont?: string;
-};

packages/vant/src/cascader/index.less

@@ -1,4 +1,4 @@
-:root {
+body {
   --van-cascader-header-height: 48px;
   --van-cascader-header-padding: 0 var(--van-padding-md);
   --van-cascader-title-font-size: var(--van-font-size-lg);

packages/vant/src/cascader/index.ts

@@ -5,11 +5,7 @@ export const Cascader = withInstall(_Cascader);
 export default Cascader;
 export { cascaderProps } from './Cascader';
 export type { CascaderProps } from './Cascader';
-export type {
-  CascaderOption,
-  CascaderThemeVars,
-  CascaderFieldNames,
-} from './types';
+export type { CascaderOption, CascaderFieldNames } from './types';
 
 declare module 'vue' {
   export interface GlobalComponents {

packages/vant/src/cascader/types.ts

@@ -21,19 +21,3 @@ export type CascaderFieldNames = {
   value?: string;
   children?: string;
 };
-
-export type CascaderThemeVars = {
-  cascaderHeaderHeight?: string;
-  cascaderHeaderPadding?: string;
-  cascaderTitleFontSize?: string;
-  cascaderTitleLineHeight?: number | string;
-  cascaderCloseIconSize?: string;
-  cascaderCloseIconColor?: string;
-  cascaderSelectedIconSize?: string;
-  cascaderTabsHeight?: string;
-  cascaderActiveColor?: string;
-  cascaderOptionsHeight?: string;
-  cascaderOptionDisabledColor?: string;
-  cascaderTabColor?: string;
-  cascaderUnselectedTabColor?: string;
-};

packages/vant/src/cell-group/index.less

@@ -1,4 +1,4 @@
-:root {
+body {
   --van-cell-group-background: var(--van-background-2);
   --van-cell-group-title-color: var(--van-text-color-2);
   --van-cell-group-title-padding: var(--van-padding-md) var(--van-padding-md);

packages/vant/src/cell-group/index.ts

@@ -5,7 +5,6 @@ export const CellGroup = withInstall(_CellGroup);
 export default CellGroup;
 export { cellGroupProps } from './CellGroup';
 export type { CellGroupProps } from './CellGroup';
-export type { CellGroupThemeVars } from './types';
 
 declare module 'vue' {
   export interface GlobalComponents {

packages/vant/src/cell-group/types.ts

@@ -1,10 +0,0 @@
-export type CellGroupThemeVars = {
-  cellGroupBackground?: string;
-  cellGroupTitleColor?: string;
-  cellGroupTitlePadding?: string;
-  cellGroupTitleFontSize?: string;
-  cellGroupTitleLineHeight?: number | string;
-  cellGroupInsetPadding?: string;
-  cellGroupInsetRadius?: string;
-  cellGroupInsetTitlePadding?: string;
-};

packages/vant/src/cell/index.less

@@ -1,6 +1,6 @@
 @import '../style/mixins/hairline';
 
-:root {
+body {
   --van-cell-font-size: var(--van-font-size-md);
   --van-cell-line-height: 24px;
   --van-cell-vertical-padding: 10px;

packages/vant/src/cell/index.ts

@@ -5,7 +5,6 @@ export const Cell = withInstall(_Cell);
 export default Cell;
 export { cellProps } from './Cell';
 export type { CellSize, CellProps, CellArrowDirection } from './Cell';
-export type { CellThemeVars } from './types';
 
 declare module 'vue' {
   export interface GlobalComponents {

packages/vant/src/cell/types.ts

@@ -1,21 +0,0 @@
-export type CellThemeVars = {
-  cellFontSize?: string;
-  cellLineHeight?: number | string;
-  cellVerticalPadding?: string;
-  cellHorizontalPadding?: string;
-  cellTextColor?: string;
-  cellBackground?: string;
-  cellBorderColor?: string;
-  cellActiveColor?: string;
-  cellRequiredColor?: string;
-  cellLabelColor?: string;
-  cellLabelFontSize?: string;
-  cellLabelLineHeight?: number | string;
-  cellLabelMarginTop?: string;
-  cellValueColor?: string;
-  cellIconSize?: string;
-  cellRightIconColor?: string;
-  cellLargeVerticalPadding?: string;
-  cellLargeTitleFontSize?: string;
-  cellLargeLabelFontSize?: string;
-};

packages/vant/src/checkbox/index.less

@@ -1,4 +1,4 @@
-:root {
+body {
   --van-checkbox-size: 20px;
   --van-checkbox-border-color: var(--van-gray-5);
   --van-checkbox-duration: var(--van-duration-fast);

packages/vant/src/checkbox/index.ts

@@ -8,7 +8,6 @@ export type { CheckboxProps } from './Checkbox';
 export type {
   CheckboxShape,
   CheckboxInstance,
-  CheckboxThemeVars,
   CheckboxLabelPosition,
 } from './types';
 

packages/vant/src/checkbox/types.ts

@@ -17,15 +17,3 @@ export type CheckboxInstance = ComponentPublicInstance<
   CheckboxProps,
   CheckboxExpose
 >;
-
-export type CheckboxThemeVars = {
-  checkboxSize?: string;
-  checkboxBorderColor?: string;
-  checkboxDuration?: string;
-  checkboxLabelMargin?: string;
-  checkboxLabelColor?: string;
-  checkboxCheckedIconColor?: string;
-  checkboxDisabledIconColor?: string;
-  checkboxDisabledLabelColor?: string;
-  checkboxDisabledBackground?: string;
-};

packages/vant/src/circle/index.less

@@ -1,4 +1,4 @@
-:root {
+body {
   --van-circle-size: 100px;
   --van-circle-color: var(--van-primary-color);
   --van-circle-layer-color: var(--van-white);

packages/vant/src/circle/index.ts

@@ -5,7 +5,6 @@ export const Circle = withInstall(_Circle);
 export default Circle;
 export { circleProps } from './Circle';
 export type { CircleProps, CircleStartPosition } from './Circle';
-export type { CircleThemeVars } from './types';
 
 declare module 'vue' {
   export interface GlobalComponents {

packages/vant/src/circle/types.ts

@@ -1,9 +0,0 @@
-export type CircleThemeVars = {
-  circleSize?: string;
-  circleColor?: string;
-  circleLayerColor?: string;
-  circleTextColor?: string;
-  circleTextFontWeight?: string;
-  circleTextFontSize?: string;
-  circleTextLineHeight?: number | string;
-};

packages/vant/src/collapse-item/index.less

@@ -1,6 +1,6 @@
 @import '../style/mixins/hairline';
 
-:root {
+body {
   --van-collapse-item-duration: var(--van-duration-base);
   --van-collapse-item-content-padding: var(--van-padding-sm)
     var(--van-padding-md);

packages/vant/src/collapse-item/index.ts

@@ -5,7 +5,7 @@ export const CollapseItem = withInstall(_CollapseItem);
 export default CollapseItem;
 export { collapseItemProps } from './CollapseItem';
 export type { CollapseItemProps } from './CollapseItem';
-export type { CollapseItemInstance, CollapseItemThemeVars } from './types';
+export type { CollapseItemInstance } from './types';
 
 declare module 'vue' {
   export interface GlobalComponents {

packages/vant/src/collapse-item/types.ts

@@ -9,13 +9,3 @@ export type CollapseItemInstance = ComponentPublicInstance<
   CollapseItemProps,
   CollapseItemExpose
 >;
-
-export type CollapseItemThemeVars = {
-  collapseItemDuration?: string;
-  collapseItemContentPadding?: string;
-  collapseItemContentFontSize?: string;
-  collapseItemContentLineHeight?: number | string;
-  collapseItemContentTextColor?: string;
-  collapseItemContentBackground?: string;
-  collapseItemTitleDisabledColor?: string;
-};

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

@@ -73,10 +73,10 @@ export default defineComponent({
 
     if (inBrowser) {
       const addTheme = () => {
-        document.documentElement.classList.add(`van-theme-${props.theme}`);
+        document.body.classList.add(`van-theme-${props.theme}`);
       };
       const removeTheme = (theme = props.theme) => {
-        document.documentElement.classList.remove(`van-theme-${theme}`);
+        document.body.classList.remove(`van-theme-${theme}`);
       };
 
       watch(

packages/vant/src/config-provider/README.md

@@ -69,10 +69,10 @@ Looking at the style of the Button component, you can see that the following var
 }
 ```
 
-The default values of these variables are defined on the `:root` node:
+The default values of these variables are defined on the `body` node:
 
 ```css
-:root {
+body {
   --van-white: #fff;
   --van-blue: #1989fa;
   --van-button-primary-color: var(--van-white);
@@ -88,7 +88,7 @@ You can directly override these CSS variables in the code, and the style of the
 
 ```css
 /* the Primary Button will turn red */
-:root {
+body {
   --van-button-primary-background: red;
 }
 ```
@@ -150,18 +150,6 @@ export default {
 
 > Tips: ConfigProvider only affects its child components.
 
-#### Use In TypeScript
-
-Using `ConfigProviderThemeVars` type to get code intellisense.
-
-```ts
-import type { ConfigProviderThemeVars } from 'vant';
-
-const themeVars: ConfigProviderThemeVars = {
-  sliderBarHeight: '4px',
-};
-```
-
 ### Combining dark mode with CSS variables
 
 If you need to define CSS variables for dark mode or light mode separately, you can use the `theme-vars-dark` and `theme-vars-light` props.
@@ -209,8 +197,8 @@ CSS variables in Vant are divided into **basic variables** and **component varia
 
 #### Modify Basic Variables
 
-- The basic variables can only be modified through the `:root` selector.
-- The component variables can be modified through the `:root` selector and `ConfigProvider` component.
+- The basic variables can only be modified through the `body` selector.
+- The component variables can be modified through the `body` selector and `ConfigProvider` component.
 
 #### Variables List
 
@@ -311,9 +299,5 @@ There are all **Basic Variables** below, for component CSS Variables, please ref
 The component exports the following type definitions:
 
 ```ts
-import type {
-  ConfigProviderProps,
-  ConfigProviderTheme,
-  ConfigProviderThemeVars,
-} from 'vant';
+import type { ConfigProviderProps, ConfigProviderTheme } from 'vant';
 ```

packages/vant/src/config-provider/README.zh-CN.md

@@ -69,10 +69,10 @@ Vant 组件通过丰富的 [CSS 变量](https://developer.mozilla.org/zh-CN/docs
 }
 ```
 
-这些变量的默认值被定义在 `:root` 节点上，HTML 里的所有子节点都可以访问到这些变量：
+这些变量的默认值被定义在 `body` 节点上，body 下所有子节点都可以访问到这些变量：
 
 ```css
-:root {
+body {
   --van-white: #fff;
   --van-blue: #1989fa;
   --van-button-primary-color: var(--van-white);
@@ -88,7 +88,7 @@ Vant 组件通过丰富的 [CSS 变量](https://developer.mozilla.org/zh-CN/docs
 
 ```css
 /* 添加这段样式后，Primary Button 会变成红色 */
-:root {
+body {
   --van-button-primary-background: red;
 }
 ```
@@ -148,19 +148,7 @@ export default {
 };
 ```
 
-> 注意：ConfigProvider 仅影响它的子组件的样式，不影响全局 root 节点。
-
-#### 在 TypeScript 中使用
-
-在 TypeScript 中定义 themeVars 时，建议使用 Vant 提供的 `ConfigProviderThemeVars` 类型，可以提供完善的类型提示：
-
-```ts
-import type { ConfigProviderThemeVars } from 'vant';
-
-const themeVars: ConfigProviderThemeVars = {
-  sliderBarHeight: '4px',
-};
-```
+> 注意：ConfigProvider 仅影响它的子组件的样式，不影响全局 body 节点。
 
 ### 结合深色模式与 CSS 变量
 
@@ -211,8 +199,8 @@ Vant 中的 CSS 变量分为 **基础变量** 和 **组件变量**。组件变
 
 由于 CSS 变量继承机制的原因，两者的修改方式有一定差异：
 
-- 基础变量只能通过 `:root 选择器` 修改，不能通过 `ConfigProvider 组件` 修改。
-- 组件变量可以通过 `:root 选择器` 和 `ConfigProvider 组件` 修改。
+- 基础变量只能通过 `body 选择器` 修改，不能通过 `ConfigProvider 组件` 修改。
+- 组件变量可以通过 `body 选择器` 和 `ConfigProvider 组件` 修改。
 
 #### 变量列表
 
@@ -315,9 +303,5 @@ Vant 中的 CSS 变量分为 **基础变量** 和 **组件变量**。组件变
 组件导出以下类型定义：
 
 ```ts
-import type {
-  ConfigProviderProps,
-  ConfigProviderTheme,
-  ConfigProviderThemeVars,
-} from 'vant';
+import type { ConfigProviderProps, ConfigProviderTheme } from 'vant';
 ```

packages/vant/src/config-provider/index.ts

@@ -8,7 +8,6 @@ export type {
   ConfigProviderProps,
   ConfigProviderTheme,
 } from './ConfigProvider';
-export type { ConfigProviderThemeVars } from './types';
 
 declare module 'vue' {
   export interface GlobalComponents {

packages/vant/src/config-provider/types.ts

@@ -1,72 +0,0 @@
-export type ConfigProviderThemeVars =
-  import('../action-bar').ActionBarThemeVars &
-    import('../action-bar-button').ActionBarButtonThemeVars &
-    import('../action-bar-icon').ActionBarIconThemeVars &
-    import('../action-sheet').ActionSheetThemeVars &
-    import('../address-edit').AddressEditThemeVars &
-    import('../address-list').AddressListThemeVars &
-    import('../badge').BadgeThemeVars &
-    import('../button').ButtonThemeVars &
-    import('../calendar').CalendarThemeVars &
-    import('../card').CardThemeVars &
-    import('../cascader').CascaderThemeVars &
-    import('../cell').CellThemeVars &
-    import('../cell-group').CellGroupThemeVars &
-    import('../checkbox').CheckboxThemeVars &
-    import('../circle').CircleThemeVars &
-    import('../collapse-item').CollapseItemThemeVars &
-    import('../contact-card').ContactCardThemeVars &
-    import('../contact-edit').ContactEditThemeVars &
-    import('../contact-list').ContactListThemeVars &
-    import('../count-down').CountDownThemeVars &
-    import('../coupon').CouponThemeVars &
-    import('../coupon-cell').CouponCellThemeVars &
-    import('../coupon-list').CouponListThemeVars &
-    import('../dialog').DialogThemeVars &
-    import('../divider').DividerThemeVars &
-    import('../dropdown-item').DropdownItemThemeVars &
-    import('../dropdown-menu').DropdownMenuThemeVars &
-    import('../empty').EmptyThemeVars &
-    import('../field').FieldThemeVars &
-    import('../grid-item').GridItemThemeVars &
-    import('../image').ImageThemeVars &
-    import('../image-preview').ImagePreviewThemeVars &
-    import('../index-anchor').IndexAnchorThemeVars &
-    import('../index-bar').IndexBarThemeVars &
-    import('../list').ListThemeVars &
-    import('../loading').LoadingThemeVars &
-    import('../nav-bar').NavBarThemeVars &
-    import('../notice-bar').NoticeBarThemeVars &
-    import('../notify').NotifyThemeVars &
-    import('../number-keyboard').NumberKeyboardThemeVars &
-    import('../overlay').OverlayThemeVars &
-    import('../pagination').PaginationThemeVars &
-    import('../password-input').PasswordInputThemeVars &
-    import('../picker').PickerThemeVars &
-    import('../picker-group').PickerGroupThemeVars &
-    import('../popover').PopoverThemeVars &
-    import('../popup').PopupThemeVars &
-    import('../progress').ProgressThemeVars &
-    import('../pull-refresh').PullRefreshThemeVars &
-    import('../radio').RadioThemeVars &
-    import('../rate').RateThemeVars &
-    import('../search').SearchThemeVars &
-    import('../share-sheet').ShareSheetThemeVars &
-    import('../sidebar').SidebarThemeVars &
-    import('../sidebar-item').SidebarItemThemeVars &
-    import('../skeleton').SkeletonThemeVars &
-    import('../slider').SliderThemeVars &
-    import('../step').StepThemeVars &
-    import('../stepper').StepperThemeVars &
-    import('../steps').StepsThemeVars &
-    import('../sticky').StickyThemeVars &
-    import('../submit-bar').SubmitBarThemeVars &
-    import('../swipe').SwipeThemeVars &
-    import('../switch').SwitchThemeVars &
-    import('../tabbar').TabbarThemeVars &
-    import('../tabbar-item').TabbarItemThemeVars &
-    import('../tabs').TabsThemeVars &
-    import('../tag').TagThemeVars &
-    import('../toast').ToastThemeVars &
-    import('../tree-select').TreeSelectThemeVars &
-    import('../uploader').UploaderThemeVars;

packages/vant/src/contact-card/index.less

@@ -1,4 +1,4 @@
-:root {
+body {
   --van-contact-card-padding: var(--van-padding-md);
   --van-contact-card-add-icon-size: 40px;
   --van-contact-card-add-icon-color: var(--van-primary-color);

packages/vant/src/contact-card/index.ts

@@ -5,7 +5,6 @@ export const ContactCard = withInstall(_ContactCard);
 export default ContactCard;
 export { contactCardProps } from './ContactCard';
 export type { ContactCardType, ContactCardProps } from './ContactCard';
-export type { ContactCardThemeVars } from './types';
 
 declare module 'vue' {
   export interface GlobalComponents {

packages/vant/src/contact-card/types.ts

@@ -1,6 +0,0 @@
-export type ContactCardThemeVars = {
-  contactCardPadding?: string;
-  contactCardAddIconSize?: string;
-  contactCardAddIconColor?: string;
-  contactCardTitleLineHeight?: number | string;
-};

packages/vant/src/contact-edit/index.less

@@ -1,4 +1,4 @@
-:root {
+body {
   --van-contact-edit-padding: var(--van-padding-md);
   --van-contact-edit-fields-radius: var(--van-radius-md);
   --van-contact-edit-buttons-padding: var(--van-padding-xl) 0;

packages/vant/src/contact-edit/index.ts

@@ -5,7 +5,6 @@ export const ContactEdit = withInstall(_ContactEdit);
 export default ContactEdit;
 export { contactEditProps } from './ContactEdit';
 export type { ContactEditInfo, ContactEditProps } from './ContactEdit';
-export type { ContactEditThemeVars } from './types';
 
 declare module 'vue' {
   export interface GlobalComponents {

packages/vant/src/contact-edit/types.ts

@@ -1,8 +0,0 @@
-export type ContactEditThemeVars = {
-  contactEditPadding?: string;
-  contactEditFieldsRadius?: string;
-  contactEditButtonsPadding?: string;
-  contactEditButtonMarginBottom?: string;
-  contactEditButtonFontSize?: string;
-  contactEditFieldLabelWidth?: string;
-};

packages/vant/src/contact-list/index.less

@@ -1,4 +1,4 @@
-:root {
+body {
   --van-contact-list-edit-icon-size: 16px;
   --van-contact-list-add-button-z-index: 999;
   --van-contact-list-radio-color: var(--van-primary-color);

packages/vant/src/contact-list/index.ts

@@ -5,7 +5,6 @@ export const ContactList = withInstall(_ContactList);
 export default ContactList;
 export { contactListProps } from './ContactList';
 export type { ContactListItem, ContactListProps } from './ContactList';
-export type { ContactListThemeVars } from './types';
 
 declare module 'vue' {
   export interface GlobalComponents {

packages/vant/src/contact-list/types.ts

@@ -1,6 +0,0 @@
-export type ContactListThemeVars = {
-  contactListEditIconSize?: string;
-  contactListAddButtonZIndex?: number | string;
-  contactListRadioColor?: string;
-  contactListItemPadding?: string;
-};

packages/vant/src/count-down/index.less

@@ -1,4 +1,4 @@
-:root {
+body {
   --van-count-down-text-color: var(--van-text-color);
   --van-count-down-font-size: var(--van-font-size-md);
   --van-count-down-line-height: var(--van-line-height-md);

packages/vant/src/count-down/index.ts

@@ -5,11 +5,7 @@ export const CountDown = withInstall(_CountDown);
 export default CountDown;
 export { countDownProps } from './CountDown';
 export type { CountDownProps } from './CountDown';
-export type {
-  CountDownInstance,
-  CountDownThemeVars,
-  CountDownCurrentTime,
-} from './types';
+export type { CountDownInstance, CountDownCurrentTime } from './types';
 
 declare module 'vue' {
   export interface GlobalComponents {

packages/vant/src/count-down/types.ts

@@ -14,9 +14,3 @@ export type CountDownInstance = ComponentPublicInstance<
 >;
 
 export type CountDownCurrentTime = CurrentTime;
-
-export type CountDownThemeVars = {
-  countDownTextColor?: string;
-  countDownFontSize?: string;
-  countDownLineHeight?: number | string;
-};

packages/vant/src/coupon-cell/index.less

@@ -1,4 +1,4 @@
-:root {
+body {
   --van-coupon-cell-selected-text-color: var(--van-text-color);
 }
 

packages/vant/src/coupon-cell/index.ts

@@ -5,7 +5,6 @@ export const CouponCell = withInstall(_CouponCell);
 export default CouponCell;
 export { couponCellProps } from './CouponCell';
 export type { CouponCellProps } from './CouponCell';
-export type { CouponCellThemeVars } from './types';
 
 declare module 'vue' {
   export interface GlobalComponents {

packages/vant/src/coupon-cell/types.ts

@@ -1,3 +0,0 @@
-export type CouponCellThemeVars = {
-  couponCellSelectedTextColor?: string;
-};

packages/vant/src/coupon-list/index.less

@@ -1,4 +1,4 @@
-:root {
+body {
   --van-coupon-list-background: var(--van-background);
   --van-coupon-list-field-padding: 5px 0 5px var(--van-padding-md);
   --van-coupon-list-exchange-button-height: 32px;
@@ -16,7 +16,7 @@
   &__field {
     padding: var(--van-coupon-list-field-padding);
 
-    .van-field__:root {
+    .van-field__body {
       height: 34px;
       padding-left: var(--van-padding-sm);
       line-height: 34px;

packages/vant/src/coupon-list/index.ts

@@ -5,7 +5,6 @@ export const CouponList = withInstall(_CouponList);
 export default CouponList;
 export { couponListProps } from './CouponList';
 export type { CouponListProps } from './CouponList';
-export type { CouponListThemeVars } from './types';
 
 declare module 'vue' {
   export interface GlobalComponents {

packages/vant/src/coupon-list/types.ts

@@ -1,9 +0,0 @@
-export type CouponListThemeVars = {
-  couponListBackground?: string;
-  couponListFieldPadding?: string;
-  couponListExchangeButtonHeight?: string;
-  couponListCloseButtonHeight?: string;
-  couponListEmptyTipColor?: string;
-  couponListEmptyTipFontSize?: string;
-  couponListEmptyTipLineHeight?: number | string;
-};

packages/vant/src/coupon/index.less

@@ -1,6 +1,6 @@
 @import '../style/mixins/ellipsis';
 
-:root {
+body {
   --van-coupon-margin: 0 var(--van-padding-sm) var(--van-padding-sm);
   --van-coupon-content-height: 84px;
   --van-coupon-content-padding: 14px 0;
@@ -76,7 +76,7 @@
     white-space: pre-wrap;
   }
 
-  &__:root {
+  &__body {
     position: relative;
     flex: 1;
     border-radius: 0 var(--van-coupon-radius) var(--van-coupon-radius) 0;

packages/vant/src/coupon/index.ts

@@ -4,7 +4,6 @@ import _Coupon from './Coupon';
 export const Coupon = withInstall(_Coupon);
 export default Coupon;
 export type { CouponInfo } from './Coupon';
-export type { CouponThemeVars } from './types';
 
 declare module 'vue' {
   export interface GlobalComponents {

packages/vant/src/coupon/types.ts

@@ -1,19 +0,0 @@
-export type CouponThemeVars = {
-  couponMargin?: string;
-  couponContentHeight?: string;
-  couponContentPadding?: string;
-  couponContentTextColor?: string;
-  couponBackground?: string;
-  couponActiveBackground?: string;
-  couponRadius?: string;
-  couponShadow?: string;
-  couponHeadWidth?: string;
-  couponAmountColor?: string;
-  couponAmountFontSize?: string;
-  couponCurrencyFontSize?: string;
-  couponNameFontSize?: string;
-  couponDisabledTextColor?: string;
-  couponDescriptionPadding?: string;
-  couponDescriptionBorderColor?: string;
-  couponCheckboxColor?: string;
-};

packages/vant/src/dialog/README.md

@@ -186,7 +186,6 @@ Vant exports following Dialog utility functions:
 | confirm-button-text | Confirm button text | _string_ | `Confirm` |
 | confirm-button-color | Confirm button color | _string_ | `#ee0a24` |
 | confirm-button-disabled `v3.5.0` | Whether to disable confirm button | _boolean_ | `false` |
-| z-index | Set the z-index to a fixed value | _number \| string_ | `2000+` |
 | overlay | Whether to show overlay | _boolean_ | `true` |
 | overlay-class | Custom overlay class | _string_ | - |
 | overlay-style | Custom overlay style | _object_ | - |

packages/vant/src/dialog/README.zh-CN.md

@@ -207,7 +207,6 @@ Vant 中导出了以下 Dialog 相关的辅助函数：
 | cancel-button-text | 取消按钮文案 | _string_ | `取消` |
 | cancel-button-color | 取消按钮颜色 | _string_ | `black` |
 | cancel-button-disabled `v3.5.0` | 是否禁用取消按钮 | _boolean_ | `false` |
-| z-index | 将弹窗的 z-index 层级设置为一个固定值 | _number \| string_ | `2000+` |
 | overlay | 是否展示遮罩层 | _boolean_ | `true` |
 | overlay-class | 自定义遮罩层类名 | _string_ | - |
 | overlay-style | 自定义遮罩层样式 | _object_ | - |

packages/vant/src/dialog/index.less

@@ -1,4 +1,4 @@
-:root {
+body {
   --van-dialog-width: 320px;
   --van-dialog-small-screen-width: 90%;
   --van-dialog-font-size: var(--van-font-size-lg);
@@ -132,12 +132,12 @@
   }
 
   &-bounce-enter-from {
-    transform: translate3d(0, -50%, 0) scale(0.7);
+    transform: translate3d(-50%, -50%, 0) scale(0.7);
     opacity: 0;
   }
 
   &-bounce-leave-active {
-    transform: translate3d(0, -50%, 0) scale(0.9);
+    transform: translate3d(-50%, -50%, 0) scale(0.9);
     opacity: 0;
   }
 }

packages/vant/src/dialog/index.ts

@@ -17,7 +17,6 @@ export type {
   DialogTheme,
   DialogMessage,
   DialogOptions,
-  DialogThemeVars,
   DialogMessageAlign,
 } from './types';
 

packages/vant/src/dialog/types.ts

@@ -32,25 +32,3 @@ export type DialogOptions = {
   confirmButtonDisabled?: boolean;
   closeOnClickOverlay?: boolean;
 };
-
-export type DialogThemeVars = {
-  dialogWidth?: string;
-  dialogSmallScreenWidth?: string;
-  dialogFontSize?: string;
-  dialogTransition?: string;
-  dialogRadius?: string;
-  dialogBackground?: string;
-  dialogHeaderFontWeight?: string;
-  dialogHeaderLineHeight?: number | string;
-  dialogHeaderPaddingTop?: string;
-  dialogHeaderIsolatedPadding?: string;
-  dialogMessagePadding?: string;
-  dialogMessageFontSize?: string;
-  dialogMessageLineHeight?: number | string;
-  dialogMessageMaxHeight?: string;
-  dialogHasTitleMessageTextColor?: string;
-  dialogHasTitleMessagePaddingTop?: string;
-  dialogButtonHeight?: string;
-  dialogRoundButtonHeight?: string;
-  dialogConfirmButtonTextColor?: string;
-};

packages/vant/src/divider/index.less

@@ -1,4 +1,4 @@
-:root {
+body {
   --van-divider-margin: var(--van-padding-md) 0;
   --van-divider-text-color: var(--van-text-color-2);
   --van-divider-font-size: var(--van-font-size-md);

packages/vant/src/divider/index.ts

@@ -5,7 +5,6 @@ export const Divider = withInstall(_Divider);
 export default Divider;
 export { dividerProps } from './Divider';
 export type { DividerProps, DividerContentPosition } from './Divider';
-export type { DividerThemeVars } from './types';
 
 declare module 'vue' {
   export interface GlobalComponents {

packages/vant/src/divider/types.ts

@@ -1,10 +0,0 @@
-export type DividerThemeVars = {
-  dividerMargin?: string;
-  dividerTextColor?: string;
-  dividerFontSize?: string;
-  dividerLineHeight?: number | string;
-  dividerBorderColor?: string;
-  dividerContentPadding?: string;
-  dividerContentLeftWidth?: string;
-  dividerContentRightWidth?: string;
-};

packages/vant/src/dropdown-item/index.less

@@ -1,4 +1,4 @@
-:root {
+body {
   --van-dropdown-item-z-index: 10;
 }
 

packages/vant/src/dropdown-item/index.ts

@@ -5,11 +5,7 @@ export const DropdownItem = withInstall(_DropdownItem);
 export default DropdownItem;
 export { dropdownItemProps } from './DropdownItem';
 export type { DropdownItemProps };
-export type {
-  DropdownItemOption,
-  DropdownItemInstance,
-  DropdownItemThemeVars,
-} from './types';
+export type { DropdownItemInstance, DropdownItemOption } from './types';
 
 declare module 'vue' {
   export interface GlobalComponents {

packages/vant/src/dropdown-item/types.ts

@@ -29,7 +29,3 @@ export type DropdownItemInstance = ComponentPublicInstance<
   DropdownItemProps,
   DropdownItemExpose
 >;
-
-export type DropdownItemThemeVars = {
-  dropdownItemZIndex?: number | string;
-};

packages/vant/src/dropdown-menu/index.less

@@ -1,4 +1,4 @@
-:root {
+body {
   --van-dropdown-menu-height: 48px;
   --van-dropdown-menu-background: var(--van-background-2);
   --van-dropdown-menu-shadow: 0 2px 12px rgba(100, 101, 102, 0.12);

packages/vant/src/dropdown-menu/index.ts

@@ -5,7 +5,7 @@ export const DropdownMenu = withInstall(_DropdownMenu);
 export default DropdownMenu;
 export { dropdownMenuProps } from './DropdownMenu';
 export type { DropdownMenuProps };
-export type { DropdownMenuDirection, DropdownMenuThemeVars } from './types';
+export type { DropdownMenuDirection } from './types';
 
 declare module 'vue' {
   export interface GlobalComponents {