{index === 0 && (
diff --git a/public/app/plugins/datasource/elasticsearch/components/MetricPicker.tsx b/public/app/plugins/datasource/elasticsearch/components/MetricPicker.tsx
index b8a175408d7..754a4e41ac7 100644
--- a/public/app/plugins/datasource/elasticsearch/components/MetricPicker.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/MetricPicker.tsx
@@ -6,9 +6,9 @@ import { Segment } from '@grafana/ui';
import { MetricAggregation } from '../types';
import { describeMetric } from '../utils';
-const noWrap = css`
- white-space: nowrap;
-`;
+const noWrap = css({
+ whiteSpace: 'nowrap',
+});
const toOption = (metric: MetricAggregation) => ({
label: describeMetric(metric),
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/FiltersSettingsEditor/index.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/FiltersSettingsEditor/index.tsx
index de91aadb3f7..d3c47262de3 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/FiltersSettingsEditor/index.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/FiltersSettingsEditor/index.tsx
@@ -38,23 +38,23 @@ export const FiltersSettingsEditor = ({ bucketAgg }: Props) => {
return (
<>
{bucketAgg.settings?.filters!.map((filter, index) => (
return (
<>
Variables
{value.pipelineVariables!.map((pipelineVar, index) => (
// index as a key doesn't work here since removing an element
@@ -68,11 +68,11 @@ export const BucketScriptSettingsEditor = ({ value, previousMetrics }: Props) =>
// ensures the UI is in a correct state. We might want to optimize this if we see perf issue in the future.
{
div {
- width: 100%;
- }
- `}
+ className={css({
+ '& > div': {
+ width: '100%',
+ },
+ })}
>
dispatch(changeMetricSetting({ metric, settingName: 'orderBy', newValue: e.value }))}
placeholder="Select Field"
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/styles.ts b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/styles.ts
index 7497dec0d7b..cec4ffd9b1d 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/styles.ts
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/styles.ts
@@ -6,13 +6,10 @@ export const getStyles = (theme: GrafanaTheme2, hidden: boolean) => {
return {
color:
hidden &&
- css`
- &,
- &:hover,
- label,
- a {
- color: ${hidden ? theme.colors.text.disabled : theme.colors.text.primary};
- }
- `,
+ css({
+ '&, &:hover, label, a': {
+ color: hidden ? theme.colors.text.disabled : theme.colors.text.primary,
+ },
+ }),
};
};
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/QueryEditorRow.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/QueryEditorRow.tsx
index 76ba289ae4d..42564245e1b 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/QueryEditorRow.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/QueryEditorRow.tsx
@@ -55,12 +55,12 @@ export const QueryEditorRow = ({
const getStyles = (theme: GrafanaTheme2) => {
return {
- iconWrapper: css`
- display: flex;
- `,
- icon: css`
- color: ${theme.colors.text.secondary};
- margin-left: ${theme.spacing(0.25)};
- `,
+ iconWrapper: css({
+ display: 'flex',
+ }),
+ icon: css({
+ color: theme.colors.text.secondary,
+ marginLeft: theme.spacing(0.25),
+ }),
};
};
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/SettingsEditorContainer.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/SettingsEditorContainer.tsx
index 47994ccd111..d8888ed2614 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/SettingsEditorContainer.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/SettingsEditorContainer.tsx
@@ -8,24 +8,25 @@ import { segmentStyles } from './styles';
const getStyles = (theme: GrafanaTheme2, hidden: boolean) => {
return {
- wrapper: css`
- max-width: 500px;
- display: flex;
- flex-direction: column;
- `,
- settingsWrapper: css`
- padding-top: ${theme.spacing(0.5)};
- `,
- icon: css`
- margin-right: ${theme.spacing(0.5)};
- `,
- button: css`
- justify-content: start;
- ${hidden &&
- css`
- color: ${theme.colors.text.disabled};
- `}
- `,
+ wrapper: css({
+ maxWidth: '500px',
+ display: 'flex',
+ flexDirection: 'column',
+ }),
+ settingsWrapper: css({
+ paddingTop: theme.spacing(0.5),
+ }),
+ icon: css({
+ marginRight: theme.spacing(0.5),
+ }),
+ button: css(
+ {
+ justifyContent: 'start',
+ },
+ hidden && {
+ color: theme.colors.text.disabled,
+ }
+ ),
};
};
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/index.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/index.tsx
index 135734cb4f2..6eebd6e843a 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/index.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/index.tsx
@@ -64,13 +64,13 @@ export const QueryEditor = ({ query, onChange, onRunQuery, datasource, range }:
};
const getStyles = (theme: GrafanaTheme2) => ({
- root: css`
- display: flex;
- `,
- queryItem: css`
- flex-grow: 1;
- margin: 0 ${theme.spacing(0.5)} ${theme.spacing(0.5)} 0;
- `,
+ root: css({
+ display: 'flex',
+ }),
+ queryItem: css({
+ flexGrow: 1,
+ margin: theme.spacing(0, 0.5, 0.5, 0),
+ }),
});
interface Props {
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/styles.ts b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/styles.ts
index aa312a94132..7bd4c6bd4bf 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/styles.ts
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/styles.ts
@@ -1,5 +1,5 @@
import { css } from '@emotion/css';
-export const segmentStyles = css`
- min-width: 150px;
-`;
+export const segmentStyles = css({
+ minWidth: '150px',
+});
diff --git a/public/app/plugins/datasource/elasticsearch/configuration/DataLink.tsx b/public/app/plugins/datasource/elasticsearch/configuration/DataLink.tsx
index f3ddb9f8e87..57a224fb19b 100644
--- a/public/app/plugins/datasource/elasticsearch/configuration/DataLink.tsx
+++ b/public/app/plugins/datasource/elasticsearch/configuration/DataLink.tsx
@@ -154,24 +154,24 @@ function useInternalLink(datasourceUid?: string): [boolean, Dispatch ({
- firstRow: css`
- display: flex;
- `,
- nameField: css`
- flex: 2;
- `,
- regexField: css`
- flex: 3;
- `,
- row: css`
- display: flex;
- align-items: baseline;
- `,
- urlField: css`
- display: flex;
- flex: 1;
- `,
- urlDisplayLabelField: css`
- flex: 1;
- `,
+ firstRow: css({
+ display: 'flex',
+ }),
+ nameField: css({
+ flex: 2,
+ }),
+ regexField: css({
+ flex: 3,
+ }),
+ row: css({
+ display: 'flex',
+ alignItems: 'baseline',
+ }),
+ urlField: css({
+ display: 'flex',
+ flex: 1,
+ }),
+ urlDisplayLabelField: css({
+ flex: 1,
+ }),
});
diff --git a/public/app/plugins/datasource/elasticsearch/configuration/DataLinks.tsx b/public/app/plugins/datasource/elasticsearch/configuration/DataLinks.tsx
index ce1740bc8f6..337c1a96b0b 100644
--- a/public/app/plugins/datasource/elasticsearch/configuration/DataLinks.tsx
+++ b/public/app/plugins/datasource/elasticsearch/configuration/DataLinks.tsx
@@ -10,15 +10,15 @@ import { DataLink } from './DataLink';
const getStyles = (theme: GrafanaTheme2) => {
return {
- addButton: css`
- margin-right: 10px;
- `,
- container: css`
- margin-bottom: ${theme.spacing(2)};
- `,
- dataLink: css`
- margin-bottom: ${theme.spacing(1)};
- `,
+ addButton: css({
+ marginRight: '10px',
+ }),
+ container: css({
+ marginBottom: theme.spacing(2),
+ }),
+ dataLink: css({
+ marginBottom: theme.spacing(1),
+ }),
};
};
diff --git a/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/LabelsEditor.tsx b/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/LabelsEditor.tsx
index e8e99208811..3a45ab56e39 100644
--- a/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/LabelsEditor.tsx
+++ b/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/LabelsEditor.tsx
@@ -2,6 +2,7 @@ import { css } from '@emotion/css';
import { useEffect, useRef } from 'react';
import { useAsync, useLatest } from 'react-use';
+import { GrafanaTheme2 } from '@grafana/data';
import { CodeEditor, Monaco, useStyles2, monacoTypes } from '@grafana/ui';
import { languageDefinition } from '../pyroscopeql';
@@ -138,22 +139,22 @@ function ensurePyroscopeQL(monaco: Monaco) {
}
}
-const getStyles = () => {
+const getStyles = (theme: GrafanaTheme2) => {
return {
- queryField: css`
- label: LabelsEditorQueryField;
- flex: 1;
+ queryField: css({
+ label: 'LabelsEditorQueryField',
+ flex: 1,
// Not exactly sure but without this the editor does not shrink after resizing (so you can make it bigger but not
// smaller). At the same time this does not actually make the editor 100px because it has flex 1 so I assume
// this should sort of act as a flex-basis (but flex-basis does not work for this). So yeah CSS magic.
- width: 100px;
- `,
- wrapper: css`
- label: LabelsEditorWrapper;
- display: flex;
- flex: 1;
- border: 1px solid rgba(36, 41, 46, 0.3);
- border-radius: 2px;
- `,
+ width: '100px',
+ }),
+ wrapper: css({
+ label: 'LabelsEditorWrapper',
+ display: 'flex',
+ flex: 1,
+ border: '1px solid rgba(36, 41, 46, 0.3)',
+ borderRadius: theme.shape.radius.default,
+ }),
};
};
diff --git a/public/app/plugins/datasource/grafana-testdata-datasource/components/SimulationSchemaForm.tsx b/public/app/plugins/datasource/grafana-testdata-datasource/components/SimulationSchemaForm.tsx
index 04f8df747d0..2f3f0fa4092 100644
--- a/public/app/plugins/datasource/grafana-testdata-datasource/components/SimulationSchemaForm.tsx
+++ b/public/app/plugins/datasource/grafana-testdata-datasource/components/SimulationSchemaForm.tsx
@@ -50,9 +50,9 @@ const renderInput = (field: FieldSchema, onChange: SchemaFormProps['onChange'],
const getStyles = (theme: GrafanaTheme2) => {
return {
- jsonView: css`
- margin-bottom: ${theme.spacing(1)};
- `,
+ jsonView: css({
+ marginBottom: theme.spacing(1),
+ }),
};
};
diff --git a/public/app/plugins/datasource/grafana/components/QueryEditor.tsx b/public/app/plugins/datasource/grafana/components/QueryEditor.tsx
index 2c473402942..5b8a5cb734c 100644
--- a/public/app/plugins/datasource/grafana/components/QueryEditor.tsx
+++ b/public/app/plugins/datasource/grafana/components/QueryEditor.tsx
@@ -504,16 +504,16 @@ export const QueryEditor = withTheme2(UnthemedQueryEditor);
function getStyles(theme: GrafanaTheme2) {
return {
- file: css`
- width: 100%;
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: space-between;
- padding: ${theme.spacing(2)};
- border: 1px dashed ${theme.colors.border.medium};
- background-color: ${theme.colors.background.secondary};
- margin-top: ${theme.spacing(1)};
- `,
+ file: css({
+ width: '100%',
+ display: 'flex',
+ flexDirection: 'row',
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ padding: theme.spacing(2),
+ border: `1px dashed ${theme.colors.border.medium}`,
+ backgroundColor: theme.colors.background.secondary,
+ marginTop: theme.spacing(1),
+ }),
};
}
diff --git a/public/app/plugins/datasource/grafana/components/TimePickerInput.tsx b/public/app/plugins/datasource/grafana/components/TimePickerInput.tsx
index dbe88c64dd9..7526c5f0a9a 100644
--- a/public/app/plugins/datasource/grafana/components/TimePickerInput.tsx
+++ b/public/app/plugins/datasource/grafana/components/TimePickerInput.tsx
@@ -5,7 +5,7 @@ import TimePicker from 'rc-time-picker';
import { GrafanaTheme2 } from '@grafana/data';
import { FormInputSize, Icon, useStyles2 } from '@grafana/ui';
import { inputSizes } from '@grafana/ui/src/components/Forms/commonStyles';
-import { focusCss } from '@grafana/ui/src/themes/mixins';
+import { getFocusStyles } from '@grafana/ui/src/themes/mixins';
export interface Props {
onChange: (value: Moment) => void;
@@ -49,9 +49,9 @@ export const TimePickerInput = ({
const getWidth = () => {
if (width) {
- return css`
- width: ${width}px;
- `;
+ return css({
+ width: `${width}px`,
+ });
}
return inputSizes()[size];
@@ -99,90 +99,87 @@ const getStyles = (theme: GrafanaTheme2) => {
const borderColor = theme.components.input.borderColor;
return {
- caretWrapper: css`
- position: absolute;
- right: 8px;
- top: 50%;
- transform: translateY(-50%);
- display: inline-block;
- text-align: right;
- color: ${theme.colors.text.secondary};
- `,
- picker: css`
- .rc-time-picker-panel-select {
- font-size: 14px;
- background-color: ${bgColor};
- border-color: ${borderColor};
- li {
- outline-width: 2px;
- &.rc-time-picker-panel-select-option-selected {
- background-color: inherit;
- border: 1px solid ${theme.v1.palette.orange};
- border-radius: ${borderRadius};
- }
+ caretWrapper: css({
+ position: 'absolute',
+ right: '8px',
+ top: '50%',
+ transform: 'translateY(-50%)',
+ display: 'inline-block',
+ textAlign: 'right',
+ color: theme.colors.text.secondary,
+ }),
+ picker: css({
+ '.rc-time-picker-panel-select': {
+ fontSize: '14px',
+ backgroundColor: bgColor,
+ borderColor: borderColor,
+ li: {
+ outlineWidth: '2px',
+ '&.rc-time-picker-panel-select-option-selected': {
+ backgroundColor: 'inherit',
+ border: `1px solid ${theme.v1.palette.orange}`,
+ borderRadius: borderRadius,
+ },
- &:hover {
- background: ${optionBgHover};
- }
+ '&:hover': {
+ background: optionBgHover,
+ },
- &.rc-time-picker-panel-select-option-disabled {
- color: ${theme.colors.action.disabledText};
- }
- }
- }
+ '&.rc-time-picker-panel-select-option-disabled': {
+ color: theme.colors.action.disabledText,
+ },
+ },
+ },
- .rc-time-picker-panel-inner {
- box-shadow: 0px 4px 4px ${menuShadowColor};
- background-color: ${bgColor};
- border-color: ${borderColor};
- border-radius: ${borderRadius};
- margin-top: 3px;
+ '.rc-time-picker-panel-inner': {
+ boxShadow: `0px 4px 4px ${menuShadowColor}`,
+ backgroundColor: bgColor,
+ borderColor: borderColor,
+ borderRadius: borderRadius,
+ marginTop: '3px',
- .rc-time-picker-panel-input-wrap {
- margin-right: 2px;
+ '.rc-time-picker-panel-input-wrap': {
+ marginRight: '2px',
- &,
- .rc-time-picker-panel-input {
- background-color: ${bgColor};
- padding-top: 2px;
- }
- }
+ '&, .rc-time-picker-panel-input': {
+ backgroundColor: bgColor,
+ paddingTop: '2px',
+ },
+ },
- .rc-time-picker-panel-combobox {
- display: flex;
- }
- }
- `,
- input: css`
- .rc-time-picker-input {
- background-color: ${bgColor};
- border-radius: ${borderRadius};
- border-color: ${borderColor};
- height: ${theme.spacing(4)};
+ '.rc-time-picker-panel-combobox': {
+ display: 'flex',
+ },
+ },
+ }),
+ input: css({
+ '.rc-time-picker-input': {
+ backgroundColor: bgColor,
+ borderRadius: borderRadius,
+ borderColor: borderColor,
+ height: theme.spacing(4),
- &:focus {
- ${focusCss(theme)}
- }
+ '&:focus': getFocusStyles(theme),
- &:disabled {
- background-color: ${theme.colors.action.disabledBackground};
- color: ${theme.colors.action.disabledText};
- border: 1px solid ${theme.colors.action.disabledBackground};
- &:focus {
- box-shadow: none;
- }
- }
- }
+ '&:disabled': {
+ backgroundColor: theme.colors.action.disabledBackground,
+ color: theme.colors.action.disabledText,
+ border: `1px solid ${theme.colors.action.disabledBackground}`,
+ '&:focus': {
+ boxShadow: 'none',
+ },
+ },
+ },
- .rc-time-picker-clear {
- position: absolute;
- right: 20px;
- top: 50%;
- cursor: pointer;
- overflow: hidden;
- transform: translateY(-50%);
- color: ${theme.colors.text.secondary};
- }
- `,
+ '.rc-time-picker-clear': {
+ position: 'absolute',
+ right: '20px',
+ top: '50%',
+ cursor: 'pointer',
+ overflow: 'hidden',
+ transform: 'translateY(-50%)',
+ color: theme.colors.text.secondary,
+ },
+ }),
};
};
diff --git a/public/app/plugins/datasource/grafana/components/TimeRegionEditor.tsx b/public/app/plugins/datasource/grafana/components/TimeRegionEditor.tsx
index 2a7e10588ba..6fdec781340 100644
--- a/public/app/plugins/datasource/grafana/components/TimeRegionEditor.tsx
+++ b/public/app/plugins/datasource/grafana/components/TimeRegionEditor.tsx
@@ -175,16 +175,16 @@ const getStyles = (theme: GrafanaTheme2) => {
maxWidth: theme.spacing(60),
marginBottom: theme.spacing(2),
}),
- timezoneContainer: css`
- padding: 5px;
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- align-items: center;
- font-size: 12px;
- `,
- timezone: css`
- margin-right: 5px;
- `,
+ timezoneContainer: css({
+ padding: '5px',
+ display: 'flex',
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ fontSize: '12px',
+ }),
+ timezone: css({
+ marginRight: '5px',
+ }),
};
};
diff --git a/public/app/plugins/datasource/graphite/components/AddGraphiteFunction.tsx b/public/app/plugins/datasource/graphite/components/AddGraphiteFunction.tsx
index 48477adfbba..fbcc22ed5cf 100644
--- a/public/app/plugins/datasource/graphite/components/AddGraphiteFunction.tsx
+++ b/public/app/plugins/datasource/graphite/components/AddGraphiteFunction.tsx
@@ -50,8 +50,8 @@ export function AddGraphiteFunction({ funcDefs }: Props) {
function getStyles(theme: GrafanaTheme2) {
return {
- button: css`
- margin-right: ${theme.spacing(0.5)};
- `,
+ button: css({
+ marginRight: theme.spacing(0.5),
+ }),
};
}
diff --git a/public/app/plugins/datasource/graphite/components/FunctionParamEditor.tsx b/public/app/plugins/datasource/graphite/components/FunctionParamEditor.tsx
index dfaffe8fe93..cb557e02afb 100644
--- a/public/app/plugins/datasource/graphite/components/FunctionParamEditor.tsx
+++ b/public/app/plugins/datasource/graphite/components/FunctionParamEditor.tsx
@@ -66,11 +66,11 @@ const getStyles = (theme: GrafanaTheme2) => ({
margin: 0,
padding: 0,
}),
- input: css`
- margin: 0;
- padding: 0;
- input {
- height: 25px;
+ input: css({
+ margin: 0,
+ padding: 0,
+ input: {
+ height: '25px',
},
- `,
+ }),
});
diff --git a/public/app/plugins/datasource/graphite/components/GraphiteFunctionEditor.tsx b/public/app/plugins/datasource/graphite/components/GraphiteFunctionEditor.tsx
index 78599d8bfc7..699843793d1 100644
--- a/public/app/plugins/datasource/graphite/components/GraphiteFunctionEditor.tsx
+++ b/public/app/plugins/datasource/graphite/components/GraphiteFunctionEditor.tsx
@@ -93,9 +93,9 @@ const getStyles = (theme: GrafanaTheme2) => ({
padding: `0 ${theme.spacing(1)}`,
height: `${theme.v1.spacing.formInputHeight}px`,
}),
- error: css`
- border: 1px solid ${theme.colors.error.main};
- `,
+ error: css({
+ border: `1px solid ${theme.colors.error.main}`,
+ }),
label: css({
padding: 0,
margin: 0,
diff --git a/public/app/plugins/datasource/graphite/components/GraphiteQueryEditor.tsx b/public/app/plugins/datasource/graphite/components/GraphiteQueryEditor.tsx
index 0b9ca32a13d..3d5413717a3 100644
--- a/public/app/plugins/datasource/graphite/components/GraphiteQueryEditor.tsx
+++ b/public/app/plugins/datasource/graphite/components/GraphiteQueryEditor.tsx
@@ -63,14 +63,14 @@ function GraphiteQueryEditorContent() {
function getStyles(theme: GrafanaTheme2) {
return {
- container: css`
- display: flex;
- `,
- visualEditor: css`
- flex-grow: 1;
- `,
- toggleButton: css`
- margin-left: ${theme.spacing(0.5)};
- `,
+ container: css({
+ display: 'flex',
+ }),
+ visualEditor: css({
+ flexGrow: 1,
+ }),
+ toggleButton: css({
+ marginLeft: theme.spacing(0.5),
+ }),
};
}
diff --git a/public/app/plugins/datasource/graphite/components/MetricTankMetaInspector.tsx b/public/app/plugins/datasource/graphite/components/MetricTankMetaInspector.tsx
index 32de948b67b..9622c28c1bc 100644
--- a/public/app/plugins/datasource/graphite/components/MetricTankMetaInspector.tsx
+++ b/public/app/plugins/datasource/graphite/components/MetricTankMetaInspector.tsx
@@ -131,54 +131,54 @@ const getStyles = stylesFactory(() => {
const headerBg = theme.isDark ? theme.palette.gray15 : theme.palette.gray85;
return {
- metaItem: css`
- background: ${background};
- border: 1px solid ${borderColor};
- margin-bottom: ${theme.spacing.md};
- `,
- metaItemHeader: css`
- background: ${headerBg};
- padding: ${theme.spacing.xs} ${theme.spacing.md};
- font-size: ${theme.typography.size.md};
- display: flex;
- justify-content: space-between;
- `,
- metaItemBody: css`
- padding: ${theme.spacing.md};
- `,
- stepHeading: css`
- font-size: ${theme.typography.size.md};
- `,
- stepDescription: css`
- font-size: ${theme.typography.size.sm};
- color: ${theme.colors.textWeak};
- margin-bottom: ${theme.spacing.sm};
- `,
- step: css`
- margin-bottom: ${theme.spacing.lg};
+ metaItem: css({
+ background: background,
+ border: `1px solid ${borderColor}`,
+ marginBottom: theme.spacing.md,
+ }),
+ metaItemHeader: css({
+ background: headerBg,
+ padding: `${theme.spacing.xs} ${theme.spacing.md}`,
+ fontSize: theme.typography.size.md,
+ display: 'flex',
+ justifyContent: 'space-between',
+ }),
+ metaItemBody: css({
+ padding: theme.spacing.md,
+ }),
+ stepHeading: css({
+ fontSize: theme.typography.size.md,
+ }),
+ stepDescription: css({
+ fontSize: theme.typography.size.sm,
+ color: theme.colors.textWeak,
+ marginBottom: theme.spacing.sm,
+ }),
+ step: css({
+ marginBottom: theme.spacing.lg,
- &:last-child {
- margin-bottom: 0;
- }
- `,
- bucket: css`
- display: flex;
- margin-bottom: ${theme.spacing.sm};
- border-radius: ${theme.border.radius.sm};
- `,
- bucketInterval: css`
- flex-grow: 0;
- width: 60px;
- `,
- bucketRetention: css`
- background: linear-gradient(0deg, ${theme.palette.blue85}, ${theme.palette.blue95});
- text-align: center;
- color: ${theme.palette.white};
- margin-right: ${theme.spacing.md};
- border-radius: ${theme.border.radius.sm};
- `,
- bucketRetentionActive: css`
- background: linear-gradient(0deg, ${theme.palette.greenBase}, ${theme.palette.greenShade});
- `,
+ '&:last-child': {
+ marginBottom: 0,
+ },
+ }),
+ bucket: css({
+ display: 'flex',
+ marginBottom: theme.spacing.sm,
+ borderRadius: theme.border.radius.sm,
+ }),
+ bucketInterval: css({
+ flexGrow: 0,
+ width: '60px',
+ }),
+ bucketRetention: css({
+ background: `linear-gradient(0deg, ${theme.palette.blue85}, ${theme.palette.blue95})`,
+ textAlign: 'center',
+ color: theme.palette.white,
+ marginRight: theme.spacing.md,
+ borderRadius: theme.border.radius.sm,
+ }),
+ bucketRetentionActive: css({
+ background: `linear-gradient(0deg, ${theme.palette.greenBase}, ${theme.palette.greenShade})`,
+ }),
};
});
diff --git a/public/app/plugins/datasource/graphite/components/TagsSection.tsx b/public/app/plugins/datasource/graphite/components/TagsSection.tsx
index c5646c4f08f..e3169c60545 100644
--- a/public/app/plugins/datasource/graphite/components/TagsSection.tsx
+++ b/public/app/plugins/datasource/graphite/components/TagsSection.tsx
@@ -66,8 +66,8 @@ export function TagsSection({ tags, state }: Props) {
function getStyles(theme: GrafanaTheme2) {
return {
- button: css`
- margin-right: ${theme.spacing(0.5)};
- `,
+ button: css({
+ marginRight: theme.spacing(0.5),
+ }),
};
}
diff --git a/public/app/plugins/datasource/influxdb/components/editor/query/flux/FluxQueryEditor.tsx b/public/app/plugins/datasource/influxdb/components/editor/query/flux/FluxQueryEditor.tsx
index 1ad454e7b86..22f29eebd1e 100644
--- a/public/app/plugins/datasource/influxdb/components/editor/query/flux/FluxQueryEditor.tsx
+++ b/public/app/plugins/datasource/influxdb/components/editor/query/flux/FluxQueryEditor.tsx
@@ -200,10 +200,10 @@ class UnthemedFluxQueryEditor extends PureComponent {
options={samples}
value="Sample query"
onChange={this.onSampleChange}
- className={css`
- margin-top: -${theme.spacing(0.5)};
- margin-left: ${theme.spacing(0.5)};
- `}
+ className={css({
+ marginTop: theme.spacing(-0.5),
+ marginLeft: theme.spacing(0.5),
+ })}
/>
@@ -218,17 +218,17 @@ class UnthemedFluxQueryEditor extends PureComponent
{
}
const getStyles = (theme: GrafanaTheme2) => ({
- editorContainerStyles: css`
- height: 200px;
- max-width: 100%;
- resize: vertical;
- overflow: auto;
- background-color: ${theme.isDark ? theme.colors.background.canvas : theme.colors.background.primary};
- padding-bottom: ${theme.spacing(1)};
- `,
- editorActions: css`
- margin-top: 6px;
- `,
+ editorContainerStyles: css({
+ height: '200px',
+ maxWidth: '100%',
+ resize: 'vertical',
+ overflow: 'auto',
+ backgroundColor: theme.isDark ? theme.colors.background.canvas : theme.colors.background.primary,
+ paddingBottom: theme.spacing(1),
+ }),
+ editorActions: css({
+ marginTop: '6px',
+ }),
});
export const FluxQueryEditor = withTheme2(UnthemedFluxQueryEditor);
diff --git a/public/app/plugins/datasource/influxdb/components/editor/query/fsql/FSQLEditor.tsx b/public/app/plugins/datasource/influxdb/components/editor/query/fsql/FSQLEditor.tsx
index f63b3778dd2..a9d61dccaee 100644
--- a/public/app/plugins/datasource/influxdb/components/editor/query/fsql/FSQLEditor.tsx
+++ b/public/app/plugins/datasource/influxdb/components/editor/query/fsql/FSQLEditor.tsx
@@ -118,17 +118,17 @@ class UnthemedSQLQueryEditor extends PureComponent {
}
const getStyles = (theme: GrafanaTheme2) => ({
- editorContainerStyles: css`
- height: 200px;
- max-width: 100%;
- resize: vertical;
- overflow: auto;
- background-color: ${theme.isDark ? theme.colors.background.canvas : theme.colors.background.primary};
- padding-bottom: ${theme.spacing(1)};
- `,
- editorActions: css`
- margin-top: 6px;
- `,
+ editorContainerStyles: css({
+ height: '200px',
+ maxWidth: '100%',
+ resize: 'vertical',
+ overflow: 'auto',
+ backgroundColor: theme.isDark ? theme.colors.background.canvas : theme.colors.background.primary,
+ paddingBottom: theme.spacing(1),
+ }),
+ editorActions: css({
+ marginTop: '6px',
+ }),
});
export const FSQLEditor = withTheme2(UnthemedSQLQueryEditor);
diff --git a/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/VisualInfluxQLEditor.tsx b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/VisualInfluxQLEditor.tsx
index 4a1b879242d..ddc3f82cbb9 100644
--- a/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/VisualInfluxQLEditor.tsx
+++ b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/VisualInfluxQLEditor.tsx
@@ -247,8 +247,8 @@ export const VisualInfluxQLEditor = (props: Props): JSX.Element => {
function getStyles(theme: GrafanaTheme2) {
return {
- inlineLabel: css`
- color: ${theme.colors.primary.text};
- `,
+ inlineLabel: css({
+ color: theme.colors.primary.text,
+ }),
};
}
diff --git a/public/app/plugins/datasource/jaeger/CheatSheet.tsx b/public/app/plugins/datasource/jaeger/CheatSheet.tsx
index db27736458b..2f37a3df0e9 100644
--- a/public/app/plugins/datasource/jaeger/CheatSheet.tsx
+++ b/public/app/plugins/datasource/jaeger/CheatSheet.tsx
@@ -48,10 +48,10 @@ export default function CheatSheet() {
}
const getStyles = (theme: GrafanaTheme2) => ({
- anchorTag: css`
- color: ${theme.colors.text.link};
- `,
- unorderedList: css`
- list-style-type: none;
- `,
+ anchorTag: css({
+ color: theme.colors.text.link,
+ }),
+ unorderedList: css({
+ listStyleType: 'none',
+ }),
});
diff --git a/public/app/plugins/datasource/jaeger/configuration/TraceIdTimeParams.tsx b/public/app/plugins/datasource/jaeger/configuration/TraceIdTimeParams.tsx
index 94dc28005ba..522f4aaaf6c 100644
--- a/public/app/plugins/datasource/jaeger/configuration/TraceIdTimeParams.tsx
+++ b/public/app/plugins/datasource/jaeger/configuration/TraceIdTimeParams.tsx
@@ -45,12 +45,12 @@ export function TraceIdTimeParams({ options, onOptionsChange }: Props) {
}
const styles = {
- container: css`
- label: container;
- width: 100%;
- `,
- row: css`
- label: row;
- align-items: baseline;
- `,
+ container: css({
+ label: 'container',
+ width: '100%',
+ }),
+ row: css({
+ label: 'row',
+ alignItems: 'baseline',
+ }),
};
diff --git a/public/app/plugins/datasource/loki/components/LokiContextUi.tsx b/public/app/plugins/datasource/loki/components/LokiContextUi.tsx
index a44f6c37a7e..43c6d63bd26 100644
--- a/public/app/plugins/datasource/loki/components/LokiContextUi.tsx
+++ b/public/app/plugins/datasource/loki/components/LokiContextUi.tsx
@@ -42,71 +42,71 @@ export interface LokiContextUiProps {
function getStyles(theme: GrafanaTheme2) {
return {
- labels: css`
- display: flex;
- gap: ${theme.spacing(0.5)};
- `,
- wrapper: css`
- display: flex;
- flex-direction: column;
- flex: 1;
- gap: ${theme.spacing(0.5)};
- position: relative;
- `,
- textWrapper: css`
- display: flex;
- align-items: center;
- `,
- hidden: css`
- visibility: hidden;
- `,
- label: css`
- max-width: 100%;
- &:first-of-type {
- margin-bottom: ${theme.spacing(2)};
- }
- &:not(:first-of-type) {
- margin: ${theme.spacing(2)} 0;
- }
- `,
- rawQueryContainer: css`
- text-align: start;
- line-break: anywhere;
- margin-top: -${theme.spacing(0.25)};
- margin-right: ${theme.spacing(6)};
- min-height: ${theme.spacing(4)};
- `,
- ui: css`
- background-color: ${theme.colors.background.secondary};
- padding: ${theme.spacing(2)};
- `,
+ labels: css({
+ display: 'flex',
+ gap: theme.spacing(0.5),
+ }),
+ wrapper: css({
+ display: 'flex',
+ flexDirection: 'column',
+ flex: 1,
+ gap: theme.spacing(0.5),
+ position: 'relative',
+ }),
+ textWrapper: css({
+ display: 'flex',
+ alignItems: 'center',
+ }),
+ hidden: css({
+ visibility: 'hidden',
+ }),
+ label: css({
+ maxWidth: '100%',
+ '&:first-of-type': {
+ marginBottom: theme.spacing(2),
+ },
+ '&:not(:first-of-type)': {
+ margin: theme.spacing(2, 0),
+ },
+ }),
+ rawQueryContainer: css({
+ textAlign: 'start',
+ lineBreak: 'anywhere',
+ marginTop: theme.spacing(-0.25),
+ marginRight: theme.spacing(6),
+ minHeight: theme.spacing(4),
+ }),
+ ui: css({
+ backgroundColor: theme.colors.background.secondary,
+ padding: theme.spacing(2),
+ }),
notification: css({
position: 'absolute',
zIndex: theme.zIndex.portal,
top: 0,
right: 0,
}),
- rawQuery: css`
- display: inline;
- `,
- queryDescription: css`
- margin-left: ${theme.spacing(0.5)};
- `,
- iconButton: css`
- position: absolute;
- top: ${theme.spacing(1)};
- right: ${theme.spacing(1)};
- z-index: ${theme.zIndex.navbarFixed};
- `,
- operationsToggle: css`
- margin: ${theme.spacing(1)} 0 ${theme.spacing(-1)} 0;
- & > div {
- margin: 0;
- & > label {
- padding: 0;
- }
- }
- `,
+ rawQuery: css({
+ display: 'inline',
+ }),
+ queryDescription: css({
+ marginLeft: theme.spacing(0.5),
+ }),
+ iconButton: css({
+ position: 'absolute',
+ top: theme.spacing(1),
+ right: theme.spacing(1),
+ zIndex: theme.zIndex.navbarFixed,
+ }),
+ operationsToggle: css({
+ margin: theme.spacing(1, 0, -1, 0),
+ '& > div': {
+ margin: 0,
+ '& > label': {
+ padding: 0,
+ },
+ },
+ }),
};
}
diff --git a/public/app/plugins/datasource/loki/components/LokiLabelBrowser.tsx b/public/app/plugins/datasource/loki/components/LokiLabelBrowser.tsx
index c11bf73054d..49e58e8f233 100644
--- a/public/app/plugins/datasource/loki/components/LokiLabelBrowser.tsx
+++ b/public/app/plugins/datasource/loki/components/LokiLabelBrowser.tsx
@@ -108,82 +108,84 @@ export function facetLabels(
}
const getStyles = (theme: GrafanaTheme2) => ({
- wrapper: css`
- background-color: ${theme.colors.background.secondary};
- width: 100%;
- `,
- wrapperPadding: css`
- padding: ${theme.spacing(2)};
- `,
- list: css`
- margin-top: ${theme.spacing(1)};
- display: flex;
- flex-wrap: wrap;
- max-height: 200px;
- overflow: auto;
- `,
- section: css`
- & + & {
- margin: ${theme.spacing(2, 0)};
- }
+ wrapper: css({
+ backgroundColor: theme.colors.background.secondary,
+ width: '100%',
+ }),
+ wrapperPadding: css({
+ padding: theme.spacing(2),
+ }),
+ list: css({
+ marginTop: theme.spacing(1),
+ display: 'flex',
+ flexWrap: 'wrap',
+ maxHeight: '200px',
+ overflow: 'auto',
+ }),
+ section: css({
+ '& + &': {
+ margin: theme.spacing(2, 0),
+ },
- position: relative;
- `,
- footerSectionStyles: css`
- padding: ${theme.spacing(1)};
- background-color: ${theme.colors.background.primary};
- position: sticky;
- bottom: -${theme.spacing(3)}; /* offset the padding on modal */
- left: 0;
- `,
- selector: css`
- font-family: ${theme.typography.fontFamilyMonospace};
- margin-bottom: ${theme.spacing(1)};
- width: 100%;
- `,
- status: css`
- margin-bottom: ${theme.spacing(1)};
- color: ${theme.colors.text.secondary};
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- transition: opacity 100ms linear;
- opacity: 0;
- font-size: ${theme.typography.bodySmall.fontSize};
- height: calc(${theme.typography.bodySmall.fontSize} + 10px);
- `,
- statusShowing: css`
- opacity: 1;
- `,
- error: css`
- color: ${theme.colors.error.main};
- `,
- valueList: css`
- margin-right: ${theme.spacing(1)};
- resize: horizontal;
- `,
- valueListWrapper: css`
- border-left: 1px solid ${theme.colors.border.medium};
- margin: ${theme.spacing(1, 0)};
- padding: ${theme.spacing(1, 0, 1, 1)};
- `,
- valueListArea: css`
- display: flex;
- flex-wrap: wrap;
- margin-top: ${theme.spacing(1)};
- `,
- valueTitle: css`
- margin-left: -${theme.spacing(0.5)};
- margin-bottom: ${theme.spacing(1)};
- `,
- validationStatus: css`
- padding: ${theme.spacing(0.5)};
- margin-bottom: ${theme.spacing(1)};
- color: ${theme.colors.text.maxContrast};
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- `,
+ position: 'relative',
+ }),
+ footerSectionStyles: css({
+ padding: theme.spacing(1),
+ backgroundColor: theme.colors.background.primary,
+ position: 'sticky',
+ bottom: theme.spacing(-3) /* offset the padding on modal */,
+ left: 0,
+ }),
+ selector: css({
+ fontFamily: theme.typography.fontFamilyMonospace,
+ marginBottom: theme.spacing(1),
+ width: '100%',
+ }),
+ status: css({
+ marginBottom: theme.spacing(1),
+ color: theme.colors.text.secondary,
+ whiteSpace: 'nowrap',
+ overflow: 'hidden',
+ textOverflow: 'ellipsis',
+ [theme.transitions.handleMotion('no-preference', 'reduce')]: {
+ transition: 'opacity 100ms linear',
+ },
+ opacity: 0,
+ fontSize: theme.typography.bodySmall.fontSize,
+ height: `calc(${theme.typography.bodySmall.fontSize} + 10px)`,
+ }),
+ statusShowing: css({
+ opacity: 1,
+ }),
+ error: css({
+ color: theme.colors.error.main,
+ }),
+ valueList: css({
+ marginRight: theme.spacing(1),
+ resize: 'horizontal',
+ }),
+ valueListWrapper: css({
+ borderLeft: `1px solid ${theme.colors.border.medium}`,
+ margin: theme.spacing(1, 0),
+ padding: theme.spacing(1, 0, 1, 1),
+ }),
+ valueListArea: css({
+ display: 'flex',
+ flexWrap: 'wrap',
+ marginTop: theme.spacing(1),
+ }),
+ valueTitle: css({
+ marginLeft: theme.spacing(-0.5),
+ marginBottom: theme.spacing(1),
+ }),
+ validationStatus: css({
+ padding: theme.spacing(0.5),
+ marginBottom: theme.spacing(1),
+ color: theme.colors.text.maxContrast,
+ whiteSpace: 'nowrap',
+ overflow: 'hidden',
+ textOverflow: 'ellipsis',
+ }),
});
export class UnthemedLokiLabelBrowser extends React.Component {
diff --git a/public/app/plugins/datasource/loki/components/monaco-query-field/MonacoQueryField.tsx b/public/app/plugins/datasource/loki/components/monaco-query-field/MonacoQueryField.tsx
index cc1d1523f16..f525ec4e30c 100644
--- a/public/app/plugins/datasource/loki/components/monaco-query-field/MonacoQueryField.tsx
+++ b/public/app/plugins/datasource/loki/components/monaco-query-field/MonacoQueryField.tsx
@@ -82,21 +82,21 @@ function ensureLogQL(monaco: Monaco) {
const getStyles = (theme: GrafanaTheme2, placeholder: string) => {
return {
- container: css`
- border-radius: ${theme.shape.radius.default};
- border: 1px solid ${theme.components.input.borderColor};
- width: 100%;
- .monaco-editor .suggest-widget {
- min-width: 50%;
- }
- `,
- placeholder: css`
- ::after {
- content: '${placeholder}';
- font-family: ${theme.typography.fontFamilyMonospace};
- opacity: 0.3;
- }
- `,
+ container: css({
+ borderRadius: theme.shape.radius.default,
+ border: `1px solid ${theme.components.input.borderColor}`,
+ width: '100%',
+ '.monaco-editor .suggest-widget': {
+ minWidth: '50%',
+ },
+ }),
+ placeholder: css({
+ '::after': {
+ content: `'${placeholder}'`,
+ fontFamily: theme.typography.fontFamilyMonospace,
+ opacity: 0.3,
+ },
+ }),
};
};
diff --git a/public/app/plugins/datasource/loki/configuration/DerivedField.tsx b/public/app/plugins/datasource/loki/configuration/DerivedField.tsx
index 15ec011f9db..800dd4541c0 100644
--- a/public/app/plugins/datasource/loki/configuration/DerivedField.tsx
+++ b/public/app/plugins/datasource/loki/configuration/DerivedField.tsx
@@ -12,29 +12,29 @@ import { DerivedFieldConfig } from '../types';
type MatcherType = 'label' | 'regex';
const getStyles = (theme: GrafanaTheme2) => ({
- row: css`
- display: flex;
- align-items: baseline;
- `,
- nameField: css`
- flex: 2;
- margin-right: ${theme.spacing(0.5)};
- `,
- regexField: css`
- flex: 3;
- margin-right: ${theme.spacing(0.5)};
- `,
- urlField: css`
- flex: 1;
- margin-right: ${theme.spacing(0.5)};
- `,
- urlDisplayLabelField: css`
- flex: 1;
- `,
- internalLink: css`
- margin-right: ${theme.spacing(1)};
- `,
- dataSource: css``,
+ row: css({
+ display: 'flex',
+ alignItems: 'baseline',
+ }),
+ nameField: css({
+ flex: 2,
+ marginRight: theme.spacing(0.5),
+ }),
+ regexField: css({
+ flex: 3,
+ marginRight: theme.spacing(0.5),
+ }),
+ urlField: css({
+ flex: 1,
+ marginRight: theme.spacing(0.5),
+ }),
+ urlDisplayLabelField: css({
+ flex: 1,
+ }),
+ internalLink: css({
+ marginRight: theme.spacing(1),
+ }),
+ dataSource: css({}),
nameMatcherField: css({
width: theme.spacing(20),
marginRight: theme.spacing(0.5),
diff --git a/public/app/plugins/datasource/loki/configuration/DerivedFields.tsx b/public/app/plugins/datasource/loki/configuration/DerivedFields.tsx
index 2d6bbaf7d2b..8a72856117e 100644
--- a/public/app/plugins/datasource/loki/configuration/DerivedFields.tsx
+++ b/public/app/plugins/datasource/loki/configuration/DerivedFields.tsx
@@ -11,18 +11,18 @@ import { DebugSection } from './DebugSection';
import { DerivedField } from './DerivedField';
const getStyles = (theme: GrafanaTheme2) => ({
- addButton: css`
- margin-right: 10px;
- `,
- derivedField: css`
- margin-bottom: ${theme.spacing(1)};
- `,
- container: css`
- margin-bottom: ${theme.spacing(4)};
- `,
- debugSection: css`
- margin-top: ${theme.spacing(4)};
- `,
+ addButton: css({
+ marginRight: '10px',
+ }),
+ derivedField: css({
+ marginBottom: theme.spacing(1),
+ }),
+ container: css({
+ marginBottom: theme.spacing(4),
+ }),
+ debugSection: css({
+ marginTop: theme.spacing(4),
+ }),
});
type Props = {
@@ -114,9 +114,9 @@ export const DerivedFields = ({ fields = [], onChange }: Props) => {
{showDebug && (
diff --git a/public/app/plugins/datasource/loki/querybuilder/components/LabelBrowserModal.tsx b/public/app/plugins/datasource/loki/querybuilder/components/LabelBrowserModal.tsx
index b1cc1d41ece..7b4c5091ca6 100644
--- a/public/app/plugins/datasource/loki/querybuilder/components/LabelBrowserModal.tsx
+++ b/public/app/plugins/datasource/loki/querybuilder/components/LabelBrowserModal.tsx
@@ -86,11 +86,11 @@ export const LabelBrowserModal = (props: Props) => {
const getStyles = (theme: GrafanaTheme2) => {
return {
- modal: css`
- width: 85vw;
- ${theme.breakpoints.down('md')} {
- width: 100%;
- }
- `,
+ modal: css({
+ width: '85vw',
+ [theme.breakpoints.down('md')]: {
+ width: '100%',
+ },
+ }),
};
};
diff --git a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryCodeEditor.tsx b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryCodeEditor.tsx
index 05877c529b9..897b38f922d 100644
--- a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryCodeEditor.tsx
+++ b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryCodeEditor.tsx
@@ -46,26 +46,26 @@ export function LokiQueryCodeEditor({
const getStyles = (theme: GrafanaTheme2) => {
return {
- wrapper: css`
- max-width: 100%;
- .gf-form {
- margin-bottom: 0.5;
- }
- `,
- buttonGroup: css`
- border: 1px solid ${theme.colors.border.medium};
- border-top: none;
- padding: ${theme.spacing(0.5, 0.5, 0.5, 0.5)};
- margin-bottom: ${theme.spacing(0.5)};
- display: flex;
- flex-grow: 1;
- justify-content: end;
- font-size: ${theme.typography.bodySmall.fontSize};
- `,
- hint: css`
- color: ${theme.colors.text.disabled};
- white-space: nowrap;
- cursor: help;
- `,
+ wrapper: css({
+ maxWidth: '100%',
+ '.gf-form': {
+ marginBottom: 0.5,
+ },
+ }),
+ buttonGroup: css({
+ border: `1px solid ${theme.colors.border.medium}`,
+ borderTop: 'none',
+ padding: theme.spacing(0.5, 0.5, 0.5, 0.5),
+ marginBottom: theme.spacing(0.5),
+ display: 'flex',
+ flexGrow: 1,
+ justifyContent: 'end',
+ fontSize: theme.typography.bodySmall.fontSize,
+ }),
+ hint: css({
+ color: theme.colors.text.disabled,
+ whiteSpace: 'nowrap',
+ cursor: 'help',
+ }),
};
};
diff --git a/public/app/plugins/datasource/loki/querybuilder/components/QueryPattern.tsx b/public/app/plugins/datasource/loki/querybuilder/components/QueryPattern.tsx
index 27fe4fe9831..574a70509af 100644
--- a/public/app/plugins/datasource/loki/querybuilder/components/QueryPattern.tsx
+++ b/public/app/plugins/datasource/loki/querybuilder/components/QueryPattern.tsx
@@ -88,21 +88,21 @@ export const QueryPattern = (props: Props) => {
const getStyles = (theme: GrafanaTheme2) => {
return {
- card: css`
- width: 49.5%;
- display: flex;
- flex-direction: column;
- `,
- rawQueryContainer: css`
- flex-grow: 1;
- `,
- rawQuery: css`
- background-color: ${theme.colors.background.primary};
- padding: ${theme.spacing(1)};
- margin-top: ${theme.spacing(1)};
- `,
- spacing: css`
- margin-bottom: ${theme.spacing(1)};
- `,
+ card: css({
+ width: '49.5%',
+ display: 'flex',
+ flexDirection: 'column',
+ }),
+ rawQueryContainer: css({
+ flexGrow: 1,
+ }),
+ rawQuery: css({
+ backgroundColor: theme.colors.background.primary,
+ padding: theme.spacing(1),
+ marginTop: theme.spacing(1),
+ }),
+ spacing: css({
+ marginBottom: theme.spacing(1),
+ }),
};
};
diff --git a/public/app/plugins/datasource/loki/querybuilder/components/QueryPatternsModal.tsx b/public/app/plugins/datasource/loki/querybuilder/components/QueryPatternsModal.tsx
index 7453341218f..42d67a19c89 100644
--- a/public/app/plugins/datasource/loki/querybuilder/components/QueryPatternsModal.tsx
+++ b/public/app/plugins/datasource/loki/querybuilder/components/QueryPatternsModal.tsx
@@ -135,20 +135,20 @@ export const QueryPatternsModal = (props: Props) => {
const getStyles = (theme: GrafanaTheme2) => {
return {
- cardsContainer: css`
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- justify-content: space-between;
- `,
- spacing: css`
- margin-bottom: ${theme.spacing(1)};
- `,
- modal: css`
- width: 85vw;
- ${theme.breakpoints.down('md')} {
- width: 100%;
- }
- `,
+ cardsContainer: css({
+ display: 'flex',
+ flexDirection: 'row',
+ flexWrap: 'wrap',
+ justifyContent: 'space-between',
+ }),
+ spacing: css({
+ marginBottom: theme.spacing(1),
+ }),
+ modal: css({
+ width: '85vw',
+ [theme.breakpoints.down('md')]: {
+ width: '100%',
+ },
+ }),
};
};
diff --git a/public/app/plugins/datasource/opentsdb/components/OpenTsdbQueryEditor.tsx b/public/app/plugins/datasource/opentsdb/components/OpenTsdbQueryEditor.tsx
index 742701d9feb..719bdb6f009 100644
--- a/public/app/plugins/datasource/opentsdb/components/OpenTsdbQueryEditor.tsx
+++ b/public/app/plugins/datasource/opentsdb/components/OpenTsdbQueryEditor.tsx
@@ -154,12 +154,12 @@ export function OpenTsdbQueryEditor({
function getStyles(theme: GrafanaTheme2) {
return {
- container: css`
- display: flex;
- `,
- toggleButton: css`
- margin-left: ${theme.spacing(0.5)};
- `,
+ container: css({
+ display: 'flex',
+ }),
+ toggleButton: css({
+ marginLeft: theme.spacing(0.5),
+ }),
};
}
diff --git a/public/app/plugins/datasource/parca/QueryEditor/LabelsEditor.tsx b/public/app/plugins/datasource/parca/QueryEditor/LabelsEditor.tsx
index 3f97efc01a0..e66de8b4159 100644
--- a/public/app/plugins/datasource/parca/QueryEditor/LabelsEditor.tsx
+++ b/public/app/plugins/datasource/parca/QueryEditor/LabelsEditor.tsx
@@ -2,6 +2,7 @@ import { css } from '@emotion/css';
import { useEffect, useRef } from 'react';
import { useLatest } from 'react-use';
+import { GrafanaTheme2 } from '@grafana/data';
import { CodeEditor, Monaco, useStyles2, monacoTypes } from '@grafana/ui';
import { ParcaDataSource } from '../datasource';
@@ -125,20 +126,20 @@ function ensureParcaQL(monaco: Monaco) {
}
}
-const getStyles = () => {
+const getStyles = (theme: GrafanaTheme2) => {
return {
- queryField: css`
- flex: 1;
+ queryField: css({
+ flex: 1,
// Not exactly sure but without this the editor doe not shrink after resizing (so you can make it bigger but not
// smaller). At the same time this does not actually make the editor 100px because it has flex 1 so I assume
// this should sort of act as a flex-basis (but flex-basis does not work for this). So yeah CSS magic.
- width: 100px;
- `,
- wrapper: css`
- display: flex;
- flex: 1;
- border: 1px solid rgba(36, 41, 46, 0.3);
- border-radius: 2px;
- `,
+ width: '100px',
+ }),
+ wrapper: css({
+ display: 'flex',
+ flex: 1,
+ border: '1px solid rgba(36, 41, 46, 0.3)',
+ borderRadius: theme.shape.radius.default,
+ }),
};
};
diff --git a/public/app/plugins/panel/alertlist/AlertInstances.tsx b/public/app/plugins/panel/alertlist/AlertInstances.tsx
index be32a39d5ef..3db9777d884 100644
--- a/public/app/plugins/panel/alertlist/AlertInstances.tsx
+++ b/public/app/plugins/panel/alertlist/AlertInstances.tsx
@@ -138,15 +138,15 @@ export const AlertInstances = ({
};
const getStyles = (theme: GrafanaTheme2) => ({
- clickable: css`
- cursor: pointer;
- `,
- footerRow: css`
- display: flex;
- flex-direction: column;
- gap: ${theme.spacing(1)};
- justify-content: space-between;
- align-items: center;
- width: 100%;
- `,
+ clickable: css({
+ cursor: 'pointer',
+ }),
+ footerRow: css({
+ display: 'flex',
+ flexDirection: 'column',
+ gap: theme.spacing(1),
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ width: '100%',
+ }),
});
diff --git a/public/app/plugins/panel/alertlist/UnifiedAlertList.tsx b/public/app/plugins/panel/alertlist/UnifiedAlertList.tsx
index 2e615646324..b54218e6c93 100644
--- a/public/app/plugins/panel/alertlist/UnifiedAlertList.tsx
+++ b/public/app/plugins/panel/alertlist/UnifiedAlertList.tsx
@@ -351,102 +351,102 @@ function filterRules(props: PanelProps, rules: Combined
}
export const getStyles = (theme: GrafanaTheme2) => ({
- cardContainer: css`
- padding: ${theme.spacing(0.5)} 0 ${theme.spacing(0.25)} 0;
- line-height: ${theme.typography.body.lineHeight};
- margin-bottom: 0px;
- `,
- container: css`
- overflow-y: auto;
- height: 100%;
- `,
- alertRuleList: css`
- display: flex;
- flex-wrap: wrap;
- justify-content: space-between;
- list-style-type: none;
- `,
- alertRuleItem: css`
- display: flex;
- align-items: center;
- width: 100%;
- height: 100%;
- background: ${theme.colors.background.secondary};
- padding: ${theme.spacing(0.5)} ${theme.spacing(1)};
- border-radius: ${theme.shape.radius.default};
- margin-bottom: ${theme.spacing(0.5)};
+ cardContainer: css({
+ padding: theme.spacing(0.5, 0, 0.25, 0),
+ lineHeight: theme.typography.body.lineHeight,
+ marginBottom: 0,
+ }),
+ container: css({
+ overflowY: 'auto',
+ height: '100%',
+ }),
+ alertRuleList: css({
+ display: 'flex',
+ flexWrap: 'wrap',
+ justifyContent: 'space-between',
+ listStyleType: 'none',
+ }),
+ alertRuleItem: css({
+ display: 'flex',
+ alignItems: 'center',
+ width: '100%',
+ height: '100%',
+ background: theme.colors.background.secondary,
+ padding: theme.spacing(0.5, 1),
+ borderRadius: theme.shape.radius.default,
+ marginBottom: theme.spacing(0.5),
- gap: ${theme.spacing(2)};
- `,
- alertName: css`
- font-size: ${theme.typography.h6.fontSize};
- font-weight: ${theme.typography.fontWeightBold};
+ gap: theme.spacing(2),
+ }),
+ alertName: css({
+ fontSize: theme.typography.h6.fontSize,
+ fontWeight: theme.typography.fontWeightBold,
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- `,
- alertNameWrapper: css`
- display: flex;
- flex: 1;
- flex-wrap: nowrap;
- flex-direction: column;
+ whiteSpace: 'nowrap',
+ overflow: 'hidden',
+ textOverflow: 'ellipsis',
+ }),
+ alertNameWrapper: css({
+ display: 'flex',
+ flex: 1,
+ flexWrap: 'nowrap',
+ flexDirection: 'column',
- min-width: 100px;
- `,
- alertLabels: css`
- > * {
- margin-right: ${theme.spacing(0.5)};
- }
- `,
- alertDuration: css`
- font-size: ${theme.typography.bodySmall.fontSize};
- `,
- alertRuleItemText: css`
- font-weight: ${theme.typography.fontWeightBold};
- font-size: ${theme.typography.bodySmall.fontSize};
- margin: 0;
- `,
- alertRuleItemTime: css`
- color: ${theme.colors.text.secondary};
- font-weight: normal;
- white-space: nowrap;
- `,
- alertRuleItemInfo: css`
- font-weight: normal;
- flex-grow: 2;
- display: flex;
- align-items: flex-end;
- `,
- noAlertsMessage: css`
- display: flex;
- align-items: center;
- justify-content: center;
- width: 100%;
- height: 100%;
- `,
- alertIcon: css`
- margin-right: ${theme.spacing(0.5)};
- `,
- instanceDetails: css`
- min-width: 1px;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- `,
- customGroupDetails: css`
- margin-bottom: ${theme.spacing(0.5)};
- `,
- link: css`
- word-break: break-all;
- color: ${theme.colors.primary.text};
- display: flex;
- align-items: center;
- gap: ${theme.spacing(1)};
- `,
- hidden: css`
- display: none;
- `,
+ minWidth: '100px',
+ }),
+ alertLabels: css({
+ '> *': {
+ marginRight: theme.spacing(0.5),
+ },
+ }),
+ alertDuration: css({
+ fontSize: theme.typography.bodySmall.fontSize,
+ }),
+ alertRuleItemText: css({
+ fontWeight: theme.typography.fontWeightBold,
+ fontSize: theme.typography.bodySmall.fontSize,
+ margin: 0,
+ }),
+ alertRuleItemTime: css({
+ color: theme.colors.text.secondary,
+ fontWeight: 'normal',
+ whiteSpace: 'nowrap',
+ }),
+ alertRuleItemInfo: css({
+ fontWeight: 'normal',
+ flexGrow: 2,
+ display: 'flex',
+ alignItems: 'flex-end',
+ }),
+ noAlertsMessage: css({
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ width: '100%',
+ height: '100%',
+ }),
+ alertIcon: css({
+ marginRight: theme.spacing(0.5),
+ }),
+ instanceDetails: css({
+ minWidth: '1px',
+ whiteSpace: 'nowrap',
+ overflow: 'hidden',
+ textOverflow: 'ellipsis',
+ }),
+ customGroupDetails: css({
+ marginBottom: theme.spacing(0.5),
+ }),
+ link: css({
+ wordBreak: 'break-all',
+ color: theme.colors.primary.text,
+ display: 'flex',
+ alignItems: 'center',
+ gap: theme.spacing(1),
+ }),
+ hidden: css({
+ display: 'none',
+ }),
});
export function UnifiedAlertListPanel(props: PanelProps) {
diff --git a/public/app/plugins/panel/alertlist/unified-alerting/UngroupedView.tsx b/public/app/plugins/panel/alertlist/unified-alerting/UngroupedView.tsx
index 25f8df85cdb..6b43f91b632 100644
--- a/public/app/plugins/panel/alertlist/unified-alerting/UngroupedView.tsx
+++ b/public/app/plugins/panel/alertlist/unified-alerting/UngroupedView.tsx
@@ -139,42 +139,25 @@ const UngroupedModeView = ({ rules, options, handleInstancesLimit, limitInstance
};
const getStateTagStyles = (theme: GrafanaTheme2) => ({
- common: css`
- width: 70px;
- text-align: center;
- align-self: stretch;
-
- display: inline-block;
- color: white;
- border-radius: ${theme.shape.radius.default};
- font-size: ${theme.typography.bodySmall.fontSize};
- text-transform: capitalize;
- line-height: 1.2;
- flex-shrink: 0;
-
- display: flex;
- flex-direction: column;
- justify-content: center;
- `,
- icon: css`
- margin-top: ${theme.spacing(2.5)};
- align-self: flex-start;
- `,
- good: css`
- color: ${theme.colors.success.main};
- `,
- bad: css`
- color: ${theme.colors.error.main};
- `,
- warning: css`
- color: ${theme.colors.warning.main};
- `,
- neutral: css`
- color: ${theme.colors.secondary.main};
- `,
- info: css`
- color: ${theme.colors.primary.main};
- `,
+ icon: css({
+ marginTop: theme.spacing(2.5),
+ alignSelf: 'flex-start',
+ }),
+ good: css({
+ color: theme.colors.success.main,
+ }),
+ bad: css({
+ color: theme.colors.error.main,
+ }),
+ warning: css({
+ color: theme.colors.warning.main,
+ }),
+ neutral: css({
+ color: theme.colors.secondary.main,
+ }),
+ info: css({
+ color: theme.colors.primary.main,
+ }),
});
export default UngroupedModeView;
diff --git a/public/app/plugins/panel/datagrid/utils.ts b/public/app/plugins/panel/datagrid/utils.ts
index 83a0b79dc8b..a32c1df5383 100644
--- a/public/app/plugins/panel/datagrid/utils.ts
+++ b/public/app/plugins/panel/datagrid/utils.ts
@@ -248,61 +248,63 @@ export const getGridCellKind = (field: Field, row: number, hasGridSelection = fa
export const getStyles = (theme: GrafanaTheme2, isResizeInProgress: boolean) => {
return {
- dataEditor: css`
- .dvn-scroll-inner > div:nth-child(2) {
- pointer-events: none !important;
- }
- scrollbar-color: ${theme.colors.background.secondary} ${theme.colors.background.primary};
- ::-webkit-scrollbar {
- width: 10px;
- height: 10px;
- }
- ::-webkit-scrollbar-track {
- background: ${theme.colors.background.primary};
- }
- ::-webkit-scrollbar-thumb {
- border-radius: 10px;
- }
- ::-webkit-scrollbar-corner {
- display: none;
- }
- `,
- addColumnDiv: css`
- width: 120px;
- display: flex;
- flex-direction: column;
- background-color: ${theme.colors.background.primary};
- button {
- pointer-events: ${isResizeInProgress ? 'none' : 'auto'};
- border: none;
- outline: none;
- height: 37px;
- font-size: 20px;
- background-color: ${theme.colors.background.primary};
- color: ${theme.colors.text.primary};
- border-right: 1px solid ${theme.components.panel.borderColor};
- border-bottom: 1px solid ${theme.components.panel.borderColor};
- transition: background-color 200ms;
- cursor: pointer;
- :hover {
- background-color: ${theme.colors.background.secondary};
- }
- }
- input {
- height: 37px;
- border: 1px solid ${theme.colors.primary.main};
- :focus {
- outline: none;
- }
- }
- `,
- renameColumnInput: css`
- height: 37px;
- border: 1px solid ${theme.colors.primary.main};
- :focus {
- outline: none;
- }
- `,
+ dataEditor: css({
+ '.dvn-scroll-inner > div:nth-child(2)': {
+ // can't avoid type assertion here due to '!important'
+ // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+ pointerEvents: 'none !important' as 'none',
+ },
+ scrollbarColor: `${theme.colors.background.secondary} ${theme.colors.background.primary}`,
+ '::-webkit-scrollbar': {
+ width: '10px',
+ height: '10px',
+ },
+ '::-webkit-scrollbar-track': {
+ background: theme.colors.background.primary,
+ },
+ '::-webkit-scrollbar-thumb': {
+ borderRadius: '10px',
+ },
+ '::-webkit-scrollbar-corner': {
+ display: 'none',
+ },
+ }),
+ addColumnDiv: css({
+ width: '120px',
+ display: 'flex',
+ flexDirection: 'column',
+ backgroundColor: theme.colors.background.primary,
+ button: {
+ pointerEvents: isResizeInProgress ? 'none' : 'auto',
+ border: 'none',
+ outline: 'none',
+ height: '37px',
+ fontSize: '20px',
+ backgroundColor: theme.colors.background.primary,
+ color: theme.colors.text.primary,
+ borderRight: `1px solid ${theme.components.panel.borderColor}`,
+ borderBottom: `1px solid ${theme.components.panel.borderColor}`,
+ transition: 'background-color 200ms',
+ cursor: 'pointer',
+ ':hover': {
+ backgroundColor: theme.colors.background.secondary,
+ },
+ },
+ input: {
+ height: '37px',
+ border: `1px solid ${theme.colors.primary.main}`,
+ ':focus': {
+ outline: 'none',
+ },
+ },
+ }),
+ renameColumnInput: css({
+ height: '37px',
+ border: `1px solid ${theme.colors.primary.main}`,
+ ':focus': {
+ outline: 'none',
+ },
+ }),
};
};
diff --git a/public/app/plugins/panel/gettingstarted/components/DocsCard.tsx b/public/app/plugins/panel/gettingstarted/components/DocsCard.tsx
index ac35ab82388..cb47cbb934e 100644
--- a/public/app/plugins/panel/gettingstarted/components/DocsCard.tsx
+++ b/public/app/plugins/panel/gettingstarted/components/DocsCard.tsx
@@ -42,32 +42,32 @@ export const DocsCard = ({ card }: Props) => {
const getStyles = (theme: GrafanaTheme2, complete: boolean) => {
return {
- card: css`
- ${cardStyle(theme, complete)}
+ card: css({
+ ...cardStyle(theme, complete),
- min-width: 230px;
+ minWidth: '230px',
- ${theme.breakpoints.down('md')} {
- min-width: 192px;
- }
- `,
- heading: css`
- text-transform: uppercase;
- color: ${complete ? theme.v1.palette.blue95 : '#FFB357'};
- margin-bottom: ${theme.spacing(2)};
- `,
- title: css`
- margin-bottom: ${theme.spacing(2)};
- `,
- url: css`
- display: inline-block;
- `,
- learnUrl: css`
- border-top: 1px solid ${theme.colors.border.weak};
- position: absolute;
- bottom: 0;
- padding: 8px 16px;
- width: 100%;
- `,
+ [theme.breakpoints.down('md')]: {
+ minWidth: '192px',
+ },
+ }),
+ heading: css({
+ textTransform: 'uppercase',
+ color: complete ? theme.v1.palette.blue95 : '#FFB357',
+ marginBottom: theme.spacing(2),
+ }),
+ title: css({
+ marginBottom: theme.spacing(2),
+ }),
+ url: css({
+ display: 'inline-block',
+ }),
+ learnUrl: css({
+ borderTop: `1px solid ${theme.colors.border.weak}`,
+ position: 'absolute',
+ bottom: 0,
+ padding: theme.spacing(1, 2),
+ width: '100%',
+ }),
};
};
diff --git a/public/app/plugins/panel/gettingstarted/components/TutorialCard.tsx b/public/app/plugins/panel/gettingstarted/components/TutorialCard.tsx
index cb26eb4ac75..b58279d6c92 100644
--- a/public/app/plugins/panel/gettingstarted/components/TutorialCard.tsx
+++ b/public/app/plugins/panel/gettingstarted/components/TutorialCard.tsx
@@ -45,37 +45,37 @@ const handleTutorialClick = (event: MouseEvent, card: Tutoria
const getStyles = (theme: GrafanaTheme2, complete: boolean) => {
return {
- card: css`
- ${cardStyle(theme, complete)}
- width: 460px;
- min-width: 460px;
+ card: css({
+ ...cardStyle(theme, complete),
+ width: '460px',
+ minWidth: '460px',
- ${theme.breakpoints.down('xl')} {
- min-width: 368px;
- }
+ [theme.breakpoints.down('xl')]: {
+ minWidth: '368px',
+ },
- ${theme.breakpoints.down('lg')} {
- min-width: 272px;
- }
- `,
- type: css`
- color: ${theme.colors.primary.text};
- text-transform: uppercase;
- `,
- heading: css`
- text-transform: uppercase;
- color: ${theme.colors.primary.text};
- margin-bottom: ${theme.spacing(1)};
- `,
- cardTitle: css`
- margin-bottom: ${theme.spacing(2)};
- `,
- info: css`
- margin-bottom: ${theme.spacing(2)};
- `,
- status: css`
- display: flex;
- justify-content: flex-end;
- `,
+ [theme.breakpoints.down('lg')]: {
+ minWidth: '272px',
+ },
+ }),
+ type: css({
+ color: theme.colors.primary.text,
+ textTransform: 'uppercase',
+ }),
+ heading: css({
+ textTransform: 'uppercase',
+ color: theme.colors.primary.text,
+ marginBottom: theme.spacing(1),
+ }),
+ cardTitle: css({
+ marginBottom: theme.spacing(2),
+ }),
+ info: css({
+ marginBottom: theme.spacing(2),
+ }),
+ status: css({
+ display: 'flex',
+ justifyContent: 'flex-end',
+ }),
};
};
diff --git a/public/app/plugins/panel/gettingstarted/components/sharedStyles.ts b/public/app/plugins/panel/gettingstarted/components/sharedStyles.ts
index c82ee8dc78d..44eb809b7b4 100644
--- a/public/app/plugins/panel/gettingstarted/components/sharedStyles.ts
+++ b/public/app/plugins/panel/gettingstarted/components/sharedStyles.ts
@@ -9,31 +9,31 @@ export const cardStyle = (theme: GrafanaTheme2, complete: boolean) => {
const borderGradient = theme.isDark ? darkThemeGradients : lightThemeGradients;
- return `
- background-color: ${theme.colors.background.secondary};
- margin-right: ${theme.spacing(4)};
- border: 1px solid ${theme.colors.border.weak};
- border-bottom-left-radius: ${theme.shape.borderRadius(2)};
- border-bottom-right-radius: ${theme.shape.borderRadius(2)};
- position: relative;
- max-height: 230px;
+ return {
+ backgroundColor: theme.colors.background.secondary,
+ marginRight: theme.spacing(4),
+ border: `1px solid ${theme.colors.border.weak}`,
+ borderBottomLeftRadius: theme.shape.borderRadius(2),
+ borderBottomRightRadius: theme.shape.borderRadius(2),
+ position: 'relative',
+ maxHeight: '230px',
- ${theme.breakpoints.down('xxl')} {
- margin-right: ${theme.spacing(2)};
- }
- &::before {
- display: block;
- content: ' ';
- position: absolute;
- left: 0;
- right: 0;
- height: 2px;
- top: 0;
- background-image: ${borderGradient};
- }
-`;
+ [theme.breakpoints.down('xxl')]: {
+ marginRight: theme.spacing(2),
+ },
+ '&::before': {
+ display: 'block',
+ content: "' '",
+ position: 'absolute',
+ left: 0,
+ right: 0,
+ height: '2px',
+ top: 0,
+ backgroundImage: borderGradient,
+ },
+ } as const;
};
-export const cardContent = css`
- padding: 16px;
-`;
+export const cardContent = css({
+ padding: '16px',
+});
diff --git a/public/app/plugins/panel/live/LiveChannelEditor.tsx b/public/app/plugins/panel/live/LiveChannelEditor.tsx
index 138bea0bfd4..d5ba8f45fe1 100644
--- a/public/app/plugins/panel/live/LiveChannelEditor.tsx
+++ b/public/app/plugins/panel/live/LiveChannelEditor.tsx
@@ -156,7 +156,7 @@ function findPathOption(paths: Array>, path?: string): S
}
const getStyles = stylesFactory((theme: GrafanaTheme2) => ({
- dropWrap: css`
- margin-bottom: ${theme.spacing(1)};
- `,
+ dropWrap: css({
+ marginBottom: theme.spacing(1),
+ }),
}));
diff --git a/public/app/plugins/panel/live/LivePanel.tsx b/public/app/plugins/panel/live/LivePanel.tsx
index c2f2a54b6d9..98c9b99a32f 100644
--- a/public/app/plugins/panel/live/LivePanel.tsx
+++ b/public/app/plugins/panel/live/LivePanel.tsx
@@ -269,33 +269,33 @@ export class LivePanel extends PureComponent {
}
const getStyles = stylesFactory((theme: GrafanaTheme2) => ({
- statusWrap: css`
- margin: auto;
- position: absolute;
- top: 0;
- right: 0;
- background: ${theme.components.panel.background};
- padding: 10px;
- z-index: ${theme.zIndex.modal};
- `,
+ statusWrap: css({
+ margin: 'auto',
+ position: 'absolute',
+ top: 0,
+ right: 0,
+ background: theme.components.panel.background,
+ padding: '10px',
+ zIndex: theme.zIndex.modal,
+ }),
status: {
- [LiveChannelConnectionState.Pending]: css`
- border: 1px solid ${theme.v1.palette.orange};
- `,
- [LiveChannelConnectionState.Connected]: css`
- border: 1px solid ${theme.colors.success.main};
- `,
- [LiveChannelConnectionState.Connecting]: css`
- border: 1px solid ${theme.v1.palette.brandWarning};
- `,
- [LiveChannelConnectionState.Disconnected]: css`
- border: 1px solid ${theme.colors.warning.main};
- `,
- [LiveChannelConnectionState.Shutdown]: css`
- border: 1px solid ${theme.colors.error.main};
- `,
- [LiveChannelConnectionState.Invalid]: css`
- border: 1px solid red;
- `,
+ [LiveChannelConnectionState.Pending]: css({
+ border: `1px solid ${theme.v1.palette.orange}`,
+ }),
+ [LiveChannelConnectionState.Connected]: css({
+ border: `1px solid ${theme.colors.success.main}`,
+ }),
+ [LiveChannelConnectionState.Connecting]: css({
+ border: `1px solid ${theme.v1.palette.brandWarning}`,
+ }),
+ [LiveChannelConnectionState.Disconnected]: css({
+ border: `1px solid ${theme.colors.warning.main}`,
+ }),
+ [LiveChannelConnectionState.Shutdown]: css({
+ border: `1px solid ${theme.colors.error.main}`,
+ }),
+ [LiveChannelConnectionState.Invalid]: css({
+ border: '1px solid red',
+ }),
},
}));
diff --git a/public/app/plugins/panel/nodeGraph/EdgeLabel.tsx b/public/app/plugins/panel/nodeGraph/EdgeLabel.tsx
index e2f29d8689e..ee727b4f79b 100644
--- a/public/app/plugins/panel/nodeGraph/EdgeLabel.tsx
+++ b/public/app/plugins/panel/nodeGraph/EdgeLabel.tsx
@@ -10,18 +10,18 @@ import { shortenLine } from './utils';
const getStyles = (theme: GrafanaTheme2) => {
return {
- mainGroup: css`
- pointer-events: none;
- font-size: 8px;
- `,
+ mainGroup: css({
+ pointerEvents: 'none',
+ fontSize: '8px',
+ }),
- background: css`
- fill: ${theme.components.tooltip.background};
- `,
+ background: css({
+ fill: theme.components.tooltip.background,
+ }),
- text: css`
- fill: ${theme.components.tooltip.text};
- `,
+ text: css({
+ fill: theme.components.tooltip.text,
+ }),
};
};
diff --git a/public/app/plugins/panel/nodeGraph/Legend.tsx b/public/app/plugins/panel/nodeGraph/Legend.tsx
index a899a0fb383..7b8ffaec1a9 100644
--- a/public/app/plugins/panel/nodeGraph/Legend.tsx
+++ b/public/app/plugins/panel/nodeGraph/Legend.tsx
@@ -10,15 +10,15 @@ import { NodeDatum } from './types';
function getStyles() {
return {
- item: css`
- label: LegendItem;
- flex-grow: 0;
- `,
+ item: css({
+ label: 'LegendItem',
+ flexGrow: 0,
+ }),
- legend: css`
- label: Legend;
- pointer-events: all;
- `,
+ legend: css({
+ label: 'Legend',
+ pointerEvents: 'all',
+ }),
};
}
diff --git a/public/app/plugins/panel/nodeGraph/Marker.tsx b/public/app/plugins/panel/nodeGraph/Marker.tsx
index c08967bb6a9..7f926fc33f7 100644
--- a/public/app/plugins/panel/nodeGraph/Marker.tsx
+++ b/public/app/plugins/panel/nodeGraph/Marker.tsx
@@ -9,23 +9,23 @@ import { NodesMarker } from './types';
const nodeR = 40;
const getStyles = (theme: GrafanaTheme2) => ({
- mainGroup: css`
- cursor: pointer;
- font-size: 10px;
- `,
+ mainGroup: css({
+ cursor: 'pointer',
+ fontSize: '10px',
+ }),
- mainCircle: css`
- fill: ${theme.components.panel.background};
- stroke: ${theme.colors.border.strong};
- `,
- text: css`
- width: 50px;
- height: 50px;
- text-align: center;
- display: flex;
- align-items: center;
- justify-content: center;
- `,
+ mainCircle: css({
+ fill: theme.components.panel.background,
+ stroke: theme.colors.border.strong,
+ }),
+ text: css({
+ width: '50px',
+ height: '50px',
+ textAlign: 'center',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ }),
});
export const Marker = memo(function Marker(props: {
diff --git a/public/app/plugins/panel/nodeGraph/Node.tsx b/public/app/plugins/panel/nodeGraph/Node.tsx
index 42c6bd6485a..266f43918d3 100644
--- a/public/app/plugins/panel/nodeGraph/Node.tsx
+++ b/public/app/plugins/panel/nodeGraph/Node.tsx
@@ -14,61 +14,63 @@ export const nodeR = 40;
export const highlightedNodeColor = '#a00';
const getStyles = (theme: GrafanaTheme2, hovering: HoverState) => ({
- mainGroup: css`
- cursor: pointer;
- font-size: 10px;
- transition: opacity 300ms;
- opacity: ${hovering === 'inactive' ? 0.5 : 1};
- `,
+ mainGroup: css({
+ cursor: 'pointer',
+ fontSize: '10px',
+ [theme.transitions.handleMotion('no-preference', 'reduce')]: {
+ transition: 'opacity 300ms',
+ },
+ opacity: hovering === 'inactive' ? 0.5 : 1,
+ }),
- mainCircle: css`
- fill: ${theme.components.panel.background};
- `,
+ mainCircle: css({
+ fill: theme.components.panel.background,
+ }),
- filledCircle: css`
- fill: ${highlightedNodeColor};
- `,
+ filledCircle: css({
+ fill: highlightedNodeColor,
+ }),
- hoverCircle: css`
- opacity: 0.5;
- fill: transparent;
- stroke: ${theme.colors.primary.text};
- `,
+ hoverCircle: css({
+ opacity: 0.5,
+ fill: 'transparent',
+ stroke: theme.colors.primary.text,
+ }),
- text: css`
- fill: ${theme.colors.text.primary};
- pointer-events: none;
- `,
+ text: css({
+ fill: theme.colors.text.primary,
+ pointerEvents: 'none',
+ }),
- titleText: css`
- text-align: center;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- background-color: ${tinycolor(theme.colors.background.primary).setAlpha(0.6).toHex8String()};
- width: 140px;
- `,
+ titleText: css({
+ textAlign: 'center',
+ textOverflow: 'ellipsis',
+ overflow: 'hidden',
+ whiteSpace: 'nowrap',
+ backgroundColor: tinycolor(theme.colors.background.primary).setAlpha(0.6).toHex8String(),
+ width: '140px',
+ }),
- statsText: css`
- text-align: center;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- width: 70px;
- `,
+ statsText: css({
+ textAlign: 'center',
+ textOverflow: 'ellipsis',
+ overflow: 'hidden',
+ whiteSpace: 'nowrap',
+ width: '70px',
+ }),
- textHovering: css`
- width: 200px;
- & span {
- background-color: ${tinycolor(theme.colors.background.primary).setAlpha(0.8).toHex8String()};
- }
- `,
+ textHovering: css({
+ width: '200px',
+ '& span': {
+ backgroundColor: tinycolor(theme.colors.background.primary).setAlpha(0.8).toHex8String(),
+ },
+ }),
- clickTarget: css`
- fill: none;
- stroke: none;
- pointer-events: fill;
- `,
+ clickTarget: css({
+ fill: 'none',
+ stroke: 'none',
+ pointerEvents: 'fill',
+ }),
});
export const computeNodeCircumferenceStrokeWidth = (nodeRadius: number) => Math.ceil(nodeRadius * 0.075);
diff --git a/public/app/plugins/panel/nodeGraph/NodeGraph.tsx b/public/app/plugins/panel/nodeGraph/NodeGraph.tsx
index b2fca164129..8dfd9d6199d 100644
--- a/public/app/plugins/panel/nodeGraph/NodeGraph.tsx
+++ b/public/app/plugins/panel/nodeGraph/NodeGraph.tsx
@@ -23,83 +23,83 @@ import { useZoom } from './useZoom';
import { processNodes, Bounds, findConnectedNodesForEdge, findConnectedNodesForNode } from './utils';
const getStyles = (theme: GrafanaTheme2) => ({
- wrapper: css`
- label: wrapper;
- height: 100%;
- width: 100%;
- overflow: hidden;
- position: relative;
- `,
+ wrapper: css({
+ label: 'wrapper',
+ height: '100%',
+ width: '100%',
+ overflow: 'hidden',
+ position: 'relative',
+ }),
- svg: css`
- label: svg;
- height: 100%;
- width: 100%;
- overflow: visible;
- font-size: 10px;
- cursor: move;
- `,
+ svg: css({
+ label: 'svg',
+ height: '100%',
+ width: '100%',
+ overflow: 'visible',
+ fontSize: '10px',
+ cursor: 'move',
+ }),
- svgPanning: css`
- label: svgPanning;
- user-select: none;
- `,
+ svgPanning: css({
+ label: 'svgPanning',
+ userSelect: 'none',
+ }),
- noDataMsg: css`
- height: 100%;
- width: 100%;
- display: grid;
- place-items: center;
- font-size: ${theme.typography.h4.fontSize};
- color: ${theme.colors.text.secondary};
- `,
+ noDataMsg: css({
+ height: '100%',
+ width: '100%',
+ display: 'grid',
+ placeItems: 'center',
+ fontSize: theme.typography.h4.fontSize,
+ color: theme.colors.text.secondary,
+ }),
- mainGroup: css`
- label: mainGroup;
- will-change: transform;
- `,
+ mainGroup: css({
+ label: 'mainGroup',
+ willChange: 'transform',
+ }),
- viewControls: css`
- label: viewControls;
- position: absolute;
- left: 2px;
- bottom: 3px;
- right: 0;
- display: flex;
- align-items: flex-end;
- justify-content: space-between;
- pointer-events: none;
- `,
- legend: css`
- label: legend;
- background: ${theme.colors.background.secondary};
- box-shadow: ${theme.shadows.z1};
- padding-bottom: 5px;
- margin-right: 10px;
- `,
- viewControlsWrapper: css`
- margin-left: auto;
- `,
- alert: css`
- label: alert;
- padding: 5px 8px;
- font-size: 10px;
- text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
- border-radius: ${theme.shape.radius.default};
- align-items: center;
- position: absolute;
- top: 0;
- right: 0;
- background: ${theme.colors.warning.main};
- color: ${theme.colors.warning.contrastText};
- `,
- loadingWrapper: css`
- label: loadingWrapper;
- height: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- `,
+ viewControls: css({
+ label: 'viewControls',
+ position: 'absolute',
+ left: '2px',
+ bottom: '3px',
+ right: 0,
+ display: 'flex',
+ alignItems: 'flex-end',
+ justifyContent: 'space-between',
+ pointerEvents: 'none',
+ }),
+ legend: css({
+ label: 'legend',
+ background: theme.colors.background.secondary,
+ boxShadow: theme.shadows.z1,
+ paddingBottom: '5px',
+ marginRight: '10px',
+ }),
+ viewControlsWrapper: css({
+ marginLeft: 'auto',
+ }),
+ alert: css({
+ label: 'alert',
+ padding: '5px 8px',
+ fontSize: '10px',
+ textShadow: '0 1px 0 rgba(0, 0, 0, 0.2)',
+ borderRadius: theme.shape.radius.default,
+ alignItems: 'center',
+ position: 'absolute',
+ top: 0,
+ right: 0,
+ background: theme.colors.warning.main,
+ color: theme.colors.warning.contrastText,
+ }),
+ loadingWrapper: css({
+ label: 'loadingWrapper',
+ height: '100%',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ }),
});
// Limits the number of visible nodes, mainly for performance reasons. Nodes above the limit are accessible by expanding
diff --git a/public/app/plugins/panel/nodeGraph/ViewControls.tsx b/public/app/plugins/panel/nodeGraph/ViewControls.tsx
index b80b09af624..98b39f78ceb 100644
--- a/public/app/plugins/panel/nodeGraph/ViewControls.tsx
+++ b/public/app/plugins/panel/nodeGraph/ViewControls.tsx
@@ -5,10 +5,10 @@ import { Button, HorizontalGroup, useStyles2, VerticalGroup } from '@grafana/ui'
function getStyles() {
return {
- wrapper: css`
- label: wrapper;
- pointer-events: all;
- `,
+ wrapper: css({
+ label: 'wrapper',
+ pointerEvents: 'all',
+ }),
};
}
diff --git a/public/app/plugins/panel/nodeGraph/editor/ArcOptionsEditor.tsx b/public/app/plugins/panel/nodeGraph/editor/ArcOptionsEditor.tsx
index e13773bdf9b..aaf8283cb72 100644
--- a/public/app/plugins/panel/nodeGraph/editor/ArcOptionsEditor.tsx
+++ b/public/app/plugins/panel/nodeGraph/editor/ArcOptionsEditor.tsx
@@ -1,6 +1,6 @@
import { css } from '@emotion/css';
-import { Field, StandardEditorProps } from '@grafana/data';
+import { Field, GrafanaTheme2, StandardEditorProps } from '@grafana/data';
import { Button, ColorPicker, useStyles2 } from '@grafana/ui';
import { FieldNamePicker } from '@grafana/ui/src/components/MatchersUI/FieldNamePicker';
@@ -65,14 +65,14 @@ export const ArcOptionsEditor = ({ value, onChange, context }: ArcOptionsEditorP
);
};
-const getStyles = () => {
+const getStyles = (theme: GrafanaTheme2) => {
return {
- section: css`
- display: flex;
- align-items: center;
- justify-content: space-between;
- gap: 0 8px;
- margin-bottom: 8px;
- `,
+ section: css({
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ gap: `0 ${theme.spacing(1)}`,
+ marginBottom: theme.spacing(1),
+ }),
};
};
diff --git a/public/app/plugins/panel/nodeGraph/useContextMenu.tsx b/public/app/plugins/panel/nodeGraph/useContextMenu.tsx
index 2aeb57981aa..01aaa549917 100644
--- a/public/app/plugins/panel/nodeGraph/useContextMenu.tsx
+++ b/public/app/plugins/panel/nodeGraph/useContextMenu.tsx
@@ -251,19 +251,19 @@ function EdgeHeader(props: { edge: EdgeDatumLayout; edges: DataFrame }) {
export const getLabelStyles = (theme: GrafanaTheme2) => {
return {
- label: css`
- label: Label;
- line-height: 1.25;
- color: ${theme.colors.text.disabled};
- font-size: ${theme.typography.size.sm};
- font-weight: ${theme.typography.fontWeightMedium};
- padding-right: ${theme.spacing(1)};
- `,
- value: css`
- label: Value;
- font-size: ${theme.typography.size.sm};
- font-weight: ${theme.typography.fontWeightMedium};
- color: ${theme.colors.text.primary};
- `,
+ label: css({
+ label: 'Label',
+ lineHeight: 1.25,
+ color: theme.colors.text.disabled,
+ fontSize: theme.typography.size.sm,
+ fontWeight: theme.typography.fontWeightMedium,
+ paddingRight: theme.spacing(1),
+ }),
+ value: css({
+ label: 'Value',
+ fontSize: theme.typography.size.sm,
+ fontWeight: theme.typography.fontWeightMedium,
+ color: theme.colors.text.primary,
+ }),
};
};
diff --git a/public/app/plugins/panel/piechart/PieChart.tsx b/public/app/plugins/panel/piechart/PieChart.tsx
index 3b980dd9543..75c10a7158e 100644
--- a/public/app/plugins/panel/piechart/PieChart.tsx
+++ b/public/app/plugins/panel/piechart/PieChart.tsx
@@ -423,28 +423,32 @@ function getSvgStyle(
const getStyles = (theme: GrafanaTheme2) => {
return {
- container: css`
- width: 100%;
- height: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- `,
+ container: css({
+ width: '100%',
+ height: '100%',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ }),
svgArg: {
- normal: css`
- transition: all 200ms ease-in-out;
- `,
- highlighted: css`
- transition: all 200ms ease-in-out;
- transform: scale3d(1.03, 1.03, 1);
- `,
- deemphasized: css`
- transition: all 200ms ease-in-out;
- fill-opacity: 0.5;
- `,
+ normal: css({
+ [theme.transitions.handleMotion('no-preference')]: {
+ transition: 'all 200ms ease-in-out',
+ },
+ }),
+ highlighted: css({
+ [theme.transitions.handleMotion('no-preference')]: {
+ transition: 'all 200ms ease-in-out',
+ },
+ transform: 'scale3d(1.03, 1.03, 1)',
+ }),
+ deemphasized: css({
+ [theme.transitions.handleMotion('no-preference')]: {
+ transition: 'all 200ms ease-in-out',
+ },
+ fillOpacity: 0.5,
+ }),
},
- tooltipPortal: css`
- ${getTooltipContainerStyles(theme)}
- `,
+ tooltipPortal: css(getTooltipContainerStyles(theme)),
};
};
diff --git a/public/app/plugins/panel/table/TablePanel.tsx b/public/app/plugins/panel/table/TablePanel.tsx
index 55de542b01b..546ee64c4c9 100644
--- a/public/app/plugins/panel/table/TablePanel.tsx
+++ b/public/app/plugins/panel/table/TablePanel.tsx
@@ -174,13 +174,13 @@ const getCellActions = (dataFrame: DataFrame, field: Field) => {
};
const tableStyles = {
- wrapper: css`
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- height: 100%;
- `,
- selectWrapper: css`
- padding: 8px 8px 0px 8px;
- `,
+ wrapper: css({
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'space-between',
+ height: '100%',
+ }),
+ selectWrapper: css({
+ padding: '8px 8px 0px 8px',
+ }),
};
diff --git a/public/app/plugins/panel/table/cells/SparklineCellOptionsEditor.tsx b/public/app/plugins/panel/table/cells/SparklineCellOptionsEditor.tsx
index 6a5a41d4189..3f9cd082e9b 100644
--- a/public/app/plugins/panel/table/cells/SparklineCellOptionsEditor.tsx
+++ b/public/app/plugins/panel/table/cells/SparklineCellOptionsEditor.tsx
@@ -81,14 +81,14 @@ function isOptionKey(key: string, options: TableSparklineCellOptions): key is Op
}
const getStyles = () => ({
- field: css`
- width: 100%;
+ field: css({
+ width: '100%',
// @TODO don't show "scheme" option for custom gradient mode.
// it needs thresholds to work, which are not supported
// for area chart cell right now
- [title='Use color scheme to define gradient'] {
- display: none;
- }
- `,
+ "[title='Use color scheme to define gradient']": {
+ display: 'none',
+ },
+ }),
});
diff --git a/public/app/plugins/panel/text/TextPanel.tsx b/public/app/plugins/panel/text/TextPanel.tsx
index 4f0c15ffcec..c06ad8506fa 100644
--- a/public/app/plugins/panel/text/TextPanel.tsx
+++ b/public/app/plugins/panel/text/TextPanel.tsx
@@ -93,17 +93,16 @@ function processContent(options: Options, interpolate: InterpolateFunction, disa
}
const getStyles = (theme: GrafanaTheme2) => ({
- codeEditorContainer: css`
- .monaco-editor .margin,
- .monaco-editor-background {
- background-color: ${theme.colors.background.primary};
- }
- `,
+ codeEditorContainer: css({
+ '.monaco-editor .margin, .monaco-editor-background': {
+ backgroundColor: theme.colors.background.primary,
+ },
+ }),
markdown: cx(
'markdown-html',
- css`
- height: 100%;
- `
+ css({
+ height: '100%',
+ })
),
containStrict: css({
contain: 'strict',
diff --git a/public/app/plugins/panel/text/TextPanelEditor.tsx b/public/app/plugins/panel/text/TextPanelEditor.tsx
index dd37e638042..75d8f50810e 100644
--- a/public/app/plugins/panel/text/TextPanelEditor.tsx
+++ b/public/app/plugins/panel/text/TextPanelEditor.tsx
@@ -50,11 +50,11 @@ export const TextPanelEditor = ({ value, onChange, context }: StandardEditorProp
};
const getStyles = (theme: GrafanaTheme2) => ({
- editorBox: css`
- label: editorBox;
- border: 1px solid ${theme.colors.border.medium};
- border-radius: ${theme.shape.radius.default};
- margin: ${theme.spacing(0.5)} 0;
- width: 100%;
- `,
+ editorBox: css({
+ label: 'editorBox',
+ border: `1px solid ${theme.colors.border.medium}`,
+ borderRadius: theme.shape.radius.default,
+ margin: theme.spacing(0.5, 0),
+ width: '100%',
+ }),
});
diff --git a/public/app/plugins/panel/timeseries/plugins/ThresholdDragHandle.tsx b/public/app/plugins/panel/timeseries/plugins/ThresholdDragHandle.tsx
index d7da47bd24d..4d936a6a10b 100644
--- a/public/app/plugins/panel/timeseries/plugins/ThresholdDragHandle.tsx
+++ b/public/app/plugins/panel/timeseries/plugins/ThresholdDragHandle.tsx
@@ -88,83 +88,83 @@ const getStyles = (theme: GrafanaTheme2, step: Threshold, outOfBounds: OutOfBoun
const isOutOfBounds = outOfBounds !== 'none';
return {
- handle: css`
- display: flex;
- align-items: center;
- position: absolute;
- left: 0;
- width: calc(100% - 9px);
- height: 18px;
- margin-top: -9px;
- border-color: ${mainColor};
- cursor: ${disabled ? 'initial' : 'grab'};
- border-top-right-radius: ${theme.shape.radius.default};
- border-bottom-right-radius: ${theme.shape.radius.default};
- ${isOutOfBounds &&
- css`
- margin-top: 0;
- border-radius: ${theme.shape.radius.default};
- `}
- background: ${mainColor};
- font-size: ${theme.typography.bodySmall.fontSize};
- &:before {
- ${arrowStyles};
+ handle: css(
+ {
+ display: 'flex',
+ alignItems: 'center',
+ position: 'absolute',
+ left: 0,
+ width: 'calc(100% - 9px)',
+ height: '18px',
+ marginTop: '-9px',
+ borderColor: mainColor,
+ cursor: disabled ? 'initial' : 'grab',
+ borderTopRightRadius: theme.shape.radius.default,
+ borderBottomRightRadius: theme.shape.radius.default,
+ background: mainColor,
+ fontSize: theme.typography.bodySmall.fontSize,
+ '&:before': arrowStyles,
+ },
+ isOutOfBounds && {
+ marginTop: 0,
+ borderRadius: theme.shape.radius.default,
}
- `,
- handleText: css`
- text-align: center;
- width: 100%;
- display: block;
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
- `,
+ ),
+ handleText: css({
+ textAlign: 'center',
+ width: '100%',
+ display: 'block',
+ textOverflow: 'ellipsis',
+ whiteSpace: 'nowrap',
+ overflow: 'hidden',
+ }),
};
};
function getArrowStyles(outOfBounds: OutOfBounds) {
const inBounds = outOfBounds === 'none';
- const triangle = (size: number) => css`
- content: '';
- position: absolute;
+ const triangle = (size: number) =>
+ ({
+ content: "''",
+ position: 'absolute',
- bottom: 0;
- top: 0;
- width: 0;
- height: 0;
- left: 0;
+ bottom: 0,
+ top: 0,
+ width: 0,
+ height: 0,
+ left: 0,
- border-right-style: solid;
- border-right-width: ${size}px;
- border-right-color: inherit;
- border-top: ${size}px solid transparent;
- border-bottom: ${size}px solid transparent;
- `;
+ borderRightStyle: 'solid',
+ borderRightWidth: `${size}px`,
+ borderRightColor: 'inherit',
+ borderTop: `${size}px solid transparent`,
+ borderBottom: `${size}px solid transparent`,
+ }) as const;
if (inBounds) {
- return css`
- ${triangle(9)};
- left: -9px;
- `;
+ return css({
+ ...triangle(9),
+ left: '-9px',
+ });
}
if (outOfBounds === 'top') {
- return css`
- ${triangle(5)};
- left: calc(50% - 2.5px);
- top: -7px;
- transform: rotate(90deg);
- `;
+ return css({
+ ...triangle(5),
+ left: 'calc(50% - 2.5px)',
+ top: '-7px',
+ transform: 'rotate(90deg)',
+ });
}
if (outOfBounds === 'bottom') {
- return css`
- ${triangle(5)};
- left: calc(50% - 2.5px);
- top: calc(100% - 2.5px);
- transform: rotate(-90deg);
- `;
+ return css({
+ ...triangle(5),
+ left: 'calc(50% - 2.5px)',
+ top: 'calc(100% - 2.5px)',
+ transform: 'rotate(-90deg)',
+ });
}
return '';
diff --git a/public/app/plugins/panel/traces/TracesPanel.tsx b/public/app/plugins/panel/traces/TracesPanel.tsx
index 3053413e053..b7be2cba6fb 100644
--- a/public/app/plugins/panel/traces/TracesPanel.tsx
+++ b/public/app/plugins/panel/traces/TracesPanel.tsx
@@ -9,10 +9,10 @@ import { SpanLinkFunc } from 'app/features/explore/TraceView/components';
import { transformDataFrames } from 'app/features/explore/TraceView/utils/transform';
const styles = {
- wrapper: css`
- height: 100%;
- overflow: scroll;
- `,
+ wrapper: css({
+ height: '100%',
+ overflow: 'scroll',
+ }),
};
export interface TracesPanelOptions {
diff --git a/public/app/plugins/panel/welcome/Welcome.tsx b/public/app/plugins/panel/welcome/Welcome.tsx
index 708678032c0..a69910c7d39 100644
--- a/public/app/plugins/panel/welcome/Welcome.tsx
+++ b/public/app/plugins/panel/welcome/Welcome.tsx
@@ -38,69 +38,67 @@ export const WelcomeBanner = () => {
const getStyles = (theme: GrafanaTheme2) => {
return {
- container: css`
- display: flex;
- /// background: url(public/img/g8_home_v2.svg) no-repeat;
- background-size: cover;
- height: 100%;
- align-items: center;
- padding: 0 16px;
- justify-content: space-between;
- padding: 0 ${theme.spacing(3)};
+ container: css({
+ display: 'flex',
+ backgroundSize: 'cover',
+ height: '100%',
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ padding: theme.spacing(0, 3),
- ${theme.breakpoints.down('lg')} {
- background-position: 0px;
- flex-direction: column;
- align-items: flex-start;
- justify-content: center;
- }
+ [theme.breakpoints.down('lg')]: {
+ backgroundPosition: '0px',
+ flexDirection: 'column',
+ alignItems: 'flex-start',
+ justifyContent: 'center',
+ },
- ${theme.breakpoints.down('sm')} {
- padding: 0 ${theme.spacing(1)};
- }
- `,
- title: css`
- margin-bottom: 0;
+ [theme.breakpoints.down('sm')]: {
+ padding: theme.spacing(0, 1),
+ },
+ }),
+ title: css({
+ marginBottom: 0,
- ${theme.breakpoints.down('lg')} {
- margin-bottom: ${theme.spacing(1)};
- }
+ [theme.breakpoints.down('lg')]: {
+ marginBottom: theme.spacing(1),
+ },
- ${theme.breakpoints.down('md')} {
- font-size: ${theme.typography.h2.fontSize};
- }
- ${theme.breakpoints.down('sm')} {
- font-size: ${theme.typography.h3.fontSize};
- }
- `,
- help: css`
- display: flex;
- align-items: baseline;
- `,
- helpText: css`
- margin-right: ${theme.spacing(2)};
- margin-bottom: 0;
+ [theme.breakpoints.down('md')]: {
+ fontSize: theme.typography.h2.fontSize,
+ },
+ [theme.breakpoints.down('sm')]: {
+ fontSize: theme.typography.h3.fontSize,
+ },
+ }),
+ help: css({
+ display: 'flex',
+ alignItems: 'baseline',
+ }),
+ helpText: css({
+ marginRight: theme.spacing(2),
+ marginBottom: 0,
- ${theme.breakpoints.down('md')} {
- font-size: ${theme.typography.h4.fontSize};
- }
+ [theme.breakpoints.down('md')]: {
+ fontSize: theme.typography.h4.fontSize,
+ },
- ${theme.breakpoints.down('sm')} {
- display: none;
- }
- `,
- helpLinks: css`
- display: flex;
- flex-wrap: wrap;
- `,
- helpLink: css`
- margin-right: ${theme.spacing(2)};
- text-decoration: underline;
- text-wrap: no-wrap;
+ [theme.breakpoints.down('sm')]: {
+ display: 'none',
+ },
+ }),
+ helpLinks: css({
+ display: 'flex',
+ flexWrap: 'wrap',
+ }),
+ helpLink: css({
+ marginRight: theme.spacing(2),
+ textDecoration: 'underline',
+ textWrap: 'nowrap',
- ${theme.breakpoints.down('sm')} {
- margin-right: 8px;
- }
- `,
+ [theme.breakpoints.down('sm')]: {
+ marginRight: theme.spacing(1),
+ },
+ }),
};
};
diff --git a/public/app/plugins/panel/xychart/AutoEditor.tsx b/public/app/plugins/panel/xychart/AutoEditor.tsx
index bf4b7773a88..07632384c9b 100644
--- a/public/app/plugins/panel/xychart/AutoEditor.tsx
+++ b/public/app/plugins/panel/xychart/AutoEditor.tsx
@@ -141,25 +141,25 @@ export const AutoEditor = ({ value, onChange, context }: StandardEditorProps ({
- sorter: css`
- margin-top: 10px;
- display: flex;
- flex-direction: row;
- flex-wrap: nowrap;
- align-items: center;
- cursor: pointer;
- `,
+ sorter: css({
+ marginTop: '10px',
+ display: 'flex',
+ flexDirection: 'row',
+ flexWrap: 'nowrap',
+ alignItems: 'center',
+ cursor: 'pointer',
+ }),
- row: css`
- padding: ${theme.spacing(0.5, 1)};
- border-radius: ${theme.shape.radius.default};
- background: ${theme.colors.background.secondary};
- min-height: ${theme.spacing(4)};
- display: flex;
- flex-direction: row;
- flex-wrap: nowrap;
- align-items: center;
- margin-bottom: 3px;
- border: 1px solid ${theme.components.input.borderColor};
- `,
+ row: css({
+ padding: theme.spacing(0.5, 1),
+ borderRadius: theme.shape.radius.default,
+ background: theme.colors.background.secondary,
+ minHeight: theme.spacing(4),
+ display: 'flex',
+ flexDirection: 'row',
+ flexWrap: 'nowrap',
+ alignItems: 'center',
+ marginBottom: '3px',
+ border: `1px solid ${theme.components.input.borderColor}`,
+ }),
});