الرموز
الارتفاع
نظام ارتفاع من أربع طبقات: سلّم عمق، وأوّليات ظل، وأربعة أنماط ظل، وستة مستويات سطح تقرن كلاً منها بعمق ولون خلفية وظل. الظل يتكيّف مع السمة فيُقرأ العمق بالتساوي في الفاتح والداكن.
الظل عمق لا حدّ
المعمار
أربع طبقات. سلّم العمق خمس مواضع (0–4) لترتيب التكديس. أوّليات الظل هندسة خام (محور y، تمويه، انتشار). أنماط الظل الأربعة مركّبة منها، وتتكيّف ألفاها مع السمة. المستويات الستة تقرن عمقاً بلون خلفية وظل.
المستويات
ستة مستويات سطح، كل منها دور دلالي حيّ: خلفية حقيقية + ظل حقيقي على عمقه. انقر أي سطح لنسخ ظلّه.
الجذر البيئي خلف كل المحتوى.
استخدم · خلفية الصفحة/التطبيق الافتراضية، هادئة ومستقرّة.
تجنّب · التأكيد، الارتفاع، أو احتواء محتوى محدّد.
تجميع أساسي بتنويع لوني هادئ بلا ارتفاع.
استخدم · تجميع مناطق مترابطة عبر لون الخلفية فقط.
تجنّب · الظل أو استخدامه بديلاً عن تأكيد Raised.
سطح العمل المحتوى الافتراضي.
استخدم · البطاقات، اللوحات، الحقول.
تجنّب · المقاطعة أو التكديس بلا سبب تسلسلي.
احتواء أقوى دون مقاطعة.
استخدم · تقوية الفصل مع البقاء غير مقاطِع.
تجنّب · اختصار للنافذة/الأولوية العليا أو الإفراط بين الأشقاء.
طبقة حجب خلف سطح أمامي نشط.
استخدم · طبقة حجب فقط، مقترنة دائماً بـ Elevated فوقها.
تجنّب · خلفية محتوى أو ظلّ على كائن.
أعلى طبقة أمامية للتفاعلات الحرجة.
استخدم · النوافذ، الحوارات، لوحات الأوامر، القوائم المنبثقة.
تجنّب · التخطيط الروتيني أو حين يكفي الاحتواء.
اقتران الحجب والعائم
المبادئ
عشرة مبادئ حاكمة لقرارات الارتفاع.
كل سطح يشغل دوراً دلالياً محدّداً في مكدّس الارتفاع.
فروق الارتفاع بين الطبقات المتجاورة يجب أن تكون مدرَكة بصرياً.
كل سطح يستخدم أدنى دور صالح يحقّق الفصل المطلوب.
الظلال تنقل العمق، ليست زخرفة.
الأسطح المحتواة والعائمة تخدمان أغراضاً مختلفة جوهرياً.
الحاجب موجود فقط كطبقة حجب خلف سطح أمامي نشط.
تغيّرات الارتفاع الناتجة عن التفاعل مؤقتة وتنهار عند انتهائه.
الاقترانات المعرّفة فقط بين الأدوار صالحة بنيوياً.
تُحلّ مشاكل التخطيط البنيوية بأدوات التخطيط قبل تطبيق الارتفاع.
رموز الارتفاع تنتج إدراكاً متكافئاً للعمق عبر كل السمات.
إمكانية الوصول
| المعيار | المستوى | لماذا ينطبق |
|---|---|---|
| 1.4.11 · تباين غير النص | AA | لو نُقل حدّ السطح بالظل وحده (بلا فرق لون أو حدّ) وجب أن يحقّق الظل 3:1 مع الخلفية، وكل الظلال تفشل بذلك. |
الظل ليس صانع حدود
الشيفرة للمطوّرين
التسليم الأساسي لطبقة الارتفاع هو متغيّرات CSS المخصّصة. المكوّنات تقرأ المستويات فقط (bg + shadow + depth)، ولا تلمس أوّليات الظل ولا قيم box-shadow خام أبداً. الظل مضمّن السمة: ألفاه ترتفع تلقائياً في الوضع الداكن فيُقرأ العمق بالتساوي.
سلسلة المتغيّرات
المتغيّرات تُبنى على ثلاث طبقات: مدرّج أوّلي، ثم رمز أوّلي، ثم رمز دلالي يُحلّ حسب الوضع. المكوّنات تستهلك الطبقة الدلالية فقط.
/* Tier 1 — depth scale (z-index only) */
--depth-1: 1;
--depth-4: 4;
/* Tier 2 — shadow primitives (raw geometry) */
--shadow-y-axis-8: 8px;
--shadow-blur-16: 16px;
--shadow-spread-n4: -4px;
/* Tier 3 — composed shadow styles, theme-aware alpha */
:root {
--elevation-shadow-1: 0px 1px 2px 0px rgba(0, 0, 0, 0.05), 0px 1px 1px 0px rgba(0, 0, 0, 0.03);
--elevation-shadow-3: 0px 8px 16px -4px rgba(0, 0, 0, 0.1), 0px 2px 4px -1px rgba(0, 0, 0, 0.08);
}
:root[data-theme="dark"] {
--elevation-shadow-1: 0px 1px 2px 0px rgba(0, 0, 0, 0.4), 0px 1px 1px 0px rgba(0, 0, 0, 0.3);
--elevation-shadow-3: 0px 8px 16px -4px rgba(0, 0, 0, 0.5), 0px 2px 4px -1px rgba(0, 0, 0, 0.4);
}
/* Tier 4 — plane semantics; components consume THESE */
--plane-surface-shadow: var(--elevation-shadow-1);
--plane-elevated-shadow: var(--elevation-shadow-3), var(--elevation-shadow-4);جدول المرجع
| الرمز | متغيّر CSS | القيمة | الاستخدام |
|---|---|---|---|
| elevation.shadow.1 | --elevation-shadow-1 | alpha .05/.03 → .4/.3 | أخفض ظل، يتكيّف مع السمة |
| elevation.shadow.3 | --elevation-shadow-3 | alpha .1/.08 → .5/.4 | ظل مرتفع للأسطح العائمة |
| plane.surface.shadow | --plane-surface-shadow | elevation-shadow-1 | ظل البطاقة على العمق ١ |
| plane.raised.shadow | --plane-raised-shadow | elevation-shadow-2 | قائمة منسدلة، عمق ٢ |
| plane.elevated.shadow | --plane-elevated-shadow | shadow-3, shadow-4 | نافذة عائمة، عمق ٤ |
| plane.overlay.shadow | --plane-overlay-shadow | none | حاجب: حجاب لا ظل |
| depth.4 | --depth-4 | 4 | z-index للأسطح العائمة |
الاستخدام
.card {
background: var(--plane-surface-bg);
box-shadow: var(--plane-surface-shadow);
}
.modal {
z-index: var(--depth-4);
background: var(--plane-elevated-bg);
box-shadow: var(--plane-elevated-shadow);
}
/* No dark-mode override needed: the shadow tokens raise their
alpha automatically under :root[data-theme="dark"]. */أخطاء شائعة
| الخطأ | ما يفسد | الصواب |
|---|---|---|
box-shadow: 0 8px 16px rgba(0,0,0,.1) | لا ترتفع الألفا في الداكن، فيختفي العمق | var(--plane-elevated-shadow) |
| الظل كفاصل الأسطح الوحيد | الظل إيماءة عمق لا حدّ | اقرنه بخلفية المستوى أو حدّ |
| ظل box-shadow على الحاجب | يمنح الحجاب حافة زائفة | var(--plane-overlay-shadow) |
| رقم z-index خام | يكسر سلّم التكديس | var(--depth-4) |
كيف تُستهلك
الرموز مصدرها واحد آلي القراءة (tokens.json في المهارة). حزمة @mercato/tokens تولّد منه: متغيّرات CSS (التسليم الأساسي)، وإعداد Tailwind جاهز، وكائن سمة مطبوع بـ TypeScript. أهداف المنصّات الأخرى (Style Dictionary وDTCG وiOS وAndroid وCompose) تتولّد من المصدر نفسه عند الطلب.
// CSS variables (canonical) — import once at the app root
import "@mercato/tokens/css";
// Tailwind preset
// tailwind.config: { presets: [require("@mercato/tokens/tailwind")] }
// Typed theme object (JS/TS)
import { tokens } from "@mercato/tokens";