الوضع الداكن
كيف تُبنى السمة الداكنة، والسلّم المحايد وأدواره، وButton وBadge وTag وLink وأسطح الحالة في الوضعين الفاتح والداكن جنبًا إلى جنب.
الإصدار 0.2.0 ·
الوضع الفاتح هو سمة DGA في Figma. أما الداكن فأُعيد بناؤه منها بمجموعة واحدة من القواعد، لأن الوضع الداكن في Figma ناقص وغير متسق: السطح «الأبيض» أغمق من الصفحة، وبعض الرموز تحتفظ بقيمة فاتحة على خلفية داكنة، والسلّم المحايد رمادي مزرق بارد يتنافر مع الأخضر الذي هو لون العلامة. كل رمز يغيّره إعادة البناء مسجَّل تحت Dark theme في صفحة الاختلافات.
القواعد
- سلّم محايد واحد بصبغة خفيفة.
colors-neutral-dark-25 … 950(درجة اللون في OKLCH 172، وكثافة لونية من 0.004 إلى 0.016): صبغة خضراء خفيفة تناسب العلامة، لا رمادي مسطح ولا أسود خالص. - الأدوار. الصفحة 950، والسطح 900، والمرتفع 850، والحدود 800، والحدود القوية 700، والنص 50، وفقرة النص الثانوي 300، والنص الخافت 400. كل طبقة أفتح من التي تحتها.
- الألوان. النصوص والأيقونات بالدرجة 300 من سلّم اللون نفسه، والحدود القوية 500، والحدود الخفيفة وذات الإطار فقط من 700 إلى 800. تقع الشارات والوسوم ووسوم الحالة والتنبيهات والأيقونات المميزة على تظليل خفيف: لون الدرجة الأساسية من سلّم اللون نفسه بإضاءة وكثافة لونية ثابتتين في OKLCH، فيتساوى حضور كل الألوان ولا ينحرف أي منها إلى البنّي (الكهرماني والبنفسجي يستخدمان درجتهما 400). وتحتفظ تعبئات الأزرار بقيمتها الفاتحة: النص عليها أبيض في الوضعين، وأي درجة أفتح تنزل به دون 4.5:1.
- نظام واحد. لكل رمز دلالي في الفاتح مقابل في الداكن بالدور نفسه، فتحافظ المكوّنات على التسلسل ذاته في الوضعين.
- بلا ظلال. الارتفاع يظهر بسطح أفتح مع حد.
- بلا وميض. يُضبط صنف السمة قبل أول رسم، فلا تفتح الصفحة فاتحةً ثم تتبدل.
- التباين. كل زوج داكن داخل الفحص (التقرير)، ويفشل البناء عند أي تراجع.
السلّم المحايد
| الدرجة | اللون | الدور | على السطح 900 |
|---|---|---|---|
| 950 | #0d1311 | الصفحة (الخلفية) | 1.07:1 |
| 900 | #141b19 | السطح (البطاقة، الشريط الجانبي) | 1.00:1 |
| 850 | #1b2421 | المرتفع (القائمة، النافذة المنبثقة) | 1.10:1 |
| 800 | #242e2a | الحدود | 1.24:1 |
| 700 | #37413d | الحدود القوية | 1.65:1 |
| 600 | #4a5651 | 2.28:1 | |
| 500 | #6c7873 | 3.80:1 | |
| 400 | #939e9a | النص الخافت | 6.32:1 AA |
| 300 | #b6c0bd | النص الثانوي | 9.38:1 AAA |
| 200 | #d0d8d5 | نص الفقرات الأساسي | 12.04:1 AAA |
| 100 | #e4ebe9 | 14.45:1 AAA | |
| 50 | #f0f5f3 | النص | 15.87:1 AAA |
| 25 | #f8fbfa | 16.80:1 AAA |
الفاتح والداكن جنبًا إلى جنب
العمودان أدناه هما الشيفرة نفسها داخل نطاقي data-theme="light" وdata-theme="dark"، فما تراه هو ما يُشحن. الجدول الكامل لكل رمز، بقيمته ونسبة تباينه، في صفحة الألوان.
الفاتح
الأسطح: الصفحة، السطح، المرتفع
النص: الافتراضي، الفقرة الأساسي، الفقرة الثانوي
الزر (Button)
الزر المدمّر
الشارة (Badge)
الشارة بإطار
الوسم ووسم الحالة (Tag وStatus Tag)
الرابط (Link)
أسطح شبيهة بالتنبيهات
تم إرسال الطلب
ستصلك رسالة نصية عند مراجعته.
ساعات الخدمة
من الأحد إلى الخميس، من 8:00 إلى 16:00.
تنتهي صلاحية المستند قريبًا
جدّده خلال 14 يومًا لتجنّب الرسوم.
فشلت عملية الدفع
تحقق من بيانات البطاقة وحاول مرة أخرى.
الأيقونة المميزة (Featured Icon)
الداكن
الأسطح: الصفحة، السطح، المرتفع
النص: الافتراضي، الفقرة الأساسي، الفقرة الثانوي
الزر (Button)
الزر المدمّر
الشارة (Badge)
الشارة بإطار
الوسم ووسم الحالة (Tag وStatus Tag)
الرابط (Link)
أسطح شبيهة بالتنبيهات
تم إرسال الطلب
ستصلك رسالة نصية عند مراجعته.
ساعات الخدمة
من الأحد إلى الخميس، من 8:00 إلى 16:00.
تنتهي صلاحية المستند قريبًا
جدّده خلال 14 يومًا لتجنّب الرسوم.
فشلت عملية الدفع
تحقق من بيانات البطاقة وحاول مرة أخرى.