Diff view

A patch, read as a code view. Lines that start with + or - take a tint across the line and its gutter cell, and @@ marks where the hunk starts.

Basic

@@ -2,6 +2,7 @@
 :where([role="tablist"]){display:flex;flex-wrap:wrap;gap:.25rem}
-:where([data-variant="tab"]){color:var(--s72-fg-2);padding:.6rem}
+:where([data-variant="tab"]){color:var(--s72-fg-2);padding:.6rem 1rem}
+:where([data-variant="tab"][aria-selected="true"]){color:var(--s72-fg)}
 :where([role="tabpanel"]){font-size:var(--s72-s2)}

<figure>
  <figcaption>src/css/components/tabs.css</figcaption>
  <pre data-lang="diff"><code>@@ -2,6 +2,7 @@
 :where([role="tablist"]){display:flex;flex-wrap:wrap;gap:.25rem}
-:where([data-variant="tab"]){color:var(--s72-fg-2);padding:.6rem}
+:where([data-variant="tab"]){color:var(--s72-fg-2);padding:.6rem 1rem}
+:where([data-variant="tab"][aria-selected="true"]){color:var(--s72-fg)}
 :where([role="tabpanel"]){font-size:var(--s72-s2)}</code></pre>
</figure>

The + and - stay in the text, so the patch still reads where the colour is gone.

Notes

• The tints are --s72-code-add and --s72-code-del, set by every palette in both themes and measured so the code text clears 4.5:1 on them.
• Line numbers count the lines of the patch, not of the file; the @@ header carries the file's own numbers.
• Copy hands over the whole patch, markers and all, which is what git apply wants.
• No other colouring runs inside a diff: a patch spanning two languages would colour one of them wrongly.