@particle-network/ui-react 0.5.1-beta.1 → 0.5.1-beta.10

package/dist/components/UXThemeSwitch/utils.js

@@ -0,0 +1,222 @@
+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,
+        blue: [
+            [
+                '--heroui-blue',
+                colorVariables.blue
+            ],
+            [
+                '--heroui-blue-foreground',
+                readableColor(colorVariables.blue)
+            ]
+        ],
+        bgDefault: [
+            [
+                '--heroui-background',
+                colorVariables.bgDefault
+            ],
+            [
+                '--heroui-background-500',
+                colorVariables.bgDefault
+            ]
+        ],
+        bg200: [
+            [
+                '--heroui-background-200',
+                colorVariables.bg200
+            ]
+        ],
+        bg300: [
+            [
+                '--heroui-background-300',
+                colorVariables.bg300
+            ]
+        ],
+        bg400: [
+            [
+                '--heroui-background-400',
+                colorVariables.bg400
+            ]
+        ],
+        cursor: [
+            [
+                '--heroui-cursor',
+                colorVariables.cursor
+            ],
+            [
+                '--heroui-cursor-foreground',
+                readableColor(colorVariables.cursor)
+            ]
+        ],
+        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 };

package/dist/components/UXToast/index.js

@@ -37,14 +37,14 @@ const show = (props)=>{
     return addToast({
         classNames: {
             base: [
-                'bg-tertiary rounded-xl px-3.5 py-3 shadow-none border-none !w-fit max-w-[90vw] md:max-w-[400px] m-0',
+                'bg-cursor rounded-xl px-3.5 py-3 shadow-none border-none !w-fit max-w-[90vw] md:max-w-[400px] m-0',
                 !hideCloseButton && 'pr-12',
                 'flat' === variant && 'success' === type && 'bg-[#0E3728]',
                 'flat' === variant && 'error' === type && 'bg-[#501D1D]',
                 base
             ],
             description: [
-                'text-tertiary-foreground text-xs font-medium me-0 leading-4 line-clamp-4',
+                'text-cursor-foreground text-xs font-medium me-0 leading-4 line-clamp-4',
                 'flat' === variant && 'text-white',
                 hasLongWord(description) && 'break-all',
                 descriptionClassName
@@ -72,7 +72,7 @@ const show = (props)=>{
         icon: icon ?? getIcon(type),
         hideIcon: !icon && !getIcon(type),
         closeIcon: /*#__PURE__*/ jsx(CloseIcon, {
-            className: 'flat' === variant ? 'text-white' : 'text-tertiary-foreground'
+            className: 'flat' === variant ? 'text-white' : 'text-cursor-foreground'
         }),
         loadingComponent: /*#__PURE__*/ jsx(UXSpinner, {
             size: 18

package/dist/components/index.d.ts

@@ -6,6 +6,7 @@ export * from './UXButton';
 export * from './UXCalendar';
 export * from './UXCheckbox';
 export * from './UXChip';
+export * from './UXColorPicker';
 export * from './UXCopy';
 export * from './UXDatePicker';
 export * from './UXDateRangePicker';

package/dist/components/index.js

@@ -6,6 +6,7 @@ export * from "./UXButton/index.js";
 export * from "./UXCalendar/index.js";
 export * from "./UXCheckbox/index.js";
 export * from "./UXChip/index.js";
+export * from "./UXColorPicker/index.js";
 export * from "./UXCopy/index.js";
 export * from "./UXDatePicker/index.js";
 export * from "./UXDateRangePicker/index.js";