Skip to content

UI v0.21.1 Tabs디자인개편 #38

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
youngduck merged 3 commits into from
Jul 21, 2026
+19 −7
Merged

UI v0.21.1 Tabs디자인개편 #38

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5be4a42
refactor: Tabs컨트롤높이통일및배경·보더토큰정비
youngduck Jul 21, 2026
ba6ff9b
chore: v0.21.1버전범프
youngduck Jul 21, 2026
c76a5cf
docs: v0.21.1 CHANGELOG갱신
youngduck Jul 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,11 @@
## [0.21.1] - 2026-07-21

**Branch**: `ui-v0.21.1-Tabs디자인개편`
### 변경
- refactor: Tabs컨트롤높이통일및배경·보더토큰정비
- chore: v0.21.1버전범프

---
## [0.20.1] - 2026-07-21

**Branch**: `ui-v0.20.1-모달고정헤더푸터및배경스크롤잠금`
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@youngduck/yd-ui",
"version": "0.20.1",
"version": "0.21.1",
"type": "module",
"main": "./dist/index.cjs.js",
"module": "./dist/index.esm.js",
Expand Down
16 changes: 10 additions & 6 deletions src/styles/token.semantic.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -194,20 +194,24 @@
--tabs-border-radius: var(--yds-border-radius);
--tabs-item-border-radius: var(--yds-border-radius);
--tabs-item-padding-x: 16px;
--tabs-item-height-sm: 28px;
--tabs-item-height-md: 34px;
--tabs-item-height-lg: 42px;
/* 총 렌더 높이 = 아이템 높이 + 패딩(4px×2) + 보더(2px×2) = 48px 고정.
Button/Input/Calendar 트리거와 동일한 표준 컨트롤 높이 — size는 폰트 크기만 변경 */
--tabs-item-height-sm: 36px;
--tabs-item-height-md: 36px;
--tabs-item-height-lg: 36px;
Comment on lines +197 to +201

@gemini-code-assist gemini-code-assist Bot Jul 21, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

새롭게 변경된 디자인 토큰 값들이 문서 파일(ui-docs-site/components/tabs.md)에 반영되지 않았습니다.

문서의 디자인 토큰 섹션에 기재된 기존 값들(높이 28 / 34 / 42px, 배경색 secondary-300, 테두리 색상 border-divider 등)을 이번 변경 사항에 맞춰 함께 업데이트해 주셔야 문서와 실제 코드 간의 불일치를 방지할 수 있습니다.

또한, 주석의 계산식에서 보더(2px×2)로 계산하여 총 렌더 높이를 48px로 명시하셨으나, yds-tabs 컴포넌트에 적용된 보더 두께인 var(--yds-border-width)가 만약 1px라면 실제 총 렌더 높이는 46px이 됩니다 (36px + 8px + 2px = 46px).

--yds-border-width가 1px인지 혹은 실제 의도한 보더 두께가 2px인지 확인하시고, 주석의 계산식이나 토큰 설정을 일치시켜 주시기 바랍니다.

--tabs-item-height: var(--tabs-item-height-md);
--tabs-typography-font-size: var(--font-size-yds-c1m);
--tabs-typography-line-height: var(--line-height-yds-c1m);
--tabs-typography-font-weight: var(--font-weight-yds-c1m);
--tabs-typography-font-family: var(--font-yds-wanted);

/* Tabs Color Tokens (구분선 색 테두리, 선택은 노란 글자로 강조) */
--color-tabs-bg: var(--color-secondary-300);
--color-tabs-border: var(--color-border-divider);
/* Calendar 트리거·SelectBox와 동일한 패턴: 투명(검은) 배경 + 옐로우 보더.
미선택 탭은 흰색, 선택된 탭은 옐로우(primary-400) 강조 */
--color-tabs-bg: transparent;
--color-tabs-border: var(--color-border-primary-light);
--color-tabs-item-text: var(--color-white);
--color-tabs-item-text-hover: var(--color-primary-100);
--color-tabs-item-text-hover: var(--color-primary-200);
--color-tabs-item-selected-text: var(--color-primary-400);
--color-tabs-focus-ring: var(--color-white);

Expand Down
Loading