[FEATURE] Tooltip 디자인 토큰 적용

[minji0214]

개요

Tooltip.css.ts에서 하드코딩된 색상, 간격, 타이포그래피 값을 @sipe-team/tokens의 vars로 교체합니다.

배경

현재 Tooltip은 디자인 토큰을 사용하지 않고 하드코딩된 값을 사용합니다. Button, Chip 등 다른 컴포넌트들은 vars를 통해 토큰을 참조합니다.

// 현재
backgroundColor: '#000000',
borderRadius: '8px',
fontSize: '12px',
zIndex: 1000,

// 목표
backgroundColor: vars.color.foreground,
borderRadius: vars.radius.md,
fontSize: vars.typography.fontSize['100'],
zIndex: vars.zIndex.tooltip,

선행 작업

• @sipe-team/tokens에 zIndex.tooltip 등 필요한 토큰이 추가되어야 합니다.

작업 범위

• Tooltip.css.ts의 모든 하드코딩 값을 vars로 교체
• tooltipStyle prop으로 backgroundColor를 CSS 변수(--tooltip-bg-color)로 넘기는 방식 검토