@elacity-js/uikit/dist/themes/index.d.ts

React / Material UI Design kit for Elacity project

import { CSSProperties } from 'react';
import type { FC, PropsWithChildren } from 'react';
import { ThemeOptions, Theme, PaletteColor } from '@mui/material/styles';
import type { ThemeValue, IUserPreferences } from '../types';
interface GlassyProperties {
    backgroundColor?: string;
    backdropFilter?: string;
    WebkitBackdropFilter?: string;
}
declare type GradientColorOption = string | [string, number];
declare module '@mui/material/Button' {
    interface ButtonPropsVariantOverrides {
        shape?: 'normal' | 'rounded' | 'square';
    }
}
declare module '@mui/material/styles' {
    interface LayoutSettings {
        appBarMobile?: number;
        appBarDesktop?: number;
        drawerWidth?: number;
        drawerWidthMin?: number;
        cardMobileXsWidth?: number;
    }
    interface ThemeOptions {
        layoutSettings?: LayoutSettings;
    }
    interface Palette {
        vivid: PaletteColor;
        vivid2: PaletteColor;
        badge1: PaletteColor;
    }
    interface PaletteOptions {
        vivid?: PaletteOptions['primary'];
        vivid2?: PaletteOptions['secondary'];
        badge1?: PaletteOptions['primary'];
    }
    interface TypeBackground {
        sidebar?: string;
    }
    interface Theme {
        glassy?: (background: string, value: number, blur: number) => GlassyProperties;
        gardientBackground?: (tilt: number, ...colors: GradientColorOption[]) => CSSProperties;
        gardientText?: (tilt: number, ...colors: GradientColorOption[]) => CSSProperties;
        radialRadientBackground?: (...colors: GradientColorOption[]) => CSSProperties;
        layoutSettings?: LayoutSettings;
    }
}
declare const themes: Record<ThemeValue, ThemeOptions>;
/**
 * Create a mui theme based on config and customization
 *
 * config: IUserPreferences {theme: 'light' | 'dark', direction: 'ltr' | 'rtl'}
 * customization: Record<'light' | 'dark', ThemeOptions>
 *
 * @showcase https://codesandbox.io/s/stoic-moon-y51cyz
 *
 * @param {*} config
 * @param {*} customization
 */
export declare const createThemeWith: (config?: IUserPreferences, customization?: Partial<typeof themes>) => Theme;
interface ThemeProviderProps {
    customization?: Partial<typeof themes>;
}
export declare const ThemeProvider: FC<PropsWithChildren<ThemeProviderProps>>;
export default createThemeWith;