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…4 only 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

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:

Comments

mherchel created an issue. See original summary.

mherchel’s picture

I'm discovering that the variables are still a bit of a mess.

  • There are many that are not in use
  • There are many more that are 1) used only once or twice, and 2) are very similar to other variables.

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.

mherchel’s picture

Assigned: Unassigned » mherchel
mherchel’s picture

Status: Active » Needs review
mherchel’s picture

Issue summary: View changes

Updating IS

mherchel’s picture

Assigned: mherchel » Unassigned