Merge pull request #15099 from grafana/tooling/storybook-poc

Named colors & storybook

packages/grafana-ui/.storybook/addons.ts

@@ -0,0 +1,2 @@
+import '@storybook/addon-knobs/register';
+import '@storybook/addon-actions/register';

packages/grafana-ui/.storybook/config.ts

@@ -0,0 +1,12 @@
+import { configure } from '@storybook/react';
+
+import '../../../public/sass/grafana.light.scss';
+
+// automatically import all files ending in *.stories.tsx
+const req = require.context('../src/components', true, /.story.tsx$/);
+
+function loadStories() {
+  req.keys().forEach(req);
+}
+
+configure(loadStories, module);

packages/grafana-ui/.storybook/webpack.config.js

@@ -0,0 +1,56 @@
+const path = require('path');
+
+module.exports = (baseConfig, env, config) => {
+
+  config.module.rules.push({
+    test: /\.(ts|tsx)$/,
+    use: [
+      {
+        loader: require.resolve('awesome-typescript-loader'),
+      },
+    ],
+  });
+
+  config.module.rules.push({
+    test: /\.scss$/,
+    use: [
+      {
+        loader: 'style-loader',
+      },
+      {
+        loader: 'css-loader',
+        options: {
+          importLoaders: 2,
+          url: false,
+          sourceMap: false,
+          minimize: false,
+        },
+      },
+      {
+        loader: 'postcss-loader',
+        options: {
+          sourceMap: false,
+          config: { path: __dirname + '../../../../scripts/webpack/postcss.config.js' },
+        },
+      },
+      { loader: 'sass-loader', options: { sourceMap: false } },
+    ],
+  });
+
+  config.module.rules.push({
+    test: require.resolve('jquery'),
+    use: [
+      {
+        loader: 'expose-loader',
+        query: 'jQuery',
+      },
+      {
+        loader: 'expose-loader',
+        query: '$',
+      },
+    ],
+  });
+
+  config.resolve.extensions.push('.ts', '.tsx');
+  return config;
+};

packages/grafana-ui/package.json

@@ -5,19 +5,20 @@
   "main": "src/index.ts",
   "scripts": {
     "tslint": "tslint -c tslint.json --project tsconfig.json",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "storybook": "start-storybook -p 9001 -c .storybook -s ../../public"
   },
   "author": "",
   "license": "ISC",
   "dependencies": {
     "@torkelo/react-select": "2.1.1",
-    "@types/react-test-renderer": "^16.0.3",
+    "@types/react-color": "^2.14.0",
-    "@types/react-transition-group": "^2.0.15",
     "classnames": "^2.2.5",
     "jquery": "^3.2.1",
     "lodash": "^4.17.10",
     "moment": "^2.22.2",
     "react": "^16.6.3",
+    "react-color": "^2.17.0",
     "react-custom-scrollbars": "^4.2.1",
     "react-dom": "^16.6.3",
     "react-highlight-words": "0.11.0",
@@ -29,16 +30,32 @@
     "tinycolor2": "^1.4.1"
   },
   "devDependencies": {
+    "@storybook/addon-actions": "^4.1.7",
+    "@storybook/addon-info": "^4.1.6",
+    "@storybook/addon-knobs": "^4.1.7",
+    "@storybook/react": "^4.1.4",
     "@types/classnames": "^2.2.6",
     "@types/jest": "^23.3.2",
     "@types/jquery": "^1.10.35",
     "@types/lodash": "^4.14.119",
+    "@types/node": "^10.12.18",
     "@types/react": "^16.7.6",
     "@types/react-custom-scrollbars": "^4.0.5",
     "@types/react-test-renderer": "^16.0.3",
+    "@types/react-transition-group": "^2.0.15",
+    "@types/storybook__addon-actions": "^3.4.1",
+    "@types/storybook__addon-info": "^3.4.2",
+    "@types/storybook__addon-knobs": "^4.0.0",
+    "@types/storybook__react": "^4.0.0",
     "@types/tether-drop": "^1.4.8",
     "@types/tinycolor2": "^1.4.1",
+    "awesome-typescript-loader": "^5.2.1",
+    "react-docgen-typescript-loader": "^3.0.0",
+    "react-docgen-typescript-webpack-plugin": "^1.1.0",
     "react-test-renderer": "^16.7.0",
     "typescript": "^3.2.2"
+  },
+  "resolutions": {
+    "@types/lodash": "4.14.119"
   }
 }

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

