Consolidate, refactor, remove and untangle Claro's CSS from Default Admin theme

Postponing on #3582826: Untangle gin.css

Still postponed on #3583057: Convert the compiled CSS in default_admin's components, layout, and theme to modern PostCSS

#3583057: Convert the compiled CSS in default_admin's components, layout, and theme to modern PostCSS is fixed. This can be worked on

I'm working on moving base/media-queries over.

Completed base/media-queries .

Updated IS

Also worked on moving theme/variables to css/base/variables.

Verified no visual regressions.

Working on moving theme/font to css/base/font and theme/accent to css/theme/accent

Completed work on moving theme/font to css/base/font and theme/accent to css/theme/accent. VRT passing.

Working on gin-icons

Completed moving gin-icons.

Starting gin-body

Moved gin-body into elements.

Refactored out gin-color-overrides. VRT passed

Getting started on gin-views-unwrapped and gin-regions

Within gin-views-unwrapped, there's a .show-6 CSS class. This isn't a Drupal class, and is likely a utility class.

I pinged @saschaeggi on it at https://drupal.slack.com/archives/C012J63GVB8/p1776946926935409 just to be sure.

Going to yank it for now. We can always put it back if we find something using it.

Completed refactoring out gin-regions.

Note there's some differences in the visual regression test:

If the navigation toolbar is open, the body:not(.toolbar-tray-open) .layout-container { was taking precedence, which adjusted the inline margin. This rule was likely unintended as if the Toolbar module is not enabled (which it won't be in D12), the CSS should not take effect. https://git.drupalcode.org/project/drupal/-/merge_requests/15520/diffs?c...

Completed gin-layers. It was more complicated than expected, and also had to remove unnecessary specificity from the views-exposed-form

Working on gin-title

Completed gin-title

Working on gin-extend

Completed refactoring out gin-extend.

Working on gin-claro-improvements

Completed gin-claro-improvements

Working on gin-views

Went deep into a rabbit hole on gin-views. There were 4(!!!) Views files that were arranged in a very non-componenty way. They're all now consolidated into one (views-ui.pcss.css).

In the future, we might want split it up in a more logical manor. It's 1500+ lines.

Completed tabledrag

I'll start work on gin-form (likely tomorrow)

Finished refactoring out gin-form. It was a pain.

Moving on to gin-action-link

Refactored out gin-action-link. Moving on to gin-pager.

Completed gin-pager.

Moving on to gin-help.

completed gin-help

Fixed a regression with the action links rendered as a button.

Grabbing gin-messages.

Completed gin-messages.

Moving on to gin-field-ui

Completed gin-field-ui.

On to gin-card

Completed gin-card.

On to gin-elements

gin-elements was the easiest of all.

On to gin-admin-item

Completed gin-admin-item

Onto gin-focus

Yay! New contributor to this issue (Thanks @mukeysh!)

Finished gin-focus

On to gin-system-diff

gin-system-diff CSS extends the diff module.

I removed the CSS, and created #3589928: Special styles for "Default Admin" theme in Drupal 12 for that module to move the CSS there.

Moving on to gin-update

Completed gin-update

On to gin-status-report

Refactored out support for upgrade-status module. Opened #3590168: Special styles for "Default Admin" theme in Drupal 12 in that queue.

Completed gin-status-report

On to gin-divider

Completed gin-divider and gin-progress

On to gin-insert

Thanks for working on this @nitinkumar_7.

Opened #3590316: Special styles for "Default Admin" theme in Drupal 12 for the Insert module (to move styles there).

Removed gin-insert

Moving on to gin-panel

Completed gin-panel.

Moving to gin-local-actions

Completing removing gin-local-actions, and also removed gin-tour.

Moving to gin-quotation and gin-image-preview

Refactored out gin-image-preview and gin-quotation.

Moving on to gin-permissions and gin-taxonomy

I was able to just remove gin-taxonomy (the styles weren't applying to anything) and gin-toolbar (for the gin-toolbar module).

We're all done with base. This is a good stopping point. I'm going to create another issue for the rest of the CSS files under core/themes/default_admin/migration/css

I'm going to spend some time doing additional QA with the visual regression testing tool, and fixing stuff over the weekend

This is ready for testing.

Testing instructions:

To properly test, you'll want to visit the theme's pages and navigate throughout, while looking for regressions manually.

Note: This is not a 1:1 match with the current main branch. A couple changes that have been made that cause differences in the visual regression testing include:

• Removal of some extra spacing around main container when navigation tray is open. This was an obvious bug when we looked at the code.
• Proper support for admin theme's layout density setting within table-cells. Previously these were not responding as expected, and it was easier to fix this.

To properly test, you'll want to visit the theme's pages and navigate throughout, while looking for regressions manually.