@fjyueke/arco-mcp 1.0.4 → 1.0.5

package/metaData/components/count-down/css-variables.md

@@ -4,29 +4,16 @@
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
 
-| 描述 | 名称 | 默认值 |
-| --- | --- | --- |
-| 加载更多文字颜色 | --arco-countdown-load-more-font-size | getRem(14) |
-| 单元格标题文字大小 | --arco-countdown-cell-desc-font-size | getRem(14) |
-| 单元格标题文字字重 | --arco-countdown-cell-title-font-size | getRem(15) |
-| 单元格内容文字大小 | --arco-countdown-cell-desc-margin-top | getRem(2) |
-| 单元格右箭头图标颜色 | --arco-countdown-cell-content-font-size | getRem(14) |
-| 单元格右箭头自定义图标大小 | --arco-countdown-cell-arrow-gutter | getRem(8) |
-| 单元格背景色 | --arco-countdown-cell-arrow-font-size | getRem(12) |
-| 单元格两侧横向间距 | --arco-countdown-cell-font-size | getRem(16) |
-| 单元格基础样式高度 | --arco-countdown-cell-horizontal-padding | getRem(16) |
-| 单元格有描述文字时的高度 | --arco-countdown-cell-item-height | getRem(54) |
-| 单元格标签文字右侧间距 | --arco-countdown-cell-item-has-desc-height | getRem(74) |
-| 单元格标签图标右侧间距 | --arco-countdown-cell-label-gutter | getRem(24) |
-| 单元格标签图标大小 | --arco-countdown-cell-label-icon-gutter | getRem(12) |
-| 单元格头部和尾部说明文字大小 | --arco-countdown-cell-label-icon-font-size | getRem(20) |
-| 单元格头部和尾部说明文字行高 | --arco-countdown-cell-extra-font-size | getRem(14) |
-| 单元格头部和尾部说明内边距 | --arco-countdown-cell-extra-line-height | getRem(20) |
-| 倒计时默认字体行高 | --arco-countdown-font-size | getRem(16) |
-| 倒计时默认字体颜色 | --arco-countdown-line-height | getRem(22) |
-| 动作面板选项字体大小 | --arco-countdown-action-sheet-item-height | getRem(54) |
-| 动作面板顶部圆角值 | --arco-countdown-action-sheet-item-font-size | getRem(16) |
-| 动作面板取消按钮顶线颜色 | --arco-countdown-action-sheet-border-radius | getRem(8) |
-| 动作面板头部标题字体大小 | --arco-countdown-action-sheet-header-padding | getRem(16) |
-| 动作面板头部描述字体大小 | --arco-countdown-action-sheet-title-font-size | getRem(16) |
-| 搜索栏内边距大小 | --arco-countdown-action-sheet-sub-title-font-size | getRem(14) |
+#### 浅色模式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 倒计时默认字体颜色 | --arco-count-down-color | #1d2129（深灰色） ⬛ | var(--arco-font-color) |
+| 倒计时默认字体大小 | --arco-count-down-font-size | 0.32rem | 16px |
+| 倒计时默认字体行高 | --arco-count-down-line-height | 0.44rem | 22px |
+
+#### 暗黑模式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 倒计时默认字体颜色（暗黑模式） | --arco-dark-count-down-color | #f6f6f6（暗黑文字） ⬜ | var(--arco-dark-font-color) |

package/metaData/components/date-picker/css-variables.md

@@ -0,0 +1,25 @@
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
+
+#### 浅色模式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 日期时间范围选择器背景颜色 | --arco-date-picker-range-background-color | #FBFCFC |  |
+| 日期时间范围选择器未选中时文字颜色 | --arco-date-picker-range-disabled-font-color | #c9cdd4（极浅灰色） ⬜ | var(--arco-disabled-color) |
+| 日期时间范围选择器选中时文字颜色 | --arco-date-picker-range-font-color | #1d2129（深灰色） ⬛ | var(--arco-font-color) |
+| 日期时间范围选择器文字大小 | --arco-date-picker-range-font-size | 0.32rem | 16px |
+| 日期时间范围选择器展示区域最小高度 | --arco-date-picker-range-show-min-height | 0.96rem | 48px |
+| 日期时间范围选择器展示区域外边距大小 | --arco-date-picker-range-show-padding | 0 0.32rem | 0 16px |
+| 日期时间范围选择器展示区域分隔符最小宽度 | --arco-date-picker-range-separate-min-width | 0.96rem | 48px |
+
+#### 暗黑模式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 日期时间范围选择器背景颜色（暗黑模式） | --arco-dark-date-picker-range-background-color | #1E1E1E |  |
+| 日期时间范围选择器未选中时文字颜色（暗黑模式） | --arco-dark-date-picker-range-disabled-font-color | #5f5f60（暗黑禁用） ⬛ | var(--arco-dark-disabled-color) |
+| 日期时间范围选择器选中时文字颜色（暗黑模式） | --arco-dark-date-picker-range-font-color | #f6f6f6（暗黑文字） ⬜ | var(--arco-dark-font-color) |

package/metaData/components/dialog/css-variables.md

@@ -4,28 +4,59 @@
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
 
