Skip to content

N
nexpie-grafana-theme
Commit f081df0a by Torkel Ödegaard Committed by GitHub
Options

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

parent 3cfa8dad
Showing with 46 additions and 354 deletions
packages/grafana-ui/src/components/Chart/TooltipContainer.tsx
import React, { useState, useLayoutEffect, useRef, HTMLAttributes } from 'react'; import React, { useState, useLayoutEffect, useRef, HTMLAttributes } from 'react';
import { stylesFactory } from '../../themes/stylesFactory'; import { stylesFactory } from '../../themes/stylesFactory';
import { selectThemeVariant } from '../../themes/selectThemeVariant';
import { css, cx } from 'emotion'; import { css, cx } from 'emotion';
import { useTheme } from '../../themes/ThemeContext'; import { useTheme } from '../../themes/ThemeContext';
import useWindowSize from 'react-use/lib/useWindowSize'; import useWindowSize from 'react-use/lib/useWindowSize';
...@@ -12,21 +11,6 @@ interface TooltipContainerProps extends HTMLAttributes<HTMLDivElement> { ...@@ -12,21 +11,6 @@ interface TooltipContainerProps extends HTMLAttributes<HTMLDivElement> {
children?: JSX.Element; 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> = ({ export const TooltipContainer: React.FC<TooltipContainerProps> = ({
position: { x: positionX, y: positionY }, position: { x: positionX, y: positionY },
offset: { x: offsetX, y: offsetY }, offset: { x: offsetX, y: offsetY },
...@@ -85,3 +69,17 @@ export const TooltipContainer: React.FC<TooltipContainerProps> = ({ ...@@ -85,3 +69,17 @@ export const TooltipContainer: React.FC<TooltipContainerProps> = ({
}; };
TooltipContainer.displayName = 'TooltipContainer'; 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};
`,
};
});
packages/grafana-ui/src/components/ColorPicker/NamedColorsGroup.tsx
...@@ -4,7 +4,6 @@ import { ColorDefinition } from '@grafana/data'; ...@@ -4,7 +4,6 @@ import { ColorDefinition } from '@grafana/data';
import { Color } from 'csstype'; import { Color } from 'csstype';
import upperFirst from 'lodash/upperFirst'; import upperFirst from 'lodash/upperFirst';
import find from 'lodash/find'; import find from 'lodash/find';
import { selectThemeVariant } from '../../themes/selectThemeVariant';
type ColorChangeHandler = (color: ColorDefinition) => void; type ColorChangeHandler = (color: ColorDefinition) => void;
...@@ -31,21 +30,13 @@ export const ColorSwatch: FunctionComponent<ColorSwatchProps> = ({ ...@@ -31,21 +30,13 @@ export const ColorSwatch: FunctionComponent<ColorSwatchProps> = ({
const isSmall = variant === ColorSwatchVariant.Small; const isSmall = variant === ColorSwatchVariant.Small;
const swatchSize = isSmall ? '16px' : '32px'; const swatchSize = isSmall ? '16px' : '32px';
const selectedSwatchBorder = selectThemeVariant(
{
light: theme.palette.white,
dark: theme.palette.black,
},
theme.type
);
const swatchStyles = { const swatchStyles = {
width: swatchSize, width: swatchSize,
height: swatchSize, height: swatchSize,
borderRadius: '50%', borderRadius: '50%',
background: `${color}`, background: `${color}`,
marginRight: isSmall ? '0px' : '8px', 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 ( return (
......
packages/grafana-ui/src/components/ColorPicker/SpectrumPalettePointer.tsx
import React from 'react'; import React from 'react';
import { Themeable } from '../../types'; import { Themeable } from '../../types';
import { selectThemeVariant } from '../../themes/selectThemeVariant';
export interface SpectrumPalettePointerProps extends Themeable { export interface SpectrumPalettePointerProps extends Themeable {
direction?: string; direction?: string;
...@@ -15,13 +14,7 @@ const SpectrumPalettePointer: React.FunctionComponent<SpectrumPalettePointerProp ...@@ -15,13 +14,7 @@ const SpectrumPalettePointer: React.FunctionComponent<SpectrumPalettePointerProp
}, },
}; };
const pointerColor = selectThemeVariant( const pointerColor = theme.colors.text;
{
light: theme.palette.dark3,
dark: theme.palette.gray2,
},
theme.type
);
let pointerStyles: React.CSSProperties = { let pointerStyles: React.CSSProperties = {
position: 'absolute', position: 'absolute',
......
packages/grafana-ui/src/components/DataLinks/DataLinkSuggestions.tsx
import { selectThemeVariant, ThemeContext } from '../../index'; import { ThemeContext } from '../../index';
import { GrafanaTheme, VariableSuggestion } from '@grafana/data'; import { GrafanaTheme, VariableSuggestion } from '@grafana/data';
import { css, cx } from 'emotion'; import { css, cx } from 'emotion';
import _ from 'lodash'; import _ from 'lodash';
import React, { useRef, useContext, useMemo } from 'react'; import React, { useRef, useContext, useMemo } from 'react';
import useClickAway from 'react-use/lib/useClickAway'; import useClickAway from 'react-use/lib/useClickAway';
import { List } from '../index'; import { List } from '../index';
import tinycolor from 'tinycolor2'; import { styleMixins, stylesFactory } from '../../themes';
import { stylesFactory } from '../../themes';
interface DataLinkSuggestionsProps { interface DataLinkSuggestionsProps {
suggestions: VariableSuggestion[]; suggestions: VariableSuggestion[];
...@@ -16,61 +15,12 @@ interface DataLinkSuggestionsProps { ...@@ -16,61 +15,12 @@ interface DataLinkSuggestionsProps {
} }
const getStyles = stylesFactory((theme: GrafanaTheme) => { const getStyles = stylesFactory((theme: GrafanaTheme) => {
const wrapperBg = selectThemeVariant( const wrapperBg = theme.colors.bg1;
{ const wrapperShadow = theme.colors.dropdownShadow;
light: theme.palette.white, const itemColor = theme.colors.text;
dark: theme.palette.dark2, const itemBgHover = styleMixins.hoverColor(theme.colors.bg1, theme);
}, const itemBgActive = theme.colors.bg2;
theme.type const separatorColor = theme.colors.border2;
);
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
);
return { return {
list: css` list: css`
...@@ -107,10 +57,6 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => { ...@@ -107,10 +57,6 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
font-family: ${theme.typography.fontFamily.monospace}; font-family: ${theme.typography.fontFamily.monospace};
font-size: ${theme.typography.size.sm}; font-size: ${theme.typography.size.sm};
`, `,
itemDocs: css`
margin-top: ${theme.spacing.xs};
color: ${itemDocsColor};
`,
}; };
}); });
......
packages/grafana-ui/src/components/FieldConfigs/FieldConfigItemHeaderTitle.tsx deleted 100644 → 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};
`,
};
});
packages/grafana-ui/src/components/Icon/Icon.story.tsx
...@@ -4,7 +4,7 @@ import { css } from 'emotion'; ...@@ -4,7 +4,7 @@ import { css } from 'emotion';
import { Input, Field, Icon } from '@grafana/ui'; import { Input, Field, Icon } from '@grafana/ui';
import { getAvailableIcons, IconName } from '../../types'; import { getAvailableIcons, IconName } from '../../types';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import { useTheme, selectThemeVariant } from '../../themes'; import { useTheme } from '../../themes';
import mdx from './Icon.mdx'; import mdx from './Icon.mdx';
export default { export default {
...@@ -23,13 +23,7 @@ export default { ...@@ -23,13 +23,7 @@ export default {
const IconWrapper = ({ name }: { name: IconName }) => { const IconWrapper = ({ name }: { name: IconName }) => {
const theme = useTheme(); const theme = useTheme();
const borderColor = selectThemeVariant( const borderColor = theme.colors.border2;
{
light: theme.palette.gray5,
dark: theme.palette.dark6,
},
theme.type
);
return ( return (
<div <div
......
packages/grafana-ui/src/components/Logs/LogLabelStats.tsx
...@@ -4,7 +4,6 @@ import { LogLabelStatsModel, GrafanaTheme } from '@grafana/data'; ...@@ -4,7 +4,6 @@ import { LogLabelStatsModel, GrafanaTheme } from '@grafana/data';
import { Themeable } from '../../types/theme'; import { Themeable } from '../../types/theme';
import { stylesFactory } from '../../themes'; import { stylesFactory } from '../../themes';
import { selectThemeVariant } from '../../themes/selectThemeVariant';
import { withTheme } from '../../themes/index'; import { withTheme } from '../../themes/index';
//Components //Components
...@@ -13,13 +12,6 @@ import { LogLabelStatsRow } from './LogLabelStatsRow'; ...@@ -13,13 +12,6 @@ import { LogLabelStatsRow } from './LogLabelStatsRow';
const STATS_ROW_LIMIT = 5; const STATS_ROW_LIMIT = 5;
const getStyles = stylesFactory((theme: GrafanaTheme) => { const getStyles = stylesFactory((theme: GrafanaTheme) => {
const borderColor = selectThemeVariant(
{
light: theme.palette.gray5,
dark: theme.palette.dark9,
},
theme.type
);
return { return {
logsStats: css` logsStats: css`
label: logs-stats; label: logs-stats;
...@@ -30,7 +22,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => { ...@@ -30,7 +22,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
`, `,
logsStatsHeader: css` logsStatsHeader: css`
label: logs-stats__header; label: logs-stats__header;
border-bottom: 1px solid ${borderColor}; border-bottom: 1px solid ${theme.colors.border2};
display: flex; display: flex;
`, `,
logsStatsTitle: css` logsStatsTitle: css`
......
packages/grafana-ui/src/components/Logs/LogLabels.tsx
...@@ -5,7 +5,6 @@ import { Labels } from '@grafana/data'; ...@@ -5,7 +5,6 @@ import { Labels } from '@grafana/data';
import { stylesFactory } from '../../themes'; import { stylesFactory } from '../../themes';
import { Themeable } from '../../types/theme'; import { Themeable } from '../../types/theme';
import { GrafanaTheme } from '@grafana/data'; import { GrafanaTheme } from '@grafana/data';
import { selectThemeVariant } from '../../themes/selectThemeVariant';
import { withTheme } from '../../themes/ThemeContext'; import { withTheme } from '../../themes/ThemeContext';
// Levels are already encoded in color, filename is a Loki-ism // Levels are already encoded in color, filename is a Loki-ism
...@@ -22,7 +21,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => { ...@@ -22,7 +21,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
label: logs-label; label: logs-label;
display: flex; display: flex;
padding: 0 2px; 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}; border-radius: ${theme.border.radius};
margin: 1px 4px 0 0; margin: 1px 4px 0 0;
text-overflow: ellipsis; text-overflow: ellipsis;
......
packages/grafana-ui/src/components/Logs/LogRowContext.tsx
...@@ -5,7 +5,6 @@ import { css, cx } from 'emotion'; ...@@ -5,7 +5,6 @@ import { css, cx } from 'emotion';
import { Alert } from '../Alert/Alert'; import { Alert } from '../Alert/Alert';
import { LogRowContextRows, LogRowContextQueryErrors, HasMoreContextRows } from './LogRowContextProvider'; import { LogRowContextRows, LogRowContextQueryErrors, HasMoreContextRows } from './LogRowContextProvider';
import { GrafanaTheme } from '@grafana/data'; import { GrafanaTheme } from '@grafana/data';
import { selectThemeVariant } from '../../themes/selectThemeVariant';
import { DataQueryError } from '@grafana/data'; import { DataQueryError } from '@grafana/data';
import { ThemeContext } from '../../themes/ThemeContext'; import { ThemeContext } from '../../themes/ThemeContext';
import { CustomScrollbar } from '../CustomScrollbar/CustomScrollbar'; import { CustomScrollbar } from '../CustomScrollbar/CustomScrollbar';
...@@ -22,48 +21,17 @@ interface LogRowContextProps { ...@@ -22,48 +21,17 @@ interface LogRowContextProps {
} }
const getLogRowContextStyles = (theme: GrafanaTheme) => { 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 { return {
commonStyles: css` commonStyles: css`
position: absolute; position: absolute;
width: calc(100% + 20px); width: calc(100% + 20px);
left: -10px; left: -13px;
height: 250px; height: 250px;
z-index: 2; z-index: ${theme.zIndex.dropdown};
overflow: hidden; overflow: hidden;
background: ${theme.colors.bodyBg}; background: ${theme.colors.bg1};
background: linear-gradient(180deg, ${gradientTop} 0%, ${gradientBottom} 104.25%); box-shadow: 0 0 10px ${theme.colors.dropdownShadow};
box-shadow: 0px 2px 4px ${boxShadowColor}, 0px 0px 2px ${boxShadowColor}; border: 1px solid ${theme.colors.bg2};
border: 1px solid ${borderColor};
border-radius: ${theme.border.radius.md}; border-radius: ${theme.border.radius.md};
`, `,
header: css` header: css`
...@@ -71,7 +39,7 @@ const getLogRowContextStyles = (theme: GrafanaTheme) => { ...@@ -71,7 +39,7 @@ const getLogRowContextStyles = (theme: GrafanaTheme) => {
padding: 0 10px; padding: 0 10px;
display: flex; display: flex;
align-items: center; align-items: center;
background: ${borderColor}; background: ${theme.colors.bg2};
`, `,
logs: css` logs: css`
height: 220px; height: 220px;
......
packages/grafana-ui/src/components/Logs/LogRowMessage.tsx
...@@ -7,7 +7,6 @@ import { LogRowModel, findHighlightChunksInText, GrafanaTheme } from '@grafana/d ...@@ -7,7 +7,6 @@ import { LogRowModel, findHighlightChunksInText, GrafanaTheme } from '@grafana/d
// @ts-ignore // @ts-ignore
import Highlighter from 'react-highlight-words'; import Highlighter from 'react-highlight-words';
import { LogRowContextQueryErrors, HasMoreContextRows, LogRowContextRows } from './LogRowContextProvider'; import { LogRowContextQueryErrors, HasMoreContextRows, LogRowContextRows } from './LogRowContextProvider';
import { selectThemeVariant } from '../../index';
import { Themeable } from '../../types/theme'; import { Themeable } from '../../types/theme';
import { withTheme } from '../../themes/index'; import { withTheme } from '../../themes/index';
import { getLogRowStyles } from './getLogRowStyles'; import { getLogRowStyles } from './getLogRowStyles';
...@@ -34,13 +33,7 @@ interface Props extends Themeable { ...@@ -34,13 +33,7 @@ interface Props extends Themeable {
} }
const getStyles = stylesFactory((theme: GrafanaTheme) => { const getStyles = stylesFactory((theme: GrafanaTheme) => {
const outlineColor = selectThemeVariant( const outlineColor = tinycolor(theme.colors.dashboardBg).setAlpha(0.7).toRgbString();
{
light: theme.palette.white,
dark: theme.palette.black,
},
theme.type
);
return { return {
positionRelative: css` positionRelative: css`
...@@ -50,10 +43,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => { ...@@ -50,10 +43,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
rowWithContext: css` rowWithContext: css`
label: rowWithContext; label: rowWithContext;
z-index: 1; z-index: 1;
outline: 9999px solid outline: 9999px solid ${outlineColor};
${tinycolor(outlineColor as tinycolor.ColorInput)
.setAlpha(0.7)
.toRgbString()};
`, `,
horizontalScroll: css` horizontalScroll: css`
label: verticalScroll; label: verticalScroll;
......
packages/grafana-ui/src/components/Select/SelectOptionGroup.tsx
...@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react'; ...@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
import { css } from 'emotion'; import { css } from 'emotion';
import { GrafanaTheme } from '@grafana/data'; import { GrafanaTheme } from '@grafana/data';
import { GroupProps } from 'react-select'; import { GroupProps } from 'react-select';
import { stylesFactory, withTheme, selectThemeVariant } from '../../themes'; import { stylesFactory, withTheme } from '../../themes';
import { Themeable } from '../../types'; import { Themeable } from '../../types';
import { Icon } from '../Icon/Icon'; import { Icon } from '../Icon/Icon';
...@@ -19,13 +19,6 @@ interface State { ...@@ -19,13 +19,6 @@ interface State {
} }
const getSelectOptionGroupStyles = stylesFactory((theme: GrafanaTheme) => { const getSelectOptionGroupStyles = stylesFactory((theme: GrafanaTheme) => {
const optionBorder = selectThemeVariant(
{
light: theme.palette.gray4,
dark: theme.palette.dark9,
},
theme.type
);
return { return {
header: css` header: css`
display: flex; display: flex;
...@@ -35,7 +28,7 @@ const getSelectOptionGroupStyles = stylesFactory((theme: GrafanaTheme) => { ...@@ -35,7 +28,7 @@ const getSelectOptionGroupStyles = stylesFactory((theme: GrafanaTheme) => {
cursor: pointer; cursor: pointer;
padding: 7px 10px; padding: 7px 10px;
width: 100%; width: 100%;
border-bottom: 1px solid ${optionBorder}; border-bottom: 1px solid ${theme.colors.bg2};
&:hover { &:hover {
color: ${theme.colors.textStrong}; color: ${theme.colors.textStrong};
......
packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimeRangeOption.tsx
import React, { memo } from 'react'; import React, { memo } from 'react';
import { css } from 'emotion'; import { css } from 'emotion';
import { GrafanaTheme, TimeOption } from '@grafana/data'; import { GrafanaTheme, TimeOption } from '@grafana/data';
import { useTheme, stylesFactory, selectThemeVariant } from '../../../themes'; import { useTheme, stylesFactory, styleMixins } from '../../../themes';
import { Icon } from '../../Icon/Icon'; import { Icon } from '../../Icon/Icon';
const getStyles = stylesFactory((theme: GrafanaTheme) => { const getStyles = stylesFactory((theme: GrafanaTheme) => {
const background = selectThemeVariant(
{
light: theme.palette.gray7,
dark: theme.palette.dark3,
},
theme.type
);
return { return {
container: css` container: css`
display: flex; display: flex;
...@@ -22,7 +14,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => { ...@@ -22,7 +14,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
border-left: 2px solid rgba(255, 255, 255, 0); border-left: 2px solid rgba(255, 255, 255, 0);
&:hover { &:hover {
background: ${background}; background: ${styleMixins.hoverColor(theme.colors.bg1, theme)};
border-image: linear-gradient(#f05a28 30%, #fbca0a 99%); border-image: linear-gradient(#f05a28 30%, #fbca0a 99%);
border-image-slice: 1; border-image-slice: 1;
border-style: solid; border-style: solid;
......
packages/grafana-ui/src/components/Typeahead/TypeaheadInfo.tsx
import React, { useContext } from 'react'; import React, { useContext } from 'react';
import { css, cx } from 'emotion'; import { css, cx } from 'emotion';
import { CompletionItem, selectThemeVariant, ThemeContext } from '../..'; import { CompletionItem, ThemeContext } from '../..';
import { GrafanaTheme, renderMarkdown } from '@grafana/data'; import { GrafanaTheme, renderMarkdown } from '@grafana/data';
const getStyles = (theme: GrafanaTheme, height: number, visible: boolean) => { const getStyles = (theme: GrafanaTheme, height: number, visible: boolean) => {
...@@ -11,19 +11,13 @@ const getStyles = (theme: GrafanaTheme, height: number, visible: boolean) => { ...@@ -11,19 +11,13 @@ const getStyles = (theme: GrafanaTheme, height: number, visible: boolean) => {
z-index: 11; z-index: 11;
padding: ${theme.spacing.sm} ${theme.spacing.sm} ${theme.spacing.sm} ${theme.spacing.md}; padding: ${theme.spacing.sm} ${theme.spacing.sm} ${theme.spacing.sm} ${theme.spacing.md};
border-radius: ${theme.border.radius.md}; border-radius: ${theme.border.radius.md};
border: ${selectThemeVariant( border: ${theme.colors.border2};
{ light: `solid 1px ${theme.palette.gray5}`, dark: `solid 1px ${theme.palette.dark1}` },
theme.type
)};
overflow-y: scroll; overflow-y: scroll;
overflow-x: hidden; overflow-x: hidden;
outline: none; outline: none;
background: ${selectThemeVariant({ light: theme.palette.white, dark: theme.palette.dark4 }, theme.type)}; background: ${theme.colors.bg2};
color: ${theme.colors.text}; color: ${theme.colors.text};
box-shadow: ${selectThemeVariant( box-shadow: 0 0 20px ${theme.colors.dropdownShadow};
{ light: `0 5px 10px 0 ${theme.palette.gray5}`, dark: `0 5px 10px 0 ${theme.palette.black}` },
theme.type
)};
visibility: ${visible === true ? 'visible' : 'hidden'}; visibility: ${visible === true ? 'visible' : 'hidden'};
width: 250px; width: 250px;
height: ${height + parseInt(theme.spacing.xxs, 10)}px; height: ${height + parseInt(theme.spacing.xxs, 10)}px;
......
packages/grafana-ui/src/components/Typeahead/TypeaheadItem.tsx
...@@ -4,7 +4,6 @@ import React, { useContext } from 'react'; ...@@ -4,7 +4,6 @@ import React, { useContext } from 'react';
import Highlighter from 'react-highlight-words'; import Highlighter from 'react-highlight-words';
import { css, cx } from 'emotion'; import { css, cx } from 'emotion';
import { GrafanaTheme } from '@grafana/data'; import { GrafanaTheme } from '@grafana/data';
import { selectThemeVariant } from '../../themes/selectThemeVariant';
import { CompletionItem, CompletionItemKind } from '../../types/completion'; import { CompletionItem, CompletionItemKind } from '../../types/completion';
import { ThemeContext } from '../../themes/ThemeContext'; import { ThemeContext } from '../../themes/ThemeContext';
...@@ -38,7 +37,7 @@ const getStyles = (theme: GrafanaTheme) => ({ ...@@ -38,7 +37,7 @@ const getStyles = (theme: GrafanaTheme) => ({
typeaheadItemSelected: css` typeaheadItemSelected: css`
label: type-ahead-item-selected; 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` typeaheadItemMatch: css`
......
packages/grafana-ui/src/components/index.ts
...@@ -129,7 +129,6 @@ export { StringArrayEditor } from './OptionsUI/strings'; ...@@ -129,7 +129,6 @@ export { StringArrayEditor } from './OptionsUI/strings';
export { NumberValueEditor } from './OptionsUI/number'; export { NumberValueEditor } from './OptionsUI/number';
export { SliderValueEditor } from './OptionsUI/slider'; export { SliderValueEditor } from './OptionsUI/slider';
export { SelectValueEditor } from './OptionsUI/select'; export { SelectValueEditor } from './OptionsUI/select';
export { FieldConfigItemHeaderTitle } from './FieldConfigs/FieldConfigItemHeaderTitle';
// Next-gen forms // Next-gen forms
export { Form } from './Forms/Form'; export { Form } from './Forms/Form';
......
packages/grafana-ui/src/utils/storybook/CombinationsRowRenderer.tsx deleted 100644 → 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);
public/sass/base/_type.scss
...@@ -24,6 +24,7 @@ small { ...@@ -24,6 +24,7 @@ small {
font-size: $font-size-sm; font-size: $font-size-sm;
} }
b,
strong { strong {
font-weight: $font-weight-semi-bold; font-weight: $font-weight-semi-bold;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment