Problem/Motivation

Boldness of contextual links are not consistent through out the site. In some places its coming as bold and in some other places its using normal font weight. This depends on the block its coming under. The reason is that, in the second case links are inheriting font-weight style from its parent element, nav.secondary-nav .
Primary_Navigation_Contexual_Links
Secondary_Navigation_Contexual_Links

Steps to reproduce

Create base installation of D10 or D11, using the default theme (Olivero).
Try opening contextual links of Primary navigation. Links are showing with normal font weight.
Try opening contextual links of Secondary navigation. Links are showing with bold font weight.

Proposed resolution

Make the contextual links font weight consistent (either bold or normal) for all types of blocks.

Issue fork drupal-3405153

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

Nitin shrivastava created an issue. See original summary.

nitin shrivastava’s picture

Component: Olivero theme » contextual.module

nitin shrivastava’s picture

Status: Needs work » Needs review
sijumpk’s picture

Priority: Major » Normal
StatusFileSize
new21.43 KB

Checked and it seems like changes are working. Adding screen recording.

smustgrave’s picture

Unless it's failing accessibility color contrast I believe this is a won't fix.

smustgrave’s picture

Status: Needs review » Needs work

Should be noted how this is a bug and not a personal preference though

larowlan’s picture

Status: Needs work » Postponed (maintainer needs more info)
Issue tags: -Needs subsystem maintainer review +Needs issue summary update

I'm not sure what this is fixing, the issue summary reads like it was written by AI

Can we get a plain text description with before and after screenshots please

sijumpk’s picture

Category: Bug report » Task
Priority: Normal » Minor
Issue summary: View changes
Status: Postponed (maintainer needs more info) » Active
StatusFileSize
new9.73 KB
new10.56 KB
sijumpk’s picture

@larowlan, lol. Its sounds like an AI generated text for me too. So updating the summary to make some more sense.

@smustgrave, please see the updated summary. Some links are inheriting the font weight of its parent block. Upon checking, the fix @Nitin shrivastava provided is fixing this inconsistency.

smustgrave’s picture

It should be looked at when that color was added if it was done on purpose.

sijumpk’s picture

Color for all links are consistent (#333) and its declared in core/modules/contextual/css/contextual.theme.css. But font-weight is not declared in that css file. Because of that its getting inherited from its parent element, and is inconsistent depending on the blocks its showing.

larowlan’s picture

Thanks, that issue summary is much nicer

Can we remove the redundant MRs, there's three so it's not clear which one is up for review

sijumpk changed the visibility of the branch 11.x to hidden.

sijumpk changed the visibility of the branch Nitin_shrivastava-afc07c9e-patch-7773 to hidden.

shweta__sharma’s picture

StatusFileSize
new3.46 MB
new1.16 MB
new1.18 MB

I just took a look into this issue and after spending some minutes on it what I understand here is that - The contextual link is working fine as it should work. The font weight is normal but the main issue is caused because the CSS was given to the secondary nav which is making all the links bolder inside the secondary nav. So we should not target the secondary nav class directly to make the links bold. Instead of targeting the secondary nav (parent class), we should target the secondary-nav__menu-link (child class) class as we did for the primary nav.

See screenshots for better understanding :)

sijumpk’s picture

Status: Active » Needs review

@shweta__sharma, why should we alter styles with menu items, its upto the theme using. There is already a selector (".contextual-region .contextual .contextual-links a") present for this element in contextual.theme.css file.

@larowlan, the MR I checked is !5613, its the only pipeline passed one. And its seems like fixing the problem

smustgrave’s picture

Status: Needs review » Reviewed & tested by the community
Issue tags: -Needs issue summary update

It is minor but the boldness is there in olivero nav

wim leers’s picture

Title: Contexual link boldness issue. » Contexual links should never be bold, unless the theme explicitly makes it so
Issue tags: +CSS

  • lauriii committed c2021dd2 on 11.x
    Issue #3405153 by Nitin shrivastava, sijumpk, smustgrave, larowlan:...

  • lauriii committed 81c8738d on 10.2.x
    Issue #3405153 by Nitin shrivastava, sijumpk, smustgrave, larowlan:...
lauriii’s picture

Status: Reviewed & tested by the community » Fixed

Committed c2021dd and pushed to 11.x. Also cherry-picked to 10.2.x. Thanks!

Do we want to fix this in Stable 9 too? Any potential disruption seems unlikely enough that this could potentially be accepted there.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.