diff --git a/CHANGELOG.md b/CHANGELOG.md index 1e0a5e0..674ef8b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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-모달고정헤더푸터및배경스크롤잠금` diff --git a/package.json b/package.json index b2cbe9a..0a34bef 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/styles/token.semantic.css b/src/styles/token.semantic.css index 5e3392d..0180f4d 100644 --- a/src/styles/token.semantic.css +++ b/src/styles/token.semantic.css @@ -194,9 +194,11 @@ --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; --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); @@ -204,10 +206,12 @@ --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);