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

packages/grafana-ui/src/components/Chart/TooltipContainer.tsx

 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};
+    `,
+  };
+});

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<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 (

packages/grafana-ui/src/components/ColorPicker/SpectrumPalettePointer.tsx

 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',

packages/grafana-ui/src/components/DataLinks/DataLinkSuggestions.tsx

-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};
-    `,
   };
 });
 

packages/grafana-ui/src/components/FieldConfigs/FieldConfigItemHeaderTitle.tsx

-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';
 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

packages/grafana-ui/src/components/Logs/LogLabelStats.tsx

@@ -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`

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;

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;

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;

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};

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

 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;

packages/grafana-ui/src/components/Typeahead/TypeaheadInfo.tsx

 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;

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`

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';

packages/grafana-ui/src/utils/storybook/CombinationsRowRenderer.tsx

-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 {
   font-size: $font-size-sm;
 }
 
+b,
 strong {
   font-weight: $font-weight-semi-bold;
 }