From bbdb0ca480d7cd46c030d1947ced712653cf122b Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 10 Apr 2023 15:33:09 -0400 Subject: [PATCH] fix(item): ios active state has correct contrast (#27134) ## What is the current behavior? Issue URL: resolves https://github.com/ionic-team/ionic-framework/issues/27130 The active/focus background colors on ion-item for iOS are always #000. This allows for the correct contrast on light mode. This is a problem on dark mode because the item background color defaults to #000 as well. ## What is the new behavior? - Updates the default active/focus colors to be the text color. This ensures that the active/focus colors are always the opposite of what the default item background color is. ## Does this introduce a breaking change? - [ ] Yes - [x] No Note: We are updating the default values of CSS Variables, but our implementation of the spec is wrong and creates color contrast issues. ## Other information --------- Co-authored-by: ionitron --- core/src/components/item/item.ios.scss | 14 +- .../components/item/test/buttons/index.html | 165 ++++++++++++++++++ .../components/item/test/buttons/item.e2e.ts | 10 ++ ...-dark-diff-ios-ltr-Mobile-Chrome-linux.png | Bin 0 -> 68615 bytes ...dark-diff-ios-ltr-Mobile-Firefox-linux.png | Bin 0 -> 80860 bytes ...-dark-diff-ios-ltr-Mobile-Safari-linux.png | Bin 0 -> 62026 bytes ...s-dark-diff-md-ltr-Mobile-Chrome-linux.png | Bin 0 -> 64549 bytes ...-dark-diff-md-ltr-Mobile-Firefox-linux.png | Bin 0 -> 76244 bytes ...s-dark-diff-md-ltr-Mobile-Safari-linux.png | Bin 0 -> 55381 bytes 9 files changed, 187 insertions(+), 2 deletions(-) create mode 100644 core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-dark-diff-ios-ltr-Mobile-Chrome-linux.png create mode 100644 core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-dark-diff-ios-ltr-Mobile-Firefox-linux.png create mode 100644 core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-dark-diff-ios-ltr-Mobile-Safari-linux.png create mode 100644 core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-dark-diff-md-ltr-Mobile-Chrome-linux.png create mode 100644 core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-dark-diff-md-ltr-Mobile-Firefox-linux.png create mode 100644 core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-dark-diff-md-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/item/item.ios.scss b/core/src/components/item/item.ios.scss index eae9433a1a..c86f63f832 100644 --- a/core/src/components/item/item.ios.scss +++ b/core/src/components/item/item.ios.scss @@ -11,8 +11,18 @@ --inner-padding-end: #{$item-ios-padding-end}; --inner-border-width: #{0px 0px $item-ios-border-bottom-width 0px}; --background: #{$item-ios-background}; - --background-activated: #000; - --background-focused: #000; + /** + * The active/focus states need + * to be the opposite of the background color + * so there is enough contrast. The background + * defaults to var(--ion-background-color), so we + * default to var(--ion-text-color) which will give us + * the opposite color. + * i.e. if var(--ion-background-color) is #000 + * then var(--ion-text-color) will be #fff. + */ + --background-activated: #{$text-color}; + --background-focused: #{$text-color}; --background-hover: currentColor; --background-activated-opacity: .12; --background-focused-opacity: .15; diff --git a/core/src/components/item/test/buttons/index.html b/core/src/components/item/test/buttons/index.html index fb8d5449ca..d28eafee33 100644 --- a/core/src/components/item/test/buttons/index.html +++ b/core/src/components/item/test/buttons/index.html @@ -12,6 +12,165 @@ + + @@ -188,6 +347,12 @@