javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-08 23:58:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add high contrast themes (#29010)

Browse Source 
⚠️ This is a combination of previously approved PRs with the
exception of
fe9dca513c.
This change was made as a result of
https://github.com/ionic-team/ionic-framework-design-documents/pull/248.

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. -->

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?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Adds a high contrast light and high contrast dark theme. As with our
other themes, developers can choose between system, class, and always
stylesheets.

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?

- [ ] 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. -->

Dev build: `7.6.7-dev.11706894781.1cd59fde`

Testing instructions:

1. Open `src/themes/test/css-variables`. Activate the high contrast
light and dark themes to verify that contrast does increase.
2. Use the dev build to integrate the theme into a test app (conference
app, starter app, etc).

I'd recommend using these imports:

```css
@import "@ionic/angular/css/themes/high-contrast.system.css";
@import "@ionic/angular/css/themes/high-contrast-dark.system.css";
```
Note: Make sure this is imported **after** `core.scss`

---------

Co-authored-by: Shawn Taylor <shawn@ionic.io>
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
Co-authored-by: Sean Perkins <13732623+sean-perkins@users.noreply.github.com>
Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
This commit is contained in:
Liam DeBeasi
2024-02-13 12:20:04 -05:00
committed by GitHub
parent 957604c3a0
commit ca61e5061b
48 changed files with 846 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/src/components/action-sheet/action-sheet.ios.vars.scss
View File

@ -111,7 +111,7 @@ $action-sheet-ios-button-background: linear-gradien
$action-sheet-ios-button-background-activated: $text-color !default;
/// @prop - Background color of the selected action sheet button
$action-sheet-ios-button-background-selected: var(--ion-color-step-150, $background-color) !default;
$action-sheet-ios-button-background-selected: var(--ion-color-step-150, var(--ion-background-color-step-150, $background-color)) !default;
/// @prop - Destructive text color of the action sheet button
$action-sheet-ios-button-destructive-text-color: ion-color(danger, base) !default;

4
core/src/components/alert/alert.md.vars.scss
View File

@ -208,7 +208,7 @@ $alert-md-radio-border-style: solid !default;
$alert-md-radio-border-radius: 50% !default;
/// @prop - Border color of the alert radio when off
$alert-md-radio-border-color-off: $text-color-step-450 !default;
$alert-md-radio-border-color-off: $background-color-step-550 !default;
/// @prop - Border color of the alert radio when on
$alert-md-radio-border-color-on: $alert-md-button-text-color !default;
@ -280,7 +280,7 @@ $alert-md-checkbox-border-style: solid !default;
$alert-md-checkbox-border-radius: 2px !default;
/// @prop - Border color of the checkbox in the alert when off
$alert-md-checkbox-border-color-off: $text-color-step-450 !default;
$alert-md-checkbox-border-color-off: $background-color-step-550 !default;
/// @prop - Border color of the checkbox in the alert when on
$alert-md-checkbox-border-color-on: $alert-md-button-text-color !default;

14
core/src/components/breadcrumb/breadcrumb.ios.vars.scss
View File

@ -4,22 +4,22 @@
// --------------------------------------------------
/// @prop - Color of the breadcrumb
$breadcrumb-ios-color: var(--ion-color-step-850, #2d4665) !default;
$breadcrumb-ios-color: var(--ion-color-step-850, var(--ion-text-color-step-150, #2d4665)) !default;
/// @prop - Color of the active breadcrumb
$breadcrumb-ios-color-active: var(--ion-text-color, #03060b) !default;
/// @prop - Background color of the focused breadcrumb
$breadcrumb-ios-background-focused: var(--ion-color-step-50, rgba(233, 237, 243, 0.7)) !default;
$breadcrumb-ios-background-focused: var(--ion-color-step-50, var(--ion-background-color-step-50, rgba(233, 237, 243, 0.7))) !default;
/// @prop - Color of the breadcrumb icon
$breadcrumb-ios-icon-color: var(--ion-color-step-400, #92a0b3) !default;
$breadcrumb-ios-icon-color: var(--ion-color-step-400, var(--ion-text-color-step-600, #92a0b3)) !default;
/// @prop - Color of the breadcrumb icon when active
$breadcrumb-ios-icon-color-active: var(--ion-color-step-850, #242d39) !default;
$breadcrumb-ios-icon-color-active: var(--ion-color-step-850, var(--ion-text-color-step-150, #242d39)) !default;
/// @prop - Color of the breadcrumb icon when focused
$breadcrumb-ios-icon-color-focused: var(--ion-color-step-750, #445b78) !default;
$breadcrumb-ios-icon-color-focused: var(--ion-color-step-750, var(--ion-text-color-step-250, #445b78)) !default;
/// @prop - Color of the breadcrumb separator
$breadcrumb-ios-separator-color: $breadcrumb-separator-color !default;
@ -28,7 +28,7 @@ $breadcrumb-ios-separator-color: $breadcrumb-separator-color !
$breadcrumb-ios-indicator-color: $breadcrumb-ios-separator-color !default;
/// @prop - Background color of the breadcrumb indicator
$breadcrumb-ios-indicator-background: var(--ion-color-step-100, #e9edf3) !default;
$breadcrumb-ios-indicator-background: var(--ion-color-step-100, var(--ion-background-color-step-100, #e9edf3)) !default;
/// @prop - Background color of the breadcrumb indicator when focused
$breadcrumb-ios-indicator-background-focused: var(--ion-color-step-150, #d9e0ea) !default;
$breadcrumb-ios-indicator-background-focused: var(--ion-color-step-150, var(--ion-background-color-step-150, #d9e0ea)) !default;

14
core/src/components/breadcrumb/breadcrumb.md.vars.scss
View File

@ -4,22 +4,22 @@
// --------------------------------------------------
/// @prop - Color of the breadcrumb
$breadcrumb-md-color: var(--ion-color-step-600, #677483) !default;
$breadcrumb-md-color: var(--ion-color-step-600, var(--ion-text-color-step-400, #677483)) !default;
/// @prop - Color of the active breadcrumb
$breadcrumb-md-color-active: var(--ion-text-color, #03060b) !default;
/// @prop - Color of the focused breadcrumb
$breadcrumb-md-color-focused: var(--ion-color-step-800, #35404e) !default;
$breadcrumb-md-color-focused: var(--ion-color-step-800, var(--ion-text-color-step-200, #35404e)) !default;
/// @prop - Background color of the focused breadcrumb
$breadcrumb-md-background-focused: var(--ion-color-step-50, #fff) !default;
$breadcrumb-md-background-focused: var(--ion-color-step-50, var(--ion-background-color-step-50, #fff)) !default;
/// @prop - Color of the breadcrumb icon
$breadcrumb-md-icon-color: var(--ion-color-step-550, #7d8894) !default;
$breadcrumb-md-icon-color: var(--ion-color-step-550, var(--ion-text-color-step-450, #7d8894)) !default;
/// @prop - Color of the breadcrumb icon when active
$breadcrumb-md-icon-color-active: var(--ion-color-step-850, #222d3a) !default;
$breadcrumb-md-icon-color-active: var(--ion-color-step-850, var(--ion-text-color-step-150, #222d3a)) !default;
/// @prop - Margin top of the breadcrumb separator
$breadcrumb-md-separator-margin-top: -1px !default;
@ -40,7 +40,7 @@ $breadcrumb-md-separator-color: $breadcrumb-separator-color
$breadcrumb-md-indicator-color: $breadcrumb-md-separator-color !default;
/// @prop - Background color of the breadcrumb indicator
$breadcrumb-md-indicator-background: var(--ion-color-step-100, #eef1f3) !default;
$breadcrumb-md-indicator-background: var(--ion-color-step-100, var(--ion-background-color-step-100, #eef1f3)) !default;
/// @prop - Background color of the breadcrumb indicator when focused
$breadcrumb-md-indicator-background-focused: var(--ion-color-step-150, #dfe5e8) !default;
$breadcrumb-md-indicator-background-focused: var(--ion-color-step-150, var(--ion-background-color-step-150, #dfe5e8)) !default;

2
core/src/components/breadcrumb/breadcrumb.vars.scss
View File

@ -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, #73849a) !default;
$breadcrumb-separator-color: var(--ion-color-step-550, var(--ion-text-color-step-450, #73849a)) !default;

2
core/src/components/datetime-button/datetime-button.scss
View File

@ -23,7 +23,7 @@
border: none;
background: var(--ion-color-step-300, #edeef0);
background: var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0));
color: $text-color;

2
core/src/components/datetime/datetime.md.scss
View File

@ -3,7 +3,7 @@
@import "../../themes/ionic.globals.md";
:host {
--background: var(--ion-color-step-100, #ffffff);
--background: var(--ion-color-step-100, var(--ion-background-color-step-100, #ffffff));
--title-color: #{current-color(contrast)};
}

2
core/src/components/datetime/datetime.scss
View File

@ -401,7 +401,7 @@
border: none;
background: var(--ion-color-step-300, #edeef0);
background: var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0));
color: $text-color;

4
core/src/components/input/input.scss
View File

@ -402,7 +402,7 @@
.input-bottom .helper-text {
display: block;
color: #{$background-color-step-550};
color: #{$text-color-step-450};
}
:host(.ion-touched.ion-invalid) .input-bottom .error-text {
@ -424,7 +424,7 @@
*/
@include margin-horizontal(auto, null);
color: #{$background-color-step-550};
color: #{$text-color-step-450};
white-space: nowrap;

2
core/src/components/item/item.ios.vars.scss
View File

@ -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;
/// @prop - Width of the avatar in the item
$item-ios-avatar-width: 36px !default;

2
core/src/components/modal/modal.scss
View File

@ -129,7 +129,7 @@ ion-backdrop {
border: 0;
background: var(--ion-color-step-350, #c0c0be);
background: var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));
cursor: pointer;

2
core/src/components/picker/picker.ios.scss
View File

@ -10,5 +10,5 @@
}
:host .picker-highlight {
background: var(--highlight-background, var(--ion-color-step-150, #eeeeef));
background: var(--highlight-background, var(--ion-color-step-150, var(--ion-background-color-step-150, #eeeeef)));
}

2
core/src/components/range/range.ios.vars.scss
View File

@ -27,7 +27,7 @@ $range-ios-hit-height: $range-ios-slider-height !default;
$range-ios-bar-height: 4px !default;
/// @prop - Background of the range bar
$range-ios-bar-background-color: var(--ion-color-step-900, #e6e6e6) !default;
$range-ios-bar-background-color: var(--ion-color-step-900, var(--ion-background-color-step-900, #e6e6e6)) !default;
/// @prop - Border radius of the range bar
$range-ios-bar-border-radius: 2px !default;

2
core/src/components/refresher/refresher.ios.vars.scss
View File

@ -7,7 +7,7 @@ $refresher-ios-icon-color: $text-color !default;
$refresher-ios-text-color: $text-color !default;
/// @prop - Color of the native refresher spinner
$refresher-ios-native-spinner-color: var(--ion-color-step-450, #747577) !default;
$refresher-ios-native-spinner-color: var(--ion-color-step-450, var(--ion-background-color-step-450, #747577)) !default;
/// @prop - Width of the native refresher spinner
$refresher-ios-native-spinner-width: 32px !default;

4
core/src/components/refresher/refresher.md.vars.scss
View File

@ -10,10 +10,10 @@ $refresher-md-text-color: $text-color !default;
$refresher-md-native-spinner-color: #{ion-color(primary, base)} !default;
/// @prop - Border of the native refresher spinner
$refresher-md-native-spinner-border: 1px solid var(--ion-color-step-200, #ececec) !default;
$refresher-md-native-spinner-border: 1px solid var(--ion-color-step-200, var(--ion-background-color-step-200, #ececec)) !default;
/// @prop - Background of the native refresher spinner
$refresher-md-native-spinner-background: var(--ion-color-step-250, #ffffff) !default;
$refresher-md-native-spinner-background: var(--ion-color-step-250, var(--ion-background-color-step-250, #ffffff)) !default;
/// @prop - Box shadow of the native refresher spinner
$refresher-md-native-spinner-box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1) !default;

2
core/src/components/segment-button/segment-button.ios.vars.scss
View File

@ -13,7 +13,7 @@ $segment-button-ios-background-checked: $segment-button-ios-backgr
$segment-button-ios-color: $text-color !default;
/// @prop - Background of the checked segment button indicator
$segment-button-ios-indicator-color: var(--ion-color-step-350, $background-color) !default;
$segment-button-ios-indicator-color: var(--ion-color-step-350, var(--ion-background-color-step-350, $background-color)) !default;
/// @prop - Margin of the segment button
$segment-button-ios-margin: 2px !default;

4
core/src/components/textarea/textarea.scss
View File

@ -434,7 +434,7 @@
.textarea-bottom .helper-text {
display: block;
color: #{$background-color-step-550};
color: #{$text-color-step-450};
}
:host(.ion-touched.ion-invalid) .textarea-bottom .error-text {
@ -456,7 +456,7 @@
*/
@include margin-horizontal(auto, null);
color: #{$background-color-step-550};
color: #{$text-color-step-450};
white-space: nowrap;

45
core/src/components/toast/test/a11y/toast.e2e.ts
View File

@ -230,3 +230,48 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
});
});
});
/**
* High contrast mode tests
*/
configs({ directions: ['ltr'], themes: ['high-contrast-dark', 'high-contrast'] }).forEach(
({ title, config, screenshot }) => {
test.describe(title('toast: high contrast: buttons'), () => {
test.beforeEach(async ({ page }) => {
await page.setContent(
`
<ion-toast is-open="true" header="Testing" message="Hello world"></ion-toast>
<script>
const toast = document.querySelector('ion-toast');
toast.buttons = [
{ text: 'Cancel', role: 'cancel' },
{ text: 'OK' }
];
</script>
`,
config
);
});
test('should not have visual regressions', async ({ page }) => {
const toast = page.locator('ion-toast');
await expect(toast).toBeVisible();
const toastWrapper = toast.locator('.toast-wrapper');
await expect(toastWrapper).toHaveScreenshot(screenshot(`toast-high-contrast-buttons`));
});
test('should pass AAA guidelines', async ({ page }) => {
const ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent');
await ionToastDidPresent.next();
const results = await new AxeBuilder({ page })
.options({ rules: { 'color-contrast-enhanced': { enabled: true } } })
.analyze();
expect(results.violations).toEqual([]);
});
});
}
);

BIN
core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-ios-ltr-high-contrast-Mobile-Chrome-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.7 KiB

BIN
core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-ios-ltr-high-contrast-Mobile-Firefox-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

BIN
core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-ios-ltr-high-contrast-Mobile-Safari-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-ios-ltr-high-contrast-dark-Mobile-Chrome-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.8 KiB

BIN
core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-ios-ltr-high-contrast-dark-Mobile-Firefox-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

BIN
core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-ios-ltr-high-contrast-dark-Mobile-Safari-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

BIN
core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-md-ltr-high-contrast-Mobile-Chrome-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-md-ltr-high-contrast-Mobile-Firefox-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.1 KiB

BIN
core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-md-ltr-high-contrast-Mobile-Safari-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-md-ltr-high-contrast-dark-Mobile-Chrome-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-md-ltr-high-contrast-dark-Mobile-Firefox-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.1 KiB

BIN
core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-high-contrast-buttons-md-ltr-high-contrast-dark-Mobile-Safari-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

6
core/src/components/toast/toast.md.vars.scss
View File

@ -4,7 +4,7 @@
// --------------------------------------------------
/// @prop - Background of the toast
$toast-md-background: $text-color-step-200 !default;
$toast-md-background: $background-color-step-800 !default;
/// @prop - Box shadow of the toast
$toast-md-box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14),
@ -14,7 +14,7 @@ $toast-md-box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0,
$toast-md-font-size: dynamic-font(14px) !default;
/// @prop - Color of the toast
$toast-md-color: $background-color-step-50 !default;
$toast-md-color: $text-color-step-950 !default;
/// @prop - Border radius of the toast wrapper
$toast-md-border-radius: 4px !default;
@ -77,7 +77,7 @@ $toast-md-button-opacity-hover: 0.08 !default;
$toast-md-button-background-color-hover: ion-color(primary, base, $toast-md-button-opacity-hover) !default;
/// @prop - Text color of the cancel toast button
$toast-md-button-cancel-text-color: $background-color-step-100 !default;
$toast-md-button-cancel-text-color: $text-color-step-900 !default;
/// @prop - Background color of the cancel toast button on hover
$toast-md-button-cancel-background-color-hover: rgba($background-color-rgb, $toast-md-button-opacity-hover) !default;