fix: Yellow color shades are inconsistent (#4391)

app/javascript/dashboard/assets/scss/_utility-helpers.scss

@@ -51,10 +51,6 @@
   background-color: var(--white);
 }
 
-.text-y-800 {
-  color: var(--y-800);
-}
-
 .text-ellipsis {
   overflow: hidden;
   text-overflow: ellipsis;

app/javascript/dashboard/components/ui/Banner.vue

@@ -112,10 +112,10 @@ export default {
   }
 
   &.warning {
-    background: var(--y-800);
-    color: var(--s-600);
+    background: var(--y-600);
+    color: var(--y-500);
     a {
-      color: var(--s-600);
+      color: var(--y-500);
     }
   }
 

app/javascript/dashboard/components/ui/Label.vue

@@ -157,7 +157,7 @@ export default {
   &.warning {
     background: var(--y-100);
     color: var(--y-900);
-    border: 1px solid var(--y-300);
+    border: 1px solid var(--y-200);
     a {
       color: var(--y-900);
     }

app/javascript/dashboard/components/widgets/Thumbnail.vue

@@ -209,7 +209,7 @@ export default {
   }
 
   .user-online-status--busy {
-    background: var(--y-700);
+    background: var(--y-500);
   }
 
   .user-online-status--offline {

app/javascript/dashboard/components/widgets/conversation/AvailabilityStatusBadge.vue

@@ -23,7 +23,7 @@ export default {
     background: var(--s-500);
   }
   &__busy {
-    background: var(--y-400);
+    background: var(--y-500);
   }
 }
 </style>

app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue

@@ -14,8 +14,8 @@
           <fluent-icon
             v-if="!isHMACVerified"
             v-tooltip="$t('CONVERSATION.UNVERIFIED_SESSION')"
-            class="text-y-800"
             size="14"
+            class="hmac-warning__icon"
             icon="warning"
           />
         </h3>
@@ -181,7 +181,11 @@ export default {
 
   .snoozed--display-text {
     font-weight: var(--font-weight-medium);
-    color: var(--y-900);
+    color: var(--y-600);
   }
 }
+
+.hmac-warning__icon {
+  color: var(--y-600);
+}
 </style>