feat: add high contrast themes #29010
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…ables (#28797) Issue number: Internal --------- <!-- 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. --> Both the background color step variables and the text color step variables are based on the `--ion-color-step-` variables. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - The background color step variables are defined based on the `--ion-background-color-step-` values (not yet defined) - The text color step variables are defined based on the `--ion-text-color-step-` values (not yet defined) - The previous values remain as fallbacks ## 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. 2. Update the BREAKING.md file with the breaking change. 3. 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. -->
) Issue number: Internal --------- <!-- 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. --> This PR introduces `high-contrast-light.{always, class, system}.css` and `high-contrast-dark.{always, class, system}.css` files to add high contrast themes to Ionic applications. It also defines new color tokens that meet AAA WCAG criteria for text. I also added tests to verify that these colors meet said criteria when used against the correct contrast color. ## 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. 2. Update the BREAKING.md file with the breaking change. 3. 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. --> Reviews: We already have test criteria that verifies a) the colors chosen meet AAA WCAG criteria and b) that the CSS is being generated properly. It would be good to get manual testing for the `.system.css` stylesheet: 1. Open any test file and make sure the high contrast system file is loaded: ```html <link href="../../../../../css/themes/high-contrast-dark.system.css" rel="stylesheet" /> ``` 2. Enable high contrast on your computer. For macOS, this can be enabled in Settings > Accessibility > Display > Increase contrast. For iOS, this can be enabled in Settings > Accessibility > Display & Text size > Increase contrast. For Android, the system level toggle is only available in Android 14 in Settings > Accessibility > Color and Motion > Contrast Level.
…iables (#28813) Issue number: N/A --------- ## What is the current behavior? The step colors currently check if the modern variables are defined and use the legacy variables as a fallback, like so: ```scss $background-color-step-50: var(--ion-background-color-step-50, var(--ion-color-step-50); ... $text-color-step-950: var(--ion-text-color-step-950, var(--ion-color-step-50); ``` This is an issue because when we define the new step variables to be distributed as part of the light theme, it will always use those variables and never use the user's defined legacy variables: ```scss // ionic.theme.default.css :root { --ion-background-color-step-50: #{mix($text-color-value, $background-color-value, 5%)}; } ``` ## What is the new behavior? Switch the order of the step color variables so that the legacy variables are used first, with the modern variables used as a fallback: ```scss $background-color-step-50: var(--ion-color-step-50, var(--ion-background-color-step-50); ... $text-color-step-950: var(--ion-color-step-50, var(--ion-text-color-step-950); ``` This will allow a user to override us setting `--ion-background-color-step-50` with their own `--ion-color-step-50` variable. ## Does this introduce a breaking change? - [ ] Yes - [x] No
Issue number: Internal --------- <!-- 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. --> With the high contrast themes, the `ion-toast` buttons do not have sufficient color contrast to satisfy Level AAA. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - `ion-toast` buttons satisfy Level AAA color contrast with the high contrast themes ## 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. 2. Update the BREAKING.md file with the breaking change. 3. 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. --> ### Testing Locally In `core/src/components/toast/test/buttons/index.html` add the stylesheet import either the dark or light high contrast theme: Dark (high contrast): ```css <link href="../../../../../css/themes/high-contrast-dark.always.css" rel="stylesheet" /> ``` Light (hight contrast): ```css <link href="../../../../../css/themes/high-contrast-light.always.css" rel="stylesheet" /> ``` --------- Co-authored-by: ionitron <hi@ionicframework.com>
…eme (#28814) - updates the dark theme to include the new modern color tokens `--ion-background-color-step-*` and `--ion-text-color-step-*` - updates the light theme to set these variables instead of using the fallback
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Issue number: Internal --------- <!-- 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. --> Range uses an `--ion-color-step-*` token directly. These tokens will be deprecated soon. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> New token added, while keeping the old one for backwards compatibility. ## 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. 2. Update the BREAKING.md file with the breaking change. 3. 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. -->
Issue number: Internal --------- <!-- 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. --> Action sheet uses an `--ion-color-step-*` token directly. These tokens will be deprecated soon. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> New token added, while keeping the old one for backwards compatibility. ## 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. 2. Update the BREAKING.md file with the breaking change. 3. 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: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Issue number: Internal --------- <!-- 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. --> Alert is using the wrong type of step tokens for a couple styles -- only text elements should use `$text-color-step-*`, while everything else (including borders) should use `$background-color-step-*`. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> Tokens updated, including changing the step values so the actual color resolved remains the same. ## 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. 2. Update the BREAKING.md file with the breaking change. 3. 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. -->
Issue number: internal --------- ## What is the current behavior? The picker highlight only uses the `--ion-color-step-150` variable with a fallback to `#eeeeef`. ## What is the new behavior? The picker highlight falls back to using the `--ion-background-color-step-150` variable if it is defined but prioritizes `--ion-color-step-150` if it is also defined. This is the new step color token added for high-contrast themes. ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information No visual diffs are expected.
Issue number: internal --------- ## What is the current behavior? The segment button checked indicator only uses the `--ion-color-step-350` variable with a fallback to the `--ion-background-color`. ## What is the new behavior? The segment button checked indicator falls back to using the `--ion-background-color-step-350` variable if it is defined but prioritizes `--ion-color-step-350` if it is also defined. This is the new step color token added for high-contrast themes. ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information No visual diffs are expected.
… text (#28928) Issue number: internal --------- ## What is the current behavior? The toast container background and toast text color were using the following: ```scss /// @prop - Background of the toast $toast-md-background: $text-color-step-200 !default; /// @prop - Color of the toast $toast-md-color: $background-color-step-50 !default; ``` Which evaluated to: ```css :host { --background: var(--ion-color-step-800, var(--ion-text-color-step-200, #333333)); --color: var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2)); } ``` ## What is the new behavior? The variables have been updated so that the `background` variable is used for the background of the toast container and the `text` variable is used for the text color of the toast: ```scss /// @prop - Background of the toast $toast-md-background: $background-color-step-800 !default; /// @prop - Color of the toast $toast-md-color: $text-color-step-950 !default; ``` This evaluates to: ```css :host { --background: var(--ion-color-step-800, var(--ion-background-color-step-800, #333333)); --color: var(--ion-color-step-50, var(--ion-text-color-step-950, #f2f2f2)); } ``` ## Does this introduce a breaking change? - [ ] Yes - [x] No There are no breaking changes as the `--ion-color-step-*` variables being used are the same, and the `--ion-background-color-step-*` and `--ion-text-color-step-*` have not been released yet. The fallback colors when both variables are undefined have also not changed. ## Other information No visual diffs are expected.
Issue number: internal --------- ## What is the current behavior? The modal handle only uses the `--ion-color-step-350` variable with a fallback to `#c0c0be`. ## What is the new behavior? The modal handle falls back to using the `--ion-background-color-step-350` variable if it is defined but prioritizes `--ion-color-step-350` if it is also defined. This is the new step color token added for high-contrast themes. ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information No visual diffs are expected.
Issue number: Internal --------- <!-- 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. --> The breadcrumbs use the `--ion-color-step` tokens or a fallback. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - The breadcrumb text colors use the `--ion-color-step` tokens or the `--ion-text-color-step` tokens or a fallback - The breadcrumb background colors use the `--ion-color-step` tokens or the `--ion-background-color-step` tokens or a fallback ## 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. 2. Update the BREAKING.md file with the breaking change. 3. 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. -->
Issue number: Internal --------- <!-- 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. --> The refresher uses the --ion-color-step tokens or a fallback. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - The refresher colors use the --ion-color-step tokens or the --ion-text-color-step tokens or a fallback - The refresher background colors use the --ion-color-step tokens or the --ion-background-color-step tokens or a fallback ## 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. 2. Update the BREAKING.md file with the breaking change. 3. 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. -->
Issue number: internal --------- ## What is the current behavior? Developers are unable to globally change the placeholder opacity for inputs, textareas, searchbars, and selects. This becomes particularly problematic when trying to apply a high contrast theme. ## What is the new behavior? - Adds the `--ion-placeholder-opacity` with a fallback of `0.6` (this fallback is unchanged) - Sets the `--ion-placeholder-opacity` to `0.8` for the high contrast light & dark themes > [!NOTE] > The ticket says to update the standard light and dark themes to define `--ion-placeholder-opacity: 0.6`, however, I did not do this because this is not different than the fallback and therefore does not need to be defined. ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information Documentation pull request: ionic-team/ionic-docs#3421
liamdebeasi
requested review from
brandyscarney,
amandaejohnston,
sean-perkins and
a team
as code owners
brandyscarney
approved these changes
Feb 13, 2024
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Issue number: Internal
What is the current behavior?
Users do not have a way of increasing the contrast in Ionic apps. This is valuable for people with low vision as increasing the contrast between foreground and background content helps improve readability.
What is the new behavior?
While we aim to improve contrast for text and UI components, this feature prioritizes text in the event that both text and UI component cannot be improved without one negatively impacting the other.
Does this introduce a breaking change?
Other information
Dev build:
7.6.7-dev.11706894781.1cd59fdeTesting instructions:
src/themes/test/css-variables. Activate the high contrast light and dark themes to verify that contrast does increase.I'd recommend using these imports:
Note: Make sure this is imported after
core.scss