mirror of
https://github.com/grafana/grafana.git
synced 2026-07-29 15:59:50 -05:00
Theming: Make new theme exposed by ThemeContext and make new theme include v1 for compatability (to pass to useTheme) (#33207)
* WIP: Making new theme the default * Progress * Updates, lots of updates * Things are working * Fixed issues with storybook * Fixed tests
This commit is contained in:
Torkel Ödegaard
@@ -1,7 +1,7 @@
|
||||
import React, { FC } from 'react';
|
||||
import { css } from '@emotion/css';
|
||||
import { Tab, TabsBar, Icon, IconName, useStyles } from '@grafana/ui';
|
||||
import { NavModel, NavModelItem, NavModelBreadcrumb, GrafanaTheme } from '@grafana/data';
|
||||
import { Tab, TabsBar, Icon, IconName, useStyles2 } from '@grafana/ui';
|
||||
import { NavModel, NavModelItem, NavModelBreadcrumb, GrafanaThemeV2 } from '@grafana/data';
|
||||
import { PanelHeaderMenuItem } from 'app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuItem';
|
||||
|
||||
export interface Props {
|
||||
@@ -72,7 +72,7 @@ const Navigation = ({ children }: { children: NavModelItem[] }) => {
|
||||
};
|
||||
|
||||
export const PageHeader: FC<Props> = ({ model }) => {
|
||||
const styles = useStyles(getStyles);
|
||||
const styles = useStyles2(getStyles);
|
||||
|
||||
if (!model) {
|
||||
return null;
|
||||
@@ -137,10 +137,10 @@ function renderTitle(title: string, breadcrumbs: NavModelBreadcrumb[]) {
|
||||
return <h1 className="page-header__title">{breadcrumbsResult}</h1>;
|
||||
}
|
||||
|
||||
const getStyles = (theme: GrafanaTheme) => ({
|
||||
const getStyles = (theme: GrafanaThemeV2) => ({
|
||||
headerCanvas: css`
|
||||
background: ${theme.v2.palette.background.canvas};
|
||||
border-bottom: 1px solid ${theme.v2.palette.border.weak};
|
||||
background: ${theme.palette.background.canvas};
|
||||
border-bottom: 1px solid ${theme.palette.border.weak};
|
||||
`,
|
||||
});
|
||||
|
||||
|
||||
@@ -1,13 +1,18 @@
|
||||
import { getTheme } from '@grafana/ui';
|
||||
import { ThemeChangedEvent } from 'app/types/events';
|
||||
import appEvents from '../app_events';
|
||||
import { config } from '../config';
|
||||
import { PreferencesService } from './PreferencesService';
|
||||
import { contextSrv } from '../core';
|
||||
import { createTheme } from '@grafana/data';
|
||||
|
||||
export async function toggleTheme(runtimeOnly: boolean) {
|
||||
const currentTheme = config.theme;
|
||||
const newTheme = getTheme(currentTheme.isDark ? 'light' : 'dark');
|
||||
const newTheme = createTheme({
|
||||
palette: {
|
||||
mode: currentTheme.isDark ? 'light' : 'dark',
|
||||
},
|
||||
});
|
||||
|
||||
appEvents.publish(new ThemeChangedEvent(newTheme));
|
||||
|
||||
if (runtimeOnly) {
|
||||
@@ -17,7 +22,7 @@ export async function toggleTheme(runtimeOnly: boolean) {
|
||||
// Add css file for new theme
|
||||
const newCssLink = document.createElement('link');
|
||||
newCssLink.rel = 'stylesheet';
|
||||
newCssLink.href = config.bootData.themePaths[newTheme.type];
|
||||
newCssLink.href = config.bootData.themePaths[newTheme.palette.mode];
|
||||
document.body.appendChild(newCssLink);
|
||||
|
||||
// Remove old css file
|
||||
@@ -43,6 +48,6 @@ export async function toggleTheme(runtimeOnly: boolean) {
|
||||
|
||||
await service.update({
|
||||
...currentPref,
|
||||
theme: newTheme.type,
|
||||
theme: newTheme.palette.mode,
|
||||
});
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@ import { config, GrafanaBootConfig } from '@grafana/runtime';
|
||||
import { ThemeContext } from '@grafana/ui';
|
||||
import { appEvents } from '../core';
|
||||
import { ThemeChangedEvent } from 'app/types/events';
|
||||
import { GrafanaTheme } from '@grafana/data';
|
||||
import { createTheme } from '@grafana/data';
|
||||
|
||||
export const ConfigContext = React.createContext<GrafanaBootConfig>(config);
|
||||
export const ConfigConsumer = ConfigContext.Consumer;
|
||||
@@ -16,11 +16,11 @@ export const provideConfig = (component: React.ComponentType<any>) => {
|
||||
};
|
||||
|
||||
export const ThemeProvider = ({ children }: { children: React.ReactNode }) => {
|
||||
const [theme, setTheme] = useState<GrafanaTheme>(config.theme);
|
||||
const [theme, setTheme] = useState(getCurrentUserTheme());
|
||||
|
||||
useEffect(() => {
|
||||
const sub = appEvents.subscribe(ThemeChangedEvent, (event) => {
|
||||
config.theme = event.payload;
|
||||
//config.theme = event.payload;
|
||||
setTheme(event.payload);
|
||||
});
|
||||
|
||||
@@ -30,6 +30,14 @@ export const ThemeProvider = ({ children }: { children: React.ReactNode }) => {
|
||||
return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
|
||||
};
|
||||
|
||||
function getCurrentUserTheme() {
|
||||
return createTheme({
|
||||
palette: {
|
||||
mode: config.bootData.user.lightTheme ? 'light' : 'dark',
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export const provideTheme = (component: React.ComponentType<any>) => {
|
||||
return provideConfig((props: any) => <ThemeProvider>{React.createElement(component, { ...props })}</ThemeProvider>);
|
||||
};
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React, { FC, ReactNode, useCallback, useEffect, useState } from 'react';
|
||||
import { css, cx } from '@emotion/css';
|
||||
import { GrafanaTheme } from '@grafana/data';
|
||||
import { Counter, Icon, useStyles } from '@grafana/ui';
|
||||
import { GrafanaThemeV2 } from '@grafana/data';
|
||||
import { Counter, Icon, useStyles2 } from '@grafana/ui';
|
||||
import { PANEL_EDITOR_UI_STATE_STORAGE_KEY } from './state/reducers';
|
||||
import { useLocalStorage } from 'react-use';
|
||||
import { selectors } from '@grafana/e2e-selectors';
|
||||
@@ -24,7 +24,7 @@ export const OptionsPaneCategory: FC<OptionsPaneCategoryProps> = React.memo(
|
||||
isExpanded: isOpenDefault !== false,
|
||||
});
|
||||
const [isExpanded, setIsExpanded] = useState(savedState.isExpanded);
|
||||
const styles = useStyles(getStyles);
|
||||
const styles = useStyles2(getStyles);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isExpanded && forceOpen && forceOpen > 0) {
|
||||
@@ -86,10 +86,10 @@ export const OptionsPaneCategory: FC<OptionsPaneCategoryProps> = React.memo(
|
||||
}
|
||||
);
|
||||
|
||||
const getStyles = (theme: GrafanaTheme) => {
|
||||
const getStyles = (theme: GrafanaThemeV2) => {
|
||||
return {
|
||||
box: css`
|
||||
border-bottom: 1px solid ${theme.v2.palette.border.weak};
|
||||
border-bottom: 1px solid ${theme.palette.border.weak};
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
@@ -98,11 +98,11 @@ const getStyles = (theme: GrafanaTheme) => {
|
||||
border-bottom: 0;
|
||||
`,
|
||||
boxNestedExpanded: css`
|
||||
margin-bottom: ${theme.spacing.formSpacingBase * 2}px;
|
||||
margin-bottom: ${theme.spacing(2)};
|
||||
`,
|
||||
toggle: css`
|
||||
color: ${theme.v2.palette.text.secondary};
|
||||
margin-right: ${theme.spacing.sm};
|
||||
color: ${theme.palette.text.secondary};
|
||||
margin-right: ${theme.spacing(1)};
|
||||
`,
|
||||
title: css`
|
||||
flex-grow: 1;
|
||||
@@ -112,22 +112,22 @@ const getStyles = (theme: GrafanaTheme) => {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
align-items: baseline;
|
||||
padding: ${theme.v2.spacing(1)};
|
||||
color: ${theme.v2.palette.text.primary};
|
||||
font-weight: ${theme.v2.typography.fontWeightMedium};
|
||||
padding: ${theme.spacing(1)};
|
||||
color: ${theme.palette.text.primary};
|
||||
font-weight: ${theme.typography.fontWeightMedium};
|
||||
|
||||
&:hover {
|
||||
background: ${theme.v2.palette.emphasize(theme.v2.palette.background.primary, 0.03)};
|
||||
background: ${theme.palette.emphasize(theme.palette.background.primary, 0.03)};
|
||||
}
|
||||
`,
|
||||
headerExpanded: css`
|
||||
color: ${theme.v2.palette.text.primary};
|
||||
color: ${theme.palette.text.primary};
|
||||
`,
|
||||
headerNested: css`
|
||||
padding: ${theme.v2.spacing(0.5, 0, 0.5, 0)};
|
||||
padding: ${theme.spacing(0.5, 0, 0.5, 0)};
|
||||
`,
|
||||
body: css`
|
||||
padding: ${theme.v2.spacing(1, 2, 1, 4)};
|
||||
padding: ${theme.spacing(1, 2, 1, 4)};
|
||||
`,
|
||||
bodyNested: css`
|
||||
position: relative;
|
||||
@@ -139,7 +139,7 @@ const getStyles = (theme: GrafanaTheme) => {
|
||||
left: 8px;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background: ${theme.v2.palette.border.weak};
|
||||
background: ${theme.palette.border.weak};
|
||||
}
|
||||
`,
|
||||
};
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React, { useMemo, useState } from 'react';
|
||||
import { FieldConfigSource, GrafanaTheme, PanelData, PanelPlugin, SelectableValue } from '@grafana/data';
|
||||
import { FieldConfigSource, GrafanaThemeV2, PanelData, PanelPlugin, SelectableValue } from '@grafana/data';
|
||||
import { DashboardModel, PanelModel } from '../../state';
|
||||
import { CustomScrollbar, RadioButtonGroup, useStyles } from '@grafana/ui';
|
||||
import { CustomScrollbar, RadioButtonGroup, useStyles2 } from '@grafana/ui';
|
||||
import { getPanelFrameCategory } from './getPanelFrameOptions';
|
||||
import { getVizualizationOptions } from './getVizualizationOptions';
|
||||
import { css } from '@emotion/css';
|
||||
@@ -26,7 +26,7 @@ export const OptionsPaneOptions: React.FC<Props> = (props) => {
|
||||
const { plugin, dashboard, panel } = props;
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [listMode, setListMode] = useState(OptionFilter.All);
|
||||
const styles = useStyles(getStyles);
|
||||
const styles = useStyles2(getStyles);
|
||||
|
||||
const [panelFrameOptions, vizOptions, justOverrides] = useMemo(
|
||||
() => [getPanelFrameCategory(props), getVizualizationOptions(props), getFieldOverrideCategories(props)],
|
||||
@@ -143,7 +143,7 @@ function renderSearchHits(
|
||||
);
|
||||
}
|
||||
|
||||
const getStyles = (theme: GrafanaTheme) => ({
|
||||
const getStyles = (theme: GrafanaThemeV2) => ({
|
||||
wrapper: css`
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@@ -156,19 +156,19 @@ const getStyles = (theme: GrafanaTheme) => ({
|
||||
min-height: 0;
|
||||
`,
|
||||
formRow: css`
|
||||
margin-bottom: ${theme.spacing.sm};
|
||||
margin-bottom: ${theme.spacing(1)};
|
||||
`,
|
||||
formBox: css`
|
||||
padding: ${theme.spacing.sm};
|
||||
background: ${theme.colors.bg1};
|
||||
border: 1px solid ${theme.colors.border1};
|
||||
padding: ${theme.spacing(1)};
|
||||
background: ${theme.palette.background.primary};
|
||||
border: 1px solid ${theme.components.panel.border};
|
||||
border-bottom: none;
|
||||
`,
|
||||
closeButton: css`
|
||||
margin-left: ${theme.spacing.sm};
|
||||
margin-left: ${theme.spacing(1)};
|
||||
`,
|
||||
searchHits: css`
|
||||
padding: ${theme.spacing.sm} ${theme.spacing.sm} 0 ${theme.spacing.sm};
|
||||
padding: ${theme.spacing(1, 1, 0, 1)};
|
||||
`,
|
||||
scrollWrapper: css`
|
||||
flex-grow: 1;
|
||||
@@ -176,13 +176,13 @@ const getStyles = (theme: GrafanaTheme) => ({
|
||||
`,
|
||||
searchNotice: css`
|
||||
font-size: ${theme.typography.size.sm};
|
||||
color: ${theme.colors.textWeak};
|
||||
padding: ${theme.spacing.sm};
|
||||
color: ${theme.palette.text.secondary};
|
||||
padding: ${theme.spacing(1)};
|
||||
text-align: center;
|
||||
`,
|
||||
mainBox: css`
|
||||
background: ${theme.colors.bg1};
|
||||
border: 1px solid ${theme.v2.components.panel.border};
|
||||
background: ${theme.palette.background.primary};
|
||||
border: 1px solid ${theme.components.panel.border};
|
||||
border-top: none;
|
||||
flex-grow: 1;
|
||||
`,
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, { FC, useEffect } from 'react';
|
||||
import { css } from '@emotion/css';
|
||||
import { IconName, Tab, TabContent, TabsBar, useForceUpdate, useStyles } from '@grafana/ui';
|
||||
import { IconName, Tab, TabContent, TabsBar, useForceUpdate, useStyles2 } from '@grafana/ui';
|
||||
import { AlertTab } from 'app/features/alerting/AlertTab';
|
||||
import { TransformationsEditor } from '../TransformationsEditor/TransformationsEditor';
|
||||
import { DashboardModel, PanelModel } from '../../state';
|
||||
@@ -8,7 +8,7 @@ import { PanelEditorTab, PanelEditorTabId } from './types';
|
||||
import { Subscription } from 'rxjs';
|
||||
import { PanelQueriesChangedEvent, PanelTransformationsChangedEvent } from 'app/types/events';
|
||||
import { PanelEditorQueries } from './PanelEditorQueries';
|
||||
import { GrafanaTheme } from '@grafana/data';
|
||||
import { GrafanaThemeV2 } from '@grafana/data';
|
||||
|
||||
interface PanelEditorTabsProps {
|
||||
panel: PanelModel;
|
||||
@@ -19,7 +19,7 @@ interface PanelEditorTabsProps {
|
||||
|
||||
export const PanelEditorTabs: FC<PanelEditorTabsProps> = React.memo(({ panel, dashboard, tabs, onChangeTab }) => {
|
||||
const forceUpdate = useForceUpdate();
|
||||
const styles = useStyles(getStyles);
|
||||
const styles = useStyles2(getStyles);
|
||||
|
||||
useEffect(() => {
|
||||
const eventSubs = new Subscription();
|
||||
@@ -75,7 +75,7 @@ function getCounter(panel: PanelModel, tab: PanelEditorTab) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const getStyles = (theme: GrafanaTheme) => {
|
||||
const getStyles = (theme: GrafanaThemeV2) => {
|
||||
return {
|
||||
wrapper: css`
|
||||
display: flex;
|
||||
@@ -83,7 +83,7 @@ const getStyles = (theme: GrafanaTheme) => {
|
||||
height: 100%;
|
||||
`,
|
||||
tabBar: css`
|
||||
padding-left: ${theme.spacing.md};
|
||||
padding-left: ${theme.spacing(2)};
|
||||
`,
|
||||
tabContent: css`
|
||||
padding: 0;
|
||||
@@ -91,8 +91,8 @@ const getStyles = (theme: GrafanaTheme) => {
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
min-height: 0;
|
||||
background: ${theme.v2.palette.background.primary};
|
||||
border-right: 1px solid ${theme.v2.components.panel.border};
|
||||
background: ${theme.palette.background.primary};
|
||||
border-right: 1px solid ${theme.components.panel.border};
|
||||
`,
|
||||
};
|
||||
};
|
||||
|
||||
+8
-10
@@ -4,20 +4,19 @@ import {
|
||||
Button,
|
||||
Container,
|
||||
CustomScrollbar,
|
||||
stylesFactory,
|
||||
Themeable,
|
||||
FeatureInfoBox,
|
||||
useTheme,
|
||||
VerticalGroup,
|
||||
withTheme,
|
||||
Input,
|
||||
IconButton,
|
||||
useStyles2,
|
||||
} from '@grafana/ui';
|
||||
import {
|
||||
DataFrame,
|
||||
DataTransformerConfig,
|
||||
DocsId,
|
||||
GrafanaTheme,
|
||||
GrafanaThemeV2,
|
||||
PanelData,
|
||||
SelectableValue,
|
||||
standardTransformersRegistry,
|
||||
@@ -362,18 +361,17 @@ class UnThemedTransformationsEditor extends React.PureComponent<TransformationsE
|
||||
}
|
||||
|
||||
const TransformationCard: React.FC<CardProps> = (props) => {
|
||||
const theme = useTheme();
|
||||
const styles = getTransformationCardStyles(theme);
|
||||
const styles = useStyles2(getStyles);
|
||||
return <Card {...props} className={styles.card} />;
|
||||
};
|
||||
|
||||
const getTransformationCardStyles = stylesFactory((theme: GrafanaTheme) => {
|
||||
const getStyles = (theme: GrafanaThemeV2) => {
|
||||
return {
|
||||
card: css`
|
||||
background: ${theme.colors.bg2};
|
||||
background: ${theme.palette.background.secondary};
|
||||
width: 100%;
|
||||
border: none;
|
||||
padding: ${theme.spacing.sm};
|
||||
padding: ${theme.spacing(1)};
|
||||
|
||||
// hack because these cards use classes from a very different card for some reason
|
||||
.add-data-source-item-text {
|
||||
@@ -381,12 +379,12 @@ const getTransformationCardStyles = stylesFactory((theme: GrafanaTheme) => {
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: ${theme.v2.palette.action.hover};
|
||||
background: ${theme.palette.action.hover};
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
}
|
||||
`,
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
export const TransformationsEditor = withTheme(UnThemedTransformationsEditor);
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import { isArray, isObject, isUndefined } from 'lodash';
|
||||
import { useStyles, Icon } from '@grafana/ui';
|
||||
import { GrafanaTheme } from '@grafana/data';
|
||||
import { useStyles2, Icon } from '@grafana/ui';
|
||||
import { GrafanaThemeV2 } from '@grafana/data';
|
||||
import { css } from '@emotion/css';
|
||||
import { Diff } from './utils';
|
||||
|
||||
@@ -10,7 +10,7 @@ type DiffProps = {
|
||||
};
|
||||
|
||||
export const DiffValues: React.FC<DiffProps> = ({ diff }) => {
|
||||
const styles = useStyles(getStyles);
|
||||
const styles = useStyles2(getStyles);
|
||||
const hasLeftValue =
|
||||
!isUndefined(diff.originalValue) && !isArray(diff.originalValue) && !isObject(diff.originalValue);
|
||||
const hasRightValue = !isUndefined(diff.value) && !isArray(diff.value) && !isObject(diff.value);
|
||||
@@ -24,11 +24,11 @@ export const DiffValues: React.FC<DiffProps> = ({ diff }) => {
|
||||
);
|
||||
};
|
||||
|
||||
const getStyles = (theme: GrafanaTheme) => css`
|
||||
background-color: ${theme.v2.palette.action.hover};
|
||||
border-radius: ${theme.border.radius.md};
|
||||
color: ${theme.colors.textHeading};
|
||||
font-size: ${theme.typography.size.base};
|
||||
margin: 0 ${theme.spacing.xs};
|
||||
padding: ${theme.spacing.xs} ${theme.spacing.sm};
|
||||
const getStyles = (theme: GrafanaThemeV2) => css`
|
||||
background-color: ${theme.palette.action.hover};
|
||||
border-radius: ${theme.shape.borderRadius()};
|
||||
color: ${theme.palette.text.primary};
|
||||
font-size: ${theme.typography.body.fontSize};
|
||||
margin: 0 ${theme.spacing(0.5)};
|
||||
padding: ${theme.spacing(0.5, 1)};
|
||||
`;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import { GrafanaTheme, isUnsignedPluginSignature, PanelPluginMeta, PluginState } from '@grafana/data';
|
||||
import { Badge, BadgeProps, IconButton, PluginSignatureBadge, styleMixins, useStyles } from '@grafana/ui';
|
||||
import { GrafanaThemeV2, isUnsignedPluginSignature, PanelPluginMeta, PluginState } from '@grafana/data';
|
||||
import { Badge, BadgeProps, IconButton, PluginSignatureBadge, useStyles2 } from '@grafana/ui';
|
||||
import { css, cx } from '@emotion/css';
|
||||
import { selectors } from '@grafana/e2e-selectors';
|
||||
|
||||
@@ -23,7 +23,7 @@ export const PanelTypeCard: React.FC<Props> = ({
|
||||
disabled,
|
||||
showBadge,
|
||||
}) => {
|
||||
const styles = useStyles(getStyles);
|
||||
const styles = useStyles2(getStyles);
|
||||
const cssClass = cx({
|
||||
[styles.item]: true,
|
||||
[styles.disabled]: disabled || plugin.state === PluginState.deprecated,
|
||||
@@ -62,28 +62,28 @@ export const PanelTypeCard: React.FC<Props> = ({
|
||||
|
||||
PanelTypeCard.displayName = 'PanelTypeCard';
|
||||
|
||||
const getStyles = (theme: GrafanaTheme) => {
|
||||
const getStyles = (theme: GrafanaThemeV2) => {
|
||||
return {
|
||||
item: css`
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
background: ${theme.v2.palette.background.secondary};
|
||||
border-radius: ${theme.v2.shape.borderRadius()};
|
||||
box-shadow: ${theme.v2.shadows.z0};
|
||||
background: ${theme.palette.background.secondary};
|
||||
border-radius: ${theme.shape.borderRadius()};
|
||||
box-shadow: ${theme.shadows.z0};
|
||||
align-items: center;
|
||||
padding: 8px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: 55px;
|
||||
transition: ${theme.v2.transitions.create(['background'], {
|
||||
duration: theme.v2.transitions.duration.short,
|
||||
transition: ${theme.transitions.create(['background'], {
|
||||
duration: theme.transitions.duration.short,
|
||||
})};
|
||||
|
||||
&:hover {
|
||||
background: ${styleMixins.hoverColor(theme.v2.palette.background.secondary, theme)};
|
||||
background: ${theme.palette.emphasize(theme.palette.background.secondary, 0.03)};
|
||||
}
|
||||
`,
|
||||
itemContent: css`
|
||||
@@ -92,24 +92,20 @@ const getStyles = (theme: GrafanaTheme) => {
|
||||
`,
|
||||
current: css`
|
||||
label: currentVisualizationItem;
|
||||
border-color: ${theme.colors.bgBlue1};
|
||||
border-color: ${theme.palette.primary.border};
|
||||
`,
|
||||
disabled: css`
|
||||
opacity: 0.2;
|
||||
filter: grayscale(1);
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
|
||||
&:hover {
|
||||
border: 1px solid ${theme.colors.border2};
|
||||
}
|
||||
`,
|
||||
name: css`
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
font-size: ${theme.typography.size.sm};
|
||||
font-weight: ${theme.typography.weight.semibold};
|
||||
font-weight: ${theme.typography.fontWeightMedium};
|
||||
padding: 0 10px;
|
||||
width: 100%;
|
||||
`,
|
||||
@@ -120,7 +116,7 @@ const getStyles = (theme: GrafanaTheme) => {
|
||||
align-items: center;
|
||||
`,
|
||||
badge: css`
|
||||
background: ${theme.colors.bg1};
|
||||
background: ${theme.palette.background.primary};
|
||||
`,
|
||||
};
|
||||
};
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React, { useContext } from 'react';
|
||||
import { LegacyForms, ThemeContext } from '@grafana/ui';
|
||||
import React from 'react';
|
||||
import { LegacyForms, useStyles } from '@grafana/ui';
|
||||
const { Select } = LegacyForms;
|
||||
import { css, cx } from '@emotion/css';
|
||||
import { GrafanaTheme, SelectableValue } from '@grafana/data';
|
||||
@@ -32,8 +32,7 @@ export interface Props {
|
||||
}
|
||||
|
||||
export const AdHocFilter: React.FunctionComponent<Props> = (props) => {
|
||||
const theme = useContext(ThemeContext);
|
||||
const styles = getStyles(theme);
|
||||
const styles = useStyles(getStyles);
|
||||
|
||||
const onChange = (changeType: ChangeType) => (item: SelectableValue<string>) => {
|
||||
const { onKeyChanged, onValueChanged, onOperatorChanged } = props;
|
||||
|
||||
@@ -3,7 +3,6 @@ import { css, cx } from '@emotion/css';
|
||||
import { GrafanaTheme, TimeZone, AbsoluteTimeRange, GraphSeriesXY, dateTime } from '@grafana/data';
|
||||
|
||||
import {
|
||||
selectThemeVariant,
|
||||
Themeable,
|
||||
GraphWithLegend,
|
||||
LegendDisplayMode,
|
||||
@@ -26,7 +25,7 @@ const getStyles = (theme: GrafanaTheme) => ({
|
||||
padding: 10px 0;
|
||||
border-radius: ${theme.border.radius.md};
|
||||
text-align: center;
|
||||
background-color: ${selectThemeVariant({ light: theme.palette.white, dark: theme.palette.dark4 }, theme.type)};
|
||||
background-color: ${theme.isLight ? theme.palette.white : theme.palette.dark4};
|
||||
`,
|
||||
disclaimerIcon: css`
|
||||
label: disclaimer-icon;
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import React, { memo, useContext } from 'react';
|
||||
import React, { memo } from 'react';
|
||||
import { css } from '@emotion/css';
|
||||
import { GrafanaTheme } from '@grafana/data';
|
||||
import { stylesFactory, ThemeContext } from '@grafana/ui';
|
||||
import { useStyles } from '@grafana/ui';
|
||||
|
||||
const getStyles = stylesFactory((theme: GrafanaTheme) => ({
|
||||
const getStyles = (theme: GrafanaTheme) => ({
|
||||
metaContainer: css`
|
||||
flex: 1;
|
||||
color: ${theme.colors.textWeak};
|
||||
@@ -31,7 +31,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({
|
||||
font-family: ${theme.typography.fontFamily.monospace};
|
||||
font-size: ${theme.typography.size.sm};
|
||||
`,
|
||||
}));
|
||||
});
|
||||
|
||||
export interface MetaItemProps {
|
||||
label?: string;
|
||||
@@ -39,8 +39,7 @@ export interface MetaItemProps {
|
||||
}
|
||||
|
||||
export const MetaInfoItem = memo(function MetaInfoItem(props: MetaItemProps) {
|
||||
const theme = useContext(ThemeContext);
|
||||
const style = getStyles(theme);
|
||||
const style = useStyles(getStyles);
|
||||
const { label, value } = props;
|
||||
|
||||
return (
|
||||
@@ -56,8 +55,7 @@ export interface MetaInfoTextProps {
|
||||
}
|
||||
|
||||
export const MetaInfoText = memo(function MetaInfoText(props: MetaInfoTextProps) {
|
||||
const theme = useContext(ThemeContext);
|
||||
const style = getStyles(theme);
|
||||
const style = useStyles(getStyles);
|
||||
const { metaItems } = props;
|
||||
|
||||
return (
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import React, { useContext } from 'react';
|
||||
import React from 'react';
|
||||
import { css } from '@emotion/css';
|
||||
import { ThemeContext, LinkButton, CallToActionCard, Icon } from '@grafana/ui';
|
||||
import { LinkButton, CallToActionCard, Icon, useTheme } from '@grafana/ui';
|
||||
|
||||
export const NoDataSourceCallToAction = () => {
|
||||
const theme = useContext(ThemeContext);
|
||||
const theme = useTheme();
|
||||
|
||||
const message =
|
||||
'Explore requires at least one data source. Once you have added a data source, you can query it here.';
|
||||
|
||||
@@ -158,8 +158,8 @@ const getQueryEditorRowTitleStyles = stylesFactory((theme: GrafanaTheme) => {
|
||||
|
||||
&:hover {
|
||||
.query-name-wrapper {
|
||||
background: ${theme.v2.palette.action.hover};
|
||||
border: 1px dashed ${theme.v2.palette.border.medium};
|
||||
background: ${theme.colors.bg3};
|
||||
border: 1px dashed ${theme.colors.border3};
|
||||
}
|
||||
|
||||
.query-name-edit-icon {
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import React, { FC, useContext } from 'react';
|
||||
import React, { FC } from 'react';
|
||||
import { css, cx } from '@emotion/css';
|
||||
import { ThemeContext } from '@grafana/ui';
|
||||
import { GrafanaTheme } from '@grafana/data';
|
||||
import { DashboardQuery } from '../types';
|
||||
import { useStyles } from '@grafana/ui';
|
||||
|
||||
type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
|
||||
|
||||
@@ -57,8 +57,7 @@ const getSearchFieldStyles = (theme: GrafanaTheme) => ({
|
||||
});
|
||||
|
||||
export const SearchField: FC<SearchFieldProps> = ({ query, onChange, size, clearable, className, ...inputProps }) => {
|
||||
const theme = useContext(ThemeContext);
|
||||
const styles = getSearchFieldStyles(theme);
|
||||
const styles = useStyles(getSearchFieldStyles);
|
||||
|
||||
return (
|
||||
<div className={cx(styles.wrapper, className)}>
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
import React from 'react';
|
||||
import { Button, InfoBox, Portal, stylesFactory, useTheme } from '@grafana/ui';
|
||||
import { Button, InfoBox, Portal, stylesFactory, useTheme2 } from '@grafana/ui';
|
||||
import { getModalStyles } from '@grafana/ui/src/components/Modal/getModalStyles';
|
||||
import { css, cx } from '@emotion/css';
|
||||
import { GrafanaTheme } from '@grafana/data';
|
||||
import { GrafanaThemeV2 } from '@grafana/data';
|
||||
|
||||
interface Props {
|
||||
maxConcurrentSessions?: number;
|
||||
}
|
||||
|
||||
export const TokenRevokedModal = (props: Props) => {
|
||||
const theme = useTheme();
|
||||
const theme = useTheme2();
|
||||
|
||||
const styles = getStyles(theme);
|
||||
const modalStyles = getModalStyles(theme);
|
||||
@@ -50,16 +50,16 @@ export const TokenRevokedModal = (props: Props) => {
|
||||
);
|
||||
};
|
||||
|
||||
const getStyles = stylesFactory((theme: GrafanaTheme) => {
|
||||
const getStyles = stylesFactory((theme: GrafanaThemeV2) => {
|
||||
return {
|
||||
infobox: css`
|
||||
margin-bottom: 0;
|
||||
`,
|
||||
text: css`
|
||||
margin: ${theme.spacing.sm} 0 ${theme.spacing.md};
|
||||
margin: ${theme.spacing(1, 0, 2)};
|
||||
`,
|
||||
backdrop: css`
|
||||
background-color: ${theme.colors.dashboardBg};
|
||||
background-color: ${theme.palette.background.canvas};
|
||||
opacity: 0.8;
|
||||
`,
|
||||
};
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { BusEventBase, BusEventWithPayload, eventFactory, GrafanaTheme, TimeRange } from '@grafana/data';
|
||||
import { BusEventBase, BusEventWithPayload, eventFactory, GrafanaThemeV2, TimeRange } from '@grafana/data';
|
||||
import { IconName } from '@grafana/ui';
|
||||
|
||||
/**
|
||||
@@ -145,7 +145,7 @@ export class RenderEvent extends BusEventBase {
|
||||
static type = 'render';
|
||||
}
|
||||
|
||||
export class ThemeChangedEvent extends BusEventWithPayload<GrafanaTheme> {
|
||||
export class ThemeChangedEvent extends BusEventWithPayload<GrafanaThemeV2> {
|
||||
static type = 'theme-changed';
|
||||
}
|
||||
|
||||
|
||||
@@ -15,13 +15,13 @@ $theme-name: dark;
|
||||
|
||||
// New Colors
|
||||
// -------------------------
|
||||
$blue-light: #5794f2;
|
||||
$blue-base: #3274d9;
|
||||
$blue-shade: #1f60c4;
|
||||
$red-base: #e02f44;
|
||||
$red-shade: #c4162a;
|
||||
$green-base: #299c46;
|
||||
$green-shade: #23843b;
|
||||
$blue-light: #6E9FFF;
|
||||
$blue-base: #3D71D9;
|
||||
$blue-shade: rgb(90, 134, 222);
|
||||
$red-base: #D10E5C;
|
||||
$red-shade: rgb(215, 50, 116);
|
||||
$green-base: #1A7F4B;
|
||||
$green-shade: rgb(60, 146, 102);
|
||||
$orange-dark: #ff780a;
|
||||
|
||||
$gray98: #f7f8fa;
|
||||
@@ -115,10 +115,10 @@ $brand-gradient-vertical: linear-gradient(#f05a28 30%, #fbca0a 99%);
|
||||
|
||||
// Links
|
||||
// -------------------------
|
||||
$link-color: #d8d9da;
|
||||
$link-color-disabled: #8e8e8e;
|
||||
$link-hover-color: #ffffff;
|
||||
$external-link-color: #33a2e5;
|
||||
$link-color: rgb(201, 209, 217);
|
||||
$link-color-disabled: rgba(201, 209, 217, 0.40);
|
||||
$link-hover-color: #fff;
|
||||
$external-link-color: #6E9FFF;
|
||||
|
||||
// Typography
|
||||
// -------------------------
|
||||
|
||||
@@ -65,7 +65,7 @@ $spacers: (
|
||||
// adapting to different screen sizes, for use in media queries.
|
||||
|
||||
$grid-breakpoints: (
|
||||
xs: 0,
|
||||
xs: 0px,
|
||||
sm: 544px,
|
||||
md: 769px,
|
||||
lg: 992px,
|
||||
@@ -88,7 +88,7 @@ $container-max-widths: (
|
||||
// Set the number of columns and specify the width of the gutters.
|
||||
|
||||
$grid-columns: 12 !default;
|
||||
$grid-gutter-width: 30px !default;
|
||||
$grid-gutter-width: 32px !default;
|
||||
|
||||
// Component heights
|
||||
// -------------------------
|
||||
@@ -99,7 +99,7 @@ $height-lg: 48;
|
||||
// Typography
|
||||
// -------------------------
|
||||
|
||||
$font-family-sans-serif: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
|
||||
$font-family-sans-serif: "Roboto", "Helvetica", "Arial", sans-serif;
|
||||
$font-family-monospace: 'Roboto Mono', monospace;
|
||||
|
||||
$font-size-base: 14px !default;
|
||||
@@ -114,14 +114,14 @@ $line-height-base: 1.5 !default;
|
||||
$font-weight-regular: 400 !default;
|
||||
$font-weight-semi-bold: 500 !default;
|
||||
|
||||
$font-size-h1: 28px !default;
|
||||
$font-size-h2: 24px !default;
|
||||
$font-size-h3: 21px !default;
|
||||
$font-size-h4: 18px !default;
|
||||
$font-size-h5: 16px !default;
|
||||
$font-size-h6: 14px !default;
|
||||
$font-size-h1: 2rem !default;
|
||||
$font-size-h2: 1.7142857142857142rem !default;
|
||||
$font-size-h3: 1.5rem !default;
|
||||
$font-size-h4: 1.2857142857142858rem !default;
|
||||
$font-size-h5: 1.1428571428571428rem !default;
|
||||
$font-size-h6: 1rem !default;
|
||||
|
||||
$headings-line-height: 1.1 !default;
|
||||
$headings-line-height: 1.5 !default;
|
||||
|
||||
// Components
|
||||
//
|
||||
@@ -129,8 +129,8 @@ $headings-line-height: 1.1 !default;
|
||||
|
||||
$border-width: 1px !default;
|
||||
|
||||
$border-radius: 3px !default;
|
||||
$border-radius-lg: 5px !default;
|
||||
$border-radius: 4px !default;
|
||||
$border-radius-lg: 6px !default;
|
||||
$border-radius-sm: 2px !default;
|
||||
|
||||
// Page
|
||||
@@ -194,7 +194,7 @@ $navbar-padding: 20px;
|
||||
// dashboard
|
||||
$dashboard-padding: $space-md;
|
||||
$panel-padding: 8px;
|
||||
$panel-header-height: 28px;
|
||||
$panel-header-height: 32px;
|
||||
$panel-header-z-index: 10;
|
||||
|
||||
// tabs
|
||||
|
||||
@@ -15,14 +15,14 @@ $theme-name: light;
|
||||
|
||||
// New Colors
|
||||
// -------------------------
|
||||
$blue-light: #5794f2;
|
||||
$blue-base: #3274d9;
|
||||
$blue-shade: #1f60c4;
|
||||
$red-base: #e02f44;
|
||||
$red-shade: #c4162a;
|
||||
$green-base: #3eb15b;
|
||||
$green-shade: #369b4f;
|
||||
$orange-dark: #ed5700;
|
||||
$blue-light: #0465d7;
|
||||
$blue-base: #3871DC;
|
||||
$blue-shade: rgb(44, 90, 176);
|
||||
$red-base: #E0226E;
|
||||
$red-shade: rgb(179, 27, 88);
|
||||
$green-base: #1A7F4B;
|
||||
$green-shade: rgb(20, 101, 60);
|
||||
$orange-dark: #ff780a;
|
||||
|
||||
$gray98: #f7f8fa;
|
||||
$gray95: #e9edf2;
|
||||
@@ -39,17 +39,17 @@ $gray05: #0b0c0e;
|
||||
// -------------------------
|
||||
$black: #000000;
|
||||
|
||||
$dark-1: #1e2028;
|
||||
$dark-2: #41444b;
|
||||
$dark-4: #35373f;
|
||||
$dark-1: #141414;
|
||||
$dark-2: #161719;
|
||||
$dark-4: #212124;
|
||||
$dark-10: #424345;
|
||||
$gray-1: #52545c;
|
||||
$gray-2: #767980;
|
||||
$gray-3: #acb6bf;
|
||||
$gray-4: #c7d0d9;
|
||||
$gray-5: #dde4ed;
|
||||
$gray-6: #e9edf2;
|
||||
$gray-7: #f7f8fa;
|
||||
$gray-1: #555555;
|
||||
$gray-2: #8e8e8e;
|
||||
$gray-3: #b3b3b3;
|
||||
$gray-4: #d8d9da;
|
||||
$gray-5: #ececec;
|
||||
$gray-6: #f4f5f8;
|
||||
$gray-7: #fbfbfb;
|
||||
|
||||
$white: #ffffff;
|
||||
|
||||
@@ -66,26 +66,26 @@ $border1: rgba(36, 41, 46, 0.30);
|
||||
// -------------------------
|
||||
$blue: #0465d7;
|
||||
$red: $red-base;
|
||||
$yellow: #ff851b;
|
||||
$orange: #ff7941;
|
||||
$purple: #9954bb;
|
||||
$yellow: #ecbb13;
|
||||
$orange: #eb7b18;
|
||||
$purple: #9933cc;
|
||||
$variable: #0465d7;
|
||||
|
||||
$brand-primary: #ff7941;
|
||||
$brand-success: #3eb15b;
|
||||
$brand-warning: #ff7941;
|
||||
$brand-primary: #eb7b18;
|
||||
$brand-success: #299c46;
|
||||
$brand-warning: #eb7b18;
|
||||
$brand-danger: #e02f44;
|
||||
|
||||
$query-red: #e02f44;
|
||||
$query-green: #3eb15b;
|
||||
$query-purple: #9954bb;
|
||||
$query-orange: #ff7941;
|
||||
$query-green: #74e680;
|
||||
$query-purple: #fe85fc;
|
||||
$query-orange: #eb7b18;
|
||||
|
||||
// Status colors
|
||||
// -------------------------
|
||||
$online: #369b4f;
|
||||
$online: #299c46;
|
||||
$warn: #f79520;
|
||||
$critical: #c4162a;
|
||||
$critical: #e02f44;
|
||||
|
||||
// Scaffolding
|
||||
// -------------------------
|
||||
@@ -110,9 +110,9 @@ $brand-gradient-vertical: linear-gradient(#f05a28 30%, #fbca0a 99%);
|
||||
// Links
|
||||
// -------------------------
|
||||
$link-color: rgba(36, 41, 46, 1);
|
||||
$link-color-disabled: rgba(36, 41, 46, 0.75);
|
||||
$link-color-disabled: rgba(36, 41, 46, 0.50);
|
||||
$link-hover-color: #000;
|
||||
$external-link-color: #33a2e5;
|
||||
$external-link-color: #0465d7;
|
||||
|
||||
// Typography
|
||||
// -------------------------
|
||||
@@ -133,7 +133,7 @@ $panel-corner: $panel-bg;
|
||||
// Page header
|
||||
$page-header-bg: #F4F5F5;
|
||||
$page-header-shadow: inset 0px -3px 10px $gray-6;
|
||||
$page-header-border-color: rgba(36, 41, 46, 0.12);
|
||||
$page-header-border-color: #F4F5F5;
|
||||
|
||||
$divider-border-color: $gray-2;
|
||||
|
||||
@@ -206,8 +206,8 @@ $btn-active-box-shadow: 0px 0px 4px rgba(234, 161, 51, 0.6);
|
||||
$input-bg: $white;
|
||||
$input-bg-disabled: $gray-5;
|
||||
|
||||
$input-color: rgba(36, 41, 46, 1);
|
||||
$input-border-color: #c7d0d9;
|
||||
$input-color: #c7d0d9;
|
||||
$input-border-color: rgba(36, 41, 46, 0.30);
|
||||
$input-box-shadow: none;
|
||||
$input-border-focus: #5794f2;
|
||||
$input-box-shadow-focus: #5794f2;
|
||||
|
||||
Reference in New Issue
Block a user