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; 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;
typeahead: number;
};
Related Grafana video resources
Getting started with Grafana
Take a guided tour of Grafana and learn how to monitor a web service using Prometheus and Loki in this beginner-friendly webinar.
All about Grafana plugins: Visualizing disparate data sources in one place
Grafana Enterprise plugins are integrations with other commercial monitoring tools (such as Datadog, Splunk, New Relic, ServiceNow, Oracle, and Dynatrace) that are created, maintained, and supported by the Grafana Labs team.
Demo: 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.