形状トークン
角丸の半径のスケールと、角の曲がり方を決める 1 つの数値。
tanrei.sys.shape.corner 以下にある角丸の半径です。使い方の指針は、形状を参照してください。
none 0pxextra-small 3pxsmall 6pxmedium 8pxlarge 12pxlarge-increased 14pxextra-large 16pxextra-large-increased 20pxextra-extra-large 24pxfull full| トークン | 値 | 備考 |
|---|---|---|
--tanrei-sys-shape-corner-none | 0px | |
--tanrei-sys-shape-corner-extra-small | 3px | |
--tanrei-sys-shape-corner-small | 6px | Default for controls: buttons, inputs, menu items, tooltips. |
--tanrei-sys-shape-corner-medium | 8px | |
--tanrei-sys-shape-corner-large | 12px | |
--tanrei-sys-shape-corner-large-increased | 14px | |
--tanrei-sys-shape-corner-extra-large | 16px | |
--tanrei-sys-shape-corner-extra-large-increased | 20px | |
--tanrei-sys-shape-corner-extra-extra-large | 24px | |
--tanrei-sys-shape-corner-full | 9999px | Opt-in only: avatars, badges, segmented controls, pill variants. |
生成元 design/tokens/tanrei.light.tokens.json, tokens/sys/shape.tokens.json
tanrei.sys.shape.corner-smoothing は 0 から 1 の量で、意味は Figma と同じです。0 は四分円、0.6 は Figma が「iOS の角」と呼ぶ値、1 は最もなだらかな角です。この値で半径が変わることはありません。この量の意味は Figma の作図そのものです。Compose と Flutter はその作図を描き、Web は最も近いスーパー楕円を、SwiftUI と iOS の React Native は OS の曲線を描きます（それぞれの差は形状にあります）。同梱システムごとの値は次のとおりです。
| デザインシステム | corner-smoothing |
|---|---|
tanrei | 0 |
cupertino | 0.6 |
m3-expressive-like | 0 |
m3-like | 0 |
生成元 tokens/systems/*.system.json, design/tokens/<system>/tanrei.light.tokens.json