@didaoktv/didaoui-uniapp 1.2.3 → 1.3.0

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>

package/components/dd-tag/dd-tag.vue

@@ -130,62 +130,62 @@ function onClose(e: Event) {
 // === Filled: 渐变背景 + 反色文字 ===
 .dd-tag--filled {
   &.dd-tag--primary {
-    background: $dd-gradient-primary;
+    background: var(--dd-gradient-primary, #{$dd-gradient-primary});
     color: $dd-color-white;
   }
   &.dd-tag--accent {
-    background: $dd-gradient-accent;
-    color: $dd-accent-contrast;
+    background: var(--dd-gradient-accent, #{$dd-gradient-accent});
+    color: var(--dd-accent-contrast, #{$dd-accent-contrast});
   }
   &.dd-tag--success {
-    background: $dd-success-500;
-    color: $dd-success-contrast;
+    background: var(--dd-success, #{$dd-success});
+    color: var(--dd-success-contrast, #{$dd-success-contrast});
   }
   &.dd-tag--warning {
-    background: $dd-warning-500;
-    color: $dd-warning-contrast;
+    background: var(--dd-warning, #{$dd-warning});
+    color: var(--dd-warning-contrast, #{$dd-warning-contrast});
   }
   &.dd-tag--error {
-    background: $dd-error-500;
-    color: $dd-error-contrast;
+    background: var(--dd-error, #{$dd-error});
+    color: var(--dd-error-contrast, #{$dd-error-contrast});
   }
   &.dd-tag--info {
-    background: $dd-info-500;
-    color: $dd-info-contrast;
+    background: var(--dd-info, #{$dd-info});
+    color: var(--dd-info-contrast, #{$dd-info-contrast});
   }
   &.dd-tag--default {
-    background: $dd-neutral-700;
-    color: $dd-text-secondary;
+    background: var(--dd-surface-container-high, #{$dd-surface-container-high});
+    color: var(--dd-text-secondary, #{$dd-text-secondary});
   }
 }
 
 // === Outlined: 透明背景 + 1px 边框 + 语义色 ===
 .dd-tag--outlined {
   background: transparent;
-  border: 1px solid $dd-border-strong;
-
-  &.dd-tag--primary { color: $dd-primary-400; border-color: $dd-primary-500; }
-  &.dd-tag--accent { color: $dd-accent-300; border-color: $dd-accent-500; }
-  &.dd-tag--success { color: $dd-success-400; border-color: $dd-success-500; }
-  &.dd-tag--warning { color: $dd-warning-400; border-color: $dd-warning-500; }
-  &.dd-tag--error { color: $dd-error-400; border-color: $dd-error-500; }
-  &.dd-tag--info { color: $dd-info-400; border-color: $dd-info-500; }
-  &.dd-tag--default { color: $dd-text-secondary; border-color: $dd-border-strong; }
+  border: 1px solid var(--dd-border-strong, #{$dd-border-strong});
+
+  &.dd-tag--primary { color: var(--dd-primary-400, #{$dd-primary-400}); border-color: var(--dd-primary, #{$dd-primary}); }
+  &.dd-tag--accent { color: var(--dd-accent-300, #{$dd-accent-300}); border-color: var(--dd-accent, #{$dd-accent}); }
+  &.dd-tag--success { color: var(--dd-success-400, #{$dd-success-400}); border-color: var(--dd-success, #{$dd-success}); }
+  &.dd-tag--warning { color: var(--dd-warning-400, #{$dd-warning-400}); border-color: var(--dd-warning, #{$dd-warning}); }
+  &.dd-tag--error { color: var(--dd-error-400, #{$dd-error-400}); border-color: var(--dd-error, #{$dd-error}); }
+  &.dd-tag--info { color: var(--dd-info-400, #{$dd-info-400}); border-color: var(--dd-info, #{$dd-info}); }
+  &.dd-tag--default { color: var(--dd-text-secondary, #{$dd-text-secondary}); border-color: var(--dd-border-strong, #{$dd-border-strong}); }
 }
 
 // === Dot: elevated 背景 + 彩色点 + 次级色文字 ===
 .dd-tag--dot {
-  background: $dd-bg-elevated;
-  border: 1px solid $dd-border-default;
-  color: $dd-text-secondary;
-
-  &.dd-tag--primary .dd-tag__dot { background: $dd-primary-500; }
-  &.dd-tag--accent .dd-tag__dot { background: $dd-accent-500; }
-  &.dd-tag--success .dd-tag__dot { background: $dd-success-500; }
-  &.dd-tag--warning .dd-tag__dot { background: $dd-warning-500; }
-  &.dd-tag--error .dd-tag__dot { background: $dd-error-500; }
-  &.dd-tag--info .dd-tag__dot { background: $dd-info-500; }
-  &.dd-tag--default .dd-tag__dot { background: $dd-neutral-400; }
+  background: var(--dd-bg-elevated, #{$dd-bg-elevated});
+  border: 1px solid var(--dd-border-default, #{$dd-border-default});
+  color: var(--dd-text-secondary, #{$dd-text-secondary});
+
+  &.dd-tag--primary .dd-tag__dot { background: var(--dd-primary, #{$dd-primary}); }
+  &.dd-tag--accent .dd-tag__dot { background: var(--dd-accent, #{$dd-accent}); }
+  &.dd-tag--success .dd-tag__dot { background: var(--dd-success, #{$dd-success}); }
+  &.dd-tag--warning .dd-tag__dot { background: var(--dd-warning, #{$dd-warning}); }
+  &.dd-tag--error .dd-tag__dot { background: var(--dd-error, #{$dd-error}); }
+  &.dd-tag--info .dd-tag__dot { background: var(--dd-info, #{$dd-info}); }
+  &.dd-tag--default .dd-tag__dot { background: var(--dd-muted, #{$dd-muted}); }
 }
 
 .dd-tag--closable {

package/components/dd-text/dd-text.vue

@@ -198,52 +198,52 @@ export default {
 
     &__price {
         font-size: 14px;
-        color: $dd-text-secondary;
+        color: var(--dd-text-secondary, #{$dd-text-secondary});
     }
 
     &__value {
         font-size: 14px;
         @include flex;
-        color: $dd-text-secondary;
+        color: var(--dd-text-secondary, #{$dd-text-secondary});
         flex-wrap: wrap;
         // flex: 1;
         text-overflow: ellipsis;
         align-items: center;
 
         &--primary {
-            color: $dd-primary-400;
+            color: var(--dd-primary-400, #{$dd-primary-400});
         }
 
         &--warning {
-            color: $dd-warning-400;
+            color: var(--dd-warning-400, #{$dd-warning-400});
         }
 
         &--success {
-            color: $dd-success-400;
+            color: var(--dd-success-400, #{$dd-success-400});
         }
 
         &--info {
-            color: $dd-info-400;
+            color: var(--dd-info-400, #{$dd-info-400});
         }
 
         &--error {
-            color: $dd-error-400;
+            color: var(--dd-error-400, #{$dd-error-400});
         }
 
         &--main {
-            color: $dd-text-primary;
+            color: var(--dd-text-primary, #{$dd-text-primary});
         }
 
         &--content {
-            color: $dd-text-secondary;
+            color: var(--dd-text-secondary, #{$dd-text-secondary});
         }
 
         &--tips {
-            color: $dd-text-tertiary;
+            color: var(--dd-text-tertiary, #{$dd-text-tertiary});
         }
 
         &--light {
-            color: $dd-text-tertiary;
+            color: var(--dd-text-tertiary, #{$dd-text-tertiary});
         }
     }
 }

package/components/dd-toast/dd-toast.vue

@@ -158,23 +158,23 @@ const iconName = computed(() => {
     font-weight: 700;
 
     &--success {
-      color: $dd-success-400;
+      color: var(--dd-success-400, #{$dd-success-400});
     }
 
     &--error {
-      color: $dd-error-400;
+      color: var(--dd-error-400, #{$dd-error-400});
     }
 
     &--warning {
-      color: $dd-warning-400;
+      color: var(--dd-warning-400, #{$dd-warning-400});
     }
   }
 
   &__spinner {
     width: $dd-size-icon-xl;
     height: $dd-size-icon-xl;
-    border: 6rpx solid $dd-border-default;
-    border-top-color: $dd-primary-400;
+    border: 6rpx solid var(--dd-border-default, #{$dd-border-default});
+    border-top-color: var(--dd-primary-400, #{$dd-primary-400});
     border-radius: 50%;
     animation: dd-toast-spin 0.8s linear infinite;
   }