From 24748168c0c8771c0e46caa989c191e417a5d0f6 Mon Sep 17 00:00:00 2001
From: thepra <thepra@pm.me>
Date: Tue, 6 Oct 2026 21:39:38 +0200
Subject: [PATCH] Controls lose the seam along their edges

daisyUI keeps a 1px border on its controls, which the neo layer makes transparent, and paints their gradient as a
background image. A background image starts at the padding box and repeats, so the border strip showed the gradient's
far end: a thin seam along each button's, field's and selector's edges, as if it sat in a second frame (most visible on
the nav menu's pills in the dark theme). The gradients are now painted from the border box, on buttons, inputs,
textareas, file inputs, checkboxes, radios, toggles and the neo-gradient utilities. Checked by rendering each control
in both themes at 4x.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LsXgEaXee4GCU1hwYgPJXw
---
 Styles/neo.css | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/Styles/neo.css b/Styles/neo.css
index 15b0e21..8aec87b 100644
--- a/Styles/neo.css
+++ b/Styles/neo.css
@@ -14,6 +14,11 @@
    each one excludes the variants it must leave alone. :where() keeps those exclusions at specificity (0,1,0).
    To drop a neo shadow at a call site use shadow-none! or neo-flat!.
 
+   A gradient on a control is painted from its border box (background-origin: border-box). daisyUI keeps a 1px border
+   on its controls, made transparent here, and a background image starts at the padding box and repeats into the
+   border: the strip then showed the far end of the gradient, a thin seam along the edges, as if the control sat in a
+   second frame.
+
    Never write @utility collapse: it brings back Tailwind's own collapse utility (visibility: collapse), which daisyUI
    otherwise suppresses, and hides every collapse. DCollapse adds neo-raised in its markup instead. */
 
@@ -64,10 +69,12 @@
 
 @utility neo-gradient {
 	background-image: linear-gradient(145deg, var(--neo-grad-light), var(--neo-grad-dark));
+	background-origin: border-box;
 }
 
 @utility neo-gradient-pressed {
 	background-image: linear-gradient(145deg, var(--neo-grad-dark), var(--neo-grad-light));
+	background-origin: border-box;
 }
 
 @utility neo-hue-track {
@@ -92,6 +99,7 @@
 		--btn-bg: var(--btn-color, var(--color-base-100));
 		--btn-border: transparent;
 		background-image: linear-gradient(145deg, color-mix(in oklab, var(--btn-bg), white var(--neo-lift)), color-mix(in oklab, var(--btn-bg), black var(--neo-sink)));
+		background-origin: border-box;
 		box-shadow: -3px -3px 6px var(--neo-light), 3px 3px 6px var(--neo-dark);
 
 		&:where(:focus-visible) {
@@ -116,6 +124,7 @@
 	&:not(:where(.input-ghost)) {
 		background-color: var(--color-base-100);
 		background-image: linear-gradient(145deg, var(--neo-grad-dark), var(--neo-grad-light));
+		background-origin: border-box;
 		box-shadow: inset 2px 2px 4px var(--neo-dark), inset -2px -2px 4px var(--neo-light);
 
 		&:focus, &:focus-within {
@@ -163,6 +172,7 @@
 	&:not(:where(.textarea-ghost)) {
 		background-color: var(--color-base-100);
 		background-image: linear-gradient(145deg, var(--neo-grad-dark), var(--neo-grad-light));
+		background-origin: border-box;
 		box-shadow: inset 2px 2px 4px var(--neo-dark), inset -2px -2px 4px var(--neo-light);
 
 		&:focus, &:focus-within {
@@ -181,6 +191,7 @@
 	&:not(:where(.file-input-ghost)) {
 		background-color: var(--color-base-100);
 		background-image: linear-gradient(145deg, var(--neo-grad-dark), var(--neo-grad-light));
+		background-origin: border-box;
 		box-shadow: inset 2px 2px 4px var(--neo-dark), inset -2px -2px 4px var(--neo-light);
 	}
 
@@ -194,6 +205,7 @@
 	&:not(:where(:checked, :indeterminate, [aria-checked="true"], [aria-checked="mixed"], :disabled)) {
 		border-color: transparent;
 		background-image: linear-gradient(145deg, var(--neo-grad-dark), var(--neo-grad-light));
+		background-origin: border-box;
 		box-shadow: inset 2px 2px 4px var(--neo-dark), inset -2px -2px 4px var(--neo-light);
 	}
 }
@@ -202,6 +214,7 @@
 	&:not(:where(:checked, [aria-checked="true"], :disabled)) {
 		border-color: transparent;
 		background-image: linear-gradient(145deg, var(--neo-grad-dark), var(--neo-grad-light));
+		background-origin: border-box;
 		box-shadow: inset 2px 2px 4px var(--neo-dark), inset -2px -2px 4px var(--neo-light);
 	}
 }
@@ -210,6 +223,7 @@
 	&:not(:where(:disabled)) {
 		border-color: transparent;
 		background-image: linear-gradient(145deg, var(--neo-grad-dark), var(--neo-grad-light));
+		background-origin: border-box;
 		box-shadow: inset 2px 2px 4px var(--neo-dark), inset -2px -2px 4px var(--neo-light);
 
 		&::before {