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.css files.
  • OUTSIDE — references in actual components/layout (excludes the _variables/ dir, where tokens reference each other).
  • OUTSIDE = 0 with TOTAL > 0 means "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…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

🟢 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

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