diff --git a/core/src/components/button/button.ionic.scss b/core/src/components/button/button.ionic.scss index 4e1cd8ec3f7..685487651e3 100644 --- a/core/src/components/button/button.ionic.scss +++ b/core/src/components/button/button.ionic.scss @@ -59,9 +59,9 @@ :host(.button-outline) { --border-width: #{globals.$ion-border-size-025}; --border-style: #{globals.$ion-border-style-solid}; - --background-activated: #{globals.$ion-bg-neutral-subtlest-press}; + --background-activated: #{globals.ion-color(primary, shade, $subtle: true)}; --background-focused: transparent; - --background-hover: #{globals.$ion-bg-neutral-subtlest-press}; + --background-hover: #{globals.ion-color(primary, shade, $subtle: true)}; --background-hover-opacity: 1; --border-color: #{globals.ion-color(primary, base)}; --color: #{globals.ion-color(primary, base)}; @@ -69,13 +69,20 @@ --ripple-color: var(--background-activated); } +// Warning Outline Button - use foreground color for text and border +:host(.button-outline.ion-color-warning) .button-native { + border-color: globals.ion-color(warning, foreground); + + color: globals.ion-color(warning, foreground); +} + // Clear Button // -------------------------------------------------- :host(.button-clear) { - --background-activated: #{globals.$ion-bg-neutral-subtlest-press}; + --background-activated: #{globals.ion-color(primary, shade, $subtle: true)}; --background-focused: transparent; - --background-hover: #{globals.$ion-bg-neutral-subtlest-press}; + --background-hover: #{globals.ion-color(primary, shade, $subtle: true)}; --background-hover-opacity: 1; --color: #{globals.ion-color(primary, foreground)}; --ripple-opacity: var(--background-activated-opacity, 1); @@ -91,7 +98,7 @@ :host(.button-outline.ion-color) ion-ripple-effect, :host(.button-clear.ion-color) ion-ripple-effect { - color: globals.$ion-primitives-neutral-200; + color: globals.current-color(shade, $subtle: true); } // Button Sizes @@ -211,8 +218,15 @@ background: globals.current-color(shade); } +:host(.button-outline.ion-color.ion-activated) .button-native::after, +:host(.button-clear.ion-color.ion-activated) .button-native::after { + background: globals.current-color(shade, $subtle: true); +} + :host(.ion-activated) .button-native:has(ion-ripple-effect)::after, -:host(.button-solid.ion-color.ion-activated) .button-native:has(ion-ripple-effect)::after { +:host(.button-solid.ion-color.ion-activated) .button-native:has(ion-ripple-effect)::after, +:host(.button-outline.ion-color.ion-activated) .button-native:has(ion-ripple-effect)::after, +:host(.button-clear.ion-color.ion-activated) .button-native:has(ion-ripple-effect)::after { background: transparent; } @@ -223,6 +237,11 @@ :host(.button-solid.ion-color:hover) .button-native::after { background: globals.current-color(shade); } + + :host(.button-outline.ion-color:hover) .button-native::after, + :host(.button-clear.ion-color:hover) .button-native::after { + background: globals.current-color(shade, $subtle: true); + } } // Button: Disabled 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 f5f8fa02bd4..e90d4d572f3 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 5372d54164f..466e5eafab2 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 01b8e7cf179..d78844f3795 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/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-ltr-light-Mobile-Chrome-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-ltr-light-Mobile-Chrome-linux.png index b8e018aaad4..326b46da75f 100644 Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-ltr-light-Mobile-Chrome-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 415ac766792..a095b4bac30 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-ltr-light-Mobile-Safari-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-ltr-light-Mobile-Safari-linux.png index 09e6d829921..ca4c31adef2 100644 Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-ltr-light-Mobile-Safari-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-rtl-light-Mobile-Chrome-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-rtl-light-Mobile-Chrome-linux.png index e279835197c..bbe1b6295d3 100644 Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-rtl-light-Mobile-Chrome-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 ca074ba2410..ac52deb4aa7 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-ios-rtl-light-Mobile-Safari-linux.png b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-rtl-light-Mobile-Safari-linux.png index 431e9d1223a..2fd2393177f 100644 Binary files a/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-rtl-light-Mobile-Safari-linux.png and b/core/src/components/button/test/outline/button.e2e.ts-snapshots/button-outline-ionic-ios-rtl-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 535eb0e7430..1f8af6943c5 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 75549dfff55..467a008a630 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 1f1658ec350..5b744a8f752 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 166a7695e17..db9ac35ff39 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 3aa8bb85d6c..5412ae12fa5 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 e85b1014a7b..6fe3fe9ac67 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-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 42a63094426..c163381ade0 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 9f707384da1..c2947bdaa25 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 30ce61e9d55..2757677b2e3 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/theme-ionic/index.html b/core/src/components/button/test/theme-ionic/index.html index 51823c2875c..2449b482053 100644 --- a/core/src/components/button/test/theme-ionic/index.html +++ b/core/src/components/button/test/theme-ionic/index.html @@ -56,7 +56,8 @@

Preview options

Primary Success Warning - Neutral + Medium + Danger