Skip to content

IBX-12442: Stopped the global link colour from overriding design-system buttons - #2095

Open
tischsoic wants to merge 1 commit into
6.0from
IBX-12442-ds-harmonization
Open

tischsoic wants to merge 1 commit into
6.0from
IBX-12442-ds-harmonization

Conversation

@tischsoic

Copy link
Copy Markdown
Contributor
🎫 Issue IBX-12442

Related PRs:

Description:

_general.scss styles every anchor's :active/:focus/:hover with the primary purple. That selector is specificity (0,1,1), which outranks the design system's single-class .ids-btn (0,1,0). Since the DS only restates the button colour on :focus-visible (0,2,0), any DS button rendered as an <a> lost its label colour in one specific state: focused by mouse (so no :focus-visible) and no longer hovered (so .ids-btn:hover doesn't cover it either). The label fell through to the link purple.

Scoped the rule with :where(:not(.ids-btn)). :where() adds no specificity, so the rule keeps its original (0,1,1) weight for ordinary links and only stops matching design-system buttons.

This is what made the product tour's "Done" button render purple instead of white (reported on IBX-12442). The matching workaround in integrated-help is removed in the linked PR.

Note the existing per-component workaround in _main-menu.scss (&:focus { color: $ibexa-color-white }) is deliberately left in place: only 20 of 74 .ibexa-main-menu__item-action elements carry ids-btn, the rest are plain second-level <a> links that still rely on the global rule.

For QA:

  • Ordinary links are unchanged: focus or hover any link in the back office (for example the second-level main menu entries) and the text should still turn purple.
  • Main menu top-level entries and the collapse button should look and behave exactly as before.
  • Product tour (with the linked PR): start a tour, click a tour button, then move the pointer away from it. The label must stay white on primary buttons instead of turning purple.

Documentation:

🤖 Generated with Claude Code

…em buttons

The global `a:active, a:focus, a:hover` rule is specificity (0,1,1) and outranks the single-class .ids-btn, so any design-system button rendered as an <a> lost its label colour once focused and no longer hovered. Scoped with :where(:not(.ids-btn)) to keep the original specificity while excluding DS buttons.

Co-Authored-By: Claude <noreply@anthropic.com>
@sonarqubecloud

Copy link
Copy Markdown

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants