Elevation

Elevationとは標高の意味で、z軸に沿った2つのSurface間の相対距離のことを指します。UIの役割によってその標高は異なります。

Elevationの表現は主に「影」によって行われます。影はユーザーが異なるオブジェクトを区別したり、オブジェクト同士のヒエラルキーや優先順位を理解するための役割を担います。Elevationが変化すると、オブジェクトの影もElevationの位置に合わせて変化します。

影によってZ軸の高さや要素の重なりを表現することで、視点を誘導したり情報の優先順位を伝えることができます。Inhouseでは、0から6までの7段階のレベルを定義しています。

Inhouseでは各コンポーネントのElevationを以下のように分類します。

いわゆる「地平」を表します。メジャースタックを入れ子にすることはできません。メジャースタックはスタッキングコンテキストを新たに作成します。メジャースタック間における前後関係のみをメジャースタックに設定したz-indexで定めます。

「地平」であるメジャースタックを基準点として上に積み上がります。マイナースタックはさらにonタイプのものとoverタイプのものに分類されます。 onとoverがバッティングするケースはありません。

基準点を1つ下のオブジェクトとし、上に積み上がっていきます。マイナースタック - overの上に乗ることもあります。スタッキングコンテキストは生成しません。

基準点を自分の所属するメジャースタックとします。スタッキングコンテキストを生成し、z-indexの基準点となります。

各コンポーネントのElevation値は以下のように定められます。

Sass function

Elevationのbox-shadowを取得できます。

get-elevation-box-shadow($level)

@use '@inhouse/inhouse-components-web' as inhouse;

.example {
  box-shadow: inhouse.get-elevation-box-shadow($level: 1);
}

Level	box-shadow（Pepper flavor）
0	`0 0 0 0 rgba(0, 0, 0, 0), 0 0 0 0 rgba(0, 0, 0, 0), 0 0 0 0 rgba(0, 0, 0, 0)`
1	`0 -0.1px 1px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 0 0 0 rgba(0, 0, 0, 0)`
2	`0 0 4px 0 rgba(0, 0, 0, 0.12), 0 4px 6px -2px rgba(0, 0, 0, 0.12), 0 0 0 0 rgba(0, 0, 0, 0)`
3	`0 0 6px 0 rgba(0, 0, 0, 0.08), 0 6px 7px -8px rgba(0, 0, 0, 0.12), 0 6px 16px 2px rgba(0, 0, 0, 0.12)`
4	`0 2px 6px 0 rgba(0, 0, 0, 0.08), 0 8px 32px -12px rgba(0, 0, 0, 0.12), 0 10 28px 4px rgba(0, 0, 0, 0.12)`
5	`0 4px 16px -16px rgba(0, 0, 0, 0.28), 0 12px 64px -20 rgba(0, 0, 0, 0.2), 0 16px 48px -8px rgba(0, 0, 0, 0.24)`
6	`0 4px 40 -28px rgba(0, 0, 0, 0.32), 0 16px 72px -24px rgba(0, 0, 0, 0.24), 0 24px 64px -12px rgba(0, 0, 0, 0.28)`

Elevationのbox-shadowを取得できます。

elevation($level)

@use '@inhouse/inhouse-components-web' as inhouse;

.example {
  @include inhouse.elevation($level: 1);
}