Theme: Typography variables overhaul, theme cleanup, improvents to storybook…

Theme: Typography variables overhaul, theme cleanup, improvents to storybook ThemeColors component  (#23531)

* Began text theme refactoring

* Consolidating blue varaibles

* Theme: Typography overhaul and theme cleanup

* Theme updates, alignment and fixes

* Updated snapshots

* Restored template variable class

* Updates

* added container

* Updated snapshot

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

@@ -67,7 +67,6 @@ export interface GrafanaThemeCommons {
     formSpacingBase: number;
     formSpacingBase: number;
     formMargin: string;
     formMargin: string;
     formFieldsetMargin: string;
     formFieldsetMargin: string;
-    formLegendMargin: string;
     formInputHeight: string;
     formInputHeight: string;
     formButtonHeight: number;
     formButtonHeight: number;
     formInputPaddingHorizontal: string;
     formInputPaddingHorizontal: string;
@@ -148,17 +147,13 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
     // New blues palette used by next-gen form elements
     // New blues palette used by next-gen form elements
     blue95: string;
     blue95: string;
     blue85: string;
     blue85: string;
+    blue80: string;
     blue77: string;
     blue77: string;
 
 
     // New reds palette used by next-gen form elements
     // New reds palette used by next-gen form elements
     red88: string;
     red88: string;
 
 
     // Accent colors
     // Accent colors
-    blue: string;
-    blueBase: string;
-    blueShade: string;
-    blueLight: string;
-    blueFaint: string;
     redBase: string;
     redBase: string;
     redShade: string;
     redShade: string;
     greenBase: string;
     greenBase: string;
@@ -188,6 +183,10 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
     bg3: string;
     bg3: string;
     border1: string;
     border1: string;
     border2: string;
     border2: string;
+    border3: string;
+
+    bgBlue1: string;
+    bgBlue2: string;
 
 
     dashboardBg: string;
     dashboardBg: string;
     bodyBg: string;
     bodyBg: string;
@@ -207,18 +206,17 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
     linkExternal: string;
     linkExternal: string;
 
 
     // Text colors
     // Text colors
-    text: string;
     textStrong: string;
     textStrong: string;
+    textHeading: string;
+    text: string;
+    textSemiWeak: string;
     textWeak: string;
     textWeak: string;
     textFaint: string;
     textFaint: string;
-    textEmphasis: string;
-    headingColor: string;
     textBlue: string;
     textBlue: string;
 
 
     // Next-gen forms functional colors
     // Next-gen forms functional colors
     formLabel: string;
     formLabel: string;
     formDescription: string;
     formDescription: string;
-    formLegend: string;
     formInputBg: string;
     formInputBg: string;
     formInputBgDisabled: string;
     formInputBgDisabled: string;
     formInputBorder: string;
     formInputBorder: string;
@@ -229,8 +227,6 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
     formInputText: string;
     formInputText: string;
     formInputDisabledText: string;
     formInputDisabledText: string;
     formInputPlaceholderText: string;
     formInputPlaceholderText: string;
-    formInputTextStrong: string;
-    formInputTextWhite: string;
     formValidationMessageText: string;
     formValidationMessageText: string;
     formValidationMessageBg: string;
     formValidationMessageBg: string;
     formSwitchBg: string;
     formSwitchBg: string;
@@ -244,4 +240,7 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
     formCheckboxBgCheckedHover: string;
     formCheckboxBgCheckedHover: string;
     formCheckboxCheckmark: string;
     formCheckboxCheckmark: string;
   };
   };
+  shadows: {
+    listItem: string;
+  };
 }
 }

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

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

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

@@ -58,8 +58,8 @@ const getPropertiesForVariant = (theme: GrafanaTheme, variant: ButtonVariant) =>
     case 'primary':
     case 'primary':
     default:
     default:
       return {
       return {
-        borderColor: theme.palette.blueShade,
-        background: buttonVariantStyles(theme.palette.blueBase, theme.palette.blueShade, theme.palette.white),
+        borderColor: theme.colors.bgBlue1,
+        background: buttonVariantStyles(theme.colors.bgBlue1, theme.colors.bgBlue2, theme.palette.white),
       };
       };
   }
   }
 };
 };

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: loader 2s cubic-bezier(0.17, 0.67, 0.83, 0.67) 500ms;
       animation-iteration-count: 100;
       animation-iteration-count: 100;
       left: -25%;
       left: -25%;
-      background: ${theme.palette.blue};
+      background: ${theme.palette.blue85};
     }
     }
     @keyframes loader {
     @keyframes loader {
       from {
       from {

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

@@ -13,8 +13,7 @@ export const getLegendStyles = stylesFactory((theme: GrafanaTheme) => {
     legend: css`
     legend: css`
       font-size: ${theme.typography.heading.h3};
       font-size: ${theme.typography.heading.h3};
       font-weight: ${theme.typography.weight.regular};
       font-weight: ${theme.typography.weight.regular};
-      margin: ${theme.spacing.formLegendMargin};
-      color: ${theme.colors.formLegend};
+      margin: 0 0 ${theme.spacing.md} 0;
     `,
     `,
   };
   };
 });
 });

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

@@ -21,12 +21,12 @@ const getRadioButtonStyles = stylesFactory((theme: GrafanaTheme, size: RadioButt
   const horizontalPadding = theme.spacing[size] ?? theme.spacing.md;
   const horizontalPadding = theme.spacing[size] ?? theme.spacing.md;
   const c = theme.palette;
   const c = theme.palette;
 
 
-  const textColor = theme.isLight ? c.gray33 : c.gray70;
-  const textColorHover = theme.isLight ? c.blueShade : c.blueLight;
-  const textColorActive = theme.isLight ? c.blueShade : c.blueLight;
-  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 textColor = theme.colors.textSemiWeak;
+  const textColorHover = theme.colors.text;
+  const textColorActive = theme.isLight ? c.blue77 : c.blue95;
+  const borderColor = theme.colors.border2;
+  const borderColorHover = theme.colors.border3;
+  const borderColorActive = theme.isLight ? c.blue77 : c.blue95;
   const bg = theme.colors.bodyBg;
   const bg = theme.colors.bodyBg;
   const bgDisabled = theme.isLight ? c.gray95 : c.gray15;
   const bgDisabled = theme.isLight ? c.gray95 : c.gray15;
   const bgActive = theme.isLight ? c.white : c.gray05;
   const bgActive = theme.isLight ? c.white : c.gray05;

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

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

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

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

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

@@ -32,7 +32,7 @@ export const getModalStyles = stylesFactory((theme: GrafanaTheme) => {
       opacity: 0.7;
       opacity: 0.7;
     `,
     `,
     modalHeader: css`
     modalHeader: css`
-      background: ${theme.colors.bg1};
+      background: ${theme.colors.bg2};
       border-bottom: 1px solid ${theme.colors.pageHeaderBorder};
       border-bottom: 1px solid ${theme.colors.pageHeaderBorder};
       display: flex;
       display: flex;
       height: 42px;
       height: 42px;

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

@@ -16,7 +16,7 @@ export const PanelOptionsGroup: FunctionComponent<Props> = props => {
         <div className="panel-options-group__header">
         <div className="panel-options-group__header">
           <button className="panel-options-group__add-btn" onClick={props.onAdd}>
           <button className="panel-options-group__add-btn" onClick={props.onAdd}>
             <div className="panel-options-group__add-circle">
             <div className="panel-options-group__add-circle">
-              <Icon name="plus-circle" />
+              <Icon name="plus" />
             </div>
             </div>
             <span className="panel-options-group__title">{props.title}</span>
             <span className="panel-options-group__title">{props.title}</span>
           </button>
           </button>

packages/grafana-ui/src/components/Segment/SegmentAsync.story.tsx

@@ -6,7 +6,7 @@ import { Icon } from '../Icon/Icon';
 
 
 const AddButton = (
 const AddButton = (
   <a className="gf-form-label query-part">
   <a className="gf-form-label query-part">
-    <Icon name="plus-circle" />
+    <Icon name="plus" />
   </a>
   </a>
 );
 );
 
 

packages/grafana-ui/src/components/Segment/SegmentInput.story.tsx

@@ -78,7 +78,7 @@ export const InputWithAutoFocus = () => {
           setInputComponents([...inputComponents, InputComponent]);
           setInputComponents([...inputComponents, InputComponent]);
         }}
         }}
       >
       >
-        <Icon name="plus-circle" />
+        <Icon name="plus" />
       </a>
       </a>
     </SegmentFrame>
     </SegmentFrame>
   );
   );

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

