Integrate light theme's `gray` using a media query

modules/monitoring/public/css/module.less

@@ -286,7 +286,8 @@ div.box.ok_hosts div.box.entry, div.box.problem_hosts div.box.entry {
 
 div.box.monitoringfeatures {
   border: 1px solid @gray-lighter;
-  border-left: 15px solid @gray;
+  border-left: 15px solid;
+  .var(border-left-color, "gray");
 }
 
 div.box.monitoringfeatures div.box-separator {
@@ -303,7 +304,8 @@ div.box.monitoringfeatures a.feature-highlight {
 
 div.box.hostservicechecks {
   border: 1px solid @gray-lighter;
-  border-left: 15px solid @gray;
+  border-left: 15px solid;
+  .var(border-left-color, "gray");
 }
 
 div.box.hostservicechecks th {
@@ -316,7 +318,8 @@ div.box.process {
   width: 100%;
   max-width: 50em;
   border: 1px solid @gray-lighter;
-  border-left: 15px solid @gray;
+  border-left: 15px solid;
+  .var(border-left-color, "gray");
   margin-bottom: 1em;
   margin-right: 1em;
 }
@@ -374,7 +377,8 @@ div.box.features {
   width: 100%;
   max-width: 50em;
   border: 1px solid @gray-lighter;
-  border-left: 15px solid @gray;
+  border-left: 15px solid;
+  .var(border-left-color, "gray");
 }
 
 .features div.box.header {
@@ -400,7 +404,8 @@ div.box.stats {
   width: 100%;
   max-width: 50em;
   border: 1px solid @gray-lighter;
-  border-left: 15px solid @gray;
+  border-left: 15px solid;
+  .var(border-left-color, "gray");
   .var(color, text-color);
 }
 
@@ -414,7 +419,7 @@ div.box.stats {
 }
 
 .stats > table > thead {
-  color: @gray;
+  .var(color, "gray");
 }
 
 .stats > h2 {
@@ -440,7 +445,8 @@ div.timeline-legend {
   padding: 0.5em;
   margin-top: 2em;
   border: 1px solid @gray-lighter;
-  border-left: 15px solid @gray;
+  border-left: 15px solid;
+  .var(border-left-color, "gray");
 
   h2 {
     margin: 0;

public/css/icinga/badges.less

@@ -8,7 +8,7 @@
   .bg-stateful();
   .rounded-corners();
 
-  background-color: @gray;
+  .var(background-color, "gray");
   .var(color, badge-color);
   display: inline-block;
   font-family: @font-family-wide;

public/css/icinga/base.less

@@ -124,6 +124,8 @@
 
     --low-sat-blue: #DEECF1;
     --low-sat-blue-dark: #c0cccd;
+
+    --gray: #7F7F7F;
   }
 }
 

public/css/icinga/forms.less

@@ -295,13 +295,13 @@ form.icinga-form .form-controls {
   }
 
   input[type="submit"].btn-cancel {
-    .button(~"var(--body-bg-color, @{body-bg-color})", @gray, @black);
+    .button(~"var(--body-bg-color, @{body-bg-color})", ~"var(--gray, @{gray})", @black);
   }
 
   button.noscript-apply {
-    color: @gray;
+    .var(color, "gray");
     background-color: @gray-lightest;
-    border-color: @gray;
+    .var(border-color, "gray");
     border-width: 1px;
   }
 }
@@ -461,7 +461,7 @@ form.icinga-form {
   }
 
   .form-description {
-    background-color: fade(@gray, 5%);
+    .var(background-color, "gray");
   }
 
   .errors {

public/css/icinga/main.less

@@ -275,7 +275,7 @@ a:hover > .icon-cancel {
     margin-right: .25em;
 
     background: @gray-lighter;
-    color: @gray;
+    .var(color, "gray");
     border: none;
     -webkit-box-shadow: 0 0 1/3em rgba(0,0,0,.3);
     -moz-box-shadow: 0 0 1/3em rgba(0,0,0,.3);

public/css/icinga/mixins.less

@@ -6,12 +6,14 @@
           box-shadow: @arguments;
 }
 
-.button(@background-color: ~"var(--body-bg-color, @{body-bg-color})", @border-font-color: @icinga-blue, @color-dark: darken(@border-font-color, 10%)) {
+.button(@background-color: ~"var(--body-bg-color, @{body-bg-color})", @border-font-color: @icinga-blue, @color-dark: darken(@icinga-blue, 10%)) {
   .rounded-corners(3px);
 
   background-color: extract-variable-default(@background-color);
   background-color: @background-color;
+  border: extract-variable-default(2px solid @border-font-color);
   border: 2px solid @border-font-color;
+  color: extract-variable-default(@border-font-color);
   color: @border-font-color;
   cursor: pointer;
   line-height: normal;
@@ -25,6 +27,7 @@
   &:focus,
   &:hover,
   &.btn-primary {
+    background-color: extract-variable-default(@border-font-color);
     background-color: @border-font-color;
     color: extract-variable-default(@background-color);
     color: @background-color;

public/css/icinga/modal.less

@@ -64,7 +64,7 @@
     top: .75em;
     right: .75em;
 
-    background-color: @gray;
+    .var(background-color, "gray");
     border: none;
     border-radius: 50%;
     color: @text-color-inverted;

public/css/icinga/widgets.less

@@ -404,7 +404,7 @@ ul.tree li a {
   line-height: 2em;
   padding: 0 .5em;
   text-decoration: none;
-  color: @gray;
+  .var(color, "gray");
   background-repeat: no-repeat;
   background-position: 0.8em 0.4em;
 }