-| 描述 | 名称 | 默认值 |
-| --- | --- | --- |
-| 对话框面板宽度 (android) | --arco-dialog-content-width | getRem(270) |
-| 对话框内容面板背景色 | --arco-dialog-content-android-width | getRem(280) |
-| 对话框内容面板圆角值 (android) | --arco-dialog-content-border-radius | getRem(8) |
-| 对话框横向内边距 (ios) | --arco-dialog-content-android-border-radius | getRem(4) |
-| 对话框纵向内边距 (ios) | --arco-dialog-ios-horizontal-padding | getRem(16) |
-| 对话框 header 和 body 的间距 (ios) | --arco-dialog-ios-vertical-padding | getRem(20) |
-| 对话框横向内边距 (android) | --arco-dialog-ios-header-body-gutter | getRem(4) |
-| 对话框纵向内边距 (android) | --arco-dialog-android-horizontal-padding | getRem(24) |
-| 对话框 header 和 body 的间距 (android) | --arco-dialog-android-vertical-padding | getRem(20) |
-| 对话框 body 和 footer 的间距 (android) | --arco-dialog-android-header-body-gutter | getRem(12) |
-| 对话框正文字体颜色 (ios) | --arco-dialog-android-body-footer-gutter | getRem(24) |
-| 对话框正文字体行高 (ios) | --arco-dialog-body-ios-font-size | getRem(15) |
-| 对话框正文字体颜色 (android) | --arco-dialog-body-ios-line-height | getRem(22) |
-| 对话框正文字体行高 (android) | --arco-dialog-body-android-font-size | getRem(15) |
-| 对话框标题字体颜色 (ios) | --arco-dialog-body-android-line-height | getRem(24) |
-| 对话框标题字体行高 (ios) | --arco-dialog-header-ios-font-size | getRem(17) |
-| 对话框标题字体大小 (android) | --arco-dialog-header-ios-line-height | getRem(26) |
-| 对话框标题字体行高 (android) | --arco-dialog-header-android-font-size | getRem(17) |
-| 对话框按钮区字体颜色 (ios) | --arco-dialog-header-android-line-height | getRem(28) |
-| 对话框按钮区高度 (ios) | --arco-dialog-footer-ios-font-size | getRem(16) |
-| 对话框按钮区字体颜色 (android) | --arco-dialog-footer-ios-height | getRem(44) |
-| 对话框按钮区字体行高 (android) | --arco-dialog-footer-android-font-size | getRem(15) |
-| 对话框按钮区按钮间距 (android) | --arco-dialog-footer-android-line-height | getRem(20) |
+#### 浅色模式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 对话框正文字体颜色 (android) | --arco-dialog-body-android-color | #4e5969（中灰色） ⬛ | var(--arco-sub-font-color) |
+| 对话框正文字体颜色 (ios) | --arco-dialog-body-ios-color | #4e5969（中灰色） ⬛ | var(--arco-sub-font-color) |
+| 对话框（独立按钮样式）普通按钮字体颜色 | --arco-dialog-button-footer-color | #86909c（浅灰色） ⬜ | var(--arco-sub-info-font-color) |
+| 对话框（独立按钮样式）主按钮字体颜色 | --arco-dialog-button-footer-primary-color | #FFFFFF（白色） ⬜ | var(--arco-mask-content-color) |
+| 对话框按钮区字体颜色 (android) | --arco-dialog-footer-android-color | #1a74ff |  |
+| 对话框按钮区字体颜色 (ios) | --arco-dialog-footer-ios-color | #165DFF（主题蓝） 🟦 | var(--arco-primary-color) |
+| 对话框标题字体颜色 (android) | --arco-dialog-header-android-color | #1d2129（深灰色） ⬛ | var(--arco-font-color) |
+| 对话框标题字体颜色 (ios) | --arco-dialog-header-ios-color | #1d2129（深灰色） ⬛ | var(--arco-font-color) |
+| 对话框（独立按钮样式）主按钮背景色 | --arco-dialog-button-footer-primary-background | #165DFF（主题蓝） 🟦 | var(--arco-primary-color) |
+| 对话框内容面板背景色 | --arco-dialog-content-background | #FFFFFF（白色） ⬜ | var(--arco-mask-content-background) |
+| 对话框蒙层背景色 | --arco-dialog-mask-background | rgba(0, 0, 0, 0.6) | var(--arco-mask-background) |
+| 对话框正文字体大小 (android) | --arco-dialog-body-android-font-size | 0.3rem | 15px |
+| 对话框正文字体大小 (ios) | --arco-dialog-body-ios-font-size | 0.3rem | 15px |
+| 对话框按钮区字体大小 (android) | --arco-dialog-footer-android-font-size | 0.3rem | 15px |
+| 对话框按钮区字体大小 (ios) | --arco-dialog-footer-ios-font-size | 0.32rem | 16px |
+| 对话框标题字体大小 (android) | --arco-dialog-header-android-font-size | 0.34rem | 17px |
+| 对话框标题字体大小 (ios) | --arco-dialog-header-ios-font-size | 0.34rem | 17px |
+| 对话框正文字体行高 (android) | --arco-dialog-body-android-line-height | 0.48rem | 24px |
+| 对话框正文字体行高 (ios) | --arco-dialog-body-ios-line-height | 0.44rem | 22px |
+| 对话框（独立按钮样式）按钮高度 | --arco-dialog-button-footer-height | 0.72rem | 36px |
+| 对话框按钮区字体行高 (android) | --arco-dialog-footer-android-line-height | 0.4rem | 20px |
+| 对话框按钮区高度 (ios) | --arco-dialog-footer-ios-height | 0.88rem | 44px |
+| 对话框标题字体行高 (android) | --arco-dialog-header-android-line-height | 0.56rem | 28px |
+| 对话框标题字体行高 (ios) | --arco-dialog-header-ios-line-height | 0.52rem | 26px |
+| 对话框横向内边距 (android) | --arco-dialog-android-horizontal-padding | 0.48rem | 24px |
+| 对话框纵向内边距 (android) | --arco-dialog-android-vertical-padding | 0.4rem | 20px |
+| 对话框横向内边距 (ios) | --arco-dialog-ios-horizontal-padding | 0.32rem | 16px |
+| 对话框纵向内边距 (ios) | --arco-dialog-ios-vertical-padding | 0.4rem | 20px |
+| 对话框（独立按钮样式）按钮圆角值 | --arco-dialog-button-footer-border-radius | 0.6rem | 30px |
+| 对话框内容面板圆角值 (android) | --arco-dialog-content-android-border-radius | 0.08rem | 4px |
+| 对话框内容面板圆角值 (ios) | --arco-dialog-content-border-radius | 0.16rem | 8px |
+| 对话框 body 和 footer 的间距 (android) | --arco-dialog-android-body-footer-gutter | 0.48rem | 24px |
+| 对话框 header 和 body 的间距 (android) | --arco-dialog-android-header-body-gutter | 0.24rem | 12px |
+| 对话框（独立按钮样式）按钮间距 | --arco-dialog-button-footer-gutter | 0.16rem | 8px |
+| 对话框按钮区按钮间距 (android) | --arco-dialog-footer-android-button-gutter | 0.56rem | 28px |
+| 对话框 header 和 body 的间距 (ios) | --arco-dialog-ios-header-body-gutter | 0.08rem | 4px |
+| 对话框面板宽度 (android) | --arco-dialog-content-android-width | 5.6rem | 280px |
+| 对话框面板宽度 (ios) | --arco-dialog-content-width | 5.4rem | 270px |
+
+#### 暗黑模式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 对话框正文字体颜色 (android)（暗黑模式） | --arco-dark-dialog-body-android-color | #c5c5c5（暗黑次文字） ⬜ | var(--arco-dark-sub-font-color) |
+| 对话框正文字体颜色 (ios)（暗黑模式） | --arco-dark-dialog-body-ios-color | #c5c5c5（暗黑次文字） ⬜ | var(--arco-dark-sub-font-color) |
+| 对话框（独立按钮样式）普通按钮字体颜色（暗黑模式） | --arco-dark-dialog-button-footer-color | #929293（暗黑辅助文字） ⬜ | var(--arco-dark-sub-info-font-color) |
+| 对话框（独立按钮样式）主按钮字体颜色（暗黑模式） | --arco-dark-dialog-button-footer-primary-color | rgba(255, 255, 255, 0.9) | var(--arco-dark-mask-content-color) |
+| 对话框按钮区字体颜色 (ios)（暗黑模式） | --arco-dark-dialog-footer-ios-color | #3C7EFF（主题浅蓝） 🟦 | var(--arco-dark-primary-color) |
+| 对话框标题字体颜色 (android)（暗黑模式） | --arco-dark-dialog-header-android-color | #f6f6f6（暗黑文字） ⬜ | var(--arco-dark-font-color) |
+| 对话框标题字体颜色 (ios)（暗黑模式） | --arco-dark-dialog-header-ios-color | #f6f6f6（暗黑文字） ⬜ | var(--arco-dark-font-color) |
+| 对话框（独立按钮样式）主按钮背景色（暗黑模式） | --arco-dark-dialog-button-footer-primary-background | #3C7EFF（主题浅蓝） 🟦 | var(--arco-dark-primary-color) |
+| 对话框内容面板背景色（暗黑模式） | --arco-dark-dialog-content-background | #2A2A2B（暗黑面板） ⬛ | var(--arco-dark-mask-content-background) |

