Skip to content

tabs: hovering an unselected tab shows the full active label colour #301

Description

@chrisjsewell

At current main (4f66f32e), style/design.toml gives --sd-color-tabs-label-hover the identical full-strength literal as --sd-color-tabs-label-active (lines 29-30), while the hover underline is softened (--sd-color-tabs-underline-hover, 0.62 alpha, line 33).

The effect: hovering an unselected tab renders its label in exactly the selected tab's colour — while the pointer is over the tab bar, the only remaining visual distinction for which tab is actually open is the underline's saturation. On a site that themes the tab tokens with a strong brand colour, this reads as two "active" tabs.

Proposal: soften label-hover analogously to the underline treatment (a muted/mixed form of the active colour), so the hover affordance is visible but the selected tab stays unambiguous.

For reference, the ubcode port of the tabs component has adopted a softened hover label as a deliberate divergence pending this discussion, muting the label with the same ratio the hover underline uses.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions