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: Reduce usage of v1 theme (#53245)

Browse Source
This commit is contained in:
kay delaney 2022-08-08 16:37:06 +01:00 committed by GitHub
parent d1d237f30a
commit 1772bd4238
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
42 changed files with 325 additions and 330 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/grafana-data/src/field/scale.test.ts
View File

@ -40,12 +40,12 @@ describe('getScaleCalculator', () => {
const calc = getScaleCalculator(field, theme);
expect(calc(true as any)).toEqual({
percent: 1,
color: theme.v1.visualization.getColorByName('green'),
color: theme.visualization.getColorByName('green'),
threshold: undefined,
});
expect(calc(false as any)).toEqual({
percent: 0,
color: theme.v1.visualization.getColorByName('red'),
color: theme.visualization.getColorByName('red'),
threshold: undefined,
});
});

1
packages/grafana-data/src/themes/types.ts
View File

@ -29,6 +29,7 @@ export interface GrafanaTheme2 {
shadows: ThemeShadows;
visualization: ThemeVisualizationColors;
transitions: ThemeTransitions;
/** @deprecated Will be removed in a future version */
v1: GrafanaTheme;
/** feature flags that might impact component looks */
flags: { topnav?: boolean };

4
packages/grafana-data/src/types/config.ts
View File

@ -5,9 +5,8 @@ import { GrafanaTheme2 } from '../themes';
import { DataSourceInstanceSettings } from './datasource';
import { FeatureToggles } from './featureToggles.gen';
import { PanelPluginMeta } from './panel';
import { GrafanaTheme } from './theme';
import { NavLinkDTO, OrgRole } from '.';
import { GrafanaTheme, NavLinkDTO, OrgRole } from '.';
/**
* Describes the build information that will be available via the Grafana configuration.
@ -192,6 +191,7 @@ export interface GrafanaConfig {
editorsCanAdmin: boolean;
disableSanitizeHtml: boolean;
liveEnabled: boolean;
/** @deprecated Use `theme2` instead. */
theme: GrafanaTheme;
theme2: GrafanaTheme2;
pluginsToPreload: PreloadPlugin[];

4
packages/grafana-data/src/utils/namedColorsPalette.test.ts
View File

@ -5,11 +5,11 @@ describe('colors', () => {
describe('getColorFromHexRgbOrName', () => {
it('returns black for unknown color', () => {
expect(theme.v1.visualization.getColorByName('aruba-sunshine')).toBe('aruba-sunshine');
expect(theme.visualization.getColorByName('aruba-sunshine')).toBe('aruba-sunshine');
});
it('returns dark hex variant for known color if theme not specified', () => {
expect(theme.v1.visualization.getColorByName('semi-dark-blue')).toBe('#3274D9');
expect(theme.visualization.getColorByName('semi-dark-blue')).toBe('#3274D9');
});
});
});

1
packages/grafana-runtime/src/config.ts
View File

@ -71,6 +71,7 @@ export class GrafanaBootConfig implements GrafanaConfig {
editorsCanAdmin = false;
disableSanitizeHtml = false;
liveEnabled = true;
/** @deprecated Use `theme2` instead. */
theme: GrafanaTheme;
theme2: GrafanaTheme2;
pluginsToPreload: PreloadPlugin[] = [];

16
packages/grafana-ui/src/components/Badge/Badge.tsx
View File

@ -1,11 +1,10 @@
import { css, cx } from '@emotion/css';
import React, { HTMLAttributes } from 'react';
import React, { HTMLAttributes, useCallback } from 'react';
import tinycolor from 'tinycolor2';
import { GrafanaTheme } from '@grafana/data';
import { GrafanaTheme2 } from '@grafana/data';
import { useTheme } from '../../themes/ThemeContext';
import { stylesFactory } from '../../themes/stylesFactory';
import { useStyles2 } from '../../themes/ThemeContext';
import { IconName } from '../../types';
import { Icon } from '../Icon/Icon';
import { HorizontalGroup } from '../Layout/Layout';
@ -21,8 +20,7 @@ export interface BadgeProps extends HTMLAttributes<HTMLDivElement> {
}
export const Badge = React.memo<BadgeProps>(({ icon, color, text, tooltip, className, ...otherProps }) => {
const theme = useTheme();
const styles = getStyles(theme, color);
const styles = useStyles2(useCallback((theme) => getStyles(theme, color), [color]));
const badge = (
<div className={cx(styles.wrapper, className)} {...otherProps}>
<HorizontalGroup align="center" spacing="xs">
@ -43,7 +41,7 @@ export const Badge = React.memo<BadgeProps>(({ icon, color, text, tooltip, class
Badge.displayName = 'Badge';
const getStyles = stylesFactory((theme: GrafanaTheme, color: BadgeColor) => {
const getStyles = (theme: GrafanaTheme2, color: BadgeColor) => {
let sourceColor = theme.visualization.getColorByName(color);
let borderColor = '';
let bgColor = '';
@ -68,7 +66,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme, color: BadgeColor) => {
background: ${bgColor};
border: 1px solid ${borderColor};
color: ${textColor};
font-weight: ${theme.typography.weight.regular};
font-weight: ${theme.typography.fontWeightRegular};
> span {
position: relative;
@ -77,4 +75,4 @@ const getStyles = stylesFactory((theme: GrafanaTheme, color: BadgeColor) => {
}
`,
};
});
};

2
packages/grafana-ui/src/components/BrowserLabel/Label.tsx
View File

@ -107,7 +107,7 @@ const getLabelStyles = (theme: GrafanaTheme2) => ({
font-size: ${theme.typography.size.sm};
line-height: ${theme.typography.bodySmall.lineHeight};
background-color: ${theme.colors.background.secondary};
color: ${theme.colors.text};
color: ${theme.colors.text.primary};
white-space: nowrap;
text-shadow: none;
padding: ${theme.spacing(0.5)};

2
packages/grafana-ui/src/components/Collapse/CollapsableSection.tsx
View File

@ -108,7 +108,7 @@ const collapsableSectionStyles = (theme: GrafanaTheme2) => ({
spinner: css({
display: 'flex',
alignItems: 'center',
width: theme.v1.spacing.md,
width: theme.spacing(2),
}),
label: css({
display: 'flex',

4
packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx
View File

@ -1,7 +1,7 @@
import { css } from '@emotion/css';
import React, { FunctionComponent, PureComponent } from 'react';
import { withTheme2, useStyles } from '../../themes';
import { withTheme2, useStyles2 } from '../../themes';
import { Button } from '../Button';
import { Switch } from '../Forms/Legacy/Switch/Switch';
import { PopoverContentProps } from '../Tooltip';
@ -14,7 +14,7 @@ export interface SeriesColorPickerPopoverProps extends ColorPickerProps, Popover
}
export const SeriesColorPickerPopover: FunctionComponent<SeriesColorPickerPopoverProps> = (props) => {
const styles = useStyles(getStyles);
const styles = useStyles2(getStyles);
const { yaxis, onToggleAxis, color, ...colorPickerProps } = props;
const customPickers = onToggleAxis

4
packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.tsx
View File

@ -54,10 +54,10 @@ export const getStyles = (theme: GrafanaTheme2) => ({
.react-colorful {
&__saturation {
border-radius: ${theme.v1.border.radius.sm} ${theme.v1.border.radius.sm} 0 0;
border-radius: ${theme.shape.borderRadius(1)} ${theme.shape.borderRadius(1)} 0 0;
}
&__alpha {
border-radius: 0 0 ${theme.v1.border.radius.sm} ${theme.v1.border.radius.sm};
border-radius: 0 0 ${theme.shape.borderRadius(1)} ${theme.shape.borderRadius(1)};
}
&__alpha,
&__hue {

16
packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.tsx
View File

@ -1,14 +1,14 @@
import { cx, css } from '@emotion/css';
import React, { PureComponent, SyntheticEvent } from 'react';
import { GrafanaTheme } from '@grafana/data';
import { GrafanaTheme2 } from '@grafana/data';
import { stylesFactory, withTheme } from '../../themes';
import { Themeable } from '../../types';
import { stylesFactory, withTheme2 } from '../../themes';
import { Themeable2 } from '../../types';
import { ComponentSize } from '../../types/size';
import { Button, ButtonVariant } from '../Button';
export interface Props extends Themeable {
export interface Props extends Themeable2 {
/** Confirm action callback */
onConfirm(): void;
/** Custom button styles */
@ -143,9 +143,9 @@ class UnThemedConfirmButton extends PureComponent<Props, State> {
}
}
export const ConfirmButton = withTheme(UnThemedConfirmButton);
export const ConfirmButton = withTheme2(UnThemedConfirmButton);
const getStyles = stylesFactory((theme: GrafanaTheme) => {
const getStyles = stylesFactory((theme: GrafanaTheme2) => {
return {
buttonContainer: css`
display: flex;
@ -154,7 +154,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
`,
buttonDisabled: css`
text-decoration: none;
color: ${theme.colors.text};
color: ${theme.colors.text.primary};
opacity: 0.65;
pointer-events: none;
`,
@ -171,7 +171,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
`,
confirmButton: css`
align-items: flex-start;
background: ${theme.colors.bg1};
background: ${theme.colors.background.primary};
display: flex;
position: absolute;
pointer-events: none;

20
packages/grafana-ui/src/components/DataLinks/FieldLinkList.tsx
View File

@ -1,9 +1,9 @@
import { css } from '@emotion/css';
import React from 'react';
import { Field, GrafanaTheme, LinkModel } from '@grafana/data';
import { Field, GrafanaTheme2, LinkModel } from '@grafana/data';
import { useStyles } from '../../themes';
import { useStyles2 } from '../../themes';
import { Icon } from '../Icon/Icon';
import { DataLinkButton } from './DataLinkButton';
@ -16,7 +16,7 @@ type Props = {
* @internal
*/
export function FieldLinkList({ links }: Props) {
const styles = useStyles(getStyles);
const styles = useStyles2(getStyles);
if (links.length === 1) {
return <DataLinkButton link={links[0]} />;
@ -43,21 +43,21 @@ export function FieldLinkList({ links }: Props) {
);
}
const getStyles = (theme: GrafanaTheme) => ({
const getStyles = (theme: GrafanaTheme2) => ({
wrapper: css`
flex-basis: 150px;
width: 100px;
margin-top: ${theme.spacing.sm};
margin-top: ${theme.spacing(1)};
`,
externalLinksHeading: css`
color: ${theme.colors.textWeak};
font-weight: ${theme.typography.weight.regular};
color: ${theme.colors.text.secondary};
font-weight: ${theme.typography.fontWeightRegular};
font-size: ${theme.typography.size.sm};
margin: 0;
`,
externalLink: css`
color: ${theme.colors.linkExternal};
font-weight: ${theme.typography.weight.regular};
color: ${theme.colors.text.link};
font-weight: ${theme.typography.fontWeightRegular};
display: block;
white-space: nowrap;
overflow: hidden;
@ -68,7 +68,7 @@ const getStyles = (theme: GrafanaTheme) => ({
}
div {
margin-right: ${theme.spacing.sm};
margin-right: ${theme.spacing(1)};
}
`,
});

6
packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx
View File

@ -4,7 +4,7 @@ import React, { useState, useCallback } from 'react';
import { DataSourceSettings, SelectableValue } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
import { useTheme } from '../../themes';
import { useTheme2 } from '../../themes';
import { FormField } from '../FormField/FormField';
import { InlineFormLabel } from '../FormLabel/FormLabel';
import { InlineField } from '../Forms/InlineField';
@ -74,7 +74,7 @@ export const DataSourceHttpSettings: React.FC<HttpSettingsProps> = (props) => {
} = props;
let urlTooltip;
const [isAccessHelpVisible, setIsAccessHelpVisible] = useState(false);
const theme = useTheme();
const theme = useTheme2();
const onSettingsChange = useCallback(
(change: Partial<DataSourceSettings<any, any>>) => {
@ -121,7 +121,7 @@ export const DataSourceHttpSettings: React.FC<HttpSettingsProps> = (props) => {
);
const notValidStyle = css`
box-shadow: inset 0 0px 5px ${theme.palette.red};
box-shadow: inset 0 0px 5px ${theme.v1.palette.red};
`;
const inputStyle = cx({ [`width-20`]: true, [notValidStyle]: !isValidUrl });

4
packages/grafana-ui/src/components/DateTimePickers/DatePickerWithInput/DatePickerWithInput.tsx
View File

@ -3,7 +3,7 @@ import React, { ChangeEvent } from 'react';
import { dateTime } from '@grafana/data';
import { useStyles } from '../../../themes';
import { useStyles2 } from '../../../themes';
import { Props as InputProps, Input } from '../../Input/Input';
import { DatePicker } from '../DatePicker/DatePicker';
@ -29,7 +29,7 @@ export const DatePickerWithInput = ({
...rest
}: DatePickerWithInputProps) => {
const [open, setOpen] = React.useState(false);
const styles = useStyles(getStyles);
const styles = useStyles2(getStyles);
return (
<div className={styles.container}>

6
packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.tsx
View File

@ -207,21 +207,21 @@ const getStyles = (fromError?: string, toError?: string) => (theme: GrafanaTheme
cursor: pointer;
padding-right: 0;
padding-left: 0;
line-height: ${theme.v1.spacing.formInputHeight - 2}px;
line-height: ${theme.spacing.gridSize * theme.components.height.md - 2}px;
`
),
caretIcon: cx(
inputStyles.suffix,
css`
position: relative;
margin-left: ${theme.v1.spacing.xs};
margin-left: ${theme.spacing(0.5)};
`
),
clockIcon: cx(
inputStyles.prefix,
css`
position: relative;
margin-right: ${theme.v1.spacing.xs};
margin-right: ${theme.spacing(0.5)};
`
),
content: css`

33
packages/grafana-ui/src/components/DateTimePickers/TimeOfDayPicker.tsx
View File

@ -2,10 +2,9 @@ import { css, cx } from '@emotion/css';
import RcTimePicker from 'rc-time-picker';
import React, { FC } from 'react';
import { dateTime, DateTime, dateTimeAsMoment, GrafanaTheme } from '@grafana/data';
import { dateTime, DateTime, dateTimeAsMoment, GrafanaTheme2 } from '@grafana/data';
import { Icon, useStyles } from '../../index';
import { stylesFactory } from '../../themes';
import { Icon, useStyles2 } from '../../index';
import { focusCss } from '../../themes/mixins';
import { inputSizes } from '../Forms/commonStyles';
import { FormInputSize } from '../Forms/types';
@ -29,7 +28,7 @@ export const TimeOfDayPicker: FC<Props> = ({
size = 'auto',
disabled,
}) => {
const styles = useStyles(getStyles);
const styles = useStyles2(getStyles);
return (
<RcTimePicker
@ -60,12 +59,12 @@ const Caret: FC<CaretProps> = ({ wrapperStyle = '' }) => {
);
};
const getStyles = stylesFactory((theme: GrafanaTheme) => {
const bgColor = theme.colors.formInputBg;
const menuShadowColor = theme.colors.dropdownShadow;
const optionBgHover = theme.colors.dropdownOptionHoverBg;
const borderRadius = theme.border.radius.sm;
const borderColor = theme.colors.formInputBorder;
const getStyles = (theme: GrafanaTheme2) => {
const bgColor = theme.components.input.background;
const menuShadowColor = theme.v1.palette.black;
const optionBgHover = theme.colors.background.secondary;
const borderRadius = theme.shape.borderRadius(1);
const borderColor = theme.components.input.borderColor;
return {
caretWrapper: css`
position: absolute;
@ -74,7 +73,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
transform: translateY(-50%);
display: inline-block;
text-align: right;
color: ${theme.colors.textWeak};
color: ${theme.colors.text.secondary};
`,
picker: css`
.rc-time-picker-panel-select {
@ -85,7 +84,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
outline-width: 2px;
&.rc-time-picker-panel-select-option-selected {
background-color: inherit;
border: 1px solid ${theme.palette.orange};
border: 1px solid ${theme.v1.palette.orange};
border-radius: ${borderRadius};
}
@ -122,16 +121,16 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
background-color: ${bgColor};
border-radius: ${borderRadius};
border-color: ${borderColor};
height: ${theme.spacing.formInputHeight}px;
height: ${theme.spacing(4)};
&:focus {
${focusCss(theme)}
}
&:disabled {
background-color: ${theme.colors.formInputBgDisabled};
color: ${theme.colors.formInputDisabledText};
border: 1px solid ${theme.colors.formInputBgDisabled};
background-color: ${theme.colors.action.disabledBackground};
color: ${theme.colors.action.disabledText};
border: 1px solid ${theme.colors.action.disabledBackground};
&:focus {
box-shadow: none;
}
@ -139,4 +138,4 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
}
`,
};
});
};

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

@ -138,7 +138,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme2, disabled = false) => {
justify-content: space-between;
cursor: pointer;
padding-right: 0;
line-height: ${theme.v1.spacing.formInputHeight - 2}px;
line-height: ${theme.spacing.gridSize * 4 - 2}px;
`
),
caretIcon: cx(
@ -146,17 +146,17 @@ const getStyles = stylesFactory((theme: GrafanaTheme2, disabled = false) => {
css`
position: relative;
top: -1px;
margin-left: ${theme.v1.spacing.xs};
margin-left: ${theme.spacing(0.5)};
`
),
clearIcon: css`
margin-right: ${theme.v1.spacing.xs};
margin-right: ${theme.spacing(0.5)};
&:hover {
color: ${theme.v1.colors.linkHover};
color: ${theme.colors.text.maxContrast};
}
`,
placeholder: css`
color: ${theme.v1.colors.formInputPlaceholderText};
color: ${theme.colors.text.disabled};
opacity: 1;
`,
};

7
packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.test.tsx
View File

@ -1,9 +1,9 @@
import { render } from '@testing-library/react';
import React from 'react';
import { createTheme, dateTime, TimeRange } from '@grafana/data';
import { dateTime, TimeRange } from '@grafana/data';
import { UnthemedTimeRangePicker } from './TimeRangePicker';
import { TimeRangePicker } from './TimeRangePicker';
const from = dateTime('2019-12-17T07:48:27.433Z');
const to = dateTime('2019-12-18T07:48:27.433Z');
@ -17,14 +17,13 @@ const value: TimeRange = {
describe('TimePicker', () => {
it('renders buttons correctly', () => {
const container = render(
<UnthemedTimeRangePicker
<TimeRangePicker
onChangeTimeZone={() => {}}
onChange={(value) => {}}
value={value}
onMoveBackward={() => {}}
onMoveForward={() => {}}
onZoom={() => {}}
theme={createTheme().v1}
/>
);

34
packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx
View File

@ -7,7 +7,7 @@ import React, { memo, FormEvent, createRef, useState, ReactElement } from 'react
import {
isDateTime,
rangeUtil,
GrafanaTheme,
GrafanaTheme2,
dateTimeFormat,
timeZoneFormatUserFriendly,
TimeRange,
@ -16,9 +16,7 @@ import {
} from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
import { withTheme, useTheme } from '../../themes/ThemeContext';
import { stylesFactory } from '../../themes/stylesFactory';
import { Themeable } from '../../types';
import { useStyles2 } from '../../themes/ThemeContext';
import { ButtonGroup } from '../Button';
import { ToolbarButton } from '../ToolbarButton';
import { Tooltip } from '../Tooltip/Tooltip';
@ -27,7 +25,7 @@ import { TimePickerContent } from './TimeRangePicker/TimePickerContent';
import { quickOptions } from './options';
/** @public */
export interface TimeRangePickerProps extends Themeable {
export interface TimeRangePickerProps {
hideText?: boolean;
value: TimeRange;
timeZone?: TimeZone;
@ -49,7 +47,7 @@ export interface State {
isOpen: boolean;
}
export function UnthemedTimeRangePicker(props: TimeRangePickerProps): ReactElement {
export function TimeRangePicker(props: TimeRangePickerProps): ReactElement {
const [isOpen, setOpen] = useState(false);
const {
@ -61,7 +59,6 @@ export function UnthemedTimeRangePicker(props: TimeRangePickerProps): ReactEleme
fiscalYearStartMonth,
timeSyncButton,
isSynced,
theme,
history,
onChangeTimeZone,
onChangeFiscalYearStartMonth,
@ -88,7 +85,7 @@ export function UnthemedTimeRangePicker(props: TimeRangePickerProps): ReactEleme
const { overlayProps } = useOverlay({ onClose, isDismissable: true, isOpen }, ref);
const { dialogProps } = useDialog({}, ref);
const styles = getStyles(theme);
const styles = useStyles2(getStyles);
const hasAbsolute = isDateTime(value.raw.from) || isDateTime(value.raw.to);
const variant = isSynced ? 'active' : 'default';
@ -163,8 +160,7 @@ const ZoomOutTooltip = () => (
);
const TimePickerTooltip = ({ timeRange, timeZone }: { timeRange: TimeRange; timeZone?: TimeZone }) => {
const theme = useTheme();
const styles = getLabelStyles(theme);
const styles = useStyles2(getLabelStyles);
return (
<>
@ -181,8 +177,7 @@ const TimePickerTooltip = ({ timeRange, timeZone }: { timeRange: TimeRange; time
type LabelProps = Pick<TimeRangePickerProps, 'hideText' | 'value' | 'timeZone'>;
export const TimePickerButtonLabel = memo<LabelProps>(({ hideText, value, timeZone }) => {
const theme = useTheme();
const styles = getLabelStyles(theme);
const styles = useStyles2(getLabelStyles);
if (hideText) {
return null;
@ -206,10 +201,7 @@ const formattedRange = (value: TimeRange, timeZone?: TimeZone) => {
return rangeUtil.describeTimeRange(adjustedTimeRange, timeZone);
};
/** @public */
export const TimeRangePicker = withTheme(UnthemedTimeRangePicker);
const getStyles = stylesFactory((theme: GrafanaTheme) => {
const getStyles = () => {
return {
container: css`
position: relative;
@ -217,9 +209,9 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
vertical-align: middle;
`,
};
});
};
const getLabelStyles = stylesFactory((theme: GrafanaTheme) => {
const getLabelStyles = (theme: GrafanaTheme2) => {
return {
container: css`
display: flex;
@ -227,12 +219,12 @@ const getLabelStyles = stylesFactory((theme: GrafanaTheme) => {
white-space: nowrap;
`,
utc: css`
color: ${theme.palette.orange};
color: ${theme.v1.palette.orange};
font-size: ${theme.typography.size.sm};
padding-left: 6px;
line-height: 28px;
vertical-align: bottom;
font-weight: ${theme.typography.weight.semibold};
font-weight: ${theme.typography.fontWeightMedium};
`,
};
});
};

4
packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarBody.tsx
View File

@ -67,7 +67,7 @@ function dateInfo(date: Date): number[] {
export const getBodyStyles = (theme: GrafanaTheme2) => {
return {
title: css`
color: ${theme.colors.text};
color: ${theme.colors.text.primary};
background-color: ${theme.colors.background.primary};
font-size: ${theme.typography.size.md};
border: 1px solid transparent;
@ -90,7 +90,7 @@ export const getBodyStyles = (theme: GrafanaTheme2) => {
.react-calendar__navigation {
padding-top: 4px;
background-color: inherit;
color: ${theme.colors.text};
color: ${theme.colors.text.primary};
border: 0;
font-weight: ${theme.typography.fontWeightMedium};
}

2
packages/grafana-ui/src/components/Forms/commonStyles.ts
View File

@ -5,7 +5,7 @@ import { GrafanaTheme, GrafanaTheme2 } from '@grafana/data';
import { focusCss } from '../../themes/mixins';
import { ComponentSize } from '../../types/size';
export const getFocusStyle = (theme: GrafanaTheme) => css`
export const getFocusStyle = (theme: GrafanaTheme | GrafanaTheme2) => css`
&:focus {
${focusCss(theme)}
}

3
packages/grafana-ui/src/components/Gauge/utils.ts
View File

@ -7,6 +7,7 @@ import {
GAUGE_DEFAULT_MINIMUM,
getActiveThreshold,
GrafanaTheme,
GrafanaTheme2,
Threshold,
ThresholdsConfig,
ThresholdsMode,
@ -44,7 +45,7 @@ export function getFormattedThresholds(
decimals: number,
field: FieldConfig,
value: DisplayValue,
theme: GrafanaTheme
theme: GrafanaTheme | GrafanaTheme2
): Threshold[] {
if (field.color?.mode !== FieldColorModeId.Thresholds) {
return [{ value: field.min ?? GAUGE_DEFAULT_MINIMUM, color: value.color ?? FALLBACK_COLOR }];

2
packages/grafana-ui/src/components/Input/Input.tsx
View File

@ -181,7 +181,7 @@ export const getInputStyles = stylesFactory(({ theme, invalid = false, width }:
`,
input: cx(
getFocusStyle(theme.v1),
getFocusStyle(theme),
sharedInputStyle(theme, invalid),
css`
label: input-input;

4
packages/grafana-ui/src/components/Segment/Segment.tsx
View File

@ -4,7 +4,7 @@ import React, { HTMLProps } from 'react';
import { SelectableValue } from '@grafana/data';
import { useStyles } from '../../themes';
import { useStyles2 } from '../../themes';
import { InlineLabel } from '../Forms/InlineLabel';
import { getSegmentStyles } from './styles';
@ -36,7 +36,7 @@ export function Segment<T>({
}: React.PropsWithChildren<SegmentSyncProps<T>>) {
const [Label, labelWidth, expanded, setExpanded] = useExpandableLabel(autofocus, onExpandedChange);
const width = inputMinWidth ? Math.max(inputMinWidth, labelWidth) : labelWidth;
const styles = useStyles(getSegmentStyles);
const styles = useStyles2(getSegmentStyles);
if (!expanded) {
const label = isObject(value) ? value.label : value;

4
packages/grafana-ui/src/components/Segment/SegmentAsync.tsx
View File

@ -6,7 +6,7 @@ import { AsyncState } from 'react-use/lib/useAsync';
import { SelectableValue } from '@grafana/data';
import { useStyles } from '../../themes';
import { useStyles2 } from '../../themes';
import { InlineLabel } from '../Forms/InlineLabel';
import { SegmentSelect } from './SegmentSelect';
@ -48,7 +48,7 @@ export function SegmentAsync<T>({
const [state, fetchOptions] = useAsyncFn(loadOptions, [loadOptions]);
const [Label, labelWidth, expanded, setExpanded] = useExpandableLabel(autofocus, onExpandedChange);
const width = inputMinWidth ? Math.max(inputMinWidth, labelWidth) : labelWidth;
const styles = useStyles(getSegmentStyles);
const styles = useStyles2(getSegmentStyles);
if (!expanded) {
const label = isObject(value) ? value.label : value;

4
packages/grafana-ui/src/components/Segment/SegmentInput.tsx
View File

@ -2,7 +2,7 @@ import { cx, css } from '@emotion/css';
import React, { HTMLProps, useRef, useState } from 'react';
import useClickAway from 'react-use/lib/useClickAway';
import { useStyles } from '../../themes';
import { useStyles2 } from '../../themes';
import { measureText } from '../../utils/measureText';
import { InlineLabel } from '../Forms/InlineLabel';
@ -33,7 +33,7 @@ export function SegmentInput<T>({
const [value, setValue] = useState<number | string>(initialValue);
const [inputWidth, setInputWidth] = useState<number>(measureText((initialValue || '').toString(), FONT_SIZE).width);
const [Label, , expanded, setExpanded] = useExpandableLabel(autofocus, onExpandedChange);
const styles = useStyles(getSegmentStyles);
const styles = useStyles2(getSegmentStyles);
useClickAway(ref, () => {
setExpanded(false);

6
packages/grafana-ui/src/components/Segment/styles.ts
View File

@ -1,8 +1,8 @@
import { css } from '@emotion/css';
import { GrafanaTheme } from '@grafana/data';
import { GrafanaTheme2 } from '@grafana/data';
export const getSegmentStyles = (theme: GrafanaTheme) => {
export const getSegmentStyles = (theme: GrafanaTheme2) => {
return {
segment: css`
cursor: pointer;
@ -10,7 +10,7 @@ export const getSegmentStyles = (theme: GrafanaTheme) => {
`,
queryPlaceholder: css`
color: ${theme.palette.gray2};
color: ${theme.v1.palette.gray2};
`,
disabled: css`

2
packages/grafana-ui/src/components/TextArea/TextArea.tsx
View File

@ -22,7 +22,7 @@ const getTextAreaStyle = stylesFactory((theme: GrafanaTheme2, invalid = false) =
return {
textarea: cx(
sharedInputStyle(theme),
getFocusStyle(theme.v1),
getFocusStyle(theme),
css`
border-radius: ${theme.shape.borderRadius()};
padding: ${theme.spacing.gridSize / 4}px ${theme.spacing.gridSize}px;

66
packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
View File

@ -74,16 +74,16 @@ $red: $red-base;
$yellow: ${theme.v1.palette.yellow};
$orange: ${theme.v1.palette.orange};
$purple: ${theme.v1.palette.purple};
$variable: ${theme.v1.colors.textBlue};
$variable: ${theme.colors.primary.text};
$brand-primary: ${theme.v1.palette.brandPrimary};
$brand-success: ${theme.v1.palette.brandSuccess};
$brand-warning: ${theme.v1.palette.brandWarning};
$brand-danger: ${theme.v1.palette.brandDanger};
$brand-primary: ${theme.v1.palette.orange};
$brand-success: ${theme.colors.success.main};
$brand-warning: ${theme.colors.warning.main};
$brand-danger: ${theme.colors.error.main};
$query-red: ${theme.v1.palette.queryRed};
$query-green: ${theme.v1.palette.queryGreen};
$query-purple: ${theme.v1.palette.queryPurple};
$query-red: ${theme.colors.error.text};
$query-green: ${theme.colors.success.text};
$query-purple: #fe85fc;
$query-orange: ${theme.v1.palette.orange};
// Status colors
@ -94,17 +94,17 @@ $critical: ${theme.colors.error.text};
// Scaffolding
// -------------------------
$body-bg: ${theme.v1.colors.bodyBg};
$page-bg: ${theme.v1.colors.bodyBg};
$dashboard-bg: ${theme.v1.colors.dashboardBg};
$body-bg: ${theme.colors.background.canvas};
$page-bg: ${theme.colors.background.canvas};
$dashboard-bg: ${theme.colors.background.canvas};
$text-color-strong: ${theme.v1.colors.textStrong};
$text-color: ${theme.v1.colors.text};
$text-color-semi-weak: ${theme.v1.colors.textSemiWeak};
$text-color-weak: ${theme.v1.colors.textWeak};
$text-color-faint: ${theme.v1.colors.textFaint};
$text-color-emphasis: ${theme.v1.colors.textStrong};
$text-blue: ${theme.v1.colors.textBlue};
$text-color-strong: ${theme.colors.text.maxContrast};
$text-color: ${theme.colors.text.primary};
$text-color-semi-weak: ${theme.colors.text.secondary};
$text-color-weak: ${theme.colors.text.secondary};
$text-color-faint: ${theme.colors.text.disabled};
$text-color-emphasis: ${theme.colors.text.maxContrast};
$text-blue: ${theme.colors.primary.text};
$text-shadow-faint: 1px 1px 4px rgb(45, 45, 45);
$textShadow: none;
@ -115,14 +115,14 @@ $brand-gradient-vertical: ${theme.colors.gradients.brandVertical};
// Links
// -------------------------
$link-color: ${theme.v1.colors.link};
$link-color-disabled: ${theme.v1.colors.linkDisabled};
$link-hover-color: ${theme.v1.colors.linkHover};
$external-link-color: ${theme.v1.colors.linkExternal};
$link-color: ${theme.colors.text.primary};
$link-color-disabled: ${theme.colors.text.disabled};
$link-hover-color: ${theme.colors.text.maxContrast};
$external-link-color: ${theme.colors.text.link};
// Typography
// -------------------------
$headings-color: ${theme.v1.colors.textHeading};
$headings-color: ${theme.colors.text.primary};
$abbr-border-color: $gray-2 !default;
$text-muted: $text-color-weak;
@ -137,9 +137,9 @@ $panel-box-shadow: ${theme.components.panel.boxShadow};
$panel-corner: $panel-bg;
// page header
$page-header-bg: ${theme.v1.colors.pageHeaderBg};
$page-header-bg: ${theme.colors.background.canvas};
$page-header-shadow: inset 0px -4px 14px $dark-3;
$page-header-border-color: ${theme.v1.colors.pageHeaderBorder};
$page-header-border-color: ${theme.colors.background.canvas};
$divider-border-color: $gray-1;
@ -147,7 +147,7 @@ $divider-border-color: $gray-1;
$tight-form-func-bg: ${theme.colors.background.secondary};
$tight-form-func-highlight-bg: ${theme.colors.emphasize(theme.colors.background.secondary, 0.03)};
$modal-backdrop-bg: ${theme.v1.colors.bg3};
$modal-backdrop-bg: ${theme.colors.action.hover};
$code-tag-bg: $dark-1;
$code-tag-border: $dark-9;
@ -161,7 +161,7 @@ $list-item-bg: $card-background;
$list-item-hover-bg: $card-background-hover;
$list-item-shadow: $card-shadow;
$empty-list-cta-bg: ${theme.v1.colors.bg2};
$empty-list-cta-bg: ${theme.colors.background.secondary};
// Scrollbars
$scrollbarBackground: #404357;
@ -256,10 +256,10 @@ $navbarBorder: 1px solid $dark-6;
$side-menu-bg: $panel-bg;
$side-menu-bg-mobile: $panel-bg;
$side-menu-border: none;
$side-menu-item-hover-bg: ${theme.v1.colors.bg2};
$side-menu-item-hover-bg: ${theme.colors.background.secondary};
$side-menu-shadow: 0 0 30px #111;
$side-menu-icon-color: ${theme.v1.palette.gray70};
$side-menu-header-color: ${theme.v1.colors.text};
$side-menu-header-color: ${theme.colors.text.primary};
// Menu dropdowns
// -------------------------
@ -334,14 +334,14 @@ $json-explorer-url-color: #027bff;
// Changelog and diff
// -------------------------
$diff-label-bg: ${theme.v1.colors.bg3};
$diff-label-bg: ${theme.colors.action.hover};
$diff-label-fg: $white;
$diff-group-bg: ${theme.v1.colors.bg2};
$diff-group-bg: ${theme.colors.background.secondary};
$diff-arrow-color: $white;
$diff-json-bg: ${theme.v1.colors.bg2};
$diff-json-fg: ${theme.v1.colors.text};
$diff-json-bg: ${theme.colors.background.secondary};
$diff-json-fg: ${theme.colors.text.primary};
$diff-json-added: $blue-shade;
$diff-json-deleted: $red-shade;

70
packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
View File

@ -66,21 +66,21 @@ $border1: ${theme.colors.border.medium};
// Accent colors
// -------------------------
$blue: ${theme.v1.colors.textBlue};
$blue: ${theme.colors.primary.text};
$red: $red-base;
$yellow: ${theme.v1.palette.yellow};
$orange: ${theme.v1.palette.orange};
$purple: ${theme.v1.palette.purple};
$variable: ${theme.v1.colors.textBlue};
$variable: ${theme.colors.primary.text};
$brand-primary: ${theme.v1.palette.brandPrimary};
$brand-success: ${theme.v1.palette.brandSuccess};
$brand-warning: ${theme.v1.palette.brandWarning};
$brand-danger: ${theme.v1.palette.brandDanger};
$brand-primary: ${theme.v1.palette.orange};
$brand-success: ${theme.colors.success.main};
$brand-warning: ${theme.colors.warning.main};
$brand-danger: ${theme.colors.error.main};
$query-red: ${theme.v1.palette.queryRed};
$query-green: ${theme.v1.palette.queryGreen};
$query-purple: ${theme.v1.palette.queryPurple};
$query-red: ${theme.colors.error.text};
$query-green: ${theme.colors.success.text};
$query-purple: #fe85fc;
$query-orange: ${theme.v1.palette.orange};
// Status colors
@ -92,17 +92,17 @@ $critical: ${theme.colors.error.text};
// Scaffolding
// -------------------------
$body-bg: ${theme.v1.colors.bodyBg};
$page-bg: ${theme.v1.colors.bodyBg};
$dashboard-bg: ${theme.v1.colors.dashboardBg};
$body-bg: ${theme.colors.background.canvas};
$page-bg: ${theme.colors.background.canvas};
$dashboard-bg: ${theme.colors.background.canvas};
$text-color: ${theme.v1.colors.text};
$text-color-strong: ${theme.v1.colors.textStrong};
$text-color-semi-weak: ${theme.v1.colors.textSemiWeak};
$text-color-weak: ${theme.v1.colors.textWeak};
$text-color-faint: ${theme.v1.colors.textFaint};
$text-color-emphasis: ${theme.v1.colors.textStrong};
$text-blue: ${theme.v1.colors.textBlue};
$text-color: ${theme.colors.text.primary};
$text-color-strong: ${theme.colors.text.maxContrast};
$text-color-semi-weak: ${theme.colors.text.secondary};
$text-color-weak: ${theme.colors.text.secondary};
$text-color-faint: ${theme.colors.text.disabled};
$text-color-emphasis: ${theme.colors.text.maxContrast};
$text-blue: ${theme.colors.primary.text};
$text-shadow-faint: none;
@ -112,14 +112,14 @@ $brand-gradient-vertical: ${theme.colors.gradients.brandVertical};
// Links
// -------------------------
$link-color: ${theme.v1.colors.link};
$link-color-disabled: ${theme.v1.colors.linkDisabled};
$link-hover-color: ${theme.v1.colors.linkHover};
$external-link-color: ${theme.v1.colors.linkExternal};
$link-color: ${theme.colors.text.primary};
$link-color-disabled: ${theme.colors.text.disabled};
$link-hover-color: ${theme.colors.text.maxContrast};
$external-link-color: ${theme.colors.text.link};
// Typography
// -------------------------
$headings-color: ${theme.v1.colors.textHeading};
$headings-color: ${theme.colors.text.primary};
$abbr-border-color: $gray-2 !default;
$text-muted: $text-color-weak;
@ -134,17 +134,17 @@ $panel-box-shadow: ${theme.components.panel.boxShadow};
$panel-corner: $panel-bg;
// Page header
$page-header-bg: ${theme.v1.colors.pageHeaderBg};
$page-header-bg: ${theme.colors.background.canvas};
$page-header-shadow: inset 0px -3px 10px $gray-6;
$page-header-border-color: ${theme.v1.colors.pageHeaderBorder};
$page-header-border-color: ${theme.colors.background.canvas};
$divider-border-color: $gray-2;
// Graphite Target Editor
$tight-form-func-bg: ${theme.v1.colors.bg2};
$tight-form-func-bg: ${theme.colors.background.secondary};
$tight-form-func-highlight-bg: ${styleMixins.hoverColor(theme.colors.background.secondary, theme)};
$modal-backdrop-bg: ${theme.v1.colors.bg1};
$modal-backdrop-bg: ${theme.colors.background.primary};
$code-tag-bg: $gray-6;
$code-tag-border: $gray-4;
@ -214,8 +214,8 @@ $input-border-color: ${theme.components.input.borderColor};
$input-box-shadow: none;
$input-border-focus: ${theme.v1.palette.blue95};
$input-box-shadow-focus: ${theme.v1.palette.blue95};
$input-color-placeholder: ${theme.v1.colors.formInputPlaceholderText};
$input-label-bg: ${theme.v1.colors.bg2};
$input-color-placeholder: ${theme.colors.text.disabled};
$input-label-bg: ${theme.colors.background.secondary};
$input-color-select-arrow: ${theme.v1.palette.gray60};
// search
@ -304,7 +304,7 @@ $popover-error-bg: $btn-danger-bg;
$popover-help-bg: $tooltipBackground;
$popover-help-color: $tooltipColor;
$popover-code-bg: ${theme.v1.colors.bg1};
$popover-code-bg: ${theme.colors.background.primary};
$popover-code-boxshadow: 0 0 5px $gray60;
// images
@ -333,14 +333,14 @@ $json-explorer-url-color: $blue-base;
// Changelog and diff
// -------------------------
$diff-label-bg: ${theme.v1.colors.bg3};
$diff-label-bg: ${theme.colors.action.hover};
$diff-label-fg: $gray-2;
$diff-arrow-color: $dark-2;
$diff-group-bg: ${theme.v1.colors.bg2};
$diff-group-bg: ${theme.colors.background.secondary};
$diff-json-bg: ${theme.v1.colors.bg2};
$diff-json-fg: ${theme.v1.colors.text};
$diff-json-bg: ${theme.colors.background.secondary};
$diff-json-fg: ${theme.colors.text.primary};
$diff-json-added: $blue-shade;
$diff-json-deleted: $red-shade;

102
packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
View File

@ -18,16 +18,16 @@ $enable-hover-media-query: false !default;
// Control the default styling of most Bootstrap elements by modifying these
// variables. Mostly focused on spacing.
$space-inset-squish-md: ${theme.v1.spacing.insetSquishMd} !default;
$space-inset-squish-md: ${theme.spacing(0.5, 1)} !default;
$space-xxs: ${theme.v1.spacing.xxs} !default;
$space-xs: ${theme.v1.spacing.xs} !default;
$space-sm: ${theme.v1.spacing.sm} !default;
$space-md: ${theme.v1.spacing.md} !default;
$space-lg: ${theme.v1.spacing.lg} !default;
$space-xl: ${theme.v1.spacing.xl} !default;
$space-xxs: ${theme.spacing(0.25)} !default;
$space-xs: ${theme.spacing(0.5)} !default;
$space-sm: ${theme.spacing(1)} !default;
$space-md: ${theme.spacing(2)} !default;
$space-lg: ${theme.spacing(3)} !default;
$space-xl: ${theme.spacing(4)} !default;
$spacer: ${theme.v1.spacing.d} !default;
$spacer: ${theme.spacing(2)} !default;
$spacer-x: $spacer !default;
$spacer-y: $spacer !default;
$spacers: (
@ -63,11 +63,11 @@ $spacers: (
// adapting to different screen sizes, for use in media queries.
$grid-breakpoints: (
xs: ${theme.v1.breakpoints.xs},
sm: ${theme.v1.breakpoints.sm},
md: ${theme.v1.breakpoints.md},
lg: ${theme.v1.breakpoints.lg},
xl: ${theme.v1.breakpoints.xl},
xs: ${theme.breakpoints.values.xs}px,
sm: ${theme.breakpoints.values.sm}px,
md: ${theme.breakpoints.values.md}px,
lg: ${theme.breakpoints.values.lg}px,
xl: ${theme.breakpoints.values.xl}px,
) !default;
// Grid containers
@ -86,51 +86,51 @@ $container-max-widths: (
// Set the number of columns and specify the width of the gutters.
$grid-columns: 12 !default;
$grid-gutter-width: ${theme.v1.spacing.gutter} !default;
$grid-gutter-width: ${theme.spacing(4)} !default;
// Component heights
// -------------------------
$height-sm: ${theme.v1.height.sm};
$height-md: ${theme.v1.height.md};
$height-lg: ${theme.v1.height.lg};
$height-sm: ${theme.spacing.gridSize * theme.components.height.sm};
$height-md: ${theme.spacing.gridSize * theme.components.height.md};
$height-lg: ${theme.spacing.gridSize * theme.components.height.lg};
// Typography
// -------------------------
/* stylelint-disable-next-line string-quotes */
$font-family-sans-serif: ${theme.v1.typography.fontFamily.sansSerif};
$font-family-sans-serif: ${theme.typography.fontFamily};
/* stylelint-disable-next-line string-quotes */
$font-family-monospace: ${theme.v1.typography.fontFamily.monospace};
$font-family-monospace: ${theme.typography.fontFamilyMonospace};
$font-size-base: ${theme.v1.typography.size.base} !default;
$font-size-base: ${theme.typography.fontSize}px !default;
$font-size-lg: ${theme.v1.typography.size.lg} !default;
$font-size-md: ${theme.v1.typography.size.md} !default;
$font-size-sm: ${theme.v1.typography.size.sm} !default;
$font-size-xs: ${theme.v1.typography.size.xs} !default;
$font-size-lg: ${theme.typography.size.lg} !default;
$font-size-md: ${theme.typography.size.md} !default;
$font-size-sm: ${theme.typography.size.sm} !default;
$font-size-xs: ${theme.typography.size.xs} !default;
$line-height-base: ${theme.v1.typography.lineHeight.md} !default;
$line-height-base: ${theme.typography.body.lineHeight} !default;
$font-weight-regular: ${theme.v1.typography.weight.regular} !default;
$font-weight-semi-bold: ${theme.v1.typography.weight.semibold} !default;
$font-weight-regular: ${theme.typography.fontWeightRegular} !default;
$font-weight-semi-bold: ${theme.typography.fontWeightMedium} !default;
$font-size-h1: ${theme.v1.typography.heading.h1} !default;
$font-size-h2: ${theme.v1.typography.heading.h2} !default;
$font-size-h3: ${theme.v1.typography.heading.h3} !default;
$font-size-h4: ${theme.v1.typography.heading.h4} !default;
$font-size-h5: ${theme.v1.typography.heading.h5} !default;
$font-size-h6: ${theme.v1.typography.heading.h6} !default;
$font-size-h1: ${theme.typography.h1.fontSize} !default;
$font-size-h2: ${theme.typography.h2.fontSize} !default;
$font-size-h3: ${theme.typography.h3.fontSize} !default;
$font-size-h4: ${theme.typography.h4.fontSize} !default;
$font-size-h5: ${theme.typography.h5.fontSize} !default;
$font-size-h6: ${theme.typography.h6.fontSize} !default;
$headings-line-height: ${theme.v1.typography.lineHeight.sm} !default;
$headings-line-height: ${theme.typography.bodySmall.lineHeight} !default;
// Components
//
// Define common padding and border radius sizes and more.
$border-width: ${theme.v1.border.width.sm} !default;
$border-width: 1px !default;
$border-radius: ${theme.v1.border.radius.sm} !default;
$border-radius-lg: ${theme.v1.border.radius.lg} !default;
$border-radius-sm: ${theme.v1.border.radius.sm} !default;
$border-radius: ${theme.shape.borderRadius(1)} !default;
$border-radius-lg: ${theme.shape.borderRadius(3)} !default;
$border-radius-sm: ${theme.shape.borderRadius(1)} !default;
// Page
@ -139,13 +139,13 @@ $page-sidebar-margin: 56px;
// Links
// -------------------------
$link-decoration: ${theme.v1.typography.link.decoration} !default;
$link-hover-decoration: ${theme.v1.typography.link.hoverDecoration} !default;
$link-decoration: none !default;
$link-hover-decoration: none !default;
// Forms
$input-line-height: 18px !default;
$input-border-radius: $border-radius;
$input-padding: 0 ${theme.v1.spacing.sm};
$input-padding: 0 ${theme.spacing(1)};
$input-height: 32px !default;
$cursor-disabled: not-allowed !default;
@ -159,13 +159,13 @@ $form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www
// -------------------------
// Used for a bird's eye view of components dependent on the z-axis
// Try to avoid customizing these :)
$zindex-dropdown: ${theme.v1.zIndex.dropdown};
$zindex-navbar-fixed: ${theme.v1.zIndex.navbarFixed};
$zindex-sidemenu: ${theme.v1.zIndex.sidemenu};
$zindex-tooltip: ${theme.v1.zIndex.tooltip};
$zindex-modal-backdrop: ${theme.v1.zIndex.modalBackdrop};
$zindex-modal: ${theme.v1.zIndex.modal};
$zindex-typeahead: ${theme.v1.zIndex.typeahead};
$zindex-dropdown: ${theme.zIndex.dropdown};
$zindex-navbar-fixed: ${theme.zIndex.navbarFixed};
$zindex-sidemenu: ${theme.zIndex.sidemenu};
$zindex-tooltip: ${theme.zIndex.tooltip};
$zindex-modal-backdrop: ${theme.zIndex.modalBackdrop};
$zindex-modal: ${theme.zIndex.modal};
$zindex-typeahead: ${theme.zIndex.typeahead};
// Buttons
//
@ -173,7 +173,7 @@ $zindex-typeahead: ${theme.v1.zIndex.typeahead};
$btn-padding-x: 14px !default;
$btn-padding-y: 0 !default;
$btn-line-height: $line-height-base;
$btn-font-weight: ${theme.v1.typography.weight.semibold} !default;
$btn-font-weight: ${theme.typography.fontWeightMedium} !default;
$btn-padding-x-sm: 7px !default;
$btn-padding-y-sm: 4px !default;
@ -192,8 +192,8 @@ $navbar-padding: 20px;
// dashboard
$dashboard-padding: $space-md;
$panel-padding: ${theme.v1.panelPadding}px;
$panel-header-height: ${theme.v1.panelHeaderHeight}px;
$panel-padding: ${theme.components.panel.padding * theme.spacing.gridSize}px;
$panel-header-height: ${theme.spacing.gridSize * theme.components.panel.headerHeight}px;
$panel-header-z-index: 10;
// tabs

16
packages/grafana-ui/src/themes/mixins.ts
View File

@ -40,16 +40,22 @@ export function mediaUp(breakpoint: string) {
return `only screen and (min-width: ${breakpoint})`;
}
export const focusCss = (theme: GrafanaTheme) => `
const isGrafanaTheme2 = (theme: GrafanaTheme | GrafanaTheme2): theme is GrafanaTheme2 => theme.hasOwnProperty('v1');
export const focusCss = (theme: GrafanaTheme | GrafanaTheme2) => {
const isTheme2 = isGrafanaTheme2(theme);
const firstColor = isTheme2 ? theme.colors.background.canvas : theme.colors.bodyBg;
const secondColor = isTheme2 ? theme.colors.primary.main : theme.colors.formFocusOutline;
return `
outline: 2px dotted transparent;
outline-offset: 2px;
box-shadow: 0 0 0 2px ${theme.colors.bodyBg}, 0 0 0px 4px ${theme.colors.formFocusOutline};
box-shadow: 0 0 0 2px ${firstColor}, 0 0 0px 4px ${secondColor};
transition-property: outline, outline-offset, box-shadow;
transition-duration: 0.2s;
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
`;
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);`;
};
export function getMouseFocusStyles(theme: GrafanaTheme2): CSSObject {
export function getMouseFocusStyles(theme: GrafanaTheme | GrafanaTheme2): CSSObject {
return {
outline: 'none',
boxShadow: `none`,

14
public/app/plugins/panel/nodeGraph/Marker.tsx
View File

@ -1,22 +1,22 @@
import { css } from '@emotion/css';
import React, { MouseEvent, memo } from 'react';
import { GrafanaTheme } from '@grafana/data';
import { stylesFactory, useTheme } from '@grafana/ui';
import { GrafanaTheme2 } from '@grafana/data';
import { useStyles2 } from '@grafana/ui';
import { NodesMarker } from './types';
const nodeR = 40;
const getStyles = stylesFactory((theme: GrafanaTheme) => ({
const getStyles = (theme: GrafanaTheme2) => ({
mainGroup: css`
cursor: pointer;
font-size: 10px;
`,
mainCircle: css`
fill: ${theme.colors.panelBg};
stroke: ${theme.colors.border3};
fill: ${theme.components.panel.background};
stroke: ${theme.colors.border.strong};
`,
text: css`
width: 50px;
@ -26,7 +26,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({
align-items: center;
justify-content: center;
`,
}));
});
export const Marker = memo(function Marker(props: {
marker: NodesMarker;
@ -34,7 +34,7 @@ export const Marker = memo(function Marker(props: {
}) {
const { marker, onClick } = props;
const { node } = marker;
const styles = getStyles(useTheme());
const styles = useStyles2(getStyles);
if (!(node.x !== undefined && node.y !== undefined)) {
return null;

4
public/app/plugins/panel/nodeGraph/ViewControls.tsx
View File

@ -1,7 +1,7 @@
import { css } from '@emotion/css';
import React, { useState } from 'react';
import { Button, HorizontalGroup, useStyles, VerticalGroup } from '@grafana/ui';
import { Button, HorizontalGroup, useStyles2, VerticalGroup } from '@grafana/ui';
function getStyles() {
return {
@ -31,7 +31,7 @@ export function ViewControls<Config extends Record<string, any>>(props: Props<Co
// For debugging the layout, should be removed here and maybe moved to panel config later on
const allowConfiguration = false;
const styles = useStyles(getStyles);
const styles = useStyles2(getStyles);
return (
<div className={styles.wrapper}>

51
public/app/plugins/panel/nodeGraph/useContextMenu.tsx
View File

@ -1,8 +1,8 @@
import { css } from '@emotion/css';
import React, { MouseEvent, useCallback, useState } from 'react';
import { DataFrame, Field, GrafanaTheme, LinkModel } from '@grafana/data';
import { ContextMenu, MenuGroup, MenuItem, stylesFactory, useTheme } from '@grafana/ui';
import { DataFrame, Field, GrafanaTheme2, LinkModel } from '@grafana/data';
import { ContextMenu, MenuGroup, MenuItem, useStyles2, useTheme2 } from '@grafana/ui';
import { Config } from './layout';
import { EdgeDatum, NodeDatum } from './types';
@ -172,7 +172,7 @@ function NodeHeader(props: { node: NodeDatum; nodes: DataFrame }) {
function EdgeHeader(props: { edge: EdgeDatum; edges: DataFrame }) {
const index = props.edge.dataFrameRowIndex;
const fields = getEdgeFields(props.edges);
const styles = getLabelStyles(useTheme());
const styles = getLabelStyles(useTheme2());
const valueSource = fields.source?.values.get(index) || '';
const valueTarget = fields.target?.values.get(index) || '';
@ -193,31 +193,10 @@ function EdgeHeader(props: { edge: EdgeDatum; edges: DataFrame }) {
);
}
export const getLabelStyles = stylesFactory((theme: GrafanaTheme) => {
return {
label: css`
label: Label;
line-height: 1.25;
margin: ${theme.spacing.formLabelMargin};
padding: ${theme.spacing.formLabelPadding};
color: ${theme.colors.textFaint};
font-size: ${theme.typography.size.sm};
font-weight: ${theme.typography.weight.semibold};
`,
value: css`
label: Value;
font-size: ${theme.typography.size.sm};
font-weight: ${theme.typography.weight.semibold};
color: ${theme.colors.formLabel};
margin-top: ${theme.spacing.xxs};
display: block;
`,
};
});
function Label(props: { field: Field; index: number }) {
const { field, index } = props;
const value = field.values.get(index) || '';
const styles = getLabelStyles(useTheme());
const styles = useStyles2(getLabelStyles);
return (
<div className={styles.label}>
@ -226,3 +205,25 @@ function Label(props: { field: Field; index: number }) {
</div>
);
}
export const getLabelStyles = (theme: GrafanaTheme2) => {
return {
label: css`
label: Label;
line-height: 1.25;
margin-bottom: ${theme.spacing(0.5)};
padding-left: ${theme.spacing(0.25)};
color: ${theme.colors.text.disabled};
font-size: ${theme.typography.size.sm};
font-weight: ${theme.typography.fontWeightMedium};
`,
value: css`
label: Value;
font-size: ${theme.typography.size.sm};
font-weight: ${theme.typography.fontWeightMedium};
color: ${theme.colors.text.primary};
margin-top: ${theme.spacing(0.25)};
display: block;
`,
};
};

2
public/app/plugins/panel/table-old/module.ts
View File

@ -140,7 +140,7 @@ export class TablePanelCtrl extends MetricsPanelCtrl {
this.dashboard.getTimezone(),
this.$sanitize,
this.templateSrv,
config.theme
config.theme2
);
return super.render(this.table);

4
public/app/plugins/panel/table-old/renderer.ts
View File

@ -12,7 +12,7 @@ import {
TimeZone,
dateTimeFormatISO,
dateTimeFormat,
GrafanaTheme,
GrafanaTheme2,
} from '@grafana/data';
import { getTemplateSrv, TemplateSrv } from '@grafana/runtime';
@ -29,7 +29,7 @@ export class TableRenderer {
private timeZone: TimeZone,
private sanitize: (v: any) => any,
private templateSrv: TemplateSrv = getTemplateSrv(),
private theme: GrafanaTheme
private theme: GrafanaTheme2
) {
this.initColumns();
}

2
public/app/plugins/panel/table/TablePanel.tsx
View File

@ -133,7 +133,7 @@ export class TablePanel extends Component<Props> {
}
if (count > 1) {
const inputHeight = config.theme.spacing.formInputHeight;
const inputHeight = config.theme2.spacing.gridSize * config.theme2.components.height.md;
const padding = 8 * 2;
const currentIndex = this.getCurrentFrameIndex(frames, options);
const names = frames.map((frame, index) => {

18
public/app/plugins/panel/text/TextPanelEditor.tsx
View File

@ -2,11 +2,10 @@ import { css, cx } from '@emotion/css';
import React, { FC, useMemo } from 'react';
import AutoSizer from 'react-virtualized-auto-sizer';
import { GrafanaTheme, StandardEditorProps } from '@grafana/data';
import { GrafanaTheme2, StandardEditorProps } from '@grafana/data';
import {
CodeEditor,
stylesFactory,
useTheme,
useStyles2,
CodeEditorSuggestionItem,
variableSuggestionToCodeEditorSuggestion,
} from '@grafana/ui';
@ -15,8 +14,7 @@ import { PanelOptions, TextMode } from './models.gen';
export const TextPanelEditor: FC<StandardEditorProps<string, any, PanelOptions>> = ({ value, onChange, context }) => {
const language = useMemo(() => context.options?.mode ?? TextMode.Markdown, [context]);
const theme = useTheme();
const styles = getStyles(theme);
const styles = useStyles2(getStyles);
const getSuggestions = (): CodeEditorSuggestionItem[] => {
if (!context.getSuggestions) {
@ -51,12 +49,12 @@ export const TextPanelEditor: FC<StandardEditorProps<string, any, PanelOptions>>
);
};
const getStyles = stylesFactory((theme: GrafanaTheme) => ({
const getStyles = (theme: GrafanaTheme2) => ({
editorBox: css`
label: editorBox;
border: ${theme.border.width.sm} solid ${theme.colors.border2};
border-radius: ${theme.border.radius.sm};
margin: ${theme.spacing.xs} 0;
border: 1px solid ${theme.colors.border.medium};
border-radius: ${theme.shape.borderRadius(1)};
margin: ${theme.spacing(0.5)} 0;
width: 100%;
`,
}));
});

34
public/app/plugins/panel/timeseries/plugins/ExemplarMarker.tsx
View File

@ -8,13 +8,13 @@ import {
dateTimeFormat,
Field,
FieldType,
GrafanaTheme,
GrafanaTheme2,
LinkModel,
systemDateFormats,
TimeZone,
} from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
import { FieldLinkList, Portal, UPlotConfigBuilder, useStyles } from '@grafana/ui';
import { FieldLinkList, Portal, UPlotConfigBuilder, useStyles2 } from '@grafana/ui';
interface ExemplarMarkerProps {
timeZone: TimeZone;
@ -31,7 +31,7 @@ export const ExemplarMarker: React.FC<ExemplarMarkerProps> = ({
config,
getFieldLinks,
}) => {
const styles = useStyles(getExemplarMarkerStyles);
const styles = useStyles2(getExemplarMarkerStyles);
const [isOpen, setIsOpen] = useState(false);
const [markerElement, setMarkerElement] = React.useState<HTMLDivElement | null>(null);
const [popperElement, setPopperElement] = React.useState<HTMLDivElement | null>(null);
@ -158,11 +158,11 @@ export const ExemplarMarker: React.FC<ExemplarMarkerProps> = ({
);
};
const getExemplarMarkerStyles = (theme: GrafanaTheme) => {
const bg = theme.isDark ? theme.palette.dark2 : theme.palette.white;
const headerBg = theme.isDark ? theme.palette.dark9 : theme.palette.gray5;
const shadowColor = theme.isDark ? theme.palette.black : theme.palette.white;
const tableBgOdd = theme.isDark ? theme.palette.dark3 : theme.palette.gray6;
const getExemplarMarkerStyles = (theme: GrafanaTheme2) => {
const bg = theme.isDark ? theme.v1.palette.dark2 : theme.v1.palette.white;
const headerBg = theme.isDark ? theme.v1.palette.dark9 : theme.v1.palette.gray5;
const shadowColor = theme.isDark ? theme.v1.palette.black : theme.v1.palette.white;
const tableBgOdd = theme.isDark ? theme.v1.palette.dark3 : theme.v1.palette.gray6;
return {
markerWrapper: css`
@ -185,13 +185,13 @@ const getExemplarMarkerStyles = (theme: GrafanaTheme) => {
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid ${theme.palette.red};
border-bottom: 4px solid ${theme.v1.palette.red};
pointer-events: none;
`,
wrapper: css`
background: ${bg};
border: 1px solid ${headerBg};
border-radius: ${theme.border.radius.md};
border-radius: ${theme.shape.borderRadius(2)};
box-shadow: 0 0 20px ${shadowColor};
`,
exemplarsTable: css`
@ -200,11 +200,11 @@ const getExemplarMarkerStyles = (theme: GrafanaTheme) => {
tr td {
padding: 5px 10px;
white-space: nowrap;
border-bottom: 4px solid ${theme.colors.panelBg};
border-bottom: 4px solid ${theme.components.panel.background};
}
tr {
background-color: ${theme.colors.bg1};
background-color: ${theme.colors.background.primary};
&:nth-child(even) {
background-color: ${tableBgOdd};
}
@ -214,7 +214,7 @@ const getExemplarMarkerStyles = (theme: GrafanaTheme) => {
display: flex;
flex-direction: row;
flex-wrap: wrap;
column-gap: ${theme.spacing.sm};
column-gap: ${theme.spacing(1)};
> span {
flex-grow: 0;
@ -235,8 +235,8 @@ const getExemplarMarkerStyles = (theme: GrafanaTheme) => {
display: flex;
`,
title: css`
font-weight: ${theme.typography.weight.semibold};
padding-right: ${theme.spacing.md};
font-weight: ${theme.typography.fontWeightMedium};
padding-right: ${theme.spacing(2)};
overflow: hidden;
display: inline-block;
white-space: nowrap;
@ -244,8 +244,8 @@ const getExemplarMarkerStyles = (theme: GrafanaTheme) => {
flex-grow: 1;
`,
body: css`
padding: ${theme.spacing.sm};
font-weight: ${theme.typography.weight.semibold};
padding: ${theme.spacing(1)};
font-weight: ${theme.typography.fontWeightMedium};
`,
marble: css`
display: block;

42
public/app/plugins/panel/welcome/Welcome.tsx
View File

@ -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';
const helpOptions = [
{ value: 0, label: 'Documentation', href: 'https://grafana.com/docs/grafana/latest' },
@ -12,7 +12,7 @@ const helpOptions = [
];
export const WelcomeBanner: FC = () => {
const styles = getStyles(useTheme());
const styles = useStyles2(getStyles);
return (
<div className={styles.container}>
@ -37,7 +37,7 @@ export const WelcomeBanner: FC = () => {
);
};
const getStyles = stylesFactory((theme: GrafanaTheme) => {
const getStyles = (theme: GrafanaTheme2) => {
return {
container: css`
display: flex;
@ -47,31 +47,31 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
align-items: center;
padding: 0 16px;
justify-content: space-between;
padding: 0 ${theme.spacing.lg};
padding: 0 ${theme.spacing(3)};
@media only screen and (max-width: ${theme.breakpoints.lg}) {
${theme.breakpoints.down('lg')} {
background-position: 0px;
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
@media only screen and (max-width: ${theme.breakpoints.sm}) {
padding: 0 ${theme.spacing.sm};
${theme.breakpoints.down('sm')} {
padding: 0 ${theme.spacing(1)};
}
`,
title: css`
margin-bottom: 0;
@media only screen and (max-width: ${theme.breakpoints.lg}) {
margin-bottom: ${theme.spacing.sm};
${theme.breakpoints.down('lg')} {
margin-bottom: ${theme.spacing(1)};
}
@media only screen and (max-width: ${theme.breakpoints.md}) {
font-size: ${theme.typography.heading.h2};
${theme.breakpoints.down('md')} {
font-size: ${theme.typography.h2.fontSize};
}
@media only screen and (max-width: ${theme.breakpoints.sm}) {
font-size: ${theme.typography.heading.h3};
${theme.breakpoints.down('sm')} {
font-size: ${theme.typography.h3.fontSize};
}
`,
help: css`
@ -79,14 +79,14 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
align-items: baseline;
`,
helpText: css`
margin-right: ${theme.spacing.md};
margin-right: ${theme.spacing(2)};
margin-bottom: 0;
@media only screen and (max-width: ${theme.breakpoints.md}) {
font-size: ${theme.typography.heading.h4};
${theme.breakpoints.down('md')} {
font-size: ${theme.typography.h4.fontSize};
}
@media only screen and (max-width: ${theme.breakpoints.sm}) {
${theme.breakpoints.down('sm')} {
display: none;
}
`,
@ -95,13 +95,13 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
flex-wrap: wrap;
`,
helpLink: css`
margin-right: ${theme.spacing.md};
margin-right: ${theme.spacing(2)};
text-decoration: underline;
text-wrap: no-wrap;
@media only screen and (max-width: ${theme.breakpoints.sm}) {
${theme.breakpoints.down('sm')} {
margin-right: 8px;
}
`,
};
});
};

21
public/app/plugins/panel/xychart/XYDimsEditor.tsx
View File

@ -4,11 +4,11 @@ import React, { FC, useMemo } from 'react';
import {
SelectableValue,
getFrameDisplayName,
GrafanaTheme,
StandardEditorProps,
getFieldDisplayName,
GrafanaTheme2,
} from '@grafana/data';
import { IconButton, Label, Select, stylesFactory, useTheme } from '@grafana/ui';
import { IconButton, Label, Select, useStyles2 } from '@grafana/ui';
import { getXYDimensions, isGraphable } from './dims';
import { XYDimensionConfig, XYChartOptions } from './models.gen';
@ -81,8 +81,7 @@ export const XYDimsEditor: FC<StandardEditorProps<XYDimensionConfig, any, XYChar
return v;
}, [dims, context.data, value]);
const theme = useTheme();
const styles = getStyles(theme);
const styles = useStyles2(getStyles);
if (!context.data) {
return <div>No data...</div>;
@ -142,7 +141,7 @@ export const XYDimsEditor: FC<StandardEditorProps<XYDimensionConfig, any, XYChar
);
};
const getStyles = stylesFactory((theme: GrafanaTheme) => ({
const getStyles = (theme: GrafanaTheme2) => ({
sorter: css`
margin-top: 10px;
display: flex;
@ -153,15 +152,15 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({
`,
row: css`
padding: ${theme.spacing.xs} ${theme.spacing.sm};
border-radius: ${theme.border.radius.sm};
background: ${theme.colors.bg2};
min-height: ${theme.spacing.formInputHeight}px;
padding: ${theme.spacing(0.5, 1)};
border-radius: ${theme.shape.borderRadius(1)};
background: ${theme.colors.background.secondary};
min-height: ${theme.spacing(4)};
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
margin-bottom: 3px;
border: 1px solid ${theme.colors.formInputBorder};
border: 1px solid ${theme.components.input.borderColor};
`,
}));
});