IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Chore: Migrate usage of v1 themes to v2 (#57617)

Browse Source
This commit is contained in:
kay delaney 2022-10-26 13:28:12 +01:00 committed by GitHub
parent 77437f2c89
commit 05ceff5188
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
31 changed files with 189 additions and 193 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/grafana-ui/src/components/Gauge/Gauge.test.tsx
View File

@ -1,9 +1,7 @@
import { render } from '@testing-library/react'; import { render } from '@testing-library/react';
import React from 'react'; import React from 'react';
import { ThresholdsMode, FieldConfig, FieldColorModeId } from '@grafana/data'; import { ThresholdsMode, FieldConfig, FieldColorModeId, createTheme } from '@grafana/data';
import { getTheme } from '../../themes';
import { Gauge, Props } from './Gauge'; import { Gauge, Props } from './Gauge';
@ -33,7 +31,7 @@ const props: Props = {
text: '25', text: '25',
numeric: 25, numeric: 25,
}, },
theme: getTheme(), theme: createTheme({ colors: { mode: 'dark' } }),
}; };
describe('Gauge', () => { describe('Gauge', () => {

10
packages/grafana-ui/src/components/Gauge/Gauge.tsx
View File

@ -8,15 +8,16 @@ import {
ThresholdsMode, ThresholdsMode,
GAUGE_DEFAULT_MAXIMUM, GAUGE_DEFAULT_MAXIMUM,
GAUGE_DEFAULT_MINIMUM, GAUGE_DEFAULT_MINIMUM,
GrafanaTheme,
GrafanaTheme2,
} from '@grafana/data'; } from '@grafana/data';
import { VizTextDisplayOptions } from '@grafana/schema'; import { VizTextDisplayOptions } from '@grafana/schema';
import { Themeable } from '../../types';
import { calculateFontSize } from '../../utils/measureText'; import { calculateFontSize } from '../../utils/measureText';
import { calculateGaugeAutoProps, DEFAULT_THRESHOLDS, getFormattedThresholds } from './utils'; import { calculateGaugeAutoProps, DEFAULT_THRESHOLDS, getFormattedThresholds } from './utils';
export interface Props extends Themeable { export interface Props {
height: number; height: number;
field: FieldConfig; field: FieldConfig;
showThresholdMarkers: boolean; showThresholdMarkers: boolean;
@ -26,6 +27,7 @@ export interface Props extends Themeable {
text?: VizTextDisplayOptions; text?: VizTextDisplayOptions;
onClick?: React.MouseEventHandler<HTMLElement>; onClick?: React.MouseEventHandler<HTMLElement>;
className?: string; className?: string;
theme: GrafanaTheme | GrafanaTheme2;
} }
export class Gauge extends PureComponent<Props> { export class Gauge extends PureComponent<Props> {
@ -54,7 +56,7 @@ export class Gauge extends PureComponent<Props> {
const autoProps = calculateGaugeAutoProps(width, height, value.title); const autoProps = calculateGaugeAutoProps(width, height, value.title);
const dimension = Math.min(width, autoProps.gaugeHeight); 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 gaugeWidthReduceRatio = showThresholdLabels ? 1.5 : 1;
const gaugeWidth = Math.min(dimension / 5.5, 40) / gaugeWidthReduceRatio; const gaugeWidth = Math.min(dimension / 5.5, 40) / gaugeWidthReduceRatio;
const thresholdMarkersWidth = gaugeWidth / 5; const thresholdMarkersWidth = gaugeWidth / 5;
@ -120,7 +122,7 @@ export class Gauge extends PureComponent<Props> {
formatter: () => { formatter: () => {
return text; return text;
}, },
font: { size: fontSize, family: theme.typography.fontFamily.sansSerif }, font: { size: fontSize, family: theme.typography.fontFamily },
}, },
show: true, show: true,
}, },

14
packages/grafana-ui/src/components/Table/Filter.tsx
View File

@ -1,10 +1,10 @@
import { css, cx } from '@emotion/css'; import { css, cx } from '@emotion/css';
import React, { FC, useCallback, useMemo, useRef, useState } from 'react'; 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 { Popover } from '..';
import { stylesFactory, useStyles } from '../../themes'; import { useStyles2 } from '../../themes';
import { Icon } from '../Icon/Icon'; import { Icon } from '../Icon/Icon';
import { FilterPopup } from './FilterPopup'; import { FilterPopup } from './FilterPopup';
@ -19,7 +19,7 @@ interface Props {
export const Filter: FC<Props> = ({ column, field, tableStyles }) => { export const Filter: FC<Props> = ({ column, field, tableStyles }) => {
const ref = useRef<HTMLButtonElement>(null); const ref = useRef<HTMLButtonElement>(null);
const [isPopoverVisible, setPopoverVisible] = useState<boolean>(false); const [isPopoverVisible, setPopoverVisible] = useState<boolean>(false);
const styles = useStyles(getStyles); const styles = useStyles2(getStyles);
const filterEnabled = useMemo(() => Boolean(column.filterValue), [column.filterValue]); const filterEnabled = useMemo(() => Boolean(column.filterValue), [column.filterValue]);
const onShowPopover = useCallback(() => setPopoverVisible(true), [setPopoverVisible]); const onShowPopover = useCallback(() => setPopoverVisible(true), [setPopoverVisible]);
const onClosePopover = useCallback(() => setPopoverVisible(false), [setPopoverVisible]); const onClosePopover = useCallback(() => setPopoverVisible(false), [setPopoverVisible]);
@ -47,13 +47,13 @@ export const Filter: FC<Props> = ({ column, field, tableStyles }) => {
); );
}; };
const getStyles = stylesFactory((theme: GrafanaTheme) => ({ const getStyles = (theme: GrafanaTheme2) => ({
filterIconEnabled: css` filterIconEnabled: css`
label: filterIconEnabled; label: filterIconEnabled;
color: ${theme.colors.textBlue}; color: ${theme.colors.primary.text};
`, `,
filterIconDisabled: css` filterIconDisabled: css`
label: filterIconDisabled; label: filterIconDisabled;
color: ${theme.colors.textFaint}; color: ${theme.colors.text.disabled};
`, `,
})); });

12
public/app/plugins/datasource/tempo/configuration/LokiSearchSettings.tsx
View File

@ -1,16 +1,16 @@
import { css } from '@emotion/css'; import { css } from '@emotion/css';
import React from 'react'; import React from 'react';
import { DataSourcePluginOptionsEditorProps, GrafanaTheme, updateDatasourcePluginJsonDataOption } from '@grafana/data'; import { DataSourcePluginOptionsEditorProps, GrafanaTheme2, updateDatasourcePluginJsonDataOption } from '@grafana/data';
import { DataSourcePicker } from '@grafana/runtime'; 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'; import { TempoJsonData } from '../types';
interface Props extends DataSourcePluginOptionsEditorProps<TempoJsonData> {} interface Props extends DataSourcePluginOptionsEditorProps<TempoJsonData> {}
export function LokiSearchSettings({ options, onOptionsChange }: Props) { 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 // Default to the trace to logs datasource if configured and loki search was enabled
// but only if jsonData.lokiSearch hasn't been set // 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` infoText: css`
label: infoText; label: infoText;
padding-bottom: ${theme.spacing.md}; padding-bottom: ${theme.spacing(2)};
color: ${theme.colors.textSemiWeak}; color: ${theme.colors.text.secondary};
`, `,
row: css` row: css`

4
public/app/plugins/datasource/tempo/configuration/SearchSettings.tsx
View File

@ -2,14 +2,14 @@ import { css } from '@emotion/css';
import React from 'react'; import React from 'react';
import { DataSourcePluginOptionsEditorProps, updateDatasourcePluginJsonDataOption } from '@grafana/data'; 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'; import { TempoJsonData } from '../types';
interface Props extends DataSourcePluginOptionsEditorProps<TempoJsonData> {} interface Props extends DataSourcePluginOptionsEditorProps<TempoJsonData> {}
export function SearchSettings({ options, onOptionsChange }: Props) { export function SearchSettings({ options, onOptionsChange }: Props) {
const styles = useStyles(getStyles); const styles = useStyles2(getStyles);
return ( return (
<div className={styles.container}> <div className={styles.container}>

12
public/app/plugins/datasource/tempo/configuration/ServiceGraphSettings.tsx
View File

@ -1,16 +1,16 @@
import { css } from '@emotion/css'; import { css } from '@emotion/css';
import React from 'react'; import React from 'react';
import { DataSourcePluginOptionsEditorProps, GrafanaTheme, updateDatasourcePluginJsonDataOption } from '@grafana/data'; import { DataSourcePluginOptionsEditorProps, GrafanaTheme2, updateDatasourcePluginJsonDataOption } from '@grafana/data';
import { DataSourcePicker } from '@grafana/runtime'; 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'; import { TempoJsonData } from '../types';
interface Props extends DataSourcePluginOptionsEditorProps<TempoJsonData> {} interface Props extends DataSourcePluginOptionsEditorProps<TempoJsonData> {}
export function ServiceGraphSettings({ options, onOptionsChange }: Props) { export function ServiceGraphSettings({ options, onOptionsChange }: Props) {
const styles = useStyles(getStyles); const styles = useStyles2(getStyles);
return ( return (
<div className={css({ width: '100%' })}> <div className={css({ width: '100%' })}>
@ -59,11 +59,11 @@ export function ServiceGraphSettings({ options, onOptionsChange }: Props) {
); );
} }
const getStyles = (theme: GrafanaTheme) => ({ const getStyles = (theme: GrafanaTheme2) => ({
infoText: css` infoText: css`
label: infoText; label: infoText;
padding-bottom: ${theme.spacing.md}; padding-bottom: ${theme.spacing(2)};
color: ${theme.colors.textSemiWeak}; color: ${theme.colors.text.secondary};
`, `,
row: css` row: css`

32
public/app/plugins/panel/alertlist/AlertList.tsx
View File

@ -3,9 +3,9 @@ import { sortBy } from 'lodash';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { useAsync } from 'react-use'; 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 { 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 alertDef from 'app/features/alerting/state/alertDef';
import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv'; import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
import { AlertRuleDTO, AnnotationItemDTO } from 'app/types'; import { AlertRuleDTO, AnnotationItemDTO } from 'app/types';
@ -134,7 +134,7 @@ export function AlertList(props: PanelProps<AlertListOptions>) {
props.options.sortOrder, props.options.sortOrder,
]); ]);
const styles = useStyles(getStyles); const styles = useStyles2(getStyles);
return ( return (
<CustomScrollbar autoHeightMin="100%" autoHeightMax="100%"> <CustomScrollbar autoHeightMin="100%" autoHeightMax="100%">
@ -211,10 +211,10 @@ function getStateFilter(stateFilter: Record<string, boolean>) {
.map(([key, _]) => key); .map(([key, _]) => key);
} }
const getStyles = stylesFactory((theme: GrafanaTheme) => ({ const getStyles = (theme: GrafanaTheme2) => ({
cardContainer: css` cardContainer: css`
padding: ${theme.spacing.xs} 0 ${theme.spacing.xxs} 0; padding: ${theme.spacing(0.5)} 0 ${theme.spacing(0.25)} 0;
line-height: ${theme.typography.lineHeight.md}; line-height: ${theme.typography.body.lineHeight};
margin-bottom: 0px; margin-bottom: 0px;
`, `,
container: css` container: css`
@ -232,26 +232,26 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({
align-items: center; align-items: center;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: ${theme.colors.bg2}; background: ${theme.colors.background.secondary};
padding: ${theme.spacing.xs} ${theme.spacing.sm}; padding: ${theme.spacing(0.5)} ${theme.spacing(1)};
border-radius: ${theme.border.radius.md}; border-radius: ${theme.shape.borderRadius(2)};
margin-bottom: ${theme.spacing.xs}; margin-bottom: ${theme.spacing(0.5)};
`, `,
alertRuleItemIcon: css` alertRuleItemIcon: css`
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: ${theme.spacing.xl}; width: ${theme.spacing(4)};
padding: 0 ${theme.spacing.xs} 0 ${theme.spacing.xxs}; padding: 0 ${theme.spacing(0.5)} 0 ${theme.spacing(0.25)};
margin-right: 0px; margin-right: 0px;
`, `,
alertRuleItemText: css` alertRuleItemText: css`
font-weight: ${theme.typography.weight.bold}; font-weight: ${theme.typography.fontWeightBold};
font-size: ${theme.typography.size.sm}; font-size: ${theme.typography.size.sm};
margin: 0; margin: 0;
`, `,
alertRuleItemTime: css` alertRuleItemTime: css`
color: ${theme.colors.textWeak}; color: ${theme.colors.text.secondary};
font-weight: normal; font-weight: normal;
white-space: nowrap; white-space: nowrap;
`, `,
@ -269,6 +269,6 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({
height: 100%; height: 100%;
`, `,
alertIcon: css` alertIcon: css`
margin-right: ${theme.spacing.xs}; margin-right: ${theme.spacing(0.5)};
`, `,
})); });

32
public/app/plugins/panel/alertlist/UnifiedAlertList.tsx
View File

@ -215,8 +215,8 @@ function filterRules(props: PanelProps<UnifiedAlertListOptions>, rules: PromRule
export const getStyles = (theme: GrafanaTheme2) => ({ export const getStyles = (theme: GrafanaTheme2) => ({
cardContainer: css` cardContainer: css`
padding: ${theme.v1.spacing.xs} 0 ${theme.v1.spacing.xxs} 0; padding: ${theme.spacing(0.5)} 0 ${theme.spacing(0.25)} 0;
line-height: ${theme.v1.typography.lineHeight.md}; line-height: ${theme.typography.body.lineHeight};
margin-bottom: 0px; margin-bottom: 0px;
`, `,
container: css` container: css`
@ -234,34 +234,34 @@ export const getStyles = (theme: GrafanaTheme2) => ({
align-items: center; align-items: center;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: ${theme.v1.colors.bg2}; background: ${theme.colors.background.secondary};
padding: ${theme.v1.spacing.xs} ${theme.v1.spacing.sm}; padding: ${theme.spacing(0.5)} ${theme.spacing(1)};
border-radius: ${theme.v1.border.radius.md}; border-radius: ${theme.shape.borderRadius(2)};
margin-bottom: ${theme.v1.spacing.xs}; margin-bottom: ${theme.spacing(0.5)};
& > * { & > * {
margin-right: ${theme.v1.spacing.sm}; margin-right: ${theme.spacing(1)};
} }
`, `,
alertName: css` alertName: css`
font-size: ${theme.v1.typography.size.md}; font-size: ${theme.typography.h6.fontSize};
font-weight: ${theme.v1.typography.weight.bold}; font-weight: ${theme.typography.fontWeightBold};
`, `,
alertLabels: css` alertLabels: css`
> * { > * {
margin-right: ${theme.v1.spacing.xs}; margin-right: ${theme.spacing(0.5)};
} }
`, `,
alertDuration: css` alertDuration: css`
font-size: ${theme.v1.typography.size.sm}; font-size: ${theme.typography.bodySmall.fontSize};
`, `,
alertRuleItemText: css` alertRuleItemText: css`
font-weight: ${theme.v1.typography.weight.bold}; font-weight: ${theme.typography.fontWeightBold};
font-size: ${theme.v1.typography.size.sm}; font-size: ${theme.typography.bodySmall.fontSize};
margin: 0; margin: 0;
`, `,
alertRuleItemTime: css` alertRuleItemTime: css`
color: ${theme.v1.colors.textWeak}; color: ${theme.colors.text.secondary};
font-weight: normal; font-weight: normal;
white-space: nowrap; white-space: nowrap;
`, `,
@ -279,7 +279,7 @@ export const getStyles = (theme: GrafanaTheme2) => ({
height: 100%; height: 100%;
`, `,
alertIcon: css` alertIcon: css`
margin-right: ${theme.v1.spacing.xs}; margin-right: ${theme.spacing(0.5)};
`, `,
instanceDetails: css` instanceDetails: css`
min-width: 1px; min-width: 1px;
@ -288,6 +288,6 @@ export const getStyles = (theme: GrafanaTheme2) => ({
text-overflow: ellipsis; text-overflow: ellipsis;
`, `,
customGroupDetails: css` customGroupDetails: css`
margin-bottom: ${theme.v1.spacing.xs}; margin-bottom: ${theme.spacing(0.5)};
`, `,
}); });

2
public/app/plugins/panel/alertlist/unified-alerting/UngroupedView.tsx
View File

@ -79,7 +79,7 @@ const getStateTagStyles = (theme: GrafanaTheme2) => ({
display: inline-block; display: inline-block;
color: white; color: white;
border-radius: ${theme.shape.borderRadius()}; border-radius: ${theme.shape.borderRadius()};
font-size: ${theme.v1.typography.size.sm}; font-size: ${theme.typography.bodySmall.fontSize};
text-transform: capitalize; text-transform: capitalize;
line-height: 1.2; line-height: 1.2;
flex-shrink: 0; flex-shrink: 0;

10
public/app/plugins/panel/annolist/AnnoListPanel.tsx
View File

@ -9,7 +9,7 @@ import {
AppEvents, AppEvents,
dateTime, dateTime,
DurationUnit, DurationUnit,
GrafanaTheme, GrafanaTheme2,
locationUtil, locationUtil,
PanelProps, PanelProps,
} from '@grafana/data'; } from '@grafana/data';
@ -37,7 +37,7 @@ interface State {
queryTags: string[]; queryTags: string[];
} }
export class AnnoListPanel extends PureComponent<Props, State> { export class AnnoListPanel extends PureComponent<Props, State> {
style = getStyles(config.theme); style = getStyles(config.theme2);
subs = new Subscription(); subs = new Subscription();
tagListRef = React.createRef<HTMLUListElement>(); tagListRef = React.createRef<HTMLUListElement>();
@ -290,7 +290,7 @@ export class AnnoListPanel extends PureComponent<Props, State> {
} }
} }
const getStyles = stylesFactory((theme: GrafanaTheme) => ({ const getStyles = stylesFactory((theme: GrafanaTheme2) => ({
noneFound: css` noneFound: css`
display: flex; display: flex;
align-items: center; align-items: center;
@ -300,9 +300,9 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({
`, `,
filter: css({ filter: css({
display: 'flex', display: 'flex',
padding: `0px ${theme.spacing.xs}`, padding: `0px ${theme.spacing(0.5)}`,
b: { b: {
paddingRight: theme.spacing.sm, paddingRight: theme.spacing(1),
}, },
}), }),
tagList: css({ tagList: css({

2
public/app/plugins/panel/canvas/InlineEdit.tsx
View File

@ -103,7 +103,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
inlineEditorContainer: css` inlineEditorContainer: css`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: ${theme.v1.colors.panelBg}; background: ${theme.components.panel.background};
border: 1px solid ${theme.colors.border.strong}; border: 1px solid ${theme.colors.border.strong};
box-shadow: 5px 5px 20px -5px #000000; box-shadow: 5px 5px 20px -5px #000000;
z-index: 1000; z-index: 1000;

2
public/app/plugins/panel/canvas/editor/TreeNavigationEditor.tsx
View File

@ -32,7 +32,7 @@ export const TreeNavigationEditor = ({ item }: StandardEditorProps<any, TreeView
const globalCSS = getGlobalStyles(theme); const globalCSS = getGlobalStyles(theme);
const styles = useStyles2(getStyles); const styles = useStyles2(getStyles);
const selectedBgColor = theme.v1.colors.formInputBorderActive; const selectedBgColor = theme.colors.primary.border;
const { settings } = item; const { settings } = item;
const selection = useMemo( const selection = useMemo(
() => (settings?.selected ? settings.selected.map((v) => v?.getName()) : []), () => (settings?.selected ? settings.selected.map((v) => v?.getName()) : []),

8
public/app/plugins/panel/canvas/editor/TreeNodeTitle.tsx
View File

@ -106,13 +106,13 @@ const getStyles = (theme: GrafanaTheme2) => ({
align-items: center; align-items: center;
flex-grow: 1; flex-grow: 1;
overflow: hidden; overflow: hidden;
margin-right: ${theme.v1.spacing.sm}; margin-right: ${theme.spacing(1)};
`, `,
layerName: css` layerName: css`
font-weight: ${theme.v1.typography.weight.semibold}; font-weight: ${theme.typography.fontWeightMedium};
color: ${theme.v1.colors.textBlue}; color: ${theme.colors.primary.text};
cursor: pointer; cursor: pointer;
overflow: hidden; overflow: hidden;
margin-left: ${theme.v1.spacing.xs}; margin-left: ${theme.spacing(0.5)};
`, `,
}); });

14
public/app/plugins/panel/canvas/globalStyles.ts
View File

@ -58,7 +58,7 @@ export function getGlobalStyles(theme: GrafanaTheme2) {
content: ''; content: '';
} }
& ~ .rc-tree-treenode { & ~ .rc-tree-treenode {
border-left: 2px solid ${theme.v1.colors.formInputBorder}; border-left: 2px solid ${theme.components.input.borderColor};
} }
} }
&.drop-target { &.drop-target {
@ -88,17 +88,17 @@ export function getGlobalStyles(theme: GrafanaTheme2) {
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
border: 1px solid ${theme.v1.colors.formInputBorder}; border: 1px solid ${theme.components.input.borderColor};
border-radius: ${theme.v1.border.radius.sm}; border-radius: ${theme.shape.borderRadius(1)};
background: ${theme.v1.colors.bg2}; background: ${theme.colors.background.secondary};
min-height: ${theme.v1.spacing.formInputHeight}px; min-height: ${theme.spacing.gridSize * 4}px;
&:hover { &:hover {
border: 1px solid ${theme.v1.colors.formInputBorderHover}; border: 1px solid ${theme.components.input.borderHover};
} }
&.rc-tree-node-selected { &.rc-tree-node-selected {
border: 1px solid ${theme.v1.colors.formInputBorderActive}; border: 1px solid ${theme.colors.primary.border};
opacity: 1; opacity: 1;
} }
} }

2
public/app/plugins/panel/gauge/GaugePanel.tsx
View File

@ -28,7 +28,7 @@ export class GaugePanel extends PureComponent<PanelProps<PanelOptions>> {
text={options.text} text={options.text}
showThresholdLabels={options.showThresholdLabels} showThresholdLabels={options.showThresholdLabels}
showThresholdMarkers={options.showThresholdMarkers} showThresholdMarkers={options.showThresholdMarkers}
theme={config.theme} theme={config.theme2}
onClick={openMenu} onClick={openMenu}
className={targetClassName} className={targetClassName}
/> />

10
public/app/plugins/panel/geomap/components/DebugOverlay.tsx
View File

@ -5,7 +5,7 @@ import { transform } from 'ol/proj';
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import tinycolor from 'tinycolor2'; import tinycolor from 'tinycolor2';
import { GrafanaTheme } from '@grafana/data'; import { GrafanaTheme2 } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors/src'; import { selectors } from '@grafana/e2e-selectors/src';
import { stylesFactory } from '@grafana/ui'; import { stylesFactory } from '@grafana/ui';
import { config } from 'app/core/config'; import { config } from 'app/core/config';
@ -20,7 +20,7 @@ interface State {
} }
export class DebugOverlay extends PureComponent<Props, State> { export class DebugOverlay extends PureComponent<Props, State> {
style = getStyles(config.theme); style = getStyles(config.theme2);
constructor(props: Props) { constructor(props: Props) {
super(props); super(props);
@ -64,10 +64,10 @@ export class DebugOverlay extends PureComponent<Props, State> {
} }
} }
const getStyles = stylesFactory((theme: GrafanaTheme) => ({ const getStyles = stylesFactory((theme: GrafanaTheme2) => ({
infoWrap: css` infoWrap: css`
color: ${theme.colors.text}; color: ${theme.colors.text.primary};
background: ${tinycolor(theme.colors.panelBg).setAlpha(0.7).toString()}; background: ${tinycolor(theme.components.panel.background).setAlpha(0.7).toString()};
border-radius: 2px; border-radius: 2px;
padding: 8px; padding: 8px;
`, `,

34
public/app/plugins/panel/gettingstarted/GettingStarted.tsx
View File

@ -114,53 +114,53 @@ export class GettingStarted extends PureComponent<PanelProps, State> {
} }
const getStyles = stylesFactory(() => { const getStyles = stylesFactory(() => {
const { theme } = config; const theme = config.theme2;
return { return {
container: css` container: css`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; 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; background-size: cover;
padding: ${theme.spacing.xl} ${theme.spacing.md} 0; padding: ${theme.spacing(4)} ${theme.spacing(2)} 0;
`, `,
content: css` content: css`
label: content; label: content;
display: flex; display: flex;
justify-content: center; justify-content: center;
@media only screen and (max-width: ${theme.breakpoints.xxl}) { ${theme.breakpoints.down('xxl')} {
margin-left: ${theme.spacing.lg}; margin-left: ${theme.spacing(3)};
justify-content: flex-start; justify-content: flex-start;
} }
`, `,
header: css` header: css`
label: header; label: header;
margin-bottom: ${theme.spacing.lg}; margin-bottom: ${theme.spacing(3)};
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@media only screen and (min-width: ${theme.breakpoints.lg}) { ${theme.breakpoints.down('lg')} {
flex-direction: row; flex-direction: row;
} }
`, `,
headerLogo: css` headerLogo: css`
height: 58px; height: 58px;
padding-right: ${theme.spacing.md}; padding-right: ${theme.spacing(2)};
display: none; display: none;
@media only screen and (min-width: ${theme.breakpoints.md}) { ${theme.breakpoints.up('md')} {
display: block; display: block;
} }
`, `,
heading: css` heading: css`
label: heading; label: heading;
margin-right: ${theme.spacing.lg}; margin-right: ${theme.spacing(3)};
margin-bottom: ${theme.spacing.lg}; margin-bottom: ${theme.spacing(3)};
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
@media only screen and (min-width: ${theme.breakpoints.md}) { ${theme.breakpoints.up('md')} {
margin-bottom: 0; margin-bottom: 0;
} }
`, `,
@ -173,14 +173,14 @@ const getStyles = stylesFactory(() => {
previous: css` previous: css`
left: 10px; left: 10px;
@media only screen and (max-width: ${theme.breakpoints.md}) { ${theme.breakpoints.down('md')} {
left: 0; left: 0;
} }
`, `,
forward: css` forward: css`
right: 10px; right: 10px;
@media only screen and (max-width: ${theme.breakpoints.md}) { ${theme.breakpoints.down('md')} {
right: 0; right: 0;
} }
`, `,
@ -189,8 +189,8 @@ const getStyles = stylesFactory(() => {
justify-content: flex-end; justify-content: flex-end;
cursor: pointer; cursor: pointer;
text-decoration: underline; text-decoration: underline;
margin-right: ${theme.spacing.md}; margin-right: ${theme.spacing(2)};
margin-bottom: ${theme.spacing.sm}; margin-bottom: ${theme.spacing(1)};
`, `,
loading: css` loading: css`
display: flex; display: flex;
@ -199,7 +199,7 @@ const getStyles = stylesFactory(() => {
height: 100%; height: 100%;
`, `,
loadingText: css` loadingText: css`
margin-right: ${theme.spacing.sm}; margin-right: ${theme.spacing(1)};
`, `,
}; };
}); });

28
public/app/plugins/panel/gettingstarted/components/DocsCard.tsx
View File

@ -1,8 +1,8 @@
import { css } from '@emotion/css'; import { css } from '@emotion/css';
import React, { FC } from 'react'; import React, { useCallback } from 'react';
import { GrafanaTheme } from '@grafana/data'; import { GrafanaTheme2 } from '@grafana/data';
import { Icon, stylesFactory, useTheme } from '@grafana/ui'; import { Icon, useStyles2 } from '@grafana/ui';
import { Card } from '../types'; import { Card } from '../types';
@ -12,9 +12,9 @@ interface Props {
card: Card; card: Card;
} }
export const DocsCard: FC<Props> = ({ card }) => { export const DocsCard = ({ card }: Props) => {
const theme = useTheme(); const styles = useStyles2(useCallback((theme: GrafanaTheme2) => getStyles(theme, card.done), [card.done]));
const styles = getStyles(theme, card.done); const iconStyles = useStyles2(useCallback((theme: GrafanaTheme2) => iconStyle(theme, card.done), [card.done]));
return ( return (
<div className={styles.card}> <div className={styles.card}>
@ -23,7 +23,7 @@ export const DocsCard: FC<Props> = ({ card }) => {
<div className={styles.heading}>{card.done ? 'complete' : card.heading}</div> <div className={styles.heading}>{card.done ? 'complete' : card.heading}</div>
<h4 className={styles.title}>{card.title}</h4> <h4 className={styles.title}>{card.title}</h4>
<div> <div>
<Icon className={iconStyle(theme, card.done)} name={card.icon} size="xxl" /> <Icon className={iconStyles} name={card.icon} size="xxl" />
</div> </div>
</a> </a>
</div> </div>
@ -39,34 +39,34 @@ export const DocsCard: FC<Props> = ({ card }) => {
); );
}; };
const getStyles = stylesFactory((theme: GrafanaTheme, complete: boolean) => { const getStyles = (theme: GrafanaTheme2, complete: boolean) => {
return { return {
card: css` card: css`
${cardStyle(theme, complete)} ${cardStyle(theme, complete)}
min-width: 230px; min-width: 230px;
@media only screen and (max-width: ${theme.breakpoints.md}) { ${theme.breakpoints.down('md')} {
min-width: 192px; min-width: 192px;
} }
`, `,
heading: css` heading: css`
text-transform: uppercase; text-transform: uppercase;
color: ${complete ? theme.palette.blue95 : '#FFB357'}; color: ${complete ? theme.v1.palette.blue95 : '#FFB357'};
margin-bottom: ${theme.spacing.md}; margin-bottom: ${theme.spacing(2)};
`, `,
title: css` title: css`
margin-bottom: ${theme.spacing.md}; margin-bottom: ${theme.spacing(2)};
`, `,
url: css` url: css`
display: inline-block; display: inline-block;
`, `,
learnUrl: css` learnUrl: css`
border-top: 1px solid ${theme.colors.border1}; border-top: 1px solid ${theme.colors.border.weak};
position: absolute; position: absolute;
bottom: 0; bottom: 0;
padding: 8px 16px; padding: 8px 16px;
width: 100%; width: 100%;
`, `,
}; };
}); };

21
public/app/plugins/panel/gettingstarted/components/Step.tsx
View File

@ -1,8 +1,8 @@
import { css } from '@emotion/css'; import { css } from '@emotion/css';
import React, { FC } from 'react'; import React, { FC } from 'react';
import { GrafanaTheme } from '@grafana/data'; import { GrafanaTheme2 } from '@grafana/data';
import { stylesFactory, useTheme } from '@grafana/ui'; import { useStyles2 } from '@grafana/ui';
import { Card, SetupStep, TutorialCardType } from '../types'; import { Card, SetupStep, TutorialCardType } from '../types';
@ -14,8 +14,7 @@ interface Props {
} }
export const Step: FC<Props> = ({ step }) => { export const Step: FC<Props> = ({ step }) => {
const theme = useTheme(); const styles = useStyles2(getStyles);
const styles = getStyles(theme);
return ( return (
<div className={styles.setup}> <div className={styles.setup}>
@ -36,7 +35,7 @@ export const Step: FC<Props> = ({ step }) => {
); );
}; };
const getStyles = stylesFactory((theme: GrafanaTheme) => { const getStyles = (theme: GrafanaTheme2) => {
return { return {
setup: css` setup: css`
display: flex; display: flex;
@ -46,15 +45,15 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
width: 172px; width: 172px;
margin-right: 5%; margin-right: 5%;
@media only screen and (max-width: ${theme.breakpoints.xxl}) { ${theme.breakpoints.down('xxl')} {
margin-right: ${theme.spacing.xl}; margin-right: ${theme.spacing(4)};
} }
@media only screen and (max-width: ${theme.breakpoints.sm}) { ${theme.breakpoints.down('sm')} {
display: none; display: none;
} }
`, `,
title: css` title: css`
color: ${theme.palette.blue95}; color: ${theme.v1.palette.blue95};
`, `,
cards: css` cards: css`
overflow-x: scroll; overflow-x: scroll;
@ -63,9 +62,9 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
display: flex; display: flex;
justify-content: center; justify-content: center;
@media only screen and (max-width: ${theme.breakpoints.xxl}) { ${theme.breakpoints.down('xxl')} {
justify-content: flex-start; justify-content: flex-start;
} }
`, `,
}; };
}); };

30
public/app/plugins/panel/gettingstarted/components/TutorialCard.tsx
View File

@ -1,8 +1,8 @@
import { css } from '@emotion/css'; import { css } from '@emotion/css';
import React, { FC, MouseEvent } from 'react'; import React, { FC, MouseEvent, useCallback } from 'react';
import { GrafanaTheme } from '@grafana/data'; import { GrafanaTheme2 } from '@grafana/data';
import { Icon, stylesFactory, useTheme } from '@grafana/ui'; import { Icon, useStyles2 } from '@grafana/ui';
import store from 'app/core/store'; import store from 'app/core/store';
import { TutorialCardType } from '../types'; import { TutorialCardType } from '../types';
@ -14,8 +14,8 @@ interface Props {
} }
export const TutorialCard: FC<Props> = ({ card }) => { export const TutorialCard: FC<Props> = ({ card }) => {
const theme = useTheme(); const styles = useStyles2(useCallback((theme: GrafanaTheme2) => getStyles(theme, card.done), [card.done]));
const styles = getStyles(theme, card.done); const iconStyles = useStyles2(useCallback((theme: GrafanaTheme2) => iconStyle(theme, card.done), [card.done]));
return ( return (
<a <a
@ -30,7 +30,7 @@ export const TutorialCard: FC<Props> = ({ card }) => {
<div className={styles.heading}>{card.done ? 'complete' : card.heading}</div> <div className={styles.heading}>{card.done ? 'complete' : card.heading}</div>
<h4 className={styles.cardTitle}>{card.title}</h4> <h4 className={styles.cardTitle}>{card.title}</h4>
<div className={styles.info}>{card.info}</div> <div className={styles.info}>{card.info}</div>
<Icon className={iconStyle(theme, card.done)} name={card.icon} size="xxl" /> <Icon className={iconStyles} name={card.icon} size="xxl" />
</div> </div>
</a> </a>
); );
@ -44,39 +44,39 @@ const handleTutorialClick = (event: MouseEvent<HTMLAnchorElement>, card: Tutoria
} }
}; };
const getStyles = stylesFactory((theme: GrafanaTheme, complete: boolean) => { const getStyles = (theme: GrafanaTheme2, complete: boolean) => {
return { return {
card: css` card: css`
${cardStyle(theme, complete)} ${cardStyle(theme, complete)}
width: 460px; width: 460px;
min-width: 460px; min-width: 460px;
@media only screen and (max-width: ${theme.breakpoints.xl}) { ${theme.breakpoints.down('xl')} {
min-width: 368px; min-width: 368px;
} }
@media only screen and (max-width: ${theme.breakpoints.lg}) { ${theme.breakpoints.down('lg')} {
min-width: 272px; min-width: 272px;
} }
`, `,
type: css` type: css`
color: ${theme.colors.textBlue}; color: ${theme.colors.primary.text};
text-transform: uppercase; text-transform: uppercase;
`, `,
heading: css` heading: css`
text-transform: uppercase; text-transform: uppercase;
color: ${theme.colors.textBlue}; color: ${theme.colors.primary.text};
margin-bottom: ${theme.spacing.sm}; margin-bottom: ${theme.spacing(1)};
`, `,
cardTitle: css` cardTitle: css`
margin-bottom: ${theme.spacing.md}; margin-bottom: ${theme.spacing(2)};
`, `,
info: css` info: css`
margin-bottom: ${theme.spacing.md}; margin-bottom: ${theme.spacing(2)};
`, `,
status: css` status: css`
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
`, `,
}; };
}); };

35
public/app/plugins/panel/gettingstarted/components/sharedStyles.ts
View File

@ -1,9 +1,8 @@
import { css } from '@emotion/css'; import { css } from '@emotion/css';
import { GrafanaTheme } from '@grafana/data'; import { GrafanaTheme2 } from '@grafana/data';
import { stylesFactory } from '@grafana/ui';
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 completeGradient = 'linear-gradient(to right, #5182CC 0%, #245BAF 100%)';
const darkThemeGradients = complete ? completeGradient : 'linear-gradient(to right, #f05a28 0%, #fbca0a 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%)'; 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; const borderGradient = theme.isDark ? darkThemeGradients : lightThemeGradients;
return ` return `
background-color: ${theme.colors.bg2}; background-color: ${theme.colors.background.secondary};
margin-right: ${theme.spacing.xl}; margin-right: ${theme.spacing(4)};
border: 1px solid ${theme.colors.border1}; border: 1px solid ${theme.colors.border.weak};
border-bottom-left-radius: ${theme.border.radius.md}; border-bottom-left-radius: ${theme.shape.borderRadius(2)};
border-bottom-right-radius: ${theme.border.radius.md}; border-bottom-right-radius: ${theme.shape.borderRadius(2)};
position: relative; position: relative;
max-height: 230px; max-height: 230px;
@media only screen and (max-width: ${theme.breakpoints.xxl}) { ${theme.breakpoints.down('xxl')} {
margin-right: ${theme.spacing.md}; margin-right: ${theme.spacing(2)};
} }
&::before { &::before {
display: block; display: block;
@ -33,17 +32,15 @@ export const cardStyle = stylesFactory((theme: GrafanaTheme, complete: boolean)
background-image: ${borderGradient}; background-image: ${borderGradient};
} }
`; `;
}); };
export const iconStyle = stylesFactory( export const iconStyle = (theme: GrafanaTheme2, complete: boolean) => css`
(theme: GrafanaTheme, complete: boolean) => css` color: ${complete ? theme.v1.palette.blue95 : theme.colors.text.secondary};
color: ${complete ? theme.palette.blue95 : theme.colors.textWeak};
@media only screen and (max-width: ${theme.breakpoints.sm}) { ${theme.breakpoints.down('sm')} {
display: none; display: none;
} }
` `;
);
export const cardContent = css` export const cardContent = css`
padding: 16px; padding: 16px;

2
public/app/plugins/panel/graph/data_processor.ts
View File

@ -80,7 +80,7 @@ export class DataProcessor {
const series = new TimeSeries({ const series = new TimeSeries({
datapoints: datapoints || [], datapoints: datapoints || [],
alias: alias, alias: alias,
color: config.theme.visualization.getColorByName(color), color: config.theme2.visualization.getColorByName(color),
unit: field.config ? field.config.unit : undefined, unit: field.config ? field.config.unit : undefined,
dataFrameIndex, dataFrameIndex,
fieldIndex, fieldIndex,

2
public/app/plugins/panel/graph/module.ts
View File

@ -297,7 +297,7 @@ export class GraphCtrl extends MetricsPanelCtrl {
} }
onColorChange = (series: any, color: string) => { 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.panel.aliasColors[series.alias] = color;
this.render(); this.render();
}; };

8
public/app/plugins/panel/graph/threshold_manager.ts
View File

@ -234,12 +234,12 @@ export class ThresholdManager {
if (threshold.yaxis === 'right' && this.hasSecondYAxis) { if (threshold.yaxis === 'right' && this.hasSecondYAxis) {
options.grid.markings.push({ options.grid.markings.push({
y2axis: { from: threshold.value, to: limit }, y2axis: { from: threshold.value, to: limit },
color: config.theme.visualization.getColorByName(fillColor), color: config.theme2.visualization.getColorByName(fillColor),
}); });
} else { } else {
options.grid.markings.push({ options.grid.markings.push({
yaxis: { from: threshold.value, to: limit }, 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) { if (threshold.yaxis === 'right' && this.hasSecondYAxis) {
options.grid.markings.push({ options.grid.markings.push({
y2axis: { from: threshold.value, to: threshold.value }, y2axis: { from: threshold.value, to: threshold.value },
color: config.theme.visualization.getColorByName(lineColor), color: config.theme2.visualization.getColorByName(lineColor),
}); });
} else { } else {
options.grid.markings.push({ options.grid.markings.push({
yaxis: { from: threshold.value, to: threshold.value }, yaxis: { from: threshold.value, to: threshold.value },
color: config.theme.visualization.getColorByName(lineColor), color: config.theme2.visualization.getColorByName(lineColor),
}); });
} }
} }

4
public/app/plugins/panel/graph/thresholds_form.ts
View File

@ -64,8 +64,8 @@ export class ThresholdFormCtrl {
onThresholdTypeChange(index: number) { onThresholdTypeChange(index: number) {
// Because of the ng-model binding, threshold's color mode is already set here // Because of the ng-model binding, threshold's color mode is already set here
if (this.panel.thresholds[index].colorMode === 'custom') { 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].fillColor = tinycolor(config.theme2.v1.palette.blue85).setAlpha(0.2).toRgbString();
this.panel.thresholds[index].lineColor = tinycolor(config.theme.palette.blue77).setAlpha(0.6).toRgbString(); this.panel.thresholds[index].lineColor = tinycolor(config.theme2.v1.palette.blue77).setAlpha(0.6).toRgbString();
} }
this.panelCtrl.render(); this.panelCtrl.render();
} }

6
public/app/plugins/panel/graph/time_region_manager.ts
View File

@ -1,7 +1,7 @@
import 'vendor/flot/jquery.flot'; import 'vendor/flot/jquery.flot';
import { map } from 'lodash'; 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 { config } from 'app/core/config';
import { calculateTimesWithin, TimeRegionConfig } from 'app/core/utils/timeRegions'; 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) { if (Object.keys(colorModes).indexOf(timeRegion.colorMode) === -1) {
timeRegion.colorMode = 'red'; timeRegion.colorMode = 'red';
} }
@ -109,7 +109,7 @@ export class TimeRegionManager {
const timeRegion: GraphTimeRegionConfig = tr; const timeRegion: GraphTimeRegionConfig = tr;
const regions = calculateTimesWithin(tr, tRange); const regions = calculateTimesWithin(tr, tRange);
if (regions.length) { if (regions.length) {
const timeRegionColor = getColor(timeRegion, config.theme); const timeRegionColor = getColor(timeRegion, config.theme2);
for (let j = 0; j < regions.length; j++) { for (let j = 0; j < regions.length; j++) {
const r = regions[j]; const r = regions[j];

2
public/app/plugins/panel/heatmap-old/color_legend.ts
View File

@ -273,7 +273,7 @@ function drawSimpleOpacityLegend(elem: JQuery, options: { colorScale: string; ex
.attr('width', rangeStep) .attr('width', rangeStep)
.attr('height', legendHeight) .attr('height', legendHeight)
.attr('stroke-width', 0) .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)); .style('opacity', (d) => legendOpacityScale(d));
} }
} }

2
public/app/plugins/panel/heatmap-old/rendering.ts
View File

@ -659,7 +659,7 @@ export class HeatmapRenderer {
getCardColor(d: { count: any }) { getCardColor(d: { count: any }) {
if (this.panel.color.mode === 'opacity') { 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 { } else {
return this.colorScale(d.count); return this.colorScale(d.count);
} }

8
public/app/plugins/panel/live/LiveChannelEditor.tsx
View File

@ -6,7 +6,7 @@ import {
LiveChannelAddress, LiveChannelAddress,
SelectableValue, SelectableValue,
StandardEditorProps, StandardEditorProps,
GrafanaTheme, GrafanaTheme2,
} from '@grafana/data'; } from '@grafana/data';
import { Select, Alert, Label, stylesFactory } from '@grafana/ui'; import { Select, Alert, Label, stylesFactory } from '@grafana/ui';
import { config } from 'app/core/config'; import { config } from 'app/core/config';
@ -86,7 +86,7 @@ export class LiveChannelEditor extends PureComponent<Props, State> {
render() { render() {
const { namespaces, paths } = this.state; const { namespaces, paths } = this.state;
const { scope, namespace, path } = this.props.value; const { scope, namespace, path } = this.props.value;
const style = getStyles(config.theme); const style = getStyles(config.theme2);
return ( return (
<> <>
@ -146,8 +146,8 @@ function findPathOption(paths: Array<SelectableValue<string>>, path?: string): S
return undefined; return undefined;
} }
const getStyles = stylesFactory((theme: GrafanaTheme) => ({ const getStyles = stylesFactory((theme: GrafanaTheme2) => ({
dropWrap: css` dropWrap: css`
margin-bottom: ${theme.spacing.sm}; margin-bottom: ${theme.spacing(1)};
`, `,
})); }));

18
public/app/plugins/panel/live/LivePanel.tsx
View File

@ -4,7 +4,7 @@ import React, { PureComponent } from 'react';
import { Unsubscribable, PartialObserver } from 'rxjs'; import { Unsubscribable, PartialObserver } from 'rxjs';
import { import {
GrafanaTheme, GrafanaTheme2,
PanelProps, PanelProps,
LiveChannelStatusEvent, LiveChannelStatusEvent,
isValidLiveChannelAddress, isValidLiveChannelAddress,
@ -38,7 +38,7 @@ interface State {
export class LivePanel extends PureComponent<Props, State> { export class LivePanel extends PureComponent<Props, State> {
private readonly isValid: boolean; private readonly isValid: boolean;
subscription?: Unsubscribable; subscription?: Unsubscribable;
styles = getStyles(config.theme); styles = getStyles(config.theme2);
constructor(props: Props) { constructor(props: Props) {
super(props); super(props);
@ -301,31 +301,31 @@ export class LivePanel extends PureComponent<Props, State> {
} }
} }
const getStyles = stylesFactory((theme: GrafanaTheme) => ({ const getStyles = stylesFactory((theme: GrafanaTheme2) => ({
statusWrap: css` statusWrap: css`
margin: auto; margin: auto;
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
background: ${theme.colors.panelBg}; background: ${theme.components.panel.background};
padding: 10px; padding: 10px;
z-index: ${theme.zIndex.modal}; z-index: ${theme.zIndex.modal};
`, `,
status: { status: {
[LiveChannelConnectionState.Pending]: css` [LiveChannelConnectionState.Pending]: css`
border: 1px solid ${theme.palette.brandPrimary}; border: 1px solid ${theme.v1.palette.orange};
`, `,
[LiveChannelConnectionState.Connected]: css` [LiveChannelConnectionState.Connected]: css`
border: 1px solid ${theme.palette.brandSuccess}; border: 1px solid ${theme.colors.success.main};
`, `,
[LiveChannelConnectionState.Connecting]: css` [LiveChannelConnectionState.Connecting]: css`
border: 1px solid ${theme.palette.brandWarning}; border: 1px solid ${theme.v1.palette.brandWarning};
`, `,
[LiveChannelConnectionState.Disconnected]: css` [LiveChannelConnectionState.Disconnected]: css`
border: 1px solid ${theme.palette.brandWarning}; border: 1px solid ${theme.colors.warning.main};
`, `,
[LiveChannelConnectionState.Shutdown]: css` [LiveChannelConnectionState.Shutdown]: css`
border: 1px solid ${theme.palette.brandDanger}; border: 1px solid ${theme.colors.error.main};
`, `,
[LiveChannelConnectionState.Invalid]: css` [LiveChannelConnectionState.Invalid]: css`
border: 1px solid red; border: 1px solid red;

10
public/app/plugins/panel/nodeGraph/Legend.tsx
View File

@ -2,9 +2,9 @@ import { css } from '@emotion/css';
import { identity } from 'lodash'; import { identity } from 'lodash';
import React, { useCallback } from 'react'; 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 { 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 { Config } from './layout';
import { NodeDatum } from './types'; import { NodeDatum } from './types';
@ -33,8 +33,8 @@ interface Props {
export const Legend = function Legend(props: Props) { export const Legend = function Legend(props: Props) {
const { nodes, onSort, sort, sortable } = props; const { nodes, onSort, sort, sortable } = props;
const theme = useTheme(); const theme = useTheme2();
const styles = useStyles(getStyles); const styles = useStyles2(getStyles);
const colorItems = getColorLegendItems(nodes, theme); const colorItems = getColorLegendItems(nodes, theme);
const onClick = useCallback( const onClick = useCallback(
@ -70,7 +70,7 @@ interface ItemData {
field: Field; field: Field;
} }
function getColorLegendItems(nodes: NodeDatum[], theme: GrafanaTheme): Array<VizLegendItem<ItemData>> { function getColorLegendItems(nodes: NodeDatum[], theme: GrafanaTheme2): Array<VizLegendItem<ItemData>> {
if (!nodes.length) { if (!nodes.length) {
return []; return [];
} }