---
title: "الارتفاع"
description: "ستة مستويات لترتيب العمق، تُرسم حلقةً رفيعة مع ظل ناعم جدًّا، بلا تلوين للسطح."
url: "https://tanrei.chnotchy.com/ar/foundations/elevation/"
last_updated: 2026-10-23T17:33:05.000Z
---

# الارتفاع

> ستة مستويات لترتيب العمق، تُرسم حلقةً رفيعة مع ظل ناعم جدًّا، بلا تلوين للسطح.

يصف الارتفاع أي سطح يعلو أي سطح. يحتفظ Tanrei بالمستويات الدلالية الستة، من 0 إلى 5، ويرسمها بتحفّظ.

| الرمز | فاتح | داكن |
| --- | --- | --- |
| `--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) ظل مركّب فيه نوعان من الطبقات:

1. **حلقة بسماكة 1px** بالدور `elevation-ring`، تحدد الحافة بوضوح على أي خلفية؛
2. **ظل أو ظلان ناعمان جدًّا ومنخفضا العتامة** يكبران مع المستوى.

الحلقة هي الطبقة الأولى دائمًا. والمنصة التي لا تستطيع رسم امتداد الظل (spread) ترسمها حدًّا بسماكة بكسل واحد وتُبقي الباقي.

## بلا تلوين

لا تُلوَّن الأسطح المرتفعة باللون الأساسي (primary). يُعبَّر عن العمق بالحلقة والظل، وعند الحاجة بدرجة على سلّم حاويات السطح (surface-container). وبذلك تبقى الأسطح المحايدة محايدة.

## في السمات الداكنة

يصعب أن تُرى الظلال على خلفية قريبة من السواد، ولذلك تتولى الحلقة معظم العمل في السمات الداكنة، وتنتقل الأسطح المرتفعة كذلك إلى دور حاوية أفتح.

## تطبيق الارتفاع

| المستوى | الاستخدام المعتاد |
| --- | --- |
| 0 | الصفحة وكل ما هو في مستواها |
| 1 | البطاقات في وضع السكون، والخيارات المحددة في الزر المقسَّم |
| 2 | الأزرار المرتفعة، والبطاقات المرتفعة عند التحويم |
| 3 | قوائم الخيارات، واللوحات المنبثقة (popovers)، وأشرطة الإشعار |
| 4 و 5 | مربعات الحوار واللوحات وسائر الأسطح المشروطة (modal) |

استخدم أقل عدد من المستويات تحتمله الشاشة. وإذا احتاج عنصران متجاوران إلى فصل وليس أحدهما عائمًا، فاستخدم خطًّا رفيعًا.