fix(Message): Adjust color contrast on AI label (#593)

IFD reported that the color contrast was too low. Upon review, team realized that Figma designs used different colors. Adjusted to colors from Figma and also cleaned up some remaining custom tokens.

Author: rebeccaalpert

packages/module/src/Chatbot/Chatbot.scss

@@ -9,7 +9,7 @@
   flex-direction: column;
   width: 30rem;
   height: 70vh;
-  background-color: var(--pf-t--chatbot--background);
+  background-color: var(--pf-t--global--background--color--secondary--default);
   border-radius: var(--pf-t--global--border--radius--medium);
   box-shadow: var(--pf-t--global--box-shadow--lg);
   font-size: var(--pf-t--global--font--size--md);

packages/module/src/ChatbotContent/ChatbotContent.scss

@@ -3,7 +3,7 @@
 // ============================================================================
 .pf-chatbot__content {
   position: relative;
-  background-color: var(--pf-t--chatbot--background);
+  background-color: var(--pf-t--global--background--color--secondary--default);
   overflow-y: auto;
   overflow: hidden; // needed in Red Hat Developer Hub workspace
   flex: 1; // needed in Composer AI

packages/module/src/ChatbotFooter/ChatbotFooter.scss

@@ -6,7 +6,7 @@
 // ============================================================================
 .pf-chatbot__footer {
   --pf-chatbot__footer--RowGap: var(--pf-t--global--spacer--md);
-  background-color: var(--pf-t--chatbot--background);
+  background-color: var(--pf-t--global--background--color--secondary--default);
   display: flex;
   flex-direction: column;
   row-gap: var(--pf-chatbot__footer--RowGap);

packages/module/src/ChatbotHeader/ChatbotHeader.scss

@@ -9,7 +9,7 @@
   grid-template-columns: 1fr auto;
   gap: var(--pf-t--global--spacer--sm);
   position: relative; // this is so focus ring on parent chatbot doesn't include header
-  background-color: var(--pf-t--chatbot--background);
+  background-color: var(--pf-t--global--background--color--secondary--default);
   justify-content: space-between;
   padding: var(--pf-t--global--spacer--lg);
 
@@ -76,7 +76,7 @@
 .pf-chatbot--drawer,
 .pf-chatbot--docked {
   .pf-chatbot__header {
-    background-color: var(--pf-t--chatbot--background);
+    background-color: var(--pf-t--global--background--color--secondary--default);
   }
 }
 

packages/module/src/ChatbotToggle/ChatbotToggle.scss

@@ -6,12 +6,12 @@
   inset-block-end: var(--pf-t--global--spacer--md);
   inset-inline-end: var(--pf-t--global--spacer--md);
   background-color: var(--pf-t--global--background--color--inverse--default);
-  --pf-v6-c-button__icon--Color: var(--pf-t--chatbot-toggle--color);
+  --pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--inverse);
   padding: var(--pf-t--global--spacer--md);
 
   &:hover,
   &:focus {
-    background-color: var(--pf-t--chatbot-toggle--background--hover);
+    background-color: var(--pf-t--color--gray--70);
   }
 
   .pf-v6-c-button__icon {

packages/module/src/Message/Message.scss

@@ -48,20 +48,22 @@
 
     // Author name
     .pf-chatbot__message-name {
-      font-family: var(--pf-t--chatbot--heading--font-family);
+      font-family: var(
+        --pf-v6-c-content--heading--FontFamily,
+        redhatdisplayvf,
+        redhatdisplay,
+        helvetica,
+        arial,
+        sans-serif
+      );
       font-weight: 600;
       font-size: var(--pf-t--global--font--size--sm);
     }
 
     // Badge
     .pf-v6-c-label {
-      --pf-v6-c-label--m-outline--BorderColor: var(--pf-t--global--border--color--on-secondary);
       --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--xs);
       font-weight: var(--pf-t--global--font--weight--body--bold);
-
-      .pf-v6-c-label__content {
-        --pf-v6-c-label--Color: var(--pf-t--global--border--color--on-secondary);
-      }
     }
 
     // Timestamp

packages/module/src/MessageBar/SendButton.scss

@@ -13,11 +13,11 @@
 
   &:hover,
   &:focus {
-    background-color: var(--pf-t--chatbot--blue-icon--background--color--hover);
+    background-color: rgba(146, 197, 249, 0.25); // --pf-t--global--color--nonstatus--blue--default @ 25%;
     color: var(--pf-t--global--color--brand--hover);
 
     .pf-v6-c-button__icon {
-      color: var(--pf-t--chatbot--blue-icon--fill--hover);
+      color: var(--pf-t--global--color--brand--hover);
     }
   }
 }
@@ -37,7 +37,7 @@
 
   .pf-v6-c-button.pf-chatbot__button--send:hover,
   .pf-v6-c-button.pf-chatbot__button--send:focus {
-    background-color: var(--pf-t--chatbot--blue-icon--background--color--hover);
+    background-color: rgba(146, 197, 249, 0.25); // --pf-t--global--color--nonstatus--blue--default @ 25%;
   }
 }
 

