Menu color issue when logged in

[danahertzberg]

Problem/Motivation

The menu of the admin UI has some unintentionally changed CSS.

Describe the bug

Colors are wrong.

To Reproduce

Steps to reproduce the behavior:

1. Log into a site
2. Observe "Manage" or "Shortcuts" menu links

Proposed resolution

Fix CSS

Expected behavior

Colors should not be changed

Screenshots

Previous

Current

[bberndt-uaz]

This bug was introduced with our update of the Environment Indicator module:

• Update drupal/environment_indicator requirement from 4.0.10 to 4.0.21 #3457

In Quickstart, the background color for the toolbar item is now being set using a style attribute, which overrides the CSS for the active item from our Claro admin theme. See https://git.drupalcode.org/project/environment_indicator/-/compare/4.0.10...4.0.21#55fafbc2642fc8afec43c881d5e1a8f03dfbe9e0_20_21:

$('.toolbar .toolbar-bar .toolbar-tab > .toolbar-item').css('background-color', settings.environmentIndicator.bgColor);

The CSS that is being overridden: https://git.drupalcode.org/project/drupal/-/blob/11.x/core/modules/toolbar/css/toolbar.theme.css#L49-53.

.toolbar .toolbar-bar .toolbar-tab > .toolbar-item.is-active {
  color: #000;
  border-bottom: 1px solid #ddd;
  background-color: #fff;
}

I believe the change came from this Environment Indicator issue (resolved with 4.0.20):

• Foreground color setting broken for toolbar integration

This issue seems related, but it only changed the handling of the text color (the foreground color):

• Toolbar active tab background is always white on Drupal 10.3

Finally, this issue that @trackleft created would update the module to use CSS variables rather than setting style attributes on elements:

• Update module to use CSS variables instead of adding inline CSS via Javascript

[trackleft]

Thank you for your synopsis @bberndt-uaz, that environment indicator module is a mess, but slowly heading in the right direction.