@didaoktv/didaoui-uniapp 1.2.2 → 1.3.0

package/scss/_variables.scss

@@ -4,319 +4,367 @@
 // ============================================================
 
 // === primary — 帝王金 (from css.json + colors_and_type.css) ===
-$dd-primary-50: #FFF8E1;
-$dd-primary-100: #FFEDB3;
-$dd-primary-200: #FFE082;
-$dd-primary-300: #FFD54F;
-$dd-primary-400: #FFC107;
-$dd-primary-500: #F5A623;
-$dd-primary-600: #D4891A;
-$dd-primary-700: #B26D12;
-$dd-primary-800: #8F520B;
-$dd-primary-900: #6B3A05;
-$dd-primary: $dd-primary-500;
-$dd-primary-contrast: #0A0A0A;
+$dd-primary-50: #FFF8E1 !default;
+$dd-primary-100: #FFEDB3 !default;
+$dd-primary-200: #FFE082 !default;
+$dd-primary-300: #FFD54F !default;
+$dd-primary-400: #FFC107 !default;
+$dd-primary-500: #F5A623 !default;
+$dd-primary-600: #D4891A !default;
+$dd-primary-700: #B26D12 !default;
+$dd-primary-800: #8F520B !default;
+$dd-primary-900: #6B3A05 !default;
+$dd-primary: $dd-primary-500 !default;
+$dd-primary-contrast: #0A0A0A !default;
 
 // === accent — 皇家蓝 ===
-$dd-accent-50: #E8EEF5;
-$dd-accent-100: #C5D3E8;
-$dd-accent-200: #9BB3D6;
-$dd-accent-300: #728FC4;
-$dd-accent-400: #4E6EB2;
-$dd-accent-500: #2D4BA0;
-$dd-accent-600: #1E3A8A;
-$dd-accent-700: #152B6B;
-$dd-accent-800: #0D1E4D;
-$dd-accent-900: #061230;
-$dd-accent: $dd-accent-500;
-$dd-accent-contrast: #FFFFFF;
+$dd-accent-50: #E8EEF5 !default;
+$dd-accent-100: #C5D3E8 !default;
+$dd-accent-200: #9BB3D6 !default;
+$dd-accent-300: #728FC4 !default;
+$dd-accent-400: #4E6EB2 !default;
+$dd-accent-500: #2D4BA0 !default;
+$dd-accent-600: #1E3A8A !default;
+$dd-accent-700: #152B6B !default;
+$dd-accent-800: #0D1E4D !default;
+$dd-accent-900: #061230 !default;
+$dd-accent: $dd-accent-500 !default;
+$dd-accent-contrast: #FFFFFF !default;
 
 // === neutral — 抖音风纯黑系 ===
-$dd-neutral-50: #F5F5F5;
-$dd-neutral-100: #E0E0E0;
-$dd-neutral-200: #BDBDBD;
-$dd-neutral-300: #9E9E9E;
-$dd-neutral-400: #757575;
-$dd-neutral-500: #616161;
-$dd-neutral-600: #424242;
-$dd-neutral-700: #2A2A2A;
-$dd-neutral-800: #171717;
-$dd-neutral-900: #0A0A0A;
-$dd-neutral-950: #050505;
+$dd-neutral-50: #F5F5F5 !default;
+$dd-neutral-100: #E0E0E0 !default;
+$dd-neutral-200: #BDBDBD !default;
+$dd-neutral-300: #9E9E9E !default;
+$dd-neutral-400: #757575 !default;
+$dd-neutral-500: #616161 !default;
+$dd-neutral-600: #424242 !default;
+$dd-neutral-700: #2A2A2A !default;
+$dd-neutral-800: #171717 !default;
+$dd-neutral-900: #0A0A0A !default;
+$dd-neutral-950: #050505 !default;
 
 // === success ===
-$dd-success-50: #E8F5E9;
-$dd-success-100: #C8E6C9;
-$dd-success-200: #A5D6A7;
-$dd-success-300: #81C784;
-$dd-success-400: #66BB6A;
-$dd-success-500: #4CAF50;
-$dd-success-600: #388E3C;
-$dd-success-700: #2E7D32;
-$dd-success-800: #1B5E20;
-$dd-success-900: #0D3B10;
-$dd-success: $dd-success-500;
-$dd-success-contrast: #FFFFFF;
+$dd-success-50: #E8F5E9 !default;
+$dd-success-100: #C8E6C9 !default;
+$dd-success-200: #A5D6A7 !default;
+$dd-success-300: #81C784 !default;
+$dd-success-400: #66BB6A !default;
+$dd-success-500: #4CAF50 !default;
+$dd-success-600: #388E3C !default;
+$dd-success-700: #2E7D32 !default;
+$dd-success-800: #1B5E20 !default;
+$dd-success-900: #0D3B10 !default;
+$dd-success: $dd-success-500 !default;
+$dd-success-contrast: #FFFFFF !default;
 
 // === warning ===
