ui: Alias all our Structure Icons to Flight Icons (#12209)

.changelog/12209.txt

@@ -0,0 +1,3 @@
+```release-note:enhancement
+ui: Use @hashicorp/flight icons for all our icons.
+```

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

@@ -100,7 +100,6 @@
 %sort-button::before {
   @extend %with-sort-mask, %as-pseudo;
   position: relative;
-  top: 4px;
   width: 16px;
   height: 16px;
 }

ui/packages/consul-ui/app/components/consul/external-source/index.scss

@@ -1,3 +1,31 @@
 .consul-external-source {
   @extend %pill-200, %frame-gray-600, %p1;
 }
+.consul-external-source.kubernetes::before {
+  @extend %with-logo-kubernetes-color-icon, %as-pseudo;
+}
+.consul-external-source.terraform::before {
+  @extend %with-logo-terraform-color-icon, %as-pseudo;
+}
+.consul-external-source.nomad::before {
+  @extend %with-logo-nomad-color-icon, %as-pseudo;
+}
+.consul-external-source.consul::before,
+.consul-external-source.consul-api-gateway::before {
+  @extend %with-logo-consul-color-icon, %as-pseudo;
+}
+.consul-external-source.vault::before {
+  @extend %with-vault-100;
+}
+.consul-external-source.aws::before {
+  @extend %with-aws-100;
+}
+.consul-external-source.leader::before {
+  @extend %with-star-outline-mask, %as-pseudo;
+}
+.consul-external-source.jwt::before {
+  @extend %with-logo-jwt-color-icon, %as-pseudo;
+}
+.consul-external-source.oidc::before {
+  @extend %with-logo-oidc-color-icon, %as-pseudo;
+}

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

@@ -1,9 +1,7 @@
 %pill-allow::before,
 %pill-deny::before,
 %pill-l7::before {
-  @extend %as-pseudo;
   margin-right: 5px;
-  font-size: 0.9em;
 }
 %pill-allow,
 %pill-deny,
@@ -24,11 +22,11 @@
   @extend %frame-gray-900;
 }
 %pill-allow::before {
-  @extend %with-arrow-right-mask;
+  @extend %with-allow-300;
 }
 %pill-deny::before {
-  @extend %with-deny-color-mask;
+  @extend %with-deny-300;
 }
 %pill-l7::before {
-  @extend %with-layers-mask;
+  @extend %with-l7-300;
 }

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

@@ -1,12 +1,11 @@
 .consul-intention-fieldsets {
   .value-allow > :last-child::before {
-    @extend %with-arrow-right-mask, %as-pseudo;
-    color: rgb(var(--tone-green-500));
+    @extend %with-allow-500;
   }
   .value-deny > :last-child::before {
-    @extend %with-deny-color-icon, %as-pseudo;
+    @extend %with-deny-500;
   }
   .value- > :last-child::before {
-    @extend %with-layers-mask, %as-pseudo;
+    @extend %with-l7-500;
   }
 }

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