package/metaData/components/divider/css-variables.md

@@ -4,10 +4,22 @@
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
 
-| 描述 | 名称 | 默认值 |
-| --- | --- | --- |
-| 关闭icon大小 | --arco-divider-popover-icon-divider-height | getRem(12) |
-| 分割线文本字体颜色 | --arco-divider-content-font-size | getRem(14) |
-| 分割线文本左右padding | --arco-divider-right-width | getRem(28) |
-| 分割线上下padding | --arco-divider-content-padding | getRem(12) |
-| 骨架屏元素圆角 | --arco-divider-padding | getRem(16) |
+#### 浅色模式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 分割线文本字体颜色 | --arco-divider-content-font-color | #4e5969（中灰色） ⬛ | var(--arco-sub-font-color) |
+| 分割线线条颜色 | --arco-divider-line-color | #e5e6eb（边框灰） ⬜ | var(--arco-line-color) |
+| 分割线文本字体大小 | --arco-divider-content-font-size | 0.28rem | 14px |
+| 分割线文本左右padding | --arco-divider-content-padding | 0.24rem | 12px |
+| 分割线上下padding | --arco-divider-padding | 0.32rem | 16px |
+| 分割线线条粗细 | --arco-divider-line-thickness | 1PX |  |
+| 分割线左对齐时左边长度 | --arco-divider-left-width | 0.56rem | 28px |
+| 分割线右对齐时右边长度 | --arco-divider-right-width | 0.56rem | 28px |
+
+#### 暗黑模式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 分割线文本字体颜色（暗黑模式） | --arco-dark-divider-content-font-color | #c5c5c5（暗黑次文字） ⬜ | var(--arco-dark-sub-font-color) |
+| 分割线线条颜色（暗黑模式） | --arco-dark-divider-line-color | #484849（暗黑深线） ⬛ | var(--arco-dark-line-color) |

package/metaData/components/dropdown/css-variables.md

@@ -4,20 +4,60 @@
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
 
