diff --git a/ui/packages/consul-ui/app/components/breadcrumbs/skin.scss b/ui/packages/consul-ui/app/components/breadcrumbs/skin.scss
index 966cf886e..55a32e5c9 100644
--- a/ui/packages/consul-ui/app/components/breadcrumbs/skin.scss
+++ b/ui/packages/consul-ui/app/components/breadcrumbs/skin.scss
@@ -8,6 +8,7 @@
 }
 %crumbs::before {
   text-decoration: none;
+  background-color: var(--transparent);
 }
 %breadcrumb-milestone::before {
   @extend %with-chevron-left-mask, %as-pseudo;
diff --git a/ui/packages/consul-ui/app/components/csv-list/index.scss b/ui/packages/consul-ui/app/components/csv-list/index.scss
index 4c64a7c87..a5141fe18 100644
--- a/ui/packages/consul-ui/app/components/csv-list/index.scss
+++ b/ui/packages/consul-ui/app/components/csv-list/index.scss
@@ -14,4 +14,5 @@
   content: var(--csv-list-separator);
   vertical-align: initial;
   margin-right: 0.3em;
+  background-color: var(--transparent);
 }
diff --git a/ui/packages/consul-ui/app/components/empty-state/skin.scss b/ui/packages/consul-ui/app/components/empty-state/skin.scss
index 9e09d9368..22d9fcae4 100644
--- a/ui/packages/consul-ui/app/components/empty-state/skin.scss
+++ b/ui/packages/consul-ui/app/components/empty-state/skin.scss
@@ -23,7 +23,7 @@
 %empty-state[class*='status-'] header::before {
   @extend %as-pseudo;
 }
-%empty-state header::before {
+%empty-state[class*='status-'] header::before {
   @extend %with-alert-circle-outline-mask;
 }
 %empty-state.status-404 header::before {
diff --git a/ui/packages/consul-ui/app/components/main-nav-vertical/skin.scss b/ui/packages/consul-ui/app/components/main-nav-vertical/skin.scss
index e1930d8bf..abd048df9 100644
--- a/ui/packages/consul-ui/app/components/main-nav-vertical/skin.scss
+++ b/ui/packages/consul-ui/app/components/main-nav-vertical/skin.scss
@@ -47,6 +47,7 @@
   display: block;
   margin-top: -0.5rem;
   margin-bottom: 0.5rem;
+  background-color: var(--transparent);
 }
 %main-nav-vertical-popover-menu-trigger {
   border: var(--decor-border-100);
diff --git a/ui/packages/consul-ui/app/components/secret-button/layout.scss b/ui/packages/consul-ui/app/components/secret-button/layout.scss
index 1393e5efe..fe223180e 100644
--- a/ui/packages/consul-ui/app/components/secret-button/layout.scss
+++ b/ui/packages/consul-ui/app/components/secret-button/layout.scss
@@ -17,6 +17,7 @@
   display: inline;
   visibility: visible;
   content: '■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■';
+  background-color: var(--transparent);
 }
 %secret-button input:checked ~ em::before {
   display: none;
diff --git a/ui/packages/consul-ui/app/components/tooltip-panel/skin.scss b/ui/packages/consul-ui/app/components/tooltip-panel/skin.scss
index 619da5172..7e65c6292 100644
--- a/ui/packages/consul-ui/app/components/tooltip-panel/skin.scss
+++ b/ui/packages/consul-ui/app/components/tooltip-panel/skin.scss
@@ -6,7 +6,7 @@
   @extend %as-pseudo;
   width: 12px;
   height: 12px;
-  background: white;
+  background-color: rgb(var(--tone-gray-000));
   border-top: 1px solid rgb(var(--tone-gray-300));
   border-right: 1px solid rgb(var(--tone-gray-300));
   transform: rotate(-45deg);
diff --git a/ui/packages/consul-ui/app/components/tooltip/index.scss b/ui/packages/consul-ui/app/components/tooltip/index.scss
index 333faed35..1f8802a11 100644
--- a/ui/packages/consul-ui/app/components/tooltip/index.scss
+++ b/ui/packages/consul-ui/app/components/tooltip/index.scss
@@ -45,6 +45,7 @@
   &::before {
     border-color: var(--transparent);
     border-style: solid;
+    background-color: var(--transparent);
   }
 }
 
@@ -52,23 +53,27 @@
   &::before {
     border-width: var(--size) var(--size) 0;
     border-top-color: initial;
+    background-color: var(--transparent);
   }
 }
 %tooltip-tail-bottom {
   &::before {
     border-width: 0 var(--size) var(--size);
     border-bottom-color: initial;
+    background-color: var(--transparent);
   }
 }
 %tooltip-tail-left {
   &::before {
     border-width: var(--size) 0 var(--size) var(--size);
     border-left-color: initial;
+    background-color: var(--transparent);
   }
 }
 %tooltip-tail-right {
   &::before {
     border-width: var(--size) var(--size) var(--size) 0;
     border-right-color: initial;
+    background-color: var(--transparent);
   }
 }
diff --git a/ui/packages/consul-ui/app/styles/base/icons/base-keyframes.scss b/ui/packages/consul-ui/app/styles/base/icons/base-keyframes.scss
index dab94ecee..37d328afc 100644
--- a/ui/packages/consul-ui/app/styles/base/icons/base-keyframes.scss
+++ b/ui/packages/consul-ui/app/styles/base/icons/base-keyframes.scss
@@ -8,12 +8,12 @@
 *::before {
   animation-name: var(--icon-name-start, var(--icon-name)),
                   var(--icon-size-start, var(--icon-size, icon-000));
-  background-color: var(--icon-color-start, var(--icon-color));
+  background-color: var(--icon-color-start, var(--icon-color, currentColor));
 }
 *::after {
   animation-name: var(--icon-name-end, var(--icon-name)),
                   var(--icon-size-end, var(--icon-size, icon-000));
-  background-color: var(--icon-color-end, var(--icon-color));
+  background-color: var(--icon-color-end, var(--icon-color, currentColor));
 }
 
 [style*='--icon-color-start']::before {