تخطَّ إلى المحتوى

الوضع الداكن

كيف تُبنى السمة الداكنة، والسلّم المحايد وأدواره، و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#4a56512.28:1
500#6c78733.80:1
400#939e9aالنص الخافت6.32:1 AA
300#b6c0bdالنص الثانوي9.38:1 AAA
200#d0d8d5نص الفقرات الأساسي12.04:1 AAA
100#e4ebe914.45:1 AAA
50#f0f5f3النص15.87:1 AAA
25#f8fbfa16.80:1 AAA

الفاتح والداكن جنبًا إلى جنب

العمودان أدناه هما الشيفرة نفسها داخل نطاقي data-theme="light" وdata-theme="dark"، فما تراه هو ما يُشحن. الجدول الكامل لكل رمز، بقيمته ونسبة تباينه، في صفحة الألوان.

الفاتح

الأسطح: الصفحة، السطح، المرتفع

الصفحةالسطحالمرتفع

النص: الافتراضي، الفقرة الأساسي، الفقرة الثانوي

افتراضيأساسيثانويالعلامة

الزر (Button)

الزر المدمّر

الشارة (Badge)

neutralsuccesserrorwarninginfopurpleorange

الشارة بإطار

neutralsuccesserrorwarninginfo

الوسم ووسم الحالة (Tag وStatus Tag)

neutralsuccessinfowarningerrorneutralsuccessinfowarningerror

الرابط (Link)

أسطح شبيهة بالتنبيهات

  • تم إرسال الطلب

    ستصلك رسالة نصية عند مراجعته.

  • ساعات الخدمة

    من الأحد إلى الخميس، من 8:00 إلى 16:00.

  • تنتهي صلاحية المستند قريبًا

    جدّده خلال 14 يومًا لتجنّب الرسوم.

  • فشلت عملية الدفع

    تحقق من بيانات البطاقة وحاول مرة أخرى.

الأيقونة المميزة (Featured Icon)

الداكن

الأسطح: الصفحة، السطح، المرتفع

الصفحةالسطحالمرتفع

النص: الافتراضي، الفقرة الأساسي، الفقرة الثانوي

افتراضيأساسيثانويالعلامة

الزر (Button)

الزر المدمّر

الشارة (Badge)

neutralsuccesserrorwarninginfopurpleorange

الشارة بإطار

neutralsuccesserrorwarninginfo

الوسم ووسم الحالة (Tag وStatus Tag)

neutralsuccessinfowarningerrorneutralsuccessinfowarningerror

الرابط (Link)

أسطح شبيهة بالتنبيهات

  • تم إرسال الطلب

    ستصلك رسالة نصية عند مراجعته.

  • ساعات الخدمة

    من الأحد إلى الخميس، من 8:00 إلى 16:00.

  • تنتهي صلاحية المستند قريبًا

    جدّده خلال 14 يومًا لتجنّب الرسوم.

  • فشلت عملية الدفع

    تحقق من بيانات البطاقة وحاول مرة أخرى.

الأيقونة المميزة (Featured Icon)