-$dd-warning-50: #FFFDE7;
-$dd-warning-100: #FFF9C4;
-$dd-warning-200: #FFF176;
-$dd-warning-300: #FFEE58;
-$dd-warning-400: #FDD835;
-$dd-warning-500: #F9A825;
-$dd-warning-600: #F57F17;
-$dd-warning-700: #C65D00;
-$dd-warning-800: #994200;
-$dd-warning-900: #6B2D00;
-$dd-warning: $dd-warning-500;
-$dd-warning-contrast: #0A0A0A;
+$dd-warning-50: #FFFDE7 !default;
+$dd-warning-100: #FFF9C4 !default;
+$dd-warning-200: #FFF176 !default;
+$dd-warning-300: #FFEE58 !default;
+$dd-warning-400: #FDD835 !default;
+$dd-warning-500: #F9A825 !default;
+$dd-warning-600: #F57F17 !default;
+$dd-warning-700: #C65D00 !default;
+$dd-warning-800: #994200 !default;
+$dd-warning-900: #6B2D00 !default;
+$dd-warning: $dd-warning-500 !default;
+$dd-warning-contrast: #0A0A0A !default;
 
 // === error ===
-$dd-error-50: #FFEBEE;
-$dd-error-100: #FFCDD2;
-$dd-error-200: #EF9A9A;
-$dd-error-300: #E57373;
-$dd-error-400: #EF5350;
-$dd-error-500: #E53935;
-$dd-error-600: #C62828;
-$dd-error-700: #991B1B;
-$dd-error-800: #6D1212;
-$dd-error-900: #400A0A;
-$dd-error: $dd-error-500;
-$dd-error-contrast: #FFFFFF;
+$dd-error-50: #FFEBEE !default;
+$dd-error-100: #FFCDD2 !default;
+$dd-error-200: #EF9A9A !default;
+$dd-error-300: #E57373 !default;
+$dd-error-400: #EF5350 !default;
+$dd-error-500: #E53935 !default;
+$dd-error-600: #C62828 !default;
+$dd-error-700: #991B1B !default;
+$dd-error-800: #6D1212 !default;
+$dd-error-900: #400A0A !default;
+$dd-error: $dd-error-500 !default;
+$dd-error-contrast: #FFFFFF !default;
 
 // === info ===
-$dd-info-50: #E0F7FA;
-$dd-info-100: #B2EBF2;
-$dd-info-200: #80DEEA;
-$dd-info-300: #4DD0E1;
-$dd-info-400: #26C6DA;
-$dd-info-500: #00BCD4;
-$dd-info-600: #0097A7;
-$dd-info-700: #007580;
-$dd-info-800: #00535A;
-$dd-info-900: #003136;
-$dd-info: $dd-info-500;
-$dd-info-contrast: #FFFFFF;
+$dd-info-50: #E0F7FA !default;
+$dd-info-100: #B2EBF2 !default;
+$dd-info-200: #80DEEA !default;
+$dd-info-300: #4DD0E1 !default;
+$dd-info-400: #26C6DA !default;
+$dd-info-500: #00BCD4 !default;
+$dd-info-600: #0097A7 !default;
+$dd-info-700: #007580 !default;
+$dd-info-800: #00535A !default;
+$dd-info-900: #003136 !default;
+$dd-info: $dd-info-500 !default;
+$dd-info-contrast: #FFFFFF !default;
 
 // === VIP Purple ===
-$dd-vip-500: #9C27B0;
-$dd-vip-700: #6A1B9A;
+$dd-vip-500: #9C27B0 !default;
+$dd-vip-700: #6A1B9A !default;
 
 // === 语义别名 (from colors_and_type.css Layer 2) ===
-$dd-bg: $dd-neutral-900;
-$dd-fg: $dd-neutral-50;
-$dd-muted: $dd-neutral-400;
-$dd-rule: $dd-neutral-700;
-$dd-link: $dd-primary-400;
-$dd-surface: $dd-neutral-900;
-$dd-surface-dim: $dd-neutral-800;
-$dd-surface-container-low: $dd-neutral-800;
-$dd-surface-container: $dd-neutral-800;
-$dd-surface-container-high: $dd-neutral-700;
-$dd-surface-container-highest: $dd-neutral-600;
-$dd-bg-section: $dd-neutral-800;
-$dd-bg-card: $dd-neutral-800;
-$dd-bg-elevated: $dd-neutral-800;
+$dd-bg: $dd-neutral-900 !default;
+$dd-fg: $dd-neutral-50 !default;
+$dd-muted: $dd-neutral-400 !default;
+$dd-rule: $dd-neutral-700 !default;
+$dd-link: $dd-primary-400 !default;
+$dd-surface: $dd-neutral-900 !default;
+$dd-surface-dim: $dd-neutral-800 !default;
+$dd-surface-container-low: $dd-neutral-800 !default;
+$dd-surface-container: $dd-neutral-800 !default;
+$dd-surface-container-high: $dd-neutral-700 !default;
+$dd-surface-container-highest: $dd-neutral-600 !default;
+$dd-bg-section: $dd-neutral-800 !default;
+$dd-bg-card: $dd-neutral-800 !default;
+$dd-bg-elevated: $dd-neutral-800 !default;
 
 // === 文本色 ===
