Use HDS utilities instead of tailwind peer details

ui/packages/consul-peerings/app/components/consul/peer/bento-box/index.hbs

@@ -2,7 +2,7 @@
   <div class="flex h-24 p-6 overflow-x-auto space-x-12">
     <div class="shrink-0">
       <div
-        class="mb-2 hds-typography-body-200 hds-font-weight-semibold text-hds-foreground-primary"
+        class="mb-2 hds-typography-body-200 hds-font-weight-semibold hds-foreground-primary"
       >Status</div>
       <div class="flex items-center">
         <Peerings::Badge @peering={{@peering}} />
@@ -10,14 +10,15 @@
     </div>
     <div class="shrink-0">
       <div
-        class="mb-2 hds-typography-body-200 hds-font-weight-semibold text-hds-foreground-primary"
+        class="mb-2 hds-typography-body-200 hds-font-weight-semibold hds-foreground-primary"
       >Latest heartbeat</div>
       <div class="flex items-center">
         {{#if @peering.LastHeartbeat}}
           {{#let (smart-date-format @peering.LastHeartbeat) as |smartDate|}}
             <FlightIcon
               @name="activity"
-              class="mr-0.5 text-hds-foreground-faint fill-current"
+              @color="var(--token-color-foreground-faint)"
+              class="mr-0.5"
             />
             {{#if smartDate.isNearDate}}
               <span {{tooltip smartDate.friendly}}>{{smartDate.relative}}</span>
@@ -32,7 +33,7 @@
     </div>
     <div class="shrink-0">
       <div
-        class="mb-2 hds-typography-body-200 hds-font-weight-semibold text-hds-foregrouny-primary"
+        class="mb-2 hds-typography-body-200 hds-font-weight-semibold hds-foreground-primary"
       >Latest receipt</div>
       <div class="flex items-center">
         {{#if @peering.LastReceive}}
@@ -50,7 +51,7 @@
     </div>
     <div class="shrink-0">
       <div
-        class="mb-2 hds-typography-body-200 hds-font-weight-semibold text-hds-foreground-primary"
+        class="mb-2 hds-typography-body-200 hds-font-weight-semibold hds-foreground-primary"
       >Latest send</div>
       <div class="flex items-center">
         {{#if @peering.LastSend}}

ui/packages/consul-peerings/app/templates/dc/peers/show/exported.hbs

@@ -53,10 +53,12 @@
                     @items={{search.data.items}}
                     as |service index|
                   >
-                    <li class="px-3 h-12 border-b border-hds-border-primary">
+                    <li
+                      class="px-3 h-12 hds-border-primary border-t-0 border-l-0 border-r-0"
+                    >
                       <a
                         data-test-service-name
-                        class="hds-typography-display-300 text-hds-foreground-strong hds-font-weight-semibold h-full w-full flex items-center"
+                        class="hds-typography-display-300 hds-foreground-strong hds-font-weight-semibold h-full w-full flex items-center"
                         href={{href-to
                           "dc.services.show.index"
                           service.Name