Frontend: Fixes hard-coded font-weight properties to use variables (#18350)

packages/grafana-ui/src/components/Select/_Select.scss

@@ -180,7 +180,7 @@ $select-input-bg-disabled: $input-bg-disabled;
   flex-direction: column;
   flex-grow: 1;
   padding-right: 10px;
-  font-weight: 500;
+  font-weight: $font-weight-semi-bold;
 }
 
 .gf-form-select-box__desc-option__desc {

packages/grafana-ui/src/components/TimePicker/_TimePicker.scss

@@ -11,7 +11,7 @@
   color: $orange;
   font-size: 75%;
   padding: 3px;
-  font-weight: 500;
+  font-weight: $font-weight-semi-bold;
   margin-left: 4px;
   position: relative;
 }

packages/grafana-ui/src/components/Tooltip/_Tooltip.scss

@@ -28,7 +28,7 @@ $popper-margin-from-ref: 5px;
   box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
   padding: 6px 10px;
   color: $tooltipColor;
-  font-weight: 500;
+  font-weight: $font-weight-semi-bold;
 
   .popper__arrow {
     border-color: $tooltipBackground;

public/sass/components/_modals.scss

@@ -157,7 +157,7 @@
     margin-top: 5px;
     strong {
       color: $text-color-emphasis;
-      font-weight: 500;
+      font-weight: $font-weight-semi-bold;
     }
   }
 

public/sass/components/_panel_editor.scss

@@ -168,7 +168,7 @@
   flex-direction: column;
   align-self: center;
   height: 23px;
-  font-weight: 500;
+  font-weight: $font-weight-semi-bold;
 }
 
 .viz-picker__item-img {

public/sass/components/_panel_pluginlist.scss

@@ -53,7 +53,7 @@
 }
 
 .pluginlist-emphasis {
-  font-weight: 600;
+  font-weight: $font-weight-semi-bold;
 }
 
 .pluginlist-none-installed {

public/sass/components/_tooltip.scss

@@ -9,7 +9,7 @@
   display: block;
   visibility: visible;
   line-height: 1.4;
-  font-weight: 500;
+  font-weight: $font-weight-semi-bold;
   @include opacity(0);
 
   &.in {

public/sass/pages/_explore.scss

@@ -179,7 +179,7 @@
 }
 
 .explore-panel__header-label {
-  font-weight: 500;
+  font-weight: $font-weight-semi-bold;
   margin-right: $space-sm;
   font-size: $font-size-h6;
   box-shadow: $text-shadow-faint;
@@ -364,7 +364,7 @@
 .ReactTable .rt-thead.-header .rt-th {
   text-align: left;
   color: $blue;
-  font-weight: 500;
+  font-weight: $font-weight-semi-bold;
 }
 .ReactTable .rt-thead .rt-td,
 .ReactTable .rt-thead .rt-th {

public/sass/utils/_utils.scss

@@ -7,7 +7,7 @@
 }
 
 .emphasis-word {
-  font-weight: 500;
+  font-weight: $font-weight-semi-bold;
   color: $text-color-emphasis;
 }