Fluent: add dark theme support (#5138)

* Fluent: add dark mode support * Update theme and add selected button state * Fix trailing space * Add entry --------- Co-authored-by: William Wong <[email protected]>
microsoft · Apr 18, 2024 · bc1c6b4 · bc1c6b4
1 parent 16f5142
commit bc1c6b4
Show file tree

Hide file tree

Showing 20 changed files with 575 additions and 19 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -48,6 +48,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
    -  Fit-and-finish on suggested actions and telephone keypad, in PR [#5132](https://github.com/microsoft/BotFramework-WebChat/pull/5132)
    -  Fixed to keep telephone keypad on-screen on click, in PR [#5132](https://github.com/microsoft/BotFramework-WebChat/pull/5132)
    -  Disabled send button and hid message length when telephone keypad is shown, in PR [#5136](https://github.com/microsoft/BotFramework-WebChat/pull/5136)
+   -  Added dark theme support, in PR [#5138](https://github.com/microsoft/BotFramework-WebChat/pull/5138)
 -  Added `<ThemeProvider>` component to apply theme pack to Web Chat, by [@compulim](https://github.com/compulim), in PR [#5120](https://github.com/microsoft/BotFramework-WebChat/pull/5120)
 -  Added `useMakeThumbnail` hook option to create a thumbnail from the file given, by [@compulim](https://github.com/compulim), in PR [#5123](https://github.com/microsoft/BotFramework-WebChat/pull/5123) and [#5122](https://github.com/microsoft/BotFramework-WebChat/pull/5122)
 

diff --git a/...lback-dark-js-fluent-theme-applied-uses-fluent-dark-theme-if-present-1-snap.png b/...lback-dark-js-fluent-theme-applied-uses-fluent-dark-theme-if-present-1-snap.png
diff --git a/...lback-dark-js-fluent-theme-applied-uses-fluent-dark-theme-if-present-2-snap.png b/...lback-dark-js-fluent-theme-applied-uses-fluent-dark-theme-if-present-2-snap.png
diff --git a/...lback-dark-js-fluent-theme-applied-uses-fluent-dark-theme-if-present-3-snap.png b/...lback-dark-js-fluent-theme-applied-uses-fluent-dark-theme-if-present-3-snap.png
diff --git a/...lback-dark-js-fluent-theme-applied-uses-fluent-dark-theme-if-present-4-snap.png b/...lback-dark-js-fluent-theme-applied-uses-fluent-dark-theme-if-present-4-snap.png
diff --git a/...-show-hide-js-fluent-theme-applied-telephone-keypad-should-show-hide-1-snap.png b/...-show-hide-js-fluent-theme-applied-telephone-keypad-should-show-hide-1-snap.png
diff --git a/...luent-theme-applied-telephone-keypad-when-tapped-should-send-message-1-snap.png b/...luent-theme-applied-telephone-keypad-when-tapped-should-send-message-1-snap.png
diff --git a/__tests__/html/fluentTheme/fluentThemeFallback.dark.html b/__tests__/html/fluentTheme/fluentThemeFallback.dark.html
diff --git a/__tests__/html/fluentTheme/fluentThemeFallback.dark.js b/__tests__/html/fluentTheme/fluentThemeFallback.dark.js
@@ -0,0 +1,5 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('Fluent theme applied', () => {
+  test('uses fluent dark theme if present', () => runHTML('fluentTheme/fluentThemeFallback.dark'));
+});
diff --git a/packages/fluent-theme/src/components/Theme.module.css b/packages/fluent-theme/src/components/Theme.module.css
@@ -6,15 +6,16 @@
   --webchat-colorNeutralForeground2: var(--colorNeutralForeground2, #424242);
   --webchat-colorNeutralForeground4: var(--colorNeutralForeground4, #707070);
 
+  --webchat-colorNeutralForeground2BrandHover: var(--colorNeutralForeground2BrandHover, #02729c);
+  --webchat-colorNeutralForeground2BrandPressed: var(--colorNeutralForeground2BrandPressed, #01678c);
+  --webchat-colorNeutralForeground2BrandSelected: var(--colorNeutralForeground2BrandSelected, #067191);
+
   --webchat-colorNeutralForegroundDisabled: var(--colorNeutralForegroundDisabled, #bdbdbd);
 
   --webchat-colorNeutralBackground1: var(--colorNeutralBackground1, #ffffff);
   --webchat-colorNeutralBackground4: var(--colorNeutralBackground4, #f0f0f0);
   --webchat-colorNeutralBackground5: var(--colorNeutralBackground5, #ebebeb);
 
-  --webchat-colorSubtleBackgroundHover: var(--colorSubtleBackgroundHover, #f5f5f5);
-  --webchat-colorSubtleBackgroundPressed: var(--colorSubtleBackgroundPressed, #e0e0e0);
-
   --webchat-colorNeutralStroke1: var(--colorNeutralStroke1, #d1d1d1);
   --webchat-colorNeutralStroke2: var(--colorNeutralStroke2, #e0e0e0);
   --webchat-colorNeutralStroke1Selected: var(--colorNeutralStroke1Selected, #bdbdbd);
@@ -27,10 +28,7 @@
   --webchat-colorBrandBackground2Hover: var(--colorBrandBackground2Hover, #bee7fa);
   --webchat-colorBrandBackground2Pressed: var(--colorBrandBackground2Pressed, #7fd2f5);
 
-  --webchat-colorCompoundBrandForeground1: var(--colorCompoundBrandForeground1, #077fab);
-
   --webchat-colorCompoundBrandForeground1Hover: var(--colorCompoundBrandForeground1Hover, #02729c);
-  --webchat-colorCompoundBrandForeground1Pressed: var(--colorCompoundBrandForeground1Pressed, #01678c);
 
   --webchat-colorStatusDangerForeground1: var(--colorStatusDangerForeground1, #b10e1c);
 

diff --git a/packages/fluent-theme/src/components/sendbox/TelephoneKeypadToolbarButton.tsx b/packages/fluent-theme/src/components/sendbox/TelephoneKeypadToolbarButton.tsx
@@ -9,7 +9,7 @@ import { ToolbarButton } from './Toolbar';
 const { useLocalizer } = hooks;
 
 const TelephoneKeypadToolbarButton = memo(() => {
-  const [, setTelephoneKeypadShown] = useTelephoneKeypadShown();
+  const [telephoneKeypadShown, setTelephoneKeypadShown] = useTelephoneKeypadShown();
   const localize = useLocalizer();
 
   const handleClick = useCallback(() => setTelephoneKeypadShown(shown => !shown), [setTelephoneKeypadShown]);
@@ -19,6 +19,7 @@ const TelephoneKeypadToolbarButton = memo(() => {
       aria-label={localize('TEXT_INPUT_TELEPHONE_KEYPAD_BUTTON_ALT')}
       data-testid={testIds.sendBoxTelephoneKeypadToolbarButton}
       onClick={handleClick}
+      selected={telephoneKeypadShown}
     >
       <TelephoneKeypadIcon />
     </ToolbarButton>

diff --git a/packages/fluent-theme/src/components/sendbox/TextArea.module.css b/packages/fluent-theme/src/components/sendbox/TextArea.module.css
@@ -28,8 +28,10 @@
 }
 
 :global(.webchat-fluent) .sendbox__text-area-input {
+  background-color: inherit;
+  color: currentColor;
   height: 100%;
-  padding: 0
+  padding: 0;
 }
 
 :global(.webchat-fluent) .sendbox__text-area-input--scroll {

diff --git a/packages/fluent-theme/src/components/sendbox/Toolbar.module.css b/packages/fluent-theme/src/components/sendbox/Toolbar.module.css
@@ -11,6 +11,7 @@
   background: transparent;
   border-radius: var(--webchat-borderRadiusSmall);
   border: none;
+  color: currentColor;
   cursor: pointer;
   display: flex;
   justify-content: center;
@@ -22,15 +23,16 @@
     pointer-events: none;
   }
 
+  &.sendbox__toolbar-button--selected {
+    color: var(--webchat-colorNeutralForeground2BrandSelected);
+  }
   @media (hover: hover) {
     &:not([aria-disabled="true"]):hover {
-      background-color: var(--webchat-colorSubtleBackgroundHover);
-      color: var(--webchat-colorCompoundBrandForeground1Hover);
+      color: var(--webchat-colorNeutralForeground2BrandHover);
     }
   }
   &:not([aria-disabled="true"]):active {
-    background-color: var(--webchat-colorSubtleBackgroundPressed);
-    color: var(--webchat-colorCompoundBrandForeground1Pressed);
+    color: var(--webchat-colorNeutralForeground2BrandPressed);
   }
   &[aria-disabled="true"] {
     color: var(--webchat-colorNeutralForegroundDisabled);

diff --git a/packages/fluent-theme/src/components/sendbox/Toolbar.tsx b/packages/fluent-theme/src/components/sendbox/Toolbar.tsx
@@ -14,6 +14,7 @@ export const ToolbarButton = memo(
       'data-testid'?: string | undefined;
       disabled?: boolean | undefined;
       onClick?: MouseEventHandler<HTMLButtonElement> | undefined;
+      selected?: boolean | undefined;
       type?: 'button' | 'submit' | undefined;
     }>
   ) => {
@@ -22,7 +23,9 @@ export const ToolbarButton = memo(
     return (
       <button
         aria-label={props['aria-label']}
-        className={cx(classNames['sendbox__toolbar-button'], props.className)}
+        className={cx(classNames['sendbox__toolbar-button'], props.className, {
+          [classNames['sendbox__toolbar-button--selected']]: props.selected
+        })}
         data-testid={props['data-testid']}
         onClick={props.disabled ? preventDefaultHandler : props.onClick}
         type={props.type === 'submit' ? 'submit' : 'button'}

diff --git a/packages/fluent-theme/src/components/sendbox/index.module.css b/packages/fluent-theme/src/components/sendbox/index.module.css
@@ -16,8 +16,8 @@
   font-size: 14px;
   gap: 6px;
   grid-template:
-    [telephone-keypad-start] 'text-area'
-    var(--webchat-sendbox-attachment-area-active) [telephone-keypad-end]
+    [telephone-keypad-start] 'text-area' [telephone-keypad-end]
+    var(--webchat-sendbox-attachment-area-active)
     'controls' / [telephone-keypad] 1fr
   ;
   line-height: 20px;

diff --git a/packages/fluent-theme/src/components/suggestedActions/SuggestedAction.module.css b/packages/fluent-theme/src/components/suggestedActions/SuggestedAction.module.css
@@ -3,6 +3,7 @@
   background: transparent;
   border-radius: 8px;
   border: 1px solid var(--webchat-colorBrandStroke2);
+  color: currentColor;
   cursor: pointer;
   display: flex;
   font-size: 12px;

diff --git a/packages/fluent-theme/src/icons/AddDocumentIcon.tsx b/packages/fluent-theme/src/icons/AddDocumentIcon.tsx
@@ -5,7 +5,6 @@ export function AddDocumentIcon(props: Readonly<{ readonly className?: string }>
     <svg
       aria-hidden="true"
       className={props.className}
-      fill="currentColor"
       height="1em"
       viewBox="0 0 20 20"
       width="1em"

diff --git a/packages/fluent-theme/src/icons/AttachmentIcon.tsx b/packages/fluent-theme/src/icons/AttachmentIcon.tsx
@@ -5,7 +5,6 @@ export function AttachmentIcon(props: Readonly<{ readonly className?: string }>)
     <svg
       aria-hidden="true"
       className={props.className}
-      fill="currentColor"
       height="1em"
       viewBox="0 0 20 20"
       width="1em"

diff --git a/packages/fluent-theme/src/icons/SendIcon.tsx b/packages/fluent-theme/src/icons/SendIcon.tsx
@@ -5,7 +5,6 @@ export function SendIcon(props: Readonly<{ readonly className?: string }>) {
     <svg
       aria-hidden="true"
       className={props.className}
-      fill="currentColor"
       height="1em"
       viewBox="0 0 20 20"
       width="1em"

diff --git a/packages/fluent-theme/src/icons/TelephoneKeypad.tsx b/packages/fluent-theme/src/icons/TelephoneKeypad.tsx
@@ -5,7 +5,6 @@ export function TelephoneKeypadIcon(props: Readonly<{ readonly className?: strin
     <svg
       aria-hidden="true"
       className={props.className}
-      fill="currentColor"
       height="1em"
       viewBox="0 0 20 20"
       width="1em"