Tabs: keep full opacity of focus ring on disabled tabs (#63754)

* Tabs: keep full opacity of focus ring on disabled tabs * CHANGELOG * Use lighter shade of gray, use semantic variable * Do not apply hover styles to disabled tabs * Update CHANGELOG --- Co-authored-by: ciampo <mciampini@git.wordpress.org> Co-authored-by: tyxla <tyxla@git.wordpress.org>
WordPress · Jul 23, 2024 · e9e27b9 · e9e27b9
1 parent 4b28aca
commit e9e27b9
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 2 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -32,6 +32,7 @@
 -   `DropdownMenuV2`: invert animation direction. ([#63443](https://github.com/WordPress/gutenberg/pull/63443)).
 -   `Tabs`: Vertical Tabs should be 40px min height. ([#63446](https://github.com/WordPress/gutenberg/pull/63446)).
 -   `ColorPicker`: Use `minimal` variant for `SelectControl` ([#63676](https://github.com/WordPress/gutenberg/pull/63676)).
+-   `Tabs`: keep full opacity of focus ring and remove hover styles on disabled tabs ([#63754](https://github.com/WordPress/gutenberg/pull/63754)).
 
 ### Documentation
 

diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts
@@ -76,13 +76,14 @@ export const Tab = styled( Ariakit.Tab )`
 		font-weight: 500;
 		text-align: inherit;
 		hyphens: auto;
+		color: ${ COLORS.theme.foreground };
 
 		&[aria-disabled='true'] {
 			cursor: default;
-			opacity: 0.3;
+			color: ${ COLORS.ui.textDisabled };
 		}
 
-		&:hover {
+		&:not( [aria-disabled='true'] ):hover {
 			color: ${ COLORS.theme.accent };
 		}