Modern UI: Fix CSS specificity for tab action fading

[na2co3 (na2co3-ftw)]

Problem

In Modern UI, the editor tab action fade can use the wrong color or gradient direction in some cases.

This regression was introduced by #331476.

Reproduction

Configure tab actions to overlay the tab label and appear on the left:

{
	"workbench.experimental.modernUI": true,
	"workbench.editor.tabActionLocation": "left",
	"workbench.editor.tabActionReserveSpace": false,
	"workbench.colorCustomizations": {
		"modernEditorTab.activeBackground": "#faa",
		"modernEditorTab.activeActionBackground": "#f00",
		"modernEditorTab.activeHoverBackground": "#ffa",
		"modernEditorTab.activeHoverActionBackground": "#ff0",
		"modernEditorTab.hoverBackground": "#afa",
		"modernEditorTab.hoverActionBackground": "#0f0",
		"tab.selectedBackground": "#aaf",
		"modernEditorTab.selectedActionBackground": "#00f"
	}
}

Hover over or focus the editor tab actions. The fade can have the wrong color or direction.

Fix

The right-side fade previously assigned modernEditorTab.hoverActionBackground in a rule with higher specificity than the corresponding rules for other tab states and directions.

Move the default right-side background declaration into a state-specific rule with matching specificity. This allows the active, unfocused, and left-side fade rules to override it correctly.

Test

Added unit tests for consistency of tab action background colors, fade colors, and fade directions across different tab states and locations.

Test Coverage:

• ✅ Active tab (focused and unfocused editor groups)
• ✅ Hover tab (focused and unfocused editor groups)
• ✅ Selected tab
• ✅ Left and right tab action locations
• ⚠️ Active + hover states (manual testing only)

Why active hover states are not unit tested:
The modernEditorTab.activeHoverActionBackground cases require a :hover CSS pseudo-state, which cannot be reliably simulated in unit tests. These states must be verified manually.

Manual Testing Steps:
To verify the active hover states work correctly, hover over the active tab in the following scenarios:

1. Focused editor group, tab action location on right
2. Focused editor group, tab action location on left
3. Unfocused editor group, tab action location on right
4. Unfocused editor group, tab action location on left

Use the reproduction configuration from the PR description to verify the fade gradient has the correct color and direction in each case.

[Copilot]

Pull request overview

Fixes Modern UI tab-action fade colors and directions by correcting CSS specificity.

Changes:

• Moves the default right-side gradient into a direction-specific rule.
• Allows active, unfocused, selected, and left-side rules to override correctly.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[na2co3 (na2co3-ftw)]

I added tests.
Some cases can not be unit tested, so I appended testing details to the PR description.

[na2co3 (na2co3-ftw)]

@microsoft-github-policy-service agree

[Copilot]

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

[Haddy18]

Great fix for the CSS specificity issue! The approach of moving to state-specific rules makes sense. Good test coverage too. 🎉