ui: Icon related fixups (#13183)

* ui: Use new icon-size and icon-color for popover-menus

* Remove the default currentColor plus add some more defaults

* Undo transparency overwrites now we don't need them

* Fixup discochain icons

* Undo a default icon rule for vert align

* Fixup expanded icon for meatball popovers

* Fixup intention permission labels/badges/icons

* Remove different res icon

* Remove icon resolutions

.changelog/13183.txt

@@ -0,0 +1,3 @@
+```release-note:bug
+ui: Re-instate '...' icon for row actions
+```

ui/packages/consul-ui/app/components/breadcrumbs/skin.scss

@@ -8,7 +8,6 @@
 }
 %crumbs::before {
   text-decoration: none;
-  background-color: var(--transparent);
 }
 %breadcrumb-milestone::before {
   @extend %with-chevron-left-mask, %as-pseudo;

ui/packages/consul-ui/app/components/consul/discovery-chain/layout.scss

@@ -118,11 +118,8 @@
   flex-wrap: wrap;
   list-style-type: none;
 }
-%resolver-card ol li:not(:last-child)::after {
+%resolver-card ol {
-  display: inline-block;
+  @extend %csv-list;
-  content: ',';
-  margin-right: 0.2em;
-  margin-left: -0.3em;
 }
 /**/
 %with-chain-outlet {

ui/packages/consul-ui/app/components/consul/discovery-chain/resolver-card/index.hbs

@@ -16,9 +16,7 @@
         <dd>
           <ol>
   {{#each @item.Failover.Targets as |item|}}
-            <li>
+            <li><span>{{item}}</span></li>
-              <span>{{item}}</span>
-            </li>
   {{/each}}
           </ol>
         </dd>

ui/packages/consul-ui/app/components/consul/discovery-chain/skin.scss

@@ -91,13 +91,16 @@
 }
 %resolver-card dt {
   font-size: 0;
-  background-size: 80% 80%;
 }
-%resolver-card dl.failover dt {
+%resolver-card dt::before {
-  @extend %with-cloud-cross-icon;
+  content: '';
+  --icon-size: icon-999;
 }
-%resolver-card dl.redirect dt {
+%resolver-card dl.failover dt::before {
-  @extend %with-redirect-icon;
+  --icon-name: icon-cloud-cross;
+}
+%resolver-card dl.redirect dt::before {
+  --icon-name: icon-redirect;
 }
 /**/
 %with-chain-outlet::before {

ui/packages/consul-ui/app/components/csv-list/index.scss

@@ -14,5 +14,4 @@
   content: var(--csv-list-separator);
   vertical-align: initial;
   margin-right: 0.3em;
-  background-color: var(--transparent);
 }

ui/packages/consul-ui/app/components/hashicorp-consul/index.scss

@@ -3,6 +3,10 @@
     @extend %main-nav-vertical-hoisted;
     left: 100px;
   }
+  nav .dcs li.is-primary span,
+  nav .dcs li.is-local span {
+    @extend %menu-panel-badge;
+  }
   nav li.partitions,
   nav li.nspaces {
     @extend %main-nav-vertical-popover-menu;

ui/packages/consul-ui/app/components/main-nav-vertical/skin.scss

@@ -47,7 +47,6 @@
   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);

ui/packages/consul-ui/app/components/menu-panel/index.scss

@@ -11,9 +11,6 @@
 %menu-panel {
   @extend %panel;
 }
-%menu-panel-item span {
-  @extend %menu-panel-badge;
-}
 %menu-panel [role='separator'] {
   @extend %panel-separator;
   @extend %menu-panel-separator;

ui/packages/consul-ui/app/components/more-popover-menu/index.scss

@@ -21,10 +21,10 @@
   font-size: 0;
 }
 %more-popover-menu-trigger > *::after {
-  @extend %with-more-horizontal-mask, %as-pseudo;
+  --icon-name: icon-more-horizontal;
-  background-color: rgb(var(--tone-gray-900));
+  --icon-color: rgb(var(--tone-gray-900));
-  width: 16px;
+  --icon-size: icon-300;
-  height: 16px;
+  content: '';
   position: absolute;
   top: 50%;
   left: 50%;

ui/packages/consul-ui/app/components/pill/index.scss

@@ -10,9 +10,7 @@ span.policy-node-identity,
 }
 span.policy-service-identity::before,
 span.policy-node-identity::before {
-  width: auto;
+  vertical-align: unset;
-  align-self: start;
-  font-size: inherit;
 }
 span.policy-node-identity::before {
   content: 'Node Identity: ';

ui/packages/consul-ui/app/components/secret-button/layout.scss

@@ -17,7 +17,6 @@
   display: inline;
   visibility: visible;
   content: '■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■';
-  background-color: var(--transparent);
 }
 %secret-button input:checked ~ em::before {
   display: none;

ui/packages/consul-ui/app/components/tooltip/index.scss

@@ -45,7 +45,6 @@
   &::before {
     border-color: var(--transparent);
     border-style: solid;
-    background-color: var(--transparent);
   }
 }
 
@@ -53,27 +52,23 @@
   &::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);
   }
 }

ui/packages/consul-ui/app/styles/base/icons/base-keyframes.scss

@@ -1,19 +1,24 @@
 *::before, *::after {
   display: inline-block;
-  animation-play-state: paused;
-  animation-fill-mode: forwards;
-  animation-iteration-count: var(--icon-resolution, 1);
   vertical-align: text-top;
+
+  background-repeat: no-repeat;
+  background-position: center;
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-position: center;
+  -webkit-mask-position: center;
+
 }
 *::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, currentColor));
+  background-color: var(--icon-color-start, var(--icon-color));
 }
 *::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, currentColor));