-| 描述 | 名称 | 默认值 |
-| --- | --- | --- |
-| dropdownMenu的选择框每一项的字体大小 | --arco-dropdown-menu-padding | getRem(15) |
-| dropdownMenu的选择框每一项的字体行高 | --arco-dropdown-menu-font-size | getRem(16) |
-| dropdownMenu的选择框每一项的字体颜色 | --arco-dropdown-menu-line-height | getRem(22) |
-| dropdownMenu的选择框中选择指引（选择项名称）的右侧padding | --arco-dropdown-menu-tip-min-width | getRem(18) |
-| dropdownMenu的选择框中选择项的最大宽度 | --arco-dropdown-menu-tip-padding-right | getRem(16) |
-| dropdownMenu的选择框中图标的大小（宽高） | --arco-dropdown-menu-label-max-width | getRem(96) |
-| dropdown的弹出框中选项的字体大小 | --arco-dropdown-options-item-padding | `${getRem(16)}` |
-| dropdown的弹出框中选项的字体行高 | --arco-dropdown-options-item-font-size | getRem(16) |
-| dropdown的弹出框中选项的字体颜色 | --arco-dropdown-options-item-line-height | getRem(22) |
-| dropdown的弹出框中mask的背景颜色 | --arco-dropdown-options-item-icon-right | getRem(16) |
-| dropdown的弹出框中多列样式下选项的内边距 | --arco-dropdown-multi-rows-options-gutter | getRem(12) |
-| dropdown的弹出框中多列样式下选项的字体大小 | --arco-dropdown-multi-rows-options-item-padding | `${getRem(8)}` |
-| dropdown的弹出框中多列样式下选项的字体行高 | --arco-dropdown-multi-rows-options-item-font-size | getRem(14) |
-| dropdown的弹出框中多列样式下选项的字体颜色 | --arco-dropdown-multi-rows-options-item-line-height | getRem(20) |
-| dropdown的弹出框中多列样式下容器的外边距 | --arco-dropdown-multi-rows-options-container-padding | getRem(16) |
+#### 浅色模式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| dropdown的弹出框中mask的背景颜色 | --arco-dropdown-mask-background-color | rgba(0, 0, 0, 0.6) | var(--arco-mask-background) |
+| dropdownMenu的选择框每一项的字体颜色 | --arco-dropdown-menu-color | #1d2129（深灰色） ⬛ | var(--arco-font-color) |
+| dropdownMenu的选择框被禁用项的字体颜色 | --arco-dropdown-menu-disabled-color | #c9cdd4（极浅灰色） ⬜ | var(--arco-disabled-color) |
+| dropdownMenu的选择框中图标颜色 | --arco-dropdown-menu-icon-color | #c9cdd4（极浅灰色） ⬜ | var(--arco-disabled-color) |
+| dropdownMenu的选择框中图标被选中时的颜色 | --arco-dropdown-menu-icon-selected-color | #165DFF（主题蓝） 🟦 | var(--arco-primary-color) |
+| dropdownMenu的选择框被选中项的字体颜色 | --arco-dropdown-menu-selected-color | #165DFF（主题蓝） 🟦 | var(--arco-primary-color) |
+| dropdownMenu的选择框中选择指引（选择项名称）的字体颜色 | --arco-dropdown-menu-tip-color | #86909c（浅灰色） ⬜ | var(--arco-sub-info-font-color) |
+| dropdown的弹出框中多列样式下选项的字体颜色 | --arco-dropdown-multi-rows-options-item-color | #4e5969（中灰色） ⬛ | var(--arco-sub-font-color) |
+| dropdown的弹出框中多列样式下选项被选中时的字体颜色 | --arco-dropdown-multi-rows-options-item-selected-color | #165DFF（主题蓝） 🟦 | var(--arco-primary-color) |
+| dropdown的弹出框的背景颜色 | --arco-dropdown-options-background-color | #FFFFFF（白色） ⬜ | var(--arco-container-background-color) |
+| dropdown的弹出框中选项的字体颜色 | --arco-dropdown-options-item-color | #1d2129（深灰色） ⬛ | var(--arco-font-color) |
+| dropdown的弹出框中选项被禁选时的字体颜色 | --arco-dropdown-options-item-disabled-color | #c9cdd4（极浅灰色） ⬜ | var(--arco-disabled-color) |
+| dropdown的弹出框中选项被选中时的字体颜色 | --arco-dropdown-options-item-selected-color | #165DFF（主题蓝） 🟦 | var(--arco-primary-color) |
+| dropdown的弹出框中多列样式下选项的背景色 | --arco-dropdown-multi-rows-options-item-background | #F7F8FA | var(--arco-card-background-color) |
+| dropdown的弹出框中多列样式下选项被选中时的背景色 | --arco-dropdown-multi-rows-options-item-selected-background | #E8F3FF（浅蓝底） 🟦 | var(--arco-lighter-primary-color) |
+| dropdownMenu的选择框每一项的字体大小 | --arco-dropdown-menu-font-size | 0.32rem | 16px |
+| dropdownMenu的选择框中图标的大小（宽高） | --arco-dropdown-menu-icon-size | 12PX |  |
+| dropdown的弹出框中多列样式下选项的字体大小 | --arco-dropdown-multi-rows-options-item-font-size | 0.28rem | 14px |
+| dropdown的弹出框中选项的字体大小 | --arco-dropdown-options-item-font-size | 0.32rem | 16px |
+| dropdownMenu的选择框每一项的字体行高 | --arco-dropdown-menu-line-height | 0.44rem | 22px |
+| dropdown的弹出框中多列样式下选项的字体行高 | --arco-dropdown-multi-rows-options-item-line-height | 0.4rem | 20px |
+| dropdown的弹出框中选项的字体行高 | --arco-dropdown-options-item-line-height | 0.44rem | 22px |
+| dropdownMenu的选择框每一项的padding | --arco-dropdown-menu-padding | 0.3rem | 15px |
+| dropdownMenu的选择框中选择指引（选择项名称）的右侧padding | --arco-dropdown-menu-tip-padding-right | 0.32rem | 16px |
+| dropdown的弹出框中多列样式下容器的内边距 | --arco-dropdown-multi-rows-options-container-padding | 0.32rem | 16px |
+| dropdown的弹出框中多列样式下选项的内边距 | --arco-dropdown-multi-rows-options-item-padding | 0.16rem | 8px |
+| dropdown的弹出框中选项的padding | --arco-dropdown-options-item-padding | 0.32rem | 16px |
+| dropdownMenu的选择框中图标的左侧margin | --arco-dropdown-menu-icon-margin-left | 4PX |  |
+| dropdown的弹出框中多列样式下容器的外边距 | --arco-dropdown-multi-rows-options-container-margin | 0 -0.24rem -0.24rem 0 | 0 -12px -12px 0 |
+| dropdown的弹出框中多列样式下选项的圆角值 | --arco-dropdown-multi-rows-options-item-border-radius | 2PX |  |
+| dropdown的弹出框中多列样式下选项之间的间距 | --arco-dropdown-multi-rows-options-gutter | 0.24rem | 12px |
+| dropdown的弹出框中选项图标绝对定位时，距离右侧的距离 | --arco-dropdown-options-item-icon-right | 0.32rem | 16px |
+| dropdownMenu的选择框中选择项的最大宽度 | --arco-dropdown-menu-label-max-width | 1.92rem | 96px |
+| dropdownMenu的选择框中选择指引（选择项名称）的最小宽度 | --arco-dropdown-menu-tip-min-width | 0.36rem | 18px |
+
+#### 暗黑模式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| dropdownMenu的选择框每一项的字体颜色（暗黑模式） | --arco-dark-dropdown-menu-color | #f6f6f6（暗黑文字） ⬜ | var(--arco-dark-font-color) |
+| dropdownMenu的选择框被禁用项的字体颜色（暗黑模式） | --arco-dark-dropdown-menu-disabled-color | #5f5f60（暗黑禁用） ⬛ | var(--arco-dark-disabled-color) |
+| dropdownMenu的选择框中图标颜色（暗黑模式） | --arco-dark-dropdown-menu-icon-color | #5f5f60（暗黑禁用） ⬛ | var(--arco-dark-disabled-color) |
+| dropdownMenu的选择框中图标被选中时的颜色（暗黑模式） | --arco-dark-dropdown-menu-icon-selected-color | #3C7EFF（主题浅蓝） 🟦 | var(--arco-dark-primary-color) |
+| dropdownMenu的选择框被选中项的字体颜色（暗黑模式） | --arco-dark-dropdown-menu-selected-color | #3C7EFF（主题浅蓝） 🟦 | var(--arco-dark-primary-color) |
+| dropdownMenu的选择框中选择指引（选择项名称）的字体颜色（暗黑模式） | --arco-dark-dropdown-menu-tip-color | #929293（暗黑辅助文字） ⬜ | var(--arco-dark-sub-info-font-color) |
+| dropdown的弹出框中多列样式下选项的字体颜色（暗黑模式） | --arco-dark-dropdown-multi-rows-options-item-color | #c5c5c5（暗黑次文字） ⬜ | var(--arco-dark-sub-font-color) |
+| dropdown的弹出框中多列样式下选项被选中时的字体颜色（暗黑模式） | --arco-dark-dropdown-multi-rows-options-item-selected-color | #3C7EFF（主题浅蓝） 🟦 | var(--arco-dark-primary-color) |
+| dropdown的弹出框的背景颜色（暗黑模式） | --arco-dark-dropdown-options-background-color | #232324（暗黑容器） ⬛ | var(--arco-dark-container-background-color) |
+| dropdown的弹出框中选项的字体颜色（暗黑模式） | --arco-dark-dropdown-options-item-color | #f6f6f6（暗黑文字） ⬜ | var(--arco-dark-font-color) |
+| dropdown的弹出框中选项被禁选时的字体颜色（暗黑模式） | --arco-dark-dropdown-options-item-disabled-color | #5f5f60（暗黑禁用） ⬛ | var(--arco-dark-disabled-color) |
+| dropdown的弹出框中选项被选中时的字体颜色（暗黑模式） | --arco-dark-dropdown-options-item-selected-color | #3C7EFF（主题浅蓝） 🟦 | var(--arco-dark-primary-color) |
+| dropdown的弹出框中多列样式下选项的背景色（暗黑模式） | --arco-dark-dropdown-multi-rows-options-item-background | hsla(0, 0%, 100%, 0.08) | var(--arco-dark-card-background-color) |
+| dropdown的弹出框中多列样式下选项被选中时的背景色（暗黑模式） | --arco-dark-dropdown-multi-rows-options-item-selected-background | #000D4D（暗黑主题浅） 🟦 | var(--arco-dark-lighter-primary-color) |

