From f081df0a4f57961e67b497d35559fd97c03a2200 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sat, 6 Feb 2021 18:01:22 +0100 Subject: [PATCH] Theme: Use higher order theme color variables rather then is light/dark logic (#30939) --- .../src/components/Chart/TooltipContainer.tsx | 30 +++--- .../ColorPicker/NamedColorsGroup.tsx | 11 +-- .../ColorPicker/SpectrumPalettePointer.tsx | 9 +- .../DataLinks/DataLinkSuggestions.tsx | 70 ++------------ .../FieldConfigItemHeaderTitle.tsx | 63 ------------- .../src/components/Icon/Icon.story.tsx | 10 +- .../src/components/Logs/LogLabelStats.tsx | 10 +- .../src/components/Logs/LogLabels.tsx | 3 +- .../src/components/Logs/LogRowContext.tsx | 44 ++------- .../src/components/Logs/LogRowMessage.tsx | 14 +-- .../components/Select/SelectOptionGroup.tsx | 11 +-- .../TimeRangePicker/TimeRangeOption.tsx | 12 +-- .../components/Typeahead/TypeaheadInfo.tsx | 14 +-- .../components/Typeahead/TypeaheadItem.tsx | 3 +- packages/grafana-ui/src/components/index.ts | 1 - .../storybook/CombinationsRowRenderer.tsx | 94 ------------------- public/sass/base/_type.scss | 1 + 17 files changed, 46 insertions(+), 354 deletions(-) delete mode 100644 packages/grafana-ui/src/components/FieldConfigs/FieldConfigItemHeaderTitle.tsx delete mode 100644 packages/grafana-ui/src/utils/storybook/CombinationsRowRenderer.tsx diff --git a/packages/grafana-ui/src/components/Chart/TooltipContainer.tsx b/packages/grafana-ui/src/components/Chart/TooltipContainer.tsx index 1e15fa4d872..3efedc5a846 100644 --- a/packages/grafana-ui/src/components/Chart/TooltipContainer.tsx +++ b/packages/grafana-ui/src/components/Chart/TooltipContainer.tsx @@ -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 { 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 = ({ position: { x: positionX, y: positionY }, offset: { x: offsetX, y: offsetY }, @@ -85,3 +69,17 @@ export const TooltipContainer: React.FC = ({ }; 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}; + `, + }; +}); diff --git a/packages/grafana-ui/src/components/ColorPicker/NamedColorsGroup.tsx b/packages/grafana-ui/src/components/ColorPicker/NamedColorsGroup.tsx index fd84b14f30b..014d2b25747 100644 --- a/packages/grafana-ui/src/components/ColorPicker/NamedColorsGroup.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/NamedColorsGroup.tsx @@ -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 = ({ 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 ( diff --git a/packages/grafana-ui/src/components/ColorPicker/SpectrumPalettePointer.tsx b/packages/grafana-ui/src/components/ColorPicker/SpectrumPalettePointer.tsx index 70250d873d5..99b76a69bd2 100644 --- a/packages/grafana-ui/src/components/ColorPicker/SpectrumPalettePointer.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/SpectrumPalettePointer.tsx @@ -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 { - 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}; - `, }; }); diff --git a/packages/grafana-ui/src/components/FieldConfigs/FieldConfigItemHeaderTitle.tsx b/packages/grafana-ui/src/components/FieldConfigs/FieldConfigItemHeaderTitle.tsx deleted file mode 100644 index 6d038c5ad8e..00000000000 --- a/packages/grafana-ui/src/components/FieldConfigs/FieldConfigItemHeaderTitle.tsx +++ /dev/null @@ -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 = ({ - title, - description, - onRemove, - children, - transparent, -}) => { - const theme = useTheme(); - const styles = getFieldConfigItemHeaderTitleStyles(theme); - return ( -
-
- -
onRemove()} aria-label="FieldConfigItemHeaderTitle remove button"> - -
-
- {children} -
- ); -}; - -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}; - `, - }; -}); diff --git a/packages/grafana-ui/src/components/Icon/Icon.story.tsx b/packages/grafana-ui/src/components/Icon/Icon.story.tsx index cc8b7c3369c..c9672473d9d 100644 --- a/packages/grafana-ui/src/components/Icon/Icon.story.tsx +++ b/packages/grafana-ui/src/components/Icon/Icon.story.tsx @@ -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 (
{ - 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` diff --git a/packages/grafana-ui/src/components/Logs/LogLabels.tsx b/packages/grafana-ui/src/components/Logs/LogLabels.tsx index c9c17ae21d7..44b149a3e27 100644 --- a/packages/grafana-ui/src/components/Logs/LogLabels.tsx +++ b/packages/grafana-ui/src/components/Logs/LogLabels.tsx @@ -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; diff --git a/packages/grafana-ui/src/components/Logs/LogRowContext.tsx b/packages/grafana-ui/src/components/Logs/LogRowContext.tsx index 985ffd67939..e635f8e212c 100644 --- a/packages/grafana-ui/src/components/Logs/LogRowContext.tsx +++ b/packages/grafana-ui/src/components/Logs/LogRowContext.tsx @@ -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; diff --git a/packages/grafana-ui/src/components/Logs/LogRowMessage.tsx b/packages/grafana-ui/src/components/Logs/LogRowMessage.tsx index 01ed886cf4a..5233d5949a1 100644 --- a/packages/grafana-ui/src/components/Logs/LogRowMessage.tsx +++ b/packages/grafana-ui/src/components/Logs/LogRowMessage.tsx @@ -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; diff --git a/packages/grafana-ui/src/components/Select/SelectOptionGroup.tsx b/packages/grafana-ui/src/components/Select/SelectOptionGroup.tsx index 2e86bd184cc..4afc7e42e1a 100644 --- a/packages/grafana-ui/src/components/Select/SelectOptionGroup.tsx +++ b/packages/grafana-ui/src/components/Select/SelectOptionGroup.tsx @@ -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}; diff --git a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimeRangeOption.tsx b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimeRangeOption.tsx index 726d6dca7ad..b245174ca49 100644 --- a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimeRangeOption.tsx +++ b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimeRangeOption.tsx @@ -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; diff --git a/packages/grafana-ui/src/components/Typeahead/TypeaheadInfo.tsx b/packages/grafana-ui/src/components/Typeahead/TypeaheadInfo.tsx index aa1f523542a..c63e3ce6964 100644 --- a/packages/grafana-ui/src/components/Typeahead/TypeaheadInfo.tsx +++ b/packages/grafana-ui/src/components/Typeahead/TypeaheadInfo.tsx @@ -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; diff --git a/packages/grafana-ui/src/components/Typeahead/TypeaheadItem.tsx b/packages/grafana-ui/src/components/Typeahead/TypeaheadItem.tsx index 3afec001c76..e4b20b0ca33 100644 --- a/packages/grafana-ui/src/components/Typeahead/TypeaheadItem.tsx +++ b/packages/grafana-ui/src/components/Typeahead/TypeaheadItem.tsx @@ -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` diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts index 126587861b6..f6847e493a3 100644 --- a/packages/grafana-ui/src/components/index.ts +++ b/packages/grafana-ui/src/components/index.ts @@ -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'; diff --git a/packages/grafana-ui/src/utils/storybook/CombinationsRowRenderer.tsx b/packages/grafana-ui/src/utils/storybook/CombinationsRowRenderer.tsx deleted file mode 100644 index 00d77c4d2e4..00000000000 --- a/packages/grafana-ui/src/utils/storybook/CombinationsRowRenderer.tsx +++ /dev/null @@ -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 ( -
    -
  • - {Object.keys(props).map((key, i) => { - return ( -
  • - {key}: {props[key]} -
    • - ); - })} - -
- ); -}; - -interface CombinationsRowRendererProps extends Themeable { - Component: React.ComponentType; - props: any; - options: any; -} - -const CombinationsRowRenderer: React.FunctionComponent = ({ - 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 ( -
-
{el}
-
{detailsRenderer(props)}
-
- {prettyFormat(el, { - plugins: [prettyFormat.plugins.ReactElement], - printFunctionName: true, - })} -
-
- ); -}; - -export const ThemeableCombinationsRowRenderer = withTheme(CombinationsRowRenderer); diff --git a/public/sass/base/_type.scss b/public/sass/base/_type.scss index 0407c059215..3ecb80d49ab 100644 --- a/public/sass/base/_type.scss +++ b/public/sass/base/_type.scss @@ -24,6 +24,7 @@ small { font-size: $font-size-sm; } +b, strong { font-weight: $font-weight-semi-bold; }