-$dd-text-primary: $dd-neutral-50;
-$dd-text-secondary: $dd-neutral-200;
-$dd-text-tertiary: $dd-neutral-400;
+$dd-text-primary: $dd-neutral-50 !default;
+$dd-text-secondary: $dd-neutral-200 !default;
+$dd-text-tertiary: $dd-neutral-400 !default;
 
 // === 边框 ===
-$dd-border-default: $dd-neutral-700;
-$dd-border-subtle: rgba(255, 255, 255, 0.06);
-$dd-border-strong: rgba(255, 255, 255, 0.12);
+$dd-border-default: $dd-neutral-700 !default;
+$dd-border-subtle: rgba(255, 255, 255, 0.06) !default;
+$dd-border-strong: rgba(255, 255, 255, 0.12) !default;
 
 // === 交互态 ===
-$dd-interactive-hover: rgba(255, 255, 255, 0.08);
-$dd-interactive-focus: rgba(255, 255, 255, 0.12);
-$dd-interactive-press: rgba(255, 255, 255, 0.16);
+$dd-interactive-hover: rgba(255, 255, 255, 0.08) !default;
+$dd-interactive-focus: rgba(255, 255, 255, 0.12) !default;
+$dd-interactive-press: rgba(255, 255, 255, 0.16) !default;
 
 // === 纯色辅助 ===
-$dd-color-white: #FFFFFF;
-$dd-color-black: #000000;
-$dd-color-primary-deep: #1A1200;
-$dd-color-bronze: #CD7F32;
+$dd-color-white: #FFFFFF !default;
+$dd-color-black: #000000 !default;
+$dd-color-primary-deep: #1A1200 !default;
+$dd-color-bronze: #CD7F32 !default;
 
 // === 遮罩 ===
-$dd-color-overlay: rgba(0, 0, 0, 0.5);
-$dd-color-overlay-strong: rgba(0, 0, 0, 0.6);
-$dd-color-overlay-soft: rgba(0, 0, 0, 0.4);
+$dd-color-overlay: rgba(0, 0, 0, 0.5) !default;
+$dd-color-overlay-strong: rgba(0, 0, 0, 0.6) !default;
+$dd-color-overlay-soft: rgba(0, 0, 0, 0.4) !default;
 
-$dd-surface-hover: rgba(255, 255, 255, 0.1);
-$dd-surface-press: rgba(255, 255, 255, 0.2);
-$dd-sheen: rgba(255, 255, 255, 0.25);
-$dd-text-glow: rgba(255, 255, 255, 0.3);
+$dd-surface-hover: rgba(255, 255, 255, 0.1) !default;
+$dd-surface-press: rgba(255, 255, 255, 0.2) !default;
+$dd-sheen: rgba(255, 255, 255, 0.25) !default;
+$dd-text-glow: rgba(255, 255, 255, 0.3) !default;
+
+// === 浅色语义集 (数据源: .design_library/didao-ktv/css.json color.light + colors_and_type.css .light) ===
+// ★推导 = 设计系统 .light 未显式定义，按暗色镜像推导
+// 品牌色（primary/accent 及各语义色阶）不随明暗主题翻转，无浅色对应集
+$dd-light-bg: #FAFAFA !default;
+$dd-light-fg: $dd-neutral-900 !default;
+$dd-light-muted: $dd-neutral-500 !default;
+$dd-light-rule: $dd-neutral-200 !default;
+$dd-light-link: $dd-primary-600 !default;
+$dd-light-surface: #FFFFFF !default;
+$dd-light-surface-dim: $dd-neutral-50 !default;
+$dd-light-surface-container-low: $dd-neutral-50 !default;
+$dd-light-surface-container: #FFFFFF !default;
+$dd-light-surface-container-high: #EEEEEE !default;
+$dd-light-surface-container-highest: $dd-neutral-100 !default;
+$dd-light-bg-section: $dd-neutral-50 !default;
+$dd-light-bg-card: #FFFFFF !default;
+$dd-light-bg-elevated: #FFFFFF !default; // ★推导（同 bg-card）
+$dd-light-text-primary: $dd-neutral-900 !default;
+$dd-light-text-secondary: $dd-neutral-700 !default; // ★推导
+$dd-light-text-tertiary: $dd-neutral-500 !default; // ★推导
+$dd-light-border-default: $dd-neutral-200 !default;
+$dd-light-border-subtle: rgba(0, 0, 0, 0.06) !default;
+$dd-light-border-strong: rgba(0, 0, 0, 0.12) !default; // ★推导
+$dd-light-interactive-hover: rgba(0, 0, 0, 0.06) !default;
+$dd-light-interactive-focus: rgba(0, 0, 0, 0.1) !default;
+$dd-light-interactive-press: rgba(0, 0, 0, 0.14) !default;
+$dd-light-color-overlay: rgba(0, 0, 0, 0.45) !default;
+$dd-light-color-overlay-strong: rgba(0, 0, 0, 0.55) !default;
+$dd-light-color-overlay-soft: rgba(0, 0, 0, 0.35) !default;
+$dd-light-surface-hover: rgba(0, 0, 0, 0.06) !default;
+$dd-light-surface-press: rgba(0, 0, 0, 0.1) !default;
+$dd-light-sheen: rgba(255, 255, 255, 0.5) !default;
+$dd-light-text-glow: rgba(0, 0, 0, 0.1) !default;
+$dd-light-shadow-1: 0 2px 8px rgba(0, 0, 0, 0.06) !default;
+$dd-light-shadow-2: 0 8px 24px rgba(0, 0, 0, 0.08) !default;
+$dd-light-shadow-3: 0 12px 32px rgba(0, 0, 0, 0.1) !default;
+$dd-light-shadow-4: 0 24px 64px rgba(0, 0, 0, 0.12) !default;
+$dd-light-shadow-5: 0 40px 80px rgba(0, 0, 0, 0.15) !default;
+$dd-light-glass-bg: rgba(255, 255, 255, 0.72) !default;
+$dd-light-glass-bg-strong: rgba(255, 255, 255, 0.85) !default;
+$dd-light-glass-bg-solid: rgba(255, 255, 255, 0.95) !default;
+$dd-light-glass-border: rgba(0, 0, 0, 0.06) !default;
+$dd-light-step-inactive-color: $dd-neutral-400 !default;
+$dd-light-gradient-neutral: linear-gradient(135deg, $dd-neutral-200, $dd-neutral-400) !default;
+$dd-light-gradient-text-gold-light: linear-gradient(135deg, $dd-primary-500, $dd-primary-700) !default;
+$dd-light-gradient-spot-gold: radial-gradient(ellipse at top, rgba(245, 166, 35, 0.06), transparent 60%) !default;
+$dd-light-gradient-spot-blue: radial-gradient(ellipse at bottom right, rgba(45, 75, 160, 0.06), transparent 60%) !default;
 
 // === 字体 (from css.json font.family) ===
