Problem/Motivation

The background for the active workspace on /admin/config/workflow/workspaces is white in dark mode:

On hover the correct styling is applied

the workspaces list page in dark mode with only the live workspace available and the styling for the active live workspace with a dark background because the hover style is getting applied

Steps to reproduce

  • Enable dark mode
  • Go to /admin/config/workflow/workspaces

Proposed resolution

In the workspaces background color use default_admins --admin-color-bg-item, and fallback to the previous value.

Remaining tasks

Review

User interface changes

Before

the workspaces list page in dark mode with only the live workspace available and the styling for the active live workspace with a white background instead a dark one

the workspaces list page in dark mode with the live and the test workspace available and the styling for the active test workspace with a white background instead a dark one

After

after

Introduced terminology

NA

API changes

NA

Data model changes

NA

Release notes snippet

NA

Issue fork drupal-3627936

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

rkoller created an issue. See original summary.

shank115’s picture

I was able to reproduce this locally with the default_admin theme in dark mode.

I think the cause is this hard-coded colour in core/modules/workspaces_ui/css/workspaces.overview.pcss.css:

tr.active-workspace {
   background-color: #ebeae4;
 }

It's more specific than the theme's "table tr" rule, so the light background shows even in dark mode. On hover the theme's "table tr:hover" rule wins, which I think is why hovering looks correct.

A few possible ways to fix it:
1. Use light-dark() with transparent

