javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-08 23:58:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(button): use proper colors for the button states in the ionic theme (#30339)

Browse Source 
Issue number: internal

---------

## What is the current behavior?
The focused and hover states are appearing as an overlay of the contrast
color on the buttons.

## What is the new behavior?
- Updates hover and focus states to match Figma designs
- Focus background should not change from the default
- Hover background should be the shade for solid buttons, and use
neutral subtlest for clear and outline buttons
- Updates the clear button to use the new `foreground` variant

## Does this introduce a breaking change?

- [ ] Yes
- [x] No
This commit is contained in:
Brandy Smith
2025-04-11 14:15:14 -04:00
committed by GitHub
parent 2a1addc190
commit 5da939d330
27 changed files with 20 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
core/src/components/button/button.ionic.scss
View File

@ -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
// --------------------------------------------------