@didaoktv/didaoui-uniapp 1.2.3 → 1.3.0

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});
       }
     }
   }

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>