@pearson-ux/alert/tokenHelper.js

Alert web component

export async function loadAndApplyTokens(theme, shadowRoot, darkModeMediaQuery, customTokensGetter, callback) {
    const basePath = './@pearson-ux/master-tokens/dist';
    const tokenPath = `${basePath}/${theme}/js-es6/tokens.js`;

    try {
        const module = await import(tokenPath);

        if (module) {
            const isDarkMode = darkModeMediaQuery.matches;
            const tokens = customTokensGetter(module, isDarkMode);

            if (tokens) {
                const styles = `
                    :host {
                        --primary-color: ${tokens.colorPrimary};
                        --secondary-color: ${tokens.colorSecondary};
                        --background-color: ${tokens.colorBackground};
                        --text-color: ${tokens.colorText};
                        --focus-border-color: ${tokens.colorFocusBorder};
                        --svg-fill-color: ${tokens.colorSvgFill};
                        --spacing-small: ${tokens.spacingSmall};
                        --spacing-medium: ${tokens.spacingMedium};
                        --spacing-large: ${tokens.spacingLarge};
                        --font-family-open-sans: ${tokens.fontFamilyOpenSans};
                        --font-weight-normal: ${tokens.fontWeightNormal};
                        --line-height-small: ${tokens.lineHeightSmall};
                        --line-height-medium: ${tokens.lineHeightMedium};
                        --line-height-large: ${tokens.lineHeightLarge};
                        --alert-font-size: ${tokens.alertFontSize};
                        --alert-font-weight: ${tokens.alertFontWeight};
                        --alert-line-height: ${tokens.alertLineHeight};
                    }
                    .alert-box {
                        margin-bottom: var(--spacing-medium);
                        overflow: hidden;
                        background-color: var(--background-color);
                        padding: var(--spacing-medium);
                        display: flex;
                        align-items: center;
                        gap: var(--spacing-small);
                        transition: border-color 0.3s ease, box-shadow 0.3s ease;
                        font-family: var(--font-family-open-sans);
                        font-size: var(--alert-font-size);
                        font-weight: var(--alert-font-weight);
                        line-height: var(--alert-line-height);
                        color: var(--text-color);
                    }
                    .alert-box:focus-within {
                        border-color: var(--focus-border-color);
                    }
                    .alert-icon {
                        fill: var(--svg-fill-color);
                        flex-shrink: 0;
                        width:16px;
                        height:16px;
                        display:flex;
                        align-items:center;
                        justify-content:center;
                    }
                    .alert-message {
                        flex-grow: 1;
                    }
                    .alert-close-button {
                        background-color: var(--background-color);
                        border: none;
                        cursor: pointer;
                        fill: var(--svg-fill-color);
                        padding: var(--spacing-small);
                        width:32px;
                        height:32px;
                        border-radius:32px;
                        display:flex;
                        align-items:center;
                        justify-content:center;
                    }
                `;

                const styleSheet = new CSSStyleSheet();
                styleSheet.replaceSync(styles);
                shadowRoot.adoptedStyleSheets = [styleSheet];

                // Execute callback to handle additional logic if needed
                if (callback) {
                    callback();
                }
            } else {
                console.error('Error: Tokens are undefined or invalid.');
            }
        } else {
            console.error('Error: Token module is undefined or null.');
        }
    } catch (error) {
        console.error('Error loading token module:', error);
    }
}