幅トークンは、12カラムのグリッドシステムに基づいて設計されたレイアウト用のトークンです。コンテナやダイアログの幅の基準となる値です。

基準値

ユーザーのディスプレイ解像度の主流である1920pxを基準に、ウィンドウを最大化した場合でも左右の余白を十分に持ってコンテンツを表示できるように設計しています。

1カラムの基準幅は120pxです。これは、1920pxの画面幅から左右の余白(4remずつ)を引いた幅から、溝幅(溝ごとに2remずつ)を引き、それを12で割った値です。

計算式

1rem = 16px として計算しています。

プリミティブトークン

トークン名値(px)
col1120px
col2272px
col3424px
col4576px
col5728px
col6880px
col71032px
col81184px
col91336px
col101488px
col111640px
col121792px

セマンティックトークン

セマンティックトークンは存在しませんが、ContainerDialog の幅は内部的に幅トークンを参照しています。

Container

大きさ幅トークン値(px)
NARROWcol6880px
DEFAULTcol81184px
WIDEcol91336px
FULL-width: 100%

Dialog

大きさ幅トークン値(px)
XScol3424px
Scol4576px
Mcol5728px
Lcol6880px
XLcol71032px
XXLcol81184px
FULL-width: 100%

関連リンク