🎨 refactor: Divider / Link / Inline Message / Form を Figma 準拠の新トークンへ移行（beta / #298 フェーズ2-2）

[touyou]

概要

#298 のフェーズ2。Figma に刷新済みページが存在するコンポーネントに限定して、状態内包トークンを移行します。

• base: feature/298-token-rename-stateless（♻️ refactor: 状態非依存の旧トークンを新セマンティックトークンへ置換（beta / #298 フェーズ2-1） #300 に stack。🎨 feat: 新セマンティックトークンを生成 CSS に取り込む（beta / #298 フェーズ1） #299 → ♻️ refactor: 状態非依存の旧トークンを新セマンティックトークンへ置換（beta / #298 フェーズ2-1） #300 → 本 PR の順）
• 各値は Figma の variable binding（get_variable_defs）から取得しており、推測での置換はしていません

前提: Figma 反映済みは 13 コンポーネントだけ

刷新済み Figma ファイル 7alBZXZf65YgcII41TWT0r にページがあるのは Button / Form / Icon Button / Input / Input Date / Textarea / Divider / Table / Tag / Inline Message / Modal / Link / Icon の 13 個です。Checkbox・Radio・Select・Switch・Slider・Badge・Card・Skeleton・Spinner・Dialog・Overlay・Toast・Tooltip・Tabs・Breadcrumb はページ自体が存在しない（Figma 側の更新が未マージ）ため、この PR では触っていません。

search_design_system でヒットする Card / Switch は別ライブラリの旧版（2025-11〜2026-01 更新）なので参照していません。

変更内容

Divider — 値は不変（純粋なリネーム）

旧	新	解決値
border-base-100 bg-base-100	border-border-neutral-low bg-border-neutral-low	gray-100（不変）
border-base-200 bg-base-200	border-border-neutral-middle bg-border-neutral-middle	gray-200（不変）
border-base-300 bg-base-300	border-border-neutral-high bg-border-neutral-high	gray-300（不変）

Figma 817:5329 / 5331 / 5333 が border/neutral/{low,middle,high} を bind。

Link — ⚠️ 色が変わる

Figma の「状態レベル 1 段ずれ」がそのまま出る箇所です。

対象	旧	新	色の変化
テキスト	text-info-500	text-text-primary-enabled	blue-500 → blue-600
テキスト hover	text-info-600	text-text-primary-hover	blue-600 → blue-700
外部リンクアイコン	text-info-500 / 600	text-object-primary-enabled / hover	同上

Figma 2755:24903（state=enable）/ 2755:24907（state=hover）準拠。

Inline Message — ⚠️ 一部色が変わる

status	背景	枠線	アイコン
info	surface-info-low（不変）	border-info（不変）	object-info（blue-400 → blue-600）
success	surface-success-low（不変）	border-success（不変）	object-success（green-400 → green-700）
warning	surface-warning-low（不変）	border-warning（yellow-200 → yellow-300）	object-warning（yellow-500 → yellow-700）
negative	surface-negative-middle-enabled（不変）	border-negative-high（不変）	object-negative-enabled（red-400 → red-600）

• negative の背景だけ Figma が low ではなく surface/negative/middle/enabled を bind しているので、それに従っています
• 角丸を rounded-md → rounded-notice（Figma が border-radius/notice を bind。どちらも 6px なので見た目は不変）

Figma 1266:14201 / 2784:13098 / 1266:14204 / 1266:14178 準拠。

Form — ⚠️ 色が変わる

対象	旧	新	色の変化
エラーメッセージ	text-negative-500	text-text-negative-enabled	red-500 → red-600
ヘルパーメッセージ	text-text-neutral-low	text-text-neutral-middle	gray-400 相当 → gray-600 相当

Figma 573:6321（Error Message）/ 574:10563（Helper Message）準拠。ヘルパーメッセージは置換表に無い変更ですが、Figma が text/neutral/middle を bind しているためそれに合わせています。

検証

• tsc --noEmit pass
• テスト 611 passed / 10 skipped / 19 todo（テストのアサーションも同じ表で追従）
• --radius-notice と使用した --color-* がすべて生成 CSS に存在することを確認

残り（この PR の対象外）

Figma 反映済みで未着手なのは Input / Input Date / Textarea / Tag / Table / Modal / Button / Icon Button です。Button + Icon Button は量が多い（合計 127 箇所）ので別 PR にします。

Refs: #298 / goodpatch/sparkle-design-internal#247

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
sparkle-design	Ready	Preview	Aug 17, 2026 2:36am

[coderabbitai]

Important

Review skipped

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

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: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: f7dd4ce5-7ed0-4573-b08a-2058af37b384

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

---

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