@particle-network/ui-react 0.5.1-beta.4 → 0.5.1-beta.6

package/dist/components/UXThemeSwitch/use-theme-store.js

@@ -1,14 +1,18 @@
-import { themeData } from "@particle-network/ui-shared";
+import { CustomTheme, UXDarkTheme } from "@particle-network/ui-shared";
 import { create } from "zustand";
 import { createJSONStorage, persist } from "zustand/middleware";
 const useThemeStore = create()(persist((set)=>({
-        theme: themeData["0"],
+        theme: UXDarkTheme,
+        customTheme: CustomTheme,
         fontUrl: '',
         fontName: '',
         fontLoadStatus: 'idle',
         setTheme: (theme)=>set({
                 theme
             }),
+        setCustomTheme: (customTheme)=>set({
+                customTheme
+            }),
         setFontUrl: (fontUrl)=>set({
                 fontUrl
             }),
@@ -19,11 +23,12 @@ const useThemeStore = create()(persist((set)=>({
                 fontName
             })
     }), {
-    name: 'ux-preferences-theme',
-    version: 2,
+    name: 'ux-preference-theme',
+    version: 0,
     storage: createJSONStorage(()=>'undefined' != typeof window ? window.localStorage : {}),
     partialize: (state)=>({
             theme: state.theme,
+            customTheme: state.customTheme,
             fontName: state.fontName,
             fontUrl: state.fontUrl
         })

package/dist/components/UXThemeSwitch/use-theme.d.ts

@@ -4,7 +4,9 @@ import { type ThemeItemType } from '@particle-network/ui-shared';
  */
 export declare const useTheme: () => {
     theme: ThemeItemType;
+    customTheme: ThemeItemType;
     setTheme: (theme: ThemeItemType) => void;
+    setCustomTheme: (customTheme: ThemeItemType) => void;
     fontUrl: string;
     setFontUrl: (link: string) => void;
     clearFontUrl: () => void;

package/dist/components/UXThemeSwitch/use-theme.js

@@ -1,88 +1,15 @@
 import { useEffect } from "react";
-import { colorToCSSVariable, hexColorToHSLValue, themeKeys } from "@particle-network/ui-shared";
 import { useDebounceFn } from "ahooks";
 import { useThemeStore } from "./use-theme-store.js";
-const DEFAULT_FONT_FAMILY = 'Inter,system-ui,sans-serif,"Microsoft YaHei"';
-const PRELOAD_FONTS_URL = 'https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap';
-const preloadFonts = ()=>{
-    if ('undefined' == typeof window) return;
-    const existingLink = document.getElementById('ux-preload-fonts-link');
-    if (existingLink) return;
-    const linkElement = document.createElement('link');
-    linkElement.id = 'ux-preload-fonts-link';
-    linkElement.rel = 'stylesheet';
-    linkElement.href = PRELOAD_FONTS_URL;
-    document.head.appendChild(linkElement);
-};
-const applyCustomThemeColors = (theme)=>{
-    if ('undefined' == typeof window) return;
-    const root = document.documentElement;
-    Object.entries(theme.colorVariables).forEach(([color, value])=>{
-        const cssVariable = colorToCSSVariable[color]?.self;
-        if (cssVariable) cssVariable.forEach((variable)=>{
-            root.style.setProperty(variable, hexColorToHSLValue(value));
-        });
-    });
-};
-const clearCustomThemeColors = ()=>{
-    if ('undefined' == typeof window) return;
-    const root = document.documentElement;
-    Object.values(colorToCSSVariable).forEach((cssVar)=>{
-        cssVar.self?.forEach((variable)=>{
-            root.style.removeProperty(variable);
-        });
-    });
-};
-const applyTheme = (theme)=>{
-    if ('undefined' == typeof window) return;
-    const root = document.documentElement;
-    const isClassListCorrect = root.classList.contains(theme.id);
-    const isDataThemeCorrect = root.getAttribute('data-theme') === theme.colorScheme;
-    const isDataPrefersColorCorrect = root.getAttribute('data-prefers-color') === theme.colorScheme;
-    if ('custom' === theme.id) {
-        clearCustomThemeColors();
-        applyCustomThemeColors(theme);
-    } else clearCustomThemeColors();
-    if (isClassListCorrect && isDataThemeCorrect && isDataPrefersColorCorrect && 'custom' !== theme.id) return;
-    if (!isDataThemeCorrect) root.setAttribute('data-theme', theme.colorScheme);
-    if (!isDataPrefersColorCorrect) root.setAttribute('data-prefers-color', theme.colorScheme);
-    root.classList.remove('dark');
-    root.classList.remove('light');
-    if (!isClassListCorrect) {
-        themeKeys.forEach((key)=>{
-            root.classList.remove(key);
-        });
-        root.classList.add('custom' === theme.id ? theme.baseThemeId : theme.id);
-    }
-};
-const extractFontFamilyFromLink = (link)=>{
-    if (!link) return null;
-    try {
-        const url = new URL(link);
-        const familyParam = url.searchParams.get('family');
-        if (!familyParam) return null;
-        const firstFamily = familyParam.split('&family=')[0].split(':')[0].replace(/\+/g, ' ');
-        return firstFamily;
-    } catch  {
-        return null;
-    }
-};
-const applyFont = (fontName)=>{
-    if ('undefined' == typeof window) return;
-    if (fontName) {
-        document.documentElement.style.setProperty('--ux-font-family', `"${fontName}", ${DEFAULT_FONT_FAMILY}`);
-        document.body.style.fontFamily = `"${fontName}", ${DEFAULT_FONT_FAMILY}`;
-    } else {
-        document.documentElement.style.setProperty('--ux-font-family', DEFAULT_FONT_FAMILY);
-        document.body.style.fontFamily = DEFAULT_FONT_FAMILY;
-    }
-};
+import { applyFont, applyTheme, extractFontFamilyFromLink, preloadFonts } from "./utils.js";
 const useTheme = ()=>{
     const theme = useThemeStore((state)=>state.theme);
+    const customTheme = useThemeStore((state)=>state.customTheme);
     const fontUrl = useThemeStore((state)=>state.fontUrl);
     const fontName = useThemeStore((state)=>state.fontName);
     const fontLoadStatus = useThemeStore((state)=>state.fontLoadStatus);
     const storeSetTheme = useThemeStore((state)=>state.setTheme);
+    const storeSetCustomTheme = useThemeStore((state)=>state.setCustomTheme);
     const storeSetFontUrl = useThemeStore((state)=>state.setFontUrl);
     const storeSetFontLoadStatus = useThemeStore((state)=>state.setFontLoadStatus);
     const storeSetFontName = useThemeStore((state)=>state.setFontName);
@@ -142,7 +69,9 @@ const useTheme = ()=>{
     };
     return {
         theme,
+        customTheme,
         setTheme,
+        setCustomTheme: storeSetCustomTheme,
         fontUrl,
         setFontUrl,
         clearFontUrl,

package/dist/components/UXThemeSwitch/utils.d.ts

@@ -0,0 +1,28 @@
+import { type ThemeItemType } from '@particle-network/ui-shared';
+/**
+ * 初始化并预加载字体 CSS（仅执行一次）
+ */
+export declare const preloadFonts: () => void;
+export declare const setCSSProperty: (property: string, value: string) => void;
+/**
+ * 应用自定义主题的颜色到 CSS 变量
+ */
+export declare const applyCustomThemeColors: (theme: ThemeItemType) => void;
+/**
+ * 清除自定义主题的 CSS 变量（切换到其他主题时）
+ */
+export declare const clearCustomThemeColors: () => void;
+/**
+ * 应用主题到文档根元素
+ */
+export declare const applyTheme: (theme: ThemeItemType) => void;
+/**
+ * 从 Google Fonts 链接中提取字体名称
+ * 例如: https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap
+ * 提取: Roboto
+ */
+export declare const extractFontFamilyFromLink: (link: string) => string | null;
+/**
+ * 应用字体到 DOM
+ */
+export declare const applyFont: (fontName: string | undefined) => void;

package/dist/components/UXThemeSwitch/utils.js

@@ -0,0 +1,202 @@
+import { hexColorToHSLValue, themeKeys } from "@particle-network/ui-shared";
+import { readableColor } from "color2k";
+import { generateThemeColor } from "../../heroui/utils/colors.js";
+import { DEFAULT_FONT_FAMILY, PRELOAD_FONTS_URL } from "./constants.js";
+const getCSSProperties = (theme)=>{
+    const { colorVariables } = theme;
+    return {
+        foreground: [
+            [
+                '--heroui-foreground',
+                colorVariables.foreground
+            ]
+        ],
+        secondary: [
+            ...generateThemeColor(colorVariables.secondary, 'secondary', theme.colorScheme).cssVariables,
+            [
+                '--heroui-foreground-300',
+                colorVariables.secondary
+            ]
+        ],
+        tertiary: [
+            [
+                '--heroui-tertiary',
+                colorVariables.tertiary
+            ],
+            [
+                '--heroui-foreground-100',
+                colorVariables.tertiary
+            ],
+            [
+                '--heroui-tertiary-foreground',
+                readableColor(colorVariables.tertiary)
+            ]
+        ],
+        primary: generateThemeColor(colorVariables.primary, 'primary', theme.colorScheme).cssVariables,
+        success: generateThemeColor(colorVariables.success, 'success', theme.colorScheme).cssVariables,
+        danger: generateThemeColor(colorVariables.danger, 'danger', theme.colorScheme).cssVariables,
+        alert: [
+            [
+                '--heroui-alert',
+                colorVariables.alert
+            ],
+            [
+                '--heroui-alert-foreground',
+                readableColor(colorVariables.alert)
+            ]
+        ],
+        warning: generateThemeColor(colorVariables.warning, 'warning', theme.colorScheme).cssVariables,
+        'bg-default': [
+            [
+                '--heroui-background',
+                colorVariables['bg-default']
+            ],
+            [
+                '--heroui-background-500',
+                colorVariables['bg-default']
+            ]
+        ],
+        'bg-200': [
+            [
+                '--heroui-background-200',
+                colorVariables['bg-200']
+            ]
+        ],
+        'bg-300': [
+            [
+                '--heroui-background-300',
+                colorVariables['bg-300']
+            ]
+        ],
+        'bg-400': [
+            [
+                '--heroui-background-400',
+                colorVariables['bg-400']
+            ]
+        ],
+        overlay: [
+            [
+                '--heroui-overlay',
+                colorVariables.overlay
+            ],
+            [
+                '--heroui-content1',
+                colorVariables.overlay
+            ],
+            [
+                '--heroui-overlay-foreground',
+                readableColor(colorVariables.overlay)
+            ],
+            [
+                '--heroui-content1-foreground',
+                readableColor(colorVariables.overlay)
+            ]
+        ],
+        divider: [
+            [
+                '--heroui-divider',
+                colorVariables.divider
+            ],
+            [
+                '--heroui-divider-foreground',
+                readableColor(colorVariables.divider)
+            ]
+        ],
+        bullish: [
+            [
+                '--heroui-bullish',
+                colorVariables.bullish
+            ],
+            [
+                '--heroui-bullish-foreground',
+                readableColor(colorVariables.bullish)
+            ]
+        ],
+        bearish: [
+            [
+                '--heroui-bearish',
+                colorVariables.bearish
+            ],
+            [
+                '--heroui-bearish-foreground',
+                readableColor(colorVariables.bearish)
+            ]
+        ]
+    };
+};
+const preloadFonts = ()=>{
+    if ('undefined' == typeof window) return;
+    const existingLink = document.getElementById('ux-preload-fonts-link');
+    if (existingLink) return;
+    const linkElement = document.createElement('link');
+    linkElement.id = 'ux-preload-fonts-link';
+    linkElement.rel = 'stylesheet';
+    linkElement.href = PRELOAD_FONTS_URL;
+    document.head.appendChild(linkElement);
+};
+const setCSSProperty = (property, value)=>{
+    if ('undefined' == typeof window) return;
+    const root = document.documentElement;
+    root.style.setProperty(property, hexColorToHSLValue(value));
+};
+const applyCustomThemeColors = (theme)=>{
+    if ('undefined' == typeof window) return;
+    const cssProperties = getCSSProperties(theme);
+    Object.entries(cssProperties).forEach(([, value])=>{
+        value.forEach(([variable, value])=>{
+            setCSSProperty(variable, value);
+        });
+    });
+};
+const clearCustomThemeColors = ()=>{
+    if ('undefined' == typeof window) return;
+    const rootStyles = getComputedStyle(document.documentElement);
+    Array.from(rootStyles).filter((prop)=>prop.startsWith('--heroui')).forEach((prop)=>{
+        document.documentElement.style.removeProperty(prop);
+    });
+};
+const applyTheme = (theme)=>{
+    if ('undefined' == typeof window) return;
+    const root = document.documentElement;
+    const isClassListCorrect = root.classList.contains(theme.id);
+    const isDataThemeCorrect = root.getAttribute('data-theme') === theme.colorScheme;
+    const isDataPrefersColorCorrect = root.getAttribute('data-prefers-color') === theme.colorScheme;
+    if ('custom' === theme.id) {
+        clearCustomThemeColors();
+        applyCustomThemeColors(theme);
+    } else clearCustomThemeColors();
+    if (isClassListCorrect && isDataThemeCorrect && isDataPrefersColorCorrect && 'custom' !== theme.id) return;
+    if (!isDataThemeCorrect) root.setAttribute('data-theme', theme.colorScheme);
+    if (!isDataPrefersColorCorrect) root.setAttribute('data-prefers-color', theme.colorScheme);
+    root.classList.remove('dark');
+    root.classList.remove('light');
+    if (!isClassListCorrect) {
+        themeKeys.forEach((key)=>{
+            root.classList.remove(key);
+        });
+        root.classList.add('custom' === theme.id ? theme.baseThemeId : theme.id);
+    }
+};
+const extractFontFamilyFromLink = (link)=>{
+    if (!link) return null;
+    try {
+        const url = new URL(link);
+        const familyParam = url.searchParams.get('family');
+        if (!familyParam) return null;
+        const firstFamily = familyParam.split('&family=')[0].split(':')[0].replace(/\+/g, ' ');
+        return firstFamily;
+    } catch  {
+        return null;
+    }
+};
+const applyFont = (fontName)=>{
+    if ('undefined' == typeof window) return;
+    if (fontName) {
+        document.documentElement.style.setProperty('--ux-font-family', `"${fontName}", ${DEFAULT_FONT_FAMILY}`);
+        document.body.style.fontFamily = `"${fontName}", ${DEFAULT_FONT_FAMILY}`;
+    } else {
+        document.documentElement.style.setProperty('--ux-font-family', DEFAULT_FONT_FAMILY);
+        document.body.style.fontFamily = DEFAULT_FONT_FAMILY;
+    }
+};
+export { applyCustomThemeColors, applyFont, applyTheme, clearCustomThemeColors, extractFontFamilyFromLink, preloadFonts, setCSSProperty };