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.
How to read it
- TOTAL — all
var()references in the theme's.pcss.cssfiles. - OUTSIDE — references in actual components/layout (excludes the
_variables/dir, where tokens reference each other). OUTSIDE = 0withTOTAL > 0means "only consumed by other tokens, never used directly by a component."
Counts exclude compiled .css twins and use var() boundary matching
(so --blue-50 is not matched by --blue-500). Verified: no
space-after-paren (var( --x )) usages and no .pcss.css outside css/.
🔴 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 |
🟢 Heavily / moderately used — keep
| TOTAL | OUTSIDE | Variable |
|---|---|---|
| 81 | 78 | --admin-color-border |
| 77 | 72 | --admin-color-text |
| 49 | 48 | --admin-color-bg-surface |
| 43 | 43 | --admin-color-text-soft |
| 28 | 28 | --admin-color-bg-surface-nested |
| 24 | 22 | --admin-color-error |
| 22 | 19 | --admin-color-bg-raised |
| 21 | 20 | --admin-color-text-on-primary |
| 20 | 17 | --admin-color-focus |
| 17 | 14 | --admin-color-link |
| 15 | 15 | --admin-color-text-loud |
| 13 | 13 | --admin-color-border-soft |
| 13 | 12 | --admin-color-bg-input |
| 11 | 5 | --admin-color-white |
| 9 | 9 | --admin-color-border-input |
| 8 | 8 | --admin-color-text-disabled |
| 7 | 7 | --admin-color-bg-disabled |
| 7 | 7 | --admin-color-focus-border |
| 7 | 7 | --admin-color-success |
| 7 | 7 | --admin-color-warning |
| 6 | 6 | --admin-color-bg-header |
| 6 | 6 | --admin-shadow-2 |
| 5 | 5 | --admin-color-bg-sunken |
| 5 | 5 | --admin-color-border-disabled |
| 5 | 5 | --admin-color-icon |
| 5 | 5 | --admin-shadow-1 |
| 4 | 4 | --admin-color-text-error |
| 3 | 3 | --admin-color-border-table |
| 3 | 3 | --admin-color-link-hover |
Full table (sorted by TOTAL)
| TOTAL | OUTSIDE | Variable |
|---|---|---|
| 0 | 0 | --admin-color-blue-020 |
| 0 | 0 | --admin-color-blue-070 |
| 0 | 0 | --admin-color-blue-100 |
| 0 | 0 | --admin-color-blue-200 |
| 0 | 0 | --admin-color-blue-400 |
| 0 | 0 | --admin-color-blue-500 |
| 0 | 0 | --admin-color-blue-800 |
| 0 | 0 | --admin-color-blue-900 |
| 0 | 0 | --admin-color-contextual |
| 0 | 0 | --admin-color-gray-025 |
| 0 | 0 | --admin-color-gray-050 |
| 0 | 0 | --admin-color-gray-200-o-80 |
| 0 | 0 | --admin-color-gray-600 |
| 0 | 0 | --admin-color-info |
| 0 | 0 | --admin-color-red-020 |
| 0 | 0 | --admin-color-red-050 |
| 0 | 0 | --admin-color-red-070 |
| 0 | 0 | --admin-color-red-100 |
| 0 | 0 | --admin-color-red-200 |
| 0 | 0 | --admin-color-red-300 |
| 0 | 0 | --admin-color-red-400 |
| 0 | 0 | --admin-color-red-500 |
| 0 | 0 | --admin-color-red-600 |
| 0 | 0 | --admin-color-red-700 |
| 0 | 0 | --admin-color-red-800 |
| 0 | 0 | --admin-color-red-900 |
| 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 |
| 1 | 0 | --admin-shadow-color-4 |
| 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 |
| 2 | 0 | --admin-color-gray-100 |
| 2 | 0 | --admin-color-gray-700 |
| 2 | 0 | --admin-shadow-color-1 |
| 2 | 0 | --admin-shadow-color-2 |
| 2 | 0 | --admin-shadow-color-3 |
| 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 |
| 3 | 3 | --admin-color-border-table |
| 3 | 3 | --admin-color-link-hover |
| 4 | 0 | --admin-color-gray-200 |
| 4 | 1 | --admin-color-gray-500 |
| 4 | 1 | --admin-color-gray-950 |
| 4 | 4 | --admin-color-text-error |
| 5 | 1 | --admin-color-gray-800 |
| 5 | 5 | --admin-color-bg-sunken |
| 5 | 5 | --admin-color-border-disabled |
| 5 | 5 | --admin-color-icon |
| 5 | 5 | --admin-shadow-1 |
| 6 | 6 | --admin-color-bg-header |
| 6 | 6 | --admin-shadow-2 |
| 7 | 7 | --admin-color-bg-disabled |
| 7 | 7 | --admin-color-focus-border |
| 7 | 7 | --admin-color-success |
| 7 | 7 | --admin-color-warning |
| 8 | 8 | --admin-color-text-disabled |
| 9 | 9 | --admin-color-border-input |
| 11 | 5 | --admin-color-white |
| 13 | 12 | --admin-color-bg-input |
| 13 | 13 | --admin-color-border-soft |
| 15 | 15 | --admin-color-text-loud |
| 17 | 14 | --admin-color-link |
| 20 | 17 | --admin-color-focus |
| 21 | 20 | --admin-color-text-on-primary |
| 22 | 19 | --admin-color-bg-raised |
| 24 | 22 | --admin-color-error |
| 28 | 28 | --admin-color-bg-surface-nested |
| 43 | 43 | --admin-color-text-soft |
| 49 | 48 | --admin-color-bg-surface |
| 77 | 72 | --admin-color-text |
| 81 | 78 | --admin-color-border |
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
mherchel