feat(ui5-shellbar): align hover state colors for shell action buttons (#13539)

NakataCode · web-flow · commit bffa14dac1e9 · 2026-05-19T12:50:10.000+03:00
Shell action buttons on hover were missing the shell-specific background and border-color, and used --sapShell_TextColor instead of the required --sapShell_InteractiveTextColor for the icon color.

Align hover state with the Shell Button Specification:
- background: --sapShell_Hover_Background
- border-color: --sapButton_Lite_Hover_BorderColor
- color: --sapShell_InteractiveTextColor

JIRA: BGSOFUIPIRIN-7063
diff --git a/packages/fiori/src/themes/ShellBar.css b/packages/fiori/src/themes/ShellBar.css
@@ -99,7 +99,9 @@
 }
 
 .ui5-shellbar-action-button:hover {
-	color: var(--sapShell_TextColor);
+	background: var(--sapShell_Hover_Background);
+	border-color: var(--sapButton_Lite_Hover_BorderColor);
+	color: var(--sapShell_InteractiveTextColor);
 }
 
 .ui5-shellbar-action-button[active] {
diff --git a/packages/fiori/src/themes/ShellBarItem.css b/packages/fiori/src/themes/ShellBarItem.css
@@ -9,7 +9,9 @@
 }
 
 .ui5-shellbar-action-button:hover {
-	color: var(--sapShell_TextColor);
+	background: var(--sapShell_Hover_Background);
+	border-color: var(--sapButton_Lite_Hover_BorderColor);
+	color: var(--sapShell_InteractiveTextColor);
 }
 
 .ui5-shellbar-action-button[active] {

Original file line number	Diff line number	Diff line change
`@@ -99,7 +99,9 @@`
`99`	`99`	`}`
`100`	`100`
`101`	`101`	`.ui5-shellbar-action-button:hover {`
`102`		`- color: var(--sapShell_TextColor);`
	`102`	`+ background: var(--sapShell_Hover_Background);`
	`103`	`+ border-color: var(--sapButton_Lite_Hover_BorderColor);`
	`104`	`+ color: var(--sapShell_InteractiveTextColor);`
`103`	`105`	`}`
`104`	`106`
`105`	`107`	`.ui5-shellbar-action-button[active] {`
Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,9 @@`
`9`	`9`	`}`
`10`	`10`
`11`	`11`	`.ui5-shellbar-action-button:hover {`
`12`		`- color: var(--sapShell_TextColor);`
	`12`	`+ background: var(--sapShell_Hover_Background);`
	`13`	`+ border-color: var(--sapButton_Lite_Hover_BorderColor);`
	`14`	`+ color: var(--sapShell_InteractiveTextColor);`
`13`	`15`	`}`
`14`	`16`
`15`	`17`	`.ui5-shellbar-action-button[active] {`