From 00eef965e261ae839f68ad9a1d652f37b9a39dcc Mon Sep 17 00:00:00 2001 From: YuanboXue-Amber Date: Thu, 31 Aug 2023 13:42:56 +0200 Subject: [PATCH 1/2] HC --- .../useInteractionTagPrimaryStyles.styles.ts | 10 ++++++++++ .../useInteractionTagSecondaryStyles.styles.ts | 10 ++++++++++ .../src/components/Tag/useTagStyles.styles.ts | 10 ++++++++++ 3 files changed, 30 insertions(+) diff --git a/packages/react-components/react-tags-preview/src/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.ts b/packages/react-components/react-tags-preview/src/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.ts index d4bed543083aa..76215b496c8e1 100644 --- a/packages/react-components/react-tags-preview/src/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.ts +++ b/packages/react-components/react-tags-preview/src/components/InteractionTagPrimary/useInteractionTagPrimaryStyles.styles.ts @@ -43,6 +43,16 @@ const useRootBaseClassName = makeResetStyles({ ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2), zIndex: 1, }), + + // windows high contrast: + '@media (forced-colors: active)': { + ':hover': { + backgroundColor: 'HighlightText', + }, + ':active': { + backgroundColor: 'HighlightText', + }, + }, }); const useRootStyles = makeStyles({ diff --git a/packages/react-components/react-tags-preview/src/components/InteractionTagSecondary/useInteractionTagSecondaryStyles.styles.ts b/packages/react-components/react-tags-preview/src/components/InteractionTagSecondary/useInteractionTagSecondaryStyles.styles.ts index bfcf73932a4ff..23f0807d515ff 100644 --- a/packages/react-components/react-tags-preview/src/components/InteractionTagSecondary/useInteractionTagSecondaryStyles.styles.ts +++ b/packages/react-components/react-tags-preview/src/components/InteractionTagSecondary/useInteractionTagSecondaryStyles.styles.ts @@ -34,6 +34,16 @@ const useRootBaseClassName = makeResetStyles({ borderLeftColor: tokens.colorNeutralStroke1, borderTopLeftRadius: tokens.borderRadiusNone, borderBottomLeftRadius: tokens.borderRadiusNone, + + // windows high contrast: + '@media (forced-colors: active)': { + ':hover': { + backgroundColor: 'HighlightText', + }, + ':active': { + backgroundColor: 'HighlightText', + }, + }, }); const useRootStyles = makeStyles({ diff --git a/packages/react-components/react-tags-preview/src/components/Tag/useTagStyles.styles.ts b/packages/react-components/react-tags-preview/src/components/Tag/useTagStyles.styles.ts index 4f3f93469225d..248a0188811fb 100644 --- a/packages/react-components/react-tags-preview/src/components/Tag/useTagStyles.styles.ts +++ b/packages/react-components/react-tags-preview/src/components/Tag/useTagStyles.styles.ts @@ -180,6 +180,16 @@ const useDismissIconStyles = makeStyles({ base: { ...shorthands.gridArea('dismissIcon'), display: 'flex', + + // windows high contrast: + '@media (forced-colors: active)': { + ':hover': { + color: 'Highlight', + }, + ':active': { + color: 'Highlight', + }, + }, }, medium: { paddingLeft: tokens.spacingHorizontalXS, From 87273cf4b1ffed71d328051a85a6f7017915fc30 Mon Sep 17 00:00:00 2001 From: YuanboXue-Amber Date: Thu, 31 Aug 2023 13:43:39 +0200 Subject: [PATCH 2/2] chg --- ...-tags-preview-ab59afeb-97d0-4574-b3c5-ba25a5a36ad0.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-tags-preview-ab59afeb-97d0-4574-b3c5-ba25a5a36ad0.json diff --git a/change/@fluentui-react-tags-preview-ab59afeb-97d0-4574-b3c5-ba25a5a36ad0.json b/change/@fluentui-react-tags-preview-ab59afeb-97d0-4574-b3c5-ba25a5a36ad0.json new file mode 100644 index 0000000000000..2f97e76d107fa --- /dev/null +++ b/change/@fluentui-react-tags-preview-ab59afeb-97d0-4574-b3c5-ba25a5a36ad0.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: add style for windows high contrast", + "packageName": "@fluentui/react-tags-preview", + "email": "yuanboxue@microsoft.com", + "dependentChangeType": "patch" +}