@unstoppabledomains/ui-kit/styles/index.d.ts

A set of common Unstoppable Domains components

/// <reference types="react" />
import { type SimplePaletteColorOptions, type Theme } from '@mui/material/styles';
export declare const makeStyles: <Params = void, RuleNameSubsetReferencableInNestedSelectors extends string = never>(params?: {
    name?: string | Record<string, unknown>;
    uniqId?: string;
}) => <RuleName_2 extends string>(cssObjectByRuleNameOrGetCssObjectByRuleName: Record<RuleName_2, import("tss-react").CSSObject> | ((theme: Theme, params: Params, classes: Record<RuleNameSubsetReferencableInNestedSelectors, string>) => Record<RuleNameSubsetReferencableInNestedSelectors | RuleName_2, import("tss-react").CSSObject>)) => (params: Params, muiStyleOverridesParams?: {
    props: Record<string, unknown>;
    ownerState?: Record<string, unknown>;
}) => {
    classes: Record<RuleName_2, string>;
    theme: Theme;
    css: import("tss-react").Css;
    cx: import("tss-react").Cx;
}, useStyles: () => {
    theme: Theme;
    css: import("tss-react").Css;
    cx: import("tss-react").Cx;
}, withStyles: {
    <C extends keyof import("react").ReactHTML | import("tss-react/tools/ReactComponent").ReactComponent<any>, Props extends C extends import("tss-react/tools/ReactComponent").ReactComponent<infer P> ? P : C extends keyof import("react").ReactHTML ? import("react").ReactHTML[C] extends import("tss-react/tools/ReactComponent").ReactComponent<infer P_1> ? NonNullable<P_1> : never : never, CssObjectByRuleName extends Props extends {
        classes?: Partial<infer ClassNameByRuleName>;
    } ? { [RuleName in keyof ClassNameByRuleName]?: import("tss-react").CSSObject; } & {
        [mediaQuery: `@media${string}`]: { [RuleName_1 in keyof ClassNameByRuleName]?: import("tss-react").CSSObject; };
    } : {
        root: import("tss-react").CSSObject;
    } & {
        [mediaQuery: `@media${string}`]: {
            root: import("tss-react").CSSObject;
        };
    }>(Component: C, cssObjectByRuleNameOrGetCssObjectByRuleName: (CssObjectByRuleName & {
        [mediaQuery: `@media${string}`]: { [Key in keyof CssObjectByRuleName]?: import("tss-react").CSSObject; };
    }) | ((theme: Theme, props: Props, classes: Record<Exclude<keyof CssObjectByRuleName, `@media${string}`>, string>) => CssObjectByRuleName), params?: {
        name?: string | Record<string, unknown>;
        uniqId?: string;
    }): C extends keyof import("react").ReactHTML ? import("react").ReactHTML[C] : C;
    getClasses: <Classes>(props: {
        className?: string;
        classes?: Classes;
    }) => Classes extends Record<string, unknown> ? Classes extends Partial<Record<infer K extends string | number | symbol, any>> ? Record<K, string> : Classes : {
        root: string;
    };
};
export declare const MAX_ARTICLE_CONTENT_WIDTH = 760;
export declare const MAX_PAGE_CONTENT_WIDTH = 1020;
type PrimaryShades = {
    100: string;
    200: string;
    300: string;
    400: string;
    500: string;
    600: string;
    700: string;
    800: string;
    900: string;
};
type BlueGreyShades = {
    25: string;
    50: string;
    75: string;
    100: string;
    200: string;
    400: string;
    500: string;
    600: string;
};
type GreyShades = {
    25: string;
    50: string;
    75: string;
    100: string;
    200: string;
    300: string;
    400: string;
    500: string;
    600: string;
    700: string;
    900: string;
};
type SuccessShades = {
    100: string;
    200: string;
    300: string;
    400: string;
    500: string;
    600: string;
    700: string;
    900: string;
};
type WarningShades = {
    100: string;
    200: string;
    300: string;
    600: string;
    700: string;
    900: string;
};
type DangerShades = {
    50: string;
    75: string;
    100: string;
    200: string;
    300: string;
    500: string;
    600: string;
    700: string;
    900: string;
};
type NeutralShades = {
    50: string;
    75: string;
    100: string;
    150: string;
    200: string;
    300: string;
    400: string;
    500: string;
    600: string;
    700: string;
    800: string;
};
type BackgroundWithAlpha = (alpha: number) => React.CSSProperties['backgroundColor'];
type BackgroundsWithAlpha = {
    default: BackgroundWithAlpha;
};
interface ThemeExtends {
    containers: {
        main: {
            marginLeft: React.CSSProperties['margin'];
            marginRight: React.CSSProperties['margin'];
            paddingLeft: React.CSSProperties['padding'];
            paddingRight: React.CSSProperties['padding'];
            width: React.CSSProperties['width'];
            maxWidth: React.CSSProperties['width'];
            backgroundColor: React.CSSProperties['backgroundColor'];
        };
        box: {
            marginTop: React.CSSProperties['margin'];
            marginBottom: React.CSSProperties['margin'];
            paddingTop: React.CSSProperties['padding'];
            paddingLeft: React.CSSProperties['padding'];
            paddingRight: React.CSSProperties['padding'];
            borderRadius: React.CSSProperties['borderRadius'];
        };
        navigationBox: {
            backgroundColor: React.CSSProperties['backgroundColor'];
            border: React.CSSProperties['border'];
            borderRadius: React.CSSProperties['borderRadius'];
        };
        card: {
            backgroundColor: React.CSSProperties['backgroundColor'];
            borderRadius: React.CSSProperties['borderRadius'];
            padding: React.CSSProperties['padding'];
            boxShadow: React.CSSProperties['boxShadow'];
            boxSizing: React.CSSProperties['boxSizing'];
        };
        panel: {
            backgroundColor: React.CSSProperties['backgroundColor'];
            borderRadius: React.CSSProperties['borderRadius'];
            padding: React.CSSProperties['padding'];
            boxShadow: React.CSSProperties['boxShadow'];
            boxSizing: React.CSSProperties['boxSizing'];
        };
        modalContent: {
            minWidth: React.CSSProperties['width'];
            width: React.CSSProperties['width'];
        };
    };
    MuiDataGrid: {
        root: {
            fontSize: React.CSSProperties['fontSize'];
        };
        colCellTitle: {
            fontWeight: React.CSSProperties['fontWeight'];
        };
    };
}
declare module '@mui/material/styles' {
    interface Theme extends ThemeExtends {
    }
    interface ThemeOptions extends ThemeExtends {
    }
}
interface PaletteExtends {
    link: SimplePaletteColorOptions;
    iceBlue: SimplePaletteColorOptions;
    yellow: SimplePaletteColorOptions;
    cloudyBlue: SimplePaletteColorOptions;
    purple: SimplePaletteColorOptions;
    nightBlue: SimplePaletteColorOptions;
    white: string;
    hero: React.CSSProperties['background'];
    heroText: React.CSSProperties['background'];
    profileImageGradient: React.CSSProperties['background'];
    mobileNavGradient: React.CSSProperties['background'];
    pressedPaper: React.CSSProperties['backgroundColor'];
    primaryShades: PrimaryShades;
    blueGreyShades: BlueGreyShades;
    greyShades: GreyShades;
    successShades: SuccessShades;
    warningShades: WarningShades;
    dangerShades: DangerShades;
    neutralShades: NeutralShades;
    mode: 'light' | 'dark';
    backgroundWithAlpha: BackgroundsWithAlpha;
}
declare module '@mui/material/styles/createPalette' {
    interface Palette extends PaletteExtends {
    }
    interface PaletteOptions extends PaletteExtends {
    }
}
export declare const darkTheme: Theme;
export declare const lightTheme: Theme;
export default lightTheme;