منسّق السمة

تحكّم كامل بكل رمز.

كل رموز نظام التصميم، قابلة للتعديل حيًّا ومرتّبة كما يعمل التنسيق فعليًّا: الأدوار تقرأ سلّم العلامة، وسلّم العلامة يقرأ السلالم الخام. غيّر قيمة فتتبدّل نبرة المعاينة فورًا - ذاتها متغيّرات --ddga-* التي يقرؤها تطبيقك. انسخ ما غيّرته فقط.

176 رمزًا

كم من التحكّم؟ كلّه.

  • اختر خطوة من السلّم لأي دور، أو اختر «مخصّص» للون دقيق.
  • كل رمز هنا متغيّر CSS عادي - تجاوز أيًّا منها (حتى غير المذكورة) مباشرةً من CSS أو Tailwind:
  • تجاوزات سلّم العلامة والسلالم تعيد التلوين في الوضعين معًا؛ وتجاوز الدور يُصدِّر كتلة داكنة لضبط الوضع الداكن وحده.
[--ddga-color-primary:#7c3aed]

أدوار السمة

الرموز الدلالية التي تقرؤها المكوّنات فعلًا. غيّرها لإعادة تنسيق دور.

الألوان الدلالية
ألوان النص

سلّم العلامة

سلّم العلامة الفعّال. أعِد تلوين كل لون رئيسي وثانوي دفعة واحدة - ويتبع الوضع الداكن تلقائيًّا.

سلّم العلامة ( --ddga-brand-* )

الأسُس

الشكل والإيقاع والخط والارتفاع.

الاستدارة
المسافات والكثافة
الخطوط
الظلال

السلالم الأولية

خطوات اللوحة الخام. الأدوار وسلّم العلامة أعلاه أسماء مستعارة لها - عدّل خطوة لتعيد تشكيل سلّم كامل.

القيم التي غيّرتها

الصقها في ملف CSS يُحمَّل بعد @dev-dga/css. تجاوزات سلّم العلامة والسلالم تعيد التلوين في الوضعين الفاتح والداكن معًا؛ أما تجاوز دور ( --ddga-color-* / --ddga-text-* ) فيسري على الوضعين ما لم تمنحه قيمة [data-theme="dark"] - والمنسّق يضيف تلك الكتلة تلقائيًّا عند تعديل دور.

globals.css
@import '@dev-dga/css'; /* the DGA design system (index.css) - load it first */:root {  /* غيّر أي رمز لتوليد التجاوزات */}

العودة إلى الباني السريع