@@ -6,7 +6,7 @@ export const getSelectStyles = stylesFactory((theme: GrafanaTheme) => {
   const bgColor = theme.colors.formInputBg;
   const bgColor = theme.colors.formInputBg;
   const menuShadowColor = theme.colors.dropdownShadow;
   const menuShadowColor = theme.colors.dropdownShadow;
   const optionBgHover = theme.colors.dropdownOptionHoverBg;
   const optionBgHover = theme.colors.dropdownOptionHoverBg;
-  const multiValueContainerBg = theme.colors.bg3;
+  const multiValueContainerBg = theme.colors.bg2;
   const multiValueColor = theme.colors.text;
   const multiValueColor = theme.colors.text;
 
 
   return {
   return {

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

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

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

@@ -42,7 +42,6 @@ const getTabStyles = stylesFactory((theme: GrafanaTheme) => {
       background: ${colors.bodyBg};
       background: ${colors.bodyBg};
       color: ${colors.link};
       color: ${colors.link};
       overflow: hidden;
       overflow: hidden;
-      cursor: not-allowed;
 
 
       &::before {
       &::before {
         display: block;
         display: block;

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

 import React from 'react';
 import React from 'react';
-import { css, cx } from 'emotion';
-import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-import { useTheme } from '../../themes/ThemeContext';
+import { ThemeColors } from './ThemeColors';
 
 
 export default {
 export default {
   title: 'General/ThemeColors',
   title: 'General/ThemeColors',
-  component: () => {},
-  decorators: [withCenteredStory],
+  component: ThemeColors,
+  decorators: [],
   parameters: {
   parameters: {
     docs: {},
     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>;
+export const ThemeColorsDemo = () => {
+  return <ThemeColors />;
 };
 };

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

+import React, { FC } from 'react';
+import { css, cx } from 'emotion';
+import { useTheme } from '../../themes/ThemeContext';
+import { Icon } from '../Icon/Icon';
+import { HorizontalGroup } from '../Layout/Layout';
+
+interface DemoBoxProps {
+  bg: string;
+  border?: string;
+  textColor?: string;
+}
+
+const DemoBox: FC<DemoBoxProps> = ({ bg, border, children }) => {
+  const style = cx(
+    css`
+      padding: 16px 32px;
+      background: ${bg};
+      width: 100%;
+    `,
+    border
+      ? css`
+          border: 1px solid ${border};
+        `
+      : null
+  );
+
+  return (
+    <div className={style}>
+      <div
+        className={css`
+          padding-bottom: 16px;
+        `}
+      >
+        {name}
+      </div>
+      {children}
+    </div>
+  );
+};
+
+const DemoText: FC<{ color?: string; bold?: boolean; size?: number }> = ({ color, bold, size, children }) => {
+  const style = css`
+    padding: 4px;
+    color: ${color ?? 'inherit'};
+    font-weight: ${bold ? 500 : 400};
+    font-size: ${size ?? 14}px;
+  `;
+
+  return <div className={style}>{children}</div>;
+};
+
+export const ThemeColors = () => {
+  const theme = useTheme();
+
+  return (
+    <div
+      className={css`
+        width: 100%;
+      `}
+    >
+      <DemoBox bg={theme.colors.dashboardBg}>
+        <DemoText>theme.colors.dashboardBg</DemoText>
+        <DemoBox bg={theme.colors.bg1} border={theme.colors.border1}>
+          <DemoText>
+            theme.colors.bg1 is the main & preferred content background for text and elements This box is using border1
+          </DemoText>
+          <DemoBox bg={theme.colors.bg2} border={theme.colors.border2}>
+            <DemoText>
+              colors.bg2 background used for elements placed on colors.bg1. Using colors.border1 should be used on
+              elements placed ontop of bg1. Ths box is using border2.
+            </DemoText>
+            <DemoBox bg={theme.colors.bg3} border={theme.colors.border2}>
+              <DemoText>colors.bg3 background used for elements placed on colors.bg2.</DemoText>
+            </DemoBox>
+          </DemoBox>
+        </DemoBox>
+      </DemoBox>
+
+      <HorizontalGroup>
+        <DemoBox bg={theme.colors.bodyBg}>
+          <>
+            Text on main body background (bg1)
+            <DemoText color={theme.colors.textHeading} size={24}>
+              textHeading Usually a bit bigger text <Icon name="trash-alt" />
+            </DemoText>
+            <DemoText color={theme.colors.text}>
+              text <Icon name="trash-alt" />
+            </DemoText>
+            <DemoText color={theme.colors.textSemiWeak}>
+              textSemiWeak <Icon name="trash-alt" />
+            </DemoText>
+            <DemoText color={theme.colors.textWeak}>
+              textWeak <Icon name="trash-alt" />
+            </DemoText>
+            <DemoText color={theme.colors.textFaint}>
+              textFaint <Icon name="trash-alt" />
+            </DemoText>
+            <DemoText color={theme.colors.textStrong}>
+              textStrong <Icon name="trash-alt" />
+            </DemoText>
+            <DemoText color={theme.colors.formInputText}>
+              formInputText <Icon name="trash-alt" />
+            </DemoText>
+            <DemoText color={theme.colors.formLabel} bold>
+              formLabel is also bold <Icon name="trash-alt" />
+            </DemoText>
+            <DemoText color={theme.colors.formDescription}>
+              formDescription <Icon name="trash-alt" />
+            </DemoText>
+            <DemoText color={theme.colors.textBlue} bold>
+              textBlue usually bold
+            </DemoText>
+            <DemoText color={theme.colors.link}>link</DemoText>
+            <DemoText color={theme.colors.linkHover}>linkHover</DemoText>
+            <DemoText color={theme.colors.linkDisabled}>linkDisabled</DemoText>
+            <DemoText color={theme.colors.linkExternal}>linkExternal</DemoText>
+          </>
+        </DemoBox>
+        <DemoBox bg={theme.colors.formInputBg}>
+          This is inside form input bg (same as dashboard bg)
+          <DemoText color={theme.colors.formInputText}>formInputText</DemoText>
+          <DemoText color={theme.colors.formInputDisabledText}>formInputDisabledText</DemoText>
+          <DemoText color={theme.colors.formInputPlaceholderText}>formInputPlaceholderText</DemoText>
+        </DemoBox>
+        <DemoBox bg={theme.colors.bg2}>
+          Inside bg2
+          <DemoText color={theme.colors.text}>
+            text <Icon name="trash-alt" />
+          </DemoText>
+          <DemoText color={theme.colors.textWeak}>
+            textWeak <Icon name="trash-alt" />
+          </DemoText>
+          <DemoText color={theme.colors.textFaint}>
+            textFaint <Icon name="trash-alt" />
+          </DemoText>
+          <DemoText color={theme.colors.textStrong}>
+            textStrong <Icon name="trash-alt" />
+          </DemoText>
+        </DemoBox>
+      </HorizontalGroup>
+    </div>
+  );
+};

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

@@ -110,7 +110,7 @@ const getBodyStyles = stylesFactory((theme: GrafanaTheme) => {
       .react-calendar__month-view__weekdays {
       .react-calendar__month-view__weekdays {
         background-color: inherit;
         background-color: inherit;
         text-align: center;
         text-align: center;
-        color: ${theme.palette.blueShade};
+        color: ${theme.palette.blue77};
 
 
         abbr {
         abbr {
           border: 0;
           border: 0;

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

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

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

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

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

@@ -12,10 +12,9 @@ $theme-name: dark;
 
 
 // New Colors
 // New Colors
 // -------------------------
 // -------------------------
-$blue-faint: ${theme.palette.blueFaint};
-$blue-light: ${theme.palette.blueLight};
-$blue-base: ${theme.palette.blueBase};
-$blue-shade: ${theme.palette.blueShade};
+$blue-light: ${theme.palette.blue95};
+$blue-base: ${theme.palette.blue80};
+$blue-shade: ${theme.palette.blue77};
 $red-base: ${theme.palette.redBase};
 $red-base: ${theme.palette.redBase};
 $red-shade: ${theme.palette.redShade};
 $red-shade: ${theme.palette.redShade};
 $green-base: ${theme.palette.greenBase};
 $green-base: ${theme.palette.greenBase};
@@ -59,7 +58,7 @@ $white: ${theme.palette.white};
 
 
 // Accent colors
 // Accent colors
 // -------------------------
 // -------------------------
-$blue: ${theme.palette.blue};
+$blue: ${theme.palette.blue85};
 $red: $red-base;
 $red: $red-base;
 $yellow: ${theme.palette.yellow};
 $yellow: ${theme.palette.yellow};
 $orange: ${theme.palette.orange};
 $orange: ${theme.palette.orange};
@@ -92,7 +91,7 @@ $text-color: ${theme.colors.text};
 $text-color-strong: ${theme.colors.textStrong};
 $text-color-strong: ${theme.colors.textStrong};
 $text-color-weak: ${theme.colors.textWeak};
 $text-color-weak: ${theme.colors.textWeak};
 $text-color-faint: ${theme.colors.textFaint};
 $text-color-faint: ${theme.colors.textFaint};
-$text-color-emphasis: ${theme.colors.textEmphasis};
+$text-color-emphasis: ${theme.colors.textStrong};
 $text-blue: ${theme.colors.textBlue};
 $text-blue: ${theme.colors.textBlue};
 
 
 $text-shadow-faint: 1px 1px 4px rgb(45, 45, 45);
 $text-shadow-faint: 1px 1px 4px rgb(45, 45, 45);
@@ -111,7 +110,7 @@ $external-link-color: ${theme.colors.linkExternal};
 
 
 // Typography
 // Typography
 // -------------------------
 // -------------------------
-$headings-color: ${theme.colors.headingColor};
+$headings-color: ${theme.colors.textHeading};
 $abbr-border-color: $gray-2 !default;
 $abbr-border-color: $gray-2 !default;
 $text-muted: $text-color-weak;
 $text-muted: $text-color-weak;
 
 
@@ -353,7 +352,7 @@ $variable-option-bg: $dropdownLinkBackgroundHover;
 $switch-bg: $input-bg;
 $switch-bg: $input-bg;
 $switch-slider-color: $dark-3;
 $switch-slider-color: $dark-3;
 $switch-slider-off-bg: $gray-1;
 $switch-slider-off-bg: $gray-1;
-$switch-slider-on-bg: ${theme.palette.blueLight};
+$switch-slider-on-bg: ${theme.palette.blue77};
 $switch-slider-shadow: 0 0 3px black;
 $switch-slider-shadow: 0 0 3px black;
 
 
 //Checkbox
 //Checkbox
@@ -379,8 +378,8 @@ $panel-editor-viz-item-bg-hover: darken($blue-base, 46%);
 $panel-options-group-border: none;
 $panel-options-group-border: none;
 $panel-options-group-header-bg: ${theme.colors.bg2};
 $panel-options-group-header-bg: ${theme.colors.bg2};
 
 
-$panel-grid-placeholder-bg: $blue-faint;
-$panel-grid-placeholder-shadow: 0 0 4px $blue-shade;
+$panel-grid-placeholder-bg: darken(${theme.palette.blue77}, 30%);
+$panel-grid-placeholder-shadow: 0 0 4px ${theme.palette.blue80};
 
 
 // logs
 // logs
 $logs-color-unkown: $gray-2;
 $logs-color-unkown: $gray-2;

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

@@ -12,10 +12,9 @@ $theme-name: light;
 
 
 // New Colors
 // New Colors
 // -------------------------
 // -------------------------
-$blue-faint: ${theme.palette.blueFaint};
-$blue-light: ${theme.palette.blueLight};
-$blue-base: ${theme.palette.blueBase};
-$blue-shade: ${theme.palette.blueShade};
+$blue-light: ${theme.palette.blue95};
+$blue-base: ${theme.palette.blue80};
+$blue-shade: ${theme.palette.blue77};
 $red-base: ${theme.palette.redBase};
 $red-base: ${theme.palette.redBase};
 $red-shade: ${theme.palette.redShade};
 $red-shade: ${theme.palette.redShade};
 $green-base: ${theme.palette.greenBase};
 $green-base: ${theme.palette.greenBase};
@@ -53,7 +52,7 @@ $white: ${theme.palette.white};
 
 
 // Accent colors
 // Accent colors
 // -------------------------
 // -------------------------
-$blue: ${theme.palette.blue};
+$blue: ${theme.colors.textBlue};
 $red: $red-base;
 $red: $red-base;
 $yellow: ${theme.palette.yellow};
 $yellow: ${theme.palette.yellow};
 $orange: ${theme.palette.orange};
 $orange: ${theme.palette.orange};
@@ -86,7 +85,7 @@ $text-color: ${theme.colors.text};
 $text-color-strong: ${theme.colors.textStrong};
 $text-color-strong: ${theme.colors.textStrong};
 $text-color-weak: ${theme.colors.textWeak};
 $text-color-weak: ${theme.colors.textWeak};
 $text-color-faint: ${theme.colors.textFaint};
 $text-color-faint: ${theme.colors.textFaint};
-$text-color-emphasis: ${theme.colors.textEmphasis};
+$text-color-emphasis: ${theme.colors.textStrong};
 $text-blue: ${theme.colors.textBlue};
 $text-blue: ${theme.colors.textBlue};
 
 
 $text-shadow-faint: none;
 $text-shadow-faint: none;
@@ -104,7 +103,7 @@ $external-link-color: ${theme.colors.linkExternal};
 
 
 // Typography
 // Typography
 // -------------------------
 // -------------------------
-$headings-color: ${theme.colors.headingColor};
+$headings-color: ${theme.colors.textHeading};
 $abbr-border-color: $gray-2 !default;
 $abbr-border-color: $gray-2 !default;
 $text-muted: $text-color-weak;
 $text-muted: $text-color-weak;
 
 
@@ -346,7 +345,7 @@ $variable-option-bg: $dropdownLinkBackgroundHover;
 $switch-bg: $white;
 $switch-bg: $white;
 $switch-slider-color: $gray-7;
 $switch-slider-color: $gray-7;
 $switch-slider-off-bg: $gray-5;
 $switch-slider-off-bg: $gray-5;
-$switch-slider-on-bg: ${theme.palette.blueShade};
+$switch-slider-on-bg: ${theme.palette.blue77};
 $switch-slider-shadow: 0 0 3px $dark-2;
 $switch-slider-shadow: 0 0 3px $dark-2;
 
 
 //Checkbox
 //Checkbox
@@ -372,8 +371,8 @@ $panel-editor-viz-item-bg-hover: lighten($blue-base, 45%);
 $panel-options-group-border: none;
 $panel-options-group-border: none;
 $panel-options-group-header-bg: $gray-5;
 $panel-options-group-header-bg: $gray-5;
 
 
-$panel-grid-placeholder-bg: $blue-faint;
-$panel-grid-placeholder-shadow: 0 0 4px $blue-light;
+$panel-grid-placeholder-bg: lighten(${theme.palette.blue95}, 30%);
+$panel-grid-placeholder-shadow: 0 0 4px ${theme.palette.blue95};
 
 
 // logs
 // logs
 $logs-color-unkown: $gray-5;
 $logs-color-unkown: $gray-5;

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

@@ -22,15 +22,10 @@ const basicColors = {
   gray5: '#ececec',
   gray5: '#ececec',
   gray6: '#f4f5f8', // not used in dark theme
   gray6: '#f4f5f8', // not used in dark theme
   gray7: '#fbfbfb', // not used in dark theme
   gray7: '#fbfbfb', // not used in dark theme
-  blueBase: '#3274d9',
-  blueShade: '#1f60c4',
-  blueLight: '#5794f2',
-  blueFaint: '#041126',
   redBase: '#e02f44',
   redBase: '#e02f44',
   redShade: '#c4162a',
   redShade: '#c4162a',
   greenBase: '#299c46',
   greenBase: '#299c46',
   greenShade: '#23843b',
   greenShade: '#23843b',
-  blue: '#33b5e5',
   red: '#d44a3a',
   red: '#d44a3a',
   yellow: '#ecbb13',
   yellow: '#ecbb13',
   purple: '#9933cc',
   purple: '#9933cc',
@@ -44,41 +39,51 @@ const backgrounds = {
   bg2: basicColors.gray15,
   bg2: basicColors.gray15,
   bg3: basicColors.gray25,
   bg3: basicColors.gray25,
   dashboardBg: basicColors.gray05,
   dashboardBg: basicColors.gray05,
+  bgBlue1: basicColors.blue80,
+  bgBlue2: basicColors.blue77,
 };
 };
 
 
 const borders = {
 const borders = {
   border1: basicColors.gray15,
   border1: basicColors.gray15,
   border2: basicColors.gray25,
   border2: basicColors.gray25,
+  border3: basicColors.gray33,
+};
+
+const textColors = {
+  textStrong: basicColors.gray98,
+  textHeading: basicColors.gray4,
+  text: basicColors.gray85,
+  textSemiWeak: basicColors.gray70,
+  textWeak: basicColors.gray60,
+  textFaint: basicColors.gray33,
+  textBlue: basicColors.blue85,
 };
 };
 
 
 const form = {
 const form = {
   // Next-gen forms functional colors
   // Next-gen forms functional colors
-  formLabel: basicColors.gray70,
+  formLabel: textColors.textSemiWeak,
   formDescription: basicColors.gray60,
   formDescription: basicColors.gray60,
-  formLegend: basicColors.gray85,
   formInputBg: basicColors.gray05,
   formInputBg: basicColors.gray05,
   formInputBgDisabled: basicColors.gray10,
   formInputBgDisabled: basicColors.gray10,
-  formInputBorder: basicColors.gray25,
+  formInputBorder: borders.border2,
   formInputBorderHover: basicColors.gray33,
   formInputBorderHover: basicColors.gray33,
   formInputBorderActive: basicColors.blue95,
   formInputBorderActive: basicColors.blue95,
   formInputBorderInvalid: basicColors.red88,
   formInputBorderInvalid: basicColors.red88,
-  formInputPlaceholderText: basicColors.gray1,
+  formInputPlaceholderText: textColors.textFaint,
   formInputText: basicColors.gray85,
   formInputText: basicColors.gray85,
   formInputDisabledText: basicColors.gray70,
   formInputDisabledText: basicColors.gray70,
-  formInputTextStrong: basicColors.gray85,
-  formInputTextWhite: basicColors.white,
-  formFocusOutline: basicColors.blueShade,
+  formFocusOutline: basicColors.blue77,
   formValidationMessageText: basicColors.white,
   formValidationMessageText: basicColors.white,
   formValidationMessageBg: basicColors.red88,
   formValidationMessageBg: basicColors.red88,
   formSwitchBg: basicColors.gray25,
   formSwitchBg: basicColors.gray25,
-  formSwitchBgActive: basicColors.blueLight,
+  formSwitchBgActive: basicColors.blue95,
   formSwitchBgHover: basicColors.gray33,
   formSwitchBgHover: basicColors.gray33,
-  formSwitchBgActiveHover: basicColors.blueBase,
+  formSwitchBgActiveHover: basicColors.blue80,
   formSwitchBgDisabled: basicColors.gray25,
   formSwitchBgDisabled: basicColors.gray25,
   formSwitchDot: basicColors.gray15,
   formSwitchDot: basicColors.gray15,
   formCheckboxBg: basicColors.dark5,
   formCheckboxBg: basicColors.dark5,
-  formCheckboxBgChecked: basicColors.blueLight,
-  formCheckboxBgCheckedHover: basicColors.blueBase,
+  formCheckboxBgChecked: basicColors.blue95,
+  formCheckboxBgCheckedHover: basicColors.blue80,
   formCheckboxCheckmark: basicColors.gray25,
   formCheckboxCheckmark: basicColors.gray25,
 };
 };
 
 
@@ -106,6 +111,7 @@ const darkTheme: GrafanaTheme = {
     ...backgrounds,
     ...backgrounds,
     ...borders,
     ...borders,
     ...form,
     ...form,
+    ...textColors,
 
 
     bodyBg: backgrounds.bg1,
     bodyBg: backgrounds.bg1,
     panelBg: backgrounds.bg1,
     panelBg: backgrounds.bg1,
@@ -117,19 +123,13 @@ const darkTheme: GrafanaTheme = {
     dropdownShadow: basicColors.black,
     dropdownShadow: basicColors.black,
     dropdownOptionHoverBg: backgrounds.bg2,
     dropdownOptionHoverBg: backgrounds.bg2,
 
 
-    // text
-    headingColor: basicColors.gray4,
-    text: basicColors.gray85,
-    textStrong: basicColors.white,
-    textWeak: basicColors.gray2,
-    textEmphasis: basicColors.gray5,
-    textFaint: basicColors.dark5,
-    textBlue: basicColors.blue85,
-
     link: basicColors.gray4,
     link: basicColors.gray4,
     linkDisabled: basicColors.gray2,
     linkDisabled: basicColors.gray2,
     linkHover: basicColors.white,
     linkHover: basicColors.white,
-    linkExternal: basicColors.blue,
+    linkExternal: basicColors.blue85,
+  },
+  shadows: {
+    listItem: '-1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3)',
   },
   },
 };
 };
 
 

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

@@ -3,20 +3,23 @@ import { GrafanaThemeCommons } from '@grafana/data';
 export const commonColorsPalette = {
 export const commonColorsPalette = {
   // New greys palette used by next-gen form elements
   // New greys palette used by next-gen form elements
   gray98: '#f7f8fa',
   gray98: '#f7f8fa',
+  gray97: '#f1f5f9',
   gray95: '#e9edf2',
   gray95: '#e9edf2',
+  gray90: '#dce1e6',
   gray85: '#c7d0d9',
   gray85: '#c7d0d9',
   gray70: '#9fa7b3',
   gray70: '#9fa7b3',
   gray60: '#7b8087',
   gray60: '#7b8087',
   gray33: '#464c54',
   gray33: '#464c54',
-  gray25: '#343b40',
+  gray25: '#2c3235',
   gray15: '#202226',
   gray15: '#202226',
   gray10: '#141619',
   gray10: '#141619',
   gray05: '#0b0c0e',
   gray05: '#0b0c0e',
 
 
   // New blues palette used by next-gen form elements
   // New blues palette used by next-gen form elements
-  blue95: '#5794f2',
-  blue85: '#339ae5',
-  blue77: '#1f60c4',
+  blue95: '#5794f2', // blue95
+  blue85: '#33a2e5', // blueText
+  blue80: '#3274d9', // blue80
+  blue77: '#1f60c4', // blue77
 
 
   // New reds palette used by next-gen form elements
   // New reds palette used by next-gen form elements
   red88: '#e02f44',
   red88: '#e02f44',
@@ -86,7 +89,6 @@ const theme: GrafanaThemeCommons = {
     formSpacingBase: SPACING_BASE,
     formSpacingBase: SPACING_BASE,
     formMargin: `${SPACING_BASE * 4}px`,
     formMargin: `${SPACING_BASE * 4}px`,
     formFieldsetMargin: `${SPACING_BASE * 2}px`,
     formFieldsetMargin: `${SPACING_BASE * 2}px`,
-    formLegendMargin: `0 0 ${SPACING_BASE * 2}px 0`,
     formInputHeight: `${SPACING_BASE * 4}px`,
     formInputHeight: `${SPACING_BASE * 4}px`,
     formButtonHeight: SPACING_BASE * 4,
     formButtonHeight: SPACING_BASE * 4,
     formInputPaddingHorizontal: `${SPACING_BASE}px`,
     formInputPaddingHorizontal: `${SPACING_BASE}px`,

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

@@ -22,15 +22,10 @@ const basicColors = {
   gray5: '#dde4ed',
   gray5: '#dde4ed',
   gray6: '#e9edf2', // same as gray95
   gray6: '#e9edf2', // same as gray95
   gray7: '#f7f8fa', // same as gray98
   gray7: '#f7f8fa', // same as gray98
-  blueBase: '#3274d9',
-  blueShade: '#1f60c4',
-  blueLight: '#5794f2',
-  blueFaint: '#f5f9ff',
   redBase: '#e02f44',
   redBase: '#e02f44',
   redShade: '#c4162a',
   redShade: '#c4162a',
   greenBase: '#3eb15b',
   greenBase: '#3eb15b',
   greenShade: '#369b4f',
   greenShade: '#369b4f',
-  blue: '#0083b3',
   red: '#d44939',
   red: '#d44939',
   yellow: '#ff851b',
   yellow: '#ff851b',
   purple: '#9954bb',
   purple: '#9954bb',
@@ -40,19 +35,32 @@ const basicColors = {
 
 
 const backgrounds = {
 const backgrounds = {
   bg1: basicColors.white,
   bg1: basicColors.white,
-  bg2: basicColors.gray98,
+  bg2: basicColors.gray97,
   bg3: basicColors.gray95,
   bg3: basicColors.gray95,
   dashboardBg: basicColors.gray98,
   dashboardBg: basicColors.gray98,
+  bgBlue1: basicColors.blue80,
+  bgBlue2: basicColors.blue77,
 };
 };
 
 
 const borders = {
 const borders = {
-  border1: basicColors.gray95,
+  border1: basicColors.gray90,
   border2: basicColors.gray85,
   border2: basicColors.gray85,
+  border3: basicColors.gray70,
+};
+
+const textColors = {
+  // Text colors
+  textStrong: basicColors.gray15,
+  text: basicColors.gray33,
+  textSemiWeak: basicColors.gray33,
+  textWeak: basicColors.gray60,
+  textFaint: basicColors.gray70,
+  textBlue: basicColors.blue85,
 };
 };
 
 
 const form = {
 const form = {
-  formLabel: basicColors.gray33,
-  formDescription: basicColors.gray33,
+  formLabel: textColors.text,
+  formDescription: textColors.textWeak,
   formLegend: basicColors.gray25,
   formLegend: basicColors.gray25,
   formInputBg: basicColors.white,
   formInputBg: basicColors.white,
   formInputBgDisabled: basicColors.gray95,
   formInputBgDisabled: basicColors.gray95,
@@ -60,23 +68,21 @@ const form = {
   formInputBorderHover: basicColors.gray70,
   formInputBorderHover: basicColors.gray70,
   formInputBorderActive: basicColors.blue77,
   formInputBorderActive: basicColors.blue77,
   formInputBorderInvalid: basicColors.red88,
   formInputBorderInvalid: basicColors.red88,
-  formInputText: basicColors.gray25,
-  formInputPlaceholderText: basicColors.gray70,
-  formInputDisabledText: basicColors.gray33,
-  formInputTextStrong: basicColors.gray25,
-  formInputTextWhite: basicColors.white,
-  formFocusOutline: basicColors.blueLight,
+  formInputText: textColors.text,
+  formInputPlaceholderText: textColors.textFaint,
+  formInputDisabledText: textColors.textWeak,
+  formFocusOutline: basicColors.blue95,
   formValidationMessageText: basicColors.white,
   formValidationMessageText: basicColors.white,
   formValidationMessageBg: basicColors.red88,
   formValidationMessageBg: basicColors.red88,
   formSwitchBg: basicColors.gray85,
   formSwitchBg: basicColors.gray85,
-  formSwitchBgActive: basicColors.blueShade,
+  formSwitchBgActive: basicColors.blue77,
   formSwitchBgHover: basicColors.gray3,
   formSwitchBgHover: basicColors.gray3,
-  formSwitchBgActiveHover: basicColors.blueBase,
+  formSwitchBgActiveHover: basicColors.blue80,
   formSwitchBgDisabled: basicColors.gray4,
   formSwitchBgDisabled: basicColors.gray4,
   formSwitchDot: basicColors.white,
   formSwitchDot: basicColors.white,
   formCheckboxBg: basicColors.white,
   formCheckboxBg: basicColors.white,
-  formCheckboxBgChecked: basicColors.blueShade,
-  formCheckboxBgCheckedHover: basicColors.blueBase,
+  formCheckboxBgChecked: basicColors.blue77,
+  formCheckboxBgCheckedHover: basicColors.blue80,
   formCheckboxCheckmark: basicColors.white,
   formCheckboxCheckmark: basicColors.white,
 };
 };
 
 
@@ -103,6 +109,8 @@ const lightTheme: GrafanaTheme = {
   colors: {
   colors: {
     ...backgrounds,
     ...backgrounds,
     ...borders,
     ...borders,
+    ...textColors,
+    ...form,
 
 
     bodyBg: backgrounds.bg1,
     bodyBg: backgrounds.bg1,
     panelBg: backgrounds.bg1,
     panelBg: backgrounds.bg1,
@@ -114,22 +122,15 @@ const lightTheme: GrafanaTheme = {
     dropdownShadow: basicColors.gray3,
     dropdownShadow: basicColors.gray3,
     dropdownOptionHoverBg: backgrounds.bg2,
     dropdownOptionHoverBg: backgrounds.bg2,
 
 
-    // Text colors
-    text: basicColors.gray1,
-    textStrong: basicColors.dark2,
-    textWeak: basicColors.gray2,
-    textEmphasis: basicColors.dark5,
-    textFaint: basicColors.dark4,
-    textBlue: basicColors.blue85,
-
     // Link colors
     // Link colors
-    link: basicColors.gray1,
-    linkDisabled: basicColors.gray3,
-    linkHover: basicColors.dark1,
-    linkExternal: basicColors.blueLight,
-    headingColor: basicColors.gray1,
-
-    ...form,
+    link: textColors.text,
+    linkDisabled: textColors.textWeak,
+    linkHover: textColors.textStrong,
+    linkExternal: basicColors.blue85,
+    textHeading: basicColors.gray25,
+  },
+  shadows: {
+    listItem: '-1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.1)',
   },
   },
 };
 };
 
 

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

@@ -2,54 +2,37 @@ import { GrafanaTheme } from '@grafana/data';
 import { selectThemeVariant } from './selectThemeVariant';
 import { selectThemeVariant } from './selectThemeVariant';
 import { css } from 'emotion';
 import { css } from 'emotion';
 import { stylesFactory } from './stylesFactory';
 import { stylesFactory } from './stylesFactory';
+import tinycolor from 'tinycolor2';
 
 
 export function cardChrome(theme: GrafanaTheme): string {
 export function cardChrome(theme: GrafanaTheme): string {
-  if (theme.isDark) {
-    return `
-       background: linear-gradient(135deg, ${theme.palette.dark8}, ${theme.palette.dark6});
-       &:hover {
-         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};
-    `;
-  }
-
   return `
   return `
-       background: linear-gradient(135deg, ${theme.palette.gray6}, ${theme.palette.gray7});
+       background: ${theme.colors.bg2};
        &:hover {
        &:hover {
-         background: linear-gradient(135deg, ${theme.palette.gray7}, ${theme.palette.gray6});
+         background: ${hoverColor(theme.colors.bg2, theme)};
        }
        }
-       box-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.1);
+       box-shadow: ${theme.shadows.listItem};
        border-radius: ${theme.border.radius.md};
        border-radius: ${theme.border.radius.md};
     `;
     `;
 }
 }
 
 
-export function listItem(theme: GrafanaTheme): string {
-  if (theme.isDark) {
-    return `
-       background: ${theme.palette.dark7};
-       &:hover {
-         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};
-    `;
-  }
+export function hoverColor(color: string, theme: GrafanaTheme) {
+  return theme.isDark ? tinycolor(color).brighten(2) : tinycolor(color).darken(2);
+}
 
 
+export function listItem(theme: GrafanaTheme): string {
   return `
   return `
-       background: ${theme.palette.gray7};
-       &:hover {
-         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};
-    `;
+  background: ${theme.colors.bg2};
+  &:hover {
+    background: ${hoverColor(theme.colors.bg2, theme)};
+  }
+  box-shadow: ${theme.shadows.listItem};
+  border-radius: ${theme.border.radius.md};
+`;
 }
 }
 
 
 export function listItemSelected(theme: GrafanaTheme): string {
 export function listItemSelected(theme: GrafanaTheme): string {
   return `
   return `
-       background: ${theme.isLight ? theme.palette.gray6 : theme.palette.dark9};
+       background: ${hoverColor(theme.colors.bg2, theme)};
        color: ${theme.colors.textStrong};
        color: ${theme.colors.textStrong};
     `;
     `;
 }
 }

public/app/core/components/Select/FolderPicker.tsx

@@ -171,6 +171,7 @@ export class FolderPicker extends PureComponent<Props, State> {
                 defaultOptions
                 defaultOptions
                 defaultValue={folder}
                 defaultValue={folder}
                 value={folder}
                 value={folder}
+                className={'width-20'}
                 allowCustomValue={enableCreateNew}
                 allowCustomValue={enableCreateNew}
                 loadOptions={this.debouncedSearch}
                 loadOptions={this.debouncedSearch}
                 onChange={this.onFolderChange}
                 onChange={this.onFolderChange}

public/app/core/components/Select/__snapshots__/FolderPicker.test.tsx.snap

@@ -15,6 +15,7 @@ exports[`FolderPicker should render 1`] = `
       </label>
       </label>
       <AsyncSelect
       <AsyncSelect
         allowCustomValue={false}
         allowCustomValue={false}
+        className="width-20"
         defaultOptions={true}
         defaultOptions={true}
         defaultValue={Object {}}
         defaultValue={Object {}}
         loadOptions={[Function]}
         loadOptions={[Function]}

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

@@ -55,11 +55,12 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
 
 
   const highlightColor = selectThemeVariant(
   const highlightColor = selectThemeVariant(
     {
     {
-      light: theme.palette.blueLight,
-      dark: theme.palette.blueShade,
+      light: theme.palette.blue95,
+      dark: theme.palette.blue77,
     },
     },
     theme.type
     theme.type
   );
   );
+
   return {
   return {
     wrapper: css`
     wrapper: css`
       border-top: 1px dashed ${borderColor};
       border-top: 1px dashed ${borderColor};

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

@@ -111,7 +111,7 @@ export const OverrideEditor: React.FC<OverrideEditorProps> = ({ data, override,
         <div className={styles.propertyPickerWrapper}>
         <div className={styles.propertyPickerWrapper}>
           <ValuePicker
           <ValuePicker
             label="Set config property"
             label="Set config property"
-            icon="plus-circle"
+            icon="plus"
             options={configPropertiesOptions}
             options={configPropertiesOptions}
             variant={'link'}
             variant={'link'}
             onChange={o => {
             onChange={o => {

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

@@ -347,7 +347,7 @@ enum Pane {
  */
  */
 const getStyles = stylesFactory((theme: GrafanaTheme, props: Props) => {
 const getStyles = stylesFactory((theme: GrafanaTheme, props: Props) => {
   const { uiState } = props;
   const { uiState } = props;
-  const handleColor = theme.palette.blueLight;
+  const handleColor = theme.palette.blue95;
   const paneSpaceing = theme.spacing.md;
   const paneSpaceing = theme.spacing.md;
 
 
   const resizer = css`
   const resizer = css`

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

@@ -71,7 +71,7 @@ const getStyles = (theme: GrafanaTheme) => ({
   `,
   `,
   name: css`
   name: css`
     font-weight: ${theme.typography.weight.semibold};
     font-weight: ${theme.typography.weight.semibold};
-    color: ${theme.palette.blue};
+    color: ${theme.colors.textBlue};
   `,
   `,
   iconRow: css`
   iconRow: css`
     display: flex;
     display: flex;
@@ -107,7 +107,7 @@ const getStyles = (theme: GrafanaTheme) => ({
     text-align: center;
     text-align: center;
     font-family: ${theme.typography.fontFamily.monospace};
     font-family: ${theme.typography.fontFamily.monospace};
     font-size: ${theme.typography.size.sm};
     font-size: ${theme.typography.size.sm};
-    color: ${theme.palette.blueBase};
+    color: ${theme.palette.blue80};
     border-bottom: 1px dashed ${theme.palette.gray15};
     border-bottom: 1px dashed ${theme.palette.gray15};
     flex-grow: 0;
     flex-grow: 0;
     flex-shrink: 1;
     flex-shrink: 1;

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

@@ -28,12 +28,10 @@ const VizTypePickerPlugin: React.FC<Props> = ({ isCurrent, plugin, onClick, disa
 };
 };
 
 
 const getStyles = stylesFactory((theme: GrafanaTheme) => {
 const getStyles = stylesFactory((theme: GrafanaTheme) => {
-  const itemBorder = `1px solid ${theme.isLight ? theme.palette.gray85 : theme.palette.gray25}`;
-
   return {
   return {
     item: css`
     item: css`
-      background: ${theme.isLight ? theme.palette.gray98 : theme.palette.gray15};
-      border: ${itemBorder};
+      background: ${theme.colors.bg2};
+      border: 1px solid ${theme.colors.border2};
       border-radius: 3px;
       border-radius: 3px;
       height: 100px;
       height: 100px;
       width: 100%;
       width: 100%;
@@ -49,8 +47,8 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
       padding-bottom: 6px;
       padding-bottom: 6px;
 
 
       &:hover {
       &:hover {
-        box-shadow: 0 0 4px ${theme.palette.blueLight};
-        border: 1px solid ${theme.palette.blueLight};
+        box-shadow: 0 0 4px ${theme.palette.blue95};
+        border: 1px solid ${theme.palette.blue95};
       }
       }
     `,
     `,
     current: css`
     current: css`
@@ -63,7 +61,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
       cursor: default;
       cursor: default;
       &:hover {
       &:hover {
         box-shadow: none;
         box-shadow: none;
-        border: ${itemBorder};
+        border: 1px solid ${theme.colors.border2};
       }
       }
     `,
     `,
     name: css`
     name: css`

public/app/features/explore/AdHocFilterField.tsx

@@ -7,7 +7,7 @@ export const DEFAULT_REMOVE_FILTER_VALUE = '-- remove filter --';
 
 
 const addFilterButton = (onAddFilter: (event: React.MouseEvent) => void) => (
 const addFilterButton = (onAddFilter: (event: React.MouseEvent) => void) => (
   <button className="gf-form-label gf-form-label--btn query-part" onClick={onAddFilter}>
   <button className="gf-form-label gf-form-label--btn query-part" onClick={onAddFilter}>
-    <Icon name="plus-circle" />
+    <Icon name="plus" />
   </button>
   </button>
 );
 );
 
 

public/app/features/explore/Explore.tsx

@@ -308,15 +308,19 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
         {datasourceMissing ? this.renderEmptyState() : null}
         {datasourceMissing ? this.renderEmptyState() : null}
         {datasourceInstance && (
         {datasourceInstance && (
           <div className="explore-container">
           <div className="explore-container">
-            <QueryRows exploreEvents={this.exploreEvents} exploreId={exploreId} queryKeys={queryKeys} />
-            <SecondaryActions
-              addQueryRowButtonDisabled={isLive}
-              // We cannot show multiple traces at the same time right now so we do not show add query button.
-              addQueryRowButtonHidden={mode === ExploreMode.Tracing}
-              richHistoryButtonActive={showRichHistory}
-              onClickAddQueryRowButton={this.onClickAddQueryRowButton}
-              onClickRichHistoryButton={this.toggleShowRichHistory}
-            />
+            <div className="panel-container">
+              <div className="panel-content">
+                <QueryRows exploreEvents={this.exploreEvents} exploreId={exploreId} queryKeys={queryKeys} />
+                <SecondaryActions
+                  addQueryRowButtonDisabled={isLive}
+                  // We cannot show multiple traces at the same time right now so we do not show add query button.
+                  addQueryRowButtonHidden={mode === ExploreMode.Tracing}
+                  richHistoryButtonActive={showRichHistory}
+                  onClickAddQueryRowButton={this.onClickAddQueryRowButton}
+                  onClickRichHistoryButton={this.toggleShowRichHistory}
+                />
+              </div>
+            </div>
             <ErrorContainer queryError={queryError} />
             <ErrorContainer queryError={queryError} />
             <AutoSizer onResize={this.onResize} disableHeight>
             <AutoSizer onResize={this.onResize} disableHeight>
               {({ width }) => {
               {({ width }) => {

public/app/features/explore/LiveLogs.tsx

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

public/app/features/explore/SecondaryActions.tsx

@@ -28,7 +28,7 @@ export function SecondaryActions(props: Props) {
           onClick={props.onClickAddQueryRowButton}
           onClick={props.onClickAddQueryRowButton}
           disabled={props.addQueryRowButtonDisabled}
           disabled={props.addQueryRowButtonDisabled}
         >
         >
-          <Icon className="icon-margin-right" name="plus-circle" size="sm" />
+          <Icon className="icon-margin-right" name="plus" size="sm" />
           <span className="btn-title">{'\xA0' + 'Add query'}</span>
           <span className="btn-title">{'\xA0' + 'Add query'}</span>
         </button>
         </button>
       )}
       )}

public/app/features/explore/__snapshots__/MetaInfoText.test.tsx.snap

@@ -2,7 +2,7 @@
 
 
 exports[`MetaInfoText should render component 1`] = `
 exports[`MetaInfoText should render component 1`] = `
 <div
 <div
-  className="css-mi7ebz"
+  className="css-1u65mbf"
 >
 >
   <Memo(MetaInfoItem)
   <Memo(MetaInfoItem)
     key="0-label"
     key="0-label"

public/app/features/panel/panellinks/module.html

@@ -66,5 +66,5 @@
 </div>
 </div>
 
 
 <div class="editor-row">
 <div class="editor-row">
-  <button class="btn btn-inverse" ng-click="addLink()"><icon name="'plus-circle'"></icon> Add link</button>
+  <button class="btn btn-inverse" ng-click="addLink()"><icon name="'plus'"></icon> Add link</button>
 </div>
 </div>

public/app/features/teams/TeamGroupSync.tsx

@@ -87,7 +87,7 @@ export class TeamGroupSync extends PureComponent<Props, State> {
           <div className="page-action-bar__spacer" />
           <div className="page-action-bar__spacer" />
           {groups.length > 0 && (
           {groups.length > 0 && (
             <button className="btn btn-primary pull-right" onClick={this.onToggleAdding}>
             <button className="btn btn-primary pull-right" onClick={this.onToggleAdding}>
-              <Icon name="plus-circle" /> Add group
+              <Icon name="plus" /> Add group
             </button>
             </button>
           )}
           )}
         </div>
         </div>

public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap

@@ -109,7 +109,7 @@ exports[`Render should render groups table 1`] = `
       onClick={[Function]}
       onClick={[Function]}
     >
     >
       <Icon
       <Icon
-        name="plus-circle"
+        name="plus"
       />
       />
        Add group
        Add group
     </button>
     </button>

public/app/features/variables/adhoc/picker/AdHocFilterBuilder.tsx

@@ -71,7 +71,7 @@ function filterAddButton(key: string | null): ReactElement | undefined {
 
 
   return (
   return (
     <a className="gf-form-label query-part">
     <a className="gf-form-label query-part">
-      <Icon name="plus-circle" />
+      <Icon name="plus" />
     </a>
     </a>
   );
   );
 }
 }

public/app/plugins/datasource/cloudwatch/components/Dimensions.test.tsx

@@ -26,9 +26,7 @@ describe('Dimensions', () => {
         />
         />
       );
       );
 
 
-      expect(wrapper.html()).toEqual(
-        `<div class=\"gf-form\"><a class=\"gf-form-label query-part\"><div class=\"css-1cvxpvr\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"css-sr6nr\"><path d=\"M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm0,18a8,8,0,1,1,8-8A8,8,0,0,1,12,20Zm4-9H13V8a1,1,0,0,0-2,0v3H8a1,1,0,0,0,0,2h3v3a1,1,0,0,0,2,0V13h3a1,1,0,0,0,0-2Z\"></path></svg></div></a></div>`
-      );
+      expect(wrapper.html()).toEqual(expect.stringContaining(`gf-form`));
     });
     });
   });
   });
 
 
@@ -42,9 +40,7 @@ describe('Dimensions', () => {
           loadValues={() => Promise.resolve<SelectableStrings>([])}
           loadValues={() => Promise.resolve<SelectableStrings>([])}
         />
         />
       );
       );
-      expect(wrapper.html()).toEqual(
-        `<div class=\"gf-form\"><a class=\"gf-form-label query-part\">somekey</a></div><label class=\"gf-form-label query-segment-operator\">=</label><div class=\"gf-form\"><a class=\"gf-form-label query-part\">somevalue</a></div><div class=\"gf-form\"><a class=\"gf-form-label query-part\"><div class=\"css-1cvxpvr\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"css-sr6nr\"><path d=\"M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm0,18a8,8,0,1,1,8-8A8,8,0,0,1,12,20Zm4-9H13V8a1,1,0,0,0-2,0v3H8a1,1,0,0,0,0,2h3v3a1,1,0,0,0,2,0V13h3a1,1,0,0,0,0-2Z\"></path></svg></div></a></div>`
-      );
+      expect(wrapper.html()).toEqual(expect.stringContaining(`gf-form`));
     });
     });
   });
   });
 });
 });

