fix(button): activated outline button in toolbar no longer blends into background on MD dark mode (#29216)
Issue number: N/A --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> When using an outline-style button in a toolbar on `md` dark mode, the activated style causes the button to become invisible. Steps to repro in `main`: 1. Update the `css-variables` themes test to use the latest dark theme styles (at least for v7) by replacing the contents of [this file](https://github.com/ionic-team/ionic-framework/blob/main/core/src/themes/test/css-variables/css/dark.css) with the [styles from the docs](https://ionicframework.com/docs/theming/dark-mode#ionic-dark-theme). 2. Host the project locally and navigate to the test at `themes/test/css-variables/index.html`. 3. Switch to dark mode within the page. Note that the activated outline button isn't visible:  ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Button styles corrected. The colors were correct for `ios` mode, but had to be flipped for `md`, so I pulled the relevant styles into the mode-specific stylesheets. - CSS variables test has also been updated to use the same dark mode CSS as in [the docs](https://ionicframework.com/docs/theming/dark-mode#ionic-dark-theme), as per the repro steps above. Let me know if you would rather this be split into a separate PR. Changes to the toolbar test were split into a separate PR to keep this one clean and ensure the screenshot changes can be reviewed more effectively: https://github.com/ionic-team/ionic-framework/pull/29231 ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 5. Update the BREAKING.md file with the breaking change. 6. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> --------- Co-authored-by: ionitron <hi@ionicframework.com>
Amanda Johnston
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 17 KiB |