refactor: JDS typography color를 변수 주입 방식으로 변경

[Zero-1016]

개요

getLabelClassName / getTitleClassName이 적용된 엘리먼트에서 색을 변경할 때, 같은 엘리먼트에 color:를 직접 선언하던 부분을 CSS 변수(labelColorVar) 주입 방식으로 변경합니다.

배경

typography recipe(label/title)의 base는 color: fallbackVar(labelColorVar, default)(명시도 (0,1,0))로 색을 정합니다. 소비자가 같은 엘리먼트에 color:를 또 선언하면 (0,1,0) 동점이 되어, 승자가 CSS extraction/import 순서에 종속되는 fragile한 상태가 됩니다. (VE가 media query를 파일 끝에 강제 배치하는 것과 같은 이유)

→ recipe는 타이포만 책임지고, 색은 소비자가 labelColorVar에 주입하도록 하여 동점 자체를 제거합니다.

변경 사항

JDS 컴포넌트를 전수 점검하여 color: 직접 지정으로 동점이 발생하던 vanilla-extract 소비자를 변수 주입으로 전환했습니다.

• Tooltip — content
• Steps — stepsLabel activated 변형
• ContentBadge — label
• NumericBadge — label

검증

• tsc -b --noEmit ✅
• eslint --max-warnings 0 ✅

참고

• 관련 논의 쓰레드

• 장기적으로 getLabelClassName({ color }) 같은 공개 API화 / CSS @layer 도입도 검토 가능하나, VE layer 추적 이슈(#1112)가 미해결이라 본 PR은 fallbackVar 방식으로 처리합니다.

closes #476

Summary by CodeRabbit

릴리스 노트

• Refactor
  • 색상 관리를 CSS 변수 기반으로 전환하여 컴포넌트 간 일관된 스타일 처리 구현
  • 여러 컴포넌트의 색상 적용 방식을 표준화하여 유지보수성 및 확장성 개선

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
ject-official-web-site-client-web	Ready	Preview, Comment	Jun 18, 2026 1:24pm

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 7bdd0615-0e9f-4f78-adff-e8f53ccac581

📥 Commits

Reviewing files that changed from the base of the PR and between 277b9ca and 2f00b32.

📒 Files selected for processing (5)

• packages/jds/src/components/Badge/contentBadge/contentBadge.css.ts
• packages/jds/src/components/Badge/numericBadge/numericBadge.css.ts
• packages/jds/src/components/Steps/steps.css.ts
• packages/jds/src/components/Tooltip/tooltip.css.ts
• packages/jds/src/utils/typography.css.ts

---

Walkthrough

typography.css.ts에 fallbackVar와 titleColorVar를 추가하고, label 및 title recipe의 색상을 CSS 변수 fallback 방식으로 전환한다. Badge(content·numeric), Steps, Tooltip 컴포넌트의 텍스트 색상 지정도 직접 color 할당에서 labelColorVar CSS 변수 매핑 방식으로 일괄 변경한다.

Changes

CSS 변수 기반 색상 주입 리팩토링

Layer / File(s)	Summary
typography fallbackVar 및 titleColorVar 도입 packages/jds/src/utils/typography.css.ts	fallbackVar를 import 추가, label recipe의 base.color를 fallbackVar(labelColorVar, bold) 방식으로 변경하고, titleColorVar를 createVar()로 신규 export하여 title recipe의 base.color도 fallbackVar(titleColorVar, bolder) 기반으로 전환함.
Badge·Steps·Tooltip의 labelColorVar 매핑 적용 packages/jds/src/components/Badge/contentBadge/contentBadge.css.ts, packages/jds/src/components/Badge/numericBadge/numericBadge.css.ts, packages/jds/src/components/Steps/steps.css.ts, packages/jds/src/components/Tooltip/tooltip.css.ts	각 컴포넌트에서 labelColorVar import 추가 후, label/content/stepsLabel 스타일의 color 직접 지정을 vars: { [labelColorVar]: ... } CSS 변수 주입 방식으로 일괄 변경함.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• JECT-Study/JECT-Official-WebSite-Client#441: typography.css.ts의 label/title 색상 주입 계층을 조정한 이번 PR과 동일한 파일·레시피 기반을 최초 도입한 PR임.
• JECT-Study/JECT-Official-WebSite-Client#442: Tooltip content 스타일을 vanilla-extract 기반으로 재구성한 PR로, 이번 tooltip.css.ts의 labelColorVar 매핑 변경과 직접 연결됨.
• JECT-Study/JECT-Official-WebSite-Client#460: typography.css.ts에서 labelColorVar 도입 및 컴포넌트 레이블 색상 참조 변경이 이번 PR과 코드 레벨에서 직접적으로 맞닿아 있음.

Suggested labels

♻refactor

Suggested reviewers

• areumH
• WonJuneKim
• ccconac

Poem

🐇 토끼가 CSS 변수를 심었어요,
labelColorVar에 색을 담아—
fallbackVar로 안전망도 쳤죠,
Badge, Steps, Tooltip 모두 한 줄로!
이제 색은 변수가 책임진답니다 🎨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	PR 제목이 변경 사항의 핵심을 명확하게 반영합니다. 'JDS typography 색상을 변수 주입 방식으로 변경'이라는 설명은 이 PR의 주요 목표인 CSS 변수 기반 색상 관리로의 리팩토링을 정확히 요약합니다.
Description check	✅ Passed	PR 설명이 변경 사항의 배경, 구현 내용, 검증 결과를 포함하여 충분히 상세합니다. 다만 제공된 템플릿의 '작업 내용', '셀프 체크리스트', 'Reviewers 등록' 항목이 명시적으로 체크되지 않았습니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch refactor/476-jds-color-defaultVar

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[ccconac]

충분히 논의 나눈 후에 진행된 작업이라, 바로 머지해도 괜찮아 보여서 승인해 둘게요.
반영 감사합니다. (__)