fix: Embed play/pause indicator should render correctly in high contr…

…ast mode (#27213) * fix: Embed play/pause indicator should render correctly in high contrast mode * add changelog * use variables instead
microsoft · Mar 15, 2023 · 5da01b4 · 5da01b4
1 parent 76e6598
commit 5da01b4
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 0 deletions.
diff --git a/packages/fluentui/CHANGELOG.md b/packages/fluentui/CHANGELOG.md
@@ -26,6 +26,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - `Datepicker`: indicators should be visible in high contrast mode. @ling1726 ([#27107](https://github.com/microsoft/fluentui/pull/27107))
 - `Datepicker`: Disabled buttons should be green in HC theme. @jurokapsiar ([#27114](https://github.com/microsoft/fluentui/pull/27114))
 - `SplitButton`: should display correctly in high contrast mode @ling1726 ([#27137](https://github.com/microsoft/fluentui/pull/27137))
+- `Embed`: play/pause indicator should render correctly in high contrast mode @ling1726 ([#27213](https://github.com/microsoft/fluentui/pull/27213))
 
 <!--------------------------------[ v0.66.3 ]------------------------------- -->
 ## [v0.66.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-northstar_v0.66.3) (2023-02-27)

diff --git a/packages/fluentui/react-northstar/src/themes/teams-forced-colors/componentVariables.ts b/packages/fluentui/react-northstar/src/themes/teams-forced-colors/componentVariables.ts
@@ -0,0 +1 @@
+export { embedVariables as Embed } from './components/Embed/embedVariables';
diff --git a/...luentui/react-northstar/src/themes/teams-forced-colors/components/Embed/embedVariables.ts b/...luentui/react-northstar/src/themes/teams-forced-colors/components/Embed/embedVariables.ts
@@ -0,0 +1,7 @@
+import { EmbedVariables } from '../../../teams/components/Embed/embedVariables';
+
+export const embedVariables = (): Partial<EmbedVariables> => {
+  return {
+    controlColor: 'ButtonText',
+  };
+};
diff --git a/packages/fluentui/react-northstar/src/themes/teams-forced-colors/index.ts b/packages/fluentui/react-northstar/src/themes/teams-forced-colors/index.ts
@@ -1,12 +1,14 @@
 import { createTheme, mergeThemes } from '@fluentui/styles';
 import { teamsHighContrastTheme } from '../teams-high-contrast';
 import * as componentStyles from './componentStyles';
+import * as componentVariables from './componentVariables';
 
 export const teamsForcedColorsTheme = mergeThemes(
   teamsHighContrastTheme,
   createTheme(
     {
       componentStyles,
+      componentVariables,
     },
     'teams-forced-colors',
   ),
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { embedVariables as Embed } from './components/Embed/embedVariables';