Skip to content

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

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
Merged

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

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
745429a
fix: 모달제목타이포토큰누락보완
youngduck Jul 21, 2026
25e8894
chore: v0.21.2버전범프
youngduck Jul 21, 2026
5e9c60c
docs: v0.21.2 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
10 changes: 10 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,13 @@
## [0.21.2] - 2026-07-21

**Branch**: `ui-v0.21.2-모달제목타이포적용`
### 수정
- fix: 모달제목타이포토큰누락보완

### 변경
- chore: v0.21.2버전범프

---
## [0.21.1] - 2026-07-21

**Branch**: `ui-v0.21.1-Tabs디자인개편`
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.21.1",
"version": "0.21.2",
"type": "module",
"main": "./dist/index.cjs.js",
"module": "./dist/index.esm.js",
Expand Down
4 changes: 2 additions & 2 deletions src/components/Overlays/Modal/Modal.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const ModalPlayground = () => {
modalOpen({
config: {
size: 'sm',
title: <span className="text-yds-s1 text-white">모달 제목</span>,
title: '모달 제목',
footer: onClose => (
<Button size="full" variant="outlined" color="primary" onClick={onClose}>
닫기
Expand Down Expand Up @@ -152,7 +152,7 @@ const ModalStickyDemo = () => {
modalOpen({
config: {
size: 'md',
title: <span className="text-yds-s1 text-white">고정 제목 영역</span>,
title: '고정 제목 영역',
footer: onClose => (
<div className="flex gap-2">
<Button size="full" variant="outlined" color="primary" onClick={onClose}>
Expand Down
5 changes: 5 additions & 0 deletions src/styles/token.components/token.components.modal.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,11 @@

.yds-modal-title {
margin: 0;
font-size: var(--font-size-yds-s1);
line-height: var(--line-height-yds-s1);
font-weight: var(--font-weight-yds-s1);

@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

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

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

font-family: var(--font-yds-wanted);
color: var(--color-white);

@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

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

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

}

/* 스크롤되는 본문 영역 */
Expand Down
Loading