@didaoktv/didaoui-uniapp 1.2.2 → 1.3.0

package/components/dd-icon/dd-icon.vue

@@ -197,7 +197,7 @@ const iconStyle = computed(() => {
     right: -$dd-space-1;
     width: 12rpx;
     height: 12rpx;
-    background: $dd-error-500;
+    background: var(--dd-error, #{$dd-error});
     border-radius: 50%;
   }
 

package/components/dd-image/dd-image.vue

@@ -114,7 +114,7 @@ watch(
   position: relative;
   display: inline-block;
   overflow: hidden;
-  background: $dd-neutral-800; // var(--dd-bg-inset) 占位底色
+  background: var(--dd-surface-container-low, #{$dd-surface-container-low}); // var(--dd-bg-inset) 占位底色
   vertical-align: middle;
 
   &--round {
@@ -132,21 +132,21 @@ watch(
   position: absolute;
   inset: 0;
   @include dd-flex-center;
-  background: $dd-neutral-800;
+  background: var(--dd-surface-container-low, #{$dd-surface-container-low});
 }
 
 .dd-image__spinner {
   width: $dd-size-icon-lg;
   height: $dd-size-icon-lg;
-  border: $dd-space-1 solid $dd-border-default;
-  border-top-color: $dd-primary-500;
+  border: $dd-space-1 solid var(--dd-border-default, #{$dd-border-default});
+  border-top-color: var(--dd-primary, #{$dd-primary});
   border-radius: 50%;
   animation: dd-image-spin 0.8s linear infinite;
 }
 
 .dd-image__error-icon {
   font-size: $dd-size-icon-lg; // 24px
-  color: $dd-text-tertiary;
+  color: var(--dd-text-tertiary, #{$dd-text-tertiary});
   line-height: 1;
 }
 

package/components/dd-input/dd-input.vue

@@ -115,8 +115,8 @@ function toggleVisible() {
   gap: $dd-space-2;
   height: 88rpx;
   padding: 0 $dd-space-4;
-  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-md;
   box-sizing: border-box;
   @include dd-transition(border-color 0.2s, box-shadow 0.2s);
@@ -126,7 +126,7 @@ function toggleVisible() {
     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;
   }
@@ -142,8 +142,8 @@ function toggleVisible() {
     width: 36rpx;
     height: 36rpx;
     border-radius: 50%;
-    background: $dd-neutral-700;
-    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;
   }
@@ -155,13 +155,13 @@ function toggleVisible() {
   }
 
   &--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});
   }
 
   &--error {
-    border-color: $dd-error-500;
-    box-shadow: $dd-shadow-glow-error-md;
+    border-color: var(--dd-error, #{$dd-error});
+    box-shadow: var(--dd-shadow-glow-error-md, #{$dd-shadow-glow-error-md});
   }
 
   &--disabled {

package/components/dd-keyboard/dd-keyboard.vue

@@ -150,11 +150,11 @@
 		&__tooltip {
 			@include flex;
 			justify-content: space-between;
-			background-color: $dd-bg-elevated;
+			background-color: var(--dd-bg-elevated, #{$dd-bg-elevated});
 			padding: 14px 12px;
 
 			&__item {
-				color: $dd-text-primary;
+				color: var(--dd-text-primary, #{$dd-text-primary});
 				flex: 1;
 				text-align: center;
 				font-size: 15px;
@@ -162,16 +162,16 @@
 
 			&__submit {
 				text-align: right;
-				color: $dd-primary-400;
+				color: var(--dd-primary-400, #{$dd-primary-400});
 			}
 
 			&__cancel {
 				text-align: left;
-				color: $dd-text-tertiary;
+				color: var(--dd-text-tertiary, #{$dd-text-tertiary});
 			}
 
 			&__tips {
-				color: $dd-text-tertiary;
+				color: var(--dd-text-tertiary, #{$dd-text-tertiary});
 			}
 		}
 	}

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

@@ -74,8 +74,8 @@ function onClick(e: Event) {
   min-height: $dd-space-7;
   padding: 0 $dd-space-4;
   box-sizing: border-box;
-  background: $dd-bg-elevated;
-  @include dd-hairline-bottom($dd-border-default);
+  background: var(--dd-bg-elevated, #{$dd-bg-elevated});
+  @include dd-hairline-bottom(var(--dd-border-default, #{$dd-border-default}));
 
   &__icon {
     flex-shrink: 0;
@@ -90,7 +90,7 @@ function onClick(e: Event) {
   &__icon-text {
     font-size: $dd-font-size-h2;
     line-height: 1;
-    color: $dd-primary-400;
+    color: var(--dd-primary-400, #{$dd-primary-400});
   }
 
   &__content {
@@ -104,13 +104,13 @@ function onClick(e: Event) {
   &__title {
     font-size: $dd-font-size-body;
     font-weight: 500;
-    color: $dd-text-primary;
+    color: var(--dd-text-primary, #{$dd-text-primary});
     @include dd-ellipsis(1);
   }
 
   &__subtitle {
     font-size: $dd-font-size-caption;
-    color: $dd-text-tertiary;
+    color: var(--dd-text-tertiary, #{$dd-text-tertiary});
     @include dd-ellipsis(1);
   }
 
@@ -125,12 +125,12 @@ function onClick(e: Event) {
   &__value {
     font-size: $dd-font-size-body;
     font-weight: 500;
-    color: $dd-primary-400;
+    color: var(--dd-primary-400, #{$dd-primary-400});
   }
 
   &__arrow {
     font-size: $dd-font-size-h3;
-    color: $dd-text-tertiary;
+    color: var(--dd-text-tertiary, #{$dd-text-tertiary});
     line-height: 1;
     margin-left: $dd-space-1;
   }
@@ -146,7 +146,7 @@ function onClick(e: Event) {
   }
 
   &--active {
-    background: $dd-surface-container-highest;
+    background: var(--dd-surface-container-highest, #{$dd-surface-container-highest});
   }
 }
 </style>

package/components/dd-loading/dd-loading.vue

@@ -61,7 +61,7 @@ const coreStyle = computed(() => (props.color ? { '--dd-loading-color': props.co
 @import '../../scss/mixins';
 
 .dd-loading {
-  --dd-loading-color: #{$dd-primary-400};
+  --dd-loading-color: var(--dd-primary-400, #{$dd-primary-400});
   display: inline-flex;
   flex-direction: column;
   align-items: center;
@@ -80,7 +80,7 @@ const coreStyle = computed(() => (props.color ? { '--dd-loading-color': props.co
   &__mask {
     position: absolute;
     inset: 0;
-    background: $dd-color-overlay-strong;
+    background: var(--dd-color-overlay-strong, #{$dd-color-overlay-strong});
     /* #ifdef H5 */
     backdrop-filter: blur(8rpx);
     -webkit-backdrop-filter: blur(8rpx);
@@ -163,11 +163,11 @@ const coreStyle = computed(() => (props.color ? { '--dd-loading-color': props.co
     height: 24rpx;
     border-radius: 50%;
     background: var(--dd-loading-color);
-    box-shadow: $dd-shadow-glow-gold-lg;
+    box-shadow: var(--dd-shadow-glow-gold-lg, #{$dd-shadow-glow-gold-lg});
   }
 
   &__text {
-    color: $dd-text-secondary;
+    color: var(--dd-text-secondary, #{$dd-text-secondary});
     font-size: $dd-font-size-body;
     line-height: 1.4;
   }

package/components/dd-loadmore/dd-loadmore.vue

@@ -130,7 +130,7 @@ function onClick() {
   }
 
   &__spinner {
-    border: $dd-space-1 solid $dd-border-default;
+    border: $dd-space-1 solid var(--dd-border-default, #{$dd-border-default});
     border-radius: 50%;
     box-sizing: border-box;
     animation: dd-lm-spin 0.8s linear infinite;

package/components/dd-mini-program-navbar/dd-mini-program-navbar.vue

@@ -144,7 +144,7 @@ function onSearchConfirm(e: any) {
 .dd-mp-navbar {
   width: 100%;
   @include dd-glass;
-  border-bottom: 1px solid $dd-glass-border;
+  border-bottom: 1px solid var(--dd-glass-border, #{$dd-glass-border});
   position: relative;
   z-index: $dd-z-index-fixed;
 
@@ -185,15 +185,15 @@ function onSearchConfirm(e: any) {
   &__arrow {
     width: $dd-space-3;
     height: $dd-space-3;
-    border-left: $dd-space-1 solid $dd-primary-400;
-    border-bottom: $dd-space-1 solid $dd-primary-400;
+    border-left: $dd-space-1 solid var(--dd-primary-400, #{$dd-primary-400});
+    border-bottom: $dd-space-1 solid var(--dd-primary-400, #{$dd-primary-400});
     transform: rotate(45deg);
   }
 
   &__back-text {
     font-size: $dd-font-size-body;
     font-weight: 500;
-    color: $dd-primary-400;
+    color: var(--dd-primary-400, #{$dd-primary-400});
   }
 
   &__center {
@@ -205,7 +205,7 @@ function onSearchConfirm(e: any) {
   &__title {
     font-size: $dd-font-size-h4;
     font-weight: 600;
-    color: $dd-text-primary;
+    color: var(--dd-text-primary, #{$dd-text-primary});
     max-width: 60vw;
     @include dd-ellipsis(1);
     text-align: center;
@@ -214,7 +214,7 @@ function onSearchConfirm(e: any) {
   &__search {
     width: 100%;
     height: $dd-space-6;
-    background: $dd-surface-container;
+    background: var(--dd-surface-container, #{$dd-surface-container});
     border-radius: $dd-radius-full;
     display: flex;
     align-items: center;
@@ -230,7 +230,7 @@ function onSearchConfirm(e: any) {
   &__search-input {
     flex: 1;
     font-size: $dd-font-size-body;
-    color: $dd-text-primary;
+    color: var(--dd-text-primary, #{$dd-text-primary});
   }
 
   &__right {

package/components/dd-modal/dd-modal.vue

@@ -170,7 +170,7 @@ onUnmounted(() => {
   &__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;
@@ -192,10 +192,10 @@ onUnmounted(() => {
     z-index: 1001;
     max-width: 720rpx; // 360px 上限
     max-height: 80vh;
-    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-xl;
-    box-shadow: $dd-shadow-4;
+    box-shadow: var(--dd-shadow-4, #{$dd-shadow-4});
     padding: $dd-space-4 $dd-space-5;
     display: flex;
     flex-direction: column;
@@ -216,10 +216,10 @@ onUnmounted(() => {
     transform: translateY(100%);
     z-index: 1001;
     max-height: 85vh;
-    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-xl $dd-radius-xl 0 0;
-    box-shadow: $dd-shadow-4;
+    box-shadow: var(--dd-shadow-4, #{$dd-shadow-4});
     display: flex;
     flex-direction: column;
     transition: transform 0.3s ease-out;
@@ -233,7 +233,7 @@ onUnmounted(() => {
     width: 72rpx;
     height: 8rpx;
     border-radius: $dd-radius-full;
-    background: $dd-neutral-700;
+    background: var(--dd-border-default, #{$dd-border-default});
     margin: 16rpx auto 8rpx;
     flex-shrink: 0;
   }
@@ -250,7 +250,7 @@ onUnmounted(() => {
   &__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});
   }
 
   &__close {
@@ -261,8 +261,8 @@ onUnmounted(() => {
     width: 64rpx;
     height: 64rpx;
     border-radius: $dd-radius-full;
-    background: $dd-gradient-primary;
-    color: $dd-neutral-900;
+    background: var(--dd-gradient-primary, #{$dd-gradient-primary});
+    color: var(--dd-primary-contrast, #{$dd-primary-contrast});
     font-size: 36rpx;
     @include dd-flex-center;
   }

package/components/dd-navigation/dd-navigation.vue

@@ -71,11 +71,11 @@ function onSelect(index: number) {
   align-items: center;
   width: 100%;
   height: 112rpx;
-  background: $dd-surface;
+  background: var(--dd-surface, #{$dd-surface});
   box-sizing: border-box;
 
   &--border {
-    @include dd-hairline-top($dd-border-subtle);
+    @include dd-hairline-top(var(--dd-border-subtle, #{$dd-border-subtle}));
   }
 
   &--fixed {
@@ -94,11 +94,11 @@ function onSelect(index: number) {
     @include dd-flex-center;
     flex-direction: column;
     gap: $dd-space-1;
-    color: $dd-text-tertiary;
+    color: var(--dd-text-tertiary, #{$dd-text-tertiary});
     @include dd-transition(color 0.3s);
 
     &--active {
-      color: $dd-primary-400;
+      color: var(--dd-primary-400, #{$dd-primary-400});
       .dd-nav__icon {
         text-shadow: 0 0 12px rgba(245, 166, 35, 0.5);
       }
@@ -116,8 +116,8 @@ function onSelect(index: number) {
     width: $dd-space-5;
     height: $dd-space-1;
     border-radius: 0 0 $dd-radius-sm $dd-radius-sm;
-    background: $dd-gradient-primary-h;
-    box-shadow: $dd-shadow-glow-gold-sm;
+    background: var(--dd-gradient-primary-h, #{$dd-gradient-primary-h});
+    box-shadow: var(--dd-shadow-glow-gold-sm, #{$dd-shadow-glow-gold-sm});
   }
 
   &__icon {

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

@@ -135,7 +135,7 @@
 <style lang="scss" scoped>
 @import '../../scss/variables';
 @import '../../scss/dd-shared';
-	$dd-number-keyboard-background-color: $dd-bg-section !default;
+	$dd-number-keyboard-background-color: var(--dd-bg-section, #{$dd-bg-section}) !default;
 	$dd-number-keyboard-padding:8px 10rpx 8px 10rpx !default;
 	$dd-number-keyboard-button-width:222rpx !default;
 	$dd-number-keyboard-button-margin:4px 6rpx !default;
@@ -144,13 +144,13 @@
 	$dd-number-keyboard-button-border-bottom-left-radius:4px !default;
 	$dd-number-keyboard-button-border-bottom-right-radius:4px !default;
 	$dd-number-keyboard-button-height: 90rpx!default;
-	$dd-number-keyboard-button-background-color:$dd-surface-container-high !default;
-	$dd-number-keyboard-button-box-shadow:0 2px 0px $dd-bg !default;
+	$dd-number-keyboard-button-background-color:var(--dd-surface-container-high, #{$dd-surface-container-high}) !default;
+	$dd-number-keyboard-button-box-shadow:0 2px 0px var(--dd-bg, #{$dd-bg}) !default;
 	$dd-number-keyboard-text-font-size:20px !default;
 	$dd-number-keyboard-text-font-weight:500 !default;
-	$dd-number-keyboard-text-color:$dd-text-primary !default;
-	$dd-number-keyboard-gray-background-color:$dd-surface-container-highest !default;
-	$dd-number-keyboard-dd-keyboard-hover-background-color: $dd-surface-hover !default;
+	$dd-number-keyboard-text-color:var(--dd-text-primary, #{$dd-text-primary}) !default;
+	$dd-number-keyboard-gray-background-color:var(--dd-surface-container-highest, #{$dd-surface-container-highest}) !default;
+	$dd-number-keyboard-dd-keyboard-hover-background-color: var(--dd-surface-hover, #{$dd-surface-hover}) !default;
 
 	.dd-keyboard {
 		@include flex;

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

@@ -132,7 +132,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-lg $dd-radius-lg 0 0;
     transform: translateY(100%);
     @include dd-transition(transform 0.3s);
@@ -151,24 +151,24 @@ 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 {
     flex: 1;
     text-align: center;
     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-500;
+    color: var(--dd-primary, #{$dd-primary});
   }
 
   &__body {
@@ -185,7 +185,7 @@ function onConfirm() {
   }
   &__item-text {
     font-size: 28rpx;
-    color: $dd-text-primary;
+    color: var(--dd-text-primary, #{$dd-text-primary});
     @include dd-ellipsis(1);
   }
 
@@ -193,11 +193,11 @@ function onConfirm() {
     position: absolute;
     inset: 0;
     @include dd-flex-center;
-    background: rgba($dd-neutral-800, 0.6);
+    background: var(--dd-color-overlay-strong, #{$dd-color-overlay-strong});
   }
   &__layer-text {
     font-size: 24rpx;
-    color: $dd-text-tertiary;
+    color: var(--dd-text-tertiary, #{$dd-text-tertiary});
   }
 }
 </style>

package/components/dd-popover/dd-popover.vue

@@ -116,14 +116,14 @@ provide('ddPopover', {
     min-width: 240rpx;
     max-width: 480rpx;
     border-radius: $dd-radius-lg;
-    box-shadow: $dd-shadow-2;
+    box-shadow: var(--dd-shadow-2, #{$dd-shadow-2});
     overflow: visible;
     z-index: 2000;
 
     &--light {
-      background: $dd-bg-elevated;
-      color: $dd-text-primary;
-      .dd-popover__arrow { background: $dd-bg-elevated; }
+      background: var(--dd-bg-elevated, #{$dd-bg-elevated});
+      color: var(--dd-text-primary, #{$dd-text-primary});
+      .dd-popover__arrow { background: var(--dd-bg-elevated, #{$dd-bg-elevated}); }
     }
     &--dark {
       background: $dd-neutral-700;

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

@@ -62,11 +62,11 @@ function onClick() {
 
   // 首项不显示顶部分隔线，其余项之间用 hairline 分隔
   &:not(:first-child) {
-    @include dd-hairline-top($dd-border-default);
+    @include dd-hairline-top(var(--dd-border-default, #{$dd-border-default}));
   }
 
   &:active {
-    background: $dd-surface-container;
+    background: var(--dd-surface-container, #{$dd-surface-container});
   }
 
   &--disabled {

package/components/dd-popup/dd-popup.vue

@@ -154,7 +154,7 @@ onUnmounted(() => {
   &__overlay {
     position: fixed;
     inset: 0;
-    background: $dd-color-overlay-strong;
+    background: var(--dd-color-overlay-strong, #{$dd-color-overlay-strong});
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
     opacity: 0;
@@ -167,8 +167,8 @@ onUnmounted(() => {
 
   &__panel {
     position: fixed;
-    background: $dd-bg-elevated;
-    box-shadow: $dd-shadow-3;
+    background: var(--dd-bg-elevated, #{$dd-bg-elevated});
+    box-shadow: var(--dd-shadow-3, #{$dd-shadow-3});
     transition: transform var(--dd-popup-duration, 0.3s) ease,
                 opacity var(--dd-popup-duration, 0.3s) ease;
 
@@ -225,7 +225,7 @@ onUnmounted(() => {
     position: absolute;
     width: 56rpx;
     height: 56rpx;
-    color: $dd-text-tertiary;
+    color: var(--dd-text-tertiary, #{$dd-text-tertiary});
     font-size: 44rpx;
     @include dd-flex-center;
     z-index: 2;

package/components/dd-progress/dd-progress.vue

@@ -159,7 +159,7 @@ function stepStatus(i: number): 'done' | 'current' | 'pending' {
 
   &__text {
     font-size: $dd-font-size-caption;
-    color: $dd-text-secondary;
+    color: var(--dd-text-secondary, #{$dd-text-secondary});
     font-variant-numeric: tabular-nums;
     flex-shrink: 0;
   }
@@ -174,14 +174,14 @@ function stepStatus(i: number): 'done' | 'current' | 'pending' {
 
   &__circle-mask {
     border-radius: 50%;
-    background: $dd-surface;
+    background: var(--dd-surface, #{$dd-surface});
     @include dd-flex-center;
   }
 
   &__circle-text {
     font-size: $dd-font-size-lead;
     font-weight: 700;
-    color: $dd-text-primary;
+    color: var(--dd-text-primary, #{$dd-text-primary});
     font-variant-numeric: tabular-nums;
   }
 
@@ -213,7 +213,7 @@ function stepStatus(i: number): 'done' | 'current' | 'pending' {
 
     &--done,
     &--current {
-      background: $dd-gradient-primary;
+      background: var(--dd-gradient-primary, #{$dd-gradient-primary});
       box-shadow: 0 0 12rpx rgba(245, 166, 35, 0.5);
     }
 
@@ -230,7 +230,7 @@ function stepStatus(i: number): 'done' | 'current' | 'pending' {
     @include dd-transition(background 0.3s ease);
 
     &--done {
-      background: $dd-primary-500;
+      background: var(--dd-primary, #{$dd-primary});
     }
   }
 }

package/components/dd-pull-refresh/dd-pull-refresh.vue

@@ -183,7 +183,7 @@ watch(
     position: relative;
     height: 100%;
     z-index: 1;
-    background: $dd-bg;
+    background: var(--dd-bg, #{$dd-bg});
 
     &--anim {
       transition: transform 300ms ease;
@@ -209,15 +209,15 @@ watch(
   &__spinner {
     width: $dd-size-icon-sm;
     height: $dd-size-icon-sm;
-    border: 4rpx solid $dd-border-default;
-    border-top-color: $dd-primary-500;
+    border: 4rpx solid var(--dd-border-default, #{$dd-border-default});
+    border-top-color: var(--dd-primary, #{$dd-primary});
     border-radius: 50%;
     animation: dd-pr-spin 0.8s linear infinite;
   }
 
   &__text {
     font-size: $dd-font-size-body;
-    color: $dd-text-tertiary;
+    color: var(--dd-text-tertiary, #{$dd-text-tertiary});
   }
 
   &__scroll {

package/components/dd-radio/dd-radio.vue

@@ -66,7 +66,7 @@ function onToggle() {
     @include dd-flex-center;
     flex-shrink: 0;
     border-radius: $dd-radius-full;
-    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);
@@ -82,13 +82,13 @@ function onToggle() {
 
   &__label {
     font-size: 28rpx;
-    color: $dd-text-primary;
+    color: var(--dd-text-primary, #{$dd-text-primary});
   }
 
   &--checked .dd-radio__outer {
-    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});
   }
 
   &--checked .dd-radio__inner {