From 72bb80f2a0ca21ed7c310a8c981505a187814e17 Mon Sep 17 00:00:00 2001 From: Rebecca Alpert Date: Mon, 27 Oct 2025 14:12:39 -0400 Subject: [PATCH 1/4] feat(MessageBar): Add support for high contrast --- packages/module/src/MessageBar/MessageBar.scss | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/packages/module/src/MessageBar/MessageBar.scss b/packages/module/src/MessageBar/MessageBar.scss index 602fcd1aa..8a0009984 100644 --- a/packages/module/src/MessageBar/MessageBar.scss +++ b/packages/module/src/MessageBar/MessageBar.scss @@ -133,3 +133,16 @@ padding-block-end: var(--pf-t--global--spacer--md); } } + +// ============================================================================ +// High contrast styles +// ============================================================================ +:root:where(.pf-v6-theme-high-contrast) { + .pf-chatbot__message-bar { + box-shadow: inset 0 0 0 1px var(--pf-t--global--border--color--default); + + &:focus-within { + box-shadow: inset 0 0 0 2px var(--pf-t--global--color--brand--default); + } + } +} From 340b4a03e7593edec68b7ed2bcb4f6927fbf0eea Mon Sep 17 00:00:00 2001 From: Rebecca Alpert Date: Mon, 3 Nov 2025 13:39:55 -0500 Subject: [PATCH 2/4] Swap box-shadow for border --- .../module/src/MessageBar/MessageBar.scss | 40 +++++++++++++------ 1 file changed, 28 insertions(+), 12 deletions(-) diff --git a/packages/module/src/MessageBar/MessageBar.scss b/packages/module/src/MessageBar/MessageBar.scss index 8a0009984..3aad5d9ab 100644 --- a/packages/module/src/MessageBar/MessageBar.scss +++ b/packages/module/src/MessageBar/MessageBar.scss @@ -21,22 +21,40 @@ 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: 1px 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: 1px solid transparent; + pointer-events: none; + transition: border-color 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); } + } - &:focus-within { - box-shadow: inset 0 0 0 2px var(--pf-t--global--color--brand--default); + &:focus-within { + &::after { + border-width: 2px; + border-color: var(--pf-t--global--color--brand--default); } } @@ -139,10 +157,8 @@ // ============================================================================ :root:where(.pf-v6-theme-high-contrast) { .pf-chatbot__message-bar { - box-shadow: inset 0 0 0 1px var(--pf-t--global--border--color--default); - - &:focus-within { - box-shadow: inset 0 0 0 2px var(--pf-t--global--color--brand--default); + &::after { + border-color: var(--pf-t--global--border--color--default); } } } From c4f1bb21b7ff76d557ea0a81f0e744cc15c20362 Mon Sep 17 00:00:00 2001 From: Rebecca Alpert Date: Tue, 4 Nov 2025 09:54:53 -0500 Subject: [PATCH 3/4] Add tokens per Sarah's feedback --- packages/module/src/MessageBar/MessageBar.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/module/src/MessageBar/MessageBar.scss b/packages/module/src/MessageBar/MessageBar.scss index 3aad5d9ab..794de0e02 100644 --- a/packages/module/src/MessageBar/MessageBar.scss +++ b/packages/module/src/MessageBar/MessageBar.scss @@ -24,7 +24,7 @@ transition: border-color var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--sm); position: relative; - border: 1px solid transparent; + border: var(--pf-t--global--border--width--control--default) solid transparent; overflow: hidden; @@ -33,7 +33,7 @@ position: absolute; inset: 0; border-radius: inherit; - border: 1px solid transparent; + 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); @@ -53,7 +53,7 @@ &:focus-within { &::after { - border-width: 2px; + border-width: var(--pf-t--global--border--width--control--clicked); border-color: var(--pf-t--global--color--brand--default); } } From f5cb774b69a73a947a27efe8468e28606aa95f94 Mon Sep 17 00:00:00 2001 From: Rebecca Alpert Date: Fri, 14 Nov 2025 15:49:11 -0500 Subject: [PATCH 4/4] Address feedback --- packages/module/src/MessageBar/MessageBar.scss | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/module/src/MessageBar/MessageBar.scss b/packages/module/src/MessageBar/MessageBar.scss index 794de0e02..ae45a13f2 100644 --- a/packages/module/src/MessageBar/MessageBar.scss +++ b/packages/module/src/MessageBar/MessageBar.scss @@ -35,8 +35,9 @@ 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); + 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 { @@ -48,13 +49,14 @@ &:hover { &::after { border-color: var(--pf-t--global--border--color--default); + border-width: var(--pf-t--global--border--width--control--hover); } } &:focus-within { &::after { - border-width: var(--pf-t--global--border--width--control--clicked); border-color: var(--pf-t--global--color--brand--default); + border-width: var(--pf-t--global--border--width--control--clicked); } }