API Reference@grafana/data › GrafanaThemeCommons

GrafanaThemeCommons interface

Signature

export interface GrafanaThemeCommons 

Import

import { GrafanaThemeCommons } from '@grafana/data';

Properties

Property Type Description
border {
radius: {
sm: string;
md: string;
lg: string;
};
width: {
sm: string;
};
}
breakpoints {
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
xxl: string;
}
height {
sm: number;
md: number;
lg: number;
}
name string
panelHeaderHeight number
panelPadding number
spacing {
insetSquishMd: string;
d: string;
xxs: string;
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
gutter: string;
formSpacingBase: number;
formMargin: string;
formFieldsetMargin: string;
formInputHeight: number;
formButtonHeight: number;
formInputPaddingHorizontal: string;
formInputAffixPaddingHorizontal: string;
formInputMargin: string;
formLabelPadding: string;
formLabelMargin: string;
formValidationMessagePadding: string;
formValidationMessageMargin: string;
inlineFormMargin: string;
}
typography {
fontFamily: {
sansSerif: string;
monospace: string;
};
size: {
base: string;
xs: string;
sm: string;
md: string;
lg: string;
};
weight: {
light: number;
regular: number;
semibold: number;
bold: number;
};
lineHeight: {
xs: number;
sm: number;
md: number;
lg: number;
};
heading: {
h1: string;
h2: string;
h3: string;
h4: string;
h5: string;
h6: string;
};
link: {
decoration: string;
hoverDecoration: string;
};
}
zIndex {
dropdown: number;
navbarFixed: number;
sidemenu: number;
tooltip: number;
modalBackdrop: number;
modal: number;
typeahead: number;
}

border property

Signature

border: {
        radius: {
            sm: string;
            md: string;
            lg: string;
        };
        width: {
            sm: string;
        };
    };

breakpoints property

Signature

breakpoints: {
        xs: string;
        sm: string;
        md: string;
        lg: string;
        xl: string;
        xxl: string;
    };

height property

Signature

height: {
        sm: number;
        md: number;
        lg: number;
    };

name property

Signature

name: string;

panelHeaderHeight property

Signature

panelHeaderHeight: number;

panelPadding property

Signature

panelPadding: number;

spacing property

Signature

spacing: {
        insetSquishMd: string;
        d: string;
        xxs: string;
        xs: string;
        sm: string;
        md: string;
        lg: string;
        xl: string;
        gutter: string;
        formSpacingBase: number;
        formMargin: string;
        formFieldsetMargin: string;
        formInputHeight: number;
        formButtonHeight: number;
        formInputPaddingHorizontal: string;
        formInputAffixPaddingHorizontal: string;
        formInputMargin: string;
        formLabelPadding: string;
        formLabelMargin: string;
        formValidationMessagePadding: string;
        formValidationMessageMargin: string;
        inlineFormMargin: string;
    };

typography property

Signature

typography: {
        fontFamily: {
            sansSerif: string;
            monospace: string;
        };
        size: {
            base: string;
            xs: string;
            sm: string;
            md: string;
            lg: string;
        };
        weight: {
            light: number;
            regular: number;
            semibold: number;
            bold: number;
        };
        lineHeight: {
            xs: number;
            sm: number;
            md: number;
            lg: number;
        };
        heading: {
            h1: string;
            h2: string;
            h3: string;
            h4: string;
            h5: string;
            h6: string;
        };
        link: {
            decoration: string;
            hoverDecoration: string;
        };
    };

zIndex property

Signature

zIndex: {
        dropdown: number;
        navbarFixed: number;
        sidemenu: number;
        tooltip: number;
        modalBackdrop: number;
        modal: number;
        typeahead: number;
    };