ツールバーのスタイリング改善

2026年02月25日 21:19 JST basecamp/lexxy

https://github.com/basecamp/lexxy/pull/742

LexxyエディタのツールバーデザインがBasecampのスタイルガイドラインに沿って刷新されました。アイコンの視認性向上とアクション分類の明確化により、エディタの操作性が改善されています。

背景

従来のツールバーは、外部のSVGアイコンセットを使用しており、Basecampの他のUIとの統一感が不足していました。また、関連するアクションがグループ化されておらず、大量のボタンが並列に配置されていたため、ユーザーが目的の機能を見つけにくい状態でした。#742 は、このツールバーインターフェースの一貫性と可読性を向上させています。

技術的な変更

アイコンの統一化

ToolbarIcons モジュールが新設され、すべてのツールバーアイコンのSVG定義が一元管理されるようになりました。

export default {
  "bold":
  `<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M9.05273 1.88232C10.6866..."/>
  </svg>`,
  // 他のアイコン定義
}

アイコンの viewBox が 24 24 から 18 18 に変更され、CSSの --lexxy-toolbar-icon-size も 1em から 1.125em に調整されました。この変更により、アイコンの線の太さとパディングのバランスが最適化されています。

セマンティックなアイコン選択

画像アップロードボタンのアイコンが、汎用的な画像アイコンから ペーパークリップアイコン に変更されました。これにより、画像だけでなくあらゆる種類のファイルをアップロードできることがより明確に伝わります。

グループ区切りの導入

ツールバーボタンに lexxy-editor__toolbar-group-end クラスが追加され、関連するアクションをグループ化できるようになりました。たとえば、テキスト装飾系のボタン（Bold、Italic、Strikethrough）と見出し変換ボタンの間に視覚的な区切りが配置されます。

<button class="lexxy-editor__toolbar-button lexxy-editor__toolbar-group-end" 
        type="button" name="strikethrough" 
        data-command="strikethrough" 
        title="Strikethrough">
  ${ToolbarIcons.strikethrough}
</button>

<button class="lexxy-editor__toolbar-button" 
        type="button" name="heading" 
        data-command="rotateHeadingFormat" 
        title="Heading">
  ${ToolbarIcons.heading}
</button>

CSSルールの強化

ツールバーボタンのスタイル定義が、:where(.lexxy-editor__toolbar-button) から :where(lexxy-toolbar) .lexxy-editor__toolbar-button に変更されました。これにより、スコープが限定され、外部のCSSリセットフレームワークによる意図しない上書きを防ぎやすくなっています。

変更前:

:where(.lexxy-editor__toolbar-button) {
  aspect-ratio: 1;
  block-size: var(--lexxy-toolbar-button-size);
  color: currentColor;
  display: grid;
  place-items: center;
}

変更後:

:where(lexxy-toolbar) {
  .lexxy-editor__toolbar-button {
    aspect-ratio: 1;
    block-size: var(--lexxy-toolbar-button-size);
    border: 0;
    border-radius: var(--lexxy-radius);
    color: currentColor;
    display: grid;
    line-height: inherit;
    place-items: center;
  }
}

ネスト構造の採用により、border: 0 や border-radius: var(--lexxy-radius) などのプロパティが明示的に定義され、外部スタイルの干渉を受けにくい構造になりました。

設計判断

アイコン定義の外部化 が選択されました。従来は各ボタンのテンプレート内にSVGコードが直接埋め込まれていましたが、toolbar_icons.js への抽出により、アイコンの更新が一箇所で完結するようになっています。

PR内の変更では、アイコンのパスデータが大幅に簡素化されています。たとえば、Boldアイコンは24×24のビューボックスで複雑なパスを持っていましたが、18×18に再設計され、視覚的な品質を保ちながらファイルサイズが削減されました。この判断は、Lexxyが軽量なエディタとして設計されていることと一貫しています。

グループ区切りの実装方式として、CSSクラスによるスタイル制御が採用されました。JavaScriptでのDOMツリー操作や <hr> 要素の挿入といった代替案もありましたが、既存のボタン要素に lexxy-editor__toolbar-group-end を追加するだけで実現できる最小限の変更が選ばれています。

まとめ

本PRは、アイコンの統一化、セマンティックな表現の改善、CSSのスコープ強化という3つの軸でツールバーのスタイリングを改善しました。特にアイコン定義の外部化により、将来的なデザイン変更のメンテナンスコストが大幅に削減されています。視覚的な一貫性と技術的な保守性を両立させた変更といえます。