From e9e27b90d3399a8a5bb2f73c11fce5cfc422b79d Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 23 Jul 2024 12:21:49 +0200 Subject: [PATCH] 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 Co-authored-by: tyxla --- packages/components/CHANGELOG.md | 1 + packages/components/src/tabs/styles.ts | 5 +++-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index d58d7db9828967..d7585353acb453 100644 --- 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 index 7d67f462c7e87e..ddad0f7b2d767d 100644 --- 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 }; }