Problem/Motivation

Parent issue #3582351: [Meta] Clean up CSS within Admin theme

In #3582833: Consolidate, refactor, remove and untangle Claro's CSS from Default Admin theme, we consolidated, removed, and refactored 41 Gin specific stylesheets from core/themes/default_admin/migration/css/base into Admin theme's default styles.

This issue is to tackle the rest of them.

Process

  1. Add a comment on what you're working on
  2. Do the work
  3. Verify that linting passes by running yarn lint:css from the core/ directory. Note you can pass in --fix to automatically fix some issues.
  4. Verify there are no visual changes by using the visual regression tool https://github.com/mherchel/ddev-drupal-admin-vrt. You can also use the https://www.drupal.org/project/theming_tools module to test out specific components.
  5. Commit the changes to the MR. Be verbose and granular in your commit message
  6. When completed, add a comment and update the issue summary by marking the line item as completed by replacing the square (🔲) with a checkbox (✅)

Testing steps

This issue is the last mega MR to merge the two CSS codebases in default_admin.

Originally the goal was just to move over and combine the CSS (without fixing any issues). However, with the impending deadline of reaching beta by 11.4, we started fixing some issues including media library, and some dark mode issues. Note that there are still visual bugs remaining.

To test, open the site (with the applied MR) in various browsers, and navigate to various admin interfaces. There might be some remaining bugs, but there should be no regressions from the main branch. A couple spots to spend extra attention toward are media library, and modals, as well as tabledrag interfaces like menus and field UI.

Note that if bugs are found, they may be relegated to followup issues to meet the 11.4 beta deadline.

Migration components (migration/css/components/)

Migration file Merge target Type Complexity Notes
✅ autocomplete css/components/autocomplete-loading.module Override Low Autocomplete dropdown overrides.
✅ breadcrumb css/components/breadcrumb + css/layout/breadcrumb Override Medium Breadcrumb component + layout overrides.
✅ ckeditor5 css/components/ckeditor5 Override Medium CKEditor 5 overrides.
✅ contextual_links New: css/components/contextual-links Standalone Low Contextual links styling. No Claro equivalent.
✅ description_toggle New: css/components/description-toggle Standalone Low Help icon toggle. No Claro equivalent.
✅ dialog css/components/dialog Override High Dialog overrides. Must merge with both css/components/dialog and migration/css/theme/dialog. Three source files total.
✅ edit_form New: css/components/edit-form Standalone Low Edit form layout (sidebar/content regions).
✅ maintenance_page css/theme/maintenance-page Override Medium Maintenance page overrides.
✅ media_library css/components/media-library.ui + css/theme/media-library Override High Large file (~525 lines). Overlaps with two Claro files. Grid, modal, dark mode.
✅ node_preview css/components/node-preview Override Medium Node preview overrides. Backdrop blur, dark mode.
✅ revisions New: css/components/revisions Standalone Low Revisions page styling.
✅ settings New: css/components/settings Standalone Low Gin settings panel.
✅ sidebar New: css/components/sidebar Standalone Medium Sidebar component. Responsive, transitions.
✅ status New: css/components/status Standalone Low Status message enhancements.
✅ tableselect css/components/tableselect Override Medium Tableselect/VBO overrides. Sticky, animations.

2d. Migration layout (migration/css/layout/)

Migration file Merge target Type Complexity Notes
✅ navigation New: css/layout/navigation Standalone Medium Navigation layout. Responsive, many breakpoints.
✅ top_bar New: css/layout/top-bar Standalone Medium Top bar layout. Responsive.
CommentFileSizeAuthor
#57 Screenshot 2026-06-04 at 9.51.49 AM.png79.49 KBbernardm28
#57 Screenshot 2026-06-04 at 9.52.46 AM.png75.3 KBbernardm28

Issue fork drupal-3590364

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:

About issue forks

Comments

mherchel created an issue. See original summary.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Issue summary: View changes
mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Status: Active » Postponed

Postponing this on #3582833: Consolidate, refactor, remove and untangle Claro's CSS from Default Admin theme

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Status: Postponed » Active
catch’s picture

catch
he/him
Primary language English
commented

Settings tray is on its way out of core so I think the styling for that could be removed outright: #3576667: [meta] Tasks to deprecate Settings Tray

Edit: same for anything to do with toolbar module.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented

I'm going to grab dialog, which promises to be a pain in the ass :)

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented

Some notes on dialog (for posterity)

There are three libraries and three CSS files.

  • admin.drupal.dialog
    • /drupal/core/themes/default_admin/css/components/dialog.pcss.css
    • sets css/components/dialog.css to false in info.yml
  • admin_dialog
    • /drupal/core/themes/default_admin/migration/css/theme/dialog.pcss.css
    • depends on default_admin/dialog
    • loaded by info.yml by extending core/drupal.dialog
  • dialog
    • /drupal/core/themes/default_admin/migration/css/components/dialog.pcss.css
    • loaded by info.yml by extending core/drupal.dialog

