@didaoktv/didaoui-uniapp 1.2.2 → 1.3.0

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

package/components/dd-top-navbar/dd-top-navbar.vue

@@ -130,7 +130,7 @@ function onBack() {
   }
 
   &--border &__content {
-    @include dd-hairline-bottom($dd-border-subtle);
+    @include dd-hairline-bottom(var(--dd-border-subtle, #{$dd-border-subtle}));
   }
 
   &__left {
@@ -148,13 +148,13 @@ function onBack() {
     display: flex;
     align-items: center;
     font-size: 56rpx;
-    color: $dd-primary-400;
+    color: var(--dd-primary-400, #{$dd-primary-400});
     text-shadow: 0 0 8px rgba(245, 166, 35, 0.4);
   }
 
   &__back-text {
     font-size: $dd-font-size-body;
-    color: $dd-primary-400;
+    color: var(--dd-primary-400, #{$dd-primary-400});
   }
 
   &__title {
@@ -165,7 +165,7 @@ function onBack() {
     max-width: 50%;
     font-size: $dd-font-size-lead;
     font-weight: 700;
-    color: $dd-text-primary;
+    color: var(--dd-text-primary, #{$dd-text-primary});
     @include dd-ellipsis(1);
   }
 

package/components/dd-upload/dd-upload.vue

@@ -140,7 +140,7 @@ function onPreview(index: number) {
     width: 160rpx;
     height: 160rpx;
     border-radius: $dd-radius-md;
-    background: $dd-neutral-800;
+    background: var(--dd-surface-container-low, #{$dd-surface-container-low});
     overflow: hidden;
   }
 
@@ -157,7 +157,7 @@ function onPreview(index: number) {
     width: 36rpx;
     height: 36rpx;
     border-radius: 50%;
-    background: $dd-error;
+    background: var(--dd-error, #{$dd-error});
     color: $dd-color-white;
     font-size: $dd-font-size-caption;
     @include dd-flex-center;
@@ -167,16 +167,16 @@ function onPreview(index: number) {
     @include dd-flex-center;
     width: 160rpx;
     height: 160rpx;
-    border: 1px dashed $dd-border-default;
+    border: 1px dashed var(--dd-border-default, #{$dd-border-default});
     border-radius: $dd-radius-md;
-    background: $dd-neutral-800;
-    color: $dd-text-tertiary;
+    background: var(--dd-surface-container-low, #{$dd-surface-container-low});
+    color: var(--dd-text-tertiary, #{$dd-text-tertiary});
     font-size: $dd-font-size-h1;
     box-sizing: border-box;
     @include dd-transition(background 0.2s);
 
     &--active {
-      background: $dd-border-default;
+      background: var(--dd-border-default, #{$dd-border-default});
     }
   }
 

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

@@ -111,7 +111,7 @@ function onClick() {
 
   &--press {
     transform: scale(0.99);
-    background: $dd-surface-hover;
+    background: var(--dd-surface-hover, #{$dd-surface-hover});
   }
 }
 
@@ -127,7 +127,7 @@ function onClick() {
   min-width: 0;
   font-size: $dd-font-size-body;
   font-weight: $dd-font-weight-lead;
-  color: $dd-text-primary;
+  color: var(--dd-text-primary, #{$dd-text-primary});
   @include dd-ellipsis(1);
 }
 
@@ -137,11 +137,11 @@ function onClick() {
   padding: 2rpx 14rpx;
   border-radius: $dd-radius-sm;
 
-  &--service { color: $dd-primary-400; background: rgba(245, 166, 35, 0.12); }
-  &--repair { color: $dd-error-400; background: rgba(229, 57, 53, 0.12); }
-  &--feedback { color: $dd-accent-300; background: rgba(45, 75, 160, 0.2); }
-  &--decoration { color: $dd-vip-500; background: rgba(156, 39, 176, 0.14); }
-  &--todo { color: $dd-text-secondary; background: $dd-glass-border; }
+  &--service { color: var(--dd-primary-400, #{$dd-primary-400}); background: rgba(245, 166, 35, 0.12); }
+  &--repair { color: var(--dd-error-400, #{$dd-error-400}); background: rgba(229, 57, 53, 0.12); }
+  &--feedback { color: var(--dd-accent-300, #{$dd-accent-300}); background: rgba(45, 75, 160, 0.2); }
+  &--decoration { color: var(--dd-vip, #{$dd-vip-500}); background: rgba(156, 39, 176, 0.14); }
+  &--todo { color: var(--dd-text-secondary, #{$dd-text-secondary}); background: var(--dd-glass-border, #{$dd-glass-border}); }
 }
 
 .dd-workorder-card__checklist {
@@ -166,28 +166,28 @@ function onClick() {
   height: 40rpx;
   flex-shrink: 0;
   border-radius: $dd-radius-sm;
-  border: 2rpx solid $dd-border-strong;
+  border: 2rpx solid var(--dd-border-strong, #{$dd-border-strong});
   @include dd-flex-center;
 
   &--on {
-    background: $dd-gradient-primary;
+    background: var(--dd-gradient-primary, #{$dd-gradient-primary});
     border-color: transparent;
   }
 }
 
 .dd-workorder-card__box-check {
   font-size: $dd-font-size-caption;
-  color: $dd-neutral-900;
+  color: var(--dd-primary-contrast, #{$dd-primary-contrast});
   line-height: 1;
 }
 
 .dd-workorder-card__check-text {
   flex: 1;
   font-size: $dd-font-size-body;
-  color: $dd-text-primary;
+  color: var(--dd-text-primary, #{$dd-text-primary});
 
   &--done {
-    color: $dd-text-tertiary;
+    color: var(--dd-text-tertiary, #{$dd-text-tertiary});
     text-decoration: line-through;
   }
 }
@@ -202,28 +202,28 @@ function onClick() {
 .dd-workorder-card__progress-track {
   flex: 1;
   height: $dd-space-1;
-  background: $dd-surface-container-high;
+  background: var(--dd-surface-container-high, #{$dd-surface-container-high});
   border-radius: $dd-radius-full;
   overflow: hidden;
 }
 
 .dd-workorder-card__progress-bar {
   height: 100%;
-  background: $dd-gradient-primary-h;
+  background: var(--dd-gradient-primary-h, #{$dd-gradient-primary-h});
   border-radius: $dd-radius-full;
   transition: width 0.3s ease;
 }
 
 .dd-workorder-card__progress-text {
   font-size: $dd-font-size-caption;
-  color: $dd-text-tertiary;
+  color: var(--dd-text-tertiary, #{$dd-text-tertiary});
   font-family: $dd-font-mono;
 }
 
 .dd-workorder-card__time {
   margin-top: $dd-space-1;
   font-size: $dd-font-size-caption;
-  color: $dd-text-tertiary;
+  color: var(--dd-text-tertiary, #{$dd-text-tertiary});
 }
 
 .dd-workorder-card__actions {
@@ -231,7 +231,7 @@ function onClick() {
   justify-content: flex-end;
   gap: $dd-space-3;
   margin-top: $dd-space-2;
-  border-top: 1px solid $dd-border-subtle;
+  border-top: 1px solid var(--dd-border-subtle, #{$dd-border-subtle});
   padding-top: $dd-space-2;
 }
 </style>

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@didaoktv/didaoui-uniapp",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "description": "帝到KTV UniApp 组件库",
   "main": "index.ts",
   "types": "index.ts",
   "exports": {
     ".": "./index.ts",
     "./uni.scss": "./uni.scss",
+    "./scss/theme": "./scss/theme.scss",
     "./scss/variables": "./scss/_variables.scss",
     "./scss/mixins": "./scss/_mixins.scss",
     "./scss/functions": "./scss/_functions.scss",

package/scss/_mixins.scss

@@ -8,8 +8,8 @@
   @if $intensity == sm { $blur: $dd-glass-blur-sm; }
   @else if $intensity == md { $blur: $dd-glass-blur-md; }
   @else if $intensity == lg { $blur: $dd-glass-blur-lg; }
-  background: $dd-glass-bg;
-  border: 1px solid $dd-glass-border;
+  background: var(--dd-glass-bg, #{$dd-glass-bg});
+  border: 1px solid var(--dd-glass-border, #{$dd-glass-border});
   /* #ifdef H5 */
   backdrop-filter: blur($blur);
   -webkit-backdrop-filter: blur($blur);
@@ -17,15 +17,15 @@
 }
 
 @mixin dd-glass-strong {
-  background: $dd-glass-bg-strong;
-  border: 1px solid $dd-glass-border;
+  background: var(--dd-glass-bg-strong, #{$dd-glass-bg-strong});
+  border: 1px solid var(--dd-glass-border, #{$dd-glass-border});
   /* #ifdef H5 */
   backdrop-filter: blur($dd-glass-blur);
   -webkit-backdrop-filter: blur($dd-glass-blur);
   /* #endif */
 }
 
-// 发光阴影 — 支持 size: sm / md / lg
+// 发光阴影 — 支持 size: sm / md / lg（动态拼 --dd-shadow-glow-* 变量名，主题可覆盖）
 @mixin dd-glow($color: gold, $size: md) {
   $shadows: (
     gold-sm: $dd-shadow-glow-gold-sm,
@@ -51,17 +51,17 @@
     vip-lg: $dd-shadow-glow-vip-lg,
   );
   $key: $color + '-' + $size;
-  box-shadow: map-get($shadows, $key);
+  box-shadow: var(--dd-shadow-glow-#{$key}, #{map-get($shadows, $key)});
 }
 
-// 文字渐变
+// 文字渐变（动态拼 --dd-gradient-text-* 变量名，主题可覆盖）
 @mixin dd-text-gradient($color: gold) {
   $gradients: (
     gold: $dd-gradient-text-gold,
     'gold-light': $dd-gradient-text-gold-light,
     blue: $dd-gradient-text-blue,
   );
-  background: map-get($gradients, $color);
+  background: var(--dd-gradient-text-#{$color}, #{map-get($gradients, $color)});
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
@@ -91,8 +91,8 @@
   padding-bottom: env(safe-area-inset-bottom);
 }
 
-// 1px 边框 (retina)
-@mixin dd-hairline-bottom($color: $dd-border-default) {
+// 1px 边框 (retina)——默认色走主题变量，浅色下自动翻转
+@mixin dd-hairline-bottom($color: var(--dd-border-default, #{$dd-border-default})) {
   position: relative;
   &::after {
     content: '';
@@ -107,7 +107,7 @@
   }
 }
 
-@mixin dd-hairline-top($color: $dd-border-default) {
+@mixin dd-hairline-top($color: var(--dd-border-default, #{$dd-border-default})) {
   position: relative;
   &::before {
     content: '';

package/scss/_theme-tokens.scss

@@ -0,0 +1,183 @@
+// ============================================================
+// DidaoUI-uniapp Theme — base + delta 架构
+//
+// 一个主题 = 一份 SCSS map + 一个 class：
+//   .my-theme { @include dd-theme(( 'primary': #d32f2f, ... )); }
+// 只声明与默认值的差异（delta），未声明的变量沿 CSS 级联继承默认值。
+// 明暗主题（.dark/.light）与品牌主题类可并列组合（如 class="light cny-red"）。
+//
+// 数据源: scss/_variables.scss（$dd-* 暗色默认 / $dd-light-* 浅色）
+// 输出入口: scss/theme.scss（消费者在 App.vue 全局样式中引入）
+// ============================================================
+
+// 把 map 展开为 --dd-* 自定义属性（#{} 插值保证渐变/阴影/rgba 原样输出）
+@mixin dd-theme($map) {
+  @each $key, $value in $map {
+    --dd-#{$key}: #{$value};
+  }
+}
+
+// === base：主题无关层（品牌基色/对比色/渐变/发光阴影）——品牌换肤的 delta 覆盖入口 ===
+// 明暗主题下值不变；自定义品牌主题按需覆盖其中几个变量
+$dd-vars-base: (
+  // 品牌基色
+  'primary': $dd-primary,
+  'accent': $dd-accent,
+  'success': $dd-success,
+  'warning': $dd-warning,
+  'error': $dd-error,
+  'info': $dd-info,
+  'vip': $dd-vip-500,
+  // 对比色（明暗不翻转；品牌主题可覆盖，如红金主题配白字）
+  'primary-contrast': $dd-primary-contrast,
+  'accent-contrast': $dd-accent-contrast,
+  'success-contrast': $dd-success-contrast,
+  'warning-contrast': $dd-warning-contrast,
+  'error-contrast': $dd-error-contrast,
+  'info-contrast': $dd-info-contrast,
+  // 组件实际使用的品牌色阶步（hover/描边/浅底）
+  'primary-300': $dd-primary-300,
+  'primary-400': $dd-primary-400,
+  'accent-300': $dd-accent-300,
+  'accent-400': $dd-accent-400,
+  'error-400': $dd-error-400,
+  'warning-400': $dd-warning-400,
+  'success-400': $dd-success-400,
+  'info-400': $dd-info-400,
+  // 品牌渐变（opaque 值，换主题时整条覆盖）
+  'gradient-primary': $dd-gradient-primary,
+  'gradient-primary-wide': $dd-gradient-primary-wide,
+  'gradient-primary-h': $dd-gradient-primary-h,
+  'gradient-primary-v': $dd-gradient-primary-v,
+  'gradient-primary-triple': $dd-gradient-primary-triple,
+  'gradient-accent': $dd-gradient-accent,
+  'gradient-accent-h': $dd-gradient-accent-h,
+  'gradient-accent-wide': $dd-gradient-accent-wide,
+  'gradient-success': $dd-gradient-success,
+  'gradient-warning': $dd-gradient-warning,
+  'gradient-error': $dd-gradient-error,
+  'gradient-info': $dd-gradient-info,
+  'gradient-vip': $dd-gradient-vip,
+  'gradient-text-gold': $dd-gradient-text-gold,
+  'gradient-text-blue': $dd-gradient-text-blue,
+  'gradient-sheen-top': $dd-gradient-sheen-top,
+  'gradient-sheen-diagonal': $dd-gradient-sheen-diagonal,
+  // 发光阴影（dd-glow mixin 动态拼名，全量就绪）
+  'shadow-glow-gold-sm': $dd-shadow-glow-gold-sm,
+  'shadow-glow-gold-md': $dd-shadow-glow-gold-md,
+  'shadow-glow-gold-lg': $dd-shadow-glow-gold-lg,
+  'shadow-glow-blue-sm': $dd-shadow-glow-blue-sm,
+  'shadow-glow-blue-md': $dd-shadow-glow-blue-md,
+  'shadow-glow-blue-lg': $dd-shadow-glow-blue-lg,
+  'shadow-glow-success-sm': $dd-shadow-glow-success-sm,
+  'shadow-glow-success-md': $dd-shadow-glow-success-md,
+  'shadow-glow-success-lg': $dd-shadow-glow-success-lg,
+  'shadow-glow-warning-sm': $dd-shadow-glow-warning-sm,
+  'shadow-glow-warning-md': $dd-shadow-glow-warning-md,
+  'shadow-glow-warning-lg': $dd-shadow-glow-warning-lg,
+  'shadow-glow-error-sm': $dd-shadow-glow-error-sm,
+  'shadow-glow-error-md': $dd-shadow-glow-error-md,
+  'shadow-glow-error-lg': $dd-shadow-glow-error-lg,
+  'shadow-glow-info-sm': $dd-shadow-glow-info-sm,
+  'shadow-glow-info-md': $dd-shadow-glow-info-md,
+  'shadow-glow-info-lg': $dd-shadow-glow-info-lg,
+  'shadow-glow-vip-sm': $dd-shadow-glow-vip-sm,
+  'shadow-glow-vip-md': $dd-shadow-glow-vip-md,
+  'shadow-glow-vip-lg': $dd-shadow-glow-vip-lg,
+) !default;
+
+// === 明暗翻转层：暗色（默认）——44 个 delta ===
+$dd-theme-dark: (
+  'bg': $dd-bg,
+  'fg': $dd-fg,
+  'muted': $dd-muted,
+  'rule': $dd-rule,
+  'link': $dd-link,
+  'surface': $dd-surface,
+  'surface-dim': $dd-surface-dim,
+  'surface-container-low': $dd-surface-container-low,
+  'surface-container': $dd-surface-container,
+  'surface-container-high': $dd-surface-container-high,
+  'surface-container-highest': $dd-surface-container-highest,
+  'bg-section': $dd-bg-section,
+  'bg-card': $dd-bg-card,
+  'bg-elevated': $dd-bg-elevated,
+  'text-primary': $dd-text-primary,
+  'text-secondary': $dd-text-secondary,
+  'text-tertiary': $dd-text-tertiary,
+  'border-default': $dd-border-default,
+  'border-subtle': $dd-border-subtle,
+  'border-strong': $dd-border-strong,
+  'interactive-hover': $dd-interactive-hover,
+  'interactive-focus': $dd-interactive-focus,
+  'interactive-press': $dd-interactive-press,
+  'color-overlay': $dd-color-overlay,
+  'color-overlay-strong': $dd-color-overlay-strong,
+  'color-overlay-soft': $dd-color-overlay-soft,
+  'surface-hover': $dd-surface-hover,
+  'surface-press': $dd-surface-press,
+  'sheen': $dd-sheen,
+  'text-glow': $dd-text-glow,
+  'shadow-1': $dd-shadow-1,
+  'shadow-2': $dd-shadow-2,
+  'shadow-3': $dd-shadow-3,
+  'shadow-4': $dd-shadow-4,
+  'shadow-5': $dd-shadow-5,
+  'glass-bg': $dd-glass-bg,
+  'glass-bg-strong': $dd-glass-bg-strong,
+  'glass-bg-solid': $dd-glass-bg-solid,
+  'glass-border': $dd-glass-border,
+  'step-inactive-color': $dd-step-inactive-color,
+  'gradient-neutral': $dd-gradient-neutral,
+  'gradient-text-gold-light': $dd-gradient-text-gold-light,
+  'gradient-spot-gold': $dd-gradient-spot-gold,
+  'gradient-spot-blue': $dd-gradient-spot-blue,
+) !default;
+
+// === 明暗翻转层：浅色——与 $dd-theme-dark 同键，值取 $dd-light-* ===
+$dd-theme-light: (
+  'bg': $dd-light-bg,
+  'fg': $dd-light-fg,
+  'muted': $dd-light-muted,
+  'rule': $dd-light-rule,
+  'link': $dd-light-link,
+  'surface': $dd-light-surface,
+  'surface-dim': $dd-light-surface-dim,
+  'surface-container-low': $dd-light-surface-container-low,
+  'surface-container': $dd-light-surface-container,
+  'surface-container-high': $dd-light-surface-container-high,
+  'surface-container-highest': $dd-light-surface-container-highest,
+  'bg-section': $dd-light-bg-section,
+  'bg-card': $dd-light-bg-card,
+  'bg-elevated': $dd-light-bg-elevated,
+  'text-primary': $dd-light-text-primary,
+  'text-secondary': $dd-light-text-secondary,
+  'text-tertiary': $dd-light-text-tertiary,
+  'border-default': $dd-light-border-default,
+  'border-subtle': $dd-light-border-subtle,
+  'border-strong': $dd-light-border-strong,
+  'interactive-hover': $dd-light-interactive-hover,
+  'interactive-focus': $dd-light-interactive-focus,
+  'interactive-press': $dd-light-interactive-press,
+  'color-overlay': $dd-light-color-overlay,
+  'color-overlay-strong': $dd-light-color-overlay-strong,
+  'color-overlay-soft': $dd-light-color-overlay-soft,
+  'surface-hover': $dd-light-surface-hover,
+  'surface-press': $dd-light-surface-press,
+  'sheen': $dd-light-sheen,
+  'text-glow': $dd-light-text-glow,
+  'shadow-1': $dd-light-shadow-1,
+  'shadow-2': $dd-light-shadow-2,
+  'shadow-3': $dd-light-shadow-3,
+  'shadow-4': $dd-light-shadow-4,
+  'shadow-5': $dd-light-shadow-5,
+  'glass-bg': $dd-light-glass-bg,
+  'glass-bg-strong': $dd-light-glass-bg-strong,
+  'glass-bg-solid': $dd-light-glass-bg-solid,
+  'glass-border': $dd-light-glass-border,
+  'step-inactive-color': $dd-light-step-inactive-color,
+  'gradient-neutral': $dd-light-gradient-neutral,
+  'gradient-text-gold-light': $dd-light-gradient-text-gold-light,
+  'gradient-spot-gold': $dd-light-gradient-spot-gold,
+  'gradient-spot-blue': $dd-light-gradient-spot-blue,
+) !default;