package/metaData/components/dropdown-menu/css-variables.md

@@ -4,20 +4,32 @@
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
 
-| 描述 | 名称 | 默认值 |
-| --- | --- | --- |
-| dropdownMenu的选择框每一项的字体大小 | --arco-dropdownmenu-padding | getRem(15) |
-| dropdownMenu的选择框每一项的字体行高 | --arco-dropdownmenu-font-size | getRem(16) |
-| dropdownMenu的选择框每一项的字体颜色 | --arco-dropdownmenu-line-height | getRem(22) |
-| dropdownMenu的选择框中选择指引（选择项名称）的右侧padding | --arco-dropdownmenu-tip-min-width | getRem(18) |
-| dropdownMenu的选择框中选择项的最大宽度 | --arco-dropdownmenu-tip-padding-right | getRem(16) |
-| dropdownMenu的选择框中图标的大小（宽高） | --arco-dropdownmenu-label-max-width | getRem(96) |
-| dropdown的弹出框中选项的字体大小 | --arco-dropdownmenu-dropdown-options-item-padding | `${getRem(16)}` |
-| dropdown的弹出框中选项的字体行高 | --arco-dropdownmenu-dropdown-options-item-font-size | getRem(16) |
-| dropdown的弹出框中选项的字体颜色 | --arco-dropdownmenu-dropdown-options-item-line-height | getRem(22) |
-| dropdown的弹出框中mask的背景颜色 | --arco-dropdownmenu-dropdown-options-item-icon-right | getRem(16) |
-| dropdown的弹出框中多列样式下选项的内边距 | --arco-dropdownmenu-dropdown-multi-rows-options-gutter | getRem(12) |
-| dropdown的弹出框中多列样式下选项的字体大小 | --arco-dropdownmenu-dropdown-multi-rows-options-item-padding | `${getRem(8)}` |
-| dropdown的弹出框中多列样式下选项的字体行高 | --arco-dropdownmenu-dropdown-multi-rows-options-item-font-size | getRem(14) |
-| dropdown的弹出框中多列样式下选项的字体颜色 | --arco-dropdownmenu-dropdown-multi-rows-options-item-line-height | getRem(20) |
-| dropdown的弹出框中多列样式下容器的外边距 | --arco-dropdownmenu-dropdown-multi-rows-options-container-padding | getRem(16) |
+#### 浅色模式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| dropdownMenu的选择框每一项的字体颜色 | --arco-dropdown-menu-color | #1d2129（深灰色） ⬛ | var(--arco-font-color) |
+| dropdownMenu的选择框被禁用项的字体颜色 | --arco-dropdown-menu-disabled-color | #c9cdd4（极浅灰色） ⬜ | var(--arco-disabled-color) |
+| dropdownMenu的选择框中图标颜色 | --arco-dropdown-menu-icon-color | #c9cdd4（极浅灰色） ⬜ | var(--arco-disabled-color) |
+| dropdownMenu的选择框中图标被选中时的颜色 | --arco-dropdown-menu-icon-selected-color | #165DFF（主题蓝） 🟦 | var(--arco-primary-color) |
+| dropdownMenu的选择框被选中项的字体颜色 | --arco-dropdown-menu-selected-color | #165DFF（主题蓝） 🟦 | var(--arco-primary-color) |
+| dropdownMenu的选择框中选择指引（选择项名称）的字体颜色 | --arco-dropdown-menu-tip-color | #86909c（浅灰色） ⬜ | var(--arco-sub-info-font-color) |
+| dropdownMenu的选择框每一项的字体大小 | --arco-dropdown-menu-font-size | 0.32rem | 16px |
+| dropdownMenu的选择框中图标的大小（宽高） | --arco-dropdown-menu-icon-size | 12PX |  |
+| dropdownMenu的选择框每一项的字体行高 | --arco-dropdown-menu-line-height | 0.44rem | 22px |
+| dropdownMenu的选择框每一项的padding | --arco-dropdown-menu-padding | 0.3rem | 15px |
+| dropdownMenu的选择框中选择指引（选择项名称）的右侧padding | --arco-dropdown-menu-tip-padding-right | 0.32rem | 16px |
+| dropdownMenu的选择框中图标的左侧margin | --arco-dropdown-menu-icon-margin-left | 4PX |  |
+| dropdownMenu的选择框中选择项的最大宽度 | --arco-dropdown-menu-label-max-width | 1.92rem | 96px |
+| dropdownMenu的选择框中选择指引（选择项名称）的最小宽度 | --arco-dropdown-menu-tip-min-width | 0.36rem | 18px |
+
+#### 暗黑模式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| dropdownMenu的选择框每一项的字体颜色（暗黑模式） | --arco-dark-dropdown-menu-color | #f6f6f6（暗黑文字） ⬜ | var(--arco-dark-font-color) |
+| dropdownMenu的选择框被禁用项的字体颜色（暗黑模式） | --arco-dark-dropdown-menu-disabled-color | #5f5f60（暗黑禁用） ⬛ | var(--arco-dark-disabled-color) |
+| dropdownMenu的选择框中图标颜色（暗黑模式） | --arco-dark-dropdown-menu-icon-color | #5f5f60（暗黑禁用） ⬛ | var(--arco-dark-disabled-color) |
+| dropdownMenu的选择框中图标被选中时的颜色（暗黑模式） | --arco-dark-dropdown-menu-icon-selected-color | #3C7EFF（主题浅蓝） 🟦 | var(--arco-dark-primary-color) |
+| dropdownMenu的选择框被选中项的字体颜色（暗黑模式） | --arco-dark-dropdown-menu-selected-color | #3C7EFF（主题浅蓝） 🟦 | var(--arco-dark-primary-color) |
+| dropdownMenu的选择框中选择指引（选择项名称）的字体颜色（暗黑模式） | --arco-dark-dropdown-menu-tip-color | #929293（暗黑辅助文字） ⬜ | var(--arco-dark-sub-info-font-color) |

package/metaData/components/ellipsis/css-variables.md

@@ -4,6 +4,16 @@
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
 
