Skip to content
install

diagnostic · one of 39 Pro copies the diff and the PR body

Patches

Which hard-coded colours should be tokens, and what is the edit?

Finding the drift is the easy half; the work is writing the change. This reads every colour declaration in the stylesheets the browser will let it read, matches each against the token file you pasted, and writes the near misses as a diff. Only a value close enough to be invisible is patched - anything further off is reported with its distance instead, because proposing a token for it would be a re-colour dressed as a cleanup.

Reach it Press + K on any tab and type patches. Ctrl + K on Windows and Linux

A colour off the system, and the one line that puts it back
reads colour declarations in readable sheets
needs a token file, pasted on Conformance
patches only differences close to invisible
writes nothing to the page
sends nothing
diff, PR body pro
section#about

What this actually is

When a design system exists and the page has drifted off it, and before a refactor that will move colours around. It says nothing until it has a system to compare against, so paste the token file first.

section#asked

Asked about this diagnostic

Why does the diff name a selector instead of a line?

Because the sheet the browser parsed is not the file on disk. A line number would be confidently wrong after any build step; the selector and the property are the part that survives minification, concatenation and source order.

Why was an obviously wrong colour left unpatched?

Because it is far enough from every token that swapping it would change the design. Those land in Off the system with their distance printed, which is a conversation rather than an edit.

What about the stylesheets it could not read?

They are counted, not guessed at. A sheet served from another origin is not exposed to an extension, and the count of read versus total is on the screen so you know how much of the page the diff covers.

how to use patches

  1. Paste your token file on UI, Extract, Conformance first - there is nothing to match against without it.
  2. Open Patches. Every readable stylesheet is scanned for colour declarations.
  3. Read the hunks by sheet: each names the selector and the property, never a line number.
  4. Check the Off the system list too - those are decisions, reported with their distance.