アニメーション時間をデザイントークンに統一し、モーションの一貫性を確保
複数コンポーネントに散在していたハードコードされたアニメーション時間値を --wa-transition-* トークンに置き換え、デザインシステム全体でモーションが一貫して管理されるようになりました。
背景
ドキュメントのコード例トグル（#2414）のポリッシュ作業中に、<wa-details> の --show-duration / --hide-duration がリテラルの 200ms にハードコードされていることが発覚しました。ライブラリ全体を監査したところ、同じパターンがポップアップ系コンポーネントにも広がっており、50ms・100ms・200ms といったアドホックな値が --wa-transition-* トークン とは無関係に使われていました。
この状態では、デザインシステム側でトークンの値を調整しても各コンポーネントのアニメーション時間には反映されず、モーションが設計意図から乖離するリスクがありました。今回の変更はその不整合を解消するものです。
技術的な変更
変更は大きく2つのグループに分かれます。それぞれコンポーネントの種別に応じて異なるトークンへ移行しています。
ポップアップ系コンポーネント（wa-dropdown・wa-popup・wa-popover・wa-select）は、50〜100ms の値から --wa-transition-fast（75ms）へ統一されました。
/* 変更前 */
--show-duration: 50ms;
--hide-duration: 50ms;
/* 変更後 */
--show-duration: var(--wa-transition-fast);
--hide-duration: var(--wa-transition-fast);
パネル系コンポーネント（wa-details・wa-dialog・wa-drawer・wa-tree-item）は、200ms の値から --wa-transition-normal（150ms）へ統一されました。
/* 変更前 */
--show-duration: 200ms;
--hide-duration: 200ms;
/* 変更後 */
--show-duration: var(--wa-transition-normal);
--hide-duration: var(--wa-transition-normal);
さらに2つの小さな修正も含まれています。<wa-copy-button> のアイコンスワップアニメーションと <wa-select> のシェブロン回転イージングも、それぞれハードコードの 100ms ease / ease から --wa-transition-fast と --wa-transition-easing トークンへ移行しました。
/* 変更前 */
animation: copy-button-icon-show 100ms ease;
/* 変更後 */
animation: copy-button-icon-show var(--wa-transition-fast) var(--wa-transition-easing);
/* 変更前 */
transition: rotate var(--wa-transition-slow) ease;
/* 変更後 */
transition: rotate var(--wa-transition-slow) var(--wa-transition-easing);
CSSカスタムプロパティのデフォルト値を変更しているだけなので、--show-duration / --hide-duration を明示的に上書きしているユーザーには影響がありません。ユーザー向けに見える変化としては、ポップアップ系がわずかに速く、パネル系が約50ms短く動作します。
設計判断
リテラル値を直接トークンで置き換える最小限のアプローチ が採用されました。新たなCSSカスタムプロパティや抽象化レイヤーを導入せず、既存の --show-duration / --hide-duration の初期値をトークン参照に差し替えるだけで、デザインシステムとの接続を確立しています。
また、PR本文によれば「1コンポーネントにつき1コミット」の方針で変更が分割されており、問題が生じた際のバイセクトやリバートを容易にする構成になっています。影響範囲が広い変更であっても、git履歴上での追跡性を意識した運用です。
ドキュメント（.ts ファイルの JSDoc コメント）も同時に更新され、デフォルト値として 200ms ではなく var(--wa-transition-normal) が記載されるようになりました。API仕様とコード実装が一致した状態に保たれています。
まとめ
今回の変更は、散在していたアドホックな時間値を --wa-transition-* トークンへ一元化し、デザインシステムのトークン変更が自動的にすべてのコンポーネントのモーションに伝播する構造を確立しました。既存のカスタマイズを壊さずに、設計意図とコード実装の乖離を解消した変更です。