Interaction

ホバー、アクティブ、無効、フォーカスの表し方と、遷移の尺度を定めます。

遷移

時間	使う場面	コンポーネント
30ms	押した手応えを返す	Button（明度の変化）
100ms	小さく動かす	IconButton、ToggleSwitch
200ms	開閉する	Accordion のパネル
500ms	向きを変える	Accordion の矢印

イージングは Button だけが cubic-bezier(0, 0, 0.12, 1) を指定しています。 ほかは既定のままです。

NOTE

これらの値は変数として配布していません。 コンポーネントの CSS に直接書かれているため、上書きするには各コンポーネントを個別に上書きする必要があります。

状態の表し方

ホバー

押せるものには、ホバーで見た目を変えます。

表現	コンポーネント
明度を下げる（brightness(90%)）	Button、FilledTag
背景を primary-100 にする	OutlinedButton、TextButton
背景を gray-50 にする	Accordion、IconButton
境界を gray-400、文字を primary-800 にする	Tabs
境界を gray-300 にする	Tag

Tag と FilledTag は、a / button / [role="button"] のときだけホバーが効きます。 それ以外の要素で使った場合は変化しません。

アクティブ

ホバーよりもさらに変化させ、押している最中であることを示します。

表現	コンポーネント
brightness(75%)	Button
brightness(90%)	TextButton
brightness(110%)	OutlinedButton
背景を gray-100 にする	Accordion
背景を gray-200 にする	IconButton
背景を gray-50 にする	Tabs

無効

gray-300 の塗りにし、ホバーの変化を止めます。 指定があるのは Button、OutlinedButton、TextButton の 3 つです。

無効であることを色だけで伝えないでください。 button 要素なら disabled 属性を、そうでない要素なら aria-disabled を併せて指定します。

IMPORTANT

a 要素には disabled 属性がありません。 <a class="jumpu-button" disabled> は見た目も挙動も変わらないため、リンクを無効にしたい場合は要素そのものを差し替えるか、aria-disabled とスクリプトで対応してください。

フォーカス

フォーカスの見た目は、原則としてブラウザの既定に委ねます。 セマンティックな要素に対してのみスタイルを与えるという Principles の帰結です。

例外は入力系です。

コンポーネント	フォーカス時の表現
Input、Select、Textarea	境界を primary-700 にする
チェックボックス、ラジオボタン	primary-700 のリングを 2px のオフセットで出す
ファイル入力	ブラウザ既定のアウトライン

フォーカスリングを outline: none で消さないでください。