幅
幅トークンは、12カラムのグリッドシステムに基づいて設計されたレイアウト用のトークンです。コンテナやダイアログの幅の基準となる値です。
基準値
ユーザーのディスプレイ解像度の主流である1920pxを基準に、ウィンドウを最大化した場合でも左右の余白を十分に持ってコンテンツを表示できるように設計しています。
1カラムの基準幅は120px
です。これは、1920pxの画面幅から左右の余白(4remずつ)を引いた幅から、溝幅(溝ごとに2remずつ)を引き、それを12で割った値です。
計算式
1rem = 16px
として計算しています。
プリミティブトークン
トークン名 | 値(px) |
---|---|
col1 | 120px |
col2 | 272px |
col3 | 424px |
col4 | 576px |
col5 | 728px |
col6 | 880px |
col7 | 1032px |
col8 | 1184px |
col9 | 1336px |
col10 | 1488px |
col11 | 1640px |
col12 | 1792px |
セマンティックトークン
セマンティックトークンは存在しませんが、Container や Dialog の幅は内部的に幅トークンを参照しています。
Container
大きさ | 幅トークン | 値(px) |
---|---|---|
NARROW | col6 | 880px |
DEFAULT | col8 | 1184px |
WIDE | col9 | 1336px |
FULL | - | width: 100% |
Dialog
大きさ | 幅トークン | 値(px) |
---|---|---|
XS | col3 | 424px |
S | col4 | 576px |
M | col5 | 728px |
L | col6 | 880px |
XL | col7 | 1032px |
XXL | col8 | 1184px |
FULL | - | width: 100% |