public/app/plugins/datasource/cloudwatch/components/Dimensions.tsx

@@ -69,7 +69,7 @@ export const Dimensions: FunctionComponent<Props> = ({ dimensions, loadValues, l
           allowCustomValue
           allowCustomValue
           Component={
           Component={
             <a className="gf-form-label query-part">
             <a className="gf-form-label query-part">
-              <Icon name="plus-circle" />
+              <Icon name="plus" />
             </a>
             </a>
           }
           }
           loadOptions={() => loadKeys().then(excludeUsedKeys)}
           loadOptions={() => loadKeys().then(excludeUsedKeys)}

public/app/plugins/datasource/cloudwatch/components/Stats.tsx

@@ -34,7 +34,7 @@ export const Stats: FunctionComponent<Props> = ({ stats, values, onChange, varia
     <Segment
     <Segment
       Component={
       Component={
         <a className="gf-form-label query-part">
         <a className="gf-form-label query-part">
-          <Icon name="plus-circle" />
+          <Icon name="plus" />
         </a>
         </a>
       }
       }
       allowCustomValue
       allowCustomValue

public/app/plugins/datasource/cloudwatch/components/__snapshots__/Stats.test.tsx.snap

@@ -41,7 +41,7 @@ Array [
           xmlns="http://www.w3.org/2000/svg"
           xmlns="http://www.w3.org/2000/svg"
         >
         >
           <path
           <path
-            d="M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm0,18a8,8,0,1,1,8-8A8,8,0,0,1,12,20Zm4-9H13V8a1,1,0,0,0-2,0v3H8a1,1,0,0,0,0,2h3v3a1,1,0,0,0,2,0V13h3a1,1,0,0,0,0-2Z"
+            d="M19,11H13V5a1,1,0,0,0-2,0v6H5a1,1,0,0,0,0,2h6v6a1,1,0,0,0,2,0V13h6a1,1,0,0,0,0-2Z"
           />
           />
         </svg>
         </svg>
       </div>
       </div>

public/app/plugins/datasource/elasticsearch/partials/bucket_agg.html

@@ -214,10 +214,10 @@
       </div>
       </div>
       <div class="gf-form">
       <div class="gf-form">
         <label class="gf-form-label" ng-if="$first">
         <label class="gf-form-label" ng-if="$first">
-          <a class="pointer" ng-click="addFiltersQuery()"><icon class="'plus-circle'"></icon></a>
+          <a class="pointer" ng-click="addFiltersQuery()"><icon class="'plus'"></icon></a>
         </label>
         </label>
         <label class="gf-form-label" ng-if="!$first">
         <label class="gf-form-label" ng-if="!$first">
-          <a class="pointer" ng-click="removeFiltersQuery(filter)"><icon class="'minus-circle'"></icon></a>
+          <a class="pointer" ng-click="removeFiltersQuery(filter)"><icon class="'minus'"></icon></a>
         </label>
         </label>
       </div>
       </div>
     </div>
     </div>

public/app/plugins/datasource/elasticsearch/partials/metric_agg.html

@@ -38,10 +38,10 @@
 
 
 	<div class="gf-form">
 	<div class="gf-form">
 		<label class="gf-form-label" ng-if="isFirst">
 		<label class="gf-form-label" ng-if="isFirst">
-			<a class="pointer" ng-click="addMetricAgg()"><icon name="'plus-circle'"></icon></a>
+			<a class="pointer" ng-click="addMetricAgg()"><icon name="'plus'"></icon></a>
 		</label>
 		</label>
 		<label class="gf-form-label" ng-if="!isSingle">
 		<label class="gf-form-label" ng-if="!isSingle">
-			<a class="pointer" ng-click="removeMetricAgg()"><icon name="'minus-circle'"></icon></a>
+			<a class="pointer" ng-click="removeMetricAgg()"><icon name="'minus'"></icon></a>
 		</label>
 		</label>
 	</div>
 	</div>
 </div>
 </div>

public/app/plugins/datasource/elasticsearch/partials/pipeline_variables.html

@@ -17,10 +17,10 @@
       css-class="width-12"
       css-class="width-12"
     ></metric-segment-model>
     ></metric-segment-model>
     <label class="gf-form-label">
     <label class="gf-form-label">
-      <a class="pointer" ng-click="remove($index)"><icon name="'minus-circle'"></icon></a>
+      <a class="pointer" ng-click="remove($index)"><icon name="'minus'"></icon></a>
     </label>
     </label>
     <label class="gf-form-label">
     <label class="gf-form-label">
-      <a class="pointer" ng-click="add()"><icon name="'plus-circle'"></icon></a>
+      <a class="pointer" ng-click="add()"><icon name="'plus'"></icon></a>
     </label>
     </label>
   </div>
   </div>
   <div class="gf-form offset-width-17" ng-if="$index !== 0">
   <div class="gf-form offset-width-17" ng-if="$index !== 0">
@@ -40,7 +40,7 @@
       css-class="width-12"
       css-class="width-12"
     ></metric-segment-model>
     ></metric-segment-model>
     <label class="gf-form-label">
     <label class="gf-form-label">
-      <a class="pointer" ng-click="remove($index)"><icon name="'minus-circle'"></icon></a>
+      <a class="pointer" ng-click="remove($index)"><icon name="'minus'"></icon></a>
     </label>
     </label>
   </div>
   </div>
 </div>
 </div>

public/app/plugins/datasource/graphite/add_graphite_func.ts

@@ -11,9 +11,9 @@ export function graphiteAddFunc($compile: any) {
     '<input type="text"' + ' class="gf-form-input"' + ' spellcheck="false" style="display:none"></input>';
     '<input type="text"' + ' class="gf-form-input"' + ' spellcheck="false" style="display:none"></input>';
 
 
   const buttonTemplate =
   const buttonTemplate =
-    '<a class="gf-form-label query-part dropdown-toggle"' +
+    '<a class="gf-form-label dropdown-toggle"' +
     ' tabindex="1" gf-dropdown="functionMenu" data-toggle="dropdown">' +
     ' tabindex="1" gf-dropdown="functionMenu" data-toggle="dropdown">' +
-    '<icon name="fa fa-plus"></i></a>';
+    '<icon name="\'plus\'" size="\'sm\'"></name></a>';
 
 
   return {
   return {
     link: function($scope: any, elem: JQuery) {
     link: function($scope: any, elem: JQuery) {

public/app/plugins/datasource/loki/configuration/DerivedFields.tsx

@@ -66,11 +66,11 @@ export const DerivedFields = (props: Props) => {
           })}
           })}
         <div>
         <div>
           <Button
           <Button
-            variant="primary"
+            variant="secondary"
             className={css`
             className={css`
               margin-right: 10px;
               margin-right: 10px;
             `}
             `}
-            icon="plus-circle"
+            icon="plus"
             onClick={event => {
             onClick={event => {
               event.preventDefault();
               event.preventDefault();
               const newDerivedFields = [...(value || []), { name: '', matcherRegex: '' }];
               const newDerivedFields = [...(value || []), { name: '', matcherRegex: '' }];

public/app/plugins/datasource/opentsdb/partials/query.editor.html

@@ -112,7 +112,7 @@
 			</div>
 			</div>
 			<label class="gf-form-label query-keyword" ng-hide="ctrl.addFilterMode">
 			<label class="gf-form-label query-keyword" ng-hide="ctrl.addFilterMode">
 				<a ng-click="ctrl.addFilter()">
 				<a ng-click="ctrl.addFilter()">
-					<icon name="'plus-circle'"></icon>
+					<icon name="'plus'"></icon>
 				</a>
 				</a>
 			</label>
 			</label>
  		</div>
  		</div>
@@ -190,7 +190,7 @@
 
 
 		<div class="gf-form" ng-hide="ctrl.addTagMode">
 		<div class="gf-form" ng-hide="ctrl.addTagMode">
 			<label class="gf-form-label query-keyword">
 			<label class="gf-form-label query-keyword">
-				<a ng-click="ctrl.addTag()"><icon name="'plus-circle'"></icon></a>
+				<a ng-click="ctrl.addTag()"><icon name="'plus'"></icon></a>
 			</label>
 			</label>
 		</div>
 		</div>
 
 

public/app/plugins/datasource/stackdriver/components/GroupBys.tsx

@@ -39,7 +39,7 @@ export const GroupBys: FunctionComponent<Props> = ({ groupBys = [], values = [],
         <Segment
         <Segment
           Component={
           Component={
             <a className="gf-form-label query-part">
             <a className="gf-form-label query-part">
-              <Icon name="plus-circle" />
+              <Icon name="plus" />
             </a>
             </a>
           }
           }
           allowCustomValue
           allowCustomValue

public/app/plugins/datasource/stackdriver/components/LabelFilter.tsx

@@ -76,7 +76,7 @@ export const LabelFilter: FunctionComponent<Props> = ({
           allowCustomValue
           allowCustomValue
           Component={
           Component={
             <a className="gf-form-label query-part">
             <a className="gf-form-label query-part">
-              <Icon name="plus-circle" />
+              <Icon name="plus" />
             </a>
             </a>
           }
           }
           options={[variableOptionGroup, ...labelsToGroupedOptions(Object.keys(labels))]}
           options={[variableOptionGroup, ...labelsToGroupedOptions(Object.keys(labels))]}

public/app/plugins/datasource/testdata/partials/query.editor.html

@@ -11,11 +11,11 @@
       <input type="text" class="gf-form-input" placeholder="{{ctrl.scenario.stringInput}}" ng-model="ctrl.target.stringInput" ng-change="ctrl.refresh()" ng-model-onblur>
       <input type="text" class="gf-form-input" placeholder="{{ctrl.scenario.stringInput}}" ng-model="ctrl.target.stringInput" ng-change="ctrl.refresh()" ng-model-onblur>
 		</div>
 		</div>
 		<div class="gf-form">
 		<div class="gf-form">
-			<label class="gf-form-label query-keyword">Alias</label>
+			<label class="gf-form-label query-keyword width-7">Alias</label>
 			<input type="text" class="gf-form-input width-14" placeholder="optional" ng-model="ctrl.target.alias" ng-change="ctrl.refresh()" ng-model-onblur>
 			<input type="text" class="gf-form-input width-14" placeholder="optional" ng-model="ctrl.target.alias" ng-change="ctrl.refresh()" ng-model-onblur>
 		</div>
 		</div>
 		<div ng-if="ctrl.showLabels" class="gf-form gf-form--grow">
 		<div ng-if="ctrl.showLabels" class="gf-form gf-form--grow">
-			<label class="gf-form-label query-keyword">
+			<label class="gf-form-label query-keyword width-7">
 				Labels
 				Labels
 				<info-popover mode="right-normal">
 				<info-popover mode="right-normal">
 					Set labels using a key=value syntax:<br/>
 					Set labels using a key=value syntax:<br/>
@@ -62,7 +62,7 @@
     <div class="gf-form">
     <div class="gf-form">
 			<label class="gf-form-label query-keyword width-7">Start value</label>
 			<label class="gf-form-label query-keyword width-7">Start value</label>
 			<input type="number"
 			<input type="number"
-				class="gf-form-input width-6"
+				class="gf-form-input width-14"
 				placeholder="auto"
 				placeholder="auto"
 				ng-model="ctrl.target.startValue"
 				ng-model="ctrl.target.startValue"
 				step="1"
 				step="1"

public/app/plugins/panel/graph/tab_display.html

@@ -199,7 +199,7 @@
   </div>
   </div>
   <div class="gf-form-button-row">
   <div class="gf-form-button-row">
     <button class="btn btn-inverse" ng-click="ctrl.addSeriesOverride()">
     <button class="btn btn-inverse" ng-click="ctrl.addSeriesOverride()">
-      <icon name="'plus-circle'"></icon>&nbsp;Add series override<tip>Regex match example: /server[0-3]/i </tip>
+      <icon name="'plus'"></icon>&nbsp;Add series override<tip>Regex match example: /server[0-3]/i </tip>
     </button>
     </button>
   </div>
   </div>
 </div>
 </div>

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

@@ -99,7 +99,7 @@
 
 
     <div class="gf-form-button-row">
     <div class="gf-form-button-row">
       <button class="btn btn-inverse" ng-click="ctrl.addThreshold()" ng-disabled="ctrl.disabled">
       <button class="btn btn-inverse" ng-click="ctrl.addThreshold()" ng-disabled="ctrl.disabled">
-        <icon name="'plus-circle'"></icon>&nbsp;Add Threshold
+        <icon name="'plus'"></icon>&nbsp;Add threshold
       </button>
       </button>
     </div>
     </div>
   </div>
   </div>

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

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

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

@@ -83,7 +83,7 @@
 
 
   <div class="gf-form-button-row">
   <div class="gf-form-button-row">
     <button class="btn btn-inverse" ng-click="ctrl.addTimeRegion()">
     <button class="btn btn-inverse" ng-click="ctrl.addTimeRegion()">
-      <icon name="'plus-circle'"></icon>&nbsp;Add time region<tip>All configured time regions refers to UTC time</tip>
+      <icon name="'plus'"></icon>&nbsp;Add time region<tip>All configured time regions refers to UTC time</tip>
     </button>
     </button>
   </div>
   </div>
 </div>
 </div>

public/app/plugins/panel/homelinks/module.tsx

@@ -92,7 +92,8 @@ export const getStyles = stylesFactory(() => {
       margin-right: ${theme.spacing.sm};
       margin-right: ${theme.spacing.sm};
     `,
     `,
     footer: css`
     footer: css`
-      ${styleMixins.listItem(theme)}
+      background: ${theme.colors.bg2};
+      font-size: ${theme.typography.size.sm};
       position: absolute;
       position: absolute;
       bottom: 0;
       bottom: 0;
       width: 100%;
       width: 100%;

public/app/plugins/panel/news/NewsPanel.tsx

@@ -4,7 +4,7 @@ import { css } from 'emotion';
 
 
 // Utils & Services
 // Utils & Services
 import { GrafanaTheme } from '@grafana/data';
 import { GrafanaTheme } from '@grafana/data';
-import { stylesFactory, CustomScrollbar, styleMixins } from '@grafana/ui';
+import { stylesFactory, CustomScrollbar } from '@grafana/ui';
 import config from 'app/core/config';
 import config from 'app/core/config';
 import { feedToDataFrame } from './utils';
 import { feedToDataFrame } from './utils';
 import { sanitize } from 'app/core/utils/text';
 import { sanitize } from 'app/core/utils/text';
@@ -82,8 +82,8 @@ export class NewsPanel extends PureComponent<Props, State> {
                 <a href={item.link} target="_blank">
                 <a href={item.link} target="_blank">
                   <div className={styles.title}>{item.title}</div>
                   <div className={styles.title}>{item.title}</div>
                   <div className={styles.date}>{dateTime(item.date).format('MMM DD')} </div>
                   <div className={styles.date}>{dateTime(item.date).format('MMM DD')} </div>
-                  <div className={styles.content} dangerouslySetInnerHTML={{ __html: sanitize(item.content) }} />
                 </a>
                 </a>
+                <div className={styles.content} dangerouslySetInnerHTML={{ __html: sanitize(item.content) }} />
               </div>
               </div>
             );
             );
           })}
           })}
@@ -98,11 +98,11 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({
     height: 100%;
     height: 100%;
   `,
   `,
   item: css`
   item: css`
-    ${styleMixins.listItem(theme)}
     padding: ${theme.spacing.sm};
     padding: ${theme.spacing.sm};
     position: relative;
     position: relative;
     margin-bottom: 4px;
     margin-bottom: 4px;
     margin-right: ${theme.spacing.sm};
     margin-right: ${theme.spacing.sm};
+    border-bottom: 2px solid ${theme.colors.border1};
   `,
   `,
   title: css`
   title: css`
     color: ${theme.colors.linkExternal};
     color: ${theme.colors.linkExternal};
@@ -113,6 +113,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({
   content: css`
   content: css`
     p {
     p {
       margin-bottom: 4px;
       margin-bottom: 4px;
+      color: ${theme.colors.text};
     }
     }
   `,
   `,
   date: css`
   date: css`

public/app/plugins/panel/singlestat/mappings.html

@@ -43,7 +43,7 @@
 
 
     <div class="gf-form-button-row">
     <div class="gf-form-button-row">
       <button class="btn btn-inverse" ng-click="ctrl.addValueMap();">
       <button class="btn btn-inverse" ng-click="ctrl.addValueMap();">
-        <icon name="'plus-circle'"></icon>
+        <icon name="'plus'"></icon>
         Add a value mapping
         Add a value mapping
       </button>
       </button>
     </div>
     </div>
@@ -66,7 +66,7 @@
 
 
     <div class="gf-form-button-row">
     <div class="gf-form-button-row">
       <button class="btn btn-inverse" ng-click="ctrl.addRangeMap()">
       <button class="btn btn-inverse" ng-click="ctrl.addRangeMap()">
-        <icon name="'plus-circle'"></icon>
+        <icon name="'plus'"></icon>
         Add a range mapping
         Add a range mapping
       </button>
       </button>
     </div>
     </div>

public/app/plugins/panel/table/column_options.html

@@ -164,7 +164,7 @@
           </div>
           </div>
           <div class="gf-form">
           <div class="gf-form">
             <label class="gf-form-label">
             <label class="gf-form-label">
-              <a class="pointer" ng-click="editor.addValueMap(style)"><icon name="'plus-circle'"></icon></a>
+              <a class="pointer" ng-click="editor.addValueMap(style)"><icon name="'plus'"></icon></a>
             </label>
             </label>
           </div>
           </div>
         </div>
         </div>
@@ -302,6 +302,6 @@
 
 
 <div class="gf-form-button-row">
 <div class="gf-form-button-row">
   <button class="btn btn-inverse" ng-click="editor.addColumnStyle()">
   <button class="btn btn-inverse" ng-click="editor.addColumnStyle()">
-    <icon name="'plus-circle'"></icon>&nbsp;Add column style
+    <icon name="'plus'"></icon>&nbsp;Add column style
   </button>
   </button>
 </div>
 </div>

public/sass/_variables.dark.generated.scss

@@ -15,7 +15,6 @@ $theme-name: dark;
 
 
 // New Colors
 // New Colors
 // -------------------------
 // -------------------------
-$blue-faint: #041126;
 $blue-light: #5794f2;
 $blue-light: #5794f2;
 $blue-base: #3274d9;
 $blue-base: #3274d9;
 $blue-shade: #1f60c4;
 $blue-shade: #1f60c4;
@@ -31,7 +30,7 @@ $gray85: #c7d0d9;
 $gray70: #9fa7b3;
 $gray70: #9fa7b3;
 $gray60: #7b8087;
 $gray60: #7b8087;
 $gray33: #464c54;
 $gray33: #464c54;
-$gray25: #343b40;
+$gray25: #2c3235;
 $gray15: #202226;
 $gray15: #202226;
 $gray10: #141619;
 $gray10: #141619;
 $gray05: #0b0c0e;
 $gray05: #0b0c0e;
@@ -62,12 +61,12 @@ $white: #ffffff;
 
 
 // Accent colors
 // Accent colors
 // -------------------------
 // -------------------------
-$blue: #33b5e5;
+$blue: #33a2e5;
 $red: $red-base;
 $red: $red-base;
 $yellow: #ecbb13;
 $yellow: #ecbb13;
 $orange: #eb7b18;
 $orange: #eb7b18;
 $purple: #9933cc;
 $purple: #9933cc;
-$variable: #339ae5;
+$variable: #33a2e5;
 
 
 $brand-primary: #eb7b18;
 $brand-primary: #eb7b18;
 $brand-success: #299c46;
 $brand-success: #299c46;
@@ -92,11 +91,11 @@ $page-bg: #141619;
 $dashboard-bg: #0b0c0e;
 $dashboard-bg: #0b0c0e;
 
 
 $text-color: #c7d0d9;
 $text-color: #c7d0d9;
-$text-color-strong: #ffffff;
-$text-color-weak: #8e8e8e;
-$text-color-faint: #222426;
-$text-color-emphasis: #ececec;
-$text-blue: #339ae5;
+$text-color-strong: #f7f8fa;
+$text-color-weak: #7b8087;
+$text-color-faint: #464c54;
+$text-color-emphasis: #f7f8fa;
+$text-blue: #33a2e5;
 
 
 $text-shadow-faint: 1px 1px 4px rgb(45, 45, 45);
 $text-shadow-faint: 1px 1px 4px rgb(45, 45, 45);
 $textShadow: none;
 $textShadow: none;
@@ -110,7 +109,7 @@ $brand-gradient-vertical: linear-gradient(#f05a28 30%, #fbca0a 99%);
 $link-color: #d8d9da;
 $link-color: #d8d9da;
 $link-color-disabled: #8e8e8e;
 $link-color-disabled: #8e8e8e;
 $link-hover-color: #ffffff;
 $link-hover-color: #ffffff;
-$external-link-color: #33b5e5;
+$external-link-color: #33a2e5;
 
 
 // Typography
 // Typography
 // -------------------------
 // -------------------------
@@ -205,11 +204,11 @@ $input-bg: $input-black;
 $input-bg-disabled: $dark-6;
 $input-bg-disabled: $dark-6;
 
 
 $input-color: #c7d0d9;
 $input-color: #c7d0d9;
-$input-border-color: #343b40;
+$input-border-color: #2c3235;
 $input-box-shadow: none;
 $input-box-shadow: none;
 $input-border-focus: #5794f2;
 $input-border-focus: #5794f2;
 $input-box-shadow-focus: $blue-light !default;
 $input-box-shadow-focus: $blue-light !default;
-$input-color-placeholder: #555555;
+$input-color-placeholder: #464c54;
 $input-label-bg: #202226;
 $input-label-bg: #202226;
 $input-color-select-arrow: $white;
 $input-color-select-arrow: $white;
 
 
@@ -226,7 +225,7 @@ $typeahead-selected-color: $yellow;
 $dropdownBackground: $panel-bg;
 $dropdownBackground: $panel-bg;
 $dropdownBorder: #202226;
 $dropdownBorder: #202226;
 $dropdownDividerTop: transparent;
 $dropdownDividerTop: transparent;
-$dropdownDividerBottom: #343b40;
+$dropdownDividerBottom: #2c3235;
 
 
 $dropdownLinkColor: $link-color;
 $dropdownLinkColor: $link-color;
 $dropdownLinkColorHover: $white;
 $dropdownLinkColorHover: $white;
@@ -356,7 +355,7 @@ $variable-option-bg: $dropdownLinkBackgroundHover;
 $switch-bg: $input-bg;
 $switch-bg: $input-bg;
 $switch-slider-color: $dark-3;
 $switch-slider-color: $dark-3;
 $switch-slider-off-bg: $gray-1;
 $switch-slider-off-bg: $gray-1;
-$switch-slider-on-bg: #5794f2;
+$switch-slider-on-bg: #1f60c4;
 $switch-slider-shadow: 0 0 3px black;
 $switch-slider-shadow: 0 0 3px black;
 
 
 //Checkbox
 //Checkbox
@@ -382,8 +381,8 @@ $panel-editor-viz-item-bg-hover: darken($blue-base, 46%);
 $panel-options-group-border: none;
 $panel-options-group-border: none;
 $panel-options-group-header-bg: #202226;
 $panel-options-group-header-bg: #202226;
 
 
-$panel-grid-placeholder-bg: $blue-faint;
-$panel-grid-placeholder-shadow: 0 0 4px $blue-shade;
+$panel-grid-placeholder-bg: darken(#1f60c4, 30%);
+$panel-grid-placeholder-shadow: 0 0 4px #3274d9;
 
 
 // logs
 // logs
 $logs-color-unkown: $gray-2;
 $logs-color-unkown: $gray-2;

public/sass/_variables.light.generated.scss

@@ -15,7 +15,6 @@ $theme-name: light;
 
 
 // New Colors
 // New Colors
 // -------------------------
 // -------------------------
-$blue-faint: #f5f9ff;
 $blue-light: #5794f2;
 $blue-light: #5794f2;
 $blue-base: #3274d9;
 $blue-base: #3274d9;
 $blue-shade: #1f60c4;
 $blue-shade: #1f60c4;
@@ -31,7 +30,7 @@ $gray85: #c7d0d9;
 $gray70: #9fa7b3;
 $gray70: #9fa7b3;
 $gray60: #7b8087;
 $gray60: #7b8087;
 $gray33: #464c54;
 $gray33: #464c54;
-$gray25: #343b40;
+$gray25: #2c3235;
 $gray15: #202226;
 $gray15: #202226;
 $gray10: #141619;
 $gray10: #141619;
 $gray05: #0b0c0e;
 $gray05: #0b0c0e;
@@ -56,12 +55,12 @@ $white: #ffffff;
 
 
 // Accent colors
 // Accent colors
 // -------------------------
 // -------------------------
-$blue: #0083b3;
+$blue: #33a2e5;
 $red: $red-base;
 $red: $red-base;
 $yellow: #ff851b;
 $yellow: #ff851b;
 $orange: #ff7941;
 $orange: #ff7941;
 $purple: #9954bb;
 $purple: #9954bb;
-$variable: #339ae5;
+$variable: #33a2e5;
 
 
 $brand-primary: #ff7941;
 $brand-primary: #ff7941;
 $brand-success: #3eb15b;
 $brand-success: #3eb15b;
@@ -85,12 +84,12 @@ $body-bg: #ffffff;
 $page-bg: #ffffff;
 $page-bg: #ffffff;
 $dashboard-bg: #f7f8fa;
 $dashboard-bg: #f7f8fa;
 
 
-$text-color: #52545c;
-$text-color-strong: #41444b;
-$text-color-weak: #767980;
-$text-color-faint: #35373f;
-$text-color-emphasis: #41444b;
-$text-blue: #339ae5;
+$text-color: #464c54;
+$text-color-strong: #202226;
+$text-color-weak: #7b8087;
+$text-color-faint: #9fa7b3;
+$text-color-emphasis: #202226;
+$text-blue: #33a2e5;
 
 
 $text-shadow-faint: none;
 $text-shadow-faint: none;
 
 
@@ -100,14 +99,14 @@ $brand-gradient-vertical: linear-gradient(#f05a28 30%, #fbca0a 99%);
 
 
 // Links
 // Links
 // -------------------------
 // -------------------------
-$link-color: #52545c;
-$link-color-disabled: #acb6bf;
-$link-hover-color: #1e2028;
-$external-link-color: #5794f2;
+$link-color: #464c54;
+$link-color-disabled: #7b8087;
+$link-hover-color: #202226;
+$external-link-color: #33a2e5;
 
 
 // Typography
 // Typography
 // -------------------------
 // -------------------------
-$headings-color: #52545c;
+$headings-color: #2c3235;
 $abbr-border-color: $gray-2 !default;
 $abbr-border-color: $gray-2 !default;
 $text-muted: $text-color-weak;
 $text-muted: $text-color-weak;
 
 
@@ -116,14 +115,14 @@ $hr-border-color: $gray-4 !default;
 // Panel
 // Panel
 // -------------------------
 // -------------------------
 $panel-bg: #ffffff;
 $panel-bg: #ffffff;
-$panel-border: 1px solid #e9edf2;
-$panel-header-hover-bg: #f7f8fa;
+$panel-border: 1px solid #dce1e6;
+$panel-header-hover-bg: #f1f5f9;
 $panel-corner: $gray-4;
 $panel-corner: $gray-4;
 
 
 // Page header
 // Page header
-$page-header-bg: #f7f8fa;
+$page-header-bg: #f1f5f9;
 $page-header-shadow: inset 0px -3px 10px $gray-6;
 $page-header-shadow: inset 0px -3px 10px $gray-6;
-$page-header-border-color: #e9edf2;
+$page-header-border-color: #dce1e6;
 
 
 $divider-border-color: $gray-2;
 $divider-border-color: $gray-2;
 
 
@@ -197,13 +196,13 @@ $btn-active-box-shadow: 0px 0px 4px rgba(234, 161, 51, 0.6);
 $input-bg: $white;
 $input-bg: $white;
 $input-bg-disabled: $gray-5;
 $input-bg-disabled: $gray-5;
 
 
-$input-color: #343b40;
+$input-color: #464c54;
 $input-border-color: #c7d0d9;
 $input-border-color: #c7d0d9;
 $input-box-shadow: none;
 $input-box-shadow: none;
 $input-border-focus: #5794f2;
 $input-border-focus: #5794f2;
 $input-box-shadow-focus: #5794f2;
 $input-box-shadow-focus: #5794f2;
 $input-color-placeholder: #9fa7b3;
 $input-color-placeholder: #9fa7b3;
-$input-label-bg: #f7f8fa;
+$input-label-bg: #f1f5f9;
 $input-color-select-arrow: #7b8087;
 $input-color-select-arrow: #7b8087;
 
 
 // search
 // search
@@ -242,9 +241,9 @@ $navbar-button-border: $gray-4;
 // Sidemenu
 // Sidemenu
 // -------------------------
 // -------------------------
 $side-menu-bg: #202226;
 $side-menu-bg: #202226;
-$side-menu-border: 1px solid #343b40;
+$side-menu-border: 1px solid #2c3235;
 $side-menu-bg-mobile: rgba(0, 0, 0, 0); //$gray-6;
 $side-menu-bg-mobile: rgba(0, 0, 0, 0); //$gray-6;
-$side-menu-item-hover-bg: #343b40;
+$side-menu-item-hover-bg: #2c3235;
 $side-menu-shadow: 5px 0px 10px -5px $gray-1;
 $side-menu-shadow: 5px 0px 10px -5px $gray-1;
 $side-menu-link-color: $gray-4;
 $side-menu-link-color: $gray-4;
 $side-menu-icon-color: #9fa7b3;
 $side-menu-icon-color: #9fa7b3;
@@ -375,8 +374,8 @@ $panel-editor-viz-item-bg-hover: lighten($blue-base, 45%);
 $panel-options-group-border: none;
 $panel-options-group-border: none;
 $panel-options-group-header-bg: $gray-5;
 $panel-options-group-header-bg: $gray-5;
 
 
-$panel-grid-placeholder-bg: $blue-faint;
-$panel-grid-placeholder-shadow: 0 0 4px $blue-light;
+$panel-grid-placeholder-bg: lighten(#5794f2, 30%);
+$panel-grid-placeholder-shadow: 0 0 4px #5794f2;
 
 
 // logs
 // logs
 $logs-color-unkown: $gray-5;
 $logs-color-unkown: $gray-5;

public/sass/components/_gf-form.scss

@@ -112,6 +112,7 @@ $input-border: 1px solid $input-border-color;
   margin-right: $space-xs;
   margin-right: $space-xs;
   border-radius: $input-border-radius;
   border-radius: $input-border-radius;
   justify-content: space-between;
   justify-content: space-between;
+  border: none;
 
 
   &--grow {
   &--grow {
     flex-grow: 1;
     flex-grow: 1;

public/sass/components/_query_editor.scss

@@ -15,35 +15,6 @@
   margin: 20px 0;
   margin: 20px 0;
 }
 }
 
 
-.gf-form-query {
-  .gf-form,
-  .gf-form-filler {
-    margin-bottom: 2px;
-  }
-
-  .gf-form-switch,
-  .gf-form-switch label,
-  .gf-form-input,
-  .gf-form-select-wrapper,
-  .gf-form-filler,
-  .gf-form-label {
-    margin-right: 2px;
-  }
-
-  .gf-form-label {
-    border-right: 1px solid $input-border-color;
-    border-radius: $border-radius;
-  }
-
-  .gf-form-input {
-    border-radius: $border-radius;
-  }
-
-  .gf-form + .gf-form {
-    margin-left: 0;
-  }
-}
-
 .tight-form-func {
 .tight-form-func {
   background: $tight-form-func-bg;
   background: $tight-form-func-bg;
 
 

public/sass/pages/_dashboard.scss

@@ -20,6 +20,10 @@ div.flot-text {
   }
   }
 }
 }
 
 
+.template-variable {
+  color: $variable;
+}
+
 .panel-solo {
 .panel-solo {
   position: fixed;
   position: fixed;
   bottom: 0;
   bottom: 0;