Removed unnecessary code from ColorPicker and extended theme type

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

@@ -1,8 +1,8 @@
 import React, { Component, createRef } from 'react';
 import PopperController from '../Tooltip/PopperController';
-import Popper, { RenderPopperArrowFn } from '../Tooltip/Popper';
+import Popper from '../Tooltip/Popper';
 import { ColorPickerPopover } from './ColorPickerPopover';
-import { GrafanaThemeType, Themeable } from '../../types';
+import { Themeable } from '../../types';
 import { getColorFromHexRgbOrName } from '../../utils/namedColorsPalette';
 import { SeriesColorPickerPopover } from './SeriesColorPickerPopover';
 import propDeprecationWarning from '../../utils/propDeprecationWarning';
@@ -18,7 +18,6 @@ export interface ColorPickerProps extends Themeable {
    */
   onColorChange?: ColorPickerChangeHandler;
   enableNamedColors?: boolean;
-  withArrow?: boolean;
   children?: JSX.Element;
 }
 
@@ -32,7 +31,6 @@ export const warnAboutColorPickerPropsDeprecation = (componentName: string, prop
 export const colorPickerFactory = <T extends ColorPickerProps>(
   popover: React.ComponentType<T>,
   displayName = 'ColorPicker',
-  renderPopoverArrowFunction?: RenderPopperArrowFn
 ) => {
   return class ColorPicker extends Component<T, any> {
     static displayName = displayName;
@@ -50,17 +48,7 @@ export const colorPickerFactory = <T extends ColorPickerProps>(
         ...this.props,
         onChange: this.handleColorChange,
       });
-      const { theme, withArrow, children } = this.props;
+      const { theme, children } = this.props;
-
-      const renderArrow: RenderPopperArrowFn = ({ arrowProps, placement }) => {
-        return (
-          <div
-            {...arrowProps}
-            data-placement={placement}
-            className={`ColorPicker__arrow ColorPicker__arrow--${theme.type === GrafanaThemeType.Light ? 'light' : 'dark'}`}
-          />
-        );
-      };
 
       return (
         <PopperController content={popoverElement} hideAfter={300}>
@@ -72,7 +60,6 @@ export const colorPickerFactory = <T extends ColorPickerProps>(
                     {...popperProps}
                     referenceElement={this.pickerTriggerRef.current}
                     wrapperClassName="ColorPicker"
-                    renderArrow={withArrow && (renderPopoverArrowFunction || renderArrow)}
                     onMouseLeave={hidePopper}
                     onMouseEnter={showPopper}
                   />

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

@@ -57,7 +57,12 @@ const darkTheme = {
     linkColorHover: basicColors.white,
     linkColorExternal: basicColors.blue,
     headingColor: new tinycolor(basicColors.white).darken(11).toString(),
-  }
+  },
-}
+  background: {
+    dropdown: basicColors.dark3,
+    scrollbar: '#aeb5df',
+    scrollbar2: '#3a3a3a',
+  },
+};
 
 module.exports = darkTheme;

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

@@ -41,6 +41,21 @@ const theme = {
     m: '768px',
     l: '992px',
     xl: '1200px'
+  },
+  spacing: {
+    xs: '0',
+    s: '0.2rem',
+    m: '1rem',
+    l: '1.5rem',
+    xl: '3rem',
+    gutter: '30px',
+  },
+  border: {
+    radius: {
+      xs: '2px',
+      s: '3px',
+      m: '5px',
+    }
   }
 };
 

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

@@ -60,6 +60,11 @@ const lightTheme/*: GrafanaThemeType*/ = {
     linkColorHover: new tinycolor(basicColors.gray1).darken(20).toString(),
     linkColorExternal: basicColors.blueLight,
     headingColor: basicColors.gray1,
+  },
+  background: {
+    dropdown: basicColors.white,
+    scrollbar: basicColors.gray5,
+    scrollbar2: basicColors.gray5,
   }
 }
 

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

@@ -62,6 +62,11 @@ export interface GrafanaTheme {
       m: string;
     };
   };
+  background: {
+    dropdown: string;
+    scrollbar: string;
+    scrollbar2: string;
+  };
   colors: {
     black: string;
     white: string;
@@ -102,7 +107,7 @@ export interface GrafanaTheme {
     warn: string;
     critical: string;
 
-    // TODO: should this be a part of theme?
+    // TODO: move to background section
     bodyBg: string;
     pageBg: string;
     bodyColor: string;