`utils.css`にフェードマスクとパターン制御プロパティを追加
utils.cssにフェードマスクユーティリティクラスとパターン制御用カスタムプロパティが追加され、背景装飾の柔軟性と表現力が向上しました。
背景
これまで.background-wa-patternクラスはSVGパターンの色と不透明度を外部から制御できましたが、サイズや位置の調整手段がありませんでした。また、ページやセクションの末端でコンテンツや背景装飾を視覚的にフェードアウトさせるには、独自のCSSを別途記述する必要がありました。今回のPR #2298 はこれらの制約を解消し、ユーティリティクラスとカスタムプロパティの組み合わせでより宣言的に背景スタイルを制御できるようにしています。
技術的な変更
変更はpackages/webawesome/docs/assets/styles/utils.cssの1ファイルに集中しており、13行の追加のみで完結しています。
wa-mask-fade-belowの追加
新しいユーティリティクラス .wa-mask-fade-below は、要素の下端に向かってフェードアウトするマスクを適用します。注目すべきは、適用対象によって挙動が変わる点です。
.wa-mask-fade-below:not(.background-wa-pattern),
.background-wa-pattern.wa-mask-fade-below::after {
--wa-mask-fade-start: 60%;
--wa-mask-fade-end: 95%;
mask-image: linear-gradient(to bottom, #000 var(--wa-mask-fade-start), transparent var(--wa-mask-fade-end));
}
:not(.background-wa-pattern)セレクタにより、通常の要素に付与した場合は要素自体（コンテンツを含む）がマスクされます。一方、.background-wa-patternと併用した場合は::after擬似要素（パターン装飾）のみがマスクされ、コンテンツには影響しません。mask-imageはアルファチャンネルを読み取るため、グラデーションの色（ここでは#000とtransparent）は透明度の境界を定義するためだけに使われており、要素の色には影響しません。フェードの開始位置と終了位置は --wa-mask-fade-start（デフォルト60%）と --wa-mask-fade-end（デフォルト95%）で上書き可能です。
パターンサイズ・位置のカスタムプロパティ追加
.background-wa-patternの::after擬似要素に、--background-pattern-sizeと--background-pattern-positionの2つのカスタムプロパティが追加されました。
/* 変更前 */
.background-wa-pattern {
position: relative;
/* ::after内にbackground-sizeとbackground-positionの指定なし */
}
/* 変更後 */
.background-wa-pattern {
--background-pattern-size: auto;
--background-pattern-position: 0 0;
position: relative;
&::after {
background-size: var(--background-pattern-size);
background-position: var(--background-pattern-position);
/* ... */
}
}
デフォルト値はそれぞれautoと0 0であり、既存の表示を変えることなく後方互換性を維持しています。これらのプロパティをインラインスタイルや親のCSSルールから上書きすることで、パターンのスケールや位置を柔軟に制御できます。
設計判断
セレクタの二分岐による合成パターンが採用されている点が本変更の核心です。.wa-mask-fade-belowは単独のユーティリティクラスでありながら、.background-wa-patternの存在を認識した上で適用先を切り替えます。これにより、コンテンツのフェードと背景装飾のフェードを独立して制御しつつ、1つのクラス名で両方のユースケースをカバーしています。
カスタムプロパティの初期値をCSSルール内に明示的に宣言している点も重要です。--background-pattern-size: autoのように宣言することで、var()のフォールバックを使わずとも意図したデフォルト動作が保証され、カスタマイズの入口が明確になります。
まとめ
今回の変更は、最小限のコード追加で既存の.background-wa-patternコンポーネントの表現力を大きく拡張しています。セレクタの合成による文脈依存の挙動設計と、カスタムプロパティによる宣言的なカスタマイズインターフェースの組み合わせは、CSSユーティリティ設計の実践的なパターンとして参考になります。