From 7183c50e33f933cad1e8968bf449e211ff1e5f79 Mon Sep 17 00:00:00 2001 From: Stoyan Date: Tue, 14 Oct 2025 14:20:55 +0300 Subject: [PATCH] fix(ui5-toggle-button): align active state styling with hover state when pressed --- packages/main/src/themes/ToggleButton.css | 27 +++++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/packages/main/src/themes/ToggleButton.css b/packages/main/src/themes/ToggleButton.css index 24d44c6b9d32..8915a97e99db 100644 --- a/packages/main/src/themes/ToggleButton.css +++ b/packages/main/src/themes/ToggleButton.css @@ -38,6 +38,15 @@ color: var(--sapButton_Selected_TextColor); } +:host([pressed][active]:not([disabled])), +:host([design="Default"][pressed][active]:not([disabled])), +:host([design="Transparent"][pressed][active]:not([disabled])), +:host([design="Emphasized"][pressed][active]:not([disabled])) { + background: var(--sapButton_Selected_Hover_Background); + border-color: var(--sapButton_Selected_Hover_BorderColor); + color: var(--sapButton_Selected_TextColor); +} + :host([pressed]:not([active]):not([non-interactive]):not([_is-touch])), :host([design="Default"][pressed]:not([active]):not([non-interactive]):not([_is-touch])), :host([design="Transparent"][pressed]:not([active]):not([non-interactive]):not([_is-touch])), @@ -59,6 +68,12 @@ color: var(--sapButton_Reject_Active_TextColor); } +:host([design="Negative"][pressed][active]:not([disabled])) { + background: var(--sapButton_Reject_Selected_Hover_Background); + border-color: var(--sapButton_Reject_Selected_Hover_BorderColor); + color: var(--sapButton_Reject_Selected_TextColor); +} + :host([design="Negative"][pressed][active]:hover), :host([design="Negative"][pressed]:not([active]):not([non-interactive]):not([_is-touch]):hover) { background: var(--sapButton_Reject_Selected_Hover_Background); @@ -84,6 +99,12 @@ color: var(--sapButton_Accept_Selected_TextColor); } +:host([design="Positive"][pressed][active]:not([disabled])) { + background: var(--sapButton_Accept_Selected_Hover_Background); + border-color: var(--sapButton_Accept_Selected_Hover_BorderColor); + color: var(--sapButton_Accept_Selected_TextColor); +} + :host([design="Positive"][pressed][active]:hover), :host([design="Positive"][pressed]:not([active]):not([non-interactive]):not([_is-touch]):hover) { background: var(--sapButton_Accept_Selected_Hover_Background); @@ -109,6 +130,12 @@ color: var(--sapButton_Attention_Active_TextColor); } +:host([design="Attention"][pressed][active]:not([disabled])) { + background: var(--sapButton_Attention_Selected_Hover_Background); + border-color: var(--sapButton_Attention_Selected_Hover_BorderColor); + color: var(--sapButton_Attention_Selected_TextColor); +} + :host([design="Attention"][pressed][active]:hover), :host([design="Attention"][pressed]:not([active]):not([non-interactive]):not([_is-touch]):hover) { background: var(--sapButton_Attention_Selected_Hover_Background);