ui: Rename icons for consistency and remove unused icons (#10311)

* ui: Standardize logo naming

According to structure it should always be logo-name not name-logo

* Make sure all our logos use logo-name format

* Upgrade to @hashicorp/structure-icons 1.9.0

* Add `-color` to be consistent with other logos

* Add ms logo back in

* Remove all the old `*-color` icons from before when we got masks

* Add missing files

* Missed glimmer extend name change

ui/packages/consul-ui/app/components/consul/health-check/list/skin.scss

@@ -27,13 +27,16 @@
   margin-left: 0.5em;
 }
 %healthcheck-output.passing::before {
-  @extend %with-check-circle-fill-color-icon;
+  @extend %with-check-circle-fill-mask;
+  color: $green-500;
 }
 %healthcheck-output.warning::before {
-  @extend %with-alert-triangle-color-icon;
+  @extend %with-alert-triangle-mask;
+  color: $orange-500;
 }
 %healthcheck-output.critical::before {
-  @extend %with-cancel-square-fill-color-icon;
+  @extend %with-cancel-square-fill-mask;
+  color: $red-500;
 }
 %healthcheck-output,
 %healthcheck-output pre {

ui/packages/consul-ui/app/components/consul/intention/components.scss

@@ -24,7 +24,7 @@
   @extend %frame-gray-900;
 }
 %pill-allow::before {
-  @extend %with-arrow-right-color-mask;
+  @extend %with-arrow-right-mask;
 }
 %pill-deny::before {
   @extend %with-deny-color-mask;

ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/layout.scss

@@ -11,12 +11,6 @@
   .radio-card header > * {
     display: inline;
   }
-  .value-allow > :last-child::before {
-    @extend %with-arrow-right-color-icon, %as-pseudo;
-  }
-  .value-deny > :last-child::before {
-    @extend %with-deny-color-icon, %as-pseudo;
-  }
   .permissions > button {
     @extend %anchor, %p2;
     float: right;

ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/skin.scss

@@ -1,6 +1,7 @@
 .consul-intention-fieldsets {
   .value-allow > :last-child::before {
-    @extend %with-arrow-right-color-icon, %as-pseudo;
+    @extend %with-arrow-right-mask, %as-pseudo;
+    color: $green-500;
   }
   .value-deny > :last-child::before {
     @extend %with-deny-color-icon, %as-pseudo;

ui/packages/consul-ui/app/components/flash-message/README.mdx

@@ -0,0 +1,35 @@
+---
+class: css
+state: needs-love
+---
+# flash-message
+
+CSS component for styling our flash messages
+
+```hbs preview-template
+<div class="flash-message">
+  <p
+    role="alert"
+    class={{or this.type 'success'}}
+  >
+    <strong>
+      {{capitalize (or this.type 'success')}}!
+    </strong>
+  </p>
+</div>
+
+<figure>
+  <figcaption>Provide a widget to change the <code>class</code></figcaption>
+
+  <select
+    onchange={{action (mut this.type) value="target.value"}}
+  >
+    <option>success</option>
+    <option>warning</option>
+    <option>error</option>
+    <option>exists</option>
+  </select>
+
+</figure>
+```
+

ui/packages/consul-ui/app/components/flash-message/index.scss

@@ -1,4 +1,5 @@
-@import './flash-message/index';
+@import './skin';
+@import './layout';
 .flash-message {
   @extend %flash-message;
 }
@@ -10,7 +11,8 @@
 /* once we have refactored app-view with data-source with nicer */
 /* flash message usage we should be able to remove this */
 %flash-message p.exists strong::before {
-  @extend %with-cancel-square-fill-color-icon;
+  @extend %with-cancel-square-fill-mask;
+  color: $red-500;
 }
 %flash-message p.exists {
   @extend %frame-red-500;

ui/packages/consul-ui/app/components/flash-message/skin.scss

@@ -6,13 +6,16 @@
   @extend %as-pseudo;
 }
 %flash-message p.success strong::before {
-  @extend %with-check-circle-fill-color-icon;
+  @extend %with-check-circle-fill-mask;
+  color: $green-500;
 }
 %flash-message p.warning strong::before {
-  @extend %with-alert-triangle-color-icon;
+  @extend %with-alert-triangle-mask;
+  color: $orange-500;
 }
 %flash-message p.error strong::before {
-  @extend %with-cancel-square-fill-color-icon;
+  @extend %with-cancel-square-fill-mask;
+  color: $red-500;
 }
 %flash-message p.success {
   @extend %frame-green-500;

ui/packages/consul-ui/app/components/inline-alert/README.mdx

@@ -0,0 +1,46 @@
+---
+class: css
+---
+# inline-alert
+
+CSS component for giving inline feedback to the user, generally used for form
+element feedback like errors and suchlike.
+
+```hbs preview-template
+  <label class="type-text">
+    <span>Input some text</span>
+    <input type="text" />
+    <strong class={{or this.type "info"}}>{{capitalize (or this.type "info")}}</strong>
+  </label>
+
+<figure>
+  <figcaption>Provide a widget to change the <code>class</code></figcaption>
+
+  <select
+    onchange={{action (mut this.type) value="target.value"}}
+  >
+    <option>info</option>
+    <option>success</option>
+    <option>warning</option>
+    <option>error</option>
+  </select>
+
+</figure>
+```
+
+
+```css
+strong.info {
+  @extend %inline-alert-info;
+}
+strong.success {
+  @extend %inline-alert-success;
+}
+strong.warning {
+  @extend %inline-alert-warning;
+}
+strong.error {
+  @extend %inline-alert-error;
+}
+```
+

ui/packages/consul-ui/app/components/inline-alert/debug.scss

@@ -0,0 +1,14 @@
+[id^='docfy-demo-preview-inline-alert'] {
+  strong.info {
+    @extend %inline-alert-info;
+  }
+  strong.success {
+    @extend %inline-alert-success;
+  }
+  strong.warning {
+    @extend %inline-alert-warning;
+  }
+  strong.error {
+    @extend %inline-alert-error;
+  }
+}

ui/packages/consul-ui/app/components/inline-alert/skin.scss

@@ -17,23 +17,26 @@
 %inline-alert::before {
   font-size: 14px;
 }
-%inline-alert-success::before {
-  @extend %with-check-circle-fill-color-icon;
+%inline-alert::before {
   @extend %as-pseudo;
 }
+%inline-alert-success::before {
+  @extend %with-check-circle-fill-mask;
+  color: $green-500;
+}
 %inline-alert-error::before {
-  @extend %with-cancel-square-fill-color-icon;
-  @extend %as-pseudo;
+  @extend %with-cancel-square-fill-mask;
+  color: $red-500;
 }
 %inline-alert-warning::before {
-  @extend %with-alert-triangle-color-icon;
-  @extend %as-pseudo;
+  @extend %with-alert-triangle-mask;
+  color: $orange-500;
   /* the warning triangle always looks */
   /* too low just because its a triangle */
   /* this tweak make it look better */
   margin-top: -9px;
 }
 %inline-alert-info::before {
-  @extend %with-info-circle-fill-color-icon;
-  @extend %as-pseudo;
+  @extend %with-info-circle-fill-mask;
+  color: $blue-500;
 }

ui/packages/consul-ui/app/components/notice/README.mdx

@@ -29,6 +29,7 @@ as |notice|>
     onchange={{action (mut this.type) value="target.value"}}
   >
     <option>info</option>
+    <option>success</option>
     <option>warning</option>
     <option>error</option>
   </select>

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

@@ -50,11 +50,11 @@
   border-color: $red-500;
 }
 %notice-success::before {
-  @extend %with-check-circle-fill-color-mask;
+  @extend %with-check-circle-fill-mask;
   color: $green-500;
 }
 %notice-info::before {
-  @extend %with-info-circle-fill-color-mask;
+  @extend %with-info-circle-fill-mask;
   color: $blue-500;
 }
 %notice-highlight::before {
@@ -62,10 +62,10 @@
   color: $yellow-500;
 }
 %notice-warning::before {
-  @extend %with-alert-triangle-color-mask;
+  @extend %with-alert-triangle-mask;
   color: $orange-500;
 }
 %notice-error::before {
-  @extend %with-cancel-square-fill-color-mask;
+  @extend %with-cancel-square-fill-mask;
   color: $red-500;
 }

ui/packages/consul-ui/app/components/topology-metrics/card/index.scss

@@ -56,15 +56,15 @@
       background-color: $gray-500;
     }
     .passing::before {
-      @extend %with-check-circle-fill-color-mask, %as-pseudo;
+      @extend %with-check-circle-fill-mask, %as-pseudo;
       background-color: $green-500;
     }
     .warning::before {
-      @extend %with-alert-triangle-color-mask, %as-pseudo;
+      @extend %with-alert-triangle-mask, %as-pseudo;
       background-color: $orange-500;
     }
     .critical::before {
-      @extend %with-cancel-square-fill-color-mask, %as-pseudo;
+      @extend %with-cancel-square-fill-mask, %as-pseudo;
       background-color: $red-500;
     }
     .empty::before {

ui/packages/consul-ui/app/components/topology-metrics/popover/index.scss

@@ -20,7 +20,7 @@
   }
   &.deny > button::before,
   &.deny .tippy-arrow::after {
-    @extend %with-cancel-square-fill-color-mask, %as-pseudo;
+    @extend %with-cancel-square-fill-mask, %as-pseudo;
     background-color: $red-500;
   }
   &.l7 > button::before,

ui/packages/consul-ui/app/styles/base/icons/icon-placeholders.scss

@@ -18,16 +18,6 @@
   mask-image: var(--alert-circle-outline-svg);
 }
 
-%with-alert-triangle-color-icon {
-  @extend %with-icon, %alert-triangle-color-svg-prop;
-  background-image: var(--alert-triangle-color-svg);
-}
-%with-alert-triangle-color-mask {
-  @extend %with-mask, %alert-triangle-color-svg-prop;
-  -webkit-mask-image: var(--alert-triangle-color-svg);
-  mask-image: var(--alert-triangle-color-svg);
-}
-
 %with-alert-triangle-icon {
   @extend %with-icon, %alert-triangle-svg-prop;
   background-image: var(--alert-triangle-svg);
@@ -58,16 +48,6 @@
   mask-image: var(--arrow-left-svg);
 }
 
-%with-arrow-right-color-icon {
-  @extend %with-icon, %arrow-right-color-svg-prop;
-  background-image: var(--arrow-right-color-svg);
-}
-%with-arrow-right-color-mask {
-  @extend %with-mask, %arrow-right-color-svg-prop;
-  -webkit-mask-image: var(--arrow-right-color-svg);
-  mask-image: var(--arrow-right-color-svg);
-}
-
 %with-arrow-right-icon {
   @extend %with-icon, %arrow-right-svg-prop;
   background-image: var(--arrow-right-svg);
@@ -88,16 +68,6 @@
   mask-image: var(--arrow-up-svg);
 }
 
-%with-aws-logo-color-icon {
-  @extend %with-icon, %aws-logo-color-svg-prop;
-  background-image: var(--aws-logo-color-svg);
-}
-%with-aws-logo-color-mask {
-  @extend %with-mask, %aws-logo-color-svg-prop;
-  -webkit-mask-image: var(--aws-logo-color-svg);
-  mask-image: var(--aws-logo-color-svg);
-}
-
 %with-bolt-icon {
   @extend %with-icon, %bolt-svg-prop;
   background-image: var(--bolt-svg);
@@ -128,6 +98,16 @@
   mask-image: var(--box-outline-svg);
 }
 
+%with-broadcast-icon {
+  @extend %with-icon, %broadcast-svg-prop;
+  background-image: var(--broadcast-svg);
+}
+%with-broadcast-mask {
+  @extend %with-mask, %broadcast-svg-prop;
+  -webkit-mask-image: var(--broadcast-svg);
+  mask-image: var(--broadcast-svg);
+}
+
 %with-bug-icon {
   @extend %with-icon, %bug-svg-prop;
   background-image: var(--bug-svg);
@@ -178,16 +158,6 @@
   mask-image: var(--cancel-plain-svg);
 }
 
-%with-cancel-square-fill-color-icon {
-  @extend %with-icon, %cancel-square-fill-color-svg-prop;
-  background-image: var(--cancel-square-fill-color-svg);
-}
-%with-cancel-square-fill-color-mask {
-  @extend %with-mask, %cancel-square-fill-color-svg-prop;
-  -webkit-mask-image: var(--cancel-square-fill-color-svg);
-  mask-image: var(--cancel-square-fill-color-svg);
-}
-
 %with-cancel-square-fill-icon {
   @extend %with-icon, %cancel-square-fill-svg-prop;
   background-image: var(--cancel-square-fill-svg);
@@ -228,16 +198,6 @@
   mask-image: var(--caret-up-svg);
 }
 
-%with-check-circle-fill-color-icon {
-  @extend %with-icon, %check-circle-fill-color-svg-prop;
-  background-image: var(--check-circle-fill-color-svg);
-}
-%with-check-circle-fill-color-mask {
-  @extend %with-mask, %check-circle-fill-color-svg-prop;
-  -webkit-mask-image: var(--check-circle-fill-color-svg);
-  mask-image: var(--check-circle-fill-color-svg);
-}
-
 %with-check-circle-fill-icon {
   @extend %with-icon, %check-circle-fill-svg-prop;
   background-image: var(--check-circle-fill-svg);
@@ -268,16 +228,6 @@
   mask-image: var(--check-plain-svg);
 }
 
-%with-chevron-down-2-icon {
-  @extend %with-icon, %chevron-down-2-svg-prop;
-  background-image: var(--chevron-down-2-svg);
-}
-%with-chevron-down-2-mask {
-  @extend %with-mask, %chevron-down-2-svg-prop;
-  -webkit-mask-image: var(--chevron-down-2-svg);
-  mask-image: var(--chevron-down-2-svg);
-}
-
 %with-chevron-down-icon {
   @extend %with-icon, %chevron-down-svg-prop;
   background-image: var(--chevron-down-svg);
@@ -318,16 +268,6 @@
   mask-image: var(--chevron-up-svg);
 }
 
-%with-chevron-icon {
-  @extend %with-icon, %chevron-svg-prop;
-  background-image: var(--chevron-svg);
-}
-%with-chevron-mask {
-  @extend %with-mask, %chevron-svg-prop;
-  -webkit-mask-image: var(--chevron-svg);
-  mask-image: var(--chevron-svg);
-}
-
 %with-clock-fill-icon {
   @extend %with-icon, %clock-fill-svg-prop;
   background-image: var(--clock-fill-svg);
@@ -368,14 +308,14 @@
   mask-image: var(--code-svg);
 }
 
-%with-consul-logo-color-icon {
-  @extend %with-icon, %consul-logo-color-svg-prop;
-  background-image: var(--consul-logo-color-svg);
+%with-console-icon {
+  @extend %with-icon, %console-svg-prop;
+  background-image: var(--console-svg);
 }
-%with-consul-logo-color-mask {
-  @extend %with-mask, %consul-logo-color-svg-prop;
-  -webkit-mask-image: var(--consul-logo-color-svg);
-  mask-image: var(--consul-logo-color-svg);
+%with-console-mask {
+  @extend %with-mask, %console-svg-prop;
+  -webkit-mask-image: var(--console-svg);
+  mask-image: var(--console-svg);
 }
 
 %with-copy-action-icon {
@@ -448,16 +388,6 @@
   mask-image: var(--deny-default-svg);
 }
 
-%with-deny-icon {
-  @extend %with-icon, %deny-svg-prop;
-  background-image: var(--deny-svg);
-}
-%with-deny-mask {
-  @extend %with-mask, %deny-svg-prop;
-  -webkit-mask-image: var(--deny-svg);
-  mask-image: var(--deny-svg);
-}
-
 %with-disabled-icon {
   @extend %with-icon, %disabled-svg-prop;
   background-image: var(--disabled-svg);
@@ -498,16 +428,6 @@
   mask-image: var(--edit-svg);
 }
 
-%with-ember-circle-logo-color-icon {
-  @extend %with-icon, %ember-circle-logo-color-svg-prop;
-  background-image: var(--ember-circle-logo-color-svg);
-}
-%with-ember-circle-logo-color-mask {
-  @extend %with-mask, %ember-circle-logo-color-svg-prop;
-  -webkit-mask-image: var(--ember-circle-logo-color-svg);
-  mask-image: var(--ember-circle-logo-color-svg);
-}
-
 %with-envelope-sealed-fill-icon {
   @extend %with-icon, %envelope-sealed-fill-svg-prop;
   background-image: var(--envelope-sealed-fill-svg);
@@ -628,16 +548,6 @@
   mask-image: var(--folder-fill-svg);
 }
 
-%with-folder-outline-color-icon {
-  @extend %with-icon, %folder-outline-color-svg-prop;
-  background-image: var(--folder-outline-color-svg);
-}
-%with-folder-outline-color-mask {
-  @extend %with-mask, %folder-outline-color-svg-prop;
-  -webkit-mask-image: var(--folder-outline-color-svg);
-  mask-image: var(--folder-outline-color-svg);
-}
-
 %with-folder-outline-icon {
   @extend %with-icon, %folder-outline-svg-prop;
   background-image: var(--folder-outline-svg);
@@ -718,24 +628,14 @@
   mask-image: var(--git-repository-svg);
 }
 
-%with-glimmer-logo-color-icon {
-  @extend %with-icon, %glimmer-logo-color-svg-prop;
-  background-image: var(--glimmer-logo-color-svg);
+%with-guide-icon {
+  @extend %with-icon, %guide-svg-prop;
+  background-image: var(--guide-svg);
 }
-%with-glimmer-logo-color-mask {
-  @extend %with-mask, %glimmer-logo-color-svg-prop;
-  -webkit-mask-image: var(--glimmer-logo-color-svg);
-  mask-image: var(--glimmer-logo-color-svg);
-}
-
-%with-hashicorp-logo-icon {
-  @extend %with-icon, %hashicorp-logo-svg-prop;
-  background-image: var(--hashicorp-logo-svg);
-}
-%with-hashicorp-logo-mask {
-  @extend %with-mask, %hashicorp-logo-svg-prop;
-  -webkit-mask-image: var(--hashicorp-logo-svg);
-  mask-image: var(--hashicorp-logo-svg);
+%with-guide-mask {
+  @extend %with-mask, %guide-svg-prop;
+  -webkit-mask-image: var(--guide-svg);
+  mask-image: var(--guide-svg);
 }
 
 %with-health-icon {
@@ -778,16 +678,6 @@
   mask-image: var(--history-svg);
 }
 
-%with-info-circle-fill-color-icon {
-  @extend %with-icon, %info-circle-fill-color-svg-prop;
-  background-image: var(--info-circle-fill-color-svg);
-}
-%with-info-circle-fill-color-mask {
-  @extend %with-mask, %info-circle-fill-color-svg-prop;
-  -webkit-mask-image: var(--info-circle-fill-color-svg);
-  mask-image: var(--info-circle-fill-color-svg);
-}
-
 %with-info-circle-fill-icon {
   @extend %with-icon, %info-circle-fill-svg-prop;
   background-image: var(--info-circle-fill-svg);
@@ -808,16 +698,6 @@
   mask-image: var(--info-circle-outline-svg);
 }
 
-%with-jwt-logo-icon {
-  @extend %with-icon, %jwt-logo-svg-prop;
-  background-image: var(--jwt-logo-svg);
-}
-%with-jwt-logo-mask {
-  @extend %with-mask, %jwt-logo-svg-prop;
-  -webkit-mask-image: var(--jwt-logo-svg);
-  mask-image: var(--jwt-logo-svg);
-}
-
 %with-key-icon {
   @extend %with-icon, %key-svg-prop;
   background-image: var(--key-svg);
@@ -828,16 +708,6 @@
   mask-image: var(--key-svg);
 }
 
-%with-kubernetes-logo-color-icon {
-  @extend %with-icon, %kubernetes-logo-color-svg-prop;
-  background-image: var(--kubernetes-logo-color-svg);
-}
-%with-kubernetes-logo-color-mask {
-  @extend %with-mask, %kubernetes-logo-color-svg-prop;
-  -webkit-mask-image: var(--kubernetes-logo-color-svg);
-  mask-image: var(--kubernetes-logo-color-svg);
-}
-
 %with-layers-icon {
   @extend %with-icon, %layers-svg-prop;
   background-image: var(--layers-svg);
@@ -878,6 +748,26 @@
   mask-image: var(--loading-svg);
 }
 
+%with-lock-closed-fill-icon {
+  @extend %with-icon, %lock-closed-fill-svg-prop;
+  background-image: var(--lock-closed-fill-svg);
+}
+%with-lock-closed-fill-mask {
+  @extend %with-mask, %lock-closed-fill-svg-prop;
+  -webkit-mask-image: var(--lock-closed-fill-svg);
+  mask-image: var(--lock-closed-fill-svg);
+}
+
+%with-lock-closed-outline-icon {
+  @extend %with-icon, %lock-closed-outline-svg-prop;
+  background-image: var(--lock-closed-outline-svg);
+}
+%with-lock-closed-outline-mask {
+  @extend %with-mask, %lock-closed-outline-svg-prop;
+  -webkit-mask-image: var(--lock-closed-outline-svg);
+  mask-image: var(--lock-closed-outline-svg);
+}
+
 %with-lock-closed-icon {
   @extend %with-icon, %lock-closed-svg-prop;
   background-image: var(--lock-closed-svg);
@@ -968,6 +858,26 @@
   mask-image: var(--logo-azure-color-svg);
 }
 
+%with-logo-azure-dev-ops-color-icon {
+  @extend %with-icon, %logo-azure-dev-ops-color-svg-prop;
+  background-image: var(--logo-azure-dev-ops-color-svg);
+}
+%with-logo-azure-dev-ops-color-mask {
+  @extend %with-mask, %logo-azure-dev-ops-color-svg-prop;
+  -webkit-mask-image: var(--logo-azure-dev-ops-color-svg);
+  mask-image: var(--logo-azure-dev-ops-color-svg);
+}
+
+%with-logo-azure-dev-ops-monochrome-icon {
+  @extend %with-icon, %logo-azure-dev-ops-monochrome-svg-prop;
+  background-image: var(--logo-azure-dev-ops-monochrome-svg);
+}
+%with-logo-azure-dev-ops-monochrome-mask {
+  @extend %with-mask, %logo-azure-dev-ops-monochrome-svg-prop;
+  -webkit-mask-image: var(--logo-azure-dev-ops-monochrome-svg);
+  mask-image: var(--logo-azure-dev-ops-monochrome-svg);
+}
+
 %with-logo-azure-monochrome-icon {
   @extend %with-icon, %logo-azure-monochrome-svg-prop;
   background-image: var(--logo-azure-monochrome-svg);
@@ -1008,6 +918,16 @@
   mask-image: var(--logo-consul-color-svg);
 }
 
+%with-logo-ember-circle-color-icon {
+  @extend %with-icon, %logo-ember-circle-color-svg-prop;
+  background-image: var(--logo-ember-circle-color-svg);
+}
+%with-logo-ember-circle-color-mask {
+  @extend %with-mask, %logo-ember-circle-color-svg-prop;
+  -webkit-mask-image: var(--logo-ember-circle-color-svg);
+  mask-image: var(--logo-ember-circle-color-svg);
+}
+
 %with-logo-gcp-color-icon {
   @extend %with-icon, %logo-gcp-color-svg-prop;
   background-image: var(--logo-gcp-color-svg);
@@ -1068,6 +988,16 @@
   mask-image: var(--logo-gitlab-monochrome-svg);
 }
 
+%with-logo-glimmer-color-icon {
+  @extend %with-icon, %logo-glimmer-color-svg-prop;
+  background-image: var(--logo-glimmer-color-svg);
+}
+%with-logo-glimmer-color-mask {
+  @extend %with-mask, %logo-glimmer-color-svg-prop;
+  -webkit-mask-image: var(--logo-glimmer-color-svg);
+  mask-image: var(--logo-glimmer-color-svg);
+}
+
 %with-logo-google-color-icon {
   @extend %with-icon, %logo-google-color-svg-prop;
   background-image: var(--logo-google-color-svg);
@@ -1078,6 +1008,36 @@
   mask-image: var(--logo-google-color-svg);
 }
 
+%with-logo-google-monochrome-icon {
+  @extend %with-icon, %logo-google-monochrome-svg-prop;
+  background-image: var(--logo-google-monochrome-svg);
+}
+%with-logo-google-monochrome-mask {
+  @extend %with-mask, %logo-google-monochrome-svg-prop;
+  -webkit-mask-image: var(--logo-google-monochrome-svg);
+  mask-image: var(--logo-google-monochrome-svg);
+}
+
+%with-logo-hashicorp-color-icon {
+  @extend %with-icon, %logo-hashicorp-color-svg-prop;
+  background-image: var(--logo-hashicorp-color-svg);
+}
+%with-logo-hashicorp-color-mask {
+  @extend %with-mask, %logo-hashicorp-color-svg-prop;
+  -webkit-mask-image: var(--logo-hashicorp-color-svg);
+  mask-image: var(--logo-hashicorp-color-svg);
+}
+
+%with-logo-jwt-color-icon {
+  @extend %with-icon, %logo-jwt-color-svg-prop;
+  background-image: var(--logo-jwt-color-svg);
+}
+%with-logo-jwt-color-mask {
+  @extend %with-mask, %logo-jwt-color-svg-prop;
+  -webkit-mask-image: var(--logo-jwt-color-svg);
+  mask-image: var(--logo-jwt-color-svg);
+}
+
 %with-logo-kubernetes-color-icon {
   @extend %with-icon, %logo-kubernetes-color-svg-prop;
   background-image: var(--logo-kubernetes-color-svg);
@@ -1118,6 +1078,16 @@
   mask-image: var(--logo-nomad-color-svg);
 }
 
+%with-logo-oidc-color-icon {
+  @extend %with-icon, %logo-oidc-color-svg-prop;
+  background-image: var(--logo-oidc-color-svg);
+}
+%with-logo-oidc-color-mask {
+  @extend %with-mask, %logo-oidc-color-svg-prop;
+  -webkit-mask-image: var(--logo-oidc-color-svg);
+  mask-image: var(--logo-oidc-color-svg);
+}
+
 %with-logo-okta-color-icon {
   @extend %with-icon, %logo-okta-color-svg-prop;
   background-image: var(--logo-okta-color-svg);
@@ -1258,16 +1228,6 @@
   mask-image: var(--minus-plain-svg);
 }
 
-%with-minus-square-fill-color-icon {
-  @extend %with-icon, %minus-square-fill-color-svg-prop;
-  background-image: var(--minus-square-fill-color-svg);
-}
-%with-minus-square-fill-color-mask {
-  @extend %with-mask, %minus-square-fill-color-svg-prop;
-  -webkit-mask-image: var(--minus-square-fill-color-svg);
-  mask-image: var(--minus-square-fill-color-svg);
-}
-
 %with-minus-square-fill-icon {
   @extend %with-icon, %minus-square-fill-svg-prop;
   background-image: var(--minus-square-fill-svg);
@@ -1278,16 +1238,6 @@
   mask-image: var(--minus-square-fill-svg);
 }
 
-%with-minus-icon {
-  @extend %with-icon, %minus-svg-prop;
-  background-image: var(--minus-svg);
-}
-%with-minus-mask {
-  @extend %with-mask, %minus-svg-prop;
-  -webkit-mask-image: var(--minus-svg);
-  mask-image: var(--minus-svg);
-}
-
 %with-module-icon {
   @extend %with-icon, %module-svg-prop;
   background-image: var(--module-svg);
@@ -1318,16 +1268,6 @@
   mask-image: var(--more-vertical-svg);
 }
 
-%with-nomad-logo-color-icon {
-  @extend %with-icon, %nomad-logo-color-svg-prop;
-  background-image: var(--nomad-logo-color-svg);
-}
-%with-nomad-logo-color-mask {
-  @extend %with-mask, %nomad-logo-color-svg-prop;
-  -webkit-mask-image: var(--nomad-logo-color-svg);
-  mask-image: var(--nomad-logo-color-svg);
-}
-
 %with-notification-disabled-icon {
   @extend %with-icon, %notification-disabled-svg-prop;
   background-image: var(--notification-disabled-svg);
@@ -1358,16 +1298,6 @@
   mask-image: var(--notification-outline-svg);
 }
 
-%with-oidc-logo-icon {
-  @extend %with-icon, %oidc-logo-svg-prop;
-  background-image: var(--oidc-logo-svg);
-}
-%with-oidc-logo-mask {
-  @extend %with-mask, %oidc-logo-svg-prop;
-  -webkit-mask-image: var(--oidc-logo-svg);
-  mask-image: var(--oidc-logo-svg);
-}
-
 %with-outline-icon {
   @extend %with-icon, %outline-svg-prop;
   background-image: var(--outline-svg);
@@ -1408,6 +1338,36 @@
   mask-image: var(--path-svg);
 }
 
+%with-play-fill-icon {
+  @extend %with-icon, %play-fill-svg-prop;
+  background-image: var(--play-fill-svg);
+}
+%with-play-fill-mask {
+  @extend %with-mask, %play-fill-svg-prop;
+  -webkit-mask-image: var(--play-fill-svg);
+  mask-image: var(--play-fill-svg);
+}
+
+%with-play-outline-icon {
+  @extend %with-icon, %play-outline-svg-prop;
+  background-image: var(--play-outline-svg);
+}
+%with-play-outline-mask {
+  @extend %with-mask, %play-outline-svg-prop;
+  -webkit-mask-image: var(--play-outline-svg);
+  mask-image: var(--play-outline-svg);
+}
+
+%with-play-plain-icon {
+  @extend %with-icon, %play-plain-svg-prop;
+  background-image: var(--play-plain-svg);
+}
+%with-play-plain-mask {
+  @extend %with-mask, %play-plain-svg-prop;
+  -webkit-mask-image: var(--play-plain-svg);
+  mask-image: var(--play-plain-svg);
+}
+
 %with-plus-circle-fill-icon {
   @extend %with-icon, %plus-circle-fill-svg-prop;
   background-image: var(--plus-circle-fill-svg);
@@ -1618,16 +1578,6 @@
   mask-image: var(--search-svg);
 }
 
-%with-service-identity-icon {
-  @extend %with-icon, %service-identity-svg-prop;
-  background-image: var(--service-identity-svg);
-}
-%with-service-identity-mask {
-  @extend %with-mask, %service-identity-svg-prop;
-  -webkit-mask-image: var(--service-identity-svg);
-  mask-image: var(--service-identity-svg);
-}
-
 %with-settings-icon {
   @extend %with-icon, %settings-svg-prop;
   background-image: var(--settings-svg);
@@ -1678,16 +1628,6 @@
   mask-image: var(--star-outline-svg);
 }
 
-%with-star-icon {
-  @extend %with-icon, %star-svg-prop;
-  background-image: var(--star-svg);
-}
-%with-star-mask {
-  @extend %with-mask, %star-svg-prop;
-  -webkit-mask-image: var(--star-svg);
-  mask-image: var(--star-svg);
-}
-
 %with-sub-left-icon {
   @extend %with-icon, %sub-left-svg-prop;
   background-image: var(--sub-left-svg);
@@ -1748,16 +1688,6 @@
   mask-image: var(--tag-svg);
 }
 
-%with-terraform-logo-color-icon {
-  @extend %with-icon, %terraform-logo-color-svg-prop;
-  background-image: var(--terraform-logo-color-svg);
-}
-%with-terraform-logo-color-mask {
-  @extend %with-mask, %terraform-logo-color-svg-prop;
-  -webkit-mask-image: var(--terraform-logo-color-svg);
-  mask-image: var(--terraform-logo-color-svg);
-}
-
 %with-trash-icon {
   @extend %with-icon, %trash-svg-prop;
   background-image: var(--trash-svg);
@@ -1897,9 +1827,3 @@
   -webkit-mask-image: var(--webhook-svg);
   mask-image: var(--webhook-svg);
 }
-
-%without-mask {
-  -webkit-mask-image: none;
-  mask-image: none;
-  background-color: var(--transparent) !important;
-}

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

@@ -1,3 +1,4 @@
 @import './base-variables';
 @import './base-placeholders';
 @import './icon-placeholders';
+@import './overrides';

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

@@ -0,0 +1,5 @@
+%without-mask {
+  -webkit-mask-image: none;
+  mask-image: none;
+  background-color: $transparent !important;
+}

ui/packages/consul-ui/app/styles/components.scss

@@ -12,6 +12,7 @@
 @import 'consul-ui/components/sliding-toggle/index';
 @import 'consul-ui/components/table/index';
 @import 'consul-ui/components/toggle-button/index';
+@import 'consul-ui/components/flash-message';
 
 /**/
 
@@ -28,7 +29,6 @@
 @import './components/secret-button';
 @import './components/pill';
 @import './components/table';
-@import './components/flash-message';
 @import './components/code-editor';
 @import './components/confirmation-dialog';
 @import './components/auth-form';

ui/packages/consul-ui/app/styles/components/flash-message/index.scss

@@ -1,2 +0,0 @@
-@import './skin';
-@import './layout';

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

@@ -19,16 +19,16 @@ span.policy-service-identity::before {
   content: 'Service Identity: ';
 }
 %pill.kubernetes::before {
-  @extend %with-kubernetes-logo-color-icon, %as-pseudo;
+  @extend %with-logo-kubernetes-color-icon, %as-pseudo;
 }
 %pill.terraform::before {
-  @extend %with-terraform-logo-color-icon, %as-pseudo;
+  @extend %with-logo-terraform-color-icon, %as-pseudo;
 }
 %pill.nomad::before {
-  @extend %with-nomad-logo-color-icon, %as-pseudo;
+  @extend %with-logo-nomad-color-icon, %as-pseudo;
 }
 %pill.consul::before {
-  @extend %with-consul-logo-color-icon, %as-pseudo;
+  @extend %with-logo-consul-color-icon, %as-pseudo;
 }
 %pill.aws::before {
   @extend %with-logo-aws-color-icon, %as-pseudo;
@@ -37,8 +37,8 @@ span.policy-service-identity::before {
   @extend %with-star-outline-mask, %as-pseudo;
 }
 %pill.jwt::before {
-  @extend %with-jwt-logo-icon, %as-pseudo;
+  @extend %with-logo-jwt-color-icon, %as-pseudo;
 }
 %pill.oidc::before {
-  @extend %with-oidc-logo-icon, %as-pseudo;
+  @extend %with-logo-oidc-color-icon, %as-pseudo;
 }

ui/packages/consul-ui/app/styles/components/popover-select.scss

@@ -50,10 +50,10 @@
   @extend %with-logo-kubernetes-color-icon, %as-pseudo;
 }
 %popover-select .jwt button::before {
-  @extend %with-jwt-logo-icon, %as-pseudo;
+  @extend %with-logo-jwt-color-icon, %as-pseudo;
 }
 %popover-select .oidc button::before {
-  @extend %with-oidc-logo-icon, %as-pseudo;
+  @extend %with-logo-oidc-color-icon, %as-pseudo;
 }
 %popover-select .consul button::before {
   @extend %with-logo-consul-color-icon, %as-pseudo;

ui/packages/consul-ui/app/styles/debug.scss

@@ -7,6 +7,7 @@
 @import 'consul-ui/components/csv-list/debug';
 @import 'consul-ui/components/horizontal-kv-list/debug';
 @import 'consul-ui/components/icon-definition/debug';
+@import 'consul-ui/components/inline-alert/debug';
 
 html.is-debug body > .brand-loader {
   display: none !important;
@@ -28,16 +29,16 @@ html.is-debug body > .brand-loader {
     }
     li.consul-components a::before,
     li.components a::before {
-      @extend %with-glimmer-logo-color-icon, %as-pseudo;
+      @extend %with-logo-glimmer-color-icon, %as-pseudo;
       margin-right: 5px;
     }
     li.consul-components.css-component a::before,
     li.components.css-component a::before {
-      @extend %with-glimmer-logo-color-icon, %as-pseudo;
+      @extend %with-logo-glimmer-color-icon, %as-pseudo;
     }
     li.consul-components.ember-component a::before,
     li.components.ember-component a::before {
-      @extend %with-ember-circle-logo-color-icon, %as-pseudo;
+      @extend %with-logo-ember-circle-color-icon, %as-pseudo;
     }
   }
   main {