@@ -0,0 +1,94 @@
+import React from 'react';
+import { ColorPickerProps } from './ColorPicker';
+import tinycolor from 'tinycolor2';
+import { debounce } from 'lodash';
+
+interface ColorInputState {
+  previousColor: string;
+  value: string;
+}
+
+interface ColorInputProps extends ColorPickerProps {
+  style?: React.CSSProperties;
+}
+
+class ColorInput extends React.PureComponent<ColorInputProps, ColorInputState> {
+  constructor(props: ColorInputProps) {
+    super(props);
+    this.state = {
+      previousColor: props.color,
+      value: props.color,
+    };
+
+    this.updateColor = debounce(this.updateColor, 100);
+  }
+
+  static getDerivedStateFromProps(props: ColorPickerProps, state: ColorInputState) {
+    const newColor = tinycolor(props.color);
+    if (newColor.isValid() && props.color !== state.previousColor) {
+      return {
+        ...state,
+        previousColor: props.color,
+        value: newColor.toString(),
+      };
+    }
+
+    return state;
+  }
+  updateColor = (color: string) => {
+    this.props.onChange(color);
+  };
+
+  handleChange = (event: React.SyntheticEvent<HTMLInputElement>) => {
+    const newColor = tinycolor(event.currentTarget.value);
+
+    this.setState({
+      value: event.currentTarget.value,
+    });
+
+    if (newColor.isValid()) {
+      this.updateColor(newColor.toString());
+    }
+  };
+
+  handleBlur = () => {
+    const newColor = tinycolor(this.state.value);
+
+    if (!newColor.isValid()) {
+      this.setState({
+        value: this.props.color,
+      });
+    }
+  };
+
+  render() {
+    const { value } = this.state;
+    return (
+      <div
+        style={{
+          display: 'flex',
+          ...this.props.style,
+        }}
+      >
+        <div
+          style={{
+            background: this.props.color,
+            width: '35px',
+            height: '35px',
+            flexGrow: 0,
+            borderRadius: '3px 0 0 3px',
+          }}
+        />
+        <div
+          style={{
+            flexGrow: 1,
+          }}
+        >
+          <input className="gf-form-input" value={value} onChange={this.handleChange} onBlur={this.handleBlur} />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default ColorInput;

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

@@ -0,0 +1,63 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs, boolean } from '@storybook/addon-knobs';
+import { SeriesColorPicker, ColorPicker } from './ColorPicker';
+import { action } from '@storybook/addon-actions';
+import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
+import { UseState } from '../../utils/storybook/UseState';
+import { getThemeKnob } from '../../utils/storybook/themeKnob';
+
+const getColorPickerKnobs = () => {
+  return {
+    selectedTheme: getThemeKnob(),
+    enableNamedColors: boolean('Enable named colors', false),
+  };
+};
+
+const ColorPickerStories = storiesOf('UI/ColorPicker/Pickers', module);
+
+ColorPickerStories.addDecorator(withCenteredStory).addDecorator(withKnobs);
+
+ColorPickerStories.add('default', () => {
+  const { selectedTheme, enableNamedColors } = getColorPickerKnobs();
+  return (
+    <UseState initialState="#00ff00">
+      {(selectedColor, updateSelectedColor) => {
+        return (
+          <ColorPicker
+            enableNamedColors={enableNamedColors}
+            color={selectedColor}
+            onChange={color => {
+              action('Color changed')(color);
+              updateSelectedColor(color);
+            }}
+            theme={selectedTheme || undefined}
+          />
+        );
+      }}
+    </UseState>
+  );
+});
+
+ColorPickerStories.add('Series color picker', () => {
+  const { selectedTheme, enableNamedColors } = getColorPickerKnobs();
+
+  return (
+    <UseState initialState="#00ff00">
+      {(selectedColor, updateSelectedColor) => {
+        return (
+          <SeriesColorPicker
+            enableNamedColors={enableNamedColors}
+            yaxis={1}
+            onToggleAxis={() => {}}
+            color={selectedColor}
+            onChange={color => updateSelectedColor(color)}
+            theme={selectedTheme || undefined}
+          >
+            <div style={{ color: selectedColor, cursor: 'pointer' }}>Open color picker</div>
+          </SeriesColorPicker>
+        );
+      }}
+    </UseState>
+  );
+});

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

@@ -1,61 +1,114 @@
-import React from 'react';
+import React, { Component, createRef } from 'react';
-import ReactDOM from 'react-dom';
+import PopperController from '../Tooltip/PopperController';
-import Drop from 'tether-drop';
+import Popper, { RenderPopperArrowFn } from '../Tooltip/Popper';
 import { ColorPickerPopover } from './ColorPickerPopover';
+import { Themeable, GrafanaTheme } from '../../types';
+import { getColorFromHexRgbOrName } from '../../utils/namedColorsPalette';
+import { SeriesColorPickerPopover } from './SeriesColorPickerPopover';
+import propDeprecationWarning from '../../utils/propDeprecationWarning';
 
-export interface Props {
+type ColorPickerChangeHandler = (color: string) => void;
+
+export interface ColorPickerProps extends Themeable {
   color: string;
-  onChange: (c: string) => void;
+  onChange: ColorPickerChangeHandler;
+
+  /**
+   * @deprecated Use onChange instead
+   */
+  onColorChange?: ColorPickerChangeHandler;
+  enableNamedColors?: boolean;
+  withArrow?: boolean;
+  children?: JSX.Element;
 }
 
-export class ColorPicker extends React.Component<Props, any> {
+export const warnAboutColorPickerPropsDeprecation = (componentName: string, props: ColorPickerProps) => {
-  pickerElem: HTMLElement | null;
+  const { onColorChange } = props;
-  colorPickerDrop: any;
+  if (onColorChange) {
-
+    propDeprecationWarning(componentName, 'onColorChange', 'onChange');
-  openColorPicker = () => {
-    const dropContent = <ColorPickerPopover color={this.props.color} onColorSelect={this.onColorSelect} />;
-
-    const dropContentElem = document.createElement('div');
-    ReactDOM.render(dropContent, dropContentElem);
-
-    const drop = new Drop({
-      target: this.pickerElem as Element,
-      content: dropContentElem,
-      position: 'top center',
-      classes: 'drop-popover',
-      openOn: 'click',
-      hoverCloseDelay: 200,
-      tetherOptions: {
-        constraints: [{ to: 'scrollParent', attachment: 'none both' }],
-        attachment: 'bottom center',
-      },
-    });
-
-    drop.on('close', this.closeColorPicker);
-
-    this.colorPickerDrop = drop;
-    this.colorPickerDrop.open();
-  };
-
-  closeColorPicker = () => {
-    setTimeout(() => {
-      if (this.colorPickerDrop && this.colorPickerDrop.tether) {
-        this.colorPickerDrop.destroy();
   }
-    }, 100);
+};
-  };
 
-  onColorSelect = (color: string) => {
+export const colorPickerFactory = <T extends ColorPickerProps>(
-    this.props.onChange(color);
+  popover: React.ComponentType<T>,
+  displayName = 'ColorPicker',
+  renderPopoverArrowFunction?: RenderPopperArrowFn
+) => {
+  return class ColorPicker extends Component<T, any> {
+    static displayName = displayName;
+    pickerTriggerRef = createRef<HTMLDivElement>();
+
+    handleColorChange = (color: string) => {
+      const { onColorChange, onChange } = this.props;
+      const changeHandler = (onColorChange || onChange) as ColorPickerChangeHandler;
+
+      return changeHandler(color);
     };
 
     render() {
+      const popoverElement = React.createElement(popover, {
+        ...this.props,
+        onChange: this.handleColorChange,
+      });
+      const { theme, withArrow, children } = this.props;
+
+      const renderArrow: RenderPopperArrowFn = ({ arrowProps, placement }) => {
         return (
-      <div className="sp-replacer sp-light" onClick={this.openColorPicker} ref={element => (this.pickerElem = element)}>
+          <div
+            {...arrowProps}
+            data-placement={placement}
+            className={`ColorPicker__arrow ColorPicker__arrow--${theme === GrafanaTheme.Light ? 'light' : 'dark'}`}
+          />
+        );
+      };
+
+      return (
+        <PopperController content={popoverElement} hideAfter={300}>
+          {(showPopper, hidePopper, popperProps) => {
+            return (
+              <>
+                {this.pickerTriggerRef.current && (
+                  <Popper
+                    {...popperProps}
+                    referenceElement={this.pickerTriggerRef.current}
+                    wrapperClassName="ColorPicker"
+                    renderArrow={withArrow && (renderPopoverArrowFunction || renderArrow)}
+                    onMouseLeave={hidePopper}
+                    onMouseEnter={showPopper}
+                  />
+                )}
+
+                {children ? (
+                  React.cloneElement(children as JSX.Element, {
+                    ref: this.pickerTriggerRef,
+                    onClick: showPopper,
+                    onMouseLeave: hidePopper,
+                  })
+                ) : (
+                  <div
+                    ref={this.pickerTriggerRef}
+                    onClick={showPopper}
+                    onMouseLeave={hidePopper}
+                    className="sp-replacer sp-light"
+                  >
                     <div className="sp-preview">
-          <div className="sp-preview-inner" style={{ backgroundColor: this.props.color }} />
+                      <div
+                        className="sp-preview-inner"
+                        style={{
+                          backgroundColor: getColorFromHexRgbOrName(this.props.color || '#000000', theme),
+                        }}
+                      />
                     </div>
                   </div>
+                )}
+              </>
+            );
+          }}
+        </PopperController>
       );
     }
-}
+  };
+};
+
+export const ColorPicker = colorPickerFactory(ColorPickerPopover, 'ColorPicker');
+export const SeriesColorPicker = colorPickerFactory(SeriesColorPickerPopover, 'SeriesColorPicker');

packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.story.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { ColorPickerPopover } from './ColorPickerPopover';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
+import { getThemeKnob } from '../../utils/storybook/themeKnob';
+import { SeriesColorPickerPopover } from './SeriesColorPickerPopover';
+
+const ColorPickerPopoverStories = storiesOf('UI/ColorPicker/Popovers', module);
+
+ColorPickerPopoverStories.addDecorator(withCenteredStory).addDecorator(withKnobs);
+
+ColorPickerPopoverStories.add('default', () => {
+  const selectedTheme = getThemeKnob();
+
+  return (
+    <ColorPickerPopover
+      color="#BC67E6"
+      onChange={color => {
+        console.log(color);
+      }}
+      theme={selectedTheme || undefined}
+    />
+  );
+});
+
+ColorPickerPopoverStories.add('SeriesColorPickerPopover', () => {
+  const selectedTheme = getThemeKnob();
+
+  return (
+    <SeriesColorPickerPopover
+      color="#BC67E6"
+      onChange={color => {
+        console.log(color);
+      }}
+      theme={selectedTheme || undefined}
+    />
+  );
+});

packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.test.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { mount, ReactWrapper } from 'enzyme';
+import { ColorPickerPopover } from './ColorPickerPopover';
+import { getColorDefinitionByName, getNamedColorPalette } from '../../utils/namedColorsPalette';
+import { ColorSwatch } from './NamedColorsGroup';
+import { flatten } from 'lodash';
+import { GrafanaTheme } from '../../types';
+
+const allColors = flatten(Array.from(getNamedColorPalette().values()));
+
+describe('ColorPickerPopover', () => {
+  const BasicGreen = getColorDefinitionByName('green');
+  const BasicBlue = getColorDefinitionByName('blue');
+
+  describe('rendering', () => {
+    it('should render provided color as selected if color provided by name', () => {
+      const wrapper = mount(<ColorPickerPopover color={BasicGreen.name} onChange={() => {}} />);
+      const selectedSwatch = wrapper.find(ColorSwatch).findWhere(node => node.key() === BasicGreen.name);
+      const notSelectedSwatches = wrapper.find(ColorSwatch).filterWhere(node => node.prop('isSelected') === false);
+
+      expect(selectedSwatch.length).toBe(1);
+      expect(notSelectedSwatches.length).toBe(allColors.length - 1);
+      expect(selectedSwatch.prop('isSelected')).toBe(true);
+    });
+
+    it('should render provided color as selected if color provided by hex', () => {
+      const wrapper = mount(<ColorPickerPopover color={BasicGreen.variants.dark} onChange={() => {}} />);
+      const selectedSwatch = wrapper.find(ColorSwatch).findWhere(node => node.key() === BasicGreen.name);
+      const notSelectedSwatches = wrapper.find(ColorSwatch).filterWhere(node => node.prop('isSelected') === false);
+
+      expect(selectedSwatch.length).toBe(1);
+      expect(notSelectedSwatches.length).toBe(allColors.length - 1);
+      expect(selectedSwatch.prop('isSelected')).toBe(true);
+    });
+  });
+
+  describe('named colors support', () => {
+    const onChangeSpy = jest.fn();
+    let wrapper: ReactWrapper;
+
+    afterEach(() => {
+      wrapper.unmount();
+      onChangeSpy.mockClear();
+    });
+
+    it('should pass hex color value to onChange prop by default', () => {
+      wrapper = mount(
+        <ColorPickerPopover color={BasicGreen.variants.dark} onChange={onChangeSpy} theme={GrafanaTheme.Light} />
+      );
+      const basicBlueSwatch = wrapper.find(ColorSwatch).findWhere(node => node.key() === BasicBlue.name);
+
+      basicBlueSwatch.simulate('click');
+
+      expect(onChangeSpy).toBeCalledTimes(1);
+      expect(onChangeSpy).toBeCalledWith(BasicBlue.variants.light);
+    });
+
+    it('should pass color name to onChange prop when named colors enabled', () => {
+      wrapper = mount(
+        <ColorPickerPopover
+          enableNamedColors
+          color={BasicGreen.variants.dark}
+          onChange={onChangeSpy}
+          theme={GrafanaTheme.Light}
+        />
+      );
+      const basicBlueSwatch = wrapper.find(ColorSwatch).findWhere(node => node.key() === BasicBlue.name);
+
+      basicBlueSwatch.simulate('click');
+
+      expect(onChangeSpy).toBeCalledTimes(1);
+      expect(onChangeSpy).toBeCalledWith(BasicBlue.name);
+    });
+  });
+});

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

@@ -1,112 +1,129 @@
 import React from 'react';
-import $ from 'jquery';
+import { NamedColorsPalette } from './NamedColorsPalette';
-import tinycolor from 'tinycolor2';
+import { getColorName, getColorFromHexRgbOrName } from '../../utils/namedColorsPalette';
-import { ColorPalette } from './ColorPalette';
+import { ColorPickerProps, warnAboutColorPickerPropsDeprecation } from './ColorPicker';
-import { SpectrumPicker } from './SpectrumPicker';
+import { GrafanaTheme } from '../../types';
+import { PopperContentProps } from '../Tooltip/PopperController';
+import SpectrumPalette from './SpectrumPalette';
 
-const DEFAULT_COLOR = '#000000';
+export interface Props<T> extends ColorPickerProps, PopperContentProps {
-
+  customPickers?: T;
-export interface Props {
-  color: string;
-  onColorSelect: (c: string) => void;
 }
 
-export class ColorPickerPopover extends React.Component<Props, any> {
+type PickerType = 'palette' | 'spectrum';
-  pickerNavElem: any;
 
-  constructor(props: Props) {
+interface CustomPickersDescriptor {
+  [key: string]: {
+    tabComponent: React.ComponentType<ColorPickerProps>;
+    name: string;
+  };
+}
+interface State<T> {
+  activePicker: PickerType | keyof T;
+}
+
+export class ColorPickerPopover<T extends CustomPickersDescriptor> extends React.Component<Props<T>, State<T>> {
+  constructor(props: Props<T>) {
     super(props);
     this.state = {
-      tab: 'palette',
+      activePicker: 'palette',
-      color: this.props.color || DEFAULT_COLOR,
-      colorString: this.props.color || DEFAULT_COLOR,
     };
+    warnAboutColorPickerPropsDeprecation('ColorPickerPopover', props);
   }
 
-  setPickerNavElem(elem: any) {
+  getTabClassName = (tabName: PickerType | keyof T) => {
-    this.pickerNavElem = $(elem);
+    const { activePicker } = this.state;
+    return `ColorPickerPopover__tab ${activePicker === tabName && 'ColorPickerPopover__tab--active'}`;
+  };
+
+  handleChange = (color: any) => {
+    const { onColorChange, onChange, enableNamedColors, theme } = this.props;
+    const changeHandler = onColorChange || onChange;
+
+    if (enableNamedColors) {
+      return changeHandler(color);
+    }
+    changeHandler(getColorFromHexRgbOrName(color, theme));
+  };
+
+  handleTabChange = (tab: PickerType | keyof T) => {
+    return () => this.setState({ activePicker: tab });
+  };
+
+  renderPicker = () => {
+    const { activePicker } = this.state;
+    const { color, theme } = this.props;
+
+    switch (activePicker) {
+      case 'spectrum':
+        return <SpectrumPalette color={color} onChange={this.handleChange} theme={theme} />;
+      case 'palette':
+        return <NamedColorsPalette color={getColorName(color, theme)} onChange={this.handleChange} theme={theme} />;
+      default:
+        return this.renderCustomPicker(activePicker);
+    }
+  };
+
+  renderCustomPicker = (tabKey: keyof T) => {
+    const { customPickers, color, theme } = this.props;
+    if (!customPickers) {
+      return null;
     }
 
-  setColor(color: string) {
+    return React.createElement(customPickers[tabKey].tabComponent, {
-    const newColor = tinycolor(color);
+      color,
-    if (newColor.isValid()) {
+      theme,
-      this.setState({ color: newColor.toString(), colorString: newColor.toString() });
+      onChange: this.handleChange,
-      this.props.onColorSelect(color);
-    }
-  }
-
-  sampleColorSelected(color: string) {
-    this.setColor(color);
-  }
-
-  spectrumColorSelected(color: any) {
-    const rgbColor = color.toRgbString();
-    this.setColor(rgbColor);
-  }
-
-  onColorStringChange(e: any) {
-    const colorString = e.target.value;
-    this.setState({ colorString: colorString });
-
-    const newColor = tinycolor(colorString);
-    if (newColor.isValid()) {
-      // Update only color state
-      const newColorString = newColor.toString();
-      this.setState({ color: newColorString });
-      this.props.onColorSelect(newColorString);
-    }
-  }
-
-  onColorStringBlur(e: any) {
-    const colorString = e.target.value;
-    this.setColor(colorString);
-  }
-
-  componentDidMount() {
-    this.pickerNavElem.find('li:first').addClass('active');
-    this.pickerNavElem.on('show', (e: any) => {
-      // use href attr (#name => name)
-      const tab = e.target.hash.slice(1);
-      this.setState({ tab: tab });
     });
-  }
+  };
 
-  render() {
+  renderCustomPickerTabs = () => {
-    const paletteTab = (
+    const { customPickers } = this.props;
-      <div id="palette">
+
-        <ColorPalette color={this.state.color} onColorSelect={this.sampleColorSelected.bind(this)} />
+    if (!customPickers) {
-      </div>
+      return null;
-    );
+    }
-    const spectrumTab = (
-      <div id="spectrum">
-        <SpectrumPicker color={this.state.color} onColorSelect={this.spectrumColorSelected.bind(this)} options={{}} />
-      </div>
-    );
-    const currentTab = this.state.tab === 'palette' ? paletteTab : spectrumTab;
 
     return (
-      <div className="gf-color-picker">
+      <>
-        <ul className="nav nav-tabs" id="colorpickernav" ref={this.setPickerNavElem.bind(this)}>
+        {Object.keys(customPickers).map(key => {
-          <li className="gf-tabs-item-colorpicker">
+          return (
-            <a href="#palette" data-toggle="tab">
+            <div
-              Colors
+              className={this.getTabClassName(key)}
-            </a>
+              onClick={this.handleTabChange(key)}
-          </li>
+              key={key}
-          <li className="gf-tabs-item-colorpicker">
+            >
-            <a href="#spectrum" data-toggle="tab">
+              {customPickers[key].name}
-              Custom
-            </a>
-          </li>
-        </ul>
-        <div className="gf-color-picker__body">{currentTab}</div>
-        <div>
-          <input
-            className="gf-form-input gf-form-input--small"
-            value={this.state.colorString}
-            onChange={this.onColorStringChange.bind(this)}
-            onBlur={this.onColorStringBlur.bind(this)}
-          />
             </div>
+          );
+        })}
+      </>
+    );
+  };
+
+  render() {
+    const { theme } = this.props;
+    const colorPickerTheme = theme || GrafanaTheme.Dark;
+
+    return (
+      <div className={`ColorPickerPopover ColorPickerPopover--${colorPickerTheme}`}>
+        <div className="ColorPickerPopover__tabs">
+          <div
+            className={this.getTabClassName('palette')}
+            onClick={this.handleTabChange('palette')}
+          >
+            Colors
+          </div>
+          <div
+            className={this.getTabClassName('spectrum')}
+            onClick={this.handleTabChange('spectrum')}
+          >
+            Custom
+          </div>
+          {this.renderCustomPickerTabs()}
+        </div>
+
+        <div className="ColorPickerPopover__content">{this.renderPicker()}</div>
       </div>
     );
   }

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

@@ -0,0 +1,110 @@
+import React, { FunctionComponent } from 'react';
+import { Themeable, GrafanaTheme } from '../../types';
+import { ColorDefinition, getColorForTheme } from '../../utils/namedColorsPalette';
+import { Color } from 'csstype';
+import { find, upperFirst } from 'lodash';
+
+type ColorChangeHandler = (color: ColorDefinition) => void;
+
+export enum ColorSwatchVariant {
+  Small = 'small',
+  Large = 'large',
+}
+
+interface ColorSwatchProps extends Themeable, React.DOMAttributes<HTMLDivElement> {
+  color: string;
+  label?: string;
+  variant?: ColorSwatchVariant;
+  isSelected?: boolean;
+}
+
+export const ColorSwatch: FunctionComponent<ColorSwatchProps> = ({
+  color,
+  label,
+  variant = ColorSwatchVariant.Small,
+  isSelected,
+  theme,
+  ...otherProps
+}) => {
+  const isSmall = variant === ColorSwatchVariant.Small;
+  const swatchSize = isSmall ? '16px' : '32px';
+  const selectedSwatchBorder = theme === GrafanaTheme.Light ? '#ffffff' : '#1A1B1F';
+  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',
+  };
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        cursor: 'pointer',
+      }}
+      {...otherProps}
+    >
+      <div style={swatchStyles} />
+      {variant === ColorSwatchVariant.Large && <span>{label}</span>}
+    </div>
+  );
+};
+
+interface NamedColorsGroupProps extends Themeable {
+  colors: ColorDefinition[];
+  selectedColor?: Color;
+  onColorSelect: ColorChangeHandler;
+  key?: string;
+}
+
+const NamedColorsGroup: FunctionComponent<NamedColorsGroupProps> = ({
+  colors,
+  selectedColor,
+  onColorSelect,
+  theme,
+  ...otherProps
+}) => {
+  const primaryColor = find(colors, color => !!color.isPrimary);
+
+  return (
+    <div {...otherProps} style={{ display: 'flex', flexDirection: 'column' }}>
+      {primaryColor && (
+        <ColorSwatch
+          key={primaryColor.name}
+          isSelected={primaryColor.name === selectedColor}
+          variant={ColorSwatchVariant.Large}
+          color={getColorForTheme(primaryColor, theme)}
+          label={upperFirst(primaryColor.hue)}
+          onClick={() => onColorSelect(primaryColor)}
+          theme={theme}
+        />
+      )}
+      <div
+        style={{
+          display: 'flex',
+          marginTop: '8px',
+        }}
+      >
+        {colors.map(
+          color =>
+            !color.isPrimary && (
+              <div key={color.name} style={{ marginRight: '4px' }}>
+                <ColorSwatch
+                  key={color.name}
+                  isSelected={color.name === selectedColor}
+                  color={getColorForTheme(color, theme)}
+                  onClick={() => onColorSelect(color)}
+                  theme={theme}
+                />
+              </div>
+            )
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default NamedColorsGroup;

packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.story.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { NamedColorsPalette } from './NamedColorsPalette';
+import { getColorName, getColorDefinitionByName } from '../../utils/namedColorsPalette';
+import { withKnobs, select } from '@storybook/addon-knobs';
+import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
+import { UseState } from '../../utils/storybook/UseState';
+
+const BasicGreen = getColorDefinitionByName('green');
+const BasicBlue = getColorDefinitionByName('blue');
+const LightBlue = getColorDefinitionByName('light-blue');
+
+const NamedColorsPaletteStories = storiesOf('UI/ColorPicker/Palettes/NamedColorsPalette', module);
+
+NamedColorsPaletteStories.addDecorator(withKnobs).addDecorator(withCenteredStory);
+
+NamedColorsPaletteStories.add('Named colors swatch - support for named colors', () => {
+  const selectedColor = select(
+    'Selected color',
+    {
+      Green: 'green',
+      Red: 'red',
+      'Light blue': 'light-blue',
+    },
+    'red'
+  );
+
+  return (
+    <UseState initialState={selectedColor}>
+      {(selectedColor, updateSelectedColor) => {
+        return <NamedColorsPalette color={selectedColor} onChange={updateSelectedColor} />;
+      }}
+    </UseState>
+  );
+}).add('Named colors swatch - support for hex values', () => {
+  const selectedColor = select(
+    'Selected color',
+    {
+      Green: BasicGreen.variants.dark,
+      Red: BasicBlue.variants.dark,
+      'Light blue': LightBlue.variants.dark,
+    },
+    'red'
+  );
+  return (
+    <UseState initialState={selectedColor}>
+      {(selectedColor, updateSelectedColor) => {
+        return <NamedColorsPalette color={getColorName(selectedColor)} onChange={updateSelectedColor} />;
+      }}
+    </UseState>
+  );
+});

packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.test.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { mount, ReactWrapper } from 'enzyme';
+import { NamedColorsPalette } from './NamedColorsPalette';
+import { ColorSwatch } from './NamedColorsGroup';
+import { getColorDefinitionByName } from '../../utils';
+import { GrafanaTheme } from '../../types';
+
+describe('NamedColorsPalette', () => {
+
+  const BasicGreen = getColorDefinitionByName('green');
+
+  describe('theme support for named colors', () => {
+    let wrapper: ReactWrapper, selectedSwatch;
+
+    afterEach(() => {
+      wrapper.unmount();
+    });
+
+    it('should render provided color variant specific for theme', () => {
+      wrapper = mount(<NamedColorsPalette color={BasicGreen.name} theme={GrafanaTheme.Dark} onChange={() => {}} />);
+      selectedSwatch = wrapper.find(ColorSwatch).findWhere(node => node.key() === BasicGreen.name);
+      expect(selectedSwatch.prop('color')).toBe(BasicGreen.variants.dark);
+
+      wrapper.unmount();
+      wrapper = mount(<NamedColorsPalette color={BasicGreen.name} theme={GrafanaTheme.Light} onChange={() => {}} />);
+      selectedSwatch = wrapper.find(ColorSwatch).findWhere(node => node.key() === BasicGreen.name);
+      expect(selectedSwatch.prop('color')).toBe(BasicGreen.variants.light);
+    });
+
+    it('should render dar variant of provided color when theme not provided', () => {
+      wrapper = mount(<NamedColorsPalette color={BasicGreen.name} onChange={() => {}} />);
+      selectedSwatch = wrapper.find(ColorSwatch).findWhere(node => node.key() === BasicGreen.name);
+      expect(selectedSwatch.prop('color')).toBe(BasicGreen.variants.dark);
+    });
+  });
+});

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Color, getNamedColorPalette } from '../../utils/namedColorsPalette';
+import { Themeable } from '../../types/index';
+import NamedColorsGroup from './NamedColorsGroup';
+
+interface NamedColorsPaletteProps extends Themeable {
+  color?: Color;
+  onChange: (colorName: string) => void;
+}
+
+export const NamedColorsPalette = ({ color, onChange, theme }: NamedColorsPaletteProps) => {
+  const swatches: JSX.Element[] = [];
+  getNamedColorPalette().forEach((colors, hue) => {
+    swatches.push(
+      <NamedColorsGroup
+        key={hue}
+        theme={theme}
+        selectedColor={color}
+        colors={colors}
+        onColorSelect={color => {
+          onChange(color.name);
+        }}
+      />
+    );
+  });
+
+  return (
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(3, 1fr)',
+        gridRowGap: '24px',
+        gridColumnGap: '24px',
+      }}
+    >
+      {swatches}
+    </div>
+  );
+};

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

@@ -1,85 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import Drop from 'tether-drop';
-import { SeriesColorPickerPopover } from './SeriesColorPickerPopover';
-
-export interface SeriesColorPickerProps {
-  color: string;
-  yaxis?: number;
-  optionalClass?: string;
-  onColorChange: (newColor: string) => void;
-  onToggleAxis?: () => void;
-}
-
-export class SeriesColorPicker extends React.Component<SeriesColorPickerProps> {
-  pickerElem: any;
-  colorPickerDrop: any;
-
-  static defaultProps = {
-    optionalClass: '',
-    yaxis: undefined,
-    onToggleAxis: () => {},
-  };
-
-  constructor(props: SeriesColorPickerProps) {
-    super(props);
-  }
-
-  componentWillUnmount() {
-    this.destroyDrop();
-  }
-
-  onClickToOpen = () => {
-    if (this.colorPickerDrop) {
-      this.destroyDrop();
-    }
-
-    const { color, yaxis, onColorChange, onToggleAxis } = this.props;
-    const dropContent = (
-      <SeriesColorPickerPopover color={color} yaxis={yaxis} onColorChange={onColorChange} onToggleAxis={onToggleAxis} />
-    );
-    const dropContentElem = document.createElement('div');
-    ReactDOM.render(dropContent, dropContentElem);
-
-    const drop = new Drop({
-      target: this.pickerElem,
-      content: dropContentElem,
-      position: 'bottom center',
-      classes: 'drop-popover',
-      openOn: 'hover',
-      hoverCloseDelay: 200,
-      remove: true,
-      tetherOptions: {
-        constraints: [{ to: 'scrollParent', attachment: 'none both' }],
-        attachment: 'bottom center',
-      },
-    });
-
-    drop.on('close', this.closeColorPicker.bind(this));
-
-    this.colorPickerDrop = drop;
-    this.colorPickerDrop.open();
-  };
-
-  closeColorPicker() {
-    setTimeout(() => {
-      this.destroyDrop();
-    }, 100);
-  }
-
-  destroyDrop() {
-    if (this.colorPickerDrop && this.colorPickerDrop.tether) {
-      this.colorPickerDrop.destroy();
-      this.colorPickerDrop = null;
-    }
-  }
-
-  render() {
-    const { optionalClass, children } = this.props;
-    return (
-      <div className={optionalClass} ref={e => (this.pickerElem = e)} onClick={this.onClickToOpen}>
-        {children}
-      </div>
-    );
-  }
-}

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

@@ -1,23 +1,44 @@
-import React from 'react';
+import React, { FunctionComponent } from 'react';
-import { ColorPickerPopover } from './ColorPickerPopover';
 
-export interface SeriesColorPickerPopoverProps {
+import { ColorPickerPopover } from './ColorPickerPopover';
-  color: string;
+import { ColorPickerProps } from './ColorPicker';
+import { PopperContentProps } from '../Tooltip/PopperController';
+import { Switch } from '../Switch/Switch';
+
+export interface SeriesColorPickerPopoverProps extends ColorPickerProps, PopperContentProps {
   yaxis?: number;
-  onColorChange: (color: string) => void;
   onToggleAxis?: () => void;
 }
 
-export class SeriesColorPickerPopover extends React.PureComponent<SeriesColorPickerPopoverProps, any> {
+export const SeriesColorPickerPopover: FunctionComponent<SeriesColorPickerPopoverProps> = props => {
-  render() {
+  const { yaxis, onToggleAxis, color, ...colorPickerProps } = props;
+
   return (
-      <div className="graph-legend-popover">
+    <ColorPickerPopover
-        {this.props.yaxis && <AxisSelector yaxis={this.props.yaxis} onToggleAxis={this.props.onToggleAxis} />}
+      {...colorPickerProps}
-        <ColorPickerPopover color={this.props.color} onColorSelect={this.props.onColorChange} />
+      color={color || '#000000'}
-      </div>
+      customPickers={{
-    );
+        yaxis: {
+          name: 'Y-Axis',
+          tabComponent: () => (
+            <Switch
+              key="yaxisSwitch"
+              label="Use right y-axis"
+              className="ColorPicker__axisSwitch"
+              labelClass="ColorPicker__axisSwitchLabel"
+              checked={yaxis === 2}
+              onChange={() => {
+                if (onToggleAxis) {
+                  onToggleAxis();
                 }
-}
+              }}
+            />
+          ),
+        },
+      }}
+    />
+  );
+};
 
 interface AxisSelectorProps {
   yaxis: number;

packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.story.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import SpectrumPalette from './SpectrumPalette';
+import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
+import { UseState } from '../../utils/storybook/UseState';
+import { getThemeKnob } from '../../utils/storybook/themeKnob';
+
+const SpectrumPaletteStories = storiesOf('UI/ColorPicker/Palettes/SpectrumPalette', module);
+
+SpectrumPaletteStories.addDecorator(withCenteredStory).addDecorator(withKnobs);
+
+SpectrumPaletteStories.add('Named colors swatch - support for named colors', () => {
+  const selectedTheme = getThemeKnob();
+  return (
+    <UseState initialState="red">
+      {(selectedColor, updateSelectedColor) => {
+        return <SpectrumPalette theme={selectedTheme} color={selectedColor} onChange={updateSelectedColor} />;
+      }}
+    </UseState>
+  );
+});

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

@@ -0,0 +1,100 @@
+import React from 'react';
+import { CustomPicker, ColorResult } from 'react-color';
+
+import { Saturation, Hue, Alpha } from 'react-color/lib/components/common';
+import { getColorFromHexRgbOrName } from '../../utils/namedColorsPalette';
+import tinycolor from 'tinycolor2';
+import ColorInput from './ColorInput';
+import { Themeable, GrafanaTheme } from '../../types';
+import SpectrumPalettePointer, { SpectrumPalettePointerProps } from './SpectrumPalettePointer';
+
+export interface SpectrumPaletteProps extends Themeable {
+  color: string;
+  onChange: (color: string) => void;
+}
+
+const renderPointer = (theme?: GrafanaTheme) => (props: SpectrumPalettePointerProps) => (
+  <SpectrumPalettePointer {...props} theme={theme} />
+);
+
+// @ts-ignore
+const SpectrumPicker = CustomPicker<Themeable>(({ rgb, hsl, onChange, theme }) => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        width: '100%',
+        flexDirection: 'column',
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+        }}
+      >
+        <div
+          style={{
+            display: 'flex',
+            flexGrow: 1,
+            flexDirection: 'column',
+          }}
+        >
+          <div
+            style={{
+              position: 'relative',
+              height: '100px',
+              width: '100%',
+            }}
+          >
+            {/*
+      // @ts-ignore */}
+            <Saturation onChange={onChange} hsl={hsl} hsv={tinycolor(hsl).toHsv()} />
+          </div>
+          <div
+            style={{
+              width: '100%',
+              height: '16px',
+              marginTop: '16px',
+              position: 'relative',
+              background: 'white',
+            }}
+          >
+            {/*
+      // @ts-ignore */}
+            <Alpha rgb={rgb} hsl={hsl} a={rgb.a} onChange={onChange} pointer={renderPointer(theme)} />
+          </div>
+        </div>
+
+        <div
+          style={{
+            position: 'relative',
+            width: '16px',
+            height: '100px',
+            marginLeft: '16px',
+          }}
+        >
+          {/*
+        // @ts-ignore */}
+          <Hue onChange={onChange} hsl={hsl} direction="vertical" pointer={renderPointer(theme)} />
+        </div>
+      </div>
+    </div>
+  );
+});
+
+const SpectrumPalette: React.FunctionComponent<SpectrumPaletteProps> = ({ color, onChange, theme }) => {
+  return (
+    <div>
+      <SpectrumPicker
+        color={tinycolor(getColorFromHexRgbOrName(color)).toRgb()}
+        onChange={(a: ColorResult) => {
+          onChange(tinycolor(a.rgb).toString());
+        }}
+        theme={theme}
+      />
+      <ColorInput color={color} onChange={onChange} style={{ marginTop: '16px' }} />
+    </div>
+  );
+};
+
+export default SpectrumPalette;

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

@@ -0,0 +1,80 @@
+import React from 'react';
+import { GrafanaTheme, Themeable } from '../../types';
+
+export interface SpectrumPalettePointerProps extends Themeable {
+  direction?: string;
+}
+
+const SpectrumPalettePointer: React.FunctionComponent<SpectrumPalettePointerProps> = ({
+  theme,
+  direction,
+}) => {
+  const styles = {
+    picker: {
+      width: '16px',
+      height: '16px',
+      transform: direction === 'vertical' ? 'translate(0, -8px)' : 'translate(-8px, 0)',
+    },
+  };
+
+  const pointerColor = theme === GrafanaTheme.Light ? '#3F444D' : '#8E8E8E';
+
+  let pointerStyles: React.CSSProperties = {
+    position: 'absolute',
+    left: '6px',
+    width: '0',
+    height: '0',
+    borderStyle: 'solid',
+    background: 'none',
+  };
+
+  let topArrowStyles: React.CSSProperties = {
+    top: '-7px',
+    borderWidth: '6px 3px 0px 3px',
+    borderColor: `${pointerColor} transparent transparent transparent`,
+  };
+
+  let bottomArrowStyles: React.CSSProperties = {
+    bottom: '-7px',
+    borderWidth: '0px 3px 6px 3px',
+    borderColor: ` transparent transparent ${pointerColor} transparent`,
+  };
+
+  if (direction === 'vertical') {
+    pointerStyles = {
+      ...pointerStyles,
+      left: 'auto',
+    };
+    topArrowStyles = {
+      borderWidth: '3px 0px 3px 6px',
+      borderColor: `transparent transparent transparent ${pointerColor}`,
+      left: '-7px',
+      top: '7px',
+    };
+    bottomArrowStyles = {
+      borderWidth: '3px 6px 3px 0px',
+      borderColor: `transparent ${pointerColor} transparent transparent`,
+      right: '-7px',
+      top: '7px',
+    };
+  }
+
+  return (
+    <div style={styles.picker}>
+      <div
+        style={{
+          ...pointerStyles,
+          ...topArrowStyles,
+        }}
+      />
+      <div
+        style={{
+          ...pointerStyles,
+          ...bottomArrowStyles,
+        }}
+      />
+    </div>
+  );
+};
+
+export default SpectrumPalettePointer;

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

@@ -1,72 +0,0 @@
-import React from 'react';
-import _ from 'lodash';
-import $ from 'jquery';
-import '../../vendor/spectrum';
-
-export interface Props {
-  color: string;
-  options: object;
-  onColorSelect: (c: string) => void;
-}
-
-export class SpectrumPicker extends React.Component<Props, any> {
-  elem: any;
-  isMoving: boolean;
-
-  constructor(props: Props) {
-    super(props);
-    this.onSpectrumMove = this.onSpectrumMove.bind(this);
-    this.setComponentElem = this.setComponentElem.bind(this);
-  }
-
-  setComponentElem(elem: any) {
-    this.elem = $(elem);
-  }
-
-  onSpectrumMove(color: any) {
-    this.isMoving = true;
-    this.props.onColorSelect(color);
-  }
-
-  componentDidMount() {
-    const spectrumOptions = _.assignIn(
-      {
-        flat: true,
-        showAlpha: true,
-        showButtons: false,
-        color: this.props.color,
-        appendTo: this.elem,
-        move: this.onSpectrumMove,
-      },
-      this.props.options
-    );
-
-    this.elem.spectrum(spectrumOptions);
-    this.elem.spectrum('show');
-    this.elem.spectrum('set', this.props.color);
-  }
-
-  componentWillUpdate(nextProps: any) {
-    // If user move pointer over spectrum field this produce 'move' event and component
-    // may update props.color. We don't want to update spectrum color in this case, so we can use
-    // isMoving flag for tracking moving state. Flag should be cleared in componentDidUpdate() which
-    // is called after updating occurs (when user finished moving).
-    if (!this.isMoving) {
-      this.elem.spectrum('set', nextProps.color);
-    }
-  }
-
-  componentDidUpdate() {
-    if (this.isMoving) {
-      this.isMoving = false;
-    }
-  }
-
-  componentWillUnmount() {
-    this.elem.spectrum('destroy');
-  }
-
-  render() {
-    return <div className="spectrum-container" ref={this.setComponentElem} />;
-  }
-}

packages/grafana-ui/src/components/ColorPicker/_ColorPicker.scss

@@ -1,8 +1,172 @@
+$arrowSize: 15px;
+.ColorPicker {
+  @extend .popper;
+  font-size: 12px;
+}
+
+.ColorPicker__arrow {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  position: absolute;
+  margin: 0px;
+
+  &[data-placement^='top'] {
+    border-width: $arrowSize $arrowSize 0 $arrowSize;
+    border-left-color: transparent;
+    border-right-color: transparent;
+    border-bottom-color: transparent;
+    bottom: -$arrowSize;
+    left: calc(50%-#{$arrowSize});
+    padding-top: $arrowSize;
+  }
+
+  &[data-placement^='bottom'] {
+    border-width: 0 $arrowSize $arrowSize $arrowSize;
+    border-left-color: transparent;
+    border-right-color: transparent;
+    border-top-color: transparent;
+    top: 0;
+    left: calc(50%-#{$arrowSize});
+  }
+
+  &[data-placement^='bottom-start'] {
+    border-width: 0 $arrowSize $arrowSize $arrowSize;
+    border-left-color: transparent;
+    border-right-color: transparent;
+    border-top-color: transparent;
+    top: 0;
+    left: $arrowSize;
+  }
+
+  &[data-placement^='bottom-end'] & {
+    border-width: 0 $arrowSize $arrowSize $arrowSize;
+    border-left-color: transparent;
+    border-right-color: transparent;
+    border-top-color: transparent;
+    top: 0;
+    left: calc(100% -$arrowSize);
+  }
+
+  &[data-placement^='right'] {
+    border-width: $arrowSize $arrowSize $arrowSize 0;
+    border-left-color: transparent;
+    border-top-color: transparent;
+    border-bottom-color: transparent;
+    left: 0;
+    top: calc(50%-#{$arrowSize});
+  }
+
+  &[data-placement^='left'] {
+    border-width: $arrowSize 0 $arrowSize $arrowSize;
+    border-top-color: transparent;
+    border-right-color: transparent;
+    border-bottom-color: transparent;
+    right: -$arrowSize;
+    top: calc(50%-#{$arrowSize});
+  }
+}
+
+.ColorPicker__arrow--light {
+  border-color: #ffffff;
+}
+
+.ColorPicker__arrow--dark {
+  border-color: #1e2028;
+}
+
+// Top
+.ColorPicker[data-placement^='top'] {
+  padding-bottom: $arrowSize;
+}
+
+// Bottom
+.ColorPicker[data-placement^='bottom'] {
+  padding-top: $arrowSize;
+}
+
+.ColorPicker[data-placement^='bottom-start'] {
+  padding-top: $arrowSize;
+}
+
+.ColorPicker[data-placement^='bottom-end'] {
+  padding-top: $arrowSize;
+}
+
+// Right
+.ColorPicker[data-placement^='right'] {
+  padding-left: $arrowSize;
+}
+
+// Left
+.ColorPicker[data-placement^='left'] {
+  padding-right: $arrowSize;
+}
+
+.ColorPickerPopover {
+  border-radius: 3px;
+}
+
+.ColorPickerPopover--light {
+  color: black;
+  background: linear-gradient(180deg, #ffffff 0%, #f7f8fa 104.25%);
+  box-shadow: 0px 2px 4px #dde4ed, 0px 0px 2px #dde4ed;
+}
+
+.ColorPickerPopover--dark {
+  color: #d8d9da;
+  background: linear-gradient(180deg, #1e2028 0%, #161719 104.25%);
+  box-shadow: 0px 2px 4px #000000, 0px 0px 2px #000000;
+
+  .ColorPickerPopover__tab {
+    background: #303133;
+    color: white;
+    cursor: pointer;
+  }
+  .ColorPickerPopover__tab--active {
+    background: none;
+  }
+}
+
+.ColorPickerPopover__content {
+  width: 336px;
+  min-height: 184px;
+  padding: 24px;
+}
+
+.ColorPickerPopover__tabs {
+  display: flex;
+  width: 100%;
+  border-radius: 3px 3px 0 0;
+  overflow: hidden;
+}
+
+.ColorPickerPopover__tab {
+  width: 50%;
+  text-align: center;
+  padding: 8px 0;
+  background: #dde4ed;
+}
+
+.ColorPickerPopover__tab--active {
+  background: white;
+}
+
+.ColorPicker__axisSwitch {
+  width: 100%;
+}
+
+.ColorPicker__axisSwitchLabel {
+  display: flex;
+  flex-grow: 1;
+}
+
 .sp-replacer {
   background: inherit;
   border: none;
   color: inherit;
   padding: 0;
+  border-radius: 10px;
 }
 
 .sp-replacer:hover,
@@ -35,10 +199,22 @@
   margin: 0;
   float: left;
   z-index: 0;
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
+}
+
+.sp-preview-inner,
+.sp-alpha-inner,
+.sp-thumb-inner {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
 }
 
 .gf-color-picker__body {
-  padding-bottom: 10px;
+  padding-bottom: $arrowSize;
   padding-left: 6px;
 }
 
@@ -47,3 +223,18 @@
     width: 210px;
   }
 }
+
+// TODO: Remove. This is a temporary solution until color picker popovers are used
+// with Drop.js.
+.drop-popover.drop-popover--transparent {
+  .drop-content {
+    border: none;
+    background: none;
+    padding: 0;
+    max-width: none;
+
+    &:before {
+      display: none;
+    }
+  }
+}

packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx

@@ -9,6 +9,8 @@ interface Props {
   autoHideDuration?: number;
   autoHeightMax?: string;
   hideTracksWhenNotNeeded?: boolean;
+  renderTrackHorizontal?: React.FunctionComponent<any>;
+  renderTrackVertical?: React.FunctionComponent<any>;
   scrollTop?: number;
   setScrollTop: (event: any) => void;
   autoHeightMin?: number | string;
@@ -66,6 +68,8 @@ export class CustomScrollbar extends PureComponent<Props> {
       autoHide,
       autoHideTimeout,
       hideTracksWhenNotNeeded,
+      renderTrackHorizontal,
+      renderTrackVertical,
     } = this.props;
 
     return (
@@ -81,8 +85,8 @@ export class CustomScrollbar extends PureComponent<Props> {
         // Before these where set to inhert but that caused problems with cut of legends in firefox
         autoHeightMax={autoHeightMax}
         autoHeightMin={autoHeightMin}
-        renderTrackHorizontal={props => <div {...props} className="track-horizontal" />}
+        renderTrackHorizontal={renderTrackHorizontal || (props => <div {...props} className="track-horizontal" />)}
-        renderTrackVertical={props => <div {...props} className="track-vertical" />}
+        renderTrackVertical={renderTrackVertical || (props => <div {...props} className="track-vertical" />)}
         renderThumbHorizontal={props => <div {...props} className="thumb-horizontal" />}
         renderThumbVertical={props => <div {...props} className="thumb-vertical" />}
         renderView={props => <div {...props} className="view" />}

packages/grafana-ui/src/components/DeleteButton/DeleteButton.story.tsx

@@ -0,0 +1,24 @@
+import React, { FunctionComponent } from 'react';
+import { storiesOf } from '@storybook/react';
+import { DeleteButton } from '@grafana/ui';
+
+const CenteredStory: FunctionComponent<{}> = ({ children }) => {
+  return (
+    <div
+      style={{
+        height: '100vh  ',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+storiesOf('UI/DeleteButton', module)
+  .addDecorator(story => <CenteredStory>{story()}</CenteredStory>)
+  .add('default', () => {
+    return <DeleteButton onConfirm={() => {}} />;
+  });

packages/grafana-ui/src/components/Gauge/Gauge.tsx

@@ -1,10 +1,14 @@
 import React, { PureComponent } from 'react';
 import $ from 'jquery';
 
-import { ValueMapping, Threshold, ThemeName, BasicGaugeColor, ThemeNames } from '../../types/panel';
+import { ValueMapping, Threshold, BasicGaugeColor } from '../../types/panel';
 import { TimeSeriesVMs } from '../../types/series';
+import { GrafanaTheme } from '../../types';
+import { getMappedValue } from '../../utils/valueMappings';
 import { getValueFormat } from '../../utils/valueFormats/valueFormats';
-import { TimeSeriesValue, getMappedValue } from '../../utils/valueMappings';
+import { getColorFromHexRgbOrName } from '../../utils/namedColorsPalette';
+
+type TimeSeriesValue = string | number | null;
 
 export interface Props {
   decimals: number;
@@ -21,7 +25,7 @@ export interface Props {
   suffix: string;
   unit: string;
   width: number;
-  theme?: ThemeName;
+  theme?: GrafanaTheme;
 }
 
 export class Gauge extends PureComponent<Props> {
@@ -38,7 +42,7 @@ export class Gauge extends PureComponent<Props> {
     thresholds: [],
     unit: 'none',
     stat: 'avg',
-    theme: ThemeNames.Dark,
+    theme: GrafanaTheme.Dark,
   };
 
   componentDidMount() {
@@ -71,29 +75,29 @@ export class Gauge extends PureComponent<Props> {
   }
 
   getFontColor(value: TimeSeriesValue) {
-    const { thresholds } = this.props;
+    const { thresholds, theme } = this.props;
 
     if (thresholds.length === 1) {
-      return thresholds[0].color;
+      return getColorFromHexRgbOrName(thresholds[0].color, theme);
     }
 
     const atThreshold = thresholds.filter(threshold => (value as number) === threshold.value)[0];
     if (atThreshold) {
-      return atThreshold.color;
+      return getColorFromHexRgbOrName(atThreshold.color, theme);
     }
 
     const belowThreshold = thresholds.filter(threshold => (value as number) > threshold.value);
 
     if (belowThreshold.length > 0) {
       const nearestThreshold = belowThreshold.sort((t1, t2) => t2.value - t1.value)[0];
-      return nearestThreshold.color;
+      return getColorFromHexRgbOrName(nearestThreshold.color, theme);
     }
 
     return BasicGaugeColor.Red;
   }
 
   getFormattedThresholds() {
-    const { maxValue, minValue, thresholds } = this.props;
+    const { maxValue, minValue, thresholds, theme } = this.props;
 
     const thresholdsSortedByIndex = [...thresholds].sort((t1, t2) => t1.index - t2.index);
     const lastThreshold = thresholdsSortedByIndex[thresholdsSortedByIndex.length - 1];
@@ -101,13 +105,13 @@ export class Gauge extends PureComponent<Props> {
     const formattedThresholds = [
       ...thresholdsSortedByIndex.map(threshold => {
         if (threshold.index === 0) {
-          return { value: minValue, color: threshold.color };
+          return { value: minValue, color: getColorFromHexRgbOrName(threshold.color, theme) };
         }
 
         const previousThreshold = thresholdsSortedByIndex[threshold.index - 1];
-        return { value: threshold.value, color: previousThreshold.color };
+        return { value: threshold.value, color: getColorFromHexRgbOrName(previousThreshold.color, theme) };
       }),
-      { value: maxValue, color: lastThreshold.color },
+      { value: maxValue, color: getColorFromHexRgbOrName(lastThreshold.color, theme) },
     ];
 
     return formattedThresholds;
@@ -135,7 +139,7 @@ export class Gauge extends PureComponent<Props> {
     }
 
     const dimension = Math.min(width, height * 1.3);
-    const backgroundColor = theme === ThemeNames.Light ? 'rgb(230,230,230)' : 'rgb(38,38,38)';
+    const backgroundColor = theme === GrafanaTheme.Light ? 'rgb(230,230,230)' : 'rgb(38,38,38)';
     const fontScale = parseInt('80', 10) / 100;
     const fontSize = Math.min(dimension / 5, 100) * fontScale;
     const gaugeWidthReduceRatio = showThresholdLabels ? 1.5 : 1;

packages/grafana-ui/src/components/Select/SelectOption.test.tsx

@@ -3,6 +3,7 @@ import renderer from 'react-test-renderer';
 import SelectOption from './SelectOption';
 import { OptionProps } from 'react-select/lib/components/Option';
 
+// @ts-ignore
 const model: OptionProps<any> = {
   data: jest.fn(),
   cx: jest.fn(),

packages/grafana-ui/src/components/Switch/Switch.tsx

@@ -4,10 +4,11 @@ import _ from 'lodash';
 export interface Props {
   label: string;
   checked: boolean;
+  className?: string;
   labelClass?: string;
   switchClass?: string;
   transparent?: boolean;
-  onChange: (event) => any;
+  onChange: (event?: React.SyntheticEvent<HTMLInputElement>) => void;
 }
 
 export interface State {
@@ -19,20 +20,21 @@ export class Switch extends PureComponent<Props, State> {
     id: _.uniqueId(),
   };
 
-  internalOnChange = event => {
+  internalOnChange = (event: React.FormEvent<HTMLInputElement>) => {
     event.stopPropagation();
-    this.props.onChange(event);
+
+    this.props.onChange();
   };
 
   render() {
-    const { labelClass = '', switchClass = '', label, checked, transparent } = this.props;
+    const { labelClass = '', switchClass = '', label, checked, transparent, className } = this.props;
 
     const labelId = `check-${this.state.id}`;
     const labelClassName = `gf-form-label ${labelClass} ${transparent ? 'gf-form-label--transparent' : ''} pointer`;
     const switchClassName = `gf-form-switch ${switchClass} ${transparent ? 'gf-form-switch--transparent' : ''}`;
 
     return (
-      <label htmlFor={labelId} className="gf-form gf-form-switch-container">
+      <label htmlFor={labelId} className={`gf-form gf-form-switch-container ${className}`}>
         {label && <div className={labelClassName}>{label}</div>}
         <div className={switchClassName}>
           <input id={labelId} type="checkbox" checked={checked} onChange={this.internalOnChange} />

packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx

@@ -1,12 +1,11 @@
 import React, { PureComponent } from 'react';
-// import tinycolor, { ColorInput } from 'tinycolor2';
+import { Threshold, Themeable } from '../../types';
-
-import { Threshold } from '../../types';
 import { ColorPicker } from '../ColorPicker/ColorPicker';
 import { PanelOptionsGroup } from '../PanelOptionsGroup/PanelOptionsGroup';
 import { colors } from '../../utils';
+import { getColorFromHexRgbOrName } from '@grafana/ui';
 
-export interface Props {
+export interface Props extends Themeable {
   thresholds: Threshold[];
   onChange: (thresholds: Threshold[]) => void;
 }
@@ -189,6 +188,7 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
 
   render() {
     const { thresholds } = this.state;
+    const { theme } = this.props;
 
     return (
       <PanelOptionsGroup title="Thresholds">
@@ -199,7 +199,10 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
                 <div className="thresholds-row-add-button" onClick={() => this.onAddThreshold(threshold.index + 1)}>
                   <i className="fa fa-plus" />
                 </div>
-                <div className="thresholds-row-color-indicator" style={{ backgroundColor: threshold.color }} />
+                <div
+                  className="thresholds-row-color-indicator"
+                  style={{ backgroundColor: getColorFromHexRgbOrName(threshold.color, theme) }}
+                />
                 <div className="thresholds-row-input">{this.renderInput(threshold)}</div>
               </div>
             );

packages/grafana-ui/src/components/Tooltip/Popper.tsx

@@ -1,50 +1,56 @@
 import React, { PureComponent } from 'react';
 import * as PopperJS from 'popper.js';
-import { Manager, Popper as ReactPopper } from 'react-popper';
+import { Manager, Popper as ReactPopper, PopperArrowProps } from 'react-popper';
 import { Portal } from '@grafana/ui';
 import Transition from 'react-transition-group/Transition';
-
+import { PopperContent } from './PopperController';
-export enum Themes {
-  Default = 'popper__background--default',
-  Error = 'popper__background--error',
-  Brand = 'popper__background--brand',
-}
 
 const defaultTransitionStyles = {
   transition: 'opacity 200ms linear',
   opacity: 0,
 };
 
-const transitionStyles: {[key: string]: object} = {
+const transitionStyles: { [key: string]: object } = {
   exited: { opacity: 0 },
   entering: { opacity: 0 },
-  entered: { opacity: 1 },
+  entered: { opacity: 1, transitionDelay: '0s' },
-  exiting: { opacity: 0 },
+  exiting: { opacity: 0, transitionDelay: '500ms' },
 };
 
-interface Props extends React.DOMAttributes<HTMLDivElement> {
+export type RenderPopperArrowFn = (
-  renderContent: (content: any) => any;
+  props: {
+    arrowProps: PopperArrowProps;
+    placement: string;
+  }
+) => JSX.Element;
+
+interface Props extends React.HTMLAttributes<HTMLDivElement> {
   show: boolean;
   placement?: PopperJS.Placement;
-  content: string | ((props: any) => JSX.Element);
+  content: PopperContent<any>;
   referenceElement: PopperJS.ReferenceObject;
-  theme?: Themes;
+  wrapperClassName?: string;
+  renderArrow?: RenderPopperArrowFn;
 }
 
 class Popper extends PureComponent<Props> {
   render() {
-    const { renderContent, show, placement, onMouseEnter, onMouseLeave, theme } = this.props;
+    const { show, placement, onMouseEnter, onMouseLeave, className, wrapperClassName, renderArrow } = this.props;
     const { content } = this.props;
 
-    const popperBackgroundClassName = 'popper__background' + (theme ? ' ' + theme : '');
-
     return (
       <Manager>
         <Transition in={show} timeout={100} mountOnEnter={true} unmountOnExit={true}>
-          {transitionState => (
+          {transitionState => {
+            return (
               <Portal>
-              <ReactPopper placement={placement} referenceElement={this.props.referenceElement}>
+                <ReactPopper
-                {({ ref, style, placement, arrowProps }) => {
+                  placement={placement}
+                  referenceElement={this.props.referenceElement}
+                  // TODO: move modifiers config to popper controller
+                  modifiers={{ preventOverflow: { enabled: true, boundariesElement: 'window' } }}
+                >
+                  {({ ref, style, placement, arrowProps, scheduleUpdate }) => {
                     return (
                       <div
                         onMouseEnter={onMouseEnter}
@@ -56,18 +62,27 @@ class Popper extends PureComponent<Props> {
                           ...transitionStyles[transitionState],
                         }}
                         data-placement={placement}
-                      className="popper"
+                        className={`${wrapperClassName}`}
                       >
-                      <div className={popperBackgroundClassName}>
+                        <div className={className}>
-                        {renderContent(content)}
+                          {typeof content === 'string'
-                        <div ref={arrowProps.ref} data-placement={placement} className="popper__arrow" />
+                            ? content
+                            : React.cloneElement(content, {
+                                updatePopperPosition: scheduleUpdate,
+                              })}
+                          {renderArrow &&
+                            renderArrow({
+                              arrowProps,
+                              placement,
+                            })}
                         </div>
                       </div>
                     );
                   }}
                 </ReactPopper>
               </Portal>
-          )}
+            );
+          }}
         </Transition>
       </Manager>
     );

packages/grafana-ui/src/components/Tooltip/PopperController.tsx

@@ -1,16 +1,19 @@
 import React from 'react';
 import * as PopperJS from 'popper.js';
-import { Themes } from './Popper';
 
-type PopperContent = string | (() => JSX.Element);
+// This API allows popovers to update Popper's position when e.g. popover content changes
+// updatePopperPosition is delivered to content by react-popper
+export interface PopperContentProps {
+  updatePopperPosition?: () => void;
+}
+
+export type PopperContent<T extends PopperContentProps> = string | React.ReactElement<T>;
 
 export interface UsingPopperProps {
   show?: boolean;
   placement?: PopperJS.Placement;
-  content: PopperContent;
+  content: PopperContent<any>;
   children: JSX.Element;
-  renderContent?: (content: PopperContent) => JSX.Element;
-  theme?: Themes;
 }
 
 type PopperControllerRenderProp = (
@@ -19,18 +22,16 @@ type PopperControllerRenderProp = (
   popperProps: {
     show: boolean;
     placement: PopperJS.Placement;
-    content: string | ((props: any) => JSX.Element);
+    content: PopperContent<any>;
-    renderContent: (content: any) => any;
-    theme?: Themes;
   }
 ) => JSX.Element;
 
 interface Props {
   placement?: PopperJS.Placement;
-  content: PopperContent;
+  content: PopperContent<any>;
   className?: string;
   children: PopperControllerRenderProp;
-  theme?: Themes;
+  hideAfter?: number;
 }
 
 interface State {
@@ -39,6 +40,8 @@ interface State {
 }
 
 class PopperController extends React.Component<Props, State> {
+  private hideTimeout: any;
+
   constructor(props: Props) {
     super(props);
 
@@ -60,6 +63,10 @@ class PopperController extends React.Component<Props, State> {
   }
 
   showPopper = () => {
+    if (this.hideTimeout) {
+      clearTimeout(this.hideTimeout);
+    }
+
     this.setState(prevState => ({
       ...prevState,
       show: true,
@@ -67,31 +74,29 @@ class PopperController extends React.Component<Props, State> {
   };
 
   hidePopper = () => {
+    if (this.props.hideAfter !== 0) {
+      this.hideTimeout = setTimeout(() => {
+        this.setState(prevState => ({
+          ...prevState,
+          show: false,
+        }));
+      }, this.props.hideAfter);
+      return;
+    }
     this.setState(prevState => ({
       ...prevState,
       show: false,
     }));
   };
 
-  renderContent(content: PopperContent) {
-    if (typeof content === 'function') {
-      // If it's a function we assume it's a React component
-      const ReactComponent = content;
-      return <ReactComponent />;
-    }
-    return content;
-  }
-
   render() {
-    const { children, content, theme } = this.props;
+    const { children, content } = this.props;
     const { show, placement } = this.state;
 
     return children(this.showPopper, this.hidePopper, {
       show,
       placement,
       content,
-      renderContent: this.renderContent,
-      theme,
     });
   }
 }

packages/grafana-ui/src/components/Tooltip/Tooltip.tsx

@@ -3,8 +3,18 @@ import * as PopperJS from 'popper.js';
 import Popper from './Popper';
 import PopperController, { UsingPopperProps } from './PopperController';
 
-export const Tooltip = ({ children, renderContent, ...controllerProps }: UsingPopperProps) => {
+export enum Themes {
+  Default = 'popper__background--default',
+  Error = 'popper__background--error',
+  Brand = 'popper__background--brand',
+}
+
+interface TooltipProps extends UsingPopperProps {
+  theme?: Themes;
+}
+export const Tooltip = ({ children, theme, ...controllerProps }: TooltipProps) => {
   const tooltipTriggerRef = createRef<PopperJS.ReferenceObject>();
+  const popperBackgroundClassName = 'popper__background' + (theme ? ' ' + theme : '');
 
   return (
     <PopperController {...controllerProps}>
@@ -17,6 +27,11 @@ export const Tooltip = ({ children, renderContent, ...controllerProps }: UsingPo
                 onMouseEnter={showPopper}
                 onMouseLeave={hidePopper}
                 referenceElement={tooltipTriggerRef.current}
+                wrapperClassName='popper'
+                className={popperBackgroundClassName}
+                renderArrow={({ arrowProps, placement }) => (
+                  <div className="popper__arrow" data-placement={placement} {...arrowProps} />
+                )}
               />
             )}
             {React.cloneElement(children, {

packages/grafana-ui/src/components/Tooltip/_Tooltip.scss

@@ -1,6 +1,5 @@
 $popper-margin-from-ref: 5px;
 
-
 @mixin popper-theme($backgroundColor, $arrowColor) {
   background: $backgroundColor;
   .popper__arrow {
@@ -22,6 +21,10 @@ $popper-margin-from-ref: 5px;
   box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
   padding: 10px;
 
+  .popper__arrow {
+    border-color: $tooltipBackground;
+  }
+
   // Themes
   &.popper__background--error {
     @include popper-theme($tooltipBackgroundError, $tooltipBackgroundError);
@@ -41,10 +44,6 @@ $popper-margin-from-ref: 5px;
   margin: 0px;
 }
 
-.popper__arrow {
-  border-color: $tooltipBackground;
-}
-
 // Top
 .popper[data-placement^='top'] {
   padding-bottom: $popper-margin-from-ref;

packages/grafana-ui/src/components/index.ts

@@ -14,12 +14,12 @@ export { FormLabel } from './FormLabel/FormLabel';
 export { FormField } from './FormField/FormField';
 
 export { LoadingPlaceholder } from './LoadingPlaceholder/LoadingPlaceholder';
-export { ColorPicker } from './ColorPicker/ColorPicker';
+export {  ColorPicker, SeriesColorPicker } from './ColorPicker/ColorPicker';
 export { SeriesColorPickerPopover } from './ColorPicker/SeriesColorPickerPopover';
-export { SeriesColorPicker } from './ColorPicker/SeriesColorPicker';
 export { ThresholdsEditor } from './ThresholdsEditor/ThresholdsEditor';
 export { Graph } from './Graph/Graph';
 export { PanelOptionsGroup } from './PanelOptionsGroup/PanelOptionsGroup';
 export { PanelOptionsGrid } from './PanelOptionsGrid/PanelOptionsGrid';
 export { ValueMappingsEditor } from './ValueMappingsEditor/ValueMappingsEditor';
 export { Gauge } from './Gauge/Gauge';
+export { Switch } from './Switch/Switch';

packages/grafana-ui/src/index.scss

@@ -1,3 +1 @@
-@import 'vendor/spectrum';
 @import 'components/index';
-

packages/grafana-ui/src/types/index.ts

@@ -3,3 +3,12 @@ export * from './time';
 export * from './panel';
 export * from './plugin';
 export * from './datasource';
+
+export enum GrafanaTheme {
+  Light = 'light',
+  Dark = 'dark',
+}
+
+export interface Themeable {
+  theme?: GrafanaTheme;
+}

packages/grafana-ui/src/types/panel.ts

@@ -36,7 +36,7 @@ export interface PanelMenuItem {
 export interface Threshold {
   index: number;
   value: number;
-  color?: string;
+  color: string;
 }
 
 export enum BasicGaugeColor {
@@ -66,10 +66,3 @@ export interface RangeMap extends BaseMap {
   from: string;
   to: string;
 }
-
-export type ThemeName = 'dark' | 'light';
-
-export enum ThemeNames {
-  Dark = 'dark',
-  Light = 'light',
-}

packages/grafana-ui/src/utils/colors.ts

@@ -9,7 +9,6 @@ export const ALERTING_COLOR = 'rgba(237, 46, 24, 1)';
 export const NO_DATA_COLOR = 'rgba(150, 150, 150, 1)';
 export const PENDING_COLOR = 'rgba(247, 149, 32, 1)';
 export const REGION_FILL_ALPHA = 0.09;
-
 export const colors = [
   '#7EB26D', // 0: pale green
   '#EAB839', // 1: mustard

packages/grafana-ui/src/utils/index.ts

@@ -1,3 +1,4 @@
 export * from './processTimeSeries';
 export * from './valueFormats/valueFormats';
 export * from './colors';
+export * from './namedColorsPalette';

packages/grafana-ui/src/utils/namedColorsPalette.test.ts

@@ -0,0 +1,66 @@
+import {
+  getColorName,
+  getColorDefinition,
+  getColorByName,
+  getColorFromHexRgbOrName,
+  getColorDefinitionByName,
+} from './namedColorsPalette';
+import { GrafanaTheme } from '../types/index';
+
+describe('colors', () => {
+  const SemiDarkBlue = getColorDefinitionByName('semi-dark-blue');
+
+  describe('getColorDefinition', () => {
+    it('returns undefined for unknown hex', () => {
+      expect(getColorDefinition('#ff0000', GrafanaTheme.Light)).toBeUndefined();
+      expect(getColorDefinition('#ff0000', GrafanaTheme.Dark)).toBeUndefined();
+    });
+
+    it('returns definition for known hex', () => {
+      expect(getColorDefinition(SemiDarkBlue.variants.light, GrafanaTheme.Light)).toEqual(SemiDarkBlue);
+      expect(getColorDefinition(SemiDarkBlue.variants.dark, GrafanaTheme.Dark)).toEqual(SemiDarkBlue);
+    });
+  });
+
+  describe('getColorName', () => {
+    it('returns undefined for unknown hex', () => {
+      expect(getColorName('#ff0000')).toBeUndefined();
+    });
+
+    it('returns name for known hex', () => {
+      expect(getColorName(SemiDarkBlue.variants.light, GrafanaTheme.Light)).toEqual(SemiDarkBlue.name);
+      expect(getColorName(SemiDarkBlue.variants.dark, GrafanaTheme.Dark)).toEqual(SemiDarkBlue.name);
+    });
+  });
+
+  describe('getColorByName', () => {
+    it('returns undefined for unknown color', () => {
+      expect(getColorByName('aruba-sunshine')).toBeUndefined();
+    });
+
+    it('returns color definiton for known color', () => {
+      expect(getColorByName(SemiDarkBlue.name)).toBe(SemiDarkBlue);
+    });
+  });
+
+  describe('getColorFromHexRgbOrName', () => {
+    it('returns undefined for unknown color', () => {
+      expect(() => getColorFromHexRgbOrName('aruba-sunshine')).toThrow();
+    });
+
+    it('returns dark hex variant for known color if theme not specified', () => {
+      expect(getColorFromHexRgbOrName(SemiDarkBlue.name)).toBe(SemiDarkBlue.variants.dark);
+    });
+
+    it("returns correct variant's hex for known color if theme specified", () => {
+      expect(getColorFromHexRgbOrName(SemiDarkBlue.name, GrafanaTheme.Light)).toBe(SemiDarkBlue.variants.light);
+    });
+
+    it('returns color if specified as hex or rgb/a', () => {
+      expect(getColorFromHexRgbOrName('ff0000')).toBe('ff0000');
+      expect(getColorFromHexRgbOrName('#ff0000')).toBe('#ff0000');
+      expect(getColorFromHexRgbOrName('rgb(0,0,0)')).toBe('rgb(0,0,0)');
+      expect(getColorFromHexRgbOrName('rgba(0,0,0,1)')).toBe('rgba(0,0,0,1)');
+    });
+  });
+});

packages/grafana-ui/src/utils/namedColorsPalette.ts

@@ -0,0 +1,182 @@
+import { flatten } from 'lodash';
+import { GrafanaTheme } from '../types';
+
+type Hue = 'green' | 'yellow' | 'red' | 'blue' | 'orange' | 'purple';
+
+export type Color =
+  | 'green'
+  | 'dark-green'
+  | 'semi-dark-green'
+  | 'light-green'
+  | 'super-light-green'
+  | 'yellow'
+  | 'dark-yellow'
+  | 'semi-dark-yellow'
+  | 'light-yellow'
+  | 'super-light-yellow'
+  | 'red'
+  | 'dark-red'
+  | 'semi-dark-red'
+  | 'light-red'
+  | 'super-light-red'
+  | 'blue'
+  | 'dark-blue'
+  | 'semi-dark-blue'
+  | 'light-blue'
+  | 'super-light-blue'
+  | 'orange'
+  | 'dark-orange'
+  | 'semi-dark-orange'
+  | 'light-orange'
+  | 'super-light-orange'
+  | 'purple'
+  | 'dark-purple'
+  | 'semi-dark-purple'
+  | 'light-purple'
+  | 'super-light-purple';
+
+type ThemeVariants = {
+  dark: string;
+  light: string;
+};
+
+export type ColorDefinition = {
+  hue: Hue;
+  isPrimary?: boolean;
+  name: Color;
+  variants: ThemeVariants;
+};
+
+let colorsPaletteInstance: Map<Hue, ColorDefinition[]>;
+
+const buildColorDefinition = (
+  hue: Hue,
+  name: Color,
+  [light, dark]: string[],
+  isPrimary?: boolean
+): ColorDefinition => ({
+  hue,
+  name,
+  variants: {
+    light,
+    dark,
+  },
+  isPrimary: !!isPrimary,
+});
+
+export const getColorDefinitionByName = (name: Color): ColorDefinition => {
+  return flatten(Array.from(getNamedColorPalette().values())).filter(definition => definition.name === name)[0];
+};
+
+export const getColorDefinition = (hex: string, theme: GrafanaTheme): ColorDefinition | undefined => {
+  return flatten(Array.from(getNamedColorPalette().values())).filter(definition => definition.variants[theme] === hex)[0];
+};
+
+const isHex = (color: string) => {
+  const hexRegex = /^((0x){0,1}|#{0,1})([0-9A-F]{8}|[0-9A-F]{6})$/gi;
+  return hexRegex.test(color);
+};
+
+export const getColorName = (color?: string, theme?: GrafanaTheme): Color | undefined => {
+  if (!color) {
+    return undefined;
+  }
+
+  if (color.indexOf('rgb') > -1) {
+    return undefined;
+  }
+  if (isHex(color)) {
+    const definition = getColorDefinition(color, theme || GrafanaTheme.Dark);
+    return definition ? definition.name : undefined;
+  }
+
+  return color as Color;
+};
+
+export const getColorByName = (colorName: string) => {
+  const definition = flatten(Array.from(getNamedColorPalette().values())).filter(definition => definition.name === colorName);
+  return definition.length > 0 ? definition[0] : undefined;
+};
+
+export const getColorFromHexRgbOrName = (color: string, theme?: GrafanaTheme): string => {
+  if (color.indexOf('rgb') > -1 || isHex(color)) {
+    return color;
+  }
+
+  const colorDefinition = getColorByName(color);
+
+  if (!colorDefinition) {
+    throw new Error('Unknown color');
+  }
+
+  return theme ? colorDefinition.variants[theme] : colorDefinition.variants.dark;
+};
+
+export const getColorForTheme = (color: ColorDefinition, theme?: GrafanaTheme) => {
+  return theme ? color.variants[theme] : color.variants.dark;
+};
+
+const buildNamedColorsPalette = () => {
+  const palette = new Map<Hue, ColorDefinition[]>();
+
+    const BasicGreen = buildColorDefinition('green', 'green', ['#56A64B', '#73BF69'], true);
+  const DarkGreen = buildColorDefinition('green', 'dark-green', ['#19730E', '#37872D']);
+  const SemiDarkGreen = buildColorDefinition('green', 'semi-dark-green', ['#37872D', '#56A64B']);
+  const LightGreen = buildColorDefinition('green', 'light-green', ['#73BF69', '#96D98D']);
+  const SuperLightGreen = buildColorDefinition('green', 'super-light-green', ['#96D98D', '#C8F2C2']);
+
+  const BasicYellow = buildColorDefinition('yellow', 'yellow', ['#F2CC0C', '#FADE2A'], true);
+  const DarkYellow = buildColorDefinition('yellow', 'dark-yellow', ['#CC9D00', '#E0B400']);
+  const SemiDarkYellow = buildColorDefinition('yellow', 'semi-dark-yellow', ['#E0B400', '#F2CC0C']);
+  const LightYellow = buildColorDefinition('yellow', 'light-yellow', ['#FADE2A', '#FFEE52']);
+  const SuperLightYellow = buildColorDefinition('yellow', 'super-light-yellow', ['#FFEE52', '#FFF899']);
+
+  const BasicRed = buildColorDefinition('red', 'red', ['#E02F44', '#F2495C'], true);
+  const DarkRed = buildColorDefinition('red', 'dark-red', ['#AD0317', '#C4162A']);
+  const SemiDarkRed = buildColorDefinition('red', 'semi-dark-red', ['#C4162A', '#E02F44']);
+  const LightRed = buildColorDefinition('red', 'light-red', ['#F2495C', '#FF7383']);
+  const SuperLightRed = buildColorDefinition('red', 'super-light-red', ['#FF7383', '#FFA6B0']);
+
+  const BasicBlue = buildColorDefinition('blue', 'blue', ['#3274D9', '#5794F2'], true);
+  const DarkBlue = buildColorDefinition('blue', 'dark-blue', ['#1250B0', '#1F60C4']);
+  const SemiDarkBlue = buildColorDefinition('blue', 'semi-dark-blue', ['#1F60C4', '#3274D9']);
+  const LightBlue = buildColorDefinition('blue', 'light-blue', ['#5794F2', '#8AB8FF']);
+  const SuperLightBlue = buildColorDefinition('blue', 'super-light-blue', ['#8AB8FF', '#C0D8FF']);
+
+  const BasicOrange = buildColorDefinition('orange', 'orange', ['#FF780A', '#FF9830'], true);
+  const DarkOrange = buildColorDefinition('orange', 'dark-orange', ['#E55400', '#FA6400']);
+  const SemiDarkOrange = buildColorDefinition('orange', 'semi-dark-orange', ['#FA6400', '#FF780A']);
+  const LightOrange = buildColorDefinition('orange', 'light-orange', ['#FF9830', '#FFB357']);
+  const SuperLightOrange = buildColorDefinition('orange', 'super-light-orange', ['#FFB357', '#FFCB7D']);
+
+  const BasicPurple = buildColorDefinition('purple', 'purple', ['#A352CC', '#B877D9'], true);
+  const DarkPurple = buildColorDefinition('purple', 'dark-purple', ['#7C2EA3', '#8F3BB8']);
+  const SemiDarkPurple = buildColorDefinition('purple', 'semi-dark-purple', ['#8F3BB8', '#A352CC']);
+  const LightPurple = buildColorDefinition('purple', 'light-purple', ['#B877D9', '#CA95E5']);
+  const SuperLightPurple = buildColorDefinition('purple', 'super-light-purple', ['#CA95E5', '#DEB6F2']);
+
+  const greens = [BasicGreen, DarkGreen, SemiDarkGreen, LightGreen, SuperLightGreen];
+  const yellows = [BasicYellow, DarkYellow, SemiDarkYellow, LightYellow, SuperLightYellow];
+  const reds = [BasicRed, DarkRed, SemiDarkRed, LightRed, SuperLightRed];
+  const blues = [BasicBlue, DarkBlue, SemiDarkBlue, LightBlue, SuperLightBlue];
+  const oranges = [BasicOrange, DarkOrange, SemiDarkOrange, LightOrange, SuperLightOrange];
+  const purples = [BasicPurple, DarkPurple, SemiDarkPurple, LightPurple, SuperLightPurple];
+
+  palette.set('green', greens);
+  palette.set('yellow', yellows);
+  palette.set('red', reds);
+  palette.set('blue', blues);
+  palette.set('orange', oranges);
+  palette.set('purple', purples);
+
+  return palette;
+};
+
+export const getNamedColorPalette = () => {
+  if (colorsPaletteInstance) {
+    return colorsPaletteInstance;
+  }
+
+  colorsPaletteInstance = buildNamedColorsPalette();
+  return colorsPaletteInstance;
+};

packages/grafana-ui/src/utils/propDeprecationWarning.ts

@@ -0,0 +1,6 @@
+const propDeprecationWarning = (componentName: string, propName: string, newPropName: string) => {
+  const message = `[Deprecation warning] ${componentName}: ${propName} is deprecated. Use ${newPropName} instead`;
+  console.warn(message);
+};
+
+export default propDeprecationWarning;

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

@@ -0,0 +1,38 @@
+import React from 'react';
+
+interface StateHolderProps<T> {
+  initialState: T;
+  children: (currentState: T, updateState: (nextState: T) => void) => JSX.Element;
+}
+
+export class UseState<T> extends React.Component<StateHolderProps<T>, { value: T; initialState: T }> {
+  constructor(props: StateHolderProps<T>) {
+    super(props);
+    this.state = {
+      value: props.initialState,
+      initialState: props.initialState, // To enable control from knobs
+    };
+  }
+  // @ts-ignore
+  static getDerivedStateFromProps(props: StateHolderProps<{}>, state: { value: any; initialState: any }) {
+    if (props.initialState !== state.initialState) {
+      return {
+        initialState: props.initialState,
+        value: props.initialState,
+      };
+    }
+    return {
+      ...state,
+      value: state.value,
+    };
+  }
+
+  handleStateUpdate = (nextState: T) => {
+    console.log(nextState);
+    this.setState({ value: nextState });
+  };
+
+  render() {
+    return this.props.children(this.state.value, this.handleStateUpdate);
+  }
+}

packages/grafana-ui/src/utils/storybook/themeKnob.ts

@@ -0,0 +1,14 @@
+import { select } from '@storybook/addon-knobs';
+import { GrafanaTheme } from '../../types';
+
+export const getThemeKnob = (defaultTheme: GrafanaTheme = GrafanaTheme.Dark) => {
+  return select(
+    'Theme',
+    {
+      Default: defaultTheme,
+      Light: GrafanaTheme.Light,
+      Dark: GrafanaTheme.Dark,
+    },
+    defaultTheme
+  );
+};

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { RenderFunction } from '@storybook/react';
+
+const CenteredStory: React.FunctionComponent<{}> = ({ children }) => {
+  return (
+    <div
+      style={{
+        height: '100vh  ',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+export const withCenteredStory = (story: RenderFunction) => <CenteredStory>{story()}</CenteredStory>;

packages/grafana-ui/src/vendor/spectrum.css

@@ -1,509 +0,0 @@
-/***
-Spectrum Colorpicker v1.3.0
-https://github.com/bgrins/spectrum
-Author: Brian Grinstead
-License: MIT
-***/
-
-.sp-container {
-    position:absolute;
-    top:0;
-    left:0;
-    display:inline-block;
-    *display: inline;
-    *zoom: 1;
-    /* https://github.com/bgrins/spectrum/issues/40 */
-    z-index: 9999994;
-    overflow: hidden;
-}
-.sp-container.sp-flat {
-    position: relative;
-}
-
-/* Fix for * { box-sizing: border-box; } */
-.sp-container,
-.sp-container * {
-    -webkit-box-sizing: content-box;
-       -moz-box-sizing: content-box;
-            box-sizing: content-box;
-}
-
-/* http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio */
-.sp-top {
-  position:relative;
-  width: 100%;
-  display:inline-block;
-}
-.sp-top-inner {
-   position:absolute;
-   top:0;
-   left:0;
-   bottom:0;
-   right:0;
-}
-.sp-color {
-    position: absolute;
-    top:0;
-    left:0;
-    bottom:0;
-    right:20%;
-}
-.sp-hue {
-    position: absolute;
-    top:0;
-    right:0;
-    bottom:0;
-    left:84%;
-    height: 100%;
-}
-
-.sp-clear-enabled .sp-hue {
-    top:33px;
-    height: 77.5%;
-}
-
-.sp-fill {
-    padding-top: 80%;
-}
-.sp-sat, .sp-val {
-    position: absolute;
-    top:0;
-    left:0;
-    right:0;
-    bottom:0;
-}
-
-.sp-alpha-enabled .sp-top {
-    margin-bottom: 18px;
-}
-.sp-alpha-enabled .sp-alpha {
-    display: block;
-}
-.sp-alpha-handle {
-    position:absolute;
-    top:-4px;
-    bottom: -4px;
-    width: 6px;
-    left: 50%;
-    cursor: pointer;
-    border: 1px solid black;
-    background: white;
-    opacity: .8;
-}
-.sp-alpha {
-    display: none;
-    position: absolute;
-    bottom: -14px;
-    right: 0;
-    left: 0;
-    height: 8px;
-}
-.sp-alpha-inner {
-    border: solid 1px #333;
-}
-
-.sp-clear {
-    display: none;
-}
-
-.sp-clear.sp-clear-display {
-    background-position: center;
-}
-
-.sp-clear-enabled .sp-clear {
-    display: block;
-    position:absolute;
-    top:0px;
-    right:0;
-    bottom:0;
-    left:84%;
-    height: 28px;
-}
-
-/* Don't allow text selection */
-.sp-container, .sp-replacer, .sp-preview, .sp-dragger, .sp-slider, .sp-alpha, .sp-clear, .sp-alpha-handle, .sp-container.sp-dragging .sp-input, .sp-container button  {
-    -webkit-user-select:none;
-    -moz-user-select: -moz-none;
-    -o-user-select:none;
-    user-select: none;
-}
-
-.sp-container.sp-input-disabled .sp-input-container {
-    display: none;
-}
-.sp-container.sp-buttons-disabled .sp-button-container {
-    display: none;
-}
-.sp-palette-only .sp-picker-container {
-    display: none;
-}
-.sp-palette-disabled .sp-palette-container {
-    display: none;
-}
-
-.sp-initial-disabled .sp-initial {
-    display: none;
-}
-
-
-/* Gradients for hue, saturation and value instead of images.  Not pretty... but it works */
-.sp-sat {
-    background-image: linear-gradient(to right, #fff, rgba(204, 154, 129, 0));
-    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr=#FFFFFFFF, endColorstr=#00CC9A81)";
-    filter : progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr='#FFFFFFFF', endColorstr='#00CC9A81');
-}
-.sp-val {
-    background-image: linear-gradient(to top, #000, rgba(204, 154, 129, 0));
-    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00CC9A81, endColorstr=#FF000000)";
-    filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CC9A81', endColorstr='#FF000000');
-}
-
-.sp-hue {
-    background: -moz-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
-    background: -ms-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
-    background: -o-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
-    background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), color-stop(0.17, #ffff00), color-stop(0.33, #00ff00), color-stop(0.5, #00ffff), color-stop(0.67, #0000ff), color-stop(0.83, #ff00ff), to(#ff0000));
-    background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
-}
-
-/* IE filters do not support multiple color stops.
-   Generate 6 divs, line them up, and do two color gradients for each.
-   Yes, really.
- */
-.sp-1 {
-    height:17%;
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ffff00');
-}
-.sp-2 {
-    height:16%;
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00', endColorstr='#00ff00');
-}
-.sp-3 {
-    height:17%;
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00', endColorstr='#00ffff');
-}
-.sp-4 {
-    height:17%;
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffff', endColorstr='#0000ff');
-}
-.sp-5 {
-    height:16%;
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#ff00ff');
-}
-.sp-6 {
-    height:17%;
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00ff', endColorstr='#ff0000');
-}
-
-.sp-hidden {
-    display: none !important;
-}
-
-/* Clearfix hack */
-.sp-cf:before, .sp-cf:after { content: ""; display: table; }
-.sp-cf:after { clear: both; }
-.sp-cf { *zoom: 1; }
-
-/* Mobile devices, make hue slider bigger so it is easier to slide */
-@media (max-device-width: 480px) {
-    .sp-color { right: 40%; }
-    .sp-hue { left: 63%; }
-    .sp-fill { padding-top: 60%; }
-}
-.sp-dragger {
-   border-radius: 5px;
-   height: 5px;
-   width: 5px;
-   border: 1px solid #fff;
-   background: #000;
-   cursor: pointer;
-   position:absolute;
-   top:0;
-   left: 0;
-}
-.sp-slider {
-    position: absolute;
-    top:0;
-    cursor:pointer;
-    height: 3px;
-    left: -1px;
-    right: -1px;
-    border: 1px solid #000;
-    background: white;
-    opacity: .8;
-}
-
-/*
-Theme authors:
-Here are the basic themeable display options (colors, fonts, global widths).
-See http://bgrins.github.io/spectrum/themes/ for instructions.
-*/
-
-.sp-container {
-    border-radius: 0;
-    background-color: #ECECEC;
-    border: solid 1px #f0c49B;
-    padding: 0;
-}
-.sp-container, .sp-container button, .sp-container input, .sp-color, .sp-hue, .sp-clear
-{
-    font: normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    -ms-box-sizing: border-box;
-    box-sizing: border-box;
-}
-.sp-top
-{
-    margin-bottom: 3px;
-}
-.sp-color, .sp-hue, .sp-clear
-{
-    border: solid 1px #666;
-}
-
-/* Input */
-.sp-input-container {
-    float:right;
-    width: 100px;
-    margin-bottom: 4px;
-}
-.sp-initial-disabled  .sp-input-container {
-    width: 100%;
-}
-.sp-input {
-   font-size: 12px !important;
-   border: 1px inset;
-   padding: 4px 5px;
-   margin: 0;
-   width: 100%;
-   background:transparent;
-   border-radius: 3px;
-   color: #222;
-}
-.sp-input:focus  {
-    border: 1px solid orange;
-}
-.sp-input.sp-validation-error
-{
-    border: 1px solid red;
-    background: #fdd;
-}
-.sp-picker-container , .sp-palette-container
-{
-    float:left;
-    position: relative;
-    padding: 10px;
-    padding-bottom: 300px;
-    margin-bottom: -290px;
-}
-.sp-picker-container
-{
-    width: 172px;
-    border-left: solid 1px #fff;
-}
-
-/* Palettes */
-.sp-palette-container
-{
-    border-right: solid 1px #ccc;
-}
-
-.sp-palette .sp-thumb-el {
-    display: block;
-    position:relative;
-    float:left;
-    width: 24px;
-    height: 15px;
-    margin: 3px;
-    cursor: pointer;
-    border:solid 2px transparent;
-}
-.sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp-thumb-active {
-    border-color: orange;
-}
-.sp-thumb-el
-{
-    position:relative;
-}
-
-/* Initial */
-.sp-initial
-{
-    float: left;
-    border: solid 1px #333;
-}
-.sp-initial span {
-    width: 30px;
-    height: 25px;
-    border:none;
-    display:block;
-    float:left;
-    margin:0;
-}
-
-.sp-initial .sp-clear-display {
-    background-position: center;
-}
-
-/* Buttons */
-.sp-button-container {
-    float: right;
-}
-
-/* Replacer (the little preview div that shows up instead of the <input>) */
-.sp-replacer {
-    margin:0;
-    overflow:hidden;
-    cursor:pointer;
-    padding: 4px;
-    display:inline-block;
-    *zoom: 1;
-    *display: inline;
-    border: solid 1px #91765d;
-    background: #eee;
-    color: #333;
-    vertical-align: middle;
-}
-.sp-replacer:hover, .sp-replacer.sp-active {
-    border-color: #F0C49B;
-    color: #111;
-}
-.sp-replacer.sp-disabled {
-    cursor:default;
-    border-color: silver;
-    color: silver;
-}
-.sp-dd {
-    padding: 2px 0;
-    height: 16px;
-    line-height: 16px;
-    float:left;
-    font-size:10px;
-}
-.sp-preview
-{
-    position:relative;
-    width:25px;
-    height: 20px;
-    border: solid 1px #222;
-    margin-right: 5px;
-    float:left;
-    z-index: 0;
-}
-
-.sp-palette
-{
-    *width: 220px;
-    max-width: 220px;
-}
-.sp-palette .sp-thumb-el
-{
-    width:16px;
-    height: 16px;
-    margin:2px 1px;
-    border: solid 1px #d0d0d0;
-}
-
-.sp-container
-{
-    padding-bottom:0;
-}
-
-
-/* Buttons: http://hellohappy.org/css3-buttons/ */
-.sp-container button {
-  background-color: #eeeeee;
-  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
-  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
-  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
-  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
-  background-image: linear-gradient(to bottom, #eeeeee, #cccccc);
-  border: 1px solid #ccc;
-  border-bottom: 1px solid #bbb;
-  border-radius: 3px;
-  color: #333;
-  font-size: 14px;
-  line-height: 1;
-  padding: 5px 4px;
-  text-align: center;
-  text-shadow: 0 1px 0 #eee;
-  vertical-align: middle;
-}
-.sp-container button:hover {
-    background-color: #dddddd;
-    background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
-    background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
-    background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
-    background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
-    background-image: linear-gradient(to bottom, #dddddd, #bbbbbb);
-    border: 1px solid #bbb;
-    border-bottom: 1px solid #999;
-    cursor: pointer;
-    text-shadow: 0 1px 0 #ddd;
-}
-.sp-container button:active {
-    border: 1px solid #aaa;
-    border-bottom: 1px solid #888;
-    -webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
-    -moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
-    -ms-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
-    -o-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
-    box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
-}
-.sp-cancel
-{
-    font-size: 11px;
-    color: #d93f3f !important;
-    margin:0;
-    padding:2px;
-    margin-right: 5px;
-    vertical-align: middle;
-    text-decoration:none;
-
-}
-.sp-cancel:hover
-{
-    color: #d93f3f !important;
-    text-decoration: underline;
-}
-
-
-.sp-palette span:hover, .sp-palette span.sp-thumb-active
-{
-    border-color: #000;
-}
-
-.sp-preview, .sp-alpha, .sp-thumb-el
-{
-    position:relative;
-    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
-}
-.sp-preview-inner, .sp-alpha-inner, .sp-thumb-inner
-{
-    display:block;
-    position:absolute;
-    top:0;left:0;bottom:0;right:0;
-}
-
-.sp-palette .sp-thumb-inner
-{
-    background-position: 50% 50%;
-    background-repeat: no-repeat;
-}
-
-.sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner
-{
-    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=);
-}
-
-.sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner
-{
-    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=);
-}
-
-.sp-clear-display {
-    background-repeat:no-repeat;
-    background-position: center;
-    background-image: url(data:image/gif;base64,R0lGODlhFAAUAPcAAAAAAJmZmZ2dnZ6enqKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq/Hx8fLy8vT09PX19ff39/j4+Pn5+fr6+vv7+wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAAUABQAAAihAP9FoPCvoMGDBy08+EdhQAIJCCMybCDAAYUEARBAlFiQQoMABQhKUJBxY0SPICEYHBnggEmDKAuoPMjS5cGYMxHW3IiT478JJA8M/CjTZ0GgLRekNGpwAsYABHIypcAgQMsITDtWJYBR6NSqMico9cqR6tKfY7GeBCuVwlipDNmefAtTrkSzB1RaIAoXodsABiZAEFB06gIBWC1mLVgBa0AAOw==);
-}

packages/grafana-ui/tsconfig.json

@@ -5,14 +5,17 @@
     "src/**/*.tsx"
   ],
   "exclude": [
-    "dist"
+    "dist",
+    "node_modules"
   ],
   "compilerOptions": {
-    "rootDir": ".",
+    "rootDirs": [".", "stories"],
     "module": "esnext",
     "outDir": "dist",
     "declaration": true,
     "noImplicitAny": true,
-    "strictNullChecks": true
+    "strictNullChecks": true,
-  }
+    "typeRoots": ["./node_modules/@types", "types"],
+    "skipLibCheck": true // Temp workaround for Duplicate identifier tsc errors
+  },
 }

public/app/core/angular_wrappers.ts

@@ -28,6 +28,7 @@ export function registerAngularDirectives() {
     ['onChange', { watchDepth: 'reference', wrapApply: true }],
   ]);
   react2AngularDirective('seriesColorPickerPopover', SeriesColorPickerPopover, [
+    'color',
     'series',
     'onColorChange',
     'onToggleAxis',

public/app/core/services/context_srv.ts

@@ -2,7 +2,6 @@ import config from 'app/core/config';
 import _ from 'lodash';
 import coreModule from 'app/core/core_module';
 import store from 'app/core/store';
-import { ThemeNames, ThemeName } from '@grafana/ui';
 
 export class User {
   isGrafanaAdmin: any;
@@ -64,10 +63,6 @@ export class ContextSrv {
   hasAccessToExplore() {
     return (this.isEditor || config.viewersCanEdit) && config.exploreEnabled;
   }
-
-  getTheme(): ThemeName {
-    return this.user.lightTheme ? ThemeNames.Light : ThemeNames.Dark;
-  }
 }
 
 const contextSrv = new ContextSrv();

public/app/core/time_series2.ts

@@ -356,7 +356,7 @@ export default class TimeSeries {
     return false;
   }
 
-  setColor(color) {
+  setColor(color: string) {
     this.color = color;
     this.bars.fillColor = color;
   }

public/app/core/utils/ConfigProvider.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import config, { Settings } from 'app/core/config';
+import { GrafanaTheme } from '@grafana/ui';
+
+export const ConfigContext = React.createContext<Settings>(config);
+export const ConfigConsumer = ConfigContext.Consumer;
+
+export const provideConfig = (component: React.ComponentType<any>) => {
+  const ConfigProvider = (props: any) => (
+    <ConfigContext.Provider value={config}>{React.createElement(component, { ...props })}</ConfigContext.Provider>
+  );
+
+  return ConfigProvider;
+};
+
+interface ThemeProviderProps {
+  children: (theme: GrafanaTheme) => JSX.Element;
+}
+
+export const ThemeProvider = ({ children }: ThemeProviderProps) => {
+  return (
+    <ConfigConsumer>
+      {({ bootData }) => {
+        return children(bootData.user.lightTheme ? GrafanaTheme.Light : GrafanaTheme.Dark);
+      }}
+    </ConfigConsumer>
+  );
+};

public/app/core/utils/react2angular.ts

@@ -1,10 +1,11 @@
 import coreModule from 'app/core/core_module';
+import { provideConfig } from 'app/core/utils/ConfigProvider';
 
 export function react2AngularDirective(name: string, component: any, options: any) {
   coreModule.directive(name, [
     'reactDirective',
     reactDirective => {
-      return reactDirective(component, options);
+      return reactDirective(provideConfig(component), options);
     },
   ]);
 }

public/app/features/dashboard/components/DashboardPermissions/DashboardPermissions.tsx

@@ -70,7 +70,7 @@ export class DashboardPermissions extends PureComponent<Props, State> {
         <div className="dashboard-settings__header">
           <div className="page-action-bar">
             <h3 className="d-inline-block">Permissions</h3>
-            <Tooltip placement="auto" content={PermissionsInfo}>
+            <Tooltip placement="auto" content={<PermissionsInfo />}>
               <div className="page-sub-heading-icon">
                 <i className="gicon gicon-question gicon--has-hover" />
               </div>

public/app/features/dashboard/dashgrid/DataPanel.tsx

@@ -1,7 +1,7 @@
 // Library
 import React, { Component } from 'react';
 import { Tooltip } from '@grafana/ui';
-import { Themes } from '@grafana/ui/src/components/Tooltip/Popper';
+import { Themes } from '@grafana/ui/src/components/Tooltip/Tooltip';
 
 import ErrorBoundary from 'app/core/components/ErrorBoundary/ErrorBoundary';
 

public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx

@@ -77,7 +77,7 @@ export class PanelHeaderCorner extends Component<Props> {
       <>
         {infoMode === InfoModes.Info || infoMode === InfoModes.Links ? (
           <Tooltip
-            content={this.getInfoContent}
+            content={this.getInfoContent()}
             placement="bottom-start"
           >
             <div

public/app/features/dashboard/panel_editor/PanelEditor.tsx

@@ -16,7 +16,7 @@ import { DashboardModel } from '../dashboard_model';
 import { PanelPlugin } from 'app/types/plugins';
 
 import { Tooltip } from '@grafana/ui';
-import { Themes } from '@grafana/ui/src/components/Tooltip/Popper';
+import { Themes } from '@grafana/ui/src/components/Tooltip/Tooltip';
 
 interface PanelEditorProps {
   panel: PanelModel;

public/app/features/dashboard/panel_editor/QueryOptions.tsx

@@ -5,7 +5,7 @@ import React, { PureComponent } from 'react';
 import { isValidTimeSpan } from 'app/core/utils/rangeutil';
 
 // Components
-import { Switch } from 'app/core/components/Switch/Switch';
+import { Switch } from '@grafana/ui';
 import { Input } from 'app/core/components/Form';
 import { EventsWithValidation } from 'app/core/components/Form/Input';
 import { InputStatus } from 'app/core/components/Form/Input';

public/app/features/datasources/settings/BasicSettings.tsx

@@ -1,6 +1,5 @@
 import React, { FC } from 'react';
-import { FormLabel } from '@grafana/ui';
+import { FormLabel, Switch } from '@grafana/ui';
-import { Switch } from '../../../core/components/Switch/Switch';
 
 export interface Props {
   dataSourceName: string;
@@ -31,6 +30,8 @@ const BasicSettings: FC<Props> = ({ dataSourceName, isDefault, onDefaultChange,
             required
           />
         </div>
+        {/*
+        //@ts-ignore */}
         <Switch label="Default" checked={isDefault} onChange={event => onDefaultChange(event.target.checked)} />
       </div>
     </div>

public/app/features/explore/Logs.tsx

@@ -2,7 +2,7 @@ import _ from 'lodash';
 import React, { PureComponent } from 'react';
 
 import * as rangeUtil from 'app/core/utils/rangeutil';
-import { RawTimeRange } from '@grafana/ui';
+import { RawTimeRange, Switch } from '@grafana/ui';
 import {
   LogsDedupDescription,
   LogsDedupStrategy,
@@ -13,7 +13,6 @@ import {
   LogsMetaKind,
 } from 'app/core/logs_model';
 
-import { Switch } from 'app/core/components/Switch/Switch';
 import ToggleButtonGroup, { ToggleButton } from 'app/core/components/ToggleButtonGroup/ToggleButtonGroup';
 
 import Graph from './Graph';

public/app/features/folders/FolderPermissions.tsx

@@ -84,7 +84,7 @@ export class FolderPermissions extends PureComponent<Props, State> {
         <div className="page-container page-body">
           <div className="page-action-bar">
             <h3 className="page-sub-heading">Folder Permissions</h3>
-            <Tooltip placement="auto" content={PermissionsInfo}>
+            <Tooltip placement="auto" content={<PermissionsInfo />}>
               <div className="page-sub-heading-icon">
                 <i className="gicon gicon-question gicon--has-hover" />
               </div>

public/app/plugins/panel/gauge/GaugeOptionsEditor.tsx

@@ -1,7 +1,6 @@
 import React, { PureComponent } from 'react';
-import { FormField, PanelOptionsProps, PanelOptionsGroup } from '@grafana/ui';
+import { FormField, PanelOptionsProps, PanelOptionsGroup, Switch } from '@grafana/ui';
 
-import { Switch } from 'app/core/components/Switch/Switch';
 import { GaugeOptions } from './types';
 
 export default class GaugeOptionsEditor extends PureComponent<PanelOptionsProps<GaugeOptions>> {

public/app/plugins/panel/gauge/GaugePanel.tsx

@@ -2,7 +2,6 @@
 import React, { PureComponent } from 'react';
 
 // Services & Utils
-import { contextSrv } from 'app/core/core';
 import { processTimeSeries } from '@grafana/ui';
 
 // Components
@@ -11,11 +10,11 @@ import { Gauge } from '@grafana/ui';
 // Types
 import { GaugeOptions } from './types';
 import { PanelProps, NullValueMode } from '@grafana/ui/src/types';
+import { ThemeProvider } from 'app/core/utils/ConfigProvider';
 
 interface Props extends PanelProps<GaugeOptions> {}
 
 export class GaugePanel extends PureComponent<Props> {
-
   render() {
     const { timeSeries, width, height, onInterpolate, options } = this.props;
 
@@ -28,6 +27,8 @@ export class GaugePanel extends PureComponent<Props> {
     });
 
     return (
+      <ThemeProvider>
+        {(theme) => (
           <Gauge
             timeSeries={vmSeries}
             {...this.props.options}
@@ -35,8 +36,10 @@ export class GaugePanel extends PureComponent<Props> {
             height={height}
             prefix={prefix}
             suffix={suffix}
-        theme={contextSrv.getTheme()}
+            theme={theme}
           />
+        )}
+      </ThemeProvider>
     );
   }
 }

public/app/plugins/panel/gauge/GaugePanelOptions.tsx

@@ -11,6 +11,7 @@ import {
 import ValueOptions from 'app/plugins/panel/gauge/ValueOptions';
 import GaugeOptionsEditor from './GaugeOptionsEditor';
 import { GaugeOptions } from './types';
+import { ThemeProvider } from 'app/core/utils/ConfigProvider';
 
 export const defaultProps = {
   options: {
@@ -46,15 +47,23 @@ export default class GaugePanelOptions extends PureComponent<PanelOptionsProps<G
   render() {
     const { onChange, options } = this.props;
     return (
+      <ThemeProvider>
+        {(theme) => (
           <>
             <PanelOptionsGrid>
               <ValueOptions onChange={onChange} options={options} />
               <GaugeOptionsEditor onChange={onChange} options={options} />
-          <ThresholdsEditor onChange={this.onThresholdsChanged} thresholds={options.thresholds} />
+              <ThresholdsEditor
+                onChange={this.onThresholdsChanged}
+                thresholds={options.thresholds}
+                theme={theme}
+              />
             </PanelOptionsGrid>
 
             <ValueMappingsEditor onChange={this.onValueMappingsChanged} valueMappings={options.valueMappings} />
           </>
+        )}
+      </ThemeProvider>
     );
   }
 }

public/app/plugins/panel/graph/Legend/Legend.tsx

@@ -311,7 +311,7 @@ class LegendTableHeaderItem extends PureComponent<LegendTableHeaderProps & Legen
 export class Legend extends PureComponent<GraphLegendProps> {
   render() {
     return (
-      <CustomScrollbar>
+      <CustomScrollbar renderTrackHorizontal={(props) => <div {...props} style={{visibility: 'none'}} />}>
         <GraphLegend {...this.props} />
       </CustomScrollbar>
     );

public/app/plugins/panel/graph/Legend/LegendSeriesItem.tsx

@@ -2,6 +2,7 @@ import React, { PureComponent } from 'react';
 import classNames from 'classnames';
 import { TimeSeries } from 'app/core/core';
 import { SeriesColorPicker } from '@grafana/ui';
+import { ThemeProvider } from 'app/core/utils/ConfigProvider';
 
 export const LEGEND_STATS = ['min', 'max', 'avg', 'current', 'total'];
 
@@ -154,8 +155,8 @@ interface LegendSeriesIconState {
   color: string;
 }
 
-function SeriesIcon(props) {
+function SeriesIcon({ color }) {
-  return <i className="fa fa-minus pointer" style={{ color: props.color }} />;
+  return <i className="fa fa-minus pointer" style={{ color }} />;
 }
 
 class LegendSeriesIcon extends PureComponent<LegendSeriesIconProps, LegendSeriesIconState> {
@@ -166,17 +167,26 @@ class LegendSeriesIcon extends PureComponent<LegendSeriesIconProps, LegendSeries
   };
 
   render() {
+    return (
+      <ThemeProvider>
+        {theme => {
           return (
             <SeriesColorPicker
-        optionalClass="graph-legend-icon"
               yaxis={this.props.yaxis}
               color={this.props.color}
-        onColorChange={this.props.onColorChange}
+              onChange={this.props.onColorChange}
               onToggleAxis={this.props.onToggleAxis}
+              theme={theme}
+              enableNamedColors
             >
+              <span className="graph-legend-icon">
                 <SeriesIcon color={this.props.color} />
+              </span>
             </SeriesColorPicker>
           );
+        }}
+      </ThemeProvider>
+    );
   }
 }
 

public/app/plugins/panel/graph/data_processor.ts

@@ -1,7 +1,7 @@
 import _ from 'lodash';
-import { colors } from '@grafana/ui';
+import { colors, GrafanaTheme, getColorFromHexRgbOrName } from '@grafana/ui';
-
 import TimeSeries from 'app/core/time_series2';
+import config from 'app/core/config';
 
 export class DataProcessor {
   constructor(private panel) {}
@@ -107,12 +107,13 @@ export class DataProcessor {
     const alias = seriesData.target;
 
     const colorIndex = index % colors.length;
+
     const color = this.panel.aliasColors[alias] || colors[colorIndex];
 
     const series = new TimeSeries({
       datapoints: datapoints,
       alias: alias,
-      color: color,
+      color: getColorFromHexRgbOrName(color, config.bootData.user.lightTheme ? GrafanaTheme.Light : GrafanaTheme.Dark),
       unit: seriesData.unit,
     });
 

public/app/plugins/panel/graph/graph.ts

@@ -26,6 +26,7 @@ import ReactDOM from 'react-dom';
 import { Legend, GraphLegendProps } from './Legend/Legend';
 
 import { GraphCtrl } from './module';
+import { GrafanaTheme } from '@grafana/ui';
 
 class GraphElement {
   ctrl: GraphCtrl;
@@ -51,7 +52,10 @@ class GraphElement {
     this.panelWidth = 0;
     this.eventManager = new EventManager(this.ctrl);
     this.thresholdManager = new ThresholdManager(this.ctrl);
-    this.timeRegionManager = new TimeRegionManager(this.ctrl);
+    this.timeRegionManager = new TimeRegionManager(
+      this.ctrl,
+      config.bootData.user.lightTheme ? GrafanaTheme.Light : GrafanaTheme.Dark
+    );
     this.tooltip = new GraphTooltip(this.elem, this.ctrl.dashboard, this.scope, () => {
       return this.sortedSeries;
     });

public/app/plugins/panel/graph/module.ts

@@ -9,6 +9,8 @@ import _ from 'lodash';
 import { MetricsPanelCtrl } from 'app/plugins/sdk';
 import { DataProcessor } from './data_processor';
 import { axesEditorComponent } from './axes_editor';
+import config from 'app/core/config';
+import { GrafanaTheme, getColorFromHexRgbOrName } from '@grafana/ui';
 
 class GraphCtrl extends MetricsPanelCtrl {
   static template = template;
@@ -242,8 +244,8 @@ class GraphCtrl extends MetricsPanelCtrl {
   }
 
   onColorChange = (series, color) => {
-    series.setColor(color);
+    series.setColor(getColorFromHexRgbOrName(color, config.bootData.user.lightTheme ? GrafanaTheme.Light : GrafanaTheme.Dark));
-    this.panel.aliasColors[series.alias] = series.color;
+    this.panel.aliasColors[series.alias] = color;
     this.render();
   };
 

public/app/plugins/panel/graph/series_overrides_ctrl.ts

@@ -53,11 +53,13 @@ export function SeriesOverridesCtrl($scope, $element, popoverSrv) {
       element: $element.find('.dropdown')[0],
       position: 'top center',
       openOn: 'click',
-      template: '<series-color-picker-popover series="series" onColorChange="colorSelected" />',
+      template: '<series-color-picker-popover color="color" onColorChange="colorSelected" />',
+      classNames: 'drop-popover drop-popover--transparent',
       model: {
         autoClose: true,
         colorSelected: $scope.colorSelected,
         series: fakeSeries,
+        color,
       },
       onClose: () => {
         $scope.ctrl.render();

public/app/plugins/panel/graph/threshold_manager.ts

@@ -1,6 +1,7 @@
 import 'vendor/flot/jquery.flot';
 import $ from 'jquery';
 import _ from 'lodash';
+import { getColorFromHexRgbOrName } from '@grafana/ui';
 
 export class ThresholdManager {
   plot: any;
@@ -197,6 +198,7 @@ export class ThresholdManager {
       }
 
       let fillColor, lineColor;
+
       switch (threshold.colorMode) {
         case 'critical': {
           fillColor = 'rgba(234, 112, 112, 0.12)';
@@ -214,6 +216,12 @@ export class ThresholdManager {
           break;
         }
         case 'custom': {
+          if (!threshold.fillColor) {
+            threshold.fillColor = 'rgba(255, 255, 255, 1)';
+          }
+          if (!threshold.lineColor) {
+            threshold.lineColor = 'rgba(255, 255, 255, 0)';
+          }
           fillColor = threshold.fillColor;
           lineColor = threshold.lineColor;
           break;
@@ -225,12 +233,12 @@ export class ThresholdManager {
         if (threshold.yaxis === 'right' && this.hasSecondYAxis) {
           options.grid.markings.push({
             y2axis: { from: threshold.value, to: limit },
-            color: fillColor,
+            color: getColorFromHexRgbOrName(fillColor),
           });
         } else {
           options.grid.markings.push({
             yaxis: { from: threshold.value, to: limit },
-            color: fillColor,
+            color: getColorFromHexRgbOrName(fillColor),
           });
         }
       }
@@ -238,12 +246,12 @@ export class ThresholdManager {
         if (threshold.yaxis === 'right' && this.hasSecondYAxis) {
           options.grid.markings.push({
             y2axis: { from: threshold.value, to: threshold.value },
-            color: lineColor,
+            color: getColorFromHexRgbOrName(lineColor),
           });
         } else {
           options.grid.markings.push({
             yaxis: { from: threshold.value, to: threshold.value },
-            color: lineColor,
+            color: getColorFromHexRgbOrName(lineColor),
           });
         }
       }

public/app/plugins/panel/graph/time_region_manager.ts

@@ -1,7 +1,12 @@
 import 'vendor/flot/jquery.flot';
 import _ from 'lodash';
 import moment from 'moment';
-import config from 'app/core/config';
+import { GrafanaTheme, getColorFromHexRgbOrName } from '@grafana/ui';
+
+type TimeRegionColorDefinition = {
+  fill: string;
+  line: string;
+};
 
 export const colorModes = {
   gray: {
@@ -38,31 +43,35 @@ export function getColorModes() {
   });
 }
 
-function getColor(timeRegion) {
+function getColor(timeRegion, theme: GrafanaTheme): TimeRegionColorDefinition {
   if (Object.keys(colorModes).indexOf(timeRegion.colorMode) === -1) {
     timeRegion.colorMode = 'red';
   }
 
   if (timeRegion.colorMode === 'custom') {
     return {
-      fill: timeRegion.fillColor,
+      fill: getColorFromHexRgbOrName(timeRegion.fillColor, theme),
-      line: timeRegion.lineColor,
+      line: getColorFromHexRgbOrName(timeRegion.lineColor, theme),
     };
   }
 
   const colorMode = colorModes[timeRegion.colorMode];
+
   if (colorMode.themeDependent === true) {
-    return config.bootData.user.lightTheme ? colorMode.lightColor : colorMode.darkColor;
+    return theme === GrafanaTheme.Light ? colorMode.lightColor : colorMode.darkColor;
   }
 
-  return colorMode.color;
+  return {
+    fill: getColorFromHexRgbOrName(colorMode.color.fill, theme),
+    line: getColorFromHexRgbOrName(colorMode.color.line, theme),
+  };
 }
 
 export class TimeRegionManager {
   plot: any;
   timeRegions: any;
 
-  constructor(private panelCtrl) {}
+  constructor(private panelCtrl, private theme: GrafanaTheme = GrafanaTheme.Dark) {}
 
   draw(plot) {
     this.timeRegions = this.panelCtrl.panel.timeRegions;
@@ -76,7 +85,7 @@ export class TimeRegionManager {
 
     const tRange = { from: moment(this.panelCtrl.range.from).utc(), to: moment(this.panelCtrl.range.to).utc() };
 
-    let i, hRange, timeRegion, regions, fromStart, fromEnd, timeRegionColor;
+    let i, hRange, timeRegion, regions, fromStart, fromEnd, timeRegionColor: TimeRegionColorDefinition;
 
     const timeRegionsCopy = panel.timeRegions.map(a => ({ ...a }));
 
@@ -200,7 +209,7 @@ export class TimeRegionManager {
         }
       }
 
-      timeRegionColor = getColor(timeRegion);
+      timeRegionColor = getColor(timeRegion, this.theme);
 
       for (let j = 0; j < regions.length; j++) {
         const r = regions[j];

public/app/plugins/panel/graph/time_regions_form.ts

@@ -35,6 +35,9 @@ export class TimeRegionFormCtrl {
       colorMode: 'background6',
       fill: true,
       line: false,
+      // Default colors for new
+      fillColor: 'rgba(234, 112, 112, 0.12)',
+      lineColor: 'rgba(237, 46, 24, 0.60)'
     });
     this.panelCtrl.render();
   }

public/app/plugins/panel/graph2/GraphPanelOptions.tsx

@@ -2,11 +2,9 @@
 import _ from 'lodash';
 import React, { PureComponent } from 'react';
 
-// Components
-import { Switch } from 'app/core/components/Switch/Switch';
 
 // Types
-import { PanelOptionsProps } from '@grafana/ui';
+import { PanelOptionsProps, Switch } from '@grafana/ui';
 import { Options } from './types';
 
 export class GraphPanelOptions extends PureComponent<PanelOptionsProps<Options>> {

public/app/plugins/panel/heatmap/color_legend.ts

@@ -5,6 +5,7 @@ import { contextSrv } from 'app/core/core';
 import { tickStep } from 'app/core/utils/ticks';
 import { getColorScale, getOpacityScale } from './color_scale';
 import coreModule from 'app/core/core_module';
+import { GrafanaTheme, getColorFromHexRgbOrName } from '@grafana/ui';
 
 const LEGEND_HEIGHT_PX = 6;
 const LEGEND_WIDTH_PX = 100;
@@ -247,7 +248,10 @@ function drawSimpleOpacityLegend(elem, options) {
       .attr('width', rangeStep)
       .attr('height', legendHeight)
       .attr('stroke-width', 0)
-      .attr('fill', options.cardColor)
+      .attr(
+        'fill',
+        getColorFromHexRgbOrName(options.cardColor, contextSrv.user.lightTheme ? GrafanaTheme.Light : GrafanaTheme.Dark)
+      )
       .style('opacity', d => legendOpacityScale(d));
   }
 }

public/app/plugins/panel/heatmap/rendering.ts

@@ -8,6 +8,7 @@ import * as ticksUtils from 'app/core/utils/ticks';
 import { HeatmapTooltip } from './heatmap_tooltip';
 import { mergeZeroBuckets } from './heatmap_data_converter';
 import { getColorScale, getOpacityScale } from './color_scale';
+import { GrafanaTheme, getColorFromHexRgbOrName } from '@grafana/ui';
 
 const MIN_CARD_SIZE = 1,
   CARD_PADDING = 1,
@@ -521,7 +522,6 @@ export class HeatmapRenderer {
     const maxValueAuto = this.data.cardStats.max;
     const maxValue = this.panel.color.max || maxValueAuto;
     const minValue = this.panel.color.min || 0;
-
     const colorScheme = _.find(this.ctrl.colorSchemes, {
       value: this.panel.color.colorScheme,
     });
@@ -662,7 +662,10 @@ export class HeatmapRenderer {
 
   getCardColor(d) {
     if (this.panel.color.mode === 'opacity') {
-      return this.panel.color.cardColor;
+      return getColorFromHexRgbOrName(
+        this.panel.color.cardColor,
+        contextSrv.user.lightTheme ? GrafanaTheme.Light : GrafanaTheme.Dark
+      );
     } else {
       return this.colorScale(d.count);
     }

public/app/plugins/panel/singlestat/module.ts

@@ -8,6 +8,8 @@ import kbn from 'app/core/utils/kbn';
 import config from 'app/core/config';
 import TimeSeries from 'app/core/time_series2';
 import { MetricsPanelCtrl } from 'app/plugins/sdk';
+import { getColorFromHexRgbOrName } from '@grafana/ui';
+import { GrafanaTheme } from '@grafana/ui';
 
 class SingleStatCtrl extends MetricsPanelCtrl {
   static templateUrl = 'module.html';
@@ -479,6 +481,7 @@ class SingleStatCtrl extends MetricsPanelCtrl {
       plotCanvas.css(plotCss);
 
       const thresholds = [];
+
       for (let i = 0; i < data.thresholds.length; i++) {
         thresholds.push({
           value: data.thresholds[i],
@@ -586,7 +589,10 @@ class SingleStatCtrl extends MetricsPanelCtrl {
             fill: 1,
             zero: false,
             lineWidth: 1,
-            fillColor: panel.sparkline.fillColor,
+            fillColor: getColorFromHexRgbOrName(
+              panel.sparkline.fillColor,
+              config.bootData.user.lightTheme ? GrafanaTheme.Light : GrafanaTheme.Dark
+            ),
           },
         },
         yaxes: { show: false },
@@ -603,7 +609,10 @@ class SingleStatCtrl extends MetricsPanelCtrl {
 
       const plotSeries = {
         data: data.flotpairs,
-        color: panel.sparkline.lineColor,
+        color: getColorFromHexRgbOrName(
+          panel.sparkline.lineColor,
+          config.bootData.user.lightTheme ? GrafanaTheme.Light : GrafanaTheme.Dark
+        ),
       };
 
       $.plot(plotCanvas, [plotSeries], options);
@@ -619,12 +628,17 @@ class SingleStatCtrl extends MetricsPanelCtrl {
       data.thresholds = panel.thresholds.split(',').map(strVale => {
         return Number(strVale.trim());
       });
-      data.colorMap = panel.colors;
+
+      // Map panel colors to hex or rgb/a values
+      data.colorMap = panel.colors.map(color =>
+        getColorFromHexRgbOrName(color, config.bootData.user.lightTheme ? GrafanaTheme.Light : GrafanaTheme.Dark)
+      );
 
       const body = panel.gauge.show ? '' : getBigValueHtml();
 
       if (panel.colorBackground) {
         const color = getColorForValue(data, data.value);
+        console.log(color);
         if (color) {
           $panelContainer.css('background-color', color);
           if (scope.fullscreen) {

public/app/plugins/panel/table/module.ts

@@ -1,10 +1,12 @@
 import _ from 'lodash';
 import $ from 'jquery';
 import { MetricsPanelCtrl } from 'app/plugins/sdk';
+import config from 'app/core/config';
 import { transformDataToTable } from './transformers';
 import { tablePanelEditor } from './editor';
 import { columnOptionsTab } from './column_options';
 import { TableRenderer } from './renderer';
+import { GrafanaTheme } from '@grafana/ui';
 
 class TablePanelCtrl extends MetricsPanelCtrl {
   static templateUrl = 'module.html';
@@ -129,7 +131,8 @@ class TablePanelCtrl extends MetricsPanelCtrl {
       this.table,
       this.dashboard.isTimezoneUtc(),
       this.$sanitize,
-      this.templateSrv
+      this.templateSrv,
+      config.bootData.user.lightTheme ? GrafanaTheme.Light : GrafanaTheme.Dark,
     );
 
     return super.render(this.table);

public/app/plugins/panel/table/renderer.ts

@@ -1,12 +1,21 @@
 import _ from 'lodash';
 import moment from 'moment';
 import kbn from 'app/core/utils/kbn';
+import { getColorFromHexRgbOrName } from '@grafana/ui';
+import { GrafanaTheme } from '@grafana/ui';
 
 export class TableRenderer {
   formatters: any[];
   colorState: any;
 
-  constructor(private panel, private table, private isUtc, private sanitize, private templateSrv) {
+  constructor(
+    private panel,
+    private table,
+    private isUtc,
+    private sanitize,
+    private templateSrv,
+    private theme?: GrafanaTheme
+  ) {
     this.initColumns();
   }
 
@@ -49,10 +58,10 @@ export class TableRenderer {
     }
     for (let i = style.thresholds.length; i > 0; i--) {
       if (value >= style.thresholds[i - 1]) {
-        return style.colors[i];
+        return getColorFromHexRgbOrName(style.colors[i], this.theme);
       }
     }
-    return _.first(style.colors);
+    return getColorFromHexRgbOrName(_.first(style.colors), this.theme);
   }
 
   defaultCellFormatter(v, style) {

public/app/plugins/panel/table/specs/renderer.test.ts

@@ -1,8 +1,11 @@
 import _ from 'lodash';
 import TableModel from 'app/core/table_model';
 import { TableRenderer } from '../renderer';
+import { getColorDefinitionByName } from '@grafana/ui';
 
 describe('when rendering table', () => {
+  const SemiDarkOrange = getColorDefinitionByName('semi-dark-orange');
+
   describe('given 13 columns', () => {
     const table = new TableModel();
     table.columns = [
@@ -47,7 +50,7 @@ describe('when rendering table', () => {
           decimals: 1,
           colorMode: 'value',
           thresholds: [50, 80],
-          colors: ['green', 'orange', 'red'],
+          colors: ['#00ff00', SemiDarkOrange.name, 'rgb(1,0,0)'],
         },
         {
           pattern: 'String',
@@ -138,7 +141,7 @@ describe('when rendering table', () => {
           ],
           colorMode: 'value',
           thresholds: [1, 2],
-          colors: ['green', 'orange', 'red'],
+          colors: ['#00ff00', SemiDarkOrange.name, 'rgb(1,0,0)'],
         },
         {
           pattern: 'RangeMappingColored',
@@ -158,7 +161,7 @@ describe('when rendering table', () => {
           ],
           colorMode: 'value',
           thresholds: [2, 5],
-          colors: ['green', 'orange', 'red'],
+          colors: ['#00ff00', SemiDarkOrange.name, 'rgb(1,0,0)'],
         },
       ],
     };
@@ -226,19 +229,19 @@ describe('when rendering table', () => {
       expect(html).toBe('<td>asd</td>');
     });
 
-    it('colored cell should have style', () => {
+    it('colored cell should have style (handles HEX color values)', () => {
       const html = renderer.renderCell(2, 0, 40);
-      expect(html).toBe('<td style="color:green">40.0</td>');
+      expect(html).toBe('<td style="color:#00ff00">40.0</td>');
     });
 
-    it('colored cell should have style', () => {
+    it('colored cell should have style (handles named color values', () => {
       const html = renderer.renderCell(2, 0, 55);
-      expect(html).toBe('<td style="color:orange">55.0</td>');
+      expect(html).toBe(`<td style="color:${SemiDarkOrange.variants.dark}">55.0</td>`);
     });
 
-    it('colored cell should have style', () => {
+    it('colored cell should have style handles(rgb color values)', () => {
       const html = renderer.renderCell(2, 0, 85);
-      expect(html).toBe('<td style="color:red">85.0</td>');
+      expect(html).toBe('<td style="color:rgb(1,0,0)">85.0</td>');
     });
 
     it('unformated undefined should be rendered as string', () => {
@@ -333,47 +336,47 @@ describe('when rendering table', () => {
 
     it('value should be mapped to text and colored cell should have style', () => {
       const html = renderer.renderCell(11, 0, 1);
-      expect(html).toBe('<td style="color:orange">on</td>');
+      expect(html).toBe(`<td style="color:${SemiDarkOrange.variants.dark}">on</td>`);
     });
 
     it('value should be mapped to text and colored cell should have style', () => {
       const html = renderer.renderCell(11, 0, '1');
-      expect(html).toBe('<td style="color:orange">on</td>');
+      expect(html).toBe(`<td style="color:${SemiDarkOrange.variants.dark}">on</td>`);
     });
 
     it('value should be mapped to text and colored cell should have style', () => {
       const html = renderer.renderCell(11, 0, 0);
-      expect(html).toBe('<td style="color:green">off</td>');
+      expect(html).toBe('<td style="color:#00ff00">off</td>');
     });
 
     it('value should be mapped to text and colored cell should have style', () => {
       const html = renderer.renderCell(11, 0, '0');
-      expect(html).toBe('<td style="color:green">off</td>');
+      expect(html).toBe('<td style="color:#00ff00">off</td>');
     });
 
     it('value should be mapped to text and colored cell should have style', () => {
       const html = renderer.renderCell(11, 0, '2.1');
-      expect(html).toBe('<td style="color:red">2.1</td>');
+      expect(html).toBe('<td style="color:rgb(1,0,0)">2.1</td>');
     });
 
     it('value should be mapped to text (range) and colored cell should have style', () => {
       const html = renderer.renderCell(12, 0, 0);
-      expect(html).toBe('<td style="color:green">0</td>');
+      expect(html).toBe('<td style="color:#00ff00">0</td>');
     });
 
     it('value should be mapped to text (range) and colored cell should have style', () => {
       const html = renderer.renderCell(12, 0, 1);
-      expect(html).toBe('<td style="color:green">on</td>');
+      expect(html).toBe('<td style="color:#00ff00">on</td>');
     });
 
     it('value should be mapped to text (range) and colored cell should have style', () => {
       const html = renderer.renderCell(12, 0, 4);
-      expect(html).toBe('<td style="color:orange">off</td>');
+      expect(html).toBe(`<td style="color:${SemiDarkOrange.variants.dark}">off</td>`);
     });
 
     it('value should be mapped to text (range) and colored cell should have style', () => {
       const html = renderer.renderCell(12, 0, '7.1');
-      expect(html).toBe('<td style="color:red">7.1</td>');
+      expect(html).toBe('<td style="color:rgb(1,0,0)">7.1</td>');
     });
   });
 });

public/app/store/configureStore.ts

@@ -1,6 +1,6 @@
 import { createStore, applyMiddleware, compose, combineReducers } from 'redux';
 import thunk from 'redux-thunk';
-import { createLogger } from 'redux-logger';
+// import { createLogger } from 'redux-logger';
 import sharedReducers from 'app/core/reducers';
 import alertingReducers from 'app/features/alerting/state/reducers';
 import teamsReducers from 'app/features/teams/state/reducers';
@@ -39,7 +39,7 @@ export function configureStore() {
 
   if (process.env.NODE_ENV !== 'production') {
     // DEV builds we had the logger middleware
-    setStore(createStore(rootReducer, {}, composeEnhancers(applyMiddleware(thunk, createLogger()))));
+    setStore(createStore(rootReducer, {}, composeEnhancers(applyMiddleware(thunk))));
   } else {
     setStore(createStore(rootReducer, {}, composeEnhancers(applyMiddleware(thunk))));
   }

tsconfig.json

@@ -4,7 +4,7 @@
     "outDir": "public/dist",
     "target": "es5",
     "lib": ["es6", "dom"],
-    "rootDir": "public/",
+    "rootDirs": ["public/"],
     "jsx": "react",
     "module": "esnext",
     "declaration": false,