import { darken, getContrast, lighten, transparentize } from 'polished';
import { calculateBackgroundAndContrastColor, calculateForegroundColor, isSolidColor, readableHue } from '../../styles';
export const navContrastColors = (theme) => {
    const { base: { palette: { interactive, urgent } }, components: { 'app-shell': { nav: { background: navBg, 'foreground-color': navFgColor } } } } = theme;
    const computedFgColor = calculateForegroundColor(navBg, navFgColor);
    const isGradientBackground = !isSolidColor(navBg);
    const { backgroundColor, contrastColor } = calculateBackgroundAndContrastColor(navBg, navFgColor);
    let nestedListBg = darken(0.075, backgroundColor);
    if (getContrast(backgroundColor, nestedListBg) === 1) {
        nestedListBg = lighten(0.2, nestedListBg);
    }
    if (isGradientBackground) {
        nestedListBg = transparentize(0.9, computedFgColor);
    }
    let nestedListHeader = nestedListBg;
    if (isGradientBackground) {
        nestedListHeader = lighten(0.9, computedFgColor);
        if (getContrast(computedFgColor, nestedListHeader) === 1) {
            nestedListHeader = darken(0.9, computedFgColor);
        }
    }
    const borderColor = transparentize(0.8, computedFgColor);
    const interactiveColor = readableHue(interactive, backgroundColor);
    const urgentColor = readableHue(urgent, backgroundColor);
    return {
        hoverBg: contrastColor,
        foreground: computedFgColor,
        border: borderColor,
        interactive: interactiveColor,
        urgent: urgentColor,
        nestedList: nestedListBg,
        backgroundColor,
        nestedListHeader
    };
};
export const getHeaderTheme = ({ base: { palette: { interactive } }, components: { 'app-shell': { header: { background: headerBg, 'foreground-color': headerFg } } } }) => {
    const foregroundColor = calculateForegroundColor(headerBg, headerFg);
    const { backgroundColor } = calculateBackgroundAndContrastColor(headerBg, headerFg);
    const computedBgColor = !isSolidColor(headerBg) ? backgroundColor : headerBg;
    const hoverBorderColor = transparentize(0.3, foregroundColor);
    const borderLineColor = transparentize(0.8, foregroundColor);
    const interactiveColor = readableHue(interactive, computedBgColor);
    const formControlBorderColor = transparentize(0.5, foregroundColor);
    return {
        base: {
            palette: {
                'primary-background': computedBgColor,
                'foreground-color': foregroundColor,
                'border-line': borderLineColor,
                interactive: interactiveColor
            }
        },
        components: {
            'form-control': {
                'border-color': formControlBorderColor,
                ':hover': {
                    'border-color': hoverBorderColor
                },
                'background-color': computedBgColor
            },
            input: {
                'border-color': formControlBorderColor
            },
            'radio-check': {
                ':checked': {
                    'background-color': interactiveColor
                }
            },
            card: {
                background: computedBgColor
            }
        }
    };
};
export const pxToRem = (n) => `${n * 0.0625}rem`;
//# sourceMappingURL=style-utils.js.map