feat(MessageBar): Add support for high contrast (#734)

Author: rebeccaalpert

packages/module/src/MessageBar/MessageBar.scss

@@ -21,22 +21,42 @@
   justify-content: flex-end;
   background-color: var(--pf-t--global--background--color--primary--default);
   border-radius: calc(var(--pf-t--global--border--radius--medium) * 2);
-  transition: box-shadow var(--pf-t--global--motion--timing-function--accelerate)
+  transition: border-color var(--pf-t--global--motion--timing-function--accelerate)
     var(--pf-t--global--motion--duration--sm);
+  position: relative;
+  border: var(--pf-t--global--border--width--control--default) solid transparent;
 
   overflow: hidden;
 
-  &:not(.pf-v6-m-thinking) {
-    &.pf-m-primary {
-      box-shadow: inset 0 0 0 1px var(--pf-t--global--border--color--default);
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    border: var(--pf-t--global--border--width--control--default) solid transparent;
+    pointer-events: none;
+    transition:
+      border-color var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--sm),
+      border-width var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--sm);
+  }
+
+  &.pf-m-primary {
+    &::after {
+      border-color: var(--pf-t--global--border--color--default);
     }
+  }
 
-    &:hover {
-      box-shadow: inset 0 0 0 1px var(--pf-t--global--border--color--default);
+  &:hover {
+    &::after {
+      border-color: var(--pf-t--global--border--color--default);
+      border-width: var(--pf-t--global--border--width--control--hover);
     }
+  }
 
-    &:focus-within {
-      box-shadow: inset 0 0 0 2px var(--pf-t--global--color--brand--default);
+  &:focus-within {
+    &::after {
+      border-color: var(--pf-t--global--color--brand--default);
+      border-width: var(--pf-t--global--border--width--control--clicked);
     }
   }
 
@@ -133,3 +153,14 @@
     padding-block-end: var(--pf-t--global--spacer--md);
   }
 }
+
+// ============================================================================
+// High contrast styles
+// ============================================================================
+:root:where(.pf-v6-theme-high-contrast) {
+  .pf-chatbot__message-bar {
+    &::after {
+      border-color: var(--pf-t--global--border--color--default);
+    }
+  }
+}