feat(theme): radius, primitive, dimension 토큰 도입#561
Merged
Conversation
Contributor
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
Walkthroughprimitive 기반 토큰(primitive, radius, dimension) 추가와 spacing 리팩토링, origin theme·타입 통합 및 IconButton의 size/interaction 스타일·로직 변경과 관련 문서 데모 수정이 포함됩니다. Changes테마 토큰 시스템 확장
IconButton 크기·상호작용 및 문서 업데이트
🎯 3 (Moderate) | ⏱️ ~20 minutes 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Contributor
size-limit report 📦
|
Contributor
🚀 Preview
|
dididoeun
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/wds/src/components/icon-button/index.tsx (1)
60-73:⚠️ Potential issue | 🟠 Major | ⚡ Quick win반응형 size에서 interaction 높이가 동기화되지 않습니다.
Line 60-73의
getInteractionSize()는 basesize만 보고 고정 px를 반환해서,xs/sm/md/lg/xl로 size가 바뀌는 경우 interaction 영역 높이가 실제 아이콘 버튼 크기와 어긋날 수 있습니다. 이 변경은 normal variant의 터치/포커스 영역 정확도를 깨뜨립니다.calc(100% + Npx)기반으로 상대 계산을 유지하거나, breakpoint별 interaction size를 함께 계산해 전달하도록 맞춰주세요.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/wds/src/components/icon-button/index.tsx` around lines 60 - 73, getInteractionSize() currently returns fixed px values for the 'normal' variant using base sizes (small/medium/large/xlarge), which breaks alignment when the component uses responsive size tokens (xs/sm/md/lg/xl); update getInteractionSize to compute interaction height relative to the rendered button instead of hardcoded px: for 'normal' return calc(100% + Npx) variants (choose the appropriate N per size token) or map responsive size tokens (xs/sm/md/lg/xl) to corresponding calc(...) expressions so the interaction area scales with CSS size changes; ensure you modify the logic inside getInteractionSize() (handling the 'normal' case and all size values) so it returns percentage-based calc values rather than fixed pixel strings.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In `@packages/wds/src/components/icon-button/index.tsx`:
- Around line 60-73: getInteractionSize() currently returns fixed px values for
the 'normal' variant using base sizes (small/medium/large/xlarge), which breaks
alignment when the component uses responsive size tokens (xs/sm/md/lg/xl);
update getInteractionSize to compute interaction height relative to the rendered
button instead of hardcoded px: for 'normal' return calc(100% + Npx) variants
(choose the appropriate N per size token) or map responsive size tokens
(xs/sm/md/lg/xl) to corresponding calc(...) expressions so the interaction area
scales with CSS size changes; ensure you modify the logic inside
getInteractionSize() (handling the 'normal' case and all size values) so it
returns percentage-based calc values rather than fixed pixel strings.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 09fac16b-435e-476a-9a62-3b7b5694b8f8
📒 Files selected for processing (8)
docs/data/components/actions/icon-button/web.mdxpackages/wds-theme/src/theme/dimension/index.tspackages/wds-theme/src/theme/index.tspackages/wds-theme/src/theme/primitive/index.tspackages/wds-theme/src/types/index.tspackages/wds/src/components/icon-button/index.tsxpackages/wds/src/components/icon-button/style.tspackages/wds/src/components/icon-button/types.ts
✅ Files skipped from review due to trivial changes (1)
- packages/wds-theme/src/theme/primitive/index.ts
Contributor
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/wds/src/components/icon-button/style.ts (1)
33-41:⚠️ Potential issue | 🟠 Major | ⚡ Quick win
normal기본 크기에서 상호작용 높이 기본값이 스펙과 불일치합니다.Line 40의 fallback이
36px이라size미지정 시normal버튼은 아이콘 기본값(24px) 대비 상호작용 높이/반경이xlarge매핑(40px/radius[12])과 어긋납니다.제안 수정안
const getNormalInteractionHeight = (size: IconButtonProps['size']): number => { if (typeof size === 'string' && size in NORMAL_INTERACTION_HEIGHT) { return NORMAL_INTERACTION_HEIGHT[ size as keyof typeof NORMAL_INTERACTION_HEIGHT ]; } if (typeof size === 'number') return size + 12; - return 24 + 12; + return NORMAL_INTERACTION_HEIGHT.xlarge; };🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/wds/src/components/icon-button/style.ts` around lines 33 - 41, The fallback in getNormalInteractionHeight produces 36px for unspecified sizes which misaligns with the design spec; update the function to return the canonical mapping for the "normal" size instead of 24 + 12 when size is not provided or not recognized. Specifically, in getNormalInteractionHeight (and in relation to NORMAL_INTERACTION_HEIGHT and IconButtonProps['size']), replace the final fallback return with NORMAL_INTERACTION_HEIGHT['normal'] (or the equivalent lookup) so the default interaction height matches the spec's "normal" value.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In `@packages/wds/src/components/icon-button/style.ts`:
- Around line 33-41: The fallback in getNormalInteractionHeight produces 36px
for unspecified sizes which misaligns with the design spec; update the function
to return the canonical mapping for the "normal" size instead of 24 + 12 when
size is not provided or not recognized. Specifically, in
getNormalInteractionHeight (and in relation to NORMAL_INTERACTION_HEIGHT and
IconButtonProps['size']), replace the final fallback return with
NORMAL_INTERACTION_HEIGHT['normal'] (or the equivalent lookup) so the default
interaction height matches the spec's "normal" value.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 6347fa4b-9971-4b1a-9467-66d511473739
📒 Files selected for processing (2)
packages/wds/src/components/icon-button/index.tsxpackages/wds/src/components/icon-button/style.ts
💤 Files with no reviewable changes (1)
- packages/wds/src/components/icon-button/index.tsx
Sh031224
force-pushed
the
feature/dididoeun/add-tokens
branch
from
a5e6ef6 to
222b723
Compare
Sh031224
changed the title
사용처가 없어 제거. primitive[1]은 alias 소스로 유지. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- size에 'xlarge'/'large' 추가 (normal 전용) - background variant는 프리셋 없이 number만 지원 - normal interaction 크기 고정: small=24 medium=28 large=32 xlarge=40 - normal interaction border-radius를 height × 0.3 → 가장 가까운 wds-theme radius 토큰으로 매핑 - normal scale 효과 제거 (rest 크기가 시안과 일치하도록) - solid/outlined padding 1px씩 증가 (medium 10→11 small 7→8 number 6→7) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Figma "2 Typo / Grid / Number" 파일의 Dimension 컬렉션과 동기화. button medium icon (18px) 커버를 위해 primitive에 18 추가. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
스냅샷이 봇 커밋(3833d8d)으로 갱신되어 PR Test가 재실행되지 않음.
Figma "2 Typo / Grid / Number" 파일에 추가된 Primitive/28 Dimension/28과 동기화. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
CodeRabbit 지적 반영. getInteractionSize는 base size만 보고 고정 px를 반환해 xs/sm/md/lg/xl로 size가 바뀌어도 interaction 높이가 따라가지 못함. - index.tsx에서 height prop / getInteractionSize 제거 - style.ts에 interactionChildStyle 헬퍼 추가 (variant+size별 height·border-radius) - iconButtonStyle base 블록과 createResponsiveStyle 블록 양쪽에 적용 - iconButtonColorStyle에서 normal radius 계산 제거(헬퍼로 이동) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Figma "2 Typo / Grid / Number" 파일의 Dimension/12 (→ Primitive/12 alias)와 동기화. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Sh031224
force-pushed
the
feature/dididoeun/add-tokens
branch
from
222b723 to
348dbf4
Compare
Sh031224
changed the title
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This was referenced May 27, 2026
Sh031224
added a commit
that referenced
this pull request
May 28, 2026
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Sh031224 <1cktmdgh2@gmail.com>
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
2 participants
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.
Summary
theme: token 추가
2orYfqIiuFhTGXKN1GARg7)의Primitive,Spacing,Radius컬렉션을 wds-theme에 동기화합니다.packages/wds-theme/src/theme/primitive/index.ts신규 추가 — raw px 스케일 (0, 1, 2, 4, 6, 8, 10, 12, 14, 16, 20, 24, 32, 40, 48, 56, 64, 72, 80, 9999). Figma의scopes: []처리에 대응하는 alias 전용 토큰입니다.packages/wds-theme/src/theme/radius/index.ts신규 추가 —radius.{0, 4, 8, 10, 12, 14, 16, 20, 24, full}로 primitive를 alias (full = 9999px).packages/wds-theme/src/theme/spacing/index.ts를 primitive alias 구조로 리팩터.0.5: '0.5px'키는 Figma에는 없지만 하위 호환을 위해 literal로 유지.theme/index.ts의lightOriginTheme·darkOriginTheme에primitive,radius등록.types/index.ts에Primitive,Radius타입 export.border-radius가 박혀 있는 기타packages/wds/src/components/**·utils/framed-style.ts마이그레이션은 별도 PR에서 처리할 예정입니다._No Jira ticket — internal token sync
Summary by CodeRabbit