Graph: Fixed series legend color for hidden series (#16438)

* replaced colors for headingColor, link and linkDisabled with colors from grayscale, replaced colors for linkDisabled and linkHover with colors from grayscale, changed color for sha-modal-in-text to text-color-empahises

* fixed snapshot

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

@@ -148,10 +148,10 @@ exports[`Render should render with base threshold 1`] = `
                               "grayBlue": "#212327",
                               "greenBase": "#299c46",
                               "greenShade": "#23843b",
-                              "headingColor": "#e3e3e3",
+                              "headingColor": "#d8d9da",
                               "inputBlack": "#09090b",
-                              "link": "#e3e3e3",
-                              "linkDisabled": "#e3e3e3",
+                              "link": "#d8d9da",
+                              "linkDisabled": "#8e8e8e",
                               "linkExternal": "#33b5e5",
                               "linkHover": "#ffffff",
                               "online": "#299c46",
@@ -311,10 +311,10 @@ exports[`Render should render with base threshold 1`] = `
                                     "grayBlue": "#212327",
                                     "greenBase": "#299c46",
                                     "greenShade": "#23843b",
-                                    "headingColor": "#e3e3e3",
+                                    "headingColor": "#d8d9da",
                                     "inputBlack": "#09090b",
-                                    "link": "#e3e3e3",
-                                    "linkDisabled": "#e3e3e3",
+                                    "link": "#d8d9da",
+                                    "linkDisabled": "#8e8e8e",
                                     "linkExternal": "#33b5e5",
                                     "linkHover": "#ffffff",
                                     "online": "#299c46",

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

@@ -1,4 +1,3 @@
-import tinycolor from 'tinycolor2';
 import defaultTheme from './default';
 import { GrafanaTheme, GrafanaThemeType } from '../types/theme';
 
@@ -66,11 +65,11 @@ const darkTheme: GrafanaTheme = {
     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(),
+    link: basicColors.gray4,
+    linkDisabled: basicColors.gray2,
     linkHover: basicColors.white,
     linkExternal: basicColors.blue,
-    headingColor: new tinycolor(basicColors.white).darken(11).toString(),
+    headingColor: basicColors.gray4,
   },
   background: {
     dropdown: basicColors.dark3,

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

@@ -1,4 +1,3 @@
-import tinycolor from 'tinycolor2';
 import defaultTheme from './default';
 import { GrafanaTheme, GrafanaThemeType } from '../types/theme';
 
@@ -68,8 +67,8 @@ const lightTheme: GrafanaTheme = {
     textEmphasis: basicColors.dark5,
     textFaint: basicColors.dark4,
     link: basicColors.gray1,
-    linkDisabled: new tinycolor(basicColors.gray1).lighten(30).toString(),
-    linkHover: new tinycolor(basicColors.gray1).darken(20).toString(),
+    linkDisabled: basicColors.gray3,
+    linkHover: basicColors.dark1,
     linkExternal: basicColors.blueLight,
     headingColor: basicColors.gray1,
   },

public/sass/_variables.dark.generated.scss

@@ -102,14 +102,14 @@ $edit-gradient: linear-gradient(180deg, $dark-2 50%, $input-black);
 
 // Links
 // -------------------------
-$link-color: #e3e3e3;
-$link-color-disabled: #e3e3e3;
+$link-color: #d8d9da;
+$link-color-disabled: #8e8e8e;
 $link-hover-color: #ffffff;
 $external-link-color: #33b5e5;
 
 // Typography
 // -------------------------
-$headings-color: #e3e3e3;
+$headings-color: #d8d9da;
 $abbr-border-color: $gray-2 !default;
 $text-muted: $text-color-weak;
 

public/sass/_variables.light.generated.scss

@@ -89,8 +89,8 @@ $edit-gradient: linear-gradient(-60deg, $gray-7, #f5f6f9 70%, $gray-7 98%);
 // Links
 // -------------------------
 $link-color: #52545c;
-$link-color-disabled: #9ea0a9;
-$link-hover-color: #222326;
+$link-color-disabled: #acb6bf;
+$link-hover-color: #1e2028;
 $external-link-color: #5794f2;
 
 // Typography

public/sass/components/_modals.scss

@@ -153,7 +153,7 @@
   .share-modal-info-text {
     margin-top: 5px;
     strong {
-      color: $headings-color;
+      color: $text-color-emphasis;
       font-weight: 500;
     }
   }