feat: add high contrast implementation #28956
Conversation
| @@ -12,4 +12,4 @@ $breadcrumb-baseline-font-size: 16px !default; | |||
| $breadcrumb-font-size: dynamic-font($breadcrumb-baseline-font-size) !default; | |||
|
|
|||
| /// @prop - Color of the breadcrumb separator | |||
| $breadcrumb-separator-color: var(--ion-color-step-550, var(--icon-text-color-step-450, #73849a)) !default; | |||
| $breadcrumb-separator-color: var(--ion-color-step-550, var(--ion-text-color-step-450, #73849a)) !default; | |||
| @@ -25,7 +25,7 @@ $item-ios-paragraph-margin-start: $item-ios-paragraph-margin-end !def | |||
| $item-ios-paragraph-font-size: dynamic-font(14px) !default; | |||
|
|
|||
| /// @prop - Color of the item paragraph | |||
| $item-ios-paragraph-text-color: rgba($text-color-rgb, .4) !default; | |||
| $item-ios-paragraph-text-color: var(--ion-text-color-step-550, #a3a3a3) !default; | |||
There was a problem hiding this comment.
Not needed to ship this feature, so let me know if you'd prefer I add this in a separate PR.
Devs can add a p inside of an item. The problem is that p won't participate in high contrast because it's using the --ion-text-color-rgb var with an alpha channel instead of a step color. This change allows it to participate in high contrast. The values I chose are very close to the original computed values.
There was a problem hiding this comment.
I agree this change makes sense as part of the core changes here. It is a common enough pattern that developers can find themselves in. Having it organized under the same commit as high contrast works for me.
|
|
||
| @mixin high-contrast-light-md-theme() { |
There was a problem hiding this comment.
Toast (for both light and dark high contrast themes) was implemented incorrectly because it was scoped to all toasts when it should only have been scoped to MD toasts. This resulted in screenshot diffs.
| & ion-toast { | ||
| --color: var(--ion-background-color); | ||
| } | ||
|
|
There was a problem hiding this comment.
One thing I missed during the design phase of this toast workaround is that the text stepped colors would also be changing. I built this solution before I worked on the new text stepped colors architecture.
The problem is that --color by default uses a stepped color. But since those stepped colors are changing in high contrast, the way they mix using color-mix also changes. This resulted in text not having sufficient contrast. As a result, all text in high contrast mode will use the background color of the page.
Note that this is not a typo. The MD toast background is a dark gray in light mode, so using the page background color (white) will ensure correct contrast. Similarly, the background is white in dark mode (where the page background is dark gray).
There was a problem hiding this comment.
I had to make the same adjustments in the high contrast dark theme too
| @@ -103,7 +150,7 @@ $colors: ( | |||
| /* stylelint-disable-next-line order/order */ | |||
| @supports (color: color-mix(in lch, plum, pink)) { | |||
| & ion-toast::part(button) { | |||
| color: color-mix(in srgb, var(--color) 60%, var(--button-color)); | |||
| color: color-mix(in srgb, var(--color) 70%, var(--button-color)); | |||
There was a problem hiding this comment.
I needed to tweak the percentage value here since I was also changing the text color used.
| @@ -25,7 +25,7 @@ $item-ios-paragraph-margin-start: $item-ios-paragraph-margin-end !def | |||
| $item-ios-paragraph-font-size: dynamic-font(14px) !default; | |||
|
|
|||
| /// @prop - Color of the item paragraph | |||
| $item-ios-paragraph-text-color: rgba($text-color-rgb, .4) !default; | |||
| $item-ios-paragraph-text-color: var(--ion-text-color-step-550, #a3a3a3) !default; | |||
There was a problem hiding this comment.
I agree this change makes sense as part of the core changes here. It is a common enough pattern that developers can find themselves in. Having it organized under the same commit as high contrast works for me.
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