-$dd-font-display: 'Playfair Display', serif;
-$dd-font-heading: 'Noto Sans SC', sans-serif;
-$dd-font-body: 'Noto Sans SC', sans-serif;
-$dd-font-mono: 'Noto Sans SC', sans-serif;
+$dd-font-display: 'Playfair Display', serif !default;
+$dd-font-heading: 'Noto Sans SC', sans-serif !default;
+$dd-font-body: 'Noto Sans SC', sans-serif !default;
+$dd-font-mono: 'Noto Sans SC', sans-serif !default;
 
 // === 字号 (from css.json font.size) ===
-$dd-font-size-display: 32px;
-$dd-font-size-h1: 24px;
-$dd-font-size-h2: 20px;
-$dd-font-size-h3: 18px;
-$dd-font-size-h4: 16px;
-$dd-font-size-body: 14px;
-$dd-font-size-lead: 16px;
-$dd-font-size-caption: 12px;
-$dd-font-size-overline: 10px;
-$dd-font-size-mono: 14px;
+$dd-font-size-display: 32px !default;
+$dd-font-size-h1: 24px !default;
+$dd-font-size-h2: 20px !default;
+$dd-font-size-h3: 18px !default;
+$dd-font-size-h4: 16px !default;
+$dd-font-size-body: 14px !default;
+$dd-font-size-lead: 16px !default;
+$dd-font-size-caption: 12px !default;
+$dd-font-size-overline: 10px !default;
+$dd-font-size-mono: 14px !default;
 
 // === 字重 (from css.json font.weight) ===
-$dd-font-weight-display: 900;
-$dd-font-weight-h1: 800;
-$dd-font-weight-h2: 800;
-$dd-font-weight-h3: 700;
-$dd-font-weight-h4: 700;
-$dd-font-weight-body: 500;
-$dd-font-weight-lead: 500;
-$dd-font-weight-caption: 500;
-$dd-font-weight-overline: 500;
-$dd-font-weight-mono: 600;
+$dd-font-weight-display: 900 !default;
+$dd-font-weight-h1: 800 !default;
+$dd-font-weight-h2: 800 !default;
+$dd-font-weight-h3: 700 !default;
+$dd-font-weight-h4: 700 !default;
+$dd-font-weight-body: 500 !default;
+$dd-font-weight-lead: 500 !default;
+$dd-font-weight-caption: 500 !default;
+$dd-font-weight-overline: 500 !default;
+$dd-font-weight-mono: 600 !default;
 
 // === 行高 (from css.json font.lineHeight) ===
