removed color in color variables names

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

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

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: {

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: {

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;
   };
 }