Problem/Motivation
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.
Steps to reproduce
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.
Audit
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.
🔴 Zero usage — fully dead (26)
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.
🟠 Used only by other tokens (OUTSIDE = 0, TOTAL ≥ 1) — inline candidates
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.
🟡 Low direct usage (OUTSIDE 1–2) — worth a look
| 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 |
Testing instructions
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
Issue fork drupal-3606571
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:
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
mherchel