@didaoktv/didaoui-uniapp 1.2.2 → 1.3.0

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

@@ -57,9 +57,9 @@ function onClick(e: Event) {
 
 .dd-card {
   box-sizing: border-box;
-  background: $dd-bg-elevated;
+  background: var(--dd-bg-elevated, #{$dd-bg-elevated});
   border-radius: $dd-radius-lg;
-  box-shadow: $dd-shadow-1;
+  box-shadow: var(--dd-shadow-1, #{$dd-shadow-1});
   overflow: hidden;
   @include dd-transition(all 0.3s ease);
 
@@ -67,7 +67,7 @@ function onClick(e: Event) {
     @include dd-flex-between;
     padding: $dd-space-4 $dd-space-5;
     box-sizing: border-box;
-    @include dd-hairline-bottom($dd-border-default);
+    @include dd-hairline-bottom(var(--dd-border-default, #{$dd-border-default}));
 
     &-inner {
       flex: 1;
@@ -88,22 +88,22 @@ function onClick(e: Event) {
   &__footer {
     padding: $dd-space-4 $dd-space-5;
     box-sizing: border-box;
-    @include dd-hairline-top($dd-border-default);
+    @include dd-hairline-top(var(--dd-border-default, #{$dd-border-default}));
   }
 
   &--border {
-    border: 1px solid $dd-border-default;
+    border: 1px solid var(--dd-border-default, #{$dd-border-default});
   }
 
   &--hover,
   &--hover-state {
     transform: translateY(-4rpx);
-    box-shadow: $dd-shadow-2;
+    box-shadow: var(--dd-shadow-2, #{$dd-shadow-2});
   }
 
   &--active {
-    border: 2px solid $dd-primary-500;
-    box-shadow: $dd-shadow-glow-gold-lg;
+    border: 2px solid var(--dd-primary, #{$dd-primary});
+    box-shadow: var(--dd-shadow-glow-gold-lg, #{$dd-shadow-glow-gold-lg});
   }
 }
 
@@ -150,6 +150,6 @@ function onClick(e: Event) {
 }
 
 .dd-card--horizontal.dd-card--active {
-  border: 2px solid $dd-primary-500;
+  border: 2px solid var(--dd-primary, #{$dd-primary});
 }
 </style>

package/components/dd-cascader/dd-cascader.vue

@@ -382,18 +382,18 @@ function toFatherIndex(index: number) {
     height: 100%;
     padding: 10rpx;
     box-sizing: border-box;
-    background-color: $dd-bg-section;
+    background-color: var(--dd-bg-section, #{$dd-bg-section});
   }
 
   &__check {
-    color: $dd-primary-400;
+    color: var(--dd-primary-400, #{$dd-primary-400});
   }
 
   &__action {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    border-top: 1px solid $dd-border-default;
+    border-top: 1px solid var(--dd-border-default, #{$dd-border-default});
   }
 
   &__action-item {

package/components/dd-cell/dd-cell.vue

@@ -122,10 +122,10 @@ function handleClick(e: Event) {
   box-sizing: border-box;
   width: 100%;
   padding: 0 24rpx 0 $dd-space-4;
-  background: $dd-bg-elevated;
+  background: var(--dd-bg-elevated, #{$dd-bg-elevated});
   font-size: $dd-font-size-body;
-  color: $dd-text-primary;
-  @include dd-hairline-bottom($dd-border-subtle);
+  color: var(--dd-text-primary, #{$dd-text-primary});
+  @include dd-hairline-bottom(var(--dd-border-subtle, #{$dd-border-subtle}));
 
   &--normal {
     min-height: 96rpx;
@@ -146,7 +146,7 @@ function handleClick(e: Event) {
   }
 
   &--active {
-    background: $dd-surface-container-high;
+    background: var(--dd-surface-container-high, #{$dd-surface-container-high});
   }
 
   &__icon {
@@ -160,11 +160,11 @@ function handleClick(e: Event) {
   &__icon-text {
     font-size: 36rpx;
     line-height: 1;
-    color: $dd-primary-400;
+    color: var(--dd-primary-400, #{$dd-primary-400});
   }
 
   &__required {
-    color: $dd-error-500;
+    color: var(--dd-error, #{$dd-error});
     font-size: $dd-font-size-body;
     margin-right: 4rpx;
     line-height: $dd-line-height-caption;
@@ -184,14 +184,14 @@ function handleClick(e: Event) {
 
   &__title {
     font-size: $dd-font-size-body;
-    color: $dd-text-primary;
+    color: var(--dd-text-primary, #{$dd-text-primary});
     @include dd-ellipsis(1);
   }
 
   &__label {
     margin-top: 4rpx;
     font-size: $dd-font-size-caption;
-    color: $dd-text-tertiary;
+    color: var(--dd-text-tertiary, #{$dd-text-tertiary});
     @include dd-ellipsis(1);
   }
 
@@ -205,7 +205,7 @@ function handleClick(e: Event) {
 
   &__value {
     font-size: $dd-font-size-body;
-    color: $dd-text-tertiary;
+    color: var(--dd-text-tertiary, #{$dd-text-tertiary});
   }
 
   &__arrow {

package/components/dd-cell-group/dd-cell-group.vue

@@ -30,7 +30,7 @@ withDefaults(defineProps<Props>(), {
 @import '../../scss/mixins';
 
 .dd-cell-group {
-  background: $dd-bg-elevated;
+  background: var(--dd-bg-elevated, #{$dd-bg-elevated});
 
   :deep(.dd-cell:last-child),
   :deep(.dd-list-cell:last-child) {
@@ -46,15 +46,15 @@ withDefaults(defineProps<Props>(), {
   }
 
   &--border {
-    @include dd-hairline-top($dd-border-subtle);
-    @include dd-hairline-bottom($dd-border-subtle);
+    @include dd-hairline-top(var(--dd-border-subtle, #{$dd-border-subtle}));
+    @include dd-hairline-bottom(var(--dd-border-subtle, #{$dd-border-subtle}));
   }
 }
 
 .dd-cell-group__title {
   padding: 32rpx 32rpx 16rpx;
   font-size: $dd-font-size-caption;
-  color: $dd-text-tertiary;
+  color: var(--dd-text-tertiary, #{$dd-text-tertiary});
 
   &--inset {
     padding: 32rpx 24rpx 16rpx;

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

@@ -139,7 +139,7 @@ function onClick() {
   overflow: hidden;
   border-width: 6rpx;
   border-style: solid;
-  background: $dd-surface-container-high;
+  background: var(--dd-surface-container-high, #{$dd-surface-container-high});
   box-sizing: border-box;
 
   &--sm {
@@ -161,7 +161,7 @@ function onClick() {
 .dd-champ__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);
 
   &--inline {
@@ -173,7 +173,7 @@ function onClick() {
 
 .dd-champ__score {
   font-size: $dd-font-size-caption;
-  color: $dd-primary-400;
+  color: var(--dd-primary-400, #{$dd-primary-400});
 
   &--inline {
     flex-shrink: 0;
@@ -220,7 +220,7 @@ function onClick() {
 .dd-champ__rank-num {
   font-size: $dd-font-size-caption;
   font-weight: 800;
-  color: $dd-neutral-900;
+  color: var(--dd-primary-contrast, #{$dd-primary-contrast});
   line-height: 1;
 }
 
@@ -239,8 +239,8 @@ function onClick() {
   flex-direction: row;
   align-items: center;
   gap: $dd-space-2;
-  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;
   padding: $dd-space-3 $dd-space-4;
 }
@@ -251,8 +251,8 @@ function onClick() {
   flex-direction: row;
   align-items: center;
   gap: $dd-space-2;
-  background: $dd-bg-elevated;
-  border-bottom: 1px solid $dd-border-default;
+  background: var(--dd-bg-elevated, #{$dd-bg-elevated});
+  border-bottom: 1px solid var(--dd-border-default, #{$dd-border-default});
   padding: $dd-space-3 $dd-space-4;
 }
 </style>

package/components/dd-checkbox/dd-checkbox.vue

@@ -75,7 +75,7 @@ function onToggle() {
     @include dd-flex-center;
     flex-shrink: 0;
     border-radius: $dd-radius-sm;
-    border: 3rpx solid $dd-neutral-700;
+    border: 3rpx solid var(--dd-border-default, #{$dd-border-default});
     background: transparent;
     box-sizing: border-box;
     @include dd-transition(all 0.2s);
@@ -91,24 +91,24 @@ function onToggle() {
   &__dash {
     width: 60%;
     height: $dd-space-1;
-    background: $dd-primary-500;
+    background: var(--dd-primary, #{$dd-primary});
     border-radius: $dd-radius-full;
   }
 
   &__label {
     font-size: $dd-font-size-body;
-    color: $dd-text-primary;
+    color: var(--dd-text-primary, #{$dd-text-primary});
   }
 
   &--checked .dd-checkbox__box {
-    background: $dd-gradient-primary;
-    border-color: $dd-primary-500;
-    box-shadow: $dd-shadow-glow-gold-lg;
+    background: var(--dd-gradient-primary, #{$dd-gradient-primary});
+    border-color: var(--dd-primary, #{$dd-primary});
+    box-shadow: var(--dd-shadow-glow-gold-lg, #{$dd-shadow-glow-gold-lg});
   }
 
   &--indeterminate .dd-checkbox__box {
-    background: rgba($dd-primary-500, 0.1);
-    border-color: $dd-primary-500;
+    background: rgba($dd-primary, 0.1);
+    border-color: var(--dd-primary, #{$dd-primary});
   }
 
   &--disabled {

package/components/dd-collapse/dd-collapse.vue

@@ -58,6 +58,6 @@ provide('ddCollapse', { isExpanded, toggle })
 @import '../../scss/mixins';
 
 .dd-collapse {
-  background: $dd-surface;
+  background: var(--dd-surface, #{$dd-surface});
 }
 </style>

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

@@ -99,10 +99,10 @@ onMounted(() => {
 @import '../../scss/mixins';
 
 .dd-collapse-item {
-  background: $dd-surface;
+  background: var(--dd-surface, #{$dd-surface});
 
   &--border {
-    @include dd-hairline-bottom($dd-border-subtle);
+    @include dd-hairline-bottom(var(--dd-border-subtle, #{$dd-border-subtle}));
   }
 
   &--disabled {
@@ -120,19 +120,19 @@ onMounted(() => {
   &__title {
     flex: 1;
     font-size: $dd-font-size-lead;
-    color: $dd-text-primary;
+    color: var(--dd-text-primary, #{$dd-text-primary});
     @include dd-ellipsis(1);
   }
 
   &__value {
     font-size: $dd-font-size-body;
-    color: $dd-text-tertiary;
+    color: var(--dd-text-tertiary, #{$dd-text-tertiary});
     @include dd-ellipsis(1);
   }
 
   &__arrow {
     font-size: 28rpx;
-    color: $dd-text-tertiary;
+    color: var(--dd-text-tertiary, #{$dd-text-tertiary});
     @include dd-transition(transform 0.3s);
   }
 
@@ -148,7 +148,7 @@ onMounted(() => {
   &__content {
     padding: 0 32rpx 24rpx;
     font-size: $dd-font-size-body;
-    color: $dd-text-secondary;
+    color: var(--dd-text-secondary, #{$dd-text-secondary});
   }
 }
 </style>

package/components/dd-count-down/dd-count-down.vue

@@ -155,7 +155,7 @@ onUnmounted(() => {
 
 .dd-count-down__text {
   font-size: $dd-font-size-body;
-  color: $dd-text-primary;
+  color: var(--dd-text-primary, #{$dd-text-primary});
   font-variant-numeric: tabular-nums;
   font-weight: $dd-font-weight-body;
   line-height: 1;

package/components/dd-coupon/dd-coupon.vue

@@ -131,8 +131,8 @@ function handleClick() {
   position: relative;
   overflow: hidden;
   border-radius: $dd-radius-lg;
-  background: $dd-bg-elevated;
-  color: $dd-text-primary;
+  background: var(--dd-bg-elevated, #{$dd-bg-elevated});
+  color: var(--dd-text-primary, #{$dd-text-primary});
   width: 100%;
 
   // === 形状 ===
@@ -146,7 +146,7 @@ function handleClick() {
       transform: translateY(-50%);
       width: 48rpx;
       height: 48rpx;
-      background: $dd-bg;
+      background: var(--dd-bg, #{$dd-bg});
       border-radius: 50%;
       z-index: 1;
     }
@@ -159,7 +159,7 @@ function handleClick() {
       transform: translateY(-50%);
       width: 48rpx;
       height: 48rpx;
-      background: $dd-bg;
+      background: var(--dd-bg, #{$dd-bg});
       border-radius: 50%;
       z-index: 1;
     }
@@ -212,7 +212,7 @@ function handleClick() {
     align-items: flex-start;
     min-width: 144rpx;
     padding: $dd-space-2 $dd-space-4 $dd-space-2 0;
-    border-right: 1px dashed $dd-border-strong;
+    border-right: 1px dashed var(--dd-border-strong, #{$dd-border-strong});
 
     &-main {
       display: flex;
@@ -223,21 +223,21 @@ function handleClick() {
     &-unit {
       font-size: $dd-font-size-h3;
       font-weight: $dd-font-weight-h4;
-      color: $dd-error-400;
+      color: var(--dd-error-400, #{$dd-error-400});
       line-height: 1;
     }
 
     &-value {
       font-size: 56rpx;
       font-weight: $dd-font-weight-display;
-      color: $dd-error-400;
+      color: var(--dd-error-400, #{$dd-error-400});
       line-height: 1;
     }
 
     &-limit {
       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: $dd-line-height-caption;
     }
   }
@@ -253,7 +253,7 @@ function handleClick() {
     &-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: $dd-line-height-h4;
       @include dd-ellipsis(1);
     }
@@ -261,7 +261,7 @@ function handleClick() {
     &-desc {
       margin-top: $dd-space-1;
       font-size: $dd-font-size-caption;
-      color: $dd-text-secondary;
+      color: var(--dd-text-secondary, #{$dd-text-secondary});
       line-height: $dd-line-height-caption;
       @include dd-ellipsis(1);
     }
@@ -269,7 +269,7 @@ function handleClick() {
     &-time {
       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: $dd-line-height-caption;
       @include dd-ellipsis(1);
     }
@@ -292,8 +292,8 @@ function handleClick() {
     height: 56rpx;
     padding: 0 $dd-space-5;
     border-radius: $dd-radius-full;
-    background: $dd-error-500;
-    color: $dd-error-contrast;
+    background: var(--dd-error, #{$dd-error});
+    color: var(--dd-error-contrast, #{$dd-error-contrast});
     font-size: $dd-font-size-caption;
     font-weight: $dd-font-weight-caption;
   }
@@ -307,10 +307,10 @@ function handleClick() {
     height: 20rpx;
     background: repeating-linear-gradient(
       -45deg,
-      $dd-primary-300,
-      $dd-primary-300 10rpx,
-      $dd-primary-500 10rpx,
-      $dd-primary-500 20rpx
+      var(--dd-primary-300, #{$dd-primary-300}),
+      var(--dd-primary-300, #{$dd-primary-300}) 10rpx,
+      var(--dd-primary, #{$dd-primary}) 10rpx,
+      var(--dd-primary, #{$dd-primary}) 20rpx
     );
     z-index: 1;
   }
@@ -321,142 +321,142 @@ function handleClick() {
 
   // === 内置渐变主题（$dd-gradient-* token + 各主题 contrast 文字） ===
   &--primary {
-    background: $dd-gradient-primary;
-    color: $dd-primary-contrast;
+    background: var(--dd-gradient-primary, #{$dd-gradient-primary});
+    color: var(--dd-primary-contrast, #{$dd-primary-contrast});
 
     .dd-coupon__amount {
-      border-right-color: $dd-border-subtle;
+      border-right-color: var(--dd-border-subtle, #{$dd-border-subtle});
     }
 
     .dd-coupon__amount-unit,
     .dd-coupon__amount-value {
-      color: $dd-primary-contrast;
+      color: var(--dd-primary-contrast, #{$dd-primary-contrast});
     }
 
     .dd-coupon__amount-limit {
-      color: $dd-primary-contrast;
+      color: var(--dd-primary-contrast, #{$dd-primary-contrast});
       opacity: 0.75;
     }
 
     .dd-coupon__info-title {
-      color: $dd-primary-contrast;
+      color: var(--dd-primary-contrast, #{$dd-primary-contrast});
     }
 
     .dd-coupon__info-desc,
     .dd-coupon__info-time {
-      color: $dd-primary-contrast;
+      color: var(--dd-primary-contrast, #{$dd-primary-contrast});
       opacity: 0.8;
     }
 
     .dd-coupon__action-btn {
       background: transparent;
-      border: 1px solid $dd-primary-contrast;
-      color: $dd-primary-contrast;
+      border: 1px solid var(--dd-primary-contrast, #{$dd-primary-contrast});
+      color: var(--dd-primary-contrast, #{$dd-primary-contrast});
     }
   }
 
   &--success {
-    background: $dd-gradient-success;
-    color: $dd-success-contrast;
+    background: var(--dd-gradient-success, #{$dd-gradient-success});
+    color: var(--dd-success-contrast, #{$dd-success-contrast});
 
     .dd-coupon__amount {
-      border-right-color: $dd-border-subtle;
+      border-right-color: var(--dd-border-subtle, #{$dd-border-subtle});
     }
 
     .dd-coupon__amount-unit,
     .dd-coupon__amount-value {
-      color: $dd-success-contrast;
+      color: var(--dd-success-contrast, #{$dd-success-contrast});
     }
 
     .dd-coupon__amount-limit {
-      color: $dd-success-contrast;
+      color: var(--dd-success-contrast, #{$dd-success-contrast});
       opacity: 0.75;
     }
 
     .dd-coupon__info-title {
-      color: $dd-success-contrast;
+      color: var(--dd-success-contrast, #{$dd-success-contrast});
     }
 
     .dd-coupon__info-desc,
     .dd-coupon__info-time {
-      color: $dd-success-contrast;
+      color: var(--dd-success-contrast, #{$dd-success-contrast});
       opacity: 0.8;
     }
 
     .dd-coupon__action-btn {
       background: transparent;
-      border: 1px solid $dd-success-contrast;
-      color: $dd-success-contrast;
+      border: 1px solid var(--dd-success-contrast, #{$dd-success-contrast});
+      color: var(--dd-success-contrast, #{$dd-success-contrast});
     }
   }
 
   &--warning {
-    background: $dd-gradient-warning;
-    color: $dd-warning-contrast;
+    background: var(--dd-gradient-warning, #{$dd-gradient-warning});
+    color: var(--dd-warning-contrast, #{$dd-warning-contrast});
 
     .dd-coupon__amount {
-      border-right-color: $dd-border-subtle;
+      border-right-color: var(--dd-border-subtle, #{$dd-border-subtle});
     }
 
     .dd-coupon__amount-unit,
     .dd-coupon__amount-value {
-      color: $dd-warning-contrast;
+      color: var(--dd-warning-contrast, #{$dd-warning-contrast});
     }
 
     .dd-coupon__amount-limit {
-      color: $dd-warning-contrast;
+      color: var(--dd-warning-contrast, #{$dd-warning-contrast});
       opacity: 0.75;
     }
 
     .dd-coupon__info-title {
-      color: $dd-warning-contrast;
+      color: var(--dd-warning-contrast, #{$dd-warning-contrast});
     }
 
     .dd-coupon__info-desc,
     .dd-coupon__info-time {
-      color: $dd-warning-contrast;
+      color: var(--dd-warning-contrast, #{$dd-warning-contrast});
       opacity: 0.8;
     }
 
     .dd-coupon__action-btn {
       background: transparent;
-      border: 1px solid $dd-warning-contrast;
-      color: $dd-warning-contrast;
+      border: 1px solid var(--dd-warning-contrast, #{$dd-warning-contrast});
+      color: var(--dd-warning-contrast, #{$dd-warning-contrast});
     }
   }
 
   &--error {
-    background: $dd-gradient-error;
-    color: $dd-error-contrast;
+    background: var(--dd-gradient-error, #{$dd-gradient-error});
+    color: var(--dd-error-contrast, #{$dd-error-contrast});
 
     .dd-coupon__amount {
-      border-right-color: $dd-border-subtle;
+      border-right-color: var(--dd-border-subtle, #{$dd-border-subtle});
     }
 
     .dd-coupon__amount-unit,
     .dd-coupon__amount-value {
-      color: $dd-error-contrast;
+      color: var(--dd-error-contrast, #{$dd-error-contrast});
     }
 
     .dd-coupon__amount-limit {
-      color: $dd-error-contrast;
+      color: var(--dd-error-contrast, #{$dd-error-contrast});
       opacity: 0.75;
     }
 
     .dd-coupon__info-title {
-      color: $dd-error-contrast;
+      color: var(--dd-error-contrast, #{$dd-error-contrast});
     }
 
     .dd-coupon__info-desc,
     .dd-coupon__info-time {
-      color: $dd-error-contrast;
+      color: var(--dd-error-contrast, #{$dd-error-contrast});
       opacity: 0.8;
     }
 
     .dd-coupon__action-btn {
       background: transparent;
-      border: 1px solid $dd-error-contrast;
-      color: $dd-error-contrast;
+      border: 1px solid var(--dd-error-contrast, #{$dd-error-contrast});
+      color: var(--dd-error-contrast, #{$dd-error-contrast});
     }
   }
 }