@didaoktv/didaoui-uniapp 1.2.2 → 1.3.0

package/components/dd-room-card/dd-room-card.vue

@@ -95,14 +95,14 @@ function onClick() {
 
 .dd-room-card {
   box-sizing: border-box;
-  background: $dd-bg-elevated;
+  background: var(--dd-bg-elevated, #{$dd-bg-elevated});
   @include dd-transition(transform 0.2s ease);
 }
 
 // === GRID ===
 .dd-room-card--grid {
   position: relative;
-  border: 1px solid $dd-border-default;
+  border: 1px solid var(--dd-border-default, #{$dd-border-default});
   border-radius: $dd-radius-lg;
   overflow: hidden;
   aspect-ratio: 1 / 1;
@@ -113,7 +113,7 @@ function onClick() {
 .dd-room-card__topbar {
   height: 12rpx;
   width: 100%;
-  background: $dd-surface-container-highest;
+  background: var(--dd-surface-container-highest, #{$dd-surface-container-highest});
   flex-shrink: 0;
 }
 
@@ -130,7 +130,7 @@ function onClick() {
 .dd-room-card__no {
   font-size: $dd-font-size-h1;
   font-weight: $dd-font-weight-h1;
-  color: $dd-text-primary;
+  color: var(--dd-text-primary, #{$dd-text-primary});
   line-height: 1.2;
 }
 
@@ -148,17 +148,17 @@ function onClick() {
   width: 12rpx;
   height: 12rpx;
   border-radius: 50%;
-  background: $dd-neutral-500;
+  background: var(--dd-muted, #{$dd-muted});
 }
 
 .dd-room-card__status-text {
   font-size: $dd-font-size-caption;
-  color: $dd-text-tertiary;
+  color: var(--dd-text-tertiary, #{$dd-text-tertiary});
 }
 
 .dd-room-card__capacity {
   font-size: $dd-font-size-caption;
-  color: $dd-text-tertiary;
+  color: var(--dd-text-tertiary, #{$dd-text-tertiary});
 
   &--inline {
     font-size: $dd-font-size-caption;
@@ -171,12 +171,12 @@ function onClick() {
   right: 12rpx;
   z-index: 2;
   padding: 2rpx 12rpx;
-  background: $dd-gradient-primary;
+  background: var(--dd-gradient-primary, #{$dd-gradient-primary});
   border-radius: $dd-radius-sm;
   text {
     font-size: $dd-font-size-caption;
     font-weight: 700;
-    color: $dd-neutral-900;
+    color: var(--dd-primary-contrast, #{$dd-primary-contrast});
     line-height: 1.6;
   }
 }
@@ -184,33 +184,33 @@ function onClick() {
 // === 顶部栏/状态色: occupied=gold, reserved=accent, idle=neutral ===
 .dd-room-card--occupied.dd-room-card--grid {
   .dd-room-card__topbar {
-    background: $dd-gradient-primary-h;
+    background: var(--dd-gradient-primary-h, #{$dd-gradient-primary-h});
   }
   .dd-room-card__dot {
-    background: $dd-primary-400;
+    background: var(--dd-primary-400, #{$dd-primary-400});
     box-shadow: 0 0 12rpx rgba(245, 166, 35, 0.6);
   }
   .dd-room-card__status-text {
-    color: $dd-primary-400;
+    color: var(--dd-primary-400, #{$dd-primary-400});
   }
 }
 
 .dd-room-card--reserved.dd-room-card--grid {
   .dd-room-card__topbar {
-    background: $dd-gradient-accent-h;
+    background: var(--dd-gradient-accent-h, #{$dd-gradient-accent-h});
   }
   .dd-room-card__dot {
-    background: $dd-accent-400;
+    background: var(--dd-accent-400, #{$dd-accent-400});
     box-shadow: 0 0 12rpx rgba(45, 75, 160, 0.6);
   }
   .dd-room-card__status-text {
-    color: $dd-accent-300;
+    color: var(--dd-accent-300, #{$dd-accent-300});
   }
 }
 
 .dd-room-card--idle.dd-room-card--grid {
   .dd-room-card__topbar {
-    background: $dd-surface-container-highest;
+    background: var(--dd-surface-container-highest, #{$dd-surface-container-highest});
   }
 }
 
@@ -221,7 +221,7 @@ function onClick() {
   align-items: center;
   gap: $dd-space-3;
   padding: $dd-space-3 $dd-space-4;
-  border: 1px solid $dd-border-default;
+  border: 1px solid var(--dd-border-default, #{$dd-border-default});
   border-radius: $dd-radius-md;
 }
 
@@ -233,7 +233,7 @@ function onClick() {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: $dd-gradient-accent;
+  background: var(--dd-gradient-accent, #{$dd-gradient-accent});
 
   &-text {
     font-size: $dd-font-size-body;
@@ -243,11 +243,11 @@ function onClick() {
 }
 
 .dd-room-card--vip .dd-room-card__avatar {
-  background: $dd-gradient-primary;
+  background: var(--dd-gradient-primary, #{$dd-gradient-primary});
 }
 
 .dd-room-card--theme .dd-room-card__avatar {
-  background: $dd-gradient-accent;
+  background: var(--dd-gradient-accent, #{$dd-gradient-accent});
 }
 
 .dd-room-card__list-info {
@@ -266,7 +266,7 @@ function onClick() {
 .dd-room-card__name {
   font-size: $dd-font-size-body;
   font-weight: 600;
-  color: $dd-text-primary;
+  color: var(--dd-text-primary, #{$dd-text-primary});
   @include dd-ellipsis(1);
 }
 
@@ -278,27 +278,27 @@ function onClick() {
 
 .dd-room-card__time {
   font-size: $dd-font-size-caption;
-  color: $dd-text-secondary;
+  color: var(--dd-text-secondary, #{$dd-text-secondary});
 }
 
 // list 状态色
 .dd-room-card--occupied.dd-room-card--list {
   .dd-room-card__dot {
-    background: $dd-primary-400;
+    background: var(--dd-primary-400, #{$dd-primary-400});
     box-shadow: 0 0 12rpx rgba(245, 166, 35, 0.6);
   }
   .dd-room-card__status-text {
-    color: $dd-primary-400;
+    color: var(--dd-primary-400, #{$dd-primary-400});
   }
 }
 
 .dd-room-card--reserved.dd-room-card--list {
   .dd-room-card__dot {
-    background: $dd-accent-400;
+    background: var(--dd-accent-400, #{$dd-accent-400});
     box-shadow: 0 0 12rpx rgba(45, 75, 160, 0.6);
   }
   .dd-room-card__status-text {
-    color: $dd-accent-300;
+    color: var(--dd-accent-300, #{$dd-accent-300});
   }
 }
 

package/components/dd-search-bar/dd-search-bar.vue

@@ -109,8 +109,8 @@ function onCancel() {
     gap: $dd-space-2;
     height: 88rpx;
     padding: 0 $dd-space-3;
-    background: $dd-neutral-800;
-    border: 1px solid $dd-neutral-700;
+    background: var(--dd-surface-container-low, #{$dd-surface-container-low});
+    border: 1px solid var(--dd-border-default, #{$dd-border-default});
     border-radius: $dd-radius-full;
     box-sizing: border-box;
     @include dd-transition(border-color 0.2s, box-shadow 0.2s);
@@ -120,19 +120,19 @@ function onCancel() {
     }
 
     &--focus {
-      border-color: $dd-primary-500;
-      box-shadow: $dd-shadow-glow-gold-lg;
+      border-color: var(--dd-primary, #{$dd-primary});
+      box-shadow: var(--dd-shadow-glow-gold-lg, #{$dd-shadow-glow-gold-lg});
     }
   }
 
   &__icon {
     font-size: $dd-font-size-body;
-    color: $dd-neutral-400;
+    color: var(--dd-muted, #{$dd-muted});
     line-height: 1;
     @include dd-transition(color 0.2s);
 
     &--focus {
-      color: $dd-primary-400;
+      color: var(--dd-primary-400, #{$dd-primary-400});
     }
   }
 
@@ -141,7 +141,7 @@ function onCancel() {
     min-width: 0;
     height: 100%;
     font-size: $dd-font-size-body;
-    color: $dd-neutral-100;
+    color: var(--dd-text-primary, #{$dd-text-primary});
     background: transparent;
     border: none;
   }
@@ -151,8 +151,8 @@ function onCancel() {
     width: 36rpx;
     height: 36rpx;
     border-radius: 50%;
-    background: $dd-neutral-800;
-    color: $dd-neutral-300;
+    background: var(--dd-surface-container-high, #{$dd-surface-container-high});
+    color: var(--dd-text-secondary, #{$dd-text-secondary});
     font-size: $dd-font-size-caption;
     line-height: 1;
   }
@@ -162,14 +162,14 @@ function onCancel() {
     padding: 0 $dd-space-1;
     font-size: $dd-font-size-body;
     font-weight: 500;
-    color: $dd-primary-400;
+    color: var(--dd-primary-400, #{$dd-primary-400});
   }
 
   &--disabled {
     opacity: 0.4;
     @include dd-no-touch;
     .dd-search__icon {
-      color: $dd-neutral-600;
+      color: var(--dd-text-tertiary, #{$dd-text-tertiary});
     }
   }
 }

package/components/dd-segmented-tab/dd-segmented-tab.vue

@@ -113,8 +113,8 @@ watch(() => props.options, measure)
     position: relative;
     display: inline-flex;
     padding: $dd-space-1;
-    background: $dd-neutral-800;
-    border: 1px solid $dd-border-default;
+    background: var(--dd-surface-container-high, #{$dd-surface-container-high});
+    border: 1px solid var(--dd-border-default, #{$dd-border-default});
     border-radius: $dd-radius-full;
   }
 
@@ -124,13 +124,13 @@ watch(() => props.options, measure)
     min-width: 120rpx;
     padding: 12rpx $dd-space-4;
     @include dd-flex-center;
-    color: $dd-text-tertiary;
+    color: var(--dd-text-tertiary, #{$dd-text-tertiary});
     font-size: $dd-font-size-body;
     font-weight: 500;
     @include dd-transition(color 0.3s);
 
     &--active {
-      color: $dd-neutral-900;
+      color: var(--dd-primary-contrast, #{$dd-primary-contrast});
       font-weight: 600;
     }
   }
@@ -157,14 +157,14 @@ watch(() => props.options, measure)
   .dd-seg-text__item {
     position: relative;
     padding: $dd-space-2 0;
-    color: $dd-text-tertiary;
+    color: var(--dd-text-tertiary, #{$dd-text-tertiary});
     font-size: $dd-font-size-body;
     font-weight: 500;
     @include dd-flex-center;
     @include dd-transition(color 0.3s);
 
     &--active {
-      color: $dd-primary-400;
+      color: var(--dd-primary-400, #{$dd-primary-400});
       font-weight: 600;
     }
   }
@@ -175,7 +175,7 @@ watch(() => props.options, measure)
     left: 20%;
     width: 60%;
     height: $dd-space-1;
-    background: $dd-primary-400;
+    background: var(--dd-primary-400, #{$dd-primary-400});
     border-radius: $dd-radius-full;
   }
 }

package/components/dd-signature/dd-signature.vue

@@ -425,7 +425,7 @@
 		flex-direction: column;
 		
 		&__canvas-wrap {
-			border: 1px solid $dd-border-default;
+			border: 1px solid var(--dd-border-default, #{$dd-border-default});
 			border-radius: 4px;
 			overflow: hidden;
 		}
@@ -437,7 +437,7 @@
 		
 		&__toolbar {
 			margin-top: 5px;
-            background-color: $dd-bg-elevated;
+            background-color: var(--dd-bg-elevated, #{$dd-bg-elevated});
 		}
 		
 		&__toolbar-icons {
@@ -466,7 +466,7 @@
 				display: block;
 				margin-bottom: 10px;
 				font-size: 14px;
-				color: $dd-text-tertiary;
+				color: var(--dd-text-tertiary, #{$dd-text-tertiary});
 			}
 		}
 		
@@ -478,7 +478,7 @@
 			display: block;
 			margin-bottom: 10px;
 			font-size: 14px;
-			color: $dd-text-tertiary;
+			color: var(--dd-text-tertiary, #{$dd-text-tertiary});
 		}
 		
 		&__colors {
@@ -492,11 +492,11 @@
 			width: 30px;
 			height: 30px;
 			border-radius: 50%;
-			border: 2px solid $dd-border-default;
+			border: 2px solid var(--dd-border-default, #{$dd-border-default});
 			cursor: pointer;
 			
 			&--active {
-				border-color: $dd-primary-400;
+				border-color: var(--dd-primary-400, #{$dd-primary-400});
 				transform: scale(1.1);
 			}
 		}

package/components/dd-skeleton/dd-skeleton.vue

@@ -93,7 +93,7 @@ const lineWidths = computed(() => {
   &__block {
     position: relative;
     overflow: hidden;
-    background: $dd-neutral-800; // var(--dd-skeleton-bg)
+    background: var(--dd-surface-container-high, #{$dd-surface-container-high}); // var(--dd-skeleton-bg)
 
     &::after {
       content: '';
@@ -143,7 +143,7 @@ const lineWidths = computed(() => {
     align-items: center;
     gap: $dd-space-3;
     padding: $dd-space-3 0;
-    @include dd-hairline-bottom($dd-border-subtle);
+    @include dd-hairline-bottom(var(--dd-border-subtle, #{$dd-border-subtle}));
   }
 
   &__list-text {

package/components/dd-slider/dd-slider.vue

@@ -160,7 +160,7 @@ function onMouseDown(e: any) {
     width: 100%;
     height: 6rpx;
     border-radius: $dd-radius-full;
-    background: $dd-neutral-800;
+    background: var(--dd-surface-container-high, #{$dd-surface-container-high});
   }
 
   &__fill {
@@ -169,7 +169,7 @@ function onMouseDown(e: any) {
     left: 0;
     height: 100%;
     border-radius: $dd-radius-full;
-    background: $dd-gradient-primary-h;
+    background: var(--dd-gradient-primary-h, #{$dd-gradient-primary-h});
     box-shadow: 0 0 8rpx rgba($dd-primary-400, 0.6);
   }
 
@@ -179,9 +179,9 @@ function onMouseDown(e: any) {
     width: 32rpx;
     height: 32rpx;
     background: $dd-color-white;
-    border: 4rpx solid $dd-primary-400;
+    border: 4rpx solid var(--dd-primary-400, #{$dd-primary-400});
     border-radius: 50%;
-    box-shadow: $dd-shadow-glow-gold-lg;
+    box-shadow: var(--dd-shadow-glow-gold-lg, #{$dd-shadow-glow-gold-lg});
     transform: translate(-50%, -50%);
     @include dd-transition(transform 0.1s ease, box-shadow 0.2s ease);
 
@@ -207,7 +207,7 @@ function onMouseDown(e: any) {
       left: 50%;
       transform: translateX(-50%);
       border: 6rpx solid transparent;
-      border-top-color: $dd-glass-border;
+      border-top-color: var(--dd-glass-border, #{$dd-glass-border});
       border-bottom: 0;
     }
   }
@@ -215,7 +215,7 @@ function onMouseDown(e: any) {
   &__tooltip-text {
     font-size: $dd-font-size-caption;
     font-weight: 600;
-    color: $dd-primary-300;
+    color: var(--dd-primary-300, #{$dd-primary-300});
     line-height: 1.2;
   }
 

package/components/dd-stat-card/dd-stat-card.vue

@@ -142,33 +142,33 @@ function onClick(e: Event) {
 
 // === 6 渐变变体 ===
 .dd-stat-card--primary {
-  background: $dd-gradient-primary;
+  background: var(--dd-gradient-primary, #{$dd-gradient-primary});
   &:active {
-    box-shadow: $dd-shadow-glow-gold-lg;
+    box-shadow: var(--dd-shadow-glow-gold-lg, #{$dd-shadow-glow-gold-lg});
   }
 }
 
 .dd-stat-card--accent {
-  background: $dd-gradient-accent-wide;
+  background: var(--dd-gradient-accent-wide, #{$dd-gradient-accent-wide});
   &:active {
-    box-shadow: $dd-shadow-glow-blue-lg;
+    box-shadow: var(--dd-shadow-glow-blue-lg, #{$dd-shadow-glow-blue-lg});
   }
 }
 
 .dd-stat-card--success {
-  background: $dd-gradient-success;
+  background: var(--dd-gradient-success, #{$dd-gradient-success});
 }
 
 .dd-stat-card--warning {
-  background: $dd-gradient-warning;
+  background: var(--dd-gradient-warning, #{$dd-gradient-warning});
 }
 
 .dd-stat-card--error {
-  background: $dd-gradient-error;
+  background: var(--dd-gradient-error, #{$dd-gradient-error});
 }
 
 .dd-stat-card--neutral {
-  background: $dd-gradient-neutral;
-  border: 1px solid $dd-neutral-600;
+  background: var(--dd-gradient-neutral, #{$dd-gradient-neutral});
+  border: 1px solid var(--dd-border-default, #{$dd-border-default});
 }
 </style>

package/components/dd-step/dd-step.vue

@@ -173,7 +173,7 @@ const lineStyle = computed(() => ({
 
   &__title {
     font-size: $dd-font-size-caption;
-    color: $dd-text-primary;
+    color: var(--dd-text-primary, #{$dd-text-primary});
     line-height: $dd-line-height-caption;
   }
 
@@ -181,7 +181,7 @@ const lineStyle = computed(() => ({
     display: block;
     margin-top: $dd-space-1;
     font-size: $dd-font-size-caption;
-    color: $dd-text-tertiary;
+    color: var(--dd-text-tertiary, #{$dd-text-tertiary});
     line-height: 1.4;
   }
 }

package/components/dd-stepper/dd-stepper.vue

@@ -93,8 +93,8 @@ function onPlus() {
   justify-content: center;
   gap: $dd-space-1;
   padding: $dd-space-1;
-  background: $dd-neutral-800;
-  border: 1px solid $dd-neutral-700;
+  background: var(--dd-surface-container-low, #{$dd-surface-container-low});
+  border: 1px solid var(--dd-border-default, #{$dd-border-default});
   border-radius: $dd-radius-full;
   box-sizing: border-box;
 
@@ -102,7 +102,7 @@ function onPlus() {
     @include dd-flex-center;
     flex-shrink: 0;
     border-radius: 50%;
-    background: $dd-gradient-primary-wide;
+    background: var(--dd-gradient-primary-wide, #{$dd-gradient-primary-wide});
     @include dd-transition(transform 0.1s ease, opacity 0.2s);
 
     &--active {
@@ -110,24 +110,24 @@ function onPlus() {
     }
 
     &--disabled {
-      background: $dd-neutral-800;
+      background: var(--dd-surface-container-low, #{$dd-surface-container-low});
       @include dd-no-touch;
       .dd-stepper__icon {
-        color: $dd-neutral-500;
+        color: var(--dd-muted, #{$dd-muted});
         opacity: 0.4;
       }
     }
   }
 
   &__icon {
-    color: $dd-neutral-900;
+    color: var(--dd-primary-contrast, #{$dd-primary-contrast});
     font-weight: 700;
     line-height: 1;
   }
 
   &__value {
     text-align: center;
-    color: $dd-neutral-50;
+    color: var(--dd-text-primary, #{$dd-text-primary});
     font-weight: 700;
     line-height: 1;
     @include dd-ellipsis(1);

package/components/dd-swipe/dd-swipe.vue

@@ -139,7 +139,7 @@ defineExpose({ jumpTo, current })
     @include dd-transition(background 0.3s ease);
 
     &--active {
-      background: $dd-primary-500;
+      background: var(--dd-primary, #{$dd-primary});
     }
   }
 }

package/components/dd-swipe-action/dd-swipe-action.vue

@@ -75,7 +75,7 @@ const emit = defineEmits<{
   (e: 'close'): void
 }>()
 
-// 默认操作色用 error 红 ($dd-error-500)
+// 默认操作色用 error 红 ($dd-error)
 const defaultActionColor = '#E53935'
 
 const translateX = ref(0)
@@ -174,7 +174,7 @@ defineExpose({ close })
 .dd-swipe-action {
   position: relative;
   overflow: hidden;
-  background: $dd-bg-elevated;
+  background: var(--dd-bg-elevated, #{$dd-bg-elevated});
 
   &--disabled {
     .dd-swipe-action__content {
@@ -236,7 +236,7 @@ defineExpose({ close })
     position: relative;
     z-index: 1;
     width: 100%;
-    background: $dd-bg-elevated;
+    background: var(--dd-bg-elevated, #{$dd-bg-elevated});
     transform: translateX(0);
 
     &--anim {

package/components/dd-swipeable-tab/dd-swipeable-tab.vue

@@ -163,14 +163,14 @@ watch(() => props.options, measure)
   @include dd-flex-center;
   height: 100%;
   padding: 0 $dd-space-4;
-  color: $dd-text-tertiary;
+  color: var(--dd-text-tertiary, #{$dd-text-tertiary});
   font-size: $dd-font-size-body;
   font-weight: 500;
   box-sizing: border-box;
   @include dd-transition(color 0.3s);
 
   &--active {
-    color: $dd-primary-400;
+    color: var(--dd-primary-400, #{$dd-primary-400});
     font-weight: 600;
     .dd-swipe__label {
       text-shadow: 0 0 12px rgba(245, 166, 35, 0.5);
@@ -188,15 +188,15 @@ watch(() => props.options, measure)
   bottom: 0;
   left: 0;
   height: $dd-space-1;
-  background: $dd-gradient-primary-h;
+  background: var(--dd-gradient-primary-h, #{$dd-gradient-primary-h});
   border-radius: $dd-radius-full;
-  box-shadow: $dd-shadow-glow-gold-sm;
+  box-shadow: var(--dd-shadow-glow-gold-sm, #{$dd-shadow-glow-gold-sm});
   transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
     width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .dd-swipe__divider {
   height: 1px;
-  background: $dd-neutral-800;
+  background: var(--dd-rule, #{$dd-rule});
 }
 </style>

package/components/dd-switch/dd-switch.vue

@@ -63,15 +63,15 @@ function onToggle() {
   }
 
   // off
-  background: $dd-neutral-800;
-  border: 1px solid $dd-glass-border;
+  background: var(--dd-surface-container-high, #{$dd-surface-container-high});
+  border: 1px solid var(--dd-glass-border, #{$dd-glass-border});
   box-shadow: inset 0 2rpx 6rpx rgba(0, 0, 0, 0.3);
 
   // on
   &--on {
-    background: $dd-gradient-primary;
+    background: var(--dd-gradient-primary, #{$dd-gradient-primary});
     border-color: rgba($dd-primary-300, 0.5);
-    box-shadow: $dd-shadow-glow-gold-lg, inset 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
+    box-shadow: var(--dd-shadow-glow-gold-lg, #{$dd-shadow-glow-gold-lg}), inset 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
   }
 
   &--disabled {

package/components/dd-tabbar/dd-tabbar.vue

@@ -79,11 +79,11 @@ provide('ddTabbar', {
   align-items: center;
   width: 100%;
   height: 100rpx;
-  background: $dd-surface;
+  background: var(--dd-surface, #{$dd-surface});
   box-sizing: border-box;
 
   &--border {
-    @include dd-hairline-top($dd-border-default);
+    @include dd-hairline-top(var(--dd-border-default, #{$dd-border-default}));
   }
 
   &--safe {

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

@@ -99,7 +99,7 @@ function onClick() {
     height: $dd-space-4;
     padding: 0 $dd-space-1;
     border-radius: $dd-radius-full;
-    background: $dd-error;
+    background: var(--dd-error, #{$dd-error});
     @include dd-flex-center;
   }
 
@@ -116,7 +116,7 @@ function onClick() {
     width: $dd-space-2;
     height: $dd-space-2;
     border-radius: 50%;
-    background: $dd-error;
+    background: var(--dd-error, #{$dd-error});
   }
 }
 </style>