スペーススケールの拡張と `wa-gap-4xl` バグ修正

--wa-space-5xl（5rem / 80px）デザイントークンと .wa-gap-5xl ユーティリティクラスが全テーマに追加され、あわせて wa-gap-4xl が :where() セレクターから漏れていたバグも修正されました。

背景

Issue #1606 では、既存のスペーススケールに不足しているサイズが報告されていました。--wa-space-4xl（64px）の上位にあたる大きなスペーシングトークンへの需要が生じ、--wa-space-5xl の追加が求められていました。

あわせて、既存の wa-gap-4xl クラスにも問題がありました。gap.css の :where() セレクターに wa-gap-4xl が含まれておらず、このクラスを使用しても display: flex が適用されない状態になっていました。

技術的な変更

スペーススケールの拡張とギャップユーティリティの修正は、テーマCSS・ユーティリティCSS・ドキュメントの3箇所に分散して行われています。

テーマへのトークン追加:
awesome.css・default.css・shoelace.css の3テーマすべてに、同一の式で --wa-space-5xl が追加されました。

--wa-space-4xl: calc(var(--wa-space-scale) * 4rem); /* 64px */
--wa-space-5xl: calc(var(--wa-space-scale) * 5rem); /* 80px */

値は var(--wa-space-scale) との積として定義されており、スケール変数を変更するだけで全サイズが比例して変動する既存の設計パターンに沿っています。

gap.css のバグ修正と新クラス追加:
:where() セレクターに wa-gap-4xl と wa-gap-5xl を追加し、両クラスへの display: flex 適用を保証しました。

/* 変更前 */
:where(
  .wa-gap-l,
  .wa-gap-xl,
  .wa-gap-2xl,
  .wa-gap-3xl
) {
  display: flex;
}

/* 変更後 */
:where(
  .wa-gap-l,
  .wa-gap-xl,
  .wa-gap-2xl,
  .wa-gap-3xl,
  .wa-gap-4xl,
  .wa-gap-5xl
) {
  display: flex;
}

また、gap プロパティを割り当てる宣言ブロックも追加されています。

.wa-gap-4xl {
  gap: var(--wa-space-4xl);
}
.wa-gap-5xl {
  gap: var(--wa-space-5xl);
}

wa-gap-4xl はこれまで gap プロパティは定義されていたものの :where() から漏れていたため、display: flex なしで gap だけが存在するという不完全な状態でした。今回の修正でその矛盾が解消されています。

設計判断

--wa-space-scale を使った乗算形式 が一貫して採用されています。各スペーストークンは絶対値ではなくスケール変数との積として定義されているため、テーマレベルで --wa-space-scale を変更するだけで全スペーシングが比例的にスケールします。--wa-space-5xl も calc(var(--wa-space-scale) * 5rem) として定義されており、この設計原則を踏襲しています。

:where() セレクター を使っていることも注目点です。:where() は詳細度がゼロであるため、ユーティリティクラスのスタイルが意図せずコンポーネントのスタイルに勝ってしまうことを防いでいます。新しいクラスをこのセレクターに追加することで、既存の詳細度設計を維持しながらユーティリティを拡張できます。

まとめ

本PRは、スペーススケールを --wa-space-5xl まで拡張しながら、既存の wa-gap-4xl が持っていた :where() セレクター漏れを同時に解消しています。--wa-space-scale による比例スケーリングと :where() による詳細度制御という2つの設計原則を守りながら拡張を行った点で、既存のアーキテクチャとの一貫性が高い変更です。