Sizing

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

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

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

Sizing scale

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 Pixel(Pepper flavor) Rem(Pepper flavor)
1 1 0.0625
2 2 0.125
4 4 0.25
8 8 0.5
12 12 0.75
16 16 1
20 20 1.25
24 24 1.5
32 32 2
40 40 2.5
48 48 3
56 56 3.5
64 64 4
72 72 4.5
80 80 5
96 96 6
112 112 7
120 120 7.5
128 128 8
144 144 9
160 160 10
168 168 10.5
176 176 11
192 192 12
216 216 13.5
240 240 15
264 264 16.5
288 288 18
312 312 19.5

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

Spacing

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

Spacing

Sass function

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

get-spacing-size($level)
@use '@inhouse/inhouse-components-web' as inhouse;

.example {
  margin-top: inhouse.get-spacing-size($level: m);
}
Level Pixel(Pepper flavor) Rem(Pepper flavor)
xxs 4 0.25
xs 8 0.5
s 12 0.75
m 16 1
l 24 1.5
xl 32 2
xxl 48 3

Interactive component

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

Interactive component

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);
}
Level Pixel(Pepper flavor) Rem(Pepper flavor)
xs 24 1.5
s 32 2
m 40 2.5
l 48 3
xl 56 3.5

Radius

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

Radius

Sass function

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

get-radius-size($level)
@use '@inhouse/inhouse-components-web' as inhouse;

.example {
  border-radius: inhouse.get-radius-size($level: m);
}
Level Pixel(Pepper flavor) Rem(Pepper flavor)
m 4 0.25
l 8 0.5
xl 12 0.75

Line width

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

Line width

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);
}
Level Pixel(Pepper flavor) Rem(Pepper flavor)
m 1 0.0625
l 2 0.125
xl 4 0.25

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;
}
Level Pixel(Pepper flavor) Rem(Pepper flavor)
xs 480px -
s 640px -
m 960px -
l 1200px -
xl 1440px -

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;
  }
}
Level Pixel(Pepper flavor) Rem(Pepper flavor)
xxs 330px -
xs 370px -
s 600px -
m 800px -
l 1100px -
xl 1400px -