+  background-color: var(--icon-color-end, var(--icon-color));
 }
 
 [style*='--icon-color-start']::before {
@@ -87,3 +92,9 @@
     height: 1.750rem; /* 28px */
   }
 }
+@keyframes icon-999 {
+  100% {
+    width: 100%;
+    height: 100%;
+  }
+}

ui/packages/consul-ui/app/styles/base/icons/icons/activity/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-activity {
-  50% {
-
-    background-color: var(--icon-color, var(--color-activity-500, currentColor));
-    -webkit-mask-image: var(--icon-activity-24);
-    mask-image: var(--icon-activity-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-activity-500, currentColor));
     -webkit-mask-image: var(--icon-activity-16);
     mask-image: var(--icon-activity-16);
+    background-color: var(--icon-color, var(--color-activity-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle-fill/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-alert-circle-fill {
-  50% {
-
-    background-color: var(--icon-color, var(--color-alert-circle-fill-500, currentColor));
-    -webkit-mask-image: var(--icon-alert-circle-fill-24);
-    mask-image: var(--icon-alert-circle-fill-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-alert-circle-fill-500, currentColor));
     -webkit-mask-image: var(--icon-alert-circle-fill-16);
     mask-image: var(--icon-alert-circle-fill-16);
+    background-color: var(--icon-color, var(--color-alert-circle-fill-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle-outline/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-alert-circle-outline {
-  50% {
-
-    background-color: var(--icon-color, var(--color-alert-circle-outline-500, currentColor));
-    -webkit-mask-image: var(--icon-alert-circle-24);
-    mask-image: var(--icon-alert-circle-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-alert-circle-outline-500, currentColor));
     -webkit-mask-image: var(--icon-alert-circle-16);
     mask-image: var(--icon-alert-circle-16);
+    background-color: var(--icon-color, var(--color-alert-circle-outline-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/alert-circle/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-alert-circle {
-  50% {
-
-    background-color: var(--icon-color, var(--color-alert-circle-500, currentColor));
-    -webkit-mask-image: var(--icon-alert-circle-24);
-    mask-image: var(--icon-alert-circle-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-alert-circle-500, currentColor));
     -webkit-mask-image: var(--icon-alert-circle-16);
     mask-image: var(--icon-alert-circle-16);
+    background-color: var(--icon-color, var(--color-alert-circle-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/alert-octagon-fill/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-alert-octagon-fill {
-  50% {
-
-    background-color: var(--icon-color, var(--color-alert-octagon-fill-500, currentColor));
-    -webkit-mask-image: var(--icon-alert-octagon-fill-24);
-    mask-image: var(--icon-alert-octagon-fill-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-alert-octagon-fill-500, currentColor));
     -webkit-mask-image: var(--icon-alert-octagon-fill-16);
     mask-image: var(--icon-alert-octagon-fill-16);
+    background-color: var(--icon-color, var(--color-alert-octagon-fill-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/alert-octagon/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-alert-octagon {
-  50% {
-
-    background-color: var(--icon-color, var(--color-alert-octagon-500, currentColor));
-    -webkit-mask-image: var(--icon-alert-octagon-24);
-    mask-image: var(--icon-alert-octagon-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-alert-octagon-500, currentColor));
     -webkit-mask-image: var(--icon-alert-octagon-16);
     mask-image: var(--icon-alert-octagon-16);
+    background-color: var(--icon-color, var(--color-alert-octagon-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/alert-triangle-fill/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-alert-triangle-fill {
-  50% {
-
-    background-color: var(--icon-color, var(--color-alert-triangle-fill-500, currentColor));
-    -webkit-mask-image: var(--icon-alert-triangle-fill-24);
-    mask-image: var(--icon-alert-triangle-fill-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-alert-triangle-fill-500, currentColor));
     -webkit-mask-image: var(--icon-alert-triangle-fill-16);
     mask-image: var(--icon-alert-triangle-fill-16);
+    background-color: var(--icon-color, var(--color-alert-triangle-fill-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/alert-triangle/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-alert-triangle {
-  50% {
-
-    background-color: var(--icon-color, var(--color-alert-triangle-500, currentColor));
-    -webkit-mask-image: var(--icon-alert-triangle-24);
-    mask-image: var(--icon-alert-triangle-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-alert-triangle-500, currentColor));
     -webkit-mask-image: var(--icon-alert-triangle-16);
     mask-image: var(--icon-alert-triangle-16);
+    background-color: var(--icon-color, var(--color-alert-triangle-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/alibaba-color/keyframes.scss

@@ -1,8 +1,4 @@
 @keyframes icon-alibaba-color {
-  50% {
-    background-image: var(--icon-alibaba-color-24);
-  }
-
   100% {
     background-image: var(--icon-alibaba-color-16);
   }

ui/packages/consul-ui/app/styles/base/icons/icons/alibaba/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-alibaba {
-  50% {
-
-    background-color: var(--icon-color, var(--color-alibaba-500, currentColor));
-    -webkit-mask-image: var(--icon-alibaba-color-24);
-    mask-image: var(--icon-alibaba-color-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-alibaba-500, currentColor));
     -webkit-mask-image: var(--icon-alibaba-color-16);
     mask-image: var(--icon-alibaba-color-16);
+    background-color: var(--icon-color, var(--color-alibaba-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/align-center/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-align-center {
-  50% {
-
-    background-color: var(--icon-color, var(--color-align-center-500, currentColor));
-    -webkit-mask-image: var(--icon-align-center-24);
-    mask-image: var(--icon-align-center-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-align-center-500, currentColor));
     -webkit-mask-image: var(--icon-align-center-16);
     mask-image: var(--icon-align-center-16);
+    background-color: var(--icon-color, var(--color-align-center-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/align-justify/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-align-justify {
-  50% {
-
-    background-color: var(--icon-color, var(--color-align-justify-500, currentColor));
-    -webkit-mask-image: var(--icon-align-justify-24);
-    mask-image: var(--icon-align-justify-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-align-justify-500, currentColor));
     -webkit-mask-image: var(--icon-align-justify-16);
     mask-image: var(--icon-align-justify-16);
+    background-color: var(--icon-color, var(--color-align-justify-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/align-left/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-align-left {
-  50% {
-
-    background-color: var(--icon-color, var(--color-align-left-500, currentColor));
-    -webkit-mask-image: var(--icon-align-left-24);
-    mask-image: var(--icon-align-left-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-align-left-500, currentColor));
     -webkit-mask-image: var(--icon-align-left-16);
     mask-image: var(--icon-align-left-16);
+    background-color: var(--icon-color, var(--color-align-left-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/align-right/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-align-right {
-  50% {
-
-    background-color: var(--icon-color, var(--color-align-right-500, currentColor));
-    -webkit-mask-image: var(--icon-align-right-24);
-    mask-image: var(--icon-align-right-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-align-right-500, currentColor));
     -webkit-mask-image: var(--icon-align-right-16);
     mask-image: var(--icon-align-right-16);
+    background-color: var(--icon-color, var(--color-align-right-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/amazon-eks-color/keyframes.scss

@@ -1,8 +1,4 @@
 @keyframes icon-amazon-eks-color {
-  50% {
-    background-image: var(--icon-amazon-eks-color-24);
-  }
-
   100% {
     background-image: var(--icon-amazon-eks-color-16);
   }

ui/packages/consul-ui/app/styles/base/icons/icons/amazon-eks/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-amazon-eks {
-  50% {
-
-    background-color: var(--icon-color, var(--color-amazon-eks-500, currentColor));
-    -webkit-mask-image: var(--icon-amazon-eks-color-24);
-    mask-image: var(--icon-amazon-eks-color-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-amazon-eks-500, currentColor));
     -webkit-mask-image: var(--icon-amazon-eks-color-16);
     mask-image: var(--icon-amazon-eks-color-16);
+    background-color: var(--icon-color, var(--color-amazon-eks-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/apple-color/keyframes.scss

@@ -1,8 +1,4 @@
 @keyframes icon-apple-color {
-  50% {
-    background-image: var(--icon-apple-color-24);
-  }
-
   100% {
     background-image: var(--icon-apple-color-16);
   }

ui/packages/consul-ui/app/styles/base/icons/icons/apple/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-apple {
-  50% {
-
-    background-color: var(--icon-color, var(--color-apple-500, currentColor));
-    -webkit-mask-image: var(--icon-apple-color-24);
-    mask-image: var(--icon-apple-color-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-apple-500, currentColor));
     -webkit-mask-image: var(--icon-apple-color-16);
     mask-image: var(--icon-apple-color-16);
+    background-color: var(--icon-color, var(--color-apple-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/archive/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-archive {
-  50% {
-
-    background-color: var(--icon-color, var(--color-archive-500, currentColor));
-    -webkit-mask-image: var(--icon-archive-24);
-    mask-image: var(--icon-archive-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-archive-500, currentColor));
     -webkit-mask-image: var(--icon-archive-16);
     mask-image: var(--icon-archive-16);
+    background-color: var(--icon-color, var(--color-archive-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down-circle/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-arrow-down-circle {
-  50% {
-
-    background-color: var(--icon-color, var(--color-arrow-down-circle-500, currentColor));
-    -webkit-mask-image: var(--icon-arrow-down-circle-24);
-    mask-image: var(--icon-arrow-down-circle-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-arrow-down-circle-500, currentColor));
     -webkit-mask-image: var(--icon-arrow-down-circle-16);
     mask-image: var(--icon-arrow-down-circle-16);
+    background-color: var(--icon-color, var(--color-arrow-down-circle-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down-left/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-arrow-down-left {
-  50% {
-
-    background-color: var(--icon-color, var(--color-arrow-down-left-500, currentColor));
-    -webkit-mask-image: var(--icon-arrow-down-left-24);
-    mask-image: var(--icon-arrow-down-left-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-arrow-down-left-500, currentColor));
     -webkit-mask-image: var(--icon-arrow-down-left-16);
     mask-image: var(--icon-arrow-down-left-16);
+    background-color: var(--icon-color, var(--color-arrow-down-left-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down-right/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-arrow-down-right {
-  50% {
-
-    background-color: var(--icon-color, var(--color-arrow-down-right-500, currentColor));
-    -webkit-mask-image: var(--icon-arrow-down-right-24);
-    mask-image: var(--icon-arrow-down-right-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-arrow-down-right-500, currentColor));
     -webkit-mask-image: var(--icon-arrow-down-right-16);
     mask-image: var(--icon-arrow-down-right-16);
+    background-color: var(--icon-color, var(--color-arrow-down-right-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/arrow-down/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-arrow-down {
-  50% {
-
-    background-color: var(--icon-color, var(--color-arrow-down-500, currentColor));
-    -webkit-mask-image: var(--icon-arrow-down-24);
-    mask-image: var(--icon-arrow-down-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-arrow-down-500, currentColor));
     -webkit-mask-image: var(--icon-arrow-down-16);
     mask-image: var(--icon-arrow-down-16);
+    background-color: var(--icon-color, var(--color-arrow-down-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/arrow-left-circle/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-arrow-left-circle {
-  50% {
-
-    background-color: var(--icon-color, var(--color-arrow-left-circle-500, currentColor));
-    -webkit-mask-image: var(--icon-arrow-left-circle-24);
-    mask-image: var(--icon-arrow-left-circle-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-arrow-left-circle-500, currentColor));
     -webkit-mask-image: var(--icon-arrow-left-circle-16);
     mask-image: var(--icon-arrow-left-circle-16);
+    background-color: var(--icon-color, var(--color-arrow-left-circle-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/arrow-left/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-arrow-left {
-  50% {
-
-    background-color: var(--icon-color, var(--color-arrow-left-500, currentColor));
-    -webkit-mask-image: var(--icon-arrow-left-24);
-    mask-image: var(--icon-arrow-left-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-arrow-left-500, currentColor));
     -webkit-mask-image: var(--icon-arrow-left-16);
     mask-image: var(--icon-arrow-left-16);
+    background-color: var(--icon-color, var(--color-arrow-left-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/arrow-right-circle/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-arrow-right-circle {
-  50% {
-
-    background-color: var(--icon-color, var(--color-arrow-right-circle-500, currentColor));
-    -webkit-mask-image: var(--icon-arrow-right-circle-24);
-    mask-image: var(--icon-arrow-right-circle-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-arrow-right-circle-500, currentColor));
     -webkit-mask-image: var(--icon-arrow-right-circle-16);
     mask-image: var(--icon-arrow-right-circle-16);
+    background-color: var(--icon-color, var(--color-arrow-right-circle-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/arrow-right/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-arrow-right {
-  50% {
-
-    background-color: var(--icon-color, var(--color-arrow-right-500, currentColor));
-    -webkit-mask-image: var(--icon-arrow-right-24);
-    mask-image: var(--icon-arrow-right-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-arrow-right-500, currentColor));
     -webkit-mask-image: var(--icon-arrow-right-16);
     mask-image: var(--icon-arrow-right-16);
+    background-color: var(--icon-color, var(--color-arrow-right-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up-circle/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-arrow-up-circle {
-  50% {
-
-    background-color: var(--icon-color, var(--color-arrow-up-circle-500, currentColor));
-    -webkit-mask-image: var(--icon-arrow-up-circle-24);
-    mask-image: var(--icon-arrow-up-circle-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-arrow-up-circle-500, currentColor));
     -webkit-mask-image: var(--icon-arrow-up-circle-16);
     mask-image: var(--icon-arrow-up-circle-16);
+    background-color: var(--icon-color, var(--color-arrow-up-circle-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up-left/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-arrow-up-left {
-  50% {
-
-    background-color: var(--icon-color, var(--color-arrow-up-left-500, currentColor));
-    -webkit-mask-image: var(--icon-arrow-up-left-24);
-    mask-image: var(--icon-arrow-up-left-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-arrow-up-left-500, currentColor));
     -webkit-mask-image: var(--icon-arrow-up-left-16);
     mask-image: var(--icon-arrow-up-left-16);
+    background-color: var(--icon-color, var(--color-arrow-up-left-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up-right/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-arrow-up-right {
-  50% {
-
-    background-color: var(--icon-color, var(--color-arrow-up-right-500, currentColor));
-    -webkit-mask-image: var(--icon-arrow-up-right-24);
-    mask-image: var(--icon-arrow-up-right-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-arrow-up-right-500, currentColor));
     -webkit-mask-image: var(--icon-arrow-up-right-16);
     mask-image: var(--icon-arrow-up-right-16);
+    background-color: var(--icon-color, var(--color-arrow-up-right-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/arrow-up/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-arrow-up {
-  50% {
-
-    background-color: var(--icon-color, var(--color-arrow-up-500, currentColor));
-    -webkit-mask-image: var(--icon-arrow-up-24);
-    mask-image: var(--icon-arrow-up-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-arrow-up-500, currentColor));
     -webkit-mask-image: var(--icon-arrow-up-16);
     mask-image: var(--icon-arrow-up-16);
+    background-color: var(--icon-color, var(--color-arrow-up-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/at-sign/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-at-sign {
-  50% {
-
-    background-color: var(--icon-color, var(--color-at-sign-500, currentColor));
-    -webkit-mask-image: var(--icon-at-sign-24);
-    mask-image: var(--icon-at-sign-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-at-sign-500, currentColor));
     -webkit-mask-image: var(--icon-at-sign-16);
     mask-image: var(--icon-at-sign-16);
+    background-color: var(--icon-color, var(--color-at-sign-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/auth0-color/keyframes.scss

@@ -1,8 +1,4 @@
 @keyframes icon-auth0-color {
-  50% {
-    background-image: var(--icon-auth0-color-24);
-  }
-
   100% {
     background-image: var(--icon-auth0-color-16);
   }

ui/packages/consul-ui/app/styles/base/icons/icons/auth0/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-auth0 {
-  50% {
-
-    background-color: var(--icon-color, var(--color-auth0-500, currentColor));
-    -webkit-mask-image: var(--icon-auth0-color-24);
-    mask-image: var(--icon-auth0-color-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-auth0-500, currentColor));
     -webkit-mask-image: var(--icon-auth0-color-16);
     mask-image: var(--icon-auth0-color-16);
+    background-color: var(--icon-color, var(--color-auth0-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/auto-apply/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-auto-apply {
-  50% {
-
-    background-color: var(--icon-color, var(--color-auto-apply-500, currentColor));
-    -webkit-mask-image: var(--icon-auto-apply-24);
-    mask-image: var(--icon-auto-apply-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-auto-apply-500, currentColor));
     -webkit-mask-image: var(--icon-auto-apply-16);
     mask-image: var(--icon-auto-apply-16);
+    background-color: var(--icon-color, var(--color-auto-apply-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/award/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-award {
-  50% {
-
-    background-color: var(--icon-color, var(--color-award-500, currentColor));
-    -webkit-mask-image: var(--icon-award-24);
-    mask-image: var(--icon-award-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-award-500, currentColor));
     -webkit-mask-image: var(--icon-award-16);
     mask-image: var(--icon-award-16);
+    background-color: var(--icon-color, var(--color-award-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/aws-color/keyframes.scss

@@ -1,8 +1,4 @@
 @keyframes icon-aws-color {
-  50% {
-    background-image: var(--icon-aws-color-24);
-  }
-
   100% {
     background-image: var(--icon-aws-color-16);
   }

ui/packages/consul-ui/app/styles/base/icons/icons/aws-ec2-color/keyframes.scss

@@ -1,8 +1,4 @@
 @keyframes icon-aws-ec2-color {
-  50% {
-    background-image: var(--icon-aws-ec2-color-24);
-  }
-
   100% {
     background-image: var(--icon-aws-ec2-color-16);
   }

ui/packages/consul-ui/app/styles/base/icons/icons/aws-ec2/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-aws-ec2 {
-  50% {
-
-    background-color: var(--icon-color, var(--color-aws-ec2-500, currentColor));
-    -webkit-mask-image: var(--icon-aws-ec2-color-24);
-    mask-image: var(--icon-aws-ec2-color-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-aws-ec2-500, currentColor));
     -webkit-mask-image: var(--icon-aws-ec2-color-16);
     mask-image: var(--icon-aws-ec2-color-16);
+    background-color: var(--icon-color, var(--color-aws-ec2-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/aws/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-aws {
-  50% {
-
-    background-color: var(--icon-color, var(--color-aws-500, currentColor));
-    -webkit-mask-image: var(--icon-aws-color-24);
-    mask-image: var(--icon-aws-color-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-aws-500, currentColor));
     -webkit-mask-image: var(--icon-aws-color-16);
     mask-image: var(--icon-aws-color-16);
+    background-color: var(--icon-color, var(--color-aws-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/azure-color/keyframes.scss

@@ -1,8 +1,4 @@
 @keyframes icon-azure-color {
-  50% {
-    background-image: var(--icon-azure-color-24);
-  }
-
   100% {
     background-image: var(--icon-azure-color-16);
   }

ui/packages/consul-ui/app/styles/base/icons/icons/azure-devops-color/keyframes.scss

@@ -1,8 +1,4 @@
 @keyframes icon-azure-devops-color {
-  50% {
-    background-image: var(--icon-azure-devops-color-24);
-  }
-
   100% {
     background-image: var(--icon-azure-devops-color-16);
   }

ui/packages/consul-ui/app/styles/base/icons/icons/azure-devops/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-azure-devops {
-  50% {
-
-    background-color: var(--icon-color, var(--color-azure-devops-500, currentColor));
-    -webkit-mask-image: var(--icon-azure-devops-color-24);
-    mask-image: var(--icon-azure-devops-color-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-azure-devops-500, currentColor));
     -webkit-mask-image: var(--icon-azure-devops-color-16);
     mask-image: var(--icon-azure-devops-color-16);
+    background-color: var(--icon-color, var(--color-azure-devops-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/azure/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-azure {
-  50% {
-
-    background-color: var(--icon-color, var(--color-azure-500, currentColor));
-    -webkit-mask-image: var(--icon-azure-color-24);
-    mask-image: var(--icon-azure-color-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-azure-500, currentColor));
     -webkit-mask-image: var(--icon-azure-color-16);
     mask-image: var(--icon-azure-color-16);
+    background-color: var(--icon-color, var(--color-azure-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/bank-vault/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-bank-vault {
-  50% {
-
-    background-color: var(--icon-color, var(--color-bank-vault-500, currentColor));
-    -webkit-mask-image: var(--icon-bank-vault-24);
-    mask-image: var(--icon-bank-vault-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-bank-vault-500, currentColor));
     -webkit-mask-image: var(--icon-bank-vault-16);
     mask-image: var(--icon-bank-vault-16);
+    background-color: var(--icon-color, var(--color-bank-vault-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/bar-chart-alt/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-bar-chart-alt {
-  50% {
-
-    background-color: var(--icon-color, var(--color-bar-chart-alt-500, currentColor));
-    -webkit-mask-image: var(--icon-bar-chart-alt-24);
-    mask-image: var(--icon-bar-chart-alt-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-bar-chart-alt-500, currentColor));
     -webkit-mask-image: var(--icon-bar-chart-alt-16);
     mask-image: var(--icon-bar-chart-alt-16);
+    background-color: var(--icon-color, var(--color-bar-chart-alt-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/bar-chart/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-bar-chart {
-  50% {
-
-    background-color: var(--icon-color, var(--color-bar-chart-500, currentColor));
-    -webkit-mask-image: var(--icon-bar-chart-24);
-    mask-image: var(--icon-bar-chart-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-bar-chart-500, currentColor));
     -webkit-mask-image: var(--icon-bar-chart-16);
     mask-image: var(--icon-bar-chart-16);
+    background-color: var(--icon-color, var(--color-bar-chart-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/battery-charging/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-battery-charging {
-  50% {
-
-    background-color: var(--icon-color, var(--color-battery-charging-500, currentColor));
-    -webkit-mask-image: var(--icon-battery-charging-24);
-    mask-image: var(--icon-battery-charging-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-battery-charging-500, currentColor));
     -webkit-mask-image: var(--icon-battery-charging-16);
     mask-image: var(--icon-battery-charging-16);
+    background-color: var(--icon-color, var(--color-battery-charging-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/battery/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-battery {
-  50% {
-
-    background-color: var(--icon-color, var(--color-battery-500, currentColor));
-    -webkit-mask-image: var(--icon-battery-24);
-    mask-image: var(--icon-battery-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-battery-500, currentColor));
     -webkit-mask-image: var(--icon-battery-16);
     mask-image: var(--icon-battery-16);
+    background-color: var(--icon-color, var(--color-battery-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/beaker/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-beaker {
-  50% {
-
-    background-color: var(--icon-color, var(--color-beaker-500, currentColor));
-    -webkit-mask-image: var(--icon-beaker-24);
-    mask-image: var(--icon-beaker-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-beaker-500, currentColor));
     -webkit-mask-image: var(--icon-beaker-16);
     mask-image: var(--icon-beaker-16);
+    background-color: var(--icon-color, var(--color-beaker-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/bell-active-fill/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-bell-active-fill {
-  50% {
-
-    background-color: var(--icon-color, var(--color-bell-active-fill-500, currentColor));
-    -webkit-mask-image: var(--icon-bell-active-fill-24);
-    mask-image: var(--icon-bell-active-fill-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-bell-active-fill-500, currentColor));
     -webkit-mask-image: var(--icon-bell-active-fill-16);
     mask-image: var(--icon-bell-active-fill-16);
+    background-color: var(--icon-color, var(--color-bell-active-fill-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/bell-active/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-bell-active {
-  50% {
-
-    background-color: var(--icon-color, var(--color-bell-active-500, currentColor));
-    -webkit-mask-image: var(--icon-bell-active-24);
-    mask-image: var(--icon-bell-active-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-bell-active-500, currentColor));
     -webkit-mask-image: var(--icon-bell-active-16);
     mask-image: var(--icon-bell-active-16);
+    background-color: var(--icon-color, var(--color-bell-active-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/bell-off/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-bell-off {
-  50% {
-
-    background-color: var(--icon-color, var(--color-bell-off-500, currentColor));
-    -webkit-mask-image: var(--icon-bell-off-24);
-    mask-image: var(--icon-bell-off-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-bell-off-500, currentColor));
     -webkit-mask-image: var(--icon-bell-off-16);
     mask-image: var(--icon-bell-off-16);
+    background-color: var(--icon-color, var(--color-bell-off-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/bell/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-bell {
-  50% {
-
-    background-color: var(--icon-color, var(--color-bell-500, currentColor));
-    -webkit-mask-image: var(--icon-bell-24);
-    mask-image: var(--icon-bell-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-bell-500, currentColor));
     -webkit-mask-image: var(--icon-bell-16);
     mask-image: var(--icon-bell-16);
+    background-color: var(--icon-color, var(--color-bell-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/bitbucket-color/keyframes.scss

@@ -1,8 +1,4 @@
 @keyframes icon-bitbucket-color {
-  50% {
-    background-image: var(--icon-bitbucket-color-24);
-  }
-
   100% {
     background-image: var(--icon-bitbucket-color-16);
   }

ui/packages/consul-ui/app/styles/base/icons/icons/bitbucket/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-bitbucket {
-  50% {
-
-    background-color: var(--icon-color, var(--color-bitbucket-500, currentColor));
-    -webkit-mask-image: var(--icon-bitbucket-color-24);
-    mask-image: var(--icon-bitbucket-color-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-bitbucket-500, currentColor));
     -webkit-mask-image: var(--icon-bitbucket-color-16);
     mask-image: var(--icon-bitbucket-color-16);
+    background-color: var(--icon-color, var(--color-bitbucket-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/bolt/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-bolt {
-  50% {
-
-    background-color: var(--icon-color, var(--color-bolt-500, currentColor));
-    -webkit-mask-image: var(--icon-zap-24);
-    mask-image: var(--icon-zap-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-bolt-500, currentColor));
     -webkit-mask-image: var(--icon-zap-16);
     mask-image: var(--icon-zap-16);
+    background-color: var(--icon-color, var(--color-bolt-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-add-fill/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-bookmark-add-fill {
-  50% {
-
-    background-color: var(--icon-color, var(--color-bookmark-add-fill-500, currentColor));
-    -webkit-mask-image: var(--icon-bookmark-add-fill-24);
-    mask-image: var(--icon-bookmark-add-fill-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-bookmark-add-fill-500, currentColor));
     -webkit-mask-image: var(--icon-bookmark-add-fill-16);
     mask-image: var(--icon-bookmark-add-fill-16);
+    background-color: var(--icon-color, var(--color-bookmark-add-fill-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-add/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-bookmark-add {
-  50% {
-
-    background-color: var(--icon-color, var(--color-bookmark-add-500, currentColor));
-    -webkit-mask-image: var(--icon-bookmark-add-24);
-    mask-image: var(--icon-bookmark-add-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-bookmark-add-500, currentColor));
     -webkit-mask-image: var(--icon-bookmark-add-16);
     mask-image: var(--icon-bookmark-add-16);
+    background-color: var(--icon-color, var(--color-bookmark-add-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-fill/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-bookmark-fill {
-  50% {
-
-    background-color: var(--icon-color, var(--color-bookmark-fill-500, currentColor));
-    -webkit-mask-image: var(--icon-bookmark-fill-24);
-    mask-image: var(--icon-bookmark-fill-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-bookmark-fill-500, currentColor));
     -webkit-mask-image: var(--icon-bookmark-fill-16);
     mask-image: var(--icon-bookmark-fill-16);
+    background-color: var(--icon-color, var(--color-bookmark-fill-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-remove-fill/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-bookmark-remove-fill {
-  50% {
-
-    background-color: var(--icon-color, var(--color-bookmark-remove-fill-500, currentColor));
-    -webkit-mask-image: var(--icon-bookmark-remove-fill-24);
-    mask-image: var(--icon-bookmark-remove-fill-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-bookmark-remove-fill-500, currentColor));
     -webkit-mask-image: var(--icon-bookmark-remove-fill-16);
     mask-image: var(--icon-bookmark-remove-fill-16);
+    background-color: var(--icon-color, var(--color-bookmark-remove-fill-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/bookmark-remove/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-bookmark-remove {
-  50% {
-
-    background-color: var(--icon-color, var(--color-bookmark-remove-500, currentColor));
-    -webkit-mask-image: var(--icon-bookmark-remove-24);
-    mask-image: var(--icon-bookmark-remove-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-bookmark-remove-500, currentColor));
     -webkit-mask-image: var(--icon-bookmark-remove-16);
     mask-image: var(--icon-bookmark-remove-16);
+    background-color: var(--icon-color, var(--color-bookmark-remove-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/bookmark/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-bookmark {
-  50% {
-
-    background-color: var(--icon-color, var(--color-bookmark-500, currentColor));
-    -webkit-mask-image: var(--icon-bookmark-24);
-    mask-image: var(--icon-bookmark-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-bookmark-500, currentColor));
     -webkit-mask-image: var(--icon-bookmark-16);
     mask-image: var(--icon-bookmark-16);
+    background-color: var(--icon-color, var(--color-bookmark-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/bottom/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-bottom {
-  50% {
-
-    background-color: var(--icon-color, var(--color-bottom-500, currentColor));
-    -webkit-mask-image: var(--icon-bottom-24);
-    mask-image: var(--icon-bottom-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-bottom-500, currentColor));
     -webkit-mask-image: var(--icon-bottom-16);
     mask-image: var(--icon-bottom-16);
+    background-color: var(--icon-color, var(--color-bottom-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/boundary-color/keyframes.scss

@@ -1,8 +1,4 @@
 @keyframes icon-boundary-color {
-  50% {
-    background-image: var(--icon-boundary-color-24);
-  }
-
   100% {
     background-image: var(--icon-boundary-color-16);
   }

ui/packages/consul-ui/app/styles/base/icons/icons/boundary/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-boundary {
-  50% {
-
-    background-color: var(--icon-color, var(--color-boundary-500, currentColor));
-    -webkit-mask-image: var(--icon-boundary-color-24);
-    mask-image: var(--icon-boundary-color-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-boundary-500, currentColor));
     -webkit-mask-image: var(--icon-boundary-color-16);
     mask-image: var(--icon-boundary-color-16);
+    background-color: var(--icon-color, var(--color-boundary-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/box-check-fill/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-box-check-fill {
-  50% {
-
-    background-color: var(--icon-color, var(--color-box-check-fill-500, currentColor));
-    -webkit-mask-image: var(--icon-check-square-fill-24);
-    mask-image: var(--icon-check-square-fill-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-box-check-fill-500, currentColor));
     -webkit-mask-image: var(--icon-check-square-fill-16);
     mask-image: var(--icon-check-square-fill-16);
+    background-color: var(--icon-color, var(--color-box-check-fill-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/box-outline/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-box-outline {
-  50% {
-
-    background-color: var(--icon-color, var(--color-box-outline-500, currentColor));
-    -webkit-mask-image: var(--icon-square-24);
-    mask-image: var(--icon-square-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-box-outline-500, currentColor));
     -webkit-mask-image: var(--icon-square-16);
     mask-image: var(--icon-square-16);
+    background-color: var(--icon-color, var(--color-box-outline-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/box/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-box {
-  50% {
-
-    background-color: var(--icon-color, var(--color-box-500, currentColor));
-    -webkit-mask-image: var(--icon-box-24);
-    mask-image: var(--icon-box-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-box-500, currentColor));
     -webkit-mask-image: var(--icon-box-16);
     mask-image: var(--icon-box-16);
+    background-color: var(--icon-color, var(--color-box-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/briefcase/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-briefcase {
-  50% {
-
-    background-color: var(--icon-color, var(--color-briefcase-500, currentColor));
-    -webkit-mask-image: var(--icon-briefcase-24);
-    mask-image: var(--icon-briefcase-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-briefcase-500, currentColor));
     -webkit-mask-image: var(--icon-briefcase-16);
     mask-image: var(--icon-briefcase-16);
+    background-color: var(--icon-color, var(--color-briefcase-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/broadcast/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-broadcast {
-  50% {
-
-    background-color: var(--icon-color, var(--color-broadcast-500, currentColor));
-    -webkit-mask-image: var(--icon-radio-24);
-    mask-image: var(--icon-radio-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-broadcast-500, currentColor));
     -webkit-mask-image: var(--icon-radio-16);
     mask-image: var(--icon-radio-16);
+    background-color: var(--icon-color, var(--color-broadcast-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/bug/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-bug {
-  50% {
-
-    background-color: var(--icon-color, var(--color-bug-500, currentColor));
-    -webkit-mask-image: var(--icon-bug-24);
-    mask-image: var(--icon-bug-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-bug-500, currentColor));
     -webkit-mask-image: var(--icon-bug-16);
     mask-image: var(--icon-bug-16);
+    background-color: var(--icon-color, var(--color-bug-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/build/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-build {
-  50% {
-
-    background-color: var(--icon-color, var(--color-build-500, currentColor));
-    -webkit-mask-image: var(--icon-build-24);
-    mask-image: var(--icon-build-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-build-500, currentColor));
     -webkit-mask-image: var(--icon-build-16);
     mask-image: var(--icon-build-16);
+    background-color: var(--icon-color, var(--color-build-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/bulb/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-bulb {
-  50% {
-
-    background-color: var(--icon-color, var(--color-bulb-500, currentColor));
-    -webkit-mask-image: var(--icon-bulb-24);
-    mask-image: var(--icon-bulb-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-bulb-500, currentColor));
     -webkit-mask-image: var(--icon-bulb-16);
     mask-image: var(--icon-bulb-16);
+    background-color: var(--icon-color, var(--color-bulb-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/calendar/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-calendar {
-  50% {
-
-    background-color: var(--icon-color, var(--color-calendar-500, currentColor));
-    -webkit-mask-image: var(--icon-calendar-24);
-    mask-image: var(--icon-calendar-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-calendar-500, currentColor));
     -webkit-mask-image: var(--icon-calendar-16);
     mask-image: var(--icon-calendar-16);
+    background-color: var(--icon-color, var(--color-calendar-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/camera-off/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-camera-off {
-  50% {
-
-    background-color: var(--icon-color, var(--color-camera-off-500, currentColor));
-    -webkit-mask-image: var(--icon-camera-off-24);
-    mask-image: var(--icon-camera-off-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-camera-off-500, currentColor));
     -webkit-mask-image: var(--icon-camera-off-16);
     mask-image: var(--icon-camera-off-16);
+    background-color: var(--icon-color, var(--color-camera-off-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/camera/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-camera {
-  50% {
-
-    background-color: var(--icon-color, var(--color-camera-500, currentColor));
-    -webkit-mask-image: var(--icon-camera-24);
-    mask-image: var(--icon-camera-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-camera-500, currentColor));
     -webkit-mask-image: var(--icon-camera-16);
     mask-image: var(--icon-camera-16);
+    background-color: var(--icon-color, var(--color-camera-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/cancel-circle-fill/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-cancel-circle-fill {
-  50% {
-
-    background-color: var(--icon-color, var(--color-cancel-circle-fill-500, currentColor));
-    -webkit-mask-image: var(--icon-x-circle-fill-24);
-    mask-image: var(--icon-x-circle-fill-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-cancel-circle-fill-500, currentColor));
     -webkit-mask-image: var(--icon-x-circle-fill-16);
     mask-image: var(--icon-x-circle-fill-16);
+    background-color: var(--icon-color, var(--color-cancel-circle-fill-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/cancel-circle-outline/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-cancel-circle-outline {
-  50% {
-
-    background-color: var(--icon-color, var(--color-cancel-circle-outline-500, currentColor));
-    -webkit-mask-image: var(--icon-x-circle-24);
-    mask-image: var(--icon-x-circle-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-cancel-circle-outline-500, currentColor));
     -webkit-mask-image: var(--icon-x-circle-16);
     mask-image: var(--icon-x-circle-16);
+    background-color: var(--icon-color, var(--color-cancel-circle-outline-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/cancel-plain/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-cancel-plain {
-  50% {
-
-    background-color: var(--icon-color, var(--color-cancel-plain-500, currentColor));
-    -webkit-mask-image: var(--icon-x-24);
-    mask-image: var(--icon-x-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-cancel-plain-500, currentColor));
     -webkit-mask-image: var(--icon-x-16);
     mask-image: var(--icon-x-16);
+    background-color: var(--icon-color, var(--color-cancel-plain-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/cancel-square-fill/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-cancel-square-fill {
-  50% {
-
-    background-color: var(--icon-color, var(--color-cancel-square-fill-500, currentColor));
-    -webkit-mask-image: var(--icon-x-square-fill-24);
-    mask-image: var(--icon-x-square-fill-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-cancel-square-fill-500, currentColor));
     -webkit-mask-image: var(--icon-x-square-fill-16);
     mask-image: var(--icon-x-square-fill-16);
+    background-color: var(--icon-color, var(--color-cancel-square-fill-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/cancel-square-outline/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-cancel-square-outline {
-  50% {
-
-    background-color: var(--icon-color, var(--color-cancel-square-outline-500, currentColor));
-    -webkit-mask-image: var(--icon-x-square-24);
-    mask-image: var(--icon-x-square-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-cancel-square-outline-500, currentColor));
     -webkit-mask-image: var(--icon-x-square-16);
     mask-image: var(--icon-x-square-16);
+    background-color: var(--icon-color, var(--color-cancel-square-outline-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/caret-down/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-caret-down {
-  50% {
-
-    background-color: var(--icon-color, var(--color-caret-down-500, currentColor));
-    -webkit-mask-image: var(--icon-caret-24);
-    mask-image: var(--icon-caret-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-caret-down-500, currentColor));
     -webkit-mask-image: var(--icon-caret-16);
     mask-image: var(--icon-caret-16);
+    background-color: var(--icon-color, var(--color-caret-down-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/caret-up/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-caret-up {
-  50% {
-
-    background-color: var(--icon-color, var(--color-caret-up-500, currentColor));
-    -webkit-mask-image: var(--icon-chevron-up-24);
-    mask-image: var(--icon-chevron-up-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-caret-up-500, currentColor));
     -webkit-mask-image: var(--icon-chevron-up-16);
     mask-image: var(--icon-chevron-up-16);
+    background-color: var(--icon-color, var(--color-caret-up-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/caret/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-caret {
-  50% {
-
-    background-color: var(--icon-color, var(--color-caret-500, currentColor));
-    -webkit-mask-image: var(--icon-caret-24);
-    mask-image: var(--icon-caret-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-caret-500, currentColor));
     -webkit-mask-image: var(--icon-caret-16);
     mask-image: var(--icon-caret-16);
+    background-color: var(--icon-color, var(--color-caret-500, currentColor));
+
   }
 }

ui/packages/consul-ui/app/styles/base/icons/icons/cast/keyframes.scss

@@ -1,15 +1,9 @@
 @keyframes icon-cast {
-  50% {
-
-    background-color: var(--icon-color, var(--color-cast-500, currentColor));
-    -webkit-mask-image: var(--icon-cast-24);
-    mask-image: var(--icon-cast-24);
-  }
-
   100% {
 
-    background-color: var(--icon-color, var(--color-cast-500, currentColor));
     -webkit-mask-image: var(--icon-cast-16);
     mask-image: var(--icon-cast-16);
+    background-color: var(--icon-color, var(--color-cast-500, currentColor));
+
   }
 }