theme-editor-svelte/dist/utils/colors.js

Universal theme editor for svelte

import { findValueType, normalizeName } from "./index.js";
import { BROWSER } from "esm-env";
export const getCurrentVariables = () => {
    if (!BROWSER)
        return [];
    const sheets = [...document.styleSheets];
    return sheets.flatMap((sheet) => {
        try {
            const rules = [...sheet.cssRules];
            return rules.flatMap((rule) => {
                if (rule.selectorText !== ':root')
                    return [];
                const styles = [...rule.style];
                return styles.flatMap((variable) => {
                    if (!variable.startsWith('--'))
                        return [];
                    const base = {
                        variable,
                        name: normalizeName(variable),
                        value: rule.style.getPropertyValue(variable).trim(),
                    };
                    return {
                        ...base,
                        type: findValueType(base.variable, base.value, {}) ?? 'unknown',
                    };
                });
            });
        }
        catch {
            return [];
        }
    });
};
export const hslRegex = /^(?<h>\d+(?:\.\d+)?) (?<s>\d+(?:\.\d+)?)%? (?<l>\d+(?:\.\d+)?)%?/;
export const parseHsl = (hls) => {
    const result = hslRegex.exec(hls)?.groups;
    if (!result)
        return null;
    return [result.h, result.s, result.l].map((e) => parseInt(e));
};
export const hslToString = (h, s, l) => {
    return `${h.toFixed(2)} ${s.toFixed(2)}% ${l.toFixed(2)}%`;
};