From f94f9f70df03f74dde6b98abe90e035a5cb2f95b Mon Sep 17 00:00:00 2001 From: Lingfan Gao Date: Wed, 15 Mar 2023 08:35:31 +0100 Subject: [PATCH 1/3] fix: Embed play/pause indicator should render correctly in high contrast mode --- .../themes/teams-forced-colors/componentStyles.ts | 1 + .../components/Embed/embedStyles.ts | 15 +++++++++++++++ 2 files changed, 16 insertions(+) create mode 100644 packages/fluentui/react-northstar/src/themes/teams-forced-colors/components/Embed/embedStyles.ts diff --git a/packages/fluentui/react-northstar/src/themes/teams-forced-colors/componentStyles.ts b/packages/fluentui/react-northstar/src/themes/teams-forced-colors/componentStyles.ts index 260ba6aebeead8..68bf3374d24fcb 100644 --- a/packages/fluentui/react-northstar/src/themes/teams-forced-colors/componentStyles.ts +++ b/packages/fluentui/react-northstar/src/themes/teams-forced-colors/componentStyles.ts @@ -5,6 +5,7 @@ export { svgIconStyles as SvgIcon } from './components/SvgIcon/svgIconStyles'; export { menuItemWrapperStyles as MenuItemWrapper } from './components/Menu/menuItemWrapperStyles'; export { toolbarItemStyles as ToolbarItem } from './components/Toolbar/toolbarItemStyles'; export { sliderStyles as Slider } from './components/Slider/sliderStyles'; +export { embedStyles as Embed } from './components/Embed/embedStyles'; export { splitButtonToggleStyles as SplitButtonToggle } from './components/SplitButton/splitButtonToggleStyles'; export { splitButtonDividerStyles as SplitButtonDivider } from './components/SplitButton/splitButtonDividerStyles'; diff --git a/packages/fluentui/react-northstar/src/themes/teams-forced-colors/components/Embed/embedStyles.ts b/packages/fluentui/react-northstar/src/themes/teams-forced-colors/components/Embed/embedStyles.ts new file mode 100644 index 00000000000000..f1de2c5a23c2aa --- /dev/null +++ b/packages/fluentui/react-northstar/src/themes/teams-forced-colors/components/Embed/embedStyles.ts @@ -0,0 +1,15 @@ +import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles'; +import { EmbedStylesProps } from '../../../../components/Embed/Embed'; +import { EmbedVariables } from '../../../teams/components/Embed/embedVariables'; +import { playIndicatorUrl } from '../../../teams/components/Embed/playIndicatorUrl'; +import { pauseIndicatorUrl } from '../../../teams/components/Embed/pauseIndicatorUrl'; + +export const embedStyles: ComponentSlotStylesPrepared = { + control: ({ props: p, variables: v }): ICSSInJSStyle => ({ + backgroundImage: playIndicatorUrl('ButtonText'), + + ...(p.active && { + backgroundImage: pauseIndicatorUrl('ButtonText'), + }), + }), +} as ComponentSlotStylesPrepared; From b7aab6662069078a101abaf77b7bf544617e88fb Mon Sep 17 00:00:00 2001 From: Lingfan Gao Date: Wed, 15 Mar 2023 08:40:15 +0100 Subject: [PATCH 2/3] add changelog --- packages/fluentui/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/fluentui/CHANGELOG.md b/packages/fluentui/CHANGELOG.md index de82f51ff02584..2494b0367bdd11 100644 --- a/packages/fluentui/CHANGELOG.md +++ b/packages/fluentui/CHANGELOG.md @@ -22,6 +22,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](https://github.com/microsoft/fluentui/tree/@fluentui/react-northstar_v0.66.3) (2023-02-27) From 6db02579a6cd4451f334ac267c7900c0c9d6efe2 Mon Sep 17 00:00:00 2001 From: Lingfan Gao Date: Wed, 15 Mar 2023 09:18:33 +0100 Subject: [PATCH 3/3] use variables instead --- .../themes/teams-forced-colors/componentStyles.ts | 1 - .../teams-forced-colors/componentVariables.ts | 1 + .../components/Embed/embedStyles.ts | 15 --------------- .../components/Embed/embedVariables.ts | 7 +++++++ .../src/themes/teams-forced-colors/index.ts | 2 ++ 5 files changed, 10 insertions(+), 16 deletions(-) create mode 100644 packages/fluentui/react-northstar/src/themes/teams-forced-colors/componentVariables.ts delete mode 100644 packages/fluentui/react-northstar/src/themes/teams-forced-colors/components/Embed/embedStyles.ts create mode 100644 packages/fluentui/react-northstar/src/themes/teams-forced-colors/components/Embed/embedVariables.ts diff --git a/packages/fluentui/react-northstar/src/themes/teams-forced-colors/componentStyles.ts b/packages/fluentui/react-northstar/src/themes/teams-forced-colors/componentStyles.ts index 68bf3374d24fcb..260ba6aebeead8 100644 --- a/packages/fluentui/react-northstar/src/themes/teams-forced-colors/componentStyles.ts +++ b/packages/fluentui/react-northstar/src/themes/teams-forced-colors/componentStyles.ts @@ -5,7 +5,6 @@ export { svgIconStyles as SvgIcon } from './components/SvgIcon/svgIconStyles'; export { menuItemWrapperStyles as MenuItemWrapper } from './components/Menu/menuItemWrapperStyles'; export { toolbarItemStyles as ToolbarItem } from './components/Toolbar/toolbarItemStyles'; export { sliderStyles as Slider } from './components/Slider/sliderStyles'; -export { embedStyles as Embed } from './components/Embed/embedStyles'; export { splitButtonToggleStyles as SplitButtonToggle } from './components/SplitButton/splitButtonToggleStyles'; export { splitButtonDividerStyles as SplitButtonDivider } from './components/SplitButton/splitButtonDividerStyles'; 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 new file mode 100644 index 00000000000000..ab59dd76b0d6d6 --- /dev/null +++ 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/packages/fluentui/react-northstar/src/themes/teams-forced-colors/components/Embed/embedStyles.ts b/packages/fluentui/react-northstar/src/themes/teams-forced-colors/components/Embed/embedStyles.ts deleted file mode 100644 index f1de2c5a23c2aa..00000000000000 --- a/packages/fluentui/react-northstar/src/themes/teams-forced-colors/components/Embed/embedStyles.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles'; -import { EmbedStylesProps } from '../../../../components/Embed/Embed'; -import { EmbedVariables } from '../../../teams/components/Embed/embedVariables'; -import { playIndicatorUrl } from '../../../teams/components/Embed/playIndicatorUrl'; -import { pauseIndicatorUrl } from '../../../teams/components/Embed/pauseIndicatorUrl'; - -export const embedStyles: ComponentSlotStylesPrepared = { - control: ({ props: p, variables: v }): ICSSInJSStyle => ({ - backgroundImage: playIndicatorUrl('ButtonText'), - - ...(p.active && { - backgroundImage: pauseIndicatorUrl('ButtonText'), - }), - }), -} as ComponentSlotStylesPrepared; diff --git a/packages/fluentui/react-northstar/src/themes/teams-forced-colors/components/Embed/embedVariables.ts b/packages/fluentui/react-northstar/src/themes/teams-forced-colors/components/Embed/embedVariables.ts new file mode 100644 index 00000000000000..5ac6bdb49700d5 --- /dev/null +++ b/packages/fluentui/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 => { + 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 index 5755826d351879..e1b69f05c93393 100644 --- 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', ),