From 7be18e1a084007d5e9b17889cd6ca47a79e2cedf Mon Sep 17 00:00:00 2001
From: ijin08 <ocarroll.patrick@gmail.com>
Date: Thu, 21 Feb 2019 15:05:17 +0100
Subject: [PATCH 1/2] changed some more color variables to use variables

---
 .../src/themes/_variables.dark.scss.tmpl.ts   | 46 +++++++++----------
 .../src/themes/_variables.light.scss.tmpl.ts  | 46 +++++++++----------
 packages/grafana-ui/src/themes/dark.ts        |  4 ++
 packages/grafana-ui/src/themes/light.ts       |  8 +++-
 packages/grafana-ui/src/types/theme.ts        |  4 ++
 public/sass/_variables.dark.generated.scss    | 38 +++++++--------
 public/sass/_variables.light.generated.scss   | 44 +++++++++---------
 7 files changed, 101 insertions(+), 89 deletions(-)

diff --git a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
index 3a2d6db458c..d6df6f51374 100644
--- a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
+++ b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
@@ -54,34 +54,34 @@ $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;
+$brand-primary: ${theme.colors.brandPrimary};
+$brand-success: ${theme.colors.brandSuccess};
+$brand-warning: ${theme.colors.brandWarning};
+$brand-danger: ${theme.colors.brandDanger};
 
-$query-red: $red-base;
-$query-green: #74e680;
-$query-purple: #fe85fc;
-$query-keyword: #66d9ef;
-$query-orange: $orange;
+$query-red: ${theme.colors.queryRed};
+$query-green: ${theme.colors.queryGreen};
+$query-purple: ${theme.colors.queryPurple};
+$query-orange: ${theme.colors.orange};
+$query-keyword: ${theme.colors.queryKeyword};
 
 // Status colors
 // -------------------------
-$online: $green-base;
-$warn: #f79520;
-$critical: $red-base;
+$online: ${theme.colors.online};
+$warn: ${theme.colors.warn};
+$critical: ${theme.colors.critical};
 
 // 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;
+$body-color: ${theme.colors.bodyColor};
+$text-color: ${theme.colors.textColor};
+$text-color-strong: ${theme.colors.textColorStrong};
+$text-color-weak: ${theme.colors.textColorWeak};
+$text-color-faint: ${theme.colors.textColorFaint};
+$text-color-emphasis: ${theme.colors.textColorEmphasis};
 
 $text-shadow-faint: 1px 1px 4px rgb(45, 45, 45);
 $textShadow: none;
@@ -99,14 +99,14 @@ $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;
+$link-color: ${theme.colors.linkColor};
+$link-color-disabled: ${theme.colors.linkColorDisabled};
+$link-hover-color: ${theme.colors.linkColorHover};
+$external-link-color: ${theme.colors.linkColorExternal};
 
 // Typography
 // -------------------------
-$headings-color: darken($white, 11%);
+$headings-color: ${theme.colors.headingColor};
 $abbr-border-color: $gray-2 !default;
 $text-muted: $text-color-weak;
 
diff --git a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
index 1b017b7eb0d..eb48ab5cc02 100644
--- a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
+++ b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
@@ -46,34 +46,34 @@ $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;
+$brand-primary: ${theme.colors.brandPrimary};
+$brand-success: ${theme.colors.brandSuccess};
+$brand-warning: ${theme.colors.brandWarning};
+$brand-danger: ${theme.colors.brandDanger};
 
-$query-red: $red-base;
-$query-green: $green-base;
-$query-purple: $purple;
-$query-orange: $orange;
-$query-keyword: $blue-base;
+$query-red: ${theme.colors.queryRed};
+$query-green: ${theme.colors.queryGreen};
+$query-purple: ${theme.colors.queryPurple};
+$query-orange: ${theme.colors.orange};
+$query-keyword: ${theme.colors.queryKeyword};
 
 // Status colors
 // -------------------------