Because css/components/dialog.css gets set to false in the info.yml, the only loaded CSS is below (verified by looking at source). Note the order below is the same as the source order (adjusted by the weight of the CSS within the libraries.yml file)

  • /core/themes/default_admin/migration/css/theme/dialog.css
  • /core/themes/default_admin/migration/css/components/dialog.css
mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented

I added some in-dialog form elements to https://www.drupal.org/project/theming_tools for testing.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented

While going through the dialog styles, I went into autocomplete.pcss.css to move stuff over. I also noticed styles meant to override https://www.drupal.org/project/autocomplete_deluxe.

I'm going to yank these out, and I opened an issue in their queue at #3591908: Support Drupal 12 Default Admin (Gin-in-core) styling and add cross-version tests

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Issue summary: View changes

Completed dialog. Removed sooo much unneeded CSS. It looks like the entirety of the form styles were copied in there. I modified https://www.drupal.org/project/theming_tools to output a complex form inside of the modal to ensure that those styles were not needed.

mherchel opened merge request !15865

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented

Moving on to media-library next (doing the hard stuff first)

bernardm28’s picture

bernardm28 commented

getting started on css/components/status

bernardm28’s picture

bernardm28 commented
Issue summary: View changes
mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Issue summary: View changes

Completed media-library.

It was so much work.
- The UI is now fixed (not 100% perfect, but definitely 99%)
- I consolidated all the files
- and then I split the files up again into logical subcomponents
- I removed a lot of 'dead' rules that weren't getting applied anywhere

Next up for me is tabs, which is another difficult one.

bernardm28’s picture

bernardm28 commented
Issue summary: View changes
bernardm28’s picture

bernardm28 commented

moving into a medium one, css/components/node-preview.

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

nitinkumar_7’s picture

nitinkumar_7 commented
Issue summary: View changes
nitinkumar_7’s picture

nitinkumar_7 commented
Issue summary: View changes
nitinkumar_7’s picture

nitinkumar_7 commented
Issue summary: View changes
mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented

@nitinkumar_7 Looking at your previous commit, it looks like you're just appending the one CSS file to the other.

We need a bit more than that. The selectors need to be manually verified within Drupal (to see if they still exist), and they need to be combined and simplified (many have too much specificity)

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented

@nitinkumar_7 Also your git commit messages are looking like they're AI generated.

