スキン

スキン

色と密度が決まった後に描かれるもの:角、深さ、線。これらのトークンはテーマの `スキン` 軸であり、デフォルトのスキンがこのページに表示され、別のスキンは同じ名前を設定する別のファイルで、以下に変更するものはありません。

角丸

なし、次にそれぞれ下の倍の4つのステップ、最後にピル。2ステップの間隔は、スケール上のどこにいても同じ距離で、これが読みやすさを生み出します。最初のステップは故意にほとんど存在しません:それは、真の直角が未完成に見えるときに平らなスキンが望むものです。最後のステップよりも丸い形は、円であることを望み、自らそう言います — 円はスキンの決定ではありません。
--radius-0
--radius-1
--radius-2
--radius-3
--radius-4
--radius-pill

角丸の役割

形は上のスケールを読みません:それは自らが果たす役割を読み、スキンがその役割がどのステップを受けるかを示します — ステップの価値を示すことは決してなく、それはスケールが同時に二つの意味を持つことになってしまいます。何かを保持するのはボックスであり、それがテキスト、コンテンツ、またはメッセージを保持しているかどうかに関わらず、ページの二つの領域を分けるものはどちらでもなく、何も丸めません。スキンを `ソフト` に切り替えると、コントロールが他の部分と分かれるのを見ることができます:カプセルは1行の高さのものに適しており、テキストエリアには不適当です。
--radius-control
1行の高さで、押されている
--radius-box
何かを保持する
--radius-media
画像や図
--radius-pill
カプセルとして読まれるもの

影

四つの深さ、髪の毛のように持ち上げられたものから浮遊パネルまで。平らな世界を望むスキンはすべての深さをなしに設定し、すべての持ち上げられた面はそれに従います。
--shadow-1
--shadow-2
--shadow-3
--shadow-4

境界線

線自体 — 幅とスタイル。色はここにはありません:それはカラースキームに属し、スキンが色を知らずに線を取り除くことを可能にします。
--border-discreet
--border-default
--border-focus
--border-placeholder

セパレーターと領域

物事を区別する二つの線:一つのものの二つの行の間、そしてページの二つの領域の間。約20の形が最初のものを読み取ります。これがトークンであり、ルールではない理由です。
--border-separator — 他の行の中の1行
他の行の中の1行
他の行の中の1行
--border-region — そのように境界のあるページの領域