feat: add themeVars type of all components (#11034)

* types: add types of all theme vars

* types: export all theme vars

* types: add ConfigProviderThemeVars

* fix: repeat key

* docs: add doc

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

@@ -5,6 +5,7 @@ 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

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

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

@@ -5,6 +5,7 @@ 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

@@ -0,0 +1,10 @@
+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.ts

@@ -5,6 +5,7 @@ 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

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

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

@@ -5,6 +5,7 @@ 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

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

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

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

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

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

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

@@ -6,6 +6,7 @@ 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

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

packages/vant/src/badge/index.ts

@@ -5,6 +5,7 @@ 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

@@ -0,0 +1,12 @@
+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.ts

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

packages/vant/src/button/types.ts

@@ -12,3 +12,40 @@ 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?: 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?: string;
+  buttonIconSize?: string;
+  buttonLoadingIconSize?: string;
+};

packages/vant/src/calendar/index.ts

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

packages/vant/src/calendar/types.ts

@@ -48,3 +48,32 @@ 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?: string;
+  calendarSelectedDaySize?: string;
+  calendarSelectedDayColor?: string;
+  calendarInfoFontSize?: string;
+  calendarInfoLineHeight?: string;
+  calendarSelectedDayBackground?: string;
+  calendarDayDisabledColor?: string;
+  calendarConfirmButtonHeight?: string;
+  calendarConfirmButtonMargin?: string;
+};

packages/vant/src/card/index.ts

@@ -5,6 +5,7 @@ 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

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

packages/vant/src/cascader/index.ts

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

packages/vant/src/cascader/types.ts

@@ -21,3 +21,19 @@ export type CascaderFieldNames = {
   value?: string;
   children?: string;
 };
