Appearance

Principles ​

Jumpu UI のデザイン原則として、次の3つを掲げています。

よく練られたデザインであること ​

コンポーネントは、よく知られている UI デザインパターンによって表現される必要があります。なぜなら、一般的な利用場面で有効な UI は、特殊な利用場面で有効な UI よりも再利用しやすいからです。

ユーティリティフレンドリーであること ​

コンポーネント同士を組み合わせるとき、間隔を空ける、ひとつの部品を他より大きくする、アクセントカラーを使う、といった調整が必要になります。この調整をコンポーネントのバリアントによってではなく、Tailwind CSS が提供するユーティリティによって可能にします。コンポーネントにバリアントを持たせないことで、コンポーネントごとに管理すべきスタイルの複雑な上書きと肥大化を防ぎ、スタイルの再利用性を保つことができます。

セマンティックなマークアップであること ​

コンポーネントのマークアップは、見た目のためだけの構造ではなく、セマンティックな構造であることで、見た目としてもセマンティクスとしても必要最低限なマークアップを要求します。そのために、最新の HTML と WAI-ARIA の仕様のもとセマンティックな要素と属性をマークアップします。スタイルも、コンポーネント内の要素はクラスを定義せず、(可能なかぎり)セマンティックな要素と属性に対してのみスタイルを付与します。

ユーティリティとコンポーネントの責務分担 ​

「バリアントを持たせない」という方針は、すべての見た目をユーティリティで表現するという意味ではありません。 境界は次のところにあります。

ユーティリティが持つものは、単一のプロパティで表せる調整です。 文字サイズ、幅、角丸、色、外側の余白が該当します。

コンポーネントが持つものは、ユーティリティでは書けないものです。

  • 子要素との関係（.jumpu-tag [role="button"] が閉じるボタンの見た目を組み立てる）
  • 状態に応じた変化（:hover、[disabled]、[aria-expanded="false"]）
  • 埋め込んだアセット（Accordion の矢印、Tag の閉じる印）
  • 位置決めを伴う演出（IconButton のツールチップの表示位置）