-$online: $green-shade;
-$warn: #f79520;
-$critical: $red-shade;
+$online: ${theme.colors.online};
+$warn: ${theme.colors.warn};
+$critical: ${theme.colors.critical};
 
 // 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;
+$body-color: ${theme.colors.bodyColor};
+$text-color: ${theme.colors.textColor};
+$text-color-strong: ${theme.colors.textColorStrong};
+$text-color-weak: ${theme.colors.textColorWeak};
+$text-color-faint: ${theme.colors.textColorFaint};
+$text-color-emphasis: ${theme.colors.textColorEmphasis};
 
 $text-shadow-faint: none;
 
@@ -85,14 +85,14 @@ $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;
+$link-color: ${theme.colors.linkColor};
+$link-color-disabled: ${theme.colors.linkColorDisabled};
+$link-hover-color: ${theme.colors.linkColorHover};
+$external-link-color: ${theme.colors.linkColorExternal};
 
 // Typography
 // -------------------------
-$headings-color: $text-color;
+$headings-color: ${theme.colors.headingColor};
 $abbr-border-color: $gray-2 !default;
 $text-muted: $text-color-weak;
 
diff --git a/packages/grafana-ui/src/themes/dark.ts b/packages/grafana-ui/src/themes/dark.ts
index 7c3e81a7d35..3e8057a4acd 100644
--- a/packages/grafana-ui/src/themes/dark.ts
+++ b/packages/grafana-ui/src/themes/dark.ts
@@ -46,6 +46,10 @@ const darkTheme: GrafanaTheme = {
   colors: {
     ...basicColors,
     inputBlack: '#09090b',
+    brandPrimary: basicColors.orange,
+    brandSuccess: basicColors.greenBase,
+    brandWarning: basicColors.orange,
+    brandDanger: basicColors.redBase,
     queryRed: basicColors.redBase,
     queryGreen: '#74e680',
     queryPurple: '#fe85fc',
diff --git a/packages/grafana-ui/src/themes/light.ts b/packages/grafana-ui/src/themes/light.ts
index 7e8f6300d84..2461505d507 100644
--- a/packages/grafana-ui/src/themes/light.ts
+++ b/packages/grafana-ui/src/themes/light.ts
@@ -47,10 +47,14 @@ const lightTheme: GrafanaTheme = {
     ...basicColors,
     variable: basicColors.blue,
     inputBlack: '#09090b',
-    queryRed: basicColors.red,
+    brandPrimary: basicColors.orange,
+    brandSuccess: basicColors.greenBase,
+    brandWarning: basicColors.orange,
+    brandDanger: basicColors.redBase,
+    queryRed: basicColors.redBase,
     queryGreen: basicColors.greenBase,
     queryPurple: basicColors.purple,
-    queryKeyword: basicColors.blue,
+    queryKeyword: basicColors.blueBase,
     queryOrange: basicColors.orange,
     online: basicColors.greenShade,
     warn: '#f79520',
diff --git a/packages/grafana-ui/src/types/theme.ts b/packages/grafana-ui/src/types/theme.ts
index 01886afe3dc..f7adbf80247 100644
--- a/packages/grafana-ui/src/types/theme.ts
+++ b/packages/grafana-ui/src/types/theme.ts
@@ -113,6 +113,10 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
     queryPurple: string;
     queryKeyword: string;
     queryOrange: string;
+    brandPrimary: string;
+    brandSuccess: string;
+    brandWarning: string;
+    brandDanger: string;
 
     // Status colors
     online: string;
diff --git a/public/sass/_variables.dark.generated.scss b/public/sass/_variables.dark.generated.scss
index 3f1e2e4f314..a86134cf4bd 100644
--- a/public/sass/_variables.dark.generated.scss
+++ b/public/sass/_variables.dark.generated.scss
@@ -57,34 +57,34 @@ $orange: #eb7b18;
 $purple: #9933cc;
 $variable: #32d1df;
 
-$brand-primary: $orange;
-$brand-success: $green-base;
-$brand-warning: $brand-primary;
-$brand-danger: $red-base;
+$brand-primary: #eb7b18;
+$brand-success: #299c46;
+$brand-warning: #eb7b18;
+$brand-danger: #e02f44;
 
-$query-red: $red-base;
+$query-red: #e02f44;
 $query-green: #74e680;
 $query-purple: #fe85fc;
+$query-orange: #eb7b18;
 $query-keyword: #66d9ef;
-$query-orange: $orange;
 
 // Status colors
 // -------------------------
-$online: $green-base;
+$online: #299c46;
 $warn: #f79520;
-$critical: $red-base;
+$critical: #e02f44;
 
 // Scaffolding
 // -------------------------
 $body-bg: #161719;
 $page-bg: #161719;
 
-$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;
+$body-color: #d8d9da;
+$text-color: #d8d9da;
+$text-color-strong: #ffffff;
+$text-color-weak: #8e8e8e;
+$text-color-faint: #222426;
+$text-color-emphasis: #ececec;
 
 $text-shadow-faint: 1px 1px 4px rgb(45, 45, 45);
 $textShadow: none;
@@ -102,14 +102,14 @@ $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;
+$link-color: #e3e3e3;
+$link-color-disabled: #e3e3e3;
+$link-hover-color: #ffffff;
+$external-link-color: #33b5e5;
 
 // Typography
 // -------------------------
-$headings-color: darken($white, 11%);
+$headings-color: #e3e3e3;
 $abbr-border-color: $gray-2 !default;
 $text-muted: $text-color-weak;
 
diff --git a/public/sass/_variables.light.generated.scss b/public/sass/_variables.light.generated.scss
index 4aea0a4f993..4d1dd96bccf 100644
--- a/public/sass/_variables.light.generated.scss
+++ b/public/sass/_variables.light.generated.scss
@@ -49,34 +49,34 @@ $orange: #ff7941;
 $purple: #9954bb;
 $variable: #0083b3;
 
-$brand-primary: $orange;
-$brand-success: $green-base;
-$brand-warning: $orange;
-$brand-danger: $red-base;
+$brand-primary: #ff7941;
+$brand-success: #3eb15b;
+$brand-warning: #ff7941;
+$brand-danger: #e02f44;
 
-$query-red: $red-base;
-$query-green: $green-base;
-$query-purple: $purple;
-$query-orange: $orange;
-$query-keyword: $blue-base;
+$query-red: #e02f44;
+$query-green: #3eb15b;
+$query-purple: #9954bb;
+$query-orange: #ff7941;
+$query-keyword: #3274d9;
 
 // Status colors
 // -------------------------
-$online: $green-shade;
+$online: #369b4f;
 $warn: #f79520;
-$critical: $red-shade;
+$critical: #c4162a;
 
 // Scaffolding
 // -------------------------
 $body-bg: #f7f8fa;
 $page-bg: #f7f8fa;
 
-$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;
+$body-color: #52545c;
+$text-color: #52545c;
+$text-color-strong: #41444b;
+$text-color-weak: #767980;
+$text-color-faint: #35373f;
+$text-color-emphasis: #dde4ed;
 
 $text-shadow-faint: none;
 
@@ -88,14 +88,14 @@ $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;
+$link-color: #52545c;
+$link-color-disabled: #9ea0a9;
+$link-hover-color: #222326;
+$external-link-color: #5794f2;
 
 // Typography
 // -------------------------
-$headings-color: $text-color;
+$headings-color: #52545c;
 $abbr-border-color: $gray-2 !default;
 $text-muted: $text-color-weak;
 

From 05d5e796d76f5af73f7990f8571fe463a091acef Mon Sep 17 00:00:00 2001
From: ijin08 <ocarroll.patrick@gmail.com>
Date: Fri, 22 Feb 2019 08:33:07 +0100
Subject: [PATCH 2/2] removed color in color variables names

---
 .../src/themes/_variables.dark.scss.tmpl.ts   | 20 ++++++++--------
 .../src/themes/_variables.light.scss.tmpl.ts  | 20 ++++++++--------
 packages/grafana-ui/src/themes/dark.ts        | 20 ++++++++--------
 packages/grafana-ui/src/themes/light.ts       | 20 ++++++++--------
 packages/grafana-ui/src/types/theme.ts        | 24 +++++++++++--------
 5 files changed, 54 insertions(+), 50 deletions(-)

diff --git a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
index d6df6f51374..54c00f9237e 100644
--- a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
+++ b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
@@ -76,12 +76,12 @@ $critical: ${theme.colors.critical};
 $body-bg: ${theme.colors.bodyBg};
 $page-bg: ${theme.colors.pageBg};
 
-$body-color: ${theme.colors.bodyColor};
-$text-color: ${theme.colors.textColor};
-$text-color-strong: ${theme.colors.textColorStrong};
-$text-color-weak: ${theme.colors.textColorWeak};
-$text-color-faint: ${theme.colors.textColorFaint};
-$text-color-emphasis: ${theme.colors.textColorEmphasis};
+$body-color: ${theme.colors.body};
+$text-color: ${theme.colors.text};
+$text-color-strong: ${theme.colors.textStrong};
+$text-color-weak: ${theme.colors.textWeak};
+$text-color-faint: ${theme.colors.textFaint};
+$text-color-emphasis: ${theme.colors.textEmphasis};
 
 $text-shadow-faint: 1px 1px 4px rgb(45, 45, 45);
 $textShadow: none;
@@ -99,10 +99,10 @@ $edit-gradient: linear-gradient(180deg, $dark-2 50%, $input-black);
 
 // Links
 // -------------------------
-$link-color: ${theme.colors.linkColor};
-$link-color-disabled: ${theme.colors.linkColorDisabled};
-$link-hover-color: ${theme.colors.linkColorHover};
-$external-link-color: ${theme.colors.linkColorExternal};
+$link-color: ${theme.colors.link};
+$link-color-disabled: ${theme.colors.linkDisabled};
+$link-hover-color: ${theme.colors.linkHover};
+$external-link-color: ${theme.colors.linkExternal};
 
 // Typography
 // -------------------------
diff --git a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
index eb48ab5cc02..e90299f619c 100644
--- a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
+++ b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
@@ -68,12 +68,12 @@ $critical: ${theme.colors.critical};
 $body-bg: ${theme.colors.bodyBg};
 $page-bg: ${theme.colors.pageBg};
 
-$body-color: ${theme.colors.bodyColor};
-$text-color: ${theme.colors.textColor};
-$text-color-strong: ${theme.colors.textColorStrong};
-$text-color-weak: ${theme.colors.textColorWeak};
-$text-color-faint: ${theme.colors.textColorFaint};
-$text-color-emphasis: ${theme.colors.textColorEmphasis};
+$body-color: ${theme.colors.body};
+$text-color: ${theme.colors.text};
+$text-color-strong: ${theme.colors.textStrong};
+$text-color-weak: ${theme.colors.textWeak};
+$text-color-faint: ${theme.colors.textFaint};
+$text-color-emphasis: ${theme.colors.textEmphasis};
 
 $text-shadow-faint: none;
 
@@ -85,10 +85,10 @@ $edit-gradient: linear-gradient(-60deg, $gray-7, #f5f6f9 70%, $gray-7 98%);
 
 // Links
 // -------------------------
-$link-color: ${theme.colors.linkColor};
-$link-color-disabled: ${theme.colors.linkColorDisabled};
-$link-hover-color: ${theme.colors.linkColorHover};
-$external-link-color: ${theme.colors.linkColorExternal};
+$link-color: ${theme.colors.link};
+$link-color-disabled: ${theme.colors.linkDisabled};
+$link-hover-color: ${theme.colors.linkHover};
+$external-link-color: ${theme.colors.linkExternal};
 
 // Typography
 // -------------------------
diff --git a/packages/grafana-ui/src/themes/dark.ts b/packages/grafana-ui/src/themes/dark.ts
index 3e8057a4acd..1e424c97154 100644
--- a/packages/grafana-ui/src/themes/dark.ts
+++ b/packages/grafana-ui/src/themes/dark.ts
@@ -60,16 +60,16 @@ const darkTheme: GrafanaTheme = {
     critical: basicColors.redBase,
     bodyBg: basicColors.dark2,
     pageBg: basicColors.dark2,
-    bodyColor: basicColors.gray4,
-    textColor: basicColors.gray4,
-    textColorStrong: basicColors.white,
-    textColorWeak: basicColors.gray2,
-    textColorEmphasis: basicColors.gray5,
-    textColorFaint: basicColors.dark5,
-    linkColor: new tinycolor(basicColors.white).darken(11).toString(),
-    linkColorDisabled: new tinycolor(basicColors.white).darken(11).toString(),
-    linkColorHover: basicColors.white,
-    linkColorExternal: basicColors.blue,
+    body: basicColors.gray4,
+    text: basicColors.gray4,
+    textStrong: basicColors.white,
+    textWeak: basicColors.gray2,
+    textEmphasis: basicColors.gray5,
+    textFaint: basicColors.dark5,
+    link: new tinycolor(basicColors.white).darken(11).toString(),
+    linkDisabled: new tinycolor(basicColors.white).darken(11).toString(),
+    linkHover: basicColors.white,
+    linkExternal: basicColors.blue,
     headingColor: new tinycolor(basicColors.white).darken(11).toString(),
   },
   background: {
diff --git a/packages/grafana-ui/src/themes/light.ts b/packages/grafana-ui/src/themes/light.ts
index 2461505d507..a3994fc7458 100644
--- a/packages/grafana-ui/src/themes/light.ts
+++ b/packages/grafana-ui/src/themes/light.ts
@@ -61,16 +61,16 @@ const lightTheme: GrafanaTheme = {
     critical: basicColors.redShade,
     bodyBg: basicColors.gray7,
     pageBg: basicColors.gray7,
-    bodyColor: basicColors.gray1,
-    textColor: basicColors.gray1,
-    textColorStrong: basicColors.dark2,
-    textColorWeak: basicColors.gray2,
-    textColorEmphasis: basicColors.gray5,
-    textColorFaint: basicColors.dark4,
-    linkColor: basicColors.gray1,
-    linkColorDisabled: new tinycolor(basicColors.gray1).lighten(30).toString(),
-    linkColorHover: new tinycolor(basicColors.gray1).darken(20).toString(),
-    linkColorExternal: basicColors.blueLight,
+    body: basicColors.gray1,
+    text: basicColors.gray1,
+    textStrong: basicColors.dark2,
+    textWeak: basicColors.gray2,
+    textEmphasis: basicColors.gray5,
+    textFaint: basicColors.dark4,
+    link: basicColors.gray1,
+    linkDisabled: new tinycolor(basicColors.gray1).lighten(30).toString(),
+    linkHover: new tinycolor(basicColors.gray1).darken(20).toString(),
+    linkExternal: basicColors.blueLight,
     headingColor: basicColors.gray1,
   },
   background: {
diff --git a/packages/grafana-ui/src/types/theme.ts b/packages/grafana-ui/src/types/theme.ts
index f7adbf80247..30f1bf4685b 100644
--- a/packages/grafana-ui/src/types/theme.ts
+++ b/packages/grafana-ui/src/types/theme.ts
@@ -123,19 +123,23 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
     warn: string;
     critical: string;
 
+    // Link colors
+    link: string;
+    linkDisabled: string;
+    linkHover: string;
+    linkExternal: string;
+
+    // Text colors
+    body: string;
+    text: string;
+    textStrong: string;
+    textWeak: string;
+    textFaint: string;
+    textEmphasis: string;
+
     // TODO: move to background section
     bodyBg: string;
     pageBg: string;
-    bodyColor: string;
-    textColor: string;
-    textColorStrong: string;
-    textColorWeak: string;
-    textColorFaint: string;
-    textColorEmphasis: string;
-    linkColor: string;
-    linkColorDisabled: string;
-    linkColorHover: string;
-    linkColorExternal: string;
     headingColor: string;
   };
 }