Styles: fixed gradient in logo so it doesn't go outside the logo and get a…

Styles: fixed gradient in logo so it doesn't go outside the logo and get a defined start and end color, changed brand gradient to be the same as in logo, created new variable for vertical gradient (#18882)

Fixes #18856

packages/grafana-ui/src/components/ContextMenu/ContextMenu.tsx

@@ -125,7 +125,7 @@ const getContextMenuStyles = (theme: GrafanaTheme) => {
       cursor: pointer;
       &:hover {
         background: ${itemBgHover};
-        border-image: linear-gradient(rgba(255, 213, 0, 1) 0%, rgba(255, 68, 0, 1) 99%, rgba(255, 68, 0, 1) 100%);
+        border-image: linear-gradient(#f05a28 30%, #fbca0a 99%);
         border-image-slice: 1;
       }
     `,

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

@@ -88,13 +88,8 @@ $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%
-);
-
+$brand-gradient-horizontal: linear-gradient( to right, #F05A28 30%, #FBCA0A 99%);
+$brand-gradient-vertical: linear-gradient(#F05A28 30%, #FBCA0A 99%);
 $page-gradient: linear-gradient(180deg, $dark-5 10px, dark-2 100px);
 $edit-gradient: linear-gradient(180deg, $dark-2 50%, $input-black);
 

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

@@ -80,8 +80,8 @@ $text-color-emphasis: ${theme.colors.textEmphasis};
 $text-shadow-faint: none;
 
 // gradients
-$brand-gradient: linear-gradient(to right, rgba(255, 213, 0, 1) 0%, rgba(255, 68, 0, 1) 99%, rgba(255, 68, 0, 1) 100%);
-
+$brand-gradient-horizontal: linear-gradient( to right, #F05A28 30%, #FBCA0A 99%);
+$brand-gradient-vertical: linear-gradient(#F05A28 30%, #FBCA0A 99%);
 $page-gradient: linear-gradient(180deg, $white 10px, $gray-7 100px);
 $edit-gradient: linear-gradient(-60deg, $gray-7, #f5f6f9 70%, $gray-7 98%);
 

public/img/grafana_icon.svg

@@ -7,9 +7,9 @@
 </style>
 <g id="Layer_1_1_">
 </g>
-<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="175.5" y1="445.4948" x2="175.5" y2="114.0346">
-	<stop  offset="0" style="stop-color:#FFF100"/>
-	<stop  offset="1" style="stop-color:#F05A28"/>
+<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="175.5" y1="30%" x2="175.5" y2="99%">
+	<stop  offset="0" style="stop-color:#F05A28"/>
+	<stop  offset="1" style="stop-color:#FBCA0A"/>
 </linearGradient>
 <path class="st0" d="M342,161.2c-0.6-6.1-1.6-13.1-3.6-20.9c-2-7.7-5-16.2-9.4-25c-4.4-8.8-10.1-17.9-17.5-26.8
 	c-2.9-3.5-6.1-6.9-9.5-10.2c5.1-20.3-6.2-37.9-6.2-37.9c-19.5-1.2-31.9,6.1-36.5,9.4c-0.8-0.3-1.5-0.7-2.3-1

public/sass/_variables.dark.generated.scss

@@ -91,13 +91,8 @@ $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%
-);
-
+$brand-gradient-horizontal: linear-gradient(to right, #f05a28 30%, #fbca0a 99%);
+$brand-gradient-vertical: linear-gradient(#f05a28 30%, #fbca0a 99%);
 $page-gradient: linear-gradient(180deg, $dark-5 10px, dark-2 100px);
 $edit-gradient: linear-gradient(180deg, $dark-2 50%, $input-black);
 

public/sass/_variables.light.generated.scss

@@ -83,8 +83,8 @@ $text-color-emphasis: #41444b;
 $text-shadow-faint: none;
 
 // gradients
-$brand-gradient: linear-gradient(to right, rgba(255, 213, 0, 1) 0%, rgba(255, 68, 0, 1) 99%, rgba(255, 68, 0, 1) 100%);
-
+$brand-gradient-horizontal: linear-gradient(to right, #f05a28 30%, #fbca0a 99%);
+$brand-gradient-vertical: linear-gradient(#f05a28 30%, #fbca0a 99%);
 $page-gradient: linear-gradient(180deg, $white 10px, $gray-7 100px);
 $edit-gradient: linear-gradient(-60deg, $gray-7, #f5f6f9 70%, $gray-7 98%);
 

public/sass/components/_panel_gettingstarted.scss

@@ -96,7 +96,7 @@ $path-position: $marker-size-half - ($path-height / 2);
       .icon-gf {
         color: $brand-primary;
         -webkit-text-fill-color: transparent;
-        background: $brand-gradient;
+        background: $brand-gradient-horizontal;
         -webkit-background-clip: text;
         text-decoration: none;
       }

public/sass/components/_tabs.scss

@@ -50,7 +50,7 @@
       right: 0;
       height: 2px;
       top: 0;
-      background-image: linear-gradient(to right, #ffd500 0%, #ff4400 99%, #ff4400 100%);
+      background-image: $brand-gradient-horizontal;
     }
   }
 

public/sass/mixins/_mixins.scss

@@ -335,7 +335,7 @@
 }
 
 @mixin left-brand-border-gradient() {
-  border-image: linear-gradient(rgba(255, 213, 0, 1) 0%, rgba(255, 68, 0, 1) 99%, rgba(255, 68, 0, 1) 100%);
+  border-image: $brand-gradient-vertical;
   border-image-slice: 1;
   border-style: solid;
   border-top: 0;
@@ -345,7 +345,7 @@
 }
 
 @mixin brand-bottom-border() {
-  border-image: $brand-gradient;
+  border-image: $brand-gradient-horizontal;
   border-image-slice: 1;
   border-style: solid;
   border-top: 0;