From 05ceff5188d97e617668e84c820d0c7af8a2b934 Mon Sep 17 00:00:00 2001 From: kay delaney <45561153+kaydelaney@users.noreply.github.com> Date: Wed, 26 Oct 2022 13:28:12 +0100 Subject: [PATCH] Chore: Migrate usage of v1 themes to v2 (#57617) --- .../src/components/Gauge/Gauge.test.tsx | 6 ++-- .../grafana-ui/src/components/Gauge/Gauge.tsx | 10 +++--- .../src/components/Table/Filter.tsx | 14 ++++---- .../configuration/LokiSearchSettings.tsx | 12 +++---- .../tempo/configuration/SearchSettings.tsx | 4 +-- .../configuration/ServiceGraphSettings.tsx | 12 +++---- .../app/plugins/panel/alertlist/AlertList.tsx | 32 ++++++++--------- .../panel/alertlist/UnifiedAlertList.tsx | 32 ++++++++--------- .../unified-alerting/UngroupedView.tsx | 2 +- .../plugins/panel/annolist/AnnoListPanel.tsx | 10 +++--- .../app/plugins/panel/canvas/InlineEdit.tsx | 2 +- .../canvas/editor/TreeNavigationEditor.tsx | 2 +- .../panel/canvas/editor/TreeNodeTitle.tsx | 8 ++--- .../app/plugins/panel/canvas/globalStyles.ts | 14 ++++---- public/app/plugins/panel/gauge/GaugePanel.tsx | 2 +- .../panel/geomap/components/DebugOverlay.tsx | 10 +++--- .../panel/gettingstarted/GettingStarted.tsx | 34 +++++++++--------- .../gettingstarted/components/DocsCard.tsx | 28 +++++++-------- .../panel/gettingstarted/components/Step.tsx | 21 ++++++----- .../components/TutorialCard.tsx | 30 ++++++++-------- .../gettingstarted/components/sharedStyles.ts | 35 +++++++++---------- .../app/plugins/panel/graph/data_processor.ts | 2 +- public/app/plugins/panel/graph/module.ts | 2 +- .../plugins/panel/graph/threshold_manager.ts | 8 ++--- .../plugins/panel/graph/thresholds_form.ts | 4 +-- .../panel/graph/time_region_manager.ts | 6 ++-- .../plugins/panel/heatmap-old/color_legend.ts | 2 +- .../plugins/panel/heatmap-old/rendering.ts | 2 +- .../plugins/panel/live/LiveChannelEditor.tsx | 8 ++--- public/app/plugins/panel/live/LivePanel.tsx | 18 +++++----- public/app/plugins/panel/nodeGraph/Legend.tsx | 10 +++--- 31 files changed, 189 insertions(+), 193 deletions(-) diff --git a/packages/grafana-ui/src/components/Gauge/Gauge.test.tsx b/packages/grafana-ui/src/components/Gauge/Gauge.test.tsx index 19a0ede4b44..0a337707c36 100644 --- a/packages/grafana-ui/src/components/Gauge/Gauge.test.tsx +++ b/packages/grafana-ui/src/components/Gauge/Gauge.test.tsx @@ -1,9 +1,7 @@ import { render } from '@testing-library/react'; import React from 'react'; -import { ThresholdsMode, FieldConfig, FieldColorModeId } from '@grafana/data'; - -import { getTheme } from '../../themes'; +import { ThresholdsMode, FieldConfig, FieldColorModeId, createTheme } from '@grafana/data'; import { Gauge, Props } from './Gauge'; @@ -33,7 +31,7 @@ const props: Props = { text: '25', numeric: 25, }, - theme: getTheme(), + theme: createTheme({ colors: { mode: 'dark' } }), }; describe('Gauge', () => { diff --git a/packages/grafana-ui/src/components/Gauge/Gauge.tsx b/packages/grafana-ui/src/components/Gauge/Gauge.tsx index ebdcf84e6ff..39e7a80808e 100644 --- a/packages/grafana-ui/src/components/Gauge/Gauge.tsx +++ b/packages/grafana-ui/src/components/Gauge/Gauge.tsx @@ -8,15 +8,16 @@ import { ThresholdsMode, GAUGE_DEFAULT_MAXIMUM, GAUGE_DEFAULT_MINIMUM, + GrafanaTheme, + GrafanaTheme2, } from '@grafana/data'; import { VizTextDisplayOptions } from '@grafana/schema'; -import { Themeable } from '../../types'; import { calculateFontSize } from '../../utils/measureText'; import { calculateGaugeAutoProps, DEFAULT_THRESHOLDS, getFormattedThresholds } from './utils'; -export interface Props extends Themeable { +export interface Props { height: number; field: FieldConfig; showThresholdMarkers: boolean; @@ -26,6 +27,7 @@ export interface Props extends Themeable { text?: VizTextDisplayOptions; onClick?: React.MouseEventHandler; className?: string; + theme: GrafanaTheme | GrafanaTheme2; } export class Gauge extends PureComponent { @@ -54,7 +56,7 @@ export class Gauge extends PureComponent { const autoProps = calculateGaugeAutoProps(width, height, value.title); const dimension = Math.min(width, autoProps.gaugeHeight); - const backgroundColor = theme.colors.bg2; + const backgroundColor = 'v1' in theme ? theme.colors.background.secondary : theme.colors.bg2; const gaugeWidthReduceRatio = showThresholdLabels ? 1.5 : 1; const gaugeWidth = Math.min(dimension / 5.5, 40) / gaugeWidthReduceRatio; const thresholdMarkersWidth = gaugeWidth / 5; @@ -120,7 +122,7 @@ export class Gauge extends PureComponent { formatter: () => { return text; }, - font: { size: fontSize, family: theme.typography.fontFamily.sansSerif }, + font: { size: fontSize, family: theme.typography.fontFamily }, }, show: true, }, diff --git a/packages/grafana-ui/src/components/Table/Filter.tsx b/packages/grafana-ui/src/components/Table/Filter.tsx index 5fc06033c45..dacbb223d36 100644 --- a/packages/grafana-ui/src/components/Table/Filter.tsx +++ b/packages/grafana-ui/src/components/Table/Filter.tsx @@ -1,10 +1,10 @@ import { css, cx } from '@emotion/css'; import React, { FC, useCallback, useMemo, useRef, useState } from 'react'; -import { Field, GrafanaTheme } from '@grafana/data'; +import { Field, GrafanaTheme2 } from '@grafana/data'; import { Popover } from '..'; -import { stylesFactory, useStyles } from '../../themes'; +import { useStyles2 } from '../../themes'; import { Icon } from '../Icon/Icon'; import { FilterPopup } from './FilterPopup'; @@ -19,7 +19,7 @@ interface Props { export const Filter: FC = ({ column, field, tableStyles }) => { const ref = useRef(null); const [isPopoverVisible, setPopoverVisible] = useState(false); - const styles = useStyles(getStyles); + const styles = useStyles2(getStyles); const filterEnabled = useMemo(() => Boolean(column.filterValue), [column.filterValue]); const onShowPopover = useCallback(() => setPopoverVisible(true), [setPopoverVisible]); const onClosePopover = useCallback(() => setPopoverVisible(false), [setPopoverVisible]); @@ -47,13 +47,13 @@ export const Filter: FC = ({ column, field, tableStyles }) => { ); }; -const getStyles = stylesFactory((theme: GrafanaTheme) => ({ +const getStyles = (theme: GrafanaTheme2) => ({ filterIconEnabled: css` label: filterIconEnabled; - color: ${theme.colors.textBlue}; + color: ${theme.colors.primary.text}; `, filterIconDisabled: css` label: filterIconDisabled; - color: ${theme.colors.textFaint}; + color: ${theme.colors.text.disabled}; `, -})); +}); diff --git a/public/app/plugins/datasource/tempo/configuration/LokiSearchSettings.tsx b/public/app/plugins/datasource/tempo/configuration/LokiSearchSettings.tsx index 7ba69529cbc..62a6ddce16d 100644 --- a/public/app/plugins/datasource/tempo/configuration/LokiSearchSettings.tsx +++ b/public/app/plugins/datasource/tempo/configuration/LokiSearchSettings.tsx @@ -1,16 +1,16 @@ import { css } from '@emotion/css'; import React from 'react'; -import { DataSourcePluginOptionsEditorProps, GrafanaTheme, updateDatasourcePluginJsonDataOption } from '@grafana/data'; +import { DataSourcePluginOptionsEditorProps, GrafanaTheme2, updateDatasourcePluginJsonDataOption } from '@grafana/data'; import { DataSourcePicker } from '@grafana/runtime'; -import { Button, InlineField, InlineFieldRow, useStyles } from '@grafana/ui'; +import { Button, InlineField, InlineFieldRow, useStyles2 } from '@grafana/ui'; import { TempoJsonData } from '../types'; interface Props extends DataSourcePluginOptionsEditorProps {} export function LokiSearchSettings({ options, onOptionsChange }: Props) { - const styles = useStyles(getStyles); + const styles = useStyles2(getStyles); // Default to the trace to logs datasource if configured and loki search was enabled // but only if jsonData.lokiSearch hasn't been set @@ -65,11 +65,11 @@ export function LokiSearchSettings({ options, onOptionsChange }: Props) { ); } -const getStyles = (theme: GrafanaTheme) => ({ +const getStyles = (theme: GrafanaTheme2) => ({ infoText: css` label: infoText; - padding-bottom: ${theme.spacing.md}; - color: ${theme.colors.textSemiWeak}; + padding-bottom: ${theme.spacing(2)}; + color: ${theme.colors.text.secondary}; `, row: css` diff --git a/public/app/plugins/datasource/tempo/configuration/SearchSettings.tsx b/public/app/plugins/datasource/tempo/configuration/SearchSettings.tsx index c77e088f17a..30fd521c854 100644 --- a/public/app/plugins/datasource/tempo/configuration/SearchSettings.tsx +++ b/public/app/plugins/datasource/tempo/configuration/SearchSettings.tsx @@ -2,14 +2,14 @@ import { css } from '@emotion/css'; import React from 'react'; import { DataSourcePluginOptionsEditorProps, updateDatasourcePluginJsonDataOption } from '@grafana/data'; -import { InlineField, InlineFieldRow, InlineSwitch, useStyles } from '@grafana/ui'; +import { InlineField, InlineFieldRow, InlineSwitch, useStyles2 } from '@grafana/ui'; import { TempoJsonData } from '../types'; interface Props extends DataSourcePluginOptionsEditorProps {} export function SearchSettings({ options, onOptionsChange }: Props) { - const styles = useStyles(getStyles); + const styles = useStyles2(getStyles); return (
diff --git a/public/app/plugins/datasource/tempo/configuration/ServiceGraphSettings.tsx b/public/app/plugins/datasource/tempo/configuration/ServiceGraphSettings.tsx index 2e53b9122b0..78d2e8521d9 100644 --- a/public/app/plugins/datasource/tempo/configuration/ServiceGraphSettings.tsx +++ b/public/app/plugins/datasource/tempo/configuration/ServiceGraphSettings.tsx @@ -1,16 +1,16 @@ import { css } from '@emotion/css'; import React from 'react'; -import { DataSourcePluginOptionsEditorProps, GrafanaTheme, updateDatasourcePluginJsonDataOption } from '@grafana/data'; +import { DataSourcePluginOptionsEditorProps, GrafanaTheme2, updateDatasourcePluginJsonDataOption } from '@grafana/data'; import { DataSourcePicker } from '@grafana/runtime'; -import { Button, InlineField, InlineFieldRow, useStyles } from '@grafana/ui'; +import { Button, InlineField, InlineFieldRow, useStyles2 } from '@grafana/ui'; import { TempoJsonData } from '../types'; interface Props extends DataSourcePluginOptionsEditorProps {} export function ServiceGraphSettings({ options, onOptionsChange }: Props) { - const styles = useStyles(getStyles); + const styles = useStyles2(getStyles); return (
@@ -59,11 +59,11 @@ export function ServiceGraphSettings({ options, onOptionsChange }: Props) { ); } -const getStyles = (theme: GrafanaTheme) => ({ +const getStyles = (theme: GrafanaTheme2) => ({ infoText: css` label: infoText; - padding-bottom: ${theme.spacing.md}; - color: ${theme.colors.textSemiWeak}; + padding-bottom: ${theme.spacing(2)}; + color: ${theme.colors.text.secondary}; `, row: css` diff --git a/public/app/plugins/panel/alertlist/AlertList.tsx b/public/app/plugins/panel/alertlist/AlertList.tsx index 7fb813a03b8..9c7e7c8f68f 100644 --- a/public/app/plugins/panel/alertlist/AlertList.tsx +++ b/public/app/plugins/panel/alertlist/AlertList.tsx @@ -3,9 +3,9 @@ import { sortBy } from 'lodash'; import React, { useState } from 'react'; import { useAsync } from 'react-use'; -import { dateMath, dateTime, GrafanaTheme, PanelProps } from '@grafana/data'; +import { dateMath, dateTime, GrafanaTheme2, PanelProps } from '@grafana/data'; import { getBackendSrv, getTemplateSrv } from '@grafana/runtime'; -import { Card, CustomScrollbar, Icon, stylesFactory, useStyles } from '@grafana/ui'; +import { Card, CustomScrollbar, Icon, useStyles2 } from '@grafana/ui'; import alertDef from 'app/features/alerting/state/alertDef'; import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv'; import { AlertRuleDTO, AnnotationItemDTO } from 'app/types'; @@ -134,7 +134,7 @@ export function AlertList(props: PanelProps) { props.options.sortOrder, ]); - const styles = useStyles(getStyles); + const styles = useStyles2(getStyles); return ( @@ -211,10 +211,10 @@ function getStateFilter(stateFilter: Record) { .map(([key, _]) => key); } -const getStyles = stylesFactory((theme: GrafanaTheme) => ({ +const getStyles = (theme: GrafanaTheme2) => ({ cardContainer: css` - padding: ${theme.spacing.xs} 0 ${theme.spacing.xxs} 0; - line-height: ${theme.typography.lineHeight.md}; + padding: ${theme.spacing(0.5)} 0 ${theme.spacing(0.25)} 0; + line-height: ${theme.typography.body.lineHeight}; margin-bottom: 0px; `, container: css` @@ -232,26 +232,26 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({ align-items: center; width: 100%; height: 100%; - background: ${theme.colors.bg2}; - padding: ${theme.spacing.xs} ${theme.spacing.sm}; - border-radius: ${theme.border.radius.md}; - margin-bottom: ${theme.spacing.xs}; + background: ${theme.colors.background.secondary}; + padding: ${theme.spacing(0.5)} ${theme.spacing(1)}; + border-radius: ${theme.shape.borderRadius(2)}; + margin-bottom: ${theme.spacing(0.5)}; `, alertRuleItemIcon: css` display: flex; justify-content: center; align-items: center; - width: ${theme.spacing.xl}; - padding: 0 ${theme.spacing.xs} 0 ${theme.spacing.xxs}; + width: ${theme.spacing(4)}; + padding: 0 ${theme.spacing(0.5)} 0 ${theme.spacing(0.25)}; margin-right: 0px; `, alertRuleItemText: css` - font-weight: ${theme.typography.weight.bold}; + font-weight: ${theme.typography.fontWeightBold}; font-size: ${theme.typography.size.sm}; margin: 0; `, alertRuleItemTime: css` - color: ${theme.colors.textWeak}; + color: ${theme.colors.text.secondary}; font-weight: normal; white-space: nowrap; `, @@ -269,6 +269,6 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({ height: 100%; `, alertIcon: css` - margin-right: ${theme.spacing.xs}; + margin-right: ${theme.spacing(0.5)}; `, -})); +}); diff --git a/public/app/plugins/panel/alertlist/UnifiedAlertList.tsx b/public/app/plugins/panel/alertlist/UnifiedAlertList.tsx index 41d2e2831ad..4e09124d752 100644 --- a/public/app/plugins/panel/alertlist/UnifiedAlertList.tsx +++ b/public/app/plugins/panel/alertlist/UnifiedAlertList.tsx @@ -215,8 +215,8 @@ function filterRules(props: PanelProps, rules: PromRule export const getStyles = (theme: GrafanaTheme2) => ({ cardContainer: css` - padding: ${theme.v1.spacing.xs} 0 ${theme.v1.spacing.xxs} 0; - line-height: ${theme.v1.typography.lineHeight.md}; + padding: ${theme.spacing(0.5)} 0 ${theme.spacing(0.25)} 0; + line-height: ${theme.typography.body.lineHeight}; margin-bottom: 0px; `, container: css` @@ -234,34 +234,34 @@ export const getStyles = (theme: GrafanaTheme2) => ({ align-items: center; width: 100%; height: 100%; - background: ${theme.v1.colors.bg2}; - padding: ${theme.v1.spacing.xs} ${theme.v1.spacing.sm}; - border-radius: ${theme.v1.border.radius.md}; - margin-bottom: ${theme.v1.spacing.xs}; + background: ${theme.colors.background.secondary}; + padding: ${theme.spacing(0.5)} ${theme.spacing(1)}; + border-radius: ${theme.shape.borderRadius(2)}; + margin-bottom: ${theme.spacing(0.5)}; & > * { - margin-right: ${theme.v1.spacing.sm}; + margin-right: ${theme.spacing(1)}; } `, alertName: css` - font-size: ${theme.v1.typography.size.md}; - font-weight: ${theme.v1.typography.weight.bold}; + font-size: ${theme.typography.h6.fontSize}; + font-weight: ${theme.typography.fontWeightBold}; `, alertLabels: css` > * { - margin-right: ${theme.v1.spacing.xs}; + margin-right: ${theme.spacing(0.5)}; } `, alertDuration: css` - font-size: ${theme.v1.typography.size.sm}; + font-size: ${theme.typography.bodySmall.fontSize}; `, alertRuleItemText: css` - font-weight: ${theme.v1.typography.weight.bold}; - font-size: ${theme.v1.typography.size.sm}; + font-weight: ${theme.typography.fontWeightBold}; + font-size: ${theme.typography.bodySmall.fontSize}; margin: 0; `, alertRuleItemTime: css` - color: ${theme.v1.colors.textWeak}; + color: ${theme.colors.text.secondary}; font-weight: normal; white-space: nowrap; `, @@ -279,7 +279,7 @@ export const getStyles = (theme: GrafanaTheme2) => ({ height: 100%; `, alertIcon: css` - margin-right: ${theme.v1.spacing.xs}; + margin-right: ${theme.spacing(0.5)}; `, instanceDetails: css` min-width: 1px; @@ -288,6 +288,6 @@ export const getStyles = (theme: GrafanaTheme2) => ({ text-overflow: ellipsis; `, customGroupDetails: css` - margin-bottom: ${theme.v1.spacing.xs}; + margin-bottom: ${theme.spacing(0.5)}; `, }); diff --git a/public/app/plugins/panel/alertlist/unified-alerting/UngroupedView.tsx b/public/app/plugins/panel/alertlist/unified-alerting/UngroupedView.tsx index 2aa297d1656..aa18073d09e 100644 --- a/public/app/plugins/panel/alertlist/unified-alerting/UngroupedView.tsx +++ b/public/app/plugins/panel/alertlist/unified-alerting/UngroupedView.tsx @@ -79,7 +79,7 @@ const getStateTagStyles = (theme: GrafanaTheme2) => ({ display: inline-block; color: white; border-radius: ${theme.shape.borderRadius()}; - font-size: ${theme.v1.typography.size.sm}; + font-size: ${theme.typography.bodySmall.fontSize}; text-transform: capitalize; line-height: 1.2; flex-shrink: 0; diff --git a/public/app/plugins/panel/annolist/AnnoListPanel.tsx b/public/app/plugins/panel/annolist/AnnoListPanel.tsx index 624afd6b492..bdfa85e45f4 100644 --- a/public/app/plugins/panel/annolist/AnnoListPanel.tsx +++ b/public/app/plugins/panel/annolist/AnnoListPanel.tsx @@ -9,7 +9,7 @@ import { AppEvents, dateTime, DurationUnit, - GrafanaTheme, + GrafanaTheme2, locationUtil, PanelProps, } from '@grafana/data'; @@ -37,7 +37,7 @@ interface State { queryTags: string[]; } export class AnnoListPanel extends PureComponent { - style = getStyles(config.theme); + style = getStyles(config.theme2); subs = new Subscription(); tagListRef = React.createRef(); @@ -290,7 +290,7 @@ export class AnnoListPanel extends PureComponent { } } -const getStyles = stylesFactory((theme: GrafanaTheme) => ({ +const getStyles = stylesFactory((theme: GrafanaTheme2) => ({ noneFound: css` display: flex; align-items: center; @@ -300,9 +300,9 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({ `, filter: css({ display: 'flex', - padding: `0px ${theme.spacing.xs}`, + padding: `0px ${theme.spacing(0.5)}`, b: { - paddingRight: theme.spacing.sm, + paddingRight: theme.spacing(1), }, }), tagList: css({ diff --git a/public/app/plugins/panel/canvas/InlineEdit.tsx b/public/app/plugins/panel/canvas/InlineEdit.tsx index 79c8bd03fe1..c8aa293cda1 100644 --- a/public/app/plugins/panel/canvas/InlineEdit.tsx +++ b/public/app/plugins/panel/canvas/InlineEdit.tsx @@ -103,7 +103,7 @@ const getStyles = (theme: GrafanaTheme2) => ({ inlineEditorContainer: css` display: flex; flex-direction: column; - background: ${theme.v1.colors.panelBg}; + background: ${theme.components.panel.background}; border: 1px solid ${theme.colors.border.strong}; box-shadow: 5px 5px 20px -5px #000000; z-index: 1000; diff --git a/public/app/plugins/panel/canvas/editor/TreeNavigationEditor.tsx b/public/app/plugins/panel/canvas/editor/TreeNavigationEditor.tsx index 4ddeedba436..251ff2a1b87 100644 --- a/public/app/plugins/panel/canvas/editor/TreeNavigationEditor.tsx +++ b/public/app/plugins/panel/canvas/editor/TreeNavigationEditor.tsx @@ -32,7 +32,7 @@ export const TreeNavigationEditor = ({ item }: StandardEditorProps (settings?.selected ? settings.selected.map((v) => v?.getName()) : []), diff --git a/public/app/plugins/panel/canvas/editor/TreeNodeTitle.tsx b/public/app/plugins/panel/canvas/editor/TreeNodeTitle.tsx index 0c2df7f9d9b..f22aca3bc91 100644 --- a/public/app/plugins/panel/canvas/editor/TreeNodeTitle.tsx +++ b/public/app/plugins/panel/canvas/editor/TreeNodeTitle.tsx @@ -106,13 +106,13 @@ const getStyles = (theme: GrafanaTheme2) => ({ align-items: center; flex-grow: 1; overflow: hidden; - margin-right: ${theme.v1.spacing.sm}; + margin-right: ${theme.spacing(1)}; `, layerName: css` - font-weight: ${theme.v1.typography.weight.semibold}; - color: ${theme.v1.colors.textBlue}; + font-weight: ${theme.typography.fontWeightMedium}; + color: ${theme.colors.primary.text}; cursor: pointer; overflow: hidden; - margin-left: ${theme.v1.spacing.xs}; + margin-left: ${theme.spacing(0.5)}; `, }); diff --git a/public/app/plugins/panel/canvas/globalStyles.ts b/public/app/plugins/panel/canvas/globalStyles.ts index 3f57f3c348b..480e25e809d 100644 --- a/public/app/plugins/panel/canvas/globalStyles.ts +++ b/public/app/plugins/panel/canvas/globalStyles.ts @@ -58,7 +58,7 @@ export function getGlobalStyles(theme: GrafanaTheme2) { content: ''; } & ~ .rc-tree-treenode { - border-left: 2px solid ${theme.v1.colors.formInputBorder}; + border-left: 2px solid ${theme.components.input.borderColor}; } } &.drop-target { @@ -88,17 +88,17 @@ export function getGlobalStyles(theme: GrafanaTheme2) { flex-grow: 1; display: flex; - border: 1px solid ${theme.v1.colors.formInputBorder}; - border-radius: ${theme.v1.border.radius.sm}; - background: ${theme.v1.colors.bg2}; - min-height: ${theme.v1.spacing.formInputHeight}px; + border: 1px solid ${theme.components.input.borderColor}; + border-radius: ${theme.shape.borderRadius(1)}; + background: ${theme.colors.background.secondary}; + min-height: ${theme.spacing.gridSize * 4}px; &:hover { - border: 1px solid ${theme.v1.colors.formInputBorderHover}; + border: 1px solid ${theme.components.input.borderHover}; } &.rc-tree-node-selected { - border: 1px solid ${theme.v1.colors.formInputBorderActive}; + border: 1px solid ${theme.colors.primary.border}; opacity: 1; } } diff --git a/public/app/plugins/panel/gauge/GaugePanel.tsx b/public/app/plugins/panel/gauge/GaugePanel.tsx index 226fc47f33e..e5766087ef2 100644 --- a/public/app/plugins/panel/gauge/GaugePanel.tsx +++ b/public/app/plugins/panel/gauge/GaugePanel.tsx @@ -28,7 +28,7 @@ export class GaugePanel extends PureComponent> { text={options.text} showThresholdLabels={options.showThresholdLabels} showThresholdMarkers={options.showThresholdMarkers} - theme={config.theme} + theme={config.theme2} onClick={openMenu} className={targetClassName} /> diff --git a/public/app/plugins/panel/geomap/components/DebugOverlay.tsx b/public/app/plugins/panel/geomap/components/DebugOverlay.tsx index 7c99d78964b..4cfbba909d7 100644 --- a/public/app/plugins/panel/geomap/components/DebugOverlay.tsx +++ b/public/app/plugins/panel/geomap/components/DebugOverlay.tsx @@ -5,7 +5,7 @@ import { transform } from 'ol/proj'; import React, { PureComponent } from 'react'; import tinycolor from 'tinycolor2'; -import { GrafanaTheme } from '@grafana/data'; +import { GrafanaTheme2 } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors/src'; import { stylesFactory } from '@grafana/ui'; import { config } from 'app/core/config'; @@ -20,7 +20,7 @@ interface State { } export class DebugOverlay extends PureComponent { - style = getStyles(config.theme); + style = getStyles(config.theme2); constructor(props: Props) { super(props); @@ -64,10 +64,10 @@ export class DebugOverlay extends PureComponent { } } -const getStyles = stylesFactory((theme: GrafanaTheme) => ({ +const getStyles = stylesFactory((theme: GrafanaTheme2) => ({ infoWrap: css` - color: ${theme.colors.text}; - background: ${tinycolor(theme.colors.panelBg).setAlpha(0.7).toString()}; + color: ${theme.colors.text.primary}; + background: ${tinycolor(theme.components.panel.background).setAlpha(0.7).toString()}; border-radius: 2px; padding: 8px; `, diff --git a/public/app/plugins/panel/gettingstarted/GettingStarted.tsx b/public/app/plugins/panel/gettingstarted/GettingStarted.tsx index d32a1a7a34f..1687e268844 100644 --- a/public/app/plugins/panel/gettingstarted/GettingStarted.tsx +++ b/public/app/plugins/panel/gettingstarted/GettingStarted.tsx @@ -114,53 +114,53 @@ export class GettingStarted extends PureComponent { } const getStyles = stylesFactory(() => { - const { theme } = config; + const theme = config.theme2; return { container: css` display: flex; flex-direction: column; height: 100%; - // background: url(public/img/getting_started_bg_${theme.type}.svg) no-repeat; + // background: url(public/img/getting_started_bg_${theme.colors.mode}.svg) no-repeat; background-size: cover; - padding: ${theme.spacing.xl} ${theme.spacing.md} 0; + padding: ${theme.spacing(4)} ${theme.spacing(2)} 0; `, content: css` label: content; display: flex; justify-content: center; - @media only screen and (max-width: ${theme.breakpoints.xxl}) { - margin-left: ${theme.spacing.lg}; + ${theme.breakpoints.down('xxl')} { + margin-left: ${theme.spacing(3)}; justify-content: flex-start; } `, header: css` label: header; - margin-bottom: ${theme.spacing.lg}; + margin-bottom: ${theme.spacing(3)}; display: flex; flex-direction: column; - @media only screen and (min-width: ${theme.breakpoints.lg}) { + ${theme.breakpoints.down('lg')} { flex-direction: row; } `, headerLogo: css` height: 58px; - padding-right: ${theme.spacing.md}; + padding-right: ${theme.spacing(2)}; display: none; - @media only screen and (min-width: ${theme.breakpoints.md}) { + ${theme.breakpoints.up('md')} { display: block; } `, heading: css` label: heading; - margin-right: ${theme.spacing.lg}; - margin-bottom: ${theme.spacing.lg}; + margin-right: ${theme.spacing(3)}; + margin-bottom: ${theme.spacing(3)}; flex-grow: 1; display: flex; - @media only screen and (min-width: ${theme.breakpoints.md}) { + ${theme.breakpoints.up('md')} { margin-bottom: 0; } `, @@ -173,14 +173,14 @@ const getStyles = stylesFactory(() => { previous: css` left: 10px; - @media only screen and (max-width: ${theme.breakpoints.md}) { + ${theme.breakpoints.down('md')} { left: 0; } `, forward: css` right: 10px; - @media only screen and (max-width: ${theme.breakpoints.md}) { + ${theme.breakpoints.down('md')} { right: 0; } `, @@ -189,8 +189,8 @@ const getStyles = stylesFactory(() => { justify-content: flex-end; cursor: pointer; text-decoration: underline; - margin-right: ${theme.spacing.md}; - margin-bottom: ${theme.spacing.sm}; + margin-right: ${theme.spacing(2)}; + margin-bottom: ${theme.spacing(1)}; `, loading: css` display: flex; @@ -199,7 +199,7 @@ const getStyles = stylesFactory(() => { height: 100%; `, loadingText: css` - margin-right: ${theme.spacing.sm}; + margin-right: ${theme.spacing(1)}; `, }; }); diff --git a/public/app/plugins/panel/gettingstarted/components/DocsCard.tsx b/public/app/plugins/panel/gettingstarted/components/DocsCard.tsx index d8e85444463..fde47696818 100644 --- a/public/app/plugins/panel/gettingstarted/components/DocsCard.tsx +++ b/public/app/plugins/panel/gettingstarted/components/DocsCard.tsx @@ -1,8 +1,8 @@ import { css } from '@emotion/css'; -import React, { FC } from 'react'; +import React, { useCallback } from 'react'; -import { GrafanaTheme } from '@grafana/data'; -import { Icon, stylesFactory, useTheme } from '@grafana/ui'; +import { GrafanaTheme2 } from '@grafana/data'; +import { Icon, useStyles2 } from '@grafana/ui'; import { Card } from '../types'; @@ -12,9 +12,9 @@ interface Props { card: Card; } -export const DocsCard: FC = ({ card }) => { - const theme = useTheme(); - const styles = getStyles(theme, card.done); +export const DocsCard = ({ card }: Props) => { + const styles = useStyles2(useCallback((theme: GrafanaTheme2) => getStyles(theme, card.done), [card.done])); + const iconStyles = useStyles2(useCallback((theme: GrafanaTheme2) => iconStyle(theme, card.done), [card.done])); return (
@@ -23,7 +23,7 @@ export const DocsCard: FC = ({ card }) => {
{card.done ? 'complete' : card.heading}

{card.title}

- +
@@ -39,34 +39,34 @@ export const DocsCard: FC = ({ card }) => { ); }; -const getStyles = stylesFactory((theme: GrafanaTheme, complete: boolean) => { +const getStyles = (theme: GrafanaTheme2, complete: boolean) => { return { card: css` ${cardStyle(theme, complete)} min-width: 230px; - @media only screen and (max-width: ${theme.breakpoints.md}) { + ${theme.breakpoints.down('md')} { min-width: 192px; } `, heading: css` text-transform: uppercase; - color: ${complete ? theme.palette.blue95 : '#FFB357'}; - margin-bottom: ${theme.spacing.md}; + color: ${complete ? theme.v1.palette.blue95 : '#FFB357'}; + margin-bottom: ${theme.spacing(2)}; `, title: css` - margin-bottom: ${theme.spacing.md}; + margin-bottom: ${theme.spacing(2)}; `, url: css` display: inline-block; `, learnUrl: css` - border-top: 1px solid ${theme.colors.border1}; + border-top: 1px solid ${theme.colors.border.weak}; position: absolute; bottom: 0; padding: 8px 16px; width: 100%; `, }; -}); +}; diff --git a/public/app/plugins/panel/gettingstarted/components/Step.tsx b/public/app/plugins/panel/gettingstarted/components/Step.tsx index c4e8e26013a..753ca00a486 100644 --- a/public/app/plugins/panel/gettingstarted/components/Step.tsx +++ b/public/app/plugins/panel/gettingstarted/components/Step.tsx @@ -1,8 +1,8 @@ import { css } from '@emotion/css'; import React, { FC } from 'react'; -import { GrafanaTheme } from '@grafana/data'; -import { stylesFactory, useTheme } from '@grafana/ui'; +import { GrafanaTheme2 } from '@grafana/data'; +import { useStyles2 } from '@grafana/ui'; import { Card, SetupStep, TutorialCardType } from '../types'; @@ -14,8 +14,7 @@ interface Props { } export const Step: FC = ({ step }) => { - const theme = useTheme(); - const styles = getStyles(theme); + const styles = useStyles2(getStyles); return (
@@ -36,7 +35,7 @@ export const Step: FC = ({ step }) => { ); }; -const getStyles = stylesFactory((theme: GrafanaTheme) => { +const getStyles = (theme: GrafanaTheme2) => { return { setup: css` display: flex; @@ -46,15 +45,15 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => { width: 172px; margin-right: 5%; - @media only screen and (max-width: ${theme.breakpoints.xxl}) { - margin-right: ${theme.spacing.xl}; + ${theme.breakpoints.down('xxl')} { + margin-right: ${theme.spacing(4)}; } - @media only screen and (max-width: ${theme.breakpoints.sm}) { + ${theme.breakpoints.down('sm')} { display: none; } `, title: css` - color: ${theme.palette.blue95}; + color: ${theme.v1.palette.blue95}; `, cards: css` overflow-x: scroll; @@ -63,9 +62,9 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => { display: flex; justify-content: center; - @media only screen and (max-width: ${theme.breakpoints.xxl}) { + ${theme.breakpoints.down('xxl')} { justify-content: flex-start; } `, }; -}); +}; diff --git a/public/app/plugins/panel/gettingstarted/components/TutorialCard.tsx b/public/app/plugins/panel/gettingstarted/components/TutorialCard.tsx index 98cfa07de8c..1d30a9798f5 100644 --- a/public/app/plugins/panel/gettingstarted/components/TutorialCard.tsx +++ b/public/app/plugins/panel/gettingstarted/components/TutorialCard.tsx @@ -1,8 +1,8 @@ import { css } from '@emotion/css'; -import React, { FC, MouseEvent } from 'react'; +import React, { FC, MouseEvent, useCallback } from 'react'; -import { GrafanaTheme } from '@grafana/data'; -import { Icon, stylesFactory, useTheme } from '@grafana/ui'; +import { GrafanaTheme2 } from '@grafana/data'; +import { Icon, useStyles2 } from '@grafana/ui'; import store from 'app/core/store'; import { TutorialCardType } from '../types'; @@ -14,8 +14,8 @@ interface Props { } export const TutorialCard: FC = ({ card }) => { - const theme = useTheme(); - const styles = getStyles(theme, card.done); + const styles = useStyles2(useCallback((theme: GrafanaTheme2) => getStyles(theme, card.done), [card.done])); + const iconStyles = useStyles2(useCallback((theme: GrafanaTheme2) => iconStyle(theme, card.done), [card.done])); return ( = ({ card }) => {
{card.done ? 'complete' : card.heading}

{card.title}

{card.info}
- +
); @@ -44,39 +44,39 @@ const handleTutorialClick = (event: MouseEvent, card: Tutoria } }; -const getStyles = stylesFactory((theme: GrafanaTheme, complete: boolean) => { +const getStyles = (theme: GrafanaTheme2, complete: boolean) => { return { card: css` ${cardStyle(theme, complete)} width: 460px; min-width: 460px; - @media only screen and (max-width: ${theme.breakpoints.xl}) { + ${theme.breakpoints.down('xl')} { min-width: 368px; } - @media only screen and (max-width: ${theme.breakpoints.lg}) { + ${theme.breakpoints.down('lg')} { min-width: 272px; } `, type: css` - color: ${theme.colors.textBlue}; + color: ${theme.colors.primary.text}; text-transform: uppercase; `, heading: css` text-transform: uppercase; - color: ${theme.colors.textBlue}; - margin-bottom: ${theme.spacing.sm}; + color: ${theme.colors.primary.text}; + margin-bottom: ${theme.spacing(1)}; `, cardTitle: css` - margin-bottom: ${theme.spacing.md}; + margin-bottom: ${theme.spacing(2)}; `, info: css` - margin-bottom: ${theme.spacing.md}; + margin-bottom: ${theme.spacing(2)}; `, status: css` display: flex; justify-content: flex-end; `, }; -}); +}; diff --git a/public/app/plugins/panel/gettingstarted/components/sharedStyles.ts b/public/app/plugins/panel/gettingstarted/components/sharedStyles.ts index 8d37e07d00f..d2bd43184e7 100644 --- a/public/app/plugins/panel/gettingstarted/components/sharedStyles.ts +++ b/public/app/plugins/panel/gettingstarted/components/sharedStyles.ts @@ -1,9 +1,8 @@ import { css } from '@emotion/css'; -import { GrafanaTheme } from '@grafana/data'; -import { stylesFactory } from '@grafana/ui'; +import { GrafanaTheme2 } from '@grafana/data'; -export const cardStyle = stylesFactory((theme: GrafanaTheme, complete: boolean) => { +export const cardStyle = (theme: GrafanaTheme2, complete: boolean) => { const completeGradient = 'linear-gradient(to right, #5182CC 0%, #245BAF 100%)'; const darkThemeGradients = complete ? completeGradient : 'linear-gradient(to right, #f05a28 0%, #fbca0a 100%)'; const lightThemeGradients = complete ? completeGradient : 'linear-gradient(to right, #FBCA0A 0%, #F05A28 100%)'; @@ -11,16 +10,16 @@ export const cardStyle = stylesFactory((theme: GrafanaTheme, complete: boolean) const borderGradient = theme.isDark ? darkThemeGradients : lightThemeGradients; return ` - background-color: ${theme.colors.bg2}; - margin-right: ${theme.spacing.xl}; - border: 1px solid ${theme.colors.border1}; - border-bottom-left-radius: ${theme.border.radius.md}; - border-bottom-right-radius: ${theme.border.radius.md}; + 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; - @media only screen and (max-width: ${theme.breakpoints.xxl}) { - margin-right: ${theme.spacing.md}; + ${theme.breakpoints.down('xxl')} { + margin-right: ${theme.spacing(2)}; } &::before { display: block; @@ -33,17 +32,15 @@ export const cardStyle = stylesFactory((theme: GrafanaTheme, complete: boolean) background-image: ${borderGradient}; } `; -}); +}; -export const iconStyle = stylesFactory( - (theme: GrafanaTheme, complete: boolean) => css` - color: ${complete ? theme.palette.blue95 : theme.colors.textWeak}; +export const iconStyle = (theme: GrafanaTheme2, complete: boolean) => css` + color: ${complete ? theme.v1.palette.blue95 : theme.colors.text.secondary}; - @media only screen and (max-width: ${theme.breakpoints.sm}) { - display: none; - } - ` -); + ${theme.breakpoints.down('sm')} { + display: none; + } +`; export const cardContent = css` padding: 16px; diff --git a/public/app/plugins/panel/graph/data_processor.ts b/public/app/plugins/panel/graph/data_processor.ts index e95cb7e74d8..278f3fd94b2 100644 --- a/public/app/plugins/panel/graph/data_processor.ts +++ b/public/app/plugins/panel/graph/data_processor.ts @@ -80,7 +80,7 @@ export class DataProcessor { const series = new TimeSeries({ datapoints: datapoints || [], alias: alias, - color: config.theme.visualization.getColorByName(color), + color: config.theme2.visualization.getColorByName(color), unit: field.config ? field.config.unit : undefined, dataFrameIndex, fieldIndex, diff --git a/public/app/plugins/panel/graph/module.ts b/public/app/plugins/panel/graph/module.ts index 7c2d7ade2e9..0cd91bad136 100644 --- a/public/app/plugins/panel/graph/module.ts +++ b/public/app/plugins/panel/graph/module.ts @@ -297,7 +297,7 @@ export class GraphCtrl extends MetricsPanelCtrl { } onColorChange = (series: any, color: string) => { - series.setColor(config.theme.visualization.getColorByName(color)); + series.setColor(config.theme2.visualization.getColorByName(color)); this.panel.aliasColors[series.alias] = color; this.render(); }; diff --git a/public/app/plugins/panel/graph/threshold_manager.ts b/public/app/plugins/panel/graph/threshold_manager.ts index 599976a8bfb..fb2210dd876 100644 --- a/public/app/plugins/panel/graph/threshold_manager.ts +++ b/public/app/plugins/panel/graph/threshold_manager.ts @@ -234,12 +234,12 @@ export class ThresholdManager { if (threshold.yaxis === 'right' && this.hasSecondYAxis) { options.grid.markings.push({ y2axis: { from: threshold.value, to: limit }, - color: config.theme.visualization.getColorByName(fillColor), + color: config.theme2.visualization.getColorByName(fillColor), }); } else { options.grid.markings.push({ yaxis: { from: threshold.value, to: limit }, - color: config.theme.visualization.getColorByName(fillColor), + color: config.theme2.visualization.getColorByName(fillColor), }); } } @@ -247,12 +247,12 @@ export class ThresholdManager { if (threshold.yaxis === 'right' && this.hasSecondYAxis) { options.grid.markings.push({ y2axis: { from: threshold.value, to: threshold.value }, - color: config.theme.visualization.getColorByName(lineColor), + color: config.theme2.visualization.getColorByName(lineColor), }); } else { options.grid.markings.push({ yaxis: { from: threshold.value, to: threshold.value }, - color: config.theme.visualization.getColorByName(lineColor), + color: config.theme2.visualization.getColorByName(lineColor), }); } } diff --git a/public/app/plugins/panel/graph/thresholds_form.ts b/public/app/plugins/panel/graph/thresholds_form.ts index bff1ea0ec75..cd0c40df66e 100644 --- a/public/app/plugins/panel/graph/thresholds_form.ts +++ b/public/app/plugins/panel/graph/thresholds_form.ts @@ -64,8 +64,8 @@ export class ThresholdFormCtrl { onThresholdTypeChange(index: number) { // Because of the ng-model binding, threshold's color mode is already set here if (this.panel.thresholds[index].colorMode === 'custom') { - this.panel.thresholds[index].fillColor = tinycolor(config.theme.palette.blue85).setAlpha(0.2).toRgbString(); - this.panel.thresholds[index].lineColor = tinycolor(config.theme.palette.blue77).setAlpha(0.6).toRgbString(); + this.panel.thresholds[index].fillColor = tinycolor(config.theme2.v1.palette.blue85).setAlpha(0.2).toRgbString(); + this.panel.thresholds[index].lineColor = tinycolor(config.theme2.v1.palette.blue77).setAlpha(0.6).toRgbString(); } this.panelCtrl.render(); } diff --git a/public/app/plugins/panel/graph/time_region_manager.ts b/public/app/plugins/panel/graph/time_region_manager.ts index 04744dea9ec..abe85cc3b31 100644 --- a/public/app/plugins/panel/graph/time_region_manager.ts +++ b/public/app/plugins/panel/graph/time_region_manager.ts @@ -1,7 +1,7 @@ import 'vendor/flot/jquery.flot'; import { map } from 'lodash'; -import { dateTime, GrafanaTheme, TimeRange } from '@grafana/data'; +import { dateTime, GrafanaTheme2, TimeRange } from '@grafana/data'; import { config } from 'app/core/config'; import { calculateTimesWithin, TimeRegionConfig } from 'app/core/utils/timeRegions'; @@ -45,7 +45,7 @@ export function getColorModes() { }); } -function getColor(timeRegion: any, theme: GrafanaTheme): TimeRegionColorDefinition { +function getColor(timeRegion: any, theme: GrafanaTheme2): TimeRegionColorDefinition { if (Object.keys(colorModes).indexOf(timeRegion.colorMode) === -1) { timeRegion.colorMode = 'red'; } @@ -109,7 +109,7 @@ export class TimeRegionManager { const timeRegion: GraphTimeRegionConfig = tr; const regions = calculateTimesWithin(tr, tRange); if (regions.length) { - const timeRegionColor = getColor(timeRegion, config.theme); + const timeRegionColor = getColor(timeRegion, config.theme2); for (let j = 0; j < regions.length; j++) { const r = regions[j]; diff --git a/public/app/plugins/panel/heatmap-old/color_legend.ts b/public/app/plugins/panel/heatmap-old/color_legend.ts index 71df88abe40..d369868e74b 100644 --- a/public/app/plugins/panel/heatmap-old/color_legend.ts +++ b/public/app/plugins/panel/heatmap-old/color_legend.ts @@ -273,7 +273,7 @@ function drawSimpleOpacityLegend(elem: JQuery, options: { colorScale: string; ex .attr('width', rangeStep) .attr('height', legendHeight) .attr('stroke-width', 0) - .attr('fill', config.theme.visualization.getColorByName(options.cardColor)) + .attr('fill', config.theme2.visualization.getColorByName(options.cardColor)) .style('opacity', (d) => legendOpacityScale(d)); } } diff --git a/public/app/plugins/panel/heatmap-old/rendering.ts b/public/app/plugins/panel/heatmap-old/rendering.ts index e92ffdf00e4..a7adc91c7bb 100644 --- a/public/app/plugins/panel/heatmap-old/rendering.ts +++ b/public/app/plugins/panel/heatmap-old/rendering.ts @@ -659,7 +659,7 @@ export class HeatmapRenderer { getCardColor(d: { count: any }) { if (this.panel.color.mode === 'opacity') { - return config.theme.visualization.getColorByName(this.panel.color.cardColor); + return config.theme2.visualization.getColorByName(this.panel.color.cardColor); } else { return this.colorScale(d.count); } diff --git a/public/app/plugins/panel/live/LiveChannelEditor.tsx b/public/app/plugins/panel/live/LiveChannelEditor.tsx index 41444753568..ff7176dd66c 100644 --- a/public/app/plugins/panel/live/LiveChannelEditor.tsx +++ b/public/app/plugins/panel/live/LiveChannelEditor.tsx @@ -6,7 +6,7 @@ import { LiveChannelAddress, SelectableValue, StandardEditorProps, - GrafanaTheme, + GrafanaTheme2, } from '@grafana/data'; import { Select, Alert, Label, stylesFactory } from '@grafana/ui'; import { config } from 'app/core/config'; @@ -86,7 +86,7 @@ export class LiveChannelEditor extends PureComponent { render() { const { namespaces, paths } = this.state; const { scope, namespace, path } = this.props.value; - const style = getStyles(config.theme); + const style = getStyles(config.theme2); return ( <> @@ -146,8 +146,8 @@ function findPathOption(paths: Array>, path?: string): S return undefined; } -const getStyles = stylesFactory((theme: GrafanaTheme) => ({ +const getStyles = stylesFactory((theme: GrafanaTheme2) => ({ dropWrap: css` - margin-bottom: ${theme.spacing.sm}; + margin-bottom: ${theme.spacing(1)}; `, })); diff --git a/public/app/plugins/panel/live/LivePanel.tsx b/public/app/plugins/panel/live/LivePanel.tsx index a3091e45b2a..e3161112ed7 100644 --- a/public/app/plugins/panel/live/LivePanel.tsx +++ b/public/app/plugins/panel/live/LivePanel.tsx @@ -4,7 +4,7 @@ import React, { PureComponent } from 'react'; import { Unsubscribable, PartialObserver } from 'rxjs'; import { - GrafanaTheme, + GrafanaTheme2, PanelProps, LiveChannelStatusEvent, isValidLiveChannelAddress, @@ -38,7 +38,7 @@ interface State { export class LivePanel extends PureComponent { private readonly isValid: boolean; subscription?: Unsubscribable; - styles = getStyles(config.theme); + styles = getStyles(config.theme2); constructor(props: Props) { super(props); @@ -301,31 +301,31 @@ export class LivePanel extends PureComponent { } } -const getStyles = stylesFactory((theme: GrafanaTheme) => ({ +const getStyles = stylesFactory((theme: GrafanaTheme2) => ({ statusWrap: css` margin: auto; position: absolute; top: 0; right: 0; - background: ${theme.colors.panelBg}; + background: ${theme.components.panel.background}; padding: 10px; z-index: ${theme.zIndex.modal}; `, status: { [LiveChannelConnectionState.Pending]: css` - border: 1px solid ${theme.palette.brandPrimary}; + border: 1px solid ${theme.v1.palette.orange}; `, [LiveChannelConnectionState.Connected]: css` - border: 1px solid ${theme.palette.brandSuccess}; + border: 1px solid ${theme.colors.success.main}; `, [LiveChannelConnectionState.Connecting]: css` - border: 1px solid ${theme.palette.brandWarning}; + border: 1px solid ${theme.v1.palette.brandWarning}; `, [LiveChannelConnectionState.Disconnected]: css` - border: 1px solid ${theme.palette.brandWarning}; + border: 1px solid ${theme.colors.warning.main}; `, [LiveChannelConnectionState.Shutdown]: css` - border: 1px solid ${theme.palette.brandDanger}; + border: 1px solid ${theme.colors.error.main}; `, [LiveChannelConnectionState.Invalid]: css` border: 1px solid red; diff --git a/public/app/plugins/panel/nodeGraph/Legend.tsx b/public/app/plugins/panel/nodeGraph/Legend.tsx index 3c90bd56b78..98c9f03d815 100644 --- a/public/app/plugins/panel/nodeGraph/Legend.tsx +++ b/public/app/plugins/panel/nodeGraph/Legend.tsx @@ -2,9 +2,9 @@ import { css } from '@emotion/css'; import { identity } from 'lodash'; import React, { useCallback } from 'react'; -import { Field, FieldColorModeId, GrafanaTheme } from '@grafana/data'; +import { Field, FieldColorModeId, GrafanaTheme2 } from '@grafana/data'; import { LegendDisplayMode } from '@grafana/schema'; -import { Icon, useStyles, useTheme, VizLegend, VizLegendItem, VizLegendListItem } from '@grafana/ui'; +import { Icon, useStyles2, useTheme2, VizLegend, VizLegendItem, VizLegendListItem } from '@grafana/ui'; import { Config } from './layout'; import { NodeDatum } from './types'; @@ -33,8 +33,8 @@ interface Props { export const Legend = function Legend(props: Props) { const { nodes, onSort, sort, sortable } = props; - const theme = useTheme(); - const styles = useStyles(getStyles); + const theme = useTheme2(); + const styles = useStyles2(getStyles); const colorItems = getColorLegendItems(nodes, theme); const onClick = useCallback( @@ -70,7 +70,7 @@ interface ItemData { field: Field; } -function getColorLegendItems(nodes: NodeDatum[], theme: GrafanaTheme): Array> { +function getColorLegendItems(nodes: NodeDatum[], theme: GrafanaTheme2): Array> { if (!nodes.length) { return []; }