-| 描述 | 名称 | 默认值 |
-| --- | --- | --- |
-| 文字缩略组件浮动模式下的缩略符背景色 | --arco-ellipsis-default-text-size | getRem(16) |
+#### 浅色模式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 文字缩略组件浮动模式下的缩略符背景色 | --arco-ellipsis-float-ellipsis-node-background | linear-gradient(90deg, rgba(255, 255, 255, 0), #ffffff 20PX, #ffffff) |  |
+| 文字缩略组件默认字体大小 | --arco-ellipsis-default-text-size | 0.32rem | 16px |
+| 文字缩略组件浮动模式下的缩略符左边距 | --arco-ellipsis-float-ellipsis-node-padding-left | 20PX |  |
+
+#### 暗黑模式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 文字缩略组件浮动模式下的缩略符背景色（暗黑模式） | --arco-dark-ellipsis-float-ellipsis-node-background | linear-gradient(90deg, rgba(35, 35, 36, 0), #232324 20PX, #232324) |  |

package/metaData/components/form/css-variables.md

@@ -4,9 +4,26 @@
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
 
-| 描述 | 名称 | 默认值 |
-| --- | --- | --- |
-| 表单项标签行高 | --arco-form-item-label-item-font-size | getRem(16) |
-| 表单项标签颜色 | --arco-form-item-label-item-line-height | getRem(54) |
-| 表单项标签宽度 | --arco-form-item-label-item-gutter | getRem(16) |
-| 表单项分割线颜色 | --arco-form-item-label-item-width | getRem(96) |
+#### 浅色模式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 表单项分割线颜色 | --arco-form-item-border-divider-color | #e5e6eb（边框灰） ⬜ | var(--arco-line-color) |
+| 表单项错误提示颜色 | --arco-form-item-error-message-color | #F53F3F（危险红） 🟥 | var(--arco-danger-color) |
+| 表单项标签颜色 | --arco-form-item-label-item-color | #1d2129（深灰色） ⬛ | var(--arco-font-color) |
+| 表单项必选项星号颜色 | --arco-form-item-label-item-required-asterisk-color | #F53F3F（危险红） 🟥 | var(--arco-danger-color) |
+| 表单项警告提示颜色 | --arco-form-item-warning-message-color | #FF7D00（警告橙） 🟧 | var(--arco-warning-color) |
+|  | --arco-form-item-label-item-font-size | 0.32rem | 16px |
+| 表单项标签行高 | --arco-form-item-label-item-line-height | 1.08rem | 54px |
+| 表单项标签右边距 | --arco-form-item-label-item-gutter | 0.32rem | 16px |
+| 表单项标签宽度 | --arco-form-item-label-item-width | 1.92rem | 96px |
+
+#### 暗黑模式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 表单项分割线颜色（暗黑模式） | --arco-dark-form-item-border-divider-color | #484849（暗黑深线） ⬛ | var(--arco-dark-line-color) |
+| 表单项错误提示颜色（暗黑模式） | --arco-dark-form-item-error-message-color | #F76965（暗黑红） 🟥 | var(--arco-dark-danger-color) |
+| 表单项标签颜色（暗黑模式） | --arco-dark-form-item-label-item-color | #f6f6f6（暗黑文字） ⬜ | var(--arco-dark-font-color) |
+| 表单项必选项星号颜色（暗黑模式） | --arco-dark-form-item-label-item-required-asterisk-color | #F76965（暗黑红） 🟥 | var(--arco-dark-danger-color) |
+| 表单项警告提示颜色（暗黑模式） | --arco-dark-form-item-warning-message-color | #FF9626（暗黑橙） 🟧 | var(--arco-dark-warning-color) |

package/metaData/components/grid/css-variables.md

@@ -4,15 +4,25 @@
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
 
-| 描述 | 名称 | 默认值 |
-| --- | --- | --- |
-| 宫格组件每个单元格图标的高度 | --arco-grid-icon-width | getRem(32) |
-| 宫格组件垂直布局中文字区域顶部间距 | --arco-grid-icon-height | getRem(32) |
-| 宫格组件垂直布局中标题字体大小 | --arco-grid-vertical-text-margin-top | getRem(8) |
-| 宫格组件垂直布局中标题字体行高 | --arco-grid-vertical-title-font-size | getRem(16) |
-| 宫格组件垂直布局中描述内容顶部间距 | --arco-grid-vertical-title-line-height | getRem(20) |
-| 宫格组件垂直布局中描述内容字体大小 | --arco-grid-vertical-content-margin-top | getRem(2) |
-| 宫格组件垂直布局中描述内容字体行高 | --arco-grid-vertical-content-font-size | getRem(12) |
-| 宫格组件水平布局中文字区域左侧间距 | --arco-grid-vertical-content-line-height | getRem(16) |
-| 宫格组件水平布局中描述内容顶部间距 | --arco-grid-horizontal-text-margin-left | getRem(12) |
-| 宫格组件分割线颜色 | --arco-grid-horizontal-content-margin-top | getRem(0) |
+#### 浅色模式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 宫格组件分割线颜色 | --arco-grid-border-color | #e5e6eb（边框灰） ⬜ | var(--arco-line-color) |
+| 宫格组件分割线长度 | --arco-grid-border-size | 66.66% |  |
+| 宫格组件垂直布局中描述内容字体大小 | --arco-grid-vertical-content-font-size | 0.24rem | 12px |
+| 宫格组件垂直布局中标题字体大小 | --arco-grid-vertical-title-font-size | 0.32rem | 16px |
+| 宫格组件每个单元格图标的高度 | --arco-grid-icon-height | 0.64rem | 32px |
+| 宫格组件垂直布局中描述内容字体行高 | --arco-grid-vertical-content-line-height | 0.32rem | 16px |
+| 宫格组件垂直布局中标题字体行高 | --arco-grid-vertical-title-line-height | 0.4rem | 20px |
+| 宫格组件水平布局中描述内容顶部间距 | --arco-grid-horizontal-content-margin-top | 0 |  |
+| 宫格组件水平布局中文字区域左侧间距 | --arco-grid-horizontal-text-margin-left | 0.24rem | 12px |
+| 宫格组件垂直布局中描述内容顶部间距 | --arco-grid-vertical-content-margin-top | 0.04rem | 2px |
+| 宫格组件垂直布局中文字区域顶部间距 | --arco-grid-vertical-text-margin-top | 0.16rem | 8px |
+| 宫格组件每个单元格图标的宽度 | --arco-grid-icon-width | 0.64rem | 32px |
+
+#### 暗黑模式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 宫格组件分割线颜色（暗黑模式） | --arco-dark-grid-border-color | #484849（暗黑深线） ⬛ | var(--arco-dark-line-color) |

