Native Styles のテキスト要素拡張とリセット調整
Native Styles にテキスト系要素のデザインが追加入されたことで、blockquote や h6 などの表示がテーマと一貫した形に統一されました。この変更は、Prose ユーティリティで培ったタイポグラフィリズムを Native Styles へ移植し、HTML 標準要素だけで同等の体験を提供することを目的としています。
背景
従来、長文コンテンツ向けのリズムは wa-prose ユーティリティに限定されており、標準要素へは別途スタイルを当てる必要がありました。そこで、Native Styles がテキスト要素全体に同様のリズムと見た目を適用できるよう拡張されました。これにより、<blockquote> や <table> など、テーマだけで一貫したスタイルが保証され、利用者は追加クラスを意識せずに済むようになります。結果として、ドキュメントやブログ記事でのテーマ統合がシンプルになり、保守コストが削減されます。
技術的な変更
ドキュメント更新
packages/webawesome/docs/docs/utilities/native.md では、blockquote、ul/ol、figure、table の記述が追記・修正され、実際の外観とカスタムプロパティの説明が追加されました。例えば、blockquote の説明が「quiet color、leading border、larger font size」を含む形に変更され、リストマーカーが currentColor と不透明度で静かな表示になる旨が明記されています。これにより、開発者は変更点をすぐに把握でき、実装例も確認できます。
CSS 本体の拡張
packages/webawesome/src/styles/native.css では、以下のような差分が導入されています。
@@
- h6 {
- font-size: var(--wa-font-size-s);
- }
+ h6 {
+ font-size: var(--wa-font-size-xs);
+ }
@@
- blockquote {
- padding: var(--wa-space-xl);
-
- font-family: var(--wa-font-family-longform);
- font-size: var(--wa-font-size-l);
-
- border-inline-start: var(--wa-border-style) var(--wa-border-width-l) var(--wa-color-neutral-border-quiet);
- }
+ blockquote {
+ padding: var(--wa-space-xl);
+
+ color: var(--wa-color-text-quiet);
+ font-family: var(--wa-font-family-longform);
+ font-size: var(--wa-font-size-larger);
+
+ border-inline-start: var(--wa-border-style) var(--wa-border-width-l) var(--wa-color-neutral-border-quiet);
+ }
@@
- figcaption {
- margin-block-start: var(--wa-space-xs);
-
- color: var(--wa-color-text-quiet);
- font-size: var(--wa-font-size-smaller);
- line-height: var(--wa-line-height-condensed);
- }
+ figcaption {
+ margin-block-start: var(--wa-space-xs);
+
+ color: var(--wa-color-text-quiet);
+ font-size: var(--wa-font-size-smaller);
+ line-height: var(--wa-line-height-condensed);
+ }
@@
- ul > li::marker {
- color: currentColor;
- }
-
- ol > li::marker {
- color: currentColor;
- }
+ ul > li::marker {
+ color: color-mix(in oklch, currentColor 40%, transparent);
+ }
+
+ ol > li::marker {
+ color: color-mix(in oklch, currentColor 60%, transparent);
+ }
上記変更点の主な効果は次の通りです。h6 が --wa-font-size-xs へ縮小され、本文との差別化が強化されます。blockquote は quiet color と larger font size が適用され、長文引用がテーマに溶け込みつつ視認性が向上します。figcaption が新規追加され、メディアキャプションが静かな色調と凝縮行間で補助的要素として機能します。ul と ol のマーカーは currentColor に不透明度を混合した色へ変更し、テキストカラーに追随しつつコントラストを最適化します。
Changelog の追記
packages/webawesome/docs/docs/resources/changelog.md でも同様の内容が記載され、リリースノートとしてユーザーに変更点が通知されます。変更は「Updated Native Styles for several text elements」項目にまとめられ、blockquote、h6、table、th、figcaption、ul/ol、menu の具体的なスタイル変更が列挙されています。
設計判断
この PR は 既存の Native Styles キーを拡張 する方針を採用しています。新規クラスやユーティリティを追加する代わりに、標準要素向けの CSS カスタムプロパティを活用し、テーマ全体で統一的な外観を実現しています。blockquote のフォントサイズを --wa-font-size-larger にする点や、リストマーカーに color-mix を使う点は、テーマカラーの継承とアクセシビリティ を同時に満たす設計選択です。また、h6 のサイズ縮小は 後方互換性 を保ちつつ、テキスト階層の明確化 を意図しています。figcaption の追加は、HTML セマンティクス を尊重しながらスタイルを提供するという、ユーティリティに依存しない設計思想を示しています。
まとめ
本変更により、Native Styles がテキスト系要素のビジュアルをテーマに合わせて自動的に調整できるようになり、wa-prose の利便性を標準要素へ拡張しました。CSS の拡張はカスタムプロパティと色混合を活用し、後方互換性とアクセシビリティを両立させた点が特徴です。結果として、開発者は追加ユーティリティを意識せずに統一感のある長文コンテンツを提供でき、保守性と一貫性が向上します。