+
+export type CascaderThemeVars = {
+  cascaderHeaderHeight?: string;
+  cascaderHeaderPadding?: string;
+  cascaderTitleFontSize?: string;
+  cascaderTitleLineHeight?: 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.ts

@@ -5,6 +5,7 @@ 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

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

packages/vant/src/cell/index.ts

@@ -5,6 +5,7 @@ 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

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

packages/vant/src/checkbox/index.ts

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

packages/vant/src/checkbox/types.ts

@@ -17,3 +17,15 @@ 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.ts

@@ -5,6 +5,7 @@ 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

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

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 } from './types';
+export type { CollapseItemInstance, CollapseItemThemeVars } from './types';
 
 declare module 'vue' {
   export interface GlobalComponents {

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

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

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

@@ -150,6 +150,18 @@ 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.
@@ -299,5 +311,9 @@ There are all **Basic Variables** below, for component CSS Variables, please ref
 The component exports the following type definitions:
 
 ```ts
-import type { ConfigProviderProps, ConfigProviderTheme } from 'vant';
+import type {
+  ConfigProviderProps,
+  ConfigProviderTheme,
+  ConfigProviderThemeVars,
+} from 'vant';
 ```

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

@@ -150,6 +150,18 @@ export default {
 
 > 注意：ConfigProvider 仅影响它的子组件的样式，不影响全局 root 节点。
 
+#### 在 TypeScript 中使用
+
+在 TypeScript 中定义 themeVars 时，建议使用 Vant 提供的 `ConfigProviderThemeVars` 类型，可以提供完善的类型提示：
+
+```ts
+import type { ConfigProviderThemeVars } from 'vant';
+
+const themeVars: ConfigProviderThemeVars = {
+  sliderBarHeight: '4px',
+};
+```
+
 ### 结合深色模式与 CSS 变量
 
 如果需要单独定义深色模式或浅色模式下的 CSS 变量，可以使用 `theme-vars-dark` 和 `theme-vars-light` 属性。
@@ -303,5 +315,9 @@ Vant 中的 CSS 变量分为 **基础变量** 和 **组件变量**。组件变
 组件导出以下类型定义：
 
 ```ts
-import type { ConfigProviderProps, ConfigProviderTheme } from 'vant';
+import type {
+  ConfigProviderProps,
+  ConfigProviderTheme,
+  ConfigProviderThemeVars,
+} from 'vant';
 ```

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

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

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

@@ -0,0 +1,72 @@
+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.ts

@@ -5,6 +5,7 @@ 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

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

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

@@ -5,6 +5,7 @@ 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

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

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

@@ -5,6 +5,7 @@ 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

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

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

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

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

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

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

@@ -5,6 +5,7 @@ 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

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

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

@@ -5,6 +5,7 @@ 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

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

packages/vant/src/coupon/index.ts

@@ -4,6 +4,7 @@ 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

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

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

packages/vant/src/dialog/types.ts

@@ -32,3 +32,25 @@ 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?: string;
+  dialogHeaderPaddingTop?: string;
+  dialogHeaderIsolatedPadding?: string;
+  dialogMessagePadding?: string;
+  dialogMessageFontSize?: string;
+  dialogMessageLineHeight?: string;
+  dialogMessageMaxHeight?: string;
+  dialogHasTitleMessageTextColor?: string;
+  dialogHasTitleMessagePaddingTop?: string;
+  dialogButtonHeight?: string;
+  dialogRoundButtonHeight?: string;
+  dialogConfirmButtonTextColor?: string;
+};

packages/vant/src/divider/index.ts

@@ -5,6 +5,7 @@ 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

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

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

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

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

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

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 } from './types';
+export type { DropdownMenuDirection, DropdownMenuThemeVars } from './types';
 
 declare module 'vue' {
   export interface GlobalComponents {

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

@@ -8,3 +8,17 @@ export type DropdownMenuProvide = {
   props: DropdownMenuProps;
   offset: Ref<number>;
 };
+
+export type DropdownMenuThemeVars = {
+  dropdownMenuHeight?: string;
+  dropdownMenuBackground?: string;
+  dropdownMenuShadow?: string;
+  dropdownMenuTitleFontSize?: string;
+  dropdownMenuTitleTextColor?: string;
+  dropdownMenuTitleActiveTextColor?: string;
+  dropdownMenuTitleDisabledTextColor?: string;
+  dropdownMenuTitlePadding?: string;
+  dropdownMenuTitleLineHeight?: string;
+  dropdownMenuOptionActiveColor?: string;
+  dropdownMenuContentMaxHeight?: string;
+};

packages/vant/src/empty/index.ts

@@ -5,6 +5,7 @@ export const Empty = withInstall(_Empty);
 export default Empty;
 export { emptyProps } from './Empty';
 export type { EmptyProps } from './Empty';
+export type { EmptyThemeVars } from './types';
 
 declare module 'vue' {
   export interface GlobalComponents {

packages/vant/src/empty/types.ts

@@ -0,0 +1,10 @@
+export type EmptyThemeVars = {
+  emptyPadding?: string;
+  emptyImageSize?: string;
+  emptyDescriptionMarginTop?: string;
+  emptyDescriptionPadding?: string;
+  emptyDescriptionColor?: string;
+  emptyDescriptionFontSize?: string;
+  emptyDescriptionLineHeight?: string;
+  emptyBottomMarginTop?: string;
+};

packages/vant/src/field/index.ts

@@ -10,6 +10,7 @@ export type {
   FieldRule,
   FieldInstance,
   FieldTextAlign,
+  FieldThemeVars,
   FieldRuleMessage,
   FieldClearTrigger,
   FieldFormatTrigger,

packages/vant/src/field/types.ts

@@ -98,3 +98,25 @@ declare global {
     composing?: boolean;
   }
 }
+
+export type FieldThemeVars = {
+  fieldLabelWidth?: string;
+  fieldLabelColor?: string;
+  fieldLabelMarginRight?: string;
+  fieldInputTextColor?: string;
+  fieldInputErrorTextColor?: string;
+  fieldInputDisabledTextColor?: string;
+  fieldPlaceholderTextColor?: string;
+  fieldIconSize?: string;
+  fieldClearIconSize?: string;
+  fieldClearIconColor?: string;
+  fieldRightIconColor?: string;
+  fieldErrorMessageColor?: string;
+  fieldErrorMessageFontSize?: string;
+  fieldTextAreaMinHeight?: string;
+  fieldWordLimitColor?: string;
+  fieldWordLimitFontSize?: string;
+  fieldWordLimitLineHeight?: string;
+  fieldDisabledTextColor?: string;
+  fieldRequiredMarkColor?: string;
+};

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

@@ -5,6 +5,7 @@ export const GridItem = withInstall(_GridItem);
 export default GridItem;
 export { gridItemProps } from './GridItem';
 export type { GridItemProps } from './GridItem';
+export type { GridItemThemeVars } from './types';
 
 declare module 'vue' {
   export interface GlobalComponents {

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

@@ -0,0 +1,8 @@
+export type GridItemThemeVars = {
+  gridItemContentPadding?: string;
+  gridItemContentBackground?: string;
+  gridItemContentActiveColor?: string;
+  gridItemIconSize?: string;
+  gridItemTextColor?: string;
+  gridItemTextFontSize?: string;
+};

packages/vant/src/image-preview/index.ts

@@ -11,6 +11,7 @@ export type { ImagePreviewProps };
 export type {
   ImagePreviewOptions,
   ImagePreviewInstance,
+  ImagePreviewThemeVars,
   ImagePreviewScaleEventParams,
 } from './types';
 

packages/vant/src/image-preview/types.ts

@@ -45,3 +45,15 @@ export type ImagePreviewInstance = ComponentPublicInstance<
   ImagePreviewProps,
   ImagePreviewExpose
 >;
+
+export type ImagePreviewThemeVars = {
+  imagePreviewIndexTextColor?: string;
+  imagePreviewIndexFontSize?: string;
+  imagePreviewIndexLineHeight?: string;
+  imagePreviewIndexTextShadow?: string;
+  imagePreviewOverlayBackground?: string;
+  imagePreviewCloseIconSize?: string;
+  imagePreviewCloseIconColor?: string;
+  imagePreviewCloseIconMargin?: string;
+  imagePreviewCloseIconZIndex?: string;
+};

packages/vant/src/image/index.ts

@@ -5,6 +5,7 @@ export const Image = withInstall(_Image);
 export default Image;
 export { imageProps } from './Image';
 export type { ImageFit, ImageProps } from './Image';
+export type { ImageThemeVars } from './types';
 
 declare module 'vue' {
   export interface GlobalComponents {

packages/vant/src/image/types.ts

@@ -0,0 +1,9 @@
+export type ImageThemeVars = {
+  imagePlaceholderTextColor?: string;
+  imagePlaceholderFontSize?: string;
+  imagePlaceholderBackground?: string;
+  imageLoadingIconSize?: string;
+  imageLoadingIconColor?: string;
+  imageErrorIconSize?: string;
+  imageErrorIconColor?: string;
+};

packages/vant/src/index-anchor/index.ts

@@ -5,6 +5,7 @@ export const IndexAnchor = withInstall(_IndexAnchor);
 export default IndexAnchor;
 export { indexAnchorProps } from './IndexAnchor';
 export type { IndexAnchorProps } from './IndexAnchor';
+export type { IndexAnchorThemeVars } from './types';
 
 declare module 'vue' {
   export interface GlobalComponents {

packages/vant/src/index-anchor/types.ts

@@ -0,0 +1,11 @@
+export type IndexAnchorThemeVars = {
+  indexAnchorZIndex?: string;
+  indexAnchorPadding?: string;
+  indexAnchorTextColor?: string;
+  indexAnchorFontWeight?: string;
+  indexAnchorFontSize?: string;
+  indexAnchorLineHeight?: string;
+  indexAnchorBackground?: string;
+  indexAnchorStickyTextColor?: string;
+  indexAnchorStickyBackground?: string;
+};

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

@@ -5,7 +5,7 @@ export const IndexBar = withInstall(_IndexBar);
 export default IndexBar;
 export { indexBarProps } from './IndexBar';
 export type { IndexBarProps };
-export type { IndexBarInstance } from './types';
+export type { IndexBarInstance, IndexBarThemeVars } from './types';
 
 declare module 'vue' {
   export interface GlobalComponents {

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

@@ -14,3 +14,10 @@ export type IndexBarInstance = ComponentPublicInstance<
   IndexBarProps,
   IndexBarExpose
 >;
+
+export type IndexBarThemeVars = {
+  indexBarSidebarZIndex?: string;
+  indexBarIndexFontSize?: string;
+  indexBarIndexLineHeight?: string;
+  indexBarIndexActiveColor?: string;
+};

packages/vant/src/list/index.ts

@@ -5,7 +5,7 @@ export const List = withInstall(_List);
 export default List;
 export { listProps } from './List';
 export type { ListProps };
-export type { ListInstance, ListDirection } from './types';
+export type { ListInstance, ListDirection, ListThemeVars } from './types';
 
 declare module 'vue' {
   export interface GlobalComponents {

packages/vant/src/list/types.ts

@@ -8,3 +8,10 @@ export type ListExpose = {
 };
 
 export type ListInstance = ComponentPublicInstance<ListProps, ListExpose>;
+
+export type ListThemeVars = {
+  listTextColor?: string;
+  listTextFontSize?: string;
+  listTextLineHeight?: string;
+  listLoadingIconSize?: string;
+};

packages/vant/src/loading/index.ts

@@ -5,6 +5,7 @@ export const Loading = withInstall(_Loading);
 export default Loading;
 export { loadingProps } from './Loading';
 export type { LoadingType, LoadingProps } from './Loading';
+export type { LoadingThemeVars } from './types';
 
 declare module 'vue' {
   export interface GlobalComponents {

packages/vant/src/loading/types.ts

@@ -0,0 +1,7 @@
+export type LoadingThemeVars = {
+  loadingTextColor?: string;
+  loadingTextFontSize?: string;
+  loadingSpinnerColor?: string;
+  loadingSpinnerSize?: string;
+  loadingSpinnerDuration?: string;
+};

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

@@ -5,6 +5,7 @@ export const NavBar = withInstall(_NavBar);
 export default NavBar;
 export { navBarProps } from './NavBar';
 export type { NavBarProps } from './NavBar';
+export type { NavBarThemeVars } from './types';
 
 declare module 'vue' {
   export interface GlobalComponents {

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

@@ -0,0 +1,10 @@
+export type NavBarThemeVars = {
+  navBarHeight?: string;
+  navBarBackground?: string;
+  navBarArrowSize?: string;
+  navBarIconColor?: string;
+  navBarTextColor?: string;
+  navBarTitleFontSize?: string;
+  navBarTitleTextColor?: string;
+  navBarZIndex?: string;
+};

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

@@ -5,7 +5,11 @@ export const NoticeBar = withInstall(_NoticeBar);
 export default NoticeBar;
 export { noticeBarProps } from './NoticeBar';
 export type { NoticeBarProps };
-export type { NoticeBarMode, NoticeBarInstance } from './types';
+export type {
+  NoticeBarMode,
+  NoticeBarInstance,
+  NoticeBarThemeVars,
+} from './types';
 
 declare module 'vue' {
   export interface GlobalComponents {

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

@@ -11,3 +11,15 @@ export type NoticeBarInstance = ComponentPublicInstance<
   NoticeBarProps,
   NoticeBarExpose
 >;
+
+export type NoticeBarThemeVars = {
+  noticeBarHeight?: string;
+  noticeBarPadding?: string;
+  noticeBarWrapablePadding?: string;
+  noticeBarTextColor?: string;
+  noticeBarFontSize?: string;
+  noticeBarLineHeight?: string;
+  noticeBarBackground?: string;
+  noticeBarIconSize?: string;
+  noticeBarIconMinWidth?: string;
+};

packages/vant/src/notify/index.ts

@@ -12,7 +12,7 @@ export {
 } from './function-call';
 
 export type { NotifyProps } from './Notify';
-export type { NotifyType, NotifyOptions } from './types';
+export type { NotifyType, NotifyOptions, NotifyThemeVars } from './types';
 
 declare module 'vue' {
   export interface GlobalComponents {

packages/vant/src/notify/types.ts

@@ -19,3 +19,14 @@ export type NotifyOptions = {
   onClose?: () => void;
   onOpened?: () => void;
 };
+
+export type NotifyThemeVars = {
+  notifyTextColor?: string;
+  notifyPadding?: string;
+  notifyFontSize?: string;
+  notifyLineHeight?: string;
+  notifyPrimaryBackground?: string;
+  notifySuccessBackground?: string;
+  notifyDangerBackground?: string;
+  notifyWarningBackground?: string;
+};

packages/vant/src/number-keyboard/index.ts

@@ -8,6 +8,7 @@ export type {
   NumberKeyboardProps,
   NumberKeyboardTheme,
 } from './NumberKeyboard';
+export type { NumberKeyboardThemeVars } from './types';
 
 declare module 'vue' {
   export interface GlobalComponents {

packages/vant/src/number-keyboard/types.ts

@@ -0,0 +1,17 @@
+export type NumberKeyboardThemeVars = {
+  numberKeyboardBackground?: string;
+  numberKeyboardKeyHeight?: string;
+  numberKeyboardKeyFontSize?: string;
+  numberKeyboardKeyActiveColor?: string;
+  numberKeyboardKeyBackground?: string;
+  numberKeyboardDeleteFontSize?: string;
+  numberKeyboardTitleColor?: string;
+  numberKeyboardTitleHeight?: string;
+  numberKeyboardTitleFontSize?: string;
+  numberKeyboardClosePadding?: string;
+  numberKeyboardCloseColor?: string;
+  numberKeyboardCloseFontSize?: string;
+  numberKeyboardButtonTextColor?: string;
+  numberKeyboardButtonBackground?: string;
+  numberKeyboardZIndex?: string;
+};

packages/vant/src/overlay/index.ts

@@ -5,6 +5,7 @@ export const Overlay = withInstall(_Overlay);
 export default Overlay;
 export { overlayProps } from './Overlay';
 export type { OverlayProps } from './Overlay';
+export type { OverlayThemeVars } from './types';
 
 declare module 'vue' {
   export interface GlobalComponents {

packages/vant/src/overlay/types.ts

@@ -0,0 +1,4 @@
+export type OverlayThemeVars = {
+  overlayZIndex?: string;
+  overlayBackground?: string;
+};

packages/vant/src/pagination/index.ts

@@ -5,6 +5,7 @@ export const Pagination = withInstall(_Pagination);
 export default Pagination;
 export { paginationProps } from './Pagination';
 export type { PaginationMode, PaginationProps } from './Pagination';
+export type { PaginationThemeVars } from './types';
 
 declare module 'vue' {
   export interface GlobalComponents {

packages/vant/src/pagination/types.ts

@@ -0,0 +1,11 @@
+export type PaginationThemeVars = {
+  paginationHeight?: string;
+  paginationFontSize?: string;
+  paginationItemWidth?: string;
+  paginationItemDefaultColor?: string;
+  paginationItemDisabledColor?: string;
+  paginationItemDisabledBackground?: string;
+  paginationBackground?: string;
+  paginationDescColor?: string;
+  paginationDisabledOpacity?: string;
+};

packages/vant/src/password-input/index.ts

@@ -5,6 +5,7 @@ export const PasswordInput = withInstall(_PasswordInput);
 export default PasswordInput;
 export { passwordInputProps } from './PasswordInput';
 export type { PasswordInputProps } from './PasswordInput';
+export type { PasswordInputThemeVars } from './types';
 
 declare module 'vue' {
   export interface GlobalComponents {

packages/vant/src/password-input/types.ts

@@ -0,0 +1,17 @@
+export type PasswordInputThemeVars = {
+  passwordInputHeight?: string;
+  passwordInputMargin?: string;
+  passwordInputFontSize?: string;
+  passwordInputRadius?: string;
+  passwordInputBackground?: string;
+  passwordInputInfoColor?: string;
+  passwordInputInfoFontSize?: string;
+  passwordInputErrorInfoColor?: string;
+  passwordInputDotSize?: string;
+  passwordInputDotColor?: string;
+  passwordInputTextColor?: string;
+  passwordInputCursorColor?: string;
+  passwordInputCursorWidth?: string;
+  passwordInputCursorHeight?: string;
+  passwordInputCursorDuration?: string;
+};

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

@@ -5,6 +5,7 @@ export const PickerGroup = withInstall(_PickerGroup);
 export default PickerGroup;
 export { pickerGroupProps } from './PickerGroup';
 export type { PickerGroupProps };
+export type { PickerGroupThemeVars } from './types';
 
 declare module 'vue' {
   export interface GlobalComponents {

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

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

packages/vant/src/picker/index.ts

@@ -9,6 +9,7 @@ export type {
   PickerColumn,
   PickerOption,
   PickerInstance,
+  PickerThemeVars,
   PickerFieldNames,
   PickerToolbarPosition,
   PickerCancelEventParams,

packages/vant/src/picker/types.ts

@@ -54,3 +54,21 @@ export type PickerCancelEventParams = PickerConfirmEventParams;
 export type PickerChangeEventParams = PickerConfirmEventParams & {
   columnIndex: number;
 };
+
+export type PickerThemeVars = {
+  pickerBackground?: string;
+  pickerToolbarHeight?: string;
+  pickerTitleFontSize?: string;
+  pickerTitleLineHeight?: string;
+  pickerActionPadding?: string;
+  pickerActionFontSize?: string;
+  pickerConfirmActionColor?: string;
+  pickerCancelActionColor?: string;
+  pickerOptionFontSize?: string;
+  pickerOptionPadding?: string;
+  pickerOptionTextColor?: string;
+  pickerOptionDisabledOpacity?: string;
+  pickerLoadingIconColor?: string;
+  pickerLoadingMaskColor?: string;
+  pickerMaskColor?: string;
+};

packages/vant/src/popover/index.ts

@@ -9,6 +9,7 @@ export type {
   PopoverTheme,
   PopoverAction,
   PopoverTrigger,
+  PopoverThemeVars,
   PopoverPlacement,
 } from './types';
 

packages/vant/src/popover/types.ts

@@ -22,3 +22,19 @@ export type PopoverAction = {
   className?: string;
   [key: PropertyKey]: any;
 };
+
+export type PopoverThemeVars = {
+  popoverArrowSize?: string;
+  popoverRadius?: string;
+  popoverActionWidth?: string;
+  popoverActionHeight?: string;
+  popoverActionFontSize?: string;
+  popoverActionLineHeight?: string;
+  popoverActionIconSize?: string;
+  popoverLightTextColor?: string;
+  popoverLightBackground?: string;
+  popoverLightActionDisabledTextColor?: string;
+  popoverDarkTextColor?: string;
+  popoverDarkBackground?: string;
+  popoverDarkActionDisabledTextColor?: string;
+};

packages/vant/src/popup/index.ts

@@ -8,6 +8,7 @@ export type { PopupProps } from './Popup';
 export type {
   PopupPosition,
   PopupInstance,
+  PopupThemeVars,
   PopupCloseIconPosition,
 } from './types';
 

packages/vant/src/popup/types.ts

@@ -14,3 +14,13 @@ export type PopupExpose = {
 };
 
 export type PopupInstance = ComponentPublicInstance<PopupProps, PopupExpose>;
+
+export type PopupThemeVars = {
+  popupBackground?: string;
+  popupTransition?: string;
+  popupRoundRadius?: string;
+  popupCloseIconSize?: string;
+  popupCloseIconColor?: string;
+  popupCloseIconMargin?: string;
+  popupCloseIconZIndex?: string;
+};

packages/vant/src/progress/index.ts

@@ -5,7 +5,7 @@ export const Progress = withInstall(_Progress);
 export default Progress;
 export { progressProps } from './Progress';
 export type { ProgressProps };
-export type { ProgressInstance } from './types';
+export type { ProgressInstance, ProgressThemeVars } from './types';
 
 declare module 'vue' {
   export interface GlobalComponents {

packages/vant/src/progress/types.ts

@@ -9,3 +9,15 @@ export type ProgressInstance = ComponentPublicInstance<
   ProgressProps,
   ProgressExpose
 >;
+
+export type ProgressThemeVars = {
+  progressHeight?: string;
+  progressColor?: string;
+  progressInactiveColor?: string;
+  progressBackground?: string;
+  progressPivotPadding?: string;
+  progressPivotTextColor?: string;
+  progressPivotFontSize?: string;
+  progressPivotLineHeight?: string;
+  progressPivotBackground?: string;
+};