feat(native): ease the mix between two gradient stops

[mateo-m]

Contains #1.

What this adds

An <easing-function> between two colour stops bends the mix, following the CSSWG proposal in csswg-drafts issue 1332: linear-gradient(to top, black, ease-in-out, transparent). ease, ease-in, ease-out, ease-in-out and cubic-bezier() are read.

On this branch the easing paints as the GPUI colour hint whose curve crosses one half at the same place. That matches the true curve at both ends and at the midpoint. The next branch bumps the zed pin and solves the curve per fragment in the shader, which replaces the approximation. An explicit hint in the css wins over the easing.

What I ran and saw

• cargo test at this branch: 294 passed, 0 failed. Unit tests cover the half-point search and the explicit-hint priority.
• The react suite at this branch: 415 passed, 0 failed, and that includes "eases the mix between two gradient stops".
• The demo gradients page shows the eased fall-off next to the straight one.

What I did not verify

• Windows and Linux. Every run above was on macOS. CI builds the other targets.

[Copilot]

🟡 Changes recommended

The new easing data is parsed and stored but (based on in-repo references) is not yet plumbed into the rendering path, so the PR’s stated behavior isn’t actually implemented end-to-end.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

Adds support for specifying an <easing-function> between two linear-gradient() color stops (per CSSWG proposal issue 1332), and updates the demo/tests to exercise the new syntax.

Changes:

• Parse ease* keywords and cubic-bezier() as an easing “stop” between two gradient stops in the native CSS background reader.
• Add a React renderer pixel test asserting eased vs linear mixing differences.
• Expand the demo gradients page (and demo test harness) to include easing examples, plus a new “sticky header” showcase; add a changeset for release.

File summaries

File	Description
packages/react/src/tests/styles.test.tsx	Adds a pixel-level test asserting eased mixing differs from straight interpolation.
packages/native/css/src/background.rs	Extends linear-gradient() parsing to extract and validate easing functions between stops and store them on stops.
examples/demo/gradients.tsx	Adds easing examples and a sticky-header demo using gradient easing in maskImage/backgroundImage.
examples/demo.test.tsx	Registers the gradients panel in the demo test panel list.
.changeset/eased-gradients.md	Declares minor bumps for @gpuix/native and @gpuix/react to ship the feature.

Review details

• Files reviewed: 5/5 changed files
• Comments generated: 3
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[mateo-m]

Moved to remorses#51.