From 5810ffe5a66e05c405f7acf439b4886a721a3b2d Mon Sep 17 00:00:00 2001 From: Sarah Higley Date: Tue, 7 Jan 2025 15:25:09 -0800 Subject: [PATCH 1/2] fix: use contrasting token pairs for selected state --- .../useToolbarRadioButtonStyles.styles.ts | 12 +++++++++++- .../useToolbarToggleButtonStyles.styles.ts | 12 +++++++++++- 2 files changed, 22 insertions(+), 2 deletions(-) diff --git a/packages/react-components/react-toolbar/library/src/components/ToolbarRadioButton/useToolbarRadioButtonStyles.styles.ts b/packages/react-components/react-toolbar/library/src/components/ToolbarRadioButton/useToolbarRadioButtonStyles.styles.ts index 0a56b1fbbf73a9..e02d08ae16cc42 100644 --- a/packages/react-components/react-toolbar/library/src/components/ToolbarRadioButton/useToolbarRadioButtonStyles.styles.ts +++ b/packages/react-components/react-toolbar/library/src/components/ToolbarRadioButton/useToolbarRadioButtonStyles.styles.ts @@ -4,8 +4,14 @@ import { useToggleButtonStyles_unstable } from '@fluentui/react-button'; import { ToolbarRadioButtonState } from './ToolbarRadioButton.types'; const useBaseStyles = makeStyles({ + /* use subtle ToggleButton selected styles for Toolbar Radio selected state */ selected: { - color: tokens.colorBrandForeground1, + backgroundColor: tokens.colorSubtleBackgroundSelected, + color: tokens.colorNeutralForeground2Selected, + }, + + iconSelected: { + color: tokens.colorNeutralForeground2BrandSelected, }, }); @@ -20,5 +26,9 @@ export const useToolbarRadioButtonStyles_unstable = (state: ToolbarRadioButtonSt state.root.className = mergeClasses(state.root.className, state.checked && toggleButtonStyles.selected); + if (state.icon) { + state.icon.className = mergeClasses(state.icon.className, state.checked && toggleButtonStyles.iconSelected); + } + return state; }; diff --git a/packages/react-components/react-toolbar/library/src/components/ToolbarToggleButton/useToolbarToggleButtonStyles.styles.ts b/packages/react-components/react-toolbar/library/src/components/ToolbarToggleButton/useToolbarToggleButtonStyles.styles.ts index d065d5e8a8a57b..99096952554b67 100644 --- a/packages/react-components/react-toolbar/library/src/components/ToolbarToggleButton/useToolbarToggleButtonStyles.styles.ts +++ b/packages/react-components/react-toolbar/library/src/components/ToolbarToggleButton/useToolbarToggleButtonStyles.styles.ts @@ -4,8 +4,14 @@ import { useToggleButtonStyles_unstable } from '@fluentui/react-button'; import { ToolbarToggleButtonState } from './ToolbarToggleButton.types'; const useBaseStyles = makeStyles({ + /* use subtle ToggleButton selected styles for Toolbar Radio selected state */ selected: { - color: tokens.colorBrandForeground1, + backgroundColor: tokens.colorSubtleBackgroundSelected, + color: tokens.colorNeutralForeground2Selected, + }, + + iconSelected: { + color: tokens.colorNeutralForeground2BrandSelected, }, }); @@ -20,5 +26,9 @@ export const useToolbarToggleButtonStyles_unstable = (state: ToolbarToggleButton state.root.className = mergeClasses(state.root.className, state.checked && toggleButtonStyles.selected); + if (state.icon) { + state.icon.className = mergeClasses(state.icon.className, state.checked && toggleButtonStyles.iconSelected); + } + return state; }; From a398c4ac02840a862cbb5b0367e0020326d6da18 Mon Sep 17 00:00:00 2001 From: Sarah Higley Date: Tue, 7 Jan 2025 15:27:41 -0800 Subject: [PATCH 2/2] change file --- ...react-toolbar-8bb342b8-9cdc-4d1c-83e9-718c59bf4ef9.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-toolbar-8bb342b8-9cdc-4d1c-83e9-718c59bf4ef9.json diff --git a/change/@fluentui-react-toolbar-8bb342b8-9cdc-4d1c-83e9-718c59bf4ef9.json b/change/@fluentui-react-toolbar-8bb342b8-9cdc-4d1c-83e9-718c59bf4ef9.json new file mode 100644 index 00000000000000..955625234df099 --- /dev/null +++ b/change/@fluentui-react-toolbar-8bb342b8-9cdc-4d1c-83e9-718c59bf4ef9.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "fix: use contrasting token pairs for selected radio and toggle states", + "packageName": "@fluentui/react-toolbar", + "email": "sarah.higley@microsoft.com", + "dependentChangeType": "patch" +}