IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-12-28 01:41:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

Theme: Use higher order theme color variables rather then is light/dark logic (#30939)

Browse Source
This commit is contained in:
Torkel Ödegaard 2021-02-06 18:01:22 +01:00 committed by GitHub
parent 3cfa8dad48
commit f081df0a4f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 46 additions and 354 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
packages/grafana-ui/src/components/Chart/TooltipContainer.tsx
View File

@ -1,6 +1,5 @@
import React, { useState, useLayoutEffect, useRef, HTMLAttributes } from 'react';
import { stylesFactory } from '../../themes/stylesFactory';
import { selectThemeVariant } from '../../themes/selectThemeVariant';
import { css, cx } from 'emotion';
import { useTheme } from '../../themes/ThemeContext';
import useWindowSize from 'react-use/lib/useWindowSize';
@ -12,21 +11,6 @@ interface TooltipContainerProps extends HTMLAttributes<HTMLDivElement> {
children?: JSX.Element;
}
const getTooltipContainerStyles = stylesFactory((theme: GrafanaTheme) => {
const bgColor = selectThemeVariant({ light: theme.palette.gray5, dark: theme.palette.dark1 }, theme.type);
return {
wrapper: css`
overflow: hidden;
background: ${bgColor};
/* max-width is set up based on .grafana-tooltip class that's used in dashboard */
max-width: 800px;
padding: ${theme.spacing.sm};
border-radius: ${theme.border.radius.sm};
z-index: ${theme.zIndex.tooltip};
`,
};
});
export const TooltipContainer: React.FC<TooltipContainerProps> = ({
position: { x: positionX, y: positionY },
offset: { x: offsetX, y: offsetY },
@ -85,3 +69,17 @@ export const TooltipContainer: React.FC<TooltipContainerProps> = ({
};
TooltipContainer.displayName = 'TooltipContainer';
const getTooltipContainerStyles = stylesFactory((theme: GrafanaTheme) => {
return {
wrapper: css`
overflow: hidden;
background: ${theme.colors.bg2};
/* max-width is set up based on .grafana-tooltip class that's used in dashboard */
max-width: 800px;
padding: ${theme.spacing.sm};
border-radius: ${theme.border.radius.sm};
z-index: ${theme.zIndex.tooltip};
`,
};
});

11
packages/grafana-ui/src/components/ColorPicker/NamedColorsGroup.tsx
View File

@ -4,7 +4,6 @@ import { ColorDefinition } from '@grafana/data';
import { Color } from 'csstype';
import upperFirst from 'lodash/upperFirst';
import find from 'lodash/find';
import { selectThemeVariant } from '../../themes/selectThemeVariant';
type ColorChangeHandler = (color: ColorDefinition) => void;
@ -31,21 +30,13 @@ export const ColorSwatch: FunctionComponent<ColorSwatchProps> = ({
const isSmall = variant === ColorSwatchVariant.Small;
const swatchSize = isSmall ? '16px' : '32px';
const selectedSwatchBorder = selectThemeVariant(
{
light: theme.palette.white,
dark: theme.palette.black,
},
theme.type
);
const swatchStyles = {
width: swatchSize,
height: swatchSize,
borderRadius: '50%',
background: `${color}`,
marginRight: isSmall ? '0px' : '8px',
boxShadow: isSelected ? `inset 0 0 0 2px ${color}, inset 0 0 0 4px ${selectedSwatchBorder}` : 'none',
boxShadow: isSelected ? `inset 0 0 0 2px ${color}, inset 0 0 0 4px ${theme.colors.bg1}` : 'none',
};
return (

9
packages/grafana-ui/src/components/ColorPicker/SpectrumPalettePointer.tsx
View File

@ -1,6 +1,5 @@
import React from 'react';
import { Themeable } from '../../types';
import { selectThemeVariant } from '../../themes/selectThemeVariant';
export interface SpectrumPalettePointerProps extends Themeable {
direction?: string;
@ -15,13 +14,7 @@ const SpectrumPalettePointer: React.FunctionComponent<SpectrumPalettePointerProp
},
};
const pointerColor = selectThemeVariant(
{
light: theme.palette.dark3,
dark: theme.palette.gray2,
},
theme.type
);
const pointerColor = theme.colors.text;
let pointerStyles: React.CSSProperties = {
position: 'absolute',

70
packages/grafana-ui/src/components/DataLinks/DataLinkSuggestions.tsx
View File

@ -1,12 +1,11 @@
import { selectThemeVariant, ThemeContext } from '../../index';
import { ThemeContext } from '../../index';
import { GrafanaTheme, VariableSuggestion } from '@grafana/data';
import { css, cx } from 'emotion';
import _ from 'lodash';
import React, { useRef, useContext, useMemo } from 'react';
import useClickAway from 'react-use/lib/useClickAway';
import { List } from '../index';
import tinycolor from 'tinycolor2';
import { stylesFactory } from '../../themes';
import { styleMixins, stylesFactory } from '../../themes';
interface DataLinkSuggestionsProps {
suggestions: VariableSuggestion[];
@ -16,61 +15,12 @@ interface DataLinkSuggestionsProps {
}
const getStyles = stylesFactory((theme: GrafanaTheme) => {
const wrapperBg = selectThemeVariant(
{
light: theme.palette.white,
dark: theme.palette.dark2,
},
theme.type
);
const wrapperShadow = selectThemeVariant(
{
light: theme.palette.gray5,
dark: theme.palette.black,
},
theme.type
);
const itemColor = selectThemeVariant(
{
light: theme.palette.black,
dark: theme.palette.white,
},
theme.type
);
const itemDocsColor = selectThemeVariant(
{
light: theme.palette.dark3,
dark: theme.palette.gray2,
},
theme.type
);
const itemBgHover = selectThemeVariant(
{
light: theme.palette.gray5,
dark: theme.palette.dark7,
},
theme.type
);
const itemBgActive = selectThemeVariant(
{
light: theme.palette.gray6,
dark: theme.palette.dark9,
},
theme.type
);
const separatorColor = selectThemeVariant(
{
light: tinycolor(wrapperBg.toString()).darken(10).toString(),
dark: tinycolor(wrapperBg.toString()).lighten(10).toString(),
},
theme.type
);
const wrapperBg = theme.colors.bg1;
const wrapperShadow = theme.colors.dropdownShadow;
const itemColor = theme.colors.text;
const itemBgHover = styleMixins.hoverColor(theme.colors.bg1, theme);
const itemBgActive = theme.colors.bg2;
const separatorColor = theme.colors.border2;
return {
list: css`
@ -107,10 +57,6 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
font-family: ${theme.typography.fontFamily.monospace};
font-size: ${theme.typography.size.sm};
`,
itemDocs: css`
margin-top: ${theme.spacing.xs};
color: ${itemDocsColor};
`,
};
});

63
packages/grafana-ui/src/components/FieldConfigs/FieldConfigItemHeaderTitle.tsx
View File

@ -1,63 +0,0 @@
import React from 'react';
import { GrafanaTheme } from '@grafana/data';
import { css } from 'emotion';
import { selectThemeVariant, stylesFactory, useTheme } from '../../themes';
import { Label } from '../Forms/Label';
import { Icon } from '../Icon/Icon';
interface FieldConfigItemHeaderTitleProps {
title: string;
description?: string;
transparent?: boolean;
onRemove: () => void;
}
export const FieldConfigItemHeaderTitle: React.FC<FieldConfigItemHeaderTitleProps> = ({
title,
description,
onRemove,
children,
transparent,
}) => {
const theme = useTheme();
const styles = getFieldConfigItemHeaderTitleStyles(theme);
return (
<div className={!transparent ? styles.headerWrapper : ''}>
<div className={styles.header}>
<Label description={description}>{title}</Label>
<div className={styles.remove} onClick={() => onRemove()} aria-label="FieldConfigItemHeaderTitle remove button">
<Icon name="trash-alt" />
</div>
</div>
{children}
</div>
);
};
const getFieldConfigItemHeaderTitleStyles = stylesFactory((theme: GrafanaTheme) => {
const headerBg = selectThemeVariant(
{
light: theme.palette.white,
dark: theme.palette.dark1,
},
theme.type
);
return {
headerWrapper: css`
background: ${headerBg};
padding: ${theme.spacing.xs} 0;
`,
header: css`
display: flex;
justify-content: space-between;
padding: ${theme.spacing.xs} ${theme.spacing.xs} 0 ${theme.spacing.xs};
`,
remove: css`
flex-grow: 0;
flex-shrink: 0;
cursor: pointer;
color: ${theme.palette.red88};
`,
};
});

10
packages/grafana-ui/src/components/Icon/Icon.story.tsx
View File

@ -4,7 +4,7 @@ import { css } from 'emotion';
import { Input, Field, Icon } from '@grafana/ui';
import { getAvailableIcons, IconName } from '../../types';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import { useTheme, selectThemeVariant } from '../../themes';
import { useTheme } from '../../themes';
import mdx from './Icon.mdx';
export default {
@ -23,13 +23,7 @@ export default {
const IconWrapper = ({ name }: { name: IconName }) => {
const theme = useTheme();
const borderColor = selectThemeVariant(
{
light: theme.palette.gray5,
dark: theme.palette.dark6,
},
theme.type
);
const borderColor = theme.colors.border2;
return (
<div

10
packages/grafana-ui/src/components/Logs/LogLabelStats.tsx
View File

@ -4,7 +4,6 @@ import { LogLabelStatsModel, GrafanaTheme } from '@grafana/data';
import { Themeable } from '../../types/theme';
import { stylesFactory } from '../../themes';
import { selectThemeVariant } from '../../themes/selectThemeVariant';
import { withTheme } from '../../themes/index';
//Components
@ -13,13 +12,6 @@ import { LogLabelStatsRow } from './LogLabelStatsRow';
const STATS_ROW_LIMIT = 5;
const getStyles = stylesFactory((theme: GrafanaTheme) => {
const borderColor = selectThemeVariant(
{
light: theme.palette.gray5,
dark: theme.palette.dark9,
},
theme.type
);
return {
logsStats: css`
label: logs-stats;
@ -30,7 +22,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
`,
logsStatsHeader: css`
label: logs-stats__header;
border-bottom: 1px solid ${borderColor};
border-bottom: 1px solid ${theme.colors.border2};
display: flex;
`,
logsStatsTitle: css`

3
packages/grafana-ui/src/components/Logs/LogLabels.tsx
View File

@ -5,7 +5,6 @@ import { Labels } from '@grafana/data';
import { stylesFactory } from '../../themes';
import { Themeable } from '../../types/theme';
import { GrafanaTheme } from '@grafana/data';
import { selectThemeVariant } from '../../themes/selectThemeVariant';
import { withTheme } from '../../themes/ThemeContext';
// Levels are already encoded in color, filename is a Loki-ism
@ -22,7 +21,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
label: logs-label;
display: flex;
padding: 0 2px;
background-color: ${selectThemeVariant({ light: theme.palette.gray5, dark: theme.palette.dark6 }, theme.type)};
background-color: ${theme.colors.bg2};
border-radius: ${theme.border.radius};
margin: 1px 4px 0 0;
text-overflow: ellipsis;

44
packages/grafana-ui/src/components/Logs/LogRowContext.tsx
View File

@ -5,7 +5,6 @@ import { css, cx } from 'emotion';
import { Alert } from '../Alert/Alert';
import { LogRowContextRows, LogRowContextQueryErrors, HasMoreContextRows } from './LogRowContextProvider';
import { GrafanaTheme } from '@grafana/data';
import { selectThemeVariant } from '../../themes/selectThemeVariant';
import { DataQueryError } from '@grafana/data';
import { ThemeContext } from '../../themes/ThemeContext';
import { CustomScrollbar } from '../CustomScrollbar/CustomScrollbar';
@ -22,48 +21,17 @@ interface LogRowContextProps {
}
const getLogRowContextStyles = (theme: GrafanaTheme) => {
const gradientTop = selectThemeVariant(
{
light: theme.palette.white,
dark: theme.palette.dark1,
},
theme.type
);
const gradientBottom = selectThemeVariant(
{
light: theme.palette.gray7,
dark: theme.palette.dark2,
},
theme.type
);
const boxShadowColor = selectThemeVariant(
{
light: theme.palette.gray5,
dark: theme.palette.black,
},
theme.type
);
const borderColor = selectThemeVariant(
{
light: theme.palette.gray5,
dark: theme.palette.dark9,
},
theme.type
);
return {
commonStyles: css`
position: absolute;
width: calc(100% + 20px);
left: -10px;
left: -13px;
height: 250px;
z-index: 2;
z-index: ${theme.zIndex.dropdown};
overflow: hidden;
background: ${theme.colors.bodyBg};
background: linear-gradient(180deg, ${gradientTop} 0%, ${gradientBottom} 104.25%);
box-shadow: 0px 2px 4px ${boxShadowColor}, 0px 0px 2px ${boxShadowColor};
border: 1px solid ${borderColor};
background: ${theme.colors.bg1};
box-shadow: 0 0 10px ${theme.colors.dropdownShadow};
border: 1px solid ${theme.colors.bg2};
border-radius: ${theme.border.radius.md};
`,
header: css`
@ -71,7 +39,7 @@ const getLogRowContextStyles = (theme: GrafanaTheme) => {
padding: 0 10px;
display: flex;
align-items: center;
background: ${borderColor};
background: ${theme.colors.bg2};
`,
logs: css`
height: 220px;

14
packages/grafana-ui/src/components/Logs/LogRowMessage.tsx
View File

@ -7,7 +7,6 @@ import { LogRowModel, findHighlightChunksInText, GrafanaTheme } from '@grafana/d
// @ts-ignore
import Highlighter from 'react-highlight-words';
import { LogRowContextQueryErrors, HasMoreContextRows, LogRowContextRows } from './LogRowContextProvider';
import { selectThemeVariant } from '../../index';
import { Themeable } from '../../types/theme';
import { withTheme } from '../../themes/index';
import { getLogRowStyles } from './getLogRowStyles';
@ -34,13 +33,7 @@ interface Props extends Themeable {
}
const getStyles = stylesFactory((theme: GrafanaTheme) => {
const outlineColor = selectThemeVariant(
{
light: theme.palette.white,
dark: theme.palette.black,
},
theme.type
);
const outlineColor = tinycolor(theme.colors.dashboardBg).setAlpha(0.7).toRgbString();
return {
positionRelative: css`
@ -50,10 +43,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
rowWithContext: css`
label: rowWithContext;
z-index: 1;
outline: 9999px solid
${tinycolor(outlineColor as tinycolor.ColorInput)
.setAlpha(0.7)
.toRgbString()};
outline: 9999px solid ${outlineColor};
`,
horizontalScroll: css`
label: verticalScroll;

11
packages/grafana-ui/src/components/Select/SelectOptionGroup.tsx
View File

@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
import { css } from 'emotion';
import { GrafanaTheme } from '@grafana/data';
import { GroupProps } from 'react-select';
import { stylesFactory, withTheme, selectThemeVariant } from '../../themes';
import { stylesFactory, withTheme } from '../../themes';
import { Themeable } from '../../types';
import { Icon } from '../Icon/Icon';
@ -19,13 +19,6 @@ interface State {
}
const getSelectOptionGroupStyles = stylesFactory((theme: GrafanaTheme) => {
const optionBorder = selectThemeVariant(
{
light: theme.palette.gray4,
dark: theme.palette.dark9,
},
theme.type
);
return {
header: css`
display: flex;
@ -35,7 +28,7 @@ const getSelectOptionGroupStyles = stylesFactory((theme: GrafanaTheme) => {
cursor: pointer;
padding: 7px 10px;
width: 100%;
border-bottom: 1px solid ${optionBorder};
border-bottom: 1px solid ${theme.colors.bg2};
&:hover {
color: ${theme.colors.textStrong};

12
packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimeRangeOption.tsx
View File

@ -1,18 +1,10 @@
import React, { memo } from 'react';
import { css } from 'emotion';
import { GrafanaTheme, TimeOption } from '@grafana/data';
import { useTheme, stylesFactory, selectThemeVariant } from '../../../themes';
import { useTheme, stylesFactory, styleMixins } from '../../../themes';
import { Icon } from '../../Icon/Icon';
const getStyles = stylesFactory((theme: GrafanaTheme) => {
const background = selectThemeVariant(
{
light: theme.palette.gray7,
dark: theme.palette.dark3,
},
theme.type
);
return {
container: css`
display: flex;
@ -22,7 +14,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
border-left: 2px solid rgba(255, 255, 255, 0);
&:hover {
background: ${background};
background: ${styleMixins.hoverColor(theme.colors.bg1, theme)};
border-image: linear-gradient(#f05a28 30%, #fbca0a 99%);
border-image-slice: 1;
border-style: solid;

14
packages/grafana-ui/src/components/Typeahead/TypeaheadInfo.tsx
View File

@ -1,7 +1,7 @@
import React, { useContext } from 'react';
import { css, cx } from 'emotion';
import { CompletionItem, selectThemeVariant, ThemeContext } from '../..';
import { CompletionItem, ThemeContext } from '../..';
import { GrafanaTheme, renderMarkdown } from '@grafana/data';
const getStyles = (theme: GrafanaTheme, height: number, visible: boolean) => {
@ -11,19 +11,13 @@ const getStyles = (theme: GrafanaTheme, height: number, visible: boolean) => {
z-index: 11;
padding: ${theme.spacing.sm} ${theme.spacing.sm} ${theme.spacing.sm} ${theme.spacing.md};
border-radius: ${theme.border.radius.md};
border: ${selectThemeVariant(
{ light: `solid 1px ${theme.palette.gray5}`, dark: `solid 1px ${theme.palette.dark1}` },
theme.type
)};
border: ${theme.colors.border2};
overflow-y: scroll;
overflow-x: hidden;
outline: none;
background: ${selectThemeVariant({ light: theme.palette.white, dark: theme.palette.dark4 }, theme.type)};
background: ${theme.colors.bg2};
color: ${theme.colors.text};
box-shadow: ${selectThemeVariant(
{ light: `0 5px 10px 0 ${theme.palette.gray5}`, dark: `0 5px 10px 0 ${theme.palette.black}` },
theme.type
)};
box-shadow: 0 0 20px ${theme.colors.dropdownShadow};
visibility: ${visible === true ? 'visible' : 'hidden'};
width: 250px;
height: ${height + parseInt(theme.spacing.xxs, 10)}px;

3
packages/grafana-ui/src/components/Typeahead/TypeaheadItem.tsx
View File

@ -4,7 +4,6 @@ import React, { useContext } from 'react';
import Highlighter from 'react-highlight-words';
import { css, cx } from 'emotion';
import { GrafanaTheme } from '@grafana/data';
import { selectThemeVariant } from '../../themes/selectThemeVariant';
import { CompletionItem, CompletionItemKind } from '../../types/completion';
import { ThemeContext } from '../../themes/ThemeContext';
@ -38,7 +37,7 @@ const getStyles = (theme: GrafanaTheme) => ({
typeaheadItemSelected: css`
label: type-ahead-item-selected;
background-color: ${selectThemeVariant({ light: theme.palette.gray6, dark: theme.palette.dark9 }, theme.type)};
background-color: ${theme.colors.bg2};
`,
typeaheadItemMatch: css`

1
packages/grafana-ui/src/components/index.ts
View File

@ -129,7 +129,6 @@ export { StringArrayEditor } from './OptionsUI/strings';
export { NumberValueEditor } from './OptionsUI/number';
export { SliderValueEditor } from './OptionsUI/slider';
export { SelectValueEditor } from './OptionsUI/select';
export { FieldConfigItemHeaderTitle } from './FieldConfigs/FieldConfigItemHeaderTitle';
// Next-gen forms
export { Form } from './Forms/Form';

94
packages/grafana-ui/src/utils/storybook/CombinationsRowRenderer.tsx
View File

@ -1,94 +0,0 @@
import React from 'react';
import { css } from 'emotion';
import { withTheme } from '../../themes';
import { Themeable } from '../../types';
import { selectThemeVariant } from '../../themes/selectThemeVariant';
import prettyFormat from 'pretty-format';
const detailsRenderer: (combinationProps: any) => JSX.Element = (props) => {
const listStyle = css`
padding: 0;
margin: 0;
list-style: none;
`;
return (
<ul className={listStyle}>
<li>
{Object.keys(props).map((key, i) => {
return (
<li key={i}>
{key}: {props[key]}
</li>
);
})}
</li>
</ul>
);
};
interface CombinationsRowRendererProps extends Themeable {
Component: React.ComponentType<any>;
props: any;
options: any;
}
const CombinationsRowRenderer: React.FunctionComponent<CombinationsRowRendererProps> = ({
Component,
props,
theme,
}) => {
const el = React.createElement(Component, props);
const borderColor = selectThemeVariant(
{
dark: theme.palette.dark8,
light: theme.palette.gray5,
},
theme.type
);
const rowStyle = css`
display: flex;
width: 100%;
flex-direction: row;
border: 1px solid ${borderColor};
border-bottom: none;
&:last-child {
border-bottom: 1px solid ${borderColor};
}
`;
const cellStyle = css`
padding: 10px;
`;
const previewCellStyle = css`
display: flex;
align-items: center;
justify-content: center;
width: 200px;
flex-shrink: 1;
border-right: 1px solid ${borderColor};
${cellStyle};
`;
const variantsCellStyle = css`
width: 200px;
border-right: 1px solid ${borderColor};
${cellStyle};
`;
return (
<div className={rowStyle}>
<div className={previewCellStyle}>{el}</div>
<div className={variantsCellStyle}>{detailsRenderer(props)}</div>
<div className={cellStyle}>
{prettyFormat(el, {
plugins: [prettyFormat.plugins.ReactElement],
printFunctionName: true,
})}
</div>
</div>
);
};
export const ThemeableCombinationsRowRenderer = withTheme(CombinationsRowRenderer);

1
public/sass/base/_type.scss
View File

@ -24,6 +24,7 @@ small {
font-size: $font-size-sm;
}
b,
strong {
font-weight: $font-weight-semi-bold;
}