الارتفاع
ستة مستويات لترتيب العمق، تُرسم حلقةً رفيعة مع ظل ناعم جدًّا، بلا تلوين للسطح.
يصف الارتفاع أي سطح يعلو أي سطح. يحتفظ Tanrei بالمستويات الدلالية الستة، من 0 إلى 5، ويرسمها بتحفّظ.
level0level1level2level3level4level5| الرمز | فاتح | داكن |
|---|---|---|
--tanrei-sys-elevation-level0 | ||
--tanrei-sys-elevation-level1 | 0px 0px 0px 1px rgb(0 0 0 / 0.08) | 0px 0px 0px 1px rgb(0 0 0 / 0.08) |
--tanrei-sys-elevation-level2 | 0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 1px 2px 0px rgb(0 0 0 / 0.04) | 0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 1px 2px 0px rgb(0 0 0 / 0.04) |
--tanrei-sys-elevation-level3 | 0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 1px 1px 0px rgb(0 0 0 / 0.04) 0px 4px 8px -4px rgb(0 0 0 / 0.04) 0px 16px 24px -8px rgb(0 0 0 / 0.06) | 0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 1px 1px 0px rgb(0 0 0 / 0.04) 0px 4px 8px -4px rgb(0 0 0 / 0.04) 0px 16px 24px -8px rgb(0 0 0 / 0.06) |
--tanrei-sys-elevation-level4 | 0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 1px 1px 0px rgb(0 0 0 / 0.04) 0px 8px 16px -4px rgb(0 0 0 / 0.04) 0px 24px 32px -8px rgb(0 0 0 / 0.06) | 0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 1px 1px 0px rgb(0 0 0 / 0.04) 0px 8px 16px -4px rgb(0 0 0 / 0.04) 0px 24px 32px -8px rgb(0 0 0 / 0.06) |
--tanrei-sys-elevation-level5 | 0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 8px 24px -12px rgb(0 0 0 / 0.12) 0px 8px 32px -12px rgb(0 0 0 / 0.06) 0px 32px 72px -12px rgb(0 0 0 / 0.06) | 0px 0px 0px 1px rgb(0 0 0 / 0.08) 0px 8px 24px -12px rgb(0 0 0 / 0.12) 0px 8px 32px -12px rgb(0 0 0 / 0.06) 0px 32px 72px -12px rgb(0 0 0 / 0.06) |
مولَّد من design/tokens/tanrei.light.tokens.json, design/tokens/tanrei.dark.tokens.json, tokens/sys/elevation.tokens.json
كل مستوى فوق الصفر رمز (token) ظل مركّب فيه نوعان من الطبقات:
- حلقة بسماكة 1px بالدور
elevation-ring، تحدد الحافة بوضوح على أي خلفية؛ - ظل أو ظلان ناعمان جدًّا ومنخفضا العتامة يكبران مع المستوى.
الحلقة هي الطبقة الأولى دائمًا. والمنصة التي لا تستطيع رسم امتداد الظل (spread) ترسمها حدًّا بسماكة بكسل واحد وتُبقي الباقي.
لا تُلوَّن الأسطح المرتفعة باللون الأساسي (primary). يُعبَّر عن العمق بالحلقة والظل، وعند الحاجة بدرجة على سلّم حاويات السطح (surface-container). وبذلك تبقى الأسطح المحايدة محايدة.
يصعب أن تُرى الظلال على خلفية قريبة من السواد، ولذلك تتولى الحلقة معظم العمل في السمات الداكنة، وتنتقل الأسطح المرتفعة كذلك إلى دور حاوية أفتح.
| المستوى | الاستخدام المعتاد |
|---|---|
| 0 | الصفحة وكل ما هو في مستواها |
| 1 | البطاقات في وضع السكون، والخيارات المحددة في الزر المقسَّم |
| 2 | الأزرار المرتفعة، والبطاقات المرتفعة عند التحويم |
| 3 | قوائم الخيارات، واللوحات المنبثقة (popovers)، وأشرطة الإشعار |
| 4 و 5 | مربعات الحوار واللوحات وسائر الأسطح المشروطة (modal) |
استخدم أقل عدد من المستويات تحتمله الشاشة. وإذا احتاج عنصران متجاوران إلى فصل وليس أحدهما عائمًا، فاستخدم خطًّا رفيعًا.