-$dd-line-height-display: 1.1;
-$dd-line-height-h1: 1.15;
-$dd-line-height-h2: 1.2;
-$dd-line-height-h3: 1.3;
-$dd-line-height-h4: 1.4;
-$dd-line-height-body: 1.6;
-$dd-line-height-lead: 1.7;
-$dd-line-height-caption: 1.5;
-$dd-line-height-overline: 1.4;
-$dd-line-height-mono: 1.6;
+$dd-line-height-display: 1.1 !default;
+$dd-line-height-h1: 1.15 !default;
+$dd-line-height-h2: 1.2 !default;
+$dd-line-height-h3: 1.3 !default;
+$dd-line-height-h4: 1.4 !default;
+$dd-line-height-body: 1.6 !default;
+$dd-line-height-lead: 1.7 !default;
+$dd-line-height-caption: 1.5 !default;
+$dd-line-height-overline: 1.4 !default;
+$dd-line-height-mono: 1.6 !default;
 
 // === 间距 (from css.json spacing) ===
-$dd-space-1: 4px;
-$dd-space-2: 8px;
-$dd-space-3: 12px;
-$dd-space-4: 16px;
-$dd-space-5: 24px;
-$dd-space-6: 32px;
-$dd-space-7: 48px;
-$dd-space-8: 64px;
+$dd-space-1: 4px !default;
+$dd-space-2: 8px !default;
+$dd-space-3: 12px !default;
+$dd-space-4: 16px !default;
+$dd-space-5: 24px !default;
+$dd-space-6: 32px !default;
+$dd-space-7: 48px !default;
+$dd-space-8: 64px !default;
 
 // === 圆角 (from css.json radius) ===
-$dd-radius-sm: 2px;
-$dd-radius-md: 4px;
-$dd-radius-lg: 8px;
-$dd-radius-xl: 12px;
-$dd-radius-2xl: 16px;
-$dd-radius-full: 9999px;
+$dd-radius-sm: 2px !default;
+$dd-radius-md: 4px !default;
+$dd-radius-lg: 8px !default;
+$dd-radius-xl: 12px !default;
+$dd-radius-2xl: 16px !default;
+$dd-radius-full: 9999px !default;
 
 // === 尺寸 (from css.json size) ===
-$dd-size-icon-sm: 16px;
-$dd-size-icon-md: 20px;
-$dd-size-icon-lg: 24px;
-$dd-size-icon-xl: 32px;
-$dd-size-button-sm: 32px;
-$dd-size-button-md: 44px;
-$dd-size-button-lg: 50px;
-$dd-size-input-height: 44px;
+$dd-size-icon-sm: 16px !default;
+$dd-size-icon-md: 20px !default;
+$dd-size-icon-lg: 24px !default;
+$dd-size-icon-xl: 32px !default;
+$dd-size-button-sm: 32px !default;
+$dd-size-button-md: 44px !default;
+$dd-size-button-lg: 50px !default;
+$dd-size-input-height: 44px !default;
 
 // 按钮内边距
-$dd-button-padding-x-sm: 12px;
-$dd-button-padding-x-md: 16px;
-$dd-button-padding-x-lg: 24px;
-$dd-button-height-sm: $dd-size-button-sm;
-$dd-button-height-md: $dd-size-button-md;
-$dd-button-height-lg: $dd-size-button-lg;
-$dd-input-height: $dd-size-input-height;
+$dd-button-padding-x-sm: 12px !default;
+$dd-button-padding-x-md: 16px !default;
+$dd-button-padding-x-lg: 24px !default;
+$dd-button-height-sm: $dd-size-button-sm !default;
+$dd-button-height-md: $dd-size-button-md !default;
+$dd-button-height-lg: $dd-size-button-lg !default;
+$dd-input-height: $dd-size-input-height !default;
 
 // === 阴影 (from css.json shadow) ===
-$dd-shadow-1: 0 2px 8px rgba(0, 0, 0, 0.3);
-$dd-shadow-2: 0 8px 24px rgba(0, 0, 0, 0.4);
-$dd-shadow-3: 0 12px 32px rgba(0, 0, 0, 0.5);
-$dd-shadow-4: 0 24px 64px rgba(0, 0, 0, 0.6);
-$dd-shadow-5: 0 40px 80px rgba(0, 0, 0, 0.7);
+$dd-shadow-1: 0 2px 8px rgba(0, 0, 0, 0.3) !default;
+$dd-shadow-2: 0 8px 24px rgba(0, 0, 0, 0.4) !default;
+$dd-shadow-3: 0 12px 32px rgba(0, 0, 0, 0.5) !default;
+$dd-shadow-4: 0 24px 64px rgba(0, 0, 0, 0.6) !default;
+$dd-shadow-5: 0 40px 80px rgba(0, 0, 0, 0.7) !default;
 
 // === 发光阴影（sm / md / lg 三档）===
 // 品牌色发光
