Come together with the global Drupal community in Rotterdam, 28 Sept – 1 Oct 2026. Sessions, contribution, connection, and Early Bird savings until 8 June.Problem/Motivation
i have to admit i'Ve only tested #3315859: Communicate the status/state of a project in the button accesibly in claro. While testing the bulk action MR i've noticed the styling of the installed button is kind of off in Gin:
in lightmode you have the checkmark and the installed label with a green "chip" component that makes it look like a button sort of, while in claro there is no chip.
in darkmode you also have the checkmark, the installed label with a green chip underneath, but the only problem, neither the chip nor the button label have a high enough color contrast. it is barley recognizable it is a homogenous greenish blob.
since the button is not clickable and should not have any affordance i guess there is no need that the chip has to meet SC1.4.11 plus claro is also not using that kind of chip styling, therefore i would consider the chip negelectable. but the button label on the other hand is mandatory and has to meet SC1.4.3 which requires a color contrast of at least 4.5:1 against the background color. and strictly speaking the checkmark might need a high enough color contrast as well.
Steps to reproduce
Proposed resolution
make sure that the checkmark and the button label is visible with a high enough contrast in light and dark mode and decide about the chip design.
| Comment | File | Size | Author |
|---|---|---|---|
| #13 | Screenshot 2025-01-29 at 7.00.43 PM.png | 89 KB | utkarsh_33 |
| #9 | Install button in gin dark mode.png | 98.77 KB | utkarsh_33 |
| darkmode.jpg | 37.67 KB | rkoller | |
| lightmode.jpg | 38.92 KB | rkoller |
Issue fork project_browser-3498562
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:
changes
Comments
Comment #2
utkarsh_33 commentedI think there are a couple of issue which are related to the styling in particular to gin theme.@ phenaproxima. suggested a better way to solve a problem for styling in Change UI for the install queue to match bulk operations issue's
this comment..
We can have discussion and come up with a solution so that all the styling issues can be solved using a finalised approach.
Comment #3
utkarsh_33 commentedComment #4
rkollerwe can also solve those problems within the scope of the bulk action ui issue and close this issue. would also be fine with me. but just thought scope should be kept tight and this issue was an followup to #3315859: Communicate the status/state of a project in the button accesibly
Comment #5
phenaproximaAfter discussion with @utkarsh_33, postponing on #3484474: Change UI for the install queue to match bulk operations.
Comment #6
phenaproximaI am told that #3484474: Change UI for the install queue to match bulk operations effectively fixes this one, and unblocks other styling fixes. Therefore, closing as a duplicate, but please reopen if I have closed this issue in error.
Comment #7
rkolleri've tested in the latest state of 2.0.x and the problem illustrated in the issue summary still applies.
Comment #9
utkarsh_33 commentedThe checkmark is not inline with what we want but that's because we are using the checkmark from Claro theme see this MR.I am not sure whether we do the same thing for the checkmark as well as we are doing for classes, so just keeping it as is for now until someone has thoughts on this.Marking it NR.
Comment #10
phenaproximaThe ID selector and use of Gin-specific hacks in the Svelte code is sad, but not the end of the world, and could be improved in a subsequent issue.
No objections from me, then, but leaving in the review state until it gets signed off on by @chrisfromredfin or @rkoller.
Comment #11
rkollerthe only pressing problem i see is the color contrast of the checkmark (rgb(85, 86, 91)) in dark mode against the background (rgb(59, 59, 63)) (only quickly used the color picker), the resulting contrast is 1.5:1, but it should have at least 3:1. other points would be styling and aesthetics related and the consistency in between light and dark mode and so on. but that could be moved to follow up issues.
Comment #12
phenaproximaComment #13
utkarsh_33 commentedThis is how the checkmark now looks in darkmode.
Comment #14
utkarsh_33 commentedComment #15
phenaproximaLooks like ESLint is still mad. Also, needs follow-ups. :)
Comment #16
phenaproximaComment #17
chrisfromredfinI still have some FU to file for this - the styling is still off in Claro (like 2px height differential) but that's been there forever and is out of scope for this issue. And this is an improvement to dark mode / Gin and will help Drupal CMS. So, here goes!
Comment #19
chrisfromredfin