apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Chore: Reduce usage of v1 theme (#53245)

Browse Source
pull/53369/head
kay delaney 3 years ago committed by GitHub
parent d1d237f30a
commit 1772bd4238
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
42 changed files with 326 additions and 331 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 4
      packages/grafana-data/src/field/scale.test.ts
  2. 1
      packages/grafana-data/src/themes/types.ts
  3. 4
      packages/grafana-data/src/types/config.ts
  4. 4
      packages/grafana-data/src/utils/namedColorsPalette.test.ts
  5. 1
      packages/grafana-runtime/src/config.ts
  6. 16
      packages/grafana-ui/src/components/Badge/Badge.tsx
  7. 2
      packages/grafana-ui/src/components/BrowserLabel/Label.tsx
  8. 2
      packages/grafana-ui/src/components/Collapse/CollapsableSection.tsx
  9. 4
      packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx
  10. 4
      packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.tsx
  11. 16
      packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.tsx
  12. 20
      packages/grafana-ui/src/components/DataLinks/FieldLinkList.tsx
  13. 6
      packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx
  14. 4
      packages/grafana-ui/src/components/DateTimePickers/DatePickerWithInput/DatePickerWithInput.tsx
  15. 6
      packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.tsx
  16. 33
      packages/grafana-ui/src/components/DateTimePickers/TimeOfDayPicker.tsx
  17. 10
      packages/grafana-ui/src/components/DateTimePickers/TimeRangeInput.tsx
  18. 7
      packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.test.tsx
  19. 34
      packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx
  20. 4
      packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarBody.tsx
  21. 2
      packages/grafana-ui/src/components/Forms/commonStyles.ts
  22. 3
      packages/grafana-ui/src/components/Gauge/utils.ts
  23. 2
      packages/grafana-ui/src/components/Input/Input.tsx
  24. 4
      packages/grafana-ui/src/components/Segment/Segment.tsx
  25. 4
      packages/grafana-ui/src/components/Segment/SegmentAsync.tsx
  26. 4
      packages/grafana-ui/src/components/Segment/SegmentInput.tsx
  27. 6
      packages/grafana-ui/src/components/Segment/styles.ts
  28. 2
      packages/grafana-ui/src/components/TextArea/TextArea.tsx
  29. 68
      packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
  30. 72
      packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
  31. 102
      packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
  32. 16
      packages/grafana-ui/src/themes/mixins.ts
  33. 14
      public/app/plugins/panel/nodeGraph/Marker.tsx
  34. 4
      public/app/plugins/panel/nodeGraph/ViewControls.tsx
  35. 49
      public/app/plugins/panel/nodeGraph/useContextMenu.tsx
  36. 2
      public/app/plugins/panel/table-old/module.ts
  37. 4
      public/app/plugins/panel/table-old/renderer.ts
  38. 2
      public/app/plugins/panel/table/TablePanel.tsx
  39. 18
      public/app/plugins/panel/text/TextPanelEditor.tsx
  40. 34
      public/app/plugins/panel/timeseries/plugins/ExemplarMarker.tsx
  41. 42
      public/app/plugins/panel/welcome/Welcome.tsx
  42. 21
      public/app/plugins/panel/xychart/XYDimsEditor.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -74,16 +74,16 @@ $red: $red-base;
$yellow: ${theme.v1.palette.yellow};
$orange: ${theme.v1.palette.orange};
$purple: ${theme.v1.palette.purple};
$variable: ${theme.v1.colors.textBlue};
$variable: ${theme.colors.primary.text};
$brand-primary: ${theme.v1.palette.brandPrimary};
$brand-success: ${theme.v1.palette.brandSuccess};
$brand-warning: ${theme.v1.palette.brandWarning};
$brand-danger: ${theme.v1.palette.brandDanger};
$brand-primary: ${theme.v1.palette.orange};
$brand-success: ${theme.colors.success.main};
$brand-warning: ${theme.colors.warning.main};
$brand-danger: ${theme.colors.error.main};
$query-red: ${theme.v1.palette.queryRed};
$query-green: ${theme.v1.palette.queryGreen};
$query-purple: ${theme.v1.palette.queryPurple};
$query-red: ${theme.colors.error.text};
$query-green: ${theme.colors.success.text};
$query-purple: #fe85fc;
$query-orange: ${theme.v1.palette.orange};
// Status colors
@ -94,17 +94,17 @@ $critical: ${theme.colors.error.text};
// Scaffolding
// -------------------------
$body-bg: ${theme.v1.colors.bodyBg};
$page-bg: ${theme.v1.colors.bodyBg};
$dashboard-bg: ${theme.v1.colors.dashboardBg};
$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};
$body-bg: ${theme.colors.background.canvas};
$page-bg: ${theme.colors.background.canvas};
$dashboard-bg: ${theme.colors.background.canvas};
$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;

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

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

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

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

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

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

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

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

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

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

49
public/app/plugins/panel/nodeGraph/useContextMenu.tsx
Unescape View File

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Write Preview
Loading…
Cancel
Save