Merge branch 'cli/watch-sass-var-new-colors'

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

@@ -12,36 +12,35 @@ $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;
-$green-base: #299c46;
-$green-shade: #23843b;
+$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: #000;
-$dark-1: #141414;
-$dark-2: #161719;
-$dark-3: #1f1f20;
-$dark-4: #212124;
-$dark-5: #222426;
-$dark-6: #262628;
-$dark-7: #292a2d;
-$dark-8: #2f2f32;
-$dark-9: #343436;
-$dark-10: #424345;
-$gray-1: #555555;
-$gray-2: #8e8e8e;
-$gray-3: #b3b3b3;
-$gray-4: #d8d9da;
-$gray-5: #ececec;
-
-$gray-blue: #212327;
+$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};
@@ -49,20 +48,19 @@ $white: ${theme.colors.white};
 // Accent colors
 // -------------------------
 $blue: ${theme.colors.blue};
-$green: #299c46;
-$red: $lobster-base;
-$yellow: #ecbb13;
-$purple: #9933cc;
-$variable: #32d1df;
-$orange: #eb7b18;
+$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: $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;
@@ -71,12 +69,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: ${theme.colors.bodyBg};
+$page-bg: ${theme.colors.pageBg};
 
 $body-color: $gray-4;
 $text-color: $gray-4;
@@ -104,7 +102,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
 // -------------------------
@@ -164,8 +162,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;
@@ -173,8 +171,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%);
@@ -199,7 +197,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;
@@ -271,12 +269,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;
@@ -305,7 +303,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;
@@ -336,8 +334,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;
@@ -371,18 +369,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;

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

@@ -12,70 +12,68 @@ $theme-name: light;
 
 // New Colors
 // -------------------------
-$sapphire-faint: #f5f9ff;
-$sapphire-light: #5794f2;
-$sapphire-base: #3274d9;
-$sapphire-shade: #1f60c4;
-$lobster-base: #e02f44;
-$lobster-shade: #c4162a;
-$green-base: #3eb15b;
-$green-shade: #369b4f;
-$purple-shade: #8f3bb8;
-$yellow-base: #f2cc0c;
+$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: #000;
-$dark-2: #1e2028;
-$dark-5: #41444b;
-$gray-1: #52545c;
-$gray-2: #767980;
-$gray-3: #acb6bf;
-$gray-4: #c7d0d9;
-$gray-5: #dde4ed;
-$gray-6: #e9edf2;
-$gray-7: #f7f8fa;
+$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};
-$green: #3aa655;
-$red: $lobster-base;
-$yellow: #ff851b;
-$orange: #ff7941;
-$purple: #9954bb;
-$variable: $purple-shade;
+$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;
+$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: ${theme.colors.bodyBg};
+$page-bg: ${theme.colors.pageBg};
 
 $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;
 
@@ -90,7 +88,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
 // -------------------------
@@ -153,14 +151,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%);
@@ -182,11 +180,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;
@@ -211,7 +209,7 @@ $dropdownBorder: $gray-4;
 $dropdownDividerTop: $gray-6;
 $dropdownDividerBottom: $white;
 
-$dropdownLinkColor: $dark-5;
+$dropdownLinkColor: $dark-2;
 $dropdownLinkColorHover: $link-color;
 $dropdownLinkColorActive: $link-color;
 
@@ -235,7 +233,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;
@@ -257,13 +255,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;
@@ -292,39 +290,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;
@@ -343,7 +341,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
 // -------------------------
@@ -358,18 +356,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;

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/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

@@ -78,6 +78,11 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
     dark3: string;
     dark4: string;
     dark5: string;
+    dark6: string;
+    dark7: string;
+    dark8: string;
+    dark9: string;
+    dark10: string;
     gray1: string;
     gray2: string;
     gray3: string;
@@ -90,12 +95,16 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
 
     // 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;

public/sass/_variables.dark.generated.scss

@@ -15,19 +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;
@@ -52,20 +51,19 @@ $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;
@@ -74,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;
@@ -107,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
 // -------------------------
@@ -167,8 +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;
@@ -176,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%);
@@ -202,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;
@@ -274,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;
@@ -308,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;
@@ -339,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;
@@ -374,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.light.generated.scss

@@ -15,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;
@@ -44,41 +43,40 @@ $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;
 
@@ -93,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
 // -------------------------
@@ -156,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%);
@@ -185,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;
@@ -214,7 +212,7 @@ $dropdownBorder: $gray-4;
 $dropdownDividerTop: $gray-6;
 $dropdownDividerBottom: $white;
 
-$dropdownLinkColor: $dark-5;
+$dropdownLinkColor: $dark-2;
 $dropdownLinkColorHover: $link-color;
 $dropdownLinkColorActive: $link-color;
 
@@ -238,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;
@@ -260,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;
@@ -295,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;
@@ -346,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
 // -------------------------
@@ -361,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/_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/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%);
   }
 }