@cap3/capitano-theme/lib/index.d.ts

Extensible and flexible theme system

import { CreateStyled } from "react-emotion";
export declare const spacingFactor: {
    spx1: number;
    spx4: number;
    spx8: number;
    spx12: number;
    spx16: number;
    spx20: number;
    spx24: number;
    spx28: number;
    spx32: number;
    spx36: number;
    spx40: number;
    spx44: number;
    spx48: number;
    spx52: number;
    spx56: number;
    spx60: number;
    spx65: number;
    spx68: number;
    spx80: number;
    spx120: number;
};
export declare const spacingAbsolute: {
    spx1: number;
    spx2: number;
    spx4: number;
    spx8: number;
    spx12: number;
    spx16: number;
    spx20: number;
    spx24: number;
    spx28: number;
    spx32: number;
    spx36: number;
    spx40: number;
    spx44: number;
    spx48: number;
    spx52: number;
    spx56: number;
    spx60: number;
    spx65: number;
    spx68: number;
    spx80: number;
    spx120: number;
};
export declare type MaterialSwatch = {
    "50": string;
    "100": string;
    "200": string;
    "300": string;
    "400": string;
    "500": string;
    "600": string;
    "700": string;
    "800": string;
    "900": string;
    A100: string;
    A200: string;
    A400: string;
    A700: string;
};
export declare type MonochromeSwatch = {
    M0: string;
    M10: string;
    M20: string;
    M30: string;
    M40: string;
    M50: string;
    M60: string;
    M70: string;
    M80: string;
    M90: string;
    base: string;
};
export declare type ThemeColorName = keyof CapitanoTheme["colors"];
export declare type ThemeColor = string | MaterialSwatch | MonochromeSwatch;
export declare const isMaterialSwatch: (val: MonochromeSwatch | MaterialSwatch) => val is MaterialSwatch;
export declare type ColorMix = {
    second: ThemeColorName;
    /**
     * 0 to 100
     */
    factor: number;
};
export declare type ColorFunctionLight = "lighten" | "brighten" | "tint";
export declare type ColorFunctionDark = "darken" | "shade";
export declare type ColorFunction = ColorFunctionLight | ColorFunctionDark | "desaturate" | "saturate";
export declare type ColorEffect = {
    effect: ColorFunction;
    /**
     * 0 to 100
     */
    factor: number;
};
export declare type ColorModification = ColorEffect | ColorMix;
export declare const isColorEffect: (val: ColorModification) => val is ColorEffect;
export declare const isColorMix: (val: ColorModification) => val is ColorMix;
export declare type CapitanoTheme = {
    spacing: {
        baseUnit: number;
        formElementFactor: {
            large: number;
            medium: number;
            small: number;
        };
        borderRadiusFactor: {
            sharp: number;
            small: number;
            medium: number;
        };
    };
    colors: {
        layout: MonochromeSwatch;
        primary: MaterialSwatch;
        secondary: MaterialSwatch;
        success: MaterialSwatch;
        warning: MaterialSwatch;
        danger: MaterialSwatch;
        disabled: MonochromeSwatch;
        textOnBackground: string;
        textOnBackgroundInverse: string;
        textOnPrimary: string;
        textOnSecondary: string;
        textOnSuccess: string;
        textOnDanger: string;
        textOnDisabled: string;
    };
    statusEffects: {
        hover: ColorModification;
        pressed: ColorModification;
        focus: ColorModification;
    };
    typography: {
        fontFamily: {
            base: string;
            monospace: string;
        };
        fontSize: {
            medium: number;
            large: number;
            small: number;
            h1: number;
            h2: number;
            h3: number;
            h4: number;
            h5: number;
            h6: number;
        };
    };
};
export declare type ThemeProp = {
    theme: CapitanoTheme;
};
export declare const styled: CreateStyled<CapitanoTheme>;
export declare type CapitanoThemeProviderComponent = import('emotion-theming/types/index').ThemeProviderComponent<CapitanoTheme>;
export declare const ThemeProvider: CapitanoThemeProviderComponent;
export { defaultLightTheme, defaultDarkTheme } from "./defaultTheme";
//# sourceMappingURL=index.d.ts.map