fix(ui5-toggle-button): align active state styling with hover state when pressed (#12486)

Previously the ui5-toggle-button component used the default white active background when a pressed (toggled) button was clicked.

With this change the pressed active state uses the hover active background for consistent visual feedback across all design variants.

Author: hinzzx

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);