@useloops/design-system/dist/systems/WebCore/ButtonBase/Button.variant-helpers.d.ts

The official React based Loops design system

import { Theme, CSSObject } from '@mui/material';
import { GenericSizeMap } from '../../BrandCore/primitiveVariables.js';

declare const subtle: (theme: Theme, destructive?: boolean) => {
    backgroundColor: string;
    color: string;
    fontWeight: number;
    '&:focus:before': {
        boxShadow: string;
    };
    '&:focus-visible': {
        boxShadow: string;
    };
};
declare const outlined: (theme: Theme, destructive?: boolean) => {
    backgroundColor: string;
    color: string;
    border: string;
    '&:focus:before': {
        boxShadow: string;
    };
    '&:hover': {
        backgroundColor: string;
    };
    '&:focus-visible': {
        boxShadow: string;
    };
    '&:active': {
        backgroundColor: string;
    };
    '&:disabled': {
        border: string;
    };
};
declare const secondary: (theme: Theme, destructive?: boolean) => {
    backgroundColor: string;
    color: string;
    '&:focus:before': {
        boxShadow: string;
    };
    '&:hover': {
        backgroundColor: string;
    };
    '&:focus-visible': {
        boxShadow: string;
    };
    '&:active': {
        backgroundColor: string;
    };
};
declare const primary: (theme: Theme, destructive?: boolean) => {
    backgroundColor: string;
    color: string;
    '&:focus:before': {
        boxShadow: string;
    };
    '&:hover': {
        backgroundColor: string;
        color: string;
        '&::before': {
            backgroundColor: string;
        };
    };
    '&:focus-visible': {
        boxShadow: string;
        '&::before': {
            backgroundColor: string;
        };
    };
    '&:active': {
        backgroundColor: string;
        color: string;
        '&::before': {
            backgroundColor: string;
        };
    };
};
declare const buttonInteraction: (theme: Theme, active?: boolean) => {
    backgroundColor: string;
    color: string;
    fontWeight: number;
    '&:focus:before': {
        boxShadow: string;
    };
    '&:focus-visible': {
        boxShadow: string;
    };
    '&:hover': {
        backgroundColor: string;
    };
    '&:focus': {
        backgroundColor: string;
    };
    '&:active': {
        backgroundColor: string;
    };
    cursor: string;
    '&:disabled': {
        backgroundColor: string;
        color: string;
    };
};
type ButtonSizing = Exclude<GenericSizeMap, 'none'>;
declare const buttonHeightMap: {
    xs: number;
    sm: number;
    md: number;
    lg: number;
    xl: number;
    xxl: number;
    xxxl: number;
};
declare const getIconSizing: (sizing: ButtonSizing) => CSSObject;
declare const getButtonTypography: (sizing: ButtonSizing) => CSSObject;
declare const getButtonSizing: (sizing: ButtonSizing) => CSSObject;

export { buttonHeightMap, buttonInteraction, getButtonSizing, getButtonTypography, getIconSizing, outlined, primary, secondary, subtle };
export type { ButtonSizing };