tr.active-workspace {
    background-color: light-dark(#ebeae4, transparent);
 }

Simplest fix, but the active row would no longer be highlighted in dark mode.

2. Use light-dark() with a subtle dark colour

tr.active-workspace {
    background-color: light-dark(#ebeae4, rgb(255 255 255 / 0.08));
  }

This keeps a faint highlight in dark mode. It still stays in the module and doesn't depend on any theme.

3. Move the style to the admin theme
There's already a @todo saying this should move to the admin theme. default_admin could style it with its own variable, which already works in both modes (the hover state uses it):

tr.active-workspace {
      background-color: var(--admin-color-bg-item);
  }

I'd lean towards option 3, since it matches the @todo and would follow the theme's accent colour. Options 1 or 2 would be a smaller change if we'd rather keep it in the module for now.

Please let me know which approach sounds best.

hoxton made their first commit to this issue’s fork.

hoxton’s picture

hey @shank115, i think using the existing behaviour of other listings, using transparent give acceptable returns too.

hoxton’s picture

hoxton’s picture

Status: Active » Needs review
rkoller’s picture

thanks for an initial MR @hoxton... i've tried to check it out, but problem is, you are using the branch name "main" which is already taken. so the MR does not work... but i've manually applied the change using the transparent keyword. that way the state isn't visible at all. that is not in line with WCAG2.2 SC1.4.11

i've then manually applied the suggestion in #2.2 and #2.3 as well ... with that approach in both cases the active state is at least somehow visible. main problem is that it doesnt meet the required minimum of 3:1 for state, both have a contrast of around 1.28:1 and 1.29:2... that reminded me to another issue #3207233: Improve the visual indication of the active workspace in the Workspaces listing UI that is basically about the visual indication of the active workspace. the linked issue was about the light mode only with claro and the dark mode from gin was not on the radar yet (which complicates things further)

the white background in dark mode is definitely a serious problem. so i am tempted to vote for a preliminary fix with an approach like suggested in #2.2 or #2.3 so the active workspace becomes at least legible again and to some extend highlighted in dark mode and do the proper fix in #3207233: Improve the visual indication of the active workspace in the Workspaces listing UI?

mgifford’s picture

Status: Needs review » Reviewed & tested by the community
StatusFileSize
new185.59 KB

I think this is fixed. At least as to what has been called out in the issue description. Here is a before-after screenshot:

before/after patch

This looks mergable. I had no problems applying it. I set it up in Tugboat too and was able to verify the fix worked.

There will be other issues, but at as far as color contrast goes, with light/dark mode Accessibility Insights didn't see any on this page.

rkoller’s picture

-1 for RTBC from my end. the name of the feature branch has a naming collision (main) with the main branch, and yes in dark mode the active workspace becomes legible again but by using transparent as the color of choice for the active workspace the coloring of that active workspace is getting dropped - not only for the dark mode but for the light mode as well. wcag compliant labeling of the active workspace can be part of #3207233: Improve the visual indication of the active workspace in the Workspaces listing UI but i wouldnt drop the labeling of the active workspace entirely for light and dark mode as the fix. there are better ways for a preliminary fix until there is a consensus for a proper overall fix in #3207233: Improve the visual indication of the active workspace in the Workspaces listing UI imho.

catch’s picture

Status: Reviewed & tested by the community » Needs review

Moving back to needs review per #15#10.

Also noting there's a @todo in the CSS that it should be moved to the admin theme before workspaces is stable, which never happened - should we do that there?

mgifford’s picture

@catch do you mean #10?

I'll ask @mherchel about the CSS/Admin Theme.

rkoller’s picture

i've manually tested #2.3 locally and that worked as a preliminary fix. as @shank115 proposed it is enough to set

tr.active-workspace {
  background-color: var(--admin-color-bg-item);
}

i've tried to simply create a new MR to solve the naming conflict with the default main branch as well. therefore i've simply clicked the "create new branch" link on top of the issue... cuz i was able to fetch the issue fork but i was unable to checkout the one named main. the idea was to simply create a new MR, being able to check it out and then make the necessary changes locally and then push those changes up. problem is ive created a new MR based on main but i am unable to checkout it out with the given command:

<del>git checkout -b '3627936-active-workspace-has-broken-styling' --track drupal-3627936/'3627936-active-workspace-has-broken-styling'</del>

i get

<del>fatal: 'drupal-3627936/3627936-active-workspace-has-broken-styling' is not a commit and a branch '3627936-active-workspace-has-broken-styling' cannot be created from it</del>

i guess i've misunderstood some of the innerworkings of git and feature branches :(

i had to readd and refetch the feature branch then the checkout worked. the changes should be up soonish.

mgifford’s picture

So agreed this isn't ideal:

/** @todo Move to the admin theme before Workspaces is marked stable. */
tr.active-workspace {
  background-color: transparent;
}

I'm fine with your suggestion

tr.active-workspace {
  background-color: var(--admin-color-bg-item);
}

In the related issue, I recently used (via AI & me), to have explicit light/dark modes:

tr.active-workspace {
  background-color: var(--workspaces-active-background, light-dark(#f5f5f5, #252527));
}

And ya, should this be moved to the admin theme before Workspaces is marked stable?

rkoller’s picture

i've pushed a commit to MR17471 replacing the transparent color / previous fixed color with the variable var(--admin-color-bg-item) proposed by @shank115 in #2. the MR also fixes the name collision in MR17349 with the main branch.

and I agree with the suggestion by @catch, the probably cleanest would be removing the styling from the workspaces module and move that already within this issue over to default admin. MR17471 might need another update for that. but for now the coloring by accent colors is now testable in MR17471.

mherchel made their first commit to this issue’s fork.

mherchel changed the visibility of the branch main to hidden.

mherchel’s picture

Status: Needs review » Needs work

Added a code comment, so we can still support Claro.

rkoller’s picture

Status: Needs work » Needs review

thanks @mherchel, i've updated the MR with your suggestion. linting passes, but there are some warnings in the context to phpunit but probably unrelated with this MR since these are CSS only changes? so ive set it back to needs review.

smustgrave’s picture

Issue summary: View changes
Status: Needs review » Reviewed & tested by the community
Issue tags: +Needs Review Queue Initiative
StatusFileSize
new35.45 KB
new36.6 KB

Hate to re-upload the same screenshots but did try and cleanup the summary some.

before

After

after

smustgrave’s picture

Issue summary: View changes

  • mherchel committed 7bf6ccd4 on main
    fix: #3627936 Active workspace has a broken styling in dark mode
    
    By:...

  • mherchel committed 69f27715 on 12.0.x
    fix: #3627936 Active workspace has a broken styling in dark mode
    
    By:...

  • mherchel committed 80c65d30 on 11.x
    fix: #3627936 Active workspace has a broken styling in dark mode
    
    By:...

  • mherchel committed 28c1adb2 on 11.5.x
    fix: #3627936 Active workspace has a broken styling in dark mode
    
    By:...

  • mherchel committed 4f642ae4 on 11.4.x
    fix: #3627936 Active workspace has a broken styling in dark mode
    
    By:...
mherchel’s picture

Status: Reviewed & tested by the community » Fixed

Committed and backported to 12.0.x, 11.x, 11.5.x, and 11.4.x.

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.