From 52316606276d4322358eec0d761e0dfe411b04a0 Mon Sep 17 00:00:00 2001 From: Olof Bourghardt Date: Fri, 20 Aug 2021 14:53:03 +0200 Subject: [PATCH] Explore: use GrafanaTheme2 (LiveLogs component) (#37452) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Explore: use GrafanaTheme2 * Explore: add correct style values. Add theme.v1 to the styles that were uncertain * Logs: add use of GrafanaTheme2 in varioius log components * Styles: add some of the correct values recieved via feedback * Add correct style values * Update public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx Co-authored-by: Torkel Ödegaard * Update public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx Co-authored-by: Torkel Ödegaard * Update public/app/plugins/panel/dashlist/styles.ts Co-authored-by: Torkel Ödegaard * Explore: fix failing tests * Explore: add styling values from v2 * Fix small type error * Replace v1 styles with v2 styles * Remove forgotten v1 values * Remove more v1 style values * Apply correct style value to LogRowMessage Co-authored-by: Piotr Jamróz Co-authored-by: Torkel Ödegaard Co-authored-by: Piotr Jamróz --- .../src/components/Logs/LogDetails.test.tsx | 4 +- .../src/components/Logs/LogDetails.tsx | 17 ++++--- .../src/components/Logs/LogDetailsRow.tsx | 17 ++++--- .../grafana-ui/src/components/Logs/LogRow.tsx | 23 +++++----- .../src/components/Logs/LogRowMessage.tsx | 17 ++++--- .../src/components/Logs/LogRows.tsx | 8 ++-- .../src/components/Logs/getLogRowStyles.ts | 42 +++++++++--------- .../VizLegend/VizLegendTableItem.tsx | 20 ++++----- .../src/themes/_variables.light.scss.tmpl.ts | 2 +- packages/grafana-ui/src/themes/mixins.ts | 28 ++++++------ .../AddPanelWidget/AddPanelWidget.tsx | 44 ++++++++++--------- public/app/features/explore/LiveLogs.tsx | 24 +++++----- .../panel/annolist/AnnotationListItem.tsx | 34 +++++++------- .../app/plugins/panel/dashlist/DashList.tsx | 4 +- public/app/plugins/panel/dashlist/styles.ts | 22 +++++----- 15 files changed, 152 insertions(+), 154 deletions(-) diff --git a/packages/grafana-ui/src/components/Logs/LogDetails.test.tsx b/packages/grafana-ui/src/components/Logs/LogDetails.test.tsx index d40fe942261..ff432dbf4d3 100644 --- a/packages/grafana-ui/src/components/Logs/LogDetails.test.tsx +++ b/packages/grafana-ui/src/components/Logs/LogDetails.test.tsx @@ -1,12 +1,12 @@ import React from 'react'; import { LogDetails, Props } from './LogDetails'; -import { LogRowModel, LogLevel, GrafanaTheme, MutableDataFrame, Field } from '@grafana/data'; +import { LogRowModel, LogLevel, MutableDataFrame, Field, GrafanaTheme2 } from '@grafana/data'; import { mount } from 'enzyme'; import { LogDetailsRow } from './LogDetailsRow'; const setup = (propOverrides?: Partial, rowOverrides?: Partial) => { const props: Props = { - theme: {} as GrafanaTheme, + theme: {} as GrafanaTheme2, showDuplicates: false, wrapLogMessage: false, row: { diff --git a/packages/grafana-ui/src/components/Logs/LogDetails.tsx b/packages/grafana-ui/src/components/Logs/LogDetails.tsx index 7204e85c193..b5d2adbc943 100644 --- a/packages/grafana-ui/src/components/Logs/LogDetails.tsx +++ b/packages/grafana-ui/src/components/Logs/LogDetails.tsx @@ -9,13 +9,12 @@ import { getParser, LinkModel, LogRowModel, - GrafanaTheme, + GrafanaTheme2, } from '@grafana/data'; -import { Themeable } from '../../types/theme'; -import { withTheme } from '../../themes/index'; +import { Themeable2 } from '../../types/theme'; +import { withTheme2 } from '../../themes/index'; import { getLogRowStyles } from './getLogRowStyles'; -import { stylesFactory } from '../../themes/stylesFactory'; import { getAllFields } from './logParser'; //Components @@ -23,7 +22,7 @@ import { LogDetailsRow } from './LogDetailsRow'; import { Tooltip } from '../Tooltip/Tooltip'; import { Icon } from '../Icon/Icon'; -export interface Props extends Themeable { +export interface Props extends Themeable2 { row: LogRowModel; showDuplicates: boolean; getRows: () => LogRowModel[]; @@ -39,7 +38,7 @@ export interface Props extends Themeable { onClickHideDetectedField?: (key: string) => void; } -const getStyles = stylesFactory((theme: GrafanaTheme) => { +const getStyles = (theme: GrafanaTheme2) => { return { logsRowLevelDetails: css` label: logs-row__level_details; @@ -52,11 +51,11 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => { cursor: default; &:hover { - background-color: ${theme.colors.panelBg}; + background-color: ${theme.colors.background.primary}; } `, }; -}); +}; class UnThemedLogDetails extends PureComponent { getParser = memoizeOne(getParser); @@ -175,5 +174,5 @@ class UnThemedLogDetails extends PureComponent { } } -export const LogDetails = withTheme(UnThemedLogDetails); +export const LogDetails = withTheme2(UnThemedLogDetails); LogDetails.displayName = 'LogDetails'; diff --git a/packages/grafana-ui/src/components/Logs/LogDetailsRow.tsx b/packages/grafana-ui/src/components/Logs/LogDetailsRow.tsx index 7750cb81a0f..e20cdf055fe 100644 --- a/packages/grafana-ui/src/components/Logs/LogDetailsRow.tsx +++ b/packages/grafana-ui/src/components/Logs/LogDetailsRow.tsx @@ -1,18 +1,17 @@ import React, { PureComponent } from 'react'; import { css, cx } from '@emotion/css'; -import { Field, LinkModel, LogLabelStatsModel, GrafanaTheme } from '@grafana/data'; +import { Field, LinkModel, LogLabelStatsModel, GrafanaTheme2 } from '@grafana/data'; -import { Themeable } from '../../types/theme'; -import { withTheme } from '../../themes/index'; +import { Themeable2 } from '../../types/theme'; +import { withTheme2 } from '../../themes/index'; import { getLogRowStyles } from './getLogRowStyles'; -import { stylesFactory } from '../../themes/stylesFactory'; //Components import { LogLabelStats } from './LogLabelStats'; import { IconButton } from '../IconButton/IconButton'; import { DataLinkButton } from '../DataLinks/DataLinkButton'; -export interface Props extends Themeable { +export interface Props extends Themeable2 { parsedValue: string; parsedKey: string; wrapLogMessage?: boolean; @@ -32,7 +31,7 @@ interface State { fieldStats: LogLabelStatsModel[] | null; } -const getStyles = stylesFactory((theme: GrafanaTheme) => { +const getStyles = (theme: GrafanaTheme2) => { return { noHoverBackground: css` label: noHoverBackground; @@ -49,14 +48,14 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => { word-break: break-all; `, showingField: css` - color: ${theme.palette.blue95}; + color: ${theme.colors.primary.text}; `, wrapLine: css` label: wrapLine; white-space: pre-wrap; `, }; -}); +}; class UnThemedLogDetailsRow extends PureComponent { state: State = { @@ -188,5 +187,5 @@ class UnThemedLogDetailsRow extends PureComponent { } } -export const LogDetailsRow = withTheme(UnThemedLogDetailsRow); +export const LogDetailsRow = withTheme2(UnThemedLogDetailsRow); LogDetailsRow.displayName = 'LogDetailsRow'; diff --git a/packages/grafana-ui/src/components/Logs/LogRow.tsx b/packages/grafana-ui/src/components/Logs/LogRow.tsx index 7a573be38d1..6b4e72d7c33 100644 --- a/packages/grafana-ui/src/components/Logs/LogRow.tsx +++ b/packages/grafana-ui/src/components/Logs/LogRow.tsx @@ -6,10 +6,10 @@ import { LogsSortOrder, TimeZone, DataQueryResponse, - GrafanaTheme, dateTimeFormat, checkLogsError, escapeUnescapedString, + GrafanaTheme2, } from '@grafana/data'; import { Icon } from '../Icon/Icon'; import { Tooltip } from '../Tooltip/Tooltip'; @@ -22,10 +22,9 @@ import { LogRowContextProvider, RowContextOptions, } from './LogRowContextProvider'; -import { Themeable } from '../../types/theme'; -import { styleMixins, withTheme } from '../../themes/index'; +import { Themeable2 } from '../../types/theme'; +import { styleMixins, withTheme2 } from '../../themes/index'; import { getLogRowStyles } from './getLogRowStyles'; -import { stylesFactory } from '../../themes/stylesFactory'; //Components import { LogDetails } from './LogDetails'; @@ -33,7 +32,7 @@ import { LogRowMessageDetectedFields } from './LogRowMessageDetectedFields'; import { LogRowMessage } from './LogRowMessage'; import { LogLabels } from './LogLabels'; -interface Props extends Themeable { +interface Props extends Themeable2 { highlighterExpressions?: string[]; row: LogRowModel; showDuplicates: boolean; @@ -62,25 +61,25 @@ interface State { showDetails: boolean; } -const getStyles = stylesFactory((theme: GrafanaTheme) => { +const getStyles = (theme: GrafanaTheme2) => { return { topVerticalAlign: css` label: topVerticalAlign; vertical-align: top; - margin-top: -${theme.spacing.xs}; - margin-left: -${theme.spacing.xxs}; + margin-top: -${theme.spacing(0.5)}; + margin-left: -${theme.spacing(0.25)}; `, detailsOpen: css` &:hover { - background-color: ${styleMixins.hoverColor(theme.colors.panelBg, theme)}; + background-color: ${styleMixins.hoverColor(theme.colors.background.primary, theme)}; } `, errorLogRow: css` label: erroredLogRow; - color: ${theme.colors.textWeak}; + color: ${theme.colors.text.secondary}; `, }; -}); +}; /** * Renders a log line. * @@ -248,5 +247,5 @@ class UnThemedLogRow extends PureComponent { } } -export const LogRow = withTheme(UnThemedLogRow); +export const LogRow = withTheme2(UnThemedLogRow); LogRow.displayName = 'LogRow'; diff --git a/packages/grafana-ui/src/components/Logs/LogRowMessage.tsx b/packages/grafana-ui/src/components/Logs/LogRowMessage.tsx index 96bd173f877..68ae9ca24fd 100644 --- a/packages/grafana-ui/src/components/Logs/LogRowMessage.tsx +++ b/packages/grafana-ui/src/components/Logs/LogRowMessage.tsx @@ -2,16 +2,15 @@ import React, { PureComponent } from 'react'; import { isEqual } from 'lodash'; import tinycolor from 'tinycolor2'; import { css, cx } from '@emotion/css'; -import { LogRowModel, findHighlightChunksInText, GrafanaTheme } from '@grafana/data'; +import { LogRowModel, findHighlightChunksInText, GrafanaTheme2 } from '@grafana/data'; import memoizeOne from 'memoize-one'; // @ts-ignore import Highlighter from 'react-highlight-words'; import { LogRowContextQueryErrors, HasMoreContextRows, LogRowContextRows } from './LogRowContextProvider'; -import { Themeable } from '../../types/theme'; -import { withTheme } from '../../themes/index'; +import { Themeable2 } from '../../types/theme'; +import { withTheme2 } from '../../themes/index'; import { getLogRowStyles } from './getLogRowStyles'; -import { stylesFactory } from '../../themes/stylesFactory'; //Components import { LogRowContext } from './LogRowContext'; @@ -19,7 +18,7 @@ import { LogMessageAnsi } from './LogMessageAnsi'; export const MAX_CHARACTERS = 100000; -interface Props extends Themeable { +interface Props extends Themeable2 { row: LogRowModel; hasMoreContextRows?: HasMoreContextRows; contextIsOpen: boolean; @@ -34,8 +33,8 @@ interface Props extends Themeable { updateLimit?: () => void; } -const getStyles = stylesFactory((theme: GrafanaTheme) => { - const outlineColor = tinycolor(theme.colors.dashboardBg).setAlpha(0.7).toRgbString(); +const getStyles = (theme: GrafanaTheme2) => { + const outlineColor = tinycolor(theme.components.dashboard.background).setAlpha(0.7).toRgbString(); return { positionRelative: css` @@ -56,7 +55,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => { margin-left: 0px; `, }; -}); +}; function renderLogMessage( hasAnsi: boolean, @@ -163,5 +162,5 @@ class UnThemedLogRowMessage extends PureComponent { } } -export const LogRowMessage = withTheme(UnThemedLogRowMessage); +export const LogRowMessage = withTheme2(UnThemedLogRowMessage); LogRowMessage.displayName = 'LogRowMessage'; diff --git a/packages/grafana-ui/src/components/Logs/LogRows.tsx b/packages/grafana-ui/src/components/Logs/LogRows.tsx index c17f1c296f9..03115734936 100644 --- a/packages/grafana-ui/src/components/Logs/LogRows.tsx +++ b/packages/grafana-ui/src/components/Logs/LogRows.tsx @@ -2,8 +2,8 @@ import React, { PureComponent } from 'react'; import memoizeOne from 'memoize-one'; import { TimeZone, LogsDedupStrategy, LogRowModel, Field, LinkModel, LogsSortOrder, sortLogRows } from '@grafana/data'; -import { Themeable } from '../../types/theme'; -import { withTheme } from '../../themes/index'; +import { Themeable2 } from '../../types/theme'; +import { withTheme2 } from '../../themes/index'; import { getLogRowStyles } from './getLogRowStyles'; //Components @@ -12,7 +12,7 @@ import { RowContextOptions } from './LogRowContextProvider'; export const PREVIEW_LIMIT = 100; -export interface Props extends Themeable { +export interface Props extends Themeable2 { logRows?: LogRowModel[]; deduplicatedRows?: LogRowModel[]; dedupStrategy: LogsDedupStrategy; @@ -186,5 +186,5 @@ class UnThemedLogRows extends PureComponent { } } -export const LogRows = withTheme(UnThemedLogRows); +export const LogRows = withTheme2(UnThemedLogRows); LogRows.displayName = 'LogsRows'; diff --git a/packages/grafana-ui/src/components/Logs/getLogRowStyles.ts b/packages/grafana-ui/src/components/Logs/getLogRowStyles.ts index 0a0b1ebabb7..7bf0896aceb 100644 --- a/packages/grafana-ui/src/components/Logs/getLogRowStyles.ts +++ b/packages/grafana-ui/src/components/Logs/getLogRowStyles.ts @@ -1,10 +1,10 @@ import { css } from '@emotion/css'; -import { GrafanaTheme, LogLevel } from '@grafana/data'; +import { GrafanaTheme2, LogLevel } from '@grafana/data'; import { styleMixins, stylesFactory } from '../../themes'; -export const getLogRowStyles = stylesFactory((theme: GrafanaTheme, logLevel?: LogLevel) => { - let logColor = theme.isLight ? theme.palette.gray5 : theme.palette.gray2; - const hoverBgColor = styleMixins.hoverColor(theme.colors.panelBg, theme); +export const getLogRowStyles = stylesFactory((theme: GrafanaTheme2, logLevel?: LogLevel) => { + let logColor = theme.isLight ? theme.v1.palette.gray5 : theme.v1.palette.gray2; + const hoverBgColor = styleMixins.hoverColor(theme.colors.background.primary, theme); switch (logLevel) { case LogLevel.crit: @@ -17,7 +17,7 @@ export const getLogRowStyles = stylesFactory((theme: GrafanaTheme, logLevel?: Lo break; case LogLevel.warning: case LogLevel.warn: - logColor = theme.palette.yellow; + logColor = theme.colors.warning.main; break; case LogLevel.info: logColor = '#7eb26d'; @@ -35,18 +35,18 @@ export const getLogRowStyles = stylesFactory((theme: GrafanaTheme, logLevel?: Lo label: logs-row__match-highlight; background: inherit; padding: inherit; - color: ${theme.palette.yellow}; - background-color: rgba(${theme.palette.yellow}, 0.1); + color: ${theme.colors.warning.main}; + background-color: rgba(${theme.colors.warning.main}, 0.1); `, logsRowMatchHighLightPreview: css` label: logs-row__match-highlight--preview; - background-color: rgba(${theme.palette.yellow}, 0.2); + background-color: rgba(${theme.colors.warning.main}, 0.2); border-bottom-style: dotted; `, logsRowsTable: css` label: logs-rows; - font-family: ${theme.typography.fontFamily.monospace}; - font-size: ${theme.typography.size.sm}; + font-family: ${theme.typography.fontFamilyMonospace}; + font-size: ${theme.typography.bodySmall.fontSize}; width: 100%; `, context: css` @@ -68,7 +68,7 @@ export const getLogRowStyles = stylesFactory((theme: GrafanaTheme, logLevel?: Lo z-index: 1; text-decoration: underline; &:hover { - color: ${theme.palette.yellow}; + color: ${theme.colors.warning.main}; } } } @@ -78,9 +78,9 @@ export const getLogRowStyles = stylesFactory((theme: GrafanaTheme, logLevel?: Lo } > td { - padding-right: ${theme.spacing.sm}; - border-top: ${theme.border.width.sm} solid transparent; - border-bottom: ${theme.border.width.sm} solid transparent; + padding-right: ${theme.spacing(1)}; + border-top: ${theme.v1.border.width.sm} solid transparent; + border-bottom: ${theme.v1.border.width.sm} solid transparent; height: 100%; } @@ -111,7 +111,7 @@ export const getLogRowStyles = stylesFactory((theme: GrafanaTheme, logLevel?: Lo } `, logIconError: css` - color: ${theme.palette.red}; + color: ${theme.colors.warning.main}; `, logsRowToggleDetails: css` label: logs-row-toggle-details__level; @@ -137,8 +137,8 @@ export const getLogRowStyles = stylesFactory((theme: GrafanaTheme, logLevel?: Lo //Log details specific CSS logDetailsContainer: css` label: logs-row-details-table; - border: 1px solid ${theme.colors.border2}; - padding: 0 ${theme.spacing.sm} ${theme.spacing.sm}; + border: 1px solid ${theme.colors.border.medium}; + padding: 0 ${theme.spacing(1)} ${theme.spacing(1)}; border-radius: 3px; margin: 20px 8px 20px 16px; cursor: default; @@ -154,7 +154,7 @@ export const getLogRowStyles = stylesFactory((theme: GrafanaTheme, logLevel?: Lo logsDetailsIcon: css` label: logs-row-details__icon; position: relative; - color: ${theme.palette.gray3}; + color: ${theme.v1.palette.gray3}; padding-top: 6px; padding-left: 6px; `, @@ -162,13 +162,13 @@ export const getLogRowStyles = stylesFactory((theme: GrafanaTheme, logLevel?: Lo label: logs-row-details__label; max-width: 30em; min-width: 20em; - padding: 0 ${theme.spacing.sm}; + padding: 0 ${theme.spacing(1)}; overflow-wrap: break-word; `, logDetailsHeading: css` label: logs-row-details__heading; - font-weight: ${theme.typography.weight.bold}; - padding: ${theme.spacing.sm} 0 ${theme.spacing.xs}; + font-weight: ${theme.typography.fontWeightBold}; + padding: ${theme.spacing(1)} 0 ${theme.spacing(0.5)}; `, logDetailsValue: css` label: logs-row-details__row; diff --git a/packages/grafana-ui/src/components/VizLegend/VizLegendTableItem.tsx b/packages/grafana-ui/src/components/VizLegend/VizLegendTableItem.tsx index 8994301911d..720396ceee5 100644 --- a/packages/grafana-ui/src/components/VizLegend/VizLegendTableItem.tsx +++ b/packages/grafana-ui/src/components/VizLegend/VizLegendTableItem.tsx @@ -2,9 +2,9 @@ import React, { useCallback } from 'react'; import { css, cx } from '@emotion/css'; import { VizLegendSeriesIcon } from './VizLegendSeriesIcon'; import { VizLegendItem } from './types'; -import { useStyles } from '../../themes/ThemeContext'; +import { useStyles2 } from '../../themes/ThemeContext'; import { styleMixins } from '../../themes'; -import { GrafanaTheme, formattedValueToString } from '@grafana/data'; +import { formattedValueToString, GrafanaTheme2 } from '@grafana/data'; export interface Props { key?: React.Key; @@ -27,7 +27,7 @@ export const LegendTableItem: React.FunctionComponent = ({ className, readonly, }) => { - const styles = useStyles(getStyles); + const styles = useStyles2(getStyles); const onMouseEnter = useCallback( (event: React.MouseEvent) => { @@ -85,16 +85,16 @@ export const LegendTableItem: React.FunctionComponent = ({ LegendTableItem.displayName = 'LegendTableItem'; -const getStyles = (theme: GrafanaTheme) => { - const rowHoverBg = styleMixins.hoverColor(theme.colors.bg1, theme); +const getStyles = (theme: GrafanaTheme2) => { + const rowHoverBg = styleMixins.hoverColor(theme.colors.background.primary, theme); return { row: css` label: LegendRow; - font-size: ${theme.typography.size.sm}; - border-bottom: 1px solid ${theme.colors.border1}; + font-size: ${theme.v1.typography.size.sm}; + border-bottom: 1px solid ${theme.colors.border.weak}; td { - padding: ${theme.spacing.xxs} ${theme.spacing.sm}; + padding: ${theme.spacing(0.25, 1)}; white-space: nowrap; } @@ -108,7 +108,7 @@ const getStyles = (theme: GrafanaTheme) => { `, labelDisabled: css` label: LegendLabelDisabled; - color: ${theme.colors.linkDisabled}; + color: ${theme.colors.text.disabled}; `, clickable: css` label: LegendClickable; @@ -123,7 +123,7 @@ const getStyles = (theme: GrafanaTheme) => { text-align: right; `, yAxisLabel: css` - color: ${theme.palette.gray2}; + color: ${theme.colors.text.secondary}; `, }; }; 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 459798d4427..9840a326b16 100644 --- a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts @@ -137,7 +137,7 @@ $divider-border-color: $gray-2; // Graphite Target Editor $tight-form-func-bg: ${theme.v1.colors.bg2}; -$tight-form-func-highlight-bg: ${styleMixins.hoverColor(theme.v1.colors.bg2, theme.v1)}; +$tight-form-func-highlight-bg: ${styleMixins.hoverColor(theme.colors.background.secondary, theme)}; $modal-backdrop-bg: ${theme.v1.colors.bg1}; $code-tag-bg: $gray-6; diff --git a/packages/grafana-ui/src/themes/mixins.ts b/packages/grafana-ui/src/themes/mixins.ts index 737dcf4bf8a..1b396158c11 100644 --- a/packages/grafana-ui/src/themes/mixins.ts +++ b/packages/grafana-ui/src/themes/mixins.ts @@ -2,36 +2,36 @@ import { CSSObject } from '@emotion/css'; import { GrafanaTheme, GrafanaTheme2 } from '@grafana/data'; import tinycolor from 'tinycolor2'; -export function cardChrome(theme: GrafanaTheme): string { +export function cardChrome(theme: GrafanaTheme2): string { return ` - background: ${theme.colors.bg2}; + background: ${theme.colors.background.secondary}; &:hover { - background: ${hoverColor(theme.colors.bg2, theme)}; + background: ${hoverColor(theme.colors.background.secondary, theme)}; } - box-shadow: ${theme.shadows.listItem}; - border-radius: ${theme.border.radius.md}; + box-shadow: ${theme.components.panel.boxShadow}; + border-radius: ${theme.shape.borderRadius(2)}; `; } -export function hoverColor(color: string, theme: GrafanaTheme): string { +export function hoverColor(color: string, theme: GrafanaTheme2): string { return theme.isDark ? tinycolor(color).brighten(2).toString() : tinycolor(color).darken(2).toString(); } -export function listItem(theme: GrafanaTheme): string { +export function listItem(theme: GrafanaTheme2): string { return ` - background: ${theme.colors.bg2}; + background: ${theme.colors.background.secondary}; &:hover { - background: ${hoverColor(theme.colors.bg2, theme)}; + background: ${hoverColor(theme.colors.background.secondary, theme)}; } - box-shadow: ${theme.shadows.listItem}; - border-radius: ${theme.border.radius.md}; + box-shadow: ${theme.components.panel.boxShadow}; + border-radius: ${theme.shape.borderRadius(2)}; `; } -export function listItemSelected(theme: GrafanaTheme): string { +export function listItemSelected(theme: GrafanaTheme2): string { return ` - background: ${hoverColor(theme.colors.bg2, theme)}; - color: ${theme.colors.textStrong}; + background: ${hoverColor(theme.colors.background.secondary, theme)}; + color: ${theme.colors.text.maxContrast}; `; } diff --git a/public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx b/public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx index eb71b4378e6..04ce2afee20 100644 --- a/public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx +++ b/public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx @@ -4,9 +4,9 @@ import { css, cx, keyframes } from '@emotion/css'; import { chain, cloneDeep, defaults, find, sortBy } from 'lodash'; import tinycolor from 'tinycolor2'; import { locationService, reportInteraction } from '@grafana/runtime'; -import { Icon, IconButton, styleMixins, useStyles } from '@grafana/ui'; +import { Icon, IconButton, styleMixins, useStyles2 } from '@grafana/ui'; import { selectors } from '@grafana/e2e-selectors'; -import { GrafanaTheme } from '@grafana/data'; +import { GrafanaTheme2 } from '@grafana/data'; import config from 'app/core/config'; import store from 'app/core/store'; @@ -132,7 +132,7 @@ export const AddPanelWidgetUnconnected: React.FC = ({ panel, dashboard }) dashboard.removePanel(panel); }; - const styles = useStyles(getStyles); + const styles = useStyles2(getStyles); const copiedPanelPlugins = useMemo(() => getCopiedPanelPlugins(), []); return ( @@ -230,20 +230,22 @@ const AddPanelWidgetHandle: React.FC = ({ children, o ); }; -const getStyles = (theme: GrafanaTheme) => { +const getStyles = (theme: GrafanaTheme2) => { const pulsate = keyframes` - 0% {box-shadow: 0 0 0 2px ${theme.colors.bodyBg}, 0 0 0px 4px ${theme.colors.formFocusOutline};} - 50% {box-shadow: 0 0 0 2px ${theme.colors.bodyBg}, 0 0 0px 4px ${tinycolor(theme.colors.formFocusOutline) + 0% {box-shadow: 0 0 0 2px ${theme.colors.background.canvas}, 0 0 0px 4px ${theme.colors.primary.main};} + 50% {box-shadow: 0 0 0 2px ${theme.components.dashboard.background}, 0 0 0px 4px ${tinycolor( + theme.colors.primary.main + ) .darken(20) .toHexString()};} - 100% {box-shadow: 0 0 0 2px ${theme.colors.bodyBg}, 0 0 0px 4px ${theme.colors.formFocusOutline};} + 100% {box-shadow: 0 0 0 2px ${theme.components.dashboard.background}, 0 0 0px 4px ${theme.colors.primary.main};} `; return { // wrapper is used to make sure box-shadow animation isn't cut off in dashboard page wrapper: css` height: 100%; - padding-top: ${theme.spacing.xs}; + padding-top: ${theme.spacing(0.5)}; `, callToAction: css` overflow: hidden; @@ -253,10 +255,10 @@ const getStyles = (theme: GrafanaTheme) => { animation: ${pulsate} 2s ease infinite; `, rowGap: css` - margin-left: ${theme.spacing.sm}; + margin-left: ${theme.spacing(1)}; `, columnGap: css` - margin-bottom: ${theme.spacing.sm}; + margin-bottom: ${theme.spacing(1)}; `, actionsRow: css` display: flex; @@ -266,9 +268,9 @@ const getStyles = (theme: GrafanaTheme) => { > div { justify-self: center; cursor: pointer; - background: ${theme.colors.bg2}; - border-radius: ${theme.border.radius.sm}; - color: ${theme.colors.text}; + background: ${theme.colors.background.secondary}; + border-radius: ${theme.shape.borderRadius(1)}; + color: ${theme.colors.text.primary}; width: 100%; display: flex; flex-direction: column; @@ -277,7 +279,7 @@ const getStyles = (theme: GrafanaTheme) => { text-align: center; &:hover { - background: ${styleMixins.hoverColor(theme.colors.bg2, theme)}; + background: ${styleMixins.hoverColor(theme.colors.background.secondary, theme)}; } &:hover > #book-icon { @@ -288,7 +290,7 @@ const getStyles = (theme: GrafanaTheme) => { actionsWrapper: css` display: flex; flex-direction: column; - padding: 0 ${theme.spacing.sm} ${theme.spacing.sm} ${theme.spacing.sm}; + padding: ${theme.spacing(0, 1, 1, 1)}; height: 100%; `, headerRow: css` @@ -297,22 +299,22 @@ const getStyles = (theme: GrafanaTheme) => { height: 38px; flex-shrink: 0; width: 100%; - font-size: ${theme.typography.size.md}; - font-weight: ${theme.typography.weight.semibold}; - padding-left: ${theme.spacing.sm}; + font-size: ${theme.typography.fontSize}; + font-weight: ${theme.typography.fontWeightMedium}; + padding-left: ${theme.spacing(1)}; transition: background-color 0.1s ease-in-out; cursor: move; &:hover { - background: ${theme.colors.bg2}; + background: ${theme.colors.background.secondary}; } `, backButton: css` display: flex; align-items: center; cursor: pointer; - padding-left: ${theme.spacing.xs}; - width: ${theme.spacing.xl}; + padding-left: ${theme.spacing(0.5)}; + width: ${theme.spacing(4)}; `, noMargin: css` margin: 0; diff --git a/public/app/features/explore/LiveLogs.tsx b/public/app/features/explore/LiveLogs.tsx index f208ffc6f4f..b3e9f832d8f 100644 --- a/public/app/features/explore/LiveLogs.tsx +++ b/public/app/features/explore/LiveLogs.tsx @@ -2,16 +2,16 @@ import React, { PureComponent } from 'react'; import { css, cx } from '@emotion/css'; import tinycolor from 'tinycolor2'; -import { LogMessageAnsi, Themeable, withTheme, getLogRowStyles, Icon, Button } from '@grafana/ui'; -import { GrafanaTheme, LogRowModel, TimeZone, dateTimeFormat } from '@grafana/data'; +import { LogMessageAnsi, getLogRowStyles, Icon, Button, Themeable2, withTheme2 } from '@grafana/ui'; +import { LogRowModel, TimeZone, dateTimeFormat, GrafanaTheme2 } from '@grafana/data'; import { ElapsedTime } from './ElapsedTime'; -const getStyles = (theme: GrafanaTheme) => ({ +const getStyles = (theme: GrafanaTheme2) => ({ logsRowsLive: css` label: logs-rows-live; - font-family: ${theme.typography.fontFamily.monospace}; - font-size: ${theme.typography.size.sm}; + font-family: ${theme.typography.fontFamilyMonospace}; + font-size: ${theme.typography.bodySmall.fontSize}; display: flex; flex-flow: column nowrap; height: 60vh; @@ -23,11 +23,11 @@ const getStyles = (theme: GrafanaTheme) => ({ logsRowFade: css` label: logs-row-fresh; color: ${theme.colors.text}; - background-color: ${tinycolor(theme.palette.blue95).setAlpha(0.25).toString()}; + background-color: ${tinycolor(theme.colors.info.transparent).setAlpha(0.25).toString()}; animation: fade 1s ease-out 1s 1 normal forwards; @keyframes fade { from { - background-color: ${tinycolor(theme.palette.blue95).setAlpha(0.25).toString()}; + background-color: ${tinycolor(theme.colors.info.transparent).setAlpha(0.25).toString()}; } to { background-color: transparent; @@ -35,20 +35,20 @@ const getStyles = (theme: GrafanaTheme) => ({ } `, logsRowsIndicator: css` - font-size: ${theme.typography.size.md}; - padding-top: ${theme.spacing.sm}; + font-size: ${theme.typography.h6.fontSize}; + padding-top: ${theme.spacing(1)}; display: flex; align-items: center; `, button: css` - margin-right: ${theme.spacing.sm}; + margin-right: ${theme.spacing(1)}; `, fullWidth: css` width: 100%; `, }); -export interface Props extends Themeable { +export interface Props extends Themeable2 { logRows?: LogRowModel[]; timeZone: TimeZone; stopLive: () => void; @@ -163,4 +163,4 @@ class LiveLogs extends PureComponent { } } -export const LiveLogsWithTheme = withTheme(LiveLogs); +export const LiveLogsWithTheme = withTheme2(LiveLogs); diff --git a/public/app/plugins/panel/annolist/AnnotationListItem.tsx b/public/app/plugins/panel/annolist/AnnotationListItem.tsx index 6c9e6a516c8..51a90eb5dca 100644 --- a/public/app/plugins/panel/annolist/AnnotationListItem.tsx +++ b/public/app/plugins/panel/annolist/AnnotationListItem.tsx @@ -1,7 +1,7 @@ import React, { FC, MouseEvent } from 'react'; import { css, cx } from '@emotion/css'; -import { AnnotationEvent, DateTimeInput, GrafanaTheme, PanelProps } from '@grafana/data'; -import { styleMixins, Tooltip, useStyles } from '@grafana/ui'; +import { AnnotationEvent, DateTimeInput, GrafanaTheme2, PanelProps } from '@grafana/data'; +import { styleMixins, Tooltip, useStyles2 } from '@grafana/ui'; import { AnnoOptions } from './types'; import { AnnotationListItemTags } from './AnnotationListItemTags'; @@ -21,7 +21,7 @@ export const AnnotationListItem: FC = ({ onAvatarClick, onTagClick, }) => { - const styles = useStyles(getStyles); + const styles = useStyles2(getStyles); const { showUser, showTags, showTime } = options; const { text, login, email, avatarUrl, tags, time } = annotation; const onItemClick = (e: MouseEvent) => { @@ -58,7 +58,7 @@ interface AvatarProps { } const Avatar: FC = ({ onClick, avatarUrl, login, email }) => { - const styles = useStyles(getStyles); + const styles = useStyles2(getStyles); const onAvatarClick = (e: MouseEvent) => { e.stopPropagation(); onClick(); @@ -87,7 +87,7 @@ interface TimeStampProps { } const TimeStamp: FC = ({ time, formatDate }) => { - const styles = useStyles(getStyles); + const styles = useStyles2(getStyles); return ( @@ -96,14 +96,14 @@ const TimeStamp: FC = ({ time, formatDate }) => { ); }; -function getStyles(theme: GrafanaTheme) { +function getStyles(theme: GrafanaTheme2) { return { pointer: css` cursor: pointer; `, item: css` - margin: ${theme.spacing.xs}; - padding: ${theme.spacing.sm}; + margin: ${theme.spacing(0.5)}; + padding: ${theme.spacing(1)}; ${styleMixins.listItem(theme)}// display: flex; `, title: css` @@ -113,11 +113,11 @@ function getStyles(theme: GrafanaTheme) { display: flex; .fa { - padding-top: ${theme.spacing.xs}; + padding-top: ${theme.spacing(0.5)}; } .fa-star { - color: ${theme.palette.orange}; + color: ${theme.v1.palette.orange}; } `, login: css` @@ -125,19 +125,19 @@ function getStyles(theme: GrafanaTheme) { flex: auto; display: flex; justify-content: flex-end; - font-size: ${theme.typography.size.sm}; + font-size: ${theme.typography.bodySmall.fontSize}; `, time: css` - margin-left: ${theme.spacing.sm}; - font-size: ${theme.typography.size.sm}; - color: ${theme.colors.textWeak}; + margin-left: ${theme.spacing(1)}; + font-size: ${theme.typography.bodySmall.fontSize}; + color: ${theme.colors.text.secondary}; `, avatar: css` - padding: ${theme.spacing.xs}; + padding: ${theme.spacing(0.5)}; img { border-radius: 50%; - width: ${theme.spacing.md}; - height: ${theme.spacing.md}; + width: ${theme.spacing(2)}; + height: ${theme.spacing(2)}; } `, }; diff --git a/public/app/plugins/panel/dashlist/DashList.tsx b/public/app/plugins/panel/dashlist/DashList.tsx index 9ffc5c0aa80..098df52154b 100644 --- a/public/app/plugins/panel/dashlist/DashList.tsx +++ b/public/app/plugins/panel/dashlist/DashList.tsx @@ -2,7 +2,7 @@ import React, { useEffect, useMemo, useState } from 'react'; import { take } from 'lodash'; import { InterpolateFunction, PanelProps } from '@grafana/data'; -import { CustomScrollbar, Icon, useStyles } from '@grafana/ui'; +import { CustomScrollbar, Icon, useStyles2 } from '@grafana/ui'; import { getBackendSrv } from 'app/core/services/backend_srv'; import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv'; @@ -123,7 +123,7 @@ export function DashList(props: PanelProps) { }, ]; - const css = useStyles(getStyles); + const css = useStyles2(getStyles); return ( {dashboardGroups.map( diff --git a/public/app/plugins/panel/dashlist/styles.ts b/public/app/plugins/panel/dashlist/styles.ts index 95f5e2696d3..8e4af44e766 100644 --- a/public/app/plugins/panel/dashlist/styles.ts +++ b/public/app/plugins/panel/dashlist/styles.ts @@ -1,16 +1,16 @@ import { css } from '@emotion/css'; -import { GrafanaTheme } from '@grafana/data'; -import { styleMixins, stylesFactory } from '@grafana/ui'; +import { GrafanaTheme2 } from '@grafana/data'; +import { styleMixins } from '@grafana/ui'; -export const getStyles = stylesFactory((theme: GrafanaTheme) => ({ +export const getStyles = (theme: GrafanaTheme2) => ({ dashlistSectionHeader: css` - margin-bottom: ${theme.spacing.d}; - color: ${theme.colors.textWeak}; + margin-bottom: ${theme.spacing(2)}; + color: ${theme.colors.secondary.text}; `, dashlistSection: css` - margin-bottom: ${theme.spacing.d}; + margin-bottom: ${theme.spacing(2)}; padding-top: 3px; `, @@ -25,15 +25,15 @@ export const getStyles = stylesFactory((theme: GrafanaTheme) => ({ dashlistStar: css` display: flex; align-items: center; - color: ${theme.colors.textWeak}; + color: ${theme.colors.secondary.text}; cursor: pointer; z-index: 1; `, dashlistFolder: css` - color: ${theme.colors.textWeak}; - font-size: ${theme.typography.size.sm}; - line-height: ${theme.typography.lineHeight.sm}; + color: ${theme.colors.secondary.text}; + font-size: ${theme.typography.bodySmall.fontSize}; + line-height: ${theme.typography.body.lineHeight}; `, dashlistTitle: css` @@ -55,4 +55,4 @@ export const getStyles = stylesFactory((theme: GrafanaTheme) => ({ position: relative; list-style: none; `, -})); +});