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

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

package/dist/components/typography/Text.type.d.ts

@@ -1,5 +1,5 @@
 import type React from 'react';
-import type { UXForegroundColor } from '@particle-network/ui-shared';
+import type { HexColor, UXForegroundColor } from '@particle-network/ui-shared';
 type TextVariant = 'h1' | 'h2' | 'h3' | 'body1' | 'body1Bold' | 'body2' | 'body2Bold' | 'body3' | 'body3Bold' | 'caption1' | 'caption1Bold';
 type TextWeight = 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold';
 type TextLineHeight = '1' | '1.4';
@@ -75,7 +75,7 @@ export interface TextProps extends React.HTMLAttributes<HTMLSpanElement> {
      * | extrabold | 800         |
      */
     fontWeight?: TextWeight;
-    color?: UXForegroundColor | `#${string}`;
+    color?: UXForegroundColor | HexColor;
     lineHeight?: TextLineHeight;
     align?: TextAlign;
 }

package/dist/components/typography/Text.type.js

@@ -23,7 +23,6 @@ const textClasses = {
         danger: 'text-danger',
         alert: 'text-alert',
         warning: 'text-warning',
-        gold: 'text-gold',
         bullish: 'text-bullish',
         bearish: 'text-bearish'
     },

package/dist/heroui/constants.d.ts

@@ -0,0 +1,18 @@
+import type { Config, ConfigColors, ConfigLayout } from './types';
+export declare const defaultDarkColorWeight = 20;
+export declare const defaultLightColorWeight = 17.5;
+export declare const colorWeight = 17.5;
+export declare const floatNumberPattern: RegExp;
+export declare const colorsId = "th-colors";
+export declare const defaultColorsId = "th-default-colors";
+export declare const baseColorsId = "th-base-colors";
+export declare const otherColorsId = "th-other-colors";
+export declare const showcaseId = "th-showcase";
+export declare const contentShowcaseId = "th-content-showcase";
+export declare const contentColorsId = "th-content-colors";
+export declare const configKey = "config";
+export declare const syncThemesKey = "sync-themes";
+export declare const initialLightTheme: ConfigColors;
+export declare const initialDarkTheme: ConfigColors;
+export declare const initialLayout: ConfigLayout;
+export declare const initialConfig: Config;

package/dist/heroui/constants.js

@@ -0,0 +1,98 @@
+import { colors } from "@heroui/theme";
+const defaultDarkColorWeight = 20;
+const defaultLightColorWeight = 17.5;
+const colorWeight = 17.5;
+const floatNumberPattern = /^\d+(\.\d*)?$/;
+const colorsId = 'th-colors';
+const defaultColorsId = 'th-default-colors';
+const baseColorsId = 'th-base-colors';
+const otherColorsId = 'th-other-colors';
+const showcaseId = 'th-showcase';
+const contentShowcaseId = 'th-content-showcase';
+const contentColorsId = 'th-content-colors';
+const configKey = 'config';
+const syncThemesKey = 'sync-themes';
+const initialLightTheme = {
+    defaultColor: {
+        default: '#d4d4d8'
+    },
+    baseColor: {
+        primary: colors.blue["500"],
+        secondary: colors.purple["500"],
+        success: colors.green["500"],
+        warning: colors.yellow["500"],
+        danger: colors.red["500"]
+    },
+    layoutColor: {
+        foreground: colors.black,
+        background: colors.white,
+        focus: colors.blue["500"],
+        overlay: colors.white
+    },
+    contentColor: {
+        content1: colors.white,
+        content2: colors.zinc["100"],
+        content3: colors.zinc["200"],
+        content4: colors.zinc["300"]
+    }
+};
+const initialDarkTheme = {
+    defaultColor: {
+        default: colors.zinc["700"]
+    },
+    baseColor: {
+        primary: colors.blue["500"],
+        secondary: colors.purple["500"],
+        success: colors.green["500"],
+        warning: colors.yellow["500"],
+        danger: colors.red["500"]
+    },
+    layoutColor: {
+        foreground: colors.white,
+        background: colors.black,
+        focus: colors.blue["500"],
+        overlay: colors.black
+    },
+    contentColor: {
+        content1: colors.zinc["900"],
+        content2: colors.zinc["800"],
+        content3: colors.zinc["700"],
+        content4: colors.zinc["600"]
+    }
+};
+const initialLayout = {
+    fontSize: {
+        tiny: '0.75',
+        small: '0.875',
+        medium: '1',
+        large: '1.125'
+    },
+    lineHeight: {
+        tiny: '1',
+        small: '1.25',
+        medium: '1.5',
+        large: '1.75'
+    },
+    radius: {
+        small: '0.5',
+        medium: '0.75',
+        large: '0.875'
+    },
+    borderWidth: {
+        small: '1',
+        medium: '2',
+        large: '3'
+    },
+    otherParams: {
+        disabledOpacity: '0.5',
+        dividerWeight: '1',
+        hoverOpacity: '0.9'
+    }
+};
+const initialConfig = {
+    name: 'heroui',
+    light: initialLightTheme,
+    dark: initialDarkTheme,
+    layout: initialLayout
+};
+export { baseColorsId, colorWeight, colorsId, configKey, contentColorsId, contentShowcaseId, defaultColorsId, defaultDarkColorWeight, defaultLightColorWeight, floatNumberPattern, initialConfig, initialDarkTheme, initialLayout, initialLightTheme, otherColorsId, showcaseId, syncThemesKey };

