UI v0.21.2 모달제목타이포적용

[youngduck]

개요

0.20.1에서 추가한 모달 고정 헤더의 제목(title)에 타이포그래피 토큰이 누락돼 있던 버그를 수정합니다.

문제

• .yds-modal-title에 margin: 0만 있어 title이 브라우저 기본 h2 로 렌더됨
• 스토리에서는 title을 <span className="text-yds-s1 text-white">로 감싸 소비자 쪽에서 폰트를 입혔던 탓에 문제가 가려져 있었음 → title: '문자열'처럼 쓰면 스타일 없이 나옴

수정

• .yds-modal-title에 ConfirmDialog 제목과 동일한 s1 타이포 토큰 적용
  • font-size / line-height / font-weight → --*-yds-s1
  • font-family → --font-yds-wanted, color → --color-white
• 스토리의 수동 span 래핑 제거 → 문자열 title로 정리해 컴포넌트 자체 스타일이 드러나게 함

커밋 구성

1. fix: 모달제목타이포토큰누락보완
2. chore: v0.21.2버전범프
3. docs: v0.21.2 CHANGELOG갱신

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
yd-ui	Ready	Preview, Comment	Jul 21, 2026 8:08am

[gemini-code-assist]

Code Review

This pull request bumps the package version to 0.21.2 and refactors the modal title styling. The modal title in the stories has been simplified from a JSX element to a plain string, and the corresponding typography styles (font-size, line-height, font-weight, font-family, and color) have been moved directly into the .yds-modal-title CSS class. The review feedback suggests two improvements: using a common font-weight token instead of a potentially non-existent size-specific weight token, and replacing the primitive --color-white token with a semantic text color token to support future theme extensions.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[gemini-code-assist]

일반적으로 디자인 시스템에서 폰트 두께(font-weight)는 개별 타이포그래피 크기 토큰(예: s1, s2)마다 고유한 토큰을 생성하기보다, 공통 굵기 토큰(예: --font-weight-bold 또는 --font-weight-yds-bold 등)을 정의하여 재사용합니다.

만약 --font-weight-yds-s1 토큰이 실제로 존재하지 않는다면 폰트 두께가 기본값으로 초기화될 수 있으므로, 프로젝트의 공통 굵기 토큰(예: var(--font-weight-yds-bold) 등)이 정의되어 있다면 이를 적용하는 것을 권장합니다.

[gemini-code-assist]

현재 모달 제목의 색상으로 프리미티브(Primitive) 토큰인 var(--color-white)를 직접 사용하고 있습니다.

디자인 시스템의 일관성을 유지하고 향후 다크 모드/라이트 모드 등 테마 확장을 고려할 때, 프리미티브 토큰 대신 시맨틱(Semantic) 텍스트 컬러 토큰(예: var(--color-text-primary) 등)을 사용하는 것이 유지보수 측면에서 더 안전합니다.