In #3599680: Consolidate, merge, and refactor Gin's CSS variable's into Admin theme's original variables., we took the variables from Gin and Claro and consolidated them into one architecture with a new namespace. We were in a bit of a hurry to get this into 11.4.0, so there's some more tidying up that needs to be done.
There are multiple legacy variables that are not in use, and multiple that have only one usage. These should be refactored out if possible.
We'll also likely do a bit of general cleanup.
Usage counts for every variable defined in
core/themes/default_admin/css/_variables/variables-color.pcss.css,
measured across all *.pcss.css files in the theme.
Not referenced anywhere. First-pass deletion candidates.
| Ramp | Dead steps |
|---|---|
| Red ramp (entire) | red-020, red-050, red-070, red-100, red-200, red-300, red-400, red-500, red-600, red-700, red-800, red-900 |
| Blue ramp | blue-020, blue-070, blue-100, blue-200, blue-400, blue-500, blue-800, blue-900 |
| Gray ramp | gray-025, gray-050, gray-600 |
| Misc | contextual, info, gray-200-o-80 |
The entire red ramp is dead because the status tokens
(--admin-color-error,--admin-color-text-error, etc.) use
literal hex values, not the ramp.
These primitives feed only semantic tokens inside _variables/. Each could be
inlined into its consumer and deleted.
| TOTAL | OUTSIDE | Variable |
|---|---|---|
| 1 | 0 | --admin-color-blue-300 |
| 1 | 0 | --admin-color-blue-600 |
| 1 | 0 | --admin-color-blue-650 |
| 1 | 0 | --admin-color-blue-700 |
| 1 | 0 | --admin-color-gray-300 |
| 1 | 0 | --admin-color-gray-400 |
| 1 | 0 | --admin-color-gray-900 |
| 1 | 0 | --admin-color-red-550 |
| 2 | 0 | --admin-color-gray-100 |
| 2 | 0 | --admin-color-gray-700 |
| 4 | 0 | --admin-color-gray-200 |
| 1 | 0 | --admin-shadow-color-4 |
| 2 | 0 | --admin-shadow-color-1 |
| 2 | 0 | --admin-shadow-color-2 |
| 2 | 0 | --admin-shadow-color-3 |
--admin-shadow-color-1…4only feed the--admin-shadow-1/2
composites — that's by design, probably keep.
| TOTAL | OUTSIDE | Variable |
|---|---|---|
| 1 | 1 | --admin-color-bg-unpublished |
| 1 | 1 | --admin-color-blue-050 |
| 1 | 1 | --admin-color-focus-neutral |
| 1 | 1 | --admin-color-switch |
| 1 | 1 | --admin-color-text-success |
| 1 | 1 | --admin-color-text-warning |
| 4 | 1 | --admin-color-gray-500 |
| 4 | 1 | --admin-color-gray-950 |
| 5 | 1 | --admin-color-gray-800 |
| 2 | 2 | --admin-color-bg-inverse |
| 2 | 2 | --admin-color-bg-success |
| 2 | 2 | --admin-color-border-loud |
| 2 | 2 | --admin-color-link-active |
| 2 | 2 | --admin-color-shadow-button |
| 3 | 2 | --admin-color-bg-error |
| 3 | 2 | --admin-color-bg-warning |
There should be no changes to the UI. The CSS is being moved around and refactored.
Test the site at various breakpoints, various browsers, and in dark and light mode. Use https://github.com/mherchel/ddev-drupal-admin-vrt to do automated visual regression tests
| Comment | File | Size | Author |
|---|---|---|---|
| #8 | Screenshot 2026-08-05 at 9.11.27 AM.png | 271.58 KB | bernardm28 |
| #8 | Screenshot 2026-08-05 at 9.02.18 AM.png | 251.34 KB | bernardm28 |
| #8 | Screenshot 2026-08-05 at 8.57.47 AM.png | 105.81 KB | bernardm28 |
Show commandsStart 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:
changes, plain diff MR !16156
Comments
Comment #3
mherchelI'm discovering that the variables are still a bit of a mess.
I'm in the process of removing the unused variables and refactoring out the ones that are similar to others and used only once or twice.
But I'm fearing the complexity of this one is growing, and it may be another large MR.
Comment #4
mherchelComment #5
mherchelComment #6
mherchelUpdating IS
Comment #7
mherchelComment #8
bernardm28 commentedLooks good passed all the https://github.com/mherchel/ddev-drupal-admin-vrt and visual inspection.
There was only one mini bug that kept coming up.
The edit button under operations loses its right inner border.
Before
After
The edit button under operations loses its right inner border.
Comment #9
mherchelGreat catch! I was initially unable to reproduce this... until I enabled aggregation.
So there's something happening with aggregation that's causing this. Investigating.
Comment #10
mherchelactually this issue looks like it's being caused by #3614911: JS aggregation returns 400 for libraries loaded in the header only as dependencies.
JS isn't adding the action button and classes when aggregation is on.
Still investigating.
Comment #11
mherchelHuddled w @bernardm28 and verified his issue is #3614911: JS aggregation returns 400 for libraries loaded in the header only as dependencies.
He will re-test with aggregation disabled.
Comment #12
bernardm28 commentedRetested this issue and can confirm is related to the aggregation issue above. The chevrones disappearing on the dropdowns are all related to that. Since thats outside the scope of this issue. I'm setting this to RTBC.
Comment #13
bernardm28 commentedComment #14
larowlanDid some manual testing in main w/ default_admin as admin theme - can't see any obvious regressions
Comment #17
larowlanCommitted and pushed 701c6cd1a15 to main and 066a18388a4 to 11.x. Thanks!
Setting to Needs work for creating follow ups for other items in my review - discussed with @mherchel in slack.
Please move to fixed once they're created/linked @mherchel 🎉
Comment #18
mherchelOpened followups:
Comment #19
mherchelDone! Thank you!
Comment #21
mherchelFiguring out if we can backport to 11.4.x.
My thought process is we need contrib maintainers to update their modules to support Admin theme's new dark mode (which this MR provides a bunch of CSS variables to make this easy). This can't happen if they can't test it until December.
Comment #23
mherchel