Merge pull request #251 from rebeccaalpert/gray

fix(Message/MessageLoading/FileDetailsLabel): Update to PF tokens

Author: nicolethoen

packages/module/src/Message/Message.scss

@@ -2,9 +2,7 @@
 // Chatbot Message
 // ============================================================================
 .pf-chatbot__message {
-  --pf-t--chatbot-message--type--background--color--default: var(
-    --pf-t--global--background--color--action--plain--hover
-  ); // needs to be updated to the correct semantic token when it exists
+  --pf-t--chatbot-message--type--background--color--default: var(--pf-t--global--background--color--tertiary--default);
   --pf-t--chatbot-message--type--background--color--primary: var(--pf-t--global--color--brand--default);
   --pf-t--chatbot-message--type--padding: var(--pf-t--global--spacer--sm);
   --pf-t--chatbot-message--type--text--color--default: var(--pf-t--global--text--color--regular);

packages/module/src/Message/MessageLoading.scss

@@ -2,11 +2,9 @@
 // Chatbot Main - Message - Loading
 // ============================================================================
 .pf-chatbot__message-loading {
-  --pf-t--chatbot-message--dots--background--color: var(--pf-t--global--text--color--regular);
-
   width: 36px;
   padding: var(--pf-t--chatbot-message--type--padding);
-  background-color: var(--pf-t--chatbot-message--type--background--color--default);
+  background-color: var(--pf-t--global--background--color--tertiary--default);
   border-radius: var(--pf-t--chatbot-message--type--border--radius);
 
   &-dots {
@@ -15,9 +13,7 @@
     width: 4px;
     height: 4px;
     margin-left: var(--pf-t--global--spacer--sm);
-    background-color: var(--pf-t--global--text--color--regular);
     border-radius: var(--pf-t--global--border--radius--pill);
-    color: var(--pf-t--global--text--color--regular);
     animation: dot-flashing var(--pf-t--global--motion--duration--2xl) infinite linear alternate;
     animation-delay: calc(var(--pf-t--global--motion--duration--2xl) * 0.33333333333);
   }
@@ -33,8 +29,6 @@
     width: 4px;
     height: 4px;
     border-radius: var(--pf-t--global--border--radius--pill);
-    background-color: var(--pf-t--global--text--color--regular);
-    color: var(--pf-t--global--text--color--regular);
     animation: dot-flashing var(--pf-t--global--motion--duration--2xl) infinite alternate;
     animation-delay: var(--pf-t--global--motion--delay--none);
   }
@@ -43,19 +37,17 @@
     width: 4px;
     height: 4px;
     border-radius: var(--pf-t--global--border--radius--pill);
-    background-color: var(--pf-t--global--text--color--regular);
-    color: var(--pf-t--global--text--color--regular);
     animation: dot-flashing var(--pf-t--global--motion--duration--2xl) infinite alternate;
     animation-delay: calc(var(--pf-t--global--motion--duration--2xl) * 0.66666666666);
   }
 
   @keyframes dot-flashing {
     0% {
-      background-color: var(--pf-t--global--text--color--regular);
+      background-color: var(--pf-t--global--background--color--inverse--default);
     }
     50%,
     100% {
-      background-color: var(--pf-t--chatbot-message--type--background--color--default);
+      background-color: rgba(41, 41, 41, 0.25);
     }
   }
 }