Variable config

config: {
    media: {};
    prefix: "";
    theme: {
        colors: {
            activeBg: "#e7e7e7";
            background: "white";
            blue1: "#038bf4";
            blue2: "#b7d6f5";
            blue3: "#dbe6ff";
            blue4: "#33b4ff";
            blue5: "#30a2e6";
            border: "#d5d5d5";
            buttonBorder: "#bababa";
            choiceActiveBg: "#f3f3f3";
            choiceActiveText: "#313131";
            choiceBg: "#ffffff";
            choiceBorder: "#cfcfcf";
            choiceText: "#999999";
            focusColor: "#dcaf00";
            green1: "#3ec234";
            green1Darker: "#38af2f";
            grey1: "#737373";
            headerBg: "#efeff0";
            headerBorder: "#c8c8c9";
            headerText: "#484848";
            icon: "#636363";
            inactiveBg: "#d3d3de";
            inactiveDarkBg: "#999";
            inputDisabledBg: "#f3f3f3";
            inputDisabledText: "#959595";
            mainColor: "#008ad2";
            mainColorAlt: "#006AA9";
            modalBg: "#f7f7f7";
            modalButtonBg: "#f8f8f8";
            modalButtonBorder: "#c2c2c2";
            orange1: "#ff7200";
            orange1Darker: "#cc5b00";
            pink1: "#ff388f";
            pinky1: "#f5c0b7";
            pinky2: "#e07b67";
            pinky3: "#ffe1db";
            popText: "#666";
            purple1: "#7357e8";
            red1: "#ea2700";
            scrollbarsBg: "transparent";
            scrollbarsThumb: "#737373";
            selectorActive: "#008ad2";
            selectorText: "#606060";
            sub: "#959595";
            tableStripedBg: "#fafafa";
            text: "#323232";
            text2: "#181818";
            text3: "#000000";
            toggleBgDisabled: "#f0f0f0";
            toggleHandleBg: "#e0e0e0";
            toggleHandleBgDisabled: "#deae84";
            toggleHandleBorder: "#cdcdcd";
            toggleHandleBorderDisabled: "#c29f7d";
            toolbarBg: "#f8f8f8";
            toolbarBorder: "#ababab";
            toolButtonText: "#666e80";
            yellow1: "#ffde9d";
            yellow2: "#e4a429";
            yellow3: "#fff5db";
        };
    };
    themeMap: DefaultThemeMap;
    utils: {
        mx: (
            value: string | number,
        ) => { marginLeft: string | number; marginRight: string | number };
        my: (
            value: string | number,
        ) => { marginBottom: string | number; marginTop: string | number };
        px: (
            value: string | number,
        ) => { paddingLeft: string | number; paddingRight: string | number };
        py: (
            value: string | number,
        ) => { paddingBottom: string | number; paddingTop: string | number };
        size: (
            value: string | number,
        ) => { height: string | number; width: string | number };
    };
}

Type declaration

  • media: {}
  • prefix: ""
  • theme: {
        colors: {
            activeBg: "#e7e7e7";
            background: "white";
            blue1: "#038bf4";
            blue2: "#b7d6f5";
            blue3: "#dbe6ff";
            blue4: "#33b4ff";
            blue5: "#30a2e6";
            border: "#d5d5d5";
            buttonBorder: "#bababa";
            choiceActiveBg: "#f3f3f3";
            choiceActiveText: "#313131";
            choiceBg: "#ffffff";
            choiceBorder: "#cfcfcf";
            choiceText: "#999999";
            focusColor: "#dcaf00";
            green1: "#3ec234";
            green1Darker: "#38af2f";
            grey1: "#737373";
            headerBg: "#efeff0";
            headerBorder: "#c8c8c9";
            headerText: "#484848";
            icon: "#636363";
            inactiveBg: "#d3d3de";
            inactiveDarkBg: "#999";
            inputDisabledBg: "#f3f3f3";
            inputDisabledText: "#959595";
            mainColor: "#008ad2";
            mainColorAlt: "#006AA9";
            modalBg: "#f7f7f7";
            modalButtonBg: "#f8f8f8";
            modalButtonBorder: "#c2c2c2";
            orange1: "#ff7200";
            orange1Darker: "#cc5b00";
            pink1: "#ff388f";
            pinky1: "#f5c0b7";
            pinky2: "#e07b67";
            pinky3: "#ffe1db";
            popText: "#666";
            purple1: "#7357e8";
            red1: "#ea2700";
            scrollbarsBg: "transparent";
            scrollbarsThumb: "#737373";
            selectorActive: "#008ad2";
            selectorText: "#606060";
            sub: "#959595";
            tableStripedBg: "#fafafa";
            text: "#323232";
            text2: "#181818";
            text3: "#000000";
            toggleBgDisabled: "#f0f0f0";
            toggleHandleBg: "#e0e0e0";
            toggleHandleBgDisabled: "#deae84";
            toggleHandleBorder: "#cdcdcd";
            toggleHandleBorderDisabled: "#c29f7d";
            toolbarBg: "#f8f8f8";
            toolbarBorder: "#ababab";
            toolButtonText: "#666e80";
            yellow1: "#ffde9d";
            yellow2: "#e4a429";
            yellow3: "#fff5db";
        };
    }
  • themeMap: DefaultThemeMap
  • utils: {
        mx: (
            value: string | number,
        ) => { marginLeft: string | number; marginRight: string | number };
        my: (
            value: string | number,
        ) => { marginBottom: string | number; marginTop: string | number };
        px: (
            value: string | number,
        ) => { paddingLeft: string | number; paddingRight: string | number };
        py: (
            value: string | number,
        ) => { paddingBottom: string | number; paddingTop: string | number };
        size: (
            value: string | number,
        ) => { height: string | number; width: string | number };
    }