packages/module/src/MessageBox/JumpButton.scss

@@ -14,7 +14,7 @@
   border-radius: var(--pf-t--global--border--radius--pill) !important;
   --pf-v6-c-button--MinWidth: 2rem !important;
   background-color: var(--pf-t--global--background--color--primary--default) !important;
-  border: 1px solid var(--pf-t--chatbot--border) !important;
+  border: 1px solid var(--pf-t--global--border--color--default) !important;
   box-shadow: var(--pf-t--global--box-shadow--sm);
   color: var(--pf-t--global--icon--color--subtle) !important;
   transform: translate3d(-50%, 0, 0) !important;

packages/module/src/main.scss

@@ -33,58 +33,6 @@
 @import './SourceDetailsMenuItem/SourceDetailsMenuItem';
 @import './TermsOfUse/TermsOfUse';
 
-:where(:root) {
-  // ============================================================================
-  // Chatbot Custom Default Tokens
-  // ============================================================================
-
-  --pf-t--chatbot--heading--font-family: var(
-    --pf-v6-c-content--heading--FontFamily,
-    redhatdisplayvf,
-    redhatdisplay,
-    helvetica,
-    arial,
-    sans-serif
-  );
-
-  --pf-t--chatbot--illustration--fill: var(--pf-t--color--red--50);
-  --pf-t--chatbot--code--background: var(--pf-t--color--gray--20);
-
-  --pf-t--chatbot-toggle--background--hover: var(--pf-t--color--gray--70);
-
-  --pf-t--chatbot--blue-icon--background--color--hover: rgba(
-    146,
-    197,
-    249,
-    0.25
-  ); // --pf-t--global--color--nonstatus--blue--default @ 25%
-  --pf-t--chatbot--blue-icon--fill--hover: var(--pf-t--global--color--brand--hover);
-
-  // ============================================================================
-  // Chatbot Default tokens using PF semantic tokens
-  // ============================================================================
-  --pf-t--chatbot-toggle--color: var(--pf-t--global--icon--color--inverse);
-  --pf-t--chatbot--background: var(--pf-t--global--background--color--secondary--default);
-  --pf-t--chatbot--border: var(--pf-t--global--border--color--default);
-
-  --pf-t--chatbot--icon--fill--active: var(--pf-t--global--text--color--regular);
-
-  --pf-t--chatbot--blue-icon--fill: var(--pf-t--global--color--brand--default);
-}
-
-// ============================================================================
-// Chatbot Custom Dark Theme Tokens
-// ============================================================================
-:where(.pf-v6-theme-dark) {
-  --pf-t--chatbot--illustration--fill: var(--pf-t--color--white);
-  --pf-t--chatbot--code--background: var(--pf-t--color--gray--60);
-
-  --pf-t--chatbot-toggle--background--hover: var(--pf-t--color--gray--20);
-
-  --pf-t--chatbot--blue-icon--background--color--hover: var(--pf-t--global--color--brand--hover);
-  --pf-t--chatbot--blue-icon--fill--hover: var(--pf-t--global--icon--color--inverse);
-}
-
 .ws-full-page-utils {
   left: 0 !important;
   right: auto !important;