smart-react-components/theme/index.d.ts

React UI library, wide variety of editable ready to use Styled and React components.

import { Coordinator } from "../types";
import { ThemeVariable, Value } from "../props";
import { Grid } from "../types/grid";
export interface Type {
    main: string;
    font?: string;
    dark?: string;
    darker?: string;
    darkest?: string;
    light?: string;
    lighter?: string;
    lightest?: string;
    shadow?: string;
    alert?: {
        background?: string;
        border?: string;
        font?: string;
        fontFill?: string;
        linkFont?: string;
        hr?: string;
    };
    breadcrumb?: {
        background?: string;
        font?: string;
        fontFill?: string;
    };
    button?: {
        background?: string;
        placeholder?: string;
        placeholderFill?: string;
    };
    dropdown?: {
        background?: string;
        font?: string;
    };
    form?: {
        radioColor?: string;
        radioBorder?: string;
        inputBackground?: string;
        inputBorder?: string;
        inputFont?: string;
        inputPlaceholder?: string;
        inputPlaceholderFill?: string;
    };
    pagination?: {
        background?: string;
        border?: string;
        font?: string;
    };
    popover?: {
        background?: string;
        border?: string;
        headerBackground?: string;
        headerBorder?: string;
    };
    progressBar?: {
        background?: string;
        backgroundFill?: string;
        backgroundAlt?: string;
    };
    table?: {
        background?: string;
        border?: string;
        font?: string;
        stripedBackground?: string;
        stripedFont?: string;
        hoverBackground?: string;
        hoverFont?: string;
    };
    waveEffect?: {
        color?: string;
    };
}
export interface TypeOptions {
    util?: boolean;
    alert?: boolean;
    breadcrumb?: boolean;
    button?: boolean;
    dropdown?: boolean;
    form?: boolean;
    pagination?: boolean;
    popover?: boolean;
    progressBar?: boolean;
    table?: boolean;
    waveEffect?: boolean;
}
export interface Theme {
    type: {
        [key: string]: Type;
    };
    isMobile: boolean;
    zIndex: ThemeVariable<number>;
    length: ThemeVariable<Value>;
    radius: ThemeVariable<Value>;
    color: ThemeVariable<string>;
    fontFamily: ThemeVariable<string>;
    fontWeight: ThemeVariable<Value>;
    fontSize: ThemeVariable<Value>;
    iconSize: ThemeVariable<Value>;
    alert: {
        padding: ThemeVariable<Coordinator<string> & {
            xHalf: string;
        }>;
        radius: string;
        fontSize: ThemeVariable<string>;
        linkFontWeight: string;
    };
    badge: {
        fixedSize: ThemeVariable<string>;
        padding: ThemeVariable<Coordinator<string>>;
        margin: Coordinator<string>;
        radius: ThemeVariable<string>;
        fontSize: ThemeVariable<string>;
    };
    breadcrumb: {
        padding: Coordinator<string>;
        radius: ThemeVariable<string>;
        fontSize: string;
        disabledOpacity: number;
        transition: string;
    };
    button: {
        fixedSize: ThemeVariable<string>;
        padding: ThemeVariable<Coordinator<string> & {
            xHalf: string;
        }>;
        radius: ThemeVariable<string>;
        fontSize: ThemeVariable<string>;
        disabledOpacity: number;
        transition: string;
    };
    colorPicker: {
        colorLight: string;
        colorDark: string;
        pickerBoxShadow: string;
        draggerBoxShadow: string;
        paletteIconColor: string;
        paletteBorderColor: string;
    };
    datePicker: {
        background: string;
        font: string;
        inactive: string;
        arrowActive: string;
    };
    dropdown: {
        padding: ThemeVariable<string>;
        margin: ThemeVariable<Coordinator<string>>;
        radius: ThemeVariable<string>;
        fontSize: ThemeVariable<string>;
        disabledOpacity: number;
    };
    fixedBox: {
        boxShadow: string;
    };
    form: {
        disabledOpacity: number;
        radioSpanSpace: string;
        radioSpanFontSize: ThemeVariable<string>;
        inputPadding: ThemeVariable<Coordinator<string>>;
        inputRadius: ThemeVariable<string>;
        inputFontSize: ThemeVariable<string>;
        optionPadding: ThemeVariable<string>;
        optionMargin: ThemeVariable<Coordinator<string>>;
        optionFontSize: ThemeVariable<string>;
    };
    grid: {
        breakpoint: Grid;
        containerWidth: Grid;
        columnGap: string;
    };
    loading: {
        size: ThemeVariable<string>;
        animation: string;
    };
    modal: {
        width: ThemeVariable<string>;
        borderColor: string;
        borderRadius: string;
        backgroundColor: string;
        fontColor: string;
        modalContentPadding: Coordinator<string>;
        modalContentBorderColor: string;
        modalFooterPadding: Coordinator<string>;
        modalFooterContentMargin: Coordinator<string>;
    };
    overlay: {
        space: string;
        background: string;
    };
    pagination: {
        padding: Coordinator<string>;
        margin: Coordinator<string>;
        fixedSize: string;
        radius: ThemeVariable<string>;
        fontSize: string;
        disabledOpacity: number;
        transition: string;
    };
    popover: {
        radius: string;
        fontSize: ThemeVariable<string>;
        headerPadding: ThemeVariable<Coordinator<string>>;
        bodyPadding: ThemeVariable<Coordinator<string>>;
    };
    progressBar: {
        radius: ThemeVariable<string>;
        transitionType: string;
        stripedAnimationType: string;
    };
    table: {
        padding: ThemeVariable<string>;
        fontSize: ThemeVariable<string>;
        stripedOrientation: string;
        hoverTransition: string;
    };
    tooltip: {
        padding: ThemeVariable<Coordinator<string>>;
        radius: string;
        fontSize: ThemeVariable<string>;
    };
    waveEffect: {
        transition: string;
    };
}
/**
 * Creates a Type object and returns it.
 * value could be a string or Type object.
 * If value is string, sets value as the main color of the type and defines other colors by default values.
 * If value is a Type object, defines undefined properties by default values.
 * If option is given as an object, createType defines only colors whose properties are true in the option object.
 *
 * @param value
 */
export declare const createType: (value: string | Type, options?: boolean | TypeOptions) => Type;
declare const theme: Theme;
export default theme;