Merge pull request #4474 from grafana/worldping-adjustments

Added a new util class for highlight words, proper variables added fo…

public/sass/_variables.dark.scss

@@ -48,12 +48,14 @@ $critical:              #ed2e18;
 
 
 // Scaffolding
 // Scaffolding
 // -------------------------
 // -------------------------
-$body-bg:  			   rgb(20,20,20);
-$page-bg:  			   $dark-2;
-$body-color:   		 $gray-4;
-$text-color:   	   $gray-4;
-$text-color-strong: $white;
-$text-color-weak: $gray-2;
+$body-bg:  			   	rgb(20,20,20);
+$page-bg:  			   	$dark-2;
+$body-color:   		 	$gray-4;
+$text-color:   	   		$gray-4;
+$text-color-strong: 	$white;
+$text-color-weak: 		$gray-2;
+$text-color-emphasis: 	$gray-5;
+
 
 
 // gradients
 // 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: 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%);

public/sass/_variables.light.scss

@@ -54,12 +54,13 @@ $critical:              #EC2128;
 // Scaffolding
 // Scaffolding
 // -------------------------
 // -------------------------
 
 
-$body-bg:  		  $white;
-$page-bg:  		  $white;
-$body-color:    $gray-1;
-$text-color:    $gray-1;
-$text-color-strong: $white;
-$text-color-weak: $gray-1;
+$body-bg:  		  		$white;
+$page-bg:  		  		$white;
+$body-color:    		$gray-1;
+$text-color:    		$gray-1;
+$text-color-strong: 	$white;
+$text-color-weak: 		$gray-1;
+$text-color-emphasis: 	$dark-5;
 
 
 // gradients
 // gradients
 $brand-gradient: linear-gradient(to right, rgba(255,213,0,1.0) 0%, rgba(255,68,0,1.0) 99%, rgba(255,68,0,1.0) 100%);
 $brand-gradient: linear-gradient(to right, rgba(255,213,0,1.0) 0%, rgba(255,68,0,1.0) 99%, rgba(255,68,0,1.0) 100%);

public/sass/utils/_utils.scss

@@ -6,6 +6,11 @@
   color: $brand-primary;
   color: $brand-primary;
 }
 }
 
 
+.emphasis-word {
+  font-weight: 500;
+  color: $text-color-emphasis;
+}
+
 // Close icons
 // Close icons
 // --------------------------------------------------
 // --------------------------------------------------
 .close {
 .close {