フォントサイズスケールに `3xs`（10px）と `5xl`（66px）を追加

Web Awesomeのタイポグラフィスケールが両端に拡張され、--wa-font-size-3xs（10px）と --wa-font-size-5xl（66px）の2つのデザイントークンが全テーマに追加されました。これに合わせて、関連するすべてのユーティリティクラスにも新サイズが追加されています。

背景

Issue #1606 において、既存の --wa-font-size-* トークンのスケールでは実際のUIニーズをカバーできないケースが報告されていました。具体的には、ラベルやメタデータ向けのより小さなフォントサイズと、大見出しや視覚的インパクトを持たせるための特大サイズの両方が不足していました。同 Issue では --wa-space-5xl の追加要望も含まれており、スペーシングスケールの拡張（wa-gap-5xl など）は既に対応済みでした。本PRはその残タスクとして、フォントサイズスケールを補完するものです。

技術的な変更

--wa-font-size-3xs と --wa-font-size-5xl の2トークンが、awesome.css・default.css・shoelace.css の3テーマすべてに追加されました。既存スケールの比率である 1.125 を一貫して適用することで、スケール全体の連続性が保たれています。

各トークンの定義は以下の通りです：

--wa-font-size-3xs: round(calc(var(--wa-font-size-2xs) / 1.125), 1px); /* 10px */
--wa-font-size-5xl: round(calc(var(--wa-font-size-4xl) * 1.125 * 1.125), 1px); /* 66px */

小さい側の 3xs は 2xs（11px）を 1.125 で割り、大きい側の 5xl は 4xl（52px）に 1.125 を2乗して掛けることで算出されます。round(..., 1px) による整数ピクセルへの丸め処理も他のトークンと統一されています。

src/styles/utilities/text.css には 3xs と 5xl 向けのユーティリティクラスが追加されました。各サイズに対して、wa-font-size-*・wa-body-*・wa-heading-*・wa-caption-*・wa-longform-* の5プレフィックスがまとめて定義される既存パターンに従い、2サイズ分10クラスが追加されています。

.wa-font-size-3xs,
.wa-body-3xs,
.wa-heading-3xs,
.wa-caption-3xs,
.wa-longform-3xs {
  font-size: var(--wa-font-size-3xs);
}

.wa-font-size-5xl,
.wa-body-5xl,
.wa-heading-5xl,
.wa-caption-5xl,
.wa-longform-5xl {
  font-size: var(--wa-font-size-5xl);
}

設計判断

3xs および 2xs については、アクセシビリティ上の注意点がドキュメントに明示されました。12px未満のサイズは一般的な可読性を下回るため、ラベルやメタデータなど非本質的なUIに限定して使用するよう、typography.md と text.md の両ドキュメントに警告ブロックが追加されています。

:::info
`3xs` and `2xs` fall below typical legibility. It's best to keep their use to non-essential UI only (e.g. labels, metadata) to maintain accessibility.
:::

トークンとユーティリティクラスを提供しながらも、使用を制約しない方針を採りつつ、ドキュメントによるガイダンスで実装者の判断を促す設計です。また、4xl の定義に存在していた round() 関数の第2引数（1px）の欠落が今回あわせて修正されており、スケール定義の一貫性も改善されています。

まとめ

フォントサイズスケールの両端を拡張することで、ラベル・メタデータから大型見出しまでカバーできる表現力が得られます。スケールの比率・命名規則・ユーティリティクラスの生成パターンという既存の設計を踏襲した拡張であり、既存コードへの影響なく新しいサイズを選択肢として追加しています。