@@ -20,31 +20,3 @@ span.policy-node-identity::before {
 span.policy-service-identity::before {
   content: 'Service Identity: ';
 }
-%pill.kubernetes::before {
-  @extend %with-logo-kubernetes-color-icon, %as-pseudo;
-}
-%pill.terraform::before {
-  @extend %with-logo-terraform-color-icon, %as-pseudo;
-}
-%pill.nomad::before {
-  @extend %with-logo-nomad-color-icon, %as-pseudo;
-}
-%pill.consul::before,
-%pill.consul-api-gateway::before {
-  @extend %with-logo-consul-color-icon, %as-pseudo;
-}
-%pill.vault::before {
-  @extend %with-vault-300;
-}
-%pill.aws::before {
-  @extend %with-logo-aws-color-icon, %as-pseudo;
-}
-%pill.leader::before {
-  @extend %with-star-outline-mask, %as-pseudo;
-}
-%pill.jwt::before {
-  @extend %with-logo-jwt-color-icon, %as-pseudo;
-}
-%pill.oidc::before {
-  @extend %with-logo-oidc-color-icon, %as-pseudo;
-}

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

@@ -6,7 +6,8 @@
 }
 %pill::before {
   margin-right: 4px;
-  font-size: 0.8em;
+  width: 0.75rem !important; /* 12px */
+  height: 0.75rem !important; /* 12px */
 }
 %pill-200 {
   @extend %pill;

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

@@ -50,7 +50,7 @@
   color: rgb(var(--tone-gray-500));
 }
 %popover-select .aws button::before {
-  @extend %with-logo-aws-color-icon, %as-pseudo;
+  @extend %with-aws-300;
 }
 %popover-select .kubernetes button::before {
   @extend %with-logo-kubernetes-color-icon, %as-pseudo;

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

@@ -1,3 +1,11 @@
+%theme-light {
+  --theme-dark-none: ;
+  --theme-light-none: initial;
+}
+%theme-dark {
+  --theme-dark-none: initial;
+  --theme-light-none: ;
+}
 %with-icon {
   background-repeat: no-repeat;
   background-position: center;
@@ -20,8 +28,8 @@
   content: '';
   visibility: visible;
   background-size: contain;
-  width: 1.2em;
-  height: 1.2em;
+  width: 1rem; /* 16px */
+  height: 1rem; /* 16px */
   vertical-align: text-top;
 }
 %led-icon {

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

@@ -1,4 +1,71 @@
+%with-vault-100 {
+  @extend %with-vault-16-mask, %as-pseudo;
+  color: rgb(var(--tone-vault-500));
+}
 %with-vault-300 {
   @extend %with-vault-16-mask, %as-pseudo;
   color: rgb(var(--tone-vault-500));
 }
+%with-aws-100,
+%with-aws-300 {
+  @extend %aws-color-16-svg-prop;
+  @extend %with-icon, %as-pseudo;
+
+  background-image: var(--theme-dark-none) var(--aws-color-16-svg);
+
+  -webkit-mask-image: var(--theme-light-none) var(--aws-color-16-svg);
+  -webkit-mask-repeat: var(--theme-light-none) no-repeat;
+  -webkit-mask-position: var(--theme-light-none) center;
+  mask-image: var(--theme-light-none) var(--aws-color-16-svg);
+  mask-repeat: var(--theme-light-none) no-repeat;
+  mask-position: var(--theme-light-none) center;
+  background-color: var(--theme-light-none) rgb(var(--white));
+}
+%with-allow-100,
+%with-aws-100,
+%with-deny-100,
+%with-l7-100,
+%with-vault-100 {
+  width: 0.75rem; /* 12px */
+  height: 0.75rem; /* 12px */
+}
+%with-allow-500,
+%with-deny-500,
+%with-l7-500 {
+  width: 1.25rem; /* 20px */
+  height: 1.25rem; /* 20px */
+}
+%with-allow-300,
+%with-allow-500 {
+  color: rgb(var(--tone-green-500));
+}
+%with-deny-300,
+%with-deny-500 {
+  color: rgb(var(--tone-red-500));
+}
+%with-allow-300,
+%with-allow-500,
+%with-deny-300,
+%with-deny-500,
+%with-l7-300,
+%with-l7-500 {
+  @extend %as-pseudo;
+}
+%with-allow-300 {
+  @extend %with-arrow-right-16-mask;
+}
+%with-allow-500 {
+  @extend %with-arrow-right-24-mask;
+}
+%with-deny-300 {
+  @extend %with-skip-16-mask;
+}
+%with-deny-500 {
+  @extend %with-skip-24-mask;
+}
+%with-l7-300 {
+  @extend %with-layers-16-mask;
+}
+%with-l7-500 {
+  @extend %with-layers-24-mask;
+}