@elsikora/x-captcha-react/dist/cjs/presentation/utility/generate-theme-variables.utility.js

React components for X-Captcha service

'use strict';

var getHoverBackgroundColor_utility = require('./get-hover-background-color.utility.js');

/**
 * Map of prop names to CSS variable names
 */
const THEME_CSS_VARIABLE_MAP = {
    backgroundColor: "--x-captcha-background",
    brandNameColor: "--x-captcha-text-light",
    buttonColor: "--x-captcha-submit-btn-bg",
    checkmarkColor: "--x-captcha-checkmark",
    errorTextColor: "--x-captcha-error",
    themeColor: "--x-captcha-primary",
    tryAgainButtonBackgroundColor: "--x-captcha-btn-bg",
    tryAgainButtonTextColor: "--x-captcha-btn-text",
};
/**
 * Generates CSS variables based on theme options
 * @param {ICaptchaThemeProperties} properties - The theme properties
 * @returns {CSSProperties} The generated CSS variables
 */
const GenerateThemeVariables = (properties) => {
    const cssVariables = {};
    for (const [key, value] of Object.entries(properties)) {
        if (value && key in THEME_CSS_VARIABLE_MAP) {
            const cssVariableName = THEME_CSS_VARIABLE_MAP[key];
            // @ts-ignore
            // eslint-disable-next-line @elsikora/typescript/no-unsafe-assignment
            cssVariables[cssVariableName] = value;
            // eslint-disable-next-line @elsikora/sonar/no-gratuitous-expressions
            if (key === "tryAgainButtonBackgroundColor" && value) {
                // @ts-ignore
                // eslint-disable-next-line @elsikora/typescript/no-unsafe-argument
                cssVariables["--x-captcha-btn-hover-bg"] = getHoverBackgroundColor_utility.GetHoverBackgroundColor(value);
            }
            // eslint-disable-next-line @elsikora/sonar/no-gratuitous-expressions
            if (key === "buttonColor" && value) {
                // @ts-ignore
                // eslint-disable-next-line @elsikora/typescript/no-unsafe-assignment
                cssVariables["--x-captcha-submit-btn-bg"] = value;
                // eslint-disable-next-line @elsikora/typescript/no-unsafe-call,@elsikora/typescript/no-unsafe-member-access
                if (value.startsWith("#") && value.length === 7) {
                    // @ts-ignore
                    cssVariables["--x-captcha-submit-btn-outline"] = `${String(value)}40`; // 25% opacity
                }
            }
            // eslint-disable-next-line @elsikora/sonar/no-gratuitous-expressions
            if (key === "themeColor" && value) {
                // @ts-ignore
                cssVariables["--x-captcha-spinner-border"] = `${String(value)} transparent ${String(value)} ${String(value)}`;
                if (!properties.buttonColor) {
                    // @ts-ignore
                    // eslint-disable-next-line @elsikora/typescript/no-unsafe-assignment
                    cssVariables["--x-captcha-submit-btn-bg"] = value;
                    // eslint-disable-next-line @elsikora/typescript/no-unsafe-call,@elsikora/typescript/no-unsafe-member-access
                    if (value.startsWith("#") && value.length === 7) {
                        // @ts-ignore
                        cssVariables["--x-captcha-submit-btn-outline"] = `${String(value)}40`; // 25% opacity
                    }
                }
            }
        }
    }
    return cssVariables;
};

exports.GenerateThemeVariables = GenerateThemeVariables;
//# sourceMappingURL=generate-theme-variables.utility.js.map