Inhouseでは、要素どうしの間隔やボタンの高さ、角丸の半径など、あらゆるサイズはタイポグラフィを根拠にして決めています。具体的には、ブラウザの文字サイズの100%に相当する16pxと、文字サイズの150%に相当する24pxを行の高さの基準として、16pxまたは24pxの倍数のバリエーションの中から選んでサイズを決めることで、ページの縦方向のリズム（バーティカルリズム）を揃えています。

このドキュメントでは、サイズのバリエーションの一覧であるSizing scaleと、そのSizing scaleから用途別に最適な値を選んで名前をつけたSemantic tokenを紹介しています。すべての値は、単位をRemにした数値で返ってくるように設計されたSass functionから取得できます。

＊このページで表記しているPixelは1remが16pxの場合の値です

Sizing scale

Sass function

Sizing scaleのサイズを取得できます。

get-sizing-scale-size($level)

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

.example {
  height: inhouse.get-sizing-scale-size($level: 16);
}

＊必要以上の選択肢を減らすためにLevel 192以降は24pxの倍数に絞っています

Spacing

Sizing scaleから、要素どうしの間隔を決めるのに最適な値を選び、SpacingとしてLevel XXSからXXLまで名前をつけています。

Sass function

Spacingのサイズを取得できます。

get-spacing-size($level)

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

.example {
  margin-top: inhouse.get-spacing-size($level: m);
}

Interactive component

Sizing scaleから、ボタンなどユーザーがタップやクリックできる要素の高さを決めるのに最適な値を選び、Interactive componentとしてLevel XSからXLまで名前をつけています。

Sass function

Interactive componentのサイズを取得できます。

get-interactive-component-size($level)

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

.example {
  height: inhouse.get-interactive-component-size($level: m);
}

Radius

Sizing scaleから、角丸の半径を決めるのに最適な値を選び、RadiusとしてLevel M, L, XLの名前をつけています。

Sass function

Radiusのサイズを取得できます。

get-radius-size($level)

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

.example {
  border-radius: inhouse.get-radius-size($level: m);
}

Line width

Sizing scaleから、線の太さを決めるのに最適な値を選び、Line widthとしてLevel M, L, XLの名前をつけています。

Sass function

Line widthのサイズを取得できます。

get-line-width-size($level)

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

.example {
  border-width: inhouse.get-line-width-size($level: m);
}

Content width

ウェブページのコンテンツに最大幅を指定することを想定して、Content widthとしてLevel XSからXLまでの名前をつけています。

なお、これらは画面の横方向に対するサイズの指定のため、Sizing scaleのバリエーションから選んだ値ではありません。また、タイポグラフィではなくデバイスの画面の解像度を根拠とする値なので、Sass functionもRemではなくPixelの単位の値で返します。

Sass function

Content widthのサイズを取得できます。

get-content-width-size($level)

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

.example {
  max-width: inhouse.get-content-width-size($level: m);
  margin: 0 auto;
}

Boundary

レスポンシブデザインのレイアウトを変更するブレークポイントを指定することを想定して、BoundaryとしてLevel XXSからXLまでの名前をつけています。

なお、これらは画面の横方向に対するサイズの指定のため、Sizing scaleのバリエーションから選んだ値ではありません。また、タイポグラフィではなくデバイスの画面の解像度を根拠とする値なので、Sass functionもRemではなくPixelの単位の値で返します。

Sass function

Boundaryのサイズを取得できます。

get-boundary-size($level)

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

.example {
  @media (min-width: inhouse.get-boundary-size($level: xl)) {
    display: flex;
  }
}