uview-pro 0.3.16 → 0.4.1

package/components/u-number-box/types.ts

@@ -7,8 +7,8 @@ import type { ExtractPropTypes, PropType } from 'vue';
 export const NumberBoxProps = {
     /** 输入框初始值（默认1） */
     modelValue: { type: Number, default: 1 },
-    /** 输入框和按钮的背景颜色（默认#F2F3F5） */
-    bgColor: { type: String, default: '#F2F3F5' },
+    /** 输入框和按钮的背景颜色（默认var(--u-bg-gray-light)） */
+    bgColor: { type: String, default: 'var(--u-bg-gray-light)' },
     /** 用户可输入的最小值（默认0） */
     min: { type: Number, default: 0 },
     /** 用户可输入的最大值（默认99999） */
@@ -19,8 +19,8 @@ export const NumberBoxProps = {
     disabled: { type: Boolean, default: false },
     /** 输入框文字和按钮字体大小，单位rpx（默认26） */
     size: { type: [Number, String] as PropType<number | string>, default: 26 },
-    /** 输入框文字和加减按钮图标的颜色（默认#323233） */
-    color: { type: String, default: '#323233' },
+    /** 输入框文字和加减按钮图标的颜色（默认var(--u-main-color)） */
+    color: { type: String, default: 'var(--u-main-color)' },
     /** 输入框宽度，单位rpx（默认80） */
     inputWidth: { type: [Number, String] as PropType<number | string>, default: 80 },
     /** 输入框和按钮的高度，单位rpx（默认50） */

package/components/u-number-box/u-number-box.vue

@@ -68,7 +68,7 @@ import { NumberBoxProps } from './types';
  * @description 该组件一般用于商城购物选择物品数量的场景。注意：该输入框只能输入大于或等于0的整数，不支持小数输入
  * @tutorial https://uviewpro.cn/zh/components/numberBox.html
  * @property {Number} modelValue 输入框初始值（默认1）
- * @property {String} bg-color 输入框和按钮的背景颜色（默认#F2F3F5）
+ * @property {String} bg-color 输入框和按钮的背景颜色（默认var(--u-bg-gray-light)）
  * @property {Number} min 用户可输入的最小值（默认0）
  * @property {Number} max 用户可输入的最大值（默认99999）
  * @property {Number} step 步长，每次加或减的值（默认1）
@@ -76,7 +76,7 @@ import { NumberBoxProps } from './types';
  * @property {Boolean} disabled-input 是否禁止输入框手动输入值（默认false）
  * @property {Boolean} positive-integer 是否只能输入正整数（默认true）
  * @property {String | Number} size 输入框文字和按钮字体大小，单位rpx（默认26）
- * @property {String} color 输入框文字和加减按钮图标的颜色（默认#323233）
+ * @property {String} color 输入框文字和加减按钮图标的颜色（默认var(--u-main-color)）
  * @property {String | Number} input-width 输入框宽度，单位rpx（默认80）
  * @property {String | Number} input-height 输入框和按钮的高度，单位rpx（默认50）
  * @property {String | Number} index 事件回调时用以区分当前发生变化的是哪个输入框
@@ -310,12 +310,12 @@ function handleChange(value: number, type: 'update:modelValue' | 'change' | 'blu
 }
 
 .u-icon-disabled {
-    color: #c8c9cc !important;
-    background: #f7f8fa !important;
+    color: var(--u-bg-gray-light) !important;
+    background: var(--u-bg-gray-light) !important;
 }
 
 .u-input-disabled {
-    color: #c8c9cc !important;
-    background-color: #f2f3f5 !important;
+    color: var(--u-bg-gray-light) !important;
+    background-color: var(--u-bg-gray-light) !important;
 }
 </style>

package/components/u-number-keyboard/u-number-keyboard.vue

@@ -166,7 +166,7 @@ function keyboardClick(val: string | number) {
     flex: 0 0 33.3333333333%;
     text-align: center;
     font-size: 50rpx;
-    color: #333;
+    color: var(--u-main-color);
     @include vue-flex;
     align-items: center;
     justify-content: center;
@@ -183,6 +183,6 @@ function keyboardClick(val: string | number) {
 }
 
 .u-keyboard-hover {
-    background-color: #e7e6eb;
+    background-color: var(--u-divider-color);
 }
 </style>

package/components/u-picker/u-picker.vue

@@ -167,7 +167,7 @@ import { PickerProps } from './types';
  * @property {String Number} end-year 可选的结束年份，mode=time时有效（默认2050）
  * @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配（默认false）
  * @property {Boolean} show-time-tag 时间模式时，是否显示后面的年月日中文提示
- * @property {String} cancel-color 取消按钮的颜色（默认#606266）
+ * @property {String} cancel-color 取消按钮的颜色（默认var(--u-content-color)）
  * @property {String} confirm-color 确认按钮的颜色（默认主题色primary）
  * @property {String} default-time 默认选中的时间，mode=time时有效
  * @property {String} confirm-text 确认按钮的文字
@@ -773,14 +773,14 @@ onMounted(() => {
     align-items: center;
     box-sizing: border-box;
     font-size: 30rpx;
-    background: #fff;
+    background-color: var(--u-bg-white);
     position: relative;
 }
 
 .u-picker-header::after {
     content: '';
     position: absolute;
-    border-bottom: 1rpx solid #eaeef1;
+    border-bottom: 1rpx solid var(--u-bg-gray-light);
     -webkit-transform: scaleY(0.5);
     transform: scaleY(0.5);
     bottom: 0;
@@ -796,7 +796,7 @@ onMounted(() => {
     width: 100%;
     height: 500rpx;
     overflow: hidden;
-    background-color: #fff;
+    background-color: var(--u-bg-white);
 }
 
 .u-column-item {

package/components/u-popup/types.ts

@@ -41,7 +41,7 @@ export const PopupProps = {
     /** 自定义关闭图标位置，top-left为左上角，top-right为右上角，bottom-left为左下角，bottom-right为右下角 */
     closeIconPos: { type: String as PropType<PopupCloseIconPos>, default: 'top-right' },
     /** 关闭图标的颜色 */
-    closeIconColor: { type: String, default: '#909399' },
+    closeIconColor: { type: String, default: 'var(--u-tips-color)' },
     /** 关闭图标的大小，单位rpx */
     closeIconSize: { type: [String, Number] as PropType<number | string>, default: '30' },
     /** 弹窗宽度 */

package/components/u-popup/u-popup.vue

@@ -92,7 +92,7 @@ import { PopupProps } from './types';
  * @property {Boolean} closeable 是否显示关闭图标（默认false）
  * @property {String} close-icon 关闭图标的名称，只能uView的内置图标
  * @property {String} close-icon-pos 自定义关闭图标位置（默认top-right）
- * @property {String} close-icon-color 关闭图标的颜色（默认#909399）
+ * @property {String} close-icon-color 关闭图标的颜色（默认var(--u-tips-color)）
  * @property {Number | String} close-icon-size 关闭图标的大小，单位rpx（默认30）
  * @event {Function} open 弹出层打开
  * @event {Function} close 弹出层收起
@@ -293,28 +293,28 @@ function change(param1: 'showDrawer' | 'visibleSync', param2: 'visibleSync' | 's
     top: 0;
     bottom: 0;
     left: 0;
-    background-color: #ffffff;
+    background-color: var(--u-bg-white);
 }
 
 .u-drawer-right {
     right: 0;
     top: 0;
     bottom: 0;
-    background-color: #ffffff;
+    background-color: var(--u-bg-white);
 }
 
 .u-drawer-top {
     top: 0;
     left: 0;
     right: 0;
-    background-color: #ffffff;
+    background-color: var(--u-bg-white);
 }
 
 .u-drawer-bottom {
     bottom: 0;
     left: 0;
     right: 0;
-    background-color: #ffffff;
+    background-color: var(--u-bg-white);
 }
 
 .u-drawer-center {
@@ -337,7 +337,7 @@ function change(param1: 'showDrawer' | 'visibleSync', param2: 'visibleSync' | 's
     display: block;
     /* #endif */
     position: relative;
-    background-color: #ffffff;
+    background-color: var(--u-bg-white);
 }
 
 .u-drawer-content-visible.u-drawer-center {

package/components/u-radio/u-radio.vue

@@ -136,7 +136,7 @@ const iconStyle = computed(() => {
     return style;
 });
 
-const iconColor = computed(() => (props.name == parentData.value.value ? '#ffffff' : 'transparent'));
+const iconColor = computed(() => (props.name == parentData.value.value ? 'var(--u-white-color)' : 'transparent'));
 
 const iconClass = computed(() => {
     let classes: string[] = [];
@@ -230,7 +230,7 @@ function setRadioCheckedStatus() {
         text-align: center;
         transition-property: color, border-color, background-color;
         font-size: 20px;
-        border: 1px solid #c8c9cc;
+        border: 1px solid var(--u-border-color);
         transition-duration: 0.2s;
 
         /* #ifdef MP-TOUTIAO */
@@ -249,18 +249,18 @@ function setRadioCheckedStatus() {
         }
 
         &--checked {
-            color: #fff;
+            color: var(--u-white-color);
             background-color: $u-type-primary;
             border-color: $u-type-primary;
         }
 
         &--disabled {
-            background-color: #ebedf0;
-            border-color: #c8c9cc;
+            background-color: var(--u-bg-gray-light);
+            border-color: var(--u-border-color);
         }
 
         &--disabled--checked {
-            color: #c8c9cc !important;
+            color: var(--u-bg-gray-light) !important;
         }
     }
 
@@ -272,7 +272,7 @@ function setRadioCheckedStatus() {
         font-size: 30rpx;
 
         &--disabled {
-            color: #c8c9cc;
+            color: var(--u-bg-gray-light);
         }
     }
 }

package/components/u-rate/types.ts

@@ -18,9 +18,9 @@ export const RateProps = {
     /** 星星的大小，单位rpx */
     size: { type: [Number, String] as PropType<number | string>, default: 32 },
     /** 未选中时的颜色 */
-    inactiveColor: { type: String, default: '#b2b2b2' },
+    inactiveColor: { type: String, default: 'var(--u-light-color)' },
     /** 选中的颜色 */
-    activeColor: { type: String, default: '#FA3534' },
+    activeColor: { type: String, default: 'var(--u-type-error)' },
     /** 星星之间的间距，单位rpx */
     gutter: { type: [Number, String] as PropType<number | string>, default: 10 },
     /** 最少能选择的星星个数 */

package/components/u-rate/u-rate.vue

@@ -50,8 +50,8 @@ import { RateProps } from './types';
  * @property {String|Number} current 默认选中的星星数量（默认0）
  * @property {Boolean} disabled 是否禁止用户操作（默认false）
  * @property {String|Number} size 星星的大小，单位rpx（默认32）
- * @property {String} inactive-color 未选中星星的颜色（默认#b2b2b2）
- * @property {String} active-color 选中的星星颜色（默认#FA3534）
+ * @property {String} inactive-color 未选中星星的颜色（默认var(--u-light-color)）
+ * @property {String} active-color 选中的星星颜色（默认var(--u-type-error)）
  * @property {String} active-icon 选中时的图标名，只能为uView的内置图标（默认star-fill）
  * @property {String} inactive-icon 未选中时的图标名，只能为uView的内置图标（默认star）
  * @property {String|Number} gutter 星星之间的距离（默认10）

package/components/u-read-more/types.ts

@@ -24,7 +24,7 @@ export const ReadMoreProps = {
     shadowStyle: {
         type: Object as PropType<Record<string, any>>,
         default: () => ({
-            backgroundImage: 'linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)',
+            backgroundImage: 'linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, var(--u-bg-white) 80%)',
             paddingTop: '300rpx',
             marginTop: '-300rpx'
         })

package/components/u-row-notice/u-row-notice.vue

@@ -99,7 +99,7 @@ const showText = ref(''); // 显示的文本
 const computeColor = computed(() => {
     if (props.color) return props.color;
     // 如果是无主题，就默认使用content-color
-    else if (props.type === 'none') return '#606266';
+    else if (props.type === 'none') return 'var(--u-content-color)';
     else return props.type;
 });
 
@@ -109,7 +109,7 @@ const computeColor = computed(() => {
 const textStyle = computed(() => {
     const style: Record<string, any> = {};
     if (props.color) style.color = props.color;
-    else if (props.type === 'none') style.color = '#606266';
+    else if (props.type === 'none') style.color = 'var(--u-content-color)';
     style.fontSize = props.fontSize + 'rpx';
     return style;
 });

package/components/u-search/types.ts

@@ -10,8 +10,8 @@ export const SearchProps = {
     ...baseProps,
     /** 搜索框形状，round-圆形，square-方形 */
     shape: { type: String as PropType<SearchShape>, default: 'round' },
-    /** 搜索框背景色，默认值#f2f2f2 */
-    bgColor: { type: String, default: '#f2f2f2' },
+    /** 搜索框背景色，默认值var(--u-bg-gray-light) */
+    bgColor: { type: String, default: 'var(--u-bg-gray-light)' },
     /** 占位提示文字 */
     placeholder: { type: String, default: '请输入关键字' },
     /** 是否启用清除控件 */
@@ -43,9 +43,9 @@ export const SearchProps = {
     /** 搜索图标的颜色，默认同输入框字体颜色 */
     searchIconColor: { type: String, default: '' },
     /** 输入框字体颜色 */
-    color: { type: String, default: '#606266' },
+    color: { type: String, default: 'var(--u-content-color)' },
     /** placeholder的颜色 */
-    placeholderColor: { type: String, default: '#909399' },
+    placeholderColor: { type: String, default: 'var(--u-tips-color)' },
     /** 组件与其他上下左右元素之间的距离，带单位的字符串形式，如"30rpx"、"30rpx 20rpx"等写法 */
     margin: { type: String, default: '0' },
     /** 左边输入框的图标，可以为uView图标名称或图片路径 */

package/components/u-search/u-search.vue

@@ -47,7 +47,7 @@
                 ]"
             />
             <view class="u-close-wrap" v-if="keyword && clearabled && focused" @tap="clear">
-                <u-icon class="u-clear-icon" name="close-circle-fill" size="34" color="#c0c4cc"></u-icon>
+                <u-icon class="u-clear-icon" name="close-circle-fill" size="34" color="var(--u-light-color)"></u-icon>
             </view>
         </view>
         <view
@@ -84,7 +84,7 @@ import { $u } from '../..';
  * @description 搜索组件，集成了常见搜索框所需功能，用户可以一键引入，开箱即用。
  * @tutorial https://uviewpro.cn/zh/components/search.html
  * @property {String} shape 搜索框形状，round-圆形，square-方形（默认round）
- * @property {String} bg-color 搜索框背景颜色（默认#f2f2f2）
+ * @property {String} bg-color 搜索框背景颜色（默认var(--u-bg-gray-light)）
  * @property {String} border-color 边框颜色，配置了颜色，才会有边框
  * @property {String} placeholder 占位文字内容（默认“请输入关键字”）
  * @property {Boolean} clearabled 是否启用清除控件（默认true）
@@ -96,8 +96,8 @@ import { $u } from '../..';
  * @property {Object} input-style 自定义输入框样式，对象形式
  * @property {Boolean} disabled 是否启用输入框（默认false）
  * @property {String} search-icon-color 搜索图标的颜色，默认同输入框字体颜色
- * @property {String} color 输入框字体颜色（默认#606266）
- * @property {String} placeholder-color placeholder的颜色（默认#909399）
+ * @property {String} color 输入框字体颜色（默认var(--u-content-color)）
+ * @property {String} placeholder-color placeholder的颜色（默认var(--u-tips-color)）
  * @property {String} search-icon 输入框左边的图标，可以为uView图标名称或图片路径
  * @property {String} margin 组件与其他上下左右元素之间的距离，带单位的字符串形式，如"30rpx"
  * @property {Boolean} animation 是否开启动画，见上方说明（默认false）

package/components/u-section/types.ts

@@ -20,9 +20,9 @@ export const SectionProps = {
     /** 主标题是否加粗 */
     bold: { type: Boolean, default: true },
     /** 主标题的颜色 */
-    color: { type: String, default: '#303133' },
+    color: { type: String, default: 'var(--u-main-color)' },
     /** 右边副标题的颜色 */
-    subColor: { type: String, default: '#909399' },
+    subColor: { type: String, default: 'var(--u-tips-color)' },
     /** 是否显示左边的竖条 */
     showLine: { type: Boolean, default: true },
     /** 左边竖线的颜色 */

package/components/u-section/u-section.vue

@@ -79,8 +79,8 @@ import { $u } from '../..';
  * @property {Boolean} arrow 是否显示右边箭头（默认true）
  * @property {String|Number} fontSize 主标题的字体大小（默认28）
  * @property {Boolean} bold 主标题是否加粗（默认true）
- * @property {String} color 主标题颜色（默认#303133）
- * @property {String} subColor 右边副标题颜色（默认#909399）
+ * @property {String} color 主标题颜色（默认var(--u-main-color)）
+ * @property {String} subColor 右边副标题颜色（默认var(--u-tips-color)）
  * @property {String} lineColor 左边竖线的颜色
  * @event click 组件右侧的内容被点击时触发，用于跳转"更多"
  * @example <u-section title="今日热门" :right="false"></u-section>

package/components/u-select/u-select.vue

@@ -6,7 +6,7 @@
 		<view class="u-select__action__icon" :class="{
 			'u-select__action__icon--reverse': value == true
 		}">
-			<u-icon name="arrow-down-fill" size="26" color="#c0c4cc"></u-icon>
+			<u-icon name="arrow-down-fill" size="26" color="var(--u-light-color)"></u-icon>
 		</view>
 	</view> -->
         <u-popup
@@ -94,7 +94,7 @@ import { $u } from '../..';
  * @property {Array} list 列数据，数组形式，见官网说明
  * @property {Boolean} v-model 布尔值变量，用于控制选择器的弹出与收起
  * @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配(默认false)
- * @property {String} cancel-color 取消按钮的颜色（默认#606266）
+ * @property {String} cancel-color 取消按钮的颜色（默认var(--u-content-color)）
  * @property {String} confirm-color 确认按钮的颜色(默认主题色primary)
  * @property {String} confirm-text 确认按钮的文字
  * @property {String} cancel-text 取消按钮的文字
@@ -363,8 +363,8 @@ function is2DList(list: SelectListItem[] | SelectListItem[][]): list is SelectLi
 .u-select {
     &__action {
         position: relative;
-        line-height: $u-form-item-height;
-        height: $u-form-item-height;
+        line-height: 70rpx;
+        height: 70rpx;
 
         &__icon {
             position: absolute;
@@ -383,7 +383,7 @@ function is2DList(list: SelectListItem[] | SelectListItem[][]): list is SelectLi
     &--border {
         border-radius: 6rpx;
         border-radius: 4px;
-        border: 1px solid $u-form-item-border-color;
+        border: 1px solid $u-border-color;
     }
 
     &__header {
@@ -406,7 +406,7 @@ function is2DList(list: SelectListItem[] | SelectListItem[][]): list is SelectLi
         width: 100%;
         height: 500rpx;
         overflow: hidden;
-        background-color: #fff;
+        background-color: var(--u-bg-white);
 
         &__picker-view {
             height: 100%;

package/components/u-skeleton/types.ts

@@ -8,9 +8,9 @@ import { baseProps } from '../common/props';
 export const SkeletonProps = {
     ...baseProps,
     /** 骨架块状元素的背景颜色 */
-    elColor: { type: String, default: '#e5e5e5' },
+    elColor: { type: String, default: 'var(--u-divider-color)' },
     /** 整个骨架屏页面的背景颜色 */
-    bgColor: { type: String, default: '#ffffff' },
+    bgColor: { type: String, default: 'var(--u-bg-white)' },
     /** 是否显示加载动画 */
     animation: { type: Boolean, default: false },
     /** 圆角值，只对类名为u-skeleton-fillet的元素生效 */

package/components/u-skeleton/u-skeleton.vue

@@ -43,8 +43,8 @@ import { SkeletonProps } from './types';
  * skeleton 骨架屏
  * @description 骨架屏一般用于页面在请求远程数据尚未完成时，页面用灰色块预显示本来的页面结构，给用户更好的体验。
  * @tutorial https://uviewpro.cn/zh/components/skeleton.html
- * @property {String} elColor 骨架块状元素的背景颜色（默认#e5e5e5）
- * @property {String} bgColor 骨架组件背景颜色（默认#ffffff）
+ * @property {String} elColor 骨架块状元素的背景颜色（默认var(--u-divider-color)）
+ * @property {String} bgColor 骨架组件背景颜色（默认var(--u-bg-white)）
  * @property {Boolean} animation 骨架块是否显示动画效果（默认false）
  * @property {String|Number} borderRadius u-skeleton-fillet类名元素，对应的骨架块的圆角大小，单位rpx（默认10）
  * @property {Boolean} loading 是否显示骨架组件，请求完成后，将此值设置为false（默认true）

package/components/u-slider/types.ts

@@ -27,7 +27,7 @@ export const SliderProps = {
     /** 进度条的背景颜色 */
     inactiveColor: { type: String, default: () => getColor('lightColor') },
     /** 滑块的背景颜色 */
-    blockColor: { type: String, default: '#ffffff' },
+    blockColor: { type: String, default: 'var(--u-bg-white)' },
     /** 用户对滑块的自定义颜色 */
     blockStyle: { type: Object as PropType<Record<string, any>>, default: () => ({}) }
 };

package/components/u-slider/u-slider.vue

@@ -65,9 +65,9 @@ import { SliderProps } from './types';
  * @property {Number | String} step 步长（默认1）
  * @property {Number | String} blockWidth 滑块宽度，高等于宽（30）
  * @property {Number | String} height 滑块条高度，单位rpx（默认6）
- * @property {String} inactiveColor 底部条背景颜色（默认#c0c4cc）
+ * @property {String} inactiveColor 底部条背景颜色（默认var(--u-light-color)）
  * @property {String} activeColor 底部选择部分的背景颜色（默认主题色primary）
- * @property {String} blockColor 滑块颜色（默认#ffffff）
+ * @property {String} blockColor 滑块颜色（默认var(--u-bg-white)）
  * @property {Object} blockStyle 给滑块自定义样式，对象形式
  * @property {Boolean} disabled 是否禁用滑块(默认为false)
  * @event start 滑动触发
@@ -213,7 +213,7 @@ function onClick(event: any) {
 .u-slider {
     position: relative;
     border-radius: 999px;
-    background-color: #ebedf0;
+    background-color: var(--u-bg-gray-light);
 }
 
 .u-slider:before {
@@ -238,7 +238,7 @@ function onClick(event: any) {
     height: 24px;
     border-radius: 50%;
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
-    background-color: #fff;
+    background-color: var(--u-bg-white);
     cursor: pointer;
 }
 

package/components/u-step/u-step.vue

@@ -14,7 +14,7 @@
                 <view v-else class="u-steps__item__num--circle">
                     <slot name="icon">
                         <view class="u-steps__item__num--icon" :style="numberStyle(childIndex)">
-                            <u-icon size="22" color="#ffffff" :name="iconName"></u-icon>
+                            <u-icon size="22" color="var(--u-white-color)" :name="iconName"></u-icon>
                         </view>
                     </slot>
                 </view>
@@ -119,7 +119,7 @@ const iconName = computed(() => {
 
 // 计算当前步骤的样式
 const numberStyle = (index: number) => ({
-    backgroundColor: currentIndex.value < index ? '#fff' : activeColor.value,
+    backgroundColor: currentIndex.value < index ? 'var(--u-white-color)' : activeColor.value,
     borderColor: currentIndex.value < index ? unActiveColor.value : activeColor.value
 });
 
@@ -149,7 +149,7 @@ $u-steps-item-dot-width: 20rpx;
     position: relative;
     min-width: 100rpx;
     font-size: 26rpx;
-    color: #8799a3;
+    color: var(--u-tips-color);
     @include vue-flex;
     flex-direction: column;
 
@@ -222,7 +222,7 @@ $u-steps-item-dot-width: 20rpx;
         }
         &--text,
         &--icon {
-            border: 1px solid #8799a3;
+            border: 1px solid var(--u-tips-color);
             border-radius: 50%;
         }
     }

package/components/u-steps/u-steps.vue

@@ -20,7 +20,7 @@
                     <text v-if="currentIndex < index" :style="textStyle(index)">
                         {{ index + 1 }}
                     </text>
-                    <u-icon v-else size="22" color="#ffffff" :name="icon"></u-icon>
+                    <u-icon v-else size="22" color="var(--u-white-color)" :name="icon"></u-icon>
                 </view>
                 <view class="u-steps__item__dot" v-if="mode == 'dot'" :style="dotStyle(index)"></view>
                 <text class="u-line-1" :style="textStyle(index)" :class="['u-steps__item__text--' + direction]">
@@ -66,9 +66,9 @@ import { $u, useParent } from '../..';
  * @property {String} direction row-横向，column-竖向（默认row）
  * @property {Number|String} current 设置当前处于第几步
  * @property {String} activeColor 已完成步骤的激活颜色，如设置，type值会失效
- * @property {String} unActiveColor 未激活的颜色，用于表示未完成步骤的颜色（默认#606266）
+ * @property {String} unActiveColor 未激活的颜色，用于表示未完成步骤的颜色（默认var(--u-content-color)）
  * @property {String} icon 自定义图标
- * @example <u-steps :list="numList" active-color="#fa3534"></u-steps>
+ * @example <u-steps :list="numList" active-color="var(--u-type-error)"></u-steps>
  */
 
 const props = defineProps(StepsProps);

package/components/u-sticky/types.ts

@@ -16,7 +16,7 @@ export const StickyProps = {
     /** h5顶部导航栏的高度 */
     h5NavHeight: { type: [Number, String] as PropType<number | string>, default: 44 },
     /** 吸顶区域的背景颜色 */
-    bgColor: { type: String, default: '#ffffff' },
+    bgColor: { type: String, default: 'var(--u-bg-white)' },
     /** z-index值 */
     zIndex: { type: [Number, String] as PropType<number | string>, default: '' }
 };

package/components/u-sticky/u-sticky.vue

@@ -54,7 +54,7 @@ import { StickyProps } from './types';
  * @property {String|Number} offsetTop 吸顶时与顶部的距离，单位rpx（默认0）
  * @property {String|Number} index 自定义标识，用于区分是哪一个组件
  * @property {Boolean} enable 是否开启吸顶功能（默认true）
- * @property {String} bgColor 组件背景颜色（默认#ffffff）
+ * @property {String} bgColor 组件背景颜色（默认var(--u-bg-white)）
  * @property {String|Number} zIndex 吸顶时的z-index值（默认970）
  * @property {String|Number} h5NavHeight 导航栏高度，自定义导航栏时(无导航栏时需设置为0)，需要传入此值，单位px（默认44）
  * @event fixed 组件吸顶时触发

package/components/u-subsection/types.ts

@@ -14,9 +14,9 @@ export const SubsectionProps = {
     /** 当前活动的tab的index */
     current: { type: [Number, String] as PropType<number | string>, default: 0 },
     /** 激活的颜色 */
-    activeColor: { type: String, default: '#303133' },
+    activeColor: { type: String, default: 'var(--u-main-color)' },
     /** 未激活的颜色 */
-    inactiveColor: { type: String, default: '#606266' },
+    inactiveColor: { type: String, default: 'var(--u-content-color)' },
     /** 模式选择，mode=button为按钮形式，mode=subsection时为分段模式 */
     mode: { type: String as PropType<SubsectionMode>, default: 'button' },
     /** 字体大小，单位rpx */
@@ -28,9 +28,9 @@ export const SubsectionProps = {
     /** 激活tab的字体是否加粗 */
     bold: { type: Boolean, default: true },
     /** mode=button时，组件背景颜色 */
-    bgColor: { type: String, default: '#eeeeef' },
+    bgColor: { type: String, default: 'var(--u-divider-color)' },
     /** mode = button时，滑块背景颜色 */
-    buttonColor: { type: String, default: '#ffffff' },
+    buttonColor: { type: String, default: 'var(--u-bg-white)' },
     /** 在切换分段器的时候，是否让设备震一下 */
     vibrateShort: { type: Boolean, default: false }
 };

package/components/u-subsection/u-subsection.vue

@@ -38,18 +38,18 @@ import { SubsectionProps } from './types';
  * @tutorial https://uviewpro.cn/zh/components/subsection.html
  * @property {Array} list 选项的数组，形式见上方"基本使用"
  * @property {String | Number} current 初始化时默认选中的选项索引值（默认0）
- * @property {String} activeColor 激活时的颜色，mode为subsection时固定为白色（默认#303133）
- * @property {String} inactiveColor 未激活时字体的颜色，mode为subsection时无效（默认#606266）
+ * @property {String} activeColor 激活时的颜色，mode为subsection时固定为白色（默认var(--u-main-color)）
+ * @property {String} inactiveColor 未激活时字体的颜色，mode为subsection时无效（默认var(--u-content-color)）
  * @property {String} mode 模式选择，见官网"模式选择"说明（默认button）
  * @property {String | Number} fontSize 字体大小，单位rpx（默认28）
  * @property {String | Number} height 组件高度，单位rpx（默认70）
  * @property {Boolean} animation 是否开启动画效果，见上方说明（默认true）
  * @property {Boolean} bold 激活选项的字体是否加粗（默认true）
- * @property {String} bgColor 组件背景颜色，mode为button时有效（默认#eeeeef）
- * @property {String} buttonColor 按钮背景颜色，mode为button时有效（默认#ffffff）
+ * @property {String} bgColor 组件背景颜色，mode为button时有效（默认var(--u-divider-color)）
+ * @property {String} buttonColor 按钮背景颜色，mode为button时有效（默认var(--u-bg-white)）
  * @property {Boolean} vibrateShort 在切换分段器的时候，是否让设备震一下（默认false）
  * @event {Function} change 分段器选项发生改变时触发
- * @example <u-subsection active-color="#ff9900"></u-subsection>
+ * @example <u-subsection active-color="var(--u-type-warning)"></u-subsection>
  */
 
 interface ListItem {
@@ -67,7 +67,7 @@ const listInfo = ref<ListItem[]>([]);
 const itemBgStyle = ref<{ [key: string]: any }>({
     width: 0,
     left: 0,
-    backgroundColor: '#ffffff',
+    backgroundColor: 'var(--u-bg-white)',
     height: '100%',
     transition: ''
 });
@@ -152,7 +152,7 @@ const textStyle = computed<(index: number) => Record<string, any>>(() => {
         const style: Record<string, any> = {};
         // 设置字体颜色
         if (props.mode === 'subsection') {
-            style.color = index === currentIndex.value ? '#ffffff' : props.activeColor;
+            style.color = index === currentIndex.value ? 'var(--u-white-color)' : props.activeColor;
         } else {
             style.color = index === currentIndex.value ? props.activeColor : props.inactiveColor;
         }

package/components/u-swipe-action/types.ts

@@ -32,7 +32,7 @@ export const SwipeActionProps = {
     /** 组件背景颜色 */
     bgColor: {
         type: String,
-        default: '#ffffff'
+        default: 'var(--u-bg-white)'
     },
     /** 是否使手机发生短促震动，目前只在iOS的微信小程序有效(2020-05-06) */
     vibrateShort: {