Selecting theme variable variant helper function

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

@@ -1,8 +1,9 @@
 import React, { FunctionComponent } from 'react';
-import { Themeable, GrafanaThemeType } from '../../types';
+import { Themeable } from '../../types';
 import { ColorDefinition, getColorForTheme } from '../../utils/namedColorsPalette';
 import { Color } from 'csstype';
 import { find, upperFirst } from 'lodash';
+import { selectThemeVariant } from '../../themes/selectThemeVariant';
 
 type ColorChangeHandler = (color: ColorDefinition) => void;
 
@@ -28,7 +29,14 @@ export const ColorSwatch: FunctionComponent<ColorSwatchProps> = ({
 }) => {
   const isSmall = variant === ColorSwatchVariant.Small;
   const swatchSize = isSmall ? '16px' : '32px';
-  const selectedSwatchBorder = theme.type === GrafanaThemeType.Light ? '#ffffff' : '#1A1B1F';
+
+  const selectedSwatchBorder = selectThemeVariant(
+    {
+      light: theme.colors.white,
+      dark: theme.colors.black,
+    },
+    theme.type
+  );
 
   const swatchStyles = {
     width: swatchSize,

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

@@ -1,14 +1,12 @@
 import React from 'react';
-import { GrafanaThemeType, Themeable } from '../../types';
+import { Themeable } from '../../types';
+import { selectThemeVariant } from '../../themes/selectThemeVariant';
 
 export interface SpectrumPalettePointerProps extends Themeable {
   direction?: string;
 }
 
-const SpectrumPalettePointer: React.FunctionComponent<SpectrumPalettePointerProps> = ({
-  theme,
-  direction,
-}) => {
+const SpectrumPalettePointer: React.FunctionComponent<SpectrumPalettePointerProps> = ({ theme, direction }) => {
   const styles = {
     picker: {
       width: '16px',
@@ -17,7 +15,14 @@ const SpectrumPalettePointer: React.FunctionComponent<SpectrumPalettePointerProp
     },
   };
 
-  const pointerColor = theme.type === GrafanaThemeType.Light ? '#3F444D' : '#8E8E8E';
+
+  const pointerColor = selectThemeVariant(
+    {
+      light: theme.colors.dark3,
+      dark: theme.colors.gray2,
+    },
+    theme.type
+  );
 
   let pointerStyles: React.CSSProperties = {
     position: 'absolute',

packages/grafana-ui/src/themes/index.d.ts

@@ -1,4 +1,4 @@
 import { GrafanaTheme } from "../types";
 
 export function getTheme(themeName?: string): GrafanaTheme
-export function mockTheme(themeMock: Partial<GrafanaTheme>): () => void
+export function mockTheme(themeMock: (name: string) => object): () => void

packages/grafana-ui/src/themes/index.js

@@ -3,7 +3,7 @@ const lightTheme = require('./light');
 
 let mockedTheme;
 
-let getTheme = name => mockedTheme || (name === 'light' ? lightTheme : darkTheme);
+let getTheme = name => (mockedTheme && mockedTheme(name)) || (name === 'light' ? lightTheme : darkTheme);
 
 const mockTheme = mock => {
   mockedTheme = mock;

packages/grafana-ui/src/themes/selectThemeVariant.test.ts

@@ -0,0 +1,51 @@
+import { GrafanaThemeType } from '../types/theme';
+import { selectThemeVariant } from './selectThemeVariant';
+import { mockTheme } from './index';
+
+const lightThemeMock = {
+  color: {
+    red: '#ff0000',
+    green: '#00ff00',
+  },
+};
+
+const darkThemeMock = {
+  color: {
+    red: '#ff0000',
+    green: '#00ff00',
+  },
+};
+
+describe('Theme variable variant selector', () => {
+  const restoreTheme = mockTheme(name => (name === GrafanaThemeType.Light ? lightThemeMock : darkThemeMock));
+
+  afterAll(() => {
+    restoreTheme();
+  });
+  it('return correct variable value for given theme', () => {
+    const theme = lightThemeMock;
+
+    const selectedValue = selectThemeVariant(
+      {
+        dark: theme.color.red,
+        light: theme.color.green,
+      },
+      GrafanaThemeType.Light
+    );
+
+    expect(selectedValue).toBe(lightThemeMock.color.green);
+  });
+
+  it('return dark theme variant if no theme given', () => {
+    const theme = lightThemeMock;
+
+    const selectedValue = selectThemeVariant(
+      {
+        dark: theme.color.red,
+        light: theme.color.green,
+      }
+    );
+
+    expect(selectedValue).toBe(lightThemeMock.color.red);
+  });
+});

packages/grafana-ui/src/themes/selectThemeVariant.ts

@@ -0,0 +1,9 @@
+import {  GrafanaThemeType } from '../types/theme';
+
+type VariantDescriptor = {
+  [key in GrafanaThemeType]: string | number;
+};
+
+export const selectThemeVariant = (variants: VariantDescriptor, currentTheme?: GrafanaThemeType) => {
+  return variants[currentTheme || GrafanaThemeType.Dark];
+};

scripts/webpack/getThemeVariable.test.js

@@ -15,7 +15,7 @@ const themeMock = {
 };
 
 describe('Variables retrieval', () => {
-  const restoreTheme = mockTheme(themeMock);
+  const restoreTheme = mockTheme(() => themeMock);
 
   afterAll(() => {
     restoreTheme();