@particle-network/ui-shared/dist/color.js

Shared utilities for Particle Network design system

const colorMap = {
    dark: {
        default: '#FFFFFF',
        white: '#FFFFFF',
        foreground: '#FFFFFF',
        secondary: '#A1A1AA',
        tertiary: '#4E4E56',
        primary: '#D745FF',
        success: '#45B167',
        danger: '#E84A5A',
        alert: '#F57733',
        warning: '#FF9821',
        gold: '#FFB800',
        bullish: '#FFAC34',
        bearish: '#E84A5A',
        'bg-default': '#000000',
        'bg-200': '#1F1F23',
        'bg-300': '#17171C',
        'bg-400': '#0F0F0F',
        overlay: '#17171C',
        divider: '#282828',
        transparent: 'transparent'
    },
    light: {
        default: '#000000',
        white: '#FFFFFF',
        foreground: '#000000',
        secondary: '#767A80',
        tertiary: '#C0C0C9',
        primary: '#D745FF',
        success: '#2E9F4A',
        danger: '#DE4A40',
        alert: '#E65E16',
        warning: '#FF9821',
        gold: '#F38300',
        bullish: '#FFAC34',
        bearish: '#E84A5A',
        'bg-default': '#FFFFFF',
        'bg-200': '#E8E8ED',
        'bg-300': '#F0F0F2',
        'bg-400': '#F8F8FA',
        overlay: '#FFFFFF',
        divider: '#E0E0E6',
        transparent: 'transparent'
    }
};
const foregroundColorList = [
    'default',
    'secondary',
    'tertiary',
    'primary',
    'success',
    'danger',
    'alert',
    'warning',
    'gold',
    'bullish',
    'bearish'
];
const colorToCSSVariable = {
    default: '--heroui-foreground',
    foreground: '--heroui-foreground',
    secondary: '--heroui-foreground-300',
    white: '--color-white',
    tertiary: '--heroui-foreground-100',
    primary: '--heroui-primary',
    success: '--heroui-success',
    danger: '--heroui-danger',
    alert: '--heroui-alert',
    warning: '--heroui-warning',
    gold: '--heroui-gold',
    bullish: '--bullish-color',
    bearish: '--bearish-color'
};
function hexColorToHSLValue(hex) {
    const hexWithoutHash = hex.replace('#', '');
    const r = parseInt(hexWithoutHash.substring(0, 2), 16) / 255;
    const g = parseInt(hexWithoutHash.substring(2, 4), 16) / 255;
    const b = parseInt(hexWithoutHash.substring(4, 6), 16) / 255;
    const max = Math.max(r, g, b);
    const min = Math.min(r, g, b);
    let h = 0;
    let s = 0;
    const l = (max + min) / 2;
    if (max === min) {
        h = 0;
        s = 0;
    } else {
        const d = max - min;
        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
        switch(max){
            case r:
                h = (g - b) / d + (g < b ? 6 : 0);
                break;
            case g:
                h = (b - r) / d + 2;
                break;
            case b:
                h = (r - g) / d + 4;
                break;
            default:
                h = 0;
                break;
        }
        h /= 6;
    }
    return `${Math.round(360 * h)}, ${Math.round(100 * s)}%, ${Math.round(100 * l)}%`;
}
function hexColorToHSL(hex) {
    const value = hexColorToHSLValue(hex);
    return `hsl(${value})`;
}
function hslToHex(hslStr) {
    const hslMatch = hslStr.match(/(\d*\.?\d+)\s+(\d*\.?\d+)%?\s+(\d*\.?\d+)%?/);
    if (!hslMatch) throw new Error('Invalid HSL format');
    let h = parseFloat(hslMatch[1]);
    let s = parseFloat(hslMatch[2]);
    let l = parseFloat(hslMatch[3]);
    h = h % 360 / 360;
    s = Math.min(100, s) / 100;
    l = Math.min(100, l) / 100;
    const c = (1 - Math.abs(2 * l - 1)) * s;
    const x = c * (1 - Math.abs(6 * h % 2 - 1));
    const m = l - c / 2;
    let r, g, b;
    if (h < 1 / 6) [r, g, b] = [
        c,
        x,
        0
    ];
    else if (h < 2 / 6) [r, g, b] = [
        x,
        c,
        0
    ];
    else if (h < 0.5) [r, g, b] = [
        0,
        c,
        x
    ];
    else if (h < 4 / 6) [r, g, b] = [
        0,
        x,
        c
    ];
    else if (h < 5 / 6) [r, g, b] = [
        x,
        0,
        c
    ];
    else [r, g, b] = [
        c,
        0,
        x
    ];
    const toHex = (n)=>Math.round((n + m) * 255).toString(16).padStart(2, '0');
    return `#${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase();
}
const getHexColorFromCSSVariable = (color)=>{
    const rootStyles = getComputedStyle(document.documentElement);
    const value = rootStyles.getPropertyValue(colorToCSSVariable[color]).trim();
    if (!value) return '#000000';
    return value.startsWith('#') ? value : hslToHex(value);
};
const setColorWithOpacity = (color, opacity)=>{
    let r, g, b;
    if (color.startsWith('#')) {
        const hex = color.slice(1);
        const bigint = parseInt(hex, 16);
        r = bigint >> 16 & 255;
        g = bigint >> 8 & 255;
        b = 255 & bigint;
    } else {
        const rgbaMatch = color.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*\d*\.?\d+)?\)$/);
        if (rgbaMatch) {
            r = parseInt(rgbaMatch[1]);
            g = parseInt(rgbaMatch[2]);
            b = parseInt(rgbaMatch[3]);
        } else throw new Error('Invalid color format');
    }
    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
};
export { colorMap, colorToCSSVariable, foregroundColorList, getHexColorFromCSSVariable, hexColorToHSL, hexColorToHSLValue, hslToHex, setColorWithOpacity };