CSS Layering Refactor

[amadeus]

The goal of this commit is to rework the CSS colormixing of background colors in a way that's more powerful and flexible for the different cases.

It also adds future support for the decorations API.

Basicaly I wanted to get this change in now because it does fix some issues and the unused CSS shouldn't really matter much until decorations get shipped

@mdo if you want to poke around on this and make sure you are happy with the results, also if you have potential changes on certain color mixing architecture as well, let me know (or contribute and we can chat further)

To learn more about it:

AI Summary

• Reworked diff styling around a staged background pipeline instead of one-off final background colors.
• Backgrounds now compose in order: base surface -> decoration/annotation/conflict backdrop -> diff state tint -> selection tint -> hover tint.
• This makes selection and hover work consistently on top of additions, deletions, merge conflicts, gutters, and annotations instead of overriding them with unrelated colors.
• Merge conflict rows now use the same mixing model as normal diff rows, with a smaller set of override points.
• Added CSS scaffolding for future decorations support, including depth-aware background mixing and decoration side bars.
• Updated docs to reflect that selection overrides now act as tints mixed into the current row and gutter background, rather than separate fixed selection background layers.

AI Architecture Summary

This refactor changes diff backgrounds from a large set of hardcoded per-state colors into a staged CSS composition pipeline. Each row now starts from the base surface, can layer in an optional decoration, annotation, or conflict background, then mixes in diff state such as addition, deletion, or conflict current/incoming, then applies selection tint, and finally applies hover.

Because each stage feeds the next through computed CSS variables, selection and hover now compose on top of the existing row background instead of replacing it. That makes the behavior consistent across normal lines, gutters, annotations, merge conflicts, and future decoration rows.

The new architecture also adds depth-aware CSS hooks for the upcoming decorations API, so nested background decorations and side bars can plug into the same pipeline without needing a separate styling system.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
pierrejs-diff-demo	Ready	Preview	Apr 21, 2026 10:14pm
pierrejs-docs	Ready	Preview	Apr 21, 2026 10:14pm

[amadeus]

@codex

[amadeus]

We are removing some of these manual overrides, because it doesn't make sense in the new color-mixed world.

Also theoretically one could override the css mixing variables if they wanted too, but i didn't really want to document that currently and would rather we wait and see if people complain/ask for this stuff.

[amadeus]

This also adds bar stuff that is mostly not used at the moment, which i will be iterating on in the decorations branch, just wanted these changes in main and wanted to not try and hack up the css more just to get this merged.

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 19f8081ee6

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".