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 | { 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
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: {
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
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;
portal: number;
typeahead: number;
};
Related Grafana resources
Opening keynote: What's new in Grafana 9?
Raj Dutt, Myrle Krantz, and Torkel Ödegaard unveil what's new in Grafana 9. Watch the opening keynote presentation from GrafanaCONline 2022. On-demand.
Unify your data with Grafana plugins: Splunk, MongoDB, Datadog, and more
Show how Grafana can be used to take data from multiple different sources and unify it, without disrupting the investments that are working today.
Getting started with Grafana Enterprise and observability
Join the Grafana Labs team for a 30-minute demo of how to get started with the Grafana Stack, so you can go from zero to observability in just a few minutes.