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

fix(button): update ion-color for ionic theme

Browse Source
This commit is contained in:
Maria Hutt
2025-11-05 09:59:17 -08:00
parent 21293da293
commit c546566b04
1 changed files with 23 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -53,13 +53,6 @@
--ripple-color: var(--background-activated);
}
:host(.button-solid.ion-color) {
--background-activated: #{globals.current-color(shade)};
--background-hover: #{globals.current-color(shade)};
--background: #{globals.current-color(base)};
--color: #{globals.current-color(contrast)};
}
// Outline Button
// --------------------------------------------------
@ -76,13 +69,6 @@
--ripple-color: var(--background-activated);
}
:host(.button-outline.ion-color) {
--background-activated: #{globals.current-color(shade, $subtle: true)};
--background-hover: #{globals.current-color(shade, $subtle: true)};
--border-color: #{globals.current-color(base)};
--color: #{globals.current-color(base)};
}
// Warning Outline Button - use foreground color for text and border
:host(.button-outline.ion-color-warning) .button-native {
border-color: #{globals.current-color(foreground)};
@ -103,9 +89,16 @@
--ripple-color: var(--background-activated);
}
:host(.button-clear.ion-color) {
--background-activated: #{globals.current-color(shade, $subtle: true)};
--background-hover: #{globals.current-color(shade, $subtle: true)};
// Ripple Effect
// -------------------------------------------------------------------------------
:host(.button-solid.ion-color) ion-ripple-effect {
color: globals.current-color(shade);
}
:host(.button-outline.ion-color) ion-ripple-effect,
:host(.button-clear.ion-color) ion-ripple-effect {
color: globals.current-color(shade, $subtle: true);
}
// Button Sizes
@ -225,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;
}
@ -237,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