-$dd-shadow-glow-gold-sm: 0 0 8px rgba(245, 166, 35, 0.4);
-$dd-shadow-glow-gold-md: 0 0 20px rgba(245, 166, 35, 0.4);
-$dd-shadow-glow-gold-lg: 0 0 24px rgba(245, 166, 35, 0.4), 0 0 48px rgba(245, 166, 35, 0.2);
-$dd-shadow-glow-blue-sm: 0 0 8px rgba(45, 75, 160, 0.4);
-$dd-shadow-glow-blue-md: 0 0 20px rgba(45, 75, 160, 0.5);
-$dd-shadow-glow-blue-lg: 0 0 24px rgba(45, 75, 160, 0.5), 0 0 48px rgba(45, 75, 160, 0.25);
+$dd-shadow-glow-gold-sm: 0 0 8px rgba(245, 166, 35, 0.4) !default;
+$dd-shadow-glow-gold-md: 0 0 20px rgba(245, 166, 35, 0.4) !default;
+$dd-shadow-glow-gold-lg: 0 0 24px rgba(245, 166, 35, 0.4), 0 0 48px rgba(245, 166, 35, 0.2) !default;
+$dd-shadow-glow-blue-sm: 0 0 8px rgba(45, 75, 160, 0.4) !default;
+$dd-shadow-glow-blue-md: 0 0 20px rgba(45, 75, 160, 0.5) !default;
+$dd-shadow-glow-blue-lg: 0 0 24px rgba(45, 75, 160, 0.5), 0 0 48px rgba(45, 75, 160, 0.25) !default;
 // 语义色发光 — md 带暗影托底，lg 为双层霓虹
