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