@yh-ui/theme 1.0.52 → 1.0.54

package/dist/theme.cjs

@@ -420,8 +420,9 @@ const colorBlindPalettes = exports.colorBlindPalettes = {
 const THEME_TRANSITION_CLASS = "yh-theme-transitioning";
 const DEFAULT_TRANSITION_DURATION = 300;
 const DEFAULT_TRANSITION_TIMING = "cubic-bezier(0.4, 0, 0.2, 1)";
-function enableThemeTransition(duration = DEFAULT_TRANSITION_DURATION, timing = DEFAULT_TRANSITION_TIMING) {
+function enableThemeTransition(duration = DEFAULT_TRANSITION_DURATION, timing = DEFAULT_TRANSITION_TIMING, el = null) {
   if (typeof document === "undefined") return;
+  const target = el || document.documentElement;
   const style = document.createElement("style");
   style.id = "yh-theme-transition";
   style.textContent = `
@@ -439,9 +440,9 @@ function enableThemeTransition(duration = DEFAULT_TRANSITION_DURATION, timing =
     }
   `;
   document.head.appendChild(style);
-  document.documentElement.classList.add(THEME_TRANSITION_CLASS);
+  target.classList.add(THEME_TRANSITION_CLASS);
   setTimeout(() => {
-    document.documentElement.classList.remove(THEME_TRANSITION_CLASS);
+    target.classList.remove(THEME_TRANSITION_CLASS);
     style.remove();
   }, duration);
 }
@@ -556,6 +557,7 @@ class ThemeManager {
   };
   themeHistory = [];
   maxHistoryLength = 10;
+  responsiveVars = /* @__PURE__ */new Map();
   // 响应式状态
   state = (0, _vue.reactive)({
     theme: "default",
@@ -668,11 +670,12 @@ class ThemeManager {
   setDarkMode(dark) {
     this.isDark = dark;
     this.state.dark = dark;
-    if (typeof document !== "undefined") {
+    const el = this.targetEl || (typeof document !== "undefined" ? document.documentElement : null);
+    if (el) {
       if (dark) {
-        document.documentElement.classList.add("dark");
+        el.classList.add("dark");
       } else {
-        document.documentElement.classList.remove("dark");
+        el.classList.remove("dark");
       }
     }
     const currentColors = {
@@ -798,6 +801,8 @@ class ThemeManager {
         Object.entries(semanticColors).forEach(([state, value]) => {
           styles[`--yh-color-${cssVar}-${state}`] = value;
         });
+        const textContrastColor = getTextColorForBackground(baseColor);
+        styles[`--yh-color-${cssVar}-text`] = textContrastColor;
         const rgb = hexToRgb(baseColor);
         if (rgb) {
           styles[`--yh-color-${cssVar}-rgb`] = `${rgb.r}, ${rgb.g}, ${rgb.b}`;
@@ -919,7 +924,7 @@ class ThemeManager {
     try {
       const snapshot = JSON.parse(json);
       if (this.transitionEnabled) {
-        enableThemeTransition(this.transitionConfig.duration, this.transitionConfig.timing);
+        enableThemeTransition(this.transitionConfig.duration, this.transitionConfig.timing, this.targetEl);
       }
       this.setPreset(snapshot.preset);
       if (snapshot.colors && Object.keys(snapshot.colors).length > 0) {
@@ -966,8 +971,8 @@ class ThemeManager {
     this.state.colorBlindMode = "none";
     this.state.algorithm = "default";
     this.state.componentThemeVersion += 1;
-    document.documentElement.classList.remove("dark");
     const el = this.targetEl || document.documentElement;
+    el.classList.remove("dark");
     const colorTypes = ["primary", "success", "warning", "danger", "info"];
     const suffixes = ["", "light-1", "light-2", "light-3", "light-4", "light-5", "light-6", "light-7", "light-8", "light-9", "dark-2", "hover", "active", "disabled", "focus", "rgb"];
     colorTypes.forEach(type => {
@@ -985,7 +990,7 @@ class ThemeManager {
   /** 设置密度 */
   setDensity(density) {
     if (this.transitionEnabled) {
-      enableThemeTransition(this.transitionConfig.duration, this.transitionConfig.timing);
+      enableThemeTransition(this.transitionConfig.duration, this.transitionConfig.timing, this.targetEl);
     }
     this.currentDensity = density;
     this.state.density = density;
@@ -1005,7 +1010,7 @@ class ThemeManager {
   /** 设置色盲友好模式 */
   setColorBlindMode(mode) {
     if (this.transitionEnabled) {
-      enableThemeTransition(this.transitionConfig.duration, this.transitionConfig.timing);
+      enableThemeTransition(this.transitionConfig.duration, this.transitionConfig.timing, this.targetEl);
     }
     this.colorBlindMode = mode;
     this.state.colorBlindMode = mode;
@@ -1110,7 +1115,7 @@ class ThemeManager {
         duration: DEFAULT_TRANSITION_DURATION,
         timing: DEFAULT_TRANSITION_TIMING
       };
-      enableThemeTransition(transitionConfig.duration, transitionConfig.timing);
+      enableThemeTransition(transitionConfig.duration, transitionConfig.timing, this.targetEl);
     }
     this.pushHistory();
     const snapshot = this.createTheme(config);
@@ -1195,6 +1200,7 @@ class ThemeManager {
   /** 设置响应式变量 (根据断点自动切换) */
   setResponsiveVar(name, values) {
     if (typeof document === "undefined") return;
+    this.responsiveVars.set(name, values);
     let style = document.getElementById("yh-responsive-vars");
     if (!style) {
       style = document.createElement("style");
@@ -1202,23 +1208,25 @@ class ThemeManager {
       document.head.appendChild(style);
     }
     let css = "";
-    const orderedBreakpoints = ["xs", "sm", "md", "lg", "xl", "xxl"];
-    orderedBreakpoints.forEach(bp => {
-      if (values[bp]) {
-        if (bp === "xs") {
-          css += `
-            :root { ${name}: ${values[bp]}; }
-          `;
-        } else {
-          css += `
-            @media (min-width: ${breakpoints[bp]}px) {
-              :root { ${name}: ${values[bp]}; }
-            }
-          `;
+    this.responsiveVars.forEach((vals, varName) => {
+      const orderedBreakpoints = ["xs", "sm", "md", "lg", "xl", "xxl"];
+      orderedBreakpoints.forEach(bp => {
+        if (vals[bp]) {
+          if (bp === "xs") {
+            css += `
+              :root { ${varName}: ${vals[bp]}; }
+            `;
+          } else {
+            css += `
+              @media (min-width: ${breakpoints[bp]}px) {
+                :root { ${varName}: ${vals[bp]}; }
+              }
+            `;
+          }
         }
-      }
+      });
     });
-    style.textContent += css;
+    style.textContent = css;
   }
   /** 销毁 */
   destroy() {
@@ -1230,6 +1238,7 @@ class ThemeManager {
     if (style) {
       style.remove();
     }
+    this.responsiveVars.clear();
   }
 }
 exports.ThemeManager = ThemeManager;

package/dist/theme.d.ts

@@ -148,6 +148,7 @@ export declare class ThemeManager {
     private transitionConfig;
     private themeHistory;
     private maxHistoryLength;
+    private responsiveVars;
     readonly state: {
         theme: PresetTheme;
         dark: boolean;

package/dist/theme.mjs

@@ -391,8 +391,9 @@ const colorBlindPalettes = {
 const THEME_TRANSITION_CLASS = "yh-theme-transitioning";
 const DEFAULT_TRANSITION_DURATION = 300;
 const DEFAULT_TRANSITION_TIMING = "cubic-bezier(0.4, 0, 0.2, 1)";
-function enableThemeTransition(duration = DEFAULT_TRANSITION_DURATION, timing = DEFAULT_TRANSITION_TIMING) {
+function enableThemeTransition(duration = DEFAULT_TRANSITION_DURATION, timing = DEFAULT_TRANSITION_TIMING, el = null) {
   if (typeof document === "undefined") return;
+  const target = el || document.documentElement;
   const style = document.createElement("style");
   style.id = "yh-theme-transition";
   style.textContent = `
@@ -410,9 +411,9 @@ function enableThemeTransition(duration = DEFAULT_TRANSITION_DURATION, timing =
     }
   `;
   document.head.appendChild(style);
-  document.documentElement.classList.add(THEME_TRANSITION_CLASS);
+  target.classList.add(THEME_TRANSITION_CLASS);
   setTimeout(() => {
-    document.documentElement.classList.remove(THEME_TRANSITION_CLASS);
+    target.classList.remove(THEME_TRANSITION_CLASS);
     style.remove();
   }, duration);
 }
@@ -497,6 +498,7 @@ export class ThemeManager {
   };
   themeHistory = [];
   maxHistoryLength = 10;
+  responsiveVars = /* @__PURE__ */ new Map();
   // 响应式状态
   state = reactive({
     theme: "default",
@@ -598,11 +600,12 @@ export class ThemeManager {
   setDarkMode(dark) {
     this.isDark = dark;
     this.state.dark = dark;
-    if (typeof document !== "undefined") {
+    const el = this.targetEl || (typeof document !== "undefined" ? document.documentElement : null);
+    if (el) {
       if (dark) {
-        document.documentElement.classList.add("dark");
+        el.classList.add("dark");
       } else {
-        document.documentElement.classList.remove("dark");
+        el.classList.remove("dark");
       }
     }
     const currentColors = {
@@ -716,6 +719,8 @@ export class ThemeManager {
         Object.entries(semanticColors).forEach(([state, value]) => {
           styles[`--yh-color-${cssVar}-${state}`] = value;
         });
+        const textContrastColor = getTextColorForBackground(baseColor);
+        styles[`--yh-color-${cssVar}-text`] = textContrastColor;
         const rgb = hexToRgb(baseColor);
         if (rgb) {
           styles[`--yh-color-${cssVar}-rgb`] = `${rgb.r}, ${rgb.g}, ${rgb.b}`;
@@ -837,7 +842,11 @@ export class ThemeManager {
     try {
       const snapshot = JSON.parse(json);
       if (this.transitionEnabled) {
-        enableThemeTransition(this.transitionConfig.duration, this.transitionConfig.timing);
+        enableThemeTransition(
+          this.transitionConfig.duration,
+          this.transitionConfig.timing,
+          this.targetEl
+        );
       }
       this.setPreset(snapshot.preset);
       if (snapshot.colors && Object.keys(snapshot.colors).length > 0) {
@@ -884,8 +893,8 @@ export class ThemeManager {
     this.state.colorBlindMode = "none";
     this.state.algorithm = "default";
     this.state.componentThemeVersion += 1;
-    document.documentElement.classList.remove("dark");
     const el = this.targetEl || document.documentElement;
+    el.classList.remove("dark");
     const colorTypes = ["primary", "success", "warning", "danger", "info"];
     const suffixes = [
       "",
@@ -920,7 +929,11 @@ export class ThemeManager {
   /** 设置密度 */
   setDensity(density) {
     if (this.transitionEnabled) {
-      enableThemeTransition(this.transitionConfig.duration, this.transitionConfig.timing);
+      enableThemeTransition(
+        this.transitionConfig.duration,
+        this.transitionConfig.timing,
+        this.targetEl
+      );
     }
     this.currentDensity = density;
     this.state.density = density;
@@ -940,7 +953,11 @@ export class ThemeManager {
   /** 设置色盲友好模式 */
   setColorBlindMode(mode) {
     if (this.transitionEnabled) {
-      enableThemeTransition(this.transitionConfig.duration, this.transitionConfig.timing);
+      enableThemeTransition(
+        this.transitionConfig.duration,
+        this.transitionConfig.timing,
+        this.targetEl
+      );
     }
     this.colorBlindMode = mode;
     this.state.colorBlindMode = mode;
@@ -1035,7 +1052,7 @@ export class ThemeManager {
   applyFullConfig(config) {
     if (this.transitionEnabled || config.transition) {
       const transitionConfig = typeof config.transition === "object" ? config.transition : { duration: DEFAULT_TRANSITION_DURATION, timing: DEFAULT_TRANSITION_TIMING };
-      enableThemeTransition(transitionConfig.duration, transitionConfig.timing);
+      enableThemeTransition(transitionConfig.duration, transitionConfig.timing, this.targetEl);
     }
     this.pushHistory();
     const snapshot = this.createTheme(config);
@@ -1118,6 +1135,7 @@ export class ThemeManager {
   /** 设置响应式变量 (根据断点自动切换) */
   setResponsiveVar(name, values) {
     if (typeof document === "undefined") return;
+    this.responsiveVars.set(name, values);
     let style = document.getElementById("yh-responsive-vars");
     if (!style) {
       style = document.createElement("style");
@@ -1125,23 +1143,25 @@ export class ThemeManager {
       document.head.appendChild(style);
     }
     let css = "";
-    const orderedBreakpoints = ["xs", "sm", "md", "lg", "xl", "xxl"];
-    orderedBreakpoints.forEach((bp) => {
-      if (values[bp]) {
-        if (bp === "xs") {
-          css += `
-            :root { ${name}: ${values[bp]}; }
-          `;
-        } else {
-          css += `
-            @media (min-width: ${breakpoints[bp]}px) {
-              :root { ${name}: ${values[bp]}; }
-            }
-          `;
+    this.responsiveVars.forEach((vals, varName) => {
+      const orderedBreakpoints = ["xs", "sm", "md", "lg", "xl", "xxl"];
+      orderedBreakpoints.forEach((bp) => {
+        if (vals[bp]) {
+          if (bp === "xs") {
+            css += `
+              :root { ${varName}: ${vals[bp]}; }
+            `;
+          } else {
+            css += `
+              @media (min-width: ${breakpoints[bp]}px) {
+                :root { ${varName}: ${vals[bp]}; }
+              }
+            `;
+          }
         }
-      }
+      });
     });
-    style.textContent += css;
+    style.textContent = css;
   }
   /** 销毁 */
   destroy() {
@@ -1153,6 +1173,7 @@ export class ThemeManager {
     if (style) {
       style.remove();
     }
+    this.responsiveVars.clear();
   }
 }
 let globalThemeManager = null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yh-ui/theme",
-  "version": "1.0.52",
+  "version": "1.0.54",
   "description": "YH-UI theme and design tokens",
   "type": "module",
   "sideEffects": [