Merge branch 'master' into bar-gauge-poc

README.md

@@ -9,7 +9,7 @@ Graphite, Elasticsearch, OpenTSDB, Prometheus and InfluxDB.
 
 ![](https://www.grafanacon.org/2019/images/grafanacon_la_nav-logo.png)
 
-Join us Feb 25-26 in Los Angeles, California for GrafanaCon - a two-day event with talks focused on Grafana and the surrounding open source monitoring ecosystem. Get deep dives into Loki, the Explore workflow and all of the new features of Grafana 6, plus participate in hands on workshops to help you get the most out of your data. 
+Join us Feb 25-26 in Los Angeles, California for GrafanaCon - a two-day event with talks focused on Grafana and the surrounding open source monitoring ecosystem. Get deep dives into Loki, the Explore workflow and all of the new features of Grafana 6, plus participate in hands on workshops to help you get the most out of your data.
 
 Time is running out - grab your ticket now! http://grafanacon.org
 
@@ -75,15 +75,15 @@ $GOPATH/bin/bra run
 Rebuild on file change, and serve them by Grafana's webserver (http://localhost:3000):
 
 ```bash
-yarn watch
+yarn start
 ```
 
 Build the assets, rebuild on file change with Hot Module Replacement (HMR), and serve them by webpack-dev-server (http://localhost:3333):
 
 ```bash
-yarn start
+yarn start:hot
 # OR set a theme
-env GRAFANA_THEME=light yarn start
+env GRAFANA_THEME=light yarn start:hot
 ```
 
 *Note: HMR for Angular is not supported. If you edit files in the Angular part of the app, the whole page will reload.*
@@ -158,7 +158,7 @@ GRAFANA_TEST_DB=postgres go test ./pkg/...
 
 If you have any ideas for improvement or have found a bug, do not hesitate to open an issue.
 And if you have time, clone this repo and submit a pull request to help me make Grafana
-the kickass metrics & devops dashboard we all dream about! 
+the kickass metrics & devops dashboard we all dream about!
 
 Read the [contributing](https://github.com/grafana/grafana/blob/master/CONTRIBUTING.md) guide then check the [`beginner friendly`](https://github.com/grafana/grafana/issues?q=is%3Aopen+is%3Aissue+label%3A%22beginner+friendly%22) label to find issues that are easy and that we would like help with.
 

docs/sources/project/building_from_source.md

@@ -57,7 +57,7 @@ For this you need nodejs (v.6+).
 ```bash
 npm install -g yarn
 yarn install --pure-lockfile
-yarn watch
+yarn start
 ```
 
 ## Running Grafana Locally
@@ -145,4 +145,4 @@ Please contribute to the Grafana project and submit a pull request! Build new fe
 ## Logging in for the first time
 
 To run Grafana open your browser and go to the default port http://localhost:3000 or the port you have configured.
-Then follow the instructions [here](/guides/getting_started/).
+Then follow the instructions [here](/guides/getting_started/).

package.json

@@ -17,7 +17,9 @@
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.1.0",
     "@rtsao/plugin-proposal-class-properties": "^7.0.1-patch.1",
+    "@types/chalk": "^2.2.0",
     "@types/classnames": "^2.2.6",
+    "@types/commander": "^2.12.2",
     "@types/d3": "^4.10.1",
     "@types/enzyme": "^3.1.13",
     "@types/jest": "^23.3.2",
@@ -36,7 +38,9 @@
     "babel-jest": "^23.6.0",
     "babel-loader": "^8.0.4",
     "babel-plugin-angularjs-annotate": "^0.9.0",
+    "chalk": "^2.4.2",
     "clean-webpack-plugin": "^0.1.19",
+    "concurrently": "^4.1.0",
     "css-loader": "^0.28.7",
     "enzyme": "^3.6.0",
     "enzyme-adapter-react-16": "^1.5.0",
@@ -96,6 +100,7 @@
     "systemjs-plugin-css": "^0.1.36",
     "ts-jest": "^23.10.4",
     "ts-loader": "^5.1.0",
+    "ts-node": "^8.0.2",
     "tslib": "^1.9.3",
     "tslint": "^5.8.0",
     "tslint-loader": "^3.5.3",
@@ -112,8 +117,10 @@
   },
   "scripts": {
     "dev": "webpack --progress --colors --mode development --config scripts/webpack/webpack.dev.js",
-    "start": "webpack-dev-server --progress --colors --mode development --config scripts/webpack/webpack.hot.js",
-    "watch": "webpack --progress --colors --watch --mode development --config scripts/webpack/webpack.dev.js",
+    "start": "ts-node --project ./scripts/cli/tsconfig.json ./scripts/cli/index.ts --theme",
+    "start:hot": "ts-node --project ./scripts/cli/tsconfig.json ./scripts/cli/index.ts --hot --theme",
+    "start:ignoreTheme": "ts-node --project ./scripts/cli/tsconfig.json ./scripts/cli/index.ts --hot",
+    "watch": "ts-node --project ./scripts/cli/tsconfig.json ./scripts/cli/index.ts --theme -d watch,start",
     "build": "grunt build",
     "test": "grunt test",
     "tslint": "tslint -c tslint.json --project tsconfig.json",
@@ -121,6 +128,7 @@
     "jest": "jest --notify --watch",
     "api-tests": "jest --notify --watch --config=tests/api/jest.js",
     "storybook": "cd packages/grafana-ui && yarn storybook",
+    "themes:generate": "ts-node --project ./scripts/cli/tsconfig.json ./scripts/cli/generateSassVariableFiles.ts",
     "prettier:check": "prettier --list-different \"**/*.{ts,tsx,scss}\""
   },
   "husky": {
@@ -168,6 +176,7 @@
     "moment": "^2.22.2",
     "mousetrap": "^1.6.0",
     "mousetrap-global-bind": "^1.1.0",
+    "nodemon": "^1.18.10",
     "prismjs": "^1.6.0",
     "prop-types": "^15.6.2",
     "rc-cascader": "^0.14.0",

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

@@ -1,9 +1,10 @@
 import React, { PureComponent } from 'react';
 import _ from 'lodash';
+import classNames from 'classnames';
 import Scrollbars from 'react-custom-scrollbars';
 
 interface Props {
-  customClassName?: string;
+  className?: string;
   autoHide?: boolean;
   autoHideTimeout?: number;
   autoHideDuration?: number;
@@ -21,7 +22,6 @@ interface Props {
  */
 export class CustomScrollbar extends PureComponent<Props> {
   static defaultProps: Partial<Props> = {
-    customClassName: 'custom-scrollbars',
     autoHide: false,
     autoHideTimeout: 200,
     autoHideDuration: 200,
@@ -60,7 +60,7 @@ export class CustomScrollbar extends PureComponent<Props> {
 
   render() {
     const {
-      customClassName,
+      className,
       children,
       autoHeightMax,
       autoHeightMin,
@@ -75,7 +75,7 @@ export class CustomScrollbar extends PureComponent<Props> {
     return (
       <Scrollbars
         ref={this.ref}
-        className={customClassName}
+        className={classNames('custom-scrollbar', className)}
         onScroll={setScrollTop}
         autoHeight={true}
         autoHide={autoHide}

packages/grafana-ui/src/components/CustomScrollbar/_CustomScrollbar.scss

@@ -1,4 +1,4 @@
-.custom-scrollbars {
+.custom-scrollbar {
   // Fix for Firefox. For some reason sometimes .view container gets a height of its content, but in order to
   // make scroll working it should fit outer container size (scroll appears only when inner container size is
   // greater than outer one).
@@ -37,4 +37,11 @@
     @include gradient-horizontal($scrollbarBackground, $scrollbarBackground2);
     border-radius: 6px;
   }
+
+  // page scrollbar should stick to left side to aid hitting it
+  &--page {
+    .track-vertical {
+      right: 0;
+    }
+  }
 }

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

@@ -2,7 +2,7 @@
 
 exports[`CustomScrollbar renders correctly 1`] = `
 <div
-  className="custom-scrollbars"
+  className="custom-scrollbar"
   style={
     Object {
       "height": "auto",

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

@@ -104,9 +104,9 @@ export class Gauge extends PureComponent<Props> {
 
   getFontScale(length: number): number {
     if (length > 12) {
-      return FONT_SCALE - (length * 5) / 120;
+      return FONT_SCALE - (length * 5) / 110;
     }
-    return FONT_SCALE - (length * 5) / 105;
+    return FONT_SCALE - (length * 5) / 100;
   }
 
   draw() {

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

@@ -55,7 +55,7 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
     const value = afterThresholdValue - (afterThresholdValue - beforeThresholdValue) / 2;
 
     // Set a color
-    const color = colors.filter(c => !newThresholds.some(t => t.color === c))[0];
+    const color = colors.filter(c => !newThresholds.some(t => t.color === c))[1];
 
     this.setState(
       {

packages/grafana-ui/src/components/ValueMappingsEditor/_ValueMappingsEditor.scss

@@ -17,7 +17,7 @@
   align-items: center;
   justify-content: center;
   width: 36px;
-  background-color: $green;
+  background-color: $green-base;
 }
 
 .add-mapping-row-label {

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

@@ -0,0 +1,396 @@
+/* tslint:disable:max-line-length */
+
+import { GrafanaTheme } from '../types';
+import { renderGeneratedFileBanner } from '../utils/generatedFileBanner';
+
+export const darkThemeVarsTemplate = (theme: GrafanaTheme) =>
+  `${renderGeneratedFileBanner('grafana-ui/src/themes/dark.ts', 'grafana-ui/src/themes/_variables.dark.scss.tmpl.ts')}
+// Global values
+// --------------------------------------------------
+
+$theme-name: dark;
+
+// New Colors
+// -------------------------
+$blue-faint: ${theme.colors.blueFaint};
+$blue-light: ${theme.colors.blueLight};
+$blue-base: ${theme.colors.blueBase};
+$blue-shade: ${theme.colors.blueShade};
+$red-base: ${theme.colors.redBase};
+$red-shade: ${theme.colors.redShade};
+$green-base: ${theme.colors.greenBase};
+$green-shade: ${theme.colors.greenShade};
+
+// Grays
+// -------------------------
+$black: ${theme.colors.black};
+$dark-1: ${theme.colors.dark1};
+$dark-2: ${theme.colors.dark2};
+$dark-3: ${theme.colors.dark3};
+$dark-4: ${theme.colors.dark4};
+$dark-5: ${theme.colors.dark5};
+$dark-6: ${theme.colors.dark6};
+$dark-7: ${theme.colors.dark7};
+$dark-8: ${theme.colors.dark8};
+$dark-9: ${theme.colors.dark9};
+$dark-10: ${theme.colors.dark10};
+$gray-1: ${theme.colors.gray1};
+$gray-2: ${theme.colors.gray2};
+$gray-3: ${theme.colors.gray3};
+$gray-4: ${theme.colors.gray4};
+$gray-5: ${theme.colors.gray5};
+
+$gray-blue: ${theme.colors.grayBlue};
+$input-black: #09090b;
+
+$white: ${theme.colors.white};
+
+// Accent colors
+// -------------------------
+$blue: ${theme.colors.blue};
+$red: $red-base;
+$yellow: ${theme.colors.yellow};
+$orange: ${theme.colors.orange};
+$purple: ${theme.colors.purple};
+$variable: ${theme.colors.variable};
+
+$brand-primary: $orange;
+$brand-success: $green-base;
+$brand-warning: $brand-primary;
+$brand-danger: $red-base;
+
+$query-red: $red-base;
+$query-green: #74e680;
+$query-purple: #fe85fc;
+$query-keyword: #66d9ef;
+$query-orange: $orange;
+
+// Status colors
+// -------------------------
+$online: $green-base;
+$warn: #f79520;
+$critical: $red-base;
+
+// Scaffolding
+// -------------------------
+$body-bg: ${theme.colors.bodyBg};
+$page-bg: ${theme.colors.pageBg};
+
+$body-color: $gray-4;
+$text-color: $gray-4;
+$text-color-strong: $white;
+$text-color-weak: $gray-2;
+$text-color-faint: $dark-10;
+$text-color-emphasis: $gray-5;
+
+$text-shadow-faint: 1px 1px 4px rgb(45, 45, 45);
+$textShadow: none;
+
+// gradients
+$brand-gradient: linear-gradient(
+  to right,
+  rgba(255, 213, 0, 0.7) 0%,
+  rgba(255, 68, 0, 0.7) 99%,
+  rgba(255, 68, 0, 0.7) 100%
+);
+
+$page-gradient: linear-gradient(180deg, $dark-5 10px, dark-2 100px);
+$edit-gradient: linear-gradient(180deg, $dark-2 50%, $input-black);
+
+// Links
+// -------------------------
+$link-color: darken($white, 11%);
+$link-color-disabled: darken($link-color, 30%);
+$link-hover-color: $white;
+$external-link-color: $blue-light;
+
+// Typography
+// -------------------------
+$headings-color: darken($white, 11%);
+$abbr-border-color: $gray-2 !default;
+$text-muted: $text-color-weak;
+
+$hr-border-color: $dark-9;
+
+// Panel
+// -------------------------
+$panel-bg: $dark-4;
+$panel-border: solid 1px $dark-1;
+$panel-header-hover-bg: $dark-9;
+$panel-corner: $panel-bg;
+
+// page header
+$page-header-bg: linear-gradient(90deg, $dark-7, $black);
+$page-header-shadow: inset 0px -4px 14px $dark-3;
+$page-header-border-color: $dark-9;
+
+$divider-border-color: $gray-1;
+
+// Graphite Target Editor
+$tight-form-func-bg: $dark-9;
+$tight-form-func-highlight-bg: $dark-10;
+
+$modal-backdrop-bg: #353c42;
+$code-tag-bg: $dark-1;
+$code-tag-border: $dark-9;
+
+// cards
+$card-background: linear-gradient(135deg, $dark-8, $dark-6);
+$card-background-hover: linear-gradient(135deg, $dark-9, $dark-6);
+$card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3);
+
+// 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;
+
+// Scrollbars
+$scrollbarBackground: #404357;
+$scrollbarBackground2: $dark-10;
+$scrollbarBorder: black;
+
+// Tables
+// -------------------------
+$table-bg-accent: $dark-6; // for striping
+$table-border: $dark-6; // table and cell border
+
+$table-bg-odd: $dark-3;
+$table-bg-hover: $dark-6;
+
+// Buttons
+// -------------------------
+$btn-secondary-bg: $blue-base;
+$btn-secondary-bg-hl: $blue-shade;
+
+$btn-primary-bg: $green-base;
+$btn-primary-bg-hl: $green-shade;
+
+$btn-success-bg: $green-base;
+$btn-success-bg-hl: $green-shade;
+
+$btn-danger-bg: $red-base;
+$btn-danger-bg-hl: $red-shade;
+
+$btn-inverse-bg: $dark-6;
+$btn-inverse-bg-hl: lighten($dark-6, 4%);
+$btn-inverse-text-color: $link-color;
+$btn-inverse-text-shadow: 0px 1px 0 rgba(0, 0, 0, 0.1);
+
+$btn-link-color: $gray-3;
+
+$iconContainerBackground: $black;
+
+$btn-divider-left: $dark-9;
+$btn-divider-right: $dark-3;
+
+$btn-drag-image: '../img/grab_dark.svg';
+
+// Forms
+// -------------------------
+$input-bg: $input-black;
+$input-bg-disabled: $dark-6;
+
+$input-color: $gray-4;
+$input-border-color: $dark-6;
+$input-box-shadow: inset 1px 0px 0.3rem 0px rgba(150, 150, 150, 0.1);
+$input-border-focus: $dark-6 !default;
+$input-box-shadow-focus: $blue-light !default;
+$input-color-placeholder: $gray-1 !default;
+$input-label-bg: $gray-blue;
+$input-label-border-color: $dark-6;
+$input-color-select-arrow: $white;
+
+// Input placeholder text color
+$placeholderText: darken($text-color, 25%);
+
+// Search
+$search-shadow: 0 0 30px 0 $black;
+$search-filter-box-bg: $gray-blue;
+
+// Typeahead
+$typeahead-shadow: 0 5px 10px 0 $black;
+$typeahead-selected-bg: $dark-9;
+$typeahead-selected-color: $yellow;
+
+// Dropdowns
+// -------------------------
+$dropdownBackground: $dark-6;
+$dropdownBorder: rgba(0, 0, 0, 0.2);
+$dropdownDividerTop: transparent;
+$dropdownDividerBottom: #444;
+
+$dropdownLinkColor: $text-color;
+$dropdownLinkColorHover: $white;
+$dropdownLinkColorActive: $white;
+
+$dropdownLinkBackgroundHover: $dark-9;
+
+// Horizontal forms & lists
+// -------------------------
+$horizontalComponentOffset: 180px;
+
+// Navbar
+// -------------------------
+$navbarHeight: 55px;
+
+$navbarBackground: $panel-bg;
+$navbarBorder: 1px solid $dark-6;
+
+$navbarButtonBackground: $navbarBackground;
+$navbarButtonBackgroundHighlight: $body-bg;
+
+$navbar-button-border: #2f2f32;
+
+// Sidemenu
+// -------------------------
+$side-menu-bg: $black;
+$side-menu-bg-mobile: $side-menu-bg;
+$side-menu-item-hover-bg: $dark-3;
+$side-menu-shadow: 0 0 20px black;
+$side-menu-link-color: $link-color;
+
+// Menu dropdowns
+// -------------------------
+$menu-dropdown-bg: $body-bg;
+$menu-dropdown-hover-bg: $dark-3;
+$menu-dropdown-shadow: 5px 5px 20px -5px $black;
+
+// Tabs
+// -------------------------
+$tab-border-color: $dark-9;
+
+// Toolbar
+$toolbar-bg: $input-black;
+
+// Form states and alerts
+// -------------------------
+$warning-text-color: $warn;
+$error-text-color: #e84d4d;
+$success-text-color: #12d95a;
+
+$alert-error-bg: linear-gradient(90deg, $red-base, $red-shade);
+$alert-success-bg: linear-gradient(90deg, $green-base, $green-shade);
+$alert-warning-bg: linear-gradient(90deg, $red-base, $red-shade);
+$alert-info-bg: linear-gradient(100deg, $blue-base, $blue-shade);
+
+// popover
+$popover-bg: $dark-2;
+$popover-color: $text-color;
+$popover-border-color: $dark-9;
+$popover-shadow: 0 0 20px black;
+
+$popover-help-bg: $btn-secondary-bg;
+$popover-help-color: $text-color;
+
+$popover-error-bg: $btn-danger-bg;
+
+// Tooltips and popovers
+// -------------------------
+$tooltipColor: $popover-help-color;
+$tooltipArrowWidth: 5px;
+$tooltipLinkColor: $link-color;
+$graph-tooltip-bg: $dark-1;
+
+$tooltipBackground: $black;
+$tooltipColor: $gray-4;
+$tooltipArrowColor: $tooltipBackground;
+$tooltipBackgroundError: $brand-danger;
+
+// images
+$checkboxImageUrl: '../img/checkbox.png';
+
+// info box
+$info-box-border-color: $blue-base;
+
+// footer
+$footer-link-color: $gray-2;
+$footer-link-hover: $gray-4;
+
+// json-explorer
+$json-explorer-default-color: $text-color;
+$json-explorer-string-color: #23d662;
+$json-explorer-number-color: $variable;
+$json-explorer-boolean-color: $variable;
+$json-explorer-null-color: #eec97d;
+$json-explorer-undefined-color: rgb(239, 143, 190);
+$json-explorer-function-color: #fd48cb;
+$json-explorer-rotate-time: 100ms;
+$json-explorer-toggler-opacity: 0.6;
+$json-explorer-bracket-color: #9494ff;
+$json-explorer-key-color: #23a0db;
+$json-explorer-url-color: #027bff;
+
+// Changelog and diff
+// -------------------------
+$diff-label-bg: $dark-3;
+$diff-label-fg: $white;
+
+$diff-group-bg: $dark-9;
+$diff-arrow-color: $white;
+
+$diff-json-bg: $dark-9;
+$diff-json-fg: $gray-5;
+
+$diff-json-added: $blue-shade;
+$diff-json-deleted: $red-shade;
+
+$diff-json-old: #a04338;
+$diff-json-new: #457740;
+
+$diff-json-changed-fg: $gray-5;
+$diff-json-changed-num: $text-color;
+
+$diff-json-icon: $gray-5;
+
+//Submenu
+$variable-option-bg: $dropdownLinkBackgroundHover;
+
+//Switch Slider
+// -------------------------
+$switch-bg: $input-bg;
+$switch-slider-color: $dark-3;
+$switch-slider-off-bg: $gray-1;
+$switch-slider-on-bg: linear-gradient(90deg, #eb7b18, #d44a3a);
+$switch-slider-shadow: 0 0 3px black;
+
+//Checkbox
+// -------------------------
+$checkbox-bg: $dark-1;
+$checkbox-border: 1px solid $gray-1;
+$checkbox-checked-bg: linear-gradient(0deg, #eb7b18, #d44a3a);
+$checkbox-color: $dark-1;
+
+//Panel Edit
+// -------------------------
+$panel-editor-shadow: 0 0 20px black;
+$panel-editor-side-menu-shadow: drop-shadow(0 0 10px $black);
+$panel-editor-viz-item-shadow: 0 0 8px $dark-10;
+$panel-editor-viz-item-border: 1px solid $dark-10;
+$panel-editor-viz-item-shadow-hover: 0 0 4px $blue-light;
+$panel-editor-viz-item-border-hover: 1px solid $blue-light;
+$panel-editor-viz-item-bg: $input-black;
+$panel-editor-tabs-line-color: #e3e3e3;
+
+$panel-editor-viz-item-bg-hover: darken($blue-base, 46%);
+
+$panel-options-group-border: none;
+$panel-options-group-header-bg: $gray-blue;
+
+$panel-grid-placeholder-bg: $blue-faint;
+$panel-grid-placeholder-shadow: 0 0 4px $blue-shade;
+
+// logs
+$logs-color-unkown: $gray-2;
+
+// toggle-group
+$button-toggle-group-btn-active-bg: linear-gradient(90deg, #eb7b18, #d44a3a);
+$button-toggle-group-btn-active-shadow: inset 0 0 4px $black;
+$button-toggle-group-btn-seperator-border: 1px solid $dark-2;
+
+$vertical-resize-handle-bg: $dark-10;
+$vertical-resize-handle-dots: $gray-1;
+$vertical-resize-handle-dots-hover: $gray-2;
+`;

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

@@ -0,0 +1,383 @@
+/* tslint:disable:max-line-length */
+
+import { GrafanaTheme } from '../types';
+import { renderGeneratedFileBanner } from '../utils/generatedFileBanner';
+
+export const lightThemeVarsTemplate = (theme: GrafanaTheme) =>
+  `${renderGeneratedFileBanner('grafana-ui/src/themes/light.ts', 'grafana-ui/src/themes/_variable.light.scss.tmpl.ts')}
+// Global values
+// --------------------------------------------------
+
+$theme-name: light;
+
+// New Colors
+// -------------------------
+$blue-faint: ${theme.colors.blueFaint};
+$blue-light: ${theme.colors.blueLight};
+$blue-base: ${theme.colors.blueBase};
+$blue-shade: ${theme.colors.blueShade};
+$red-base: ${theme.colors.redBase};
+$red-shade: ${theme.colors.redShade};
+$green-base: ${theme.colors.greenBase};
+$green-shade: ${theme.colors.greenShade};
+
+// Grays
+// -------------------------
+$black: ${theme.colors.black};
+
+$dark-1: ${theme.colors.dark1};
+$dark-2: ${theme.colors.dark2};
+$gray-1: ${theme.colors.gray1};
+$gray-2: ${theme.colors.gray2};
+$gray-3: ${theme.colors.gray3};
+$gray-4: ${theme.colors.gray4};
+$gray-5: ${theme.colors.gray5};
+$gray-6: ${theme.colors.gray6};
+$gray-7: ${theme.colors.gray7};
+
+$white: ${theme.colors.white};
+
+// Accent colors
+// -------------------------
+$blue: ${theme.colors.blue};
+$red: $red-base;
+$yellow: ${theme.colors.yellow};
+$orange: ${theme.colors.orange};
+$purple: ${theme.colors.purple};
+$variable: ${theme.colors.variable};
+
+$brand-primary: $orange;
+$brand-success: $green-base;
+$brand-warning: $orange;
+$brand-danger: $red-base;
+
+$query-red: $red-base;
+$query-green: $green-base;
+$query-purple: $purple;
+$query-orange: $orange;
+$query-keyword: $blue-base;
+
+// Status colors
+// -------------------------
+$online: $green-shade;
+$warn: #f79520;
+$critical: $red-shade;
+
+// Scaffolding
+// -------------------------
+$body-bg: ${theme.colors.bodyBg};
+$page-bg: ${theme.colors.pageBg};
+
+$body-color: $gray-1;
+$text-color: $gray-1;
+$text-color-strong: $dark-1;
+$text-color-weak: $gray-2;
+$text-color-faint: $gray-4;
+$text-color-emphasis: $dark-2;
+
+$text-shadow-faint: none;
+
+// gradients
+$brand-gradient: linear-gradient(to right, rgba(255, 213, 0, 1) 0%, rgba(255, 68, 0, 1) 99%, rgba(255, 68, 0, 1) 100%);
+
+$page-gradient: linear-gradient(180deg, $white 10px, $gray-7 100px);
+$edit-gradient: linear-gradient(-60deg, $gray-7, #f5f6f9 70%, $gray-7 98%);
+
+// Links
+// -------------------------
+$link-color: $gray-1;
+$link-color-disabled: lighten($link-color, 30%);
+$link-hover-color: darken($link-color, 20%);
+$external-link-color: $blue-shade;
+
+// Typography
+// -------------------------
+$headings-color: $text-color;
+$abbr-border-color: $gray-2 !default;
+$text-muted: $text-color-weak;
+
+$hr-border-color: $gray-4 !default;
+
+// Panel
+// -------------------------
+$panel-bg: $white;
+$panel-border: solid 1px $gray-5;
+$panel-header-hover-bg: $gray-6;
+$panel-corner: $gray-4;
+
+// Page header
+$page-header-bg: linear-gradient(90deg, $white, $gray-7);
+$page-header-shadow: inset 0px -3px 10px $gray-6;
+$page-header-border-color: $gray-4;
+
+$divider-border-color: $gray-2;
+
+// Graphite Target Editor
+$tight-form-func-bg: $gray-5;
+$tight-form-func-highlight-bg: $gray-6;
+
+$modal-backdrop-bg: $body-bg;
+$code-tag-bg: $gray-6;
+$code-tag-border: $gray-4;
+
+// cards
+$card-background: linear-gradient(135deg, $gray-6, $gray-5);
+$card-background-hover: linear-gradient(135deg, $gray-5, $gray-6);
+$card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.1);
+
+// Lists
+$list-item-bg: linear-gradient(135deg, $gray-5, $gray-6); //$card-background;
+$list-item-hover-bg: darken($gray-5, 5%);
+$list-item-link-color: $text-color;
+$list-item-shadow: $card-shadow;
+
+$empty-list-cta-bg: $gray-6;
+
+// Scrollbars
+$scrollbarBackground: $gray-4;
+$scrollbarBackground2: $gray-4;
+$scrollbarBorder: $gray-7;
+
+// Tables
+// -------------------------
+$table-bg-accent: $gray-5; // for striping
+$table-border: $gray-3; // table and cell border
+
+$table-bg-odd: $gray-6;
+$table-bg-hover: $gray-5;
+
+// Buttons
+// -------------------------
+$btn-primary-bg: $green-base;
+$btn-primary-bg-hl: $green-shade;
+
+$btn-secondary-bg: $blue-base;
+$btn-secondary-bg-hl: $blue-shade;
+
+$btn-success-bg: $green-base;
+$btn-success-bg-hl: $green-shade;
+
+$btn-danger-bg: $red-base;
+$btn-danger-bg-hl: $red-shade;
+
+$btn-inverse-bg: $gray-5;
+$btn-inverse-bg-hl: darken($gray-5, 5%);
+$btn-inverse-bg-hl: $gray-4;
+$btn-inverse-text-color: $gray-1;
+$btn-inverse-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
+
+$btn-link-color: $gray-1;
+
+$iconContainerBackground: $white;
+
+$btn-divider-left: $gray-4;
+$btn-divider-right: $gray-7;
+
+$btn-drag-image: '../img/grab_light.svg';
+
+// Forms
+// -------------------------
+$input-bg: $white;
+$input-bg-disabled: $gray-5;
+
+$input-color: $dark-2;
+$input-border-color: $gray-5;
+$input-box-shadow: none;
+$input-border-focus: $gray-5 !default;
+$input-box-shadow-focus: $blue-light !default;
+$input-color-placeholder: $gray-4 !default;
+$input-label-bg: $gray-5;
+$input-label-border-color: $gray-5;
+$input-color-select-arrow: $gray-1;
+
+// Input placeholder text color
+$placeholderText: $gray-2;
+
+// search
+$search-shadow: 0 5px 30px 0 $gray-4;
+$search-filter-box-bg: $gray-7;
+
+// Typeahead
+$typeahead-shadow: 0 5px 10px 0 $gray-5;
+$typeahead-selected-bg: $gray-6;
+$typeahead-selected-color: $yellow;
+
+// Dropdowns
+// -------------------------
+$dropdownBackground: $white;
+$dropdownBorder: $gray-4;
+$dropdownDividerTop: $gray-6;
+$dropdownDividerBottom: $white;
+
+$dropdownLinkColor: $dark-2;
+$dropdownLinkColorHover: $link-color;
+$dropdownLinkColorActive: $link-color;
+
+$dropdownLinkBackgroundHover: $gray-6;
+
+// Horizontal forms & lists
+// -------------------------
+$horizontalComponentOffset: 180px;
+
+// Navbar
+// -------------------------
+$navbarHeight: 52px;
+
+$navbarBackground: $white;
+$navbarBorder: 1px solid $gray-5;
+
+$navbarButtonBackground: lighten($navbarBackground, 3%);
+$navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%);
+
+$navbar-button-border: $gray-4;
+
+// Sidemenu
+// -------------------------
+$side-menu-bg: $dark-1;
+$side-menu-bg-mobile: rgba(0, 0, 0, 0); //$gray-6;
+$side-menu-item-hover-bg: $gray-1;
+$side-menu-shadow: 5px 0px 10px -5px $gray-1;
+$side-menu-link-color: $gray-6;
+
+// Menu dropdowns
+// -------------------------
+$menu-dropdown-bg: $gray-7;
+$menu-dropdown-hover-bg: $gray-6;
+$menu-dropdown-shadow: 5px 5px 10px -5px $gray-1;
+
+// Tabs
+// -------------------------
+$tab-border-color: $gray-5;
+
+// Toolbar
+$toolbar-bg: white;
+
+// Form states and alerts
+// -------------------------
+$warning-text-color: lighten($orange, 10%);
+$error-text-color: $red-shade;
+$success-text-color: lighten($green-base, 10%);
+
+$alert-error-bg: linear-gradient(90deg, $red-base, $red-shade);
+$alert-success-bg: linear-gradient(90deg, $green-base, $green-shade);
+$alert-warning-bg: linear-gradient(90deg, $red-base, $red-shade);
+$alert-info-bg: linear-gradient(100deg, $blue-base, $blue-shade);
+
+// popover
+$popover-bg: $page-bg;
+$popover-color: $text-color;
+$popover-border-color: $gray-5;
+$popover-shadow: 0 0 20px $white;
+
+$popover-help-bg: $btn-secondary-bg;
+$popover-help-color: $gray-6;
+
+$popover-error-bg: $btn-danger-bg;
+
+// Tooltips and popovers
+// -------------------------
+$tooltipColor: $popover-help-color;
+$tooltipArrowWidth: 5px;
+$tooltipLinkColor: lighten($popover-help-color, 5%);
+$graph-tooltip-bg: $gray-5;
+
+$tooltipBackground: $gray-1;
+$tooltipColor: $gray-7;
+$tooltipArrowColor: $tooltipBackground; // Used by Angular tooltip
+$tooltipBackgroundError: $brand-danger;
+
+// images
+$checkboxImageUrl: '../img/checkbox_white.png';
+
+// info box
+$info-box-border-color: $blue-base;
+
+// footer
+$footer-link-color: $gray-3;
+$footer-link-hover: $dark-2;
+
+// json explorer
+$json-explorer-default-color: black;
+$json-explorer-string-color: green;
+$json-explorer-number-color: $blue-base;
+$json-explorer-boolean-color: $red-base;
+$json-explorer-null-color: #855a00;
+$json-explorer-undefined-color: rgb(202, 11, 105);
+$json-explorer-function-color: #ff20ed;
+$json-explorer-rotate-time: 100ms;
+$json-explorer-toggler-opacity: 0.6;
+$json-explorer-bracket-color: $blue-base;
+$json-explorer-key-color: #00008b;
+$json-explorer-url-color: $blue-base;
+
+// Changelog and diff
+// -------------------------
+$diff-label-bg: $gray-7;
+$diff-label-fg: $gray-2;
+
+$diff-arrow-color: $dark-2;
+$diff-group-bg: $gray-6;
+
+$diff-json-bg: $gray-6;
+$diff-json-fg: $gray-1;
+
+$diff-json-added: $blue-shade;
+$diff-json-deleted: $red-shade;
+
+$diff-json-old: #5a372a;
+$diff-json-new: #664e33;
+
+$diff-json-changed-fg: $gray-7;
+$diff-json-changed-num: $gray-4;
+
+$diff-json-icon: $gray-4;
+
+//Submenu
+$variable-option-bg: $dropdownLinkBackgroundHover;
+
+//Switch Slider
+// -------------------------
+$switch-bg: $white;
+$switch-slider-color: $gray-7;
+$switch-slider-off-bg: $gray-5;
+$switch-slider-on-bg: linear-gradient(90deg, #ff9830, #e55400);
+$switch-slider-shadow: 0 0 3px $dark-2;
+
+//Checkbox
+// -------------------------
+$checkbox-bg: $gray-6;
+$checkbox-border: 1px solid $gray-3;
+$checkbox-checked-bg: linear-gradient(0deg, #ff9830, #e55400);
+$checkbox-color: $gray-7;
+
+//Panel Edit
+// -------------------------
+$panel-editor-shadow: 0px 0px 8px $gray-3;
+$panel-editor-side-menu-shadow: drop-shadow(0 0 2px $gray-3);
+$panel-editor-viz-item-shadow: 0 0 4px $gray-3;
+$panel-editor-viz-item-border: 1px solid $gray-3;
+$panel-editor-viz-item-shadow-hover: 0 0 4px $blue-light;
+$panel-editor-viz-item-border-hover: 1px solid $blue-light;
+$panel-editor-viz-item-bg: $white;
+$panel-editor-tabs-line-color: $dark-2;
+
+$panel-editor-viz-item-bg-hover: lighten($blue-base, 45%);
+
+$panel-options-group-border: none;
+$panel-options-group-header-bg: $gray-5;
+
+$panel-grid-placeholder-bg: $blue-faint;
+$panel-grid-placeholder-shadow: 0 0 4px $blue-light;
+
+// logs
+$logs-color-unkown: $gray-5;
+
+// toggle-group
+$button-toggle-group-btn-active-bg: $brand-primary;
+$button-toggle-group-btn-active-shadow: inset 0 0 4px $white;
+$button-toggle-group-btn-seperator-border: 1px solid $gray-6;
+
+$vertical-resize-handle-bg: $gray-4;
+$vertical-resize-handle-dots: $gray-3;
+$vertical-resize-handle-dots-hover: $gray-2;
+`;

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

@@ -0,0 +1,265 @@
+/* tslint:disable:max-line-length */
+
+import { GrafanaThemeCommons } from '../types';
+import { renderGeneratedFileBanner } from '../utils/generatedFileBanner';
+
+export const commonThemeVarsTemplate = (theme: GrafanaThemeCommons) =>
+  `${renderGeneratedFileBanner('grafana-ui/src/themes/default.ts', 'grafana-ui/src/themes/_variables.scss.tmpl.ts')}
+// Options
+//
+// Quickly modify global styling by enabling or disabling optional features.
+
+$enable-flex: true !default;
+$enable-hover-media-query: false !default;
+
+// Spacing
+//
+// Control the default styling of most Bootstrap elements by modifying these
+// variables. Mostly focused on spacing.
+
+$spacer: 1rem !default;
+$spacer-x: $spacer !default;
+$spacer-y: $spacer !default;
+$spacers: (
+  0: (
+    x: 0,
+    y: 0,
+  ),
+  1: (
+    x: $spacer-x,
+    y: $spacer-y,
+  ),
+  2: (
+    x: (
+      $spacer-x * 1.5,
+    ),
+    y: (
+      $spacer-y * 1.5,
+    ),
+  ),
+  3: (
+    x: (
+      $spacer-x * 3,
+    ),
+    y: (
+      $spacer-y * 3,
+    ),
+  ),
+) !default;
+$border-width: 1px !default;
+
+// Grid breakpoints
+//
+// Define the minimum and maximum dimensions at which your layout will change,
+// adapting to different screen sizes, for use in media queries.
+
+$grid-breakpoints: (
+  xs: 0,
+  sm: 544px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+) !default;
+
+// Grid containers
+//
+// Define the maximum width of \`.container\` for different screen sizes.
+
+$container-max-widths: (
+  sm: 576px,
+  md: 720px,
+  lg: 940px,
+  xl: 1080px,
+) !default;
+
+// Grid columns
+//
+// Set the number of columns and specify the width of the gutters.
+
+$grid-columns: 12 !default;
+$grid-gutter-width: 30px !default;
+
+$enable-flex: true;
+
+// Typography
+// -------------------------
+
+$font-family-sans-serif: 'Roboto', Helvetica, Arial, sans-serif;
+$font-family-serif: Georgia, 'Times New Roman', Times, serif;
+$font-family-monospace: Menlo, Monaco, Consolas, 'Courier New', monospace;
+$font-family-base: $font-family-sans-serif !default;
+
+$font-size-root: 14px !default;
+$font-size-base: 13px !default;
+
+$font-size-lg: 18px !default;
+$font-size-md: 14px !default;
+$font-size-sm: 12px !default;
+$font-size-xs: 10px !default;
+
+$line-height-base: 1.5 !default;
+$font-weight-semi-bold: 500;
+
+$font-size-h1: 2rem !default;
+$font-size-h2: 1.75rem !default;
+$font-size-h3: 1.5rem !default;
+$font-size-h4: 1.3rem !default;
+$font-size-h5: 1.2rem !default;
+$font-size-h6: 1rem !default;
+
+$display1-size: 6rem !default;
+$display2-size: 5.5rem !default;
+$display3-size: 4.5rem !default;
+$display4-size: 3.5rem !default;
+
+$display1-weight: 400 !default;
+$display2-weight: 400 !default;
+$display3-weight: 400 !default;
+$display4-weight: 400 !default;
+
+$lead-font-size: 1.25rem !default;
+$lead-font-weight: 300 !default;
+
+$headings-margin-bottom: ($spacer / 2) !default;
+$headings-font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+$headings-font-weight: 400 !default;
+$headings-line-height: 1.1 !default;
+
+$hr-border-width: $border-width !default;
+$dt-font-weight: bold !default;
+
+// Components
+//
+// Define common padding and border radius sizes and more.
+
+$line-height-lg: (4 / 3) !default;
+$line-height-sm: 1.5 !default;
+
+$border-radius: 3px !default;
+$border-radius-lg: 5px !default;
+$border-radius-sm: 2px !default;
+
+// Page
+
+$page-sidebar-width: 11rem;
+$page-sidebar-margin: 4rem;
+
+// Links
+// -------------------------
+$link-decoration: none !default;
+$link-hover-decoration: none !default;
+
+// Tables
+//
+// Customizes the \`.table\` component with basic values, each used across all table variations.
+
+$table-cell-padding: 4px 10px !default;
+
+// Forms
+$input-padding-x: 10px !default;
+$input-padding-y: 8px !default;
+$input-line-height: 18px !default;
+
+$input-btn-border-width: 1px;
+$input-border-radius: 0 $border-radius $border-radius 0 !default;
+$input-border-radius-sm: 0 $border-radius-sm $border-radius-sm 0 !default;
+
+$label-border-radius: $border-radius 0 0 $border-radius !default;
+$label-border-radius-sm: $border-radius-sm 0 0 $border-radius-sm !default;
+
+$input-padding-y-sm: 4px !default;
+
+$input-padding-x-lg: 20px !default;
+$input-padding-y-lg: 10px !default;
+
+$input-height: 35px !default;
+
+$gf-form-margin: 0.2rem;
+$gf-form-input-height: 35px;
+
+$cursor-disabled: not-allowed !default;
+
+// Form validation icons
+$form-icon-success: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%235cb85c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E") !default;
+$form-icon-warning: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23f0ad4e' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E") !default;
+$form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d9534f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E") !default;
+
+// Z-index master list
+// -------------------------
+// Used for a bird's eye view of components dependent on the z-axis
+// Try to avoid customizing these :)
+$zindex-dropdown: 1000;
+$zindex-navbar-fixed: 1020;
+$zindex-sidemenu: 1025;
+$zindex-tooltip: 1030;
+$zindex-modal-backdrop: 1040;
+$zindex-modal: 1050;
+$zindex-typeahead: 1060;
+
+// Buttons
+//
+
+$btn-padding-x: 1rem !default;
+$btn-padding-y: 0.7rem !default;
+$btn-line-height: 1 !default;
+$btn-font-weight: 500 !default;
+
+$btn-padding-x-sm: 0.5rem !default;
+$btn-padding-y-sm: 0.25rem !default;
+
+$btn-padding-x-lg: 21px !default;
+$btn-padding-y-lg: 11px !default;
+
+$btn-padding-x-xl: 21px !default;
+$btn-padding-y-xl: 11px !default;
+
+$btn-border-radius: 2px;
+
+$btn-semi-transparent: rgba(0, 0, 0, 0.2) !default;
+
+// sidemenu
+$side-menu-width: 60px;
+
+// dashboard
+$panel-margin: 10px;
+$dashboard-padding: $panel-margin * 2;
+$panel-horizontal-padding: 10;
+$panel-vertical-padding: 5;
+$panel-padding: 0px $panel-horizontal-padding + 0px $panel-vertical-padding + 0px $panel-horizontal-padding + 0px;
+
+// tabs
+$tabs-padding: 10px 15px 9px;
+
+$external-services: (
+  github: (
+    bgColor: #464646,
+    borderColor: #393939,
+    icon: '',
+  ),
+  gitlab: (
+    bgColor: #fc6d26,
+    borderColor: #e24329,
+    icon: '',
+  ),
+  google: (
+    bgColor: #e84d3c,
+    borderColor: #b83e31,
+    icon: '',
+  ),
+  grafanacom: (
+    bgColor: #262628,
+    borderColor: #393939,
+    icon: '',
+  ),
+  oauth: (
+    bgColor: #262628,
+    borderColor: #393939,
+    icon: '',
+  ),
+) !default;
+
+:export {
+  panelhorizontalpadding: $panel-horizontal-padding;
+  panelverticalpadding: $panel-vertical-padding;
+}
+`;

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

@@ -6,25 +6,34 @@ const basicColors = {
   black: '#000000',
   white: '#ffffff',
   dark1: '#141414',
-  dark2: '#1f1f20',
-  dark3: '#262628',
-  dark4: '#333333',
-  dark5: '#444444',
+  dark2: '#161719',
+  dark3: '#1f1f20',
+  dark4: '#212124',
+  dark5: '#222426',
+  dark6: '#262628',
+  dark7: '#292a2d',
+  dark8: '#2f2f32',
+  dark9: '#343436',
+  dark10: '#424345',
   gray1: '#555555',
   gray2: '#8e8e8e',
   gray3: '#b3b3b3',
   gray4: '#d8d9da',
   gray5: '#ececec',
-  gray6: '#f4f5f8',
-  gray7: '#fbfbfb',
+  gray6: '#f4f5f8', // not used in dark theme
+  gray7: '#fbfbfb', // not used in dark theme
   grayBlue: '#212327',
+  blueBase: '#3274d9',
+  blueShade: '#1f60c4',
+  blueLight: '#5794f2',
+  blueFaint: '#041126',
+  redBase: '#e02f44',
+  redShade: '#c4162a',
+  greenBase: '#299c46',
+  greenShade: '#23843b',
   blue: '#33b5e5',
-  blueDark: '#005f81',
-  blueLight: '#00a8e6', // not used in dark theme
-  green: '#299c46',
   red: '#d44a3a',
   yellow: '#ecbb13',
-  pink: '#ff4444',
   purple: '#9933cc',
   variable: '#32d1df',
   orange: '#eb7b18',
@@ -37,16 +46,16 @@ const darkTheme: GrafanaTheme = {
   colors: {
     ...basicColors,
     inputBlack: '#09090b',
-    queryRed: '#e24d42',
+    queryRed: basicColors.redBase,
     queryGreen: '#74e680',
     queryPurple: '#fe85fc',
     queryKeyword: '#66d9ef',
-    queryOrange: 'eb7b18',
-    online: '#10a345',
+    queryOrange: basicColors.orange,
+    online: basicColors.greenBase,
     warn: '#f79520',
-    critical: '#ed2e18',
-    bodyBg: '#171819',
-    pageBg: '#161719',
+    critical: basicColors.redBase,
+    bodyBg: basicColors.dark2,
+    pageBg: basicColors.dark2,
     bodyColor: basicColors.gray4,
     textColor: basicColors.gray4,
     textColorStrong: basicColors.white,
@@ -61,8 +70,8 @@ const darkTheme: GrafanaTheme = {
   },
   background: {
     dropdown: basicColors.dark3,
-    scrollbar: '#aeb5df',
-    scrollbar2: '#3a3a3a',
+    scrollbar: basicColors.dark9,
+    scrollbar2: basicColors.dark9,
   },
 };
 

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

@@ -1,10 +1,12 @@
-const theme = {
+import { GrafanaThemeCommons } from '../types/theme';
+
+const theme: GrafanaThemeCommons = {
   name: 'Grafana Default',
   typography: {
     fontFamily: {
-      sansSerif: "'Roboto', Helvetica, Arial, sans-serif;",
-      serif: "Georgia, 'Times New Roman', Times, serif;",
-      monospace: "Menlo, Monaco, Consolas, 'Courier New', monospace;",
+      sansSerif: "'Roboto', Helvetica, Arial, sans-serif",
+      serif: "Georgia, 'Times New Roman', Times, serif",
+      monospace: "Menlo, Monaco, Consolas, 'Courier New', monospace",
     },
     size: {
       base: '13px',
@@ -45,7 +47,6 @@ const theme = {
     s: '0.2rem',
     m: '1rem',
     l: '1.5rem',
-    xl: '3rem',
     gutter: '30px',
   },
   border: {

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

@@ -5,11 +5,16 @@ import { GrafanaTheme, GrafanaThemeType } from '../types/theme';
 const basicColors = {
   black: '#000000',
   white: '#ffffff',
-  dark1: '#13161d',
-  dark2: '#1e2028',
-  dark3: '#303133',
-  dark4: '#35373f',
-  dark5: '#41444b',
+  dark1: '#1e2028',
+  dark2: '#41444b',
+  dark3: '#303133', // not used in light theme
+  dark4: '#35373f', // not used in light theme
+  dark5: '#41444b', // not used in light theme
+  dark6: '#41444b', // not used in light theme
+  dark7: '#41444b', // not used in light theme
+  dark8: '#2f2f32', // not used in light theme
+  dark9: '#343436', // not used in light theme
+  dark10: '#424345', // not used in light theme
   gray1: '#52545c',
   gray2: '#767980',
   gray3: '#acb6bf',
@@ -18,15 +23,19 @@ const basicColors = {
   gray6: '#e9edf2',
   gray7: '#f7f8fa',
   grayBlue: '#212327', // not used in light theme
+  blueBase: '#3274d9',
+  blueShade: '#1f60c4',
+  blueLight: '#5794f2',
+  blueFaint: '#f5f9ff',
+  redBase: '#e02f44',
+  redShade: '#c4162a',
+  greenBase: '#3eb15b',
+  greenShade: '#369b4f',
   blue: '#0083b3',
-  blueDark: '#005f81',
-  blueLight: '#00a8e6',
-  green: '#3aa655',
   red: '#d44939',
   yellow: '#ff851b',
-  pink: '#e671b8',
   purple: '#9954bb',
-  variable: '#0083b3',
+  variable: '#007580',
   orange: '#ff7941',
 };
 
@@ -39,13 +48,13 @@ const lightTheme: GrafanaTheme = {
     variable: basicColors.blue,
     inputBlack: '#09090b',
     queryRed: basicColors.red,
-    queryGreen: basicColors.green,
+    queryGreen: basicColors.greenBase,
     queryPurple: basicColors.purple,
     queryKeyword: basicColors.blue,
     queryOrange: basicColors.orange,
-    online: '#01a64f',
+    online: basicColors.greenShade,
     warn: '#f79520',
-    critical: '#ec2128',
+    critical: basicColors.redShade,
     bodyBg: basicColors.gray7,
     pageBg: basicColors.gray7,
     bodyColor: basicColors.gray1,

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

@@ -3,8 +3,7 @@ export enum GrafanaThemeType {
   Dark = 'dark',
 }
 
-export interface GrafanaTheme {
-  type: GrafanaThemeType;
+export interface GrafanaThemeCommons {
   name: string;
   // TODO: not sure if should be a part of theme
   brakpoints: {
@@ -62,6 +61,10 @@ export interface GrafanaTheme {
       m: string;
     };
   };
+}
+
+export interface GrafanaTheme extends GrafanaThemeCommons {
+  type: GrafanaThemeType;
   background: {
     dropdown: string;
     scrollbar: string;
@@ -75,6 +78,11 @@ export interface GrafanaTheme {
     dark3: string;
     dark4: string;
     dark5: string;
+    dark6: string;
+    dark7: string;
+    dark8: string;
+    dark9: string;
+    dark10: string;
     gray1: string;
     gray2: string;
     gray3: string;
@@ -87,12 +95,16 @@ export interface GrafanaTheme {
 
     // Accent colors
     blue: string;
+    blueBase: string;
+    blueShade: string;
     blueLight: string;
-    blueDark: string;
-    green: string;
+    blueFaint: string;
+    redBase: string;
+    redShade: string;
+    greenBase: string;
+    greenShade: string;
     red: string;
     yellow: string;
-    pink: string;
     purple: string;
     variable: string;
     orange: string;

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

@@ -0,0 +1,10 @@
+export const renderGeneratedFileBanner = (themeFile: string, templateFile: string) => `/***
+ * !!! THIS FILE WAS GENERATED AUTOMATICALLY !!!
+ *
+ * Do not modify this file!
+ * - Edit ${themeFile} to regenerate
+ * - Edit ${templateFile} to update template
+ *
+ * !!! THIS FILE WAS GENERATED AUTOMATICALLY !!!
+ */
+`;

public/app/core/components/Page/Page.tsx

@@ -48,7 +48,7 @@ class Page extends Component<Props> {
     const { buildInfo } = config;
     return (
       <div className="page-scrollbar-wrapper">
-        <CustomScrollbar autoHeightMin={'100%'}>
+        <CustomScrollbar autoHeightMin={'100%'} className="custom-scrollbar--page">
           <div className="page-scrollbar-content">
             <PageHeader model={navModel} />
             {this.props.children}

public/app/core/specs/search_results.test.ts

@@ -4,7 +4,7 @@ import appEvents from 'app/core/app_events';
 
 jest.mock('app/core/app_events', () => {
   return {
-    emit: jest.fn<any>(),
+    emit: jest.fn(),
   };
 });
 

public/app/features/admin/__snapshots__/ServerStats.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`ServerStats Should render table with stats 1`] = `
   className="page-scrollbar-wrapper"
 >
   <div
-    className="custom-scrollbars"
+    className="custom-scrollbar custom-scrollbar--page"
     style={
       Object {
         "height": "auto",

public/app/features/dashboard/containers/DashboardPage.test.tsx

@@ -6,7 +6,7 @@ import { cleanUpDashboard } from '../state/actions';
 import { getNoPayloadActionCreatorMock, NoPayloadActionCreatorMock } from 'app/core/redux';
 import { DashboardRouteInfo, DashboardInitPhase } from 'app/types';
 
-jest.mock('sass/_variables.scss', () => ({
+jest.mock('sass/_variables.generated.scss', () => ({
   panelhorizontalpadding: 10,
   panelVerticalPadding: 10,
 }));

public/app/features/dashboard/containers/__snapshots__/DashboardPage.test.tsx.snap

@@ -109,7 +109,6 @@ exports[`DashboardPage Dashboard init completed  Should render dashboard grid 1`
       autoHide={false}
       autoHideDuration={200}
       autoHideTimeout={200}
-      customClassName="custom-scrollbars"
       hideTracksWhenNotNeeded={false}
       scrollTop={0}
       setScrollTop={[Function]}
@@ -345,7 +344,6 @@ exports[`DashboardPage When dashboard has editview url state should render setti
       autoHide={false}
       autoHideDuration={200}
       autoHideTimeout={200}
-      customClassName="custom-scrollbars"
       hideTracksWhenNotNeeded={false}
       scrollTop={0}
       setScrollTop={[Function]}

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

@@ -20,7 +20,7 @@ import { DashboardModel, PanelModel } from '../state';
 import { PanelPlugin } from 'app/types';
 import { DataQueryResponse, TimeRange, LoadingState, PanelData, DataQueryError } from '@grafana/ui';
 
-import variables from 'sass/_variables.scss';
+import variables from 'sass/_variables.generated.scss';
 import templateSrv from 'app/features/templating/template_srv';
 
 const DEFAULT_PLUGIN_ERROR = 'Error in plugin';

public/app/features/explore/Wrapper.tsx

@@ -53,7 +53,7 @@ export class Wrapper extends Component<WrapperProps> {
 
     return (
       <div className="page-scrollbar-wrapper">
-        <CustomScrollbar autoHeightMin={'100%'}>
+        <CustomScrollbar autoHeightMin={'100%'} className="custom-scrollbar--page">
           <div className="explore-wrapper">
             <ErrorBoundary>
               <Explore exploreId={ExploreId.left} urlState={leftState} />

public/app/features/playlist/specs/playlist_srv.test.ts

@@ -2,7 +2,7 @@ import { PlaylistSrv } from '../playlist_srv';
 
 const dashboards = [{ url: 'dash1' }, { url: 'dash2' }];
 
-const createPlaylistSrv = (): [PlaylistSrv, { url: jest.MockInstance<any> }] => {
+const createPlaylistSrv = (): [PlaylistSrv, { url: jest.MockInstance<any, any> }] => {
   const mockBackendSrv = {
     get: jest.fn(url => {
       switch (url) {
@@ -27,7 +27,7 @@ const createPlaylistSrv = (): [PlaylistSrv, { url: jest.MockInstance<any> }] =>
   return [new PlaylistSrv(mockLocation, mockTimeout, mockBackendSrv), mockLocation];
 };
 
-const mockWindowLocation = (): [jest.MockInstance<any>, () => void] => {
+const mockWindowLocation = (): [jest.MockInstance<any, any>, () => void] => {
   const oldLocation = window.location;
   const hrefMock = jest.fn();
 
@@ -50,7 +50,7 @@ const mockWindowLocation = (): [jest.MockInstance<any>, () => void] => {
 
 describe('PlaylistSrv', () => {
   let srv: PlaylistSrv;
-  let hrefMock: jest.MockInstance<any>;
+  let hrefMock: jest.MockInstance<any, any>;
   let unmockLocation: () => void;
   const initialUrl = 'http://localhost/playlist';
 

public/app/plugins/datasource/mysql/mysql_query.ts

@@ -52,7 +52,7 @@ export default class MysqlQuery {
   }
 
   escapeLiteral(value) {
-    return value.replace(/'/g, "''");
+    return String(value).replace(/'/g, "''");
   }
 
   hasTimeGroup() {

public/sass/_variables.dark.scss → public/sass/_variables.dark.generated.scss

@@ -1,3 +1,13 @@
+/***
+ * !!! THIS FILE WAS GENERATED AUTOMATICALLY !!!
+ *
+ * Do not modify this file!
+ * - Edit grafana-ui/src/themes/dark.ts to regenerate
+ * - Edit grafana-ui/src/themes/_variables.dark.scss.tmpl.ts to update template
+ *
+ * !!! THIS FILE WAS GENERATED AUTOMATICALLY !!!
+ */
+
 // Global values
 // --------------------------------------------------
 
@@ -5,20 +15,18 @@ $theme-name: dark;
 
 // New Colors
 // -------------------------
-$sapphire-faint: #041126;
-$sapphire-light: #5794f2;
-$sapphire-base: #3274d9;
-$sapphire-shade: #1f60c4;
-$lobster-base: #e02f44;
-$lobster-shade: #c4162a;
-$forest-light: #96d98d;
+$blue-faint: #041126;
+$blue-light: #5794f2;
+$blue-base: #3274d9;
+$blue-shade: #1f60c4;
+$red-base: #e02f44;
+$red-shade: #c4162a;
 $green-base: #299c46;
 $green-shade: #23843b;
 
 // Grays
 // -------------------------
-
-$black: #000;
+$black: #000000;
 $dark-1: #141414;
 $dark-2: #161719;
 $dark-3: #1f1f20;
@@ -35,28 +43,27 @@ $gray-3: #b3b3b3;
 $gray-4: #d8d9da;
 $gray-5: #ececec;
 
-$input-black: #09090b;
 $gray-blue: #212327;
+$input-black: #09090b;
 
-$white: #fff;
+$white: #ffffff;
 
 // Accent colors
 // -------------------------
 $blue: #33b5e5;
-$green: #299c46;
-$red: $lobster-base;
+$red: $red-base;
 $yellow: #ecbb13;
+$orange: #eb7b18;
 $purple: #9933cc;
 $variable: #32d1df;
-$orange: #eb7b18;
 
 $brand-primary: $orange;
 $brand-success: $green-base;
 $brand-warning: $brand-primary;
-$brand-danger: $lobster-base;
+$brand-danger: $red-base;
 
-$query-red: $lobster-base;
-$query-green: $forest-light;
+$query-red: $red-base;
+$query-green: #74e680;
 $query-purple: #fe85fc;
 $query-keyword: #66d9ef;
 $query-orange: $orange;
@@ -65,12 +72,12 @@ $query-orange: $orange;
 // -------------------------
 $online: $green-base;
 $warn: #f79520;
-$critical: $lobster-base;
+$critical: $red-base;
 
 // Scaffolding
 // -------------------------
-$body-bg: $dark-2;
-$page-bg: $dark-2;
+$body-bg: #161719;
+$page-bg: #161719;
 
 $body-color: $gray-4;
 $text-color: $gray-4;
@@ -98,7 +105,7 @@ $edit-gradient: linear-gradient(180deg, $dark-2 50%, $input-black);
 $link-color: darken($white, 11%);
 $link-color-disabled: darken($link-color, 30%);
 $link-hover-color: $white;
-$external-link-color: $sapphire-light;
+$external-link-color: $blue-light;
 
 // Typography
 // -------------------------
@@ -144,9 +151,9 @@ $list-item-shadow: $card-shadow;
 $empty-list-cta-bg: $gray-blue;
 
 // Scrollbars
-$scrollbarBackground: $dark-9;
-$scrollbarBackground2: $dark-9;
-$scrollbarBorder: $dark-10;
+$scrollbarBackground: #404357;
+$scrollbarBackground2: $dark-10;
+$scrollbarBorder: black;
 
 // Tables
 // -------------------------
@@ -158,9 +165,8 @@ $table-bg-hover: $dark-6;
 
 // Buttons
 // -------------------------
-
-$btn-secondary-bg: $sapphire-base;
-$btn-secondary-bg-hl: $sapphire-shade;
+$btn-secondary-bg: $blue-base;
+$btn-secondary-bg-hl: $blue-shade;
 
 $btn-primary-bg: $green-base;
 $btn-primary-bg-hl: $green-shade;
@@ -168,8 +174,8 @@ $btn-primary-bg-hl: $green-shade;
 $btn-success-bg: $green-base;
 $btn-success-bg-hl: $green-shade;
 
-$btn-danger-bg: $lobster-base;
-$btn-danger-bg-hl: $lobster-shade;
+$btn-danger-bg: $red-base;
+$btn-danger-bg-hl: $red-shade;
 
 $btn-inverse-bg: $dark-6;
 $btn-inverse-bg-hl: lighten($dark-6, 4%);
@@ -194,7 +200,7 @@ $input-color: $gray-4;
 $input-border-color: $dark-6;
 $input-box-shadow: inset 1px 0px 0.3rem 0px rgba(150, 150, 150, 0.1);
 $input-border-focus: $dark-6 !default;
-$input-box-shadow-focus: $sapphire-light !default;
+$input-box-shadow-focus: $blue-light !default;
 $input-color-placeholder: $gray-1 !default;
 $input-label-bg: $gray-blue;
 $input-label-border-color: $dark-6;
@@ -266,12 +272,12 @@ $toolbar-bg: $input-black;
 // -------------------------
 $warning-text-color: $warn;
 $error-text-color: #e84d4d;
-$success-text-color: $forest-light;
+$success-text-color: #12d95a;
 
-$alert-error-bg: linear-gradient(90deg, $lobster-base, $lobster-shade);
+$alert-error-bg: linear-gradient(90deg, $red-base, $red-shade);
 $alert-success-bg: linear-gradient(90deg, $green-base, $green-shade);
-$alert-warning-bg: linear-gradient(90deg, $lobster-base, $lobster-shade);
-$alert-info-bg: linear-gradient(100deg, $sapphire-base, $sapphire-shade);
+$alert-warning-bg: linear-gradient(90deg, $red-base, $red-shade);
+$alert-info-bg: linear-gradient(100deg, $blue-base, $blue-shade);
 
 // popover
 $popover-bg: $dark-2;
@@ -300,7 +306,7 @@ $tooltipBackgroundError: $brand-danger;
 $checkboxImageUrl: '../img/checkbox.png';
 
 // info box
-$info-box-border-color: $sapphire-base;
+$info-box-border-color: $blue-base;
 
 // footer
 $footer-link-color: $gray-2;
@@ -331,8 +337,8 @@ $diff-arrow-color: $white;
 $diff-json-bg: $dark-9;
 $diff-json-fg: $gray-5;
 
-$diff-json-added: $sapphire-shade;
-$diff-json-deleted: $lobster-shade;
+$diff-json-added: $blue-shade;
+$diff-json-deleted: $red-shade;
 
 $diff-json-old: #a04338;
 $diff-json-new: #457740;
@@ -366,18 +372,18 @@ $panel-editor-shadow: 0 0 20px black;
 $panel-editor-side-menu-shadow: drop-shadow(0 0 10px $black);
 $panel-editor-viz-item-shadow: 0 0 8px $dark-10;
 $panel-editor-viz-item-border: 1px solid $dark-10;
-$panel-editor-viz-item-shadow-hover: 0 0 4px $sapphire-light;
-$panel-editor-viz-item-border-hover: 1px solid $sapphire-light;
+$panel-editor-viz-item-shadow-hover: 0 0 4px $blue-light;
+$panel-editor-viz-item-border-hover: 1px solid $blue-light;
 $panel-editor-viz-item-bg: $input-black;
 $panel-editor-tabs-line-color: #e3e3e3;
 
-$panel-editor-viz-item-bg-hover: darken($sapphire-base, 46%);
+$panel-editor-viz-item-bg-hover: darken($blue-base, 46%);
 
 $panel-options-group-border: none;
 $panel-options-group-header-bg: $gray-blue;
 
-$panel-grid-placeholder-bg: $sapphire-faint;
-$panel-grid-placeholder-shadow: 0 0 4px $sapphire-shade;
+$panel-grid-placeholder-bg: $blue-faint;
+$panel-grid-placeholder-shadow: 0 0 4px $blue-shade;
 
 // logs
 $logs-color-unkown: $gray-2;

public/sass/_variables.scss → public/sass/_variables.generated.scss

@@ -1,3 +1,13 @@
+/***
+ * !!! THIS FILE WAS GENERATED AUTOMATICALLY !!!
+ *
+ * Do not modify this file!
+ * - Edit grafana-ui/src/themes/default.ts to regenerate
+ * - Edit grafana-ui/src/themes/_variables.scss.tmpl.ts to update template
+ *
+ * !!! THIS FILE WAS GENERATED AUTOMATICALLY !!!
+ */
+
 // Options
 //
 // Quickly modify global styling by enabling or disabling optional features.

public/sass/_variables.light.scss → public/sass/_variables.light.generated.scss

@@ -1,3 +1,13 @@
+/***
+ * !!! THIS FILE WAS GENERATED AUTOMATICALLY !!!
+ *
+ * Do not modify this file!
+ * - Edit grafana-ui/src/themes/light.ts to regenerate
+ * - Edit grafana-ui/src/themes/_variable.light.scss.tmpl.ts to update template
+ *
+ * !!! THIS FILE WAS GENERATED AUTOMATICALLY !!!
+ */
+
 // Global values
 // --------------------------------------------------
 
@@ -5,22 +15,21 @@ $theme-name: light;
 
 // New Colors
 // -------------------------
-$sapphire-faint: #f5f9ff;
-$sapphire-light: #5794f2;
-$sapphire-base: #3274d9;
-$sapphire-shade: #1f60c4;
-$lobster-base: #e02f44;
-$lobster-shade: #c4162a;
+$blue-faint: #f5f9ff;
+$blue-light: #5794f2;
+$blue-base: #3274d9;
+$blue-shade: #1f60c4;
+$red-base: #e02f44;
+$red-shade: #c4162a;
 $green-base: #3eb15b;
 $green-shade: #369b4f;
-$purple-shade: #8f3bb8;
-$yellow-base: #f2cc0c;
 
 // Grays
 // -------------------------
-$black: #000;
-$dark-2: #1e2028;
-$dark-5: #41444b;
+$black: #000000;
+
+$dark-1: #1e2028;
+$dark-2: #41444b;
 $gray-1: #52545c;
 $gray-2: #767980;
 $gray-3: #acb6bf;
@@ -29,46 +38,45 @@ $gray-5: #dde4ed;
 $gray-6: #e9edf2;
 $gray-7: #f7f8fa;
 
-$white: #fff;
+$white: #ffffff;
 
 // Accent colors
 // -------------------------
 $blue: #0083b3;
-$green: #3aa655;
-$red: $lobster-base;
+$red: $red-base;
 $yellow: #ff851b;
 $orange: #ff7941;
 $purple: #9954bb;
-$variable: $purple-shade;
+$variable: #0083b3;
 
 $brand-primary: $orange;
-$brand-success: $green;
+$brand-success: $green-base;
 $brand-warning: $orange;
-$brand-danger: $lobster-base;
+$brand-danger: $red-base;
 
-$query-red: $lobster-base;
-$query-green: $green;
+$query-red: $red-base;
+$query-green: $green-base;
 $query-purple: $purple;
 $query-orange: $orange;
-$query-keyword: $sapphire-base;
+$query-keyword: $blue-base;
 
 // Status colors
 // -------------------------
 $online: $green-shade;
 $warn: #f79520;
-$critical: $lobster-shade;
+$critical: $red-shade;
 
 // Scaffolding
 // -------------------------
-$body-bg: $gray-7;
-$page-bg: $gray-7;
+$body-bg: #f7f8fa;
+$page-bg: #f7f8fa;
 
 $body-color: $gray-1;
 $text-color: $gray-1;
-$text-color-strong: $dark-2;
+$text-color-strong: $dark-1;
 $text-color-weak: $gray-2;
 $text-color-faint: $gray-4;
-$text-color-emphasis: $dark-5;
+$text-color-emphasis: $dark-2;
 
 $text-shadow-faint: none;
 
@@ -83,7 +91,7 @@ $edit-gradient: linear-gradient(-60deg, $gray-7, #f5f6f9 70%, $gray-7 98%);
 $link-color: $gray-1;
 $link-color-disabled: lighten($link-color, 30%);
 $link-hover-color: darken($link-color, 20%);
-$external-link-color: $sapphire-shade;
+$external-link-color: $blue-shade;
 
 // Typography
 // -------------------------
@@ -131,7 +139,7 @@ $empty-list-cta-bg: $gray-6;
 // Scrollbars
 $scrollbarBackground: $gray-4;
 $scrollbarBackground2: $gray-4;
-$scrollbarBorder: $gray-3;
+$scrollbarBorder: $gray-7;
 
 // Tables
 // -------------------------
@@ -146,14 +154,14 @@ $table-bg-hover: $gray-5;
 $btn-primary-bg: $green-base;
 $btn-primary-bg-hl: $green-shade;
 
-$btn-secondary-bg: $sapphire-base;
-$btn-secondary-bg-hl: $sapphire-shade;
+$btn-secondary-bg: $blue-base;
+$btn-secondary-bg-hl: $blue-shade;
 
 $btn-success-bg: $green-base;
 $btn-success-bg-hl: $green-shade;
 
-$btn-danger-bg: $lobster-base;
-$btn-danger-bg-hl: $lobster-shade;
+$btn-danger-bg: $red-base;
+$btn-danger-bg-hl: $red-shade;
 
 $btn-inverse-bg: $gray-5;
 $btn-inverse-bg-hl: darken($gray-5, 5%);
@@ -175,11 +183,11 @@ $btn-drag-image: '../img/grab_light.svg';
 $input-bg: $white;
 $input-bg-disabled: $gray-5;
 
-$input-color: $dark-5;
+$input-color: $dark-2;
 $input-border-color: $gray-5;
 $input-box-shadow: none;
 $input-border-focus: $gray-5 !default;
-$input-box-shadow-focus: $sapphire-light !default;
+$input-box-shadow-focus: $blue-light !default;
 $input-color-placeholder: $gray-4 !default;
 $input-label-bg: $gray-5;
 $input-label-border-color: $gray-5;
@@ -204,7 +212,7 @@ $dropdownBorder: $gray-4;
 $dropdownDividerTop: $gray-6;
 $dropdownDividerBottom: $white;
 
-$dropdownLinkColor: $dark-5;
+$dropdownLinkColor: $dark-2;
 $dropdownLinkColorHover: $link-color;
 $dropdownLinkColorActive: $link-color;
 
@@ -228,7 +236,7 @@ $navbar-button-border: $gray-4;
 
 // Sidemenu
 // -------------------------
-$side-menu-bg: $dark-2;
+$side-menu-bg: $dark-1;
 $side-menu-bg-mobile: rgba(0, 0, 0, 0); //$gray-6;
 $side-menu-item-hover-bg: $gray-1;
 $side-menu-shadow: 5px 0px 10px -5px $gray-1;
@@ -250,13 +258,13 @@ $toolbar-bg: white;
 // Form states and alerts
 // -------------------------
 $warning-text-color: lighten($orange, 10%);
-$error-text-color: $lobster-shade;
-$success-text-color: lighten($green, 10%);
+$error-text-color: $red-shade;
+$success-text-color: lighten($green-base, 10%);
 
-$alert-error-bg: linear-gradient(90deg, $lobster-base, $lobster-shade);
+$alert-error-bg: linear-gradient(90deg, $red-base, $red-shade);
 $alert-success-bg: linear-gradient(90deg, $green-base, $green-shade);
-$alert-warning-bg: linear-gradient(90deg, $lobster-base, $lobster-shade);
-$alert-info-bg: linear-gradient(100deg, $sapphire-base, $sapphire-shade);
+$alert-warning-bg: linear-gradient(90deg, $red-base, $red-shade);
+$alert-info-bg: linear-gradient(100deg, $blue-base, $blue-shade);
 
 // popover
 $popover-bg: $page-bg;
@@ -285,39 +293,39 @@ $tooltipBackgroundError: $brand-danger;
 $checkboxImageUrl: '../img/checkbox_white.png';
 
 // info box
-$info-box-border-color: $sapphire-base;
+$info-box-border-color: $blue-base;
 
 // footer
 $footer-link-color: $gray-3;
-$footer-link-hover: $dark-5;
+$footer-link-hover: $dark-2;
 
 // json explorer
 $json-explorer-default-color: black;
 $json-explorer-string-color: green;
-$json-explorer-number-color: $sapphire-base;
-$json-explorer-boolean-color: $lobster-base;
+$json-explorer-number-color: $blue-base;
+$json-explorer-boolean-color: $red-base;
 $json-explorer-null-color: #855a00;
 $json-explorer-undefined-color: rgb(202, 11, 105);
 $json-explorer-function-color: #ff20ed;
 $json-explorer-rotate-time: 100ms;
 $json-explorer-toggler-opacity: 0.6;
-$json-explorer-bracket-color: $sapphire-base;
+$json-explorer-bracket-color: $blue-base;
 $json-explorer-key-color: #00008b;
-$json-explorer-url-color: $sapphire-base;
+$json-explorer-url-color: $blue-base;
 
 // Changelog and diff
 // -------------------------
 $diff-label-bg: $gray-7;
 $diff-label-fg: $gray-2;
 
-$diff-arrow-color: $dark-5;
+$diff-arrow-color: $dark-2;
 $diff-group-bg: $gray-6;
 
 $diff-json-bg: $gray-6;
 $diff-json-fg: $gray-1;
 
-$diff-json-added: $sapphire-shade;
-$diff-json-deleted: $lobster-shade;
+$diff-json-added: $blue-shade;
+$diff-json-deleted: $red-shade;
 
 $diff-json-old: #5a372a;
 $diff-json-new: #664e33;
@@ -336,7 +344,7 @@ $switch-bg: $white;
 $switch-slider-color: $gray-7;
 $switch-slider-off-bg: $gray-5;
 $switch-slider-on-bg: linear-gradient(90deg, #ff9830, #e55400);
-$switch-slider-shadow: 0 0 3px $dark-5;
+$switch-slider-shadow: 0 0 3px $dark-2;
 
 //Checkbox
 // -------------------------
@@ -351,18 +359,18 @@ $panel-editor-shadow: 0px 0px 8px $gray-3;
 $panel-editor-side-menu-shadow: drop-shadow(0 0 2px $gray-3);
 $panel-editor-viz-item-shadow: 0 0 4px $gray-3;
 $panel-editor-viz-item-border: 1px solid $gray-3;
-$panel-editor-viz-item-shadow-hover: 0 0 4px $sapphire-light;
-$panel-editor-viz-item-border-hover: 1px solid $sapphire-light;
+$panel-editor-viz-item-shadow-hover: 0 0 4px $blue-light;
+$panel-editor-viz-item-border-hover: 1px solid $blue-light;
 $panel-editor-viz-item-bg: $white;
-$panel-editor-tabs-line-color: $dark-5;
+$panel-editor-tabs-line-color: $dark-2;
 
-$panel-editor-viz-item-bg-hover: lighten($sapphire-base, 45%);
+$panel-editor-viz-item-bg-hover: lighten($blue-base, 45%);
 
 $panel-options-group-border: none;
 $panel-options-group-header-bg: $gray-5;
 
-$panel-grid-placeholder-bg: $sapphire-faint;
-$panel-grid-placeholder-shadow: 0 0 4px $sapphire-light;
+$panel-grid-placeholder-bg: $blue-faint;
+$panel-grid-placeholder-shadow: 0 0 4px $blue-light;
 
 // logs
 $logs-color-unkown: $gray-5;

public/sass/components/_footer.scss

@@ -42,7 +42,7 @@
   display: none;
 }
 
-.is-react .custom-scrollbars .footer {
+.is-react .custom-scrollbar .footer {
   display: block;
 }
 

public/sass/components/_gf-form.scss

@@ -415,7 +415,7 @@ select.gf-form-input ~ .gf-form-help-icon {
   padding: 1.5rem;
   background-color: $empty-list-cta-bg;
   margin-bottom: 2rem;
-  border-top: 3px solid $green;
+  border-top: 3px solid $green-base;
 }
 
 .cta-form__close {

public/sass/components/_modals.scss

@@ -98,7 +98,7 @@
   .confirm-modal-icon {
     padding-top: 41px;
     font-size: 280%;
-    color: $green;
+    color: $green-base;
     padding-bottom: 20px;
   }
 

public/sass/components/_search.scss

@@ -83,7 +83,7 @@
 }
 
 .search-filter-box__header {
-  border-bottom: 1px solid $dark-5;
+  border-bottom: 1px solid $hr-border-color;
   margin-bottom: $spacer * 1.5;
 }
 

public/sass/grafana.dark.scss

@@ -1,3 +1,3 @@
-@import 'variables';
-@import 'variables.dark';
+@import 'variables.generated';
+@import 'variables.dark.generated';
 @import 'grafana';

public/sass/grafana.light.scss

@@ -1,3 +1,3 @@
-@import 'variables';
-@import 'variables.light';
+@import 'variables.generated';
+@import 'variables.light.generated';
 @import 'grafana';

public/sass/pages/_login.scss

@@ -196,7 +196,7 @@ select:-webkit-autofill:focus {
   white-space: nowrap;
   padding-top: 3px;
   color: darken($text-color, 20%);
-  border-top: 3px solid $red;
+  border-top: 3px solid $red-base;
 
   &.password-strength-ok {
     width: 40%;
@@ -205,7 +205,7 @@ select:-webkit-autofill:focus {
 
   &.password-strength-good {
     width: 100%;
-    border-top: 3px solid lighten($green, 10%);
+    border-top: 3px solid lighten($green-base, 10%);
   }
 }
 

scripts/cli/generateSassVariableFiles.ts

@@ -0,0 +1,39 @@
+import fs from 'fs';
+import darkTheme from '@grafana/ui/src/themes/dark';
+import lightTheme from '@grafana/ui/src/themes/light';
+import defaultTheme from '@grafana/ui/src/themes/default';
+import { darkThemeVarsTemplate } from '@grafana/ui/src/themes/_variables.dark.scss.tmpl';
+import { lightThemeVarsTemplate } from '@grafana/ui/src/themes/_variables.light.scss.tmpl';
+import { commonThemeVarsTemplate } from '@grafana/ui/src/themes/_variables.scss.tmpl';
+
+const darkThemeVariablesPath = __dirname + '/../../public/sass/_variables.dark.generated.scss';
+const lightThemeVariablesPath = __dirname + '/../../public/sass/_variables.light.generated.scss';
+const defaultThemeVariablesPath = __dirname + '/../../public/sass/_variables.generated.scss';
+
+const writeVariablesFile = async (path: string, data: string) => {
+  return new Promise((resolve, reject) => {
+    fs.writeFile(path, data, e => {
+      if (e) {
+        reject(e);
+      } else {
+        resolve(data);
+      }
+    });
+  });
+};
+
+const generateSassVariableFiles = async () => {
+  try {
+    await Promise.all([
+      writeVariablesFile(darkThemeVariablesPath, darkThemeVarsTemplate(darkTheme)),
+      writeVariablesFile(lightThemeVariablesPath, lightThemeVarsTemplate(lightTheme)),
+      writeVariablesFile(defaultThemeVariablesPath, commonThemeVarsTemplate(defaultTheme)),
+    ]);
+    console.log('\nSASS variable files generated');
+  } catch (error) {
+    console.error('\nWriting SASS variable files failed', error);
+    process.exit(1);
+  }
+};
+
+generateSassVariableFiles();

scripts/cli/index.ts

@@ -0,0 +1,22 @@
+import program from 'commander';
+import { startTask } from './start';
+import chalk from 'chalk';
+
+program
+  .option('-h, --hot', 'Runs front-end with hot reload enabled')
+  .option('-t, --theme', 'Watches for theme changes and regenerates variables.scss files')
+  .option('-d, --depreciate <scripts>', 'Inform about npm script deprecation', v => v.split(','))
+  .parse(process.argv);
+
+if (program.depreciate && program.depreciate.length === 2) {
+  console.log(
+    chalk.yellow.bold(
+      `[NPM script depreciation] ${program.depreciate[0]} is deprecated! Use ${program.depreciate[1]} instead!`
+    )
+  );
+}
+
+startTask({
+  watchThemes: !!program.theme,
+  hot: !!program.hot,
+});

scripts/cli/start.ts

@@ -0,0 +1,32 @@
+import concurrently from 'concurrently';
+
+export const startTask = async ({ watchThemes, hot }: { watchThemes: boolean; hot: boolean }) => {
+  const jobs = [];
+  if (watchThemes) {
+    jobs.push({
+      command: 'nodemon -e ts -w ./packages/grafana-ui/src/themes -x yarn run themes:generate',
+      name: 'SASS variables generator',
+    });
+  }
+
+  if (!hot) {
+    jobs.push({
+      command: 'webpack --progress --colors --watch --mode development --config scripts/webpack/webpack.dev.js',
+      name: 'Webpack',
+    });
+  } else {
+    jobs.push({
+      command: 'webpack-dev-server --progress --colors --mode development --config scripts/webpack/webpack.hot.js',
+      name: 'Dev server',
+    });
+  }
+
+  try {
+    await concurrently(jobs, {
+      killOthers: ['failure', 'failure'],
+    });
+  } catch (e) {
+    console.error(e);
+    process.exit(1);
+  }
+};

scripts/cli/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "module": "commonjs"
+  }
+}