package/dist/heroui/types.d.ts

@@ -0,0 +1,91 @@
+export interface ColorShades {
+    50: string;
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+    900: string;
+}
+export type ColorPickerType = 'background' | 'content1' | 'content2' | 'content3' | 'content4' | 'danger' | 'default' | 'divider' | 'focus' | 'foreground' | 'overlay' | 'primary' | 'secondary' | 'success' | 'warning';
+export type Color = 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
+export type Size = 'sm' | 'md' | 'lg';
+export type Variant = 'dot' | 'solid' | 'faded' | 'bordered' | 'light' | 'flat' | 'ghost' | 'shadow' | 'underlined';
+export type Radius = 'none' | 'sm' | 'md' | 'lg' | 'full';
+export type HeroUIScaling = 90 | 95 | 100 | 105 | 110;
+export type Border = 'thin' | 'medium' | 'thick';
+export type FontName = 'Inter' | 'Roboto' | 'Outfit' | 'Lora';
+export type ThemeType = 'light' | 'dark';
+export interface ThemeColor extends ColorShades {
+    foreground: string;
+    DEFAULT: string;
+}
+export interface Config {
+    name: TemplateType;
+    light: ConfigColors;
+    dark: ConfigColors;
+    layout: ConfigLayout;
+}
+export interface ConfigColors {
+    defaultColor: {
+        default: string;
+    };
+    baseColor: {
+        primary: string;
+        secondary: string;
+        success: string;
+        warning: string;
+        danger: string;
+    };
+    layoutColor: {
+        foreground: string;
+        background: string;
+        focus: string;
+        overlay: string;
+    };
+    contentColor: {
+        content1: string;
+        content2: string;
+        content3: string;
+        content4: string;
+    };
+}
+export interface ConfigLayout {
+    fontSize: {
+        tiny: string;
+        small: string;
+        medium: string;
+        large: string;
+    };
+    lineHeight: {
+        tiny: string;
+        small: string;
+        medium: string;
+        large: string;
+    };
+    radius: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+    borderWidth: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+    otherParams: {
+        disabledOpacity: string;
+        dividerWeight: string;
+        hoverOpacity: string;
+    };
+}
+export interface Template {
+    label: string;
+    name: TemplateType;
+    value: Config;
+}
+export type TemplateType = 'coffee' | 'emerald' | 'heroui' | 'elegant' | 'modern' | 'retro';
+export type FontType = 'Inter' | 'Roboto' | 'Outfit' | 'Lora';

package/dist/heroui/utils/colors.d.ts

