Theme: Refactoring theme colors variables (#23513)

* Theme: Typography updates

* Updated

* Updated snapshot

* Renamed colors to palette

* Introduce colors namespace

* Massive theme color move

* Removing color selection logic with more abstract concepts

* Updates

* Minor sidemenu change

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

@@ -112,13 +112,7 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
   type: GrafanaThemeType;
   isDark: boolean;
   isLight: boolean;
-  background: {
+  palette: {
-    dropdown: string;
-    scrollbar: string;
-    scrollbar2: string;
-    pageHeader: string;
-  };
-  colors: {
     black: string;
     white: string;
     dark1: string;
@@ -160,7 +154,6 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
     red88: string;
 
     grayBlue: string;
-    inputBlack: string;
 
     // Accent colors
     blue: string;
@@ -192,6 +185,24 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
     online: string;
     warn: string;
     critical: string;
+  };
+  colors: {
+    bg1: string;
+    bg2: string;
+    bg3: string;
+    border1: string;
+    border2: string;
+
+    dashboardBg: string;
+    bodyBg: string;
+    panelBg: string;
+    panelBorder: string;
+    pageHeaderBg: string;
+    pageHeaderBorder: string;
+
+    dropdownBg: string;
+    dropdownShadow: string;
+    dropdownOptionHoverBg: string;
 
     // Link colors
     link: string;
@@ -200,25 +211,13 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
     linkExternal: string;
 
     // Text colors
-    body: string;
     text: string;
     textStrong: string;
     textWeak: string;
     textFaint: string;
     textEmphasis: string;
-
-    // panel
-    panelBg: string;
-    panelBorder: string;
-
-    // TODO: move to background section
-    bodyBg: string;
-    pageBg: string;
-    pageHeaderBg: string;
     headingColor: string;
 
-    pageHeaderBorder: string;
-
     // Next-gen forms functional colors
     formLabel: string;
     formDescription: string;
@@ -248,7 +247,4 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
     formCheckboxBgCheckedHover: string;
     formCheckboxCheckmark: string;
   };
-  shadow: {
-    pageHeader: string;
-  };
 }

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

@@ -9,12 +9,12 @@ const createTheme = (theme: GrafanaTheme) => {
   return create({
     base: theme.name.includes('Light') ? 'light' : 'dark',
 
-    colorPrimary: theme.colors.brandPrimary,
+    colorPrimary: theme.palette.brandPrimary,
-    colorSecondary: theme.colors.brandPrimary,
+    colorSecondary: theme.palette.brandPrimary,
 
     // UI
-    appBg: theme.colors.pageBg,
+    appBg: theme.colors.bodyBg,
-    appContentBg: theme.colors.pageBg,
+    appContentBg: theme.colors.bodyBg,
     appBorderColor: theme.colors.pageHeaderBorder,
     appBorderRadius: 4,
 
@@ -28,8 +28,8 @@ const createTheme = (theme: GrafanaTheme) => {
 
     // Toolbar default and active colors
     barTextColor: theme.colors.formInputBorderActive,
-    barSelectedColor: theme.colors.brandPrimary,
+    barSelectedColor: theme.palette.brandPrimary,
-    barBg: theme.colors.pageBg,
+    barBg: theme.colors.pageHeaderBg,
 
     // Form colors
     inputBg: theme.colors.formInputBg,

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

@@ -16,8 +16,8 @@ export const AlphaNotice: FC<Props> = ({ state, text, className }) => {
   const styles = cx(
     className,
     css`
-      background: linear-gradient(to bottom, ${theme.colors.blueBase}, ${theme.colors.blueShade});
+      background: linear-gradient(to bottom, ${theme.palette.blueBase}, ${theme.palette.blueShade});
-      color: ${theme.colors.gray7};
+      color: ${theme.palette.gray7};
       white-space: nowrap;
       border-radius: 3px;
       text-shadow: none;

packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx

@@ -115,7 +115,7 @@ export abstract class BigValueLayout {
         panelStyles.background = `linear-gradient(120deg, ${bgColor2}, ${bgColor3})`;
         break;
       case BigValueColorMode.Value:
-        panelStyles.background = `${theme.colors.panelBg}`;
+        panelStyles.background = `transparent`;
         break;
     }
 

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

@@ -25,7 +25,7 @@ const buttonVariantStyles = (from: string, to: string, textColor: string) => css
 const getPropertiesForVariant = (theme: GrafanaTheme, variant: ButtonVariant) => {
   switch (variant) {
     case 'secondary':
-      const from = theme.isLight ? theme.colors.gray7 : theme.colors.gray15;
+      const from = theme.isLight ? theme.palette.gray7 : theme.palette.gray15;
       const to = theme.isLight
         ? tinycolor(from)
             .darken(5)
@@ -34,14 +34,14 @@ const getPropertiesForVariant = (theme: GrafanaTheme, variant: ButtonVariant) =>
             .lighten(4)
             .toString();
       return {
-        borderColor: theme.isLight ? theme.colors.gray85 : theme.colors.gray25,
+        borderColor: theme.isLight ? theme.palette.gray85 : theme.palette.gray25,
-        background: buttonVariantStyles(from, to, theme.isLight ? theme.colors.gray25 : theme.colors.gray4),
+        background: buttonVariantStyles(from, to, theme.isLight ? theme.palette.gray25 : theme.palette.gray4),
       };
 
     case 'destructive':
       return {
-        borderColor: theme.colors.redShade,
+        borderColor: theme.palette.redShade,
-        background: buttonVariantStyles(theme.colors.redBase, theme.colors.redShade, theme.colors.white),
+        background: buttonVariantStyles(theme.palette.redBase, theme.palette.redShade, theme.palette.white),
       };
 
     case 'link':
@@ -58,8 +58,8 @@ const getPropertiesForVariant = (theme: GrafanaTheme, variant: ButtonVariant) =>
     case 'primary':
     default:
       return {
-        borderColor: theme.colors.blueShade,
+        borderColor: theme.palette.blueShade,
-        background: buttonVariantStyles(theme.colors.blueBase, theme.colors.blueShade, theme.colors.white),
+        background: buttonVariantStyles(theme.palette.blueBase, theme.palette.blueShade, theme.palette.white),
       };
   }
 };

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

@@ -16,7 +16,7 @@ const getCallToActionCardStyles = stylesFactory((theme: GrafanaTheme) => ({
   wrapper: css`
     label: call-to-action-card;
     padding: ${theme.spacing.lg};
-    background: ${selectThemeVariant({ light: theme.colors.gray6, dark: theme.colors.grayBlue }, theme.type)};
+    background: ${selectThemeVariant({ light: theme.palette.gray6, dark: theme.palette.grayBlue }, theme.type)};
     border-radius: ${theme.border.radius.md};
     display: flex;
     flex-direction: column;

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

@@ -13,7 +13,7 @@ interface TooltipContainerProps {
 }
 
 const getTooltipContainerStyles = stylesFactory((theme: GrafanaTheme) => {
-  const bgColor = selectThemeVariant({ light: theme.colors.gray5, dark: theme.colors.dark1 }, theme.type);
+  const bgColor = selectThemeVariant({ light: theme.palette.gray5, dark: theme.palette.dark1 }, theme.type);
   return {
     wrapper: css`
       overflow: hidden;

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

@@ -36,7 +36,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({
       animation: loader 2s cubic-bezier(0.17, 0.67, 0.83, 0.67) 500ms;
       animation-iteration-count: 100;
       left: -25%;
-      background: ${theme.colors.blue};
+      background: ${theme.palette.blue};
     }
     @keyframes loader {
       from {

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

@@ -33,8 +33,8 @@ export const ColorSwatch: FunctionComponent<ColorSwatchProps> = ({
 
   const selectedSwatchBorder = selectThemeVariant(
     {
-      light: theme.colors.white,
+      light: theme.palette.white,
-      dark: theme.colors.black,
+      dark: theme.palette.black,
     },
     theme.type
   );

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

@@ -17,8 +17,8 @@ const SpectrumPalettePointer: React.FunctionComponent<SpectrumPalettePointerProp
 
   const pointerColor = selectThemeVariant(
     {
-      light: theme.colors.dark3,
+      light: theme.palette.dark3,
-      dark: theme.colors.gray2,
+      dark: theme.palette.gray2,
     },
     theme.type
   );

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

@@ -31,7 +31,7 @@ export interface ContextMenuProps {
 const getContextMenuStyles = stylesFactory((theme: GrafanaTheme) => {
   const linkColor = selectThemeVariant(
     {
-      light: theme.colors.dark2,
+      light: theme.palette.dark2,
       dark: theme.colors.text,
     },
     theme.type
@@ -39,35 +39,35 @@ const getContextMenuStyles = stylesFactory((theme: GrafanaTheme) => {
   const linkColorHover = selectThemeVariant(
     {
       light: theme.colors.link,
-      dark: theme.colors.white,
+      dark: theme.palette.white,
     },
     theme.type
   );
   const wrapperBg = selectThemeVariant(
     {
-      light: theme.colors.gray7,
+      light: theme.palette.gray7,
-      dark: theme.colors.dark2,
+      dark: theme.palette.dark2,
     },
     theme.type
   );
   const wrapperShadow = selectThemeVariant(
     {
-      light: theme.colors.gray3,
+      light: theme.palette.gray3,
-      dark: theme.colors.black,
+      dark: theme.palette.black,
     },
     theme.type
   );
   const itemColor = selectThemeVariant(
     {
-      light: theme.colors.black,
+      light: theme.palette.black,
-      dark: theme.colors.white,
+      dark: theme.palette.white,
     },
     theme.type
   );
 
   const groupLabelColor = selectThemeVariant(
     {
-      light: theme.colors.gray1,
+      light: theme.palette.gray1,
       dark: theme.colors.textWeak,
     },
     theme.type
@@ -75,22 +75,22 @@ const getContextMenuStyles = stylesFactory((theme: GrafanaTheme) => {
 
   const itemBgHover = selectThemeVariant(
     {
-      light: theme.colors.gray5,
+      light: theme.palette.gray5,
-      dark: theme.colors.dark7,
+      dark: theme.palette.dark7,
     },
     theme.type
   );
   const headerBg = selectThemeVariant(
     {
-      light: theme.colors.white,
+      light: theme.palette.white,
-      dark: theme.colors.dark1,
+      dark: theme.palette.dark1,
     },
     theme.type
   );
   const headerSeparator = selectThemeVariant(
     {
-      light: theme.colors.white,
+      light: theme.palette.white,
-      dark: theme.colors.dark7,
+      dark: theme.palette.dark7,
     },
     theme.type
   );

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

@@ -35,10 +35,10 @@ const plugins = [
 const getStyles = stylesFactory((theme: GrafanaTheme) => ({
   editor: css`
     .token.builtInVariable {
-      color: ${theme.colors.queryGreen};
+      color: ${theme.palette.queryGreen};
     }
     .token.variable {
-      color: ${theme.colors.queryKeyword};
+      color: ${theme.palette.queryKeyword};
     }
   `,
 }));

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

@@ -18,48 +18,48 @@ interface DataLinkSuggestionsProps {
 const getStyles = stylesFactory((theme: GrafanaTheme) => {
   const wrapperBg = selectThemeVariant(
     {
-      light: theme.colors.white,
+      light: theme.palette.white,
-      dark: theme.colors.dark2,
+      dark: theme.palette.dark2,
     },
     theme.type
   );
 
   const wrapperShadow = selectThemeVariant(
     {
-      light: theme.colors.gray5,
+      light: theme.palette.gray5,
-      dark: theme.colors.black,
+      dark: theme.palette.black,
     },
     theme.type
   );
 
   const itemColor = selectThemeVariant(
     {
-      light: theme.colors.black,
+      light: theme.palette.black,
-      dark: theme.colors.white,
+      dark: theme.palette.white,
     },
     theme.type
   );
 
   const itemDocsColor = selectThemeVariant(
     {
-      light: theme.colors.dark3,
+      light: theme.palette.dark3,
-      dark: theme.colors.gray2,
+      dark: theme.palette.gray2,
     },
     theme.type
   );
 
   const itemBgHover = selectThemeVariant(
     {
-      light: theme.colors.gray5,
+      light: theme.palette.gray5,
-      dark: theme.colors.dark7,
+      dark: theme.palette.dark7,
     },
     theme.type
   );
 
   const itemBgActive = selectThemeVariant(
     {
-      light: theme.colors.gray6,
+      light: theme.palette.gray6,
-      dark: theme.colors.dark9,
+      dark: theme.palette.dark9,
     },
     theme.type
   );

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

@@ -111,16 +111,16 @@ export const DataLinksInlineEditor: React.FC<DataLinksInlineEditorProps> = ({ li
 const getDataLinksInlineEditorStyles = stylesFactory((theme: GrafanaTheme) => {
   const borderColor = selectThemeVariant(
     {
-      light: theme.colors.gray85,
+      light: theme.palette.gray85,
-      dark: theme.colors.dark9,
+      dark: theme.palette.dark9,
     },
     theme.type
   );
 
   const shadow = selectThemeVariant(
     {
-      light: theme.colors.gray85,
+      light: theme.palette.gray85,
-      dark: theme.colors.black,
+      dark: theme.palette.black,
     },
     theme.type
   );

packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksListItem.tsx

@@ -56,15 +56,15 @@ export const DataLinksListItem: FC<DataLinksListItemProps> = ({
 const getDataLinkListItemStyles = stylesFactory((theme: GrafanaTheme) => {
   const borderColor = selectThemeVariant(
     {
-      light: theme.colors.gray85,
+      light: theme.palette.gray85,
-      dark: theme.colors.dark9,
+      dark: theme.palette.dark9,
     },
     theme.type
   );
   const bg = selectThemeVariant(
     {
-      light: theme.colors.white,
+      light: theme.palette.white,
-      dark: theme.colors.dark1,
+      dark: theme.palette.dark1,
     },
     theme.type
   );
@@ -92,7 +92,7 @@ const getDataLinkListItemStyles = stylesFactory((theme: GrafanaTheme) => {
       font-size: ${theme.typography.size.sm};
     `,
     remove: css`
-      color: ${theme.colors.red88};
+      color: ${theme.palette.red88};
     `,
   };
 });

packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx

@@ -104,7 +104,7 @@ export const DataSourceHttpSettings: React.FC<HttpSettingsProps> = props => {
   );
 
   const notValidStyle = css`
-    box-shadow: inset 0 0px 5px ${theme.colors.red};
+    box-shadow: inset 0 0px 5px ${theme.palette.red};
   `;
 
   const inputStyle = cx({ [`width-20`]: true, [notValidStyle]: !isValidUrl });

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

@@ -3,7 +3,7 @@ import { GrafanaTheme } from '@grafana/data';
 import RcDrawer from 'rc-drawer';
 import { css } from 'emotion';
 import CustomScrollbar from '../CustomScrollbar/CustomScrollbar';
-import { stylesFactory, useTheme, selectThemeVariant } from '../../themes';
+import { stylesFactory, useTheme } from '../../themes';
 
 export interface Props {
   children: ReactNode;
@@ -24,17 +24,12 @@ export interface Props {
 
 const getStyles = stylesFactory((theme: GrafanaTheme, scollableContent: boolean) => {
   const closeButtonWidth = '50px';
-  const borderColor = selectThemeVariant(
+  const borderColor = theme.colors.border2;
-    {
+
-      light: theme.colors.gray4,
-      dark: theme.colors.dark9,
-    },
-    theme.type
-  );
   return {
     drawer: css`
       .drawer-content {
-        background-color: ${theme.colors.pageBg};
+        background-color: ${theme.colors.bodyBg};
         display: flex;
         flex-direction: column;
         overflow: hidden;

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

@@ -37,8 +37,8 @@ export const FieldConfigItemHeaderTitle: React.FC<FieldConfigItemHeaderTitleProp
 const getFieldConfigItemHeaderTitleStyles = stylesFactory((theme: GrafanaTheme) => {
   const headerBg = selectThemeVariant(
     {
-      light: theme.colors.white,
+      light: theme.palette.white,
-      dark: theme.colors.dark1,
+      dark: theme.palette.dark1,
     },
     theme.type
   );
@@ -57,7 +57,7 @@ const getFieldConfigItemHeaderTitleStyles = stylesFactory((theme: GrafanaTheme)
       flex-grow: 0;
       flex-shrink: 0;
       cursor: pointer;
-      color: ${theme.colors.red88};
+      color: ${theme.palette.red88};
     `,
   };
 });

packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx

@@ -19,7 +19,7 @@ export interface RadioButtonProps {
 const getRadioButtonStyles = stylesFactory((theme: GrafanaTheme, size: RadioButtonSize, fullWidth?: boolean) => {
   const { fontSize, height } = getPropertiesForButtonSize(theme, size);
   const horizontalPadding = theme.spacing[size] ?? theme.spacing.md;
-  const c = theme.colors;
+  const c = theme.palette;
 
   const textColor = theme.isLight ? c.gray33 : c.gray70;
   const textColorHover = theme.isLight ? c.blueShade : c.blueLight;
@@ -27,7 +27,7 @@ const getRadioButtonStyles = stylesFactory((theme: GrafanaTheme, size: RadioButt
   const borderColor = theme.isLight ? c.gray4 : c.gray25;
   const borderColorHover = theme.isLight ? c.gray70 : c.gray33;
   const borderColorActive = theme.isLight ? c.blueShade : c.blueLight;
-  const bg = c.pageBg;
+  const bg = theme.colors.bodyBg;
   const bgDisabled = theme.isLight ? c.gray95 : c.gray15;
   const bgActive = theme.isLight ? c.white : c.gray05;
 

packages/grafana-ui/src/components/Forms/commonStyles.ts

@@ -6,7 +6,7 @@ import { IconName } from '../../types';
 export const getFocusCss = (theme: GrafanaTheme) => `
   outline: 2px dotted transparent;
   outline-offset: 2px;
-  box-shadow: 0 0 0 2px ${theme.colors.pageBg}, 0 0 0px 4px ${theme.colors.formFocusOutline};
+  box-shadow: 0 0 0 2px ${theme.colors.bodyBg}, 0 0 0px 4px ${theme.colors.formFocusOutline};
   transition: all 0.2s cubic-bezier(0.19, 1, 0.22, 1);
 `;
 
@@ -18,7 +18,7 @@ export const getFocusStyle = (theme: GrafanaTheme) => css`
 
 export const sharedInputStyle = (theme: GrafanaTheme, invalid = false) => {
   const colors = theme.colors;
-  const borderColor = invalid ? colors.redBase : colors.formInputBorder;
+  const borderColor = invalid ? theme.palette.redBase : colors.formInputBorder;
 
   return css`
     background-color: ${colors.formInputBg};
@@ -36,7 +36,7 @@ export const sharedInputStyle = (theme: GrafanaTheme, invalid = false) => {
 
     &:-webkit-autofill:focus {
       /* Welcome to 2005. This is a HACK to get rid od Chromes default autofill styling */
-      box-shadow: 0 0 0 2px ${theme.colors.pageBg}, 0 0 0px 4px ${theme.colors.formFocusOutline},
+      box-shadow: 0 0 0 2px ${theme.colors.bodyBg}, 0 0 0px 4px ${theme.colors.formFocusOutline},
         inset 0 0 0 1px rgba(255, 255, 255, 0), inset 0 0 0 100px ${colors.formInputBg}!important;
     }
 

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

@@ -102,8 +102,8 @@ export class Gauge extends PureComponent<Props> {
 
     const backgroundColor = selectThemeVariant(
       {
-        dark: theme.colors.dark8,
+        dark: theme.palette.dark8,
-        light: theme.colors.gray6,
+        light: theme.palette.gray6,
       },
       theme.type
     );

packages/grafana-ui/src/components/Graph/GraphLegend.tsx

@@ -63,8 +63,8 @@ export const GraphLegend: React.FunctionComponent<GraphLegendProps> = ({
 
     const legendTableEvenRowBackground = selectThemeVariant(
       {
-        dark: theme.colors.dark6,
+        dark: theme.palette.dark6,
-        light: theme.colors.gray5,
+        light: theme.palette.gray5,
       },
       theme.type
     );

packages/grafana-ui/src/components/Graph/GraphLegendItem.tsx

@@ -79,7 +79,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
       text-align: right;
     `,
     yAxisLabel: css`
-      color: ${theme.colors.gray2};
+      color: ${theme.palette.gray2};
     `,
   };
 });

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

@@ -24,8 +24,8 @@ const IconWrapper: React.FC<{ name: IconName }> = ({ name }) => {
   const theme = useTheme();
   const borderColor = selectThemeVariant(
     {
-      light: theme.colors.gray5,
+      light: theme.palette.gray5,
-      dark: theme.colors.dark6,
+      dark: theme.palette.dark6,
     },
     theme.type
   );

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

@@ -26,7 +26,7 @@ const getIconStyles = stylesFactory((theme: GrafanaTheme) => {
       fill: currentColor;
     `,
     orange: css`
-      fill: ${theme.colors.orange};
+      fill: ${theme.palette.orange};
     `,
   };
 });

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

@@ -35,7 +35,7 @@ function renderScenario(surface: string, theme: GrafanaTheme, sizes: IconSize[],
       bg = theme.colors.bodyBg;
       break;
     case 'panel':
-      bg = theme.colors.pageBg;
+      bg = theme.colors.bodyBg;
       break;
     case 'header': {
       bg = theme.colors.pageHeaderBg;

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

@@ -46,11 +46,11 @@ export const IconButton = React.forwardRef<HTMLButtonElement, Props>(
 function getHoverColor(theme: GrafanaTheme, surface: SurfaceType): string {
   switch (surface) {
     case 'body':
-      return theme.isLight ? theme.colors.gray95 : theme.colors.gray15;
+      return theme.isLight ? theme.palette.gray95 : theme.palette.gray15;
     case 'panel':
-      return theme.isLight ? theme.colors.gray6 : theme.colors.gray25;
+      return theme.isLight ? theme.palette.gray6 : theme.palette.gray25;
     case 'header':
-      return theme.isLight ? theme.colors.gray85 : theme.colors.gray25;
+      return theme.isLight ? theme.palette.gray85 : theme.palette.gray25;
   }
 }
 

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

@@ -29,7 +29,7 @@ interface StyleDeps {
 }
 
 export const getInputStyles = stylesFactory(({ theme, invalid = false }: StyleDeps) => {
-  const colors = theme.colors;
+  const { palette, colors } = theme;
   const borderRadius = theme.border.radius.sm;
   const height = theme.spacing.formInputHeight;
 
@@ -47,6 +47,7 @@ export const getInputStyles = stylesFactory(({ theme, invalid = false }: StyleDe
     height: 100%;
     /* Min width specified for prefix/suffix classes used outside React component*/
     min-width: ${prefixSuffixStaticWidth};
+    color: ${theme.colors.textWeak};
   `;
 
   return {
@@ -62,7 +63,7 @@ export const getInputStyles = stylesFactory(({ theme, invalid = false }: StyleDe
           > .prefix,
           .suffix,
           .input {
-            border-color: ${invalid ? colors.redBase : colors.formInputBorder};
+            border-color: ${invalid ? palette.redBase : colors.formInputBorder};
           }
 
           // only show number buttons on hover

packages/grafana-ui/src/components/Legend/LegendTable.tsx

@@ -40,7 +40,7 @@ export const LegendTable: React.FunctionComponent<LegendTableProps> = ({
               <th
                 key={columnHeader}
                 className={css`
-                  color: ${theme.colors.blue};
+                  color: ${theme.palette.blue};
                   font-weight: bold;
                   text-align: right;
                   cursor: pointer;

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

@@ -41,7 +41,7 @@ export interface Props extends Themeable {
 }
 
 const getStyles = stylesFactory((theme: GrafanaTheme) => {
-  const bgColor = selectThemeVariant({ light: theme.colors.gray7, dark: theme.colors.dark2 }, theme.type);
+  const bgColor = selectThemeVariant({ light: theme.palette.gray7, dark: theme.palette.dark2 }, theme.type);
   return {
     hoverBackground: css`
       label: hoverBackground;

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

@@ -15,8 +15,8 @@ const STATS_ROW_LIMIT = 5;
 const getStyles = stylesFactory((theme: GrafanaTheme) => {
   const borderColor = selectThemeVariant(
     {
-      light: theme.colors.gray5,
+      light: theme.palette.gray5,
-      dark: theme.colors.dark9,
+      dark: theme.palette.dark9,
     },
     theme.type
   );

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

@@ -11,7 +11,7 @@ const getStyles = (theme: GrafanaTheme) => ({
   `,
   logsStatsRowActive: css`
     label: logs-stats-row--active;
-    color: ${theme.colors.blue};
+    color: ${theme.palette.blue};
     position: relative;
   `,
   logsStatsRowLabel: css`
@@ -47,7 +47,7 @@ const getStyles = (theme: GrafanaTheme) => ({
     height: 4px;
     overflow: hidden;
     background: ${theme.colors.textFaint};
-    background: ${theme.colors.blue};
+    background: ${theme.palette.blue};
   `,
 });
 

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

@@ -22,7 +22,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
       label: logs-label;
       display: flex;
       padding: 0 2px;
-      background-color: ${selectThemeVariant({ light: theme.colors.gray5, dark: theme.colors.dark6 }, theme.type)};
+      background-color: ${selectThemeVariant({ light: theme.palette.gray5, dark: theme.palette.dark6 }, theme.type)};
       border-radius: ${theme.border.radius};
       margin: 1px 4px 0 0;
       text-overflow: ellipsis;

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

@@ -44,7 +44,7 @@ interface State {
 }
 
 const getStyles = stylesFactory((theme: GrafanaTheme) => {
-  const bgColor = selectThemeVariant({ light: theme.colors.gray7, dark: theme.colors.dark2 }, theme.type);
+  const bgColor = selectThemeVariant({ light: theme.palette.gray7, dark: theme.palette.dark2 }, theme.type);
   return {
     topVerticalAlign: css`
       label: topVerticalAlign;

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

@@ -24,30 +24,30 @@ interface LogRowContextProps {
 const getLogRowContextStyles = (theme: GrafanaTheme) => {
   const gradientTop = selectThemeVariant(
     {
-      light: theme.colors.white,
+      light: theme.palette.white,
-      dark: theme.colors.dark1,
+      dark: theme.palette.dark1,
     },
     theme.type
   );
   const gradientBottom = selectThemeVariant(
     {
-      light: theme.colors.gray7,
+      light: theme.palette.gray7,
-      dark: theme.colors.dark2,
+      dark: theme.palette.dark2,
     },
     theme.type
   );
 
   const boxShadowColor = selectThemeVariant(
     {
-      light: theme.colors.gray5,
+      light: theme.palette.gray5,
-      dark: theme.colors.black,
+      dark: theme.palette.black,
     },
     theme.type
   );
   const borderColor = selectThemeVariant(
     {
-      light: theme.colors.gray5,
+      light: theme.palette.gray5,
-      dark: theme.colors.dark9,
+      dark: theme.palette.dark9,
     },
     theme.type
   );
@@ -60,7 +60,7 @@ const getLogRowContextStyles = (theme: GrafanaTheme) => {
       height: 250px;
       z-index: 2;
       overflow: hidden;
-      background: ${theme.colors.pageBg};
+      background: ${theme.colors.bodyBg};
       background: linear-gradient(180deg, ${gradientTop} 0%, ${gradientBottom} 104.25%);
       box-shadow: 0px 2px 4px ${boxShadowColor}, 0px 0px 2px ${boxShadowColor};
       border: 1px solid ${borderColor};

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

@@ -33,8 +33,8 @@ interface Props extends Themeable {
 const getStyles = stylesFactory((theme: GrafanaTheme) => {
   const outlineColor = selectThemeVariant(
     {
-      light: theme.colors.white,
+      light: theme.palette.white,
-      dark: theme.colors.black,
+      dark: theme.palette.black,
     },
     theme.type
   );

packages/grafana-ui/src/components/Logs/getLogRowStyles.ts

@@ -6,9 +6,9 @@ import { selectThemeVariant } from '../../themes/selectThemeVariant';
 import { stylesFactory } from '../../themes';
 
 export const getLogRowStyles = stylesFactory((theme: GrafanaTheme, logLevel?: LogLevel) => {
-  let logColor = selectThemeVariant({ light: theme.colors.gray5, dark: theme.colors.gray2 }, theme.type);
+  let logColor = selectThemeVariant({ light: theme.palette.gray5, dark: theme.palette.gray2 }, theme.type);
-  const borderColor = selectThemeVariant({ light: theme.colors.gray5, dark: theme.colors.gray2 }, theme.type);
+  const borderColor = selectThemeVariant({ light: theme.palette.gray5, dark: theme.palette.gray2 }, theme.type);
-  const bgColor = selectThemeVariant({ light: theme.colors.gray5, dark: theme.colors.dark4 }, theme.type);
+  const bgColor = selectThemeVariant({ light: theme.palette.gray5, dark: theme.palette.dark4 }, theme.type);
   const context = css`
     label: context;
     visibility: hidden;
@@ -27,7 +27,7 @@ export const getLogRowStyles = stylesFactory((theme: GrafanaTheme, logLevel?: Lo
       break;
     case LogLevel.warning:
     case LogLevel.warn:
-      logColor = theme.colors.yellow;
+      logColor = theme.palette.yellow;
       break;
     case LogLevel.info:
       logColor = '#7eb26d';
@@ -45,12 +45,12 @@ export const getLogRowStyles = stylesFactory((theme: GrafanaTheme, logLevel?: Lo
       label: logs-row__match-highlight;
       background: inherit;
       padding: inherit;
-      color: ${theme.colors.yellow};
+      color: ${theme.palette.yellow};
-      background-color: rgba(${theme.colors.yellow}, 0.1);
+      background-color: rgba(${theme.palette.yellow}, 0.1);
     `,
     logsRowMatchHighLightPreview: css`
       label: logs-row__match-highlight--preview;
-      background-color: rgba(${theme.colors.yellow}, 0.2);
+      background-color: rgba(${theme.palette.yellow}, 0.2);
       border-bottom-style: dotted;
     `,
     logsRowsTable: css`
@@ -76,7 +76,7 @@ export const getLogRowStyles = stylesFactory((theme: GrafanaTheme, logLevel?: Lo
           margin-left: 10px;
           text-decoration: underline;
           &:hover {
-            color: ${theme.colors.yellow};
+            color: ${theme.palette.yellow};
           }
         }
       }
@@ -92,7 +92,7 @@ export const getLogRowStyles = stylesFactory((theme: GrafanaTheme, logLevel?: Lo
       }
 
       &:hover {
-        background: ${theme.colors.pageBg};
+        background: ${theme.colors.bodyBg};
       }
     `,
     logsRowDuplicates: css`
@@ -158,7 +158,7 @@ export const getLogRowStyles = stylesFactory((theme: GrafanaTheme, logLevel?: Lo
     logsDetailsIcon: css`
       label: logs-row-details__icon;
       position: relative;
-      color: ${theme.colors.gray3};
+      color: ${theme.palette.gray3};
       svg {
         margin-right: ${theme.spacing.md};
       }

packages/grafana-ui/src/components/Modal/getModalStyles.ts

@@ -1,20 +1,15 @@
 import { css } from 'emotion';
 import { GrafanaTheme } from '@grafana/data';
-import { selectThemeVariant, stylesFactory } from '../../themes';
+import { stylesFactory } from '../../themes';
 
 export const getModalStyles = stylesFactory((theme: GrafanaTheme) => {
-  const backdropBackground = selectThemeVariant(
+  const backdropBackground = theme.colors.bg1;
-    {
+
-      light: theme.colors.bodyBg,
-      dark: theme.colors.gray25,
-    },
-    theme.type
-  );
   return {
     modal: css`
       position: fixed;
       z-index: ${theme.zIndex.modal};
-      background: ${theme.colors.pageBg};
+      background: ${theme.colors.bodyBg};
       box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
       background-clip: padding-box;
       outline: none;
@@ -37,8 +32,8 @@ export const getModalStyles = stylesFactory((theme: GrafanaTheme) => {
       opacity: 0.7;
     `,
     modalHeader: css`
-      background: ${theme.colors.pageHeaderBg};
+      background: ${theme.colors.bg1};
-      box-shadow: ${theme.shadow.pageHeader};
+      box-shadow: 0 0 20px ${theme.colors.dropdownShadow};
       border-bottom: 1px solid ${theme.colors.pageHeaderBorder};
       display: flex;
       height: 42px;

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

@@ -16,7 +16,7 @@ const getStyles = memoizeOne((theme: GrafanaTheme) => {
     selectButton: css`
       label: selectButton;
       .select-button-value {
-        color: ${theme.colors.orange};
+        color: ${theme.palette.orange};
       }
     `,
   };

packages/grafana-ui/src/components/Select/MultiValue.tsx

@@ -27,7 +27,7 @@ export const MultiValueRemove: React.FC<MultiValueRemoveProps> = ({ children, in
   const styles = getSelectStyles(theme);
   return (
     <div {...innerProps} className={styles.multiValueRemove}>
-      <Icon name="times" />
+      <Icon name="times" size="sm" />
     </div>
   );
 };

packages/grafana-ui/src/components/Select/SelectOptionGroup.tsx

@@ -20,8 +20,8 @@ interface State {
 const getSelectOptionGroupStyles = stylesFactory((theme: GrafanaTheme) => {
   const optionBorder = selectThemeVariant(
     {
-      light: theme.colors.gray4,
+      light: theme.palette.gray4,
-      dark: theme.colors.dark9,
+      dark: theme.palette.dark9,
     },
     theme.type
   );

packages/grafana-ui/src/components/Select/getSelectStyles.ts

@@ -1,14 +1,13 @@
 import { stylesFactory } from '../../themes/stylesFactory';
-import { selectThemeVariant as stv } from '../../themes/selectThemeVariant';
 import { css } from 'emotion';
 import { GrafanaTheme } from '@grafana/data';
 
 export const getSelectStyles = stylesFactory((theme: GrafanaTheme) => {
-  const bgColor = stv({ light: theme.colors.white, dark: theme.colors.formInputBg }, theme.type);
+  const bgColor = theme.colors.formInputBg;
-  const menuShadowColor = stv({ light: theme.colors.gray4, dark: theme.colors.black }, theme.type);
+  const menuShadowColor = theme.colors.dropdownShadow;
-  const optionBgHover = stv({ light: theme.colors.gray7, dark: theme.colors.gray10 }, theme.type);
+  const optionBgHover = theme.colors.dropdownOptionHoverBg;
-  const multiValueContainerBg = stv({ light: theme.colors.gray6, dark: theme.colors.gray05 }, theme.type);
+  const multiValueContainerBg = theme.colors.bg3;
-  const multiValueColor = stv({ light: theme.colors.gray25, dark: theme.colors.gray85 }, theme.type);
+  const multiValueColor = theme.colors.text;
 
   return {
     menu: css`
@@ -87,12 +86,13 @@ export const getSelectStyles = stylesFactory((theme: GrafanaTheme) => {
       line-height: 1;
       background: ${multiValueContainerBg};
       border-radius: ${theme.border.radius.sm};
-      padding: ${theme.spacing.xs} ${theme.spacing.xxs} ${theme.spacing.xs} ${theme.spacing.sm};
+      margin: 0 ${theme.spacing.sm} 0 0;
-      margin: ${theme.spacing.xxs} ${theme.spacing.xs} ${theme.spacing.xxs} 0;
+      padding: ${theme.spacing.xxs} 0 ${theme.spacing.xxs} ${theme.spacing.sm};
       color: ${multiValueColor};
+      font-size: ${theme.typography.size.sm};
     `,
     multiValueRemove: css`
-      margin-left: ${theme.spacing.xs};
+      margin: 0 ${theme.spacing.xs};
     `,
   };
 });

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

@@ -21,7 +21,7 @@ export interface Props {
 }
 
 const getStyles = stylesFactory((theme: GrafanaTheme, isHorizontal: boolean) => {
-  const trackColor = theme.isLight ? theme.colors.gray5 : theme.colors.dark6;
+  const trackColor = theme.isLight ? theme.palette.gray5 : theme.palette.dark6;
   const container = isHorizontal
     ? css`
         width: 100%;
@@ -39,28 +39,28 @@ const getStyles = stylesFactory((theme: GrafanaTheme, isHorizontal: boolean) =>
         margin-top: -10px;
       }
       .rc-slider-handle {
-        border: solid 2px ${theme.colors.blue77};
+        border: solid 2px ${theme.palette.blue77};
-        background-color: ${theme.colors.blue77};
+        background-color: ${theme.palette.blue77};
       }
       .rc-slider-handle:hover {
-        border-color: ${theme.colors.blue77};
+        border-color: ${theme.palette.blue77};
       }
       .rc-slider-handle:focus {
-        border-color: ${theme.colors.blue77};
+        border-color: ${theme.palette.blue77};
         box-shadow: none;
       }
       .rc-slider-handle:active {
-        border-color: ${theme.colors.blue77};
+        border-color: ${theme.palette.blue77};
         box-shadow: none;
       }
       .rc-slider-handle-click-focused:focus {
-        border-color: ${theme.colors.blue77};
+        border-color: ${theme.palette.blue77};
       }
       .rc-slider-dot-active {
-        border-color: ${theme.colors.blue77};
+        border-color: ${theme.palette.blue77};
       }
       .rc-slider-track {
-        background-color: ${theme.colors.blue77};
+        background-color: ${theme.palette.blue77};
       }
       .rc-slider-rail {
         background-color: ${trackColor};

packages/grafana-ui/src/components/Table/styles.ts

@@ -19,10 +19,10 @@ export interface TableStyles {
 
 export const getTableStyles = stylesFactory(
   (theme: GrafanaTheme): TableStyles => {
-    const colors = theme.colors;
+    const palette = theme.palette;
-    const headerBg = colors.panelBorder;
+    const headerBg = theme.colors.panelBorder;
-    const headerBorderColor = theme.isLight ? colors.gray70 : colors.gray05;
+    const headerBorderColor = theme.isLight ? palette.gray70 : palette.gray05;
-    const resizerColor = theme.isLight ? colors.blue77 : colors.blue95;
+    const resizerColor = theme.isLight ? palette.blue77 : palette.blue95;
     const padding = 6;
     const lineHeight = theme.typography.lineHeight.md;
     const bodyFontSize = 14;
@@ -51,7 +51,7 @@ export const getTableStyles = stylesFactory(
         padding: ${padding}px 10px;
         cursor: pointer;
         white-space: nowrap;
-        color: ${colors.blue};
+        color: ${palette.blue};
         border-right: 1px solid ${headerBorderColor};
 
         &:last-child {

packages/grafana-ui/src/components/Tabs/Tab.tsx

@@ -38,8 +38,8 @@ const getTabStyles = stylesFactory((theme: GrafanaTheme) => {
       }
     `,
     activeStyle: css`
-      border-color: ${colors.orange} ${colors.pageHeaderBorder} transparent;
+      border-color: ${theme.palette.orange} ${colors.pageHeaderBorder} transparent;
-      background: ${colors.pageBg};
+      background: ${colors.bodyBg};
       color: ${colors.link};
       overflow: hidden;
       cursor: not-allowed;

packages/grafana-ui/src/components/Tags/Tag.tsx

@@ -38,7 +38,7 @@ const getTagStyles = (theme: GrafanaTheme, name: string) => {
       line-height: ${theme.typography.lineHeight.xs};
       vertical-align: baseline;
       background-color: ${color};
-      color: ${theme.colors.white};
+      color: ${theme.palette.white};
       white-space: nowrap;
       text-shadow: none;
       padding: 3px 6px;

packages/grafana-ui/src/components/TagsInput/TagItem.tsx

@@ -16,7 +16,7 @@ const getStyles = stylesFactory(({ theme, name }: { theme: GrafanaTheme; name: s
   return {
     itemStyle: css`
       background-color: ${color};
-      color: ${theme.colors.white};
+      color: ${theme.palette.white};
       border: 1px solid ${borderColor};
       border-radius: 3px;
       padding: 3px 6px;

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

@@ -34,7 +34,7 @@ const getTextAreaStyle = stylesFactory((theme: GrafanaTheme, invalid = false) =>
         border-radius: ${theme.border.radius.sm};
         padding: ${theme.spacing.formSpacingBase / 4}px ${theme.spacing.formSpacingBase}px;
         width: 100%;
-        border-color: ${invalid ? theme.colors.redBase : theme.colors.formInputBorder};
+        border-color: ${invalid ? theme.palette.redBase : theme.colors.formInputBorder};
       `
     ),
   };

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

@@ -0,0 +1,76 @@
+import React from 'react';
+import { css, cx } from 'emotion';
+import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
+import { useTheme } from '../../themes/ThemeContext';
+
+export default {
+  title: 'General/ThemeColors',
+  component: () => {},
+  decorators: [withCenteredStory],
+  parameters: {
+    docs: {},
+  },
+};
+
+interface DemoElement {
+  name: string;
+  bg: string;
+  border?: string;
+  textColor?: string;
+  child?: DemoElement;
+}
+
+function renderElement(el: DemoElement) {
+  const style = cx(
+    css`
+      padding: 36px;
+      background: ${el.bg};
+    `,
+    el.border
+      ? css`
+          border: 1px solid ${el.border};
+        `
+      : null
+  );
+
+  return (
+    <div className={style}>
+      <div
+        className={css`
+          padding: 8px;
+        `}
+      >
+        {el.name}
+      </div>
+      {el.child && renderElement(el.child)}
+    </div>
+  );
+}
+
+export const BackgroundsAndBorders = () => {
+  const theme = useTheme();
+
+  const lvl1 = {
+    name: 'dashbord background',
+    bg: theme.colors.dashboardBg,
+    child: {
+      name: 'colors.bg1',
+      bg: theme.colors.bg1,
+      border: theme.colors.border1,
+      child: {
+        name:
+          'colors.bg2 background used for elements placed on colors.bg1. Using colors.border1 should be used on elements placed ontop of bg1',
+        bg: theme.colors.bg2,
+        border: theme.colors.border2,
+        child: {
+          name:
+            'colors.bg3 background used for elements placed on colors.bg2 with colors.border2 used for elements placed on bg2',
+          bg: theme.colors.bg3,
+          border: theme.colors.border2,
+        },
+      },
+    },
+  };
+
+  return <div>{renderElement(lvl1)}</div>;
+};

packages/grafana-ui/src/components/TimePicker/TimeOfDayPicker.tsx

@@ -2,7 +2,7 @@ import React, { FC } from 'react';
 import RcTimePicker from 'rc-time-picker';
 import { css, cx } from 'emotion';
 import { dateTime, DateTime, dateTimeAsMoment, GrafanaTheme } from '@grafana/data';
-import { useTheme, Icon, selectThemeVariant as stv } from '../../index';
+import { useTheme, Icon } from '../../index';
 import { stylesFactory } from '../../themes';
 import { inputSizes, getFocusCss } from '../Forms/commonStyles';
 import { FormInputSize } from '../Forms/types';
@@ -16,9 +16,9 @@ interface Props {
 }
 
 const getStyles = stylesFactory((theme: GrafanaTheme) => {
-  const bgColor = stv({ light: theme.colors.white, dark: theme.colors.formInputBg }, theme.type);
+  const bgColor = theme.colors.formInputBg;
-  const menuShadowColor = stv({ light: theme.colors.gray4, dark: theme.colors.black }, theme.type);
+  const menuShadowColor = theme.colors.dropdownShadow;
-  const optionBgHover = stv({ light: theme.colors.gray7, dark: theme.colors.gray10 }, theme.type);
+  const optionBgHover = theme.colors.dropdownOptionHoverBg;
   const borderRadius = theme.border.radius.sm;
   const borderColor = theme.colors.formInputBorder;
   return {
@@ -40,7 +40,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
           outline-width: 2px;
           &.rc-time-picker-panel-select-option-selected {
             background-color: inherit;
-            border: 1px solid ${theme.colors.orange};
+            border: 1px solid ${theme.palette.orange};
             border-radius: ${borderRadius};
           }
 

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

@@ -82,7 +82,7 @@ const getLabelStyles = stylesFactory((theme: GrafanaTheme) => {
       display: inline-block;
     `,
     utc: css`
-      color: ${theme.colors.orange};
+      color: ${theme.palette.orange};
       font-size: 75%;
       padding: 3px;
       font-weight: ${theme.typography.weight.semibold};

packages/grafana-ui/src/components/TimePicker/TimePickerContent/TimePickerCalendar.tsx

@@ -109,7 +109,7 @@ const getBodyStyles = stylesFactory((theme: GrafanaTheme) => {
       .react-calendar__month-view__weekdays {
         background-color: inherit;
         text-align: center;
-        color: ${theme.colors.blueShade};
+        color: ${theme.palette.blueShade};
 
         abbr {
           border: 0;
@@ -139,9 +139,9 @@ const getBodyStyles = stylesFactory((theme: GrafanaTheme) => {
 
       .react-calendar__tile--active,
       .react-calendar__tile--active:hover {
-        color: ${theme.colors.white};
+        color: ${theme.palette.white};
         font-weight: ${theme.typography.weight.semibold};
-        background: ${theme.colors.blue95};
+        background: ${theme.palette.blue95};
         box-shadow: none;
         border: 0px;
       }
@@ -150,12 +150,12 @@ const getBodyStyles = stylesFactory((theme: GrafanaTheme) => {
       .react-calendar__tile--rangeStart {
         padding: 0;
         border: 0px;
-        color: ${theme.colors.white};
+        color: ${theme.palette.white};
         font-weight: ${theme.typography.weight.semibold};
-        background: ${theme.colors.blue95};
+        background: ${theme.palette.blue95};
 
         abbr {
-          background-color: ${theme.colors.blue77};
+          background-color: ${theme.palette.blue77};
           border-radius: 100px;
           display: block;
           padding-top: 2px;

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

@@ -6,8 +6,8 @@ import { useTheme, stylesFactory, selectThemeVariant } from '../../../themes';
 const getStyles = stylesFactory((theme: GrafanaTheme) => {
   const background = selectThemeVariant(
     {
-      light: theme.colors.gray7,
+      light: theme.palette.gray7,
-      dark: theme.colors.dark3,
+      dark: theme.palette.dark3,
     },
     theme.type
   );

packages/grafana-ui/src/components/TimePicker/TimePickerContent/__snapshots__/TimePickerContent.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`TimePickerContent renders correctly in full screen 1`] = `
 <div
-  className="css-1fbt695"
+  className="css-1l5oyux"
 >
   <div
     className="css-13dsoi7"
@@ -93,7 +93,7 @@ exports[`TimePickerContent renders correctly in full screen 1`] = `
 
 exports[`TimePickerContent renders correctly in narrow screen 1`] = `
 <div
-  className="css-1fbt695"
+  className="css-1l5oyux"
 >
   <div
     className="css-13dsoi7"
@@ -184,7 +184,7 @@ exports[`TimePickerContent renders correctly in narrow screen 1`] = `
 
 exports[`TimePickerContent renders recent absolute ranges correctly 1`] = `
 <div
-  className="css-1fbt695"
+  className="css-1l5oyux"
 >
   <div
     className="css-13dsoi7"

packages/grafana-ui/src/components/TimePicker/TimePickerContent/colors.ts

@@ -5,29 +5,17 @@ export const getThemeColors = (theme: GrafanaTheme) => {
   return {
     border: selectThemeVariant(
       {
-        light: theme.colors.gray4,
+        light: theme.palette.gray4,
-        dark: theme.colors.gray25,
+        dark: theme.palette.gray25,
-      },
-      theme.type
-    ),
-    background: selectThemeVariant(
-      {
-        dark: theme.colors.dark2,
-        light: theme.background.dropdown,
-      },
-      theme.type
-    ),
-    shadow: selectThemeVariant(
-      {
-        light: theme.colors.gray85,
-        dark: theme.colors.black,
       },
       theme.type
     ),
+    background: theme.colors.dropdownBg,
+    shadow: theme.colors.dropdownShadow,
     formBackground: selectThemeVariant(
       {
-        dark: theme.colors.gray15,
+        dark: theme.palette.gray15,
-        light: theme.colors.gray98,
+        light: theme.palette.gray98,
       },
       theme.type
     ),

packages/grafana-ui/src/components/TimePicker/__snapshots__/TimePicker.test.tsx.snap

@@ -50,12 +50,6 @@ exports[`TimePicker renders buttons correctly 1`] = `
             onZoom={[Function]}
             theme={
               Object {
-                "background": Object {
-                  "dropdown": "#1f1f20",
-                  "pageHeader": "linear-gradient(90deg, #292a2d, #000000)",
-                  "scrollbar": "#343436",
-                  "scrollbar2": "#343436",
-                },
                 "border": Object {
                   "radius": Object {
                     "lg": "5px",
@@ -74,32 +68,16 @@ exports[`TimePicker renders buttons correctly 1`] = `
                   "xs": "0",
                 },
                 "colors": Object {
-                  "black": "#000000",
+                  "bg1": "#141619",
-                  "blue": "#33b5e5",
+                  "bg2": "#202226",
-                  "blue77": "#1f60c4",
+                  "bg3": "#343b40",
-                  "blue85": "#3274d9",
+                  "bodyBg": "#141619",
-                  "blue95": "#5794f2",
+                  "border1": "#202226",
-                  "blueBase": "#3274d9",
+                  "border2": "#343b40",
-                  "blueFaint": "#041126",
+                  "dashboardBg": "#0b0c0e",
-                  "blueLight": "#5794f2",
+                  "dropdownBg": "#0b0c0e",
-                  "blueShade": "#1f60c4",
+                  "dropdownOptionHoverBg": "#202226",
-                  "body": "#d8d9da",
+                  "dropdownShadow": "#000000",
-                  "bodyBg": "#0b0c0e",
-                  "brandDanger": "#e02f44",
-                  "brandPrimary": "#eb7b18",
-                  "brandSuccess": "#299c46",
-                  "brandWarning": "#eb7b18",
-                  "critical": "#e02f44",
-                  "dark1": "#141414",
-                  "dark10": "#424345",
-                  "dark2": "#161719",
-                  "dark3": "#1f1f20",
-                  "dark4": "#212124",
-                  "dark5": "#222426",
-                  "dark6": "#262628",
-                  "dark7": "#292a2d",
-                  "dark8": "#2f2f32",
-                  "dark9": "#343436",
                   "formCheckboxBg": "#222426",
                   "formCheckboxBgChecked": "#5794f2",
                   "formCheckboxBgCheckedHover": "#3274d9",
@@ -127,6 +105,54 @@ exports[`TimePicker renders buttons correctly 1`] = `
                   "formSwitchDot": "#202226",
                   "formValidationMessageBg": "#e02f44",
                   "formValidationMessageText": "#ffffff",
+                  "headingColor": "#d8d9da",
+                  "link": "#d8d9da",
+                  "linkDisabled": "#8e8e8e",
+                  "linkExternal": "#33b5e5",
+                  "linkHover": "#ffffff",
+                  "pageHeaderBg": "#202226",
+                  "pageHeaderBorder": "#202226",
+                  "panelBg": "#141619",
+                  "panelBorder": "#202226",
+                  "text": "#c7d0d9",
+                  "textEmphasis": "#ececec",
+                  "textFaint": "#222426",
+                  "textStrong": "#ffffff",
+                  "textWeak": "#8e8e8e",
+                },
+                "height": Object {
+                  "lg": "48px",
+                  "md": "32px",
+                  "sm": "24px",
+                },
+                "isDark": true,
+                "isLight": false,
+                "name": "Grafana Dark",
+                "palette": Object {
+                  "black": "#000000",
+                  "blue": "#33b5e5",
+                  "blue77": "#1f60c4",
+                  "blue85": "#3274d9",
+                  "blue95": "#5794f2",
+                  "blueBase": "#3274d9",
+                  "blueFaint": "#041126",
+                  "blueLight": "#5794f2",
+                  "blueShade": "#1f60c4",
+                  "brandDanger": "#e02f44",
+                  "brandPrimary": "#eb7b18",
+                  "brandSuccess": "#299c46",
+                  "brandWarning": "#eb7b18",
+                  "critical": "#e02f44",
+                  "dark1": "#141414",
+                  "dark10": "#424345",
+                  "dark2": "#161719",
+                  "dark3": "#1f1f20",
+                  "dark4": "#212124",
+                  "dark5": "#222426",
+                  "dark6": "#262628",
+                  "dark7": "#292a2d",
+                  "dark8": "#2f2f32",
+                  "dark9": "#343436",
                   "gray05": "#0b0c0e",
                   "gray1": "#555555",
                   "gray10": "#141619",
@@ -147,20 +173,9 @@ exports[`TimePicker renders buttons correctly 1`] = `
                   "grayBlue": "#212327",
                   "greenBase": "#299c46",
                   "greenShade": "#23843b",
-                  "headingColor": "#d8d9da",
-                  "inputBlack": "#0b0c0e",
-                  "link": "#d8d9da",
-                  "linkDisabled": "#8e8e8e",
-                  "linkExternal": "#33b5e5",
-                  "linkHover": "#ffffff",
                   "online": "#299c46",
                   "orange": "#eb7b18",
                   "orangeDark": "#ff780a",
-                  "pageBg": "#141619",
-                  "pageHeaderBg": "#202226",
-                  "pageHeaderBorder": "#202226",
-                  "panelBg": "#141619",
-                  "panelBorder": "#202226",
                   "purple": "#9933cc",
                   "queryGreen": "#74e680",
                   "queryKeyword": "#66d9ef",
@@ -171,29 +186,13 @@ exports[`TimePicker renders buttons correctly 1`] = `
                   "red88": "#e02f44",
                   "redBase": "#e02f44",
                   "redShade": "#c4162a",
-                  "text": "#c7d0d9",
-                  "textEmphasis": "#ececec",
-                  "textFaint": "#222426",
-                  "textStrong": "#ffffff",
-                  "textWeak": "#8e8e8e",
                   "variable": "#32d1df",
                   "warn": "#f79520",
                   "white": "#ffffff",
                   "yellow": "#ecbb13",
                 },
-                "height": Object {
-                  "lg": "48px",
-                  "md": "32px",
-                  "sm": "24px",
-                },
-                "isDark": true,
-                "isLight": false,
-                "name": "Grafana Dark",
                 "panelHeaderHeight": 28,
                 "panelPadding": 8,
-                "shadow": Object {
-                  "pageHeader": "inset 0px -4px 14px #1f1f20",
-                },
                 "spacing": Object {
                   "d": "14px",
                   "formButtonHeight": 32,
@@ -366,12 +365,6 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
             onZoom={[Function]}
             theme={
               Object {
-                "background": Object {
-                  "dropdown": "#1f1f20",
-                  "pageHeader": "linear-gradient(90deg, #292a2d, #000000)",
-                  "scrollbar": "#343436",
-                  "scrollbar2": "#343436",
-                },
                 "border": Object {
                   "radius": Object {
                     "lg": "5px",
@@ -390,32 +383,16 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
                   "xs": "0",
                 },
                 "colors": Object {
-                  "black": "#000000",
+                  "bg1": "#141619",
-                  "blue": "#33b5e5",
+                  "bg2": "#202226",
-                  "blue77": "#1f60c4",
+                  "bg3": "#343b40",
-                  "blue85": "#3274d9",
+                  "bodyBg": "#141619",
-                  "blue95": "#5794f2",
+                  "border1": "#202226",
-                  "blueBase": "#3274d9",
+                  "border2": "#343b40",
-                  "blueFaint": "#041126",
+                  "dashboardBg": "#0b0c0e",
-                  "blueLight": "#5794f2",
+                  "dropdownBg": "#0b0c0e",
-                  "blueShade": "#1f60c4",
+                  "dropdownOptionHoverBg": "#202226",
-                  "body": "#d8d9da",
+                  "dropdownShadow": "#000000",
-                  "bodyBg": "#0b0c0e",
-                  "brandDanger": "#e02f44",
-                  "brandPrimary": "#eb7b18",
-                  "brandSuccess": "#299c46",
-                  "brandWarning": "#eb7b18",
-                  "critical": "#e02f44",
-                  "dark1": "#141414",
-                  "dark10": "#424345",
-                  "dark2": "#161719",
-                  "dark3": "#1f1f20",
-                  "dark4": "#212124",
-                  "dark5": "#222426",
-                  "dark6": "#262628",
-                  "dark7": "#292a2d",
-                  "dark8": "#2f2f32",
-                  "dark9": "#343436",
                   "formCheckboxBg": "#222426",
                   "formCheckboxBgChecked": "#5794f2",
                   "formCheckboxBgCheckedHover": "#3274d9",
@@ -443,6 +420,54 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
                   "formSwitchDot": "#202226",
                   "formValidationMessageBg": "#e02f44",
                   "formValidationMessageText": "#ffffff",
+                  "headingColor": "#d8d9da",
+                  "link": "#d8d9da",
+                  "linkDisabled": "#8e8e8e",
+                  "linkExternal": "#33b5e5",
+                  "linkHover": "#ffffff",
+                  "pageHeaderBg": "#202226",
+                  "pageHeaderBorder": "#202226",
+                  "panelBg": "#141619",
+                  "panelBorder": "#202226",
+                  "text": "#c7d0d9",
+                  "textEmphasis": "#ececec",
+                  "textFaint": "#222426",
+                  "textStrong": "#ffffff",
+                  "textWeak": "#8e8e8e",
+                },
+                "height": Object {
+                  "lg": "48px",
+                  "md": "32px",
+                  "sm": "24px",
+                },
+                "isDark": true,
+                "isLight": false,
+                "name": "Grafana Dark",
+                "palette": Object {
+                  "black": "#000000",
+                  "blue": "#33b5e5",
+                  "blue77": "#1f60c4",
+                  "blue85": "#3274d9",
+                  "blue95": "#5794f2",
+                  "blueBase": "#3274d9",
+                  "blueFaint": "#041126",
+                  "blueLight": "#5794f2",
+                  "blueShade": "#1f60c4",
+                  "brandDanger": "#e02f44",
+                  "brandPrimary": "#eb7b18",
+                  "brandSuccess": "#299c46",
+                  "brandWarning": "#eb7b18",
+                  "critical": "#e02f44",
+                  "dark1": "#141414",
+                  "dark10": "#424345",
+                  "dark2": "#161719",
+                  "dark3": "#1f1f20",
+                  "dark4": "#212124",
+                  "dark5": "#222426",
+                  "dark6": "#262628",
+                  "dark7": "#292a2d",
+                  "dark8": "#2f2f32",
+                  "dark9": "#343436",
                   "gray05": "#0b0c0e",
                   "gray1": "#555555",
                   "gray10": "#141619",
@@ -463,20 +488,9 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
                   "grayBlue": "#212327",
                   "greenBase": "#299c46",
                   "greenShade": "#23843b",
-                  "headingColor": "#d8d9da",
-                  "inputBlack": "#0b0c0e",
-                  "link": "#d8d9da",
-                  "linkDisabled": "#8e8e8e",
-                  "linkExternal": "#33b5e5",
-                  "linkHover": "#ffffff",
                   "online": "#299c46",
                   "orange": "#eb7b18",
                   "orangeDark": "#ff780a",
-                  "pageBg": "#141619",
-                  "pageHeaderBg": "#202226",
-                  "pageHeaderBorder": "#202226",
-                  "panelBg": "#141619",
-                  "panelBorder": "#202226",
                   "purple": "#9933cc",
                   "queryGreen": "#74e680",
                   "queryKeyword": "#66d9ef",
@@ -487,29 +501,13 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
                   "red88": "#e02f44",
                   "redBase": "#e02f44",
                   "redShade": "#c4162a",
-                  "text": "#c7d0d9",
-                  "textEmphasis": "#ececec",
-                  "textFaint": "#222426",
-                  "textStrong": "#ffffff",
-                  "textWeak": "#8e8e8e",
                   "variable": "#32d1df",
                   "warn": "#f79520",
                   "white": "#ffffff",
                   "yellow": "#ecbb13",
                 },
-                "height": Object {
-                  "lg": "48px",
-                  "md": "32px",
-                  "sm": "24px",
-                },
-                "isDark": true,
-                "isLight": false,
-                "name": "Grafana Dark",
                 "panelHeaderHeight": 28,
                 "panelPadding": 8,
-                "shadow": Object {
-                  "pageHeader": "inset 0px -4px 14px #1f1f20",
-                },
                 "spacing": Object {
                   "d": "14px",
                   "formButtonHeight": 32,

packages/grafana-ui/src/components/TransformersUI/FilterByNameTransformerEditor.tsx

@@ -138,7 +138,7 @@ const FilterPill: React.FC<FilterPillProps> = ({ label, selected, onClick }) =>
       className={css`
         padding: ${theme.spacing.xxs} ${theme.spacing.sm};
         color: white;
-        background: ${selected ? theme.colors.blueLight : theme.colors.blueShade};
+        background: ${selected ? theme.palette.blueLight : theme.palette.blueShade};
         border-radius: 16px;
         display: inline-block;
         cursor: pointer;

packages/grafana-ui/src/components/TransformersUI/FilterByRefIdTransformerEditor.tsx

@@ -138,7 +138,7 @@ const FilterPill: React.FC<FilterPillProps> = ({ label, selected, onClick }) =>
       className={css`
         padding: ${theme.spacing.xxs} ${theme.spacing.sm};
         color: white;
-        background: ${selected ? theme.colors.blueLight : theme.colors.blueShade};
+        background: ${selected ? theme.palette.blueLight : theme.palette.blueShade};
         border-radius: 16px;
         display: inline-block;
         cursor: pointer;

packages/grafana-ui/src/components/TransformersUI/OrganizeFieldsTransformerEditor.tsx

@@ -159,8 +159,8 @@ const getFieldNameStyles = stylesFactory((theme: GrafanaTheme) => ({
     width: 35%;
     padding: 0 8px;
     border-radius: 3px;
-    background-color: ${theme.isDark ? theme.colors.grayBlue : theme.colors.gray6};
+    background-color: ${theme.isDark ? theme.palette.grayBlue : theme.palette.gray6};
-    border: 1px solid ${theme.isDark ? theme.colors.dark6 : theme.colors.gray5};
+    border: 1px solid ${theme.isDark ? theme.palette.dark6 : theme.palette.gray5};
   `,
   right: css`
     width: 65%;

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

@@ -11,16 +11,16 @@ const getStyles = (theme: GrafanaTheme, height: number, visible: boolean) => {
       padding: ${theme.spacing.sm} ${theme.spacing.sm} ${theme.spacing.sm} ${theme.spacing.md};
       border-radius: ${theme.border.radius.md};
       border: ${selectThemeVariant(
-        { light: `solid 1px ${theme.colors.gray5}`, dark: `solid 1px ${theme.colors.dark1}` },
+        { light: `solid 1px ${theme.palette.gray5}`, dark: `solid 1px ${theme.palette.dark1}` },
         theme.type
       )};
       overflow-y: scroll;
       overflow-x: hidden;
       outline: none;
-      background: ${selectThemeVariant({ light: theme.colors.white, dark: theme.colors.dark4 }, theme.type)};
+      background: ${selectThemeVariant({ light: theme.palette.white, dark: theme.palette.dark4 }, theme.type)};
       color: ${theme.colors.text};
       box-shadow: ${selectThemeVariant(
-        { light: `0 5px 10px 0 ${theme.colors.gray5}`, dark: `0 5px 10px 0 ${theme.colors.black}` },
+        { light: `0 5px 10px 0 ${theme.palette.gray5}`, dark: `0 5px 10px 0 ${theme.palette.black}` },
         theme.type
       )};
       visibility: ${visible === true ? 'visible' : 'hidden'};

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

@@ -38,13 +38,13 @@ const getStyles = (theme: GrafanaTheme) => ({
 
   typeaheadItemSelected: css`
     label: type-ahead-item-selected;
-    background-color: ${selectThemeVariant({ light: theme.colors.gray6, dark: theme.colors.dark9 }, theme.type)};
+    background-color: ${selectThemeVariant({ light: theme.palette.gray6, dark: theme.palette.dark9 }, theme.type)};
   `,
 
   typeaheadItemMatch: css`
     label: type-ahead-item-match;
-    color: ${theme.colors.yellow};
+    color: ${theme.palette.yellow};
-    border-bottom: 1px solid ${theme.colors.yellow};
+    border-bottom: 1px solid ${theme.palette.yellow};
     padding: inherit;
     background: inherit;
   `,

packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts

@@ -12,84 +12,84 @@ $theme-name: dark;
 
 // New Colors
 // -------------------------
-$blue-faint: ${theme.colors.blueFaint};
+$blue-faint: ${theme.palette.blueFaint};
-$blue-light: ${theme.colors.blueLight};
+$blue-light: ${theme.palette.blueLight};
-$blue-base: ${theme.colors.blueBase};
+$blue-base: ${theme.palette.blueBase};
-$blue-shade: ${theme.colors.blueShade};
+$blue-shade: ${theme.palette.blueShade};
-$red-base: ${theme.colors.redBase};
+$red-base: ${theme.palette.redBase};
-$red-shade: ${theme.colors.redShade};
+$red-shade: ${theme.palette.redShade};
-$green-base: ${theme.colors.greenBase};
+$green-base: ${theme.palette.greenBase};
-$green-shade: ${theme.colors.greenShade};
+$green-shade: ${theme.palette.greenShade};
-$orange-dark: ${theme.colors.orangeDark};
+$orange-dark: ${theme.palette.orangeDark};
 
-$gray98: ${theme.colors.gray98};
+$gray98: ${theme.palette.gray98};
-$gray95: ${theme.colors.gray95};
+$gray95: ${theme.palette.gray95};
-$gray85: ${theme.colors.gray85};
+$gray85: ${theme.palette.gray85};
-$gray70: ${theme.colors.gray70};
+$gray70: ${theme.palette.gray70};
-$gray60: ${theme.colors.gray60};
+$gray60: ${theme.palette.gray60};
-$gray33: ${theme.colors.gray33};
+$gray33: ${theme.palette.gray33};
-$gray25: ${theme.colors.gray25};
+$gray25: ${theme.palette.gray25};
-$gray15: ${theme.colors.gray15};
+$gray15: ${theme.palette.gray15};
-$gray10: ${theme.colors.gray10};
+$gray10: ${theme.palette.gray10};
-$gray05: ${theme.colors.gray05};
+$gray05: ${theme.palette.gray05};
 
 // Grays
 // -------------------------
-$black: ${theme.colors.black};
+$black: ${theme.palette.black};
-$dark-1: ${theme.colors.dark1};
+$dark-1: ${theme.palette.dark1};
-$dark-2: ${theme.colors.dark2};
+$dark-2: ${theme.palette.dark2};
-$dark-3: ${theme.colors.dark3};
+$dark-3: ${theme.palette.dark3};
-$dark-4: ${theme.colors.dark4};
+$dark-4: ${theme.palette.dark4};
-$dark-5: ${theme.colors.dark5};
+$dark-5: ${theme.palette.dark5};
-$dark-6: ${theme.colors.dark6};
+$dark-6: ${theme.palette.dark6};
-$dark-7: ${theme.colors.dark7};
+$dark-7: ${theme.palette.dark7};
-$dark-8: ${theme.colors.dark8};
+$dark-8: ${theme.palette.dark8};
-$dark-9: ${theme.colors.dark9};
+$dark-9: ${theme.palette.dark9};
-$dark-10: ${theme.colors.dark10};
+$dark-10: ${theme.palette.dark10};
-$gray-1: ${theme.colors.gray1};
+$gray-1: ${theme.palette.gray1};
-$gray-2: ${theme.colors.gray2};
+$gray-2: ${theme.palette.gray2};
-$gray-3: ${theme.colors.gray3};
+$gray-3: ${theme.palette.gray3};
-$gray-4: ${theme.colors.gray4};
+$gray-4: ${theme.palette.gray4};
-$gray-5: ${theme.colors.gray5};
+$gray-5: ${theme.palette.gray5};
-$gray-6: ${theme.colors.gray6};
+$gray-6: ${theme.palette.gray6};
 
-$gray-blue: ${theme.colors.grayBlue};
+$gray-blue: ${theme.palette.grayBlue};
 $input-black: ${theme.colors.formInputBg};
 
-$white: ${theme.colors.white};
+$white: ${theme.palette.white};
 
 // Accent colors
 // -------------------------
-$blue: ${theme.colors.blue};
+$blue: ${theme.palette.blue};
 $red: $red-base;
-$yellow: ${theme.colors.yellow};
+$yellow: ${theme.palette.yellow};
-$orange: ${theme.colors.orange};
+$orange: ${theme.palette.orange};
-$purple: ${theme.colors.purple};
+$purple: ${theme.palette.purple};
-$variable: ${theme.colors.variable};
+$variable: ${theme.palette.variable};
 
-$brand-primary: ${theme.colors.brandPrimary};
+$brand-primary: ${theme.palette.brandPrimary};
-$brand-success: ${theme.colors.brandSuccess};
+$brand-success: ${theme.palette.brandSuccess};
-$brand-warning: ${theme.colors.brandWarning};
+$brand-warning: ${theme.palette.brandWarning};
-$brand-danger: ${theme.colors.brandDanger};
+$brand-danger: ${theme.palette.brandDanger};
 
-$query-red: ${theme.colors.queryRed};
+$query-red: ${theme.palette.queryRed};
-$query-green: ${theme.colors.queryGreen};
+$query-green: ${theme.palette.queryGreen};
-$query-purple: ${theme.colors.queryPurple};
+$query-purple: ${theme.palette.queryPurple};
-$query-orange: ${theme.colors.orange};
+$query-orange: ${theme.palette.orange};
-$query-keyword: ${theme.colors.queryKeyword};
+$query-keyword: ${theme.palette.queryKeyword};
 
 // Status colors
 // -------------------------
-$online: ${theme.colors.online};
+$online: ${theme.palette.online};
-$warn: ${theme.colors.warn};
+$warn: ${theme.palette.warn};
-$critical: ${theme.colors.critical};
+$critical: ${theme.palette.critical};
 
 // Scaffolding
 // -------------------------
 $body-bg: ${theme.colors.bodyBg};
-$page-bg: ${theme.colors.pageBg};
+$page-bg: ${theme.colors.bodyBg};
+$dashboard-bg: ${theme.colors.dashboardBg};
 
-$body-color: ${theme.colors.body};
 $text-color: ${theme.colors.text};
 $text-color-strong: ${theme.colors.textStrong};
 $text-color-weak: ${theme.colors.textWeak};
@@ -122,7 +122,7 @@ $hr-border-color: $dark-9;
 // -------------------------
 $panel-bg: ${theme.colors.panelBg};
 $panel-border: 1px solid ${theme.colors.panelBorder};
-$panel-header-hover-bg: ${theme.colors.gray15};
+$panel-header-hover-bg: ${theme.colors.bg3};
 $panel-corner: $panel-bg;
 
 // page header
@@ -148,7 +148,6 @@ $card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.
 // Lists
 $list-item-bg: $card-background;
 $list-item-hover-bg: $card-background-hover;
-$list-item-link-color: $text-color;
 $list-item-shadow: $card-shadow;
 
 $empty-list-cta-bg: $gray-blue;
@@ -204,13 +203,13 @@ $input-bg: $input-black;
 $input-bg-disabled: $dark-6;
 
 $input-color: ${theme.colors.formInputText};
-$input-border-color: ${theme.colors.gray15};
+$input-border-color: ${theme.palette.gray15};
 $input-box-shadow: inset 1px 0px 4px 0px rgba(150, 150, 150, 0.1);
-$input-border-focus: ${theme.colors.blue95};
+$input-border-focus: ${theme.palette.blue95};
 $input-box-shadow-focus: $blue-light !default;
 $input-color-placeholder: ${theme.colors.formInputPlaceholderText};
-$input-label-bg: ${theme.colors.gray15};
+$input-label-bg: ${theme.palette.gray15};
-$input-label-border-color: ${theme.colors.gray15};
+$input-label-border-color: ${theme.palette.gray15};
 $input-color-select-arrow: $white;
 
 // Search
@@ -226,12 +225,11 @@ $typeahead-selected-color: $yellow;
 $dropdownBackground: $panel-bg;
 $dropdownBorder: ${theme.colors.panelBorder};
 $dropdownDividerTop: transparent;
-$dropdownDividerBottom: ${theme.colors.gray25};
+$dropdownDividerBottom: ${theme.palette.gray25};
 
-$dropdownLinkColor: $text-color;
+$dropdownLinkColor: $link-color;
 $dropdownLinkColorHover: $white;
 $dropdownLinkColorActive: $white;
-
 $dropdownLinkBackgroundHover: $dark-9;
 
 // Horizontal forms & lists
@@ -253,7 +251,7 @@ $side-menu-bg-mobile: $panel-bg;
 $side-menu-border: none;
 $side-menu-item-hover-bg: $dark-3;
 $side-menu-shadow: 0 0 20px black;
-$side-menu-link-color: $link-color;
+$side-menu-link-color: ${theme.palette.gray70};
 
 // Menu dropdowns
 // -------------------------

packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts

@@ -12,77 +12,77 @@ $theme-name: light;
 
 // New Colors
 // -------------------------
-$blue-faint: ${theme.colors.blueFaint};
+$blue-faint: ${theme.palette.blueFaint};
-$blue-light: ${theme.colors.blueLight};
+$blue-light: ${theme.palette.blueLight};
-$blue-base: ${theme.colors.blueBase};
+$blue-base: ${theme.palette.blueBase};
-$blue-shade: ${theme.colors.blueShade};
+$blue-shade: ${theme.palette.blueShade};
-$red-base: ${theme.colors.redBase};
+$red-base: ${theme.palette.redBase};
-$red-shade: ${theme.colors.redShade};
+$red-shade: ${theme.palette.redShade};
-$green-base: ${theme.colors.greenBase};
+$green-base: ${theme.palette.greenBase};
-$green-shade: ${theme.colors.greenShade};
+$green-shade: ${theme.palette.greenShade};
-$orange-dark: ${theme.colors.orangeDark};
+$orange-dark: ${theme.palette.orangeDark};
 
-$gray98: ${theme.colors.gray98};
+$gray98: ${theme.palette.gray98};
-$gray95: ${theme.colors.gray95};
+$gray95: ${theme.palette.gray95};
-$gray85: ${theme.colors.gray85};
+$gray85: ${theme.palette.gray85};
-$gray70: ${theme.colors.gray70};
+$gray70: ${theme.palette.gray70};
-$gray60: ${theme.colors.gray60};
+$gray60: ${theme.palette.gray60};
-$gray33: ${theme.colors.gray33};
+$gray33: ${theme.palette.gray33};
-$gray25: ${theme.colors.gray25};
+$gray25: ${theme.palette.gray25};
-$gray15: ${theme.colors.gray15};
+$gray15: ${theme.palette.gray15};
-$gray10: ${theme.colors.gray10};
+$gray10: ${theme.palette.gray10};
-$gray05: ${theme.colors.gray05};
+$gray05: ${theme.palette.gray05};
 
 // Grays
 // -------------------------
-$black: ${theme.colors.black};
+$black: ${theme.palette.black};
 
-$dark-1: ${theme.colors.dark1};
+$dark-1: ${theme.palette.dark1};
-$dark-2: ${theme.colors.dark2};
+$dark-2: ${theme.palette.dark2};
-$dark-4: ${theme.colors.dark4};
+$dark-4: ${theme.palette.dark4};
-$dark-10: ${theme.colors.dark10};
+$dark-10: ${theme.palette.dark10};
-$gray-1: ${theme.colors.gray1};
+$gray-1: ${theme.palette.gray1};
-$gray-2: ${theme.colors.gray2};
+$gray-2: ${theme.palette.gray2};
-$gray-3: ${theme.colors.gray3};
+$gray-3: ${theme.palette.gray3};
-$gray-4: ${theme.colors.gray4};
+$gray-4: ${theme.palette.gray4};
-$gray-5: ${theme.colors.gray5};
+$gray-5: ${theme.palette.gray5};
-$gray-6: ${theme.colors.gray6};
+$gray-6: ${theme.palette.gray6};
-$gray-7: ${theme.colors.gray7};
+$gray-7: ${theme.palette.gray7};
 
-$white: ${theme.colors.white};
+$white: ${theme.palette.white};
 
 // Accent colors
 // -------------------------
-$blue: ${theme.colors.blue};
+$blue: ${theme.palette.blue};
 $red: $red-base;
-$yellow: ${theme.colors.yellow};
+$yellow: ${theme.palette.yellow};
-$orange: ${theme.colors.orange};
+$orange: ${theme.palette.orange};
-$purple: ${theme.colors.purple};
+$purple: ${theme.palette.purple};
-$variable: ${theme.colors.variable};
+$variable: ${theme.palette.variable};
 
-$brand-primary: ${theme.colors.brandPrimary};
+$brand-primary: ${theme.palette.brandPrimary};
-$brand-success: ${theme.colors.brandSuccess};
+$brand-success: ${theme.palette.brandSuccess};
-$brand-warning: ${theme.colors.brandWarning};
+$brand-warning: ${theme.palette.brandWarning};
-$brand-danger: ${theme.colors.brandDanger};
+$brand-danger: ${theme.palette.brandDanger};
 
-$query-red: ${theme.colors.queryRed};
+$query-red: ${theme.palette.queryRed};
-$query-green: ${theme.colors.queryGreen};
+$query-green: ${theme.palette.queryGreen};
-$query-purple: ${theme.colors.queryPurple};
+$query-purple: ${theme.palette.queryPurple};
-$query-orange: ${theme.colors.orange};
+$query-orange: ${theme.palette.orange};
-$query-keyword: ${theme.colors.queryKeyword};
+$query-keyword: ${theme.palette.queryKeyword};
 
 // Status colors
 // -------------------------
-$online: ${theme.colors.online};
+$online: ${theme.palette.online};
-$warn: ${theme.colors.warn};
+$warn: ${theme.palette.warn};
-$critical: ${theme.colors.critical};
+$critical: ${theme.palette.critical};
 
 // Scaffolding
 // -------------------------
 $body-bg: ${theme.colors.bodyBg};
-$page-bg: ${theme.colors.pageBg};
+$page-bg: ${theme.colors.bodyBg};
+$dashboard-bg: ${theme.colors.dashboardBg};
 
-$body-color: ${theme.colors.body};
 $text-color: ${theme.colors.text};
 $text-color-strong: ${theme.colors.textStrong};
 $text-color-weak: ${theme.colors.textWeak};
@@ -140,7 +140,6 @@ $card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.
 // Lists
 $list-item-bg: $gray-7;
 $list-item-hover-bg: $gray-6;
-$list-item-link-color: $text-color;
 $list-item-shadow: $card-shadow;
 
 $empty-list-cta-bg: $gray-6;
@@ -196,14 +195,14 @@ $input-bg: $white;
 $input-bg-disabled: $gray-5;
 
 $input-color: ${theme.colors.formInputText};
-$input-border-color: ${theme.colors.gray95};
+$input-border-color: ${theme.palette.gray95};
 $input-box-shadow: none;
-$input-border-focus: ${theme.colors.blue95};
+$input-border-focus: ${theme.palette.blue95};
-$input-box-shadow-focus: ${theme.colors.blue95};
+$input-box-shadow-focus: ${theme.palette.blue95};
 $input-color-placeholder: ${theme.colors.formInputPlaceholderText};
-$input-label-bg: ${theme.colors.gray95};
+$input-label-bg: ${theme.palette.gray95};
-$input-label-border-color: ${theme.colors.gray95};
+$input-label-border-color: ${theme.palette.gray95};
-$input-color-select-arrow: ${theme.colors.gray60};
+$input-color-select-arrow: ${theme.palette.gray60};
 
 // search
 $search-shadow: 0 1px 5px 0 $gray-5;
@@ -240,12 +239,12 @@ $navbar-button-border: $gray-4;
 
 // Sidemenu
 // -------------------------
-$side-menu-bg: ${theme.colors.gray15};
+$side-menu-bg: ${theme.palette.gray15};
-$side-menu-border: 1px solid ${theme.colors.gray25};
+$side-menu-border: 1px solid ${theme.palette.gray25};
 $side-menu-bg-mobile: rgba(0, 0, 0, 0); //$gray-6;
-$side-menu-item-hover-bg: ${theme.colors.gray25};
+$side-menu-item-hover-bg: ${theme.palette.gray25};
 $side-menu-shadow: 5px 0px 10px -5px $gray-1;
-$side-menu-link-color: $gray-6;
+$side-menu-link-color: $gray-4;
 
 // Menu dropdowns
 // -------------------------

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

@@ -40,15 +40,57 @@ const basicColors = {
   orangeDark: '#ff780a',
 };
 
+const backgrounds = {
+  bg1: basicColors.gray10,
+  bg2: basicColors.gray15,
+  bg3: basicColors.gray25,
+  dashboardBg: basicColors.gray05,
+};
+
+const borders = {
+  border1: basicColors.gray15,
+  border2: basicColors.gray25,
+};
+
+const form = {
+  // Next-gen forms functional colors
+  formLabel: basicColors.gray70,
+  formDescription: basicColors.gray60,
+  formLegend: basicColors.gray85,
+  formInputBg: basicColors.gray05,
+  formInputBgDisabled: basicColors.gray10,
+  formInputBorder: basicColors.gray25,
+  formInputBorderHover: basicColors.gray33,
+  formInputBorderActive: basicColors.blue95,
+  formInputBorderInvalid: basicColors.red88,
+  formInputPlaceholderText: basicColors.gray1,
+  formInputText: basicColors.gray85,
+  formInputDisabledText: basicColors.gray70,
+  formInputTextStrong: basicColors.gray85,
+  formInputTextWhite: basicColors.white,
+  formFocusOutline: basicColors.blueShade,
+  formValidationMessageText: basicColors.white,
+  formValidationMessageBg: basicColors.red88,
+  formSwitchBg: basicColors.gray25,
+  formSwitchBgActive: basicColors.blueLight,
+  formSwitchBgHover: basicColors.gray33,
+  formSwitchBgActiveHover: basicColors.blueBase,
+  formSwitchBgDisabled: basicColors.gray25,
+  formSwitchDot: basicColors.gray15,
+  formCheckboxBg: basicColors.dark5,
+  formCheckboxBgChecked: basicColors.blueLight,
+  formCheckboxBgCheckedHover: basicColors.blueBase,
+  formCheckboxCheckmark: basicColors.gray25,
+};
+
 const darkTheme: GrafanaTheme = {
   ...defaultTheme,
   type: GrafanaThemeType.Dark,
   isDark: true,
   isLight: false,
   name: 'Grafana Dark',
-  colors: {
+  palette: {
     ...basicColors,
-    inputBlack: basicColors.gray05,
     brandPrimary: basicColors.orange,
     brandSuccess: basicColors.greenBase,
     brandWarning: basicColors.orange,
@@ -61,66 +103,34 @@ const darkTheme: GrafanaTheme = {
     online: basicColors.greenBase,
     warn: '#f79520',
     critical: basicColors.redBase,
+  },
+  colors: {
+    ...backgrounds,
+    ...borders,
+    ...form,
 
-    body: basicColors.gray4,
+    bodyBg: backgrounds.bg1,
+    panelBg: backgrounds.bg1,
+    pageHeaderBg: backgrounds.bg2,
+    pageHeaderBorder: borders.border1,
+    panelBorder: borders.border1,
+
+    dropdownBg: form.formInputBg,
+    dropdownShadow: basicColors.black,
+    dropdownOptionHoverBg: backgrounds.bg2,
+
+    // text
+    headingColor: basicColors.gray4,
     text: basicColors.gray85,
     textStrong: basicColors.white,
     textWeak: basicColors.gray2,
     textEmphasis: basicColors.gray5,
     textFaint: basicColors.dark5,
+
     link: basicColors.gray4,
     linkDisabled: basicColors.gray2,
     linkHover: basicColors.white,
     linkExternal: basicColors.blue,
-    headingColor: basicColors.gray4,
-
-    // Backgrounds
-    bodyBg: basicColors.gray05,
-    pageBg: basicColors.gray10,
-    pageHeaderBg: basicColors.gray15,
-    panelBg: basicColors.gray10,
-
-    // Borders
-    pageHeaderBorder: basicColors.gray15,
-    panelBorder: basicColors.gray15,
-
-    // Next-gen forms functional colors
-    formLabel: basicColors.gray70,
-    formDescription: basicColors.gray60,
-    formLegend: basicColors.gray85,
-    formInputBg: basicColors.gray05,
-    formInputBgDisabled: basicColors.gray10,
-    formInputBorder: basicColors.gray25,
-    formInputBorderHover: basicColors.gray33,
-    formInputBorderActive: basicColors.blue95,
-    formInputBorderInvalid: basicColors.red88,
-    formInputPlaceholderText: basicColors.gray1,
-    formInputText: basicColors.gray85,
-    formInputDisabledText: basicColors.gray70,
-    formInputTextStrong: basicColors.gray85,
-    formInputTextWhite: basicColors.white,
-    formFocusOutline: basicColors.blueShade,
-    formValidationMessageText: basicColors.white,
-    formValidationMessageBg: basicColors.red88,
-    formSwitchBg: basicColors.gray25,
-    formSwitchBgActive: basicColors.blueLight,
-    formSwitchBgHover: basicColors.gray33,
-    formSwitchBgActiveHover: basicColors.blueBase,
-    formSwitchBgDisabled: basicColors.gray25,
-    formSwitchDot: basicColors.gray15,
-    formCheckboxBg: basicColors.dark5,
-    formCheckboxBgChecked: basicColors.blueLight,
-    formCheckboxBgCheckedHover: basicColors.blueBase,
-    formCheckboxCheckmark: basicColors.gray25,
-  },
-  background: {
-    dropdown: basicColors.dark3,
-    scrollbar: basicColors.dark9,
-    scrollbar2: basicColors.dark9,
-    pageHeader: `linear-gradient(90deg, ${basicColors.dark7}, ${basicColors.black})`,
-  },
-  shadow: {
-    pageHeader: `inset 0px -4px 14px ${basicColors.dark3}`,
   },
 };
 

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

@@ -20,8 +20,8 @@ const basicColors = {
   gray3: '#acb6bf',
   gray4: '#c7d0d9',
   gray5: '#dde4ed',
-  gray6: '#e9edf2',
+  gray6: '#e9edf2', // same as gray95
-  gray7: '#f7f8fa',
+  gray7: '#f7f8fa', // same as gray98
   grayBlue: '#212327', // not used in light theme
   blueBase: '#3274d9',
   blueShade: '#1f60c4',
@@ -40,16 +40,57 @@ const basicColors = {
   orangeDark: '#ed5700',
 };
 
+const backgrounds = {
+  bg1: basicColors.white,
+  bg2: basicColors.gray98,
+  bg3: basicColors.gray95,
+  dashboardBg: basicColors.gray98,
+};
+
+const borders = {
+  border1: basicColors.gray95,
+  border2: basicColors.gray85,
+};
+
+const form = {
+  formLabel: basicColors.gray33,
+  formDescription: basicColors.gray33,
+  formLegend: basicColors.gray25,
+  formInputBg: basicColors.white,
+  formInputBgDisabled: basicColors.gray95,
+  formInputBorder: basicColors.gray85,
+  formInputBorderHover: basicColors.gray70,
+  formInputBorderActive: basicColors.blue77,
+  formInputBorderInvalid: basicColors.red88,
+  formInputText: basicColors.gray25,
+  formInputPlaceholderText: basicColors.gray70,
+  formInputDisabledText: basicColors.gray33,
+  formInputTextStrong: basicColors.gray25,
+  formInputTextWhite: basicColors.white,
+  formFocusOutline: basicColors.blueLight,
+  formValidationMessageText: basicColors.white,
+  formValidationMessageBg: basicColors.red88,
+  formSwitchBg: basicColors.gray85,
+  formSwitchBgActive: basicColors.blueShade,
+  formSwitchBgHover: basicColors.gray3,
+  formSwitchBgActiveHover: basicColors.blueBase,
+  formSwitchBgDisabled: basicColors.gray4,
+  formSwitchDot: basicColors.white,
+  formCheckboxBg: basicColors.white,
+  formCheckboxBgChecked: basicColors.blueShade,
+  formCheckboxBgCheckedHover: basicColors.blueBase,
+  formCheckboxCheckmark: basicColors.white,
+};
+
 const lightTheme: GrafanaTheme = {
   ...defaultTheme,
   type: GrafanaThemeType.Light,
   isDark: false,
   isLight: true,
   name: 'Grafana Light',
-  colors: {
+  palette: {
     ...basicColors,
     variable: basicColors.blue,
-    inputBlack: '#09090b',
     brandPrimary: basicColors.orange,
     brandSuccess: basicColors.greenBase,
     brandWarning: basicColors.orange,
@@ -62,15 +103,22 @@ const lightTheme: GrafanaTheme = {
     online: basicColors.greenShade,
     warn: '#f79520',
     critical: basicColors.redShade,
+  },
+  colors: {
+    ...backgrounds,
+    ...borders,
 
-    // Backgrounds
+    bodyBg: backgrounds.bg1,
-    bodyBg: basicColors.gray7,
+    panelBg: backgrounds.bg1,
-    pageBg: basicColors.white,
+    pageHeaderBg: backgrounds.bg2,
-    pageHeaderBg: basicColors.gray95,
+    pageHeaderBorder: borders.border1,
-    panelBg: basicColors.white,
+    panelBorder: borders.border1,
+
+    dropdownBg: form.formInputBg,
+    dropdownShadow: basicColors.gray3,
+    dropdownOptionHoverBg: backgrounds.bg2,
 
     // Text colors
-    body: basicColors.gray1,
     text: basicColors.gray1,
     textStrong: basicColors.dark2,
     textWeak: basicColors.gray2,
@@ -84,47 +132,7 @@ const lightTheme: GrafanaTheme = {
     linkExternal: basicColors.blueLight,
     headingColor: basicColors.gray1,
 
-    // Borders
+    ...form,
-    panelBorder: basicColors.gray95,
-    pageHeaderBorder: basicColors.gray4,
-
-    // Next-gen forms functional colors
-    formLabel: basicColors.gray33,
-    formDescription: basicColors.gray33,
-    formLegend: basicColors.gray25,
-    formInputBg: basicColors.white,
-    formInputBgDisabled: basicColors.gray95,
-    formInputBorder: basicColors.gray85,
-    formInputBorderHover: basicColors.gray70,
-    formInputBorderActive: basicColors.blue77,
-    formInputBorderInvalid: basicColors.red88,
-    formInputText: basicColors.gray25,
-    formInputPlaceholderText: basicColors.gray70,
-    formInputDisabledText: basicColors.gray33,
-    formInputTextStrong: basicColors.gray25,
-    formInputTextWhite: basicColors.white,
-    formFocusOutline: basicColors.blueLight,
-    formValidationMessageText: basicColors.white,
-    formValidationMessageBg: basicColors.red88,
-    formSwitchBg: basicColors.gray85,
-    formSwitchBgActive: basicColors.blueShade,
-    formSwitchBgHover: basicColors.gray3,
-    formSwitchBgActiveHover: basicColors.blueBase,
-    formSwitchBgDisabled: basicColors.gray4,
-    formSwitchDot: basicColors.white,
-    formCheckboxBg: basicColors.white,
-    formCheckboxBgChecked: basicColors.blueShade,
-    formCheckboxBgCheckedHover: basicColors.blueBase,
-    formCheckboxCheckmark: basicColors.white,
-  },
-  background: {
-    dropdown: basicColors.white,
-    scrollbar: basicColors.gray5,
-    scrollbar2: basicColors.gray5,
-    pageHeader: `linear-gradient(90deg, ${basicColors.white}, ${basicColors.gray7})`,
-  },
-  shadow: {
-    pageHeader: `inset 0px -3px 10px ${basicColors.gray6}`,
   },
 };
 

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

@@ -6,9 +6,9 @@ import { stylesFactory } from './stylesFactory';
 export function cardChrome(theme: GrafanaTheme): string {
   if (theme.isDark) {
     return `
-       background: linear-gradient(135deg, ${theme.colors.dark8}, ${theme.colors.dark6});
+       background: linear-gradient(135deg, ${theme.palette.dark8}, ${theme.palette.dark6});
        &:hover {
-         background: linear-gradient(135deg, ${theme.colors.dark9}, ${theme.colors.dark6});
+         background: linear-gradient(135deg, ${theme.palette.dark9}, ${theme.palette.dark6});
        }
        box-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3);
        border-radius: ${theme.border.radius.md};
@@ -16,9 +16,9 @@ export function cardChrome(theme: GrafanaTheme): string {
   }
 
   return `
-       background: linear-gradient(135deg, ${theme.colors.gray6}, ${theme.colors.gray7});
+       background: linear-gradient(135deg, ${theme.palette.gray6}, ${theme.palette.gray7});
        &:hover {
-         background: linear-gradient(135deg, ${theme.colors.gray7}, ${theme.colors.gray6});
+         background: linear-gradient(135deg, ${theme.palette.gray7}, ${theme.palette.gray6});
        }
        box-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.1);
        border-radius: ${theme.border.radius.md};
@@ -28,9 +28,9 @@ export function cardChrome(theme: GrafanaTheme): string {
 export function listItem(theme: GrafanaTheme): string {
   if (theme.isDark) {
     return `
-       background: ${theme.colors.dark7};
+       background: ${theme.palette.dark7};
        &:hover {
-         background: ${theme.colors.dark9};
+         background: ${theme.palette.dark9};
        }
        box-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3);
        border-radius: ${theme.border.radius.md};
@@ -38,9 +38,9 @@ export function listItem(theme: GrafanaTheme): string {
   }
 
   return `
-       background: ${theme.colors.gray7};
+       background: ${theme.palette.gray7};
        &:hover {
-         background: ${theme.colors.gray6};
+         background: ${theme.palette.gray6};
        }
        box-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.1);
        border-radius: ${theme.border.radius.md};
@@ -49,7 +49,7 @@ export function listItem(theme: GrafanaTheme): string {
 
 export function listItemSelected(theme: GrafanaTheme): string {
   return `
-       background: ${theme.isLight ? theme.colors.gray6 : theme.colors.dark9};
+       background: ${theme.isLight ? theme.palette.gray6 : theme.palette.dark9};
        color: ${theme.colors.textStrong};
     `;
 }
@@ -57,22 +57,22 @@ export function listItemSelected(theme: GrafanaTheme): string {
 export const panelEditorNestedListStyles = stylesFactory((theme: GrafanaTheme) => {
   const borderColor = selectThemeVariant(
     {
-      light: theme.colors.gray85,
+      light: theme.palette.gray85,
-      dark: theme.colors.dark9,
+      dark: theme.palette.dark9,
     },
     theme.type
   );
   const shadow = selectThemeVariant(
     {
-      light: theme.colors.gray85,
+      light: theme.palette.gray85,
-      dark: theme.colors.black,
+      dark: theme.palette.black,
     },
     theme.type
   );
   const headerBg = selectThemeVariant(
     {
-      light: theme.colors.white,
+      light: theme.palette.white,
-      dark: theme.colors.dark1,
+      dark: theme.palette.dark1,
     },
     theme.type
   );

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

@@ -42,8 +42,8 @@ const CombinationsRowRenderer: React.FunctionComponent<CombinationsRowRendererPr
 
   const borderColor = selectThemeVariant(
     {
-      dark: theme.colors.dark8,
+      dark: theme.palette.dark8,
-      light: theme.colors.gray5,
+      light: theme.palette.gray5,
     },
     theme.type
   );

public/app/core/components/QueryOperationRow/QueryOperationRow.tsx

@@ -74,7 +74,7 @@ export const QueryOperationRow: React.FC<QueryOperationRowProps> = ({
 };
 
 const getQueryOperationRowStyles = stylesFactory((theme: GrafanaTheme) => {
-  const borderColor = theme.isLight ? theme.colors.gray85 : theme.colors.gray25;
+  const borderColor = theme.colors.border2;
 
   return {
     wrapper: css`
@@ -84,7 +84,7 @@ const getQueryOperationRowStyles = stylesFactory((theme: GrafanaTheme) => {
       padding: ${theme.spacing.sm};
       border-radius: ${theme.border.radius.sm};
       border: 1px solid ${borderColor};
-      background: ${theme.colors.pageBg};
+      background: ${theme.colors.bodyBg};
     `,
     collapseIcon: css`
       color: ${theme.colors.textWeak};
@@ -97,15 +97,15 @@ const getQueryOperationRowStyles = stylesFactory((theme: GrafanaTheme) => {
 
     title: css`
       font-weight: ${theme.typography.weight.semibold};
-      color: ${theme.colors.blue95};
+      color: ${theme.palette.blue95};
       margin-left: ${theme.spacing.sm};
     `,
     content: css`
       border: 1px solid ${borderColor};
       margin-top: -1px;
-      background: ${theme.colors.pageBg};
+      background: ${theme.colors.bodyBg};
       margin-left: ${theme.spacing.xl};
-      border-top: 1px solid ${theme.colors.pageBg};
+      border-top: 1px solid ${theme.colors.bodyBg};
       border-radis: 0 ${theme.border.radius.sm};
       padding: 0 ${theme.spacing.sm} ${theme.spacing.sm} ${theme.spacing.lg};
     `,

public/app/features/admin/LicenseChrome.tsx

@@ -7,7 +7,7 @@ const title = { fontWeight: 500, fontSize: '26px', lineHeight: '123%' };
 
 const getStyles = stylesFactory((theme: GrafanaTheme) => {
   const backgroundUrl = theme.isDark ? 'public/img/licensing/header_dark.svg' : 'public/img/licensing/header_light.svg';
-  const footerBg = theme.isDark ? theme.colors.dark9 : theme.colors.gray6;
+  const footerBg = theme.isDark ? theme.palette.dark9 : theme.palette.gray6;
 
   return {
     container: css`

public/app/features/admin/UserOrgs.tsx

@@ -79,7 +79,7 @@ const getOrgRowStyles = stylesFactory((theme: GrafanaTheme) => {
     removeButton: css`
       margin-right: 0.6rem;
       text-decoration: underline;
-      color: ${theme.colors.blue95};
+      color: ${theme.palette.blue95};
     `,
     label: css`
       font-weight: 500;

public/app/features/dashboard/components/Inspector/InspectHeader.tsx

@@ -56,7 +56,8 @@ export const InspectHeader: FC<Props> = ({
 };
 
 const getStyles = stylesFactory((theme: GrafanaTheme) => {
-  const headerBackground = theme.isLight ? theme.colors.gray95 : theme.colors.gray15;
+  const headerBackground = theme.colors.bg2;
+
   return {
     header: css`
       background-color: ${headerBackground};

public/app/features/dashboard/components/PanelEditor/DynamicConfigValueEditor.tsx

@@ -47,16 +47,16 @@ export const DynamicConfigValueEditor: React.FC<DynamicConfigValueEditorProps> =
 const getStyles = stylesFactory((theme: GrafanaTheme) => {
   const borderColor = selectThemeVariant(
     {
-      light: theme.colors.gray85,
+      light: theme.palette.gray85,
-      dark: theme.colors.dark9,
+      dark: theme.palette.dark9,
     },
     theme.type
   );
 
   const highlightColor = selectThemeVariant(
     {
-      light: theme.colors.blueLight,
+      light: theme.palette.blueLight,
-      dark: theme.colors.blueShade,
+      dark: theme.palette.blueShade,
     },
     theme.type
   );

public/app/features/dashboard/components/PanelEditor/OptionsPaneContent.tsx

@@ -269,7 +269,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
       flex-direction: column;
       flex-grow: 1;
       min-height: 0;
-      background: ${theme.colors.pageBg};
+      background: ${theme.colors.bodyBg};
       border-left: 1px solid ${theme.colors.pageHeaderBorder};
     `,
     tabsButton: css``,

public/app/features/dashboard/components/PanelEditor/OverrideEditor.tsx

@@ -127,16 +127,16 @@ export const OverrideEditor: React.FC<OverrideEditorProps> = ({ data, override,
 const getStyles = stylesFactory((theme: GrafanaTheme) => {
   const borderColor = selectThemeVariant(
     {
-      light: theme.colors.gray85,
+      light: theme.palette.gray85,
-      dark: theme.colors.dark9,
+      dark: theme.palette.dark9,
     },
     theme.type
   );
 
   const shadow = selectThemeVariant(
     {
-      light: theme.colors.gray85,
+      light: theme.palette.gray85,
-      dark: theme.colors.black,
+      dark: theme.palette.black,
     },
     theme.type
   );

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

@@ -347,7 +347,7 @@ enum Pane {
  */
 const getStyles = stylesFactory((theme: GrafanaTheme, props: Props) => {
   const { uiState } = props;
-  const handleColor = theme.colors.blueLight;
+  const handleColor = theme.palette.blueLight;
   const paneSpaceing = theme.spacing.md;
 
   const resizer = css`
@@ -376,7 +376,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme, props: Props) => {
       left: 0;
       right: 0;
       bottom: 0;
-      background: ${theme.colors.bodyBg};
+      background: ${theme.colors.dashboardBg};
       display: flex;
       flex-direction: column;
     `,

public/app/features/dashboard/components/PanelEditor/VisualizationTab.tsx

@@ -90,7 +90,7 @@ export const VisualizationTabUnconnected: FC<Props> = ({ panel, plugin, changePa
 const getStyles = stylesFactory((theme: GrafanaTheme) => {
   return {
     icon: css`
-      color: ${theme.colors.gray33};
+      color: ${theme.palette.gray33};
     `,
     wrapper: css`
       display: flex;
@@ -104,7 +104,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
       flex-shrink: 1;
     `,
     searchClear: css`
-      color: ${theme.colors.gray60};
+      color: ${theme.palette.gray60};
       cursor: pointer;
     `,
     visList: css`

public/app/features/dashboard/components/SaveDashboard/forms/SaveProvisionedDashboardForm.tsx

@@ -77,7 +77,7 @@ export const SaveProvisionedDashboardForm: React.FC<SaveDashboardFormProps> = ({
 const getStyles = stylesFactory((theme: GrafanaTheme) => {
   return {
     json: css`
-      background: ${theme.isLight ? theme.colors.gray7 : theme.colors.black};
+      background: ${theme.isLight ? theme.palette.gray7 : theme.palette.black};
       padding: ${theme.spacing.sm} 0 ${theme.spacing.sm} ${theme.spacing.md};
       height: 400px;
     `,

public/app/features/dashboard/components/TransformationsEditor/TransformationEditor.tsx

@@ -71,7 +71,7 @@ const getStyles = (theme: GrafanaTheme) => ({
   `,
   name: css`
     font-weight: ${theme.typography.weight.semibold};
-    color: ${theme.colors.blue};
+    color: ${theme.palette.blue};
   `,
   iconRow: css`
     display: flex;
@@ -107,8 +107,8 @@ const getStyles = (theme: GrafanaTheme) => ({
     text-align: center;
     font-family: ${theme.typography.fontFamily.monospace};
     font-size: ${theme.typography.size.sm};
-    color: ${theme.colors.blueBase};
+    color: ${theme.palette.blueBase};
-    border-bottom: 1px dashed ${theme.colors.gray15};
+    border-bottom: 1px dashed ${theme.palette.gray15};
     flex-grow: 0;
     flex-shrink: 1;
   `,
@@ -116,8 +116,8 @@ const getStyles = (theme: GrafanaTheme) => ({
   debug: css`
     margin-top: ${theme.spacing.md};
     padding: 0 ${theme.spacing.sm} ${theme.spacing.sm} ${theme.spacing.sm};
-    border: 1px dashed ${theme.colors.gray15};
+    border: 1px dashed ${theme.palette.gray15};
-    background: ${theme.colors.gray05};
+    background: ${theme.palette.gray05};
     border-radius: ${theme.border.radius.sm};
     width: 100%;
     height: 300px;

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

@@ -42,7 +42,7 @@ const getQueryEditorRowTitleStyles = stylesFactory((theme: GrafanaTheme) => {
   return {
     refId: css`
       font-weight: ${theme.typography.weight.semibold};
-      color: ${theme.colors.blue95};
+      color: ${theme.palette.blue95};
       cursor: pointer;
       display: flex;
       align-items: center;

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

@@ -28,11 +28,11 @@ const VizTypePickerPlugin: React.FC<Props> = ({ isCurrent, plugin, onClick, disa
 };
 
 const getStyles = stylesFactory((theme: GrafanaTheme) => {
-  const itemBorder = `1px solid ${theme.isLight ? theme.colors.gray85 : theme.colors.gray25}`;
+  const itemBorder = `1px solid ${theme.isLight ? theme.palette.gray85 : theme.palette.gray25}`;
 
   return {
     item: css`
-      background: ${theme.isLight ? theme.colors.gray98 : theme.colors.gray15};
+      background: ${theme.isLight ? theme.palette.gray98 : theme.palette.gray15};
       border: ${itemBorder};
       border-radius: 3px;
       height: 100px;
@@ -49,13 +49,13 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
       padding-bottom: 6px;
 
       &:hover {
-        box-shadow: 0 0 4px ${theme.colors.blueLight};
+        box-shadow: 0 0 4px ${theme.palette.blueLight};
-        border: 1px solid ${theme.colors.blueLight};
+        border: 1px solid ${theme.palette.blueLight};
       }
     `,
     current: css`
-      box-shadow: 0 0 6px ${theme.colors.orange} !important;
+      box-shadow: 0 0 6px ${theme.palette.orange} !important;
-      border: 1px solid ${theme.colors.orange} !important;
+      border: 1px solid ${theme.palette.orange} !important;
     `,
     disabled: css`
       opacity: 0.2;

public/app/features/explore/ExploreGraphPanel.tsx

@@ -24,11 +24,11 @@ const getStyles = (theme: GrafanaTheme) => ({
     padding: 10px 0;
     border-radius: ${theme.border.radius.md};
     text-align: center;
-    background-color: ${selectThemeVariant({ light: theme.colors.white, dark: theme.colors.dark4 }, theme.type)};
+    background-color: ${selectThemeVariant({ light: theme.palette.white, dark: theme.palette.dark4 }, theme.type)};
   `,
   disclaimerIcon: css`
     label: disclaimer-icon;
-    color: ${theme.colors.yellow};
+    color: ${theme.palette.yellow};
     margin-right: ${theme.spacing.xs};
   `,
   showAllTimeSeries: css`

public/app/features/explore/LiveLogs.tsx

@@ -23,13 +23,13 @@ const getStyles = (theme: GrafanaTheme) => ({
   logsRowFade: css`
     label: logs-row-fresh;
     color: ${theme.colors.text};
-    background-color: ${tinycolor(theme.colors.blueLight)
+    background-color: ${tinycolor(theme.palette.blueLight)
       .setAlpha(0.25)
       .toString()};
     animation: fade 1s ease-out 1s 1 normal forwards;
     @keyframes fade {
       from {
-        background-color: ${tinycolor(theme.colors.blueLight)
+        background-color: ${tinycolor(theme.palette.blueLight)
           .setAlpha(0.25)
           .toString()};
       }

public/app/features/explore/LiveTailButton.tsx

@@ -10,11 +10,11 @@ import { GrafanaTheme } from '@grafana/data';
 import { ResponsiveButton } from './ResponsiveButton';
 
 const getStyles = stylesFactory((theme: GrafanaTheme) => {
-  const bgColor = selectThemeVariant({ light: theme.colors.gray5, dark: theme.colors.dark1 }, theme.type);
+  const bgColor = selectThemeVariant({ light: theme.palette.gray5, dark: theme.palette.dark1 }, theme.type);
-  const orangeLighter = tinycolor(theme.colors.orangeDark)
+  const orangeLighter = tinycolor(theme.palette.orangeDark)
     .lighten(10)
     .toString();
-  const pulseTextColor = tinycolor(theme.colors.orangeDark)
+  const pulseTextColor = tinycolor(theme.palette.orangeDark)
     .desaturate(90)
     .toString();
   return {
@@ -28,13 +28,13 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
     `,
     isLive: css`
       label: isLive;
-      border-color: ${theme.colors.orangeDark};
+      border-color: ${theme.palette.orangeDark};
-      color: ${theme.colors.orangeDark};
+      color: ${theme.palette.orangeDark};
       background: transparent;
       &:focus {
         background: transparent;
-        border-color: ${theme.colors.orangeDark};
+        border-color: ${theme.palette.orangeDark};
-        color: ${theme.colors.orangeDark};
+        color: ${theme.palette.orangeDark};
       }
       &:hover {
         background-color: ${bgColor};
@@ -47,12 +47,12 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
     `,
     isPaused: css`
       label: isPaused;
-      border-color: ${theme.colors.orangeDark};
+      border-color: ${theme.palette.orangeDark};
       background: transparent;
       animation: pulse 3s ease-out 0s infinite normal forwards;
       &:focus {
         background: transparent;
-        border-color: ${theme.colors.orangeDark};
+        border-color: ${theme.palette.orangeDark};
       }
       &:hover {
         background-color: ${bgColor};
@@ -66,7 +66,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
           color: ${pulseTextColor};
         }
         50% {
-          color: ${theme.colors.orangeDark};
+          color: ${theme.palette.orangeDark};
         }
         100% {
           color: ${pulseTextColor};

public/app/features/explore/RichHistory/RichHistory.tsx

@@ -50,8 +50,8 @@ interface RichHistoryState {
 }
 
 const getStyles = stylesFactory((theme: GrafanaTheme) => {
-  const borderColor = theme.isLight ? theme.colors.gray5 : theme.colors.dark6;
+  const borderColor = theme.isLight ? theme.palette.gray5 : theme.palette.dark6;
-  const tabContentBg = theme.colors.pageBg;
+  const tabContentBg = theme.colors.bodyBg;
   return {
     container: css`
       height: 100%;

public/app/features/explore/RichHistory/RichHistoryCard.tsx

@@ -27,16 +27,16 @@ const getStyles = stylesFactory((theme: GrafanaTheme, isRemoved: boolean) => {
   const rigtColumnWidth = '240px';
   const rigtColumnContentWidth = '170px';
 
-  const borderColor = theme.isLight ? theme.colors.gray5 : theme.colors.gray25;
+  const borderColor = theme.isLight ? theme.palette.gray5 : theme.palette.gray25;
 
   /* If datasource was removed, card will have inactive color */
   const cardColor = theme.isLight
     ? isRemoved
-      ? theme.colors.gray95
+      ? theme.palette.gray95
-      : theme.colors.white
+      : theme.palette.white
     : isRemoved
-    ? theme.colors.gray15
+    ? theme.palette.gray15
-    : theme.colors.gray05;
+    : theme.palette.gray05;
 
   return {
     queryCard: css`
@@ -47,7 +47,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme, isRemoved: boolean) => {
       background-color: ${cardColor};
       border-radius: ${theme.border.radius.sm};
       .starred {
-        color: ${theme.colors.orange};
+        color: ${theme.palette.orange};
       }
     `,
     cardRow: css`

public/app/features/explore/RichHistory/RichHistoryContainer.tsx

@@ -22,12 +22,12 @@ import { RichHistory, Tabs } from './RichHistory';
 import { deleteRichHistory } from '../state/actions';
 
 const getStyles = stylesFactory((theme: GrafanaTheme) => {
-  const containerBackground = theme.isLight ? theme.colors.gray95 : theme.colors.gray15;
+  const containerBackground = theme.isLight ? theme.palette.gray95 : theme.palette.gray15;
-  const containerBorderColor = theme.isLight ? theme.colors.gray5 : theme.colors.dark6;
+  const containerBorderColor = theme.isLight ? theme.palette.gray5 : theme.palette.dark6;
-  const handleBackground = theme.isLight ? theme.colors.white : theme.colors.gray15;
+  const handleBackground = theme.isLight ? theme.palette.white : theme.palette.gray15;
-  const handleDots = theme.isLight ? theme.colors.gray85 : theme.colors.gray33;
+  const handleDots = theme.isLight ? theme.palette.gray85 : theme.palette.gray33;
-  const handleBackgroundHover = theme.isLight ? theme.colors.gray85 : theme.colors.gray33;
+  const handleBackgroundHover = theme.isLight ? theme.palette.gray85 : theme.palette.gray33;
-  const handleDotsHover = theme.isLight ? theme.colors.gray70 : theme.colors.dark7;
+  const handleDotsHover = theme.isLight ? theme.palette.gray70 : theme.palette.dark7;
 
   return {
     container: css`

public/app/features/explore/RichHistory/RichHistoryQueriesTab.tsx

@@ -37,7 +37,7 @@ export interface Props {
 }
 
 const getStyles = stylesFactory((theme: GrafanaTheme, height: number) => {
-  const bgColor = theme.isLight ? theme.colors.gray5 : theme.colors.dark4;
+  const bgColor = theme.isLight ? theme.palette.gray5 : theme.palette.dark4;
 
   /* 134px is based on the width of the Query history tabs bar, so the content is aligned to right side of the tab */
   const cardWidth = '100% - 134px';

public/app/features/explore/RichHistory/RichHistoryStarredTab.tsx

@@ -29,7 +29,7 @@ export interface Props {
 }
 
 const getStyles = stylesFactory((theme: GrafanaTheme) => {
-  const bgColor = theme.isLight ? theme.colors.gray5 : theme.colors.dark4;
+  const bgColor = theme.isLight ? theme.palette.gray5 : theme.palette.dark4;
   return {
     container: css`
       display: flex;

public/app/features/search/components/DashboardSearch.tsx

@@ -193,7 +193,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
 
       &:hover {
         cursor: pointer;
-        color: ${theme.colors.white};
+        color: ${theme.palette.white};
       }
 
       @media only screen and (max-width: ${theme.breakpoints.md}) {

public/app/features/search/components/SearchField.tsx

@@ -17,18 +17,19 @@ const getSearchFieldStyles = (theme: GrafanaTheme) => ({
     width: 100%;
     height: 55px; /* this variable is not part of GrafanaTheme yet*/
     display: flex;
-    background-color: ${theme.colors.formInputBg};
+    background-color: ${theme.colors.panelBg};
+    border-bottom: 1px solid ${theme.colors.panelBorder};
     position: relative;
-    box-shadow: 0 0 10px ${theme.isLight ? theme.colors.gray85 : theme.colors.black};
+    align-items: center;
   `,
   input: css`
     max-width: 653px;
-    padding: ${theme.spacing.md} ${theme.spacing.md} ${theme.spacing.sm} ${theme.spacing.md};
+    padding: 0 ${theme.spacing.md};
     height: 51px;
     box-sizing: border-box;
     outline: none;
-    background-color: ${theme.colors.formInputBg};
+    background-color: ${theme.colors.panelBg};
-    background: ${theme.colors.formInputBg};
+    background: ${theme.colors.panelBg};
     flex-grow: 10;
   `,
   spacer: css`
@@ -37,10 +38,8 @@ const getSearchFieldStyles = (theme: GrafanaTheme) => ({
   icon: cx(
     css`
       color: ${theme.colors.textWeak};
-      font-size: ${theme.typography.size.lg};
+      padding: 0 ${theme.spacing.md};
-      padding: ${theme.spacing.md} ${theme.spacing.md} ${theme.spacing.sm} ${theme.spacing.md};
+    `
-    `,
-    'pointer'
   ),
 });
 
@@ -54,7 +53,7 @@ export const SearchField: React.FunctionComponent<SearchFieldProps> = ({ query,
       {/* based on it GrafanaCtrl (L256) decides whether or not hide search */}
       <div className={`${styles.wrapper} search-field-wrapper`}>
         <div className={styles.icon}>
-          <Icon name="search" />
+          <Icon name="search" size="lg" />
         </div>
 
         <input

public/app/features/search/components/SearchResults.tsx

@@ -82,7 +82,7 @@ const getSectionStyles = stylesFactory((theme: GrafanaTheme) => {
     `,
     section: css`
       background: ${theme.colors.panelBg};
-      border-bottom: solid 1px ${theme.isLight ? theme.colors.gray95 : theme.colors.gray25};
+      border-bottom: solid 1px ${theme.isLight ? theme.palette.gray95 : theme.palette.gray25};
       padding: 0px 4px 4px 4px;
       margin-bottom: 3px;
     `,

public/app/features/search/components/SearchWrapper.tsx

@@ -30,10 +30,5 @@ export const SearchWrapper: FC = () => {
     };
   }, [isOpen]);
 
-  return isOpen ? (
+  return isOpen ? <DashboardSearch onCloseSearch={() => setIsOpen(false)} payload={payload} /> : null;
-    <>
-      <div className="search-backdrop" />
-      <DashboardSearch onCloseSearch={() => setIsOpen(false)} payload={payload} />
-    </>
-  ) : null;
 };

public/app/plugins/datasource/graphite/MetricTankMetaInspector.tsx

@@ -117,9 +117,9 @@ export class MetricTankMetaInspector extends PureComponent<Props, State> {
 
 const getStyles = stylesFactory(() => {
   const { theme } = config;
-  const borderColor = theme.isDark ? theme.colors.gray25 : theme.colors.gray85;
+  const borderColor = theme.isDark ? theme.palette.gray25 : theme.palette.gray85;
-  const background = theme.isDark ? theme.colors.dark1 : theme.colors.white;
+  const background = theme.isDark ? theme.palette.dark1 : theme.palette.white;
-  const headerBg = theme.isDark ? theme.colors.gray15 : theme.colors.gray85;
+  const headerBg = theme.isDark ? theme.palette.gray15 : theme.palette.gray85;
 
   return {
     metaItem: css`
@@ -160,14 +160,14 @@ const getStyles = stylesFactory(() => {
       width: 60px;
     `,
     bucketRetention: css`
-      background: linear-gradient(0deg, ${theme.colors.blue85}, ${theme.colors.blue95});
+      background: linear-gradient(0deg, ${theme.palette.blue85}, ${theme.palette.blue95});
       text-align: center;
-      color: ${theme.colors.white};
+      color: ${theme.palette.white};
       margin-right: ${theme.spacing.md};
       border-radius: ${theme.border.radius.md};
     `,
     bucketRetentionActive: css`
-      background: linear-gradient(0deg, ${theme.colors.greenBase}, ${theme.colors.greenShade});
+      background: linear-gradient(0deg, ${theme.palette.greenBase}, ${theme.palette.greenShade});
     `,
   };
 });

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

@@ -61,10 +61,10 @@ export class ThresholdFormCtrl {
   onThresholdTypeChange(index: number) {
     // Because of the ng-model binding, threshold's color mode is already set here
     if (this.panel.thresholds[index].colorMode === 'custom') {
-      this.panel.thresholds[index].fillColor = tinycolor(config.theme.colors.blueBase)
+      this.panel.thresholds[index].fillColor = tinycolor(config.theme.palette.blueBase)
         .setAlpha(0.2)
         .toRgbString();
-      this.panel.thresholds[index].lineColor = tinycolor(config.theme.colors.blueShade)
+      this.panel.thresholds[index].lineColor = tinycolor(config.theme.palette.blueShade)
         .setAlpha(0.6)
         .toRgbString();
     }

public/sass/_variables.dark.generated.scss

@@ -89,10 +89,10 @@ $critical: #e02f44;
 
 // Scaffolding
 // -------------------------
-$body-bg: #0b0c0e;
+$body-bg: #141619;
 $page-bg: #141619;
+$dashboard-bg: #0b0c0e;
 
-$body-color: #d8d9da;
 $text-color: #c7d0d9;
 $text-color-strong: #ffffff;
 $text-color-weak: #8e8e8e;
@@ -125,7 +125,7 @@ $hr-border-color: $dark-9;
 // -------------------------
 $panel-bg: #141619;
 $panel-border: 1px solid #202226;
-$panel-header-hover-bg: #202226;
+$panel-header-hover-bg: #343b40;
 $panel-corner: $panel-bg;
 
 // page header
@@ -151,7 +151,6 @@ $card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.
 // Lists
 $list-item-bg: $card-background;
 $list-item-hover-bg: $card-background-hover;
-$list-item-link-color: $text-color;
 $list-item-shadow: $card-shadow;
 
 $empty-list-cta-bg: $gray-blue;
@@ -231,10 +230,9 @@ $dropdownBorder: #202226;
 $dropdownDividerTop: transparent;
 $dropdownDividerBottom: #343b40;
 
-$dropdownLinkColor: $text-color;
+$dropdownLinkColor: $link-color;
 $dropdownLinkColorHover: $white;
 $dropdownLinkColorActive: $white;
-
 $dropdownLinkBackgroundHover: $dark-9;
 
 // Horizontal forms & lists
@@ -256,7 +254,7 @@ $side-menu-bg-mobile: $panel-bg;
 $side-menu-border: none;
 $side-menu-item-hover-bg: $dark-3;
 $side-menu-shadow: 0 0 20px black;
-$side-menu-link-color: $link-color;
+$side-menu-link-color: #9fa7b3;
 
 // Menu dropdowns
 // -------------------------

public/sass/_variables.light.generated.scss

@@ -82,10 +82,10 @@ $critical: #c4162a;
 
 // Scaffolding
 // -------------------------
-$body-bg: #f7f8fa;
+$body-bg: #ffffff;
 $page-bg: #ffffff;
+$dashboard-bg: #f7f8fa;
 
-$body-color: #52545c;
 $text-color: #52545c;
 $text-color-strong: #41444b;
 $text-color-weak: #767980;
@@ -121,9 +121,9 @@ $panel-header-hover-bg: $gray-6;
 $panel-corner: $gray-4;
 
 // Page header
-$page-header-bg: #e9edf2;
+$page-header-bg: #f7f8fa;
 $page-header-shadow: inset 0px -3px 10px $gray-6;
-$page-header-border-color: #c7d0d9;
+$page-header-border-color: #e9edf2;
 
 $divider-border-color: $gray-2;
 
@@ -143,7 +143,6 @@ $card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.
 // Lists
 $list-item-bg: $gray-7;
 $list-item-hover-bg: $gray-6;
-$list-item-link-color: $text-color;
 $list-item-shadow: $card-shadow;
 
 $empty-list-cta-bg: $gray-6;
@@ -248,7 +247,7 @@ $side-menu-border: 1px solid #343b40;
 $side-menu-bg-mobile: rgba(0, 0, 0, 0); //$gray-6;
 $side-menu-item-hover-bg: #343b40;
 $side-menu-shadow: 5px 0px 10px -5px $gray-1;
-$side-menu-link-color: $gray-6;
+$side-menu-link-color: $gray-4;
 
 // Menu dropdowns
 // -------------------------

public/sass/base/_reboot.scss

@@ -73,7 +73,7 @@ body {
   font-size: $font-size-base;
   line-height: $line-height-base;
   // Go easy on the eyes and use something other than `#000` for text
-  color: $body-color;
+  color: $text-color;
   // By default, `<body>` has no `background-color` so we set one as a best practice.
   background-color: $body-bg;
   height: 100%;

public/sass/components/_dashboard_settings.scss

@@ -7,7 +7,7 @@
   right: 0;
   bottom: 0;
   z-index: $zindex-sidemenu;
-  background: $body-bg;
+  background: $dashboard-bg;
   display: flex;
   flex-direction: column;
 }

public/sass/components/_navbar.scss

@@ -45,7 +45,6 @@
   white-space: nowrap;
   display: block;
   margin: 0;
-  color: $headings-color;
   font-size: $font-size-lg;
   min-height: $navbarHeight;
   line-height: $navbarHeight;
@@ -74,7 +73,6 @@
 }
 
 .navbar-page-btn__folder {
-  color: $text-color-weak;
   display: none;
   padding-right: 8px;
 

public/sass/components/_search.scss

@@ -1,14 +1,3 @@
-.search-backdrop {
-  position: fixed;
-  right: 0;
-  left: 0;
-  bottom: 0;
-  top: 0;
-  z-index: $zindex-modal-backdrop;
-  background-color: $black;
-  @include opacity(60);
-}
-
 .search-container {
   left: 0;
   top: 0;
@@ -16,7 +5,7 @@
   bottom: 0;
   z-index: ($zindex-modal-backdrop + 10);
   position: fixed;
-  background: $body-bg;
+  background: $dashboard-bg;
 }
 
 // Search
@@ -94,6 +83,9 @@
   position: relative;
   flex-grow: 10;
   margin-bottom: $space-md;
+  background: $panel-bg;
+  border: $panel-border;
+  border-radius: 3px;
 
   // Fix for search scroller in mobile view
   height: unset;
@@ -191,10 +183,6 @@
   padding: 0 10px;
 }
 
-.search-item__body-title {
-  color: $list-item-link-color;
-}
-
 .search-item__body-folder-title {
   color: $text-color-weak;
   font-size: $font-size-xs;