diff --git a/.changelog/5954-fix-fluent-starter-prompt-forced-colors.md b/.changelog/5954-fix-fluent-starter-prompt-forced-colors.md new file mode 100644 index 0000000000..3d544ec2ce --- /dev/null +++ b/.changelog/5954-fix-fluent-starter-prompt-forced-colors.md @@ -0,0 +1,3 @@ +### Fixed + +- Fixed Fluent starter prompt cards having no visible border in forced colors, in PR [#5954](https://github.com/microsoft/BotFramework-WebChat/pull/5954), by [@OEvgeny](https://github.com/OEvgeny) diff --git a/__tests__/html2/fluentTheme/icons.forcedColors.dark.html.snap-1.png b/__tests__/html2/fluentTheme/icons.forcedColors.dark.html.snap-1.png index ff0aaacbff..48f2a68795 100644 Binary files a/__tests__/html2/fluentTheme/icons.forcedColors.dark.html.snap-1.png and b/__tests__/html2/fluentTheme/icons.forcedColors.dark.html.snap-1.png differ diff --git a/__tests__/html2/fluentTheme/icons.forcedColors.dark.html.snap-2.png b/__tests__/html2/fluentTheme/icons.forcedColors.dark.html.snap-2.png index eb89ed73dd..d951146671 100644 Binary files a/__tests__/html2/fluentTheme/icons.forcedColors.dark.html.snap-2.png and b/__tests__/html2/fluentTheme/icons.forcedColors.dark.html.snap-2.png differ diff --git a/__tests__/html2/fluentTheme/icons.forcedColors.html.snap-1.png b/__tests__/html2/fluentTheme/icons.forcedColors.html.snap-1.png index ebf3be2c27..6a04029e74 100644 Binary files a/__tests__/html2/fluentTheme/icons.forcedColors.html.snap-1.png and b/__tests__/html2/fluentTheme/icons.forcedColors.html.snap-1.png differ diff --git a/__tests__/html2/fluentTheme/icons.forcedColors.html.snap-2.png b/__tests__/html2/fluentTheme/icons.forcedColors.html.snap-2.png index 4f23f2f0f9..0363ac336e 100644 Binary files a/__tests__/html2/fluentTheme/icons.forcedColors.html.snap-2.png and b/__tests__/html2/fluentTheme/icons.forcedColors.html.snap-2.png differ diff --git a/__tests__/html2/fluentTheme/starterPrompts.forcedColors.dark.html b/__tests__/html2/fluentTheme/starterPrompts.forcedColors.dark.html new file mode 100644 index 0000000000..abf3ae448e --- /dev/null +++ b/__tests__/html2/fluentTheme/starterPrompts.forcedColors.dark.html @@ -0,0 +1,9 @@ + + +
+ + + + diff --git a/__tests__/html2/fluentTheme/starterPrompts.forcedColors.dark.html.snap-1.png b/__tests__/html2/fluentTheme/starterPrompts.forcedColors.dark.html.snap-1.png new file mode 100644 index 0000000000..5980096a05 Binary files /dev/null and b/__tests__/html2/fluentTheme/starterPrompts.forcedColors.dark.html.snap-1.png differ diff --git a/__tests__/html2/fluentTheme/starterPrompts.forcedColors.html b/__tests__/html2/fluentTheme/starterPrompts.forcedColors.html new file mode 100644 index 0000000000..15df6f80ab --- /dev/null +++ b/__tests__/html2/fluentTheme/starterPrompts.forcedColors.html @@ -0,0 +1,121 @@ + + + + + + + + + + + + diff --git a/__tests__/html2/fluentTheme/starterPrompts.forcedColors.html.snap-1.png b/__tests__/html2/fluentTheme/starterPrompts.forcedColors.html.snap-1.png new file mode 100644 index 0000000000..81334ca334 Binary files /dev/null and b/__tests__/html2/fluentTheme/starterPrompts.forcedColors.html.snap-1.png differ diff --git a/packages/fluent-theme/src/components/preChatActivity/StarterPromptsCardAction.module.css b/packages/fluent-theme/src/components/preChatActivity/StarterPromptsCardAction.module.css index 4bbac7e99d..80b73160fe 100644 --- a/packages/fluent-theme/src/components/preChatActivity/StarterPromptsCardAction.module.css +++ b/packages/fluent-theme/src/components/preChatActivity/StarterPromptsCardAction.module.css @@ -48,6 +48,11 @@ outline-offset: -2px; } + /* Forced colors remove the card shadow and fill, so draw a border as a native button does. */ + @media (forced-colors: active) { + border: var(--webchat-strokeWidthThin) solid ButtonText; + } + &:empty::after, &:empty::before { animation: blueprintAnimation 3s linear infinite;