From 1f8960d74b6a1ac00e5e025601286c6664c17e44 Mon Sep 17 00:00:00 2001
From: John Cowen <johncowen@users.noreply.github.com>
Date: Fri, 7 Jan 2022 16:15:22 +0000
Subject: [PATCH] ui: Fix dark borders on certain visualizations (#11959)

---
 .changelog/11959.txt                                   |  3 +++
 .../app/components/consul/discovery-chain/skin.scss    | 10 ++++++++--
 .../app/components/topology-metrics/card/index.scss    |  5 ++++-
 .../app/components/topology-metrics/skin.scss          |  5 ++++-
 4 files changed, 19 insertions(+), 4 deletions(-)
 create mode 100644 .changelog/11959.txt

diff --git a/.changelog/11959.txt b/.changelog/11959.txt
new file mode 100644
index 0000000000..592a83667d
--- /dev/null
+++ b/.changelog/11959.txt
@@ -0,0 +1,3 @@
+```release-note:bug
+ui: Fixes a visual issue with some border colors
+```
diff --git a/ui/packages/consul-ui/app/components/consul/discovery-chain/skin.scss b/ui/packages/consul-ui/app/components/consul/discovery-chain/skin.scss
index 30055d3aa7..03c367537f 100644
--- a/ui/packages/consul-ui/app/components/consul/discovery-chain/skin.scss
+++ b/ui/packages/consul-ui/app/components/consul/discovery-chain/skin.scss
@@ -37,7 +37,10 @@
 }
 %chain-group {
   border-radius: var(--decor-radius-100);
-  border: 1px solid rgb(var(--tone-gray-200));
+  border: 1px solid;
+  /* TODO: If this color is combined with the above */
+  /* border property then the compressor removes the color */
+  border-color: rgb(var(--tone-gray-200));
   background-color: rgb(var(--tone-gray-100));
 
   pointer-events: none;
@@ -102,7 +105,10 @@
   background-color: rgb(var(--tone-gray-000));
 
   border-radius: var(--decor-radius-full);
-  border: 2px solid rgb(var(--tone-gray-400));
+  border: 2px solid;
+  /* TODO: If this color is combined with the above */
+  /* border property then the compressor removes the color */
+  border-color: rgb(var(--tone-gray-400));
 }
 %discovery-chain circle {
   stroke-width: 2;
diff --git a/ui/packages/consul-ui/app/components/topology-metrics/card/index.scss b/ui/packages/consul-ui/app/components/topology-metrics/card/index.scss
index 7a08492caf..72d5c4ee1c 100644
--- a/ui/packages/consul-ui/app/components/topology-metrics/card/index.scss
+++ b/ui/packages/consul-ui/app/components/topology-metrics/card/index.scss
@@ -9,7 +9,10 @@
   overflow: hidden;
   background-color: rgb(var(--tone-gray-000));
   border-radius: var(--decor-radius-100);
-  border: 1px solid rgb(var(--tone-gray-200));
+  border: 1px solid;
+  /* TODO: If this color is combined with the above */
+  /* border property then the compressor removes the color */
+  border-color: rgb(var(--tone-gray-200));
   p {
     padding: 12px 12px 0 12px;
     font-size: var(--typo-size-500);
diff --git a/ui/packages/consul-ui/app/components/topology-metrics/skin.scss b/ui/packages/consul-ui/app/components/topology-metrics/skin.scss
index 8b6fc0fda3..026db0f670 100644
--- a/ui/packages/consul-ui/app/components/topology-metrics/skin.scss
+++ b/ui/packages/consul-ui/app/components/topology-metrics/skin.scss
@@ -6,8 +6,11 @@
 #downstream-container,
 #metrics-container,
 #upstream-container {
-  border: 1px solid rgb(var(--tone-gray-200));
   border-radius: var(--decor-radius-100);
+  border: 1px solid;
+  /* TODO: If this color is combined with the above */
+  /* border property then the compressor removes the color */
+  border-color: rgb(var(--tone-gray-200));
 }
 #downstream-container,
 #upstream-container {