Allow overriding module CSS without overriding their toolbar styles

I went with the second suggested approach of adding [modulename].icons.toolbar.css files, as the library names that use these files would all still make sense. Otherwise, a library like drupal.user.icons would need to be renamed. I wasn't sure if renaming libraries would be disruptive to contributed modules so erred on the side of caution. If there's a preference for fewer files that can be done if renaming libraries is OK.

It seemed like Settings Tray may require this refactoring as well. There is already a settings_tray.toolbar.css file, but there is also some toolbar related css found in all the module's other css files. This has me wondering if it was intentional and thought it would be best to get input before making the change.

1. Undid all changes to theme css
2. Moved toolbar css in settings tray to its toolbar file and created icons file. It was necessary to increase the weight of those files, which is explained in a comment.
3. Worth pointing out that I removed a @todo that referenced https://www.drupal.org/node/2784593, which was closed as a duplicate of another issue, and that issue had been closed as "Won't Fix".

During review I noticed that the patch from #8 is a bit outdated (53 offset for core/themes/stable/stable.theme).

Review of the re-rolled patch #13:

I think that most of the refactoring are fine. This applies to contextual, shortcut, tour and user modules.

But since I see that settings_tray gets some selector changes, I want to share my related feedback:

1. +++ b/core/modules/settings_tray/css/settings_tray.icons.toolbar.css
   @@ -0,0 +1,22 @@
   +.toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item:before {
   

   I'm sure that we want to change only the contextual toolbar item, and not every toolbar item that has the edit icon. So we should change this selector to .contextual-toolbar-tab .toolbar-icon.toolbar-icon-edit:before

2. +++ b/core/modules/settings_tray/css/settings_tray.icons.toolbar.css
   @@ -0,0 +1,22 @@
   +.toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item.is-active:before {
   

   Same situation as #1: change to .contextual-toolbar-tab .toolbar-icon.toolbar-icon-edit.is-active:before

3. +++ b/core/modules/settings_tray/css/settings_tray.icons.toolbar.css
   @@ -0,0 +1,22 @@
   +.toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item:hover:before {
   

   Same situation as #1: change to .contextual-toolbar-tab .toolbar-icon.toolbar-icon-edit:hover:before

4. +++ b/core/modules/settings_tray/css/settings_tray.icons.toolbar.css
   @@ -0,0 +1,22 @@
   +.toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item:hover > .toolbar-icon-edit:before {
   ...
   +.toolbar-tab > .button.toolbar-icon.toolbar-icon.toolbar-icon-edit:before {
   

   I cannot find elements that match these selectors, but anyway: .toolbar-icon.toolbar-icon?

5. +++ b/core/modules/settings_tray/css/settings_tray.toolbar.css
   @@ -1,66 +1,49 @@
   +.js-settings-tray-edit-mode .toolbar-item:not(.toolbar-icon-edit) {
   ...
   +.js-settings-tray-edit-mode .toolbar-item:not(.toolbar-icon-edit) .is-active {
   

   If the tray is active, these wont be visible because every other toolbar item gets the visually-hidden class. I'd remove these.

6. +++ b/core/modules/settings_tray/css/settings_tray.toolbar.css
   @@ -1,66 +1,49 @@
   +.toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item,
   +.toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item.is-active,
   +.toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item:focus {
   

   Same situation as #1: change these to .toolbar .toolbar-bar .contextual-toolbar-tab .toolbar-item[.is-active||:focus] (selector structure based on the one from toolbar.theme.css)

7. +++ b/core/modules/settings_tray/css/settings_tray.toolbar.css
   @@ -1,66 +1,49 @@
   +.toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item:hover,
   +.toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item.is-active {
   

   Change to .toolbar .toolbar-bar .contextual-toolbar-tab .toolbar-item[:hover||.is-active]

8. +++ b/core/modules/settings_tray/css/settings_tray.toolbar.css
   @@ -1,66 +1,49 @@
   +.toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item.is-active:hover {
   

   Change to .toolbar .toolbar-bar .contextual-toolbar-tab .toolbar-item.is-active:hover (selector structure based on the one from toolbar.theme.css)

9. +++ b/core/modules/settings_tray/settings_tray.libraries.yml
   @@ -6,7 +6,9 @@ drupal.settings_tray:
   +      css/settings_tray.icons.toolbar.css: { weight: 200 }
   +      css/settings_tray.toolbar.css: { weight: 200 }
   

   Instead of increasing the height, we should add toolbar library as explicit dependency (because it IS a dependency imho).

#13 Patch Failed

#21 Please review the patch

Fixed custom command failed. Attached interdiff for same.

Last patched has failed so I'm moving to needs work.

#29 Please review the patch

#30 Please review the patch

The Needs Review Queue Bot tested this issue. It either no longer applies to Drupal core, or fails the Drupal core commit checks. Therefore, this issue status is now "Needs work".

Apart from a re-roll or rebase, this issue may need more work to address feedback in the issue or MR comments. To progress an issue, incorporate this feedback as part of the process of updating the issue. This helps other contributors to know what is outstanding.

Consult the Drupal Contributor Guide to find step-by-step guides for working with issues.

Getting error while applied patch #30, creating MR.

Pipeline issue need to fix so moving NW.

@djsagar Didn't notice that you are working on it.