diff --git a/packages/module/src/MessageBar/MessageBar.scss b/packages/module/src/MessageBar/MessageBar.scss index 602fcd1aa..ae45a13f2 100644 --- a/packages/module/src/MessageBar/MessageBar.scss +++ b/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); + } + } +}