Set search result lists font colour to black

Created on 3 May 2025, 8 days ago

Problem/Motivation

The Admin toolbar Search result list font colour is blue or black, depending on the theme.

Steps to reproduce

  1. Install Drupal, Admin Toolbar and Admin Toolbar Search
  2. Do a search from the front page (Olivero)
  3. Do a search from an admin page (Claro)

See that the result list text is black or blue.

Proposed resolution

Set the font colour.

Remaining tasks

User interface changes

API changes

Data model changes

📌 Task
Status

Active

Version

3.0

Component

User interface

Created by

🇩🇰Denmark ressa Copenhagen

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @ressa
  • 🇩🇰Denmark ressa Copenhagen

    ressa changed the visibility of the branch 3.x to hidden.

  • Merge request !145Set search result lists font colour to black → (Merged) created by ressa
  • Pipeline finished with Success
    8 days ago
    Total: 284s
    #488038
  • 🇩🇰Denmark ressa Copenhagen
  • 🇩🇰Denmark ressa Copenhagen
  • First commit to issue fork.
  • 🇫🇷France dydave

    Thanks a lot @ressa once again for suggesting this change!

    I checked quickly to see the color contrasts: https://webaim.org/resources/contrastchecker/

    Currently: #003ECC in front of #FFFFFF
    gives a ratio of: 8.19:1

    I "think" it should be fine to update the default color of the search items links to something darker to increase the color contrast 👍

    So I added a commit to your merge request above at #6, mostly to:

     
    I was a bit worried about adding a static value to override the link color, but it seems the module currently uses CSS static values everywhere 😅

    Overall, I think the module should consider refactoring all static values in CSS files to use CSS variables instead, defined by the module or themes/core/defaults.
    See for example:
    https://git.drupalcode.org/project/klaro/-/blob/3.x/css/klaro-override.c...
    But this is definitely out of scope and should be addressed in different tickets 😅

    Let's focus on preparing this release and we'll get more technical debt issues fixed in the next one 👌

    Thanks in advance for your feedback! 🙂

  • 🇩🇰Denmark ressa Copenhagen

    You're welcome @dydave 🙂

    And great that you checked the contrast. But, as I see it #000000 (black) would give the optimal contrast, being black text on white background, and don't we want maximum contrast?

    But #333333 also works well, since it's not blue, so that's an improvement, and totally fine. Also aesthetically, it could be more pleasing -- so I'll RTBC it!

    Switching to CSS variables is a good idea, if it makes development and maintenance easier, going forward. Though I do also see advantages in keeping it simple -- there are pros and cons for each method, as always. For example, looking at the Klaro CSS you shared, I get an "eyes glaze over" feeling -- it looks very complicated to me 😅

  • 🇫🇷France dydave

    Thanks a lot @ressa once again for your prompt and positive feedback! 🥳

    Once again, following your reply, I went ahead and merged the changes above at #9 👍

    Let's stay focused on the current tickets for now and maybe come back to CSS variables later, when we have more time, I guess 😅

    Marking issue as Fixed for now:
    That's one more included in the next release, great work!

    We can still squeeze in more issues in this release, so feel free to let us know if you spot anything else, we would certainly be very grateful!🙏
    Thanks again for all your great help!

Production build 0.71.5 2024