package/metaData/components/image/css-variables.md

@@ -4,15 +4,48 @@
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
 
-| 描述 | 名称 | 默认值 |
-| --- | --- | --- |
-| 图片重试时字体大小 | --arco-image-inner-font-size | getRem(16) |
-| switch 文字颜色 | --arco-image-retry-font-size | getRem(16) |
-| 图片预览指示器内边距 | --arco-image-preview-indicator-font-size | getRem(14) |
-| 图片选择器禁用状态下的透明度 | --arco-image-picker-font-size | getRem(14) |
-| 图片选择器添加图片按钮的背景色 | --arco-image-picker-border-radius | getRem(2) |
-| 图片选择器添加图片按钮的图标颜色 | --arco-image-picker-add-icon-font-size | getRem(30) |
-| 图片选择器添加图片按钮的字体颜色 | --arco-image-picker-add-text-font-size | getRem(12) |
-| 图片选择器关闭按钮宽度 | --arco-image-picker-close-font-size | getRem(12) |
-| 图片选择器关闭按钮高度 | --arco-image-picker-close-width | getRem(18) |
-| 图片选择器关闭按钮背景色 | --arco-image-picker-close-height | getRem(18) |
+#### 浅色模式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 图片 loading 态图标及文字颜色 | --arco-image-loading-icon-color | #FFFFFF（白色） ⬜ | var(--arco-mask-content-color) |
+| 图片选择器添加图片按钮的图标颜色 | --arco-image-picker-add-icon-color | #c9cdd4（极浅灰色） ⬜ | var(--arco-disabled-color) |
+| 图片选择器添加图片按钮的字体颜色 | --arco-image-picker-add-text-color | #86909c（浅灰色） ⬜ | var(--arco-sub-info-font-color) |
+| 图片选择器关闭按钮字体颜色 | --arco-image-picker-close-color | #FFFFFF（白色） ⬜ | var(--arco-mask-content-color) |
+| 图片选择器中图片错误状态下的文字颜色 | --arco-image-picker-error-color | #FFFFFF（白色） ⬜ | var(--arco-mask-content-color) |
+| 图片 retry 态图标及文字颜色 | --arco-image-retry-icon-color | #FFFFFF（白色） ⬜ | var(--arco-mask-content-color) |
+| 图片加载或重试时默认蒙层背景色 | --arco-image-mask-background | rgba(0, 0, 0, 0.6) | var(--arco-mask-background) |
+| 图片选择器添加图片按钮的背景色 | --arco-image-picker-add-background | #F7F8FA | var(--arco-card-background-color) |
+| 图片选择器关闭按钮背景色 | --arco-image-picker-close-background | rgba(0, 0, 0, 0.3) |  |
+| 图片选择器中图片错误状态下的背景色 | --arco-image-picker-error-background | rgba(0, 0, 0, 0.5) |  |
+| 图片 placeholder 背景色 | --arco-image-placeholder-background | #F7F8FA | var(--arco-card-background-color) |
+| 图片预览指示器背景色 | --arco-image-preview-indicator-background | linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.3)) |  |
+| 图片预览蒙层背景色 | --arco-image-preview-mask-background | rgba(0, 0, 0, 0.9) |  |
+| 图片加载或重试时默认字体大小 | --arco-image-inner-font-size | 0.32rem | 16px |
+| 图片选择器添加图片按钮的图标大小 | --arco-image-picker-add-icon-font-size | 0.6rem | 30px |
+| 图片选择器添加图片按钮的字体大小 | --arco-image-picker-add-text-font-size | 0.24rem | 12px |
+| 图片选择器关闭按钮字体大小 | --arco-image-picker-close-font-size | 0.24rem | 12px |
+| 图片选择器内部字体大小 | --arco-image-picker-font-size | 0.28rem | 14px |
+| 图片预览指示器文字大小 | --arco-image-preview-indicator-font-size | 0.28rem | 14px |
+| 图片重试时字体大小 | --arco-image-retry-font-size | 0.32rem | 16px |
+| 图片选择器关闭按钮高度 | --arco-image-picker-close-height | 0.36rem | 18px |
+| 图片预览指示器内边距 | --arco-image-preview-indicator-padding | 0.24rem 0.4rem | 12px 20px |
+| 图片选择器中图片的圆角值 | --arco-image-picker-border-radius | 0.04rem | 2px |
+| 图片选择器关闭按钮圆角值 | --arco-image-picker-close-border-radius | 0 0.04rem | 0 2px |
+| 图片选择器关闭按钮宽度 | --arco-image-picker-close-width | 0.36rem | 18px |
+| 图片选择器禁用状态下的透明度 | --arco-image-picker-disabled-opacity | 0.7 |  |
+| 图片预览小图放大时的动画曲线 | --arco-image-preview-thumb-transition | all cubic-bezier(0.34, 0.69, 0.1, 1) |  |
+| 图片加载完成展现时的动画曲线 | --arco-image-transition-function | cubic-bezier(0.39, 0.575, 0.565, 1) |  |
+
+#### 暗黑模式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 图片 loading 态图标及文字颜色（暗黑模式） | --arco-dark-image-loading-icon-color | rgba(255, 255, 255, 0.9) | var(--arco-dark-mask-content-color) |
+| 图片选择器添加图片按钮的图标颜色（暗黑模式） | --arco-dark-image-picker-add-icon-color | #5f5f60（暗黑禁用） ⬛ | var(--arco-dark-disabled-color) |
+| 图片选择器添加图片按钮的字体颜色（暗黑模式） | --arco-dark-image-picker-add-text-color | #929293（暗黑辅助文字） ⬜ | var(--arco-dark-sub-info-font-color) |
+| 图片选择器关闭按钮字体颜色（暗黑模式） | --arco-dark-image-picker-close-color | rgba(255, 255, 255, 0.9) | var(--arco-dark-mask-content-color) |
+| 图片选择器中图片错误状态下的文字颜色（暗黑模式） | --arco-dark-image-picker-error-color | rgba(255, 255, 255, 0.9) | var(--arco-dark-mask-content-color) |
+| 图片 retry 态图标及文字颜色（暗黑模式） | --arco-dark-image-retry-icon-color | rgba(255, 255, 255, 0.9) | var(--arco-dark-mask-content-color) |
+| 图片选择器添加图片按钮的背景色（暗黑模式） | --arco-dark-image-picker-add-background | hsla(0, 0%, 100%, 0.08) | var(--arco-dark-card-background-color) |
+| 图片 placeholder 背景色（暗黑模式） | --arco-dark-image-placeholder-background | hsla(0, 0%, 100%, 0.08) | var(--arco-dark-card-background-color) |

package/metaData/components/image-picker/css-variables.md