-$dd-shadow-glow-success-sm: 0 0 8px rgba(76, 175, 80, 0.4);
-$dd-shadow-glow-success-md: 0 0 16px rgba(76, 175, 80, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
-$dd-shadow-glow-success-lg: 0 0 24px rgba(76, 175, 80, 0.5), 0 8px 24px rgba(0, 0, 0, 0.4);
-$dd-shadow-glow-warning-sm: 0 0 8px rgba(249, 168, 37, 0.4);
-$dd-shadow-glow-warning-md: 0 0 16px rgba(249, 168, 37, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
-$dd-shadow-glow-warning-lg: 0 0 24px rgba(249, 168, 37, 0.5), 0 8px 24px rgba(0, 0, 0, 0.4);
-$dd-shadow-glow-error-sm: 0 0 8px rgba(229, 57, 53, 0.4);
-$dd-shadow-glow-error-md: 0 0 16px rgba(229, 57, 53, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
-$dd-shadow-glow-error-lg: 0 0 24px rgba(229, 57, 53, 0.5), 0 8px 24px rgba(0, 0, 0, 0.4);
-$dd-shadow-glow-info-sm: 0 0 8px rgba(0, 188, 212, 0.4);
-$dd-shadow-glow-info-md: 0 0 16px rgba(0, 188, 212, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
-$dd-shadow-glow-info-lg: 0 0 24px rgba(0, 188, 212, 0.5), 0 8px 24px rgba(0, 0, 0, 0.4);
-$dd-shadow-glow-vip-sm: 0 0 8px rgba(156, 39, 176, 0.4);
-$dd-shadow-glow-vip-md: 0 0 16px rgba(156, 39, 176, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
-$dd-shadow-glow-vip-lg: 0 0 24px rgba(156, 39, 176, 0.5), 0 8px 24px rgba(0, 0, 0, 0.4);
+$dd-shadow-glow-success-sm: 0 0 8px rgba(76, 175, 80, 0.4) !default;
+$dd-shadow-glow-success-md: 0 0 16px rgba(76, 175, 80, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3) !default;
+$dd-shadow-glow-success-lg: 0 0 24px rgba(76, 175, 80, 0.5), 0 8px 24px rgba(0, 0, 0, 0.4) !default;
+$dd-shadow-glow-warning-sm: 0 0 8px rgba(249, 168, 37, 0.4) !default;
+$dd-shadow-glow-warning-md: 0 0 16px rgba(249, 168, 37, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3) !default;
+$dd-shadow-glow-warning-lg: 0 0 24px rgba(249, 168, 37, 0.5), 0 8px 24px rgba(0, 0, 0, 0.4) !default;
+$dd-shadow-glow-error-sm: 0 0 8px rgba(229, 57, 53, 0.4) !default;
+$dd-shadow-glow-error-md: 0 0 16px rgba(229, 57, 53, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3) !default;
+$dd-shadow-glow-error-lg: 0 0 24px rgba(229, 57, 53, 0.5), 0 8px 24px rgba(0, 0, 0, 0.4) !default;
+$dd-shadow-glow-info-sm: 0 0 8px rgba(0, 188, 212, 0.4) !default;
+$dd-shadow-glow-info-md: 0 0 16px rgba(0, 188, 212, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3) !default;
+$dd-shadow-glow-info-lg: 0 0 24px rgba(0, 188, 212, 0.5), 0 8px 24px rgba(0, 0, 0, 0.4) !default;
+$dd-shadow-glow-vip-sm: 0 0 8px rgba(156, 39, 176, 0.4) !default;
+$dd-shadow-glow-vip-md: 0 0 16px rgba(156, 39, 176, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3) !default;
+$dd-shadow-glow-vip-lg: 0 0 24px rgba(156, 39, 176, 0.5), 0 8px 24px rgba(0, 0, 0, 0.4) !default;
 
 // === 渐变 (from css.json gradient) ===
 // 主渐变：135° 对角，400→600
-$dd-gradient-primary: linear-gradient(135deg, $dd-primary-400, $dd-primary-600);
-$dd-gradient-accent: linear-gradient(135deg, $dd-accent-400, $dd-accent-600);
-$dd-gradient-success: linear-gradient(135deg, $dd-success-400, $dd-success-600);
-$dd-gradient-warning: linear-gradient(135deg, $dd-warning-400, $dd-warning-600);
-$dd-gradient-error: linear-gradient(135deg, $dd-error-400, $dd-error-600);
-$dd-gradient-info: linear-gradient(135deg, $dd-info-400, $dd-info-600);
-$dd-gradient-vip: linear-gradient(135deg, $dd-vip-500, $dd-vip-700);
-$dd-gradient-neutral: linear-gradient(135deg, $dd-neutral-600, $dd-neutral-800);
+$dd-gradient-primary: linear-gradient(135deg, $dd-primary-400, $dd-primary-600) !default;
+$dd-gradient-accent: linear-gradient(135deg, $dd-accent-400, $dd-accent-600) !default;
+$dd-gradient-success: linear-gradient(135deg, $dd-success-400, $dd-success-600) !default;
+$dd-gradient-warning: linear-gradient(135deg, $dd-warning-400, $dd-warning-600) !default;
+$dd-gradient-error: linear-gradient(135deg, $dd-error-400, $dd-error-600) !default;
+$dd-gradient-info: linear-gradient(135deg, $dd-info-400, $dd-info-600) !default;
+$dd-gradient-vip: linear-gradient(135deg, $dd-vip-500, $dd-vip-700) !default;
+$dd-gradient-neutral: linear-gradient(135deg, $dd-neutral-600, $dd-neutral-800) !default;
 // 宽幅渐变：135° 对角，300→600/700
-$dd-gradient-primary-wide: linear-gradient(135deg, $dd-primary-300, $dd-primary-600);
-$dd-gradient-accent-wide: linear-gradient(135deg, $dd-accent-300, $dd-accent-700);
+$dd-gradient-primary-wide: linear-gradient(135deg, $dd-primary-300, $dd-primary-600) !default;
+$dd-gradient-accent-wide: linear-gradient(135deg, $dd-accent-300, $dd-accent-700) !default;
 // 三段渐变：135° 三段色（金属质感）
-$dd-gradient-primary-triple: linear-gradient(135deg, $dd-primary-300 0%, $dd-primary-500 50%, $dd-primary-600 100%);
+$dd-gradient-primary-triple: linear-gradient(135deg, $dd-primary-300 0%, $dd-primary-500 50%, $dd-primary-600 100%) !default;
 // 垂直渐变：180°
-$dd-gradient-primary-v: linear-gradient(180deg, $dd-primary-400, $dd-primary-600);
+$dd-gradient-primary-v: linear-gradient(180deg, $dd-primary-400, $dd-primary-600) !default;
 // 水平渐变：90°
-$dd-gradient-primary-h: linear-gradient(90deg, $dd-primary-400, $dd-primary-600);
-$dd-gradient-accent-h: linear-gradient(90deg, $dd-accent-400, $dd-accent-600);
+$dd-gradient-primary-h: linear-gradient(90deg, $dd-primary-400, $dd-primary-600) !default;
+$dd-gradient-accent-h: linear-gradient(90deg, $dd-accent-400, $dd-accent-600) !default;
 // 文字渐变
-$dd-gradient-text-gold: linear-gradient(135deg, $dd-primary-300, $dd-primary-500);
-$dd-gradient-text-gold-light: linear-gradient(135deg, $dd-color-white, $dd-primary-200);
-$dd-gradient-text-blue: linear-gradient(135deg, $dd-accent-300, $dd-accent-500);
+$dd-gradient-text-gold: linear-gradient(135deg, $dd-primary-300, $dd-primary-500) !default;
+$dd-gradient-text-gold-light: linear-gradient(135deg, $dd-color-white, $dd-primary-200) !default;
+$dd-gradient-text-blue: linear-gradient(135deg, $dd-accent-300, $dd-accent-500) !default;
 // 装饰径向光斑
-$dd-gradient-spot-gold: radial-gradient(ellipse at top, rgba(245, 166, 35, 0.08), transparent 60%);
-$dd-gradient-spot-blue: radial-gradient(ellipse at bottom right, rgba(45, 75, 160, 0.08), transparent 60%);
+$dd-gradient-spot-gold: radial-gradient(ellipse at top, rgba(245, 166, 35, 0.08), transparent 60%) !default;
+$dd-gradient-spot-blue: radial-gradient(ellipse at bottom right, rgba(45, 75, 160, 0.08), transparent 60%) !default;
 // sheen 高光渐变
-$dd-gradient-sheen-top: linear-gradient(180deg, $dd-sheen 0%, transparent 100%);
-$dd-gradient-sheen-diagonal: linear-gradient(135deg, $dd-sheen 0%, transparent 50%);
+$dd-gradient-sheen-top: linear-gradient(180deg, $dd-sheen 0%, transparent 100%) !default;
+$dd-gradient-sheen-diagonal: linear-gradient(135deg, $dd-sheen 0%, transparent 50%) !default;
 
 // === 玻璃拟态 (from colors_and_type.css) ===
-$dd-glass-bg: rgba(23, 23, 23, 0.72);
-$dd-glass-bg-strong: rgba(23, 23, 23, 0.85);
-$dd-glass-bg-solid: rgba(23, 23, 23, 0.95);
-$dd-glass-border: rgba(255, 255, 255, 0.08);
-$dd-glass-blur-sm: 4px;
-$dd-glass-blur-md: 10px;
-$dd-glass-blur: 20px;
-$dd-glass-blur-lg: 24px;
+$dd-glass-bg: rgba(23, 23, 23, 0.72) !default;
+$dd-glass-bg-strong: rgba(23, 23, 23, 0.85) !default;
+$dd-glass-bg-solid: rgba(23, 23, 23, 0.95) !default;
+$dd-glass-border: rgba(255, 255, 255, 0.08) !default;
+$dd-glass-blur-sm: 4px !default;
+$dd-glass-blur-md: 10px !default;
+$dd-glass-blur: 20px !default;
+$dd-glass-blur-lg: 24px !default;
 
 // === 组件特定 (from colors_and_type.css Component-specific) ===
-$dd-popup-duration: 0.3s;
-$dd-popover-offset: 8px;
-$dd-step-inactive-color: $dd-neutral-500;
-$dd-step-active-color: $dd-primary-500;
+$dd-popup-duration: 0.3s !default;
+$dd-popover-offset: 8px !default;
+$dd-step-inactive-color: $dd-neutral-500 !default;
+$dd-step-active-color: $dd-primary-500 !default;
 
 // === z-index 层级 ===
-$dd-z-index-base: 1;
-$dd-z-index-sticky: 100;
-$dd-z-index-fixed: 1000;
-$dd-z-index-overlay: 2000;
-$dd-z-index-popup: 2001;
-$dd-z-index-modal: 3000;
-$dd-z-index-toast: 4000;
-$dd-z-index-loading: 5000;
+$dd-z-index-base: 1 !default;
+$dd-z-index-sticky: 100 !default;
+$dd-z-index-fixed: 1000 !default;
+$dd-z-index-overlay: 2000 !default;
+$dd-z-index-popup: 2001 !default;
+$dd-z-index-modal: 3000 !default;
+$dd-z-index-toast: 4000 !default;
+$dd-z-index-loading: 5000 !default;
 // 全屏裁剪覆盖层：三画布 + 操作条需压过全部全局层级
-$dd-z-index-cropper: 100000;
+$dd-z-index-cropper: 100000 !default;

package/scss/theme.scss

@@ -0,0 +1,36 @@
+// ============================================================
+// DidaoUI-uniapp 主题输出（消费者在 App.vue 全局样式中引入）
+//
+// 引入: App.vue <style lang="scss"> @import '@didaoktv/didaoui-uniapp/scss/theme';
+// 切换: 根节点挂 .dark / .light
+//   - H5:      document.documentElement.classList.add('light')
+//   - 小程序:   页面根节点 :class="themeClass"（变量沿节点树继承进组件）
+// 新主题: 全局样式中 .my-theme { @include dd-theme(( 'primary': #d32f2f, ... )); }
+//   只写 delta，未覆盖变量自动继承默认值；可与 .dark/.light 并列组合。
+//   （需 @import '@didaoktv/didaoui-uniapp/scss/theme-tokens' 引入 mixin，或直接写 --dd-* 原生变量）
+// 不引入本文件时，组件靠 var(--dd-x, #{$dd-x}) 的 SCSS 兜底值维持暗色默认。
+// ============================================================
+@import './variables';
+@import './theme-tokens';
+
+/* #ifdef H5 */
+:root {
+  @include dd-theme($dd-vars-base);
+  @include dd-theme($dd-theme-dark);
+}
+/* #endif */
+
+/* #ifndef H5 */
+page {
+  @include dd-theme($dd-vars-base);
+  @include dd-theme($dd-theme-dark);
+}
+/* #endif */
+
+.dark {
+  @include dd-theme($dd-theme-dark);
+}
+
+.light {
+  @include dd-theme($dd-theme-light);
+}