GrafanaThemeCommons interface

Signature

  1. export interface GrafanaThemeCommons

Import

  1. 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;
typeahead: number;
}

border property

Signature

  1. border: {
  2.         radius: {
  3.             sm: string;
  4.             md: string;
  5.             lg: string;
  6.         };
  7.         width: {
  8.             sm: string;
  9.         };
  10.     };

breakpoints property

Signature

  1. breakpoints: {
  2.         xs: string;
  3.         sm: string;
  4.         md: string;
  5.         lg: string;
  6.         xl: string;
  7.         xxl: string;
  8.     };

height property

Signature

  1. height: {
  2.         sm: number;
  3.         md: number;
  4.         lg: number;
  5.     };

name property

Signature

  1. name: string;

panelHeaderHeight property

Signature

  1. panelHeaderHeight: number;

panelPadding property

Signature

  1. panelPadding: number;

spacing property

Signature

  1. spacing: {
  2.         base: number;
  3.         insetSquishMd: string;
  4.         d: string;
  5.         xxs: string;
  6.         xs: string;
  7.         sm: string;
  8.         md: string;
  9.         lg: string;
  10.         xl: string;
  11.         gutter: string;
  12.         formSpacingBase: number;
  13.         formMargin: string;
  14.         formFieldsetMargin: string;
  15.         formInputHeight: number;
  16.         formButtonHeight: number;
  17.         formInputPaddingHorizontal: string;
  18.         formInputAffixPaddingHorizontal: string;
  19.         formInputMargin: string;
  20.         formLabelPadding: string;
  21.         formLabelMargin: string;
  22.         formValidationMessagePadding: string;
  23.         formValidationMessageMargin: string;
  24.         inlineFormMargin: string;
  25.     };

typography property

Signature

  1. typography: {
  2.         fontFamily: {
  3.             sansSerif: string;
  4.             monospace: string;
  5.         };
  6.         size: {
  7.             base: string;
  8.             xs: string;
  9.             sm: string;
  10.             md: string;
  11.             lg: string;
  12.         };
  13.         weight: {
  14.             light: number;
  15.             regular: number;
  16.             semibold: number;
  17.             bold: number;
  18.         };
  19.         lineHeight: {
  20.             xs: number;
  21.             sm: number;
  22.             md: number;
  23.             lg: number;
  24.         };
  25.         heading: {
  26.             h1: string;
  27.             h2: string;
  28.             h3: string;
  29.             h4: string;
  30.             h5: string;
  31.             h6: string;
  32.         };
  33.         link: {
  34.             decoration: string;
  35.             hoverDecoration: string;
  36.         };
  37.     };

zIndex property

Signature

  1. zIndex: {
  2.         dropdown: number;
  3.         navbarFixed: number;
  4.         sidemenu: number;
  5.         tooltip: number;
  6.         modalBackdrop: number;
  7.         modal: number;
  8.         typeahead: number;
  9.     };