mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-08 15:51:16 +08:00
feat: add high contrast themes (#29010)
⚠️ 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
@ -11,6 +11,8 @@ ignoreFiles:
|
||||
- src/themes/ionic.mixins.scss
|
||||
- src/themes/ionic.functions.color.scss
|
||||
- src/themes/ionic.functions.string.scss
|
||||
- src/themes/ionic.theme.default.scss
|
||||
- src/css/themes/*.scss
|
||||
|
||||
indentation: 2
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -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)};
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -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)));
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -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([]);
|
||||
});
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
@ -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;
|
||||
|
||||
@ -6,48 +6,56 @@
|
||||
--ion-color-primary-contrast-rgb: 0, 0, 0;
|
||||
--ion-color-primary-shade: #447ce0;
|
||||
--ion-color-primary-tint: #5f98ff;
|
||||
|
||||
--ion-color-secondary: #62bdff;
|
||||
--ion-color-secondary-rgb: 98, 189, 255;
|
||||
--ion-color-secondary-contrast: #000000;
|
||||
--ion-color-secondary-contrast-rgb: 0, 0, 0;
|
||||
--ion-color-secondary-shade: #56a6e0;
|
||||
--ion-color-secondary-tint: #72c4ff;
|
||||
|
||||
--ion-color-tertiary: #8482fb;
|
||||
--ion-color-tertiary-rgb: 132, 130, 251;
|
||||
--ion-color-tertiary-contrast: #000000;
|
||||
--ion-color-tertiary-contrast-rgb: 0, 0, 0;
|
||||
--ion-color-tertiary-shade: #7472dd;
|
||||
--ion-color-tertiary-tint: #908ffb;
|
||||
|
||||
--ion-color-success: #2dd55b;
|
||||
--ion-color-success-rgb: 45, 213, 91;
|
||||
--ion-color-success-contrast: #000000;
|
||||
--ion-color-success-contrast-rgb: 0, 0, 0;
|
||||
--ion-color-success-shade: #28bb50;
|
||||
--ion-color-success-tint: #42d96b;
|
||||
|
||||
--ion-color-warning: #ffce31;
|
||||
--ion-color-warning-rgb: 255, 206, 49;
|
||||
--ion-color-warning-contrast: #000000;
|
||||
--ion-color-warning-contrast-rgb: 0, 0, 0;
|
||||
--ion-color-warning-shade: #e0b52b;
|
||||
--ion-color-warning-tint: #ffd346;
|
||||
|
||||
--ion-color-danger: #f56570;
|
||||
--ion-color-danger-rgb: 245, 101, 112;
|
||||
--ion-color-danger-contrast: #000000;
|
||||
--ion-color-danger-contrast-rgb: 0, 0, 0;
|
||||
--ion-color-danger-shade: #d85963;
|
||||
--ion-color-danger-tint: #f6747e;
|
||||
|
||||
--ion-color-dark: #f4f5f8;
|
||||
--ion-color-dark-rgb: 244, 245, 248;
|
||||
--ion-color-dark-contrast: #000000;
|
||||
--ion-color-dark-contrast-rgb: 0, 0, 0;
|
||||
--ion-color-dark-shade: #d7d8da;
|
||||
--ion-color-dark-tint: #f5f6f9;
|
||||
|
||||
--ion-color-medium: #989aa2;
|
||||
--ion-color-medium-rgb: 152, 154, 162;
|
||||
--ion-color-medium-contrast: #000000;
|
||||
--ion-color-medium-contrast-rgb: 0, 0, 0;
|
||||
--ion-color-medium-shade: #86888f;
|
||||
--ion-color-medium-tint: #a2a4ab;
|
||||
|
||||
--ion-color-light: #222428;
|
||||
--ion-color-light-rgb: 34, 36, 40;
|
||||
--ion-color-light-contrast: #ffffff;
|
||||
@ -61,35 +69,58 @@
|
||||
& {
|
||||
--ion-background-color: #000000;
|
||||
--ion-background-color-rgb: 0, 0, 0;
|
||||
|
||||
--ion-text-color: #ffffff;
|
||||
--ion-text-color-rgb: 255, 255, 255;
|
||||
--ion-color-step-50: #0d0d0d;
|
||||
--ion-color-step-100: #1a1a1a;
|
||||
--ion-color-step-150: #262626;
|
||||
--ion-color-step-200: #333333;
|
||||
--ion-color-step-250: #404040;
|
||||
--ion-color-step-300: #4d4d4d;
|
||||
--ion-color-step-350: #595959;
|
||||
--ion-color-step-400: #666666;
|
||||
--ion-color-step-450: #737373;
|
||||
--ion-color-step-500: #808080;
|
||||
--ion-color-step-550: #8c8c8c;
|
||||
--ion-color-step-600: #999999;
|
||||
--ion-color-step-650: #a6a6a6;
|
||||
--ion-color-step-700: #b3b3b3;
|
||||
--ion-color-step-750: #bfbfbf;
|
||||
--ion-color-step-800: #cccccc;
|
||||
--ion-color-step-850: #d9d9d9;
|
||||
--ion-color-step-900: #e6e6e6;
|
||||
--ion-color-step-950: #f2f2f2;
|
||||
|
||||
--ion-background-color-step-50: #0d0d0d;
|
||||
--ion-background-color-step-100: #1a1a1a;
|
||||
--ion-background-color-step-150: #262626;
|
||||
--ion-background-color-step-200: #333333;
|
||||
--ion-background-color-step-250: #404040;
|
||||
--ion-background-color-step-300: #4d4d4d;
|
||||
--ion-background-color-step-350: #595959;
|
||||
--ion-background-color-step-400: #666666;
|
||||
--ion-background-color-step-450: #737373;
|
||||
--ion-background-color-step-500: #808080;
|
||||
--ion-background-color-step-550: #8c8c8c;
|
||||
--ion-background-color-step-600: #999999;
|
||||
--ion-background-color-step-650: #a6a6a6;
|
||||
--ion-background-color-step-700: #b3b3b3;
|
||||
--ion-background-color-step-750: #bfbfbf;
|
||||
--ion-background-color-step-800: #cccccc;
|
||||
--ion-background-color-step-850: #d9d9d9;
|
||||
--ion-background-color-step-900: #e6e6e6;
|
||||
--ion-background-color-step-950: #f2f2f2;
|
||||
|
||||
--ion-text-color-step-50: #f2f2f2;
|
||||
--ion-text-color-step-100: #e6e6e6;
|
||||
--ion-text-color-step-150: #d9d9d9;
|
||||
--ion-text-color-step-200: #cccccc;
|
||||
--ion-text-color-step-250: #bfbfbf;
|
||||
--ion-text-color-step-300: #b3b3b3;
|
||||
--ion-text-color-step-350: #a6a6a6;
|
||||
--ion-text-color-step-400: #999999;
|
||||
--ion-text-color-step-450: #8c8c8c;
|
||||
--ion-text-color-step-500: #808080;
|
||||
--ion-text-color-step-550: #737373;
|
||||
--ion-text-color-step-600: #666666;
|
||||
--ion-text-color-step-650: #595959;
|
||||
--ion-text-color-step-700: #4d4d4d;
|
||||
--ion-text-color-step-750: #404040;
|
||||
--ion-text-color-step-800: #333333;
|
||||
--ion-text-color-step-850: #262626;
|
||||
--ion-text-color-step-900: #1a1a1a;
|
||||
--ion-text-color-step-950: #0d0d0d;
|
||||
|
||||
--ion-item-background: #000000;
|
||||
--ion-card-background: #1c1c1d;
|
||||
}
|
||||
|
||||
& ion-modal {
|
||||
--ion-background-color: var(--ion-color-step-100);
|
||||
--ion-toolbar-background: var(--ion-color-step-150);
|
||||
--ion-toolbar-border-color: var(--ion-color-step-250);
|
||||
--ion-background-color: var(--ion-color-step-100, var(--ion-background-color-step-100));
|
||||
--ion-toolbar-background: var(--ion-color-step-150, var(--ion-background-color-step-150));
|
||||
--ion-toolbar-border-color: var(--ion-color-step-250, var(--ion-background-color-step-250));
|
||||
}
|
||||
}
|
||||
|
||||
@ -97,28 +128,52 @@
|
||||
& {
|
||||
--ion-background-color: #121212;
|
||||
--ion-background-color-rgb: 18, 18, 18;
|
||||
|
||||
--ion-text-color: #ffffff;
|
||||
--ion-text-color-rgb: 255, 255, 255;
|
||||
|
||||
--ion-border-color: #222222;
|
||||
--ion-color-step-50: #1e1e1e;
|
||||
--ion-color-step-100: #2a2a2a;
|
||||
--ion-color-step-150: #363636;
|
||||
--ion-color-step-200: #414141;
|
||||
--ion-color-step-250: #4d4d4d;
|
||||
--ion-color-step-300: #595959;
|
||||
--ion-color-step-350: #656565;
|
||||
--ion-color-step-400: #717171;
|
||||
--ion-color-step-450: #7d7d7d;
|
||||
--ion-color-step-500: #898989;
|
||||
--ion-color-step-550: #949494;
|
||||
--ion-color-step-600: #a0a0a0;
|
||||
--ion-color-step-650: #acacac;
|
||||
--ion-color-step-700: #b8b8b8;
|
||||
--ion-color-step-750: #c4c4c4;
|
||||
--ion-color-step-800: #d0d0d0;
|
||||
--ion-color-step-850: #dbdbdb;
|
||||
--ion-color-step-900: #e7e7e7;
|
||||
--ion-color-step-950: #f3f3f3;
|
||||
|
||||
--ion-background-color-step-50: #1e1e1e;
|
||||
--ion-background-color-step-100: #2a2a2a;
|
||||
--ion-background-color-step-150: #363636;
|
||||
--ion-background-color-step-200: #414141;
|
||||
--ion-background-color-step-250: #4d4d4d;
|
||||
--ion-background-color-step-300: #595959;
|
||||
--ion-background-color-step-350: #656565;
|
||||
--ion-background-color-step-400: #717171;
|
||||
--ion-background-color-step-450: #7d7d7d;
|
||||
--ion-background-color-step-500: #898989;
|
||||
--ion-background-color-step-550: #949494;
|
||||
--ion-background-color-step-600: #a0a0a0;
|
||||
--ion-background-color-step-650: #acacac;
|
||||
--ion-background-color-step-700: #b8b8b8;
|
||||
--ion-background-color-step-750: #c4c4c4;
|
||||
--ion-background-color-step-800: #d0d0d0;
|
||||
--ion-background-color-step-850: #dbdbdb;
|
||||
--ion-background-color-step-900: #e7e7e7;
|
||||
--ion-background-color-step-950: #f3f3f3;
|
||||
|
||||
--ion-text-color-step-50: #f3f3f3;
|
||||
--ion-text-color-step-100: #e7e7e7;
|
||||
--ion-text-color-step-150: #dbdbdb;
|
||||
--ion-text-color-step-200: #d0d0d0;
|
||||
--ion-text-color-step-250: #c4c4c4;
|
||||
--ion-text-color-step-300: #b8b8b8;
|
||||
--ion-text-color-step-350: #acacac;
|
||||
--ion-text-color-step-400: #a0a0a0;
|
||||
--ion-text-color-step-450: #949494;
|
||||
--ion-text-color-step-500: #898989;
|
||||
--ion-text-color-step-550: #7d7d7d;
|
||||
--ion-text-color-step-600: #717171;
|
||||
--ion-text-color-step-650: #656565;
|
||||
--ion-text-color-step-700: #595959;
|
||||
--ion-text-color-step-750: #4d4d4d;
|
||||
--ion-text-color-step-800: #414141;
|
||||
--ion-text-color-step-850: #363636;
|
||||
--ion-text-color-step-900: #2a2a2a;
|
||||
--ion-text-color-step-950: #1e1e1e;
|
||||
|
||||
--ion-item-background: #1e1e1e;
|
||||
--ion-toolbar-background: #1f1f1f;
|
||||
--ion-tab-bar-background: #1f1f1f;
|
||||
|
||||
13
core/src/css/themes/high-contrast-dark.always.scss
Normal file
13
core/src/css/themes/high-contrast-dark.always.scss
Normal file
@ -0,0 +1,13 @@
|
||||
@import "./high-contrast-dark";
|
||||
|
||||
:root {
|
||||
@include high-contrast-dark-base-theme();
|
||||
}
|
||||
|
||||
:root.ios {
|
||||
@include high-contrast-dark-ios-theme();
|
||||
}
|
||||
|
||||
:root.md {
|
||||
@include high-contrast-dark-md-theme();
|
||||
}
|
||||
13
core/src/css/themes/high-contrast-dark.class.scss
Normal file
13
core/src/css/themes/high-contrast-dark.class.scss
Normal file
@ -0,0 +1,13 @@
|
||||
@import "./high-contrast-dark";
|
||||
|
||||
.ion-theme-high-contrast.ion-theme-dark {
|
||||
@include high-contrast-dark-base-theme();
|
||||
}
|
||||
|
||||
.ion-theme-high-contrast.ion-theme-dark.ios {
|
||||
@include high-contrast-dark-ios-theme();
|
||||
}
|
||||
|
||||
.ion-theme-high-contrast.ion-theme-dark.md {
|
||||
@include high-contrast-dark-md-theme();
|
||||
}
|
||||
263
core/src/css/themes/high-contrast-dark.scss
Normal file
263
core/src/css/themes/high-contrast-dark.scss
Normal file
@ -0,0 +1,263 @@
|
||||
@use "sass:map";
|
||||
@import "../../themes/ionic.functions.color";
|
||||
|
||||
$primary: #7cabff !default;
|
||||
$secondary: #62bdff !default;
|
||||
$tertiary: #b6b9f9 !default;
|
||||
$success: #4ada71 !default;
|
||||
$warning: #ffce31 !default;
|
||||
$danger: #fc9aa2 !default;
|
||||
$light: #222428 !default;
|
||||
$medium: #a8aab3 !default;
|
||||
$dark: #f4f5f8 !default;
|
||||
|
||||
$colors: (
|
||||
primary: (
|
||||
base: $primary,
|
||||
contrast: #000,
|
||||
shade: get-color-shade($primary),
|
||||
tint: get-color-tint($primary)
|
||||
),
|
||||
secondary: (
|
||||
base: $secondary,
|
||||
contrast: #000,
|
||||
shade: get-color-shade($secondary),
|
||||
tint: get-color-tint($secondary)
|
||||
),
|
||||
tertiary: (
|
||||
base: $tertiary,
|
||||
contrast: #000,
|
||||
shade: get-color-shade($tertiary),
|
||||
tint: get-color-tint($tertiary)
|
||||
),
|
||||
success: (
|
||||
base: $success,
|
||||
contrast: #000,
|
||||
shade: get-color-shade($success),
|
||||
tint: get-color-tint($success)
|
||||
),
|
||||
warning: (
|
||||
base: $warning,
|
||||
contrast: #000,
|
||||
shade: get-color-shade($warning),
|
||||
tint: get-color-tint($warning)
|
||||
),
|
||||
danger: (
|
||||
base: $danger,
|
||||
contrast: #000,
|
||||
shade: get-color-shade($danger),
|
||||
tint: get-color-tint($danger)
|
||||
),
|
||||
light: (
|
||||
base: $light,
|
||||
contrast: #fff,
|
||||
shade: get-color-shade($light),
|
||||
tint: get-color-tint($light)
|
||||
),
|
||||
medium: (
|
||||
base: $medium,
|
||||
contrast: #000,
|
||||
shade: get-color-shade($medium),
|
||||
tint: get-color-tint($medium)
|
||||
),
|
||||
dark: (
|
||||
base: $dark,
|
||||
contrast: #000,
|
||||
shade: get-color-shade($dark),
|
||||
tint: get-color-tint($dark)
|
||||
)
|
||||
) !default;
|
||||
|
||||
/// Text step colors are generated based on
|
||||
/// how dark or light text can be. The darkest
|
||||
/// text color is usually the default text color (white or black).
|
||||
/// The darker the $lightest-text-color is, the darker each
|
||||
/// stepped color is. If you want to increase text contrast,
|
||||
/// make $lightest-text-color darker.
|
||||
$text-color: #ffffff;
|
||||
|
||||
$darkest-text-color: #888888;
|
||||
$lightest-text-color: $text-color;
|
||||
|
||||
/// Loop through each color object above
|
||||
/// and generate CSS Variables for each
|
||||
/// color. Do not use the ion-color function
|
||||
/// here because that will set the variable
|
||||
/// to evaluate to itself with a fallback.
|
||||
/// For example:
|
||||
/// --ion-color-primary: #{ion-color(primary, base)};
|
||||
/// Maps to:
|
||||
/// --ion-color-primary: var(--ion-color-primary, #...);
|
||||
|
||||
/// We apply certain styles to the per-mode classes (ios and md)
|
||||
/// as opposed to setting everything in :root
|
||||
// so any high contrast dark styles override the standard
|
||||
/// contrast dark styles.
|
||||
@mixin high-contrast-dark-base-theme() {
|
||||
& {
|
||||
@each $color-name, $value in $colors {
|
||||
--ion-color-#{$color-name}: #{map.get($value, base)};
|
||||
--ion-color-#{$color-name}-rgb: #{color-to-rgb-list(map.get($value, base))};
|
||||
--ion-color-#{$color-name}-contrast: #{map.get($value, contrast)};
|
||||
--ion-color-#{$color-name}-contrast-rgb: #{color-to-rgb-list(map.get($value, contrast))};
|
||||
--ion-color-#{$color-name}-shade: #{map.get($value, shade)};
|
||||
--ion-color-#{$color-name}-tint: #{map.get($value, tint)};
|
||||
}
|
||||
|
||||
--ion-placeholder-opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin high-contrast-dark-ios-theme() {
|
||||
& {
|
||||
$background-color: #000000;
|
||||
|
||||
--ion-background-color: #{$background-color};
|
||||
--ion-background-color-rgb: #{color-to-rgb-list($background-color)};
|
||||
|
||||
--ion-text-color: #{$text-color};
|
||||
--ion-text-color-rgb: #{color-to-rgb-list($text-color)};
|
||||
|
||||
--ion-item-background: #000000;
|
||||
--ion-card-background: #1c1c1d;
|
||||
|
||||
/// Only the item borders should increase in contrast
|
||||
/// Borders for elements like toolbars should remain the same
|
||||
--ion-item-border-color: var(--ion-background-color-step-400);
|
||||
|
||||
--ion-text-color-step-50: #{mix($darkest-text-color, $lightest-text-color, 5%)};
|
||||
--ion-text-color-step-100: #{mix($darkest-text-color, $lightest-text-color, 10%)};
|
||||
--ion-text-color-step-150: #{mix($darkest-text-color, $lightest-text-color, 15%)};
|
||||
--ion-text-color-step-200: #{mix($darkest-text-color, $lightest-text-color, 20%)};
|
||||
--ion-text-color-step-250: #{mix($darkest-text-color, $lightest-text-color, 25%)};
|
||||
--ion-text-color-step-300: #{mix($darkest-text-color, $lightest-text-color, 30%)};
|
||||
--ion-text-color-step-350: #{mix($darkest-text-color, $lightest-text-color, 35%)};
|
||||
--ion-text-color-step-400: #{mix($darkest-text-color, $lightest-text-color, 40%)};
|
||||
--ion-text-color-step-450: #{mix($darkest-text-color, $lightest-text-color, 45%)};
|
||||
--ion-text-color-step-500: #{mix($darkest-text-color, $lightest-text-color, 50%)};
|
||||
--ion-text-color-step-550: #{mix($darkest-text-color, $lightest-text-color, 55%)};
|
||||
--ion-text-color-step-600: #{mix($darkest-text-color, $lightest-text-color, 60%)};
|
||||
--ion-text-color-step-650: #{mix($darkest-text-color, $lightest-text-color, 65%)};
|
||||
--ion-text-color-step-700: #{mix($darkest-text-color, $lightest-text-color, 70%)};
|
||||
--ion-text-color-step-750: #{mix($darkest-text-color, $lightest-text-color, 75%)};
|
||||
--ion-text-color-step-800: #{mix($darkest-text-color, $lightest-text-color, 80%)};
|
||||
--ion-text-color-step-850: #{mix($darkest-text-color, $lightest-text-color, 85%)};
|
||||
--ion-text-color-step-900: #{mix($darkest-text-color, $lightest-text-color, 90%)};
|
||||
--ion-text-color-step-950: #{mix($darkest-text-color, $lightest-text-color, 95%)};
|
||||
|
||||
--ion-background-color-step-50: #{mix($text-color, $background-color, 5%)};
|
||||
--ion-background-color-step-100: #{mix($text-color, $background-color, 10%)};
|
||||
--ion-background-color-step-150: #{mix($text-color, $background-color, 15%)};
|
||||
--ion-background-color-step-200: #{mix($text-color, $background-color, 20%)};
|
||||
--ion-background-color-step-250: #{mix($text-color, $background-color, 25%)};
|
||||
--ion-background-color-step-300: #{mix($text-color, $background-color, 30%)};
|
||||
--ion-background-color-step-350: #{mix($text-color, $background-color, 35%)};
|
||||
--ion-background-color-step-400: #{mix($text-color, $background-color, 40%)};
|
||||
--ion-background-color-step-450: #{mix($text-color, $background-color, 45%)};
|
||||
--ion-background-color-step-500: #{mix($text-color, $background-color, 50%)};
|
||||
--ion-background-color-step-550: #{mix($text-color, $background-color, 55%)};
|
||||
--ion-background-color-step-600: #{mix($text-color, $background-color, 60%)};
|
||||
--ion-background-color-step-650: #{mix($text-color, $background-color, 65%)};
|
||||
--ion-background-color-step-700: #{mix($text-color, $background-color, 70%)};
|
||||
--ion-background-color-step-750: #{mix($text-color, $background-color, 75%)};
|
||||
--ion-background-color-step-800: #{mix($text-color, $background-color, 80%)};
|
||||
--ion-background-color-step-850: #{mix($text-color, $background-color, 85%)};
|
||||
--ion-background-color-step-900: #{mix($text-color, $background-color, 90%)};
|
||||
--ion-background-color-step-950: #{mix($text-color, $background-color, 95%)};
|
||||
}
|
||||
|
||||
// Modal
|
||||
// --------------------------------------------------
|
||||
|
||||
& ion-modal {
|
||||
--ion-background-color: var(--ion-background-color-step-100);
|
||||
--ion-toolbar-background: var(--ion-background-color-step-150);
|
||||
--ion-toolbar-border-color: var(--ion-background-color-step-250);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin high-contrast-dark-md-theme() {
|
||||
& {
|
||||
$background-color: #121212;
|
||||
|
||||
--ion-background-color: #{$background-color};
|
||||
--ion-background-color-rgb: #{color-to-rgb-list($background-color)};
|
||||
|
||||
--ion-text-color: #{$text-color};
|
||||
--ion-text-color-rgb: #{color-to-rgb-list($text-color)};
|
||||
|
||||
--ion-border-color: #222222;
|
||||
|
||||
--ion-item-background: #1e1e1e;
|
||||
--ion-toolbar-background: #1f1f1f;
|
||||
--ion-tab-bar-background: #1f1f1f;
|
||||
--ion-card-background: #1e1e1e;
|
||||
|
||||
/// Only the item borders should increase in contrast
|
||||
/// Borders for elements like toolbars should remain the same
|
||||
--ion-item-border-color: var(--ion-background-color-step-400);
|
||||
|
||||
--ion-text-color-step-50: #{mix($darkest-text-color, $lightest-text-color, 5%)};
|
||||
--ion-text-color-step-100: #{mix($darkest-text-color, $lightest-text-color, 10%)};
|
||||
--ion-text-color-step-150: #{mix($darkest-text-color, $lightest-text-color, 15%)};
|
||||
--ion-text-color-step-200: #{mix($darkest-text-color, $lightest-text-color, 20%)};
|
||||
--ion-text-color-step-250: #{mix($darkest-text-color, $lightest-text-color, 25%)};
|
||||
--ion-text-color-step-300: #{mix($darkest-text-color, $lightest-text-color, 30%)};
|
||||
--ion-text-color-step-350: #{mix($darkest-text-color, $lightest-text-color, 35%)};
|
||||
--ion-text-color-step-400: #{mix($darkest-text-color, $lightest-text-color, 40%)};
|
||||
--ion-text-color-step-450: #{mix($darkest-text-color, $lightest-text-color, 45%)};
|
||||
--ion-text-color-step-500: #{mix($darkest-text-color, $lightest-text-color, 50%)};
|
||||
--ion-text-color-step-550: #{mix($darkest-text-color, $lightest-text-color, 55%)};
|
||||
--ion-text-color-step-600: #{mix($darkest-text-color, $lightest-text-color, 60%)};
|
||||
--ion-text-color-step-650: #{mix($darkest-text-color, $lightest-text-color, 65%)};
|
||||
--ion-text-color-step-700: #{mix($darkest-text-color, $lightest-text-color, 70%)};
|
||||
--ion-text-color-step-750: #{mix($darkest-text-color, $lightest-text-color, 75%)};
|
||||
--ion-text-color-step-800: #{mix($darkest-text-color, $lightest-text-color, 80%)};
|
||||
--ion-text-color-step-850: #{mix($darkest-text-color, $lightest-text-color, 85%)};
|
||||
--ion-text-color-step-900: #{mix($darkest-text-color, $lightest-text-color, 90%)};
|
||||
--ion-text-color-step-950: #{mix($darkest-text-color, $lightest-text-color, 95%)};
|
||||
|
||||
--ion-background-color-step-50: #{mix($text-color, $background-color, 5%)};
|
||||
--ion-background-color-step-100: #{mix($text-color, $background-color, 10%)};
|
||||
--ion-background-color-step-150: #{mix($text-color, $background-color, 15%)};
|
||||
--ion-background-color-step-200: #{mix($text-color, $background-color, 20%)};
|
||||
--ion-background-color-step-250: #{mix($text-color, $background-color, 25%)};
|
||||
--ion-background-color-step-300: #{mix($text-color, $background-color, 30%)};
|
||||
--ion-background-color-step-350: #{mix($text-color, $background-color, 35%)};
|
||||
--ion-background-color-step-400: #{mix($text-color, $background-color, 40%)};
|
||||
--ion-background-color-step-450: #{mix($text-color, $background-color, 45%)};
|
||||
--ion-background-color-step-500: #{mix($text-color, $background-color, 50%)};
|
||||
--ion-background-color-step-550: #{mix($text-color, $background-color, 55%)};
|
||||
--ion-background-color-step-600: #{mix($text-color, $background-color, 60%)};
|
||||
--ion-background-color-step-650: #{mix($text-color, $background-color, 65%)};
|
||||
--ion-background-color-step-700: #{mix($text-color, $background-color, 70%)};
|
||||
--ion-background-color-step-750: #{mix($text-color, $background-color, 75%)};
|
||||
--ion-background-color-step-800: #{mix($text-color, $background-color, 80%)};
|
||||
--ion-background-color-step-850: #{mix($text-color, $background-color, 85%)};
|
||||
--ion-background-color-step-900: #{mix($text-color, $background-color, 90%)};
|
||||
--ion-background-color-step-950: #{mix($text-color, $background-color, 95%)};
|
||||
}
|
||||
|
||||
// Toast
|
||||
// --------------------------------------------------
|
||||
|
||||
& ion-toast {
|
||||
--color: var(--ion-background-color);
|
||||
}
|
||||
|
||||
& ion-toast::part(button) {
|
||||
// Fallback for browsers that don't support color-mix
|
||||
color: var(--color);
|
||||
}
|
||||
|
||||
/* 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) 73%, var(--button-color));
|
||||
}
|
||||
}
|
||||
|
||||
& ion-toast::part(button cancel) {
|
||||
color: var(--color);
|
||||
}
|
||||
}
|
||||
15
core/src/css/themes/high-contrast-dark.system.scss
Normal file
15
core/src/css/themes/high-contrast-dark.system.scss
Normal file
@ -0,0 +1,15 @@
|
||||
@import "./high-contrast-dark";
|
||||
|
||||
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
@include high-contrast-dark-base-theme();
|
||||
}
|
||||
|
||||
:root.ios {
|
||||
@include high-contrast-dark-ios-theme();
|
||||
}
|
||||
|
||||
:root.md {
|
||||
@include high-contrast-dark-md-theme();
|
||||
}
|
||||
}
|
||||
9
core/src/css/themes/high-contrast.always.scss
Normal file
9
core/src/css/themes/high-contrast.always.scss
Normal file
@ -0,0 +1,9 @@
|
||||
@import "./high-contrast";
|
||||
|
||||
:root {
|
||||
@include high-contrast-light-base-theme();
|
||||
}
|
||||
|
||||
:root.md {
|
||||
@include high-contrast-light-md-theme();
|
||||
}
|
||||
9
core/src/css/themes/high-contrast.class.scss
Normal file
9
core/src/css/themes/high-contrast.class.scss
Normal file
@ -0,0 +1,9 @@
|
||||
@import "./high-contrast";
|
||||
|
||||
.ion-theme-high-contrast {
|
||||
@include high-contrast-light-base-theme();
|
||||
}
|
||||
|
||||
.ion-theme-high-contrast.md {
|
||||
@include high-contrast-light-md-theme();
|
||||
}
|
||||
160
core/src/css/themes/high-contrast.scss
Normal file
160
core/src/css/themes/high-contrast.scss
Normal file
@ -0,0 +1,160 @@
|
||||
@use "sass:map";
|
||||
@import "../../themes/ionic.functions.color";
|
||||
|
||||
$primary: #003fae !default;
|
||||
$secondary: #01487b !default;
|
||||
$tertiary: #3400e6 !default;
|
||||
$success: #004314 !default;
|
||||
$warning: #5f4100 !default;
|
||||
$danger: #9c000c !default;
|
||||
$light: #f4f5f8 !default;
|
||||
$medium: #444446 !default;
|
||||
$dark: #222428 !default;
|
||||
|
||||
$colors: (
|
||||
primary: (
|
||||
base: $primary,
|
||||
contrast: #fff,
|
||||
shade: get-color-shade($primary),
|
||||
tint: get-color-tint($primary)
|
||||
),
|
||||
secondary: (
|
||||
base: $secondary,
|
||||
contrast: #fff,
|
||||
shade: get-color-shade($secondary),
|
||||
tint: get-color-tint($secondary)
|
||||
),
|
||||
tertiary: (
|
||||
base: $tertiary,
|
||||
contrast: #fff,
|
||||
shade: get-color-shade($tertiary),
|
||||
tint: get-color-tint($tertiary)
|
||||
),
|
||||
success: (
|
||||
base: $success,
|
||||
contrast: #fff,
|
||||
shade: get-color-shade($success),
|
||||
tint: get-color-tint($success)
|
||||
),
|
||||
warning: (
|
||||
base: $warning,
|
||||
contrast: #fff,
|
||||
shade: get-color-shade($warning),
|
||||
tint: get-color-tint($warning)
|
||||
),
|
||||
danger: (
|
||||
base: $danger,
|
||||
contrast: #fff,
|
||||
shade: get-color-shade($danger),
|
||||
tint: get-color-tint($danger)
|
||||
),
|
||||
light: (
|
||||
base: $light,
|
||||
contrast: #000,
|
||||
shade: get-color-shade($light),
|
||||
tint: get-color-tint($light)
|
||||
),
|
||||
medium: (
|
||||
base: $medium,
|
||||
contrast: #fff,
|
||||
shade: get-color-shade($medium),
|
||||
tint: get-color-tint($medium)
|
||||
),
|
||||
dark: (
|
||||
base: $dark,
|
||||
contrast: #fff,
|
||||
shade: get-color-shade($dark),
|
||||
tint: get-color-tint($dark)
|
||||
)
|
||||
) !default;
|
||||
|
||||
/// Text step colors are generated based on
|
||||
/// how dark or light text can be. The darkest
|
||||
/// text color is usually the default text color (white or black).
|
||||
/// The darker the $lightest-text-color is, the darker each
|
||||
/// stepped color is. If you want to increase text contrast,
|
||||
/// make $lightest-text-color darker.
|
||||
$background-color: #ffffff;
|
||||
$text-color: #000000;
|
||||
|
||||
$darkest-text-color: $text-color;
|
||||
$lightest-text-color: #888888;
|
||||
|
||||
/// Loop through each color object above
|
||||
/// and generate CSS Variables for each
|
||||
/// color. Do not use the ion-color function
|
||||
/// here because that will set the variable
|
||||
/// to evaluate to itself with a fallback.
|
||||
/// For example:
|
||||
/// --ion-color-primary: #{ion-color(primary, base)};
|
||||
/// Maps to:
|
||||
/// --ion-color-primary: var(--ion-color-primary, #...);
|
||||
@mixin high-contrast-light-base-theme() {
|
||||
& {
|
||||
@each $color-name, $value in $colors {
|
||||
--ion-color-#{$color-name}: #{map.get($value, base)};
|
||||
--ion-color-#{$color-name}-rgb: #{color-to-rgb-list(map.get($value, base))};
|
||||
--ion-color-#{$color-name}-contrast: #{map.get($value, contrast)};
|
||||
--ion-color-#{$color-name}-contrast-rgb: #{color-to-rgb-list(map.get($value, contrast))};
|
||||
--ion-color-#{$color-name}-shade: #{map.get($value, shade)};
|
||||
--ion-color-#{$color-name}-tint: #{map.get($value, tint)};
|
||||
}
|
||||
|
||||
--ion-background-color: #{$background-color};
|
||||
--ion-background-color-rgb: #{color-to-rgb-list($background-color)};
|
||||
|
||||
--ion-text-color: #{$text-color};
|
||||
--ion-text-color-rgb: #{color-to-rgb-list($text-color)};
|
||||
|
||||
--ion-placeholder-opacity: 0.8;
|
||||
|
||||
/// Only the item borders should increase in contrast
|
||||
/// Borders for elements like toolbars should remain the same
|
||||
--ion-item-border-color: #7a7a7a;
|
||||
|
||||
--ion-text-color-step-50: #{mix($lightest-text-color, $darkest-text-color, 5%)};
|
||||
--ion-text-color-step-100: #{mix($lightest-text-color, $darkest-text-color, 10%)};
|
||||
--ion-text-color-step-150: #{mix($lightest-text-color, $darkest-text-color, 15%)};
|
||||
--ion-text-color-step-200: #{mix($lightest-text-color, $darkest-text-color, 20%)};
|
||||
--ion-text-color-step-250: #{mix($lightest-text-color, $darkest-text-color, 25%)};
|
||||
--ion-text-color-step-300: #{mix($lightest-text-color, $darkest-text-color, 30%)};
|
||||
--ion-text-color-step-350: #{mix($lightest-text-color, $darkest-text-color, 35%)};
|
||||
--ion-text-color-step-400: #{mix($lightest-text-color, $darkest-text-color, 40%)};
|
||||
--ion-text-color-step-450: #{mix($lightest-text-color, $darkest-text-color, 45%)};
|
||||
--ion-text-color-step-500: #{mix($lightest-text-color, $darkest-text-color, 50%)};
|
||||
--ion-text-color-step-550: #{mix($lightest-text-color, $darkest-text-color, 55%)};
|
||||
--ion-text-color-step-600: #{mix($lightest-text-color, $darkest-text-color, 60%)};
|
||||
--ion-text-color-step-650: #{mix($lightest-text-color, $darkest-text-color, 65%)};
|
||||
--ion-text-color-step-700: #{mix($lightest-text-color, $darkest-text-color, 70%)};
|
||||
--ion-text-color-step-750: #{mix($lightest-text-color, $darkest-text-color, 75%)};
|
||||
--ion-text-color-step-800: #{mix($lightest-text-color, $darkest-text-color, 80%)};
|
||||
--ion-text-color-step-850: #{mix($lightest-text-color, $darkest-text-color, 85%)};
|
||||
--ion-text-color-step-900: #{mix($lightest-text-color, $darkest-text-color, 90%)};
|
||||
--ion-text-color-step-950: #{mix($lightest-text-color, $darkest-text-color, 95%)};
|
||||
}
|
||||
}
|
||||
|
||||
@mixin high-contrast-light-md-theme() {
|
||||
// Toast
|
||||
// --------------------------------------------------
|
||||
|
||||
& ion-toast {
|
||||
--color: var(--ion-background-color);
|
||||
}
|
||||
|
||||
& ion-toast::part(button) {
|
||||
// Fallback for browsers that don't support color-mix
|
||||
color: var(--color);
|
||||
}
|
||||
|
||||
/* 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) 70%, var(--button-color));
|
||||
}
|
||||
}
|
||||
|
||||
& ion-toast::part(button cancel) {
|
||||
color: var(--color);
|
||||
}
|
||||
}
|
||||
11
core/src/css/themes/high-contrast.system.scss
Normal file
11
core/src/css/themes/high-contrast.system.scss
Normal file
@ -0,0 +1,11 @@
|
||||
@import "./high-contrast";
|
||||
|
||||
@media (prefers-contrast: more) {
|
||||
:root {
|
||||
@include high-contrast-light-base-theme();
|
||||
}
|
||||
|
||||
:root.md {
|
||||
@include high-contrast-light-md-theme();
|
||||
}
|
||||
}
|
||||
@ -35,7 +35,7 @@ $screen-breakpoints: (
|
||||
// Input placeholder opacity
|
||||
// Ensures that the placeholder has the
|
||||
// correct color contrast against the background.
|
||||
$placeholder-opacity: 0.6 !default;
|
||||
$placeholder-opacity: var(--ion-placeholder-opacity, 0.6) !default;
|
||||
|
||||
$form-control-label-margin: 16px !default;
|
||||
|
||||
|
||||
@ -7,26 +7,26 @@
|
||||
// iOS General Colors
|
||||
// --------------------------------------------------
|
||||
$backdrop-ios-color: var(--ion-backdrop-color, #000) !default;
|
||||
$overlay-ios-background-color: var(--ion-overlay-background-color, var(--ion-color-step-100, #f9f9f9)) !default;
|
||||
$overlay-ios-background-color: var(--ion-overlay-background-color, var(--ion-color-step-100, var(--ion-background-color-step-100, #f9f9f9))) !default;
|
||||
|
||||
// iOS Tabs & Tab bar
|
||||
// --------------------------------------------------
|
||||
$tabbar-ios-background: var(--ion-tab-bar-background, var(--ion-color-step-50, #f7f7f7)) !default;
|
||||
$tabbar-ios-background: var(--ion-tab-bar-background, var(--ion-color-step-50, var(--ion-background-color-step-50, #f7f7f7))) !default;
|
||||
$tabbar-ios-background-focused: var(--ion-tab-bar-background-focused, get-color-shade(#fff)) !default;
|
||||
$tabbar-ios-border-color: var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, .2)))) !default;
|
||||
$tabbar-ios-border-color: var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, .2)))) )!default;
|
||||
$tabbar-ios-color: var(--ion-tab-bar-color, $text-color-step-400) !default;
|
||||
$tabbar-ios-color-selected: var(--ion-tab-bar-color-selected, ion-color(primary, base)) !default;
|
||||
|
||||
// iOS Toolbar
|
||||
// --------------------------------------------------
|
||||
$toolbar-ios-background: var(--ion-toolbar-background, var(--ion-color-step-50, #f7f7f7)) !default;
|
||||
$toolbar-ios-border-color: var(--ion-toolbar-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, .2)))) !default;
|
||||
$toolbar-ios-background: var(--ion-toolbar-background, var(--ion-color-step-50, var(--ion-background-color-step-50, #f7f7f7))) !default;
|
||||
$toolbar-ios-border-color: var(--ion-toolbar-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, .2))))) !default;
|
||||
$toolbar-ios-color: var(--ion-toolbar-color, $text-color) !default;
|
||||
|
||||
// iOS List & List Items
|
||||
// --------------------------------------------------
|
||||
$item-ios-background: var(--ion-item-background, $background-color) !default;
|
||||
$item-ios-border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, #c8c7cc))) !default;
|
||||
$item-ios-border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc)))) !default;
|
||||
$item-ios-color: var(--ion-item-color, $text-color) !default;
|
||||
|
||||
// iOS Card
|
||||
|
||||
@ -8,14 +8,14 @@
|
||||
// Material Design General Colors
|
||||
// --------------------------------------------------
|
||||
$backdrop-md-color: var(--ion-backdrop-color, #000) !default;
|
||||
$border-md-color: var(--ion-border-color, var(--ion-color-step-150, #c1c4cd)) !default;
|
||||
$border-md-color: var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, #c1c4cd))) !default;
|
||||
$overlay-md-background-color: var(--ion-overlay-background-color, var(--ion-background-color, #fff)) !default;
|
||||
|
||||
// Material Design Tabs & Tab bar
|
||||
// --------------------------------------------------
|
||||
$tabbar-md-background: var(--ion-tab-bar-background, $background-color) !default;
|
||||
$tabbar-md-background-focused: var(--ion-tab-bar-background-focused, get-color-shade(#fff)) !default;
|
||||
$tabbar-md-border-color: var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, .07)))) !default;
|
||||
$tabbar-md-border-color: var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, .07))))) !default;
|
||||
$tabbar-md-color: var(--ion-tab-bar-color, $text-color-step-350) !default;
|
||||
$tabbar-md-color-selected: var(--ion-tab-bar-color-selected, ion-color(primary, base)) !default;
|
||||
|
||||
@ -28,7 +28,7 @@ $toolbar-md-color: var(--ion-toolbar-color, var(--ion-t
|
||||
// Material Design List & List Items
|
||||
// --------------------------------------------------
|
||||
$item-md-background: var(--ion-item-background, $background-color) !default;
|
||||
$item-md-border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, .13)))) !default;
|
||||
$item-md-border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, .13))))) !default;
|
||||
$item-md-color: var(--ion-item-color, $text-color) !default;
|
||||
|
||||
// Material Design Card
|
||||
|
||||
@ -101,44 +101,44 @@ $text-color-rgb: var(--ion-text-color-rgb, $text-color-rgb-va
|
||||
// For example, $text-color-step-XXX will be $text-color stepping towards $background-color,
|
||||
// but a $background-color-step-XXX will be $background-color stepping towards $text-color.
|
||||
|
||||
$background-color-step-50: var(--ion-color-step-50, mix($text-color-value, $background-color-value, 5%)) !default;
|
||||
$background-color-step-100: var(--ion-color-step-100, mix($text-color-value, $background-color-value, 10%)) !default;
|
||||
$background-color-step-150: var(--ion-color-step-150, mix($text-color-value, $background-color-value, 15%)) !default;
|
||||
$background-color-step-200: var(--ion-color-step-200, mix($text-color-value, $background-color-value, 20%)) !default;
|
||||
$background-color-step-250: var(--ion-color-step-250, mix($text-color-value, $background-color-value, 25%)) !default;
|
||||
$background-color-step-300: var(--ion-color-step-300, mix($text-color-value, $background-color-value, 30%)) !default;
|
||||
$background-color-step-350: var(--ion-color-step-350, mix($text-color-value, $background-color-value, 35%)) !default;
|
||||
$background-color-step-400: var(--ion-color-step-400, mix($text-color-value, $background-color-value, 40%)) !default;
|
||||
$background-color-step-450: var(--ion-color-step-450, mix($text-color-value, $background-color-value, 45%)) !default;
|
||||
$background-color-step-500: var(--ion-color-step-500, mix($text-color-value, $background-color-value, 50%)) !default;
|
||||
$background-color-step-550: var(--ion-color-step-550, mix($text-color-value, $background-color-value, 55%)) !default;
|
||||
$background-color-step-600: var(--ion-color-step-600, mix($text-color-value, $background-color-value, 60%)) !default;
|
||||
$background-color-step-650: var(--ion-color-step-650, mix($text-color-value, $background-color-value, 65%)) !default;
|
||||
$background-color-step-700: var(--ion-color-step-700, mix($text-color-value, $background-color-value, 70%)) !default;
|
||||
$background-color-step-750: var(--ion-color-step-750, mix($text-color-value, $background-color-value, 75%)) !default;
|
||||
$background-color-step-800: var(--ion-color-step-800, mix($text-color-value, $background-color-value, 80%)) !default;
|
||||
$background-color-step-850: var(--ion-color-step-850, mix($text-color-value, $background-color-value, 85%)) !default;
|
||||
$background-color-step-900: var(--ion-color-step-900, mix($text-color-value, $background-color-value, 90%)) !default;
|
||||
$background-color-step-950: var(--ion-color-step-950, mix($text-color-value, $background-color-value, 95%)) !default;
|
||||
$text-color-step-50: var(--ion-color-step-950, mix($background-color-value, $text-color-value, 5%)) !default;
|
||||
$text-color-step-100: var(--ion-color-step-900, mix($background-color-value, $text-color-value, 10%)) !default;
|
||||
$text-color-step-150: var(--ion-color-step-850, mix($background-color-value, $text-color-value, 15%)) !default;
|
||||
$text-color-step-200: var(--ion-color-step-800, mix($background-color-value, $text-color-value, 20%)) !default;
|
||||
$text-color-step-250: var(--ion-color-step-750, mix($background-color-value, $text-color-value, 25%)) !default;
|
||||
$text-color-step-300: var(--ion-color-step-700, mix($background-color-value, $text-color-value, 30%)) !default;
|
||||
$text-color-step-350: var(--ion-color-step-650, mix($background-color-value, $text-color-value, 35%)) !default;
|
||||
$text-color-step-400: var(--ion-color-step-600, mix($background-color-value, $text-color-value, 40%)) !default;
|
||||
$text-color-step-450: var(--ion-color-step-550, mix($background-color-value, $text-color-value, 45%)) !default;
|
||||
$text-color-step-500: var(--ion-color-step-500, mix($background-color-value, $text-color-value, 50%)) !default;
|
||||
$text-color-step-550: var(--ion-color-step-450, mix($background-color-value, $text-color-value, 55%)) !default;
|
||||
$text-color-step-600: var(--ion-color-step-400, mix($background-color-value, $text-color-value, 60%)) !default;
|
||||
$text-color-step-650: var(--ion-color-step-350, mix($background-color-value, $text-color-value, 65%)) !default;
|
||||
$text-color-step-700: var(--ion-color-step-300, mix($background-color-value, $text-color-value, 70%)) !default;
|
||||
$text-color-step-750: var(--ion-color-step-250, mix($background-color-value, $text-color-value, 75%)) !default;
|
||||
$text-color-step-800: var(--ion-color-step-200, mix($background-color-value, $text-color-value, 80%)) !default;
|
||||
$text-color-step-850: var(--ion-color-step-150, mix($background-color-value, $text-color-value, 85%)) !default;
|
||||
$text-color-step-900: var(--ion-color-step-100, mix($background-color-value, $text-color-value, 90%)) !default;
|
||||
$text-color-step-950: var(--ion-color-step-50, mix($background-color-value, $text-color-value, 95%)) !default;
|
||||
$background-color-step-50: var(--ion-color-step-50, var(--ion-background-color-step-50, mix($text-color-value, $background-color-value, 5%))) !default;
|
||||
$background-color-step-100: var(--ion-color-step-100, var(--ion-background-color-step-100, mix($text-color-value, $background-color-value, 10%))) !default;
|
||||
$background-color-step-150: var(--ion-color-step-150, var(--ion-background-color-step-150, mix($text-color-value, $background-color-value, 15%))) !default;
|
||||
$background-color-step-200: var(--ion-color-step-200, var(--ion-background-color-step-200, mix($text-color-value, $background-color-value, 20%))) !default;
|
||||
$background-color-step-250: var(--ion-color-step-250, var(--ion-background-color-step-250, mix($text-color-value, $background-color-value, 25%))) !default;
|
||||
$background-color-step-300: var(--ion-color-step-300, var(--ion-background-color-step-300, mix($text-color-value, $background-color-value, 30%))) !default;
|
||||
$background-color-step-350: var(--ion-color-step-350, var(--ion-background-color-step-350, mix($text-color-value, $background-color-value, 35%))) !default;
|
||||
$background-color-step-400: var(--ion-color-step-400, var(--ion-background-color-step-400, mix($text-color-value, $background-color-value, 40%))) !default;
|
||||
$background-color-step-450: var(--ion-color-step-450, var(--ion-background-color-step-450, mix($text-color-value, $background-color-value, 45%))) !default;
|
||||
$background-color-step-500: var(--ion-color-step-500, var(--ion-background-color-step-500, mix($text-color-value, $background-color-value, 50%))) !default;
|
||||
$background-color-step-550: var(--ion-color-step-550, var(--ion-background-color-step-550, mix($text-color-value, $background-color-value, 55%))) !default;
|
||||
$background-color-step-600: var(--ion-color-step-600, var(--ion-background-color-step-600, mix($text-color-value, $background-color-value, 60%))) !default;
|
||||
$background-color-step-650: var(--ion-color-step-650, var(--ion-background-color-step-650, mix($text-color-value, $background-color-value, 65%))) !default;
|
||||
$background-color-step-700: var(--ion-color-step-700, var(--ion-background-color-step-700, mix($text-color-value, $background-color-value, 70%))) !default;
|
||||
$background-color-step-750: var(--ion-color-step-750, var(--ion-background-color-step-750, mix($text-color-value, $background-color-value, 75%))) !default;
|
||||
$background-color-step-800: var(--ion-color-step-800, var(--ion-background-color-step-800, mix($text-color-value, $background-color-value, 80%))) !default;
|
||||
$background-color-step-850: var(--ion-color-step-850, var(--ion-background-color-step-850, mix($text-color-value, $background-color-value, 85%))) !default;
|
||||
$background-color-step-900: var(--ion-color-step-900, var(--ion-background-color-step-900, mix($text-color-value, $background-color-value, 90%))) !default;
|
||||
$background-color-step-950: var(--ion-color-step-950, var(--ion-background-color-step-950, mix($text-color-value, $background-color-value, 95%))) !default;
|
||||
$text-color-step-50: var(--ion-color-step-950, var(--ion-text-color-step-50, mix($background-color-value, $text-color-value, 5%))) !default;
|
||||
$text-color-step-100: var(--ion-color-step-900, var(--ion-text-color-step-100, mix($background-color-value, $text-color-value, 10%))) !default;
|
||||
$text-color-step-150: var(--ion-color-step-850, var(--ion-text-color-step-150, mix($background-color-value, $text-color-value, 15%))) !default;
|
||||
$text-color-step-200: var(--ion-color-step-800, var(--ion-text-color-step-200, mix($background-color-value, $text-color-value, 20%))) !default;
|
||||
$text-color-step-250: var(--ion-color-step-750, var(--ion-text-color-step-250, mix($background-color-value, $text-color-value, 25%))) !default;
|
||||
$text-color-step-300: var(--ion-color-step-700, var(--ion-text-color-step-300, mix($background-color-value, $text-color-value, 30%))) !default;
|
||||
$text-color-step-350: var(--ion-color-step-650, var(--ion-text-color-step-350, mix($background-color-value, $text-color-value, 35%))) !default;
|
||||
$text-color-step-400: var(--ion-color-step-600, var(--ion-text-color-step-400, mix($background-color-value, $text-color-value, 40%))) !default;
|
||||
$text-color-step-450: var(--ion-color-step-550, var(--ion-text-color-step-450, mix($background-color-value, $text-color-value, 45%))) !default;
|
||||
$text-color-step-500: var(--ion-color-step-500, var(--ion-text-color-step-500, mix($background-color-value, $text-color-value, 50%))) !default;
|
||||
$text-color-step-550: var(--ion-color-step-450, var(--ion-text-color-step-550, mix($background-color-value, $text-color-value, 55%))) !default;
|
||||
$text-color-step-600: var(--ion-color-step-400, var(--ion-text-color-step-600, mix($background-color-value, $text-color-value, 60%))) !default;
|
||||
$text-color-step-650: var(--ion-color-step-350, var(--ion-text-color-step-650, mix($background-color-value, $text-color-value, 65%))) !default;
|
||||
$text-color-step-700: var(--ion-color-step-300, var(--ion-text-color-step-700, mix($background-color-value, $text-color-value, 70%))) !default;
|
||||
$text-color-step-750: var(--ion-color-step-250, var(--ion-text-color-step-750, mix($background-color-value, $text-color-value, 75%))) !default;
|
||||
$text-color-step-800: var(--ion-color-step-200, var(--ion-text-color-step-800, mix($background-color-value, $text-color-value, 80%))) !default;
|
||||
$text-color-step-850: var(--ion-color-step-150, var(--ion-text-color-step-850, mix($background-color-value, $text-color-value, 85%))) !default;
|
||||
$text-color-step-900: var(--ion-color-step-100, var(--ion-text-color-step-900, mix($background-color-value, $text-color-value, 90%))) !default;
|
||||
$text-color-step-950: var(--ion-color-step-50, var(--ion-text-color-step-950, mix($background-color-value, $text-color-value, 95%))) !default;
|
||||
|
||||
// Default General Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -2,10 +2,15 @@ import AxeBuilder from '@axe-core/playwright';
|
||||
import { expect } from '@playwright/test';
|
||||
import { configs, test } from '@utils/test/playwright';
|
||||
|
||||
/**
|
||||
* Small text is defined as 14pt (~18.5px)
|
||||
* when computing color contrast: https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html
|
||||
*/
|
||||
const styleTestHelpers = `
|
||||
<style>
|
||||
main {
|
||||
background: var(--ion-color-contrast);
|
||||
font-size: 14pt;
|
||||
}
|
||||
.ion-background {
|
||||
background: var(--ion-color-base);
|
||||
@ -147,3 +152,78 @@ configs({ modes: ['md'], directions: ['ltr'], themes: ['light', 'dark'] }).forEa
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
configs({ modes: ['md'], directions: ['ltr'], themes: ['high-contrast', 'high-contrast-dark'] }).forEach(
|
||||
({ config, title }) => {
|
||||
const colors = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'];
|
||||
|
||||
test.describe(title('theme'), () => {
|
||||
test.beforeEach(({ skip }) => {
|
||||
skip.browser('firefox', 'Color contrast ratio is consistent across browsers');
|
||||
skip.browser('webkit', 'Color contrast ratio is consistent across browsers');
|
||||
});
|
||||
|
||||
for (const color of colors) {
|
||||
test(`color "${color}" should pass AAA guidelines`, async ({ page }) => {
|
||||
await page.setContent(
|
||||
`${styleTestHelpers}
|
||||
<main class="ion-color-${color}">
|
||||
<p class="ion-color">Hello World</p>
|
||||
</main>`,
|
||||
config
|
||||
);
|
||||
|
||||
const results = await new AxeBuilder({ page })
|
||||
.options({ rules: { 'color-contrast-enhanced': { enabled: true } } })
|
||||
.analyze();
|
||||
expect(results.violations).toEqual([]);
|
||||
});
|
||||
|
||||
test(`contrast color on "${color}" background should pass AAA guidelines`, async ({ page }) => {
|
||||
await page.setContent(
|
||||
`${styleTestHelpers}
|
||||
<main class="ion-color-${color}">
|
||||
<p class="ion-color-contrast ion-background">Hello World</p>
|
||||
</main>`,
|
||||
config
|
||||
);
|
||||
|
||||
const results = await new AxeBuilder({ page })
|
||||
.options({ rules: { 'color-contrast-enhanced': { enabled: true } } })
|
||||
.analyze();
|
||||
expect(results.violations).toEqual([]);
|
||||
});
|
||||
|
||||
test(`contrast color on "${color}" background shade should pass AAA guidelines`, async ({ page }) => {
|
||||
await page.setContent(
|
||||
`${styleTestHelpers}
|
||||
<main class="ion-color-${color}">
|
||||
<p class="ion-color-contrast ion-background-shade">Hello World</p>
|
||||
</main>`,
|
||||
config
|
||||
);
|
||||
|
||||
const results = await new AxeBuilder({ page })
|
||||
.options({ rules: { 'color-contrast-enhanced': { enabled: true } } })
|
||||
.analyze();
|
||||
expect(results.violations).toEqual([]);
|
||||
});
|
||||
|
||||
test(`contrast color on "${color}" background tint should pass AAA guidelines`, async ({ page }) => {
|
||||
await page.setContent(
|
||||
`${styleTestHelpers}
|
||||
<main class="ion-color-${color}">
|
||||
<p class="ion-color-contrast ion-background-tint">Hello World</p>
|
||||
</main>`,
|
||||
config
|
||||
);
|
||||
|
||||
const results = await new AxeBuilder({ page })
|
||||
.options({ rules: { 'color-contrast-enhanced': { enabled: true } } })
|
||||
.analyze();
|
||||
expect(results.violations).toEqual([]);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
@ -151,15 +151,21 @@
|
||||
<ion-segment-button value="default">
|
||||
<ion-label>Default</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="dark">
|
||||
<ion-label>Dark</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="high-contrast">
|
||||
<ion-label>High Contrast</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="high-contrast-dark">
|
||||
<ion-label>High Contrast (Dark)</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="oceanic">
|
||||
<ion-label>Oceanic</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="vibrant">
|
||||
<ion-label>Vibrant</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="dark">
|
||||
<ion-label>Dark</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="toolbar">
|
||||
<ion-label>Toolbar</ion-label>
|
||||
</ion-segment-button>
|
||||
@ -300,6 +306,13 @@
|
||||
</ion-label>
|
||||
<ion-note slot="end">Note</ion-note>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
<h2>Battle Royale Open World Pac-Man</h2>
|
||||
<p>More buzzwords</p>
|
||||
</ion-label>
|
||||
<ion-note slot="end">Note</ion-note>
|
||||
</ion-item>
|
||||
<ion-item-divider>Sliding Items</ion-item-divider>
|
||||
<ion-item-sliding>
|
||||
<ion-item>
|
||||
@ -342,6 +355,8 @@
|
||||
</ion-item-options>
|
||||
</ion-item-sliding>
|
||||
</ion-list>
|
||||
|
||||
<ion-datetime></ion-datetime>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
@ -463,10 +478,13 @@
|
||||
<ion-title>Colors</ion-title>
|
||||
<div slot="end" class="right-container">
|
||||
<ion-select label="Select a Theme:" interface="popover" class="theme-picker">
|
||||
<ion-select-option value="default" selected>Default</ion-select-option>
|
||||
<ion-select-option value="dark">Dark</ion-select-option>
|
||||
<ion-select-option value="high-contrast">High Contrast</ion-select-option>
|
||||
<ion-select-option value="high-contrast-dark">High Contrast (Dark)</ion-select-option>
|
||||
<ion-select-option value="default" selected>Default</ion-select-option>
|
||||
<ion-select-option value="oceanic">Oceanic</ion-select-option>
|
||||
<ion-select-option value="vibrant">Vibrant</ion-select-option>
|
||||
<ion-select-option value="dark">Dark</ion-select-option>
|
||||
</ion-select>
|
||||
</div>
|
||||
</ion-toolbar>
|
||||
@ -891,10 +909,13 @@
|
||||
<ion-title>Overlays</ion-title>
|
||||
<div slot="end" class="right-container">
|
||||
<ion-select label="Select a Theme:" interface="popover" class="theme-picker">
|
||||
<ion-select-option value="default" selected>Default</ion-select-option>
|
||||
<ion-select-option value="dark">Dark</ion-select-option>
|
||||
<ion-select-option value="high-contrast">High Contrast</ion-select-option>
|
||||
<ion-select-option value="high-contrast-dark">High Contrast (Dark)</ion-select-option>
|
||||
<ion-select-option value="default" selected>Default</ion-select-option>
|
||||
<ion-select-option value="oceanic">Oceanic</ion-select-option>
|
||||
<ion-select-option value="vibrant">Vibrant</ion-select-option>
|
||||
<ion-select-option value="dark">Dark</ion-select-option>
|
||||
</ion-select>
|
||||
</div>
|
||||
</ion-toolbar>
|
||||
@ -954,28 +975,34 @@
|
||||
// The path to the directory containing the
|
||||
// custom theme files for this test
|
||||
var themeFilesDir = '/src/themes/test/css-variables/css';
|
||||
let modifier = '';
|
||||
|
||||
// The default and dark themes are official Ionic
|
||||
// themes so they are located outside of this test
|
||||
let cssFile = `${themeFilesDir}/${theme}.css`;
|
||||
|
||||
// TODO FW-5862 update this to not
|
||||
// load a file when default is set. The light
|
||||
// theme is automatically set when importing ionic.bundle.css
|
||||
if (theme == 'default') {
|
||||
themeFilesDir = '/src/themes/test';
|
||||
} else if (theme === 'dark') {
|
||||
themeFilesDir = '/css/themes/';
|
||||
cssFile = `${themeFilesDir}/${theme}.always.css`;
|
||||
switch (theme) {
|
||||
case 'dark':
|
||||
case 'high-contrast':
|
||||
case 'high-contrast-dark':
|
||||
themeFilesDir = '/css/themes';
|
||||
modifier = '.always';
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
var cssFile = `${themeFilesDir}/${theme}${modifier}.css`;
|
||||
|
||||
var oldLink = document.getElementById('theme');
|
||||
|
||||
var newLink = document.createElement('link');
|
||||
newLink.setAttribute('id', 'theme');
|
||||
newLink.setAttribute('rel', 'stylesheet');
|
||||
newLink.setAttribute('type', 'text/css');
|
||||
newLink.setAttribute('href', cssFile);
|
||||
|
||||
// The default light theme is built in to Ionic, so no need to import a separate stylesheet
|
||||
if (theme !== 'default') {
|
||||
newLink.setAttribute('href', cssFile);
|
||||
}
|
||||
|
||||
document.getElementsByTagName('head').item(0).replaceChild(newLink, oldLink);
|
||||
|
||||
|
||||
@ -5,8 +5,10 @@ export type Direction = 'ltr' | 'rtl';
|
||||
*
|
||||
* - `light`: The fallback theme values. Theme stylesheet will not be included.
|
||||
* - `dark`: The dark theme values.
|
||||
* - `high-contrast`: The high contrast light theme values.
|
||||
* - `high-contrast-dark`: The high contrast dark theme values.
|
||||
*/
|
||||
export type Theme = 'light' | 'dark';
|
||||
export type Theme = 'light' | 'dark' | 'high-contrast' | 'high-contrast-dark';
|
||||
|
||||
export type TitleFn = (title: string) => string;
|
||||
export type ScreenshotFn = (fileName: string) => string;
|
||||
|
||||
Reference in New Issue
Block a user