diff --git a/packages/grafana-ui/src/components/Table/FilterPopup.tsx b/packages/grafana-ui/src/components/Table/FilterPopup.tsx index 4045839e718..7261e66ee96 100644 --- a/packages/grafana-ui/src/components/Table/FilterPopup.tsx +++ b/packages/grafana-ui/src/components/Table/FilterPopup.tsx @@ -1,10 +1,10 @@ import { css, cx } from '@emotion/css'; import React, { FC, useCallback, useMemo, useState } from 'react'; -import { Field, GrafanaTheme, SelectableValue } from '@grafana/data'; +import { Field, GrafanaTheme2, SelectableValue } from '@grafana/data'; import { Button, ClickOutsideWrapper, HorizontalGroup, IconButton, Label, VerticalGroup } from '..'; -import { stylesFactory, useStyles, useTheme2 } from '../../themes'; +import { useStyles2, useTheme2 } from '../../themes'; import { FilterList } from './FilterList'; import { TableStyles } from './styles'; @@ -46,7 +46,7 @@ export const FilterPopup: FC = ({ column: { preFilteredRows, filterValue, ); const clearFilterVisible = useMemo(() => filterValue !== undefined, [filterValue]); - const styles = useStyles(getStyles); + const styles = useStyles2(getStyles); return ( @@ -90,30 +90,30 @@ export const FilterPopup: FC = ({ column: { preFilteredRows, filterValue, ); }; -const getStyles = stylesFactory((theme: GrafanaTheme) => ({ +const getStyles = (theme: GrafanaTheme2) => ({ filterContainer: css` label: filterContainer; width: 100%; min-width: 250px; height: 100%; max-height: 400px; - background-color: ${theme.colors.bg1}; - border: ${theme.border.width.sm} solid ${theme.colors.border2}; - padding: ${theme.spacing.md}; - margin: ${theme.spacing.sm} 0; - box-shadow: 0px 0px 20px ${theme.colors.dropdownShadow}; - border-radius: ${theme.spacing.xs}; + background-color: ${theme.colors.background.primary}; + border: 1px solid ${theme.colors.border.medium}; + padding: ${theme.spacing(2)}; + margin: ${theme.spacing(1)} 0; + box-shadow: 0px 0px 20px ${theme.v1.palette.black}; + border-radius: ${theme.spacing(0.5)}; `, listDivider: css` label: listDivider; width: 100%; - border-top: ${theme.border.width.sm} solid ${theme.colors.border2}; - padding: ${theme.spacing.xs} ${theme.spacing.md}; + border-top: 1px solid ${theme.colors.border.medium}; + padding: ${theme.spacing(0.5, 2)}; `, label: css` margin-bottom: 0; `, -})); +}); const stopPropagation = (event: React.MouseEvent) => { event.stopPropagation(); diff --git a/packages/grafana-ui/src/components/TableInputCSV/TableInputCSV.tsx b/packages/grafana-ui/src/components/TableInputCSV/TableInputCSV.tsx index eba01366cc2..c66cdd1c524 100644 --- a/packages/grafana-ui/src/components/TableInputCSV/TableInputCSV.tsx +++ b/packages/grafana-ui/src/components/TableInputCSV/TableInputCSV.tsx @@ -2,14 +2,14 @@ import { css } from '@emotion/css'; import { debounce } from 'lodash'; import React, { PureComponent } from 'react'; -import { GrafanaTheme, DataFrame, CSVConfig, readCSV } from '@grafana/data'; +import { DataFrame, CSVConfig, readCSV, GrafanaTheme2 } from '@grafana/data'; -import { stylesFactory, withTheme } from '../../themes'; -import { Themeable } from '../../types/theme'; +import { stylesFactory, withTheme2 } from '../../themes'; +import { Themeable2 } from '../../types/theme'; import { Icon } from '../Icon/Icon'; import { TextArea } from '../TextArea/TextArea'; -interface Props extends Themeable { +interface Props extends Themeable2 { config?: CSVConfig; text: string; width: string | number; @@ -94,10 +94,10 @@ export class UnThemedTableInputCSV extends PureComponent { } } -export const TableInputCSV = withTheme(UnThemedTableInputCSV); +export const TableInputCSV = withTheme2(UnThemedTableInputCSV); TableInputCSV.displayName = 'TableInputCSV'; -const getStyles = stylesFactory((theme: GrafanaTheme) => { +const getStyles = stylesFactory((theme: GrafanaTheme2) => { return { tableInputCsv: css` position: relative; @@ -111,8 +111,8 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => { bottom: 15px; right: 15px; border: 1px solid #222; - background: ${theme.palette.online}; - padding: 1px ${theme.spacing.xs}; + background: ${theme.colors.success.main}; + padding: 1px ${theme.spacing(0.5)}; font-size: 80%; `, }; diff --git a/packages/grafana-ui/src/components/Tags/Tag.tsx b/packages/grafana-ui/src/components/Tags/Tag.tsx index d9a08461184..d4be0de6ad9 100644 --- a/packages/grafana-ui/src/components/Tags/Tag.tsx +++ b/packages/grafana-ui/src/components/Tags/Tag.tsx @@ -1,9 +1,9 @@ import { cx, css } from '@emotion/css'; import React, { forwardRef, HTMLAttributes } from 'react'; -import { GrafanaTheme } from '@grafana/data'; +import { GrafanaTheme2 } from '@grafana/data'; -import { useTheme } from '../../themes'; +import { useTheme2 } from '../../themes'; import { IconName } from '../../types/icon'; import { getTagColor, getTagColorsFromName } from '../../utils'; import { Icon } from '../Icon/Icon'; @@ -23,7 +23,7 @@ export interface Props extends Omit, 'onClick'> { } export const Tag = forwardRef(({ name, onClick, icon, className, colorIndex, ...rest }, ref) => { - const theme = useTheme(); + const theme = useTheme2(); const styles = getTagStyles(theme, name, colorIndex); const onTagClick = (event: React.MouseEvent) => { @@ -50,7 +50,7 @@ export const Tag = forwardRef(({ name, onClick, icon, classN Tag.displayName = 'Tag'; -const getTagStyles = (theme: GrafanaTheme, name: string, colorIndex?: number) => { +const getTagStyles = (theme: GrafanaTheme2, name: string, colorIndex?: number) => { let colors; if (colorIndex === undefined) { colors = getTagColorsFromName(name); @@ -61,16 +61,16 @@ const getTagStyles = (theme: GrafanaTheme, name: string, colorIndex?: number) => wrapper: css` appearance: none; border-style: none; - font-weight: ${theme.typography.weight.semibold}; + font-weight: ${theme.typography.fontWeightMedium}; font-size: ${theme.typography.size.sm}; - line-height: ${theme.typography.lineHeight.xs}; + line-height: ${theme.typography.bodySmall.lineHeight}; vertical-align: baseline; background-color: ${colors.color}; - color: ${theme.palette.gray98}; + color: ${theme.v1.palette.gray98}; white-space: nowrap; text-shadow: none; padding: 3px 6px; - border-radius: ${theme.border.radius.md}; + border-radius: ${theme.shape.borderRadius(2)}; `, hover: css` &:hover { diff --git a/packages/grafana-ui/src/components/Typeahead/TypeaheadInfo.tsx b/packages/grafana-ui/src/components/Typeahead/TypeaheadInfo.tsx index 249fdc6e101..fa8c15bb9fe 100644 --- a/packages/grafana-ui/src/components/Typeahead/TypeaheadInfo.tsx +++ b/packages/grafana-ui/src/components/Typeahead/TypeaheadInfo.tsx @@ -1,28 +1,27 @@ import { css, cx } from '@emotion/css'; import React from 'react'; -import { GrafanaTheme, renderMarkdown } from '@grafana/data'; +import { GrafanaTheme2, renderMarkdown } from '@grafana/data'; -import { useTheme } from '../../themes/ThemeContext'; +import { useTheme2 } from '../../themes/ThemeContext'; import { CompletionItem } from '../../types'; -const getStyles = (theme: GrafanaTheme, height: number, visible: boolean) => { +const getStyles = (theme: GrafanaTheme2, height: number, visible: boolean) => { return { typeaheadItem: css` label: type-ahead-item; z-index: 11; - padding: ${theme.spacing.sm} ${theme.spacing.sm} ${theme.spacing.sm} ${theme.spacing.md}; - border-radius: ${theme.border.radius.md}; - border: ${theme.colors.border2}; + padding: ${theme.spacing(1, 1, 1, 2)}; + border: ${theme.colors.border.medium}; overflow-y: scroll; overflow-x: hidden; outline: none; - background: ${theme.colors.bg2}; + background: ${theme.colors.background.secondary}; color: ${theme.colors.text}; - box-shadow: 0 0 20px ${theme.colors.dropdownShadow}; + box-shadow: 0 0 20px ${theme.v1.colors.dropdownShadow}; visibility: ${visible === true ? 'visible' : 'hidden'}; width: 250px; - min-height: ${height + parseInt(theme.spacing.xxs, 10)}px; + min-height: ${height + parseInt(theme.spacing(0.25), 10)}px; position: relative; word-break: break-word; `, @@ -38,7 +37,7 @@ export const TypeaheadInfo = ({ item, height }: Props) => { const visible = item && !!item.documentation; const label = item ? item.label : ''; const documentation = renderMarkdown(item?.documentation); - const theme = useTheme(); + const theme = useTheme2(); const styles = getStyles(theme, height, visible); return ( diff --git a/packages/grafana-ui/src/components/Typeahead/TypeaheadItem.tsx b/packages/grafana-ui/src/components/Typeahead/TypeaheadItem.tsx index 30c0e7c59bd..faafa1dcad3 100644 --- a/packages/grafana-ui/src/components/Typeahead/TypeaheadItem.tsx +++ b/packages/grafana-ui/src/components/Typeahead/TypeaheadItem.tsx @@ -2,9 +2,9 @@ import { css, cx } from '@emotion/css'; import React from 'react'; import Highlighter from 'react-highlight-words'; -import { GrafanaTheme } from '@grafana/data'; +import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles } from '../../themes/ThemeContext'; +import { useStyles2 } from '../../themes/ThemeContext'; import { CompletionItem, CompletionItemKind } from '../../types/completion'; import { PartialHighlighter } from './PartialHighlighter'; @@ -20,13 +20,13 @@ interface Props { onMouseLeave?: () => void; } -const getStyles = (theme: GrafanaTheme) => ({ +const getStyles = (theme: GrafanaTheme2) => ({ typeaheadItem: css` label: type-ahead-item; height: auto; - font-family: ${theme.typography.fontFamily.monospace}; - padding: ${theme.spacing.sm} ${theme.spacing.sm} ${theme.spacing.sm} ${theme.spacing.md}; - font-size: ${theme.typography.size.sm}; + font-family: ${theme.typography.fontFamilyMonospace}; + padding: ${theme.spacing(1, 1, 1, 2)}; + font-size: ${theme.typography.bodySmall.fontSize}; text-overflow: ellipsis; overflow: hidden; z-index: 11; @@ -39,28 +39,28 @@ const getStyles = (theme: GrafanaTheme) => ({ typeaheadItemSelected: css` label: type-ahead-item-selected; - background-color: ${theme.colors.bg2}; + background-color: ${theme.colors.background.secondary}; `, typeaheadItemMatch: css` label: type-ahead-item-match; - color: ${theme.palette.yellow}; - border-bottom: 1px solid ${theme.palette.yellow}; + color: ${theme.v1.palette.yellow}; + border-bottom: 1px solid ${theme.v1.palette.yellow}; padding: inherit; background: inherit; `, typeaheadItemGroupTitle: css` label: type-ahead-item-group-title; - color: ${theme.colors.textWeak}; - font-size: ${theme.typography.size.sm}; - line-height: ${theme.typography.lineHeight.md}; - padding: ${theme.spacing.sm}; + color: ${theme.colors.text.secondary}; + font-size: ${theme.typography.bodySmall.fontSize}; + line-height: ${theme.typography.body.lineHeight}; + padding: ${theme.spacing(1)}; `, }); export const TypeaheadItem = (props: Props) => { - const styles = useStyles(getStyles); + const styles = useStyles2(getStyles); const { isSelected, item, prefix, style, onMouseEnter, onMouseLeave, onClickItem } = props; const className = isSelected ? cx([styles.typeaheadItem, styles.typeaheadItemSelected]) : cx([styles.typeaheadItem]); diff --git a/packages/grafana-ui/src/components/VizLegend/VizLegendList.tsx b/packages/grafana-ui/src/components/VizLegend/VizLegendList.tsx index d0ca8d96597..c2a14364908 100644 --- a/packages/grafana-ui/src/components/VizLegend/VizLegendList.tsx +++ b/packages/grafana-ui/src/components/VizLegend/VizLegendList.tsx @@ -1,9 +1,9 @@ import { css, cx } from '@emotion/css'; import React from 'react'; -import { GrafanaTheme } from '@grafana/data'; +import { GrafanaTheme2 } from '@grafana/data'; -import { useStyles } from '../../themes'; +import { useStyles2 } from '../../themes'; import { InlineList } from '../List/InlineList'; import { List } from '../List/List'; @@ -25,7 +25,7 @@ export const VizLegendList = ({ className, readonly, }: Props) => { - const styles = useStyles(getStyles); + const styles = useStyles2(getStyles); if (!itemRenderer) { /* eslint-disable-next-line react/display-name */ @@ -84,11 +84,11 @@ export const VizLegendList = ({ VizLegendList.displayName = 'VizLegendList'; -const getStyles = (theme: GrafanaTheme) => { +const getStyles = (theme: GrafanaTheme2) => { const itemStyles = css` padding-right: 10px; display: flex; - font-size: ${theme.typography.size.sm}; + font-size: ${theme.typography.bodySmall.fontSize}; white-space: nowrap; `; @@ -97,18 +97,18 @@ const getStyles = (theme: GrafanaTheme) => { itemRight: cx( itemStyles, css` - margin-bottom: ${theme.spacing.xs}; + margin-bottom: ${theme.spacing(0.5)}; ` ), rightWrapper: css` - padding-left: ${theme.spacing.sm}; + padding-left: ${theme.spacing(0.5)}; `, bottomWrapper: css` display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; - padding-left: ${theme.spacing.md}; + padding-left: ${theme.spacing(0.5)}; `, section: css` display: flex; diff --git a/packages/grafana-ui/src/components/VizLegend/VizLegendListItem.tsx b/packages/grafana-ui/src/components/VizLegend/VizLegendListItem.tsx index 01ad17d39c8..6358ead51a2 100644 --- a/packages/grafana-ui/src/components/VizLegend/VizLegendListItem.tsx +++ b/packages/grafana-ui/src/components/VizLegend/VizLegendListItem.tsx @@ -1,10 +1,10 @@ import { css, cx } from '@emotion/css'; import React, { useCallback } from 'react'; -import { GrafanaTheme } from '@grafana/data'; +import { GrafanaTheme2 } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; -import { useStyles } from '../../themes'; +import { useStyles2 } from '../../themes'; import { VizLegendSeriesIcon } from './VizLegendSeriesIcon'; import { VizLegendStatsList } from './VizLegendStatsList'; @@ -30,7 +30,7 @@ export const VizLegendListItem = ({ className, readonly, }: Props) => { - const styles = useStyles(getStyles); + const styles = useStyles2(getStyles); const onMouseEnter = useCallback( (event: React.MouseEvent) => { @@ -81,7 +81,7 @@ export const VizLegendListItem = ({ VizLegendListItem.displayName = 'VizLegendListItem'; -const getStyles = (theme: GrafanaTheme) => ({ +const getStyles = (theme: GrafanaTheme2) => ({ label: css` label: LegendLabel; white-space: nowrap; @@ -92,7 +92,7 @@ const getStyles = (theme: GrafanaTheme) => ({ `, itemDisabled: css` label: LegendLabelDisabled; - color: ${theme.colors.linkDisabled}; + color: ${theme.colors.text.disabled}; `, itemWrapper: css` label: LegendItemWrapper; @@ -105,6 +105,6 @@ const getStyles = (theme: GrafanaTheme) => ({ text-align: right; `, yAxisLabel: css` - color: ${theme.palette.gray2}; + color: ${theme.v1.palette.gray2}; `, }); diff --git a/packages/jaeger-ui-components/src/settings/SpanBarSettings.tsx b/packages/jaeger-ui-components/src/settings/SpanBarSettings.tsx index 1de0c0e006d..b700042eacd 100644 --- a/packages/jaeger-ui-components/src/settings/SpanBarSettings.tsx +++ b/packages/jaeger-ui-components/src/settings/SpanBarSettings.tsx @@ -4,11 +4,11 @@ import React from 'react'; import { DataSourceJsonData, DataSourcePluginOptionsEditorProps, - GrafanaTheme, + GrafanaTheme2, toOption, updateDatasourcePluginJsonDataOption, } from '@grafana/data'; -import { InlineField, InlineFieldRow, Input, Select, useStyles } from '@grafana/ui'; +import { InlineField, InlineFieldRow, Input, Select, useStyles2 } from '@grafana/ui'; export interface SpanBarOptions { type?: string; @@ -26,7 +26,7 @@ export const TAG = 'Tag'; interface Props extends DataSourcePluginOptionsEditorProps {} export default function SpanBarSettings({ options, onOptionsChange }: Props) { - const styles = useStyles(getStyles); + const styles = useStyles2(getStyles); const selectOptions = [NONE, DURATION, TAG].map(toOption); return ( @@ -76,11 +76,11 @@ export default function SpanBarSettings({ options, onOptionsChange }: Props) { ); } -const getStyles = (theme: GrafanaTheme) => ({ +const getStyles = (theme: GrafanaTheme2) => ({ infoText: css` label: infoText; - padding-bottom: ${theme.spacing.md}; - color: ${theme.colors.textSemiWeak}; + padding-bottom: ${theme.spacing(2)}; + color: ${theme.colors.text.secondary}; `, row: css` diff --git a/public/app/core/components/ForgottenPassword/ForgottenPassword.tsx b/public/app/core/components/ForgottenPassword/ForgottenPassword.tsx index 00d0c51e1ec..90e02383fcb 100644 --- a/public/app/core/components/ForgottenPassword/ForgottenPassword.tsx +++ b/public/app/core/components/ForgottenPassword/ForgottenPassword.tsx @@ -1,26 +1,26 @@ import { css } from '@emotion/css'; import React, { useState } from 'react'; -import { GrafanaTheme } from '@grafana/data'; +import { GrafanaTheme2 } from '@grafana/data'; import { getBackendSrv } from '@grafana/runtime'; -import { Form, Field, Input, Button, Legend, Container, useStyles, HorizontalGroup, LinkButton } from '@grafana/ui'; +import { Form, Field, Input, Button, Legend, Container, useStyles2, HorizontalGroup, LinkButton } from '@grafana/ui'; import config from 'app/core/config'; interface EmailDTO { userOrEmail: string; } -const paragraphStyles = (theme: GrafanaTheme) => css` - color: ${theme.colors.formDescription}; - font-size: ${theme.typography.size.sm}; - font-weight: ${theme.typography.weight.regular}; - margin-top: ${theme.spacing.sm}; +const paragraphStyles = (theme: GrafanaTheme2) => css` + color: ${theme.colors.text.secondary}; + font-size: ${theme.typography.bodySmall.fontSize}; + font-weight: ${theme.typography.fontWeightRegular}; + margin-top: ${theme.spacing(1)}; display: block; `; export const ForgottenPassword = () => { const [emailSent, setEmailSent] = useState(false); - const styles = useStyles(paragraphStyles); + const styles = useStyles2(paragraphStyles); const loginHref = `${config.appSubUrl}/login`; const sendEmail = async (formModel: EmailDTO) => { diff --git a/public/app/core/components/Layers/LayerDragDropList.tsx b/public/app/core/components/Layers/LayerDragDropList.tsx index 009fd6e065a..753b8092df6 100644 --- a/public/app/core/components/Layers/LayerDragDropList.tsx +++ b/public/app/core/components/Layers/LayerDragDropList.tsx @@ -2,9 +2,8 @@ import { css, cx } from '@emotion/css'; import React from 'react'; import { DragDropContext, Draggable, Droppable, DropResult } from 'react-beautiful-dnd'; -import { GrafanaTheme } from '@grafana/data'; -import { config } from '@grafana/runtime'; -import { Icon, IconButton, stylesFactory } from '@grafana/ui'; +import { GrafanaTheme2 } from '@grafana/data'; +import { Icon, IconButton, useStyles2 } from '@grafana/ui'; import { LayerName } from './LayerName'; import { LayerElement } from './types'; @@ -38,7 +37,7 @@ export const LayerDragDropList = ({ onNameChange, verifyLayerNameUniqueness, }: LayerDragDropListProps) => { - const style = styles(config.theme); + const style = useStyles2(getStyles); const getRowStyle = (isSelected: boolean) => { return isSelected ? `${style.row} ${style.sel}` : style.row; @@ -127,43 +126,43 @@ LayerDragDropList.defaultProps = { isGroup: () => false, }; -const styles = stylesFactory((theme: GrafanaTheme) => ({ +const getStyles = (theme: GrafanaTheme2) => ({ wrapper: css` - margin-bottom: ${theme.spacing.md}; + margin-bottom: ${theme.spacing(2)}; `, 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; align-items: center; justify-content: space-between; margin-bottom: 3px; cursor: pointer; - border: 1px solid ${theme.colors.formInputBorder}; + border: 1px solid ${theme.components.input.borderColor}; &:hover { - border: 1px solid ${theme.colors.formInputBorderHover}; + border: 1px solid ${theme.components.input.borderHover}; } `, sel: css` - border: 1px solid ${theme.colors.formInputBorderActive}; + border: 1px solid ${theme.colors.primary.border}; &:hover { - border: 1px solid ${theme.colors.formInputBorderActive}; + border: 1px solid ${theme.colors.primary.border}; } `, dragIcon: css` cursor: drag; `, actionIcon: css` - color: ${theme.colors.textWeak}; + color: ${theme.colors.text.secondary}; &:hover { color: ${theme.colors.text}; } `, typeWrapper: css` - color: ${theme.colors.textBlue}; + color: ${theme.colors.primary.text}; margin-right: 5px; `, textWrapper: css` @@ -171,6 +170,6 @@ const styles = stylesFactory((theme: GrafanaTheme) => ({ align-items: center; flex-grow: 1; overflow: hidden; - margin-right: ${theme.spacing.sm}; + margin-right: ${theme.spacing(1)}; `, -})); +}); diff --git a/public/app/core/components/Layers/LayerName.tsx b/public/app/core/components/Layers/LayerName.tsx index c07adc15805..660fc295636 100644 --- a/public/app/core/components/Layers/LayerName.tsx +++ b/public/app/core/components/Layers/LayerName.tsx @@ -1,8 +1,8 @@ import { css, cx } from '@emotion/css'; import React, { useState } from 'react'; -import { GrafanaTheme } from '@grafana/data'; -import { Icon, Input, FieldValidationMessage, useStyles } from '@grafana/ui'; +import { GrafanaTheme2 } from '@grafana/data'; +import { Icon, Input, FieldValidationMessage, useStyles2 } from '@grafana/ui'; export interface LayerNameProps { name: string; @@ -11,7 +11,7 @@ export interface LayerNameProps { } export const LayerName = ({ name, onChange, verifyLayerNameUniqueness }: LayerNameProps) => { - const styles = useStyles(getStyles); + const styles = useStyles2(getStyles); const [isEditing, setIsEditing] = useState(false); const [validationError, setValidationError] = useState(null); @@ -102,31 +102,31 @@ export const LayerName = ({ name, onChange, verifyLayerNameUniqueness }: LayerNa ); }; -const getStyles = (theme: GrafanaTheme) => { +const getStyles = (theme: GrafanaTheme2) => { return { wrapper: css` label: Wrapper; display: flex; align-items: center; - margin-left: ${theme.spacing.xs}; + margin-left: ${theme.spacing(0.5)}; `, layerNameWrapper: css` display: flex; cursor: pointer; border: 1px solid transparent; - border-radius: ${theme.border.radius.md}; + border-radius: ${theme.shape.borderRadius(2)}; align-items: center; - padding: 0 0 0 ${theme.spacing.xs}; + padding: 0 0 0 ${theme.spacing(0.5)}; margin: 0; background: transparent; &:hover { - background: ${theme.colors.bg3}; - border: 1px dashed ${theme.colors.border3}; + background: ${theme.colors.action.hover}; + border: 1px dashed ${theme.colors.border.strong}; } &:focus { - border: 2px solid ${theme.colors.formInputBorderActive}; + border: 2px solid ${theme.colors.primary.border}; } &:hover, @@ -137,15 +137,15 @@ const getStyles = (theme: GrafanaTheme) => { } `, layerName: css` - font-weight: ${theme.typography.weight.semibold}; - color: ${theme.colors.textBlue}; + font-weight: ${theme.typography.fontWeightMedium}; + color: ${theme.colors.primary.text}; cursor: pointer; overflow: hidden; - margin-left: ${theme.spacing.xs}; + margin-left: ${theme.spacing(0.5)}; `, layerEditIcon: cx( css` - margin-left: ${theme.spacing.md}; + margin-left: ${theme.spacing(2)}; visibility: hidden; `, 'query-name-edit-icon' diff --git a/public/app/core/components/Login/LoginServiceButtons.tsx b/public/app/core/components/Login/LoginServiceButtons.tsx index 29b5392a337..65f08bf58cd 100644 --- a/public/app/core/components/Login/LoginServiceButtons.tsx +++ b/public/app/core/components/Login/LoginServiceButtons.tsx @@ -2,8 +2,8 @@ import { css, cx } from '@emotion/css'; import { pickBy } from 'lodash'; import React from 'react'; -import { GrafanaTheme, GrafanaTheme2, DEFAULT_SAML_NAME } from '@grafana/data'; -import { Icon, IconName, LinkButton, useStyles, useTheme2, VerticalGroup } from '@grafana/ui'; +import { GrafanaTheme2, DEFAULT_SAML_NAME } from '@grafana/data'; +import { Icon, IconName, LinkButton, useStyles2, useTheme2, VerticalGroup } from '@grafana/ui'; import config from 'app/core/config'; export interface LoginService { @@ -75,7 +75,7 @@ const loginServices: () => LoginServices = () => { }; }; -const getServiceStyles = (theme: GrafanaTheme) => { +const getServiceStyles = (theme: GrafanaTheme2) => { return { button: css` color: #d8d9da; @@ -83,7 +83,7 @@ const getServiceStyles = (theme: GrafanaTheme) => { `, buttonIcon: css` position: absolute; - left: ${theme.spacing.sm}; + left: ${theme.spacing(1)}; top: 50%; transform: translateY(-50%); `, @@ -91,7 +91,7 @@ const getServiceStyles = (theme: GrafanaTheme) => { base: css` color: ${theme.colors.text}; display: flex; - margin-bottom: ${theme.spacing.sm}; + margin-bottom: ${theme.spacing(1)}; justify-content: space-between; text-align: center; width: 100%; @@ -106,7 +106,7 @@ const getServiceStyles = (theme: GrafanaTheme) => { }; const LoginDivider = () => { - const styles = useStyles(getServiceStyles); + const styles = useStyles2(getServiceStyles); return ( <>
@@ -144,7 +144,7 @@ export const LoginServiceButtons = () => { const enabledServices = pickBy(loginServices(), (service) => service.enabled); const hasServices = Object.keys(enabledServices).length > 0; const theme = useTheme2(); - const styles = useStyles(getServiceStyles); + const styles = useStyles2(getServiceStyles); if (hasServices) { return ( diff --git a/public/app/core/components/NodeGraphSettings.tsx b/public/app/core/components/NodeGraphSettings.tsx index 6f305d4d7c3..d6cf3c07c7e 100644 --- a/public/app/core/components/NodeGraphSettings.tsx +++ b/public/app/core/components/NodeGraphSettings.tsx @@ -4,10 +4,9 @@ import React from 'react'; import { DataSourceJsonData, DataSourcePluginOptionsEditorProps, - GrafanaTheme, updateDatasourcePluginJsonDataOption, } from '@grafana/data'; -import { InlineField, InlineFieldRow, InlineSwitch, useStyles } from '@grafana/ui'; +import { InlineField, InlineFieldRow, InlineSwitch } from '@grafana/ui'; export interface NodeGraphOptions { enabled?: boolean; @@ -20,8 +19,6 @@ export interface NodeGraphData extends DataSourceJsonData { interface Props extends DataSourcePluginOptionsEditorProps {} export function NodeGraphSettings({ options, onOptionsChange }: Props) { - const styles = useStyles(getStyles); - return (

Node Graph

@@ -47,7 +44,7 @@ export function NodeGraphSettings({ options, onOptionsChange }: Props) { ); } -const getStyles = (theme: GrafanaTheme) => ({ +const styles = { container: css` label: container; width: 100%; @@ -56,4 +53,4 @@ const getStyles = (theme: GrafanaTheme) => ({ label: row; align-items: baseline; `, -}); +}; diff --git a/public/app/core/components/PermissionList/AddPermission.tsx b/public/app/core/components/PermissionList/AddPermission.tsx index c629fcb6bd0..3620fe61443 100644 --- a/public/app/core/components/PermissionList/AddPermission.tsx +++ b/public/app/core/components/PermissionList/AddPermission.tsx @@ -1,7 +1,7 @@ import { css } from '@emotion/css'; import React, { Component } from 'react'; -import { GrafanaTheme, SelectableValue } from '@grafana/data'; +import { GrafanaTheme2, SelectableValue } from '@grafana/data'; import { Button, Form, HorizontalGroup, Select, stylesFactory } from '@grafana/ui'; import { TeamPicker } from 'app/core/components/Select/TeamPicker'; import { UserPicker } from 'app/core/components/Select/UserPicker'; @@ -92,7 +92,7 @@ class AddPermissions extends Component { const newItem = this.state; const pickerClassName = 'min-width-20'; const isValid = this.isValid(); - const styles = getStyles(config.theme); + const styles = getStyles(config.theme2); return (
@@ -138,9 +138,9 @@ class AddPermissions extends Component { } } -const getStyles = stylesFactory((theme: GrafanaTheme) => ({ +const getStyles = stylesFactory((theme: GrafanaTheme2) => ({ label: css` - color: ${theme.colors.textBlue}; + color: ${theme.colors.primary.text}; font-weight: bold; `, })); diff --git a/public/app/core/components/QueryOperationRow/QueryOperationRow.tsx b/public/app/core/components/QueryOperationRow/QueryOperationRow.tsx index 30948ba58fd..8b901100558 100644 --- a/public/app/core/components/QueryOperationRow/QueryOperationRow.tsx +++ b/public/app/core/components/QueryOperationRow/QueryOperationRow.tsx @@ -3,9 +3,9 @@ import React, { useCallback, useState } from 'react'; import { Draggable } from 'react-beautiful-dnd'; import { useUpdateEffect } from 'react-use'; -import { GrafanaTheme } from '@grafana/data'; +import { GrafanaTheme2 } from '@grafana/data'; import { reportInteraction } from '@grafana/runtime'; -import { ReactUtils, stylesFactory, useTheme } from '@grafana/ui'; +import { ReactUtils, useStyles2 } from '@grafana/ui'; import { QueryOperationRowHeader } from './QueryOperationRowHeader'; @@ -45,8 +45,7 @@ export function QueryOperationRow({ id, }: QueryOperationRowProps) { const [isContentVisible, setIsContentVisible] = useState(isOpen !== undefined ? isOpen : true); - const theme = useTheme(); - const styles = getQueryOperationRowStyles(theme); + const styles = useStyles2(getQueryOperationRowStyles); const onRowToggle = useCallback(() => { setIsContentVisible(!isContentVisible); }, [isContentVisible, setIsContentVisible]); @@ -143,16 +142,16 @@ export function QueryOperationRow({ ); } -const getQueryOperationRowStyles = stylesFactory((theme: GrafanaTheme) => { +const getQueryOperationRowStyles = (theme: GrafanaTheme2) => { return { wrapper: css` - margin-bottom: ${theme.spacing.md}; + margin-bottom: ${theme.spacing(2)}; `, content: css` - margin-top: ${theme.spacing.inlineFormMargin}; - margin-left: ${theme.spacing.lg}; + margin-top: ${theme.spacing(0.5)}; + margin-left: ${theme.spacing(3)}; `, }; -}); +}; QueryOperationRow.displayName = 'QueryOperationRow'; diff --git a/public/app/core/components/SplitPaneWrapper/SplitPaneWrapper.tsx b/public/app/core/components/SplitPaneWrapper/SplitPaneWrapper.tsx index 8b06c108c50..7724b1cbaf2 100644 --- a/public/app/core/components/SplitPaneWrapper/SplitPaneWrapper.tsx +++ b/public/app/core/components/SplitPaneWrapper/SplitPaneWrapper.tsx @@ -2,8 +2,7 @@ import { css, cx } from '@emotion/css'; import React, { createRef, MutableRefObject, PureComponent, ReactNode } from 'react'; import SplitPane from 'react-split-pane'; -import { GrafanaTheme } from '@grafana/data'; -import { stylesFactory } from '@grafana/ui'; +import { GrafanaTheme2 } from '@grafana/data'; import { config } from 'app/core/config'; enum Pane { @@ -68,7 +67,7 @@ export class SplitPaneWrapper extends PureComponent { renderHorizontalSplit() { const { leftPaneComponents, uiState } = this.props; - const styles = getStyles(config.theme); + const styles = getStyles(config.theme2); const topPaneSize = uiState.topPaneSize >= 1 ? uiState.topPaneSize : uiState.topPaneSize * window.innerHeight; /* @@ -100,7 +99,7 @@ export class SplitPaneWrapper extends PureComponent { render() { const { rightPaneVisible, rightPaneComponents, uiState } = this.props; // Limit options pane width to 90% of screen. - const styles = getStyles(config.theme); + const styles = getStyles(config.theme2); // Need to handle when width is relative. ie a percentage of the viewport const rightPaneSize = @@ -127,9 +126,9 @@ export class SplitPaneWrapper extends PureComponent { } } -const getStyles = stylesFactory((theme: GrafanaTheme) => { - const handleColor = theme.palette.blue95; - const paneSpacing = theme.spacing.md; +const getStyles = (theme: GrafanaTheme2) => { + const handleColor = theme.v1.palette.blue95; + const paneSpacing = theme.spacing(2); const resizer = css` position: relative; @@ -141,7 +140,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => { } &::after { - background: ${theme.colors.panelBorder}; + background: ${theme.components.panel.borderColor}; content: ''; position: absolute; left: 50%; @@ -209,4 +208,4 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => { ` ), }; -}); +}; diff --git a/public/app/core/components/TagFilter/TagOption.tsx b/public/app/core/components/TagFilter/TagOption.tsx index 4227a4b16b1..a6b52ebe06b 100644 --- a/public/app/core/components/TagFilter/TagOption.tsx +++ b/public/app/core/components/TagFilter/TagOption.tsx @@ -2,8 +2,8 @@ import { css, cx } from '@emotion/css'; import React, { FC } from 'react'; import { OptionProps } from 'react-select'; -import { GrafanaTheme } from '@grafana/data'; -import { useTheme, stylesFactory } from '@grafana/ui'; +import { GrafanaTheme2 } from '@grafana/data'; +import { useStyles2 } from '@grafana/ui'; import { TagBadge } from './TagBadge'; @@ -13,8 +13,7 @@ interface ExtendedOptionProps extends OptionProps { } export const TagOption: FC = ({ data, className, label, isFocused, innerProps }) => { - const theme = useTheme(); - const styles = getStyles(theme); + const styles = useStyles2(getStyles); return (
@@ -25,7 +24,7 @@ export const TagOption: FC = ({ data, className, label, isF ); }; -const getStyles = stylesFactory((theme: GrafanaTheme) => { +const getStyles = (theme: GrafanaTheme2) => { return { option: css` padding: 8px; @@ -33,11 +32,11 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => { cursor: pointer; border-left: 2px solid transparent; &:hover { - background: ${theme.colors.dropdownOptionHoverBg}; + background: ${theme.colors.background.secondary}; } `, optionFocused: css` - background: ${theme.colors.dropdownOptionHoverBg}; + background: ${theme.colors.background.secondary}; border-style: solid; border-top: 0; border-right: 0; @@ -45,4 +44,4 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => { border-left-width: 2px; `, }; -}); +}; diff --git a/public/app/core/components/TraceToLogs/KeyValueInput.tsx b/public/app/core/components/TraceToLogs/KeyValueInput.tsx index 7d648c10293..bc30d96ea5e 100644 --- a/public/app/core/components/TraceToLogs/KeyValueInput.tsx +++ b/public/app/core/components/TraceToLogs/KeyValueInput.tsx @@ -1,8 +1,8 @@ import { css } from '@emotion/css'; import React from 'react'; -import { GrafanaTheme, KeyValue } from '@grafana/data'; -import { SegmentInput, useStyles, InlineLabel, Icon } from '@grafana/ui'; +import { GrafanaTheme2, KeyValue } from '@grafana/data'; +import { SegmentInput, useStyles2, InlineLabel, Icon } from '@grafana/ui'; const EQ_WIDTH = 3; // = 24px in inline label @@ -21,7 +21,7 @@ const KeyValueInput = ({ keyPlaceholder = 'Key', valuePlaceholder = 'Value (optional)', }: Props) => { - const styles = useStyles(getStyles); + const styles = useStyles2(getStyles); return (
@@ -97,11 +97,11 @@ const KeyValueInput = ({ export default KeyValueInput; -const getStyles = (theme: GrafanaTheme) => ({ +const getStyles = (theme: GrafanaTheme2) => ({ wrapper: css` display: flex; flex-direction: column; - gap: ${theme.spacing.xs} 0; + gap: ${theme.spacing(0.5)} 0; `, pair: css` display: flex; @@ -109,6 +109,6 @@ const getStyles = (theme: GrafanaTheme) => ({ align-items: center; `, operator: css` - color: ${theme.palette.orange}; + color: ${theme.v1.palette.orange}; `, }); diff --git a/public/app/core/components/TraceToLogs/TraceToLogsSettings.tsx b/public/app/core/components/TraceToLogs/TraceToLogsSettings.tsx index 0dd4f62c50a..5085be0b43a 100644 --- a/public/app/core/components/TraceToLogs/TraceToLogsSettings.tsx +++ b/public/app/core/components/TraceToLogs/TraceToLogsSettings.tsx @@ -5,12 +5,12 @@ import { DataSourceJsonData, DataSourceInstanceSettings, DataSourcePluginOptionsEditorProps, - GrafanaTheme, + GrafanaTheme2, KeyValue, updateDatasourcePluginJsonDataOption, } from '@grafana/data'; import { DataSourcePicker } from '@grafana/runtime'; -import { InlineField, InlineFieldRow, Input, TagsInput, useStyles, InlineSwitch } from '@grafana/ui'; +import { InlineField, InlineFieldRow, Input, TagsInput, useStyles2, InlineSwitch } from '@grafana/ui'; import KeyValueInput from './KeyValueInput'; @@ -33,7 +33,7 @@ export interface TraceToLogsData extends DataSourceJsonData { interface Props extends DataSourcePluginOptionsEditorProps {} export function TraceToLogsSettings({ options, onOptionsChange }: Props) { - const styles = useStyles(getStyles); + const styles = useStyles2(getStyles); return (
@@ -216,9 +216,9 @@ export function TraceToLogsSettings({ options, onOptionsChange }: Props) { ); } -const getStyles = (theme: GrafanaTheme) => ({ +const getStyles = (theme: GrafanaTheme2) => ({ infoText: css` - padding-bottom: ${theme.spacing.md}; - color: ${theme.colors.textSemiWeak}; + padding-bottom: ${theme.spacing(2)}; + color: ${theme.colors.text.secondary}; `, }); diff --git a/public/app/core/components/TraceToMetrics/TraceToMetricsSettings.tsx b/public/app/core/components/TraceToMetrics/TraceToMetricsSettings.tsx index 598f69bb8f6..f51c90469d4 100644 --- a/public/app/core/components/TraceToMetrics/TraceToMetricsSettings.tsx +++ b/public/app/core/components/TraceToMetrics/TraceToMetricsSettings.tsx @@ -4,12 +4,12 @@ import React from 'react'; import { DataSourceJsonData, DataSourcePluginOptionsEditorProps, - GrafanaTheme, + GrafanaTheme2, KeyValue, updateDatasourcePluginJsonDataOption, } from '@grafana/data'; import { DataSourcePicker } from '@grafana/runtime'; -import { Button, InlineField, InlineFieldRow, Input, useStyles } from '@grafana/ui'; +import { Button, InlineField, InlineFieldRow, Input, useStyles2 } from '@grafana/ui'; import KeyValueInput from '../TraceToLogs/KeyValueInput'; @@ -33,7 +33,7 @@ export interface TraceToMetricsData extends DataSourceJsonData { interface Props extends DataSourcePluginOptionsEditorProps {} export function TraceToMetricsSettings({ options, onOptionsChange }: Props) { - const styles = useStyles(getStyles); + const styles = useStyles2(getStyles); return (
@@ -211,10 +211,10 @@ export function TraceToMetricsSettings({ options, onOptionsChange }: Props) { ); } -const getStyles = (theme: GrafanaTheme) => ({ +const getStyles = (theme: GrafanaTheme2) => ({ infoText: css` - padding-bottom: ${theme.spacing.md}; - color: ${theme.colors.textSemiWeak}; + padding-bottom: ${theme.spacing(2)}; + color: ${theme.colors.text.secondary}; `, row: css` label: row; diff --git a/public/app/features/admin/LicenseChrome.tsx b/public/app/features/admin/LicenseChrome.tsx index dd4f38ae6d0..e46d77dce48 100644 --- a/public/app/features/admin/LicenseChrome.tsx +++ b/public/app/features/admin/LicenseChrome.tsx @@ -1,19 +1,19 @@ import { css } from '@emotion/css'; import React from 'react'; -import { GrafanaTheme } from '@grafana/data'; -import { stylesFactory, useTheme } from '@grafana/ui'; +import { GrafanaTheme2 } from '@grafana/data'; +import { useStyles2 } from '@grafana/ui'; const title = { fontWeight: 500, fontSize: '26px', lineHeight: '123%' }; -const getStyles = stylesFactory((theme: GrafanaTheme) => { +const getStyles = (theme: GrafanaTheme2) => { const backgroundUrl = theme.isDark ? 'public/img/licensing/header_dark.svg' : 'public/img/licensing/header_light.svg'; - const footerBg = theme.isDark ? theme.palette.dark9 : theme.palette.gray6; + const footerBg = theme.isDark ? theme.v1.palette.dark9 : theme.v1.palette.gray6; return { container: css` padding: 36px 79px; - background: ${theme.colors.panelBg}; + background: ${theme.components.panel.background}; `, footer: css` text-align: center; @@ -27,7 +27,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => { background: url('${backgroundUrl}') right; `, }; -}); +}; interface Props { header: string; @@ -37,8 +37,7 @@ interface Props { } export function LicenseChrome({ header, editionNotice, subheader, children }: Props) { - const theme = useTheme(); - const styles = getStyles(theme); + const styles = useStyles2(getStyles); return ( <> diff --git a/public/app/features/admin/UserOrgs.tsx b/public/app/features/admin/UserOrgs.tsx index b86799fbe01..260ab2dcb72 100644 --- a/public/app/features/admin/UserOrgs.tsx +++ b/public/app/features/admin/UserOrgs.tsx @@ -1,7 +1,7 @@ import { css, cx } from '@emotion/css'; import React, { PureComponent, ReactElement } from 'react'; -import { GrafanaTheme, GrafanaTheme2 } from '@grafana/data'; +import { GrafanaTheme2 } from '@grafana/data'; import { Button, ConfirmButton, @@ -10,11 +10,10 @@ import { Icon, Modal, stylesFactory, - Themeable, + Themeable2, Tooltip, useStyles2, - useTheme, - withTheme, + withTheme2, } from '@grafana/ui'; import { UserRolePicker } from 'app/core/components/RolePicker/UserRolePicker'; import { fetchRoleOptions, updateUserRoles } from 'app/core/components/RolePicker/api'; @@ -102,12 +101,12 @@ export class UserOrgs extends PureComponent { } } -const getOrgRowStyles = stylesFactory((theme: GrafanaTheme) => { +const getOrgRowStyles = stylesFactory((theme: GrafanaTheme2) => { return { removeButton: css` margin-right: 0.6rem; text-decoration: underline; - color: ${theme.palette.blue95}; + color: ${theme.v1.palette.blue95}; `, label: css` font-weight: 500; @@ -119,19 +118,19 @@ const getOrgRowStyles = stylesFactory((theme: GrafanaTheme) => { margin-left: 5px; `, tooltipItemLink: css` - color: ${theme.palette.blue95}; + color: ${theme.v1.palette.blue95}; `, rolePickerWrapper: css` display: flex; `, rolePicker: css` flex: auto; - margin-right: ${theme.spacing.sm}; + margin-right: ${theme.spacing(1)}; `, }; }); -interface OrgRowProps extends Themeable { +interface OrgRowProps extends Themeable2 { user?: UserDTO; org: UserOrg; isExternalUser?: boolean; @@ -256,7 +255,7 @@ class UnThemedOrgRow extends PureComponent { } } -const OrgRow = withTheme(UnThemedOrgRow); +const OrgRow = withTheme2(UnThemedOrgRow); const getAddToOrgModalStyles = stylesFactory(() => ({ modal: css` @@ -463,8 +462,7 @@ export function ChangeOrgButton({ } const ExternalUserTooltip = () => { - const theme = useTheme(); - const styles = getTooltipStyles(theme); + const styles = useStyles2(getTooltipStyles); return (
@@ -493,11 +491,11 @@ const ExternalUserTooltip = () => { ); }; -const getTooltipStyles = stylesFactory((theme: GrafanaTheme) => ({ +const getTooltipStyles = (theme: GrafanaTheme2) => ({ disabledTooltip: css` display: flex; `, tooltipItemLink: css` - color: ${theme.palette.blue95}; + color: ${theme.v1.palette.blue95}; `, -})); +}); diff --git a/public/app/features/admin/UserProfile.tsx b/public/app/features/admin/UserProfile.tsx index b2c92caa137..1d1e3f6d43b 100644 --- a/public/app/features/admin/UserProfile.tsx +++ b/public/app/features/admin/UserProfile.tsx @@ -1,9 +1,7 @@ import { css, cx } from '@emotion/css'; import React, { FC, PureComponent, useRef, useState } from 'react'; -import { GrafanaTheme } from '@grafana/data'; -import { Button, ConfirmButton, ConfirmModal, Input, LegacyInputStatus, stylesFactory } from '@grafana/ui'; -import { config } from 'app/core/config'; +import { Button, ConfirmButton, ConfirmModal, Input, LegacyInputStatus } from '@grafana/ui'; import { contextSrv } from 'app/core/core'; import { AccessControlAction, UserDTO } from 'app/types'; @@ -73,7 +71,6 @@ export function UserProfile({ const authSource = user.authLabels?.length && user.authLabels[0]; const lockMessage = authSource ? `Synced via ${authSource}` : ''; - const styles = getStyles(config.theme); const editLocked = user.isExternal || !contextSrv.hasPermissionInMetadata(AccessControlAction.UsersWrite, user); const passwordChangeLocked = @@ -163,16 +160,14 @@ export function UserProfile({ ); } -const getStyles = stylesFactory((theme: GrafanaTheme) => { - return { - buttonRow: css` - margin-top: 0.8rem; - > * { - margin-right: 16px; - } - `, - }; -}); +const styles = { + buttonRow: css` + margin-top: 0.8rem; + > * { + margin-right: 16px; + } + `, +}; interface UserProfileRowProps { label: string; diff --git a/public/app/features/alerting/components/NotificationChannelForm.tsx b/public/app/features/alerting/components/NotificationChannelForm.tsx index ba471a9eee5..5eeb366dc80 100644 --- a/public/app/features/alerting/components/NotificationChannelForm.tsx +++ b/public/app/features/alerting/components/NotificationChannelForm.tsx @@ -1,8 +1,8 @@ import { css } from '@emotion/css'; import React, { FC, useEffect } from 'react'; -import { GrafanaTheme, SelectableValue } from '@grafana/data'; -import { Button, FormAPI, HorizontalGroup, stylesFactory, useTheme, Spinner } from '@grafana/ui'; +import { GrafanaTheme2, SelectableValue } from '@grafana/data'; +import { Button, FormAPI, HorizontalGroup, Spinner, useStyles2 } from '@grafana/ui'; import config from 'app/core/config'; import { NotificationChannelType, NotificationChannelDTO, NotificationChannelSecureFields } from '../../../types'; @@ -39,7 +39,7 @@ export const NotificationChannelForm: FC = ({ resetSecureField, secureFields, }) => { - const styles = getStyles(useTheme()); + const styles = useStyles2(getStyles); useEffect(() => { /* @@ -117,15 +117,15 @@ export const NotificationChannelForm: FC = ({ ); }; -const getStyles = stylesFactory((theme: GrafanaTheme) => { +const getStyles = (theme: GrafanaTheme2) => { return { formContainer: css``, formItem: css` flex-grow: 1; - padding-top: ${theme.spacing.md}; + padding-top: ${theme.spacing(2)}; `, formButtons: css` - padding-top: ${theme.spacing.xl}; + padding-top: ${theme.spacing(4)}; `, }; -}); +}; diff --git a/public/app/features/alerting/unified/components/AlertLabel.tsx b/public/app/features/alerting/unified/components/AlertLabel.tsx index 5f77b5cf126..cfc5bcff686 100644 --- a/public/app/features/alerting/unified/components/AlertLabel.tsx +++ b/public/app/features/alerting/unified/components/AlertLabel.tsx @@ -1,8 +1,8 @@ import { css } from '@emotion/css'; -import React, { FC } from 'react'; +import React from 'react'; -import { GrafanaTheme } from '@grafana/data'; -import { IconButton, useStyles } from '@grafana/ui'; +import { GrafanaTheme2 } from '@grafana/data'; +import { IconButton, useStyles2 } from '@grafana/ui'; interface Props { labelKey: string; @@ -11,23 +11,29 @@ interface Props { onRemoveLabel?: () => void; } -export const AlertLabel: FC = ({ labelKey, value, operator = '=', onRemoveLabel }) => ( -
- {labelKey} - {operator} - {value} - {!!onRemoveLabel && } -
-); +export const AlertLabel = ({ labelKey, value, operator = '=', onRemoveLabel }: Props) => { + const styles = useStyles2(getStyles); -export const getStyles = (theme: GrafanaTheme) => css` - padding: ${theme.spacing.xs} ${theme.spacing.sm}; - border-radius: ${theme.border.radius.sm}; - border: solid 1px ${theme.colors.border2}; - font-size: ${theme.typography.size.sm}; - background-color: ${theme.colors.bg2}; - font-weight: ${theme.typography.weight.bold}; - color: ${theme.colors.formLabel}; - display: inline-block; - line-height: 1.2; -`; + return ( +
+ {labelKey} + {operator} + {value} + {!!onRemoveLabel && } +
+ ); +}; + +export const getStyles = (theme: GrafanaTheme2) => ({ + wrapper: css` + padding: ${theme.spacing(0.5, 1)}; + border-radius: ${theme.shape.borderRadius(1)}; + border: solid 1px ${theme.colors.border.medium}; + font-size: ${theme.typography.bodySmall.fontSize}; + background-color: ${theme.colors.background.secondary}; + font-weight: ${theme.typography.fontWeightBold}; + color: ${theme.colors.text.primary}; + display: inline-block; + line-height: 1.2; + `, +}); diff --git a/public/app/features/alerting/unified/components/AnnotationDetailsField.tsx b/public/app/features/alerting/unified/components/AnnotationDetailsField.tsx index b0ed80a585a..615b2523148 100644 --- a/public/app/features/alerting/unified/components/AnnotationDetailsField.tsx +++ b/public/app/features/alerting/unified/components/AnnotationDetailsField.tsx @@ -1,8 +1,8 @@ import { css } from '@emotion/css'; import React, { FC } from 'react'; -import { GrafanaTheme } from '@grafana/data'; -import { Tooltip, useStyles } from '@grafana/ui'; +import { GrafanaTheme2 } from '@grafana/data'; +import { Tooltip, useStyles2 } from '@grafana/ui'; import { Annotation, annotationLabels } from '../utils/constants'; @@ -34,7 +34,7 @@ export const AnnotationDetailsField: FC = ({ annotationKey, value }) => { }; const AnnotationValue: FC = ({ annotationKey, value }) => { - const styles = useStyles(getStyles); + const styles = useStyles2(getStyles); const needsWell = wellableAnnotationKeys.includes(annotationKey); const needsLink = value && value.startsWith('http'); @@ -56,12 +56,12 @@ const AnnotationValue: FC = ({ annotationKey, value }) => { return <>{tokenizeValue}; }; -export const getStyles = (theme: GrafanaTheme) => ({ +export const getStyles = (theme: GrafanaTheme2) => ({ well: css` word-break: break-word; `, link: css` word-break: break-all; - color: ${theme.colors.textBlue}; + color: ${theme.colors.primary.text}; `, }); diff --git a/public/app/features/alerting/unified/components/EmptyArea.tsx b/public/app/features/alerting/unified/components/EmptyArea.tsx index 8be4b4c3c35..fb90f2317c7 100644 --- a/public/app/features/alerting/unified/components/EmptyArea.tsx +++ b/public/app/features/alerting/unified/components/EmptyArea.tsx @@ -1,21 +1,21 @@ import { css } from '@emotion/css'; import React from 'react'; -import { GrafanaTheme } from '@grafana/data'; -import { useStyles } from '@grafana/ui'; +import { GrafanaTheme2 } from '@grafana/data'; +import { useStyles2 } from '@grafana/ui'; export const EmptyArea = ({ children }: React.PropsWithChildren<{}>) => { - const styles = useStyles(getStyles); + const styles = useStyles2(getStyles); return
{children}
; }; -const getStyles = (theme: GrafanaTheme) => { +const getStyles = (theme: GrafanaTheme2) => { return { container: css` - background-color: ${theme.colors.bg2}; - color: ${theme.colors.textSemiWeak}; - padding: ${theme.spacing.xl}; + background-color: ${theme.colors.background.secondary}; + color: ${theme.colors.text.secondary}; + padding: ${theme.spacing(4)}; text-align: center; `, }; diff --git a/public/app/features/alerting/unified/components/EmptyAreaWithCTA.tsx b/public/app/features/alerting/unified/components/EmptyAreaWithCTA.tsx index a0dc2bbf1fe..38e1ce688bb 100644 --- a/public/app/features/alerting/unified/components/EmptyAreaWithCTA.tsx +++ b/public/app/features/alerting/unified/components/EmptyAreaWithCTA.tsx @@ -1,8 +1,8 @@ import { css } from '@emotion/css'; import React, { ButtonHTMLAttributes, FC } from 'react'; -import { GrafanaTheme } from '@grafana/data'; -import { Button, ButtonVariant, IconName, LinkButton, useStyles } from '@grafana/ui'; +import { GrafanaTheme2 } from '@grafana/data'; +import { Button, ButtonVariant, IconName, LinkButton, useStyles2 } from '@grafana/ui'; import { EmptyArea } from './EmptyArea'; @@ -28,7 +28,7 @@ export const EmptyAreaWithCTA: FC = ({ href, showButton = true, }) => { - const styles = useStyles(getStyles); + const styles = useStyles2(getStyles); const commonProps = { className: styles.button, @@ -56,19 +56,19 @@ export const EmptyAreaWithCTA: FC = ({ ); }; -const getStyles = (theme: GrafanaTheme) => { +const getStyles = (theme: GrafanaTheme2) => { return { container: css` - background-color: ${theme.colors.bg2}; - color: ${theme.colors.textSemiWeak}; - padding: ${theme.spacing.xl}; + background-color: ${theme.colors.background.secondary}; + color: ${theme.colors.text.secondary}; + padding: ${theme.spacing(4)}; text-align: center; `, text: css` - margin-bottom: ${theme.spacing.md}; + margin-bottom: ${theme.spacing(2)}; `, button: css` - margin: ${theme.spacing.md} 0 ${theme.spacing.sm}; + margin: ${theme.spacing(2, 0, 1)}; `, }; }; diff --git a/public/app/features/alerting/unified/components/Expression.tsx b/public/app/features/alerting/unified/components/Expression.tsx index f6391784efb..601ed4dbfb3 100644 --- a/public/app/features/alerting/unified/components/Expression.tsx +++ b/public/app/features/alerting/unified/components/Expression.tsx @@ -3,8 +3,8 @@ import { LanguageMap, languages as prismLanguages } from 'prismjs'; import React, { FC, useMemo } from 'react'; import { Editor } from 'slate-react'; -import { GrafanaTheme } from '@grafana/data'; -import { makeValue, SlatePrism, useStyles } from '@grafana/ui'; +import { GrafanaTheme2 } from '@grafana/data'; +import { makeValue, SlatePrism, useStyles2 } from '@grafana/ui'; import LogqlSyntax from 'app/plugins/datasource/loki/syntax'; import PromqlSyntax from 'app/plugins/datasource/prometheus/promql'; import { RulesSource } from 'app/types/unified-alerting'; @@ -39,7 +39,8 @@ export const HighlightedQuery: FC<{ language: 'promql' | 'logql'; expr: string } }; export const Expression: FC = ({ expression: query, rulesSource }) => { - const styles = useStyles(getStyles); + const styles = useStyles2(getStyles); + return ( {isCloudRulesSource(rulesSource) ? ( @@ -51,8 +52,8 @@ export const Expression: FC = ({ expression: query, rulesSource }) => { ); }; -export const getStyles = (theme: GrafanaTheme) => ({ +export const getStyles = (theme: GrafanaTheme2) => ({ well: css` - font-family: ${theme.typography.fontFamily.monospace}; + font-family: ${theme.typography.fontFamilyMonospace}; `, }); diff --git a/public/app/features/alerting/unified/components/Well.tsx b/public/app/features/alerting/unified/components/Well.tsx index 0ebfed409ca..17294c8fec4 100644 --- a/public/app/features/alerting/unified/components/Well.tsx +++ b/public/app/features/alerting/unified/components/Well.tsx @@ -1,21 +1,21 @@ import { cx, css } from '@emotion/css'; import React, { FC } from 'react'; -import { GrafanaTheme } from '@grafana/data'; -import { useStyles } from '@grafana/ui'; +import { GrafanaTheme2 } from '@grafana/data'; +import { useStyles2 } from '@grafana/ui'; type Props = React.HTMLAttributes; export const Well: FC = ({ children, className }) => { - const styles = useStyles(getStyles); + const styles = useStyles2(getStyles); return
{children}
; }; -export const getStyles = (theme: GrafanaTheme) => ({ +export const getStyles = (theme: GrafanaTheme2) => ({ wrapper: css` - background-color: ${theme.colors.panelBg}; - border: solid 1px ${theme.colors.formInputBorder}; - border-radius: ${theme.border.radius.sm}; - padding: ${theme.spacing.xs} ${theme.spacing.sm}; - font-family: ${theme.typography.fontFamily.monospace}; + background-color: ${theme.components.panel.background}; + border: solid 1px ${theme.components.input.borderColor}; + border-radius: ${theme.shape.borderRadius(1)}; + padding: ${theme.spacing(0.5, 1)}; + font-family: ${theme.typography.fontFamilyMonospace}; `, });