From 1772bd4238fb57bc64ef38d2a7bb6ba3a882d7af Mon Sep 17 00:00:00 2001 From: kay delaney <45561153+kaydelaney@users.noreply.github.com> Date: Mon, 8 Aug 2022 16:37:06 +0100 Subject: [PATCH] Chore: Reduce usage of v1 theme (#53245) --- packages/grafana-data/src/field/scale.test.ts | 4 +- packages/grafana-data/src/themes/types.ts | 1 + packages/grafana-data/src/types/config.ts | 4 +- .../src/utils/namedColorsPalette.test.ts | 4 +- packages/grafana-runtime/src/config.ts | 1 + .../grafana-ui/src/components/Badge/Badge.tsx | 16 ++- .../src/components/BrowserLabel/Label.tsx | 2 +- .../Collapse/CollapsableSection.tsx | 2 +- .../ColorPicker/SeriesColorPickerPopover.tsx | 4 +- .../ColorPicker/SpectrumPalette.tsx | 4 +- .../ConfirmButton/ConfirmButton.tsx | 16 +-- .../components/DataLinks/FieldLinkList.tsx | 20 ++-- .../DataSourceHttpSettings.tsx | 6 +- .../DatePickerWithInput.tsx | 4 +- .../RelativeTimeRangePicker.tsx | 6 +- .../DateTimePickers/TimeOfDayPicker.tsx | 33 +++--- .../DateTimePickers/TimeRangeInput.tsx | 10 +- .../DateTimePickers/TimeRangePicker.test.tsx | 7 +- .../DateTimePickers/TimeRangePicker.tsx | 34 +++--- .../TimeRangePicker/CalendarBody.tsx | 4 +- .../src/components/Forms/commonStyles.ts | 2 +- .../grafana-ui/src/components/Gauge/utils.ts | 3 +- .../grafana-ui/src/components/Input/Input.tsx | 2 +- .../src/components/Segment/Segment.tsx | 4 +- .../src/components/Segment/SegmentAsync.tsx | 4 +- .../src/components/Segment/SegmentInput.tsx | 4 +- .../src/components/Segment/styles.ts | 6 +- .../src/components/TextArea/TextArea.tsx | 2 +- .../src/themes/_variables.dark.scss.tmpl.ts | 66 ++++++------ .../src/themes/_variables.light.scss.tmpl.ts | 70 ++++++------ .../src/themes/_variables.scss.tmpl.ts | 102 +++++++++--------- packages/grafana-ui/src/themes/mixins.ts | 16 ++- public/app/plugins/panel/nodeGraph/Marker.tsx | 14 +-- .../plugins/panel/nodeGraph/ViewControls.tsx | 4 +- .../panel/nodeGraph/useContextMenu.tsx | 51 ++++----- public/app/plugins/panel/table-old/module.ts | 2 +- .../app/plugins/panel/table-old/renderer.ts | 4 +- public/app/plugins/panel/table/TablePanel.tsx | 2 +- .../plugins/panel/text/TextPanelEditor.tsx | 18 ++-- .../timeseries/plugins/ExemplarMarker.tsx | 34 +++--- public/app/plugins/panel/welcome/Welcome.tsx | 42 ++++---- .../plugins/panel/xychart/XYDimsEditor.tsx | 21 ++-- 42 files changed, 325 insertions(+), 330 deletions(-) diff --git a/packages/grafana-data/src/field/scale.test.ts b/packages/grafana-data/src/field/scale.test.ts index c09a8249c2e..aa7e3a706a9 100644 --- a/packages/grafana-data/src/field/scale.test.ts +++ b/packages/grafana-data/src/field/scale.test.ts @@ -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, }); }); diff --git a/packages/grafana-data/src/themes/types.ts b/packages/grafana-data/src/themes/types.ts index ede4c180126..404d8e89220 100644 --- a/packages/grafana-data/src/themes/types.ts +++ b/packages/grafana-data/src/themes/types.ts @@ -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 }; diff --git a/packages/grafana-data/src/types/config.ts b/packages/grafana-data/src/types/config.ts index 7fccea958bb..2dfe20e380a 100644 --- a/packages/grafana-data/src/types/config.ts +++ b/packages/grafana-data/src/types/config.ts @@ -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[]; diff --git a/packages/grafana-data/src/utils/namedColorsPalette.test.ts b/packages/grafana-data/src/utils/namedColorsPalette.test.ts index cc8f367cbf7..d153a2e989e 100644 --- a/packages/grafana-data/src/utils/namedColorsPalette.test.ts +++ b/packages/grafana-data/src/utils/namedColorsPalette.test.ts @@ -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'); }); }); }); diff --git a/packages/grafana-runtime/src/config.ts b/packages/grafana-runtime/src/config.ts index 3adcfbc58a6..b313cdfb092 100644 --- a/packages/grafana-runtime/src/config.ts +++ b/packages/grafana-runtime/src/config.ts @@ -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[] = []; diff --git a/packages/grafana-ui/src/components/Badge/Badge.tsx b/packages/grafana-ui/src/components/Badge/Badge.tsx index 9cd0c78fe48..b97dbbf7499 100644 --- a/packages/grafana-ui/src/components/Badge/Badge.tsx +++ b/packages/grafana-ui/src/components/Badge/Badge.tsx @@ -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 { } export const Badge = React.memo(({ 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 = (
@@ -43,7 +41,7 @@ export const Badge = React.memo(({ 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) => { } `, }; -}); +}; diff --git a/packages/grafana-ui/src/components/BrowserLabel/Label.tsx b/packages/grafana-ui/src/components/BrowserLabel/Label.tsx index b184e1a0b90..a93a1cd06b4 100644 --- a/packages/grafana-ui/src/components/BrowserLabel/Label.tsx +++ b/packages/grafana-ui/src/components/BrowserLabel/Label.tsx @@ -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)}; diff --git a/packages/grafana-ui/src/components/Collapse/CollapsableSection.tsx b/packages/grafana-ui/src/components/Collapse/CollapsableSection.tsx index 13fff992cb0..9bef35e0c40 100644 --- a/packages/grafana-ui/src/components/Collapse/CollapsableSection.tsx +++ b/packages/grafana-ui/src/components/Collapse/CollapsableSection.tsx @@ -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', diff --git a/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx b/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx index b92b48f1178..20d2e4af2e6 100644 --- a/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx @@ -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 = (props) => { - const styles = useStyles(getStyles); + const styles = useStyles2(getStyles); const { yaxis, onToggleAxis, color, ...colorPickerProps } = props; const customPickers = onToggleAxis diff --git a/packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.tsx b/packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.tsx index f477c3d41b2..78be8895497 100644 --- a/packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.tsx @@ -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 { diff --git a/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.tsx b/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.tsx index f2b60332052..e98548e1f5b 100644 --- a/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.tsx +++ b/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.tsx @@ -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 { } } -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; diff --git a/packages/grafana-ui/src/components/DataLinks/FieldLinkList.tsx b/packages/grafana-ui/src/components/DataLinks/FieldLinkList.tsx index 548131230d3..469bde77382 100644 --- a/packages/grafana-ui/src/components/DataLinks/FieldLinkList.tsx +++ b/packages/grafana-ui/src/components/DataLinks/FieldLinkList.tsx @@ -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 ; @@ -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)}; } `, }); diff --git a/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx index f65a405d359..37af44271d8 100644 --- a/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx +++ b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx @@ -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 = (props) => { } = props; let urlTooltip; const [isAccessHelpVisible, setIsAccessHelpVisible] = useState(false); - const theme = useTheme(); + const theme = useTheme2(); const onSettingsChange = useCallback( (change: Partial>) => { @@ -121,7 +121,7 @@ export const DataSourceHttpSettings: React.FC = (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 }); diff --git a/packages/grafana-ui/src/components/DateTimePickers/DatePickerWithInput/DatePickerWithInput.tsx b/packages/grafana-ui/src/components/DateTimePickers/DatePickerWithInput/DatePickerWithInput.tsx index 136cfedce82..f1568140415 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/DatePickerWithInput/DatePickerWithInput.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/DatePickerWithInput/DatePickerWithInput.tsx @@ -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 (
diff --git a/packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.tsx b/packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.tsx index 26a97a28b48..13aa85ffbed 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.tsx @@ -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` diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeOfDayPicker.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeOfDayPicker.tsx index 6d5bc4a2732..99dbf1fcddf 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeOfDayPicker.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeOfDayPicker.tsx @@ -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 = ({ size = 'auto', disabled, }) => { - const styles = useStyles(getStyles); + const styles = useStyles2(getStyles); return ( = ({ 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) => { } `, }; -}); +}; diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangeInput.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangeInput.tsx index f3407f2efcf..ec327943755 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangeInput.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangeInput.tsx @@ -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; `, }; diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.test.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.test.tsx index f3ac08567ab..8403577a7d6 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.test.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.test.tsx @@ -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( - {}} onChange={(value) => {}} value={value} onMoveBackward={() => {}} onMoveForward={() => {}} onZoom={() => {}} - theme={createTheme().v1} /> ); diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx index 5accaec58c6..d802518d53a 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx @@ -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; export const TimePickerButtonLabel = memo(({ 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}; `, }; -}); +}; diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarBody.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarBody.tsx index 9fee980d1fc..a8cba10cd00 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarBody.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarBody.tsx @@ -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}; } diff --git a/packages/grafana-ui/src/components/Forms/commonStyles.ts b/packages/grafana-ui/src/components/Forms/commonStyles.ts index 4107d030e10..ddc3399a740 100644 --- a/packages/grafana-ui/src/components/Forms/commonStyles.ts +++ b/packages/grafana-ui/src/components/Forms/commonStyles.ts @@ -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)} } diff --git a/packages/grafana-ui/src/components/Gauge/utils.ts b/packages/grafana-ui/src/components/Gauge/utils.ts index 87b0c95112f..bfc6ab930da 100644 --- a/packages/grafana-ui/src/components/Gauge/utils.ts +++ b/packages/grafana-ui/src/components/Gauge/utils.ts @@ -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 }]; diff --git a/packages/grafana-ui/src/components/Input/Input.tsx b/packages/grafana-ui/src/components/Input/Input.tsx index 454e9763b3f..fdbf6f666f8 100644 --- a/packages/grafana-ui/src/components/Input/Input.tsx +++ b/packages/grafana-ui/src/components/Input/Input.tsx @@ -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; diff --git a/packages/grafana-ui/src/components/Segment/Segment.tsx b/packages/grafana-ui/src/components/Segment/Segment.tsx index c5eb15e91cf..5c7d2e1e881 100644 --- a/packages/grafana-ui/src/components/Segment/Segment.tsx +++ b/packages/grafana-ui/src/components/Segment/Segment.tsx @@ -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({ }: React.PropsWithChildren>) { 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; diff --git a/packages/grafana-ui/src/components/Segment/SegmentAsync.tsx b/packages/grafana-ui/src/components/Segment/SegmentAsync.tsx index cfdf16c6c5d..1026aafc961 100644 --- a/packages/grafana-ui/src/components/Segment/SegmentAsync.tsx +++ b/packages/grafana-ui/src/components/Segment/SegmentAsync.tsx @@ -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({ 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; diff --git a/packages/grafana-ui/src/components/Segment/SegmentInput.tsx b/packages/grafana-ui/src/components/Segment/SegmentInput.tsx index 048e439cb7b..d4dfc2169f6 100644 --- a/packages/grafana-ui/src/components/Segment/SegmentInput.tsx +++ b/packages/grafana-ui/src/components/Segment/SegmentInput.tsx @@ -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({ const [value, setValue] = useState(initialValue); const [inputWidth, setInputWidth] = useState(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); diff --git a/packages/grafana-ui/src/components/Segment/styles.ts b/packages/grafana-ui/src/components/Segment/styles.ts index fab1d691a15..336bce379f6 100644 --- a/packages/grafana-ui/src/components/Segment/styles.ts +++ b/packages/grafana-ui/src/components/Segment/styles.ts @@ -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` diff --git a/packages/grafana-ui/src/components/TextArea/TextArea.tsx b/packages/grafana-ui/src/components/TextArea/TextArea.tsx index aa235615756..3497b33f4d8 100644 --- a/packages/grafana-ui/src/components/TextArea/TextArea.tsx +++ b/packages/grafana-ui/src/components/TextArea/TextArea.tsx @@ -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; diff --git a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts index fd0b1aad07c..914343221b0 100644 --- a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts @@ -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; diff --git a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts index 6b747eb72b7..1d88a8a3b24 100644 --- a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts @@ -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; diff --git a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts index 6d6d4cde84a..775341a1a9c 100644 --- a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts @@ -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 diff --git a/packages/grafana-ui/src/themes/mixins.ts b/packages/grafana-ui/src/themes/mixins.ts index b57cdbe8b21..9dfd1fdd2c5 100644 --- a/packages/grafana-ui/src/themes/mixins.ts +++ b/packages/grafana-ui/src/themes/mixins.ts @@ -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`, diff --git a/public/app/plugins/panel/nodeGraph/Marker.tsx b/public/app/plugins/panel/nodeGraph/Marker.tsx index 8f73d3912a1..2a427b43eea 100644 --- a/public/app/plugins/panel/nodeGraph/Marker.tsx +++ b/public/app/plugins/panel/nodeGraph/Marker.tsx @@ -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; diff --git a/public/app/plugins/panel/nodeGraph/ViewControls.tsx b/public/app/plugins/panel/nodeGraph/ViewControls.tsx index ea460af3db4..a6f7f435999 100644 --- a/public/app/plugins/panel/nodeGraph/ViewControls.tsx +++ b/public/app/plugins/panel/nodeGraph/ViewControls.tsx @@ -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>(props: Props diff --git a/public/app/plugins/panel/nodeGraph/useContextMenu.tsx b/public/app/plugins/panel/nodeGraph/useContextMenu.tsx index 2bbcc48c779..4c9731e915c 100644 --- a/public/app/plugins/panel/nodeGraph/useContextMenu.tsx +++ b/public/app/plugins/panel/nodeGraph/useContextMenu.tsx @@ -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 (
@@ -226,3 +205,25 @@ function Label(props: { field: Field; index: number }) {
); } + +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; + `, + }; +}; diff --git a/public/app/plugins/panel/table-old/module.ts b/public/app/plugins/panel/table-old/module.ts index 548a828f87d..ed8965684f4 100644 --- a/public/app/plugins/panel/table-old/module.ts +++ b/public/app/plugins/panel/table-old/module.ts @@ -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); diff --git a/public/app/plugins/panel/table-old/renderer.ts b/public/app/plugins/panel/table-old/renderer.ts index e79a7439b94..e769862b1b9 100644 --- a/public/app/plugins/panel/table-old/renderer.ts +++ b/public/app/plugins/panel/table-old/renderer.ts @@ -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(); } diff --git a/public/app/plugins/panel/table/TablePanel.tsx b/public/app/plugins/panel/table/TablePanel.tsx index 9e35be29ec8..a0d01ad41f1 100644 --- a/public/app/plugins/panel/table/TablePanel.tsx +++ b/public/app/plugins/panel/table/TablePanel.tsx @@ -133,7 +133,7 @@ export class TablePanel extends Component { } 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) => { diff --git a/public/app/plugins/panel/text/TextPanelEditor.tsx b/public/app/plugins/panel/text/TextPanelEditor.tsx index a44e161f1fc..8a899ac9b0c 100644 --- a/public/app/plugins/panel/text/TextPanelEditor.tsx +++ b/public/app/plugins/panel/text/TextPanelEditor.tsx @@ -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> = ({ 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> ); }; -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%; `, -})); +}); diff --git a/public/app/plugins/panel/timeseries/plugins/ExemplarMarker.tsx b/public/app/plugins/panel/timeseries/plugins/ExemplarMarker.tsx index 1a0112ef62c..6d2e18a582b 100644 --- a/public/app/plugins/panel/timeseries/plugins/ExemplarMarker.tsx +++ b/public/app/plugins/panel/timeseries/plugins/ExemplarMarker.tsx @@ -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 = ({ config, getFieldLinks, }) => { - const styles = useStyles(getExemplarMarkerStyles); + const styles = useStyles2(getExemplarMarkerStyles); const [isOpen, setIsOpen] = useState(false); const [markerElement, setMarkerElement] = React.useState(null); const [popperElement, setPopperElement] = React.useState(null); @@ -158,11 +158,11 @@ export const ExemplarMarker: React.FC = ({ ); }; -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; diff --git a/public/app/plugins/panel/welcome/Welcome.tsx b/public/app/plugins/panel/welcome/Welcome.tsx index fa623ef0e8e..4c5b7f5bb89 100644 --- a/public/app/plugins/panel/welcome/Welcome.tsx +++ b/public/app/plugins/panel/welcome/Welcome.tsx @@ -1,8 +1,8 @@ import { css } from '@emotion/css'; import React, { FC } from 'react'; -import { GrafanaTheme } from '@grafana/data'; -import { stylesFactory, useTheme } from '@grafana/ui'; +import { GrafanaTheme2 } from '@grafana/data'; +import { useStyles2 } from '@grafana/ui'; 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 (
@@ -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; } `, }; -}); +}; diff --git a/public/app/plugins/panel/xychart/XYDimsEditor.tsx b/public/app/plugins/panel/xychart/XYDimsEditor.tsx index cc3e014e311..095b1df7b74 100644 --- a/public/app/plugins/panel/xychart/XYDimsEditor.tsx +++ b/public/app/plugins/panel/xychart/XYDimsEditor.tsx @@ -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: FCNo data...
; @@ -142,7 +141,7 @@ export const XYDimsEditor: FC ({ +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}; `, -})); +});