ドキュメントサイドバーの現在ページに視覚的アクセント線を追加

WebAwesomeのドキュメントサイドバーに、現在表示中のページを示すアクセント線が追加されました。CSSの ::before 疑似要素とデザイントークンを活用したシンプルな実装で、ナビゲーションの現在位置の視認性が向上します。

背景

この変更は、ディスカッション #2346 での提案を受けて実装されました。変更前のサイドバーでは、現在のページを示す視覚的な手がかりが乏しく、ユーザーが自分の位置を把握しにくい状態でした。

PRの Before/After 比較画像からも確認できるように、変更後はサイドバーの左端に縦線が表示され、現在のページが一目でわかるようになっています。既存のリンクスタイルを変更せず、独立した装飾要素として追加している点が特徴です。

技術的な変更

変更はすべて packages/webawesome/docs/assets/styles/utils.css の1ファイルに収まっており、新規セレクタとスタイルの追加のみです。

追加されたCSSは、.current クラスを持つリンクを内包する li 要素に対して ::before 疑似要素でアクセント線を描画します。セレクタには2パターンが定義されており、直接の子要素として .current を持つ場合と、.wa-split ラッパーを経由する場合の両方に対応しています：

/* current page: accent line replacing the section's left rail */
li:has(> .current),
li:has(> .wa-split > .current) {
  position: relative;

  &::before {
    content: '';
    position: absolute;
    inset-block: calc(-1 * var(--wa-space-2xs));
    inset-inline-start: calc(-1 * var(--wa-space-m) - var(--wa-border-width-s));
    width: var(--wa-border-width-s);
    background: var(--wa-color-brand-on-quiet);
  }
}

線の配置には論理プロパティ（inset-block / inset-inline-start）が使用されており、RTL（右から左）レイアウトにも対応できる設計です。寸法はすべて --wa-space-2xs・--wa-space-m・--wa-border-width-s・--wa-color-brand-on-quiet といったデザイントークンで定義されており、テーマ変更に追従します。inset-block に負のオフセットを与えることで、線が li のパディング領域まではみ出して縦に伸び、セクション左レールの代替として機能します。

設計判断

:has() セレクタを使って親要素にスタイルを適用する「親セレクタパターン」 が採用されました。.current クラス自体にスタイルを追加する代わりに、その親 li を起点にして ::before 疑似要素で装飾することで、既存のリンクスタイルに手を加えずに視覚的表現を追加しています。

アクセント線の横位置は calc(-1 * var(--wa-space-m) - var(--wa-border-width-s)) という計算で li の左端より外側に配置されており、サイドバーのインデント構造と噛み合う形でセクションの「左レール」を置き換える意図がコメントからも読み取れます。

まとめ

15行の純粋なCSS追加で、ナビゲーションの現在位置の視認性を高めた変更です。デザイントークンと論理プロパティの組み合わせにより、テーマやレイアウト方向への追従も考慮されており、WebAwesomeのデザインシステムの設計指針が小さな変更にも一貫して反映されています。