From 88e55e671c6a257273366e7223bf5f3af01c94b6 Mon Sep 17 00:00:00 2001 From: thepra Date: Tue, 6 Oct 2026 21:45:05 +0200 Subject: [PATCH] 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 Claude-Session: https://claude.ai/code/session_01LsXgEaXee4GCU1hwYgPJXw --- Styles/neo.css | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/Styles/neo.css b/Styles/neo.css index 8e9eedf..194144a 100644 --- a/Styles/neo.css +++ b/Styles/neo.css @@ -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 - 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 { + --radius-field: var(--radius-box); + &:not(:where(.input-ghost)) { background-color: var(--color-base-100); 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. */ @utility select { + --radius-field: var(--radius-box); + &:not(:where(.select-ghost)) { background-color: var(--color-base-100); 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 { --radius-field: var(--radius-box); @@ -193,6 +199,8 @@ } @utility file-input { + --radius-field: var(--radius-box); + &:not(:where(.file-input-ghost)) { background-color: var(--color-base-100); background-image: linear-gradient(145deg, var(--neo-grad-dark), var(--neo-grad-light));