AwesomeとShoelaceテーマのCSSオーバーライドをリファクタリング

2026年04月03日 06:03 JST shoelace-style/webawesome

https://github.com/shoelace-style/webawesome/pull/2135

WebAwesomeのFreeテーマ（AwesomeとShoelace）に対してCSSセレクタの書き直しと複数のバグ修正が行われ、各テーマのソース素材（Font AwesomeおよびShoelace）との視覚的な一致が改善されました。

背景

両テーマで appearance や size などのプロパティが期待通りに動作しないバグが複数報告されていました。特に #1766 では、Awesomeテーマでカスタマイズした環境において appearance="button" を持つ <wa-radio> が水平レイアウト時にずれて表示される問題が確認されており、原因は <wa-radio> に誤って適用された transform プロパティでした。また、重複したセレクタブロックの存在や、CSS Nesting構文が最大限に活用されていないことが、テーマファイルの可読性と保守性を下げていました。

これらの問題を一括して解消するため、セレクタの整理・統合とバグ修正をセットにしたリファクタリングが実施されました。

技術的な変更

セレクタの統合とネスト構造の整理

Awesome・Shoelace両テーマで共通して、分散していたセレクタブロックが1つのブロックへと統合され、CSS Nestingを使った階層構造に整理されました。

Awesomeテーマでは、同一のボタン系セレクタを対象とした2つのブロックが1つにまとめられました。

変更前:

.wa-theme-awesome {
  wa-button,
  button,
  input[type='button'],
  input[type='reset'],
  input[type='submit'],
  a.wa-button {
    --wa-color-shadow: var(--wa-color-border-normal);
    --wa-transition-slow: 0;
    --wa-transition-normal: 0;
    --wa-transition-fast: 0;
    /* ... */
  }

  wa-button,
  button,
  input[type='button'],
  input[type='reset'],
  input[type='submit'],
  a.wa-button {
    &:not([appearance~='plain']):not(.wa-plain) {
      /* ... */
    }
  }
}

変更後:

.wa-theme-awesome {
  wa-button,
  button,
  input:is([type='button'], [type='reset'], [type='submit']),
  a.wa-button {
    /* Match the shadow color to the button's variant */
    --wa-color-shadow: var(--wa-color-border-normal);

    /* Disable transitions for a snappy, tactile feel */
    --wa-transition-slow: 0;
    --wa-transition-normal: 0;
    --wa-transition-fast: 0;

    &:not([appearance='plain'], .wa-plain) {
      /* ... */
    }
  }
}

input[type='button'], input[type='reset'], input[type='submit'] の3行が input:is([type='button'], [type='reset'], [type='submit']) の1行に集約されています。また、:not() セレクタの記法も :not([appearance~='plain']):not(.wa-plain) から :not([appearance='plain'], .wa-plain) へと現代的な構文に更新されています。

Awesomeテーマのフォームコントロールパディング調整

Font Awesomeとの視覚的な一致を高めるため、 --wa-form-control-padding-block と --wa-form-control-padding-inline の値が更新されました。

変更前:

--wa-form-control-padding-block: 1em;
--wa-form-control-padding-inline: 1.25em;

変更後:

--wa-form-control-padding-block: 1.375em;
--wa-form-control-padding-inline: 1.5em;

ブロック方向が 1em から 1.375em、インライン方向が 1.25em から 1.5em に拡大され、Font Awesomeのボタンサイズ感に近づきました。

Shoelaceテーマのフォーカススタイル変更

Shoelaceテーマでは、フォーカスリングの定義から color-mix() による透明度処理が取り除かれ、--wa-color-focus がそのまま使われるようになりました。

変更前:

--wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width)
  color-mix(in oklab, var(--wa-color-focus) 60%, transparent);

変更後:

--wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus);

この変更により、フォーカスリングの色がShoelaceオリジナルのフォーカススタイルにより近くなります。

バグ修正のまとめ

今回のリファクタリングでは、以下のバグが合わせて修正されました：

Awesomeテーマ: <wa-radio appearance="button"> に誤って適用されていた transform プロパティを削除し、水平レイアウトでの表示ずれ（#1766）を解消
両テーマ: <wa-card> の appearance 属性が機能しなかった問題を修正
Shoelaceテーマ: <wa-callout> の size 属性が効かなかった問題を修正
Shoelaceテーマ: <wa-combobox> にinput専用のフォーカススタイルを追加
Shoelaceテーマ: input[type='range'] のオーバーライドが欠けていた問題を修正
Awesomeテーマ: <wa-combobox> にインナーシャドウを追加し、他テキスト系inputと統一

設計判断

CSS Nesting構文と :is() / :not() の積極的な活用 が今回の主要な設計方針です。セレクタの重複排除によってテーマファイルの変更箇所が1箇所に集約され、今後のプロパティ追加・修正の際にセレクタの列挙を繰り返す必要がなくなります。

Shoelaceテーマでは wa-radio[appearance='button'] がボタン系セレクタブロックから分離されました。これはコメントにあるように「フォントサイズを1段階小さくする処理をボタンラベルにのみ適用するため、サイズをプライベートプロパティ --_size に保持する」という仕組みが wa-radio には必要ないためと読み取れます。バグ修正のついでに責務の境界を明確にした形です。

フォーカスリングから color-mix() を除去したことは、カスタムテーマを使うユーザーが --wa-color-focus を上書きする際に意図通りの色がそのまま反映される設計への変更です。60% の透明度が自動的に適用されていた従来の挙動は、テーマ編集者にとって予測しにくい要素でした。

まとめ

セレクタの統合・モダンCSS構文への移行・バグ修正を1つのPRにまとめたことで、テーマファイルの保守性とソース素材との視覚的一致が同時に改善されました。color-mix() の除去やパディング値の再調整といった変更は、テーマのカスタマイズ体験の予測可能性を高める設計判断として注目されます。