@fjyueke/arco-mcp 1.0.4 → 1.0.5

package/CHANGELOG.md

@@ -0,0 +1,40 @@
+# 变更日志
+
+本项目所有重要变更都将记录在此文件中。
+
+格式基于 [Keep a Changelog](https://keepachangelog.com/en/1.1.0/)，
+项目遵循 [语义化版本](https://semver.org/spec/v2.0.0.html)。
+
+## [1.0.5] - 2026-07-14
+
+**修改人**: AI Assistant  
+**修改时间**: 2026-07-14
+
+### 文档
+
+- 更新40+组件的css-variables.md，优化样式变量表格格式：
+  - 表格列顺序改为描述、名称、默认值、备注
+  - 添加语义变量具体值和中文描述（如 `--text-color → #4E5969（主文字色）`）
+  - 支持颜色 emoji 预览
+  - 按关键词排序，确保表格内容有序
+- 新增badge、date-picker、popup、rate组件的css-variables.md
+- 删除无样式变量的组件css-variables.md（context-provider、icon、portal、show-monitor）
+
+### 增强
+
+- 优化syncFromArco.ts同步脚本：
+  - 添加颜色预览功能（emoji色块）
+  - 添加语义变量解析和实际像素转换
+  - 优化排序逻辑，基于CSS变量名关键词排序
+
+## [1.0.4] - 2026-07-11
+
+**修改人**: AI Assistant  
+**修改时间**: 2026-07-11
+
+### 初始发布
+
+- 创建 arco-mcp 项目，基于 Model Context Protocol (MCP) 提供 Arco Design Mobile 组件库文档查询能力
+- 同步 Arco Design Mobile 组件文档、API、示例代码
+- 支持 4 个工具接口：`list-components`、`get-component-docs`、`get-component-props`、`list-component-example`
+- 预生成 50+ 组件的文档数据

package/metaData/components/action-sheet/css-variables.md

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

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

@@ -4,61 +4,79 @@
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
 
-| 描述 | 名称 | 默认值 |
-| --- | --- | --- |
-| medium 头像组件的大小 | --arco-avatar-large-size | getRem(56) |
-| small 头像组件的大小 | --arco-avatar-medium-size | getRem(48) |
-| smaller 头像组件的大小 | --arco-avatar-small-size | getRem(40) |
-| ultra-small 头像组件的大小 | --arco-avatar-smaller-size | getRem(32) |
-| large 头像组件默认头像图标大小 | --arco-avatar-ultra-small-size | getRem(24) |
-| medium 头像组件默认头像图标大小 | --arco-avatar-default-overlap-large-size | getRem(28) |
-| small 头像组件默认头像图标大小 | --arco-avatar-default-overlap-medium-size | getRem(24) |
-| smaller 头像组件默认头像图标大小 | --arco-avatar-default-overlap-small-size | getRem(20) |
-| ultra-small 头像组件默认头像图标大小 | --arco-avatar-default-overlap-smaller-size | getRem(16) |
-| 头像组件背景色 | --arco-avatar-default-overlap-ultra-small-size | getRem(12) |
-| medium 字体头像字体大小 | --arco-avatar-large-text-font-size | getRem(16) |
-| small 字体头像字体大小 | --arco-avatar-medium-text-font-size | getRem(16) |
-| smaller 字体头像字体大小 | --arco-avatar-small-text-font-size | getRem(14) |
-| ultra-small 字体头像字体大小 | --arco-avatar-smaller-text-font-size | getRem(12) |
-| large 头像叠层组件头像重叠偏移量 | --arco-avatar-ultra-small-text-font-size | getRem(10) |
-| large 头像叠层组件头像border宽度 | --arco-avatar-group-large-size-offset | getRem(-12) |
-| medium 头像叠层组件头像重叠偏移量 | --arco-avatar-group-large-size-border | getRem(1.5) |
-| medium 头像叠层组件头像border宽度 | --arco-avatar-group-medium-size-offset | getRem(-12) |
-| small 头像叠层组件头像重叠偏移量 | --arco-avatar-group-medium-size-border | getRem(1.5) |
-| small 头像叠层组件头像border宽度 | --arco-avatar-group-small-size-offset | getRem(-12) |
-| smaller 头像叠层组件头像重叠偏移量 | --arco-avatar-group-small-size-border | getRem(1.5) |
-| smaller 头像叠层组件头像border宽度 | --arco-avatar-group-smaller-size-offset | getRem(-8) |
-| ultra-small 头像叠层组件头像重叠偏移量 | --arco-avatar-group-smaller-size-border | getRem(1) |
-| ultra-small 头像叠层组件头像border宽度 | --arco-avatar-group-ultra-small-size-offset | getRem(-8) |
-| 头像叠层border颜色 | --arco-avatar-group-ultra-small-size-border | getRem(1) |
-| medium大小带有辅助信息的头像组件容器高度 | --arco-avatar-info-box-large-size | getRem(88) |
-| small大小带有辅助信息的头像组件容器高度 | --arco-avatar-info-box-medium-size | getRem(80) |
-| smaller大小带有辅助信息的头像组件容器高度 | --arco-avatar-info-box-small-size | getRem(80) |
-| ultra-small大小带有辅助信息的头像组件容器高度 | --arco-avatar-info-box-smaller-size | getRem(64) |
-| large 头像组件用户名文字大小 | --arco-avatar-info-box-ultra-small-size | getRem(56) |
-| large 头像组件用户名文字行高 | --arco-avatar-name-large-font-size | getRem(18) |
-| large 头像组件辅助信息文字大小 | --arco-avatar-name-large-line-height | getRem(26) |
-| large 头像组件辅助信息文字行高 | --arco-avatar-desc-large-font-size | getRem(14) |
-| large 头像组件用户名和辅助信息间距的大小 | --arco-avatar-desc-large-line-height | getRem(20) |
-| medium 头像组件用户名文字大小 | --arco-avatar-desc-large-margin-top | getRem(2) |
-| medium 头像组件用户名文字行高 | --arco-avatar-name-medium-font-size | getRem(18) |
-| medium 头像组件辅助信息文字大小 | --arco-avatar-name-medium-line-height | getRem(26) |
-| medium 头像组件辅助信息文字行高 | --arco-avatar-desc-medium-font-size | getRem(14) |
-| medium 头像组件用户名和辅助信息间距的大小 | --arco-avatar-desc-medium-line-height | getRem(20) |
-| small 头像组件用户名文字大小 | --arco-avatar-desc-medium-margin-top | getRem(2) |
-| small 头像组件用户名文字行高 | --arco-avatar-name-small-font-size | getRem(16) |
-| small 头像组件辅助信息文字大小 | --arco-avatar-name-small-line-height | getRem(24) |
-| small 头像组件辅助信息文字行高 | --arco-avatar-desc-small-font-size | getRem(12) |
-| small 头像组件用户名和辅助信息间距的大小 | --arco-avatar-desc-small-line-height | getRem(16) |
-| smaller 头像组件用户名文字大小 | --arco-avatar-desc-small-margin-top | getRem(0) |
-| smaller 头像组件用户名文字行高 | --arco-avatar-name-smaller-font-size | getRem(14) |
-| smaller 头像组件辅助信息文字大小 | --arco-avatar-name-smaller-line-height | getRem(20) |
-| smaller 头像组件辅助信息文字行高 | --arco-avatar-desc-smaller-font-size | getRem(12) |
-| smaller 头像组件用户名和辅助信息间距的大小 | --arco-avatar-desc-smaller-line-height | getRem(16) |
-| ultra-small 头像组件用户名文字大小 | --arco-avatar-desc-smaller-margin-top | getRem(0) |
-| ultra-small 头像组件用户名文字行高 | --arco-avatar-name-ultra-small-font-size | getRem(13) |
-| ultra-small 头像组件辅助信息文字大小 | --arco-avatar-name-ultra-small-line-height | getRem(18) |
-| ultra-small 头像组件辅助信息文字行高 | --arco-avatar-desc-ultra-small-font-size | getRem(10) |
-| ultra-small 头像组件用户名和辅助信息间距的大小 | --arco-avatar-desc-ultra-small-line-height | getRem(14) |
-| 头像组件用户名字体颜色 | --arco-avatar-desc-ultra-small-margin-top | getRem(2) |
-| 骨架屏金刚位图标区宽度 | --arco-avatar-skeleton-avatar-size | getRem(32) |
+#### 浅色模式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 头像组件辅助信息文字颜色 | --arco-avatar-desc-color | #86909c（浅灰色） ⬜ | var(--arco-sub-info-font-color) |
+| 头像叠层border颜色 | --arco-avatar-group-border-color | #FFFFFF（白色） ⬜ | var(--arco-background-color) |
+| 头像组件用户名字体颜色 | --arco-avatar-name-color | #1d2129（深灰色） ⬛ | var(--arco-font-color) |
+| 字体头像文字颜色 | --arco-avatar-text-font-color | #FFFFFF（白色） ⬜ | var(--arco-mask-content-color) |
+| 头像组件背景色 | --arco-avatar-background | #4080FF |  |
+| 头像组件默认头像背景色 | --arco-avatar-default-overlap-background | #c9cdd4（极浅灰色） ⬜ | var(--arco-disabled-color) |
+| large 头像组件默认头像图标大小 | --arco-avatar-default-overlap-large-size | 0.56rem | 28px |
+| medium 头像组件默认头像图标大小 | --arco-avatar-default-overlap-medium-size | 0.48rem | 24px |
+| small 头像组件默认头像图标大小 | --arco-avatar-default-overlap-small-size | 0.4rem | 20px |
+| smaller 头像组件默认头像图标大小 | --arco-avatar-default-overlap-smaller-size | 0.32rem | 16px |
+| ultra-small 头像组件默认头像图标大小 | --arco-avatar-default-overlap-ultra-small-size | 0.24rem | 12px |
+| large 头像组件辅助信息文字大小 | --arco-avatar-desc-large-font-size | 0.28rem | 14px |
+| medium 头像组件辅助信息文字大小 | --arco-avatar-desc-medium-font-size | 0.28rem | 14px |
+| small 头像组件辅助信息文字大小 | --arco-avatar-desc-small-font-size | 0.24rem | 12px |
+| smaller 头像组件辅助信息文字大小 | --arco-avatar-desc-smaller-font-size | 0.24rem | 12px |
+| ultra-small 头像组件辅助信息文字大小 | --arco-avatar-desc-ultra-small-font-size | 0.2rem | 10px |
+| large 头像叠层组件头像重叠偏移量 | --arco-avatar-group-large-size-offset | -0.24rem | -12px |
+| medium 头像叠层组件头像重叠偏移量 | --arco-avatar-group-medium-size-offset | -0.24rem | -12px |
+| small 头像叠层组件头像重叠偏移量 | --arco-avatar-group-small-size-offset | -0.24rem | -12px |
+| smaller 头像叠层组件头像重叠偏移量 | --arco-avatar-group-smaller-size-offset | -0.16rem | -8px |
+| ultra-small 头像叠层组件头像重叠偏移量 | --arco-avatar-group-ultra-small-size-offset | -0.16rem | -8px |
+| large大小带有辅助信息的头像组件容器高度 | --arco-avatar-info-box-large-size | 1.76rem | 88px |
+| medium大小带有辅助信息的头像组件容器高度 | --arco-avatar-info-box-medium-size | 1.6rem | 80px |
+| small大小带有辅助信息的头像组件容器高度 | --arco-avatar-info-box-small-size | 1.6rem | 80px |
+| smaller大小带有辅助信息的头像组件容器高度 | --arco-avatar-info-box-smaller-size | 1.28rem | 64px |
+| ultra-small大小带有辅助信息的头像组件容器高度 | --arco-avatar-info-box-ultra-small-size | 1.12rem | 56px |
+| large 头像组件的大小 | --arco-avatar-large-size | 1.12rem | 56px |
+| large 字体头像字体大小 | --arco-avatar-large-text-font-size | 0.32rem | 16px |
+| medium 头像组件的大小 | --arco-avatar-medium-size | 0.96rem | 48px |
+| medium 字体头像字体大小 | --arco-avatar-medium-text-font-size | 0.32rem | 16px |
+| large 头像组件用户名文字大小 | --arco-avatar-name-large-font-size | 0.36rem | 18px |
+| medium 头像组件用户名文字大小 | --arco-avatar-name-medium-font-size | 0.36rem | 18px |
+| small 头像组件用户名文字大小 | --arco-avatar-name-small-font-size | 0.32rem | 16px |
+| smaller 头像组件用户名文字大小 | --arco-avatar-name-smaller-font-size | 0.28rem | 14px |
+| ultra-small 头像组件用户名文字大小 | --arco-avatar-name-ultra-small-font-size | 0.26rem | 13px |
+| small 头像组件的大小 | --arco-avatar-small-size | 0.8rem | 40px |
+| small 字体头像字体大小 | --arco-avatar-small-text-font-size | 0.28rem | 14px |
+| smaller 头像组件的大小 | --arco-avatar-smaller-size | 0.64rem | 32px |
+| smaller 字体头像字体大小 | --arco-avatar-smaller-text-font-size | 0.24rem | 12px |
+| ultra-small 头像组件的大小 | --arco-avatar-ultra-small-size | 0.48rem | 24px |
+| ultra-small 字体头像字体大小 | --arco-avatar-ultra-small-text-font-size | 0.2rem | 10px |
+| large 头像组件辅助信息文字行高 | --arco-avatar-desc-large-line-height | 0.4rem | 20px |
+| medium 头像组件辅助信息文字行高 | --arco-avatar-desc-medium-line-height | 0.4rem | 20px |
+| small 头像组件辅助信息文字行高 | --arco-avatar-desc-small-line-height | 0.32rem | 16px |
+| smaller 头像组件辅助信息文字行高 | --arco-avatar-desc-smaller-line-height | 0.32rem | 16px |
+| ultra-small 头像组件辅助信息文字行高 | --arco-avatar-desc-ultra-small-line-height | 0.28rem | 14px |
+| large 头像组件用户名文字行高 | --arco-avatar-name-large-line-height | 0.52rem | 26px |
+| medium 头像组件用户名文字行高 | --arco-avatar-name-medium-line-height | 0.52rem | 26px |
+| small 头像组件用户名文字行高 | --arco-avatar-name-small-line-height | 0.48rem | 24px |
+| smaller 头像组件用户名文字行高 | --arco-avatar-name-smaller-line-height | 0.4rem | 20px |
+| ultra-small 头像组件用户名文字行高 | --arco-avatar-name-ultra-small-line-height | 0.36rem | 18px |
+| large 头像组件用户名和辅助信息间距的大小 | --arco-avatar-desc-large-margin-top | 0.04rem | 2px |
+| medium 头像组件用户名和辅助信息间距的大小 | --arco-avatar-desc-medium-margin-top | 0.04rem | 2px |
+| small 头像组件用户名和辅助信息间距的大小 | --arco-avatar-desc-small-margin-top | 0 |  |
+| smaller 头像组件用户名和辅助信息间距的大小 | --arco-avatar-desc-smaller-margin-top | 0 |  |
+| ultra-small 头像组件用户名和辅助信息间距的大小 | --arco-avatar-desc-ultra-small-margin-top | 0.04rem | 2px |
+| large 头像叠层组件头像border宽度 | --arco-avatar-group-large-size-border | 0.03rem | 2px |
+| medium 头像叠层组件头像border宽度 | --arco-avatar-group-medium-size-border | 0.03rem | 2px |
+| small 头像叠层组件头像border宽度 | --arco-avatar-group-small-size-border | 0.03rem | 2px |
+| smaller 头像叠层组件头像border宽度 | --arco-avatar-group-smaller-size-border | 0.02rem | 1px |
+| ultra-small 头像叠层组件头像border宽度 | --arco-avatar-group-ultra-small-size-border | 0.02rem | 1px |
+
+#### 暗黑模式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 头像组件辅助信息文字颜色（暗黑模式） | --arco-dark-avatar-desc-color | #929293（暗黑辅助文字） ⬜ | var(--arco-dark-sub-info-font-color) |
+| 头像叠层border颜色（暗黑模式） | --arco-dark-avatar-group-border-color | #17171A（暗黑背景） ⬛ | var(--arco-dark-background-color) |
+| 头像组件用户名字体颜色（暗黑模式） | --arco-dark-avatar-name-color | #f6f6f6（暗黑文字） ⬜ | var(--arco-dark-font-color) |
+| 字体头像文字颜色（暗黑模式） | --arco-dark-avatar-text-font-color | rgba(255, 255, 255, 0.9) | var(--arco-dark-mask-content-color) |
+| 头像组件背景色（暗黑模式） | --arco-dark-avatar-background | #306FFF |  |
+| 头像组件默认头像背景色（暗黑模式） | --arco-dark-avatar-default-overlap-background | #5f5f60（暗黑禁用） ⬛ | var(--arco-dark-disabled-color) |

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

@@ -0,0 +1,28 @@
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
+
+#### 浅色模式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 徽标背景色 | --arco-badge-background-color | #F53F3F（危险红） 🟥 | var(--arco-danger-color) |
+| 徽标带边框时的边框颜色 | --arco-badge-border-color | #FFFFFF（白色） ⬜ | var(--arco-background-color) |
+| 徽标文字颜色 | --arco-badge-text-color | #FFFFFF（白色） ⬜ | var(--arco-mask-content-color) |
+| 徽标字体大小 | --arco-badge-font-size | 12PX |  |
+| 徽标带文字样式横向内边距 | --arco-badge-text-padding | 4PX |  |
+| 徽标带文字样式的圆角值 | --arco-badge-border-radius | 100PX |  |
+| 徽标无文字小圆点样式相对于右上角的缩进 | --arco-badge-dot-deviation | -4PX |  |
+| 徽标无文字小圆点样式大小 | --arco-badge-dot-width | 8PX |  |
+| 徽标带文字样式相对于右上角的缩进 | --arco-badge-text-deviation | -8PX |  |
+| 徽标带文字样式的高度及最小宽度 | --arco-badge-text-width | 16PX |  |
+
+#### 暗黑模式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 徽标背景色（暗黑模式） | --arco-dark-badge-background-color | #F76965（暗黑红） 🟥 | var(--arco-dark-danger-color) |
+| 徽标带边框时的边框颜色（暗黑模式） | --arco-dark-badge-border-color | #17171A（暗黑背景） ⬛ | var(--arco-dark-background-color) |
+| 徽标文字颜色（暗黑模式） | --arco-dark-badge-text-color | rgba(255, 255, 255, 0.9) | var(--arco-dark-mask-content-color) |

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

@@ -4,26 +4,58 @@
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
 
-| 描述 | 名称 | 默认值 |
-| --- | --- | --- |
-| 对话框（独立按钮样式）主按钮背景色 | --arco-button-dialog-footer-android-button-gutter | getRem(28) |
-| 对话框（独立按钮样式）按钮圆角值 | --arco-button-dialog-button-footer-height | getRem(36) |
-| 对话框（独立按钮样式）按钮间距 | --arco-button-dialog-button-footer-border-radius | getRem(30) |
-| 轮播图自动轮播时的动画曲线 | --arco-button-dialog-button-footer-gutter | getRem(8) |
-| primary 类型按钮背景色 | --arco-button-icon-text-gutter | getRem(4) |
-| huge 按钮文字大小 | --arco-button-huge-height | getRem(44) |
-| large 按钮内部padding | --arco-button-huge-text-size | getRem(16) |
-| large 按钮文字大小 | --arco-button-large-height | getRem(36) |
-| medium 按钮内部padding | --arco-button-large-text-size | getRem(15) |
-| medium 按钮文字大小 | --arco-button-medium-height | getRem(32) |
-| small 按钮内部padding | --arco-button-medium-text-size | getRem(14) |
-| small 按钮文字大小 | --arco-button-small-height | getRem(28) |
-| mini 按钮内部padding | --arco-button-small-text-size | getRem(14) |
-| mini 按钮文字大小 | --arco-button-mini-height | getRem(24) |
-| 文字缩略组件默认字体大小 | --arco-button-mini-text-size | getRem(12) |
-| 选择器按钮内边距 | --arco-button-picker-button-font-size | getRem(15) |
-| 选择器左侧按钮字体颜色 | --arco-button-picker-button-padding | getRem(16) |
-| 分页器翻页按钮圆角值 | --arco-button-pagination-field-button-min-height | getRem(32) |
-| 分页器翻页按钮内边距 | --arco-button-pagination-field-button-border-radius | getRem(2) |
-| 步进器按钮图标尺寸 | --arco-button-stepper-button-size | getRem(28) |
-| 步进器默认背景颜色 | --arco-button-stepper-button-icon-size | getRem(10) |
+#### 浅色模式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| default 类型按钮禁用态文字颜色 | --arco-button-default-disabled-text-color | #94BFFF（禁用蓝） 🟦 | var(--arco-primary-disabled-color) |
+| default 类型按钮文字颜色 | --arco-button-default-text-color | #165DFF（主题蓝） 🟦 | var(--arco-primary-color) |
+| ghost 类型按钮禁用态文字颜色 | --arco-button-ghost-disabled-text-color | #94BFFF（禁用蓝） 🟦 | var(--arco-primary-disabled-color) |
+| ghost 类型按钮文字颜色 | --arco-button-ghost-text-color | #165DFF（主题蓝） 🟦 | var(--arco-primary-color) |
+| primary 类型按钮禁用态文字颜色 | --arco-button-primary-disabled-text-color | #E8F3FF（浅蓝底） 🟦 | var(--arco-lighter-primary-color) |
+| primary 类型按钮文字颜色 | --arco-button-primary-text-color | #FFFFFF（白色） ⬜ | var(--arco-mask-content-color) |
+| default 类型按钮背景色 | --arco-button-default-background | #E8F3FF（浅蓝底） 🟦 | var(--arco-lighter-primary-color) |
+| default 类型按钮点击态背景色 | --arco-button-default-clicked-background | #94BFFF（禁用蓝） 🟦 | var(--arco-primary-disabled-color) |
+| default 类型按钮禁用态背景色 | --arco-button-default-disabled-background | #E8F3FF（浅蓝底） 🟦 | var(--arco-lighter-primary-color) |
+| ghost 类型按钮背景色 | --arco-button-ghost-background | transparent（透明） ❓ |  |
+| ghost 类型按钮点击态背景色 | --arco-button-ghost-clicked-background | #E8F3FF（浅蓝底） 🟦 | var(--arco-lighter-primary-color) |
+| ghost 类型按钮禁用态背景色 | --arco-button-ghost-disabled-background | transparent（透明） ❓ |  |
+| primary 类型按钮背景色 | --arco-button-primary-background | #165DFF（主题蓝） 🟦 | var(--arco-primary-color) |
+| primary 类型按钮点击态背景色 | --arco-button-primary-clicked-background | #0E42D2（深蓝） 🟦 |  |
+| primary 类型按钮禁用态背景色 | --arco-button-primary-disabled-background | #94BFFF（禁用蓝） 🟦 | var(--arco-primary-disabled-color) |
+| huge 按钮文字大小 | --arco-button-huge-text-size | 0.32rem | 16px |
+| large 按钮文字大小 | --arco-button-large-text-size | 0.3rem | 15px |
+| medium 按钮文字大小 | --arco-button-medium-text-size | 0.28rem | 14px |
+| mini 按钮文字大小 | --arco-button-mini-text-size | 0.24rem | 12px |
+| small 按钮文字大小 | --arco-button-small-text-size | 0.28rem | 14px |
+| huge 按钮高度 | --arco-button-huge-height | 0.88rem | 44px |
+| large 按钮高度 | --arco-button-large-height | 0.72rem | 36px |
+| 按钮的行高 | --arco-button-line-height | 1.2 |  |
+| medium 按钮高度 | --arco-button-medium-height | 0.64rem | 32px |
+| mini 按钮高度 | --arco-button-mini-height | 0.48rem | 24px |
+| small 按钮高度 | --arco-button-small-height | 0.56rem | 28px |
+| huge 按钮内部padding | --arco-button-huge-padding | 0 0.32rem | 0 16px |
+| large 按钮内部padding | --arco-button-large-padding | 0 0.32rem | 0 16px |
+| medium 按钮内部padding | --arco-button-medium-padding | 0 0.32rem | 0 16px |
+| mini 按钮内部padding | --arco-button-mini-padding | 0 0.16rem | 0 8px |
+| small 按钮内部padding | --arco-button-small-padding | 0 0.16rem | 0 8px |
+| shape=semi时圆角大小 | --arco-button-radius | 2PX |  |
+| 按钮图标与文字的间距 | --arco-button-icon-text-gutter | 0.08rem | 4px |
+
+#### 暗黑模式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| default 类型按钮禁用态文字颜色（暗黑模式） | --arco-dark-button-default-disabled-text-color | #0E32A6（暗黑主题禁用） 🟦 | var(--arco-dark-primary-disabled-color) |
+| default 类型按钮文字颜色（暗黑模式） | --arco-dark-button-default-text-color | #3C7EFF（主题浅蓝） 🟦 | var(--arco-dark-primary-color) |
+| ghost 类型按钮禁用态文字颜色（暗黑模式） | --arco-dark-button-ghost-disabled-text-color | #0E32A6（暗黑主题禁用） 🟦 | var(--arco-dark-primary-disabled-color) |
+| ghost 类型按钮文字颜色（暗黑模式） | --arco-dark-button-ghost-text-color | #3C7EFF（主题浅蓝） 🟦 | var(--arco-dark-primary-color) |
+| primary 类型按钮禁用态文字颜色（暗黑模式） | --arco-dark-button-primary-disabled-text-color | #000D4D（暗黑主题浅） 🟦 | var(--arco-dark-lighter-primary-color) |
+| primary 类型按钮文字颜色（暗黑模式） | --arco-dark-button-primary-text-color | rgba(255, 255, 255, 0.9) | var(--arco-dark-mask-content-color) |
+| default 类型按钮背景色（暗黑模式） | --arco-dark-button-default-background | #000D4D（暗黑主题浅） 🟦 | var(--arco-dark-lighter-primary-color) |
+| default 类型按钮点击态背景色（暗黑模式） | --arco-dark-button-default-clicked-background | #0E32A6（暗黑主题禁用） 🟦 | var(--arco-dark-primary-disabled-color) |
+| default 类型按钮禁用态背景色（暗黑模式） | --arco-dark-button-default-disabled-background | #000D4D（暗黑主题浅） 🟦 | var(--arco-dark-lighter-primary-color) |
+| ghost 类型按钮点击态背景色（暗黑模式） | --arco-dark-button-ghost-clicked-background | #000D4D（暗黑主题浅） 🟦 | var(--arco-dark-lighter-primary-color) |
+| primary 类型按钮背景色（暗黑模式） | --arco-dark-button-primary-background | #3C7EFF（主题浅蓝） 🟦 | var(--arco-dark-primary-color) |
+| primary 类型按钮点击态背景色（暗黑模式） | --arco-dark-button-primary-clicked-background | #689FFF |  |
+| primary 类型按钮禁用态背景色（暗黑模式） | --arco-dark-button-primary-disabled-background | #0E32A6（暗黑主题禁用） 🟦 | var(--arco-dark-primary-disabled-color) |

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

@@ -4,12 +4,35 @@
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
 
-| 描述 | 名称 | 默认值 |
-| --- | --- | --- |
-| 轮播图指示器不居中时，距离两侧的安全距离 | --arco-carousel-indicator-position | getRem(12) |
-| 轮播图圆点形指示器之间的间距 | --arco-carousel-indicator-safe-padding | getRem(16) |
-| 轮播图方形指示器之间的间距 | --arco-carousel-circle-indicator-gutter | getRem(8) |
-| 轮播图圆点形指示器大小 | --arco-carousel-square-indicator-gutter | getRem(8) |
-| 轮播图方形指示器高度 | --arco-carousel-square-indicator-width | getRem(12) |
-| 轮播图滑块文字内边距 | --arco-carousel-item-text-height | getRem(32) |
-| 输入框 高度 | --arco-carousel-item-text-font-size | getRem(16) |
+#### 浅色模式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 轮播图滑块文字颜色 | --arco-carousel-item-text-color | #FFFFFF（白色） ⬜ | var(--arco-mask-content-color) |
+| 轮播图指示器高亮背景色 | --arco-carousel-indicator-active-background | #FFFFFF（白色） ⬜ | var(--arco-mask-content-color) |
+| 轮播图指示器放轮播图外部时高亮背景色 | --arco-carousel-indicator-active-inverse-background | #165DFF（主题蓝） 🟦 | var(--arco-primary-color) |
+| 轮播图指示器背景色 | --arco-carousel-indicator-background | rgba(255, 255, 255, 0.5) |  |
+| 轮播图指示器放轮播图外部时背景色 | --arco-carousel-indicator-inverse-background | #e5e6eb（边框灰） ⬜ | var(--arco-line-color) |
+| 轮播图滑块文字背景色 | --arco-carousel-item-text-background | linear-gradient(180deg, rgba(0, 0, 0, 0) 5.18%, rgba(0, 0, 0, 0.15) 100%) |  |
+| 轮播图圆点形指示器大小 | --arco-carousel-circle-indicator-size | 6PX |  |
+| 轮播图滑块文字大小 | --arco-carousel-item-text-font-size | 0.32rem | 16px |
+| 轮播图滑块文字高度 | --arco-carousel-item-text-height | 0.64rem | 32px |
+| 轮播图方形指示器高度 | --arco-carousel-square-indicator-height | 3PX |  |
+| 轮播图指示器放轮播图外部时，指示器容器内边距 | --arco-carousel-indicator-outside-padding | 0.16rem 0 0.1rem | 8px 0 5px |
+| 轮播图指示器不居中时，距离两侧的安全距离 | --arco-carousel-indicator-safe-padding | 0.32rem | 16px |
+| 轮播图滑块文字内边距 | --arco-carousel-item-text-padding | 0 0.24rem | 0 12px |
+| 轮播图圆点形指示器之间的间距 | --arco-carousel-circle-indicator-gutter | 0.16rem | 8px |
+| 轮播图方形指示器之间的间距 | --arco-carousel-square-indicator-gutter | 0.16rem | 8px |
+| 轮播图自动轮播时的动画曲线 | --arco-carousel-auto-transition | cubic-bezier(0.66, 0, 0.34, 1) |  |
+| 轮播图指示器距离边缘的距离 | --arco-carousel-indicator-position | 0.24rem | 12px |
+| 轮播图手势滑动时手指抬起后的动画曲线 | --arco-carousel-slide-transition | cubic-bezier(0.32, 0.94, 0.6, 1) |  |
+| 轮播图方形指示器宽度 | --arco-carousel-square-indicator-width | 0.24rem | 12px |
+
+#### 暗黑模式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 轮播图滑块文字颜色（暗黑模式） | --arco-dark-carousel-item-text-color | rgba(255, 255, 255, 0.9) | var(--arco-dark-mask-content-color) |
+| 轮播图指示器高亮背景色（暗黑模式） | --arco-dark-carousel-indicator-active-background | rgba(255, 255, 255, 0.9) | var(--arco-dark-mask-content-color) |
+| 轮播图指示器放轮播图外部时高亮背景色（暗黑模式） | --arco-dark-carousel-indicator-active-inverse-background | #3C7EFF（主题浅蓝） 🟦 | var(--arco-dark-primary-color) |
+| 轮播图指示器放轮播图外部时背景色（暗黑模式） | --arco-dark-carousel-indicator-inverse-background | #484849（暗黑深线） ⬛ | var(--arco-dark-line-color) |

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

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

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

@@ -4,8 +4,25 @@
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
 
-| 描述 | 名称 | 默认值 |
-| --- | --- | --- |
-| checkbox图标被选中时的颜色 | --arco-checkbox-icon-margin-right | getRem(8) |
-| checkbox文字禁用态透明度 | --arco-checkbox-text-font-size | getRem(16) |
-| tabs tabbar 字体大小 | --arco-checkbox-group-gutter | getRem(24) |
+#### 浅色模式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| checkbox图标被选中时的颜色 | --arco-checkbox-icon-checked-color | #165DFF（主题蓝） 🟦 | var(--arco-primary-color) |
+| checkbox图标被禁用且选中时的颜色 | --arco-checkbox-icon-checked-disabled-color | #E8F3FF（浅蓝底） 🟦 | var(--arco-lighter-primary-color) |
+| checkbox图标颜色 | --arco-checkbox-icon-color | #e5e6eb（边框灰） ⬜ | var(--arco-line-color) |
+| checkbox图标被禁用时的颜色 | --arco-checkbox-icon-disabled-color | #F7F8FA | var(--arco-card-background-color) |
+| checkbox图标大小（宽高） | --arco-checkbox-icon-font-size | 20PX |  |
+| checkbox文字字体大小 | --arco-checkbox-text-font-size | 0.32rem | 16px |
+| checkbox图标右侧margin | --arco-checkbox-icon-margin-right | 0.16rem | 8px |
+| checkbox选项组中选项之间的间距 | --arco-checkbox-group-gutter | 0.48rem | 24px |
+| checkbox文字禁用态透明度 | --arco-checkbox-text-disabled-opacity | 0.5 |  |
+
+#### 暗黑模式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| checkbox图标被选中时的颜色（暗黑模式） | --arco-dark-checkbox-icon-checked-color | #3C7EFF（主题浅蓝） 🟦 | var(--arco-dark-primary-color) |
+| checkbox图标被禁用且选中时的颜色（暗黑模式） | --arco-dark-checkbox-icon-checked-disabled-color | #000D4D（暗黑主题浅） 🟦 | var(--arco-dark-lighter-primary-color) |
+| checkbox图标颜色（暗黑模式） | --arco-dark-checkbox-icon-color | #484849（暗黑深线） ⬛ | var(--arco-dark-line-color) |
+| checkbox图标被禁用时的颜色（暗黑模式） | --arco-dark-checkbox-icon-disabled-color | hsla(0, 0%, 100%, 0.08) | var(--arco-dark-card-background-color) |

package/metaData/components/circle-progress/css-variables.md

@@ -4,12 +4,24 @@
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
 
-| 描述 | 名称 | 默认值 |
-| --- | --- | --- |
-| 环形进度条 进度条颜色 | --arco-circleprogress-font-size | getRem(14) |
-| 进度条 文字大小 | --arco-circleprogress-progress-text-gutter | getRem(8) |
-| 进度条 跟随进度样式的文字大小 | --arco-circleprogress-progress-text-font-size | getRem(14) |
-| 进度条 跟随进度样式的文字圆角值 | --arco-circleprogress-progress-text-follow-font-size | getRem(13) |
-| 进度条 跟随进度样式的文字宽度 | --arco-circleprogress-progress-text-follow-border-radius | getRem(20) |
-| 进度条 跟随进度样式的文字高度 | --arco-circleprogress-progress-text-follow-width | getRem(36) |
-| 渐隐过渡效果持续时长 | --arco-circleprogress-progress-text-follow-height | getRem(20) |
+#### 浅色模式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 环形进度条 不可用状态进度条颜色 | --arco-circle-progress-disabled-color | #c9cdd4（极浅灰色） ⬜ | var(--arco-disabled-color) |
+| 环形进度条 自定义进度条颜色渐变结束的颜色 | --arco-circle-progress-linear-gradient-end-color | #14CAFF |  |
+| 环形进度条 自定义进度条颜色渐变开始的颜色 | --arco-circle-progress-linear-gradient-start-color | #4776E6 |  |
+| 环形进度条 自定义进度条文字颜色 | --arco-circle-progress-linear-gradient-text-color | #3C89EC |  |
+| 环形进度条 微型进度条轨道颜色 | --arco-circle-progress-mini-track-color | #E8F3FF（浅蓝底） 🟦 | var(--arco-lighter-primary-color) |
+| 环形进度条 进度条颜色 | --arco-circle-progress-primary-color | #165DFF（主题蓝） 🟦 | var(--arco-primary-color) |
+| 环形进度条 轨道颜色 | --arco-circle-progress-track-color | #f2f3f5（灰底色） ⬜ | var(--arco-lighter-line-color) |
+| 环形进度条 文字大小 | --arco-circle-progress-font-size | 0.28rem | 14px |
+
+#### 暗黑模式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| 环形进度条 不可用状态进度条颜色（暗黑模式） | --arco-dark-circle-progress-disabled-color | #5f5f60（暗黑禁用） ⬛ | var(--arco-dark-disabled-color) |
+| 环形进度条 微型进度条轨道颜色（暗黑模式） | --arco-dark-circle-progress-mini-track-color | #000D4D（暗黑主题浅） 🟦 | var(--arco-dark-lighter-primary-color) |
+| 环形进度条 进度条颜色（暗黑模式） | --arco-dark-circle-progress-primary-color | #3C7EFF（主题浅蓝） 🟦 | var(--arco-dark-primary-color) |
+| 环形进度条 轨道颜色（暗黑模式） | --arco-dark-circle-progress-track-color | #2e2e30（暗黑浅线） ⬛ | var(--arco-dark-lighter-line-color) |

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

@@ -4,11 +4,30 @@
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
 
-| 描述 | 名称 | 默认值 |
-| --- | --- | --- |
-| collapse header的字体大小 | --arco-collapse-header-height | getRem(54) |
-| collapse header的左侧的margin | --arco-collapse-header-font-size | getRem(16) |
-| collapse header的内边距 | --arco-collapse-header-margin-left | getRem(16) |
-| collapse header的图标的颜色 | --arco-collapse-header-line-height | getRem(22) |
-| collapse content（面板）的字体颜色 | --arco-collapse-content-font-size | getRem(14) |
-| 下拉刷新组件状态文案内容区背景色 | --arco-collapse-content-line-height | getRem(22) |
+#### 浅色模式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| collapse content（面板）的字体颜色 | --arco-collapse-content-color | #86909c（浅灰色） ⬜ | var(--arco-sub-info-font-color) |
+| collapse 禁用时header的字体颜色 | --arco-collapse-disabled-header-color | #c9cdd4（极浅灰色） ⬜ | var(--arco-disabled-color) |
+| collapse header的字体颜色 | --arco-collapse-header-color | #1d2129（深灰色） ⬛ | var(--arco-font-color) |
+| collapse header的图标的颜色 | --arco-collapse-header-icon-color | #c9cdd4（极浅灰色） ⬜ | var(--arco-disabled-color) |
+| collapse header的背景颜色 | --arco-collapse-header-background | #FFFFFF（白色） ⬜ | var(--arco-container-background-color) |
+| collapse content（面板）的字体大小 | --arco-collapse-content-font-size | 0.28rem | 14px |
+| collapse header的字体大小 | --arco-collapse-header-font-size | 0.32rem | 16px |
+| collapse content（面板）的字体行高 | --arco-collapse-content-line-height | 0.44rem | 22px |
+| collapse header的高度 | --arco-collapse-header-height | 1.08rem | 54px |
+| collapse header的字体行高 | --arco-collapse-header-line-height | 0.44rem | 22px |
+| collapse content（面板）的内边距 | --arco-collapse-content-padding | 0.24rem 0.32rem | 12px 16px |
+| collapse header的内边距 | --arco-collapse-header-padding | 0.32rem 0.32rem 0.32rem 0 | 16px 16px 16px 0 |
+| collapse header的左侧的margin | --arco-collapse-header-margin-left | 0.32rem | 16px |
+
+#### 暗黑模式
+
+| 描述 | 名称 | 默认值 | 备注 |
+| --- | --- | --- | --- |
+| collapse content（面板）的字体颜色（暗黑模式） | --arco-dark-collapse-content-color | #929293（暗黑辅助文字） ⬜ | var(--arco-dark-sub-info-font-color) |
+| collapse 禁用时header的字体颜色（暗黑模式） | --arco-dark-collapse-disabled-header-color | #5f5f60（暗黑禁用） ⬛ | var(--arco-dark-disabled-color) |
+| collapse header的字体颜色（暗黑模式） | --arco-dark-collapse-header-color | #f6f6f6（暗黑文字） ⬜ | var(--arco-dark-font-color) |
+| collapse header的图标的颜色（暗黑模式） | --arco-dark-collapse-header-icon-color | #5f5f60（暗黑禁用） ⬛ | var(--arco-dark-disabled-color) |
+| collapse header的背景颜色（暗黑模式） | --arco-dark-collapse-header-background | #232324（暗黑容器） ⬛ | var(--arco-dark-container-background-color) |