v1

package.json

@@ -17,12 +17,13 @@
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.1.0",
     "@rtsao/plugin-proposal-class-properties": "^7.0.1-patch.1",
+    "@types/chokidar": "^1.7.5",
     "@types/classnames": "^2.2.6",
     "@types/d3": "^4.10.1",
     "@types/enzyme": "^3.1.13",
     "@types/jest": "^23.3.2",
     "@types/jquery": "^1.10.35",
-    "@types/node": "^8.0.31",
+    "@types/node": "^10.12.24",
     "@types/react": "^16.7.6",
     "@types/react-dom": "^16.0.9",
     "@types/react-grid-layout": "^0.16.6",
@@ -35,6 +36,7 @@
     "babel-jest": "^23.6.0",
     "babel-loader": "^8.0.4",
     "babel-plugin-angularjs-annotate": "^0.9.0",
+    "chokidar": "^2.1.0",
     "clean-webpack-plugin": "^0.1.19",
     "css-loader": "^0.28.7",
     "enzyme": "^3.6.0",
@@ -69,6 +71,7 @@
     "jest-date-mock": "^1.0.6",
     "lint-staged": "^6.0.0",
     "load-grunt-tasks": "3.5.2",
+    "log-timestamp": "^0.2.1",
     "mini-css-extract-plugin": "^0.4.0",
     "mocha": "^4.0.1",
     "monaco-editor": "^0.15.6",
@@ -95,6 +98,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",
@@ -120,7 +124,9 @@
     "jest": "jest --notify --watch",
     "api-tests": "jest --notify --watch --config=tests/api/jest.js",
     "precommit": "grunt precommit",
