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
This commit is contained in:
thepraandClaude Opus 5.5 committed 2026-10-06 21:39:38 +02:00
1 parent 511edf3591
commit 24748168c0
1 file changed
+14
+14
View File
@@ -14,6 +14,11 @@
each one excludes the variants it must leave alone. :where() keeps those exclusions at specificity (0,1,0). 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!. 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 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. */ otherwise suppresses, and hides every collapse. DCollapse adds neo-raised in its markup instead. */
@@ -64,10 +69,12 @@
@utility neo-gradient { @utility neo-gradient {
background-image: linear-gradient(145deg, var(--neo-grad-light), var(--neo-grad-dark)); background-image: linear-gradient(145deg, var(--neo-grad-light), var(--neo-grad-dark));
background-origin: border-box;
} }
@utility neo-gradient-pressed { @utility neo-gradient-pressed {
background-image: linear-gradient(145deg, var(--neo-grad-dark), var(--neo-grad-light)); background-image: linear-gradient(145deg, var(--neo-grad-dark), var(--neo-grad-light));
background-origin: border-box;
} }
@utility neo-hue-track { @utility neo-hue-track {
@@ -92,6 +99,7 @@
--btn-bg: var(--btn-color, var(--color-base-100)); --btn-bg: var(--btn-color, var(--color-base-100));
--btn-border: transparent; --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-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); box-shadow: -3px -3px 6px var(--neo-light), 3px 3px 6px var(--neo-dark);
&:where(:focus-visible) { &:where(:focus-visible) {
@@ -116,6 +124,7 @@
&:not(:where(.input-ghost)) { &:not(:where(.input-ghost)) {
background-color: var(--color-base-100); background-color: var(--color-base-100);
background-image: linear-gradient(145deg, var(--neo-grad-dark), var(--neo-grad-light)); 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); box-shadow: inset 2px 2px 4px var(--neo-dark), inset -2px -2px 4px var(--neo-light);
&:focus, &:focus-within { &:focus, &:focus-within {
@@ -163,6 +172,7 @@
&:not(:where(.textarea-ghost)) { &:not(:where(.textarea-ghost)) {
background-color: var(--color-base-100); background-color: var(--color-base-100);
background-image: linear-gradient(145deg, var(--neo-grad-dark), var(--neo-grad-light)); 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); box-shadow: inset 2px 2px 4px var(--neo-dark), inset -2px -2px 4px var(--neo-light);
&:focus, &:focus-within { &:focus, &:focus-within {
@@ -181,6 +191,7 @@
&:not(:where(.file-input-ghost)) { &:not(:where(.file-input-ghost)) {
background-color: var(--color-base-100); background-color: var(--color-base-100);
background-image: linear-gradient(145deg, var(--neo-grad-dark), var(--neo-grad-light)); 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); 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)) { &:not(:where(:checked, :indeterminate, [aria-checked="true"], [aria-checked="mixed"], :disabled)) {
border-color: transparent; border-color: transparent;
background-image: linear-gradient(145deg, var(--neo-grad-dark), var(--neo-grad-light)); 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); 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)) { &:not(:where(:checked, [aria-checked="true"], :disabled)) {
border-color: transparent; border-color: transparent;
background-image: linear-gradient(145deg, var(--neo-grad-dark), var(--neo-grad-light)); 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); box-shadow: inset 2px 2px 4px var(--neo-dark), inset -2px -2px 4px var(--neo-light);
} }
} }
@@ -210,6 +223,7 @@
&:not(:where(:disabled)) { &:not(:where(:disabled)) {
border-color: transparent; border-color: transparent;
background-image: linear-gradient(145deg, var(--neo-grad-dark), var(--neo-grad-light)); 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); box-shadow: inset 2px 2px 4px var(--neo-dark), inset -2px -2px 4px var(--neo-light);
&::before { &::before {