Note that the CSS refactoring is not something that AI has been great at (I've attempted to use Claude 4.7 in the previous issue, and it came up lacking). If you're either using AI or are not super familiar with CSS, you might want to refrain from working on this issue, as it could create more work than you're solving.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented

Pushed up fixes for Tabs. Note that Gin's tabs CSS file also has rules for vertical tabs, as well as the field_group module.

I'm going to continue to work on consolidating the vertical tabs, and then will create an issue in the field_group module to move the code over there.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented

Moved the styles for details out of Gin's tabs file.

Still have to move over the vertical-tabs styles and then open an issue for field_group.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented

Opened up #3592716: Special styles for "Default Admin" theme in Drupal 12 for the Field Group module.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Issue summary: View changes

Completed tabs, which took several days, because it involved so many different components. But its done, cleaned up, accessible, and awesome.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Issue summary: View changes

Removed toolbar integration, since it will be removed for D12

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented

Moving on to edit_form.pcss.css next

dharizza’s picture

dharizza commented
Issue summary: View changes

Working on maintenance_page.

dharizza’s picture

dharizza commented
Issue summary: View changes

Completed maintenance-page. Starting breadcrumbs.

dharizza’s picture

dharizza commented
Issue summary: View changes

Fixed pending issue with maintenance page.
Finished with breadcrumbs.
Starting sidebar.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Issue summary: View changes

Completed edit-form.

Moving to more_actions

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Issue summary: View changes

Looks like more actions was already completed.

Going to work on autocomplete

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Issue summary: View changes

Completed autocomplete. Working on ckeditor5

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

mukeysh’s picture

mukeysh commented

Completed settings

mukeysh’s picture

mukeysh commented
Issue summary: View changes
mukeysh’s picture

mukeysh commented
Issue summary: View changes
mukeysh’s picture

mukeysh commented

Completed sidebar

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented

@mukeysh Thanks for the work on this!

A couple notes:

  • You accidentally copied over the sidebar.css into the new place as sidebar.pcss.css. Not a big deal, but just a heads up to look at your diffs before you commit.
  • Another thing is that the image paths within the CSS of the settings were not updated, so the images that showed the layout density, etc were no longer showing. Once again, please double check the work. I made a ddev add on that does visual regression testing to help with this https://github.com/mherchel/ddev-drupal-admin-vrt
  • Also, there's no need to move over the JavaScript in this ticket. It's out of scope.

Anyway, I'll fix these right now, so no need to do anything.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Issue summary: View changes

Removing the following items from the IS (since they're not in the migration directory)

  • ajax
  • tabs
  • toolbar
  • tooltip
mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Issue summary: View changes

Removing Settings tray from the IS, since it's being handled in #3586951: Remove Settings Tray integration in Default Admin, keep in Stable 9

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Issue summary: View changes

Completed CKEditor refactor. I also fixed the focus styles to work with forced colors.

mukeysh’s picture

mukeysh commented

@mherchel
Thank you for the suggestion. I will keep this in mind and make sure to take care of it the next time I make any changes.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Issue summary: View changes

Refactored contextual-links. Moving to description_toggle

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Issue summary: View changes

Completed description_toggle. Fixed issue where the library wasn't even being attached properly. I also fixed some a11y issues.

dharizza’s picture

dharizza commented

Working on node-preview.

dharizza’s picture

dharizza commented
Issue summary: View changes

Completed node-preview. Starting tableselect.

Btw: it seems like revisions was already done but wasn't marked as such in the ticket description.

dharizza’s picture

dharizza commented
Issue summary: View changes

Completed tableselect.

dharizza’s picture

dharizza commented
Issue summary: View changes

Completed navigation and top_bar.
Removed toolbar from layout section in IS.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Assigned: Unassigned » mherchel
Status: Active » Needs work

This is looking really good! I pushed up some fixes, and will come back to this later to fix CI

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented

Getting settings tray test failures. Putting it back since it's not yet pulled out of core.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented

Dug in. The settings tray test failures are unrelated. The test loads the stark theme, and the changes that we made to settings tray are just pulling out one styling selector.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Status: Needs work » Needs review

Pushed some fixes to Navigation (and removed a lot of dead code) for dark mode.

Tests are passing!

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Issue summary: View changes

Added testing steps.

bernardm28’s picture

bernardm28 commented
StatusFileSize
new Screenshot 2026-06-04 at 9.52.46 AM.png75.3 KB
new Screenshot 2026-06-04 at 9.51.49 AM.png79.49 KB

Two issues i noticed in safari. That may out of scope and could be a later bug fix.

  1. if you open the media pop up, there a divider div that does not inherit the theme color.
  2. The modal on firefox does not automatically scroll you all the way inside the pop up, clipping the text on the top. Only happens in Safari as chrome does not add a scrolling toolbar.

issue 1

issue 2 scrolling toolbar

Other than that, it seems fine. I did not find any other issues.

bernardm28’s picture

bernardm28 commented

It seems like the darkmode issue was already in main so probably out of scope here.
The scrolling toolbar on the Safari media pop up does not seem to be on the main branch though.

bernardm28’s picture

bernardm28 commented

The media issue scroll issue is already addressed at https://www.drupal.org/project/drupal/issues/3590897 and since the other one is inherited this looks good to go.

bernardm28’s picture

bernardm28 commented
Status: Needs review » Reviewed & tested by the community
jurgenhaas’s picture

jurgenhaas
he/him
Primary language German
Location Gottmadingen
commented

This is RTBC +100 from my side. I've tested this extensively and manually. I went through all admin pages, compared everything to the unpatched version, and the only differences that I found have been literally bug fixes. Some of which had been captured in #3592061: List of visual differences between Gin & Admin theme and can now be marked completed.

I did find some issues, where the current rendering differs from Gin 5 on Drupal 11, but those are already broken in main and NOT caused by this MR. All those have been added to the linked issue above as well.

Also tested different screen sizes. Only found one additional issue, also not caused by this MR and added to the other issue. Same applies to dark mode as already mentioned by @bernardm28.

All in all, this MR is a masterpiece of work, and settles the foundation for all the other outstanding work in an outstanding way. Please get this merged asap.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Assigned: mherchel » Unassigned

  • lauriii committed e9065446 on main 
    task: #3590364 Part 2 of Consolidate, refactor, remove and untangle...

  • lauriii committed 9fa6149b on 11.x 
    task: #3590364 Part 2 of Consolidate, refactor, remove and untangle...

  • lauriii committed 3056dde8 on 11.4.x 
    task: #3590364 Part 2 of Consolidate, refactor, remove and untangle...

lauriii closed merge request !15865

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Status: Reviewed & tested by the community » Fixed

Thank you all for completing this refactor. What an effort! 👏

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.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.