diff --git a/core/src/components/button/button.common.scss b/core/src/components/button/button.common.scss index e18c9b4345..ed2831e7e3 100644 --- a/core/src/components/button/button.common.scss +++ b/core/src/components/button/button.common.scss @@ -96,7 +96,7 @@ :host(.button-clear) { --border-width: 0; --background: transparent; - --color: #{ion-color(primary, base)}; + --color: #{ion-color(primary, foreground)}; } // Block Button @@ -289,7 +289,7 @@ ion-ripple-effect { // Clear Button with Color :host(.button-clear.ion-color) .button-native { background: transparent; - color: current-color(base); + color: current-color(foreground); } // Button in Toolbar diff --git a/core/src/components/button/button.ionic.scss b/core/src/components/button/button.ionic.scss index 93ccbbde88..8891af2ae7 100644 --- a/core/src/components/button/button.ionic.scss +++ b/core/src/components/button/button.ionic.scss @@ -44,10 +44,9 @@ :host(.button-solid) { --background-activated: #{globals.ion-color(primary, shade)}; - --background-hover: #{globals.ion-color(primary, contrast)}; - --background-focused: #{globals.ion-color(primary, contrast)}; - --background-focused-opacity: 0.24; - --background-hover-opacity: 0.08; + --background-hover: #{globals.ion-color(primary, shade)}; + --background-focused: transparent; + --background-hover-opacity: 1; --ripple-opacity: var(--background-activated-opacity, 1); --ripple-color: var(--background-activated); } @@ -58,10 +57,10 @@ :host(.button-outline) { --border-width: #{globals.$ion-border-size-025}; --border-style: #{globals.$ion-border-style-solid}; - --background-activated: #{globals.$ion-primitives-neutral-200}; + --background-activated: #{globals.$ion-bg-neutral-subtlest-press}; --background-focused: transparent; - --background-hover: #{globals.ion-color(primary, base)}; - --background-hover-opacity: 0.04; + --background-hover: #{globals.$ion-bg-neutral-subtlest-press}; + --background-hover-opacity: 1; --ripple-opacity: var(--background-activated-opacity, 1); --ripple-color: var(--background-activated); } @@ -70,10 +69,10 @@ // -------------------------------------------------- :host(.button-clear) { - --background-activated: #{globals.$ion-primitives-neutral-200}; + --background-activated: #{globals.$ion-bg-neutral-subtlest-press}; --background-focused: transparent; - --background-hover: #{globals.ion-color(primary, base)}; - --background-hover-opacity: 0.04; + --background-hover: #{globals.$ion-bg-neutral-subtlest-press}; + --background-hover-opacity: 1; --ripple-opacity: var(--background-activated-opacity, 1); --ripple-color: var(--background-activated); } @@ -217,16 +216,6 @@ outline-offset: globals.$ion-border-size-050; } -/** - * 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: globals.current-color(contrast); -} - // Button: Activated // -------------------------------------------------- @@ -239,6 +228,15 @@ background: transparent; } +// Button: Hover +// -------------------------------------------------- + +@media (any-hover: hover) { + :host(.button-solid.ion-color:hover) .button-native::after { + background: globals.current-color(shade); + } +} + // Button: Disabled // -------------------------------------------------- diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-ltr-light-Mobile-Chrome-linux.png index d3a0b09ab3..b9c9e36e97 100644 Binary files a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-ltr-light-Mobile-Firefox-linux.png index e22028a71f..a39bf50c44 100644 Binary files a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-ltr-light-Mobile-Safari-linux.png index 6bddcdbf7d..1ae2496184 100644 Binary files a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-rtl-light-Mobile-Chrome-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-rtl-light-Mobile-Chrome-linux.png index d73eb5cb23..0f319b4cb0 100644 Binary files a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-rtl-light-Mobile-Firefox-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-rtl-light-Mobile-Firefox-linux.png index 6dbd3867d9..917ec5540a 100644 Binary files a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-rtl-light-Mobile-Safari-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-rtl-light-Mobile-Safari-linux.png index 6b2f4e86bf..a3caee9b79 100644 Binary files a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-rtl-light-Mobile-Safari-linux.png and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-ios-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png index d813c814de..50589faf73 100644 Binary files a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png index e9c37351f3..69081cf1e3 100644 Binary files a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-ltr-light-Mobile-Safari-linux.png index a17c483dfe..2369b6bdd2 100644 Binary files a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-rtl-light-Mobile-Chrome-linux.png index c81ea35e2b..caf804f688 100644 Binary files a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-rtl-light-Mobile-Firefox-linux.png index 93482291c1..ea5ec79f4c 100644 Binary files a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-rtl-light-Mobile-Safari-linux.png index b0d4f14fc5..dba5d6f23c 100644 Binary files a/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/button/test/basic/button.e2e.ts-snapshots/button-diff-ionic-md-rtl-light-Mobile-Safari-linux.png differ 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 index 3589dfc165..07fa4599c3 100644 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 b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Chrome-linux.png 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 index 9764d1d075..3a72a3c988 100644 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 b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Firefox-linux.png 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 index e3a67a83c3..ca55d5ce35 100644 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 b/core/src/components/button/test/clear/button.e2e.ts-snapshots/button-fill-clear-ionic-ios-ltr-light-Mobile-Safari-linux.png 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 497c57c6eb..c3a699e175 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 50e9e53e69..5e2d81748c 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 0bce7b9fa3..57d0887d44 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-ios-ltr-light-Mobile-Firefox-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-ltr-light-Mobile-Firefox-linux.png index 955434ba52..2850c2118f 100644 Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-rtl-light-Mobile-Firefox-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-rtl-light-Mobile-Firefox-linux.png index 580431490e..1954f99bb0 100644 Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-rtl-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-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 2d010ce55a..09618f9ab1 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-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 fe5bb06343..7e3bc162d0 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/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 b1bebcec25..94ab19f162 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 f39439a3b0..407e4d92ef 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 aab32c19fa..c4ce6e501c 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