-    "storybook": "cd packages/grafana-ui && yarn storybook"
+    "storybook": "cd packages/grafana-ui && yarn storybook",
+    "tmp": "nodemon -e ts -w ./packages/grafana-ui/src/themes -x yarn run tmp:exec",
+    "tmp:exec": "ts-node --project ./scripts/cli/tsconfig.json ./scripts/cli/watch.ts"
   },
   "husky": {
     "hooks": {

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

@@ -0,0 +1,387 @@
+import { GrafanaTheme } from '../types';
+
+export const darkThemeVarsTemplate = (theme: GrafanaTheme) => `
+  // Global values
+  // --------------------------------------------------
+
+  $theme-name: dark;
+
+  // Grays
+  // -------------------------
+  $black: #000;
+  $dark-1: #141414;
+  $dark-2: #1f1f20;
+  $dark-3: #262628;
+  $dark-4: #333333;
+  $dark-5: #444444;
+  $gray-1: #555555;
+  $gray-2: #8e8e8e;
+  $gray-3: #b3b3b3;
+  $gray-4: #d8d9da;
+  $gray-5: #ececec;
+  $gray-7: #fbfbfb;
+
+  $gray-blue: #212327;
+  $input-black: #09090b;
+
+  $white: #fff;
+
+  // Accent colors
+  // -------------------------
+  $blue: ${theme.colors.blue};
+  $blue-dark: #005f81;
+  $green: #299c46;
+  $red: #d44a3a;
+  $yellow: #ecbb13;
+  $purple: #9933cc;
+  $variable: #32d1df;
+  $orange: #eb7b18;
+
+  $brand-primary: $orange;
+  $brand-success: $green;
+  $brand-warning: $brand-primary;
+  $brand-danger: $red;
+
+  $query-red: #e24d42;
+  $query-green: #74e680;
+  $query-purple: #fe85fc;
+  $query-keyword: #66d9ef;
+  $query-orange: $orange;
+
+  // Status colors
+  // -------------------------
+  $online: #10a345;
+  $warn: #f79520;
+  $critical: #ed2e18;
+
+  // Scaffolding
+  // -------------------------
+  $body-bg: rgb(23, 24, 25);
+  $page-bg: rgb(22, 23, 25);
+
+  $body-color: $gray-4;
+  $text-color: $gray-4;
+  $text-color-strong: $white;
+  $text-color-weak: $gray-2;
+  $text-color-faint: $dark-5;
+  $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, #222426 10px, rgb(22, 23, 25) 100px);
+  $edit-gradient: linear-gradient(180deg, rgb(22, 23, 25) 50%, #090909);
+
+  // Links
+  // -------------------------
+  $link-color: darken($white, 11%);
+  $link-color-disabled: darken($link-color, 30%);
+  $link-hover-color: $white;
+  $external-link-color: $blue;
+
+  // Typography
+  // -------------------------
+  $headings-color: darken($white, 11%);
+  $abbr-border-color: $gray-3 !default;
+  $text-muted: $text-color-weak;
+
+  $hr-border-color: $dark-4;
+
+  // Panel
+  // -------------------------
+  $panel-bg: #212124;
+  $panel-border: solid 1px $dark-1;
+  $panel-header-hover-bg: $dark-4;
+  $panel-corner: $panel-bg;
+
+  // page header
+  $page-header-bg: linear-gradient(90deg, #292a2d, black);
+  $page-header-shadow: inset 0px -4px 14px $dark-2;
+  $page-header-border-color: $dark-4;
+
+  $divider-border-color: $gray-1;
+
+  // Graphite Target Editor
+  $tight-form-bg: $dark-3;
+  $tight-form-func-bg: $dark-4;
+  $tight-form-func-highlight-bg: $dark-5;
+
+  $modal-backdrop-bg: #353c42;
+  $code-tag-bg: $dark-1;
+  $code-tag-border: $dark-4;
+
+  // cards
+  $card-background: linear-gradient(135deg, #2f2f32, #262628);
+  $card-background-hover: linear-gradient(135deg, #343436, #262628);
+  $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: lighten($gray-blue, 2%);
+  $list-item-link-color: $text-color;
+  $list-item-shadow: $card-shadow;
+
+  $empty-list-cta-bg: $gray-blue;
+
+  // Scrollbars
+  $scrollbarBackground: #404357;
+  $scrollbarBackground2: #3a3a3a;
+  $scrollbarBorder: black;
+
+  // Tables
+  // -------------------------
+  $table-bg: transparent; // overall background-color
+  $table-bg-accent: $dark-3; // for striping
+  $table-border: $dark-3; // table and cell border
+
+  $table-bg-odd: $dark-2;
+  $table-bg-hover: $dark-3;
+
+  // Buttons
+  // -------------------------
+  $btn-primary-bg: #ff6600;
+  $btn-primary-bg-hl: #bc3e06;
+
+  $btn-secondary-bg-hl: lighten($blue-dark, 5%);
+  $btn-secondary-bg: $blue-dark;
+
+  $btn-success-bg: $green;
+  $btn-success-bg-hl: darken($green, 6%);
+
+  $btn-warning-bg: $brand-warning;
+  $btn-warning-bg-hl: lighten($brand-warning, 8%);
+
+  $btn-danger-bg: $red;
+  $btn-danger-bg-hl: darken($red, 8%);
+
+  $btn-inverse-bg: $dark-3;
+  $btn-inverse-bg-hl: lighten($dark-3, 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-4;
+  $btn-divider-right: $dark-2;
+
+  $btn-drag-image: '../img/grab_dark.svg';
+
+  // Forms
+  // -------------------------
+  $input-bg: $input-black;
+  $input-bg-disabled: $dark-3;
+
+  $input-color: $gray-4;
+  $input-border-color: $dark-3;
+  $input-box-shadow: inset 1px 0px 0.3rem 0px rgba(150, 150, 150, 0.1);
+  $input-border-focus: $input-border-color;
+  $input-box-shadow-focus: rgba(102, 175, 233, 0.6);
+  $input-color-placeholder: $gray-1 !default;
+  $input-label-bg: $gray-blue;
+  $input-label-border-color: $dark-3;
+  $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-4;
+  $typeahead-selected-color: $yellow;
+
+  // Dropdowns
+  // -------------------------
+  $dropdownBackground: $dark-3;
+  $dropdownBorder: rgba(0, 0, 0, 0.2);
+  $dropdownDividerTop: transparent;
+  $dropdownDividerBottom: #444;
+
+  $dropdownLinkColor: $text-color;
+  $dropdownLinkColorHover: $white;
+  $dropdownLinkColorActive: $white;
+
+  $dropdownLinkBackgroundHover: $dark-4;
+
+  // Horizontal forms & lists
+  // -------------------------
+  $horizontalComponentOffset: 180px;
+
+  // Navbar
+  // -------------------------
+  $navbarHeight: 55px;
+
+  $navbarBackground: $panel-bg;
+  $navbarBorder: 1px solid $dark-3;
+  $navbarShadow: 0 0 20px black;
+
+  $navbarLinkColor: $gray-4;
+
+  $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-2;
+  $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-2;
+  $menu-dropdown-shadow: 5px 5px 20px -5px $black;
+
+  // Tabs
+  // -------------------------
+  $tab-border-color: $dark-4;
+
+  // Toolbar
+  $toolbar-bg: $input-black;
+
+  // Form states and alerts
+  // -------------------------
+  $warning-text-color: $warn;
+  $error-text-color: #e84d4d;
+  $success-text-color: #12d95a;
+  $info-text-color: $blue-dark;
+
+  $alert-error-bg: linear-gradient(90deg, #d44939, #e0603d);
+  $alert-success-bg: linear-gradient(90deg, #3aa655, #47b274);
+  $alert-warning-bg: linear-gradient(90deg, #d44939, #e0603d);
+  $alert-info-bg: linear-gradient(100deg, #1a4552, #00374a);
+
+  // popover
+  $popover-bg: $page-bg;
+  $popover-color: $text-color;
+  $popover-border-color: $dark-4;
+  $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: darken($blue, 12%);
+
+  // 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-2;
+  $diff-label-fg: $white;
+
+  $diff-group-bg: $dark-4;
+  $diff-arrow-color: $white;
+
+  $diff-json-bg: $dark-4;
+  $diff-json-fg: $gray-5;
+
+  $diff-json-added: #457740;
+  $diff-json-deleted: #a04338;
+
+  $diff-json-old: #a04338;
+  $diff-json-new: #457740;
+
+  $diff-json-changed-fg: $gray-5;
+  $diff-json-changed-num: $text-color;
+
+  $diff-json-icon: $gray-7;
+
+  //Submenu
+  $variable-option-bg: $blue-dark;
+
+  //Switch Slider
+  // -------------------------
+  $switch-bg: $input-bg;
+  $switch-slider-color: $dark-2;
+  $switch-slider-off-bg: $gray-1;
+  $switch-slider-on-bg: linear-gradient(90deg, $orange, $red);
+  $switch-slider-shadow: 0 0 3px black;
+
+  //Checkbox
+  // -------------------------
+  $checkbox-bg: $dark-1;
+  $checkbox-border: 1px solid $gray-1;
+  $checkbox-checked-bg: linear-gradient(0deg, $orange, $red);
+  $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-5;
+  $panel-editor-viz-item-border: 1px solid $dark-5;
+  $panel-editor-viz-item-shadow-hover: 0 0 4px $blue;
+  $panel-editor-viz-item-border-hover: 1px solid $blue;
+  $panel-editor-viz-item-bg: $input-black;
+  $panel-editor-tabs-line-color: #e3e3e3;
+  $panel-editor-viz-item-bg-hover: darken($blue, 47%);
+
+  $panel-options-group-border: none;
+  $panel-options-group-header-bg: $gray-blue;
+
+  $panel-grid-placeholder-bg: darken($blue, 47%);
+  $panel-grid-placeholder-shadow: 0 0 4px $blue;
+
+  // logs
+  $logs-color-unkown: $gray-2;
+
+  // toggle-group
+  $button-toggle-group-btn-active-bg: linear-gradient(90deg, $orange, $red);
+  $button-toggle-group-btn-active-shadow: inset 0 0 4px $black;
+  $button-toggle-group-btn-seperator-border: 1px solid $page-bg;
+
+  $vertical-resize-handle-bg: $dark-5;
+  $vertical-resize-handle-dots: $gray-1;
+$vertical-resize-handle-dots-hover: $gray-2;
+`;

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

@@ -18,7 +18,7 @@ const basicColors = {
   gray6: '#f4f5f8',
   gray7: '#fbfbfb',
   grayBlue: '#212327',
-  blue: '#33b5e5',
+  blue: '#ff0000',
   blueDark: '#005f81',
   blueLight: '#00a8e6', // not used in dark theme
   green: '#299c46',

public/sass/_variables.dark.scss

@@ -1,383 +1,384 @@
-// Global values
-// --------------------------------------------------
-
-$theme-name: dark;
-
-// Grays
-// -------------------------
-$black: #000;
-$dark-1: #141414;
-$dark-2: #1f1f20;
-$dark-3: #262628;
-$dark-4: #333333;
-$dark-5: #444444;
-$gray-1: #555555;
-$gray-2: #8e8e8e;
-$gray-3: #b3b3b3;
-$gray-4: #d8d9da;
-$gray-5: #ececec;
-$gray-7: #fbfbfb;
-
-$gray-blue: #212327;
-$input-black: #09090b;
-
-$white: #fff;
-
-// Accent colors
-// -------------------------
-$blue: #33b5e5;
-$blue-dark: #005f81;
-$green: #299c46;
-$red: #d44a3a;
-$yellow: #ecbb13;
-$purple: #9933cc;
-$variable: #32d1df;
-$orange: #eb7b18;
-
-$brand-primary: $orange;
-$brand-success: $green;
-$brand-warning: $brand-primary;
-$brand-danger: $red;
-
-$query-red: #e24d42;
-$query-green: #74e680;
-$query-purple: #fe85fc;
-$query-keyword: #66d9ef;
-$query-orange: $orange;
-
-// Status colors
-// -------------------------
-$online: #10a345;
-$warn: #f79520;
-$critical: #ed2e18;
-
-// Scaffolding
-// -------------------------
-$body-bg: rgb(23, 24, 25);
-$page-bg: rgb(22, 23, 25);
-
-$body-color: $gray-4;
-$text-color: $gray-4;
-$text-color-strong: $white;
-$text-color-weak: $gray-2;
-$text-color-faint: $dark-5;
-$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, #222426 10px, rgb(22, 23, 25) 100px);
-$edit-gradient: linear-gradient(180deg, rgb(22, 23, 25) 50%, #090909);
-
-// Links
-// -------------------------
-$link-color: darken($white, 11%);
-$link-color-disabled: darken($link-color, 30%);
-$link-hover-color: $white;
-$external-link-color: $blue;
-
-// Typography
-// -------------------------
-$headings-color: darken($white, 11%);
-$abbr-border-color: $gray-3 !default;
-$text-muted: $text-color-weak;
-
-$hr-border-color: $dark-4;
-
-// Panel
-// -------------------------
-$panel-bg: #212124;
-$panel-border: solid 1px $dark-1;
-$panel-header-hover-bg: $dark-4;
-$panel-corner: $panel-bg;
-
-// page header
-$page-header-bg: linear-gradient(90deg, #292a2d, black);
-$page-header-shadow: inset 0px -4px 14px $dark-2;
-$page-header-border-color: $dark-4;
-
-$divider-border-color: $gray-1;
-
-// Graphite Target Editor
-$tight-form-bg: $dark-3;
-$tight-form-func-bg: $dark-4;
-$tight-form-func-highlight-bg: $dark-5;
-
-$modal-backdrop-bg: #353c42;
-$code-tag-bg: $dark-1;
-$code-tag-border: $dark-4;
-
-// cards
-$card-background: linear-gradient(135deg, #2f2f32, #262628);
-$card-background-hover: linear-gradient(135deg, #343436, #262628);
-$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: lighten($gray-blue, 2%);
-$list-item-link-color: $text-color;
-$list-item-shadow: $card-shadow;
-
-$empty-list-cta-bg: $gray-blue;
-
-// Scrollbars
-$scrollbarBackground: #404357;
-$scrollbarBackground2: #3a3a3a;
-$scrollbarBorder: black;
-
-// Tables
-// -------------------------
-$table-bg: transparent; // overall background-color
-$table-bg-accent: $dark-3; // for striping
-$table-border: $dark-3; // table and cell border
-
-$table-bg-odd: $dark-2;
-$table-bg-hover: $dark-3;
-
-// Buttons
-// -------------------------
-$btn-primary-bg: #ff6600;
-$btn-primary-bg-hl: #bc3e06;
-
-$btn-secondary-bg-hl: lighten($blue-dark, 5%);
-$btn-secondary-bg: $blue-dark;
-
-$btn-success-bg: $green;
-$btn-success-bg-hl: darken($green, 6%);
-
-$btn-warning-bg: $brand-warning;
-$btn-warning-bg-hl: lighten($brand-warning, 8%);
-
-$btn-danger-bg: $red;
-$btn-danger-bg-hl: darken($red, 8%);
-
-$btn-inverse-bg: $dark-3;
-$btn-inverse-bg-hl: lighten($dark-3, 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-4;
-$btn-divider-right: $dark-2;
-
-$btn-drag-image: '../img/grab_dark.svg';
-
-// Forms
-// -------------------------
-$input-bg: $input-black;
-$input-bg-disabled: $dark-3;
-
-$input-color: $gray-4;
-$input-border-color: $dark-3;
-$input-box-shadow: inset 1px 0px 0.3rem 0px rgba(150, 150, 150, 0.1);
-$input-border-focus: $input-border-color;
-$input-box-shadow-focus: rgba(102, 175, 233, 0.6);
-$input-color-placeholder: $gray-1 !default;
-$input-label-bg: $gray-blue;
-$input-label-border-color: $dark-3;
-$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-4;
-$typeahead-selected-color: $yellow;
-
-// Dropdowns
-// -------------------------
-$dropdownBackground: $dark-3;
-$dropdownBorder: rgba(0, 0, 0, 0.2);
-$dropdownDividerTop: transparent;
-$dropdownDividerBottom: #444;
-
-$dropdownLinkColor: $text-color;
-$dropdownLinkColorHover: $white;
-$dropdownLinkColorActive: $white;
-
-$dropdownLinkBackgroundHover: $dark-4;
-
-// Horizontal forms & lists
-// -------------------------
-$horizontalComponentOffset: 180px;
-
-// Navbar
-// -------------------------
-$navbarHeight: 55px;
-
-$navbarBackground: $panel-bg;
-$navbarBorder: 1px solid $dark-3;
-$navbarShadow: 0 0 20px black;
-
-$navbarLinkColor: $gray-4;
-
-$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-2;
-$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-2;
-$menu-dropdown-shadow: 5px 5px 20px -5px $black;
-
-// Tabs
-// -------------------------
-$tab-border-color: $dark-4;
-
-// Toolbar
-$toolbar-bg: $input-black;
-
-// Form states and alerts
-// -------------------------
-$warning-text-color: $warn;
-$error-text-color: #e84d4d;
-$success-text-color: #12d95a;
-$info-text-color: $blue-dark;
-
-$alert-error-bg: linear-gradient(90deg, #d44939, #e0603d);
-$alert-success-bg: linear-gradient(90deg, #3aa655, #47b274);
-$alert-warning-bg: linear-gradient(90deg, #d44939, #e0603d);
-$alert-info-bg: linear-gradient(100deg, #1a4552, #00374a);
-
-// popover
-$popover-bg: $page-bg;
-$popover-color: $text-color;
-$popover-border-color: $dark-4;
-$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: darken($blue, 12%);
-
-// 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-2;
-$diff-label-fg: $white;
-
-$diff-group-bg: $dark-4;
-$diff-arrow-color: $white;
-
-$diff-json-bg: $dark-4;
-$diff-json-fg: $gray-5;
-
-$diff-json-added: #457740;
-$diff-json-deleted: #a04338;
-
-$diff-json-old: #a04338;
-$diff-json-new: #457740;
-
-$diff-json-changed-fg: $gray-5;
-$diff-json-changed-num: $text-color;
-
-$diff-json-icon: $gray-7;
-
-//Submenu
-$variable-option-bg: $blue-dark;
-
-//Switch Slider
-// -------------------------
-$switch-bg: $input-bg;
-$switch-slider-color: $dark-2;
-$switch-slider-off-bg: $gray-1;
-$switch-slider-on-bg: linear-gradient(90deg, $orange, $red);
-$switch-slider-shadow: 0 0 3px black;
-
-//Checkbox
-// -------------------------
-$checkbox-bg: $dark-1;
-$checkbox-border: 1px solid $gray-1;
-$checkbox-checked-bg: linear-gradient(0deg, $orange, $red);
-$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-5;
-$panel-editor-viz-item-border: 1px solid $dark-5;
-$panel-editor-viz-item-shadow-hover: 0 0 4px $blue;
-$panel-editor-viz-item-border-hover: 1px solid $blue;
-$panel-editor-viz-item-bg: $input-black;
-$panel-editor-tabs-line-color: #e3e3e3;
-$panel-editor-viz-item-bg-hover: darken($blue, 47%);
-
-$panel-options-group-border: none;
-$panel-options-group-header-bg: $gray-blue;
-
-$panel-grid-placeholder-bg: darken($blue, 47%);
-$panel-grid-placeholder-shadow: 0 0 4px $blue;
-
-// logs
-$logs-color-unkown: $gray-2;
-
-// toggle-group
-$button-toggle-group-btn-active-bg: linear-gradient(90deg, $orange, $red);
-$button-toggle-group-btn-active-shadow: inset 0 0 4px $black;
-$button-toggle-group-btn-seperator-border: 1px solid $page-bg;
-
-$vertical-resize-handle-bg: $dark-5;
-$vertical-resize-handle-dots: $gray-1;
+
+  // Global values
+  // --------------------------------------------------
+
+  $theme-name: dark;
+
+  // Grays
+  // -------------------------
+  $black: #000;
+  $dark-1: #141414;
+  $dark-2: #1f1f20;
+  $dark-3: #262628;
+  $dark-4: #333333;
+  $dark-5: #444444;
+  $gray-1: #555555;
+  $gray-2: #8e8e8e;
+  $gray-3: #b3b3b3;
+  $gray-4: #d8d9da;
+  $gray-5: #ececec;
+  $gray-7: #fbfbfb;
+
+  $gray-blue: #212327;
+  $input-black: #09090b;
+
+  $white: #fff;
+
+  // Accent colors
+  // -------------------------
+  $blue: #ff0000;
+  $blue-dark: #005f81;
+  $green: #299c46;
+  $red: #d44a3a;
+  $yellow: #ecbb13;
+  $purple: #9933cc;
+  $variable: #32d1df;
+  $orange: #eb7b18;
+
+  $brand-primary: $orange;
+  $brand-success: $green;
+  $brand-warning: $brand-primary;
+  $brand-danger: $red;
+
+  $query-red: #e24d42;
+  $query-green: #74e680;
+  $query-purple: #fe85fc;
+  $query-keyword: #66d9ef;
+  $query-orange: $orange;
+
+  // Status colors
+  // -------------------------
+  $online: #10a345;
+  $warn: #f79520;
+  $critical: #ed2e18;
+
+  // Scaffolding
+  // -------------------------
+  $body-bg: rgb(23, 24, 25);
+  $page-bg: rgb(22, 23, 25);
+
+  $body-color: $gray-4;
+  $text-color: $gray-4;
+  $text-color-strong: $white;
+  $text-color-weak: $gray-2;
+  $text-color-faint: $dark-5;
+  $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, #222426 10px, rgb(22, 23, 25) 100px);
+  $edit-gradient: linear-gradient(180deg, rgb(22, 23, 25) 50%, #090909);
+
+  // Links
+  // -------------------------
+  $link-color: darken($white, 11%);
+  $link-color-disabled: darken($link-color, 30%);
+  $link-hover-color: $white;
+  $external-link-color: $blue;
+
+  // Typography
+  // -------------------------
+  $headings-color: darken($white, 11%);
+  $abbr-border-color: $gray-3 !default;
+  $text-muted: $text-color-weak;
+
+  $hr-border-color: $dark-4;
+
+  // Panel
+  // -------------------------
+  $panel-bg: #212124;
+  $panel-border: solid 1px $dark-1;
+  $panel-header-hover-bg: $dark-4;
+  $panel-corner: $panel-bg;
+
+  // page header
+  $page-header-bg: linear-gradient(90deg, #292a2d, black);
+  $page-header-shadow: inset 0px -4px 14px $dark-2;
+  $page-header-border-color: $dark-4;
+
+  $divider-border-color: $gray-1;
+
+  // Graphite Target Editor
+  $tight-form-bg: $dark-3;
+  $tight-form-func-bg: $dark-4;
+  $tight-form-func-highlight-bg: $dark-5;
+
+  $modal-backdrop-bg: #353c42;
+  $code-tag-bg: $dark-1;
+  $code-tag-border: $dark-4;
+
+  // cards
+  $card-background: linear-gradient(135deg, #2f2f32, #262628);
+  $card-background-hover: linear-gradient(135deg, #343436, #262628);
+  $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: lighten($gray-blue, 2%);
+  $list-item-link-color: $text-color;
+  $list-item-shadow: $card-shadow;
+
+  $empty-list-cta-bg: $gray-blue;
+
+  // Scrollbars
+  $scrollbarBackground: #404357;
+  $scrollbarBackground2: #3a3a3a;
+  $scrollbarBorder: black;
+
+  // Tables
+  // -------------------------
+  $table-bg: transparent; // overall background-color
+  $table-bg-accent: $dark-3; // for striping
+  $table-border: $dark-3; // table and cell border
+
+  $table-bg-odd: $dark-2;
+  $table-bg-hover: $dark-3;
+
+  // Buttons
+  // -------------------------
+  $btn-primary-bg: #ff6600;
+  $btn-primary-bg-hl: #bc3e06;
+
+  $btn-secondary-bg-hl: lighten($blue-dark, 5%);
+  $btn-secondary-bg: $blue-dark;
+
+  $btn-success-bg: $green;
+  $btn-success-bg-hl: darken($green, 6%);
+
+  $btn-warning-bg: $brand-warning;
+  $btn-warning-bg-hl: lighten($brand-warning, 8%);
+
+  $btn-danger-bg: $red;
+  $btn-danger-bg-hl: darken($red, 8%);
+
+  $btn-inverse-bg: $dark-3;
+  $btn-inverse-bg-hl: lighten($dark-3, 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-4;
+  $btn-divider-right: $dark-2;
+
+  $btn-drag-image: '../img/grab_dark.svg';
+
+  // Forms
+  // -------------------------
+  $input-bg: $input-black;
+  $input-bg-disabled: $dark-3;
+
+  $input-color: $gray-4;
+  $input-border-color: $dark-3;
+  $input-box-shadow: inset 1px 0px 0.3rem 0px rgba(150, 150, 150, 0.1);
+  $input-border-focus: $input-border-color;
+  $input-box-shadow-focus: rgba(102, 175, 233, 0.6);
+  $input-color-placeholder: $gray-1 !default;
+  $input-label-bg: $gray-blue;
+  $input-label-border-color: $dark-3;
+  $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-4;
+  $typeahead-selected-color: $yellow;
+
+  // Dropdowns
+  // -------------------------
+  $dropdownBackground: $dark-3;
+  $dropdownBorder: rgba(0, 0, 0, 0.2);
+  $dropdownDividerTop: transparent;
+  $dropdownDividerBottom: #444;
+
+  $dropdownLinkColor: $text-color;
+  $dropdownLinkColorHover: $white;
+  $dropdownLinkColorActive: $white;
+
+  $dropdownLinkBackgroundHover: $dark-4;
+
+  // Horizontal forms & lists
+  // -------------------------
+  $horizontalComponentOffset: 180px;
+
+  // Navbar
+  // -------------------------
+  $navbarHeight: 55px;
+
+  $navbarBackground: $panel-bg;
+  $navbarBorder: 1px solid $dark-3;
+  $navbarShadow: 0 0 20px black;
+
+  $navbarLinkColor: $gray-4;
+
+  $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-2;
+  $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-2;
+  $menu-dropdown-shadow: 5px 5px 20px -5px $black;
+
+  // Tabs
+  // -------------------------
+  $tab-border-color: $dark-4;
+
+  // Toolbar
+  $toolbar-bg: $input-black;
+
+  // Form states and alerts
+  // -------------------------
+  $warning-text-color: $warn;
+  $error-text-color: #e84d4d;
+  $success-text-color: #12d95a;
+  $info-text-color: $blue-dark;
+
+  $alert-error-bg: linear-gradient(90deg, #d44939, #e0603d);
+  $alert-success-bg: linear-gradient(90deg, #3aa655, #47b274);
+  $alert-warning-bg: linear-gradient(90deg, #d44939, #e0603d);
+  $alert-info-bg: linear-gradient(100deg, #1a4552, #00374a);
+
+  // popover
+  $popover-bg: $page-bg;
+  $popover-color: $text-color;
+  $popover-border-color: $dark-4;
+  $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: darken($blue, 12%);
+
+  // 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-2;
+  $diff-label-fg: $white;
+
+  $diff-group-bg: $dark-4;
+  $diff-arrow-color: $white;
+
+  $diff-json-bg: $dark-4;
+  $diff-json-fg: $gray-5;
+
+  $diff-json-added: #457740;
+  $diff-json-deleted: #a04338;
+
+  $diff-json-old: #a04338;
+  $diff-json-new: #457740;
+
+  $diff-json-changed-fg: $gray-5;
+  $diff-json-changed-num: $text-color;
+
+  $diff-json-icon: $gray-7;
+
+  //Submenu
+  $variable-option-bg: $blue-dark;
+
+  //Switch Slider
+  // -------------------------
+  $switch-bg: $input-bg;
+  $switch-slider-color: $dark-2;
+  $switch-slider-off-bg: $gray-1;
+  $switch-slider-on-bg: linear-gradient(90deg, $orange, $red);
+  $switch-slider-shadow: 0 0 3px black;
+
+  //Checkbox
+  // -------------------------
+  $checkbox-bg: $dark-1;
+  $checkbox-border: 1px solid $gray-1;
+  $checkbox-checked-bg: linear-gradient(0deg, $orange, $red);
+  $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-5;
+  $panel-editor-viz-item-border: 1px solid $dark-5;
+  $panel-editor-viz-item-shadow-hover: 0 0 4px $blue;
+  $panel-editor-viz-item-border-hover: 1px solid $blue;
+  $panel-editor-viz-item-bg: $input-black;
+  $panel-editor-tabs-line-color: #e3e3e3;
+  $panel-editor-viz-item-bg-hover: darken($blue, 47%);
+
+  $panel-options-group-border: none;
+  $panel-options-group-header-bg: $gray-blue;
+
+  $panel-grid-placeholder-bg: darken($blue, 47%);
+  $panel-grid-placeholder-shadow: 0 0 4px $blue;
+
+  // logs
+  $logs-color-unkown: $gray-2;
+
+  // toggle-group
+  $button-toggle-group-btn-active-bg: linear-gradient(90deg, $orange, $red);
+  $button-toggle-group-btn-active-shadow: inset 0 0 4px $black;
+  $button-toggle-group-btn-seperator-border: 1px solid $page-bg;
+
+  $vertical-resize-handle-bg: $dark-5;
+  $vertical-resize-handle-dots: $gray-1;
 $vertical-resize-handle-dots-hover: $gray-2;

scripts/cli/nodemon.json

@@ -0,0 +1,7 @@
+
+{
+  "watch": ["packages/grafana-ui/src/themes"],
+  "ext": "ts",
+  "ignore": ["src/**/*.spec.ts"],
+  "exec": "ts-node ./src/index.ts"
+}

scripts/cli/tsconfig.json

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

scripts/cli/watch.ts

@@ -0,0 +1,24 @@
+// import chokidar from 'chokidar';
+import darkTheme from '@grafana/ui/src/themes/dark';
+import { darkThemeVarsTemplate } from '@grafana/ui/src/themes/_variables.dark.scss.tmpl';
+import fs from 'fs';
+
+console.log(__dirname + '../../packages/grafana-ui/src/themes/dark.ts');
+
+const fileToWatch = [
+  __dirname + '/../../packages/grafana-ui/src/themes/dark.ts',
+  __dirname + '/../../packages/grafana-ui/src/themes/light.ts',
+];
+// const watchService = chokidar.watch(fileToWatch);
+console.log(`Watching for file changes on ${fileToWatch}`);
+
+// watchService.on('change', path => {
+
+const result = darkThemeVarsTemplate(darkTheme);
+console.log(result);
+
+fs.writeFile(__dirname + '/../../public/sass/_variables.dark.scss', result, e => {
+  console.log(e);
+});
+
+// });

yarn.lock

@@ -1492,6 +1492,14 @@
   resolved "https://registry.yarnpkg.com/@types/cheerio/-/cheerio-0.22.10.tgz#780d552467824be4a241b29510a7873a7432c4a6"
   integrity sha512-fOM/Jhv51iyugY7KOBZz2ThfT1gwvsGCfWxpLpZDgkGjpEO4Le9cld07OdskikLjDUQJ43dzDaVRSFwQlpdqVg==
 
+"@types/chokidar@^1.7.5":
+  version "1.7.5"
+  resolved "https://registry.yarnpkg.com/@types/chokidar/-/chokidar-1.7.5.tgz#1fa78c8803e035bed6d98e6949e514b133b0c9b6"
+  integrity sha512-PDkSRY7KltW3M60hSBlerxI8SFPXsO3AL/aRVsO4Kh9IHRW74Ih75gUuTd/aE4LSSFqypb10UIX3QzOJwBQMGQ==
+  dependencies:
+    "@types/events" "*"
+    "@types/node" "*"
+
 "@types/classnames@^2.2.6":
   version "2.2.7"
   resolved "https://registry.yarnpkg.com/@types/classnames/-/classnames-2.2.7.tgz#fb68cc9be8487e6ea5b13700e759bfbab7e0fefd"
@@ -1712,6 +1720,11 @@
     "@types/cheerio" "*"
     "@types/react" "*"
 
+"@types/events@*":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7"
+  integrity sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g==
+
 "@types/geojson@*":
   version "7946.0.5"
   resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.5.tgz#9aea839ea5af4b1bc079f1d9fa977d48665e02b0"
@@ -1737,10 +1750,10 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-10.12.18.tgz#1d3ca764718915584fcd9f6344621b7672665c67"
   integrity sha512-fh+pAqt4xRzPfqA6eh3Z2y6fyZavRIumvjhaCL753+TVkGKGhpPeyrJG2JftD0T9q4GF00KjefsQ+PQNDdWQaQ==
 
-"@types/node@^8.0.31":
-  version "8.10.39"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-8.10.39.tgz#e7e87ad00364dd7bc485c940926345b8ec1a26ca"
-  integrity sha512-rE7fktr02J8ybFf6eysife+WF+L4sAHWzw09DgdCebEu+qDwMvv4zl6Bc+825ttGZP73kCKxa3dhJOoGJ8+5mA==
+"@types/node@^10.12.24":
+  version "10.12.24"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-10.12.24.tgz#b13564af612a22a20b5d95ca40f1bffb3af315cf"
+  integrity sha512-GWWbvt+z9G5otRBW8rssOFgRY87J9N/qbhqfjMZ+gUuL6zoL+Hm6gP/8qQBG4jjimqdaNLCehcVapZ/Fs2WjCQ==
 
 "@types/prop-types@*":
   version "15.5.8"
@@ -2610,6 +2623,11 @@ are-we-there-yet@~1.1.2:
     delegates "^1.0.0"
     readable-stream "^2.0.6"
 
+arg@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/arg/-/arg-4.1.0.tgz#583c518199419e0037abb74062c37f8519e575f0"
+  integrity sha512-ZWc51jO3qegGkVh8Hwpv636EkbesNV5ZNQPCtRa+0qytRYPEs9IYT9qITY9buezqUH5uqyzlWLcufrzU2rffdg==
+
 argparse@^1.0.2, argparse@^1.0.7:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
@@ -2813,7 +2831,7 @@ astral-regex@^1.0.0:
   resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-1.0.0.tgz#6c8c3fb827dd43ee3918f27b82782ab7658a6fd9"
   integrity sha512-+Ryf6g3BKoRc7jfp7ad8tM4TtMiaWvbF/1/sQcZPkkS7ag3D5nMBCe2UfOTONtAkaG0tO0ij3C5Lwmf1EiyjHg==
 
-async-each@^1.0.0:
+async-each@^1.0.0, async-each@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
   integrity sha1-GdOGodntxufByF04iu28xW0zYC0=
@@ -4137,7 +4155,7 @@ braces@^1.8.2:
     preserve "^0.2.0"
     repeat-element "^1.1.2"
 
-braces@^2.3.0, braces@^2.3.1:
+braces@^2.3.0, braces@^2.3.1, braces@^2.3.2:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/braces/-/braces-2.3.2.tgz#5979fd3f14cd531565e5fa2df1abfff1dfaee729"
   integrity sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==
@@ -4686,6 +4704,25 @@ chokidar@^2.0.0, chokidar@^2.0.2, chokidar@^2.0.4:
   optionalDependencies:
     fsevents "^1.2.2"
 
+chokidar@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.0.tgz#5fcb70d0b28ebe0867eb0f09d5f6a08f29a1efa0"
+  integrity sha512-5t6G2SH8eO6lCvYOoUpaRnF5Qfd//gd7qJAkwRUw9qlGVkiQ13uwQngqbWWaurOsaAm9+kUGbITADxt6H0XFNQ==
+  dependencies:
+    anymatch "^2.0.0"
+    async-each "^1.0.1"
+    braces "^2.3.2"
+    glob-parent "^3.1.0"
+    inherits "^2.0.3"
+    is-binary-path "^1.0.0"
+    is-glob "^4.0.0"
+    normalize-path "^3.0.0"
+    path-is-absolute "^1.0.0"
+    readdirp "^2.2.1"
+    upath "^1.1.0"
+  optionalDependencies:
+    fsevents "^1.2.7"
+
 chownr@^1.0.1, chownr@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.1.tgz#54726b8b8fff4df053c42187e801fb4412df1494"
@@ -6330,7 +6367,7 @@ diff@^2.0.2:
   resolved "https://registry.yarnpkg.com/diff/-/diff-2.2.3.tgz#60eafd0d28ee906e4e8ff0a52c1229521033bf99"
   integrity sha1-YOr9DSjukG5Oj/ClLBIpUhAzv5k=
 
-diff@^3.2.0, diff@^3.5.0:
+diff@^3.1.0, diff@^3.2.0, diff@^3.5.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12"
   integrity sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==
@@ -7811,7 +7848,7 @@ fs.realpath@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
   integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
 
-fsevents@^1.2.2, fsevents@^1.2.3:
+fsevents@^1.2.2, fsevents@^1.2.3, fsevents@^1.2.7:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.2.7.tgz#4851b664a3783e52003b3c66eb0eee1074933aa4"
   integrity sha512-Pxm6sI2MeBD7RdD12RYsqaP0nMiwx8eZBXCa6z2L+mRHm2DYrOYwihmhjpkdjUHwQhslWQjRpEgNq4XvBmaAuw==
@@ -10935,6 +10972,11 @@ lodash@~4.3.0:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.3.0.tgz#efd9c4a6ec53f3b05412429915c3e4824e4d25a4"
   integrity sha1-79nEpuxT87BUEkKZFcPkgk5NJaQ=
 
+log-prefix@0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/log-prefix/-/log-prefix-0.1.1.tgz#3ec492138c8044c9f9732298492dca87850cac90"
+  integrity sha512-aP1Lst8OCdZKATqzXDN0JBissNVZuiKLyo6hOXDBxaQ1jHDsaxh2J1i5Pp0zMy6ayTKDWfUlLMXyLaQe1PJ48g==
+
 log-symbols@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-1.0.2.tgz#376ff7b58ea3086a0f09facc74617eca501e1a18"
@@ -10949,6 +10991,13 @@ log-symbols@^2.0.0, log-symbols@^2.1.0, log-symbols@^2.2.0:
   dependencies:
     chalk "^2.0.1"
 
+log-timestamp@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/log-timestamp/-/log-timestamp-0.2.1.tgz#02d4fd07550d6e3226d2741d89e7c693410276d6"
+  integrity sha512-a+hFCox7Up3gBrfREwXGjUEozdqjJrqpy82a41BUSEKlmvEZbsjR9vaYh/2PNFwydxX1r3zgfS/mAdNmRY/lKQ==
+  dependencies:
+    log-prefix "0.1.1"
+
 log-update@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/log-update/-/log-update-1.0.2.tgz#19929f64c4093d2d2e7075a1dad8af59c296b8d1"
@@ -11048,7 +11097,7 @@ make-dir@^1.0.0, make-dir@^1.1.0:
   dependencies:
     pify "^3.0.0"
 
-make-error@1.x, make-error@^1.3.5:
+make-error@1.x, make-error@^1.1.1, make-error@^1.3.5:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/make-error/-/make-error-1.3.5.tgz#efe4e81f6db28cadd605c70f29c831b58ef776c8"
   integrity sha512-c3sIjNUow0+8swNwVpqoH4YCShKNFkMaw6oH1mNS2haDZQqkeZFlHS3dhoeEbKKmJB4vXpJucU6oH75aDYeE9g==
@@ -12002,6 +12051,11 @@ normalize-path@^2.0.0, normalize-path@^2.0.1, normalize-path@^2.1.1:
   dependencies:
     remove-trailing-separator "^1.0.1"
 
+normalize-path@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
+  integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
+
 normalize-range@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
@@ -14466,7 +14520,7 @@ readdir-scoped-modules@^1.0.0:
     graceful-fs "^4.1.2"
     once "^1.3.0"
 
-readdirp@^2.0.0:
+readdirp@^2.0.0, readdirp@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-2.2.1.tgz#0e87622a3325aa33e892285caf8b4e846529a525"
   integrity sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==
@@ -16756,6 +16810,17 @@ ts-loader@^5.1.0:
     micromatch "^3.1.4"
     semver "^5.0.1"
 
+ts-node@^8.0.2:
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/ts-node/-/ts-node-8.0.2.tgz#9ecdf8d782a0ca4c80d1d641cbb236af4ac1b756"
+  integrity sha512-MosTrinKmaAcWgO8tqMjMJB22h+sp3Rd1i4fdoWY4mhBDekOwIAKI/bzmRi7IcbCmjquccYg2gcF6NBkLgr0Tw==
+  dependencies:
+    arg "^4.1.0"
+    diff "^3.1.0"
+    make-error "^1.1.1"
+    source-map-support "^0.5.6"
+    yn "^3.0.0"
+
 tslib@^1.8.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286"
@@ -17073,7 +17138,7 @@ unzip-response@^2.0.1:
   resolved "https://registry.yarnpkg.com/unzip-response/-/unzip-response-2.0.1.tgz#d2f0f737d16b0615e72a6935ed04214572d56f97"
   integrity sha1-0vD3N9FrBhXnKmk17QQhRXLVb5c=
 
-upath@^1.0.5:
+upath@^1.0.5, upath@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/upath/-/upath-1.1.0.tgz#35256597e46a581db4793d0ce47fa9aebfc9fabd"
   integrity sha512-bzpH/oBhoS/QI/YtbkqCg6VEiPYjSZtrHQM6/QnJS6OL9pKUFLqb3aFh4Scvwm45+7iAgiMkLhSbaZxUqmrprw==
@@ -18075,6 +18140,11 @@ yeoman-generator@^2.0.5:
     through2 "^2.0.0"
     yeoman-environment "^2.0.5"
 
+yn@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/yn/-/yn-3.0.0.tgz#0073c6b56e92aed652fbdfd62431f2d6b9a7a091"
+  integrity sha512-+Wo/p5VRfxUgBUGy2j/6KX2mj9AYJWOHuhMjMcbBFc3y54o9/4buK1ksBvuiK01C3kby8DH9lSmJdSxw+4G/2Q==
+
 zip-stream@^1.1.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/zip-stream/-/zip-stream-1.2.0.tgz#a8bc45f4c1b49699c6b90198baacaacdbcd4ba04"