@@ -0,0 +1,34 @@
+import type { ColorPickerType, ThemeType } from '../types';
+import Values from 'values.js';
+/**
+ * Convert color values to RGB
+ */
+export declare function colorValuesToRgb(value: Values): string;
+/**
+ * Convert hex color to HSL
+ */
+export declare function hexToHsl(hex: string): string;
+/**
+ * Get the color weight
+ */
+export declare function getColorWeight(colorType: ColorPickerType, theme: ThemeType): 20 | 17.5;
+/**
+ * Generate theme color
+ */
+export declare function generateThemeColor(color: string, type: ColorPickerType, theme: ThemeType): {
+    twTheme: {
+        foreground: string;
+        DEFAULT: string;
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    cssVariables: string[][];
+};

package/dist/heroui/utils/colors.js

@@ -0,0 +1,121 @@
+import { readableColor } from "color2k";
+import { colorWeight as external_constants_js_colorWeight, defaultDarkColorWeight, defaultLightColorWeight } from "../constants.js";
+import { swapColorValues } from "./object.js";
+import values_0 from "values.js";
+function colorValuesToRgb(value) {
+    return `rgba(${value.rgb.join(', ')}, ${value.alpha})`;
+}
+function hexToRgb(hex) {
+    let r = 0, g = 0, b = 0;
+    if (4 === hex.length || 5 === hex.length) {
+        r = parseInt(hex[1] + hex[1], 16);
+        g = parseInt(hex[2] + hex[2], 16);
+        b = parseInt(hex[3] + hex[3], 16);
+    } else if (7 === hex.length || 9 === hex.length) {
+        r = parseInt(hex.slice(1, 3), 16);
+        g = parseInt(hex.slice(3, 5), 16);
+        b = parseInt(hex.slice(5, 7), 16);
+    } else throw new Error('Invalid hex color format');
+    return [
+        r,
+        g,
+        b
+    ];
+}
+function hexToHsl(hex) {
+    const [r, g, b] = hexToRgb(hex);
+    const normalizedR = r / 255;
+    const normalizedG = g / 255;
+    const normalizedB = b / 255;
+    const max = Math.max(normalizedR, normalizedG, normalizedB);
+    const min = Math.min(normalizedR, normalizedG, normalizedB);
+    const lightness = (max + min) / 2;
+    if (max === min) return `0 0% ${100 * lightness}%`;
+    let saturation = 0;
+    saturation = lightness < 0.5 ? (max - min) / (max + min) : (max - min) / (2 - max - min);
+    let hue;
+    hue = max === normalizedR ? (normalizedG - normalizedB) / (max - min) : max === normalizedG ? 2 + (normalizedB - normalizedR) / (max - min) : 4 + (normalizedR - normalizedG) / (max - min);
+    hue *= 60;
+    if (hue < 0) hue += 360;
+    return `${hue.toFixed(2)} ${(100 * saturation).toFixed(2)}% ${(100 * lightness).toFixed(2)}%`;
+}
+function getColorWeight(colorType, theme) {
+    if ('default' === colorType) return 'dark' === theme ? defaultDarkColorWeight : defaultLightColorWeight;
+    return external_constants_js_colorWeight;
+}
+function rgbValueToHex(c) {
+    const hex = c.toString(16);
+    return 1 === hex.length ? `0${hex}` : hex;
+}
+function rgbToHex([r, g, b]) {
+    return `#${rgbValueToHex(r)}${rgbValueToHex(g)}${rgbValueToHex(b)}`;
+}
+function generateThemeColor(color, type, theme) {
+    const values = new values_0(color);
+    const colorWeight = getColorWeight(type, theme);
+    const colorValues = values.all(colorWeight);
+    const shades = colorValues.slice(0, colorValues.length - 1).reduce((acc, shadeValue, index)=>{
+        acc[0 === index ? 50 : 100 * index] = rgbToHex(shadeValue.rgb);
+        return acc;
+    }, {});
+    const twTheme = {
+        ...'light' === theme ? shades : swapColorValues(shades),
+        foreground: readableColor(shades[500]),
+        DEFAULT: shades[500]
+    };
+    const cssVariables = [
+        [
+            `--heroui-${type}-50`,
+            twTheme[50]
+        ],
+        [
+            `--heroui-${type}-100`,
+            twTheme[100]
+        ],
+        [
+            `--heroui-${type}-200`,
+            twTheme[200]
+        ],
+        [
+            `--heroui-${type}-300`,
+            twTheme[300]
+        ],
+        [
+            `--heroui-${type}-400`,
+            twTheme[400]
+        ],
+        [
+            `--heroui-${type}-500`,
+            twTheme[500]
+        ],
+        [
+            `--heroui-${type}-600`,
+            twTheme[600]
+        ],
+        [
+            `--heroui-${type}-700`,
+            twTheme[700]
+        ],
+        [
+            `--heroui-${type}-800`,
+            twTheme[800]
+        ],
+        [
+            `--heroui-${type}-900`,
+            twTheme[900]
+        ],
+        [
+            `--heroui-${type}-foreground`,
+            twTheme.foreground
+        ],
+        [
+            `--heroui-${type}`,
+            twTheme.DEFAULT
+        ]
+    ];
+    return {
+        twTheme,
+        cssVariables
+    };
+}
+export { colorValuesToRgb, generateThemeColor, getColorWeight, hexToHsl };

package/dist/heroui/utils/object.d.ts

@@ -0,0 +1 @@
+export declare function swapColorValues<T extends Object>(colors: T): {};

package/dist/heroui/utils/object.js

@@ -0,0 +1,17 @@
+function swapColorValues(colors) {
+    const swappedColors = {};
+    const keys = Object.keys(colors);
+    const { length } = keys;
+    for(let i = 0; i < length / 2; i++){
+        const key1 = keys[i];
+        const key2 = keys[length - 1 - i];
+        swappedColors[key1] = colors[key2];
+        swappedColors[key2] = colors[key1];
+    }
+    if (length % 2 !== 0) {
+        const middleKey = keys[Math.floor(length / 2)];
+        swappedColors[middleKey] = colors[middleKey];
+    }
+    return swappedColors;
+}
+export { swapColorValues };