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. };