refactor(tooltip): replace styles with design tokens

[minji0214]

Changes

• 토큰 패키지를 툴팁에 import하고 기존 하드코딩된 스타일을 토큰으로 치환시킵니다.
• 툴팁 내부에서 자주 사용하는 값들은 툴팁 내에서 선언하여 사용합니다.

Visuals

Checklist

• Have you written the functional specifications?
• Have you written the test code?

Additional Discussion Points

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

🗂️ Base branches to auto review (2)

• main
• release/v1

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 6fc57fa7-2d97-4653-baa2-e1556f591787

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch refactor/tooltip-token-css-minji0214

---

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.}

[changeset-bot]

🦋 Changeset detected

Latest commit: e42df01

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@sipe-team/tooltip	Patch
@sipe-team/side	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

Files with missing lines	Coverage Δ
packages/tooltip/src/Tooltip.css.ts	100.00% <100.00%> (ø)

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[Yeom-JinHo]

정의되지 않은 토큰이면 하드코딩하는게 좋을꺼 같아요~

spacing이라 size에 의존이 생기는게 어색합니다!

[osohyun0224]

고생많으셨습니다 bb

[G-hoon]

https://github.com/sipe-team/side/blob/main/packages/tokens/src/effects/zIndex.ts

를 보니까,

zIndex.tooltip 이 있는데. 이를 쓰면 어떨까요?

[G-hoon]

이거 색,

"#ccc" 랑 "f9f9f9" 는 따로 토큰화 하지 않고 냅두는 건가요?

[G-hoon]

const tooltipArrowSize = calc(${vars.spacing.component.md} / 2);
const tooltipArrowOffset = calc(${vars.spacing.component.md} / -2);

이거를,

const tooltipArrowSize = `calc(${vars.spacing.component.md} / 2)`;
const tooltipArrowOffset = `calc(${tooltipArrowSize} * -1)`;

처럼 바꾸는 건 어떨가요...?