Important: This documentation is about an older version. It's relevant only to the release noted, many of the features and functions have been updated or replaced. Please view the current version.

Documentationbreadcrumb arrow Grafana documentationbreadcrumb arrow API Referencebreadcrumb arrow @grafana/databreadcrumb arrow GrafanaThemeCommons
Enterprise Open source

GrafanaThemeCommons interface

Signature

typescript 
export interface GrafanaThemeCommons

Import

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

Properties

PropertyTypeDescription
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;
}
namestring
panelHeaderHeightnumber
panelPaddingnumber
spacing{
base: number;
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;
portal: number;
typeahead: number;
}

border property

Signature

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

breakpoints property

Signature

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

height property

Signature

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

name property

Signature

typescript 
name: string;

panelHeaderHeight property

Signature

typescript 
panelHeaderHeight: number;

panelPadding property

Signature

typescript 
panelPadding: number;

spacing property

Signature

typescript 
spacing: {
        base: number;
        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

typescript 
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

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