mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-09 08:09:32 +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
@ -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();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user