Update module to use CSS variables instead of adding inline CSS.

Thanks for creating the issue! For anyone interested, I put some of this in ✨ Support for core navigation experimental module Needs work .

Specifically:
https://git.drupalcode.org/issue/environment_indicator-3457688/-/blob/3457688-support-for-core/environment_indicator.module#L144

However, I stopped short of adding it for non-active environments. Was looking for more feedback!

@michaellander I think your idea definitely has merit and should be implemented across the board. +1 from me.

In my initial merge request I eliminate the need for Javascript to set the background-color and color style properties of the toolbar nav element.

This is done by adding a data-attribute to the toolbar nav element if the toolbar integration is enabled, and then targeting that element via CSS in a new toolbar specific library.

This fixes the Flash before js issue.
It also inadvertently fixes the issue where the toolbar is colored even if the toolbar integration is disabled.

Next we can work on how those switchers work.

Nice work! For the switchers, we could probably just use Drupal\Component\Utility\Html::getClass() on the environment label to generate a wrapper class name, and use that class to switch the variable values in a given context. Could always wrap the name generation in a utility function/method?

:root {
  --environment-indicator-bg-color: blue;
}
.environment-indicator--production {
  --environment-indicator-bg-color: red;
}
.environment-indicator--develop {
  --environment-indicator-bg-color: green;
}

Thoughts?

I was able to style the environment switchers using CSS variables in the most recent version of the open merge request.
I think there is still an issue with the non-toolbar version of the indicator's environment indicator switcher dropdown.

I've added a bunch of PHPUnit Functional tests to ensure the right libraries load at the right time and that some of the selectors we use exist on the page.

Also resolves 📌 Fix stylelint issues. Active

trackleft2 → changed the visibility of the branch 4.x to hidden.

FYI I've added instructions to this module's .tugboat configuration file to install gin and gin_toolbar module, set gin as the default admin theme, and three environment switchers in order to help us test.

To view a demo site with a copy of the module installed with this merge request applied, click the view live preview link under this issue's summary.

trackleft2 → closed merge request !58