feat(input): Enlarge the size scale and drop the control shadow (v1.8.2) - #53
Open
woody-uiux wants to merge 2 commits into
Open
woody-uiux wants to merge 2 commits into
woody-uiux wants to merge 2 commits into
Conversation
Move every Input size up one step in height and rounding and two steps in horizontal padding: the default control is now 40px tall with 14px of inner padding and a 10px radius, matching the desktop text field in Karrot's Seed. Textarea follows the same padding and rounding so a form mixing the two keeps one edge. Its minimum heights are unchanged. Drop shadow-xs from Input, Textarea, InputGroup, NativeSelect, Select and Checkbox. The border alone carries a field, and the shadow made every control float above the surface behind it. Remove rounded-[min(var(--radius-md),8px)] and its 10px twin from the xs and sm sizes. Both collapse to the base radius, so the expression never did anything. Add data-size to Input and Textarea so a size can be targeted without repeating the variant list. Claude-Session: https://claude.ai/code/session_01ADsw5yhJV1xGhRkUpfAY83
Keep every Input height as it was -- 24 / 32 / 36 / 40 / 44 / 52px -- so the components built around the h-9 default stay aligned. Only padding-x and border-radius change in this PR; heights come back with the size scale work. Claude-Session: https://claude.ai/code/session_01ADsw5yhJV1xGhRkUpfAY83
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
바뀐 것
Input의
padding-x를 두 단계,border-radius를 한 단계 키웠습니다. Textarea도 같은padding-x와border-radius를 따라갑니다. Textarea의min-height는 그대로입니다.height는 리뷰 의견대로 전부 원래대로 두었습니다.h-9기준에 맞춰 만들어진 컴포넌트들이 함께 정리된 뒤에 다시 보겠습니다.함께 정리한 것:
shadow-xs를 걷어냈습니다. 테두리만으로 입력칸이 충분히 읽히고, 그림자는 컨트롤을 바닥에서 떠 보이게 했습니다.xs,sm에 있던rounded-[min(var(--radius-md),8px)]과 10px 짝을 지웠습니다. 둘 다 기본 모서리 값으로 계산돼서 아무 일도 하지 않던 식입니다.data-size를 붙였습니다. 변형 목록을 다시 적지 않고도 특정 크기만 겨냥할 수 있습니다.남아 있는 문제
input-input-group예시에서 보이는 테두리 상자는 Input이 아니라InputGroup입니다.height,border-radius,padding을 바깥 상자가 갖고 안쪽 Input은 테두리 없이 들어가는데, 그 값이 Input의 것을 손으로 베낀 사본입니다 —h-9 / h-8 / h-6 / h-10 / h-11 / h-13,rounded-md / rounded-lg / rounded-xl.NativeSelect,Select,Button도 같은 값을 각자 베껴 쓰고 있습니다. 이번에height를 원복한 이유이기도 합니다 — 한 곳만 올리면 나머지가 그대로 남습니다.폼 컨트롤의 size scale이 한 곳에 정의되지 않고 다섯 컴포넌트에 흩어져 있는 게 원인입니다. InputGroup이 어긋난 것, 죽은
min()식이 오래 살아남은 것,sm·default·lg가height말고는 완전히 같아진 것이 전부 여기서 나옵니다.여섯 단계의
height,padding-x,border-radius,font-size를 기존 토큰처럼globals.css에 한 번만 정의하고 여섯 컴포넌트가 그것을 참조하는 방향이면 좋겠습니다. 색과--radius는 이미 그렇게 되어 있으니 새 방식을 들이는 것은 아닙니다.그때
sm,default,lg도 함께 봐주세요.height만 4px씩 다르고padding-x,border-radius,font-size가 전부 같아서, 세 단계가 각자 자리를 차지할 만한지 의문입니다.확인
bun test130개 통과 ·bun run build정상, 정적 내보내기 검증 완료 · 변경 후 모든 size를 브라우저에서 직접 측정