dashboard label mark color borders

added borders for accesbility requirments from UX

Change-Id: I9c289f855479eeebbfbd89b002374ee168d44931

Author: MakeilaLun

packages/cmk-frontend/src/themes/facelift/scss/_dashboard.scss

@@ -877,29 +877,36 @@ div.servicestats {
         padding: 0;
         background-color: $font-color;
         border-radius: $theme-border-radius;
+        box-sizing: border-box;
 
         &.critical {
           background-color: $hexagon-critical-color;
+          border: 1px solid $label-box-critical-border-color;
         }
 
         &.unknown {
           background-color: $hexagon-unknown-color;
+          border: 1px solid $label-box-unknown-border-color;
         }
 
         &.warning {
           background-color: $color-state-1-background;
+          border: 1px solid $color-state-1-border;
         }
 
         &.downtime {
           background-color: $hexagon-downtime-color;
+          border: 1px solid $label-box-downtime-border-color;
         }
 
         &.host_down {
           background-color: $hexagon-host-down-color;
+          border: 1px solid $label-box-host-down-border-color;
         }
 
         &.ok {
           background-color: $success;
+          border: 1px solid $label-box-ok-border-color;
         }
       }
 

packages/cmk-frontend/src/themes/facelift/scss/_variables.scss

@@ -216,12 +216,18 @@ $ntop-protocol-painter-padding-top: null;
 // service problems graphs. Therefore, we should keep the colors in sync.
 // metrics counterpart: cmk_hosts_down, cmk_services_critical
 $hexagon-critical-color: $color-dark-red-50;
+$label-box-critical-border-color: $color-dark-red-50;
 // metrics counterpart: cmk_hosts_unreachable, cmk_services_unknown
 $hexagon-unknown-color: $color-orange-50;
+$label-box-unknown-border-color: $color-orange-70;
 // metrics counterpart: cmk_hosts_in_downtime, cmk_services_in_downtime
 $hexagon-downtime-color: $color-light-blue-50;
+$label-box-downtime-border-color: $color-light-blue-70;
 // metrics counterpart: cmk_services_on_down_hosts
 $hexagon-host-down-color: $color-dark-blue-50;
+$label-box-host-down-border-color: $color-dark-blue-50;
+
+$label-box-ok-border-color: $color-corporate-green-70;
 // =============================
 $hexagon-empty-color: $ux-theme-4;
 $hexagon-empty-fill-opacity: 0.4;

packages/cmk-frontend/src/themes/modern-dark/scss/_variables.scss

@@ -215,12 +215,18 @@ $ntop-protocol-painter-padding-top: 4px;
 // service problems graphs. Therefore, we should keep the colors in sync.
 // metrics counterpart: cmk_hosts_down, cmk_services_critical
 $hexagon-critical-color: $color-dark-red-50;
+$label-box-critical-border-color: $color-dark-red-40;
 // metrics counterpart: cmk_hosts_unreachable, cmk_services_unknown
 $hexagon-unknown-color: $color-orange-50;
+$label-box-unknown-border-color: $color-orange-50;
 // metrics counterpart: cmk_hosts_in_downtime, cmk_services_in_downtime
 $hexagon-downtime-color: $color-light-blue-50;
+$label-box-downtime-border-color: $color-light-blue-50;
 // metrics counterpart: cmk_services_on_down_hosts
-$hexagon-host-down-color: $color-dark-blue-40;
+$hexagon-host-down-color: $color-dark-blue-50;
+$label-box-host-down-border-color: $color-dark-blue-40;
+
+$label-box-ok-border-color: $color-corporate-green-50;
 // =============================
 $hexagon-empty-color: $white;
 $hexagon-empty-fill-opacity: 0.03;