Skip to content

Improve gradient quality with contrast enforcement and layout-aware geometry#35

Merged
peelar merged 4 commits into
mainfrom
feat/improve-gradient-quality
Dec 18, 2025
Merged

Improve gradient quality with contrast enforcement and layout-aware geometry#35
peelar merged 4 commits into
mainfrom
feat/improve-gradient-quality

Conversation

@peelar

@peelar peelar commented Dec 18, 2025

Copy link
Copy Markdown
Owner

Summary

  • Add chromatic contrast enforcement to prevent muddy gradients (enforces min hue/luminance delta)
  • Apply layout-specific gradient geometry at render time - no regeneration when switching layouts
  • Inject warm/cool bias for truly neutral palettes
  • Stricter accent thresholds to avoid picking UI neutrals as gradient colors

Test plan

  • Upload a neutral/grayscale screenshot - should produce gradient with color bias
  • Upload a low-contrast screenshot - should produce gradient with visible separation
  • Switch between Spotlight, Peak, and Backdrop layouts - geometry should change instantly without regenerating colors

…eometry

- Add enforceColorSeparation() to ensure minimum hue/luminance delta between gradient stops
- Apply layout-specific gradient geometry at render time (radial for Spotlight, linear for Peak)
- Inject warm/cool bias for neutral palettes to prevent muddy gradients
- Increase accent detection thresholds to avoid picking UI neutrals
@vercel

vercel Bot commented Dec 18, 2025

Copy link
Copy Markdown

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

Project Deployment Review Updated (UTC)
dopeshot Ready Ready Preview, Comment Dec 18, 2025 10:12pm

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

ℹ️ 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".

Comment on lines +75 to +86
function gradientToCssWithLayout(
gradient: CustomGradient,
layoutId: string,
variant?: string
): string {
const stops = getGradientStopsString(gradient);
const geometry = getLayoutGeometry(layoutId, variant);

if (geometry.type === "radial") {
return `radial-gradient(${geometry.direction}, ${stops})`;
}
return `linear-gradient(${geometry.angle}deg, ${stops})`;

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1 Badge Respect stored gradient geometry when rendering

Rendering now ignores the geometry stored on the CustomGradient. gradientToCssWithLayout derives the angle/type solely from getLayoutGeometry, so any type, angle, or direction saved on the gradient (set by the gradient picker’s angle control or by applyPreferredAngle) is discarded. This means rotating a gradient or choosing a non-linear type in the UI no longer changes the background—layout defaults always win.

Useful? React with 👍 / 👎.

@peelar peelar merged commit 2db4ac4 into main Dec 18, 2025
3 checks passed
peelar added a commit that referenced this pull request Dec 22, 2025
Improve gradient quality with contrast enforcement and layout-aware geometry
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant