[Bug]: Invalid ToggleButton styles

[Kamil Kaźmierczak]

Library

React Components / v9 (@fluentui/react-components)

System Info

System:
    OS: macOS 14.5
    CPU: (10) arm64 Apple M2 Pro
    Memory: 284.42 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Browsers:
    Brave Browser: 124.1.65.133
    Chrome: 125.0.6422.61
    Safari: 17.5

Are you reporting Accessibility issue?

None

Reproduction

https://react.fluentui.dev/?path=/docs/components-toolbar--default#subtle

Bug Description

Actual Behavior

Subtle ToggleButton is always blue

Expected Behavior

Don't make it blue - restore previous behavior

Cause of bug:
https://github.com/microsoft/fluentui/pull/30775/files

Bug introduced by:
@khmakoto

Logs

No response

Requested priority

Normal

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[Miroslav Stastny]

1. <ToggleButton appearance="subtle" /> now applies colorNeutralForeground2BrandSelected to the icon color no matter whether the toggle button is checked or not. @khmakoto is that intentional? (The design spec is not clear to me).
2. <ToolbarToggleButton /> overrides the color to colorBrandForeground1 when the button is checked but that has no effect as ToggleButton applies the color directly to the icon vs the ToolbarToggleButton sets it on the button:

Once we confirm the current styles in ToggleButton are correct, we should override the colors in ToolbarToggleButton and make sure the overrides win over the ToggleButton styles.

[Makoto Morimoto]

@miroslavstastny I think we just need to add the checked check before we apply the styles. I'll spin a PR up shortly.

[Makoto Morimoto]

PR in #31789.