diff --git a/packages/module/src/Chatbot/Chatbot.scss b/packages/module/src/Chatbot/Chatbot.scss index 5e5ba1eb1..d6d7587b9 100644 --- a/packages/module/src/Chatbot/Chatbot.scss +++ b/packages/module/src/Chatbot/Chatbot.scss @@ -28,6 +28,9 @@ opacity: 1; transform: translateY(0); } + // for high contrast support + border: var(--pf-t--global--border--width--high-contrast--regular) solid + var(--pf-t--global--border--color--high-contrast); // 32 rem is the width of the overlay chatbot plus the insets // if the screen is smaller, we want to be 100% @@ -46,6 +49,10 @@ // Chatbot Display Mode - Docked // ============================================================================ .pf-chatbot--docked { + // for high contrast support + border: unset; + border-left: var(--pf-t--global--border--width--high-contrast--regular) solid + var(--pf-t--global--border--color--high-contrast); inset-block-end: 0; inset-inline-end: 0; padding: 0; @@ -65,6 +72,8 @@ // Chatbot Display Mode - Fullscreen // ============================================================================ .pf-chatbot--fullscreen { + // for high contrast support + border: unset; inset-block-end: 0; inset-inline-end: 0; padding: 0; @@ -78,6 +87,8 @@ // Chatbot Display Mode - Embedded // ============================================================================ .pf-chatbot--embedded { + // for high contrast support + border: unset; position: static; width: 100%; min-height: 100%; @@ -125,12 +136,23 @@ height: 100%; border-radius: 0; box-shadow: none; - border-left: var(--pf-t--global--border--width--divider--default) solid; border-color: var(--pf-t--global--border--color--default); .pf-chatbot-container { border-radius: var(--pf-t--global--border--radius--sharp); } + + @media screen and (min-width: 768px) { + // only want if drawer open - drawer closes/stops being inline on mobile + border-left: var(--pf-t--global--border--width--divider--default) solid; + } +} + +// for high contrast support +:root:where(.pf-v6-theme-high-contrast) { + .pf-chatbot--drawer { + border: unset; + } } // ============================================================================ diff --git a/packages/module/src/ChatbotFooter/ChatbotFooter.scss b/packages/module/src/ChatbotFooter/ChatbotFooter.scss index e07680184..acafc1b98 100644 --- a/packages/module/src/ChatbotFooter/ChatbotFooter.scss +++ b/packages/module/src/ChatbotFooter/ChatbotFooter.scss @@ -62,3 +62,20 @@ padding: 0 var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm); row-gap: var(--pf-t--global--spacer--sm); } + +// ============================================================================ +// High contrast +// ============================================================================ +:root:where(.pf-v6-theme-high-contrast) { + // Chatbot Display Mode - Fullscreen and Embedded + @media screen and (min-width: 64rem) { + .pf-chatbot--embedded, + .pf-chatbot--fullscreen { + .pf-chatbot__footer { + .pf-v6-c-divider { + display: var(--pf-v6-hidden-visible--Display); + } + } + } + } +} diff --git a/packages/module/src/ChatbotHeader/ChatbotHeader.scss b/packages/module/src/ChatbotHeader/ChatbotHeader.scss index 6c975738b..276faf7a1 100644 --- a/packages/module/src/ChatbotHeader/ChatbotHeader.scss +++ b/packages/module/src/ChatbotHeader/ChatbotHeader.scss @@ -162,3 +162,18 @@ .pf-chatbot__header .pf-chatbot__actions .pf-v6-c-menu-toggle.pf-m-secondary.pf-m-compact { width: initial; } + +// ============================================================================ +// High contrast +// ============================================================================ +:root:where(.pf-v6-theme-high-contrast) { + // Chatbot Display Mode - Fullscreen and Embedded + @media screen and (min-width: 64rem) { + .pf-chatbot--fullscreen, + .pf-chatbot--embedded { + .pf-chatbot__header__divider { + display: var(--pf-v6-hidden-visible--Display); + } + } + } +}