منسق السمة

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

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

232 رمز

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

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

يملأ لون واحد درجات العلامة الاثنتي عشرة كلها بالطريقة التي يتبعها DgaProvider في 1.6.0. يصبح اللون الدرجة 600، وتمزج الدرجات الأخرى منه مع الأبيض أو الأسود في oklab. اضبط أي درجة بعدها من القائمة أدناه.

أدوار السمة

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

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

سلم العلامة

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

سلم العلامة ( --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 {  /* غيّر أي رمز لتوليد التجاوزات */}

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