@didaoktv/didaoui-uniapp 1.2.2 → 1.3.0

package/components/dd-cropper/dd-cropper.vue

@@ -355,6 +355,8 @@
 								expWidth = this.expWidth,
 									expHeight = this.expHeight;
 
+								// 立即模式画布：清掉裁剪大图再画导出小图，防止透明像素透出底图
+								ctxCanvas.clearRect(0, 0, this.windowWidth, this.windowHeight);
 								await ctxCanvas.drawImage(r, 0, 0, expWidth, expHeight);
 								ctxCanvas.draw(false, () => {
 									ctxCanvas.toTempFilePath({
@@ -444,6 +446,8 @@
 								expWidth = this.expWidth,
 									expHeight = this.expHeight;
 
+								// 立即模式画布：清掉裁剪大图再画导出小图，防止透明像素透出底图
+								ctxCanvas.clearRect(0, 0, this.windowWidth, this.windowHeight);
 								await ctxCanvas.drawImage(r, 0, 0, expWidth, expHeight);
 								ctxCanvas.draw(false, () => {
 									ctxCanvas.toTempFilePath({
@@ -570,14 +574,17 @@
 				this.useHeight = useHeight;
 
 				let style = this.selStyle,
-					left = parseInt(style.left),
-					top = parseInt(style.top),
-					width = parseInt(style.width),
-					height = parseInt(style.height),
-					ctxCanvas = this.ctxCanvas,
-					ctxCanvasOper = this.ctxCanvasOper;
+				left = parseInt(style.left),
+				top = parseInt(style.top),
+				width = parseInt(style.width),
+				height = parseInt(style.height),
+				ctxCanvas = this.ctxCanvas,
+				ctxCanvasOper = this.ctxCanvasOper;
 
-				ctxCanvasOper.setLineWidth(3);
+			// H5/小程序 type=2d 为立即模式画布，重绘遮罩前须清掉上一帧，否则拖控制点时遮罩残留
+			ctxCanvasOper.clearRect(0, 0, this.windowWidth, this.windowHeight);
+
+			ctxCanvasOper.setLineWidth(3);
 				ctxCanvasOper.setStrokeStyle('grey');
 				ctxCanvasOper.setGlobalAlpha(0.4);
 				ctxCanvasOper.setFillStyle('black');
@@ -627,22 +634,30 @@
 				this.$emit("avtinit");
 			},
 			async drawImage() {
-				await this.initCanvasRefs();
-				let tm_now = Date.now();
-				if (tm_now - this.drawTm < 20) return;
-				this.drawTm = tm_now;
-				let ctxCanvas = this.ctxCanvas;
-				if (this.fillColor && this.fillColor !== 'transparent') {
-					ctxCanvas.fillRect(0, 0, this.windowWidth, this.windowHeight - tabHeight);
-				}
-				ctxCanvas.save();
-				ctxCanvas.translate(this.posWidth + this.useWidth / 2, this.posHeight + this.useHeight / 2);
-				ctxCanvas.scale(this.scaleSize, this.scaleSize);
-				ctxCanvas.rotate(this.rotateDeg * Math.PI / 180);
-				await ctxCanvas.drawImage(this.imgPath, -this.useWidth / 2, -this.useHeight / 2, this.useWidth, this.useHeight);
-				ctxCanvas.restore();
-				ctxCanvas.draw(false);
-			},
+			await this.initCanvasRefs();
+			let tm_now = Date.now();
+			if (tm_now - this.drawTm < 20) return;
+			this.drawTm = tm_now;
+			let ctxCanvas = this.ctxCanvas;
+			// 图片对象先取回（dd-canvas 内部有缓存，二次绘制走同步路径）；
+			// 加载期间若新帧已触发（token 失配）则丢弃本帧，避免旧帧续体把图片画回旧位置
+			const token = this._drawToken = (this._drawToken || 0) + 1;
+			const image = await ctxCanvas.loadImage(this.imgPath).catch(() => null);
+			if (!image || token !== this._drawToken) return;
+			// H5/小程序 type=2d 为立即模式画布，ctx.draw() 在 dd-canvas 内是 no-op，
+			// 上一帧像素不会自动清空——拖动残影的根因，每帧必须先 clearRect
+			ctxCanvas.clearRect(0, 0, this.windowWidth, this.windowHeight);
+			if (this.fillColor && this.fillColor !== 'transparent') {
+				ctxCanvas.fillRect(0, 0, this.windowWidth, this.windowHeight - tabHeight);
+			}
+			ctxCanvas.save();
+			ctxCanvas.translate(this.posWidth + this.useWidth / 2, this.posHeight + this.useHeight / 2);
+			ctxCanvas.scale(this.scaleSize, this.scaleSize);
+			ctxCanvas.rotate(this.rotateDeg * Math.PI / 180);
+			ctxCanvas.drawImage(image, -this.useWidth / 2, -this.useHeight / 2, this.useWidth, this.useHeight);
+			ctxCanvas.restore();
+			ctxCanvas.draw(false);
+		},
 			hideImg() {
 				this.prvImg = '';
 				this.prvTop = '-10000px';
@@ -681,23 +696,25 @@
 						this.prvImgTmp = r = r.tempFilePath;
 
 						let ctxCanvasPrv = this.ctxCanvasPrv,
-							prvX = this.windowWidth,
-							prvY = parseInt(this.cvsStyleHeight),
-							prvWidth = parseInt(this.selStyle.width),
-							prvHeight = parseInt(this.selStyle.height),
-							useWidth = prvX - 40,
-							useHeight = prvY - 80,
-							radio = useWidth / prvWidth,
-							rHeight = prvHeight * radio;
-						if (rHeight < useHeight) {
-							prvWidth = useWidth;
-							prvHeight = rHeight;
-						} else {
-							radio = useHeight / prvHeight;
-							prvWidth *= radio;
-							prvHeight = useHeight;
-						}
-						if (this.fillColor && this.fillColor !== 'transparent') {
+						prvX = this.windowWidth,
+						prvY = parseInt(this.cvsStyleHeight),
+						prvWidth = parseInt(this.selStyle.width),
+						prvHeight = parseInt(this.selStyle.height),
+						useWidth = prvX - 40,
+						useHeight = prvY - 80,
+						radio = useWidth / prvWidth,
+						rHeight = prvHeight * radio;
+					// 立即模式画布：清掉上一次预览的残影再画新帧
+					ctxCanvasPrv.clearRect(0, 0, this.windowWidth, this.windowHeight);
+					if (rHeight < useHeight) {
+						prvWidth = useWidth;
+						prvHeight = rHeight;
+					} else {
+						radio = useHeight / prvHeight;
+						prvWidth *= radio;
+						prvHeight = useHeight;
+					}
+					if (this.fillColor && this.fillColor !== 'transparent') {
 							ctxCanvasPrv.setFillStyle(this.fillColor);
 							ctxCanvasPrv.fillRect(0, 0, prvX, prvY);
 							ctxCanvasPrv.fillRect(x, y, width, height);

package/components/dd-date-picker/dd-date-picker.vue

@@ -187,7 +187,7 @@ function onConfirm() {
     position: fixed;
     inset: 0;
     z-index: $dd-z-index-overlay;
-    background: $dd-color-overlay-strong;
+    background: var(--dd-color-overlay-strong, #{$dd-color-overlay-strong});
     opacity: 0;
     pointer-events: none;
     @include dd-transition(opacity 0.3s);
@@ -199,7 +199,7 @@ function onConfirm() {
     right: 0;
     bottom: 0;
     z-index: $dd-z-index-popup;
-    background: $dd-neutral-800;
+    background: var(--dd-bg-elevated, #{$dd-bg-elevated});
     border-radius: $dd-radius-2xl $dd-radius-2xl 0 0;
     transform: translateY(100%);
     @include dd-transition(transform 0.3s);
@@ -218,22 +218,22 @@ function onConfirm() {
     @include dd-flex-between;
     height: 96rpx;
     padding: 0 32rpx;
-    @include dd-hairline-bottom($dd-border-default);
+    @include dd-hairline-bottom(var(--dd-border-default, #{$dd-border-default}));
   }
   &__cancel {
     font-size: 28rpx;
-    color: $dd-text-secondary;
+    color: var(--dd-text-secondary, #{$dd-text-secondary});
   }
   &__title {
     font-size: 32rpx;
     font-weight: 600;
-    color: $dd-text-primary;
+    color: var(--dd-text-primary, #{$dd-text-primary});
     @include dd-ellipsis(1);
   }
   &__confirm {
     font-size: 28rpx;
     font-weight: 600;
-    color: $dd-primary-400;
+    color: var(--dd-primary-400, #{$dd-primary-400});
   }
 
   &__wheels {
@@ -247,7 +247,7 @@ function onConfirm() {
   }
   &__item-text {
     font-size: 32rpx;
-    color: $dd-text-primary;
+    color: var(--dd-text-primary, #{$dd-text-primary});
   }
 }
 </style>

package/components/dd-dialog/dd-dialog.vue

@@ -145,7 +145,7 @@ function onCancel() {
   &__mask {
     position: fixed;
     inset: 0;
-    background: $dd-color-overlay-strong;
+    background: var(--dd-color-overlay-strong, #{$dd-color-overlay-strong});
     opacity: 0;
     visibility: hidden;
     z-index: 2000;
@@ -165,10 +165,10 @@ function onCancel() {
     opacity: 0;
     visibility: hidden;
     z-index: 2001;
-    background: $dd-bg-elevated;
-    border: 1px solid $dd-border-default;
+    background: var(--dd-bg-elevated, #{$dd-bg-elevated});
+    border: 1px solid var(--dd-border-default, #{$dd-border-default});
     border-radius: $dd-radius-lg;
-    box-shadow: $dd-shadow-4;
+    box-shadow: var(--dd-shadow-4, #{$dd-shadow-4});
     overflow: hidden;
     @include dd-transition(transform 0.3s ease, opacity 0.3s ease, visibility 0.3s);
 
@@ -187,7 +187,7 @@ function onCancel() {
   &__title {
     font-size: $dd-font-size-h4;
     font-weight: $dd-font-weight-h4;
-    color: $dd-text-primary;
+    color: var(--dd-text-primary, #{$dd-text-primary});
     line-height: 1.3;
   }
 
@@ -202,14 +202,14 @@ function onCancel() {
 
   &__message {
     font-size: $dd-font-size-body;
-    color: $dd-text-secondary;
+    color: var(--dd-text-secondary, #{$dd-text-secondary});
     line-height: $dd-line-height-body;
   }
 
   &__footer {
     &--default {
       display: flex;
-      border-top: 1px solid $dd-border-subtle;
+      border-top: 1px solid var(--dd-border-subtle, #{$dd-border-subtle});
     }
 
     &--round-button {
@@ -226,14 +226,14 @@ function onCancel() {
     height: 96rpx;
 
     &--cancel {
-      border-right: 1px solid $dd-border-subtle;
+      border-right: 1px solid var(--dd-border-subtle, #{$dd-border-subtle});
     }
   }
 
   &__btn-text {
     font-size: $dd-font-size-body;
     font-weight: 500;
-    color: $dd-text-secondary;
+    color: var(--dd-text-secondary, #{$dd-text-secondary});
   }
 
   &__pill {
@@ -243,18 +243,18 @@ function onCancel() {
     @include dd-transition(background 0.2s ease);
 
     &--cancel {
-      background: $dd-surface-container;
+      background: var(--dd-surface-container, #{$dd-surface-container});
     }
 
     &--confirm {
-      background: $dd-primary-500;
+      background: var(--dd-primary, #{$dd-primary});
     }
   }
 
   &__pill-text {
     font-size: $dd-font-size-body;
     font-weight: 600;
-    color: $dd-text-secondary;
+    color: var(--dd-text-secondary, #{$dd-text-secondary});
 
     &--confirm {
       color: $dd-color-white;

package/components/dd-divider/dd-divider.vue

@@ -59,14 +59,14 @@ const effectiveHairline = computed(() => props.hairline || props.dashed)
   &__content {
     flex: none;
     padding: 0 $dd-space-2;
-    color: $dd-text-tertiary;
+    color: var(--dd-text-tertiary, #{$dd-text-tertiary});
     font-size: $dd-font-size-caption;
     line-height: $dd-line-height-caption;
   }
 
   &__line {
     flex: 1;
-    border-top-color: $dd-border-default;
+    border-top-color: var(--dd-border-default, #{$dd-border-default});
 
     &--left {
       flex: 1;

package/components/dd-drawer/dd-drawer.vue

@@ -98,7 +98,7 @@ function onMaskClick() {
 .dd-drawer__mask {
   position: fixed;
   inset: 0;
-  background: $dd-glass-bg;
+  background: var(--dd-glass-bg, #{$dd-glass-bg});
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   opacity: 0;
@@ -118,7 +118,7 @@ function onMaskClick() {
   bottom: 0;
   display: flex;
   flex-direction: column;
-  background: $dd-surface;
+  background: var(--dd-surface, #{$dd-surface});
   overflow: hidden;
   z-index: 1001;
   // ponytail: cubic-bezier 取 iOS 标准滑出曲线，遮罩淡入同期 0.3s，合上略快收尾
@@ -144,7 +144,7 @@ function onMaskClick() {
 
   &--vip {
     padding: 64rpx 32rpx 32rpx;
-    background: $dd-gradient-primary;
+    background: var(--dd-gradient-primary, #{$dd-gradient-primary});
     display: flex;
     align-items: center;
     gap: 24rpx;
@@ -169,7 +169,7 @@ function onMaskClick() {
 
 .dd-drawer__avatar-fallback {
   font-size: 40rpx;
-  color: $dd-neutral-900;
+  color: var(--dd-primary-contrast, #{$dd-primary-contrast});
   font-weight: 700;
 }
 
@@ -189,13 +189,13 @@ function onMaskClick() {
 .dd-drawer__username {
   font-size: $dd-font-size-h3;
   font-weight: 700;
-  color: $dd-neutral-900;
+  color: var(--dd-primary-contrast, #{$dd-primary-contrast});
   @include dd-ellipsis(1);
 }
 
 .dd-drawer__vip-badge {
-  background: $dd-surface;
-  color: $dd-primary-400;
+  background: var(--dd-surface, #{$dd-surface});
+  color: var(--dd-primary-400, #{$dd-primary-400});
   font-size: 20rpx;
   font-weight: 700;
   padding: 2rpx 10rpx;

package/components/dd-dropdown-item/dd-dropdown-item.vue

@@ -125,7 +125,7 @@ function onSelect(opt: DropdownOption) {
     gap: $dd-space-1;
     height: 96rpx;
     padding: 0 $dd-space-2;
-    color: $dd-text-primary;
+    color: var(--dd-text-primary, #{$dd-text-primary});
     font-size: $dd-font-size-body;
     @include dd-transition(color 0.3s);
   }
@@ -147,7 +147,7 @@ function onSelect(opt: DropdownOption) {
   &__panel {
     position: fixed;
     z-index: 10;
-    background: $dd-surface;
+    background: var(--dd-surface, #{$dd-surface});
     max-height: 50vh;
     overflow: hidden;
     opacity: 0;
@@ -183,7 +183,7 @@ function onSelect(opt: DropdownOption) {
     height: 80rpx;
     padding: 0 32rpx;
     font-size: $dd-font-size-body;
-    color: $dd-text-primary;
+    color: var(--dd-text-primary, #{$dd-text-primary});
     @include dd-transition(color 0.2s);
 
     &--active {

package/components/dd-dropdown-menu/dd-dropdown-menu.vue

@@ -153,15 +153,15 @@ onUnmounted(() => {
   flex-direction: row;
   align-items: center;
   height: 96rpx;
-  background: $dd-surface;
-  @include dd-hairline-bottom($dd-border-subtle);
+  background: var(--dd-surface, #{$dd-surface});
+  @include dd-hairline-bottom(var(--dd-border-subtle, #{$dd-border-subtle}));
 }
 
 .dd-dropdown__overlay {
   position: fixed;
   left: 0;
   right: 0;
-  background: $dd-glass-bg;
+  background: var(--dd-glass-bg, #{$dd-glass-bg});
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   z-index: 9;

package/components/dd-empty-state/dd-empty-state.vue

@@ -99,14 +99,14 @@ function onAction() {
   &__title {
     font-size: $dd-font-size-h3;
     font-weight: $dd-font-weight-h3;
-    color: $dd-text-primary;
+    color: var(--dd-text-primary, #{$dd-text-primary});
     line-height: $dd-line-height-h3;
   }
 
   &__desc {
     margin-top: $dd-space-2;
     font-size: $dd-font-size-body;
-    color: $dd-text-tertiary;
+    color: var(--dd-text-tertiary, #{$dd-text-tertiary});
     line-height: $dd-line-height-caption;
     max-width: 560rpx;
   }
@@ -116,15 +116,15 @@ function onAction() {
     padding: 0 $dd-space-5;
     height: $dd-size-button-md;
     border-radius: $dd-radius-full;
-    background: $dd-gradient-primary;
+    background: var(--dd-gradient-primary, #{$dd-gradient-primary});
     @include dd-flex-center;
-    box-shadow: $dd-shadow-glow-gold-md;
+    box-shadow: var(--dd-shadow-glow-gold-md, #{$dd-shadow-glow-gold-md});
   }
 
   &__btn-text {
     font-size: $dd-font-size-body;
     font-weight: $dd-font-weight-body;
-    color: $dd-neutral-900;
+    color: var(--dd-primary-contrast, #{$dd-primary-contrast});
   }
 }
 

package/components/dd-feature-grid/dd-feature-grid.vue

@@ -112,7 +112,7 @@ function onItemClick(item: FeatureItem, index: number) {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: $dd-gradient-primary-wide;
+  background: var(--dd-gradient-primary-wide, #{$dd-gradient-primary-wide});
 }
 
 .dd-feature-grid__item--circle .dd-feature-grid__icon {
@@ -125,13 +125,13 @@ function onItemClick(item: FeatureItem, index: number) {
 
 .dd-feature-grid__icon-text {
   font-size: $dd-font-size-h2;
-  color: $dd-neutral-900;
+  color: var(--dd-primary-contrast, #{$dd-primary-contrast});
   line-height: 1;
 }
 
 .dd-feature-grid__label {
   font-size: $dd-font-size-caption;
-  color: $dd-text-secondary;
+  color: var(--dd-text-secondary, #{$dd-text-secondary});
   text-align: center;
   @include dd-ellipsis(1);
   max-width: 100%;

package/components/dd-field/dd-field.vue

@@ -439,8 +439,8 @@ defineExpose({ validate, validateWithTrigger, resetValidation, scrollIntoView, f
   overflow: hidden;
   font-size: $dd-font-size-body;
   line-height: $dd-line-height-lead;
-  color: $dd-text-primary;
-  background: $dd-bg-elevated;
+  color: var(--dd-text-primary, #{$dd-text-primary});
+  background: var(--dd-bg-elevated, #{$dd-bg-elevated});
 
   // vant 式发丝线：两侧缩进 32rpx
   &::after {
@@ -451,7 +451,7 @@ defineExpose({ validate, validateWithTrigger, resetValidation, scrollIntoView, f
     right: $dd-space-4;
     bottom: 0;
     left: $dd-space-4;
-    border-bottom: 1px solid $dd-border-subtle;
+    border-bottom: 1px solid var(--dd-border-subtle, #{$dd-border-subtle});
     transform: scaleY(0.5);
   }
 
@@ -480,7 +480,7 @@ defineExpose({ validate, validateWithTrigger, resetValidation, scrollIntoView, f
     box-sizing: border-box;
     width: 6.2em;
     margin-right: $dd-space-3;
-    color: $dd-text-primary;
+    color: var(--dd-text-primary, #{$dd-text-primary});
     text-align: left;
     word-wrap: break-word;
 
@@ -494,7 +494,7 @@ defineExpose({ validate, validateWithTrigger, resetValidation, scrollIntoView, f
 
   &__required-mark {
     margin-right: 4rpx;
-    color: $dd-error-500;
+    color: var(--dd-error, #{$dd-error});
   }
 
   &__label-text {
@@ -529,17 +529,17 @@ defineExpose({ validate, validateWithTrigger, resetValidation, scrollIntoView, f
     border: 0;
     resize: none;
     background: transparent;
-    color: $dd-text-primary;
+    color: var(--dd-text-primary, #{$dd-text-primary});
     font-size: inherit;
     line-height: inherit;
 
     &::placeholder {
-      color: $dd-text-tertiary;
+      color: var(--dd-text-tertiary, #{$dd-text-tertiary});
     }
 
     // readonly（原生 disabled 拦输入但无禁用样式）：保持正常文本色
     &:disabled {
-      color: $dd-text-primary;
+      color: var(--dd-text-primary, #{$dd-text-primary});
       opacity: 1;
     }
   }
@@ -554,7 +554,7 @@ defineExpose({ validate, validateWithTrigger, resetValidation, scrollIntoView, f
     flex-shrink: 0;
     margin-right: $dd-space-1;
     font-size: $dd-font-size-h4;
-    color: $dd-text-primary;
+    color: var(--dd-text-primary, #{$dd-text-primary});
   }
 
   &__clear {
@@ -565,7 +565,7 @@ defineExpose({ validate, validateWithTrigger, resetValidation, scrollIntoView, f
     margin-left: $dd-space-1;
     padding: $dd-space-1 0 $dd-space-1 $dd-space-2;
     font-size: $dd-font-size-h4;
-    color: $dd-text-tertiary;
+    color: var(--dd-text-tertiary, #{$dd-text-tertiary});
   }
 
   &__right-icon {
@@ -574,7 +574,7 @@ defineExpose({ validate, validateWithTrigger, resetValidation, scrollIntoView, f
     flex-shrink: 0;
     margin-left: $dd-space-1;
     font-size: $dd-font-size-h4;
-    color: $dd-text-tertiary;
+    color: var(--dd-text-tertiary, #{$dd-text-tertiary});
   }
 
   &__arrow {
@@ -583,7 +583,7 @@ defineExpose({ validate, validateWithTrigger, resetValidation, scrollIntoView, f
     flex-shrink: 0;
     margin-left: $dd-space-1;
     font-size: $dd-font-size-h4;
-    color: $dd-text-tertiary;
+    color: var(--dd-text-tertiary, #{$dd-text-tertiary});
 
     &--left {
       transform: rotate(180deg);
@@ -606,7 +606,7 @@ defineExpose({ validate, validateWithTrigger, resetValidation, scrollIntoView, f
   &__error-message {
     font-size: $dd-font-size-caption;
     line-height: 32rpx;
-    color: $dd-error-500;
+    color: var(--dd-error, #{$dd-error});
     text-align: left;
 
     &--center {
@@ -622,7 +622,7 @@ defineExpose({ validate, validateWithTrigger, resetValidation, scrollIntoView, f
     margin-top: $dd-space-1;
     font-size: $dd-font-size-caption;
     line-height: 32rpx;
-    color: $dd-text-secondary;
+    color: var(--dd-text-secondary, #{$dd-text-secondary});
     text-align: right;
   }
 
@@ -630,7 +630,7 @@ defineExpose({ validate, validateWithTrigger, resetValidation, scrollIntoView, f
   &--error {
     .dd-field__control,
     .dd-field__control::placeholder {
-      color: $dd-error-500;
+      color: var(--dd-error, #{$dd-error});
     }
   }
 
@@ -638,12 +638,12 @@ defineExpose({ validate, validateWithTrigger, resetValidation, scrollIntoView, f
   &--disabled {
     .dd-field__label,
     .dd-field__left-icon {
-      color: $dd-text-tertiary;
+      color: var(--dd-text-tertiary, #{$dd-text-tertiary});
     }
 
     .dd-field__control,
     .dd-field__control::placeholder {
-      color: $dd-text-tertiary;
+      color: var(--dd-text-tertiary, #{$dd-text-tertiary});
     }
   }
 
@@ -654,7 +654,7 @@ defineExpose({ validate, validateWithTrigger, resetValidation, scrollIntoView, f
   }
 
   &--active {
-    background: $dd-surface-container-high;
+    background: var(--dd-surface-container-high, #{$dd-surface-container-high});
   }
 
   &__extra {

package/components/dd-goods-sku/dd-goods-sku.vue

@@ -310,7 +310,7 @@ defineExpose({ open, close, reset })
 @import '../../scss/mixins';
 
 .dd-goods-sku {
-  background-color: $dd-bg-elevated;
+  background-color: var(--dd-bg-elevated, #{$dd-bg-elevated});
   overflow: hidden;
 
   &__container {
@@ -347,26 +347,26 @@ defineExpose({ open, close, reset })
 
         &__symbol {
           font-size: 24rpx;
-          color: $dd-error-400;
+          color: var(--dd-error-400, #{$dd-error-400});
           margin-right: 4rpx;
         }
 
         &__value {
           font-size: 36rpx;
-          color: $dd-error-400;
+          color: var(--dd-error-400, #{$dd-error-400});
           font-weight: bold;
         }
       }
 
       &__stock {
         font-size: 26rpx;
-        color: $dd-text-tertiary;
+        color: var(--dd-text-tertiary, #{$dd-text-tertiary});
         margin-bottom: 20rpx;
       }
 
       &__selected {
         font-size: 26rpx;
-        color: $dd-text-primary;
+        color: var(--dd-text-primary, #{$dd-text-primary});
       }
     }
   }
@@ -380,7 +380,7 @@ defineExpose({ open, close, reset })
 
       &__title {
         font-size: 28rpx;
-        color: $dd-text-primary;
+        color: var(--dd-text-primary, #{$dd-text-primary});
         margin-bottom: 20rpx;
       }
 
@@ -391,22 +391,22 @@ defineExpose({ open, close, reset })
 
         &__item {
           padding: 10rpx 20rpx;
-          border: 2rpx solid $dd-border-default;
+          border: 2rpx solid var(--dd-border-default, #{$dd-border-default});
           border-radius: 10rpx;
           margin-right: 20rpx;
           margin-bottom: 20rpx;
           font-size: 26rpx;
-          color: $dd-text-primary;
-          background-color: $dd-bg-elevated;
+          color: var(--dd-text-primary, #{$dd-text-primary});
+          background-color: var(--dd-bg-elevated, #{$dd-bg-elevated});
 
           &--active {
-            border-color: $dd-error-400;
-            color: $dd-error-400;
+            border-color: var(--dd-error-400, #{$dd-error-400});
+            color: var(--dd-error-400, #{$dd-error-400});
           }
 
           &--disabled {
-            color: $dd-neutral-500;
-            border-color: $dd-border-default;
+            color: var(--dd-muted, #{$dd-muted});
+            border-color: var(--dd-border-default, #{$dd-border-default});
           }
         }
       }
@@ -421,7 +421,7 @@ defineExpose({ open, close, reset })
 
       &__title {
         font-size: 28rpx;
-        color: $dd-text-primary;
+        color: var(--dd-text-primary, #{$dd-text-primary});
       }
     }
   }