@@ -4,15 +4,33 @@
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
 
-| 描述 | 名称 | 默认值 |
-| --- | --- | --- |
-| 文件上传组件上传列表上边距 | --arco-imagepicker-uploader-item-height | getRem(36) |
-| 文件上传组件上传列表内边距 | --arco-imagepicker-uploader-item-margin-top | getRem(16) |
-| 文件上传组件上传列表文件图标右边距 | --arco-imagepicker-uploader-file-icon-font-size | getRem(16) |
-| 文件上传组件上传列表文件图标颜色 | --arco-imagepicker-uploader-file-icon-margin-right | getRem(12) |
-| 文件上传组件上传列表外边框圆角 | --arco-imagepicker-uploader-item-text-font-size | getRem(14) |
-| 文件上传组件上传列表文字颜色 | --arco-imagepicker-uploader-item-border-radius | getRem(2) |
-| 文件上传组件上传列表加载成功图标颜色 | --arco-imagepicker-uploader-loaded-icon-font-size | getRem(16) |
-| 文件上传组件上传列表错误文字颜色 | --arco-imagepicker-uploader-error-text-font-size | getRem(12) |
-| 文件上传组件上传列表删除图标左内边距 | --arco-imagepicker-uploader-delete-icon-font-size | getRem(12) |
-| 文件上传组件上传列表删除图标颜色 | --arco-imagepicker-uploader-delete-icon-padding-left | getRem(12) |
+#### 浅色模式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 图片选择器添加图片按钮的图标颜色 | --arco-image-picker-add-icon-color | #c9cdd4（极浅灰色） ⬜ | var(--arco-disabled-color) |
+| 图片选择器添加图片按钮的字体颜色 | --arco-image-picker-add-text-color | #86909c（浅灰色） ⬜ | var(--arco-sub-info-font-color) |
+| 图片选择器关闭按钮字体颜色 | --arco-image-picker-close-color | #FFFFFF（白色） ⬜ | var(--arco-mask-content-color) |
+| 图片选择器中图片错误状态下的文字颜色 | --arco-image-picker-error-color | #FFFFFF（白色） ⬜ | var(--arco-mask-content-color) |
+| 图片选择器添加图片按钮的背景色 | --arco-image-picker-add-background | #F7F8FA | var(--arco-card-background-color) |
+| 图片选择器关闭按钮背景色 | --arco-image-picker-close-background | rgba(0, 0, 0, 0.3) |  |
+| 图片选择器中图片错误状态下的背景色 | --arco-image-picker-error-background | rgba(0, 0, 0, 0.5) |  |
+| 图片选择器添加图片按钮的图标大小 | --arco-image-picker-add-icon-font-size | 0.6rem | 30px |
+| 图片选择器添加图片按钮的字体大小 | --arco-image-picker-add-text-font-size | 0.24rem | 12px |
+| 图片选择器关闭按钮字体大小 | --arco-image-picker-close-font-size | 0.24rem | 12px |
+| 图片选择器内部字体大小 | --arco-image-picker-font-size | 0.28rem | 14px |
+| 图片选择器关闭按钮高度 | --arco-image-picker-close-height | 0.36rem | 18px |
+| 图片选择器中图片的圆角值 | --arco-image-picker-border-radius | 0.04rem | 2px |
+| 图片选择器关闭按钮圆角值 | --arco-image-picker-close-border-radius | 0 0.04rem | 0 2px |
+| 图片选择器关闭按钮宽度 | --arco-image-picker-close-width | 0.36rem | 18px |
+| 图片选择器禁用状态下的透明度 | --arco-image-picker-disabled-opacity | 0.7 |  |
+
+#### 暗黑模式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 图片选择器添加图片按钮的图标颜色（暗黑模式） | --arco-dark-image-picker-add-icon-color | #5f5f60（暗黑禁用） ⬛ | var(--arco-dark-disabled-color) |
+| 图片选择器添加图片按钮的字体颜色（暗黑模式） | --arco-dark-image-picker-add-text-color | #929293（暗黑辅助文字） ⬜ | var(--arco-dark-sub-info-font-color) |
+| 图片选择器关闭按钮字体颜色（暗黑模式） | --arco-dark-image-picker-close-color | rgba(255, 255, 255, 0.9) | var(--arco-dark-mask-content-color) |
+| 图片选择器中图片错误状态下的文字颜色（暗黑模式） | --arco-dark-image-picker-error-color | rgba(255, 255, 255, 0.9) | var(--arco-dark-mask-content-color) |
+| 图片选择器添加图片按钮的背景色（暗黑模式） | --arco-dark-image-picker-add-background | hsla(0, 0%, 100%, 0.08) | var(--arco-dark-card-background-color) |

package/metaData/components/image-preview/css-variables.md

@@ -4,15 +4,12 @@
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
 
-| 描述 | 名称 | 默认值 |
-| --- | --- | --- |
-| 图片重试时字体大小 | --arco-imagepreview-image-inner-font-size | getRem(16) |
-| switch 文字颜色 | --arco-imagepreview-image-retry-font-size | getRem(16) |
-| 图片预览指示器内边距 | --arco-imagepreview-indicator-font-size | getRem(14) |
-| 图片选择器禁用状态下的透明度 | --arco-imagepreview-image-picker-font-size | getRem(14) |
-| 图片选择器添加图片按钮的背景色 | --arco-imagepreview-image-picker-border-radius | getRem(2) |
-| 图片选择器添加图片按钮的图标颜色 | --arco-imagepreview-image-picker-add-icon-font-size | getRem(30) |
-| 图片选择器添加图片按钮的字体颜色 | --arco-imagepreview-image-picker-add-text-font-size | getRem(12) |
-| 图片选择器关闭按钮宽度 | --arco-imagepreview-image-picker-close-font-size | getRem(12) |
-| 图片选择器关闭按钮高度 | --arco-imagepreview-image-picker-close-width | getRem(18) |
-| 图片选择器关闭按钮背景色 | --arco-imagepreview-image-picker-close-height | getRem(18) |
+#### 浅色模式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 图片预览指示器背景色 | --arco-image-preview-indicator-background | linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.3)) |  |
+| 图片预览蒙层背景色 | --arco-image-preview-mask-background | rgba(0, 0, 0, 0.9) |  |
+| 图片预览指示器文字大小 | --arco-image-preview-indicator-font-size | 0.28rem | 14px |
+| 图片预览指示器内边距 | --arco-image-preview-indicator-padding | 0.24rem 0.4rem | 12px 20px |
+| 图片预览小图放大时的动画曲线 | --arco-image-preview-thumb-transition | all cubic-bezier(0.34, 0.69, 0.1, 1) |  |