oxy-uni-ui 2.0.0 → 2.1.1

package/components/common/abstracts/variable.scss

@@ -71,28 +71,96 @@ $-color-icon-disabled: var(--oxy-color-icon-disabled, #a7a7a7) !default; // icon
 /*-------------------------------- Theme color application size.  start --------------------------------*/
 
 /* 文字字号 */
-$-fs-big: var(--oxy-fs-big, 48rpx) !default; // 大型标题
-$-fs-important: var(--oxy-fs-important, 38rpx) !default; // 重要数据
-$-fs-title: var(--oxy-fs-title, 32rpx) !default; // 标题字号/重要正文字号
-$-fs-content: var(--oxy-fs-content, 28rpx) !default; // 普通正文
-$-fs-secondary: var(--oxy-fs-secondary, 24rpx) !default; // 次要信息，注释/补充/正文
-$-fs-aid: var(--oxy-fs-aid, 20rpx) !default; // 辅助文字字号，弱化信息，引导性/不可点文字
+$-fs-big: var(--oxy-fs-big, 56rpx) !default; // 大型标题
+$-fs-important: var(--oxy-fs-important, 44rpx) !default; // 重要数据
+$-fs-title: var(--oxy-fs-title, 36rpx) !default; // 标题字号/重要正文字号
+$-fs-content: var(--oxy-fs-content, 32rpx) !default; // 普通正文（16px）
+$-fs-secondary: var(--oxy-fs-secondary, 28rpx) !default; // 次要信息，注释/补充/正文
+$-fs-aid: var(--oxy-fs-aid, 24rpx) !default; // 辅助文字字号，弱化信息，引导性/不可点文字
 
 /* 文字字重 */
 $-fw-medium: var(--oxy-fw-medium, 500) !default; // PingFangSC-Medium
 $-fw-semibold: var(--oxy-fw-semibold, 600) !default; // PingFangSC-Semibold
+$-fw-bold: var(--oxy-fw-bold, 700) !default; // 粗体
 
 /* 尺寸 */
-$-size-side-padding: var(--oxy-size-side-padding, 30rpx) !default; // 屏幕两边留白
-$-size-side-padding-small: var(--oxy-size-side-padding-small, 12rpx) !default; // 屏幕两边留白小值
+$-size-side-padding: var(--oxy-size-side-padding, 32rpx) !default; // 屏幕两边留白
+$-size-side-padding-small: var(--oxy-size-side-padding-small, 16rpx) !default; // 屏幕两边留白小值
+
+/* 基础圆角 */
+$-radius-xs: var(--oxy-radius-xs, 4rpx) !default; // 超小圆角
+$-radius-sm: var(--oxy-radius-sm, 8rpx) !default; // 小圆角
+$-radius-md: var(--oxy-radius-md, 12rpx) !default; // 中小圆角
+$-radius-lg: var(--oxy-radius-lg, 16rpx) !default; // 中圆角
+$-radius-xl: var(--oxy-radius-xl, 24rpx) !default; // 大圆角
+$-radius-2xl: var(--oxy-radius-2xl, 32rpx) !default; // 超大圆角
+$-radius-3xl: var(--oxy-radius-3xl, 40rpx) !default; // 超大圆角
+$-radius-pill: var(--oxy-radius-pill, 1998rpx) !default; // 胶囊圆角
+$-radius-circle: var(--oxy-radius-circle, 50%) !default; // 圆形
+
+/* 基础阴影 */
+$-shadow-sm: var(--oxy-shadow-sm, 0 4rpx 20rpx 0 rgba(0, 0, 0, 0.1)) !default; // 小阴影
+$-shadow-md: var(--oxy-shadow-md, 0 8rpx 16rpx 0 rgba(0, 0, 0, 0.02)) !default; // 中阴影
+$-shadow-focus: var(--oxy-shadow-focus, 0 1px 4rpx 0 rgba(1, 87, 255, 0.2)) !default; // 焦点阴影
+$-shadow-color-muted: var(--oxy-shadow-color-muted, rgba(155, 155, 155, 0.5)) !default; // 中性阴影色
+
+/* 基础透明度 */
+$-opacity-disabled: var(--oxy-opacity-disabled, 0.6) !default; // 禁用态透明度
+
+/* 基础描边 */
+$-border-width-base: var(--oxy-border-width-base, 1px) !default; // 基础描边宽度
+
+/* 基础间距 */
+$-spacing-4: var(--oxy-spacing-4, 4rpx) !default; // 超小间距
+$-spacing-8: var(--oxy-spacing-8, 8rpx) !default; // 小间距
+$-spacing-12: var(--oxy-spacing-12, 12rpx) !default; // 中小间距
+$-spacing-16: var(--oxy-spacing-16, 16rpx) !default; // 中间距
+$-spacing-20: var(--oxy-spacing-20, 20rpx) !default; // 中上间距
+$-spacing-24: var(--oxy-spacing-24, 24rpx) !default; // 大间距
+$-spacing-32: var(--oxy-spacing-32, 32rpx) !default; // 超大间距
+$-spacing-40: var(--oxy-spacing-40, 40rpx) !default; // 特大间距
+$-spacing-48: var(--oxy-spacing-48, 48rpx) !default; // 极大间距
+
+/* 基础尺寸 */
+$-size-32: var(--oxy-size-32, 32rpx) !default; // 小尺寸
+$-size-48: var(--oxy-size-48, 48rpx) !default; // 中尺寸
+$-size-64: var(--oxy-size-64, 64rpx) !default; // 大尺寸
+$-size-80: var(--oxy-size-80, 80rpx) !default; // 特大尺寸
+
+/* 基础行高 */
+$-lh-base: var(--oxy-lh-base, 48rpx) !default; // 基础行高
+$-lh-sm: var(--oxy-lh-sm, 44rpx) !default; // 小行高
+$-lh-xs: var(--oxy-lh-xs, 40rpx) !default; // 超小行高
+
+/* 额外透明度 */
+$-opacity-muted: var(--oxy-opacity-muted, 0.5) !default; // 弱化透明度
+
+/* 基础行高比（无单位） */
+$-line-height-tight: var(--oxy-line-height-tight, 1.1) !default; // 紧凑行高
+$-line-height-base: var(--oxy-line-height-base, 1.2) !default; // 基础行高
+$-line-height-loose: var(--oxy-line-height-loose, 1.43) !default; // 宽松行高
+
+/* 基础过渡时长 */
+$-transition-duration-fast: var(--oxy-transition-duration-fast, 0.16s) !default; // 快速过渡
+$-transition-duration-base: var(--oxy-transition-duration-base, 0.2s) !default; // 基础过渡
+$-transition-duration-slow: var(--oxy-transition-duration-slow, 0.3s) !default; // 慢速过渡
+
+/* 基础过渡动效曲线 */
+$-transition-timing-function-base: var(--oxy-transition-timing-function-base, cubic-bezier(0.4, 0, 0.2, 1)) !default; // 标准缓出曲线
+
+/* 基础层级 */
+$-z-index-sticky: var(--oxy-z-index-sticky, 1) !default; // 粘性定位层级
+$-z-index-fixed: var(--oxy-z-index-fixed, 500) !default; // 固定定位层级
+$-z-index-overlay: var(--oxy-z-index-overlay, 999) !default; // 遮罩层级
+$-z-index-top: var(--oxy-z-index-top, 9999) !default; // 最高层级
 
 /*-------------------------------- Theme color application size.  end --------------------------------*/
 
 /* component var */
 
 /* action-sheet */
-$-action-sheet-weight: var(--oxy-action-sheet-weight, 500) !default; // 面板字重
-$-action-sheet-radius: var(--oxy-action-sheet-radius, 32rpx) !default; // 面板圆角大小
+$-action-sheet-weight: var(--oxy-action-sheet-weight, $-fw-medium) !default; // 面板字重
+$-action-sheet-radius: var(--oxy-action-sheet-radius, $-radius-2xl) !default; // 面板圆角大小
 $-action-sheet-loading-size: var(--oxy-action-sheet-loading-size, 40rpx) !default; // loading动画尺寸
 $-action-sheet-action-height: var(--oxy-action-sheet-action-height, 96rpx) !default; // 单条菜单高度
 $-action-sheet-color: var(--oxy-action-sheet-color, rgba(0, 0, 0, 0.85)) !default; // 选项名称颜色
@@ -112,15 +180,15 @@ $-action-sheet-cancel-color: var(--oxy-action-sheet-cancel-color, #131415) !defa
 $-action-sheet-cancel-height: var(--oxy-action-sheet-cancel-height, 88rpx) !default; // 取消按钮高度
 $-action-sheet-cancel-bg: var(--oxy-action-sheet-cancel-bg, rgba(240, 240, 240, 1)) !default; // 取消按钮背景色
 $-action-sheet-cancel-radius: var(--oxy-action-sheet-cancel-radius, 44rpx) !default; // 取消按钮圆角大小
-$-action-sheet-panel-padding: var(--oxy-action-sheet-panel-padding, 24rpx 0 22rpx) !default; // 自定义面板内边距大小
+$-action-sheet-panel-padding: var(--oxy-action-sheet-panel-padding, 24rpx 0 24rpx) !default; // 自定义面板内边距大小
 $-action-sheet-panel-img-fs: var(--oxy-action-sheet-panel-img-fs, 80rpx) !default; // 自定义面板图片大小
-$-action-sheet-panel-img-radius: var(--oxy-action-sheet-panel-img-radius, 8rpx) !default; // 自定义面板图片圆角大小
+$-action-sheet-panel-img-radius: var(--oxy-action-sheet-panel-img-radius, $-radius-sm) !default; // 自定义面板图片圆角大小
 
 /* badge */
 $-badge-bg: var(--oxy-badge-bg, $-color-danger) !default; // 背景填充颜色
 $-badge-color: var(--oxy-badge-color, #fff) !default; // 文字颜色
-$-badge-fs: var(--oxy-badge-fs, 24rpx) !default; // 文字字号
-$-badge-padding: var(--oxy-badge-padding, 0 10rpx) !default; // padding
+$-badge-fs: var(--oxy-badge-fs, $-fs-secondary) !default; // 文字字号
+$-badge-padding: var(--oxy-badge-padding, 0 $-spacing-12) !default; // padding
 $-badge-height: var(--oxy-badge-height, 32rpx) !default; // 高度
 $-badge-primary: var(--oxy-badge-primary, $-color-theme) !default;
 $-badge-success: var(--oxy-badge-success, $-color-success) !default;
@@ -131,26 +199,26 @@ $-badge-dot-size: var(--oxy-badge-dot-size, 12rpx) !default; // dot 类型大小
 $-badge-border: var(--oxy-badge-border, 4rpx solid $-badge-color) !default; // 边框样式
 
 /* button */
-$-button-disabled-opacity: var(--oxy-button-disabled-opacity, 0.6) !default; // button禁用透明度
+$-button-disabled-opacity: var(--oxy-button-disabled-opacity, $-opacity-disabled) !default; // button禁用透明度
 $-button-small-height: var(--oxy-button-small-height, 56rpx) !default; // 小型按钮高度
 $-button-small-padding: var(--oxy-button-small-padding, 0 24rpx) !default; // 小型按钮padding
 $-button-small-fs: var(--oxy-button-small-fs, $-fs-secondary) !default; // 小型按钮字号
-$-button-small-radius: var(--oxy-button-small-radius, 4rpx) !default; // 小型按钮圆角大小
-$-button-small-loading: var(--oxy-button-small-loading, 28rpx) !default; // 小型按钮loading图标大小
+$-button-small-radius: var(--oxy-button-small-radius, $-radius-xs) !default; // 小型按钮圆角大小
+$-button-small-loading: var(--oxy-button-small-loading, $-fs-content) !default; // 小型按钮loading图标大小
 $-button-medium-height: var(--oxy-button-medium-height, 72rpx) !default; // 中型按钮高度
 $-button-medium-padding: var(--oxy-button-medium-padding, 0 32rpx) !default; // 中型按钮padding
 $-button-medium-fs: var(--oxy-button-medium-fs, $-fs-content) !default; // 中型按钮字号
-$-button-medium-radius: var(--oxy-button-medium-radius, 8rpx) !default; // 中型按钮圆角大小
-$-button-medium-loading: var(--oxy-button-medium-loading, 36rpx) !default; // 中型按钮loading图标大小
-$-button-medium-box-shadow-size: var(--oxy-button-medium-box-shadow-size, 0 4rpx 8rpx 0) !default; // 中尺寸阴影尺寸
+$-button-medium-radius: var(--oxy-button-medium-radius, $-radius-sm) !default; // 中型按钮圆角大小
+$-button-medium-loading: var(--oxy-button-medium-loading, 40rpx) !default; // 中型按钮loading图标大小
+$-button-medium-box-shadow-size: var(--oxy-button-medium-box-shadow-size, 0 6rpx 10rpx 0) !default; // 中尺寸阴影尺寸
 $-button-large-height: var(--oxy-button-large-height, 88rpx) !default; // 大型按钮高度
 $-button-large-padding: var(--oxy-button-large-padding, 0 72rpx) !default; // 大型按钮padding
 $-button-large-fs: var(--oxy-button-large-fs, $-fs-title) !default; // 大型按钮字号
-$-button-large-radius: var(--oxy-button-large-radius, 16rpx) !default; // 大型按钮圆角大小
-$-button-large-loading: var(--oxy-button-large-loading, 48rpx) !default; // 大小按钮loading图标大小
-$-button-large-box-shadow-size: var(--oxy-button-large-box-shadow-size, 0 8rpx 16rpx 0) !default; // 大尺寸阴影尺寸
-$-button-icon-fs: var(--oxy-button-icon-fs, 36rpx) !default; // 带图标的按钮的图标大小
-$-button-icon-size: var(--oxy-button-icon-size, 80rpx) !default; // icon 类型按钮尺寸
+$-button-large-radius: var(--oxy-button-large-radius, $-radius-lg) !default; // 大型按钮圆角大小
+$-button-large-loading: var(--oxy-button-large-loading, $-fs-big) !default; // 大小按钮loading图标大小
+$-button-large-box-shadow-size: var(--oxy-button-large-box-shadow-size, 0 10rpx 20rpx 0) !default; // 大尺寸阴影尺寸
+$-button-icon-fs: var(--oxy-button-icon-fs, 40rpx) !default; // 带图标的按钮的图标大小
+$-button-icon-size: var(--oxy-button-icon-size, 88rpx) !default; // icon 类型按钮尺寸
 $-button-icon-color: var(--oxy-button-icon-color, rgba(0, 0, 0, 0.65)) !default; // icon 类型按钮颜色
 $-button-icon-disabled-color: var(--oxy-button-icon-disabled-color, $-color-icon-disabled) !default; // icon 类型按钮禁用颜色
 $-button-normal-color: var(--oxy-button-normal-color, $-color-title) !default; // 文字颜色
@@ -169,55 +237,56 @@ $-button-warning-bg-color: var(--oxy-button-warning-bg-color, $-color-warning) !
 $-button-error-color: var(--oxy-button-error-color, $-color-white) !default; // 错误按钮颜色
 $-button-error-bg-color: var(--oxy-button-error-bg-color, $-color-danger) !default; // 错误按钮背景颜色
 $-button-text-hover-opacity: var(--oxy-button-text-hover-opacity, 0.7) !default; // 文字button激活时透明度
+$-button-round-radius: var(--oxy-button-round-radius, $-radius-pill) !default; // 圆角按钮半径
 
 /* cell */
 $-cell-padding: var(--oxy-cell-padding, $-size-side-padding) !default; // cell 左右padding距离
-$-cell-line-height: var(--oxy-cell-line-height, 48rpx) !default; // 行高
+$-cell-line-height: var(--oxy-cell-line-height, 64rpx) !default; // 行高
 
 $-cell-group-title-fs: var(--oxy-cell-group-title-fs, $-fs-title) !default; // 组标题字号
-$-cell-group-padding: var(--oxy-cell-group-padding, 26rpx $-cell-padding) !default; // 组padding
+$-cell-group-padding: var(--oxy-cell-group-padding, 36rpx $-cell-padding) !default; // 组padding
 $-cell-group-title-color: var(--oxy-cell-group-title-color, rgba(0, 0, 0, 0.85)) !default; // 组标题文字颜色
 $-cell-group-value-fs: var(--oxy-cell-group-value-fs, $-fs-content) !default; // 组值字号
 $-cell-group-value-color: var(--oxy-cell-group-value-color, $-color-content) !default; // 组值文字颜色
 
-$-cell-wrapper-padding: var(--oxy-cell-wrapper-padding, 20rpx) !default; // cell 容器padding
-$-cell-wrapper-padding-large: var(--oxy-cell-wrapper-padding-large, 24rpx) !default; // large类型cell容器padding
+$-cell-wrapper-padding: var(--oxy-cell-wrapper-padding, 24rpx) !default; // cell 容器padding
+$-cell-wrapper-padding-large: var(--oxy-cell-wrapper-padding-large, 28rpx) !default; // large类型cell容器padding
 
-$-cell-wrapper-padding-with-label: var(--oxy-cell-wrapper-padding-with-label, 32rpx) !default; // cell 容器上下padding（有label情况下）
+$-cell-wrapper-padding-with-label: var(--oxy-cell-wrapper-padding-with-label, 36rpx) !default; // cell 容器上下padding（有label情况下）
 $-cell-icon-right: var(--oxy-cell-icon-right, 8rpx) !default; // 图标距离右边缘
-$-cell-icon-size: var(--oxy-cell-icon-size, 32rpx) !default; // 图标大小
-$-cell-title-fs: var(--oxy-cell-title-fs, 28rpx) !default; // 标题字号
+$-cell-icon-size: var(--oxy-cell-icon-size, $-fs-title) !default; // 图标大小
+$-cell-title-fs: var(--oxy-cell-title-fs, $-fs-content) !default; // 标题字号
 $-cell-title-color: var(--oxy-cell-title-color, rgba(0, 0, 0, 0.85)) !default; // 标题文字颜色
-$-cell-label-fs: var(--oxy-cell-label-fs, 24rpx) !default; // 描述信息字号
+$-cell-label-fs: var(--oxy-cell-label-fs, $-fs-secondary) !default; // 描述信息字号
 $-cell-label-color: var(--oxy-cell-label-color, rgba(0, 0, 0, 0.45)) !default; // 描述信息文字颜色
-$-cell-value-fs: var(--oxy-cell-value-fs, 28rpx) !default; // 右侧内容字号
-$-cell-value-fs-large: var(--oxy-cell-value-fs-large, 32rpx) !default; // 大尺寸右侧内容字号
+$-cell-value-fs: var(--oxy-cell-value-fs, $-fs-content) !default; // 右侧内容字号
+$-cell-value-fs-large: var(--oxy-cell-value-fs-large, $-fs-title) !default; // 大尺寸右侧内容字号
 $-cell-value-color: var(--oxy-cell-value-color, rgba(0, 0, 0, 0.85)) !default; // 右侧内容文字颜色
 $-cell-arrow-size: var(--oxy-cell-arrow-size, 36rpx) !default; // 右箭头大小
 $-cell-arrow-color: var(--oxy-cell-arrow-color, rgba(0, 0, 0, 0.25)) !default; // 右箭头颜色
 $-cell-clear-color: var(--oxy-cell-clear-color, #585858) !default; // 清空按钮颜色
 $-cell-tap-bg: var(--oxy-cell-tap-bg, rgba(0, 0, 0, 0.06)) !default; // 点击态背景色
 
-$-cell-title-fs-large: var(--oxy-cell-title-fs-large, 32rpx) !default; // 大尺寸标题字号
-$-cell-label-fs-large: var(--oxy-cell-label-fs-large, 28rpx) !default; // 描述信息字号
-$-cell-icon-size-large: var(--oxy-cell-icon-size-large, 36rpx) !default; // 图标大小
+$-cell-title-fs-large: var(--oxy-cell-title-fs-large, $-fs-title) !default; // 大尺寸标题字号
+$-cell-label-fs-large: var(--oxy-cell-label-fs-large, $-fs-content) !default; // 描述信息字号
+$-cell-icon-size-large: var(--oxy-cell-icon-size-large, 40rpx) !default; // 图标大小
 
 $-cell-required-color: var(--oxy-cell-required-color, $-color-danger) !default; // 要求必填*颜色
 $-cell-required-size: var(--oxy-cell-required-size, 36rpx) !default; // 必填*字号
 $-cell-required-margin: var(--oxy-cell-required-margin, 8rpx) !default; // 必填*间距
-$-cell-vertical-top: var(--oxy-cell-vertical-top, 32rpx) !default; // 表单类型-上下结构的间距
+$-cell-vertical-top: var(--oxy-cell-vertical-top, 40rpx) !default; // 表单类型-上下结构的间距
 
 /* calendar */
-$-calendar-fs: var(--oxy-calendar-fs, 32rpx) !default;
-$-calendar-panel-padding: var(--oxy-calendar-panel-padding, 0 24rpx) !default;
-$-calendar-panel-title-fs: var(--oxy-calendar-panel-title-fs, 28rpx) !default;
+$-calendar-fs: var(--oxy-calendar-fs, $-fs-title) !default;
+$-calendar-panel-padding: var(--oxy-calendar-panel-padding, 0 $-spacing-24) !default;
+$-calendar-panel-title-fs: var(--oxy-calendar-panel-title-fs, $-fs-content) !default;
 $-calendar-panel-title-color: var(--oxy-calendar-panel-title-color, rgba(0, 0, 0, 0.85)) !default;
 $-calendar-week-color: var(--oxy-calendar-week-color, rgba(0, 0, 0, 0.85)) !default;
 $-calendar-week-height: var(--oxy-calendar-week-height, 72rpx) !default;
-$-calendar-week-fs: var(--oxy-calendar-week-fs, 24rpx) !default;
-$-calendar-day-fs: var(--oxy-calendar-day-fs, 32rpx) !default;
+$-calendar-week-fs: var(--oxy-calendar-week-fs, $-fs-secondary) !default;
+$-calendar-day-fs: var(--oxy-calendar-day-fs, $-fs-title) !default;
 $-calendar-day-color: var(--oxy-calendar-day-color, rgba(0, 0, 0, 0.85)) !default;
-$-calendar-day-fw: var(--oxy-calendar-day-fw, 500) !default;
+$-calendar-day-fw: var(--oxy-calendar-day-fw, $-fw-medium) !default;
 $-calendar-day-height: var(--oxy-calendar-day-height, 128rpx) !default;
 $-calendar-month-width: var(--oxy-calendar-month-width, 100rpx) !default;
 $-calendar-active-color: var(--oxy-calendar-active-color, $-color-theme) !default;
@@ -225,19 +294,22 @@ $-calendar-selected-color: var(--oxy-calendar-selected-color, $-color-white) !de
 $-calendar-disabled-color: var(--oxy-calendar-disabled-color, rgba(0, 0, 0, 0.25)) !default;
 $-calendar-range-color: var(--oxy-calendar-range-color, rgba(#4d80f0, 0.09)) !default;
 $-calendar-active-border: var(--oxy-calendar-active-border, 16rpx) !default;
-$-calendar-info-fs: var(--oxy-calendar-info-fs, 20rpx) !default;
+$-calendar-info-fs: var(--oxy-calendar-info-fs, $-fs-aid) !default;
 $-calendar-item-margin-bottom: var(--oxy-calendar-item-margin-bottom, 8rpx) !default;
+$-calendar-panel-shadow-light: var(--oxy-calendar-panel-shadow-light, $-shadow-md) !default;
+$-calendar-panel-shadow-dark: var(--oxy-calendar-panel-shadow-dark, 0 8rpx 16rpx 0 rgba(255, 255, 255, 0.02)) !default;
+$-calendar-panel-shadow-reverse-light: var(--oxy-calendar-panel-shadow-reverse-light, 0 -8rpx 16rpx 0 rgba(0, 0, 0, 0.02)) !default;
 
 
 /* checkbox */
-$-checkbox-margin: var(--oxy-checkbox-margin, 20rpx) !default; // 多个复选框距离
+$-checkbox-margin: var(--oxy-checkbox-margin, 24rpx) !default; // 多个复选框距离
 $-checkbox-bg: var(--oxy-checkbox-bg, $-color-white) !default; // 多个复选框距离
-$-checkbox-label-margin: var(--oxy-checkbox-label-margin, 18rpx) !default; // 右侧文字与左侧图标距离
+$-checkbox-label-margin: var(--oxy-checkbox-label-margin, 24rpx) !default; // 右侧文字与左侧图标距离
 $-checkbox-size: var(--oxy-checkbox-size, 32rpx) !default; // 左侧图标尺寸
-$-checkbox-icon-size: var(--oxy-checkbox-icon-size, 28rpx) !default; // 左侧图标尺寸
+$-checkbox-icon-size: var(--oxy-checkbox-icon-size, 32rpx) !default; // 左侧图标尺寸
 $-checkbox-border-color: var(--oxy-checkbox-border-color, #dcdcdc) !default; // 左侧图标边框颜色
 $-checkbox-check-color: var(--oxy-checkbox-check-color, $-color-white) !default; // 左侧图标边框颜色
-$-checkbox-label-fs: var(--oxy-checkbox-label-fs, 28rpx) !default; // 右侧文字字号
+$-checkbox-label-fs: var(--oxy-checkbox-label-fs, $-fs-content) !default; // 右侧文字字号
 $-checkbox-label-color: var(--oxy-checkbox-label-color, rgba(0, 0, 0, 0.85)) !default; // 右侧文字颜色
 $-checkbox-checked-color: var(--oxy-checkbox-checked-color, $-color-theme) !default; // 选中颜色
 
@@ -245,46 +317,47 @@ $-checkbox-disabled-color: var(--oxy-checkbox-disabled-color, rgba(0, 0, 0, 0.04
 $-checkbox-disabled-label-color: var(--oxy-checkbox-disabled-label-color, rgba(0, 0, 0, 0.25)) !default; // 禁用文字颜色
 $-checkbox-disabled-check-color: var(--oxy-checkbox-disabled-check-color, rgba(0, 0, 0, 0.15)) !default; // 禁用图标颜色
 $-checkbox-disabled-check-bg: var(--oxy-checkbox-disabled-check-bg, rgba(0, 0, 0, 0.15)) !default; // 禁用边框背景颜色
-$-checkbox-square-radius: var(--oxy-checkbox-square-radius, 8rpx) !default; // 方型圆角大小
+$-checkbox-square-radius: var(--oxy-checkbox-square-radius, $-radius-sm) !default; // 方型圆角大小
 
 $-checkbox-large-size: var(--oxy-checkbox-large-size, 36rpx) !default; // 左侧图标尺寸
-$-checkbox-large-label-fs: var(--oxy-checkbox-large-label-fs, 32rpx) !default; // 右侧文字字号
+$-checkbox-large-icon-size: var(--oxy-checkbox-large-icon-size, 36rpx) !default; // large 左侧图标尺寸
+$-checkbox-large-label-fs: var(--oxy-checkbox-large-label-fs, $-fs-title) !default; // 右侧文字字号
 
-$-checkbox-button-height: var(--oxy-checkbox-button-height, 64rpx) !default; // 按钮模式复选框高
+$-checkbox-button-height: var(--oxy-checkbox-button-height, 72rpx) !default; // 按钮模式复选框高
 $-checkbox-button-min-width: var(--oxy-checkbox-button-min-width, 156rpx) !default; // 按钮模式最小宽
-$-checkbox-button-radius: var(--oxy-checkbox-button-radius, 32rpx) !default; // 按钮圆角大小
+$-checkbox-button-radius: var(--oxy-checkbox-button-radius, $-radius-2xl) !default; // 按钮圆角大小
 $-checkbox-button-bg: var(--oxy-checkbox-button-bg, rgba(0, 0, 0, 0.04)) !default; // 按钮模式背景颜色
-$-checkbox-button-font-size: var(--oxy-checkbox-button-font-size, 28rpx) !default; // 按钮模式字号
+$-checkbox-button-font-size: var(--oxy-checkbox-button-font-size, $-fs-content) !default; // 按钮模式字号
 $-checkbox-button-border: var(--oxy-checkbox-button-border, #f5f5f5) !default; // 按钮边框颜色
 $-checkbox-button-disabled-border: var(--oxy-checkbox-button-disabled-border, rgba(0, 0, 0, 0.15)) !default; // 按钮禁用边框颜色
 
 /* collapse */
 $-collapse-side-padding: var(--oxy-collapse-side-padding, $-size-side-padding) !default; // 左右间距
-$-collapse-body-padding: var(--oxy-collapse-body-padding, 28rpx $-size-side-padding) !default; // body padding
-$-collapse-header-padding: var(--oxy-collapse-header-padding, 26rpx $-size-side-padding) !default; // 头部padding
+$-collapse-body-padding: var(--oxy-collapse-body-padding, 32rpx $-size-side-padding) !default; // body padding
+$-collapse-header-padding: var(--oxy-collapse-header-padding, 32rpx $-size-side-padding) !default; // 头部padding
 $-collapse-title-color: var(--oxy-collapse-title-color, rgba(0, 0, 0, 0.85)) !default; // 标题颜色
-$-collapse-title-fs: var(--oxy-collapse-title-fs, 32rpx) !default; // 标题字号
+$-collapse-title-fs: var(--oxy-collapse-title-fs, $-fs-title) !default; // 标题字号
 $-collapse-arrow-size: var(--oxy-collapse-arrow-size, 36rpx) !default; // 箭头大小
 $-collapse-arrow-color: var(--oxy-collapse-arrow-color, #d8d8d8) !default; // 箭头颜色
-$-collapse-body-fs: var(--oxy-collapse-body-fs, 28rpx) !default; // 内容字号
+$-collapse-body-fs: var(--oxy-collapse-body-fs, $-fs-content) !default; // 内容字号
 $-collapse-body-color: var(--oxy-collapse-body-color, rgba(0, 0, 0, 0.65)) !default; // 内容颜色
 $-collapse-disabled-color: var(--oxy-collapse-disabled-color, rgba(0, 0, 0, 0.15)) !default; // 禁用颜色
-$-collapse-retract-fs: var(--oxy-collapse-retract-fs, 28rpx) !default; // 更多 字号
+$-collapse-retract-fs: var(--oxy-collapse-retract-fs, $-fs-content) !default; // 更多 字号
 $-collapse-more-color: var(--oxy-collapse-more-color, $-color-theme) !default; // 更多 颜色
 
 /* divider */
 $-divider-padding: var(--oxy-divider-padding, 0 $-size-side-padding) !default; // 两边间距
-$-divider-margin: var(--oxy-divider-margin, 32rpx 0) !default; // 上下间距
+$-divider-margin: var(--oxy-divider-margin, $-spacing-32 0) !default; // 上下间距
 $-divider-color: var(--oxy-divider-color, rgba(0, 0, 0, 0.45)) !default; // 字体颜色
 $-divider-line-color: var(--oxy-divider-line-color, currentColor) !default; // 线条颜色
 $-divider-line-height: var(--oxy-divider-line-height, 1px) !default; // 线条高度
-$-divider-fs: var(--oxy-divider-fs, 28rpx) !default; // 字体大小
+$-divider-fs: var(--oxy-divider-fs, $-fs-content) !default; // 字体大小
 $-divider-content-left-width: var(--oxy-divider-content-left-width, 10%) !default; // 左侧内容宽度
-$-divider-content-left-margin: var(--oxy-divider-content-left-margin, 24rpx) !default; // 左侧内容距离线距离
-$-divider-content-right-margin: var(--oxy-divider-content-right-margin, 24rpx) !default; // 右侧内容距离线距离
+$-divider-content-left-margin: var(--oxy-divider-content-left-margin, $-spacing-24) !default; // 左侧内容距离线距离
+$-divider-content-right-margin: var(--oxy-divider-content-right-margin, $-spacing-24) !default; // 右侧内容距离线距离
 $-divider-content-right-width: var(--oxy-divider-content-right-width, 10%) !default; // 右侧内容宽度
 $-divider-vertical-height: var(--oxy-divider-vertical-height, 32rpx) !default; // 垂直分割线高度
-$-divider-vertical-content-margin: var(--oxy-divider-vertical-content-margin, 0 16rpx) !default; // 垂直分割线内容间距
+$-divider-vertical-content-margin: var(--oxy-divider-vertical-content-margin, 0 $-spacing-16) !default; // 垂直分割线内容间距
 $-divider-vertical-line-width: var(--oxy-divider-vertical-line-width, 1px) !default; // 线条高度
 
 
@@ -307,86 +380,88 @@ $-drop-menu-item-fs-tip: var(--oxy-drop-menu-item-fs-tip, $-fs-secondary) !defau
 $-drop-menu-option-check-size: var(--oxy-drop-menu-option-check-size, 40rpx) !default; // check 图标大小
 $-drop-menu-line-color: var(--oxy-drop-menu-line-color, $-color-theme) !default; // 下划线颜色
 $-drop-menu-line-height: var(--oxy-drop-menu-line-height, 6rpx) !default; // 下划线高度
+$-drop-menu-bg: var(--oxy-drop-menu-bg, $-color-white) !default; // 顶部菜单背景色
+$-drop-menu-modal-bg: var(--oxy-drop-menu-modal-bg, rgba(0, 0, 0, 0.7)) !default; // 菜单蒙层背景色
 
 /* input-number */
-$-input-number-color: var(--oxy-input-number-color, #262626) !default; // 文字颜色
-$-input-number-border-color: var(--oxy-input-number-border-color, #e8e8e8) !default; // 边框颜色
+$-input-number-color: var(--oxy-input-number-color, $-color-content) !default; // 文字颜色
+$-input-number-border-color: var(--oxy-input-number-border-color, $-color-border) !default; // 边框颜色
 $-input-number-disabled-color: var(--oxy-input-number-disabled-color, rgba(0, 0, 0, 0.25)) !default; // 禁用颜色
-$-input-number-height: var(--oxy-input-number-height, 48rpx) !default; // 加减号按钮高度
-$-input-number-btn-width: var(--oxy-input-number-btn-width, 52rpx) !default; // 加减号按钮宽度
-$-input-number-input-width: var(--oxy-input-number-input-width, 72rpx) !default; // 输入框宽度
-$-input-number-radius: var(--oxy-input-number-radius, 8rpx) !default; // 加减号按钮圆角大小
-$-input-number-fs: var(--oxy-input-number-fs, 24rpx) !default; // 输入框字号
-$-input-number-icon-size: var(--oxy-input-number-icon-size, 28rpx) !default; // 加减号图标大小
-$-input-number-icon-color: var(--oxy-input-number-icon-color, rgba(0, 0, 0, 0.65)) !default; // icon颜色
+$-input-number-height: var(--oxy-input-number-height, 64rpx) !default; // 加减号按钮高度
+$-input-number-btn-width: var(--oxy-input-number-btn-width, 56rpx) !default; // 加减号按钮宽度
+$-input-number-input-width: var(--oxy-input-number-input-width, 80rpx) !default; // 输入框宽度
+$-input-number-radius: var(--oxy-input-number-radius, $-radius-sm) !default; // 加减号按钮圆角大小
+$-input-number-fs: var(--oxy-input-number-fs, $-fs-content) !default; // 输入框字号
+$-input-number-icon-size: var(--oxy-input-number-icon-size, 24rpx) !default; // 加减号图标大小
+$-input-number-icon-color: var(--oxy-input-number-icon-color, $-color-secondary) !default; // icon颜色
 
 /* input */
 $-input-padding: var(--oxy-input-padding, $-size-side-padding) !default; // input 左右padding距离
-$-input-border-color: var(--oxy-input-border-color, #dadada) !default; // 无label边框颜色
-$-input-not-empty-border-color: var(--oxy-input-not-empty-border-color, #262626) !default; // 输入框有值时 无label边框颜色
+$-input-border-color: var(--oxy-input-border-color, $-color-border-light) !default; // 无label边框颜色
+$-input-not-empty-border-color: var(--oxy-input-not-empty-border-color, $-color-border) !default; // 输入框有值时 无label边框颜色
 $-input-fs: var(--oxy-input-fs, $-cell-title-fs) !default; // 字号
 $-input-fs-large: var(--oxy-input-fs-large, $-cell-title-fs-large) !default; // 大尺寸字号
-$-input-icon-margin: var(--oxy-input-icon-margin, 16rpx) !default; // 图标距离
-$-input-color: var(--oxy-input-color, #262626) !default; // 文字颜色
-$-input-placeholder-color: var(--oxy-input-placeholder-color, #bfbfbf) !default; // 占位符颜色
-$-input-disabled-color: var(--oxy-input-disabled-color, #d9d9d9) !default; // 输入框禁用颜色
+$-input-icon-margin: var(--oxy-input-icon-margin, 20rpx) !default; // 图标距离
+$-input-color: var(--oxy-input-color, $-color-content) !default; // 文字颜色
+$-input-placeholder-color: var(--oxy-input-placeholder-color, $-color-tip) !default; // 占位符颜色
+$-input-disabled-color: var(--oxy-input-disabled-color, $-color-border) !default; // 输入框禁用颜色
 $-input-error-color: var(--oxy-input-error-color, $-color-danger) !default; // 输入框错误颜色
-$-input-icon-color: var(--oxy-input-icon-color, #bfbfbf) !default; // 图标颜色
-$-input-clear-color: var(--oxy-input-clear-color, #585858) !default; // 关闭按钮颜色
-$-input-count-color: var(--oxy-input-count-color, #bfbfbf) !default; // 计数文字颜色
-$-input-count-current-color: var(--oxy-input-count-current-color, #262626) !default; // 当前长度颜色
+$-input-icon-color: var(--oxy-input-icon-color, $-color-tip) !default; // 图标颜色
+$-input-clear-color: var(--oxy-input-clear-color, $-color-secondary) !default; // 关闭按钮颜色
+$-input-count-color: var(--oxy-input-count-color, $-color-tip) !default; // 计数文字颜色
+$-input-count-current-color: var(--oxy-input-count-current-color, $-color-content) !default; // 当前长度颜色
 $-input-bg: var(--oxy-input-bg, $-color-white) !default; // 默认背景颜色
 
 $-input-cell-bg: var(--oxy-input-cell-bg, $-color-white) !default; // cell 类型背景色
 $-input-cell-border-color: var(--oxy-input-cell-border-color, $-color-border-light) !default; // cell 类型边框颜色
-$-input-cell-padding: var(--oxy-input-cell-padding, 20rpx) !default; // cell 容器padding
-$-input-cell-padding-large: var(--oxy-input-cell-padding-large, 24rpx) !default; // large类型cell容器padding
-$-input-cell-height: var(--oxy-input-cell-height, 48rpx) !default; // cell 高度
+$-input-cell-padding: var(--oxy-input-cell-padding, 28rpx) !default; // cell 容器padding
+$-input-cell-padding-large: var(--oxy-input-cell-padding-large, 32rpx) !default; // large类型cell容器padding
+$-input-cell-height: var(--oxy-input-cell-height, 64rpx) !default; // cell 高度
 $-input-cell-label-width: var(--oxy-input-cell-label-width, 33%) !default; // cell 下 label 的宽度
-$-input-inner-height: var(--oxy-input-inner-height, 68rpx) !default; // 非cell和textarea下的高度
-$-input-inner-height-no-border: var(--oxy-input-inner-height-no-border, 48rpx) !default; // 无边框下的高度
-$-input-count-fs: var(--oxy-input-count-fs, 28rpx) !default; // 计数字号
-$-input-count-fs-large: var(--oxy-input-count-fs-large, 28rpx) !default; // 大尺寸计数字号
+$-input-inner-height: var(--oxy-input-inner-height, 84rpx) !default; // 非cell和textarea下的高度
+$-input-inner-height-no-border: var(--oxy-input-inner-height-no-border, 64rpx) !default; // 无边框下的高度
+$-input-count-fs: var(--oxy-input-count-fs, $-fs-content) !default; // 计数字号
+$-input-count-fs-large: var(--oxy-input-count-fs-large, $-fs-content) !default; // 大尺寸计数字号
 $-input-icon-size: var(--oxy-input-icon-size, 32rpx) !default; // 图标大小
 $-input-icon-size-large: var(--oxy-input-icon-size-large, 36rpx) !default; // 大尺寸图标大小
 
 /* textarea */
-$-textarea-padding: var(--oxy-textarea-padding, $-size-side-padding) !default; // textarea 左右padding距离
-$-textarea-border-color: var(--oxy-textarea-border-color, #dadada) !default; // 无label边框颜色
-$-textarea-not-empty-border-color: var(--oxy-textarea-not-empty-border-color, #262626) !default; // 输入框有值时 无label边框颜色
+$-textarea-padding: var(--oxy-textarea-padding, 24rpx) !default; // textarea 左右padding距离
+$-textarea-border-color: var(--oxy-textarea-border-color, $-color-border-light) !default; // 无label边框颜色
+$-textarea-not-empty-border-color: var(--oxy-textarea-not-empty-border-color, $-color-border) !default; // 输入框有值时 无label边框颜色
 $-textarea-fs: var(--oxy-textarea-fs, $-cell-title-fs) !default; // 字号
 $-textarea-fs-large: var(--oxy-textarea-fs-large, $-cell-title-fs-large) !default; // 大尺寸字号
-$-textarea-icon-margin: var(--oxy-textarea-icon-margin, 16rpx) !default; // 图标距离
-$-textarea-color: var(--oxy-textarea-color, #262626) !default; // 文字颜色
-$-textarea-icon-color: var(--oxy-textarea-icon-color, #bfbfbf) !default; // 图标颜色
-$-textarea-clear-color: var(--oxy-textarea-clear-color, #585858) !default; // 关闭按钮颜色
-$-textarea-count-color: var(--oxy-textarea-count-color, #bfbfbf) !default; // 计数文字颜色
-$-textarea-count-current-color: var(--oxy-textarea-count-current-color, $default-theme) !default; // 当前长度颜色
+$-textarea-icon-margin: var(--oxy-textarea-icon-margin, 20rpx) !default; // 图标距离
+$-textarea-color: var(--oxy-textarea-color, $-color-content) !default; // 文字颜色
+$-textarea-icon-color: var(--oxy-textarea-icon-color, $-color-tip) !default; // 图标颜色
+$-textarea-clear-color: var(--oxy-textarea-clear-color, $-color-secondary) !default; // 关闭按钮颜色
+$-textarea-count-color: var(--oxy-textarea-count-color, $-color-tip) !default; // 计数文字颜色
+$-textarea-count-current-color: var(--oxy-textarea-count-current-color, $-color-theme) !default; // 当前长度颜色
 $-textarea-bg: var(--oxy-textarea-bg, $-color-white) !default; // 默认背景颜色
 $-textarea-cell-border-color: var(--oxy-textarea-cell-border-color, $-color-border-light) !default; // cell 类型边框颜色
-$-textarea-cell-padding: var(--oxy-textarea-cell-padding, 20rpx) !default; // cell 容器padding
-$-textarea-cell-padding-large: var(--oxy-textarea-cell-padding-large, 24rpx) !default; // large类型cell容器padding
-$-textarea-cell-height: var(--oxy-textarea-cell-height, 48rpx) !default; // cell 高度
-$-textarea-count-fs: var(--oxy-textarea-count-fs, 28rpx) !default; // 计数字号
-$-textarea-count-fs-large: var(--oxy-textarea-count-fs-large, 28rpx) !default; // 大尺寸计数字号
+$-textarea-cell-padding: var(--oxy-textarea-cell-padding, 24rpx) !default; // cell 容器padding
+$-textarea-cell-padding-large: var(--oxy-textarea-cell-padding-large, 28rpx) !default; // large类型cell容器padding
+$-textarea-cell-height: var(--oxy-textarea-cell-height, 64rpx) !default; // cell 高度
+$-textarea-count-fs: var(--oxy-textarea-count-fs, $-fs-content) !default; // 计数字号
+$-textarea-count-fs-large: var(--oxy-textarea-count-fs-large, $-fs-content) !default; // 大尺寸计数字号
 $-textarea-icon-size: var(--oxy-textarea-icon-size, 32rpx) !default; // 图标大小
 $-textarea-icon-size-large: var(--oxy-textarea-icon-size-large, 36rpx) !default; // 大尺寸图标大小
 
 /* loadmore */
 $-loadmore-height: var(--oxy-loadmore-height, 96rpx) !default; // 高度
 $-loadmore-color: var(--oxy-loadmore-color, rgba(0, 0, 0, 0.45)) !default; // 颜色
-$-loadmore-fs: var(--oxy-loadmore-fs, 28rpx) !default; // 字号
+$-loadmore-fs: var(--oxy-loadmore-fs, $-fs-content) !default; // 字号
 $-loadmore-error-color: var(--oxy-loadmore-error-color, $-color-theme) !default; // 点击重试颜色
 $-loadmore-refresh-fs: var(--oxy-loadmore-refresh-fs, $-fs-title) !default; // refresh图标字号
 $-loadmore-loading-size: var(--oxy-loadmore-loading-size, $-fs-title) !default; // loading尺寸
 
 /* message-box */
 $-message-box-bg: var(--oxy-message-box-bg, $-color-white) !default; // 默认背景颜色
-$-message-box-radius: var(--oxy-message-box-radius, 32rpx) !default; // 圆角大小
-$-message-box-padding: var(--oxy-message-box-padding, 50rpx 48rpx 0) !default; // 主体内容padding
-$-message-box-title-fs: var(--oxy-message-box-title-fs, 32rpx) !default; // 标题字号
+$-message-box-radius: var(--oxy-message-box-radius, $-radius-2xl) !default; // 圆角大小
+$-message-box-padding: var(--oxy-message-box-padding, 56rpx 48rpx 0) !default; // 主体内容padding
+$-message-box-title-fs: var(--oxy-message-box-title-fs, $-fs-title) !default; // 标题字号
 $-message-box-title-color: var(--oxy-message-box-title-color, rgba(0, 0, 0, 0.85)) !default; // 标题颜色
-$-message-box-content-fs: var(--oxy-message-box-content-fs, 28rpx) !default; // 内容字号
+$-message-box-content-fs: var(--oxy-message-box-content-fs, $-fs-content) !default; // 内容字号
 $-message-box-content-color: var(--oxy-message-box-content-color, #666666) !default; // 内容颜色
 $-message-box-content-max-height: var(--oxy-message-box-content-max-height, 528rpx) !default; // 内容最大高度
 $-message-box-content-scrollbar-width: var(--oxy-message-box-content-scrollbar-width, 8rpx) !default; // 内容滚动条宽度
@@ -394,50 +469,53 @@ $-message-box-content-scrollbar-color: var(--oxy-message-box-content-scrollbar-c
 $-message-box-input-error-color: var(--oxy-message-box-input-error-color, $-input-error-color) !default; // 输入框错误颜色
 
 /* notice-bar */
-$-notice-bar-fs: var(--oxy-notice-bar-fs, 24rpx) !default; // 字号
-$-notice-bar-line-height: var(--oxy-notice-bar-line-height, 36rpx) !default; // 行高
-$-notice-bar-border-radius: var(--oxy-notice-bar-border-radius, 16rpx) !default; // 圆角
-$-notice-bar-padding: var(--oxy-notice-bar-padding, 18rpx 40rpx 18rpx 30rpx) !default; // 非换行下的padding
+$-notice-bar-fs: var(--oxy-notice-bar-fs, $-fs-content) !default; // 字号
+$-notice-bar-line-height: var(--oxy-notice-bar-line-height, 40rpx) !default; // 行高
+$-notice-bar-border-radius: var(--oxy-notice-bar-border-radius, $-radius-lg) !default; // 圆角
+$-notice-bar-padding: var(--oxy-notice-bar-padding, 20rpx 44rpx 20rpx 32rpx) !default; // 非换行下的padding
 $-notice-bar-warning-bg: var(--oxy-notice-bar-warning-bg, #fff6c8) !default; // 背景色
 $-notice-bar-info-bg: var(--oxy-notice-bar-info-bg, #f4f9ff) !default; // 背景色
 $-notice-bar-danger-bg: var(--oxy-notice-bar-danger-bg, #feeced) !default; // 背景色
 $-notice-bar-warning-color: var(--oxy-notice-bar-warning-color, $-color-warning) !default; // 文字和图标颜色
 $-notice-bar-info-color: var(--oxy-notice-bar-info-color, $-color-theme) !default; // 文字和图标颜色
 $-notice-bar-danger-color: var(--oxy-notice-bar-danger-color, $-color-danger) !default; // 文字和图标颜色
-$-notice-bar-prefix-size: var(--oxy-notice-bar-prefix-size, 36rpx) !default; // 图标大小
+$-notice-bar-prefix-size: var(--oxy-notice-bar-prefix-size, 40rpx) !default; // 图标大小
 $-notice-bar-close-bg: var(--oxy-notice-bar-close-bg, rgba(0, 0, 0, 0.15)) !default; // 右侧关闭按钮背景颜色
-$-notice-bar-close-size: var(--oxy-notice-bar-close-size, 36rpx) !default; // 右侧关闭按钮背景颜色
+$-notice-bar-close-size: var(--oxy-notice-bar-close-size, 40rpx) !default; // 右侧关闭按钮背景颜色
 $-notice-bar-close-color: var(--oxy-notice-bar-close-color, $-color-white) !default; // 右侧关闭按钮颜色
-$-notice-bar-wrap-padding: var(--oxy-notice-bar-wrap-padding, 28rpx $-size-side-padding) !default; // 换行下的padding
+$-notice-bar-wrap-padding: var(--oxy-notice-bar-wrap-padding, 32rpx $-size-side-padding) !default; // 换行下的padding
 
 /* pagination */
-$-pagination-content-padding: var(--oxy-pagination-content-padding, 20rpx 30rpx) !default;
-$-pagination-message-padding: var(--oxy-pagination-message-padding, 1px 0 32rpx 0) !default;
-$-pagination-message-fs: var(--oxy-pagination-message-fs, 24rpx) !default;
+$-pagination-content-padding: var(--oxy-pagination-content-padding, $-spacing-24 $-spacing-32) !default;
+$-pagination-message-padding: var(--oxy-pagination-message-padding, 4rpx 0 36rpx 0) !default;
+$-pagination-message-fs: var(--oxy-pagination-message-fs, $-fs-content) !default;
 $-pagination-message-color: var(--oxy-pagination-message-color, rgba(0, 0, 0, 0.69)) !default;
 $-pagination-nav-border: var(--oxy-pagination-nav-border, 1px solid rgba(0, 0, 0, 0.45)) !default;
-$-pagination-nav-border-radius: var(--oxy-pagination-nav-border-radius, 32rpx) !default;
-$-pagination-nav-fs: var(--oxy-pagination-nav-fs, 24rpx) !default;
+$-pagination-nav-border-radius: var(--oxy-pagination-nav-border-radius, $-radius-2xl) !default;
+$-pagination-nav-fs: var(--oxy-pagination-nav-fs, $-fs-content) !default;
 $-pagination-nav-width: var(--oxy-pagination-nav-width, 120rpx) !default;
 $-pagination-nav-color: var(--oxy-pagination-nav-color, rgba(0, 0, 0, 0.85)) !default;
-$-pagination-nav-content-fs: var(--oxy-pagination-nav-content-fs, 24rpx) !default;
-$-pagination-nav-sepatator-padding: var(--oxy-pagination-nav-sepatator-padding, 0 8rpx) !default;
+$-pagination-nav-content-fs: var(--oxy-pagination-nav-content-fs, $-fs-content) !default;
+$-pagination-nav-sepatator-padding: var(--oxy-pagination-nav-sepatator-padding, 0 $-spacing-8) !default;
 $-pagination-nav-current-color: var(--oxy-pagination-nav-current-color, $-color-theme) !default;
 $-pagination-icon-size: var(--oxy-pagination-icon-size, $-fs-content) !default;
+$-pagination-bg: var(--oxy-pagination-bg, $-color-white) !default;
+$-pagination-nav-active-color: var(--oxy-pagination-nav-active-color, rgba(0, 0, 0, 0.65)) !default;
+$-pagination-nav-disabled-color: var(--oxy-pagination-nav-disabled-color, rgba(0, 0, 0, 0.15)) !default;
 
 /* picker */
-$-picker-toolbar-height: var(--oxy-picker-toolbar-height, 108rpx) !default; // toolbar 操作条的高度
-$-picker-action-height: var(--oxy-picker-action-height, 32rpx) !default; // toolbar 操作条的高度
+$-picker-toolbar-height: var(--oxy-picker-toolbar-height, 120rpx) !default; // toolbar 操作条的高度
+$-picker-action-height: var(--oxy-picker-action-height, 36rpx) !default; // toolbar 操作条的高度
 $-picker-toolbar-finish-color: var(--oxy-picker-toolbar-finish-color, $-color-theme) !default; // toolbar 操作条完成按钮的颜色
 $-picker-toolbar-cancel-color: var(--oxy-picker-toolbar-cancel-color, #666666) !default; // toolbar 操作条的边框颜色
 $-picker-toolbar-fs: var(--oxy-picker-toolbar-fs, $-fs-title) !default; // toolbar 操作条的字号
 $-picker-toolbar-title-color: var(--oxy-picker-toolbar-title-color, rgba(0, 0, 0, 0.85)) !default; // toolbar 操作台的标题颜色
-$-picker-column-fs: var(--oxy-picker-column-fs, 32rpx) !default; // 选择器选项的字号
+$-picker-column-fs: var(--oxy-picker-column-fs, $-fs-title) !default; // 选择器选项的字号
 $-picker-bg: var(--oxy-picker-bg, $-color-white) !default; // 选择器选项的字号
-$-picker-column-active-fs: var(--oxy-picker-column-active-fs, 36rpx) !default; // 选择器选项被选中的字号
+$-picker-column-active-fs: var(--oxy-picker-column-active-fs, 40rpx) !default; // 选择器选项被选中的字号
 $-picker-column-color: var(--oxy-picker-column-color, rgba(0, 0, 0, 0.85)) !default; // 选择器选项的颜色
 $-picker-column-height: var(--oxy-picker-column-height, 420rpx) !default; // 列高 滚筒外部的高度
-$-picker-column-item-height: var(--oxy-picker-column-item-height, 70rpx) !default; // 列高 滚筒外部的高度
+$-picker-column-item-height: var(--oxy-picker-column-item-height, 80rpx) !default; // 列高 滚筒外部的高度
 $-picker-column-select-bg: var(--oxy-picker-column-select-bg, #f5f5f5) !default;
 $-picker-loading-button-color: var(--oxy-picker-loading-button-color, rgba(0, 0, 0, 0.25)) !default; // loading 背景颜色
 $-picker-column-padding: var(--oxy-picker-column-padding, 0 $-size-side-padding-small) !default; // 选项内间距
@@ -452,29 +530,34 @@ $-picker-cell-arrow-size-large: var(--oxy-picker-cell-arrow-size-large, $-cell-i
 $-picker-region-color: var(--oxy-picker-region-color, rgba(0, 0, 0, 0.45)) !default; // 区域选择文字颜色
 $-picker-region-bg-active-color: var(--oxy-picker-region-bg-active-color, $-color-theme) !default; // 区域选择激活选中背景颜色
 
-$-picker-region-fs: var(--oxy-picker-region-fs, 28rpx) !default; // 区域选择文字字号
+$-picker-region-fs: var(--oxy-picker-region-fs, $-fs-content) !default; // 区域选择文字字号
+$-picker-search-bg: var(--oxy-picker-search-bg, $-picker-bg) !default; // 搜索区域背景色
+$-picker-search-icon-color: var(--oxy-picker-search-icon-color, $-color-aid) !default; // 搜索图标颜色
+$-picker-search-icon-size: var(--oxy-picker-search-icon-size, 32rpx) !default; // 搜索图标大小
+$-picker-search-radius: var(--oxy-picker-search-radius, $-radius-3xl) !default; // 搜索框圆角
+$-picker-region-time-fs: var(--oxy-picker-region-time-fs, 32rpx) !default; // 日期时间显示字号
 
 /* col-picker */
 $-col-picker-selected-height: var(--oxy-col-picker-selected-height, 88rpx) !default; // 弹框顶部值高度
 $-col-picker-selected-padding: var(--oxy-col-picker-selected-padding, 0 32rpx) !default; // 弹框顶部值左右间距
-$-col-picker-selected-fs: var(--oxy-col-picker-selected-fs, 28rpx) !default; // 弹框顶部值字号
+$-col-picker-selected-fs: var(--oxy-col-picker-selected-fs, $-fs-content) !default; // 弹框顶部值字号
 $-col-picker-selected-color: var(--oxy-col-picker-selected-color, rgba(0, 0, 0, 0.85)) !default; // 弹框顶部值文字颜色
-$-col-picker-selected-fw: var(--oxy-col-picker-selected-fw, 700) !default; // 弹框顶部值高亮字重
+$-col-picker-selected-fw: var(--oxy-col-picker-selected-fw, $-fw-bold) !default; // 弹框顶部值高亮字重
 $-col-picker-line-width: var(--oxy-col-picker-line-width, 32rpx) !default; // 弹框顶部值高亮线条宽度
 $-col-picker-line-height: var(--oxy-col-picker-line-height, 6rpx) !default; // 弹框顶部值高亮线条高度
 $-col-picker-line-color: var(
   --oxy-col-picker-line-color,
   linear-gradient(315deg, rgba(81, 124, 240, 1), rgba(118, 158, 245, 1))
 ) !default; // 弹框顶部值高亮线条颜色
-$-col-picker-line-box-shadow: var(--oxy-col-picker-line-box-shadow, 0 1px 4rpx 0 rgba(1, 87, 255, 0.2)) !default; // 弹框顶部值高亮线条阴影
+$-col-picker-line-box-shadow: var(--oxy-col-picker-line-box-shadow, $-shadow-focus) !default; // 弹框顶部值高亮线条阴影
 $-col-picker-list-height: var(--oxy-col-picker-list-height, 53vh) !default; // 弹框列表高度
 $-col-picker-list-padding-bottom: var(--oxy-col-picker-list-padding-bottom, 60rpx) !default; // 弹框列表底部间距
 $-col-picker-list-color: var(--oxy-col-picker-list-color, rgba(0, 0, 0, 0.85)) !default; // 弹框列表文字颜色
 $-col-picker-list-color-disabled: var(--oxy-col-picker-list-color-disabled, rgba(0, 0, 0, 0.15)) !default; // 弹框列表文字禁用颜色
 $-col-picker-list-color-tip: var(--oxy-col-picker-list-color-tip, rgba(0, 0, 0, 0.45)) !default; // 弹框列表提示文字颜色
-$-col-picker-list-fs: var(--oxy-col-picker-list-fs, 28rpx) !default; // 弹框列表文字字号
-$-col-picker-list-fs-tip: var(--oxy-col-picker-list-fs-tip, 24rpx) !default; // 弹框列表提示文字字号
-$-col-picker-list-item-padding: var(--oxy-col-picker-list-item-padding, 24rpx 30rpx) !default; // 弹框列表选项间距
+$-col-picker-list-fs: var(--oxy-col-picker-list-fs, $-fs-content) !default; // 弹框列表文字字号
+$-col-picker-list-fs-tip: var(--oxy-col-picker-list-fs-tip, $-fs-secondary) !default; // 弹框列表提示文字字号
+$-col-picker-list-item-padding: var(--oxy-col-picker-list-item-padding, 28rpx 32rpx) !default; // 弹框列表选项间距
 $-col-picker-list-checked-icon-size: var(--oxy-col-picker-list-checked-icon-size, 36rpx) !default; // 弹框列表选中箭头大小
 $-col-picker-list-color-checked: var(--oxy-col-picker-list-color-checked, $-color-theme) !default; // 弹框列表选中选项颜色
 
@@ -485,24 +568,26 @@ $-overlay-bg-dark: var(--oxy-overlay-bg-dark, rgba(0, 0, 0, 0.75)) !default;
 /* popup */
 $-popup-close-size: var(--oxy-popup-close-size, 48rpx) !default; // 关闭按钮尺寸
 $-popup-close-color: var(--oxy-popup-close-color, #666) !default; // 关闭按钮颜色
+$-popup-bg: var(--oxy-popup-bg, $-color-white) !default; // 弹窗背景色
 
 /* progress */
-$-progress-padding: var(--oxy-progress-padding, 18rpx 0 16rpx) !default; // 进度条内边距
+$-progress-padding: var(--oxy-progress-padding, 20rpx 0 16rpx) !default; // 进度条内边距
 $-progress-bg: var(--oxy-progress-bg, rgba(229, 229, 229, 1)) !default; // 进度条底色
 $-progress-danger-color: var(--oxy-progress-danger-color, $-color-danger) !default; // 进度条danger颜色
 $-progress-success-color: var(--oxy-progress-success-color, $-color-success) !default; // 进度条success进度条颜色
 $-progress-warning-color: var(--oxy-progress-warning-color, $-color-warning) !default; // 进度条warning进度条颜色
 
 $-progress-color: var(--oxy-progress-color, $-color-theme) !default; // 进度条颜色
-$-progress-height: var(--oxy-progress-height, 6rpx) !default; // 进度条高度
+$-progress-height: var(--oxy-progress-height, 12rpx) !default; // 进度条高度
+$-progress-radius: var(--oxy-progress-radius, 6rpx) !default; // 进度条圆角
 $-progress-label-color: var(--oxy-progress-label-color, #333) !default; // 文字颜色
-$-progress-label-fs: var(--oxy-progress-label-fs, 28rpx) !default; // 文字字号
+$-progress-label-fs: var(--oxy-progress-label-fs, $-fs-content) !default; // 文字字号
 $-progress-icon-fs: var(--oxy-progress-icon-fs, 36rpx) !default; // 图标字号
 
 /* radio */
 $-radio-margin: var(--oxy-radio-margin, $-checkbox-margin) !default; // 多个单选框距离
 $-radio-label-margin: var(--oxy-radio-label-margin, $-checkbox-label-margin) !default; // 右侧文字与左侧图标距离
-$-radio-size: var(--oxy-radio-size, 32rpx) !default; // 左侧图标尺寸
+$-radio-size: var(--oxy-radio-size, $-checkbox-size) !default; // 左侧图标尺寸
 $-radio-bg: var(--oxy-radio-bg, $-color-white) !default; // 左侧图标尺寸
 $-radio-label-fs: var(--oxy-radio-label-fs, $-checkbox-label-fs) !default; // 右侧文字字号
 $-radio-label-color: var(--oxy-radio-label-color, $-checkbox-label-color) !default; // 右侧文字颜色
@@ -516,14 +601,16 @@ $-radio-large-label-fs: var(--oxy-radio-large-label-fs, $-checkbox-large-label-f
 $-radio-button-height: var(--oxy-radio-button-height, $-checkbox-button-height) !default; // 按钮模式复选框高
 $-radio-button-min-width: var(--oxy-radio-button-min-width, 120rpx) !default; // 按钮模式最小宽
 $-radio-button-max-width: var(--oxy-radio-button-max-width, 288rpx) !default; // 按钮模式最大宽
-$-radio-button-radius: var(--oxy-radio-button-radius, $-checkbox-button-radius) !default; // 按钮圆角大小
+$-radio-button-radius: var(--oxy-radio-button-radius, $-radius-2xl) !default; // 按钮圆角大小
 $-radio-button-bg: var(--oxy-radio-button-bg, $-checkbox-button-bg) !default; // 按钮模式背景颜色
 $-radio-button-fs: var(--oxy-radio-button-fs, $-checkbox-button-font-size) !default; // 按钮模式字号
 $-radio-button-border: var(--oxy-radio-button-border, $-checkbox-button-border) !default; // 按钮边框颜色
 $-radio-button-disabled-border: var(--oxy-radio-button-disabled-border, $-checkbox-button-disabled-border) !default; // 按钮禁用边框颜色
 
+$-radio-dot-shape-size: var(--oxy-radio-dot-shape-size, $-checkbox-size) !default; // 单选dot模式外圈尺寸
 $-radio-dot-size: var(--oxy-radio-dot-size, 16rpx) !default; // 单选dot模式圆点尺寸
-$-radio-dot-large-size: var(--oxy-radio-dot-large-size, 20rpx) !default; // 单选dot模式大尺寸圆点尺寸
+$-radio-dot-shape-large-size: var(--oxy-radio-dot-shape-large-size, $-checkbox-large-size) !default; // 单选dot模式大尺寸外圈尺寸
+$-radio-dot-large-size: var(--oxy-radio-dot-large-size, 18rpx) !default; // 单选dot模式大尺寸圆点尺寸
 $-radio-dot-checked-bg: var(--oxy-radio-dot-checked-bg, $-color-theme) !default; // 单选dot模式选中背景色
 $-radio-dot-checked-border-color: var(--oxy-radio-dot-checked-border-color, $-color-theme) !default; // 单选dot模式选中边框色
 $-radio-dot-border-color: var(--oxy-radio-dot-border-color, #dcdcdc) !default; // 单选dot模式边框色
@@ -532,34 +619,58 @@ $-radio-dot-disabled-bg: var(--oxy-radio-dot-disabled-bg, #d9d9d9) !default; //
 
 /* search */
 $-search-side-padding: var(--oxy-search-side-padding, $-size-side-padding) !default; // 左右间距
-$-search-padding: var(--oxy-search-padding, 20rpx 0 20rpx $-search-side-padding) !default; // 不包含取消按钮的间距
+$-search-padding: var(--oxy-search-padding, 24rpx 0 24rpx $-search-side-padding) !default; // 不包含取消按钮的间距
 $-search-input-radius: var(--oxy-search-input-radius, 30rpx) !default; // 输入框圆角大小
 $-search-input-bg: var(--oxy-search-input-bg, $-color-bg) !default; // 输入框背景色
-$-search-input-height: var(--oxy-search-input-height, 60rpx) !default; // 输入框高度
-$-search-input-padding: var(--oxy-search-input-padding, 0 64rpx 0 84rpx) !default; // 输入框间距
+$-search-input-height: var(--oxy-search-input-height, 68rpx) !default; // 输入框高度
+$-search-input-padding: var(--oxy-search-input-padding, 0 72rpx 0 92rpx) !default; // 输入框间距
 $-search-input-fs: var(--oxy-search-input-fs, $-fs-content) !default; // 输入框字号
 $-search-input-color: var(--oxy-search-input-color, #262626) !default; // 输入框文字颜色
 $-search-icon-color: var(--oxy-search-icon-color, $-color-icon) !default; // 图标颜色
 $-search-icon-size: var(--oxy-search-icon-size, 36rpx) !default; // 图标大小
 $-search-clear-icon-size: var(--oxy-search-clear-icon-size, $-fs-title) !default; // 清除图标大小
 $-search-placeholder-color: var(--oxy-search-placeholder-color, #bfbfbf) !default; // placeholder 颜色
-$-search-cancel-padding: var(--oxy-search-cancel-padding, 0 $-search-side-padding 0 20rpx) !default; // 取消按钮间距
+$-search-cancel-padding: var(--oxy-search-cancel-padding, 0 $-search-side-padding 0 24rpx) !default; // 取消按钮间距
 $-search-cancel-fs: var(--oxy-search-cancel-fs, $-fs-title) !default; // 取消按钮字号
 $-search-cancel-color: var(--oxy-search-cancel-color, rgba(0, 0, 0, 0.65)) !default; // 取消按钮颜色
 $-search-light-bg: var(--oxy-search-light-bg, $-color-bg) !default; // light 类型的容器背景色
+$-search-bg: var(--oxy-search-bg, $-color-white) !default; // 默认容器背景色
+$-search-light-input-bg: var(--oxy-search-light-input-bg, $-color-white) !default; // light 类型输入框背景色
 
 /* slider */
 $-slider-fs: var(--oxy-slider-fs, $-fs-content) !default; // 字体大小
-$-slider-handle-radius: var(--oxy-slider-handle-radius, 24rpx) !default; // 滑块半径
+$-slider-handle-radius: var(--oxy-slider-handle-radius, $-radius-xl) !default; // 滑块半径
 $-slider-handle-bg: var(--oxy-slider-handle-bg, resultColor(139deg, $-color-theme, 'dark' 'light', #ffffff #f7f7f7, 0% 100%)) !default; // 滑块背景
 $-slider-axie-height: var(--oxy-slider-axie-height, 6rpx) !default; // 滑轴高度
 $-slider-color: var(--oxy-slider-color, #333) !default; // 字体颜色
 $-slider-axie-bg: var(--oxy-slider-axie-bg, #e5e5e5) !default; // 滑轴的默认背景色
+$-slider-label-bg: var(--oxy-slider-label-bg, rgba($-color-white, 0.5)) !default; // 标签背景色
+$-slider-dark-label-bg: var(--oxy-slider-dark-label-bg, rgba($color: $-dark-background2, $alpha: 0.5)) !default; // 暗色标签背景色
+$-slider-button-shadow-color: var(--oxy-slider-button-shadow-color, $-shadow-color-muted) !default; // 滑块阴影色
 $-slider-line-color: var(
   --oxy-slider-line-color,
   resultColor(315deg, $-color-theme, 'dark' 'light', #517cf0 #769ef5, 0% 100%)
 ) !default; // 进度条颜色
 $-slider-disabled-color: var(--oxy-slider-disabled-color, rgba(0, 0, 0, 0.25)) !default; // 禁用状态下字体颜色
+$-select-label-color: var(--oxy-select-label-color, $-color-title) !default; // 标题颜色
+$-select-label-gap: var(--oxy-select-label-gap, $-size-side-padding) !default; // 标题右间距
+$-select-fs: var(--oxy-select-fs, $-fs-content) !default; // 字号
+$-select-icon-size: var(--oxy-select-icon-size, $-fs-content) !default; // 图标大小
+$-select-icon-color: var(--oxy-select-icon-color, $-color-tip) !default; // 图标颜色
+$-select-clear-icon-color: var(--oxy-select-clear-icon-color, $-color-secondary) !default; // 清除图标颜色
+$-select-text-color: var(--oxy-select-text-color, $-color-content) !default; // 文本颜色
+$-select-wrapper-padding-x: var(--oxy-select-wrapper-padding-x, 28rpx) !default; // 输入区域左右内边距
+$-select-wrapper-min-height: var(--oxy-select-wrapper-min-height, 72rpx) !default; // 输入区域最小高度
+$-select-no-border-min-height: var(--oxy-select-no-border-min-height, 64rpx) !default; // 无边框模式最小高度
+$-select-wrapper-radius: var(--oxy-select-wrapper-radius, $-radius-sm) !default; // 选择器输入区域圆角
+$-select-tag-radius: var(--oxy-select-tag-radius, $-radius-sm) !default; // 选择器标签圆角
+$-select-tag-font-size: var(--oxy-select-tag-font-size, $-fs-secondary) !default; // 标签字号
+$-select-dropdown-radius: var(--oxy-select-dropdown-radius, $-radius-lg) !default; // 下拉面板圆角
+$-select-placeholder-color: var(--oxy-select-placeholder-color, $-color-tip) !default; // 占位符颜色
+$-select-focus-shadow: var(--oxy-select-focus-shadow, 0 0 0 4rpx rgba($-color-theme, 0.1)) !default; // 聚焦态阴影
+$-select-active-bg: var(--oxy-select-active-bg, rgba($-color-theme, 0.05)) !default; // 选项激活态背景色
+$-select-dropdown-shadow: var(--oxy-select-dropdown-shadow, 0 8rpx 24rpx rgba(0, 0, 0, 0.1)) !default; // 下拉面板阴影
+$-select-dropdown-filter-shadow: var(--oxy-select-dropdown-filter-shadow, drop-shadow(0 4rpx 24rpx rgba(0, 0, 0, 0.03))) !default; // 下拉面板滤镜阴影
 
 /* sort-button */
 $-sort-button-fs: var(--oxy-sort-button-fs, $-fs-content) !default; // 字号
@@ -589,23 +700,24 @@ $-switch-width: var(--oxy-switch-width, calc(1.8em + 8rpx)) !default; // 宽度
 $-switch-height: var(--oxy-switch-height, calc(1em + 8rpx)) !default; // 高度
 $-switch-circle-size: var(--oxy-switch-circle-size, 1em) !default; // 圆点大小
 $-switch-border-color: var(--oxy-switch-border-color, #e5e5e5) !default; // 边框颜色选中状态背景颜色
+$-switch-circle-bg: var(--oxy-switch-circle-bg, $-color-white) !default; // 圆点背景色
 $-switch-active-color: var(--oxy-switch-active-color, $-color-theme) !default; // 选中状态背景
 $-switch-active-shadow-color: var(--oxy-switch-active-shadow-color, rgba(0, 83, 162, 0.5)) !default; // 选中状态shadow颜色
 $-switch-inactive-color: var(--oxy-switch-inactive-color, #eaeaea) !default; // 非选中背景颜色
-$-switch-inactive-shadow-color: var(--oxy-switch-inactive-shadow-color, rgba(155, 155, 155, 0.5)) !default; // 非选中状态shadow颜色
+$-switch-inactive-shadow-color: var(--oxy-switch-inactive-shadow-color, $-shadow-color-muted) !default; // 非选中状态shadow颜色
 
 /* tabs */
 $-tabs-nav-arrow-fs: var(--oxy-tabs-nav-arrow-fs, 36rpx) !default; // 全部Icon字号
-$-tabs-nav-arrow-open-fs: var(--oxy-tabs-nav-arrow-open-fs, 28rpx) !default; // 展开Icon字号
+$-tabs-nav-arrow-open-fs: var(--oxy-tabs-nav-arrow-open-fs, $-fs-content) !default; // 展开Icon字号
 $-tabs-nav-width: var(--oxy-tabs-nav-width, 100vw) !default; // tabs 头部切换宽度
-$-tabs-nav-height: var(--oxy-tabs-nav-height, 84rpx) !default; // 头部切换高度
+$-tabs-nav-height: var(--oxy-tabs-nav-height, 104rpx) !default; // 头部切换高度
 $-tabs-nav-fs: var(--oxy-tabs-nav-fs, $-fs-content) !default; // 头部切换文字大小
 $-tabs-nav-color: var(--oxy-tabs-nav-color, rgba(0, 0, 0, 0.85)) !default; // 头部切换文字颜色
 $-tabs-nav-bg: var(--oxy-tabs-nav-bg, $-color-white) !default; // 背景颜色
 $-tabs-nav-active-color: var(--oxy-tabs-nav-active-color, $-color-theme) !default; // 头部高亮颜色
 $-tabs-nav-disabled-color: var(--oxy-tabs-nav-disabled-color, rgba(0, 0, 0, 0.25)) !default; // 头部禁用颜色
 $-tabs-nav-line-height: var(--oxy-tabs-nav-line-height, 6rpx) !default; // 高亮边框高度
-$-tabs-nav-line-width: var(--oxy-tabs-nav-line-width, 38rpx) !default; // 高亮边框宽度
+$-tabs-nav-line-width: var(--oxy-tabs-nav-line-width, 44rpx) !default; // 高亮边框宽度
 $-tabs-nav-line-bg-color: var(--oxy-tabs-nav-line-bg-color, $-color-theme) !default; // 底部条颜色
 $-tabs-nav-map-fs: var(--oxy-tabs-nav-map-fs, $-fs-content) !default; // map 类型按钮字号
 $-tabs-nav-map-color: var(--oxy-tabs-nav-map-color, rgba(0, 0, 0, 0.85)) !default; // map 类型按钮文字颜色
@@ -615,18 +727,19 @@ $-tabs-nav-map-btn-before-bg: var(
   linear-gradient(270deg, rgba(255, 255, 255, 1) 1%, rgba(255, 255, 255, 0) 100%)
 ) !default; // 左侧map遮罩阴影
 $-tabs-nav-map-button-back-color: var(--oxy-tabs-nav-map-button-back-color, rgba(0, 0, 0, 0.04)) !default; // map 类型按钮边框颜色
-$-tabs-nav-map-button-radius: var(--oxy-tabs-nav-map-button-radius, 32rpx) !default; // map 类型按钮圆角大小
+$-tabs-nav-map-disabled-border-color: var(--oxy-tabs-nav-map-disabled-border-color, #f4f4f4) !default; // map 类型按钮禁用边框颜色
+$-tabs-nav-map-button-radius: var(--oxy-tabs-nav-map-button-radius, $-radius-2xl) !default; // map 类型按钮圆角大小
 $-tabs-nav-map-modal-bg: var(--oxy-tabs-nav-map-modal-bg, $-overlay-bg) !default; // map 类型蒙层背景色
 $-tabs-nav-pills-bg-color: var(--oxy-tabs-nav-pills-bg-color, $-color-theme) !default; // pills背景色
 $-tabs-nav-pills-padding-x: var(--oxy-tabs-nav-pills-padding-x, 32rpx) !default; // pills间距
-$-tabs-nav-pills-padding-y: var(--oxy-tabs-nav-pills-padding-y, 20rpx) !default; // pills间距
-$-tabs-nav-pills-border-radius: var(--oxy-tabs-nav-pills-border-radius, 40rpx) !default; // pills圆角
+$-tabs-nav-pills-padding-y: var(--oxy-tabs-nav-pills-padding-y, 28rpx) !default; // pills间距
+$-tabs-nav-pills-border-radius: var(--oxy-tabs-nav-pills-border-radius, $-radius-3xl) !default; // pills圆角
 $-tabs-nav-pills-color: var(--oxy-tabs-nav-pills-color, $-color-white) !default; // pills文字颜色
 
 /* tag */
-$-tag-fs: var(--oxy-tag-fs, $-fs-secondary) !default; // 字号
+$-tag-fs: var(--oxy-tag-fs, $-fs-content) !default; // 字号
 $-tag-color: var(--oxy-tag-color, $-color-white) !default; // 字体颜色
-$-tag-small-fs: var(--oxy-tag-small-fs, $-fs-aid) !default; // 小尺寸字号
+$-tag-small-fs: var(--oxy-tag-small-fs, $-fs-secondary) !default; // 小尺寸字号
 $-tag-info-color: var(--oxy-tag-info-color, #585858) !default; // info 颜色
 $-tag-primary-color: var(--oxy-tag-primary-color, $-color-theme) !default; // 主颜色
 $-tag-danger-color: var(--oxy-tag-danger-color, $-color-danger) !default; // danger 颜色
@@ -637,18 +750,19 @@ $-tag-primary-bg: var(--oxy-tag-primary-bg, $-color-theme) !default; // 主背
 $-tag-danger-bg: var(--oxy-tag-danger-bg, $-color-danger) !default; // danger 背景颜色
 $-tag-warning-bg: var(--oxy-tag-warning-bg, $-color-warning) !default; // warning 背景颜色
 $-tag-success-bg: var(--oxy-tag-success-bg, $-color-success) !default; // success 背景颜色
+$-tag-radius: var(--oxy-tag-radius, $-radius-sm) !default; // 默认圆角大小
 $-tag-round-color: var(--oxy-tag-round-color, rgba(102, 102, 102, 1)) !default; // round 字体颜色
 $-tag-round-border-color: var(--oxy-tag-round-border-color, rgba(225, 225, 225, 1)) !default; // round 边框颜色
-$-tag-round-radius: var(--oxy-tag-round-radius, 24rpx) !default; // round 圆角大小
-$-tag-mark-radius: var(--oxy-tag-mark-radius, 12rpx 4rpx 12rpx 4rpx) !default; // mark 圆角大小
-$-tag-close-size: var(--oxy-tag-close-size, 28rpx) !default; // 关闭按钮字号
-$-tag-close-color: var(--oxy-tag-close-color, $-tag-info-color) !default; // 关闭按钮颜色
+$-tag-round-radius: var(--oxy-tag-round-radius, $-radius-2xl) !default; // round 圆角大小
+$-tag-mark-radius: var(--oxy-tag-mark-radius, $-radius-md $-radius-xs) !default; // mark 圆角大小
+$-tag-close-size: var(--oxy-tag-close-size, $-tag-small-fs) !default; // 关闭按钮字号
+$-tag-close-color: var(--oxy-tag-close-color, currentColor) !default; // 关闭按钮颜色
 $-tag-close-active-color: var(--oxy-tag-close-active-color, rgba(0, 0, 0, 0.45)) !default; // 关闭按钮 active 颜色
 
 /* corner */
-$-corner-radius: var(--oxy-corner-radius, 24rpx) !default; // 圆角大小
-$-corner-font-size: var(--oxy-corner-fs, $-fs-secondary) !default; // 字号
-$-corner-font-weight: var(--oxy-corner-fs, 400) !default; // 字号
+$-corner-radius: var(--oxy-corner-radius, $-radius-xl) !default; // 圆角大小
+$-corner-font-size: var(--oxy-corner-fs, $-fs-content) !default; // 字号
+$-corner-font-weight: var(--oxy-corner-font-weight, 400) !default; // 字重
 $-corner-color: var(--oxy-corner-color, $-color-white) !default; // 字体颜色
 $-corner-primary-color: var(--oxy-corner-primary-color, $-color-theme) !default; // 主颜色
 $-corner-info-color: var(--oxy-corner-info-color, #7e8fae) !default; // info 颜色
@@ -660,34 +774,34 @@ $-corner-info-bg: var(--oxy-corner-info-bg, resultColor(90deg, $-color-info, 'da
 $-corner-success-bg: var(--oxy-corner-success-bg, resultColor(90deg, $-color-success, 'dark' 'light', #19be6b #84e3ab, 0% 100%)) !default; // success 背景颜色
 $-corner-warning-bg: var(--oxy-corner-warning-bg, resultColor(90deg, $-color-warning, 'dark' 'light', #ff8124 #ffb48f, 0% 100%)) !default; // warning 背景颜色
 $-corner-danger-bg: var(--oxy-corner-danger-bg, resultColor(90deg, $-color-danger, 'dark' 'light', #fa4350 #fea1a8, 0% 100%)) !default; // danger 背景颜色
-$-corner-horizontal-font-size: var(--oxy-corner-fs, $-fs-content) !default; // 字号
-$-corner-horizontal-font-weight: var(--oxy-corner-fs, $-fw-semibold) !default; // 字号
-$-corner-horizontal-primary-bg: var(--oxy-corner-primary-bg, resultColor(90deg, $-color-theme, 'light' 'dark', #ffffff #cceaff, 0% 100%)) !default; // 主背景颜色
-$-corner-horizontal-info-bg: var(--oxy-corner-info-bg, resultColor(90deg, $-color-info, 'light' 'dark', #ffffff #adb6c6, 0% 100%)) !default; // info 背景颜色
-$-corner-horizontal-success-bg: var(--oxy-corner-success-bg, resultColor(90deg, $-color-success, 'light' 'dark', #ffffff #b2ebcf, 0% 100%)) !default; // success 背景颜色
-$-corner-horizontal-warning-bg: var(--oxy-corner-warning-bg, resultColor(90deg, $-color-warning, 'light' 'dark', #ffffff #fcedd6, 0% 100%)) !default; // warning 背景颜色
-$-corner-horizontal-danger-bg: var(--oxy-corner-danger-bg, resultColor(90deg, $-color-danger, 'light' 'dark', #ffffff #ffd5d8, 0% 100%)) !default; // danger 背景颜色
-$-corner-embedded-font-size: var(--oxy-corner-fs, $-fs-content) !default; // 字号
-$-corner-embedded-font-weight: var(--oxy-corner-fs, 400) !default; // 字号
-$-corner-embedded-primary-bg: var(--oxy-corner-primary-bg, #cceaff) !default; // 主背景颜色
-$-corner-embedded-info-bg: var(--oxy-corner-info-bg, #eef4fc) !default; // info 背景颜色
-$-corner-embedded-success-bg: var(--oxy-corner-success-bg, #b2ebcf) !default; // success 背景颜色
-$-corner-embedded-warning-bg: var(--oxy-corner-warning-bg, #fcedd6) !default; // warning 背景颜色
-$-corner-embedded-danger-bg: var(--oxy-corner-danger-bg, #ffd5d8) !default; // danger 背景颜色
+$-corner-horizontal-font-size: var(--oxy-corner-horizontal-font-size, $-fs-content) !default; // 水平标签字号
+$-corner-horizontal-font-weight: var(--oxy-corner-horizontal-font-weight, $-fw-semibold) !default; // 水平标签字重
+$-corner-horizontal-primary-bg: var(--oxy-corner-horizontal-primary-bg, resultColor(90deg, $-color-theme, 'light' 'dark', #ffffff #cceaff, 0% 100%)) !default; // 水平标签主背景颜色
+$-corner-horizontal-info-bg: var(--oxy-corner-horizontal-info-bg, resultColor(90deg, $-color-info, 'light' 'dark', #ffffff #adb6c6, 0% 100%)) !default; // 水平标签info背景颜色
+$-corner-horizontal-success-bg: var(--oxy-corner-horizontal-success-bg, resultColor(90deg, $-color-success, 'light' 'dark', #ffffff #b2ebcf, 0% 100%)) !default; // 水平标签success背景颜色
+$-corner-horizontal-warning-bg: var(--oxy-corner-horizontal-warning-bg, resultColor(90deg, $-color-warning, 'light' 'dark', #ffffff #fcedd6, 0% 100%)) !default; // 水平标签warning背景颜色
+$-corner-horizontal-danger-bg: var(--oxy-corner-horizontal-danger-bg, resultColor(90deg, $-color-danger, 'light' 'dark', #ffffff #ffd5d8, 0% 100%)) !default; // 水平标签danger背景颜色
+$-corner-embedded-font-size: var(--oxy-corner-embedded-font-size, $-fs-content) !default; // 内嵌标签字号
+$-corner-embedded-font-weight: var(--oxy-corner-embedded-font-weight, 400) !default; // 内嵌标签字重
+$-corner-embedded-primary-bg: var(--oxy-corner-embedded-primary-bg, #cceaff) !default; // 内嵌标签主背景颜色
+$-corner-embedded-info-bg: var(--oxy-corner-embedded-info-bg, #eef4fc) !default; // 内嵌标签info背景颜色
+$-corner-embedded-success-bg: var(--oxy-corner-embedded-success-bg, #b2ebcf) !default; // 内嵌标签success背景颜色
+$-corner-embedded-warning-bg: var(--oxy-corner-embedded-warning-bg, #fcedd6) !default; // 内嵌标签warning背景颜色
+$-corner-embedded-danger-bg: var(--oxy-corner-embedded-danger-bg, #ffd5d8) !default; // 内嵌标签danger背景颜色
 
 /* toast */
 $-toast-color: var(--oxy-toast-color, $-color-white) !default; // 文字颜色
-$-toast-padding: var(--oxy-toast-padding, 32rpx 48rpx) !default; // padding
+$-toast-padding: var(--oxy-toast-padding, 40rpx 52rpx) !default; // padding
 $-toast-max-width: var(--oxy-toast-max-width, 600rpx) !default; // 最大宽度
-$-toast-radius: var(--oxy-toast-radius, 16rpx) !default; // 圆角大小
+$-toast-radius: var(--oxy-toast-radius, $-radius-lg) !default; // 圆角大小
 $-toast-bg: var(--oxy-toast-bg, $-overlay-bg) !default; // 背景色
 $-toast-fs: var(--oxy-toast-fs, $-fs-content) !default; // 字号
-$-toast-line-height: var(--oxy-toast-line-height, 40rpx) !default; // 行高
+$-toast-line-height: var(--oxy-toast-line-height, 44rpx) !default; // 行高
 $-toast-with-icon-min-width: var(--oxy-toast-with-icon-min-width, 300rpx) !default; // 有图标的情况下最小宽度
 $-toast-icon-size: var(--oxy-toast-icon-size, 64rpx) !default; // 图标大小
 $-toast-icon-margin-right: var(--oxy-toast-icon-margin-right, 24rpx) !default; // 图标右边距
 $-toast-icon-margin-bottom: var(--oxy-toast-icon-margin-bottom, 24rpx) !default; // 图标下边距
-$-toast-loading-padding: var(--oxy-toast-loading-padding, 20rpx) !default; // loading状态下的padding
+$-toast-loading-padding: var(--oxy-toast-loading-padding, 24rpx) !default; // loading状态下的padding
 $-toast-loading-margin-bottom: var(--oxy-toast-loading-margin-bottom, 32rpx) !default; // loading动画的margin-bottom
 $-toast-box-shadow: var(--oxy-toast-box-shadow, 0 12rpx 32rpx 0 rgba(0, 0, 0, 0.08)) !default; // 外部阴影
 
@@ -697,32 +811,35 @@ $-loading-size: var(--oxy-loading-size, 64rpx) !default; // loading 大小
 /* tooltip */
 $-tooltip-bg: var(--oxy-tooltip-bg, rgba(38, 39, 40, 0.8)) !default; // 背景色
 $-tooltip-color: var(--oxy-tooltip-color, $-color-white) !default; // 文字颜色
-$-tooltip-radius: var(--oxy-tooltip-radius, 16rpx) !default; // 圆角大小
+$-tooltip-radius: var(--oxy-tooltip-radius, $-radius-lg) !default; // 圆角大小
 $-tooltip-arrow-size: var(--oxy-tooltip-arrow-size, 10rpx) !default; // 箭头大小
 $-tooltip-fs: var(--oxy-tooltip-fs, $-fs-content) !default; // 字号
 $-tooltip-blur: var(--oxy-tooltip-blur, 20rpx) !default; // 背景高斯模糊效果
-$-tooltip-padding: var(--oxy-tooltip-padding, 18rpx 40rpx) !default; // 间距
+$-tooltip-padding: var(--oxy-tooltip-padding, $-spacing-20 $-spacing-40) !default; // 间距
 $-tooltip-close-size: var(--oxy-tooltip-close-size, 12rpx) !default; // 背景高斯模糊效果
 $-tooltip-z-index: var(--oxy-tooltip-z-index, 500) !default;
-$-tooltip-line-height: var(--oxy-tooltip-line-height, 36rpx) !default; // 行高
+$-tooltip-line-height: var(--oxy-tooltip-line-height, 44rpx) !default; // 行高
 
 /* popover */
 $-popover-bg: var(--oxy-popover-bg, $-color-white) !default; // 背景色
 $-popover-color: var(--oxy-popover-color, rgba(0, 0, 0, 0.85)) !default; // 文字颜色
-$-popover-box-shadow: var(--oxy-popover-box-shadow, 0 4rpx 20rpx 0 rgba(0, 0, 0, 0.1)) !default; // 阴影颜色
+$-popover-box-shadow: var(--oxy-popover-box-shadow, $-shadow-sm) !default; // 阴影颜色
 $-popover-arrow-box-shadow: var(--oxy-popover-arrow-box-shadow, 0 4rpx 20rpx 0 rgba(0, 0, 0, 0.2)) !default; // 阴影颜色
 $-popover-border-color: var(--oxy-popover-border-color, rgba(0, 0, 0, 0.09)) !default; // 阴影颜色
-$-popover-radius: var(--oxy-popover-radius, 8rpx) !default; // 圆角大小
+$-popover-radius: var(--oxy-popover-radius, $-radius-sm) !default; // 圆角大小
 $-popover-arrow-size: var(--oxy-popover-arrow-size, 12rpx) !default; // 箭头大小
 $-popover-fs: var(--oxy-popover-fs, $-fs-content) !default; // 字号
-$-popover-padding: var(--oxy-popover-padding, 30rpx) !default; // 间距
-$-popover-line-height: var(--oxy-popover-line-height, 36rpx) !default; // 行高
+$-popover-padding: var(--oxy-popover-padding, $-spacing-32) !default; // 间距
+$-popover-line-height: var(--oxy-popover-line-height, 44rpx) !default; // 行高
 $-popover-z-index: var(--oxy-popover-z-index, $-tooltip-z-index) !default;
+$-popover-dark-bg: var(--oxy-popover-dark-bg, rgb(75, 76, 77)) !default; // 暗色背景色
+$-popover-dark-box-shadow: var(--oxy-popover-dark-box-shadow, 0 4rpx 20rpx 0 rgba(75, 76, 77, 0.1)) !default; // 暗色阴影
+$-popover-trigger-icon-size: var(--oxy-popover-trigger-icon-size, 36rpx) !default; // 触发图标大小
 
 /* grid-item */
-$-grid-item-fs: var(--oxy-grid-item-fs, 24rpx) !default; // 字号
+$-grid-item-fs: var(--oxy-grid-item-fs, $-fs-content) !default; // 字号
 $-grid-item-bg: var(--oxy-grid-item-bg, $-color-white) !default; // 字号
-$-grid-item-padding: var(--oxy-grid-item-padding, 28rpx 0) !default; // 内容的 padding
+$-grid-item-padding: var(--oxy-grid-item-padding, $-spacing-32 0) !default; // 内容的 padding
 $-grid-item-border-color: var(--oxy-grid-item-border-color, $-color-border-light) !default; // 边框颜色
 $-grid-item-hover-bg: var(--oxy-grid-item-hover-bg, $-color-gray-3) !default; // hover背景色
 $-grid-item-hover-bg-dark: var(--oxy-grid-item-hover-bg-dark, $-color-gray-7) !default; // 暗黑模式hover背景色
@@ -730,28 +847,28 @@ $-grid-item-hover-bg-dark: var(--oxy-grid-item-hover-bg-dark, $-color-gray-7) !d
 /* statustip */
 $-statustip-fs: var(--oxy-statustip-fs, $-fs-content) !default; // 字号
 $-statustip-color: var(--oxy-statustip-color, rgba(0, 0, 0, 0.45)) !default; // 文字颜色
-$-statustip-line-height: var(--oxy-statustip-line-height, 32rpx) !default; // 文字行高
-$-statustip-padding: var(--oxy-statustip-padding, 10rpx 20rpx) !default; // 间距
+$-statustip-line-height: var(--oxy-statustip-line-height, 36rpx) !default; // 文字行高
+$-statustip-padding: var(--oxy-statustip-padding, $-spacing-12 $-spacing-20) !default; // 间距
 
 /* card */
 $-card-bg: var(--oxy-card-bg, $-color-white) !default; // 背景色
 $-card-fs: var(--oxy-card-fs, $-fs-content) !default; // 卡片字号
 $-card-padding: var(--oxy-card-padding, 0 $-size-side-padding) !default; // 内边距
-$-card-footer-padding: var(--oxy-card-footer-padding, 24rpx 0 32rpx) !default; // 底部内边距
-$-card-shadow-color: var(--oxy-card-shadow-color, 0 8rpx 16rpx 0 rgba(0, 0, 0, 0.02)) !default; // 阴影
-$-card-radius: var(--oxy-card-radius, 16rpx) !default; // 圆角大小
+$-card-footer-padding: var(--oxy-card-footer-padding, 28rpx 0 36rpx) !default; // 底部内边距
+$-card-shadow-color: var(--oxy-card-shadow-color, $-shadow-md) !default; // 阴影
+$-card-radius: var(--oxy-card-radius, $-radius-lg) !default; // 圆角大小
 $-card-line-height: var(--oxy-card-line-height, 1.1) !default; // 行高
 $-card-margin: var(--oxy-card-margin, 0 $-size-side-padding) !default; // 外边距
 $-card-title-color: var(--oxy-card-title-color, rgba(0, 0, 0, 0.85)) !default; // 标题颜色
 $-card-title-fs: var(--oxy-card-title-fs, $-fs-title) !default; //  矩形卡片标题字号
 $-card-content-border-color: var(--oxy-card-content-border-color, rgba(0, 0, 0, 0.09)) !default; // 内容边框
-$-card-rectangle-title-padding: var(--oxy-card-rectangle-title-padding, 30rpx 30rpx 24rpx) !default; // 矩形卡片头部内边距
-$-card-rectangle-content-padding: var(--oxy-card-rectangle-content-padding, 32rpx 0) !default; // 矩形卡片内容内边距
-$-card-rectangle-footer-padding: var(--oxy-card-rectangle-footer-padding, 24rpx 0) !default; // 矩形卡片底部内边距
+$-card-rectangle-title-padding: var(--oxy-card-rectangle-title-padding, 36rpx 36rpx 28rpx) !default; // 矩形卡片头部内边距
+$-card-rectangle-content-padding: var(--oxy-card-rectangle-content-padding, 36rpx 0) !default; // 矩形卡片内容内边距
+$-card-rectangle-footer-padding: var(--oxy-card-rectangle-footer-padding, 28rpx 0) !default; // 矩形卡片底部内边距
 $-card-content-color: var(--oxy-card-content-color, rgba(0, 0, 0, 0.45)) !default; // 文本内容颜色
 $-card-content-line-height: var(--oxy-card-content-line-height, 1.428) !default; // 文本内容行高
-$-card-content-margin: var(--oxy-card-content-margin, 26rpx 0 24rpx) !default; // 内容外边距
-$-card-content-rectangle-margin: var(--oxy-card-content-rectangle-margin, 28rpx 0 24rpx) !default; // 矩形卡片内容外边距
+$-card-content-margin: var(--oxy-card-content-margin, 32rpx 0 28rpx) !default; // 内容外边距
+$-card-content-rectangle-margin: var(--oxy-card-content-rectangle-margin, 32rpx 0 28rpx) !default; // 矩形卡片内容外边距
 
 /* upload */
 $-upload-size: var(--oxy-upload-size, 160rpx) !default; // upload的外边框默认尺寸
@@ -761,17 +878,27 @@ $-upload-evoke-color: var(--oxy-upload-evoke-color, rgba(0, 0, 0, 0.25)) !defaul
 $-upload-evoke-disabled-color: var(--oxy-upload-evoke-disabled-color, rgba(0, 0, 0, 0.09)) !default; // 唤起项禁用颜色
 $-upload-close-icon-size: var(--oxy-upload-close-icon-size, 32rpx) !default; // 移除按钮尺寸
 $-upload-close-icon-color: var(--oxy-upload-close-icon-color, rgba(0, 0, 0, 0.65)) !default; // 移除按钮颜色
-$-upload-progress-fs: var(--oxy-upload-progress-fs, 28rpx) !default; // 进度文字字号
-$-upload-file-fs: var(--oxy-upload-file-fs, 28rpx) !default; // 文件名字号
+$-upload-progress-fs: var(--oxy-upload-progress-fs, $-fs-content) !default; // 进度文字字号
+$-upload-file-fs: var(--oxy-upload-file-fs, $-fs-content) !default; // 文件名字号
 $-upload-file-color: var(--oxy-upload-file-color, $-color-secondary) !default; // 文件名字颜色
-$-upload-preview-name-fs: var(--oxy-upload-preview-name-fs, 24rpx) !default; // 预览图片名字号
+$-upload-preview-name-fs: var(--oxy-upload-preview-name-fs, $-fs-secondary) !default; // 预览图片名字号
 $-upload-preview-icon-size: var(--oxy-upload-preview-icon-size, 48rpx) !default; // 预览内部图标尺寸
 $-upload-preview-name-bg: var(--oxy-upload-preview-name-bg, rgba(0, 0, 0, 0.6)) !default; // 预览文件名背景色
 $-upload-preview-name-height: var(--oxy-upload-preview-name-height, 44rpx) !default; // 预览文件名背景高度
 $-upload-cover-icon-size: var(--oxy-upload-cover-icon-size, 44rpx) !default; // 视频/文件图标尺寸
+$-upload-video-play-bg: var(--oxy-upload-video-play-bg, rgba(0, 0, 0, 0.5)) !default; // 视频播放按钮背景色
+$-upload-file-radius: var(--oxy-upload-file-radius, $-radius-lg) !default; // 文件卡片圆角
 
 /* file-list */
 $-file-list-height: var(--oxy-file-list-height, 200rpx) !default; // 文件高度
+$-file-list-bg: var(--oxy-file-list-bg, #f8f9ff) !default; // 列表模式背景色
+$-file-list-download-bg: var(--oxy-file-list-download-bg, rgba(0, 0, 0, 0.45)) !default; // 下载按钮背景色
+$-file-list-card-radius: var(--oxy-file-list-card-radius, $-radius-lg) !default; // 卡片模式圆角
+$-file-list-list-item-radius: var(--oxy-file-list-list-item-radius, $-radius-sm) !default; // 列表模式圆角
+$-file-list-file-name-fs: var(--oxy-file-list-file-name-fs, $-fs-content) !default; // 文件名字号
+$-file-list-file-name-color: var(--oxy-file-list-file-name-color, $-color-secondary) !default; // 文件名颜色
+$-file-list-action-icon-size: var(--oxy-file-list-action-icon-size, 36rpx) !default; // 下载/删除图标大小
+$-file-list-action-icon-color: var(--oxy-file-list-action-icon-color, $-font-gray-4) !default; // 下载/删除图标颜色
 
 /* curtain */
 $-curtain-content-radius: var(--oxy-curtain-content-radius, 48rpx) !default; // 内容圆角
@@ -780,9 +907,9 @@ $-curtain-content-close-fs: var(--oxy-curtain-content-close-fs, $-fs-big) !defau
 
 /* notify */
 $-notify-text-color: var(--oxy-notify-text-color, $-color-white) !default;
-$-notify-padding: var(--oxy-notify-padding, 16rpx 32rpx) !default;
+$-notify-padding: var(--oxy-notify-padding, $-spacing-20 $-spacing-32) !default;
 $-notify-font-size: var(--oxy-notify-font-size, $-fs-content) !default;
-$-notify-line-height: var(--oxy-notify-line-height, 40rpx) !default;
+$-notify-line-height: var(--oxy-notify-line-height, 44rpx) !default;
 $-notify-primary-background: var(--oxy-notify-primary-background, $-color-theme) !default;
 $-notify-success-background: var(--oxy-notify-success-background, $-color-success) !default;
 $-notify-danger-background: var(--oxy-notify-danger-background, $-color-danger) !default;
@@ -796,15 +923,15 @@ $-skeleton-text-height-default: var(--oxy-skeleton-text-height-default, 32rpx) !
 $-skeleton-rect-height-default: var(--oxy-skeleton-rect-height-default, 32rpx) !default;
 $-skeleton-circle-height-default: var(--oxy-skeleton-circle-height-default, 96rpx) !default;
 $-skeleton-row-margin-bottom: var(--oxy-skeleton-row-margin-bottom, 32rpx) !default;
-$-skeleton-border-radius-text: var(--oxy-skeleton-border-radius-text, 4rpx) !default;
-$-skeleton-border-radius-rect: var(--oxy-skeleton-border-radius-rect, 8rpx) !default;
-$-skeleton-border-radius-circle: var(--oxy-skeleton-border-radius-circle, 50%) !default;
+$-skeleton-border-radius-text: var(--oxy-skeleton-border-radius-text, $-radius-xs) !default;
+$-skeleton-border-radius-rect: var(--oxy-skeleton-border-radius-rect, $-radius-sm) !default;
+$-skeleton-border-radius-circle: var(--oxy-skeleton-border-radius-circle, $-radius-circle) !default;
 
 /* circle */
 $-circle-text-color: var(--oxy-circle-text-color, $-color-content) !default; // circle文字颜色
 
 /* swiper */
-$-swiper-radius: var(--oxy-swiper-radius, 16rpx);
+$-swiper-radius: var(--oxy-swiper-radius, $-radius-lg);
 $-swiper-item-padding: var(--oxy-swiper-item-padding, 0);
 $-swiper-item-text-color: var(--oxy-swiper-item-text-color, #ffffff);
 $-swiper-item-text-fs: var(--oxy-swiper-item-text-fs, $-fs-title);
@@ -820,21 +947,52 @@ $-swiper-nav-dots-bar-active-width: var(--oxy-swiper-nav-dots-bar-active-width,
 $-swiper-nav-fraction-color: var(--oxy-swiper-nav-fraction-color, $-font-white-1) !default;
 $-swiper-nav-fraction-bg-color: var(--oxy-swiper-nav-fraction-bg-color, $-font-gray-3) !default;
 $-swiper-nav-fraction-height: var(--oxy-swiper-nav-fraction-height, 48rpx) !default;
-$-swiper-nav-fraction-font-size: var(--oxy-swiper-nav-fraction-font-size, 24rpx) !default;
+$-swiper-nav-fraction-font-size: var(--oxy-swiper-nav-fraction-font-size, $-fs-secondary) !default;
 // button
 $-swiper-nav-btn-color: var(--oxy-swiper-nav-btn-color, $-font-white-1) !default;
 $-swiper-nav-btn-bg-color: var(--oxy-swiper-nav-btn-bg-color, $-font-gray-3) !default;
 $-swiper-nav-btn-size: var(--oxy-swiper-nav-btn-size, 48rpx) !default;
 
 /* segmented */
-$-segmented-padding: var(--oxy-segmented-padding, 8rpx) !default; // 分段器padding
+$-segmented-padding: var(--oxy-segmented-padding, $-spacing-8) !default; // 分段器padding
+$-segmented-radius: var(--oxy-segmented-radius, $-radius-sm) !default; // 分段器圆角
 $-segmented-item-bg-color: var(--oxy-segmented-item-bg-color, #eeeeee) !default;
 $-segmented-item-color: var(--oxy-segmented-item-color, rgba(0, 0, 0, 0.85)) !default; // 标题文字颜色
 $-segmented-item-acitve-bg: var(--oxy-segmented-item-acitve-bg, #ffffff) !default; // 标题文字颜色
 $-segmented-item-disabled-color: var(--oxy-segmented-item-disabled-color, rgba(0, 0, 0, 0.25)) !default; // 标题文字禁用颜色
 
+/* splitter */
+$-splitter-bar-size: var(--oxy-splitter-bar-size, 16rpx) !default; // 分割条宽度/高度
+$-splitter-bar-bg: var(--oxy-splitter-bar-bg, $-color-gray-1) !default; // 分割条背景色
+$-splitter-bar-active-bg: var(--oxy-splitter-bar-active-bg, $-color-gray-2) !default; // 可拖拽分割条背景色
+$-splitter-bar-border: var(--oxy-splitter-bar-border, $-color-border-light) !default; // 分割条边框色
+$-splitter-line-color: var(--oxy-splitter-line-color, #cfd5df) !default; // 分割条中线颜色
+$-splitter-arrow-color: var(--oxy-splitter-arrow-color, #7e8796) !default; // 折叠箭头颜色
+$-splitter-arrow-size: var(--oxy-splitter-arrow-size, 10rpx) !default; // 折叠箭头尺寸
+$-splitter-arrow-stroke: var(--oxy-splitter-arrow-stroke, 1px) !default; // 折叠箭头线宽
+$-splitter-action-size: var(--oxy-splitter-action-size, 32rpx) !default; // 折叠按钮尺寸
+$-splitter-touch-hit-size: var(--oxy-splitter-touch-hit-size, 56rpx) !default; // 分割条触摸热区尺寸
+$-splitter-grip-size: var(--oxy-splitter-grip-size, 4rpx) !default; // 可拖拽手柄短边尺寸
+$-splitter-grip-length: var(--oxy-splitter-grip-length, 20rpx) !default; // 可拖拽手柄长边尺寸
+$-splitter-grip-gap: var(--oxy-splitter-grip-gap, 8rpx) !default; // 可拖拽手柄点阵/线段间距
+$-splitter-bar-radius: var(--oxy-splitter-bar-radius, $-radius-pill) !default; // 分割条圆角
+$-splitter-action-radius: var(--oxy-splitter-action-radius, $-radius-lg) !default; // 折叠按钮圆角
+$-splitter-action-group-radius: var(--oxy-splitter-action-group-radius, $-radius-pill) !default; // 分组按钮圆角
+$-splitter-grip-radius: var(--oxy-splitter-grip-radius, $-radius-pill) !default; // 拖拽手柄圆角
+$-splitter-grip-color: var(--oxy-splitter-grip-color, #b9c2d0) !default; // 可拖拽手柄颜色
+$-splitter-grip-active-color: var(--oxy-splitter-grip-active-color, #9aa5b6) !default; // 拖拽中手柄颜色
+$-splitter-action-bg: var(--oxy-splitter-action-bg, $-color-white) !default; // 折叠按钮背景色
+$-splitter-action-border: var(--oxy-splitter-action-border, $-color-border-light) !default; // 折叠按钮边框色
+$-splitter-action-shadow: var(--oxy-splitter-action-shadow, 0 2rpx 10rpx rgba(15, 23, 42, 0.08)) !default; // 折叠按钮阴影
+$-splitter-action-active-bg: var(--oxy-splitter-action-active-bg, rgba(0, 0, 0, 0.04)) !default; // 折叠按钮按下背景色
+$-splitter-action-dark-active-bg: var(--oxy-splitter-action-dark-active-bg, rgba(255, 255, 255, 0.08)) !default; // 暗色折叠按钮按下背景色
+$-splitter-bar-dark-bg: var(--oxy-splitter-bar-dark-bg, $-dark-background2) !default; // 暗黑模式分割条背景
+$-splitter-bar-dark-border: var(--oxy-splitter-bar-dark-border, $-dark-border-color) !default; // 暗黑模式分割条边框
+$-splitter-grip-dark-color: var(--oxy-splitter-grip-dark-color, $-dark-color3) !default; // 暗黑模式可拖拽手柄颜色
+
 /* tabbar */
 $-tabbar-height: var(--oxy-tabbar-height, 100rpx) !default;
+$-tabbar-round-radius: var(--oxy-tabbar-round-radius, $-radius-pill) !default;
 $-tabbar-box-shadow: var(
   --oxy-tabbar-box-shadow,
   0 12rpx 60rpx 10rpx rgba(0, 0, 0, 0.05),
@@ -843,7 +1001,7 @@ $-tabbar-box-shadow: var(
 ) !default; // round类型tabbar阴影
 
 /* tabbar-item */
-$-tabbar-item-title-font-size: var(--oxy-tabbar-item-title-font-size, 20rpx) !default; // tabbar选项文字大小
+$-tabbar-item-title-font-size: var(--oxy-tabbar-item-title-font-size, $-fs-aid) !default; // tabbar选项文字大小
 $-tabbar-item-title-line-height: var(--oxy-tabbar-item-title-line-height, initial) !default; // tabbar选项标题文字行高
 $-tabbar-inactive-color: var(--oxy-tabbar-inactive-color, $-color-title) !default; // 标题文字和图标颜色
 $-tabbar-active-color: var(--oxy-tabbar-active-color, $-color-theme) !default; // 选中文字和图标颜色
@@ -854,16 +1012,16 @@ $-navbar-height: var(--oxy-navbar-height, 88rpx) !default; // navbar高度
 $-navbar-color: var(--oxy-navbar-color, $-font-gray-1) !default; // navbar字体颜色
 $-navbar-background: var(--oxy-navbar-background, $-color-white) !default; // navbar背景颜色
 $-navbar-arrow-size: var(--oxy-navbar-arrow-size, 48rpx) !default; // navbar左箭头图标大小
-$-navbar-desc-font-size: var(--oxy-navbar-desc-font-size, 32rpx); // navbar 左箭头字体大小
+$-navbar-desc-font-size: var(--oxy-navbar-desc-font-size, $-fs-content); // navbar 左箭头字体大小
 $-navbar-desc-font-color: var(--oxy-navbar-desc-font-color, $-font-gray-1) !default; // navbar左右两侧字体颜色
 $-navbar-title-font-size: var(--oxy-navbar-title-font-size, 36rpx); // navbar title字体大小
-$-navbar-title-font-weight: var(--oxy-navbar-title-font-weight, 600); // navbar title字重
-$-navbar-disabled-opacity: var(--oxy-navbar-disabled-opacity, 0.6) !default; // navbar左右两侧字体禁用
+$-navbar-title-font-weight: var(--oxy-navbar-title-font-weight, $-fw-semibold); // navbar title字重
+$-navbar-disabled-opacity: var(--oxy-navbar-disabled-opacity, $-opacity-disabled) !default; // navbar左右两侧字体禁用
 $-navbar-hover-color: var(--oxy-navbar-hover-color, #eee) !default; // navbar hover样式
 
 /* navbar-capsule */
 $-navbar-capsule-border-color: var(--oxy-navbar-capsule-border-color, #e7e7e7) !default;
-$-navbar-capsule-border-radius: var(--oxy-navbar-capsule-border-radius, 32rpx) !default;
+$-navbar-capsule-border-radius: var(--oxy-navbar-capsule-border-radius, $-radius-2xl) !default;
 $-navbar-capsule-width: var(--oxy-navbar-capsule-width, 176rpx) !default;
 $-navbar-capsule-height: var(--oxy-navbar-capsule-height, 64rpx) !default;
 $-navbar-capsule-icon-size: var(--oxy-navbar-capsule-icon-size, 40rpx) !default; // navbar capsule图标大小
@@ -873,81 +1031,70 @@ $-table-color: var(--oxy-table-color, $-font-gray-1) !default; // 表格字体
 $-table-bg: var(--oxy-table-bg, #ffffff) !default; // 表格背景颜色
 $-table-stripe-bg: var(--oxy-table-stripe-bg, #f3f3f3) !default; // 表格背景颜色
 $-table-border-color: var(--oxy-table-border-color, #ececec) !default; // 表格边框颜色
-$-table-font-size: var(--oxy-table-font-size, 26rpx) !default; // 表格字体大小
+$-table-font-size: var(--oxy-table-font-size, $-fs-content) !default; // 表格字体大小
+$-table-fixed-shadow-dark: var(--oxy-table-fixed-shadow-dark, linear-gradient(270deg, rgba(17, 17, 17, 0.2) 0%, rgba(0, 0, 0, 0) 100%)) !default; // 固定列暗色阴影
+$-table-fixed-shadow-light: var(--oxy-table-fixed-shadow-light, linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.04) 100%)) !default; // 固定列浅色阴影
 
 /* sidebar */
 $-sidebar-bg: var(--oxy-sidebar-bg, $-color-gray-1) !default; // 侧边栏背景色
-$-sidebar-width: var(--oxy-sidebar-width, 208rpx) !default; // 侧边栏宽度
+$-sidebar-width: var(--oxy-sidebar-width, 192rpx) !default; // 侧边栏宽度
 $-sidebar-height: var(--oxy-sidebar-height, 100%) !default; // 侧边栏高度
 
 /* sidebar-item */
 $-sidebar-color: var(--oxy-sidebar-color, $-font-gray-1) !default;
-$-sidebar-item-height: var(--oxy-sidebar-item-height, 112rpx) !default;
-$-sidebar-item-line-height: var(--oxy-sidebar-item-line-height, 48rpx) !default;
+$-sidebar-item-height: var(--oxy-sidebar-item-height, 104rpx) !default;
+$-sidebar-item-padding: var(--oxy-sidebar-item-padding, 28rpx) !default;
+$-sidebar-item-line-height: var(--oxy-sidebar-item-line-height, 44rpx) !default;
 $-sidebar-disabled-color: var(--oxy-side-bar-disabled-color, $-font-gray-4) !default;
 $-sidebar-active-color: var(--oxy-sidebar-active-color, $-color-theme) !default; // 激活项字体颜色
 $-sidebar-active-bg: var(--oxy-sidebar-active-bg, $-color-white) !default; // 激活项背景颜色
 $-sidebar-hover-bg: var(--oxy-sidebar-hover-bg, $-color-gray-2) !default; // 激活项点击背景颜色
-$-sidebar-border-radius: var(--oxy-sidebar-border-radius, 16rpx) !default;
-$-sidebar-font-size: var(--oxy-sidebar-font-size, 32rpx) !default;
-$-sidebar-icon-size: var(--oxy-sidebar-icon-size, 40rpx) !default;
+$-sidebar-border-radius: var(--oxy-sidebar-border-radius, $-radius-lg) !default;
+$-sidebar-font-size: var(--oxy-sidebar-font-size, $-fs-content) !default;
+$-sidebar-icon-size: var(--oxy-sidebar-icon-size, 36rpx) !default;
 $-sidebar-active-border-width: var(--oxy-sidebar-active-border-width, 8rpx) !default;
-$-sidebar-active-border-height: var(--oxy-sidebar-active-border-height, 32rpx) !default;
+$-sidebar-active-border-height: var(--oxy-sidebar-active-border-height, 28rpx) !default;
+$-sidebar-transition-duration: var(--oxy-sidebar-transition-duration, $-transition-duration-base) !default;
+$-sidebar-transition-timing-function: var(--oxy-sidebar-transition-timing-function, cubic-bezier(0.645, 0.045, 0.355, 1))
+  !default;
 
 /* fab */
 $-fab-trigger-height: var(--oxy-fab-trigger-height, 112rpx) !default;
 $-fab-trigger-width: var(--oxy-fab-trigger-width, 112rpx) !default;
-$-fab-actions-padding: var(--oxy-actions-padding, 24rpx) !default;
+$-fab-actions-padding: var(--oxy-fab-actions-padding, $-spacing-24) !default;
 $-fab-icon-fs: var(--oxy-fab-icon-fs, 40rpx) !default;
 
 /* count-down */
 $-count-down-text-color: var(--oxy-count-down-text-color, $-color-gray-8) !default;
 $-count-down-font-size: var(--oxy-count-down-font-size, $-fs-content) !default;
-$-count-down-line-height: var(--oxy-count-down-line-height, 40rpx) !default;
+$-count-down-line-height: var(--oxy-count-down-line-height, 44rpx) !default;
 
 /* keyboard */
 $-keyboard-key-height: var(--oxy-keyboard-key-height, 96rpx) !default;
 $-keyboard-key-font-size: var(--oxy-keyboard-key-font-size, 56rpx) !default;
 $-keyboard-key-background: var(--oxy-keyboard-key-background, $-color-white) !default;
-$-keyboard-key-border-radius: var(--oxy-keyboard-key-border-radius, 16rpx) !default;
-$-keyboard-delete-font-size: var(--oxy-keyboard-delete-font-size, 32rpx) !default;
+$-keyboard-key-border-radius: var(--oxy-keyboard-key-border-radius, $-radius-lg) !default;
+$-keyboard-delete-font-size: var(--oxy-keyboard-delete-font-size, 36rpx) !default;
 $-keyboard-key-active-color: var(--oxy-keyboard-key-active-color, $-color-gray-3) !default;
 $-keyboard-button-text-color: var(--oxy-keyboard-button-text-color, $-color-white) !default;
-$-keyboard-button-background: var(--oxy-keyboard--button-background, $-color-theme) !default;
-$-keyboard-button-active-opacity: var(--oxy-keyboard-button-active-opacity, 0.6) !default;
+$-keyboard-button-background: var(--oxy-keyboard-button-background, $-color-theme) !default;
+$-keyboard-button-active-opacity: var(--oxy-keyboard-button-active-opacity, $-opacity-disabled) !default;
 $-keyboard-background: var(--oxy-keyboard-background, $-color-gray-2) !default;
 $-keyboard-title-height: var(--oxy-keyboard-title-height, 68rpx) !default;
 $-keyboard-title-color: var(--oxy-keyboard-title-color, $-color-gray-7) !default;
-$-keyboard-title-font-size: var(--oxy-keyboard-title-font-size, 32rpx) !default;
-$-keyboard-close-padding: var(--oxy-keyboard-title-font-size, 0 32rpx) !default;
+$-keyboard-title-font-size: var(--oxy-keyboard-title-font-size, $-fs-title) !default;
+$-keyboard-close-padding: var(--oxy-keyboard-close-padding, 0 36rpx) !default;
 $-keyboard-close-color: var(--oxy-keyboard-close-color, $-color-theme) !default;
-$-keyboard-close-font-size: var(--oxy-keyboard-close-font-size, 28rpx) !default;
+$-keyboard-close-font-size: var(--oxy-keyboard-close-font-size, $-fs-content) !default;
 $-keyboard-icon-size: var(--oxy-keyboard-icon-size, 44rpx) !default;
-
-/* number-keyboard */
-$-number-keyboard-key-height: var(--oxy-number-keyboard-key-height, 96rpx) !default;
-$-number-keyboard-key-font-size: var(--oxy-number-keyboard-key-font-size, 56rpx) !default;
-$-number-keyboard-key-background: var(--oxy-number-keyboard-key-background, $-color-white) !default;
-$-number-keyboard-key-border-radius: var(--oxy-number-keyboard-key-border-radius, 16rpx) !default;
-$-number-keyboard-delete-font-size: var(--oxy-number-keyboard-delete-font-size, 32rpx) !default;
-$-number-keyboard-key-active-color: var(--oxy-number-keyboard-key-active-color, $-color-gray-3) !default;
-$-number-keyboard-button-text-color: var(--oxy-number-keyboard-button-text-color, $-color-white) !default;
-$-number-keyboard-button-background: var(--oxy-number-keyboard--button-background, $-color-theme) !default;
-$-number-keyboard-button-active-opacity: var(--oxy-number-keyboard-button-active-opacity, 0.6) !default;
-$-number-keyboard-background: var(--oxy-number-keyboard-background, $-color-gray-2) !default;
-$-number-keyboard-title-height: var(--oxy-number-keyboard-title-height, 68rpx) !default;
-$-number-keyboard-title-color: var(--oxy-number-keyboard-title-color, $-color-gray-7) !default;
-$-number-keyboard-title-font-size: var(--oxy-number-keyboard-title-font-size, 32rpx) !default;
-$-number-keyboard-close-padding: var(--oxy-number-keyboard-title-font-size, 0 32rpx) !default;
-$-number-keyboard-close-color: var(--oxy-number-keyboard-close-color, $-color-theme) !default;
-$-number-keyboard-close-font-size: var(--oxy-number-keyboard-close-font-size, 28rpx) !default;
-$-number-keyboard-icon-size: var(--oxy-number-keyboard-icon-size, 44rpx) !default;
+$-keyboard-panel-radius: var(--oxy-keyboard-panel-radius, $-radius-3xl) !default; // 键盘面板圆角
+$-keyboard-car-key-font-size: var(--oxy-keyboard-car-key-font-size, 36rpx) !default; // 车牌键盘字号
 
 /* passwod-input */
 $-password-input-height: var(--oxy-password-input-height, 100rpx);
 $-password-input-margin: var(--oxy-password-input-margin, 32rpx);
-$-password-input-font-size: var(--oxy-password-input-margin, 40rpx);
-$-password-input-radius: var(--oxy-password-input-radius, 12rpx);
+$-password-input-font-size: var(--oxy-password-input-font-size, 40rpx) !default;
+$-password-input-radius: var(--oxy-password-input-radius, $-radius-md);
 $-password-input-background: var(--oxy-password-input-background, #fff);
 $-password-input-info-color: var(--oxy-password-input-info-color, $-color-info);
 $-password-input-info-font-size: var(--oxy-password-input-info-font-size, $-fs-content);
@@ -957,7 +1104,7 @@ $-password-input-dot-size: var(--oxy-password-input-dot-size, 20rpx);
 $-password-input-dot-color: var(--oxy-password-input-dot-color, $-color-gray-8);
 $-password-input-text-color: var(--oxy-password-input-text-color, $-color-gray-8);
 $-password-input-cursor-color: var(--oxy-password-input-cursor-color, $-color-gray-8);
-$-password-input-cursor-width: var(--oxy-password-input-cursor-width, 1px);
+$-password-input-cursor-width: var(--oxy-password-input-cursor-width, $-border-width-base);
 $-password-input-cursor-height: var(--oxy-password-input-cursor-height, 40%);
 $-password-input-cursor-duration: var(--oxy-password-input-cursor-duration, 1s);
 
@@ -969,9 +1116,10 @@ $-form-item-error-message-line-height: var(--oxy-form-item-error-message-line-he
 /* backtop */
 $-backtop-bg: var(--oxy-backtop-bg, #e1e1e1) !default;
 $-backtop-icon-size: var(--oxy-backtop-icon-size, 40rpx) !default;
+$-backtop-square-radius: var(--oxy-backtop-square-radius, $-radius-sm) !default;
 
 /* index-bar */
-$-index-bar-index-font-size: var(--oxy-index-bar-index-font-size, $-fs-aid) !default;
+$-index-bar-index-font-size: var(--oxy-index-bar-index-font-size, $-fs-secondary) !default;
 
 /* text */
 $-text-info-color: var(--oxy-text-info-color, $-color-info) !default;
@@ -996,24 +1144,31 @@ $-video-preview-close-color: var(--oxy-video-preview-close-color, #fff) !default
 $-video-preview-close-font-size: var(--oxy-video-preview-close-font-size, 40rpx) !default; // 图标大小
 
 /* img-cropper */
+$-img-cropper-bg: var(--oxy-img-cropper-bg, rgba(0, 0, 0, 1)) !default; // 裁剪容器背景色
+$-img-cropper-wrapper-bg: var(--oxy-img-cropper-wrapper-bg, rgba(0, 0, 0, 0.45)) !default; // 裁剪层背景色
+$-img-cropper-mask-bg: var(--oxy-img-cropper-mask-bg, rgba(0, 0, 0, 0.85)) !default; // 遮罩背景色
+$-img-cropper-border-color: var(--oxy-img-cropper-border-color, $-color-white) !default; // 裁剪框边线颜色
+$-img-cropper-canvas-bg: var(--oxy-img-cropper-canvas-bg, $-color-white) !default; // 画布背景色
 $-img-cropper-icon-size: var(--oxy-img-cropper-icon-size, $-fs-big) !default; // 图标大小
 $-img-cropper-icon-color: var(--oxy-img-cropper-icon-color, #fff) !default; // 图标颜色
+$-img-cropper-action-fs: var(--oxy-img-cropper-action-fs, 32rpx) !default; // 操作按钮字号
+$-img-cropper-action-radius: var(--oxy-img-cropper-action-radius, $-radius-2xl) !default; // 操作按钮圆角
 
 /* floating-panel */
 $-floating-panel-bg: var(--oxy-floating-panel-bg, $-color-white) !default; // 背景色
-$-floating-panel-radius: var(--oxy-floating-panel-radius, 32rpx) !default; // 圆角
+$-floating-panel-radius: var(--oxy-floating-panel-radius, $-radius-2xl) !default; // 圆角
 $-floating-panel-z-index: var(--oxy-floating-panel-z-index, 99) !default; // 层级
 $-floating-panel-header-height: var(--oxy-floating-panel-header-height, 60rpx) !default; // 头部高度
 $-floating-panel-bar-width: var(--oxy-floating-panel-bar-width, 40rpx) !default; // bar 宽度
 $-floating-panel-bar-height: var(--oxy-floating-panel-bar-height, 6rpx) !default; // bar 高度
 $-floating-panel-bar-bg: var(--oxy-floating-panel-bar-bg, $-color-gray-5) !default; // bar 背景色
-$-floating-panel-bar-radius: var(--oxy-floating-panel-bar-radius, 8rpx) !default; // bar 圆角
+$-floating-panel-bar-radius: var(--oxy-floating-panel-bar-radius, $-radius-sm) !default; // bar 圆角
 $-floating-panel-content-bg: var(--oxy-floating-panel-content-bg, $-color-white) !default; // 内容背景色
 
 /* signature */
 $-signature-bg: var(--oxy-signature-bg, $-color-white) !default; // 背景色
-$-signature-radius: var(--oxy-signature-radius, 8rpx) !default; // 圆角
-$-signature-border: var(--oxy-signature-border, 1px solid $-color-gray-5) !default; // 边框圆角
+$-signature-radius: var(--oxy-signature-radius, $-radius-sm) !default; // 圆角
+$-signature-border: var(--oxy-signature-border, #{$-border-width-base} solid $-color-gray-5) !default; // 边框圆角
 $-signature-footer-margin-top: var(--oxy-signature-footer-margin-top, 16rpx) !default; // 底部按钮上边距
 $-signature-button-margin-left: var(--oxy-signature-button-margin-left, 16rpx) !default; // 底部按钮左边距
 
@@ -1023,14 +1178,16 @@ $-tree-node-current-bg:var(--oxy-tree-node-current-bg, #4d80ef1a);
 $-tree-node-current-color:var(--oxy-tree-node-current-color, $-color-theme);
 $-tree-node-disabled-color:var(--oxy-tree-node-disabled-color, $-color-icon-disabled);
 $-tree-search-input-color:var(--oxy-tree-search-input-color, #f6f6f6);
-$-tree-node-radius: var(--oxy-tree-node-radius, $-button-medium-radius);
+$-tree-search-input-radius: var(--oxy-tree-search-input-radius, $-radius-sm);
+$-tree-node-radius: var(--oxy-tree-node-radius, $-radius-sm);
 $-tree-node-font-size: var(--oxy-tree-node-font-size, $-fs-content);
 $-tree-node-padding-right: var(--oxy-tree-node-padding-right, $-size-side-padding-small);
 $-tree-node-icon-size: var(--oxy-tree-node-icon-size, $-fs-title);
 $-tree-node-icon-gap: var(--oxy-tree-node-icon-gap, 0);
 $-tree-node-icon-box-size: var(--oxy-tree-node-icon-box-size, 56rpx);
 $-tree-node-icon-color: var(--oxy-tree-node-icon-color, $-color-icon-disabled);
-$-tree-node-icon-active-color: var(--oxy-tree-node-icon-active-color, $-checkbox-checked-color);
+$-tree-node-icon-active-color: var(--oxy-tree-node-icon-active-color, $-color-theme);
+$-tree-disabled-opacity: var(--oxy-tree-disabled-opacity, $-opacity-disabled);
 
 /* rich-text */
 $-rich-text-primary-color: var(--oxy-rich-text-primary-color, $-color-content);
@@ -1051,6 +1208,13 @@ $-rich-text-code-bg: var(--oxy-rich-text-code-bg, #2d2d2d);
 $-rich-text-code-color: var(--oxy-rich-text-code-color, #f8f8f2);
 $-rich-text-editable-border-color: var(--oxy-rich-text-editable-border-color, #e9e9e9);
 $-rich-text-toolbox-bg: var(--oxy-rich-text-toolbox-bg, #ededed);
+$-rich-text-toolbox-bg-gradient: var(--oxy-rich-text-toolbox-bg-gradient, linear-gradient(180deg, #ffffff 0%, #fafafa 100%));
+$-rich-text-toolbox-shadow: var(--oxy-rich-text-toolbox-shadow, 0 2rpx 8rpx rgba(0, 0, 0, 0.03));
+$-rich-text-toolbox-icon-size: var(--oxy-rich-text-toolbox-icon-size, 36rpx);
+$-rich-text-toolbox-icon-radius: var(--oxy-rich-text-toolbox-icon-radius, $-radius-md);
+$-rich-text-toolbox-icon-hover-bg: var(--oxy-rich-text-toolbox-icon-hover-bg, rgba(0, 0, 0, 0.05));
+$-rich-text-toolbox-icon-active-bg: var(--oxy-rich-text-toolbox-icon-active-bg, rgba(0, 0, 0, 0.08));
+$-rich-text-emoji-fs: var(--oxy-rich-text-emoji-fs, 44rpx);
 $-rich-text-popup-divider-color: var(--oxy-rich-text-popup-divider-color, gray);
 
 /* date-strip */
@@ -1058,28 +1222,42 @@ $-date-strip-bg-color: var(--oxy-date-strip-bg-color, $-color-white);
 $-date-strip-height: var(--oxy-date-strip-height, 172rpx);
 $-date-strip-padding-x: var(--oxy-date-strip-padding-x, 0);
 $-date-strip-padding-y: var(--oxy-date-strip-padding-y, 16rpx);
-$-date-strip-font-size: var(--oxy-date-strip-font-size, 32rpx);
+$-date-strip-font-size: var(--oxy-date-strip-font-size, $-fs-title);
 $-date-strip-color: var(--oxy-date-strip-color, $-color-content);
 $-date-strip-prefix-color: var(--oxy-date-strip-prefix-color, $-font-gray-2);
-$-date-strip-prefix-font-size: var(--oxy-date-strip-prefix-font-size, 28rpx);
+$-date-strip-prefix-font-size: var(--oxy-date-strip-prefix-font-size, $-fs-content);
 $-date-strip-suffix-color: var(--oxy-date-strip-color, $-font-gray-2);
-$-date-strip-suffix-font-size: var(--oxy-date-strip-suffix-font-size, 28rpx);
+$-date-strip-suffix-font-size: var(--oxy-date-strip-suffix-font-size, $-fs-content);
 $-date-strip-active-color: var(--oxy-date-strip-active-color, $-color-theme);
-$-date-strip-square-radius: var(--oxy-date-strip-square-radius, 8rpx);
+$-date-strip-square-radius: var(--oxy-date-strip-square-radius, $-radius-sm);
 $-date-strip-grid-width: var(--oxy-date-strip-grid-width, 100rpx);
 $-date-strip-grid-square-padding-x: var(--oxy-date-strip-grid-square-padding-x, 0);
 $-date-strip-grid-square-padding-y: var(--oxy-date-strip-grid-square-padding-y, 12rpx);
-$-date-strip-grid-circle-radius: var(--oxy-date-strip-grid-circle-radius, 50%);
+$-date-strip-grid-circle-radius: var(--oxy-date-strip-grid-circle-radius, $-radius-circle);
 /* footer*/
-$--footer-padding: var(--oxy-footer-padding, 24rpx); // footer 内边距
-$--footer-bg: var(--oxy-footer-bg, $-color-white); // footer 背景色
+$-footer-padding: var(--oxy-footer-padding, $-spacing-24) !default; // footer 内边距
+$-footer-bg: var(--oxy-footer-bg, $-color-white) !default; // footer 背景色
 
 /* long-press-menu */
 $-long-press-menu-bg: var(--oxy-long-press-menu-bg, rgba(0, 0, 0, 0.8)) !default; // 背景色
 $-long-press-menu-padding: var(--oxy-long-press-menu-padding, 0 16rpx) !default; // 间距
-$-long-press-menu-radius: var(--oxy-long-press-menu-radius, 16rpx) !default; // 圆角大小
+$-long-press-menu-radius: var(--oxy-long-press-menu-radius, $-radius-lg) !default; // 圆角大小
 $-long-press-menu-color: var(--oxy-long-press-menu-color, $-color-white) !default; // 文字颜色
 $-long-press-menu-fs: var(--oxy-long-press-menu-fs, $-fs-content) !default; // 字号
 $-long-press-menu-arrow-size: var(--oxy-long-press-menu-arrow-size, 10rpx) !default; // 箭头大小
-$-long-press-menu-item-padding: var(--oxy-long-press-menu-padding, 24rpx 32rpx) !default; // 间距
+$-long-press-menu-item-padding: var(--oxy-long-press-menu-padding, $-spacing-24 $-spacing-32) !default; // 间距
 $-long-press-menu-z-index: var(--oxy-long-press-menu-z-index, 999) !default;
+$-long-press-menu-active-bg: var(--oxy-long-press-menu-active-bg, rgba(0, 0, 0, 0.05)) !default; // 触发态背景色
+$-long-press-menu-divider-color: var(--oxy-long-press-menu-divider-color, rgba(255, 255, 255, 0.2)) !default; // 分割线颜色
+$-virtual-scroll-back-top-bg: var(--oxy-virtual-scroll-back-top-bg, rgba(0, 0, 0, 0.6)) !default; // 回到顶部背景色
+
+/* guidance */
+$-guide-highlight-border-color: var(--oxy-guide-highlight-border-color, $-color-white) !default; // 高亮边框颜色
+$-guide-highlight-radius: var(--oxy-guide-highlight-radius, $-radius-sm) !default; // 高亮框圆角
+$-guide-tip-bg: var(--oxy-guide-tip-bg, $-color-theme) !default; // 引导提示背景色
+$-guide-tip-shadow: var(--oxy-guide-tip-shadow, 0 4rpx 18rpx 0 rgba(0, 0, 0, 0.1)) !default; // 引导提示阴影
+$-guide-tip-color: var(--oxy-guide-tip-color, $-color-white) !default; // 引导提示文字颜色
+$-guide-tip-radius: var(--oxy-guide-tip-radius, $-radius-md) !default; // 引导提示圆角
+$-guide-tip-action-bg: var(--oxy-guide-tip-action-bg, $-color-white) !default; // 引导按钮背景色
+$-guide-tip-action-color: var(--oxy-guide-tip-action-color, #666666) !default; // 引导按钮文字颜色
+$-guide-tip-action-radius: var(--oxy-guide-tip-action-radius, $-radius-sm) !default; // 引导按钮圆角