バッジのフォントサイズをより小さいデザイントークンへ移行

wa-badge コンポーネントの font-size に使用するデザイントークンを --wa-font-size-2xs から --wa-font-size-3xs に更新しました。#2154 で新たに追加された 3xs トークンを活用することで、バッジのテキストサイズがより意図した値に近づきます。

背景

--wa-font-size-3xs（10px）トークンの追加を受けて、wa-badge のフォントサイズ指定を見直す提案がなされました。#2154 はタイポグラフィのフォントサイズスケールを拡張し、3xs（10px）と 5xl（66px）の2つのトークンを新たに追加した変更です。このPRのレビュー中に @lindsaym-fa から、wa-badge が参照するトークンをより小さい 3xs に切り替えるべきとの提案がありました。

これまで wa-badge は --wa-font-size-2xs を参照していましたが、3xs トークンが存在しなかったため、スケール上で最小に近い 2xs が代替として使われていた形です。3xs トークンが利用可能になったことで、バッジ用のより適切な参照先が整いました。

技術的な変更

変更は badge.styles.ts の1行のみで、font-size プロパティのトークン参照を 2xs から 3xs に置き換えています。

変更前:

font-size: max(var(--wa-font-size-2xs), 0.75em);

変更後:

font-size: max(var(--wa-font-size-3xs), 0.75em);

max() 関数の役割は変更前後で共通しており、--wa-font-size-3xs（10px）と 0.75em の大きい方が採用されます。これにより、親要素のフォントサイズが十分に小さい場合でも、バッジのテキストが極端に小さくなることを防ぐフォールバックが維持されます。

合わせて changelog.md にも1行の記述が追加され、このバグ修正が変更履歴に記録されています。

設計判断

max() による下限保証というパターンは、今回の変更でも踏襲されています。絶対値のデザイントークン（--wa-font-size-3xs = 10px）と相対値（0.75em）の大きい方を取ることで、コンテキストに応じた柔軟なサイズ調整と、可読性を損なわない最小サイズの担保を両立させています。

トークンの参照先を変更するだけで、max() の構造やその他のスタイルには一切手を加えていない点も注目できます。デザイントークンのスケールが拡張された際に、利用側のコンポーネントが最小限の変更で追随できるのは、このトークンベースのアプローチの利点です。

まとめ

本PRは1行の変更ながら、#2154 で整備されたデザイントークンスケールを wa-badge が適切に参照するための仕上げ作業です。スケール拡張とそれを活用するコンポーネントの更新を別PRで追跡する運用は、変更の意図と影響範囲を明確に保つ設計プロセスの実践例といえます。