الرموز
المسافات
نظام مسافات من طبقتين وثلاثة أوضاع كثافة. رموز أولية خام، وطبقة دلالية من ست عائلات تحكم كل علاقة مكانية، تتكيّف بين المضغوط والافتراضي والمريح دون تغيير شيفرة المكوّن.
جرّبها على الموقع نفسه
المعمار
طبقتان وثلاثة أوضاع. الأولية ١٤ درجة خام (0 إلى ١٢٨ بكسل). الدلالية ٣٠ رمزاً في ست عائلات × خمسة أحجام. أوضاع الكثافة تعيد ربط الرموز الدلالية لتكيّف الكثافة دون لمس شيفرة المكوّن. المكوّنات تستخدم الدلالية فقط.
افتراضي· نشط
واجهة المنتج العامة والمهام القياسية.
مضغوط
الجداول ولوحات البيانات وأدوات الإدارة الكثيفة.
مريح
المحتوى أولاً، التهيئة، التخطيطات اللمسية.
السلّم الأولي
أربع عشرة درجة خام في ثلاث مجموعات. ٨ بكسل (space.300) هو الحد الأدنى لخلوص اللمس. لا تستخدمها مباشرة في المكوّنات، بل عبر العائلات الدلالية.
العائلات الدلالية
ست عائلات، كل منها لعلاقة مكانية واحدة. المدرجات أدناه بمقاس الوضع النشط حالياً؛ بدّل الكثافة من الضابط أعلى الصفحة لتراها تتغيّر. حدّد نوع العلاقة أولاً، ثم العائلة، ثم الحجم.
التدفّق العمودي بين عناصر المحتوى.
استخدم · المسافة العمودية بين الفقرات وعناصر القوائم والحقول. md (16) قياسي.
تجنّب · الصفوف الأفقية، أو حشو الحاويات، أو أقسام الصفحة الكبرى.
المسافة الأفقية بين عناصر في صف.
استخدم · أزواج مترابطة (أيقونة + نص) بـ xs، وعناصر شريط أدوات بـ md.
تجنّب · التكديس العمودي، أو الحشو الداخلي، أو الشبكات المتكرّرة.
الحشو بين المحتوى وحدود حاويته.
استخدم · الحشو داخل البطاقات واللوحات والحقول والنوافذ. md (16) قياسي.
تجنّب · المسافة بين العناصر الشقيقة، فالكثافة تكيّفها تكييفاً مختلفاً.
مسافة متساوية بين عناصر متكرّرة متماثلة.
استخدم · شبكات البطاقات وعناصر القوائم متساوية الوزن. md (16) قياسي.
تجنّب · التسلسل غير المتماثل، أو المجموعات غير المتكافئة، أو فصل الأقسام.
الفصل بين مناطق الصفحة العمودية الكبرى.
استخدم · الانتقالات بين مناطق الصفحة العليا (بطل ← محتوى ← تذييل). md (48) قياسي.
تجنّب · داخل المكوّنات أو البطاقات أو المجموعات المحلية.
حشو أغلفة التخطيط والصفحة.
استخدم · حشو غلاف الصفحة والأغلفة التخطيطية الكبرى. md (32) قياسي.
تجنّب · بين كتل المحتوى الشقيقة أو لحشو المكوّنات (استخدم Inset).
أوضاع الكثافة
نفس التخطيط في الأوضاع الثلاثة جنباً إلى جنب: لاحظ كيف يتقلّص المضغوط ويتنفّس المريح. يمكن قصر الكثافة على حاوية بعينها بوضع data-density عليها، فيتعايش جدول مضغوط مع لوحة مريحة على الشاشة نفسها.
افتراضي
مضغوط
مريح
المبادئ
عشرة مبادئ حاكمة لقرارات المسافات.
المسافة تنقل قوة العلاقة. مسافة أضيق داخل المجموعة منها بين المجموعات؛ دع المسافة تحلّ محلّ الحدود.
المسافة العمودية والأفقية دوران مختلفان. اختر Stack للعمودي وInline للأفقي حسب محور العلاقة.
كل القيم من السلّم الأولي؛ لا أرقام عشوائية. لا قيم بكسل ثابتة في المكوّنات.
المقدار يزيد مع المستوى البنيوي: خطوات أصغر داخل المكوّنات، وأكبر بين الأقسام.
كل عائلة لعلاقة مكانية واحدة. حدّد نوع العلاقة أولاً ثم العائلة ثم الحجم.
الحشو الداخلي والفجوة الخارجية خاصيتان مستقلتان. لا تستبدل إحداهما بالأخرى.
الكثافة مقصودة من ثلاثة أوضاع. مضغوط للجداول، افتراضي للعام، مريح للمحتوى أولاً.
الفواصل المتكرّرة تخلق إيقاعاً بصرياً. استخدم Gap لكل البنى المتكرّرة متساوية التباعد.
نفس العلاقة تستخدم دائماً نفس العائلة والحجم عبر المكوّنات.
حافظ على ٨ بكسل على الأقل بين العناصر التفاعلية المتجاورة، وهدف ٤٤×٤٤ بكسل للمنطقة.
مرجع سريع
أيّ عائلة لأيّ موقف. حدّد العلاقة أولاً، ثم اختر الحجم.
| الموقف | العائلة | مثال |
|---|---|---|
| مسافة عمودية بين حقول أو عناصر قائمة أو فقرات | Stack | |
| فجوة بين أزرار أو وسوم أو أيقونات في صف | Inline | |
| حشو داخلي لبطاقة أو لوحة أو حقل أو نافذة | Inset | |
| فجوة متساوية بين بطاقات شبكة أو عناصر قائمة | Gap | |
| المسافة بين أقسام الصفحة العليا | Section | |
| حشو غلاف الصفحة أو التخطيط | Container |
إمكانية الوصول
المسافات تحكم الفجوة والحشو لا اللون. الخطر الأساسي هو تجاور أهداف اللمس في الوضع المضغوط.
| المعيار | المستوى | لماذا ينطبق |
|---|---|---|
| 2.5.5 · حجم الهدف | AAA | المسافة بين العناصر التفاعلية المتجاورة تؤثر في الفجوة القابلة للاستخدام؛ في الوضع المضغوط قد تصل inline/gap إلى 0. |
ثابت خلوص اللمس
فحوص الوضع المضغوط (تفاعلي)
عائلتا inline وgap تحملان أعلى خطر في الوضع المضغوط لأن العناصر التفاعلية تظهر كثيراً في صفوف وشبكات.
| الرمز | افتراضي | مضغوط | مريح | الخطر |
|---|---|---|---|---|
| spacing.inline.xs | 2px | 0px | 4px | تحذير إن استُخدم بين عناصر تفاعلية مميّزة |
| spacing.inline.sm | 4px | 2px | 8px | معلومة — راجع السياق |
| spacing.inline.md | 8px | 4px | 16px | معلومة — راجع السياق |
| spacing.inline.lg | 16px | 8px | 32px | يمرّ |
| spacing.inline.xl | 32px | 16px | 48px | يمرّ |
| spacing.gap.xs | 4px | 2px | 8px | معلومة — راجع السياق |
| spacing.gap.sm | 8px | 4px | 16px | معلومة — راجع السياق |
| spacing.gap.md | 16px | 8px | 32px | يمرّ |
| spacing.gap.lg | 32px | 16px | 48px | يمرّ |
| spacing.gap.xl | 48px | 32px | 64px | يمرّ |
فحوص بنيوية مطلوبة
inline.xs (مضغوط = 0) لا يُستخدم كفجوة بين تحكّمات تفاعلية مميّزة.
لا فجوة تفاعلية في أي وضع كثافة تقلّ عن ٨ بكسل.
إن نُشر الوضع المضغوط على شاشات تفاعلية، تُدقَّق كل مسافاته التفاعلية.
المكوّنات تشير للرموز الدلالية لا الأولية (الأولية لا تتكيّف مع الكثافة).
لا معايير WCAG AA يمكن لقيم المسافة وحدها أن تخالفها؛ أقصى شدّة تحذير، لا حاجب. الخطر الأساسي: تجاور الأهداف في الوضع المضغوط.
الشيفرة للمطوّرين
التسليم الأساسي لطبقة المسافات هو متغيّرات CSS المخصّصة. المكوّنات تستهلك رموز العائلات الدلالية فقط (--spacing-{family}-{size})، ولا تلمس السلّم الأولي ولا قيم px خام أبداً. المسافات ثابتة عبر الوضعين الفاتح والداكن؛ ما يعيد ربط الرموز هو وضع الكثافة (data-density) لا السمة.
سلسلة المتغيّرات
المتغيّرات تُبنى على ثلاث طبقات: مدرّج أوّلي، ثم رمز أوّلي، ثم رمز دلالي يُحلّ حسب الوضع. المكوّنات تستهلك الطبقة الدلالية فقط.
/* Tier 1 — primitive step (raw px, one scale) */
--spacing-space-300: 8px; /* touch-clearance minimum */
--spacing-space-500: 16px;
/* Tier 2 — semantic family token; components consume THIS */
:root {
--spacing-inset-md: var(--spacing-space-500); /* 16px */
--spacing-stack-sm: var(--spacing-space-300); /* 8px */
}
/* Density remaps the same semantic names (no theme involved) */
[data-density="compact"] { --spacing-inset-md: var(--spacing-space-400); } /* 12px */
[data-density="comfortable"] { --spacing-inset-md: var(--spacing-space-700); } /* 32px */جدول المرجع
| الرمز | متغيّر CSS | القيمة | الاستخدام |
|---|---|---|---|
| inset.md | --spacing-inset-md | space.500 (16px) | حشو البطاقات واللوحات |
| inset.sm | --spacing-inset-sm | space.400 (12px) | حشو حاوية مضغوط |
| stack.sm | --spacing-stack-sm | space.300 (8px) | الفجوة بين نصوص متراصّة |
| stack.md | --spacing-stack-md | space.500 (16px) | الفجوة بين الكتل |
| inline.md | --spacing-inline-md | space.300 (8px) | الفجوة بين عناصر تفاعلية متجاورة |
| gap.md | --spacing-gap-md | space.500 (16px) | فجوة الشبكة أو المرن |
| section.md | --spacing-section-md | space.900 (48px) | الفصل بين أقسام الصفحة |
الاستخدام
.card {
padding: var(--spacing-inset-md);
display: flex;
flex-direction: column;
gap: var(--spacing-stack-sm);
}
.card__actions {
display: flex;
gap: var(--spacing-inline-md);
}
/* No media queries for density: set data-density on any ancestor and
every value above remaps in place, component code untouched. */أخطاء شائعة
| الخطأ | ما يفسد | الصواب |
|---|---|---|
padding: 15px | يتجاهل السلّم ولا يتكيّف مع الكثافة | var(--spacing-inset-md) |
var(--spacing-space-500) | يتجاوز طبقة العائلات، فلا يعيد الربط مع الكثافة | var(--spacing-inset-md) |
| فجوة تفاعلية دون ٨ بكسل | يكسر ثابت خلوص اللمس في الوضع المضغوط | أبقِ فجوات العناصر التفاعلية عند inline.md / space.300 أو أكبر |
| @media يدوي لتضييق المسافات | يكرّر منظومة الكثافة | اضبط data-density ودع الرموز تعيد الربط |
كيف تُستهلك
الرموز مصدرها واحد آلي القراءة (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";