@platform/css/lib/color/color.mjs

Helpers for working with inline CSS.

import * as tinycolor from 'tinycolor2';
export const RED = `rgba(255, 0, 0, 0.1)`;
export function create(value) {
    return tinycolor(value);
}
export const black = () => create('black');
export const white = () => create('white');
export function mix(color1, color2, amount) {
    return tinycolor.mix(color1, color2, amount);
}
export function format(value) {
    if (value === undefined) {
        return undefined;
    }
    if (value === true) {
        return RED;
    }
    if (typeof value === 'number') {
        return toGrayAlpha(value);
    }
    if (typeof value === 'string' && !value.includes('#') && !value.includes('rgb')) {
        return `#${value}`;
    }
    return value;
}
export function toGrayAlpha(value) {
    if (value < -1) {
        value = -1;
    }
    if (value > 1) {
        value = 1;
    }
    if (value < 0) {
        return `rgba(0, 0, 0, ${Math.abs(value)})`;
    }
    if (value > 0) {
        return `rgba(255, 255, 255, ${value})`;
    }
    return `rgba(0, 0, 0, 0.0)`;
}
export function toGrayHex(value) {
    if (value < -1) {
        value = -1;
    }
    if (value > 1) {
        value = 1;
    }
    if (value < 0) {
        return white()
            .darken(Math.abs(value) * 100)
            .toHexString();
    }
    if (value > 0) {
        return black()
            .lighten(value * 100)
            .toHexString();
    }
    return white().toHexString();
}
export function alpha(color, alpha) {
    return create(color)
        .setAlpha(alpha)
        .toRgbString();
}
export function lighten(color, amount) {
    return create(color)
        .lighten(amount)
        .toRgbString();
}
export function darken(color, amount) {
    return create(color)
        .darken(amount)
        .toRgbString();
}