Every field takes the boxes' radius

Inputs, selects and file inputs follow the textareas: --radius-box (.75rem) instead of daisyUI's --radius-field
(2rem), which stays the buttons', so a pill is something to press and a field is a box to fill. The reason sits once
above the input utility; a rounded-* class at the call site still wins (the composer's warning field keeps its joined
corners).

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:45:05 +02:00
1 parent b7ff917d8c
commit 88e55e671c
1 file changed
+12 -4
+12 -4
View File
@@ -119,8 +119,15 @@
} }
/* Text fields: a pressed well, darker while focused, with no focus ring and no border unless a colour or a failed /* Text fields: a pressed well, darker while focused, with no focus ring and no border unless a colour or a failed
validation asks for one. */ validation asks for one.
Fields (input, select, file-input, textarea) take the boxes' radius (--radius-box, .75rem). daisyUI gives them
--radius-field (2rem), which stays the buttons': a pill on a one-line field, and on a textarea a curve that ate into
its first and last lines. daisyUI reads the variable, so a rounded-* class at the call site (the composer's) still
wins. */
@utility input { @utility input {
--radius-field: var(--radius-box);
&: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));
@@ -141,6 +148,8 @@
/* daisyUI draws the select's arrow with background-image, so the well here is the background colour alone. */ /* daisyUI draws the select's arrow with background-image, so the well here is the background colour alone. */
@utility select { @utility select {
--radius-field: var(--radius-box);
&:not(:where(.select-ghost)) { &:not(:where(.select-ghost)) {
background-color: var(--color-base-100); background-color: var(--color-base-100);
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);
@@ -168,9 +177,6 @@
} }
} }
/* A field's radius (--radius-field, 2rem) makes a pill of a one-line input, but on a box several lines tall it curves
into the first and last lines: a textarea takes the boxes' radius. daisyUI reads the variable, so a rounded-* class
at the call site (the composer's) still wins. */
@utility textarea { @utility textarea {
--radius-field: var(--radius-box); --radius-field: var(--radius-box);
@@ -193,6 +199,8 @@
} }
@utility file-input { @utility file-input {
--radius-field: var(--radius-box);
&: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));