diff --git a/core/src/components/badge/badge.common.scss b/core/src/components/badge/badge.common.scss index fc29ca7608..b690922a61 100644 --- a/core/src/components/badge/badge.common.scss +++ b/core/src/components/badge/badge.common.scss @@ -1,3 +1,4 @@ +@use "../../themes/functions.color" as color; @import "../../themes/mixins"; @import "./badge.common.vars"; @@ -43,8 +44,8 @@ } :host(.ion-color) { - background: #{current-color(base)}; - color: #{current-color(contrast)}; + background: #{color.current-color(base)}; + color: #{color.current-color(contrast)}; } :host(:empty) { diff --git a/core/src/components/badge/badge.ionic.scss b/core/src/components/badge/badge.ionic.scss index c9d93d4c3c..a3c452dadb 100644 --- a/core/src/components/badge/badge.ionic.scss +++ b/core/src/components/badge/badge.ionic.scss @@ -5,10 +5,8 @@ // -------------------------------------------------- :host { - // TODO(ROU-10872): replace this value the color function - --background: #{globals.$ionic-color-blue-700}; - // TODO(ROU-10872): replace this value the color function - --color: #{globals.$ionic-color-base-white}; + --background: #{globals.ion-color(primary, base)}; + --color: #{globals.ion-color(primary, contrast)}; --padding-start: #{globals.$ionic-space-200}; --padding-end: #{globals.$ionic-space-200}; --padding-top: #{globals.$ionic-space-0}; diff --git a/core/src/components/badge/test/basic/badge.e2e.ts b/core/src/components/badge/test/basic/badge.e2e.ts index 869a55fe50..e6a6a871f9 100644 --- a/core/src/components/badge/test/basic/badge.e2e.ts +++ b/core/src/components/badge/test/basic/badge.e2e.ts @@ -1,7 +1,7 @@ import { expect } from '@playwright/test'; import { configs, test } from '@utils/test/playwright'; -configs().forEach(({ config, screenshot, title }) => { +configs({ modes: ['md', 'ios', 'ionic-md'] }).forEach(({ config, screenshot, title }) => { test.describe(title('badge: rendering'), () => { test('should not have visual regressions', async ({ page }) => { await page.goto('/src/components/badge/test/basic', config); diff --git a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..432046d27d Binary files /dev/null and b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..183ec47cd3 Binary files /dev/null and b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..66ce6429ad Binary files /dev/null and b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-rtl-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..cea5cb1b57 Binary files /dev/null and b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-rtl-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..8212c570d7 Binary files /dev/null and b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-rtl-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..96b8921008 Binary files /dev/null and b/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/badge-basic-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/button.ionic.scss b/core/src/components/button/button.ionic.scss index 5b28def0f5..2246a9d151 100644 --- a/core/src/components/button/button.ionic.scss +++ b/core/src/components/button/button.ionic.scss @@ -69,6 +69,29 @@ } } +// Button Colors +// -------------------------------------------------- + +// Solid Button with Color +:host(.button-solid.ion-color) .button-native { + background: globals.current-color(base); + color: globals.current-color(contrast); +} + +// Outline Button with Color +:host(.button-outline.ion-color) .button-native { + border-color: globals.current-color(base); + + background: transparent; + color: globals.current-color(base); +} + +// Clear Button with Color +:host(.button-clear.ion-color) .button-native { + background: transparent; + color: globals.current-color(base); +} + // Button Sizes // ------------------------------------------------------------------------------- @@ -231,6 +254,32 @@ --background-hover: #{globals.$ionic-color-neutral-100}; } +/** + * Only allow overriding of opacity here + * as developers should not be overriding + * colors when using the color prop. + */ + +:host(.button-solid.ion-color.ion-focused) .button-native::after { + background: #{current-color(contrast)}; +} + +:host(.button-clear.ion-color.ion-focused) .button-native::after, +:host(.button-outline.ion-color.ion-focused) .button-native::after { + background: #{current-color(base)}; +} + +@media (any-hover: hover) { + :host(.button-solid.ion-color:hover) .button-native::after { + background: #{current-color(contrast)}; + } + + :host(.button-clear.ion-color:hover) .button-native::after, + :host(.button-outline.ion-color:hover) .button-native::after { + background: #{current-color(base)}; + } +} + // Button: Disabled // -------------------------------------------------- @@ -257,9 +306,9 @@ // Default Outline Color :host(.button-outline) { - --border-color: #{globals.$ionic-color-primary-base}; + --border-color: #{globals.ion-color(primary, base)}; --background: #{globals.$ionic-color-base-white}; - --color: #{globals.$ionic-color-primary-base}; + --color: #{globals.ion-color(primary, base)}; } // Clear Button diff --git a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Chrome-linux.png deleted file mode 100644 index 24abdf612a..0000000000 Binary files a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Firefox-linux.png deleted file mode 100644 index 0eb921b67e..0000000000 Binary files a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Safari-linux.png deleted file mode 100644 index 13b632ef8c..0000000000 Binary files a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png index 3d4929f352..c489f4c236 100644 Binary files a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png index b88ce64c82..320b06a66a 100644 Binary files a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png index 5f94117ad7..5785946a77 100644 Binary files a/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png index 8555087c16..d846dc7e59 100644 Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png index 868049b755..c4124a7416 100644 Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-ltr-light-Mobile-Safari-linux.png index a1da0728fd..8d3436997b 100644 Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png index dce6917638..6b83bd8cfb 100644 Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png index a6040143f8..2b2ee05de2 100644 Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-rtl-light-Mobile-Safari-linux.png index 053274f42e..7a1138ffc7 100644 Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts b/core/src/components/button/test/states/button.e2e.ts index 5dcff3c089..53c623eb70 100644 --- a/core/src/components/button/test/states/button.e2e.ts +++ b/core/src/components/button/test/states/button.e2e.ts @@ -19,7 +19,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md', 'md', 'ios'] }).forEach(({ ti test('should render solid button with color', async ({ page }) => { await page.setContent( ` - Button + Button `, config ); @@ -45,7 +45,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md', 'md', 'ios'] }).forEach(({ ti test('should render outline button with color', async ({ page }) => { await page.setContent( ` - Button + Button `, config ); @@ -71,7 +71,7 @@ configs({ directions: ['ltr'], modes: ['ionic-md', 'md', 'ios'] }).forEach(({ ti test('should render clear button with color', async ({ page }) => { await page.setContent( ` - Button + Button `, config ); diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Chrome-linux.png index d04c6fb561..e06aa96faf 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Firefox-linux.png index 97187381d9..3883961209 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Safari-linux.png index 60463ec4aa..35314d7b09 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ios-ltr-Mobile-Chrome-linux.png index 8f6b1edbf7..287cbd6c79 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ios-ltr-Mobile-Firefox-linux.png index 62f417610d..b6f6890c9d 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ios-ltr-Mobile-Safari-linux.png index c830bf050f..17dc42198b 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-md-ltr-Mobile-Chrome-linux.png index 9089e92644..754a18bf79 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-md-ltr-Mobile-Firefox-linux.png index 2071f7bc37..6aaf46d005 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-md-ltr-Mobile-Safari-linux.png index 2c55d50876..61a9ff44ce 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-md-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-clear-color-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Chrome-linux.png index beb85dc498..ce38b07b2d 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Firefox-linux.png index 439eaaa833..db2382acca 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Safari-linux.png index aebfd83a2d..cff442fbde 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ios-ltr-Mobile-Chrome-linux.png index c7a6a9e3a7..6becba14c5 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ios-ltr-Mobile-Firefox-linux.png index 977eddb405..05eb3a77db 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ios-ltr-Mobile-Safari-linux.png index 2400c4730e..3afe06bcd1 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-md-ltr-Mobile-Chrome-linux.png index a14e88619c..0c70275eea 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-md-ltr-Mobile-Firefox-linux.png index 1530f03e97..6d9e35c78f 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-md-ltr-Mobile-Safari-linux.png index 4c1e860ea0..7275a4efeb 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-md-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-outline-color-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Chrome-linux.png index 50ad3cbd7c..941e5dafb5 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Firefox-linux.png index 4abf64061f..eee7abb413 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Safari-linux.png index 4756dcb06f..ed309f7290 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ios-ltr-Mobile-Chrome-linux.png index d5821d9836..cd0aedc7b3 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ios-ltr-Mobile-Firefox-linux.png index b42fa9acee..088cf917a7 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ios-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ios-ltr-Mobile-Safari-linux.png index 2d5f36cb94..02cf113605 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-md-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-md-ltr-Mobile-Chrome-linux.png index 3affa1e43d..cbe26c2295 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-md-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-md-ltr-Mobile-Firefox-linux.png index 4dd613f9df..1225b21d20 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-md-ltr-Mobile-Safari-linux.png index 40dac83d93..cdeca5cd7a 100644 Binary files a/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-md-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/states/button.e2e.ts-snapshots/button-activated-solid-color-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/chip/chip.ionic.scss b/core/src/components/chip/chip.ionic.scss index cdf1ba1b8c..b8ed01474f 100644 --- a/core/src/components/chip/chip.ionic.scss +++ b/core/src/components/chip/chip.ionic.scss @@ -43,10 +43,15 @@ // --------------------------------------------- :host(.chip-outline) { - --background: transparent; border-width: globals.$ionic-border-size-025; - + border-style: globals.$ionic-border-style-solid; border-color: globals.$ionic-color-neutral-100; + + background: transparent; +} + +:host(.chip-outline.ion-color) { + border-color: globals.current-color(base, 0.32); } // Chip: Focus @@ -64,6 +69,10 @@ :host(:hover) { --background: #{globals.$ionic-color-neutral-200}; } + + :host(.ion-color:hover) { + background: globals.current-color(base, 0.12); + } } // Chip: Disabled @@ -109,3 +118,19 @@ font-size: globals.$ionic-font-size-350; } + +// Chip Colors +// --------------------------------------------- + +:host(.ion-color) { + background: globals.current-color(base, 0.08); + color: globals.current-color(shade); +} + +:host(.ion-color:focus) { + background: globals.current-color(base, 0.12); +} + +:host(.ion-color.ion-activated) { + background: globals.current-color(base, 0.16); +} diff --git a/core/src/components/chip/test/basic/chip.e2e.ts b/core/src/components/chip/test/basic/chip.e2e.ts index bd30d74b2f..e6f46e4e37 100644 --- a/core/src/components/chip/test/basic/chip.e2e.ts +++ b/core/src/components/chip/test/basic/chip.e2e.ts @@ -29,56 +29,6 @@ configs({ modes: ['ios'] }).forEach(({ title, screenshot, config }) => { }); configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { - /** - * This behavior does not vary across modes/directions. - */ - test.describe(title('chip: outline'), () => { - test('should render default outline chip', async ({ page }) => { - await page.setContent( - ` - - Icon - `, - config - ); - - const chip = page.locator('ion-chip'); - - await expect(chip).toHaveScreenshot(screenshot(`chip-outline`)); - }); - }); - /** - * This behavior does not vary across modes/directions. - */ - test.describe(title('chip: color'), () => { - test('should render solid color chip', async ({ page }) => { - await page.setContent( - ` - - Tertiary with Icon - `, - config - ); - - const chip = page.locator('ion-chip'); - - await expect(chip).toHaveScreenshot(screenshot(`chip-solid-color`)); - }); - test('should render outline color chip', async ({ page }) => { - await page.setContent( - ` - - Tertiary with Icon - `, - config - ); - - const chip = page.locator('ion-chip'); - - await expect(chip).toHaveScreenshot(screenshot(`chip-outline-color`)); - }); - }); - test.describe(title('chip: descenders'), () => { test('should not clip descenders in item', async ({ page }) => { test.info().annotations.push({ @@ -105,3 +55,52 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c }); }); }); + +/** + * `md` mode does not differ from `ios` mode in chip rendering. + */ +configs({ modes: ['ios', 'ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { + test.describe(title('chip: outline'), () => { + test('should render default outline chip', async ({ page }) => { + await page.setContent( + ` + + Icon + `, + config + ); + + const chip = page.locator('ion-chip'); + + await expect(chip).toHaveScreenshot(screenshot(`chip-outline`)); + }); + }); + test.describe(title('chip: color'), () => { + test('should render solid color chip', async ({ page }) => { + await page.setContent( + ` + + Success with Icon + `, + config + ); + + const chip = page.locator('ion-chip'); + + await expect(chip).toHaveScreenshot(screenshot(`chip-solid-color`)); + }); + test('should render outline color chip', async ({ page }) => { + await page.setContent( + ` + + Success with Icon + `, + config + ); + + const chip = page.locator('ion-chip'); + + await expect(chip).toHaveScreenshot(screenshot(`chip-outline-color`)); + }); + }); +}); diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..9ee778a3d7 Binary files /dev/null and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..578c1c29a0 Binary files /dev/null and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..36f762dfd6 Binary files /dev/null and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ios-ltr-Mobile-Chrome-linux.png index 4588103ecd..c6bd7cb918 100644 Binary files a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ios-ltr-Mobile-Firefox-linux.png index c26c67ac7c..824ca487fe 100644 Binary files a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ios-ltr-Mobile-Safari-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ios-ltr-Mobile-Safari-linux.png index f7addd5840..03e5bd19e8 100644 Binary files a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..26fc206e74 Binary files /dev/null and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..8c3213baf1 Binary files /dev/null and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..93649ba387 Binary files /dev/null and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..bcefa78888 Binary files /dev/null and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..a28295cd59 Binary files /dev/null and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..e97ef3e977 Binary files /dev/null and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ios-ltr-Mobile-Chrome-linux.png index e5baf5f951..c76fc54485 100644 Binary files a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ios-ltr-Mobile-Firefox-linux.png index bfd6dcf966..f58258afa3 100644 Binary files a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ios-ltr-Mobile-Safari-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ios-ltr-Mobile-Safari-linux.png index 122f129e32..cab46da75d 100644 Binary files a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png index 39c9a7996b..5a34bf4675 100644 Binary files a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png index 3c9ad37d12..307e4a94d3 100644 Binary files a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png index 4270daa77b..db8c2b5ef5 100644 Binary files a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-no-fill-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png index 56b0a7bb9d..6b2f1ce47c 100644 Binary files a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png index 402107f34f..6a25828bfe 100644 Binary files a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Safari-linux.png index ba5ddf4956..c35d294755 100644 Binary files a/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/input/test/states/input.e2e.ts-snapshots/input-disabled-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/index.html b/core/src/components/item-sliding/test/icons/index.html index 9469beecbf..e6e1165c21 100644 --- a/core/src/components/item-sliding/test/icons/index.html +++ b/core/src/components/item-sliding/test/icons/index.html @@ -47,7 +47,7 @@ Archive - + Save @@ -63,7 +63,7 @@ Archive - + Save @@ -83,7 +83,7 @@ Archive - + Save @@ -103,7 +103,7 @@ Archive - + Save diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Chrome-linux.png index ac3984a194..a9379823dc 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Firefox-linux.png index 6c209472d5..dbe79406d8 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Safari-linux.png index 9ec35872bc..8f63abf9ac 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Chrome-linux.png index d8e8002ec6..420ab657a7 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Firefox-linux.png index e0da75aa51..fadc9a14fd 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Safari-linux.png index 3a84ff17c8..66f2ea67cd 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-bottom-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Chrome-linux.png index e7ae836370..30da7afe27 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Firefox-linux.png index e311c5f213..bbcb284b23 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Safari-linux.png index cc89525f1e..42ecf020f0 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Chrome-linux.png index 0f5ec5e195..535d51c22c 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Firefox-linux.png index 8f14e9d01e..c55c03ab23 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Safari-linux.png index 8877fe0363..1547400f60 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-end-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-ltr-light-Mobile-Chrome-linux.png index 08d635aff5..dcd5f69b47 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-ltr-light-Mobile-Firefox-linux.png index 89f45d88ab..ebcf83ffc1 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-ltr-light-Mobile-Safari-linux.png index ca82d5616c..350b1c8a70 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-rtl-light-Mobile-Chrome-linux.png index 1c10d5c272..a4e65b14e5 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-rtl-light-Mobile-Firefox-linux.png index c400f94e41..780093421e 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-rtl-light-Mobile-Safari-linux.png index 0f49259ef8..11c0827656 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-only-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Chrome-linux.png index 05d0411830..e0b92dbe43 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Firefox-linux.png index dde082200a..fb73a544b0 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Safari-linux.png index 282d6c4d36..cf938a4372 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Chrome-linux.png index d33139344a..7a5afb0de1 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Firefox-linux.png index e72ff37cb9..14cd840584 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Safari-linux.png index 7ba159e3aa..126c5ae76c 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-start-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Chrome-linux.png index 7d1dfbfcf9..8ac2ef880c 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Firefox-linux.png index 98138b7503..61aa6459a1 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Safari-linux.png index 9a1a07e598..21e8c669de 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Chrome-linux.png index 406e3cfe55..a3fc5b3225 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Firefox-linux.png index e3a59da21e..64c7309fef 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Safari-linux.png index 7d33c96a16..451ab357cc 100644 Binary files a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-icons-top-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-sliding/test/shapes/index.html b/core/src/components/item-sliding/test/shapes/index.html index f9b70019cb..05fdb9e97d 100644 --- a/core/src/components/item-sliding/test/shapes/index.html +++ b/core/src/components/item-sliding/test/shapes/index.html @@ -37,7 +37,7 @@ Archive - + Save @@ -57,7 +57,7 @@ Archive - + Save @@ -77,7 +77,7 @@ Archive - + Save @@ -97,7 +97,7 @@ Archive - + Save diff --git a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png index 491c2e9d52..18de728436 100644 Binary files a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png index bced0dcfef..eabe5cc2b6 100644 Binary files a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png index bd88d1ad2a..c67529dcf5 100644 Binary files a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Chrome-linux.png index 7d1dfbfcf9..8ac2ef880c 100644 Binary files a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Firefox-linux.png index 98138b7503..61aa6459a1 100644 Binary files a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Safari-linux.png index 9a1a07e598..21e8c669de 100644 Binary files a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png index 7d3053e1aa..82164c5948 100644 Binary files a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png index edba932af9..1e6170664e 100644 Binary files a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Safari-linux.png index e2ef49bc96..1d1bb59f1d 100644 Binary files a/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-sliding/test/states/index.html b/core/src/components/item-sliding/test/states/index.html index 7ded4bde99..56610f8548 100644 --- a/core/src/components/item-sliding/test/states/index.html +++ b/core/src/components/item-sliding/test/states/index.html @@ -29,7 +29,7 @@ Disabled Options - + Label diff --git a/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png index 13017458eb..48d55e1653 100644 Binary files a/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png index 3453874d93..d023b9dda3 100644 Binary files a/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png index e530de31be..5b42584330 100644 Binary files a/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ios-ltr-Mobile-Chrome-linux.png index a6cfe2fba7..2a82db0952 100644 Binary files a/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ios-ltr-Mobile-Firefox-linux.png index f36f1a8fcb..e7b1d49897 100644 Binary files a/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ios-ltr-Mobile-Safari-linux.png index bbc2d26fe1..e6b71ca28c 100644 Binary files a/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-md-ltr-Mobile-Chrome-linux.png index 7c41e8d83a..2bae727c4b 100644 Binary files a/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-md-ltr-Mobile-Firefox-linux.png index 9ca9e891ba..aa33b38c90 100644 Binary files a/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-md-ltr-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-md-ltr-Mobile-Safari-linux.png index 57aaa57416..665c68a926 100644 Binary files a/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-md-ltr-Mobile-Safari-linux.png and b/core/src/components/item-sliding/test/states/item-sliding.e2e.ts-snapshots/item-sliding-option-disabled-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/css/core.scss b/core/src/css/core.scss index 5ce82f24a1..a87d31ec62 100644 --- a/core/src/css/core.scss +++ b/core/src/css/core.scss @@ -1,21 +1,39 @@ @use "sass:map"; @import "../themes/native/native.globals"; +@import "../themes/ionic/ionic.theme.default"; @import "../components/menu/menu.ios.vars"; @import "../components/menu/menu.md.vars"; +// Ionic Colors +// -------------------------------------------------- + :root { /** - * Loop through each color object from the - * `ionic.theme.default.scss` file - * and generate CSS Variables for each color. + * Set the theme colors from the + * `native.theme.default.scss` file. */ + @include set-theme-colors($colors); + @include generate-color-variables(); + @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-color-#{$color-name} { + @include generate-color($color-name); + } + } +} + +:root.ionic { + /** + * Set the theme colors from the + * `ionic.theme.default.scss` file. + */ + @include set-theme-colors($ionic-colors); + @include generate-color-variables(); + + @each $color-name, $value in $ionic-colors { + .ion-color-#{$color-name} { + @include generate-color($color-name); + } } } @@ -134,33 +152,6 @@ html.ios ion-modal.modal-card .ion-page { border-top-left-radius: var(--border-radius); } -// Ionic Colors -// -------------------------------------------------- -// Generates the color classes and variables based on the -// colors map - -@mixin generate-color($color-name) { - $value: map-get($colors, $color-name); - - $base: map-get($value, base); - $contrast: map-get($value, contrast); - $shade: map-get($value, shade); - $tint: map-get($value, tint); - - --ion-color-base: var(--ion-color-#{$color-name}, #{$base}) !important; - --ion-color-base-rgb: var(--ion-color-#{$color-name}-rgb, #{color-to-rgb-list($base)}) !important; - --ion-color-contrast: var(--ion-color-#{$color-name}-contrast, #{$contrast}) !important; - --ion-color-contrast-rgb: var(--ion-color-#{$color-name}-contrast-rgb, #{color-to-rgb-list($contrast)}) !important; - --ion-color-shade: var(--ion-color-#{$color-name}-shade, #{$shade}) !important; - --ion-color-tint: var(--ion-color-#{$color-name}-tint, #{$tint}) !important; -} - -@each $color-name, $value in $colors { - .ion-color-#{$color-name} { - @include generate-color($color-name); - } -} - // Page Container Structure // -------------------------------------------------- diff --git a/core/src/themes/functions.color.scss b/core/src/themes/functions.color.scss index f3cc87a90d..d0b76600f9 100644 --- a/core/src/themes/functions.color.scss +++ b/core/src/themes/functions.color.scss @@ -1,3 +1,9 @@ +// Set the theme colors map to be used by the color functions +// -------------------------------------------------------------------------------------------- +@mixin set-theme-colors($colorsMap) { + $theme-colors: $colorsMap !global; +} + // Gets the active color's css variable from a variation. Alpha is optional. // -------------------------------------------------------------------------------------------- // Example usage: @@ -20,7 +26,11 @@ // ion-color(primary, base, 0.5) => rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.5) // -------------------------------------------------------------------------------------------- @function ion-color($name, $variation, $alpha: null, $rgb: null) { - $values: map-get($colors, $name); + @if not($theme-colors) { + @error 'No theme colors set. Please make sure to call set-theme-colors($colorsMap) before using ion-color()'; + } + + $values: map-get($theme-colors, $name); $value: map-get($values, $variation); $variable: --ion-color-#{$name}-#{$variation}; @@ -45,17 +55,67 @@ // Mixes a color with black to create its shade. // -------------------------------------------------------------------------------------------- @function get-color-shade($color) { + @if (type-of($color) != color) { + @return $color; + } @return mix(#000, $color, 12%); } // Mixes a color with white to create its tint. // -------------------------------------------------------------------------------------------- @function get-color-tint($color) { + @if (type-of($color) != color) { + @return $color; + } @return mix(#fff, $color, 10%); } // Converts a color to a comma separated rgb. // -------------------------------------------------------------------------------------------- @function color-to-rgb-list($color) { + @if (type-of($color) != color) { + @return $color; + } @return #{red($color)}, #{green($color)}, #{blue($color)}; } + +// Generates the color classes and variables +// based on the colors map +// -------------------------------------------------------------------------------------------- +@mixin generate-color($color-name) { + @if not($theme-colors) { + @error 'No theme colors set. Please make sure to call set-theme-colors($colorsMap) before using ion-color()'; + } + + $value: map-get($theme-colors, $color-name); + + $base: map-get($value, base); + $contrast: map-get($value, contrast); + $shade: map-get($value, shade); + $tint: map-get($value, tint); + + --ion-color-base: var(--ion-color-#{$color-name}, #{$base}) !important; + --ion-color-base-rgb: var(--ion-color-#{$color-name}-rgb, #{color-to-rgb-list($base)}) !important; + --ion-color-contrast: var(--ion-color-#{$color-name}-contrast, #{$contrast}) !important; + --ion-color-contrast-rgb: var(--ion-color-#{$color-name}-contrast-rgb, #{color-to-rgb-list($contrast)}) !important; + --ion-color-shade: var(--ion-color-#{$color-name}-shade, #{$shade}) !important; + --ion-color-tint: var(--ion-color-#{$color-name}-tint, #{$tint}) !important; +} + +// Generates the CSS variables for each color +// based on the colors map +// -------------------------------------------------------------------------------------------- +@mixin generate-color-variables() { + @if not($theme-colors) { + @error 'No theme colors set. Please make sure to call set-theme-colors($colorsMap) before using ion-color()'; + } + + @each $color-name, $value in $theme-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)}; + } +} diff --git a/core/src/themes/ionic/ionic.globals.scss b/core/src/themes/ionic/ionic.globals.scss index 693b344968..1e730de8dc 100644 --- a/core/src/themes/ionic/ionic.globals.scss +++ b/core/src/themes/ionic/ionic.globals.scss @@ -7,6 +7,12 @@ // Global Utility Functions @forward "../functions.sizes"; @forward "../functions.string"; +@forward "../functions.color"; +@use "../functions.color" as color; // Global Font Functions @forward "../functions.font"; + +// Default Theme +@use "./ionic.theme.default" as ionicTheme; +@include color.set-theme-colors(ionicTheme.$ionic-colors); diff --git a/core/src/themes/ionic/ionic.theme.default.scss b/core/src/themes/ionic/ionic.theme.default.scss new file mode 100644 index 0000000000..da64747d01 --- /dev/null +++ b/core/src/themes/ionic/ionic.theme.default.scss @@ -0,0 +1,89 @@ +// Ionic Theme +// ------------------------------------------------------------------------------------------- +// This file contains the theme variables shared +// between modes. This should only include variables +// used to theme the application colors. + +// Default Ionic Colors +// ------------------------------------------------------------------------------------------- +// Color map should provide +// - base: main color to be used. +// - contrast: Color that will provide readable text against the base color +// - shade: 12% darker version of the base color (mix with black) +// - tint: 10% lighter version of the base color (mix with white) + +// TODO(ROU-10778, ROU-10875): Sync the color names to the design system of +// ios and md. This will allow us to have a single color map. +$primary: #105cef; +$secondary: initial; +$tertiary: initial; +$success: #1fbd3b; +$warning: #e18300; +$danger: #bf2222; +$light: #f2f4fd; +$medium: initial; +$neutral: #626262; +$dark: initial; + +$ionic-colors: ( + primary: ( + base: $primary, + contrast: #fff, + shade: get-color-shade($primary), + tint: get-color-tint($primary), + ), + secondary: ( + base: $secondary, + contrast: $secondary, + shade: get-color-shade($secondary), + tint: get-color-tint($secondary), + ), + tertiary: ( + base: $tertiary, + contrast: $tertiary, + 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: #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: $medium, + shade: get-color-shade($medium), + tint: get-color-tint($medium), + ), + neutral: ( + base: $neutral, + contrast: #fff, + shade: get-color-shade($neutral), + tint: get-color-tint($neutral), + ), + dark: ( + base: $dark, + contrast: $dark, + shade: get-color-shade($dark), + tint: get-color-tint($dark), + ), +); diff --git a/core/src/themes/ionic/test/colors/index.html b/core/src/themes/ionic/test/colors/index.html new file mode 100644 index 0000000000..5f990e1fe1 --- /dev/null +++ b/core/src/themes/ionic/test/colors/index.html @@ -0,0 +1,256 @@ + + + + + Colors + + + + + + + + + + + + + + + + + Colors + + + + +
+

Text

+
+
Primary
+
+
+
Success
+
+
+
Warning
+
+
+
Danger
+
+
+
Light
+
+
+
Neutral
+
+
+ +
+

Background

+
+
Primary
+
+
+
Success
+
+
+
Warning
+
+
+
Danger
+
+
+
Light
+
+
+
Neutral
+
+
+ +
+

Background Shade

+
+
Primary
+
+
+
Success
+
+
+
Warning
+
+
+
Danger
+
+
+
Light
+
+
+
Neutral
+
+
+ +
+

Background Tint

+
+
Primary
+
+
+
Success
+
+
+
Warning
+
+
+
Danger
+
+
+
Light
+
+
+
Neutral
+
+
+ +
+

Background 8%

+
+
Primary
+
+
+
Success
+
+
+
Warning
+
+
+
Danger
+
+
+
Light
+
+
+
Neutral
+
+
+ +
+

Background 12%

+
+
Primary
+
+
+
Success
+
+
+
Warning
+
+
+
Danger
+
+
+
Light
+
+
+
Neutral
+
+
+ +
+

Background 16%

+
+
Primary
+
+
+
Success
+
+
+
Warning
+
+
+
Danger
+
+
+
Light
+
+
+
Neutral
+
+
+ + + + diff --git a/core/src/themes/ionic/test/colors/theme.e2e.ts b/core/src/themes/ionic/test/colors/theme.e2e.ts new file mode 100644 index 0000000000..779ceeb117 --- /dev/null +++ b/core/src/themes/ionic/test/colors/theme.e2e.ts @@ -0,0 +1,155 @@ +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 = ` + +`; + +/** + * All colors should be tested in the following scenarios: + * 1) The base color as the text color against the contrast color as the background color + * 2) The contrast color as the text color against the base color as the background color + * 3) The contrast color as the text color against the shade color as the background color + * 4) The contrast color as the text color against the tint color as the background color + * 5) The base color as the text color against the base color at 0.08 opacity as the background color + * 6) The base color as the text color against the base color at 0.12 opacity as the background color + * 7) The base color as the text color against the base color at 0.16 opacity as the background color + */ +configs({ modes: ['ionic-md'], directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ config, title }) => { + const colors = ['primary', 'neutral', 'success', 'warning', 'danger', 'light']; + + 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 AA guidelines`, async ({ page }) => { + await page.setContent( + `${styleTestHelpers} +
+

Hello World

+
`, + config + ); + + const results = await new AxeBuilder({ page }).analyze(); + expect(results.violations).toEqual([]); + }); + + test(`contrast color on "${color}" background should pass AA guidelines`, async ({ page }) => { + await page.setContent( + `${styleTestHelpers} +
+

Hello World

+
`, + config + ); + + const results = await new AxeBuilder({ page }).analyze(); + expect(results.violations).toEqual([]); + }); + + test(`contrast color on "${color}" background shade should pass AA guidelines`, async ({ page }) => { + await page.setContent( + `${styleTestHelpers} +
+

Hello World

+
`, + config + ); + + const results = await new AxeBuilder({ page }).analyze(); + expect(results.violations).toEqual([]); + }); + + test(`contrast color on "${color}" background tint should pass AA guidelines`, async ({ page }) => { + await page.setContent( + `${styleTestHelpers} +
+

Hello World

+
`, + config + ); + + const results = await new AxeBuilder({ page }).analyze(); + expect(results.violations).toEqual([]); + }); + + test(`color "${color}" on 0.08 opacity background should pass AA guidelines`, async ({ page }) => { + await page.setContent( + `${styleTestHelpers} +
+

Hello World

+
`, + config + ); + + const results = await new AxeBuilder({ page }).analyze(); + expect(results.violations).toEqual([]); + }); + + test(`color "${color}" on 0.12 opacity background should pass AA guidelines`, async ({ page }) => { + await page.setContent( + `${styleTestHelpers} +
+

Hello World

+
`, + config + ); + + const results = await new AxeBuilder({ page }).analyze(); + expect(results.violations).toEqual([]); + }); + + // TODO(ROU-10778): Re-enable this test once the colors have been finalized + test.skip(`color "${color}" on 0.16 opacity background should pass AA guidelines`, async ({ page }) => { + await page.setContent( + `${styleTestHelpers} +
+

Hello World

+
`, + config + ); + + const results = await new AxeBuilder({ page }).analyze(); + expect(results.violations).toEqual([]); + }); + } + }); +}); diff --git a/core/src/themes/ionic/test/default.css b/core/src/themes/ionic/test/default.css new file mode 100644 index 0000000000..6ee3e1c096 --- /dev/null +++ b/core/src/themes/ionic/test/default.css @@ -0,0 +1,57 @@ +/** + * Default Colors + * ----------------------------------------------------- + * The default theme uses a white background with + * varying shades of black as contrast and the Ionic + * primary color as an accent. + * + * The Ionic colors are already defined in Ionic Framework + * and used as fallbacks so they do not need to be defined. + * + * Looking to create a custom theme? Check out the generator! + * https://ionicframework.com/docs/theming/color-generator +**/ + +/* :root { + --ion-color-primary: #105cef; + --ion-color-primary-rgb: 16, 92, 239; + --ion-color-primary-contrast: #fff; + --ion-color-primary-contrast-rgb: 255, 255, 255; + --ion-color-primary-shade: #0e51d2; + --ion-color-primary-tint: #286cf1; + + --ion-color-neutral: #626262; + --ion-color-neutral-rgb: 98, 98, 98; + --ion-color-neutral-contrast: #fff; + --ion-color-neutral-contrast-rgb: 255, 255, 255; + --ion-color-neutral-shade: #565656; + --ion-color-neutral-tint: #727272; + + --ion-color-success: #1fbd3b; + --ion-color-success-rgb: 31, 189, 59; + --ion-color-success-contrast: #000; + --ion-color-success-contrast-rgb: 0, 0, 0; + --ion-color-success-shade: #1ba634; + --ion-color-success-tint: #35c44f; + + --ion-color-warning: #e18300; + --ion-color-warning-rgb: 225, 131, 0; + --ion-color-warning-contrast: #000; + --ion-color-warning-contrast-rgb: 0, 0, 0; + --ion-color-warning-shade: #c67300; + --ion-color-warning-tint: #e48f1a; + + --ion-color-danger: #bf2222; + --ion-color-danger-rgb: 191, 34, 34; + --ion-color-danger-contrast: #fff; + --ion-color-danger-contrast-rgb: 255, 255, 255; + --ion-color-danger-shade: #a81e1e; + --ion-color-danger-tint: #c53838; + + --ion-color-light: #f2f4fd; + --ion-color-light-rgb: 242, 244, 253; + --ion-color-light-contrast: #000; + --ion-color-light-contrast-rgb: 0, 0, 0; + --ion-color-light-shade: #d5d7df; + --ion-color-light-tint: #f3f5fd; +} */ diff --git a/core/src/themes/native/native.globals.scss b/core/src/themes/native/native.globals.scss index b87ed699bd..264098e975 100644 --- a/core/src/themes/native/native.globals.scss +++ b/core/src/themes/native/native.globals.scss @@ -13,6 +13,7 @@ // Default Theme @import "./native.theme.default"; +@include set-theme-colors($colors); // Default General // --------------------------------------------------