declare const componentColorVars: {
    button: {
        solidPrimary: {
            background: `var(--${string})`;
            backgroundHover: `var(--${string})`;
            text: `var(--${string})`;
            icon: `var(--${string})`;
        };
        solidSecondary: {
            background: `var(--${string})`;
            backgroundHover: `var(--${string})`;
            text: `var(--${string})`;
            icon: `var(--${string})`;
        };
        solidTertiary: {
            background: `var(--${string})`;
            backgroundHover: `var(--${string})`;
            text: `var(--${string})`;
            icon: `var(--${string})`;
        };
        solidError: {
            background: `var(--${string})`;
            backgroundHover: `var(--${string})`;
            text: `var(--${string})`;
            icon: `var(--${string})`;
        };
        outlinePrimary: {
            background: `var(--${string})`;
            backgroundHover: `var(--${string})`;
            text: `var(--${string})`;
            icon: `var(--${string})`;
            border: `var(--${string})`;
        };
        outlineSecondary: {
            background: `var(--${string})`;
            backgroundHover: `var(--${string})`;
            text: `var(--${string})`;
            icon: `var(--${string})`;
            border: `var(--${string})`;
        };
    };
    switch: {
        checkedBrand: {
            background: `var(--${string})`;
            backgroundHover: `var(--${string})`;
        };
        checkedGreen: {
            background: `var(--${string})`;
            backgroundHover: `var(--${string})`;
        };
        unchecked: {
            background: `var(--${string})`;
            backgroundHover: `var(--${string})`;
        };
    };
    card: {
        shadow: `var(--${string})`;
    };
    bottomSheet: {
        grabber: {
            background: `var(--${string})`;
        };
    };
    spinner: {
        indicator: {
            color: `var(--${string})`;
        };
    };
    checkbox: {
        checked: {
            background: `var(--${string})`;
            backgroundHover: `var(--${string})`;
            border: `var(--${string})`;
        };
        unchecked: {
            background: `var(--${string})`;
            backgroundHover: `var(--${string})`;
            border: `var(--${string})`;
        };
    };
    radioGroup: {
        checked: {
            background: `var(--${string})`;
            backgroundHover: `var(--${string})`;
            accent: `var(--${string})`;
            accentHover: `var(--${string})`;
        };
        unchecked: {
            background: `var(--${string})`;
            backgroundHover: `var(--${string})`;
            accent: `var(--${string})`;
            accentHover: `var(--${string})`;
        };
    };
    skeleton: {
        background: `var(--${string})`;
        shimmer: `var(--${string})`;
    };
    accordion: {
        arrow: {
            color: `var(--${string})`;
        };
    };
    calendar: {
        header: {
            navButton: {
                background: `var(--${string})`;
                backgroundHover: `var(--${string})`;
                border: `var(--${string})`;
            };
        };
        dateCell: {
            default: {
                background: `var(--${string})`;
                backgroundHover: `var(--${string})`;
                text: `var(--${string})`;
            };
            selected: {
                background: `var(--${string})`;
                backgroundHover: `var(--${string})`;
                text: `var(--${string})`;
            };
            rangeMiddle: {
                background: `var(--${string})`;
                backgroundHover: `var(--${string})`;
                text: `var(--${string})`;
            };
            today: {
                border: `var(--${string})`;
            };
        };
    };
};

export { componentColorVars };